{{-- ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
    MOBILE BOTTOM NAV — 5-tab bar: Home | Categories | Cart | Orders | Account
    Hidden on md+ screens
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ --}}
<nav class="md:hidden bottom-bar z-50" x-data>
    <div class="flex items-stretch">

        {{-- Home --}}
        <a href="/" class="nav-tab {{ request()->is('/') ? 'active' : '' }}">
            <svg class="w-5 h-5" fill="{{ request()->is('/') ? 'currentColor' : 'none' }}" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                      d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/>
            </svg>
            <span>Home</span>
        </a>

        {{-- Categories --}}
        <a href="/categories" class="nav-tab {{ request()->is('categories') ? 'active' : '' }}">
            <svg class="w-5 h-5" fill="{{ request()->is('categories') ? 'currentColor' : 'none' }}" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                      d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"/>
            </svg>
            <span>Categories</span>
        </a>

        {{-- Cart (centre, prominent) --}}
        <button @click="$store.app.cartDrawerOpen = true"
                class="nav-tab relative {{ request()->is('cart') ? 'active' : '' }}">
            <div class="relative">
                <div class="w-10 h-10 rounded-full bg-orange-500 flex items-center justify-center -mt-4 shadow-lg border-2 border-white">
                    <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                              d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"/>
                    </svg>
                </div>
                <span x-show="$store.app.cartCount > 0"
                      x-text="$store.app.cartCount > 9 ? '9+' : $store.app.cartCount"
                      class="absolute -top-5 -right-1 bg-red-500 text-white text-[10px] font-black
                             w-4 h-4 rounded-full flex items-center justify-center leading-none">
                </span>
            </div>
            <span class="mt-0.5">Cart</span>
        </button>

        {{-- Orders --}}
        <a href="/orders" class="nav-tab {{ request()->is('orders*') ? 'active' : '' }}">
            <svg class="w-5 h-5" fill="{{ request()->is('orders*') ? 'currentColor' : 'none' }}" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                      d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"/>
            </svg>
            <span>Orders</span>
        </a>

        {{-- Account --}}
        <a href="{{ $__store ?? false && auth()->check() ? '/account' : '/login' }}"
           x-bind:href="$store.app.isLoggedIn ? '/account' : '/login'"
           class="nav-tab {{ request()->is('account*') || request()->is('login') || request()->is('register') ? 'active' : '' }}">
            <svg class="w-5 h-5" fill="{{ request()->is('account*') ? 'currentColor' : 'none' }}" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                      d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
            </svg>
            <span>Account</span>
        </a>
    </div>
</nav>