/*
 * RealLeaf — Produktdetailseite / PDP (S1-09, pdp.css)
 *
 * Zweck: Tokenbasiertes Styling der PDP, die live ueber das Elementor-
 * Single-Product-Template 8130 rendert (Template BLEIBT, DB tabu - es wird
 * ausschliesslich gestylt). Enqueue macht functions.php als Handle
 * 'realleaf-pdp' (Prio 9, dep realleaf-tokens, konditional is_product).
 *
 * Quellen:
 *   - Look: design/prototype/Produktseite.html + assets/pdp.js (Markup-Spez),
 *     assets/styles.css (.pdp-Block Z. 348-376, .crumbs Z. 323-325),
 *     assets/shop-ui.css (STOCK/ACCORDION Z. 233-246, PDP-legal Z. 252-254,
 *     Karten-/Stepper-Optik Z. 86-121)
 *   - Tokens: assets/css/tokens.css (Source of Truth, beide Themes; alle hier
 *     genutzten var-Namen dort am 2026-06-12 abgeglichen)
 *   - Mapping: plans/s1-design/uebertragbarkeit.md Abschnitt 2 (Stepper-Zeile),
 *     3 Punkt 6 (.qty-Semantik), 4 (Zeile Produktseite.html), 5 (Breakpoints)
 *   - Muster/Disziplin: assets/css/header.css, assets/css/archive.css
 *
 * IST-ERHEBUNG (read-only, 2026-06-12, curl mit Browser-UA auf
 * /product/nikotinfreier-tabakersatz-30g-5-pack/ und
 * /product/420-aufbewahrungsbox-fuer-cannabis-und-tabakersatz/ sowie
 * uploads/elementor/css/post-8130.css):
 *   - Template 8130 rendert NUR: woocommerce-breadcrumb, product-images,
 *     product-title, product-short-description, share-buttons,
 *     product-data-tabs, product-upsell (leer bei beiden Testprodukten),
 *     spacer, product-related. KEIN Preis-Widget, KEIN form.cart auf beiden
 *     Testseiten (grep: 0 Treffer "form class=cart", 0 Treffer
 *     elementor-widget-woocommerce-product-price). Der Baseline-Befund
 *     "PDP ohne Preis/Add-to-Cart" ist damit ein TEMPLATE-Problem, KEIN
 *     CSS-Problem - per CSS nicht behebbar (Markup existiert nicht).
 *     Sektion 4 unten ist deshalb VORBEREITET-INERT: sie aktiviert sich
 *     erst, nachdem der User die Widgets Preis/Add-to-Cart per
 *     Elementor-Edit in Template 8130 ergaenzt hat (Entscheidungsvorlage =
 *     Parallelzelle). Bis dahin matcht dort kein Selektor - null Wirkung.
 *   - Wrapper: div.elementor.elementor-8130.elementor-location-single, der
 *     zugleich die WC-Klassen "product type-product ..." traegt - dadurch
 *     greifen die WC-Core-Regeln ".woocommerce div.product ..." (Tabs,
 *     Galerie-Thumbs) als Gegner.
 *   - Galerie: .woocommerce-product-gallery--with-images --columns-4 mit
 *     div.woocommerce-product-gallery__image > a > img.wp-post-image;
 *     flex-viewport + ol.flex-control-thumbs entstehen erst zur Laufzeit
 *     (flexslider-js geladen, verifiziert). Kein Zoom-Trigger live.
 *   - Tabs: WC-Standard-Markup div.woocommerce-tabs.wc-tabs-wrapper >
 *     ul.tabs.wc-tabs > li.description_tab (+ li.reviews_tab bei Produkt 2)
 *     + div.woocommerce-Tabs-panel--description/--reviews. Tab-Wechsel
 *     macht WC-Core-JS (display-Toggle) - mobiler Akkordeon-Umbau waere
 *     ein Markup-/JS-Eingriff und unterbleibt; stattdessen Tabs als
 *     responsive Pill-Leiste (Scroll-Reihe unter 768px).
 *   - Related: section.related.products > ul.products.elementor-grid >
 *     li.product im WC-STANDARD-Loop (a.woocommerce-LoopProduct-link,
 *     h2.woocommerce-loop-product__title, p.price, a.add_to_cart_button.
 *     button) - NICHT content-product-custom (kein li.product-card,
 *     product-cards.css laedt auf is_product auch gar nicht). Die Karten
 *     werden daher HIER vollstaendig auf Prototyp-Optik gebracht, ohne
 *     eine Klasse umzubenennen.
 *   - German Market: .wgm-info (woocommerce-de_price_taxrate,
 *     woocommerce_de_versandkosten mit a.versandkosten, shipping_de) rendert
 *     live NUR in den Related-Loop-Karten; im Summary-Bereich erscheinen
 *     die Pflichtangaben erst mit dem Preis-Widget (Sektion 4, inert).
 *     Pflichtangaben werden ueberall NUR gestylt, niemals versteckt -
 *     auf GM-Flaechen existiert kein display:none, kein visibility:hidden
 *     und kein font-size:0. Einziges display:none der ganzen Datei:
 *     die kosmetische webkit-Scrollbar der mobilen Tabs-Scroll-Reihe
 *     (Sektion 7, Muster archive.css).
 *
 * SELEKTOR-STRATEGIE (Lehre header.css):
 *   - 0 Elementor-Element-ID-Selektoren (kein .elementor-element-XXXXXXX,
 *     kein .elementor-8130). Anker sind body.woocommerce.single-product
 *     (beide Klassen im Live-body verifiziert), .elementor-location-single
 *     (Template-Wrapper, ID-frei), Widget-Typ-Klassen
 *     (.elementor-widget-woocommerce-product-images usw.) und :has().
 *   - pdp.css laedt VOR den Gegnern (woocommerce-general, elementor-
 *     frontend, widget-css, uploads/elementor/css/post-8130.css - Head-
 *     Reihenfolge live verifiziert). Gewonnen wird deshalb ueber ECHT
 *     HOEHERE Spezifitaet, nicht ueber Reihenfolge und nicht ueber
 *     important. Pro Flaeche dokumentiert der Sektionskommentar den
 *     staerksten Gegner; das body-Doppelklassen-Praefix liefert die
 *     noetigen Zusatzklassen.
 *   - Einzige ID-Selektoren in dieser Datei: #respond / #review_form /
 *     #commentform (Reviews-Formular). Das sind stabile WooCommerce-/
 *     WP-CORE-IDs (kein Elementor-Generat) und noetig, weil der WC-Gegner
 *     ".woocommerce #respond input#submit" selbst ID-Spezifitaet (1,1,1)
 *     hat - ohne eigene ID waere er nur per important schlagbar.
 *   - Whitelist-Semantik (docs/DESIGN_HANDOFF_CLAUDE.md inkl. Ergaenzung
 *     2026-06-10): .qty ist IMMER das INPUT (input.qty), a.minus / a.plus
 *     sind die Stepper-Buttons, .add_to_cart_button.btn-plus ist ein Link.
 *     Alles wird nur gestylt, nichts umbenannt oder strukturell beruehrt.
 *
 * DISJUNKTHEIT: KEINE Regeln fuer #product-popup, #product-popup-overlay,
 * .popup-content, .popup-close, .popup-product-actions - das Quick-View-
 * Popup gehoert vollstaendig quickview.css (Parallelzelle, global enqueued).
 *
 * MOTION: ausschliesslich --dur-fast, --dur und --ease aus tokens.css;
 * keine eigenen Keyframes. Der globale reduced-motion-Block in tokens.css
 * deckt alle Transitions dieser Datei ab.
 *
 * GATE-PROTOKOLL (S1-07/S1-08-Lehre, geprueft vor Abgabe 2026-06-12):
 *   - Kommentar-Balance: Anzahl Kommentar-Oeffner == Anzahl Schliesser
 *     (per Skript gezaehlt); keine Schliesser-Sequenz innerhalb von
 *     Kommentartexten (Token-Namen stets ausgeschrieben).
 *   - important-Flags: 0 aktive in der gesamten Datei.
 *   - Hex-Farben: 0 (alle Farben ueber semantische Tokens; transparente
 *     Abstufungen via color-mix auf Token-Basis).
 *   - Alle genutzten Tokens existieren in tokens.css: --surface, --surface-2,
 *     --surface-3, --text, --text-muted, --accent, --accent-hover,
 *     --accent-soft, --accent-contrast, --border, --outline, --badge-sale,
 *     --shadow, --shadow-md, --focus-ring, --display, --body, --sp-1 bis
 *     --sp-8, --r-sm, --r-md, --r-lg, --r-pill, --header-h, --maxw,
 *     --rl-gutter, --dur-fast, --dur, --ease.
 *   - Keine neuen sichtbaren Strings (kein content mit Text).
 *   - Breakpoints exakt 767 / 1200 wie header.css, archive.css, home.css.
 */

