/*
 * RealLeaf — Quick-View-Popup (S1-09, Zelle css-quickview)
 *
 * Zweck: Tokenbasierte Modal-Optik fuer das Produkt-Popup. Eigene Datei
 * (getrennt von pdp.css), weil das Popup NICHT nur auf der PDP lebt: die
 * Shell haengt bedingungslos an wp_footer (inc/shop-functions.php:304-313)
 * und der Trigger .more-info existiert ueberall, wo Produktkarten rendern
 * (Shop-Archiv, Kategorie, Suche, Homepage-Bestseller). Enqueue: Handle
 * realleaf-quickview, GLOBAL, Prio 9, Dependency realleaf-tokens
 * (functions.php:230-242, Parallelzelle).
 *
 * MARKUP-VERTRAG (Markup/JS tabu, nur CSS; verifiziert 2026-06-12):
 * - Shell: #product-popup-overlay > #product-popup > button.popup-close
 *   (mit <i class="eicon-close">) + .popup-content
 *   (inc/shop-functions.php:304-313; Overlay traegt inline display:none).
 * - Sofort-Render bei Klick auf .more-info (mini-cart.js:2190-2208):
 *   .popup-content erhaelt .popup-grid.popup-container > .popup-image(img)
 *   + .popup-info(h2 + .popup-loader).
 * - AJAX load_product_popup (inc/shop-functions.php:251-302) ersetzt das durch:
 *   .popup-grid.popup-container > .popup-image + .popup-info(h2, .popup-short,
 *   .popup-sku, .popup-price.regular-price, .product-description,
 *   .popup-actions.product-card__actions[data-product-id] mit
 *   render_product_actions(): .product-actions > a.add_to_cart_button.btn-plus
 *   + .product-quantity > .quantity.buttons_added > a.minus / input.qty / a.plus
 *   (inc/product-card-blocks.php:90-157)).
 * - JS-Fallback-Stepper (mini-cart.js:2114-2125): div.quantity.product-quantity
 *   > button.minus / input.qty / button.plus (deshalb decken alle
 *   Stepper-Selektoren hier .quantity als gemeinsamen Anker und a- wie
 *   button-Elemente ab).
 * - Whitelist-Semantik (nie umbenennen, nur stylen): .qty ist das INPUT
 *   (input.qty.input-text), a.minus / a.plus die Buttons,
 *   a.add_to_cart_button.btn-plus der Kauf-Link.
 *
 * OPEN/CLOSE-MECHANIK (mini-cart.js:2210, 2225-2234):
 * - Oeffnen: jQuery fadeIn(200) auf #product-popup-overlay -> setzt INLINE
 *   display:block und animiert INLINE die Overlay-opacity. Folgen fuer CSS:
 *   (a) keine eigenen opacity-Transitions/Animationen auf dem Overlay
 *   (Inline-Style gewinnt, wuerde nur kollidieren) - der Overlay-Fade kommt
 *   vom JS; (b) keine display:flex-Zentrierung auf dem Overlay (fadeIn
 *   erzwingt display:block) - Zentrierung des Modals daher via
 *   position:absolute + translate.
 * - Auf #product-popup selbst toggelt das JS NICHTS (keine Klasse, kein
 *   Inline-Style). Einstiegs-Motion deshalb als CSS-@keyframes-ANIMATION
 *   (startet bei jedem display:none -> block des Eltern-Overlays neu),
 *   nicht als Transition (haette keinen Startzustand).
 * - Schliessen: fadeOut(200) auf dem Overlay. Eine Exit-Animation des Modals
 *   (Scale-down bzw. Sheet-Slide-down) ist ohne JS-Aenderung NICHT moeglich;
 *   das Modal verschwindet im Overlay-Fade. Ehrlich dokumentierte Grenze.
 * - Bottom-Sheet mobil (<=767px) ist mit dieser Mechanik moeglich: Position
 *   fixed unten + Slide-up-@keyframes beim Oeffnen; Schliessen = Overlay-Fade.
 * - Kein Body-Scroll-Lock moeglich: das JS setzt keine body-Klasse fuer das
 *   Popup (anders als mini-cart-open). Das Modal scrollt intern
 *   (max-height + overflow:auto + overscroll-behavior:contain).
 *
 * KASKADEN-KONTEXT (Gegner: assets/css/product-cards.css, Bestand bleibt
 * unveraendert): product-cards.css enthaelt einen eigenen Popup-Block
 * (Z. 580-636 Basis, Z. 746-762 Mobil-Bottom-Sheet, Keyframes slideUp) und
 * ungescopte Stepper-Regeln (Z. 264-378), die im Popup mitgreifen. Es laedt
 * auf Front-Page/Shop/Taxonomie/Suche mit Hook-Prio 10 und wird damit NACH
 * quickview.css (Prio 9) ausgegeben -> bei GLEICHER Spezifitaet gewinnt
 * product-cards.css. Jede Regel hier ueberbietet deshalb die Spezifitaet
 * des Bestands, statt auf Ladereihenfolge oder das important-Flag zu setzen:
 *   - Overlay:  div#product-popup-overlay  schlaegt  #product-popup-overlay
 *   - Modal:    #product-popup-overlay #product-popup  schlaegt  #product-popup
 *   - Close:    #product-popup button.popup-close  schlaegt  button.popup-close
 *   - Grid/Stepper/Pill: Scope #product-popup vor jeder Klassenkette schlaegt
 *     die ungescopten .popup-grid- / .product-quantity- /
 *     .product-card__actions-Regeln des Bestands.
 * Drei Bestandsregeln tragen das important-Flag (product-cards.css Z. 275
 * Pill-Textfarbe, Z. 338 text-decoration, Z. 349 + 717 Input-Breite 40/32px):
 * dort setzt quickview.css bewusst DIESELBEN WERTE (Pill-Farbe
 * var(--accent-contrast), text-decoration none, Input 40px Desktop / 32px
 * mobil) - kein Kampf noetig, identisches Ergebnis auf Seiten mit und ohne
 * product-cards.css. Diese Datei selbst: 0 aktive important-Flags.
 *
 * THEMES/TOKENS: ausschliesslich semantische Tokens aus assets/css/tokens.css;
 * [data-theme="dark"] schaltet automatisch (keine dark-Sonderregeln noetig,
 * einzige Ausnahme: Scrim-Abdunklung, s. Sektion 1). prefers-reduced-motion
 * ist GLOBAL in tokens.css Z. 108-112 abgedeckt (animation-duration und
 * transition-duration auf 0.001ms) - hier bewusst NICHT dupliziert; die
 * Keyframes nutzen fill-mode both und landen damit sofort im Endzustand.
 *
 * Z-INDEX: 9999 wie Bestand (product-cards.css Z. 585). Bewusst UNTER dem
 * Mini-Cart-Drawer (mini-cart.css: Drawer 99999, dessen Overlay 99998),
 * damit Add-to-Cart aus dem Popup den Drawer weiterhin DARUEBER oeffnen kann.
 *
 * CSS-GATES (S1-07/08-Lehre, geprueft vor Abgabe, Protokoll):
 * - Kommentar-Balance: Anzahl Kommentar-Oeffner == Anzahl Schliesser (geprueft
 *   per Script); keine Schliesser-Sequenz im Kommentartext, Token-Namen stets
 *   ausgeschrieben (--dur, --dur-fast, --ease, --ease-out).
 * - 0 aktive important-Flags (Begruendung oben im Kaskaden-Kontext).
 * - 0 Elementor-ID-Selektoren; .eicon-close wird NICHT als Selektor benutzt
 *   (das Icon wird ueber .popup-close i angesprochen).
 * - Alle var(--...)-Tokens in tokens.css vorhanden (geprueft per Script).
 * - Keine sichtbaren Text-Strings via CSS (einziges content ist der leere
 *   String des Loader-Shimmer-Balkens).
 */

