/* CS² v25.17.4 - Mini-Cart & Checkout Styles */
/* Font loaded via wp_enqueue_style in PHP — do not duplicate with @import */

:root {
    --cs2-bg: #0a0a0a;
    --cs2-surface: rgba(255,255,255,0.02);
    --cs2-border: rgba(255,255,255,0.06);
    --cs2-text: #fff;
    --cs2-muted: rgba(255,255,255,0.5);
    --cs2-primary: #1c7d9d;
    --cs2-primary-light: #2a9bc4;
    --cs2-success: #4CAF50;
    --cs2-gold: #ffc20e;
    --cs2-purple: #7f1b53;
    --cs2-font: 'Rajdhani', system-ui, sans-serif;
}

* { box-sizing: border-box; }

/* BUG-005 FIX: iOS requires position:fixed + stored scroll to prevent background scroll */
body.cs2-open { 
    overflow: hidden !important; 
    position: fixed !important;
    width: 100% !important;
    /* JS sets --cs2-scroll-y to preserve scroll position */
    top: calc(-1 * var(--cs2-scroll-y, 0px)) !important;
}

/* BUG-006 FIX: Eliminate 300ms tap delay on all interactive elements */
.cs2-drawer button,
.cs2-drawer [data-action],
.cs2-checkout-btn,
.cs2-qty-btn,
.cs2-membership,
.cs2-back,
.cs2-close {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

/* ============================================================================
   THEME CART/CHECKOUT TAKEOVER
   CS2 drawer is the ONLY cart/checkout experience
   All theme mini-carts and WooCommerce cart widgets are hidden
   ============================================================================ */

/* WooCommerce default cart widgets - HIDE */
.widget_shopping_cart,
.widget_shopping_cart_content,
.woocommerce-mini-cart,
.woocommerce.widget_shopping_cart,
.woocommerce-mini-cart-item,

/* Theme mini-cart dropdowns - HIDE */
.mini-cart-dropdown,
.cart-dropdown,
.cart-popup,
.cart-widget,
.minicart,
.mini_cart,
.header-mini-cart,
.site-header-cart .widget_shopping_cart,

/* Salient theme specific - HIDE */
.nectar-woo-cart .widget_shopping_cart,
.slide-out-widget-area .widget_shopping_cart,
.nectar-slide-out-cart,
.off-canvas-menu-container .widget_shopping_cart,
.nectar-quick-cart,
.nectar-quick-cart-wrapper,
.slide-out-widget-area .cart_list,

/* Common theme patterns - HIDE */
.cart-contents-wrapper,
.header-cart-dropdown,
.cart-overlay,
.cart-modal,
.ajax-cart-dropdown,
.cart-panel,
.side-cart,
.offcanvas-cart,

/* WooCommerce cart fragments - HIDE */
.woocommerce-mini-cart__empty-message,
.woocommerce-mini-cart__buttons,
.woocommerce-mini-cart__total,

/* Elementor cart widgets - HIDE */
.elementor-menu-cart__container,
.elementor-menu-cart--shown .elementor-menu-cart__wrapper,
.elementor-menu-cart__products {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* Keep cart icon visible but our JS intercepts all clicks */
/* Cart count badges updated by our JS after sync */

/* ============================================================================
   BACKDROP
   ============================================================================ */
.cs2-backdrop {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.7);
    backdrop-filter: blur(8px);
    opacity: 0; visibility: hidden;
    transition: opacity 250ms ease, visibility 250ms ease;
    z-index: 999998;
}
.cs2-backdrop.open { opacity: 1; visibility: visible; }

/* ============================================================================
   DRAWER
   ============================================================================ */
.cs2-drawer {
    position: fixed; top: 0; right: 0; bottom: 0;
    width: min(420px, 100vw);
    background: var(--cs2-bg);
    transform: translateX(100%);
    transition: transform 280ms cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 999999;
    display: flex; flex-direction: column;
    font-family: var(--cs2-font);
    color: var(--cs2-text);
    box-shadow: -8px 0 40px rgba(0,0,0,0.6);
    overflow: hidden;
}
.cs2-drawer.open { transform: translateX(0); }
.cs2-drawer-inner { display: flex; flex-direction: column; height: 100%; overflow: hidden; }

/* ============================================================================
   HEADER
   ============================================================================ */
.cs2-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid var(--cs2-border);
    flex-shrink: 0;
    background: rgba(0,0,0,0.3);
}
.cs2-back {
    background: transparent; border: none;
    color: var(--cs2-muted); font-size: 13px; font-weight: 600;
    cursor: pointer; display: flex; align-items: center; gap: 6px;
    font-family: var(--cs2-font);
}
.cs2-back:hover { color: var(--cs2-text); }
.cs2-header-logo { height: var(--cs2-header-logo-height, 40px); width: auto; }
.cs2-close {
    background: rgba(255,255,255,0.06); border: none;
    width: 32px; height: 32px; border-radius: 50%;
    cursor: pointer; color: white; font-size: 16px;
    display: flex; align-items: center; justify-content: center;
}
.cs2-close:hover { background: rgba(255,255,255,0.1); }

/* ============================================================================
   SCROLLABLE CONTENT
   ============================================================================ */
