/* ==========================================================================
   Naturmix B2B — Design System
   Brand colours sampled from the real Naturmix label + pack artwork.
   ========================================================================== */

:root{
  /* Brand */
  --green-900:#16301F;
  --green-800:#1D3B27;
  --green-700:#26472F;
  --green-600:#384F35;   /* label bottom bar green */
  --green-500:#4E6B48;
  --green-300:#8FA985;
  --green-100:#E4EBDF;
  --green-50:#F0F4EC;

  --gold:#B5A166;        /* logo rule gold */
  --gold-600:#9C8749;
  --gold-200:#E7DFC6;
  --gold-50:#F6F1E2;

  --cream:#F7F4EC;
  --cream-2:#FBF9F3;
  --card:#FFFFFF;

  --ink:#1E241F;
  --ink-2:#39433A;
  --muted:#6B7569;
  --muted-2:#8D968B;
  --line:#E5E1D5;
  --line-2:#EFECE2;

  --red:#B4472F;
  --red-50:#FBEFEC;
  --amber:#B07A22;
  --amber-50:#FBF3E3;
  --ok:#3F7A4B;
  --ok-50:#EDF5EE;

  /* Type */
  --font-display:"Poppins","Avenir Next","Segoe UI",system-ui,-apple-system,Helvetica,Arial,sans-serif;
  --font-body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-serif:"Georgia","Times New Roman",serif;

  /* Space & shape */
  --r-xs:6px; --r-sm:10px; --r:14px; --r-lg:20px; --r-xl:28px; --r-full:999px;
  --sh-1:0 1px 2px rgba(28,40,28,.06), 0 1px 3px rgba(28,40,28,.05);
  --sh-2:0 2px 6px rgba(28,40,28,.06), 0 8px 20px rgba(28,40,28,.07);
  --sh-3:0 8px 24px rgba(28,40,28,.10), 0 24px 48px rgba(28,40,28,.09);
  --wrap:1560px;
  --hdr-h:76px;          /* the logo row only */
  --chrome-h:126px;      /* logo row + category bar; JS keeps this exact */
  --ease:cubic-bezier(.4,0,.2,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--cream);color:var(--ink);
  font-family:var(--font-body);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  /* `clip` keeps stray wide children from causing sideways scroll WITHOUT
     turning body into a scroll container — `hidden` here silently breaks every
     position:sticky descendant, including the header. */
  overflow-x:clip;
}
img,svg,video{max-width:100%;height:auto;display:block}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
a{color:inherit;text-decoration:none}
table{border-collapse:collapse;width:100%}
h1,h2,h3,h4,h5{font-family:var(--font-display);font-weight:700;line-height:1.15;margin:0;letter-spacing:-.02em;color:var(--green-800)}
p{margin:0}
ul,ol{margin:0;padding:0}
hr{border:0;border-top:1px solid var(--line);margin:0}
:focus-visible{outline:2px solid var(--green-500);outline-offset:2px;border-radius:4px}

/* ---------- Type scale ---------- */
.h1{font-size:clamp(2.1rem,1.35rem + 2.6vw,3.5rem)}
.h2{font-size:clamp(1.6rem,1.15rem + 1.7vw,2.5rem)}
.h3{font-size:clamp(1.25rem,1.05rem + .8vw,1.7rem)}
.h4{font-size:clamp(1.05rem,.98rem + .35vw,1.25rem)}
.h5{font-size:1rem}
.lede{font-size:clamp(1rem,.96rem + .28vw,1.18rem);color:var(--ink-2);line-height:1.62}
.small{font-size:.875rem}
.xs{font-size:.78rem}
.muted{color:var(--muted)}
.eyebrow{
  font-family:var(--font-display);font-size:.75rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--gold-600);margin-bottom:.6rem;
}
.eyebrow-green{color:var(--green-500)}
.serif-note{font-family:var(--font-serif);font-style:italic;color:var(--gold-600)}
.center{text-align:center}
.nowrap{white-space:nowrap}
.mono{font-variant-numeric:tabular-nums}

/* ---------- Layout ---------- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:24px}
.wrap-narrow{max-width:860px}
.section{padding-block:clamp(48px,5vw,84px)}
.section-sm{padding-block:clamp(32px,3.4vw,52px)}
.section-head{max-width:720px;margin-bottom:clamp(24px,3vw,44px)}
.section-head.center{margin-inline:auto}
.bg-cream{background:var(--cream)}
.bg-cream-2{background:var(--cream-2)}
.bg-white{background:#fff}
.bg-green{background:var(--green-800);color:#EDEFE8}
.bg-green h1,.bg-green h2,.bg-green h3,.bg-green h4{color:#F7F5EE}
.bg-green .muted{color:#AFBDAC}

.grid{display:grid;gap:24px}
.g-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g-4{grid-template-columns:repeat(4,minmax(0,1fr))}
/* For grids whose item count is decided at runtime. A fixed 3-track grid
   holding two cards leaves a third of the row empty and the block reads as
   unfinished; auto-fit drops the empty tracks so the cards that exist share
   the full width instead. Stays left-aligned, like the heading above it. */
.g-fit{grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}
.g-5{grid-template-columns:repeat(5,minmax(0,1fr))}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,64px);align-items:center}
.split-40{grid-template-columns:.78fr 1fr}
.split-60{grid-template-columns:1fr .78fr}
.stack{display:flex;flex-direction:column}
.row{display:flex;align-items:center;flex-wrap:wrap}
.gap-4{gap:4px}.gap-6{gap:6px}.gap-8{gap:8px}.gap-12{gap:12px}.gap-16{gap:16px}.gap-24{gap:24px}
.mt-8{margin-top:8px}.mt-12{margin-top:12px}.mt-16{margin-top:16px}.mt-24{margin-top:24px}.mt-32{margin-top:32px}
.mb-8{margin-bottom:8px}.mb-12{margin-bottom:12px}.mb-16{margin-bottom:16px}.mb-24{margin-bottom:24px}
.ml-auto{margin-left:auto}
.full{width:100%}
.hide{display:none !important}
.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}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  font-family:var(--font-display);font-weight:600;font-size:.82rem;
  letter-spacing:.06em;text-transform:uppercase;
  padding:13px 24px;border-radius:var(--r-xs);border:1.5px solid transparent;
  transition:background .18s var(--ease),color .18s var(--ease),border-color .18s var(--ease),transform .12s var(--ease),box-shadow .18s var(--ease);
  white-space:nowrap;line-height:1.1;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--green-800);color:#F7F5EE;border-color:var(--green-800)}