/* ============================================================
   0. GRUNDFLAECHE + BASIS-TYPO
   Gegner: Theme-/Browser-Default (body weiss). Basis-Typo nur im
   Template-Wrapper .elementor-location-single, damit Header und
   Footer (eigene Stylesheets) unberuehrt bleiben.
   ============================================================ */

body.woocommerce.single-product {
    background-color: var(--surface);
}

body.woocommerce.single-product .elementor-location-single {
    font-family: var(--body);
    color: var(--text);
}

/* ============================================================
   1. BREADCRUMB
   Optik = .crumbs (styles.css Z. 323-325).
   Gegner: post-8130 ".elementor-8130 .elementor-element.elementor-
   element-71c744ea .woocommerce-breadcrumb" mit color #7a7a7a,
   16px, letter-spacing - Spezifitaet (0,4,0); hier (0,4,1).
   ============================================================ */

body.woocommerce.single-product .elementor-widget-woocommerce-breadcrumb .woocommerce-breadcrumb {
    font-family: var(--body);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0;
    color: var(--text-muted);
}

body.woocommerce.single-product .elementor-widget-woocommerce-breadcrumb .woocommerce-breadcrumb a {
    color: inherit;
    text-decoration: none;
    transition: color var(--dur-fast) var(--ease);
}

body.woocommerce.single-product .elementor-widget-woocommerce-breadcrumb .woocommerce-breadcrumb a:hover {
    color: var(--accent-hover);
}

/* ============================================================
   2. GALERIE / HAUPTBILD
   Optik = .pdp__main / .pdp__thumbs (styles.css Z. 349-355):
   Bildbox mit Bold-Outline, grossem Radius, Surface-2-Grund;
   Thumbnails als 4er-Raster mit Aktiv-Akzent.
   Gegner:
   - post-8130 box-shadow auf "> .elementor-widget-container" (0,4,0)
     -> hier (0,4,1) auf gleichem Element.
   - WC-Core ".woocommerce div.product div.images .flex-control-thumbs li"
     width 25 Prozent + float (0,4,3) -> hier (0,5,3) via zusaetzlicher
     Klasse .woocommerce-product-gallery.
   - WC-Core "... .flex-control-thumbs li img" opacity .5 (0,4,4) bzw.
     "img.flex-active" (0,5,4) -> hier (0,5,4) Basis + (0,6,4) aktiv.
   Lazy-Load/flexslider unbehindert: keine display-/height-Eingriffe an
   den Bild-Elementen selbst, kein aspect-ratio auf dem Slider-Viewport
   (flexslider misst Hoehen selbst), Inline-Opacity-Fade von WC bleibt.
   ============================================================ */

body.woocommerce.single-product .elementor-widget-woocommerce-product-images > .elementor-widget-container {
    box-shadow: none;
}

body.woocommerce.single-product .elementor-widget-woocommerce-product-images .woocommerce-product-gallery {
    position: relative;
}

/* Hauptbild-Box nach Init: flexslider erzeugt .flex-viewport */
body.woocommerce.single-product .elementor-widget-woocommerce-product-images .woocommerce-product-gallery .flex-viewport {
    border: 1.5px solid var(--outline);
    border-radius: var(--r-lg);
    background: var(--surface-2);
    overflow: hidden;
}

/* Fallback vor/ohne flexslider-Init (auch Einzelbild-Produkte mit
   nur einem Bild behalten so die Box-Optik) */
