@import url('fonts/bricolage.css');
@import url('fonts/outfit.css');
@import url('fonts/caveat.css');

:root{
  --paper:#FFF8EF; --white:#FFFFFF; --ink:#2E1F28; --soft:#43333B;
  --red:#D9403A; --pink:#E85D75; --gold:#F2A93B; --leaf:#3E7C4F; --berry:#7C4A9E; --blue:#4A5899;
  --border:1px solid var(--ink);
  --pop:none; --pop-sm:none;
  --r:18px;
  --disp:"Bricolage Grotesque",system-ui,sans-serif; --body:"Outfit",system-ui,sans-serif;
  --hand:"Caveat",cursive;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--body);color:var(--ink);font-size:16.5px;line-height:1.6;
  background-color:var(--paper);
  background-image:linear-gradient(rgba(255,248,239,.25),rgba(255,248,239,.25)),url(/assets/bg-woodsy-patina-tall.webp);
  background-size:100% auto;background-position:center top;background-repeat:repeat-y;background-attachment:scroll}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px}
h1,h2,h3{font-family:var(--disp);font-weight:800;line-height:1.05;letter-spacing:-.02em}
.hand{font-family:var(--hand);font-size:1.5rem;color:var(--red)}
.btn{display:inline-flex;align-items:center;gap:.5em;font-family:var(--disp);font-weight:700;font-size:1rem;
  padding:.85em 1.5em;border-radius:999px;border:var(--border);box-shadow:var(--pop-sm);cursor:pointer;
  transition:.15s;background:var(--white);color:var(--ink)}
