diff --git a/src/pages/ch/shop/index.astro b/src/pages/ch/shop/index.astro
index 91f5053..8eb3969 100644
--- a/src/pages/ch/shop/index.astro
+++ b/src/pages/ch/shop/index.astro
@@ -1,7 +1,7 @@
 ---
 import Layout from "../../../layouts/Layout.astro";
 import ProductCard from "../../../components/ProductCard.astro";
-import { categories } from "../../../data/categories";
+import { categories, subcategoryChipLabel } from "../../../data/categories";
 import { products } from "../../../data/products";
 import type { Locale } from "../../../i18n/config";
 import { useTranslations } from "../../../i18n/ui";
@@ -25,20 +25,30 @@ const t = useTranslations(lang);
       <aside class="filters card" aria-label={t.shop.filters}>
         <h3>{t.shop.filters}</h3>
         <div class="filter-group">
-          <label for="f-kategorie">{t.shop.categoryLabel}</label>
-          <select id="f-kategorie">
-            <option value="">{t.shop.allCategories}</option>
-            {categories.map((c) => (
-              c.subcategories && c.subcategories.length > 0 ? (
-                <optgroup label={c.name[lang]}>
-                  <option value={c.slug}>{c.name[lang]} ({t.shop.allCategories})</option>
-                  {c.subcategories.map((s) => <option value={`sub:${s.slug}`}>— {s.name[lang]}</option>)}
-                </optgroup>
-              ) : (
-                <option value={c.slug}>{c.name[lang]}</option>
-              )
-            ))}
-          </select>
+          <span id="f-kategorie-label">{t.shop.categoryLabel}</span>
+          <div class="cat-filter" id="cat-filter">
+            <input type="hidden" id="f-kategorie" value="" />
+            <button type="button" class="cat-filter-btn" id="cat-filter-btn" aria-haspopup="listbox" aria-expanded="false" aria-labelledby="f-kategorie-label">
+              <span id="cat-filter-current">{t.shop.allCategories}</span>
+              <span class="chevron" aria-hidden="true">▼</span>
+            </button>
+            <div class="cat-filter-menu" role="listbox" aria-labelledby="f-kategorie-label">
+              <button type="button" class="cat-filter-option" data-value="" data-label={t.shop.allCategories} role="option" aria-selected="true">{t.shop.allCategories}</button>
+              {categories.map((c) => (
+                c.subcategories && c.subcategories.length > 0 ? (
+                  <div class="cat-filter-group">
+                    <span class="cat-filter-group-label" aria-hidden="true">{c.icon} {c.name[lang]}</span>
+                    <button type="button" class="cat-filter-option" data-value={c.slug} data-label={`${c.icon} ${c.name[lang]}`} role="option" aria-selected="false">{t.shop.allCategories} – {c.name[lang]}</button>
+                    {c.subcategories.map((s) => (
+                      <button type="button" class="cat-filter-option cat-filter-sub" data-value={`sub:${s.slug}`} data-label={subcategoryChipLabel(s, lang)} role="option" aria-selected="false">{subcategoryChipLabel(s, lang)}</button>
+                    ))}
+                  </div>
+                ) : (
+                  <button type="button" class="cat-filter-option" data-value={c.slug} data-label={`${c.icon} ${c.name[lang]}`} role="option" aria-selected="false">{c.icon} {c.name[lang]}</button>
+                )
+              ))}
+            </div>
+          </div>
         </div>
         <div class="filter-group">
           <label for="f-preis">{t.shop.priceUpTo}</label>
@@ -134,11 +144,49 @@ const t = useTranslations(lang);
     sorted.forEach((el) => grid.appendChild(el));
   }
 
