/**
 * ALP Nutrition Design-System: Produktseite (PDP)
 * Baut auf tokens/base/components auf. Akzent kommt per data-accent auf .pdp.
 */

.pdp { --surface: var(--paper); }

/* Breadcrumb */
.breadcrumb { padding-block: var(--s5) 0; font-size: var(--fs-micro); color: var(--ink-subtle); }
.breadcrumb a { color: var(--ink-muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--ink); }
.breadcrumb span { margin: 0 8px; opacity: .6; }

/* ============ Buybox-Row ============ */
.pdp-top {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(32px, 4vw, 64px);
  align-items: start;
  padding-block: var(--s7) var(--s9);
}
@media (max-width: 899px) { .pdp-top { grid-template-columns: 1fr; gap: var(--s7); } }

/* Galerie: lebt komplett im v3-Block "PDP-Elevation" weiter unten
   (Deep-Color-Buehne); der v1-Altbestand wurde entfernt (Audit P1). */

/* Buybox */
.buybox__eyebrow {
  font-size: var(--fs-data); font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--acc-text); font-variant-numeric: tabular-nums; margin-bottom: var(--s3);
}
.buybox h1 { font-size: var(--fs-page-title-col); line-height: 1.08; letter-spacing: -0.015em; margin-bottom: var(--s4); }
.buybox__rating { display: flex; align-items: center; gap: var(--s2); font-size: var(--fs-meta); color: var(--ink-muted); margin-bottom: var(--s5); }
.buybox__rating .stars { color: #E8A93B; letter-spacing: 1px; }
.buybox__rating a { color: var(--ink-muted); text-decoration: underline; text-underline-offset: 2px; }

.buybox__benefits { list-style: none; margin: 0 0 var(--s6); padding: 0; display: grid; gap: var(--s3); }
.buybox__benefits li { display: flex; align-items: baseline; gap: var(--s3); font-size: var(--fs-meta); }
.buybox__benefits svg { width: 18px; height: 18px; color: var(--green-ok); flex: none; transform: translateY(3px); }

/* Buy-Card v1 (Lime-Cream-Karte) entfernt: die offene v3-Buybox weiter unten
   ist der freigegebene Endzustand. Ebenso entfernt (Audit P1, kein Markup):
   .buybox__price-row/-price/-ppu/-gm sowie der v1-Prototyp-Stepper
   .buybox__qty/.buybox__stepper (Preis laeuft ueber .buybox__pricewrap .price,
   Stepper ueber das Woo-quantity-Markup + main.js). */
.buybox .btn { width: 100%; }

.buybox__trust { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); margin-top: var(--s5); font-size: var(--fs-micro); color: var(--ink-muted); }
.buybox__trust span { display: inline-flex; align-items: center; gap: 6px; }
.buybox__trust svg { width: 15px; height: 15px; color: var(--green-ok); }

/* ============ Verzehr-Ritual ============ */
/* Kein eigener Hintergrund mehr: die Farbe kommt aus on-bg/on-paper,
   damit der Wechsel der Baender stimmt (siehe alp_pdp_band). */
.ritual__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gutter); }
.ritual__step {
  display: flex; flex-direction: column; gap: var(--s2);
  background: var(--paper); border-radius: var(--r-surface); padding: var(--s7);
  box-shadow: var(--sh-card);
  transition: transform var(--t-med) var(--ease-out), box-shadow var(--t-med) var(--ease-out);
}
.ritual__step:hover { transform: translateY(-4px); box-shadow: var(--sh-card-hover); }
.ritual__num {
  width: 40px; height: 40px; border-radius: var(--r-pill);
  display: flex; align-items: center; justify-content: center;
  background: var(--acc-soft); color: var(--acc-text); font-weight: 700; font-variant-numeric: tabular-nums;
  margin-bottom: var(--s2);
}
.ritual__step h3 { font-size: var(--fs-h4); }
.ritual__step p { font-size: var(--fs-meta); color: var(--ink-muted); }
@media (max-width: 719px) { .ritual__grid { grid-template-columns: 1fr; gap: var(--s6); } }

/* ".whatsin"-Sektion und ".nutri"-Tabellensystem v1 entfernt (Audit P1):
   kein Markup-Treffer; die Live-Naehrwerttabelle laeuft ueber .alp-nutrition,
   nur .nutri-note (single-product.php) lebt und ist unten definiert. */