.cs2-content {
    flex: 1; 
    overflow-y: auto; 
    display: flex; 
    flex-direction: column;
    padding-bottom: 16px;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

/* ============================================================================
   STACK AREA - Grows with content, no fixed constraints
   Container height adjusts based on box height setting
   ============================================================================ */
.cs2-stack-area {
    min-height: var(--cs2-stack-container-height, 400px);
    padding: var(--cs2-stack-padding, 20px);
    margin-top: var(--cs2-header-gap, 0px);
    display: flex; 
    align-items: center; 
    justify-content: center;
    background: linear-gradient(180deg, rgba(0,0,0,0.2) 0%, transparent 100%);
    flex-shrink: 0;
    overflow: hidden;
}

@media (max-width: 600px) {
    .cs2-stack-area {
        min-height: max(280px, calc(var(--cs2-stack-box-height, 240px) + 60px));
        margin-top: var(--cs2-mobile-header-gap, var(--cs2-header-gap, 0px));
    }
}

.cs2-stack-empty {
    font-size: 12px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 2px;
    color: var(--cs2-muted); text-align: center;
    opacity: 0.6;
}
.cs2-stack-big {
    text-align: center;
}
.cs2-stack-num {
    display: block;
    font-size: 100px; font-weight: 700; line-height: 1;
    background: linear-gradient(135deg, var(--cs2-primary), var(--cs2-purple), var(--cs2-gold));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
}
@media (max-width: 600px) {
    .cs2-stack-num { font-size: 72px; }
}
.cs2-stack-label {
    font-size: 16px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 4px;
    color: var(--cs2-muted); margin-top: 8px;
}
.cs2-stack-boxes {
    position: relative;
    min-height: calc(var(--cs2-stack-box-height, 240px) + 20px);
    width: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    /* v25.18.5: Removed overflow:hidden — parent .cs2-stack-area already clips.
       Double overflow:hidden was eating absolutely-positioned children on mobile. */
}

/* Stack box container - created by JS */
.cs2-stack-box {
    position: absolute;
    bottom: 0;
    transform-origin: bottom center;
    filter: drop-shadow(0 8px 24px rgba(0,0,0,0.5));
    /* Animation only applied via .cs2-box-new class */
}
.cs2-stack-box.cs2-box-new {
    animation: cs2-box-pop 300ms ease-out forwards;
}
/* v25.18.5: !important overrides Salient/Nectar/theme global img rules
   (height:auto!important, max-width:100%) which zeroed out image dimensions */
.cs2-stack-box img {
    display: block !important;
    object-fit: contain !important;
    border-radius: 8px;
    width: var(--cs2-stack-box-width, 180px) !important;
    height: var(--cs2-stack-box-height, 240px) !important;
    max-width: none !important;
    max-height: none !important;
}
.cs2-stack-placeholder {
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 24px;
    font-weight: 700;
    width: var(--cs2-stack-box-width, 180px);
    height: var(--cs2-stack-box-height, 240px);
}

/* v25.18.5: NUCLEAR IMAGE OVERRIDE
   Scoped to #cs2-drawer for maximum specificity (ID + class + tag = 111)
   This beats common theme rules like `body img { height: auto !important }`
   because ID selectors outrank any number of class/element selectors. */
#cs2-drawer .cs2-stack-box img,
#cs2-drawer .cs2-box img,
#cs2-drawer .cs2-stack-box img.skip-lazy,
#cs2-drawer .cs2-stack-box img.no-lazy {
    max-width: none !important;
    max-height: none !important;
    object-fit: contain !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Empty state - show message, hide boxes area */
.cs2-stack-area.empty .cs2-stack-boxes {
    display: none;
}
.cs2-stack-area.empty .cs2-stack-empty {
    display: block;
}

/* Has items - hide message, show boxes */
.cs2-stack-area:not(.empty) .cs2-stack-empty {
    display: none;
}
.cs2-stack-area:not(.empty) .cs2-stack-boxes {
    display: flex;
}

.cs2-box {
    position: absolute;
    bottom: 10px;
    transform-origin: bottom center;
    filter: drop-shadow(0 6px 20px rgba(0,0,0,0.5));
    /* Animation only applied via .cs2-box-new class */
}
.cs2-box.cs2-box-new {
    animation: cs2-box-pop 300ms ease-out forwards;
}
.cs2-box img {
    width: var(--cs2-stack-box-width, 180px) !important;
    height: var(--cs2-stack-box-height, 240px) !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: contain !important;
    display: block !important;
}
.cs2-box-fallback {
    background: linear-gradient(135deg, var(--color, #1c7d9d), color-mix(in srgb, var(--color, #1c7d9d) 70%, #000));
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    color: white; font-weight: 700; font-size: 18px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
@keyframes cs2-box-pop {
    0% { opacity: 0; transform: scale(0.6) translateY(30px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}

/* ============================================================================
   PROGRESS BAR - Matching JSX Screenshot
   ============================================================================ */
.cs2-progress-section {
    padding: 20px 16px;
    background: rgba(0,0,0,0.25);
    flex-shrink: 0;
    margin-top: var(--cs2-section-gap, 0px);
}

.cs2-progress-msg {
    font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 1.5px;
    text-align: center; margin-bottom: 16px;
    color: var(--cs2-progress-text-color, var(--cs2-muted));
}
.cs2-progress-msg.unlocked { color: var(--cs2-success); }

/* Animated number in progress message */
.cs2-progress-number {
    display: inline-block;
    font-size: 22px; /* 2x the base 11px */
    line-height: 1;
    vertical-align: middle;
    color: var(--cs2-progress-number-color, #ffc20e);
    text-shadow: 0 0 8px var(--cs2-progress-number-color, #ffc20e);
    animation: cs2-number-pulse 2s ease-in-out infinite;
    transition: transform 0.15s ease-out;
}

/* Subtle pulsing glow */
@keyframes cs2-number-pulse {
    0%, 100% { text-shadow: 0 0 8px var(--cs2-progress-number-color, #ffc20e); }
    50% { text-shadow: 0 0 16px var(--cs2-progress-number-color, #ffc20e), 0 0 24px var(--cs2-progress-number-color, #ffc20e); }
}

/* Number change animation - triggered via JS */
.cs2-progress-number.cs2-number-pop {
    animation: cs2-number-change 0.6s ease-out forwards;
}

@keyframes cs2-number-change {
    0% { 
        transform: scale(1);
        text-shadow: 0 0 8px var(--cs2-progress-number-color, #ffc20e);
    }
    15% { 
        transform: scale(1.5);
        text-shadow: 0 0 30px var(--cs2-progress-number-color, #ffc20e), 
                     0 0 50px var(--cs2-progress-number-color, #ffc20e),
                     0 0 70px var(--cs2-progress-number-color, #ffc20e);
    }
    100% { 
        transform: scale(1);
        text-shadow: 0 0 8px var(--cs2-progress-number-color, #ffc20e);
    }
}

/* Hide number when unlocked */
.cs2-progress-msg.unlocked .cs2-progress-number {
    display: none;
}

.cs2-progress-track {
    position: relative;
    height: 70px;
    max-width: 320px;
    margin: 0 auto;
    padding: 0 30px;
}

/* Track background line */
.cs2-progress-line,
.cs2-progress-track::before {
    content: '';
    position: absolute;
    top: 12px;
    left: 30px;
    right: 30px;
    height: 3px;
    background: rgba(255,255,255,0.15);
    border-radius: 2px;
}

/* Progress fill - uses CSS calc for accurate positioning */
.cs2-progress-fill {
    position: absolute;
    top: 12px;
    left: 30px;
    height: 3px;
    width: 0;
    max-width: calc(100% - 60px);
    background: linear-gradient(90deg, var(--cs2-primary), var(--cs2-primary-light));
    border-radius: 2px;
    transition: width 400ms ease;
    z-index: 1;
}

/* Moving logo */
.cs2-progress-logo {
    position: absolute;
    top: 0;
    left: 30px;
    transform: translateX(-50%);
    transition: left 400ms ease;
    z-index: 30;
}
.cs2-progress-logo img {
    width: var(--cs2-progress-logo-size, 32px);
    height: var(--cs2-progress-logo-size, 32px);
    border-radius: 50%;
    border: 3px solid var(--cs2-bg);
    box-shadow: 0 2px 10px rgba(0,0,0,0.5);
    background: var(--cs2-bg);
}
.cs2-progress-logo-fallback {
    width: var(--cs2-progress-logo-size, 32px);
    height: var(--cs2-progress-logo-size, 32px);
    border-radius: 50%;
    background: var(--cs2-primary);
    border: 3px solid var(--cs2-bg);
    display: flex; align-items: center; justify-content: center;
    font-size: 10px; font-weight: 700; color: #fff;
}

/* Milestones - positioned absolutely within track using consistent left-based positioning */
.cs2-milestone {
    position: absolute;
    top: 0;
    text-align: center;
    z-index: 10;
    transform: translateX(-50%);
}

/* All milestones use left positioning for consistency with JS logo movement */
.cs2-milestone[data-step="1"] { left: 30px; }
.cs2-milestone[data-step="2"] { left: calc(50%); }
.cs2-milestone[data-step="3"] { left: calc(100% - 30px); }

.cs2-milestone-dot {
    width: 26px; height: 26px;
    border-radius: 50%;
    margin: 0 auto;
    background: rgba(255,255,255,0.08);
    border: 2px solid rgba(255,255,255,0.2);
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 700;
    color: rgba(255,255,255,0.5);
    transition: all 300ms ease;
}

.cs2-milestone.active .cs2-milestone-dot,
.cs2-milestone.complete .cs2-milestone-dot {
    background: var(--cs2-primary);
    border-color: var(--cs2-primary);
    color: #fff;
    box-shadow: 0 0 12px rgba(28, 125, 157, 0.5);
}

.cs2-milestone-label {
    margin-top: 6px;
    font-size: 10px; font-weight: 700;
    color: rgba(255,255,255,0.4);
    text-transform: uppercase; letter-spacing: 0.5px;
    white-space: nowrap;
}
.cs2-milestone.active .cs2-milestone-label,
.cs2-milestone.complete .cs2-milestone-label { 
    color: var(--cs2-primary); 
}

/* ============================================================================
   PRODUCT STEPPERS
   ============================================================================ */
.cs2-products {
    padding: 12px 16px;
    display: flex; flex-direction: column; 
    gap: var(--cs2-product-list-gap, 12px);
}
.cs2-product-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 12px;
    background: rgba(255,255,255,0.02);
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.04);
    transition: all 300ms ease;
}
.cs2-product-row.has-qty {
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.1);
}
.cs2-product-row.member-glow {
    border-color: rgba(255, 194, 14, 0.5);
    box-shadow: 0 0 15px rgba(255, 194, 14, 0.12), inset 0 0 30px rgba(255, 194, 14, 0.02);
}
.cs2-product-icon {
    width: var(--cs2-icon-width, 36px);
    height: var(--cs2-icon-height, 48px);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.cs2-product-icon img { max-width: 100%; max-height: 100%; object-fit: contain; }
.cs2-product-info {
    flex: 1; margin-left: 10px;
}
.cs2-product-name {
    font-size: 13px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.3px;
    color: var(--cs2-muted);
}
.cs2-product-row.has-qty .cs2-product-name { color: var(--cs2-text); }
.cs2-product-subtitle {
    font-size: 10px;
    color: var(--cs2-muted);
    opacity: 0.7;
    margin-top: 1px;
    text-transform: none;
    letter-spacing: 0;
}
.cs2-product-price {
    font-size: 12px; font-weight: 600;
    display: flex; align-items: center; gap: 6px;
}
.cs2-price-amount { color: var(--cs2-muted); }
.cs2-price-amount.member-price { color: var(--cs2-gold); }
.cs2-price-amount.sub-price { color: var(--cs2-success); }
.cs2-price-amount.both-price { color: var(--cs2-primary); }
.cs2-price-savings {
    font-size: 10px; color: var(--cs2-success); font-weight: 700;
}
.cs2-product-controls {
    display: flex; align-items: center; gap: 6px;
}
.cs2-qty-btn {
    width: 32px; height: 32px;
    border: none; border-radius: 8px;
    background: rgba(255,255,255,0.06);
    color: #fff; font-size: 18px; font-weight: 600;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all 150ms ease;
    font-family: system-ui;
}
.cs2-qty-btn:hover:not(:disabled) { background: rgba(255,255,255,0.1); }
.cs2-qty-btn:disabled { opacity: 0.3; cursor: not-allowed; }
.cs2-qty-num {
    min-width: 28px; text-align: center;
    font-size: 16px; font-weight: 700;
}

/* ============================================================================
   SUBSCRIBE TOGGLE
   ============================================================================ */
.cs2-subscribe {
    margin: 12px 16px;
    padding: 14px 16px;
    display: flex; align-items: center; justify-content: space-between;
    background: rgba(76,175,80,0.06);
    border: 1px solid rgba(76,175,80,0.15);
    border-radius: 12px;
    transition: all 300ms ease;
}
.cs2-subscribe.active {
    background: rgba(76,175,80,0.1);
    border-color: rgba(76,175,80,0.4);
}
.cs2-subscribe.disabled { opacity: 0.4; pointer-events: none; }
.cs2-subscribe-title {
    font-size: 14px; font-weight: 700;
    color: var(--cs2-success);
}
.cs2-subscribe-savings {
    font-size: 12px; color: var(--cs2-muted);
}
.cs2-toggle-switch {
    position: relative;
    width: 48px; height: 26px;
}
.cs2-toggle-switch input {
    opacity: 0; width: 0; height: 0;
}
.cs2-toggle-slider {
    position: absolute; inset: 0;
    background: rgba(255,255,255,0.1);
    border-radius: 13px;
    cursor: pointer;
    transition: all 200ms ease;
}
.cs2-toggle-slider::before {
    content: '';
    position: absolute;
    top: 3px; left: 3px;
    width: 20px; height: 20px;
    background: #fff;
    border-radius: 50%;
    transition: transform 200ms ease;
}
.cs2-toggle-switch input:checked + .cs2-toggle-slider {
    background: var(--cs2-success);
}
.cs2-toggle-switch input:checked + .cs2-toggle-slider::before {
    transform: translateX(22px);
}

/* ============================================================================
   MEMBERSHIP BUTTON - In content area, NOT footer
   ============================================================================ */
.cs2-membership {
    margin: 8px 16px 16px;
    padding: var(--cs2-membership-btn-padding, 16px);
    border-radius: 12px;
    cursor: pointer;
    transition: all 300ms ease;
    text-align: center;
}

.cs2-membership.cs2-membership-cta {
    background: linear-gradient(135deg, rgba(255,194,14,0.08) 0%, rgba(127,27,83,0.08) 100%);
    border: 1px dashed var(--cs2-membership-btn-border, rgba(255,194,14,0.3));
}
.cs2-membership.cs2-membership-cta:hover {
    background: linear-gradient(135deg, rgba(255,194,14,0.12) 0%, rgba(127,27,83,0.12) 100%);
    border-color: var(--cs2-membership-btn-text-color, rgba(255,194,14,0.5));
}
.cs2-membership.cs2-membership-cta.disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.cs2-membership.cs2-membership-active {
    background: linear-gradient(135deg, rgba(255,194,14,0.15), rgba(127,27,83,0.1));
    border: 1px solid var(--cs2-membership-btn-border, rgba(255,194,14,0.4));
}

.cs2-membership-emoji {
    font-size: 24px;
    margin-right: 8px;
    vertical-align: middle;
}
.cs2-membership-text {
    font-size: var(--cs2-membership-btn-font-size, 14px);
    font-weight: 700;
    color: var(--cs2-membership-btn-text-color, var(--cs2-gold));
}

/* Membership active state content */
.cs2-membership-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}
.cs2-membership-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    color: var(--cs2-gold);
}
.cs2-membership-logo {
    width: var(--cs2-membership-logo-size, 52px);
    height: var(--cs2-membership-logo-size, 52px);
    border-radius: 50%;
    border: 2px solid var(--cs2-gold);
}
.cs2-membership-price {
    font-size: 18px;
    font-weight: 700;
    color: var(--cs2-gold);
}
.cs2-membership-benefits {
    font-size: 12px;
    color: var(--cs2-muted);
    margin-bottom: 10px;
}
.cs2-membership-remove {
    background: none;
    border: none;
    color: var(--cs2-muted);
    font-size: 12px;
    cursor: pointer;
    text-decoration: underline;
    font-family: var(--cs2-font);
}
.cs2-membership-remove:hover {
    color: #e74c3c;
}

/* ============================================================================
   TOTALS SECTION - Below membership button (moved from footer)
   ============================================================================ */
.cs2-totals-section {
    margin: 0 16px 16px;
    padding: 12px 16px;
    background: rgba(0,0,0,0.2);
    border-radius: 10px;
    border: 1px solid var(--cs2-border);
}
.cs2-totals-section .cs2-total-row {
    display: flex;
    justify-content: space-between;
    padding: 5px 0;
    font-size: 13px;
    color: var(--cs2-muted);
}
.cs2-totals-section .cs2-total-row span:last-child {
    font-weight: 600;
    color: var(--cs2-text);
}

/* ============================================================================
   SUBSCRIBE & SAVE TOGGLE
   ============================================================================ */
.cs2-subscribe-toggle {
    margin: 0 16px 16px;
    padding: 14px 16px;
    background: rgba(16,185,129,0.06);
    border: 1px solid rgba(16,185,129,0.2);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    transition: all 200ms ease;
}
.cs2-subscribe-toggle.active {
    background: rgba(16,185,129,0.12);
    border-color: rgba(16,185,129,0.4);
}
.cs2-subscribe-info {
    flex: 1;
    min-width: 0;
}
.cs2-subscribe-label {
    font-size: 14px;
    font-weight: 700;
    color: var(--cs2-success);
    line-height: 1.3;
}
.cs2-subscribe-subtitle {
    font-size: 11px;
    color: var(--cs2-muted);
    margin-top: 2px;
}

/* Toggle switch */
.cs2-toggle-switch {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 26px;
    flex-shrink: 0;
    cursor: pointer;
}
.cs2-toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}
.cs2-toggle-slider {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(255,255,255,0.15);
    border-radius: 26px;
    transition: all 200ms ease;
}
.cs2-toggle-slider::before {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    left: 3px;
    bottom: 3px;
    background: #fff;
    border-radius: 50%;
    transition: all 200ms ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
.cs2-toggle-switch input:checked + .cs2-toggle-slider {
    background: var(--cs2-success);
}
.cs2-toggle-switch input:checked + .cs2-toggle-slider::before {
    transform: translateX(22px);
}

/* ============================================================================
   FOOTER - Just checkout button now
   ============================================================================ */
.cs2-footer {
    padding: 16px;
    background: rgba(0,0,0,0.4);
    border-top: 1px solid var(--cs2-border);
    flex-shrink: 0;
}

.cs2-totals {
    margin-bottom: 12px;
}
.cs2-total-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    font-size: 14px;
    color: var(--cs2-muted);
}
.cs2-total-row span:last-child {
    font-weight: 600;
    color: var(--cs2-text);
}

.cs2-checkout-btn {
    width: 100%;
    padding: 16px 24px;
    border: none;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--cs2-primary), var(--cs2-primary-light));
    color: #fff;
    font-family: var(--cs2-font);
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 200ms ease;
}
.cs2-checkout-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(28,125,157,0.4);
}
.cs2-checkout-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: rgba(255,255,255,0.1);
}
.cs2-checkout-btn.cs2-checkout-empty {
    justify-content: center;
    background: rgba(255,255,255,0.1);
}
.cs2-checkout-label {
    font-size: 14px;
}
.cs2-checkout-total {
    font-size: 18px;
}

/* ============================================================================
   CHECKOUT DRAWER
   ============================================================================ */
.cs2-checkout-backdrop {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.85);
    backdrop-filter: blur(10px);
    opacity: 0; visibility: hidden;
    transition: opacity 300ms ease, visibility 300ms ease;
    z-index: 1000000;
}
.cs2-checkout-backdrop.open { opacity: 1; visibility: visible; }

.cs2-checkout-drawer {
    position: fixed; inset: 0;
    background: var(--cs2-bg);
    transform: translateY(100%);
    transition: transform 350ms cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1000001;
    display: flex; flex-direction: column;
    font-family: var(--cs2-font);
    color: var(--cs2-text);
}
.cs2-checkout-drawer.open { transform: translateY(0); }
.cs2-checkout-drawer-inner { display: flex; flex-direction: column; height: 100%; }

.cs2-checkout-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 20px;
    background: rgba(0,0,0,0.4);
    border-bottom: 1px solid var(--cs2-border);
    flex-shrink: 0;
}
.cs2-checkout-back {
    background: transparent; border: none;
    color: var(--cs2-muted); font-size: 13px; font-weight: 600;
    cursor: pointer; font-family: var(--cs2-font);
}
.cs2-checkout-back:hover { color: var(--cs2-text); }
.cs2-checkout-close {
    background: rgba(255,255,255,0.06); border: none;
    width: 32px; height: 32px; border-radius: 50%;
    cursor: pointer; color: white; font-size: 16px;
    display: flex; align-items: center; justify-content: center;
}
.cs2-checkout-close:hover { background: rgba(255,255,255,0.1); }

.cs2-checkout-body {
    flex: 1; overflow-y: auto; padding: 0;
    position: relative;
}

/* Checkout iframe - full height and width */
#cs2-checkout-iframe {
    width: 100%;
    height: 100%;
    min-height: 600px;
    border: none;
    background: #0a0a0a;
    display: block;
}

/* Loading overlay while iframe loads */
.cs2-checkout-body .cs2-checkout-loading {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    background: var(--cs2-surface);
}

.cs2-checkout-loading {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    height: 200px; color: var(--cs2-muted);
}
.cs2-spinner {
    width: 40px; height: 40px;
    border: 3px solid rgba(255,255,255,0.1);
    border-top-color: var(--cs2-primary);
    border-radius: 50%;
    animation: cs2-spin 800ms linear infinite;
}
@keyframes cs2-spin { to { transform: rotate(360deg); } }

/* ============================================================================
   TOAST - Minimal Notifications
   ============================================================================ */
.cs2-toast-container {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000010;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
}

.cs2-toast {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px 10px 12px;
    background: rgba(15, 23, 42, 0.95);
    color: rgba(255,255,255,0.9);
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    box-shadow: 0 4px 20px rgba(0,0,0,0.25);
    backdrop-filter: blur(10px);
    animation: cs2-toast-in 250ms ease;
    border-left: 3px solid var(--cs2-primary);
}

.cs2-toast::before {
    content: '✓';
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    background: var(--cs2-primary);
    border-radius: 50%;
    font-size: 10px;
    flex-shrink: 0;
}

.cs2-toast.success {
    border-left-color: var(--cs2-success);
}
.cs2-toast.success::before {
    background: var(--cs2-success);
}

.cs2-toast.error {
    border-left-color: #ef4444;
}
.cs2-toast.error::before {
    content: '✕';
    background: #ef4444;
}

.cs2-toast.info {
    border-left-color: #3b82f6;
}
.cs2-toast.info::before {
    content: 'i';
    background: #3b82f6;
    font-style: italic;
    font-weight: 600;
}

@keyframes cs2-toast-in {
    from { 
        opacity: 0; 
        transform: translateY(8px) scale(0.96); 
    }
    to { 
        opacity: 1; 
        transform: translateY(0) scale(1); 
    }
}

@keyframes cs2-toast-out {
    from { 
        opacity: 1; 
        transform: translateY(0) scale(1); 
    }
    to { 
        opacity: 0; 
        transform: translateY(-4px) scale(0.96); 
    }
}

/* ============================================================================
   CONFETTI ANIMATION
   Celebrates free shipping unlock
   ============================================================================ */
.cs2-confetti-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 999999;
}

.cs2-confetti-particle {
    position: absolute;
    will-change: transform, opacity;
    pointer-events: none;
}

/* ============================================================================
   RESPONSIVE ADJUSTMENTS
   ============================================================================ */
@media (max-width: 600px) {
    .cs2-drawer {
        width: 100vw;
    }
    
    .cs2-stack-area {
        min-height: var(--cs2-mobile-stack-container-height, 280px);
        height: auto;
        /* v25.18.5: Removed max-height:40vh — was clipping stack images on short viewports.
           The drawer scrolls anyway, so let the stack take the space it needs. */
        padding: var(--cs2-mobile-stack-padding, 16px);
        margin-top: var(--cs2-mobile-header-gap, var(--cs2-header-gap, 0px));
    }
    
    /* v25.17.7: Use mobile CSS variables for box sizes */
    .cs2-stack-boxes {
        min-height: calc(var(--cs2-mobile-stack-box-height, 180px) + 20px);
    }
    
    .cs2-box img {
        width: var(--cs2-mobile-stack-box-width, 140px);
        height: var(--cs2-mobile-stack-box-height, 180px);
    }
    
    .cs2-stack-box img {
        width: var(--cs2-mobile-stack-box-width, 140px) !important;
        height: var(--cs2-mobile-stack-box-height, 180px) !important;
    }
    
    .cs2-stack-placeholder {
        width: var(--cs2-mobile-stack-box-width, 140px);
        height: var(--cs2-mobile-stack-box-height, 180px);
    }
    
    .cs2-box img {
        width: var(--cs2-mobile-stack-box-width, 140px) !important;
        height: var(--cs2-mobile-stack-box-height, 180px) !important;
        max-width: none !important;
        max-height: none !important;
    }
    
    .cs2-progress-track {
        max-width: 280px;
        padding: 0 24px;
    }
    
    .cs2-progress-track::before,
    .cs2-progress-fill {
        left: 24px;
        right: 24px;
    }
    
    /* Mobile milestone positions - consistent with 24px padding */
    .cs2-milestone[data-step="1"] { left: 24px; }
    .cs2-milestone[data-step="3"] { left: calc(100% - 24px); }
    
    .cs2-milestone-label {
        font-size: 9px;
    }
    
    .cs2-product-row {
        padding: 8px 10px;
    }
    
    .cs2-product-name {
        font-size: 12px;
    }
    
    .cs2-qty-btn {
        width: 28px;
        height: 28px;
        font-size: 16px;
    }
}

/* ============================================================================
   UTILITIES
   ============================================================================ */
.cs2-hidden { display: none !important; }

/* ============================================================================
   CHECKOUT DRAWER - Matches og-checkout-sc2.jsx layout
   Uses REAL WooCommerce checkout markup, restyled to match JSX design
   Section order: Contact > Delivery > Billing Toggle > Shipping > Payment
   ============================================================================ */

/* Checkout Wrapper */
.cs2-checkout-wrapper {
    font-family: 'Rajdhani', system-ui, sans-serif;
    color: #fff;
    padding: 0;
}
.cs2-checkout-wrapper a { color: #1c7d9d; text-decoration: none; }
.cs2-checkout-wrapper a:hover { text-decoration: underline; }

/* Two-Column Layout - Forms Left, Summary+Payment Right - FULLSCREEN */
.cs2-checkout-layout {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 100%;
}

@media (min-width: 900px) {
    .cs2-checkout-layout {
        flex-direction: row;
        gap: 0;
    }
    .cs2-checkout-forms {
        flex: 1;
        order: 1;
        padding: 40px 48px;
        overflow-y: auto;
    }
    .cs2-checkout-sidebar {
        width: 380px;
        min-width: 380px;
        order: 2;
        padding: 32px 28px;
        border-left: 1px solid rgba(255,255,255,0.08);
        background: rgba(0,0,0,0.3);
        overflow-y: auto;
    }
}

@media (min-width: 1200px) {
    .cs2-checkout-forms {
        padding: 48px 64px;
    }
    .cs2-checkout-sidebar {
        width: 400px;
        min-width: 400px;
        padding: 36px 32px;
    }
}

/* Form content centered with reasonable max-width - FULL WIDTH */
.cs2-checkout-forms .woocommerce-checkout {
    width: 100%;
    max-width: 100%;
}

/* Make billing/shipping field wrappers full width */
.cs2-checkout-wrapper .woocommerce-billing-fields,
.cs2-checkout-wrapper .woocommerce-shipping-fields {
    width: 100%;
    max-width: 100%;
}

@media (max-width: 899px) {
    .cs2-checkout-forms {
        padding: 32px 24px;
        order: 2;
    }
    .cs2-checkout-sidebar {
        padding: 24px;
        order: 1;
        border-bottom: 1px solid rgba(255,255,255,0.1);
        background: rgba(0,0,0,0.2);
    }
}

/* Hide WooCommerce's order review in forms - we use sidebar */
.cs2-checkout-wrapper #order_review_heading,
.cs2-checkout-wrapper .woocommerce-checkout-review-order-table {
    display: none !important;
}

/* Payment Container in Sidebar */
.cs2-payment-container {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid rgba(255,255,255,0.1);
}

.cs2-payment-container #payment {
    margin: 0 !important;
    padding: 0 !important;
}

/* ============================================================================
   EXPRESS CHECKOUT SECTION - Stripe Payment Request Buttons
   ============================================================================ */

.cs2-express-checkout {
    margin-bottom: 32px;
}

.cs2-express-title {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
    font-size: 11px;
    color: rgba(255,255,255,0.4);
    text-transform: uppercase;
    letter-spacing: 2px;
}

.cs2-express-title::before,
.cs2-express-title::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(255,255,255,0.1);
}

/* Stripe Payment Request wrapper styling */
.cs2-checkout-wrapper #wc-stripe-payment-request-wrapper,
.cs2-checkout-wrapper .wc-stripe-payment-request-button-wrapper {
    margin-bottom: 24px;
}

/* Or Divider */
.cs2-checkout-divider {
    display: flex;
    align-items: center;
    gap: 20px;
    margin: 32px 0;
    font-size: 12px;
    color: rgba(255,255,255,0.3);
    text-transform: uppercase;
    letter-spacing: 2px;
}

.cs2-checkout-divider::before,
.cs2-checkout-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(255,255,255,0.1);
}

/* ============================================================================
   WOOCOMMERCE CHECKOUT FORM OVERRIDES - JSX Match
   ============================================================================ */

/* Overall Form */
.cs2-checkout-wrapper .woocommerce-checkout {
    color: #fff;
}

/* Section Cards - each major section gets proper spacing */
.cs2-checkout-wrapper .woocommerce-billing-fields,
.cs2-checkout-wrapper .woocommerce-shipping-fields,
.cs2-checkout-wrapper .woocommerce-additional-fields,
.cs2-checkout-wrapper #order_review {
    margin-bottom: 40px;
}

/* Hide login/coupon prompts - cleaner checkout */
.cs2-checkout-wrapper .woocommerce-form-login-toggle,
.cs2-checkout-wrapper .woocommerce-form-coupon-toggle,
.cs2-checkout-wrapper .woocommerce-form-login,
.cs2-checkout-wrapper .woocommerce-form-coupon {
    display: none !important;
}

/* Style any notices that slip through */
.cs2-checkout-wrapper .woocommerce-info {
    background: rgba(28,125,157,0.1) !important;
    border: 1px solid rgba(28,125,157,0.2) !important;
    border-radius: 10px !important;
    padding: 16px 20px !important;
    margin-bottom: 24px !important;
    color: rgba(255,255,255,0.8) !important;
    font-size: 14px !important;
}

.cs2-checkout-wrapper .woocommerce-message {
    background: rgba(16,185,129,0.1) !important;
    border: 1px solid rgba(16,185,129,0.2) !important;
    border-radius: 10px !important;
    padding: 16px 20px !important;
    margin-bottom: 24px !important;
    color: #10b981 !important;
    font-size: 14px !important;
}

/* Billing/Shipping Field Wrappers - Full Width Grid Layout */
.cs2-checkout-wrapper .woocommerce-billing-fields__field-wrapper,
.cs2-checkout-wrapper .woocommerce-shipping-fields__field-wrapper,
.cs2-checkout-wrapper .woocommerce-additional-fields__field-wrapper {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 20px 24px !important;
    width: 100% !important;
}

/* All form rows take full grid width by default */
.cs2-checkout-wrapper .form-row {
    grid-column: 1 / -1 !important;
    width: 100% !important;
}

/* First/Last name side by side */
.cs2-checkout-wrapper #billing_first_name_field,
.cs2-checkout-wrapper #billing_last_name_field,
.cs2-checkout-wrapper #shipping_first_name_field,
.cs2-checkout-wrapper #shipping_last_name_field {
    grid-column: span 1 !important;
}

