/* ============================================================
   OPHYR DESIGN SYSTEM - Store Stylesheet
   Generated: 2026-05-10 16:50:24
   
   DO NOT EDIT THIS FILE DIRECTLY.
   Edit the modular source files in /css/ and rebuild with:
   .\build-css.ps1
   ============================================================ */

/* -- 19a-store-products.css ---------------------------------------- */
/* ============================================================
   19a-store-products.css
   Store Produkt-Kacheln, Grid, Preise, Buttons, Shimmer
   Extrahiert aus 19-store.css (Zeile 1-871)
   ============================================================ */

/* --- Header Cart Optimization (International Luxury Standard) --- */
.cart-icon-btn {
    position: relative;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gold);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    -webkit-tap-highlight-color: transparent;
    min-width: 44px;
    /* Apple/Google Touch Standard */
    min-height: 44px;
}

/* Desktop: Gleiche Positionierung wie .icon-link auf anderen Seiten */
.cart-icon-btn--desktop {
    padding: 0;
    min-width: auto;
    min-height: auto;
}

/* Badge-Position: Identisch zu allen anderen Seiten (rechts oben verschoben) */
.cart-icon-btn--desktop .cart-badge {
    top: -0.15rem;
    right: -0.35rem;
}

.cart-icon-btn:hover {
    transform: translateY(-2px);
}

.cart-icon-btn .icon {
    width: 1.5rem;
    height: 1.5rem;
    stroke-width: 1.2;
    /* Feiner für Luxus-Look */
    transition: stroke-width 0.3s ease;
}

.cart-icon-btn:hover .icon {
    stroke-width: 1.5;
}

/* Der Badge - Diskret & Elegant */
.cart-badge {
    position: absolute;
    top: 0.2rem;
    right: 0.1rem;
    background: var(--gold);
    color: var(--white);
    font-size: 0.65rem;
    font-weight: 500;
    min-width: var(--cart-badge-size);
    height: var(--cart-badge-size);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.1rem;
    font-family: var(--font-primary);
    box-shadow: 0 2px 8px rgba(196, 161, 105, 0.3);
    opacity: 0;
    transform: scale(0.5) translate3d(0, 0, 0);
    transition: opacity 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
        transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    pointer-events: none;
}

.cart-badge.is-visible {
    opacity: 1;
    transform: scale(1) translate3d(0, 0, 0);
}

/* Animation beim Hinzufügen */
@keyframes cart-ping {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.3);
        filter: brightness(1.2);
    }

    100% {
        transform: scale(1);
    }
}

.cart-icon-btn.animating .icon {
    animation: cart-ping 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes badge-pop {
    0% {
        transform: scale(0.5);
    }

    70% {
        transform: scale(1.4);
    }

    100% {
        transform: scale(1);
    }
}

.cart-badge.animating {
    animation: badge-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.store-page {
    background-color: var(--ivory);
}

/* Überschreibt die globale main:not(.hero) Regel (höhere Spezifität) */
.store-page main.store-main {
    padding-top: 0;
    padding-bottom: 5rem;
}

.store-value-section {
    background-color: var(--ivory);
    padding: var(--section-padding) 0 0;
    border-bottom: none;
    position: relative;
    overflow: hidden;
}

/* Subtle background aura */
.store-value-section::before {
    content: '';
    position: absolute;
    top: -50%;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 200%;
    background: radial-gradient(circle at center, rgba(196, 161, 105, 0.03) 0%, transparent 70%);
    pointer-events: none;
}

.store-value-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--container-padding);
    position: relative;
    z-index: 1;
}

.store-value-section .legal-title {
    margin-bottom: clamp(2rem, 8vw, 5rem);
    white-space: nowrap;
    font-size: clamp(1.8rem, 6vw, 4.5rem);
    text-align: center;
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    padding: 0;
    max-width: none;
}

/* Mobile Override: Verhindert horizontalen Overflow */
@media (max-width: 47.99rem) {
    .store-value-section .legal-title {
        white-space: normal;
        width: 100%;
        left: auto;
        transform: none;
        position: static;
        font-size: clamp(1.6rem, 7vw, 2.8rem);
        letter-spacing: 0.08em;
        padding: 0 var(--container-padding);
        box-sizing: border-box;
        word-break: break-word;
        hyphens: auto;
    }
}



/* --- Store Grid --- */
.store-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 var(--container-padding) 5rem;
    /* Container Query Anchor: Kinder können mit cqi-Einheiten
       die exakte Breite dieses Containers referenzieren */
    container-type: inline-size;
}

/* Desktop Grid: Alle Kacheln volle Breite, vertikal gestapelt */
@media (min-width: 64rem) {
    .store-grid {
        grid-template-columns: 1fr 1fr;
        gap: clamp(2rem, 3vw, 3rem);
    }

    /* Alle Produkt-Kacheln: volle Breite (identische Grösse) */
    .product-pair {
        grid-column: span 2;
    }
}

/* .product-tile wird als Standalone nicht mehr verwendet (Legacy).
   Sub-Klassen (.product-tile__video, __title etc.) leben innerhalb von .product-pair. */

/* ==========================================================
   Product Pair · Square Diptychon → Big Square · 120Hz Engine
   
   CONCEPT: Two equal squares side by side → click → expand into
   one large unified square. Video scales perfectly with GPU compositing.
   
   PERF: Alle Animationen nur via transform/opacity (Compositor-Thread).
   Grid-Transition für das Layout-Reflow (unvermeidbar, aber optimiert).
   ========================================================== */
.product-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    border-radius: var(--product-tile-radius);
    overflow: hidden;
    position: relative;
    box-shadow: 0 30px 60px -12px rgba(0, 0, 0, 0.08),
        0 18px 36px -18px rgba(0, 0, 0, 0.03);
    border: 0.5px solid rgba(196, 161, 105, 0.15);
    /* Geometrie via Container Query Units (cqi):
       50cqi = halbe Container-Breite → 2:1 Diptychon
       100cqi = volle Container-Breite → 1:1 perfektes Quadrat
       cqi referenziert exakt die Inline-Size des store-grid (content-box). */
    width: 100%;
    height: 50cqi;
    background-color: var(--obsidian);
    /* Nur die Properties transitionieren, die sich tatsächlich ändern.
       'transition: all' ist ein Anti-Pattern – jede neue Property würde
       ungewollt mitanimiert und zukünftige Erweiterungen sabotieren. */
    transition: height 0.8s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.8s cubic-bezier(0.16, 1, 0.3, 1),
        border-color 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    transform: translateZ(0);
    cursor: pointer;
}

/* Geöffneter Zustand: Wächst nach unten, Breite bleibt bei 100% */
.product-pair.is-open {
    height: 100cqi;
    /* Volle Container-Breite → perfektes 1:1 Quadrat */
    width: 100%;
    box-shadow: 0 50px 100px -20px rgba(0, 0, 0, 0.3);
}