body.woocommerce.single-product .elementor-widget-woocommerce-product-images .woocommerce-product-gallery:not(:has(.flex-viewport)) .woocommerce-product-gallery__wrapper {
    border: 1.5px solid var(--outline);
    border-radius: var(--r-lg);
    background: var(--surface-2);
    overflow: hidden;
}

body.woocommerce.single-product .elementor-widget-woocommerce-product-images .woocommerce-product-gallery .woocommerce-product-gallery__image img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
}

/* Thumbnails: 4er-Raster statt WC-Float-Layout */
body.woocommerce.single-product .elementor-widget-woocommerce-product-images .woocommerce-product-gallery ol.flex-control-thumbs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sp-3);
    margin: var(--sp-3) 0 0;
    padding: 0;
    list-style: none;
    overflow: visible;
}

body.woocommerce.single-product .elementor-widget-woocommerce-product-images .woocommerce-product-gallery ol.flex-control-thumbs li {
    width: auto;
    float: none;
    margin: 0;
    list-style: none;
}

body.woocommerce.single-product .elementor-widget-woocommerce-product-images .woocommerce-product-gallery ol.flex-control-thumbs li img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
    border: 1.5px solid var(--border);
    border-radius: var(--r-sm);
    background: var(--surface-2);
    opacity: .55;
    cursor: pointer;
    transition: opacity var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}

body.woocommerce.single-product .elementor-widget-woocommerce-product-images .woocommerce-product-gallery ol.flex-control-thumbs li img.flex-active,
body.woocommerce.single-product .elementor-widget-woocommerce-product-images .woocommerce-product-gallery ol.flex-control-thumbs li img:hover {
    opacity: 1;
    border-color: var(--accent);
}

/* Sale-Sticker im Galerie-Kontext (rendert nur bei Sale-Produkten).
   Gegner: WC-Core ".woocommerce span.onsale" (0,2,1) Kreis-Badge,
   Elementor widget-css padding 0 (0,3,1) -> hier (0,3,2). */
body.woocommerce.single-product .elementor-widget-woocommerce-product-images span.onsale {
    position: absolute;
    top: 12px;
    left: 12px;
    right: auto;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 5px 10px;
    background: var(--badge-sale);
    color: var(--accent-contrast);
    border-radius: var(--r-pill);
    font-family: var(--display);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    line-height: 1.4;
}

/* ============================================================
   3. TITEL, KURZBESCHREIBUNG, SHARE-BUTTONS
   Optik = .pdp__title / .pdp__desc (styles.css Z. 358, 365).
   Gegner:
   - post-8130 Titel "...elementor-element-6061d6be .elementor-heading-
     title" 25px/600/capitalize/Farbe global-75d9513 (0,4,0)
     -> hier (0,4,2) via h1.product_title.
   - post-8130 Kurzbeschreibung ".woocommerce .elementor-8130 ...
     .woocommerce-product-details__short-description" Merriweather
     16px/200 (0,5,0) -> hier (0,5,1) via Zusatzklasse
     .elementor-widget-container.
   - post-8130 Share-Vars auf dem Widget (0,3,0) und Hover (0,4,0)
     -> hier (0,3,1) / (0,4,1).
   ============================================================ */

body.woocommerce.single-product .elementor-widget-woocommerce-product-title h1.product_title {
    margin: 0;
    font-family: var(--display);
    font-size: clamp(28px, 3.6vw, 44px);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -.02em;
    text-transform: none;
    color: var(--text);
}

body.woocommerce.single-product .elementor-widget-woocommerce-product-short-description .elementor-widget-container .woocommerce-product-details__short-description {
    font-family: var(--body);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.6;
    color: var(--text-muted);
}

body.woocommerce.single-product .elementor-widget-woocommerce-product-short-description .elementor-widget-container .woocommerce-product-details__short-description p {
    margin: var(--sp-3) 0 0;
}

body.woocommerce.single-product .elementor-widget-woocommerce-product-short-description .elementor-widget-container .woocommerce-product-details__short-description b,
body.woocommerce.single-product .elementor-widget-woocommerce-product-short-description .elementor-widget-container .woocommerce-product-details__short-description strong {
    color: var(--text);
    font-weight: 700;
}

/* Share-Zone: dezent, Icons muted, Hover Akzent (Elementor-Custom-
   Properties des Widgets werden token-gespeist statt hartem Kit-Schwarz) */
body.woocommerce.single-product .elementor-widget-share-buttons {
    --e-share-buttons-secondary-color: var(--text-muted);
}

body.woocommerce.single-product .elementor-widget-share-buttons .elementor-share-btn {
    cursor: pointer;
    transition: opacity var(--dur-fast) var(--ease);
}

body.woocommerce.single-product .elementor-widget-share-buttons .elementor-share-btn:hover {
    --e-share-buttons-secondary-color: var(--accent);
}

/* ============================================================
   4. VORBEREITET-INERT: PREIS, FORM.CART, STEPPER, ADD-TO-CART,
      GM-PFLICHTANGABEN IM SUMMARY, LAGERSTATUS
   EHRLICHKEITS-HINWEIS: Template 8130 enthaelt heute KEIN Preis- und
   KEIN Add-to-Cart-Widget (Ist-Erhebung im Dateikopf, beide Test-PDPs
   0 Treffer). Diese Sektion matcht deshalb aktuell NICHTS und
   aktiviert sich erst nach dem User-Elementor-Edit (Widgets
   woocommerce-product-price + woocommerce-product-add-to-cart in die
   Info-Spalte; Entscheidungsvorlage = Parallelzelle). Selektoren
   folgen den dann von Elementor/WC/B2B-Market gerenderten
   Standardklassen + Whitelist-Semantik: input.qty ist das Mengen-
   INPUT, a.minus / a.plus sind die Buttons (wie Karte/product-card-
   blocks.php), button.single_add_to_cart_button bzw.
   a.add_to_cart_button.btn-plus der Kauf-Trigger - nur Optik, nie
   Umbenennung. Stepper-Optik = Pill wie product-cards.css.
   Gegner (dann): WC-Core "div.product p.price" (0,2,2), "div.product
   form.cart div.quantity" float (0,3,3), Button-Defaults (0,3,1).
   ============================================================ */

