/** Shopify CDN: Minification failed

Line 31:63 Unexpected "{"

**/
/* AMKA product page, Beekeeper's structure (chosen by Dion 2026-09-05).
   Structure and rhythm: blocks/replica/refs/beekeepers-superfood-honey/spec.json (phone)
   and beekeepers-superfood-honey-wide/spec.json (desktop). Skin: the AMKA kit only:
   gold #FFD700 (highlights only), black, white, indigo #2E3192 as the key accent,
   radii 999 / 24 / 28, Averta body, Belgro display, off-white field for separation. */

@font-face{font-family:Averta;src:url(averta-400--b76e1adb.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Averta;src:url(averta-600--54cbc26e.woff2) format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:Averta;src:url(averta-800--0750cd9f.woff2) format('woff2');font-weight:800;font-display:swap}
@font-face{font-family:Belgro;src:url(belgro-800--a5d8e4bb.woff2) format('woff2');font-weight:800;font-display:swap}

:root{
  --gold:#FFD700;--gold-deep:#C9A227;--indigo:#2E3192;--black:#111010;--white:#fff;
  --ink:#14110E;--muted:#6E6558;--line:#E6E0D4;--field:#F7F3EA;
  --accent:var(--indigo);
  --r-pill:999px;--r-card:24px;--r-media:28px;
  --pad:20px;--wrap:1200px;
  --body:Averta,"Helvetica Neue",system-ui,-apple-system,Arial,sans-serif;
  --display:Belgro,Averta,Georgia,serif;
}
*{box-sizing:border-box}
/* BUTTON LAW (Dion 2026-09-08, live review): the label of every button:not(.tab), pill and tag is centred in its
   control, vertically and horizontally, at every size and state. Declared EARLY so a component that
   needs a different justify (a two-part add button with a price on the right) still wins later. Any
   exception is written down beside the component that makes it. */
button:not(.tab),.btn,.add,.tag,.badge,.pill,.size,.go,.icobtn,{display:inline-flex;align-items:center;justify-content:center;line-height:1;text-align:center}
.tags{align-items:center}
.tag{min-height:26px}

html{scroll-behavior:smooth}
body{margin:0;background:var(--white);color:var(--ink);font:16px/1.55 var(--body);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--display);font-weight:800;line-height:.95;letter-spacing:-.01em;margin:0}
p{margin:0}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)}
button{font:inherit;color:inherit}

/* 1 announcement, 46px like the source */
.announce{background:var(--black);color:var(--white);font-size:13px;font-weight:600;letter-spacing:.02em;
  text-align:center;padding:0 var(--pad);min-height:46px;display:flex;align-items:center;justify-content:center}
.announce span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* 2 header, sticky, 76px */
.topbar{position:sticky;top:0;z-index:20;background:var(--white);border-bottom:1px solid var(--line)}
.topbar .bar{min-height:76px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px}
.brandlink img{height:40px;width:auto}
.findform{display:none}
.findlink{font-weight:600;font-size:14px;text-decoration:none;min-height:44px;display:inline-flex;align-items:center;padding:0 10px}
@media(min-width:900px){.findlink{display:none}}
.mainnav{display:none;gap:22px;font-weight:600;font-size:15px}
.mainnav a{text-decoration:none}
.cartbtn{border:1px solid var(--ink);background:var(--white);border-radius:var(--r-pill);padding:0 16px;min-height:44px;font-weight:600;cursor:pointer}
.cartbtn [data-cart-count]{display:inline-block;min-width:22px;height:22px;line-height:22px;text-align:center;border-radius:11px;background:var(--gold);color:var(--black);font-size:12px;margin-left:6px}
@media(min-width:900px){
  .topbar .bar{grid-template-columns:auto 1fr auto auto}
  .mainnav{display:flex;justify-content:center}
  /* ONE pill: field and Find inside the same white container (Dion 2026-09-09) */
  .findform{display:flex;align-items:center;gap:0;background:var(--white);border:1px solid var(--line);
    border-radius:var(--r-pill);padding:0 4px 0 0;min-height:44px;max-width:min(300px,26vw);overflow:hidden}
  .findform:focus-within{border-color:var(--ink)}
  .findform input{flex:1 1 auto;min-width:0;width:100%;border:0;background:transparent;padding:0 6px 0 16px;
    min-height:42px;font:inherit;font-size:15px;color:inherit}
  .findform input:focus{outline:none}
  .findform input::placeholder{color:rgba(20,17,14,.5)}
  .findform button{flex:none;border:0;cursor:pointer;font-weight:800;font-size:14px;color:var(--paper);
    background:var(--ink);border-radius:var(--r-pill);min-height:34px;padding:0 16px;
    display:inline-flex;align-items:center;justify-content:center;line-height:1}
}

