/* ==========================================================================
   Storefront supplement — loaded after style.css
   The Medusa storefront's markup differs from the static build in a few
   places (Medusa has variants and a real cart, the static site did not), so
   these are the classes the design system does not already cover. Everything
   here uses the same tokens as style.css; no new colours or scales.
   ========================================================================== */

/* ---------- shop sidebar ----------
   `.filters`, `.filter-box`, `.filter-box h2` and `.filter-list` (with its
   `.n` count and `.active` state) are all style.css's — the markup uses them
   verbatim, so nothing is redefined here. Only the sub-category indent and
   the option pills are new. */
/* sidebar pills are tighter than the PDP's */
.filter-box .pdp-opt { padding: 7px 13px; font-size: var(--fs-xs); }
/* child categories, indented under their parent as on shop.html */
.filter-list .is-child { padding-left: 26px; font-size: .8125rem; }

/* ---------- loading placeholders ----------
   Same shapes as the real components, pulsing on `--canvas-2`. */
.sk-line { display: block; height: 14px; border-radius: var(--r-sm); background: var(--canvas-2); animation: wrPulse 1.2s ease-in-out infinite; }
.sk-line + .sk-line { margin-top: 10px; }
.sk-sm { width: 40%; }
.sk-md { width: 60%; }
.sk-lg { width: 70%; height: 28px; margin-inline: auto; }
.prod-card.is-skeleton .prod-media { aspect-ratio: 1/1; background: var(--canvas-2); animation: wrPulse 1.2s ease-in-out infinite; }
.prod-card.is-skeleton .prod-body { padding: var(--s-2); }
.sk-thumb { display: block; width: 96px; height: 96px; border-radius: var(--r-sm); background: var(--canvas-2); animation: wrPulse 1.2s ease-in-out infinite; }
.page-loading { display: grid; place-items: center; min-height: 40vh; color: var(--leaf); }
/* Extra widths and shapes, so a skeleton can mirror the component it stands in
   for without reaching for utility classes. `.sk-line` is the atom; these only
   change its size. */
.sk-xs { width: 25%; }
.sk-full { width: 100%; }
.sk-tall { height: 28px; }
.sk-btn { height: 45px; border-radius: var(--r-sm); }
/* One row of a list — the same 96px-thumb-plus-content grid `.cart-row` uses,
   so the placeholder does not jump when the real row replaces it. */
.sk-row { display: grid; grid-template-columns: 96px 1fr; gap: var(--s-2); align-items: start; padding: var(--s-2) 0; border-bottom: 1px solid var(--line); }
.sk-row:last-child { border-bottom: 0; }
.sk-row-body { display: grid; gap: 10px; min-width: 0; }
/* A stack of lines with the design's own rhythm. */
.sk-stack { display: grid; gap: 10px; }
@media (max-width: 900px) {
  .sk-row { grid-template-columns: 72px 1fr; }
  .sk-thumb { width: 72px; height: 72px; }
}

/* ---------- pagination ----------
   The static shop was a single page, so the design system has no pager; these
   are built from the same tokens as `.pdp-opt` / `.chip`. */