body.woocommerce.single-product .elementor-widget-woocommerce-product-price .price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--sp-3);
    margin: 0;
    font-family: var(--display);
    font-size: 32px;
    font-weight: 900;
    line-height: 1.15;
    color: var(--text);
}

body.woocommerce.single-product .elementor-widget-woocommerce-product-price .price .woocommerce-Price-amount {
    color: inherit;
}

body.woocommerce.single-product .elementor-widget-woocommerce-product-price .price ins {
    text-decoration: none;
    background: none;
    color: inherit;
}

body.woocommerce.single-product .elementor-widget-woocommerce-product-price .price del {
    font-family: var(--body);
    font-size: 16px;
    font-weight: 600;
    color: var(--text-muted);
}

/* GM-Pflichtangaben im Summary-Kontext (MwSt., Versand, Lieferzeit):
   NUR Lesbarkeits-Styling - niemals verstecken. Scope auf die Info-
   Spalte via :has, damit die Loop-Varianten in Sektion 6 getrennt
   bleiben. Optik = .pdp__legal (shop-ui.css Z. 252-254). */
body.woocommerce.single-product .elementor-column:has(.elementor-widget-woocommerce-product-title) .wgm-info {
    font-family: var(--body);
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--text-muted);
    margin: 0;
}

body.woocommerce.single-product .elementor-column:has(.elementor-widget-woocommerce-product-title) .wgm-info a {
    color: var(--accent);
    text-decoration: underline;
}

body.woocommerce.single-product .elementor-column:has(.elementor-widget-woocommerce-product-title) .wgm-info small {
    font-size: inherit;
}

/* Lagerstatus (WC p.stock; Optik nach .stock aus shop-ui.css, Farben
   token-basiert: verfuegbar = Akzent, nicht verfuegbar = muted - die
   semantischen Status-Tokens kommen erst mit S1-20) */
body.woocommerce.single-product .elementor-location-single p.stock {
    font-family: var(--body);
    font-size: 13.5px;
    font-weight: 700;
    margin: var(--sp-2) 0 0;
}

body.woocommerce.single-product .elementor-location-single p.stock.in-stock {
    color: var(--accent-hover);
}

body.woocommerce.single-product .elementor-location-single p.stock.out-of-stock {
    color: var(--text-muted);
}

/* Kaufzeile: Stepper + Button nebeneinander (Prototyp .pdp__buy) */
body.woocommerce.single-product .elementor-location-single form.cart {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: var(--sp-3);
    margin: var(--sp-4) 0 0;
}

/* Pill-Stepper wie product-cards.css: .quantity(.buttons_added) als
   Rahmen, a.minus / a.plus als Tasten, input.qty als Wertfeld */
body.woocommerce.single-product .elementor-location-single form.cart .quantity {
    float: none;
    display: inline-flex;
    align-items: center;
    margin: 0;
    background: var(--surface-3);
    border: 1.5px solid var(--outline);
    border-radius: var(--r-pill);
    overflow: hidden;
}

body.woocommerce.single-product .elementor-location-single form.cart .quantity a.minus,
body.woocommerce.single-product .elementor-location-single form.cart .quantity a.plus {
    min-width: 36px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text);
    background: transparent;
    border: 0;
    font-family: var(--display);
    font-size: 19px;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease);
}

body.woocommerce.single-product .elementor-location-single form.cart .quantity a.minus:hover,
body.woocommerce.single-product .elementor-location-single form.cart .quantity a.plus:hover {
    background: var(--surface-2);
    color: var(--text);
}

/* Stock-Limit-Zustand analog Karte (mini-cart.js setzt .disabled) */
body.woocommerce.single-product .elementor-location-single form.cart .quantity a.plus.disabled {
    opacity: .6;
    pointer-events: none;
}

body.woocommerce.single-product .elementor-location-single form.cart .quantity input.qty {
    width: 46px;
    height: 46px;
    border: 0;
    border-inline: 1.5px solid var(--border);
    border-radius: 0;
    background: transparent;
    text-align: center;
    font-family: var(--display);
    font-size: 15px;
    font-weight: 800;
    color: var(--text);
    -moz-appearance: textfield;
    appearance: textfield;
    padding: 0;
    margin: 0;
}

body.woocommerce.single-product .elementor-location-single form.cart .quantity input.qty::-webkit-inner-spin-button,
body.woocommerce.single-product .elementor-location-single form.cart .quantity input.qty::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Add-to-Cart als Akzent-Pill (deckt WC-Standard-Button im form.cart
   UND die Whitelist-Link-Variante a.add_to_cart_button.btn-plus ab,
   falls der Edit das Karten-Muster in die Info-Spalte bringt) */
body.woocommerce.single-product .elementor-location-single form.cart .single_add_to_cart_button,
body.woocommerce.single-product .elementor-column:has(.elementor-widget-woocommerce-product-title) a.add_to_cart_button.btn-plus {
    flex: 1 1 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 0 var(--sp-5);
    background: var(--accent);
    color: var(--accent-contrast);
    border: 1.5px solid var(--accent);
    border-radius: var(--r-pill);
    font-family: var(--display);
    font-size: 15.5px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}

body.woocommerce.single-product .elementor-location-single form.cart .single_add_to_cart_button:hover,
body.woocommerce.single-product .elementor-column:has(.elementor-widget-woocommerce-product-title) a.add_to_cart_button.btn-plus:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
    color: var(--accent-contrast);
}

body.woocommerce.single-product .elementor-location-single form.cart .single_add_to_cart_button:active,
body.woocommerce.single-product .elementor-column:has(.elementor-widget-woocommerce-product-title) a.add_to_cart_button.btn-plus:active {
    transform: scale(.97);
}

body.woocommerce.single-product .elementor-location-single form.cart .single_add_to_cart_button:focus-visible,
body.woocommerce.single-product .elementor-column:has(.elementor-widget-woocommerce-product-title) a.add_to_cart_button.btn-plus:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