/* 3 gallery: square slides side by side, dots below (source 350 square, dots at 500) */
.hero{padding:20px 0 0}
.gal{position:relative}
.galtrack{display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.galtrack::-webkit-scrollbar{display:none}
.galtrack figure{margin:0;flex:0 0 100%;scroll-snap-align:start;aspect-ratio:1/1;background:var(--field);border-radius:var(--r-media);
  overflow:hidden;display:flex;align-items:center;justify-content:center}
.galtrack img{width:100%;height:100%;object-fit:contain;padding:8%}
.galtrack figure.photo img{object-fit:cover;padding:0}
.badge{position:absolute;top:12px;left:12px;background:var(--gold);color:var(--black);font-size:11px;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;padding:6px 10px;border-radius:var(--r-pill);z-index:2}
.dots{display:flex;gap:8px;justify-content:center;padding:8px 0 0;margin:0;list-style:none}

/* 4 buy box (source y532 to 1232) */
.buy{padding:24px 0 16px}
.buy h1{font-size:clamp(30px,8vw,40px)}
.buy .tagline{font-size:17px;color:var(--muted);margin-top:8px}
.buy .rating{font-size:14px;color:var(--muted);margin-top:10px}
.desc{font-size:16px;line-height:1.55;margin:12px 0 0;max-width:54ch}
.facts{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:8px}
.facts li{display:flex;gap:10px;align-items:flex-start;font-size:15px}
.facts li::before{content:"";flex:0 0 18px;height:18px;border-radius:50%;background:var(--gold);margin-top:2px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M4 9.5l3 3 7-7' fill='none' stroke='%23111010' stroke-width='2'/%3E%3C/svg%3E")}
.lbl{display:block;font-weight:800;font-size:14px;margin:22px 0 10px}
.tabs{display:grid;gap:12px}
.tab{position:relative;display:flex;align-items:center;gap:12px;border:1.5px solid var(--line);border-radius:var(--r-card);padding:14px 16px;
  min-height:56px;background:var(--white);cursor:pointer;text-align:left;width:100%}
.tab .box{flex:0 0 16px;height:16px;border:1.5px solid var(--ink);border-radius:50%}
.tab.on{border-color:var(--ink);background:var(--field)}
.tab.on .box{background:var(--ink);box-shadow:inset 0 0 0 3px var(--white)}
.tab b{font-weight:800}
.tab .tp{margin-left:auto;font-weight:600;white-space:nowrap}
.tab .rib{position:absolute;right:16px;top:-11px;background:var(--gold);color:var(--black);font-size:11px;font-weight:800;padding:3px 9px;border-radius:var(--r-pill)}
.tab[disabled]{opacity:.45;cursor:not-allowed}
.pills{display:flex;flex-wrap:wrap;gap:8px}
.pill{border:1.5px solid var(--line);background:var(--white);border-radius:var(--r-pill);padding:0 16px;min-height:44px;font-weight:600;cursor:pointer}
.pill.on{background:var(--ink);color:var(--white);border-color:var(--ink)}
.pill[disabled]{opacity:.45;cursor:not-allowed;text-decoration:line-through}
.addbtn{display:flex;justify-content:space-between;align-items:center;width:100%;min-height:52px;margin-top:20px;background:var(--black);color:var(--white);
  border:0;border-radius:var(--r-pill);padding:0 22px;font-weight:800;font-size:16px;cursor:pointer}
.addbtn[disabled]{opacity:.5;cursor:not-allowed}
.assure{font-size:13px;color:var(--muted);text-align:center;margin-top:12px}

/* 5 seals: four 60px circles (source y1248) */
.seals{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:16px 0 8px;list-style:none;margin:0}
.seals li{text-align:center;font-size:11px;font-weight:600;line-height:1.2}
.seals .ic{width:66px;height:66px;border-radius:50%;border:1.5px solid var(--ink);margin:0 auto 6px;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:0 4px;
  background:var(--white);font-family:var(--display);font-size:13px;line-height:1;overflow:hidden}
.seals .ic img{width:34px;height:34px}
.seals .ic span{font-size:12px;font-weight:800;letter-spacing:0;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis;line-height:1}

/* 6 pairs well with: three rows, thumb left, title, price, Add (source y1333 to 1750) */
.pairs{padding:44px 0 32px}
.pairs h2{margin:0 0 18px}
.prow img.live,.fcard img.live{mix-blend-mode:multiply}
.pairs h2,.h2{font-size:clamp(24px,6vw,32px)}
.prow{display:grid;grid-template-columns:80px 1fr auto;gap:14px;align-items:center;padding:12px 0;border-top:1px solid var(--line)}
.prow:first-of-type{border-top:0}
.prow .pimg{display:block;width:80px;height:80px;background:var(--field);border-radius:16px;padding:6px;flex:none}
.prow img{width:100%;height:100%;object-fit:contain;background:transparent;border-radius:0;padding:0;display:block}
.prow img.live{mix-blend-mode:multiply}
.prow b{display:block;font-weight:800}
.prow .pp{font-size:14px;color:var(--muted)}
.prow .add{border:1.5px solid var(--ink);background:var(--white);border-radius:var(--r-pill);padding:0 14px;min-height:44px;font-weight:800;cursor:pointer;white-space:nowrap}

/* 7 accordions: three toggle rows (source y1734 to 1941, 62px each) */
.acc{padding:8px 0 24px}
.acc details{border-top:1px solid var(--line)}
.acc details:last-child{border-bottom:1px solid var(--line)}
.acc summary{list-style:none;cursor:pointer;min-height:62px;display:flex;align-items:center;justify-content:space-between;font-weight:600;font-size:15px}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"+";font-size:22px;font-weight:400}
.acc details[open] summary::after{content:"\2212"}
.acc .body{padding:0 0 18px;color:var(--ink);font-size:15px;display:grid;gap:8px}
.acc .body ul{margin:0;padding-left:18px}

/* 8 story timeline (source y1988 to 2700): heading, vertical line, markers */
.story{background:var(--field);padding:40px 0}
.story h2{font-size:clamp(28px,7vw,44px);margin-bottom:24px}
.tl{list-style:none;margin:0;padding:0 0 0 28px;position:relative;display:grid;gap:26px}
.tl::before{content:"";position:absolute;left:8px;top:6px;bottom:6px;width:2px;background:var(--ink)}
.tl li{position:relative}
.tl li::before{content:"";position:absolute;left:-26px;top:6px;width:14px;height:14px;border-radius:50%;background:var(--gold);border:2px solid var(--ink)}
.tl b{display:block;font-weight:800}
.tl p{font-size:15px;color:var(--muted)}

/* 9 image with text (source y2788, single square) */
.iwt{padding:40px 0}
.iwt img{border-radius:var(--r-media);aspect-ratio:1/1;object-fit:cover;width:100%}
.iwt .txt{padding:20px 0 0}
.iwt h2{font-size:clamp(26px,6.5vw,40px);margin-bottom:10px}
/* SCENE variant (Dion 2026-09-10): a restrained landscape photograph on its own, at the picture's
   real 3:2, so nothing is stretched and the cup is never cropped. One caption line under it. */
.iwt.scene .wrap{max-width:980px}
.iwt.scene img{aspect-ratio:3/2;object-fit:cover;width:100%}
.iwt.scene .notes{margin:14px 0 0;text-align:center;font-size:13px;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;opacity:.6}

/* 10 the range (the source's "ingredients" band): stacked cards, image left */
.range{padding:40px 0;border-top:1px solid var(--line)}
.range .sub{color:var(--muted);margin:8px 0 20px}
.rgrid{display:grid;gap:14px}
.rcard{display:grid;grid-template-columns:122px 1fr;gap:16px;align-items:center;text-decoration:none;border:1.5px solid var(--line);border-radius:var(--r-card);padding:12px}
.rcard img{width:122px;height:122px;object-fit:contain;background:var(--field);border-radius:18px;padding:8px}
.rcard > div{display:grid;gap:6px;align-content:center;min-width:0}
.rcard b{display:block;font-family:var(--display);font-size:20px;line-height:1.05}
.rcard span{display:block;font-size:14px;color:var(--muted);line-height:1.35}

/* 11 checklist (source y4402): heading, paragraph, check rows */
.check{background:var(--field);padding:40px 0}
.check h2{font-size:clamp(26px,6.5vw,44px);margin-bottom:10px}
.check p.lead{color:var(--muted);margin-bottom:18px}
.check ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.check li{display:flex;gap:12px;align-items:center;background:var(--white);border-radius:var(--r-card);padding:14px 16px;font-weight:600}
.check li::before{content:"\2713";flex:0 0 28px;height:28px;border-radius:50%;background:var(--gold);color:var(--black);display:flex;align-items:center;justify-content:center;font-size:14px}

/* 12 full bleed image (source y5016, 390 square) */
.bleed img{width:100%;aspect-ratio:1/1;object-fit:cover}

/* 13 FAQ band, dark (source y5406 to 5972) */
.faq{background:var(--black);color:var(--white);padding:40px 0}
.faq h2{font-size:clamp(28px,7vw,44px);margin-bottom:20px}
.faq details{border-top:1px solid rgba(255,255,255,.22)}
.faq details:last-child{border-bottom:1px solid rgba(255,255,255,.22)}
.faq summary{list-style:none;cursor:pointer;min-height:56px;display:flex;align-items:center;justify-content:space-between;font-weight:600}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:22px;font-weight:400}
.faq details[open] summary::after{content:"\2212"}
.faq .body{padding:0 0 16px;color:rgba(255,255,255,.85);font-size:15px}