.pager { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: var(--s-6); }
.page-btn { min-width: 42px; height: 42px; padding: 0 12px; border: 1.5px solid var(--line); border-radius: var(--r-sm); background: #fff; font-size: var(--fs-sm); font-weight: 600; color: var(--ink); cursor: pointer; transition: border-color var(--t-fast), background var(--t-fast), color var(--t-fast); }
.page-btn:hover:not(:disabled) { border-color: var(--leaf-300); background: var(--leaf-50); color: var(--leaf-800); }
.page-btn.is-active { border-color: var(--leaf); background: var(--leaf); color: #fff; cursor: default; }
.page-gap { display: grid; place-items: end; height: 42px; padding: 0 4px; color: var(--muted); }

/* ---------- product card additions ---------- */
.prod-unit { font-size: var(--fs-sm); font-weight: 400; color: var(--muted); }
.prod-add { white-space: nowrap; }
.empty-note { padding: var(--s-6) 0; color: var(--muted); }

/* ---------- blog layout ----------
   blog.html and blog-single.html each ship an inline grid plus a `<style>`
   block collapsing it at 1024px; the same two rules, named. */
.blog-layout { display: grid; grid-template-columns: 1fr 320px; gap: 40px; align-items: start; }
@media (max-width: 1024px) { .blog-layout { grid-template-columns: 1fr; } }

/* ---------- category page ----------
   `.crumbs` is style.css's — it draws its own `›` from `.crumbs .sep::after`.
   Restyling it here put a second separator after every link. */
.cat-intro { margin-bottom: var(--s-3); color: var(--body); max-width: 70ch; }
.subcats { display: flex; flex-wrap: wrap; gap: var(--s-1); margin-bottom: var(--s-3); }

/* ---------- PDP ---------- */
.pdp-info .prod-cat { display: inline-block; margin-bottom: var(--s-1); }
/* The product title is an `h2` here, not style.css's `h1` — the page banner
   carries the `h1`, so the page keeps one. Same type as `.pdp-info h1`. */
.pdp-info h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); margin-top: var(--s-2); line-height: 1.25; }
/* `.pdp-actions` itself is style.css's — the qty stepper beside the CTA. */
.pdp-buy.is-loading { display: grid; gap: var(--s-2); margin-top: var(--s-3); }
.pdp-buy.is-loading .skeleton-line { height: 40px; border-radius: var(--r-sm); background: var(--canvas-2); animation: wrPulse 1.2s ease-in-out infinite; }
.pdp-buy.is-loading .skeleton-line.wide { height: 52px; }
.pdp-price.skeleton-line { width: 180px; height: 46px; border-radius: var(--r-sm); background: var(--canvas-2); animation: wrPulse 1.2s ease-in-out infinite; }
@keyframes wrPulse { 0%, 100% { opacity: 1 } 50% { opacity: .55 } }
.pdp-price-from { font-size: var(--fs-base); font-weight: 500; color: var(--muted); letter-spacing: 0; }
.pdp-was { font-size: var(--fs-sm); color: var(--muted); text-decoration: line-through; }
/* `.pdp-specs` is style.css's — a `--canvas-2` panel of `dt`/`dd` rows. It
   used to be redefined here as a borderless list, which flattened it. */

/* Variant choices. The static site had no variants — the Drupal import brought
   over 277 of them (Cubic yard / Half / Quarter / Bag, roll sizes, colours) —
   so these are new classes, built from the same tokens as `.chip` and `.tab`. */
