/* Focused, restaurant-branded one-page checkout. Tokens are shared with every surface. */
.sr-only { position: absolute; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.checkout-page .page { padding-top: var(--space-6); padding-bottom: var(--space-8); }
.checkout-page .topbar .inner { gap: var(--space-4); }
.checkout-topbar { background: var(--card); box-shadow: none; }
.co-brand-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r); background: var(--brand-tint); color: var(--brand-dark); }
.co-secure { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--muted); }
.co-breadcrumb { display: flex; align-items: center; gap: var(--space-3); color: var(--muted); font-size: var(--text-sm); margin-bottom: var(--space-5); }
.co-breadcrumb a { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--ink-soft); font-weight: var(--fw-medium); min-height: 32px; }
.co-breadcrumb [aria-current] { color: var(--ink); font-weight: var(--fw-semibold); }
.checkout-page .checkout-head { justify-content: space-between; align-items: flex-end; gap: var(--space-5); margin-bottom: var(--space-6); }
.checkout-page .checkout-head h1 { font-size: clamp(1.65rem, 3vw, 2rem); line-height: 1.2; font-weight: var(--fw-bold); letter-spacing: -.035em; }
.checkout-page .checkout-head p { margin: var(--space-2) 0 0; color: var(--muted); font-size: var(--text-sm); }
.checkout-page .checkout-guest { text-align: right; line-height: 1.65; }
.checkout-guest span { display: block; }
.checkout-guest a { color: var(--ink); font-weight: var(--fw-semibold); text-decoration: underline; text-underline-offset: 3px; }
.checkout-page .co-sum-mini { display: none; }
.checkout-page .checkout-layout { grid-template-columns: minmax(0, 1fr) clamp(22.5rem, 25vw, var(--storefront-rail-width)); grid-template-areas: 'fields summary' 'complete summary'; gap: var(--space-5) var(--space-6); align-items: start; }
.checkout-page .co-card { grid-area: fields; min-width: 0; border-radius: var(--r-lg); box-shadow: var(--shadow-sm); }
.checkout-page .co-step { padding: var(--space-5) var(--space-6); }
.checkout-page .co-step-h { align-items: center; gap: var(--space-3); margin-bottom: var(--space-5); }
.co-step-h h2 { font-size: var(--text-lg); font-weight: var(--fw-bold); letter-spacing: -.015em; margin: 0; }
.co-section-icon { width: 32px; height: 32px; border-radius: var(--r-md); display: grid; place-items: center; color: var(--ink-soft); background: var(--tint-row); border: 1px solid var(--line); }
.checkout-page fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.checkout-page .co-choices { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--space-3); }
.co-choice { position: relative; display: flex; gap: var(--space-3); align-items: center; padding: var(--space-4); padding-right: var(--space-6); min-height: 88px; border: 1px solid var(--line-strong); border-radius: var(--r); cursor: pointer; transition: border-color var(--t), box-shadow var(--t), background var(--t); }
.co-choice:hover { background: var(--tint-row); border-color: var(--muted); }
.co-choice:has(input:checked) { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); background: var(--card); }
.co-choice:has(input:focus-visible) { outline: 3px solid var(--brand-soft); outline-offset: 3px; }
.co-choice input { position: absolute; top: var(--space-2); right: var(--space-2); width: 16px; height: 16px; margin: 0; accent-color: var(--brand); }
.co-choice-icon { flex: 0 0 auto; display: flex; color: var(--muted); }
.co-choice:has(input:checked) .co-choice-icon { color: var(--brand-dark); }
.co-choice strong { display: block; font-size: var(--text-sm); color: var(--ink); }
.co-choice small { display: block; margin-top: var(--space-1); font-size: var(--text-xs); line-height: 1.4; color: var(--muted); overflow-wrap: anywhere; }
.checkout-page .co-timing { margin-top: var(--space-5); display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); }
.co-timing legend { padding: 0; margin-bottom: var(--space-2); font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--ink); }
.co-timing label { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 32px; font-size: var(--text-sm); cursor: pointer; }
.co-timing input { width: 17px; height: 17px; margin: 0; accent-color: var(--brand); }
.checkout-page .co-time-select { margin: var(--space-3) 0 0; max-width: 240px; }
.co-fields { display: grid; gap: var(--space-4); min-width: 0; }
.co-contact-fields { grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.co-postal-city { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,2fr); gap: var(--space-4); }
.checkout-page .co-field { margin: 0; min-width: 0; }
.checkout-page .co-field label, .checkout-page .co-time-select label { display: flex; align-items: baseline; gap: var(--space-1); font-weight: var(--fw-medium); font-size: var(--text-sm); margin-bottom: var(--space-2); color: var(--ink-soft); }
.checkout-page .co-field input, .checkout-page select, .checkout-page textarea { width: 100%; min-height: 48px; border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--card); padding: var(--space-3); font-size: var(--text-base); transition: border-color var(--t), box-shadow var(--t); }
.checkout-page input:hover, .checkout-page select:hover { border-color: var(--muted); }
.checkout-page input:focus, .checkout-page textarea:focus, .checkout-page select:focus { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); outline: none; }
.checkout-page .co-field input[aria-invalid] { border-color: var(--danger); }
.co-section-help { margin: calc(-1 * var(--space-3)) 0 var(--space-4); font-size: var(--text-xs); color: var(--muted); }
.co-required { color: var(--muted); }
.co-field-help, .co-account-email { font-size: var(--text-xs); color: var(--muted); margin: var(--space-2) 0 0; }
.co-account-email { display: flex; align-items: flex-start; gap: var(--space-2); padding-top: var(--space-3); color: var(--ink-soft); overflow-wrap: anywhere; }
.co-account-email .ico { color: var(--ok); flex-shrink: 0; margin-top: 2px; }
.checkout-page .pay-list { border: 1px solid var(--line-strong); border-radius: var(--r); overflow: hidden; }
.checkout-page .pay-opt { min-height: 80px; padding: var(--space-4); gap: var(--space-3); }
.checkout-page .pay-opt:has(input:checked) { background: var(--tint-row); box-shadow: none; }
.checkout-page .pay-opt input:checked { border-color: var(--ink); background: var(--ink); }
.checkout-page .pay-name { font-size: var(--text-sm); display: block; }
.checkout-page .pay-sub { display: block; font-size: var(--text-xs); margin-top: var(--space-1); }
.checkout-page .co-note { margin-top: var(--space-5); }
.co-note summary { display: flex; align-items: center; gap: var(--space-2); min-height: 44px; font-size: var(--text-sm); font-weight: var(--fw-medium); cursor: pointer; list-style: none; }
.co-note summary::-webkit-details-marker { display: none; }
.co-note summary span { color: var(--muted); font-weight: var(--fw-normal); font-size: var(--text-xs); }
.co-note summary > .ico:last-child { margin-left: auto; }
.co-note[open] summary > .ico:last-child { transform: rotate(45deg); }
.co-note .form-row { margin: var(--space-2) 0 0; }
.checkout-page .co-note textarea { min-height: 80px; resize: vertical; }
.checkout-page .co-summary { grid-area: summary; min-width: 0; position: sticky; top: calc(var(--bar-h) + var(--space-5)); max-height: calc(100dvh - var(--bar-h) - var(--space-8)); overflow-y: auto; scrollbar-width: thin; }
.co-summary-card { border: 1px solid var(--line); background: var(--card); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); overflow: hidden; }
.co-summary-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-5); border-bottom: 1px solid var(--line); }
.co-eyebrow { font-size: var(--text-xs); color: var(--muted); font-weight: var(--fw-medium); display: block; margin-bottom: var(--space-1); }
.co-summary-head h2 { margin: 0; font-size: var(--text-lg); letter-spacing: -.02em; }
.co-summary-head a { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--text-xs); font-weight: var(--fw-semibold); color: var(--ink-soft); min-height: 36px; }
.co-order-lines { padding: 0 var(--space-5); }
.co-order-line { display: grid; grid-template-columns: 48px minmax(0,1fr) auto; align-items: start; gap: var(--space-3); padding: var(--space-5) 0; }
.co-order-line + .co-order-line { border-top: 1px solid var(--line); }
.co-item-image { width: 48px; height: 48px; display: grid; place-items: center; background: var(--fill-muted); color: var(--muted); border-radius: var(--r-md); position: relative; }
.co-item-image img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.co-item-image span { position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; padding: 0 var(--space-1); border-radius: var(--pill); display: grid; place-items: center; background: var(--ink-soft); color: var(--brand-contrast); font-size: var(--text-xs); border: 2px solid var(--card); }
.co-item-info strong { display: block; font-size: var(--text-sm); font-weight: var(--fw-semibold); line-height: 1.45; overflow-wrap: anywhere; }
.co-item-info small { display: block; color: var(--muted); font-size: var(--text-xs); line-height: 1.5; margin-top: var(--space-1); }
.co-item-price { font-size: var(--text-sm); font-weight: var(--fw-semibold); white-space: nowrap; font-variant-numeric: var(--num); }
.co-totals { padding: var(--space-5); background: var(--tint-row); border-top: 1px solid var(--line); }
.co-totals .sum-row { font-size: var(--text-sm); margin-bottom: var(--space-2); }
.co-totals .sum-total { font-size: var(--text-xl); padding-top: var(--space-4); margin-top: var(--space-4); }
.co-totals .sum-vat { margin: var(--space-1) 0 0; font-size: var(--text-xs); }
.co-order-method { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-4) var(--space-5); font-size: var(--text-xs); color: var(--ink-soft); border-top: 1px solid var(--line); }
.co-direct-note { display: flex; justify-content: center; align-items: flex-start; gap: var(--space-2); font-size: var(--text-xs); color: var(--muted); text-align: center; margin: var(--space-4) var(--space-3) var(--space-2); }
.co-direct-note .ico { flex: 0 0 auto; }
.co-help-link { display: flex; align-items: center; justify-content: center; gap: var(--space-2); color: var(--ink-soft); font-size: var(--text-xs); min-height: 36px; }
.co-complete { grid-area: complete; min-width: 0; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--space-5) var(--space-6); box-shadow: var(--shadow-sm); }
.checkout-page .vendor-notice { padding: 0; margin: 0 0 var(--space-4); border: 0; background: none; font-size: var(--text-xs); line-height: 1.65; color: var(--muted); }
.checkout-page .vendor-notice a { color: var(--ink-soft); text-decoration: underline; text-underline-offset: 2px; }
.co-submit-total { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-4); font-size: var(--text-lg); }
.co-submit-total strong { font-variant-numeric: var(--num); }
.checkout-page .co-complete .rail-cta { margin-top: 0; min-height: 52px; height: auto; gap: var(--space-2); padding: var(--space-4); }
.co-complete .rail-cta > .ico:last-child { margin-left: auto; }
.co-complete .rail-cta > .ico:first-child { margin-right: auto; }
.co-payment-hint { font-size: var(--text-xs); color: var(--muted); margin: var(--space-3) 0 0; text-align: center; }
.co-complete .co-errsum { margin: 0 0 var(--space-4); }
.checkout-page [hidden] { display: none !important; }
.checkout-page :is(input, select, textarea, [tabindex], h2) { scroll-margin-top: calc(var(--bar-h) + var(--space-5)); }
@media (min-width: 1280px) {
    .co-address-fields { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
}
@media (min-width: 1600px) {
    .co-complete { display: grid; grid-template-columns: minmax(0, 1fr) minmax(20rem, .85fr); align-items: center; gap: var(--space-5) var(--space-6); }
    .co-complete > :is(.co-errsum, .alert) { grid-column: 1 / -1; }
    .checkout-page .co-complete .vendor-notice { margin: 0; }
}
@media (max-width: 1100px) {
    .checkout-page .checkout-layout { grid-template-columns: minmax(0,1fr) 320px; gap: var(--space-5); }
    .checkout-page .co-step, .co-complete { padding: var(--space-5); }
    .checkout-page .checkout-head { align-items: flex-start; }
    .checkout-page .checkout-guest { text-align: left; }
    .co-choice { gap: var(--space-2); padding-left: var(--space-3); }
    .co-choice-icon { display: none; }
}
@media (max-width: 1023px) {
    .checkout-page .page { padding-top: var(--space-4); }
    .checkout-page .checkout-layout { grid-template-columns: minmax(0,1fr); grid-template-areas: 'fields' 'summary' 'complete'; gap: var(--space-4); }
    .checkout-page .co-summary { position: static; max-height: none; overflow: visible; }
    .checkout-page .checkout-head { margin-bottom: var(--space-5); gap: var(--space-2); }
    .checkout-page .co-step { padding: var(--space-5) var(--space-4); }
    .checkout-page .co-step-h { margin-bottom: var(--space-4); }
    .checkout-page .co-sum-mini { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: var(--space-4); margin-bottom: var(--space-4); border: 1px solid var(--line); border-radius: var(--r); color: var(--ink); background: var(--card); font-size: var(--text-sm); }
    .co-sum-mini > span { display: flex; align-items: center; gap: var(--space-2); }
    .co-sum-mini strong { margin-left: auto; white-space: nowrap; }
    .co-breadcrumb { margin-bottom: var(--space-4); }
    .co-choice-icon { display: flex; }
    .co-secure { font-size: var(--text-xs); }
    .checkout-page .topbar .inner { gap: var(--space-2); }
    .co-brand-icon { display: none; }
    .checkout-page .co-complete { padding: var(--space-5) var(--space-4); }
    .co-direct-note { margin-top: var(--space-4); }
}
@media (max-width: 380px) {
    .co-secure { max-width: 82px; line-height: 1.3; }
    .co-choice-icon { display: none; }
    .co-step-h h2 { font-size: var(--text-base); }
}

.co-tip-optional { margin-left: auto; color: var(--muted); font-size: var(--text-xs); }
.co-tip-help { margin: 0 0 var(--space-4); font-size: var(--text-sm); color: var(--muted); line-height: 1.6; }
.co-tip-options { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.co-tip-options button { flex: 1 0 auto; min-height: 44px; border: 1px solid var(--line-strong); border-radius: var(--r-md); padding: var(--space-2) var(--space-3); background: var(--card); color: var(--ink-soft); font: inherit; font-size: var(--text-sm); font-weight: var(--fw-medium); cursor: pointer; }
.co-tip-options button[aria-pressed="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); background: var(--tint-row); color: var(--ink); }
.co-tip-options button:disabled { opacity: .5; cursor: default; }
.checkout-page .co-tip-custom { margin: var(--space-4) 0 0; }
.co-tip-custom label { font-size: var(--text-sm); font-weight: var(--fw-medium); }
.co-tip-custom input { max-width: 200px; }
.co-tip-custom .co-field-help { display: block; }
.checkout-page .co-note-step .co-note { margin: 0; }
.checkout-page .co-note-step { padding-top: var(--space-3); padding-bottom: var(--space-3); }

.checkout-page #co-summary { scroll-margin-top: calc(var(--bar-h) + var(--space-5)); }

@media (max-height: 540px) and (min-width: 1024px) {
    .checkout-page .co-summary { position: static; max-height: none; overflow: visible; }
}