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

@section('meta_tags')
    @include('frontend.layouts.meta-tags', ['title' => 'Best Seller', 'page' => 'best-seller'])
@endsection

@section('styles')

@endsection


@section('content')


    <!-- ===================== OFFCANVAS FILTER (Tablet/Mobile) ===================== -->
    <div class="offcanvas offcanvas-end" tabindex="-1" id="filterOffcanvas" aria-labelledby="filterOffcanvasLabel">
        <div class="offcanvas-header border-bottom">
            <h6 class="offcanvas-title fw-semibold" id="filterOffcanvasLabel">
                <i class="fa-solid fa-sliders me-2" style="color:var(--primary)"></i>Filters
            </h6>
            <button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
        </div>
        <div class="offcanvas-body p-0">
            <!-- Active tags -->
            <div class="filter-section">
                <div class="filter-header">
                    <span class="filter-title">Active Filters</span>
                    <a href="javascript:void(0);" class="clear-all">Clear all</a>
                </div>
                <div class="tags-container">
                    <div class="filter-tag"><span>₹0 – ₹100</span><span class="remove-btn">×</span></div>
                    <div class="filter-tag"><span>Chopped / Pre-cut</span><span class="remove-btn">×</span></div>
                </div>
            </div>

            <div class="drp-filter-group">
                <details>
                    <summary>Price Range <span class="arrow"><i class="fa-solid fa-chevron-down"></i></span></summary>
                    <div class="filter-body">
                        <label class="checkbox-label"><input type="checkbox" checked> <span>₹0 – ₹100</span></label>
                        <label class="checkbox-label"><input type="checkbox"> <span>₹100 – ₹300</span></label>
                        <label class="checkbox-label"><input type="checkbox"> <span>₹300+</span></label>
                    </div>
                </details>
                <details>
                    <summary>Product Type <span class="arrow"><i class="fa-solid fa-chevron-down"></i></span></summary>
                    <div class="filter-body">
                        <label class="checkbox-label"><input type="checkbox"> <span>Fresh</span></label>
                        <label class="checkbox-label"><input type="checkbox"> <span>Packaged</span></label>
                        <label class="checkbox-label"><input type="checkbox"> <span>Ready to Eat</span></label>
                        <label class="checkbox-label"><input type="checkbox"> <span>Chopped / Pre-cut</span></label>
                        <label class="checkbox-label"><input type="checkbox"> <span>Fresh Drink</span></label>
                    </div>
                </details>
                <details>
                    <summary>Offer <span class="arrow"><i class="fa-solid fa-chevron-down"></i></span></summary>
                    <div class="filter-body">
                        <label class="checkbox-label"><input type="checkbox" checked> <span>On Discount</span></label>
                        <label class="checkbox-label"><input type="checkbox"> <span>Combo Offers</span></label>
                        <label class="checkbox-label"><input type="checkbox"> <span>Best Deals</span></label>
                    </div>
                </details>
                <details>
                    <summary>Quantity <span class="arrow"><i class="fa-solid fa-chevron-down"></i></span></summary>
                    <div class="filter-body">
                        <label class="checkbox-label"><input type="checkbox" checked> <span>250g</span></label>
                        <label class="checkbox-label"><input type="checkbox"> <span>500g</span></label>
                        <label class="checkbox-label"><input type="checkbox"> <span>1kg</span></label>
                        <label class="checkbox-label"><input type="checkbox"> <span>5kg</span></label>
                    </div>
                </details>
            </div>
        </div>
    </div>

    <!-- ===================== HORIZONTAL TAB STRIP (Tablet/Mobile) ===================== -->
    <div class="horizontal-tab-strip" id="mobileTabStrip">
        <a href="javascript:void(0);" class="tab-pill active" data-target="all">
            <img src="{{ asset('assets/images/img/all.webp') }}" alt=""> <span>All Essentials</span>
        </a>
        <a href="javascript:void(0);" class="tab-pill" data-target="fruits">
            <img src="{{ asset('assets/images/img/fruits.png') }}" alt=""> <span>Fruits</span>
        </a>
        <a href="javascript:void(0);" class="tab-pill" data-target="vegetables">
            <img src="{{ asset('assets/images/img/vegetable.png') }}" alt=""> <span>Vegetables</span>
        </a>
        <a href="javascript:void(0);" class="tab-pill" data-target="greens">
            <img src="{{ asset('assets/images/img/greens.png') }}" alt=""> <span>Greens</span>
        </a>
        <a href="javascript:void(0);" class="tab-pill" data-target="groceries">
            <img src="{{ asset('assets/images/img/groceries.png') }}" alt=""> <span>Groceries</span>
        </a>
        <a href="javascript:void(0);" class="tab-pill" data-target="chop-veg">
            <img src="{{ asset('assets/images/img/chop-veg.png') }}" alt=""> <span>Chopped</span>
        </a>
        <a href="javascript:void(0);" class="tab-pill" data-target="dry-fruits">
            <img src="{{ asset('assets/images/img/dry-fruits.webp') }}" alt=""> <span>Dry Fruits</span>
        </a>
        <a href="javascript:void(0);" class="tab-pill" data-target="salad">
            <img src="{{ asset('assets/images/img/salad.png') }}" alt=""> <span>Salad</span>
        </a>



    </div>

    <!-- ===================== MOBILE FILTER BAR ===================== -->
    <div class="mobile-filter-bar">
        <button class="filter-toggle-btn" data-bs-toggle="offcanvas" data-bs-target="#filterOffcanvas">
            <i class="fa-solid fa-sliders" style="color:var(--primary)"></i> Filters
            <span class="badge rounded-pill text-bg-success ms-1" style="font-size:10px">2</span>
        </button>
        <div class="active-filter-chips">
            <span class="chip">₹0–₹100 <span class="remove">×</span></span>
            <span class="chip">Chopped <span class="remove">×</span></span>
        </div>
    </div>


    <div class="container-fluid mt-4 product-section cate-page">
        <div class="breadcrumb-nav pt-4">
            <a href="{{ route('frontend.grocery') }}">Grocery</a> <i class="fa-solid fa-chevron-right"></i> <span>Best
                Seller</span>
        </div>
        <div class="row">
            <div class="col-md-2  sidebar p-0 mt-4">
                <div class="nav flex-column nav-pills mb-3">
                    <button class="nav-link active" data-bs-toggle="pill" data-bs-target="#all" data-target="all"> <img
                            src="{{ asset('assets/images/img/all.webp') }}" class="nav-link-img" alt="">
                        All Essentials </button>
                    <button class="nav-link" data-bs-toggle="pill" data-bs-target="#fruits" data-target="fruits"><img
                            src="{{ asset('assets/images/img/fruits.png') }}" class="nav-link-img" alt="">
                        Fruits</button>
                    <button class="nav-link" data-bs-toggle="pill" data-bs-target="#vegetables"
                        data-target="vegetables"><img src="{{ asset('assets/images/img/vegetable.png') }}"
                            class="nav-link-img" alt="">
                        Vegetables</button>
                    <button class="nav-link" data-bs-toggle="pill" data-bs-target="#greens" data-target="greens"><img
                            src="{{ asset('assets/images/img/greens.png') }}" class="nav-link-img" alt="">
                        Greens</button>
                    <button class="nav-link" data-bs-toggle="pill" data-bs-target="#groceries" data-target="groceries"><img
                            src="{{ asset('assets/images/img/groceries.png') }}" class="nav-link-img" alt="">
                        Groceries</button>
                    <button class="nav-link" data-bs-toggle="pill" data-bs-target="#chop-veg" data-target="chop-veg"><img
                            src="{{ asset('assets/images/img/chop-veg.png') }}" class="nav-link-img" alt="">
                        Chopped Veggies</button>
                    <button class="nav-link" data-bs-toggle="pill" data-bs-target="#dry-fruits"
                        data-target="dry-fruits"><img src="{{ asset('assets/images/img/dry-fruits.webp') }}"
                            class="nav-link-img" alt="">
                        Dry Fruits</button>
                    <button class="nav-link" data-bs-toggle="pill" data-bs-target="#salad" data-target="salad"><img
                            src="{{ asset('assets/images/img/salad.png') }}" class="nav-link-img" alt="">
                        Salad</button>
                </div>
                <div>
                    <div class="filter-section">
                        <div class="filter-header">
                            <span class="filter-title">Filter</span>
                            <a href="javascript:void(0);" class="clear-all">Clear all</a>
                        </div>
                        <div class="tags-container">
                            <div class="filter-tag">
                                <span>₹0 – ₹100</span>
                                <span class="remove-btn">×</span>
                            </div>
                            <div class="filter-tag">
                                <span>Chopped / Pre-cut</span>
                                <span class="remove-btn">×</span>
                            </div>
                            <div class="filter-tag">
                                <span>Chopped / Pre-cut</span>
                                <span class="remove-btn">×</span>
                            </div>
                            <div class="filter-tag">
                                <span>₹0 – ₹100</span>
                                <span class="remove-btn">×</span>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="drp-filter-group">
                    <details open>
                        <summary>
                            Price Range
                            <span class="arrow"> <i class="fa-solid fa-chevron-down"></i></span>
                        </summary>
                        <div class="filter-body">
                            <label class="checkbox-label">
                                <input type="checkbox" checked>
                                <span>₹0 – ₹100</span>
                            </label>
                            <label class="checkbox-label">
                                <input type="checkbox">
                                <span>₹100 – ₹300</span>
                            </label>
                            <label class="checkbox-label">
                                <input type="checkbox">
                                <span>₹300+</span>
                            </label>
                        </div>
                    </details>
                    <details>
                        <summary>
                            Product Type
                            <span class="arrow"> <i class="fa-solid fa-chevron-down"></i></span>
                        </summary>
                        <div class="filter-body">
                            <label class="checkbox-label">
                                <input type="checkbox">
                                <span>Fresh</span>
                            </label>
                            <label class="checkbox-label">
                                <input type="checkbox">
                                <span>Packaged</span>
                            </label>
                            <label class="checkbox-label">
                                <input type="checkbox">
                                <span>Ready to Eat</span>
                            </label>
                            <label class="checkbox-label">
                                <input type="checkbox">
                                <span>Chopped / Pre-cut</span>
                            </label>
                            <label class="checkbox-label">
                                <input type="checkbox">
                                <span>Fresh Drink</span>
                            </label>
                        </div>
                    </details>
                    <details>
                        <summary>
                            Offer
                            <span class="arrow"> <i class="fa-solid fa-chevron-down"></i></span>
                        </summary>
                        <div class="filter-body">
                            <label class="checkbox-label">
                                <input type="checkbox" checked>
                                <span>On Discount</span>
                            </label>
                            <label class="checkbox-label">
                                <input type="checkbox">
                                <span>Combo Offers</span>
                            </label>
                            <label class="checkbox-label">
                                <input type="checkbox">
                                <span>Best Deals</span>
                            </label>
                        </div>
                    </details>
                    <details>
                        <summary>
                            Quantity
                            <span class="arrow"> <i class="fa-solid fa-chevron-down"></i></span>
                        </summary>
                        <div class="filter-body">
                            <label class="checkbox-label">
                                <input type="checkbox" checked>
                                <span>250g</span>
                            </label>
                            <label class="checkbox-label">
                                <input type="checkbox">
                                <span>500g</span>
                            </label>
                            <label class="checkbox-label">
                                <input type="checkbox">
                                <span>1kg</span>
                            </label>
                            <label class="checkbox-label">
                                <input type="checkbox">
                                <span>5kg</span>
                            </label>
                        </div>
                    </details>
                </div>
            </div>

            <div class="col-md-10">
                <div class="gro-bestseller-section best-seller-sec space">


                    <!-- HEADING ROW -->
                    <div class="heading-row row">

                        <!-- Left product image -->
                        <div class=" col-2 col-lg-2 col-md-2 head-img-left">
                            <img src="{{asset('assets/images/img/nuts-img.png') }}" alt="dry fruits" />
                        </div>

                        <!-- Title -->
                        <div class="col-12 col-lg-8 col-md-8">
                            <div class="heading-text">
                                <h2>
                                    <span class="star s2">
                                        <img src="{{asset('assets/images/img/shine-star-1.png') }}" width="60"
                                            alt="dry fruits" />
                                    </span>
                                    This Week&rsquo;s&nbsp; Best Seller
                                    <span class="star">
                                        <img src="{{asset('assets/images/img/shine-star-2.png') }}" width="60"
                                            alt="dry fruits" />
                                    </span>
                                </h2>
                            </div>
                        </div>

                        <!-- Right product image -->
                        <div class="col-2 col-lg-2 col-md-2 head-img-right">
                            <img src="{{asset('assets/images/img/pickle.png') }}" alt="spices" />
                        </div>

                    </div>
                </div>

                <div class="tab-content mt-4 best-seller-tab">
                    <div class="tab-pane fade show active" id="all">
                        <div class="d-flex justify-content-between align-items-center mb-3 px-2">
                            <h4 class="mb-0">All Essentials</h4>
                            <span class="tot-tag">Total Items-120</span>
                        </div>
                        <div class="row g-3">
                            <div class="col-lg-2 col-md-3 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>
                                        <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" onclick="expandCart(this)">

                                            <div class="counter-area">
                                                <div class="minus-btn" onclick="changeCount(event, this, -1)">−</div>
                                                <div class="count-val">1</div>
                                            </div>

                                            <div class="plus-icon">
                                                <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"><a href="{{ route('frontend.product-details') }}">
                                                Aashirvaad Whole Wheat At</a>
                                        </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>
                            <div class="col-lg-2 col-md-3 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>
                                        <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" onclick="expandCart(this)">

                                            <div class="counter-area">
                                                <div class="minus-btn" onclick="changeCount(event, this, -1)">−</div>
                                                <div class="count-val">1</div>
                                            </div>

                                            <div class="plus-icon">
                                                <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"><a href="{{ route('frontend.product-details') }}">
                                                Aashirvaad Whole Wheat At</a></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>
                            <div class="col-lg-2 col-md-3 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" onclick="expandCart(this)">

                                            <div class="counter-area">
                                                <div class="minus-btn" onclick="changeCount(event, this, -1)">−</div>
                                                <div class="count-val">1</div>
                                            </div>

                                            <div class="plus-icon">
                                                <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"><a href="{{ route('frontend.product-details') }}">
                                                Aashirvaad Whole Wheat At</a></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>
                            <div class="col-lg-2 col-md-3 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" onclick="expandCart(this)">

                                            <div class="counter-area">
                                                <div class="minus-btn" onclick="changeCount(event, this, -1)">−</div>
                                                <div class="count-val">1</div>
                                            </div>

                                            <div class="plus-icon">
                                                <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"><a href="{{ route('frontend.product-details') }}">
                                                Aashirvaad Whole Wheat At</a></div>

                                        <div class="prod-qty">
                                            <span> 1 kg </span>
                                        </div>
                                    </div>
                                </div>

                            </div>
                            <div class="col-lg-2 col-md-3 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>
                                        <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" onclick="expandCart(this)">

                                            <div class="counter-area">
                                                <div class="minus-btn" onclick="changeCount(event, this, -1)">−</div>
                                                <div class="count-val">1</div>
                                            </div>

                                            <div class="plus-icon">
                                                <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"><a href="{{ route('frontend.product-details') }}">
                                                Aashirvaad Whole Wheat At</a></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>
                            <div class="col-lg-2 col-md-3 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>
                                        <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" onclick="expandCart(this)">

                                            <div class="counter-area">
                                                <div class="minus-btn" onclick="changeCount(event, this, -1)">−</div>
                                                <div class="count-val">1</div>
                                            </div>

                                            <div class="plus-icon">
                                                <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"><a href="{{ route('frontend.product-details') }}">
                                                Aashirvaad Whole Wheat At</a></div>

                                        <div class="prod-qty">
                                            <span> 1 kg </span>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>
                        <div class="row g-3">
                            <div class="col-lg-2 col-md-3 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>
                                        <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" onclick="expandCart(this)">

                                            <div class="counter-area">
                                                <div class="minus-btn" onclick="changeCount(event, this, -1)">−</div>
                                                <div class="count-val">1</div>
                                            </div>

                                            <div class="plus-icon">
                                                <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"><a href="{{ route('frontend.product-details') }}">
                                                Aashirvaad Whole Wheat At</a>
                                        </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>
                            <div class="col-lg-2 col-md-3 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>
                                        <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" onclick="expandCart(this)">

                                            <div class="counter-area">
                                                <div class="minus-btn" onclick="changeCount(event, this, -1)">−</div>
                                                <div class="count-val">1</div>
                                            </div>

                                            <div class="plus-icon">
                                                <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"><a href="{{ route('frontend.product-details') }}">
                                                Aashirvaad Whole Wheat At</a></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>
                            <div class="col-lg-2 col-md-3 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" onclick="expandCart(this)">

                                            <div class="counter-area">
                                                <div class="minus-btn" onclick="changeCount(event, this, -1)">−</div>
                                                <div class="count-val">1</div>
                                            </div>

                                            <div class="plus-icon">
                                                <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"><a href="{{ route('frontend.product-details') }}">
                                                Aashirvaad Whole Wheat At</a></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>
                            <div class="col-lg-2 col-md-3 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" onclick="expandCart(this)">

                                            <div class="counter-area">
                                                <div class="minus-btn" onclick="changeCount(event, this, -1)">−</div>
                                                <div class="count-val">1</div>
                                            </div>

                                            <div class="plus-icon">
                                                <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"><a href="{{ route('frontend.product-details') }}">
                                                Aashirvaad Whole Wheat At</a></div>

                                        <div class="prod-qty">
                                            <span> 1 kg </span>
                                        </div>
                                    </div>
                                </div>

                            </div>
                            <div class="col-lg-2 col-md-3 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>
                                        <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" onclick="expandCart(this)">

                                            <div class="counter-area">
                                                <div class="minus-btn" onclick="changeCount(event, this, -1)">−</div>
                                                <div class="count-val">1</div>
                                            </div>

                                            <div class="plus-icon">
                                                <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"><a href="{{ route('frontend.product-details') }}">
                                                Aashirvaad Whole Wheat At</a></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>
                            <div class="col-lg-2 col-md-3 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>
                                        <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" onclick="expandCart(this)">

                                            <div class="counter-area">
                                                <div class="minus-btn" onclick="changeCount(event, this, -1)">−</div>
                                                <div class="count-val">1</div>
                                            </div>

                                            <div class="plus-icon">
                                                <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"><a href="{{ route('frontend.product-details') }}">
                                                Aashirvaad Whole Wheat At</a></div>

                                        <div class="prod-qty">
                                            <span> 1 kg </span>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>
                        <div class="row g-3">
                            <div class="col-lg-2 col-md-3 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>
                                        <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" onclick="expandCart(this)">

                                            <div class="counter-area">
                                                <div class="minus-btn" onclick="changeCount(event, this, -1)">−</div>
                                                <div class="count-val">1</div>
                                            </div>

                                            <div class="plus-icon">
                                                <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"><a href="{{ route('frontend.product-details') }}">
                                                Aashirvaad Whole Wheat At</a>
                                        </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>
                            <div class="col-lg-2 col-md-3 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>
                                        <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" onclick="expandCart(this)">

                                            <div class="counter-area">
                                                <div class="minus-btn" onclick="changeCount(event, this, -1)">−</div>
                                                <div class="count-val">1</div>
                                            </div>

                                            <div class="plus-icon">
                                                <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"><a href="{{ route('frontend.product-details') }}">
                                                Aashirvaad Whole Wheat At</a></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>
                            <div class="col-lg-2 col-md-3 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" onclick="expandCart(this)">

                                            <div class="counter-area">
                                                <div class="minus-btn" onclick="changeCount(event, this, -1)">−</div>
                                                <div class="count-val">1</div>
                                            </div>

                                            <div class="plus-icon">
                                                <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"><a href="{{ route('frontend.product-details') }}">
                                                Aashirvaad Whole Wheat At</a></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>
                            <div class="col-lg-2 col-md-3 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" onclick="expandCart(this)">

                                            <div class="counter-area">
                                                <div class="minus-btn" onclick="changeCount(event, this, -1)">−</div>
                                                <div class="count-val">1</div>
                                            </div>

                                            <div class="plus-icon">
                                                <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"><a href="{{ route('frontend.product-details') }}">
                                                Aashirvaad Whole Wheat At</a></div>

                                        <div class="prod-qty">
                                            <span> 1 kg </span>
                                        </div>
                                    </div>
                                </div>

                            </div>
                            <div class="col-lg-2 col-md-3 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>
                                        <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" onclick="expandCart(this)">

                                            <div class="counter-area">
                                                <div class="minus-btn" onclick="changeCount(event, this, -1)">−</div>
                                                <div class="count-val">1</div>
                                            </div>

                                            <div class="plus-icon">
                                                <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"><a href="{{ route('frontend.product-details') }}">
                                                Aashirvaad Whole Wheat At</a></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>
                            <div class="col-lg-2 col-md-3 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>
                                        <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" onclick="expandCart(this)">

                                            <div class="counter-area">
                                                <div class="minus-btn" onclick="changeCount(event, this, -1)">−</div>
                                                <div class="count-val">1</div>
                                            </div>

                                            <div class="plus-icon">
                                                <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"><a href="{{ route('frontend.product-details') }}">
                                                Aashirvaad Whole Wheat At</a></div>

                                        <div class="prod-qty">
                                            <span> 1 kg </span>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>
                        <div class="row g-3">
                            <div class="col-lg-2 col-md-3 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>
                                        <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" onclick="expandCart(this)">

                                            <div class="counter-area">
                                                <div class="minus-btn" onclick="changeCount(event, this, -1)">−</div>
                                                <div class="count-val">1</div>
                                            </div>

                                            <div class="plus-icon">
                                                <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"><a href="{{ route('frontend.product-details') }}">
                                                Aashirvaad Whole Wheat At</a>
                                        </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>
                            <div class="col-lg-2 col-md-3 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>
                                        <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" onclick="expandCart(this)">

                                            <div class="counter-area">
                                                <div class="minus-btn" onclick="changeCount(event, this, -1)">−</div>
                                                <div class="count-val">1</div>
                                            </div>

                                            <div class="plus-icon">
                                                <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"><a href="{{ route('frontend.product-details') }}">
                                                Aashirvaad Whole Wheat At</a></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>
                            <div class="col-lg-2 col-md-3 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" onclick="expandCart(this)">

                                            <div class="counter-area">
                                                <div class="minus-btn" onclick="changeCount(event, this, -1)">−</div>
                                                <div class="count-val">1</div>
                                            </div>

                                            <div class="plus-icon">
                                                <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"><a href="{{ route('frontend.product-details') }}">
                                                Aashirvaad Whole Wheat At</a></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>
                            <div class="col-lg-2 col-md-3 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" onclick="expandCart(this)">

                                            <div class="counter-area">
                                                <div class="minus-btn" onclick="changeCount(event, this, -1)">−</div>
                                                <div class="count-val">1</div>
                                            </div>

                                            <div class="plus-icon">
                                                <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"><a href="{{ route('frontend.product-details') }}">
                                                Aashirvaad Whole Wheat At</a></div>

                                        <div class="prod-qty">
                                            <span> 1 kg </span>
                                        </div>
                                    </div>
                                </div>

                            </div>
                            <div class="col-lg-2 col-md-3 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>
                                        <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" onclick="expandCart(this)">

                                            <div class="counter-area">
                                                <div class="minus-btn" onclick="changeCount(event, this, -1)">−</div>
                                                <div class="count-val">1</div>
                                            </div>

                                            <div class="plus-icon">
                                                <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"><a href="{{ route('frontend.product-details') }}">
                                                Aashirvaad Whole Wheat At</a></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>
                            <div class="col-lg-2 col-md-3 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>
                                        <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" onclick="expandCart(this)">

                                            <div class="counter-area">
                                                <div class="minus-btn" onclick="changeCount(event, this, -1)">−</div>
                                                <div class="count-val">1</div>
                                            </div>

                                            <div class="plus-icon">
                                                <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"><a href="{{ route('frontend.product-details') }}">
                                                Aashirvaad Whole Wheat At</a></div>

                                        <div class="prod-qty">
                                            <span> 1 kg </span>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>

                    </div>

                    <!-- FRUITS -->
                    <div class="tab-pane fade" id="fruits">
                        <div class="d-flex justify-content-between align-items-center mb-3 px-2 pt-2">
                            <h4 class="mb-3">Fruits</h4>
                            <span class="tot-tag">Total Items-(10)</span>
                        </div>
                        <div class="row g-3">
                            <div class="col-lg-2 col-md-3 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>
                                        <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" onclick="expandCart(this)">

                                            <div class="counter-area">
                                                <div class="minus-btn" onclick="changeCount(event, this, -1)">−</div>
                                                <div class="count-val">1</div>
                                            </div>

                                            <div class="plus-icon">
                                                <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"><a href="{{ route('frontend.product-details') }}">
                                                Aashirvaad Whole Wheat At</a>
                                        </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>
                            <div class="col-lg-2 col-md-3 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>
                                        <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" onclick="expandCart(this)">

                                            <div class="counter-area">
                                                <div class="minus-btn" onclick="changeCount(event, this, -1)">−</div>
                                                <div class="count-val">1</div>
                                            </div>

                                            <div class="plus-icon">
                                                <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"><a href="{{ route('frontend.product-details') }}">
                                                Aashirvaad Whole Wheat At</a></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>
                            <div class="col-lg-2 col-md-3 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" onclick="expandCart(this)">

                                            <div class="counter-area">
                                                <div class="minus-btn" onclick="changeCount(event, this, -1)">−</div>
                                                <div class="count-val">1</div>
                                            </div>

                                            <div class="plus-icon">
                                                <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"><a href="{{ route('frontend.product-details') }}">
                                                Aashirvaad Whole Wheat At</a></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>
                            <div class="col-lg-2 col-md-3 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" onclick="expandCart(this)">

                                            <div class="counter-area">
                                                <div class="minus-btn" onclick="changeCount(event, this, -1)">−</div>
                                                <div class="count-val">1</div>
                                            </div>

                                            <div class="plus-icon">
                                                <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"><a href="{{ route('frontend.product-details') }}">
                                                Aashirvaad Whole Wheat At</a></div>

                                        <div class="prod-qty">
                                            <span> 1 kg </span>
                                        </div>
                                    </div>
                                </div>

                            </div>
                            <div class="col-lg-2 col-md-3 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>
                                        <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" onclick="expandCart(this)">

                                            <div class="counter-area">
                                                <div class="minus-btn" onclick="changeCount(event, this, -1)">−</div>
                                                <div class="count-val">1</div>
                                            </div>

                                            <div class="plus-icon">
                                                <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"><a href="{{ route('frontend.product-details') }}">
                                                Aashirvaad Whole Wheat At</a></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>
                            <div class="col-lg-2 col-md-3 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>
                                        <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" onclick="expandCart(this)">

                                            <div class="counter-area">
                                                <div class="minus-btn" onclick="changeCount(event, this, -1)">−</div>
                                                <div class="count-val">1</div>
                                            </div>

                                            <div class="plus-icon">
                                                <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"><a href="{{ route('frontend.product-details') }}">
                                                Aashirvaad Whole Wheat At</a></div>

                                        <div class="prod-qty">
                                            <span> 1 kg </span>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>

                    <!-- VEGETABLES -->
                    <div class="tab-pane fade" id="vegetables">
                        <div class="d-flex justify-content-between align-items-center mb-3 px-2 pt-2">
                            <h4 class="mb-3">Vegetables</h4>
                            <span class="tot-tag">Total Items-(20)</span>
                        </div>
                        <div class="row g-3">
                            <div class="col-lg-2 col-md-3 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>
                                        <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" onclick="expandCart(this)">

                                            <div class="counter-area">
                                                <div class="minus-btn" onclick="changeCount(event, this, -1)">−</div>
                                                <div class="count-val">1</div>
                                            </div>

                                            <div class="plus-icon">
                                                <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"><a href="{{ route('frontend.product-details') }}">
                                                Aashirvaad Whole Wheat At</a>
                                        </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>
                            <div class="col-lg-2 col-md-3 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>
                                        <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" onclick="expandCart(this)">

                                            <div class="counter-area">
                                                <div class="minus-btn" onclick="changeCount(event, this, -1)">−</div>
                                                <div class="count-val">1</div>
                                            </div>

                                            <div class="plus-icon">
                                                <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"><a href="{{ route('frontend.product-details') }}">
                                                Aashirvaad Whole Wheat At</a></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>
                            <div class="col-lg-2 col-md-3 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" onclick="expandCart(this)">

                                            <div class="counter-area">
                                                <div class="minus-btn" onclick="changeCount(event, this, -1)">−</div>
                                                <div class="count-val">1</div>
                                            </div>

                                            <div class="plus-icon">
                                                <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"><a href="{{ route('frontend.product-details') }}">
                                                Aashirvaad Whole Wheat At</a></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>
                            <div class="col-lg-2 col-md-3 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" onclick="expandCart(this)">

                                            <div class="counter-area">
                                                <div class="minus-btn" onclick="changeCount(event, this, -1)">−</div>
                                                <div class="count-val">1</div>
                                            </div>

                                            <div class="plus-icon">
                                                <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"><a href="{{ route('frontend.product-details') }}">
                                                Aashirvaad Whole Wheat At</a></div>

                                        <div class="prod-qty">
                                            <span> 1 kg </span>
                                        </div>
                                    </div>
                                </div>

                            </div>
                            <div class="col-lg-2 col-md-3 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>
                                        <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" onclick="expandCart(this)">

                                            <div class="counter-area">
                                                <div class="minus-btn" onclick="changeCount(event, this, -1)">−</div>
                                                <div class="count-val">1</div>
                                            </div>

                                            <div class="plus-icon">
                                                <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"><a href="{{ route('frontend.product-details') }}">
                                                Aashirvaad Whole Wheat At</a></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>
                            <div class="col-lg-2 col-md-3 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>
                                        <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" onclick="expandCart(this)">

                                            <div class="counter-area">
                                                <div class="minus-btn" onclick="changeCount(event, this, -1)">−</div>
                                                <div class="count-val">1</div>
                                            </div>

                                            <div class="plus-icon">
                                                <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"><a href="{{ route('frontend.product-details') }}">
                                                Aashirvaad Whole Wheat At</a></div>

                                        <div class="prod-qty">
                                            <span> 1 kg </span>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>

                    <!-- GREENS -->
                    <div class="tab-pane fade" id="greens">
                        <div class="d-flex justify-content-between align-items-center mb-3 px-2 pt-2">
                            <h4 class="mb-3">Greens</h4>
                            <span class="tot-tag">Total Items-(20)</span>
                        </div>
                        <div class="row g-3">
                            <div class="col-lg-2 col-md-3 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>
                                        <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" onclick="expandCart(this)">

                                            <div class="counter-area">
                                                <div class="minus-btn" onclick="changeCount(event, this, -1)">−</div>
                                                <div class="count-val">1</div>
                                            </div>

                                            <div class="plus-icon">
                                                <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"><a href="{{ route('frontend.product-details') }}">
                                                Aashirvaad Whole Wheat At</a>
                                        </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>
                            <div class="col-lg-2 col-md-3 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>
                                        <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" onclick="expandCart(this)">

                                            <div class="counter-area">
                                                <div class="minus-btn" onclick="changeCount(event, this, -1)">−</div>
                                                <div class="count-val">1</div>
                                            </div>

                                            <div class="plus-icon">
                                                <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"><a href="{{ route('frontend.product-details') }}">
                                                Aashirvaad Whole Wheat At</a></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>
                            <div class="col-lg-2 col-md-3 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" onclick="expandCart(this)">

                                            <div class="counter-area">
                                                <div class="minus-btn" onclick="changeCount(event, this, -1)">−</div>
                                                <div class="count-val">1</div>
                                            </div>

                                            <div class="plus-icon">
                                                <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"><a href="{{ route('frontend.product-details') }}">
                                                Aashirvaad Whole Wheat At</a></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>
                            <div class="col-lg-2 col-md-3 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" onclick="expandCart(this)">

                                            <div class="counter-area">
                                                <div class="minus-btn" onclick="changeCount(event, this, -1)">−</div>
                                                <div class="count-val">1</div>
                                            </div>

                                            <div class="plus-icon">
                                                <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"><a href="{{ route('frontend.product-details') }}">
                                                Aashirvaad Whole Wheat At</a></div>

                                        <div class="prod-qty">
                                            <span> 1 kg </span>
                                        </div>
                                    </div>
                                </div>

                            </div>
                            <div class="col-lg-2 col-md-3 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>
                                        <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" onclick="expandCart(this)">

                                            <div class="counter-area">
                                                <div class="minus-btn" onclick="changeCount(event, this, -1)">−</div>
                                                <div class="count-val">1</div>
                                            </div>

                                            <div class="plus-icon">
                                                <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"><a href="{{ route('frontend.product-details') }}">
                                                Aashirvaad Whole Wheat At</a></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>
                            <div class="col-lg-2 col-md-3 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>
                                        <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" onclick="expandCart(this)">

                                            <div class="counter-area">
                                                <div class="minus-btn" onclick="changeCount(event, this, -1)">−</div>
                                                <div class="count-val">1</div>
                                            </div>

                                            <div class="plus-icon">
                                                <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"><a href="{{ route('frontend.product-details') }}">
                                                Aashirvaad Whole Wheat At</a></div>

                                        <div class="prod-qty">
                                            <span> 1 kg </span>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>

                    <!-- GROCERIES -->
                    <div class="tab-pane fade" id="groceries">
                        <div class="d-flex justify-content-between align-items-center mb-3 px-2 pt-2">
                            <h4 class="mb-3">Groceries</h4>
                            <span class="tot-tag">Total Items-(20)</span>
                        </div>
                        <div class="row g-3">
                            <div class="col-lg-2 col-md-3 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>
                                        <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" onclick="expandCart(this)">

                                            <div class="counter-area">
                                                <div class="minus-btn" onclick="changeCount(event, this, -1)">−</div>
                                                <div class="count-val">1</div>
                                            </div>

                                            <div class="plus-icon">
                                                <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"><a href="{{ route('frontend.product-details') }}">
                                                Aashirvaad Whole Wheat At</a>
                                        </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>
                            <div class="col-lg-2 col-md-3 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>
                                        <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" onclick="expandCart(this)">

                                            <div class="counter-area">
                                                <div class="minus-btn" onclick="changeCount(event, this, -1)">−</div>
                                                <div class="count-val">1</div>
                                            </div>

                                            <div class="plus-icon">
                                                <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"><a href="{{ route('frontend.product-details') }}">
                                                Aashirvaad Whole Wheat At</a></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 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>
                            <div class="col-lg-2 col-md-3 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" onclick="expandCart(this)">

                                            <div class="counter-area">
                                                <div class="minus-btn" onclick="changeCount(event, this, -1)">−</div>
                                                <div class="count-val">1</div>
                                            </div>

                                            <div class="plus-icon">
                                                <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"><a href="{{ route('frontend.product-details') }}">
                                                Aashirvaad Whole Wheat At</a></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>
                            <div class="col-lg-2 col-md-3 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" onclick="expandCart(this)">

                                            <div class="counter-area">
                                                <div class="minus-btn" onclick="changeCount(event, this, -1)">−</div>
                                                <div class="count-val">1</div>
                                            </div>

                                            <div class="plus-icon">
                                                <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"><a href="{{ route('frontend.product-details') }}">
                                                Aashirvaad Whole Wheat At</a></div>

                                        <div class="prod-qty">
                                            <span> 1 kg </span>
                                        </div>
                                    </div>
                                </div>

                            </div>
                            <div class="col-lg-2 col-md-3 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>
                                        <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" onclick="expandCart(this)">

                                            <div class="counter-area">
                                                <div class="minus-btn" onclick="changeCount(event, this, -1)">−</div>
                                                <div class="count-val">1</div>
                                            </div>

                                            <div class="plus-icon">
                                                <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"><a href="{{ route('frontend.product-details') }}">
                                                Aashirvaad Whole Wheat At</a></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>
                            <div class="col-lg-2 col-md-3 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>
                                        <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" onclick="expandCart(this)">

                                            <div class="counter-area">
                                                <div class="minus-btn" onclick="changeCount(event, this, -1)">−</div>
                                                <div class="count-val">1</div>
                                            </div>

                                            <div class="plus-icon">
                                                <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"><a href="{{ route('frontend.product-details') }}">
                                                Aashirvaad Whole Wheat At</a></div>

                                        <div class="prod-qty">
                                            <span> 1 kg </span>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                    <!-- CHOP VEG -->
                    <div class="tab-pane fade" id="chop-veg">
                        <div class="d-flex justify-content-between align-items-center mb-3 px-2 pt-2">
                            <h4 class="mb-3">Chopped Vegetables</h4>
                            <span class="tot-tag">Total Items-(20)</span>
                        </div>
                        <div class="row g-3">
                            <div class="col-lg-2 col-md-3 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>
                                        <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" onclick="expandCart(this)">

                                            <div class="counter-area">
                                                <div class="minus-btn" onclick="changeCount(event, this, -1)">−</div>
                                                <div class="count-val">1</div>
                                            </div>

                                            <div class="plus-icon">
                                                <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"><a href="{{ route('frontend.product-details') }}">
                                                Aashirvaad Whole Wheat At</a>
                                        </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>
                            <div class="col-lg-2 col-md-3 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>
                                        <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" onclick="expandCart(this)">

                                            <div class="counter-area">
                                                <div class="minus-btn" onclick="changeCount(event, this, -1)">−</div>
                                                <div class="count-val">1</div>
                                            </div>

                                            <div class="plus-icon">
                                                <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"><a href="{{ route('frontend.product-details') }}">
                                                Aashirvaad Whole Wheat At</a></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>
                            <div class="col-lg-2 col-md-3 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" onclick="expandCart(this)">

                                            <div class="counter-area">
                                                <div class="minus-btn" onclick="changeCount(event, this, -1)">−</div>
                                                <div class="count-val">1</div>
                                            </div>

                                            <div class="plus-icon">
                                                <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"><a href="{{ route('frontend.product-details') }}">
                                                Aashirvaad Whole Wheat At</a></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>
                            <div class="col-lg-2 col-md-3 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" onclick="expandCart(this)">

                                            <div class="counter-area">
                                                <div class="minus-btn" onclick="changeCount(event, this, -1)">−</div>
                                                <div class="count-val">1</div>
                                            </div>

                                            <div class="plus-icon">
                                                <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"><a href="{{ route('frontend.product-details') }}">
                                                Aashirvaad Whole Wheat At</a></div>

                                        <div class="prod-qty">
                                            <span> 1 kg </span>
                                        </div>
                                    </div>
                                </div>

                            </div>
                            <div class="col-lg-2 col-md-3 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>
                                        <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" onclick="expandCart(this)">

                                            <div class="counter-area">
                                                <div class="minus-btn" onclick="changeCount(event, this, -1)">−</div>
                                                <div class="count-val">1</div>
                                            </div>

                                            <div class="plus-icon">
                                                <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"><a href="{{ route('frontend.product-details') }}">
                                                Aashirvaad Whole Wheat At</a></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>
                            <div class="col-lg-2 col-md-3 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>
                                        <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" onclick="expandCart(this)">

                                            <div class="counter-area">
                                                <div class="minus-btn" onclick="changeCount(event, this, -1)">−</div>
                                                <div class="count-val">1</div>
                                            </div>

                                            <div class="plus-icon">
                                                <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"><a href="{{ route('frontend.product-details') }}">
                                                Aashirvaad Whole Wheat At</a></div>

                                        <div class="prod-qty">
                                            <span> 1 kg </span>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>

                    <!-- GROCERIES -->
                    <div class="tab-pane fade" id="dry-fruits">
                        <div class="d-flex justify-content-between align-items-center mb-3 px-2 pt-2">
                            <h4 class="mb-3">Dry Fruits</h4>
                            <span class="tot-tag">Total Items-(10)</span>
                        </div>
                        <div class="row g-3">
                            <div class="col-lg-2 col-md-3 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>
                                        <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" onclick="expandCart(this)">

                                            <div class="counter-area">
                                                <div class="minus-btn" onclick="changeCount(event, this, -1)">−</div>
                                                <div class="count-val">1</div>
                                            </div>

                                            <div class="plus-icon">
                                                <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"><a href="{{ route('frontend.product-details') }}">
                                                Aashirvaad Whole Wheat At</a>
                                        </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>
                            <div class="col-lg-2 col-md-3 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>
                                        <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" onclick="expandCart(this)">

                                            <div class="counter-area">
                                                <div class="minus-btn" onclick="changeCount(event, this, -1)">−</div>
                                                <div class="count-val">1</div>
                                            </div>

                                            <div class="plus-icon">
                                                <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"><a href="{{ route('frontend.product-details') }}">
                                                Aashirvaad Whole Wheat At</a></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>
                            <div class="col-lg-2 col-md-3 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" onclick="expandCart(this)">

                                            <div class="counter-area">
                                                <div class="minus-btn" onclick="changeCount(event, this, -1)">−</div>
                                                <div class="count-val">1</div>
                                            </div>

                                            <div class="plus-icon">
                                                <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"><a href="{{ route('frontend.product-details') }}">
                                                Aashirvaad Whole Wheat At</a></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>
                            <div class="col-lg-2 col-md-3 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" onclick="expandCart(this)">

                                            <div class="counter-area">
                                                <div class="minus-btn" onclick="changeCount(event, this, -1)">−</div>
                                                <div class="count-val">1</div>
                                            </div>

                                            <div class="plus-icon">
                                                <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"><a href="{{ route('frontend.product-details') }}">
                                                Aashirvaad Whole Wheat At</a></div>

                                        <div class="prod-qty">
                                            <span> 1 kg </span>
                                        </div>
                                    </div>
                                </div>

                            </div>
                            <div class="col-lg-2 col-md-3 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>
                                        <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" onclick="expandCart(this)">

                                            <div class="counter-area">
                                                <div class="minus-btn" onclick="changeCount(event, this, -1)">−</div>
                                                <div class="count-val">1</div>
                                            </div>

                                            <div class="plus-icon">
                                                <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"><a href="{{ route('frontend.product-details') }}">
                                                Aashirvaad Whole Wheat At</a></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>
                            <div class="col-lg-2 col-md-3 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>
                                        <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" onclick="expandCart(this)">

                                            <div class="counter-area">
                                                <div class="minus-btn" onclick="changeCount(event, this, -1)">−</div>
                                                <div class="count-val">1</div>
                                            </div>

                                            <div class="plus-icon">
                                                <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"><a href="{{ route('frontend.product-details') }}">
                                                Aashirvaad Whole Wheat At</a></div>

                                        <div class="prod-qty">
                                            <span> 1 kg </span>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                    <!-- Salad -->
                    <div class="tab-pane fade" id="salad">
                        <div class="d-flex justify-content-between align-items-center mb-3 px-2 pt-2">
                            <h4 class="mb-3">Salad</h4>
                            <span class="tot-tag">Total Items-(12)</span>
                        </div>
                        <div class="row g-3">
                            <div class="col-lg-2 col-md-3 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>
                                        <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" onclick="expandCart(this)">

                                            <div class="counter-area">
                                                <div class="minus-btn" onclick="changeCount(event, this, -1)">−</div>
                                                <div class="count-val">1</div>
                                            </div>

                                            <div class="plus-icon">
                                                <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"><a href="{{ route('frontend.product-details') }}">
                                                Aashirvaad Whole Wheat At</a>
                                        </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>
                            <div class="col-lg-2 col-md-3 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>
                                        <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" onclick="expandCart(this)">

                                            <div class="counter-area">
                                                <div class="minus-btn" onclick="changeCount(event, this, -1)">−</div>
                                                <div class="count-val">1</div>
                                            </div>

                                            <div class="plus-icon">
                                                <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"><a href="{{ route('frontend.product-details') }}">
                                                Aashirvaad Whole Wheat At</a></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>
                            <div class="col-lg-2 col-md-3 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" onclick="expandCart(this)">

                                            <div class="counter-area">
                                                <div class="minus-btn" onclick="changeCount(event, this, -1)">−</div>
                                                <div class="count-val">1</div>
                                            </div>

                                            <div class="plus-icon">
                                                <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"><a href="{{ route('frontend.product-details') }}">
                                                Aashirvaad Whole Wheat At</a></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>
                            <div class="col-lg-2 col-md-3 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" onclick="expandCart(this)">

                                            <div class="counter-area">
                                                <div class="minus-btn" onclick="changeCount(event, this, -1)">−</div>
                                                <div class="count-val">1</div>
                                            </div>

                                            <div class="plus-icon">
                                                <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"><a href="{{ route('frontend.product-details') }}">
                                                Aashirvaad Whole Wheat At</a></div>

                                        <div class="prod-qty">
                                            <span> 1 kg </span>
                                        </div>
                                    </div>
                                </div>

                            </div>
                            <div class="col-lg-2 col-md-3 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>
                                        <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" onclick="expandCart(this)">

                                            <div class="counter-area">
                                                <div class="minus-btn" onclick="changeCount(event, this, -1)">−</div>
                                                <div class="count-val">1</div>
                                            </div>

                                            <div class="plus-icon">
                                                <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"><a href="{{ route('frontend.product-details') }}">
                                                Aashirvaad Whole Wheat At</a></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>
                            <div class="col-lg-2 col-md-3 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>
                                        <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" onclick="expandCart(this)">

                                            <div class="counter-area">
                                                <div class="minus-btn" onclick="changeCount(event, this, -1)">−</div>
                                                <div class="count-val">1</div>
                                            </div>

                                            <div class="plus-icon">
                                                <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"><a href="{{ route('frontend.product-details') }}">
                                                Aashirvaad Whole Wheat At</a></div>

                                        <div class="prod-qty">
                                            <span> 1 kg </span>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>

                </div>

                <div>
                    <div class="row my-4  align-items-center ">
                        <div class="col-6 col-md-6 col-lg-8">
                            <h3 class="order-title">Order Again</h3>
                        </div>
                        <div class="col-6 col-md-6 col-lg-4 d-flex justify-content-end ">
                            <a href="javascript:void(0);" class="navi-link">See all <i class="fas fa-arrow-right ms-2"></i>

                            </a>
                        </div>
                    </div>
                    <div class="row g-3">
                        <div class="col-lg-2 col-md-3 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>
                                    <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" onclick="expandCart(this)">

                                        <div class="counter-area">
                                            <div class="minus-btn" onclick="changeCount(event, this, -1)">−</div>
                                            <div class="count-val">1</div>
                                        </div>

                                        <div class="plus-icon">
                                            <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"><a href="{{ route('frontend.product-details') }}">
                                            Aashirvaad Whole Wheat At</a>
                                    </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>
                        <div class="col-lg-2 col-md-3 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>
                                    <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" onclick="expandCart(this)">

                                        <div class="counter-area">
                                            <div class="minus-btn" onclick="changeCount(event, this, -1)">−</div>
                                            <div class="count-val">1</div>
                                        </div>

                                        <div class="plus-icon">
                                            <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"><a href="{{ route('frontend.product-details') }}">
                                            Aashirvaad Whole Wheat At</a></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>
                        <div class="col-lg-2 col-md-3 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" onclick="expandCart(this)">

                                        <div class="counter-area">
                                            <div class="minus-btn" onclick="changeCount(event, this, -1)">−</div>
                                            <div class="count-val">1</div>
                                        </div>

                                        <div class="plus-icon">
                                            <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"><a href="{{ route('frontend.product-details') }}">
                                            Aashirvaad Whole Wheat At</a></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>
                        <div class="col-lg-2 col-md-3 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" onclick="expandCart(this)">

                                        <div class="counter-area">
                                            <div class="minus-btn" onclick="changeCount(event, this, -1)">−</div>
                                            <div class="count-val">1</div>
                                        </div>

                                        <div class="plus-icon">
                                            <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"><a href="{{ route('frontend.product-details') }}">
                                            Aashirvaad Whole Wheat At</a></div>

                                    <div class="prod-qty">
                                        <span> 1 kg </span>
                                    </div>
                                </div>
                            </div>

                        </div>
                        <div class="col-lg-2 col-md-3 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>
                                    <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" onclick="expandCart(this)">

                                        <div class="counter-area">
                                            <div class="minus-btn" onclick="changeCount(event, this, -1)">−</div>
                                            <div class="count-val">1</div>
                                        </div>

                                        <div class="plus-icon">
                                            <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"><a href="{{ route('frontend.product-details') }}">
                                            Aashirvaad Whole Wheat At</a></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>
                        <div class="col-lg-2 col-md-3 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>
                                    <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" onclick="expandCart(this)">

                                        <div class="counter-area">
                                            <div class="minus-btn" onclick="changeCount(event, this, -1)">−</div>
                                            <div class="count-val">1</div>
                                        </div>

                                        <div class="plus-icon">
                                            <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"><a href="{{ route('frontend.product-details') }}">
                                            Aashirvaad Whole Wheat At</a></div>

                                    <div class="prod-qty">
                                        <span> 1 kg </span>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>

    <div class="toast-container position-fixed  start-50 translate-middle-x p-3" style="top: 10%; z-index: 9999;">
        <div id="wishlistToast" class="toast align-items-center text-white border-0" role="alert">
            <div class="d-flex">
                <div class="toast-body" id="toastMessage">
                    Product Added to Wishlist
                </div>
                <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"></button>
            </div>
        </div>
    </div>

    <div class="cart-toast-wrap category-sec" id="cartToastWrap">
        <div class="cart-toast">

            <div class="toast-text">
                <div class="toast-title" id="toastTitle"></div>
                <div class="toast-label">Added to Cart</div>
            </div>
            <div class="toast-right">
                <div class="toast-cart-label">Cart</div>
                <div class="toast-items"><span id="toastCount">0</span> Items</div>
            </div>
            <div class="stack-box one" id="stackBox">
                <div class="s-card" id="sc0"></div>
                <div class="s-card" id="sc1"></div>
                <div class="s-card" id="sc2"></div>
            </div>
        </div>
    </div>


