/* ============================
   Shop / Marktplatz Layout
   (Archive, Kategorie, Händler)
============================ */

/* ---------- Compact site-main for shop (MCP archive pages) ---------- */
.site-main:has(.container--shop){
  padding-top: 20px;
}

/* ---------- Hero ---------- */
.shop-hero{
  text-align: left;
  padding: 0 0 20px;
}

.shop-hero .breadcrumbs{
  margin-bottom: 8px;
}

.shop-hero .breadcrumbs__list,
.product-hero .breadcrumbs__list{
  justify-content: flex-start;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.shop-hero .breadcrumbs__list::-webkit-scrollbar,
.product-hero .breadcrumbs__list::-webkit-scrollbar{
  display: none;
}

.shop-hero__title{
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.15;
  font-size: clamp(24px, 2.4vw, 32px);
}

.shop-hero__count{
  margin: 6px 0 0;
  font-weight: 400;
  color: var(--c-muted);
  font-size: 14px;
  letter-spacing: 0.02em;
}

.shop-hero__merchant-logo{
  margin: 0 0 12px;
}

.shop-hero__merchant-logo img{
  width: 64px;
  height: 64px;
  border-radius: 999px;
  border: 1px solid var(--border-softer);
  object-fit: contain;
  background: #fff;
}

.shop-hero__external{
  margin: 8px 0 0;
}

.shop-hero__external a{
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 14px 10px 0;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 12px;
  color: var(--c-muted);
}

.shop-hero__external a:hover{
  color: var(--c-text);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* ---------- Shop Layout (Sidebar + Main) ---------- */
.shop-layout{
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}

/* ---------- Category Sidebar ---------- */
.shop-sidebar{
  padding: 0;
}

.shop-sidebar__header{
  display: none;
}

.shop-cat-nav__title{
  margin: 0 0 10px;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 11px;
  font-weight: 600;
  color: var(--c-muted);
}

.shop-cat-nav__list{
  list-style: none;
  margin: 0;
  padding: 0;
}

.shop-cat-nav__item{
  margin: 0;
}

.shop-cat-nav__link{
  display: block;
  padding: 7px 0;
  text-decoration: none;
  font-size: 14px;
  line-height: 1.4;
  color: var(--c-text);
  transition: color 0.15s;
}

.shop-cat-nav__link:hover{
  text-decoration: underline;
  text-underline-offset: 4px;
}

.shop-cat-nav__link--active{
  font-weight: 700;
  padding-left: 10px;
  border-left: 2px solid var(--c-text);
  cursor: default;
}

.shop-cat-nav__link--ancestor{
  font-weight: 700;
  color: var(--c-text);
}

.shop-cat-nav__children{
  list-style: none;
  margin: 0;
  padding: 0 0 0 16px;
}

.shop-cat-nav__count{
  font-weight: 400;
  font-size: 12px;
  color: var(--c-muted);
  margin-left: 2px;
}

.shop-cat-nav__children .shop-cat-nav__link{
  font-size: 13px;
  color: var(--c-text);
}

.shop-cat-nav__children .shop-cat-nav__link:hover{
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* "Du bist hier" — Akzentlinie + fett, kein Hover, kein Click */
.shop-cat-nav__link--current{
  font-weight: 700;
  color: var(--c-text);
  padding-left: 10px;
  border-left: 2px solid var(--c-text);
  cursor: default;
  pointer-events: none;
}

/* ---------- Contextual sidebar: parent back-link ---------- */
.shop-cat-nav__parent-link{
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 0 12px;
  text-decoration: none;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-muted);
}

.shop-cat-nav__parent-link:hover{
  color: var(--c-text);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* ---------- Mobile subcategory swiper ---------- */
.shop-subcats{
  display: none; /* Desktop: hidden (sidebar takes over) */
}

/* ---------- Mobile Drawer Filter Form ---------- */
.shop-filters__form--drawer{
  display: none;
}


.shop-filters__select,
.shop-filters__input{
  display: block;
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--border-softer);
  border-radius: 8px;
  background: transparent;
  color: var(--c-text);
  font-family: inherit;
  font-size: 14px;
  line-height: 1.4;
  transition: border-color 0.15s;
  min-height: 44px;
}

.shop-filters__select:focus-visible,
.shop-filters__input:focus-visible{
  outline: 2px solid var(--c-text);
  outline-offset: 2px;
  border-color: var(--c-text);
}

.shop-filters__price-inputs{
  display: flex;
  align-items: center;
  gap: 8px;
}

.shop-filters__price-sep{
  color: var(--c-muted);
  flex-shrink: 0;
}

.shop-filters__sticky-footer{
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 12px;
}

.shop-filters__btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 22px;
  border: 1px solid var(--c-text);
  border-radius: 8px;
  background: var(--c-text);
  color: var(--c-bg);
  font-family: inherit;
  font-size: 13px;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: opacity 0.15s;
  width: 100%;
}

.shop-filters__btn:hover{
  opacity: 0.85;
}

.shop-filters__btn-count{
  opacity: 0.65;
  font-weight: 400;
}

.shop-filters__reset{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 0;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 11px;
  color: var(--c-muted);
}

.shop-filters__reset:hover{
  color: var(--c-text);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* ---------- Filter Bar (horizontal, above grid) ---------- */
.shop-filters-bar{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.shop-filters-bar__select{
  display: block;
  padding: 8px 30px 8px 14px;
  border: 1px solid var(--border-softer);
  border-radius: 8px;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%236f6356'/%3E%3C/svg%3E") no-repeat right 12px center;
  background-size: 10px 6px;
  appearance: none;
  -webkit-appearance: none;
  color: var(--c-text);
  font-family: inherit;
  font-size: 13px;
  line-height: 1.4;
  min-height: 38px;
  cursor: pointer;
  transition: border-color 0.15s;
}

.shop-filters-bar__select:focus-visible{
  outline: 2px solid var(--c-text);
  outline-offset: 2px;
  border-color: var(--c-text);
}

.shop-filters-bar__price{
  display: flex;
  align-items: center;
  gap: 4px;
}

.shop-filters-bar__input{
  width: 80px;
  padding: 8px 12px;
  border: 1px solid var(--border-softer);
  border-radius: 999px;
  background: transparent;
  color: var(--c-text);
  font-family: inherit;
  font-size: 13px;
  line-height: 1.4;
  min-height: 38px;
  transition: border-color 0.15s;
}

.shop-filters-bar__input:focus-visible{
  outline: 2px solid var(--c-text);
  outline-offset: 2px;
  border-color: var(--c-text);
}

.shop-filters-bar__sep{
  color: var(--c-muted);
  font-size: 13px;
}

.shop-filters-bar__btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 8px 20px;
  border: 1px solid var(--c-text);
  border-radius: 999px;
  background: var(--c-text);
  color: var(--c-bg);
  font-family: inherit;
  font-size: 13px;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: opacity 0.15s;
}

.shop-filters-bar__btn:hover{
  opacity: 0.85;
}

.shop-filters-bar__reset{
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 8px 14px;
  text-decoration: none;
  font-size: 13px;
  color: var(--c-muted);
}

.shop-filters-bar__reset:hover{
  color: var(--c-text);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* ---------- Sortierung ---------- */
.shop-filters-bar__sort{
  margin-left: auto;
}

/* ============================
   Filter Bar (Dropdown-basiert)
============================ */
.filter-bar{
  display: flex;
  align-items: flex-start;      /* Actions bleibt oben, auch wenn Pills mehrzeilig werden */
  flex-wrap: nowrap;             /* Actions darf NICHT unter Pills rutschen */
  gap: 16px;
  margin-bottom: 12px;
}

/* Pills-Container: interner Wrap, flex: 1 nimmt verbleibenden Platz neben Actions */
.filter-bar__pills{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;                  /* verhindert Flex-Overflow */
}

/* ---------- Filter Dropdown ---------- */
.filter-dropdown{
  position: relative;
}

.filter-dropdown__btn{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 38px;
  padding: 7px 14px;
  border: 1px solid var(--border-softer);
  border-radius: 8px;
  background: transparent;
  color: var(--c-text);
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  white-space: nowrap;
}

.filter-dropdown__btn:hover,
.filter-dropdown--active .filter-dropdown__btn{
  border-color: var(--c-text);
}

.filter-dropdown--active .filter-dropdown__btn{
  background: var(--c-text);
  color: var(--c-bg, #fff);
}

.filter-dropdown__btn[aria-expanded="true"]{
  border-color: var(--c-text);
}

.filter-dropdown__badge{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--c-muted);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
}

.filter-dropdown--active .filter-dropdown__badge{
  background: var(--c-bg, #fff);
  color: var(--c-text);
}

.filter-dropdown__chevron{
  flex-shrink: 0;
  transition: transform 0.2s;
}

.filter-dropdown__btn[aria-expanded="true"] .filter-dropdown__chevron{
  transform: rotate(180deg);
}

.filter-dropdown__panel{
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 200;
  min-width: 260px;
  max-width: 340px;
  background: #fff;
  border: 1px solid var(--border-softer);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
}

.filter-dropdown__panel[hidden]{
  display: none;
}

.filter-dropdown__body{
  padding: 14px 16px;
  max-height: 300px;
  overflow-y: auto;
}

.filter-dropdown__select{
  width: 100%;
}

.filter-dropdown__footer{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border-top: 1px solid var(--border-softer);
  gap: 8px;
}

.filter-dropdown__reset{
  background: none;
  border: none;
  padding: 8px 0;
  font-family: inherit;
  font-size: 12px;
  color: var(--c-muted);
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  transition: color 0.15s;
}

.filter-dropdown__reset:disabled{
  opacity: 0.4;
  cursor: default;
}

.filter-dropdown__reset:not(:disabled):hover{
  color: var(--c-text);
}

.filter-dropdown__save{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 7px 18px;
  border: 1px solid var(--c-text);
  border-radius: 8px;
  background: var(--c-text);
  color: var(--c-bg, #fff);
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: opacity 0.15s;
}

.filter-dropdown__save:hover{
  opacity: 0.85;
}

/* ---------- Sale Toggle ---------- */
.filter-sale-toggle{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 38px;
  padding: 7px 14px;
  border: 1px solid #c04a4a;
  border-radius: 8px;
  background: #fdf5f5;
  color: #c04a4a;
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
  white-space: nowrap;
}

.filter-sale-toggle:hover{
  background: #f9eaea;
  border-color: #a03838;
  color: #a03838;
}

.filter-sale-toggle.is-active{
  background: #c04a4a;
  color: #fefefe;
  border-color: #c04a4a;
}

.filter-sale-toggle.is-active:hover{
  background: #a03838;
  border-color: #a03838;
}

/* ---------- Filter Bar Toggle ("Mehr/Weniger Filter") ---------- */
.filter-bar__toggle{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 38px;
  padding: 7px 14px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--c-text);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
  white-space: nowrap;
}

/* Grid-Stack: beide Labels liegen auf derselben Grid-Cell — der breitere bestimmt die Breite.
   CLS-safe für jede Locale/Label-Länge (statt fragile min-width). */
.filter-bar__toggle-labels{
  display: inline-grid;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.filter-bar__toggle-labels > .filter-bar__toggle-label{
  grid-column: 1;
  grid-row: 1;
}

.filter-bar__toggle:hover{
  color: var(--c-text);
  background: var(--c-sand, #f5f0e8);
}

.filter-bar__toggle:hover .filter-bar__toggle-labels{
  text-decoration: none;
}

.filter-bar__toggle:focus-visible{
  outline: 2px solid var(--c-text);
  outline-offset: 2px;
}

.filter-bar__toggle:focus-visible .filter-bar__toggle-labels{
  text-decoration: none;
}

/* Label-Toggle via visibility: der "falsche" Label nimmt weiterhin Platz ein (CLS-safe),
   ist aber visuell unsichtbar und aus dem Accessibility-Tree ausgeblendet. */
.filter-bar__toggle-label--less{
  visibility: hidden;
}

.filter-bar.is-expanded .filter-bar__toggle-label--more{
  visibility: hidden;
}

.filter-bar.is-expanded .filter-bar__toggle-label--less{
  visibility: visible;
}

.filter-bar__toggle-chevron{
  flex-shrink: 0;
  transition: transform 0.2s;
}

.filter-bar.is-expanded .filter-bar__toggle-chevron{
  transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce){
  .filter-bar__toggle-chevron{ transition: none; }
}

/* Sichtbarkeits-Regeln — collapsed: sekundäre Filter ausblenden */
.filter-bar:not(.is-expanded) [data-filter-priority="secondary"]{
  display: none;
}

/* Toggle-Variante "nur Tablet": kein Desktop-Ghost-Toggle wenn nichts zum Ausklappen da ist.
   Existiert nur wenn total > 5 UND keine Secondaries — dann bringt der Toggle nur im Tablet-Range Nutzen. */
.filter-bar__toggle--tablet-only{
  display: none;
}
@media (min-width: 981px) and (max-width: 1200px){
  .filter-bar__toggle--tablet-only{
    display: inline-flex;
  }
}

/* Tablet (981–1200px): zusätzlich primäre Slots 6–8 im collapsed-State ausblenden */
@media (min-width: 981px) and (max-width: 1200px){
  .filter-bar:not(.is-expanded) [data-filter-slot="6"],
  .filter-bar:not(.is-expanded) [data-filter-slot="7"],
  .filter-bar:not(.is-expanded) [data-filter-slot="8"]{
    display: none;
  }
}

/* Aktive Filter bleiben im collapsed-State IMMER sichtbar — überschreibt Secondary- und Tablet-Slot-Hiding.
   Höhere Spezifität (zwei Klassen) überschreibt die Regeln oben ohne !important. */
.filter-bar:not(.is-expanded) .filter-dropdown.filter-dropdown--active,
.filter-bar:not(.is-expanded) .filter-sale-toggle.is-active{
  display: inline-flex;
}

/* ---------- Filter Bar Actions (right side, immer oben) ---------- */
.filter-bar__actions{
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;                /* schrumpft nicht, wenn Pills viel Platz brauchen */
  align-self: flex-start;        /* bleibt oben, auch wenn Pills mehrzeilig sind */
}

.filter-bar__clear{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 38px;
  padding: 7px 12px;
  text-decoration: none;
  font-size: 12px;
  color: var(--c-muted);
  border: 1px solid var(--border-softer);
  border-radius: 8px;
  transition: border-color 0.15s, color 0.15s;
  white-space: nowrap;
}

.filter-bar__clear:hover{
  border-color: var(--c-text);
  color: var(--c-text);
}

/* ---------- Active Filter Chips (below filter bar) ---------- */
.filter-chips-active{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
}

.filter-chips-active > li{
  display: contents; /* makes <li> invisible in flex layout */
}

.filter-chip-active{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px 5px 12px;
  border: 1px solid var(--border-softer);
  border-radius: 8px;
  background: var(--c-paper, #f8f5f0);
  font-size: 12px;
  color: var(--c-text);
  text-decoration: none;
  transition: border-color 0.15s;
  white-space: nowrap;
}

.filter-chip-active:hover{
  border-color: var(--c-text);
}

.filter-chip-active__swatch{
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  border: none;
  outline: none;
  box-shadow: none;
}

.filter-chip-active__swatch--light,
.filter-chip-active__swatch--multi{
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.18);
}

.filter-chip-active__swatch--multi{
  background: linear-gradient(135deg,
    #dc2626 0% 25%,
    #2563eb 25% 50%,
    #16a34a 50% 75%,
    #fbbf24 75% 100%
  ) !important;
}

/* ---------- Vendor Radio List (Händler dropdown) ---------- */
.filter-vendor-list{
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.filter-vendor-item{
  position: relative; /* anchors hidden checkbox to prevent page scroll on focus */
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 6px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  color: var(--c-text);
  transition: background 0.12s;
  user-select: none;
}

.filter-vendor-item:hover{
  background: var(--c-paper, #f8f5f0);
}

.filter-vendor-item input[type="checkbox"]{
  position: absolute;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  width: 1px;
  height: 1px;
  overflow: hidden;
  white-space: nowrap;
}

/* Custom checkbox indicator */
.filter-vendor-item__check{
  flex-shrink: 0;
  position: relative;
  width: 16px;
  height: 16px;
  border-radius: 4px;
  border: 1.5px solid var(--border-softer);
  transition: border-color 0.15s, background 0.15s;
}

.filter-vendor-item:hover .filter-vendor-item__check{
  border-color: var(--c-text);
}

.filter-vendor-item input:checked + .filter-vendor-item__check{
  border-color: var(--c-text);
  background: var(--c-text);
}

/* Checkmark via ::after */
.filter-vendor-item input:checked + .filter-vendor-item__check::after{
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 9px;
  border: 2px solid #fff;
  border-top: none;
  border-left: none;
  transform: translate(-50%, -62%) rotate(45deg);
}

.filter-vendor-item input:focus-visible + .filter-vendor-item__check{
  outline: 2px solid var(--c-text);
  outline-offset: 2px;
}

.filter-vendor-item__name{
  flex: 1;
  line-height: 1.4;
}

.filter-vendor-item__count{
  font-size: 11px;
  color: var(--c-muted);
  min-width: 20px;
  text-align: right;
}

/* ---------- Generic Filter List (alias for vendor styles) ---------- */
.filter-generic-list{display:flex;flex-direction:column;gap:2px;}
.filter-generic-item{position:relative;display:flex;align-items:center;gap:10px;padding:8px 6px;border-radius:8px;cursor:pointer;font-size:14px;color:var(--c-text);transition:background 0.12s;user-select:none;}
.filter-generic-item:hover{background:var(--c-paper,#f8f5f0);}
.filter-generic-item input[type="checkbox"]{position:absolute;clip:rect(0 0 0 0);clip-path:inset(50%);width:1px;height:1px;overflow:hidden;white-space:nowrap;}
.filter-generic-item__check{flex-shrink:0;position:relative;width:16px;height:16px;border-radius:4px;border:1.5px solid var(--border-softer);transition:border-color 0.15s,background 0.15s;}
.filter-generic-item:hover .filter-generic-item__check{border-color:var(--c-text);}
.filter-generic-item input:checked + .filter-generic-item__check{border-color:var(--c-text);background:var(--c-text);}
.filter-generic-item input:checked + .filter-generic-item__check::after{content:'';position:absolute;top:50%;left:50%;width:5px;height:9px;border:2px solid #fff;border-top:none;border-left:none;transform:translate(-50%,-62%) rotate(45deg);}
.filter-generic-item input:focus-visible + .filter-generic-item__check{outline:2px solid var(--c-text);outline-offset:2px;}
.filter-generic-item__name{flex:1;line-height:1.4;}
.filter-generic-item__count{font-size:11px;color:var(--c-muted);min-width:20px;text-align:right;}

/* ---------- Mobile Sortierung (Radio-Liste) ---------- */
.filter-sort-item{position:relative;display:flex;align-items:center;gap:10px;padding:8px 6px;border-radius:8px;cursor:pointer;font-size:14px;color:var(--c-text);transition:background 0.12s;user-select:none;}
.filter-sort-item:hover{background:var(--c-paper,#f8f5f0);}
.filter-sort-item input[type="radio"]{position:absolute;clip:rect(0 0 0 0);clip-path:inset(50%);width:1px;height:1px;overflow:hidden;white-space:nowrap;}
.filter-sort-item__check{flex-shrink:0;width:18px;height:18px;border-radius:50%;border:1.5px solid var(--border-softer);transition:border-color 0.15s;}
.filter-sort-item:hover .filter-sort-item__check{border-color:var(--c-text);}
.filter-sort-item input:checked + .filter-sort-item__check{border:5px solid var(--c-text);}
.filter-sort-item input:focus-visible + .filter-sort-item__check{outline:2px solid var(--c-text);outline-offset:2px;}
.filter-sort-item__name{flex:1;line-height:1.4;}

/* ---------- Filter-Suchfeld (generische Filter) ---------- */
.filter-search {
  padding: 0 0 8px;
}
.filter-search__input {
  width: 100%;
  box-sizing: border-box;
  padding: 7px 10px 7px 32px;
  border: 1.5px solid var(--border-softer);
  border-radius: 8px;
  font-size: 13px;
  background: var(--c-bg, #fff) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E") 9px center / 14px no-repeat;
  outline: none;
  transition: border-color 0.15s;
}
.filter-search__input:focus-visible {
  border-color: var(--c-text);
}

/* ---------- Color List (Farb-Filter mit Swatches) ---------- */
.filter-color-list{
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.filter-color-item{
  position: relative; /* anchors hidden checkbox so browser doesn't scroll the page on focus */
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 6px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  color: var(--c-text);
  transition: background 0.12s;
  user-select: none;
}

.filter-color-item:hover{
  background: var(--c-paper, #f8f5f0);
}

.filter-color-item input[type="checkbox"]{
  position: absolute;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  width: 1px;
  height: 1px;
  overflow: hidden;
  white-space: nowrap;
}

/* Color swatch — inset shadow only on light/multi, none on dark colors */
.filter-color-item__swatch{
  flex-shrink: 0;
  position: relative;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  border: none;
  outline: none;
  box-shadow: none;
  transition: box-shadow 0.12s;
}

.filter-color-item__swatch--light{
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.18);
}

.filter-color-item__swatch--multi{
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.12);
}

/* Dark swatches: no ring when selected — the checkmark alone signals selection */
/* Light/multi swatches: ring + inset border for visibility against white background */
.filter-color-item input:checked + .filter-color-item__swatch--light{
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.18), 0 0 0 2px var(--c-text);
}
.filter-color-item input:checked + .filter-color-item__swatch--multi{
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.12), 0 0 0 2px var(--c-text);
}

/* Checkmark overlay — white for dark colors (default) */
.filter-color-item input:checked + .filter-color-item__swatch::after{
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 9px;
  border: 2px solid #fff;
  border-top: none;
  border-left: none;
  transform: translate(-50%, -62%) rotate(45deg);
  filter: drop-shadow(0 0 1px rgba(0,0,0,.5));
}

/* Dark checkmark for light color swatches (Weiß, Creme, Beige, etc.) */
.filter-color-item input:checked + .filter-color-item__swatch--light::after{
  border-color: var(--c-text);
}

/* Keyboard focus */
.filter-color-item input:focus-visible + .filter-color-item__swatch{
  box-shadow: 0 0 0 2px var(--c-text);
}

/* Multicolor swatch — diagonal 4-color gradient */
.filter-color-item__swatch--multi{
  background: linear-gradient(135deg,
    #dc2626 0% 25%,
    #2563eb 25% 50%,
    #16a34a 50% 75%,
    #fbbf24 75% 100%
  ) !important;
}

.filter-color-item__name{
  flex: 1;
  line-height: 1.4;
}

.filter-color-item input:checked ~ .filter-color-item__name{
  font-weight: 600;
}

.filter-color-item__count{
  font-size: 11px;
  color: var(--c-muted);
  min-width: 20px;
  text-align: right;
}

/* ---------- Filter Chips (color/size in dropdown) ---------- */
.filter-chips{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.filter-chip{
  position: relative; /* anchors hidden checkbox to prevent page scroll on focus */
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

.filter-chip input[type="checkbox"]{
  position: absolute;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  width: 1px;
  height: 1px;
  overflow: hidden;
  white-space: nowrap;
}

/* Visible focus ring when keyboard user tabs to a chip */
.filter-chip input:focus-visible + span{
  outline: 2px solid var(--c-text);
  outline-offset: 2px;
}

.filter-chip span{
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 5px 12px;
  border: 1px solid var(--border-softer);
  border-radius: 8px;
  font-size: 13px;
  color: var(--c-text);
  background: transparent;
  transition: background 0.15s, border-color 0.15s;
  user-select: none;
}

.filter-chip input:checked + span{
  background: var(--c-text);
  color: var(--c-bg, #fff);
  border-color: var(--c-text);
}

.filter-chip:hover span{
  border-color: var(--c-text);
}

.filter-chip__count{
  font-size: 11px;
  opacity: 0.7;
}

.filter-chip--sale span{
  padding: 8px 16px;
}

/* ---------- Mobile Drawer — Section Badge ---------- */
.shop-filter-section-badge{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--c-text);
  color: var(--c-bg, #fff);
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  /* Reset inherited summary styles that break centering */
  letter-spacing: 0;
  text-transform: none;
}

/* display: inline-flex would override the HTML `hidden` attribute — must be explicit */
.shop-filter-section-badge[hidden]{
  display: none;
}


/* Mobile toggle badge */
.shop-filter-toggle__badge{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--c-text);
  color: var(--c-bg, #fff);
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
}

/* ============================
   Range Slider (Dual Handle)
============================ */
.range-slider{
  padding: 4px 0 8px;
}

/* Price inputs (ab / bis) */
.range-slider__inputs{
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
}
.rs-field{
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  cursor: default;
}
.rs-field__label{
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--c-muted);
  padding-left: 2px;
}
.rs-field__wrap{
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--c-paper, #f8f5f0);
  border: 1px solid var(--border-softer, #e0d8cf);
  border-radius: 8px;
  padding: 8px 12px;
  transition: border-color .15s;
}
.rs-field__wrap:focus-within{
  border-color: var(--c-text);
}
.range-slider__text-min,
.range-slider__text-max{
  flex: 1;
  min-width: 0;
  width: 100%;
  border: none;
  background: transparent;
  font-size: 15px;
  font-weight: 400;
  color: var(--c-text);
  padding: 0;
  -moz-appearance: textfield;
  appearance: textfield;
}
.range-slider__text-min::-webkit-outer-spin-button,
.range-slider__text-min::-webkit-inner-spin-button,
.range-slider__text-max::-webkit-outer-spin-button,
.range-slider__text-max::-webkit-inner-spin-button{
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}
.range-slider__text-min:focus,
.range-slider__text-max:focus{
  outline: none;
}
.rs-field__unit{
  font-size: 14px;
  color: var(--c-muted);
  flex-shrink: 0;
}
.rs-separator{
  font-size: 16px;
  color: var(--c-muted);
  padding-top: 20px; /* align with input (below label) */
  flex-shrink: 0;
}

/* Track wrapper — gives inputs a proper 28px touch area */
.range-slider__trackwrap{
  position: relative;
  height: 28px;
  margin: 8px 0;
}

/* Track — visually 4px, centred in the wrapper */
.range-slider__track{
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  height: 4px;
  background: var(--border-softer, #e0d8cf);
  border-radius: 2px;
}

.range-slider__fill{
  position: absolute;
  height: 100%;
  background: var(--c-text);
  border-radius: 2px;
  pointer-events: none;
}

/* Range inputs — span full wrapper height for correct touch target */
.range-slider__input{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  pointer-events: none;
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.range-slider__input::-webkit-slider-runnable-track{
  background: transparent;
  height: 4px;
}
.range-slider__input::-moz-range-track{
  background: transparent;
  height: 4px;
  border: none;
}

.range-slider__input::-webkit-slider-thumb{
  pointer-events: all;
  width: 22px;
  height: 22px;
  margin-top: -9px; /* center 22px thumb on 4px track: -(22-4)/2 */
  border-radius: 50%;
  background: var(--c-text);
  border: 3px solid #fff;
  box-shadow: 0 1px 5px rgba(0,0,0,.30);
  cursor: grab;
  -webkit-appearance: none;
  appearance: none;
}

.range-slider__input::-moz-range-thumb{
  pointer-events: all;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--c-text);
  border: 3px solid #fff;
  box-shadow: 0 1px 5px rgba(0,0,0,.30);
  cursor: grab;
}

.range-slider__input:focus-visible::-webkit-slider-thumb{
  outline: 2px solid var(--c-text);
  outline-offset: 3px;
}

.range-slider__input:active::-webkit-slider-thumb{
  cursor: grabbing;
}

/* Drawer filter chips */
.filter-chips--drawer{
  flex-direction: column;
  gap: 4px;
}

.filter-chips--drawer .filter-chip{
  width: 100%;
}

.filter-chips--drawer .filter-chip span{
  width: 100%;
  border-radius: 8px;
}

/* ---------- Size Tiles (grouped grid layout) ---------- */

/* Wider panel for the size dropdown so tile grid has enough room */
.filter-dropdown__panel--sizes{
  min-width: 320px;
}

.size-group__label{
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--c-muted);
  margin: 12px 0 6px;
}

.size-group__label:first-child{
  margin-top: 0;
}

.size-tiles{
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.size-tile{
  position: relative; /* anchors hidden checkbox */
  cursor: pointer;
}

.size-tile input[type="checkbox"]{
  position: absolute;
  clip-path: inset(50%);
  width: 1px;
  height: 1px;
  overflow: hidden;
  white-space: nowrap;
}

.size-tile span{
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 36px;
  padding: 0 8px;
  background: var(--c-paper, #f8f5f0);
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  color: var(--c-text);
  transition: background 0.12s, color 0.12s;
  user-select: none;
  white-space: nowrap;
}

.size-tile:hover span{
  background: color-mix(in srgb, var(--c-text) 8%, transparent);
}

/* Selected state */
.size-tile input:checked + span{
  background: var(--c-text);
  color: var(--c-bg, #fff);
}

/* Keyboard focus */
.size-tile input:focus-visible + span{
  outline: 2px solid var(--c-text);
  outline-offset: 2px;
}

/* ---------- Main Toolbar (mobile filter toggle only) ---------- */
.shop-main__toolbar{
  display: none;
}

/* Filter toggle button — hidden on desktop, shown on mobile */
.shop-filter-toggle{
  display: none;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 8px 16px;
  border: 1px solid var(--border-softer);
  border-radius: 8px;
  background: transparent;
  color: var(--c-text);
  font-family: inherit;
  font-size: 13px;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: border-color 0.15s;
}

.shop-filter-toggle:hover{
  border-color: var(--c-text);
}

/* Filter overlay — hidden on desktop */
.shop-filter-overlay{
  display: none;
}

/* ---------- Product Grid ---------- */
.product-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2.6vw, 40px);
}

/* 4 columns in the shop archive */
.container--shop .product-grid{
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

/* ---------- Product Card ---------- */
.product-card{
  text-align: left;
}

.product-card__media{
  display: block;
  overflow: hidden;
  background: #f5f5f5;
  border: 1px solid var(--border-softer);
  border-radius: 8px;
  aspect-ratio: 4 / 5;
}

.product-card__media img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  color: transparent;
}

.product-card__placeholder{
  width: 100%;
  height: 100%;
  background: var(--c-paper);
}

.product-card__media img.product-card__variant-img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-card__merchant{
  margin: 10px 0 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--c-text);
}

.product-card__merchant a{
  text-decoration: none;
  color: inherit;
}

.product-card__merchant a:hover{
  text-decoration: underline;
  text-underline-offset: 4px;
}

.product-card__title{
  margin: 4px 0 0;
  font-family: inherit;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.35;
  font-size: 14px;
  color: var(--c-muted);
}

.product-card__title a{
  text-decoration: none;
  color: inherit;
}

.product-card__title a:hover{
  text-decoration: underline;
  text-underline-offset: 4px;
}

.product-card__price{
  margin: 6px 0 0;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* WooCommerce price markup */
.product-card__price del{
  color: var(--c-muted);
  font-weight: 400;
  font-size: 12px;
}

.product-card__price ins{
  text-decoration: none;
}

/* Sternchen am Preis — Verweis auf PAngV/UWG-Disclaimer im Footer.
   Industrie-Standard (Amazon / Zalando-Pattern). Generisch (em-basiert),
   wird in allen Preis-Kontexten genutzt: Cards, PDP-Hero, Autocomplete.
   Default ist auf Card-/Autocomplete-Größen abgestimmt (gut lesbar); der
   PDP-Hero-Preis ist viel größer und überschreibt auf 0.55em (siehe shop-single.css). */
.price-asterisk{
  font-size: 0.85em;
  vertical-align: super;
  margin-left: 2px;
  font-weight: 400;
  color: var(--c-muted);
  line-height: 1;
}


/* ---------- Bottom Description ---------- */
.shop-bottom-desc{
  margin-top: clamp(32px, 4vw, 48px);
  padding-top: clamp(24px, 3vw, 32px);
  border-top: 1px solid var(--border-softer);
  max-width: 720px;
  color: var(--c-muted);
  font-size: 14px;
  line-height: 1.65;
}

.shop-bottom-desc p:last-child{
  margin-bottom: 0;
}

/* ---------- No Results ---------- */
.shop-no-results{
  text-align: center;
  padding: clamp(32px, 5vw, 56px) 0;
}

.shop-no-results__text{
  font-size: 17px;
  line-height: 1.6;
  margin: 0 0 12px;
}

.shop-no-results__hint{
  margin: 0;
}

.shop-no-results__hint a{
  color: var(--c-muted);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 12px;
}

/* ============================
   Responsive
============================ */

/* Scroll lock when filter drawer is open */
body.filter-open{ overflow: hidden; }

/* ≤1200px: 3 columns in shop archive */
@media (max-width: 1200px){
  .container--shop .product-grid{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Tablet / Mobile (≤980px): sidebar becomes drawer */
@media (max-width: 980px){
  .shop-layout{
    display: block;
  }

  /* --- Category sidebar hidden on mobile --- */
  .shop-cat-nav{
    display: none;
  }

  /* --- Mobile subcategory swiper --- */
  .shop-subcats{
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 0 0 16px;
    margin: 8px 0 0;
  }

  .shop-subcats::-webkit-scrollbar{
    display: none;
  }

  .shop-subcats__chip{
    flex-shrink: 0;
    padding: 7px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    text-decoration: none;
    border: 1.5px solid var(--border-soft);
    color: var(--c-text);
    transition: background .12s, border-color .12s;
  }

  .shop-subcats__chip:hover{
    background: var(--c-paper);
  }

  .shop-subcats__chip--active{
    background: var(--c-text);
    color: #fff;
    border-color: var(--c-text);
  }

  .shop-subcats__count{
    font-weight: 400;
    opacity: 0.65;
  }

  .shop-subcats__chip--back{
    color: var(--c-muted);
    border-color: var(--border-soft);
  }

  /* --- Filter bars hidden on mobile (use drawer instead) --- */
  .shop-filters-bar,
  .filter-bar{
    display: none;
  }

  .filter-chips-active{
    display: none;
  }

  /* --- Drawer --- */
  .shop-sidebar{
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: var(--c-bg, #fff);
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
  }

  .shop-sidebar.is-open{
    transform: translateX(0);
  }

  .shop-sidebar__header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    padding: 20px 20px 16px;
    border-bottom: 1px solid var(--border-softer);
  }

  /* --- Drawer filter form shown on mobile --- */
  .shop-filters__form--drawer{
    flex: 1;
    position: relative;
    overflow: hidden;
    min-height: 0;
    display: block;
  }

  /* Ebene 1: scrollable nav list */
  .shop-filter-nav{
    height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
  }

  .shop-filter-nav__list{
    flex: 1;
  }

  /* Nav row */
  .shop-filter-nav-item{
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 56px;
    padding: 10px 0;
    background: none;
    border: none;
    border-bottom: 1px solid var(--border-softer);
    cursor: pointer;
    font-family: inherit;
    color: var(--c-text);
    text-align: left;
    gap: 12px;
  }

  .shop-filter-nav-item:focus-visible{
    outline: 2px solid var(--c-text);
    outline-offset: -2px;
  }

  .shop-filter-nav-item__content{
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
  }

  /* Primary label — the filter category name */
  .shop-filter-nav-item__label{
    font-size: 14px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    line-height: 1.3;
    color: var(--c-text);
  }

  /* Secondary line — active filter values */
  .shop-filter-nav-item__summary{
    font-size: 12px;
    font-weight: 400;
    color: var(--c-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .shop-filter-nav-item__end{
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    color: var(--c-muted);
  }

  /* Secondary Nav-Items im collapsed-State verstecken */
  .shop-filter-nav__list:not(.is-expanded) .shop-filter-nav-item[data-filter-priority="secondary"]{
    display: none;
  }

  /* Aktive Sekundär-Filter bleiben trotzdem sichtbar (Override, höhere Spezifität) */
  .shop-filter-nav__list:not(.is-expanded) .shop-filter-nav-item.shop-filter-nav-item--active[data-filter-priority="secondary"]{
    display: flex;
  }

  /* "Mehr/Weniger Filter" Toggle im Mobile-Drawer — passt visuell zum Nav-Item, aber untersichtbar dezent */
  .shop-filter-nav__toggle{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 56px;
    padding: 10px 0;
    background: none;
    border: none;
    border-bottom: 1px solid var(--border-softer);
    cursor: pointer;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    color: var(--c-text);
    text-align: left;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
  }

  .shop-filter-nav__toggle:focus-visible{
    outline: 2px solid var(--c-text);
    outline-offset: -2px;
    text-decoration: none;
  }

  /* Label-Toggle via visibility (CLS-safe: breitere Label bestimmt Breite) */
  .shop-filter-nav__toggle-label{
    display: inline-block;
  }

  .shop-filter-nav__toggle-label--less,
  .shop-filter-nav__list.is-expanded .shop-filter-nav__toggle-label--more{
    display: none;
  }

  .shop-filter-nav__list.is-expanded .shop-filter-nav__toggle-label--less{
    display: inline-block;
  }

  .shop-filter-nav__toggle-chevron{
    flex-shrink: 0;
    color: var(--c-muted);
    transition: transform 0.2s;
  }

  .shop-filter-nav__list.is-expanded .shop-filter-nav__toggle-chevron{
    transform: rotate(180deg);
  }

  @media (prefers-reduced-motion: reduce){
    .shop-filter-nav__toggle-chevron{ transition: none; }
  }

  /* Sticky Footer: bleibt beim Scrollen im Drawer immer sichtbar.
     z-index: 1 genügt — Sub-Panels nutzen z-index: 2 und überlagern den Footer korrekt,
     wenn ein Panel offen ist (dort ist ein eigener Footer mit Anwenden-Button).
     Keyboard-Zugriff auf den überdeckten Footer wird via `inert` in filters.js unterbunden.
     margin-inline: -20px zieht den Footer durch den 20px-Padding des Parents auf volle Breite. */
  .shop-filters__sticky-footer{
    position: sticky;
    bottom: 0;
    z-index: 1;
    margin: auto -20px 0;
    padding: 12px 20px calc(16px + env(safe-area-inset-bottom, 0px));
    background: var(--c-bg, #fff);
    border-top: 1px solid var(--border-softer);
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  /* Ebene 2: Sub-panel slides in from right */
  /* Sub-panels: hidden via display:none (no overflow-clipping or z-index fights) */
  .shop-filter-subpanel{
    display: none;
    position: absolute;
    inset: 0;
    z-index: 2;
    background: var(--c-bg, #fff);
    flex-direction: column;
  }

  .shop-filter-subpanel.is-open{
    display: flex;
    animation: sfp-slide-in 0.25s ease both;
  }

  @keyframes sfp-slide-in{
    from{ transform: translateX(100%); }
    to{   transform: translateX(0);    }
  }

  .shop-filter-subpanel__header{
    display: flex;
    align-items: center;
    flex-shrink: 0;
    min-height: 60px;
    padding: 0 20px;
    border-bottom: 1px solid var(--border-softer);
    gap: 12px;
  }

  .shop-filter-subpanel__back{
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 13px;
    color: var(--c-muted);
  }

  .shop-filter-subpanel__back:focus-visible{
    outline: 2px solid var(--c-text);
    outline-offset: 2px;
  }

  .shop-filter-subpanel__title{
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: var(--c-text);
  }

  .shop-filter-subpanel__body{
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 20px;
    min-height: 0;
  }

  .shop-filter-subpanel__footer{
    flex-shrink: 0;
    padding: 12px 20px 28px;
    background: var(--c-bg, #fff);
    border-top: 1px solid var(--border-softer);
  }

  .shop-sidebar__title{
    text-transform: uppercase;
    letter-spacing: 0.22em;
    font-size: 13px;
    font-weight: 600;
  }

  .shop-sidebar__close{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: none;
    background: transparent;
    color: var(--c-text);
    font-size: 24px;
    cursor: pointer;
    padding: 0;
    margin: -10px -10px -10px 0;
  }

  /* --- Overlay --- */
  .shop-filter-overlay{
    position: fixed;
    inset: 0;
    z-index: 999;
    background: rgba(0, 0, 0, 0.4);
  }

  .shop-filter-overlay:not([hidden]){
    display: block;
  }

  /* --- Toolbar + toggle visible --- */
  .shop-main__toolbar{
    display: flex;
    align-items: center;
    margin-bottom: 8px;
  }

  .shop-filter-toggle{
    display: flex;
  }

  /* --- Grid adjustments --- */
  .container--shop .product-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .product-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Mobile (≤560px) */
@media (max-width: 560px){
  .shop-hero{
    padding: 0 0 6px;
  }

  .shop-hero__title{
    font-size: 22px;
    line-height: 1.15;
  }

  .container--shop .product-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  .product-grid{
    grid-template-columns: 1fr;
    gap: 46px;
  }

  .product-card__title{
    font-size: 13px;
  }

  .product-card__merchant{
    font-size: 12px;
  }
}

/* ============================
   Pagination (Zalando-Stil)
============================ */
.shop-main .archive-pagination{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 40px 0 16px;
  margin-top: 0;
}

.archive-pagination__info{
  font-size: 15px;
  font-weight: 400;
  color: var(--c-text);
  white-space: nowrap;
}

.shop-main .archive-pagination__arrow{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  font-size: 0;
  color: var(--c-text);
  text-decoration: none;
  opacity: 1;
  transition: background 0.15s;
  flex-shrink: 0;
}

.shop-main .archive-pagination__arrow::before{
  content: '';
  display: block;
  width: 12px;
  height: 12px;
  border-right: 2px solid currentColor;
  border-top: 2px solid currentColor;
}

.shop-main .archive-pagination__arrow--prev::before{
  transform: rotate(-135deg) translate(-2px, 2px);
}

.shop-main .archive-pagination__arrow--next::before{
  transform: rotate(45deg) translate(-2px, 2px);
}

.shop-main .archive-pagination__arrow:hover{
  background: var(--c-paper);
}

.shop-main .archive-pagination__arrow--disabled{
  color: #ccc;
  cursor: default;
  pointer-events: none;
}

/* ============================
   Print
============================ */
@media print{
  .shop-sidebar,
  .shop-filter-overlay,
  .shop-filter-toggle,
  .shop-filters-bar,
  .filter-bar,
  .filter-chips-active,
  .archive-pagination{
    display: none !important;
  }
}

/* ============================
   Shop Search — Desktop Inline + Autocomplete Dropdown
============================ */

/* --- Desktop search field (in header-utility, expand on focus) --- */
.shop-search{
  position: relative;
  display: none;
  flex-shrink: 0;
}

@media (min-width: 981px){
  .shop-search{
    display: block;
  }
}

.shop-search__form{
  margin: 0;
}

.shop-search__field{
  display: flex;
  align-items: center;
  height: 36px;
  padding: 0 10px;
  border-radius: 8px;
  border: 1px solid rgba(38,32,21,0.14);
  background: var(--c-paper);
  gap: 6px;
  width: 200px;
  transition: width .25s ease, border-color .15s, box-shadow .15s, background .15s;
}

.shop-search__field:focus-within{
  width: 420px;
  border-color: rgba(38,32,21,0.35);
  box-shadow: 0 0 0 3px rgba(38,32,21,0.06);
  background: #fff;
}

.shop-search__icon{
  flex-shrink: 0;
  opacity: 0.4;
  width: 16px;
  height: 16px;
}

.shop-search__input{
  border: none;
  background: transparent;
  font-size: 13px;
  line-height: 1.4;
  color: var(--c-text);
  width: 100%;
  min-width: 0;
  outline: none;
  padding: 0;
  font-family: inherit;
}

.shop-search__input::placeholder{
  color: rgba(38,32,21,0.38);
}

.shop-search__input::-webkit-search-cancel-button{
  -webkit-appearance: none;
  appearance: none;
  display: none;
}

.shop-search__clear{
  flex-shrink: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 4px;
  border-radius: 999px;
  opacity: 0.4;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity .15s, background .15s;
}

.shop-search__clear:hover{
  opacity: 0.8;
  background: rgba(38,32,21,0.06);
}

.shop-search__clear[hidden]{ display: none !important; }

/* --- Autocomplete Dropdown --- */
.shop-search__dropdown{
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  width: 480px;
  max-height: min(680px, calc(100vh - 100px));
  overflow-y: auto;
  background: #fff;
  border-radius: 14px;
  border: 1px solid rgba(38,32,21,0.08);
  box-shadow: 0 12px 40px rgba(0,0,0,0.12);
  z-index: 200;
  padding: 8px 0 0;
}

.shop-search__dropdown[hidden]{ display: none !important; }

.shop-search__empty{
  padding: 20px 16px;
  text-align: center;
  color: var(--c-muted);
  font-size: 13px;
}

/* Skeleton shimmer — shown between debounce-start and response arrival.
   Host sets aria-busy so assistive tech announces the pending state.
   prefers-reduced-motion drops the animation, keeping the static blocks. */
.shop-search__section--skeleton{
  padding: 6px 16px 12px;
}
.shop-search__skeleton-chips{
  display: flex;
  gap: 6px;
  margin: 4px 0 12px;
}
.shop-search__skeleton-row{
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 12px;
  align-items: center;
  padding: 6px 0;
}
.shop-search__skeleton-stack{
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.shop-search__skeleton{
  display: block;
  background: linear-gradient(
    90deg,
    rgba(38,32,21,0.06) 0%,
    rgba(38,32,21,0.14) 50%,
    rgba(38,32,21,0.06) 100%
  );
  background-size: 200% 100%;
  border-radius: 6px;
}
.shop-search__skeleton--chip{ width: 72px; height: 22px; border-radius: 8px; }
.shop-search__skeleton--thumb{ width: 56px; height: 70px; border-radius: 4px; }
.shop-search__skeleton--line{ height: 10px; }
.shop-search__skeleton--line-lg{ width: 85%; }
.shop-search__skeleton--line-sm{ width: 55%; }

@media (prefers-reduced-motion: no-preference){
  .shop-search__skeleton{
    animation: shopSearchShimmer 1.2s ease-in-out infinite;
  }
}
@keyframes shopSearchShimmer{
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

.shop-search__suggest-text{
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Highlighting from server (wp_kses allows <em>) */
.shop-search__suggest-text em{
  font-style: normal;
  font-weight: 600;
}

/* Secondary meta (brand on products, root sortiment on categories) — inline, muted */
.shop-search__suggest-meta{
  margin-left: 8px;
  font-size: 12px;
  font-weight: 400;
  color: var(--c-muted);
}
.shop-search__suggest-meta::before{
  content: "·";
  margin-right: 6px;
  opacity: 0.5;
}

/* Popular searches: pill-shaped chips under the "Beliebte Suchen" label */
.shop-search__chips{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 4px 16px 10px;
}
.shop-search__chip{
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  background: var(--c-paper);
  border: 1px solid rgba(38,32,21,0.08);
  border-radius: 8px;
  text-decoration: none;
  color: var(--c-text);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.2;
  transition: background 0.1s, border-color 0.1s;
}
.shop-search__chip:hover,
.shop-search__chip:focus-visible,
.shop-search__chip[aria-selected="true"]{
  background: var(--c-sand);
  border-color: var(--c-text);
}
/* WCAG 2.4.11: focus-visible must have a visible indicator — outline beats border-change. */
.shop-search__chip:focus-visible,
.shop-search__chip[aria-selected="true"]{
  outline: 2px solid var(--c-text);
  outline-offset: 2px;
}

/* Suggest chip variant: category/brand match with icon + context + count */
.shop-search__chip--suggest{
  gap: 6px;
  padding: 6px 10px 6px 9px;
}
.shop-search__chip-icon{
  flex-shrink: 0;
  opacity: 0.45;
}
.shop-search__chip-label{
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.shop-search__chip-label em{
  font-style: normal;
  font-weight: 600;
}
.shop-search__chip-context{
  margin-left: 4px;
  font-weight: 400;
  color: var(--c-muted);
}
.shop-search__chip-count{
  font-size: 11px;
  font-weight: 400;
  color: var(--c-muted);
  margin-left: 4px;
}

/* Section separator between products / chip-groups / footer */
.shop-search__section + .shop-search__section,
.shop-search__section + .shop-search__footer,
.shop-search__section--products + .shop-search__section{
  border-top: 1px solid rgba(38,32,21,0.06);
  margin-top: 4px;
  padding-top: 8px;
}

.shop-search__section--chips .shop-search__section-label{
  display: block;
  padding: 0 16px 2px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-muted);
}

/* Categories section: primary browse path — prominent label + slightly larger chips. */
.shop-search__section--categories .shop-search__section-label{
  font-size: 12px;
  color: var(--c-text);
  padding-bottom: 4px;
}
.shop-search__section--categories .shop-search__chip{
  padding: 7px 13px;
  font-size: 13px;
  font-weight: 600;
}

/* Product peek: tertiary — smaller label, tighter top spacing. */
.shop-search__section-label--products{
  display: block;
  padding: 2px 16px 0;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-muted);
  opacity: 0.85;
}

/* Product row: thumbnail + name/brand stack + price stack */
.shop-search__section--products{
  padding: 0 0 4px;
}
.shop-search__product-item{
  display: grid;
  grid-template-columns: 56px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  text-decoration: none;
  color: var(--c-text);
  transition: background 0.1s;
}
.shop-search__product-item:hover,
.shop-search__product-item:focus-visible,
.shop-search__product-item[aria-selected="true"]{
  background: var(--c-paper);
}
/* WCAG 2.4.11: keep outline for keyboard/aria-selected, drop only on pure mouse hover. */
.shop-search__product-item:focus-visible,
.shop-search__product-item[aria-selected="true"]{
  outline: 2px solid var(--c-text);
  outline-offset: -2px;
}

.shop-search__product-thumb{
  width: 56px;
  height: 70px;
  object-fit: cover;
  border-radius: 4px;
  background: var(--c-paper);
  display: block;
}
.shop-search__product-thumb--empty{
  display: block;
  border: 1px dashed rgba(38,32,21,0.12);
}

.shop-search__product-content{
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.shop-search__product-name{
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.shop-search__product-name em{
  font-style: normal;
  font-weight: 700;
}
.shop-search__product-brand{
  font-size: 11px;
  font-weight: 500;
  color: var(--c-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.shop-search__product-pricing{
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  flex-shrink: 0;
}
.shop-search__product-price{
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}
.shop-search__product-price--sale{
  color: #b23a3a;
}
.shop-search__product-price--old{
  font-size: 11px;
  font-weight: 400;
  color: var(--c-muted);
  text-decoration: line-through;
}

/* Keyword suggest items in dropdown */
.shop-search__suggest-item{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  text-decoration: none;
  color: var(--c-text);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background .1s;
}

/* Hover shares the background with focus/selected for visual parity;
   outline is reserved for keyboard focus + active aria-selected only. */
.shop-search__suggest-item:hover,
.shop-search__suggest-item:focus-visible,
.shop-search__suggest-item[aria-selected="true"]{
  background: var(--c-paper);
}
.shop-search__suggest-item:focus-visible,
.shop-search__suggest-item[aria-selected="true"]{
  outline: 2px solid var(--c-text);
  outline-offset: -2px;
}

.shop-search__suggest-icon{
  flex-shrink: 0;
  opacity: 0.4;
}

.shop-search__suggest-count{
  margin-left: auto;
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 400;
  color: var(--c-muted);
}

/* "Alle Ergebnisse" footer link — sticky so it stays visible when content overflows */
.shop-search__footer{
  position: sticky;
  bottom: 0;
  background: #fff;
  border-top: 1px solid rgba(38,32,21,0.06);
  padding: 10px 16px;
  margin-top: 4px;
}

.shop-search__footer a{
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  color: var(--c-text);
  padding: 6px 0;
}

.shop-search__footer a:hover{
  opacity: 0.7;
}

/* Recent searches */
.shop-search__section{
  padding-top: 4px;
}

.shop-search__section-label{
  display: block;
  padding: 10px 16px 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-muted);
}

.shop-search__recent-item{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  text-decoration: none;
  color: var(--c-text);
  font-size: 13px;
  cursor: pointer;
  transition: background .1s;
}

.shop-search__recent-item:hover,
.shop-search__recent-item:focus-visible{
  background: var(--c-paper);
}
.shop-search__recent-item:focus-visible{
  outline: 2px solid var(--c-text);
  outline-offset: -2px;
}

.shop-search__recent-icon{
  flex-shrink: 0;
  opacity: 0.3;
}

/* --- Empty/Idle state: Trending + Letzte Suchen side-by-side + Popular Categories --- */
.shop-search__empty-state{
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.shop-search__empty-columns{
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px 12px;
  padding: 4px 0 8px;
}
.shop-search__empty-columns--2{
  grid-template-columns: 1fr 1fr;
}

.shop-search__empty-col{
  min-width: 0;
  padding: 0 8px;
}
.shop-search__empty-col .shop-search__section-label{
  padding: 8px 8px 4px;
}

/* Section-Head: label on the left, optional action (e.g. clear recent) right. */
.shop-search__section-head{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 8px 8px 4px;
  gap: 8px;
}
.shop-search__section-head .shop-search__section-label{
  padding: 0;
}
.shop-search__clear-recent{
  border: none;
  background: transparent;
  padding: 2px 4px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--c-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  font-family: inherit;
}
.shop-search__clear-recent:hover{
  color: var(--c-text);
}
.shop-search__clear-recent:focus-visible{
  outline: 2px solid var(--c-text);
  outline-offset: 2px;
  border-radius: 2px;
  color: var(--c-text);
}

.shop-search__empty-list{
  list-style: none;
  margin: 0;
  padding: 0;
}

.shop-search__empty-link{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  min-height: 36px;
  border-radius: 6px;
  text-decoration: none;
  color: var(--c-text);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.25;
  transition: background .1s;
}
.shop-search__empty-link:hover,
.shop-search__empty-link:focus-visible,
.shop-search__empty-link[aria-selected="true"]{
  background: var(--c-paper);
}
.shop-search__empty-link:focus-visible,
.shop-search__empty-link[aria-selected="true"]{
  outline: 2px solid var(--c-text);
  outline-offset: -2px;
}

.shop-search__empty-arrow{
  flex-shrink: 0;
  width: 14px;
  text-align: center;
  color: var(--c-muted);
  font-weight: 400;
}
.shop-search__empty-icon{
  flex-shrink: 0;
  opacity: 0.35;
}
.shop-search__empty-label{
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shop-search__empty-categories{
  border-top: 1px solid rgba(38,32,21,0.06);
  padding-top: 8px;
  margin-top: 2px;
}

/* Touch-target safety: raise suggest chips to ≥40px on touch devices.
   Desktop hover keeps the tighter density; coarse pointers get the lift. */
@media (pointer: coarse){
  .shop-search__chip{
    min-height: 40px;
    padding: 8px 14px;
  }
  .shop-search__chip--suggest{
    min-height: 40px;
    padding: 8px 12px;
  }
  .shop-search__clear{
    padding: 10px;
  }
  .shop-search__empty-link{
    min-height: 44px;
    padding: 10px 8px;
  }
}

/* --- Mobile Shop Search Overlay (Full-Screen) --- */
.shop-search-overlay{
  position: fixed;
  inset: 0;
  background: #fff;
  z-index: 200;
  display: flex;
  flex-direction: column;
}

.shop-search-overlay[hidden]{ display: none !important; }

body.shop-search-open{ overflow: hidden; }

.shop-search-overlay__header{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(38,32,21,0.08);
  flex-shrink: 0;
}

.shop-search-overlay__form{
  flex: 1;
  margin: 0;
}

.shop-search-overlay__field{
  display: flex;
  align-items: center;
  height: 44px;
  padding: 0 12px;
  border-radius: 10px;
  background: var(--c-paper);
  border: 1px solid rgba(38,32,21,0.10);
  gap: 8px;
}

.shop-search-overlay__field:focus-within{
  border-color: rgba(38,32,21,0.30);
}

.shop-search-overlay__cancel{
  flex-shrink: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  color: var(--c-text);
  padding: 8px 4px;
  white-space: nowrap;
}

.shop-search-overlay__body{
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Mobile dropdown: no absolute, flows in body */
.shop-search__dropdown--mobile{
  position: static;
  min-width: 0;
  width: auto;
  border: none;
  border-radius: 0;
  box-shadow: none;
  max-height: none;
}

/* Mobile: larger product thumbs + more generous vertical spacing */
.shop-search__dropdown--mobile .shop-search__product-item{
  grid-template-columns: 64px 1fr auto;
  gap: 14px;
  padding: 10px 16px;
}
.shop-search__dropdown--mobile .shop-search__product-thumb{
  width: 64px;
  height: 80px;
}

/* Dropdown animation */
@media (prefers-reduced-motion: no-preference){
  .shop-search__dropdown:not([hidden]):not(.shop-search__dropdown--mobile){
    animation: searchDropIn .12s ease-out both;
  }

  @keyframes searchDropIn{
    from{ opacity: 0; transform: translateY(-4px); }
    to{ opacity: 1; transform: translateY(0); }
  }

  .shop-search-overlay:not([hidden]){
    animation: searchOverlayIn .18s ease-out both;
  }

  @keyframes searchOverlayIn{
    from{ opacity: 0; }
    to{ opacity: 1; }
  }
}

/* Search hero on archive page */
.shop-hero__search-query{
  font-style: normal;
}

.shop-no-results__suggestions{
  margin: 16px 0 0;
  font-size: 14px;
  color: var(--c-muted);
  line-height: 1.6;
}

/* SERP hero: "jump to category" shortcuts above the grid.
   Shown only for ?s=... queries when at least one category matched. */
.shop-hero__category-shortcuts{
  margin-top: 14px;
}
.shop-hero__shortcut-label{
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-muted);
  margin-bottom: 8px;
}
.shop-hero__shortcut-list{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.shop-hero__shortcut-chip{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: var(--c-paper);
  border: 1px solid rgba(38,32,21,0.12);
  border-radius: 8px;
  text-decoration: none;
  color: var(--c-text);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  transition: background 0.1s, border-color 0.1s;
}
.shop-hero__shortcut-chip:hover{
  background: var(--c-sand);
  border-color: var(--c-text);
}
.shop-hero__shortcut-chip:focus-visible{
  background: var(--c-sand);
  border-color: var(--c-text);
  outline: 2px solid var(--c-text);
  outline-offset: 2px;
}
.shop-hero__shortcut-name{
  min-width: 0;
}
.shop-hero__shortcut-context{
  font-weight: 400;
  color: var(--c-muted);
  margin-left: 2px;
}
.shop-hero__shortcut-count{
  font-size: 11px;
  font-weight: 500;
  color: var(--c-muted);
  background: #fff;
  padding: 2px 8px;
  border-radius: 999px;
}

/* SERP zero-results recovery: "Ähnliche" + "Beliebte" chip rows. */
.shop-no-results__similar,
.shop-no-results__popular{
  margin-top: 20px;
}
.shop-no-results__label{
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-muted);
  margin-bottom: 8px;
}
.shop-no-results__chips{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.shop-no-results__chip{
  display: inline-flex;
  align-items: center;
  padding: 7px 14px;
  background: var(--c-paper);
  border: 1px solid rgba(38,32,21,0.10);
  border-radius: 8px;
  text-decoration: none;
  color: var(--c-text);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  transition: background 0.1s, border-color 0.1s;
}
.shop-no-results__chip:hover{
  background: var(--c-sand);
  border-color: var(--c-text);
}
.shop-no-results__chip:focus-visible{
  background: var(--c-sand);
  border-color: var(--c-text);
  outline: 2px solid var(--c-text);
  outline-offset: 2px;
}
@media (pointer: coarse){
  .shop-hero__shortcut-chip,
  .shop-no-results__chip{
    min-height: 40px;
  }
}

/* ───────────────────────────────
   Market Home (/market/ Startseite)
   ─────────────────────────────── */

/* ---------- Layout ---------- */
.market-home{
  padding-bottom: clamp(48px, 5vw, 64px);
}

.market-home-section{
  margin-top: clamp(48px, 6vw, 72px);
}

/* ---------- Scroll-Reveal ---------- */
.mh-reveal{
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.mh-reveal--visible{
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce){
  .mh-reveal{
    opacity: 1;
    transform: none;
    transition: none;
  }
}

.market-home-section__header{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: clamp(20px, 2.5vh, 28px);
}

.market-home-section__title{
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(24px, 3vw, 36px);
  margin: 0 0 clamp(20px, 2.5vh, 28px);
  letter-spacing: -0.02em;
  line-height: 1.15;
}

/* When title is inside a flex header, remove its own margin */
.market-home-section__header .market-home-section__title{
  margin-bottom: 0;
}

.market-home-section__link{
  font-size: 13px;
  font-weight: 500;
  color: var(--c-muted);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
}

.market-home-section__link:hover{
  color: var(--c-text);
}

/* ---------- 1. Hero ---------- */
.market-home-hero{
  position: relative;
  overflow: hidden;
  min-height: clamp(320px, 45vh, 480px);
  display: flex;
  align-items: flex-end;
  background: var(--c-text);
}

.market-home-hero__bg-wrap{
  position: absolute;
  inset: 0;
}

.market-home-hero__bg{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.market-home-hero__overlay{
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(26,26,26,0.32) 0%, rgba(26,26,26,0.12) 55%, transparent 100%);
}

.market-home-hero__content{
  position: relative;
  z-index: 1;
  padding-bottom: clamp(32px, 4vw, 56px);
  padding-top: 32px;
  color: #fff;
}

.market-home-hero__title{
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(36px, 5vw, 56px);
  line-height: 1.08;
  letter-spacing: -0.03em;
  margin: 0 0 12px;
  color: inherit;
}

.market-home-hero__subtitle{
  margin: 0 0 24px;
  font-size: 15px;
  line-height: 1.5;
  opacity: 0.9;
  max-width: 420px;
}

.market-home-hero__ctas{
  display: flex;
  gap: 12px;
}

.market-home-hero__cta{
  display: inline-block;
  padding: 14px 36px;
  background: #fff;
  color: var(--c-text);
  border-radius: 8px;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  transition: background 0.2s, transform 0.2s, border-color 0.2s;
  border: 2px solid #fff;
}

.market-home-hero__cta:hover{
  background: var(--c-sand);
  border-color: var(--c-sand);
  transform: translateY(-1px);
}

.market-home-hero__cta--outline{
  background: transparent;
  color: #fff;
  border: 2px solid rgba(255,255,255,0.6);
}

.market-home-hero__cta--outline:hover{
  background: rgba(255,255,255,0.15);
  border-color: #fff;
}

.market-home-hero__cta:focus-visible{
  outline: 2px solid #fff;
  outline-offset: 3px;
}

/* ---------- 2. Trust Micro-Bar ---------- */
.market-home-trustbar{
  background: var(--c-sand);
  padding: 14px 0;
}

.market-home-trustbar__inner{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0;
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--c-text);
}

.market-home-trustbar__item{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.market-home-trustbar__check{
  flex-shrink: 0;
  color: var(--c-text);
  opacity: 0.65;
}

.market-home-trustbar__sep{
  width: 1px;
  height: 14px;
  background: var(--c-text);
  opacity: 0.18;
  margin: 0 20px;
}

/* ---------- 3. Kategorie-Einstiege ---------- */
.market-home-cat-scroll{
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
}

.market-home-cat-tile{
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--c-text);
}

.market-home-cat-tile__media{
  display: block;
  aspect-ratio: 4 / 5;
  border-radius: 16px;
  overflow: hidden;
  background: var(--c-paper);
  /* Dezenter Rahmen wie .product-card__media — sorgt fuer klare Tile-
     Abgrenzung auch bei Produktbildern mit weissem Hintergrund. */
  border: 1px solid var(--border-softer);
}

.market-home-cat-tile__media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease-out;
}

.market-home-cat-tile:hover .market-home-cat-tile__media img{
  transform: scale(1.03);
}

.market-home-cat-tile__placeholder{
  display: block;
  width: 100%;
  height: 100%;
  background: var(--c-paper);
}

.market-home-cat-tile__label{
  display: block;
  margin-top: 10px;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  line-height: 1.3;
}

.market-home-cat-tile:focus-visible{
  outline: 2px solid var(--c-text);
  outline-offset: 2px;
  border-radius: 16px;
}

/* ---------- 3. Neue Produkte ---------- */
.market-home-products__grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  /* role="list" auf <ul> — Defaults zurücksetzen. */
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Grid-Items sind <li> Wrapper, müssen kein eigenes Layout haben — die
   Card (.product-card) übernimmt die Größenbestimmung via fragmentation.
   min-width:0 verhindert overflow bei langen Produktnamen. */
.market-home-products__grid-item{
  min-width: 0;
}

/* ---------- 4. Gerade beliebt — Carousel ---------- */
.market-home-popular__header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: clamp(20px, 2.5vh, 28px);
}

.market-home-popular__header .market-home-section__title{
  margin-bottom: 0;
}

.market-home-popular__nav{
  display: flex;
  gap: 8px;
}

.market-home-popular__btn{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--c-sand);
  background: transparent;
  cursor: pointer;
  color: var(--c-text);
  transition: background 0.15s, border-color 0.15s;
}

.market-home-popular__btn:hover:not(:disabled){
  background: var(--c-sand);
  border-color: var(--c-text);
}

.market-home-popular__btn:disabled{
  opacity: 0.35;
  cursor: default;
}

.market-home-popular__btn:focus-visible{
  outline: 2px solid var(--c-text);
  outline-offset: 2px;
}

.market-home-popular__track{
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  /* role="list" auf <ul> — Defaults zurücksetzen. */
  list-style: none;
  margin: 0;
  padding: 0;
}

.market-home-popular__track::-webkit-scrollbar{
  display: none;
}

.market-home-popular__item{
  flex: 0 0 calc((100% - 3 * 16px) / 4.2);
  min-width: 0;
  scroll-snap-align: start;
}

/* Visually-hidden, aber für Screenreader sichtbar — clip-path-Variante laut a11y-rules. */
.market-home-popular__sr-status{
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- 5. Kategorie-Spotlight — Bento Grid ---------- */
.market-home-spotlight__grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.market-home-spotlight__tile{
  display: block;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  border-radius: 16px;
}

.market-home-spotlight__tile--featured{
  grid-row: span 2;
}

.market-home-spotlight__tile-media{
  display: block;
  height: 100%;
}

.market-home-spotlight__tile-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}

.market-home-spotlight__tile:hover .market-home-spotlight__tile-media img{
  transform: scale(1.03);
}

.market-home-spotlight__tile:not(.market-home-spotlight__tile--featured) .market-home-spotlight__tile-media{
  aspect-ratio: 16/10;
}

.market-home-spotlight__tile-overlay{
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 24px 20px 20px;
  background: linear-gradient(to top, rgba(0,0,0,0.55) 0%, transparent 100%);
  color: #fff;
}

.market-home-spotlight__tile-name{
  display: block;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.2;
}

.market-home-spotlight__tile-sub{
  display: block;
  font-size: 13px;
  opacity: 0.85;
  margin-top: 4px;
}

.market-home-spotlight__tile:focus-visible{
  outline: 2px solid var(--c-text);
  outline-offset: 2px;
}

/* ---------- 7. Beliebte Marken ---------- */
.market-home-brands__grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.market-home-brand-tile__logo{
  max-width: 120px;
  max-height: 48px;
  object-fit: contain;
  margin-bottom: 8px;
}

.market-home-brand-tile{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 24px 16px;
  border: 1px solid #e8e4df;
  border-radius: 12px;
  text-decoration: none;
  text-align: center;
  min-height: 88px;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.market-home-brand-tile:hover{
  border-color: var(--c-text);
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.market-home-brand-tile:focus-visible{
  outline: 2px solid var(--c-text);
  outline-offset: 2px;
}

.market-home-brand-tile__name{
  font-size: 15px;
  font-weight: 700;
  color: var(--c-text);
  line-height: 1.3;
}

.market-home-brand-tile__count{
  font-size: 12px;
  color: var(--c-muted);
}

/* ---------- 8. Blog Teasers ---------- */
.market-home-blog__grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.market-home-blog-card{
  display: flex;
  flex-direction: column;
}

.market-home-blog-card__media{
  display: block;
  aspect-ratio: 16/9;
  border-radius: 12px;
  overflow: hidden;
  background: var(--c-paper);
}

.market-home-blog-card__media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease-out;
}

.market-home-blog-card:hover .market-home-blog-card__media img{
  transform: scale(1.03);
}

.market-home-blog-card__body{
  padding-top: 12px;
}

.market-home-blog-card__meta{
  font-size: 12px;
  color: var(--c-muted);
  margin: 0 0 4px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.market-home-blog-card__title{
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(16px, 1.5vw, 20px);
  line-height: 1.3;
  margin: 0;
}

.market-home-blog-card__title a{
  color: var(--c-text);
  text-decoration: none;
}

.market-home-blog-card__title a:hover{
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- 9. Partner-Shops ---------- */
.market-home-vendors__grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.market-home-vendor-tile{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px 20px;
  background: var(--c-paper);
  border-radius: var(--radius);
  text-decoration: none;
  transition: box-shadow 0.2s;
}

.market-home-vendor-tile:hover{
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}

.market-home-vendor-tile:focus-visible{
  outline: 2px solid var(--c-text);
  outline-offset: 2px;
}

.market-home-vendor-tile__name{
  font-size: 16px;
  font-weight: 600;
  color: var(--c-text);
  line-height: 1.3;
}

.market-home-vendor-tile__logo{
  max-width: 100px;
  max-height: 40px;
  object-fit: contain;
  margin-bottom: 8px;
}

.market-home-vendor-tile__count{
  font-size: 13px;
  color: var(--c-muted);
  margin-top: 4px;
}

/* ---------- 10. SEO Text ---------- */
.market-home-seo__panel{
  max-width: 720px;
}

.market-home-seo__visible{
  font-size: 14px;
  line-height: 1.7;
  color: var(--c-text);
}

.market-home-seo__visible p{
  margin: 0;
}

.market-home-seo__details{
  font-size: 14px;
  line-height: 1.7;
  color: var(--c-text);
}

.market-home-seo__summary{
  cursor: pointer;
  font-weight: 500;
  font-size: 13px;
  color: var(--c-muted);
  margin-top: 8px;
  list-style: none;
}

.market-home-seo__summary::-webkit-details-marker{
  display: none;
}

.market-home-seo__summary::before{
  content: '+ ';
}

.market-home-seo__details[open] .market-home-seo__summary::before{
  content: '− ';
}

.market-home-seo__content{
  margin-top: 12px;
}

.market-home-seo__content p{
  margin: 0 0 12px;
}

/* ---------- Market Home — Responsive ---------- */

/* Tablet (<=980px) */
@media (max-width: 980px){
  .market-home-hero{
    min-height: clamp(280px, 50vh, 360px);
  }

  .market-home-trustbar__inner{
    font-size: 12px;
  }

  .market-home-trustbar__sep{
    margin: 0 12px;
  }

  .market-home-cat-scroll{
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 12px;
    scrollbar-width: none;
    padding-left: 20px;
    padding-right: 20px;
    margin-left: -20px;
    margin-right: -20px;
    mask-image: linear-gradient(to right, #000 85%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, #000 85%, transparent 100%);
  }

  .market-home-cat-scroll::-webkit-scrollbar{
    display: none;
  }

  .market-home-cat-tile{
    flex: 0 0 calc((100vw - 60px) / 2.5);
    scroll-snap-align: start;
  }

  .market-home-products__grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .market-home-popular__nav{
    display: none;
  }

  .market-home-popular__item{
    flex: 0 0 calc((100% - 16px) / 2.2);
  }

  .market-home-popular__track{
    mask-image: linear-gradient(to right, #000 85%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, #000 85%, transparent 100%);
  }

  .market-home-brands__grid{
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 12px;
    scrollbar-width: none;
    mask-image: linear-gradient(to right, #000 85%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, #000 85%, transparent 100%);
  }

  .market-home-brands__grid::-webkit-scrollbar{
    display: none;
  }

  .market-home-brand-tile{
    flex: 0 0 calc((100vw - 60px) / 2.5);
    scroll-snap-align: start;
  }

  .market-home-vendors__grid{
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .market-home-blog__grid{
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .market-home-blog-card{
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 16px;
  }

  .market-home-blog-card__media{
    aspect-ratio: 1;
    border-radius: 8px;
  }

  .market-home-blog-card__body{
    padding-top: 0;
    align-self: center;
  }
}

/* Tablet-Landscape (769–980px) — 3 Spalten statt 2 fuer das Produkt-Grid,
   damit auf iPad-Landscape keine ueberdimensionierten Karten entstehen.
   Greift NACH dem max-width:980-Block, ueberschreibt also den 2-Spalten-Default
   in dem schmalen Range. */
@media (max-width: 980px) and (min-width: 769px){
  .market-home-products__grid{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Mobile (<=560px) */
@media (max-width: 560px){
  .market-home-hero__subtitle{
    font-size: 14px;
  }

  .market-home-popular__item{
    flex: 0 0 calc((100% - 12px) / 1.7);
  }

  .market-home-spotlight__grid{
    grid-template-columns: 1fr;
  }

  .market-home-spotlight__tile--featured{
    grid-row: span 1;
  }

  .market-home-spotlight__tile-media,
  .market-home-spotlight__tile--featured .market-home-spotlight__tile-media{
    aspect-ratio: 16/10;
  }

  .market-home-vendor-tile{
    padding: 20px 12px;
  }
}

@media (prefers-reduced-motion: reduce){
  .market-home-popular__track{
    scroll-behavior: auto;
  }
}

/* ───────────────────────────────
   Category Hub Pages (/market/kategorie/{path} — Hub-Modus)
   ─────────────────────────────── */

.cat-hub{
  padding-bottom: clamp(48px, 5vw, 64px);
}

/* ---------- Scroll-Reveal Animation ---------- */
.cat-hub-reveal{
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.cat-hub-reveal--visible{
  opacity: 1;
  transform: translateY(0);
}

/* ---------- S1. Hero (Split-Layout) ---------- */
.cat-hub-hero{
  padding-top: clamp(24px, 3vw, 40px);
  padding-bottom: clamp(32px, 4vw, 48px);
}

.cat-hub-hero__grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 4vw, 56px);
  align-items: center;
}

.cat-hub-hero__title{
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(36px, 4.5vw, 56px);
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin: 16px 0 12px;
}

.cat-hub-hero__meta{
  font-size: 14px;
  color: var(--c-muted);
  margin: 0 0 16px;
}

.cat-hub-hero__intro{
  font-size: 15px;
  line-height: 1.55;
  color: var(--c-text);
  max-width: 480px;
  margin: 0 0 24px;
}

.cat-hub-hero__cta{
  display: inline-block;
  padding: 12px 32px;
  background: var(--c-text);
  color: var(--c-bg, #fff);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-decoration: none;
  border-radius: 999px;
  transition: opacity 0.2s;
}

.cat-hub-hero__cta:hover{
  opacity: 0.85;
}

.cat-hub-hero__mosaic{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.cat-hub-hero__mosaic-item{
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 4/5;
  background: var(--c-sand);
}

.cat-hub-hero__mosaic-item{
  position: relative;
}

a.cat-hub-hero__mosaic-item{
  text-decoration: none;
  color: #fff;
}

.cat-hub-hero__mosaic-item img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}

.cat-hub-hero__mosaic-item:hover img{
  transform: scale(1.03);
}

.cat-hub-hero__mosaic-label{
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px 12px 10px;
  background: linear-gradient(to top, rgba(0,0,0,0.5) 0%, transparent 100%);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
}

/* ---------- S2. Subcategory Bento Grid ---------- */
.cat-hub-explore{
  margin-top: clamp(48px, 5vw, 64px);
}

.cat-hub-explore__title{
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(22px, 2.5vw, 28px);
  letter-spacing: -0.02em;
  margin: 0 0 24px;
}

.cat-hub-explore__grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.cat-hub-explore__tile{
  display: block;
  text-decoration: none;
  color: var(--c-text);
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  transition: transform 0.2s ease;
}

.cat-hub-explore__tile:hover{
  transform: scale(1.02);
}

.cat-hub-explore__tile--featured{
  grid-row: span 2;
}

.cat-hub-explore__tile-media{
  display: block;
  aspect-ratio: 4/5;
  overflow: hidden;
  background: var(--c-sand);
}

.cat-hub-explore__tile--featured .cat-hub-explore__tile-media{
  aspect-ratio: auto;
  height: 100%;
}

.cat-hub-explore__tile-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.cat-hub-explore__tile-placeholder{
  display: block;
  width: 100%;
  height: 100%;
  background: var(--c-sand);
}

/* Featured tile: overlay text on gradient */
.cat-hub-explore__tile-overlay{
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 24px 20px 20px;
  background: linear-gradient(to top, rgba(0,0,0,0.55) 0%, transparent 100%);
  color: #fff;
}

.cat-hub-explore__tile-overlay .cat-hub-explore__tile-name{
  display: block;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.2;
}

.cat-hub-explore__tile-overlay .cat-hub-explore__tile-count{
  display: block;
  font-size: 13px;
  opacity: 0.85;
  margin-top: 4px;
}

/* Standard tile: text below image */
.cat-hub-explore__tile-info{
  display: block;
  padding: 10px 4px 0;
}

.cat-hub-explore__tile-info .cat-hub-explore__tile-name{
  display: block;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
}

.cat-hub-explore__tile-info .cat-hub-explore__tile-count{
  display: block;
  font-size: 13px;
  color: var(--c-muted);
  margin-top: 2px;
}

/* ---------- S3. Quick-Filter Pills ---------- */
.cat-hub-quickfilters{
  margin-top: clamp(32px, 3vw, 48px);
}

.cat-hub-quickfilters__scroll{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.cat-hub-quickfilter{
  display: inline-block;
  padding: 8px 20px;
  border: 1px solid var(--c-muted);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  color: var(--c-text);
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 0.2s, background 0.2s;
}

.cat-hub-quickfilter:hover{
  border-color: var(--c-text);
  background: var(--c-text);
  color: var(--c-bg, #fff);
}

/* ---------- S4. Trending Products ---------- */
.cat-hub-products{
  margin-top: clamp(48px, 5vw, 64px);
}

.cat-hub-products__header{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 24px;
  gap: 16px;
}

.cat-hub-products__title{
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(22px, 2.5vw, 28px);
  letter-spacing: -0.02em;
  margin: 0;
}

.cat-hub-products__link{
  font-size: 13px;
  font-weight: 600;
  color: var(--c-text);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 1px solid var(--c-text);
  padding-bottom: 1px;
  transition: opacity 0.2s;
}

.cat-hub-products__link:hover{
  opacity: 0.7;
}

/* ---------- S5. Editorial Story (Full-Bleed) ---------- */
.cat-hub-story{
  margin-top: clamp(48px, 5vw, 64px);
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  background: var(--c-paper);
  padding: clamp(40px, 5vw, 72px) 0;
}

.cat-hub-story__inner{
  width: min(var(--container, 1240px), calc(100% - 40px));
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 4vw, 56px);
  align-items: center;
}

.cat-hub-story__inner--centered{
  grid-template-columns: 1fr;
  text-align: center;
  max-width: 640px;
}

.cat-hub-story__media{
  border-radius: 12px;
  overflow: hidden;
}

.cat-hub-story__img{
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 4/3;
  object-fit: cover;
}

.cat-hub-story__title{
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(24px, 2.5vw, 32px);
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 0 0 16px;
}

.cat-hub-story__text{
  font-size: 15px;
  line-height: 1.6;
  color: var(--c-text);
  margin: 0 0 24px;
}

.cat-hub-story__cta{
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  color: var(--c-text);
  text-decoration: none;
  border-bottom: 1px solid var(--c-text);
  padding-bottom: 2px;
  transition: opacity 0.2s;
}

.cat-hub-story__cta:hover{
  opacity: 0.7;
}

/* ---------- S6. Spotlights ---------- */
.cat-hub-spotlights{
  margin-top: clamp(48px, 5vw, 64px);
}

.cat-hub-spotlights__title{
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(22px, 2.5vw, 28px);
  margin: 0 0 clamp(24px, 3vw, 32px);
}

.cat-hub-spotlights__divider{
  border: none;
  border-top: 1px solid var(--c-sand);
  margin: clamp(32px, 4vw, 48px) 0;
}

.cat-hub-spotlight__header{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 20px;
  gap: 16px;
}

.cat-hub-spotlight__title{
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(20px, 2vw, 24px);
  letter-spacing: -0.02em;
  margin: 0;
}

.cat-hub-spotlight__link{
  font-size: 13px;
  font-weight: 600;
  color: var(--c-text);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 1px solid var(--c-text);
  padding-bottom: 1px;
  transition: opacity 0.2s;
}

.cat-hub-spotlight__link:hover{
  opacity: 0.7;
}

/* ---------- S7. Brands ---------- */
.cat-hub-brands{
  margin-top: clamp(48px, 5vw, 64px);
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  background: var(--c-paper);
  padding: clamp(40px, 5vw, 56px) 0;
}

.cat-hub-brands__title{
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(22px, 2.5vw, 28px);
  letter-spacing: -0.02em;
  margin: 0 0 24px;
}

/* ---------- Hub: Trust micro-bar spacing ---------- */
.cat-hub-trustbar{
  margin-bottom: clamp(32px, 3vw, 48px);
}

/* ---------- Hub: Popular carousel spacing ---------- */
.cat-hub-popular{
  margin-top: clamp(48px, 5vw, 64px);
}

/* ---------- Hub: Blog teaser spacing ---------- */
.cat-hub-blog{
  margin-top: clamp(48px, 5vw, 64px);
}

/* ---------- Hub: Bento progressive disclosure ---------- */
.cat-hub-explore__grid--capped .cat-hub-explore__tile--hidden{
  display: none;
}

.cat-hub-explore__grid--capped.is-expanded .cat-hub-explore__tile--hidden{
  display: block;
}

.cat-hub-explore__expand{
  display: block;
  margin: 20px auto 0;
  padding: 10px 28px;
  border: 1px solid var(--c-muted);
  border-radius: 999px;
  background: transparent;
  font-size: 13px;
  font-weight: 500;
  color: var(--c-text);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}

.cat-hub-explore__expand:hover{
  border-color: var(--c-text);
  background: var(--c-text);
  color: var(--c-bg, #fff);
}

.cat-hub-explore__expand:focus-visible{
  outline: 2px solid var(--c-text);
  outline-offset: 2px;
}

/* ---------- S10. SEO Text ---------- */
.cat-hub-seo{
  margin-top: clamp(48px, 5vw, 64px);
}

.cat-hub-seo__panel{
  max-width: 720px;
}

.cat-hub-seo__title{
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(20px, 2vw, 24px);
  margin: 0 0 16px;
}

.cat-hub-seo__visible{
  font-size: 14px;
  line-height: 1.7;
  color: var(--c-text);
}

.cat-hub-seo__visible p{
  margin: 0;
}

.cat-hub-seo__details{
  font-size: 14px;
  line-height: 1.7;
  color: var(--c-text);
}

.cat-hub-seo__summary{
  cursor: pointer;
  font-weight: 500;
  font-size: 13px;
  color: var(--c-muted);
  margin-top: 8px;
  list-style: none;
}

.cat-hub-seo__summary::-webkit-details-marker{
  display: none;
}

.cat-hub-seo__summary::before{
  content: '+ ';
}

.cat-hub-seo__details[open] .cat-hub-seo__summary::before{
  content: '- ';
}

.cat-hub-seo__content{
  margin-top: 12px;
}

/* ---------- Product Card: Sale Badge + Sustainability Chip ---------- */
.product-card{
  position: relative;
}

.product-card__badge{
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 1;
  padding: 4px 10px;
  background: var(--c-text);
  color: var(--c-bg, #fff);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-radius: 4px;
  line-height: 1;
}

.product-card__sustain-list{
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 3px 8px;
  font-size: 11px;
  line-height: 1.2;
  color: #2d6a4f;
}

.product-card__sustain-item{
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.product-card__sustain-item svg{
  flex-shrink: 0;
  width: 11px;
  height: 11px;
}

.product-card__sustain-item--more{
  color: var(--c-muted);
}

/* ---------- Hub responsive: Tablet ---------- */
@media (max-width: 1023px) and (min-width: 768px){
  .cat-hub-explore__grid{
    grid-template-columns: repeat(3, 1fr);
  }

  .cat-hub-explore__tile--featured{
    grid-row: span 1;
  }

  .cat-hub-hero__grid{
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }
}

/* ---------- Hub responsive: Mobile ---------- */
@media (max-width: 767px){
  .cat-hub-hero__grid{
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .cat-hub-hero__title{
    font-size: clamp(28px, 7vw, 36px);
  }

  .cat-hub-hero__cta{
    display: block;
    text-align: center;
  }

  .cat-hub-hero__mosaic{
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .cat-hub-explore__grid{
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 12px;
    padding-bottom: 8px;
    -webkit-overflow-scrolling: touch;
  }

  .cat-hub-explore__tile{
    flex: 0 0 42vw;
    scroll-snap-align: start;
  }

  .cat-hub-explore__tile--featured{
    flex: 0 0 65vw;
  }

  .cat-hub-explore__tile--featured .cat-hub-explore__tile-media{
    aspect-ratio: 4/5;
    height: auto;
  }

  .cat-hub-quickfilters__scroll{
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
  }

  .cat-hub-quickfilter{
    scroll-snap-align: start;
  }

  .cat-hub-story__inner{
    grid-template-columns: 1fr;
  }

  .cat-hub-story__img{
    aspect-ratio: 16/9;
  }

  .cat-hub-brands{
    margin-left: 0;
    margin-right: 0;
    padding-left: 20px;
    padding-right: 20px;
  }

  .cat-hub-story{
    margin-left: 0;
    margin-right: 0;
  }

  /* Scroll-fade indicators */
  .cat-hub-explore__grid{
    mask-image: linear-gradient(to right, #000 85%, transparent);
    -webkit-mask-image: linear-gradient(to right, #000 85%, transparent);
  }

  .cat-hub-quickfilters__scroll{
    mask-image: linear-gradient(to right, #000 85%, transparent);
    -webkit-mask-image: linear-gradient(to right, #000 85%, transparent);
  }

  /* Progressive disclosure: no capping on mobile (horizontal scroll instead) */
  .cat-hub-explore__grid--capped .cat-hub-explore__tile--hidden{
    display: block;
  }

  .cat-hub-explore__expand{
    display: none;
  }
}


/* ==========================================================================
   Brand & Vendor Directories + Cert Badges
   ========================================================================== */

/* ---------- Shared: Certification Badges ---------- */
.cert-badges{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.cert-badge{
  border: 1px solid #2d6a4f;
  color: #2d6a4f;
  border-radius: 4px;
  padding: 3px 8px;
  font-size: 11px;
  line-height: 1.3;
  white-space: nowrap;
}

.cert-badges__overflow{
  color: var(--c-muted);
  font-size: 11px;
  line-height: 1.3;
  padding: 3px 4px;
}

/* ---------- Brand Directory ---------- */
.brand-directory{
  padding-top: 24px;
  padding-bottom: 60px;
}

.brand-directory__header{
  margin-bottom: 24px;
}

.brand-directory__title{
  font-family: var(--font-heading);
  font-size: clamp(28px, 3vw, 36px);
  font-weight: 400;
  margin: 0 0 4px;
}

.brand-directory__count{
  color: var(--c-muted);
  font-size: 14px;
  margin: 0;
}

.brand-directory__intro{
  color: var(--c-muted);
  font-size: 15px;
  line-height: 1.6;
  max-width: 640px;
  margin: 8px 0 0;
}

/* A-Z Navigation */
.brand-az-nav{
  position: sticky;
  top: var(--header-offset, 64px);
  z-index: 10;
  background: var(--c-bg, #fff);
  padding: 10px 0;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border-softer, #e8e4df);
}

.brand-az-nav__list{
  display: flex;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-x: auto;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
}

.brand-az-nav__list::-webkit-scrollbar{
  display: none;
}

.brand-az-nav__item{
  flex-shrink: 0;
  scroll-snap-align: center;
}

.brand-az-nav__letter{
  min-width: 32px;
  height: 32px;
  padding: 0 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  color: var(--c-text);
  border-radius: 6px;
  transition: background 0.15s ease, color 0.15s ease;
}

a.brand-az-nav__letter:hover{
  background: var(--c-sand, #f5f0eb);
}

a.brand-az-nav__letter:focus-visible{
  outline: 2px solid #2d6a4f;
  outline-offset: 2px;
}

a.brand-az-nav__letter.is-active{
  background: var(--c-text, #1a1a1a);
  color: #fff;
}

.brand-az-nav__letter--disabled{
  color: var(--c-muted);
  opacity: 0.35;
  cursor: default;
  user-select: none;
}

/* Letter Groups */
.brand-letter-group{
  scroll-margin-top: calc(var(--header-offset, 64px) + 60px);
  margin-bottom: 32px;
}

.brand-letter-group__heading{
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 400;
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-softer, #e8e4df);
}

/* Brand Grid */
.brand-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.brand-grid__item{
  display: flex;
}

/* Brand Card */
.brand-card{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0;
  padding: 20px 16px 16px;
  width: 100%;
  border: 1px solid var(--border-softer, #e8e4df);
  border-radius: 12px;
  text-decoration: none;
  color: var(--c-text);
  background: var(--c-bg, #fff);
  transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

/* Kuratierte Card: schlichter Textlink */
a.brand-card .brand-card__body::after{
  content: "Zur Marke \2192";
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: var(--c-muted, #6b6b6b);
  transition: color 0.2s;
}

a.brand-card:hover{
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
  transform: translateY(-2px);
}
a.brand-card:hover .brand-card__body::after{
  color: var(--c-text, #1a1a1a);
}

a.brand-card:focus-visible{
  outline: 2px solid #2d6a4f;
  outline-offset: 2px;
}

/* Nicht-kuratierte Card */
.brand-card--no-link{
  cursor: default;
}

.brand-card__logo-wrap{
  width: 100%;
  height: 44px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
  /* CLS-Fix: feste Höhe, Logos werden dadrin proportional gefittet */
}

.brand-card__logo{
  max-width: 100%;
  max-height: 44px;
  width: auto;
  height: auto;
  object-fit: contain;
}

.brand-card__body{
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  width: 100%;
}

.brand-card__name{
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
}

.brand-card__count{
  font-size: 13px;
  color: var(--c-muted);
  margin-top: 2px;
}

/* ---------- Vendor Directory ---------- */
.vendor-directory{
  padding-top: 24px;
  padding-bottom: 60px;
}

.vendor-directory__header{
  margin-bottom: 32px;
}

.vendor-directory__title{
  font-family: var(--font-heading);
  font-size: clamp(28px, 3vw, 36px);
  font-weight: 400;
  margin: 0 0 4px;
}

.vendor-directory__count{
  color: var(--c-muted);
  font-size: 14px;
  margin: 0;
}

/* Vendor Grid */
.vendor-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* Vendor Card */
.vendor-card{
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 24px;
  background: #fff;
  border: 1px solid var(--border-softer, #e8e4df);
  border-radius: 12px;
  text-decoration: none;
  color: var(--c-text);
  transition: box-shadow 0.2s, transform 0.2s;
}

.vendor-card:hover{
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
  transform: translateY(-2px);
}
.vendor-card:focus-visible{
  outline: 2px solid #2d6a4f;
  outline-offset: 2px;
}

.vendor-card__logo-wrap{
  width: 80px;
  height: 80px;
  flex-shrink: 0;
  border-radius: 999px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--c-paper, #faf8f5);
  border: 1px solid var(--border-softer, #e8e4df);
}

.vendor-card__logo{
  width: 80px;
  height: 80px;
  object-fit: contain;
  padding: 8px;
}

.vendor-card__initial{
  font-family: var(--font-heading);
  font-size: 28px;
  color: var(--c-muted);
}

.vendor-card__body{
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.vendor-card__name{
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
}

.vendor-card__count{
  font-size: 13px;
  color: var(--c-muted);
  margin-top: 2px;
}

.vendor-card__desc{
  font-size: 14px;
  color: var(--c-muted);
  margin-top: 6px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------- Brand Hero — Editorial Portrait ---------- */
.brand-hero{
  text-align: center;
  padding: 8px 0 0;
}

.brand-hero__logo{
  margin: 0 auto 4px;
  max-width: 220px;
}

.brand-hero__logo img{
  max-width: 100%;
  max-height: 64px;
  width: auto;
  height: auto;
  object-fit: contain;
}

.brand-hero__name{
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(28px, 3vw, 40px);
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0 0 4px;
}

.brand-hero__name--sub{
  font-size: 15px;
  font-family: system-ui, sans-serif;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-muted);
  margin: 6px 0 0;
}

.brand-hero__certs{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  margin: 10px 0 0;
}

.brand-hero__tagline{
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.45;
  color: var(--c-muted);
  max-width: 780px;
  margin: 14px auto 0;
}

.brand-hero__description{
  font-size: 15px;
  line-height: 1.65;
  color: var(--c-text);
  max-width: 780px;
  margin: 16px auto 0;
}

.brand-hero__meta{
  font-size: 13px;
  color: var(--c-muted);
  margin: 12px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.brand-hero__meta-dot{
  font-size: 16px;
  line-height: 1;
}

.brand-hero__website{
  color: var(--c-muted);
  text-decoration: none;
}

.brand-hero__website:hover{
  color: var(--c-text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.brand-hero__divider{
  border: none;
  border-top: 1px solid rgba(0,0,0,0.08);
  max-width: 780px;
  margin: 20px auto;
}

.brand-hero__sustainability{
  max-width: 780px;
  margin: 0 auto;
  text-align: center;
}

.brand-hero__sustainability summary{
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--c-muted);
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  list-style: none;
}

.brand-hero__sustainability summary::-webkit-details-marker{
  display: none;
}

.brand-hero__sustainability summary::after{
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg);
  margin-top: -2px;
  transition: transform 0.2s;
  flex-shrink: 0;
}

.brand-hero__sustainability[open] summary::after{
  transform: rotate(-135deg);
  margin-top: 2px;
}

.brand-hero__sustainability-text{
  font-size: 15px;
  line-height: 1.65;
  color: var(--c-text);
  padding: 4px 0 0;
  text-align: center;
}

/* ---------- Responsive: Brand Directory ---------- */
@media (max-width: 980px) {
  .brand-grid{
    grid-template-columns: repeat(3, 1fr);
  }
  .vendor-grid{
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .brand-grid{
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .brand-card{
    padding: 14px 12px 12px;
  }
  .brand-card__logo-wrap{
    height: 36px;
    margin-bottom: 8px;
  }
  .brand-card__logo{
    max-height: 36px;
  }
  .brand-card__name{
    font-size: 14px;
  }
  /* Touch-Targets in der A-Z-Nav etwas grösser */
  .brand-az-nav__letter{
    min-width: 36px;
    height: 36px;
  }
  .vendor-grid{
    grid-template-columns: 1fr;
  }
  .vendor-card{
    padding: 16px;
  }
}

/* Reduced motion: keine Hover-Translates, keine Smooth-Transitions */
@media (prefers-reduced-motion: reduce) {
  .brand-card,
  .brand-az-nav__letter,
  a.brand-card .brand-card__body::after{
    transition: none;
  }
  a.brand-card:hover{
    transform: none;
  }
}


/* =================================================================
   Marketplace 404 (.error-404--shop)
   ================================================================= */

section.error-404--shop{
  padding-block: clamp(32px, 6vh, 64px) clamp(48px, 8vh, 96px);
}

.error-404-shop__hero{
  text-align: center;
  padding-block: clamp(16px, 3vh, 32px) clamp(28px, 4.5vh, 56px);
}

.error-404-shop__illustration{
  display: block;
  margin: 0 auto clamp(12px, 2vh, 20px);
  width: clamp(120px, 18vw, 200px);
  height: auto;
  opacity: 0.85;
}

.error-404-shop__title{
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(32px, 5vw, 48px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 clamp(12px, 1.5vh, 16px);
  color: var(--c-text);
}

.error-404-shop__text{
  font-size: clamp(15px, 1.6vw, 17px);
  line-height: 1.55;
  color: var(--c-muted);
  max-width: 560px;
  margin: 0 auto clamp(24px, 3.5vh, 36px);
}

.error-404-shop__search{
  display: flex;
  align-items: stretch;
  gap: 0;
  max-width: 520px;
  margin: 0 auto;
  border: 1px solid var(--c-text);
  background: var(--c-paper, #fff);
  border-radius: 999px;
  padding: 4px 4px 4px 18px;
  position: relative;
}

.error-404-shop__search-icon{
  align-self: center;
  flex-shrink: 0;
  color: var(--c-muted);
  margin-right: 10px;
}

.error-404-shop__search-input{
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 16px;
  padding: 12px 4px;
  color: var(--c-text);
  outline: none;
}

.error-404-shop__search-input::placeholder{
  color: var(--c-muted);
}

.error-404-shop__search-submit{
  flex-shrink: 0;
  appearance: none;
  border: 0;
  background: var(--c-text);
  color: var(--c-paper, #fff);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 10px 22px;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 0.18s ease;
}

.error-404-shop__search-submit:hover,
.error-404-shop__search-submit:focus-visible{
  background: var(--c-text);
  opacity: 0.85;
}

.error-404-shop__search:focus-within{
  border-color: var(--c-text);
  box-shadow: 0 0 0 3px rgba(0,0,0,0.06);
}

.error-404-shop__search-input:focus-visible{
  outline: none;
}

.error-404-shop__section{
  margin-top: clamp(40px, 6vh, 72px);
}

.error-404-shop__section-title{
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(22px, 2.6vw, 28px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0 0 clamp(16px, 2.4vh, 24px);
  color: var(--c-text);
}

/* Cats: reuse .market-home-cat-tile geometry, just adjust scroller padding */
.error-404-shop__cats{
  /* Inherits from .market-home-cat-scroll (already styled in shop.css) */
}

/* Chips list */
.error-404-shop__chips{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
}

.error-404-shop__chip{
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 6px 16px;
  border: 1px solid var(--c-text);
  border-radius: 999px;
  font-size: 14px;
  line-height: 1.2;
  color: var(--c-text);
  text-decoration: none;
  background: transparent;
  transition: background-color 0.18s ease, color 0.18s ease;
}

.error-404-shop__chip:hover,
.error-404-shop__chip:focus-visible{
  background: var(--c-text);
  color: var(--c-paper, #fff);
}

.error-404-shop__chip:focus-visible{
  outline: 2px solid var(--c-text);
  outline-offset: 2px;
}

/* Beliebte-Produkte-Sektion auf der 404 nutzt das wiederverwendete
   .market-home-popular-Carousel (Markup + JS + CSS aus der Marktplatz-
   Startseite). Kein eigenes Products-Grid noetig — alle Card-Sizing-,
   Slider- und Responsive-Regeln greifen identisch. */

@media (max-width: 720px){
  .error-404-shop__search{
    padding: 3px 3px 3px 14px;
  }
  .error-404-shop__search-submit{
    padding: 10px 16px;
  }
}

/* Final CTA */
.error-404-shop__cta{
  margin: clamp(40px, 6vh, 72px) 0 0;
  text-align: center;
}

.error-404-shop__home{
  display: inline-block;
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  color: var(--c-text);
  text-decoration: none;
  padding: 12px 4px;
  border-bottom: 1px solid currentColor;
  transition: opacity 0.18s ease;
}

.error-404-shop__home:hover,
.error-404-shop__home:focus-visible{
  opacity: 0.65;
}

.error-404-shop__home:focus-visible{
  outline: 2px solid var(--c-text);
  outline-offset: 4px;
  border-bottom-color: transparent;
}

@media (prefers-reduced-motion: reduce){
  .error-404-shop__chip,
  .error-404-shop__home,
  .error-404-shop__search-submit{
    transition: none;
  }
}