.pdp-opt-row { margin-top: var(--s-3); }
.pdp-opt-label { display: block; font-size: var(--fs-2xs); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.pdp-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.pdp-opt { padding: 10px 18px; border: 1.5px solid var(--line); border-radius: var(--r-pill); background: #fff; font-size: var(--fs-sm); font-weight: 600; color: var(--ink); cursor: pointer; transition: border-color var(--t-fast), background var(--t-fast), color var(--t-fast); }
.pdp-opt:hover:not(:disabled) { border-color: var(--leaf-300); background: var(--leaf-50); color: var(--leaf-800); }
.pdp-opt.is-active { border-color: var(--leaf); background: var(--leaf); color: #fff; }
.pdp-opt:disabled { opacity: .5; cursor: not-allowed; }
/* The Drupal body can carry oversized images; the tab panels cap them. */
.tab-panel img { max-width: 100%; height: auto; }

/* ---------- cart rows ---------- */
.cart-row > a img { width: 96px; height: 96px; object-fit: cover; border-radius: var(--r-sm); display: block; }
.cart-row-info { display: grid; gap: 4px; min-width: 0; }
.cart-row-info a { color: var(--ink); font-weight: 600; }
.cart-row-info a:hover { color: var(--leaf-700); }
.cart-row-qty { display: flex; align-items: center; gap: var(--s-1); }
.cart-row-qty select { height: 40px; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--r-sm); background: #fff; }
.cart-row-price, .cart-row-total { display: flex; align-items: center; gap: var(--s-1); justify-content: flex-end; font-weight: 600; }

/* ---------- header cart dropdown ---------- */
.cart-pop { position: relative; display: flex; align-items: center; }
.cart-pop-panel { position: absolute; top: calc(100% + 10px); right: 0; z-index: 220; width: 420px; max-width: calc(100vw - 32px); padding: var(--s-3); background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-xl); }
.cart-pop-panel h3 { font-size: 1.125rem; margin-bottom: var(--s-2); }
.cart-pop-list { max-height: 380px; overflow-y: auto; }
.cart-pop-foot { padding-top: var(--s-2); border-top: 1px solid var(--line); margin-top: var(--s-2); }
.cart-pop-empty { padding: var(--s-5) 0; text-align: center; display: grid; gap: var(--s-2); justify-items: center; color: var(--muted); }
@media (max-width: 860px) { .cart-pop-panel { display: none; } }

/* compact rows in the checkout summary */
.cart-list.is-preview .cart-row { grid-template-columns: 56px 1fr auto; padding: var(--s-2); }
.cart-list.is-preview .cart-row > a img { width: 56px; height: 56px; }
.cart-list.is-preview .cart-row-qty { font-size: var(--fs-sm); color: var(--muted); }
/* more than four lines in the checkout summary scrolls rather than growing */
.cart-list.is-scrollable { max-height: 420px; overflow-y: auto; }
.cart-list.is-scrollable::-webkit-scrollbar { width: 6px; }
.cart-list.is-scrollable::-webkit-scrollbar-thumb { border-radius: var(--r-pill); background: var(--line); }

/* line-item money. `.li-price b` is the figure; the struck original and the
   discount pill only appear on a promotion. */
.li-price { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.li-price b { font-weight: 700; color: var(--ink); }
.li-price b.is-reduced { color: var(--leaf-700); }
.li-was { font-size: var(--fs-xs); color: var(--muted); text-decoration: line-through; }
.li-was em { font-style: normal; text-decoration: none; }
.li-off { font-size: var(--fs-2xs); font-weight: 700; color: var(--leaf-700); }

/* ---------- promo code ----------
   `.promo-row` is style.css's; these are the applied-promotion rows Medusa
   adds, which the static build had no equivalent for (it hardcoded one code).
   Named `.promo-box`/`.promo-chip` because `.promo` and `.promo-tag` are the
   home page's image banner and its floating discount circle. */
.promo-box { margin-top: var(--s-2); }
.promo-applied { margin-top: var(--s-2); }
.promo-applied h4 { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-bottom: 8px; }
.promo-chip { display: flex; align-items: center; gap: 8px; padding: 8px 12px; margin-bottom: 6px; border-radius: var(--r-pill); background: var(--leaf-50); border: 1px solid var(--leaf-200); font-size: var(--fs-sm); }
.promo-chip span { font-weight: 600; color: var(--leaf-800); }
.promo-chip b { color: var(--leaf-700); }
.promo-x { margin-left: auto; display: flex; align-items: center; color: var(--muted); cursor: pointer; }
.promo-x:hover { color: var(--danger); }

/* ---------- summary ---------- */
.summary h3 { margin-bottom: var(--s-2); }
.sum-rows { display: grid; gap: 10px; margin: var(--s-2) 0 var(--s-3); }
.sum-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); font-size: var(--fs-sm); color: var(--body); }
.sum-row.total { padding-top: var(--s-2); border-top: 1px solid var(--line); font-size: 1.125rem; font-weight: 700; color: var(--ink); }

/* ---------- forms ----------
   `.field` is style.css's; these are the two extras the Medusa forms need. */
.field .req { color: var(--danger); margin-left: 2px; }
.field-top { display: block; font-size: var(--fs-xs); font-weight: 600; color: var(--muted); margin-bottom: 6px; }
.field-reveal { position: relative; }
.field-reveal > button { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); cursor: pointer; }
.field-reveal > button:hover { color: var(--ink); }

/* signed-out account page */
.auth-wrap { max-width: 480px; margin-inline: auto; }

/* ---------- account ----------
   style.css styles `.acct-nav button` only, because the static build switched
   panels client-side. Medusa routes each panel, so the rail is links; these
   restate the same rules for `a` and add the two wrappers the routed version
   needs. */
