/* ============================================================
   ALWAYS SOMETHING SAUCE — "From the Foothills" prototype
   Shared stylesheet. Design system from the homepage mockup,
   externalized and extended for the full multi-page prototype.
   Palette: forest greens, dawn mist, harvest gold, chili red, cream.
   ============================================================ */
:root{
  --forest-900:#16291f; --forest-700:#244536; --forest-600:#2f5a44; --forest-500:#3c7155;
  --mist:#d6e4e1; --sky-1:#cfe0e2; --sky-2:#e9ede2;
  --gold:#d8a23f; --gold-deep:#8a5f16; /* 4.5:1+ on paper/white/cream-2 (was #bd8526 = 3.0:1) */
  --chili:#c0392b; --chili-deep:#9c2b1f;
  --cream:#f8f3e8; --cream-2:#f1e9d8; --paper:#fbf7ee;
  --ink:#23302a; --ink-soft:#4f5e54; --line:#e2d8c4;
  --maxw:1120px; --r:14px; --shadow:0 10px 30px rgba(22,41,31,.10); --shadow-sm:0 4px 14px rgba(22,41,31,.08);
  --serif:Georgia,'Times New Roman',serif;
  --sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--sans);color:var(--ink);background:var(--paper);line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--serif);line-height:1.15;margin:0 0 .4em;font-weight:700}
