/* KOLD Partner Cart Builder.

   WRITTEN PHONE FIRST. Every rule above the one media query at the bottom is the
   phone. The wide screen is the enhancement, not the other way round, because
   the partner is usually building the cart on the same phone they are texting
   from. Nothing above the media query may assume a width over 375px.

   Tokens, type, radii and easing are lifted from APPROVED-2026-09-03/kold-d.css,
   which is in the approved lock directory and is NOT edited.

   MOTION IS RE-BUDGETED ON PURPOSE. The homepage motion is a sales instrument
   read once by a stranger. This is a tool opened fifty times a week by someone
   who wants to be finished, where cinematic motion reads as lag. Nothing here
   animates longer than 300ms, nothing pins, nothing scrubs, and every animation
   confirms something the partner just did.
*/

:root{
  --paper:#FDFDFC; --light:#F7F7F5; --ink:#2C2C2C; --muted:#6E6E6B;
  --line:#E6E6E2;
  --ground:#0A0A0A; --raised:#141414; --edge:#222222;
  --on-ground:#F3F3F1; --on-ground-muted:#8E8E8A;

  --metabolic-a:#C0FD9D; --metabolic-b:#8BDC90;
  --performance-a:#F3575C; --performance-b:#957071;
  --aesthetic-a:#FFF1CB; --aesthetic-b:#FFDA78;
  --cognitive-a:#BA8EFF; --cognitive-b:#A0C9FF;
  --renewal-a:#A1EDFE; --renewal-b:#5DBBF2;
  --solution-a:#999999; --solution-b:#D1D1D1;

  --ease:cubic-bezier(.23,1,.32,1);
  --gut:16px;
  --top:56px;
  --maxw:1440px;
  --railw:400px;
  --safe-b:env(safe-area-inset-bottom,0px);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; -webkit-tap-highlight-color:transparent}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:Manrope,"Segoe UI",system-ui,-apple-system,sans-serif;
  font-weight:400; font-size:16px; line-height:1.8;
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; border:0; background:none; cursor:pointer; padding:0}
input{font:inherit; color:inherit}
/* A bare display rule BEATS the hidden attribute, so el.hidden = true left rows
   on screen. Measured here 2026-09-15: a -$0.00 discount row on an empty cart. */
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--ink); outline-offset:2px; border-radius:6px}
.num{font-variant-numeric:tabular-nums}
h1,h2,h3{margin:0; font-weight:600; line-height:1.2; text-wrap:balance}
.eyebrow{margin:0; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.18em;
  line-height:1; color:var(--muted)}

.booting{margin:0; min-height:100dvh; display:grid; place-items:center; padding:0 var(--gut);
  font-size:14px; color:var(--muted); text-align:center}

/* ======================================================= shared controls */
.btn-primary{width:100%; height:52px; border-radius:999px; background:var(--ink); color:var(--paper);
  font-size:15px; font-weight:700; transition:transform .16s var(--ease), opacity .16s var(--ease)}
.btn-primary:active{transform:scale(.98)}
.btn-primary[disabled]{opacity:.45; cursor:progress}
.btn-text{min-height:44px; padding:0 4px; font-size:14px; font-weight:600; color:var(--muted);
  text-decoration:underline; text-underline-offset:3px}

.field{display:block; margin:22px 0 14px}
.field > span:first-child{display:block; font-size:13px; font-weight:600; line-height:1.4; margin-bottom:8px}
.field input{width:100%; height:52px; padding:0 16px; border:1px solid #CFCFC9; border-radius:14px;
  background:var(--paper); font-size:17px; outline:0; transition:border-color .16s var(--ease)}
.field input:focus{border-color:var(--ink)}
.field .otp{letter-spacing:.32em; font-size:22px; font-weight:700; text-align:center}

