/* ============================================================
   MAGIC BOX — design system
   Premium modern food marketplace, producer authenticity, Arizona warmth.
   Mobile first. One stylesheet. No framework.
   ============================================================ */

:root{
  /* --- surfaces: warm paper, never sterile white --- */
  --bone:#FDFBF7;        /* page */
  --paper:#FFFFFF;       /* cards */
  --sand:#F6F0E6;        /* tinted band */
  --sand-2:#EFE7D9;      /* deeper band, table heads */
  --line:#E4DACA;        /* hairline */
  --line-2:#D6C8B2;      /* stronger hairline */

  /* --- ink --- */
  --ink:#1F1A15;         /* headings */
  --ink-2:#4E443A;       /* body */
  --ink-3:#6B5F50;       /* meta — AA on every surface we use */
  --ink-4:#7D7061;       /* faint — still AA on paper */

  /* --- brand --- */
  --clay:#B84F29;        /* primary action — Arizona earth */
  --clay-2:#9A3E1D;      /* hover, and the colour clay TEXT uses */
  --clay-3:#7E3116;      /* pressed */
  --clay-tint:#FBEEE8;
  --clay-line:#EEC9B8;

  --sage:#4A5D4E;        /* used sparingly, never "organic green" */
  --sage-tint:#EDF1EC;
  --sage-line:#C9D8CB;

  --sun:#D99B33;         /* seasonal / attention */
  --sun-tint:#FDF4E3;
  --sun-line:#EFDCB2;

  --plum:#6B4A5B;        /* premium accent: Magic Box Select, Raw */
  --plum-tint:#F5EEF2;
  --plum-line:#DCC7D2;

  --danger:#A3301C;
  --danger-tint:#FBEAE6;
  --danger-line:#E9C3B8;

  --info:#2C4E6B;
  --info-tint:#EDF2F7;
  --info-line:#CBDCE9;

  /* --- type --- */
  --display:"Fraunces",Georgia,"Times New Roman",serif;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --t-xs:.75rem; --t-sm:.85rem; --t-base:1rem; --t-md:1.0625rem;
  /* Display sizes scale with the viewport rather than stepping at breakpoints, so a
     headline is never cramped on a phone nor marooned on a 1920 monitor. The lower
     bound is the old fixed value, so nothing shrinks from where it was. */
  --t-lg:clamp(1.15rem, 1.05rem + .4vw, 1.3rem);
  --t-xl:clamp(1.35rem, 1.2rem + .7vw, 1.65rem);
  --t-2xl:clamp(1.6rem, 1.35rem + 1.1vw, 2.1rem);
  --t-3xl:clamp(2rem, 1.55rem + 1.9vw, 2.9rem);
  --t-4xl:clamp(2.4rem, 1.7rem + 3vw, 4rem);

  /* --- space (4px base) --- */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px;
  --s7:32px; --s8:40px; --s9:56px; --s10:72px; --s11:96px;

  /* --- shape --- */
  --r-sm:8px; --r:12px; --r-lg:18px; --r-xl:26px; --r-pill:999px;

  /* --- elevation: warm shadows, never grey --- */
  --e1:0 1px 2px rgba(31,26,21,.05);
  --e2:0 1px 3px rgba(31,26,21,.06), 0 6px 16px rgba(31,26,21,.05);
  --e3:0 2px 6px rgba(31,26,21,.07), 0 14px 34px rgba(31,26,21,.08);
  --e4:0 8px 44px rgba(31,26,21,.16);

  /* CK10 responsive scale. The content column grows on genuinely large displays
     instead of leaving the page stranded in the middle of the screen, but prose is
     held to a readable measure separately so line length never runs away. */
  --max:1180px;
  --measure:68ch;
  --gutter:clamp(16px, 3.2vw, 40px);
  --header-h:64px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--bone);color:var(--ink-2);
  font-family:var(--sans);font-size:var(--t-md);line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:var(--clay-2);text-decoration:none;transition:color .14s}
a:hover{color:var(--clay-3)}
:focus-visible{outline:2.5px solid var(--clay);outline-offset:2px;border-radius:3px}

h1,h2,h3,h4,h5{
  font-family:var(--display);color:var(--ink);
  font-weight:600;line-height:1.14;letter-spacing:-.018em;margin:0 0 .48em;
  font-variation-settings:"SOFT" 0,"WONK" 0;
}
h1{font-size:clamp(2rem,5.2vw,var(--t-4xl));letter-spacing:-.03em}
h2{font-size:clamp(1.55rem,3.6vw,var(--t-2xl));letter-spacing:-.024em}
h3{font-size:var(--t-lg)}
h4{font-size:var(--t-base);font-family:var(--sans);font-weight:650;letter-spacing:-.005em}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
strong{color:var(--ink);font-weight:650}
small,.small{font-size:var(--t-sm);line-height:1.5}
.xs{font-size:var(--t-xs)}
.muted{color:var(--ink-3)}
.faint{color:var(--ink-4)}
.lede{font-size:clamp(1.05rem,2.1vw,1.22rem);line-height:1.55;color:var(--ink-2)}
.eyebrow{font-size:var(--t-xs);font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--clay-2);margin-bottom:var(--s3)}
.serif{font-family:var(--display)}
.num{font-variant-numeric:tabular-nums}

/* ---------- layout ---------- */
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--s5)}
.narrow{max-width:680px}
.mid{max-width:880px}
.row{display:flex;gap:var(--s3);align-items:center;flex-wrap:wrap}
.row-between{display:flex;gap:var(--s4);align-items:center;justify-content:space-between;flex-wrap:wrap}
.row-top{align-items:flex-start}
.nowrap{flex-wrap:nowrap}
.grow{flex:1;min-width:0}
.center{text-align:center}
.stack>*+*{margin-top:var(--s4)}
.stack-sm>*+*{margin-top:var(--s2)}
.hide{display:none !important}
section.block{padding:var(--s10) 0}
section.block.tight{padding:var(--s8) 0}
section.tinted{background:var(--sand);border-block:1px solid var(--line)}
.divider{height:1px;background:var(--line);margin:var(--s7) 0;border:none}
.grid{display:grid;gap:var(--s4)}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.g5{grid-template-columns:repeat(5,1fr)}
@media(max-width:1000px){.g4,.g5{grid-template-columns:repeat(3,1fr)}}
@media(max-width:820px){.g3,.g4,.g5{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.g2,.g3,.g4,.g5{grid-template-columns:1fr}}
.layout{display:grid;grid-template-columns:minmax(0,1fr) 348px;gap:var(--s6);align-items:start}
@media(max-width:940px){.layout{grid-template-columns:1fr}}

/* ---------- header ---------- */
header.site{
  background:rgba(253,251,247,.92);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50;
}
header.site .bar{display:flex;align-items:center;gap:var(--s5);height:var(--header-h)}
.logo{
  font-family:var(--display);font-weight:700;font-size:1.3rem;color:var(--ink);
  letter-spacing:-.03em;display:flex;align-items:center;gap:var(--s2);flex:none;
}
.logo:hover{color:var(--ink)}
.logo .mark{
  width:30px;height:30px;border-radius:9px;flex:none;
  background:linear-gradient(145deg,var(--clay) 0%,var(--sun) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35), var(--e1);
  display:grid;place-items:center;color:#fff;font-size:15px;
}
nav.main{display:flex;gap:var(--s6);margin-left:auto;align-items:center}
nav.main a{color:var(--ink-2);font-size:.94rem;font-weight:520;white-space:nowrap}
nav.main a:hover{color:var(--clay-2)}
nav.main a.on{color:var(--clay-2);font-weight:620}
.navcta{
  background:var(--clay);color:#fff !important;padding:9px 16px;border-radius:var(--r-pill);
  font-weight:620 !important;font-size:.9rem;
}
.navcta:hover{background:var(--clay-2)}
.cartbtn{position:relative;display:inline-flex;align-items:center;gap:6px}
.cartbtn .pip{
  background:var(--clay);color:#fff;border-radius:var(--r-pill);font-size:.7rem;
  min-width:19px;height:19px;display:grid;place-items:center;padding:0 6px;font-weight:700;
}
.menu-toggle{
  display:none;margin-left:auto;background:var(--paper);border:1px solid var(--line-2);
  border-radius:var(--r-sm);padding:8px 11px;font-size:1.05rem;cursor:pointer;line-height:1;
}
@media(max-width:900px){
  nav.main{
    position:fixed;inset:var(--header-h) 0 auto 0;background:var(--paper);flex-direction:column;
    align-items:stretch;gap:0;padding:var(--s2) var(--s5) var(--s5);border-bottom:1px solid var(--line);
    box-shadow:var(--e3);display:none;margin-left:0;max-height:calc(100vh - var(--header-h));overflow:auto;
  }
  nav.main.open{display:flex}
  nav.main a{padding:14px 0;border-bottom:1px solid var(--sand);font-size:1.02rem}
  nav.main a:last-child{border-bottom:none}
  .navcta{text-align:center;margin-top:var(--s3);border-radius:var(--r-sm)}
  .menu-toggle{display:block}
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  background:var(--clay);color:#fff;border:1px solid var(--clay);
  border-radius:var(--r-sm);padding:12px 22px;
  font:inherit;font-size:.95rem;font-weight:620;letter-spacing:-.005em;
  cursor:pointer;text-align:center;white-space:nowrap;
  box-shadow:var(--e1);transition:background .15s,border-color .15s,transform .06s,box-shadow .15s;
}
.btn:hover{background:var(--clay-2);border-color:var(--clay-2);color:#fff;box-shadow:var(--e2)}
.btn:active{background:var(--clay-3);transform:translateY(1px);box-shadow:var(--e1)}
.btn[disabled],.btn.off{opacity:.45;cursor:not-allowed;box-shadow:none}
.btn[disabled]:hover,.btn.off:hover{background:var(--clay);border-color:var(--clay)}
.btn.ghost{background:var(--paper);color:var(--ink);border-color:var(--line-2)}
.btn.ghost:hover{background:var(--sand);color:var(--ink);border-color:var(--ink-4)}
.btn.dark{background:var(--ink);border-color:var(--ink)}
.btn.dark:hover{background:#332B22;border-color:#332B22}
.btn.sage{background:var(--sage);border-color:var(--sage)}
.btn.sage:hover{background:#3C4D40;border-color:#3C4D40}
.btn.danger{background:var(--paper);color:var(--danger);border-color:var(--danger-line)}
.btn.danger:hover{background:var(--danger-tint);color:var(--danger);border-color:var(--danger)}
.btn.sm{padding:8px 14px;font-size:.86rem;border-radius:var(--r-sm)}
.btn.xs{padding:5px 10px;font-size:var(--t-xs);border-radius:6px}
.btn.lg{padding:15px 30px;font-size:1.05rem}
.btn.block{width:100%}
.btn.link{
  background:none;border:none;color:var(--clay-2);padding:4px 6px;font-weight:560;
  box-shadow:none;font-size:.87rem;
}
.btn.link:hover{background:var(--clay-tint);box-shadow:none}
.btn.link.quiet{color:var(--ink-3)}
.btn.link.quiet:hover{color:var(--danger);background:var(--danger-tint)}

/* ---------- cards & panels ---------- */
.card{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--s6);box-shadow:var(--e2);
}
.card.flat{box-shadow:none}
.card.pad-sm{padding:var(--s4)}
.card.tint{background:var(--sand);box-shadow:none}
.panel{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;box-shadow:var(--e2);
}
.panel .head{
  padding:var(--s4) var(--s5);border-bottom:1px solid var(--line);background:var(--sand);
  font-weight:640;color:var(--ink);font-size:.95rem;
}
.panel .body{padding:var(--s5)}
.panel .body.flush{padding:0}
.panel .foot{padding:var(--s4) var(--s5);border-top:1px solid var(--line);background:var(--sand)}

/* ---------- forms ---------- */
label{display:block;font-weight:600;font-size:.88rem;margin-bottom:6px;color:var(--ink)}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=tel],
input[type=search],input[type=date],input[type=time],select,textarea{
  width:100%;padding:12px 14px;border:1px solid var(--line-2);border-radius:var(--r-sm);
  background:var(--paper);font:inherit;font-size:1rem;color:var(--ink);
  transition:border-color .14s,box-shadow .14s;
}
input:hover,select:hover,textarea:hover{border-color:var(--ink-4)}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--clay);box-shadow:0 0 0 3px var(--clay-tint);
}
input[aria-invalid=true],.field.bad input,.field.bad select{border-color:var(--danger);background:var(--danger-tint)}
textarea{min-height:92px;resize:vertical;line-height:1.5}
select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23857868' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center;padding-right:34px}
.field{margin-bottom:var(--s4)}
.field:last-child{margin-bottom:0}
.hint{font-size:var(--t-sm);color:var(--ink-3);margin-top:6px;line-height:1.45}
.err-text{font-size:var(--t-sm);color:var(--danger);margin-top:6px;font-weight:560}
fieldset{border:none;padding:0;margin:0}
legend{font-weight:640;color:var(--ink);margin-bottom:var(--s2);padding:0}