/* Left Column: Video (fills full height via grid stretch) */
.pp-visual {
    grid-column: 1;
    grid-row: 1;
    position: relative;
    min-height: 0;
    overflow: hidden;
    cursor: pointer;
}

.pp-visual .product-tile__video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: translate3d(0, 0, 0);
    transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform;
    /* Verhindert feine weisse Linien an den Kanten */
    outline: 1px solid transparent;
}

@media (hover: hover) and (pointer: fine) {
    .product-pair:hover .pp-visual .product-tile__video {
        transform: scale(1.03) translate3d(0, 0, 0);
    }
}

/* Right Column: Brand + Details */
.pp-brand {
    grid-column: 2;
    grid-row: 1;
    /* Concept 6 Background */
    background:
        /* Rim-Light: Subtile Kantenbeleuchtung für Massivität */
        linear-gradient(to right, rgba(196, 161, 105, 0.05) 0%, transparent 1px, transparent 100%),
        linear-gradient(to bottom, rgba(196, 161, 105, 0.05) 0%, transparent 1px, transparent 100%),
        /* Stone Grain: Simuliertes Rauschen für die Haptik */
        radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.02) 1px, transparent 1px),
        /* Haupt-Lichtquelle (Spotlight auf das Material) */
        radial-gradient(ellipse at 45% 35%,
            rgba(60, 60, 70, 0.5) 0%,
            rgba(35, 35, 42, 0.3) 40%,
            transparent 85%),
        /* Sekundäres Glühen (Atmosphäre) */
        radial-gradient(ellipse at 70% 70%,
            rgba(45, 45, 55, 0.2) 0%,
            transparent 60%),
        /* Deep Base Texture (Anthrazit-Verlauf) */
        linear-gradient(155deg,
            #1e1e23 0%,
            #141418 25%,
            #0f0f12 50%,
            #0a0a0d 75%,
            #070708 100%),
        /* Central Highlight Aura */
        radial-gradient(circle at center, rgba(196, 161, 105, 0.08) 0%, transparent 60%);
    background-size: 100% 100%, 100% 100%, 4px 4px, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
    display: flex;
    align-items: stretch;
    /* Stretch to ensure inner fills height for vertical centering */
    justify-content: center;
    cursor: pointer;
    overflow: hidden;
    /* Basis für absolut positionierten Sticky-CTA */
    position: relative;
}

/* ==========================================================
   VORSCHLAG 1: Flow-Integration
   
   Geschlossen: ::before/::after Spacer zentrieren den Content.
   
   Geöffnet: CTA ist IM Flex-Flow (nicht absolut) → alle
   Elemente verteilen sich natürlich über die gesamte Kachel.
   ::before behält einen Rest-Flex (Breathing Room oben).
   Alle Gaps wachsen → gleichmäßige Verteilung.
   ========================================================== */
/* φ-Basis: 1rem | φ¹ = 1.618rem | φ² = 2.618rem | φ³ = 4.236rem */
.pp-brand__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    min-height: 100%;
    width: 100%;
    /* φ-Padding: horizontal φ², vertikal φ³ oben */
    padding: clamp(1.618rem, 4vw, 2.618rem) clamp(1.618rem, 4vw, 2.618rem) 0;
    position: relative;
    gap: 0;
    transition: gap 1.2s cubic-bezier(0.16, 1, 0.3, 1);
    transform: translate3d(0, 0, 0);
}

.pp-brand__inner::before,
.pp-brand__inner::after {
    content: '';
    flex: 1;
    min-height: 0;
    transition: flex 1.2s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
}