.acct-nav { display: grid; gap: 4px; }
.acct-nav a { display: flex; align-items: center; gap: 12px; padding: 12px var(--s-2); width: 100%; border-radius: var(--r-sm); font-size: var(--fs-sm); font-weight: 500; color: var(--body); transition: all var(--t-fast); }
.acct-nav a svg, .acct-nav button svg { width: 18px; height: 18px; color: var(--muted); transition: color var(--t-fast); flex: none; }
.acct-nav a:hover { background: var(--leaf-50); color: var(--leaf); }
.acct-nav a:hover svg { color: var(--leaf-700); }
.acct-nav a.active { background: var(--leaf); color: #fff; box-shadow: var(--sh-leaf); }
.acct-nav a.active svg { color: #fff; }
.acct-user { padding: var(--s-2) var(--s-2) var(--s-3); border-bottom: 1px solid var(--line); margin-bottom: var(--s-2); }
/* `<strong>`, matching style.css's `.acct-user strong` — the greeting is not a
   heading, so it does not sit in the outline under the page `h1`. */
.acct-user strong { display: block; font-size: 1.125rem; margin-top: 4px; color: var(--ink); }
.acct-main { display: grid; gap: var(--s-3); min-width: 0; }
.acct-main .panel-box h2 { font-size: 1.25rem; }
.acct-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-2); margin-bottom: var(--s-3); }
.acct-head h2 { margin: 0; }

/* ---------- profile rows ----------
   One editable field per row: label + current value on the left, an Edit
   toggle on the right, and the form itself revealed underneath. The static
   site had no editable profile, so this is new — built from the same tokens
   as `.field` and `.sum-row`. */
