/** Shopify CDN: Minification failed

Line 1207:49 Unexpected "}"

**/
/* ==========================================================================
   NHS Storefront — Farbrichtung 3A "Champagner-Messing" + Menü 5A (hell)

   Quelle:  theme-work/nhs/_design/3a-final/ (README, tokens-3a.css, groessen-referenz.md)
   Ziel:    Theme "Racing Green & Champagner" (203353981268, unpublished)
   Deploy:  scripts/_nhs-theme/deploy-3a.mjs  →  assets/nhs-3a.css
   Geladen NACH theme.css (layout/theme.liquid) — nie IN die 740-KB-Datei schreiben (K111).

   WARUM !important auf Groessen (und NICHT auf Farben):
   Das Theme legt Werte an drei Orten ab. Nur Farben laufen ueber CSS-Variablen und
   reagieren auf :root. Groessen stehen (a) in Section-<style>-Bloecken im <body> —
   also NACH jedem Stylesheet — und (b) hart in theme.css, viele in @media.
   Ohne !important gewinnen sie still. Genau daran ist der erste Durchlauf gescheitert.

   ABWEICHUNGEN von tokens-3a.css sind Absicht: Ein Teil der dortigen Selektoren
   existiert in diesem Theme nicht (geprueft gegen das echte DOM). Wo das der Fall ist,
   steht hier der belegte Klassenname; die tote Variante ist im Kommentar vermerkt.
   ========================================================================== */

/* 05.10.2026 (CEO): Flaeche WEISS statt Elfenbein #f8f6f0. Grund: alle Packshots stehen auf
   #f7f7f7 (30 Artikel gemessen, work/nhs-3a/foto-hintergrund.json) — das warme Elfenbein stach
   dagegen ab. Neutral sind jetzt Flaeche, Hairlines, Karten, Platzhalter (= #f7f7f7) und der
   Outline-Rand; Champagner/Messing/warmes Hell bleiben NUR auf Gruen (Footer, Versand-Bar, Schild).
   Kommentare weiter unten, die „Elfenbein" sagen, beschreiben den Stand davor. */
:root {
  /* --- Flächen ---------------------------------------------------------- */
  --colorBody:                  #ffffff;
  --colorBodyAlpha05:           rgba(255, 255, 255, 0.05);
  --colorBodyDim:               #f0f0f0;
  --colorBodyLightDim:          #fafafa;
  --colorBodyMediumDim:         #f3f3f3;
  --colorSmallImageBg:          #f7f7f7;   /* = Packshot-Grund (30 Artikel gemessen 05.10.2026) */
  --colorLargeImageBg:          #093425;
  --colorCard:                  #ffffff;

  /* --- Ink & Rahmen ----------------------------------------------------- */
  --colorTextBody:              #093425;
  --colorBorder:                #e3e3e3;
  --colorHairline:              #ececec;

  /* --- Akzent ----------------------------------------------------------- */
  --colorLink:                  #7a5f2c;   /* 6,0:1 auf Weiss — Linkfarbe fuer Kleintext */
  --colorLinkHover:             #5e4820;
  --colorBrass:                 #9a7b3f;   /* Deko, Icons, Rahmen, Text ab 18px */
  --colorChampagne:             #d9c79a;   /* nur auf dunkelgruenem Grund */
  --colorTextMuted:             #6f7268;   /* Sekundaertext < 16px, 4,5:1 */
  --colorTextMutedLarge:        #8a897e;   /* rein dekorativ */

  /* --- Navigation & Bars ------------------------------------------------ */
  --colorNav:                   #ffffff;
  --colorNavText:               #093425;
  --colorAnnouncement:          #093425;
  --colorAnnouncementText:      #e8e3d5;

  /* --- Buttons ---------------------------------------------------------- */
  --colorBtnPrimary:            #093425;
  --colorBtnPrimaryLight:       #14503a;
  --colorBtnPrimaryDim:         #06251a;
  --colorBtnPrimaryText:        #ffffff;
  --colorBtnOutlineBorder:      #b5c0ba;   /* Racing-Green-Grau statt warmem Beige (05.10.2026) */

  /* --- Preise & Merchandising ------------------------------------------- */
  --colorPrice:                 #093425;
  /* 30.09.2026: war #a9a79b (Handoff) = 2,24:1 auf Elfenbein — fiel erst auf, als mit dem
     Herbst-Restgroessen-Sale (25.09.) wieder Streichpreise im Shop standen. Streichpreise sind
     Pflichtinhalt (Vergleichspreis), keine Deko ⇒ Sekundaertext-Grau, 4,54:1. Rueckweg: #a9a79b. */
  --colorPriceOriginal:         #6f7268;
  --colorTextSavings:           #7a5f2c;
  --colorSaleTag:               #7a5f2c;   /* GEFUELLT — Weiss darauf 6:1 */
  --colorSaleTagText:           #ffffff;
  --colorSoldOutVeil:           rgba(9, 52, 37, 0.86);
  --colorCartDot:               #9a7b3f;

  /* --- Drawer: MENUE hell (5A) ------------------------------------------ */
  --colorDrawers:               #ffffff;
  --colorDrawersDim:            #f0f0f0;
  --colorDrawerBorder:          #e3e3e3;
  --colorDrawerText:            #093425;
  --colorDrawerTextDark:        #06251a;
  --colorDrawerButton:          #093425;
  --colorDrawerButtonText:      #ffffff;
  --colorModalBg:               rgba(6, 37, 26, 0.6);

  /* --- Cart-Drawer 5C: hell wie das Menue (Handoff V2, 11.09.2026) ------
     Die frueheren Tokens --colorCartDrawer/-Text/-Border sind ERSATZLOS weg:
     Menue, Suche und Warenkorb sind jetzt alle hell, damit entfaellt der
     Sonderfall. Grund laut Vorlage: Das Warenkorb-Panel ist hoch und meist
     nur zu einem Viertel gefuellt — dort wird das Gruen zur Wand, genau wie
     vorher im Menue. Gruen traegt im Drawer nur noch der Kauf-Knopf. */
  --colorDrawerLink:            #7a5f2c;
  --colorDrawerTextMuted:       #6f7268;
  --colorDrawerSurface:         #f7f7f7;

  /* --- Footer ----------------------------------------------------------- */
  --colorFooter:                #093425;
  --colorFooterText:            #e0dcd0;
  --colorFooterHeading:         #d9c79a;

  /* --- Overlays --------------------------------------------------------- */
  --colorHeroText:              #ffffff;
  --colorGridOverlay:           #093425;
  --colorGridOverlayOpacity:    0.06;
  --colorImageOverlay:          #06251a;
  --colorImageOverlayOpacity:   0.12;

  /* --- Typo ------------------------------------------------------------- */
  --typeBaseSize:               13px;   /* CEO 11.09.: eine Stufe kleiner */
  --typeBaseLineHeight:         1.6;
  --typeBaselineHeightMinus01:  1.5;
  --typeHeaderSize:             40px;   /* Hero bleibt gross */
  --typeCollectionTitle:        15px;

  --element-text-font-size--body-xs:  10.5px;
  --element-text-font-size--body-sm:  12px;
  --element-text-font-size--body-md:  13px;
  --element-text-font-size--body-lg:  16px;
  --element-text-line-height--body:   1.6;
  --element-text-font-size--heading-2xl: 44px;
  --element-text-font-size--heading-xl:  30px;
  --element-text-font-size--heading-lg:  24px;
  --element-text-font-size--heading-md:  20px;
  --element-text-font-size--heading-sm:  17px;
  --element-text-font-size--heading-xs:  15px;
  --element-button-radius:         0;     /* CEO 11.09.: kantig statt Pille */
  --element-button-font-size:      10.5px;
  --element-button-font-weight:    600;
  --element-button-letter-spacing: .16em;
  --element-button-text-transform: uppercase;
  --element-input-font-size:       11.5px;

  --color-body-text:      #093425;
  --color-body:           #ffffff;
  --color-bg:             #ffffff;
  --root-color-primary:   #093425;
  --color-primary:        #093425;
  /* ⚠️ Die Vorlage widerspricht sich hier selbst: `tokens-3a.css` Zeile 142 f. setzt
     `--color-sale-tag: transparent` + Ink #093425 (also Outline), Zeile 286 derselben Datei
     schreibt dagegen `background: var(--colorSaleTag)` mit dem Kommentar "GEFUELLT — nicht
     Outline", und Zeile 61 setzt `--colorSaleTag: #7a5f2c`. README §5.3 und tokens.json
     sagen ebenfalls gefuellt (#7a5f2c auf Weiss, 6:1 — auf hellen Produktfotos ist Outline
     zu leise). Aufgeloest zugunsten "gefuellt". */
  --color-sale-tag:       #7a5f2c;
  --color-sale-tag-text:  #ffffff;
}

/* ==========================================================================
   1 — HEADER-GEOMETRIE   (Kopfzone 92 → 78 px)
   ========================================================================== */
/* 🔴 CEO 11.09.2026: „zu duenn und zu schmal — wieder auf die Proportion des vorherigen Shops,
   mehr Praesenz, aber exakt hochwertig und ruhig, nicht unnoetig gross."
   Original (MAIN): 14px Schrift, Polsterung 8px 0 ⇒ ~34px hoch.
   3A-Fassung bis 11.09.: 11px / 7px 0 ⇒ 28px — die vom CEO bemaengelte duenne Leiste.
   Fassung vom Vormittag: 12px / 10px 0 ⇒ ~36px.
   🔴 NACHTRAG CEO 11.09.2026, nachmittags: „die Schrift oben im Banner bitte etwas kleiner."
   Jetzt: **11px / 11px 0 ⇒ weiterhin ~36px.** Die Schrift geht eine Stufe zurueck, die
   HOEHE bleibt — genau das war der Wunsch von heute frueh („mehr Praesenz, aber ruhig").
   Deshalb waechst die Polsterung um denselben Betrag, um den die Zeilenbox schrumpft
   (12px × 1,3 ≈ 16px → 11px × 1,3 ≈ 14px, also je 1px oben und unten mehr).
   Wer hier weiter verkleinert, muss die Polsterung erneut nachziehen, sonst faellt die
   Leiste auf die duenne Fassung von gestern zurueck, die der CEO bemaengelt hatte.
   Bewusst NICHT zurueck auf 14px (Original-MAIN): Die Bar traegt .14em Sperrung in
   Grossbuchstaben und wirkt damit lauter als Original-Fliesstext derselben Groesse. */
.announcement-bar {
  background: var(--colorAnnouncement);
  color: var(--colorAnnouncementText);
  padding: 11px 0 !important;
  border-bottom: 0;
}
/* .announcement-bar__message/-__link gibt es hier NICHT — die Bar ist eine Slideshow. */
.announcement-bar,
.announcement-bar a,
.announcement-bar p,
.announcement-bar .slideshow-wrapper {
  font-size: 11px !important;   /* CEO 11.09. nachmittags: eine Stufe kleiner (war 12px) */
  letter-spacing: .14em;
  text-transform: uppercase;
  line-height: 1.3;
}
@media only screen and (max-width: 768px) {
  .announcement-bar { padding: 9px 0 !important; }
  /* 10px statt 11px (Handoff V2). ⚠️ Die Schriftgroesse allein macht die Bar NICHT
     einzeilig: Der aktuelle Satz hat 78 Zeichen und braucht bei 10px mit .14em
     Sperrung rund 580px — das Handy hat 390. Einzeilig wird die Bar erst mit dem
     kuerzeren Wortlaut der Vorlage („Kostenloser Versand ab 150 € — DE · AT · CH",
     40 Zeichen). Der Text steht in den Section-Settings, nicht hier. */
  .announcement-bar,
  .announcement-bar a,
  .announcement-bar p,
  .announcement-bar .slideshow-wrapper { font-size: 10px !important; }
}

/* Die Anleitung nennt zwei Werte, die sich hier widersprechen: Polsterung `10px 0` UND
   Kopfhoehe 48 px. Beides ginge nur bei einem 28 px hohen Logo — im Shop rendert die
   Kopfzeile aber 35 px Inhalt (Logo 44x35, Navigation und Icons ebenso hoch).
   10 px Polster ergaeben 55 px. Massgeblich ist die sichtbare Zielhoehe, deshalb 7 px:
   35 + 14 = 49 px Kopf + 30 px Bar = 79 px Kopfzone — die in der Anleitung genannten 78 px. */
.site-header { padding: 7px 0 !important; }
.header-wrapper:not(.is-light) .site-header {
  background: var(--colorNav);
  border-bottom: 1px solid var(--colorBorder);
}
/* Der Wrapper zieht eine ZWEITE Linie in hartem Fast-Weiss (`#edeae9`), direkt unter der
   Haarlinie des Headers — zusammen ergab das den hellen Doppelstrich unter dem Kopf. */
.header-sticky-wrapper { border-bottom: 0 !important; }
.toolbar + .header-sticky-wrapper .site-header { border-top: 0 !important; }

/* Die Inhaltsflaeche stand auf hartem Weiss und stach gegen das Elfenbein ab. */
.main-content { background-color: var(--colorBody) !important; }
/* 30.09.2026: Ausnahme Gutscheinseite (CEO-Design 26.09., gebaut auf WEISS). Ihre Flaechen
   (`.nhs-gc__frame` #f4f2f1, weisse Schritte) und der Grautext `#8a6f68` sind auf Weiss abgestimmt —
   auf Elfenbein gemessen 4,27:1 (unter AA) und der Bildrahmen verschwindet. Details Abschnitt 13.
   05.10.2026: Die Flaeche ist seither shopweit Weiss — die Regel bleibt als Netz, eine Ausnahme ist sie nicht mehr. */
.main-content:has(.nhs-gc) { background-color: #ffffff !important; }

/* Logo — Section-Setting ist gesetzt (44/50), das hier ist das Netz darunter. */
.site-header__logo a { width: 50px !important; }
@media only screen and (min-width: 769px) {
  .site-header__logo a { width: 44px !important; }
}

/* Navigation: sections/header.liquid schreibt einen <style>-Block NACH dieser Datei. */
.site-nav__link,
.site-nav a {
  font-size: 12.5px !important;
  letter-spacing: .06em;
  color: var(--colorNavText);
}
@media only screen and (min-width: 960px) {
  .site-nav__item > .site-nav__link { padding: 0 12px !important; }
}
/* 16.10.2026: Hover-Farbe nur fuer Geraete mit echtem Zeiger. Auf Touch bleibt `:hover` nach dem
   Antippen haengen — das X des geoeffneten Menues stand dadurch auf Handy und Tablet in Messing
   neben gruenen Icons (menue-pruefung.mjs, Regel D). */
@media (hover: hover) {
  .site-nav__link:hover { color: var(--colorLink); }
}

/* Icons und ihre Abstaende */
.site-nav__link--icon { padding-left: 9px !important; padding-right: 9px !important; }
.site-nav__link--icon .icon { height: 18px !important; width: 18px !important; }

/* Zaehler-Bubble an Wunschliste und Warenkorb.
   ⚠️ `.wishlist-count` und `.iwishcount` kommen im Theme NICHT vor (0 Treffer) —
   sie standen hier, ohne je zu greifen. Der echte Traeger des Wunschlisten-
   Zaehlers heisst `.iwish-counter` (theme.css 7141). */
.cart-link__bubble,
.iwishDrawer .iwish-counter,
.iwish-counter {
  min-width: 16px !important;
  height: 16px !important;
  font-size: 9px !important;
  line-height: 16px !important;
  background: var(--colorCartDot) !important;
  color: #fff !important;
  border-radius: 0 !important;   /* Theme: 100% — Handoff V2: alles eckig */
}

/* Utility-Zeile. .currency-selector / .site-header__utility existieren hier nicht —
   die echten Traeger tragen zwei Tippfehler aus dem Theme ("contry", "globle"). */
.site-nav__icons .country-selector__content,
.site-nav__icons .content-title,
.site-nav__icons .country-selector__title,
.faux-select.disclosure__toggle,
.disclosure__toggle {
  font-size: 10.5px !important;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--colorTextMuted);
}

/* ==========================================================================
   2 — TYPO
   ========================================================================== */
body, .rte, .rte p { font-size: 13px; line-height: 1.6; }