/* Open: Harmonische Verteilung der Elemente über die gesamte Höhe */
.product-pair.is-open .pp-brand__inner {
    /* gap: φ¹ = 1.618rem */
    gap: clamp(1.618rem, 4vw, 2.618rem);
    /* Platz für Sticky-CTA (ca. 7-8rem) */
    padding-bottom: clamp(7.5rem, 12vw, 9rem);
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.product-pair.is-open .pp-brand__inner::before {
    /* Weniger Gewicht oben, um Branding leicht anzuheben */
    flex: 0.3;
}

.product-pair.is-open .pp-brand__inner::after {
    /* Spacer unten bleibt aktiv für ausgewogene Verteilung zwischen Details und CTA */
    flex: 0.7;
}

.product-pair.is-open .pp-brand__inner::-webkit-scrollbar {
    display: none;
}

.pp-brand__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    transform: translate3d(0, 0, 0);
    will-change: transform, opacity;
    margin: 0;
    transition: gap 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Open: Moderater Abstand zwischen Logo und Zitat */
.product-pair.is-open .pp-brand__content {
    gap: clamp(3rem, 8vw, 5rem);
}

.pp-brand__quote {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    /* φ⁰ zwischen Zitat-Text und Autor */
    text-align: center;
}

/* ==========================================================
   Kaskaden-Parallax · Hollywood Cinema Engine
   
   PHILOSOPHIE: Jede Ebene driftet mit individueller Geschwindigkeit
   UND Verzögerung nach unten. Der Abstand zwischen den Ebenen
   wächst progressiv → wie ein Fächer der sich öffnet.
   
   Am Ende: Perfekter Goldener Schnitt (φ = 1.618)
   - Titel:  φ^0 × Basis = 1.0 × Basis  (geringster Drift)
   - Quote:  φ^1 × Basis = 1.618 × Basis (mittlerer Drift)
   - Details: φ^2 × Basis = 2.618 × Basis (stärkster Drift)
   
   PERF: Pure GPU-Compositing via transform + opacity.
   Easing: Cinematic slow-start → smooth-settle.
   ========================================================== */

/* Titel-Drift entfernt für mehr Stabilität */
.pp-brand__content .product-tile__title,
.pp-brand__content .pp-brand__quote {
    transform: none;
}

/* ==========================================================
   Details Section · Parallax Layer 3 + Cinematic Stagger
   
   PHILOSOPHY: Die Details bilden die 3. Parallax-Ebene (φ²).
   Sie driften am weitesten nach unten → leichtester Layer.
   Jedes Kind-Element faded mit progressivem Versatz ein,
   wobei die Abstände zwischen den Details-Kindern ebenfalls
   wachsen → der Fächer-Effekt setzt sich innerhalb fort.
   ========================================================== */
.pp-brand__details {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 1.2s cubic-bezier(0.16, 1, 0.3, 1);
    width: 100%;
}

.product-pair.is-open .pp-brand__details {
    grid-template-rows: 1fr;
    /* Mehr Luft zwischen Quote-Block und Details */
    margin-top: clamp(1rem, 3vw, 2rem);
}

/* Close: Alle Ebenen raffen sich schnell zusammen */
.product-pair:not(.is-open) .pp-brand__details {
    transition: grid-template-rows 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.pp-brand__details-inner {
    overflow: hidden;
    transform: translate3d(0, 0, 0);
    /* GPU-Promotion */
    /* Flex-Column mit animiertem Gap → gleichmäßige Verteilung */
    display: flex;
    flex-direction: column;
    gap: 0;
    transition: gap 1.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.product-pair.is-open .pp-brand__details-inner {
    padding-top: 0;
    /* φ² = 2.618rem → großzügigere Verteilung der Detail-Elemente */
    gap: clamp(1.618rem, 4vw, 2.618rem);
}

/* Margin-Normalisierung: NUR der flex-gap kontrolliert Abstände */
.pp-brand__details-inner .product-features {
    margin: 0;
}

.pp-brand__details-inner .product-divider {
    margin: 0;
}

.pp-brand__details-inner .product-description {
    margin: 0;
}

.pp-brand__details-inner .product-price-block {
    margin: 0;
    /* φ¹ Padding innen für Eleganz */
    padding: 1.618rem;
    background: rgba(218, 190, 145, 0.08);
    border: 0.5px solid rgba(218, 190, 145, 0.18);
    border-radius: 0.5rem;
}

.pp-brand__details-inner .product-trust-badges {
    margin: 0;
    /* φ⁰ Abstand oben nach dem Preis-Block */
    padding-top: 0.618rem;
    /* φ⁻¹ – dezenter Breathing Room */
}

/* Stagger: Alle Kind-Elemente starten unsichtbar + leicht versetzt */
.pp-brand__details-inner>* {
    opacity: 0;
    transform: translate3d(0, 1.5rem, 0);
    transition: opacity 0.9s cubic-bezier(0.22, 0.61, 0.36, 1),
        transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
    will-change: transform, opacity;
}

/* Hollywood Stagger-Delays: DRY via Custom Properties.
   Jedes Kind berechnet seinen Delay aus dem Index:
   Base 0.35s + n × 0.1s = progressiver Wasserfall-Effekt */
.pp-brand__details-inner>*:nth-child(1) { --stagger-i: 0; }
.pp-brand__details-inner>*:nth-child(2) { --stagger-i: 1; }
.pp-brand__details-inner>*:nth-child(3) { --stagger-i: 2; }
.pp-brand__details-inner>*:nth-child(4) { --stagger-i: 3; }
.pp-brand__details-inner>*:nth-child(5) { --stagger-i: 4; }
.pp-brand__details-inner>*:nth-child(6) { --stagger-i: 5; }
.pp-brand__details-inner>*:nth-child(7) { --stagger-i: 6; }

.product-pair.is-open .pp-brand__details-inner>* {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition-delay: calc(0.35s + var(--stagger-i, 0) * 0.1s);
}

/* Override text colors for dark background context */
.pp-brand__details .product-info-label {
    color: var(--gold);
    opacity: 0.6;
}

.pp-brand__details .product-features li {
    color: rgba(253, 252, 248, 0.7);
}

.pp-brand__details .product-description {
    color: rgba(253, 252, 248, 0.7);
}

.pp-brand__details .product-divider {
    background: linear-gradient(to right, transparent, rgba(196, 161, 105, 0.25), transparent);
}

.pp-brand__details .product-price-block {
    background: rgba(218, 190, 145, 0.08);
    border-color: rgba(218, 190, 145, 0.18);
}

.pp-brand__details .product-price .amount {
    color: rgba(253, 252, 248, 0.9);
}

.pp-brand__details .price-sub {
    color: rgba(253, 252, 248, 0.4);
}

.pp-brand__details .trust-badge-text {
    color: rgba(253, 252, 248, 0.5);
}

/* CTA · STICKY FOOTER – Absolut am unteren Rand der pp-brand.
   φ-Abstand zur Kante: padding: φ¹ (1.618rem) rundum → schwebend, nicht klebend.
   Schatten-Vorhang erzeugt Tiefe ohne harten Schnitt. */
.pp-brand__cta {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    opacity: 0;
    transform: translate3d(0, 100%, 0);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.9s,
        transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.9s;
    pointer-events: none;
    /* Subtiler Schatten-Vorhang */
    box-shadow: 0 -2rem 3rem 1rem rgba(10, 10, 13, 0.9);
    z-index: 10;
    /* φ¹ Padding: Button schwebt mit Abstand zur Kachel-Kante */
    padding: 0 clamp(1.618rem, 4vw, 2.618rem) clamp(1.618rem, 3vw, 2rem);
    background: transparent;
}

.product-pair.is-open .pp-brand__cta {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    pointer-events: auto;
}

/* Schliessen-Animation: Elegant nach unten herausgleiten */
.product-pair:not(.is-open) .pp-brand__cta {
    transition-delay: 0s;
    transition-duration: 0.35s;
}

.pp-brand__cta .btn-buy {
    margin: 0;
    width: 100%;
    /* Eckige Ecken – Luxury-Standard ohne runde Kanten */
    border-radius: 0;
}

/* Chevron Trigger: Entfernt – kein HTML-Element im DOM */

/* --- Paracelsus Zitat Styles (Integrated into product-pair) --- */
.store-quote-tile__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.2rem;
    padding: 2rem;
    text-align: center;
    position: relative;
    z-index: 2;
}

.store-quote-tile__text {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(0.9rem, 2.5vw, 1.3rem);
    font-weight: 100;
    color: var(--gold);
    /* Exakt wie das Branding-Logo */
    line-height: 1.7;
    margin: 0;
    letter-spacing: 0.25em;
    word-spacing: 0.1em;
    text-transform: uppercase;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
    transform: translateX(-0.125em);
    /* Optical centering fix for 0.25em spacing */
}

.store-quote-tile__author {
    font-family: 'Inter', sans-serif;
    font-size: 0.65rem;
    font-weight: 200;
    color: rgba(255, 255, 255, 0.9);
    /* 90% Weiss */
    opacity: 1;
    /* Opacity auf 1, da we Helligkeit über die Farbe steuern */
    letter-spacing: 0.4em;
    text-transform: uppercase;
    transform: translateX(-0.2em);
    /* Optical centering fix for 0.4em spacing */
}


/* Legacy .product-tile Container-Selektoren entfernt (nicht mehr im HTML verwendet).
   Die folgenden Sub-Klassen werden aktiv innerhalb von .product-pair genutzt. */

.product-tile__title {
    color: var(--gold);
    font-family: var(--font-primary);
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    text-shadow: 0 4px 16px rgba(0, 0, 0, 0.6);
    line-height: 1;
}

.title-brand {
    font-size: clamp(1.8rem, 7vw, 2.4rem);
    letter-spacing: 0.6em;
    font-weight: 200;
    text-transform: uppercase;
    opacity: 0.8;
    transform: translateX(-0.3em);
}

.title-edition {
    font-size: clamp(3.2rem, 12vw, 4.4rem);
    letter-spacing: 0.15em;
    font-weight: 400;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(1rem, 3vw, 1.5rem);
    width: 100%;
    transform: translateX(-0.075em);
}

.title-edition::before,
.title-edition::after {
    content: '';
    height: 1px;
    background: linear-gradient(to right, transparent, var(--gold), transparent);
    opacity: 0.6;
    flex: 1;
    max-width: 60px;
    min-width: 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}


/* --- Product Details --- */
.product-features {
    list-style: none;
    padding: 0;
    margin: 0 0 2rem;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.product-features li {
    font-size: 0.9rem;
    color: var(--text-muted);
    font-weight: 300;
    position: relative;
    padding-left: 1.2rem;
}

.product-features li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
    width: 5px;
    height: 5px;
    background: var(--gold);
}

/* --- Enhanced Tile Elements --- */
.product-info-label {
    font-family: var(--font-accent);
    font-size: 0.65rem;
    letter-spacing: 0.3em;
    color: var(--gold);
    text-transform: uppercase;
    margin-bottom: 1.2rem;
    display: block;
    text-align: center;
    opacity: 0.7;
}

.product-divider {
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(196, 161, 105, 0.2), transparent);
    margin: 2rem 0;
    border: none;
}

.product-trust-badges {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 1.618rem;
    /* φ± Gap zwischen den Badges */
    margin: 0 0 1.618rem;
    padding: 0 0.5rem;
}

.trust-badge-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    flex: 1;
}

