/* ==========================================================================
   The Green Cow, concept redesign
   Direction: "Moorland" - peat, wet slate, moss and lichen, warm oat and bone.
   Hand written, no build step, no third party fonts or assets.
   ========================================================================== */

:root{
  /* surfaces */
  --peat:#241E17;
  --slate:#232B2B;
  --slate-2:#2E3838;
  --slate-3:#3A4544;
  --bone:#F7F3E9;
  --oat:#EDE5D6;
  --oat-2:#E2D8C4;

  /* greens */
  --moss:#4E6139;
  --moss-2:#3E4E2D;
  --lichen:#A6B884;
  --lichen-dim:#8B9C6C;

  /* accent, a warm bracken/ember for actions */
  --ember:#B4551F;
  --ember-2:#9A4718;
  --ember-soft:#F2E2D6;

  --ink:#1D1A15;
  --ink-2:#4A453C;
  --ink-3:#6E675C;
  --line:#D8CFBC;
  --line-dark:rgba(247,243,233,.16);

  --ok:#4E6139;
  --warn:#B4551F;

  --r-sm:8px; --r:14px; --r-lg:22px;
  --shadow:0 1px 2px rgba(29,26,21,.06), 0 8px 24px -12px rgba(29,26,21,.22);
  --shadow-lg:0 24px 60px -20px rgba(20,24,22,.45);

  --font-head:"Iowan Old Style","Palatino Linotype","Palatino","Book Antiqua",Georgia,"Times New Roman",serif;
  --font-body:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;

  --wrap:1180px;
  --head-h:66px;
}

*,*::before,*::after{box-sizing:border-box}

/* A class that sets `display` beats the browser's own [hidden] rule, which
   silently breaks anything we show and hide with the hidden attribute.
   This keeps hidden meaning hidden, everywhere. */
[hidden]{display:none!important}

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

body{
  margin:0;
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.62;
  color:var(--ink);
  background:var(--bone);
  -webkit-font-smoothing:antialiased;
}

img,svg{max-width:100%}
h1,h2,h3{font-family:var(--font-head); font-weight:600; line-height:1.14; letter-spacing:-.012em; margin:0 0 .5em}
h1{font-size:clamp(2.15rem,6.2vw,4.05rem)}
h2{font-size:clamp(1.72rem,3.9vw,2.65rem)}
h3{font-size:1.14rem; line-height:1.3}
p{margin:0 0 1.05em}
a{color:var(--moss-2); text-decoration-thickness:1px; text-underline-offset:3px}
ul{margin:0; padding:0; list-style:none}

.wrap{width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:20px}
.wrap-narrow{max-width:760px}
.muted{color:var(--ink-3)}
.centred{text-align:center}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- focus, always visible, never removed ---------- */
:focus-visible{
  outline:3px solid var(--ember);
  outline-offset:2px;
  border-radius:4px;
}
.on-dark :focus-visible,.hero :focus-visible,.site-head :focus-visible,
.site-foot :focus-visible,.staff :focus-visible{ outline-color:var(--lichen) }

.skip{
  position:absolute; left:12px; top:-60px; z-index:200;
  background:var(--ember); color:#fff; padding:.7rem 1.1rem; border-radius:var(--r-sm);
  font-weight:600; text-decoration:none; transition:top .15s;
}
.skip:focus{top:12px}

/* ---------- concept bar ---------- */
.concept-bar{
  background:var(--ember); color:#FDF6EF;
  font-size:.83rem; text-align:center; padding:.5rem 1rem; line-height:1.4;
}
.concept-bar strong{ letter-spacing:.04em; text-transform:uppercase; font-size:.78rem }

/* ---------- header ---------- */
.site-head{
  position:sticky; top:0; z-index:60;
  background:rgba(35,43,43,.94);
  backdrop-filter:saturate(140%) blur(8px);
  color:var(--bone);
  border-bottom:1px solid var(--line-dark);
}
.head-inner{display:flex; align-items:center; gap:1rem; min-height:var(--head-h)}
.brand{display:flex; align-items:center; gap:.6rem; color:var(--bone); text-decoration:none; margin-right:auto}
.brand-mark{width:34px; height:34px; color:var(--lichen); flex:none}
.brand-name{display:block; font-family:var(--font-head); font-size:1.16rem; line-height:1.1}
.brand-sub{display:block; font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--lichen-dim)}

