@php
    $genral = App\Genral::first();
    $banner = App\BannerSetting::first();
    $allCats = App\Category::where('status', '1')->orderBy('position')->get();
    $headerCats = $allCats->take(11);

    $cartCount = 0;
    $wishlistCount = 0;
    if (Auth::check()) {
        $cartCount = App\Cart::where('user_id', Auth::user()->id)->count();
        // Count only wishlist rows that will actually render on the wishlist page:
        // the variant's product must still exist & be active, or it's a simple product.
        // Mirrors MainController::wishlist_show() so the badge never shows a phantom
        // count for a soft-deleted variant/product left behind in the table.
        $wishlistCount = App\Wishlist::where('user_id', Auth::user()->id)
            ->where(function ($q) {
                $q->whereHas('variant.products', function ($s) { $s->where('status', '1'); })
                  ->orWhereHas('simple_product');
            })->count();
    } else {
        $cartCount = Session::get('cart') ? count((array) Session::get('cart')) : 0;
    }
    $compareCount = count((array) session('comparison', []));
@endphp

{{-- ===================== TOP UTILITY BAR ===================== --}}
<div class="bg-deep text-white text-[12px]">
    <div class="max-w-[1400px] mx-auto px-4 lg:px-6 h-9 flex items-stretch justify-between gap-3 leading-none">
        <div class="flex items-stretch gap-0 overflow-hidden min-w-0">
            @if($banner && $banner->status == '1')
                @php $bannerText = \Illuminate\Support\Str::limit(strip_tags($banner->content), 90); @endphp
                @if(!empty($banner->url))
                    <a href="{{ url($banner->url) }}" target="_blank" rel="noopener" class="hidden md:inline-flex h-full items-center px-2 truncate hover:text-saffron transition-colors">{{ $bannerText }}</a>
                @else
                    <span class="hidden md:inline-flex h-full items-center px-2 truncate">{{ $bannerText }}</span>
                @endif
            @else
                <span class="hidden md:inline-flex h-full items-center px-2">{{ __('Free shipping on orders. Same-day delivery in 18 cities.') }}</span>
            @endif
        </div>
        <div class="flex items-stretch gap-0 shrink-0">
            @if(isset($genrals_settings) && $genrals_settings['vendor_enable'] == 1)
                <a href="{{ route('applyforseller') }}" class="hidden sm:inline-flex h-full items-center px-2 hover:text-saffron whitespace-nowrap">{{ __('Sell on') }} {{ $genral ? $genral->title : 'Emart' }}</a>
                <span class="hidden sm:inline-flex h-full items-center px-1 opacity-30 select-none">|</span>
            @endif
            <a href="{{ route('track.order') }}" class="inline-flex h-full items-center px-2 hover:text-saffron whitespace-nowrap">{{ __('Track order') }}</a>
            <span class="hidden md:inline-flex h-full items-center px-1 opacity-30 select-none">|</span>

            @php
                $curLangCode = Session::get('changed_language') ?: 'en';
                $curLangName = optional(collect($langauges)->firstWhere('lang_code', $curLangCode))->name ?? (optional(collect($langauges)->first())->name ?? 'English');
            @endphp
            <div class="hidden md:block relative h-full" id="langWrap">
                <button type="button" id="langBtn" class="inline-flex h-full items-center gap-1.5 px-2 hover:text-saffron transition-colors">
                    <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" class="shrink-0"><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18"/></svg>
                    <span id="langCurrent">{{ $curLangName }}</span>
                    <svg id="langCaret" width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" class="transition-transform"><path d="m6 9 6 6 6-6"/></svg>
                </button>
                {{-- Panel is position:fixed with a very high z-index and positioned under the button
                     via JS. This escapes the header's stacking contexts / overflow entirely, so the
                     menu can never be trapped behind the sticky header or the category nav bar. --}}
                <div id="langMenu" class="hidden fixed w-44 max-h-72 overflow-y-auto bg-white rounded-lg shadow-hover border border-slate-100 py-1 text-deep" style="z-index:9999;">
                    @foreach($langauges as $lang)
                        <a href="{{ url('change-language/'.$lang->lang_code) }}" class="block px-3 py-2 text-[13px] {{ $curLangCode == $lang->lang_code ? 'bg-brand-50 text-brand-600 font-semibold' : 'text-slate-700 hover:bg-slate-50' }}">{{ $lang->name }}</a>
                    @endforeach
                </div>
            </div>
            <script>
            (function(){
                var wrap = document.getElementById('langWrap');
                var btn = document.getElementById('langBtn');
                var menu = document.getElementById('langMenu');
                var caret = document.getElementById('langCaret');
                if (!wrap || !btn || !menu) return;
                function place(){
                    var r = btn.getBoundingClientRect();
                    menu.style.top = (r.bottom + 4) + 'px';
                    var left = r.right - menu.offsetWidth;      // right-align to the button
                    menu.style.left = Math.max(8, left) + 'px';
                }
                function open(){ menu.classList.remove('hidden'); place(); if (caret) caret.style.transform = 'rotate(180deg)'; }
                function close(){ menu.classList.add('hidden'); if (caret) caret.style.transform = ''; }
                btn.addEventListener('click', function(e){
                    e.stopPropagation();
                    if (menu.classList.contains('hidden')) open(); else close();
                });
                document.addEventListener('click', function(e){ if (!wrap.contains(e.target) && !menu.contains(e.target)) close(); });
                window.addEventListener('resize', function(){ if (!menu.classList.contains('hidden')) place(); });
                window.addEventListener('scroll', function(){ if (!menu.classList.contains('hidden')) place(); }, true);
            })();
            </script>

            @if(App\AutoDetectGeo::first()->enabel_multicurrency == '1')
                @php
                    // Normalise the enabled-currency list (same two sources the old <select> used)
                    // into a single collection so the custom dropdown can render it uniformly.
                    $currencyList = collect();
                    if (App\AutoDetectGeo::first()->currency_by_country == 1) {
                        foreach ($manualcurrency as $c) { if (isset($c->currency)) $currencyList->push($c->currency); }
                        if ($currencyList->isEmpty() && optional($defCurrency)->currency) $currencyList->push($defCurrency->currency);
                    } else {
                        foreach ($multiCurrency as $c) { if ($c->currency) $currencyList->push($c->currency); }
                    }
                    $curCurMainId = Session::get('currency')['mainid'] ?? null;
                    $curCurCode = Session::get('currency')['id'] ?? (optional($currencyList->first())->code ?? optional(optional($defCurrency)->currency)->code ?? '');
                @endphp
                <div class="hidden md:block relative h-full" id="curWrap">
                    <button type="button" id="curBtn" class="inline-flex h-full items-center gap-1.5 px-2 hover:text-saffron transition-colors">
                        <span id="curCurrent">{{ $curCurCode }}</span>
                        <svg id="curCaret" width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" class="transition-transform"><path d="m6 9 6 6 6-6"/></svg>
                    </button>
                    {{-- fixed + z-9999 so it escapes the sticky header / category-bar stacking contexts --}}
                    <div id="curMenu" class="hidden fixed w-40 max-h-72 overflow-y-auto bg-white rounded-lg shadow-hover border border-slate-100 py-1 text-deep" style="z-index:9999;">
                        @foreach($currencyList as $c)
                            <a href="{{ url('change-currency/'.$c->id) }}" class="block px-3 py-2 text-[13px] {{ $curCurMainId == $c->id ? 'bg-brand-50 text-brand-600 font-semibold' : 'text-slate-700 hover:bg-slate-50' }}">{{ $c->code }}</a>
                        @endforeach
                    </div>
                </div>
                <script>
                (function(){
                    var wrap = document.getElementById('curWrap');
                    var btn = document.getElementById('curBtn');
                    var menu = document.getElementById('curMenu');
                    var caret = document.getElementById('curCaret');
                    if (!wrap || !btn || !menu) return;
                    function place(){
                        var r = btn.getBoundingClientRect();
                        menu.style.top = (r.bottom + 4) + 'px';
                        menu.style.left = Math.max(8, r.right - menu.offsetWidth) + 'px';
                    }
                    function open(){ menu.classList.remove('hidden'); place(); if (caret) caret.style.transform = 'rotate(180deg)'; }
                    function close(){ menu.classList.add('hidden'); if (caret) caret.style.transform = ''; }
                    btn.addEventListener('click', function(e){ e.stopPropagation(); if (menu.classList.contains('hidden')) open(); else close(); });
                    document.addEventListener('click', function(e){ if (!wrap.contains(e.target) && !menu.contains(e.target)) close(); });
                    window.addEventListener('resize', function(){ if (!menu.classList.contains('hidden')) place(); });
                    window.addEventListener('scroll', function(){ if (!menu.classList.contains('hidden')) place(); }, true);
                })();
                </script>
            @else
                @php $dc = optional($defCurrency)->currency; @endphp
                <span class="hidden md:inline-flex h-full items-center px-2 text-[12px]">{{ $dc ? $dc->code : '' }}</span>
            @endif
        </div>
    </div>
