/* cart.css — the Smart Cart (concept B) production skin for the OutBaking Go storefront: the
   cart → 4-step checkout wizard → order-journey confirmation, in the homepage visual language.

   The token layer (:root + :root[data-theme="dark"]) and the component kit are carried VERBATIM from
   the ratified design docs/design/cart/concept-b-smart-cart.html so the built cart stays byte-consistent
   with the storefront home. Tri-theme (DD-33): a pre-paint no-flash bootstrap sets data-theme to the
   RESOLVED light/dark and data-theme-mode to the chosen mode; every color is a token. The only
   adaptations from the mockup: the single-page .screen router is gone (each stage is a real server
   page) and the concept-tag/demo chrome is dropped. */

/* WCAG AA contrast (operator report 2026-07-26).
   --text-tertiary was #94A3B8 (light) / #64748B (dark): 2.28:1 and 3.07:1 against the surfaces it
   actually sits on, so EVERY muted label on the shop + PDP failed WCAG AA 1.4.3 (4.5:1 for text
   under 18.66px) — breadcrumb current page, .pdp__eyebrow, .per, .pdp__note, the spec <dt>s, the
   band .sub, .ftr__meta. Raised to the SMALLEST change that clears the bar with a margin
   (worst case 4.61:1 light / 4.63:1 dark), holding the slate hue and saturation so the palette's
   character is unchanged — only lightness moves. The worst case is solved against every declared
   surface (--bg-primary/-secondary/-accent and --warm-tint), not just the one axe happened to
   flag, so the fix is complete rather than page-specific. The primary/secondary/tertiary hierarchy
   is preserved: on white, secondary 7.58:1 > tertiary 5.18:1. */

/* ===== SHARED KIT — the palette is GENERATED from tools/designtokens/design-tokens.json =====
   This file declares no colour of its own (DD-42 SD-1/SD-2). The money path's --ok/--warn are what
   the tier converged ON (SD-4), moved in lightness only to clear 4.5:1 as text — so the cart's own
   appearance is the one that barely moves. Geometry stays per-surface. */