.site-nav{display:none; gap:1.5rem}
.site-nav a{color:var(--oat); text-decoration:none; font-size:.94rem; padding:.35rem 0; border-bottom:2px solid transparent}
.site-nav a:hover{border-bottom-color:var(--lichen); color:#fff}

.head-actions{display:flex; align-items:center; gap:.5rem}

/* ---------- buttons ---------- */
.btn{
  --btn-bg:transparent; --btn-fg:inherit; --btn-bd:transparent;
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font:inherit; font-weight:600; font-size:.95rem;
  padding:.68rem 1.15rem; border-radius:999px; cursor:pointer;
  background:var(--btn-bg); color:var(--btn-fg); border:1.5px solid var(--btn-bd);
  text-decoration:none; transition:background .15s, color .15s, border-color .15s, transform .08s;
  min-height:44px;
}
.btn:active{transform:translateY(1px)}
.btn-primary{--btn-bg:var(--ember); --btn-fg:#fff; --btn-bd:var(--ember)}
.btn-primary:hover{--btn-bg:var(--ember-2); --btn-bd:var(--ember-2)}
.btn-outline{--btn-fg:currentColor; --btn-bd:currentColor}
.btn-outline:hover{--btn-bg:rgba(255,255,255,.1)}
.shop .btn-outline:hover,.find .btn-outline:hover{--btn-bg:rgba(78,97,57,.08)}
.btn-ghost{--btn-fg:var(--oat); --btn-bd:var(--line-dark); font-size:.86rem; padding:.5rem .9rem}
.btn-ghost:hover{--btn-bg:rgba(255,255,255,.09)}
.btn-lg{padding:.92rem 1.7rem; font-size:1.02rem; min-height:52px}
.btn-block{width:100%}
.btn[disabled]{opacity:.42; cursor:not-allowed}
.linkish{background:none;border:0;padding:0;font:inherit;color:var(--moss-2);text-decoration:underline;cursor:pointer}

.btn-basket{
  --btn-bg:var(--lichen); --btn-fg:var(--slate); --btn-bd:var(--lichen);
  padding-inline:.85rem;
}
.btn-basket:hover{--btn-bg:#B7C797}
.btn-basket span:not(.basket-count){display:none}
.basket-count{
  background:var(--ember); color:#fff; border-radius:999px;
  min-width:22px; height:22px; display:inline-grid; place-items:center;
  font-size:.76rem; font-weight:700; padding-inline:5px;
}
.icon-btn{
  background:none; border:0; cursor:pointer; color:inherit;
  width:44px; height:44px; display:grid; place-items:center; border-radius:50%;
}
.icon-btn:hover{background:rgba(0,0,0,.07)}

/* ---------- hero ---------- */
.hero{position:relative; background:var(--slate); color:var(--bone); overflow:hidden}
.hero-art{position:absolute; inset:0; z-index:0}
.hero-svg{width:100%; height:100%; display:block}
.hero-inner{position:relative; z-index:1; padding:3.6rem 20px 3rem; max-width:960px}
.eyebrow{
  font-size:.72rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--lichen); margin-bottom:1rem; font-weight:600;
}
.hero h1{margin-bottom:.42em; text-wrap:balance}
.hero .hl{color:var(--lichen); font-style:italic}
.lede{font-size:clamp(1.02rem,2.3vw,1.22rem); color:var(--oat); max-width:56ch; margin-bottom:1.9rem}
.hero-cta{display:flex; flex-wrap:wrap; gap:.75rem}

.trust{
  position:relative; z-index:1;
  display:grid; grid-template-columns:1fr; gap:1px;
  background:var(--line-dark);
  border-top:1px solid var(--line-dark);
}
.trust li{
  display:flex; gap:.85rem; align-items:flex-start;
  background:var(--slate-2); padding:1.05rem 20px;
}
.trust svg{width:26px; height:26px; flex:none; color:var(--lichen); margin-top:2px}
.trust span{font-size:.9rem; color:var(--oat-2); line-height:1.45}
.trust strong{display:block; color:var(--bone); font-size:.95rem}

/* ---------- shared section bits ---------- */
/* Direct children of <main> only. The drawer steps and the prep board columns
   are also <section> elements and must not inherit page padding. */
main > section{padding-block:clamp(3rem,7vw,5.5rem)}
.section-eyebrow{
  font-size:.72rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--moss); font-weight:700; margin-bottom:.7rem;
}
.centred+.shop-intro,.centred+.steps{margin-top:1.4rem}
.shop-intro{max-width:60ch; margin:1rem auto 2.4rem; text-align:center; color:var(--ink-2)}

/* ---------- story ---------- */
.story{background:var(--oat)}
.story-grid{display:grid; gap:2.6rem}
.story-copy p{color:var(--ink-2); max-width:58ch}
.story-points{display:grid; gap:1rem}
.story-points li{
  background:var(--bone); border:1px solid var(--line);
  border-radius:var(--r); padding:1.3rem 1.4rem; position:relative;
}
.story-points .num{
  font-family:var(--font-head); font-size:.82rem; letter-spacing:.12em;
  color:var(--moss); display:block; margin-bottom:.45rem;
}
.story-points h3{margin-bottom:.3rem}
.story-points p{margin:0; font-size:.94rem; color:var(--ink-2)}

/* ---------- how it works ---------- */
.how{background:var(--bone)}
.steps{counter-reset:s; display:grid; gap:1.6rem; margin:2.4rem 0 0}
.steps li{text-align:center; padding-inline:.5rem}
.step-n{
  width:46px; height:46px; border-radius:50%; display:grid; place-items:center;
  margin:0 auto .85rem; background:var(--moss); color:var(--bone);
  font-family:var(--font-head); font-size:1.2rem;
}
.steps p{color:var(--ink-2); font-size:.95rem; margin:0}
.how-note{
  text-align:center; margin:2.4rem auto 0; max-width:52ch;
  font-size:.92rem; color:var(--ink-2);
  border-top:1px solid var(--line); padding-top:1.4rem;
}

/* ---------- shop ---------- */
.shop{background:var(--oat)}
.cat-tabs{
  display:flex; gap:.5rem; overflow-x:auto; padding-bottom:.6rem; margin-bottom:1.8rem;
  scrollbar-width:thin; -webkit-overflow-scrolling:touch;
}
.cat-tab{
  flex:none; font:inherit; font-size:.93rem; font-weight:600; cursor:pointer;
  padding:.6rem 1.05rem; border-radius:999px; min-height:44px;
  background:var(--bone); color:var(--ink-2); border:1.5px solid var(--line);
  display:inline-flex; align-items:center; gap:.45rem;
}
.cat-tab:hover{border-color:var(--lichen-dim)}
.cat-tab[aria-selected="true"]{background:var(--moss); border-color:var(--moss); color:var(--bone)}
.cat-tab .new-flag{
  font-size:.6rem; letter-spacing:.09em; text-transform:uppercase; font-weight:800;
  background:var(--ember); color:#fff; padding:.15rem .38rem; border-radius:4px;
}

.product-grid{display:grid; gap:1rem; grid-template-columns:1fr}

.card{
  background:var(--bone); border:1px solid var(--line); border-radius:var(--r);
  padding:1.15rem 1.2rem 1.2rem; display:flex; flex-direction:column; gap:.7rem;
  box-shadow:var(--shadow);
}
.card-top{display:flex; gap:1rem; align-items:flex-start}
.card-icon{
  width:52px; height:52px; flex:none; border-radius:12px;
  background:var(--oat-2); color:var(--moss-2); display:grid; place-items:center;
}
.card-icon svg{width:30px; height:30px}
.card h3{margin:0 0 .18rem; font-size:1.06rem}
.card-desc{font-size:.88rem; color:var(--ink-3); margin:0}

/* the pricing fix: three separate, labelled facts */
.price-block{
  display:grid; grid-template-columns:auto 1px auto 1px auto; align-items:center;
  gap:.85rem; padding:.8rem .9rem; background:var(--oat); border-radius:10px;
  border:1px solid var(--line);
}
.price-block .rule{width:1px; height:32px; background:var(--line)}
.pf-label{
  display:block; font-size:.63rem; letter-spacing:.11em; text-transform:uppercase;
  color:var(--ink-3); font-weight:700; margin-bottom:.1rem;
}
.pf-value{display:block; font-weight:600; font-size:.95rem; color:var(--ink); white-space:nowrap}
.pf-price .pf-value{font-family:var(--font-head); font-size:1.6rem; line-height:1; font-weight:600}
.pf-fixed{grid-column:1/-1; font-size:.85rem; color:var(--ink-3)}

.card-foot{display:flex; align-items:center; gap:.6rem; margin-top:auto}
.qty{
  display:flex; align-items:center; border:1.5px solid var(--line); border-radius:999px;
  background:var(--bone); overflow:hidden;
}
.qty button{
  width:42px; height:42px; border:0; background:none; font-size:1.25rem; cursor:pointer;
  color:var(--moss-2); line-height:1;
}
.qty button:hover{background:var(--oat)}
.qty output{min-width:26px; text-align:center; font-weight:700; font-variant-numeric:tabular-nums}
.card-foot .btn{flex:1}

/* ---------- find us ---------- */
.find{background:var(--bone)}
.find-grid{display:grid; gap:2rem}
address{font-style:normal; font-size:1.06rem; line-height:1.7; margin-bottom:1rem}
.tel{font-weight:700; font-size:1.1rem; color:var(--ember); text-decoration:none}
.tel:hover{text-decoration:underline}
.find-lines{margin-bottom:1.2rem}
.directions{color:var(--ink-2); font-size:.95rem; max-width:48ch}

.hours-card{
  background:var(--slate); color:var(--bone); border-radius:var(--r-lg);
  padding:1.6rem 1.5rem; box-shadow:var(--shadow-lg); align-self:start;
}
.hours-card h3{color:var(--lichen); font-size:1.25rem; margin-bottom:.9rem}
.hours{width:100%; border-collapse:collapse; margin-bottom:1rem}
.hours th,.hours td{padding:.5rem 0; text-align:left; font-weight:400; font-size:.97rem}
.hours td{text-align:right; font-variant-numeric:tabular-nums; color:var(--oat)}
.hours tr+tr{border-top:1px solid var(--line-dark)}
.hours .closed{color:#9A9287}
.hours tr[data-today] th,.hours tr[data-today] td{color:var(--lichen); font-weight:700}
.hours-status{
  font-size:.9rem; padding:.6rem .85rem; border-radius:10px; margin-bottom:1.1rem;
  background:rgba(166,184,132,.14); color:var(--lichen); border:1px solid rgba(166,184,132,.25);
}
.hours-status.shut{background:rgba(180,85,31,.16); color:#E9AE86; border-color:rgba(180,85,31,.3)}

/* ---------- faq ---------- */
.faq{background:var(--oat)}
.faq-list{margin-top:2rem; border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  cursor:pointer; list-style:none; padding:1.1rem .5rem 1.1rem 0;
  font-family:var(--font-head); font-size:1.12rem; display:flex; align-items:center;
  justify-content:space-between; gap:1rem; min-height:44px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:""; width:11px; height:11px; flex:none; margin-right:.35rem;
  border-right:2px solid var(--moss); border-bottom:2px solid var(--moss);
  transform:rotate(45deg) translateY(-3px); transition:transform .18s;
}
.faq details[open] summary::after{transform:rotate(225deg) translateY(-2px)}
.faq summary:hover{color:var(--moss-2)}
.faq-body{padding:0 0 1.2rem; max-width:64ch}
.faq-body p{color:var(--ink-2); font-size:.96rem; margin-bottom:.8rem}
.faq-body p:last-child{margin-bottom:0}

/* ---------- footer ---------- */
.site-foot{background:var(--peat); color:var(--oat-2); padding-block:3rem 1.5rem; font-size:.92rem}
.foot-grid{display:grid; gap:2rem}
.foot-brand{font-family:var(--font-head); font-size:1.35rem; color:var(--bone); margin-bottom:.5rem}
.foot-h{font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--lichen); font-weight:700; margin-bottom:.6rem}
.site-foot a{color:var(--oat-2)}
.site-foot .tel{color:var(--lichen)}
.site-foot li{padding:.16rem 0}
.site-foot .muted{color:#9A9287}
.foot-note{
  margin-top:2.4rem; padding-top:1.3rem; border-top:1px solid var(--line-dark);
  font-size:.82rem; color:#9A9287; max-width:74ch;
}
.foot-note strong{color:var(--ember-soft)}

/* ==========================================================================
   Basket drawer
   ========================================================================== */
.overlay{position:fixed; inset:0; z-index:100; background:rgba(20,24,22,.55); display:flex; justify-content:flex-end}
.overlay[hidden]{display:none}
.drawer{
  background:var(--bone); width:min(460px,100%); height:100%;
  display:flex; flex-direction:column; box-shadow:var(--shadow-lg);
  animation:slide .22s ease-out;
}
@keyframes slide{from{transform:translateX(24px);opacity:.4}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){ .drawer{animation:none} .btn{transition:none} }

.drawer-head{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.9rem 1rem .9rem 1.35rem; border-bottom:1px solid var(--line);
  background:var(--slate); color:var(--bone); flex:none;
}
.drawer-head h2{margin:0; font-size:1.25rem}
.drawer-head .icon-btn:hover{background:rgba(255,255,255,.12)}
.drawer-body{flex:1; overflow-y:auto; padding:1.2rem 1.35rem; -webkit-overflow-scrolling:touch}
.drawer-foot{border-top:1px solid var(--line); padding:1rem 1.35rem 1.2rem; background:var(--oat); flex:none}
.drawer-empty{color:var(--ink-3); text-align:center; padding:2.5rem 1rem}
.step-lead{color:var(--ink-2); font-size:.94rem; margin-bottom:1.2rem}

.line{display:flex; gap:.9rem; padding:.9rem 0; border-bottom:1px solid var(--line)}
.line:first-child{padding-top:0}
.line-main{flex:1; min-width:0}
.line-name{font-weight:600; display:block; margin-bottom:.15rem}
.line-meta{font-size:.8rem; color:var(--ink-3); display:block}
.line-right{text-align:right; display:flex; flex-direction:column; align-items:flex-end; gap:.45rem}
.line-price{font-weight:700; font-variant-numeric:tabular-nums}
.qty-sm{transform:scale(.85); transform-origin:right center}
.qty-sm button{width:34px;height:34px;font-size:1.05rem}

.totals{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:.9rem; font-size:1.05rem}
.totals strong{font-family:var(--font-head); font-size:1.5rem}
.totals .totals-note{display:block; font-size:.78rem; color:var(--ink-3); font-weight:400}
.drawer-actions{display:flex; gap:.6rem}
.drawer-actions .btn-outline{flex:none; --btn-fg:var(--ink-2); --btn-bd:var(--line)}

/* slots */
.slot-days{display:flex; gap:.5rem; overflow-x:auto; padding-bottom:.7rem; margin-bottom:1.3rem}
.day-chip{
  flex:none; cursor:pointer; font:inherit; text-align:center; min-width:78px; min-height:66px;
  padding:.55rem .6rem; border-radius:12px; border:1.5px solid var(--line); background:var(--bone);
}
.day-chip b{display:block; font-size:.95rem}
.day-chip small{display:block; font-size:.74rem; color:var(--ink-3)}
.day-chip[aria-pressed="true"]{background:var(--moss); border-color:var(--moss); color:var(--bone)}
.day-chip[aria-pressed="true"] small{color:var(--lichen)}
.slot-times{display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:.5rem}
.slot-btn{
  cursor:pointer; font:inherit; font-weight:600; font-size:.92rem; min-height:48px;
  border-radius:10px; border:1.5px solid var(--line); background:var(--bone); color:var(--ink);
  display:flex; flex-direction:column; align-items:center; justify-content:center; line-height:1.2;
}
.slot-btn small{font-size:.68rem; color:var(--ink-3); font-weight:500}
.slot-btn[aria-pressed="true"]{background:var(--moss); border-color:var(--moss); color:var(--bone)}
.slot-btn[aria-pressed="true"] small{color:var(--lichen)}
.slot-btn[disabled]{opacity:.4; cursor:not-allowed; text-decoration:line-through}
.slots-none{color:var(--ink-3); font-size:.92rem}

.field{margin-bottom:1.1rem}
.field label{display:block; font-weight:600; font-size:.92rem; margin-bottom:.35rem}
.field input,.field textarea{
  width:100%; font:inherit; font-size:1rem; padding:.72rem .85rem;
  border:1.5px solid var(--line); border-radius:10px; background:#fff; color:var(--ink);
  min-height:48px;
}
.field input:focus,.field textarea:focus{border-color:var(--moss); outline-offset:1px}
.field .hint{font-size:.79rem; color:var(--ink-3); margin:.35rem 0 0}
.err{color:#A33417; font-size:.83rem; font-weight:600; margin:.35rem 0 0}
.field input[aria-invalid="true"]{border-color:#A33417}

.summary-box{
  background:var(--oat); border:1px solid var(--line); border-radius:12px;
  padding:.95rem 1.05rem; font-size:.92rem;
}
.summary-box dl{display:grid; grid-template-columns:auto 1fr; gap:.35rem .9rem; margin:0}
.summary-box dt{color:var(--ink-3); font-size:.82rem}
.summary-box dd{margin:0; font-weight:600; text-align:right}

.step-done{text-align:center; padding-top:1rem}
.done-mark{color:var(--moss); width:66px; margin:0 auto 1rem}
.order-no{
  font-family:var(--font-head); font-size:2rem; letter-spacing:.02em;
  background:var(--oat); border:1px dashed var(--moss); border-radius:12px;
  padding:.6rem 1rem; display:inline-block; margin:.2rem 0 1.2rem;
}
.step-done .summary-box{text-align:left; margin-bottom:1.2rem}
.done-note{font-size:.88rem; color:var(--ink-2)}
.demo-note{
  background:var(--ember-soft); border-radius:10px; padding:.7rem .9rem;
  font-size:.85rem; border:1px solid #E3C9B4;
}

/* ==========================================================================
   Staff prep board, built for a tablet on a shop counter
   ========================================================================== */
.overlay-full{justify-content:center; align-items:stretch; background:rgba(15,18,17,.85)}
.staff{width:100%; height:100%; background:var(--slate); color:var(--bone); display:flex; flex-direction:column}

.pin-screen{flex:1; display:grid; place-items:center; padding:1.5rem}
.pin-card{width:min(340px,100%); text-align:center}
.pin-card h2{color:var(--lichen); margin-bottom:.2rem}
.pin-card .muted{color:#9A9287; font-size:.92rem; margin-bottom:1.4rem}
.pin-dots{display:flex; gap:.75rem; justify-content:center; margin-bottom:1.1rem}
.pin-dots i{width:14px; height:14px; border-radius:50%; border:2px solid var(--lichen-dim)}
.pin-dots i.on{background:var(--lichen); border-color:var(--lichen)}
.pin-err{margin-bottom:.8rem; color:#E9AE86}
.pin-pad{display:grid; grid-template-columns:repeat(3,1fr); gap:.7rem}
.pin-pad button{
  font:inherit; font-size:1.5rem; font-family:var(--font-head); cursor:pointer;
  min-height:64px; border-radius:14px; border:1.5px solid var(--line-dark);
  background:var(--slate-2); color:var(--bone);
}
.pin-pad button:hover{background:var(--slate-3)}
.pin-pad .pin-alt{font-size:.85rem; font-family:var(--font-body); color:var(--oat-2)}
.pin-demo{margin-top:1.2rem; font-size:.82rem; color:#9A9287}
.pin-demo strong{color:var(--lichen); letter-spacing:.08em}

.board{flex:1; display:flex; flex-direction:column; min-height:0}
.board-head{
  display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  padding:.9rem 1.1rem; border-bottom:1px solid var(--line-dark); background:var(--peat); flex:none;
}
.board-head h2{margin:0; font-size:1.35rem; color:var(--bone)}
.board-date{margin:0; font-size:.85rem; color:#9A9287}
.board-head-right{display:flex; align-items:center; gap:1.4rem}
.board-stat{text-align:center; line-height:1.1}
.board-stat span{display:block; font-family:var(--font-head); font-size:1.7rem; color:var(--lichen)}
.board-stat small{font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:#9A9287}
.board-head .btn-outline{--btn-fg:var(--oat); --btn-bd:var(--line-dark)}

.board-cols{
  flex:1; display:grid; grid-template-columns:repeat(4,minmax(260px,1fr));
  grid-auto-rows:100%; align-content:start;
  gap:1px; background:var(--line-dark); overflow-x:auto; min-height:0;
}
.col{background:var(--slate); display:flex; flex-direction:column; min-height:0; height:100%}
.col-head{
  padding:.75rem 1rem; border-bottom:1px solid var(--line-dark); flex:none;
  display:flex; align-items:center; justify-content:space-between; gap:.5rem;
  background:var(--slate-2);
}
.col-head h3{margin:0; font-size:.78rem; letter-spacing:.13em; text-transform:uppercase; font-family:var(--font-body); font-weight:700}
.col-count{background:var(--slate-3); border-radius:999px; padding:.1rem .55rem; font-size:.78rem; font-weight:700}
.col[data-status="new"] .col-head{border-left:4px solid var(--ember)}
.col[data-status="prepping"] .col-head{border-left:4px solid #C9A227}
.col[data-status="ready"] .col-head{border-left:4px solid var(--lichen)}
.col[data-status="collected"] .col-head{border-left:4px solid var(--slate-3)}
.col-body{flex:1; overflow-y:auto; padding:.8rem; display:flex; flex-direction:column; gap:.8rem}
.col-empty{color:#79736A; font-size:.85rem; text-align:center; padding:1.6rem .5rem}

.job{background:var(--slate-2); border:1px solid var(--line-dark); border-radius:12px; padding:.85rem .9rem}
.job.late{border-color:var(--ember); box-shadow:0 0 0 1px var(--ember) inset}
.job-top{display:flex; justify-content:space-between; align-items:baseline; gap:.6rem; margin-bottom:.15rem}
.job-no{font-family:var(--font-head); font-size:1.12rem; color:var(--lichen)}
.job-slot{font-size:.8rem; font-weight:700; color:var(--oat); font-variant-numeric:tabular-nums}
.job-cust{font-size:.9rem; color:var(--bone); margin-bottom:.1rem}
.job-phone{font-size:.8rem; color:#9A9287; margin-bottom:.6rem}
.job-when{font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; font-weight:700; color:#C9A227}
.job-when.due{color:var(--ember)}
.job-items{border-top:1px solid var(--line-dark); padding-top:.55rem; margin-bottom:.65rem}
.job-items li{display:flex; justify-content:space-between; gap:.8rem; font-size:.86rem; padding:.16rem 0; color:var(--oat-2)}
.job-items li b{color:var(--bone); font-weight:600}
.job-items .ji-w{color:#9A9287; font-size:.78rem; white-space:nowrap}
.job-note{
  font-size:.82rem; background:rgba(201,162,39,.13); border:1px solid rgba(201,162,39,.3);
  border-radius:8px; padding:.4rem .55rem; margin-bottom:.6rem; color:#E8D9A8;
}
.job-foot{display:flex; align-items:center; justify-content:space-between; gap:.6rem}
.job-total{font-weight:700; font-variant-numeric:tabular-nums}
.job-total small{display:block; font-size:.68rem; font-weight:400; color:#9A9287; text-transform:uppercase; letter-spacing:.07em}
.job-btns{display:flex; gap:.4rem}
.job-btn{
  font:inherit; font-size:.86rem; font-weight:700; cursor:pointer; min-height:44px;
  padding:.5rem .9rem; border-radius:10px; border:1.5px solid var(--lichen);
  background:var(--lichen); color:var(--slate);
}
.job-btn:hover{background:#B7C797}
.job-btn.ghost{background:none; color:var(--oat-2); border-color:var(--line-dark); padding-inline:.7rem}
.job-btn.ghost:hover{background:var(--slate-3)}

/* ---------- toast ---------- */
.toast{
  position:fixed; left:50%; bottom:24px; transform:translateX(-50%); z-index:200;
  background:var(--slate); color:var(--bone); padding:.75rem 1.2rem; border-radius:999px;
  box-shadow:var(--shadow-lg); font-size:.92rem; font-weight:600; max-width:calc(100% - 32px);
}
.toast[hidden]{display:none}

/* ==========================================================================
   Wider screens
   ========================================================================== */
@media (min-width:600px){
  .btn-basket span:not(.basket-count){display:inline}
  .product-grid{grid-template-columns:repeat(2,1fr)}
  .trust{grid-template-columns:repeat(2,1fr)}
  .story-points{grid-template-columns:repeat(3,1fr)}
  .steps{grid-template-columns:repeat(3,1fr)}
  .hero-inner{padding-block:5rem 4rem}
}
@media (min-width:900px){
  body{font-size:18px}
  .site-nav{display:flex}
  .trust{grid-template-columns:repeat(4,1fr)}
  .trust li{padding-block:1.3rem}
  .story-grid{grid-template-columns:1.1fr .9fr; gap:3.5rem; align-items:start}
  .story-points{grid-template-columns:1fr}
  .find-grid{grid-template-columns:1.15fr .85fr; gap:3.5rem}
  .foot-grid{grid-template-columns:2fr 1fr 1fr}
  .hero-inner{padding-block:6.5rem 5rem}
}
@media (min-width:1100px){
  .product-grid{grid-template-columns:repeat(3,1fr)}
}

/* print, so staff can put a prep list on paper if they want */
@media print{
  .site-head,.concept-bar,.hero-art,.overlay,.toast,.btn{display:none!important}
  body{background:#fff}
}