/* CHROME: cart page. Extracted verbatim from themes/default/index.html — 97-100%
 * identical across all 7 themes today. References .eco-chip/.btn/.eco-badge-promo
 * (theme-owned) without redefining them.
 *
 * This chunk is compiled standalone (see resources/css/chrome/_tokens.css's own
 * header comment) so it keeps its own copy of every plain Tailwind design token
 * its rules below actually use — only what's referenced via var(), nothing more.
 */
:root {
    --color-foreground: #17140f;
    --color-background: #fff;
    --color-danger: var(--color-rose-700);
    --color-rose-700: oklch(51.4% 0.222 16.935);
    --spacing: 0.25rem;
    --text-xs: 0.75rem;
    --text-xs--line-height: calc(1 / 0.75);
    --text-sm: 0.875rem;
    --text-sm--line-height: calc(1.25 / 0.875);
    --text-base: 1rem;
    --text-base--line-height: calc(1.5 / 1);
    --text-lg: 1.125rem;
    --text-lg--line-height: calc(1.75 / 1.125);
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --leading-snug: 1.375;
    --default-transition-duration: 0.15s;
    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
@layer chrome {
    [data-page="cart-index"] {
        /* Same responsive max-width ladder as the shared .container utility
           (resources/css/chrome/primitives.css) — HIGH RISK selector, copied
           verbatim, not re-derived (see primitives.css's own note). */
        width: 100%;
        margin-inline: auto;
        [data-role="cart-layout"] {
            .eco-cart-body {
                display: flex;
                gap: calc(var(--spacing) * 10);
            }
            .eco-cart-items {
                width: 100%;
                display: flex;
                flex-direction: column;
            }
            .eco-cart-select-all {
                padding-block: calc(var(--spacing) * 3);
                border-bottom: 1px solid color-mix(in oklab, var(--color-foreground) 10%, transparent);
                margin-bottom: 0;
            }
            .eco-cart-item {
                display: flex;
                gap: calc(var(--spacing) * 3);
                padding-block: calc(var(--spacing) * 4);
                border-bottom: 1px solid color-mix(in oklab, var(--color-foreground) 10%, transparent);
                &.eco-cart-item-selected {
                    background-color: color-mix(in oklab, var(--color-foreground) 1.5%, transparent);
                }
                .eco-cart-checkbox {
                    flex: none;
                    margin-top: calc(var(--spacing) * .5);
                }
                .eco-cart-item-body {
                    flex: 1;
                    display: flex;
                    flex-direction: column;
                    gap: calc(var(--spacing) * 3);
                    min-width: 0;
                }
                .eco-cart-item-row {
                    display: flex;
                    gap: calc(var(--spacing) * 3);
                }
                .eco-cart-item-img {
                    width: calc(var(--spacing) * 24);
                    height: calc(var(--spacing) * 24);
                    flex: none;
                    position: relative;
                    overflow: hidden;
                    border: 1px solid color-mix(in oklab, var(--color-foreground) 10%, transparent);
                    img {
                        width: 100%;
                        position: absolute;
                        top: 0;
                    }
                    span {
                        position: absolute;
                        inset: 0;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        font-size: var(--text-xs);
                        line-height: var(--text-xs--line-height);
                        opacity: .3;
                        font-weight: var(--font-weight-medium);
                    }
                }
                .eco-cart-item-main {
                    flex: 1;
                    display: flex;
                    flex-direction: column;
                    gap: calc(var(--spacing) * 3);
                    min-width: 0;
                    justify-content: space-between;
                    .eco-cart-item-top {
                        display: flex;
                        align-items: flex-start;
                        justify-content: space-between;
                        gap: calc(var(--spacing) * 3);
                        .eco-cart-item-info {
                            flex: 1;
                            display: flex;
                            flex-direction: column;
                            gap: calc(var(--spacing) * 1);
                            min-width: 0;
                        }
                        .eco-cart-item-name {
                            font-weight: var(--font-weight-medium);
                            line-height: var(--leading-snug);
                            display: -webkit-box;
                            -webkit-line-clamp: 2;
                            -webkit-box-orient: vertical;
                            overflow: hidden;
                            &:hover {
                                text-decoration: underline;
                            }
                        }
                        .eco-cart-item-variant {
                            display: flex;
                            align-items: center;
                            gap: calc(var(--spacing) * 2);
                            font-size: var(--text-xs);
                            line-height: var(--text-xs--line-height);
                            opacity: .7;
                            .eco-cart-variant-edit {
                                opacity: .6;
                                transition-property: opacity;
                                transition-timing-function: var(--default-transition-timing-function);
                                transition-duration: var(--default-transition-duration);
                            }
                            @media (hover: hover) {
                                .eco-cart-variant-edit:hover {
                                    opacity: 1;
                                }
                            }
                        }
                        .eco-cart-item-subtotal {
                            flex: none;
                            display: flex;
                            flex-direction: column;
                            align-items: flex-end;
                            gap: calc(var(--spacing) * .5);
                            span:first-child {
                                font-weight: var(--font-weight-medium);
                            }
                            &.eco-cart-item-subtotal--discounted
                                span:first-child {
                                color: var(--color-danger);
                            }
                            .eco-cart-item-subtotal-orig {
                                font-size: var(--text-xs);
                                line-height: var(--text-xs--line-height);
                                text-decoration: line-through;
                                opacity: .5;
                            }
                        }
                    }
                    .eco-cart-item-lower {
                        display: flex;
                        align-items: center;
                        .eco-product-promos {
                            display: flex;
                            gap: calc(var(--spacing) * 1);
                            .eco-badge-promo {
                                font-weight: var(--font-weight-medium);
                                &.eco-badge-promo--applied {
                                    background-color: color-mix(in oklab, var(--color-foreground) 90%, transparent);
                                    color: var(--color-background);
                                }
                            }
                        }
                        .eco-cart-item-controls {
                            display: flex;
                            align-items: center;
                            justify-content: space-between;
                            margin-inline-start: auto;
                            gap: calc(var(--spacing) * 2);
                        }
                    }
                }
                .eco-cart-item-qty {
                    /* Self-contained, not ".btn" + size override — .btn is an unlayered
                       theme class (bg-transparent, px-5 py-2.5 CTA padding, uppercase
                       text). Per PRD-lapisan-chrome-tema.md Bagian II, unlayered theme
                       CSS ALWAYS wins over @layer chrome regardless of selector
                       specificity, so a chrome rule trying to shrink .btn's own
                       properties (its padding especially) back down silently loses:
                       the button keeps .btn's ~20px inline padding, squeezing this
                       32px-wide button's content box down to a couple pixels — small
                       enough that the icon (sized correctly, but flex-shrink:1 with no
                       min-content floor for a viewBox-only <svg>) collapses to 0 width
                       and visually disappears. Providing the button chrome directly
                       here (no .btn class needed on the element) sidesteps the
                       cross-layer fight entirely instead of trying to win it. */
                    .eco-qty-btn {
                        width: calc(var(--spacing) * 8);
                        height: calc(var(--spacing) * 8);
                        padding: 0;
                        background-color: transparent;
                        border: 1px solid color-mix(in oklab, var(--color-foreground) 25%, transparent);
                        transition-property: color, background-color, border-color;
                        transition-timing-function: var(--default-transition-timing-function);
                        transition-duration: var(--default-transition-duration);
                        &:hover:not([disabled]) {
                            background-color: color-mix(in oklab, var(--color-foreground) 10%, transparent);
                            border-color: color-mix(in oklab, var(--color-foreground) 30%, transparent);
                        }
                        &[disabled] {
                            opacity: .5;
                            cursor: not-allowed;
                        }
                        svg {
                            width: calc(var(--spacing) * 3);
                            height: calc(var(--spacing) * 3);
                        }
                    }
                    .eco-qty-input {
                        width: calc(var(--spacing) * 14);
                        height: calc(var(--spacing) * 8);
                    }
                }
                .eco-cart-item-remove {
                    width: calc(var(--spacing) * 8);
                    height: calc(var(--spacing) * 8);
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    opacity: .4;
                    transition-property: opacity;
                    transition-timing-function: var(--default-transition-timing-function);
                    transition-duration: var(--default-transition-duration);
                    svg {
                        width: calc(var(--spacing) * 4);
                        height: calc(var(--spacing) * 4);
                    }
                }
                @media (hover: hover) {
                    .eco-cart-item-remove:hover {
                        opacity: .8;
                    }
                }
            }
            .eco-cart-summary {
                position: sticky;
                top: calc(var(--spacing) * 5);
                width: 25rem;
                flex: none;
            }
            .eco-cart-summary-card {
                display: flex;
                flex-direction: column;
                gap: calc(var(--spacing) * 5);
                border: 1px solid color-mix(in oklab, var(--color-foreground) 20%, transparent);
                padding: calc(var(--spacing) * 5);
            }
            .eco-cart-summary-title {
                font-size: var(--text-base);
                line-height: var(--text-base--line-height);
                font-weight: var(--font-weight-medium);
            }
            .eco-cart-coupon-section {
                display: flex;
                flex-direction: column;
                margin-inline: calc(var(--spacing) * -5);
                padding-inline: calc(var(--spacing) * 5);
                border-block: 1px solid color-mix(in oklab, var(--color-foreground) 10%, transparent);
                .eco-cart-coupon-disabled {
                    display: flex;
                    align-items: center;
                    gap: calc(var(--spacing) * 2);
                    padding-block: calc(var(--spacing) * 2.5);
                    font-size: var(--text-sm);
                    line-height: var(--text-sm--line-height);
                    opacity: .4;
                    svg { width: calc(var(--spacing) * 4); height: calc(var(--spacing) * 4); flex: none; }
                }
                .eco-cart-coupon-header {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    padding-block: calc(var(--spacing) * 2.5);
                    .eco-cart-coupon-label {
                        display: flex;
                        align-items: center;
                        gap: calc(var(--spacing) * 1.5);
                        font-size: var(--text-sm);
                        line-height: var(--text-sm--line-height);
                        font-weight: var(--font-weight-medium);
                        svg { width: calc(var(--spacing) * 4); height: calc(var(--spacing) * 4); stroke-width: 1.5px; }
                    }
                    .eco-cart-coupon-pick {
                        font-size: var(--text-xs);
                        line-height: var(--text-xs--line-height);
                        opacity: .7;
                        transition-property: opacity;
                        transition-timing-function: var(--default-transition-timing-function);
                        transition-duration: var(--default-transition-duration);
                        cursor: pointer;
                        text-decoration: underline dotted;
                        text-underline-offset: 2px;
                    }
                    @media (hover: hover) {
                        .eco-cart-coupon-pick:hover {
                            opacity: 1;
                        }
                    }
                }
                .eco-cart-coupon-empty {
                    font-size: var(--text-xs);
                    line-height: var(--text-xs--line-height);
                    opacity: .4;
                    padding-bottom: calc(var(--spacing) * 3);
                }
                .eco-cart-coupon-active {
                    display: flex;
                    align-items: flex-start;
                    justify-content: space-between;
                    gap: calc(var(--spacing) * 3);
                    padding-inline: calc(var(--spacing) * 3);
                    padding-block: calc(var(--spacing) * 2.5);
                    margin-bottom: calc(var(--spacing) * 3);
                    background-color: color-mix(in oklab, var(--color-foreground) 3%, transparent);
                    border: 1px solid color-mix(in oklab, var(--color-foreground) 15%, transparent);
                    font-size: var(--text-sm);
                    line-height: var(--text-sm--line-height);
                    .eco-cart-coupon-active-name {
                        display: flex;
                        align-items: center;
                        gap: calc(var(--spacing) * 1.5);
                        font-weight: var(--font-weight-medium);
                        margin-bottom: calc(var(--spacing) * .5);
                    }
                    .eco-cart-coupon-active-desc {
                        font-size: var(--text-xs);
                        line-height: var(--text-xs--line-height);
                        opacity: .6;
                    }
                    .eco-cart-coupon-remove-btn {
                        flex: none;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        opacity: .4;
                        transition-property: opacity;
                        transition-timing-function: var(--default-transition-timing-function);
                        transition-duration: var(--default-transition-duration);
                        margin-top: calc(var(--spacing) * .5);
                        svg { width: calc(var(--spacing) * 3.5); height: calc(var(--spacing) * 3.5); }
                    }
                    @media (hover: hover) {
                        .eco-cart-coupon-remove-btn:hover {
                            opacity: .9;
                        }
                    }
                }
                .eco-cart-coupon-hints {
                    display: flex;
                    flex-direction: column;
                    gap: calc(var(--spacing) * 1);
                    padding-bottom: calc(var(--spacing) * 3);
                    .eco-cart-coupon-hint {
                        font-size: var(--text-xs);
                        line-height: var(--text-xs--line-height);
                        opacity: .5;
                    }
                }
            }
            .eco-cart-totals {
                display: flex;
                flex-direction: column;
                gap: calc(var(--spacing) * 2);
                padding-top: calc(var(--spacing) * 1);
                .eco-cart-total-row {
                    display: flex;
                    justify-content: space-between;
                }
                .eco-cart-total-discount {
                    color: var(--color-danger);
                }
                .eco-cart-total-grand {
                    font-weight: var(--font-weight-medium);
                    border-top: 1px solid color-mix(in oklab, var(--color-foreground) 10%, transparent);
                    padding-top: calc(var(--spacing) * 2);
                    margin-top: calc(var(--spacing) * 1);
                }
                .eco-cart-issues {
                    display: flex;
                    flex-direction: column;
                    gap: calc(var(--spacing) * 1);
                    margin-top: calc(var(--spacing) * 2);
                    .eco-cart-issue {
                        display: flex;
                        align-items: flex-start;
                        gap: calc(var(--spacing) * 1.5);
                        font-size: var(--text-xs);
                        line-height: var(--text-xs--line-height);
                        color: var(--color-danger);
                    }
                }
            }
            .eco-cart-summary-actions {
                display: flex;
                flex-direction: column;
                gap: calc(var(--spacing) * 2);
                .eco-cart-checkout-btn {
                    width: 100%;
                }
                .eco-cart-clear-btn {
                    width: 100%;
                    opacity: .7;
                }
                @media (hover: hover) {
                    .eco-cart-clear-btn:hover {
                        opacity: .8;
                    }
                }
            }
        }
        [data-role="cart-variant-modal"] {
            .eco-modal-card {
                width: 26rem;
            }
            .eco-modal-body {
                gap: calc(var(--spacing) * 5);
                padding-inline: 0;
                padding-block: 0;
                max-height: 70vh;
                .eco-cart-variant-group {
                    display: flex;
                    flex-direction: column;
                    gap: calc(var(--spacing) * 2);
                    padding-inline: calc(var(--spacing) * 5);
                    .eco-variant-label {
                        font-size: var(--text-sm);
                        line-height: var(--text-sm--line-height);
                        span:first-child { font-weight: var(--font-weight-medium); }
                        .eco-variant-selected { opacity: .6; }
                    }
                    .eco-variant-chips {
                        display: flex;
                        gap: calc(var(--spacing) * 1.5);
                        flex-wrap: wrap;
                        .eco-chip {
                            height: calc(var(--spacing) * 8);
                            padding-inline: calc(var(--spacing) * 3);
                            font-size: var(--text-sm);
                            line-height: var(--text-sm--line-height);
                            font-weight: var(--font-weight-normal);
                            &.eco-chip--active {
                                background-color: var(--color-foreground);
                                color: var(--color-background);
                                font-weight: var(--font-weight-medium);
                            }
                        }
                    }
                }
                .eco-modal-loading,
                .eco-modal-empty {
                    padding-inline: calc(var(--spacing) * 5);
                    padding-block: calc(var(--spacing) * 4);
                    font-size: var(--text-sm);
                    line-height: var(--text-sm--line-height);
                    opacity: .6;
                }
            }
            .eco-modal-footer {
                background-color: color-mix(in oklab, var(--color-foreground) 3%, transparent);
                border-top: 1px solid color-mix(in oklab, var(--color-foreground) 10%, transparent);
            }
        }
        [data-role="cart-clear-confirm"] {
            .eco-modal-card {
                width: 22rem;
            }
            .eco-modal-body {
                text-align: center;
                .eco-modal-title {
                    font-size: var(--text-lg);
                    line-height: var(--text-lg--line-height);
                    font-weight: var(--font-weight-medium);
                }
                .eco-modal-text {
                    opacity: .7;
                    margin-top: calc(var(--spacing) * -3);
                }
                .eco-modal-footer {
                    padding-inline: 0;
                    padding-bottom: 0;
                    justify-content: center;
                }
            }
        }
    }
    @media (min-width: 40rem) {
        [data-page="cart-index"] { max-width: 40rem; }
    }
    @media (min-width: 48rem) {
        [data-page="cart-index"] { max-width: 48rem; }
    }
    @media (min-width: 64rem) {
        [data-page="cart-index"] { max-width: 64rem; }
    }
    @media (min-width: 80rem) {
        [data-page="cart-index"] { max-width: 80rem; }
    }
    @media (min-width: 96rem) {
        [data-page="cart-index"] { max-width: 96rem; }
    }
}