.trust-badge-item svg,
.trust-badge-item img {
    height: 22px;
    width: auto;
    color: var(--gold);
    transition: transform 0.3s ease;
}

.trust-badge-item img {
    filter: brightness(0) saturate(100%) invert(71%) sepia(13%) saturate(1210%) hue-rotate(3deg) brightness(91%) contrast(87%);
}

.trust-badge-text {
    font-size: 0.5rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    text-align: center;
    line-height: 1.3;
    font-weight: 400;
}

.product-description {
    font-size: 0.9rem;
    line-height: 1.8;
    color: var(--dark-grey);
    text-align: center;
    /* φ¹ Abstand oben/unten: 1.618rem */
    margin: 1.618rem 0;
    font-weight: 300;
    padding: 0 0.5rem;
}

.product-price-block {
    text-align: center;
    /* φ±: 1.618rem Abstand nach unten zum Trust-Bereich */
    margin-bottom: 1.618rem;
    padding: 1.618rem;
    background: rgba(218, 190, 145, 0.08);
    border-radius: 8px;
    border: 0.5px solid rgba(218, 190, 145, 0.18);
}

/* --- Status Group removed as per brand strategy --- */

/* --- Sold Out Button Style removed --- */

.product-price {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.5rem;
    color: var(--dark-grey);
    margin-bottom: 0.3rem;
}

.product-price .currency {
    font-size: 0.8rem;
    color: var(--gold);
    letter-spacing: 0.1em;
}

.product-price .amount {
    font-family: var(--font-accent);
    font-size: 2rem;
    font-weight: 200;
}

.price-sub {
    font-size: 0.7rem;
    color: var(--text-muted);
    opacity: 0.5;
    letter-spacing: 0.05em;
}

/* --- Buttons --- */
.btn-buy,
.btn-checkout,
.btn-order {
    width: 100%;
    height: 3.8rem;
    /* Fixe Höhe für absolute Symmetrie */
    background: var(--gold);
    color: var(--white);
    border: none;
    border-radius: 0;
    font-family: var(--font-accent);
    letter-spacing: 0.25em;
    font-size: 0.8rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        letter-spacing 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 4px 15px rgba(196, 161, 105, 0.15);
}

@media (hover: hover) and (pointer: fine) {
    .btn-buy:hover {
        background: var(--gold-dark);
        letter-spacing: 0.3em;
    }
}

/* SHIMMER VARIANTE 2 (shimmer-aura): Entfernt – nur shimmer-sweep wird verwendet */

/* Payment Logos in Produkt-Kacheln: Entfernt – kein HTML-Element im DOM */

/* --- SHIMMER EFFEKT (Liquid Gold Evolution) --- */
.shimmer-sweep {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.shimmer-sweep::after {
    content: "";
    position: absolute;
    top: 0;
    left: -150%;
    width: 200%;
    /* Breiter für weicheren Verlauf */
    height: 100%;
    background: linear-gradient(90deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0) 30%,
            rgba(255, 255, 255, 0.15) 45%,
            rgba(255, 255, 255, 0.3) 50%,
            rgba(255, 255, 255, 0.15) 55%,
            rgba(255, 255, 255, 0) 70%,
            rgba(255, 255, 255, 0) 100%);
    transform: skewX(-25deg) translate3d(0, 0, 0);
    will-change: transform;
    animation: sovereign-liquid-sweep 8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    z-index: 1;
    pointer-events: none;
}

@keyframes sovereign-liquid-sweep {
    0% {
        transform: translateX(-100%) skewX(-25deg) translate3d(0, 0, 0);
        opacity: 0;
    }

    15% {
        opacity: 1;
    }

    45% {
        opacity: 1;
    }

    60% {
        transform: translateX(150%) skewX(-25deg) translate3d(0, 0, 0);
        opacity: 0;
    }

    100% {
        transform: translateX(150%) skewX(-25deg) translate3d(0, 0, 0);
        opacity: 0;
    }
}


/* ==========================================================
   MOBILE: Product Pair – Diptychon → Vertical Stack
   
   Auf Mobile wechselt das horizontale 2-Spalten-Diptychon
   in einen vertikalen Stack: Video oben, Brand darunter.
   
   SPEZIFITÄT:
   .store-page .selector  (0,2,0+) schlägt Desktop (0,1,0)
   sauber über die Kaskade – KEIN !important nötig.
   ========================================================== */