/* ================================================================ sign in */
.gate{min-height:100dvh; display:flex; justify-content:center; padding:0 var(--gut)}
.gate-in{width:100%; max-width:420px; padding-block:clamp(40px,12vh,110px) 40px}
.gate-mark{height:22px; width:auto; margin-bottom:18px}
.gate-step{margin-top:34px}
.gate-step h1{font-size:30px; letter-spacing:-.02em}
.gate-lede{margin:10px 0 0; font-size:15px; line-height:1.7; color:var(--muted)}
.gate-lede b{color:var(--ink); font-weight:600; word-break:break-all}
.gate-msg{margin:12px 0 0; min-height:1.6em; font-size:14px; line-height:1.55; font-weight:600}
.gate-msg:empty{min-height:0}
.gate-step .btn-text{display:block; margin:6px auto 0}

/* password with a show / hide control inside the field */
.pw{position:relative; display:block}
.field .pw input{padding-right:76px}
.pw-show{position:absolute; top:4px; right:4px; height:44px; min-width:64px; padding:0 12px;
  border-radius:10px; font-size:13px; font-weight:700; color:var(--muted)}
.pw-show:focus-visible{outline:2px solid var(--ink); outline-offset:-2px}

/* ============================================================ top bar */
.top{position:sticky; top:0; z-index:60; height:var(--top); display:flex; align-items:center;
  gap:10px; padding:0 var(--gut); background:rgba(253,253,252,.94);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px)}
.top .mark{height:17px; width:auto; flex:none}
.top-title{font-size:13px; font-weight:600; color:var(--muted); white-space:nowrap}

/* The partner's identity, filled from their account. A pill, not a field. */
.me{margin-left:auto; display:inline-flex; align-items:center; gap:8px; min-height:40px;
  padding:0 5px 0 14px; border:1px solid var(--line); border-radius:999px; background:var(--paper)}
.me-code{font-size:13px; font-weight:700; letter-spacing:.04em; max-width:11ch; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap}
.me-pct{font-size:11px; font-weight:700; color:var(--paper); background:var(--ink); border-radius:999px;
  padding:6px 9px; line-height:1; white-space:nowrap}

.codechip{margin-left:auto; display:inline-flex; align-items:center; gap:6px; min-height:40px;
  padding:0 5px 0 12px; border:1px solid var(--line); border-radius:999px; background:var(--paper);
  min-width:0}
.codechip .lbl{font-size:10px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}
.codechip input{border:0; outline:0; background:none; width:9.5ch; min-width:0; font-size:14px; font-weight:700;
  letter-spacing:.03em; text-transform:uppercase}
.codechip .pct{font-size:11px; font-weight:700; color:var(--paper); background:var(--ink);
  border-radius:999px; padding:6px 9px; line-height:1; white-space:nowrap}
