/* ────────────────────────────────────────────────────────────────
   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:36px;width:auto;display:block}
header.site .navlinks{display:none}
/* The Wholesale menu's trigger is a <button>, so it matched none of this and
   came out at the browser's own 16px beside 13.6px links. Listed here rather
   than given its own size, so the two cannot drift apart again. */
header.site .navlinks a,
header.site .navlinks .navtop{
  font-size:.85rem;color:var(--i2);text-decoration:none;
  display:inline-flex;align-items:center;gap:5px;
}
header.site .navlinks a:hover,
header.site .navlinks .navtop: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 .navicons .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:.58rem;min-width:14px;height:14px;padding:0 3px;box-sizing:border-box;
  display:grid;place-items:center;font-weight:700;
}
/* An empty cart has no badge at all. Without this the element keeps its width,
   its height and its background, so the cart icon wore a black dot at all
   times -- which reads as a notification nobody can clear. The page now ships
   the badge empty for the same reason: it used to render a 0 server-side, so
   the dot was there before any script ran, and stayed if none did. */
header.site .cartdot b:empty{display:none}
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:44px}
  header.site .navlinks{display:flex;gap:20px;flex:1;justify-content:center}
  header.site .navicons .acct{display:inline-flex}
  header.site .navlinks .navacct{display:none}
}

.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);
}
/* ── the shop's filters ──────────────────────────────────────────────────
   A sidebar beside the grid on a desktop; the SAME panel under a button on a
   phone. One set of controls either way -- building two and keeping them in
   step is how the phone and the desktop end up disagreeing about what is
   ticked. */
.shoplay{display:grid;grid-template-columns:184px 1fr;gap:28px;align-items:start}
.shopmain{min-width:0}
.filtbtn{display:none}

.shopside{position:static}
.sidehd{
  font-family:var(--ff-m);font-size:.64rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--i3);margin:0 0 8px;
}
.sidehd + .sidehd,.ckl + .sidehd,.catlist + .sidehd{margin-top:20px}
.catlist{display:flex;flex-direction:column;margin:0}
/* No counts beside the rows. A number on every line pushed the labels and the
   figures to opposite edges and left a channel of white down the middle of the
   panel. The counts still decide what is offered -- see shopFilters -- they are
   just not printed. */
.catlist a{
  display:block;font-size:.86rem;color:var(--i2);text-decoration:none;padding:4px 0;
}
.catlist a:hover{color:var(--i)}
.catlist a[aria-current="page"]{color:var(--i);font-weight:600}
.ckl label{
  display:flex;align-items:center;gap:9px;font-size:.86rem;color:var(--i2);
  padding:5px 0;cursor:pointer;
}
.ckl label:hover{color:var(--i)}
.ckl input{accent-color:var(--skyd);width:15px;height:15px;flex:none;margin:0}
.ckl input:checked + span{color:var(--i);font-weight:600}
.sidefoot{margin-top:16px}
.sidefoot button{
  font-family:inherit;font-size:.8rem;color:var(--i3);background:none;border:0;padding:0;
  text-decoration:underline;cursor:pointer;
}
.sidefoot button:hover{color:var(--i)}
.sidefoot button[hidden]{display:none}

/* The chosen allergens, as pills above the grid. They are the state -- with
   the panel shut on a phone there is otherwise nothing saying the shop is
   filtered, and a short grid reads as a small bakery rather than a filter
   somebody forgot about. Each removes its own filter, because somebody who
   ticked three and wants two should not have to open the panel again. */
.pills{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 16px}
.pills[hidden]{display:none}
.pill{
  display:inline-flex;align-items:center;gap:7px;font-family:inherit;font-size:.8rem;
  font-weight:600;color:#fff;background:var(--skyd);border:0;border-radius:999px;
  padding:5px 11px 5px 13px;cursor:pointer;
}
.pill span{font-size:1rem;line-height:1;opacity:.75}
.pill:hover span{opacity:1}
.pill em,.pillclear em{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.pillclear{
  font-family:inherit;font-size:.8rem;color:var(--i3);background:none;border:0;
  text-decoration:underline;cursor:pointer;padding:5px 2px;
}
.pillclear:hover{color:var(--i)}
.pill:focus-visible,.pillclear:focus-visible,.filtbtn:focus-visible{
  outline:2px solid var(--skyd);outline-offset:2px}

/* On a phone the column becomes a dropdown: one button, the same panel under
   it. Absolute rather than in flow, so opening it covers the grid instead of
   shoving it down the page. */
@media (max-width:860px){
  .shoplay{display:block;position:relative}
  .filtbtn{
    display:inline-flex;align-items:center;gap:8px;font-family:inherit;font-size:.86rem;
    font-weight:600;color:var(--i);background:#fff;border:1px solid var(--ln2);
    border-radius:8px;padding:9px 15px;cursor:pointer;margin:0 0 14px;
  }
  .filtbtn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round}
  .filtbtn[aria-expanded="true"]{border-color:var(--i)}
  .fcount{
    background:var(--skyd);color:#fff;font-family:var(--ff-m);font-size:.64rem;
    border-radius:999px;min-width:17px;height:17px;display:grid;place-items:center;padding:0 5px;
  }
  .fcount[hidden]{display:none}
  .shopside{
    position:absolute;top:46px;left:0;z-index:6;
    /* As wide as its widest row and no wider, now that nothing is pinned to
       the right-hand edge. */
    width:max-content;min-width:180px;max-width:calc(100vw - 44px);
    background:#fff;border:1px solid var(--ln);border-radius:11px;
    box-shadow:0 12px 34px rgba(0,0,0,.14);padding:15px 17px 16px;
    max-height:70vh;overflow-y:auto;display:none;
  }
  .shopside.open{display:block}
}
/* No script, no button: the panel is a plain list of links and some boxes, and
   it should simply be on the page rather than hidden behind a control that
   will never do anything. */
@media (max-width:860px){
  html.nojs .shopside{position:static;display:block;border:0;box-shadow:none;padding:0;max-height:none}
}

/* Three across on a phone, four from 620px up.
   Two made each tile 166px wide and 318 tall, so a screenful of shop was four
   products. Four was tried and is in the history: it fits, but at 81px a tile
   is a thumbnail of a thumbnail -- Wassem: "4 is tight lets do 3". Three gives
   109px at 390, which is a picture somebody can actually look at.

   minmax(0,1fr), not 1fr. A plain 1fr will not shrink a column below its
   longest unbreakable word, so at four columns "Chocolate" held them open and
   the grid ran off the side of the screen instead of fitting. It still matters
   at three: the word is the floor either way, and this is what keeps the floor
   out of the layout's way.

   The tagline is not shown below 620px. It is a sentence, and a sentence needs
   a line to live on -- at this width it wraps to four or five and makes each
   tile taller than the two-across version it replaced, which would defeat the
   point. The name and the price stay, because those are what a thumbnail is
   for. Both come back at 620, with the larger type. */
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.grid .ttag{display:none}
.grid .tile h3{font-size:.74rem;line-height:1.3;margin-top:7px;hyphens:auto}
.grid .tile .tprice{font-size:.66rem;margin-top:5px}
@media (min-width:460px){
  .grid{gap:11px}
  .grid .tile h3{font-size:.82rem}
  .grid .tile .tprice{font-size:.7rem}
}
@media (min-width:620px){
  .grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
  .grid .ttag{display:block}
  .grid .tile h3{font-size:.9rem;line-height:1.3;margin-top:9px}
  .grid .tile .tprice{font-size:.74rem;margin-top:7px}
}
@media (min-width:1000px){
  .grid{gap:18px}
  .grid .tile h3{font-size:.97rem;margin-top:10px}
  .grid .tile .tprice{font-size:.78rem;margin-top:8px}
}

/* 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 -- the carousel at the top of the shop.
   It was three tiles in a bordered box, which read as a second little shop
   sitting on top of the real one. One photograph at a time, wide, says "look
   at this" in a way a 160px thumbnail cannot. Shares .slide and .dots with the
   homepage hero rather than inventing a second kind of carousel. */
.seasonhero{margin:0 0 24px}
.seasonhero h2{
  font-family:var(--ff-m);font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--skyd);margin:0 0 10px;
}
.seasonhero .pic{
  position:relative;overflow:hidden;border-radius:9px;border:1px solid var(--ln);
  background-color:var(--soft);width:100%;aspect-ratio:3/2;max-height:300px;
}
@media (min-width:700px){.seasonhero .pic{aspect-ratio:21/8;max-height:380px}}
/* The caption sits on the photograph, so it carries its own darkness rather
   than trusting whatever is behind it. A gradient, not a flat panel: a band
   across the bottom of a cake is worse than the type being hard to place. */
.seasonhero .scap{
  position:absolute;left:0;right:0;bottom:0;z-index:1;
  padding:40px 18px 16px;color:#fff;display:block;
  background:linear-gradient(to top,rgba(0,0,0,.62),rgba(0,0,0,.28) 55%,transparent);
}
.seasonhero .scap strong{
  display:block;font-family:var(--ff-d);font-weight:600;font-size:1.22rem;
  letter-spacing:-.015em;line-height:1.1;text-wrap:balance;
}
.seasonhero .scap span{
  display:block;margin-top:3px;font-size:.85rem;opacity:.93;text-wrap:pretty;
  max-width:46ch;
}
@media (min-width:700px){
  .seasonhero .scap{padding:52px 26px 22px}
  .seasonhero .scap strong{font-size:1.5rem}
}
/* The dots clear the caption instead of landing in the middle of it. */
.seasonhero .dots{bottom:auto;top:12px;right:13px;left:auto;justify-content:flex-end}

.nomatch{color:var(--i2);font-size:.92rem;margin:4px 0 0;text-wrap:pretty}
.nomatch[hidden]{display:none}
.tile[hidden]{display:none}

/* ── 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}
/* Checkout is a link now rather than a button, so that pressing it goes
   somewhere with or without script. A link carries an underline and the
   browser's own colour into the black pill, which a button never did. */
a.cta{text-decoration:none;color:#fff;display:block;text-align:center}
a.cta:hover{color:#fff}
@media (max-width:560px){
  .cartline{grid-template-columns:56px 1fr auto}
  .cl-price{grid-column:3;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 ────────────────────────────────────────────────────────────── */
/* The warm-counter scheme. Every value here was already somewhere in the
   system -- the amber of the pickup notice, the sky of the announcement bar,
   the deep sky of the section headings on product pages. Nothing new; they
   are just no longer each trapped in a single element.
   Amber is the warm thread (hero, same-day band, stars), sky is structural
   (announcement, stockists, reviews, wholesale). */
:root{
  --amber-bg:#fdf3e3;--amber-i:#8a5a12;
  --amber-deep:#f8e6c6;--amber-ink:#6f470c;--amber-ln:#efd6ab;
  --amber-star:#c98a1e;
  --sky-wash:#d9eef8;--sky-ink:#155a78;--sky-pale:#f2f9fc;
  --story:url("/shop/assets/story.jpg");
  /* Mirrored left-to-right so the muffins fall in the clear half with the copy
     on the left. Served from Hosting rather than Storage, like story.jpg. */
  --wholesale:url("/shop/assets/wholesale.jpg")}
/* announcement + header */
.abar{
  background:var(--sky-wash);color:var(--sky-ink);
  font-size:.85rem;font-weight:600;letter-spacing:.08em;padding:10px 0;overflow:hidden;white-space:nowrap;
}
.abar-track{display:inline-flex;animation:abar-scroll 60s linear infinite}
.abar-track span{padding:0 2.5rem}
.abar-track span::after{content:"\00b7";margin-left:5rem;opacity:.55}
.abar:hover .abar-track{animation-play-state:paused}
@keyframes abar-scroll{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .abar{text-align:center}
  .abar-track{animation:none;display:block}
  .abar-track span:not(:first-child){display:none}
  .abar-track span::after{content:none}
}
.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);
  /* Stacked, the photo is as wide as the screen, so a fixed 400px height went
     from square on a phone to a 1.75 letterbox on a 700px tablet -- 62% of a
     portrait thrown away right where the layout has the most room. Tie the
     height to the width instead and cap it. */
  width:100%;height:auto;aspect-ratio:1/1.02;max-height:620px;
}
.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 45%;
  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(--sky-pale);padding:22px 16px 19px}
.trust p{
  font-family:var(--ff-m);font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--skyd);margin:0 0 12px;text-align:center;
}
/* Tight enough on a phone that all six sit on one line. At full size they
   wrapped to three rows and the credential strip ate half the screen. */
.logos{display:flex;flex-wrap:wrap;gap:12px 8px;align-items:center;justify-content:center}
/* Six logos with nothing in common: Macy's is 500x155, Deborah Miller 599x908.
   Sized by height alone the tall one becomes a sliver and the wide one runs
   away with the row, so each gets a box and sits inside it. Muted to the same
   .75 the names were, because this strip is a credential, not a billboard. */
.logos img{
  /* Height comes per logo from design/stockists.json, carried in as --lh so a
     media query can scale the whole set without fighting six inline styles.
     A single box cannot do this job: Macy's is a wide wordmark and Deborah
     Miller a tall stack, and at one size they read at completely different
     weights. */
  height:calc(var(--lh) * .76);
  width:auto;max-width:150px;object-fit:contain;opacity:.75;
  /* They are JPEGs, so each carries an opaque white rectangle -- six of them
     on a #f6f8f9 band would read as six faint boxes. multiply drops white to
     nothing against a lighter ground and leaves the ink alone. */
  mix-blend-mode:multiply;
}
@media (min-width:700px){
  .logos{gap:14px 26px}
  .logos img{height:var(--lh);max-width:170px}
}
/* On a desktop the strip has the whole width to itself and the phone-sized
   logos read as specks -- reported as hard to read. Half again as tall, and
   less muted, so the names can be made out. */
@media (min-width:900px){
  .trust{padding-top:30px;padding-bottom:28px}
  .logos{gap:18px 44px}
  .logos img{height:calc(var(--lh) * 1.5);max-width:250px;opacity:.9}
}
.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(--amber-bg);border-top:1px solid var(--amber-ln);border-bottom:1px solid var(--amber-ln)}
.sec.wash{background:var(--sky-pale);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;border-top:2px solid var(--amber-ln)}
.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 */
/* The three promises are a list, not a row: the photograph takes the other
   half of the band on a wide screen, and a list survives the narrow column
   where three columns would not. */
.fresh3{display:grid;grid-template-columns:1fr;gap:17px;margin-top:18px}
.fresh3 > div{display:grid;grid-template-columns:26px 1fr;gap:13px;align-items:start}
.fresh3 h4{font-family:var(--ff-d);font-weight:600;font-size:.95rem;margin:0 0 3px}
.fresh3 p{font-size:.81rem;color:var(--i2);margin:0;line-height:1.5}
/* No disc. The circle made each mark a third object competing with the two
   lines of type beside it; bare, it sits on the title's line and marks it.
   The nudge is optical -- it lines the icon up with the title's x-height
   rather than its box. */
.fmark{display:block;line-height:0;margin-top:3px}
.fmark svg{
  width:24px;height:24px;stroke:var(--amber-i);fill:none;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
}
.freshband{display:grid;grid-template-columns:1fr;gap:22px;align-items:center}
.freshpic{
  display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;
  object-position:center 42%;border-radius:9px;border:1px solid var(--amber-ln);
}
/* No box. It used to need one to carry the amber, but the whole band is amber
   now -- a panel inside a panel of the same colour just draws a rectangle
   around a sentence. It is the lead line of the section, so it reads as one:
   set larger and in the amber ink, with nothing around it. */
.freshlead{
  color:var(--amber-ink);font-weight:600;
  margin:12px 0 0;font-size:.92rem;line-height:1.5;max-width:78ch;
}
/* 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-b);font-weight:600;font-size:.68rem;letter-spacing:.14em;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}
/* Titles in the brand serif, like every other heading on the page. They were
   in the mono, which read as typewriter labels rather than titles. */
.pillars h4{
  font-family:var(--ff-d);font-size:1.05rem;font-weight:600;letter-spacing:-.005em;
  color:#fff;margin:0 0 6px;line-height:1.25;
}
.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:var(--amber-star);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 */
/* Wholesale is the one saturated ground on the page. It is a different
   audience from everything above it, and in grey it read as a strip left over
   above the footer rather than a thing anyone was meant to click.
   The photograph runs the whole band and the wash clears to the right at every
   width, so the picture gets to be a picture on a phone as well. */