/* 14 reviews (source y6003): summary block; here the honest empty state */
.reviews{padding:40px 0;border-bottom:1px solid var(--line)}
.reviews h2{font-size:clamp(26px,6.5vw,40px);margin-bottom:12px}
.reviews .empty{border:1.5px dashed var(--line);border-radius:var(--r-card);padding:24px;text-align:center;color:var(--muted)}
.reviews .empty b{display:block;color:var(--ink);font-size:18px;margin-bottom:6px}

/* 15 frequently bought with (source y8351): 2 up, image, title, price, add */
.fbw{padding:40px 0}
.fbw h2{margin-bottom:18px}
.fgrid2{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;align-items:stretch}
@media(min-width:900px){.fgrid2{grid-template-columns:repeat(4,1fr)}}
.fcard{border:0;background:var(--field);border-radius:var(--r-card);padding:20px 12px 16px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;height:100%}
.fcard .stand{display:flex;align-items:flex-end;justify-content:center;height:clamp(150px,20vw,230px);width:100%;margin-bottom:8px}
.fcard img{height:100%;width:auto;max-width:100%;object-fit:contain;background:transparent;border-radius:0;padding:0}
.fcard b{font-family:var(--body);font-weight:800;font-size:17px;line-height:1.2;min-height:2.4em;display:flex;align-items:center;justify-content:center}
.fcard .pp{font-size:14px;color:var(--muted)}
.fcard .add{margin-top:auto;border:0;background:var(--black);color:var(--white);border-radius:var(--r-pill);min-height:44px;padding:0 20px;font-weight:800;cursor:pointer}
.fbw .all{display:inline-block;margin-top:18px;font-weight:600}