/* ============ Benefits-Register (8er features) ============ */
.benefits__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); columns: 2; column-gap: var(--s8); }
.benefits__list li { break-inside: avoid; display: grid; grid-template-columns: 40px 1fr; gap: var(--s3); padding: var(--s4) 0; border-bottom: 1px solid var(--line); }
.benefits__list .idx { font-size: var(--fs-data); font-weight: 600; color: var(--acc-text); font-variant-numeric: tabular-nums; padding-top: 3px; }
.benefits__list b { display: block; font-size: var(--fs-body); margin-bottom: 2px; }
.benefits__list p { font-size: var(--fs-meta); color: var(--ink-muted); }
@media (max-width: 719px) { .benefits__list { columns: 1; } }

/* ============ Cross-Sell ============ */
.crosssell__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gutter); }
@media (max-width: 899px) { .crosssell__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 559px) { .crosssell__grid { grid-template-columns: 1fr; } }

/* =========================================================================
 * WooCommerce- / German-Market-Output-Glue (Live-Daten in unser Design)
 * Klassen kommen aus Woo/GM; hier auf das Design-System gemappt.
 * ========================================================================= */

/* Benefit-Bullet: Text steht jetzt in einem <span> neben dem Haken */
.buybox__benefits li span { display: block; }
.buybox__benefits b { font-weight: 700; }

/* Preis (woocommerce_template_single_price + GM MwSt/Grundpreis) */
.buybox__pricewrap .price { margin: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 8px; line-height: 1.45; font-family: var(--sans); }
.buybox__pricewrap .price .amount,
.buybox__pricewrap .price ins .amount { font-size: var(--fs-h3-lg); font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; line-height: 1.1; }
.buybox__pricewrap .price .woocommerce-Price-currencySymbol { font-weight: 600; }
.buybox__pricewrap .price ins { text-decoration: none; }
.buybox__pricewrap .price del,
.buybox__pricewrap .price del .amount { font-size: var(--fs-h4); font-weight: 500; color: var(--ink-subtle); }
/* GM-Zusatzinfos (MwSt-Hinweis, Grundpreis, Versand, Lieferzeit): kompakter, sekundaerer Block */
.buybox__pricewrap .price small,
.buybox__pricewrap .price .woocommerce-price-suffix,
.buybox__pricewrap .wgm-info,
.buybox__pricewrap .woocommerce-de-price-taxrate,
.buybox__pricewrap .woocommerce-grundpreis,
.buybox__pricewrap .price-per-unit,
.buybox__pricewrap .price_including_tax,
.buybox__pricewrap .price_excluding_tax { flex-basis: 100%; margin: 0; font-size: var(--fs-micro); font-weight: 400; line-height: 1.5; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
/* erste Zusatzzeile bekommt etwas Luft zum grossen Preis */
.buybox__pricewrap .price small:first-of-type,
.buybox__pricewrap .price .woocommerce-de-price-taxrate:first-of-type { margin-top: 4px; }

/* Variations-Auswahl (variable Produkte, z.B. "Inhalt: 14 x 25 ml") */
.pdp .variations { border-collapse: collapse; width: 100%; margin: 0 0 var(--s4); }
.pdp .variations tr { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); }
.pdp .variations th.label { font-size: var(--fs-meta); font-weight: 600; color: var(--ink-muted); padding: 0; white-space: nowrap; }
.pdp .variations td.value { flex: 1 1 auto; padding: 0; }
.pdp .variations select {
  width: 100%; min-height: 48px; padding: 0 var(--s4);
  border: 1.5px solid var(--line); border-radius: var(--r-chip); background: #fff;
  font-family: var(--sans); font-size: var(--fs-meta); color: var(--ink); cursor: pointer;
}
.pdp .reset_variations { display: none; }
/* Preis/Verfuegbarkeit im Variations-Formular ausblenden: der grosse Preis steht oben */
.pdp .woocommerce-variation-price,
.pdp .woocommerce-variation-availability { display: none; }
.pdp .woocommerce-variation.single_variation { margin-bottom: var(--s3); }

/* Warenkorb-Form (woocommerce_template_single_add_to_cart) */
.pdp .buybox__cart { margin-top: var(--s5); }
.pdp .buybox__cart form.cart { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; margin: 0; }
.pdp .buybox__cart .quantity {
  display: inline-flex; align-items: center; position: relative;
  border: 1.5px solid var(--line); border-radius: var(--r-pill); overflow: hidden; background: #fff;
}
.pdp .buybox__cart .quantity label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.pdp .buybox__cart .quantity .alp-qty-btn {
  width: 46px; height: 50px; border: none; background: none; font-size: var(--fs-lead); line-height: 1;
  color: var(--ink); cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: color var(--t-fast) var(--ease);
}
.pdp .buybox__cart .quantity .alp-qty-btn:hover { color: var(--acc-text); }
.pdp .buybox__cart .quantity .qty {
  width: 46px; height: 50px; text-align: center; font-size: var(--fs-body); font-weight: 600;
  border: none; border-radius: 0; background: none; color: var(--ink);
  font-variant-numeric: tabular-nums; -moz-appearance: textfield; appearance: textfield;
}
.pdp .buybox__cart .quantity .qty::-webkit-outer-spin-button,
.pdp .buybox__cart .quantity .qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
/* Woo/German-Market/LiteSpeed setzen den Button-Default (#7f54b3) teils via !important
   oder inline-UCSS – daher hier bewusst mit !important auf das Akzent-System gemappt. */