.codechip.unknown{border-color:#D9B8B8}
.codechip.unknown .pct{background:var(--performance-b)}

/* ====================================================== search + filters */
.pickhead{position:sticky; top:var(--top); z-index:40; background:var(--paper);
  padding-block:2px 10px; border-bottom:1px solid var(--line)}
.search{display:flex; align-items:center; gap:10px; height:48px; margin:0 var(--gut); padding:0 6px 0 15px;
  border:1px solid var(--line); border-radius:999px; background:var(--light);
  transition:border-color .16s var(--ease), background .16s var(--ease)}
.search:focus-within{border-color:var(--ink); background:var(--paper)}
.search svg{width:17px; height:17px; flex:none; stroke:var(--muted)}
/* 16px or iOS zooms the whole page on focus */
.search input{flex:1; min-width:0; border:0; outline:0; background:none; font-size:16px}
.search input::placeholder{color:#8A8A85}
.search-clear{width:38px; height:38px; border-radius:999px; font-size:22px; line-height:1; color:var(--muted);
  display:grid; place-items:center; flex:none}
.searchrow{display:flex; gap:8px; margin:0 var(--gut)}
.searchrow .search{flex:1; min-width:0; margin:0}

/* Two named views side by side, so it is obvious a second one exists and what it holds */
.views{display:flex; gap:4px; margin:10px var(--gut) 2px; padding:4px; border:1px solid var(--line);
  border-radius:999px; background:var(--light)}
.viewtab{flex:1 1 0; min-width:0; min-height:44px; padding:0 10px; border-radius:999px; display:inline-flex;
  align-items:center; justify-content:center; gap:7px; font-size:14px; font-weight:700; color:var(--muted);
  white-space:nowrap; transition:background .16s var(--ease), color .16s var(--ease)}
.viewtab .cnt{font-size:11px; font-weight:700}
.viewtab[aria-pressed="true"]{background:var(--ink); color:var(--paper)}
.viewtab:focus-visible{outline-offset:-2px; border-radius:999px}

/* ========================================================= ordered together */
.tg-head{padding:14px var(--gut) 4px}
.tg-head h2{font-size:20px; letter-spacing:-.01em}
.tg-head p{margin:6px 0 0; font-size:13.5px; line-height:1.6; color:var(--muted)}
.tg-sec{margin:0; padding:18px var(--gut) 6px}
.set{display:grid; grid-template-columns:auto minmax(0,1fr); gap:6px 14px; align-items:center;
  padding:14px var(--gut); border-bottom:1px solid var(--line)}
.set-th{display:flex; grid-row:span 3; align-self:start}
.set-th .thumb{width:52px; height:52px; border-radius:12px; border:2px solid var(--paper)}
.set-th .thumb + .thumb{margin-left:-18px}
.set-names{margin:0; font-size:15px; font-weight:600; line-height:1.35; letter-spacing:-.005em}
.set-meta{margin:0; font-size:12.5px; line-height:1.4; color:var(--muted)}
.set-add{grid-column:2; justify-self:start; margin-top:4px; min-height:44px; padding:0 18px; border-radius:999px;
  background:var(--ink); color:var(--paper); font-size:14px; font-weight:700;
  transition:transform .14s var(--ease), opacity .16s var(--ease)}
.set-add:active{transform:scale(.97)}
.set-add[disabled]{background:var(--light); color:var(--muted); cursor:default}

/* suggestions, inside the dark cart */
.sug{margin:8px 16px 4px; padding-top:12px; border-top:1px solid var(--edge)}
.sug-h{margin:0 4px 4px; font-size:10px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--on-ground-muted)}
.sug-row{display:grid; grid-template-columns:40px minmax(0,1fr) auto; gap:12px; align-items:center; padding:8px 4px}
.sug-row .th{position:relative; width:40px; height:44px; border-radius:9px; background:var(--raised); overflow:hidden}
.sug-row .th img{position:absolute; inset:0; width:100%; height:100%; object-fit:contain; padding:3px}
.sug-row .areabar{position:absolute; left:0; right:0; bottom:0; height:2px}
.sug-row .nm{font-size:13.5px; font-weight:600; line-height:1.35}
.sug-row .why{font-size:12px; line-height:1.45; color:var(--on-ground-muted); margin-top:2px}
.sug-row .add{width:auto; min-width:44px; padding:0 12px; gap:6px; display:flex; background:var(--on-ground);
  color:var(--ground); font-size:13px; font-weight:700}
.sug-row .add b{font-size:18px; font-weight:500}

/* One line each, scrolled sideways, so two filter rows cost two lines of screen
   and never wrap into a wall of chips on a phone. */
.rowscroll{display:flex; gap:7px; overflow-x:auto; padding:9px var(--gut) 0;
  scrollbar-width:none; overscroll-behavior-x:contain}
.rowscroll::-webkit-scrollbar{display:none}
.chip{position:relative; flex:none; display:inline-flex; align-items:center; gap:7px; height:36px;
  padding:0 13px; border:1px solid var(--line); border-radius:999px; background:var(--paper);
  font-size:13px; font-weight:600; line-height:1; white-space:nowrap;
  transition:background .16s var(--ease), color .16s var(--ease), border-color .16s var(--ease)}
/* 36px to look at, 44px to hit */
.chip::before{content:""; position:absolute; inset:-4px -2px}
.chip .dot{width:12px; height:12px; border-radius:999px; flex:none; background:var(--line)}
.chip .cnt{font-size:11px; font-weight:700; color:var(--muted)}
.chip[aria-pressed="true"]{background:var(--ink); color:var(--paper); border-color:var(--ink)}
.chip[aria-pressed="true"] .cnt{color:#BDBDB8}
.areas .chip{height:32px; font-size:12.5px}

/* =================================================================== list */
.shell{padding-bottom:calc(104px + var(--safe-b))}
.resultline{margin:0; padding:12px var(--gut) 2px; font-size:12px; font-weight:600; color:var(--muted)}

.row{position:relative; display:flex; align-items:center; border-bottom:1px solid var(--line)}
.row::before{content:""; position:absolute; left:0; top:12px; bottom:12px; width:3px;
  border-radius:0 3px 3px 0; transform:scaleY(0); transition:transform .22s var(--ease)}
.row:not([data-qty="0"])::before{transform:none}
.row-main{flex:1; min-width:0; display:grid; grid-template-columns:64px minmax(0,1fr) auto;
  gap:12px; align-items:center; padding:10px 8px 10px var(--gut); text-align:left; min-height:84px}
.row-main:active{background:var(--light)}
.thumb{position:relative; width:64px; height:64px; border-radius:14px; background:var(--light); overflow:hidden}
.thumb .glow{position:absolute; inset:-20%; border-radius:50%; opacity:.55}
.thumb img{position:absolute; inset:0; width:100%; height:100%; object-fit:contain; padding:4px}
.row-txt{display:flex; flex-direction:column; min-width:0; line-height:1.3}
.row-name{font-size:15px; font-weight:600; letter-spacing:-.005em}
.row-meta{margin-top:3px; font-size:12.5px; color:var(--muted)}
.row-flag{align-self:flex-start; margin-top:5px; display:inline-flex; align-items:center; gap:6px;
  font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink)}
.row-flag::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--aesthetic-b)}
.row-flag.low::before{background:linear-gradient(45deg,var(--performance-b),var(--performance-a))}
.row-price{font-size:14.5px; font-weight:700; white-space:nowrap}
.row-ctl{flex:none; padding-right:var(--gut)}