</div>

{{-- ===================== MAIN HEADER ===================== --}}
<div class="sticky top-0 z-[60] bg-white border-b border-slate-200">
    <div class="max-w-[1400px] mx-auto px-4 lg:px-6 h-16 lg:h-[70px] flex items-center gap-3 lg:gap-6">

        <button onclick="shToggleMobileMenu('open')" class="lg:hidden w-10 h-10 grid place-items-center hover:bg-slate-100 rounded-md" aria-label="Menu">
            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 7h16M4 12h16M4 17h16"/></svg>
        </button>

        <a href="{{ url('/') }}" class="flex items-center gap-2 shrink-0">
            @if(isset($front_logo) && $front_logo && file_exists(public_path() . '/images/genral/' . $front_logo))
                <img src="{{ url('images/genral/' . $front_logo) }}" alt="{{ $genral ? $genral->title : 'Emart' }}" class="h-9 lg:h-10 w-auto">
            @else
                <div class="w-9 h-9 bg-brand-500 rounded-lg grid place-items-center text-white font-display font-extrabold text-lg">{{ strtoupper(substr($genral ? $genral->title : 'E', 0, 1)) }}</div>
                <span class="font-display font-extrabold text-xl tracking-tight hidden sm:inline">{{ $genral ? $genral->title : 'Emart' }}</span>
            @endif
        </a>

        {{-- Categories dropdown --}}
        <div class="hidden lg:block relative" id="allCatsWrap">
            <button type="button" id="allCatsBtn" class="flex items-center gap-2 text-[13px] text-slate-700 hover:bg-slate-100 px-3 py-2 rounded-md font-semibold transition-colors">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M4 7h16M4 12h16M4 17h16"/></svg>
                {{ __('All') }}
                <svg id="allCatsIcon" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="text-slate-400 transition-transform"><path d="m6 9 6 6 6-6"/></svg>
            </button>
            <div id="allCatsMenu" class="hidden absolute left-0 top-full mt-2 w-72 z-[80]">
                <div class="bg-white rounded-xl shadow-hover border border-slate-100 py-2 max-h-[480px] overflow-y-auto">
                    @foreach($allCats as $cat)
                        @php
                            // Resolve thumbnail: prefer photo, then icon column if it's a file, else FA class.
                            $catThumb = null;
                            $catFa = null;
                            if ($cat->image && file_exists(public_path('/images/category/' . $cat->image))) {
                                $catThumb = url('images/category/' . $cat->image);
                            } elseif ($cat->icon && preg_match('/\.(webp|png|jpe?g|svg)$/i', $cat->icon) && file_exists(public_path('/images/category/' . $cat->icon))) {
                                $catThumb = url('images/category/' . $cat->icon);
                            } elseif ($cat->icon && (str_starts_with($cat->icon, 'fa-') || str_contains($cat->icon, 'fa fa-'))) {
                                $catFa = trim($cat->icon);
                            }
                        @endphp
                        <a href="javascript:void(0)" onclick="changeCategory({{ $cat->id }}, 'main')" class="flex items-center gap-3 px-4 py-2.5 hover:bg-slate-50 text-[13px] text-slate-700">
                            @if($catThumb)
                                <img src="{{ $catThumb }}" alt="" loading="lazy" class="w-6 h-6 rounded object-cover">
                            @elseif($catFa)
                                <span class="w-6 h-6 bg-brand-50 text-brand-600 rounded grid place-items-center"><i class="fa {{ str_starts_with($catFa, 'fa-') ? $catFa : str_replace('fa ', '', $catFa) }}"></i></span>
                            @else
                                <div class="w-6 h-6 bg-brand-50 text-brand-600 rounded grid place-items-center font-bold text-[10px]">{{ strtoupper(substr($cat->title, 0, 1)) }}</div>
                            @endif
                            <span class="flex-1 truncate">{{ $cat->title }}</span>
                            @if(count($cat->subcategory))
                                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m9 6 6 6-6 6"/></svg>
                            @endif
                        </a>
                    @endforeach
                </div>
            </div>
            <script>
            (function(){
                var wrap = document.getElementById('allCatsWrap');
                var btn = document.getElementById('allCatsBtn');
                var menu = document.getElementById('allCatsMenu');
                var icon = document.getElementById('allCatsIcon');
                if (!wrap || !btn || !menu) return;
                btn.addEventListener('click', function(e){
                    e.stopPropagation();
                    var hidden = menu.classList.toggle('hidden');
                    if (icon) icon.style.transform = hidden ? '' : 'rotate(180deg)';
                });
                document.addEventListener('click', function(e){
                    if (!wrap.contains(e.target)) {
                        menu.classList.add('hidden');
                        if (icon) icon.style.transform = '';
                    }
                });
            })();
            </script>
        </div>

        {{-- Search --}}
        <div class="flex-1 max-w-3xl relative" id="liveSearchWrap">
            <form id="searchSubmit" method="get" action="{{ url('shop') }}" class="flex h-11 rounded-lg border-2 border-slate-200 hover:border-brand-500 focus-within:border-brand-500 transition-colors bg-white">
                {{-- Custom Tailwind category dropdown trigger --}}
                <input type="hidden" name="cat" id="catDropInput" value="">
                <button type="button" id="catDropBtn" class="h-full bg-slate-50 hover:bg-slate-100 border-r border-slate-200 pl-4 pr-3 hidden sm:flex items-center gap-2 text-[13px] text-slate-700 font-semibold whitespace-nowrap min-w-[150px] rounded-l-md transition-colors">
                    <span id="catDropLabel">{{ __('All Categories') }}</span>
                    <svg id="catDropIcon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="text-slate-400 transition-transform"><path d="m6 9 6 6 6-6"/></svg>
                </button>
                <input type="text" name="keyword" id="liveSearchInput" autocomplete="off" placeholder="{{ __('Search for products, brands, categories...') }}" class="flex-1 px-4 outline-none text-[14px] min-w-0">
                <button type="button" id="voiceSearchBtn" class="px-3 grid place-items-center text-slate-500 hover:text-brand-600 hover:bg-slate-50 transition-colors border-l border-slate-200" aria-label="{{ __('Voice search') }}" title="{{ __('Voice search') }}">
                    <svg id="voiceSearchIcon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><rect x="9" y="3" width="6" height="12" rx="3"/><path d="M5 11a7 7 0 0 0 14 0"/><path d="M12 18v3"/></svg>
                </button>
                <button type="submit" class="bg-brand-500 hover:bg-brand-600 text-white px-5 grid place-items-center transition-colors rounded-r-md" aria-label="Search">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg>
                </button>
            </form>

            {{-- Dropdown menu lives OUTSIDE the form so the form's rounded clipping doesn't hide it --}}
            <div id="catDropMenu" class="absolute left-0 top-full mt-2 w-60 max-h-[360px] overflow-y-auto bg-white rounded-xl shadow-hover border border-slate-100 z-[80] hidden">
                <ul id="catDropList">
                    <li>
                        <button type="button" data-cat-value="" data-cat-label="{{ __('All Categories') }}" class="cat-drop-item w-full text-left px-4 py-2.5 text-[13px] hover:bg-slate-50 flex items-center justify-between gap-2 bg-brand-50 text-brand-600 font-semibold">
                            <span>{{ __('All Categories') }}</span>
                            <svg class="cat-check w-4 h-4 text-brand-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="m4 12 5 5L20 7"/></svg>
                        </button>
                    </li>
                    @foreach($allCats as $category)
                        <li>
                            <button type="button" data-cat-value="{{ $category->id }}" data-cat-label="{{ $category->title }}" class="cat-drop-item w-full text-left px-4 py-2.5 text-[13px] hover:bg-slate-50 flex items-center justify-between gap-2 text-slate-700">
                                <span class="truncate">{{ $category->title }}</span>
                                <svg class="cat-check w-4 h-4 text-brand-600 hidden shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="m4 12 5 5L20 7"/></svg>
                            </button>
                        </li>
                    @endforeach
                </ul>
            </div>

            <div id="liveSearchDropdown" class="absolute left-0 right-0 mt-1 bg-white rounded-xl shadow-hover border border-slate-100 max-h-[420px] overflow-y-auto z-50 hidden"></div>
        </div>

        <script>
        (function(){
            var btn = document.getElementById('catDropBtn');
            var menu = document.getElementById('catDropMenu');
            if (!btn || !menu) return;
            var icon = document.getElementById('catDropIcon');
            var label = document.getElementById('catDropLabel');
            var input = document.getElementById('catDropInput');
            var list = document.getElementById('catDropList');
            function close(){ menu.classList.add('hidden'); if (icon) icon.style.transform = ''; }
            function open(){
                menu.classList.remove('hidden');
                if (icon) icon.style.transform = 'rotate(180deg)';
            }
            btn.addEventListener('click', function(e){
                e.preventDefault();
                e.stopPropagation();
                menu.classList.contains('hidden') ? open() : close();
            });
            document.addEventListener('click', function(e){
                if (!menu.contains(e.target) && !btn.contains(e.target)) close();
            });
            list.addEventListener('click', function(e){
                var it = e.target.closest('.cat-drop-item'); if (!it) return;
                e.preventDefault();
                input.value = it.getAttribute('data-cat-value') || '';
                label.textContent = it.getAttribute('data-cat-label') || @json(__('All Categories'));
                list.querySelectorAll('.cat-drop-item').forEach(function(el){
                    el.classList.remove('bg-brand-50','text-brand-600','font-semibold');
                    el.classList.add('text-slate-700');
                    var c = el.querySelector('.cat-check'); if (c) c.classList.add('hidden');
                });
                it.classList.remove('text-slate-700');
                it.classList.add('bg-brand-50','text-brand-600','font-semibold');
                var c = it.querySelector('.cat-check'); if (c) c.classList.remove('hidden');
                close();
            });
        })();

        // Voice search via Web Speech API
        window.__initVoiceSearch = function(){
            var btn = document.getElementById('voiceSearchBtn');
            var input = document.getElementById('liveSearchInput');
            var icon = document.getElementById('voiceSearchIcon');
            var form = document.getElementById('searchSubmit');
            if (!btn || !input) return;
            if (btn.dataset.voiceBound === '1') return;
            btn.dataset.voiceBound = '1';

            function notify(type, msg){
                if (window.toastr && toastr[type]) toastr[type](msg);
                else alert(msg);
            }

            var SR = window.SpeechRecognition || window.webkitSpeechRecognition;
            var isSecure = window.isSecureContext || location.protocol === 'https:' || location.hostname === 'localhost' || location.hostname === '127.0.0.1';

            if (!SR) {
                btn.addEventListener('click', function(e){
                    e.preventDefault();
                    notify('warning', @json(__('Voice search is not supported in this browser. Try Chrome, Edge, or Safari.')));
                });
                btn.classList.add('opacity-50');
                return;
            }
            if (!isSecure) {
                btn.addEventListener('click', function(e){
                    e.preventDefault();
                    notify('warning', @json(__('Voice search requires a secure (https) connection.')));
                });
                btn.classList.add('opacity-50');
                return;
            }

            var rec = null;
            var listening = false;

            function makeRec(){
                var r = new SR();
                try { r.lang = navigator.language || 'en-US'; } catch(e){ r.lang = 'en-US'; }
                r.interimResults = false;
                r.maxAlternatives = 1;
                r.continuous = false;
                r.onstart = setOn;
                r.onend = setOff;
                r.onerror = function(ev){
                    setOff();
                    var err = ev && ev.error ? ev.error : '';
                    if (err === 'not-allowed' || err === 'service-not-allowed') {
                        notify('error', @json(__('Microphone access was blocked. Allow it in your browser site settings.')));
                    } else if (err === 'no-speech') {
                        notify('info', @json(__('No speech detected. Please try again.')));
                    } else if (err === 'audio-capture') {
                        notify('error', @json(__('No microphone found.')));
                    } else if (err === 'network') {
                        notify('error', @json(__('Network error during voice recognition.')));
                    } else if (err) {
                        notify('warning', @json(__('Voice search error:')) + ' ' + err);
                    }
                };
                r.onresult = function(ev){
                    var txt = (ev.results && ev.results[0] && ev.results[0][0] && ev.results[0][0].transcript) || '';
                    txt = txt.replace(/[.?!,;:]+$/, '').trim();
                    if (txt) {
                        input.value = txt;
                        try { input.dispatchEvent(new Event('input', { bubbles: true })); } catch(e){}
                        setOff();
                        if (form) form.submit();
                    }
                };
                return r;
            }

            function setOn(){
                listening = true;
                btn.classList.add('text-rose-500','bg-rose-50');
                btn.classList.remove('text-slate-500');
                btn.setAttribute('aria-pressed','true');
                if (icon) icon.style.animation = 'pulse 1s ease-in-out infinite';
            }
            function setOff(){
                listening = false;
                btn.classList.remove('text-rose-500','bg-rose-50');
                btn.classList.add('text-slate-500');
                btn.setAttribute('aria-pressed','false');
                if (icon) icon.style.animation = '';
            }

            function tryStart(){
                if (!rec) rec = makeRec();
                if (listening) { try { rec.stop(); } catch(e){} return; }
                try {
                    rec.start();
                } catch(err){
                    // start() throws if called twice in a row — reset
                    try { rec.abort(); } catch(e){}
                    rec = makeRec();
                    setTimeout(function(){ try { rec.start(); } catch(e){ setOff(); notify('error', @json(__('Could not start voice search'))); } }, 50);
                }
            }

            btn.addEventListener('click', function(e){
                e.preventDefault();
                e.stopPropagation();
                // Pre-request mic permission so we get a clear prompt instead of a silent no-op
                if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
                    navigator.mediaDevices.getUserMedia({ audio: true })
                        .then(function(stream){
                            try { stream.getTracks().forEach(function(t){ t.stop(); }); } catch(e){}
                            tryStart();
                        })
                        .catch(function(err){
                            notify('error', @json(__('Microphone access denied. Please allow it in your browser settings.')));
                        });
                } else {
                    tryStart();
                }
            });
        };
        if (document.readyState === 'loading') {
            document.addEventListener('DOMContentLoaded', window.__initVoiceSearch);
        } else {
            window.__initVoiceSearch();
        }
        </script>

        <div class="flex items-center gap-1 lg:gap-2 shrink-0">

            @if(Auth::check())
                <div class="hidden lg:block relative group">
                    <button class="flex items-center gap-2 hover:bg-slate-100 px-2 py-1.5 rounded-md text-[12px]">
                        @if(Auth::user()->image && file_exists(public_path() . '/images/user/' . Auth::user()->image))
                            <img src="{{ url('images/user/' . Auth::user()->image) }}" alt="" class="w-8 h-8 rounded-full object-cover">
                        @else
                            <img src="{{ Avatar::create(Auth::user()->name)->toBase64() }}" alt="" class="w-8 h-8 rounded-full">
                        @endif
                        <span class="text-left leading-tight">
                            <span class="block text-slate-500">{{ __('Hello') }},</span>
                            <span class="font-semibold flex items-center gap-1 text-deep">{{ \Illuminate\Support\Str::limit(Auth::user()->name, 12) }}<svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m6 9 6 6 6-6"/></svg></span>
                        </span>
                    </button>
                    <div class="invisible opacity-0 group-hover:visible group-hover:opacity-100 absolute right-0 top-full pt-2 w-60 z-50 transition-all">
                        <div class="bg-white rounded-xl shadow-hover border border-slate-100 p-2">
                            <div class="px-3 py-3 border-b border-slate-100">
                                <div class="font-semibold text-[14px] truncate">{{ Auth::user()->name }}</div>
                                <div class="text-[11px] text-slate-500 truncate">{{ Auth::user()->email }}</div>
                            </div>
                            @if(Auth::user()->role_id == 'a')
                                <a href="{{ route('admin.main') }}" target="_blank" rel="noopener" class="flex items-center gap-2 px-3 py-2 hover:bg-slate-50 rounded text-[13px]">
                                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3a14 14 0 0 1 0 18"/></svg>
                                    <span class="flex-1">{{ __('Admin Dashboard') }}</span>
                                    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="text-slate-400"><path d="M14 3h7v7M10 14 21 3M21 14v5a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5"/></svg>
                                </a>
                            @elseif(Auth::user()->role_id == 'v' && isset(Auth::user()->store))
                                <a href="{{ route('seller.dboard') }}" target="_blank" rel="noopener" class="flex items-center gap-2 px-3 py-2 hover:bg-slate-50 rounded text-[13px]">
                                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><path d="M3 9 12 3l9 6v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V9Z"/></svg>
                                    <span class="flex-1">{{ __('Seller Dashboard') }}</span>
                                    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="text-slate-400"><path d="M14 3h7v7M10 14 21 3M21 14v5a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5"/></svg>
                                </a>
                            @endif
                            <a href="{{ url('profile') }}" target="_blank" rel="noopener" class="flex items-center gap-2 px-3 py-2 hover:bg-slate-50 rounded text-[13px]">
                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><circle cx="12" cy="7" r="4"/><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/></svg>
                                <span class="flex-1">{{ __('My Account') }}</span>
                                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="text-slate-400"><path d="M14 3h7v7M10 14 21 3M21 14v5a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5"/></svg>
                            </a>
                            <a href="{{ url('order') }}" class="flex items-center gap-2 px-3 py-2 hover:bg-slate-50 rounded text-[13px]">
                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><path d="M5 8h14l-1.2 11.2a2 2 0 0 1-2 1.8H8.2a2 2 0 0 1-2-1.8L5 8Z"/><path d="M9 8V6a3 3 0 0 1 6 0v2"/></svg>{{ __('My Orders') }}
                            </a>
                            <a href="{{ url('wishlist') }}" class="flex items-center gap-2 px-3 py-2 hover:bg-slate-50 rounded text-[13px]">
                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><path d="M12 20s-7-4.5-9-9.2A4.8 4.8 0 0 1 7.5 5 4.8 4.8 0 0 1 12 8a4.8 4.8 0 0 1 4.5-3A4.8 4.8 0 0 1 21 10.8C19 15.5 12 20 12 20Z"/></svg>{{ __('Wishlist') }}
                            </a>
                            <a href="{{ url('comparisonlist') }}" class="flex items-center gap-2 px-3 py-2 hover:bg-slate-50 rounded text-[13px]">
                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><path d="M21 16V8a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2Z"/><path d="M12 6v12"/></svg>{{ __('Compare') }}
                            </a>
                            <button onclick="logout()" class="w-full flex items-center gap-2 px-3 py-2 hover:bg-rose-50 rounded text-[13px] text-rose-600">
                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4M16 17l5-5-5-5M21 12H9"/></svg>{{ __('Logout') }}
                            </button>
                            <form action="{{ route('logout') }}" method="POST" class="logout-form" style="display:none">@csrf</form>
                        </div>
                    </div>
                </div>
            @else
                <button data-sh-modal-open="loginModal" class="hidden lg:flex flex-col items-start hover:bg-slate-100 px-3 py-1.5 rounded-md text-[12px] leading-tight">
                    <span class="text-slate-500">{{ __('Hello, sign in') }}</span>
                    <span class="font-semibold flex items-center gap-1 text-deep">{{ __('Account') }}<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m6 9 6 6 6-6"/></svg></span>
                </button>
            @endif

            @php
                if (!Auth::check()) {
                    $wishlistCount = count((array) session('guest_wishlist', []));
                }
            @endphp
            <a href="{{ url('comparisonlist') }}" class="relative hidden md:grid place-items-center w-10 h-10 rounded-full hover:bg-slate-100" aria-label="Compare" title="{{ __('Compare') }}">
                <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><path d="M21 16V8a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2Z"/><path d="M12 6v12"/></svg>
                <span class="compare_count absolute -top-1 -right-1 bg-brand-500 text-white text-[10px] font-bold rounded-full min-w-[18px] h-[18px] px-1 grid place-items-center tabular {{ $compareCount == 0 ? 'hidden' : '' }}">{{ $compareCount }}</span>
            </a>

            <a href="{{ url('wishlist') }}" class="relative hidden md:grid place-items-center w-10 h-10 rounded-full hover:bg-slate-100" aria-label="Wishlist" title="{{ __('Wishlist') }}">
                <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><path d="M12 20s-7-4.5-9-9.2A4.8 4.8 0 0 1 7.5 5 4.8 4.8 0 0 1 12 8a4.8 4.8 0 0 1 4.5-3A4.8 4.8 0 0 1 21 10.8C19 15.5 12 20 12 20Z"/></svg>
                <span class="wishlist_count absolute -top-1 -right-1 bg-saffron text-white text-[10px] font-bold rounded-full min-w-[18px] h-[18px] px-1 grid place-items-center tabular {{ $wishlistCount == 0 ? 'hidden' : '' }}">{{ $wishlistCount }}</span>
            </a>

            <button type="button" onclick="if(window.openCartDrawer) window.openCartDrawer(); else window.location='{{ url('cart') }}';" class="relative grid place-items-center w-10 h-10 rounded-full hover:bg-slate-100" aria-label="Cart" title="{{ __('Cart') }}">
                <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><path d="M5 8h14l-1.2 11.2a2 2 0 0 1-2 1.8H8.2a2 2 0 0 1-2-1.8L5 8Z"/><path d="M9 8V6a3 3 0 0 1 6 0v2"/></svg>
                <span class="cart_count absolute -top-1 -right-1 bg-saffron text-white text-[10px] font-bold rounded-full min-w-[18px] h-[18px] px-1 grid place-items-center tabular {{ $cartCount == 0 ? 'hidden' : '' }}">{{ $cartCount }}</span>
            </button>
        </div>
    </div>

    {{-- Category nav (dynamic) --}}
    <div class="bg-deep text-white">
        <div class="max-w-[1400px] mx-auto px-4 lg:px-6 h-11 flex items-stretch gap-0 text-[13px] overflow-x-auto no-scrollbar leading-none">
            <a href="{{ url('/') }}" class="h-full inline-flex items-center px-3 font-semibold hover:text-saffron whitespace-nowrap shrink-0">{{ __('Home') }}</a>
            <span class="h-full inline-flex items-center px-1 opacity-30 shrink-0 select-none">|</span>
            <a href="{{ url('flashdeals/list') }}" class="h-full inline-flex items-center gap-1.5 px-3 font-semibold hover:text-saffron whitespace-nowrap shrink-0">
                <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" class="text-saffron shrink-0"><path d="M13 2 3 14h7v8l10-12h-7V2Z"/></svg>
                <span>{{ __("Today's Deals") }}</span>
            </a>
            @foreach($headerCats as $cat)
                <a href="javascript:void(0)" onclick="changeCategory({{ $cat->id }}, 'main')" class="h-full inline-flex items-center px-3 font-semibold hover:text-saffron whitespace-nowrap shrink-0">{{ $cat->title }}</a>
            @endforeach
            <span class="h-full inline-flex items-center px-1 opacity-30 shrink-0 select-none">|</span>
            <a href="{{ url('blog') }}" class="h-full inline-flex items-center px-3 font-semibold hover:text-saffron whitespace-nowrap shrink-0">{{ __('Blog') }}</a>
        </div>
    </div>