/* Kollektion: Filter und Sortierung */
.collection-filter,
.collection-filter__item,
.collection-filter__sort-container,
.collection-filter select,
select.filter-select,
.filter-form.custom_filter {
  font-size: 11.5px !important;
  color: var(--colorTextBody);
  border-color: var(--colorBorder);
}
/* 05.10.2026: Die Filterzeile ist `position: sticky` (theme.css) und klebt beim Scrollen unter der
   Kopfzeile. Der Weiss-Sweep vom 10.09. hatte sie TRANSPARENT gesetzt — auf Elfenbein unauffaellig,
   aber sobald sie klebt, scrollten die Kacheln sichtbar durch Zeile und Groessen-Auswahl hindurch
   (mobil gemessen, /collections/all ab 420 px Scroll). Deckend in Flaechenfarbe, inkl. der Selects. */
.collection-filter { background-color: var(--colorBody) !important; }
.collection-filter select,
select.filter-select { background-color: var(--colorBody) !important; }
.collection-filter a { color: var(--colorLink); }
.collection-filter a:hover { color: var(--colorLinkHover); }

/* Sortier-Auswahl rechts: Das Theme gibt ihr 48 px Hoehe, 16 px Schrift und weisse Flaeche
   (`.select-menu .select-btn`) — neben der 12-px-Filterzeile wirkte sie wie aus einem anderen
   Shop. Auch das Label "Sort by:" stand auf 16 px. */
.select-menu .select-btn {
  height: 34px !important;
  min-height: 34px !important;
  padding: 6px 12px !important;
  font-size: 11.5px !important;
  background: var(--colorCard) !important;
  border: 1px solid var(--colorBorder) !important;
  color: var(--colorTextBody);
}
.select-menu .options {
  background: var(--colorCard) !important;
  border: 1px solid var(--colorBorder) !important;
  font-size: 11.5px !important;
  padding: 6px 12px !important;
}
.select-menu .options li,
.select-menu .options a { font-size: 11.5px !important; color: var(--colorTextBody); }
.collection-filter__sort-container label,
.collection-filter__item label { font-size: 11.5px !important; color: var(--colorTextMuted); }
.tag-list--active-tags a,
.collection-filter__item--sort .faux-select {
  border-bottom: 1px solid var(--colorChampagne);
  padding-bottom: 2px;
}
/* Die Kategorie-Leiste ueber dem Raster (`.collection-menu`) ist KEIN Tag-Filter, sondern eine
   Liste von Unterkollektionen; der aktive Eintrag traegt `current-link`. Das Theme unterstreicht
   ihn mit seiner animierten 2px-Linie in `--colorDrawerText` (Racing Green). Die Vorgabe (§6
   Kollektion) verlangt fuer den aktiven Filter einen CHAMPAGNER-Unterstrich; Hover in Messing wie
   bei jedem anderen Link. Gemessen 11.09.2026: aktiv gruen, daher hier umgefaerbt. */
.collection-menu a.current-link::after { background: var(--colorChampagne) !important; }
.collection-menu a:hover::after { background: var(--colorBrass) !important; }

/* Produktkarte */
.grid-product__title {
  font-size: 11px !important;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--colorTextBody);
}
@media only screen and (max-width: 768px) {
  .grid-product__title { font-size: 11px !important; }
}
.grid-product__link:hover .grid-product__title { color: var(--colorLink); }
.grid-product__price {
  font-size: 11px !important;
  letter-spacing: .04em;
  color: var(--colorPrice);
}
.grid-product__price--original {
  margin: 0 0 0 6px !important;
  font-size: 11px !important;
  text-decoration: line-through;
  -webkit-text-decoration: line-through;
  color: var(--colorPriceOriginal) !important;
}
/* Auf der Detailseite heisst es .product__price-savings (Bindestrich, nicht --). */
.grid-product__price--savings,
.product__price-savings {
  font-size: 10px !important;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--colorTextSavings) !important;
}
.grid-product__image-mask { background: var(--colorSmallImageBg); }
/* 05.10.2026: Mobil zeigt jede Kachel links eine 1 Geraetepixel breite dunkle Linie — der halbe
   Pixel des VORHERIGEN Flickity-Slides (Kachel 171,5 px breit, Slide bei -171,5 px endet auf einer
   halben Geraetepixel-Grenze). Gemessen (work/nhs-3a/_kachelrand2.mjs): Spalte 47 statt 247, weg nur
   mit Slider-Clip; MAIN hat die Linie genauso. Der 1-px-Clip ist unsichtbar, darunter liegt die
   Kachelflaeche in derselben Farbe. */
.grid-product__image-mask .flickity-viewport { clip-path: inset(0 1px); }

/* Groessen-Leiste beim Ueberfahren der Karte.
   Im Theme: `span[disabled]{opacity:.5}` plus ein Schraegstrich in `var(--colorBorder)`.
   Seit die Border-Variable die helle Haarlinie ist, war der Strich praktisch unsichtbar und
   die ausverkaufte Groesse nur noch blass — beides zusammen nicht erkennbar.
   Bewusste Abweichung von der Vorlage (`#c3c1b6` erreicht nur 1,9:1): volle Deckkraft,
   gedaempftes Gruen mit 4,5:1 und ein Strich in Messing, der wirklich zu sehen ist. */
.grid-product__size-swatches { background: var(--colorCard) !important; }
.grid-product__size-swatches span {
  font-size: 11px !important;
  letter-spacing: .10em;
  color: var(--colorTextBody);
}
.grid-product__size-swatches span[disabled] {
  opacity: 1 !important;
  color: var(--colorTextMuted) !important;
}
.grid-product__size-swatches span[disabled]:after {
  border-color: var(--colorBrass) !important;
  border-left-width: 1.5px !important;
}

/* ==========================================================================
   3 — BADGES: gefuellt statt Outline; "Sold out" AUF dem Bild
   Das Theme setzt am --sold-out-Band ein berechnetes `inset` (gemessen 476px),
   wodurch es unter das Bild rutscht. Deshalb hier mit !important zurueckholen.
   ========================================================================== */
.grid-product__tag,
.grid-product__tag--sale {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase;
  background: var(--colorSaleTag) !important;
  color: var(--colorSaleTagText) !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 4px 10px !important;
}
/* Das Band haengt als GESCHWISTER des Bild-Wrappers direkt im .grid-product__content —
   und der umfasst Bild UND Titelblock. `bottom: 0` landet deshalb zwangslaeufig unter dem
   Bild (live gemessen: Bild endet bei 3521, Band sass bei 3532).
   🔴 Der frueher hier stehende feste Offset von unten (`bottom: var(--nhsMetaH)`, 34px
   Desktop / 30px mobil) trifft nur, solange der Titelblock ueberall gleich hoch ist. Auf dem
   Handy ist er aber 54px (einzeiliger Titel) bzw. 70px (zweizeiliger) — gemessen 10.09.2026
   lagen ALLE drei ausverkauften Karten der Startseite mit 24px UNTER der Bildkante, das Band
   also auf dem Produkttitel. Desktop fiel es nicht auf, weil dort jeder Titel einzeilig ist
   (33px ~ 34px).
   Deshalb jetzt von OBEN gerechnet statt von unten: Das Bild ist immer `--nhsImageRatio`
   hoch — der Wert kommt aus dem Theme-Setting `product_grid_image_size` (portrait = 140%
   der Kartenbreite) und steht als `--grid-image-ratio` am Bild-Wrapper, den dieses Band als
   Geschwister aber nicht erbt. `margin-top` in Prozent bezieht sich auf die BREITE des
   Containers, trifft damit exakt die Bildunterkante; `translateY(-100%)` zieht das Band um
   die eigene Hoehe zurueck. Ergebnis: Unterkante sitzt auf der Bildkante, unabhaengig
   davon, wie hoch der Titelblock ist.
   ⚠️ Wird `product_grid_image_size` im Theme-Editor umgestellt, muss dieser Wert mit. */
.grid-product__content { --nhsImageRatio: 140%; }
.grid-product__content .grid-product__tag--sold-out,
.grid-product__tag.grid-product__tag--sold-out {
  position: absolute !important;
  top: 0 !important;
  bottom: auto !important;
  margin-top: var(--nhsImageRatio) !important;
  transform: translateY(-100%) !important;
  left: 0 !important;
  right: 0 !important;
  background: var(--colorSoldOutVeil) !important;
  color: #e8e3d5 !important;
  border: 0 !important;
  text-align: center !important;
  padding: 6px !important;
}

/* ==========================================================================
   4 — BUTTONS
   Genau EIN gefuellter Button pro Ansicht: der Haupt-CTA. Er heisst hier
   .add-to-cart bzw. .cart__checkout — .btn--primary sitzt nur im Hero.
   ========================================================================== */
/* 🔴 CEO 11.09.2026: alle Knoepfe eine Stufe kleiner und KANTIG statt Pille.
   ⚠️ Aktenvermerk: Die Rundung stammt NICHT aus der Farbrichtung — das Theme-Setting
   `button_style` steht auch im Original-MAIN auf „round" (--buttonRadius: 50px). Die eckige
   Form ist damit eine bewusste Abweichung vom bisherigen Shop, ausdruecklich so entschieden.
   Die Variable wird gleich mit umgestellt, damit auch Theme-Regeln greifen, die sie lesen.
   ⚠️ Die Wurzel ist das Theme-Setting `button_style: "round"` — es erzeugt nicht nur
   `--buttonRadius: 50px`, sondern auch einen `:root`-Block in `layout/theme.liquid`, der
   NACH dieser Datei laedt und `--element-button-radius`/`--element-icon-radius` wieder auf
   50px setzt. Deshalb wird das Setting seit 11.09.2026 in deploy-3a.mjs auf `square`
   gestellt; die Zeilen hier bleiben als Netz stehen. */
:root { --buttonRadius: 0 !important; }
/* Ausnahme Gutscheinseite: ihr Kaufknopf (CEO-Design 26.09.) ist ein `button[type=submit]` ohne
   `.btn` und traegt seine eigene Schrift (15px/700/.04em) — ohne Ausnahme schrumpfte er hier auf
   10,5px/600/.14em (gemessen 30.09., theme-vergleich.mjs).
   🔴 NUR mit `:where()`: ein nacktes `:not(.x)` hebt die Spezifitaet von (0,1,1) auf (0,2,1) und
   schlug damit `.btn.add-to-cart` (0,2,0) — Haupt-CTA und Kasse fielen auf 10,5px/600
   (abnahme-3a, 30.09.). `:where()` zaehlt 0. */
.btn,
button[type="submit"]:where(:not(.nhs-gc__cta)) {
  font-size: 10.5px !important;
  font-weight: 600 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase;
  border-radius: 0 !important;
  padding: 10px 22px;
}
@media only screen and (max-width: 768px) {
  .btn,
  button[type="submit"]:where(:not(.nhs-gc__cta)) { padding: 10px 18px; }
}
.btn--secondary,
.btn--tertiary {
  background: transparent;
  border: 1px solid var(--colorBtnOutlineBorder);
  color: var(--colorTextBody);
}
.btn--secondary:hover,
.btn--tertiary:hover {
  background: transparent;
  border-color: var(--colorBrass);
  color: var(--colorLink);
}

/* 🔴 CEO 11.09.2026: Haupt-CTA kompakter und kantig — „hochwertiger und kompakter, keine
   uebergrossen Call-to-Action-Elemente". Gegenueber der 3A-Vorgabe (12,5px / 17px 28px /
   Pille, Hoehe 54px) eine Stufe kleiner: 11,5px / 13px 24px / Radius 0 ⇒ Hoehe ~46px.
   Volle Spaltenbreite und Vollton bleiben — der Kaufknopf soll weiter der dominante sein. */
.product-form__cart-submit,
.btn.add-to-cart,
.add-to-cart,
.btn.cart__checkout,
.cart__checkout,
#AddToCart {
  width: 100% !important;
  display: block !important;
  background: var(--colorBtnPrimary) !important;
  border: 1px solid var(--colorBtnPrimary) !important;
  color: var(--colorBtnPrimaryText) !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase;
  padding: 13px 24px !important;
  border-radius: 0 !important;
}
.btn.add-to-cart:hover,
.add-to-cart:hover,
.btn.cart__checkout:hover,
.cart__checkout:hover,
#AddToCart:hover {
  background: var(--colorBtnPrimaryLight) !important;
  border-color: var(--colorBtnPrimaryLight) !important;
}
/* Gedrueckt (§4 "Aktiv / gedrueckt #06251a") — fehlte bis 11.09.2026 ganz; der Knopf blieb beim
   Klick auf der Hover-Farbe stehen. `:active` nach `:hover`, sonst gewinnt Hover waehrend des Drucks. */
.btn.add-to-cart:active,
.add-to-cart:active,
.btn.cart__checkout:active,
.cart__checkout:active,
#AddToCart:active {
  background: var(--colorBtnPrimaryDim) !important;
  border-color: var(--colorBtnPrimaryDim) !important;
}

/* Der Wunschlisten-Knopf der App (iwish) sass als ZWEITER gefuellter Knopf direkt neben
   dem Haupt-CTA: `.product-block.buy-button` ist ein Grid (Formular 541px + 4px Luecke +
   48px Knopf). Formregel 1 erlaubt genau EINEN gefuellten Knopf je Ansicht, Zweitaktionen
   laufen als Outline/Textlink. theme.css faerbt ihn hart in Marken-Braun rgb(73,41,34);
   Abschnitt 9 hatte daraus nur Racing Green gemacht — die Altfarbe war weg, der zweite
   Vollton-Knopf blieb. Jetzt: Outline wie jede andere Zweitaktion.
   Auf dem Handy nimmt er dem CTA 52 von 345px — genau die Breite, die das laengere
   Label mit Preis braucht (DE/FR/NL brachen sonst auf zwei Zeilen um). Deshalb rutscht
   er dort unter den CTA (Grid einspaltig) statt daneben. */
/* 🔴 CEO 11.09.2026: „gruener Hintergrund mit weissem Herz kann erhalten bleiben — wichtig ist,
   dass der Knopf optisch EXAKT zur Form und Hoehe des Warenkorb-Knopfes passt. Beide sollen
   zusammen wie ein einheitliches Interface-Element wirken."
   Damit ist die Outline-Fassung vom 10.09. ueberholt: wieder Vollton-Gruen mit weissem Herz.
   Das sind bewusst zwei gefuellte Flaechen nebeneinander — sie werden hier als EIN Element
   gelesen (gleiche Farbe, gleiche Hoehe, gleiche Kante, 4px Spalt). Die Formregel „ein
   gefuellter Knopf je Ansicht" zielt auf KONKURRIERENDE Aktionen; das ist hier keine.
   Kante und Hoehe folgen dem CTA: Radius 0, dieselbe Polsterung oben/unten. */
