.checkout-page {
    min-height: 100vh;
    padding: 150px 20px 80px;
    background: #f4f4f5;
    color: #050407;
}

.checkout-cart {
    width: min(1120px, 100%);
    margin: 0 auto;
    font-family: "Space Grotesk", sans-serif;
}

.checkout-cart *,
.checkout-cart *::before,
.checkout-cart *::after {
    box-sizing: border-box;
}

.checkout-cart__heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 28px;
    border-bottom: 3px solid #050407;
    padding-bottom: 18px;
}

.checkout-cart__heading p {
    margin: 0 0 4px;
    color: #1e7ca8;
    font: 700 11px ui-monospace, monospace;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.checkout-cart__heading h1 {
    margin: 0;
    font-size: clamp(38px, 7vw, 72px);
    font-weight: 900;
    letter-spacing: -0.065em;
    line-height: 0.92;
    text-transform: uppercase;
}

.checkout-cart__heading > span {
    font: 700 12px ui-monospace, monospace;
    text-transform: uppercase;
}

.checkout-cart__error {
    margin-bottom: 18px;
    border-left: 4px solid #e60d7b;
    padding: 12px 15px;
    background: #fff0f7;
    color: #8f084d;
    font-weight: 700;
}

.checkout-cart__lines {
    display: grid;
    gap: 10px;
}

.checkout-cart-line {
    display: grid;
    grid-template-columns: 68px minmax(220px, 1fr) auto minmax(120px, auto) auto;
    align-items: center;
    gap: 20px;
    border: 1px solid #d7d5da;
    border-left: 4px solid #1e9bd7;
    padding: 18px;
    background: #fff;
}

.checkout-cart-line__marker {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    background-color: #fff;
    background-image: linear-gradient(45deg, #dedde0 25%, transparent 25%), linear-gradient(-45deg, #dedde0 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #dedde0 75%), linear-gradient(-45deg, transparent 75%, #dedde0 75%);
    background-position: 0 0, 0 6px, 6px -6px, -6px 0;
    background-size: 12px 12px;
    color: #050407;
    font-weight: 900;
}

.checkout-cart-line__description {
    min-width: 0;
}

.checkout-cart-line__description p,
.checkout-cart-line__description strong,
.checkout-cart-line__description span,
.checkout-cart-line__description small,
.checkout-cart-line__price span,
.checkout-cart-line__price strong {
    display: block;
}

.checkout-cart-line__description p {
    margin: 0 0 2px;
    color: #a50a59;
    font: 700 10px ui-monospace, monospace;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.checkout-cart-line__description strong {
    overflow: hidden;
    font-size: 18px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.checkout-cart-line__description span,
.checkout-cart-line__description small,
.checkout-cart-line__price span,
.checkout-cart__total small {
    color: #64616a;
    font-size: 11px;
}

.checkout-cart-line__quantity {
    display: flex;
    border: 1px solid #d7d5da;
}

.checkout-cart-line__quantity button,
.checkout-cart-line__quantity output {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border: 0;
    background: #fff;
    color: #050407;
    font: 700 14px "Space Grotesk", sans-serif;
}

.checkout-cart-line__quantity button {
    cursor: pointer;
}

.checkout-cart-line__quantity button:hover,
.checkout-cart-line__quantity button:focus-visible {
    background: #1e9bd7;
    color: #fff;
}

.checkout-cart-line__price {
    text-align: right;
}

.checkout-cart-line__price strong {
    margin-top: 2px;
    font-size: 18px;
}

.checkout-cart-line__remove {
    border: 0;
    padding: 7px;
    background: transparent;
    color: #a50a59;
    cursor: pointer;
    font-size: 11px;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.checkout-cart__total {
    width: min(390px, 100%);
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px 20px;
    margin: 22px 0 0 auto;
    border-top: 3px solid #050407;
    padding-top: 18px;
}

.checkout-cart__total > span {
    font-size: 18px;
    font-weight: 800;
}

.checkout-cart__total > strong {
    color: #a50a59;
    font-size: 24px;
}

.checkout-cart__discount {
    color: #1e7ca8 !important;
}

.checkout-cart__checkout {
    display: grid;
    gap: 18px;
    margin-top: 34px;
    border-top: 3px solid #050407;
    padding-top: 26px;
}

.checkout-cart__checkout fieldset {
    display: grid;
    gap: 16px;
    margin: 0;
    border: 1px solid #d7d5da;
    padding: 20px;
    background: #fff;
}

.checkout-cart__checkout legend {
    padding: 0 8px;
    font-size: 18px;
    font-weight: 900;
    text-transform: uppercase;
}

.checkout-cart__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.checkout-cart__grid label {
    display: grid;
    gap: 6px;
    color: #64616a;
    font-size: 12px;
    font-weight: 700;
}

.checkout-cart__grid input {
    width: 100%;
    min-height: 44px;
    border: 1px solid #aaa7af;
    padding: 10px 12px;
    background: #fff;
    color: #050407;
    font: inherit;
}

.checkout-cart__grid input:focus-visible,
.checkout-cart__shipping-option:has(input:focus-visible),
.checkout-cart__billing-toggle:has(input:focus-visible) {
    outline: 3px solid #1e9bd7;
    outline-offset: 2px;
}

.checkout-cart__wide {
    grid-column: 1 / -1;
}

.checkout-cart__shipping-option,
.checkout-cart__billing-toggle {
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid #d7d5da;
    padding: 12px;
    background: #fff;
    color: #050407;
    cursor: pointer;
}

.checkout-cart__shipping-option strong {
    margin-left: auto;
    color: #a50a59;
}

.checkout-cart__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
}

.checkout-cart__actions button {
    min-height: 48px;
    border: 1px solid #050407;
    padding: 12px 18px;
    background: #fff;
    color: #050407;
    cursor: pointer;
    font: 800 14px "Space Grotesk", sans-serif;
}

.checkout-cart__actions .checkout-cart__pay {
    border-color: #e60d7b;
    background: #e60d7b;
    color: #fff;
}

.checkout-cart__actions button:disabled {
    cursor: wait;
    opacity: 0.55;
}

[data-loading] {
    display: none;
}

[data-loading="hide"] {
    display: inline;
}

.checkout-cart [data-loading="addAttribute(disabled)"] {
    pointer-events: none;
}

.checkout-cart__total small,
.checkout-cart__total button {
    grid-column: 1 / -1;
}

.checkout-cart__total button,
.checkout-cart__empty a {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    padding: 12px 18px;
    background: #050407;
    color: #fff;
    font-weight: 800;
    text-decoration: none;
}

.checkout-cart__total button:disabled {
    opacity: 0.45;
}

.checkout-cart__empty {
    border: 1px solid #d7d5da;
    padding: 48px 24px;
    background: #fff;
    text-align: center;
}

.checkout-cart__empty strong {
    font-size: 24px;
}

.checkout-cart__empty p {
    color: #64616a;
}

.checkout-cart__empty > div {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 22px;
}

.checkout-result {
    width: min(720px, 100%);
    margin: 0 auto;
    border: 1px solid #d7d5da;
    border-top: 6px solid #1e9bd7;
    padding: clamp(28px, 6vw, 64px);
    background: #fff;
}

.checkout-result__eyebrow {
    margin: 0 0 10px;
    color: #a50a59;
    font: 700 11px ui-monospace, monospace;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.checkout-result h1 {
    margin: 0 0 18px;
    font-size: clamp(32px, 6vw, 60px);
    line-height: 0.95;
    text-transform: uppercase;
}

.checkout-result p:not(.checkout-result__eyebrow) {
    color: #64616a;
    line-height: 1.6;
}

.checkout-result__reference {
    border-left: 4px solid #f9eb1c;
    padding: 12px 14px;
    background: #fffde0;
    color: #050407 !important;
}

.checkout-result a {
    display: inline-flex;
    min-height: 48px;
    align-items: center;
    margin-top: 16px;
    padding: 12px 18px;
    background: #050407;
    color: #fff;
    font-weight: 800;
    text-decoration: none;
}

.checkout-cart__empty a:first-child {
    background: #d90c74;
}

@media (max-width: 820px) {
    .checkout-page {
        padding-top: 120px;
    }

    .checkout-cart-line {
        grid-template-columns: 54px minmax(0, 1fr) auto;
        gap: 12px;
    }

    .checkout-cart-line__marker {
        width: 48px;
        height: 48px;
    }

    .checkout-cart-line__quantity {
        grid-column: 2;
    }

    .checkout-cart-line__price {
        grid-column: 3;
        grid-row: 1 / span 2;
    }

    .checkout-cart-line__remove {
        grid-column: 2;
        justify-self: start;
        padding-left: 0;
    }
}

@media (max-width: 520px) {
    .checkout-cart__heading {
        align-items: start;
        flex-direction: column;
    }

    .checkout-cart-line {
        grid-template-columns: 48px minmax(0, 1fr);
    }

    .checkout-cart-line__price {
        grid-column: 2;
        grid-row: auto;
        text-align: left;
    }

    .checkout-cart-line__remove {
        grid-column: 2;
    }

    .checkout-cart__grid {
        grid-template-columns: 1fr;
    }

    .checkout-cart__wide {
        grid-column: auto;
    }

    .checkout-cart__actions {
        display: grid;
    }

    .checkout-cart__actions button {
        width: 100%;
    }
}