/* 16 footer, dark */

.fgrid{display:grid;gap:26px}






/* sticky add to cart bar (source: fixed, 100px, appears after the inline button) */
.stickybar{position:fixed;left:0;right:0;bottom:0;z-index:15;background:var(--white);border-top:1px solid var(--line);padding:14px var(--pad);
  transform:translateY(110%);transition:transform .24s ease}
.stickybar.show{transform:none}
.stickybar .addbtn{margin:0;max-width:var(--wrap);margin:0 auto}

/* desktop: two column hero, buy column 480 wide like the source; 4 across bands */
@media(min-width:900px){
  .hero{padding:32px 0 0}
  .hero .wrap{display:grid;grid-template-columns:minmax(0,1fr) 480px;column-gap:48px;align-items:start}
  .galcol{position:sticky;top:96px}
  .buy{padding:0}
  .buy h1{font-size:44px}
  .seals{gap:12px}
  .rgrid{grid-template-columns:repeat(4,1fr)}
  .rcard{grid-template-columns:1fr;text-align:center}
  .rcard img{width:100%;height:196px}
  .iwt .wrap{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
  .iwt.scene .wrap{display:block}
  .iwt .txt{padding:0}
  .fgrid2{grid-template-columns:repeat(4,1fr)}
  .fgrid{grid-template-columns:2fr 1fr 1fr}
  .tl{max-width:720px}
  .check ul{grid-template-columns:1fr 1fr}
}

/* tap targets: every text link is at least 44px tall on a phone */
.prow b a,.fcard b a,.rcard b{display:inline-block;padding:12px 0}
.fbw .all{display:inline-block;min-height:44px;line-height:44px;padding:0}


/* ---------- the homepage (same system as the product page) ---------- */
.hh{padding:28px 0 8px}
.hgrid{display:grid;gap:20px;align-items:center}
.htxt h1{font-size:clamp(34px,9vw,64px);max-width:12ch}
.hsub{font-size:18px;margin-top:12px}
.hcta{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 22px;border-radius:var(--r-pill);background:var(--black);color:var(--white);font-weight:800;text-decoration:none}
.btn.ghost{background:var(--white);color:var(--ink);border:1.5px solid var(--ink)}
.htrust{font-size:13px;color:var(--muted);margin-top:14px}
.himg{background:var(--field);border-radius:var(--r-media);aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;overflow:hidden}
.himg img{width:auto;height:88%;object-fit:contain}
.routes{padding:20px 0 0}
.rgrid3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.route{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;text-decoration:none;border:1.5px solid var(--line);border-radius:var(--r-card);padding:12px 8px;min-height:44px}
.route img{width:64px;height:64px;object-fit:contain}
.route b{font-family:var(--display);font-size:15px;line-height:1.05}
.route span{font-size:12px;color:var(--muted)}
.shelf{padding:36px 0}
.shelf.field{background:var(--field)}
.shelf .sub{color:var(--muted);margin:6px 0 16px}
.rail{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 2px 12px;scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.rail .rc{flex:0 0 78%;scroll-snap-align:start}
.cardlink{text-decoration:none;display:flex;flex-direction:column;gap:6px}
.fcard .notes{font-size:13px;color:var(--muted)}
.fcard .add[disabled]{opacity:.5;cursor:not-allowed}
.hfacts{padding:8px 0 24px}
.seals4{grid-template-columns:repeat(4,1fr)}
.dp{background:var(--black);color:var(--white);padding:36px 0}
.dp h2{margin-bottom:18px}
.dpgrid{display:grid;gap:12px}
.dpgrid div{border:1px solid rgba(255,255,255,.22);border-radius:var(--r-card);padding:16px}
.dpgrid b{display:block;font-family:var(--display);font-size:18px;margin-bottom:4px}
.dpgrid span{font-size:15px;color:rgba(255,255,255,.85)}
.dpgrid a{color:var(--gold);font-weight:600}
.hstory .more a{font-weight:800}
.hstory .txt p{margin-top:8px}
@media(min-width:900px){
  .hgrid{grid-template-columns:1.1fr 1fr;gap:48px}
  .rail .rc{flex:0 0 calc(25% - 11px)}
  .dpgrid{grid-template-columns:repeat(4,1fr)}
  .route{flex-direction:row;text-align:left;gap:14px;padding:14px 18px}
  .route b{font-size:18px}
}

/* favourites adopted 2026-09-06 (see blocks/DECISIONS.md, favourites trace) */
.mainnav a.on{background:var(--ink);color:var(--white);border-radius:var(--r-pill);padding:8px 14px}
.acc .body ol{margin:6px 0 0;padding-left:20px;display:grid;gap:6px}
.acc .body .meta{color:var(--muted);font-weight:400;margin-left:8px;font-size:14px}

.fsym{height:34px;width:auto;opacity:.85;filter:invert(1)}
.dpgrid a,.hstory .more a{display:inline-block;min-height:44px;line-height:44px}

.panel.foot{padding-bottom:var(--s4)}
.fbot{padding-bottom:calc(var(--s3) + 90px)}

/* the coffee information panel (Codex round 3): real HTML in our own fonts, selectable */
.detailcard{background:var(--off);padding:var(--s3) 0}
.detailcard .dph{font-family:var(--display);text-transform:uppercase;letter-spacing:-.02em;
  font-size:clamp(20px,3vw,30px);line-height:1;margin:0 0 var(--s2)}
.dpgrid{display:grid;gap:0;margin:0;grid-template-columns:1fr}
@media(min-width:700px){.dpgrid{grid-template-columns:1fr 1fr;column-gap:var(--s3)}}
.dp{display:grid;grid-template-columns:8.5rem 1fr;gap:12px;align-items:baseline;
  padding:12px 0;border-top:1px solid var(--line)}
.dp dt{margin:0;font-size:var(--micro,11px);font-weight:800;letter-spacing:.14em;text-transform:uppercase;opacity:.55}
.dp dd{margin:0;font-size:15px;line-height:1.45}

/* gallery controls: real buttons, visible focus, swipe unchanged (Codex round 3, 2026-09-09) */
.gal{position:relative}
.galtrack:focus-visible{outline:2.5px solid var(--ink);outline-offset:3px;border-radius:var(--r-card,18px)}
.dots{display:flex;gap:8px;justify-content:center;list-style:none;margin:12px 0 0;padding:0}
.dots li{display:flex;width:auto;height:auto;background:none;border-radius:0}
.dotb{width:26px;height:26px;padding:0;border:0;background:none;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;border-radius:50%}
.dotb::before{content:"";width:8px;height:8px;border-radius:50%;background:rgba(20,17,14,.26);transition:background .2s ease,transform .2s ease}
.dotb.on::before{background:var(--ink);transform:scale(1.25)}
.dotb:focus-visible{outline:2.5px solid var(--ink);outline-offset:1px}
.galarrow{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:44px;height:44px;
  border:0;border-radius:50%;cursor:pointer;background:rgba(255,253,247,.92);color:var(--ink);
  font-size:24px;line-height:1;display:inline-flex;align-items:center;justify-content:center;
  box-shadow:0 6px 18px -8px rgba(0,0,0,.45)}
.galarrow.prev{left:10px}.galarrow.next{right:10px}
.galarrow:disabled{opacity:0;pointer-events:none}
.galarrow:focus-visible{outline:2.5px solid var(--ink);outline-offset:2px}
@media(hover:none){.galarrow{display:none}}

/* the one wide lifestyle slide whose subject reaches both edges: show it whole against the cream
   field rather than cropping the hand and the cup handle away (Dion 2026-09-09, L1 only) */
.galtrack figure.photo.fit{background:var(--field)}
.galtrack figure.photo.fit img{object-fit:contain;padding:0;width:100%;height:auto;max-height:100%}

/* ── GALLERY: HTML card slides live inside the swipe track, and a thumbnail rail on desktop.
   No text is ever drawn on a product photograph. (Dion / Codex 2026-09-10) */
.galwrap{display:grid;gap:12px}
@media(min-width:980px){.galwrap{grid-template-columns:76px 1fr;align-items:start}}
.thumbs{display:none}
@media(min-width:980px){
  .thumbs{display:flex;flex-direction:column;gap:10px}
  .thumb{width:76px;height:76px;padding:0;border:1.5px solid var(--line);border-radius:14px;
    background:var(--field);cursor:pointer;overflow:hidden;display:flex;align-items:center;
    justify-content:center;transition:border-color .2s ease}
  .thumb img{width:100%;height:100%;object-fit:contain;padding:8%}
  .thumb .tcard{font-family:var(--display);font-size:20px;line-height:1;opacity:.5}
  .thumb.on{border-color:var(--ink);border-width:2.5px}
  .thumb:focus-visible{outline:2.5px solid var(--ink);outline-offset:2px}
}
.galtrack figure.gcard{background:var(--off);display:flex;align-items:center;justify-content:center;
  padding:clamp(18px,3vw,34px)}
.gcin{width:100%;max-width:44ch}
.gcin h3{font-family:var(--display);text-transform:uppercase;letter-spacing:-.02em;
  font-size:clamp(19px,2.4vw,27px);line-height:1;margin:0 0 14px}
.gcin dl{margin:0;display:grid;gap:0}
.gcrow{display:grid;grid-template-columns:7.5rem 1fr;gap:10px;align-items:baseline;
  padding:9px 0;border-top:1px solid var(--line)}
.gcrow:first-child{border-top:0}
.gcrow dt{margin:0;font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;opacity:.5}
.gcrow dd{margin:0;font-size:14px;line-height:1.4}
@media(max-width:420px){.gcrow{grid-template-columns:1fr;gap:2px}.gcrow dd{font-size:13px}}

/* BUG 2026-09-10: the thumbnail rail widened the gallery column and the track spilled into the
   buy column at 1280, clipping the heading. Grid children need an explicit min-width:0 or they
   refuse to shrink below their content. */
.galcol{min-width:0}
.galwrap{min-width:0}
.galwrap > .gal{min-width:0}
.galtrack{min-width:0;max-width:100%}
.galtrack figure{min-width:0}
@media(min-width:980px){.galwrap{grid-template-columns:76px minmax(0,1fr)}}

/* the shelf badge must never sit over a facts card's heading (Codex mobile round 2) */
.gal:has(.galtrack figure.gcard[data-current]) .badge{opacity:0}
.galtrack figure.gcard{position:relative;z-index:1}
.gal .badge{transition:opacity .2s ease}
.gal.oncard .badge{opacity:0;pointer-events:none}
/* a card thumbnail reads as a word, not a glyph */
.thumb .tcard{font-family:Averta,-apple-system,sans-serif;font-size:11px;font-weight:800;
  letter-spacing:.06em;text-transform:uppercase;opacity:.6;line-height:1.2;text-align:center;padding:0 4px}

/* shelf navigation on the product pages, same module as the rest of the site */


/* ── SHELF NAVIGATION (Dion 2026-09-10, Stumptown-shaped): a desktop mega panel per shelf,
   and the same shelves as accordion tiles on the phone. One data source, site/shell_nav.py. */
.nlinks{display:none}
@media(min-width:980px){.nlinks{display:flex;align-items:center;gap:var(--s3)}}
.mshelf{position:static}
.mtop{color:inherit;text-decoration:none;opacity:.72;white-space:nowrap;cursor:pointer}
.mtop:hover,.mtop.on,.mshelf[data-open] .mtop{opacity:1}
.mega{position:absolute;left:0;right:0;top:100%;background:var(--paper);color:var(--ink);
  border-top:1px solid var(--line);box-shadow:0 26px 50px -30px rgba(0,0,0,.45);z-index:70}
.mega[hidden]{display:none}
.megain{display:grid;grid-template-columns:minmax(190px,.7fr) 2.3fr;gap:var(--s4);
  padding:var(--s3) 0 var(--s4)}
.mlead{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.mlead p{margin:0;font-size:14px;opacity:.72;max-width:26ch}
.mlead .micro{opacity:.5}
.mgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:var(--s2)}
.mtile{display:grid;gap:4px;text-decoration:none;color:inherit;padding:10px;border-radius:16px;
  transition:background .18s ease}
.mtile:hover{background:var(--off)}
.mtile .mimg{display:flex;align-items:center;justify-content:center;height:92px;
  background:var(--field,var(--off));border-radius:12px;overflow:hidden}
.mtile .mimg img{max-width:76%;max-height:80%;width:auto;height:auto;object-fit:contain}
.mtile b{font-size:14px;line-height:1.2}
.mtile span{font-size:12px;opacity:.62;line-height:1.3}
/* the phone panel */
.acat{border-bottom:1px solid var(--line)}
.acat summary{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:16px 0;cursor:pointer;list-style:none;min-height:60px}
.acat summary::-webkit-details-marker{display:none}
.acat .ct{display:grid;gap:2px}
.acat .ct b{font-size:17px}
.acat .ct span{font-size:13px;opacity:.6}
.acat .cx{width:14px;height:14px;flex:none;position:relative}
.acat .cx::before,.acat .cx::after{content:"";position:absolute;background:currentColor;
  left:50%;top:50%;transform:translate(-50%,-50%);transition:opacity .2s ease}
.acat .cx::before{width:14px;height:2px}
.acat .cx::after{width:2px;height:14px}
.acat[open] .cx::after{opacity:0}
.acin{display:grid;gap:2px;padding:0 0 14px}
.acin a{display:grid;gap:1px;text-decoration:none;color:inherit;padding:10px 0;font-size:15px}
.acin a span{font-size:12px;opacity:.55}
.acin .all{font-weight:800;text-decoration:underline;text-underline-offset:3px}
.amore{display:grid;gap:2px;padding:14px 0 0}
.amore a{text-decoration:none;color:inherit;padding:10px 0;font-size:15px;opacity:.78}

/* the accordion carries its own typography: the generic #menu a rule was making every product
   name a 22px block and forcing the note inline (Codex mobile check 2026-09-10) */
#menu .acat summary{border-bottom:0}
#menu .acin a,#menu .amore a{display:grid;gap:2px;padding:11px 0;min-height:0;font-size:15px;
  font-weight:600;border-bottom:0;letter-spacing:0;text-transform:none}
#menu .acin a span{font-size:12px;font-weight:400;opacity:.55;letter-spacing:0}
#menu .acin .all{font-weight:800;text-decoration:underline;text-underline-offset:3px;font-size:14px}
#menu .amore{border-top:1px solid var(--line);margin-top:8px}
#menu .amore a{opacity:.78;font-weight:600}
#menu .acat .ct b{font-size:18px;font-weight:800;letter-spacing:-.01em}
#menu .acat .ct span{font-size:12px;font-weight:400;opacity:.6}

/* the mega panel's own button: ink pill, paper label. It was inheriting the bar's ink colour
   and rendering as an empty dark pill (Codex desktop check 2026-09-10) */
.mega .btn{background:var(--ink);color:var(--paper);border:0}
.mega .btn:hover{background:#000}
.mega .mlead .btn{margin-top:4px}

/* the phone accordion opens to IMAGE TILES, two across, matching the desktop mega panel */
#menu .acin .atiles{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:2px 0 12px}
#menu .acin .mtile{display:grid;gap:3px;padding:8px;border-radius:14px;background:var(--off);
  text-decoration:none;color:inherit;min-height:0;border-bottom:0}
#menu .acin .mtile .mimg{display:flex;align-items:center;justify-content:center;height:104px;
  background:var(--white);border-radius:10px;overflow:hidden}
