/* ============================================================
   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 */
}

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

@media (min-width: 64rem) {
    .drawer {
        top: 0;
        left: 50%;
        right: auto;
        width: 588px;
        height: 100dvh;
        background: rgba(240, 240, 240, 0.75); /* Luxury glassmorphic Ivory */
        -webkit-backdrop-filter: blur(25px) saturate(180%);
        backdrop-filter: blur(25px) saturate(180%);
        border-left: 1px solid rgba(196, 161, 105, 0.2);
        border-right: 1px solid rgba(196, 161, 105, 0.2);
        border-top: none;
        border-bottom: none;
        box-shadow: 0 30px 100px rgba(0, 0, 0, 0.45);
        border-radius: 0;
        transform: translate3d(-50%, 0, 0) scale(0.95);
        transform-origin: top center;
        opacity: 0;
        visibility: hidden;
        transition: 
            transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),
            opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
            visibility 0.6s cubic-bezier(0.16, 1, 0.3, 1),
            width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .drawer.is-open {
        transform: translate3d(-50%, 0, 0) scale(1);
        opacity: 1;
        visibility: visible;
    }

    .drawer.is-open.is-checkout {
        width: 588px;
        /* Keep single width for centering checkout */
        transform: translate3d(-50%, 0, 0) scale(1);
    }

    .drawer.is-open.is-success {
        width: 588px;
        /* Shrink back to single width */
        transform: translate3d(-50%, 0, 0) scale(1);
    }

    /* Header und Footer transparent im Desktop-Modus für Glassmorphism */
    .drawer-header {
        background: rgba(0, 0, 0, 0.9) !important;
    }

    .drawer-footer {
        background: transparent !important;
        border-top: 1px solid rgba(196, 161, 105, 0.12);
    }


}

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

@media (min-width: 64rem) {
    .drawer-slider {
        width: 1764px;
        /* 3 Stages à 588px */
    }
}

/* Push to Checkout / Success (Mobile: Slide, Desktop: Slide/Expand) */
.drawer.is-checkout .drawer-slider {
    transform: translate3d(-33.3333%, 0, 0);
}

.drawer.is-success .drawer-slider {
    transform: translate3d(-66.6667%, 0, 0);
}

@media (min-width: 64rem) {
    .drawer.is-checkout .drawer-slider {
        transform: translate3d(-588px, 0, 0);
        /* Slide out cart and slide in checkout */
    }

    .drawer.is-success .drawer-slider {
        transform: translate3d(-1176px, 0, 0);
        /* Shrink drawer and show ONLY stage 3 (Success) */
    }
}

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

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

/* 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: 64rem) {
    .drawer-stage {
        width: 588px;
        /* 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: 1.25rem 2rem;
    display: flex;
    flex-direction: column;
    position: relative;
    background: #000000;
    min-height: auto;
    box-sizing: border-box;
    justify-content: center;
}

.drawer-header__top {
    display: flex;
    align-items: center;
    width: 100%;
    position: relative;
    min-height: 44px;
    /* matching close/back button heights */
}

.drawer-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg,
            transparent 0%,
            var(--gold) 30%,
            var(--gold) 70%,
            transparent 100%);
}

.drawer-title {
    font-family: var(--font-accent);
    font-size: var(--fs-drawer-title);
    letter-spacing: 0.3em;
    color: var(--text-secondary);
    margin: 0;
    font-weight: 300;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -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;
    margin-left: auto;
    /* Push to far right when inside .drawer-header__top */
}

.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: 47.99rem) {
    .drawer-close {
        width: 44px;
        height: 44px;
    }
}

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

.drawer-footer {
    padding: 1.5rem 2rem;
    padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
    /* Safe Area für Notch/Dynamic Island */
    position: relative;
    background: var(--ivory);
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    margin-top: auto;
    /* Drückt den Footer ans untere Ende wenn wenig Inhalt */
    width: 100%;
    box-sizing: border-box;
}

/* Inset border-top matching the content and buttons width (removed for minimalist luxury look) */
.drawer-footer::before {
    display: none;
}

/* Checkout-Footer jetzt im normalen Scroll-Flow zwischen Bestellübersicht und Zahlungsart */
.checkout-footer {
    background: transparent;
    padding: 2.2rem 0;
    margin-top: 1rem;
    margin-bottom: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    width: 100%;
    box-sizing: border-box;
    position: relative;
    border-top: 1px solid rgba(196, 161, 105, 0.12);
}

.drawer.is-checkout .checkout-content {
    padding-bottom: 5rem;
}



.total-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-family: var(--font-accent);
    margin-bottom: 0;
    width: 100%;
}

.total-label {
    font-size: var(--fs-cart-price);
    /* 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: var(--fs-price);
    color: var(--dark-grey);
    /* Etwas dunkler für Fokus */
    letter-spacing: 0.02em;
    font-family: var(--font-accent);
    font-weight: 400;
    font-variant-numeric: tabular-nums;
}

.currency-chf {
    font-size: var(--fs-cart-price);
    letter-spacing: 0.35em;
    color: var(--text-secondary);
    text-transform: uppercase;
    font-family: var(--font-accent);
    font-weight: 300;
    margin-right: 0.3rem;
}

/* 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: none;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.cart-item__main {
    position: relative;
    width: auto !important;
    margin-left: -2rem !important;
    margin-right: -2rem !important;
    display: block;
}

.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 {
    position: absolute;
    bottom: 12%;
    left: 0;
    width: 100%;
    z-index: 10;
    text-align: center;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.cart-item__header-row {
    display: flex;
    justify-content: center;
    align-items: baseline;
    margin-bottom: 0.15rem;
}

.cart-item__name {
    font-family: var(--font-accent);
    font-size: var(--fs-cart-name);
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.7);
    /* 30% transparency */
    font-weight: 400;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
}

.cart-item__price {
    font-family: var(--font-accent);
    font-size: var(--fs-cart-price);
    color: var(--gold);
    font-weight: 400;
    letter-spacing: 0.05em;
    font-variant-numeric: tabular-nums;
}

.cart-item__desc-container {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0;
    justify-content: center;
}

.cart-item__desc {
    font-family: var(--font-accent);
    font-size: calc(var(--fs-button) * 0.85);
    /* 15% smaller */
    color: rgba(255, 255, 255, 0.7);
    /* 30% transparency */
    line-height: 1.4;
    margin: 0;
    font-weight: 300;
    letter-spacing: 0.02em;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
}

.cart-item__pulse-dot {
    width: 6px;
    height: 6px;
    background-color: var(--gold);
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
    position: relative;
}

.cart-item__pulse-dot::after {
    content: '';
    position: absolute;
    top: -3px;
    left: -3px;
    right: -3px;
    bottom: -3px;
    border-radius: 50%;
    border: 1px solid var(--gold);
    opacity: 0;
    animation: goldPulse 2s infinite cubic-bezier(0.24, 0, 0.38, 1);
}

@keyframes goldPulse {
    0% {
        transform: scale(0.6);
        opacity: 0.8;
    }

    100% {
        transform: scale(2.2);
        opacity: 0;
    }
}

/* ── Gesamt-Mengen-Anzeige: elegante Zahl + Label ── */
.cart-item__qty-summary {
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
    margin: 0;
    padding: 0;
    border: none;
}

.cart-item__qty-summary-num {
    font-family: var(--font-accent);
    font-size: 1.15rem;
    font-weight: 300;
    color: var(--gold);
    letter-spacing: 0.04em;
    line-height: 1;
    transition: color 0.4s ease;
    font-variant-numeric: tabular-nums;
}

.cart-item__qty-summary-label {
    font-family: var(--font-accent);
    font-size: 0.52rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--text-dimmed);
    font-weight: 300;
    line-height: 1;
}

