/* ============================================================
   WiO SmartFoods · "Founder's Kitchen" v2.0.0 · REDESIGN - CART / DRAWER / BYO
   Component styles for redesign-cart.html, redesign-cart-drawer.html,
   redesign-byo.html. Built strictly on rd-base.css tokens.
   Discipline: cream through-line, white cards, rust identity,
   green-ink action only, burgundy = seal/proof only, gold 2px
   editorial rules, NO shadows (flat borders), tabular nums.
   ============================================================ */

/* ------------------------------------------------------------
   PAGE HEAD (shared cart/byo intro band)
   ------------------------------------------------------------ */
.x-head{background:var(--cream);border-bottom:2px solid var(--gold)}
.x-head-in{padding:clamp(30px,5vw,52px) 0 clamp(26px,4vw,40px)}
.x-head h1{font-family:var(--serif);font-size:clamp(30px,4.6vw,46px);font-weight:700;margin:14px 0 0;line-height:1.04}
.x-head h1 em{font-style:italic;color:var(--rust)}
/* Stage-3 FIX (sub-16px copy, cart, sweep 2026-07-07): clamp floor raised 15px->16px
   so mobile widths never dip below the WiO 16px body-copy minimum. */
.x-head .sub{font-family:var(--sans);font-size:clamp(16px,1.9vw,18px);color:var(--ink-2);margin:12px 0 0;max-width:58ch}
.x-head .sub b{color:var(--rust);font-weight:700}

/* ------------------------------------------------------------
   SPEND-TIER METER (ported from portal .tier, re-tokenized)
   Green pale is a sanctioned exception ONLY as the progress
   surface (savings mechanic), not as an anchor band.
   ------------------------------------------------------------ */
