/* =============================================================================
 * checkout.css — the commerce pages: /cart, /sign-in, /join, /checkout,
 * /order/<n>.
 *
 * ADDITIVE ONLY. It loads after home.css and reinvents NO tokens: every colour,
 * face, rule and easing here is one of home.css's custom properties, and the
 * furniture (.btn, .field, .pick, .line, .tot, .rung, .panel-quiet) is the
 * furniture the home page already uses. If a rule in this file needs a new
 * colour, the colour belongs in home.css's :root, not here.
 *
 * Brief §7 H1: no form on this site spans wider than about 560 px.
 * =========================================================================== */

/* ---------- page heads ---------- */
.page-head{margin-bottom:clamp(20px,3vw,30px)}
.page-head h1{font-size:clamp(30px,4.4vw,46px);text-transform:uppercase;letter-spacing:.01em}
.page-head p{color:var(--fog);font-size:14.8px;max-width:52ch;margin-top:10px}
.page-head a{color:var(--chalk-dim)}

/* ---------- forms ---------- */
.form-narrow{display:grid;gap:14px;max-width:560px}
.field-hint{color:var(--fog);font-size:13px;line-height:1.5}
.field-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.field .in{width:100%}
.field select.in{min-height:44px}
.btn-wide{width:100%;padding:15px}
/* A blocked primary button has to LOOK blocked: /join's "Create account" is
   disabled until the four acknowledgements are ticked and the security check
   passes, and a solid white button that simply ignores a click reads as broken.
   (home.css styles .btn-add[disabled]; .btn had no disabled state.) */
.btn[disabled]{opacity:.4;cursor:default}
.btn[disabled]:hover{background:transparent;border-color:var(--line)}
.btn--solid[disabled]:hover{background:var(--chalk);color:var(--ink-000);border-color:var(--chalk)}

/* The LABEL is the tap target (the 18px box alone is not), so it carries the
   44px floor the rest of this site's controls use — .btn, .link-quiet, .head-nav
   a and .field select all sit at 44. A single-line acknowledgement rendered at
   27px, which is a miss on a phone and a mis-tick on a consent checkbox. */
.check{display:grid;grid-template-columns:auto minmax(0,1fr);gap:11px;align-items:center;
  min-height:44px;color:var(--fog-2);font-size:14.6px;line-height:1.55;cursor:pointer;padding:2px 0}
.check input{width:18px;height:18px;accent-color:var(--chalk);flex:0 0 auto}
.check:hover{color:var(--chalk-dim)}

/* The five acknowledgements. Each is its own box, none pre-ticked, and they are
   spaced so nobody can tick four of them with one careless swipe. */
.acks{display:grid;gap:14px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:18px 0;margin-top:4px}
/* Multi-line acknowledgements keep the box at the top of their first line; the
   44px floor still applies (it comes from .check). */
.check-ack{align-items:start}
.check-ack input{margin-top:3px}

.note-msg{font-size:14px;line-height:1.55;padding:10px 12px;border:1px solid var(--line)}
.note-msg--bad{color:#f3b8ba;border-color:rgba(243,184,186,.35);background:rgba(243,184,186,.06)}
.note-msg--ok{color:var(--sand);border-color:rgba(214,201,174,.3);background:rgba(214,201,174,.06)}

.turnstile-slot{min-height:70px}
.turnstile-stub{display:grid;gap:8px;border:1px dashed var(--line);padding:12px 14px}
.turnstile-stub .mono{color:var(--sand)}

.auth-body{display:grid;gap:14px}
.auth-links{display:flex;flex-wrap:wrap;gap:4px 18px;margin-top:2px}
/* NO min-height here: .link-quiet already sets 44px, and overriding it down to
   40 is how these two links became the only sub-44 targets on the page. */
.auth-swap{padding:0}

/* ---------- /sign-in and /join ---------- */
.auth-page{max-width:560px}
.auth-page .page-head{margin-bottom:22px}

/* ---------- /cart ---------- */
.cart-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,340px);
  gap:1px;background:var(--line);border:1px solid var(--line)}
.cart-lines{background:var(--ink-100);padding:4px clamp(14px,2vw,22px) 18px}
.cart-lines .line:first-child{border-top:0}
.cart-lines .empty{padding:34px 0}
.cart-sum{background:var(--ink-050);padding:clamp(18px,2.2vw,24px);display:grid;gap:14px;align-content:start}
.cart-sum .rung{margin:0}
.cart-back{margin-top:18px}

/* ---------- /checkout ---------- */
.co-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,330px);gap:clamp(20px,3vw,40px);align-items:start}
/* `top` is derived from the header token, not typed: the sticky header grew a
   second row below 1080 (home.css `--head-sub`), and a hardcoded 88px put the top
   22px of this aside underneath it in the 901–1080 band. `+ 20px` is the gap the
   88 used to express at the desktop height, kept exactly. */
.co-aside{position:sticky;top:calc(var(--head-h) + 20px);background:var(--ink-050);border:1px solid var(--line);
  padding:clamp(18px,2.2vw,24px);display:grid;gap:14px}
.co-aside h2{font-size:24px;text-transform:uppercase}