</div>

{{-- ===================== MOBILE MENU DRAWER ===================== --}}
<div id="mobileMenuOverlay" class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm opacity-0 pointer-events-none transition-opacity lg:hidden" onclick="shToggleMobileMenu('close')"></div>
<aside id="mobileMenu" class="fixed top-0 left-0 bottom-0 w-[85%] max-w-[340px] z-50 bg-white -translate-x-full transition-transform duration-300 flex flex-col lg:hidden">
    <div class="flex items-center justify-between p-4 border-b border-slate-100">
        @if(isset($front_logo) && $front_logo && file_exists(public_path() . '/images/genral/' . $front_logo))
            <img src="{{ url('images/genral/' . $front_logo) }}" class="h-8 w-auto" alt="">
        @else
            <div class="font-display font-extrabold text-lg">{{ $genral ? $genral->title : 'Emart' }}</div>
        @endif
        <button onclick="shToggleMobileMenu('close')" class="w-9 h-9 grid place-items-center hover:bg-slate-100 rounded-full">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 6l12 12M18 6 6 18"/></svg>
        </button>
    </div>
    <div class="flex-1 overflow-y-auto">
        @if(Auth::check())
            <div class="bg-gradient-to-br from-brand-500 to-brand-700 text-white p-5">
                @if(Auth::user()->image && file_exists(public_path() . '/images/user/' . Auth::user()->image))
                    <img src="{{ url('images/user/' . Auth::user()->image) }}" class="w-14 h-14 rounded-full object-cover border-2 border-white/30">
                @else
                    <img src="{{ Avatar::create(Auth::user()->name)->toBase64() }}" class="w-14 h-14 rounded-full border-2 border-white/30">
                @endif
                <div class="font-semibold text-lg mt-2">{{ Auth::user()->name }}</div>
                <div class="text-[12px] opacity-80 truncate">{{ Auth::user()->email }}</div>
            </div>
        @else
            <div class="p-4">
                <button data-sh-modal-open="loginModal" onclick="shToggleMobileMenu('close')" class="w-full bg-brand-500 hover:bg-brand-600 text-white font-bold py-3 rounded-lg">{{ __('Login / Register') }}</button>
            </div>
        @endif

        <nav class="p-2">
            <a href="{{ url('/') }}" class="flex items-center gap-3 px-3 py-3 hover:bg-slate-50 rounded-lg text-[14px]"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2Z"/></svg>{{ __('Home') }}</a>
            <a href="{{ url('flashdeals/list') }}" class="flex items-center gap-3 px-3 py-3 hover:bg-slate-50 rounded-lg text-[14px]"><svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" class="text-saffron"><path d="M13 2 3 14h7v8l10-12h-7V2Z"/></svg>{{ __('Flash Deals') }}</a>
            <a href="{{ url('blog') }}" class="flex items-center gap-3 px-3 py-3 hover:bg-slate-50 rounded-lg text-[14px]"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6"/></svg>{{ __('Blog') }}</a>
            @if(Auth::check())
                <a href="{{ url('profile') }}" target="_blank" rel="noopener" class="flex items-center gap-3 px-3 py-3 hover:bg-slate-50 rounded-lg text-[14px]"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><circle cx="12" cy="7" r="4"/><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/></svg>{{ __('My Account') }}</a>
                <a href="{{ url('order') }}" class="flex items-center gap-3 px-3 py-3 hover:bg-slate-50 rounded-lg text-[14px]"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><path d="M5 8h14l-1.2 11.2a2 2 0 0 1-2 1.8H8.2a2 2 0 0 1-2-1.8L5 8Z"/></svg>{{ __('My Orders') }}</a>
                <a href="{{ url('wishlist') }}" class="flex items-center gap-3 px-3 py-3 hover:bg-slate-50 rounded-lg text-[14px]"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><path d="M12 20s-7-4.5-9-9.2A4.8 4.8 0 0 1 7.5 5 4.8 4.8 0 0 1 12 8a4.8 4.8 0 0 1 4.5-3A4.8 4.8 0 0 1 21 10.8C19 15.5 12 20 12 20Z"/></svg>{{ __('Wishlist') }}</a>
            @endif
            <a href="{{ route('track.order') }}" class="flex items-center gap-3 px-3 py-3 hover:bg-slate-50 rounded-lg text-[14px]"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><path d="M21 16V8a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2Z"/></svg>{{ __('Track Order') }}</a>
            <a href="{{ route('hdesk') }}" class="flex items-center gap-3 px-3 py-3 hover:bg-slate-50 rounded-lg text-[14px]"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><path d="M21 15a4 4 0 0 1-4 4H8l-5 3V6a4 4 0 0 1 4-4h10a4 4 0 0 1 4 4v9Z"/></svg>{{ __('Help Center') }}</a>
        </nav>

        <div class="border-t border-slate-100 p-2">
            <div class="px-3 py-2 text-[11px] uppercase tracking-wider text-slate-500 font-bold">{{ __('Categories') }}</div>
            @foreach($allCats as $cat)
                @php
                    $catThumb2 = null; $catFa2 = null;
                    if ($cat->image && file_exists(public_path('/images/category/' . $cat->image))) {
                        $catThumb2 = url('images/category/' . $cat->image);
                    } elseif ($cat->icon && preg_match('/\.(webp|png|jpe?g|svg)$/i', $cat->icon) && file_exists(public_path('/images/category/' . $cat->icon))) {
                        $catThumb2 = url('images/category/' . $cat->icon);
                    } elseif ($cat->icon && (str_starts_with($cat->icon, 'fa-') || str_contains($cat->icon, 'fa fa-'))) {
                        $catFa2 = trim($cat->icon);
                    }
                @endphp
                <a href="javascript:void(0)" onclick="changeCategory({{ $cat->id }}, 'main')" class="flex items-center gap-3 px-3 py-2.5 hover:bg-slate-50 rounded-lg text-[13px]">
                    @if($catThumb2)
                        <img src="{{ $catThumb2 }}" alt="" loading="lazy" class="w-5 h-5 rounded object-cover">
                    @elseif($catFa2)
                        <span class="w-5 h-5 bg-brand-50 text-brand-600 rounded grid place-items-center text-[10px]"><i class="fa {{ str_starts_with($catFa2, 'fa-') ? $catFa2 : str_replace('fa ', '', $catFa2) }}"></i></span>
                    @else
                        <div class="w-5 h-5 bg-brand-50 text-brand-600 rounded grid place-items-center font-bold text-[9px]">{{ strtoupper(substr($cat->title, 0, 1)) }}</div>
                    @endif
                    <span class="flex-1 truncate">{{ $cat->title }}</span>
                </a>
            @endforeach
        </div>

        @if(Auth::check())
            <div class="border-t border-slate-100 p-3">
                <button onclick="logout()" class="w-full flex items-center gap-2 px-3 py-2.5 bg-rose-50 hover:bg-rose-100 text-rose-600 rounded-lg text-[14px] font-semibold">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4M16 17l5-5-5-5M21 12H9"/></svg>{{ __('Logout') }}
                </button>
            </div>
        @endif
    </div>
</aside>

{{-- Hidden filter form --}}
<form action="{{ route('filtershop') }}" method="GET" id="fillterform" class="hidden">
    <input type="hidden" name="category" id="categoryId">
    <input type="hidden" name="start" value="0.00">
    <input type="hidden" name="end" value="0.00">
    <input type="hidden" name="sid" id="subId">
</form>