.iwish-app-block-product.wishlist-icon {
  background: var(--colorBtnPrimary) !important;
  background-color: var(--colorBtnPrimary) !important;
  border: 1px solid var(--colorBtnPrimary) !important;
  border-radius: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.iwish-app-block-product.wishlist-icon:hover {
  background: var(--colorBtnPrimaryLight) !important;
  background-color: var(--colorBtnPrimaryLight) !important;
  border-color: var(--colorBtnPrimaryLight) !important;
}
.iwish-app-block-product.wishlist-icon .iwishOutline,
.iwish-app-block-product.wishlist-icon svg,
.iwish-app-block-product.wishlist-icon svg path {
  stroke: #ffffff !important;
  color: #ffffff !important;
}
/* 🔴 CEO 11.09.2026: „bei Merkliste im Produkt ist beim Herz noch so eine Umrandung,
   leicht hell — die muss weg."
   Sie kam aus der Regel DARUEBER: `stroke` ist ein VERERBBARES SVG-Attribut. Die Zeile
   `… wishlist-icon svg { stroke: #ffffff }` faerbt damit nicht nur den Herz-Pfad, sondern
   jedes Kind im SVG — und die Grafik der App enthaelt ein `<rect>` ueber die volle Flaeche
   (live gemessen: 24x24, exakt die SVG-Groesse). Das wurde als weisses Quadrat um das Herz
   sichtbar. Klassischer Fall von „eine Regel, drei Traeger": Der Fehler stand nicht IM
   Icon, sondern in unserer eigenen Faerbung eine Zeile darueber.
   Gegenprobe zu den naheliegenden Verdaechtigen — alle ausgeschlossen (gemessen in Ruhe,
   Hover, nach Klick): `border` des Knopfes traegt Knopffarbe (unsichtbar), `outline` ist
   in allen Zustaenden `none`, `box-shadow` ebenfalls.
   Der Rahmen wird nur fuer das <rect> zurueckgenommen, nicht fuer <path> — das Herz
   bleibt weiss. */
.iwish-app-block-product.wishlist-icon svg rect {
  stroke: none !important;
  fill: none !important;
}
/* 🔴 CEO 11.09.2026, Punkt 7: „Um das Herz ist noch eine quadratische Umrandung sichtbar."
   Der Rahmen der Regel oben kann es nicht sein: Er traegt dieselbe Farbe wie die Fuellung
   (`--colorBtnPrimary`) und existiert nur, damit der Knopf exakt so hoch bleibt wie der CTA
   (der ebenfalls 1px Rahmen hat). Auch das Theme setzt hier keinen Rahmen — theme.css hat
   an `.iwish-app-block-product.wishlist-icon` nur `background-color:#492922; display:flex;
   margin:0`. Es bleiben drei Traeger, die von aussen kommen; alle drei werden hier
   neutralisiert, weil sich ohne Sicht auf die Seite nicht entscheiden laesst, welcher es ist:
     1. der Fokus-Ring des Browsers auf dem inneren `<a href="#">` (erscheint nach Klick
        und bleibt stehen — genau das Muster „nach Klick sichtbar"),
     2. Rahmen/Schatten aus dem Stylesheet der Wunschlisten-App (iwish-Extension, liegt
        ausserhalb des Themes und ist von hier nur ueberschreibbar, nicht aenderbar),
     3. ein eigener Hintergrund am inneren `<a>`, der als Kante gegen die Knopffarbe steht.
   Tastaturbedienung bleibt erhalten: Der Ring wird nicht ersatzlos entfernt, sondern nach
   INNEN gelegt (`outline-offset: -4px`) — sichtbar fuer den, der ihn braucht, aber keine
   Linie ausserhalb des Knopfes. Die App-Funktion ist nicht beruehrt, es aendert sich nur
   Gezeichnetes. */
.iwish-app-block-product.wishlist-icon a,
.iwish-app-block-product.wishlist-icon a:hover,
.iwish-app-block-product.wishlist-icon a:focus,
.iwish-app-block-product.wishlist-icon a:active,
.iwish-app-block-product.wishlist-icon a.iwishAdded {
  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
  border-radius: 0 !important;
}
.iwish-app-block-product.wishlist-icon:focus,
.iwish-app-block-product.wishlist-icon:focus-within,
.iwish-app-block-product.wishlist-icon:active {
  outline: none !important;
  box-shadow: none !important;
}
.iwish-app-block-product.wishlist-icon a:focus-visible {
  outline: 2px solid var(--colorChampagne) !important;
  outline-offset: -4px !important;
}

/* Konto-Seiten: "Sign In" / "Create" ist dort der einzige gefuellte Knopf und damit der
   Haupt-CTA der Seite — er lief aber in der Standardgroesse (11px / 12px Polster) und war
   dadurch leiser als jeder Kauf-Knopf. Auf die CTA-Stufe gehoben. Eng ueber die
   Template-Klasse begrenzt, weil `.btn--full` im Theme auch anderswo vorkommt. */
.template-customers-login .btn--full,
.template-customers-register .btn--full,
.template-customers-reset-password .btn--full,
.template-customers-activate-account .btn--full {
  font-size: 11.5px !important;
  font-weight: 700 !important;
  letter-spacing: .16em !important;
  padding: 13px 24px !important;
}
@media only screen and (max-width: 768px) {
  .template-customers-login .btn--full,
  .template-customers-register .btn--full,
  .template-customers-reset-password .btn--full,
  .template-customers-activate-account .btn--full {
    letter-spacing: .12em !important;
    padding: 13px 16px !important;
  }
}
/* ⚠️ Hier standen bis 11.09.2026 zwei Wishlist-Regeln (Outline-Hover + dunkles Herz).
   Sie lagen NACH der Hauptregel und haetten sie bei gleicher Spezifitaet ueberschrieben —
   der Knopf waere gruen gefuellt mit dunkelgruenem, also unsichtbarem Herz gewesen.
   Entfernt; die gueltige Fassung steht oben bei den Buttons. */
@media only screen and (max-width: 768px) {
  /* ⚠️ Bis 11.09.2026 rutschte die Wunschliste hier unter den CTA (`grid-template-columns: 1fr`),
     weil das laengere Label sonst umbrach. Mit dem kleineren Knopf (11,5px / 13px 16px) ist der
     Platz wieder da — und der CEO will die beiden ausdruecklich als EIN Element nebeneinander.
     Also bleibt das Grid wie auf dem Desktop; die Wunschliste behaelt ihre quadratische Spalte. */
  /* Das Label traegt seit 10.09.2026 den Preis und bricht auf dem Handy in den laengeren
     Sprachen zweizeilig um. 🔴 Der kritische Fall ist **Niederlaendisch**
     ("In winkelwagen leggen — €60,00", 30 Zeichen), nicht Deutsch — das passt seit der
     Textkuerzung auf "In den Warenkorb" auch ohne Sonderregel, Franzoesisch ebenso.
     Wer die Regel wegen des kuerzeren deutschen Labels streicht, zerlegt NL.
     **Vor jeder Aenderung die LAENGSTE veroeffentlichte Sprache messen, nicht die
     naheliegendste.** Seit dem CEO-Feinschliff (11.09.) ist der Knopf ohnehin kleiner
     (11,5px / 13px 24px); mobil zusaetzlich engere Sperrung und Polsterung. */
  .product-form__cart-submit,
  .btn.add-to-cart,
  .add-to-cart,
  .btn.cart__checkout,
  .cart__checkout,
  #AddToCart {
    letter-spacing: .12em !important;
    padding: 13px 16px !important;
  }
}

/* Zweitaktionen laufen als Textlink, nicht als zweiter Button. */
.js-modal-open-sizechart,
.product-single__sizechart-link,
.product-single__meta .btn--secondary {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--colorLink) !important;
}

/* Der Hero-Button liegt ueber einem Foto — dort zeichnet das Theme ihn
   transparent (`.text-link, a { background: transparent }` gewinnt). Statt das
   zu erzwingen, bekommt er den Champagner-Rand der Marke. */
.hero__link .btn--primary,
.btn--primary {
  border-color: var(--colorChampagne);
  color: #ffffff;
}
.hero__link .btn--primary:hover,
.btn--primary:hover { border-color: #ffffff; color: #ffffff; }

/* Fliesstext-Links — nie allein ueber Farbe erkennbar */
.rte a,
main p a {
  color: var(--colorLink);
  border-bottom: 1px solid var(--colorChampagne);
  text-decoration: none;
}
.rte a:hover,
main p a:hover { color: var(--colorLinkHover); border-bottom-color: var(--colorBrass); }
/* 🔴 Das Theme zeichnet an `.rte a` bei Hover ZUSAETZLICH eine animierte 2px-Linie in Racing
   Green (`.menu-animation-line::after, .rte a::after`, bottom:-3px, scale3d 0→1). Zusammen mit dem
   Messing-Rahmen oben ergab das bei Hover zwei Unterstriche in zwei Farben (gemessen 11.09.2026).
   Die Theme-Linie ist fuer die Menue-Eintraege gedacht — dort bleibt sie; im Fliesstext gilt
   der Rahmen aus der Vorgabe (1px Champagner, Hover Messing). */
.rte a::after,
.product__policies a::after,
main p a::after { content: none !important; }

/* ==========================================================================
   5 — PRODUKTSEITE
   ========================================================================== */
.product-single__title { font-size: 14px !important; font-weight: 600; letter-spacing: .01em; }
/* WICHTIG: .product__price ist die DETAILseite (15px) — nicht mit der Karte
   (.grid-product__price, 11,5px) verwechseln. Genau das war im ersten Lauf falsch. */
.product__price { font-size: 14px !important; font-weight: 600; }
.product__price--compare {
  font-size: 14px !important;
  color: var(--colorPriceOriginal) !important;
  text-decoration: line-through;
  -webkit-text-decoration: line-through;
  /* 6px Abstand zum Verkaufspreis — dieselbe Luecke wie auf der Karte. Auf der Detailseite
     steht der Streichpreis VOR dem Preis, deshalb rechts statt links (gemessen waren 5px). */
  margin-right: 6px !important;
}
.collapsible-trigger {
  font-size: 12px !important;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.collapsible-trigger,
.collapsible-content { border-color: var(--colorHairline); }

/* 🔴 CEO 11.09.2026, Punkte 3+4: „Beschreibung" und „Versand und Rueckgabe" auf der
   Produktseite eine Stufe kleiner — Ueberschrift, Fliesstext, Zeilenhoehe UND Pfeil.
   Bewusst eng auf die Produktseite begrenzt (`.product-block--tab`, `.product-block` mit
   Beschreibung): dieselben `.collapsible-*`-Klassen tragen auch die Filter-Gruppen in der
   Kategorie und die Fussleisten-Ausklapps — die sollen bleiben, wie sie sind.
   Der Pfeil steht im Theme fix auf 20x20px und waere nach der Verkleinerung groesser als
   die Zeile, an der er haengt. */
.product-block--tab .collapsible-trigger,
.product-block--tab .collapsible-trigger-btn {
  font-size: 11.5px !important;
}
.product-block--tab .collapsible-content,
.product-block--tab .collapsible-content .rte,
.product-block--tab .collapsible-content .rte p,
.product-block--tab .collapsible-content p,
.product-block--tab .collapsible-content li,
.product-single__description,
.product-single__description p,
.product-single__description li {
  font-size: 12.5px !important;
  line-height: 1.6 !important;
}
.product-block--tab .collapsible-trigger__icon {
  width: 17px !important;
  height: 17px !important;
}
/* 🔴 Der Fliesstext dieser beiden Ausklapps lief in Grau (#6f7268): Abschnitt 10 faerbt
   `.collapsible-content--all .collapsible-content__inner` pauschal muted — gedacht fuer
   Nebeninformationen, hier trifft es aber die Produktbeschreibung und die Versandregeln,
   also den meistgelesenen Text der Seite. Die Vorlage verlangt dort Ink (#093425).
   Dreistufiger Selektor, damit er die pauschale Regel schlaegt, obwohl er frueher steht. */
.product-block--tab .collapsible-content--all .collapsible-content__inner,
.product-block--tab .collapsible-content .rte,
.product-block--tab .collapsible-content p,
.product-block--tab .collapsible-content li { color: var(--colorTextBody); }
/* Punkt 4 — mobil BEWUSST eine halbe Stufe darueber: Die Ueberschrift folgt dem Desktop
   (11,5px), der Fliesstext bleibt bei 13px. Auf dem Handy ist dieser Block die einzige
   Textflaeche der Seite und wird am Stueck gelesen; 12,5px sind dort kein „kompakter",
   sondern ein „enger". Wer beide Werte gleichziehen will, aendert nur diese Regel. */
@media only screen and (max-width: 768px) {
  .product-block--tab .collapsible-content,
  .product-block--tab .collapsible-content .rte,
  .product-block--tab .collapsible-content .rte p,
  .product-block--tab .collapsible-content p,
  .product-block--tab .collapsible-content li,
  .product-single__description,
  .product-single__description p,
  .product-single__description li {
    font-size: 13px !important;
    line-height: 1.62 !important;
  }
}
.variant__button-label,
.variant-input label {
  font-size: 10px !important;
  letter-spacing: .10em;
  border: 1px solid #d9d9d9;
  color: var(--colorTextMuted);
  padding: 6px 12px;
  border-radius: 0;
}
/* 🔴 Spezifitaet, nicht Reihenfolge: theme.css setzt den Rahmen des gewaehlten Chips ueber
   `.variant-input-wrap input[type="radio"]:checked + label` (0,3,2). Die kuerzere Fassung
   `.variant-input input:checked + label` (0,2,2) verliert dagegen, obwohl sie spaeter laedt —
   der aktive Chip trug deshalb weiter die Hairline #e6e0d0 und war vom freien nur an der
   Textfarbe zu unterscheiden (gemessen 10.09.2026). Beide Fassungen bleiben stehen. */
.variant-input input:checked + label,
.variant-input-wrap input[type="radio"]:checked + label {
  border-color: var(--colorTextBody) !important;
  color: var(--colorTextBody) !important;
}
/* Ausverkauft markiert das Theme per KLASSE .disabled, nicht ueber :disabled. */
.variant-input-wrap .variant__button-label.disabled,
.variant__button-label.disabled,
.variant-input input:disabled + label {
  color: var(--colorTextMuted) !important;
  border-color: #d9d9d9;
  text-decoration: line-through;
  -webkit-text-decoration: line-through;
}
/* ⚠️ TOT: Das Sizechart-Zebra steht so in der Vorlage, greift hier aber nirgends — auf der
   Produktseite existiert KEINE `<table>` (live 0 Treffer, 10.09.2026; schon in Teil 158 als
   nicht umsetzbar vermerkt). Die Regeln bleiben stehen, falls das Theme spaeter eine Tabelle
   bekommt; sie kosten nichts. Nicht suchen, wo sie wirken — sie wirken nicht. */
.sizechart td, .sizechart th { border-color: var(--colorHairline); font-size: 12px; }
.sizechart tbody tr:nth-child(odd) { background: var(--colorSmallImageBg); }

/* ==========================================================================
   6 — WARENKORB
   .cart__subtotal / .cart__item-price existieren hier nicht.
   ========================================================================== */
.cart__item-title {
  font-size: 11px !important;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.cart__price,
.cart__item-price-col,
.cart__item-sub { font-size: 11px !important; letter-spacing: .04em; }
.ajaxcart__subtotal { font-size: 11px !important; font-weight: 600; letter-spacing: .06em; }

/* 🔴 CEO 11.09.2026, Punkte 5+6: „Warenkorb-Typografie teilweise zu gross."
   „Teilweise" trifft es genau — und die Ursache ist keine zu grosse Einstellung, sondern
   eine LUECKE: Der Produktname im Warenkorb laeuft im Theme auf
       .cart__item-name { font-size: var(--typeBaseSize) }   = 14px
   und war von 3A nie angefasst; dasselbe gilt fuer Variante, Rabattzeile, Bedingungen und
   „Entfernen". Sie standen damit UEBER der Zeilenueberschrift (11px) und dem Preis (11px) —
   die Hierarchie stand auf dem Kopf. Deshalb wird hier nicht pauschal alles kleiner
   gestellt (Titel und Preise bleiben, wo sie sind), sondern die ungeregelten Traeger
   werden eingefangen. Ergebnis: Name 11,5 > Preis/Titel 11 > Variante/Zusatz 10,5.
   Diese Klassen tragen Warenkorb-SEITE und Warenkorb-Ausklapp gleichermassen (K119) —
   eine Regel deckt beide Wege ab. */
.cart__item-name {
  font-size: 11.5px !important;
  letter-spacing: .04em;
  margin-bottom: 6px;
}
.cart__item--variants,
.cart__item--variants span,
.cart__discount,
.cart__remove a,
.cart__price--strikethrough {
  font-size: 10.5px !important;
  letter-spacing: .04em;
}
.cart__terms,
.cart__terms label { font-size: 11px !important; }
/* Mengensteuerung: Zahl und Schalter folgen der Preiszeile, damit die Zeile eine Hoehe
   behaelt. Die Schalterflaeche selbst bleibt unveraendert — sie ist ein Touch-Ziel. */
.js-qty__num { font-size: 11px !important; }

/* "Weiter einkaufen" als Textlink (Pruefliste Warenkorb), nicht als Outline-Knopf.
   ⚠️ Die Vorlage widerspricht sich hier selbst: Formregel 1 sagt "alle uebrigen Buttons
   ausserhalb der Produktseite: transparent, 1px #c9c1a8, Ink #093425" — die Pruefliste
   fuer den Warenkorb sagt "Textlink #7a5f2c". Die seitenbezogene Angabe gewinnt.
   Eng gefasst ueber `body.template-cart`: `.btn--secondary` traegt sonst auch die
   Schnellsuche-Kacheln, die Outline bleiben sollen. */
.template-cart .section-header--with-link .btn--secondary {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  color: var(--colorLink) !important;
  font-size: 11px !important;
  letter-spacing: .16em !important;
  border-radius: 0 !important;
}
.template-cart .section-header--with-link .btn--secondary:hover { color: var(--colorLinkHover) !important; }

/* ==========================================================================
   7 — FOOTER (dunkelgruen)
   .site-footer h4 existiert nicht — es sind .h4 und .footer__title.
   Achtung: .site-footer a trifft 114 Elemente (Laender-/Sprachliste).
   ========================================================================== */
.site-footer { background: var(--colorFooter); color: var(--colorFooterText); border-top: 0; }
.site-footer .h4,
.footer__title {
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--colorFooterHeading) !important;
}
.site-footer a { font-size: 11.5px !important; }
.site-footer a:hover { color: var(--colorChampagne); }
.site-footer input,
.site-footer select {
  background: transparent;
  /* Literal statt Token: Das hier war der einzige Mitnutzer von
     `--colorCartDrawerBorder` ausserhalb des Cart-Drawers. Mit dem Wechsel auf
     5C (heller Warenkorb) faellt das Token weg — ohne diese Zeile waere der
     Rahmen still auf den Theme-Wert #49292233 zurueckgefallen, also auf einen
     Braunton im gruenen Footer. Der Wert bleibt derselbe wie vorher. */
  border-color: #4a6a5b;
  color: var(--colorFooterText);
  font-size: 11.5px !important;
}
/* Rechtszeile unter dem Footer (Handoff V2: 10,5 px) — lief ungeregelt auf der
   Theme-Formel `max(--typeBaseSize * 0.7, 12px)` = 12px. */
.footer__small-text { font-size: 10.5px !important; }
/* Dritte Instanz der Laenderauswahl — im gruenen Footer. */
.site-footer .content-title,
.site-footer .country-selector__title,
.site-footer .country-selector__content,
.site-footer .faux-select { color: var(--colorFooterText) !important; }

/* ==========================================================================
   8 — DRAWER: Menue 5A, Suche und Warenkorb 5C sind ALLE hell
   Im Theme haengen alle drei an --colorDrawers. Seit dem Handoff V2 gibt es
   keinen dunklen Sonderfall mehr — der Warenkorb steht in 8b.
   ========================================================================== */
#NavDrawer {
  background: #ffffff !important;
  color: #093425 !important;
  border-color: var(--colorBorder) !important;
}
#NavDrawer .drawer__header,
#NavDrawer .drawer__title { color: #093425; border-color: var(--colorBorder); }

/* 🔴 CEO 11.09.2026, Punkt 2: „Bei geoeffnetem Main-Menue scheint unten/hinten noch ein
   Stueck eines Banners durch." Die Ursache steht in theme.css und ist eine feste Zahl:
       .menu-drawer { top: 100px; height: calc(100% - 100px); }        (Desktop)
       .menu-drawer { top:  85px; height: calc(100% -  85px); }        (mobil)
   Das Theme rechnet mit einer 100px hohen Kopfzone. 3A hat sie auf 49px Kopf + 28px
   Versand-Bar = 77px verkleinert (nach dem Feinschliff vom 11.09. rund 85px). Zwischen
   Kopfzone und Menue-Oberkante bleiben dadurch 15-23px offen. In diesem Streifen liegt nur
   das halbdurchsichtige Overlay (`.js-drawer-open .main-content:after`, z-index 26) ueber
   der Seite — auf der Startseite also ueber dem Banner. Kopf, Versand-Bar und Menue tragen
   alle z-index 27 und decken; der Streifen dazwischen nicht.
   Der Fix ist bewusst TOLERANT statt auf einen Pixelwert gesetzt: eine deckende Flaeche in
   Menuefarbe ueber die oberen 100px, unter Kopf und Menue (z-index 26). Sie schliesst die
   Luecke unabhaengig davon, wie hoch die Kopfzone nach spaeteren Aenderungen genau ist.
   Ein fester Wert waere exakt der Fehler, den das Theme hier schon gemacht hat.
   `body.open-menu-drawer` setzt theme.js beim Oeffnen und entfernt sie beim Schliessen
   (zwei Fundstellen) — die Regel greift also NUR beim Menue, nicht beim Warenkorb- oder
   Such-Ausklapp. `.main-content::before` ist im Theme unbelegt (0 Treffer). */
.open-menu-drawer .main-content::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 100px;
  background: var(--colorDrawers);
  z-index: 26;
  pointer-events: none;
}
/* 🔴 CEO 11.09.2026, zweite Sicht: „oben ist noch ein komischer Balken."
   Der Deckel oben WAR da — er lag nur unter dem Schleier. Beide sind Pseudo-Elemente
   DESSELBEN Elements und tragen `z-index: 26`:
       .open-menu-drawer .main-content::before   (dieser Deckel, Elfenbein)
       .js-drawer-open   .main-content:after     (theme.css:4668, --colorModalBg)
   Bei gleichem z-index entscheidet die Malreihenfolge, und `::after` wird nach `::before`
   gemalt. Der Schleier lag also ueber dem Deckel und faerbte ihn ein.
   Am Screenshot des CEO nachgerechnet: Elfenbein #f8f6f0 unter dem Schleier ergibt
   #a1aba3 — das entspricht exakt 36 % Deckkraft (0,6 aus `--colorModalBg` × 0,6 aus der
   `overlay-on`-Animation). Der Balken war also nie ein fremdes Element, sondern unser
   eigener Deckel im Schleier.
   Fix: Der Schleier beginnt erst an der Menue-Oberkante. Unter ihm liegt ab dort die
   Seite, die er abdunkeln SOLL — ueber der Kopfzone liegt dagegen kein Seiteninhalt,
   sondern Kopf und Deckel. Der Wert 100px ist kein geratener Abstand, sondern derselbe,
   den theme.css:4609 fuer `.menu-drawer { top }` setzt; Deckelhoehe und Schleierbeginn
   sind damit aneinander gebunden.
   ⚠️ Nur `.open-menu-drawer` — Warenkorb- und Such-Ausklapp behalten den vollen Schleier. */
