/* CHROME: checkout page + the line-item display shared with account order detail.
 * Extracted verbatim from themes/default/index.html — 96-100% identical across
 * all 7 themes today.
 *
 * 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-xl: 1.25rem;
    --text-xl--line-height: calc(1.75 / 1.25);
    --font-weight-medium: 500;
    --tracking-wider: 0.05em;
    --tracking-widest: 0.1em;
    --leading-snug: 1.375;
    --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    --default-transition-duration: 0.15s;
    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
@layer chrome {
    /* Checkout Items — global, reused in order detail too */
    .eco-checkout-item {
        display: flex;
        gap: calc(var(--spacing) * 3);
        padding-block: calc(var(--spacing) * 3);
        border-bottom: 1px solid color-mix(in oklab, var(--color-foreground) 10%, transparent);
        &:last-child {
            border-width: 0;
        }
    }
    .eco-checkout-item-img {
        width: calc(var(--spacing) * 20);
        height: calc(var(--spacing) * 20);
        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;
        }
        svg {
            position: absolute;
            inset: 0;
            margin: auto;
            width: calc(var(--spacing) * 6);
            height: calc(var(--spacing) * 6);
            opacity: .2;
        }
    }
    .eco-checkout-item-info {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: calc(var(--spacing) * 1);
        min-width: 0;
    }
    .eco-checkout-item-name {
        font-size: var(--text-sm);
        line-height: var(--leading-snug);
        font-weight: var(--font-weight-medium);
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .eco-checkout-item-variant {
        font-size: var(--text-xs);
        line-height: var(--text-xs--line-height);
        opacity: .6;
        margin-bottom: calc(var(--spacing) * 1);
    }
    .eco-checkout-item-prices {
        font-size: var(--text-xs);
        line-height: var(--text-xs--line-height);
    }
    .eco-checkout-item-subtotal {
        flex: none;
        font-size: var(--text-sm);
        line-height: var(--text-sm--line-height);
        font-weight: var(--font-weight-medium);
        padding-top: calc(var(--spacing) * .5);
    }

    [data-page="checkout-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="checkout-form"] {
            margin-bottom: calc(var(--spacing) * 20);
            display: grid;
            grid-template-columns: 1fr 25rem;
            column-gap: 2.5rem;
            align-items: start;

            & > .eco-checkout-title {
                grid-column: 1 / -1;
                margin-top: calc(var(--spacing) * 10);
                margin-bottom: calc(var(--spacing) * 5);
                font-size: var(--text-xl);
                line-height: var(--text-xl--line-height);
                font-weight: var(--font-weight-medium);
            }
            & > .eco-checkout-main {
                grid-column: 1;
                grid-row: 2;
            }
            & > .eco-checkout-sidebar {
                grid-column: 2;
                grid-row: 2;
                position: sticky;
                top: calc(var(--spacing) * 5);
            }
        }

        /* Sections */
        .eco-checkout-main {
            display: flex;
            flex-direction: column;
            border: 1px solid color-mix(in oklab, var(--color-foreground) 20%, transparent);
            & > :not(:last-child) {
                border-bottom: 1px solid color-mix(in oklab, var(--color-foreground) 10%, transparent);
            }
        }
        .eco-checkout-section {
            display: flex;
            flex-direction: column;
            gap: calc(var(--spacing) * 4);
            padding: calc(var(--spacing) * 5);
        }
        .eco-checkout-section-title {
            display: flex;
            align-items: center;
            gap: calc(var(--spacing) * 3);
            font-weight: var(--font-weight-medium);
        }
        .eco-checkout-step {
            width: calc(var(--spacing) * 6);
            height: calc(var(--spacing) * 6);
            border-radius: 9999px;
            flex: none;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: var(--color-foreground);
            color: var(--color-background);
            font-size: var(--text-xs);
            line-height: var(--text-xs--line-height);
            font-weight: var(--font-weight-medium);
        }

        /* Address Card */
        .eco-checkout-address-card-wrap {
            position: relative;
        }
        .eco-checkout-change-btn {
            position: absolute;
            top: 0;
            inset-inline-end: 0;
            display: flex;
            align-items: center;
            gap: calc(var(--spacing) * 1.5);
            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);
            svg {
                width: calc(var(--spacing) * 3);
                height: calc(var(--spacing) * 3);
            }
        }
        @media (hover: hover) {
            .eco-checkout-change-btn:hover {
                opacity: .9;
            }
        }
        .eco-checkout-address-header {
            display: flex;
            align-items: center;
            gap: calc(var(--spacing) * 2);
        }
        .eco-checkout-address-label {
            font-size: var(--text-sm);
            line-height: var(--text-sm--line-height);
            font-weight: var(--font-weight-medium);
        }
        .eco-checkout-address-badge {
            font-size: 10px;
            padding-inline: calc(var(--spacing) * 1.5);
            padding-block: calc(var(--spacing) * .5);
            border: 1px solid color-mix(in oklab, var(--color-foreground) 30%, transparent);
            opacity: .7;
            text-transform: uppercase;
            letter-spacing: var(--tracking-wider);
        }
        .eco-checkout-address-recipient {
            display: flex;
            align-items: center;
            gap: calc(var(--spacing) * 3);
            font-size: var(--text-sm);
            line-height: var(--text-sm--line-height);
            margin-top: calc(var(--spacing) * 1);
            .eco-checkout-address-phone {
                opacity: .6;
            }
        }
        .eco-checkout-address-street {
            font-size: var(--text-sm);
            line-height: var(--text-sm--line-height);
            opacity: .7;
        }
        .eco-checkout-address-city {
            font-size: var(--text-sm);
            line-height: var(--text-sm--line-height);
            opacity: .6;
        }
        .eco-checkout-address-form {
            display: flex;
            flex-direction: column;
            gap: calc(var(--spacing) * 4);
        }

        /* Shipping & Payment Groups */
        .eco-shipping-group,
        .eco-payment-group {
            display: flex;
            flex-direction: column;
            gap: calc(var(--spacing) * 3);
            margin-bottom: calc(var(--spacing) * 5);
            &:last-child {
                margin-bottom: 0;
            }
        }
        .eco-payment-group-header {
            display: flex;
            align-items: center;
            gap: calc(var(--spacing) * 2.5);
        }
        .eco-payment-group-icon {
            width: calc(var(--spacing) * 7);
            height: calc(var(--spacing) * 7);
            flex: none;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px solid color-mix(in oklab, var(--color-foreground) 10%, transparent);
            background-color: color-mix(in oklab, var(--color-foreground) 4%, transparent);
            svg {
                width: calc(var(--spacing) * 3.5);
                height: calc(var(--spacing) * 3.5);
                opacity: .6;
            }
        }
        .eco-payment-group-label {
            font-size: var(--text-xs);
            line-height: var(--text-xs--line-height);
            text-transform: uppercase;
            letter-spacing: var(--tracking-widest);
            opacity: .6;
            font-weight: var(--font-weight-medium);
        }
        .eco-payment-method-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: calc(var(--spacing) * 2);
        }
        .eco-payment-method-card {
            position: relative;
            display: flex;
            align-items: center;
            gap: calc(var(--spacing) * 2.5);
            padding: calc(var(--spacing) * 3);
            border: 1px solid color-mix(in oklab, var(--color-foreground) 20%, transparent);
            cursor: pointer;
            transition-property: color, background-color, border-color;
            transition-timing-function: var(--default-transition-timing-function);
            transition-duration: var(--default-transition-duration);
            font-size: var(--text-sm);
            line-height: var(--text-sm--line-height);
            &:hover {
                background-color: color-mix(in oklab, var(--color-foreground) 2%, transparent);
            }
            &.eco-payment-method-card--selected {
                border-color: color-mix(in oklab, var(--color-foreground) 50%, transparent);
                background-color: color-mix(in oklab, var(--color-foreground) 3%, transparent);
            }
        }
        .eco-shipping-radio {
            display: none;
        }
        .eco-shipping-radio-dot,
        .eco-payment-method-radio {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            flex: none;
            width: calc(var(--spacing) * 4);
            height: calc(var(--spacing) * 4);
            border-radius: 9999px;
            border: 1px solid color-mix(in oklab, var(--color-foreground) 30%, transparent);
            &::after {
                content: "";
                width: calc(var(--spacing) * 2);
                height: calc(var(--spacing) * 2);
                border-radius: 9999px;
                background-color: var(--color-foreground);
                opacity: 0;
                transition-property: opacity;
                transition-timing-function: var(--default-transition-timing-function);
                transition-duration: var(--default-transition-duration);
            }
        }
        .eco-payment-method-card--selected {
            .eco-shipping-radio-dot,
            .eco-payment-method-radio {
                border-color: var(--color-foreground);
                &::after {
                    opacity: 1;
                }
            }
        }
        .eco-payment-method-check {
            margin-inline-start: auto;
            flex: none;
            svg {
                width: calc(var(--spacing) * 4);
                height: calc(var(--spacing) * 4);
                opacity: .6;
            }
        }

        /* Shipping card */
        .eco-shipping-card-content {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: calc(var(--spacing) * .5);
            min-width: 0;
        }
        .eco-shipping-card-name {
            font-weight: var(--font-weight-medium);
            line-height: var(--leading-snug);
        }
        .eco-shipping-card-meta {
            display: flex;
            align-items: center;
            gap: calc(var(--spacing) * 2);
            flex-wrap: wrap;
        }
        .eco-shipping-card-price {
            font-size: var(--text-sm);
            line-height: var(--text-sm--line-height);
        }
        .eco-shipping-card-duration {
            font-size: var(--text-xs);
            line-height: calc(var(--spacing) * 5);
            opacity: .7;
            border: 1px solid color-mix(in oklab, var(--color-foreground) 30%, transparent);
            padding-inline: calc(var(--spacing) * 1.5);
        }

        /* Payment card */
        .eco-payment-method-content {
            flex: 1;
            display: flex;
            align-items: center;
            gap: calc(var(--spacing) * 2);
            min-width: 0;
            overflow: hidden;
        }
        .eco-payment-method-logo {
            height: calc(var(--spacing) * 5);
            width: auto;
            max-width: 2.5rem;
            object-fit: contain;
            flex: none;
        }
        .eco-payment-method-name {
            line-height: var(--leading-snug);
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
        }

        /* Summary Sidebar */
        .eco-checkout-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-checkout-summary-title {
            font-size: var(--text-base);
            line-height: var(--text-base--line-height);
            font-weight: var(--font-weight-medium);
        }
        .eco-checkout-summary {
            display: flex;
            flex-direction: column;
            gap: calc(var(--spacing) * 2.5);
            border-top: 1px solid color-mix(in oklab, var(--color-foreground) 10%, transparent);
            padding-top: calc(var(--spacing) * 4);
        }
        .eco-checkout-summary-row {
            display: flex;
            justify-content: space-between;
            font-size: var(--text-sm);
            line-height: var(--text-sm--line-height);
            &.eco-checkout-summary-discount {
                color: var(--color-danger);
            }
            &.eco-checkout-summary-total {
                font-size: var(--text-base);
                line-height: var(--text-base--line-height);
                font-weight: var(--font-weight-medium);
                border-top: 1px solid color-mix(in oklab, var(--color-foreground) 10%, transparent);
                padding-top: calc(var(--spacing) * 3);
                margin-top: calc(var(--spacing) * 1);
            }
        }

        .eco-checkout-error {
            display: flex;
            align-items: flex-start;
            gap: calc(var(--spacing) * 2);
            font-size: var(--text-sm);
            line-height: var(--text-sm--line-height);
            color: var(--color-danger);
            svg {
                width: calc(var(--spacing) * 4);
                height: calc(var(--spacing) * 4);
                flex: none;
                margin-top: calc(var(--spacing) * .5);
            }
        }
        .eco-checkout-submit {
            width: 100%;
        }

        /* Empty & Error States */
        .eco-checkout-empty {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: calc(var(--spacing) * 3);
            padding-block: calc(var(--spacing) * 10);
            font-size: var(--text-sm);
            line-height: var(--text-sm--line-height);
            opacity: .6;
            svg {
                width: calc(var(--spacing) * 8);
                height: calc(var(--spacing) * 8);
                opacity: .3;
            }
        }
        .eco-checkout-empty-back {
            margin-top: calc(var(--spacing) * 2);
            opacity: 1;
        }
        .eco-checkout-instant-hint {
            display: flex;
            align-items: flex-start;
            gap: calc(var(--spacing) * 2);
            margin-top: calc(var(--spacing) * 3);
            padding-inline: calc(var(--spacing) * 3);
            padding-block: calc(var(--spacing) * 2.5);
            font-size: var(--text-xs);
            line-height: var(--text-xs--line-height);
            color: color-mix(in oklab, var(--color-foreground) 70%, transparent);
            background-color: color-mix(in oklab, var(--color-foreground) 4%, transparent);
            border: 1px solid color-mix(in oklab, var(--color-foreground) 10%, transparent);
            svg {
                width: calc(var(--spacing) * 3.5);
                height: calc(var(--spacing) * 3.5);
                flex: none;
                margin-top: calc(var(--spacing) * .5);
                opacity: .6;
            }
        }
        .eco-checkout-empty-ship {
            display: flex;
            align-items: center;
            gap: calc(var(--spacing) * 2);
            padding-inline: calc(var(--spacing) * 4);
            padding-block: calc(var(--spacing) * 3);
            text-align: center;
            font-size: var(--text-sm);
            line-height: var(--text-sm--line-height);
            color: color-mix(in oklab, var(--color-foreground) 70%, transparent);
            background-color: color-mix(in oklab, var(--color-foreground) 2%, transparent);
            border: 1px solid color-mix(in oklab, var(--color-foreground) 20%, transparent);
            svg {
                width: calc(var(--spacing) * 5);
                height: calc(var(--spacing) * 5);
                opacity: .5;
            }
        }

        /* Address Dialog List */
        .eco-checkout-options {
            display: flex;
            flex-direction: column;
        }
        .eco-checkout-option {
            display: flex;
            align-items: center;
            gap: calc(var(--spacing) * 3);
            padding-inline: calc(var(--spacing) * 3);
            padding-block: calc(var(--spacing) * 4);
            border-bottom: 1px solid color-mix(in oklab, var(--color-foreground) 10%, transparent);
            &:last-child {
                border-width: 0;
            }
            &:hover {
                background-color: color-mix(in oklab, var(--color-foreground) 5%, transparent);
            }
            &.eco-checkout-option--selected {
                .eco-shipping-radio-dot {
                    border-color: var(--color-foreground);
                    &::after {
                        opacity: 1;
                    }
                }
            }
        }
        .eco-checkout-option-click {
            display: flex;
            align-items: center;
            gap: calc(var(--spacing) * 3);
            flex: 1;
            cursor: pointer;
            min-width: 0;
        }
        .eco-checkout-option-info {
            display: flex;
            flex-direction: column;
            gap: calc(var(--spacing) * 1);
            flex: 1;
            min-width: 0;
        }
        .eco-checkout-option-name-row {
            display: flex;
            align-items: center;
            gap: calc(var(--spacing) * 2);
        }
        .eco-checkout-option-name {
            font-size: var(--text-sm);
            line-height: var(--text-sm--line-height);
            font-weight: var(--font-weight-medium);
        }
        .eco-checkout-option-meta {
            font-size: var(--text-xs);
            line-height: var(--text-xs--line-height);
            opacity: .6;
        }
        .eco-checkout-option-actions {
            display: flex;
            align-items: center;
            gap: calc(var(--spacing) * .5);
            flex: none;
        }
        .eco-checkout-addr-action {
            width: calc(var(--spacing) * 7);
            height: calc(var(--spacing) * 7);
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: .7;
            transition-property: opacity;
            transition-timing-function: var(--default-transition-timing-function);
            transition-duration: var(--default-transition-duration);
            svg {
                width: calc(var(--spacing) * 3.5);
                height: calc(var(--spacing) * 3.5);
            }
            &.danger:hover {
                opacity: 1;
                color: var(--color-danger);
            }
        }
        @media (hover: hover) {
            .eco-checkout-addr-action:hover {
                opacity: .8;
            }
        }
        .eco-checkout-option-add-btn {
            margin-top: calc(var(--spacing) * 4);
            font-size: var(--text-sm);
            line-height: var(--text-sm--line-height);
            opacity: .6;
            transition-property: opacity;
            transition-timing-function: var(--default-transition-timing-function);
            transition-duration: var(--default-transition-duration);
        }
        @media (hover: hover) {
            .eco-checkout-option-add-btn:hover {
                opacity: 1;
            }
        }

        /* Skeleton */
        .eco-checkout-skeleton {
            display: flex;
            flex-direction: column;
            gap: calc(var(--spacing) * 3);
        }
        .eco-skeleton-block {
            background-color: color-mix(in oklab, var(--color-foreground) 7%, transparent);
            animation: var(--animate-pulse);
        }
        .eco-skeleton-row {
            display: flex;
            align-items: center;
            gap: calc(var(--spacing) * 3);
        }
        .eco-skeleton-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: calc(var(--spacing) * 2);
        }
        .eco-checkout-skel-addr {
            height: calc(var(--spacing) * 20);
            width: 100%;
        }
        .eco-checkout-skel-ship {
            height: calc(var(--spacing) * 12);
            width: 100%;
        }
        .eco-checkout-skel-ship-sm {
            height: calc(var(--spacing) * 10);
            width: 60%;
        }
        .eco-checkout-skel-coupon {
            height: calc(var(--spacing) * 12);
            width: 100%;
        }
        .eco-checkout-skel-coupon-sm {
            height: calc(var(--spacing) * 12);
            width: 80%;
        }
        .eco-checkout-skel-coupon-last {
            height: calc(var(--spacing) * 10);
            width: 60%;
        }
        .eco-skel-icon {
            width: calc(var(--spacing) * 7);
            height: calc(var(--spacing) * 7);
            flex: none;
        }
        .eco-skel-text {
            height: calc(var(--spacing) * 4);
            flex: 1;
        }
        .eco-skel-text-sm {
            height: calc(var(--spacing) * 4);
            width: calc(var(--spacing) * 24);
        }
        .eco-skel-card {
            height: calc(var(--spacing) * 14);
        }
        .eco-skel-row {
            margin-top: calc(var(--spacing) * 2);
        }
    }
    @media (min-width: 40rem) {
        [data-page="checkout-index"] { max-width: 40rem; }
    }
    @media (min-width: 48rem) {
        [data-page="checkout-index"] { max-width: 48rem; }
    }
    @media (min-width: 64rem) {
        [data-page="checkout-index"] { max-width: 64rem; }
    }
    @media (min-width: 80rem) {
        [data-page="checkout-index"] { max-width: 80rem; }
    }
    @media (min-width: 96rem) {
        [data-page="checkout-index"] { max-width: 96rem; }
    }
}