#menu .acin .mtile .mimg img{max-width:78%;max-height:82%;width:auto;height:auto;object-fit:contain}
#menu .acin .mtile b{font-size:14px;font-weight:800;letter-spacing:-.01em;line-height:1.2}
#menu .acin .mtile span{font-size:11px;font-weight:400;opacity:.6;line-height:1.3}

/* the product header is the sticky bar: the mega panel hangs off it */
.topbar{position:sticky}
.topbar .bar{position:relative}
.topbar #menu{display:none;border-top:1px solid var(--line);background:var(--paper);
  max-height:76vh;overflow:auto}
.topbar #menu.open{display:block}
.topbar #menu .wrap{padding-bottom:var(--s3)}
@media(min-width:980px){.topbar .menubtn{display:none}.topbar #menu{display:none!important}}
@media(max-width:979px){.topbar .nlinks{display:none}}
.topbar .menubtn{background:transparent;border:0;color:inherit;cursor:pointer;
  width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center}
.topbar .menubtn svg{width:22px;height:22px}
/* CONTROLS NEVER SIT OVER CONTENT: the arrows are a desktop convenience only. On the phone the
   swipe, the dots and the keyboard do the job. (Dion 2026-09-10) */
@media(max-width:979px){.galarrow{display:none}}

/* The mobile product header had four children in a three-column grid, so Bag wrapped to a second
   row. One flex row, matching the homepage: logo, then menu, search and bag on the right. */
@media(max-width:899px){
  .topbar .bar{display:flex;align-items:center;gap:6px;min-height:68px}
  .topbar .brandlink{margin-right:auto;flex:none}
  .topbar .brandlink img{height:34px}
  .topbar .menubtn{flex:none;width:40px;height:40px}
  .topbar .findlink{flex:none;padding:0 6px;font-size:13px;min-height:40px}
  .topbar .cartbtn{flex:none;padding:0 12px;min-height:40px;font-size:14px;white-space:nowrap}
  .topbar .cartbtn [data-cart-count]{min-width:20px;height:20px;line-height:20px;margin-left:5px}
}
@media(max-width:359px){.topbar .findlink{display:none}}

/* JUDGE FINDING 1 (Fable 5.1, 2026-09-10): over the dark hero the nav is white-on-transparent,
   and the menu panel inherited that colour onto its own cream background, so every label was
   near-white on cream. The panel sets its own colour, always. */
#menu{color:var(--ink);text-shadow:none}
#menu *{text-shadow:none}
#menu .acat .ct b,#menu .acin .mtile b,#menu .amore a,#menu .acin .all{color:var(--ink)}
#menu .acat .ct span,#menu .acin .mtile span{color:rgba(20,17,14,.62)}
/* JUDGE FINDING 2: the shelf badge sat inside the image frame. It belongs above it. */
.gal .badge{position:static;display:inline-flex;margin:0 0 10px;align-self:flex-start}
.gal{display:flex;flex-direction:column}
/* JUDGE FINDING 4: on a facts card the arrows crowded the rows. Dots, swipe and the keyboard
   still move the track, so no control sits over card content at any width. */
.gal.oncard .galarrow{display:none}

/* DESKTOP PRODUCT HEADER, one row (ROOT live 1440): the row carried a logo, the full shelf nav,
   a hamburger, a Search text link AND a search field, so Bag wrapped underneath. On desktop the
   nav and the field are the interface; the hamburger and the duplicate Search link are hidden.
   The mobile header keeps the hamburger, and the menu it opens is unchanged. */
@media(min-width:980px){
  .topbar .bar{display:flex;align-items:center;gap:clamp(10px,1.4vw,22px);flex-wrap:nowrap;min-height:76px}
  .topbar .brandlink{flex:none;margin-right:auto}
  .topbar .nlinks{flex:0 1 auto;min-width:0}
  .topbar .menubtn{display:none}
  .topbar .findlink{display:none}
  .topbar .findform{flex:0 1 clamp(180px,20vw,280px);margin-left:0}
  .topbar .cartbtn{flex:none;white-space:nowrap}
}

/* ─────────── THE PANTRY SHELF ON A PRODUCT PAGE, Dion 11 Sep: use the better-built
   HOMEPAGE component. Copying the markup alone was not enough, and the first pass
   proved it: the product stylesheet has no rule for .prail, .item, .chips or .phead,
   so the cards landed unstyled and OVERLAPPING, which is the exact defect he
   reported. These are the homepage's own rules, scoped to the section so they
   cannot leak into anything else on the page. */
#pantry-shelf .d2{font-family:Belgro,Impact,sans-serif;font-size:var(--d2);line-height:.95;
  letter-spacing:-.025em;text-transform:uppercase;margin:0 0 var(--s2)}