.btn:hover{transform:translate(2px,2px);box-shadow:none}
.btn-red{background:var(--red);color:#fff}
.btn-gold{background:var(--gold)}
.sticker{display:inline-block;font-family:var(--hand);font-size:1.25rem;background:var(--gold);border:var(--border);
  border-radius:999px;padding:.15em .8em;box-shadow:var(--pop-sm);transform:rotate(-3deg)}

/* gap between inline sticker/kicker labels and the heading right below them */
.sticker + h1, .sticker + h2, .kicker + h1, .kicker + h2{margin-top:.5em}

/* announce + header */
.announce{background:var(--berry);color:#FBEBD9;font-weight:600;text-align:center;padding:.55em 1em;font-size:.9rem;border-bottom:var(--border)}
header{position:sticky;top:0;z-index:50;background:var(--paper);border-bottom:var(--border)}
.nav{display:flex;align-items:center;justify-content:space-between;min-height:80px;gap:1em}
.brand{font-family:var(--disp);font-weight:800;font-size:1.7rem;letter-spacing:-.03em;display:flex;align-items:center;gap:.45em}
/* Logo is a real ~40% larger (height set inline) but a negative bottom margin
   keeps its footprint at the old compact height, so the top bar stays short and
   the logo simply overflows below it. Hover grows it a touch, from the CENTRE,
   so it expands evenly in every direction. */
.brand img{display:block;margin-bottom:-48px;transform-origin:center;transition:transform .2s}
.brand img:hover{transform:scale(1.15)}
.brand .jar{width:46px;height:46px;background:var(--red);border:var(--border);border-radius:12px 12px 16px 16px;
  display:grid;place-items:center;box-shadow:var(--pop-sm);color:#fff;font-size:1.3rem;transform:rotate(-4deg)}
.nav-links{display:flex;gap:1.7em;font-weight:600}
.nav-links a{padding:.35em .2em;border-radius:8px}
.nav-links a:hover,.nav-links a.active{color:var(--red)}
/* Account items live in the topbar on desktop, so the copy that folds into the
   mobile burger dropdown (/shop chrome only) is hidden until the burger shows. */
.nav-acct{display:none}
.cart-btn{font-family:var(--disp);font-weight:700;background:var(--leaf);color:#fff;border:var(--border);border-radius:999px;
  padding:.55em 1.2em;box-shadow:var(--pop-sm);cursor:pointer;transition:.15s;font-size:.95rem}
.cart-btn:hover{transform:translate(2px,2px);box-shadow:none}
/* Right-side topbar action cluster (account + basket + burger). A class, not an
   inline style, so the gap can tighten on phones without editing every page. */
.topbar-actions{display:flex;gap:.7em;align-items:center}

/* ── "My Account" affordance ──────────────────────────────────────────────
   ONE fixed-size account control, canonical HERE (loaded by both the static
   marketing pages AND the dynamic /shop brand chrome, which links this file).
   Owner spec: sits to the RIGHT of the Basket (rightmost), keeps the SAME
   footprint in every state — guest vs signed-in — and on every page, so it
   never shifts the Basket or reflows between pages. Round icon + a two-line
   text stack: lead "My Account" ALWAYS; a smaller sub line beneath it — "Sign
   in" for guests, or the shopper's nickname once signed in (Blade fills it on
   /shop; site.js hydrates it on the static pages via GET /shop/me). The fixed
   width truncates a long nickname with an ellipsis instead of growing. */
.gj-acct{position:relative;flex:0 0 auto}
.gj-acct-ctl{display:inline-flex;align-items:center;gap:.5em;width:158px;box-sizing:border-box;
  font-family:var(--body,inherit);color:var(--ink,#2E1F28);background:transparent;border:0;
  cursor:pointer;text-decoration:none;text-align:left;padding:.28em .3em;border-radius:12px;line-height:1}
.gj-acct-ctl:hover{color:var(--red,#D9403A)}
.gj-acct-ctl:hover .gj-acct-ico{border-color:var(--red,#D9403A)}
.gj-acct-ico{flex:0 0 auto;display:grid;place-items:center;width:34px;height:34px;border-radius:999px;
  border:1px solid var(--ink,#2E1F28);background:var(--white,#fff);box-shadow:var(--pop-sm)}
.gj-acct-ico svg{display:block;width:17px;height:17px}
.gj-acct-txt{display:flex;flex-direction:column;min-width:0;flex:1 1 auto}
.gj-acct-lead{font-family:var(--disp,inherit);font-weight:800;font-size:.9rem;white-space:nowrap;line-height:1.12}
.gj-acct-sub{font-size:.72rem;color:var(--soft,#6E5A64);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;line-height:1.25}
.gj-acct-caret{flex:0 0 auto;font-size:.68rem;color:var(--soft,#6E5A64);transition:transform .15s ease}
/* Signed-in account DROPDOWN. Ported from the /shop brand chrome (storefront-gj
   brand.blade) so the static dropdown matches the app one exactly. site.js drives
   open/close with the [hidden] attribute + the .is-open caret flip (no Alpine).
   The menu positions against the .gj-acct wrapper (position:relative, above). */
.gj-acct-caret.is-open{transform:rotate(180deg)}
.gj-acct-menu{position:absolute;right:0;top:calc(100% + .5em);min-width:190px;z-index:60;
  background:var(--white,#fff);border:1px solid var(--ink,#2E1F28);border-radius:14px;
  box-shadow:none;padding:.4em;display:flex;flex-direction:column}
.gj-acct-menu[hidden]{display:none}
.gj-acct-menu a,.gj-acct-menu button{display:block;width:100%;text-align:left;
  font-family:var(--body,inherit);font-size:.95rem;font-weight:600;color:var(--ink,#2E1F28);
  background:transparent;border:0;cursor:pointer;padding:.55em .7em;border-radius:9px;
  text-decoration:none;line-height:1.2}
.gj-acct-menu a:hover,.gj-acct-menu button:hover{background:var(--paper,#FFF8EF);color:var(--red,#D9403A)}
.gj-acct-logout{margin-top:.25em;padding-top:.35em;border-top:1px solid #E8D9C4}
.gj-acct-logout button{color:var(--soft,#6E5A64)}
.burger{display:none;background:var(--white);border:var(--border);border-radius:10px;width:44px;height:44px;
  font-size:1.3rem;cursor:pointer;box-shadow:var(--pop-sm)}

/* hero — warm artisan split: brand + copy on cream, lifestyle photo on the right */
.hero{padding:44px 0 28px}
.hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:2.6em;align-items:center}
.hero-copy{display:flex;flex-direction:column;align-items:flex-start}
.hero-eyebrow{display:inline-flex;align-items:center;gap:.4em;font-family:var(--hand);font-size:1.5rem;color:var(--red);
  background:var(--white);border:var(--border);border-radius:999px;padding:.05em .95em;box-shadow:var(--pop-sm);transform:rotate(-1.5deg);margin-bottom:.5em}
.hero h1{font-size:clamp(2.5rem,4.6vw,4.4rem);color:var(--ink)}
.hero h1 .out{color:var(--red)}
.hero-copy p{margin:.9em 0 1.4em;font-size:1.12rem;color:var(--soft);max-width:26em;font-weight:700}
.hero .ctas{display:flex;gap:.9em;flex-wrap:wrap}
.hero-photo{position:relative;border:var(--border);border-radius:28px;box-shadow:var(--pop);overflow:hidden;background:#FDF3E3;
  aspect-ratio:1/1;transform:rotate(1.2deg)}
.hero-photo img{width:100%;height:100%;object-fit:cover}
.hero-photo .sticker{position:absolute;top:16px;left:16px;z-index:2;font-size:1.35rem;transform:rotate(-6deg)}

/* "from the market" photo strip */
.strip{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:1.1em}
.strip figure{position:relative;border:var(--border);border-radius:20px;box-shadow:var(--pop-sm);overflow:hidden;background:#FDF3E3;min-height:210px}
.strip figure img{width:100%;height:100%;object-fit:cover}
.strip figcaption{position:absolute;left:12px;bottom:12px;background:var(--white);border:1px solid var(--ink);border-radius:999px;
  padding:.2em .8em;font-family:var(--disp);font-weight:700;font-size:.82rem;box-shadow:var(--pop-sm)}
@media(max-width:820px){.strip{grid-template-columns:1fr 1fr}.strip figure:first-child{grid-column:1/-1}}
@media(max-width:520px){.strip{grid-template-columns:1fr}}

section.block{padding:72px 0}
.sec-head{display:flex;align-items:end;justify-content:space-between;gap:2em;margin-bottom:2em;flex-wrap:wrap}
.sec-head h2{font-size:clamp(2rem,3.6vw,3rem)}
.kicker{display:inline-block;font-family:var(--disp);font-weight:700;font-size:.85rem;letter-spacing:.14em;
  text-transform:uppercase;background:var(--white);border:var(--border);border-radius:999px;padding:.35em 1em;
  box-shadow:var(--pop-sm);margin-bottom:1em}

/* crates (collections) */
.crates{display:flex;flex-wrap:wrap;justify-content:center;gap:1.4em}
.crate{flex:1 1 300px;max-width:373px}
.noimg{width:100%;height:100%;min-height:150px;display:grid;place-items:center;align-content:center;gap:.2em;
  background:repeating-linear-gradient(45deg,#FDF3E3,#FDF3E3 14px,#F7E8CE 14px,#F7E8CE 28px)}
.noimg span{font-size:2.8rem}
.noimg small{font-family:var(--hand);font-size:1.05rem;color:var(--soft)}
.crate{border:var(--border);border-radius:var(--r);box-shadow:var(--pop);overflow:hidden;background:var(--white);transition:.15s}
.crate:hover{transform:translate(3px,3px);box-shadow:none}
.crate .top{height:150px;position:relative;overflow:hidden}
.crate .top img{width:100%;height:100%;object-fit:cover}
.crate .bar{padding:1em 1.2em;display:flex;justify-content:space-between;align-items:center;border-top:var(--border);color:#fff}
.crate .bar b{font-family:var(--disp);font-size:1.15rem}
.crate .bar span{background:#fff;color:var(--ink);border:1px solid var(--ink);border-radius:999px;padding:.15em .7em;
  font-weight:700;font-size:.8rem}

/* product cards */
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5em}
.card{background:var(--white);border:var(--border);border-radius:var(--r);box-shadow:var(--pop-sm);overflow:hidden;
  display:flex;flex-direction:column;transition:.15s;position:relative}
.card:hover{transform:translate(2px,2px);box-shadow:none}
.card .ph{aspect-ratio:1;overflow:hidden;border-bottom:var(--border);position:relative;background:#FDF3E3}
.card .ph img{width:100%;height:100%;object-fit:cover}
.card .price-tag{position:absolute;top:10px;right:10px;background:var(--gold);border:1px solid var(--ink);
  border-radius:999px;font-family:var(--disp);font-weight:800;padding:.25em .7em;transform:rotate(4deg);box-shadow:var(--pop-sm)}
.card .cat{position:absolute;top:10px;left:10px;color:#fff;border:1px solid var(--ink);border-radius:8px;
  padding:.15em .6em;font-size:.72rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase}
.card .body{padding:1em 1.1em 1.15em;display:flex;flex-direction:column;gap:.3em;flex:1}
.card h3{font-size:1.1rem;font-weight:700}
.card .desc{font-size:.85rem;color:var(--soft);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card .row{display:flex;justify-content:space-between;align-items:center;margin-top:auto;padding-top:.6em}
.card .row .oz{font-weight:600;font-size:.82rem;color:var(--soft)}
.add{font-family:var(--disp);font-weight:700;background:var(--red);color:#fff;border:1px solid var(--ink);
  border-radius:999px;padding:.45em 1.1em;cursor:pointer;font-size:.88rem;box-shadow:var(--pop-sm);transition:.15s}
.add:hover{transform:translate(2px,2px);box-shadow:none}
/* Per-size add buttons on the shop cards — one cute pill per jar size, each
   adds that exact size at its own price (replaces the old single Add + tag). */
.card .buy{display:flex;flex-direction:column;gap:.45em;margin-top:auto;padding-top:.7em}
.size-add{display:flex;align-items:center;gap:.5em;width:100%;text-align:left;cursor:pointer;
  font-family:var(--disp);font-weight:700;font-size:.86rem;color:var(--ink);
  background:var(--white);border:1px solid var(--ink);border-radius:999px;
  padding:.3em .38em .3em .9em;box-shadow:var(--pop-sm);transition:.15s}
.size-add:hover{background:var(--red);color:#fff;transform:translate(2px,2px);box-shadow:none}
.size-add .sz{white-space:nowrap}
.size-add .pr{margin-left:auto;font-weight:800}
.size-add .plus{display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:1.5em;height:1.5em;border-radius:50%;background:var(--red);color:#fff;font-weight:800;line-height:1}
.size-add:hover .plus{background:#fff;color:var(--red)}
/* product reviews — star ratings on cards/detail + the reviews list */
.gj-stars{display:inline-flex;align-items:center;gap:1px;font-size:.95rem;line-height:1;vertical-align:middle}
.gj-star{color:#E3D6C3}
.gj-star.on{color:#F2A93B}
.gj-rev-count{margin-left:.35em;font-size:.8rem;color:var(--soft);font-weight:700}
.card .gj-stars{margin:.1em 0 .1em}
.pd-rating{display:inline-flex;margin:.25em 0 0;text-decoration:none}
.gj-review{border:var(--border);border-radius:16px;background:var(--white);box-shadow:var(--pop-sm);padding:1.1em 1.3em;margin-bottom:.9em}
.gj-review-head{display:flex;flex-wrap:wrap;align-items:center;gap:.6em;margin-bottom:.35em}
.gj-review-author{font-weight:700;font-size:.9rem}
.gj-verified{font-size:.72rem;font-weight:700;color:#3E7C4F;background:#EAF7EE;border-radius:999px;padding:.1em .6em}
.gj-review-title{font-family:var(--disp);font-weight:700;margin:.15em 0}
.gj-review-body{color:var(--soft);font-size:.92rem;line-height:1.55}
.gj-review-reply{margin-top:.6em;background:var(--paper);border-radius:10px;padding:.6em .8em;font-size:.88rem;border-left:3px solid var(--gold)}

/* filters */
.filters{display:flex;gap:.7em;flex-wrap:wrap;justify-content:center;margin-bottom:2em}
.chip{font-family:var(--disp);font-weight:700;font-size:.9rem;border:var(--border);border-radius:999px;
  background:var(--white);padding:.5em 1.2em;cursor:pointer;box-shadow:var(--pop-sm);transition:.15s}
.chip:hover{transform:translate(2px,2px);box-shadow:none}
.chip.active{background:var(--ink);color:var(--paper)}
.chip{display:inline-flex;align-items:center;gap:.55em}
.chip .emoji{height:1.05em;width:auto;vertical-align:-.15em;flex:none}

/* feature banner */
.feature{border:var(--border);border-radius:26px;box-shadow:var(--pop);overflow:hidden;display:grid;grid-template-columns:1fr 1fr;background:var(--berry);color:#fff}
.feature img{width:100%;height:100%;object-fit:cover;min-height:340px;border-right:var(--border)}
.feature .txt{padding:8%}
.feature h2{color:#fff;font-size:clamp(1.8rem,3vw,2.6rem)}
.feature p{margin:1em 0 1.5em;opacity:.95}

/* recipe cards */
.tri{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4em}
.r-card{background:var(--white);border:var(--border);border-radius:var(--r);box-shadow:var(--pop-sm);padding:1.5em;transition:.15s}
.r-card:hover{transform:translate(2px,2px);box-shadow:none}
.r-card .tag{display:inline-block;background:var(--pink);color:#fff;border:1px solid var(--ink);border-radius:8px;
  padding:.15em .7em;font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.r-card h3{margin:.6em 0 .3em;font-size:1.3rem}
.r-card p{color:var(--soft);font-size:.92rem}
.pill{display:inline-block;background:var(--paper);border:1px solid var(--ink);border-radius:999px;padding:.25em .8em;
  font-size:.8rem;font-weight:700;margin:.5em .35em 0 0}

/* newsletter + footer */
.newsletter{border-top:var(--border);background:#6B2D4F;padding:66px 0;text-align:center;color:#fff}
.newsletter h2{color:#fff;font-size:clamp(1.9rem,3.2vw,2.7rem)}
.newsletter p{margin:.7em 0 1.4em;font-weight:500}
.newsletter form{display:flex;gap:.8em;justify-content:center;flex-wrap:wrap}
.newsletter input{border:var(--border);border-radius:999px;padding:.9em 1.4em;min-width:300px;font-size:1rem;
  font-family:var(--body);box-shadow:var(--pop-sm)}
footer{background:var(--ink);color:#EFE3D8;padding:60px 0 30px}
footer .big{font-family:var(--disp);font-weight:800;font-size:clamp(2.4rem,6vw,4.5rem);color:var(--paper);letter-spacing:-.03em;line-height:1;margin-bottom:.6em}
footer .big em{font-style:normal;color:var(--gold)}
footer .cols{display:grid;grid-template-columns:repeat(3,1fr);gap:2em;margin:.7em 0 2em}
footer h4{font-family:var(--disp);color:#fff;margin-bottom:.7em}
footer a{display:block;padding:.2em 0;opacity:.85;overflow-wrap:anywhere}
footer a:hover{opacity:1;color:var(--gold)}
footer .legal{border-top:2px solid rgba(239,227,216,.25);padding-top:1.5em;display:flex;justify-content:space-between;flex-wrap:wrap;gap:1em;font-size:.85rem;opacity:.8}

/* page hero */
/* Vertical rhythm as LONGHANDS. A `padding:V 0 V` shorthand on an element that
   also carries .wrap resets .wrap's horizontal 24px to 0, which starts the
   heading 24px left of the nav, newsletter and footer on desktop and sits flush
   to the screen edge below 1200px. */
.page-hero{padding-top:56px;padding-bottom:10px}
.page-hero h1{font-size:clamp(2.4rem,4.6vw,3.6rem)}
.page-hero p{color:var(--soft);max-width:46em;margin-top:.8em;font-size:1.05rem;font-weight:700}

/* Marketing-page photo blocks. Geometry lives here rather than inline on the
   element so the phone overrides below can reach it — an inline aspect-ratio or
   grid-template-columns beats every stylesheet rule at any specificity. */
.banner-photo{width:100%;aspect-ratio:5/2;object-fit:cover;display:block}
.photo-2x2{margin-top:1.6em;display:grid;grid-template-columns:1fr 1fr;gap:1em}

/* product detail */
.pd{display:grid;grid-template-columns:1fr 1.05fr;grid-template-areas:"frame head" "frame info";column-gap:52px;row-gap:0;padding:42px 0 72px;align-items:start}
.pd-head{grid-area:head}
.pd-info{grid-area:info}
.pd .frame{grid-area:frame;border:var(--border);border-radius:26px;box-shadow:var(--pop);overflow:hidden;position:sticky;top:112px;background:#FDF3E3}
.pd .frame img{width:100%;height:540px;object-fit:cover}
.pd .frame .sticker{position:absolute;top:16px;left:16px}
.pd h1{font-size:clamp(2.2rem,4vw,3.2rem)}
.pd .price-line{display:flex;align-items:center;gap:.7em;margin:.7em 0 1em}
.pd .price-line .p{font-family:var(--disp);font-weight:800;font-size:2rem;color:var(--red)}
.pd .desc{color:var(--soft);margin-bottom:1.4em;font-size:1.02rem}
.opt-label{font-family:var(--disp);font-weight:700;display:block;margin:1.1em 0 .5em}
.size-opts{display:flex;gap:.7em;flex-wrap:wrap}
.size-opts label{border:var(--border);border-radius:14px;background:var(--white);padding:.7em 1.2em;font-weight:700;
  cursor:pointer;box-shadow:var(--pop-sm);transition:.15s;font-size:.92rem}
.size-opts input{display:none}
.size-opts input:checked+label{background:var(--gold)}
.qty{display:inline-flex;border:var(--border);border-radius:999px;background:var(--white);box-shadow:var(--pop-sm)}
.qty button{width:42px;height:48px;background:none;border:0;font-size:1.25rem;cursor:pointer;font-weight:700}
.qty span{min-width:34px;display:grid;place-items:center;font-weight:800;font-family:var(--disp)}
.buy-row{display:flex;gap:1em;align-items:center;margin:1.4em 0;flex-wrap:wrap}
.panel{background:var(--white);border:var(--border);border-radius:var(--r);box-shadow:var(--pop-sm);padding:1.5em}
table.tiers{width:100%;border-collapse:collapse;font-size:.92rem}
table.tiers td{padding:.5em .2em;border-bottom:2px dashed #E8D9C4}
table.tiers tr:last-child td{border:0}
table.tiers td:last-child{text-align:right;font-weight:800;font-family:var(--disp)}
details.acc{border:var(--border);border-radius:var(--r);background:var(--white);box-shadow:var(--pop-sm);
  padding:1em 1.3em;margin-bottom:.9em}
details.acc summary{font-family:var(--disp);font-weight:700;cursor:pointer;list-style:none;display:flex;justify-content:space-between}
details.acc summary:after{content:"↓";font-weight:800}
details.acc[open] summary:after{content:"↑"}
details.acc .inner{padding-top:.8em;color:var(--soft);font-size:.93rem}

/* values / contact reuse */
.values{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4em}
/* Longhands for the same reason as .page-hero — the panels must share the
   heading's left edge, not sit 24px outside it. */
.contact-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:2em;padding-top:36px;padding-bottom:72px;align-items:start}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:1em;margin-bottom:1em}
.panel input,.panel textarea,.panel select{width:100%;border:var(--border);border-radius:12px;padding:.85em 1em;
  font-family:var(--body);font-size:.95rem;background:var(--paper)}
.panel textarea{min-height:130px;resize:vertical}
.info-li{display:flex;gap:.9em;align-items:center;padding:.8em 0;border-bottom:2px dashed #E8D9C4}
.info-li:last-child{border:0}
.info-li .ic{width:46px;height:46px;border:var(--border);border-radius:12px;display:grid;place-items:center;
  font-size:1.2rem;background:var(--gold);flex:none;box-shadow:var(--pop-sm)}
.info-li b{display:block;font-size:.95rem}
.info-li span{font-size:.85rem;color:var(--soft)}

.toast{position:fixed;bottom:26px;left:50%;transform:translate(-50%,20px);background:var(--ink);color:var(--paper);
  padding:1em 1.6em;border-radius:14px;border:var(--border);box-shadow:var(--pop-sm);font-weight:600;font-size:.9rem;
  opacity:0;pointer-events:none;transition:.3s;z-index:99}
.toast.show{opacity:1;transform:translate(-50%,0)}

@media(max-width:980px){
  .hero{padding:30px 0 20px}
  .hero-grid{grid-template-columns:1fr;gap:1.8em}
  .hero-photo{order:-1;transform:rotate(0);aspect-ratio:16/11}
  .hero-copy{align-items:center;text-align:center}
  .hero-copy p{max-width:34em}
  .hero .ctas{justify-content:center}
  .grid{grid-template-columns:repeat(2,1fr)}
  .crates,.tri,.values{grid-template-columns:1fr 1fr}
  .feature{grid-template-columns:1fr}
  .feature img{border-right:0;border-bottom:var(--border)}
  .pd{grid-template-columns:1fr;grid-template-areas:"head" "frame" "info"}
  /* Reset the desktop sticky offset: as a stacked grid the frame is position:relative,
     so a leftover top:112px would shove the image 112px DOWN into the info row,
     overlapping the price + description (F-17). */
  .pd .frame{position:relative;top:0}
  .contact-grid{grid-template-columns:1fr}
  footer .cols{grid-template-columns:1fr 1fr}
  .nav-links{display:none;position:absolute;top:100%;left:0;right:0;background:var(--paper);border-bottom:var(--border);
    flex-direction:column;padding:1.3em;gap:1em;z-index:49}
  .nav-links.open{display:flex}
  .burger{display:grid;place-items:center}
  /* Mobile: the "My Account" items fold into the burger dropdown, and the
     standalone topbar account control is dropped on BOTH chromes (/shop blade AND
     the static marketing pages — one behavior, no per-chrome fork). Leaves the
     phone topbar to just Basket + burger — uncluttered — while the dropdown
     carries the full nav + account as one tidy tappable list. */
  .topbar-actions .gj-acct{display:none}
  .nav-acct{display:flex;flex-direction:column;gap:.55em;margin-top:.2em;padding-top:1em;
    border-top:2px dashed #E8D9C4}
  .nav-acct-head{font-family:var(--disp);font-weight:800;font-size:.72rem;letter-spacing:.12em;
    text-transform:uppercase;color:var(--soft);margin-bottom:.1em}
  .nav-acct form{margin:0}
  .nav-acct button{font:inherit;font-weight:600;color:var(--ink);background:transparent;border:0;
    padding:.35em .2em;border-radius:8px;text-align:left;cursor:pointer;width:100%}
  .nav-acct button:hover{color:var(--red)}
  /* Static pages bake BOTH account states in the burger; site.js toggles [hidden]
     from its cached /shop/me state (guest link vs signed-in items). */
  .nav-acct [data-nav-user]{display:flex;flex-direction:column;gap:.55em}
  .nav-acct [data-nav-user][hidden]{display:none}
}
@media(max-width:600px){
  body{font-size:15.5px}
  .grid,.crates,.tri,.values,.photo-2x2,footer .cols,.f-row{grid-template-columns:1fr}
  /* Shop: one product per line as a horizontal card (thumb left, text right) so
     names/prices/description never get compressed the way the old 2-up grid did
     on a narrow phone. */
  .grid{grid-template-columns:1fr}
  /* overflow visible so the corner price sticker can straddle the edge; the thumb
     (left) and body (right) get their outer corners re-rounded to keep the card
     shape now that the card no longer clips them. */
  .grid .card{flex-direction:row;overflow:visible}
  .grid .card .ph{width:38%;flex:none;aspect-ratio:1;position:static;border-bottom:0;border-right:var(--border);border-radius:var(--r) 0 0 var(--r)}
  .grid .card .body{flex:1;min-width:0;border-radius:0 var(--r) var(--r) 0}
  /* On the small thumbnail the category badge (top-left) collides with the price
     tag; category is already available via the filters, so drop it. */
  .grid .card .ph .cat{display:none}
  /* Price: a smaller sticker pinned to the CARD's top-right corner, straddling the
     edge (.ph is static so the tag anchors to the card, putting it on the right). */
  .grid .card .price-tag{top:-9px;right:-9px;font-size:.74rem;padding:.12em .55em;transform:rotate(6deg);z-index:3}
  /* Filters: a single swipeable row instead of the ~460px wrapped chip block. */
  .filters{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;gap:.5em;padding-bottom:.5em;margin-bottom:1.4em;scrollbar-width:none}
  .filters::-webkit-scrollbar{display:none}
  .chip{font-size:.82rem;padding:.42em .95em;flex:0 0 auto;white-space:nowrap}
  /* Scroll hint on the filter row: a static right-edge fade (::after) + a gently
     nudging chevron (::before); both fade out once scrolled to the end, toggled
     by Alpine adding .at-end on the wrapper. */
  .filters-scroll{position:relative}
  .filters-scroll::after{content:"";position:absolute;top:0;bottom:0;right:0;width:52px;z-index:1;
    background:linear-gradient(to right,rgba(255,248,239,0),var(--paper) 62%);pointer-events:none;transition:opacity .25s}
  .filters-scroll::before{content:"\203A";position:absolute;top:50%;right:7px;z-index:2;transform:translate(0,-50%);
    font-family:var(--disp);font-size:1.75rem;font-weight:800;line-height:1;color:var(--ink);
    pointer-events:none;transition:opacity .25s;animation:fnudge 1.5s ease-in-out infinite}
  .filters-scroll.at-end::before,.filters-scroll.at-end::after{opacity:0}
  .brand{font-size:1.3rem}
  .brand .jar{width:38px;height:38px}
  /* Phone header basket: icon only — hide BOTH the word "Basket" AND the numeric
     "(N)" count (owner: the count reads poorly on phones; hide it on mobile ONLY).
     Tablet (>=601px) and desktop keep the word + count, which show by default. The
     count span carries [data-basket-count] — the shared hook site.js/Livewire paint. */
  .cart-btn span{display:none}
  .cart-btn{padding:.5em .8em}
  /* Phone topbar spacing: just Basket + burger now — the account control folds
     into the burger at <=980px (see above), so the old icon-only shrink is gone. */
  .topbar-actions{gap:.45em}
  section.block{padding:52px 0}
  .newsletter input{min-width:0;width:100%}
  /* At 5/2 the tall harvest source shows only 38% of its height, and on a phone
     that band ends up SHORTER than the gradient overlay sitting on it, so the
     frame's overflow:hidden clips the gradient's transparent head and the opaque
     tail paints the whole photo. 4/3 keeps the band taller than the overlay at
     every width this query covers. */
  .banner-photo{aspect-ratio:4/3}
  .pd{padding-left:20px;padding-right:20px}
  /* Product image: constrained + centered so it isn't a full-width wall. */
  .pd .frame{max-width:320px;margin-left:auto;margin-right:auto}
  .pd .frame img{height:300px}
  .pd .frame .noimg{height:300px!important}
}
@keyframes fnudge{0%,100%{transform:translate(0,-50%)}50%{transform:translate(-5px,-50%)}}

/* Footer brand logo — fills the empty right side of the footer */
footer .wrap{position:relative}
.foot-top{display:flex;justify-content:space-between;align-items:center;gap:1.5em;flex-wrap:wrap}
.foot-top .big{margin-bottom:0}
.footer-logo{height:112px;width:auto;flex:none}
@media(max-width:820px){.foot-top{justify-content:center;gap:.7em}.footer-logo{height:92px}}

/* Merchandising ribbon — 'New!', 'Seasonal'… from configurable product tags */
.card .ph .ribbon{position:absolute;bottom:10px;left:10px;color:#fff;border:1px solid var(--ink);
  border-radius:8px;padding:.15em .6em;font-size:.78rem;font-weight:800;letter-spacing:.03em;
  transform:rotate(-4deg);box-shadow:var(--pop-sm);z-index:2}

/* Product-page photo gallery — arrows + dots when a jam has multiple photos */
.gal-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;background:var(--white);
  border:1px solid var(--ink);border-radius:999px;width:44px;height:44px;font-size:1.6rem;font-weight:800;
  font-family:var(--disp);cursor:pointer;box-shadow:var(--pop-sm);display:grid;place-items:center;line-height:1;padding:0}
.gal-nav.prev{left:12px}
.gal-nav.next{right:12px}
.gal-nav:hover{background:var(--gold)}
.gal-dots{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);display:flex;gap:.45em;z-index:3}
.gal-dots button{width:13px;height:13px;border-radius:50%;border:1px solid var(--ink);background:var(--paper);cursor:pointer;padding:0}
.gal-dots button.on{background:var(--red)}

/* Self-hosted Noto emoji icons — render identically on every device */
.emoji{height:1em;width:auto;vertical-align:-0.16em;display:inline-block}
.announce .emoji{height:1.05em;vertical-align:-0.18em}
.cart-btn .emoji{height:1.15em}
.hero-eyebrow .emoji{height:1.05em;vertical-align:-0.14em}
.ic .emoji{height:1.6rem;vertical-align:middle}
.noimg img.emoji{height:2.8rem;width:auto}
.crate .noimg img.emoji{height:2.1rem;width:auto}

/* Winter Park Farmers Market — make the inline link obviously clickable */
.wpm{color:inherit;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px;font-weight:700;transition:color .15s}
.wpm:hover{color:var(--gold)}
.announce .wpm{color:#fff}
.announce .wpm:hover{color:#FFDFA0}

/* Lighter placeholder text so empty fields don't look pre-filled */
input::placeholder,textarea::placeholder{color:#D6CBC3;opacity:1}
.panel select:invalid,.panel select option[disabled]{color:#D6CBC3}

/* Checkboxes must keep their native check (the generic .panel input rule was hiding it) */
.panel input[type=checkbox],input[type=checkbox]{width:auto;height:auto;min-height:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none;accent-color:var(--red);appearance:auto;-webkit-appearance:checkbox;transform:scale(1.35);vertical-align:-.08em;margin-right:.2em;flex:none}