-  [kategorieSel, preisRange, verfuegbarChk, sortSel].forEach((el) => el.addEventListener("input", apply));
+  [preisRange, verfuegbarChk, sortSel].forEach((el) => el.addEventListener("input", apply));
+
+  const catFilter = document.getElementById("cat-filter");
+  const catFilterBtn = document.getElementById("cat-filter-btn");
+  const catFilterCurrent = document.getElementById("cat-filter-current");
+  const catFilterOptions = Array.from(catFilter.querySelectorAll(".cat-filter-option"));
+
+  function selectKategorie(value, label) {
+    kategorieSel.value = value;
+    catFilterCurrent.textContent = label;
+    catFilterOptions.forEach((opt) => opt.setAttribute("aria-selected", String(opt.dataset.value === value)));
+    apply();
+  }
+
+  catFilterBtn.addEventListener("click", (e) => {
+    e.stopPropagation();
+    const open = catFilter.classList.toggle("open");
+    catFilterBtn.setAttribute("aria-expanded", open ? "true" : "false");
+  });
+  catFilterOptions.forEach((opt) => {
+    opt.addEventListener("click", () => {
+      selectKategorie(opt.dataset.value, opt.dataset.label);
+      catFilter.classList.remove("open");
+      catFilterBtn.setAttribute("aria-expanded", "false");
+    });
+  });
+  document.addEventListener("click", () => {
+    catFilter.classList.remove("open");
+    catFilterBtn.setAttribute("aria-expanded", "false");
+  });
+  document.addEventListener("keydown", (e) => {
+    if (e.key === "Escape") {
+      catFilter.classList.remove("open");
+      catFilterBtn.setAttribute("aria-expanded", "false");
+    }
+  });
 
   const params = new URLSearchParams(location.search);
   const preset = params.get("kategorie");
-  if (preset) kategorieSel.value = preset;
+  if (preset) {
+    const match = catFilterOptions.find((opt) => opt.dataset.value === preset);
+    if (match) selectKategorie(preset, match.dataset.label);
+  }
 
   apply();
 </script>
diff --git a/src/pages/en/shop/index.astro b/src/pages/en/shop/index.astro
index 5715c47..c8a4db3 100644
--- a/src/pages/en/shop/index.astro
+++ b/src/pages/en/shop/index.astro
@@ -1,7 +1,7 @@
 ---
 import Layout from "../../../layouts/Layout.astro";
 import ProductCard from "../../../components/ProductCard.astro";
-import { categories } from "../../../data/categories";
+import { categories, subcategoryChipLabel } from "../../../data/categories";
 import { products } from "../../../data/products";
 import type { Locale } from "../../../i18n/config";
 import { useTranslations } from "../../../i18n/ui";
@@ -25,20 +25,30 @@ const t = useTranslations(lang);
       <aside class="filters card" aria-label={t.shop.filters}>
         <h3>{t.shop.filters}</h3>
         <div class="filter-group">
-          <label for="f-kategorie">{t.shop.categoryLabel}</label>
-          <select id="f-kategorie">
-            <option value="">{t.shop.allCategories}</option>
-            {categories.map((c) => (
-              c.subcategories && c.subcategories.length > 0 ? (
-                <optgroup label={c.name[lang]}>
-                  <option value={c.slug}>{c.name[lang]} ({t.shop.allCategories})</option>
-                  {c.subcategories.map((s) => <option value={`sub:${s.slug}`}>— {s.name[lang]}</option>)}
-                </optgroup>
-              ) : (
-                <option value={c.slug}>{c.name[lang]}</option>
-              )
-            ))}
-          </select>
+          <span id="f-kategorie-label">{t.shop.categoryLabel}</span>
+          <div class="cat-filter" id="cat-filter">
+            <input type="hidden" id="f-kategorie" value="" />
+            <button type="button" class="cat-filter-btn" id="cat-filter-btn" aria-haspopup="listbox" aria-expanded="false" aria-labelledby="f-kategorie-label">
+              <span id="cat-filter-current">{t.shop.allCategories}</span>
+              <span class="chevron" aria-hidden="true">▼</span>
+            </button>
+            <div class="cat-filter-menu" role="listbox" aria-labelledby="f-kategorie-label">
+              <button type="button" class="cat-filter-option" data-value="" data-label={t.shop.allCategories} role="option" aria-selected="true">{t.shop.allCategories}</button>
+              {categories.map((c) => (
+                c.subcategories && c.subcategories.length > 0 ? (
+                  <div class="cat-filter-group">
+                    <span class="cat-filter-group-label" aria-hidden="true">{c.icon} {c.name[lang]}</span>
+                    <button type="button" class="cat-filter-option" data-value={c.slug} data-label={`${c.icon} ${c.name[lang]}`} role="option" aria-selected="false">{t.shop.allCategories} – {c.name[lang]}</button>
+                    {c.subcategories.map((s) => (
+                      <button type="button" class="cat-filter-option cat-filter-sub" data-value={`sub:${s.slug}`} data-label={subcategoryChipLabel(s, lang)} role="option" aria-selected="false">{subcategoryChipLabel(s, lang)}</button>
+                    ))}
+                  </div>
+                ) : (
+                  <button type="button" class="cat-filter-option" data-value={c.slug} data-label={`${c.icon} ${c.name[lang]}`} role="option" aria-selected="false">{c.icon} {c.name[lang]}</button>
+                )
+              ))}
+            </div>
+          </div>
         </div>
         <div class="filter-group">
           <label for="f-preis">{t.shop.priceUpTo}</label>
