<header class="navbar navbar-expand navbar-sticky sticky-top d-block bg-body z-fixed py-1 py-lg-0 py-xl-1 px-0"
    data-sticky-element>
    <div class="container justify-content-start py-2 py-lg-3">

        <!-- Offcanvas menu toggler (Hamburger) -->
        <button type="button" class="navbar-toggler d-block flex-shrink-0 me-3 me-sm-4" data-bs-toggle="offcanvas"
            data-bs-target="#navbarNav" aria-controls="navbarNav" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <!-- Navbar brand (Logo) -->
        <a class="navbar-brand fs-2 p-0 pe-lg-2 pe-xxl-0 me-0 me-sm-3 me-md-4 me-xxl-5"
            href="{{ route('second', ['home', 'grocery']) }}">AsiaGolf</a>

        <!-- Categories dropdown visible on screens > 991px wide (lg breakpoint) -->
        <div class="dropdown d-none d-lg-block w-100 me-4" style="max-width: 200px">
            <button type="button" class="btn btn-lg btn-secondary w-100 border-0 rounded-pill"
                data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <i class="ci-grid fs-lg me-2 ms-n1"></i>
                Categories
                <i class="ci-chevron-down fs-lg me-2 ms-auto me-n1"></i>
            </button>
            <div class="dropdown-menu rounded-4 p-4" style="--cz-dropdown-spacer: .75rem; margin-left: -75px">
                <div class="d-flex gap-4">
                    <div style="min-width: 170px">
                        <div class="h6">Bakery &amp; bread</div>
                        <ul class="nav flex-column gap-2 mt-n2">
                            <li class="d-flex w-100 pt-1">
                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
                                    href="{{ route('second', ['shop', 'catalog-grocery']) }}">Shop all</a>
                            </li>
                            <li class="d-flex w-100 pt-1">
                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
                                    href="{{ route('second', ['shop', 'catalog-grocery']) }}">Bread</a>
                            </li>
                            <li class="d-flex w-100 pt-1">
                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
                                    href="{{ route('second', ['shop', 'catalog-grocery']) }}">Pastries</a>
                            </li>
                            <li class="d-flex w-100 pt-1">
                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
                                    href="{{ route('second', ['shop', 'catalog-grocery']) }}">Bakery cookies</a>
                            </li>
                            <li class="d-flex w-100 pt-1">
                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
                                    href="{{ route('second', ['shop', 'catalog-grocery']) }}">Cupcakes</a>
                            </li>
                            <li class="d-flex w-100 pt-1">
                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
                                    href="{{ route('second', ['shop', 'catalog-grocery']) }}">Buns &amp; rolls</a>
                            </li>
                        </ul>
                        <div class="h6 pt-4">Meat products</div>
                        <ul class="nav flex-column gap-2 mt-n2">
                            <li class="d-flex w-100 pt-1">
                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
                                    href="{{ route('second', ['shop', 'catalog-grocery']) }}">Shop all</a>
                            </li>
                            <li class="d-flex w-100 pt-1">
                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
                                    href="{{ route('second', ['shop', 'catalog-grocery']) }}">Fresh meat</a>
                            </li>
                            <li class="d-flex w-100 pt-1">
                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
                                    href="{{ route('second', ['shop', 'catalog-grocery']) }}">Processed meat</a>
                            </li>
                            <li class="d-flex w-100 pt-1">
                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
                                    href="{{ route('second', ['shop', 'catalog-grocery']) }}">Seafood</a>
                            </li>
                            <li class="d-flex w-100 pt-1">
                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
                                    href="{{ route('second', ['shop', 'catalog-grocery']) }}">Poultry products</a>
                            </li>
                            <li class="d-flex w-100 pt-1">
                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
                                    href="{{ route('second', ['shop', 'catalog-grocery']) }}">Prepared meat</a>
                            </li>
                        </ul>
                    </div>
                    <div style="min-width: 170px">
                        <div class="h6">Vegetables</div>
                        <ul class="nav flex-column gap-2 mt-n2">
                            <li class="d-flex w-100 pt-1">
                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
                                    href="{{ route('second', ['shop', 'catalog-grocery']) }}">Shop all</a>
                            </li>
                            <li class="d-flex w-100 pt-1">
                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
                                    href="{{ route('second', ['shop', 'catalog-grocery']) }}">Leafy greens</a>
                            </li>
                            <li class="d-flex w-100 pt-1">
                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
                                    href="{{ route('second', ['shop', 'catalog-grocery']) }}">Root vegetables</a>
                            </li>
                            <li class="d-flex w-100 pt-1">
                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
                                    href="{{ route('second', ['shop', 'catalog-grocery']) }}">Allium vegetables</a>
                            </li>
                            <li class="d-flex w-100 pt-1">
                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
                                    href="{{ route('second', ['shop', 'catalog-grocery']) }}">Peppers and tomatoes</a>
                            </li>
                            <li class="d-flex w-100 pt-1">
                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
                                    href="{{ route('second', ['shop', 'catalog-grocery']) }}">Cruciferous</a>
                            </li>
                            <li class="d-flex w-100 pt-1">
                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
                                    href="{{ route('second', ['shop', 'catalog-grocery']) }}">Seasonal squashes</a>
                            </li>
                            <li class="d-flex w-100 pt-1">
                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
                                    href="{{ route('second', ['shop', 'catalog-grocery']) }}">Beans, peas &amp; lentils</a>
                            </li>
                        </ul>
                        <div class="h6 pt-4">Sauces and ketchup</div>
                        <ul class="nav flex-column gap-2 mt-n2">
                            <li class="d-flex w-100 pt-1">
                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
                                    href="{{ route('second', ['shop', 'catalog-grocery']) }}">Shop all</a>
                            </li>
                            <li class="d-flex w-100 pt-1">
                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
                                    href="{{ route('second', ['shop', 'catalog-grocery']) }}">Tomato-based sauces</a>
                            </li>
                            <li class="d-flex w-100 pt-1">
                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
                                    href="{{ route('second', ['shop', 'catalog-grocery']) }}">Salad dressing</a>
                            </li>
                            <li class="d-flex w-100 pt-1">
                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
                                    href="{{ route('second', ['shop', 'catalog-grocery']) }}">Hot sauces</a>
                            </li>
                        </ul>
                    </div>
                    <div style="min-width: 170px">
                        <div class="h6">Fresh fruits</div>
                        <ul class="nav flex-column gap-2 mt-n2">
                            <li class="d-flex w-100 pt-1">
                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
                                    href="{{ route('second', ['shop', 'catalog-grocery']) }}">Shop all</a>
                            </li>
                            <li class="d-flex w-100 pt-1">
                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
                                    href="{{ route('second', ['shop', 'catalog-grocery']) }}">Citrus fruits</a>
                            </li>
                            <li class="d-flex w-100 pt-1">
                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
                                    href="{{ route('second', ['shop', 'catalog-grocery']) }}">Berries</a>
                            </li>
                            <li class="d-flex w-100 pt-1">
                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
                                    href="{{ route('second', ['shop', 'catalog-grocery']) }}">Tropical fruits</a>
                            </li>
                            <li class="d-flex w-100 pt-1">
                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
                                    href="{{ route('second', ['shop', 'catalog-grocery']) }}">Stone fruits</a>
                            </li>
                            <li class="d-flex w-100 pt-1">
                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
                                    href="{{ route('second', ['shop', 'catalog-grocery']) }}">Exotic fruits</a>
                            </li>
                            <li class="d-flex w-100 pt-1">
                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
                                    href="{{ route('second', ['shop', 'catalog-grocery']) }}">Melons</a>
                            </li>
                        </ul>
                        <div class="h6 pt-4">Italian dinner</div>
                        <ul class="nav flex-column gap-2 mt-n2">
                            <li class="d-flex w-100 pt-1">
                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
                                    href="{{ route('second', ['shop', 'catalog-grocery']) }}">Shop all</a>
                            </li>
                            <li class="d-flex w-100 pt-1">
                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
                                    href="{{ route('second', ['shop', 'catalog-grocery']) }}">Pasta &amp; sauces</a>
                            </li>
                            <li class="d-flex w-100 pt-1">
                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
                                    href="{{ route('second', ['shop', 'catalog-grocery']) }}">Italian cheese</a>
                            </li>
                            <li class="d-flex w-100 pt-1">
                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
                                    href="{{ route('second', ['shop', 'catalog-grocery']) }}">Italian meats</a>
                            </li>
                            <li class="d-flex w-100 pt-1">
                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
                                    href="{{ route('second', ['shop', 'catalog-grocery']) }}">Desserts &amp; beverages</a>
                            </li>
                        </ul>
                    </div>
                    <div style="min-width: 170px">
                        <div class="h6">Beverages</div>
                        <ul class="nav flex-column gap-2 mt-n2">
                            <li class="d-flex w-100 pt-1">
                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
                                    href="{{ route('second', ['shop', 'catalog-grocery']) }}">Shop all</a>
                            </li>
                            <li class="d-flex w-100 pt-1">
                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
                                    href="{{ route('second', ['shop', 'catalog-grocery']) }}">Soft drinks</a>
                            </li>
                            <li class="d-flex w-100 pt-1">
                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
                                    href="{{ route('second', ['shop', 'catalog-grocery']) }}">Juices</a>
                            </li>
                            <li class="d-flex w-100 pt-1">
                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
                                    href="{{ route('second', ['shop', 'catalog-grocery']) }}">Sports &amp; energy drinks</a>
                            </li>
                            <li class="d-flex w-100 pt-1">
                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
                                    href="{{ route('second', ['shop', 'catalog-grocery']) }}">Tea and coffee</a>
                            </li>
                            <li class="d-flex w-100 pt-1">
                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
                                    href="{{ route('second', ['shop', 'catalog-grocery']) }}">Alcoholic beverages</a>
                            </li>
                        </ul>
                        <div class="h6 pt-4">Dairy &amp; eggs</div>
                        <ul class="nav flex-column gap-2 mt-n2">
                            <li class="d-flex w-100 pt-1">
                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
                                    href="{{ route('second', ['shop', 'catalog-grocery']) }}">Shop all</a>
                            </li>
                            <li class="d-flex w-100 pt-1">
                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
                                    href="{{ route('second', ['shop', 'catalog-grocery']) }}">Chees</a>
                            </li>
                            <li class="d-flex w-100 pt-1">
                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
                                    href="{{ route('second', ['shop', 'catalog-grocery']) }}">Milk &amp; yogurt</a>
                            </li>
                            <li class="d-flex w-100 pt-1">
                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
                                    href="{{ route('second', ['shop', 'catalog-grocery']) }}">Sour cream</a>
                            </li>
                            <li class="d-flex w-100 pt-1">
                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
                                    href="{{ route('second', ['shop', 'catalog-grocery']) }}">Eggs</a>
                            </li>
                            <li class="d-flex w-100 pt-1">
                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
                                    href="{{ route('second', ['shop', 'catalog-grocery']) }}">Butter &amp; margarine</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

        <!-- Search bar visible on screens > 768px wide (md breakpoint) -->
        <div class="position-relative w-100 d-none d-md-block me-3 me-xl-4">
            <input type="search" class="form-control form-control-lg rounded-pill" placeholder="Search for products"
                aria-label="Search">
            <button type="button"
                class="btn btn-icon btn-ghost fs-lg btn-secondary text-bo border-0 position-absolute top-0 end-0 rounded-circle mt-1 me-1"
                aria-label="Search button">
                <i class="ci-search"></i>
            </button>
        </div>

        <!-- Delivery options toggle visible on screens > 1200px wide (xl breakpoint) -->
        <div class="nav me-4 me-xxl-5 d-none d-xl-block">
            <a class="nav-link flex-column align-items-start animate-underline p-0" href="#deliveryOptions"
                data-bs-toggle="offcanvas" aria-controls="deliveryOptions">
                <div class="h6 fs-sm mb-0">Delivery</div>
                <div class="d-flex align-items-center fs-sm fw-normal text-body">
                    <span class="animate-target text-nowrap">Set your address</span>
                    <i class="ci-chevron-down fs-base ms-1"></i>
                </div>
            </a>
        </div>

        <!-- Button group -->
        <div class="d-flex align-items-center gap-md-1 gap-lg-2 ms-auto">

            <!-- Theme switcher (light/dark/auto) -->
            <div class="dropdown">
                <button type="button"
                    class="theme-switcher btn btn-icon btn-outline-secondary fs-lg border-0 rounded-circle animate-scale"
                    data-bs-toggle="dropdown" aria-expanded="false" aria-label="Toggle theme (light)">
                    <span class="theme-icon-active d-flex animate-target">
                        <i class="ci-sun"></i>
                    </span>
                </button>
                <ul class="dropdown-menu" style="--cz-dropdown-min-width: 9rem">
                    <li>
                        <button type="button" class="dropdown-item active" data-bs-theme-value="light"
                            aria-pressed="true">
                            <span class="theme-icon d-flex fs-base me-2">
                                <i class="ci-sun"></i>
                            </span>
                            <span class="theme-label">Light</span>
                            <i class="item-active-indicator ci-check ms-auto"></i>
                        </button>
                    </li>
                    <li>
                        <button type="button" class="dropdown-item" data-bs-theme-value="dark"
                            aria-pressed="false">
                            <span class="theme-icon d-flex fs-base me-2">
                                <i class="ci-moon"></i>
                            </span>
                            <span class="theme-label">Dark</span>
                            <i class="item-active-indicator ci-check ms-auto"></i>
                        </button>
                    </li>
                    <li>
                        <button type="button" class="dropdown-item" data-bs-theme-value="auto"
                            aria-pressed="false">
                            <span class="theme-icon d-flex fs-base me-2">
                                <i class="ci-auto"></i>
                            </span>
                            <span class="theme-label">Auto</span>
                            <i class="item-active-indicator ci-check ms-auto"></i>
                        </button>
                    </li>
                </ul>
            </div>

            <!-- Search toggle button visible on screens < 768px wide (md breakpoint) -->
            <button type="button"
                class="btn btn-icon fs-xl btn-outline-secondary border-0 rounded-circle animate-shake d-md-none"
                data-bs-toggle="collapse" data-bs-target="#searchBar" aria-controls="searchBar"
                aria-label="Toggle search bar">
                <i class="ci-search animate-target"></i>
            </button>

            <!-- Delivery options button visible on screens < 1200px wide (xl breakpoint) -->
            <button type="button"
                class="btn btn-icon fs-lg btn-outline-secondary border-0 rounded-circle animate-scale d-xl-none"
                data-bs-toggle="offcanvas" data-bs-target="#deliveryOptions" aria-controls="deliveryOptions"
                aria-label="Toggle delivery options offcanvas">
                <i class="ci-map-pin animate-target"></i>
            </button>

            <!-- Account button visible on screens > 768px wide (md breakpoint) -->
            <a class="btn btn-icon fs-lg btn-outline-secondary border-0 rounded-circle animate-shake d-none d-md-inline-flex"
                href="{{ route('second', ['account', 'signin']) }}">
                <i class="ci-user animate-target"></i>
                <span class="visually-hidden">Account</span>
            </a>

            <!-- Cart button -->
            <button type="button"
                class="btn btn-icon fs-xl btn-outline-secondary position-relative border-0 rounded-circle animate-scale"
                data-bs-toggle="offcanvas" data-bs-target="#shoppingCart" aria-controls="shoppingCart"
                aria-label="Shopping cart">
                <span class="position-absolute top-0 start-100 badge fs-xs text-bg-primary rounded-pill ms-n3 z-2"
                    style="--cz-badge-padding-y: .25em; --cz-badge-padding-x: .42em">8</span>
                <i class="ci-shopping-cart animate-target"></i>
            </button>
        </div>
    </div>

    <!-- Search collapse available on screens < 768px wide (md breakpoint) -->
    <div class="collapse d-md-none" id="searchBar">
        <div class="container pt-2 pb-3">
            <div class="position-relative">
                <i class="ci-search position-absolute top-50 translate-middle-y d-flex fs-lg ms-3"></i>
                <input type="search" class="form-control form-icon-start rounded-pill"
                    placeholder="Search for products" data-autofocus="collapse">
            </div>
        </div>
    </div>
</header>