.open-menu-drawer .main-content::after { top: 100px; }

/* Innenabstand nach der Handoff-Vorlage (Panel 5A: `padding: 30px 24px 26px`). Das Theme
   setzt `var(--drawer-gutter) 16px 0`. Nur der Menue-Ausklapp — `.drawer__scrollable`
   traegt auch der Warenkorb. Mobil bleibt der Theme-Wert, dort ist 16px richtig. */
@media only screen and (min-width: 769px) {
  #NavDrawer .drawer__scrollable { padding: 30px 24px 26px !important; }
}
.mobile-nav__link,
.mobile-nav__toggle { color: #093425 !important; }

/* Ebene 1 stand in DREI Groessen nebeneinander (live gemessen): `ul.mobile-nav.extra-menu`
   („New Arrivals" …) auf 40 px, die Kategorien mit Untermenue („Clothing", „Collections")
   auf 14 px — sie sind `<button class="mobile-nav__toggle">` und tragen die
   `--top-level`-Klasse nicht — und der Rest auf 24 px. Der Sprung von 40 auf 14 war der
   sichtbare Bruch. Hier einheitlich auf eine Stufe gebracht. */
/* Die drei Gruppen tragen unterschiedliches Markup — deshalb drei Selektoren:
   `.extra-menu a`   → <a> in einem <li> OHNE Klasse (Theme setzt 40 px)
   `.mobile-nav__has-sublist > .mobile-nav__toggle` → <button>, eine Zwischenebene tiefer,
      ohne `--top-level`-Klasse; erbte die Basisschrift (14 px)
   `.mobile-nav__link--top-level` → der Rest (24 px) */
/* 🔴 CEO 11.09.2026, zweite Runde — KORREKTUR der 40px-Fassung von heute frueh.
   Die 40px stammten aus einer falschen Zuordnung: `.extra-menu a` traegt im Theme 40px,
   und ich hatte diese Zahl als „Original-Praesenz der Ebene 1" gelesen. Der CEO hat mit
   einem Screenshot aus der Handoff-Vorlage (`_design/3a-final/NHS Storefront 3A.dc.html`,
   Panel 5A) belegt, wie das Menue aussehen soll — und die Vorlage nennt andere Zahlen:

     Design-Ebene 1 = die Schnellzugriffe  („Neue Produkte", „Bestseller", „Back In Stock",
       „Alle Produkte") → im Theme `ul.mobile-nav.extra-menu` → **24px / 700 / -0.01em**
     Design-Ebene 2 = die Hauptnavigation („Clothing", „Collections", „SALE", „Prints")
       → im Theme die `--top-level`-Links und die Aufklapp-Buttons → **12,5px / .06em /
       padding 13px 0 / border-top**

   Gegenprobe am Screenshot (`_bild-messen.mjs`, Schwelle 140): Glyphenhoehe 19px bei 51px
   Zeilenabstand oben, 10px bei 48px unten — Verhaeltnis 1,9 = 24 : 12,5. Die Zahlen der
   Vorlage und das Bild sagen dasselbe.
   Die alte Lesart drehte die Hierarchie um: Sie machte die Hauptnavigation zur groessten
   Flaeche des Shops (40px) und die Schnellzugriffe gleich gross — genau das, was der CEO
   als „zu gross und zu massiv" beschreibt. */
.extra-menu a {
  font-size: 24px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.01em !important;
  /* 🔴 `display: block` ist hier kein Kosmetik-Zusatz, sondern die Bedingung dafuer,
     dass die Polsterung ueberhaupt wirkt: Diese Links tragen KEINE `.mobile-nav__link`-
     Klasse, sind also inline — und ein Inline-Element vergroessert mit vertikalem
     Padding die Zeilenbox nicht. Gemessen am 11.09.2026: mit `padding: 11px 0` kam
     ein Zeilenabstand von 41px heraus (= 24 x 1.2 + 12px Listen-Polster), nicht die
     erwarteten 51. Erst als Block zaehlt die Polsterung:
     24 x 1.2 = 28,8 + 2 x 10 = 48,8 ≈ die 48px der Vorlage (dc.html „48 / 48").
     Dafuer muss das Listen-Polster des Themes weichen (naechste Regel), sonst
     addieren sich beide. */
  display: block;
  padding: 10px 0 !important;
  text-align: left;
  text-transform: none !important;
}
/* Das Theme polstert jedes Listenelement unten mit 12px (mobil 8px). Zusammen mit der
   Polsterung am Link waeren das 60px Zeilenabstand statt 48. Die Zeilenhoehe steuert
   ab jetzt allein der Link — er ist auch der klickbare Teil. */
.extra-menu li:not(:last-child) { padding-bottom: 0 !important; }
/* Hauptnavigation. Drei Markup-Varianten, dieselbe Stufe:
   `.mobile-nav__link--top-level` → <a> ohne Untermenue (SALE, Prints)
   `.mobile-nav__has-sublist > .mobile-nav__toggle` → <button> mit echter URL (Clothing …)
   `.mobile-nav__faux-link` / `.mobile-nav__toggle > .mobile-nav__link` → der Text darin.
   Polsterung NUR an den aeusseren Traegern, sonst zaehlt sie doppelt. */
.mobile-nav__link--top-level,
.mobile-nav__has-sublist > .mobile-nav__toggle,
.mobile-nav__faux-link,
.mobile-nav__toggle > .mobile-nav__link {
  font-size: 12.5px !important;
  font-weight: 400 !important;
  line-height: 1.6 !important;
  letter-spacing: .06em !important;
  text-align: left;
  text-transform: none !important;
}
.mobile-nav__link--top-level,
.mobile-nav__has-sublist > .mobile-nav__toggle {
  /* 12,5 x 1.6 = 20 + 2 x 13 + 1px Linie = 47 ≈ die gemessenen 48px. */
  padding: 13px 0 !important;
}
/* Der Umschalter ist ein Button — Flaeche und Rahmen muessen weg, damit er wie ein Menuepunkt wirkt. */
.mobile-nav__has-sublist > .mobile-nav__toggle {
  font-family: inherit;
  background: transparent !important;
  border: 0 !important;
  width: 100%;
  color: var(--colorDrawerText) !important;
}
.mobile-nav__link--top-level:hover { color: var(--colorLink) !important; }
/* Untermenue-Inhalte eine halbe Stufe unter der Hauptnavigation — sie sind die dritte
   Ebene, nicht die zweite. */
.mobile-nav__sublist .mobile-nav__link,
.mobile-nav__child-item .mobile-nav__link {
  font-size: 12px !important;
  font-weight: 400;
  letter-spacing: .04em;
  padding: 11px 0;
}
/* ⚠️ Hier stand bis 11.09.2026 eine Regel auf `.mobile-nav__item--secondary` fuer die
   Service-Eintraege („Support", „Delivery & Shipping", „Withdraw from contract",
   „Returns"). Sie hat nie gegriffen: Live gemessen tragen diese Eintraege KEINE
   `--secondary`-Klasse, sie stehen als gewoehnliche Punkte in derselben
   `ul.mobile-nav` wie „Clothing" und „SALE" (0 Treffer fuer den Selektor, Desktop
   und mobil). Sie laufen damit auf der Hauptnavigations-Stufe von 12,5px — was
   richtig ist: Eine eigene Stufe liesse sich nur ueber die sprachabhaengigen
   `menu-<handle>`-Klassen ansteuern und braeche beim naechsten Umbenennen. */
/* 🔴 CEO 11.09.2026: „im Main-Menue die obere Abgrenzung wuerde ich rausnehmen, und schau
   mal ob die Striche alle die gleiche Staerke haben — es kommt mir unterschiedlich vor."
   Beides hatte EINE Ursache: Die Linie war an ZWEI Stellen gesetzt.
     · `.mobile-nav__item + .mobile-nav__item` → am <li>, greift ab dem ZWEITEN Eintrag
     · `.mobile-nav__has-sublist`              → am <div> INNERHALB des <li>, nur bei
                                                 Eintraegen mit Untermenue
   Live gemessen (`_tmp/herz-pfeil-diagnose.mjs`): „Clothing" 1px (nur div, weil als erster
   Eintrag keine Geschwister-Regel greift) · **„Collections" 2px — beide Regeln zugleich** ·
   „SALE"/„Prints"/Service-Links je 1px. Der Eindruck war also richtig und exakt eine Zeile
   stark.
   Fix: Die Linie am inneren <div> entfaellt. Damit sind alle Striche 1px — UND der erste
   Eintrag verliert seine Linie, was genau die „obere Abgrenzung" ist, die weg sollte.
   Ein Wunsch, eine Regel, zwei erledigte Punkte. */
.mobile-nav__item + .mobile-nav__item { border-top: 1px solid var(--colorBorder); }

/* Zeilen mit Untermenue waren 4-5px hoeher als die uebrigen (live: 51/52 gegen 47) — nicht
   wegen der Schrift, sondern wegen des Pfeil-Icons: Der Aufklapp-Knopf ist ein Grid
   (`grid-template-columns: auto 24px`, theme.css:6868) und das 24px-SVG ist hoeher als die
   Textzeile (20px). Auf Zeilenhoehe gebracht, damit alle Eintraege gleich hoch sind. */
.mobile-nav__has-sublist .mobile-nav__toggle svg,
.mobile-nav__has-sublist .faux-button svg { width: 20px; height: 20px; }

/* 🔴 CEO 11.09.2026: „bei den Links ist die Abtrennung unsymmetrisch fuers Auge —
   das verkleinern und schoener machen."
   Ursache ist ein EINSEITIGES Polster des Themes:
       theme.css:6804  .mobile-nav li:not(:last-child) { padding: 0 0 12px; }
   Zwoelf Pixel unten, null oben. Die Trennlinie sitzt an der Oberkante des Eintrags
   (Regel darueber), der Text also 12px zu hoch in seiner eigenen Zeile.
   Am Screenshot des CEO nachgerechnet (Skalierung ueber bekannte Schriftgroessen
   kalibriert, `_bild-farbzeilen.mjs`): Zeilenhoehe 58px, davon 19px Luft ueber dem Text
   und 31px darunter. Rechnerisch bestaetigt: 13px Link-Polster + 20px Zeilenbox + 13px
   Link-Polster + 12px li-Polster = 58px.
   Fix: das einseitige Polster entfernen. Damit wird die Zeile 46px hoch (weiterhin ueber
   der 44px-Trefferflaeche des Handoffs V2) UND der Text sitzt mittig — beides auf einmal,
   ohne eine einzige Schriftgroesse anzufassen.
   ⚠️ `>` ist Absicht: Nur die oberste Ebene. Die Untermenues (`.mobile-nav__sublist
   .mobile-nav__item`) behalten ihr Polster, sie haben keine Trennlinien.
   🔸 KORREKTUR 16.10.2026: Das stimmte nie — die Linien-Regel oben (`.mobile-nav__item +
   .mobile-nav__item`) greift auch in den Untermenues. Dort stand der Text seither 12 px unter
   und 25 px ueber der Linie. Behoben in Abschnitt 14. */
.mobile-nav > .mobile-nav__item { padding-bottom: 0 !important; }

/* Der Abstand zwischen den Schnellzugriffen und der Hauptnavigation war mit rund 68px die
   groesste Luecke im Menue — im Screenshot der Bereich, auf den der CEO-Pfeil zeigt. Er
   entsteht aus den zusammenstossenden Standard-Aussenabstaenden zweier `<ul>` (Markup:
   `drawer-menu.liquid` legt `ul.mobile-nav.extra-menu` und `ul.mobile-nav` direkt
   hintereinander). Statt zu raten, WELCHER Abstand es genau ist, werden hier beide Seiten
   auf 0 gesetzt und der Gruppenabstand EINMAL explizit vergeben — das Ergebnis ist
   unabhaengig davon, was das Theme vorher gerechnet hat.
   24px liegen bewusst unter dem Zeilenabstand der Schnellzugriffe (~45px): Die Gruppen
   bleiben getrennt, ohne dass ein Loch entsteht. */
#NavDrawer .extra-menu { margin-bottom: 0 !important; padding-bottom: 0 !important; }
#NavDrawer .extra-menu + .mobile-nav { margin-top: 24px !important; }
/* Mobil eine Stufe darunter (Handoff: 24px Desktop / 22px mobil). Das Theme setzt hier
   selbst 24px bzw. 30px unter 1200px — beide Werte liegen ueber der Vorlage, deshalb die
   eigene Regel bis 768px. */
@media only screen and (max-width: 768px) {
  .extra-menu a {
    font-size: 22px !important;
    /* 22 x 1.2 = 26,4 + 2 x 11 = 48,4 — dieselbe Zeilenhoehe wie auf dem Desktop,
       so verlangt es die Vorlage („48 / 48"). */
    padding: 11px 0 !important;
  }
  .mobile-nav__link--top-level,
  .mobile-nav__has-sublist > .mobile-nav__toggle { padding: 12px 0 !important; }
}
.mobile-nav__toggle svg,
.mobile-nav__has-sublist svg { color: var(--colorBrass); fill: var(--colorBrass); }

/* Die Balken der Menue-Eintraege kommen aus `--colorDrawers` (Theme-Setting).
   Hier zusaetzlich abgesichert, damit ein spaeter geaenderter Setting-Wert das Menue
   nicht wieder gruen einfaerbt. */
.mobile-nav > .mobile-nav__item,
.mobile-nav__item > .mobile-nav__sublist,
.mobile-nav__sublist-head {
  background-color: var(--colorDrawers) !important;
}
.mobile-nav__sublist-head {
  border-bottom: 1px solid var(--colorBorder) !important;
  color: var(--colorDrawerText);
}
.mobile-nav__sublist-head .menu-breadcrumb span { color: var(--colorTextMuted); }
/* Senkrechte Deko-Linie im Untermenue stand hart auf Schwarz. */
.mobile-nav__grandchildlist:before { background: var(--colorBorder) !important; }

/* SALE ersetzt das hart notierte #C62828 (theme.css 2066).
   KEINE font-size hier: derselbe Link traegt beide Klassen (`…--top-level menu-sale`),
   eine Groessenangabe wuerde die 40px der ersten Menue-Ebene ueberschreiben. */
/* 30.09.2026: Die Klasse haengt am uebersetzten TITEL (`menu-{{ link.title | handle }}`) — seit der
   Umbenennung „SALE" → „Retoure Drop" (25.09.) traf `.menu-sale` nichts mehr (K217). Zusaetzlicher
   Traeger ueber das Link-ZIEL, wie in assets/nhs-menu-custom.css auf MAIN — dort rot, hier Messing
   (CEO 30.09.: Rot bleibt im 3A-Design gestrichen). Diese Datei laedt NACH nhs-menu-custom.css. */
a.mobile-nav__link.menu-sale,
a.mobile-nav__link[href*="/collections/easter-sale"] {
  color: #7a5f2c !important;
  /* !important noetig: Der Link traegt gleichzeitig `--top-level`, und dessen Regel setzt
     die Sperrung mit !important auf -.01em — gemessen kam bei SALE -0,24px statt .10em an. */
  letter-spacing: .10em !important;
  text-transform: uppercase;
}
/* Nur wenn "Sale" als Unterpunkt auftaucht, gilt die Untermenue-Stufe. */
.mobile-nav__sublist a.mobile-nav__link.menu-sale,
.mobile-nav__sublist a.mobile-nav__link[href*="/collections/easter-sale"] { font-size: 12px !important; }
/* NEW-Fahne an "Prints": Das Theme zeichnet sie als gefuelltes Braun-Label (`#492922`, weisse
   Schrift). Sie laeuft jetzt als reine Messing-Auszeichnung ohne Flaeche — ein zweites
   gefuelltes Element neben den Badges waere eine Betonung zu viel. */
/* 🔴 CEO 11.09.2026 (Nebenbefund, mit freigegeben): Die NEW-Fahne stand UEBER dem Wort
   „Prints" statt daneben. Das Theme setzt sie `position: absolute; right: -30px; top: 0`
   (theme.css:6996) — aber der einzige gedachte Bezugsrahmen ist dort auskommentiert
   (`.mobile-nav__item{ /* position:relative; */ }`), also richtete sie sich am naechsten
   positionierten Vorfahren aus und landete irgendwo. Der Link selbst ist nur so breit wie
   sein Text (live gemessen: 38px), eignet sich also als Bezug.
   Statt `right: -30px` (30px Luft neben einem kurzen Wort) wird die Fahne mit 10px Abstand
   an das Wortende gehaengt und vertikal mittig gesetzt — das haelt auch, wenn der Menuepunkt
   in einer anderen Sprache laenger heisst. */
a.mobile-nav__link.menu-prints { position: relative; }
a.mobile-nav__link.menu-prints:before {
  font-size: 9px !important;
  letter-spacing: .16em;
  color: #7a5f2c !important;
  background-color: transparent !important;
  padding: 0 !important;
  right: auto !important;
  left: calc(100% + 10px) !important;
  top: 50% !important;
  transform: translateY(-50%);
  white-space: nowrap;
}

/* Laenderauswahl im (jetzt hellen) Menue-Ausklapp */
#NavDrawer .content-title,
#NavDrawer .country-selector__title,
#NavDrawer .country-selector__content,
#NavDrawer .faux-select { color: var(--colorTextMuted) !important; }

/* Suche-Overlay hell */
.site-header__search-container predictive-search,
predictive-search,
predictive-search form,
.predictive-screen-input {
  background-color: #ffffff !important;
  color: #093425 !important;
}
predictive-search a,
predictive-search .h4,
.quick-search,
.quick-search-title,
.quick-search-list a { color: #093425 !important; }
.quick-search-list a.btn { color: var(--colorLink) !important; }
predictive-search .search__input,
.predictive-screen-input .search__input {
  color: #093425 !important;
  border-color: var(--colorBorder) !important;
  background: transparent;
}
predictive-search .search__input::placeholder { color: var(--colorTextMuted); }

/* ==========================================================================
   8b — CART-DRAWER: abgeloest am 16.10.2026 durch Abschnitt 16 (Warenkorb V3, CEO-Design).
   Die Fassung „5C" vom 11.09. stylte das alte Impulse-Markup (.cart__item/.cart__image/…);
   das gibt es im Drawer nicht mehr (snippets/cart-item.liquid V3). Bewusst NICHT stehen gelassen:
   `#CartDrawer a { color: Messing }` haette die Artikelnamen braun gefaerbt.
   ========================================================================== */

