/*
 * Shop-Seiten (templates/archive-product.html und product-search-results.html): Filterspalte,
 * WooCommerce-Filterbloecke (Pattern nextamed/shop-filter) und der Leerzustand der Suche
 * (nextamed/shop-suche-leer) in der Formsprache des Themes. Geladen ueber
 * wp_enqueue_block_style('core/group'), automatische Zuordnung in functions.php; die Datei haengt
 * damit am Gruppenblock und liegt auf jeder Seite vor (wichtig fuer die Brotkrumenregel unten).
 * Mobile first: bis 781 px zeigt der Filter den Knopf "Produkte filtern" mit Vollbild-Schublade,
 * ab 782 px stehen die Gruppen in der linken Spalte. WooCommerce schreibt seine Regeln als
 * :where(.wc-block-product-filters) .klasse (0,1,0) oder mit Klassenketten; wo sie verlieren
 * muessen, steht .wp-site-blocks davor. Nie !important.
 */

/* Brotkrumen: Links als Klickziel von touch.minSize Hoehe, auf jeder Vorlage gleich. Vorher war die
   Regel auf .nxm-kopfzeile eingegrenzt; die Produktseite haengt ihre Krume in eine Gruppe ohne
   nxm-Klasse und hatte dort nur 20 px hohe Ziele (Prueferbefund 13.09.). Diese Datei laedt am
   Gruppenblock, also ueberall; wohlima.css und seite-inhalt.css halten noch eigene Kopien
   derselben fuenf Zeilen (Wunsch an ihre Besitzer: entfernen). */
:root :where(.wp-block-woocommerce-breadcrumbs a) {
  display: inline-flex;
  align-items: center;
  min-height: var(--wp--custom--touch--min-size);
}

/* Der Filterblock fuellt seine Spalte; WooCommerce setzt inline-flex. */
.wp-site-blocks .wc-block-product-filters {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
}

/* Knopf "Produkte filtern" (bis 781 px sichtbar): Outline-Knopf in voller Breite, 48 px hoch,
   Symbol mit Wort. */
.wp-site-blocks .wc-block-product-filters__open-overlay {
  width: 100%;
  justify-content: center;
  gap: var(--wp--preset--spacing--10);
  min-height: var(--wp--custom--button--min-height);
  padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
  border: 1px solid var(--wp--preset--color--line-strong);
  border-radius: var(--wp--custom--radius--small);
  background: var(--wp--preset--color--base);
  color: var(--wp--preset--color--contrast);
  font: inherit;
  font-size: var(--wp--preset--font-size--medium);
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--wp--custom--transition);
}

.wp-site-blocks .wc-block-product-filters__open-overlay:hover {
  background: var(--wp--preset--color--surface);
}

/* Schliessen im Overlay: 44 px Ziel, Wort plus Kreuz. */
.wp-site-blocks .wc-block-product-filters__close-overlay {
  min-height: var(--wp--custom--touch--min-size);
  padding: 0 var(--wp--preset--spacing--20);
  font-size: var(--wp--preset--font-size--medium);
  font-weight: 600;
  cursor: pointer;
}

.wp-site-blocks .wc-block-product-filters__open-overlay:focus-visible,
.wp-site-blocks .wc-block-product-filters__close-overlay:focus-visible,
.wp-site-blocks .wc-block-product-filter-removable-chips__remove:focus-visible {
  outline: 3px solid var(--wp--preset--color--primary);
  outline-offset: 2px;
}

/* Overlay-Dialog auf Weiss, Inhalt mit Luft nach oben und unten. */
.wp-site-blocks .wc-block-product-filters__overlay-dialog {
  background-color: var(--wp--preset--color--base);
  color: var(--wp--preset--color--contrast);
}

@media (max-width: 781px) {
  .wp-site-blocks .wc-block-product-filters__overlay-content {
    padding-top: var(--wp--preset--spacing--30);
    padding-bottom: var(--wp--preset--spacing--40);
  }

  /* Geschlossene Schublade wirklich aus dem Weg: WooCommerce schiebt den Dialog nur mit
     transform:translateY(100vh) nach unten und setzt display:flex!important. Er bleibt damit im
     Bedienweg (Tabulator laeuft durch alle Kaestchen, ohne dass etwas zu sehen ist) und erscheint
     in Ganzseiten-Bildern mitten in der Liste. visibility nimmt ihn aus Bedienweg und Bild,
     ohne den Einblendeweg zu stoeren: mit is-overlay-opened ist er wieder sichtbar. */
  .wp-site-blocks .wc-block-product-filters:not(.is-overlay-opened) .wc-block-product-filters__overlay-dialog {
    visibility: hidden;
  }
}