#pantry-shelf .lede{font-size:17px;max-width:44ch;opacity:.78;margin:0}
#pantry-shelf .panel .phead{text-align:center;padding:var(--s4) 0 var(--s3)}
#pantry-shelf .panel .phead .d2{margin:0}
#pantry-shelf .panel .phead .lede{margin:var(--s2) auto 0}
#pantry-shelf .hero .lede{opacity:.92;margin-top:var(--s1);color:#fff;max-width:30ch}
#pantry-shelf .coffeebar .phead{padding-top:0}
#pantry-shelf .coffeebar .lede{color:#fff;opacity:.86}
#pantry-shelf .cats .cat .stand{display:flex;align-items:flex-end;justify-content:center;
  height:clamp(140px,19vw,215px);width:100%}
#pantry-shelf .cats .cat .stand{width:100%}
#pantry-shelf .cats .phead .d2{font-size:clamp(24px,5vw,46px)}
#pantry-shelf .chips::-webkit-scrollbar{display:none}
#pantry-shelf .chips a{flex:none;font-size:var(--small);font-weight:800;letter-spacing:-.01em;
  color:inherit;text-decoration:none;border:1.5px solid var(--line);
  border-radius:var(--r-pill);padding:9px 16px;min-height:40px;display:inline-flex;
  align-items:center;transition:border-color .2s ease}