h2{font-size:1.9rem;color:var(--forest-700)}
p{margin:0 0 1em}
a{color:var(--forest-600);text-decoration:none}
/* body-copy links carry an underline (colour alone was 1.2-1.8:1 against the text); buttons never do */
.prose a:not(.btn),.qa a,.callout a:not(.btn),.post a:not(.btn),.pspec a,.pshort a,main p a:not(.btn){text-decoration:underline;text-underline-offset:.15em;text-decoration-thickness:1px}
.btn{text-decoration:none}
img{max-width:100%;height:auto;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px}
.section{padding:60px 0}
.eyebrow{font-family:var(--sans);text-transform:uppercase;letter-spacing:.14em;font-size:.74rem;font-weight:700;color:var(--gold-deep);margin-bottom:10px}
.center{text-align:center}
.lead{font-size:1.12rem;color:var(--ink-soft);max-width:62ch}
.center .lead{margin-left:auto;margin-right:auto}
.skip{position:absolute;left:-999px}
.skip:focus{left:8px;top:8px;background:#fff;padding:10px 14px;border-radius:8px;z-index:100}

/* buttons */
.btn{display:inline-block;border:0;cursor:pointer;font-family:var(--sans);font-weight:700;font-size:1rem;padding:14px 24px;border-radius:999px;transition:transform .15s ease,box-shadow .15s ease,background .15s ease;min-height:48px;text-align:center}
.btn-primary{background:var(--chili);color:#fff;box-shadow:var(--shadow-sm)}
.btn-primary:hover{background:var(--chili-deep);transform:translateY(-2px)}
.btn-ghost{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.8)}
.btn-ghost:hover{background:rgba(255,255,255,.14);transform:translateY(-2px)}
.btn-dark{background:var(--forest-600);color:#fff}
.btn-dark:hover{background:var(--forest-700);transform:translateY(-2px)}

/* prototype banner */
.proto{background:repeating-linear-gradient(45deg,#2f5a44,#2f5a44 14px,#28503c 14px,#28503c 28px);color:#fff;text-align:center;font-size:.82rem;padding:8px 14px;font-weight:600;letter-spacing:.02em}
.proto b{color:var(--gold)}

/* header / nav */
header.site{position:sticky;top:0;z-index:40;background:rgba(251,247,238,.94);backdrop-filter:saturate(140%) blur(8px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px;position:relative}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--serif);font-weight:700;color:var(--forest-700);font-size:clamp(.9rem,3.6vw,1.02rem);line-height:1.2;letter-spacing:.01em}
.brand img{width:38px;height:38px;border-radius:50%;object-fit:cover}
.menu{display:none;gap:22px;align-items:center}
.menu a{color:var(--ink);font-weight:600;font-size:.95rem}
.menu a:hover,.menu a.active{color:var(--chili)}
.nav-right{display:flex;align-items:center;gap:14px}
.cart{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:44px;min-height:44px;color:var(--forest-700);font-weight:700;background:none;border:0;cursor:pointer;font-size:.95rem}
.hamb{background:none;border:0;cursor:pointer;color:var(--forest-700);padding:6px;min-height:44px;min-width:44px}
@media(min-width:860px){.menu{display:flex}.hamb{display:none}}
/* mobile dropdown */
.menu.open{display:flex;flex-direction:column;align-items:stretch;gap:0;position:absolute;top:100%;left:0;right:0;background:var(--paper);border-bottom:1px solid var(--line);box-shadow:var(--shadow);padding:6px 20px 12px}
.menu.open a{padding:14px 2px;border-bottom:1px solid var(--line);font-size:1rem}
.menu.open a:last-child{border-bottom:0}

/* generic page hero (interior pages) */
.page-hero{position:relative;color:#fff;background:linear-gradient(180deg,#1c3a2c,#16291f);overflow:hidden}
.page-hero .wrap{position:relative;z-index:2;padding:54px 20px}
.page-hero .eyebrow{color:var(--gold)}
.page-hero h1{font-family:var(--serif);font-size:2.1rem;max-width:20ch;margin:0 0 .3em;color:#fff}
.page-hero p{color:#cdded3;max-width:60ch;margin:0}
.page-hero .pinerow{position:absolute;left:0;right:0;bottom:0;z-index:1;opacity:.5}
@media(min-width:760px){.page-hero h1{font-size:2.7rem}}

/* breadcrumb */
.crumb{font-size:.82rem;color:var(--ink-soft);padding:14px 0 0}
.crumb a{color:var(--forest-600)}

/* hero (homepage) */
.hero{position:relative;color:#fff;overflow:hidden;background:linear-gradient(180deg,#bcd2d3 0%,#d7e2da 45%,#e9e6d4 100%)}
.hero-svg{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.hero-photo{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover;opacity:.9}
.hero-scrim{position:absolute;inset:0;z-index:2;background:linear-gradient(105deg,rgba(13,28,20,.74) 0%,rgba(13,28,20,.46) 45%,rgba(13,28,20,.12) 80%)}
@media(max-width:759px){.hero-scrim{background:linear-gradient(180deg,rgba(13,28,20,.70) 0%,rgba(13,28,20,.64) 55%,rgba(13,28,20,.52) 100%)}}
.hero-inner{position:relative;z-index:3;max-width:var(--maxw);margin:0 auto;padding:84px 20px 104px}
.hero h1{font-size:2.2rem;max-width:18ch;text-shadow:0 2px 18px rgba(13,28,20,.55)}
.hero .sub{font-size:1.06rem;max-width:48ch;margin:14px 0 26px;text-shadow:0 1px 12px rgba(13,28,20,.6)}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px}
.trust{display:flex;flex-wrap:wrap;gap:18px;margin-top:26px;font-size:.86rem;font-weight:600;opacity:.97}
.trust span{display:inline-flex;align-items:center;gap:7px;text-shadow:0 1px 8px rgba(13,28,20,.6)}
@media(min-width:760px){.hero h1{font-size:3.2rem}.hero .sub{font-size:1.22rem}}

/* journey strip */
.journey{background:var(--forest-700);color:#eaf2ec}
.journey h2{color:#fff}
.j-track{display:flex;gap:10px;overflow-x:auto;padding:10px 4px 16px;scroll-snap-type:x mandatory}
.j-step{scroll-snap-align:start;flex:0 0 auto;width:120px;text-align:center;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:14px 8px}
.j-step .ico{font-size:1.6rem;display:block;margin-bottom:6px}
.j-step .n{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--gold);font-weight:700}
.j-step .t{font-size:.82rem;color:#dfeae1;margin-top:3px}
@media(min-width:760px){.j-track{justify-content:space-between;overflow:visible;flex-wrap:nowrap}.j-step{width:auto;flex:1}}

/* sauce grid + cards */
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
@media(min-width:760px){.grid{grid-template-columns:repeat(5,1fr)}}
.grid.shop{gap:20px}
@media(min-width:760px){.grid.shop{grid-template-columns:repeat(3,1fr)}}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .18s ease,box-shadow .18s ease;display:flex;flex-direction:column}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.card .pic{position:relative;aspect-ratio:3/4;background:linear-gradient(160deg,#f4efe2,#e7efe2);display:flex;align-items:center;justify-content:center;padding:12px}
.card .pic img{width:100%;height:100%;object-fit:contain;transition:transform .25s ease}
.card:hover .pic img{transform:scale(1.04)}
.badge{position:absolute;top:8px;left:8px;z-index:2;background:rgba(20,41,31,.82);color:#fff;font-size:.7rem;font-weight:700;padding:4px 8px;border-radius:999px;letter-spacing:.02em}
.card .body{padding:12px;display:flex;flex-direction:column;gap:4px;flex:1}
.card h3{font-size:1.04rem;margin:0;color:var(--forest-700)}
.card .meta{font-size:.82rem;color:var(--ink-soft)}
.card .price{font-weight:700;color:var(--ink);margin-top:2px}
.peppers{font-size:.8rem;letter-spacing:1px;line-height:1}
.pep-on{filter:none}.pep-off{opacity:.22;filter:grayscale(1)}
.card .btn{margin-top:auto;width:100%;padding:11px;font-size:.92rem}
.confirm{color:#b8341f;font-size:.72rem;font-weight:600}

/* heat scale */
.heat{background:var(--cream-2)}
.heat-rows{max-width:680px;margin:0 auto;display:flex;flex-direction:column;gap:10px}
.hrow{display:grid;grid-template-columns:1.3fr 2.2fr auto;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.hrow .nm{font-weight:700;color:var(--forest-700)}
.meter{display:flex;gap:5px}
.dot{width:100%;height:12px;border-radius:4px;background:#e7ddc8}
.meter.lv .dot.on{background:linear-gradient(90deg,var(--gold),var(--chili))}
.hrow .lvl{font-size:.8rem;font-weight:700;color:var(--chili-deep);white-space:nowrap}

/* process steps */
.steps{display:grid;grid-template-columns:1fr;gap:18px;margin-top:24px}
@media(min-width:760px){.steps{grid-template-columns:repeat(3,1fr)}}
.steps.four{}
@media(min-width:760px){.steps.four{grid-template-columns:repeat(2,1fr)}}
.step{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px;box-shadow:var(--shadow-sm)}
.step .num{width:38px;height:38px;border-radius:50%;background:var(--forest-600);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-weight:700;margin-bottom:12px}
.step h3{color:var(--forest-700);font-size:1.2rem}

/* foothills band */
.foot-band{position:relative;color:#eaf2ec;background:linear-gradient(180deg,#1c3a2c,#16291f);overflow:hidden}
.foot-band .wrap{position:relative;z-index:2}
.foot-band h2{color:#fff}
.foot-band .lead{color:#cdded3}
.pinerow{position:absolute;left:0;right:0;bottom:0;z-index:1;opacity:.5}
.grid2{display:grid;grid-template-columns:1fr;gap:24px;align-items:center}
@media(min-width:820px){.grid2{grid-template-columns:1.1fr .9fr}}
.statline{display:flex;gap:26px;flex-wrap:wrap;margin-top:18px}
.stat .big{font-family:var(--serif);font-size:1.7rem;color:var(--gold)}
.stat .lab{font-size:.76rem;text-transform:uppercase;letter-spacing:.08em;color:#bcd0c4}
.band-photo{border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);aspect-ratio:4/3;background:#234538}
.band-photo img{width:100%;height:100%;object-fit:cover}

/* markets */
.mk{display:grid;grid-template-columns:1fr;gap:16px;margin-top:8px}
@media(min-width:680px){.mk{grid-template-columns:1fr 1fr}}
.mcard{border:1px solid var(--line);border-radius:var(--r);padding:20px;background:#fff;box-shadow:var(--shadow-sm);position:relative}
.mcard.next{border-color:var(--gold);box-shadow:0 0 0 2px rgba(216,162,63,.35),var(--shadow-sm)}
.mcard .tag{position:absolute;top:-11px;left:16px;background:var(--gold);color:#3a2c08;font-size:.7rem;font-weight:800;padding:3px 10px;border-radius:999px;letter-spacing:.04em}
.mcard h3{color:var(--forest-700);margin-bottom:2px}
.mcard .day{color:var(--chili-deep);font-weight:700}

/* notes / blog cards */
.notes{display:grid;grid-template-columns:1fr;gap:18px;margin-top:10px}
@media(min-width:760px){.notes{grid-template-columns:repeat(3,1fr)}}
.note{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .18s;display:flex;flex-direction:column}
.note:hover{transform:translateY(-4px)}
.note .pic{aspect-ratio:16/10;background:linear-gradient(160deg,#eef3ec,#e2eadd);position:relative;overflow:hidden}
.note .pic img{width:100%;height:100%;object-fit:cover}
.note .nb{padding:14px}
.note .k{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--gold-deep);font-weight:700}
.note h3{font-size:1.05rem;color:var(--forest-700);margin:4px 0 6px}
.note p{font-size:.9rem;color:var(--ink-soft);margin:0}

/* app teaser */
.app{background:var(--forest-600);color:#eaf2ec}
.app .wrap{display:grid;grid-template-columns:1fr;gap:20px;align-items:center}
@media(min-width:820px){.app .wrap{grid-template-columns:1.3fr .7fr}}
.app h2{color:#fff}.app .lead{color:#d6e6db}
.phone{justify-self:center;width:200px;height:330px;border-radius:26px;border:8px solid #0f2017;background:linear-gradient(180deg,#2f5a44,#1c3a2c);box-shadow:var(--shadow);display:flex;align-items:center;justify-content:center;color:#cfe;font-size:.8rem;text-align:center;padding:16px}

/* newsletter */
.news{background:var(--cream-2);text-align:center}
.fineprint{font-size:.78rem;color:var(--ink-soft)}

/* prose (content pages) */
.prose{max-width:74ch;margin:0 auto}
.prose h2{font-size:1.5rem;margin-top:1.4em}
.prose h3{font-size:1.15rem;color:var(--forest-700);margin-top:1.3em}
.prose p,.prose li{font-size:1.04rem;color:#33433b}
.prose ul{padding-left:1.2em}
.prose li{margin-bottom:.4em}
.qa{border-top:1px solid var(--line);padding:18px 0}
.qa h3{margin:0 0 .3em}
.callout{background:var(--cream-2);border-left:4px solid var(--gold);border-radius:8px;padding:14px 18px;margin:18px 0}

/* product page */
.product{display:grid;grid-template-columns:1fr;gap:28px;margin-top:18px}
@media(min-width:820px){.product{grid-template-columns:1fr 1fr;gap:40px;align-items:start}}
.gallery .main{aspect-ratio:1/1;background:linear-gradient(160deg,#f4efe2,#e7efe2);border:1px solid var(--line);border-radius:var(--r);display:flex;align-items:center;justify-content:center;padding:24px;overflow:hidden}
.gallery .main img{width:100%;height:100%;object-fit:contain}
.thumbs{display:flex;gap:10px;margin-top:10px}
.thumb{flex:1;aspect-ratio:1/1;border:1px solid var(--line);border-radius:10px;background:linear-gradient(160deg,#f4efe2,#e7efe2);display:flex;align-items:center;justify-content:center;padding:8px;font-size:.66rem;color:#6b5a33;text-align:center}
.thumb img{width:100%;height:100%;object-fit:contain}
.pinfo h1{font-family:var(--serif);font-size:2rem;color:var(--forest-700);margin:0 0 .15em}
.pinfo .pmeta{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.pinfo .pprice{font-size:1.5rem;font-weight:700;color:var(--ink)}
.heatbadge{display:inline-flex;align-items:center;gap:6px;background:var(--cream-2);border:1px solid var(--line);border-radius:999px;padding:6px 12px;font-weight:700;font-size:.85rem;color:var(--forest-700)}
.pshort{font-size:1.1rem;color:#33433b}
.addbar{display:flex;gap:10px;flex-wrap:wrap;margin:16px 0}
.addbar .btn{flex:1;min-width:180px}
.trustlist{list-style:none;padding:0;margin:10px 0 0;font-size:.92rem;color:var(--ink-soft)}
.trustlist li{padding:3px 0}
.pspec{border-top:1px solid var(--line);margin-top:22px;padding-top:16px}
.pspec h2{font-size:1.15rem;margin:0 0 .4em}
.stickybar{position:sticky;bottom:0;z-index:30;background:rgba(251,247,238,.96);backdrop-filter:blur(6px);border-top:1px solid var(--line);padding:10px 0;display:none}
.stickybar .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px}
.stickybar .sb-name{font-weight:700;color:var(--forest-700)}
@media(max-width:819px){.stickybar.on{display:block}}

/* blog post */
.post{max-width:72ch;margin:0 auto}
.post .meta{color:var(--ink-soft);font-size:.9rem;margin-bottom:6px}
.post .feat{border-radius:var(--r);overflow:hidden;aspect-ratio:16/9;background:#234538;margin:8px 0 22px}
.post .feat img{width:100%;height:100%;object-fit:cover}
.post p,.post li{font-size:1.06rem;color:#33433b}

/* footer */
footer.site{background:var(--forest-900);color:#cdded3}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:26px 20px;padding:46px 20px 24px}
@media(min-width:760px){.fgrid{grid-template-columns:2fr 1fr 1fr 1fr}}
footer h4{color:#fff;font-family:var(--sans);font-size:.78rem;text-transform:uppercase;letter-spacing:.12em;margin:0 0 4px}
footer a{color:#cdded3;display:block;padding:10px 0;min-height:44px;font-size:.92rem}
footer a:hover{color:var(--gold)}
.fbrand{font-family:var(--serif);color:#fff;font-size:1.2rem;margin-bottom:8px}
.tagline{border-top:1px solid rgba(255,255,255,.12);text-align:center;padding:16px;font-size:.82rem;letter-spacing:.04em;color:#adc3b4}

/* reveal animation (JS + motion allowed only) */
.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.js .reveal.in{opacity:1;transform:none}

/* homepage intro pixel-reveal — only rendered on the homepage when show_intro_animation is true.
   Decorative overlay layered above the hero photo but below the scrim/text (z-index:1), so it
   never blocks the CTAs; pure CSS, plays once and settles transparent; disabled under reduced motion. */
/* intro — the logo dissolves to reveal the site. Homepage only, once a session.
   The curtain animation ends in visibility:hidden, so the page is revealed by CSS
   alone even if the JS never runs; pointer-events:none keeps it click-through. */
/* The full-bleed cream field clears via background-color (not opacity), so the mark keeps
   its own alpha instead of fading with the layer. A soft cream halo stays under the mark
   while it dissolves — the logo never breaks up directly over the photo — then the halo
   itself evaporates last. */
/* Timing lives in one place. The old version held the finished mark for 80ms — it faded
   in over .38s and started dissolving at .46s — which is why it read as a flash rather
   than a logo. --hold is the beat where the mark simply sits there, and it is the knob
   that matters; total duration is a consequence of it, not the thing to tune. */
.intro{--photo-in:.45s;--photo-hold:.55s;--morph:.60s;--in:.40s;--hold:.70s;--out:.60s;
  --mark-at:calc(var(--photo-in) + var(--photo-hold) + var(--morph) * .4);
  --settle:calc(var(--mark-at) + var(--in) + var(--hold) + var(--out) - .06s);
  position:fixed;inset:0;z-index:120;display:grid;place-items:center;background-color:var(--cream);pointer-events:none;
  animation:asf-curtain .55s cubic-bezier(.4,0,.2,1) var(--settle) forwards}
/* The dogs become the mark. Not a true morph — that needs frame-by-frame art or video —
   but a convergence: the photo desaturates toward the badge's palette and shrinks to the
   mark's exact size while the mark fades up underneath it. The composition does the rest,
   because the crop puts two faces turned toward each other where the badge puts two
   wolves. If the photo is missing the markup omits it and the intro is the mark alone. */
.intro-photo{position:absolute;width:clamp(190px,48vw,320px);aspect-ratio:1;border-radius:50%;object-fit:cover;
  box-shadow:0 10px 40px rgba(22,41,31,.26);opacity:0;will-change:opacity,transform,filter;
  animation:asf-photo-in var(--photo-in) cubic-bezier(.2,.7,.3,1) forwards,
            asf-photo-out var(--morph) cubic-bezier(.4,0,.2,1) calc(var(--photo-in) + var(--photo-hold)) forwards}
@keyframes asf-photo-in{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}
@keyframes asf-photo-out{from{opacity:1;transform:scale(1);filter:saturate(1) brightness(1)}
  to{opacity:0;transform:scale(.42);filter:saturate(.15) brightness(.8)}}
.intro-halo{position:absolute;width:min(74vw,430px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,var(--cream) 33%,rgba(248,243,232,.72) 52%,rgba(248,243,232,0) 72%);animation:asf-halo .65s ease-out var(--settle) forwards}
/* The mark lightens as it breaks up (brightness), evaporating toward the cream rather
   than darkening into a smudge, and it finishes before the field starts clearing — the
   hero photo has faces near centre, and a blurred mark lingering there reads as a
   redaction. Dissolve first, then reveal; the 60ms overlap keeps it one motion. */
.intro-mark{width:clamp(96px,19vw,140px);height:auto;border-radius:50%;opacity:0;will-change:opacity,transform,filter;
  animation:asf-mark-in var(--in) cubic-bezier(.2,.7,.3,1) var(--mark-at) forwards,
            asf-mark-out var(--out) cubic-bezier(.4,0,.7,.4) calc(var(--mark-at) + var(--in) + var(--hold)) forwards}
@keyframes asf-mark-in{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:scale(1)}}
@keyframes asf-mark-out{0%{opacity:1;transform:scale(1) translateY(0);filter:blur(0) brightness(1)}100%{opacity:0;transform:scale(1.2) translateY(-10px);filter:blur(10px) brightness(1.6)}}
@keyframes asf-halo{to{opacity:0;transform:scale(1.3)}}
@keyframes asf-curtain{0%{background-color:var(--cream)}86%{background-color:rgba(248,243,232,0)}100%{background-color:rgba(248,243,232,0);visibility:hidden}}
html:not(.js) .intro,.no-intro .intro{display:none}
@media(prefers-reduced-motion:reduce){.intro{display:none}}

/* toast */
#toast:empty{display:none}
#toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(calc(100% + 40px));background:var(--ink);color:#fff;padding:12px 18px;border-radius:999px;font-size:.9rem;font-weight:600;box-shadow:var(--shadow);z-index:90;transition:transform .3s ease;max-width:90vw;text-align:center}
#toast.show{transform:translateX(-50%) translateY(0)}

/* reduced motion */
@media(prefers-reduced-motion:reduce){
  .js .reveal{opacity:1!important;transform:none!important;transition:none!important}
  .card,.card .pic img,.note,.btn{transition:none!important}
  html{scroll-behavior:auto}
  #toast{transition:none}
}

/* ---------- cart ---------------------------------------------------------- */
/* Tap targets stay >=44px throughout: this is used one-handed, outdoors, often
   with cold or dirty hands (AGENTS.md accessibility bar). */
.cart{position:relative}
.cart-count{position:absolute;top:2px;right:0;min-width:18px;height:18px;padding:0 5px;
  border-radius:999px;background:var(--chili);color:#fff;font-size:.72rem;line-height:18px;
  font-weight:700;text-align:center}
.cart-lines{margin-top:22px}
.cart-line{display:grid;grid-template-columns:72px 1fr auto;gap:14px;align-items:center;
  padding:16px 0;border-bottom:1px solid var(--line)}
.cart-thumb{border-radius:var(--r);object-fit:cover;background:var(--mist)}
.cart-info{min-width:0}
.cart-name{font-weight:700;color:var(--forest-700);text-decoration:none;font-size:1.05rem}
.cart-name:hover{text-decoration:underline}
.cart-meta{font-size:.9rem;color:var(--ink-soft);margin-top:3px}
.qty{display:inline-flex;align-items:center;gap:2px;border:1px solid var(--line);
  border-radius:999px;background:var(--paper)}
.qty-btn{min-width:44px;min-height:44px;border:0;background:none;cursor:pointer;
  font-size:1.25rem;line-height:1;color:var(--forest-700);border-radius:999px}
.qty-btn:hover{background:var(--mist)}
.qty-n{min-width:2ch;text-align:center;font-weight:700;font-variant-numeric:tabular-nums}
.cart-line-total{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.cart-remove{grid-column:2/-1;justify-self:start;min-height:44px;border:0;background:none;
  cursor:pointer;color:var(--ink-soft);font-size:.9rem;text-decoration:underline;padding:0}
.cart-remove:hover{color:var(--chili-deep)}
.cart-summary{margin-top:26px;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r);padding:20px}
.cart-subtotal-row{display:flex;justify-content:space-between;align-items:baseline;
  font-size:1.15rem}
.cart-subtotal-row strong{font-size:1.5rem;font-variant-numeric:tabular-nums}
.cart-note{font-size:.9rem;color:var(--ink-soft);margin-top:10px}
.cart-error{margin-top:14px;padding:12px 14px;border-radius:var(--r);
  background:#fdecec;color:#8a1c1c;border:1px solid #f3c9c9;font-size:.95rem}
.btn-checkout{width:100%;margin-top:16px}
.cart-secure{font-size:.85rem;color:var(--ink-soft);margin-top:10px;text-align:center}
@media (min-width:600px){
  .cart-line{grid-template-columns:72px 1fr auto auto auto;gap:18px}
  .cart-remove{grid-column:auto;justify-self:end}
  .btn-checkout{width:auto;min-width:220px}
}
.pickup-box{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.pickup-label{display:block;font-weight:700;color:var(--forest-700);margin-bottom:8px}
.pickup-zip{max-width:180px;min-height:44px}
.pickup-msg{font-size:.9rem;margin-top:8px;min-height:1.2em}
.pickup-msg.is-yes{color:var(--forest-600);font-weight:700}
.pickup-msg.is-no{color:var(--ink-soft)}

/* ---------- farm stand (weekly produce, live from Stripe) ------------------ */
.farmstand-loading{color:var(--ink-soft);font-size:.95rem}
/* auto-fit COLLAPSES empty tracks, so a single produce item was stretching to the full
   row width — a lone bag of kale rendered as a billboard. Below 760px a full-width card
   is correct on a phone; at desktop the grid matches .grid.shop exactly (repeat(3,1fr)),
   so one produce card is the same size as one sauce card no matter how many there are. */
.produce-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:16px;margin-top:18px}
@media(min-width:760px){.produce-grid{grid-template-columns:repeat(3,1fr);gap:20px}}
.produce-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;display:flex;flex-direction:column}
.produce-pic{width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--mist)}
.produce-body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:8px;flex:1}
.produce-name{font-size:1.05rem;color:var(--forest-700);margin:0}
.produce-meta{font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.produce-note{font-size:.88rem;color:var(--ink-soft);margin:0;flex:1}
.produce-body .btn{margin-top:4px;width:100%}
.tag-pickup{display:inline-block;margin-left:6px;padding:2px 8px;border-radius:999px;
  background:var(--mist);color:var(--forest-700);font-size:.72rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.03em;vertical-align:middle}
.cart-thumb-veg{width:72px;height:96px;border-radius:var(--r);background:var(--mist);
  display:flex;align-items:center;justify-content:center}