/* City and State side by side */
.cs2-checkout-wrapper #billing_city_field,
.cs2-checkout-wrapper #billing_state_field,
.cs2-checkout-wrapper #shipping_city_field,
.cs2-checkout-wrapper #shipping_state_field {
    grid-column: span 1 !important;
}

/* Postcode alone - full width */
.cs2-checkout-wrapper #billing_postcode_field,
.cs2-checkout-wrapper #shipping_postcode_field {
    grid-column: 1 / -1 !important;
}

/* Select2 container full width */
.cs2-checkout-wrapper .select2-container {
    width: 100% !important;
}

@media (max-width: 700px) {
    .cs2-checkout-wrapper .woocommerce-billing-fields__field-wrapper,
    .cs2-checkout-wrapper .woocommerce-shipping-fields__field-wrapper {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
    
    .cs2-checkout-wrapper .form-row,
    .cs2-checkout-wrapper #billing_first_name_field,
    .cs2-checkout-wrapper #billing_last_name_field,
    .cs2-checkout-wrapper #billing_city_field,
    .cs2-checkout-wrapper #billing_state_field,
    .cs2-checkout-wrapper #billing_postcode_field,
    .cs2-checkout-wrapper #billing_phone_field {
        grid-column: 1 / -1 !important;
    }
}