.pdp .buybox__cart .single_add_to_cart_button,
.pdp .buybox__cart button.single_add_to_cart_button {
  flex: 1 1 auto; min-height: 52px; padding: 0 var(--s6);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  font-family: var(--sans); font-size: var(--fs-body); font-weight: 600; line-height: 1;
  /* Primaerer Kauf-Button = Lime (Primaer-CTA der ganzen Seite), immer kraeftig,
     unabhaengig vom Produkt-Akzent (der teils off-palette ist, z.B. Carnitin-Teal). */
  color: var(--ink) !important; background: var(--lime) !important;
  border: none !important; border-radius: var(--r-pill) !important;
  cursor: pointer; text-decoration: none;
  box-shadow: 0 1px 2px rgba(90,110,10,.18), 0 12px 24px -12px rgba(120,145,15,.5);
  transition: background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.pdp .buybox__cart .single_add_to_cart_button:hover { background: var(--lime-deep) !important; }
.pdp .buybox__cart .single_add_to_cart_button:active { transform: translateY(1px); }
.pdp .buybox__cart .single_add_to_cart_button:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }
/* Restliche Woo-Hinweise im Cart klein halten */
.pdp .buybox__cart .stock { font-size: var(--fs-micro); color: var(--ink-muted); flex-basis: 100%; margin: 0; }

/* =========================================================================
 * PDP-Restruktur v2 (Research-Spec): ruhige Long-Scroll-Sektionen.
 * Wirkstoffe = Definitionsliste, Naehrwerte = Laborbericht-Tabelle, FAQ vollbreit.
 * ========================================================================= */

/* Wirkstoffe: ruhige 2-spaltige Definitionsliste (keine Karten, keine Ticks, keine Nummern) */
.actives { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s9); border-top: 1px solid var(--line); }
.actives__row { min-width: 0; padding: var(--s5) 0; border-bottom: 1px solid var(--line); }
.actives dt { font-family: var(--sans); font-weight: 700; font-size: var(--fs-body); color: var(--ink); margin-bottom: 3px; }
.actives dd { margin: 0; color: var(--ink-muted); font-size: var(--fs-meta); line-height: 1.55; max-width: 48ch; }
@media (max-width: 719px) { .actives { grid-template-columns: 1fr; column-gap: 0; } }

/* Naehrwerte: Laborbericht-Tabelle, markup- UND spaltenzahl-agnostisch
   (ACF-HTML variiert: mal 3 Spalten, mal 4-spaltig zweisprachig).
   Volle Rail-Breite: Namensspalte nimmt den Freiraum, Zahlen buendeln rechts an der Kante. */
.alp-nutrition { max-width: none; overflow-x: auto; }
.alp-nutrition table { width: 100%; min-width: 440px; border-collapse: collapse; table-layout: auto; background: none; box-shadow: none; border-radius: 0; font-size: var(--fs-meta); }
.alp-nutrition caption { text-align: left; font-size: var(--fs-data); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-muted); padding: 0 0 var(--s3); }
.alp-nutrition th, .alp-nutrition td { padding: 12px var(--s3); border: none; border-bottom: 1px solid var(--line-soft); text-align: left; vertical-align: baseline; }
/* erste Spalte = Nährstoffname (links, absorbiert den Freiraum); alle weiteren Spalten = Zahlen (rechts, tabellarisch) */
.alp-nutrition tr > *:first-child { padding-left: 0; width: 100%; }
.alp-nutrition tr > *:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; padding-left: clamp(28px, 5vw, 72px); }
.alp-nutrition tr > *:last-child { padding-right: 0; color: var(--ink-muted); }
.alp-nutrition tr:first-child th, .alp-nutrition thead th {
  font-size: var(--fs-data); letter-spacing: .03em; text-transform: uppercase; color: var(--ink-muted);
  font-weight: 600; background: none; border-bottom: 1.5px solid var(--ink-subtle); padding-top: 0; white-space: normal;
}
/* Mengen-Spalten ("Menge/1 ml", "Menge/25 ml") duerfen nicht hinter dem
   Schraegstrich umbrechen - das las sich als zwei Zeilen "MENGE/1" / "ML".
   Wird die Tabelle dadurch zu breit, scrollt .alp-nutrition ohnehin. */