:root,:root[data-theme="light"]{
  color-scheme:light;
  /* brand */
  --ukraine-blue:#0057B7;
  --ukraine-yellow:#FFD700;
  --ukraine-blue-light:#4A90E2;
  --ukraine-yellow-light:#FFE55C;
  --ukraine-blue-hover:#0064cf;
  --ukraine-yellow-ink:#0A1628;
  --ukraine-gradient:linear-gradient(135deg,#0057B7 0%,#FFD700 100%);
  /* surfaces */
  --bg-primary:#FFFFFF;
  --bg-secondary:#F8F9FB;
  --bg-accent:#EEF2F7;
  --warm-tint:#FFFBEB;
  --warm-band:linear-gradient(180deg,#FFFCF2 0%,#F8F9FB 100%);
  /* text */
  --text-primary:#0A1628;
  --text-secondary:#475569;
  --text-tertiary:#636E7C;
  /* lines and elevation */
  --border:rgba(15,23,42,.08);
  --border-strong:rgba(15,23,42,.16);
  --shadow:0 4px 24px rgba(0,0,0,.06);
  --shadow-lg:0 12px 48px rgba(0,0,0,.10);
  --shadow-color:rgba(0,0,0,.18);
  --scrim:rgba(4,10,22,.55);
  /* accent */
  --accent:var(--ukraine-blue);
  --accent-ink:#0057B7;
  --on-accent:#FFFFFF;
  --fc:var(--ukraine-blue);
  /* semantic state */
  --ok:#1A7743;
  --ok-bg:rgba(26,119,67,.12);
  --warn:#846718;
  --warn-bg:rgba(255,215,0,.14);
  --danger:#CA2D2D;
  --danger-bg:rgba(202,45,45,.10);
  --info:#0057B7;
  --info-bg:rgba(0,87,183,.08);
  /* typography */
  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}

:root[data-theme="dark"]{
  color-scheme:dark;
  /* brand */
  --ukraine-blue-light:#60A5FA;
  --ukraine-yellow-light:#FBBF24;
  --ukraine-blue-hover:#1f76d6;
  /* surfaces */
  --bg-primary:#0A1628;
  --bg-secondary:#0F1B2D;
  --bg-accent:#1E293B;
  --warm-tint:#15233c;
  --warm-band:linear-gradient(180deg,#12203a 0%,#0F1B2D 100%);
  /* text */
  --text-primary:#F8FAFC;
  --text-secondary:#CBD5E1;
  --text-tertiary:#8592A4;
  /* lines and elevation */
  --border:rgba(248,250,252,.08);
  --border-strong:rgba(248,250,252,.18);
  --shadow:0 4px 24px rgba(0,0,0,.5);
  --shadow-lg:0 12px 48px rgba(0,0,0,.7);
  --shadow-color:rgba(0,0,0,.5);
  /* accent */
  --accent-ink:#7DB2F5;
  /* semantic state */
  --ok:#5BD98C;
  --ok-bg:rgba(91,217,140,.14);
  --warn:#FBBF24;
  --warn-bg:rgba(251,191,36,.14);
  --danger:#E07171;
  --danger-bg:rgba(224,113,113,.12);
  --info:#7DB2F5;
  --info-bg:rgba(125,178,245,.10);
}

@media (prefers-color-scheme:dark){
:root:not([data-theme="light"]){
  color-scheme:dark;
  /* brand */
  --ukraine-blue-light:#60A5FA;
  --ukraine-yellow-light:#FBBF24;
  --ukraine-blue-hover:#1f76d6;
  /* surfaces */
  --bg-primary:#0A1628;
  --bg-secondary:#0F1B2D;
  --bg-accent:#1E293B;
  --warm-tint:#15233c;
  --warm-band:linear-gradient(180deg,#12203a 0%,#0F1B2D 100%);
  /* text */
  --text-primary:#F8FAFC;
  --text-secondary:#CBD5E1;
  --text-tertiary:#8592A4;
  /* lines and elevation */
  --border:rgba(248,250,252,.08);
  --border-strong:rgba(248,250,252,.18);
  --shadow:0 4px 24px rgba(0,0,0,.5);
  --shadow-lg:0 12px 48px rgba(0,0,0,.7);
  --shadow-color:rgba(0,0,0,.5);
  /* accent */
  --accent-ink:#7DB2F5;
  /* semantic state */
  --ok:#5BD98C;
  --ok-bg:rgba(91,217,140,.14);
  --warn:#FBBF24;
  --warn-bg:rgba(251,191,36,.14);
  --danger:#E07171;
  --danger-bg:rgba(224,113,113,.12);
  --info:#7DB2F5;
  --info-bg:rgba(125,178,245,.10);
}
}
:root{
  --radius:20px; --radius-sm:12px; --radius-pill:999px;
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
/* The [hidden] attribute must beat component display rules (.gift-toggle/.upsell/.sum-line set an
   explicit display, which would otherwise override the UA [hidden]{display:none}). JS toggles .hidden
   to show/hide the wrap add-on, the gift-wrap summary line, the upsell, the empty state, etc. */
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:var(--bg-primary);color:var(--text-primary);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;padding-bottom:40px;transition:background-color .5s cubic-bezier(.4,0,.2,1),color .5s cubic-bezier(.4,0,.2,1)}
img{max-width:100%;display:block} button{font-family:inherit;cursor:pointer}
h1,h2,h3,h4{line-height:1.15;letter-spacing:-.02em;font-weight:800}
a{color:var(--ukraine-blue);text-decoration:none}
:where(a,button,input,textarea,select,[tabindex]):focus-visible{outline:2.5px solid var(--ukraine-blue-light);outline-offset:2px;border-radius:8px}
.container{width:100%;max-width:960px;margin-inline:auto;padding-inline:clamp(16px,4vw,32px)}
.shimmer{background:linear-gradient(135deg,var(--ukraine-blue) 0%,var(--ukraine-yellow) 33%,var(--ukraine-blue) 66%,var(--ukraine-yellow) 100%);background-size:300% auto;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:shimmer 6s linear infinite}
@keyframes shimmer{0%{background-position:0% center}100%{background-position:300% center}}
@media (prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;transition-duration:.001ms!important}}
header{position:fixed;top:0;width:100%;padding:16px clamp(16px,4vw,40px);z-index:1000;border-bottom:1px solid var(--border);backdrop-filter:blur(20px);background:color-mix(in srgb,var(--bg-primary) 82%,transparent);transition:all .5s ease}
.header-inner{max-width:1180px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;gap:16px}
.logo{font-weight:800;font-size:1.15rem;letter-spacing:-.02em;color:var(--text-primary);display:inline-flex;align-items:center;gap:8px}
.logo .diamond{color:var(--ukraine-blue)}
nav ul{display:flex;list-style:none;gap:36px}
nav a{color:var(--text-primary);font-weight:600;font-size:.8rem;letter-spacing:.5px;text-transform:uppercase;position:relative}
nav a::after{content:'';position:absolute;bottom:-6px;left:0;width:0;height:2px;background:var(--ukraine-gradient);transition:width .35s}
nav a:hover{color:var(--ukraine-blue)} nav a:hover::after{width:100%}
.cart-pill{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:var(--radius-pill);border:1px solid var(--border-strong);background:var(--bg-secondary);font-weight:700;font-size:.9rem;color:var(--text-primary)}
.cart-pill .count{min-width:22px;height:22px;padding:0 6px;border-radius:var(--radius-pill);background:var(--ukraine-blue);color:var(--on-accent);display:inline-flex;align-items:center;justify-content:center;font-size:.78rem}
@media(max-width:820px){nav ul{display:none}}
.header-actions{display:flex;align-items:center;gap:12px}
.theme-switch{display:inline-flex;gap:3px;padding:4px;border-radius:var(--radius-pill);border:1px solid var(--border-strong);background:var(--bg-secondary)}
.theme-opt{width:36px;height:36px;border:none;border-radius:var(--radius-pill);background:transparent;font-size:1rem;display:flex;align-items:center;justify-content:center;color:var(--text-secondary);transition:all .25s}
.theme-opt:hover{background:var(--bg-accent);color:var(--text-primary)}
.theme-opt[aria-pressed="true"]{background:var(--ukraine-gradient);color:var(--on-accent);box-shadow:0 2px 10px color-mix(in srgb,var(--ukraine-blue) 40%,transparent)}
@media(max-width:600px){.theme-opt{width:32px;height:32px;font-size:.9rem}}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:15px 34px;border:2px solid transparent;border-radius:var(--radius-sm);font-weight:700;font-size:.95rem;letter-spacing:.5px;position:relative;overflow:hidden;background:var(--ukraine-blue);color:var(--on-accent);transition:all .4s cubic-bezier(.4,0,.2,1)}
.btn::before{content:'';position:absolute;inset:0;left:-100%;background:var(--ukraine-gradient);transition:left .5s cubic-bezier(.4,0,.2,1);z-index:0}
.btn>*{position:relative;z-index:1}
.btn:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)} .btn:hover::before{left:0}
.btn:disabled{opacity:.5;transform:none;box-shadow:none;cursor:not-allowed} .btn:disabled::before{left:-100%}
.btn-ghost{background:transparent;color:var(--text-primary);border-color:var(--border-strong)}
.btn-ghost::before{display:none} .btn-ghost:hover{border-color:var(--ukraine-blue);color:var(--ukraine-blue);transform:none;box-shadow:none}
.btn-block{width:100%} .btn-lg{padding:18px 40px;font-size:1.05rem}
.screen{padding-top:104px;animation:fade .4s ease}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.section-head{text-align:center;margin:24px 0 28px}
.section-head .eyebrow{font-size:.8rem;letter-spacing:3px;text-transform:uppercase;color:var(--ukraine-blue);font-weight:700;margin-bottom:12px}
.section-head h1{font-size:clamp(2.2rem,5vw,3.6rem);margin-bottom:10px}
.section-head p{color:var(--text-secondary);font-size:1.05rem;max-width:560px;margin:0 auto}
.back-link{display:inline-flex;align-items:center;gap:6px;color:var(--text-secondary);font-weight:600;margin-bottom:8px}
.back-link:hover{color:var(--ukraine-blue)}
.card{background:var(--bg-primary);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:clamp(20px,3vw,28px);margin-bottom:20px}
:root[data-theme="dark"] .card{background:var(--bg-secondary)}
footer.ftr{margin-top:40px;padding:32px 0;border-top:1px solid var(--border);text-align:center;color:var(--text-tertiary);font-size:.85rem}
.toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--text-primary);color:var(--bg-primary);padding:12px 22px;border-radius:var(--radius-pill);font-weight:600;z-index:9999;opacity:0;transition:all .3s;box-shadow:var(--shadow-lg);pointer-events:none}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ===== CONCEPT B — SMART CART ===== */
/* Smart suggestion banner (INHERITED cart3), homepage-gradient. */
.smart-banner{border-radius:var(--radius);padding:20px 22px;margin-bottom:20px;color:var(--on-accent);background:var(--ukraine-gradient);box-shadow:var(--shadow);display:none;animation:slidedown .35s ease}
.smart-banner.show{display:block}
@keyframes slidedown{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.sb-head{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.sb-head .t{font-weight:800;font-size:1.05rem} .sb-dismiss{margin-left:auto;background:color-mix(in srgb,var(--on-accent) 25%,transparent);border:none;color:var(--on-accent);border-radius:var(--radius-pill);padding:5px 12px;font-size:.78rem;font-weight:600}
.sb-text{opacity:.95;margin-bottom:14px;font-size:.95rem}
.sb-actions{display:flex;gap:10px;flex-wrap:wrap}
.sb-btn{background:var(--on-accent);color:var(--ukraine-blue);border:none;padding:10px 18px;border-radius:var(--radius-pill);font-weight:700;font-size:.88rem;transition:transform .15s}
.sb-btn:hover{transform:translateY(-2px)}
.sb-btn.sec{background:color-mix(in srgb,var(--on-accent) 20%,transparent);color:var(--on-accent);border:1.5px solid color-mix(in srgb,var(--on-accent) 50%,transparent)}

/* Progress ring (INHERITED cart3) + Tuesday freshness card */
.status-row{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:center}
@media(max-width:560px){.status-row{grid-template-columns:1fr;text-align:center;justify-items:center}}
.ring{width:92px;height:92px;position:relative;flex-shrink:0}
.ring svg{transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:9}
.ring .bg{stroke:var(--bg-accent)} .ring .fg{stroke:var(--ukraine-blue);stroke-linecap:round;transition:stroke-dashoffset .6s cubic-bezier(.4,0,.2,1)}
.ring.done .fg{stroke:var(--ok)}
.ring .lbl{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1rem}
.status-info h4{font-size:1.15rem;margin-bottom:3px} .status-info p{color:var(--text-secondary);font-size:.9rem}
.tuesday{display:flex;gap:14px;align-items:center;padding:16px 18px;border-radius:var(--radius-sm);background:var(--ok-bg);border:1px solid color-mix(in srgb,var(--ok) 30%,transparent);margin-top:16px}
.tuesday .ic{font-size:1.8rem} .tuesday b{display:block} .tuesday span{font-size:.85rem;color:var(--text-secondary)}

/* Cart line items with big steppers (INHERITED cart3) */
.line{display:flex;gap:16px;align-items:center;padding:18px 0;border-bottom:1px solid var(--border);position:relative}
.line:last-child{border-bottom:none}
.line-img{width:74px;height:74px;border-radius:var(--radius-sm);object-fit:cover;flex-shrink:0;border:2px solid var(--border-strong);background:var(--bg-accent)}
.line-info{flex:1;min-width:0}
.line-name{font-weight:700;font-size:1.05rem} .line-price{color:var(--text-secondary);font-size:.85rem;margin-bottom:8px}
.quick-add{display:flex;gap:6px;flex-wrap:wrap}
.quick-add button{padding:5px 12px;border:1.5px solid var(--border-strong);border-radius:var(--radius-pill);background:transparent;font-size:.78rem;font-weight:600;color:var(--text-secondary);transition:all .2s}
.quick-add button:hover{border-color:var(--ukraine-blue);color:var(--ukraine-blue)}
.quick-add button.bump{border-color:var(--ok);color:var(--ok)}
.stepper{display:flex;align-items:center;background:var(--bg-secondary);border-radius:var(--radius-pill);padding:5px;flex-shrink:0}
.step-btn{width:46px;height:46px;border:none;border-radius:50%;font-size:1.6rem;font-weight:300;display:flex;align-items:center;justify-content:center;transition:transform .15s}
.step-btn.minus{background:var(--danger);color:var(--on-accent)} .step-btn.plus{background:var(--ukraine-blue);color:var(--on-accent)}
.step-btn:hover{transform:scale(1.1)} .step-btn:active{transform:scale(.92)} .step-btn:disabled{opacity:.35;transform:none}
.step-input{width:52px;height:46px;border:none;background:transparent;text-align:center;font-size:1.3rem;font-weight:800;color:var(--text-primary);-moz-appearance:textfield}
.step-input::-webkit-inner-spin-button,.step-input::-webkit-outer-spin-button{-webkit-appearance:none}
.line-sub{font-weight:800;font-size:1.05rem;min-width:64px;text-align:right}
.line-x{background:none;border:none;color:var(--text-tertiary);font-size:1.2rem;padding:6px}
.line-x:hover{color:var(--danger)}
@media(max-width:600px){.line{flex-wrap:wrap}.line-sub{width:100%;text-align:right}.line-x{position:absolute;top:14px;right:0}}

/* Add-more chips (INHERITED cart3) */
.add-more{border:2px dashed var(--border-strong);border-radius:var(--radius-sm);padding:20px;text-align:center;background:var(--bg-secondary)}
.chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:14px}
.chip{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border:2px solid var(--border-strong);border-radius:var(--radius-pill);background:var(--bg-primary);font-weight:600;transition:all .2s;color:var(--text-primary)}
:root[data-theme="dark"] .chip{background:var(--bg-accent)}
.chip:hover{border-color:var(--ukraine-blue);transform:translateY(-2px);box-shadow:var(--shadow)}
.chip .d{width:13px;height:13px;border-radius:50%} .chip .p{color:var(--text-tertiary);font-size:.82rem}

/* CROSS-SELL "pairs well with" (roadmap #3 — catalog-driven) */
.xsell h3{margin-bottom:4px} .xsell .sub{color:var(--text-secondary);font-size:.88rem;margin-bottom:16px}
.xsell-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px}
.xsell-card{border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden;background:var(--bg-primary);transition:all .3s}
:root[data-theme="dark"] .xsell-card{background:var(--bg-accent)}
.xsell-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--ukraine-blue)}
.xsell-card img{height:104px;width:100%;object-fit:cover;background:var(--bg-accent)}
.xsell-body{padding:12px} .xsell-body .n{font-weight:700;font-size:.92rem} .xsell-body .p{color:var(--text-secondary);font-size:.82rem;margin-bottom:8px}
.xsell-add{width:100%;padding:8px;border:1.5px solid var(--ukraine-blue);color:var(--ukraine-blue);background:transparent;border-radius:9px;font-weight:700;font-size:.82rem;transition:all .2s}
.xsell-add:hover{background:var(--ukraine-blue);color:var(--on-accent)}