/* Schublade bis 781 px statt bis 600 px: WooCommerce schaltet ab 601 px auf die inline stehenden
   Filter um (product-filters-style.css, @media min-width 601px). Dann standen zwischen 601 und
   781 px alle Kaestchen ausgeklappt ueber dem Raster, 347 px hoch, und das erste Produkt begann
   erst bei rund 1000 px (Prueferbefund 13.09., quer gehaltenes Handy und kleines Tablet). Die
   folgenden Regeln stellen in diesem Bereich das Verhalten der Schublade wieder her; 782 px ist
   auch der Punkt, an dem core/columns stapelt, Kopfzeile und Chips umschalten. */
@media (min-width: 601px) and (max-width: 781px) {
  .wp-site-blocks .nxm-filter-gruppen .wc-block-product-filters__open-overlay,
  .wp-site-blocks .nxm-filter-gruppen .wc-block-product-filters__overlay-header,
  .wp-site-blocks .nxm-filter-gruppen .wc-block-product-filters__overlay-footer {
    display: flex;
  }

  .wp-site-blocks .nxm-filter-gruppen .wc-block-product-filters__overlay {
    position: fixed;
    inset: 0;
    top: var(--top-padding);
    background: transparent;
    pointer-events: none;
  }

  .wp-site-blocks .nxm-filter-gruppen .wc-block-product-filters__overlay-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
  }

  .wp-site-blocks .nxm-filter-gruppen .wc-block-product-filters__overlay-dialog {
    position: absolute;
    inset: 0;
    max-height: 100%;
    transform: translateY(100vh);
  }

  .wp-site-blocks .nxm-filter-gruppen:not(.is-overlay-opened) .wc-block-product-filters__overlay-dialog {
    visibility: hidden;
  }

  .wp-site-blocks .nxm-filter-gruppen.is-overlay-opened .wc-block-product-filters__overlay {
    pointer-events: auto;
    z-index: 9999;
  }

  .wp-site-blocks .nxm-filter-gruppen.is-overlay-opened .wc-block-product-filters__overlay-dialog {
    transform: translateY(0);
    transition: transform 0.5s;
  }

  .wp-site-blocks .nxm-filter-gruppen .wc-block-product-filters__overlay-content {
    overflow-y: auto;
    padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40) var(--wp--preset--spacing--40);
  }
}

/* Auswahllisten (Verfuegbarkeit, Marke): jede Zeile ein 44-px-Ziel, das Label umfasst Kaestchen
   und Text; Kaestchen in Grossbuchstabenhoehe mit sichtbarem Rahmen (line-strong, 4,1:1 auf Weiss),
   Haken in Gruen dunkel. Die Farben gehen ueber die Variablen des Blocks. */
.wp-site-blocks .wc-block-product-filter-checkbox-list {
  --wc-product-filter-checkbox-list-option-element: var(--wp--preset--color--base);
  --wc-product-filter-checkbox-list-option-element-border: var(--wp--preset--color--line-strong);
  --wc-product-filter-checkbox-list-option-element-selected: var(--wp--preset--color--primary-dark);
}

.wp-site-blocks .wc-block-product-filter-checkbox-list__items {
  display: flex;
  flex-direction: column;
}

.wp-site-blocks .wc-block-product-filter-checkbox-list__label {
  width: 100%;
  min-height: var(--wp--custom--touch--min-size);
  gap: var(--wp--preset--spacing--20);
  cursor: pointer;
}

.wp-site-blocks .wc-block-product-filter-checkbox-list__input-wrapper {
  font-size: var(--wp--preset--font-size--large);
}

.wp-site-blocks .wc-block-product-filter-checkbox-list__text-wrapper {
  font-size: var(--wp--preset--font-size--medium);
  gap: var(--wp--preset--spacing--10);
}

.wp-site-blocks .wc-block-product-filter-checkbox-list__count {
  color: var(--wp--preset--color--muted);
}

.wp-site-blocks .wc-block-product-filter-checkbox-list input.wc-block-product-filter-checkbox-list__input:focus-visible {
  outline: 3px solid var(--wp--preset--color--primary);
  outline-offset: 2px;
}

.wp-site-blocks .wc-block-product-filter-checkbox-list__show-more-button {
  min-height: var(--wp--custom--touch--min-size);
  font-size: var(--wp--preset--font-size--medium);
  color: var(--wp--preset--color--accent);
}