.acct-fields { display: grid; }
.acct-field { padding: var(--s-3) 0; border-top: 1px solid var(--line); }
.acct-field:first-child { border-top: 0; padding-top: 0; }
.acct-field-top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-2); }
.acct-field-label { display: block; font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.acct-field-value { display: block; margin-top: 4px; font-weight: 600; color: var(--ink); word-break: break-word; }
/* A multi-line value (the billing address) stacks its parts. */
.acct-field-value span { display: block; }
.acct-field-value span:empty { display: none; }
/* The edit form collapses rather than unmounting, so the transition can run. */
.acct-field-form { display: grid; gap: var(--s-2); overflow: hidden; max-height: 0; opacity: 0; transition: max-height .3s ease-in-out, opacity .3s ease-in-out, margin .3s ease-in-out; }
.acct-field.is-open .acct-field-form { max-height: 1200px; opacity: 1; margin-top: var(--s-3); overflow: visible; }
.acct-field-actions { display: flex; justify-content: flex-end; }
/* Inline result messages. `.ok` / `.err` are style.css's colours; these give
   them a chip shape and the same collapse behaviour. */
.acct-msg { overflow: hidden; max-height: 0; opacity: 0; transition: max-height .3s ease-in-out, opacity .3s ease-in-out, margin .3s ease-in-out; }
.acct-msg.is-open { max-height: 200px; opacity: 1; margin-top: var(--s-2); }
.acct-msg > span { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: var(--r-sm); font-size: var(--fs-sm); font-weight: 600; }
.acct-msg > span svg { width: 16px; flex: 0 0 auto; }
.acct-msg.ok > span { background: var(--leaf-50); color: var(--leaf-800); }
.acct-msg.err > span { background: #fdecec; color: var(--danger); }

/* A select showing its placeholder reads as muted, like an empty input. */
.select-wrap.is-placeholder select { color: var(--muted); }

/* A plain horizontal rule. style.css has no such class — its `.sep` is the
   breadcrumb's `›` separator, which is a different thing entirely. */
.rule { height: 1px; background: var(--line); border: 0; }

/* `.notice` is style.css's green delivery strip. This recolours it for the one
   place the storefront needs to warn rather than inform — a cart that failed to
   transfer to the signed-in customer. */
.notice.is-warning { background: #fff7ed; border-color: #fed7aa; color: #9a3412; }
.notice.is-warning b { color: #7c2d12; }

/* ---------- region / language pickers ----------
   The static site is single-region, so the design has no such control. These
   are built from the same tokens as `.dropdown` in style.css. */
.region-btn { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: var(--fs-sm); color: inherit; }
.region-current { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.region-wrap { position: relative; }
.region-list { position: absolute; right: 0; bottom: calc(100% + 10px); z-index: 900; min-width: 260px; max-height: 442px; overflow-y: auto; padding: 6px; border: 1px solid var(--line); border-radius: var(--r-md); background: #fff; box-shadow: var(--sh-lg); }
.region-opt { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: var(--r-sm); font-size: var(--fs-sm); color: var(--ink); cursor: pointer; }
.region-opt:hover, .region-opt[data-focus] { background: var(--leaf-50); color: var(--leaf-800); }

/* ---------- thumbnail ----------
   A product image in a fixed box, used by the order cards and the order
   confirmation. `position: relative` because next/image `fill` needs a
   positioned ancestor. */
.thumb { position: relative; overflow: hidden; width: 100%; border-radius: var(--r-md); background: var(--canvas-2); aspect-ratio: 1/1; }
.thumb img { object-fit: cover; object-position: center; }
.thumb.is-small { width: 96px; }
.thumb.is-medium { width: 290px; }
.thumb.is-large { width: 440px; }
.thumb.is-full { width: 100%; }
.thumb.is-featured { aspect-ratio: 11/14; }
.thumb-empty { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); }

/* ---------- free-shipping nudge ----------
   Only renders when a shipping option carries an `item_total` price rule.
   Whiterock's two options (Yard Pickup, Local Delivery) have none, so this is
   dormant here — but it is wired up, so it is styled. */
.ship-nudge { padding: var(--s-2); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--canvas-2); }
.ship-nudge-top { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); font-size: var(--fs-xs); color: var(--body); }
.ship-nudge-top b { color: var(--ink); }
.ship-nudge-done { display: inline-flex; align-items: center; gap: 6px; color: var(--leaf-700); font-weight: 600; }
.ship-nudge-done svg { width: 15px; }
.ship-nudge-bar { height: 5px; margin-top: 10px; border-radius: var(--r-pill); background: var(--line); overflow: hidden; }
.ship-nudge-bar i { display: block; height: 100%; max-width: 100%; border-radius: var(--r-pill); background: var(--grad-leaf); transition: width .5s var(--e-out); }
/* the floating variant */
.ship-pop { position: fixed; right: 20px; bottom: 20px; z-index: 60; width: min(400px, calc(100vw - 40px)); padding: var(--s-3); border-radius: var(--r-lg); background: var(--ink); color: #fff; box-shadow: var(--sh-xl); transition: opacity .4s var(--e-out), visibility .4s; }
.ship-pop.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.ship-pop .ship-nudge-top { color: rgba(255,255,255,.72); }
.ship-pop .ship-nudge-top b { color: #fff; }
.ship-pop .ship-nudge-bar { background: rgba(255,255,255,.22); }
.ship-pop-x { position: absolute; top: -14px; right: -6px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--ink); box-shadow: var(--sh-md); }
.ship-pop-x svg { width: 15px; }
.ship-pop-actions { display: flex; gap: var(--s-2); margin-top: var(--s-3); }

/* Spinner rotation, replacing Tailwind's `animate-spin`. */
.spin { animation: wrSpin .9s linear infinite; }
@keyframes wrSpin { to { transform: rotate(360deg) } }

/* ---------- saved addresses ----------
   The static site had no address book, so these are new — built on the same
   border, radius and padding as `.panel-box`. */
.addr-card { display: flex; flex-direction: column; gap: 4px; min-height: 220px; padding: var(--s-3); border: 1px solid var(--line); border-radius: var(--r-lg); background: #fff; text-align: left; }
.addr-card h3 { margin: 0 0 var(--s-1); font-size: 1rem; }
.addr-card p { margin: 0; font-size: var(--fs-sm); color: var(--body); }
.addr-card-actions { display: flex; gap: var(--s-1); margin-top: auto; padding-top: var(--s-2); }
/* the address currently selected at checkout */
.addr-card.is-active { border-color: var(--leaf); box-shadow: 0 0 0 3px var(--leaf-50); }
/* the "new address" tile */
.addr-card.is-add { align-items: center; justify-content: center; gap: var(--s-2); border-style: dashed; color: var(--ink); font-weight: 600; cursor: pointer; transition: border-color var(--t-fast), background var(--t-fast), color var(--t-fast); }
.addr-card.is-add:hover { border-color: var(--leaf); background: var(--leaf-50); color: var(--leaf-800); }
.addr-add-ico { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--leaf-50); color: var(--leaf); }
.addr-add-ico svg { width: 22px; }
.addr-card.is-add:hover .addr-add-ico { background: #fff; }

/* ---------- modal ----------
   `.modal`, `.modal-box` and `.modal-x` are style.css's (the static site's
   quick-view). These add the size variants and the inner sections the account
   address dialogs need. `.modal-box` is 940px by default, which is far too wide
   for a form. */
.modal-box.is-small { width: min(100%, 460px); }
.modal-box.is-medium { width: min(100%, 620px); }
.modal-box.is-large { width: min(100%, 940px); }
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); padding: var(--s-3) var(--s-3) 0; }
.modal-head h2, .modal-head h3 { margin: 0; font-size: 1.25rem; }
.modal-body { padding: var(--s-3); }
.modal-foot { display: flex; justify-content: flex-end; gap: var(--s-2); padding: 0 var(--s-3) var(--s-3); }
.modal-desc { padding: 0 var(--s-3); color: var(--body); }
/* The search overlay reuses this shell with no chrome of its own. */
.modal-box.is-bare { background: transparent; box-shadow: none; }

/* ---------- form helpers ----------
   `.form-grid` (style.css) is the 1fr 1fr pair and collapses to one column on
   mobile. These two cover the other shapes the account and checkout forms
   need, on the same gaps. */
.form-stack { display: grid; gap: var(--s-2); }
/* postal code beside city — the postal field does not need half the row */
.form-grid.uneven { grid-template-columns: 144px 1fr; }
@media (max-width: 900px) { .form-grid.uneven { grid-template-columns: 1fr; } }
.acct-orders { display: grid; gap: 10px; margin-top: var(--s-2); }
.acct-order { display: grid; grid-template-columns: repeat(3, 1fr) 40px; align-items: center; gap: var(--s-2); padding: var(--s-2) var(--s-3); border: 1px solid var(--line); border-radius: var(--r-md); background: #fff; transition: border-color var(--t-fast), box-shadow var(--t-fast); }
.acct-order:hover { border-color: var(--leaf); box-shadow: var(--sh-sm); }
.acct-order span { display: block; font-size: var(--fs-xs); color: var(--muted); }
.acct-order b { display: block; font-size: var(--fs-sm); color: var(--ink); font-weight: 600; }
.acct-order-go { display: grid; place-items: center; color: var(--leaf-700); }
.acct-order-go svg { width: 18px; height: 18px; }
.order-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--s-2); margin-top: var(--s-2); }
.order-thumbs img { width: 100%; border-radius: var(--r-sm); }
.order-thumbs > div > span { display: block; margin-top: 6px; font-size: var(--fs-sm); color: var(--body); }
.order-thumbs b { color: var(--ink); font-weight: 600; }
.order-thumbs-more { display: grid; place-items: center; border: 1px dashed var(--line); border-radius: var(--r-sm); font-size: var(--fs-sm); color: var(--muted); }
@media (max-width: 700px) {
  .acct-order { grid-template-columns: 1fr 1fr; }
  .acct-order-go { grid-column: 2; justify-self: end; }
}

/* ---------- checkout steps ----------
   The static build drove checkout with client-side `.co-panel` switching and
   showed one panel at a time. Medusa drives it from `?step=` and keeps the
   finished steps on screen as read-only summaries, so each step is a
   `.panel-box` with a header row rather than a `.co-panel`. */
.co-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); margin-bottom: var(--s-3); }
.co-head h3 { margin-bottom: 0; display: flex; align-items: center; gap: 10px; }
.co-head h3 svg { width: 20px; height: 20px; color: var(--leaf); flex: none; }
.co-edit { padding: 0; border: 0; background: none; font-size: var(--fs-sm); font-weight: 600; color: var(--leaf-700); cursor: pointer; }
.co-edit:hover { text-decoration: underline; }
/* a step whose turn has not come yet — visible, but clearly not actionable */
.panel-box.is-waiting { opacity: .5; }