.alp-nutrition tr:first-child th:not(:first-child),
.alp-nutrition thead th:not(:first-child) { white-space: nowrap; }
.alp-nutrition tr:last-child td { border-bottom: none; }
.nutri-note { margin-top: var(--s4); font-size: var(--fs-micro); color: var(--ink-subtle); max-width: 62ch; }

/* Zutaten, Geschmack und Pflichthinweise (LMIV). Bewusst ruhiger als die
   Naehrwerttabelle: es ist Pflichttext, kein Verkaufsargument. Steht als
   eigener Block darunter, nicht mehr unformatiert zwischen den Zahlen. */
.nutri-zutaten { margin-top: var(--s8); padding-top: var(--s5); border-top: 1px solid var(--line); }
.nutri-zutaten h3 { font-size: var(--fs-h4); margin-bottom: var(--s3); }
.nutri-zutaten p { margin: 0 0 var(--s3); font-size: var(--fs-meta); line-height: 1.65; color: var(--ink-muted); max-width: 76ch; }
.nutri-zutaten p:last-child { margin-bottom: 0; }
.nutri-zutaten strong { color: var(--ink); }
@media (max-width: 560px) { .alp-nutrition table { font-size: var(--fs-meta); } .alp-nutrition th, .alp-nutrition td { padding: 11px var(--s2); } }
/* Fix (Audit P1): kein Produkt-Akzent/Teal auf der Naehrwert-Tabelle.
   Teal sitzt auf tr/thead/Zell-Rahmen -> umfassend killen (hohe Spezifitaet via #main),
   sauberer Design-System-Laborbericht mit Hairlines, Text bleibt lesbar. */
#main .alp-nutrition table,
#main .alp-nutrition thead,
#main .alp-nutrition tbody,
#main .alp-nutrition tr,
#main .alp-nutrition th,
#main .alp-nutrition td { background: transparent !important; }
#main .alp-nutrition th,
#main .alp-nutrition td { border: none !important; border-bottom: 1px solid var(--line) !important; color: var(--ink) !important; }
#main .alp-nutrition tr:first-child th,
#main .alp-nutrition thead th { color: var(--ink-muted) !important; font-weight: 600; border-bottom: 1.5px solid var(--ink-subtle) !important; }
#main .alp-nutrition tr > *:last-child { color: var(--ink-muted) !important; }
#main .alp-nutrition tr:last-child td { border-bottom: none !important; }

/* FAQ: vollbreit + ruhig (kein Panel/Karte, nur Haarlinien) */
/* Das FAQ-Akkordeon kommt seit 12.08.2026 als gemeinsame Komponente aus
   components.css (gleiche Optik wie auf der Qualitaetsseite). Hier bleibt nur
   die Rail-Korrektur: auf der Produktseite laeuft die Liste ueber die volle
   1200er-Breite statt auf 860px zentriert. */
.pdp .ql-faq__list { max-width: none; margin-inline: 0; }

/* Alle Sektionskoepfe der PDP zentriert (ruhig, fokussiert, konsistent) + grosszuegig breit (nichts gequetscht) */
.pdp .sec-head { text-align: center; margin-inline: auto; max-width: 900px; }
/* Eyebrow-Token: Sektions-Eyebrows Slate wie ueberall (Akzentfarbe bleibt der Buybox vorbehalten) */
.pdp .sec-head .eyebrow { color: var(--ink-muted); }
.pdp .sec-head h2 { margin-inline: auto; max-width: 38ch; text-wrap: balance; }
.pdp .sec-head .lead { margin-inline: auto; max-width: 67ch; text-wrap: pretty; }
/* Naehrwert-Tabelle unter dem Sektionskopf. Die Fussnote lief noch zentriert
   aus dem alten, mittigen Layout - seit der Rail-Korrektur steht der ganze
   Block linksbuendig, die Fussnote muss mitziehen. */
.pdp .alp-nutrition { margin-inline: 0; }
.pdp .alp-nutrition .nutri-note { margin-inline: 0; text-align: left; }

/* =========================================================================
 * PDP-Elevation v3 (freigegebene Comp): Deep-Color-Galerie, offene Buybox,
 * USP-Kacheln, Vergleich. Ueberschreibt bewusst die aelteren Bloecke oben
 * (gleiche Spezifitaet, spaetere Quellreihenfolge gewinnt).
 * REGEL: alle Inhaltsbloecke fuellen die 1200px-Schiene, keine schmaleren Deckel.
 * ========================================================================= */