/* UPSELL box banner (roadmap #7 — real operator-priced boxes) */
.upsell{display:flex;gap:16px;align-items:center;border-radius:var(--radius);padding:18px 20px;border:2px solid var(--ukraine-yellow);background:var(--warn-bg);margin-bottom:20px;flex-wrap:wrap}
.upsell .ic{font-size:2rem} .upsell .txt{flex:1;min-width:180px} .upsell b{display:block;font-size:1.02rem} .upsell span{font-size:.86rem;color:var(--text-secondary)}

/* Gift options (roadmap #5) */
.gift-opts{display:flex;flex-direction:column;gap:14px}
.gift-toggle{display:flex;align-items:center;gap:12px}
.switch{position:relative;width:46px;height:26px;flex-shrink:0}
.switch input{opacity:0;width:0;height:0}
.switch .slider{position:absolute;inset:0;background:var(--border-strong);border-radius:var(--radius-pill);transition:.3s}
.switch .slider::before{content:'';position:absolute;height:20px;width:20px;left:3px;top:3px;background:var(--on-accent);border-radius:50%;transition:.3s}
.switch input:checked+.slider{background:var(--ukraine-blue)} .switch input:checked+.slider::before{transform:translateX(20px)}
.gift-note{width:100%;padding:12px;border:2px solid var(--border-strong);border-radius:var(--radius-sm);background:var(--bg-primary);color:var(--text-primary);font-family:inherit;resize:vertical}
:root[data-theme="dark"] .gift-note{background:var(--bg-accent)}