.co-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-3); }
.co-legal { font-size: var(--fs-sm); color: var(--body); margin-bottom: var(--s-3); }
.co-hint { font-size: var(--fs-sm); color: var(--muted); margin: -6px 0 var(--s-2); }
.form-error { margin-top: var(--s-1); font-size: var(--fs-sm); color: var(--danger); }

/* read-only summary of a completed step */
.co-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--s-3); }
.co-cols h4 { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-bottom: 6px; }
.co-cols p { font-size: var(--fs-sm); color: var(--body); margin: 0; }

/* checkout keeps a slim bar instead of the site header — the starter's choice,
   and the usual one for a checkout funnel — restyled onto the design tokens */
.co-bar { height: 64px; background: #fff; border-bottom: 1px solid var(--line); }
.co-bar .wrap { display: flex; align-items: center; gap: var(--s-2); height: 100%; }
.co-bar .wrap > * { flex: 1 1 0; }
.co-bar a { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-sm); font-weight: 600; color: var(--body); }
.co-bar a:hover { color: var(--leaf-700); }
.co-bar svg { width: 18px; height: 18px; }
.co-bar .co-brand { justify-content: center; font-size: var(--fs-base); font-weight: 700; color: var(--ink); letter-spacing: -.01em; }
.co-foot { padding: var(--s-3) 0 var(--s-6); text-align: center; font-size: var(--fs-sm); color: var(--muted); }