.cart-item__status-note {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--font-editorial);
    font-size: var(--fs-label);
    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;
    justify-content: space-between;
    min-height: 38px;
}

.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: var(--fs-drawer-title);
    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: var(--fs-body-sm);
    color: var(--text-secondary);
    font-family: var(--font-accent);
    font-weight: 400;
    min-width: 1rem;
    text-align: center;
}

/* --- Entfernen: Box-Button wie Plus/Minus --- */
.cart-item__remove {
    background: transparent;
    border: 0.5px solid rgba(196, 161, 105, 0.15);
    height: 38px;
    padding: 0 1rem;
    margin-left: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    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-item__remove:hover {
    background: rgba(196, 161, 105, 0.05);
    border-color: var(--gold);
}

.remove-text {
    font-family: var(--font-accent);
    font-size: var(--fs-label);
    letter-spacing: 0.1em;
    font-weight: 300;
    color: var(--gold);
    transition: color 0.4s ease;
    white-space: nowrap;
    text-transform: uppercase;
    display: inline-block;
}

/* Confirm-State: Dunkler/Outline wenn geklickt */
.cart-item__remove.is-confirming {
    background: var(--gold);
    border-color: var(--gold);
}

.cart-item__remove.is-confirming .remove-text {
    color: var(--white);
    font-weight: 400;
}

/* --- Smart Minus: Mülleimer-Icon bei qty=1 --- */
.cart-qty-btn--trash {
    color: var(--text-muted);
    opacity: 0.7;
    transition: opacity 0.4s ease,
        color 0.4s ease,
        background-color 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.cart-qty-btn--trash svg {
    width: 14px;
    height: 14px;
}

@media (hover: hover) and (pointer: fine) {
    .cart-qty-btn--trash:hover {
        opacity: 1;
        color: var(--gold);
        border-color: var(--gold);
    }
}

/* --- Cart Item Capacity Counter & Progress Bar --- */
.cart-item__capacity {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.6rem;
    padding: 0.8rem 0.9rem;
    background: rgba(196, 161, 105, 0.04);
    border: 0.5px solid rgba(196, 161, 105, 0.12);
    border-radius: 2px;
}

.cart-item__capacity-info {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.cart-item__capacity-remaining {
    font-family: var(--font-accent);
    font-size: var(--fs-label);
    letter-spacing: 0.06em;
    color: var(--gold);
    font-weight: 400;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Goldene Raute als Urgency-Icon */
.cart-item__capacity-remaining::before {
    content: '\25C6';
    font-size: 0.45rem;
    color: var(--gold);
    opacity: 0.8;
    animation: capacityPulse 2.5s ease-in-out infinite;
    flex-shrink: 0;
}

@keyframes capacityPulse {

    0%,
    100% {
        opacity: 0.5;
    }

    50% {
        opacity: 1;
    }
}

.cart-item__capacity-progress-track {
    width: 100%;
    height: 3px;
    background: rgba(196, 161, 105, 0.12);
    border-radius: 1.5px;
    overflow: hidden;
}

.cart-item__capacity-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--gold), #d4bc91);
    border-radius: 1.5px;
    transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* --- Noble Minimalist Continue Shopping Button --- */
.btn-continue-shopping {
    width: 100%;
    height: 3.8rem;
    background: transparent;
    color: var(--text-secondary);
    border: 0.5px solid rgba(196, 161, 105, 0.3);
    border-radius: 0;
    font-family: var(--font-accent);
    letter-spacing: 0.25em;
    font-size: var(--fs-button);
    font-weight: 300;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    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),
        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 2px 10px rgba(0, 0, 0, 0.02);
}

@media (hover: hover) and (pointer: fine) {
    .btn-continue-shopping:hover {
        color: var(--gold);
        border-color: var(--gold);
        background: rgba(196, 161, 105, 0.04);
        letter-spacing: 0.3em;
        box-shadow: 0 4px 15px rgba(196, 161, 105, 0.1);
    }
}

.btn-continue-shopping:active {
    background: rgba(196, 161, 105, 0.08);
    transform: scale(0.99) translate3d(0, 0, 0);
}

/* --- Personalization inside Drawer --- */
.cart-item__personalization-toggle {
    margin-top: 0.5rem;
}

.cart-item__personalization-fields {
    margin-top: 1rem;
    padding: 1.2rem;
    background: rgba(196, 161, 105, 0.04);
    border: 0.5px solid rgba(196, 161, 105, 0.15);
    border-radius: 2px;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    animation: drawerFadeIn 0.4s ease forwards;
}

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

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

.personalization-field-group {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.personalization-field-group label {
    font-family: var(--font-accent);
    font-size: var(--fs-badge);
    letter-spacing: 0.15em;
    color: var(--text-dimmed);
    text-transform: uppercase;
}

.personalization-font {
    width: 100%;
    padding: 0.6rem;
    background: var(--ivory);
    border: 0.5px solid rgba(196, 161, 105, 0.3);
    color: var(--text-secondary);
    font-family: var(--font-primary);
    font-size: var(--fs-body-sm);
    border-radius: 0;
    outline: none;
    cursor: pointer;
    transition: border-color 0.3s ease;
}

.personalization-font:focus {
    border-color: var(--gold);
}

.personalization-input-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.personalization-input {
    width: 100%;
    padding: 0.6rem;
    background: var(--ivory);
    border: 0.5px solid rgba(196, 161, 105, 0.3);
    color: var(--text-secondary);
    font-family: var(--font-primary);
    font-size: var(--fs-body-sm);
    border-radius: 0;
    outline: none;
    transition: border-color 0.3s ease, background-color 0.3s ease;
    box-sizing: border-box;
}

.personalization-input:focus {
    border-color: var(--gold);
    background: var(--white);
}

.personalization-input::placeholder {
    color: var(--text-dimmed);
    opacity: 0.6;
}

.btn-preview-gravur {
    width: 100%;
    height: 2.8rem;
    background: transparent;
    color: var(--gold);
    border: 0.5px solid var(--gold);
    font-family: var(--font-accent);
    letter-spacing: 0.15em;
    font-size: var(--fs-badge);
    text-transform: uppercase;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s, color 0.3s;
}

.btn-preview-gravur:hover {
    background: var(--gold);
    color: var(--white);
}

/* --- Gravur Vorschau Modal --- */
.gravur-preview-modal {
    position: fixed;
    inset: 0;
    z-index: 4000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

.gravur-preview-modal.is-active {
    opacity: 1;
    visibility: visible;
}

.gravur-preview-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.gravur-preview-modal__container {
    position: relative;
    width: 90%;
    max-width: 500px;
    background: var(--ivory);
    border: 1px solid var(--gold-30);
    padding: 2.5rem 2rem;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
    z-index: 4100;
    border-radius: 2px;
    transform: scale(0.95);
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.gravur-preview-modal.is-active .gravur-preview-modal__container {
    transform: scale(1);
}

.gravur-preview-modal__close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    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;
}

.gravur-preview-modal__close:hover {
    color: var(--gold);
}

.gravur-preview-modal__title {
    font-family: var(--font-accent);
    font-size: var(--fs-body);
    letter-spacing: 0.2em;
    color: var(--text-secondary);
    text-align: center;
    margin-bottom: 2rem;
    text-transform: uppercase;
}

/* Custom checkbox rules to make checkmark visible inside drawer */
.custom-checkbox {
    display: inline-flex;
    align-items: center;
    position: relative;
    cursor: pointer;
    font-family: var(--font-primary);
    font-size: var(--fs-body-sm);
    color: var(--text-secondary);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    gap: 0.8rem;
}

.custom-checkbox input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.custom-checkbox .checkmark {
    height: 18px;
    width: 18px;
    background-color: var(--ivory);
    border: 0.5px solid rgba(196, 161, 105, 0.4);
    display: inline-block;
    position: relative;
    transition: background-color 0.3s, border-color 0.3s;
}

.custom-checkbox:hover input~.checkmark {
    border-color: var(--gold);
}

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

.custom-checkbox .checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

.custom-checkbox input:checked~.checkmark:after {
    display: block;
}

.custom-checkbox .checkmark:after {
    left: 6px;
    top: 2px;
    width: 4px;
    height: 9px;
    border: solid var(--ivory);
    border-width: 0 1.5px 1.5px 0;
    transform: rotate(45deg);
}

.checkout-item__personalization-summary {
    font-family: var(--font-editorial);
    font-style: italic;
    font-size: var(--fs-label);
    color: var(--gold);
    margin-top: 0.4rem;
    padding-left: 1rem;
    border-left: 1px solid var(--gold-30);
    line-height: 1.4;
}

/* ============================================================
   Progress Indicator (3-Step: Warenkorb → Daten → Abschluss)
   ============================================================ */
.drawer-progress {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 0.25rem 0 0.5rem;
    background: transparent;
    width: 100%;
}

.drawer-progress__step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.45rem;
    flex-shrink: 0;
}

.drawer-progress__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(196, 161, 105, 0.25);
    transition: background-color 0.6s cubic-bezier(0.16, 1, 0.3, 1),
        border-color 0.6s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.6s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.drawer-progress__step.is-active .drawer-progress__dot {
    background: var(--gold);
    border-color: var(--gold);
    box-shadow: 0 0 10px rgba(196, 161, 105, 0.6);
    transform: scale(1.2);
}

.drawer-progress__step.is-completed .drawer-progress__dot {
    background: var(--gold-light);
    border-color: var(--gold-light);
}

.drawer-progress__label {
    font-family: var(--font-accent);
    font-size: 0.55rem;
    letter-spacing: 0.18em;
    color: rgba(255, 255, 255, 0.35);
    font-weight: 300;
    transition: color 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.drawer-progress__step.is-active .drawer-progress__label {
    color: var(--gold);
    font-weight: 400;
    text-shadow: 0 0 4px rgba(196, 161, 105, 0.2);
}

.drawer-progress__step.is-completed .drawer-progress__label {
    color: rgba(255, 255, 255, 0.7);
}

.drawer-progress__line {
    flex: 1;
    height: 1px;
    background: rgba(255, 255, 255, 0.12);
    margin: 0 0.6rem;
    margin-bottom: 1.25rem;
    /* offset for label height */
    position: relative;
    min-width: 2rem;
}

.drawer-progress__line::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, var(--gold), var(--gold-light));
    transition: width 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.drawer-progress__line.is-filled::after {
    width: 100%;
}

/* ============================================================
   Cart Trust Badges
   ============================================================ */
.cart-trust-badges {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0;
    flex-wrap: wrap;
}

.cart-trust-badge {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    white-space: nowrap;
}

.cart-trust-badge svg {
    color: var(--gold);
    flex-shrink: 0;
    opacity: 0.7;
}

.cart-trust-badge span {
    font-family: var(--font-accent);
    font-size: 0.6rem;
    letter-spacing: 0.05em;
    color: var(--text-dimmed);
    font-weight: 400;
}

.cart-trust-separator {
    color: rgba(196, 161, 105, 0.3);
    font-size: 0.8rem;
    line-height: 1;
}

/* ============================================================
   Cart Shipping Restriction
   ============================================================ */
.cart-shipping-restriction {
    font-family: var(--font-accent);
    font-size: 0.6rem;
    letter-spacing: 0.04em;
    color: var(--text-dimmed);
    text-align: center;
    line-height: 1.5;
    opacity: 0.7;
}

/* ============================================================
   Cart Item Thumbnail
   ============================================================ */
.cart-item__thumb {
    width: 100%;
    max-width: 100%;
    aspect-ratio: 1 / 1;
    height: auto;
    flex-shrink: 0;
    border-radius: 0;
    overflow: hidden;
    border: none;
    background: transparent;
    box-shadow: none;
    display: block;
    position: relative;
}

.cart-item__thumb::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 45%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%);
    pointer-events: none;
    z-index: 1;
}

.cart-item__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.cart-item:hover .cart-item__thumb img {
    transform: scale(1.08);
}

/* ============================================================
   Checkout Story-Mode: Set-Inhalt Details
   ============================================================ */
.checkout-item__set-contents {
    font-family: var(--font-accent);
    font-size: 0.65rem;
    color: var(--text-dimmed);
    letter-spacing: 0.03em;
    padding-left: 1.2rem;
    position: relative;
    line-height: 1.6;
}

.checkout-item__set-contents::before {
    content: '\21B3';
    /* ⤷ */
    position: absolute;
    left: 0;
    color: var(--gold);
    opacity: 0.5;
}


/* ==========================================================
   ACCORDION TIMELINE — Liefermonat-Selektor (Redesign)
   Ersetzt altes Zeilen-Layout (cart-item__delivery-row)
   ========================================================== */

/* ── Legacy-Klassen: Backward-Kompatibilität (JS rendert noch altes Markup
   bis _createDeliverySection umgestellt ist; danach entfernbar) ── */
.cart-item__delivery {
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 0.5px solid rgba(196, 161, 105, 0.15);
    border-radius: 2px;
    overflow: hidden;
}

.cart-item__delivery-row {
    display: none !important;
}

/* ── Wrapper für den gesamten Liefertermin-Bereich ── */
.delivery-accordion-wrapper {
    display: flex;
    flex-direction: column;
    margin-top: 0.809rem;
    margin-bottom: 0.809rem;
}

/* ── Sektion-Label: «Liefertermin wählen» ── */
.delivery-accordion__title {
    font-family: var(--font-accent);
    font-size: 0.58rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--text-dimmed);
    font-weight: 300;
    margin-bottom: 0.309rem;
}