/* `scroll-margin-top` clears the sticky header: `open()` scrolls the next
   section into view, and without this the heading it just opened lands UNDER the
   header at 390 (heading top 21px, header bottom 61px) — the shopper is looking
   at the body of a step whose number and title are covered. `outline:none` on
   the section itself because `open()` focuses it only as a fallback landing
   spot; every real control keeps its own ring. The figure is DERIVED from the
   header token for the same reason as `.co-aside` above: 76px was the desktop
   header plus 8, and below 1080 the header is now 42px taller, which would have
   put the opened heading back under it — the exact bug this rule exists for. */
.co-sec{border-top:1px solid var(--line);padding:20px 0;scroll-margin-top:calc(var(--head-h) + 8px)}
.co-sec:focus{outline:none}
.co-sec:first-child{border-top:0;padding-top:0}
.co-head{display:flex;align-items:center;justify-content:space-between;gap:14px}
.co-head h2{display:flex;align-items:baseline;gap:12px;font-size:clamp(22px,2.6vw,30px);text-transform:uppercase}
.co-num{color:var(--ga-red)}
.co-change{padding:0}   /* .link-quiet's 44px stands */
.co-sum{color:var(--fog-2);font-size:14.8px;margin-top:8px}
/* "We couldn't save this to your account …" — the address section's own note,
   hung off the SECTION rather than the form so it survives the collapse that
   the same click causes. Quiet on purpose: the step succeeded. */
.co-save-note{color:var(--fog-2);margin-top:8px;max-width:52ch}
.co-sec.is-done .co-head h2{color:var(--fog)}
.co-body{display:grid;gap:16px;margin-top:16px;max-width:560px}
.co-note{color:var(--fog-2);font-size:14.8px;max-width:52ch}
.co-q{font-size:22px;text-transform:uppercase}
.co-line{color:var(--chalk-dim);font-size:15.2px}
.co-block{display:grid;gap:8px;border:1px solid var(--line);padding:14px 16px;background:var(--ink-050)}
/* The pickup and protection lines wrap at 390, so their box sits on the first
   line rather than in the middle of a paragraph. The 44px floor still applies. */
.co-block .check{align-items:start}
.co-block .check input{margin-top:3px}
.co-warn{color:var(--sand);font-size:14px;line-height:1.55}
.co-fee{color:var(--chalk);font-family:var(--mono);font-size:13px;letter-spacing:.08em}
.co-auth{margin-top:4px}
.co-place{margin-top:4px}

/* Grey Area Guaranteed Delivery — the required radio pair. It reuses the payment
   step's own `.pays`/`.pay` list (one radio idiom on this page, not two) and adds
   only the three things that list does not have: the Recommended tag, the decline
   acknowledgement and the link to the policy. */
.co-gd{gap:12px}
.co-gd-tag{display:inline-block;margin-left:10px;padding:2px 7px;border:1px solid var(--ga-red);
  color:var(--ga-red);font-size:10.5px;letter-spacing:.14em;vertical-align:middle}
.co-gd-ack{color:var(--sand);font-size:14px;line-height:1.6;max-width:60ch;
  border-left:2px solid var(--line);padding-left:14px}
.co-gd-terms{justify-self:start}

.pays{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
.pay{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:start;
  background:var(--ink-100);padding:14px 16px;cursor:pointer}
.pay:hover{background:var(--ink-200)}
.pay input{width:18px;height:18px;margin-top:2px;accent-color:var(--chalk)}
.pay-copy{display:grid;gap:3px}
.pay-label{font-family:var(--cond);font-size:22px;line-height:1.05;color:var(--chalk-dim);text-transform:uppercase}
.pay-note{color:var(--fog);font-size:13.6px}
.pay input:checked ~ .pay-copy .pay-label{color:var(--chalk)}

.co-review-lines{display:grid;gap:2px;border-top:1px solid var(--line);padding-top:14px}
.co-review-line{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding:7px 0;font-size:15px;color:var(--chalk-dim)}
.co-review-line.is-gone{color:var(--fog)}
.co-review-line.is-gone .price{text-decoration:line-through}
.co-review-name{font-family:var(--cond);font-size:19px;letter-spacing:.01em}
.co-review-qty{margin-left:10px;color:var(--fog)}

/* ---------- /order/<n> ---------- */
.ord{max-width:760px;display:grid;gap:18px}
.ord-eyebrow{color:var(--sand)}
.ord-head{font-size:clamp(28px,4vw,44px);text-transform:uppercase;line-height:1.02}
.ord-pay{font-size:clamp(16px,1.6vw,19px);color:var(--chalk);line-height:1.5;
  border-left:2px solid var(--ga-red);padding-left:16px}
.ord-memo{font-family:var(--mono);font-size:13.5px;line-height:1.6;letter-spacing:.04em;
  color:var(--sand);background:rgba(214,201,174,.06);border:1px solid rgba(214,201,174,.2);padding:12px 14px}
.ord-ship{color:var(--fog-2);font-size:15px;line-height:1.6;max-width:70ch}
.ord-lines{display:grid;gap:2px;border-top:1px solid var(--line);padding-top:14px}
.ord .totals{max-width:380px}
.ord-track{width:fit-content}
.ord-cta{display:flex;flex-wrap:wrap;gap:10px}

/* ---------- narrow ---------- */
@media (max-width:900px){
  .cart-grid,.co-grid{grid-template-columns:minmax(0,1fr)}
  .co-aside{position:static}
}
@media (max-width:620px){
  .field-row{grid-template-columns:minmax(0,1fr)}
  .cart-lines{padding-inline:14px}
  .co-head{flex-wrap:wrap}
}
@media (max-width:390px){
  .ord-pay{padding-left:12px}
}