/* GP667 · Letzter gleichmaessiger Abstandsfeinschliff bei Produkten ohne Grundpreis.
 * GP666 · Einheitlich kompakter no-unit-Fall, drei Hauptkarten gemeinsam kuerzer.
 * GP665 · Feinschliff Variante ohne Grundpreis: wenig Leerraum, ruhiger Preiskopf.
 * GP664 · Kompakte Variante ohne Grundpreis; Herba-Referenz unveraendert.
 * GP663 · Ein Preisraster und ein zweizeiliges Titelraster fuer alle Produkte.
 * GP662 · Einheitliche Single-Produkt-Geometrie mit / ohne Grundpreis.
 * Keine neue CSS-Schicht, nur diese bestehende konsolidierte Datei.
 * Die Varianten sind ein einziges Design mit optionaler Preis-Unterzeile.
 * Galerie und Titellaengen bleiben natuerlich, ohne Faketext oder abgeschnittene Inhalte.
 * Basiert auf GP661.
 *
 * Drei grosse Hero-Spalten werden gemeinsam ueber die natuerliche Textspalte
 * geringfuegig kompakter: keine feste Gesamthoehe, kein Textabschneiden.
 * Angebotsdaten, Buttons, Galerie-Skalierung und Prompt-Daten bleiben unveraendert.
 */
.gp-product-detail .gp-product-detail__hero{align-items:stretch;gap:clamp(.78rem,1.3vw,1.25rem)}
.gp-product-detail .gp-product-detail__hero-buybox{min-width:0}









/* GP653: Three equal offer facts ~52px, a small reduction from GP652 (~58px).
 * The hero panels remain content-sized, never capped or stretched by a fixed height.
 * Rechte Spalte: Preisblock oben ruhig, kompakte Datenkarten, CTA direkt nach Fakten.
 * Min-Height der Preisgruppe kompensiert optionalen Grundpreis; es gibt keine
 * kuenstliche Mindesthoehe fuer die gesamte Seite. */