.delivery-accordion__title--additional {
    margin-top: 0.809rem;
}

/* ── Accordion-Container ── */
.delivery-accordion {
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 0.5px solid rgba(196, 161, 105, 0.18);
    border-radius: 2px;
    overflow: hidden;
}

/* ── Einzelner Accordion-Eintrag ── */
.delivery-accordion__item {
    border-bottom: 0.5px solid rgba(196, 161, 105, 0.1);
    position: relative;
    overflow: hidden;
    transition: background 0.45s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.45s cubic-bezier(0.16, 1, 0.3, 1),
        border-color 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.delivery-accordion__item.is-open {
    background: rgba(196, 161, 105, 0.08);
    box-shadow: inset 0 0 15px rgba(196, 161, 105, 0.04);
}

.delivery-accordion__item:last-child {
    border-bottom: none;
}

/* ── Trigger-Zeile (immer sichtbar) ── */
.delivery-accordion__trigger {
    display: grid;
    grid-template-columns: 1.4rem auto;
    grid-template-rows: auto auto;
    row-gap: 0.618rem;
    column-gap: 0.618rem;
    align-items: center;
    padding: 0.8rem 1rem;
    /* Standardisiertes Padding ohne absoluten Badge-Überhang */
    cursor: pointer;
    min-height: unset;
    -webkit-tap-highlight-color: transparent;
    background: transparent;
    transition: background 0.3s ease;
    position: relative;
    width: 100%;
    border: none;
    text-align: left;
}

.delivery-accordion__item.is-locked .delivery-accordion__trigger {
    opacity: 0.32;
    cursor: not-allowed;
    pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
    .delivery-accordion__item:not(.is-selected):not(.is-locked) .delivery-accordion__trigger:hover {
        background: rgba(196, 161, 105, 0.04);
    }
}

.delivery-accordion__item.is-selected {
    background: rgba(196, 161, 105, 0.055);
}

/* ── Monatsname ── */
.delivery-accordion__month {
    font-family: var(--font-accent);
    font-size: 0.74rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-secondary);
    transition: color 0.3s ease;
    white-space: nowrap;
    grid-row: 1;
    grid-column: 2;
}