.btn-primary:hover{background:var(--green-700);border-color:var(--green-700);box-shadow:var(--sh-2)}
.btn-gold{background:var(--gold);color:#241E10;border-color:var(--gold)}
.btn-gold:hover{background:var(--gold-600);border-color:var(--gold-600);color:#fff}
.btn-outline{background:transparent;color:var(--green-800);border-color:var(--green-800)}
.btn-outline:hover{background:var(--green-800);color:#F7F5EE}
.btn-light{background:#F7F5EE;color:var(--green-800);border-color:#F7F5EE}
.btn-light:hover{background:#fff}
.btn-outline-light{background:transparent;color:#F7F5EE;border-color:rgba(247,245,238,.5)}
.btn-outline-light:hover{background:#F7F5EE;color:var(--green-800);border-color:#F7F5EE}
.btn-ghost{background:transparent;color:var(--green-700);border-color:var(--line);text-transform:none;letter-spacing:0;font-size:.9rem}
.btn-ghost:hover{border-color:var(--green-600);background:var(--green-50)}
.btn-sm{padding:9px 16px;font-size:.72rem}
.btn-lg{padding:16px 32px;font-size:.86rem}
.btn-block{display:flex;width:100%}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.45;pointer-events:none}
.btn svg{width:1.05em;height:1.05em;flex:none}
.link{color:var(--green-700);border-bottom:1px solid var(--gold-200);transition:border-color .15s}
.link:hover{border-color:var(--gold)}
.link-arrow{
  display:inline-flex;align-items:center;gap:.5em;font-family:var(--font-display);
  /* was .75rem — at the end of a section heading it read as fine print */
  font-size:.86rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--green-700);
  border-bottom:1px solid transparent;padding-bottom:2px;transition:border-color .15s,color .15s;
}
.link-arrow:hover{color:var(--green-800);border-bottom-color:var(--gold)}
.link-arrow svg{width:.95em;height:.95em;transition:transform .18s var(--ease)}
.link-arrow:hover svg{transform:translateX(3px)}

/* ---------- Badges / pills ---------- */
.badge{
  display:inline-flex;align-items:center;gap:.4em;padding:4px 10px;border-radius:var(--r-full);
  font-size:.7rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  font-family:var(--font-display);background:var(--green-100);color:var(--green-700);
}
.badge-gold{background:var(--gold-50);color:var(--gold-600)}
.badge-stock{background:var(--ok-50);color:var(--ok)}
.badge-low{background:var(--amber-50);color:var(--amber)}
.badge-out{background:var(--red-50);color:var(--red)}
.badge-dark{background:rgba(247,245,238,.14);color:#E8EDE4}
.pill{
  display:inline-flex;align-items:center;gap:.45em;padding:7px 14px;border:1px solid var(--line);
  border-radius:var(--r-full);background:#fff;font-size:.82rem;color:var(--ink-2);
  transition:all .15s var(--ease);cursor:pointer;
}
.pill:hover{border-color:var(--green-300)}
.pill[aria-pressed="true"],.pill.is-active{background:var(--green-800);color:#F7F5EE;border-color:var(--green-800)}

/* ---------- Cards ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-1)}
.card-pad{padding:clamp(20px,2.2vw,32px)}
.card-soft{background:var(--cream-2);border:1px solid var(--line-2);border-radius:var(--r)}
.card-hover{transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s var(--ease)}
.card-hover:hover{transform:translateY(-3px);box-shadow:var(--sh-2);border-color:var(--gold-200)}

/* ---------- Header ---------- */
.topbar{background:var(--green-900);color:#C6D0C2;font-size:.76rem;letter-spacing:.02em}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;min-height:36px;gap:16px}
.topbar a{color:#DCE3D8;transition:color .15s}
.topbar a:hover{color:#fff}
.topbar .dot{color:var(--gold);margin-inline:8px}
.topbar-left,.topbar-right{display:flex;align-items:center;flex-wrap:wrap}

.site-header{
  position:relative;z-index:60;background:rgba(251,249,243,.94);
  backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line);
}
.site-header .wrap{display:flex;align-items:center;gap:20px;min-height:var(--hdr-h)}
.brand{display:flex;align-items:center;flex:none}
.brand img{height:46px;width:auto}
.mainnav{display:flex;align-items:center;gap:4px;margin-inline:auto}
.mainnav > li{list-style:none;position:relative}
.mainnav > li > a{
  display:flex;align-items:center;gap:5px;padding:10px 11px;border-radius:var(--r-xs);
  font-size:.875rem;font-weight:500;color:var(--ink-2);white-space:nowrap;
  transition:color .15s,background .15s;
}
@media (max-width:1180px){
  .mainnav > li > a{padding:10px 8px;font-size:.83rem}
  .header-actions .btn{padding:11px 16px;font-size:.74rem}
  .brand img{height:40px}
}
.mainnav > li > a:hover,.mainnav > li.is-open > a{color:var(--green-800);background:var(--green-50)}
.mainnav > li[data-active] > a{color:var(--green-800);font-weight:600}
.mainnav .caret{width:9px;height:9px;opacity:.5;transition:transform .18s var(--ease)}
.mainnav > li.is-open .caret{transform:rotate(180deg)}
.header-actions{display:flex;align-items:center;gap:10px;flex:none}
.icon-btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:var(--r-xs);color:var(--ink-2);transition:background .15s;
}
.icon-btn:hover{background:var(--green-50);color:var(--green-800)}
.icon-btn svg{width:21px;height:21px}
.cart-count{
  position:absolute;top:3px;right:2px;min-width:18px;height:18px;padding:0 4px;
  background:var(--gold);color:#241E10;border-radius:var(--r-full);
  font-size:.66rem;font-weight:700;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);
}
.cart-count[data-empty="1"]{display:none}
.burger{display:none}

/* Mega menu */
.mega{
  position:absolute;top:calc(100% + 6px);left:50%;transform:translateX(-50%) translateY(-6px);
  background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-3);
  padding:22px;min-width:600px;opacity:0;visibility:hidden;transition:all .18s var(--ease);z-index:70;
}
.mainnav > li.is-open .mega{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.mega-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 26px}
.mega a.mega-item{display:flex;gap:12px;padding:10px;border-radius:var(--r-sm);transition:background .15s}
.mega a.mega-item:hover{background:var(--green-50)}
.mega-item .mi-ic{width:38px;height:38px;flex:none;border-radius:var(--r-xs);background:var(--gold-50);display:grid;place-items:center;color:var(--green-600)}
.mega-item .mi-ic svg{width:20px;height:20px}
.mega-item strong{display:block;font-family:var(--font-display);font-size:.9rem;font-weight:600;color:var(--green-800)}
.mega-item span{font-size:.79rem;color:var(--muted);line-height:1.4}
.mega-foot{margin-top:16px;padding-top:14px;border-top:1px solid var(--line-2);display:flex;justify-content:space-between;align-items:center;gap:12px}

/* Mobile nav */
.mobilenav{
  position:fixed;inset:0;z-index:90;background:var(--cream-2);
  transform:translateX(100%);transition:transform .3s var(--ease);
  display:flex;flex-direction:column;overflow-y:auto;
}
.mobilenav.is-open{transform:translateX(0)}
.mobilenav-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--line)}
.mobilenav-head img{height:38px}
.mobilenav ul{padding:8px 20px 20px}
.mobilenav li{list-style:none;border-bottom:1px solid var(--line-2)}
.mobilenav li > a{display:block;padding:15px 2px;font-family:var(--font-display);font-size:1rem;font-weight:500;color:var(--green-800)}
.mobilenav .sub{padding:0 0 12px 14px}
.mobilenav .sub a{display:block;padding:8px 2px;font-size:.9rem;color:var(--muted);font-family:var(--font-body);font-weight:400}
.mobilenav-foot{margin-top:auto;padding:20px;display:grid;gap:10px;border-top:1px solid var(--line)}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;background:linear-gradient(180deg,var(--cream-2) 0%,var(--cream) 100%)}
.hero .wrap{position:relative;z-index:2}
.hero-grid{display:grid;grid-template-columns:1.02fr 1fr;gap:clamp(24px,3vw,56px);align-items:center;padding-block:clamp(40px,4.5vw,76px)}
.hero h1{max-width:20ch}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.hero-art{position:relative}
.hero-leaf{position:absolute;pointer-events:none;opacity:.5;z-index:1}
.hero-leaf.tl{top:-30px;left:-70px;width:230px;transform:rotate(-14deg)}
.hero-leaf.br{bottom:-50px;right:-60px;width:260px;transform:rotate(160deg)}

.trust-card{
  display:flex;flex-wrap:wrap;align-items:center;gap:0;margin-top:34px;
  background:rgba(255,255,255,.72);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--sh-1);overflow:hidden;
}
.trust-card .ti{display:flex;align-items:center;gap:9px;padding:13px 14px;flex:1 1 0;min-width:0}
.trust-card .ti + .ti{border-left:1px solid var(--line-2)}
.trust-card .ti svg{width:23px;height:23px;color:var(--green-600);flex:none}
.trust-card .ti .tt{min-width:0}
.trust-card .ti b{display:block;font-family:var(--font-display);font-size:.82rem;font-weight:600;color:var(--green-800);line-height:1.2;white-space:nowrap}
.trust-card .ti span{display:block;font-size:.7rem;color:var(--muted);line-height:1.3}

/* Marquee strip */
.strip{background:var(--cream-2);border-block:1px solid var(--line)}
.strip .wrap{display:flex;flex-wrap:wrap}
.strip .si{flex:1 1 200px;display:flex;align-items:center;justify-content:center;gap:11px;padding:20px 14px;font-size:.9rem;color:var(--ink-2)}
.strip .si + .si{border-left:1px solid var(--line-2)}
.strip .si svg{width:24px;height:24px;color:var(--green-600);flex:none}

/* ---------- Category cards ---------- */
.cat-card{
  display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;box-shadow:var(--sh-1);
  transition:transform .22s var(--ease),box-shadow .22s var(--ease);
}
.cat-card:hover{transform:translateY(-4px);box-shadow:var(--sh-2)}
.cat-card .cc-body{padding:22px 22px 8px}
.cat-card h3{font-size:1.18rem;margin-bottom:6px}
.cat-card p{font-size:.88rem;color:var(--muted);line-height:1.5}
.cat-card .cc-art{margin-top:auto;padding:8px 18px 0;aspect-ratio:1/.82;display:grid;place-items:center;overflow:hidden}
.cat-card .cc-art img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.cat-card .cc-foot{padding:14px 22px;border-top:1px solid var(--line-2);background:var(--cream-2)}

/* ---------- Product visual (SVG pack renders) ---------- */
.pv{display:grid;place-items:center;width:100%;aspect-ratio:1/1;background:var(--cream-2);border-radius:var(--r-sm);overflow:hidden}
.pv img{width:100%;height:100%;object-fit:cover}
.pv svg{width:80%;height:80%}
.pv-contain img{object-fit:contain;padding:8%}

/* ---------- Product cards ---------- */
.prod-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--sh-1);transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s var(--ease);position:relative}
.prod-card:hover{transform:translateY(-3px);box-shadow:var(--sh-2);border-color:var(--gold-200)}
.prod-card .pc-art{position:relative;background:var(--cream-2);aspect-ratio:1/.86;overflow:hidden}
.prod-card .pc-art img{width:100%;height:100%;object-fit:cover;transition:transform .4s var(--ease)}
.prod-card:hover .pc-art img{transform:scale(1.035)}
.prod-card .pc-art .pv{aspect-ratio:1/.86;border-radius:0}
.prod-card .pc-flags{position:absolute;top:10px;left:10px;display:flex;flex-direction:column;gap:6px;align-items:flex-start;z-index:2}
.prod-card .pc-body{padding:16px 18px;display:flex;flex-direction:column;gap:6px;flex:1}
.prod-card .pc-sku{font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-2);font-family:var(--font-display)}
.prod-card h3{font-size:1.02rem;line-height:1.28}
.prod-card .pc-meta{font-size:.8rem;color:var(--muted)}
.prod-card .pc-price{margin-top:auto;padding-top:10px;display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.prod-card .pc-price b{font-family:var(--font-display);font-size:1.12rem;color:var(--green-800)}
.prod-card .pc-price span{font-size:.76rem;color:var(--muted)}
.prod-card .pc-foot{padding:0 18px 18px;display:flex;gap:8px}
.prod-card .pc-foot .btn{flex:1}

/* ---------- Complete the Drink ---------- */
.cdt{background:var(--green-800);border-radius:var(--r-lg);overflow:hidden;color:#E7EBE3;position:relative}
.cdt::after{content:"";position:absolute;inset:0;background:radial-gradient(1000px 380px at 12% 0%,rgba(181,161,102,.16),transparent 62%);pointer-events:none}
.cdt-grid{display:grid;grid-template-columns:.86fr 1.14fr;gap:clamp(20px,2.6vw,44px);padding:clamp(22px,2.6vw,40px);position:relative;z-index:1}
.cdt-visual{border-radius:var(--r);overflow:hidden;background:rgba(255,255,255,.06);display:flex;flex-direction:column}
.cdt-visual .cdt-img{aspect-ratio:1/1.12;display:grid;place-items:center;padding:8%}
.cdt-visual .cdt-img svg,.cdt-visual .cdt-img img{width:100%;height:100%;object-fit:contain}
.cdt-visual .cdt-cap{padding:0 18px 20px;text-align:center}
.cdt h2{color:#F7F5EE}
.cdt-benefits{display:grid;gap:11px;margin-top:20px}
.cdt-benefits li{list-style:none;display:flex;gap:11px;align-items:flex-start;font-size:.92rem;color:#CFD8C9}
.cdt-benefits svg{width:19px;height:19px;color:var(--gold);flex:none;margin-top:2px}

.cdt-table{width:100%;border-radius:var(--r);overflow:hidden}
.cdt-table thead th{
  font-family:var(--font-display);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gold);font-weight:600;text-align:left;padding:0 12px 10px;
}
.cdt-row{background:rgba(255,255,255,.055);transition:background .16s}
.cdt-row:hover{background:rgba(255,255,255,.09)}
.cdt-row td{padding:12px;vertical-align:middle;border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08)}
.cdt-row td:first-child{border-left:1px solid rgba(255,255,255,.08);border-radius:var(--r-sm) 0 0 var(--r-sm)}
.cdt-row td:last-child{border-right:1px solid rgba(255,255,255,.08);border-radius:0 var(--r-sm) var(--r-sm) 0}
.cdt-table tbody tr.sp td{padding:0;height:8px;border:0;background:none}
.cdt-row.is-off{opacity:.42}
.cdt-row.is-out{opacity:.6}
.cdt-prod{display:flex;align-items:center;gap:11px;min-width:0}
.cdt-thumb{width:44px;height:44px;border-radius:var(--r-xs);background:rgba(255,255,255,.9);flex:none;overflow:hidden;display:grid;place-items:center}
.cdt-thumb img{width:100%;height:100%;object-fit:cover}
.cdt-thumb svg{width:78%;height:78%}
.cdt-prod .nm{display:block;font-size:.9rem;font-weight:500;color:#F1F4EC;line-height:1.25}
.cdt-prod .rl{display:block;font-size:.72rem;color:#A9B7A5;margin-top:3px;line-height:1.35}
.cdt-foot{display:flex;flex-wrap:wrap;align-items:center;gap:16px;justify-content:flex-end;margin-top:22px}
.cdt-total{text-align:right;margin-right:auto}
.cdt-total .lbl{display:block;font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:#A9B7A5;font-family:var(--font-display)}
.cdt-total .amt{display:block;font-family:var(--font-display);font-size:1.7rem;font-weight:700;color:#F7F5EE;line-height:1.15;margin-top:2px}
.cdt-note{font-size:.78rem;color:#9EAD9B;margin-top:12px}

/* checkbox (dark) */
.chk{position:relative;display:inline-flex;flex:none;width:20px;height:20px}
.chk input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.chk .box{width:20px;height:20px;border-radius:5px;border:1.5px solid rgba(255,255,255,.4);display:grid;place-items:center;transition:all .15s}
.chk input:checked + .box{background:var(--gold);border-color:var(--gold)}
.chk .box svg{width:12px;height:12px;color:#241E10;opacity:0;transform:scale(.6);transition:all .15s}
.chk input:checked + .box svg{opacity:1;transform:scale(1)}
.chk input:disabled + .box{opacity:.35}
.chk-light .box{border-color:var(--line);background:#fff}
.chk-light input:checked + .box{background:var(--green-700);border-color:var(--green-700)}
.chk-light .box svg{color:#fff}

/* ---------- Qty stepper ---------- */
.qty{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:var(--r-xs);background:#fff;overflow:hidden}
.qty button{width:32px;height:34px;display:grid;place-items:center;color:var(--ink-2);transition:background .14s}
.qty button:hover{background:var(--green-50)}
.qty button svg{width:13px;height:13px}
.qty input{width:44px;height:34px;text-align:center;border:0;border-inline:1px solid var(--line);font-size:.9rem;font-variant-numeric:tabular-nums;background:#fff;-moz-appearance:textfield}
.qty input::-webkit-outer-spin-button,.qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.qty-dark{border-color:rgba(255,255,255,.22);background:rgba(255,255,255,.06)}
.qty-dark button{color:#DDE4D8}
.qty-dark button:hover{background:rgba(255,255,255,.12)}
.qty-dark input{background:transparent;color:#F1F4EC;border-color:rgba(255,255,255,.22)}
.qty-sm button{width:28px;height:30px}
.qty-sm input{width:38px;height:30px;font-size:.84rem}

/* ---------- Forms ---------- */
.field{display:flex;flex-direction:column;gap:6px}
.field > label,.lbl{font-size:.82rem;font-weight:500;color:var(--ink-2);font-family:var(--font-display)}
.req{color:var(--red)}
.input,.select,.textarea{
  width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:var(--r-xs);
  background:#fff;font-size:.92rem;color:var(--ink);transition:border-color .15s,box-shadow .15s;
}
.input:focus,.select:focus,.textarea:focus{outline:0;border-color:var(--green-500);box-shadow:0 0 0 3px rgba(78,107,72,.13)}
.textarea{min-height:110px;resize:vertical;line-height:1.55}
.select{
  appearance:none;padding-right:36px;cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4.5 6 8.5l4-4' stroke='%236B7569' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:12px;
}
.select-sm{padding:7px 30px 7px 10px;font-size:.82rem;background-position:right 9px center}
.help{font-size:.78rem;color:var(--muted)}
.err{font-size:.78rem;color:var(--red)}
.input.is-err,.select.is-err,.textarea.is-err{border-color:var(--red)}
.check-row{display:flex;gap:10px;align-items:flex-start;font-size:.88rem;color:var(--ink-2);cursor:pointer}
.check-row input[type=checkbox],.check-row input[type=radio]{width:17px;height:17px;margin:2px 0 0;accent-color:var(--green-600);flex:none;cursor:pointer}
.dropzone{
  border:1.5px dashed var(--green-300);border-radius:var(--r);background:var(--green-50);
  padding:28px 20px;text-align:center;cursor:pointer;transition:all .16s;
}
.dropzone:hover,.dropzone.is-over{background:var(--green-100);border-color:var(--green-600)}
.dropzone svg{width:30px;height:30px;color:var(--green-600);margin:0 auto 10px}
.fieldset{border:1px solid var(--line);border-radius:var(--r);padding:20px;margin:0}
.fieldset legend{font-family:var(--font-display);font-size:.78rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-600);padding-inline:8px}

/* ---------- Tables ---------- */
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:var(--r);background:#fff}
.tbl{width:100%;min-width:600px;font-size:.9rem}
.tbl th{
  text-align:left;padding:12px 14px;background:var(--cream-2);border-bottom:1px solid var(--line);
  font-family:var(--font-display);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:600;white-space:nowrap;
}
.tbl td{padding:14px;border-bottom:1px solid var(--line-2);vertical-align:middle}
.tbl tbody tr:last-child td{border-bottom:0}
.tbl tbody tr:hover{background:var(--cream-2)}
.tbl .num{text-align:right;font-variant-numeric:tabular-nums}
.spec-tbl{width:100%;font-size:.9rem}
.spec-tbl th,.spec-tbl td{padding:11px 0;border-bottom:1px solid var(--line-2);text-align:left;vertical-align:top}
.spec-tbl th{width:42%;color:var(--muted);font-weight:500;font-family:var(--font-body);font-size:.86rem}
.spec-tbl td{color:var(--ink-2)}

/* ---------- Breadcrumb / page head ---------- */
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:7px;font-size:.8rem;color:var(--muted);padding-block:16px}
.crumbs a:hover{color:var(--green-700)}
.crumbs .sep{opacity:.5}
.crumbs [aria-current]{color:var(--ink-2)}
.page-head{background:var(--cream-2);border-bottom:1px solid var(--line)}
.page-head .ph-inner{padding-block:clamp(24px,3vw,48px);max-width:760px}

/* ---------- Feature / icon blocks ---------- */
.feat{display:flex;gap:14px;align-items:flex-start}
.feat .fi{width:46px;height:46px;flex:none;border-radius:var(--r-sm);background:var(--gold-50);color:var(--green-600);display:grid;place-items:center}
.feat .fi svg{width:24px;height:24px}
.feat h4{font-size:1rem;margin-bottom:4px}
.feat p{font-size:.86rem;color:var(--muted);line-height:1.5}
.feat-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0}
.feat-row .feat{padding:0 26px}
.feat-row .feat + .feat{border-left:1px solid var(--line)}

/* Steps */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;align-items:start}
.step{position:relative;padding:0 20px;display:flex;gap:14px;align-items:flex-start}
.step:not(:last-child)::after{
  content:"";position:absolute;top:19px;right:-14px;width:28px;height:2px;
  background:repeating-linear-gradient(90deg,var(--gold) 0 5px,transparent 5px 10px);
}
.step .sn{
  width:38px;height:38px;flex:none;border-radius:var(--r-full);background:var(--green-800);color:#F7F5EE;
  display:grid;place-items:center;font-family:var(--font-display);font-weight:700;font-size:.95rem;
}
.step h4{font-size:.95rem;margin-bottom:4px}
.step p{font-size:.83rem;color:var(--muted);line-height:1.45}

/* Collage */
/* ---------- Photo slider ----------
   Replaces the old photo collages: one big frame reads better than three
   small ones, and it holds more of the shoot.
   Before the script runs the images are still in the DOM as a plain column,
   so a failed script degrades to "all the photos" rather than to nothing. */
.slider{position:relative;border-radius:var(--r);overflow:hidden;background:var(--cream-2);
  outline-offset:3px}
.slider > img{width:100%;height:auto;display:block;border-radius:var(--r-sm)}
.slider > img + img{margin-top:12px}
.sl-view{overflow:hidden;border-radius:var(--r)}
.sl-track{display:flex;will-change:transform;transition:transform .42s var(--ease)}
.sl-frame{flex:0 0 100%;min-width:0}
.sl-frame img{display:block;width:100%;height:100%;aspect-ratio:4/3;object-fit:cover;
  background:var(--cream-2);user-select:none;-webkit-user-drag:none}

/* arrows sit on the frame, not beside it — the photo keeps the full column */
.sl-nav{position:absolute;top:calc(50% - 34px);transform:translateY(-50%);z-index:2;
  width:40px;height:40px;display:grid;place-items:center;border:0;cursor:pointer;
  border-radius:var(--r-full);background:rgba(255,255,255,.9);color:var(--green-800);
  box-shadow:0 2px 10px rgba(29,59,39,.18);transition:background .15s,transform .15s}
.sl-nav svg{width:19px;height:19px}
.sl-nav:hover{background:#fff;transform:translateY(-50%) scale(1.06)}
.sl-nav:active{transform:translateY(-50%) scale(.96)}
.sl-prev{left:12px}
.sl-next{right:12px}

.sl-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:12px 2px 0}
.sl-cap{margin:0;font-size:.82rem;line-height:1.45;color:var(--muted);min-width:0}
.sl-dots{display:flex;gap:7px;flex:none}
.sl-dot{width:8px;height:8px;padding:0;border:0;border-radius:var(--r-full);cursor:pointer;
  background:var(--line);transition:background .15s,width .2s var(--ease)}
.sl-dot:hover{background:var(--green-300,#A9BFA6)}
.sl-dot.is-on{width:22px;background:var(--gold-600)}

/* one photo needs no chrome */
.slider.is-single .sl-nav,.slider.is-single .sl-foot{display:none}

@media (max-width:900px){
  .sl-frame img{aspect-ratio:16/10}
  .sl-nav{width:36px;height:36px}
  .sl-prev{left:8px}
  .sl-next{right:8px}
  /* the caption wraps to its own line before it starts squeezing the dots */
  .sl-foot{flex-wrap:wrap;gap:8px}
  .sl-cap{flex:1 1 100%;order:2}
  .sl-dots{order:1;margin-inline:auto}
}
@media (prefers-reduced-motion: reduce){
  .sl-track{transition:none}
}

/* Cert badges */
.certs{display:flex;flex-wrap:wrap;gap:10px}
.cert{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border:1px solid var(--line);border-radius:var(--r-full);background:#fff;font-size:.8rem;font-weight:500;color:var(--ink-2)}
.cert svg{width:19px;height:19px;color:var(--green-600)}
.certs-dark .cert{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16);color:#DDE4D8}
.certs-dark .cert svg{color:var(--gold)}

/* ---------- Accordion / tabs ---------- */
.acc{border:1px solid var(--line);border-radius:var(--r);background:#fff;overflow:hidden}
.acc-item + .acc-item{border-top:1px solid var(--line-2)}
.acc-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 20px;text-align:left;font-family:var(--font-display);font-weight:600;font-size:.98rem;color:var(--green-800);transition:background .14s}
.acc-q:hover{background:var(--cream-2)}
.acc-q svg{width:16px;height:16px;flex:none;color:var(--gold-600);transition:transform .2s var(--ease)}
.acc-item.is-open .acc-q svg{transform:rotate(45deg)}
.acc-a{display:none;padding:0 20px 20px;color:var(--ink-2);font-size:.92rem;line-height:1.65}
.acc-item.is-open .acc-a{display:block}
.acc-a p + p{margin-top:10px}
.acc-a ul{padding-left:18px;margin-top:8px}
.acc-a li{margin-bottom:5px}

.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);overflow-x:auto;-webkit-overflow-scrolling:touch}
.tab{padding:12px 18px;font-family:var(--font-display);font-size:.88rem;font-weight:500;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap;transition:all .15s}
.tab:hover{color:var(--green-700)}
.tab.is-active{color:var(--green-800);border-bottom-color:var(--green-700);font-weight:600}
.tabpanel{display:none;padding-top:24px}
.tabpanel.is-active{display:block}

/* ---------- Showcase: a vertical tab rail beside one big panel ----------
   Collapses a long grid of picture cards into a single screen without
   dropping a word: every title stays on the rail, and the selected item
   gets the full photo and the full paragraph. Rides the existing
   [data-tabs] delegation — .tab / .tabpanel behave exactly as elsewhere. */
.showcase{display:grid;grid-template-columns:minmax(230px,290px) minmax(0,1fr);
  gap:clamp(20px,2.4vw,36px);align-items:start}

.tabs-side{display:flex;flex-direction:column;gap:2px;border-bottom:0;overflow:visible;
  border-inline-start:2px solid var(--line);box-shadow:none}
.tabs-side .tab{display:flex;flex-direction:column;gap:3px;align-items:flex-start;
  width:100%;text-align:left;white-space:normal;padding:11px 14px;
  border-bottom:0;margin-bottom:0;margin-inline-start:-2px;
  border-inline-start:2px solid transparent;border-radius:0 var(--r-sm) var(--r-sm) 0;
  line-height:1.35}
.tabs-side .tab span{font-family:var(--font-body);font-size:.74rem;font-weight:500;
  letter-spacing:.02em;color:var(--muted);text-transform:uppercase}
.tabs-side .tab:hover{background:rgba(29,59,39,.045)}
.tabs-side .tab.is-active{border-inline-start-color:var(--green-700);background:#fff;
  box-shadow:var(--sh-1)}
.tabs-side .tab.is-active span{color:var(--gold-600)}

.showcase .tabpanel{padding-top:0}
.sc-card{overflow:hidden}
.sc-media{position:relative}
.sc-media img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;background:var(--cream-2)}
.sc-tag{position:absolute;left:14px;bottom:14px;background:rgba(251,249,243,.95);box-shadow:var(--sh-1)}
.sc-body{padding:20px clamp(20px,2vw,28px) 24px}
.sc-body p{max-width:70ch}

/* the rail turns into a scrollable chip strip once it stops earning a column */
@media (max-width:880px){
  .showcase{grid-template-columns:minmax(0,1fr);gap:16px}
  .tabs-side{flex-direction:row;gap:4px;border-inline-start:0;
    border-bottom:1px solid var(--line);overflow-x:auto;-webkit-overflow-scrolling:touch;
    box-shadow:inset -14px 0 12px -13px rgba(28,40,28,.22)}
  .tabs-side .tab{width:auto;white-space:nowrap;margin-inline-start:0;padding:10px 14px;
    border-inline-start:0;border-bottom:2px solid transparent;margin-bottom:-1px;border-radius:0}
  .tabs-side .tab span{display:none}
  .tabs-side .tab.is-active{background:transparent;box-shadow:none;
    border-bottom-color:var(--green-700)}
  .sc-media img{aspect-ratio:16/10}
}

/* ---------- Flow split ----------
   Pairs a capped-measure vertical flow with the section head that introduces
   it. Without this the flow keeps its 76ch line length and leaves close to
   half the row empty on a wide monitor. */
.flow-split{display:grid;grid-template-columns:minmax(280px,0.72fr) minmax(0,1fr);
  gap:clamp(28px,4vw,72px);align-items:start}
.flow-aside{position:sticky;top:calc(var(--chrome-h,126px) + 28px)}
.flow-split .qc{padding-top:6px}
@media (max-width:960px){
  .flow-split{grid-template-columns:minmax(0,1fr);gap:28px}
  .flow-aside{position:static}
}

/* ---------- Toast / drawer / modal ---------- */
.toasts{position:fixed;bottom:20px;right:20px;z-index:120;display:flex;flex-direction:column;gap:10px;max-width:min(380px,calc(100vw - 40px))}
.toast{
  display:flex;gap:11px;align-items:flex-start;padding:14px 16px;background:var(--green-800);color:#EDF0E9;
  border-radius:var(--r-sm);box-shadow:var(--sh-3);font-size:.88rem;line-height:1.45;
  animation:toastIn .28s var(--ease);
}
.toast svg{width:18px;height:18px;flex:none;color:var(--gold);margin-top:1px}
.toast.err{background:var(--red)}
.toast.err svg{color:#fff}
@keyframes toastIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

.scrim{position:fixed;inset:0;background:rgba(22,32,22,.42);z-index:95;opacity:0;visibility:hidden;transition:all .25s var(--ease);backdrop-filter:blur(2px)}
.scrim.is-open{opacity:1;visibility:visible}
.drawer{
  position:fixed;top:0;right:0;bottom:0;width:min(440px,100vw);background:var(--cream-2);z-index:100;
  transform:translateX(100%);transition:transform .3s var(--ease);display:flex;flex-direction:column;box-shadow:var(--sh-3);
}
.drawer.is-open{transform:translateX(0)}
.drawer-head{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid var(--line);background:#fff}
.drawer-head h3{font-size:1.05rem}
.drawer-body{flex:1;overflow-y:auto;padding:16px 20px}
.drawer-foot{padding:18px 20px;border-top:1px solid var(--line);background:#fff;display:grid;gap:10px}
.mini-line{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--line-2)}
.mini-line .ml-art{width:58px;height:58px;flex:none;border-radius:var(--r-xs);overflow:hidden;background:#fff;border:1px solid var(--line-2);display:grid;place-items:center}
.mini-line .ml-art img{width:100%;height:100%;object-fit:cover}
.mini-line .ml-art svg{width:80%;height:80%}
.mini-line .ml-body{flex:1;min-width:0}
.mini-line .ml-nm{font-size:.88rem;font-weight:500;line-height:1.3;color:var(--green-800)}
.mini-line .ml-meta{font-size:.75rem;color:var(--muted);margin-top:2px}
.mini-line .ml-bot{display:flex;align-items:center;justify-content:space-between;margin-top:8px;gap:8px}
.sum-row{display:flex;justify-content:space-between;font-size:.9rem;padding:4px 0}
.sum-row.total{font-family:var(--font-display);font-weight:700;font-size:1.15rem;color:var(--green-800);padding-top:12px;margin-top:8px;border-top:1px solid var(--line)}

.modal{position:fixed;inset:0;z-index:110;display:grid;place-items:center;padding:20px;opacity:0;visibility:hidden;transition:all .22s var(--ease)}
.modal.is-open{opacity:1;visibility:visible}
.modal-panel{background:var(--cream-2);border-radius:var(--r-lg);width:min(620px,100%);max-height:88vh;overflow-y:auto;box-shadow:var(--sh-3);transform:translateY(10px);transition:transform .22s var(--ease)}
.modal.is-open .modal-panel{transform:none}
.modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:22px 24px 0}
.modal-body{padding:18px 24px 24px}

/* ---------- Empty state ---------- */
.empty{text-align:center;padding:56px 20px;color:var(--muted)}
.empty svg{width:52px;height:52px;color:var(--green-300);margin:0 auto 16px}

/* ---------- Footer ---------- */
.site-footer{background:var(--green-900);color:#B7C3B3;padding-top:clamp(40px,4vw,64px)}
.site-footer h4{font-family:var(--font-display);font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin-bottom:14px;font-weight:600}
.footer-grid{display:grid;grid-template-columns:1.4fr repeat(5,minmax(0,1fr));gap:28px}
.footer-grid ul li{list-style:none;margin-bottom:9px}
.footer-grid a{font-size:.86rem;transition:color .15s}
.footer-grid a:hover{color:#fff}
.footer-brand img{height:44px;margin-bottom:16px}
.footer-brand p{font-size:.84rem;line-height:1.6;max-width:34ch}
.social{display:flex;gap:10px;margin-top:18px}
.social a{width:34px;height:34px;border-radius:var(--r-xs);border:1px solid rgba(255,255,255,.16);display:grid;place-items:center;transition:all .16s}
.social a:hover{background:rgba(255,255,255,.1);border-color:var(--gold)}
.social svg{width:17px;height:17px}
.footer-bottom{margin-top:clamp(32px,3.4vw,48px);border-top:1px solid rgba(255,255,255,.1)}
.footer-bottom .wrap{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;justify-content:space-between;padding-block:18px;font-size:.78rem}
.footer-bottom .fb-mid{display:flex;gap:16px;color:#8FA08C;letter-spacing:.05em}

/* ---------- CTA band ---------- */
.cta-band{position:relative;background:var(--cream-2);border-block:1px solid var(--line);overflow:hidden}
.cta-band .wrap{position:relative;z-index:1;text-align:center;padding-block:clamp(40px,4vw,64px)}
.cta-leaf{position:absolute;opacity:.42;pointer-events:none}
.cta-leaf.l{left:-40px;top:50%;transform:translateY(-50%) scaleX(-1);width:220px}
.cta-leaf.r{right:-40px;top:50%;transform:translateY(-50%);width:220px}

/* ---------- Misc utilities ---------- */
.divider{height:1px;background:var(--line);margin-block:24px}
.gold-rule{width:56px;height:2px;background:var(--gold);margin-bottom:18px}
.gold-rule.center{margin-inline:auto}
.ratio-16-9{aspect-ratio:16/9;object-fit:cover;width:100%;border-radius:var(--r)}
.ratio-4-3{aspect-ratio:4/3;object-fit:cover;width:100%;border-radius:var(--r)}
.sticky-side{position:sticky;top:calc(var(--chrome-h) + 20px)}
.note{padding:14px 16px;border-radius:var(--r-sm);background:var(--gold-50);border:1px solid var(--gold-200);font-size:.86rem;color:var(--ink-2);line-height:1.55}
.note-green{background:var(--green-50);border-color:var(--green-100)}
.note b{color:var(--green-800)}
.kv{display:flex;justify-content:space-between;gap:16px;font-size:.88rem;padding:7px 0;border-bottom:1px dashed var(--line)}
.kv:last-child{border-bottom:0}
.kv .k{color:var(--muted)}
.kv .v{font-weight:500;color:var(--ink-2);text-align:right}
.tier-tbl td{padding:8px 0;font-size:.88rem;border-bottom:1px solid var(--line-2)}
.tier-tbl tr:last-child td{border-bottom:0}
.tier-tbl .save{color:var(--ok);font-weight:600;font-size:.8rem}
.recipe-steps{counter-reset:rs;display:grid;gap:14px}
.recipe-steps li{list-style:none;counter-increment:rs;display:flex;gap:13px;font-size:.92rem;line-height:1.55;color:var(--ink-2)}
.recipe-steps li::before{
  content:counter(rs);width:26px;height:26px;flex:none;border-radius:var(--r-full);
  background:var(--green-100);color:var(--green-700);display:grid;place-items:center;
  font-family:var(--font-display);font-weight:700;font-size:.78rem;
}
.ing-list{display:grid;gap:9px}
.ing-list li{list-style:none;display:flex;justify-content:space-between;gap:14px;font-size:.9rem;padding-bottom:9px;border-bottom:1px dashed var(--line)}
.ing-list li:last-child{border-bottom:0}
.ing-list .amt{font-variant-numeric:tabular-nums;color:var(--muted);white-space:nowrap}

/* Scroll shadow helper for wide tables on mobile */
.scroll-hint{display:none;font-size:.76rem;color:var(--muted-2);padding-top:8px}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:1080px){
  .g-5{grid-template-columns:repeat(3,minmax(0,1fr))}
  .g-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .feat-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 0}
  .feat-row .feat{padding:0 20px}
  .feat-row .feat:nth-child(odd){border-left:0}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 0}
  .step:nth-child(2)::after{display:none}
}
@media (max-width:960px){
  .mainnav,.header-actions .desk-only{display:none}
  .burger{display:inline-flex}
  .hero-grid{grid-template-columns:1fr;gap:32px}
  /* width:100% is required — margin-inline:auto disables grid stretch, and the art
     has no intrinsic width, so the item would collapse to zero. */
  .hero-art{order:-1;width:100%;max-width:520px;margin-inline:auto}
  .split,.split-40,.split-60{grid-template-columns:1fr}
  .cdt-grid{grid-template-columns:1fr}
  .cdt-visual{max-width:340px;margin-inline:auto}
  .footer-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:720px){
  .g-3,.g-4,.g-5{grid-template-columns:repeat(2,minmax(0,1fr))}
  .topbar-left{display:none}
  .topbar .wrap{justify-content:center}
  .strip .si{flex-basis:50%;border-left:0 !important;font-size:.82rem;padding:14px 8px}
  .strip .si:nth-child(n+3){border-top:1px solid var(--line-2)}
  .trust-card .ti{flex-basis:50%;border-left:0 !important}
  .trust-card .ti:nth-child(n+3){border-top:1px solid var(--line-2)}
  .steps{grid-template-columns:1fr;gap:22px}
  .step::after{display:none !important}
  .feat-row{grid-template-columns:1fr;gap:22px}
  .feat-row .feat{padding:0;border-left:0 !important}
  .cdt-foot{flex-direction:column;align-items:stretch}
  .cdt-total{text-align:left;margin-right:0}
  .cdt-foot .btn{width:100%}
  .scroll-hint{display:block}
  .drawer{width:100vw}
  .toasts{left:16px;right:16px;bottom:16px;max-width:none}
}
@media (max-width:520px){
  .wrap{padding-inline:16px}
  .g-2,.g-3,.g-4,.g-5{grid-template-columns:1fr}
  .prod-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:12px}
  .prod-card .pc-body{padding:12px 13px}
  .prod-card h3{font-size:.92rem}
  .prod-card .pc-foot{padding:0 13px 13px}
  .footer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .btn{padding:12px 18px;font-size:.78rem}
  .hero-cta .btn{flex:1 1 100%}
}

/* Sticky mobile add-to-cart bar (PDP) */
.mobile-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:80;background:#fff;border-top:1px solid var(--line);
  padding:10px 16px calc(10px + env(safe-area-inset-bottom));display:none;gap:12px;align-items:center;box-shadow:0 -4px 16px rgba(28,40,28,.08);
}
.mobile-bar .mb-price{font-family:var(--font-display);font-weight:700;color:var(--green-800);line-height:1.1}
.mobile-bar .mb-price span{display:block;font-size:.7rem;font-weight:400;color:var(--muted);letter-spacing:0;text-transform:none;font-family:var(--font-body)}
.mobile-bar .btn{flex:1}
@media (max-width:720px){
  body.has-mobile-bar{padding-bottom:74px}
  body.has-mobile-bar .mobile-bar{display:flex}
  /* keep the floating support button clear of the add-to-cart bar */
  body.has-mobile-bar .support-fab{bottom:88px}
}

/* Floating support button */
.support-fab{
  position:fixed;right:18px;bottom:18px;z-index:70;display:flex;align-items:center;gap:9px;
  padding:12px 18px;border-radius:var(--r-full);background:var(--green-800);color:#F7F5EE;
  box-shadow:var(--sh-3);font-family:var(--font-display);font-size:.84rem;font-weight:600;
  transition:transform .18s var(--ease),background .18s;
}
.support-fab:hover{transform:translateY(-2px);background:var(--green-700)}
.support-fab svg{width:19px;height:19px}
@media (max-width:520px){.support-fab span{display:none}.support-fab{padding:14px;right:14px;bottom:14px}}

@media print{
  .site-header,.topbar,.site-footer,.support-fab,.mobile-bar,.drawer,.scrim{display:none !important}
  body{background:#fff}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
}

/* ==========================================================================
   Post-audit fixes — mobile layout, tap targets and scroll affordance.
   Kept as one block so the origin of each override is obvious.
   ========================================================================== */

/* 1. Grid children default to min-width:auto, so the 560px-wide Complete the
      Drink table stretched its track past the viewport and .cdt{overflow:hidden}
      clipped the totals and the Add-selected button off-screen. */
.cdt-grid > *{min-width:0}
.cdt-visual{min-width:0}

/* 2. Scroll affordance for any wide table, at every width where it can overflow
      (the text hint was only shown below 720px, so tablets got silent clipping). */
.tbl-wrap{position:relative;box-shadow:inset -14px 0 12px -13px rgba(28,40,28,.28)}
@media (max-width:960px){.scroll-hint{display:block}}

/* 3. Tap targets. The 44px hit area is layered over the 20px visual control so
      nothing moves, and .btn-sm gets a real minimum height between 521–960px
      where the phone-only .btn padding override did not reach. */
.chk input{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:44px;height:44px;min-width:44px;min-height:44px;
}
@media (max-width:960px){
  .btn-sm{padding:11px 16px;min-height:40px}
  .qty button{width:38px;height:40px}
  .qty input{height:40px;width:48px}
  .qty-sm button{width:34px;height:36px}
  .qty-sm input{height:36px;width:42px}
  .icon-btn{width:44px;height:44px}
}

/* 4. The two card actions are nowrap and both flex:1; at 2-up on a phone the
      pair exceeded the card and "Details" was clipped by .prod-card overflow. */
@media (max-width:560px){
  .prod-card .pc-foot{flex-direction:column;gap:6px}
  .prod-card .pc-foot .btn{width:100%}
}

/* 5. The decorative wreath watermarks are sized for a desktop gutter; at phone
      widths they sat directly behind body copy and over breadcrumbs. */
@media (max-width:820px){
  .cta-leaf{width:150px;opacity:.2}
  .cta-leaf.l{left:-70px}
  .cta-leaf.r{right:-70px}
  .hero-leaf.tl{width:150px;left:-60px;top:-20px;opacity:.3}
  .hero-leaf.br{width:150px;opacity:.3}
}
@media (max-width:620px){
  .cta-leaf,.hero-leaf.br{display:none}
}

/* 6. .tier-tbl had no th rule, so a row marker overlapped the first cell. */
.tier-tbl th{padding:8px 0;font-size:.78rem;font-weight:600;color:var(--muted);text-align:left;border-bottom:1px solid var(--line)}
.tier-tbl td:first-child,.tier-tbl th:first-child{padding-left:8px}

/* --- Second-pass fixes (verification sweep) ------------------------------- */

/* .cta-leaf.l/.r carry two classes, so the single-class width override in the
   820px block never won and the wreaths stayed 220px behind CTA body copy. */
@media (max-width:820px){
  .cta-leaf.l,.cta-leaf.r{width:150px}
  /* clear the breadcrumb on about.html / oem.html rather than sit behind it */
  .hero-leaf.tl{top:-56px;left:-86px;opacity:.22}
}

/* Horizontal tab strips scroll on narrow screens with no affordance at all. */
.tabs{box-shadow:inset -14px 0 12px -13px rgba(28,40,28,.22)}

/* .qty-sm is the stepper used in cart lines and Complete the Drink rows —
   the primary controls of the acceptance demo. Give them a real 40px target. */
@media (max-width:960px){
  .qty-sm button{width:38px;height:40px}
  .qty-sm input{height:40px;width:44px}
}

/* Between ~960px and ~1100px the nav, the quote button and the icon buttons
   together exceed the header and the CTA was being clipped. */
@media (min-width:961px) and (max-width:1100px){
  .header-actions .icon-btn.desk-only{display:none}
  .header-actions .btn{padding:10px 14px;font-size:.72rem}
}

/* --- Wholesale treatment -------------------------------------------------
   Trade pricing is gated, so the card leads with specification rather than a
   price tag, and the gate itself has to read as a credential prompt, not as a
   disabled control. */
.pricegate{
  display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border-radius:var(--r-xs);
  background:var(--gold-50);border:1px dashed var(--gold-200);color:var(--gold-600);
  font-family:var(--font-display);font-size:.76rem;font-weight:600;letter-spacing:.02em;
  white-space:nowrap;transition:border-color .15s,background .15s;
}
.pricegate:hover{background:#F1E9D2;border-color:var(--gold)}
.pricegate svg{width:14px;height:14px;flex:none}
.cdt .pricegate{background:rgba(181,161,102,.16);border-color:rgba(181,161,102,.45);color:var(--gold)}

.pc-spec{margin:8px 0 0;display:grid;gap:4px}
.pc-spec > div{display:flex;gap:8px;justify-content:space-between;font-size:.78rem;line-height:1.35}
.pc-spec dt{color:var(--muted-2);flex:none}
.pc-spec dd{margin:0;color:var(--ink-2);text-align:right;font-variant-numeric:tabular-nums}
.prod-card .pc-price{padding-top:12px;margin-top:10px;border-top:1px solid var(--line-2)}

/* Trade-terms strip used on catalogue and product pages */
.terms-strip{
  display:flex;flex-wrap:wrap;gap:0;border:1px solid var(--line);border-radius:var(--r);
  background:#fff;overflow:hidden;
}
.terms-strip .ts{flex:1 1 180px;min-width:0;padding:14px 16px;display:flex;gap:10px;align-items:flex-start}
.terms-strip .ts + .ts{border-left:1px solid var(--line-2)}
.terms-strip .ts svg{width:20px;height:20px;color:var(--green-600);flex:none;margin-top:1px}
.terms-strip .ts b{display:block;font-family:var(--font-display);font-size:.82rem;color:var(--green-800);line-height:1.25}
.terms-strip .ts span{display:block;font-size:.74rem;color:var(--muted);line-height:1.4;margin-top:2px}
@media (max-width:720px){
  .terms-strip .ts{flex-basis:100%;border-left:0 !important}
  .terms-strip .ts + .ts{border-top:1px solid var(--line-2)}
}

/* Order-minimum notice in the cart / order summary */
.minorder{
  display:flex;gap:10px;align-items:flex-start;padding:13px 15px;border-radius:var(--r-sm);
  background:var(--amber-50);border:1px solid #EBDCBC;font-size:.84rem;color:var(--ink-2);line-height:1.5;
}
.minorder.is-met{background:var(--ok-50);border-color:#CFE4D3}
.minorder svg{width:18px;height:18px;flex:none;margin-top:1px;color:var(--amber)}
.minorder.is-met svg{color:var(--ok)}

/* --- Real photography ----------------------------------------------------
   Category cards and drink solutions now carry photographs; they need to fill
   their frame rather than sit letterboxed inside it, and the multiply blend
   used for the flat label crops would grey a photograph down. */
/* The photographs are now cropped to frame the product, so the art box matches
   their ratio exactly and nothing has to be cut away a second time. */
.cat-card .cc-art{padding:0;aspect-ratio:900/877;align-self:stretch}
.cat-card .cc-art img{object-fit:cover;object-position:center;mix-blend-mode:normal}
.cdt-visual.has-photo .cdt-img{padding:0;aspect-ratio:4/3}
.cdt-visual.has-photo .cdt-img img{width:100%;height:100%;object-fit:cover;border-radius:var(--r) var(--r) 0 0}
.cdt-visual.has-photo .cdt-cap{padding-top:16px}

/* The category photographs all place their subject in the lower third under an
   airy leaf top, so a centred cover crop cuts the product in half. */
/* object-position tuning removed — the crop frames the product now */
/* Keep the gate chip compact inside data tables. */
.cdt-table .pricegate,.tbl .pricegate{padding:5px 9px;font-size:.71rem;gap:5px}
.cdt-table .pricegate svg,.tbl .pricegate svg{width:12px;height:12px}

/* --- Final polish -------------------------------------------------------- */

/* 1+2. Touch targets that the per-page agents could not fix without making the
   same shared component behave differently from page to page. */
@media (max-width:960px){
  .pricegate{min-height:40px}
  .cdt-table .pricegate,.tbl .pricegate{min-height:36px}
}
@media (max-width:520px){
  .btn{min-height:40px}
  .btn-sm{min-height:40px}
}

/* 4. Card art read inconsistently: photographed SKUs bleed to the card edge
   while SVG pack renders floated small on a cream ground. Scale the renders up
   so both treatments carry the same visual weight in a grid. */
.prod-card .pc-art .pv svg{width:94%;height:94%}
.cat-card .cc-art .pv svg,.pv-contain svg{width:88%;height:88%}

/* Category titles run to one or two lines depending on the name, which made the
   art box of the short one taller than its neighbours. Reserve two lines so the
   four cards share an identical structure. */
.cat-card h3{min-height:2.5em}
.cat-card p{min-height:2.7em}
@media (max-width:520px){
  .cat-card h3,.cat-card p{min-height:0}
}

/* ==========================================================================
   Category bar — the primary navigation for a wholesale buyer.
   A green strip of product lines under the logo row, with the current line
   held in a solid block, as on the trade sites buyers already use.
   ========================================================================== */
.catbar{background:var(--green-100);border-bottom:2px solid var(--green-600);position:relative;z-index:55}
.catbar .wrap{padding-inline:6px}
.cb-list{display:flex;align-items:stretch;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
.cb-list::-webkit-scrollbar{display:none}
.cb-item{list-style:none;flex:none}
.cb-item > a{
  display:flex;align-items:center;gap:6px;height:100%;padding:13px 18px;
  font-family:var(--font-display);font-size:.82rem;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;color:var(--green-700);
  white-space:nowrap;transition:background .15s,color .15s;
}
.cb-item > a:hover{background:var(--green-300);color:#12291A}
.cb-item.is-active > a{background:var(--green-700);color:#F7F5EE}
.cb-item.is-active > a:hover{background:var(--green-800);color:#fff}
.cb-caret{width:11px;height:11px;opacity:.65;flex:none;transition:transform .18s var(--ease)}
.cb-item.is-open .cb-caret{transform:rotate(180deg)}

/* The drop-down is a shelf, not a list: it spans the bar and fronts every
   sub-category with one of its products. Anchored to the bar rather than to
   the button so a nine-tile family still opens inside the page. */
.cb-menu{
  position:absolute;top:100%;left:0;right:0;background:#fff;
  border-top:2px solid var(--green-600);border-bottom:1px solid var(--line);
  box-shadow:var(--sh-3);
  opacity:0;visibility:hidden;transform:translateY(-5px);
  transition:opacity .16s var(--ease),transform .16s var(--ease),visibility .16s;
  z-index:60;padding:22px 0 26px;
}
.cb-item.is-open .cb-menu{opacity:1;visibility:visible;transform:translateY(0)}
.cb-tiles{
  max-width:var(--wrap);margin-inline:auto;padding-inline:clamp(16px,2.2vw,44px);
  display:flex;flex-wrap:wrap;gap:8px 4px;justify-content:flex-start;
}
.cb-tile{
  flex:0 0 auto;width:126px;padding:10px 6px 12px;border-radius:var(--r-sm);
  display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;
  transition:background .13s;
}
.cb-tile:hover{background:var(--green-50)}
.cbt-art{
  width:74px;height:74px;display:grid;place-items:center;
  border-radius:var(--r-full);background:var(--cream-2);overflow:hidden;
}
.cbt-art svg,.cbt-art img{width:100%;height:100%;object-fit:cover;display:block}
.cbt-art svg{padding:4px}
.cbt-lbl{
  font-family:var(--font-display);font-size:.8rem;font-weight:600;line-height:1.28;
  color:var(--green-700);white-space:normal;
}
.cb-tile:hover .cbt-lbl{color:var(--green-800)}
.cbt-n{font-size:.7rem;color:var(--muted-2);font-variant-numeric:tabular-nums;margin-top:-4px}
.cb-tile-all .cbt-art{background:var(--green-100);box-shadow:inset 0 0 0 2px var(--green-300)}
.cb-tile-all .cbt-lbl{color:var(--green-800)}

@media (max-width:900px){
  .cb-menu{padding:16px 0 18px}
  .cb-tiles{gap:6px 2px}
  .cb-tile{width:104px;padding:8px 4px 10px}
  .cbt-art{width:62px;height:62px}
  .cbt-lbl{font-size:.75rem}
}


/* header search sits between the logo and the actions */
.hdr-search{
  flex:1 1 auto;max-width:440px;margin-inline:auto;position:relative;
  display:flex;align-items:center;
}
.hdr-search svg{position:absolute;left:12px;width:17px;height:17px;color:var(--muted-2);pointer-events:none}
.hdr-search input{
  width:100%;padding:10px 14px 10px 37px;border:1px solid var(--line);border-radius:var(--r-full);
  background:#fff;font-size:.88rem;transition:border-color .15s,box-shadow .15s;
}
.hdr-search input:focus{outline:0;border-color:var(--green-500);box-shadow:0 0 0 3px rgba(78,107,72,.13)}

@media (max-width:1180px){
  .cb-item > a{padding:12px 13px;font-size:.76rem}
  .hdr-search{max-width:300px}
}
@media (max-width:960px){
  /* the strip stays, but scrolls; dropdowns collapse into the mobile drawer */
  .hdr-search{display:none}
  .catbar .wrap{padding-inline:0}
  .cb-list{padding-inline:8px}
  .cb-item > a{padding:11px 13px;font-size:.75rem;min-height:42px}
  .cb-menu{display:none}
  .cb-caret{display:none}
}

/* "Also stocked" — the non-ingredient lines, present but not competing with
   the four photographed ingredient categories above them. */
.also-strip{display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  border:1px solid var(--line);border-radius:var(--r);background:#fff;padding:14px 18px}
.also-lbl{font-family:var(--font-display);font-size:.72rem;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--gold-600);flex:none}
.also-list{display:flex;gap:10px;flex:1 1 auto;flex-wrap:wrap}
.also-item{display:flex;align-items:center;gap:11px;flex:1 1 210px;min-width:0;
  padding:9px 12px;border:1px solid var(--line-2);border-radius:var(--r-sm);
  background:var(--cream-2);transition:border-color .15s,background .15s}
.also-item:hover{border-color:var(--green-300);background:var(--green-50)}
.also-item .ai-art{width:36px;height:36px;flex:none;display:grid;place-items:center}
.also-item .ai-art svg{width:100%;height:100%}
.also-item .ai-txt{min-width:0;flex:1 1 auto}
.also-item b{display:block;font-family:var(--font-display);font-size:.85rem;color:var(--green-800);line-height:1.25}
.also-item .ai-txt span{display:block;font-size:.73rem;color:var(--muted);line-height:1.35}
.also-item > svg{width:15px;height:15px;color:var(--muted-2);flex:none}
@media (max-width:720px){
  .also-strip{flex-direction:column;align-items:stretch;gap:12px}
  .also-item{flex-basis:100%}
}

/* ==========================================================================
   Wide-screen layout pass
   The hero and the credibility strip run edge to edge; at 1900px+ the boxed
   1240 container underneath made everything below look like a narrow column
   floating in empty paper. The visual sections now match the hero.
   ========================================================================== */

/* Full-bleed container for image-led sections — no max-width, just a gutter. */
.wrap-flush{
  width:100%;max-width:2200px;margin-inline:auto;   /* stop stretching on 4K */
  padding-inline:clamp(16px,2.2vw,44px);
}

/* The category row sits directly under the trade-terms note; the stacked
   section paddings put ~136px of dead space between them. */
.section-tight{padding-block:clamp(20px,1.8vw,32px) clamp(40px,3.4vw,60px)}

/* Credibility strip — it is the first thing under the hero and was set at
   footnote size on a 1920 screen. */
.strip .si{padding:26px 18px;font-size:1.02rem;gap:14px}
.strip .si svg{width:30px;height:30px}
@media (min-width:1500px){
  .strip .si{padding:30px 20px;font-size:1.08rem}
  .strip .si svg{width:32px;height:32px}
}
@media (max-width:720px){
  .strip .si{font-size:.88rem;padding:16px 10px;gap:10px}
  .strip .si svg{width:24px;height:24px}
}

/* Cards get a little more air once the row is full width. */
@media (min-width:1500px){
  .cat-card .cc-body{padding:26px 26px 10px}
  .cat-card h3{font-size:1.3rem}
  .cat-card p{font-size:.94rem}
  .cat-card .cc-foot{padding:16px 26px}
}

/* ==========================================================================
   Sticky chrome — the logo row and the category bar pin together so the
   navigation stays reachable while a buyer scrolls a long catalogue. The thin
   utility strip above is allowed to scroll away; it is not navigation.
   ========================================================================== */
/* The mount div would otherwise be the sticky element's containing block, and
   it is only ~150px tall — the chrome would unstick as soon as you scrolled
   past it. display:contents removes that box so body becomes the container. */
#site-header{display:contents}
.chrome-sticky{
  position:sticky;top:0;z-index:60;
  box-shadow:0 1px 0 rgba(28,40,28,.04);
}
/* the bar sits on the sticky layer, so it needs its own opaque ground */
.chrome-sticky .catbar{background:var(--green-100)}
.chrome-sticky.is-stuck{box-shadow:0 6px 18px rgba(28,40,28,.10)}
/* Compact the row slightly once pinned so it eats less of the viewport. */
.chrome-sticky.is-stuck .site-header .wrap{min-height:62px}
.chrome-sticky.is-stuck .brand img{height:38px}
@media (prefers-reduced-motion:no-preference){
  .chrome-sticky .site-header .wrap,.chrome-sticky .brand img{transition:min-height .18s var(--ease),height .18s var(--ease)}
}

/* ==========================================================================
   Header search — was a bare pill with no affordance to act on. Now a proper
   catalogue search: quieter field, brand-green icon, explicit Search button.
   ========================================================================== */
.hdr-search{
  /* fills every pixel between the logo and the header actions */
  flex:1 1 auto;min-width:0;max-width:none;margin-inline:0;position:relative;
  display:flex;align-items:center;
  background:var(--cream-2);border:1px solid var(--line);border-radius:var(--r-sm);
  transition:border-color .15s,box-shadow .15s,background .15s;
}
.hdr-search:focus-within{background:#fff;border-color:var(--green-500);box-shadow:0 0 0 3px rgba(78,107,72,.13)}
.hdr-search .hs-ic{
  position:absolute;left:12px;width:17px;height:17px;color:var(--green-600);
  pointer-events:none;opacity:.75;
}
.hdr-search input{
  flex:1 1 auto;min-width:0;width:auto;
  padding:11px 12px 11px 37px;border:0;background:transparent;border-radius:var(--r-sm);
  font-size:.88rem;color:var(--ink);
}
.hdr-search input::placeholder{color:var(--muted-2)}
.hdr-search input:focus{outline:0;border:0;box-shadow:none}
.hdr-search input::-webkit-search-cancel-button{cursor:pointer}
.hs-go{
  flex:none;margin:3px;padding:8px 16px;border-radius:6px;
  background:var(--green-800);color:#F7F5EE;
  font-family:var(--font-display);font-size:.74rem;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;transition:background .15s;
}
.hs-go:hover{background:var(--green-700)}
@media (max-width:1180px){
  .hs-go{padding:8px 12px;font-size:.7rem}
}

/* Category bar fills the row on desktop: the free space is shared out between
   the items so the strip reads as one solid band instead of a left-aligned
   cluster with dead space on the right. Below 960 the bar scrolls, so the
   items keep their natural width there. */
@media (min-width:961px){
  .cb-item{flex:1 1 auto}
  .cb-item > a{justify-content:center;padding-inline:12px}
}

/* The sticky chrome sits directly above full-bleed content, so the logo row and
   the category bar run to the same gutter as the sections below rather than
   being boxed at the 1560 container. */
.site-header > .wrap,
.catbar > .wrap{max-width:2200px;padding-inline:clamp(16px,2.2vw,44px)}
.catbar > .wrap{padding-inline:clamp(4px,1.2vw,28px)}


/* Anything an in-page link jumps to must clear the sticky chrome, otherwise the
   target lands underneath it. Applied globally so every #anchor is covered, not
   just the handful of pages that remembered to set it. */
:target{scroll-margin-top:calc(var(--chrome-h) + 20px)}
@media (max-width:960px){
  :root{--chrome-h:112px}
}

/* ==========================================================================
   Page headers — centred.
   The 760px measure was flush left inside a 1560/full-bleed container, so on a
   wide screen every interior page opened with a column of text and half a
   screen of empty paper beside it. Centring keeps the reading measure honest
   while giving the header the full width to sit in.
   ========================================================================== */
.page-head .ph-inner{margin-inline:auto;text-align:center}
.page-head .ph-inner .lede{margin-inline:auto;max-width:68ch}
/* the breadcrumb is a trail, not a heading — it stays at the left edge */
.page-head .crumbs{justify-content:flex-start}

/* Stat band under the header follows the same axis. */
.ph-stats .phs{text-align:center}
.ph-stats .phs,
.ph-stats .phs:first-child{padding-left:20px;padding-right:20px}
.ph-stats .phs:first-child{border-left:0}

/* Buttons or chips sitting inside a page header centre with it. */
.page-head .ph-inner .row{justify-content:center}
.page-head .ph-inner .certs{justify-content:center}

/* The page header sits between the full-bleed chrome and the full-bleed trade
   terms strip; leaving it at the 1560 container put a visible step on both
   edges. The reading measure is still held by .ph-inner. */
.page-head > .wrap{max-width:2200px;padding-inline:clamp(16px,2.2vw,44px)}

/* ---------------------------------------------------- back office extras */
.adm-cell{padding:7px 9px;font-size:.84rem;max-width:110px}
.adm-cell.is-edited{border-color:var(--gold);background:var(--gold-50)}
.is-edited-row td{background:rgba(181,161,102,.06)}
.adm-nm{display:block;font-family:var(--font-display);font-size:.88rem;color:var(--green-800);line-height:1.25}
.adm-sub{display:block;font-size:.73rem;color:var(--muted);margin-top:2px}
.adm-inbox{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px}
.ib-card h3{display:flex;align-items:center;gap:8px}
.ib-card h3 svg{width:18px;height:18px;color:var(--green-600);flex:none}
.ib-list{margin:0;padding-left:18px;display:grid;gap:8px}
.ib-list li{font-size:.8rem;color:var(--ink-2);line-height:1.5;word-break:break-word}
.ib-k{font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted-2);
  font-family:var(--font-display)}
.adm-editor .card{border-color:var(--gold-200);box-shadow:var(--sh-2)}


/* ==========================================================================
   Figure band — a row of headline numbers with a short label underneath.
   Used on the catalogue head and the about page, so it lives here rather than
   in one page's style block. Columns adapt to however many cells are supplied.
   ========================================================================== */
.ph-stats{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:0;
  border-top:1px solid var(--line);margin-top:clamp(20px,2.4vw,32px);
}
.ph-stats .phs{
  padding:20px;border-left:1px solid var(--line);text-align:center;
}
.ph-stats .phs:first-child{border-left:0}
.ph-stats b{
  display:block;font-family:var(--font-display);font-weight:700;
  font-size:clamp(1.5rem,1.15rem + .95vw,2.05rem);line-height:1.05;
  color:var(--green-800);font-variant-numeric:tabular-nums;
}
.ph-stats span{
  display:block;margin-top:7px;font-size:.76rem;line-height:1.4;color:var(--muted);
  letter-spacing:.05em;text-transform:uppercase;font-family:var(--font-display);font-weight:500;
}
@media (max-width:720px){
  .ph-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ph-stats .phs{border-left:0;border-top:1px solid var(--line-2);padding:16px 10px}
  .ph-stats .phs:nth-child(-n+2){border-top:0}
  .ph-stats b{font-size:1.35rem}
}


/* Footer brand — stays as the first column, centred inside it. */
.footer-brand{text-align:center;display:flex;flex-direction:column;align-items:center}
.footer-brand img{height:48px;width:auto;margin:0 0 14px}
.footer-brand p{max-width:30ch;margin:0}
.footer-brand .social{justify-content:center}
/* the footer follows the same gutter as the chrome and the sections above it */
.site-footer > .wrap,.footer-bottom > .wrap{max-width:2200px;padding-inline:clamp(16px,2.2vw,44px)}
@media (max-width:960px){
  .footer-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .footer-brand{grid-column:span 3;margin-bottom:8px}
}
@media (max-width:560px){
  .footer-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
  .footer-brand{grid-column:span 2}
}