/* ============================================================
   1. OVERLAY (Scrim)
   Gegner: product-cards.css Z. 581-587 (#product-popup-overlay).
   display:none als Grundzustand (Shell traegt es zusaetzlich inline);
   jQuery fadeIn/fadeOut steuert display + opacity inline - hier deshalb
   bewusst KEINE opacity/transition. Scrim-Farbe: color-mix aus dem
   Marken-Token --rl-green-deep (Prototyp-Referenz shop-ui.css Z. 185:
   rgb(17 40 25 / 0.55) ist exakt dieser Farbwert); erste Zeile ist der
   statische Fallback fuer Browser ohne color-mix.
   ============================================================ */

div#product-popup-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    background: rgb(17 40 25 / 0.55);
    background: color-mix(in srgb, var(--rl-green-deep) 55%, transparent);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}

/* Dark-Theme: neutralere, tiefere Abdunklung (gruener Scrim wirkt auf der
   Deep-Green-Flaeche flau); einzige theme-gescopte Regel dieser Datei */
[data-theme="dark"] div#product-popup-overlay {
    background: rgb(0 0 0 / 0.6);
    background: color-mix(in srgb, var(--rl-black) 62%, transparent);
}

/* ============================================================
   2. MODAL
   Gegner: product-cards.css Z. 589-602 (#product-popup).
   Zentrierung via absolute + translate (Overlay wird von fadeIn auf
   display:block gezwungen, s. Kopf). Scale+Fade 250ms = var(--dur) mit
   var(--ease-out) gemaess Motion-Tabelle (design/prototype/HANDOFF.md
   Abschnitt 5, Zeile Quick-View Modal). Surface/Outline/Radius/Shadow
   nach Prototyp-Panel (shop-ui.css Z. 186). max-width = var(--rl-modal-w)
   (920px, tokens.css): bewusst von der Content-Breite (--maxw, jetzt bis
   2000px) ENTKOPPELT, sonst wuerde der Dialog auf grossen Monitoren mitwachsen.
   ============================================================ */