.delivery-accordion__item.is-selected .delivery-accordion__month {
    color: var(--gold);
}

/* ── Fortschrittsbalken (Verfügbarkeit visuell) ── */
.delivery-accordion__bar-wrap {
    height: 1.35rem;
    /* Um 50% erhöht von 0.9rem für bessere visuelle Präsenz */
    background: rgba(118, 97, 63, 0.2);
    /* 40% dunklerer Gold-Ton & leicht erhöhtes Alpha für bessere Sichtbarkeit */
    border-radius: 0;
    overflow: hidden;
    min-width: 0;
    /* Wichtig: verhindert Überlauf im Grid */
    width: 100%;
    display: flex;
    position: relative;
    /* Für absolute Positionierung des Labels im Balken */
    grid-row: 2;
    grid-column: 1 / -1;
}

.delivery-accordion__bar {
    height: 100%;
    border-radius: 0;
    background: linear-gradient(90deg, var(--gold), #d4bc91);
    transition: width 0.65s cubic-bezier(0.16, 1, 0.3, 1);
    flex-shrink: 0;
}

.delivery-accordion__user-bar {
    height: 100%;
    background: #534227;
    /* 50% dunkler als var(--gold-dark) (#a6854e) */
    transition: width 0.65s cubic-bezier(0.16, 1, 0.3, 1);
    flex-shrink: 0;
}

.delivery-accordion__item.is-urgent .delivery-accordion__bar {
    background: linear-gradient(90deg, #c4916a, #d4ab8a);
}

/* ── Verfügbarkeits-Label ── */
.delivery-accordion__avail {
    font-family: var(--font-accent);
    font-size: 0.58rem;
    /* Etwas kleiner als vorher (0.74rem) */
    font-weight: 500;
    color: #fffbf4;
    /* Elegantes, kontrastreiches Off-White */
    white-space: nowrap;
    letter-spacing: 0.06em;
    transition: color 0.3s ease;
    text-align: center;
    font-variant-numeric: tabular-nums;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    /* Klicks durchlassen */
    z-index: 5;
}

.delivery-accordion__item.is-urgent .delivery-accordion__avail {
    color: #ffd8bd;
    /* Angepasster Farbton für Dringlichkeit bei weißem Text */
    font-weight: 600;
}

/* «Wählen» CTA — bei Hover sichtbar, auf Touch immer schwach sichtbar */
.delivery-accordion__cta {
    font-family: var(--font-accent);
    font-size: 0.5rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(196, 161, 105, 0.4);
    opacity: 0;
    transition: opacity 0.3s ease;
    flex-shrink: 0;
    white-space: nowrap;
    grid-column: 3;
    /* Ins 3-Spalten-Grid verschoben */
}

@media (hover: hover) and (pointer: fine) {
    .delivery-accordion__item:not(.is-selected):not(.is-locked) .delivery-accordion__trigger:hover .delivery-accordion__cta {
        opacity: 1;
    }
}

@media (hover: none) {
    .delivery-accordion__item:not(.is-selected):not(.is-locked) .delivery-accordion__cta {
        opacity: 0.55;
    }
}

/* ── Ausfahrendes Detail-Panel (CSS grid-template-rows Trick) ── */
.delivery-accordion__panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.45s cubic-bezier(0.16, 1, 0.3, 1),
        opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    opacity: 0;
    will-change: grid-template-rows, opacity;
}

/* Panel öffnet sich NUR wenn is-open gesetzt ist.
   is-selected hält das Panel NICHT offen — stattdessen zeigt das qty-badge
   auf dem geschlossenen Trigger die gewählte Anzahl. */
.delivery-accordion__item.is-open .delivery-accordion__panel {
    grid-template-rows: 1fr;
    opacity: 1;
}

.delivery-accordion__panel-inner {
    overflow: hidden;
    min-height: 0;
    will-change: transform, opacity;
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
        opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1);
    transform: translateY(-8px);
    opacity: 0;
}

.delivery-accordion__item.is-open .delivery-accordion__panel-inner {
    transform: translateY(0);
    opacity: 1;
}

/* ── Qty-Badge auf dem Trigger (im Grid-Fluss) ── */
.delivery-accordion__qty-badge {
    opacity: 1;
    /* Immer sichtbar */
    visibility: visible;
    /* Immer sichtbar */
    font-family: var(--font-accent);
    font-size: 0.58rem;
    /* Proportional verkleinert für den 1.4rem Kreis */
    font-weight: 600;
    color: rgba(196, 161, 105, 0.6);
    /* Zahl in softem Gold */
    background: transparent;
    /* Transparent im Grundzustand */
    border: 1px solid rgba(196, 161, 105, 0.35);
    /* Soft-goldener Rahmen */
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 50%;
    /* Perfekter Kreis */
    display: flex;
    align-items: center;
    /* Vertikal zentriert */
    justify-content: center;
    /* Horizontal zentriert */
    text-align: center;
    line-height: 1;
    padding: 0;
    box-shadow: none;
    white-space: nowrap;
    flex-shrink: 0;
    margin: 0;
    /* Linksbuendig platziert */
    grid-row: 1;
    grid-column: 1;
    transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1),
        visibility 0.35s cubic-bezier(0.16, 1, 0.3, 1),
        background-color 0.35s ease,
        border-color 0.35s ease,
        color 0.35s ease,
        box-shadow 0.35s ease;
    font-variant-numeric: tabular-nums;
}

.delivery-accordion__item.is-selected .delivery-accordion__qty-badge {
    background: var(--gold);
    /* Goldener geschlossener Kreis */
    border-color: var(--gold);
    color: #ffffff;
    /* Zahl in reinem Weiss */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 0 7px rgba(196, 161, 105, 0.35);
}

/* ── Detail-Inhalt: Menge + Abwählen ── */
.delivery-accordion__detail {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    justify-content: stretch;
    gap: 1rem;
    padding: 0.309rem 1rem 1.618rem;
    border-top: 0.5px solid rgba(196, 161, 105, 0.12);
}

.delivery-accordion__item.is-open .delivery-accordion__trigger {
    padding-bottom: 0.309rem;
}

.delivery-accordion__detail .delivery-accordion__btn-text[data-month-action="decrease"] {
    justify-self: start;
    text-align: left;
    display: flex;
    align-items: center;
}

.delivery-accordion__qty-label {
    font-family: var(--font-accent);
    font-size: 0.59rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--text-dimmed);
    font-weight: 300;
    flex-shrink: 0;
}

.delivery-accordion__qty-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.618rem;
    /* Geometrisch perfekt ausbalancierter Abstand */
}

/* 44×44px touch-konforme Qty-Buttons im Panel */
.delivery-panel-qty-btn {
    background: transparent;
    border: 0.5px solid rgba(196, 161, 105, 0.25);
    color: var(--gold);
    width: 2.75rem;
    height: 2.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1.1rem;
    font-weight: 300;
    border-radius: 1px;
    transition: background 0.3s ease, border-color 0.3s ease;
    -webkit-tap-highlight-color: transparent;
    flex-shrink: 0;
    font-family: var(--font-primary);
    /* Erzwingt präzise mathematische Achsen */
    line-height: 1;
    padding: 0;
}

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