@endsection

@section('scripts')
    <script>
        const wishlistBtns = document.querySelectorAll(".wishlist-btn");
        const wishlistToast = document.getElementById("wishlistToast");
        const toastMessage = document.getElementById("toastMessage");

        wishlistBtns.forEach(btn => {
            btn.addEventListener("click", () => {
                btn.classList.toggle("active");

                // Get product name dynamically
                const card = btn.closest(".product-card");
                const productName = card ? card.querySelector(".prod-name a").innerText.trim() : "Product";

                // Set message based on toggle state
                if (btn.classList.contains("active")) {
                    toastMessage.textContent = `${productName} Added to Wishlist`;
                } else {
                    toastMessage.textContent = `${productName} Removed `;
                }

                // Show Bootstrap toast
                const toast = new bootstrap.Toast(wishlistToast, {
                    delay: 3000 // auto hides after 3 seconds
                });
                toast.show();
            });
        });
    </script>

    <script>
        const wishlistBtns = document.querySelectorAll(".wishlist-btn");

        wishlistBtns.forEach(btn => {
            btn.addEventListener("click", () => {
                btn.classList.toggle("active");
            });
        });
    </script>
    <script>
        (function () {

            /* ── Cart state ── */
            const cartState = {};   // { productIndex: count }
            let toastTimer = null;

            /* ── Helpers ── */
            function totalItems() {
                return Object.values(cartState).reduce((s, v) => s + v, 0);
            }

            function updateStack() {
                const keys = Object.keys(cartState).filter(k => cartState[k] > 0);
                const box = document.getElementById('stackBox');
                const cards = ['sc0', 'sc1', 'sc2'].map(id => document.getElementById(id));

                // keep last 3 unique products; front slot = most recently added
                const last3 = keys.slice(-3);
                const filled = [
                    last3[last3.length - 3],
                    last3[last3.length - 2],
                    last3[last3.length - 1]
                ];

                filled.forEach((idx, slot) => {
                    if (idx !== undefined) {
                        // grab the product image src from the actual card in the DOM
                        const productCards = document.querySelectorAll('.product-card');
                        const img = productCards[idx]
                            ? productCards[idx].querySelector('.img-placeholder img')
                            : null;

                        if (img) {
                            cards[slot].innerHTML =
                                `<img src="${img.src}" alt="">`;
                        } else {
                            cards[slot].innerHTML = '';
                        }
                    } else {
                        cards[slot].innerHTML = '';
                    }
                });

                // control how many cards are visible
                box.className = 'stack-box';
                if (keys.length === 1) box.classList.add('one');
                else if (keys.length === 2) box.classList.add('two');
            }

            function showToast(productName, productIndex) {
                updateStack();

                document.getElementById('toastTitle').textContent = productName;
                document.getElementById('toastCount').textContent = totalItems();

                const wrap = document.getElementById('cartToastWrap');
                wrap.classList.remove('show');
                void wrap.offsetWidth;           // force reflow so animation replays
                wrap.classList.add('show');

                if (toastTimer) clearTimeout(toastTimer);
                toastTimer = setTimeout(() => wrap.classList.remove('show'), 3200);
            }

            /* ── Wire up every .cart-btn ── */
            document.querySelectorAll('.cart-btn').forEach(function (btn, index) {

                const minusBtn = btn.querySelector('.minus-btn');
                const countVal = btn.querySelector('.count-val');
                const plusIcon = btn.querySelector('.plus-icon');
                const vLine = btn.querySelector('#vLine');
                const hLine = btn.querySelector('#hLine');

                // grab product name from the same card
                const card = btn.closest('.product-card');
                const productName = card
                    ? (card.querySelector('.prod-name a') || card.querySelector('.prod-name'))?.textContent?.trim()
                    : 'Product';

                let count = 1;
                let expanded = false;

                plusIcon.addEventListener('click', function () {
                    if (!expanded) {
                        expanded = true;
                        count = 1;
                        countVal.textContent = count;
                        btn.classList.add('expanded');

                        if (vLine) vLine.setAttribute('stroke', '#fff');
                        if (hLine) hLine.setAttribute('stroke', '#fff');
                    } else {
                        count++;
                        countVal.textContent = count;
                    }

                    cartState[index] = count;
                    showToast(productName, index);
                });

                minusBtn.addEventListener('click', function (e) {
                    e.stopPropagation();

                    if (count > 1) {
                        count--;
                        countVal.textContent = count;
                        cartState[index] = count;
                        showToast(productName, index);
                    } else {
                        expanded = false;
                        count = 1;
                        delete cartState[index];
                        btn.classList.remove('expanded');

                        if (vLine) vLine.setAttribute('stroke', '#1a7a2e');
                        if (hLine) hLine.setAttribute('stroke', '#1a7a2e');
                    }
                });
            });

        })();
    </script>
    <script>

        function switchTab(targetId) {
            const sidebarBtn = document.querySelector(
                `.nav-pills .nav-link[data-target="${targetId}"]`
            );
            if (sidebarBtn) {
                const bsTab = bootstrap.Tab.getOrCreateInstance(sidebarBtn);
                bsTab.show();
            } else {
                document.querySelectorAll('.tab-pane').forEach(pane => {
                    pane.classList.remove('show', 'active');
                });
                const target = document.getElementById(targetId);
                if (target) target.classList.add('show', 'active');
            }

            document.querySelectorAll('#mobileTabStrip .tab-pill').forEach(pill => {
                pill.classList.toggle('active', pill.dataset.target === targetId);
            });
            document.querySelectorAll('.nav-pills .nav-link').forEach(btn => {
                btn.classList.toggle('active', btn.dataset.target === targetId);
            });
        }

        document.querySelectorAll('#mobileTabStrip .tab-pill').forEach(pill => {
            pill.addEventListener('click', function () {
                switchTab(this.dataset.target);
            });
        });

        document.querySelectorAll('.nav-pills .nav-link').forEach(btn => {
            btn.addEventListener('shown.bs.tab', function () {
                const targetId = this.dataset.target;
                document.querySelectorAll('#mobileTabStrip .tab-pill').forEach(pill => {
                    pill.classList.toggle('active', pill.dataset.target === targetId);
                });
            });
        });

        function expandCart(btn) {
            if (btn.classList.contains('expanded')) return;
            btn.classList.add('expanded');
            btn.addEventListener('click', collapseIfZero);
        }

        function collapseIfZero(e) {
            const btn = e.currentTarget;
            const count = parseInt(btn.querySelector('.count-val').textContent, 10);
            if (count <= 0) {
                btn.classList.remove('expanded');
                btn.querySelector('.count-val').textContent = '1';
                btn.removeEventListener('click', collapseIfZero);
            }
        }

        function changeCount(e, minusBtn, delta) {
            e.stopPropagation();
            const cartBtn = minusBtn.closest('.cart-btn');
            const countEl = cartBtn.querySelector('.count-val');
            let count = parseInt(countEl.textContent, 10) + delta;
            if (count < 1) {
                count = 0;
                countEl.textContent = count;
                setTimeout(() => {
                    cartBtn.classList.remove('expanded');
                    countEl.textContent = '1';
                }, 200);
                return;
            }
            countEl.textContent = count;
        }

        function toggleWishlist(btn) {
            btn.classList.toggle('active');
            const heart = btn.querySelector('.heart');
            if (btn.classList.contains('active')) {
                heart.setAttribute('fill', '#e53935');
                heart.setAttribute('stroke', '#e53935');
            } else {
                heart.setAttribute('fill', 'none');
                heart.setAttribute('stroke', '#bbb');
            }
        }
        document.querySelectorAll('.remove-btn, .chip .remove').forEach(btn => {
            btn.addEventListener('click', function () {
                this.closest('.filter-tag, .chip')?.remove();
            });
        });
    </script>
    <script>
        document.querySelectorAll('.drp-filter-group details').forEach((detail) => {
            detail.addEventListener('toggle', function () {
                if (this.open) {
                    document.querySelectorAll('.drp-filter-group details').forEach((other) => {
                        if (other !== this) {
                            other.removeAttribute('open');
                        }
                    });
                }
            });
        });
    </script>
    <script>
        document.querySelectorAll(".qty-dropdown").forEach(drop => {
            const btn = drop.querySelector(".qty-selected");
            const text = drop.querySelector(".selected-text");
            const items = drop.querySelectorAll(".qty-menu li");

            btn.addEventListener("click", function (e) {
                e.stopPropagation();
                document.querySelectorAll(".qty-dropdown").forEach(d => {
                    if (d !== drop) d.classList.remove("active");
                });
                drop.classList.toggle("active");
            });

            items.forEach(item => {
                item.addEventListener("click", function () {
                    items.forEach(i => i.classList.remove("active"));
                    item.classList.add("active");
                    text.textContent = item.dataset.value;
                    drop.classList.remove("active");
                });
            });
        });

        document.addEventListener("click", function () {
            document.querySelectorAll(".qty-dropdown").forEach(drop => {
                drop.classList.remove("active");
            });
        });
    </script>
@endsection