#product-popup-overlay #product-popup {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 92%;
    max-width: var(--rl-modal-w);
    max-height: min(86vh, 860px);
    overflow: auto;
    overscroll-behavior: contain;
    background: var(--surface-3);
    color: var(--text);
    border: 1.5px solid var(--outline);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-md);
    padding: var(--sp-7) var(--sp-6) var(--sp-6);
    animation: rl-qv-in var(--dur) var(--ease-out) both;
}

@keyframes rl-qv-in {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.96);
    }

    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

/* ============================================================
   3. CLOSE-BUTTON
   Gegner: product-cards.css Z. 604-619 (.popup-close oben LINKS,
   RTL-Erbe; button.popup-close mit left:-12px). Hier nach oben RECHTS
   (DE/EN sind LTR; Prototyp-Referenz qv-Close shop-ui.css Z. 188).
   Touch-Target 40x40px (Anforderung >= 40px), beide Themes via Tokens.
   Das Icon ist <i class="eicon-close"> (Elementor-Icon-Font, vom
   Elementor-Stack global geladen) - bewusst ueber .popup-close i
   angesprochen, damit kein eicon-Selektor noetig ist.
   ============================================================ */

#product-popup button.popup-close {
    position: absolute;
    top: var(--sp-3);
    right: var(--sp-3);
    left: auto;
    z-index: 2;
    width: 40px;
    height: 40px;
    padding: 0;
    display: grid;
    place-items: center;
    background: var(--surface-3);
    color: var(--text);
    border: 1.5px solid var(--outline);
    border-radius: var(--r-sm);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

#product-popup button.popup-close:hover {
    background: var(--accent);
    color: var(--accent-contrast);
}

#product-popup button.popup-close:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

#product-popup .popup-close i {
    font-size: 18px;
    line-height: 1;
    pointer-events: none;
}

/* ============================================================
   4. CONTENT: GRID / IMAGE / INFO / LOADER
   Gegner: product-cards.css Z. 621-626 (.popup-grid).
   ============================================================ */

#product-popup .popup-content {
    min-height: 120px;
}

#product-popup .popup-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--sp-5);
    align-items: start;
}

#product-popup .popup-image {
    background: var(--surface-2);
    border: 1.5px solid var(--border);
    border-radius: var(--r-md);
    overflow: hidden;
}

#product-popup .popup-image img {
    display: block;
    width: 100%;
    height: auto;
}