@@ -134,11 +144,49 @@ const t = useTranslations(lang);
     sorted.forEach((el) => grid.appendChild(el));
   }
 
-  [kategorieSel, preisRange, verfuegbarChk, sortSel].forEach((el) => el.addEventListener("input", apply));
+  [preisRange, verfuegbarChk, sortSel].forEach((el) => el.addEventListener("input", apply));
+
+  const catFilter = document.getElementById("cat-filter");
+  const catFilterBtn = document.getElementById("cat-filter-btn");
+  const catFilterCurrent = document.getElementById("cat-filter-current");
+  const catFilterOptions = Array.from(catFilter.querySelectorAll(".cat-filter-option"));
+
+  function selectKategorie(value, label) {
+    kategorieSel.value = value;
+    catFilterCurrent.textContent = label;
+    catFilterOptions.forEach((opt) => opt.setAttribute("aria-selected", String(opt.dataset.value === value)));
+    apply();
+  }
+
+  catFilterBtn.addEventListener("click", (e) => {
+    e.stopPropagation();
+    const open = catFilter.classList.toggle("open");
+    catFilterBtn.setAttribute("aria-expanded", open ? "true" : "false");
+  });
+  catFilterOptions.forEach((opt) => {
+    opt.addEventListener("click", () => {
+      selectKategorie(opt.dataset.value, opt.dataset.label);
+      catFilter.classList.remove("open");
+      catFilterBtn.setAttribute("aria-expanded", "false");
+    });
+  });
+  document.addEventListener("click", () => {
+    catFilter.classList.remove("open");
+    catFilterBtn.setAttribute("aria-expanded", "false");
+  });
+  document.addEventListener("keydown", (e) => {
+    if (e.key === "Escape") {
+      catFilter.classList.remove("open");
+      catFilterBtn.setAttribute("aria-expanded", "false");
+    }
+  });
 
   const params = new URLSearchParams(location.search);
   const preset = params.get("kategorie");
-  if (preset) kategorieSel.value = preset;
+  if (preset) {
+    const match = catFilterOptions.find((opt) => opt.dataset.value === preset);
+    if (match) selectKategorie(preset, match.dataset.label);
+  }
 
   apply();
 </script>
diff --git a/src/pages/fr/shop/index.astro b/src/pages/fr/shop/index.astro
index 2b8595c..4be4536 100644
--- a/src/pages/fr/shop/index.astro
+++ b/src/pages/fr/shop/index.astro
@@ -1,7 +1,7 @@
 ---
 import Layout from "../../../layouts/Layout.astro";
 import ProductCard from "../../../components/ProductCard.astro";
-import { categories } from "../../../data/categories";
+import { categories, subcategoryChipLabel } from "../../../data/categories";
 import { products } from "../../../data/products";
 import type { Locale } from "../../../i18n/config";
 import { useTranslations } from "../../../i18n/ui";