/* ---- Galerie: Deep-Color-Buehne im Produktton (Farbwelt der Karten-Sockel) ---- */
.gallery { position: sticky; top: 24px; }
.pdp .gallery__main {
  position: relative;
  background:
    radial-gradient(120% 90% at 20% 0%, color-mix(in oklab, var(--acc) 58%, #fff) 0%, transparent 46%),
    linear-gradient(168deg, var(--deep, #16243F) 0%, color-mix(in oklab, var(--acc) 62%, #122A22) 100%);
  border: none;
  border-radius: var(--r-surface);
  box-shadow: var(--sh-card);
  aspect-ratio: 1 / 1;
  display: flex; align-items: flex-end; justify-content: center;
  padding-bottom: clamp(22px, 2.6vw, 38px);
  overflow: hidden;
}
.pdp .gallery__main::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 34%;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.18)); pointer-events: none;
}
.pdp .gallery__main img {
  position: relative; z-index: 1;
  max-height: 88%; max-width: 90%; width: auto;
  object-fit: contain; object-position: bottom;
  filter: drop-shadow(0 26px 30px rgba(0,0,0,.38));
}
.pdp .gallery__main--photo { align-items: stretch; padding: 0; }
.pdp .gallery__main--photo img { max-height: none; max-width: none; width: 100%; height: 100%; object-fit: cover; filter: none; }
.gallery__word {
  position: absolute; top: clamp(18px, 2vw, 28px); left: clamp(20px, 2.2vw, 30px); z-index: 1;
  color: rgba(255,255,255,.92); font-size: var(--fs-data, 13px); font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
}
.gallery__word b {
  display: block; font-family: var(--serif); font-weight: 500;
  font-size: var(--fs-h3); letter-spacing: 0; text-transform: none; margin-top: 2px;
}
.gallery__main--photo .gallery__word { display: none; }
.pdp .gallery__thumbs { display: flex; gap: var(--s3); margin-top: var(--s3); }
.pdp .gallery__thumb {
  flex: 0 0 auto; width: clamp(72px, 22%, 96px); aspect-ratio: 1/1;
  border-radius: var(--r-chip); border: 0;
  -webkit-appearance: none; appearance: none; /* Button-Default neutralisieren (kam vorher aus dem geloeschten v1-Block) */
  background: var(--panel, #fff) !important;
  box-shadow: inset 0 0 0 1px var(--line);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  cursor: pointer; padding: 10px; transition: box-shadow var(--t-fast) var(--ease);
}
.pdp .gallery__thumb--deep { background: var(--deep, #16243F) !important; }
.pdp .gallery__thumb img { max-height: 82%; max-width: 82%; object-fit: contain; }
.pdp .gallery__thumb--photo { padding: 0; }
.pdp .gallery__thumb--photo img { max-height: none; max-width: none; width: 100%; height: 100%; object-fit: cover; }
.pdp .gallery__thumb:hover { box-shadow: inset 0 0 0 1.5px var(--acc-text); }
.pdp .gallery__thumb.is-active { box-shadow: inset 0 0 0 2px var(--acc-text); }
.pdp .gallery__thumb:focus-visible { outline: 2px solid var(--acc-text); outline-offset: 2px; }

/* ---- Buybox: offen (Seed-Anatomie), kein Rahmen, nur Haarlinien ---- */
.buybox__buy {
  background: none; border: none; border-radius: 0;
  padding: clamp(18px,1.8vw,24px) 0 0;
  margin-top: var(--s5);
  border-top: 1px solid var(--line);
}
/* "Alle N Wirkstoffe"-Link naeher an die Bullets ruecken (kein grosser Void vor dem Preis) */
.buybox__more { margin-bottom: var(--s5); }
.buybox__priceline { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: var(--s3); }
.buybox__pricewrap { min-width: 0; }
.buybox__pricewrap .price { margin: 0; display: block; line-height: 1.5; font-family: var(--sans); }
.buybox__pricewrap .price .amount,
.buybox__pricewrap .price ins .amount { display: inline-block; font-size: var(--fs-h3-lg); font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -.02em; line-height: 1.1; }
.buybox__pricewrap .price del,
.buybox__pricewrap .price del .amount { font-size: var(--fs-h4); font-weight: 500; color: var(--ink-subtle); }
.buybox__pricewrap .price ins { text-decoration: none; }
.buybox__pricewrap .price small,
.buybox__pricewrap .price .woocommerce-price-suffix,
.buybox__pricewrap .price .wgm-info,
.buybox__pricewrap .price .woocommerce-de-price-taxrate,
.buybox__pricewrap .price .woocommerce-grundpreis,
.buybox__pricewrap .price .price-per-unit,
.buybox__pricewrap .price .price_including_tax,
.buybox__pricewrap .price .price_excluding_tax {
  display: inline; margin: 0; font-size: var(--fs-micro); font-weight: 400;
  color: var(--ink-muted); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.buybox__pricewrap .price small:not(:last-child)::after,
.buybox__pricewrap .price .wgm-info:not(:last-child)::after,
.buybox__pricewrap .price .woocommerce-de-price-taxrate:not(:last-child)::after,
.buybox__pricewrap .price .woocommerce-grundpreis:not(:last-child)::after,
.buybox__pricewrap .price .price-per-unit:not(:last-child)::after { content: "\00A0\00B7"; margin-right: 6px; }
.buybox__pricewrap .price .amount { display: block; margin-bottom: 4px; }
.buybox__delivery { display: inline-flex; align-items: center; gap: var(--s2); font-size: var(--fs-micro); font-weight: 600; color: var(--ink); }
.buybox__delivery::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--green-ok); }
.buybox__trust { border-top: 1px solid var(--line); }

/* ---- USP-Kacheln (Seed-Muster, ACF pdp_usps) ---- */
.featgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s5); }
.feat {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-surface);
  padding: clamp(22px, 2vw, 30px); display: flex; flex-direction: column; gap: var(--s3);
}
.feat__icon { width: 44px; height: 44px; border-radius: var(--r-pill); display: grid; place-items: center; background: var(--acc-soft); color: var(--acc-text); }
.feat__icon svg { width: 22px; height: 22px; }
.feat__seal { width: 44px; height: 44px; display: block; }
.feat h3 { font-family: var(--sans); font-weight: 700; font-size: var(--fs-body); margin: 0; line-height: 1.35; }
.feat p { margin: 0; font-size: var(--fs-meta); line-height: 1.5; color: var(--ink-muted); }
@media (max-width: 1023px) { .featgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 559px) { .featgrid { grid-template-columns: 1fr; } }