/* Loader-Zustand des Sofort-Renders (mini-cart.js:2205): dezenter Text +
   Shimmer-Balken (HANDOFF Motion-Tabelle: Skeleton-Shimmer 1.3s linear).
   content ist ein LEERER String - kein sichtbarer Text via CSS */
#product-popup .popup-loader {
    margin-top: var(--sp-4);
    color: var(--text-muted);
    font-size: 14.5px;
}

#product-popup .popup-loader::after {
    content: "";
    display: block;
    height: 10px;
    margin-top: var(--sp-3);
    border-radius: var(--r-pill);
    background: linear-gradient(90deg, var(--surface-2) 25%, var(--accent-soft) 50%, var(--surface-2) 75%);
    background-size: 200% 100%;
    animation: rl-qv-shimmer 1.3s linear infinite;
}

@keyframes rl-qv-shimmer {
    from {
        background-position: 200% 0;
    }

    to {
        background-position: -200% 0;
    }
}

/* ============================================================
   5. INFO-TYPOGRAFIE
   Preis-/Pflichtangaben-Flaechen (.popup-price enthaelt wc_price-Ausgabe)
   werden NUR gestylt, nie versteckt (German-Market-Leitplanke).
   ============================================================ */

#product-popup .popup-info h2 {
    margin: 0 0 var(--sp-3);
    font-family: var(--display);
    font-weight: 800;
    font-size: clamp(22px, 2.2vw, 28px);
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--text);
}

#product-popup .popup-info .popup-short {
    color: var(--text-muted);
    font-size: 15px;
    line-height: 1.55;
}

#product-popup .popup-info .popup-sku {
    margin: var(--sp-2) 0;
    font-size: 12px;
    letter-spacing: 0.04em;
    color: var(--text-muted);
}

#product-popup .popup-info .popup-price {
    margin: var(--sp-3) 0;
    font-family: var(--display);
    font-weight: 900;
    font-size: 26px;
    color: var(--text);
}

#product-popup .popup-info .product-description {
    margin: 0 0 var(--sp-4);
    color: var(--text-muted);
    font-size: 14.5px;
    line-height: 1.6;
}

/* ============================================================
   5b. QUICK-VIEW PHASE 1 (2026-06-15): Prototyp-Felder
   Kategorie-Eyebrow, Bewertung, GM-MwSt/Versand-Zeile, Details-Link.
   Nur Tokens; GM-Pflichtzeilen werden klein abgesetzt, nie versteckt.
   ============================================================ */
#product-popup .popup-info .popup-cat {
    display: block;
    margin: 0 0 var(--sp-2);
    font-family: var(--body);
    font-weight: 700;
    font-size: 11.5px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--accent-hover);
}

#product-popup .popup-info .popup-rate {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin: 0 0 var(--sp-3);
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
}

#product-popup .popup-info .popup-rate .star-rating {
    color: var(--accent);
}

/* German-Market-Pflichtzeilen im Preis (aus get_price_html): klein/normal
   absetzen - nie verstecken (GM-Leitplanke). */
#product-popup .popup-info .popup-price .wgm-info,
#product-popup .popup-info .popup-price small,
#product-popup .popup-info .popup-price .woocommerce-de_price_taxrate,
#product-popup .popup-info .popup-price .woocommerce_de_versandkosten {
    font-family: var(--body);
    font-weight: 500;
    font-size: 12.5px;
    color: var(--text-muted);
}

#product-popup .popup-info .popup-price .woocommerce-de_price_taxrate {
    display: block;
    margin-top: var(--sp-1);
}

/* Statischer MwSt/Versand-Hinweis (admin-ajax-Kontext, wenn GM-Filter nicht greift) */
#product-popup .popup-info .popup-vat {
    margin: calc(var(--sp-2) * -1) 0 0;
    font-family: var(--body);
    font-size: 12.5px;
    color: var(--text-muted);
}

#product-popup .popup-info .popup-vat a {
    color: var(--accent);
    text-decoration: underline;
}

#product-popup .popup-info .popup-full {
    display: inline-block;
    margin-top: var(--sp-4);
    font-family: var(--display);
    font-weight: 700;
    font-size: 14px;
    color: var(--accent);
    text-decoration: none;
}