/* ==========================================================================
   9 — HARTCODIERTE THEME-FARBEN
   theme.css traegt das Marken-Braun an 34 Stellen als festen Wert (in fuenf
   Alpha-Stufen) plus drei Rottoene. Die Settings erreichen diese Regeln nicht.
   ========================================================================== */
.hr--large, .hr--medium, .hr--small, hr { border-top-color: var(--colorHairline); }
input, select, textarea,
.search__input, .search__input:focus,
.js-qty__wrapper,
.select-menu .select-btn,
.collection-filter__sort-container,
.collection-filter .custom_filter,
.btn--search, .btn--close-search { border-color: var(--colorBorder); }

.collapsible-content--all .collapsible-content__inner,
.product__policies,
.rich-text--text .rte *,
.collection-menu a,
.collection-filter__sort-container label,
.tool-tip-trigger__title,
.footer__item--newsletter .nhs-email-row input { color: var(--colorTextMuted); }

/* `.product__policies a` stand bis 10.09.2026 in der Liste darueber und war damit muted —
   also exakt so gefaerbt wie der Text um ihn herum ("Tax included. Shipping calculated…").
   Der Link war nur an einer 1,5:1-Haarlinie zu erkennen. §4 verlangt fuer Links #7a5f2c
   plus Unterstrich. Eigene Regel noetig, weil theme.css ihn mit `.product__policies a`
   (0,2,1) hart in Marken-Braun setzt und `.rte a` (0,1,1) dagegen verliert. */