/* Aktive Filter: eigene Instanz des Filterblocks mit showFilterDrawer false (Pattern
   nextamed/shop-filter). Sie steht immer sichtbar zwischen Ergebniszahl und Raster; vorher lagen
   Chips und Ruecksetzknopf in der Schublade und waren auf dem Handy nach der Auswahl unsichtbar
   (Prueferbefund 13.09.: 0 sichtbare Chips, aus 13 Artikeln wurden 3 ohne erkennbaren Grund).
   Ohne aktiven Filter versteckt WooCommerce den inneren Block mit dem Attribut hidden; dann faellt
   die ganze Gruppe samt Ueberschrift weg. Browser ohne :has() zeigen die Ueberschrift allein. */
.wp-site-blocks .wc-block-product-filters.nxm-filter-aktiv:has(.wp-block-woocommerce-product-filter-active[hidden]) {
  display: none;
}

.wp-site-blocks .nxm-filter-aktiv .wp-block-woocommerce-product-filter-active {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--wp--preset--spacing--20);
}

/* Chips der aktiven Filter: weisser Grund mit Rahmen, damit sie nicht wie die grauen
   Kategorie-Pillen aussehen (gleiche Form, zwei Bedeutungen war ein Prueferbefund). Entfernen-Knopf
   44 px (aria-label kommt von WooCommerce). */
.wp-site-blocks .wc-block-product-filter-removable-chips__items {
  gap: var(--wp--preset--spacing--20);
}

.wp-site-blocks .wc-block-product-filter-removable-chips__items .wc-block-product-filter-removable-chips__item {
  min-height: var(--wp--custom--touch--min-size);
  padding: 0 0 0 var(--wp--preset--spacing--30);
  gap: var(--wp--preset--spacing--10);
  background: var(--wp--preset--color--base);
  border: 1px solid var(--wp--preset--color--line-strong);
  border-radius: var(--wp--custom--radius--small);
  font-size: var(--wp--preset--font-size--medium);
}

.wp-site-blocks .wc-block-product-filter-removable-chips__items .wc-block-product-filter-removable-chips__item .wc-block-product-filter-removable-chips__remove {
  min-width: var(--wp--custom--touch--min-size);
  min-height: var(--wp--custom--touch--min-size);
  justify-content: center;
  border-radius: var(--wp--custom--radius--small);
  cursor: pointer;
}

/* Preis: zwei Zeilen unter dem Schieber, links "von", rechts "bis". Die Beschriftungen stehen als
   CSS-Inhalt, weil der Block nur zwei Felder mit aria-label rendert und im Theme kein eigenes
   Markup moeglich ist (kein core/html); ohne sie muss der Kunde raten, welches Feld die Untergrenze
   ist (Prueferbefund 13.09.). Griffe: Trefferflaeche touch.minSize, optisch ein 22-px-Punkt aus
   einem Farbverlauf, damit das Ziel gross und der Griff ruhig bleibt. */
.wp-site-blocks .wc-block-product-filter-price-slider {
  --wc-product-filter-price-slider: var(--wp--preset--color--primary-dark);
  --wc-product-filter-price-slider-handle: var(--wp--preset--color--base);
  --wc-product-filter-price-slider-handle-border: var(--wp--preset--color--primary-dark);
}

.wp-site-blocks .wc-block-product-filter-price-slider__range input[type="range"]::-webkit-slider-thumb {
  width: var(--wp--custom--touch--min-size);
  height: var(--wp--custom--touch--min-size);
  margin: calc(var(--wp--custom--touch--min-size) / -2) 0 0;
  border: 0;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    var(--wp--preset--color--base) 0 9px,
    var(--wp--preset--color--primary-dark) 9px 11px,
    transparent 11px);
}

.wp-site-blocks .wc-block-product-filter-price-slider__range input[type="range"]::-moz-range-thumb {
  width: var(--wp--custom--touch--min-size);
  height: var(--wp--custom--touch--min-size);
  border: 0;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    var(--wp--preset--color--base) 0 9px,
    var(--wp--preset--color--primary-dark) 9px 11px,
    transparent 11px);
}

.wp-site-blocks .wc-block-product-filter-price-slider__content {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas: "price-slider price-slider" "left-input right-input";
  column-gap: var(--wp--preset--spacing--20);
  row-gap: var(--wp--preset--spacing--30);
}

.wp-site-blocks .wc-block-product-filter-price-slider__left,
.wp-site-blocks .wc-block-product-filter-price-slider__right {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--10);
}

.wp-site-blocks .wc-block-product-filter-price-slider__left::before {
  content: "von";
}

.wp-site-blocks .wc-block-product-filter-price-slider__right::before {
  content: "bis";
}