/* ============================================================
   5. TABS (BESCHREIBUNG / REZENSIONEN)
   WC-Standard-Markup (verifiziert, s. Dateikopf). Pill-Leiste +
   Karten-Panel; Akkordeon-Optik unter 768px ist OHNE Markup-/JS-
   Eingriff nicht moeglich (WC-Tab-JS toggelt display) -> mobil
   wird die Pill-Leiste zur Scroll-Reihe wie die Archiv-Chips.
   Gegner (Auswahl, alle ohne important geschlagen):
   - WC-Core "div.product .woocommerce-tabs ul.tabs" padding/overflow
     (0,4,3) und "li" grauer Kasten + margin 0 -5px (0,4,3),
     "li a" (0,4,4), "li.active" (0,5,3)
   - post-8130 "li" border-color/radius (0,6,2), "li.active" bg
     #F9F9F9 (0,7,2), "li a" 18px (0,6,3), Panel bg #F9F9F9 (0,6,0)
   - Elementor widget-css Panel border-top/margin -1px (0,5,1)
   Hier: ul (0,6,3), li (0,6,3), li.active (0,7,3), li a (0,6,4),
   li.active a (0,7,4), Panel (0,6,1).
   ============================================================ */

body.woocommerce.single-product .elementor-widget-woocommerce-product-data-tabs .woocommerce-tabs.wc-tabs-wrapper ul.wc-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin: 0 0 var(--sp-4);
    padding: 0;
    list-style: none;
    background: none;
    border: 0;
    overflow: visible;
    position: static;
}

body.woocommerce.single-product .elementor-widget-woocommerce-product-data-tabs .woocommerce-tabs.wc-tabs-wrapper ul.wc-tabs::before,
body.woocommerce.single-product .elementor-widget-woocommerce-product-data-tabs .woocommerce-tabs.wc-tabs-wrapper ul.wc-tabs::after {
    content: none;
}

body.woocommerce.single-product .elementor-widget-woocommerce-product-data-tabs .woocommerce-tabs.wc-tabs-wrapper ul.wc-tabs li {
    margin: 0;
    padding: 0;
    background: var(--surface-3);
    border: 1.5px solid var(--outline);
    border-radius: var(--r-pill);
    box-shadow: none;
    transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}

body.woocommerce.single-product .elementor-widget-woocommerce-product-data-tabs .woocommerce-tabs.wc-tabs-wrapper ul.wc-tabs li::before,
body.woocommerce.single-product .elementor-widget-woocommerce-product-data-tabs .woocommerce-tabs.wc-tabs-wrapper ul.wc-tabs li::after {
    content: none;
}

body.woocommerce.single-product .elementor-widget-woocommerce-product-data-tabs .woocommerce-tabs.wc-tabs-wrapper ul.wc-tabs li:hover {
    background: var(--accent-soft);
}

body.woocommerce.single-product .elementor-widget-woocommerce-product-data-tabs .woocommerce-tabs.wc-tabs-wrapper ul.wc-tabs li a {
    display: inline-flex;
    align-items: center;
    padding: 10px 18px;
    font-family: var(--display);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--text);
    text-decoration: none;
    text-shadow: none;
}

body.woocommerce.single-product .elementor-widget-woocommerce-product-data-tabs .woocommerce-tabs.wc-tabs-wrapper ul.wc-tabs li.active {
    background: var(--accent);
    border-color: var(--accent);
}

body.woocommerce.single-product .elementor-widget-woocommerce-product-data-tabs .woocommerce-tabs.wc-tabs-wrapper ul.wc-tabs li.active a {
    color: var(--accent-contrast);
}

/* S1-12 Tab-/Akkordeon-Reveal: Das WC-Core-Tab-JS toggelt das aktive Panel
   per display (none -> block), wodurch diese Animation bei jedem Tab-Wechsel
   neu startet (250ms ease, NUR opacity/transform, kein Layout-Shift). Ein
   echter mobiler Akkordeon-Umbau braeuchte Markup-/JS-Eingriff in die
   WC-Tab-Logik (s. Sektion-5-Kopf) und bleibt bewusst aussen vor. */
@keyframes rl-tab-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}

body.woocommerce.single-product .elementor-widget-woocommerce-product-data-tabs .woocommerce-tabs.wc-tabs-wrapper .woocommerce-Tabs-panel {
    margin: 0;
    padding: var(--sp-5);
    background: var(--surface-3);
    border: 1.5px solid var(--outline);
    border-radius: var(--r-md);
    box-shadow: none;
    font-family: var(--body);
    font-size: 15px;
    line-height: 1.65;
    color: var(--text);
    animation: rl-tab-in var(--dur) var(--ease);
}

body.woocommerce.single-product .elementor-widget-woocommerce-product-data-tabs .woocommerce-tabs.wc-tabs-wrapper .woocommerce-Tabs-panel h2 {
    margin: 0 0 var(--sp-4);
    font-family: var(--display);
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -.01em;
    color: var(--text);
}

body.woocommerce.single-product .elementor-widget-woocommerce-product-data-tabs .woocommerce-tabs.wc-tabs-wrapper .woocommerce-Tabs-panel p {
    margin: 0 0 var(--sp-3);
}

body.woocommerce.single-product .elementor-widget-woocommerce-product-data-tabs .woocommerce-tabs.wc-tabs-wrapper .woocommerce-Tabs-panel p:last-child {
    margin-bottom: 0;
}

body.woocommerce.single-product .elementor-widget-woocommerce-product-data-tabs .woocommerce-tabs.wc-tabs-wrapper .woocommerce-Tabs-panel a {
    color: var(--accent);
}

/* Rezensionen-Panel: Sterne in Akzent, Formularfelder in Token-Optik.
   WC-core IDs #respond / #review_form / #commentform sind hier noetig
   (Gegner ".woocommerce #respond input#submit" traegt selbst ID-
   Spezifitaet (1,1,1) - Begruendung im Dateikopf). */
body.woocommerce.single-product .elementor-widget-woocommerce-product-data-tabs .woocommerce-Tabs-panel .star-rating,
body.woocommerce.single-product .elementor-widget-woocommerce-product-data-tabs .woocommerce-Tabs-panel .star-rating::before,
body.woocommerce.single-product .elementor-widget-woocommerce-product-data-tabs .woocommerce-Tabs-panel p.stars a {
    color: var(--accent);
}

body.woocommerce.single-product #review_form #commentform textarea,
body.woocommerce.single-product #review_form #commentform input[type="text"],
body.woocommerce.single-product #review_form #commentform input[type="email"] {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    background: var(--surface);
    color: var(--text);
    border: 1.5px solid var(--border);
    border-radius: var(--r-sm);
    font-family: var(--body);
    font-size: 14.5px;
    transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}

