/*
|--------------------------------------------------------------------------
| Cart theme/live-customizer final layer
|--------------------------------------------------------------------------
| Keeps cart colors synced with storefront customizer while preserving layout.
*/

html body .cart-page {
    --rr-cart-primary: var(--rr-live-primary, var(--rr-theme-primary, var(--cart-accent, #2563eb));
    --rr-cart-secondary: var(--rr-live-secondary, var(--rr-theme-secondary, var(--cart-heading, #0f172a)));
    --rr-cart-highlight: var(--rr-live-highlight, #ffffff);
    --rr-cart-shadow: var(--rr-live-shadow, rgba(37, 99, 235, .18));
    --rr-cart-soft: color-mix(in srgb, var(--rr-cart-primary) 10%, #ffffff);
    --rr-cart-border: color-mix(in srgb, var(--rr-cart-primary) 24%, #dbe4ef);

    color: var(--rr-cart-secondary) !important;
}

html body .cart-badge,
html body .cart-continue-link,
html body .cart-primary-link,
html body .cart-item-price,
html body .cart-clear-btn {
    color: var(--rr-cart-primary) !important;
}

html body .cart-badge,
html body .cart-clear-btn,
html body .cart-item-image,
html body .cart-item-options span {
    background: var(--rr-cart-soft) !important;
}

html body .cart-empty-box,
html body .cart-item-card,
html body .cart-summary,
html body .cart-quantity-stepper,
html body .cart-qty-input,
html body .cart-continue-link {
    border-color: var(--rr-cart-border) !important;
}

html body .cart-empty-box,
html body .cart-item-card,
html body .cart-summary {
    box-shadow: 0 18px 44px color-mix(in srgb, var(--rr-cart-shadow) 72%, transparent) !important;
}

html body .cart-heading-row h1,
html body .cart-empty-box h2,
html body .cart-item-top h3,
html body .cart-item-subtotal,
html body .cart-summary h2,
html body .cart-summary-total,
html body .cart-qty-btn,
html body .cart-qty-input {
    color: var(--rr-cart-secondary) !important;
}

html body .cart-checkout-btn,
html body .cart-primary-link {
    background: linear-gradient(135deg, var(--rr-cart-primary), var(--rr-cart-secondary)) !important;
    color: var(--rr-cart-highlight) !important;
    box-shadow: 0 16px 34px color-mix(in srgb, var(--rr-cart-shadow) 84%, transparent) !important;
}

html body .cart-update-btn {
    background: var(--rr-cart-secondary) !important;
    color: var(--rr-cart-highlight) !important;
}

html body .cart-remove-btn {
    background: color-mix(in srgb, #ef4444 10%, #ffffff) !important;
    color: #dc2626 !important;
    border: 1px solid color-mix(in srgb, #ef4444 24%, #ffffff) !important;
}

@media (max-width: 760px) {
    html body .cart-page {
        width: min(100%, calc(100vw - 24px)) !important;
        max-width: calc(100vw - 24px) !important;
        overflow-x: hidden !important;
    }

    html body .cart-item-card,
    html body .cart-summary,
    html body .cart-empty-box {
        max-width: 100% !important;
    }
}