.whole{
  position:relative;background:#0e4c66 center 72%/cover;background-image:var(--wholesale);
  color:#fff;padding:26px 17px;display:flex;flex-direction:column;justify-content:flex-start;
  min-height:330px;
}
/* A soft glow out of the top-left CORNER, not a straight wash across.

   Why a radial and not the 134deg diagonal it replaces: a gradient with four
   stops is interpolated piecewise-linearly, so its slope changes abruptly at
   every stop and the eye finds each one. Falling from .90 to .07 across 15% of
   the axis put a visible diagonal seam through the band. The stops here follow
   a raised cosine -- the slope is zero where the glow starts falling AND zero
   where it reaches clear, so there is no line at either end. Measured as the
   sharpest change in wash strength over any 10px: 0.086 before, 0.053 now.

   The stops are generated rather than typed; fourteen of them is what it takes
   for the curve not to show its own corners.

   The type is a short block in the top-left corner. The muffins are centre
   and bottom-right. A straight 90deg wash cannot tell those apart: to cover
   the type it has to darken the full height of the left half, and it was
   hiding 60% of the photograph to protect four lines sitting in a corner.
   At 134deg it hugs the corner the type is in and falls away towards the
   bottom-right, so it hides 39% instead and the jug and both front muffins
   come back, with white type still at 7.3:1.

   Narrowing the copy further does NOT help, which is worth knowing before
   trying it: a narrower column is a TALLER one, and the extra lines drop out
   of the dark upper corner onto the white jug below. At 48% the measurement
   falls to 2.8:1. 56% is about the widest the column can be and the narrowest
   it should be.

   Shifting background-position does not help either -- the source is 3:2 in a
   1.18 band, so there is very little crop left to move. */
.whole::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(115% 125% at 0% 0%,
    rgba(15,64,85,0.96) 27.8%,rgba(15,64,85,0.9538) 33.3%,rgba(15,64,85,0.9164) 38.9%,
    rgba(15,64,85,0.8477) 44.4%,rgba(15,64,85,0.7527) 50.0%,rgba(15,64,85,0.6381) 55.6%,
    rgba(15,64,85,0.5122) 61.1%,rgba(15,64,85,0.384) 66.7%,rgba(15,64,85,0.2627) 72.2%,
    rgba(15,64,85,0.1569) 77.8%,rgba(15,64,85,0.0743) 83.3%,rgba(15,64,85,0.0208) 88.9%,
    rgba(15,64,85,0.0002) 94.4%,rgba(15,64,85,0.0) 100.0%);
}
/* 480-1023px is its own case and cannot borrow either neighbour. The band is
   already wide here but still uses the phone's 56% measure and 330px height,
   so the type is a wide, short block: the phone's glow is spent before the end
   of it and the desktop one, tuned for type that stops at 29% of a 1280px
   band, is spent sooner still (1.9:1 at exactly 900px, where a white
   cake-stand edge clips the end of a line). The same curve held half again as
   far across covers the whole range: 5.4:1 at its worst, hiding 43%.

   Both edges were found by measuring AT the breakpoints rather than either
   side of them. 619px and 900px each failed while 620px and 1024px passed. */
@media (min-width:480px){
  .whole::before{
    background:radial-gradient(95% 140% at 0% 0%,
      rgba(15,64,85,0.97) 38.9%,rgba(15,64,85,0.9698) 44.4%,rgba(15,64,85,0.9385) 50.0%,
      rgba(15,64,85,0.8565) 55.6%,rgba(15,64,85,0.7331) 61.1%,rgba(15,64,85,0.582) 66.7%,
      rgba(15,64,85,0.4201) 72.2%,rgba(15,64,85,0.2654) 77.8%,rgba(15,64,85,0.1352) 83.3%,
      rgba(15,64,85,0.0441) 88.9%,rgba(15,64,85,0.0021) 94.4%,rgba(15,64,85,0.0) 100.0%);
  }
}
.whole > *{position:relative}
/* The signpost. A trade buyer is scanning for one word. */
.wsmark{
  font-family:var(--ff-d);font-weight:700;font-size:1.24rem;letter-spacing:.13em;
  text-transform:uppercase;color:#fff;margin:0 0 8px;line-height:1;
}
.whole h4{font-family:var(--ff-d);font-weight:600;font-size:1rem;margin:0 0 5px;color:rgba(255,255,255,.95)}
.whole p{font-size:.84rem;color:rgba(255,255,255,.86);margin:0;max-width:56%;line-height:1.6}
.whole .btn{margin-top:18px;background:#fff;color:var(--skyd);align-self:flex-start}
/* legal pages -- long-form reading, so the only job is a comfortable measure
   and clear hierarchy. No cards, no rules: it is a document. */
.legal{padding:30px 17px 46px}
.legal-in{max-width:66ch;margin:0 auto}
.legal h1{
  font-family:var(--ff-d);font-weight:600;font-size:1.55rem;line-height:1.12;
  letter-spacing:-.015em;margin:0 0 6px;color:var(--i);text-wrap:balance;
}
.legal-who{font-size:.85rem;color:var(--i3);margin:0 0 4px}
.legal h2{
  font-family:var(--ff-d);font-weight:600;font-size:1.02rem;letter-spacing:-.005em;
  margin:26px 0 7px;color:var(--i);
}
.legal p{margin:0 0 12px;font-size:.9rem;line-height:1.65;color:var(--i2)}
.legal ul{margin:0 0 14px;padding-left:20px}
.legal li{font-size:.9rem;line-height:1.6;color:var(--i2);margin-bottom:4px}
.legal a{color:var(--skyd)}
@media (min-width:900px){
  .legal{padding:44px 22px 64px}
  .legal h1{font-size:2rem;margin-bottom:10px}
  .legal h2{font-size:1.1rem;margin-top:32px}
  .legal p,.legal li{font-size:.95rem}
}
/* FAQ -- questions as headings, answers always visible. An accordion hides the
   answer from ctrl-F and from the person who arrived on this page from a
   search, and half of these are allergen questions. */
.lede{font-size:.95rem;color:var(--i2);margin:0 0 4px;max-width:60ch}
dl.faq{margin:0}
dl.faq dt{
  font-family:var(--ff-d);font-weight:600;font-size:1rem;color:var(--i);
  margin:18px 0 5px;letter-spacing:-.005em;
}
dl.faq dd{margin:0;padding:0 0 16px;border-bottom:1px solid var(--ln)}
dl.faq dd p{margin:0 0 8px;font-size:.9rem;line-height:1.62;color:var(--i2)}
dl.faq dd p:last-child{margin-bottom:0}
dl.faq dd a{color:var(--skyd)}
/* stockists -- a list of places, not a logo wall; the strip on the homepage
   already does the logo wall. */
.places{display:grid;grid-template-columns:1fr;gap:12px;margin:16px 0 0}
.place{
  border:1px solid var(--ln);border-radius:8px;padding:14px 16px;
  display:grid;grid-template-columns:78px 1fr;gap:16px;align-items:center;
}
.place img{width:78px;height:40px;object-fit:contain;object-position:left center;opacity:.8;mix-blend-mode:multiply}
.place h3{font-family:var(--ff-d);font-weight:600;font-size:.97rem;margin:0 0 2px}
.place p{margin:0;font-size:.84rem;color:var(--i2)}
.place.here{background:var(--amber-bg);border-color:var(--amber-ln)}
@media (min-width:700px){.places{grid-template-columns:1fr 1fr}}
@media (min-width:900px){
  dl.faq dt{font-size:1.06rem;margin-top:22px}
  dl.faq dd p{font-size:.95rem}
}
/* footer — lifted from the product template */
.sfoot{background:#0d0d0d;color:#fff;padding:26px 17px 18px}

/* The hero gets its own breakpoint, earlier than the rest of the layout.
   900px is the right number for a four-up product grid; it is far too late
   for a photograph next to four lines of type, which has plenty of room from
   about 760 and just looks stranded stacked above it.

   Every hero photo is 2:3 portrait. A 1.05fr column at 430px tall was a 1.5
   landscape box, so `cover` threw away well over half the picture. Some crop
   is a hero; that was a beheading. Capping the width at 600px fixed the crop
   but left the photo stranded on a big monitor with white beside it, so the
   box now grows in BOTH directions: an aspect-ratio rather than a fixed
   height means a wider column is a taller one, and 820x760 throws away the
   same 38% that 600x560 did. The height cap stops the hero swallowing the
   whole first screen. */
@media (min-width:760px){
  .hero{grid-template-columns:minmax(0,820px) minmax(340px,1fr);align-items:center;padding-bottom:26px}
  /* width:100% matters -- without it the max-height feeds back through the
     aspect-ratio and pulls the width in with it, so the box never reaches the
     column it was given. */
  .hero .pic{width:100%;height:auto;aspect-ratio:1/1.05;max-height:760px}
  /* Centred in whatever the photo leaves rather than shoved against it, so on
     a wide monitor the empty space falls either side of the copy instead of
     all of it piling up on the right. */
  .hero .say{padding:0 clamp(20px,2.4vw,32px);max-width:560px;margin-inline:auto}
  /* Scaled rather than fixed: at 2.05rem the headline breaks badly in the
     narrow column this breakpoint now allows. */
  .hero h1{font-size:clamp(1.5rem,2.6vw,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)}
}

@media (min-width:900px){
  .searchbar{display:none}
  .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}
  .freshband{grid-template-columns:1fr minmax(0,330px);gap:38px}
  /* Portrait on a wide screen -- it is a photograph of a counter running away
     from you, and cropping it to landscape throws the depth away. */
  .freshpic{aspect-ratio:4/5;object-position:center}
  .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}
  /* Tall enough that a 3:2 photograph is not cropped to a letterbox. At the
     old height you could no longer tell there was a stand of them. */
  .whole{padding:44px 34px;min-height:390px;justify-content:center}
  .wsmark{font-size:1.42rem;margin-bottom:10px}
  .whole h4{font-size:1.12rem}
  .whole p{font-size:.89rem;max-width:40ch}
}

/* From 1024px the type is a small enough fraction of the band that the glow
   can be tight: hidden drops to 24% here against 43% on a phone. The ellipse
   is much taller than it is wide (55% x 185%) because the band is, so a circle
   that reached far enough down would reach much too far across.

   Deliberately NOT at 900px with the rest of the desktop rules: between 900
   and 1023 the band is a wide thin slice of the photograph and the type still
   reaches 42%. */
@media (min-width:1024px){
  .whole::before{
    background:radial-gradient(55% 185% at 0% 0%,
      rgba(15,64,85,0.96) 27.8%,rgba(15,64,85,0.9463) 33.3%,rgba(15,64,85,0.9038) 38.9%,
      rgba(15,64,85,0.8351) 44.4%,rgba(15,64,85,0.7444) 50.0%,rgba(15,64,85,0.6374) 55.6%,
      rgba(15,64,85,0.5206) 61.1%,rgba(15,64,85,0.4014) 66.7%,rgba(15,64,85,0.287) 72.2%,
      rgba(15,64,85,0.1845) 77.8%,rgba(15,64,85,0.1003) 83.3%,rgba(15,64,85,0.0396) 88.9%,
      rgba(15,64,85,0.0061) 94.4%,rgba(15,64,85,0.0) 100.0%);
  }
}

/* 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;
}

/* ── the About page ──────────────────────────────────────────────────────
   Every class here is scoped under .about on purpose: .band already exists in
   store.css with a different meaning, and unscoped it would repaint the
   homepage. (.cta and .place are in the same position -- neither is used here
   any more, but the scoping is what makes adding one back safe.) */
.about .band{padding:36px 26px}
.about .band > .in{max-width:800px;margin:0 auto}
.about .band.warm{background:var(--amber-bg);border-block:1px solid var(--amber-ln)}
.about h1{font-family:var(--ff-d);font-weight:600;font-size:clamp(1.6rem,4.4vw,2rem);
  line-height:1.07;letter-spacing:-.022em;margin:0 0 12px;text-wrap:balance}
/* Section titles are the small all-caps mono label, not a serif heading. Each
   band used to carry both -- a label above a heading saying much the same thing
   -- so the heading takes the label's styling and the label itself is gone.
   They stay <h2> elements: this is a change of appearance, not of structure,
   and the page still has to outline correctly for a screen reader.
   .about h1 is deliberately not in here; Meet the baker keeps its serif. */
.about h2,
.about .eyebrow{font-family:var(--ff-m);font-size:.84rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--amber-i);margin:0 0 12px}
/* No measure cap. The band is already held to 800px by .in, and a 62ch cap on top
   of that stopped the copy short of the fact cards and the team strip below it,
   which do run the full width. */
.about p{margin:0 0 12px;font-size:.93rem;color:var(--i2);line-height:1.7}
.about a{color:var(--skyd)}
.about .blogline{font-size:.86rem}

/* meet the baker */
.about .baker{display:grid;grid-template-columns:minmax(0,300px) 1fr;gap:34px;align-items:center}
.about .baker picture{display:block}
.about .baker img{display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;
  border-radius:12px}
.about .payoff{font-weight:700;margin:18px 0 14px}
@media (max-width:680px){.about .baker{grid-template-columns:1fr;gap:22px}}