@@ -25,20 +25,30 @@ const t = useTranslations(lang);
       <aside class="filters card" aria-label={t.shop.filters}>
         <h3>{t.shop.filters}</h3>
         <div class="filter-group">
-          <label for="f-kategorie">{t.shop.categoryLabel}</label>
-          <select id="f-kategorie">
-            <option value="">{t.shop.allCategories}</option>
-            {categories.map((c) => (
-              c.subcategories && c.subcategories.length > 0 ? (
-                <optgroup label={c.name[lang]}>
-                  <option value={c.slug}>{c.name[lang]} ({t.shop.allCategories})</option>
-                  {c.subcategories.map((s) => <option value={`sub:${s.slug}`}>— {s.name[lang]}</option>)}
-                </optgroup>
-              ) : (
-                <option value={c.slug}>{c.name[lang]}</option>
-              )
-            ))}
-          </select>
+          <span id="f-kategorie-label">{t.shop.categoryLabel}</span>
+          <div class="cat-filter" id="cat-filter">
+            <input type="hidden" id="f-kategorie" value="" />
+            <button type="button" class="cat-filter-btn" id="cat-filter-btn" aria-haspopup="listbox" aria-expanded="false" aria-labelledby="f-kategorie-label">
+              <span id="cat-filter-current">{t.shop.allCategories}</span>
+              <span class="chevron" aria-hidden="true">▼</span>
+            </button>
+            <div class="cat-filter-menu" role="listbox" aria-labelledby="f-kategorie-label">
+              <button type="button" class="cat-filter-option" data-value="" data-label={t.shop.allCategories} role="option" aria-selected="true">{t.shop.allCategories}</button>
+              {categories.map((c) => (
+                c.subcategories && c.subcategories.length > 0 ? (
+                  <div class="cat-filter-group">
+                    <span class="cat-filter-group-label" aria-hidden="true">{c.icon} {c.name[lang]}</span>
+                    <button type="button" class="cat-filter-option" data-value={c.slug} data-label={`${c.icon} ${c.name[lang]}`} role="option" aria-selected="false">{t.shop.allCategories} – {c.name[lang]}</button>
+                    {c.subcategories.map((s) => (
+                      <button type="button" class="cat-filter-option cat-filter-sub" data-value={`sub:${s.slug}`} data-label={subcategoryChipLabel(s, lang)} role="option" aria-selected="false">{subcategoryChipLabel(s, lang)}</button>
+                    ))}
+                  </div>
+                ) : (
+                  <button type="button" class="cat-filter-option" data-value={c.slug} data-label={`${c.icon} ${c.name[lang]}`} role="option" aria-selected="false">{c.icon} {c.name[lang]}</button>
+                )
+              ))}
+            </div>
+          </div>
         </div>
         <div class="filter-group">
           <label for="f-preis">{t.shop.priceUpTo}</label>
@@ -134,11 +144,49 @@ const t = useTranslations(lang);
     sorted.forEach((el) => grid.appendChild(el));
   }
 
-  [kategorieSel, preisRange, verfuegbarChk, sortSel].forEach((el) => el.addEventListener("input", apply));
+  [preisRange, verfuegbarChk, sortSel].forEach((el) => el.addEventListener("input", apply));
+
+  const catFilter = document.getElementById("cat-filter");
+  const catFilterBtn = document.getElementById("cat-filter-btn");
+  const catFilterCurrent = document.getElementById("cat-filter-current");
+  const catFilterOptions = Array.from(catFilter.querySelectorAll(".cat-filter-option"));
+
+  function selectKategorie(value, label) {
+    kategorieSel.value = value;
+    catFilterCurrent.textContent = label;
+    catFilterOptions.forEach((opt) => opt.setAttribute("aria-selected", String(opt.dataset.value === value)));
+    apply();
+  }
+
+  catFilterBtn.addEventListener("click", (e) => {
+    e.stopPropagation();
+    const open = catFilter.classList.toggle("open");
+    catFilterBtn.setAttribute("aria-expanded", open ? "true" : "false");
+  });
+  catFilterOptions.forEach((opt) => {
+    opt.addEventListener("click", () => {
+      selectKategorie(opt.dataset.value, opt.dataset.label);
+      catFilter.classList.remove("open");
+      catFilterBtn.setAttribute("aria-expanded", "false");
+    });
+  });
+  document.addEventListener("click", () => {
+    catFilter.classList.remove("open");
+    catFilterBtn.setAttribute("aria-expanded", "false");
+  });
+  document.addEventListener("keydown", (e) => {
+    if (e.key === "Escape") {
+      catFilter.classList.remove("open");
+      catFilterBtn.setAttribute("aria-expanded", "false");
+    }
+  });
 
   const params = new URLSearchParams(location.search);
   const preset = params.get("kategorie");