.add{width:44px; height:44px; border-radius:999px; background:var(--ink); color:var(--paper);
  font-size:22px; font-weight:500; line-height:1; display:grid; place-items:center;
  transition:transform .14s var(--ease)}
.add:active{transform:scale(.9)}

.step{display:flex; align-items:center; border:1px solid var(--ink); border-radius:999px; height:44px}
.step button{width:40px; height:42px; border-radius:999px; font-size:20px; line-height:1;
  display:grid; place-items:center; transition:background .14s var(--ease)}
.step button:active{background:var(--light)}
.step button.capped{opacity:.3}
.step .q{min-width:22px; text-align:center; font-size:15px; font-weight:700}

.empty{padding:48px var(--gut); text-align:center}
.empty p{margin:0 0 6px; font-size:15px; color:var(--muted)}

/* area gradients, by data-area. One gradient per surface, chosen by the area of
   the content; the row's text also names the area, so colour never carries it alone */
[data-area="renewal"]::before,    [data-area="renewal"] .dot    {background:linear-gradient(90deg,var(--renewal-a),var(--renewal-b))}
[data-area="metabolic"]::before,  [data-area="metabolic"] .dot  {background:linear-gradient(90deg,var(--metabolic-a),var(--metabolic-b))}
[data-area="aesthetic"]::before,  [data-area="aesthetic"] .dot  {background:linear-gradient(90deg,var(--aesthetic-a),var(--aesthetic-b))}
[data-area="cognitive"]::before,  [data-area="cognitive"] .dot  {background:linear-gradient(90deg,var(--cognitive-a),var(--cognitive-b))}
[data-area="performance"]::before,[data-area="performance"] .dot{background:linear-gradient(90deg,var(--performance-a),var(--performance-b))}
[data-area="solution"]::before,   [data-area="solution"] .dot   {background:linear-gradient(90deg,var(--solution-a),var(--solution-b))}
[data-area="none"]::before{background:var(--ink)}
[data-area="none"] .dot{background:var(--line)}
.chip[data-area]::before{background:none!important}
[data-area="renewal"]     .glow{background:radial-gradient(circle,rgba(161,237,254,.7),transparent 62%)}
[data-area="metabolic"]   .glow{background:radial-gradient(circle,rgba(192,253,157,.7),transparent 62%)}
[data-area="aesthetic"]   .glow{background:radial-gradient(circle,rgba(255,218,120,.6),transparent 62%)}
[data-area="cognitive"]   .glow{background:radial-gradient(circle,rgba(186,142,255,.55),transparent 62%)}
[data-area="performance"] .glow{background:radial-gradient(circle,rgba(243,87,92,.4),transparent 62%)}
[data-area="solution"]    .glow{background:radial-gradient(circle,rgba(209,209,209,.8),transparent 62%)}
[data-area="none"]        .glow{background:none}