/* Papierkorb-Lösch-Button im Panel */
.delivery-panel-qty-btn.is-delete {
    color: var(--text-dimmed);
    border-color: rgba(196, 161, 105, 0.15);
    margin-left: 0.618rem;
    opacity: 0.65;
    width: 2.75rem;
    transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease, opacity 0.3s ease, width 0.3s cubic-bezier(0.16, 1, 0.3, 1), margin-left 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.delivery-panel-qty-btn.is-delete:hover {
    background: rgba(196, 161, 105, 0.08);
    border-color: var(--gold);
    color: var(--gold);
    opacity: 1;
}

.delivery-panel-qty-btn.is-delete.is-hidden {
    opacity: 0;
    pointer-events: none;
    width: 0;
    margin-left: 0;
    border-color: transparent;
    padding: 0;
    overflow: hidden;
}

.delivery-panel-qty-val {
    font-family: var(--font-accent);
    font-size: var(--fs-body);
    font-weight: 500;
    color: var(--text-secondary);
    min-width: 1.6rem;
    text-align: center;
    letter-spacing: 0.05em;
    font-variant-numeric: tabular-nums;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* ── Aktions-Gruppe: Wählen (oben) + Abwählen (unten) ── */
.delivery-accordion__action-group {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    width: 100%;
}

/* ── «Wählen»-Button (primäre CTA im Panel) ── */
.delivery-accordion__select-btn {
    font-family: var(--font-accent);
    font-size: 0.6rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--gold);
    cursor: pointer;
    background: rgba(196, 161, 105, 0.08);
    border: 0.5px solid rgba(196, 161, 105, 0.4);
    padding: 0.4rem 0.75rem;
    border-radius: 1px;
    transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
    -webkit-tap-highlight-color: transparent;
    white-space: nowrap;
}

.delivery-accordion__select-btn:hover {
    background: rgba(196, 161, 105, 0.18);
    border-color: var(--gold);
}

/* «Wählen»-Button ausblenden wenn der Monat BEREITS gewählt ist */
.delivery-accordion__item.is-selected .delivery-accordion__select-btn {
    display: none;
}

/* «Wählen»-Button bei qty=0: gedimmt → signalisiert «Klick = Abwählen» */
.delivery-accordion__select-btn.is-qty-zero {
    opacity: 0.38;
    color: var(--text-dimmed);
    border-color: rgba(196, 161, 105, 0.18);
    cursor: default;
    letter-spacing: 0.12em;
}

/* ── Text-Buttons für Weniger & Mehr ── */
.delivery-accordion__btn-text {
    font-family: var(--font-accent);
    font-size: 0.56rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--black);
    cursor: pointer;
    background: transparent;
    border: none;
    padding: 0.2rem 0;
    transition: color 0.3s ease, opacity 0.3s ease;
    -webkit-tap-highlight-color: transparent;
    flex-shrink: 0;
    white-space: nowrap;
}

.delivery-accordion__btn-text:hover {
    color: var(--gold);
}

.delivery-accordion__btn-text:disabled {
    opacity: 0.18;
    cursor: not-allowed;
}

/* ── Bestätigungs-Feedback («Liefertermin gesichert») ── */
.delivery-accordion__confirm {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0 1rem 0.618rem;
    font-family: var(--font-editorial);
    font-style: italic;
    font-size: 0.68rem;
    color: var(--gold);
    opacity: 0;
    transform: translateY(5px);
    transition: opacity 0.4s ease 0.1s, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.1s;
    pointer-events: none;
    letter-spacing: 0.02em;
}

.delivery-accordion__item.is-selected .delivery-accordion__confirm {
    opacity: 0.9;
    transform: translateY(0);
}

.delivery-accordion__confirm-check {
    font-style: normal;
    font-family: var(--font-accent);
    font-weight: 500;
    font-size: 0.7rem;
}

/* ==========================================================
   GLOBALE MONATS-ZUSAMMENFASSUNG im Cart-Footer
   ========================================================== */

.cart-month-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.7rem 1rem;
    border: 0.5px solid rgba(196, 161, 105, 0.2);
    background: rgba(196, 161, 105, 0.03);
    border-radius: 2px;
    transition: opacity 0.4s ease;
}

.cart-month-summary__label {
    font-family: var(--font-accent);
    font-size: 0.62rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-dimmed);
    font-weight: 300;
}

.cart-month-summary__value {
    font-family: var(--font-accent);
    font-size: var(--fs-button, 0.72rem);
    letter-spacing: 0.12em;
    font-weight: 500;
    color: var(--gold);
    text-transform: uppercase;
}

.cart-month-summary__value.is-empty {
    color: var(--text-muted);
    font-weight: 300;
    font-style: italic;
    letter-spacing: 0.06em;
    text-transform: none;
    font-size: 0.68rem;
}

/* ── Lieferdatum in Checkout-Zusammenfassung ── */
.checkout-delivery-date {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 0;
    border-bottom: 0.5px solid rgba(0, 0, 0, 0.04);
    margin-bottom: 0.6rem;
}

.checkout-delivery-date__label {
    font-family: var(--font-accent);
    font-size: var(--fs-label);
    color: var(--text-dimmed);
    letter-spacing: 0.05em;
    font-weight: 300;
}

.checkout-delivery-date__val {
    font-family: var(--font-accent);
    font-size: var(--fs-label);
    color: var(--gold);
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}


.cart-item__delivery {
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 0.5px solid rgba(196, 161, 105, 0.15);
    border-radius: 2px;
    overflow: hidden;
}

/* ── Einzelne Monatszeile ── */
.cart-item__delivery-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.65rem 0.9rem;
    border-bottom: 0.5px solid rgba(196, 161, 105, 0.08);
    background: rgba(196, 161, 105, 0.02);
    transition: background 0.3s ease;
    gap: 0.75rem;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    position: relative;
}

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

/* Aktiver (ausgewählter) Monat */
.cart-item__delivery-row.is-selected {
    background: rgba(196, 161, 105, 0.07);
    cursor: default;
}

/* Gesperrte Monate */
.cart-item__delivery-row.is-locked {
    opacity: 0.38;
    cursor: not-allowed;
    pointer-events: none;
}

/* Hover nur auf offene (nicht gesperrte, nicht aktive) Zeilen */
@media (hover: hover) and (pointer: fine) {
    .cart-item__delivery-row:not(.is-selected):not(.is-locked):hover {
        background: rgba(196, 161, 105, 0.05);
    }
}

/* ── Info-Bereich (links): Monat + Zahlen ── */
.cart-item__delivery-info {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    flex: 1;
    min-width: 0;
}

.cart-item__delivery-month {
    font-family: var(--font-accent);
    font-size: calc(var(--fs-button, 0.72rem) * 0.85);
    font-weight: 500;
    letter-spacing: 0.1em;
    color: var(--text-secondary);
    white-space: nowrap;
    text-transform: uppercase;
    transition: color 0.3s ease;
}

.cart-item__delivery-row.is-selected .cart-item__delivery-month {
    color: var(--gold);
}

.cart-item__delivery-cap {
    font-family: var(--font-accent);
    font-size: 0.62rem;
    font-weight: 300;
    color: var(--text-dimmed);
    white-space: nowrap;
}

.cart-item__delivery-avail {
    font-family: var(--font-accent);
    font-size: 0.62rem;
    font-weight: 400;
    color: rgba(196, 161, 105, 0.8);
    white-space: nowrap;
    margin-left: auto;
}

/* Urgency-Farbe wenn sehr wenig verfügbar */
.cart-item__delivery-avail.is-urgent {
    color: #c4916a;
    font-weight: 500;
}

