{{-- Модальное окно «Разделы» (мобильная навигация по корневым категориям) --}}
<div x-show="sectionsModalOpen" x-cloak
     class="fixed inset-0 z-50 flex items-end justify-center bg-black/40 sm:items-start sm:pt-16"
     @keydown.escape.window="sectionsModalOpen = false"
     style="display:none">
    <div class="card max-h-[80vh] w-full overflow-hidden rounded-b-none sm:max-w-2xl sm:rounded-2xl"
         @click.outside="sectionsModalOpen = false">
        <div class="flex items-center justify-between border-b border-gray-100 px-5 py-4">
            <h2 class="text-lg font-bold">Разделы</h2>
            <button type="button" @click="sectionsModalOpen = false" class="rounded-lg p-1.5 text-gray-400 hover:bg-gray-100">
                <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
                </svg>
            </button>
        </div>

        <div class="max-h-[64vh] overflow-y-auto p-4">
            <div class="grid grid-cols-2 gap-3 sm:grid-cols-3">
                @foreach ($navCategories as $category)
                    <x-category-tile :category="$category" />
                @endforeach
            </div>
        </div>
    </div>
</div>