.product__policies a {
  color: var(--colorLink);
  border-bottom: 1px solid var(--colorChampagne);
  text-decoration: none;
}
.product__policies a:hover { color: var(--colorLinkHover); border-bottom-color: var(--colorBrass); }
.collection-menu a.current-link,
.collection-filter select,
.variant__label-text { color: #093425; }

/* menu-prints:before steht bewusst NICHT in dieser Liste — die NEW-Fahne bleibt flaechenlos
   (siehe Abschnitt 8). Zwei Regeln fuer dasselbe Element hatten sich sonst widersprochen. */
.footer__social a,
.default-address-text { background-color: #093425; }
/* .iwish-app-block-product.wishlist-icon stand hier (Braun -> Gruen). Das beseitigte zwar
   die Altfarbe, machte den Knopf aber zum zweiten Vollton-Knopf neben dem CTA. Er ist
   jetzt Outline — die Regel steht in Abschnitt 4 bei den Buttons. */
body #iwish-drawer-root .empty-wishlist-container .continue-shopping-btn {
  border-color: #093425;
  background-color: #093425;
}
.footer__item--newsletter .nhs-radio-group label input { accent-color: #093425; }
.product-tag-list .product-tag-item {
  background-color: rgba(9, 52, 37, 0.08);
  color: var(--colorTextMuted);
}
/* Slider-Pfeile der Produktkarten — 32 Vorkommen je Startseite */
.grid__item-image-wrapper .flickity-button,
.flickity-button-icon,
.flickity-button-icon .arrow { color: #093425; fill: #093425; }

/* ==========================================================================
   10 — SONDERFAELLE, live gefunden
   ========================================================================== */
/* Die Laenderauswahl steht DREIMAL im Dokument (Menue-Ausklapp, Kopf, Footer),
   mit identischer Struktur und gegensaetzlichem Untergrund. Kopf und Footer
   sind oben geregelt, der Ausklapp in Abschnitt 8. */
.country-selector__content > svg path,
.multi-selectors svg path { fill: currentColor; }

/* Hartes Weiss, das seit der Umstellung gegen das Elfenbein absticht.
   `.btn--search` / `.btn--close-search` (Lupe + Schliessen im Such-Overlay) und
   `.close-mobile-variant` (Schliesskreuz der mobilen Groessenleiste auf den Karten)
   standen bis 10.09.2026 noch auf reinem #ffffff — sie waren die einzigen verbliebenen
   Treffer des Weiss-Sweeps und fielen als helle Flecken auf dem Elfenbein auf. */
.country-language-popup.globle-popup,
.iwish-drawer-menu,
.wishlist-drawer-container > div { background-color: var(--colorCard) !important; }
.btn--search,
.btn--close-search,
.close-mobile-variant { background-color: var(--colorBody) !important; }

/* Wishlist-App, Kopf des Ausklapps: "log in" / "Create Account" kamen aus dem Fremd-CSS der
   App (cdn.shopify.com/extensions/…/iwish-…/v3-iwishlist.css) in #dd4124 — einer der vier
   Rottoene, die 3A ersatzlos streicht. Sichtbar, sobald ein nicht angemeldeter Kunde die
   Wunschliste oeffnet. Nicht ueber Theme-Settings erreichbar, daher hier. */
body #iwish-drawer-root .link-text,
.wish-drawer-header .link-text,
.iwish-drawer-menu .link-text {
  color: var(--colorLink) !important;
  border-color: var(--colorLink) !important;
}

/* Wishlist-App: ihr Ausklapp ist weiss, uebernimmt aber die Drawer-Schriftfarbe.
   Spezifitaet bewusst so hoch wie im Theme (`body #iwish-drawer-root …`). */
body #iwish-drawer-root .empty-wishlist-container h4 { color: #093425 !important; }
body #iwish-drawer-root .mst-drawer-title-text,
body #iwish-drawer-root .wish-drawer-title,
body #iwish-drawer-root .empty-wishlist-container p,
body #iwish-drawer-root h4,
body #iwish-drawer-root p,
.wishlist-drawer-container,
.iwish-drawer-menu { color: #093425; }

/* ==========================================================================
   10b — FORM: alles eckig (Handoff V2, 11.09.2026)
   „Kein border-radius auf Buttons, Chips, Badges, Feldern, Icon-Flaechen.
   Die Pill-Form des Bestands entfaellt — scharfe Ecken sind Teil der Richtung."
   Abschnitt 4 deckt Buttons und Felder bereits ab; hier stehen die Traeger, die
   ihre Rundung aus eigenen Theme-Regeln ziehen und deshalb einzeln fallen.
   ⚠️ BEWUSST NICHT eckig (Rundung ist dort Bedeutung, nicht Zierde):
   Slider-Punkte `.flickity-page-dots .dot`, der Lade-Ring `.btn--loading:before`,
   der Lagerpunkt `.icon--inventory`, Avatare und Bildmasken. Ein pauschales
   `* { border-radius: 0 }` traefe genau diese mit — deshalb Einzelliste.
   ========================================================================== */
.select-menu .select-btn,
.select-menu .options,
.grid-product__size-swatches,
.close-mobile-variant,
.btn--circle,
[data-has-image] .modal__close,
.flickity-button,
.footer__item--newsletter .nhs-agree-row input { border-radius: 0 !important; }

/* Wunschlisten-App: eigenes Stylesheet aus der Extension (nicht im Theme).
   Nur ueber dieselbe Spezifitaet `body #iwish-drawer-root …` + !important
   erreichbar. */
body #iwish-drawer-root .continue-shopping-btn,
body #iwish-drawer-root .addToCart-btn,
body #iwish-drawer-root .add_to_cart { border-radius: 0 !important; }

/* Elemente, die nur in bestimmten Ansichten auftauchen (Preisfilter, Hotspots,
   Teilen-Leiste, Lade-Platzhalter). Kosten nichts, wenn sie nicht rendern. */
.noUi-target,
.noUi-connects,
.noUi-handle,
.noUi-tooltip,
.social-sharing__link,
.product__thumb-icon,
.tooltip__label,
.placeholder-content,
.hotspot__button-content { border-radius: 0 !important; }

/* ==========================================================================
   10c — MOBIL: Trefferflaechen (Handoff V2, 11.09.2026)
   „Haupt-CTA min. 52 px hoch, alles andere Antippbare min. 44 px, Abstand
   zwischen zwei Tap-Zielen min. 8 px."
   🔴 Der Haupt-CTA bleibt bei 44 px: Der CEO hat am 11.09. ausdruecklich die
   kleinere Skala bestellt (11,5px / 13px 24px) und sie nach dem V2-Paket
   bestaetigt. 52 px hiesse groessere Schrift oder mehr Polster — beides waere
   der Rueckweg. Alles andere unten folgt der Vorlage.
   Diese Regeln aendern GEOMETRIE, nicht Typografie — die Schriftgroessen der
   Feinschliff-Runde bleiben unangetastet.
   ========================================================================== */
@media only screen and (max-width: 768px) {

  /* --- Groessen-Chips ---------------------------------------------------
     Das Theme setzt `width: 36px; height: 36px` an `.variant-input-wrap label`
     (0,1,1) — eine gleich spezifische Regel wuerde nur bei spaeterer Position
     gewinnen. Sicherer ist der zweistufige Selektor (0,2,0).
     Farb-Swatches sind ausgenommen: Sie sind quadratische Farbflaechen mit
     eigener Breite, kein Textchip. */
  .variant-input-wrap .variant__button-label:not(.color-swatch),
  .variant-input-wrap label:not(.color-swatch) {
    width: auto !important;
    height: auto !important;
    min-width: 44px;
    min-height: 44px !important;
    padding: 0 14px !important;
    font-size: 11px !important;
    line-height: 1 !important;
  }

  /* --- Menue ------------------------------------------------------------
     Ebene 2 auf 13px (V2). Die Selektorliste ist dieselbe wie in Abschnitt 8;
     sie steht spaeter in der Datei und gewinnt damit bei gleicher Spezifitaet. */
  .mobile-nav__link--top-level,
  .mobile-nav__has-sublist > .mobile-nav__toggle,
  .mobile-nav__faux-link,
  .mobile-nav__toggle > .mobile-nav__link { font-size: 13px !important; }
  /* Untermenue und Service-Eintraege auf 44px Zeilenhoehe.
     ⚠️ Bewusst `inline-flex` statt `flex`: `.mobile-nav__link` ist im Theme
     `width: fit-content`. Auf volle Breite umzustellen wuerde das Pfeil-Grid
     der Aufklapp-Zeilen verschieben — die Hoehe reicht fuer die Trefferflaeche. */
  .mobile-nav__sublist .mobile-nav__link,
  .mobile-nav__child-item .mobile-nav__link {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: 12px 0;
  }

  /* --- Kopf-Icons -------------------------------------------------------
     18px Glyphe in 44x44 Flaeche. Der negative Aussenabstand ist Absicht: Ohne
     ihn waechst die Kopfzeile von 49 auf 58 px (44 + 2x7 Polster) und macht den
     Feinschliff vom Vormittag zunichte. Die Flaeche ragt jetzt ueber die
     Kopfzeile hinaus, bleibt aber vollstaendig klickbar.
     Theme setzt `margin-left: -4px` zwischen zwei Icons — die Vorlage will 8px. */
  .site-nav__link--icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0 !important;
    margin: -5px 0;
  }
  .site-nav__link--icon + .site-nav__link--icon { margin-left: 8px; }
  .js-drawer-close,
  #CartDrawer .drawer__close-button { min-width: 44px; min-height: 44px; }

  /* --- Knoepfe ----------------------------------------------------------
     Nur die Hoehe, nicht die Schrift (10,5px bleibt). */
  .btn, button[type="submit"] { min-height: 44px; }

  /* --- Formularfelder ---------------------------------------------------
     🔴 16px ist keine Geschmacksfrage: iOS zoomt jedes Feld unter 16px beim
     Antippen automatisch heran und laesst die Seite verschoben zurueck. Das
     Theme hat dafuer eine Regel (`input, select, textarea` ab ≤959px), sie
     verliert aber gegen jede Klassenregel — auch gegen unsere eigenen aus
     Abschnitt 2 und 7. Preis: Die Fusszeile laeuft mobil sichtbar groesser
     als ihre 11,5px-Skala. */
  .site-footer input:not([type="checkbox"]):not([type="radio"]),
  .site-footer select,
  .search__input,
  .cart-notes,
  .collection-filter select,
  select.filter-select,
  .form-vertical input:not([type="checkbox"]):not([type="radio"]),
  .form-vertical select,
  .form-vertical textarea { font-size: 16px !important; }

  /* --- Mengenschalter ---------------------------------------------------
     NACH dem Felder-Block, sonst zoege der ihn auf 16px mit. */
  .js-qty__wrapper { min-height: 44px; }
  .js-qty__num { font-size: 13px !important; min-height: 42px; }

  /* --- Fusszeile --------------------------------------------------------
     V2 nennt mobil 13px (Desktop bleibt 11,5). */
  .site-footer a { font-size: 13px !important; }
}

/* ==========================================================================
   11 — SCROLLING
   Die Kopfzeile klinkt beim Scrollen als .site-header--stuck fixed ein.
   Ohne scroll-margin landet jedes Sprungziel darunter (gemessen 63px verdeckt).
   Barrierefreiheit, keine Performance-Massnahme: das Scrollen selbst laeuft
   mit 16,7ms Median und 0 Jank-Frames.
   ========================================================================== */
:target,
[id] { scroll-margin-top: 74px; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ==========================================================================
   12 — WAS BEWUSST NICHT UMGESETZT IST (live gegengeprueft 10.09.2026)

   Diese Selektoren stehen in `tokens-3a.css` bzw. in den Pruef-Snippets der README,
   treffen im NHS-Theme aber NICHTS (je 0 Elemente auf Start, Kollektion, Produkt,
   Warenkorb, Suche — Desktop 1440 und Mobil 390). Sie sind hier absichtlich NICHT
   ergaenzt; wer sie in einer spaeteren Runde vermisst, hat sie hier schon gesucht:

   - `.site-nav__link--active`, `.site-nav__item[aria-current] > a`
     Der Kopf traegt ueberhaupt keine Text-Navigation, nur Logo + fuenf Icons. Die
     Hauptnavigation liegt komplett im Menue-Drawer (Abschnitt 8).
   - `.collection-filter__item--active a`  → der aktive Filter wird anders markiert;
     geregelt ist stattdessen `.tag-list--active-tags a` (Abschnitt 2).
   - `.product-tag`, `.product__badge--discount`  → auf der Produkt-DETAILseite rendert
     das Theme kein Badge; die Karten nutzen `.grid-product__tag--sale` (Abschnitt 3).
   - `.btn--outline`  → existiert nicht; das Outline-Muster heisst hier `.btn--secondary`.
   - `.btn--primary`  → NUR im Hero, sonst 0 Treffer (Abschnitt 4).
   - `#AddToCart`  → 🔴 diese ID gibt es im Theme NICHT. Die README-Abnahme in §7 fragt sie
     ab und wuerde faelschlich "fehlt" melden. Der echte Traeger ist
     `.btn.btn--full.add-to-cart` (Checkout: `.btn.cart__checkout`). Die Selektoren in
     Abschnitt 4 fuehren `#AddToCart` nur als Netz mit.
   - `.drawer--left` / `.drawer--right` existieren zwar, werden aber praeziser ueber
     `#NavDrawer` / `#CartDrawer` angesprochen (Abschnitt 8).
   ========================================================================== */

/* ==========================================================================
   13 — GUTSCHEINSEITE (`.nhs-gc`, sections/nhs-giftcard.liquid) BLEIBT IM CEO-DESIGN
   30.09.2026, beim Abgleich 3A ↔ MAIN. Die Seite (CEO-Design 26.09., live auf MAIN seit 27.09.)
   hat ein eigenes, vollstaendiges Stylesheet (assets/nhs-giftcard.css). Drei globale 3A-Regeln
   griffen hinein (gemessen mit scripts/_nhs-theme/theme-vergleich.mjs, MAIN vs 3A):
     1. Kaufknopf 15px/700 → 10,5px/600 (Abschnitt 4, dort per :not(.nhs-gc__cta) ausgenommen)
     2. Seitengrund Elfenbein → Grautext 4,27:1 (Abschnitt 1, dort per :has(.nhs-gc) ausgenommen)
     3. Grundschrift/Zeilenhoehe 13px/1,6 statt 16px/1,4 → jede Zeile ohne eigene line-height
        wuchs, die Seite wurde 23 px hoeher. Hier: die Werte, die MAIN der Seite vererbt.
   ========================================================================== */
.nhs-gc { font-size: 16px; line-height: 1.4; }
/* 4. Fliesstext-Link-Regel `main p a` (Abschnitt 4) gab den Teilen-Links („Share · Tweet · Pin")
      einen Champagner-Unterstrich, das Design unterstreicht erst beim Hover — sonst doppelte Linie. */
.nhs-gc p a { border-bottom: 0; }
@media only screen and (max-width: 768px) {
  .nhs-gc { font-size: 14.72px; }   /* MAIN mobil: 16px × 0,92 (theme.css-Formel) */
}

/* ==========================================================================
   14 — MENUE-FEINSCHLIFF: UNTERMENUES UND PFEILE (CEO 16.10.2026)
   „Der Pfeil sitzt nicht richtig — genau solche Feinheiten pruefen, fixen, dass alles an der
   richtigen Stelle sitzt." Gemessen mit `scripts/_nhs-theme/menue-pruefung.mjs` (Menue + beide
   Untermenues auf 1440 / 1024 / 820 / 390 / 360 px): vorher 140 von 515 Pruefungen rot, mit
   diesem Abschnitt 515/515. Jede Regel unten nennt ihren Messwert.
   ========================================================================== */

/* 1. Zurueck-Zeile („← Clothing"): Pfeil mittig zum Wort. theme.css:6879 baut sie als Grid
      `24px max-content` OHNE align-items. Seit Abschnitt 8 dem Wort 11/12 px Polster gibt, ist
      es 41/44 px hoch und der 24-px-Pfeil klebt oben — 8 px (Desktop) bzw. 9,4 px (mobil) zu hoch.
   2. Sie steht jetzt IN der Zeilenfolge statt davor: Das Theme setzt `margin: 40px 0 30px`
      (≤990: 10px 0 20px) — darueber standen 70 px Luft statt der 30 px der Hauptebene, darunter
      30 px ohne Linie. Jetzt: Abstand wie die Hauptebene, gleiche Zeilenhoehe, eine Linie zum
      ersten Eintrag wie zwischen allen anderen. */
.mobile-nav__toggle-back {
  align-items: center;
  margin: 0;
  border-bottom: 1px solid var(--colorBorder);
}

/* 3. Untermenue-Zeilen: Text mittig zwischen den Linien. Das einseitige Theme-Polster
      (`.mobile-nav li:not(:last-child) { padding: 0 0 12px }`, mobil 8px — Abschnitt 8 hatte es
      nur fuer die Hauptebene entfernt) liess den Text 12 px unter der oberen und 25 px ueber der
      unteren Linie stehen; die letzte Zeile war 12 px niedriger als die anderen. Desktop-Polster
      13 statt 11 px: 12 x 1,6 + 26 = 45 px, so hoch wie die Hauptebene (46). Mobil bleibt die
      44-px-Mindesthoehe aus Abschnitt 10 der Taktgeber. */
.mobile-nav__sublist .mobile-nav__item { padding-bottom: 0 !important; }
@media only screen and (min-width: 769px) {
  .mobile-nav__sublist .mobile-nav__link,
  .mobile-nav__child-item .mobile-nav__link { padding: 13px 0; }
}

/* 4. Untermenue-Kopf (Titel + „Menu / Clothing") an derselben linken Kante wie die Eintraege.
      Das Theme polstert ihn mit 20 px (≤767: 15 px), den Inhalt darunter mit 24 px (Abschnitt 8,
      ab 769 px) bzw. 16 px — Versatz 4 px bzw. 1 px. */
.mobile-nav__sublist-head { padding-left: 24px; padding-right: 24px; }
@media only screen and (max-width: 768px) {
  .mobile-nav__sublist-head { padding-left: 16px; padding-right: 16px; }
}

/* 5. Pfeile der Hauptebene („Clothing →") rechts an der Inhaltskante. Das 20-px-Icon
      (Abschnitt 8) sass links in seiner 24-px-Grid-Spalte und endete 4 px vor den Linien. */
.mobile-nav__has-sublist .mobile-nav__toggle svg { justify-self: end; }

/* ==========================================================================
   15 — TRUST-BEREICH PRODUKTSEITE (CEO-Design 16.10.2026, Claude-Design-Handoff
   `theme-work/nhs/_design/trust-bereich/`): Material-Begriffe, Bestandszeile, Zusagen,
   kraeftigere Groessen-Kaestchen, Rhythmus der Kaufspalte.
   Markup in `snippets/product-template.liquid` (Marker NHS-TRUST); `.nhs-trust` haengt nur auf
   der Produktvorlage an `.product-single__meta` (nicht im Quick-Shop, nicht beim Gutschein).
   🔴 Typografie: CEO 16.10. „orientiere dich an dem, was wir bis jetzt gebaut haben" — bestehende
   Elemente behalten ihre Schrift (Titel 14/600, Kaestchen 10 bzw. mobil 11 px/400, Kaufknopf
   11,5/700, Steuerzeile 13). Die NEUEN Elemente tragen die Design-Werte (10,5 / 12,5), die auf
   unserer Skala liegen. Maße, Farben, Linien, Abstaende und Bewegung: 1:1 aus dem Handoff.
   Pruefstand: `scripts/_nhs-theme/pdp-trust-pruefung.mjs`.
   ========================================================================== */

/* 15.1 Rhythmus der Kaufspalte — jeder Wert = Abstand Unterkante → Oberkante (Handoff „Layout"). */
.nhs-trust .product-block--header { margin-bottom: 0 !important; }
.nhs-trust .product-block--price { margin: 12px 0 0 !important; }        /* Begriffe bzw. Titel → Preis 12 */
.nhs-trust .product__policies { margin-top: 4px !important; }             /* Preis → Steuerzeile 4 */
.nhs-trust .product-block--separator { margin: 18px 0 16px !important; }  /* Linie 18 / 16 */
.nhs-trust .product-block--separator hr {
  margin: 0 !important;
  border: 0 !important;
  border-top: 1px solid #e3e3e3 !important;
}
/* Der Groessentabellen-Block ist ohne Tabelle LEER, traegt aber 25 px Rand (Theme `--sizeChartMargin`)
   — 5 px davon standen zwischen Linie und „Groesse". Nur wenn er leer ist. */
.nhs-trust .size-chart__standalone:not(:has(tool-tip-trigger)) { margin: 0 !important; }
.nhs-trust .product-block--variant-picker { margin: 0 !important; }
.nhs-trust .product-block--variant-picker .variant__label { margin-bottom: 8px !important; }
.nhs-trust .variant-input-wrap { gap: 8px !important; }

/* 15.2 Material-Begriffe — 6 px unter dem Titel, Haarlinien-Trenner 1 × 10 px. */
.nhs-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 10px;
  row-gap: 2px;
  margin: 6px 0 0 !important;
  padding: 0 !important;
  list-style: none !important;
  font-size: 10.5px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #6f7268;
}
.nhs-tags li {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
}
.nhs-tags li::before { content: none; }
.nhs-tags li + li::before {
  content: "";
  flex: none;
  width: 1px;
  height: 10px;
  background: #c4cbc6;
}

/* 15.3 Bestandszeile — 20 px unter den Kaestchen, 14 px ueber dem Kaufknopf. Ausgeblendet
   (ausverkauft, Vororder, ungetrackt) haelt der Kaufknopf die bisherigen 20 px. */
.nhs-stock {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 10px;
  row-gap: 2px;
  margin: 20px 0 14px;
  font-size: 12.5px;
  line-height: 1.4;
  color: #093425;
}
.nhs-stock[hidden] { display: none !important; }
.nhs-stock__label { font-weight: 500; }
.nhs-stock__note { color: #6f7268; }
.nhs-stock[data-state="low"],
.nhs-stock[data-state="low"] .nhs-stock__note { color: #7a5f2c; }
.nhs-stock[data-state="low"] .nhs-stock__label { font-weight: 600; }

.nhs-dot {
  --nhs-dot: #2f7a53;
  --nhs-halo: rgba(47, 122, 83, .14);
  position: relative;
  flex: none;
  width: 7px;
  height: 7px;
}
.nhs-dot__ring,
.nhs-dot__core {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--nhs-dot);
}
.nhs-dot__core { box-shadow: 0 0 0 3px var(--nhs-halo); }
.nhs-dot__ring { opacity: 0; animation: nhs-pulse 2.6s cubic-bezier(.22, .61, .36, 1) infinite; }
.nhs-dot__ring--2 { display: none; }
/* Wenig Bestand: Bernstein (Rot ist im 3A-Design gestrichen), zwei versetzte Ringe + Doppelschlag. */
.nhs-stock[data-state="low"] .nhs-dot { --nhs-dot: #b8802a; --nhs-halo: rgba(184, 128, 42, .18); }
.nhs-stock[data-state="low"] .nhs-dot__ring { animation: nhs-urgent 1.4s cubic-bezier(.2, .7, .3, 1) infinite; }
.nhs-stock[data-state="low"] .nhs-dot__ring--2 { display: block; animation-delay: .22s; }
.nhs-stock[data-state="low"] .nhs-dot__core { animation: nhs-beat 1.4s ease-in-out infinite; }

.nhs-trust .nhs-stock + .buy-button { margin-top: 0 !important; }
.nhs-trust .nhs-stock[hidden] + .buy-button { margin-top: 20px !important; }

/* 15.4 Kaufknopf + Wunschliste: Knopf 44 × 44 im Abstand 6 (Theme-Grid `1fr 48px`, Luecke 4),
   Herz 18 px. Der Kaufknopf selbst bleibt unveraendert (Abschnitt 4). */
.nhs-trust .buy-button {
  margin-bottom: 0 !important;
  grid-template-columns: 1fr 44px !important;
  gap: 0 6px !important;
}
.nhs-trust .iwish-app-block-product.wishlist-icon {
  box-sizing: border-box;
  width: 44px !important;
  min-width: 44px;
  height: 44px !important;
}
.nhs-trust .iwish-app-block-product.wishlist-icon svg {
  width: 18px !important;
  height: 18px !important;
}

/* 15.5 Zusagen — 20 px unter dem Kaufknopf, 26 px bis zur ersten Akkordeon-Linie. */
.nhs-promises {
  margin: 20px 0 26px !important;
  padding: 0 !important;
  list-style: none !important;
  border-top: 1px solid #ececec;
  font-size: 12.5px;
  line-height: 1.4;
  color: #093425;
  container-type: inline-size;
}
/* Breit: eine Zeile — Haken | Zusage | Hinweis rechtsbuendig. */
.nhs-promises li {
  display: grid;
  grid-template-columns: 16px auto minmax(0, 1fr);
  align-items: center;
  column-gap: 12px;
  row-gap: 2px;
  margin: 0 !important;
  padding: 12px 0;
  border-bottom: 1px solid #ececec;
  list-style: none;
}
.nhs-promises li::before { content: none; }
.nhs-promises__title { font-weight: 500; }
.nhs-promises__note { justify-self: end; color: #6f7268; text-align: right; }
/* 16.10.2026 (CEO): Der rechtsbuendig umgebrochene Hinweis sah mobil zerrissen aus. Jetzt gilt:
   reicht die Breite nicht fuer die LAENGSTE Sprache, stehen ALLE Zeilen zweizeilig — Zusage oben,
   Hinweis grau darunter, beide an derselben Kante hinter dem Haken. Schwelle 440 px = breiteste
   Zeile 430 px (nl „Gratis verzending in de EU & Zwitserland | Vanaf € 150 bestelwaarde",
   gemessen 16.10.) + Reserve. Container- statt Bildschirmabfrage: die Spalte ist bei 820–1024 px
   schmaler (341–433 px) als bei 768 px (733 px, einspaltig). Gleiche Breite ⇒ gleiches Bild in
   jeder Sprache. */
@container (max-width: 439.98px) {
  .nhs-promises li { grid-template-columns: 16px minmax(0, 1fr); }
  .nhs-promises__note { grid-column: 2; justify-self: start; text-align: left; font-size: 12px; }
}
.nhs-check {
  flex: none;
  width: 16px;
  height: 16px;
  overflow: visible;
  color: #2f7a53;
  transform-origin: 50% 50%;
  animation: nhs-check 3.6s ease-in-out infinite;
}
.nhs-promises li:nth-child(2) .nhs-check { animation-delay: .45s; }

/* 15.6 Akkordeon: Linie OBEN am ersten Eintrag (26 px unter den Zusagen), alle Linien #e3e3e3.
   Verhalten unveraendert (Beschreibung bleibt offen, Handoff: „Akkordeon unveraendert"). */
.nhs-trust .nhs-promises + .product-block--tab { margin-top: 0 !important; }
.nhs-trust .nhs-promises + .product-block--tab .collapsibles-wrapper { border-top: 1px solid #e3e3e3; }
.nhs-trust .product-block--tab .collapsibles-wrapper,
.nhs-trust .product-block--tab .collapsible-trigger,
.nhs-trust .product-block--tab .collapsible-content { border-color: #e3e3e3 !important; }

/* 15.7 Groessen-Kaestchen. Spezifitaet bewusst NIEDRIG (`:where`, 0,2,0): Die breiten Text-Varianten
   aus assets/nhs-menu-custom.css („White / Large", Nennwerte; 0,2,1 bis 0,3,1) behalten so ihre
   Breite und ihr Polster (K222). Farbflaechen (`.color-swatch`) sind ausgenommen.
   Schrift bleibt 10 px / mobil 11 px (Abschnitt 5 bzw. 10, Typo-Regel CEO). */
.nhs-trust :where(.variant-input-wrap) .variant__button-label:where(:not(.color-swatch)) {
  box-sizing: border-box;
  width: auto;
  min-width: 40px;
  height: 36px;
  padding: 0 8px;
  border: 1px solid #8f9c95;
  border-radius: 0;
  background: #ffffff;
  color: #093425;
}
@media (hover: hover) {
  .nhs-trust .variant-input-wrap .variant__button-label:not(.color-swatch):not(.disabled):hover { border-color: #093425; }
}
/* Ausverkauft: Flaeche + EINE Diagonale (unten links → oben rechts) statt der Theme-Diagonale `::after`
   (theme.css 10024) zusaetzlich zur Durchstreichung — vorher war jede ausverkaufte Groesse doppelt gestrichen. */
.nhs-trust .variant-input-wrap .variant__button-label.disabled:not(.color-swatch) {
  border-color: #c4cbc6 !important;
  color: #6f7268 !important;
  text-decoration: line-through;
  -webkit-text-decoration: line-through;
  background:
    linear-gradient(to top right, transparent calc(50% - .6px), #b5c0ba calc(50% - .6px), #b5c0ba calc(50% + .6px), transparent calc(50% + .6px)),
    #f7f7f7 !important;
}
.nhs-trust .variant-input-wrap .variant__button-label.disabled:not(.color-swatch)::after { content: none !important; display: none !important; }
/* Gewaehlt: 2 px (Rand + Inset-Schatten). Der weisse 3-px-Innenring des Themes (`input:checked+label:before`,
   theme.css 10679, z-index 2) laege ueber dem Schatten — er entfaellt fuer Groessen-Kaestchen. */
.nhs-trust .variant-input-wrap input[type="radio"]:checked + .variant__button-label:not(.color-swatch) {
  border-color: #093425 !important;
  box-shadow: inset 0 0 0 1px #093425 !important;
  color: #093425 !important;
}
.nhs-trust .variant-input-wrap input[type="radio"]:checked + .variant__button-label:not(.color-swatch)::before { content: none !important; display: none !important; }
/* Handy: 46 × 44 (Trefferflaeche ≥ 44). Abschnitt 10 setzt dort `padding: 0 14px !important` —
   damit waere „2XL" 51 px breit statt 46; deshalb hier 0 10px (gilt auch fuer Text-Varianten, die
   nur 4 px Polster je Seite verlieren und weiter so breit wie ihr Text sind). */
@media only screen and (max-width: 768px) {
  .nhs-trust .variant-input-wrap .variant__button-label:not(.color-swatch) {
    min-width: 46px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 10px !important;
  }
}

/* 15.8 Bewegung — exakt aus dem Handoff. Nur transform/opacity/filter, kein Layout-Shift. */
@keyframes nhs-pulse  { 0% { transform: scale(1); opacity: .5 } 75%, 100% { transform: scale(3.2); opacity: 0 } }
@keyframes nhs-urgent { 0% { transform: scale(1); opacity: .55 } 60%, 100% { transform: scale(3); opacity: 0 } }
@keyframes nhs-beat   { 0%, 100% { transform: scale(1) } 12% { transform: scale(1.3) } 24% { transform: scale(1) } 36% { transform: scale(1.18) } 50% { transform: scale(1) } }
@keyframes nhs-check  {
  0%, 100% { transform: scale(1); opacity: 1; filter: drop-shadow(0 0 0 currentColor) }
  50% { transform: scale(1.07); opacity: .78; filter: drop-shadow(0 0 2.5px currentColor) }
}
@media (prefers-reduced-motion: reduce) {
  .nhs-dot__ring,
  .nhs-dot__core,
  .nhs-check { animation: none !important; }
  .nhs-dot__ring { display: none !important; }
}

/* ==========================================================================
   16 — WARENKORB V3 (CEO-Design „Warenkorb", 16.10.2026)
   Quelle: theme-work/nhs/_design/warenkorb-set/design_handoff_warenkorb_set/README.md §1–4 und
   Warenkorb.dc.html (1a Drawer Desktop 420 px · 1b Drawer Handy · 1c /cart 1200 px · 1d /cart Handy).
   Markup: snippets/cart-drawer.liquid, cart-item.liquid, nhs-ship.liquid, nhs-cart-set.liquid,
   sections/main-cart.liquid. Loest Abschnitt 8b ab.
   Bewusste Abweichungen (Typo-Regel CEO, „wie bisher gebaut"):
     · Kasse-Knopf behaelt 11,5 px / 700 wie der Kaufknopf (Abschnitt 4) — Design nennt 600.
     · Groessen-Kaestchen im Set-Angebot = Kaestchen der Produktseite (10 px / mobil 11 px, .10em),
       Design nennt 12,5 px; „Stil wie Produktseite" hat Vorrang.
   Selektoren mit Container-ID: Dieselben Klassen stehen im Drawer UND auf /cart (K119); die ID hebt
   ausserdem ueber die globalen Regeln aus Abschnitt 6 und 10 (`.js-qty__num … !important`).
   ========================================================================== */

/* 16.1 Drawer-Rahmen und Kopf */
#CartDrawer.drawer--right { max-width: 420px; }
@media only screen and (max-width: 768px) {
  #CartDrawer.drawer--right { max-width: 100%; }
}
#CartDrawer { background-color: #ffffff; color: #093425; font-size: 13px; line-height: 1.6; }
#CartDrawer .drawer__fixed-header,
#CartDrawer .drawer__header { min-height: 0; }
/* min-height 0 lets the flex column (.drawer__contents) SHRINK the header on short phones: 390x664 squeezed it from
   157.9 to 138.6 px and the ship bar covered the first cart line by 19 px (measured 16.10.2026). Header never shrinks. */
#CartDrawer .drawer__fixed-header { flex-shrink: 0; }
#CartDrawer .drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 10px 12px 22px;
  border-bottom: 1px solid #e3e3e3;
}
#CartDrawer .nhs-cart__title { display: flex; align-items: baseline; gap: 8px; width: auto; margin: 0; }
#CartDrawer .nhs-cart__heading {
  font-family: var(--typeHeaderPrimary), var(--typeHeaderFallback);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-transform: none;
  color: #093425;
}
.nhs-cart__count { font-size: 12px; font-weight: 400; letter-spacing: 0; text-transform: none; color: #6f7268; }
#CartDrawer .drawer__close-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  min-width: 44px;
  color: #6f7268;
}
#CartDrawer .drawer__close-button .icon { width: 30px; height: 30px; }
#CartDrawer .drawer__scrollable { padding: 0; }

/* 16.2 Versand-Fortschritt (Drawer unter dem Kopf, /cart als Box) */
.nhs-ship { display: flex; flex-direction: column; gap: 9px; color: #093425; }
.nhs-ship[hidden] { display: none !important; }
#CartDrawer .nhs-ship { padding: 14px 22px 16px; border-bottom: 1px solid #ececec; }
.nhs-ship--page { padding: 16px 18px 15px; border: 1px solid #e3e3e3; }
.nhs-ship__text { display: flex; align-items: center; gap: 9px; font-size: 12.5px; line-height: 1.4; }
.nhs-ship--page .nhs-ship__text { font-size: 13px; }
.nhs-ship__text b { font-weight: 600; }
.nhs-ship__check { display: none; }
.nhs-ship[data-state="reached"] .nhs-ship__check { display: inline-block; }
.nhs-ship__track { position: relative; height: 3px; background: #ececec; }
.nhs-ship__fill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: var(--p, 0%);
  background: #093425;
  transition: width .6s cubic-bezier(.22, .61, .36, 1), background-color .3s ease;
}
.nhs-ship[data-state="reached"] .nhs-ship__fill { background: #2f7a53; }
.nhs-ship__head {
  position: absolute;
  top: 50%;
  left: var(--p, 0%);
  display: none;
  transform: translate(-50%, -50%);
  transition: left .6s cubic-bezier(.22, .61, .36, 1);
}
.nhs-ship[data-state="near"] .nhs-ship__head { display: flex; }
.nhs-ship__scope { font-size: 11px; line-height: 1.4; color: #6f7268; }

/* 16.3 Artikelzeile — Drawer/Handy: Bild 72 × 90 links, rechts Name+Summe, Groesse, Preise,
   darunter Stepper + „Entfernen". /cart Desktop (ab 769): Grid Produkt | Menge | Summe (16.6). */
.nhs-line {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  grid-template-areas: "img body" "img actions";
  column-gap: 14px;
  align-items: start;
  color: #093425;
}
#CartDrawer .nhs-line { padding: 16px 22px; border-bottom: 1px solid #ececec; }
#CartPageForm .nhs-line { padding: 16px 0; border-bottom: 1px solid #ececec; }
.nhs-line.is-busy { opacity: .5; pointer-events: none; }
:is(#CartDrawer, #CartPageForm) .nhs-line__img {
  grid-area: img;
  display: block;
  width: 72px;
  height: 90px;
  background: #f7f7f7;
  overflow: hidden;
}
:is(#CartDrawer, #CartPageForm) .nhs-line__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.nhs-line__body { grid-area: body; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.nhs-line__top { display: flex; align-items: baseline; gap: 10px; }
:is(#CartDrawer, #CartPageForm) .nhs-line__name {
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #093425;
  text-decoration: none;
}
.nhs-line__total { margin-left: auto; font-size: 12.5px; font-weight: 500; line-height: 1.35; white-space: nowrap; }
.nhs-line__total--col { display: none; }
.nhs-line__meta { font-size: 12px; line-height: 1.35; color: #6f7268; }
.nhs-line__prices { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 12px; line-height: 1.35; }
.nhs-line__was { color: #6f7268; text-decoration: line-through; }
.nhs-tag {
  padding: 2px 6px;
  background: #7a5f2c;
  color: #ffffff;
  font-size: 9.5px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.nhs-line__actions { grid-area: actions; display: flex; align-items: center; gap: 14px; margin-top: 8px; }
:is(#CartDrawer, #CartPageForm) .nhs-line__remove {
  min-height: 32px;
  padding: 0;
  background: none;
  border: 0;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: none;
  color: #6f7268;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
:is(#CartDrawer, #CartPageForm) .nhs-line__remove--body { display: none; }

/* 16.4 Mengen-Stepper: [−] Zahl [+], Rand #c4cbc6, Zahl zwischen Linien #ececec. Die Theme-Klassen bleiben
   (theme.QtySelector); ihre Geometrie (absolute Knoepfe, Breite 60–80 px) wird hier ersetzt. Die Zahl ist ein
   readonly-Feld: kein Tippen (das Design zeigt eine Zahl), kein iOS-Zoom unter 16 px. */
:is(#CartDrawer, #CartPageForm) .nhs-qty.js-qty__wrapper {
  position: relative;
  display: inline-flex;
  align-items: stretch;
  box-sizing: border-box;
  width: auto;
  min-width: 0;
  max-width: none;
  height: 32px;
  min-height: 0;
  border: 1px solid #c4cbc6;
  background: #ffffff;
  color: #093425;
}
:is(#CartDrawer, #CartPageForm) .nhs-qty .js-qty__adjust {
  position: static;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 32px;
  width: 32px;
  height: auto;
  padding: 0;
  border: 0;
  background: none;
  color: #093425;
  fill: none;
}
:is(#CartDrawer, #CartPageForm) .nhs-qty .js-qty__adjust svg { display: block; width: 14px; height: 14px; }
:is(#CartDrawer, #CartPageForm) .nhs-qty .js-qty__num {
  flex: 0 0 28px;
  width: 28px;
  height: auto;
  min-height: 0 !important;
  margin: 0;
  padding: 0;
  border: 0;
  border-left: 1px solid #ececec;
  border-right: 1px solid #ececec;
  border-radius: 0;
  background: none;
  font-size: 12.5px !important;
  font-weight: 500;
  line-height: 1;
  text-align: center;
  color: #093425;
  cursor: default;
}
@media (hover: hover) {
  :is(#CartDrawer, #CartPageForm) .nhs-qty .js-qty__adjust:hover { background: #f7f7f7; color: #093425; }
}
@media only screen and (max-width: 768px) {
  :is(#CartDrawer, #CartPageForm) .nhs-qty.js-qty__wrapper { height: 44px; min-height: 0; }
  :is(#CartDrawer, #CartPageForm) .nhs-qty .js-qty__adjust { flex-basis: 44px; width: 44px; }
  :is(#CartDrawer, #CartPageForm) .nhs-line__remove { min-height: 44px; }
}

/* 16.5 Set-Angebot im Warenkorb (README §3) */
.nhs-cart-set { color: #093425; }
#CartDrawer .nhs-cart-set { padding: 16px 22px 18px; border-bottom: 1px solid #ececec; }
#CartPageForm .nhs-cart-set { margin-top: 28px; padding: 18px; border: 1px solid #e3e3e3; }
.nhs-cart-set__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.nhs-cart-set__eyebrow { font-size: 10.5px; font-weight: 600; line-height: 1.3; letter-spacing: .16em; text-transform: uppercase; }
.nhs-cart-set__badge,
.nhs-set__badge {
  flex: none;
  padding: 3px 7px;
  background: #7a5f2c;
  color: #ffffff;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.nhs-cart-set__row { display: flex; gap: 14px; margin-top: 12px; }
#CartPageForm .nhs-cart-set__row { gap: 16px; margin-top: 14px; }
.nhs-cart-set__img { flex: none; width: 72px; height: 90px; background: #f7f7f7; overflow: hidden; }
.nhs-cart-set__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.nhs-cart-set__body { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.nhs-cart-set__top { display: flex; align-items: baseline; gap: 10px; }
.nhs-cart-set__name { font-size: 11.5px; font-weight: 500; line-height: 1.35; letter-spacing: .06em; text-transform: uppercase; }
.nhs-cart-set__prices { display: flex; align-items: baseline; gap: 7px; margin-left: auto; white-space: nowrap; }
.nhs-cart-set__was { font-size: 12px; color: #6f7268; text-decoration: line-through; }
.nhs-cart-set__now { font-size: 12.5px; font-weight: 500; }
.nhs-cart-set__meta { font-size: 12px; line-height: 1.35; color: #6f7268; }
.nhs-cart-set__unlock { display: flex; align-items: center; gap: 6px; margin-top: 2px; font-size: 12px; font-weight: 500; line-height: 1.35; color: #2f7a53; }
.nhs-cart-set__unlock[hidden] { display: none; }
.nhs-cart-set__pick { display: flex; flex-direction: column; }
.nhs-cart-set__sizes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.nhs-cart-set__btn {
  width: 100%;
  height: 40px;
  margin-top: 10px;
  padding: 0 16px;
  background: #ffffff;
  border: 1px solid #093425;
  border-radius: 0;
  font-family: inherit;
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .16em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #093425;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.nhs-cart-set__btn:focus-visible { background: #093425; color: #ffffff; }
.nhs-cart-set__btn:active { background: #06251a; color: #ffffff; }
.nhs-cart-set__btn[aria-busy="true"] { pointer-events: none; opacity: .6; }
.nhs-cart-set__error { margin: 8px 0 0; font-size: 12px; line-height: 1.4; color: #7a5f2c; }
.nhs-cart-set__error:empty { display: none; }
@media (hover: hover) {
  .nhs-cart-set__btn:hover { background: #093425; color: #ffffff; }
}
/* /cart: Kaestchen und Knopf nebeneinander (Knopf flex 1, mind. 200 px), Bild 96 × 120 ab 769 px */
#CartPageForm .nhs-cart-set__pick { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 10px; }
#CartPageForm .nhs-cart-set__sizes { margin-top: 0; }
#CartPageForm .nhs-cart-set__btn { flex: 1; min-width: 200px; width: auto; margin-top: 0; }
@media only screen and (min-width: 769px) {
  #CartPageForm .nhs-cart-set__img { width: 96px; height: 120px; }
}

/* Groessen-Kaestchen von Set-Angebot (Warenkorb) und Set-Karte (Produktseite): Zustaende wie 15.7,
   Schrift wie die Kaestchen oben auf der Produktseite (10 px / mobil 11 px, .10em). */
.nhs-cart-set__size,
.nhs-set__size {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 40px;
  height: 36px;
  margin: 0;
  padding: 0 8px;
  background: #ffffff;
  border: 1px solid #8f9c95;
  border-radius: 0;
  font-family: inherit;
  font-size: 10px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: .10em;
  color: #093425;
  cursor: pointer;
}
.nhs-cart-set__size[aria-checked="true"],
.nhs-set__size[aria-checked="true"] { border-color: #093425; box-shadow: inset 0 0 0 1px #093425; }
.nhs-cart-set__size:disabled,
.nhs-set__size:disabled {
  border-color: #c4cbc6;
  color: #6f7268;
  text-decoration: line-through;
  cursor: default;
  background:
    linear-gradient(to top right, transparent calc(50% - .6px), #b5c0ba calc(50% - .6px), #b5c0ba calc(50% + .6px), transparent calc(50% + .6px)),
    #f7f7f7;
}
@media (hover: hover) {
  .nhs-cart-set__size:not(:disabled):hover,
  .nhs-set__size:not(:disabled):hover { border-color: #093425; }
}
@media only screen and (max-width: 768px) {
  .nhs-cart-set__size { min-width: 44px; height: 44px; font-size: 11px; }
  .nhs-set__size { min-width: 46px; height: 44px; padding: 0 10px; font-size: 11px; }
  .nhs-cart-set__btn { height: 44px; }
}

/* 16.6 /cart: Titel, Spalten, Tabellenkopf, Zeilen-Grid ab 769 px */
.nhs-cartpage__head { display: flex; align-items: baseline; gap: 12px; margin: 0 0 28px; }
.nhs-cartpage__title {
  margin: 0;
  font-family: var(--typeHeaderPrimary), var(--typeHeaderFallback);
  font-size: 34px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-transform: none;
  color: #093425;
}
.nhs-cartpage__count { font-size: 12.5px; color: #6f7268; }
.nhs-cartpage__grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 56px; align-items: start; color: #093425; }
.nhs-cartpage__main { display: flex; flex-direction: column; min-width: 0; }
.nhs-cartpage__thead {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 150px 110px;
  gap: 16px;
  margin-top: 28px;
  padding-bottom: 10px;
  border-bottom: 1px solid #e3e3e3;
  font-size: 10.5px;
  line-height: 1.3;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #6f7268;
}
.nhs-cartpage__thead span:last-child { text-align: right; }
@media only screen and (min-width: 769px) {
  #CartPageForm .nhs-line {
    grid-template-columns: 96px minmax(0, 1fr) 150px 110px;
    grid-template-areas: "img body actions total";
    column-gap: 16px;
    align-items: center;
    padding: 20px 0;
  }
  #CartPageForm .nhs-line__img { width: 96px; height: 120px; align-self: start; }
  #CartPageForm .nhs-line__body { align-self: start; }
  #CartPageForm .nhs-line__top .nhs-line__total { display: none; }
  #CartPageForm .nhs-line__total--col { display: block; grid-area: total; text-align: right; font-size: 13px; }
  #CartPageForm .nhs-line__actions { margin-top: 0; }
  #CartPageForm .nhs-line__remove--actions { display: none; }
  #CartPageForm .nhs-line__remove--body { display: inline-block; align-self: flex-start; min-height: 20px; margin-top: 8px; }
  #CartPageForm .nhs-qty.js-qty__wrapper { height: 40px; }
  #CartPageForm .nhs-qty .js-qty__adjust { flex-basis: 40px; width: 40px; }
  #CartPageForm .nhs-qty .js-qty__num { flex-basis: 34px; width: 34px; }
}
@media only screen and (max-width: 768px) {
  .nhs-cartpage__head { margin-bottom: 20px; }
  .nhs-cartpage__title { font-size: 24px; }
  .nhs-cartpage__grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  /* Handy: kein Tabellenkopf, nur die Linie 12 px unter der Versand-Box (1d) */
  .nhs-cartpage__thead { display: block; height: 12px; margin-top: 0; padding: 0; }
  .nhs-cartpage__thead span { display: none; }
}

/* 16.7 Fuss (Drawer) und Bestelluebersicht (/cart) */
#CartDrawer .drawer__footer {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px 22px 20px;
  background: #f7f7f7;
  border-top: 1px solid #e3e3e3;
}
.nhs-sum--page { display: flex; flex-direction: column; gap: 8px; padding: 24px 24px 22px; background: #f7f7f7; }
.nhs-sum__title { margin: 0 0 6px; font-size: 10.5px; font-weight: 600; line-height: 1.3; letter-spacing: .16em; text-transform: uppercase; }
.nhs-sum__row { display: flex; justify-content: space-between; gap: 12px; font-size: 12.5px; line-height: 1.4; }
.nhs-sum__row[hidden] { display: none; }
.nhs-sum__row--disc > span:last-child { color: #7a5f2c; font-weight: 500; }
.nhs-sum__row--ship > span:last-child { color: #6f7268; }
.nhs-sum__row--ship > span.is-free { color: #2f7a53; font-weight: 600; }
.nhs-sum__row--total { align-items: baseline; margin-top: 4px; padding-top: 12px; border-top: 1px solid #e3e3e3; }
:is(#CartDrawer, #CartPageForm) .nhs-sum__row--total > span:first-child {
  font-size: 12px !important;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}
:is(#CartDrawer, #CartPageForm) .nhs-sum__row--total > span:last-child { font-size: 14px !important; font-weight: 600; letter-spacing: 0; }
#CartPageForm .nhs-sum__row--total > span:last-child { font-size: 15px !important; }
.nhs-sum__note { margin: 0; font-size: 11px; line-height: 1.55; color: #6f7268; }
#CartDrawer .nhs-sum__note { text-align: center; }
:is(#CartDrawer, #CartPageForm) .cart__checkout-wrapper { margin-top: 4px; }
#CartPageForm .cart__checkout-wrapper { margin-top: 6px; }
:is(#CartDrawer, #CartPageForm) .btn.cart__checkout {
  display: flex !important;
  align-items: center;
  justify-content: center;
  height: 44px;
  min-height: 44px;
  padding: 0 20px !important;
  letter-spacing: .16em !important;
  white-space: nowrap;
}
.nhs-sum__trust { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 4px 0 0; font-size: 11.5px; line-height: 1.4; color: #6f7268; }
.nhs-sum__promises { margin: 10px 0 0 !important; padding: 0 !important; list-style: none !important; border-top: 1px solid #e3e3e3; font-size: 12px; line-height: 1.4; }
.nhs-sum__promises li { display: flex; align-items: center; gap: 10px; margin: 0 !important; padding: 10px 0; font-weight: 500; list-style: none; }
.nhs-sum__promises li::before { content: none; }
.nhs-sum__promises li + li { border-top: 1px solid #e3e3e3; }
.nhs-sum__promises li:nth-child(2) .nhs-check { animation-delay: .45s; }
@media only screen and (max-width: 768px) {
  .nhs-sum--page { padding: 20px 18px; }
}

/* 16.8 Leerer Warenkorb (Drawer: das Theme zentriert sonst ueber `calc(100% - 80px)`) */
#CartDrawer .drawer__cart-empty { justify-content: flex-start; gap: 10px; height: auto; padding: 56px 22px; text-align: center; }
.nhs-empty__title {
  margin: 0;
  font-family: var(--typeHeaderPrimary), var(--typeHeaderFallback);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  color: #093425;
}
:is(#CartDrawer, .nhs-cartpage) .nhs-empty__link {
  padding: 8px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #7a5f2c;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.nhs-empty--page { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 48px 0; text-align: center; }

/* ==========================================================================
   17 — SET-KARTE PRODUKTSEITE (CEO-Design V3, Variante 1a, 16.10.2026)
   Quelle: …/warenkorb-set/design_handoff_warenkorb_set/produkt-set/README.md. Markup: snippets/nhs-pdp-set.liquid
   (gerendert direkt nach `.nhs-promises`). Zusagen → Karte 24 px, Karte → erste Akkordeon-Linie 26 px.
   ========================================================================== */
.nhs-promises:has(+ .nhs-set:not([hidden])) { margin-bottom: 24px !important; }
.nhs-set {
  margin: 0 0 26px;
  padding: 18px;
  background: #ffffff;
  border: 1px solid #e3e3e3;
  border-radius: 0;
  color: #093425;
}
.nhs-set[hidden] { display: none !important; }
.nhs-trust .nhs-set + .product-block--tab { margin-top: 0 !important; }
.nhs-trust .nhs-set + .product-block--tab .collapsibles-wrapper { border-top: 1px solid #e3e3e3; }
.nhs-set__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.nhs-set__eyebrow { font-size: 10.5px; font-weight: 600; line-height: 1.3; letter-spacing: .16em; text-transform: uppercase; }
.nhs-set__sub { margin: 6px 0 0; font-size: 12.5px; line-height: 1.5; color: #6f7268; text-wrap: pretty; }
.nhs-set__items { margin: 14px 0 0 !important; padding: 0 !important; list-style: none !important; border-top: 1px solid #ececec; }
.nhs-set__item { display: flex; align-items: center; gap: 12px; margin: 0 !important; padding: 12px 0; border-bottom: 1px solid #ececec; list-style: none; }
.nhs-set__item::before { content: none; }
.nhs-set__item--partner { align-items: flex-start; }
.nhs-set__img { flex: none; width: 56px; height: 70px; background: #f7f7f7; overflow: hidden; }
.nhs-set__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.nhs-set__info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.nhs-set__item--partner .nhs-set__info { flex: 1; gap: 8px; }
.nhs-set__name { font-size: 11.5px; font-weight: 500; line-height: 1.35; letter-spacing: .06em; text-transform: uppercase; }
.nhs-set__meta { font-size: 12px; line-height: 1.35; color: #6f7268; }
.nhs-set__price { margin-left: auto; font-size: 12.5px; font-weight: 500; line-height: 1.35; white-space: nowrap; }
.nhs-set__row { display: flex; align-items: baseline; gap: 10px; }
.nhs-set__prices { display: flex; align-items: baseline; gap: 7px; margin-left: auto; font-size: 12.5px; line-height: 1.35; white-space: nowrap; }
.nhs-set__was { font-size: 12px; color: #6f7268; text-decoration: line-through; }
.nhs-set__now { font-weight: 500; }
.nhs-set__sizes { display: flex; flex-wrap: wrap; gap: 6px; }
.nhs-set__total { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 14px; }
.nhs-set__total-label { font-size: 12.5px; font-weight: 500; }
.nhs-set__total-prices { display: flex; align-items: baseline; gap: 8px; font-size: 14px; line-height: 1.3; }
.nhs-set__total-was { font-size: 12.5px; color: #6f7268; text-decoration: line-through; }
.nhs-set__total-now { font-weight: 500; }
.nhs-set__save { margin-top: 2px; font-size: 12px; line-height: 1.4; color: #7a5f2c; text-align: right; }
.nhs-set__btn {
  display: block;
  width: 100%;
  height: 44px;
  margin-top: 14px;
  padding: 0 20px;
  background: #ffffff;
  border: 1px solid #093425;
  border-radius: 0;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .16em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #093425;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.nhs-set__btn:focus-visible { background: #093425; color: #ffffff; }
.nhs-set__btn:active { background: #06251a; color: #ffffff; }
.nhs-set__btn[aria-busy="true"] { pointer-events: none; }
@media (hover: hover) {
  .nhs-set__btn:hover { background: #093425; color: #ffffff; }
}
.nhs-set__error { margin: 8px 0 0; font-size: 12px; line-height: 1.4; color: #7a5f2c; }
.nhs-set__error:empty { display: none; }
@media only screen and (max-width: 768px) {
  /* Lange Knopftexte (cs/no) duerfen auf 330 px nicht abschneiden — wie beim Kaufknopf engere Sperrung. */
  .nhs-set__btn { padding: 0 12px; letter-spacing: .12em; }
}
@media (prefers-reduced-motion: reduce) {
  .nhs-ship__fill,
  .nhs-ship__head,
  .nhs-set__btn,
  .nhs-cart-set__btn { transition: none !important; }
}