/* Form Rows - Reset WooCommerce margins */
.cs2-checkout-wrapper .form-row {
    margin: 0 !important;
    padding: 0 !important;
}

/* Labels - Clean modern style */
.cs2-checkout-wrapper label {
    display: block;
    color: rgba(255,255,255,0.6);
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.cs2-checkout-wrapper label .required {
    color: #1c7d9d;
}
.cs2-checkout-wrapper label .optional {
    color: rgba(255,255,255,0.35);
    font-size: 10px;
    text-transform: lowercase;
    margin-left: 4px;
}

/* Input Fields - Spacious and clean */
.cs2-checkout-wrapper input[type="text"],
.cs2-checkout-wrapper input[type="email"],
.cs2-checkout-wrapper input[type="tel"],
.cs2-checkout-wrapper input[type="password"],
.cs2-checkout-wrapper input[type="number"],
.cs2-checkout-wrapper select,
.cs2-checkout-wrapper textarea {
    width: 100% !important;
    padding: 16px 18px !important;
    background: rgba(255,255,255,0.04) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    border-radius: 10px !important;
    color: #fff !important;
    font-family: 'Rajdhani', sans-serif !important;
    font-size: 16px !important;
    transition: border-color 0.2s ease, background 0.2s ease !important;
}

.cs2-checkout-wrapper input:focus,
.cs2-checkout-wrapper select:focus,
.cs2-checkout-wrapper textarea:focus {
    outline: none !important;
    border-color: #1c7d9d !important;
    background: rgba(28,125,157,0.05) !important;
}

.cs2-checkout-wrapper input::placeholder,
.cs2-checkout-wrapper textarea::placeholder {
    color: rgba(255,255,255,0.3) !important;
}

/* Select2 Dropdowns */
.cs2-checkout-wrapper .select2-container--default .select2-selection--single {
    background: rgba(255,255,255,0.04) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    border-radius: 10px !important;
    height: 54px !important;
}
.cs2-checkout-wrapper .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 54px !important;
    padding-left: 18px !important;
    color: #fff !important;
    font-size: 16px !important;
}
.cs2-checkout-wrapper .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 52px !important;
    right: 12px !important;
}
.cs2-checkout-wrapper .select2-dropdown {
    background: #0d1117 !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    border-radius: 10px !important;
    margin-top: 4px !important;
}
.cs2-checkout-wrapper .select2-results__option {
    color: #fff !important;
    padding: 14px 18px !important;
}
.cs2-checkout-wrapper .select2-results__option--highlighted {
    background: rgba(28,125,157,0.3) !important;
}

