@extends('frontend.layouts.template-base')

@section('meta_tags')
  @include('frontend.layouts.meta-tags', ['title' => 'Shop By Price', 'page' => 'shop-by-price'])
@endsection

@section('styles')

@endsection


@section('content')
  <section class="grocery-tab-sec space shop-tab-sec">
    <div class="breadcrumb-nav pt-4">
      <a href="{{ route('frontend.grocery') }}">Grocery</a> <i class="fa-solid fa-chevron-right"></i> <span>Shop by
        Price</span>
    </div>
    <div class="container-fluid ">
      <div class="row mb-4  align-items-center">
        <div class="col-6 col-lg-8 col-md-6">
          <div class="title-container">
            <h2 class="section-title mb-0">Shop By Price</h2>
          </div>
        </div>
        <div class="col-6 col-md-6 col-lg-4 d-flex justify-content-end">

        </div>
      </div>
      <div class="section-wrap">

        <!-- ── PRICE TABS ── -->
        <div class="price-tabs" id="priceTabs">
          <button class="tab-btn active" data-tab="45">Under <span class="rupee">₹45</span></button>
          <button class="tab-btn" data-tab="99">Under <span class="rupee">₹99</span></button>
          <button class="tab-btn" data-tab="149">Under <span class="rupee">₹149</span></button>
          <button class="tab-btn" data-tab="199">Under <span class="rupee">₹199</span></button>
          <button class="tab-btn" data-tab="249">Under <span class="rupee">₹249</span></button>
        </div>

        <!-- ── TAB PANELS ── -->
        <div class="cards-viewport">

          <!-- Tab: Under ₹45 -->
          <div class="tab-panel active" id="tab-45">
            <div class="row frequent-sec">
              <!-- Slide 1 -->
              <div class="col-lg-2 col-md-4 col-6">
                <div class="card product-card">
                  <div class="img-area">
                    <div class="img-placeholder">
                      <img src="{{asset('assets/images/img/wheat.png') }}" alt="Product Image">
                    </div>
                    <span class="pro-orange-badge">17% Off</span>
                    <button class="wishlist-btn">
                      <svg class="heart" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="none"
                        stroke-width="5" stroke-linecap="round" stroke-linejoin="round">
                        <path
                          d="M50 85 C30 70, 10 58, 10 38 C10 22, 22 12, 35 12 C42 12, 47 16, 50 20 C53 16, 58 12, 65 12 C78 12, 90 22, 90 38 C90 58, 70 70, 50 85 Z" />
                      </svg>

                    </button>
                    <div class="cart-btn" id="cartBtn">

                      <div class="counter-area">
                        <div class="minus-btn" id="minusBtn">−</div>
                        <div class="count-val" id="countVal">1</div>
                      </div>

                      <div class="plus-icon" id="plusIcon">
                        <svg width="20" height="20" viewBox="0 0 20 20">
                          <line x1="10" y1="4" x2="10" y2="16" stroke="#1a7a2e" stroke-width="2.5" stroke-linecap="round"
                            id="vLine" />
                          <line x1="4" y1="10" x2="16" y2="10" stroke="#1a7a2e" stroke-width="2.5" stroke-linecap="round"
                            id="hLine" />
                        </svg>
                      </div>

                    </div>
                  </div>
                  <div class="info">
                    <div class="price-row">
                      <span class="price-now">₹249</span>
                      <span class="price-old">₹299</span>
                    </div>
                    <div class="prod-name">Aashirvaad Whole Wheat At Our Shop</div>
                    <div class="qty-dropdown">
                      <button class="qty-selected" type="button">
                        <span class="selected-text">1 kg</span>
                        <i class="fas fa-chevron-down"></i>
                      </button>

                      <ul class="qty-menu">
                        <li data-value="1 kg" class="active">1 kg</li>
                        <li data-value="5 kg">5 kg</li>
                        <li data-value="10 kg">10 kg</li>
                        <li data-value="500 g">500 g</li>
                      </ul>
                    </div>
                  </div>
                </div>
              </div>

              <!-- Slide 2 -->
              <div class="col-lg-2 col-md-4 col-6">
                <div class="card product-card">
                  <div class="img-area">
                    <div class="img-placeholder">
                      <img src="{{asset('assets/images/img/oil.png') }}" alt="Product Image">
                    </div>
                    <span class="pro-orange-badge">17% Off</span>
                    <button class="wishlist-btn">
                      <svg class="heart" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="none"
                        stroke-width="5" stroke-linecap="round" stroke-linejoin="round">
                        <path
                          d="M50 85 C30 70, 10 58, 10 38 C10 22, 22 12, 35 12 C42 12, 47 16, 50 20 C53 16, 58 12, 65 12 C78 12, 90 22, 90 38 C90 58, 70 70, 50 85 Z" />
                      </svg>

                    </button>
                    <div class="cart-btn" id="cartBtn">

                      <div class="counter-area">
                        <div class="minus-btn" id="minusBtn">−</div>
                        <div class="count-val" id="countVal">1</div>
                      </div>

                      <div class="plus-icon" id="plusIcon">
                        <svg width="20" height="20" viewBox="0 0 20 20">
                          <line x1="10" y1="4" x2="10" y2="16" stroke="#1a7a2e" stroke-width="2.5" stroke-linecap="round"
                            id="vLine" />
                          <line x1="4" y1="10" x2="16" y2="10" stroke="#1a7a2e" stroke-width="2.5" stroke-linecap="round"
                            id="hLine" />
                        </svg>
                      </div>

                    </div>
                  </div>
                  <div class="info">
                    <div class="price-row">
                      <span class="price-now">₹249</span>
                      <span class="price-old">₹299</span>
                    </div>
                    <div class="prod-name">Aashirvaad Whole Wheat At Our Shop</div>
                    <div class="qty-dropdown">
                      <button class="qty-selected" type="button">
                        <span class="selected-text">1 lt</span>
                        <i class="fas fa-chevron-down"></i>
                      </button>

                      <ul class="qty-menu">
                        <li data-value="1 lt" class="active">1 lt</li>
                        <li data-value="5 lt">5 lt</li>
                        <li data-value="10 lt">10 lt</li>
                        <li data-value="500 ml">500 ml</li>
                      </ul>
                    </div>
                  </div>
                </div>

              </div>

              <!-- Slide 3 -->
              <div class="col-lg-2 col-md-4 col-6">
                <div class="card product-card">
                  <div class="img-area">
                    <div class="img-placeholder">
                      <img src="{{asset('assets/images/img/salt.png') }}" alt="Product Image">
                    </div>
                    <span class="pro-orange-badge">17% Off</span>
                    <button class="wishlist-btn">
                      <svg class="heart" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="none"
                        stroke-width="5" stroke-linecap="round" stroke-linejoin="round">
                        <path
                          d="M50 85 C30 70, 10 58, 10 38 C10 22, 22 12, 35 12 C42 12, 47 16, 50 20 C53 16, 58 12, 65 12 C78 12, 90 22, 90 38 C90 58, 70 70, 50 85 Z" />
                      </svg>

                    </button>
                    <div class="cart-btn" id="cartBtn">

                      <div class="counter-area">
                        <div class="minus-btn" id="minusBtn">−</div>
                        <div class="count-val" id="countVal">1</div>
                      </div>

                      <div class="plus-icon" id="plusIcon">
                        <svg width="20" height="20" viewBox="0 0 20 20">
                          <line x1="10" y1="4" x2="10" y2="16" stroke="#1a7a2e" stroke-width="2.5" stroke-linecap="round"
                            id="vLine" />
                          <line x1="4" y1="10" x2="16" y2="10" stroke="#1a7a2e" stroke-width="2.5" stroke-linecap="round"
                            id="hLine" />
                        </svg>
                      </div>

                    </div>
                  </div>
                  <div class="info">
                    <div class="price-row">
                      <span class="price-now">₹249</span>
                      <span class="price-old">₹299</span>
                    </div>
                    <div class="prod-name">Aashirvaad Whole Wheat At Our Shop</div>
                    <div class="prod-qty">
                      1 kg
                    </div>
                  </div>
                </div>

              </div>
              <!-- Slide 4-->
              <div class="col-lg-2 col-md-4 col-6">
                <div class="card product-card">
                  <div class="img-area">
                    <div class="img-placeholder">
                      <img src="{{asset('assets/images/img/biscuit.png') }}" alt="Product Image">
                    </div>
                    <span class="pro-orange-badge">17% Off</span>
                    <button class="wishlist-btn">
                      <svg class="heart" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="none"
                        stroke-width="5" stroke-linecap="round" stroke-linejoin="round">
                        <path
                          d="M50 85 C30 70, 10 58, 10 38 C10 22, 22 12, 35 12 C42 12, 47 16, 50 20 C53 16, 58 12, 65 12 C78 12, 90 22, 90 38 C90 58, 70 70, 50 85 Z" />
                      </svg>

                    </button>
                    <div class="cart-btn" id="cartBtn">

                      <div class="counter-area">
                        <div class="minus-btn" id="minusBtn">−</div>
                        <div class="count-val" id="countVal">1</div>
                      </div>

                      <div class="plus-icon" id="plusIcon">
                        <svg width="20" height="20" viewBox="0 0 20 20">
                          <line x1="10" y1="4" x2="10" y2="16" stroke="#1a7a2e" stroke-width="2.5" stroke-linecap="round"
                            id="vLine" />
                          <line x1="4" y1="10" x2="16" y2="10" stroke="#1a7a2e" stroke-width="2.5" stroke-linecap="round"
                            id="hLine" />
                        </svg>
                      </div>

                    </div>
                  </div>
                  <div class="info">
                    <div class="price-row">
                      <span class="price-now">₹249</span>
                      <span class="price-old">₹299</span>
                    </div>
                    <div class="prod-name">Aashirvaad Whole Wheat At Our Shop</div>
                    <div class="prod-qty">
                      1 kg
                    </div>
                  </div>
                </div>

              </div>
              <!-- Slide 5 -->
              <div class="col-lg-2 col-md-4 col-6">
                <div class="card product-card">
                  <div class="img-area">
                    <div class="img-placeholder">
                      <img src="{{asset('assets/images/img/onion.png') }}" alt="Product Image">
                    </div>
                    <span class="pro-orange-badge">17% Off</span>
                    <button class="wishlist-btn">
                      <svg class="heart" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="none"
                        stroke-width="5" stroke-linecap="round" stroke-linejoin="round">
                        <path
                          d="M50 85 C30 70, 10 58, 10 38 C10 22, 22 12, 35 12 C42 12, 47 16, 50 20 C53 16, 58 12, 65 12 C78 12, 90 22, 90 38 C90 58, 70 70, 50 85 Z" />
                      </svg>

                    </button>
                    <div class="cart-btn" id="cartBtn">

                      <div class="counter-area">
                        <div class="minus-btn" id="minusBtn">−</div>
                        <div class="count-val" id="countVal">1</div>
                      </div>

                      <div class="plus-icon" id="plusIcon">
                        <svg width="20" height="20" viewBox="0 0 20 20">
                          <line x1="10" y1="4" x2="10" y2="16" stroke="#1a7a2e" stroke-width="2.5" stroke-linecap="round"
                            id="vLine" />
                          <line x1="4" y1="10" x2="16" y2="10" stroke="#1a7a2e" stroke-width="2.5" stroke-linecap="round"
                            id="hLine" />
                        </svg>
                      </div>

                    </div>
                  </div>
                  <div class="info">
                    <div class="price-row">
                      <span class="price-now">₹249</span>
                      <span class="price-old">₹299</span>
                    </div>
                    <div class="prod-name">Aashirvaad Whole Wheat At Our Shop</div>
                    <div class="qty-dropdown">
                      <button class="qty-selected" type="button">
                        <span class="selected-text">1 kg</span>
                        <i class="fas fa-chevron-down"></i>
                      </button>

                      <ul class="qty-menu">
                        <li data-value="1 kg" class="active">1 kg</li>
                        <li data-value="5 kg">5 kg</li>
                        <li data-value="10 kg">10 kg</li>
                        <li data-value="500 g">500 g</li>
                      </ul>
                    </div>
                  </div>
                </div>

              </div>
              <!-- Slide 6-->
              <div class="col-lg-2 col-md-4 col-6">
                <div class="card product-card">
                  <div class="img-area">
                    <div class="img-placeholder">
                      <img src="{{asset('assets/images/img/ice-cream.png') }}" alt="Product Image">
                    </div>
                    <span class="pro-orange-badge">17% Off</span>
                    <button class="wishlist-btn">
                      <svg class="heart" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="none"
                        stroke-width="5" stroke-linecap="round" stroke-linejoin="round">
                        <path
                          d="M50 85 C30 70, 10 58, 10 38 C10 22, 22 12, 35 12 C42 12, 47 16, 50 20 C53 16, 58 12, 65 12 C78 12, 90 22, 90 38 C90 58, 70 70, 50 85 Z" />
                      </svg>

                    </button>
                    <div class="cart-btn" id="cartBtn">

                      <div class="counter-area">
                        <div class="minus-btn" id="minusBtn">−</div>
                        <div class="count-val" id="countVal">1</div>
                      </div>

                      <div class="plus-icon" id="plusIcon">
                        <svg width="20" height="20" viewBox="0 0 20 20">
                          <line x1="10" y1="4" x2="10" y2="16" stroke="#1a7a2e" stroke-width="2.5" stroke-linecap="round"
                            id="vLine" />
                          <line x1="4" y1="10" x2="16" y2="10" stroke="#1a7a2e" stroke-width="2.5" stroke-linecap="round"
                            id="hLine" />
                        </svg>
                      </div>

                    </div>
                  </div>
                  <div class="info">
                    <div class="price-row">
                      <span class="price-now">₹249</span>
                      <span class="price-old">₹299</span>
                    </div>
                    <div class="prod-name">Aashirvaad Whole Wheat At Our Shop</div>
                    <div class="prod-qty">
                      Pack: 100g
                    </div>
                  </div>
                </div>

              </div>

            </div>
            <div class="row frequent-sec">

              <!-- Slide 1 -->
              <div class="col-lg-2 col-md-4 col-6">
                <div class="card product-card">
                  <div class="img-area">
                    <div class="img-placeholder">
                      <img src="{{asset('assets/images/img/wheat.png') }}" alt="Product Image">
                    </div>
                    <span class="pro-orange-badge">17% Off</span>
                    <button class="wishlist-btn">
                      <svg class="heart" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="none"
                        stroke-width="5" stroke-linecap="round" stroke-linejoin="round">
                        <path
                          d="M50 85 C30 70, 10 58, 10 38 C10 22, 22 12, 35 12 C42 12, 47 16, 50 20 C53 16, 58 12, 65 12 C78 12, 90 22, 90 38 C90 58, 70 70, 50 85 Z" />
                      </svg>

                    </button>
                    <div class="cart-btn" id="cartBtn">

                      <div class="counter-area">
                        <div class="minus-btn" id="minusBtn">−</div>
                        <div class="count-val" id="countVal">1</div>
                      </div>

                      <div class="plus-icon" id="plusIcon">
                        <svg width="20" height="20" viewBox="0 0 20 20">
                          <line x1="10" y1="4" x2="10" y2="16" stroke="#1a7a2e" stroke-width="2.5" stroke-linecap="round"
                            id="vLine" />
                          <line x1="4" y1="10" x2="16" y2="10" stroke="#1a7a2e" stroke-width="2.5" stroke-linecap="round"
                            id="hLine" />
                        </svg>
                      </div>

                    </div>
                  </div>
                  <div class="info">
                    <div class="price-row">
                      <span class="price-now">₹249</span>
                      <span class="price-old">₹299</span>
                    </div>
                    <div class="hurry-time">
                      <img src="{{ asset('assets/images/icon/hurry.svg') }}" alt="Hurry Time" loading="lazy">
                      <span>01:38:11</span>
                    </div>
                    <div class="prod-name">Aashirvaad Whole Wheat At Our Shop</div>
                    <div class="prod-qty">
                      1 kg
                    </div>
                  </div>
                </div>
              </div>

              <!-- Slide 2 -->
              <div class="col-lg-2 col-md-4 col-6">
                <div class="card product-card">
                  <div class="img-area">
                    <div class="img-placeholder">
                      <img src="{{asset('assets/images/img/oil.png') }}" alt="Product Image">
                    </div>
                    <span class="pro-orange-badge">17% Off</span>
                    <button class="wishlist-btn">
                      <svg class="heart" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="none"
                        stroke-width="5" stroke-linecap="round" stroke-linejoin="round">
                        <path
                          d="M50 85 C30 70, 10 58, 10 38 C10 22, 22 12, 35 12 C42 12, 47 16, 50 20 C53 16, 58 12, 65 12 C78 12, 90 22, 90 38 C90 58, 70 70, 50 85 Z" />
                      </svg>

                    </button>
                    <div class="cart-btn" id="cartBtn">

                      <div class="counter-area">
                        <div class="minus-btn" id="minusBtn">−</div>
                        <div class="count-val" id="countVal">1</div>
                      </div>

                      <div class="plus-icon" id="plusIcon">
                        <svg width="20" height="20" viewBox="0 0 20 20">
                          <line x1="10" y1="4" x2="10" y2="16" stroke="#1a7a2e" stroke-width="2.5" stroke-linecap="round"
                            id="vLine" />
                          <line x1="4" y1="10" x2="16" y2="10" stroke="#1a7a2e" stroke-width="2.5" stroke-linecap="round"
                            id="hLine" />
                        </svg>
                      </div>

                    </div>
                  </div>
                  <div class="info">
                    <div class="price-row">
                      <span class="price-now">₹249</span>
                      <span class="price-old">₹299</span>
                    </div>
                    <div class="hurry-time">
                      <img src="{{ asset('assets/images/icon/hurry.svg') }}" alt="Hurry Time" loading="lazy">
                      <span>01:38:11</span>
                    </div>
                    <div class="prod-name">Aashirvaad Whole Wheat At Our Shop</div>
                    <div class="prod-qty">
                      1 kg
                    </div>
                  </div>
                </div>

              </div>

              <!-- Slide 3 -->
              <div class="col-lg-2 col-md-4 col-6">
                <div class="card product-card">
                  <div class="img-area">
                    <div class="img-placeholder">
                      <img src="{{asset('assets/images/img/salt.png') }}" alt="Product Image">
                    </div>
                    <span class="pro-orange-badge">17% Off</span>
                    <button class="wishlist-btn">
                      <svg class="heart" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="none"
                        stroke-width="5" stroke-linecap="round" stroke-linejoin="round">
                        <path
                          d="M50 85 C30 70, 10 58, 10 38 C10 22, 22 12, 35 12 C42 12, 47 16, 50 20 C53 16, 58 12, 65 12 C78 12, 90 22, 90 38 C90 58, 70 70, 50 85 Z" />
                      </svg>

                    </button>
                    <div class="cart-btn" id="cartBtn">

                      <div class="counter-area">
                        <div class="minus-btn" id="minusBtn">−</div>
                        <div class="count-val" id="countVal">1</div>
                      </div>

                      <div class="plus-icon" id="plusIcon">
                        <svg width="20" height="20" viewBox="0 0 20 20">
                          <line x1="10" y1="4" x2="10" y2="16" stroke="#1a7a2e" stroke-width="2.5" stroke-linecap="round"
                            id="vLine" />
                          <line x1="4" y1="10" x2="16" y2="10" stroke="#1a7a2e" stroke-width="2.5" stroke-linecap="round"
                            id="hLine" />
                        </svg>
                      </div>

                    </div>
                  </div>
                  <div class="info">
                    <div class="price-row">
                      <span class="price-now">₹249</span>
                      <span class="price-old">₹299</span>
                    </div>
                    <div class="hurry-time">
                      <img src="{{ asset('assets/images/icon/hurry.svg') }}" alt="Hurry Time" loading="lazy">
                      <span>01:38:11</span>
                    </div>
                    <div class="prod-name">Aashirvaad Whole Wheat At Our Shop</div>
                    <div class="prod-qty">
                      2
                    </div>
                  </div>
                </div>

              </div>
              <!-- Slide 4-->
              <div class="col-lg-2 col-md-4 col-6">
                <div class="card product-card">
                  <div class="img-area">
                    <div class="img-placeholder">
                      <img src="{{asset('assets/images/img/biscuit.png') }}" alt="Product Image">
                    </div>
                    <span class="pro-orange-badge">17% Off</span>
                    <button class="wishlist-btn">
                      <svg class="heart" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="none"
                        stroke-width="5" stroke-linecap="round" stroke-linejoin="round">
                        <path
                          d="M50 85 C30 70, 10 58, 10 38 C10 22, 22 12, 35 12 C42 12, 47 16, 50 20 C53 16, 58 12, 65 12 C78 12, 90 22, 90 38 C90 58, 70 70, 50 85 Z" />
                      </svg>

                    </button>
                    <div class="cart-btn" id="cartBtn">

                      <div class="counter-area">
                        <div class="minus-btn" id="minusBtn">−</div>
                        <div class="count-val" id="countVal">1</div>
                      </div>

                      <div class="plus-icon" id="plusIcon">
                        <svg width="20" height="20" viewBox="0 0 20 20">
                          <line x1="10" y1="4" x2="10" y2="16" stroke="#1a7a2e" stroke-width="2.5" stroke-linecap="round"
                            id="vLine" />
                          <line x1="4" y1="10" x2="16" y2="10" stroke="#1a7a2e" stroke-width="2.5" stroke-linecap="round"
                            id="hLine" />
                        </svg>
                      </div>

                    </div>
                  </div>
                  <div class="info">
                    <div class="price-row">
                      <span class="price-now">₹249</span>
                      <span class="price-old">₹299</span>
                    </div>
                    <div class="hurry-time">
                      <img src="{{ asset('assets/images/icon/hurry.svg') }}" alt="Hurry Time" loading="lazy">
                      <span>01:38:11</span>
                    </div>
                    <div class="prod-name">Aashirvaad Whole Wheat At Our Shop</div>
                    <div class="prod-qty">
                      1 Lt
                    </div>
                  </div>
                </div>

              </div>
              <!-- Slide 5 -->
              <div class="col-lg-2 col-md-4 col-6">
                <div class="card product-card">
                  <div class="img-area">
                    <div class="img-placeholder">
                      <img src="{{asset('assets/images/img/onion.png') }}" alt="Product Image">
                    </div>
                    <span class="pro-orange-badge">17% Off</span>
                    <button class="wishlist-btn">
                      <svg class="heart" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="none"
                        stroke-width="5" stroke-linecap="round" stroke-linejoin="round">
                        <path
                          d="M50 85 C30 70, 10 58, 10 38 C10 22, 22 12, 35 12 C42 12, 47 16, 50 20 C53 16, 58 12, 65 12 C78 12, 90 22, 90 38 C90 58, 70 70, 50 85 Z" />
                      </svg>

                    </button>
                    <div class="cart-btn" id="cartBtn">

                      <div class="counter-area">
                        <div class="minus-btn" id="minusBtn">−</div>
                        <div class="count-val" id="countVal">1</div>
                      </div>

                      <div class="plus-icon" id="plusIcon">
                        <svg width="20" height="20" viewBox="0 0 20 20">
                          <line x1="10" y1="4" x2="10" y2="16" stroke="#1a7a2e" stroke-width="2.5" stroke-linecap="round"
                            id="vLine" />
                          <line x1="4" y1="10" x2="16" y2="10" stroke="#1a7a2e" stroke-width="2.5" stroke-linecap="round"
                            id="hLine" />
                        </svg>
                      </div>

                    </div>
                  </div>
                  <div class="info">
                    <div class="price-row">
                      <span class="price-now">₹249</span>
                      <span class="price-old">₹299</span>
                    </div>
                    <div class="hurry-time">
                      <img src="{{ asset('assets/images/icon/hurry.svg') }}" alt="Hurry Time" loading="lazy">
                      <span>01:38:11</span>
                    </div>
                    <div class="prod-name">Aashirvaad Whole Wheat At Our Shop</div>

                    <div class="qty-dropdown">
                      <button class="qty-selected" type="button">
                        <span class="selected-text">1 kg</span>
                        <i class="fas fa-chevron-down"></i>
                      </button>

                      <ul class="qty-menu">
                        <li data-value="1 kg" class="active">1 kg</li>
                        <li data-value="5 kg">5 kg</li>
                        <li data-value="10 kg">10 kg</li>
                        <li data-value="500 g">500 g</li>
                      </ul>
                    </div>
                  </div>
                </div>

              </div>
              <!-- Slide 6-->
              <div class="col-lg-2 col-md-4 col-6">
                <div class="card product-card">
                  <div class="img-area">
                    <div class="img-placeholder">
                      <img src="{{asset('assets/images/img/ice-cream.png') }}" alt="Product Image">
                    </div>
                    <span class="pro-orange-badge">17% Off</span>
                    <button class="wishlist-btn">
                      <svg class="heart" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="none"
                        stroke-width="5" stroke-linecap="round" stroke-linejoin="round">
                        <path
                          d="M50 85 C30 70, 10 58, 10 38 C10 22, 22 12, 35 12 C42 12, 47 16, 50 20 C53 16, 58 12, 65 12 C78 12, 90 22, 90 38 C90 58, 70 70, 50 85 Z" />
                      </svg>

                    </button>
                    <div class="cart-btn" id="cartBtn">

                      <div class="counter-area">
                        <div class="minus-btn" id="minusBtn">−</div>
                        <div class="count-val" id="countVal">1</div>
                      </div>

                      <div class="plus-icon" id="plusIcon">
                        <svg width="20" height="20" viewBox="0 0 20 20">
                          <line x1="10" y1="4" x2="10" y2="16" stroke="#1a7a2e" stroke-width="2.5" stroke-linecap="round"
                            id="vLine" />
                          <line x1="4" y1="10" x2="16" y2="10" stroke="#1a7a2e" stroke-width="2.5" stroke-linecap="round"
                            id="hLine" />
                        </svg>
                      </div>

                    </div>
                  </div>
                  <div class="info">
                    <div class="price-row">
                      <span class="price-now">₹249</span>
                      <span class="price-old">₹299</span>
                    </div>
                    <div class="hurry-time">
                      <img src="{{ asset('assets/images/icon/hurry.svg') }}" alt="Hurry Time" loading="lazy">
                      <span>01:38:11</span>
                    </div>
                    <div class="prod-name">Aashirvaad Whole Wheat At Our Shop</div>
                    <div class="prod-qty">
                      5 kg
                    </div>
                  </div>
                </div>

              </div>

            </div>
            <div class="row frequent-sec">

              <!-- Slide 1 -->
              <div class="col-lg-2 col-md-4 col-6">
                <div class="card product-card">
                  <div class="img-area">
                    <div class="img-placeholder">
                      <img src="{{asset('assets/images/img/wheat.png') }}" alt="Product Image">
                    </div>
                    <span class="pro-orange-badge">17% Off</span>
                    <button class="wishlist-btn">
                      <svg class="heart" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="none"
                        stroke-width="5" stroke-linecap="round" stroke-linejoin="round">
                        <path
                          d="M50 85 C30 70, 10 58, 10 38 C10 22, 22 12, 35 12 C42 12, 47 16, 50 20 C53 16, 58 12, 65 12 C78 12, 90 22, 90 38 C90 58, 70 70, 50 85 Z" />
                      </svg>

                    </button>
                    <div class="cart-btn" id="cartBtn">

                      <div class="counter-area">
                        <div class="minus-btn" id="minusBtn">−</div>
                        <div class="count-val" id="countVal">1</div>
                      </div>

                      <div class="plus-icon" id="plusIcon">
                        <svg width="20" height="20" viewBox="0 0 20 20">
                          <line x1="10" y1="4" x2="10" y2="16" stroke="#1a7a2e" stroke-width="2.5" stroke-linecap="round"
                            id="vLine" />
                          <line x1="4" y1="10" x2="16" y2="10" stroke="#1a7a2e" stroke-width="2.5" stroke-linecap="round"
                            id="hLine" />
                        </svg>
                      </div>

                    </div>
                  </div>
                  <div class="info">
                    <div class="price-row">
                      <span class="price-now">₹249</span>
                      <span class="price-old">₹299</span>
                    </div>
                    <div class="hurry-time">
                      <img src="{{ asset('assets/images/icon/hurry.svg') }}" alt="Hurry Time" loading="lazy">
                      <span>01:38:11</span>
                    </div>
                    <div class="prod-name">Aashirvaad Whole Wheat At Our Shop</div>
                    <div class="prod-qty">
                      1 kg
                    </div>
                  </div>
                </div>
              </div>

              <!-- Slide 2 -->
              <div class="col-lg-2 col-md-4 col-6">
                <div class="card product-card">
                  <div class="img-area">
                    <div class="img-placeholder">
                      <img src="{{asset('assets/images/img/oil.png') }}" alt="Product Image">
                    </div>
                    <span class="pro-orange-badge">17% Off</span>
                    <button class="wishlist-btn">
                      <svg class="heart" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="none"
                        stroke-width="5" stroke-linecap="round" stroke-linejoin="round">
                        <path
                          d="M50 85 C30 70, 10 58, 10 38 C10 22, 22 12, 35 12 C42 12, 47 16, 50 20 C53 16, 58 12, 65 12 C78 12, 90 22, 90 38 C90 58, 70 70, 50 85 Z" />
                      </svg>

                    </button>
                    <div class="cart-btn" id="cartBtn">

                      <div class="counter-area">
                        <div class="minus-btn" id="minusBtn">−</div>
                        <div class="count-val" id="countVal">1</div>
                      </div>

                      <div class="plus-icon" id="plusIcon">
                        <svg width="20" height="20" viewBox="0 0 20 20">
                          <line x1="10" y1="4" x2="10" y2="16" stroke="#1a7a2e" stroke-width="2.5" stroke-linecap="round"
                            id="vLine" />
                          <line x1="4" y1="10" x2="16" y2="10" stroke="#1a7a2e" stroke-width="2.5" stroke-linecap="round"
                            id="hLine" />
                        </svg>
                      </div>

                    </div>
                  </div>
                  <div class="info">
                    <div class="price-row">
                      <span class="price-now">₹249</span>
                      <span class="price-old">₹299</span>
                    </div>
                    <div class="hurry-time">
                      <img src="{{ asset('assets/images/icon/hurry.svg') }}" alt="Hurry Time" loading="lazy">
                      <span>01:38:11</span>
                    </div>
                    <div class="prod-name">Aashirvaad Whole Wheat At Our Shop</div>
                    <div class="prod-qty">
                      1 kg
                    </div>
                  </div>
                </div>

              </div>

              <!-- Slide 3 -->
              <div class="col-lg-2 col-md-4 col-6">
                <div class="card product-card">
                  <div class="img-area">
                    <div class="img-placeholder">
                      <img src="{{asset('assets/images/img/salt.png') }}" alt="Product Image">
                    </div>
                    <span class="pro-orange-badge">17% Off</span>
                    <button class="wishlist-btn">
                      <svg class="heart" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="none"
                        stroke-width="5" stroke-linecap="round" stroke-linejoin="round">
                        <path
                          d="M50 85 C30 70, 10 58, 10 38 C10 22, 22 12, 35 12 C42 12, 47 16, 50 20 C53 16, 58 12, 65 12 C78 12, 90 22, 90 38 C90 58, 70 70, 50 85 Z" />
                      </svg>

                    </button>
                    <div class="cart-btn" id="cartBtn">

                      <div class="counter-area">
                        <div class="minus-btn" id="minusBtn">−</div>
                        <div class="count-val" id="countVal">1</div>
                      </div>

                      <div class="plus-icon" id="plusIcon">
                        <svg width="20" height="20" viewBox="0 0 20 20">
                          <line x1="10" y1="4" x2="10" y2="16" stroke="#1a7a2e" stroke-width="2.5" stroke-linecap="round"
                            id="vLine" />
                          <line x1="4" y1="10" x2="16" y2="10" stroke="#1a7a2e" stroke-width="2.5" stroke-linecap="round"
                            id="hLine" />
                        </svg>
                      </div>

                    </div>
                  </div>
                  <div class="info">
                    <div class="price-row">
                      <span class="price-now">₹249</span>
                      <span class="price-old">₹299</span>
                    </div>
                    <div class="hurry-time">
                      <img src="{{ asset('assets/images/icon/hurry.svg') }}" alt="Hurry Time" loading="lazy">
                      <span>01:38:11</span>
                    </div>
                    <div class="prod-name">Aashirvaad Whole Wheat At Our Shop</div>
                    <div class="prod-qty">
                      2
                    </div>
                  </div>
                </div>

              </div>
              <!-- Slide 4-->
              <div class="col-lg-2 col-md-4 col-6">
                <div class="card product-card">
                  <div class="img-area">
                    <div class="img-placeholder">
                      <img src="{{asset('assets/images/img/biscuit.png') }}" alt="Product Image">
                    </div>
                    <span class="pro-orange-badge">17% Off</span>
                    <button class="wishlist-btn">
                      <svg class="heart" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="none"
                        stroke-width="5" stroke-linecap="round" stroke-linejoin="round">
                        <path
                          d="M50 85 C30 70, 10 58, 10 38 C10 22, 22 12, 35 12 C42 12, 47 16, 50 20 C53 16, 58 12, 65 12 C78 12, 90 22, 90 38 C90 58, 70 70, 50 85 Z" />
                      </svg>

                    </button>
                    <div class="cart-btn" id="cartBtn">

                      <div class="counter-area">
                        <div class="minus-btn" id="minusBtn">−</div>
                        <div class="count-val" id="countVal">1</div>
                      </div>

                      <div class="plus-icon" id="plusIcon">
                        <svg width="20" height="20" viewBox="0 0 20 20">
                          <line x1="10" y1="4" x2="10" y2="16" stroke="#1a7a2e" stroke-width="2.5" stroke-linecap="round"
                            id="vLine" />
                          <line x1="4" y1="10" x2="16" y2="10" stroke="#1a7a2e" stroke-width="2.5" stroke-linecap="round"
                            id="hLine" />
                        </svg>
                      </div>

                    </div>
                  </div>
                  <div class="info">
                    <div class="price-row">
                      <span class="price-now">₹249</span>
                      <span class="price-old">₹299</span>
                    </div>
                    <div class="hurry-time">
                      <img src="{{ asset('assets/images/icon/hurry.svg') }}" alt="Hurry Time" loading="lazy">
                      <span>01:38:11</span>
                    </div>
                    <div class="prod-name">Aashirvaad Whole Wheat At Our Shop</div>
                    <div class="prod-qty">
                      1 Lt
                    </div>
                  </div>
                </div>

              </div>
              <!-- Slide 5 -->
              <div class="col-lg-2 col-md-4 col-6">
                <div class="card product-card">
                  <div class="img-area">
                    <div class="img-placeholder">
                      <img src="{{asset('assets/images/img/onion.png') }}" alt="Product Image">
                    </div>
                    <span class="pro-orange-badge">17% Off</span>
                    <button class="wishlist-btn">
                      <svg class="heart" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="none"
                        stroke-width="5" stroke-linecap="round" stroke-linejoin="round">
                        <path
                          d="M50 85 C30 70, 10 58, 10 38 C10 22, 22 12, 35 12 C42 12, 47 16, 50 20 C53 16, 58 12, 65 12 C78 12, 90 22, 90 38 C90 58, 70 70, 50 85 Z" />
                      </svg>

                    </button>
                    <div class="cart-btn" id="cartBtn">

                      <div class="counter-area">
                        <div class="minus-btn" id="minusBtn">−</div>
                        <div class="count-val" id="countVal">1</div>
                      </div>

                      <div class="plus-icon" id="plusIcon">
                        <svg width="20" height="20" viewBox="0 0 20 20">
                          <line x1="10" y1="4" x2="10" y2="16" stroke="#1a7a2e" stroke-width="2.5" stroke-linecap="round"
                            id="vLine" />
                          <line x1="4" y1="10" x2="16" y2="10" stroke="#1a7a2e" stroke-width="2.5" stroke-linecap="round"
                            id="hLine" />
                        </svg>
                      </div>

                    </div>
                  </div>
                  <div class="info">
                    <div class="price-row">
                      <span class="price-now">₹249</span>
                      <span class="price-old">₹299</span>
                    </div>
                    <div class="hurry-time">
                      <img src="{{ asset('assets/images/icon/hurry.svg') }}" alt="Hurry Time" loading="lazy">
                      <span>01:38:11</span>
                    </div>
                    <div class="prod-name">Aashirvaad Whole Wheat At Our Shop</div>

                    <div class="qty-dropdown">
                      <button class="qty-selected" type="button">
                        <span class="selected-text">1 kg</span>
                        <i class="fas fa-chevron-down"></i>
                      </button>

                      <ul class="qty-menu">
                        <li data-value="1 kg" class="active">1 kg</li>
                        <li data-value="5 kg">5 kg</li>
                        <li data-value="10 kg">10 kg</li>
                        <li data-value="500 g">500 g</li>
                      </ul>
                    </div>
                  </div>
                </div>

              </div>
              <!-- Slide 6-->
              <div class="col-lg-2 col-md-4 col-6">
                <div class="card product-card">
                  <div class="img-area">
                    <div class="img-placeholder">
                      <img src="{{asset('assets/images/img/ice-cream.png') }}" alt="Product Image">
                    </div>
                    <span class="pro-orange-badge">17% Off</span>
                    <button class="wishlist-btn">
                      <svg class="heart" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="none"
                        stroke-width="5" stroke-linecap="round" stroke-linejoin="round">
                        <path
                          d="M50 85 C30 70, 10 58, 10 38 C10 22, 22 12, 35 12 C42 12, 47 16, 50 20 C53 16, 58 12, 65 12 C78 12, 90 22, 90 38 C90 58, 70 70, 50 85 Z" />
                      </svg>

                    </button>
                    <div class="cart-btn" id="cartBtn">

                      <div class="counter-area">
                        <div class="minus-btn" id="minusBtn">−</div>
                        <div class="count-val" id="countVal">1</div>
                      </div>

                      <div class="plus-icon" id="plusIcon">
                        <svg width="20" height="20" viewBox="0 0 20 20">
                          <line x1="10" y1="4" x2="10" y2="16" stroke="#1a7a2e" stroke-width="2.5" stroke-linecap="round"
                            id="vLine" />
                          <line x1="4" y1="10" x2="16" y2="10" stroke="#1a7a2e" stroke-width="2.5" stroke-linecap="round"
                            id="hLine" />
                        </svg>
                      </div>

                    </div>
                  </div>
                  <div class="info">
                    <div class="price-row">
                      <span class="price-now">₹249</span>
                      <span class="price-old">₹299</span>
                    </div>
                    <div class="hurry-time">
                      <img src="{{ asset('assets/images/icon/hurry.svg') }}" alt="Hurry Time" loading="lazy">
                      <span>01:38:11</span>
                    </div>
                    <div class="prod-name">Aashirvaad Whole Wheat At Our Shop</div>
                    <div class="prod-qty">
                      5 kg
                    </div>
                  </div>
                </div>

              </div>

            </div>

          </div>

          <!-- Tab: Under ₹99 -->
          <div class="tab-panel" id="tab-99">
            <div class="row frequent-sec">
              <!-- Slide 1 -->
              <div class="col-lg-2 col-md-4 col-6">
                <div class="card product-card">
                  <div class="img-area">
                    <div class="img-placeholder">
                      <img src="{{asset('assets/images/img/wheat.png') }}" alt="Product Image">
                    </div>
                    <span class="pro-orange-badge">17% Off</span>
                    <button class="wishlist-btn">
                      <svg class="heart" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="none"
                        stroke-width="5" stroke-linecap="round" stroke-linejoin="round">
                        <path
                          d="M50 85 C30 70, 10 58, 10 38 C10 22, 22 12, 35 12 C42 12, 47 16, 50 20 C53 16, 58 12, 65 12 C78 12, 90 22, 90 38 C90 58, 70 70, 50 85 Z" />
                      </svg>

                    </button>
                    <div class="cart-btn" id="cartBtn">

                      <div class="counter-area">
                        <div class="minus-btn" id="minusBtn">−</div>
                        <div class="count-val" id="countVal">1</div>
                      </div>

                      <div class="plus-icon" id="plusIcon">
                        <svg width="20" height="20" viewBox="0 0 20 20">
                          <line x1="10" y1="4" x2="10" y2="16" stroke="#1a7a2e" stroke-width="2.5" stroke-linecap="round"
                            id="vLine" />
                          <line x1="4" y1="10" x2="16" y2="10" stroke="#1a7a2e" stroke-width="2.5" stroke-linecap="round"
                            id="hLine" />
                        </svg>
                      </div>

                    </div>
                  </div>
                  <div class="info">
                    <div class="price-row">
                      <span class="price-now">₹249</span>
                      <span class="price-old">₹299</span>
                    </div>
                    <div class="prod-name">Aashirvaad Whole Wheat At Our Shop</div>
                    <div class="prod-qty">
                      5 kg
                    </div>
                  </div>
                </div>
              </div>

              <!-- Slide 2 -->
              <div class="col-lg-2 col-md-4 col-6">
                <div class="card product-card">
                  <div class="img-area">
                    <div class="img-placeholder">
                      <img src="{{asset('assets/images/img/oil.png') }}" alt="Product Image">
                    </div>
                    <span class="pro-orange-badge">17% Off</span>
                    <button class="wishlist-btn">
                      <svg class="heart" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="none"
                        stroke-width="5" stroke-linecap="round" stroke-linejoin="round">
                        <path
                          d="M50 85 C30 70, 10 58, 10 38 C10 22, 22 12, 35 12 C42 12, 47 16, 50 20 C53 16, 58 12, 65 12 C78 12, 90 22, 90 38 C90 58, 70 70, 50 85 Z" />
                      </svg>

                    </button>
                    <div class="cart-btn" id="cartBtn">

                      <div class="counter-area">
                        <div class="minus-btn" id="minusBtn">−</div>
                        <div class="count-val" id="countVal">1</div>
                      </div>

                      <div class="plus-icon" id="plusIcon">
                        <svg width="20" height="20" viewBox="0 0 20 20">
                          <line x1="10" y1="4" x2="10" y2="16" stroke="#1a7a2e" stroke-width="2.5" stroke-linecap="round"
                            id="vLine" />
                          <line x1="4" y1="10" x2="16" y2="10" stroke="#1a7a2e" stroke-width="2.5" stroke-linecap="round"
                            id="hLine" />
                        </svg>
                      </div>

                    </div>
                  </div>
                  <div class="info">
                    <div class="price-row">
                      <span class="price-now">₹249</span>
                      <span class="price-old">₹299</span>
                    </div>
                    <div class="prod-name">Aashirvaad Whole Wheat At Our Shop</div>
                    <div class="prod-qty">
                      1 Lt
                    </div>
                  </div>
                </div>

              </div>

              <!-- Slide 3 -->
              <div class="col-lg-2 col-md-4 col-6">
                <div class="card product-card">
                  <div class="img-area">
                    <div class="img-placeholder">
                      <img src="{{asset('assets/images/img/salt.png') }}" alt="Product Image">
                    </div>
                    <span class="pro-orange-badge">17% Off</span>
                    <button class="wishlist-btn">
                      <svg class="heart" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="none"
                        stroke-width="5" stroke-linecap="round" stroke-linejoin="round">
                        <path
                          d="M50 85 C30 70, 10 58, 10 38 C10 22, 22 12, 35 12 C42 12, 47 16, 50 20 C53 16, 58 12, 65 12 C78 12, 90 22, 90 38 C90 58, 70 70, 50 85 Z" />
                      </svg>

                    </button>
                    <div class="cart-btn" id="cartBtn">

                      <div class="counter-area">
                        <div class="minus-btn" id="minusBtn">−</div>
                        <div class="count-val" id="countVal">1</div>
                      </div>

                      <div class="plus-icon" id="plusIcon">
                        <svg width="20" height="20" viewBox="0 0 20 20">
                          <line x1="10" y1="4" x2="10" y2="16" stroke="#1a7a2e" stroke-width="2.5" stroke-linecap="round"
                            id="vLine" />
                          <line x1="4" y1="10" x2="16" y2="10" stroke="#1a7a2e" stroke-width="2.5" stroke-linecap="round"
                            id="hLine" />
                        </svg>
                      </div>

                    </div>
                  </div>
                  <div class="info">
                    <div class="price-row">
                      <span class="price-now">₹249</span>
                      <span class="price-old">₹299</span>
                    </div>
                    <div class="prod-name">Aashirvaad Whole Wheat At Our Shop</div>
                    <div class="prod-qty">
                      1 kg
                    </div>
                  </div>
                </div>

              </div>
            </div>


          </div>

          <!-- Tab: Under ₹149 -->
          <div class="tab-panel" id="tab-149">
            <div class="row frequent-sec">
              <!-- Slide 1 -->
              <div class="col-lg-2 col-md-4 col-6">
                <div class="card product-card">
                  <div class="img-area">
                    <div class="img-placeholder">
                      <img src="{{asset('assets/images/img/wheat.png') }}" alt="Product Image">
                    </div>
                    <span class="pro-orange-badge">17% Off</span>
                    <button class="wishlist-btn">
                      <svg class="heart" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="none"
                        stroke-width="5" stroke-linecap="round" stroke-linejoin="round">
                        <path
                          d="M50 85 C30 70, 10 58, 10 38 C10 22, 22 12, 35 12 C42 12, 47 16, 50 20 C53 16, 58 12, 65 12 C78 12, 90 22, 90 38 C90 58, 70 70, 50 85 Z" />
                      </svg>

                    </button>
                    <div class="cart-btn" id="cartBtn">

                      <div class="counter-area">
                        <div class="minus-btn" id="minusBtn">−</div>
                        <div class="count-val" id="countVal">1</div>
                      </div>

                      <div class="plus-icon" id="plusIcon">
                        <svg width="20" height="20" viewBox="0 0 20 20">
                          <line x1="10" y1="4" x2="10" y2="16" stroke="#1a7a2e" stroke-width="2.5" stroke-linecap="round"
                            id="vLine" />
                          <line x1="4" y1="10" x2="16" y2="10" stroke="#1a7a2e" stroke-width="2.5" stroke-linecap="round"
                            id="hLine" />
                        </svg>
                      </div>

                    </div>
                  </div>
                  <div class="info">
                    <div class="price-row">
                      <span class="price-now">₹249</span>
                      <span class="price-old">₹299</span>
                    </div>
                    <div class="prod-name">Aashirvaad Whole Wheat At Our Shop</div>
                    <div class="prod-qty">
                      5 kg
                    </div>
                  </div>
                </div>
              </div>

              <!-- Slide 2 -->
              <div class="col-lg-2 col-md-4 col-6">
                <div class="card product-card">
                  <div class="img-area">
                    <div class="img-placeholder">
                      <img src="{{asset('assets/images/img/oil.png') }}" alt="Product Image">
                    </div>
                    <span class="pro-orange-badge">17% Off</span>
                    <button class="wishlist-btn">
                      <svg class="heart" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="none"
                        stroke-width="5" stroke-linecap="round" stroke-linejoin="round">
                        <path
                          d="M50 85 C30 70, 10 58, 10 38 C10 22, 22 12, 35 12 C42 12, 47 16, 50 20 C53 16, 58 12, 65 12 C78 12, 90 22, 90 38 C90 58, 70 70, 50 85 Z" />
                      </svg>

                    </button>
                    <div class="cart-btn" id="cartBtn">

                      <div class="counter-area">
                        <div class="minus-btn" id="minusBtn">−</div>
                        <div class="count-val" id="countVal">1</div>
                      </div>

                      <div class="plus-icon" id="plusIcon">
                        <svg width="20" height="20" viewBox="0 0 20 20">
                          <line x1="10" y1="4" x2="10" y2="16" stroke="#1a7a2e" stroke-width="2.5" stroke-linecap="round"
                            id="vLine" />
                          <line x1="4" y1="10" x2="16" y2="10" stroke="#1a7a2e" stroke-width="2.5" stroke-linecap="round"
                            id="hLine" />
                        </svg>
                      </div>

                    </div>
                  </div>
                  <div class="info">
                    <div class="price-row">
                      <span class="price-now">₹249</span>
                      <span class="price-old">₹299</span>
                    </div>
                    <div class="prod-name">Aashirvaad Whole Wheat At Our Shop</div>
                    <div class="prod-qty">
                      1 Lt
                    </div>
                  </div>
                </div>

              </div>

              <!-- Slide 3 -->
              <div class="col-lg-2 col-md-4 col-6">
                <div class="card product-card">
                  <div class="img-area">
                    <div class="img-placeholder">
                      <img src="{{asset('assets/images/img/salt.png') }}" alt="Product Image">
                    </div>
                    <span class="pro-orange-badge">17% Off</span>
                    <button class="wishlist-btn">
                      <svg class="heart" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="none"
                        stroke-width="5" stroke-linecap="round" stroke-linejoin="round">
                        <path
                          d="M50 85 C30 70, 10 58, 10 38 C10 22, 22 12, 35 12 C42 12, 47 16, 50 20 C53 16, 58 12, 65 12 C78 12, 90 22, 90 38 C90 58, 70 70, 50 85 Z" />
                      </svg>

                    </button>
                    <div class="cart-btn" id="cartBtn">

                      <div class="counter-area">
                        <div class="minus-btn" id="minusBtn">−</div>
                        <div class="count-val" id="countVal">1</div>
                      </div>

                      <div class="plus-icon" id="plusIcon">
                        <svg width="20" height="20" viewBox="0 0 20 20">
                          <line x1="10" y1="4" x2="10" y2="16" stroke="#1a7a2e" stroke-width="2.5" stroke-linecap="round"
                            id="vLine" />
                          <line x1="4" y1="10" x2="16" y2="10" stroke="#1a7a2e" stroke-width="2.5" stroke-linecap="round"
                            id="hLine" />
                        </svg>
                      </div>

                    </div>
                  </div>
                  <div class="info">
                    <div class="price-row">
                      <span class="price-now">₹249</span>
                      <span class="price-old">₹299</span>
                    </div>
                    <div class="prod-name">Aashirvaad Whole Wheat At Our Shop</div>
                    <div class="prod-qty">
                      1 kg
                    </div>
                  </div>
                </div>

              </div>
              <!-- Slide 4-->
              <div class="col-lg-2 col-md-4 col-6">
                <div class="card product-card">
                  <div class="img-area">
                    <div class="img-placeholder">
                      <img src="{{asset('assets/images/img/biscuit.png') }}" alt="Product Image">
                    </div>
                    <span class="pro-orange-badge">17% Off</span>
                    <button class="wishlist-btn">
                      <svg class="heart" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="none"
                        stroke-width="5" stroke-linecap="round" stroke-linejoin="round">
                        <path
                          d="M50 85 C30 70, 10 58, 10 38 C10 22, 22 12, 35 12 C42 12, 47 16, 50 20 C53 16, 58 12, 65 12 C78 12, 90 22, 90 38 C90 58, 70 70, 50 85 Z" />
                      </svg>

                    </button>
                    <div class="cart-btn" id="cartBtn">

                      <div class="counter-area">
                        <div class="minus-btn" id="minusBtn">−</div>
                        <div class="count-val" id="countVal">1</div>
                      </div>

                      <div class="plus-icon" id="plusIcon">
                        <svg width="20" height="20" viewBox="0 0 20 20">
                          <line x1="10" y1="4" x2="10" y2="16" stroke="#1a7a2e" stroke-width="2.5" stroke-linecap="round"
                            id="vLine" />
                          <line x1="4" y1="10" x2="16" y2="10" stroke="#1a7a2e" stroke-width="2.5" stroke-linecap="round"
                            id="hLine" />
                        </svg>
                      </div>

                    </div>
                  </div>
                  <div class="info">
                    <div class="price-row">
                      <span class="price-now">₹249</span>
                      <span class="price-old">₹299</span>
                    </div>
                    <div class="prod-name">Aashirvaad Whole Wheat At Our Shop</div>
                    <div class="prod-qty">
                      1 kg
                    </div>
                  </div>
                </div>

              </div>
              <!-- Slide 5 -->
              <div class="col-lg-2 col-md-4 col-6">
                <div class="card product-card">
                  <div class="img-area">
                    <div class="img-placeholder">
                      <img src="{{asset('assets/images/img/onion.png') }}" alt="Product Image">
                    </div>
                    <span class="pro-orange-badge">17% Off</span>
                    <button class="wishlist-btn">
                      <svg class="heart" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="none"
                        stroke-width="5" stroke-linecap="round" stroke-linejoin="round">
                        <path
                          d="M50 85 C30 70, 10 58, 10 38 C10 22, 22 12, 35 12 C42 12, 47 16, 50 20 C53 16, 58 12, 65 12 C78 12, 90 22, 90 38 C90 58, 70 70, 50 85 Z" />
                      </svg>

                    </button>
                    <div class="cart-btn" id="cartBtn">

                      <div class="counter-area">
                        <div class="minus-btn" id="minusBtn">−</div>
                        <div class="count-val" id="countVal">1</div>
                      </div>

                      <div class="plus-icon" id="plusIcon">
                        <svg width="20" height="20" viewBox="0 0 20 20">
                          <line x1="10" y1="4" x2="10" y2="16" stroke="#1a7a2e" stroke-width="2.5" stroke-linecap="round"
                            id="vLine" />
                          <line x1="4" y1="10" x2="16" y2="10" stroke="#1a7a2e" stroke-width="2.5" stroke-linecap="round"
                            id="hLine" />
                        </svg>
                      </div>

                    </div>
                  </div>
                  <div class="info">
                    <div class="price-row">
                      <span class="price-now">₹249</span>
                      <span class="price-old">₹299</span>
                    </div>
                    <div class="prod-name">Aashirvaad Whole Wheat At Our Shop</div>
                    <div class="qty-dropdown">
                      <button class="qty-selected" type="button">
                        <span class="selected-text">1 kg</span>
                        <i class="fas fa-chevron-down"></i>
                      </button>

                      <ul class="qty-menu">
                        <li data-value="1 kg" class="active">1 kg</li>
                        <li data-value="5 kg">5 kg</li>
                        <li data-value="10 kg">10 kg</li>
                        <li data-value="500 g">500 g</li>
                      </ul>
                    </div>
                  </div>
                </div>

              </div>
              <!-- Slide 6-->
              <div class="col-lg-2 col-md-4 col-6">
                <div class="card product-card">
                  <div class="img-area">
                    <div class="img-placeholder">
                      <img src="{{asset('assets/images/img/ice-cream.png') }}" alt="Product Image">
                    </div>
                    <span class="pro-orange-badge">17% Off</span>
                    <button class="wishlist-btn">
                      <svg class="heart" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="none"
                        stroke-width="5" stroke-linecap="round" stroke-linejoin="round">
                        <path
                          d="M50 85 C30 70, 10 58, 10 38 C10 22, 22 12, 35 12 C42 12, 47 16, 50 20 C53 16, 58 12, 65 12 C78 12, 90 22, 90 38 C90 58, 70 70, 50 85 Z" />
                      </svg>

                    </button>
                    <div class="cart-btn" id="cartBtn">

                      <div class="counter-area">
                        <div class="minus-btn" id="minusBtn">−</div>
                        <div class="count-val" id="countVal">1</div>
                      </div>

                      <div class="plus-icon" id="plusIcon">
                        <svg width="20" height="20" viewBox="0 0 20 20">
                          <line x1="10" y1="4" x2="10" y2="16" stroke="#1a7a2e" stroke-width="2.5" stroke-linecap="round"
                            id="vLine" />
                          <line x1="4" y1="10" x2="16" y2="10" stroke="#1a7a2e" stroke-width="2.5" stroke-linecap="round"
                            id="hLine" />
                        </svg>
                      </div>

                    </div>
                  </div>
                  <div class="info">
                    <div class="price-row">
                      <span class="price-now">₹249</span>
                      <span class="price-old">₹299</span>
                    </div>
                    <div class="prod-name">Aashirvaad Whole Wheat At Our Shop</div>
                    <div class="prod-qty">
                      Pack: 100g
                    </div>
                  </div>
                </div>

              </div>

            </div>


          </div>

          <!-- Tab: Under ₹199 -->
          <div class="tab-panel" id="tab-199">
            <div class="row frequent-sec">
              <!-- Slide 1 -->
              <div class="col-lg-2 col-md-4 col-6">
                <div class="card product-card">
                  <div class="img-area">
                    <div class="img-placeholder">
                      <img src="{{asset('assets/images/img/wheat.png') }}" alt="Product Image">
                    </div>
                    <span class="pro-orange-badge">17% Off</span>
                    <button class="wishlist-btn">
                      <svg class="heart" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="none"
                        stroke-width="5" stroke-linecap="round" stroke-linejoin="round">
                        <path
                          d="M50 85 C30 70, 10 58, 10 38 C10 22, 22 12, 35 12 C42 12, 47 16, 50 20 C53 16, 58 12, 65 12 C78 12, 90 22, 90 38 C90 58, 70 70, 50 85 Z" />
                      </svg>

                    </button>
                    <div class="cart-btn" id="cartBtn">

                      <div class="counter-area">
                        <div class="minus-btn" id="minusBtn">−</div>
                        <div class="count-val" id="countVal">1</div>
                      </div>

                      <div class="plus-icon" id="plusIcon">
                        <svg width="20" height="20" viewBox="0 0 20 20">
                          <line x1="10" y1="4" x2="10" y2="16" stroke="#1a7a2e" stroke-width="2.5" stroke-linecap="round"
                            id="vLine" />
                          <line x1="4" y1="10" x2="16" y2="10" stroke="#1a7a2e" stroke-width="2.5" stroke-linecap="round"
                            id="hLine" />
                        </svg>
                      </div>

                    </div>
                  </div>
                  <div class="info">
                    <div class="price-row">
                      <span class="price-now">₹249</span>
                      <span class="price-old">₹299</span>
                    </div>
                    <div class="prod-name">Aashirvaad Whole Wheat At Our Shop</div>
                    <div class="prod-qty">
                      5 kg
                    </div>
                  </div>
                </div>
              </div>

              <!-- Slide 2 -->
              <div class="col-lg-2 col-md-4 col-6">
                <div class="card product-card">
                  <div class="img-area">
                    <div class="img-placeholder">
                      <img src="{{asset('assets/images/img/oil.png') }}" alt="Product Image">
                    </div>
                    <span class="pro-orange-badge">17% Off</span>
                    <button class="wishlist-btn">
                      <svg class="heart" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="none"
                        stroke-width="5" stroke-linecap="round" stroke-linejoin="round">
                        <path
                          d="M50 85 C30 70, 10 58, 10 38 C10 22, 22 12, 35 12 C42 12, 47 16, 50 20 C53 16, 58 12, 65 12 C78 12, 90 22, 90 38 C90 58, 70 70, 50 85 Z" />
                      </svg>

                    </button>
                    <div class="cart-btn" id="cartBtn">

                      <div class="counter-area">
                        <div class="minus-btn" id="minusBtn">−</div>
                        <div class="count-val" id="countVal">1</div>
                      </div>

                      <div class="plus-icon" id="plusIcon">
                        <svg width="20" height="20" viewBox="0 0 20 20">
                          <line x1="10" y1="4" x2="10" y2="16" stroke="#1a7a2e" stroke-width="2.5" stroke-linecap="round"
                            id="vLine" />
                          <line x1="4" y1="10" x2="16" y2="10" stroke="#1a7a2e" stroke-width="2.5" stroke-linecap="round"
                            id="hLine" />
                        </svg>
                      </div>

                    </div>
                  </div>
                  <div class="info">
                    <div class="price-row">
                      <span class="price-now">₹249</span>
                      <span class="price-old">₹299</span>
                    </div>
                    <div class="prod-name">Aashirvaad Whole Wheat At Our Shop</div>
                    <div class="prod-qty">
                      1 Lt
                    </div>
                  </div>
                </div>

              </div>

              <!-- Slide 3 -->
              <div class="col-lg-2 col-md-4 col-6">
                <div class="card product-card">
                  <div class="img-area">
                    <div class="img-placeholder">
                      <img src="{{asset('assets/images/img/salt.png') }}" alt="Product Image">
                    </div>
                    <span class="pro-orange-badge">17% Off</span>
                    <button class="wishlist-btn">
                      <svg class="heart" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="none"
                        stroke-width="5" stroke-linecap="round" stroke-linejoin="round">
                        <path
                          d="M50 85 C30 70, 10 58, 10 38 C10 22, 22 12, 35 12 C42 12, 47 16, 50 20 C53 16, 58 12, 65 12 C78 12, 90 22, 90 38 C90 58, 70 70, 50 85 Z" />
                      </svg>

                    </button>
                    <div class="cart-btn" id="cartBtn">

                      <div class="counter-area">
                        <div class="minus-btn" id="minusBtn">−</div>
                        <div class="count-val" id="countVal">1</div>
                      </div>

                      <div class="plus-icon" id="plusIcon">
                        <svg width="20" height="20" viewBox="0 0 20 20">
                          <line x1="10" y1="4" x2="10" y2="16" stroke="#1a7a2e" stroke-width="2.5" stroke-linecap="round"
                            id="vLine" />
                          <line x1="4" y1="10" x2="16" y2="10" stroke="#1a7a2e" stroke-width="2.5" stroke-linecap="round"
                            id="hLine" />
                        </svg>
                      </div>

                    </div>
                  </div>
                  <div class="info">
                    <div class="price-row">
                      <span class="price-now">₹249</span>
                      <span class="price-old">₹299</span>
                    </div>
                    <div class="prod-name">Aashirvaad Whole Wheat At Our Shop</div>
                    <div class="prod-qty">
                      1 kg
                    </div>
                  </div>
                </div>

              </div>
              <!-- Slide 4-->
              <div class="col-lg-2 col-md-4 col-6">
                <div class="card product-card">
                  <div class="img-area">
                    <div class="img-placeholder">
                      <img src="{{asset('assets/images/img/biscuit.png') }}" alt="Product Image">
                    </div>
                    <span class="pro-orange-badge">17% Off</span>
                    <button class="wishlist-btn">
                      <svg class="heart" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="none"
                        stroke-width="5" stroke-linecap="round" stroke-linejoin="round">
                        <path
                          d="M50 85 C30 70, 10 58, 10 38 C10 22, 22 12, 35 12 C42 12, 47 16, 50 20 C53 16, 58 12, 65 12 C78 12, 90 22, 90 38 C90 58, 70 70, 50 85 Z" />
                      </svg>

                    </button>
                    <div class="cart-btn" id="cartBtn">

                      <div class="counter-area">
                        <div class="minus-btn" id="minusBtn">−</div>
                        <div class="count-val" id="countVal">1</div>
                      </div>

                      <div class="plus-icon" id="plusIcon">
                        <svg width="20" height="20" viewBox="0 0 20 20">
                          <line x1="10" y1="4" x2="10" y2="16" stroke="#1a7a2e" stroke-width="2.5" stroke-linecap="round"
                            id="vLine" />
                          <line x1="4" y1="10" x2="16" y2="10" stroke="#1a7a2e" stroke-width="2.5" stroke-linecap="round"
                            id="hLine" />
                        </svg>
                      </div>

                    </div>
                  </div>
                  <div class="info">
                    <div class="price-row">
                      <span class="price-now">₹249</span>
                      <span class="price-old">₹299</span>
                    </div>
                    <div class="prod-name">Aashirvaad Whole Wheat At Our Shop</div>
                    <div class="prod-qty">
                      1 kg
                    </div>
                  </div>
                </div>

              </div>
              <!-- Slide 5 -->
              <div class="col-lg-2 col-md-4 col-6">
                <div class="card product-card">
                  <div class="img-area">
                    <div class="img-placeholder">
                      <img src="{{asset('assets/images/img/onion.png') }}" alt="Product Image">
                    </div>
                    <span class="pro-orange-badge">17% Off</span>
                    <button class="wishlist-btn">
                      <svg class="heart" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="none"
                        stroke-width="5" stroke-linecap="round" stroke-linejoin="round">
                        <path
                          d="M50 85 C30 70, 10 58, 10 38 C10 22, 22 12, 35 12 C42 12, 47 16, 50 20 C53 16, 58 12, 65 12 C78 12, 90 22, 90 38 C90 58, 70 70, 50 85 Z" />
                      </svg>

                    </button>
                    <div class="cart-btn" id="cartBtn">

                      <div class="counter-area">
                        <div class="minus-btn" id="minusBtn">−</div>
                        <div class="count-val" id="countVal">1</div>
                      </div>

                      <div class="plus-icon" id="plusIcon">
                        <svg width="20" height="20" viewBox="0 0 20 20">
                          <line x1="10" y1="4" x2="10" y2="16" stroke="#1a7a2e" stroke-width="2.5" stroke-linecap="round"
                            id="vLine" />
                          <line x1="4" y1="10" x2="16" y2="10" stroke="#1a7a2e" stroke-width="2.5" stroke-linecap="round"
                            id="hLine" />
                        </svg>
                      </div>

                    </div>
                  </div>
                  <div class="info">
                    <div class="price-row">
                      <span class="price-now">₹249</span>
                      <span class="price-old">₹299</span>
                    </div>
                    <div class="prod-name">Aashirvaad Whole Wheat At Our Shop</div>
                    <div class="qty-dropdown">
                      <button class="qty-selected" type="button">
                        <span class="selected-text">1 kg</span>
                        <i class="fas fa-chevron-down"></i>
                      </button>

                      <ul class="qty-menu">
                        <li data-value="1 kg" class="active">1 kg</li>
                        <li data-value="5 kg">5 kg</li>
                        <li data-value="10 kg">10 kg</li>
                        <li data-value="500 g">500 g</li>
                      </ul>
                    </div>
                  </div>
                </div>

              </div>
              <!-- Slide 6-->
              <div class="col-lg-2 col-md-4 col-6">
                <div class="card product-card">
                  <div class="img-area">
                    <div class="img-placeholder">
                      <img src="{{asset('assets/images/img/ice-cream.png') }}" alt="Product Image">
                    </div>
                    <span class="pro-orange-badge">17% Off</span>
                    <button class="wishlist-btn">
                      <svg class="heart" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="none"
                        stroke-width="5" stroke-linecap="round" stroke-linejoin="round">
                        <path
                          d="M50 85 C30 70, 10 58, 10 38 C10 22, 22 12, 35 12 C42 12, 47 16, 50 20 C53 16, 58 12, 65 12 C78 12, 90 22, 90 38 C90 58, 70 70, 50 85 Z" />
                      </svg>

                    </button>
                    <div class="cart-btn" id="cartBtn">

                      <div class="counter-area">
                        <div class="minus-btn" id="minusBtn">−</div>
                        <div class="count-val" id="countVal">1</div>
                      </div>

                      <div class="plus-icon" id="plusIcon">
                        <svg width="20" height="20" viewBox="0 0 20 20">
                          <line x1="10" y1="4" x2="10" y2="16" stroke="#1a7a2e" stroke-width="2.5" stroke-linecap="round"
                            id="vLine" />
                          <line x1="4" y1="10" x2="16" y2="10" stroke="#1a7a2e" stroke-width="2.5" stroke-linecap="round"
                            id="hLine" />
                        </svg>
                      </div>

                    </div>
                  </div>
                  <div class="info">
                    <div class="price-row">
                      <span class="price-now">₹249</span>
                      <span class="price-old">₹299</span>
                    </div>
                    <div class="prod-name">Aashirvaad Whole Wheat At Our Shop</div>
                    <div class="prod-qty">
                      Pack: 100g
                    </div>
                  </div>
                </div>

              </div>

            </div>

          </div>

          <!-- Tab: Under ₹249 -->
          <div class="tab-panel" id="tab-249">
            <div class="row frequent-sec">
              <!-- Slide 1 -->
              <div class="col-lg-2 col-md-4 col-6">
                <div class="card product-card">
                  <div class="img-area">
                    <div class="img-placeholder">
                      <img src="{{asset('assets/images/img/wheat.png') }}" alt="Product Image">
                    </div>
                    <span class="pro-orange-badge">17% Off</span>
                    <button class="wishlist-btn">
                      <svg class="heart" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="none"
                        stroke-width="5" stroke-linecap="round" stroke-linejoin="round">
                        <path
                          d="M50 85 C30 70, 10 58, 10 38 C10 22, 22 12, 35 12 C42 12, 47 16, 50 20 C53 16, 58 12, 65 12 C78 12, 90 22, 90 38 C90 58, 70 70, 50 85 Z" />
                      </svg>

                    </button>
                    <div class="cart-btn" id="cartBtn">

                      <div class="counter-area">
                        <div class="minus-btn" id="minusBtn">−</div>
                        <div class="count-val" id="countVal">1</div>
                      </div>

                      <div class="plus-icon" id="plusIcon">
                        <svg width="20" height="20" viewBox="0 0 20 20">
                          <line x1="10" y1="4" x2="10" y2="16" stroke="#1a7a2e" stroke-width="2.5" stroke-linecap="round"
                            id="vLine" />
                          <line x1="4" y1="10" x2="16" y2="10" stroke="#1a7a2e" stroke-width="2.5" stroke-linecap="round"
                            id="hLine" />
                        </svg>
                      </div>

                    </div>
                  </div>
                  <div class="info">
                    <div class="price-row">
                      <span class="price-now">₹249</span>
                      <span class="price-old">₹299</span>
                    </div>
                    <div class="prod-name">Aashirvaad Whole Wheat At Our Shop</div>
                    <div class="prod-qty">
                      5 kg
                    </div>
                  </div>
                </div>
              </div>

              <!-- Slide 2 -->
              <div class="col-lg-2 col-md-4 col-6">
                <div class="card product-card">
                  <div class="img-area">
                    <div class="img-placeholder">
                      <img src="{{asset('assets/images/img/oil.png') }}" alt="Product Image">
                    </div>
                    <span class="pro-orange-badge">17% Off</span>
                    <button class="wishlist-btn">
                      <svg class="heart" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="none"
                        stroke-width="5" stroke-linecap="round" stroke-linejoin="round">
                        <path
                          d="M50 85 C30 70, 10 58, 10 38 C10 22, 22 12, 35 12 C42 12, 47 16, 50 20 C53 16, 58 12, 65 12 C78 12, 90 22, 90 38 C90 58, 70 70, 50 85 Z" />
                      </svg>

                    </button>
                    <div class="cart-btn" id="cartBtn">

                      <div class="counter-area">
                        <div class="minus-btn" id="minusBtn">−</div>
                        <div class="count-val" id="countVal">1</div>
                      </div>

                      <div class="plus-icon" id="plusIcon">
                        <svg width="20" height="20" viewBox="0 0 20 20">
                          <line x1="10" y1="4" x2="10" y2="16" stroke="#1a7a2e" stroke-width="2.5" stroke-linecap="round"
                            id="vLine" />
                          <line x1="4" y1="10" x2="16" y2="10" stroke="#1a7a2e" stroke-width="2.5" stroke-linecap="round"
                            id="hLine" />
                        </svg>
                      </div>

                    </div>
                  </div>
                  <div class="info">
                    <div class="price-row">
                      <span class="price-now">₹249</span>
                      <span class="price-old">₹299</span>
                    </div>
                    <div class="prod-name">Aashirvaad Whole Wheat At Our Shop</div>
                    <div class="prod-qty">
                      1 Lt
                    </div>
                  </div>
                </div>

              </div>

              <!-- Slide 3 -->
              <div class="col-lg-2 col-md-4 col-6">
                <div class="card product-card">
                  <div class="img-area">
                    <div class="img-placeholder">
                      <img src="{{asset('assets/images/img/salt.png') }}" alt="Product Image">
                    </div>
                    <span class="pro-orange-badge">17% Off</span>
                    <button class="wishlist-btn">
                      <svg class="heart" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="none"
                        stroke-width="5" stroke-linecap="round" stroke-linejoin="round">
                        <path
                          d="M50 85 C30 70, 10 58, 10 38 C10 22, 22 12, 35 12 C42 12, 47 16, 50 20 C53 16, 58 12, 65 12 C78 12, 90 22, 90 38 C90 58, 70 70, 50 85 Z" />
                      </svg>

                    </button>
                    <div class="cart-btn" id="cartBtn">

                      <div class="counter-area">
                        <div class="minus-btn" id="minusBtn">−</div>
                        <div class="count-val" id="countVal">1</div>
                      </div>

                      <div class="plus-icon" id="plusIcon">
                        <svg width="20" height="20" viewBox="0 0 20 20">
                          <line x1="10" y1="4" x2="10" y2="16" stroke="#1a7a2e" stroke-width="2.5" stroke-linecap="round"
                            id="vLine" />
                          <line x1="4" y1="10" x2="16" y2="10" stroke="#1a7a2e" stroke-width="2.5" stroke-linecap="round"
                            id="hLine" />
                        </svg>
                      </div>

                    </div>
                  </div>
                  <div class="info">
                    <div class="price-row">
                      <span class="price-now">₹249</span>
                      <span class="price-old">₹299</span>
                    </div>
                    <div class="prod-name">Aashirvaad Whole Wheat At Our Shop</div>
                    <div class="prod-qty">
                      1 kg
                    </div>
                  </div>
                </div>

              </div>
            </div>

          </div>

        </div><!-- /cards-viewport -->

      </div><!-- /section-wrap -->
    </div>
  </section>

@endsection



@section('scripts')
  <script>
    /* Tab switching */
    document.querySelectorAll('.tab-btn').forEach(btn => {
      btn.addEventListener('click', () => {
        const target = btn.dataset.tab;

        document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
        document.querySelectorAll('.tab-panel').forEach(p => p.classList.remove('active'));

        btn.classList.add('active');
        document.getElementById('tab-' + target).classList.add('active');
      });
    });
  </script>
@endsection