body.woocommerce.single-product #review_form #commentform textarea:focus,
body.woocommerce.single-product #review_form #commentform input[type="text"]:focus,
body.woocommerce.single-product #review_form #commentform input[type="email"]:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: var(--focus-ring);
}

body.woocommerce.single-product #respond input#submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 var(--sp-5);
    background: var(--accent);
    color: var(--accent-contrast);
    border: 1.5px solid var(--accent);
    border-radius: var(--r-pill);
    font-family: var(--display);
    font-size: 14.5px;
    font-weight: 700;
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease);
}

body.woocommerce.single-product #respond input#submit:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
    color: var(--accent-contrast);
}

/* ============================================================
   6. RELATED / UPSELL ("Das koennte dir gefallen")
   Verifiziert: WC-STANDARD-Loop (kein content-product-custom, kein
   li.product-card; product-cards.css laedt auf der PDP nicht) ->
   Karten werden hier vollstaendig auf Prototyp-Optik gebracht
   (shop-ui.css Karten-Block), ohne Whitelist-Bruch: alle WC-Klassen
   (add_to_cart_button, woocommerce-LoopProduct-link usw.) bleiben.
   Selektoren decken product-related UND product-upsell ab (Upsell
   rendert bei den Testprodukten leer, Markup ist identisch).
   Gegner (post-8130, Auswahl): Karten-Kasten text-align center +
   Schatten (0,6,2) -> hier (0,6,3); Titel #000/16px (0,7,2) -> hier
   (0,7,4); Preis #DE0101 (0,7,2) -> (0,7,4); Button-Kasten gruen
   eckig margin-top 25px (0,7,2) -> (0,7,4), Hover (0,8,2) -> (0,8,4);
   onsale Block 70x40 (0,7,3) -> (0,7,4); Grid-Gaps (0,5,1) -> (0,5,2);
   Heading #000 18px (0,6,1) -> (0,6,2); Sterne-Farbe (0,7,2)/(0,7,3)
   -> (0,7,3)/(0,7,4).
   ============================================================ */

/* Sektions-Heading wie .section__head h2 (styles.css Z. 136) */
body.woocommerce.single-product .elementor-widget-woocommerce-product-related.elementor-products-grid.elementor-wc-products .products > h2,
body.woocommerce.single-product .elementor-widget-woocommerce-product-upsell.elementor-products-grid.elementor-wc-products .products > h2 {
    margin: var(--sp-7) 0 var(--sp-5);
    font-family: var(--display);
    font-size: clamp(24px, 3vw, 34px);
    font-weight: 800;
    letter-spacing: -.02em;
    text-transform: none;
    text-align: left;
    color: var(--text);
}

/* Grid-Kontext 4/2/1 (Stufen in Sektion 7); ersetzt Elementor-Grid-
   Spalten (elementor-grid-4 ... -tablet-3 ... -mobile-2) einheitlich */
body.woocommerce.single-product .elementor-widget-woocommerce-product-related ul.products.elementor-grid,
body.woocommerce.single-product .elementor-widget-woocommerce-product-upsell ul.products.elementor-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-column-gap: var(--sp-5);
    grid-row-gap: var(--sp-5);
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Karte */
body.woocommerce.single-product .elementor-widget-woocommerce-product-related.elementor-wc-products ul.products li.product,
body.woocommerce.single-product .elementor-widget-woocommerce-product-upsell.elementor-wc-products ul.products li.product {
    position: relative;
    display: flex;
    flex-direction: column;
    float: none;
    width: auto;
    margin: 0;
    padding: 0 0 var(--sp-4);
    list-style: none;
    text-align: left;
    background: var(--surface-3);
    border: 1.5px solid var(--outline);
    border-radius: var(--r-md);
    box-shadow: none;
    overflow: hidden;
    transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}

body.woocommerce.single-product .elementor-widget-woocommerce-product-related.elementor-wc-products ul.products li.product:hover,
body.woocommerce.single-product .elementor-widget-woocommerce-product-upsell.elementor-wc-products ul.products li.product:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
}

body.woocommerce.single-product .elementor-widget-woocommerce-product-related.elementor-wc-products ul.products li.product a.woocommerce-LoopProduct-link,
body.woocommerce.single-product .elementor-widget-woocommerce-product-upsell.elementor-wc-products ul.products li.product a.woocommerce-LoopProduct-link {
    display: block;
    color: inherit;
    text-decoration: none;
}

/* Produktbild: quadratisch, randlos oben in der Karte; loading=lazy
   der Loop-Bilder bleibt unbehindert */
body.woocommerce.single-product .elementor-widget-woocommerce-product-related.elementor-wc-products ul.products li.product a.woocommerce-LoopProduct-link img,
body.woocommerce.single-product .elementor-widget-woocommerce-product-upsell.elementor-wc-products ul.products li.product a.woocommerce-LoopProduct-link img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    object-fit: cover;
    margin: 0;
    background: var(--surface);
}

body.woocommerce.single-product .elementor-widget-woocommerce-product-related.elementor-wc-products ul.products li.product h2.woocommerce-loop-product__title,
body.woocommerce.single-product .elementor-widget-woocommerce-product-upsell.elementor-wc-products ul.products li.product h2.woocommerce-loop-product__title {
    margin: 0;
    padding: var(--sp-4) var(--sp-4) 0;
    font-family: var(--display);
    font-size: 17px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--text);
    overflow-wrap: anywhere;
}

body.woocommerce.single-product .elementor-widget-woocommerce-product-related.elementor-wc-products ul.products li.product .star-rating,
body.woocommerce.single-product .elementor-widget-woocommerce-product-related.elementor-wc-products ul.products li.product .star-rating::before,
body.woocommerce.single-product .elementor-widget-woocommerce-product-upsell.elementor-wc-products ul.products li.product .star-rating,
body.woocommerce.single-product .elementor-widget-woocommerce-product-upsell.elementor-wc-products ul.products li.product .star-rating::before {
    color: var(--accent);
}