#pantry-shelf .chips a:hover{border-color:var(--ink)}
#pantry-shelf .prail{display:flex;gap:var(--s2);overflow-x:auto;scroll-snap-type:x mandatory;
  --pad:clamp(16px,3vw,40px);margin-inline:calc(var(--pad)*-1);padding:0 var(--pad) var(--s4);scroll-padding-inline:var(--pad);scrollbar-width:none;
  -webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
#pantry-shelf .prail::-webkit-scrollbar{display:none}
#pantry-shelf .prail .item{flex:0 0 62%;scroll-snap-align:start;display:flex;flex-direction:column;
  align-items:center;text-align:center;background:var(--off);border-radius:var(--r-card);
  padding:var(--s3) 12px var(--s3)}
#pantry-shelf .prail.four{grid-template-columns:repeat(4,1fr)}
#pantry-shelf .prail .stand{display:flex;align-items:flex-end;justify-content:center;
  height:clamp(170px,22vw,260px);width:100%;margin-bottom:var(--s2)}
#pantry-shelf .prail .item.small .stand{height:clamp(120px,16vw,190px);margin-top:auto}
#pantry-shelf .prail .stand img.live{mix-blend-mode:multiply;max-height:100%}
#pantry-shelf .prail .tags{margin:0 0 6px}
#pantry-shelf .prail .stand img{height:100%;width:auto;max-width:100%;object-fit:contain;
  transition:transform .45s cubic-bezier(.16,1,.3,1)}