.tier{background:var(--green-pale);border:1.5px solid #D3E3D5;border-radius:6px;padding:20px 22px}
.tier__top{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:6px}
.tier__lead{font-family:var(--sans);font-size:16px;color:var(--ink);line-height:1.45}
.tier__lead strong{color:var(--green-ink);font-weight:700}
.tier__cur{font-family:var(--sans);font-weight:700;color:var(--rust);font-variant-numeric:tabular-nums}
/* Stage-3 FIX (sub-16px copy, cart + byo, sweep 2026-07-07): 15px->16px floor. */
.tier__goal{font-family:var(--sans);font-size:16px;color:var(--ink-2);margin:0 0 14px}
.tier__goal strong{color:var(--green-ink);font-weight:700}
.tier__rail{position:relative;height:11px;background:#fff;border-radius:999px;overflow:hidden;border:1px solid #D3E3D5}
.tier__fill{position:absolute;inset:0 auto 0 0;background:var(--green-ink);border-radius:999px;transition:width .4s var(--ease)}
.tier__ticks{display:flex;justify-content:space-between;margin-top:9px;font-family:var(--sans);font-size:11.5px;color:var(--meta);font-weight:600;letter-spacing:.01em}
.tier__ticks span{position:relative;white-space:nowrap}
.tier__ticks .on{color:var(--green-ink)}
.tier__ticks .on::before{content:"✓ ";font-size:10px}
/* Stage-3 FIX (sub-16px copy, cart discount fine-print, sweep 2026-07-07): 12px->16px. */
.tier__foot{font-family:var(--sans);font-size:16px;color:var(--meta);margin:12px 0 0;display:flex;align-items:center;gap:7px}
.tier__foot svg{width:14px;height:14px;color:var(--green-ink);flex-shrink:0}

/* compact meter for drawer + mobile sticky bars.
   Stage-3 FIX (sub-16px copy, byo, sweep 2026-07-07): 14px->16px floor on the shared
   compact variant clears the BYO Critical; also lifts drawer's out-of-scope Minor
   as a side effect (same rule, not a separate edit to drawer-only scope). */
.tier--compact{padding:14px 15px;border-radius:5px}
.tier--compact .tier__goal{font-size:16px;margin:0 0 9px}
.tier--compact .tier__rail{height:9px}
.tier--compact .tier__ticks{font-size:10.5px;margin-top:7px}

/* ============================================================
   PAGE 1 - FULL CART
   ============================================================ */
.cart-wrap{padding:clamp(28px,4vw,44px) 0 clamp(40px,6vw,72px)}
.cart-grid{display:grid;grid-template-columns:1fr;gap:clamp(24px,3vw,40px);align-items:start}
@media(min-width:940px){.cart-grid{grid-template-columns:minmax(0,1.55fr) minmax(320px,1fr)}}

/* --- line item list --- */
.ci-list{background:var(--card);border:1px solid var(--rule);border-radius:6px;overflow:hidden}
.ci-list__head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:18px 22px;border-bottom:2px solid var(--gold)}
.ci-list__head h2{font-family:var(--serif);font-size:20px;font-weight:600}
.ci-list__head .cnt{font-family:var(--sans);font-size:13px;font-weight:600;color:var(--meta)}

.ci{display:grid;grid-template-columns:auto 1fr auto;gap:18px;padding:22px;border-bottom:1px solid var(--rule);align-items:start}
.ci:last-child{border-bottom:0}
.ci__thumb{width:96px;height:96px;border-radius:5px;background:var(--cream-2);display:grid;place-items:center;overflow:hidden;flex-shrink:0}
.ci__thumb img{width:82%;height:82%;object-fit:contain}
.ci__main{min-width:0;display:flex;flex-direction:column;gap:8px}
.ci__name{font-family:var(--serif);font-size:18px;font-weight:600;line-height:1.2;color:var(--ink)}
.ci__macro{font-family:var(--sans);font-size:12.5px;font-weight:600;color:var(--ink-2);letter-spacing:.01em}
.ci__macro b{color:var(--ink)}
.ci__macro .dot{color:var(--rule);margin:0 4px}
.ci__rate{display:flex;align-items:center;gap:6px;font-family:var(--sans);font-size:12px;color:var(--meta)}
.ci__rate b{color:var(--ink);font-weight:700}

/* per-line Subscribe & Save toggle (two pills) */
.ci-ss{display:inline-grid;grid-template-columns:1fr 1fr;gap:0;border:1.5px solid var(--rule);border-radius:999px;padding:3px;background:var(--cream);margin-top:2px;max-width:340px}
.ci-ss button{border:0;background:transparent;font-family:var(--sans);font-weight:700;font-size:11.5px;color:var(--ink-2);padding:8px 12px;min-height:44px;border-radius:999px;cursor:pointer;line-height:1.15;letter-spacing:.01em;text-align:center;transition:background .16s var(--ease),color .16s var(--ease)}
.ci-ss button[aria-pressed="true"]{background:var(--green-ink);color:#fff}
.ci-ss button .pc{display:block;font-size:10px;font-weight:600;opacity:.82;margin-top:1px;letter-spacing:0;font-variant-numeric:tabular-nums}
.ci-ss button[aria-pressed="true"] .pc{opacity:.95}

/* qty + remove control column */
.ci__ctl{display:flex;flex-direction:column;align-items:flex-end;gap:12px;text-align:right}
.ci__price{font-family:var(--sans);font-weight:700;font-size:18px;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.ci__was{font-family:var(--sans);font-size:13px;color:var(--meta);text-decoration:line-through;font-weight:500;margin-left:6px}
.qtyx{display:inline-flex;align-items:center;gap:2px;background:var(--cream);border:1px solid var(--rule);border-radius:999px;padding:3px}
/* Stage-3 FIX (tap target, cart + byo shared, sweep 2026-07-07): raised 38px to the
   44px WiO tap-target floor via width/height/min-height/min-width, not font-size, so
   the "-"/"+" glyphs keep their existing visual weight inside a larger hit area. */
.qtyx button{width:44px;height:44px;min-width:44px;min-height:44px;border:0;background:#fff;border:1px solid var(--rule);border-radius:50%;font-size:17px;line-height:1;cursor:pointer;color:var(--green-ink);font-weight:700;font-family:var(--sans);display:grid;place-items:center;transition:border-color .16s var(--ease)}
.qtyx button:hover{border-color:var(--green-ink)}
.qtyx span{min-width:26px;text-align:center;font-weight:700;font-size:14px;font-family:var(--sans);font-variant-numeric:tabular-nums}
/* Stage-3 FIX (tap target, sweep 2026-07-07): raised 26px to the 44px floor via
   min-height + padding (not font-size), text stays 12.5px visual weight. */
.ci__remove{background:none;border:0;font-family:var(--sans);font-size:12.5px;font-weight:600;color:var(--meta);cursor:pointer;padding:4px 2px;min-height:44px;display:inline-flex;align-items:center;gap:5px;text-decoration:underline;text-underline-offset:2px}
.ci__remove:hover{color:var(--rust)}

/* --- sticky summary column --- */
.cart-side{position:sticky;top:96px;display:flex;flex-direction:column;gap:18px}
.sum{background:var(--card);border:1px solid var(--rule);border-radius:6px;overflow:hidden}
.sum__hd{padding:18px 22px 0}
.sum__hd h2{font-family:var(--serif);font-size:20px;font-weight:600}
.sum__body{padding:16px 22px 22px}
.sum__row{display:flex;align-items:baseline;justify-content:space-between;gap:14px;font-family:var(--sans);font-size:14.5px;color:var(--ink-2);padding:9px 0}
.sum__row .v{font-variant-numeric:tabular-nums;color:var(--ink);font-weight:600}
.sum__row.save .v{color:var(--green-ink)}
.sum__row.save span:first-child{color:var(--green-ink);font-weight:600}
.sum__row .muted{color:var(--meta);font-weight:500}
.sum__rule{height:1px;background:var(--rule);border:0;margin:8px 0}
.sum__total{display:flex;align-items:baseline;justify-content:space-between;gap:14px;border-top:2px solid var(--gold);margin-top:6px;padding-top:16px;font-family:var(--serif);font-weight:700;font-size:22px;color:var(--ink)}
.sum__total .v{font-variant-numeric:tabular-nums}
.sum__cta{margin-top:18px}
.sum__cta .btn{width:100%;font-size:16px;padding:17px}
/* Stage-3 FIX (tap target, sweep 2026-07-07): raised 22px to the 44px floor via
   min-height + flex centering (not font-size), text stays 13.5px visual weight. */
.sum__cont{display:flex;align-items:center;justify-content:center;min-height:44px;text-align:center;margin-top:12px;font-family:var(--sans);font-size:13.5px;font-weight:600;color:var(--green-ink)}
.sum__cont:hover{text-decoration:underline;text-underline-offset:2px}
/* Stage-3 FIX (sub-16px copy, cart shipping note, sweep 2026-07-07): 12px->16px. */
.sum__ship{font-family:var(--sans);font-size:16px;color:var(--meta);text-align:center;margin:14px 0 0;display:flex;align-items:center;justify-content:center;gap:7px}
.sum__ship svg{width:14px;height:14px;color:var(--rust);flex-shrink:0}
.sum__pay{display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap;margin-top:14px}
.sum__pay .chip{border:1px solid var(--rule);border-radius:4px;padding:2px 8px;font-family:var(--sans);font-size:11px;font-weight:600;color:var(--meta)}

/* trust ministrip under summary */
.sum-trust{background:var(--card);border:1px solid var(--rule);border-radius:6px;padding:18px 20px;display:flex;flex-direction:column;gap:12px}
.sum-trust .t{display:flex;align-items:flex-start;gap:11px;font-family:var(--sans);font-size:13px;color:var(--ink-2);line-height:1.4}
.sum-trust .t svg{width:18px;height:18px;color:var(--green-ink);flex-shrink:0;margin-top:1px}
.sum-trust .t b{color:var(--ink);font-weight:700}

/* mobile line-item reflow */
@media(max-width:560px){
  .ci{grid-template-columns:auto 1fr;gap:14px;padding:18px}
  .ci__thumb{width:76px;height:76px}
  .ci__ctl{grid-column:1 / -1;flex-direction:row;align-items:center;justify-content:space-between;text-align:left;padding-top:4px;border-top:1px dashed var(--rule)}
  .ci-ss{max-width:none;width:100%}
}

/* ============================================================
   PAGE 2 - CART DRAWER / MINI-CART
   ============================================================ */
.dz{min-height:100vh;background:var(--cream);position:relative}
/* dimmed storefront skeleton behind the drawer */
.skel{filter:saturate(.6)}
.skel-hero{background:var(--cream-2);border-bottom:1px solid var(--rule);padding:clamp(40px,7vw,90px) 0}
.skel-hero .container{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
@media(max-width:760px){.skel-hero .container{grid-template-columns:1fr}}
.skel-line{height:16px;border-radius:6px;background:#EBE1D2;margin-bottom:14px}
.skel-line.lg{height:34px;width:74%;background:#E4D8C6}
.skel-line.sm{width:56%}
.skel-line.xs{width:34%;height:13px}
.skel-btn{width:180px;height:48px;border-radius:999px;background:#E4D8C6;margin-top:22px}
.skel-card{background:#EEE5D7;border:1px solid var(--rule);border-radius:6px;aspect-ratio:4/5}
.skel-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding:clamp(30px,5vw,56px) 0}
@media(max-width:760px){.skel-grid{grid-template-columns:repeat(2,1fr)}}

/* scrim */
.scrim{position:fixed;inset:0;background:rgba(26,10,4,.42);z-index:60}

/* drawer panel */
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(420px,92vw);background:var(--cream);border-left:1px solid var(--gold);z-index:70;display:flex;flex-direction:column}
.drawer__hd{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 22px;background:var(--card);border-bottom:2px solid var(--gold)}
.drawer__hd h2{font-family:var(--serif);font-size:19px;font-weight:600}
.drawer__hd .cnt{font-family:var(--sans);font-size:12px;font-weight:700;color:var(--meta);letter-spacing:.02em}
.drawer__x{width:44px;height:44px;border:0;background:none;cursor:pointer;color:var(--ink);display:grid;place-items:center;border-radius:50%;transition:background .16s var(--ease)}
.drawer__x:hover{background:var(--cream-2)}
.drawer__body{flex:1;overflow-y:auto;padding:0}

/* just-added confirm strip */
.added{display:flex;align-items:center;gap:10px;background:var(--green-pale);border-bottom:1px solid #D3E3D5;padding:13px 22px;font-family:var(--sans);font-size:13.5px;color:var(--green-ink);font-weight:600}
.added .ck{width:20px;height:20px;border-radius:50%;background:var(--green-ink);color:#fff;display:grid;place-items:center;flex-shrink:0}
.added .ck svg{width:12px;height:12px}
.added b{font-weight:700}

/* compact drawer line rows */
.dl{display:flex;gap:13px;padding:16px 22px;border-bottom:1px solid var(--rule);align-items:center}
.dl__thumb{width:60px;height:60px;border-radius:5px;background:var(--cream-2);display:grid;place-items:center;flex-shrink:0;overflow:hidden}
.dl__thumb img{width:82%;height:82%;object-fit:contain}
.dl__main{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.dl__name{font-family:var(--serif);font-size:15px;font-weight:600;line-height:1.2;color:var(--ink)}
.dl__macro{font-family:var(--sans);font-size:11.5px;font-weight:600;color:var(--ink-2)}
.dl__macro b{color:var(--ink)}
.dl__macro .dot{color:var(--rule);margin:0 3px}
.dl__row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:3px}
.dl__price{font-family:var(--sans);font-weight:700;font-size:14.5px;color:var(--ink);font-variant-numeric:tabular-nums}
.qtyxs{display:inline-flex;align-items:center;gap:0;background:#fff;border:1px solid var(--rule);border-radius:999px}
.qtyxs button{width:44px;height:44px;border:0;background:none;font-size:15px;line-height:1;cursor:pointer;color:var(--green-ink);font-weight:700;font-family:var(--sans);display:grid;place-items:center}
.qtyxs span{min-width:22px;text-align:center;font-weight:700;font-size:13px;font-family:var(--sans);font-variant-numeric:tabular-nums}

/* subscriber swap module (mirrors .apsub) inside drawer */
.apsub{border:1.5px solid var(--green-ink);background:var(--card);border-radius:6px;margin:16px 22px 4px;padding:15px 16px}
.apsub__head{display:flex;align-items:center;gap:8px;font-family:var(--sans);font-weight:700;color:var(--green-ink);font-size:12.5px;letter-spacing:.02em;margin-bottom:8px}
.apsub__head svg{width:15px;height:15px;flex-shrink:0}
/* Stage-3 FIX (sub-16px copy, drawer subscription prompt, sweep 2026-07-07): 14px->16px. */
.apsub__msg{font-family:var(--sans);font-size:16px;color:var(--ink-2);margin:0 0 12px;line-height:1.4}
.apsub__msg strong{color:var(--ink);font-weight:700}
.apsub .btn{width:100%}
.apsub__toast{display:none;align-items:center;gap:8px;background:var(--green-pale);border:1px solid #cfe3d1;border-radius:5px;padding:10px 12px;margin-top:11px;font-family:var(--sans);font-size:12.5px;color:var(--green-ink);font-weight:700}
.apsub__toast svg{width:15px;height:15px;flex-shrink:0}
.apsub__toast.show{display:flex}

/* drawer footer (sticky checkout) */
.drawer__ft{border-top:2px solid var(--gold);background:var(--card);padding:16px 22px 20px}
.dsum{display:flex;align-items:baseline;justify-content:space-between;gap:12px;font-family:var(--sans);margin-bottom:4px}
.dsum .lbl{font-size:13.5px;color:var(--ink-2)}
.dsum .amt{font-family:var(--serif);font-weight:700;font-size:20px;color:var(--ink);font-variant-numeric:tabular-nums}
.dsum-note{font-family:var(--sans);font-size:16px;color:var(--meta);margin:0 0 14px;display:flex;align-items:center;gap:6px}
.dsum-note svg{width:13px;height:13px;color:var(--rust);flex-shrink:0}
.drawer__ft .btn-cta{width:100%;font-size:15px}
.drawer__viewcart{text-align:center;margin-top:11px;font-family:var(--sans);font-size:13px;font-weight:600;color:var(--green-ink);min-height:44px;display:flex;align-items:center;justify-content:center}
.drawer__viewcart:hover{text-decoration:underline;text-underline-offset:2px}

/* drawer state toggle (demo switch: logged-out vs subscriber).
   Own demo bar ABOVE the storefront chrome so it never overlaps the
   announce bar / header / drawer header (doc-18 FIX 11.3). */
.dz-switch{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px;background:#2A140A;border-bottom:1px solid var(--rust);padding:10px 16px}
.dz-switch::before{content:"Preview state";font-family:var(--sans);font-weight:700;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:#E7C9B8;margin-right:2px}
/* Stage-3 FIX (tap target, sweep 2026-07-07): raised 40px to the 44px floor via
   min-height (not font-size). */
.dz-switch button{border:1.5px solid rgba(255,255,255,.32);background:transparent;font-family:var(--sans);font-weight:700;font-size:12px;color:#F3E7DD;padding:8px 15px;border-radius:999px;cursor:pointer;min-height:44px;line-height:1.1;transition:background .16s var(--ease),color .16s var(--ease),border-color .16s var(--ease)}
.dz-switch button[aria-pressed="true"]{background:#fff;color:var(--rust);border-color:#fff}
.dz-cap{position:fixed;left:16px;bottom:16px;z-index:80;max-width:min(340px,calc(100vw - 32px));background:var(--card);border:1px solid var(--rule);border-left:3px solid var(--rust);border-radius:6px;padding:13px 15px;font-family:var(--sans);font-size:12.5px;color:var(--ink-2);line-height:1.45}
.dz-cap b{color:var(--rust);font-weight:700;display:block;margin-bottom:3px;font-size:11px;letter-spacing:.06em;text-transform:uppercase}
@media(max-width:760px){.dz-cap{display:none}}

/* state visibility helpers */
.when-guest,.when-sub{display:none}
.dz[data-state="guest"] .when-guest{display:block}
.dz[data-state="sub"] .when-sub{display:block}
.dz[data-state="guest"] .st-guest{display:inline}
.dz[data-state="sub"] .st-sub{display:inline}
.st-guest,.st-sub{display:none}

/* ============================================================
   PAGE 3 - BUILD-A-BOX
   ============================================================ */
.byo-hero{background:var(--cream);border-bottom:2px solid var(--gold)}
.byo-hero-in{padding:clamp(32px,5vw,58px) 0}
.byo-hero h1{font-family:var(--serif);font-size:clamp(32px,5vw,50px);font-weight:700;margin:14px 0 0;line-height:1.02}
.byo-hero h1 em{font-style:italic;color:var(--rust)}
/* Stage-3 FIX (sub-16px copy, byo hero sub-copy, sweep 2026-07-07): clamp floor
   raised 15px->16px so mobile widths never dip below the WiO 16px minimum. */
.byo-hero .sub{font-family:var(--sans);font-size:clamp(16px,2vw,19px);color:var(--ink-2);margin:14px 0 0;max-width:60ch}
.byo-hero .hl{display:flex;flex-wrap:wrap;gap:10px 22px;margin:22px 0 0}
.byo-hero .hl .h{display:inline-flex;align-items:center;gap:8px;font-family:var(--sans);font-size:13.5px;font-weight:600;color:var(--ink-2)}
.byo-hero .hl .h svg{width:17px;height:17px;color:var(--green-ink);flex-shrink:0}

.byo-wrap{padding:clamp(28px,4vw,48px) 0 clamp(40px,6vw,80px)}
.byo-grid{display:grid;grid-template-columns:1fr;gap:clamp(24px,3vw,40px);align-items:start}
@media(min-width:960px){.byo-grid{grid-template-columns:minmax(0,1fr) 360px}}

/* aisle groupings */
.byo-aisle{margin-bottom:clamp(30px,4vw,48px)}
.byo-aisle:last-child{margin-bottom:0}
.byo-aisle__hd{display:flex;align-items:baseline;gap:14px;padding-bottom:14px;margin-bottom:22px;border-bottom:2px solid var(--gold)}
.byo-aisle__hd h2{font-family:var(--serif);font-size:23px;font-weight:600}
.byo-aisle__hd .cnt{font-family:var(--sans);font-size:13px;font-weight:600;color:var(--meta);margin-left:auto}
.byo-shop{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
@media(min-width:620px){.byo-shop{grid-template-columns:repeat(3,1fr)}}
@media(min-width:960px) and (max-width:1140px){.byo-shop{grid-template-columns:repeat(2,1fr)}}

/* BYO product card add row (extends .rd-prod).
   State model (doc-18 FIX 16.3): not-in-box shows ONE full-width
   rectangular Add button (label on one line); in-box swaps it for the
   stepper alone. The two controls are never shown together. */
.rd-prod .byo-add{margin-top:auto;padding-top:10px;display:flex;align-items:center;gap:10px}
.rd-prod .byo-add .addbox{flex:1 1 auto;width:100%;background:var(--green-ink);color:#fff;border:0;border-radius:6px;padding:13px 12px;font-family:var(--sans);font-weight:700;font-size:13.5px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:46px;white-space:nowrap;transition:background .16s var(--ease)}
.rd-prod .byo-add .addbox:hover{background:var(--green-deep)}
.rd-prod .byo-add .addbox svg{width:14px;height:14px;flex-shrink:0}
/* stepper: full-width rectangular, only shown when the card is in-box */
.rd-prod .byo-add .qtyx{flex:1 1 auto;width:100%;justify-content:space-between;border-radius:6px;padding:4px 6px}
/* Stage-3 FIX (tap target, sweep 2026-07-07): match the shared 44px .qtyx button floor;
   this override previously re-shrank the BYO in-box stepper back to 38px. */
.rd-prod .byo-add .qtyx button{width:44px;height:44px;min-width:44px;min-height:44px}
/* show/hide by state — not-in-box: Add only · in-box: stepper only */
.rd-prod .byo-add .qtyx{display:none}
.rd-prod.in-box .byo-add .addbox{display:none}
.rd-prod.in-box .byo-add .qtyx{display:inline-flex}
.rd-prod.in-box{border-color:var(--green-ink)}
.rd-prod .inbox-flag{display:none;align-items:center;gap:6px;font-family:var(--sans);font-size:11.5px;font-weight:700;color:var(--green-ink);letter-spacing:.02em}
.rd-prod.in-box .inbox-flag{display:inline-flex}
.rd-prod .inbox-flag svg{width:13px;height:13px}

/* sticky running summary (desktop sidebar) */
.byo-sum{position:sticky;top:96px;background:var(--card);border:1px solid var(--rule);border-radius:6px;overflow:hidden}
.byo-sum__hd{padding:18px 20px;border-bottom:2px solid var(--gold);display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.byo-sum__hd h2{font-family:var(--serif);font-size:19px;font-weight:600}
.byo-sum__hd .n{font-family:var(--sans);font-size:12px;font-weight:700;color:var(--rust);letter-spacing:.02em}
.byo-sum__body{padding:18px 20px 20px}
.byo-box-list{list-style:none;margin:0 0 16px;padding:0;display:flex;flex-direction:column;gap:11px;max-height:230px;overflow-y:auto}
.byo-box-list li{display:flex;align-items:center;gap:11px;font-family:var(--sans);font-size:13px}
.byo-box-list .th{width:38px;height:38px;border-radius:5px;background:var(--cream-2);display:grid;place-items:center;flex-shrink:0;overflow:hidden}
.byo-box-list .th img{width:82%;height:82%;object-fit:contain}
.byo-box-list .nm{flex:1;min-width:0;color:var(--ink);font-weight:600;line-height:1.25}
.byo-box-list .q{color:var(--meta);font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.byo-box-list .pr{color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap;min-width:52px;text-align:right}
.byo-sum__empty{font-family:var(--sans);font-size:13.5px;color:var(--meta);text-align:center;padding:18px 0;line-height:1.5}

.byo-ss{display:flex;align-items:center;gap:11px;background:var(--green-pale);border:1.5px solid #D3E3D5;border-radius:6px;padding:12px 14px;margin:0 0 14px;font-family:var(--sans)}
/* Stage-4 FIX (tap target, ALL widths incl. desktop 1024/1280px, sweep 2026-07-07):
   the Stage-3 ::before hit-area hack didn't enlarge the MEASURED control rect (the
   pseudo-element isn't part of layout sizing), so the button itself still failed
   the 44px floor wherever the switch is visible. Rebuilt so the BUTTON is the real
   48x44 hit area (background:transparent) and a ::before renders the visual 42x24
   pill centered inside it; the visual weight is unchanged, only the hit area grew. */
.byo-ss .sw{width:48px;height:44px;border-radius:999px;background:transparent;position:relative;flex-shrink:0;cursor:pointer;border:0;margin:0}
.byo-ss .sw::before{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:42px;height:24px;border-radius:999px;background:var(--green-ink)}
.byo-ss .sw[aria-pressed="false"]::before{background:#CFC6B8}
.byo-ss .sw::after{content:"";position:absolute;top:50%;transform:translateY(-50%);right:6px;width:18px;height:18px;border-radius:50%;background:#fff;transition:right .18s var(--ease),left .18s var(--ease)}
.byo-ss .sw[aria-pressed="false"]::after{right:auto;left:6px}
.byo-ss .lb{font-size:13px;color:var(--ink);font-weight:600;line-height:1.35}
.byo-ss .lb b{color:var(--green-ink);font-weight:700}

.byo-tot{display:flex;align-items:baseline;justify-content:space-between;gap:12px;border-top:2px solid var(--gold);padding-top:14px;margin-top:2px;font-family:var(--serif);font-weight:700;font-size:21px;color:var(--ink)}
.byo-tot .v{font-variant-numeric:tabular-nums}
.byo-sum__cta{margin-top:16px}
.byo-sum__cta .btn{width:100%;font-size:15px;padding:16px}
/* Stage-3 FIX (sub-16px copy, byo shipping note, sweep 2026-07-07): 12px->16px. */
.byo-sum__ship{font-family:var(--sans);font-size:16px;color:var(--meta);text-align:center;margin:12px 0 0;display:flex;align-items:center;justify-content:center;gap:7px}
.byo-sum__ship svg{width:14px;height:14px;color:var(--rust);flex-shrink:0}

/* mobile: summary becomes sticky bottom bar */
.byo-bar{display:none}
@media(max-width:960px){
  .byo-sum{display:none}
  .byo-bar{display:block;position:sticky;bottom:0;z-index:30;background:var(--card);border-top:2px solid var(--gold);padding:12px 0;margin-top:8px}
  .byo-bar-in{display:flex;align-items:center;gap:14px}
  .byo-bar__meter{flex:1;min-width:0}
  /* Stage-3 FIX (sub-16px copy, byo mobile sticky-bar goal line, sweep 2026-07-07): 12.5px->16px. */
  .byo-bar__goal{font-family:var(--sans);font-size:16px;color:var(--ink-2);margin:0 0 6px;line-height:1.3}
  .byo-bar__goal b{color:var(--green-ink);font-weight:700}
  .byo-bar__rail{height:8px;background:var(--green-pale);border:1px solid #D3E3D5;border-radius:999px;overflow:hidden;position:relative}
  .byo-bar__fill{position:absolute;inset:0 auto 0 0;background:var(--green-ink);border-radius:999px}
  .byo-bar__cta{flex-shrink:0;display:flex;flex-direction:column;align-items:flex-end;gap:2px}
  .byo-bar__cta .tot{font-family:var(--serif);font-weight:700;font-size:16px;color:var(--ink);font-variant-numeric:tabular-nums;line-height:1}
  .byo-bar__cta .btn{padding:12px 20px;font-size:14px}
}

/* ---- BYO mockup spec note (Track 2b: tag-gate / source-collection resolution) ---- */
.byo-specnote{margin:clamp(20px,3vw,28px) 0 0;background:var(--card);border:1px solid var(--rule);border-left:3px solid var(--rust);border-radius:6px;padding:16px 20px}
.byo-specnote__kicker{display:block;font-family:var(--sans);font-weight:700;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--rust);margin-bottom:8px}
.byo-specnote p{margin:0;font-family:var(--sans);font-size:16px;line-height:1.55;color:var(--ink-2)}
.byo-specnote p+p{margin-top:8px}
.byo-specnote code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;background:var(--cream-2);color:var(--rust-deep);padding:1px 6px;border-radius:4px}
.byo-specnote__flag{font-size:16px !important;color:var(--meta) !important;font-style:italic}

/* ---- Coupon affordance + armed money rows (Track 3, shared cart/drawer/BYO) ---- */
.sum__code{margin:2px 0}
.sum__code-toggle{background:none;border:0;color:var(--green-ink);font-family:var(--sans);font-weight:700;font-size:14px;cursor:pointer;padding:8px 0;min-height:44px;display:inline-flex;align-items:center;gap:7px}
.sum__code-toggle::before{content:"+";font-size:16px;line-height:0}
.sum__code-toggle[aria-expanded=true]::before{content:"\2013"}
.sum__code-form{display:flex;gap:8px;margin-top:8px}
.sum__code-form input{flex:1 1 auto;min-width:0;font-family:var(--sans);font-size:15px;color:var(--ink);padding:11px 13px;border:1.5px solid var(--rule);border-radius:8px;background:var(--card);min-height:44px}
.sum__code-form input:focus{outline:none;border-color:var(--green-ink);box-shadow:0 0 0 3px rgba(35,103,48,.14)}
.btn-code-apply{flex:0 0 auto;background:var(--rust);color:#fff;border:0;border-radius:8px;font-family:var(--sans);font-weight:700;font-size:14px;padding:0 18px;min-height:44px;cursor:pointer}
.btn-code-apply:hover{background:var(--rust-deep)}
.sum__code-msg{margin:8px 0 0;font-family:var(--sans);font-size:13px;font-weight:600;color:var(--green-ink)}
.sum__code-armed{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--green-pale);border:1px solid #cfe2cf;border-radius:8px;padding:10px 14px;margin:2px 0}
.sum__code-tag{display:inline-flex;align-items:center;gap:8px;font-family:var(--sans);font-weight:700;font-size:14px;color:var(--green-ink)}
.sum__code-tag svg{width:16px;height:16px;flex:0 0 auto}
.sum__code-remove{background:none;border:0;color:var(--green-ink);text-decoration:underline;font-family:var(--sans);font-size:13px;cursor:pointer;min-height:44px;padding:0 4px;opacity:.85}
.sum__code-remove:hover{opacity:1}
.sum__codenote{margin:10px 0 0;font-family:var(--sans);font-size:13px;line-height:1.5;color:var(--ink-2)}
.sum__codenote b{color:var(--ink)}
/* drawer code row */
.dz-code{padding:0 22px 4px}
.dz-code .sum__code-armed{font-size:13px}