general products page and small rewrite of search and category controllers etc

resources/views/components/search-overlay.blade.php

@@ -0,0 +1,41 @@
+{{--
+    Full-width search bar that covers the header. A [popover] (top layer, so it
+    sits over the sticky header with no z-index juggling; Escape and click-away
+    close come for free). The header's search button opens it via popovertarget.
+    The `nav-search` controller measures the header on open (→ --search-overlay-h,
+    since the header isn't a fixed height below `lg`) and focuses the field.
+    Fade transition lives in app.css (#search-overlay).
+--}}
+<div
+    id="search-overlay"
+    popover
+    data-controller="nav-search"
+    class="fixed w-full inset-x-0 top-0 bottom-auto m-0 h-[var(--search-overlay-h)] border-0 bg-brand p-0"
+>
+    <form
+        method="get"
+        action="{{ route('search') }}"
+        class="flex h-full items-center gap-6 px-10"
+    >
+        <label for="search-overlay-input" class="sr-only">{{ __('storefront.shop.search_label') }}</label>
+        <input
+            id="search-overlay-input"
+            type="search"
+            name="q"
+            required
+            autocomplete="off"
+            data-nav-search-target="input"
+            placeholder="{{ __('storefront.search.placeholder') }}"
+            class="min-w-0 flex-1 appearance-none border-0 border-b border-black bg-transparent pb-2 placeholder:text-black/60 focus:outline-none [&::-webkit-search-cancel-button]:appearance-none"
+        >
+        <button
+            type="button"
+            popovertarget="search-overlay"
+            popovertargetaction="hide"
+            aria-label="{{ __('storefront.nav.close') }}"
+            class="shrink-0 text-black transition-opacity hover:opacity-70"
+        >
+            <x-ui.icon name="close" :size="44" />
+        </button>
+    </form>
+</div>