/* ── Steuerung (+/− Anzahl, Löschen) ── */
.cart-item__delivery-controls {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.cart-item__delivery-row.is-selected .cart-item__delivery-controls {
    opacity: 1;
    pointer-events: auto;
}

/* Kleiner Mengenknopf */
.cart-month-qty-btn {
    background: transparent;
    border: 0.5px solid rgba(196, 161, 105, 0.2);
    color: var(--gold);
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 300;
    transition: background 0.3s ease, border-color 0.3s ease;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
}

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

.cart-month-qty-btn--trash {
    color: var(--text-muted);
    border-color: rgba(0, 0, 0, 0.08);
    opacity: 0.7;
}

.cart-month-qty-btn--trash svg {
    width: 11px;
    height: 11px;
}

.cart-month-qty-btn--trash:hover {
    color: var(--gold);
    border-color: rgba(196, 161, 105, 0.4);
    opacity: 1;
}

.cart-month-qty-val {
    font-family: var(--font-accent);
    font-size: var(--fs-body-sm);
    color: var(--text-secondary);
    font-weight: 400;
    min-width: 1.2rem;
    text-align: center;
}

/* ── «Wählen» Hint auf nicht-aktiven Zeilen ── */
.cart-item__delivery-hint {
    font-family: var(--font-accent);
    font-size: 0.55rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: rgba(196, 161, 105, 0.5);
    opacity: 0;
    transition: opacity 0.3s ease;
    flex-shrink: 0;
}

@media (hover: hover) and (pointer: fine) {
    .cart-item__delivery-row:not(.is-selected):not(.is-locked):hover .cart-item__delivery-hint {
        opacity: 1;
    }
}

/* ==========================================================
   BEREICH 3: VERSAND (Collapsible Section)
   ========================================================== */
.cart-item__section-shipping {
    margin-top: 0.8rem;
    border: 0.5px solid rgba(196, 161, 105, 0.18);
    border-radius: 2px;
    overflow: hidden;
    background: transparent;
}

.shipping-toggle-btn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 0.8rem 1rem;
    background: transparent;
    border: none;
    cursor: pointer;
    font-family: var(--font-accent);
    font-size: 0.58rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--text-dimmed);
    font-weight: 300;
    transition: background 0.3s ease, color 0.3s ease;
    text-align: left;
    -webkit-tap-highlight-color: transparent;
    min-height: 44px;
    /* Touch-optimierte Mindesthoehe */
}

.shipping-toggle-btn:hover {
    background: rgba(196, 161, 105, 0.04);
    color: var(--gold);
}

.shipping-toggle-arrow {
    color: var(--gold);
    transition: transform 0.38s cubic-bezier(0.16, 1, 0.3, 1);
    opacity: 0.7;
}

.shipping-toggle-btn[aria-expanded="true"] .shipping-toggle-arrow {
    transform: rotate(180deg);
}

.cart-item__shipping-panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.38s cubic-bezier(0.16, 1, 0.3, 1),
        opacity 0.28s ease;
    opacity: 0;
}

.cart-item__shipping-panel.is-open {
    grid-template-rows: 1fr;
    opacity: 1;
}

.cart-item__shipping-panel-inner {
    overflow: hidden;
    padding: 0.6rem 1rem 0.85rem;
    border-top: 0.5px solid rgba(196, 161, 105, 0.12);
    background: rgba(196, 161, 105, 0.02);
}

.cart-item__shipping-panel-inner .cart-item__status-note {
    margin-top: 0.4rem;
}

.cart-item__shipping-panel-inner .cart-item__status-note:first-child {
    margin-top: 0;
}

/* ── Gesamtpreis unter Liefertermin ── */
.cart-item__price-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 2rem !important; /* 2rem Padding für perfekte Flucht mit den restlichen Texten */
    margin: -1.5rem -2rem 1.1rem -2rem !important; /* Zieht den Balken über die volle Breite */
    background: #000000;
    /* 100% schwarz */
    border-top: none !important;
    /* No top border to merge seamlessly */
    border-bottom: 0.5px solid rgba(196, 161, 105, 0.15);
}

.cart-item__price-section .cart-item__qty-summary-label {
    color: #ffffff !important;
    /* Flacon in 100% weiss */
}

.cart-item__price-section .cart-item__qty-summary-num {
    color: var(--gold) !important;
    /* 1 in gold */
}

.cart-item__price-section .currency-chf {
    font-size: 0.8em !important;
    /* 20% smaller than parent 1.15rem */
    color: rgba(255, 255, 255, 0.4) !important;
    /* CHF 40% weiss */
    vertical-align: baseline !important;
}

.cart-item__price-section .cart-item__price {
    font-family: var(--font-accent) !important;
    font-size: 1.15rem !important;
    font-weight: 300 !important;
    letter-spacing: 0.04em !important;
    line-height: 1 !important;
    color: var(--gold) !important;
    /* 180 in gold */
}

.cart-item__price-label {
    font-family: var(--font-accent);
    font-size: 0.68rem;
    letter-spacing: 0.22em;
    color: var(--text-dimmed);
    font-weight: 400;
    text-transform: uppercase;
}

.cart-item__price-left {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

/* ── Cart Modal (Luxury Liquid Slow-Motion Transition) ── */
.cart-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100000;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none;
    visibility: hidden;
    /* On close, delay hiding the wrapper so children can finish fading out over 1.6s */
    transition: visibility 0s linear 1.6s;
}

.cart-modal.is-active {
    pointer-events: auto;
    visibility: visible;
    /* On open, show the wrapper instantly */
    transition: visibility 0s linear 0s;
}

.cart-modal__backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0);
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    /* 1.6s Slow-motion transition for blur and color */
    transition: backdrop-filter 1.6s cubic-bezier(0.16, 1, 0.3, 1), background-color 1.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.cart-modal.is-active .cart-modal__backdrop {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    background-color: rgba(0, 0, 0, 0.3);
    /* Zuvor 30% abdunkeln */
}

.cart-modal__dialog {
    position: relative;
    width: 90%;
    max-width: 480px;
    max-height: 90vh;
    background: #000000;
    border: 1px solid rgba(196, 161, 105, 0.2);
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5);
    z-index: 2;
    opacity: 0;
    /* Transition fuer transform und opacity (1.6s Luxus-Tempo) */
    transition: transform 1.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 1.6s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    will-change: transform, opacity;
    transform-style: preserve-3d;
    backface-visibility: hidden;
    -webkit-font-smoothing: subpixel-antialiased;
}

.cart-modal.is-active .cart-modal__dialog {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
}

.cart-modal__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 2rem;
    border-bottom: 1px solid rgba(196, 161, 105, 0.15);
}

.cart-modal__title {
    font-family: var(--font-accent);
    font-size: 0.85rem;
    font-weight: 400;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: #ffffff;
    margin: 0;
    opacity: 0;
    transform: translate3d(0, 10px, 0);
    transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.3s, opacity 1.2s ease 0.3s;
}