-  if (preset) kategorieSel.value = preset;
+  if (preset) {
+    const match = catFilterOptions.find((opt) => opt.dataset.value === preset);
+    if (match) selectKategorie(preset, match.dataset.label);
+  }
 
   apply();
 </script>
diff --git a/src/pages/shop/index.astro b/src/pages/shop/index.astro
index b60517a..5e4020a 100644
--- a/src/pages/shop/index.astro
+++ b/src/pages/shop/index.astro
@@ -1,7 +1,7 @@
 ---
 import Layout from "../../layouts/Layout.astro";
 import ProductCard from "../../components/ProductCard.astro";
-import { categories } from "../../data/categories";
+import { categories, subcategoryChipLabel } from "../../data/categories";
 import { products } from "../../data/products";
 import type { Locale } from "../../i18n/config";
 import { useTranslations } from "../../i18n/ui";
@@ -25,20 +25,35 @@ const t = useTranslations(lang);
       <aside class="filters card" aria-label={t.shop.filters}>
         <h3>{t.shop.filters}</h3>
         <div class="filter-group">
-          <label for="f-kategorie">{t.shop.categoryLabel}</label>
-          <select id="f-kategorie">
-            <option value="">{t.shop.allCategories}</option>
-            {categories.map((c) => (
-              c.subcategories && c.subcategories.length > 0 ? (
-                <optgroup label={c.name[lang]}>
-                  <option value={c.slug}>{c.name[lang]} ({t.shop.allCategories})</option>
-                  {c.subcategories.map((s) => <option value={`sub:${s.slug}`}>— {s.name[lang]}</option>)}
-                </optgroup>
-              ) : (
-                <option value={c.slug}>{c.name[lang]}</option>
-              )
-            ))}
-          </select>
+          <span id="f-kategorie-label">{t.shop.categoryLabel}</span>
+          {/* Eigens gestaltetes Dropdown statt eines nativen <select> — bei einem nativen Select
+              mit optgroups (wie vorher) waren die Tier-Unterkategorien (Kuh, Hase, Wal, ...)
+              zwar technisch da, aber in der schmucklosen Browser-eigenen Liste kaum zu erkennen.
+              Hier stehen sie als eigene, klar lesbare Zeilen mit demselben Namen wie auf den
+              Kategorie-Seiten ("Kuh „Frieda"" usw.), damit man sie auf einen Blick sieht. */}
+          <div class="cat-filter" id="cat-filter">
+            <input type="hidden" id="f-kategorie" value="" />
+            <button type="button" class="cat-filter-btn" id="cat-filter-btn" aria-haspopup="listbox" aria-expanded="false" aria-labelledby="f-kategorie-label">
+              <span id="cat-filter-current">{t.shop.allCategories}</span>
+              <span class="chevron" aria-hidden="true">▼</span>
+            </button>
+            <div class="cat-filter-menu" role="listbox" aria-labelledby="f-kategorie-label">
+              <button type="button" class="cat-filter-option" data-value="" data-label={t.shop.allCategories} role="option" aria-selected="true">{t.shop.allCategories}</button>
+              {categories.map((c) => (
+                c.subcategories && c.subcategories.length > 0 ? (
+                  <div class="cat-filter-group">
+                    <span class="cat-filter-group-label" aria-hidden="true">{c.icon} {c.name[lang]}</span>
+                    <button type="button" class="cat-filter-option" data-value={c.slug} data-label={`${c.icon} ${c.name[lang]}`} role="option" aria-selected="false">{t.shop.allCategories} – {c.name[lang]}</button>
+                    {c.subcategories.map((s) => (
+                      <button type="button" class="cat-filter-option cat-filter-sub" data-value={`sub:${s.slug}`} data-label={subcategoryChipLabel(s, lang)} role="option" aria-selected="false">{subcategoryChipLabel(s, lang)}</button>
+                    ))}
+                  </div>
+                ) : (
+                  <button type="button" class="cat-filter-option" data-value={c.slug} data-label={`${c.icon} ${c.name[lang]}`} role="option" aria-selected="false">{c.icon} {c.name[lang]}</button>
+                )
+              ))}
+            </div>
+          </div>
         </div>
         <div class="filter-group">
           <label for="f-preis">{t.shop.priceUpTo}</label>
