.checkout-page { width: min(100%, var(--page-max)); margin-inline: auto; padding: var(--space-6) var(--page-gutter) var(--space-8); }
.checkout-heading { display: flex; gap: var(--space-5); align-items: end; justify-content: space-between; margin: var(--space-6) 0; }
.checkout-heading h1 { margin: 0; font-size: var(--text-xl); }
.checkout-heading > span { color: var(--color-muted); }
.checkout-steps { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); margin: 0 0 var(--space-6); padding: 0; list-style: none; }
.checkout-steps button { display: flex; width: 100%; min-height: 4rem; gap: var(--space-3); align-items: center; padding: var(--space-3) var(--space-4); color: var(--color-muted); background: transparent; border: 1px solid var(--color-border); border-radius: var(--radius-sm); text-align: left; transition: color var(--motion-fast) ease, background-color var(--motion-fast) ease, border-color var(--motion-fast) ease, opacity var(--motion-fast) ease; }
.checkout-steps button > span { display: grid; width: 2rem; height: 2rem; flex: 0 0 auto; place-items: center; border: 1px solid currentColor; border-radius: 50%; }
.checkout-steps button.is-active { color: var(--color-text); background: var(--color-surface); border-color: var(--color-text); }
.checkout-steps button.is-active > span { color: #fff; background: var(--color-text); border-color: var(--color-text); }
.checkout-steps button[data-step-state="complete"] { color: var(--color-success); background: color-mix(in srgb, var(--color-success) 7%, var(--color-surface)); border-color: color-mix(in srgb, var(--color-success) 55%, transparent); }
.checkout-steps button[data-step-state="complete"] > span { color: #fff; background: var(--color-success); border-color: var(--color-success); }
.checkout-step-content { min-width: 0; }
.checkout-step-content.is-transitioning { overflow: clip; transition: height 220ms var(--ease-standard); }
.checkout-panel.is-entering { animation: checkout-step-enter 220ms var(--ease-standard) both; }
@keyframes checkout-step-enter {
    from { opacity: .01; transform: translate3d(var(--checkout-step-shift, .75rem), 0, 0); }
    to { opacity: 1; transform: translate3d(0, 0, 0); }
}
.checkout-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
.checkout-card__header { display: flex; gap: var(--space-4); align-items: start; justify-content: space-between; padding: var(--space-5); border-bottom: 1px solid var(--color-border); }
.checkout-card__header h2 { margin-bottom: var(--space-2); font-size: var(--text-lg); }
.checkout-card__header p { margin: 0; color: var(--color-muted); font-size: var(--text-sm); }
.checkout-card__header a { border-bottom: 1px solid currentColor; font-size: var(--text-sm); }
.checkout-summary-layout, .checkout-details-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(18rem, 24rem); gap: var(--space-5); align-items: start; }
.checkout-details-main { display: grid; min-width: 0; gap: var(--space-5); }
.checkout-loading { padding: var(--space-5); color: var(--color-muted); font-size: var(--text-sm); }
.checkout-loading.is-error { color: var(--color-error); }
.checkout-items { padding: 0 var(--space-5); }
.checkout-items > .cart-item:first-child { border-top: 0; }
.checkout-items .cart-item__confirmation { grid-column: 1 / -1; }
.checkout-empty { display: grid; min-height: 20rem; place-content: center; justify-items: center; text-align: center; }
.checkout-empty p { color: var(--color-muted); }
.order-summary, .checkout-final { position: sticky; top: calc(var(--header-height) + var(--space-4)); padding: var(--space-5); }
.order-summary header { display: flex; justify-content: space-between; }
.order-summary h2, .checkout-final h2 { font-size: var(--text-lg); }
.order-summary header span { color: var(--color-muted); font-size: var(--text-sm); }
.order-summary dl, .checkout-final dl { display: grid; gap: var(--space-3); margin: var(--space-5) 0; padding: var(--space-4) 0; border-block: 1px solid var(--color-border); }
.order-summary dl div, .checkout-final dl div { display: flex; gap: var(--space-4); justify-content: space-between; }
.order-summary dt, .checkout-final dt { color: var(--color-muted); }
.order-summary dd, .checkout-final dd { margin: 0; text-align: right; }
.order-total { display: flex; gap: var(--space-4); align-items: baseline; justify-content: space-between; margin-bottom: var(--space-5); }
.order-total strong { font-size: 1.65rem; }
.checkout-form { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); padding: var(--space-5); }
.checkout-form .field input[data-validation-state="valid"], .checkout-form .field textarea[data-validation-state="valid"], .delivery-controls .field input[data-validation-state="valid"] { border-color: color-mix(in srgb, var(--color-success) 70%, transparent); }
.checkout-form .field input[data-validation-state="invalid"], .checkout-form .field textarea[data-validation-state="invalid"], .delivery-controls .field input[data-validation-state="invalid"] { border-color: var(--color-error); }
.checkout-form .field input:focus, .checkout-form .field textarea:focus, .delivery-controls .field input:focus { border-color: color-mix(in srgb, var(--color-text) 48%, transparent); }
.field--wide { grid-column: span 2; }
.field--full { grid-column: 1 / -1; }
.delivery-options { margin: 0; padding: var(--space-5); border: 0; }
.delivery-options__list { display: grid; gap: var(--space-3); }
.delivery-options [data-delivery-options] { display: grid; gap: var(--space-3); }
.delivery-option { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-3); align-items: center; padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-sm); transition: color var(--motion-fast) ease, background-color var(--motion-fast) ease, border-color var(--motion-fast) ease, opacity var(--motion-fast) ease; }
.delivery-option:has(input:checked) { border-color: var(--color-text); }
.delivery-option input { width: 1.1rem; height: 1.1rem; accent-color: var(--color-text); }
.delivery-option.is-disabled { color: var(--color-muted); background: var(--color-soft); border-style: dashed; cursor: not-allowed; opacity: .72; }
.delivery-option.is-disabled input { cursor: not-allowed; }
.delivery-option.is-disabled .delivery-option__rate { color: var(--color-text); }
.delivery-option__body { display: grid; min-width: 0; grid-template-columns: minmax(0, 1fr) auto; gap: .2rem var(--space-3); align-items: center; }
.delivery-option__body strong, .delivery-option__body small { grid-column: 1; }
.delivery-option__rate { grid-column: 2; grid-row: 1 / span 2; align-self: center; text-align: right; }
.delivery-option small { color: var(--color-muted); }
.delivery-option b { font-weight: 650; }
.delivery-panel { padding: 0 var(--space-5) var(--space-5); }
.delivery-controls { display: grid; grid-template-columns: minmax(10rem, .7fr) minmax(12rem, 1fr) auto; gap: var(--space-3); align-items: start; }
.delivery-controls .button { margin-top: 0; }
.pickup-view-toggle { display: none; }
.pickup-layout { display: grid; grid-template-columns: minmax(15rem, .8fr) minmax(18rem, 1.2fr); gap: var(--space-3); margin-top: var(--space-3); }
.pickup-list { max-height: 23rem; overflow-y: auto; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
.pickup-item { display: grid; width: 100%; gap: .3rem; padding: var(--space-4); background: transparent; border: 0; border-bottom: 1px solid var(--color-border); text-align: left; transition: color var(--motion-fast) ease, background-color var(--motion-fast) ease, border-color var(--motion-fast) ease, opacity var(--motion-fast) ease; }
.pickup-item:last-child { border-bottom: 0; }
.pickup-item:hover, .pickup-item.is-selected { background: var(--color-soft); }
.pickup-item.is-selected { box-shadow: inset 3px 0 var(--color-text); }
.pickup-item span, .pickup-item small { color: var(--color-muted); }
.pickup-map { min-height: 23rem; overflow: hidden; background: var(--color-soft); border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
.map-placeholder { display: grid; min-height: 23rem; place-content: center; gap: var(--space-2); padding: var(--space-5); color: var(--color-muted); text-align: center; }
.selected-pickup { display: grid; gap: .25rem; margin-top: var(--space-3); padding: var(--space-4); background: var(--color-soft); border-left: 3px solid var(--color-text); }
.selected-pickup span, .selected-pickup small { color: var(--color-muted); }
.post-form { padding-right: 0; padding-left: 0; }
.checkout-final .button + .button { margin-top: var(--space-2); }
.checkout-back { justify-self: start; }

@media (max-width: 60rem) {
    .checkout-summary-layout, .checkout-details-layout { grid-template-columns: 1fr; }
    .order-summary, .checkout-final { position: static; }
}

@media (max-width: 48rem) {
    .checkout-page { padding-top: var(--space-4); }
    .checkout-heading { align-items: start; flex-direction: column; }
    .checkout-steps { gap: var(--space-2); }
    .checkout-steps button { min-height: 3.5rem; padding: var(--space-2); }
    .checkout-steps button strong { font-size: var(--text-xs); }
    .checkout-card__header { flex-direction: column; }
    .checkout-items { padding-inline: var(--space-4); }
    .checkout-form { grid-template-columns: 1fr; padding: var(--space-4); }
    .field--wide, .field--full { grid-column: auto; }
    .delivery-options { padding: var(--space-4); }
    .delivery-option { align-items: start; }
    .delivery-option input { margin-top: .15rem; }
    .delivery-option__body strong { grid-column: 1 / -1; }
    .delivery-option__rate { grid-column: 2; grid-row: 2; align-self: baseline; }
    .delivery-panel { padding: 0 var(--space-4) var(--space-4); }
    .delivery-controls { grid-template-columns: 1fr; }
    .pickup-view-toggle { display: grid; grid-template-columns: 1fr 1fr; margin-top: var(--space-3); border: 1px solid var(--color-border); }
    .pickup-view-toggle button { min-height: 2.75rem; color: var(--color-muted); background: var(--color-surface); border: 0; font-size: var(--text-xs); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
    .pickup-view-toggle button + button { border-left: 1px solid var(--color-border); }
    .pickup-view-toggle button.is-active { color: #fff; background: var(--color-text); }
    .pickup-layout { grid-template-columns: 1fr; }
    .pickup-layout[data-mobile-view="list"] [data-pickup-region="map"], .pickup-layout[data-mobile-view="map"] [data-pickup-region="list"] { display: none; }
    .pickup-list { max-height: 18rem; }
    .pickup-map, .map-placeholder { min-height: 18rem; }
}

@media (prefers-reduced-motion: reduce) {
    .checkout-steps button, .checkout-remove, .delivery-option, .pickup-item { transition-duration: .01ms; }
    .checkout-step-content.is-transitioning { transition: none; }
    .checkout-panel.is-entering { animation: none; transform: none; }
}