.choices{display:flex;gap:var(--s2);flex-wrap:wrap}
.choice{
  position:relative;border:1.5px solid var(--line-2);background:var(--paper);
  border-radius:var(--r-sm);padding:11px 16px;cursor:pointer;font-size:.93rem;
  font-weight:560;color:var(--ink-2);transition:.14s;display:inline-flex;align-items:center;gap:7px;
}
.choice:hover{border-color:var(--clay);color:var(--ink)}
.choice input{position:absolute;opacity:0;pointer-events:none}
.choice.on{background:var(--clay-tint);border-color:var(--clay);color:var(--clay-3);font-weight:640}
.choice.on::after{content:"✓";font-weight:700;font-size:.85rem}
.check{
  display:flex;gap:var(--s3);align-items:flex-start;font-weight:400;
  margin-bottom:var(--s2);cursor:pointer;color:var(--ink-2);line-height:1.45;
}
.check input{width:19px;height:19px;margin:2px 0 0;flex:none;accent-color:var(--clay);cursor:pointer}
.check:hover{color:var(--ink)}
.switchrow{
  display:flex;justify-content:space-between;align-items:center;gap:var(--s4);
  padding:var(--s3) 0;border-bottom:1px solid var(--sand-2);
}
.switchrow:last-child{border-bottom:none}