/* Order summary */
.sum-line{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid var(--border);font-size:.95rem}
.sum-line .lbl{color:var(--text-secondary)}
.sum-line.total{border-bottom:none;border-top:2px solid var(--ukraine-blue);margin-top:8px;padding-top:14px;font-size:1.25rem;font-weight:800}
.sum-line.total .amt{color:var(--ukraine-blue)} :root[data-theme="dark"] .sum-line.total .amt{color:var(--ukraine-yellow)}
.empty{text-align:center;padding:56px 20px}
.empty .ic{font-size:4rem;opacity:.3;margin-bottom:14px}

/* ===== Checkout wizard ===== */
.steps{display:flex;align-items:center;gap:8px;justify-content:center;margin-bottom:26px;flex-wrap:wrap}
.step-pip{display:flex;align-items:center;gap:8px}
.pip{width:32px;height:32px;border-radius:50%;background:var(--bg-accent);color:var(--text-secondary);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.88rem;border:2px solid var(--border-strong);transition:all .3s}
.step-pip.on .pip{background:var(--ukraine-gradient);color:var(--on-accent);border-color:transparent}
.step-pip.done .pip{background:var(--ok);color:var(--on-accent);border-color:transparent}
.step-pip .nm{font-size:.82rem;font-weight:700;color:var(--text-secondary)} .step-pip.on .nm{color:var(--text-primary)}
.step-bar{width:26px;height:2px;background:var(--border-strong)}
@media(max-width:600px){.step-pip .nm{display:none}.step-bar{width:16px}}
.wizard-step{display:none} .wizard-step.active{display:block;animation:fade .3s ease}
.field{margin-bottom:16px}
.field label{display:block;font-weight:700;font-size:.85rem;margin-bottom:6px}
.field .opt{color:var(--text-tertiary);font-weight:500;font-size:.78rem}
.field input,.field textarea,.field select{width:100%;padding:13px 14px;border:2px solid var(--border-strong);border-radius:var(--radius-sm);background:var(--bg-primary);color:var(--text-primary);font-size:1rem;font-family:inherit;transition:border-color .2s}
:root[data-theme="dark"] .field input,:root[data-theme="dark"] .field textarea,:root[data-theme="dark"] .field select{background:var(--bg-accent)}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--ukraine-blue)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px} @media(max-width:520px){.field-row{grid-template-columns:1fr}}
.fulfil-opts{display:grid;grid-template-columns:1fr 1fr;gap:12px} @media(max-width:520px){.fulfil-opts{grid-template-columns:1fr}}
.fulfil{border:2px solid var(--border-strong);border-radius:var(--radius-sm);padding:16px;cursor:pointer;transition:all .2s}
.fulfil.on{border-color:var(--ukraine-blue);background:var(--bg-accent)}
.fulfil b{display:block;margin-bottom:3px} .fulfil span{font-size:.82rem;color:var(--text-secondary)}
.sq-card{border:2px solid var(--border-strong);border-radius:var(--radius-sm);padding:18px;background:var(--bg-secondary);min-height:70px}
.sq-note{font-size:.78rem;color:var(--text-tertiary);text-align:center;margin-top:12px}
.co-badge{display:inline-block;background:var(--warn-bg);color:var(--warn);border:1px solid color-mix(in srgb,var(--warn) 40%,transparent);border-radius:var(--radius-pill);padding:6px 14px;font-size:.82rem;font-weight:700;margin-bottom:14px}
.co-err{background:var(--danger-bg);color:var(--danger);border:1px solid color-mix(in srgb,var(--danger) 40%,transparent);border-radius:var(--radius-sm);padding:12px 14px;font-weight:600;font-size:.9rem;margin-top:14px}
.wizard-nav{display:flex;justify-content:space-between;gap:12px;margin-top:20px}
.is-busy{opacity:.7;pointer-events:none}