/* what we make -- three facts, not three pills */
.about .facts{display:grid;grid-template-columns:repeat(3,1fr);gap:11px;margin:16px 0 0}
.about .fact{background:#fff;border:1px solid var(--amber-ln);border-radius:9px;padding:13px 15px}
.about .fact b{display:block;font-family:var(--ff-d);font-weight:600;font-size:1.02rem;
  margin-bottom:2px}
.about .fact span{font-size:.82rem;color:var(--i2)}
@media (max-width:640px){.about .facts{grid-template-columns:1fr}}

/* the team strip. It never pauses -- a carousel that stops under the cursor
   invites you to sit and read it, and there is nothing here to read. */
.about .strip{margin:14px 0 0;position:relative;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
/* 26s, not 52. Eight portraits at 173px is a 1384px pass, so it was crawling
   past at 27px/s -- slow enough to read as a page that had not finished
   loading rather than as something moving. 53px/s reads as a strip that moves.
   Still off entirely under prefers-reduced-motion, below. */
.about .track{display:flex;gap:11px;width:max-content;animation:drift 26s linear infinite}
.about .track figure{margin:0;width:162px;flex:none;position:relative}
.about .track img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;
  border-radius:10px;background:#fff;filter:saturate(.85) brightness(.82)}
/* A wash in the band's own amber. It settles the eight down into the strip
   instead of eight photographs sitting on top of it -- and it covers that they
   came from more than one shoot. The deep tone rather than the pale one is what
   makes the wash dark rather than milky. Past about .48 it stops reading as a
   wash over photographs and starts reading as sepia. Two numbers tune it: this
   opacity, and brightness() on the image above. */
.about .track figure::after{content:"";position:absolute;inset:0;border-radius:10px;
  background:var(--amber-i);opacity:.40;pointer-events:none}
@keyframes drift{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .about .track{animation:none}
  .about .strip{overflow-x:auto}
}

/* the values as cards */
/* Still three to a row with four cards, so the fourth wraps underneath.
   Two by two was tried and made each card 393px wide and 300 tall -- Wassem:
   "the blocks became really big i liked the size they were". Four across in an
   800px band is worse again: 190px each, and the giving card's list pushes
   every card to 359px tall. Three keeps the width these were designed at. */
/* Four across, and smaller to suit it. Wassem: "i want them smaller and in one
   line across". Three-and-a-wrapped-one left a hole where the fourth row's
   other three would be, and two by two made each card the size of a paragraph.

   Four columns in an 800px band is 189px each, so everything steps down a
   notch: the padding, the icon, the heading and the body. At the old sizes the
   giving card's list ran to 359px tall and dragged the other three with it;
   these sizes bring the row back to roughly what three cards occupied. */
.about .vals{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:6px}
.about .val{border:1px solid var(--ln);border-radius:9px;padding:13px 13px 14px;background:#fff}
.about .val .mk{width:27px;height:27px;border-radius:50%;display:grid;place-items:center;
  margin-bottom:8px;background:var(--amber-bg)}
.about .val .mk svg{width:14px;height:14px;stroke:var(--amber-i);fill:none;stroke-width:1.75;
  stroke-linecap:round;stroke-linejoin:round}
.about .val h3{font-family:var(--ff-d);font-weight:600;font-size:.88rem;margin:0 0 4px;
  letter-spacing:-.005em;text-wrap:balance}
.about .val p{margin:0;font-size:.78rem;line-height:1.5}
/* Two up on a tablet rather than straight to one: four 189px cards at 700px
   would be 160px, which is where the headings start breaking mid-word. */
@media (max-width:760px){.about .vals{grid-template-columns:repeat(2,1fr)}}
@media (max-width:460px){.about .vals{grid-template-columns:1fr}}

/* giving */
/* The giving card: its list sits under its paragraph, inside the card, with
   the same rhythm as the sentence in the three beside it. */
.about .give-val p{margin:0 0 7px}
.about .give{margin:0;padding:0;list-style:none;display:grid;gap:4px}
.about .give li{font-size:.78rem;line-height:1.4;color:var(--i2);display:flex;gap:7px;
  align-items:baseline}
.about .give li::before{content:"";width:5px;height:5px;border-radius:50%;
  background:var(--amber-i);flex:none;transform:translateY(-1px)}

/* ── the Contact page ────────────────────────────────────────────────────
   Shares .about's band and type rules (the page carries both classes), so only
   the things Contact alone needs live here. */
/* ── the press page, at /media/ ───────────────────────────────────────────
   Borrows the contact page's grid and form wholesale -- it is the same two
   columns with the same fields -- and adds the two things that are its own:
   the kit to download and the places that have written about the bakery. */
.about.press .in{max-width:800px}
.about.press h1{margin-bottom:8px}
.about.press .lede{margin-bottom:26px}
.about.press .eyebrow{margin:30px 0 12px}
.about.press .eyebrow:first-of-type{margin-top:22px}

/* The kit. Three things a journalist came here to download, so they are the
   biggest targets on the page rather than three links in a row. */
.kits{display:grid;grid-template-columns:1fr;gap:9px;margin-bottom:4px}
@media (min-width:640px){.kits{grid-template-columns:repeat(3,minmax(0,1fr))}}
.kit{
  display:flex;gap:12px;align-items:center;text-decoration:none;color:inherit;
  border:1px solid var(--ln);border-radius:10px;padding:14px 15px;background:#fff;
}
.kit:hover{border-color:var(--amber-ln);background:var(--amber-bg)}
.kiti{
  width:32px;height:32px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--amber-bg);
}
.kit:hover .kiti{background:#fff}
.kiti svg{width:16px;height:16px;stroke:var(--amber-i);fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.kitt{display:block;min-width:0}
.kitt strong{
  display:block;font-family:var(--ff-d);font-weight:600;font-size:.92rem;color:var(--i);
  letter-spacing:-.005em;
}
.kitt small{display:block;margin-top:3px;font-size:.78rem;line-height:1.45;color:var(--i2)}
.kit:focus-visible{outline:2px solid var(--skyd);outline-offset:2px}

/* The mentions. The outlet sits under its own headline rather than beside it,
   because the headlines are long and a two-column row of them wraps into mush
   on a phone. */
.mentions{list-style:none;margin:0 0 6px;padding:0;display:grid;gap:2px}
.mentions a{
  display:block;text-decoration:none;color:inherit;padding:11px 0;
  border-bottom:1px solid var(--ln);
}
.mentions li:last-child a{border-bottom:0}
/* These are links to other people's articles and were drawn in body colour
   with no underline, so they read as a list of headlines somebody had typed
   out. Coloured and underlined by default: a press page exists to send people
   away from it, and a link nobody can see is a link nobody follows. */
.mentions strong{
  display:block;font-weight:600;font-size:.94rem;color:var(--skyd);text-wrap:pretty;
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px;
  text-decoration-color:color-mix(in srgb,var(--skyd) 40%,transparent);
}
.mentions a:hover strong{text-decoration-color:var(--skyd)}
/* The arrow says "this leaves the site" without a sentence saying so. */
.mentions strong::after{content:" \2197";font-weight:400;text-decoration:none;
  display:inline-block;opacity:.55}
.mentions a:hover strong::after{opacity:1}
.mentions span{
  display:block;margin-top:2px;font-family:var(--ff-m);font-size:.72rem;
  letter-spacing:.06em;text-transform:uppercase;color:var(--i3);
}
.mentions a:focus-visible{outline:2px solid var(--skyd);outline-offset:2px}
.about.press .cgrid{margin-top:34px;padding-top:26px;border-top:1px solid var(--ln)}
.about.press .sub{margin:0 0 14px;color:var(--i2);font-size:.88rem}


/* ── the affiliate page, at /affiliate/ ───────────────────────────────────
   Three sections that each pair a short piece of text with one photograph,
   then the application. The photograph alternates sides down the page, which
   is the Shopify original's shape and the reason the page reads as three
   answers rather than one long column.

   It alternates on a DESKTOP only. Stacked on a phone, a photograph that
   sometimes comes first and sometimes second is just an inconsistency -- so
   below 760px the text always leads and the picture always follows. */
.about.affil .in{max-width:860px}
.about.affil h1{margin-bottom:8px}
.about.affil .lede{margin-bottom:4px}
.about.affil .eyebrow{margin:0 0 12px}

.asec{display:grid;grid-template-columns:1fr;gap:18px;align-items:center;
  padding:30px 0;border-bottom:1px solid var(--ln)}
@media (min-width:760px){
  .asec{grid-template-columns:minmax(0,1fr) minmax(0,300px);gap:40px;padding:38px 0}
  /* The picture is written after the text in the markup every time, so the
     reading order and the tab order stay the same on both sides. Only the
     drawing swaps. */
  /* NOT .rev -- that is the review card, and it brought a border, a radius,
     a white background and 14px of padding with it, which drew a box round
     the section and sat the photograph flush against its edge. */
  .asec.aflip{grid-template-columns:minmax(0,300px) minmax(0,1fr)}
  .asec.aflip .atxt{order:2}
  .asec.aflip .apic{order:1}
}
.atxt{min-width:0}
.apic{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;
  border:1px solid var(--ln);border-radius:10px}

.awho{margin:0;padding:0 0 0 1.05em;display:grid;gap:9px}
.awho li{font-size:.95rem;line-height:1.55;color:var(--i);text-wrap:pretty}

/* The steps are numbered by CSS rather than by <ol>'s own marker, because the
   number wants to be a filled circle beside the step and not a figure hanging
   in the margin. counter() keeps it an ordered list to a screen reader. */
.asteps{list-style:none;margin:0;padding:0;counter-reset:astep;display:grid;gap:15px}
.asteps li{counter-increment:astep;padding-left:38px;position:relative}
.asteps li::before{
  content:counter(astep);position:absolute;left:0;top:-1px;
  width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  background:var(--amber-bg);color:var(--amber-i);
  font-family:var(--ff-m);font-size:.74rem;font-weight:700;
}
.asteps strong{display:block;font-family:var(--ff-d);font-weight:600;font-size:.95rem;
  color:var(--i);letter-spacing:-.005em}
.asteps span{display:block;margin-top:2px;font-size:.88rem;line-height:1.5;color:var(--i2)}

/* The details are the contact page's label/value rows, which is what they are:
   five short facts somebody scans rather than reads. */
.adet .crow{margin-bottom:13px}
.adet .crow:last-child{margin-bottom:0}

.aform{padding-top:30px}
.about.affil .aform h2{margin:0 0 4px}
.about.affil .aform .sub{margin:0 0 18px;color:var(--i2);font-size:.88rem}
/* Two columns so the six questions do not read as a long form. The message
   runs the full width because it is the only one anybody writes into. */
.afields{display:grid;grid-template-columns:1fr;gap:0 18px}
@media (min-width:620px){
  .afields{grid-template-columns:repeat(2,minmax(0,1fr))}
  .afields .field:last-child{grid-column:1 / -1}
}
/* Lower case and lighter, so it reads as permission rather than another
   label competing with the one above it. */
.about.affil .field .fopt{font-style:normal;text-transform:none;letter-spacing:0;
  font-family:var(--ff-b,inherit);font-size:.68rem;color:var(--i3);opacity:.85}
.about.affil .instead{margin:14px 0 0;font-size:.85rem;color:var(--i2)}
.about.affil .instead a{color:var(--skyd)}

.about.contact .in{max-width:800px}
.about.contact h1{margin-bottom:16px}
.about .shopshot{display:block;width:100%;height:auto;aspect-ratio:16/7;object-fit:cover;
  object-position:center 38%;border:1px solid var(--ln);border-radius:9px;margin-bottom:24px}
.about .cgrid{display:grid;grid-template-columns:minmax(0,270px) 1fr;gap:34px;align-items:start}
@media (max-width:680px){.about .cgrid{grid-template-columns:1fr;gap:26px}}
.about .crow{margin-bottom:15px}
.about .crow .k{font-family:var(--ff-m);font-size:.62rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--i3);margin:0 0 3px}
.about .crow .v{font-size:.92rem;color:var(--i);margin:0;line-height:1.5;max-width:none}
.about .crow .v small{display:block;font-size:.78rem;color:var(--i3);margin-top:2px}
.about .field{margin-bottom:12px}
.about .field label{display:block;font-family:var(--ff-m);font-size:.62rem;letter-spacing:.11em;
  text-transform:uppercase;color:var(--i3);margin-bottom:4px}
.about .field input,.about .field textarea{display:block;width:100%;font:inherit;font-size:.9rem;
  color:var(--i);background:#fff;border:1px solid var(--ln);border-radius:6px;padding:9px 11px}
.about .field textarea{resize:vertical;min-height:110px}
.about .field input:focus-visible,.about .field textarea:focus-visible{
  outline:2px solid var(--skyd);outline-offset:1px;border-color:var(--skyd)}
/* The honeypot. Off-screen rather than display:none -- some bots skip hidden
   fields, and a field they skip catches nobody. */
.about .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.about form button{display:inline-block;background:var(--i);color:#fff;font:inherit;
  font-size:.86rem;font-weight:700;border:0;border-radius:5px;padding:12px 26px;
  margin-top:6px;cursor:pointer}
.about form button:disabled{opacity:.55;cursor:default}
.about .fmsg{margin:12px 0 0;font-size:.86rem;max-width:44ch}
.about .fmsg:empty{display:none}
.about .fmsg.ok{color:var(--fresh-i)}
.about .fmsg.bad{color:#9a3412}

/* ── the mobile menu ─────────────────────────────────────────────────────
   Below 900px the nav is display:none and the burger was inert, so a phone had
   no navigation at all. The panel drops out of the header rather than sliding
   over the page: it is five links, and a full-screen overlay for five links is
   a bigger gesture than the content deserves. */
@media (max-width:899px){
  header.site{position:relative}
  header.site .navlinks[data-open]{
    display:flex;flex-direction:column;gap:0;
    position:absolute;left:0;right:0;top:100%;z-index:60;
    background:#fff;border-bottom:1px solid var(--ln);
    padding:4px 18px 14px;box-shadow:0 14px 28px rgba(0,0,0,.10)}
  header.site .navlinks[data-open] a{
    padding:13px 2px;border-top:1px solid var(--ln);font-size:1rem;display:flex;
    align-items:center;gap:6px}
  header.site .navlinks[data-open] a:first-child{border-top:0}
}
header.site .burger:focus-visible{outline:2px solid var(--skyd);outline-offset:3px}

/* ── the Wholesale menu ──────────────────────────────────────────────────
   Two destinations behind one nav item: a shop that has never bought from us
   wants the partnership page, an existing customer wants the login. */
header.site .hasmenu{position:relative;display:inline-flex}
header.site .navtop{font-family:inherit;background:none;border:0;padding:0;cursor:pointer}
header.site .navtop:focus-visible{outline:2px solid var(--skyd);outline-offset:3px}
header.site .submenu{display:none}
header.site .submenu[data-open]{display:flex;flex-direction:column;
  position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%);z-index:70;
  background:#fff;border:1px solid var(--ln);border-radius:8px;padding:5px;min-width:168px;
  box-shadow:0 12px 30px rgba(0,0,0,.13)}
header.site .submenu[data-open] a{padding:9px 13px;border-radius:5px;white-space:nowrap;
  font-size:.92rem}
header.site .submenu[data-open] a:hover{background:var(--soft);color:var(--skyd)}
/* In the phone panel the nav is a stack, so the submenu belongs in that stack
   rather than floating over it. */
@media (max-width:899px){
  header.site .navlinks[data-open] .hasmenu{display:block;
    padding:13px 2px;border-top:1px solid var(--ln)}
  header.site .navlinks[data-open] .navtop{font-size:1rem}
  header.site .submenu[data-open]{position:static;transform:none;box-shadow:none;border:0;
    padding:6px 0 0 14px;min-width:0;background:none}
  header.site .navlinks[data-open] .submenu[data-open] a{padding:9px 0;border-top:0;font-size:.95rem}
}

/* ── the wholesale partnership page ─────────────────────────────────────
   Carries .about too, so bands, type, fields and the form message all come
   from there. Only what this page alone needs lives here. */
.about.trade .lede{font-size:1rem;color:var(--i);max-width:56ch;margin-bottom:0}
/* The three steps are a real sequence -- you cannot taste before you enquire --
   so they are numbered. Nothing else on the page is a process. */
.about .steps{display:grid;gap:15px;margin:0;padding:0;list-style:none;counter-reset:s}
.about .step{display:grid;grid-template-columns:34px 1fr;gap:14px;align-items:start}
.about .step .n{counter-increment:s;font-family:var(--ff-m);font-size:.78rem;font-weight:500;
  color:var(--amber-i);background:var(--amber-bg);border:1px solid var(--amber-ln);
  border-radius:50%;width:34px;height:34px;display:grid;place-items:center}
.about .step .n::before{content:counter(s)}
.about .step h3{font-family:var(--ff-d);font-weight:600;font-size:1.04rem;margin:5px 0 3px}
.about .step p{margin:0;font-size:.89rem}
@media (max-width:560px){
  .about .step{grid-template-columns:28px 1fr;gap:11px}
  .about .step .n{width:28px;height:28px;font-size:.72rem}
}
/* Flat, not an accordion -- the same call the FAQ made. A trade buyer is
   scanning for the minimum and the cut-off, and a collapsed answer is one
   nobody finds with ctrl-F.

   Cards rather than ruled rows: six horizontal rules across a warm band read
   as a spec sheet, and the label column left a stripe of empty space down the
   left of every long answer. The same card the About page uses for its facts,
   so the two pages state a fact the same way. */
.about .facts2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px;margin:0}
.about .facts2 .fact{display:block;background:#fffdf7;border:1px solid var(--amber-ln);
  border-radius:10px;padding:16px 18px}
/* The card title outranks the line under it now -- it was mono caps at .64rem
   sitting above .9rem body, so the label read as a footnote to its own answer.
   In the display face and the deep amber it carries the colour too, which is
   cheaper than adding ornament to a card that has to stay scannable. The
   section heading above stays mono caps, so the two levels still differ. */
.about .facts2 dt{font-family:var(--ff-d);font-weight:600;font-size:1.06rem;
  letter-spacing:-.008em;color:var(--amber-ink);margin-bottom:5px}
.about .facts2 dd{margin:0;font-size:.88rem;color:var(--i2);line-height:1.6}
.about .facts2 dd strong{color:var(--i);font-weight:700}
.about .facts2 dd .sub{display:block;font-size:.82rem;color:var(--i3);margin-top:5px;
  line-height:1.6}
/* Six cards into a two-column grid leaves a hole unless the spans are chosen:
   the first and last run full width, so the four in between pair off cleanly
   and no card sits alone beside dead space. How to order is also the one a new
   buyer reads first, and the office block is the one that ends the section. */
.about .facts2 .fact:first-child,
.about .facts2 .fact:last-child{grid-column:1 / -1}
@media (max-width:640px){
  .about .facts2{grid-template-columns:1fr}
  .about .facts2 .fact:first-child,
  .about .facts2 .fact:last-child{grid-column:auto}
}
.about .wgrid{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.about .wgrid .wide{grid-column:1 / -1}
.about .field label em{font-style:normal;color:var(--amber-i)}
@media (max-width:560px){.about .wgrid{grid-template-columns:1fr}}
.about .fnote{margin:5px 0 0;font-size:.76rem;color:var(--i3);line-height:1.5}

/* ── the partnership hero ────────────────────────────────────────────────
   Built like the homepage's wholesale band, in this page's colour. The
   photograph covers the whole band and a wash sits on top of it, heavy where
   the copy is and clearing to nothing on the other side -- so the picture is
   faintly there behind the type rather than stopping at a seam halfway across.
   An earlier version put the picture in its own column, which read as a
   photograph next to a colour rather than one behind it.

   The wash is amber-deep, a touch darker than the page's own amber, and still
   light enough that the type stays dark like every other band here; the
   homepage's is dark and needs white type. Angles are the homepage's too:
   overhead on a phone, where there is no room to set copy beside a
   photograph, and turned ninety degrees past 900px.

   Sideways, the wash clears at 55% -- inside the homepage's 62%, on
   Wassem's call, so more of the cake is in the band. It holds almost solid
   to 40% first: the homepage can start falling off at 34% because its type
   is white on a dark wash, where ours is dark on a light one and the cake
   underneath is nearly black. The last two lines of the lede end in the
   fade, so their worst glyph pixel is 5.4:1 at 1600px -- clear of AA, short
   of AAA. Taking the clearing point in further would put them under.

   This only works because the picture is landscape. The portrait one it
   replaced lost about three quarters of itself to the same treatment. */
.about.trade .band.tradehero{position:relative;
  background:var(--amber-deep) center 58%/cover;background-image:var(--shot);
  min-height:330px;display:flex;flex-direction:column;justify-content:center}

/* Cream type on a dark scrim, not dark type on a cream one.
 *
 * The photograph behind the type is DARK -- median luminance .069 measured off
 * the file, which is the glazed bundt and the shadow under it. Dark type on it
 * bare is 1.1:1, so the old pale wash was not decoration, it was the only thing
 * making the words readable, and it had to be near-opaque to do it. That is why
 * the left half read as a cream slab with a cake behind it.
 *
 * Turning the type over inverts which way the photograph has to be pushed, and
 * a photograph this dark wants far less pushing to carry light text than to
 * carry dark text. Wassem, with the bare photograph: "i want it more like that."
 *
 * The number that sets the scrim is not the dark part, it is the LIGHT part:
 * the brightest 5% behind the type is rgb(223,227,230), the tablecloth. Cream
 * on that needs the scrim at about .66 to clear AA -- .62 gives 5.1:1, .55
 * only 4.1. So it holds .68 across the type and lets go afterwards. */
.about.trade .band.tradehero::before{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,
    rgba(38,24,12,.78) 0%,rgba(38,24,12,.68) 50%,rgba(38,24,12,0) 72%)}
.about.trade .band.tradehero > .in{position:relative;width:100%}
.about.trade .band.tradehero h1{margin-bottom:8px;color:#fff7ea}
.about.trade .band.tradehero .lede{max-width:34ch;margin-bottom:0;color:#f4e7d4}

/* Still a side wash on a phone -- Wassem: "i want it to stay coming from the
   side even in mobile." It was a top-down one there, which is the usual answer
   for a narrow screen and the wrong one here: the cake is on the right of the
   frame, and washing from the top puts the heaviest part of the scrim over it.
   The type runs nearly the full width at 390px, so this clears much later than
   the desktop one does -- the gradient still reads from the side, it simply
   has further to go before it gets out of the way. */
@media (max-width:899px){
  .about.trade .band.tradehero::before{
    background:linear-gradient(90deg,
      rgba(38,24,12,.84) 0%,rgba(38,24,12,.74) 94%,rgba(38,24,12,.62) 100%)}
}
@media (min-width:900px){
  .about.trade .band.tradehero{min-height:390px}
}

/* ── gift boxes ────────────────────────────────────────────────────────
   A box is a bundle, so its page answers a different question from a cake's:
   not what is in the recipe but what is in the box. The prose sits where a
   tagline leaves off and the packing list takes the shape of the ingredients
   block beside it, so the two kinds of page still read as one storefront. */
.pblurb{font-size:.85rem;line-height:1.6;color:var(--i2);margin:13px 0 0}
.pblurb + .pblurb{margin-top:8px}
.incl-h{
  font-family:var(--ff-d);font-weight:600;font-size:1.02rem;line-height:1.35;
  margin:17px 0 7px;letter-spacing:-.01em;color:var(--skyd);
}
ul.incl{list-style:none;margin:0;padding:0}
ul.incl li{
  position:relative;padding-left:15px;margin:0 0 5px;
  font-size:.82rem;line-height:1.5;color:var(--i2);
}
/* A small square rather than a bullet: the same mark the packing slip in the
   box uses, and it sits better under a display heading than a dot. */
ul.incl li::before{
  content:"";position:absolute;left:0;top:.52em;width:5px;height:5px;
  background:var(--ln2);border-radius:1px;
}
.incl-note{font-size:.73rem;line-height:1.5;color:var(--i3);margin:9px 0 0}

/* ── the product gallery, on a phone ───────────────────────────────────
   .gal is sticky so the photograph stays put while a long spec column
   scrolls beside it. Below 900px there is no column beside it -- .dsplit
   drops to one -- and the photograph travelled down over the copy instead,
   because Chromium confines a sticky grid item to the grid container rather
   than to its own grid area. Nothing to stay level with, so nothing to
   stick to. */
@media (max-width:900px){
  .gal{position:static}
}

/* ── the gallery's controls ────────────────────────────────────────────
   The thumbnails are buttons now rather than decoration, so they need the
   reset a button wants and none of its chrome; they keep the look the spans
   had. The arrows sit inside the hero, bottom right, together rather than
   one on each edge -- a thumb reaches both without crossing the picture,
   and neither one covers the middle of the photograph. */
.thumbs button{
  flex:1;height:64px;padding:0;cursor:pointer;
  border:1px solid var(--ln);border-radius:5px;
  background-color:var(--soft);background-size:cover;background-position:center;
  background-repeat:no-repeat;
}
.thumbs button.on{border-color:var(--i);border-width:2px}
.thumbs button:hover{border-color:var(--i3)}
.thumbs button:focus-visible{outline:2px solid var(--skyd);outline-offset:2px}
.mhero{position:relative}
.ga{
  position:absolute;bottom:11px;width:32px;height:32px;padding:0;cursor:pointer;
  border:1px solid rgba(18,18,18,.10);border-radius:99px;
  background:rgba(255,255,255,.92);display:grid;place-items:center;
  box-shadow:0 1px 3px rgba(18,18,18,.12);
}
.ga.prev{right:51px}
.ga.next{right:11px}
.ga:hover{background:#fff}
.ga:focus-visible{outline:2px solid var(--skyd);outline-offset:2px}
/* The same chevron the nav uses, turned to point along the row. */
.ga i{
  display:block;width:7px;height:7px;
  border-right:1.6px solid var(--i);border-bottom:1.6px solid var(--i);
}
.ga.prev i{transform:rotate(135deg);margin-left:3px}
.ga.next i{transform:rotate(-45deg);margin-right:3px}

/* ── the allergy policy's answer block ─────────────────────────────────
   The rest of the legal pages are deliberately plain: they are looked up,
   not read, and decorating fine print reads as hiding something. This one
   page is different, because somebody arrives at it wanting one fact before
   they eat. Two cards carry that fact; everything below them is the same
   document it always was. Green for what never enters the building, amber
   for what does -- the same two colours the storefront already uses for
   freshness and for trade. */
.legal-lede{font-size:1rem;color:var(--i);margin:0 0 4px}
.legal .verdict{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:18px 0 22px}
.legal .vc{border-radius:9px;padding:13px 15px;border:1px solid}
.legal .vc.yes{background:var(--fresh-bg);border-color:#c7e4d3}
.legal .vc.care{background:var(--amber-bg);border-color:var(--amber-ln)}
.legal .vc .t{
  font-family:var(--ff-m);font-size:.62rem;letter-spacing:.11em;text-transform:uppercase;
  margin:0 0 5px;font-weight:500;
}
.legal .vc.yes .t{color:var(--fresh-i)}
.legal .vc.care .t{color:var(--amber-i)}
.legal .vc h3{font-family:var(--ff-d);font-weight:600;font-size:.98rem;margin:0 0 3px;letter-spacing:-.005em}
.legal .vc p{margin:0;font-size:.84rem;line-height:1.55;color:var(--i2)}
@media (max-width:640px){.legal .verdict{grid-template-columns:1fr}}

/* ── the hero carousel's dead slides ───────────────────────────────────
   The four slides are stacked on top of each other and cross-faded with
   opacity alone. An element at opacity 0 is still there: it takes clicks,
   it takes Tab, and it is read out. So the last slide in the markup sat
   over the other three and every click on the hero went to the pumpkin
   whoopies, whichever picture was showing.

   visibility carries the whole thing -- out of the hit test, out of the tab
   order, out of the accessibility tree -- and transitions alongside opacity
   so the cross-fade is unchanged: it flips to visible at the start of the
   fade in, and to hidden at the end of the fade out. */
.slide{visibility:hidden;pointer-events:none;
  transition:opacity .7s ease,visibility .7s ease}
.slide.on{visibility:visible;pointer-events:auto}

/* ── /locations/ ──────────────────────────────────────────────────────────
   A map and a list. Side by side on a desktop, with the map sticky so a
   reader scrolling through Queens can still see where Queens is; stacked on
   a phone, map first, because a sticky map there eats the screen the shops
   need. The counter sits above both -- it is the one place that always has
   everything, not a row in a list. */
.locs{padding:26px 17px 40px}
.locs-in{max-width:1180px;margin:0 auto}
.locs h1{font-family:var(--ff-d);font-weight:600;font-size:1.9rem;letter-spacing:-.02em;margin:0 0 20px}
.locs .lede{font-size:1.02rem;color:var(--i2);margin:0 0 20px;max-width:62ch}

.locs .counter{
  background:var(--amber-bg);border:1px solid var(--amber-ln);border-radius:11px;
  padding:16px 18px 17px;margin:0 0 22px;
}
.locs .ceyebrow{
  font-family:var(--ff-m);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--amber-i);margin:0 0 5px;
}
.locs .counter h2{font-family:var(--ff-d);font-weight:600;font-size:1.22rem;letter-spacing:-.015em;margin:0 0 4px;padding:0;border:0}
.locs .counter p{margin:0;font-size:.95rem}
.locs .chours{color:var(--amber-ink);font-weight:600;margin-top:3px!important}
.locs .cnote{color:var(--amber-ink);margin-top:3px!important}
.locs .cgo{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:13px!important}
.locs .cgo .btn{
  display:inline-block;text-decoration:none;font-weight:600;font-size:.93rem;
  padding:9px 16px;border-radius:7px;
  color:var(--amber-ink);background:transparent;border:1.5px solid var(--amber-i);
}
.locs .cgo .btn:hover{background:#fff}

.lcols{display:flex;flex-direction:column;gap:0}
.lmap{
  height:330px;border:1px solid var(--ln);border-radius:11px;overflow:hidden;
  background:var(--soft);margin:0 0 18px;
}

/* The search: a zip or an address, and the nearest shops come up above the
   folds. Plain on purpose -- one box, one button. */
.lsearch{display:flex;gap:8px;margin:0 0 22px}
.lsearch input{
  flex:1;min-width:0;font:inherit;font-size:1rem;color:var(--i);
  padding:11px 14px;border:1.5px solid var(--ln2);border-radius:9px;background:#fff;
}
.lsearch input:focus{outline:none;border-color:var(--amber-i);box-shadow:0 0 0 3px var(--amber-bg)}
.lsearch button{
  font:inherit;font-weight:600;font-size:.95rem;cursor:pointer;
  padding:11px 18px;border:0;border-radius:9px;background:var(--i);color:#fff;
}
.lsearch button:hover{opacity:.88}
.lnear{margin:0 0 28px}
.lnhead{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding-bottom:7px;border-bottom:1px solid var(--ln)}
.lnhead h2{font-family:var(--ff-d);font-weight:600;font-size:1.12rem;margin:0;padding:0;border:0}
.lnclear{font-size:.9rem;color:var(--i3)}
.lnmsg{font-size:.93rem;color:var(--i2);margin:0;padding:4px 0}
.lmi{float:right;font-family:var(--ff-b);font-weight:600;font-size:.86rem;color:var(--amber-ink);margin-left:10px}
.lyou{
  display:block;width:16px;height:16px;border-radius:50%;
  background:#2a6fdb;border:3px solid #fff;box-shadow:0 0 0 5px rgba(42,111,219,.22),0 1px 4px rgba(0,0,0,.35);
}

.lgroup{margin:0 0 24px}
.lgroup h2{
  font-family:var(--ff-d);font-weight:600;font-size:1.12rem;margin:0 0 2px;
  padding-bottom:7px;border-bottom:1px solid var(--ln);
}
/* The folded block for the out-of-state shops. It has to read as a heading
   somebody can open, not as a heading that has lost its list -- so the arrow
   and the states underneath it do the telling. */
.lout{margin-bottom:28px}
.larea>summary,.lout>summary{
  cursor:pointer;list-style:none;padding-bottom:7px;border-bottom:1px solid var(--ln);
  display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;
}
.larea>summary::-webkit-details-marker,.lout>summary::-webkit-details-marker{display:none}
.larea>summary{margin-bottom:2px}
.larea[open]>summary .lsum::after{transform:translateY(1px) rotate(225deg)}
.larea>summary:hover .lsum{color:var(--amber-ink)}
.lsum{font-family:var(--ff-d);font-weight:600;font-size:1.12rem}
.lsum::after{
  content:"";display:inline-block;width:7px;height:7px;margin-left:9px;
  border-right:1.6px solid var(--i3);border-bottom:1.6px solid var(--i3);
  transform:translateY(-2px) rotate(45deg);
}
.lout[open] .lsum::after{transform:translateY(1px) rotate(225deg)}
.lwhere{font-size:.86rem;color:var(--i3)}
.lout[open] .lwhere{display:none}
.lout>summary:hover .lsum{color:var(--amber-ink)}

.lshops{list-style:none;margin:0;padding:0}
.lshops li{padding:12px 0;border-bottom:1px solid var(--ln)}
.lshops li.pinned{cursor:pointer}
.lshops h4{font-family:var(--ff-d);font-weight:600;font-size:1rem;margin:0 0 2px}
/* The neighbourhood inside a borough. Quieter than the borough above it and
   louder than the shops under it, which is the whole job. */
.lsub{
  font-family:var(--ff-m);font-size:.66rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--i3);font-weight:500;
  margin:16px 0 0;padding-bottom:5px;
}
.lshops+.lsub{margin-top:18px}
.laddr{margin:0;font-size:.93rem;color:var(--i2)}
.lnote{margin:3px 0 0;font-size:.86rem;color:var(--amber-ink)}
.lgo{margin:4px 0 0;font-size:.9rem}

/* The pin. Drawn rather than fetched: the library's own marker is an image off
   the same CDN, and a shop rendered as a broken image is worse than none.
   Burgundy against the grey map -- the shops are the only thing on it with any
   colour in them, which is the entire point of a basemap this quiet. */
.lpin{
  display:block;width:13px;height:13px;border-radius:50%;cursor:pointer;
  background:#7d2436;border:2.5px solid #fff;
  box-shadow:0 1px 4px rgba(0,0,0,.4);
}
.lshops li.on{background:var(--amber-bg);box-shadow:-13px 0 0 var(--amber-bg),13px 0 0 var(--amber-bg)}

/* MapLibre's furniture, quietened down. The zoom buttons, the attribution bar
   and the popup all ship louder than anything else on the page, so they take
   the greys and the radii of the cards around them. The attribution stays: it
   is the condition of using the tiles. */
.maplibregl-map{font:inherit}
.maplibregl-popup-content{
  font-family:var(--ff-b);font-size:.9rem;line-height:1.45;
  padding:9px 13px;border-radius:8px;box-shadow:0 2px 12px rgba(0,0,0,.14);
}
.maplibregl-ctrl-group{border-radius:7px;box-shadow:0 1px 4px rgba(0,0,0,.1)}
.maplibregl-ctrl-group button{width:28px;height:28px}
.maplibregl-ctrl-attrib{font-size:.62rem;background:rgba(255,255,255,.82)}
.maplibregl-ctrl-attrib a{color:var(--i3)}

@media (min-width:901px){
  .lcols{display:grid;grid-template-columns:1fr 1.06fr;gap:0 34px;align-items:start}
  /* The list scrolls in its own pane rather than running the page on for
     eighty-one shops. It is the same height as the map beside it, so the two
     start and finish together and the footer is always one scroll away. */
  .lmain{order:1;min-width:0;max-height:calc(100vh - 56px);overflow-y:auto;
    padding-right:14px;scrollbar-width:thin;overscroll-behavior:contain}
  .lmain::-webkit-scrollbar{width:9px}
  .lmain::-webkit-scrollbar-thumb{background:var(--ln2);border-radius:5px;
    border:2px solid var(--bg)}
  .lmain::-webkit-scrollbar-track{background:transparent}
  .lmapwrap{order:2;position:sticky;top:18px}
  .lmap{height:calc(100vh - 56px);max-height:640px;margin:0}
}

/* ── /checkout/ ───────────────────────────────────────────────────────────
   The form on the left, the order on the right and sticky, so the total is
   visible while the address is being typed. One column on a phone, with the
   order first: what it costs is the thing somebody wants to see before they
   start filling anything in. */
.checkout{padding:26px 17px 46px}
.co-in{max-width:1080px;margin:0 auto;display:flex;flex-direction:column;gap:26px}
.checkout h1{font-family:var(--ff-d);font-weight:600;font-size:1.9rem;letter-spacing:-.02em;margin:0 0 14px}

.co-sec{border:0;padding:0;margin:0 0 26px}
.co-sec legend{
  font-family:var(--ff-d);font-weight:600;font-size:1.06rem;padding:0;margin:0 0 11px;
}
.co-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media (max-width:560px){.co-grid{grid-template-columns:1fr 1fr}.co-f{grid-column:1/-1}.co-f.co-half{grid-column:auto}}
.co-f{display:block}
.co-f[hidden]{display:none}
.co-f.co-wide{grid-column:1/-1}
.co-f>span{
  display:block;font-size:.82rem;font-weight:600;color:var(--i2);margin:0 0 4px;
}
.co-f>span i{font-style:normal;font-weight:400;color:var(--i3)}
.co-f input,.co-f select,.co-f textarea{
  width:100%;box-sizing:border-box;font-family:inherit;font-size:16px;color:var(--i);
  border:1px solid var(--ln2);border-radius:7px;padding:10px 12px;background:#fff;
}
.co-f input:focus,.co-f select:focus,.co-f textarea:focus{outline:2px solid var(--skyd);outline-offset:1px;border-color:var(--skyd)}
.co-hint{font-size:.86rem;color:var(--i3);margin:9px 0 0}
.co-hint.co-small{font-size:.8rem}

/* The three ways to get it. Whole card is the target, not just the dot. */
.co-ways{display:flex;flex-direction:column;gap:9px}
.co-way{
  display:flex;gap:11px;align-items:flex-start;cursor:pointer;
  border:1px solid var(--ln);border-radius:9px;padding:12px 13px;background:#fff;
}
.co-way:hover{border-color:var(--ln2)}
.co-way:has(input:checked){border-color:var(--amber-i);background:var(--amber-bg)}
.co-way input{margin:2px 0 0;accent-color:var(--amber-i);flex:none}
.co-way b{display:block;font-size:.97rem}
.co-way i{display:block;font-style:normal;font-size:.86rem;color:var(--i2);margin-top:2px}
.co-way em{display:block;font-style:normal;font-size:.84rem;color:var(--amber-ink);margin-top:5px}
.co-way.is-off{opacity:.62;cursor:not-allowed;background:var(--soft)}
.co-way.is-off b{text-decoration:line-through}

.co-sum{
  border:1px solid var(--ln);border-radius:11px;padding:16px 17px 18px;background:var(--soft);
  align-self:start;
}
.co-sum h2{font-family:var(--ff-d);font-weight:600;font-size:1.06rem;margin:0 0 12px}
.co-line{display:flex;gap:10px;align-items:baseline;padding:7px 0;font-size:.93rem}
.co-q{color:var(--i3);font-family:var(--ff-m);font-size:.76rem;flex:none}
.co-n{flex:1;min-width:0}
.co-n i{display:block;font-style:normal;font-size:.8rem;color:var(--amber-ink)}
.co-p{font-variant-numeric:tabular-nums;flex:none}
.co-item{align-items:flex-start;gap:14px;padding:9px 0}
.co-item .co-n,.co-item .co-p{font-family:var(--ff-d);font-weight:500;font-size:.95rem;line-height:1.3}
.co-item .co-n i{font-family:var(--ff-b);font-weight:400;margin-top:3px}
.co-ph{position:relative;width:56px;height:56px;flex:none;border-radius:0 0 0 12px;background:var(--ln2)}
.co-ph img{border-radius:inherit}
.co-qb{position:absolute;top:-7px;right:-7px;min-width:20px;height:20px;padding:0 5px;box-sizing:border-box;
  border-radius:10px;background:var(--i);color:#fff;font:600 .72rem/20px var(--ff-b);text-align:center}
.co-ph img{width:100%;height:100%;object-fit:cover;display:block}
.co-tot{border-top:1px solid var(--ln2);margin-top:6px;padding-top:11px;font-weight:700}
.co-sum .cta{width:100%;margin-top:14px}
.co-sum .cta:disabled{opacity:.55;cursor:not-allowed}

@media (min-width:861px){
  .co-in{display:grid;grid-template-columns:1fr 330px;gap:0 38px;align-items:start}
  .checkout h1{grid-column:1/-1}
  .co-sum{position:sticky;top:18px}
}
@media (max-width:860px){
  /* Order after the form on a phone, so the pay button is where the form
     ends rather than a scroll back up. */
  .co-in{display:flex;flex-direction:column}
  .checkout h1{order:-2}
}

/* The split order. A cart with a cake in it used to lose shipping with no
   explanation; this is what replaced that. Amber, like everything on this site
   that is a rule rather than a fault. */
.co-split{
  background:var(--amber-bg);border:1px solid var(--amber-ln);border-radius:9px;
  padding:13px 15px;margin-top:12px;
}
.co-split-h{font-weight:700;margin:0 0 7px;font-size:.95rem;color:var(--amber-ink)}
.co-split ul{margin:0 0 4px;padding-left:19px;font-size:.93rem}
.co-split li{margin:2px 0}
.co-split .co-hint{margin-top:7px}
.co-split-acts{display:flex;flex-wrap:wrap;gap:9px;margin-top:12px}
.co-act{
  font-family:inherit;font-size:.9rem;font-weight:600;cursor:pointer;
  padding:9px 14px;border-radius:7px;
  color:#fff;background:var(--amber-i);border:1.5px solid var(--amber-i);
}
.co-act.co-act2{color:var(--amber-ink);background:transparent}
.co-act:hover{opacity:.9}
.co-act.co-act2:hover{background:#fff;opacity:1}

/* A cart line with a photograph in it. The thumbnail and the name both go back
   to the product, because somebody checking what is in a gift box should not
   have to lose their cart to do it. */
/* The line was a three-column grid -- name, quantity, price -- and it stays
   one. The photograph is a fourth column in front, not a reason to start
   again with flex: that lost the column alignment between rows, so a long
   product name pushed its own price out of line with the one above it. */
.cartline{grid-template-columns:72px 1fr auto auto}
/* Remove wraps to a second row, and that row starts under the photograph
   unless it is told otherwise. It belongs under the name it removes. */
.cl-remove{grid-column:2}
.cl-ph{width:72px;height:72px;border-radius:7px;overflow:hidden;
  border:1px solid var(--ln);background:var(--soft);display:block}
.cl-ph img{width:100%;height:100%;object-fit:cover;display:block}
.cl-ph-none{display:block}
.cl-link{color:inherit;text-decoration:none}
.cl-link:hover{color:var(--skyd);text-decoration:underline}
@media (max-width:560px){
  .cartline{grid-template-columns:56px 1fr auto}
  .cl-ph{width:56px;height:56px}
  .cl-remove{grid-column:2}
}

/* A line under its minimum, and the checkout that waits for it. */
.cl-short{font-size:.8rem;color:#8a3324;margin:5px 0 0;font-weight:600}
.cl-shortall{font-size:.88rem;color:#8a3324;margin:12px 0 0}
.cta-off{
  display:block;text-align:center;margin-top:16px;
  background:var(--ln2);color:var(--i3);cursor:not-allowed;
  font-size:.9rem;font-weight:700;letter-spacing:.02em;padding:12px 14px;border-radius:5px;
}

/* What happens to a posted order, in place of a date nobody can promise. */
.co-shipwhen{
  font-size:.92rem;color:var(--amber-ink);background:var(--amber-bg);
  border:1px solid var(--amber-ln);border-radius:9px;padding:11px 13px;margin:0;
}

/* "Pickup or local delivery only" is a rule about the order, not a footnote,
   and in grey beside the shelf life it read as one. Burgundy, the same as the
   pins on the locations map, so it is the one coloured thing on the line. */
.cl-note.cl-only{color:#7d2436;font-weight:600}

/* The thumbnail row holds up to eight now, so it wraps rather than shrinking
   each one to a stamp. Four across on a desktop, which keeps them the size
   they were. */
.thumbs{flex-wrap:wrap}
.thumbs button,.thumbs span{flex:0 0 calc(25% - 6px)}
@media (max-width:560px){
  .thumbs button,.thumbs span{flex:0 0 calc(33.333% - 5px)}
}

/* A link inside body copy, rather than a link that announces itself. The site
   blue is right for navigation and loud in the middle of a paragraph about
   frosting -- an email address in running text should read as the text it sits
   in, underlined enough to be obviously clickable. */
.pblurb a{
  color:inherit;text-decoration:underline;
  text-decoration-color:var(--ln2);text-underline-offset:2px;
}
.pblurb a:hover{text-decoration-color:currentColor;color:var(--amber-ink)}

/* An option the current selection has taken away. Struck through and quiet
   rather than removed: a button that disappears reads as a broken page, one
   that is visibly unavailable reads as a rule -- and the line underneath says
   which rule. */
.opts .opt:disabled{
  opacity:.45;cursor:not-allowed;text-decoration:line-through;
  border-color:var(--ln);background:var(--soft);
}
.ognote{font-size:.82rem;color:var(--amber-ink);margin:6px 0 0}

/* ── the footer, three columns everywhere ─────────────────────────────────
   The mock gave a phone two columns, which put Sensible Bakery beside Meet
   the Baker and dropped Legal underneath on its own -- so the three headings
   read as two groups and an afterthought rather than three lists.

   Three columns on a phone makes each one about 105px wide, so the longer
   entries wrap to two lines. That is the trade, and it is the one asked for:
   a wrapped "Returns & Refunds" still sits under Legal where somebody looks
   for it. minmax(0,...) rather than 1fr because a plain 1fr will not shrink a
   column below its longest unbreakable word -- "Refunds" would push the grid
   wider than the screen and scroll the whole page sideways.

   Meet the Baker and Social stay stacked inside the middle column: they are
   one column with two headings, which is what h5.mt is already for. */
.fcols{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px 13px}
@media (min-width:620px){.fcols{gap:26px 18px}}
/* The gap is tighter on a phone than the mock's 18px, which is what buys the
   third column its width back. */

/* ── wide screens ───────────────────────────────────────────────────────────
   The template was signed off in a 940px desktop frame, so every desktop rule
   was judged at that width -- and nothing capped it. On a 1920 or 2560 screen
   each band ran edge to edge: the logo and the cart at opposite corners,
   product cards 450px wide under 13px names, a sentence 1800px long. Content
   now stops at a measure and centres. The cap is padding rather than a box, so
   each band's colour still runs the full width of the screen.

   The root size steps up as well. Type and the cap are both in rem, so they
   grow together and a 2560 screen gets the 1440 layout, larger -- not the
   1440 layout with a wider margin. */
@media (min-width:1440px){html{font-size:17px}}
@media (min-width:1920px){html{font-size:18px}}
@media (min-width:1200px){
  :root{--wide:max(22px,calc((100% - 80rem) / 2))}
  header.site,.crumbs,.trust,.sec,.story,.whole,.sfoot,.hero,
  .listing:not(.cartpage),.dsplit,main > .band,.xsell{
    padding-left:var(--wide);padding-right:var(--wide);
  }
}

/* Homepage section headings: one size for all of them. Centred (.c) where
   the section is a full-width grid; left where a photo sits beside it. */
.sh.big{font-size:1.35rem}
.sh.c{text-align:center}
@media (min-width:900px){.sh.big{font-size:1.6rem;margin-bottom:6px}}

/* Need it today: heading, then a short lead, then three titled items. Each
   step is visibly smaller than the one above it -- the lead and the item
   titles had ended up the same size. Icons were 24px and read as specks. */
.freshlead{font-size:.95rem}
.fresh3 > div{grid-template-columns:36px 1fr;gap:14px;align-items:center}
.fresh3 h4{font-size:1.1rem;margin:0 0 2px}
.fresh3 p{font-size:.88rem}
.fmark{margin-top:0}
.fmark svg{width:34px;height:34px;stroke-width:1.5}
@media (min-width:900px){
  .freshlead{font-size:1.02rem}
  .fresh3{gap:20px;margin-top:22px}
  .fresh3 > div{grid-template-columns:40px 1fr}
  .fmark svg{width:38px;height:38px}
  .fresh3 h4{font-size:1.2rem}
  .fresh3 p{font-size:.92rem}
}

/* Product cards on a desktop: the names and prices were sized for a 940px
   frame and read as fine print on a real screen. The price is what people
   scan for, so it steps up the most; the name follows it so it still leads. */
@media (min-width:900px){
  .pname{font-size:1rem}
  .peach{font-size:.95rem;font-weight:600;color:var(--i)}
  .pcta{font-size:.8rem}
}

@media (min-width:900px){
  .pillars h4{font-size:1.15rem}
  .pillars p{font-size:.9rem}
}

/* Wholesale band: one small label and one headline. As two serif lines of
   nearly the same size they read as the same heading twice. */
.whole .wsmark{
  font-family:var(--ff-b);font-weight:700;font-size:.8rem;letter-spacing:.16em;
  color:rgba(255,255,255,.85);margin:0 0 10px;max-width:none;
}
.whole h4{font-size:1.7rem;line-height:1.12;letter-spacing:-.015em;color:#fff;max-width:16ch;text-wrap:balance;margin:0}
.whole .btn{font-size:.95rem;padding:14px 26px;margin-top:22px}
@media (min-width:900px){
  .whole .wsmark{font-size:.9rem}
  .whole h4{font-size:2.5rem}
}

/* Desktop header: the nav row was phone-sized type on a wide bar. */
@media (min-width:900px){
  header.site .navlinks{gap:32px}
  header.site .navlinks a,
  header.site .navlinks .navtop{font-size:1.02rem}
  header.site .cv{width:6px;height:6px}
  header.site .navicons{gap:20px}
  header.site .navicons svg{width:21px;height:21px}
  header.site .acct span{font-size:1rem}
}

/* Need it today, desktop. A small portrait photo pinned to the far right of a
   full-width band left a wide empty gap between it and a short column of
   text, so the band read as unfinished. Now an even split: the photo large on
   the left, the text filling the right, the three ways to get it as rows
   ruled apart like a menu. */
@media (min-width:900px){
  .freshband{grid-template-columns:1fr 1fr;gap:clamp(40px,5vw,80px);align-items:center}
  .freshpic{order:-1;aspect-ratio:5/4;max-height:none}
  .fresh3{gap:0;margin-top:26px;border-top:1px solid var(--amber-ln)}
  .fresh3 > div{padding:18px 0;border-bottom:1px solid var(--amber-ln)}
}

/* The lead under Need it today was the only amber, semi-bold line on the
   page and read as a different voice. Plain body text, like every other
   lead. */
.freshlead{color:var(--i2);font-weight:400}
/* Homepage colour, from the 2026 Media Kit in Canva: dusty teal panels, slate
   headings, marigold and peach accents over a cream botanical pattern. Scoped
   to body.home so the shop and product pages are untouched. */
body.home{
  --teal:#8fb3ba;--teal-pale:#eaf2f3;--slate:#3f5964;
  --mari:#e8a33d;--peach:#f6dcc4;--cream:#fbf6ee;
  --botanical:url("/shop/assets/botanical.svg");
}
.home .hero .say{background:var(--cream) var(--botanical);background-size:220px;padding:28px 16px}
.home .hero .card{
  background:#fff;border-radius:18px;
  padding:26px 22px 28px;box-shadow:0 10px 30px rgba(63,89,100,.14);
}
.home .sh{color:var(--slate)}
.home .sh.c::after{
  content:"";display:block;width:56px;height:3px;border-radius:2px;
  background:var(--mari);margin:10px auto 0;
}
.home .cat{border-radius:12px;overflow:hidden;border-color:var(--peach)}
.home .cat .cb{border-top:4px solid var(--teal);background:var(--cream)}
.home .cat:nth-child(3n+2) .cb{border-top-color:var(--mari)}
.home .cat:nth-child(3n+3) .cb{border-top-color:var(--peach)}
.home .cat b{color:var(--slate)}
.home .sec.alt{
  background:linear-gradient(rgba(253,243,227,.9),rgba(253,243,227,.9)),var(--botanical);
  background-size:auto,220px;border-color:var(--peach);
}
.home .fresh3 svg{stroke:var(--teal)}
.home .freshpic{border-radius:18px;border:6px solid #fff;box-shadow:0 10px 30px rgba(63,89,100,.15)}
.home .pcard{border-radius:12px}
.home .pcta{background:var(--slate);border-color:var(--slate)}
.home .sec.wash{
  background:linear-gradient(rgba(242,249,252,.9),rgba(242,249,252,.9)),var(--botanical);
  background-size:auto,220px;
}
.home .rev{border-radius:14px}
.home .stars{color:var(--mari)}
@media (min-width:900px){
  .home .hero .say{padding:40px clamp(24px,3vw,48px);max-width:none;margin:0;align-self:stretch;display:flex;align-items:center;justify-content:center}
  .home .hero .card{padding:40px 38px 42px;max-width:520px}
}

/* ── shop page, October 2026 ───────────────────────────────────────────────
   From the shop-first mockup Wassem picked: three ways in across the top, the
   aisles as photo chips, flat product tiles, and the promises in a row at the
   bottom. The botanical pattern sits behind the one banner that carries copy,
   on a white card, as it does on the homepage hero. */
.listing{
  --cream:#fbf6ee;--mari:#e8a33d;--peach:#f6dcc4;--ink:#151515;
  --botanical:url("/shop/assets/botanical.svg");
}
.eyebrow{
  font-family:var(--ff-b);font-weight:700;font-size:.68rem;letter-spacing:.14em;
  text-transform:uppercase;color:#9a7a45;margin:0 0 10px;display:block;
}
.listing h1{margin-bottom:6px}
.shoplede{color:var(--i2);font-size:.95rem;margin:0 0 20px}
.listing > h1 + .chips{margin-top:18px}

.promos{display:grid;grid-template-columns:1fr;gap:14px;margin:0 0 22px}
.pm{
  position:relative;display:flex;flex-direction:column;border-radius:20px;overflow:hidden;
  text-decoration:none;color:var(--ink);min-height:240px;
}
.pm strong{font-family:var(--ff-d);font-weight:500;letter-spacing:-.01em;line-height:1.08;display:block}
.pm .pp{display:block;background-size:cover;background-position:center}
.pm.main{display:grid;grid-template-columns:1fr}
.pm.main .pp{min-height:200px}
.pm .btn{white-space:nowrap}
.pm.main .pt{background:var(--cream) var(--botanical);background-size:220px;padding:22px;display:flex;align-items:center}
.pm.main .pc{
  display:block;width:100%;background:#fff;border-radius:16px;padding:22px;
  box-shadow:0 10px 30px rgba(21,21,21,.12);
}
.pm.main strong{font-size:1.75rem}
.pm.main .pl{display:block;color:var(--i2);font-size:.9rem;margin:10px 0 0;line-height:1.45}
.pm.main .btn{background:var(--ink);border-radius:999px;margin-top:16px}
.pm.mari,.pm.peach{padding:22px 22px 0}
.pm.mari{background:var(--mari)}
.pm.peach{background:var(--peach)}
.pm.mari strong,.pm.peach strong{font-size:1.45rem;position:relative;z-index:1}
.pm.mari .eyebrow,.pm.peach .eyebrow{color:var(--ink);opacity:.75}
.pm.mari .pp,.pm.peach .pp{flex:1;min-height:150px;margin:16px -22px 0}

/* Phones: one swipeable row, so the three banners take one card's height
   instead of pushing the products a full screen and a half down. */
@media (max-width:899px){
  .promos{
    grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:82%;
    overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
    margin-right:-16px;padding-right:16px;
  }
  .promos::-webkit-scrollbar{display:none}
  .pm{scroll-snap-align:start;min-height:0;height:290px}
  .pm.main{grid-template-rows:1fr}
  .pm.main .pp{display:none}
  .pm.main .pt{padding:16px}
  .pm.main .pc{padding:18px}
  .pm.main strong{font-size:1.5rem}
  .pm.mari strong,.pm.peach strong{font-size:1.3rem}
  .pm.mari .pp,.pm.peach .pp{min-height:0}
}

.chips{display:flex;gap:10px;overflow-x:auto;padding:2px 0 6px;margin:0 0 20px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{
  flex:none;display:inline-flex;align-items:center;gap:9px;padding:6px 18px 6px 6px;
  border-radius:999px;background:#f3f5f6;color:var(--ink);font-weight:700;font-size:.86rem;
  text-decoration:none;white-space:nowrap;
}
.chip i{width:34px;height:34px;border-radius:50%;background:#ddd center/cover;flex:none}
.chip:hover{background:#e8ecee}
.chip[aria-current="page"]{background:var(--ink);color:#fff}

/* Flat tiles: the photograph rounded, the name and price under it on the
   page rather than inside a grey card. */
.listing .grid{gap:22px 16px}
.listing .grid .tile{background:none;border:0;padding:0;text-align:left;box-shadow:none}
.listing .grid .tile .tph{border-radius:14px;overflow:hidden;background:#f3f3f3;aspect-ratio:1/1}
.listing .grid .tile h3{font-family:var(--ff-d);font-weight:500;color:var(--ink)}
.listing .grid .tile .ttag{text-align:left}
.listing .grid .tile .tprice{font-family:var(--ff-d);font-weight:500;letter-spacing:0;color:var(--ink);text-transform:none}

.perks{
  background:#fbf6ee;display:grid;grid-template-columns:1fr 1fr;gap:18px;
  padding:26px 17px;text-align:center;
}
.perks b{display:block;font-weight:700;font-size:.9rem;color:var(--ink,#151515)}
.perks span{display:block;font-size:.8rem;color:var(--i2);margin-top:3px}

@media (min-width:900px){
  .promos{grid-template-columns:1.6fr 1fr;gap:18px}
  .pm.main{grid-template-columns:1.15fr .85fr}
  .pm{min-height:370px}
  .pm.main .pt{padding:24px}
  .pm.main .pc{padding:26px 28px}
  .pm.main strong{font-size:1.95rem}
  .shoplede{font-size:1.02rem}
  .perks{grid-template-columns:repeat(4,1fr);padding:30px 22px}
}
@media (min-width:1200px){.perks{padding-left:var(--wide);padding-right:var(--wide)}}

/* ── homepage, October 2026 ────────────────────────────────────────────────
   The editorial layout Wassem settled on: the botanical pattern across the
   whole hero, the photograph with ONE rounded corner (repeated on every
   picture down the page, which is what holds it together), "everyone" in teal
   italic, aisles as big type, best sellers on a
   black band. Colour is cream, white and black; teal only on that one word,
   marigold only on the numbers and the stars. */
body.home{--ink:#151515;--corner:0 0 0 clamp(60px,12vw,200px)}
.home .eyebrow{color:#9a7a45}
.home .btn{background:var(--ink);border-radius:999px}
.home .btn.ghost{background:transparent;color:var(--ink);border:1.5px solid var(--ink)}
.home .sh.big{color:var(--ink);font-family:var(--ff-d);font-weight:500;letter-spacing:-.015em;line-height:1.08;text-transform:none}
.home .story .btn{background:#fff;color:var(--ink)}

.home .hero{
  background:var(--cream) var(--botanical);background-size:220px;
  padding:16px;gap:16px;align-items:stretch;
}
.home .hero .say{background:none;padding:0;order:0}
.home .hero .card{border-radius:20px;padding:22px 20px;box-shadow:0 10px 30px rgba(21,21,21,.10)}
.home .hero h1{font-weight:400;font-size:2.3rem;line-height:.98;letter-spacing:-.03em;color:var(--ink)}
.home .hero h1 em{font-style:italic;color:#5f9aa3}
.home .hero .eyebrow{max-width:none;margin-bottom:22px}
.home .hero p:not(.eyebrow){color:#4b4b4b;font-size:1rem;line-height:1.55;max-width:36ch;margin-top:16px}
.home .hero .pic{border-radius:var(--corner);order:1}
.home .hero .dots{top:16px;bottom:auto;justify-content:flex-end;padding-right:18px}

.home .bakes{background:#fff}
.home .bakes .sh{margin-bottom:22px}
.catrows{list-style:none;margin:0;padding:0;border-top:1.5px solid var(--ink)}
.catrows a{
  display:grid;grid-template-columns:1fr 84px 24px;align-items:center;gap:10px;
  padding:14px 0;border-bottom:1px solid #e5e5e5;color:var(--ink);text-decoration:none;
}
.catrows .nm{font-family:var(--ff-d);font-size:1.6rem;font-weight:400;letter-spacing:-.01em}
.catrows .th{height:56px;border-radius:0 0 0 20px;background:#eee center/cover}
.catrows .ar{font-size:1.3rem;text-align:right}
.catrows a:hover .nm{color:#5f9aa3}

.home .oven{background:var(--ink);color:#fff;padding-right:0}
.home .oven .sh{color:#fff}
.home .oven .eyebrow,.home .oall{color:#f7c873}
.ohd{display:flex;justify-content:space-between;align-items:end;gap:16px;margin-bottom:24px;padding-right:17px}
.oall{font-weight:700;font-size:.82rem;text-decoration:none;white-space:nowrap}
.orow{display:flex;gap:16px;overflow-x:auto;scrollbar-width:none;padding-bottom:4px}
.orow::-webkit-scrollbar{display:none}
.oc{flex:0 0 220px;color:#fff;text-decoration:none}
.oi{display:block;aspect-ratio:4/5;border-radius:0 0 0 48px;background:#222 center/cover}
.oc .on{display:block;font-family:var(--ff-d);font-size:1.05rem;margin-top:12px;line-height:1.25}
.op{display:block;font-family:var(--ff-d);color:#f7c873;margin-top:4px}

.home .freshpic{border-radius:var(--corner);border:0;box-shadow:none}

.home .pull{
  background:linear-gradient(rgba(251,246,238,.88),rgba(251,246,238,.88)),var(--botanical);
  background-size:auto,220px;text-align:center;
}
.home .pull .stars{color:var(--mari);font-size:1.2rem;letter-spacing:.3em}
.home .pull blockquote{
  font-family:var(--ff-d);font-style:italic;font-weight:400;font-size:1.5rem;line-height:1.3;
  margin:18px auto 0;max-width:30ch;color:var(--ink);
}
.home .pull .who{color:#9a7a45;font-weight:700;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;margin-top:20px}

.home .partner{display:grid;grid-template-columns:1fr;gap:26px;align-items:center;background:#fff}
.home .partner .wpic{aspect-ratio:4/3;border-radius:var(--corner);background:#ddd url("/shop/assets/wholesale-hero.jpg") center/cover}
.home .partner .sh{margin-bottom:6px}

@media (min-width:900px){
  .home .hero{grid-template-columns:minmax(0,6fr) minmax(0,7fr);padding-top:48px;padding-bottom:48px;gap:40px}
  .home .hero .say{display:flex;align-items:stretch;padding:0;margin:0;max-width:none}
  .home .hero .card{padding:72px 52px;max-width:none;display:flex;flex-direction:column;justify-content:center}
  .home .hero h1{font-size:clamp(3.1rem,4.7vw,4.9rem)}
  .home .hero .eyebrow{max-width:none}
.home .hero p:not(.eyebrow){font-size:1.15rem}
  .home .hero .pic{aspect-ratio:auto;min-height:620px;max-height:none;height:100%}
  .home .sec{padding-top:90px;padding-bottom:90px}
  .home .sh.big{font-size:clamp(2.2rem,3.4vw,3.2rem);margin-bottom:6px}
  .home .bakes .sh{margin-bottom:36px}
  .catrows a{grid-template-columns:1fr 140px 40px;padding:20px 0}
  .catrows .nm{font-size:2.4rem}
  .catrows .th{height:84px;border-radius:0 0 0 28px}
  .ohd{padding-right:22px}
  .oc{flex-basis:300px}
  .on{font-size:1.25rem}
  .home .pull blockquote{font-size:2.6rem;max-width:26ch}
  .home .partner{grid-template-columns:1fr 1fr;gap:80px}
}
@media (min-width:1200px){.ohd{padding-right:var(--wide)}}

/* ── Our Story, October 2026 ───────────────────────────────────────────────
   The homepage's look carried to /about/: cream botanical pattern behind a
   white card, the photograph with ONE rounded corner, "baker" in teal italic,
   big serif section titles in place of the mono labels, the team on a black
   band. Cream, white and black; teal on the one word, marigold nowhere but
   numbers. Scoped to .brand-pg so Contact, Press and Affiliate (which share
   .about) are untouched. */
.brand-pg{
  --ink:#151515;--cream:#fbf6ee;--botanical:url("/shop/assets/botanical.svg");
  --corner:0 0 0 clamp(60px,12vw,200px);
}
.brand-pg main{padding:0}
.brand-pg p{color:#4b4b4b;font-size:1rem;line-height:1.65}
.brand-pg a{color:var(--ink)}
.brand-pg h1,.brand-pg h2{
  font-family:var(--ff-d);font-weight:400;letter-spacing:-.02em;line-height:1.02;
  color:var(--ink);text-transform:none;margin:0 0 18px;
}
.brand-pg h1{font-size:2.6rem}
.brand-pg h1 em{font-style:italic;color:#5f9aa3}
.brand-pg h2{font-size:2.1rem}

.shero{
  display:grid;grid-template-columns:1fr;gap:16px;padding:16px;
  background:var(--cream) var(--botanical);background-size:220px;
}
.shero .card{background:#fff;border-radius:20px;padding:28px 22px;box-shadow:0 10px 30px rgba(21,21,21,.10)}
.shero .card p:last-child{margin-bottom:0}
.shero .pic{border-radius:var(--corner);overflow:hidden;min-height:420px;position:relative;order:-1}
.shero .pic picture,.shero .pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 25%}

.ssec{padding:56px 17px;background:#fff}
.ssec > .in{max-width:1100px;margin:0 auto}
.brand-pg .facts{
  display:grid;grid-template-columns:1fr;gap:0;margin:30px 0 0;
  border-top:1.5px solid var(--ink);
}
.brand-pg .fact{background:none;border:0;border-bottom:1px solid #e5e5e5;border-radius:0;padding:18px 0}
.brand-pg .fact b{font-family:var(--ff-d);font-weight:400;font-size:1.6rem;letter-spacing:-.01em;color:var(--ink);display:block}
.brand-pg .fact span{font-size:.9rem;color:#6b6b6b}

.ssec.dark{background:var(--ink)}
.ssec.dark h2{color:#fff}
.ssec.dark p{color:rgba(255,255,255,.78)}
.brand-pg .strip{margin:30px 0 0;-webkit-mask-image:none;mask-image:none}
.brand-pg .track{gap:16px}
.brand-pg .track figure{width:220px}
.brand-pg .track img{border-radius:0 0 0 48px}
.brand-pg .track figure::after{border-radius:0 0 0 48px;background:#000;opacity:.28}

.ssec.pat{
  background:linear-gradient(rgba(251,246,238,.88),rgba(251,246,238,.88)),var(--botanical);
  background-size:auto,220px;
}
.brand-pg .vals{grid-template-columns:1fr;gap:14px;margin-top:8px}
.brand-pg .val{border:0;border-radius:0 0 0 36px;padding:24px 22px 26px;background:#fff;box-shadow:0 10px 30px rgba(21,21,21,.06)}
.brand-pg .val .mk{background:var(--cream);width:36px;height:36px;margin-bottom:12px}
.brand-pg .val .mk svg{stroke:var(--ink);width:17px;height:17px}
.brand-pg .val h3{font-family:var(--ff-d);font-weight:500;font-size:1.25rem;color:var(--ink);margin:0 0 8px}
.brand-pg .val p,.brand-pg .give li{font-size:.9rem;line-height:1.55;color:#4b4b4b}
.brand-pg .give li::before{background:var(--ink)}

@media (min-width:640px){
  .brand-pg .facts{grid-template-columns:repeat(3,1fr)}
  .brand-pg .fact{border-bottom:0;padding:20px 20px 0 0}
  .brand-pg .vals{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:900px){
  .shero{grid-template-columns:1fr 1fr;gap:40px;padding:48px 40px}
  .shero .card{padding:56px 52px;display:flex;flex-direction:column;justify-content:center}
  .shero .pic{min-height:620px;order:0}
  .brand-pg h1{font-size:clamp(3.4rem,5.4vw,5.2rem)}
  .brand-pg h2{font-size:clamp(2.2rem,3.4vw,3.2rem)}
  .ssec{padding:90px 40px}
  .brand-pg .fact b{font-size:2rem}
  .brand-pg .track figure{width:280px}
  .brand-pg .vals{grid-template-columns:repeat(4,1fr);gap:18px}
}

/* ── Wholesale partnership, October 2026 ───────────────────────────────────
   Same frame as Our Story (.brand-pg): pattern hero with a white card and the
   one-corner photo, steps as the homepage's numbered rows, the facts as white
   cards on the cream pattern, and the form in Assistant rather than mono. */
.brand-pg .shero .lede{font-size:1.05rem;color:#4b4b4b;max-width:40ch;margin:0}
.brand-pg .steps{gap:0;border-top:1.5px solid var(--ink);margin-top:8px}
.brand-pg .step{grid-template-columns:44px 1fr;gap:14px;padding:22px 0;border-bottom:1px solid #e5e5e5}
.brand-pg .step .n{background:none;border:0;width:auto;height:auto;border-radius:0;
  font-family:var(--ff-d);font-size:1.8rem;font-weight:400;color:#c8963e;line-height:1}
.brand-pg .step h3{font-family:var(--ff-d);font-weight:400;font-size:1.6rem;color:var(--ink);margin:0 0 6px;letter-spacing:-.01em}
.brand-pg .step p{font-size:.95rem}

.brand-pg .facts2{gap:14px;margin-top:8px}
.brand-pg .facts2 .fact{background:#fbf6ee;border:0;border-radius:0 0 0 36px;padding:24px 22px 26px;
  box-shadow:0 10px 30px rgba(21,21,21,.06)}
.brand-pg .facts2 dt{font-family:var(--ff-d);font-weight:500;font-size:1.3rem;color:var(--ink);margin-bottom:8px}
.brand-pg .facts2 dd{font-size:.95rem;color:#4b4b4b}
.brand-pg .facts2 dd strong{color:var(--ink)}
.brand-pg .facts2 dd .sub{color:#6b6b6b}

.brand-pg .wgrid{gap:14px 16px;margin-top:22px}
.brand-pg .field label{font-family:var(--ff-b);font-size:.72rem;font-weight:700;letter-spacing:.12em;color:#9a7a45;margin-bottom:7px}
.brand-pg .field label em{color:#9a7a45}
.brand-pg .field input,.brand-pg .field textarea{border:1px solid #d9d9d9;border-radius:12px;padding:13px 15px;background:#fff}
.brand-pg form button{background:var(--ink);color:#fff;border:0;border-radius:999px;padding:14px 30px;
  font-family:var(--ff-b);font-weight:700;font-size:.95rem;margin-top:10px;cursor:pointer}

@media (min-width:900px){
  .brand-pg .step{grid-template-columns:80px 1fr;padding:28px 0}
  .brand-pg .step .n{font-size:2.6rem}
  .brand-pg .step h3{font-size:2.2rem}
  .brand-pg .facts2{gap:18px}
  .trade .shero .pic{min-height:480px}
}

/* Wholesale facts fold to one line; the arrow opens the detail. */
.brand-pg .facts2 .fact{display:block}
.brand-pg .facts2 summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:1fr 24px;gap:4px 12px;align-items:start}
.brand-pg .facts2 summary::-webkit-details-marker{display:none}
.brand-pg .facts2 .k{grid-column:1;display:block;font-family:var(--ff-d);font-weight:500;font-size:1.3rem;color:var(--ink);margin-bottom:4px}
.brand-pg .facts2 .v{grid-column:1;display:block;font-size:.95rem;color:#4b4b4b;line-height:1.55}
.brand-pg .facts2 .v strong{color:var(--ink)}
.brand-pg .facts2 .ar{grid-column:2;grid-row:1 / span 2;align-self:center;width:10px;height:10px;
  border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:rotate(45deg);transition:transform .2s;justify-self:center}
.brand-pg .facts2 details[open] .ar{transform:rotate(-135deg)}
.brand-pg .facts2 .sub{margin:10px 0 0;font-size:.88rem;color:#6b6b6b;line-height:1.55}

/* Address lookup list */
.acwrap{position:relative}
.aclist{position:absolute;left:0;right:0;top:100%;z-index:20;margin:6px 0 0;padding:6px;list-style:none;background:#fff;
  border:1px solid #d9d9d9;border-radius:12px;box-shadow:0 12px 30px rgba(21,21,21,.12)}
.aclist li{padding:10px 12px;border-radius:8px;font-size:.92rem;cursor:pointer;color:var(--ink,#151515)}
.aclist li:hover,.aclist li.on{background:#fbf6ee}

/* Our Story portrait: a 4:5 frame anchored to the bottom, so the mixer he is
   leaning on stays in shot instead of cropping to a headshot. */
.about.brand-pg:not(.trade) .shero .pic{min-height:0;aspect-ratio:4/5}
.about.brand-pg:not(.trade) .shero .pic img{object-position:center 100%}
@media (min-width:900px){
  .about.brand-pg:not(.trade) .shero{grid-template-columns:1.15fr .85fr}
}

/* ── Press (/media/), October 2026 ─────────────────────────────────────────
   No photograph on this page, so the hero is the pattern with one centred
   white card holding the title and the kit. Mentions are the homepage's
   ruled rows; the contact block and form sit on the cream pattern. */
.phero{background:var(--cream) var(--botanical);background-size:220px;padding:16px}
.phero .card{background:#fff;border-radius:20px;padding:30px 22px;box-shadow:0 10px 30px rgba(21,21,21,.10);max-width:1100px;margin:0 auto}
.brand-pg.press .phero .eyebrow{margin:26px 0 12px;font-family:var(--ff-b);font-weight:700;font-size:.72rem;letter-spacing:.14em;color:#9a7a45;text-transform:uppercase}
.brand-pg.press .kits{gap:12px}
.brand-pg.press .kit{border:1.5px solid var(--ink);border-radius:999px;padding:10px 20px 10px 10px;background:#fff}
.brand-pg.press .kit:hover{background:var(--ink);border-color:var(--ink)}
.brand-pg.press .kit:hover .kitt strong{color:#fff}
.brand-pg.press .kiti{background:var(--cream)}
.brand-pg.press .kiti svg{stroke:var(--ink)}
.brand-pg.press .kitt strong{font-weight:500;font-size:1.05rem;color:var(--ink)}

.brand-pg.press .in{max-width:1100px}
.brand-pg.press .mentions{gap:0;border-top:1.5px solid var(--ink);margin:8px 0 0}
.brand-pg.press .mentions a{display:grid;grid-template-columns:1fr 28px;gap:4px 14px;align-items:center;padding:20px 0;border-bottom:1px solid #e5e5e5}
.brand-pg.press .mentions li:last-child a{border-bottom:1px solid #e5e5e5}
.brand-pg.press .mentions strong{grid-column:1;font-family:var(--ff-d);font-weight:400;font-size:1.45rem;line-height:1.2;color:var(--ink);text-decoration:none;letter-spacing:-.01em}
.brand-pg.press .mentions strong::after{content:none}
.brand-pg.press .mentions span{grid-column:1;font-family:var(--ff-b);font-weight:700;font-size:.72rem;letter-spacing:.14em;color:#9a7a45;margin-top:4px}
.brand-pg.press .mentions .ar{grid-column:2;grid-row:1 / span 2;font-style:normal;font-size:1.3rem;text-align:right;color:var(--ink)}
.brand-pg.press .mentions a:hover strong{color:#5f9aa3}

.brand-pg.press .cgrid{margin:0;padding:0;border:0;gap:18px}
.brand-pg.press .cinfo,.brand-pg.press #cform{background:#fff;border-radius:0 0 0 36px;padding:28px 24px;box-shadow:0 10px 30px rgba(21,21,21,.06)}
.brand-pg.press #cform h3{font-family:var(--ff-d);font-weight:400;font-size:1.8rem;color:var(--ink);margin:0 0 16px;letter-spacing:-.01em;text-transform:none}
.brand-pg.press .cinfo .k{font-family:var(--ff-b);font-weight:700;font-size:.72rem;letter-spacing:.14em;color:#9a7a45;text-transform:uppercase}
.brand-pg.press .cinfo .v a{color:var(--ink)}
.brand-pg.press .sub{color:#4b4b4b;font-size:1rem}
.brand-pg.press .field label{font-family:var(--ff-b);font-size:.72rem;font-weight:700;letter-spacing:.12em;color:#9a7a45;margin-bottom:7px}
.brand-pg.press .field input,.brand-pg.press .field textarea{border:1px solid #d9d9d9;border-radius:12px;padding:13px 15px;background:#fff}

@media (min-width:900px){
  .phero{padding:56px 40px}
  .phero .card{padding:56px 52px}
  .brand-pg.press .mentions a{padding:26px 0}
  .brand-pg.press .mentions strong{font-size:2rem}
}
.brand-pg.press .cinfo h2{font-size:1.8rem;margin-bottom:12px}
@media (min-width:900px){.brand-pg.press .cgrid{grid-template-columns:minmax(0,380px) 1fr}}

/* ── Affiliate (/affiliate/), October 2026 ─────────────────────────────────
   Pattern hero card like Press; the three answers keep their alternating
   photographs, now with the one rounded corner; steps and details as the
   homepage's ruled rows; the application as a white card on the pattern. */
.brand-pg.affil .phero .lede{font-size:1.05rem;color:#4b4b4b;margin:0}
.brand-pg.affil .in{max-width:1100px}
.brand-pg.affil .asec{border-bottom:0;padding:26px 0}
.brand-pg.affil .asec:first-child{padding-top:0}
.brand-pg.affil .apic{border:0;border-radius:0 0 0 64px;aspect-ratio:4/5}
.brand-pg.affil .awho{padding-left:0;list-style:none;gap:0;border-top:1.5px solid var(--ink)}
.brand-pg.affil .awho li{padding:16px 0;border-bottom:1px solid #e5e5e5;font-size:1.05rem;color:var(--ink)}
.brand-pg.affil .asteps{gap:0;border-top:1.5px solid var(--ink)}
.brand-pg.affil .asteps li{padding:16px 0 16px 52px;border-bottom:1px solid #e5e5e5}
.brand-pg.affil .asteps li::before{background:none;width:auto;height:auto;top:12px;
  font-family:var(--ff-d);font-weight:400;font-size:1.8rem;color:#c8963e}
.brand-pg.affil .asteps strong{font-weight:500;font-size:1.3rem;color:var(--ink)}
.brand-pg.affil .asteps span{font-size:.95rem;color:#4b4b4b}
.brand-pg.affil .adet{border-top:1.5px solid var(--ink)}
.brand-pg.affil .adet .crow{display:grid;grid-template-columns:1fr;gap:2px;margin:0;padding:14px 0;border-bottom:1px solid #e5e5e5}
.brand-pg.affil .adet .k{font-family:var(--ff-b);font-weight:700;font-size:.72rem;letter-spacing:.14em;color:#9a7a45;text-transform:uppercase;margin:0}
.brand-pg.affil .adet .v{font-family:var(--ff-d);font-size:1.25rem;color:var(--ink);margin:0}
.brand-pg.affil .aform{background:#fff;border-radius:0 0 0 36px;padding:28px 24px;box-shadow:0 10px 30px rgba(21,21,21,.06)}
.brand-pg.affil .aform .sub{font-size:1rem;color:#4b4b4b}
.brand-pg.affil .field label{font-family:var(--ff-b);font-size:.72rem;font-weight:700;letter-spacing:.12em;color:#9a7a45;margin-bottom:7px}
.brand-pg.affil .field input,.brand-pg.affil .field textarea{border:1px solid #d9d9d9;border-radius:12px;padding:13px 15px;background:#fff}
.brand-pg.affil .instead a{color:var(--ink)}
@media (min-width:760px){
  .brand-pg.affil .asec{grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:64px;padding:48px 0}
  .brand-pg.affil .asec.aflip{grid-template-columns:minmax(0,420px) minmax(0,1fr)}
  .brand-pg.affil .adet .crow{grid-template-columns:200px 1fr;align-items:baseline;gap:16px}
}
@media (min-width:900px){
  .brand-pg.affil .aform{padding:44px 48px}
  .brand-pg.affil .asteps strong{font-size:1.5rem}
}
/* Shared button for the themed forms (press, affiliate, wholesale). */
.brand-pg form button{background:var(--ink);color:#fff;border:0;border-radius:999px;padding:14px 30px;
  font-family:var(--ff-b);font-weight:700;font-size:.95rem;margin-top:10px;cursor:pointer}

/* ── Contact (/about/contact/), October 2026 ───────────────────────────────
   The details go on the hero card beside the counter photograph; the form is
   a white card on the cream pattern below. */
.brand-pg.contact .crows{display:grid;grid-template-columns:1fr 1fr;gap:4px 24px;border-top:1.5px solid var(--ink);padding-top:18px;margin-top:6px}
.brand-pg.contact .crow{margin:0 0 14px}
.brand-pg.contact .crow .k{font-family:var(--ff-b);font-weight:700;font-size:.72rem;letter-spacing:.14em;color:#9a7a45;text-transform:uppercase;margin:0 0 4px}
.brand-pg.contact .crow .v{font-size:1.05rem;color:var(--ink)}
.brand-pg.contact .crow .v a{color:var(--ink)}
.brand-pg.contact .crow .v small{font-size:.88rem;color:#6b6b6b}
.brand-pg.contact .in{max-width:none}
.brand-pg.contact #cform{background:#fff;border-radius:20px;padding:28px 24px;box-shadow:0 10px 30px rgba(21,21,21,.06)}
.brand-pg.contact #cform h2{font-size:2rem;margin-bottom:16px}
.brand-pg.contact .field label{font-family:var(--ff-b);font-size:.72rem;font-weight:700;letter-spacing:.12em;color:#9a7a45;margin-bottom:7px}
.brand-pg.contact .field input,.brand-pg.contact .field textarea{border:1px solid #d9d9d9;border-radius:12px;padding:13px 15px;background:#fff}
@media (max-width:420px){.brand-pg.contact .crows{grid-template-columns:1fr}}
@media (min-width:900px){
  .brand-pg.contact .shero .pic{min-height:560px}
  .brand-pg.contact #cform{padding:44px 52px}
  .brand-pg.contact #cform{grid-column:1 / -1}
}

/* ── homepage story band, October 2026 ─────────────────────────────────────
   Was a near-black band with the typewriter photo dimmed to wallpaper behind
   it -- the one section on the page in a different style. Now white, like the
   rest: the photo shown properly with the one rounded corner, the title as big
   type with "hard way" in teal italic, the three pillars as cream cards. Text left, photo right, so
   it alternates with Need it today above. */
.home .story{background:#fff;background-image:none;color:var(--ink)}
.home .story .stop{display:grid;grid-template-columns:1fr;gap:26px;align-items:center}
.home .story .spic{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:var(--corner);order:-1}
.home .story .sh{font-size:2rem}
.home .story .sh em{font-style:italic;color:#5f9aa3}
.home .story .lede{color:#4b4b4b;font-size:1rem;line-height:1.65;max-width:46ch;margin:14px 0 0}
.home .story .btn{background:var(--ink);color:#fff;margin-top:24px}
/* The three pillars as the cream cards on the product pages: one rounded
   corner, no numbers. */
.home .story .pillars{list-style:none;margin:36px 0 0;padding:0;gap:10px}
.home .story .pillars li{background:var(--cream);border-radius:0 0 0 24px;padding:16px 18px}
.home .story .pillars h4{color:var(--ink);font-size:1.1rem;font-weight:500;letter-spacing:-.01em;margin:0 0 4px}
.home .story .pillars p{color:#4b4b4b;font-size:.85rem;line-height:1.55}
@media (min-width:900px){
  .home .story .stop{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(40px,5vw,80px)}
  .home .story .sh{font-size:clamp(2.2rem,3.4vw,3.2rem)}
  .home .story .spic{order:0;aspect-ratio:5/4}
  .home .story .lede{font-size:1.08rem}
  .home .story .pillars{grid-template-columns:repeat(3,1fr);gap:16px;margin-top:64px}
  .home .story .pillars li{padding:22px 24px;border-radius:0 0 0 32px}
  .home .story .pillars h4{font-size:1.25rem}
}

/* ── product page, brand theme ──────────────────────────────────────────
   Only the pieces Wassem picked from the homepage look; the rest of the page
   keeps its layout. The photo and promise cards take the ONE rounded corner,
   freshness is a cream pill, the promises are cream cards (no numbers), and the cross-sell gets a big serif heading.
   Scoped to body.pdp. */
.pdp{--ink:#151515;--cream:#fbf6ee;--mari:#e7a23b;--corner:0 0 0 clamp(48px,8vw,120px)}
.pdp .mhero{border-radius:var(--corner);overflow:hidden;height:auto;aspect-ratio:1/1}
.pdp .thumbs{padding:6px 0 0;gap:8px;flex-wrap:wrap;align-items:flex-start}
.pdp .thumbs button{flex:0 0 calc((100% - 24px)/4);height:auto;aspect-ratio:4/3;
  border:2px solid transparent;border-radius:0 0 0 14px;background-color:#fff}
.pdp .thumbs button.on{border-color:var(--ink);margin:0}
.pdp .fresh{display:inline-flex;align-items:center;gap:9px;background:var(--cream);color:var(--ink);
  font-weight:600;border-radius:999px;padding:8px 16px}
.pdp .fresh::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--mari);flex:none}
.pdp .stepper button:disabled{opacity:.3;cursor:default}
.pdp .stepper button:disabled:hover{background:transparent}

.pdp main > .band{margin:26px 0 0;border:0;background:#fff;padding:24px 17px 0}
.pdp .band .cols{gap:10px}
.pdp .band .cols > div{background:var(--cream);border-radius:0 0 0 24px;padding:16px 18px}
.pdp .band h4{font-weight:500;font-size:1.1rem;color:var(--ink);margin:0 0 4px;letter-spacing:-.01em}
.pdp .band p{font-size:.85rem;color:#4b4b4b;line-height:1.55}

.pdp .xsell{border:0;padding:44px 17px 52px}
.pdp .xh{font-weight:400;text-transform:none;letter-spacing:-.02em;font-size:1.9rem;color:var(--ink)}
.pdp .xgrid{gap:14px;margin-top:18px}
.pdp .xcard{border:0;padding:0;border-radius:0}
.pdp .xph{border:0;border-radius:0 0 0 24px}
.pdp .xname{font-weight:500;font-size:1rem;margin-top:10px;color:var(--ink)}
.pdp .xeach{font-size:.88rem}

.cl-qty button:disabled{opacity:.3;cursor:default}
.cl-qty button:disabled:hover{background:var(--bg)}

@media (min-width:900px){
  .pdp .thumbs button{flex-basis:calc((100% - 40px)/6)}
  .pdp main > .band{padding:40px 40px 0}
  .pdp .band .cols{grid-template-columns:repeat(3,1fr);gap:16px}
  .pdp .band .cols > div{padding:22px 24px;border-radius:0 0 0 32px}
  .pdp .band h4{font-size:1.25rem}
  .pdp .xsell{padding:64px 40px}
  .pdp .xh{font-size:clamp(2rem,3vw,2.8rem)}
  .pdp .xph{border-radius:0 0 0 32px}
  .pdp .xgrid{gap:22px}
}

/* Our Story: "Meet the baker" about 15% smaller, the card hugs its text, and
   the photograph is cut to the card's height rather than standing taller than
   it (Wassem, Oct 11). The narrower photo column keeps the frame close to 4:5
   so the mixer stays in shot. */
.about.brand-pg:not(.trade):not(.contact) h1{font-size:2.2rem}
@media (min-width:900px){
  .about.brand-pg:not(.trade):not(.contact) h1{font-size:clamp(2.9rem,4.6vw,4.4rem)}
  .about.brand-pg:not(.trade):not(.contact) .shero{grid-template-columns:minmax(0,1fr) minmax(0,440px);align-items:stretch}
  .about.brand-pg:not(.trade):not(.contact) .shero .card{padding:56px 56px;min-height:580px;justify-content:center}
  .about.brand-pg:not(.trade):not(.contact) .shero .pic{aspect-ratio:auto;min-height:0}
  .about.brand-pg:not(.trade):not(.contact) .shero .pic img{object-position:center 68%}
}

/* Our Story facts as the product page's cream cards: one rounded corner,
   no rule above (Wassem, Oct 11). */
.brand-pg .facts{border-top:0;gap:10px}
.brand-pg .fact{background:var(--cream);border-radius:0 0 0 24px;padding:16px 18px;border-bottom:0}
.brand-pg .fact b{font-size:1.25rem;font-weight:500;margin-bottom:4px}
.brand-pg .fact span{font-size:.85rem;color:#4b4b4b}
@media (min-width:640px){.brand-pg .fact{padding:22px 24px;border-radius:0 0 0 32px}}
@media (min-width:900px){.brand-pg .facts{gap:16px}.brand-pg .fact b{font-size:1.4rem}}

/* Our Story, Oct 11: hero capped at the 1100px section width; values cards
   tighter on phones. */
@media (min-width:900px){
  .about.brand-pg:not(.trade):not(.contact) .shero{padding-inline:max(40px,calc((100% - 1100px)/2))}
}
@media (max-width:639px){
  .brand-pg .vals{gap:10px}
  .brand-pg .val{padding:16px 18px 18px;border-radius:0 0 0 24px;
    display:grid;grid-template-columns:30px 1fr;column-gap:12px;align-items:center}
  .brand-pg .val .mk{width:30px;height:30px;margin-bottom:0}
  .brand-pg .val p{grid-column:1/-1;margin:6px 0 0}
  .brand-pg .val .mk svg{width:15px;height:15px}
  .brand-pg .val h3{font-size:1.1rem;margin:0}
  .brand-pg .val p{line-height:1.45}
}

/* Homepage hero: "Since 1992" moved off the eyebrow row, which read as too
   much text in one line. Fraunces italic in the teal of "everyone", so it
   ties to the headline without adding a font. */
.home .hero p.since{font-family:var(--ff-d);font-style:italic;color:#5f9aa3;font-size:1.05rem;margin-top:22px;letter-spacing:.01em}

/* Wide screens: the homepage hero's own padding:16px beat the --wide cap, so
   on a 1600+ screen it ran edge to edge and the photo was cropped to a narrow
   zoomed-in strip while the Featured logos below stayed phone-sized. Same
   measure as every other band now; the pattern still runs the full width. */
@media (min-width:1200px){
  .home .hero{padding-left:var(--wide);padding-right:var(--wide)}
}
@media (min-width:1400px){
  .logos{gap:22px 64px}
  .logos img{height:calc(var(--lh) * 2);max-width:320px}
}

/* Small uppercase labels ("Our bakes", "Featured at", the hero line) were
   sized for a phone and read as specks on a desktop. Reported on the homepage;
   applied site-wide. */
@media (min-width:900px){
  .eyebrow,.brand-pg.press .phero .eyebrow{font-size:.86rem}
  .trust p{font-size:.86rem}
}

/* ── cart, brand look (2026-10-13) ─────────────────────────────────────
   Items on the left, the total in a cream card on the right, as on the
   checkout. Photos take the one rounded corner the homepage uses; the
   quantity and Remove sit under the name they belong to. */
.cartpage{max-width:1100px}
.cartpage h1{font-family:var(--ff-d);font-weight:600;font-size:2.2rem;letter-spacing:-.02em;margin:0 0 22px}
.cart-grid{display:grid;grid-template-columns:1fr;gap:28px}
.cart-items{border-top:1px solid var(--ln)}
.cartpage .cartline{grid-template-columns:104px 1fr auto;gap:0 20px;padding:22px 0;align-items:start}
.cartpage .cl-ph{width:104px;height:104px;border:0;border-radius:0 0 0 18px}
.cartpage .cl-name{font-size:1.15rem;font-weight:600;line-height:1.3}
.cartpage .cl-opt{font-size:.86rem;margin-top:6px}
.cartpage .cl-price{font-family:var(--ff-d);font-weight:600;font-size:1.1rem;min-width:0}
.cl-acts{display:flex;align-items:center;gap:18px;margin-top:14px}
.cartpage .cl-qty{border-radius:999px;border-color:var(--ln2)}
.cartpage .cl-qty button{background:transparent;width:34px;height:34px}
.cartpage .cl-qty button:hover{background:var(--cream)}
.cartpage .cl-remove{grid-column:auto;font-size:.82rem}
.cartpage .cartfoot{
  background:var(--cream);border-radius:0 0 0 18px;padding:24px 22px;align-self:start;
}
.cartpage .cl-sub{font-size:1.35rem;margin-bottom:8px}
.cartpage .cartfoot .cta{border-radius:999px;padding:14px}
@media (min-width:900px){
  .cart-grid{grid-template-columns:1fr 340px;gap:44px}
  .cart-side{position:sticky;top:90px;align-self:start}
}
@media (max-width:560px){
  .cartpage h1{font-size:1.8rem}
  .cartpage .cartline{grid-template-columns:80px 1fr auto;gap:0 14px}
  .cartpage .cl-ph{width:80px;height:80px;border-radius:0 0 0 14px}
  .cartpage .cl-name{font-size:1.02rem}
  .cartpage .cl-price{font-size:1rem}
}
.cl-free{margin:4px 0 14px}
.cl-free p{font-size:.9rem;margin:0 0 8px}
.cl-free b{font-family:var(--ff-d);font-weight:600}
.cl-bar{display:block;height:6px;border-radius:3px;background:#fff;overflow:hidden}
.cl-bar i{display:block;height:100%;background:var(--mari,#e8a33d);border-radius:3px}


/* ── checkout, brand look (2026-10-13) ─────────────────────────────────
   Matches the cart: cream total card with the one rounded corner, pill
   button, bigger Fraunces headings, and a cream (not amber) chosen way. */
.checkout{--cream:#fbf6ee;--ink:#151515}
.co-in{max-width:1100px}
.checkout h1{font-size:2.2rem;margin-bottom:18px}
.co-sec legend{font-size:1.25rem;margin-bottom:13px}
.co-way{border-radius:12px;padding:15px 16px}
.co-way:has(input:checked){border-color:var(--ink);background:var(--cream)}
.co-way input{accent-color:var(--ink)}
.co-way b{font-family:var(--ff-d);font-weight:600;font-size:1.05rem}
.co-f input,.co-f select,.co-f textarea{border-radius:10px}
.co-sum{background:var(--cream);border:0;border-radius:0 0 0 18px;padding:24px 22px}
.co-sum h2{font-size:1.35rem;margin-bottom:14px}
.co-ph{width:64px;height:64px;border-radius:0 0 0 14px}
.co-item .co-n,.co-item .co-p{font-size:1rem}
.co-sum .cta{border-radius:999px;padding:14px}
@media (min-width:900px){.co-in{grid-template-columns:1fr 390px;gap:0 44px}}
/* The card box (Stripe draws its inside) and what it says when a card fails. */
.co-card{min-height:44px}
.co-err{margin:12px 0 0;font-size:.9rem;color:#a33a2a}
/* The little i beside Phone: the reason shows on hover, or on tap. */
.co-tip{position:relative;display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;margin-left:3px;
  border:1px solid var(--i3);border-radius:50%;background:none;color:var(--i3);font:italic 600 10px/1 Georgia,serif;cursor:help;padding:0;vertical-align:1px}
.co-tip b{display:none;position:absolute;bottom:calc(100% + 7px);left:-8px;width:200px;padding:8px 10px;border-radius:9px;
  background:var(--ink,#151515);color:#fff;font:400 .78rem/1.4 var(--ff-b);text-align:left;z-index:5;box-shadow:0 4px 14px rgba(0,0,0,.15)}
.co-tip:hover b,.co-tip:focus b{display:block}
.co-promo{display:flex;gap:8px;margin-top:14px}
.co-promo input{flex:1;min-width:0;font:16px var(--ff-b);border:1px solid var(--ln2);border-radius:10px;padding:10px 12px;background:#fff;text-transform:uppercase}
.co-promo input::placeholder{text-transform:none}
.co-promo button{font:600 .9rem var(--ff-b);border:1px solid var(--ink,#151515);background:#fff;color:var(--ink,#151515);border-radius:999px;padding:0 16px;cursor:pointer}
@media (max-width:560px){.checkout h1{font-size:1.8rem}}

/* The upsell under the cart items: small photo cards with a + on each. */
.cart-grid>*{min-width:0}
.cart-faves{padding-top:26px}
.cart-faves h2{font-family:var(--ff-d);font-weight:600;font-size:1.1rem;margin:0 0 12px}
.cf-row{display:flex;gap:14px;overflow-x:auto;padding-bottom:4px}
.cf{position:relative;flex:0 0 150px}
.cf-ph{display:block;aspect-ratio:1;border-radius:0 0 0 14px;background:var(--soft) center/cover}
.cf-add{position:absolute;right:8px;top:8px;width:30px;height:30px;border-radius:50%;border:0;
  background:#fff;color:var(--i);box-shadow:0 1px 6px rgba(0,0,0,.18);cursor:pointer;
  font:600 1.15rem/30px var(--ff-b);text-align:center;text-decoration:none;padding:0}
.cf-add:hover{background:var(--i);color:#fff}
.cf-t{display:block;margin-top:8px;color:inherit;text-decoration:none}
.cf-t b{display:block;font-family:var(--ff-d);font-weight:500;font-size:.9rem;line-height:1.3}
.cf-t i{display:block;font-style:normal;font-size:.8rem;color:var(--i3);margin-top:1px}
.cf-t:hover b{text-decoration:underline}
@media (max-width:560px){.cf{flex-basis:128px}}
#co-pickdate[hidden]{display:none}

/* UPS speeds, under the Shipping option: indented so they read as part of it,
   one row each with the price on the right. */
.co-svcs{display:flex;flex-direction:column;gap:6px;margin-top:18px}
.co-svcs[hidden]{display:none}
.co-svc-h{margin:0 0 2px;font-size:.82rem;font-weight:600;color:var(--i2)}
.co-svc{display:flex;align-items:center;gap:10px;cursor:pointer;border:1px solid var(--ln);
  border-radius:10px;padding:10px 13px;background:#fff;font-size:.92rem}
.co-svc:has(input:checked){border-color:var(--ink);background:var(--cream,#fbf6ee)}
.co-svc input{margin:0;accent-color:var(--ink);flex:none}
.co-svc-n{flex:1}
.co-svc-n i{font-style:normal;color:var(--i2);font-size:.84rem;margin-left:6px}
.co-svc-p{font-weight:600}
/* "Did you mean Long Island City, NY?" under the city/ZIP row. */
.co-fix{margin-top:8px}
.co-fixbtn{border:0;background:none;padding:0;font:inherit;font-weight:600;color:var(--ink);
  text-decoration:underline;cursor:pointer}

/* Pickup / delivery date: our own calendar, closed days greyed out. */
.co-datef{position:relative}
.co-datebtn{width:100%;text-align:left;font:inherit;font-size:1rem;color:var(--i);background:#fff;
  border:1px solid var(--ln2);border-radius:10px;padding:11px 40px 11px 12px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23121212' stroke-width='1.6'%3E%3Crect x='2' y='3' width='12' height='11' rx='1.5'/%3E%3Cpath d='M2 6.5h12M5.5 1.5v3M10.5 1.5v3'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center}
.co-datebtn:focus-visible{outline:2px solid var(--skyd);outline-offset:1px}
.co-cal{position:absolute;z-index:20;top:100%;left:0;margin-top:6px;width:300px;max-width:calc(100vw - 32px);
  background:#fff;border:1px solid var(--ln2);border-radius:12px;padding:12px;box-shadow:0 10px 30px rgba(0,0,0,.12)}
.co-cal-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.co-cal-h b{font-family:var(--ff-d);font-weight:600;font-size:1rem}
.co-cal-h button{border:0;background:none;font-size:1.4rem;line-height:1;width:32px;height:32px;border-radius:50%;cursor:pointer;color:var(--i)}
.co-cal-h button:hover:not(:disabled){background:var(--soft)}
.co-cal-h button:disabled{opacity:.25;cursor:default}
.co-cal-g{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;text-align:center}
.co-cal-g i{font-style:normal;font-size:.72rem;color:var(--i3);padding:4px 0}
.co-cal-g button{border:0;background:none;font:inherit;font-size:.9rem;height:36px;border-radius:50%;cursor:pointer;color:var(--i)}
.co-cal-g button:hover:not(:disabled){background:var(--cream,#fbf6ee)}
.co-cal-g button:disabled{color:#c9cfd2;cursor:default}
.co-cal-g button.on{background:var(--i);color:#fff}

/* checkout headings: last word in teal italic, as on the homepage */
.co-sec legend em{font-style:italic;color:#5f9aa3}

/* ── The customer's order page (/order/), from the approved mockup ── */
main.ord{max-width:760px;margin:0 auto;padding:36px 16px 64px;font-family:var(--ff-b);color:#151515}
.ord-wait{color:#4f4f4f}
.ord-eb{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:#4f4f4f;font-weight:700}
main.ord h1{font-family:var(--ff-d);font-size:2.4rem;margin:6px 0 4px;font-weight:600}
main.ord h1 i{color:#8fb3ba}
.ord-sub{color:#4f4f4f;margin:0 0 26px}
.ord-steps{display:flex;gap:6px;margin:0 0 28px}
.ord-steps div{flex:1;text-align:center;font-size:.8rem;font-weight:600;color:#9aa}
.ord-steps div:before{content:"";display:block;height:6px;border-radius:3px;background:#e7e2d8;margin-bottom:8px}
.ord-steps .on{color:#151515}.ord-steps .on:before{background:#8fb3ba}
.ord-card{background:#fbf6ee;border-radius:0 0 0 28px;padding:24px;margin-bottom:18px}
.ord-card h2{font-family:var(--ff-d);font-size:1.35rem;margin:0 0 12px;font-weight:600}
.ord-big{font-family:var(--ff-d);font-size:1.6rem;font-weight:600}
.ord-row{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid #ece5d8}
.ord-q{font-weight:700;margin-right:10px}
.ord-row small{display:block;color:#3f5964;font-style:italic}
.ord-tot{display:flex;justify-content:space-between;font-family:var(--ff-d);font-size:1.4rem;font-weight:600;padding-top:10px}
.ord-mut{color:#4f4f4f}
.ord-card a{color:#3f5964}
.ord-two{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:600px){.ord-two{grid-template-columns:1fr}}

/* Retail account page (/account/). Reuses the order page's frame (.ord-*)
   and the checkout fields (.co-f). */
main.acct-pg{max-width:560px}
main.ord h1 i{font-style:italic}
.acct-form{display:grid;gap:14px;max-width:420px}
.acct-form .cta{margin-top:4px}
.acct-alt{margin:2px 0 0;font-size:.92rem}
.acct-alt a,main.acct-pg .ord-sub a{color:#3f5964}
.acct-ord{color:inherit;text-decoration:none}
.acct-ord:hover b{text-decoration:underline}
.acct-ord small{display:block;color:#4f4f4f;font-style:normal}
.acct-ord:last-child{border-bottom:0}

/* ── desktop text sizes ─────────────────────────────────────────────────────
   Wassem, 14 Oct 2026: text still too small on desktop, the footer included;
   the nav should be bigger and bold so it reads as a menu. Measured on 15 pages
   at 1280/1600/1920; floors: sentences, buttons and prices 1rem, short lines
   .95rem, small caps labels .8rem. rem, so each lands 16/17/18px with the root.
   `body` in front so it outranks the page-level rules it corrects. */
@media (min-width:1024px){
  body header.site .navlinks > a,body header.site .navlinks .navtop{font-size:1.2rem;font-weight:700}
  body header.site .acct span{font-size:1.2rem;font-weight:700}
  body header.site .navicons svg{width:26px;height:26px;stroke-width:1.9}
  body header.site .cartdot b{font-size:.72rem}

  body .sfoot .fcols a{font-size:1rem}
  body .sfoot .fcols h5{font-size:1.15rem}
  body .sfoot .fbot{font-size:.85rem}
  body .abar,body .abar-track span{font-size:.95rem}

  body .btn,body .pm[class] .pl,body .band .cols p,body .seasonhero .scap > span{font-size:1rem}
  body .oall{font-size:.95rem}
  body .fresh3 p,body.home .story .pillars p,body .home .story .pillars p{font-size:1rem}
  body .home .pull .who,body.home .pull .who{font-size:.85rem}

  body .listing .grid .tile h3{font-size:1.1rem}
  body .listing .grid .tile .tprice{font-size:1rem}
  body .tile .ttag{font-size:.95rem}
  body .shopside .sidehd,body .seasonhero h2{font-size:.8rem}
  body .chips .chip,body .shopside label,body .shopside label span{font-size:.95rem}
  body .perks b{font-size:1rem}
  body .perks span{font-size:.9rem}

  body .crumbs a,body .crumbs span,body .claims li{font-size:.8rem}
  body .addon .hint{font-size:.85rem}
  body .ingr,body .alg,body .addon label,body .pad .fresh{font-size:.95rem}
  body .pad .tagline{font-size:1.05rem}
  body .buy .cta,body.pdp .xeach{font-size:1rem}

  body .brand-pg .fact span,body .about .blogline{font-size:.95rem}
  body .brand-pg .val p{font-size:1rem}

  body .brand-pg[class] .field label,body .brand-pg[class] .field label .fopt,body .brand-pg[class] .crow .k{font-size:.8rem}
  body .brand-pg[class] .crow .v small{font-size:.9rem}
  body .brand-pg .facts2 .sub,body .brand-pg summary .v,body .brand-pg form button{font-size:1rem}

  body .lsub{font-size:.8rem}
  body .lnote,body .lwhere,body .lgo{font-size:.95rem}
  body .laddr{font-size:1rem}

  body .legal-in p,body .legal-in li,body dl.faq dd p{font-size:1.05rem}

  body .co-f > span,body .co-way i,body .co-hint{font-size:.95rem}
  body .co-promo button,body .co-sum .cta{font-size:1rem}
}

/* The shop's search box, above the grid. */
.shopq{
  display:block;width:100%;max-width:420px;box-sizing:border-box;margin:0 0 16px;
  font-family:var(--ff-b);font-size:.95rem;color:var(--i);background:#fff;
  border:1px solid var(--ln2);border-radius:8px;padding:10px 14px;
}
.shopq:focus{outline:none;border-color:var(--i)}