/* ────────────────────────────────────────────────────────────────
   Sensible Bakery storefront

   GENERATED by scripts/extract-store-css.js from
   design/product-template.src.html -- the locked template. Do not edit
   by hand; edit the template and re-run, so the pages stay the design
   that was signed off rather than a drifting copy of it.

   The template is an annotated mock with a phone and a desktop frame
   side by side, so its responsive rules are written as `.phone .x` and
   `.desk .x`. Those become mobile-first base rules and a
   min-width:900px block here. 15 rules that only drew the
   annotated document were dropped.
   ──────────────────────────────────────────────────────────────── */

:root{
  --ff-d:"Fraunces",Georgia,"Times New Roman",serif;
  --ff-b:"Assistant",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --ff-m:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--i);font-family:var(--ff-b);line-height:1.55}
img{max-width:100%;display:block}

.xsell{border-top:1px solid var(--ln);padding:20px 17px 22px;background:var(--bg)}
.xh{
  font-family:var(--ff-d);font-weight:600;font-size:1rem;margin:0;
  color:var(--i);text-transform:uppercase;letter-spacing:.07em;
}
.xgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:14px}
.xcard{
  display:flex;flex-direction:column;border:1px solid var(--ln);border-radius:7px;
  padding:9px;background:var(--bg);
}
.xph{
  aspect-ratio:1;border-radius:5px;border:1px solid var(--ln);
  background-color:var(--soft);background-size:cover;background-position:center;
}
.xph.tbc{filter:grayscale(1);opacity:.45}
.xname{
  font-family:var(--ff-d);font-weight:600;font-size:.78rem;line-height:1.2;
  margin:9px 0 0;letter-spacing:-.005em;
}
.xeach{font-size:.76rem;color:var(--i2);margin:6px 0 10px}
.xcta{
  margin-top:auto;width:100%;font-family:inherit;font-size:.72rem;font-weight:700;
  background:var(--i);color:#fff;border:none;border-radius:5px;padding:9px 8px;
  cursor:pointer;transition:opacity .15s ease;
}
.xcta:hover{opacity:.85}
.sfoot{background:#0d0d0d;color:#fff;padding:26px 17px 18px}
.fcols{display:grid;grid-template-columns:1fr 1fr;gap:22px 18px}
.fcols h5.mt{margin-top:24px}
.fcols h5{
  font-family:var(--ff-d);font-weight:600;font-size:.86rem;margin:0 0 10px;
  color:#fff;letter-spacing:-.005em;
}
.fcols ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.fcols a{
  color:rgba(255,255,255,.72);text-decoration:none;font-size:.78rem;
  transition:color .15s ease;
}
.fcols a:hover{color:#b8e0f1}
.fcols a:focus-visible{outline:2px solid #b8e0f1;outline-offset:3px;border-radius:2px}
.social{display:flex;gap:13px;align-items:center}
.social a{display:inline-flex;color:rgba(255,255,255,.72)}
.social svg{width:16px;height:16px;fill:currentColor;display:block}
.fbot{
  margin-top:22px;padding-top:14px;border-top:1px solid rgba(255,255,255,.14);
  font-size:.68rem;color:rgba(255,255,255,.5);
}
:root{
  --i:#121212;--i2:#4f4f4f;--i3:#767d81;--ln:#e2e7ea;--ln2:#cdd6da;
  --skyb:#b8e0f1;--skyd:#1c6d8f;--sg:#83afb6;--bg:#fff;--soft:#f6f8f9;
  --fresh-bg:#eaf5ee;--fresh-i:#2c6a4a;
  background:var(--bg);color:var(--i);font-family:var(--ff-b);
  line-height:1.55;position:relative;
}
*{box-sizing:border-box}
.mhero{
  position:relative;line-height:0;background:#171a1c;
  background-image:var(--hero);background-size:cover;background-position:center 46%;
}
.mhero{height:340px}
.ttl{
  font-family:var(--ff-d);font-weight:600;color:var(--i);
  font-size:1.52rem;line-height:1.1;letter-spacing:-.015em;margin:0;
}
.tagline{
  margin:6px 0 0;color:var(--i2);font-size:.88rem;font-weight:300;font-style:italic;
}
.pad{padding:16px 17px 20px}
.fresh{
  background:var(--fresh-bg);color:var(--fresh-i);font-weight:600;
  padding:10px 13px;margin:14px 0;font-size:.85rem;border-radius:8px;line-height:1.45;
}
.priceline{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.price{font-family:var(--ff-d);font-weight:600;font-size:1.34rem;letter-spacing:-.01em}
.each{font-size:.83rem;color:var(--i3)}
ul.claims{list-style:none;display:flex;flex-wrap:wrap;gap:5px;margin:11px 0 0;padding:0}
ul.claims li{
  font-size:.68rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  border:1px solid var(--ln2);color:var(--i2);border-radius:99px;padding:3px 9px;
}
.ingr-h{
  font-family:var(--ff-d);font-weight:600;font-size:1.02rem;line-height:1.35;
  margin:17px 0 6px;letter-spacing:-.01em;color:var(--skyd);
}
.ingr{font-size:.795rem;line-height:1.55;color:var(--i2);margin:0}
.fnote{font-size:.7rem;color:var(--i3);margin:6px 0 0}
.alg{margin:7px 0 0;font-size:.795rem;line-height:1.55;color:var(--i2)}
.alg b{color:var(--i);font-weight:700}
hr.m-rule{border:none;border-top:1px solid var(--ln);margin:17px 0}
.buy{display:flex;gap:9px;align-items:stretch}
.stepper{
  display:flex;align-items:center;border:1px solid var(--ln2);border-radius:5px;
  background:#fff;flex:none;overflow:hidden;
}
.stepper button{
  font-family:inherit;font-size:1rem;line-height:1;width:34px;height:100%;
  border:none;background:transparent;color:var(--i2);cursor:pointer;
}
.stepper button:hover{background:var(--soft)}
.stepper .qty{
  width:30px;text-align:center;font-weight:700;font-size:.92rem;
  font-variant-numeric:tabular-nums;
}
.cta{
  flex:1;font-family:inherit;font-size:.9rem;font-weight:700;letter-spacing:.02em;
  background:var(--i);color:#fff;border:none;border-radius:5px;padding:12px 14px;
  cursor:pointer;transition:opacity .15s ease;
}
.cta:hover{opacity:.85}
.nut-h{
  font-family:var(--ff-m);font-size:.63rem;font-weight:500;letter-spacing:.13em;
  text-transform:uppercase;color:var(--i3);margin:0 0 8px;
}
.tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:7px}
.tile{
  border:1px solid var(--ln);border-radius:6px;background:var(--soft);
  padding:10px 7px;text-align:center;
}
.tile b{
  display:block;font-family:var(--ff-d);font-weight:600;font-size:1.2rem;letter-spacing:-.01em;
  font-variant-numeric:tabular-nums;
}
.tile span{
  display:block;font-size:.63rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--i3);margin-top:2px;
}
details.panel{margin-top:10px;border:1px solid var(--ln2);border-radius:6px;background:#fff}
details.panel>summary{
  list-style:none;cursor:pointer;padding:11px 13px;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  font-size:.8rem;font-weight:700;color:var(--i);
}
details.panel>summary::-webkit-details-marker{display:none}
details.panel>summary .caret{
  flex:none;width:9px;height:9px;border-right:1.8px solid var(--i3);border-bottom:1.8px solid var(--i3);
  transform:rotate(45deg);margin-bottom:3px;transition:transform .18s ease;
}
details.panel[open]>summary .caret{transform:rotate(-135deg);margin-bottom:-3px}
details.panel>.pbody{
  padding:0 13px 13px;display:flex;gap:11px;align-items:flex-start;
  flex-direction:row-reverse;justify-content:flex-end;
}
.pillrow.aside{
  flex:0 0 92px;flex-direction:column;gap:6px;margin:0;align-items:stretch;
}
.pillrow.aside span{
  text-align:center;line-height:1.3;padding:5px 6px;
}
.nfp{
  flex:1 1 auto;min-width:0;
  border:1px solid #121212;padding:6px 8px 8px;background:#fff;color:#121212;
  font-family:Helvetica,Arial,"Assistant",sans-serif;font-size:11px;line-height:1.24;
  max-width:300px;
}
.nfp .t{
  font-family:"Assistant",Helvetica,Arial,sans-serif;
  font-weight:800;font-size:25px;line-height:.96;letter-spacing:-.035em;margin:0 0 2px;
}
.nfp .hair{border-top:1px solid #121212;margin:2px 0}
.nfp .b4{border-top:4px solid #121212;margin:2px 0}
.nfp .b10{border-top:9px solid #121212;margin:2px 0}
.nfp .sv{margin:1px 0;font-size:11px}
.nfp .sv b{font-weight:700}
.nfp .cal{display:flex;align-items:flex-end;justify-content:space-between;gap:8px;margin:1px 0}
.nfp .cal .lb{font-weight:800;font-size:13px;line-height:1.05}
.nfp .cal .lb i{display:block;font-style:normal;font-size:10px;font-weight:400}
.nfp .cal .vv{font-weight:800;font-size:27px;line-height:.92;letter-spacing:-.03em}
.nfp .dvh{text-align:right;font-weight:700;font-size:10px;margin:1px 0}
.nfp .r{display:flex;justify-content:space-between;gap:8px;border-top:1px solid #121212;padding:1.5px 0}
.nfp .r.nb{border-top:none}
.nfp .i1{padding-left:11px}
.nfp .i2{padding-left:22px}
.nfp .r b{font-weight:700}
.nfp .micro{display:flex;justify-content:space-between;gap:8px;border-top:1px solid #121212;padding:1.5px 0;font-size:10.5px}
.nfp .fn{font-size:8.5px;line-height:1.2;margin:3px 0 0;color:#121212}
.dsplit{display:grid;grid-template-columns:1.06fr 1fr;gap:26px;padding:20px 22px 0}
.gal{display:flex;flex-direction:column;gap:8px;align-self:start;position:sticky;top:14px}
.thumbs{display:flex;gap:7px}
.thumbs span{
  flex:1;height:76px;border:1px solid var(--ln);border-radius:5px;
  background-color:var(--soft);background-size:cover;background-position:center;background-repeat:no-repeat;
}
.thumbs{padding:9px 17px 0}
.thumbs span{height:64px}
.thumbs span.on{border-color:var(--i);border-width:2px}
.band{
  margin-top:26px;border-top:1px solid var(--ln);background:var(--soft);
  padding:20px 22px;
}
.band .cols{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.band{padding:17px}
.band .cols{grid-template-columns:1fr;gap:15px}
.band h4{
  font-family:var(--ff-d);font-size:.92rem;font-weight:600;margin:0 0 4px;letter-spacing:-.005em;
}
.band p{font-size:.75rem;color:var(--i2);margin:0;line-height:1.5}
.dot.warn{background:var(--flag)}
@media (max-width:900px){
  .dsplit{grid-template-columns:1fr;gap:20px}
  .band .cols{grid-template-columns:1fr;gap:14px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

@media (min-width:900px){
  .xsell{padding:24px 22px 26px}
  .xh{font-size:1.12rem}
  .xgrid{grid-template-columns:repeat(4,1fr);gap:13px}
  .xname{font-size:.8rem}
  .sfoot{padding:34px 22px 20px}
  .fcols{grid-template-columns:repeat(3,1fr);gap:26px}
  .mhero{height:430px}
  .ttl{font-size:1.72rem}
  .pad{padding:0}
}

/* ────────────────────────────────────────────────────────────────
   Hand-authored additions, appended to the generated stylesheet.

   The locked template's mock began at the product hero and had no
   options, so it defines no site header, no breadcrumbs and no
   option controls. These are written in its system -- same tokens,
   same radii, same type -- rather than invented alongside it.
   ──────────────────────────────────────────────────────────────── */

/* ── site header ─────────────────────────────────────────────── */
/* ── site header ───────────────────────────────────────────────────────
   From the approved design: burger and centred logo on a phone, logo left
   with the links centred once there is room, and the search / account / cart
   icons always at the right. */
header.site{
  display:flex;align-items:center;gap:12px;
  padding:11px 16px;border-bottom:1px solid var(--ln);background:var(--bg);
}
header.site .burger{display:flex;flex-direction:column;gap:3.5px;flex:none;background:none;border:0;padding:0;cursor:pointer}
header.site .burger i{display:block;width:17px;height:1.6px;background:var(--i)}
header.site .brand{flex:1;display:flex;justify-content:center;line-height:0}
header.site .brand img{height:44px;width:auto;display:block}
header.site .navlinks{display:none}
header.site .navlinks a{
  font-size:.85rem;color:var(--i2);text-decoration:none;
  display:inline-flex;align-items:center;gap:5px;
}
header.site .navlinks a:hover{color:var(--skyd)}
header.site .cv{
  width:5px;height:5px;border-right:1.4px solid var(--i3);border-bottom:1.4px solid var(--i3);
  transform:rotate(45deg);margin-bottom:2px;display:inline-block;
}
header.site .navicons{display:flex;gap:13px;align-items:center;flex:none;color:var(--i2)}
header.site .navicons a{color:inherit;display:inline-flex;align-items:center;gap:6px;text-decoration:none}
header.site .navicons a:hover{color:var(--skyd)}
header.site .navicons svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.7}
header.site .acct{display:none}
header.site .acct span{font-weight:600;font-size:.85rem}
header.site .cartdot{position:relative}
header.site .cartdot b{
  position:absolute;top:-5px;right:-6px;background:var(--i);color:#fff;border-radius:99px;
  font-size:.52rem;min-width:13px;height:13px;display:grid;place-items:center;font-weight:700;
}
header.site a:focus-visible,header.site button:focus-visible{
  outline:2px solid var(--skyd);outline-offset:3px;border-radius:3px;
}
@media (min-width:900px){
  header.site{padding:13px 22px;gap:18px}
  header.site .burger{display:none}
  header.site .brand{flex:none;justify-content:flex-start}
  header.site .brand img{height:54px}
  header.site .navlinks{display:flex;gap:20px;flex:1;justify-content:center}
  header.site .acct{display:inline-flex}
}

.crumbs{
  padding:10px 22px;font-family:var(--ff-m);font-size:.66rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--i3);border-bottom:1px solid var(--ln);
  display:flex;gap:7px;align-items:center;
}
.crumbs a{color:var(--i3);text-decoration:none}
.crumbs a:hover{color:var(--skyd)}
@media (max-width:620px){.crumbs{padding:9px 16px}}

/* ── options ─────────────────────────────────────────────────── */
.og{margin:16px 0 0}
.og + .og{margin-top:15px}
.oglab{
  font-family:var(--ff-m);font-size:.63rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--i3);margin:0 0 7px;display:block;
}
.oglab b{color:var(--i);font-weight:500;letter-spacing:.04em}
.opts{display:flex;flex-wrap:wrap;gap:6px}
.opt{
  font-family:inherit;font-size:.81rem;font-weight:500;color:var(--i);
  background:var(--bg);border:1px solid var(--ln2);border-radius:5px;
  padding:8px 13px;cursor:pointer;line-height:1.25;
  transition:border-color .12s,box-shadow .12s;
}
.opt:hover{border-color:#9fb0b7}
.opt[aria-pressed="true"]{border-color:var(--i);box-shadow:inset 0 0 0 1px var(--i)}
.opt:focus-visible{outline:2px solid var(--skyd);outline-offset:2px}

/* ── add-ons ─────────────────────────────────────────────────── */
.addon{
  display:flex;gap:10px;align-items:flex-start;margin:15px 0 0;
  border:1px solid var(--ln);border-radius:7px;padding:11px 12px;background:var(--soft);
}
.addon input[type="checkbox"]{
  margin:2px 0 0;width:15px;height:15px;flex:none;accent-color:#121212;cursor:pointer;
}
.addon label{font-size:.85rem;cursor:pointer;line-height:1.4}
.addon .amt{font-weight:700;font-variant-numeric:tabular-nums}
.addon .hint{display:block;font-size:.74rem;color:var(--i3);margin-top:2px}

.reveal{margin:10px 0 0}
.reveal[hidden]{display:none}
.reveal input[type="text"],.og textarea{
  width:100%;font-family:inherit;font-size:.85rem;color:var(--i);
  border:1px solid var(--ln2);border-radius:5px;padding:9px 11px;background:var(--bg);
}
.og textarea{min-height:62px;resize:vertical}
.reveal input:focus-visible,.og textarea:focus-visible{
  outline:2px solid var(--skyd);outline-offset:1px;border-color:transparent;
}
.cnt{font-family:var(--ff-m);font-size:.65rem;color:var(--i3);margin:4px 0 0;text-align:right}

/* ── cross-sell cards are links now ──────────────────────────── */
a.xcard{text-decoration:none;color:inherit}
a.xcard:hover .xname{color:var(--skyd)}
a.xcard:focus-visible{outline:2px solid var(--skyd);outline-offset:2px}

/* ── category and shop listings ──────────────────────────────── */
.listing{padding:22px 22px 30px}
.listing h1{
  font-family:var(--ff-d);font-weight:600;font-size:1.7rem;letter-spacing:-.015em;
  margin:0 0 22px;color:var(--i);
}
nav.cats{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 26px}
nav.cats a{
  font-size:.84rem;font-weight:500;color:var(--i);text-decoration:none;
  border:1px solid var(--ln2);border-radius:999px;padding:6px 14px;
}
nav.cats a:hover{border-color:var(--i)}
nav.cats a[aria-current="page"]{background:var(--i);color:#fff;border-color:var(--i)}
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
@media (min-width:700px){.grid{grid-template-columns:repeat(3,1fr);gap:18px}}
@media (min-width:1000px){.grid{grid-template-columns:repeat(4,1fr)}}

/* Listing tiles. These were the cross-sell thumbnail (.xcard) doing a
   storefront's job, which is why the shop read as an inventory list: a
   name, a price, and none of the writing that makes a product wanted.
   The tagline is the whole point of the tile. */
.tile{display:flex;flex-direction:column;text-decoration:none;color:inherit}
.tile .tph{
  aspect-ratio:1;border-radius:7px;overflow:hidden;border:1px solid var(--ln);
  background-color:var(--soft);
}
.tile .tph img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.tile:hover .tph img{transform:scale(1.035)}
.tile h2,.tile h3{
  font-family:var(--ff-d);font-weight:600;font-size:.97rem;letter-spacing:-.005em;
  margin:10px 0 3px;color:var(--i);text-wrap:balance;
}
.tile:hover h2,.tile:hover h3{color:var(--skyd)}
.tile .ttag{margin:0;color:var(--i2);font-size:.83rem;line-height:1.45;text-wrap:pretty}
.tile .tprice{
  display:inline-block;margin-top:8px;font-family:var(--ff-m);font-size:.78rem;
  font-variant-numeric:tabular-nums;color:var(--i);
}
.tile:focus-visible{outline:2px solid var(--skyd);outline-offset:2px;border-radius:3px}

/* New this season. Deliberately smaller than the grid below it and capped
   short of the full width, so it reads as an aside under the heading rather
   than a second shop. No prices: it is an introduction, not an offer. */
.newrow{
  padding:16px 16px 18px;background:var(--soft);border:1px solid var(--ln);
  border-radius:9px;margin:0 0 26px;
}
.newrow h2{
  font-family:var(--ff-d);font-weight:600;font-size:1.02rem;letter-spacing:-.01em;
  margin:0 0 12px;color:var(--i);
}
.newrow .grid{gap:12px;grid-template-columns:repeat(2,1fr)}
.newrow .tile h3{font-size:.88rem;margin-top:8px}
.newrow .tile .ttag{font-size:.78rem}
@media (min-width:700px){
  .newrow .grid{grid-template-columns:repeat(3,1fr);max-width:660px}
}

/* ── cart ────────────────────────────────────────────────────────────── */
.cartpage{max-width:820px;margin:0 auto}
.cartline{
  display:grid;grid-template-columns:1fr auto auto;gap:12px 16px;align-items:start;
  padding:16px 0;border-bottom:1px solid var(--ln);
}
.cl-name{font-family:var(--ff-d);font-weight:600;font-size:1rem;margin:0}
.cl-opt{font-size:.82rem;color:var(--i2);margin:5px 0 0;line-height:1.5}
.cl-note{font-size:.78rem;color:var(--i3);margin:5px 0 0;line-height:1.45}
.cl-qty{display:flex;align-items:center;border:1px solid var(--ln2);border-radius:5px;overflow:hidden}
.cl-qty button{
  font-family:inherit;font-size:1rem;line-height:1;background:var(--bg);border:none;
  color:var(--i);width:32px;height:34px;cursor:pointer;
}
.cl-qty button:hover{background:var(--soft)}
.cl-qty span{min-width:30px;text-align:center;font-size:.88rem;font-weight:600;font-variant-numeric:tabular-nums}
.cl-price{
  font-weight:700;font-variant-numeric:tabular-nums;text-align:right;min-width:88px;
  display:flex;flex-direction:column;align-items:flex-end;gap:2px;
}
.cl-price .was{font-weight:400;font-size:.8rem;color:var(--i3);text-decoration:line-through}
.cl-remove{
  grid-column:1/-1;justify-self:start;background:none;border:none;padding:0;cursor:pointer;
  font-family:inherit;font-size:.76rem;color:var(--i3);text-decoration:underline;
}
.cl-remove:hover{color:var(--i)}
.cartfoot{padding-top:18px}
.cl-sub{
  display:flex;justify-content:space-between;align-items:baseline;
  font-family:var(--ff-d);font-weight:600;font-size:1.2rem;
  font-variant-numeric:tabular-nums;margin:0 0 6px;
}
.cartfoot .cta{margin-top:16px}
@media (max-width:560px){
  .cartline{grid-template-columns:1fr auto}
  .cl-price{grid-column:2;text-align:right}
}

/* ── wholesale price display ─────────────────────────────────────────── */
.price.was-retail{
  color:var(--i3);text-decoration:line-through;font-size:1.05rem;font-weight:500;
}
.wholesale{
  display:inline-flex;flex-direction:column;margin-left:11px;
  font-size:1.42rem;font-weight:700;font-variant-numeric:tabular-nums;color:var(--i);
}
.wholesale .wl{
  font-family:var(--ff-m);font-size:.58rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--skyd);font-weight:500;margin-top:1px;
}
header.site .nav .quick{color:var(--skyd);font-weight:700}

/* ── home ────────────────────────────────────────────────────────────── */
:root{--amber-bg:#fdf3e3;--amber-i:#8a5a12;--sky-wash:#e6f3fa;
  --story:url("/shop/assets/story.jpg")}
/* announcement + header */
.abar{
  background:var(--sky-wash);color:var(--skyd);text-align:center;
  font-size:.72rem;font-weight:600;padding:7px 10px;
}
.searchbar{padding:9px 16px 12px}
.searchbar div{
  border:1px solid var(--ln2);border-radius:99px;padding:7px 13px;color:var(--i3);
  font-size:.8rem;display:flex;gap:8px;align-items:center;
}
.searchbar svg{width:15px;height:15px;flex:none;stroke:currentColor;fill:none;stroke-width:1.7}
/* hero — photo and type side by side; type never sits on the photo */
.hero{display:grid;grid-template-columns:1fr;gap:0}
.hero .pic{
  position:relative;overflow:hidden;background-color:var(--soft);
  height:400px;
}
.hero .say{padding:22px 17px 24px}
.hero h1{
  font-family:var(--ff-d);font-weight:600;font-size:1.72rem;line-height:1.07;
  letter-spacing:-.02em;margin:0;color:var(--i);text-wrap:balance;
}
.hero h1 .l{display:block;text-wrap:balance}
.hero p{margin:11px 0 0;color:var(--i2);font-size:.93rem;max-width:34ch}
.btn{
  display:inline-block;font-family:inherit;font-size:.86rem;font-weight:700;letter-spacing:.02em;
  background:var(--i);color:#fff;border:none;border-radius:5px;padding:12px 22px;
  cursor:pointer;margin-top:17px;text-decoration:none;
}
.btn.ghost{background:transparent;color:var(--i);border:1px solid var(--ln2)}
.hbtns{display:flex;flex-wrap:wrap;gap:9px;margin-top:17px}
.hbtns .btn{padding:12px 18px}
.hbtns .btn{margin-top:0}
/* hero carousel -----------------------------------------------------------
   The photography rotates; the headline and buttons never move. Slides
   cross-fade rather than slide, so nothing shifts under a reader mid-sentence.
   Auto-advance stops on hover, on keyboard focus, and for anyone who has asked
   their system for reduced motion. */
.slide{
  position:absolute;inset:0;background-size:cover;background-position:center 50%;
  opacity:0;transition:opacity .7s ease;
}
.slide.on{opacity:1}
.slide:nth-child(1){background-image:var(--hero1)}
.slide:nth-child(2){background-image:var(--hero2)}
.slide:nth-child(3){background-image:var(--hero3)}
.slide:nth-child(4){background-image:var(--hero4)}
.dots{
  position:absolute;left:0;right:0;bottom:11px;display:flex;gap:7px;
  justify-content:center;z-index:2;
}
.dots button{
  width:7px;height:7px;padding:0;border-radius:999px;cursor:pointer;
  border:1px solid rgba(255,255,255,.85);background:transparent;
  box-shadow:0 0 3px rgba(0,0,0,.45);transition:background .25s;
}
.dots button[aria-current="true"]{background:#fff}
/* trust strip */
.trust{border-top:1px solid var(--ln);border-bottom:1px solid var(--ln);background:var(--soft);padding:22px 16px 19px}
.trust p{
  font-family:var(--ff-m);font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--i3);margin:0 0 12px;text-align:center;
}
.logos{display:flex;flex-wrap:wrap;gap:10px 20px;align-items:center;justify-content:center}
.logos span{
  font-family:var(--ff-d);font-weight:600;font-size:.9rem;color:var(--i2);
  opacity:.75;letter-spacing:.01em;
}
/* section shell */
.sec{padding:26px 17px}
.sec.alt{background:var(--soft);border-top:1px solid var(--ln);border-bottom:1px solid var(--ln)}
.sh{
  font-family:var(--ff-d);font-weight:600;font-size:1rem;margin:0;color:var(--i);
  text-transform:uppercase;letter-spacing:.07em;
}
.shs{margin:3px 0 0;color:var(--i2);font-size:.8rem;font-weight:300;font-style:italic}
/* categories */
.cats{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:15px}
.cat{
  border:1px solid var(--ln);border-radius:7px;overflow:hidden;background:var(--bg);
  text-decoration:none;color:var(--i);display:block;
}
.cat .ci{height:104px;background-size:cover;background-position:center;background-color:var(--soft)}
.cat .cb{padding:10px 11px 12px}
.cat b{font-family:var(--ff-d);font-weight:600;font-size:.88rem;display:block}
.cat span{font-size:.7rem;color:var(--i3)}
/* freshness band */
.fresh3{display:grid;grid-template-columns:1fr;gap:13px;margin-top:15px}
.fresh3 h4{font-family:var(--ff-d);font-weight:600;font-size:.92rem;margin:0 0 4px}
.fresh3 p{font-size:.79rem;color:var(--i2);margin:0;line-height:1.55}
.freshlead{
  background:var(--amber-bg);color:var(--amber-i);font-weight:600;border-radius:8px;
  padding:11px 14px;margin:14px 0 0;font-size:.86rem;line-height:1.45;
}
/* product grid */
.pgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:15px}
.pcard{display:flex;flex-direction:column;border:1px solid var(--ln);border-radius:7px;padding:9px;background:var(--bg)}
.pcard .pi{aspect-ratio:1;border-radius:5px;border:1px solid var(--ln);background-size:cover;background-position:center;background-color:var(--soft)}
.pcard .pi.tbc{filter:grayscale(1);opacity:.45}
.pname{font-family:var(--ff-d);font-weight:600;font-size:.78rem;line-height:1.2;margin:9px 0 0}
.peach{font-size:.76rem;color:var(--i2);margin:6px 0 10px}
.pcta{
  margin-top:auto;width:100%;font-family:inherit;font-size:.72rem;font-weight:700;
  background:var(--i);color:#fff;border:none;border-radius:5px;padding:9px 8px;cursor:pointer;
}
/* story band */
.story{
  color:#fff;padding:30px 17px;background-color:#0d0d0d;
  background-image:linear-gradient(rgba(9,9,9,.90),rgba(9,9,9,.94)),var(--story);
  background-size:cover;background-position:center;
}
.slogo{height:38px;width:auto;display:block;margin:0 0 14px}
.story .est{
  font-family:var(--ff-m);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.55);margin:0 0 9px;
}
.story h3{
  font-family:var(--ff-d);font-weight:600;font-size:1.42rem;line-height:1.15;
  margin:0 0 12px;letter-spacing:-.015em;color:#fff;text-wrap:balance;
}
.story .lede{color:rgba(255,255,255,.8);font-size:.88rem;margin:0;max-width:56ch;line-height:1.6}
.pillars{display:grid;grid-template-columns:1fr;gap:16px;margin-top:22px}
.pillars h4{
  font-family:var(--ff-m);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--skyb);margin:0 0 6px;font-weight:500;
}
.pillars p{font-size:.8rem;color:rgba(255,255,255,.72);margin:0;line-height:1.55}
.story .btn{background:#fff;color:#121212;margin-top:22px}
/* reviews */
.revs{display:grid;grid-template-columns:1fr;gap:12px;margin-top:15px}
.rev{border:1px solid var(--ln);border-radius:7px;padding:14px 16px;background:var(--bg)}
.stars{color:#1c6d8f;font-size:.8rem;letter-spacing:.12em}
.rev p{font-size:.83rem;color:var(--i2);margin:8px 0 0;line-height:1.6}
.rev .who{font-size:.75rem;color:var(--i3);margin:9px 0 0;font-weight:600}
/* wholesale */
.whole{
  border-top:1px solid var(--ln);background:var(--soft);padding:22px 17px;
  display:grid;grid-template-columns:1fr;gap:10px;align-items:center;
}
.whole h4{font-family:var(--ff-d);font-weight:600;font-size:1rem;margin:0 0 3px}
.whole p{font-size:.82rem;color:var(--i2);margin:0}
.whole .btn{margin-top:0}
/* footer — lifted from the product template */
.sfoot{background:#0d0d0d;color:#fff;padding:26px 17px 18px}

@media (min-width:900px){
  .searchbar{display:none}
  .hero{grid-template-columns:1.05fr 1fr;align-items:center;padding-bottom:26px}
  .hero .pic{height:430px}
  .hero .say{padding:0 32px}
  .hero h1{font-size:2.05rem}
  .slide:nth-child(1){background-image:var(--hero1d)}
  .slide:nth-child(2){background-image:var(--hero2d)}
  .slide:nth-child(3){background-image:var(--hero3d)}
  .slide:nth-child(4){background-image:var(--hero4d)}
  .trust{padding:26px 22px 23px}
  .sec{padding:34px 22px}
  .sh{font-size:1.12rem}
  .cats{grid-template-columns:repeat(3,1fr);gap:13px}
  .cat .ci{height:126px}
  .fresh3{grid-template-columns:repeat(3,1fr);gap:20px}
  .pgrid{grid-template-columns:repeat(4,1fr);gap:13px}
  .story{padding:40px 22px}
  .slogo{height:46px}
  .story h3{font-size:1.75rem;max-width:20ch}
  .pillars{grid-template-columns:repeat(3,1fr);gap:26px}
  .revs{grid-template-columns:repeat(2,1fr);gap:16px}
  .whole{grid-template-columns:1fr auto;padding:26px 22px;gap:24px}
}

/* The mock drew these as a <p> and a <button>; here they are links, because a
   card that looks clickable should be clickable, and "Add to cart" on a cake
   has a size to choose first. */
.pcard .pi{display:block}
.pname a{color:inherit;text-decoration:none}
.pcard:hover .pname a{color:var(--skyd)}
a.pcta{display:block;text-align:center;text-decoration:none;color:#fff}
a.pcta:hover{background:var(--skyd)}
.pcard a:focus-visible,.cat:focus-visible,.slide:focus-visible{
  outline:2px solid var(--skyd);outline-offset:2px;
}