/* Section Headers - Clean modern style */
.cs2-checkout-wrapper h3,
.cs2-checkout-wrapper .woocommerce-billing-fields > h3,
.cs2-checkout-wrapper .woocommerce-shipping-fields > h3,
.cs2-checkout-wrapper .woocommerce-additional-fields > h3 {
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin: 0 0 28px;
    padding: 0;
    border: none;
    color: #fff;
}

/* ============================================================================
   SHIP TO DIFFERENT ADDRESS TOGGLE - Spacious Toggle Card
   ============================================================================ */

.cs2-checkout-wrapper #ship-to-different-address {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 20px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    cursor: pointer;
    margin: 32px 0 0;
    transition: all 0.2s ease;
}

.cs2-checkout-wrapper #ship-to-different-address:hover {
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.12);
}

.cs2-checkout-wrapper #ship-to-different-address label {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 0;
    cursor: pointer;
    font-size: 15px;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    color: rgba(255,255,255,0.9);
}

/* Toggle switch styling */
.cs2-checkout-wrapper #ship-to-different-address input[type="checkbox"] {
    position: relative !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 52px !important;
    height: 28px !important;
    background: rgba(255,255,255,0.12) !important;
    border-radius: 14px !important;
    border: none !important;
    padding: 0 !important;
    cursor: pointer !important;
    transition: background 0.2s ease !important;
    flex-shrink: 0;
}