@media (max-width: 48rem) {

    /* --- Pair: Horizontal → Vertical Stack --- */
    .store-page .product-pair {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
        height: auto;
        aspect-ratio: auto;
        gap: 0;
        border: none;
        background-color: var(--obsidian);
        width: 100%;
    }

    /* --- Video: Volle Breite oben, quadratisch --- */
    .store-page .pp-visual {
        grid-row: 1;
        grid-column: 1;
        aspect-ratio: 1 / 1;
        width: 100%;
        border-radius: var(--product-tile-radius) var(--product-tile-radius) 0 0;
        border: 0.5px solid rgba(196, 161, 105, 0.15);
        border-bottom: none;
        overflow: hidden;
    }

    /* --- Brand-Panel: Darunter, quadratisch (geschlossen) --- */
    .store-page .pp-brand {
        grid-row: 2;
        grid-column: 1;
        aspect-ratio: 1 / 1;
        width: 100%;
        border-radius: 0 0 var(--product-tile-radius) var(--product-tile-radius);
        border: 0.5px solid rgba(196, 161, 105, 0.15);
        align-items: stretch;
        transition: aspect-ratio 1.2s cubic-bezier(0.22, 0.61, 0.36, 1);
    }

    /* --- Brand: Geöffnet → wächst mit dem Inhalt --- */
    .store-page .product-pair.is-open .pp-brand {
        aspect-ratio: auto;
        min-height: 100vw;
    }

    /* ==========================================================
       φ-SPACING SYSTEM · Mobile Geöffnet
       
       Mathematisch exaktes Goldener-Schnitt-Raster:
       φ⁰ = 1.000rem  (Micro: Quote-Zeilen, Badge-Abstand)
       φ¹ = 1.618rem  (Detail: Features↔Divider↔Description↔Price↔Badges)
       φ² = 2.618rem  (Section: Padding, Logo↔Quote, Quote↔Details)
       φ³ = 4.236rem  (Major: Oberer Breathing Room)
       ========================================================== */

    /* --- Inner: φ²-Padding horizontal, φ² vertikal oben --- */
    .store-page .pp-brand__inner {
        padding: 2.618rem 2.618rem 0;
        min-height: 100%;
    }

    /* --- Geschlossen: Flex-Spacer zentrieren Content vertikal --- */
    .store-page .product-pair:not(.is-open) .pp-brand__inner::before,
    .store-page .product-pair:not(.is-open) .pp-brand__inner::after {
        flex: 1 1 0px;
    }

    /* --- Geöffnet: Spacer-Gewichtung für harmonische Verteilung --- */
    .store-page .product-pair.is-open .pp-brand__inner::before {
        flex: 0.382 1 0px;
        /* 1 - φ⁻¹ = 0.382 → φ-Proportion */
    }

    .store-page .product-pair.is-open .pp-brand__inner::after {
        flex: 0;
    }

    .store-page .product-pair.is-open .pp-brand__inner {
        padding-bottom: 0;
        /* CTA übernimmt den unteren Abstand */
        gap: 2.618rem;
        /* φ² zwischen allen Hauptsektionen */
        overflow-y: visible;
    }

    /* --- Content: Logo ↔ Quote --- */
    .store-page .pp-brand__content {
        gap: 1.618rem;
        /* φ¹ geschlossen */
    }

    .store-page .product-pair.is-open .pp-brand__content {
        gap: 2.618rem;
        /* φ² geöffnet */
    }

    /* --- Quote: Zeilen-Abstand φ⁰ --- */
    .store-page .pp-brand__quote {
        gap: 1rem;
        /* φ⁰ zwischen Text und Autor */
    }

    /* --- Parallax-Drift auf Mobile deaktiviert --- */
    .store-page .product-pair.is-open .pp-brand__content .product-tile__title {
        transform: none;
    }

    .store-page .product-pair.is-open .pp-brand__content .pp-brand__quote {
        transform: none;
    }

    /* --- Details: φ²-Abstand nach oben (Quote → Features) --- */
    .store-page .product-pair.is-open .pp-brand__details {
        transform: none;
        margin-top: 1rem;
        /* φ⁰ – Details-Block ist bereits durch Inner-Gap separiert */
    }

    /* --- Details-Inner: φ¹ Gap zwischen allen Kind-Elementen --- */
    .store-page .product-pair.is-open .pp-brand__details-inner {
        gap: 1.618rem;
        /* φ¹ – gleichmässig: Features, Divider, Description, Price, Badges */
    }

    /* --- CTA: φ²-Abstände rundum für perfekte Geometrie --- */
    .store-page .pp-brand__cta {
        position: relative;
        bottom: auto;
        left: auto;
        right: auto;
        opacity: 0;
        transform: translate3d(0, 1rem, 0);
        /* φ¹ Abstand oben (nach Trust-Badges), φ² Padding unten */
        margin-top: 1.618rem;
        padding: 0 0 2.618rem;
        box-shadow: none;
        pointer-events: none;
        transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.6s,
            transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.6s;
    }

    /* CTA auf Mobile: Erst bei Öffnung einblenden */
    .store-page .product-pair.is-open .pp-brand__cta {
        opacity: 1;
        transform: translate3d(0, 0, 0);
        pointer-events: auto;
    }

}

/* --- Store Highlight Statement (Intro-Sektion) ---
   Montserrat, 20% grösser als news-lead, 200% mehr Gewicht */
.store-highlight-statement {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(1.2rem, 3vw, 1.38rem);
    font-weight: 900;
    line-height: 1.7;
    color: var(--dark-grey);
    margin: 0;
    padding-left: clamp(1rem, 3vw, 1.5rem);
    border-left: 2px solid var(--gold);
}

/* Reduzierter Abstand zwischen Highlight-Statement und folgendem Absatz */
.store-highlight-statement + .news-body-text {
    margin-top: calc(-1 * clamp(0.5rem, 2vw, 1.2rem));
}

/* Provenance Strip & Commitment Bar: Entfernt – kein HTML-Element im DOM */


/* -- 19b-store-drawer.css ---------------------------------------- */
/* ============================================================
   19b-store-drawer.css
   Drawer System, Warenkorb, Cart-Items, Drawer-Slider
   Extrahiert aus 19-store.css (Zeile 872-1379)
   ============================================================ */
/* --- Drawer System --- */
.drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    z-index: 3000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
        visibility 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.drawer-overlay.is-active {
    opacity: 1;
    visibility: visible;
}

.drawer {
    position: fixed;
    top: 0;
    right: 0;
    width: var(--drawer-width);
    height: 100dvh;
    background: var(--ivory);
    /* Reset to ivory */
    z-index: 3100;
    transform: translate3d(100%, 0, 0);
    transition: transform var(--transition-premium), width var(--transition-premium);
    display: flex;
    flex-direction: column;
    box-shadow: -10px 0 30px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    touch-action: pan-y;
    /* Horizontales Wischen blockiert – Drawer bleibt fix verankert */
    overscroll-behavior: contain;
    /* Verhindert Überscroll-Propagation */
}

@media (min-width: 1024px) {
    .drawer.is-checkout {
        width: 840px;
        /* Double width for side-by-side */
    }
}

/* --- Drawer Slider (120Hz Push Mechanism) --- */
.drawer-slider {
    display: flex;
    width: 200%;
    height: 100%;
    transition: transform var(--transition-premium);
    will-change: transform;
}

@media (min-width: 1024px) {
    .drawer-slider {
        width: 100%;
        /* Slider fills the expanded drawer on desktop */
        will-change: transform;
    }
}

/* Push to Checkout (Mobile: Slide, Desktop: Stay but expand) */
.drawer.is-checkout .drawer-slider {
    transform: translate3d(-50%, 0, 0);
}

@media (min-width: 1024px) {
    .drawer.is-checkout .drawer-slider {
        transform: translate3d(0, 0, 0);
        /* Don't slide out cart on desktop, just show both */
    }
}

.drawer.is-open {
    transform: translate3d(0, 0, 0);
}

.drawer-stage {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 50%;
    flex-shrink: 0;
    position: relative;
}

/* Noble Darkening Overlay (Bulletproof) */
.drawer-stage::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0);
    transition: background var(--transition-premium);
    pointer-events: none;
    z-index: 100;
}

/* Dim cart when checkout is active */
.drawer.is-checkout #stageCart::after {
    background: rgba(0, 0, 0, 0.06);
    /* Extremely subtle dimming */
}

/* Also slightly dim the checkout when cart is open? (Wait, checkout is only open after cart) */
/* When switching back to cart, dimming is removed automatically via .is-checkout removal */