/* ---- Wirkstoffe: Mengen-Anker rechts (Serif, Akzent) ---- */
.actives__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s4); align-items: baseline; }
.actives__row dt, .actives__row dd { grid-column: 1; }
.actives__val { grid-column: 2; grid-row: 1 / span 2; align-self: baseline; font-family: var(--serif); font-weight: 600; font-size: var(--fs-h3); letter-spacing: -.01em; color: var(--acc-text); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---- Vergleich: volle 1200px-Schiene ---- */
/* overflow-x:auto statt hidden: der Radius clippt weiterhin, mobil darf die Tabelle scrollen */
.compare { max-width: none; margin-inline: 0; border: 1px solid var(--line); border-radius: var(--r-surface); overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }
.compare table { width: 100%; border-collapse: collapse; font-size: var(--fs-meta); background: var(--paper); }
.compare th, .compare td { padding: 16px clamp(16px, 2vw, 28px); border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.compare thead th { font-size: var(--fs-micro); letter-spacing: .05em; text-transform: uppercase; color: var(--ink-muted); background: var(--bg-soft); font-weight: 600; }
.compare thead th:nth-child(2) { color: var(--acc-text); }
.compare tbody tr:last-child td { border-bottom: none; }
.compare td:first-child { color: var(--ink-muted); width: 34%; }
.compare td:nth-child(2) { font-weight: 600; }
.compare td:last-child { color: var(--ink-subtle); }
.compare .tick { display: inline-flex; align-items: baseline; gap: 8px; }
.compare .tick svg { width: 16px; height: 16px; color: var(--green-ok); flex: none; transform: translateY(2px); }
@media (max-width: 620px) { .compare { font-size: var(--fs-meta); } .compare th, .compare td { padding: 12px 14px; } }

/* ---- 1200px-Regel: Koepfe + FAQ + Tabelle fuellen die Schiene ---- */
.pdp .sec-head { max-width: none; }
.pdp .sec-head h2 { max-width: 30ch; }
.pdp .sec-head:not(.center) { text-align: left; margin-inline: 0; }
.pdp .sec-head:not(.center) h2,
.pdp .sec-head:not(.center) .lead { margin-inline: 0; }
.pdp .ql-faq__list { max-width: none; }
.pdp .alp-nutrition { max-width: none; }

/* ---- GM-Preis-Suffix zwingend inline (echte Live-Klassen, schlaegt GM frontend.css) ---- */
.buybox__pricewrap .price > .woocommerce-Price-amount.amount { display: block; margin: 0 0 4px; font-size: var(--fs-h3-lg); font-weight: 700; color: var(--ink); letter-spacing: -.02em; line-height: 1.1; }
.buybox__pricewrap .gm-wp_bakery_woocommerce_get_price_html { display: block; margin: 0; line-height: 1.7; }
.buybox__pricewrap .gm-wp_bakery_woocommerce_get_price_html .wgm-info {
  display: inline !important; margin: 0 !important; padding: 0 !important;
  font-size: var(--fs-micro); font-weight: 400; color: var(--ink-muted);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.buybox__pricewrap .gm-wp_bakery_woocommerce_get_price_html .wgm-info .woocommerce-Price-amount.amount { display: inline !important; font-size: var(--fs-micro) !important; font-weight: 400 !important; color: var(--ink-muted) !important; letter-spacing: 0 !important; }
.buybox__pricewrap .gm-wp_bakery_woocommerce_get_price_html .wgm-info small { display: inline; font-size: inherit; }
.buybox__pricewrap .gm-wp_bakery_woocommerce_get_price_html .wgm-info:not(:last-child)::after { content: "\00A0\00B7"; color: var(--ink-subtle); }

/* ---- Woo-Lagerstatus im Cart ausblenden (wir zeigen "Auf Lager" bereits oben) ---- */
.pdp .buybox__cart .stock { display: none; }

/* ---- Preiszeile: "Auf Lager" oben rechts NEBEN dem Preis (nicht drunter) ---- */
.buybox__priceline { flex-wrap: nowrap; align-items: baseline; justify-content: flex-start; gap: var(--s4); }
.buybox__pricewrap { flex: 1 1 auto; min-width: 0; }
/* KEIN margin-left:auto (frisst sonst den Grow-Platz -> Preiszeile bleibt schmal).
   pricewrap fuellt via flex-grow, delivery sitzt rechts daneben oben. */
.buybox__delivery { flex: 0 0 auto; align-self: baseline; white-space: nowrap; }

/* ---- Warenkorb-Zeile: Button vollbreit (auch bei variablen Produkten) ---- */
.pdp .buybox__cart .single_variation_wrap { flex: 1 1 100%; margin: 0; }
.pdp .buybox__cart .woocommerce-variation-add-to-cart {
  display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; margin: 0;
}
.pdp .buybox__cart .woocommerce-variation-add-to-cart .quantity { flex: 0 0 auto; }
.pdp .buybox__cart form.cart .single_add_to_cart_button,
.pdp .buybox__cart .woocommerce-variation-add-to-cart .single_add_to_cart_button { flex: 1 1 auto; }
/* "Inhalt"-Auswahl volle Breite ueber der Warenkorb-Zeile */
.pdp .buybox__cart table.variations { width: 100%; margin: 0 0 var(--s4); }

/* ---- GM-Steuerzeile SICHER in EINE Zeile: Flexbox auf den Wrapper -> alle
   Kinder werden Flex-Items, ihr GM-seitiges display:block wird ignoriert.
   Umbruch nur ZWISCHEN den Angaben (flex-wrap), jede Angabe unteilbar. ---- */
.pdp .buybox .buybox__pricewrap .gm-wp_bakery_woocommerce_get_price_html {
  display: flex !important; flex-wrap: wrap; align-items: baseline;
  column-gap: 6px; row-gap: 0; margin-top: 4px;
}
.pdp .buybox .buybox__pricewrap .gm-wp_bakery_woocommerce_get_price_html > * { margin: 0; }
.pdp .buybox .buybox__pricewrap .gm-wp_bakery_woocommerce_get_price_html .wgm-info small { display: inline; }

/* ---- Preiszeile bombensicher: Preisspalte VOLLE Breite (Block), damit die
   PAngV-Flexzeile die ganze Breite hat; "Auf Lager" absolut oben rechts. ---- */
.pdp .buybox__priceline { display: block !important; position: relative; }
.pdp .buybox__priceline .buybox__pricewrap { width: 100%; flex: none; }
.pdp .buybox__priceline .buybox__delivery { position: absolute; top: 10px; right: 0; margin: 0; }

/* ---- GM-Angaben als schmale Flex-Items (alte flex-basis:100%-Regel ueberschreiben) ---- */
.pdp .buybox .buybox__pricewrap .gm-wp_bakery_woocommerce_get_price_html > * {
  flex: 0 0 auto !important; flex-basis: auto !important; width: auto !important;
}

/* RWD-Review: Vergleichstabelle @Handy horizontal scrollbar statt abgeschnitten.
   Scroll-Affordance: Schatten-Kanten am Container (Cover-Gradienten scrollen mit
   dem Inhalt via background-attachment local und geben die Schatten nur frei,
   wenn in dieser Richtung noch Inhalt liegt). Tabelle dafuer transparent,
   die weisse Basisflaeche liegt als unterste Ebene am Container. */
@media (max-width: 639px) {
  .compare {
    background:
      linear-gradient(90deg, var(--paper) 38%, rgba(255, 255, 255, 0)) 0 0 / 44px 100% no-repeat local,
      linear-gradient(270deg, var(--paper) 38%, rgba(255, 255, 255, 0)) 100% 0 / 44px 100% no-repeat local,
      radial-gradient(farthest-side at 0 50%, rgba(22, 36, 63, .2), transparent) 0 0 / 14px 100% no-repeat scroll,
      radial-gradient(farthest-side at 100% 50%, rgba(22, 36, 63, .2), transparent) 100% 0 / 14px 100% no-repeat scroll,
      var(--paper);
  }
  .compare table { min-width: 560px; background: transparent; }
}
/* Sehr schmale Geraete: Spalten grosszuegiger, lieber scrollen als Woerter kappen */
@media (max-width: 479px) {
  .compare table { min-width: 640px; }
}

/* Handy/Tablet (einspaltig ab <=899px): Galerie scrollt normal mit,
   sticky gilt nur im Zwei-Spalten-Layout daneben der Buybox */
@media (max-width: 899px) {
  .gallery { position: static; top: auto; }
}

/* HARTE REGEL: JEDE Komponente volle 1200px-Rail, keine ch-/px-Deckel */
.pdp .ql-faq__ans,
.pdp .actives dd,
.pdp .nutri-note,
.pdp .sec-head,
.pdp .sec-head h2,
.pdp .sec-head .lead { max-width: none; }

/* =========================================================
   Produktbeschreibung (ersetzt die vier USP-Kacheln)
   Changes 05.08.2026. Ruhiger Lesetext auf der 1200er-Rail.
   ========================================================= */
.pdp .pdp-beschreibung h2{
  font-size: var(--fs-h3);margin:0 0 var(--s5);color:var(--ink);
}
.pdp .pdp-beschreibung p{
  margin:0 0 var(--s4);font-size: var(--fs-body);line-height:1.65;color:var(--ink-muted);max-width:none;
}
.pdp .pdp-beschreibung p:last-child{margin-bottom:0}

/* "Die Anwendung" ist auf einen Satz gekuerzt (Changes 05.08.2026):
   grosser, ruhiger Einzeiler statt Dreier-Raster. */
.pdp .ritual__single{
  margin:0;font-family:var(--serif);font-weight:500;
  font-size: var(--fs-h3);line-height:1.35;color:var(--ink);
}

/* =========================================================
   Rail und Typo auf der Produktseite vereinheitlichen
   (Kundenhinweis 10.08.2026: "1200px Width, Schriftgrößen
   einheitlich"). Die Sektionen trugen acht verschiedene
   Innen-Deckel (820px, 760px, 900px, 74ch, 67ch, 48ch,
   38ch, 30ch) und liefen dadurch schmaler als die Rail.
   Diese Regeln stehen bewusst am Dateiende, damit sie die
   frueheren gewinnen.
   ========================================================= */
.pdp .sec-head,
.pdp .sec-head h2,
.pdp .sec-head .lead,
.pdp .pdp-beschreibung,
.pdp .ritual__single,
.pdp .ql-faq__ans,
.pdp .actives dd,
.pdp .nutri-note{max-width:none}

/* Alle Sektions-Ueberschriften linksbuendig auf der Rail.
   Vorher war eine zentriert, der Rest links. */
.pdp .sec-head,
.pdp .sec-head.center{text-align:left;margin-inline:0}
.pdp .sec-head h2,
.pdp .sec-head .lead{margin-inline:0}

/* EINE Groesse fuer alle Sektions-Ueberschriften der Produktseite.
   Die Produktbeschreibung lief vorher auf 28px statt 38px. */
.pdp .sec-head h2,
.pdp .pdp-beschreibung h2{font-size:var(--fs-h2);line-height:1.12;letter-spacing:-.01em}

/* Beschreibung: Ueberschrift oben, Text darunter ueber die volle Rail -
   genau wie jede andere Sektion der Produktseite. Kein Editorial-Split
   (die lange Ueberschrift stiess an die Textspalte) und kein Mehrspalter
   (der zerriss den Satz mitten drin). */
.pdp .pdp-beschreibung h2{margin:0 0 var(--s5)}
.pdp .pdp-beschreibung__body p:last-child{margin-bottom:0}