.cs2-checkout-wrapper #ship-to-different-address input[type="checkbox"]::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 22px;
    height: 22px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.2s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.cs2-checkout-wrapper #ship-to-different-address input[type="checkbox"]:checked {
    background: #1c7d9d !important;
}

.cs2-checkout-wrapper #ship-to-different-address input[type="checkbox"]:checked::after {
    transform: translateX(24px);
}

/* Shipping address fields - Card style with animation */
.cs2-checkout-wrapper .shipping_address {
    overflow: hidden;
    padding: 28px;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 12px;
    margin-top: 20px;
}

@keyframes cs2SlideDown {
    from {
        opacity: 0;
        max-height: 0;
        padding-top: 0;
        padding-bottom: 0;
        margin-top: 0;
    }
    to {
        opacity: 1;
        max-height: 600px;
        padding-top: 20px;
        padding-bottom: 20px;
        margin-top: 16px;
    }
}

@keyframes cs2SlideUp {
    from {
        opacity: 1;
        max-height: 600px;
    }
    to {
        opacity: 0;
        max-height: 0;
        padding-top: 0;
        padding-bottom: 0;
        margin-top: 0;
    }
}

/* ============================================================================
   SHIPPING METHODS - Card Style Options
   ============================================================================ */

.cs2-checkout-wrapper .woocommerce-shipping-methods {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cs2-checkout-wrapper .woocommerce-shipping-methods li {
    padding: 0 !important;
    margin: 0 !important;
}

.cs2-checkout-wrapper .woocommerce-shipping-methods label {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 16px 18px !important;
    background: rgba(255,255,255,0.02) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 10px !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    margin: 0 !important;
    font-size: 15px !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

.cs2-checkout-wrapper .woocommerce-shipping-methods label:hover {
    background: rgba(255,255,255,0.04) !important;
}

.cs2-checkout-wrapper .woocommerce-shipping-methods input:checked + label,
.cs2-checkout-wrapper .woocommerce-shipping-methods li:has(input:checked) label {
    border-color: #1c7d9d !important;
    background: rgba(28,125,157,0.08) !important;
}

/* Payment Section */
.cs2-checkout-wrapper #payment {
    margin-top: 32px;
    padding-top: 0;
    border-top: none;
}

.cs2-checkout-wrapper #payment > h3,
.cs2-checkout-wrapper .wc_payment_methods_heading {
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px;
    color: #fff;
}

.cs2-checkout-wrapper .payment-secure-note {
    font-size: 12px;
    color: rgba(255,255,255,0.5);
    margin-bottom: 16px;
}

.cs2-checkout-wrapper .wc_payment_methods {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 20px !important;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cs2-checkout-wrapper .wc_payment_method {
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
}

.cs2-checkout-wrapper .wc_payment_method > label {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 16px 18px !important;
    background: rgba(255,255,255,0.02) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 10px !important;
    font-size: 15px !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    color: #fff !important;
    cursor: pointer !important;
    margin: 0 !important;
    transition: all 0.15s ease !important;
}

.cs2-checkout-wrapper .wc_payment_method > label:hover {
    background: rgba(255,255,255,0.04) !important;
}

.cs2-checkout-wrapper .wc_payment_method:has(input:checked) > label,
.cs2-checkout-wrapper .wc_payment_method.payment_method_selected > label {
    border-color: #1c7d9d !important;
    background: rgba(28,125,157,0.08) !important;
    border-radius: 10px 10px 0 0 !important;
}

/* Payment method radio buttons */
.cs2-checkout-wrapper .wc_payment_method input[type="radio"] {
    width: 20px !important;
    height: 20px !important;
    accent-color: #1c7d9d !important;
    flex-shrink: 0;
}

/* Payment box (card fields container) */
.cs2-checkout-wrapper .payment_box {
    padding: 20px !important;
    margin: 0 !important;
    background: rgba(0,0,0,0.3) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-top: none !important;
    border-radius: 0 0 10px 10px !important;
    color: rgba(255,255,255,0.7) !important;
    font-size: 13px !important;
}

/* Stripe Elements */
.cs2-checkout-wrapper .wc-stripe-elements-field,
.cs2-checkout-wrapper .StripeElement,
.cs2-checkout-wrapper #stripe-card-element,
.cs2-checkout-wrapper .wc-stripe-iban-element-field {
    background: rgba(255,255,255,0.03) !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    border-radius: 8px !important;
    padding: 14px 16px !important;
}
.cs2-checkout-wrapper .wc-stripe-elements-field:focus-within,
.cs2-checkout-wrapper .StripeElement--focus {
    border-color: #1c7d9d !important;
    background: rgba(28,125,157,0.05) !important;
}

/* Card icons in payment label */
.cs2-checkout-wrapper .wc_payment_method > label img {
    height: 20px;
    margin-left: auto;
}

/* Order Review Table - hidden in drawer, using sidebar instead */
.cs2-checkout-wrapper .woocommerce-checkout-review-order-table {
    display: none;
}

/* Place Order Button - Prominent CTA */
.cs2-checkout-wrapper #place_order {
    width: 100% !important;
    padding: 20px 28px !important;
    background: linear-gradient(135deg, #1c7d9d 0%, #2596be 100%) !important;
    border: none !important;
    border-radius: 12px !important;
    color: #fff !important;
    font-family: 'Rajdhani', sans-serif !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    margin-top: 28px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    box-shadow: 0 4px 20px rgba(28,125,157,0.3) !important;
}
.cs2-checkout-wrapper #place_order:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 30px rgba(28,125,157,0.45) !important;
}
.cs2-checkout-wrapper #place_order:disabled {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
    transform: none !important;
    box-shadow: none !important;
}