body.woocommerce.single-product .elementor-widget-woocommerce-product-related.elementor-wc-products ul.products li.product p.price,
body.woocommerce.single-product .elementor-widget-woocommerce-product-upsell.elementor-wc-products ul.products li.product p.price {
    margin: var(--sp-1) 0 0;
    padding: 0 var(--sp-4);
    font-family: var(--display);
    font-size: 18px;
    font-weight: 800;
    line-height: 1.3;
    color: var(--text);
}

body.woocommerce.single-product .elementor-widget-woocommerce-product-related.elementor-wc-products ul.products li.product p.price ins,
body.woocommerce.single-product .elementor-widget-woocommerce-product-upsell.elementor-wc-products ul.products li.product p.price ins {
    color: var(--text);
    text-decoration: none;
    background: none;
}

body.woocommerce.single-product .elementor-widget-woocommerce-product-related.elementor-wc-products ul.products li.product p.price del,
body.woocommerce.single-product .elementor-widget-woocommerce-product-upsell.elementor-wc-products ul.products li.product p.price del {
    margin-left: 5px;
    font-family: var(--body);
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
}

/* GM-Pflichtangaben in der Loop-Karte (MwSt., Versand, Lieferzeit):
   NUR kompakt gestylt, niemals versteckt */
body.woocommerce.single-product .elementor-widget-woocommerce-product-related.elementor-wc-products ul.products li.product .wgm-info,
body.woocommerce.single-product .elementor-widget-woocommerce-product-upsell.elementor-wc-products ul.products li.product .wgm-info {
    margin: 2px 0 0;
    padding: 0 var(--sp-4);
    font-family: var(--body);
    font-size: 11.5px;
    line-height: 1.45;
    color: var(--text-muted);
    text-align: left;
}

body.woocommerce.single-product .elementor-widget-woocommerce-product-related.elementor-wc-products ul.products li.product .wgm-info small,
body.woocommerce.single-product .elementor-widget-woocommerce-product-upsell.elementor-wc-products ul.products li.product .wgm-info small {
    font-size: inherit;
}

body.woocommerce.single-product .elementor-widget-woocommerce-product-related.elementor-wc-products ul.products li.product .wgm-info a,
body.woocommerce.single-product .elementor-widget-woocommerce-product-upsell.elementor-wc-products ul.products li.product .wgm-info a {
    color: var(--accent);
    text-decoration: underline;
}

/* Add-to-Cart der Loop-Karte als Akzent-Pill (Klassen unveraendert) */
body.woocommerce.single-product .elementor-widget-woocommerce-product-related.elementor-wc-products ul.products li.product a.button,
body.woocommerce.single-product .elementor-widget-woocommerce-product-upsell.elementor-wc-products ul.products li.product a.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    margin: var(--sp-3) var(--sp-4) 0;
    padding: 0 var(--sp-4);
    min-height: 42px;
    background: var(--accent);
    color: var(--accent-contrast);
    border: 1.5px solid var(--accent);
    border-radius: var(--r-pill);
    font-family: var(--display);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1;
    text-decoration: none;
    transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}

body.woocommerce.single-product .elementor-widget-woocommerce-product-related.elementor-wc-products ul.products li.product a.button:hover,
body.woocommerce.single-product .elementor-widget-woocommerce-product-upsell.elementor-wc-products ul.products li.product a.button:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
    color: var(--accent-contrast);
}

body.woocommerce.single-product .elementor-widget-woocommerce-product-related.elementor-wc-products ul.products li.product a.button:active,
body.woocommerce.single-product .elementor-widget-woocommerce-product-upsell.elementor-wc-products ul.products li.product a.button:active {
    transform: scale(.97);
}

/* "Warenkorb anzeigen"-Link, den WC nach AJAX-Add ergaenzt */
body.woocommerce.single-product .elementor-widget-woocommerce-product-related.elementor-wc-products ul.products li.product a.added_to_cart,
body.woocommerce.single-product .elementor-widget-woocommerce-product-upsell.elementor-wc-products ul.products li.product a.added_to_cart {
    margin: var(--sp-2) var(--sp-4) 0;
    font-family: var(--body);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--accent-hover);
    text-decoration: underline;
}

/* Sale-Sticker der Loop-Karte */
body.woocommerce.single-product .elementor-widget-woocommerce-product-related.elementor-wc-products ul.products li.product span.onsale,
body.woocommerce.single-product .elementor-widget-woocommerce-product-upsell.elementor-wc-products ul.products li.product span.onsale {
    position: absolute;
    top: 12px;
    left: 12px;
    right: auto;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 5px 10px;
    background: var(--badge-sale);
    color: var(--accent-contrast);
    border-radius: var(--r-pill);
    font-family: var(--display);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    line-height: 1.4;
}

/* ============================================================
   7. RESPONSIVE (Grenzen exakt 1200 / 767 wie header.css/archive.css;
      Basisbereich 768-1199px = 2-spaltiges Related-Grid)
   ============================================================ */

/* Desktop gross: Galerie haengt beim Scrollen unter dem Sticky-Header
   (Prototyp .pdp__gallery sticky, styles.css Z. 349) */
@media (min-width: 1200px) {
    body.woocommerce.single-product .elementor-widget-woocommerce-product-images {
        position: sticky;
        top: calc(var(--header-h) + var(--sp-4));
    }
}

@media (max-width: 1199px) {
    body.woocommerce.single-product .elementor-widget-woocommerce-product-related ul.products.elementor-grid,
    body.woocommerce.single-product .elementor-widget-woocommerce-product-upsell ul.products.elementor-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-column-gap: var(--sp-3);
        grid-row-gap: var(--sp-3);
    }
}