#product-popup .popup-info .popup-full:hover {
    color: var(--accent-hover);
    text-decoration: underline;
}

/* MENGE-Pack-Geschwister-Pills (Phase 2, Prototyp .opt). Links auf das
   jeweilige Pack-Produkt; aktuelles aktiv. */
#product-popup .popup-info .popup-opts {
    margin: var(--sp-2) 0 0;
}

#product-popup .popup-info .popup-opts-label {
    display: block;
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 9px;
    color: var(--text);
}

#product-popup .popup-info .popup-opts-row {
    display: flex;
    gap: 9px;
    flex-wrap: wrap;
}

#product-popup .popup-info .popup-opt {
    border: 1.5px solid var(--outline);
    background: var(--surface-3);
    border-radius: 10px;
    padding: 9px 14px;
    font-weight: 700;
    font-size: 13.5px;
    color: var(--text);
    text-decoration: none;
    transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}

#product-popup .popup-info .popup-opt:hover {
    background: var(--accent-soft);
}

#product-popup .popup-info .popup-opt.is-on {
    background: var(--text);
    color: var(--surface);
    border-color: var(--text);
}

/* ============================================================
   6. ACTIONS + MENGEN-STEPPER
   Spiegel der Karten-Stepper-Optik aus product-cards.css Z. 264-378,
   gescoped auf #product-popup (selbsttragend auf Seiten ohne
   product-cards.css, hoehere Spezifitaet auf Seiten mit). Werte identisch
   zum Bestand - bei den drei important-Bestandsregeln (Pill-Textfarbe,
   text-decoration, Input-Breite) bewusst WERTGLEICH, s. Kopf.
   .popup-product-actions defensiv mitgefuehrt: render_popup_product_actions()
   (inc/product-card-blocks.php:159-218) emittiert diese Klasse; aktuell ruft
   load_product_popup() zwar render_product_actions() (Container
   .popup-actions.product-card__actions), die Funktion existiert aber als
   alternativer Codepfad. .quantity als gemeinsamer Anker deckt Server-Markup
   (.product-quantity > .quantity.buttons_added) UND JS-Fallback
   (.quantity.product-quantity, mini-cart.js:2114-2125) ab.
   ============================================================ */

#product-popup .popup-actions,
#product-popup .popup-product-actions {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin-top: var(--sp-4);
}

#product-popup .product-actions {
    flex: 1;
    display: flex;
    align-items: stretch;
}

/* Kauf-Link als Akzent-Pill (Whitelist: a.add_to_cart_button.btn-plus) */
#product-popup .add_to_cart_button.btn-plus {
    flex: 1;
    background: var(--accent);
    color: var(--accent-contrast);
    text-decoration: none;
    border: 1.5px solid var(--accent);
    cursor: pointer;
    font-family: var(--display);
    font-weight: 600;
    font-size: 26px;
    line-height: 1;
    padding: 0;
    margin: 0;
    min-height: 42px;
    width: auto;
    height: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--r-pill);
    transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}

#product-popup .add_to_cart_button.btn-plus:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
    color: var(--accent-contrast);
}

#product-popup .add_to_cart_button.btn-plus:active {
    transform: scale(0.97);
}

#product-popup .add_to_cart_button.btn-plus:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

#product-popup .product-quantity {
    width: 100%;
}

#product-popup .quantity {
    display: inline-flex;
    align-items: center;
    width: 100%;
    background: var(--surface-3);
    color: var(--text);
    border: 1.5px solid var(--outline);
    border-radius: var(--r-pill);
    overflow: hidden;
    font-family: var(--display);
    font-size: 17px;
    padding: 0;
    margin: 0;
}

/* border:0 fuer die button-Variante des JS-Fallbacks; auf den a-Elementen
   des Server-Markups wirkungsgleich neutral */
#product-popup .quantity .minus,
#product-popup .quantity .plus {
    flex: 1;
    min-width: 32px;
    height: 42px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: transparent;
    border: 0;
    outline: 0;
    cursor: pointer;
    font-weight: 800;
    font-size: 19px;
    color: var(--text);
    text-decoration: none;
    transition: background var(--dur-fast) var(--ease);
}