/* Delivery-address autocomplete dropdown — OUR OWN menu (checkout.js renders it from the Places data
   API), fully token-themed so the suggestions match light/dark/system. Anchored to the street field. */
.ob-ac-host{position:relative}
.ob-ac-menu{position:absolute;top:100%;left:0;right:0;z-index:1100;margin-top:6px;background:var(--bg-primary);border:1px solid var(--border-strong);border-radius:var(--radius-sm);box-shadow:var(--shadow-lg);overflow:hidden auto;max-height:288px}
:root[data-theme="dark"] .ob-ac-menu{background:var(--bg-secondary)}
.ob-ac-item{padding:11px 14px;font-size:.92rem;color:var(--text-secondary);cursor:pointer;border-top:1px solid var(--border)}
.ob-ac-item:first-child{border-top:none}
.ob-ac-item:hover,.ob-ac-item.on{background:var(--bg-accent);color:var(--text-primary)}

/* Payments-not-connected gate (DD-28 SD-5 — no card charged) */
.gate{text-align:center;max-width:560px;margin:0 auto}
.gate .badge{display:inline-block;background:var(--warn-bg);color:var(--warn);border:1px solid color-mix(in srgb,var(--warn) 40%,transparent);border-radius:var(--radius-pill);padding:6px 14px;font-weight:700;font-size:.82rem;margin-bottom:16px}
.gate .note{color:var(--text-tertiary);font-size:.82rem;margin-top:16px}
.gate-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:20px}