.gp-product-detail .gp-product-detail__hero-commerce{display:flex;flex:0 0 auto;min-height:0;flex-direction:column}
.gp-product-detail .gp-product-detail__hero-commerce-main{
 display:flex;flex:0 0 auto;min-height:0;flex-direction:column;justify-content:flex-start;
 gap:clamp(.62rem,.81vw,.82rem);padding:clamp(.81rem,.93vw,.97rem) clamp(.85rem,1.1vw,1.12rem) .48rem;
}
.gp-product-detail .gp-product-detail__hero-price-block{
 position:static!important;top:auto!important;display:flex;flex:0 0 auto;flex-direction:column;
 justify-content:flex-start;min-height:5.15rem;gap:.2rem;margin:0;padding:0;border-bottom:0;
}
.gp-product-detail .gp-product-detail__seller217{
 margin:0 0 .12rem;font-size:clamp(.82rem,.87vw,.88rem);line-height:1.42;
}
.gp-product-detail .gp-product-detail__hero-price strong,
.gp-product-detail .gp-product-detail__hero-price.is-price-recorded>strong{
 font-size:clamp(1.64rem,1.68vw,1.75rem);line-height:1.14;font-variant-numeric:tabular-nums;
}
.gp-product-detail .gp-product-detail__hero-offer-facts,
.gp-product-detail .gp-product-detail__hero-offer-facts.is-count-3{
 display:grid;flex:0 0 auto;grid-template-columns:minmax(0,1fr);
 grid-template-rows:none;grid-auto-rows:minmax(3.65rem,auto);align-content:start;
 gap:clamp(.48rem,.6vw,.62rem);margin:0;
}
.gp-product-detail .gp-product-detail__hero-offer-facts>div,
.gp-product-detail .gp-product-detail__hero-offer-facts.is-count-3>div,
.gp-product-detail .gp-product-detail__hero-offer-facts>div:last-child:nth-child(odd){
 box-sizing:border-box;grid-column:auto;display:flex;flex-direction:column;align-items:stretch;
 justify-content:center;min-height:3.65rem;height:auto;gap:.2rem;
 padding:.53rem 2.7rem .53rem .84rem!important;border:1px solid #e1e9e3;
 border-radius:.74rem;background:#f8faf8;
}
.gp-product-detail .gp-product-detail__hero-offer-facts dt{
 margin:0!important;line-height:1.35;hyphens:none;word-break:normal;
}
.gp-product-detail .gp-product-detail__hero-offer-facts dd{
 margin:0;line-height:1.42!important;overflow-wrap:break-word;
}
.gp-product-detail .gp-product-detail__hero-offer-facts dt>span{top:50%;transform:translateY(-50%)}
.gp-product-detail .gp-product-detail__hero-offer-facts .is-availability dd i{
 flex:none;align-self:center;margin:0 .4rem 0 0;
}
.gp-product-detail .gp-product-detail__hero-commerce-cta-wrap{
 flex:0 0 auto;margin-top:0;padding-top:clamp(.7rem,.78vw,.83rem);border-top:1px solid #dfe8e0;
}
.gp-product-detail .gp-product-detail__primary-actions{margin:0;padding:clamp(.52rem,.64vw,.68rem) clamp(.85rem,1.1vw,1.12rem) clamp(.68rem,.78vw,.85rem);
 gap:.48rem;border-top:0;
}
.gp-product-detail .gp-product-detail__primary-actions :is(.gp-library-button,.gp-share-button){min-height:2.75rem;line-height:1.3}
/* Ein einziges Aktionsraster auch bei abweichender Titel- und Grundpreislaenge. */
.gp-product-detail .gp-product-detail__primary-actions{
 display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
 align-items:stretch;justify-content:stretch;
}
.gp-product-detail .gp-product-detail__primary-actions .gp-library-button{
 box-sizing:border-box;display:inline-flex;justify-content:center;align-items:center;
 width:100%;min-width:0;min-height:3rem;height:3rem;
 gap:.5rem;line-height:1.25;white-space:normal;
}
.gp-product-detail .gp-product-detail__primary-actions .gp-library-button svg{
 width:1.18rem;height:1.18rem;flex:0 0 auto;
}
/* Die Quelle kann hochkant, quadratisch oder querformatig sein; das Motiv
   wird innerhalb der schon vorhandenen Bildbuehne eingepasst. */
.gp-product-detail .gp-product-gallery__main-image.is-contain{
 max-width:100%;max-height:100%;object-fit:contain;
}
/* Preisblock mit immer derselben Subzeilen-Geometrie, nicht nur Desktop:
   Ist der Grundpreis nicht vorhanden, bleibt ausschliesslich sein unsichtbarer
   Layoutplatz erhalten. Es wird niemals ein Preis erfunden. */
.gp-product-detail .gp-product-detail__hero-price{
 display:grid;grid-template-rows:minmax(1.9rem,auto) minmax(1.125rem,auto);
 row-gap:.16rem;align-content:start;
}
.gp-product-detail .gp-product-detail__hero-price:not(:has(>small))::after{
 content:"";display:block;grid-row:2;min-height:1.125rem;
 visibility:hidden;pointer-events:none;
}
@container gp-product (max-width:23rem){
 .gp-product-detail .gp-product-detail__primary-actions{grid-template-columns:minmax(0,1fr)}
 .gp-product-detail .gp-product-detail__primary-actions .gp-library-button{height:auto;min-height:3rem}
}
/* GP651: Remove the inherited double bottom-pushing action alignment.
 * The old buybox had justify-content:space-between and the action strip had
 * margin-top:auto. Longer titles and optional unit prices then created a
 * product-specific gap *between* shop CTA and action toggles.
 * The parent still stretches alongside neighboring cards without hiding text. */