@media (min-width: 1024px) {
    .drawer-stage {
        width: 420px;
        /* Fixed width per stage on desktop */
    }
}

.drawer-stage.is-active {
    display: flex;
}

@keyframes stage-in {
    from {
        opacity: 0;
        transform: translateX(20px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.drawer-header {
    padding: 2.5rem 2rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    background: transparent;
}

.drawer-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 2rem;
    right: 2rem;
    height: 1px;
    background: var(--gold-light);
    /* subtle gold line */
    opacity: 0.3;
}

.drawer-title {
    font-family: var(--font-accent);
    font-size: 1.1rem;
    letter-spacing: 0.3em;
    color: var(--text-secondary);
    margin: 0;
    font-weight: 300;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    pointer-events: none;
    white-space: nowrap;
}

.drawer-close {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.3s ease,
        opacity 0.3s ease;
    position: relative;
    min-width: 44px;
    min-height: 44px;
}

.drawer-close:hover {
    opacity: 1;
    color: var(--gold);
}

.drawer-close::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle, rgba(196, 161, 105, 0.1) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.4s ease;
    border-radius: 50%;
}

.drawer-close:hover::before {
    opacity: 1;
}

/* Touch-Optimierung für Close-Button Mobile */
@media (max-width: 768px) {
    .drawer-close {
        width: 44px;
        height: 44px;
    }
}

.drawer-content {
    flex: 1;
    overflow-y: auto;
    padding: 2rem;
    padding-bottom: 1rem;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    /* Verhindert iOS-Bounce-Propagation zum Body */
}

.drawer-footer {
    padding: 1.5rem 2rem;
    padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
    /* Safe Area für Notch/Dynamic Island */
    border-top: 1px solid rgba(196, 161, 105, 0.12);
    background: var(--ivory);
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    flex-shrink: 0;
    width: 100%;
    box-sizing: border-box;
}

/* Identischer Hintergrund für beide Footer-Stages */
.checkout-footer {
    background: var(--ivory);
}



.total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* Mittig statt Baseline für stabilere Symmetrie */
    font-family: var(--font-accent);
    margin-bottom: 0;
    width: 100%;
}

.total-label {
    font-size: 0.95rem;
    /* Leicht verfeinert */
    letter-spacing: 0.35em;
    color: var(--text-secondary);
    text-transform: uppercase;
    font-family: var(--font-accent);
    font-weight: 300;
}

.total-amount {
    font-size: 1.6rem;
    color: var(--dark-grey);
    /* Etwas dunkler für Fokus */
    letter-spacing: 0.02em;
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
}

/* Subtotals in Checkout */
.summary-subtotals {
    margin-bottom: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

/* --- Cart Items (Proposal 1: Atelier Focus) --- */
.cart-item {
    padding: 2.5rem 0;
    border-bottom: 0.5px solid rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.cart-item:last-child {
    border-bottom: none;
}

.cart-item__main {
    display: flex;
    gap: 1.2rem;
    align-items: flex-start;
}

.cart-item__icon {
    width: 24px;
    height: 24px;
    color: var(--gold);
    flex-shrink: 0;
    opacity: 0.7;
}

.cart-item__icon svg {
    width: 100%;
    height: 100%;
}

.cart-item__info {
    flex: 1;
}

.cart-item__header-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 0.4rem;
}

.cart-item__name {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.05rem;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
    font-weight: 400;
}

.cart-item__price {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.95rem;
    color: var(--gold);
    font-weight: 400;
    letter-spacing: 0.05em;
}

.cart-item__desc {
    font-size: 0.8rem;
    color: var(--text-muted);
    line-height: 1.4;
    margin: 0.2rem 0 0;
    font-weight: 300;
}

.cart-item__status-note {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-family: 'Cormorant Garamond', serif;
    font-size: 0.85rem;
    font-style: italic;
    color: var(--black);
    margin-top: 0.4rem;
    /* Leicht reduziert */
    letter-spacing: 0.02em;
    animation: storeFadeIn 0.8s ease forwards;
}

/* Engerer Abstand bei mehreren Notizen untereinander */
.cart-item__status-note+.cart-item__status-note {
    margin-top: 0.2rem;
}

.status-light {
    width: 5px;
    height: 5px;
    display: inline-block;
    flex-shrink: 0;
    transform: rotate(45deg);
    background-color: var(--gold);
    transition: background-color 0.3s ease,
        border-color 0.3s ease;
}

.status-light--gold-solid {
    background-color: var(--gold);
    border: 1px solid var(--gold);
}

.status-light--gold-outline {
    background-color: transparent;
    border: 0.5px solid var(--gold);
}

@keyframes storeFadeIn {
    from {
        opacity: 0;
        transform: translateY(5px);
    }

    to {
        opacity: 0.9;
        transform: translateY(0);
    }
}

.cart-item__actions {
    display: flex;
    align-items: center;
    position: relative;
    min-height: 38px;
    /* Synchron mit cart-qty-btn Höhe */
}

.cart-item__controls {
    display: flex;
    align-items: center;
    gap: 1.2rem;
}

.cart-qty-btn {
    background: transparent;
    border: 0.5px solid rgba(196, 161, 105, 0.15);
    color: var(--gold);
    width: 38px;
    /* Leicht vergrößert für bessere Touch-Bedienung */
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1.1rem;
    font-weight: 300;
    transition: background-color 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        color 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.cart-qty-btn:hover {
    background: rgba(196, 161, 105, 0.05);
    border-color: var(--gold);
}

.cart-qty-btn.is-disabled {
    opacity: 0.25;
    cursor: not-allowed;
    pointer-events: none;
}

.cart-item__qty-val {
    font-size: 0.9rem;
    color: var(--text-secondary);
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    min-width: 1rem;
    text-align: center;
}

.cart-item__remove {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 38px;
    height: 38px;
    padding: 0;
    overflow: hidden;
    transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1),
        border-color 0.5s cubic-bezier(0.16, 1, 0.3, 1),
        background-color 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.remove-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    transition: opacity 0.4s ease,
        transform 0.4s ease;
}

.remove-text {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-accent);
    font-size: 0.5rem;
    letter-spacing: 0.2em;
    font-weight: 500;
    color: var(--gold);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.4s ease,
        transform 0.4s ease;
    white-space: nowrap;
}

.cart-item__remove.is-confirming {
    width: 100px;
    border-color: var(--error-confirm);
    background: var(--error-confirm);
}

.cart-item__remove.is-confirming .remove-icon {
    opacity: 0;
    transform: translateY(-8px);
}

.cart-item__remove.is-confirming .remove-text {
    opacity: 1;
    transform: translateY(0);
    color: var(--white);
}


/* -- 19c-store-checkout.css ---------------------------------------- */
/* ============================================================
   19c-store-checkout.css
   Checkout-Formular, Toasts, Store-Utilities
   Extrahiert aus 19-store.css (Zeile 1380-1952)
   ============================================================ */
/* --- Checkout Form (Screenshot Optimized) --- */
.checkout-content {
    background-color: var(--ivory);
}