.cart-modal.is-active .cart-modal__title {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

.cart-modal__close {
    background: none;
    border: none;
    color: #ffffff;
    font-family: var(--font-accent);
    font-size: 1.5rem;
    cursor: pointer;
    line-height: 1;
    padding: 0.2rem;
    opacity: 0;
    transform: scale(0.8) translate3d(0, 0, 0);
    transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.5s, opacity 1.2s ease 0.5s, color 0.4s ease;
}

.cart-modal.is-active .cart-modal__close {
    opacity: 1;
    transform: scale(1) translate3d(0, 0, 0);
}

.cart-modal__close:hover {
    color: var(--gold);
    transform: rotate(90deg) scale(1.1);
}

.cart-modal__body {
    padding: 2.5rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    background: #000000;
    gap: 1.5rem;
    overflow-y: auto;
}

.cart-modal__img {
    max-width: 100%;
    max-height: 55vh;
    object-fit: contain;
    filter: drop-shadow(0 15px 35px rgba(0, 0, 0, 0.08));
    display: block;
    will-change: transform;
    transform: translate3d(0, 0, 0);
}

/* --- Spec-Seal Anpassung für das helle Cart-Modal --- */
.cart-modal .spec-seal {
    background: #0d0d0d;
    border: 0.5px solid rgba(196, 161, 105, 0.2);
    border-radius: 0;
    padding: 1.5rem;
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    grid-template-rows: auto auto;
    gap: 1rem 1.5rem;
    margin-top: 1.5rem;
    text-align: left;
    width: 100%;
    box-sizing: border-box;
    opacity: 0;
    transform: translate3d(0, 15px, 0);
    transition: transform 1.4s cubic-bezier(0.16, 1, 0.3, 1) 0.4s, opacity 1.4s ease 0.4s;
}

.cart-modal.is-active .spec-seal {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

.cart-modal .spec-seal__section {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    width: 100%;
}

.cart-modal .spec-seal__section:nth-child(1) {
    grid-column: 1;
    grid-row: 1;
    border-right: 0.5px solid rgba(196, 161, 105, 0.15);
    padding-right: 1.5rem;
}

.cart-modal .spec-seal__section:nth-child(2) {
    grid-column: 2;
    grid-row: 1 / span 2;
    /* Komposition erstreckt sich nach unten */
}

.cart-modal .spec-seal__capacity {
    grid-column: 1;
    grid-row: 2;
    align-self: end;
    justify-self: start;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0.5px solid var(--gold);
    padding: 0.35rem 0.75rem;
    font-family: var(--font-accent), sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    color: #ffffff;
    letter-spacing: 0.05em;
    white-space: nowrap;
    background: var(--gold-dark);
    border-radius: 2px;
    margin-top: 0.5rem;
}

.cart-modal .spec-seal__heading {
    display: flex;
    align-items: center;
    width: 100%;
    margin-bottom: 0.6rem;
}

.cart-modal .spec-seal__label {
    font-family: var(--font-accent);
    font-size: var(--fs-legal);
    letter-spacing: 0.25em;
    color: var(--gold);
    text-transform: uppercase;
    font-weight: 500;
}

.cart-modal .spec-seal__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    width: 100%;
}

.cart-modal .spec-seal__list li {
    padding-left: 0;
    margin: 0;
}

.cart-modal .spec-seal__list li::before {
    content: none;
    display: none;
}

.cart-modal .spec-seal__item {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    font-family: var(--font-accent);
    font-size: var(--fs-spec);
    font-weight: 300;
    color: #ffffff;
    letter-spacing: 0.04em;
    line-height: 1.4;
    width: 100%;
}

.cart-modal .spec-seal__item--bold {
    font-weight: 600;
}

.cart-modal .spec-seal__marker {
    display: inline-block;
    width: 0.6rem;
    height: 0.6rem;
    background: transparent;
    border: 2px solid var(--gold);
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 0.35rem;
    font-size: 0px !important;
    /* Versteckt das Diamanten-Zeichen visuell falls vorhanden */
}

.cart-modal .spec-seal__text {
    color: #ffffff;
    opacity: 1;
    /* Sofort sichtbar */
    transform: none;
}

/* Mobile-Optimierung für das Spec-Seal im Modal */
@media (max-width: 47.99rem) {
    .cart-modal .spec-seal {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
        gap: 1.5rem;
        padding: 1rem;
    }

    .cart-modal .spec-seal__section:nth-child(1) {
        grid-column: 1;
        grid-row: auto;
        border-right: none;
        padding-right: 0;
        border-bottom: 0.5px solid rgba(196, 161, 105, 0.2);
        padding-bottom: 1rem;
    }

    .cart-modal .spec-seal__section:nth-child(2) {
        grid-column: 1;
        grid-row: auto;
        border-bottom: none;
        padding-bottom: 0;
    }

    .cart-modal .spec-seal__capacity {
        grid-column: 1;
        grid-row: auto;
        margin-top: 0.5rem;
        align-self: flex-start;
    }
}

/* --- Kundenspezifische Warenkorb-Anpassungen --- */

/* 1. Warenkorb-Footer (sowohl Mobile als auch Desktop):
   Der Footer (Reservieren & Zurück) wird in den Scroll-Flow integriert,
   sodass er erst nach den Artikeln erscheint und scrollbar ist.
   Bei vielen Artikeln ist er initial nicht sichtbar und muss hergescrollt werden. */
#stageCart {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
}

#stageCart .drawer-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 100 !important;
    background: #000000 !important;
    flex-shrink: 0 !important;
}

#stageCart .drawer-content {
    flex: none !important;
    min-height: auto !important;
    overflow-y: visible !important;
    padding-bottom: 0 !important;
}

#stageCart .drawer-footer {
    position: relative !important;
    bottom: auto !important;
    z-index: 10 !important;
    background: var(--ivory) !important;
    flex-shrink: 0 !important;
    margin-top: auto !important;
    padding-bottom: calc(2rem + env(safe-area-inset-bottom, 0px)) !important;
    border-top: none !important;
}

/* 2. Oberer Bereich des Warenkorbs (Hintergrund schwarz, Text gold, Schließen weiß) */
#stageCart .drawer-header {
    background: #000000 !important;
}

#stageCart .drawer-title {
    color: var(--gold) !important;
}

#stageCart .drawer-close {
    color: #ffffff !important;
}

#stageCart .drawer-close:hover {
    color: var(--gold) !important;
}

/* 3. Oberer Bereich des Checkouts (Hintergrund schwarz, Text gold, Pfeil/Schließen weiß) */
#stageCheckout .drawer-header {
    background: #000000 !important;
}

#stageCheckout .drawer-title {
    color: var(--gold) !important;
}

#stageCheckout .btn-back,
#stageCheckout .drawer-close {
    color: #ffffff !important;
}

#stageCheckout .btn-back:hover,
#stageCheckout .drawer-close:hover {
    color: var(--gold) !important;
}

/* 4. Oberer Bereich der Erfolgsseite (Hintergrund schwarz, Text gold, Schließen weiß) */
#stageSuccess .drawer-header {
    background: #000000 !important;
}

#stageSuccess .drawer-title {
    color: var(--gold) !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
}

#stageSuccess .drawer-close {
    color: #ffffff !important;
}

#stageSuccess .drawer-close:hover {
    color: var(--gold) !important;
}