/* Confirmation */
.confirm-wrap{max-width:640px;margin:0 auto;text-align:center}
.seal{width:96px;height:96px;margin:0 auto 20px;border-radius:50%;background:var(--ukraine-gradient);display:flex;align-items:center;justify-content:center;font-size:3rem;box-shadow:var(--shadow-lg);animation:pop .7s cubic-bezier(.34,1.56,.64,1)}
@keyframes pop{0%{transform:scale(.4)}100%{transform:scale(1)}}
.order-id{display:inline-block;font-family:ui-monospace,Menlo,monospace;background:var(--bg-accent);border:1px solid var(--border);padding:10px 18px;border-radius:var(--radius-sm);margin:16px 0;font-weight:700;word-break:break-all}
.pay-id{font-family:ui-monospace,Menlo,monospace;font-size:.82rem;color:var(--text-secondary);word-break:break-all}
.timeline{text-align:left;max-width:460px;margin:24px auto 0}
.tl-item{display:flex;gap:14px;padding:12px 0}
.tl-num{width:34px;height:34px;flex-shrink:0;border-radius:50%;background:var(--ukraine-blue);color:var(--on-accent);display:flex;align-items:center;justify-content:center;font-weight:800}
.tl-item b{display:block;margin-bottom:2px} .tl-item span{color:var(--text-secondary);font-size:.9rem}