.wp-site-blocks .wc-block-product-filter-price-slider__left::before,
.wp-site-blocks .wc-block-product-filter-price-slider__right::before {
  color: var(--wp--preset--color--contrast);
  font-size: var(--wp--preset--font-size--small);
  font-weight: 600;
  line-height: 1.2;
}

.wp-site-blocks .wc-block-product-filter-price-slider .text input[type="text"] {
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  min-height: var(--wp--custom--touch--min-size);
  padding: 0 var(--wp--preset--spacing--20);
  border: 1px solid var(--wp--preset--color--line-strong);
  border-radius: var(--wp--custom--radius--small);
  background: var(--wp--preset--color--base);
  color: var(--wp--preset--color--contrast);
  font-size: var(--wp--preset--font-size--medium);
}

/* Ohne Treffer und ohne aktive Filter verstecken sich alle Filtergruppen selbst; dann faellt die
   Spalte weg. Browser ohne :has() zeigen nur die Ueberschrift "Filter". */
.wp-site-blocks .nxm-shop:has(.wp-block-woocommerce-product-collection-no-results):has(.wp-block-woocommerce-product-filter-active[hidden]) > .nxm-shop__filter {
  display: none;
}

/* Keine Ueberschrift ohne Inhalt: der Kategorien-Block gibt nichts aus, wenn es keine sichtbare
   Kategorie mit Produkten gibt (dann fehlt das Element ganz). Ohne diese Regel stuende im
   Leerzustand der Suche eine Einladung "Oder stoebern Sie in unseren Kategorien" ohne einen
   einzigen Link darunter, und auf einer Endkategorie die Ueberschrift "Weiter in ..." ohne Chips.
   Browser ohne :has() zeigen die Ueberschrift allein. */
.wp-site-blocks .nxm-suche-leer__kategorien:not(:has(.wc-block-product-categories)),
.wp-site-blocks .nxm-kopfzeile__kategorien:not(:has(.wc-block-product-categories)) {
  display: none;
}

/* Leerzustand der Suche: Suchfeld mit sichtbarem Label, Feld und Knopf 48 px hoch; unter 600 px
   steht der Knopf unter dem Feld. */
.wp-site-blocks .nxm-suche-leer .wp-block-search__label {
  display: block;
  margin-bottom: var(--wp--preset--spacing--10);
  font-weight: 600;
}

.wp-site-blocks .nxm-suche-leer .wp-block-search__input {
  min-height: var(--wp--custom--button--min-height);
  padding: 0 var(--wp--preset--spacing--30);
  border: 1px solid var(--wp--preset--color--line-strong);
  border-radius: var(--wp--custom--radius--small);
  background: var(--wp--preset--color--base);
  color: var(--wp--preset--color--contrast);
  font-size: var(--wp--preset--font-size--medium);
}

.wp-site-blocks .nxm-suche-leer .wp-block-search__button {
  min-height: var(--wp--custom--button--min-height);
  margin-left: var(--wp--preset--spacing--20);
}

@media (max-width: 599px) {
  .wp-site-blocks .nxm-suche-leer .wp-block-search__inside-wrapper {
    flex-wrap: wrap;
    gap: var(--wp--preset--spacing--20);
  }

  .wp-site-blocks .nxm-suche-leer .wp-block-search__input {
    flex-basis: 100%;
  }

  .wp-site-blocks .nxm-suche-leer .wp-block-search__button {
    width: 100%;
    margin-left: 0;
  }
}

/* Leere Kaesten nehmen keinen Platz: auf einer Suche ohne Treffer rendert WooCommerce die
   Ergebniszahl als leeres div und gar kein Sortierfeld, und die Hinweise (store-notices) sind ein
   leerer Kasten. Beide erzeugten im Fluss trotzdem ihren Abstand und liessen zwischen H1 und
   "Dazu haben wir leider nichts gefunden." rund 90 px Leere. Browser ohne :has() zeigen die
   Leere wie bisher. */
.wp-site-blocks .wp-block-woocommerce-product-results-count:empty {
  display: none;
}

.wp-site-blocks .nxm-kopfzeile__leiste:not(:has(select)):has(.wp-block-woocommerce-product-results-count:empty) {
  display: none;
}

.wp-site-blocks .wp-block-woocommerce-store-notices:has(.woocommerce-notices-wrapper:empty) {
  display: none;
}

/* Kategorietext unter der Liste: ohne Beschreibung bleibt nur die Ueberschrift, dann ganz weg. */
.wp-site-blocks .nxm-kategorietext:not(:has(.wp-block-term-description p)):not(:has(.wp-block-term-description *)) {
  display: none;
}