@media (max-width: 767px) {
    /* Tabs-Leiste als horizontale Scroll-Reihe (Muster Archiv-Chips,
       archive.css Sektion 7); Scrollbar rein kosmetisch versteckt,
       Touch-/Wheel-Scroll bleibt */
    body.woocommerce.single-product .elementor-widget-woocommerce-product-data-tabs .woocommerce-tabs.wc-tabs-wrapper ul.wc-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    body.woocommerce.single-product .elementor-widget-woocommerce-product-data-tabs .woocommerce-tabs.wc-tabs-wrapper ul.wc-tabs::-webkit-scrollbar {
        display: none;
    }

    body.woocommerce.single-product .elementor-widget-woocommerce-product-data-tabs .woocommerce-tabs.wc-tabs-wrapper ul.wc-tabs li {
        flex: none;
    }

    body.woocommerce.single-product .elementor-widget-woocommerce-product-data-tabs .woocommerce-tabs.wc-tabs-wrapper .woocommerce-Tabs-panel {
        padding: var(--sp-4);
    }

    /* Related: 1 Spalte */
    body.woocommerce.single-product .elementor-widget-woocommerce-product-related ul.products.elementor-grid,
    body.woocommerce.single-product .elementor-widget-woocommerce-product-upsell ul.products.elementor-grid {
        grid-template-columns: 1fr;
    }

    /* Galerie-Thumbs etwas enger */
    body.woocommerce.single-product .elementor-widget-woocommerce-product-images .woocommerce-product-gallery ol.flex-control-thumbs {
        gap: var(--sp-2);
    }

    /* Inert-Kaufzeile: Button volle Breite unter dem Stepper */
    body.woocommerce.single-product .elementor-location-single form.cart .single_add_to_cart_button {
        flex: 1 1 100%;
    }
}

/* ============================================================
   8. WOO-ERFOLGSMELDUNG (Add-to-Cart-Notice, 2026-08-09)
   Markup (WC-Core, unangetastet): div.woocommerce-notices-wrapper
   als body-Kind VOR dem Template-Wrapper (Wrapper-Position: Evidenz
   s1-09-pdp-live-ist.md Z. 53; Kindreihenfolge IN der Message aus
   WC-Core wc_add_to_cart_message(): a.button.wc-forward "Warenkorb
   anzeigen" ZUERST, danach der Textknoten - live per Playwright-
   Readback 2026-08-09 bestaetigt).
   Gegner: woocommerce-general (.woocommerce-message: graue Flaeche,
   border-top, absolutes ::before-Icon, .button float:right) - wird
   ueber Spezifitaet geschlagen (body-Doppelklasse, Muster Datei-Kopf).
   Umbau: zentrierte fit-content-Karte ("Toast"-Optik) statt
   Vollbreiten-Leiste. BEWUSST fit-content statt Contentbreite: die
   Elementor-Kit-Innenbreite der PDP ist 1350px (live gemessen
   2026-08-09 bei 1920er-Viewport), --maxw dort 1632px - eine
   maxw-Karte wuerde den Content ueberragen; die selbstbreite Karte
   ist von der Kit-Breite entkoppelt. Light: accent-soft auf Beige,
   Dark: transparentes Gruen auf Deep Green - beide Themes rein ueber
   tokens.css, kein eigener Dark-Block noetig. Reihenfolge Icon ->
   Text -> Button per Flex-Order (order:1 nur auf dem Button, ::before
   und Text bleiben in DOM-Reihenfolge davor). Sichtbar wird der
   Wrapper nur mit Inhalt: leer hat er trotz max-width/padding keine
   Hoehe - kein Geistersteg auf notice-freien PDPs.
   BEWUSST NUR .woocommerce-message (Review 2026-08-09, WICHTIG 3
   akzeptiert): .woocommerce-error/-info bleiben site-weit Woo-Default
   (auch Cart/Checkout stylen sie nicht um) - Error ist zudem ein
   ul/li-Markup, das eine eigene Layout-Behandlung braeuchte; kein
   Owner-Auftrag, Status quo konsistent.
   ============================================================ */
body.woocommerce.single-product .woocommerce-notices-wrapper {
    width: 100%;
    max-width: var(--maxw);
    margin-inline: auto;
    padding-inline: var(--rl-gutter);
}

body.woocommerce.single-product .woocommerce-notices-wrapper .woocommerce-message {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2) var(--sp-4);
    width: fit-content;
    max-width: 100%;
    margin: var(--sp-5) auto;
    padding: var(--sp-4) var(--sp-6);
    text-align: center;
    background: var(--accent-soft);
    color: var(--text);
    font-family: var(--body);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.5;
    border: 1.5px solid var(--accent);
    border-radius: var(--r-md);
    box-shadow: var(--shadow);
}

/* Woo-Icon (Font-Glyph) vom absoluten Rand-Layout in den Flex-Fluss
   holen und auf Akzent faerben; Glyph selbst bleibt WC-Core. */
body.woocommerce.single-product .woocommerce-notices-wrapper .woocommerce-message::before {
    position: static;
    color: var(--accent);
    font-size: 18px;
    line-height: 1;
}

/* "Warenkorb anzeigen" als Akzent-Pill (Optik .rl-btn--leaf), Float
   des WC-Gegners aufgehoben, per order ans Zeilenende gesetzt.
   Kontrast accent-contrast auf accent (Light ~3,3:1) ist die BEWUSST
   beibehaltene site-weite CTA-Optik (identisch .rl-btn--leaf,
   tokens.css:171, u. a. "In den Warenkorb"); Review 2026-08-09
   NICE 4 dokumentiert-akzeptiert, Dark liegt bei ~4,8:1. */
body.woocommerce.single-product .woocommerce-notices-wrapper .woocommerce-message .button {
    order: 1;
    float: none;
    display: inline-flex;
    align-items: center;
    margin: 0;
    padding: 10px 20px;
    background: var(--accent);
    color: var(--accent-contrast);
    font-family: var(--display);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    border: 1.5px solid var(--accent);
    border-radius: var(--r-pill);
    transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}

body.woocommerce.single-product .woocommerce-notices-wrapper .woocommerce-message .button:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
    color: var(--accent-contrast);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

/* Transparente outline als Forced-Colors-Anker (Windows-Kontrastmodus
   verwirft box-shadow, malt aber die outline in Systemfarbe). */
body.woocommerce.single-product .woocommerce-notices-wrapper .woocommerce-message .button:focus-visible {
    outline: 2px solid transparent;
    box-shadow: var(--focus-ring);
}

/* Mobil: kompaktere Karte, Button rutscht per flex-wrap zentriert
   unter den Text (Grenze 767 wie Sektion 7). */
@media (max-width: 767px) {
    body.woocommerce.single-product .woocommerce-notices-wrapper .woocommerce-message {
        margin-top: var(--sp-4);
        padding: var(--sp-4);
        font-size: 14px;
    }
}