/* Terms & Conditions - Checkbox Style */
.cs2-checkout-wrapper .woocommerce-terms-and-conditions-wrapper {
    margin: 24px 0 8px;
}

.cs2-checkout-wrapper .woocommerce-terms-and-conditions-checkbox-text {
    font-size: 13px;
    color: rgba(255,255,255,0.7);
}

.cs2-checkout-wrapper .woocommerce-terms-and-conditions-wrapper a {
    color: #1c7d9d;
}

.cs2-checkout-wrapper .woocommerce-form__label-for-checkbox {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    cursor: pointer !important;
    font-size: 13px !important;
    color: rgba(255,255,255,0.7) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    margin: 0 !important;
}

.cs2-checkout-wrapper .woocommerce-form__label-for-checkbox input[type="checkbox"] {
    width: 18px !important;
    height: 18px !important;
    flex-shrink: 0 !important;
    margin-top: 2px !important;
    accent-color: #1c7d9d !important;
}

/* Error Messages */
.cs2-checkout-wrapper .woocommerce-error,
.cs2-checkout-wrapper .woocommerce-NoticeGroup-checkout,
.cs2-checkout-wrapper .woocommerce-message {
    padding: 16px 20px !important;
    margin: 0 0 20px !important;
    background: rgba(231,76,60,0.1) !important;
    border: 1px solid rgba(231,76,60,0.3) !important;
    border-radius: 10px !important;
    color: #e74c3c !important;
    font-size: 14px !important;
    list-style: none !important;
}
.cs2-checkout-wrapper .woocommerce-message {
    background: rgba(76,175,80,0.1) !important;
    border-color: rgba(76,175,80,0.3) !important;
    color: #4CAF50 !important;
}

/* Loading Overlay */
.cs2-checkout-wrapper .blockUI.blockOverlay {
    background: #000 !important;
    opacity: 0.85 !important;
}

/* Hide unwanted elements */
.cs2-checkout-wrapper .woocommerce-privacy-policy-text,
.cs2-checkout-wrapper .woocommerce-privacy-policy-link {
    font-size: 12px;
    color: rgba(255,255,255,0.4);
    margin-top: 12px;
}

/* Remove "Your purchase is protected" and similar copy */
.cs2-checkout-wrapper .purchase-protected,
.cs2-checkout-wrapper .money-back-guarantee,
.cs2-checkout-wrapper [class*="protected"],
.cs2-checkout-wrapper [class*="guarantee"] {
    display: none !important;
}

/* ============================================================================
   CHECKOUT SIDEBAR STYLES
   ============================================================================ */