.checkout-header {
    border-bottom: 0.5px solid rgba(0, 0, 0, 0.05);
}

@media (min-width: 1024px) {
    #stageCheckout {
        border-left: 1px solid rgba(0, 0, 0, 0.05);
    }
}

.checkout-section-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.85rem;
    font-weight: 300;
    letter-spacing: 0.4em;
    color: var(--text-secondary);
    margin: 1.5rem 0 1rem;
    position: relative;
    display: inline-block;
    opacity: 0;
    transform: translate3d(30px, 0, 0);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.drawer.is-checkout .checkout-section-title {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

.checkout-section-title span {
    position: relative;
}

.form-group {
    margin-bottom: 2rem;
    display: flex;
    flex-direction: column;
    opacity: 0;
    transform: translate3d(30px, 0, 0);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.drawer.is-checkout .form-group {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

/* Staggered Delays for Form Groups */
.drawer.is-checkout .form-group:nth-child(2) {
    transition-delay: 0.1s;
}

.drawer.is-checkout .form-group:nth-child(3) {
    transition-delay: 0.15s;
}

.drawer.is-checkout .form-group:nth-child(4) {
    transition-delay: 0.2s;
}

.drawer.is-checkout .form-group:nth-child(5) {
    transition-delay: 0.25s;
}

.drawer.is-checkout .form-group:nth-child(6) {
    transition-delay: 0.3s;
}

.drawer.is-checkout .form-group:nth-child(7) {
    transition-delay: 0.35s;
}

.form-group label {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.6rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    color: var(--text-dimmed);
    margin-bottom: 0.6rem;
}

.form-group input {
    width: 100%;
    padding: 0.8rem 1rem;
    border: none;
    background: white;
    font-family: 'Montserrat', sans-serif;
    font-size: 1rem;
    /* Mindestens 16px = verhindert iOS Auto-Zoom bei Focus */
    color: var(--text-secondary);
    transition: box-shadow 0.3s ease,
        border-color 0.3s ease;
    border-radius: 0;
    /* Reset iOS-Default */
    -webkit-appearance: none;
    /* Reset iOS-Default */
}

.form-group input::placeholder {
    color: var(--text-dimmed);
    font-weight: 300;
}

.form-group input:focus {
    outline: none;
    box-shadow: 0 0 0 1px rgba(196, 161, 105, 0.3);
}

.phone-input-group:focus-within {
    box-shadow: 0 0 20px rgba(196, 161, 105, 0.2);
    border-color: rgba(196, 161, 105, 0.4);
}

.checkout-form-row {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.zip-city-row {
    display: grid;
    grid-template-columns: 0.35fr 0.65fr;
    gap: 1.5rem;
}

@media (max-width: 360px) {
    .zip-city-row {
        grid-template-columns: 1fr;
        gap: 0;
    }
}

.phone-input-group {
    display: flex;
    align-items: center;
    background: var(--white);
    height: 54px;
    transition: box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    overflow: hidden;
    position: relative;
    border: 1px solid rgba(0, 0, 0, 0.08);
    cursor: text;
    /* Zeige an, dass das gesamte Feld klickbar ist */
}

/* --- Validation States ---
   Spezifität: #checkoutForm .selector (1,1,0+) schlägt .form-group input (0,1,1) --- */
#checkoutForm .form-group input.is-valid,
#checkoutForm .phone-input-group.is-valid {
    border-left: 3px solid var(--gold-light);
}

#checkoutForm .form-group input.is-invalid,
#checkoutForm .phone-input-group.is-invalid {
    border-left: 3px solid var(--error);
}

/* --- Elegant Error Tooltips --- */
.error-hint {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.65rem;
    color: var(--error);
    letter-spacing: 0.05em;
    margin-top: 0.4rem;
    opacity: 0;
    transform: translateY(-5px);
    transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        height 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
    height: 0;
    overflow: hidden;
}

.error-hint.is-visible {
    opacity: 1;
    transform: translateY(0);
    height: auto;
    margin-bottom: 0.5rem;
}

/* Chrome/Safari specific: hide autofill yellow background */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0px 1000px white inset;
    transition: background-color 5000s ease-in-out 0s;
}

/* --- Phone Input Overrides ---
   #checkoutForm erhöht Spezifität auf (1,x,x) und schlägt
   jede .form-group input Regel (0,1,1) sauber ohne !important. --- */
#checkoutForm .phone-input-group .phone-box {
    width: auto;
    background: transparent;
    border: none;
    height: 100%;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.95rem;
    color: var(--text-secondary);
    padding: 0 1rem;
    letter-spacing: 0.1em;
    transition: color 0.3s ease,
        background-color 0.3s ease;
    box-shadow: none;
}

#checkoutForm .phone-input-group .phone-box--country {
    width: 85px;
    color: var(--text-secondary);
    font-weight: 400;
    text-align: center;
    position: relative;
}

/* Subtile interne Trenner */
.phone-input-group .phone-box--country::after,
.phone-input-group .phone-box--area::after {
    content: '';
    position: absolute;
    right: 0;
    top: 20%;
    height: 60%;
    width: 1px;
    background: rgba(0, 0, 0, 0.12);
    z-index: 2;
}

#checkoutForm .phone-input-group .phone-box--area {
    width: 90px;
    text-align: center;
    font-weight: 400;
    position: relative;
}

#checkoutForm .phone-input-group .phone-box--number {
    flex: 1;
    width: 100%;
    text-align: left;
    padding-left: 1.5rem;
    font-weight: 400;
}

#checkoutForm .phone-input-group .phone-box:focus {
    outline: none;
    color: var(--black);
    background: transparent;
}

.phone-box::placeholder,
.street-box::placeholder {
    color: var(--text-dimmed);
    font-weight: 200;
    letter-spacing: 0.2em;
}

/* --- Street Input Group (Monolith Style) --- */
.street-input-group {
    display: flex;
    align-items: center;
    background: var(--white);
    height: 54px;
    transition: box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    overflow: hidden;
    position: relative;
    border: 1px solid rgba(0, 0, 0, 0.08);
    cursor: text;
}

.street-input-group:focus-within {
    box-shadow: 0 0 20px rgba(196, 161, 105, 0.2);
    border-color: rgba(196, 161, 105, 0.4);
}

#checkoutForm .street-input-group .street-box {
    width: auto;
    background: transparent;
    border: none;
    height: 100%;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.95rem;
    color: var(--text-secondary);
    padding: 0 1.2rem;
    letter-spacing: 0.1em;
    transition: color 0.3s ease,
        background-color 0.3s ease;
    box-shadow: none;
}

#checkoutForm .street-input-group .street-box--name {
    flex: 1;
    width: 100%;
    text-align: left;
}

#checkoutForm .street-input-group .street-box--number {
    width: 80px;
    text-align: center;
    border-left: 1px solid rgba(0, 0, 0, 0.12);
}

#checkoutForm .street-input-group .street-box:focus {
    outline: none;
    background: transparent;
    color: var(--black);
}