@@ -134,11 +149,52 @@ const t = useTranslations(lang);
     sorted.forEach((el) => grid.appendChild(el));
   }
 
-  [kategorieSel, preisRange, verfuegbarChk, sortSel].forEach((el) => el.addEventListener("input", apply));
+  [preisRange, verfuegbarChk, sortSel].forEach((el) => el.addEventListener("input", apply));
+
+  // Eigenes Kategorie-Dropdown (statt nativem <select>): Klick auf den Button öffnet/schließt
+  // die Liste, Klick auf eine Zeile setzt den Filter, aktualisiert die Anzeige-Beschriftung und
+  // schließt die Liste wieder — gleiches Verhalten wie der Sprach-Umschalter im Header.
+  const catFilter = document.getElementById("cat-filter");
+  const catFilterBtn = document.getElementById("cat-filter-btn");
+  const catFilterCurrent = document.getElementById("cat-filter-current");
+  const catFilterOptions = Array.from(catFilter.querySelectorAll(".cat-filter-option"));
+
+  function selectKategorie(value, label) {
+    kategorieSel.value = value;
+    catFilterCurrent.textContent = label;
+    catFilterOptions.forEach((opt) => opt.setAttribute("aria-selected", String(opt.dataset.value === value)));
+    apply();
+  }
+
+  catFilterBtn.addEventListener("click", (e) => {
+    e.stopPropagation();
+    const open = catFilter.classList.toggle("open");
+    catFilterBtn.setAttribute("aria-expanded", open ? "true" : "false");
+  });
+  catFilterOptions.forEach((opt) => {
+    opt.addEventListener("click", () => {
+      selectKategorie(opt.dataset.value, opt.dataset.label);
+      catFilter.classList.remove("open");
+      catFilterBtn.setAttribute("aria-expanded", "false");
+    });
+  });
+  document.addEventListener("click", () => {
+    catFilter.classList.remove("open");
+    catFilterBtn.setAttribute("aria-expanded", "false");
+  });
+  document.addEventListener("keydown", (e) => {
+    if (e.key === "Escape") {
+      catFilter.classList.remove("open");
+      catFilterBtn.setAttribute("aria-expanded", "false");
+    }
+  });
 
   const params = new URLSearchParams(location.search);
   const preset = params.get("kategorie");
-  if (preset) kategorieSel.value = preset;
+  if (preset) {
+    const match = catFilterOptions.find((opt) => opt.dataset.value === preset);
+    if (match) selectKategorie(preset, match.dataset.label);
+  }
 
   apply();
 </script>