/* Stripe renders the card field into its own iframe, so it cannot inherit
   `.field input` — this is that box, restated for the element's own class. */
.stripe-card-input { padding: 13px var(--s-2); border: 1.5px solid var(--line); border-radius: var(--r-sm); background: #fff; transition: border-color var(--t-fast), box-shadow var(--t-fast); }
.stripe-card-input.StripeElement--focus { border-color: var(--leaf); box-shadow: 0 0 0 4px var(--leaf-50); }
.stripe-card-input.StripeElement--invalid { border-color: var(--danger); }

/* delivery + payment choices reuse the static site's radio rows */
.pay-opt .price { margin-left: auto; font-weight: 700; color: var(--leaf-700); white-space: nowrap; }
.pay-opt .pay-ico { margin-left: auto; display: flex; align-items: center; color: var(--muted); }
.pay-opt.is-disabled { opacity: .5; pointer-events: none; }

/* The design system fills the radio dot with `.pay-opt input:checked ~ .dot`
   and the checkbox tick with `.check input:checked + i`, which rely on the
   input's checkedness. Here React owns that as a DOM property on a
   `display:none` input, so the selected state is *also* carried as a class
   React sets itself. Belt and braces on a checkout: whichever of the two the
   browser honours, the control paints its selection. */
.pay-opt.is-selected .dot { border-color: var(--leaf); }
.pay-opt.is-selected .dot::after { transform: scale(1); }
/* A standalone `.dot` whose state is a prop rather than a sibling input. */
.dot.is-checked { border-color: var(--leaf); }
.dot.is-checked::after { transform: scale(1); }
.check.is-checked i { background: var(--leaf); border-color: var(--leaf); }
.check.is-checked i::after { transform: rotate(-45deg) scale(1); }
/* payment method + card icon on the order confirmation */
.pay-summary { display: flex; align-items: center; gap: 8px; }
.pay-summary .pay-ico { display: inline-flex; align-items: center; padding: 4px 6px; border-radius: var(--r-sm); background: var(--canvas-2); }
.pay-card { margin-top: var(--s-2); }
.pay-card label { display: block; font-size: var(--fs-xs); font-weight: 600; color: var(--ink); margin-bottom: 7px; }

/* `.ptool` / `.prod-tools` overrides lived here for the wishlist heart, on the
   PDP and in the saved-products account panel. The wishlist is gone and the
   design source dropped the rail with it, so nothing emits either class. */

/* PayPal renders its own branded button inside an iframe and its styling is
   not ours to set — PayPal requires the branded button to start the flow. All
   we own is the box around it, so it occupies the same width and vertical
   rhythm as the `.btn-leaf` place-order button it replaces. Capped at the
   button's width so it does not stretch across the whole review panel. */
.pay-paypal { max-width: 320px; margin-top: var(--s-2); }
.pay-paypal > div { min-height: 45px; }

@media (max-width: 900px) {
  .cart-row { grid-template-columns: 72px 1fr; row-gap: var(--s-1); }
  .cart-row > a img { width: 72px; height: 72px; }
  .cart-row-price { display: none; }
}