/* ---------- messages ---------- */
.msg{
  padding:var(--s4) var(--s5);border-radius:var(--r);margin-bottom:var(--s4);
  font-size:.93rem;border:1px solid;line-height:1.55;
}
.msg :last-child{margin-bottom:0}
.msg.err{background:var(--danger-tint);border-color:var(--danger-line);color:#7C2415}
.msg.ok{background:var(--sage-tint);border-color:var(--sage-line);color:#2F4536}
.msg.warn{background:var(--sun-tint);border-color:var(--sun-line);color:#7A5710}
.msg.info{background:var(--info-tint);border-color:var(--info-line);color:#26435C}
.note{
  background:var(--sun-tint);border-left:3px solid var(--sun);padding:var(--s3) var(--s4);
  border-radius:0 var(--r-sm) var(--r-sm) 0;font-size:.89rem;color:#6B4C11;line-height:1.5;
}
.note.calm{background:var(--sand);border-left-color:var(--line-2);color:var(--ink-2)}

/* ---------- badges ---------- */
.badge{
  display:inline-flex;align-items:center;gap:4px;font-size:var(--t-xs);font-weight:650;
  padding:3px 9px;border-radius:var(--r-pill);background:var(--sand-2);color:var(--ink-2);
  border:1px solid var(--line);letter-spacing:.005em;white-space:nowrap;line-height:1.5;
}
.badge.az{background:var(--sage-tint);color:#39503E;border-color:var(--sage-line)}
.badge.org{background:var(--sage-tint);color:#39503E;border-color:var(--sage-line)}
.badge.select{background:var(--plum-tint);color:#5B3D4C;border-color:var(--plum-line)}
.badge.raw{background:var(--plum-tint);color:#5B3D4C;border-color:var(--plum-line)}
.badge.sun{background:var(--sun-tint);color:#7A5710;border-color:var(--sun-line)}
.badge.clay{background:var(--clay-tint);color:var(--clay-3);border-color:var(--clay-line)}
.badge.grey{background:var(--sand-2);color:#5D5244;border-color:var(--line-2)}
.badge.blue{background:var(--info-tint);color:var(--info);border-color:var(--info-line)}
.badge.danger{background:var(--danger-tint);color:var(--danger);border-color:var(--danger-line)}
.badge.lg{font-size:var(--t-sm);padding:5px 12px}
.badges{display:flex;gap:5px;flex-wrap:wrap;align-items:center}

/* info tooltip on a badge */
.tip{position:relative;cursor:help;border-bottom:none}
.tip .tiptext{
  position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%) translateY(4px);
  background:var(--ink);color:#F3EDE4;padding:9px 12px;border-radius:var(--r-sm);
  font-size:var(--t-xs);font-weight:450;line-height:1.45;width:max-content;max-width:230px;
  opacity:0;pointer-events:none;transition:.16s;z-index:60;box-shadow:var(--e3);text-align:left;
  white-space:normal;letter-spacing:0;
}
.tip:hover .tiptext,.tip:focus-visible .tiptext{opacity:1;transform:translateX(-50%) translateY(0)}
@media(max-width:640px){.tip .tiptext{left:0;transform:none;max-width:min(230px,70vw)}
  .tip:hover .tiptext{transform:none}}

/* ---------- hero ---------- */
.hero{
  position:relative;overflow:hidden;
  background:
    radial-gradient(120% 90% at 88% 8%, rgba(217,155,51,.20) 0%, transparent 58%),
    radial-gradient(90% 70% at 4% 96%, rgba(192,86,47,.13) 0%, transparent 55%),
    linear-gradient(168deg,#FEFCF9 0%,#F8F1E5 52%,#F2E6D3 100%);
  border-bottom:1px solid var(--line);padding:var(--s10) 0 var(--s11);
}
.hero h1{margin-bottom:var(--s4);max-width:15ch}
.hero .lede{max-width:40ch}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--s9);align-items:center}
@media(max-width:940px){.hero-grid{grid-template-columns:1fr;gap:var(--s7)}.hero{padding:var(--s8) 0 var(--s9)}}
.hero-actions{display:flex;gap:var(--s3);margin-top:var(--s6);flex-wrap:wrap}
.hero-trust{display:flex;gap:var(--s5);margin-top:var(--s7);flex-wrap:wrap;font-size:var(--t-sm);color:var(--ink-3)}
.hero-trust span{display:inline-flex;align-items:center;gap:6px}

/* The illustrated hero box preview was removed from the markup in an earlier pass.
   Its .boxart-items / .boxart-item rules outlived it, and because the real content
   lists (cart, generated box, order history, next box) use those same two class
   names, every one of them was being laid out as a grid of square decorative tiles:
   display:grid with fixed 1fr columns, aspect-ratio 1, 1.7rem text and a sand tile
   background. On a phone that forced a 1556px wide cart inside a 375px viewport.
   The dead rules are deleted rather than overridden; the list rules further down
   this file are now the only definition of these classes. */

/* ---------- zip check ---------- */
.zipbox{display:flex;gap:var(--s2);max-width:430px}
.zipbox input{font-size:1.05rem;padding:14px 16px}
@media(max-width:440px){.zipbox{flex-direction:column}.zipbox .btn{width:100%}}

/* ---------- steps / numbered ---------- */
.stepnum{
  width:38px;height:38px;border-radius:var(--r-pill);flex:none;display:grid;place-items:center;
  background:var(--clay);color:#fff;font-weight:700;font-size:1rem;box-shadow:var(--e1);
}
.stepnum.quiet{background:var(--sand-2);color:var(--ink-2);box-shadow:none}
.steps{display:flex;gap:6px;margin-bottom:var(--s7);flex-wrap:wrap}
.step{
  flex:1;min-width:86px;padding:10px 12px;border-radius:var(--r-sm);background:var(--paper);
  border:1px solid var(--line);font-size:var(--t-sm);font-weight:620;color:var(--ink-4);
  text-align:center;transition:.14s;
}
.step.on{background:var(--clay);color:#fff;border-color:var(--clay);box-shadow:var(--e1)}
.step.done{background:var(--sage-tint);color:#39503E;border-color:var(--sage-line)}

/* ---------- product cards ---------- */
.prod{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--e1);
  transition:box-shadow .18s,transform .18s,border-color .18s;
}
.prod:hover{box-shadow:var(--e3);transform:translateY(-2px);border-color:var(--line-2)}
.prod .thumb{
  aspect-ratio:4/3;background:linear-gradient(150deg,var(--sand) 0%,#E9DCC6 100%);
  display:grid;place-items:center;font-size:2.6rem;position:relative;border-bottom:1px solid var(--line);
}
.prod .thumb .flag{position:absolute;top:9px;left:9px}
.prod .inner{padding:var(--s4);display:flex;flex-direction:column;gap:6px;flex:1}
.prod .nm{font-weight:640;line-height:1.3;color:var(--ink);font-size:1rem}
.prod .who{font-size:var(--t-xs);color:var(--ink-3)}
.prod .pr{font-weight:700;font-size:1.1rem;color:var(--ink);font-family:var(--display)}
.prod .un{color:var(--ink-3);font-size:var(--t-xs);font-weight:400;font-family:var(--sans)}
.prod .foot{margin-top:auto;padding-top:var(--s3);display:flex;justify-content:space-between;align-items:flex-end;gap:var(--s2)}

/* ---------- box builder line items ---------- */
.line{
  display:flex;gap:var(--s4);align-items:flex-start;padding:var(--s4) 0;
  border-bottom:1px solid var(--sand-2);
}
.line:first-child{padding-top:0}
.line:last-child{border-bottom:none;padding-bottom:0}
.line .ic{
  width:52px;height:52px;flex:none;border-radius:var(--r);background:var(--sand);
  display:grid;place-items:center;font-size:1.5rem;border:1px solid var(--line);
}
.line .mid{flex:1;min-width:0}
.line .nm{font-weight:640;color:var(--ink);line-height:1.35}
.line .who{font-size:var(--t-xs);color:var(--ink-3);margin-top:1px}
.line .why{font-size:var(--t-sm);color:var(--ink-3);margin-top:3px;font-style:italic}
.line .rt{text-align:right;flex:none}
.line .acts{display:flex;gap:var(--s2);margin-top:var(--s3);flex-wrap:wrap;align-items:center}
.qty{
  display:inline-flex;align-items:center;border:1px solid var(--line-2);
  border-radius:var(--r-sm);overflow:hidden;background:var(--paper);
}
.qty button{
  width:36px;height:36px;border:none;background:none;font-size:1.15rem;cursor:pointer;
  color:var(--ink-2);transition:background .12s;line-height:1;
}
.qty button:hover{background:var(--sand)}
.qty button:disabled{opacity:.35;cursor:not-allowed}
.qty span{min-width:34px;text-align:center;font-weight:650;font-size:.93rem;color:var(--ink)}

/* category group header inside the builder */
.catgroup{
  display:flex;align-items:center;gap:var(--s2);padding:var(--s5) 0 var(--s3);
  border-bottom:2px solid var(--line);margin-bottom:var(--s2);
}
.catgroup:first-child{padding-top:0}
.catgroup h3{margin:0;font-size:1.05rem}
.catgroup .count{margin-left:auto;font-size:var(--t-sm);color:var(--ink-3);font-weight:500}

/* swap picker */
.swapbox{
  margin-top:var(--s3);padding:var(--s4);background:var(--sand);
  border-radius:var(--r);border:1px solid var(--line);
}
.swapopt{
  display:flex;align-items:center;gap:var(--s3);width:100%;text-align:left;
  padding:10px 12px;border:1px solid var(--line-2);background:var(--paper);
  border-radius:var(--r-sm);cursor:pointer;font:inherit;font-size:.9rem;
  margin-bottom:6px;transition:.14s;
}
.swapopt:hover{border-color:var(--clay);background:var(--clay-tint)}
.swapopt:last-child{margin-bottom:0}
.swapopt .sname{font-weight:600;color:var(--ink)}
.swapopt .sdelta{margin-left:auto;font-weight:650;font-variant-numeric:tabular-nums;white-space:nowrap}
.sdelta.up{color:var(--danger)}
.sdelta.down{color:#3B6B48}
.sdelta.same{color:var(--ink-3);font-weight:500}

/* ---------- summary rail ---------- */
.rail{position:sticky;top:calc(var(--header-h) + var(--s4))}
@media(max-width:940px){.rail{position:static}}
.sumrow{display:flex;justify-content:space-between;gap:var(--s3);padding:7px 0;font-size:.94rem}
.sumrow.total{
  border-top:1.5px solid var(--line-2);margin-top:var(--s2);padding-top:var(--s4);
  font-weight:700;font-size:1.3rem;color:var(--ink);font-family:var(--display);
}
.sumrow.total span:last-child{font-variant-numeric:tabular-nums}

/* mobile sticky total bar */
.mobar{
  position:fixed;left:0;right:0;bottom:0;z-index:45;display:none;
  background:var(--paper);border-top:1px solid var(--line-2);
  padding:var(--s3) var(--s5) calc(var(--s3) + env(safe-area-inset-bottom));
  box-shadow:0 -4px 24px rgba(31,26,21,.12);
  align-items:center;gap:var(--s4);
}
.mobar .lbl{font-size:var(--t-xs);color:var(--ink-3);text-transform:uppercase;letter-spacing:.07em;font-weight:650}
.mobar .amt{font-family:var(--display);font-size:1.35rem;font-weight:700;color:var(--ink);line-height:1.1}
.mobar .btn{margin-left:auto}
@media(max-width:940px){
  .mobar.show{display:flex}
  body.has-mobar{padding-bottom:86px}
}

/* ---------- tables ---------- */
.tw{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--paper);
  -webkit-overflow-scrolling:touch}
.tw.flush{border:none;border-radius:0}
table{border-collapse:collapse;width:100%;font-size:.9rem}
th,td{padding:11px 14px;text-align:left;border-bottom:1px solid var(--sand-2);vertical-align:top}
th{
  background:var(--sand);font-weight:640;font-size:var(--t-xs);text-transform:uppercase;
  letter-spacing:.05em;color:var(--ink-2);white-space:nowrap;
}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover{background:#FDFAF5}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
td.tight,th.tight{padding:7px 10px}

/* ---------- filter / pill navigation ---------- */
.pill-nav{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:var(--s5)}
.pill-nav a,.pill-nav button{
  padding:8px 15px;border-radius:var(--r-pill);background:var(--paper);border:1px solid var(--line-2);
  font-size:.88rem;color:var(--ink-2);font-weight:560;cursor:pointer;font-family:inherit;
  transition:.14s;white-space:nowrap;
}
.pill-nav a.on,.pill-nav button.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.pill-nav a:hover,.pill-nav button:hover{border-color:var(--clay);color:var(--clay-2)}
.pill-nav a.on:hover,.pill-nav button.on:hover{color:#fff;border-color:var(--ink)}
.filterbar{
  display:flex;gap:var(--s3);align-items:center;flex-wrap:wrap;
  padding:var(--s4);background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r-lg);margin-bottom:var(--s5);box-shadow:var(--e1);
}
.filterbar .searchwrap{position:relative;flex:1;min-width:220px}
.filterbar .searchwrap input{padding-left:38px}
.filterbar .searchwrap::before{
  content:"⌕";position:absolute;left:14px;top:50%;transform:translateY(-52%);
  color:var(--ink-3);font-size:1.15rem;pointer-events:none;
}

/* ---------- empty / loading ---------- */
.empty{text-align:center;padding:var(--s10) var(--s5);color:var(--ink-3)}
.empty .em{font-size:3rem;margin-bottom:var(--s3);opacity:.85}
.empty h3{margin-bottom:var(--s2)}
.empty p{max-width:38em;margin:0 auto var(--s5)}
.spinner{
  width:16px;height:16px;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;
  border-radius:50%;animation:spin .7s linear infinite;display:inline-block;
}
.btn.ghost .spinner{border-color:rgba(31,26,21,.2);border-top-color:var(--ink)}
@keyframes spin{to{transform:rotate(360deg)}}
.skeleton{background:linear-gradient(90deg,var(--sand) 25%,var(--sand-2) 50%,var(--sand) 75%);
  background-size:200% 100%;animation:sk 1.3s ease-in-out infinite;border-radius:var(--r-sm)}
@keyframes sk{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ---------- footer ---------- */
footer.site{
  background:var(--ink);color:#BFB3A3;margin-top:var(--s11);
  padding:var(--s9) 0 var(--s7);font-size:.92rem;
}
footer.site a{color:#E8DFD1}
footer.site a:hover{color:#fff}
footer.site h4{color:#fff;font-size:.9rem;margin-bottom:var(--s3);letter-spacing:.02em}
footer.site .flinks{line-height:2.1}
footer.site .fbot{
  border-top:1px solid #362E25;margin-top:var(--s7);padding-top:var(--s5);
  display:flex;justify-content:space-between;gap:var(--s4);flex-wrap:wrap;font-size:var(--t-sm);opacity:.8;
}

/* ---------- toast ---------- */
#toast{
  position:fixed;left:50%;bottom:24px;transform:translate(-50%,150%);
  background:var(--ink);color:#fff;padding:13px 22px;border-radius:var(--r-pill);
  font-size:.92rem;font-weight:520;z-index:100;max-width:92vw;text-align:center;
  transition:transform .3s cubic-bezier(.2,.85,.3,1);box-shadow:var(--e4);
}
#toast.on{transform:translate(-50%,0)}
@media(max-width:940px){#toast{bottom:96px}}

/* ---------- key/value ---------- */
.kv{display:grid;grid-template-columns:auto 1fr;gap:7px var(--s4);font-size:.92rem;margin:0}
.kv dt{color:var(--ink-3)}
.kv dd{margin:0;font-weight:560;color:var(--ink)}

/* ---------- misc ---------- */
.hr-label{display:flex;align-items:center;gap:var(--s4);margin:var(--s6) 0;color:var(--ink-4);font-size:var(--t-sm)}
.hr-label::before,.hr-label::after{content:"";flex:1;height:1px;background:var(--line)}
.pricetag{font-family:var(--display);font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skiplink{position:absolute;left:-9999px;top:0;background:var(--clay);color:#fff;padding:10px 16px;z-index:200;border-radius:0 0 var(--r-sm) 0}
.skiplink:focus{left:0;color:#fff}

/* ============================================================
   ADMIN — same system, denser. Operational, not decorative.
   ============================================================ */
body.admin{background:#F7F4EE;font-size:1rem}
body.admin .wrap{max-width:1340px}
body.admin h1{font-size:clamp(1.6rem,3.4vw,2.1rem)}
body.admin section.block{padding:var(--s6) 0 var(--s9)}
body.admin .card{padding:var(--s5);border-radius:var(--r)}
body.admin .panel{border-radius:var(--r)}
body.admin table{font-size:.87rem}
body.admin th,body.admin td{padding:9px 12px}
.admin-logo-tag{
  font-size:var(--t-xs);background:var(--ink);color:#fff;padding:2px 8px;
  border-radius:var(--r-pill);font-family:var(--sans);font-weight:600;letter-spacing:.03em;
}
/* the "what needs me now" stack */
.attention{display:grid;gap:var(--s3);margin-bottom:var(--s6)}
.att{
  display:flex;gap:var(--s4);align-items:center;padding:var(--s4) var(--s5);
  background:var(--paper);border:1px solid var(--line);border-left:4px solid var(--line-2);
  border-radius:var(--r);box-shadow:var(--e1);
}
.att.urgent{border-left-color:var(--danger);background:var(--danger-tint)}
.att.warn{border-left-color:var(--sun);background:var(--sun-tint)}
.att.go{border-left-color:var(--sage);background:var(--sage-tint)}
.att .icn{font-size:1.5rem;flex:none;line-height:1}
.att .txt{flex:1;min-width:0}
.att .txt strong{display:block;color:var(--ink)}
.att .txt span{font-size:var(--t-sm);color:var(--ink-2)}
.att .btn{flex:none}
@media(max-width:600px){.att{flex-wrap:wrap}.att .btn{width:100%}}

/* stat tiles */
.stat{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:var(--s4) var(--s5)}
.stat .lbl{font-size:var(--t-xs);color:var(--ink-3);text-transform:uppercase;letter-spacing:.06em;font-weight:650}
.stat .val{font-family:var(--display);font-size:1.75rem;font-weight:700;color:var(--ink);line-height:1.15;margin:2px 0}
.stat .sub{font-size:var(--t-sm);color:var(--ink-3)}

/* the operating pipeline */
.pipe{display:flex;gap:6px;overflow-x:auto;padding-bottom:var(--s2);margin-bottom:var(--s5)}
.pipe .pstep{
  flex:1;min-width:112px;padding:11px 13px;border-radius:var(--r-sm);background:var(--paper);
  border:1px solid var(--line);font-size:var(--t-sm);text-align:center;position:relative;
}
.pipe .pstep .n{font-size:var(--t-xs);color:var(--ink-4);font-weight:700;display:block}
.pipe .pstep .t{font-weight:620;color:var(--ink-2);display:block;margin-top:1px}
.pipe .pstep.done{background:var(--sage-tint);border-color:var(--sage-line)}
.pipe .pstep.done .t{color:#39503E}
.pipe .pstep.now{background:var(--clay);border-color:var(--clay);box-shadow:var(--e2)}
.pipe .pstep.now .t,.pipe .pstep.now .n{color:#fff}

/* supplier call card */
.callcard{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--e1);margin-bottom:var(--s4);overflow:hidden}
.callcard .ch{
  padding:var(--s4) var(--s5);border-bottom:1px solid var(--line);
  display:flex;gap:var(--s3);align-items:center;flex-wrap:wrap;background:var(--sand);
}
.callcard .cb{padding:var(--s5)}
.knowneed{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4)}
@media(max-width:760px){.knowneed{grid-template-columns:1fr}}
.klist{margin:0;padding:0;list-style:none;font-size:.88rem}
.klist li{padding:5px 0 5px 20px;position:relative;line-height:1.45}
.klist.know li::before{content:"✓";position:absolute;left:0;color:#3B6B48;font-weight:700}
.klist.need li::before{content:"?";position:absolute;left:0;color:var(--clay);font-weight:700}

/* ============================================================
   PRINT — buy lists, pack sheets, contents cards, manifests
   ============================================================ */
@media print{
  @page{margin:12mm}
  header.site,footer.site,.mobar,#toast,.noprint,nav.main,.menu-toggle,.pill-nav{display:none !important}
  body{background:#fff;color:#000;font-size:11pt}
  .card,.panel,.tw{box-shadow:none !important;border-color:#999 !important;break-inside:avoid}
  a{color:#000;text-decoration:none}
  table{font-size:9.5pt}
  th{background:#EEE !important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  thead{display:table-header-group}
  tr{break-inside:avoid}
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  section.block{padding:0}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important}
  .prod:hover{transform:none}
}

/* ============================================================
   TOUCH TARGETS
   Small controls stay visually small but keep a finger-sized hit area.
   ============================================================ */
.btn.sm, .btn.xs, .pill-nav a, .pill-nav button, .choice{
  min-height:38px;display:inline-flex;align-items:center;justify-content:center;
}
/* the hamburger keeps its own display rule — it must stay hidden on desktop */
.menu-toggle{min-height:38px}
.btn.link{min-height:36px}
@media (pointer:coarse){
  .btn.sm,.pill-nav a,.pill-nav button,.choice,.menu-toggle{min-height:44px;padding-inline:16px}
  .btn.xs{min-height:38px}
  .qty button{width:42px;height:42px}
  .check input{width:22px;height:22px}
  .swapopt{padding:14px 14px}
  nav.main a{padding:16px 0}
}
/* keep table-embedded controls compact — they are mouse-driven in the Organizer */
body.admin table .btn.sm,body.admin table .btn.xs{min-height:32px}
@media (pointer:coarse){
  body.admin table .btn.sm{min-height:40px}
}

/* ============================================================
   MAGIC BOX — WordPress customer shell
   Additions for the WordPress build. Everything above is the
   established Magic Box design system, unchanged.
   ============================================================ */

body{background:var(--bone);color:var(--ink-2);font-family:var(--sans);
  font-size:var(--t-base);line-height:1.6;margin:0;-webkit-text-size-adjust:100%;}
h1,h2,h3{font-family:var(--display);color:var(--ink);line-height:1.15;font-weight:600;}
h1{font-size:var(--t-3xl);} h2{font-size:var(--t-xl);} h3{font-size:var(--t-lg);}
a{color:var(--clay-2);}
img{max-width:100%;height:auto;}
*:focus-visible{outline:3px solid var(--clay);outline-offset:2px;}

/* ---- header ---- */
.mb-header{position:sticky;top:0;z-index:50;background:var(--paper);border-bottom:1px solid var(--line);}
.mb-header-in{max-width:var(--max);margin:0 auto;padding:0 var(--s4);min-height:var(--header-h);
  display:flex;align-items:center;gap:var(--s4);position:relative;}
.logo{display:inline-flex;align-items:center;gap:var(--s2);text-decoration:none;color:var(--ink);font-weight:700;}
.logo-mark{font-size:1.35rem;line-height:1;}
.logo-word{font-family:var(--display);font-size:1.15rem;letter-spacing:.01em;}
.logo--footer{margin-bottom:var(--s2);}
.mb-nav{margin-left:auto;display:flex;align-items:center;gap:var(--s5);}
.mb-nav a{color:var(--ink-2);text-decoration:none;font-size:var(--t-sm);font-weight:500;padding:var(--s2) 0;}
.mb-nav a:hover{color:var(--clay-2);}
.mb-nav a[aria-current="page"]{color:var(--clay-2);box-shadow:inset 0 -2px 0 var(--clay);}
.mb-nav-end{display:flex;align-items:center;gap:var(--s3);margin-left:var(--s3);}
.navcta{white-space:nowrap;}
.cartbtn{position:relative;font-size:1.15rem;text-decoration:none;padding:var(--s2);}
.cartbtn-n{position:absolute;top:-3px;right:-8px;background:var(--clay);color:#fff;border-radius:var(--r-pill);
  font-size:12px;line-height:1;font-weight:700;min-width:20px;height:20px;display:grid;place-items:center;padding:0 5px;
  font-variant-numeric:tabular-nums;}
.menu-toggle{display:none;margin-left:auto;background:none;border:1px solid var(--line-2);border-radius:var(--r-sm);
  font-size:1.1rem;width:44px;height:44px;cursor:pointer;color:var(--ink);}

@media (max-width:1080px){
  .menu-toggle{display:block;}
  .mb-nav{position:absolute;top:100%;left:0;right:0;background:var(--paper);border-bottom:1px solid var(--line);
    flex-direction:column;align-items:stretch;gap:0;padding:var(--s2) var(--s4) var(--s4);margin-left:0;display:none;
    box-shadow:var(--e2);}
  .mb-nav.is-open{display:flex;}
  .mb-nav a{padding:var(--s3) 0;border-bottom:1px solid var(--line);font-size:var(--t-md);}
  .mb-nav-end{margin:var(--s3) 0 0;justify-content:space-between;}
}

/* ---- layout ---- */
.wrap{max-width:var(--max);margin:0 auto;padding:var(--s7) var(--s4) var(--s10);}
.wrap.wide{max-width:1360px;}
.pagehead{margin-bottom:var(--s6);}
.pagehead h1{margin:0 0 var(--s2);}
.split{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:var(--s7);align-items:start;}
.sticky{position:sticky;top:calc(var(--header-h) + var(--s4));}
@media (max-width:900px){ .split{grid-template-columns:1fr;} .sticky{position:static;} }
.band{background:var(--sand);margin:var(--s9) calc(-1 * var(--s4));padding:var(--s8) var(--s4);border-block:1px solid var(--line);}
.prose{max-width:68ch;}
.prose h2{margin-top:var(--s7);}
.narrow{max-width:26rem;margin:0 auto;}
section{margin-block:var(--s8);}

/* ---- hero ---- */
.hero{padding-block:var(--s6) var(--s4);}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:var(--s8);align-items:center;}
.hero h1{font-size:clamp(2rem,5vw,var(--t-4xl));line-height:1.06;margin:var(--s3) 0;}
.hero h1 em{font-style:italic;color:var(--clay-2);}
.hero-actions{display:flex;flex-wrap:wrap;gap:var(--s3);margin:var(--s5) 0;}
.hero-trust{list-style:none;padding:0;margin:var(--s5) 0 0;display:flex;flex-wrap:wrap;gap:var(--s4);
  font-size:var(--t-sm);color:var(--ink-3);}
.hero-trust li::before{content:"\2713";color:var(--sage);font-weight:700;margin-right:6px;}
@media (max-width:860px){ .hero-grid{grid-template-columns:1fr;gap:var(--s6);} }

/* ---- steps ---- */
.steps{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s5);}
.steps .step{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:var(--s5);}
.stepnum{display:grid;place-items:center;width:30px;height:30px;border-radius:var(--r-pill);
  background:var(--clay);color:#fff;font-weight:700;font-size:var(--t-sm);margin-bottom:var(--s3);}
.steps h3{margin:0 0 var(--s2);font-size:var(--t-md);}
.steps p{margin:0;font-size:var(--t-sm);color:var(--ink-3);}
@media (max-width:860px){ .steps{grid-template-columns:1fr 1fr;} }
@media (max-width:520px){ .steps{grid-template-columns:1fr;} }

/* ---- grids and cards ---- */
.grid{display:grid;gap:var(--s5);}
.g2{grid-template-columns:repeat(2,minmax(0,1fr));}
.g3{grid-template-columns:repeat(3,minmax(0,1fr));}
.g4{grid-template-columns:repeat(4,minmax(0,1fr));}
@media (max-width:900px){ .g3,.g4{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:600px){ .g2,.g3,.g4{grid-template-columns:1fr;} }
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:var(--s5);}
.card h2,.card h3{margin-top:0;}
.choice.card{display:flex;flex-direction:column;gap:var(--s3);}
.choice.card .btn{margin-top:auto;}

/* ---- product and producer cards ---- */
.prod{display:flex;flex-direction:column;gap:var(--s3);}
.prod-body{flex:1;}
.prod-name{margin:0 0 var(--s1);font-size:var(--t-md);}
.prod-name a{text-decoration:none;color:var(--ink);}
.prod-name a:hover{color:var(--clay-2);}
.prod-producer{margin:0 0 var(--s2);font-size:var(--t-sm);}
.prod-producer a{color:var(--ink-3);}
.prod-foot{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;border-top:1px solid var(--line);padding-top:var(--s3);}
.pricetag{font-weight:700;color:var(--ink);}
.pricetag--lg{font-size:var(--t-2xl);display:block;margin-bottom:var(--s3);}
.producer-card{text-decoration:none;color:inherit;display:block;}
.producer-card h2,.producer-card h3{margin:0 0 var(--s1);font-size:var(--t-md);}
.producer-card:hover{border-color:var(--clay-line);}
.producer-inline{margin-block:var(--s5);}
.why{display:block;font-size:var(--t-xs);color:var(--sage);margin-top:2px;}
.prefrow{margin-top:var(--s4);border-top:1px solid var(--line);padding-top:var(--s3);}
.prefrow .btn{margin-right:4px;margin-bottom:4px;}

/* ---- badges and chips ---- */
.badges{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 var(--s2);}
.badge{display:inline-block;background:var(--sage-tint);color:var(--sage);border:1px solid var(--sage-line);
  border-radius:var(--r-pill);padding:1px 9px;font-size:var(--t-xs);font-weight:600;}
.badge--plum{background:var(--plum-tint);color:var(--plum);border-color:var(--plum-line);}
.badge--sun{background:var(--sun-tint);color:#8a5f12;border-color:var(--sun-line);}
.badge--danger{background:var(--danger-tint);color:var(--danger);border-color:var(--danger-line);}
.badge--sage{background:var(--sage-tint);color:var(--sage);border-color:var(--sage-line);}
.chips{display:flex;flex-wrap:wrap;gap:var(--s2);}
.chip{background:var(--paper);border:1px solid var(--line-2);border-radius:var(--r-pill);
  padding:8px 15px;font-size:var(--t-sm);text-decoration:none;color:var(--ink-2);min-height:40px;
  display:inline-flex;align-items:center;}
.chip:hover{border-color:var(--clay);color:var(--clay-2);}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  background:var(--paper);border:1px solid var(--line-2);color:var(--ink);border-radius:var(--r-sm);
  padding:10px 16px;font:inherit;font-size:var(--t-sm);font-weight:600;cursor:pointer;text-decoration:none;
  min-height:44px;transition:background .12s,border-color .12s,color .12s;}
.btn:hover{border-color:var(--clay);color:var(--clay-2);}
.btn--primary{background:var(--clay);border-color:var(--clay);color:#fff;}
.btn--primary:hover{background:var(--clay-2);border-color:var(--clay-2);color:#fff;}
.btn--ghost{background:transparent;}
.btn--lg{padding:14px 24px;font-size:var(--t-md);min-height:52px;}
.btn--sm{padding:6px 12px;font-size:var(--t-xs);min-height:38px;}
.btn--block{display:flex;width:100%;}
.btn[disabled]{opacity:.55;cursor:not-allowed;}
.btn[disabled]:hover{border-color:var(--line-2);color:var(--ink);}
form.inline{display:inline;}

/* ---- forms ---- */
.field{margin-bottom:var(--s4);}
.field label{display:block;font-weight:600;font-size:var(--t-sm);margin-bottom:6px;color:var(--ink-2);}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=search],select,textarea{
  width:100%;padding:11px 12px;border:1px solid var(--line-2);border-radius:var(--r-sm);
  font:inherit;font-size:var(--t-base);background:var(--paper);color:var(--ink);min-height:46px;}
input:focus,select:focus,textarea:focus{outline:3px solid var(--clay);outline-offset:1px;border-color:var(--clay);}
.hint{font-size:var(--t-xs);color:var(--ink-3);margin:6px 0 0;}
.row-end{display:flex;gap:var(--s3);align-items:flex-end;flex-wrap:wrap;}
.row-end .field{margin-bottom:0;}
.grow{flex:1;min-width:0;}
.filterbar{display:flex;gap:var(--s3);flex-wrap:wrap;align-items:center;margin-bottom:var(--s4);}
.filterbar input[type=search]{max-width:20rem;}
.filterbar select{max-width:14rem;}
.choices{display:flex;flex-wrap:wrap;gap:var(--s2);}
.choice{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line-2);border-radius:var(--r-pill);
  padding:7px 13px;font-size:var(--t-sm);cursor:pointer;background:var(--paper);min-height:40px;}
.choice input{width:auto;min-height:0;}
.choice:has(input:checked){border-color:var(--clay);background:var(--clay-tint);color:var(--clay-2);font-weight:600;}
.choice:focus-within{outline:3px solid var(--clay);outline-offset:2px;}
.switchrow{display:flex;flex-direction:column;gap:var(--s3);}
.switchrow h3{font-size:var(--t-md);margin:0;}

/* ---- zip ---- */
.zipbox{background:var(--paper);border:1px solid var(--line-2);border-radius:var(--r-lg);padding:var(--s5);box-shadow:var(--e2);}
.zipform-row{display:flex;gap:var(--s2);}
.zipform-row input{flex:1;}
.zipmini{margin-top:var(--s3);}
.zipmini .zipbox{box-shadow:none;padding:var(--s3);}

/* ---- messages ---- */
.msg{border-radius:var(--r-sm);padding:var(--s3) var(--s4);margin:var(--s4) 0;font-size:var(--t-sm);
  border:1px solid var(--line-2);background:var(--paper);}
.msg--ok{background:var(--sage-tint);border-color:var(--sage-line);color:var(--sage);}
.msg--warn{background:var(--sun-tint);border-color:var(--sun-line);color:#7d5610;}
.msg--err{background:var(--danger-tint);border-color:var(--danger-line);color:var(--danger);}
.msg--info{background:var(--info-tint);border-color:var(--info-line);color:var(--info);}
.msg ul{margin:0;padding-left:18px;}

/* ---- lists ---- */
.kv{list-style:none;padding:0;margin:0 0 var(--s3);}
.kv li{display:flex;justify-content:space-between;gap:var(--s3);padding:5px 0;border-bottom:1px solid var(--line);font-size:var(--t-sm);}
.kv li:last-child{border-bottom:0;}
.kv span{color:var(--ink-3);}
.klist{list-style:none;padding:0;margin:0;}
.klist li{display:flex;justify-content:space-between;align-items:center;gap:var(--s3);
  padding:var(--s3) 0;border-bottom:1px solid var(--line);flex-wrap:wrap;}
.klist li:last-child{border-bottom:0;}
.boxart-items{list-style:none;padding:0;margin:0;}
.boxart-item{display:flex;align-items:flex-start;gap:var(--s3);padding:var(--s3) 0;border-bottom:1px solid var(--line);}
.boxart-item .qty{color:var(--ink-3);font-variant-numeric:tabular-nums;min-width:2.4em;font-size:var(--t-sm);}
.boxart-item .num{font-variant-numeric:tabular-nums;font-weight:600;margin-left:auto;white-space:nowrap;}
.boxart-item--edit{flex-wrap:wrap;}
.qtyform{display:flex;gap:6px;align-items:center;}
.qtyinput{width:5.5rem;}
.catgroup{margin-block:var(--s6);}
.catgroup h2{font-size:var(--t-lg);padding-bottom:var(--s2);border-bottom:2px solid var(--line-2);}
.swapbox{padding:0 0 var(--s3);border-bottom:1px solid var(--line);list-style:none;}
.swapbox summary{cursor:pointer;font-size:var(--t-xs);color:var(--ink-3);padding:var(--s2) 0;min-height:38px;
  display:flex;align-items:center;}
.swapopts{display:flex;flex-wrap:wrap;gap:var(--s2);padding-bottom:var(--s2);}

/* ---- summary ---- */
.summary .sumrow{display:flex;justify-content:space-between;gap:var(--s3);padding:7px 0;
  border-bottom:1px solid var(--line);font-size:var(--t-sm);}
.summary .sumrow--total{border-bottom:0;border-top:2px solid var(--line-2);margin-top:var(--s2);
  padding-top:var(--s3);font-size:var(--t-md);}
.summary .btn{margin-top:var(--s3);}

/* ---- rails, pills, tables ---- */
.rail{list-style:none;display:flex;gap:var(--s2);padding:0;margin:0 0 var(--s6);flex-wrap:wrap;}
.rail-i{font-size:var(--t-sm);}
.rail-i a,.rail-i span{display:inline-flex;align-items:center;min-height:40px;padding:6px 14px;
  border-radius:var(--r-pill);border:1px solid var(--line-2);text-decoration:none;color:var(--ink-3);background:var(--paper);}
.rail-i--now a{background:var(--clay);border-color:var(--clay);color:#fff;font-weight:600;}
.rail-i--done a{border-color:var(--sage-line);color:var(--sage);background:var(--sage-tint);}
.pill-nav{display:flex;flex-wrap:wrap;gap:var(--s2);margin-bottom:var(--s6);}
.pill-nav a{padding:8px 16px;border-radius:var(--r-pill);border:1px solid var(--line-2);
  text-decoration:none;color:var(--ink-2);font-size:var(--t-sm);background:var(--paper);min-height:42px;
  display:inline-flex;align-items:center;}
.pill-nav a.is-on{background:var(--ink);border-color:var(--ink);color:var(--bone);font-weight:600;}
.tw{width:100%;border-collapse:collapse;font-size:var(--t-sm);}
.tw th,.tw td{text-align:left;padding:var(--s3);border-bottom:1px solid var(--line);}
.tw th{color:var(--ink-3);font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.04em;}
.tw .num{text-align:right;font-variant-numeric:tabular-nums;}
.att{border-color:var(--sun-line);background:var(--sun-tint);}
.allergy-card{border-color:var(--danger-line);}
.allergy-card h2{color:var(--danger);}

/* ---- faq ---- */
.faq{max-width:68ch;}
.faq-item{border-bottom:1px solid var(--line);}
.faq-item summary{cursor:pointer;padding:var(--s4) 0;font-weight:600;font-size:var(--t-md);
  list-style:none;display:flex;justify-content:space-between;gap:var(--s3);min-height:48px;align-items:center;}
.faq-item summary::after{content:"+";color:var(--clay);font-size:1.3rem;}
.faq-item[open] summary::after{content:"\2212";}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-a{padding-bottom:var(--s4);color:var(--ink-2);}

/* ---- empty and cta ---- */
.empty{text-align:center;padding:var(--s9) var(--s4);border:1px dashed var(--line-2);
  border-radius:var(--r-lg);background:var(--paper);}
.empty h3{margin-top:0;}
.cta-final{text-align:center;padding:var(--s9) var(--s4);}
.center{text-align:center;}

/* ---- footer ---- */
.mb-footer{background:var(--ink);color:var(--sand);margin-top:var(--s10);padding:var(--s9) var(--s4) var(--s5);}
.mb-footer-in{max-width:var(--max);margin:0 auto;display:grid;
  grid-template-columns:1.4fr repeat(4,1fr);gap:var(--s6);}
.mb-footer h3{color:#fff;font-size:var(--t-sm);text-transform:uppercase;letter-spacing:.06em;margin:0 0 var(--s3);}
.mb-footer a{display:block;color:var(--sand);opacity:.82;text-decoration:none;padding:6px 0;font-size:var(--t-sm);}
.mb-footer a:hover{opacity:1;color:#fff;}
.mb-footer .logo{color:#fff;}
.mb-footer .faint{color:var(--sand);opacity:.62;font-size:var(--t-sm);}
.mb-footer-base{max-width:var(--max);margin:var(--s7) auto 0;padding-top:var(--s4);
  border-top:1px solid rgba(255,255,255,.14);}
.mb-footer-base a{display:inline;}
@media (max-width:900px){ .mb-footer-in{grid-template-columns:1fr 1fr;} }
@media (max-width:560px){ .mb-footer-in{grid-template-columns:1fr;gap:var(--s5);} }

/* ---- utility ---- */
.faint{color:var(--ink-3);}
.xs{font-size:var(--t-xs);}
.lede{font-size:var(--t-md);color:var(--ink-2);max-width:60ch;}
.eyebrow{font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.09em;color:var(--clay-2);font-weight:700;margin:0;}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;}
.skiplink{position:absolute;left:-9999px;}
.skiplink:focus{left:var(--s4);top:var(--s2);z-index:100;background:var(--paper);
  padding:var(--s3) var(--s4);border:2px solid var(--clay);border-radius:var(--r-sm);}

/* ---- tap targets ----------------------------------------------------------
   Card titles and producer links are the primary way into a product on a phone,
   so they get real vertical room rather than the 25px an inline text link gets
   by default. Measured at 375px, 430px and 768px. */
.prod-name a,
.boxart h2 a,
.boxart h3 a,
.producer-card h2 a,
.producer-card h3 a,
.boxart-item .grow > a,
.klist a{display:inline-block;padding-block:5px;}
.prod-producer a{display:inline-block;padding-block:4px;}
.logo{padding-block:6px;}
.mb-footer a{padding:8px 0;}
.faq-item summary{min-height:52px;}

/* ---- capacity meter (fill-your-own box) ---- */
.capbar{position:sticky;top:calc(var(--header-h) + 4px);z-index:20;background:var(--paper);
  border:1px solid var(--line-2);border-radius:var(--r);padding:var(--s4);margin-bottom:var(--s5);
  box-shadow:var(--e2);}
.capbar-track{height:10px;border-radius:var(--r-pill);background:var(--sand-2);overflow:hidden;}
.capbar-fill{height:100%;background:var(--sage);transition:width .2s ease;}
.capbar--warn .capbar-fill{background:var(--sun);}
.capbar--over .capbar-fill,.capbar--full .capbar-fill{background:var(--clay);}
.capbar-text{margin:var(--s2) 0 0;font-size:var(--t-sm);color:var(--ink-3);}
.capbar-text strong{color:var(--ink);}
.capbar .msg{margin-bottom:0;}
.capbar p.xs{margin:var(--s2) 0 0;}
.prod--in{border-color:var(--sage-line);background:var(--sage-tint);}
.choice.is-chosen{border-color:var(--clay);box-shadow:0 0 0 2px var(--clay-tint);}


/* ---- order help: reporting a problem with a delivered box ---- */
.order-help{margin-top:var(--s3);padding-top:var(--s3);border-top:1px solid var(--line);}
.order-help summary{cursor:pointer;font-weight:600;min-height:44px;display:flex;align-items:center;gap:var(--s2);}
.order-help .why{display:block;}
.issue-form{margin-top:var(--s3);display:grid;gap:var(--s3);}
.issue-kinds{display:grid;gap:var(--s2);}
.issue-kind{display:flex;gap:var(--s2);align-items:flex-start;padding:var(--s2);border:1px solid var(--line);
  border-radius:var(--r-sm);cursor:pointer;min-height:44px;}
.issue-kind:hover{background:var(--sand);}
.issue-kind input{margin-top:3px;}
.issue-kind .k-label{font-weight:600;}
.issue-kind .k-hint{display:block;font-size:var(--t-xs);color:var(--ink-3);}
.issue-list{list-style:none;padding:0;margin:var(--s3) 0 0;}
.issue-list li{padding:var(--s2) 0;border-bottom:1px solid var(--line);font-size:var(--t-sm);}
.issue-list li:last-child{border-bottom:0;}
.issue-closed{color:var(--ink-3);font-size:var(--t-sm);}

.policy-gate{line-height:1.7;max-width:44ch;margin-inline:auto;}
.policy-gate a{text-decoration:underline;}
.msg--warn{background:#fdf6e3;border-left:4px solid var(--clay);padding:var(--s3);}


/* ============================================================================
   CK10 responsive scale
   ----------------------------------------------------------------------------
   Three things only, all at token level, so every page inherits them without a
   single markup change:

   1. The content column widens in two deliberate steps on large displays. It is
      not "stretch to fill" — 1360px at 1920 keeps the design intentional while
      removing the marooned-in-the-middle look.
   2. Prose keeps its own max-width. A wide container must not become a wide
      paragraph; ~68 characters is where reading comfort sits.
   3. Section padding and page gutters become fluid, so vertical rhythm grows
      with the screen instead of stepping.
   ========================================================================== */

@media (min-width:1440px){ :root{ --max:1280px; } }
@media (min-width:1728px){ :root{ --max:1360px; } }

.wrap{ padding-inline:var(--gutter); }
.mb-header-in,.mb-footer-in{ padding-inline:var(--gutter); }

/* Vertical rhythm that breathes on a big screen without ballooning on a phone. */
section.block{ padding-block:clamp(40px, 5.5vw, 96px); }
section.block.tight{ padding-block:clamp(28px, 3.5vw, 56px); }

/* Long-form text keeps a readable measure inside a wide container. Applies to
   policy pages, FAQ answers and any .prose block. */
.prose > p,.prose > ul,.prose > ol,.prose > h2,.prose > h3{ max-width:var(--measure); }
.lede{ max-width:min(48ch, 100%); }

/* The hero headline was capped at 15ch, which reads as a stack of short lines on
   a wide screen. Give it room proportional to the space available. */
@media (min-width:1100px){
  .hero h1{ max-width:18ch; }
  .hero .lede{ max-width:42ch; }
}

/* Full-bleed bands: background spans the viewport, content stays in the column.
   Uses the section's own background rather than negative margins, so it cannot
   introduce horizontal overflow at any width. */
.bleed{ background:var(--sand); border-block:1px solid var(--line); }
.bleed > .wrap{ padding-block:clamp(36px, 4.5vw, 80px); }
.bleed--paper{ background:var(--paper); }
.bleed--ink{ background:var(--ink); color:var(--sand); border-block-color:rgba(255,255,255,.08); }
.bleed--ink h2,.bleed--ink h3{ color:#fff; }

/* Cards sit on a fluid grid that never drops to a single cramped column too
   early, and never leaves one orphan card stretched across a wide row. */
.autogrid{ display:grid; gap:clamp(12px, 1.6vw, 24px);
  grid-template-columns:repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }
.autogrid--wide{ grid-template-columns:repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }

/* Nothing may exceed the viewport, whatever a future template does. */
html,body{ overflow-x:clip; }
img,svg,video,table,pre{ max-width:100%; }


/* ============================================================================
   CK10 touch targets and small print
   ----------------------------------------------------------------------------
   Measured at 375 and 430: six box-title links rendered 31px tall. That clears
   nothing — 44px is the size a thumb actually hits. Raised on narrow viewports
   and on any coarse pointer, without changing how they look on a desktop.
   ========================================================================== */

@media (max-width:900px){
  .prod-name a,
  .boxart h2 a, .boxart h3 a,
  .producer-card h2 a, .producer-card h3 a,
  .card h2 a, .card h3 a,
  .klist a{
    display:inline-flex; align-items:center; min-height:44px; padding-block:6px;
  }
}
@media (pointer:coarse){
  .prod-name a,
  .card h2 a, .card h3 a,
  .klist a{ min-height:44px; display:inline-flex; align-items:center; }
}

/* The footer legal line ran to ~200 characters on a wide screen. Small print is
   still print: hold it to a readable measure and centre it in the column. */
.mb-footer-base p{ max-width:82ch; margin-inline:auto; }


/* ---- checkout consent ---- */
.consent{display:flex;gap:var(--s3);align-items:flex-start;padding:var(--s4);margin-bottom:var(--s4);
  background:var(--sand);border:1px solid var(--line);border-radius:var(--r-sm);
  font-size:var(--t-sm);line-height:1.55;cursor:pointer;}
.consent input[type=checkbox]{margin-top:3px;width:20px;height:20px;flex:0 0 auto;accent-color:var(--clay);cursor:pointer;}
.consent a{text-decoration:underline;}
.consent:focus-within{outline:2px solid var(--clay);outline-offset:2px;}


/* ---- order state: an unpaid order is a request, and must look like one ---- */
.order-state{display:inline-block;margin:var(--s2) 0 0;padding:2px 10px;border-radius:999px;
  font-size:var(--t-xs);font-weight:600;letter-spacing:.01em;
  background:var(--sand);border:1px solid var(--line);color:var(--ink-2);}
.order-state--yes{background:color-mix(in srgb, var(--leaf) 12%, transparent);border-color:var(--leaf);color:var(--leaf-ink,var(--ink));}


/* ---- Magic Box-made disclosure ---- */
.made-here{border-left:3px solid var(--clay);}
.made-here .disclosure-text{padding-top:var(--s2);border-top:1px solid var(--line);color:var(--ink-2);}


/* ================================================================== CK12 touch targets

   The previous pass wrote these rules against .btn.sm, .btn.xs, .qty button, .check input,
   .swapopt, nav.main a and .klist a. Measured against the eight customer pages, those seven
   selectors match ZERO elements: this markup uses BEM (.btn--sm) and prefixed layout classes
   (.mb-footer-col). So the rules were inert, and the controls they were meant to protect —
   50 Add buttons, 160 footer links, 9 category chips — were still shipping at 38 to 41px.

   Written here against the classes the markup actually uses, and verified by measuring the
   rendered boxes rather than by reading the stylesheet.
   ------------------------------------------------------------------------------------- */
@media (pointer: coarse) {
  .btn--sm,
  .btn--xs,
  .chip,
  .cartbtn,
  .pill-nav a,
  .pill-nav button,
  .choice,
  .menu-toggle,
  .account-nav a,
  .prod-name a,
  .card h2 a,
  .card h3 a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Full-width rows keep their width; only the height was short. */
  .mb-footer-col a,
  .mb-header a.logo {
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  /* A checkbox is the one control where the box itself must be big enough, because the
     label around it is not always what a thumb lands on. */
  .consent input[type="checkbox"],
  .check input[type="checkbox"],
  input[type="checkbox"],
  input[type="radio"] {
    width: 24px;
    height: 24px;
  }
  .consent { min-height: 44px; }

  /* The producer name under a product. The first attempt grew the HIT AREA with a
     negative-inset pseudo-element instead of the box, to keep fifty cards from getting
     taller. Measured, it worked on exactly one link in six: the product-name link above it
     is now 44px tall and sits on top of the expanded area, so the browser hit-tests that
     instead. Clever, and wrong. The box itself grows.  */
  .prod-producer a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}

/* ---- the footer small print ran to 82 characters on a wide screen. The first attempt
   here guessed .mb-footer-in and .mb-footer-bottom; measured, the element is actually in
   .mb-footer-base, so the rule did nothing. ---- */
.mb-footer-base p { max-width: 68ch; margin-inline: auto; }


/* ======================================================================================
   PREMIUM LAYER
   ======================================================================================

   Written after looking at rendered screenshots rather than at the CSSOM. What the
   screenshots showed: a food site with no photography anywhere, box cards with no price and
   ragged heights, product cards that read like a spreadsheet, and a hero that was text on a
   flat wash. Metrics were already clean; the page simply was not designed.

   Two structural ideas carry most of this file:

   1. BLEED. Sections that should feel like bands of the page own the full viewport width and
      centre their own content, instead of everything sitting in one column that just gets
      wider on a large screen. That is what makes 1920 feel composed rather than stretched.

   2. IMAGE SLOTS. Every image is an aspect-ratio box that exists whether or not a photograph
      does, so real photography drops in later without moving anything.
   ------------------------------------------------------------------------------------ */

/* ---------------------------------------------------------------- full-bleed sections */
.bleed { width: 100%; margin-inline: 0; padding-inline: 0; max-width: none; }
.bleed-in { max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }

/* ---------------------------------------------------------------- image slots */
.mb-img { position: relative; margin: 0; overflow: hidden; border-radius: var(--r); background: var(--sand); }
.mb-img-el { display: block; width: 100%; height: 100%; object-fit: cover; }
.mb-img--pending { border: 1px solid var(--line); }
.mb-img-pending {
  position: absolute; left: 10px; bottom: 10px;
  font-size: var(--t-xs); letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink-3); background: rgba(255,255,255,.82);
  border: 1px solid var(--line); border-radius: var(--r-pill);
  padding: 3px 9px; backdrop-filter: blur(2px);
}

/* ---------------------------------------------------------------- section headings */
.section-title { font-size: var(--t-3xl); line-height: 1.08; letter-spacing: -.015em; margin: 0 0 var(--s3); }
.section-lede { font-size: var(--t-lg); color: var(--ink-2); max-width: 62ch; margin: 0 0 var(--s7); }
.center .section-lede, .section-lede.center { margin-inline: auto; }

/* ---------------------------------------------------------------- 1. hero */
.hero--v2 { background: linear-gradient(160deg, var(--sand) 0%, var(--clay-tint) 62%, var(--bone) 100%); padding-block: clamp(28px, 5vw, 76px); border-bottom: 1px solid var(--clay-line); }
.hero-v2-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.hero-v2-copy h1 { font-size: var(--t-4xl); line-height: 1.02; letter-spacing: -.025em; margin: var(--s3) 0 var(--s4); text-wrap: balance; }
.hero-v2-copy .lede { font-size: var(--t-lg); color: var(--ink-2); max-width: 46ch; margin-bottom: var(--s7); }
.hero-v2-art { position: relative; }
.hero-img { border-radius: var(--r-xl); box-shadow: var(--e3); }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--s3); margin-bottom: var(--s6); }
.hero-actions--center { justify-content: center; }
.btn--xl { font-size: var(--t-md); padding: 15px 30px; border-radius: var(--r); }
.btn--quiet { background: rgba(255,255,255,.72); border: 1px solid var(--line-2); color: var(--ink); }
.btn--quiet:hover { background: #fff; border-color: var(--ink-4); }
.hero-trust { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); list-style: none; padding: 0; margin: 0; font-size: var(--t-sm); color: var(--ink-2); }
.hero-trust li { position: relative; padding-left: 20px; }
.hero-trust li::before { content: "✓"; position: absolute; left: 0; color: var(--clay); font-weight: 700; }

/* ---------------------------------------------------------------- 2. ZIP band */
.zipband { background: var(--ink); color: var(--bone); padding-block: clamp(24px, 3.4vw, 44px); width: 100%; max-width: none; margin-inline: 0; }
.zipband-in { max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 460px); gap: clamp(20px, 3vw, 48px); align-items: center; }
.zipband h2 { color: var(--bone); font-size: var(--t-2xl); margin: 0 0 var(--s2); }
.zipband p { color: #C9BFB2; margin: 0; max-width: 48ch; }
.zipband .zipbox { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16); border-radius: var(--r-lg); padding: var(--s5); }
.zipband .zipbox label { color: var(--bone); }
.zipband .zipbox .hint { color: #B3A79A; }

/* ---------------------------------------------------------------- 3. steps */
.steps--v2 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s5); list-style: none; padding: 0; margin: 0; counter-reset: none; }
.steps--v2 .step { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s6); display: flex; flex-direction: column; gap: var(--s2); position: relative; }
.steps--v2 .stepnum { width: 34px; height: 34px; border-radius: 50%; background: var(--clay); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: var(--t-sm); margin-bottom: var(--s2); }
.steps--v2 .step h3 { font-size: var(--t-base); margin: 0; line-height: 1.3; }
.steps--v2 .step p { font-size: var(--t-sm); color: var(--ink-2); margin: 0; }

/* ---------------------------------------------------------------- 4. box cards */
.boxgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--s6); align-items: stretch; }
.boxcard {
  display: flex; flex-direction: column;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg);
  overflow: hidden; box-shadow: var(--e1);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.boxcard:hover { transform: translateY(-3px); box-shadow: var(--e3); border-color: var(--line-2); }
.boxcard-art { position: relative; }
.boxcard-img { border-radius: 0; }
.boxcard-badge {
  position: absolute; top: 12px; left: 12px;
  background: var(--clay); color: #fff; font-size: var(--t-xs); font-weight: 650;
  letter-spacing: .03em; text-transform: uppercase;
  padding: 5px 11px; border-radius: var(--r-pill); box-shadow: var(--e2);
}
.boxcard-body { padding: var(--s5) var(--s5) var(--s3); flex: 1 1 auto; display: flex; flex-direction: column; gap: var(--s3); }
.boxcard-name { font-size: var(--t-xl); line-height: 1.15; margin: 0; }
.boxcard-name a { color: var(--ink); text-decoration: none; }
.boxcard-name a:hover { color: var(--clay); }
.boxcard-blurb { color: var(--ink-2); font-size: var(--t-sm); margin: 0; }
.boxcard-specs { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); margin: 0; }
.boxcard-specs div { display: flex; flex-direction: column; gap: 1px; }
.boxcard-specs dt { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .05em; color: var(--ink-4); }
.boxcard-specs dd { margin: 0; font-weight: 650; font-size: var(--t-sm); }
.boxcard-sample { font-size: var(--t-sm); color: var(--ink-2); margin: 0; line-height: 1.5; }
.boxcard-sample span { display: block; font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .05em; color: var(--ink-4); margin-bottom: 2px; }
.boxcard-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s3) var(--s5) var(--s4); border-top: 1px solid var(--line); margin-top: auto; }
.boxcard-price strong { font-size: var(--t-xl); display: block; line-height: 1.1; }
.boxcard-price .faint { display: block; }
.boxcard-note { margin: 0; padding: var(--s2) var(--s5) var(--s4); font-size: var(--t-xs); color: var(--ink-4); border-top: 1px dashed var(--line); }

/* ---------------------------------------------------------------- 5. what you get */
/* One tidy row: the filled box gets twice the width, and a shared fixed height keeps the
   five cards on one baseline. A full-width 16:10 hero image here was 780px tall on a 1440
   screen — it dominated a section that is meant to be a glance, not a centrepiece. */
.getgrid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--s5); margin-bottom: var(--s7); align-items: start; }
.getcard { margin: 0; }
.getcard--wide { grid-column: span 2; }
.getcard .mb-img { aspect-ratio: auto !important; height: clamp(150px, 13vw, 220px); }
.getimg { box-shadow: var(--e1); }
.getcard figcaption { padding-top: var(--s3); display: flex; flex-direction: column; gap: 2px; }
.getcard figcaption strong { font-size: var(--t-base); }
.getcard figcaption span { font-size: var(--t-sm); color: var(--ink-2); }
.chips--center { justify-content: center; }

/* ---------------------------------------------------------------- 6. why */
.whygrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--s5); }
.whycard { background: var(--paper); border: 1px solid var(--line); border-left: 3px solid var(--clay); border-radius: var(--r); padding: var(--s6); }
.whycard h3 { font-size: var(--t-lg); margin: 0 0 var(--s2); line-height: 1.25; }
.whycard p { margin: 0; color: var(--ink-2); font-size: var(--t-sm); line-height: 1.6; }

/* ---------------------------------------------------------------- 7. producers */
.prodgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--s6); margin-bottom: var(--s7); }
.producer-card--v2 {
  display: flex; flex-direction: column; text-decoration: none; color: inherit;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease;
}
.producer-card--v2:hover { transform: translateY(-3px); box-shadow: var(--e3); }
.producer-img { border-radius: 0; }
.producer-body { padding: var(--s5); display: flex; flex-direction: column; gap: var(--s2); }
.producer-body h3 { font-size: var(--t-lg); margin: 0; line-height: 1.2; }
.producer-where { font-size: var(--t-sm); color: var(--clay); margin: 0; font-weight: 600; }
.producer-story { font-size: var(--t-sm); color: var(--ink-2); margin: 0; line-height: 1.55; }

/* ---------------------------------------------------------------- 8. our own lines */
.lines-band { background: var(--ink); color: var(--bone); }
.lines-band .section-title, .lines-band h3 { color: var(--bone); }
.lines-band .section-lede { color: #C9BFB2; }
.linegrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--s6); }
.linecard { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.14); border-radius: var(--r-lg); overflow: hidden; display: flex; flex-direction: column; }
.linecard-img { border-radius: 0; }
.linecard-body { padding: var(--s5); display: flex; flex-direction: column; gap: var(--s2); }
.linecard-eyebrow { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--sun); margin: 0; font-weight: 650; }
.linecard-body h3 { font-size: var(--t-xl); margin: 0; }
.linecard-body p { color: #C9BFB2; font-size: var(--t-sm); margin: 0; line-height: 1.55; }
.linecard-body .btn { align-self: flex-start; margin-top: var(--s2); }
.linecard--soon .mb-img { opacity: .62; }
.linecard-status { margin: var(--s2) 0 0; }
.linecard .badge--sand { background: rgba(255,255,255,.12); color: var(--bone); border: 1px solid rgba(255,255,255,.2); }

/* ---------------------------------------------------------------- 9. split feature */
.split-feature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.feature-img { border-radius: var(--r-xl); box-shadow: var(--e2); }
.split-feature-copy h2 { font-size: var(--t-2xl); margin: 0 0 var(--s3); }
.ticks { list-style: none; padding: 0; margin: 0 0 var(--s6); display: flex; flex-direction: column; gap: var(--s2); }
.ticks li { position: relative; padding-left: 26px; color: var(--ink-2); }
.ticks li::before { content: "✓"; position: absolute; left: 0; top: -1px; color: var(--sage); font-weight: 700; }

/* ---------------------------------------------------------------- 10. trust */
.trustgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: var(--s5); }
.trustcard { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: var(--s6); display: flex; flex-direction: column; gap: var(--s2); }
.trustcard h3 { font-size: var(--t-base); margin: 0; line-height: 1.3; }
.trustcard p { margin: 0; font-size: var(--t-sm); color: var(--ink-2); line-height: 1.6; flex: 1 1 auto; }
.trustlink { font-size: var(--t-sm); font-weight: 600; color: var(--clay); text-decoration: underline; text-underline-offset: 3px; }

/* ---------------------------------------------------------------- 11. FAQ */
.faqlist { display: flex; flex-direction: column; gap: var(--s2); max-width: 78ch; margin-inline: auto; }
.faqitem { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.faqitem summary { cursor: pointer; padding: var(--s4) var(--s5); font-weight: 650; font-size: var(--t-md); list-style: none; display: flex; align-items: center; justify-content: space-between; gap: var(--s3); min-height: 44px; }
.faqitem summary::-webkit-details-marker { display: none; }
.faqitem summary::after { content: "+"; font-size: 1.35em; color: var(--clay); line-height: 1; flex: 0 0 auto; transition: transform .18s ease; }
.faqitem[open] summary::after { transform: rotate(45deg); }
.faqitem summary:hover { background: var(--sand); }
.faqbody { padding: 0 var(--s5) var(--s5); }
.faqbody p { margin: 0; color: var(--ink-2); line-height: 1.65; max-width: var(--measure); }

/* ---------------------------------------------------------------- 12. final CTA */
.cta-final--v2 { background: linear-gradient(170deg, var(--clay-tint) 0%, var(--sand) 100%); padding-block: clamp(40px, 6vw, 92px); text-align: center; border-top: 1px solid var(--clay-line); }
.cta-final--v2 h2 { font-size: var(--t-3xl); margin: 0 0 var(--s3); }
.cta-final--v2 .lede { max-width: 46ch; margin: 0 auto var(--s7); color: var(--ink-2); }

/* ---------------------------------------------------------------- microinteractions */
.btn { transition: background-color .16s ease, border-color .16s ease, color .16s ease, transform .12s ease, box-shadow .16s ease; }
.btn:active { transform: translateY(1px); }
.btn--primary:hover { box-shadow: 0 4px 14px rgba(184,79,41,.28); }
.chip { transition: background-color .16s ease, border-color .16s ease, transform .12s ease; }
.chip:hover { transform: translateY(-1px); border-color: var(--clay); color: var(--clay); }
:where(a, button, summary, input, select, textarea):focus-visible {
  outline: 2px solid var(--clay); outline-offset: 2px; border-radius: var(--r-sm);
}

@media (prefers-reduced-motion: reduce) {
  .boxcard, .producer-card--v2, .btn, .chip { transition: none !important; }
  .boxcard:hover, .producer-card--v2:hover, .chip:hover { transform: none; }
}

/* ---------------------------------------------------------------- large screens
   1920 must read as composed, not stretched: the container steps up once more, the hero
   gives the image more room, and prose stays at a readable measure regardless. */
@media (min-width: 1600px) {
  :root { --max: 1440px; }
  .hero-v2-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .getgrid { gap: var(--s6); }
}
@media (min-width: 1900px) {
  :root { --max: 1560px; }
  .hero--v2 { padding-block: clamp(48px, 4.5vw, 104px); }
}

/* ---------------------------------------------------------------- tablet */
@media (max-width: 1000px) {
  .steps--v2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .getgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .getcard--wide { grid-column: span 4; }
  .getcard--wide .mb-img { height: clamp(180px, 30vw, 260px); }
}
@media (max-width: 560px) {
  .getgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .getcard--wide { grid-column: span 2; }
}

/* ---------------------------------------------------------------- mobile */
@media (max-width: 820px) {
  .hero-v2-grid { grid-template-columns: 1fr; gap: var(--s7); }
  .hero-v2-art { order: -1; }
  .hero-img { border-radius: var(--r-lg); }
  .zipband-in { grid-template-columns: 1fr; }
  .split-feature { grid-template-columns: 1fr; gap: var(--s6); }
  .split-feature-art { order: -1; }
  .hero-actions .btn { flex: 1 1 100%; justify-content: center; }
}
@media (max-width: 560px) {
  .steps--v2 { grid-template-columns: 1fr; }
  .getgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .boxgrid, .whygrid, .prodgrid, .linegrid, .trustgrid { grid-template-columns: 1fr; }
  .boxcard-foot { flex-wrap: wrap; }
}


/* ======================================================================================
   PRODUCT CARDS

   The shop was fifty text rows in a three-column grid: no image, ragged heights because
   some products carry a producer line and some do not, and Magic Box-made items sitting
   indistinguishably among things we merely resell. A card now has a fixed shape — image,
   body that grows, foot pinned to the bottom — so a row is a row.

   The "ours" treatment is driven by the provenance data, never by a hand-maintained list,
   so the visual claim and the legal claim cannot drift apart.
   ------------------------------------------------------------------------------------ */
.prodgrid-shop { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--s5); }
.prodcard {
  display: flex; flex-direction: column;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg);
  overflow: hidden; box-shadow: var(--e1);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.prodcard:hover { transform: translateY(-3px); box-shadow: var(--e2); border-color: var(--line-2); }
.prodcard:focus-within { border-color: var(--clay); }
.prodcard-art { display: block; position: relative; }
.prodcard-img { border-radius: 0; }
.prodcard-flag {
  position: absolute; top: 10px; right: 10px;
  background: var(--ink); color: var(--bone);
  font-size: var(--t-xs); font-weight: 650; letter-spacing: .03em;
  padding: 4px 10px; border-radius: var(--r-pill);
}
.prodcard-body { padding: var(--s4) var(--s4) var(--s2); display: flex; flex-direction: column; gap: 6px; flex: 1 1 auto; }
.prodcard .prod-name { font-size: var(--t-base); line-height: 1.3; margin: 0; }
.prodcard .prod-name a { color: var(--ink); text-decoration: none; }
.prodcard .prod-name a:hover { color: var(--clay); text-decoration: underline; text-underline-offset: 3px; }
.prodcard .prod-producer { font-size: var(--t-sm); margin: 0; }
.prodcard .prod-producer a { color: var(--ink-3); text-decoration: none; }
.prodcard .prod-producer a:hover { color: var(--clay); text-decoration: underline; }
.prodcard .prod-producer--ours { color: var(--clay); font-weight: 600; }
.prodcard .badges { display: flex; flex-wrap: wrap; gap: 4px; margin: 2px 0 0; }
.prodcard .why { font-size: var(--t-sm); color: var(--ink-3); margin: 0; font-style: italic; }
.prodcard-foot {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s2);
  padding: var(--s3) var(--s4) var(--s4); margin-top: auto;
}
.prodcard .pricetag { font-size: var(--t-md); font-weight: 700; }
.prodcard--ours { border-color: var(--line-2); }
.prodcard--ours .prodcard-art::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 -3px 0 var(--clay);
}

@media (prefers-reduced-motion: reduce) {
  .prodcard { transition: none; }
  .prodcard:hover { transform: none; }
}
@media (max-width: 560px) {
  .prodgrid-shop { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
  .prodcard-body { padding: var(--s3) var(--s3) 2px; }
  .prodcard-foot { padding: var(--s2) var(--s3) var(--s3); flex-wrap: wrap; }
}


.producer-card--v2 .badges { margin: 0; }
.producer-count { font-size: var(--t-xs); color: var(--ink-4); margin: auto 0 0; padding-top: var(--s2); }
.producer-card--v2 h2 { font-size: var(--t-lg); margin: 0; line-height: 1.2; }


/* A grid of fifty cards does not need fifty "photography pending" chips; one honest line
   above the grid says the same thing without making the page look broken. */
.prodcard .mb-img-pending { display: none; }
.mb-photonote {
  font-size: var(--t-sm); color: var(--ink-3);
  background: var(--sun-tint); border: 1px solid var(--sun-line);
  border-radius: var(--r-sm); padding: var(--s3) var(--s4);
  margin: 0 0 var(--s5); max-width: var(--measure);
}


/* ======================================================================================
   CK13 corrections — every one of these was found by measuring the rendered page, not by
   reading the stylesheet.
   ------------------------------------------------------------------------------------ */

/* The ghost button inherits near-black text, which is correct on a pale section and
   invisible on the dark "Made by Magic Box" band: measured contrast 1.00 against its own
   background. A button nobody can read is worse than no button. */
.lines-band .btn--ghost,
.zipband .btn--ghost {
  color: var(--bone);
  border-color: rgba(255, 255, 255, .34);
  background: rgba(255, 255, 255, .06);
}
.lines-band .btn--ghost:hover,
.zipband .btn--ghost:hover {
  background: rgba(255, 255, 255, .14);
  border-color: rgba(255, 255, 255, .55);
  color: #fff;
}

/* The box-title link on /boxes/ measured 28px at 430. The coarse-pointer block covered
   .prod-name a and .card h3 a but not the new box card, which is its own component. */
@media (pointer: coarse) {
  .boxcard-name a,
  .trustlink,
  .linecard-body .btn,
  .faqitem summary {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .trustlink { align-self: flex-start; }
  .faqitem summary { display: flex; justify-content: space-between; }
}

/* One paragraph on /build/ reached 78 characters at 1920. Prose is capped to the reading
   measure wherever it is not already inside a component that sets its own width. */
.mb-main > p,
.mb-main > section > p:not([class]),
.split-feature-copy p,
.section-lede { max-width: var(--measure); }


/* ======================================================================================
   CHECKOUT JOURNEY + ACCOUNT

   The handoff to WooCommerce for payment is the one place the customer leaves our markup.
   It cannot be styled into one experience — Woo renders its own page — but everything up to
   it and everything after it can look like the same product, and the step indicator tells
   the customer where they are so the gateway page does not feel like a different site.
   ------------------------------------------------------------------------------------ */

/* ---- cart lines ---- */
.boxart-items { list-style: none; padding: 0; margin: 0 0 var(--s5); display: flex; flex-direction: column; gap: var(--s2); }
.boxart-item--edit {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3);
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r);
  padding: var(--s4); transition: border-color .16s ease;
}
.boxart-item--edit:hover { border-color: var(--line-2); }
.boxart-item--edit .grow { flex: 1 1 220px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.boxart-item--edit .grow a { color: var(--ink); text-decoration: none; }
.boxart-item--edit .grow a:hover { color: var(--clay); text-decoration: underline; text-underline-offset: 3px; }
.boxart-item--edit .num { font-weight: 700; font-size: var(--t-md); margin-left: auto; min-width: 78px; text-align: right; }
.qtyform { display: flex; align-items: center; gap: var(--s2); }
.qtyinput { width: 74px; text-align: center; }
.swapbox { list-style: none; margin: calc(var(--s2) * -1) 0 0; }
.swapbox details { background: var(--sand); border: 1px solid var(--line); border-radius: 0 0 var(--r) var(--r); border-top: 0; padding: var(--s3) var(--s4); }
.swapbox summary { cursor: pointer; font-size: var(--t-sm); color: var(--ink-2); min-height: 44px; display: flex; align-items: center; }
.swapopts { display: flex; flex-wrap: wrap; gap: var(--s2); padding-top: var(--s2); }

/* ---- the order summary ---- */
.summary { position: sticky; top: calc(var(--header-h) + 16px); }
.card.summary { border: 1px solid var(--line-2); border-radius: var(--r-lg); padding: var(--s6); box-shadow: var(--e2); }
.card.summary h3 { font-size: var(--t-lg); margin: 0 0 var(--s4); padding-bottom: var(--s3); border-bottom: 1px solid var(--line); }
.sumrow { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s3); padding: 7px 0; font-size: var(--t-sm); }
.sumrow span { color: var(--ink-2); }
.sumrow strong { font-variant-numeric: tabular-nums; }
.sumrow--total { border-top: 1px solid var(--line); margin-top: var(--s2); padding-top: var(--s4); font-size: var(--t-md); }
.sumrow--total strong { font-size: var(--t-xl); }

/* ---- the step rail: where the customer is, including while they are on Stripe ---- */
.mb-steps { display: flex; align-items: center; gap: var(--s2); list-style: none; padding: 0; margin: 0 0 var(--s7); flex-wrap: wrap; }
.mb-steps li { display: flex; align-items: center; gap: var(--s2); font-size: var(--t-sm); color: var(--ink-4); }
.mb-steps li::after { content: ""; width: 26px; height: 1px; background: var(--line-2); }
.mb-steps li:last-child::after { display: none; }
.mb-steps .dot { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: var(--t-xs); font-weight: 700; background: var(--sand-2); color: var(--ink-3); flex: 0 0 auto; }
.mb-steps .is-on { color: var(--ink); font-weight: 650; }
.mb-steps .is-on .dot { background: var(--clay); color: #fff; }
.mb-steps .is-done .dot { background: var(--sage); color: #fff; }

/* ---- consent ---- */
.consent { background: var(--sand); }
.consent:has(input:checked) { border-color: var(--sage); background: var(--sage-tint); }

/* ---- the payment handoff ---- */
.payoff { background: var(--info-tint); border: 1px solid var(--info-line); border-radius: var(--r); padding: var(--s4); margin-bottom: var(--s4); }
.payoff h4 { margin: 0 0 var(--s2); font-size: var(--t-base); }
.payoff p { margin: 0; font-size: var(--t-sm); color: var(--ink-2); line-height: 1.55; }

/* ---- account ---- */
.pill-nav { display: flex; flex-wrap: wrap; gap: var(--s2); margin: 0 0 var(--s7); padding: var(--s1); background: var(--sand); border: 1px solid var(--line); border-radius: var(--r-pill); }
.pill-nav a {
  padding: 9px 16px; border-radius: var(--r-pill); font-size: var(--t-sm); font-weight: 600;
  color: var(--ink-2); text-decoration: none; transition: background-color .16s ease, color .16s ease;
  display: inline-flex; align-items: center;
}
.pill-nav a:hover { background: rgba(255,255,255,.7); color: var(--ink); }
.pill-nav a.is-on { background: var(--paper); color: var(--ink); box-shadow: var(--e1); }
.order-card { border-radius: var(--r-lg); border: 1px solid var(--line); padding: var(--s6); margin-bottom: var(--s5); }
.order-card h2 { font-size: var(--t-lg); margin: 0; }
.order-card .row-between { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s4); }
.order-card .num strong { font-size: var(--t-xl); font-variant-numeric: tabular-nums; }
.order-help summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-size: var(--t-sm); font-weight: 600; color: var(--clay); }

@media (max-width: 820px) {
  .summary { position: static; }
  .mb-steps li::after { display: none; }
}
@media (max-width: 560px) {
  .boxart-item--edit .num { margin-left: 0; text-align: left; }
  .qtyform { width: 100%; }
}


/* ---------------------------------------------------------------- CK13 header
   Measured: the cart control was a 19px-wide emoji with an absolutely-positioned count that
   overhung it to the left, landing on top of the "My Magic Box" pill 12px away. It now has a
   real 44px target of its own and the badge sits inside its own bounds. */
.mb-header-in .cartbtn {
  width: 44px; height: 44px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  margin-left: var(--s2);
  border: 1px solid var(--line); border-radius: 50%;
  background: var(--paper);
  transition: border-color .16s ease, background-color .16s ease;
}
.mb-header-in .cartbtn:hover { border-color: var(--clay); background: var(--clay-tint); }
.mb-header-in .cartbtn-n {
  position: absolute; top: -3px; right: -3px;
  min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: var(--r-pill);
  background: var(--clay); color: #fff;
  font-size: 12px; font-weight: 700; line-height: 20px; text-align: center;
  border: 2px solid var(--paper);
}

/* ---------------------------------------------------------------- CK13 swap panel
   Seven cart lines produced seven full-width beige panels, which doubled the apparent length
   of the list for a control almost nobody opens. Closed, it is now a quiet line of text;
   open, it becomes the panel it needs to be. */
.swapbox { margin: calc(var(--s2) * -1) 0 0; }
.swapbox details { background: transparent; border: 0; padding: 2px var(--s4) 0; }
.swapbox details[open] {
  background: var(--sand); border: 1px solid var(--line); border-top: 0;
  border-radius: 0 0 var(--r) var(--r); padding: var(--s3) var(--s4);
}
.swapbox summary {
  min-height: 32px; display: inline-flex; align-items: center;
  font-size: var(--t-xs); color: var(--ink-4); cursor: pointer;
}
.swapbox summary:hover { color: var(--clay); text-decoration: underline; text-underline-offset: 3px; }
@media (pointer: coarse) { .swapbox summary { min-height: 44px; } }


/* ---------------------------------------------------------------- CK13 round two
   Two findings from the second measured sweep, both real:

   1. The swap control read at 4.25:1 against the cart's sand background. AA wants 4.5 for
      text this size, and it is the kind of near-miss that only a measurement catches.
   2. The product-name link inside a cart line measured 36px on a phone — the cart is the one
      screen where a mis-tap costs the customer money, so it gets the full target. */
.swapbox summary { color: var(--ink-3); }

@media (pointer: coarse) {
  .boxart-item--edit .grow > a,
  .order-card h2 a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}


/* ---------------------------------------------------------------- CK13 measure
   Two paragraphs still ran past the reading measure: the small print in the checkout
   summary at 768 (88 characters) and an unclassed paragraph on /build/ at 1920. Neither is
   body copy anyone reads at length, but the measure is a site-wide rule and exceptions to it
   are how a rule stops being one. */
.summary p.xs,
.payoff p,
.boxcard-note { max-width: 52ch; margin-inline: auto; }
.mb-main p:not([class]) { max-width: var(--measure); }


/* ---------------------------------------------------------------- CK13 zip band
   On a phone the ZIP field collapsed to about 24px: the row is a flex line and the input had
   no basis of its own, so the button took the width and the field took what was left. The
   field is the thing being asked for, so it gets the space. The band's own paragraph already
   explains the coverage area, so the form's hint is redundant there and is hidden rather
   than repeated three lines below itself. */
.zipform-row { display: flex; gap: var(--s2); flex-wrap: wrap; }
.zipform-row input { flex: 1 1 160px; min-width: 0; }
.zipform-row .btn { flex: 0 0 auto; }
.zipband .zipbox .hint { display: none; }

@media (max-width: 560px) {
  .zipform-row input { flex: 1 1 100%; }
  .zipform-row .btn { flex: 1 1 100%; justify-content: center; }
}


/* ---------------------------------------------------------------- CK13 steps
   The step cards inherited centred, bold body text from the old .steps rules. Centred bold
   paragraphs read as a poster, not as instructions: the eye has no consistent left edge to
   return to across four cards. Left-aligned, normal weight. */
.steps--v2 .step { text-align: left; align-items: flex-start; }
.steps--v2 .step h3 { text-align: left; font-weight: 650; }
.steps--v2 .step p { text-align: left; font-weight: 400; }


/* ---------------------------------------------------------------- CK13 grid balance
   auto-fill packed six box cards as 4 + 2 at 1920 and six producers as 5 + 1: a full row
   followed by a stub, which reads as a layout that ran out rather than one that was
   composed. Three columns at desktop gives 3 + 3 for both, and gives each card the width to
   carry a photograph when one arrives. */
@media (min-width: 1100px) {
  .boxgrid  { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .prodgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}


/* The last over-measure paragraph lived in a .choice card under main.wrap, which the earlier
   .mb-main selector never matched. Capped where it actually is. */
.choice p,
.card > p:not([class]) { max-width: var(--measure); }


/* ---------------------------------------------------------------- CK13 choice card
   .choice is a pill-shaped control, and it carries border-radius: var(--r-pill) for that
   reason. But the box-size chooser reuses .choice on a full card, and a 999px radius on a
   350px-tall block draws an ellipse. The three box sizes were rendering as ovals. A card is
   a card. */
.choice.card {
  border-radius: var(--r-lg);
  justify-content: flex-start;
  text-align: left;
  padding: var(--s6);
}
.choice.card h2 { text-align: left; }
.choice.card p { text-align: left; }


/* ---------------------------------------------------------------- CK13 mobile carousels
   Measured at 430: the redesigned home page ran to 18,300px — about forty-two screens. Six
   box cards and six producer cards stacked single-column account for most of it, and a
   customer who has to scroll past six full-height box cards to reach the trust section will
   simply not reach the trust section.

   They become swipeable rows instead — but only on the HOME page. /boxes/ and /producers/
   exist to compare everything at once, and a carousel there would hide six of seven boxes
   behind a swipe. All six stay in the DOM and in the tab order; the row scrolls inside
   itself, so the page does not scroll sideways. */
@media (max-width: 700px) {
  .boxgrid--rail,
  .prodgrid--rail,
  .linegrid--rail {
    grid-auto-flow: column;
    grid-template-columns: none;
    grid-auto-columns: 78vw;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    padding-bottom: var(--s3);
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    scrollbar-width: thin;
  }
  .boxgrid--rail > *,
  .prodgrid--rail > *,
  .linegrid--rail > * { scroll-snap-align: start; }

  /* A row that scrolls has to look like one, or nobody swipes it. */
  .boxgrid::after,
  .prodgrid::after,
  .linegrid::after { content: ; flex: 0 0 var(--s2); }
}
@media (max-width: 700px) and (prefers-reduced-motion: no-preference) {
  .boxgrid--rail, .prodgrid--rail, .linegrid--rail { scroll-behavior: smooth; }
}


/* ======================================================================================
   SEGMENTS — the three things Magic Box sells, stated near the top of the page.

   The box funnel still comes first and still converts, but a visitor who only ever sees
   boxes never learns that Magic Box also bakes and cooks. Each card links into its own
   section, and a segment that cannot be ordered yet is visibly quieter rather than hidden.
   ------------------------------------------------------------------------------------ */
.segments-band { background: var(--sand); }
.segmentgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s6); }
.segcard {
  display: flex; flex-direction: column; text-decoration: none; color: inherit;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg);
  overflow: hidden; box-shadow: var(--e1);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.segcard:hover { transform: translateY(-3px); box-shadow: var(--e3); border-color: var(--clay); }
.segcard-img { border-radius: 0; }
.segcard-body { padding: var(--s5); display: flex; flex-direction: column; gap: var(--s2); flex: 1 1 auto; }
.segcard-kicker { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--clay); font-weight: 650; margin: 0; }
.segcard-body h3 { font-size: var(--t-xl); margin: 0; line-height: 1.15; }
.segcard-copy { font-size: var(--t-sm); color: var(--ink-2); margin: 0; line-height: 1.55; flex: 1 1 auto; }
.segcard-cta { font-size: var(--t-sm); font-weight: 650; color: var(--clay); margin-top: var(--s2); }
.segcard-cta::after { content: " →"; }
/* A closed segment still links to its real page, so its call to action keeps the arrow.
   Styling it as dead text made a working link look disabled. */
.segcard--soon .segcard-cta { color: var(--ink-3); }
.segcard--soon .mb-img { opacity: .7; }

@media (prefers-reduced-motion: reduce) { .segcard { transition: none; } .segcard:hover { transform: none; } }
@media (max-width: 900px) { .segmentgrid { grid-template-columns: 1fr; } }

/* ====================================================================================== 
   MAGIC SERVED — the meal menu. Renders in full whether or not anything can be ordered,
   because a menu nobody can buy from is still a menu and hiding it would say the segment
   does not exist. A closed meal is visibly quieter, never absent.
   ------------------------------------------------------------------------------------ */
.hero--served { background: linear-gradient(160deg, var(--sand) 0%, var(--sage-tint) 70%, var(--bone) 100%); border-bottom: 1px solid var(--sage-line); padding-block: clamp(28px, 5vw, 76px); }
.mealgroup-title { font-size: var(--t-xl); margin: var(--s7) 0 var(--s4); display: flex; align-items: baseline; gap: var(--s3); }
.mealgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--s5); }
.mealcard { display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--e1); transition: transform .18s ease, box-shadow .18s ease; }
.mealcard:hover { transform: translateY(-3px); box-shadow: var(--e2); }
.mealcard-art { display: block; }
.mealcard-img { border-radius: 0; }
.mealcard-body { padding: var(--s4); display: flex; flex-direction: column; gap: 6px; flex: 1 1 auto; }
.mealcard-body h4 { font-size: var(--t-base); margin: 0; line-height: 1.3; }
.mealcard-body h4 a { color: var(--ink); text-decoration: none; }
.mealcard-body h4 a:hover { color: var(--clay); }
.mealcard-copy { font-size: var(--t-sm); color: var(--ink-2); margin: 0; }
.mealcard-allergens { font-size: var(--t-xs); color: var(--ink-3); margin: 0; }
.mealcard-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); padding: var(--s3) var(--s4) var(--s4); margin-top: auto; }
.mealcard--closed .mb-img { opacity: .72; }
@media (prefers-reduced-motion: reduce) { .mealcard { transition: none; } .mealcard:hover { transform: none; } }
@media (pointer: coarse) { .mealcard-body h4 a { min-height: 44px; display: inline-flex; align-items: center; } }