/* Header brand mark (QA item 2a) — the real logo replacing the "◆" glyph placeholder. Sized to the
   header rhythm; the dark-theme lift mirrors the home template's own rule so a dark logo does not sink
   into a dark bar. Rendered from the shared _brand.html partial on every public shell. */
/* flex-shrink:0 is load-bearing, not defensive — the identical pair and the identical reason as
   shop-kit.css:68 + :434. `a.logo` is display:inline-flex and the <picture> _brand.html emits is the
   flex ITEM; a <picture> is not a replaced element, so its min-width:auto floors at 0 and the mark
   collapsed under header pressure. Measured on master at the delivered tree: 34px at 1440/480/430,
   22.3px at 390, 0px at 360 — the reading .github/ci/page-gate.json held /cart's geometryFloors
   ratchet at. Closing it here is what lets that ratchet go.
   THE RULE ON THE <picture> IS THE ONE THAT DOES THE WORK. Putting flex-shrink:0 on the .brand-mark
   <img> alone leaves it on a child of the shrinking box, which measured 22.3px/0px unchanged; the
   img rule is kept because it also holds when a shell paints the mark without the wrapper. */
.logo picture{ flex-shrink:0; }
.brand-mark{ width:34px; height:34px; border-radius:9px; object-fit:contain; display:block; flex-shrink:0; }
[data-theme="dark"] .brand-mark{ filter:brightness(1.25); }

/* ============================================================================================
   The 5-step checkout wizard (cover item 2c) + the DATE control (DD-41 phase 1).
   Every colour below resolves from the existing tri-theme tokens (DD-33), so light / dark /
   system all follow the same declarations — no theme-specific override is needed here beyond the
   tokens the :root / [data-theme="dark"] blocks already define.
   ============================================================================================ */

/* The rail's pips are LINKS now (one route per step), so a completed step is navigable back to. */
.step-pip{text-decoration:none;color:inherit;border-radius:var(--radius-pill);padding:2px 4px}
.step-pip:focus-visible{outline:2px solid var(--ukraine-blue);outline-offset:3px}
.step-pip.done:hover .nm{color:var(--text-primary)}