:root :where(.nxm-kategorietext .wp-block-term-description) {
  max-width: var(--wp--style--global--content-size);
}

/* Die Texte des alten Shops kommen als rohes HTML (p, h2 bis h5, ul, ol, table), nicht als Bloecke;
   den Abstand zwischen den Absaetzen setzt deshalb kein Block-Layout. Bis zum 05.10.2026 fiel das
   nicht auf, weil die Gliederung beim Speichern verloren ging (P-406). Der Kern setzt
   `.wp-block-term-description p { margin-top: 0 }`; diese Regeln brauchen deshalb echtes Gewicht
   statt :where() (gemessen: mit :where() blieb der Abstand 0). */
.nxm-kategorietext .wp-block-term-description > * + * {
  margin-block-start: var(--wp--preset--spacing--20);
}

.nxm-kategorietext .wp-block-term-description > :is(h2, h3) {
  margin-block: var(--wp--preset--spacing--40) var(--wp--preset--spacing--20);
  font-size: var(--wp--preset--font-size--medium);
  font-weight: 600;
}

.nxm-kategorietext .wp-block-term-description > :is(h4, h5) {
  margin-block: var(--wp--preset--spacing--30) var(--wp--preset--spacing--10);
  font-size: inherit;
  font-weight: 600;
}

.nxm-kategorietext .wp-block-term-description > :first-child {
  margin-block-start: 0;
}

:root :where(.nxm-kategorietext .wp-block-term-description ul),
:root :where(.nxm-kategorietext .wp-block-term-description ol) {
  padding-left: var(--wp--preset--spacing--40);
}

/* Aufklappbare Filtergruppen (core/details im Baustein nextamed/shop-filter, 14.09.2026).
   Vorher stand die Spalte auf der Shopseite 7.000 px hoch da: 18 Gruppen mit 140 Kaestchen, alle
   offen. Jetzt ist jede Gruppe ein Klickziel von mindestens touch.minSize mit einem Pfeil, der sich
   dreht; Marke ist offen, die Eigenschaften sind zu, und wer in einer Gruppe filtert, bekommt sie
   offen geliefert (Pattern liest filter_<name> aus der Adresse).
   Dieselbe Formensprache wie die Abschnitte der Produktseite (assets/css/produkt-detail.css), damit
   Aufklappen im ganzen Shop gleich aussieht. Pseudo-Elemente stehen HINTER :where(), sonst ist die
   Regel ungueltig. */
:root :where(.nxm-filter-gruppen .nxm-filter-klapp) {
  border-bottom: 1px solid var(--wp--preset--color--line);
  margin-block: 0;
}

:root :where(.nxm-filter-gruppen .nxm-filter-klapp > summary) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wp--preset--spacing--20);
  min-height: var(--wp--custom--touch--min-size);
  padding-block: var(--wp--preset--spacing--20);
  font-size: var(--wp--preset--font-size--medium);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

:root :where(.nxm-filter-gruppen .nxm-filter-klapp > summary)::-webkit-details-marker {
  display: none;
}

:root :where(.nxm-filter-gruppen .nxm-filter-klapp > summary)::after {
  content: "";
  width: 0.625rem;
  height: 0.625rem;
  border-right: 2px solid var(--wp--preset--color--primary-dark);
  border-bottom: 2px solid var(--wp--preset--color--primary-dark);
  transform: rotate(45deg);
  transition: transform var(--wp--custom--transition);
  flex: none;
}

:root :where(.nxm-filter-gruppen .nxm-filter-klapp[open] > summary)::after {
  transform: rotate(-135deg);
}

:root :where(.nxm-filter-gruppen .nxm-filter-klapp > summary:hover) {
  color: var(--wp--preset--color--primary-dark);
}

:root :where(.nxm-filter-gruppen .nxm-filter-klapp > *:not(summary)) {
  margin-block: 0 var(--wp--preset--spacing--30);
}

/* Eine Gruppe ohne Treffer rendert nichts; dann darf auch die Klappe nicht stehen bleiben.
   Gemessen auf Produktion: in der Kategorie "Basische Produkte" betrifft das fuenf der
   achtzehn Gruppen (Edelsteine, Koerperfitness, Praevention, VitaJuwel, Zahnpflege). */
.wp-site-blocks .nxm-filter-gruppen .nxm-filter-klapp:not(:has(input)) {
  display: none;
}

/* Kategorietexte des alten Shops koennen Tabellen enthalten; sie rollen in sich, nicht die Seite. */
:root :where(.nxm-kategorietext table) {
  display: block;
  width: fit-content;
  max-width: 100%;
  overflow-x: auto;
}