/* =================================================================== dock */
.dock{position:fixed; z-index:62; left:10px; right:10px; bottom:calc(10px + var(--safe-b));
  display:flex; align-items:center; gap:8px; height:64px; padding:0 8px 0 10px; border-radius:22px;
  background:var(--ground); color:var(--on-ground); box-shadow:0 18px 40px -18px rgba(0,0,0,.55)}
.dock-cart{flex:1; min-width:0; height:100%; display:flex; align-items:center; gap:11px; text-align:left}
.dock-n{min-width:34px; height:34px; padding:0 9px; border-radius:999px; background:var(--raised);
  border:1px solid var(--edge); display:grid; place-items:center; font-size:14px; font-weight:700}
.dock.has .dock-n{background:var(--on-ground); color:var(--ground); border-color:var(--on-ground)}
.dock-txt{display:flex; flex-direction:column; min-width:0; line-height:1.2}
.dock-lbl{font-size:12px; color:var(--on-ground-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.dock-tot{font-size:18px; font-weight:700; letter-spacing:-.01em}
.dock-send{flex:none; height:48px; padding:0 20px; border-radius:999px; background:var(--on-ground);
  color:var(--ground); font-size:15px; font-weight:700; transition:transform .14s var(--ease), opacity .16s var(--ease)}
.dock-send:active{transform:scale(.96)}
.dock-send[disabled]{opacity:.3; cursor:not-allowed}
@keyframes bump{0%{transform:scale(1)} 40%{transform:scale(1.18)} 100%{transform:scale(1)}}
.dock.bump .dock-n{animation:bump .26s var(--ease)}

/* The best add for this cart, sat on the dock while the partner is still picking.
   Inside the cart sheet the same list sits under the lines, where on a phone the
   totals push it below the fold. One at a time, and closable for the session. */
.nudge{position:fixed; z-index:61; left:10px; right:10px; bottom:calc(82px + var(--safe-b));
  display:grid; grid-template-columns:36px minmax(0,1fr) auto 36px; gap:10px; align-items:center;
  min-height:60px; padding:6px 4px 6px 10px; border:1px solid var(--line); border-radius:18px;
  background:var(--paper); box-shadow:0 14px 30px -18px rgba(0,0,0,.35)}
.nudge .th{position:relative; width:36px; height:42px; border-radius:8px; background:var(--light); overflow:hidden}
.nudge .th img{position:absolute; inset:0; width:100%; height:100%; object-fit:contain; padding:2px}
.nudge .areabar{position:absolute; left:0; right:0; bottom:0; height:2px}
.nudge-txt{margin:0; min-width:0; line-height:1.3}
.nudge-nm{display:block; font-size:13px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.nudge-why{display:block; font-size:11.5px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.nudge-add{min-height:44px; padding:0 12px; border-radius:999px; background:var(--ink); color:var(--paper);
  font-size:13px; font-weight:700; white-space:nowrap; transition:transform .14s var(--ease)}
.nudge-add:active{transform:scale(.96)}
.nudge-x{width:36px; height:44px; border-radius:999px; font-size:22px; line-height:1; color:var(--muted);
  display:grid; place-items:center}
body.nudging .shell{padding-bottom:calc(172px + var(--safe-b))}
body.nudging .toast{bottom:calc(154px + var(--safe-b))}

/* ============================================================ cart sheet */
.scrim{position:fixed; inset:0; z-index:64; background:rgba(10,10,10,.42)}
.sheet{position:fixed; z-index:66; left:0; right:0; bottom:0; max-height:90dvh; display:flex;
  flex-direction:column; border-radius:22px 22px 0 0; background:var(--ground); color:var(--on-ground);
  transform:translateY(104%); transition:transform .28s var(--ease); visibility:hidden}
body.sheet-open .sheet{transform:none; visibility:visible}
body.sheet-open{overflow:hidden}

.sheet-head{position:relative; display:flex; align-items:center; gap:10px; padding:18px 8px 10px 20px}
.grab{position:absolute; left:50%; top:8px; width:36px; height:4px; border-radius:2px; background:#3A3A3A;
  transform:translateX(-50%)}
.sheet-head h2{font-size:17px}
.sheet-head .n{font-size:12px; font-weight:700; color:var(--on-ground-muted)}
.sheet-head .clear{margin-left:auto; min-height:44px; padding:0 10px; font-size:13px; font-weight:600;
  color:var(--on-ground-muted)}
.sheet-head .close{width:44px; height:44px; border-radius:999px; font-size:26px; line-height:1;
  color:var(--on-ground); display:grid; place-items:center}

.forwho{display:flex; align-items:center; gap:12px; margin:0 16px; padding:0 14px; height:48px;
  border:1px solid var(--edge); border-radius:14px}
.forwho label{font-size:10px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--on-ground-muted)}
.forwho input{flex:1; min-width:0; border:0; outline:0; background:none; font-size:16px; color:var(--on-ground)}
.forwho input::placeholder{color:#6A6A66}

.lines{flex:1; min-height:80px; overflow-y:auto; padding:6px 0; overscroll-behavior:contain}
.line{display:grid; grid-template-columns:48px minmax(0,1fr) auto; gap:12px; align-items:center;
  padding:10px 16px 10px 20px}
.line .th{position:relative; width:48px; height:54px; border-radius:10px; background:var(--raised); overflow:hidden}
.line .th img{position:absolute; inset:0; width:100%; height:100%; object-fit:contain; padding:3px}
.line .areabar{position:absolute; left:0; right:0; bottom:0; height:2px}
.line-mid{min-width:0}
.line .nm{font-size:14px; font-weight:600; line-height:1.35}
.line .pr{font-size:12.5px; color:var(--on-ground-muted); margin-top:2px}
.tags{display:flex; flex-wrap:wrap; gap:4px 10px; margin-top:4px}
.tag{font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; line-height:1.3}
.tag.warm{color:var(--aesthetic-b)}
.tag.good{color:var(--metabolic-a)}
.line .step{border-color:var(--edge)}
.line .step button{color:var(--on-ground)}
.line .step button:active{background:var(--raised)}

.rempty{padding:26px 24px}
.rempty p{margin:0; font-size:14px; line-height:1.65; color:var(--on-ground-muted)}

.sheet-foot{border-top:1px solid var(--edge); background:var(--raised);
  padding:14px 20px calc(16px + var(--safe-b))}
.sum{display:flex; align-items:baseline; justify-content:space-between; gap:12px; font-size:14px;
  line-height:1.5; color:var(--on-ground-muted); padding:3px 0}
.sum .v{color:var(--on-ground); font-weight:600}
.sum.off .v{color:var(--metabolic-a)}
.sum.total{margin-top:8px; padding-top:10px; border-top:1px solid var(--edge); font-size:15px;
  color:var(--on-ground); font-weight:600}
.sum.total .v{font-size:24px; font-weight:700; letter-spacing:-.02em}
.note{margin:8px 0 0; font-size:12.5px; line-height:1.55; color:var(--on-ground-muted)}
.gift{display:flex; gap:10px; align-items:flex-start; margin-top:10px; padding:10px 12px; border-radius:12px;
  background:rgba(192,253,157,.08); border:1px solid rgba(192,253,157,.18)}
.gift i{width:8px; height:8px; border-radius:50%; flex:none; margin-top:7px;
  background:linear-gradient(45deg,var(--metabolic-b),var(--metabolic-a))}
.gift p{margin:0; font-size:12.5px; line-height:1.55; color:var(--on-ground-muted)}
.gift b{color:var(--on-ground); font-weight:600}
.warn{margin:10px 0 0; padding:10px 12px; border-radius:12px; border:1px solid rgba(243,87,92,.35);
  font-size:13px; line-height:1.55; color:var(--on-ground)}

.btn-send{margin-top:14px; width:100%; height:54px; border-radius:999px; background:var(--on-ground);
  color:var(--ground); font-size:16px; font-weight:700; display:flex; align-items:center;
  justify-content:center; gap:10px; transition:transform .14s var(--ease), opacity .16s var(--ease)}
.btn-send:active{transform:scale(.98)}
.btn-send[disabled]{opacity:.3; cursor:not-allowed}
.btn-send svg{width:17px; height:17px; stroke:currentColor; fill:none; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round}
.linkrow{margin-top:10px; display:flex; gap:8px}
.linkrow input{flex:1; min-width:0; height:44px; padding:0 12px; border-radius:12px; border:1px solid var(--edge);
  background:var(--ground); color:var(--on-ground-muted); font-size:12px; outline:0; text-overflow:ellipsis}
.mini{height:44px; padding:0 14px; border-radius:12px; border:1px solid var(--edge); display:grid;
  place-items:center; font-size:13px; font-weight:600; color:var(--on-ground); white-space:nowrap}
.mini[disabled],.mini.off{opacity:.35; pointer-events:none}

/* ============================================================== account */
.acct{position:fixed; z-index:70; left:0; right:0; bottom:0; padding:0 10px calc(10px + var(--safe-b))}
.acct-card{background:var(--paper); border-radius:22px; padding:24px 20px 14px;
  max-height:calc(100dvh - 20px - var(--safe-b)); overflow-y:auto; overscroll-behavior:contain;
  box-shadow:0 -10px 40px -20px rgba(0,0,0,.4)}
.acct-card h2{margin-top:10px; font-size:22px}
.acct-email{margin:2px 0 0; font-size:14px; color:var(--muted); word-break:break-all}
.acct-dl{margin:18px 0 0; border-top:1px solid var(--line)}
.acct-dl div{display:flex; justify-content:space-between; gap:12px; padding:12px 0; border-bottom:1px solid var(--line)}
.acct-dl dt{font-size:14px; color:var(--muted)}
.acct-dl dd{margin:0; font-size:14px; font-weight:700; text-align:right; word-break:break-all}
.acct-note{margin:14px 0 18px; font-size:13px; line-height:1.6; color:var(--muted)}
.acct-actions{display:flex; justify-content:space-between; gap:8px; margin-top:8px}
.acct-actions .btn-text{margin:0}
#acct-pwform .field{margin:16px 0 10px}
#acct-pwform .btn-primary{margin-top:8px}

/* ================================================================= toast */
body.sheet-open .toast{bottom:auto; top:calc(14px + env(safe-area-inset-top))}
.toast{position:fixed; z-index:80; left:50%; bottom:calc(86px + var(--safe-b)); transform:translateX(-50%);
  max-width:calc(100% - 32px); padding:11px 18px; border-radius:999px; background:var(--ink);
  color:var(--paper); font-size:14px; font-weight:600; line-height:1.3; text-align:center;
  animation:toastin .2s var(--ease)}
@keyframes toastin{from{opacity:0; transform:translate(-50%,8px)} to{opacity:1; transform:translate(-50%,0)}}

/* =================================================== the wide screen */
@media (min-width:1040px){
  :root{--gut:clamp(24px,3vw,40px); --top:64px}
  .top{max-width:var(--maxw); margin:0 auto}
  .top .mark{height:19px}
  .top-title{font-size:14px}

  /* The filters span the product column only, so the cart panel beside them is
     never covered when both are stuck to the top. */
  .pickhead{max-width:var(--maxw); margin:0 auto; border-bottom:0;
    padding-right:calc(var(--railw) + var(--gut) + 24px); background:transparent}
  .pickhead::before{content:""; position:absolute; z-index:-1; inset:0 calc(var(--railw) + var(--gut)) 0 0;
    background:var(--paper)}
  .rowscroll{flex-wrap:wrap; overflow:visible}
  .viewswrap{max-width:var(--maxw); margin:0 auto}
  .views{max-width:440px; margin-top:16px}

  .shell{max-width:var(--maxw); margin:0 auto; padding:0 var(--gut) 60px; display:grid;
    grid-template-columns:minmax(0,1fr) var(--railw); gap:24px; align-items:start}
  .resultline{padding-left:0}
  .list{display:grid; grid-template-columns:repeat(auto-fill,minmax(330px,1fr)); gap:10px; margin-top:8px}
  .row{border:1px solid var(--line); border-radius:16px; overflow:hidden; background:var(--paper);
    transition:border-color .18s var(--ease)}
  .row:hover{border-color:#CFCFC9}
  .row:not([data-qty="0"]){border-color:var(--ink)}
  .row-main{padding-left:14px}
  .row-main:hover{background:var(--light)}
  .row-ctl{padding-right:14px}
  .empty,.tg-head,.tg-sec{grid-column:1/-1}
  .tg-head,.tg-sec{padding-left:0}
  .set{border:1px solid var(--line); border-radius:16px; padding:14px}

  .sheet{position:sticky; z-index:50; top:calc(var(--top) + 8px); margin-top:-132px; max-height:calc(100vh - var(--top) - 24px);
    border-radius:20px; transform:none; visibility:visible; transition:none}
  .sheet-head{padding-top:16px}
  .grab,.sheet-head .close{display:none}
  .dock,.nudge,.scrim:not([hidden]){display:none}
  .acct{inset:0; display:grid; place-items:center; padding:20px; background:rgba(10,10,10,.42)}
  .acct[hidden]{display:none}
  .acct-card{width:100%; max-width:420px}
  .toast,body.nudging .toast{bottom:28px}
  body.nudging .shell{padding-bottom:60px}
}

/* Under 360px the title and the code field cannot share the bar; the wordmark
   already says where you are, and the code is the one that has to fit. */
@media (max-width:359px){
  .top-title{display:none}
  /* the bar keeps the words: name and reason matter more than the picture here */
  .nudge{grid-template-columns:minmax(0,1fr) auto 36px; padding-left:14px}
  .nudge .th{display:none}
  .nudge-why{white-space:normal}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important; animation-iteration-count:1!important;
    transition-duration:.01ms!important}
}

/* Present for screen readers, invisible on screen */
.sr-only{position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}