diff --git a/src/styles/global.css b/src/styles/global.css
index 7f5cffc..bc132a3 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -801,12 +801,87 @@ a:focus-visible, button:focus-visible {
 .shop-layout { display: grid; grid-template-columns: 240px 1fr; gap: 2rem; align-items: start; }
 .filters h3 { margin-bottom: 1rem; }
 .filter-group { margin-bottom: 1.2rem; }
-.filter-group label { display: block; font-size: 0.85rem; color: var(--c-text-muted); margin-bottom: 0.4rem; }
+.filter-group label, #f-kategorie-label { display: block; font-size: 0.85rem; color: var(--c-text-muted); margin-bottom: 0.4rem; }
 .filter-group select, .filter-group input[type="range"] { width: 100%; }
 .filters select, .shop-toolbar select {
   background: var(--c-anthracite); color: var(--c-text);
   border: 1px solid rgba(244,241,247,0.15); border-radius: var(--radius-s); padding: 0.5em 0.7em;
 }
+
+/* Kategorie-Filter im Shop: eigenes Dropdown statt nativem <select> mit optgroups. Grund: die
+   Tier-Unterkategorien (Kuh, Hase, Wal, ...) waren in der schmucklosen Browser-eigenen
+   Optgroup-Liste zwar technisch vorhanden, aber kaum als eigene, auswählbare Zeilen zu erkennen.
+   Hier bekommen sie denselben "Karte mit Verlaufsrand"-Look wie der Rest der Seite, klar
+   eingerückt unter ihrer Hauptkategorie, mit demselben Namen wie auf den Kategorie-Seiten. */
+.cat-filter { position: relative; width: 100%; }
+.cat-filter-btn {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.6em;
+  width: 100%;
+  background: var(--c-anthracite);
+  color: var(--c-text);
+  border: 1.5px solid transparent;
+  background:
+    linear-gradient(165deg, var(--c-anthracite-light), var(--c-anthracite)) padding-box,
+    linear-gradient(135deg, rgba(95, 211, 236, 0.5), rgba(155, 127, 214, 0.4) 45%, rgba(231, 135, 154, 0.32)) border-box;
+  border-radius: var(--radius-s);
+  padding: 0.55em 0.8em;
+  font-size: 0.95rem;
+  font-weight: 600;
+  cursor: pointer;
+  text-align: left;
+  transition: box-shadow 0.2s var(--ease);
+}
+.cat-filter-btn:hover { box-shadow: var(--shadow-card); }
+.cat-filter-btn .chevron { font-size: 0.65rem; opacity: 0.7; color: var(--c-accent); transition: transform 0.2s var(--ease); flex-shrink: 0; }
+.cat-filter.open .cat-filter-btn .chevron { transform: rotate(180deg); }
+.cat-filter-menu {
+  position: absolute;
+  top: calc(100% + 0.5rem);
+  left: 0;
+  right: 0;
+  max-height: min(60vh, 420px);
+  overflow-y: auto;
+  background: var(--c-anthracite-light);
+  border: 1px solid rgba(244, 241, 247, 0.12);
+  border-radius: var(--radius-m);
+  box-shadow: var(--shadow-card);
+  padding: 0.5rem;
+  display: none;
+  flex-direction: column;
+  gap: 0.1rem;
+  z-index: 60;
+}
+.cat-filter.open .cat-filter-menu { display: flex; }
+.cat-filter-group { display: flex; flex-direction: column; gap: 0.1rem; margin-top: 0.5rem; }
+.cat-filter-group:first-of-type { margin-top: 0.2rem; }
+.cat-filter-group-label {
+  padding: 0.3em 0.6em 0.1em;
+  font-size: 0.72rem;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--c-accent);
+  font-weight: 700;
+}
+.cat-filter-option {
+  display: block;
+  width: 100%;
+  text-align: left;
+  background: none;
+  border: none;
+  color: var(--c-text);
+  padding: 0.5em 0.6em;
+  border-radius: var(--radius-s);
+  font-size: 0.9rem;
+  cursor: pointer;
+  transition: background 0.15s var(--ease);
+}
+.cat-filter-option:hover { background: color-mix(in srgb, var(--c-accent) 14%, transparent); }
+.cat-filter-option[aria-selected="true"] { background: color-mix(in srgb, var(--c-accent) 20%, transparent); font-weight: 700; }
+.cat-filter-option.cat-filter-sub { padding-left: 1.4em; font-size: 0.88rem; opacity: 0.92; }
+.cat-filter-option.cat-filter-sub::before { content: "— "; opacity: 0.6; }
 .shop-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.2rem; }
 .legal-hint { margin-top: 2rem; }
 .breadcrumb { margin-bottom: 0.6rem; font-size: 0.95rem; }