#pantry-shelf .prail .item:hover .stand img{transform:translateY(-8px)}
#pantry-shelf .prail h3{font-size:clamp(16px,2.2vw,20px);font-weight:800;letter-spacing:-.025em;margin:0;min-height:1.3em}
#pantry-shelf .prail h3 a{color:inherit;text-decoration:none}
#pantry-shelf .prail h3 a:hover{text-decoration:underline;text-underline-offset:4px}
#pantry-shelf .prail .price{font-size:16px;font-weight:600;margin:8px 0 0;min-height:1.3em}
#pantry-shelf .prail .add{margin-top:10px;font-size:14px;font-weight:800;border:0;border-radius:var(--r-pill);
  padding:9px 18px;min-height:40px;cursor:pointer;background:var(--ink);color:var(--paper);
  transition:transform .3s cubic-bezier(.16,1,.3,1)}
#pantry-shelf .prail .add:hover{transform:translateY(-2px)}
#pantry-shelf .prail a.add.view{display:inline-flex;align-items:center;text-decoration:none;background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px currentColor}
#pantry-shelf .prail .stand a{display:contents}
#pantry-shelf .story .lede{color:inherit;opacity:.86;margin-top:var(--s2)}
#pantry-shelf .foot .join .d2{margin:6px 0 var(--s1)}
#pantry-shelf .foot .join .lede{max-width:40ch}
#pantry-shelf .foot .join .lede{font-size:15px;max-width:38ch;margin:0}
#pantry-shelf .item .note.soldout{font-size:var(--micro);font-weight:800;letter-spacing:.14em;text-transform:uppercase;opacity:.65;margin:0 0 8px}
#pantry-shelf{margin:var(--s4) 0 0;background:var(--white);border-radius:24px;overflow:hidden}
#pantry-shelf .prail{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 var(--edge,20px) var(--inset,56px)}
#pantry-shelf .prail .item{flex:0 0 clamp(190px,26vw,240px);scroll-snap-align:start;background:var(--off,#F5F0E3);border-radius:18px;padding:16px;text-align:center}
@media(max-width:699px){#pantry-shelf .prail{padding-bottom:32px}}

/* shopify-port fix 2026-09-23: the sticky bar appears without sliding when the visitor asks for reduced motion */
@media (prefers-reduced-motion: reduce){.stickybar{transition:none}}