/* Each step is now its own PAGE, so the old show/hide of in-page panes no longer applies. */
.wizard-step{display:block}

/* ---- the date picker ---- */
.date-pick{display:grid;gap:10px;margin-bottom:6px}
.date-opt{display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;text-align:left;
  border:2px solid var(--border);background:var(--bg-secondary);color:var(--text-primary);
  border-radius:var(--radius-sm);padding:14px 16px;cursor:pointer;font:inherit;
  transition:border-color .18s ease,background .18s ease,transform .18s ease}
.date-opt:hover{border-color:var(--border-strong);transform:translateY(-1px)}
.date-opt:focus-visible{outline:2px solid var(--ukraine-blue);outline-offset:2px}
.date-opt.on{border-color:var(--ukraine-blue);background:var(--bg-accent)}
.date-opt__day{font-weight:800;font-size:1rem}
.date-opt__note{font-size:.84rem;color:var(--text-secondary)}
.date-flag{margin-top:6px;font-size:.74rem;font-weight:800;letter-spacing:.02em;text-transform:uppercase;
  border-radius:var(--radius-pill);padding:3px 10px}
.date-flag--soon{background:var(--warn-bg);color:var(--warn)}
.date-flag--urgent{background:var(--danger-bg);color:var(--danger)}

/* The note under the picker: quiet for "cutting it close", firmer for an urgent request. */
.date-note{border-radius:var(--radius-sm);padding:12px 14px;font-size:.9rem;font-weight:600;margin-top:12px}
.date-note--soon{background:var(--warn-bg);color:var(--warn);border:1px solid color-mix(in srgb,var(--warn) 40%,transparent)}
.date-note--urgent{background:var(--danger-bg);color:var(--danger);border:1px solid color-mix(in srgb,var(--danger) 35%,transparent)}

/* The honest fallback when the ordering window can't be read — checkout still completes. */
.date-none{display:flex;flex-direction:column;gap:6px;border:1px dashed var(--border-strong);
  border-radius:var(--radius-sm);padding:16px;background:var(--bg-secondary)}
.date-none span{color:var(--text-secondary);font-size:.9rem}

/* ---- the urgent-request popup (DD-41 SD-5) ---- */
.co-modal{position:fixed;inset:0;z-index:1400;display:flex;align-items:center;justify-content:center;padding:20px}
.co-modal[hidden]{display:none}
.co-modal__backdrop{position:absolute;inset:0;background:var(--scrim);backdrop-filter:blur(2px)}
.co-modal__panel{position:relative;max-width:440px;width:100%;background:var(--bg-primary);
  border:1px solid var(--border);border-radius:var(--radius);padding:28px 26px;text-align:center;
  box-shadow:0 24px 60px var(--shadow-color);animation:fade .22s ease}
.co-modal__glyph{font-size:2rem;margin-bottom:8px}
.co-modal__panel p{color:var(--text-secondary);font-size:.94rem;margin:10px 0 20px}
.co-modal__actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}

/* ---- the pay step's read-back of the earlier steps ---- */
.co-review{border:1px solid var(--border);border-radius:var(--radius-sm);padding:6px 14px;margin-bottom:16px;background:var(--bg-secondary)}

/* ============ RESERVED HEIGHT for the JS-filled regions (QA item 4, cart half) ============
   #cart-items / #chips / #xsell-row / #summary-lines are server-EMPTY and innerHTML-filled by
   cart.js from sessionStorage. Nothing reserved their height, so the checkout CTA below them jumped
   as each region populated. The server CANNOT know the line count — the cart is client-side — so
   these reserve ONE row apiece: that removes the empty→populated jump (the common case) and shrinks
   the rest. A cart with N>1 lines still grows by the extra rows; that residual is inherent to a cart
   the server cannot see, not something a taller guess would fix honestly.
   #cart-items and #chips only apply when populated — cart.js `hidden`s their whole card on an empty
   cart (cart.js:183), so this adds no dead space to the empty state. */
#cart-items{min-height:110px}      /* one .line: 74px thumb + 18px×2 padding */
#chips{min-height:40px}            /* one .chip row: ~22px text + 9px×2 padding */
#summary-lines{min-height:37px}    /* one .sum-line: ~19px text + 9px×2 padding */
#xsell-row{min-height:150px}       /* one .xsell-row grid cell (minmax(150px,1fr)) */