.gp-product-detail .gp-product-detail__hero-buybox{
 display:flex;flex-direction:column;justify-content:flex-start;
}
.gp-product-detail .gp-product-detail__hero-commerce,
.gp-product-detail .gp-product-detail__hero-commerce-main{flex:0 0 auto}
.gp-product-detail .gp-product-detail__primary-actions{
 flex:0 0 auto;margin-top:0;align-content:start;align-self:stretch;
}
/* Move the three facts slightly lower as requested, never the action footer. */
.gp-product-detail .gp-product-detail__hero-offer-facts,
.gp-product-detail .gp-product-detail__hero-offer-facts.is-count-3{
 margin-top:clamp(.24rem,.37vw,.4rem);
}
/* GP652: Merken/Vergleichen are toggles, not permanent primary CTAs.
 * OFF = pale sage + dark ink (as in the user's reference).
 * ON  = the exact branded gradient of "Zum Anbieter".
 * The state is already managed by library-buttons252.js via is-active/aria-pressed.
 * The voucher code-copy button remains a primary action, not a toggle. */
.gp-product-detail .gp-product-detail__primary-actions .gp-library-button{
 background-color:#f0f6eb!important;
 background-image:none!important;
 border:1px solid #bcd2a5!important;
 color:#284831!important;
 border-radius:.9rem;
 box-shadow:none!important;
 font-weight:650!important;
 transition:background-color .16s ease,border-color .16s ease,color .16s ease,box-shadow .16s ease;
}
.gp-product-detail .gp-product-detail__primary-actions .gp-library-button:not(.is-active):not([aria-pressed="true"]):hover{
 background-color:#e8f2e3!important;
 border-color:#9dbf8a!important;
 color:#24452f!important;
}
.gp-product-detail .gp-product-detail__primary-actions .gp-library-button:is(.is-active,[aria-pressed="true"]),
.gp-product-detail .gp-pd228-voucher__code button{
 background-color:#57933a!important;
 background-image:var(--gp-primary-gradient,linear-gradient(180deg,#61A143,#57933A 55%,#4F8534))!important;
 border:1px solid #57943c!important;
 color:#fff!important;
 box-shadow:0 2px 5px rgba(56,96,45,.08)!important;
}
.gp-product-detail .gp-product-detail__primary-actions .gp-library-button:is(.is-active,[aria-pressed="true"]):hover,
.gp-product-detail .gp-pd228-voucher__code button:hover{
 background-image:var(--gp-primary-gradient-hover,linear-gradient(180deg,#578F3C,#4B8132))!important;
 border-color:#46792f!important;color:#fff!important;
}
.gp-product-detail .gp-product-detail__primary-actions .gp-library-button:focus-visible,
.gp-product-detail .gp-pd228-voucher__code button:focus-visible{
 outline:2px solid #285d39;outline-offset:2px;
}
.gp-product-detail .gp-product-detail__primary-actions .gp-library-button svg,
.gp-product-detail .gp-pd228-voucher__code button svg{color:inherit;stroke:currentColor}

/* GP652 – pixel-matched to the user-edited 1918px desktop reference.
 * Do not touch image stage, context, quick facts, card heights, or price tracking.
 * The title moves down ~13px, but the lead uses a ~9px smaller margin, so
 * the description and all subsequent sections retain nearly the same y-position.
 * The three offer fact cards + CTA follow the reference ~20px lower without
 * reintroducing margin-top:auto or any artificial global card height. */
@container gp-product (min-width:68.01rem){
 /* Reduce all THREE offer facts equally on the requested desktop view.
    Identical row height and padding; content can still grow for long labels. */
 .gp-product-detail .gp-product-detail__hero-offer-facts,
 .gp-product-detail .gp-product-detail__hero-offer-facts.is-count-3{grid-auto-rows:minmax(3.28rem,auto)}
 .gp-product-detail .gp-product-detail__hero-offer-facts>div,
 .gp-product-detail .gp-product-detail__hero-offer-facts.is-count-3>div,
 .gp-product-detail .gp-product-detail__hero-offer-facts>div:last-child:nth-child(odd){min-height:3.28rem;padding-block:.43rem!important}
/* Match the center tiles to the slightly shorter offer facts. Natural text
    height still wins if a translated label needs two lines. */


/* GP658: Bewaehrten GP657-Produktkopf behalten; keine neuen Mindesthoehen
    fuer Titel, Beschreibung oder Gesamt-Container. */

/* GP661: Minimaler symmetrischer Feinschliff ohne neue Gesamt-/Slot-Hoehen.
    Oben und unten je wenige freie Pixel reduzieren; die drei grossen Panels
    bleiben ueber das gemeinsame Raster gleich hoch. Keine Textkuerzung,
    keine Preis-/Galerie- oder Button-Funktionsaenderung. */
/* GP660: Nur die zwei vom Nutzer markierten Elemente optisch versetzen.
    Relative Pixelbewegung ohne Veraenderung des Textflusses, der Hero-Hoehe,
    der Ueberschrift oder der Preis-/Galeriespalte. */




 .gp-product-detail .gp-product-detail__hero-commerce-main{
  padding-top:calc(clamp(.81rem,.93vw,.97rem) + 3px);
  padding-bottom:.38rem;
  gap:clamp(.54rem,.70vw,.74rem)
 }
 /* GP659 – EINE Preisgeometrie fuer beide Datenfaelle: Die Zeile unter dem
    Hauptpreis hat dieselbe HOEHE, egal ob ein Grundpreis angegeben ist.
    Kein erfundener Inhalt und keine Anpassung von Preis-/Tracking-Daten. */
 .gp-product-detail .gp-product-detail__hero-price-block{
  min-height:5.4rem;
  display:flex;flex-direction:column;justify-content:flex-start;
 }
/* GP664: keine zusaetzliche volle Leerzeile fuer einzeilige Titel.
    Der gemeinsame Titelbereich bleibt kompakt; bei zwei oder mehr Zeilen
    waechst er mit dem natuerlichen Text. Dadurch fallen drei Hauptcontainer
    bei kurzen Produktnamen gemeinsam etwas niedriger aus. */

 /* GP664: nur wenn kein Grundpreis vorhanden ist, brauchen die drei
    Angebotsdatenkarten etwas weniger vertikalen Raum. Bei Herba Relax mit
    Grundpreis gilt die unveraenderte Referenzgeometrie. Keine Faketexte. */
 .gp-product-detail__hero-buybox:not(:has(.gp-product-detail__hero-price small)) .gp-product-detail__hero-offer-facts,
 .gp-product-detail__hero-buybox:not(:has(.gp-product-detail__hero-price small)) .gp-product-detail__hero-offer-facts.is-count-3{
  grid-auto-rows:minmax(3rem,auto);
 }
 .gp-product-detail__hero-buybox:not(:has(.gp-product-detail__hero-price small)) .gp-product-detail__hero-offer-facts>div,
 .gp-product-detail__hero-buybox:not(:has(.gp-product-detail__hero-price small)) .gp-product-detail__hero-offer-facts.is-count-3>div{
  min-height:3rem;padding-block:.32rem!important;
 }
/* GP665: Nur in der Variante ohne Grundpreis den verbleibenden
    oberen Leerraum kompakt ausbalancieren. Keine falschen Preise. */
/* Einzeilige Titel ohne Grundpreis: keine unnutzbare zweite Titelzeile
    reservieren. Die Abstandskorrekturen gelten nur fuer diese Datenvariante,
    nicht fuer das freigegebene Herba-Referenzlayout mit Grundpreis. */






 /* Bei Produkten ohne Grundpreis nur den LEEREN Unterzeilenplatz unter dem
    tatsaechlichen Preis etwas verkleinern. Die reale Grundpreiszeile eines
    anderen Produkts bleibt erhalten. Damit wandern die drei Angebotskarten
    etwas nach oben und die drei aeusseren Hero-Karten enden gemeinsam frueher. */
 .gp-product-detail .gp-product-detail__hero-buybox:not(:has(.gp-product-detail__hero-price small)) .gp-product-detail__hero-price-block{
  min-height:calc(5.4rem - 30px);
  padding-top:3px;
 }
 .gp-product-detail .gp-product-detail__hero-buybox:not(:has(.gp-product-detail__hero-price small)) .gp-product-detail__hero-price:not(:has(>small)){
  grid-template-rows:minmax(1.9rem,auto) minmax(.45rem,auto);
 }
 .gp-product-detail .gp-product-detail__hero-buybox:not(:has(.gp-product-detail__hero-price small)) .gp-product-detail__hero-price:not(:has(>small))::after{
  min-height:.45rem;
 }
/* Nicht den ganzen Hero kuenstlich kuerzen: der kompakte Inhalt senkt
    dessen natuerliche gemeinsame Unterkante fuer Bild, Mitte und Angebot. */

 .gp-product-detail .gp-product-detail__hero-buybox:not(:has(.gp-product-detail__hero-price small)) .gp-product-detail__hero-commerce-main{
  gap:clamp(.41rem,.53vw,.56rem);
 }
 .gp-product-detail .gp-product-detail__hero-buybox:not(:has(.gp-product-detail__hero-price small)) .gp-product-detail__hero-offer-facts>div{
  min-height:3rem;
  padding-block:.19rem!important;
 }
 /* Bild und Buttonfooter bleiben in derselben Layoutstruktur. */
 .gp-product-detail .gp-product-detail__hero-offer-facts,
 .gp-product-detail .gp-product-detail__hero-offer-facts.is-count-3{
  margin-top:calc(clamp(.24rem,.37vw,.4rem) + 4px)
 }
 .gp-product-detail .gp-product-detail__hero-buybox:not(:has(.gp-product-detail__hero-price small)) .gp-product-detail__hero-offer-facts{
  margin-top:clamp(.24rem,.37vw,.4rem);
 }
 /* GP659 – die Umschalt-Aktionen haben stets dieselbe sichtbare Geometrie.
    OFF helles Salbeigruen; ON Markenverlauf (bestehender JS-Zustand). */
 .gp-product-detail .gp-product-detail__primary-actions{
  padding-top:.18rem;
  padding-bottom:calc(clamp(.68rem,.78vw,.85rem) - 2px);
  grid-template-columns:repeat(2,minmax(0,1fr));
  align-items:stretch;gap:.52rem;
 }
 .gp-product-detail .gp-product-detail__primary-actions .gp-library-button{
  box-sizing:border-box;min-height:3rem;height:3rem;
  padding:.5rem .55rem;line-height:1.25;border-radius:.9rem;
 }
/* Remove avoidable whitespace in the *middle* column (the actual height
    driver). The entire three-column grid becomes shorter as one row.
    Headline/eyebrow positions and content are left untouched. */

/* Dezent mehr Luft zwischen Kurzbeschreibung und dem hellen Hinweisfeld:
    nur bei Angebotsvarianten ohne Grundpreis, wo der Block zuvor knapp sass. */


 .gp-product-detail .gp-product-detail__hero-commerce-cta-wrap{
  padding-top:calc(clamp(.7rem,.78vw,.83rem) - 2px);
 }
}

/* Alle Breakpoints: natuerliche Hoehe, niemals Zwischenraum per auto-Margin vor CTA. */
@container gp-product (max-width:68rem){

 .gp-product-detail .gp-product-detail__hero-commerce-main{justify-content:flex-start;padding:.9rem .92rem .6rem}
 .gp-product-detail .gp-product-detail__hero-commerce-cta-wrap{margin-top:0}
 .gp-product-detail .gp-product-detail__hero-price-block{min-height:0}
}

@container gp-product (max-width:23rem){
 .gp-product-detail .gp-product-detail__hero-offer-facts.is-count-3>div{padding:.54rem 2.5rem .54rem .72rem!important}
}