category page filters components and general ui - no functionality yet

resources/css/app.css

@@ -1,5 +1,6 @@
 @import "tailwindcss";
 @import "./fonts.css";
+@import "./dropdown.css";
 @source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
 @source '../../storage/framework/views/*.php';
 @source '../**/*.blade.php';
@@ -20,7 +21,7 @@ @theme {
     --text-h1: 60px;
     --text-h2: 48px;
     --text-h3: 36px;
-    --text-h4: 27px;
+    --text-h4: 26px;
 }
 
 /* ═══════════════════════════════════════════════════════════════════

resources/css/dropdown.css

@@ -0,0 +1,40 @@
+
+    /* ── Dropdown (Popover API) ──────────────────────────────────── */
+    /* The panel is a [popover] → it renders in the top layer, so its
+       containing block is the viewport, not the .dropdown wrapper, and
+       CSS alone can't tie it to the trigger (anchor positioning isn't
+       everywhere yet). The `dropdown` Stimulus controller measures the
+       trigger on open and writes --dropdown-top/left/width here; the
+       open/close animation below stays pure CSS. Opens on a click, so
+       animating transform + opacity is CLS-safe. */
+    .dropdown-panel {
+        top: var(--dropdown-top, 0);
+        left: var(--dropdown-left, 0);
+        min-width: var(--dropdown-width, 0);
+
+        opacity: 0;
+        transform: translateY(-4px);
+        transition:
+            opacity 0.2s ease,
+            transform 0.2s ease,
+            display 0.2s allow-discrete,
+            overlay 0.2s allow-discrete;
+    }
+
+    .dropdown-panel:popover-open {
+        opacity: 1;
+        transform: translateY(-1px);
+    }
+
+    @starting-style {
+        .dropdown-panel:popover-open {
+            opacity: 0;
+            transform: translateY(-4px);
+        }
+    }
+
+    /* Caret flips while the panel is open — :has() is the only route
+       back up from the popover's :popover-open state to the caret. */
+    .dropdown:has(.dropdown-panel:popover-open) .dropdown-caret {
+        transform: rotate(180deg);
+    }