.field-note {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.6rem;
    color: var(--text-dimmed);
    margin-top: 0.5rem;
}

#checkoutForm .form-group label .optional {
    font-size: 0.6rem;
    font-weight: 500;
    color: var(--text-dimmed);
    opacity: 0.7;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.input-readonly {
    background: white;
    cursor: default;
}

.checkout-checkbox-group {
    margin: 1.5rem 0 0.5rem;
    opacity: 0;
    transform: translate3d(30px, 0, 0);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: 0.4s;
}

.drawer.is-checkout .checkout-checkbox-group {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

.custom-checkbox {
    display: flex;
    align-items: center;
    gap: 1rem;
    cursor: pointer;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.85rem;
    color: var(--text-secondary);
    user-select: none;
}

/* --- Different Shipping Slide Logic --- */
.diff-shipping-container {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--transition-premium);
    overflow: hidden;
}

.diff-shipping-container.is-open {
    grid-template-rows: 1fr;
}

.diff-shipping-inner {
    min-height: 0;
    padding-bottom: 1rem;
}

/* Override staggering for fields inside hidden container to ensure they appear smoothly */
.diff-shipping-container .form-group {
    opacity: 0;
    transform: translate3d(0, 10px, 0);
    transition: opacity var(--transition-premium),
        transform var(--transition-premium);
}

.diff-shipping-container.is-open .form-group {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

.diff-shipping-container.is-open .form-group:nth-child(1) {
    transition-delay: 0.2s;
}

.diff-shipping-container.is-open .form-group:nth-child(2) {
    transition-delay: 0.3s;
}

.diff-shipping-container.is-open .form-group:nth-child(3) {
    transition-delay: 0.4s;
}

.diff-shipping-container.is-open .form-group:nth-child(4) {
    transition-delay: 0.5s;
}

.custom-checkbox input {
    display: none;
}

.checkmark {
    width: 22px;
    height: 22px;
    border: 0.5px solid rgba(0, 0, 0, 0.2);
    background: white;
    position: relative;
    flex-shrink: 0;
    transition: border-color 0.3s ease;
}

.custom-checkbox input:checked+.checkmark {
    border-color: var(--gold-light);
}

.custom-checkbox input:checked+.checkmark::after {
    content: '';
    position: absolute;
    left: 7px;
    top: 3px;
    width: 5px;
    height: 10px;
    border: solid var(--gold-light);
    border-width: 0 1.5px 1.5px 0;
    transform: rotate(45deg);
}

.order-summary {
    margin-top: 0.5rem;
    opacity: 0;
    transform: translate3d(30px, 0, 0);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: 0.45s;
}

.drawer.is-checkout .order-summary {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

.checkout-items-list {
    margin-bottom: 2rem;
}

.checkout-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 0.8rem;
    padding-bottom: 0.8rem;
    border-bottom: 0.5px solid rgba(0, 0, 0, 0.03);
}

.checkout-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.summary-totals {
    border-top: none;
    padding-top: 0;
    margin-bottom: 2rem;
}

.summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 0.8rem;
    font-weight: 300;
}



/* .gold-text definiert in 01-globals.css (Single Source of Truth) */



/* --- Success Toast --- */
.store-toast {
    position: fixed;
    bottom: calc(2rem + env(safe-area-inset-bottom, 0px));
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    background: var(--gold);
    color: var(--white);
    padding: 1rem 2rem;
    font-family: var(--font-accent);
    font-size: 0.8rem;
    letter-spacing: 0.2em;
    z-index: 5000;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    white-space: nowrap;
    max-width: calc(100vw - 2rem);
    text-align: center;
}

.store-toast.is-active {
    transform: translateX(-50%) translateY(0);
}

/* --- Utilities --- */
.btn-reset {
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    color: inherit;
    display: flex;
    align-items: center;
    position: relative;
}

.btn-back {
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    padding: 0.5rem;
    transition: color 0.3s ease;
    min-width: 44px;
    /* Touch Standard */
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-back:hover {
    color: var(--gold);
}

.cart-empty {
    text-align: center;
    padding: 3rem 0;
    color: var(--text-muted);
    font-family: var(--font-primary);
    font-weight: 300;
    font-size: 0.9rem;
    letter-spacing: 0.12em;
    opacity: 0.7;
}

.drawer-open {
    overflow: hidden;
}

/* ==========================================================
   BESTELL-BUTTON · Premium Gold Differenzierung
   
   Der finale Kaufbutton bekommt ein dunkleres Gold + Glow-Puls,
   um sich visuell vom "ZUR KASSE"-Button abzuheben und
   maximale Conversion-Wirkung zu erzielen.
   ========================================================== */
.btn-order {
    background: var(--gold-dark);
    height: 4.2rem;
    font-size: 0.85rem;
    letter-spacing: 0.3em;
    position: relative;
    box-shadow:
        0 4px 20px rgba(166, 133, 78, 0.3),
        0 0 0 0 rgba(166, 133, 78, 0);
    animation: orderButtonGlow 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Glow-Puls: Subtile, rhythmische Gold-Aura */
@keyframes orderButtonGlow {
    0%, 100% {
        box-shadow:
            0 4px 20px rgba(166, 133, 78, 0.3),
            0 0 0 0 rgba(196, 161, 105, 0);
    }
    50% {
        box-shadow:
            0 6px 30px rgba(166, 133, 78, 0.45),
            0 0 20px 2px rgba(196, 161, 105, 0.12);
    }
}

/* Hover: Noch intensiverer Glow */
@media (hover: hover) and (pointer: fine) {
    .btn-order:hover {
        background: #8f7342;
        letter-spacing: 0.35em;
        box-shadow:
            0 8px 35px rgba(166, 133, 78, 0.5),
            0 0 25px 4px rgba(196, 161, 105, 0.2);
        animation: none;
    }
}

/* Active-State: Kurzes Dimmen für taktiles Feedback */
.btn-order:active {
    background: #806838;
    box-shadow:
        0 2px 10px rgba(166, 133, 78, 0.2);
    animation: none;
}

/* --- Vertrauenselement unter dem Button --- */
.checkout-trust-line {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.6rem;
    letter-spacing: 0.15em;
    color: var(--text-dimmed);
    margin-top: 0.2rem;
    opacity: 0.7;
    transition: opacity 0.3s ease;
}

.checkout-trust-line svg {
    width: 12px;
    height: 12px;
    color: var(--gold-light);
    flex-shrink: 0;
}

/* Mobile: Trust-Line etwas grösser für Lesbarkeit */
@media (max-width: 47.99rem) {
    .btn-order {
        height: 3.8rem;
        font-size: 0.75rem;
        letter-spacing: 0.25em;
    }

    .checkout-trust-line {
        font-size: 0.55rem;
        margin-top: 0.3rem;
    }
}

/* Utility entfernt – .cart-badge.is-visible ist in 19a-store-products.css definiert.
   Generische .is-visible-Klasse mit !important war zu gefährlich. */