.cs2-sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.cs2-sidebar-title {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

.cs2-sidebar-count {
    font-size: 11px;
    background: rgba(255,255,255,0.1);
    padding: 4px 10px;
    border-radius: 10px;
}

/* Sidebar Items */
.cs2-sidebar-items {
    margin-bottom: 14px;
}

.cs2-sidebar-item {
    display: flex;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
.cs2-sidebar-item:last-child {
    border-bottom: none;
}

.cs2-item-image {
    width: 52px;
    height: 52px;
    border-radius: 8px;
    overflow: hidden;
    background: rgba(255,255,255,0.05);
    flex-shrink: 0;
    border-left: 3px solid var(--item-color, transparent);
}
.cs2-item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cs2-item-details {
    flex: 1;
}

.cs2-item-name {
    font-weight: 600;
    margin-bottom: 2px;
    font-size: 13px;
}

.cs2-item-meta {
    font-size: 11px;
    color: rgba(255,255,255,0.5);
}

.cs2-item-price {
    text-align: right;
    font-weight: 700;
    font-size: 14px;
}

/* Membership Item */
.cs2-item-membership {
    background: linear-gradient(90deg, rgba(255,194,14,0.1), transparent);
    margin: 0 -10px;
    padding: 10px 10px;
    border-radius: 10px;
    border: 1px solid rgba(255,194,14,0.2);
}
.cs2-item-membership .cs2-item-name {
    color: #ffc20e;
}
.cs2-item-membership .cs2-item-image {
    border-left-color: #ffc20e;
}

/* Sidebar Totals - Tighter spacing */
.cs2-sidebar-totals {
    padding-top: 16px;
    border-top: 1px solid rgba(255,255,255,0.1);
}

.cs2-total-line {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    font-size: 13px;
    color: rgba(255,255,255,0.6);
}

.cs2-total-line.cs2-savings {
    color: #4CAF50;
}

.cs2-total-line.cs2-total-grand {
    padding-top: 12px;
    margin-top: 8px;
    border-top: 1px solid rgba(255,255,255,0.1);
    font-size: 15px;
    font-weight: 700;
    color: #fff;
}

.cs2-grand-value {
    font-size: 22px;
    color: #1c7d9d;
}

.cs2-free {
    color: #4CAF50;
}

.cs2-sidebar-help {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
    padding: 14px 0 0;
    border-top: 1px solid rgba(255,255,255,0.06);
    font-size: 11px;
    color: rgba(255,255,255,0.4);
    gap: 16px;
    flex-wrap: wrap;
}

.cs2-sidebar-help span,
.cs2-sidebar-help a {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.cs2-sidebar-help a {
    color: rgba(255,255,255,0.5);
    text-decoration: none;
    transition: color 0.2s;
}

.cs2-sidebar-help a:hover {
    color: #1c7d9d;
}

/* Make sure sidebar content fills properly */
.cs2-checkout-sidebar {
    display: flex;
    flex-direction: column;
}

.cs2-checkout-sidebar .cs2-sidebar-content {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.cs2-checkout-sidebar .cs2-payment-container {
    margin-top: auto;
}

/* ==========================================================================
   TASK 4: Free Shipping Unlocked Background Layer
   ========================================================================== */

.cs2-free-ship-bg {
    position: absolute;
    top: -10%;
    left: -10%;
    right: -10%;
    bottom: -10%;
    width: 120%;
    height: 120%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    pointer-events: none;
    z-index: 0;
    transform-origin: center center;
    /* No transition - state changes are controlled via animation */
}

/* Continuous Ken Burns animation while free shipping is unlocked */
@keyframes cs2-ken-burns {
    0% { 
        transform: scale(1) translate(0, 0);
    }
    25% {
        transform: scale(1.08) translate(-1%, -1%);
    }
    50% {
        transform: scale(1.05) translate(1%, 0%);
    }
    75% {
        transform: scale(1.1) translate(-0.5%, 1%);
    }
    100% { 
        transform: scale(1) translate(0, 0);
    }
}

/* Show and animate when free shipping is unlocked */
.cs2-drawer.cs2-free-ship-unlocked .cs2-free-ship-bg {
    opacity: var(--cs2-free-ship-bg-opacity, 0.3);
    animation: cs2-ken-burns 20s ease-in-out infinite;
}

/* Immediate hide when not unlocked - no lingering */
.cs2-drawer:not(.cs2-free-ship-unlocked) .cs2-free-ship-bg {
    opacity: 0 !important;
    animation: none !important;
}

/* Ensure content stays above background */
.cs2-drawer-inner {
    position: relative;
    z-index: 1;
}

/* Initial reveal animation when first unlocked (plays once, then Ken Burns takes over) */
@keyframes cs2-free-ship-celebrate {
    0% { 
        opacity: 0; 
        transform: scale(1.15);
    }
    50% { 
        opacity: calc(var(--cs2-free-ship-bg-opacity, 0.3) * 1.3); 
        transform: scale(1.05);
    }
    100% { 
        opacity: var(--cs2-free-ship-bg-opacity, 0.3); 
        transform: scale(1);
    }
}

.cs2-drawer.cs2-free-ship-just-unlocked .cs2-free-ship-bg {
    animation: cs2-free-ship-celebrate 1.2s ease-out forwards, cs2-ken-burns 20s ease-in-out 1.2s infinite;
}

/* Progress bar success state styling */
.cs2-progress-section.cs2-free-ship-achieved .cs2-progress-fill {
    background: linear-gradient(90deg, var(--cs2-success-color, #10b981), #34d399);
    box-shadow: 0 0 12px var(--cs2-success-color, #10b981);
}

.cs2-progress-section.cs2-free-ship-achieved .cs2-progress-msg {
    color: var(--cs2-success-color, #10b981);
    font-weight: 600;
}

/* ============================================================================
   MOBILE MINI-CART DRAWER - DYNAMIC SIZING
   Ensures drawer fits within viewport, no body scrollbars
   ============================================================================ */
@media (max-width: 600px) {
    /* Prevent body scroll when drawer is open */
    body.cs2-drawer-open {
        overflow: hidden !important;
        position: fixed !important;
        width: 100% !important;
        height: 100% !important;
    }
    
    /* Drawer takes full width on mobile */
    .cs2-drawer {
        width: 100vw;
        max-width: 100vw;
        height: 100vh;
        height: 100dvh; /* Dynamic viewport height for mobile browsers */
        max-height: 100vh;
        max-height: 100dvh;
        /* Override desktop CSS variables with mobile values */
        --cs2-stack-box-width: var(--cs2-mobile-stack-box-width, 140px);
        --cs2-stack-box-height: var(--cs2-mobile-stack-box-height, 180px);
        --cs2-stack-container-height: var(--cs2-mobile-stack-container-height, 280px);
        --cs2-header-gap: var(--cs2-mobile-header-gap, 0px);
        --cs2-stack-padding: var(--cs2-mobile-stack-padding, 16px);
        --cs2-section-gap: var(--cs2-mobile-section-gap, 0px);
        --cs2-product-list-gap: var(--cs2-mobile-product-list-gap, 10px);
    }
    
    .cs2-drawer-inner {
        height: 100%;
        max-height: 100vh;
        max-height: 100dvh;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }
    
    /* Header - compact on mobile */
    .cs2-header {
        padding: 12px 14px;
        flex-shrink: 0;
    }
    .cs2-header-logo {
        height: 28px !important;
    }
    .cs2-back {
        font-size: 12px;
    }
    .cs2-close {
        width: 28px;
        height: 28px;
        font-size: 14px;
    }
    
    /* Content area - scrollable, takes remaining space */
    .cs2-content {
        flex: 1;
        min-height: 0; /* Important for flex children to shrink */
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 12px;
    }
    
    /* Stack area - uses mobile CSS variables from admin */
    .cs2-stack-area {
        min-height: var(--cs2-mobile-stack-container-height, var(--cs2-stack-container-height, 280px));
        /* v25.18.5: No max-height — drawer scrolls, let stack take the space it needs */
        padding: var(--cs2-stack-padding, 16px) !important;
        flex-shrink: 1;
    }
    
    .cs2-stack-boxes {
        min-height: calc(var(--cs2-mobile-stack-box-height, 180px) + 20px);
        /* v25.18.5: Removed max-height:30vh — was clipping absolute-positioned children */
    }
    
    /* v25.18.5: Mobile box sizing — use admin-configured mobile dimensions.
       Previous rules had width:auto!important / height:auto!important which 
       zeroed out images before load, making them invisible. */
    .cs2-stack-box img {
        /* Inline styles from JS provide the primary sizing.
           These CSS rules serve as fallback, NOT override. */
        object-fit: contain;
    }
    
    /* Progress section - compact */
    .cs2-progress-section {
        padding: 14px !important;
        flex-shrink: 0;
    }
    .cs2-progress-msg {
        font-size: 10px !important;
        margin-bottom: 12px !important;
    }
    .cs2-progress-track {
        height: 60px !important;
        max-width: 280px !important;
    }
    
    /* Product list - compact rows */
    .cs2-products {
        padding: 10px 14px !important;
        gap: 8px !important;
    }
    .cs2-product-row {
        padding: 8px 10px !important;
    }
    .cs2-product-name {
        font-size: 12px !important;
    }
    .cs2-product-price {
        font-size: 11px !important;
    }
    .cs2-qty-btn {
        width: 28px !important;
        height: 28px !important;
        font-size: 16px !important;
    }
    .cs2-qty-num {
        font-size: 14px !important;
        min-width: 24px !important;
    }
    
    /* Membership card - compact */
    .cs2-membership {
        margin: 10px 14px !important;
        padding: 12px !important;
    }
    .cs2-membership-title {
        font-size: 13px !important;
    }
    .cs2-membership-subtitle {
        font-size: 11px !important;
    }
    
    /* Footer - compact and sticky */
    .cs2-footer {
        padding: 12px 14px !important;
        flex-shrink: 0;
    }
    
    /* Totals row - tighter */
    .cs2-totals-row {
        padding: 3px 0 !important;
        font-size: 12px !important;
    }
    .cs2-totals-row.total {
        font-size: 15px !important;
    }
    
    /* Checkout button - appropriate size */
    .cs2-checkout-btn {
        padding: 12px 20px !important;
        font-size: 13px !important;
    }
    
    /* Subscribe toggle - compact */
    .cs2-subscribe {
        margin: 10px 14px !important;
        padding: 10px 12px !important;
    }
    .cs2-subscribe-text {
        font-size: 11px !important;
    }
}

/* Even smaller screens */
@media (max-width: 380px) {
    .cs2-stack-area {
        /* v25.18.5: Removed max-height:30vh — let the content flow naturally */
        padding: 12px !important;
    }
    .cs2-stack-box img {
        /* v25.18.5: No !important — let JS inline styles control sizing */
        max-width: 40vw;
        max-height: 25vh;
    }
    .cs2-progress-track {
        max-width: 240px !important;
    }
    .cs2-product-row {
        padding: 6px 8px !important;
    }
}

/* ============================================================================
   OG DYNAMIC CART WIDGET BUTTON STATES
   Loading and success states for product page add-to-cart buttons
   ============================================================================ */

/* Loading state - all widget variants */
.og-add-to-cart-btn.loading,
.og-add-to-cart-btn-gc.loading,
.og-add-to-cart-btn-pb.loading {
    position: relative;