Responsive Sticky E-commerce Navbar with Search

<header class="sticky top-0 z-50 bg-black/70 border-white/5 border-b backdrop-blur-xl w-full max-w-7xl">
    <div class="max-w-7xl mx-auto px-6 sm:px-8">
        <div class="h-16 flex items-center justify-between gap-4">
            <!-- Brand -->
            <a href="#"
                class="inline-flex items-center justify-center bg-center mix-blend-screen w-[150px] h-[40px] bg-[url(https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/95bbcda7-777d-46c5-84fe-b4dfae5381a9_320w.jpg)] bg-cover rounded"></a>

            <!-- Desktop Nav -->
            <nav class="hidden md:flex items-center gap-8">
                <a class="text-sm transition text-white/60 hover:text-white font-geist" href="#cameras"
                    style="">Cameras</a>
                <a class="text-sm transition text-white/60 hover:text-white font-geist" href="#lenses"
                    style="">Lenses</a>
                <a class="text-sm transition text-white/60 hover:text-white font-geist" href="#accessories"
                    style="">Accessories</a>
                <a class="text-sm transition text-white/60 hover:text-white font-geist" href="#lighting"
                    style="">Lighting</a>
                <a class="text-sm transition text-white/60 hover:text-white font-geist" href="#audio" style="">Audio</a>
                <a class="text-sm transition text-rose-400 hover:text-rose-300 font-geist" href="#deals"
                    style="">Deals</a>
            </nav>

            <!-- Search -->
            <div class="hidden lg:flex flex-1 max-w-xl mx-6">
                <div class="relative w-full">
                    <input type="text" placeholder="Search cameras, lenses, brands..." class="w-full h-10 pr-10 pl-10 rounded-xl border backdrop-blur placeholder-white/40 text-sm outline-none focus:ring-2 focus:ring-white/20 focus:border-white/20 transition border-white/5 bg-black/70 text-white">
                    <div class="absolute left-3 inset-y-0 flex items-center pointer-events-none text-white/50">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                            stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
                            class="w-4 h-4">
                            <path d="m21 21-4.34-4.34" class=""></path>
                            <circle cx="11" cy="11" r="8" class=""></circle>
                        </svg>
                    </div>
                    <button class="absolute right-2 inset-y-0 my-auto inline-flex items-center justify-center h-7 px-2 rounded-lg text-xs transition bg-white/5 text-white/60 hover:text-white hover:bg-white/10 font-geist" style="">⌘K</button>
                </div>
            </div>

            <!-- Actions -->
            <div class="flex items-center gap-3">
                <button class="hidden sm:inline-flex transition hover:bg-white/5 text-sm text-white/70 bg-black h-9 border-white/5 border rounded-lg pr-4 pl-4 items-center justify-center">
                        <span class="font-geist" style="">Account</span>
                    </button>
                <button id="cart-btn" class="relative inline-flex items-center justify-center rounded-lg border h-9 w-9 transition border-white/5 bg-black text-white/70 hover:bg-white/5" aria-label="Shopping cart">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4"><circle cx="8" cy="21" r="1" class=""></circle><circle cx="19" cy="21" r="1" class=""></circle><path d="M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57L20.75 7H5.12" class=""></path></svg>
                        <span id="cart-count" class="absolute -top-1 -right-1 inline-flex items-center justify-center h-4 min-w-[16px] px-1 rounded-full text-[10px] leading-none bg-white text-black font-geist" style="">0</span>
                    </button>
                <button id="mobile-menu-btn" class="md:hidden inline-flex items-center justify-center rounded-lg border h-9 w-9 transition border-white/5 bg-black text-white/70 hover:bg-white/5" aria-label="Open menu">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4"><path d="M4 12h16" class=""></path><path d="M4 18h16" class=""></path><path d="M4 6h16" class=""></path></svg>
                    </button>
            </div>
        </div>

        <!-- Mobile Search -->
        <div class="lg:hidden pb-3">
            <div class="relative">
                <input type="text" placeholder="Search cameras, lenses, brands..." class="w-full h-10 pr-10 pl-10 rounded-xl border backdrop-blur placeholder-white/40 text-sm outline-none focus:ring-2 focus:ring-white/20 focus:border-white/20 transition border-white/5 bg-black/70 text-white">
                <div class="absolute left-3 inset-y-0 flex items-center pointer-events-none text-white/50">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                        stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
                        class="w-4 h-4">
                        <path d="m21 21-4.34-4.34" class=""></path>
                        <circle cx="11" cy="11" r="8" class=""></circle>
                    </svg>
                </div>
            </div>
        </div>
    </div>

    <!-- Mobile Menu Panel -->
    <div id="mobile-menu" class="md:hidden hidden border-t backdrop-blur border-white/5 bg-black/80">
        <div class="max-w-7xl mx-auto px-6 sm:px-8 py-4">
            <nav class="grid grid-cols-2 gap-3">
                <a class="text-sm px-4 py-3 rounded-xl border transition border-white/5 hover:bg-white/5 text-white/70 hover:text-white font-geist"
                    href="#cameras" style="">Cameras</a>
                <a class="text-sm px-4 py-3 rounded-xl border transition border-white/5 hover:bg-white/5 text-white/70 hover:text-white font-geist"
                    href="#lenses" style="">Lenses</a>
                <a class="text-sm px-4 py-3 rounded-xl border transition border-white/5 hover:bg-white/5 text-white/70 hover:text-white font-geist"
                    href="#accessories" style="">Accessories</a>
                <a class="text-sm px-4 py-3 rounded-xl border transition border-white/5 hover:bg-white/5 text-white/70 hover:text-white font-geist"
                    href="#lighting" style="">Lighting</a>
                <a class="text-sm px-4 py-3 rounded-xl border transition border-rose-800 text-rose-400 hover:bg-rose-950 font-geist"
                    href="#deals" style="">Deals</a>
                <a class="text-sm px-4 py-3 rounded-xl border transition border-white/5 hover:bg-white/5 text-white/70 hover:text-white font-geist"
                    href="#support" style="">Support</a>
            </nav>
        </div>
    </div>
</header>