/* 5. Erfolgsseite Content & Animationen */
.success-content {
    background: var(--ivory);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

.success-message-wrapper {
    padding: 3rem 2rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
}

.success-icon-container {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 1px solid var(--gold);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2rem;
    background: rgba(196, 161, 105, 0.05);
    box-shadow: 0 0 15px rgba(196, 161, 105, 0.1);
}

.success-check-icon {
    width: 30px;
    height: 30px;
    color: var(--gold);
    stroke-dasharray: 50;
    stroke-dashoffset: 0;
    animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

@keyframes stroke {
    100% {
        stroke-dashoffset: 0;
    }
}

.success-title {
    font-family: var(--font-accent);
    font-size: 1.4rem;
    font-weight: 300;
    letter-spacing: 0.2em;
    color: var(--text-secondary);
    margin: 0 0 1rem;
}

.success-subtitle {
    font-family: var(--font-accent);
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    color: var(--text-dimmed);
    margin: 0 0 2rem;
    text-transform: uppercase;
}

.success-details-box {
    width: 100%;
    border: 1px solid rgba(196, 161, 105, 0.2);
    background: rgba(196, 161, 105, 0.03);
    padding: 1.5rem;
    margin-bottom: 2rem;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.success-details-title {
    font-family: var(--font-accent);
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    color: var(--gold);
    text-transform: uppercase;
    border-bottom: 1px solid rgba(196, 161, 105, 0.15);
    padding-bottom: 0.4rem;
    margin-bottom: 0.2rem;
}

.success-details-text {
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--text-secondary);
}

.success-details-highlight {
    font-family: monospace;
    font-size: 0.8rem;
    background: rgba(0, 0, 0, 0.05);
    padding: 0.4rem 0.6rem;
    border-radius: 2px;
    margin-top: 0.4rem;
    display: inline-block;
    word-break: break-all;
    color: var(--text-secondary);
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.success-note {
    font-size: 0.7rem;
    color: var(--text-dimmed);
    line-height: 1.5;
    max-width: 80%;
    margin-top: auto;
}

.drawer-footer.success-footer {
    padding: 2rem;
    border-top: 0.5px solid rgba(0, 0, 0, 0.05);
    background: transparent;
}

.drawer-footer.success-footer::before {
    display: none;
}

.btn-success-done {
    width: 100%;
    height: var(--btn-height-premium);
    background: var(--gold);
    color: #ffffff;
    border: none;
    font-family: var(--font-accent);
    font-size: var(--fs-btn);
    font-weight: 400;
    letter-spacing: var(--ls-btn);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color var(--transition-premium), color var(--transition-premium), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow: hidden;
}

.btn-success-done:hover {
    background: var(--gold-dark);
}

/* --- Edge-to-Edge Mobile Cart & Success Overrides --- */
@media (max-width: 47.99rem) {

    /* Erfolgsseite Detailbox edge-to-edge */
    .success-details-box {
        margin-left: -2rem !important;
        margin-right: -2rem !important;
        border-left: none !important;
        border-right: none !important;
        border-radius: 0 !important;
        padding-left: 2rem !important;
        padding-right: 2rem !important;
    }

    /* Drawer unter dem Nav positionieren */
    .drawer {
        top: var(--nav-height) !important;
        height: calc(100dvh - var(--nav-height)) !important;
    }
}

/* Header über dem Drawer einblenden, wenn geöffnet (nur auf Mobile nötig, auf Desktop überlagert der Drawer die Nav-Leiste) */
@media (max-width: 47.99rem) {
    body.drawer-open .header {
        z-index: 3200 !important;
    }
}

@media (min-width: 48rem) {

    /* Keep nav bar below the drawer on desktop when open */
    body.drawer-open .header {
        z-index: 1000 !important;
    }

    /* Drawer-Header Reset auf Desktop */
    .drawer-header {
        padding: 0 !important;
        min-height: auto !important;
        background: transparent !important;
        position: relative !important;
    }

    /* Der Balken mit dem Wort WARENKORB (IHRE AUSWAHL) exakt so hoch wie der NAV Balken */
    .drawer-header__top {
        background: #000000 !important;
        height: var(--nav-height) !important;
        padding: 0 2rem !important;
        box-sizing: border-box !important;
        display: flex !important;
        align-items: center !important;
        position: relative !important;
    }

    /* Schwebender Procession bar darunter */
    .drawer-progress {
        background: rgba(0, 0, 0, 0.9) !important;
        -webkit-backdrop-filter: blur(1.25rem) !important;
        backdrop-filter: blur(1.25rem) !important;
        padding: 1.25rem 2rem !important;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important;
        border-bottom: 1px solid rgba(196, 161, 105, 0.2) !important;
        z-index: 10 !important;
        margin: 0 !important;
    }
}

/* ──────────────────────────────────────────────────────────
   MOBILE STACKED CHECKOUT: Checkout unter Warenkorb auf Mobile
   ────────────────────────────────────────────────────────── */
@media (max-width: 47.99rem) {

    /* Wenn im Checkout, wird der ganze Drawer scrollbar */
    .drawer.is-checkout {
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scroll-behavior: smooth;
    }

    /* Slider auf Spalten-Layout umstellen */
    .drawer.is-checkout .drawer-slider {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        height: auto !important;
        transform: none !important;
    }

    /* Stufen untereinander stapeln und strecken */
    .drawer.is-checkout .drawer-stage {
        width: 100% !important;
        height: auto !important;
        min-height: auto !important;
        display: flex !important;
        flex-shrink: 0 !important;
    }

    /* Scrollbars der einzelnen Stufen entfernen, da der Drawer scrollt */
    .drawer.is-checkout #stageCart,
    .drawer.is-checkout #stageCheckout {
        overflow-y: visible !important;
        height: auto !important;
    }

    /* Abstandhalter unter Checkout einfügen für besseres Scroll-Erlebnis */
    .drawer.is-checkout #stageCheckout::after {
        content: '';
        display: block;
        height: 25vh !important;
    }

    /* Checkout-Header klebrig machen (unter dem Nav) */
    .drawer.is-checkout #stageCheckout .drawer-header {
        position: sticky !important;
        top: 0 !important;
        z-index: 100 !important;
        background: #000000 !important;
        flex-shrink: 0 !important;
    }
}

/* ── Valentina Nummern-Auswahl-Grid ── */
.valentina-delivery-section {
    padding: 1.5rem 0 1rem;
    border-top: 1px solid rgba(196, 161, 105, 0.15);
    margin-top: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    contain: content;
}

.valentina-delivery-desc {
    font-family: var(--font-accent);
    font-size: clamp(0.7rem, 1.8vw, 0.8rem);
    font-weight: 300;
    color: rgba(253, 252, 248, 0.6);
    letter-spacing: 0.05em;
    line-height: 1.5;
    margin: 0;
}

/* 20% Verkleinerung durch Erhöhung der Grid-Spalten auf 8 (Desktop) */
.valentina-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 0.35rem;
    width: 100%;
    margin-top: 0.5rem;
}

/* 20% Verkleinerung durch Erhöhung der Grid-Spalten auf 9 (Mobile) */
@media (max-width: 30rem) {
    .valentina-grid {
        grid-template-columns: repeat(9, 1fr);
        gap: 0.25rem;
    }
}

/* Freie Nummern: Hintergrund Gold, weiße Schrift, Serifenschrift, gerundete Ecken */
.valentina-num-btn {
    aspect-ratio: 1;
    border-radius: 4px;
    border: 1px solid var(--gold);
    background: var(--gold);
    color: var(--white);
    font-family: var(--font-editorial), var(--font-accent), serif;
    font-size: clamp(0.85rem, 2.2vw, 1.05rem);
    font-weight: 300;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    -webkit-tap-highlight-color: transparent;
    outline: none;
}

.valentina-num-btn:focus-visible {
    border-color: var(--white);
    box-shadow: 0 0 0 2px rgba(196, 161, 105, 0.4);
}

@media (hover: hover) and (pointer: fine) {
    .valentina-num-btn:not(:disabled):hover {
        border-color: var(--white);
        background: var(--gold-dark);
        color: var(--white);
        transform: scale(1.08);
    }
}

.valentina-num-btn:not(:disabled):active {
    transform: scale(0.95);
}

/* Ausgewählt: Invertiert (Dunkler Obsidian-Hintergrund, goldener Rand, goldene Schrift mit Glow) */
.valentina-num-btn.is-selected {
    background: var(--obsidian) !important;
    border-color: var(--gold) !important;
    color: var(--gold) !important;
    font-weight: 600;
    box-shadow: 0 4px 15px rgba(196, 161, 105, 0.6);
    transform: scale(1.05);
    animation: goldPulse 2s infinite ease-in-out;
}

@keyframes goldPulse {

    0%,
    100% {
        box-shadow: 0 4px 12px rgba(196, 161, 105, 0.4);
    }

    50% {
        box-shadow: 0 4px 20px rgba(196, 161, 105, 0.8);
    }
}

/* Reserviert: 40% dunkler, nicht mehr anwählbar */
.valentina-num-btn.is-reserved {
    border-color: rgba(253, 252, 248, 0.05) !important;
    background: rgba(0, 0, 0, 0.35) !important;
    color: rgba(253, 252, 248, 0.25) !important;
    cursor: not-allowed;
    font-weight: 300;
    opacity: 0.4 !important;
}

/* --- Pixel-an-Pixel Ausrichtung des ersten Produkts an die Unterkante des Headers --- */
#stageCart .drawer-content {
    padding-top: 0 !important;
}

#stageCart .cart-item:first-child {
    padding-top: 0 !important;
}

#stageCart .cart-item:first-child .cart-item__main {
    margin-top: 0 !important;
}