#product-popup .quantity .minus:hover,
#product-popup .quantity .plus:hover {
    background: var(--surface-2);
    color: var(--text);
}

#product-popup .quantity .minus:focus-visible,
#product-popup .quantity .plus:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

/* .qty = das WERT-INPUT (Whitelist-Semantik). Breite 40px wertgleich zur
   important-Bestandsregel product-cards.css Z. 349 */
#product-popup .quantity input.qty {
    width: 40px;
    height: 42px;
    text-align: center;
    font-size: 14px;
    border-radius: 0;
    background: transparent;
    color: var(--text);
    font-family: var(--display);
    font-weight: 800;
    border: 0;
    border-inline: 1.5px solid var(--border);
    padding: 0;
    -moz-appearance: textfield;
}

#product-popup .quantity input.qty::-webkit-inner-spin-button,
#product-popup .quantity input.qty::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

#product-popup .quantity input.qty:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring) inset;
}

/* ============================================================
   7. BREAKPOINT <= 1200px (Live-Grenze, uebertragbarkeit.md Abschnitt 5)
   Modal kompakter; Grid bleibt 2-spaltig bis 767px.
   ============================================================ */

@media (max-width: 1200px) {
    #product-popup-overlay #product-popup {
        width: min(92%, 760px);
        padding: var(--sp-7) var(--sp-5) var(--sp-5);
    }

    #product-popup .popup-grid {
        gap: var(--sp-4);
    }
}

/* ============================================================
   8. BREAKPOINT <= 767px: BOTTOM-SHEET
   Gegner: product-cards.css Z. 748-761 (Mobil-Popup-Block mit Keyframes
   slideUp) - wird durch hoehere Spezifitaet + eigene animation-Shorthand
   vollstaendig uebersteuert. Machbarkeit ohne Markup-/JS-Aenderung im Kopf
   hergeleitet (fadeIn zeigt das Overlay, die Slide-up-Animation startet
   beim display-Wechsel neu; Schliessen = Overlay-Fade ohne Slide-down).
   Radius nur oben, safe-area-Polster fuer iOS, Input-Breite 32px wertgleich
   zur important-Bestandsregel product-cards.css Z. 717.
   ============================================================ */

@media (max-width: 767px) {
    #product-popup-overlay #product-popup {
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        transform: none;
        width: 100%;
        max-width: none;
        max-height: 88vh;
        border-radius: var(--r-lg) var(--r-lg) 0 0;
        border-bottom: 0;
        padding: var(--sp-6) var(--sp-4) calc(var(--sp-5) + env(safe-area-inset-bottom, 0px));
        animation: rl-qv-up var(--dur) var(--ease-out) both;
    }

    #product-popup .popup-grid {
        grid-template-columns: 1fr;
        gap: var(--sp-4);
    }

    /* Bild im Sheet begrenzen, damit Titel/Preis/Stepper ohne Scrollen
       erreichbar bleiben */
    #product-popup .popup-image img {
        width: 100%;
        max-height: 240px;
        object-fit: cover;
    }

    #product-popup .quantity input.qty {
        width: 32px;
    }
}

@keyframes rl-qv-up {
    from {
        transform: translateY(100%);
    }

    to {
        transform: translateY(0);
    }
}

/* ===========================================================================
 * Task-2 (2026-06-15): Prototyp-Kaufzeile im Quick-View
 * render_product_actions() liefert jetzt .product-actions > .product-quantity
 * (.rl-qty-minus/.rl-qty-input/.rl-qty-plus) + button.rl-atc. Detailstyling der
 * Controls steht in product-cards.css (auf QV-Seiten mitgeladen); hier nur
 * die #product-popup-Spezifika: Stepper NICHT auf 100% (sonst sprengt er die
 * Zeile) + Abstand/Umbruch in .product-actions.
 * ======================================================================== */
#product-popup .popup-actions .product-actions {
    flex: 1;
    display: flex;
    align-items: stretch;
    gap: var(--sp-2);
    flex-wrap: wrap;
}

#product-popup .product-actions .product-quantity {
    width: auto;
    flex: none;
}

#product-popup .product-actions .rl-atc {
    flex: 1 1 auto;
    min-width: 140px;
}