@charset "utf-8";
/* Bakers Pride - rebuilt front end.
   Palette is the CMS's own: brown #905b3c, peach #fadece, grey #f7f7f7,
   ink #4b4b4b. #905b3c clears AA in BOTH directions on white (5.60:1), so one
   colour serves as the surface and the link ink; #8c593b is the same hue a shade
   down, for the one pairing (#905b3c on peach, 4.38:1) that missed AA.        */

/* --------------------------------------------------------------------- font
   Two families survive from the CMS's TWENTY-FOUR declared @font-face blocks.
   Open Sans is the body face (the CMS shipped only weight 400, so every bold
   on the live site was faux-bolded - 600 and 700 are the real thing, from the
   same Apache-2.0 family); Angelina is the script display face, subset to the
   handful of headings that use it. Segoe UI was an 823 KB webfont of a font
   Windows already ships, and is gone.                                        */
@font-face{font-family:OpenSans;font-style:normal;font-weight:400;font-display:swap;
  src:url(/assets/fonts/opensans-400.woff) format("woff")}
@font-face{font-family:OpenSans;font-style:normal;font-weight:600;font-display:swap;
  src:url(/assets/fonts/opensans-600.woff) format("woff")}
@font-face{font-family:OpenSans;font-style:normal;font-weight:700;font-display:swap;
  src:url(/assets/fonts/opensans-700.woff) format("woff")}
@font-face{font-family:Angelina;font-style:normal;font-weight:400;font-display:swap;
  src:url(/assets/fonts/angelina-400.woff) format("woff")}

/* ------------------------------------------------------------------- tokens */
:root{
  --brand:#905b3c;          /* surfaces, rules                       */
  --brand-ink:#8c593b;      /* text and links on light backgrounds   */
  --brand-dk:#6f4529;       /* hover/active                          */
  --peach:#fadece;
  --peach-lt:#fdf3ea;
  --grey:#f7f7f7;
  --line:#e4ddd6;
  --ink:#3f3f3f;
  --ink-soft:#5f5f5f;
  --white:#fff;

  --shell:1200px;           /* content column, was a fixed 1020px    */
  --gut:clamp(16px,4vw,32px);
  --radius:10px;
  --radius-sm:6px;
  --shadow:0 1px 2px rgba(63,45,32,.06),0 6px 18px rgba(63,45,32,.07);
  --shadow-lift:0 2px 4px rgba(63,45,32,.08),0 12px 32px rgba(63,45,32,.12);

  --sans:"OpenSans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --script:"Angelina","Brush Script MT",cursive;

  --step-0:1rem;
  --step-1:clamp(1.06rem,.99rem + .34vw,1.25rem);
  --step-2:clamp(1.25rem,1.12rem + .62vw,1.6rem);
  --step-3:clamp(1.5rem,1.28rem + 1.05vw,2.1rem);
  --step-4:clamp(1.85rem,1.45rem + 1.9vw,2.85rem);

  --head-real:118px;        /* masthead bottom; JS keeps it honest    */
}

/* --------------------------------------------------------------- foundation */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--white);color:var(--ink);
  font:400 var(--step-0)/1.6 var(--sans);
  /* an e-mail address is one unbreakable 27-character token, and a rect walk
     cannot see it run out of its column - so break it everywhere by default */
  overflow-wrap:break-word;
}
img,picture,video{max-width:100%}
picture{display:block}          /* inline by default: does not fill a grid track
                                   and carries a baseline gap under every image */
img{border:0}
a{color:var(--brand-ink)}
a:hover,a:focus-visible{color:var(--brand-dk)}
h1,h2,h3,h4{line-height:1.2;margin:0 0 .5em;font-weight:700;color:#2f2a26}
h1{font-size:var(--step-4)}
h2{font-size:var(--step-3)}
h3{font-size:var(--step-2)}
h4{font-size:var(--step-1)}
p{margin:0 0 1em}
ul,ol{margin:0 0 1em;padding-left:1.35em}
hr{border:0;border-top:1px solid var(--line);margin:2.5rem 0}
:focus-visible{outline:3px solid var(--brand);outline-offset:2px;border-radius:3px}
button,input,select,textarea{font:inherit}  /* a <button> does not inherit the page font */

.bp-skip{position:absolute;left:-9999px;top:0;background:var(--brand);color:#fff;
  padding:.7rem 1.1rem;z-index:2000;border-radius:0 0 var(--radius-sm) 0}
.bp-skip:focus{left:0;color:#fff}

.bp-shell{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:var(--gut)}
.bp-vis-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ------------------------------------------------------------------ buttons */
.bp-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font:600 1rem/1 var(--sans);text-decoration:none;cursor:pointer;
  padding:.85rem 1.4rem;border-radius:var(--radius-sm);border:2px solid var(--brand);
  background:var(--brand);color:#fff;transition:background .15s,border-color .15s,transform .15s;
}
.bp-btn:hover,.bp-btn:focus-visible{background:var(--brand-dk);border-color:var(--brand-dk);color:#fff}
.bp-btn:active{transform:translateY(1px)}
.bp-btn--ghost{background:transparent;color:var(--brand-ink)}
.bp-btn--ghost:hover,.bp-btn--ghost:focus-visible{background:var(--brand);color:#fff}
.bp-btn--sm{padding:.55rem 1rem;font-size:.9rem}

/* ---------------------------------------------------------------- masthead */
.bp-top{background:var(--brand);color:#fff;font-size:.85rem}
.bp-top .bp-shell{display:flex;align-items:center;justify-content:flex-end;
  gap:1.25rem;min-height:40px;flex-wrap:wrap}
.bp-top a{color:#fff;text-decoration:none}
.bp-top a:hover,.bp-top a:focus-visible{color:#fff;text-decoration:underline}
.bp-top__tel{font-weight:700;letter-spacing:.02em;margin-right:auto}
.bp-social{display:flex;align-items:center;gap:.35rem;list-style:none;margin:0;padding:0}
.bp-social a{display:grid;place-items:center;width:32px;height:32px;border-radius:50%}
.bp-social a:hover,.bp-social a:focus-visible{background:rgba(255,255,255,.18)}
.bp-social svg{width:17px;height:17px;fill:currentColor;display:block}

.bp-head{position:sticky;top:0;z-index:1200;background:var(--white);
  border-bottom:3px solid var(--brand);box-shadow:0 1px 0 rgba(0,0,0,.04)}
.bp-head__bar{display:flex;align-items:center;gap:clamp(.75rem,2vw,2rem);
  min-height:78px;padding-block:.5rem}
.bp-logo{flex:0 0 auto;display:block;line-height:0}
.bp-logo img{width:clamp(150px,17vw,214px);height:auto;display:block}

/* ---------------------------------------------------------------- main nav */
.bp-nav{margin-left:auto}
.bp-nav__list{display:flex;align-items:center;gap:clamp(.3rem,1.1vw,1.15rem);
  list-style:none;margin:0;padding:0}
.bp-nav__link{
  display:block;padding:.6rem .35rem;text-decoration:none;color:var(--ink);
  font-weight:600;font-size:.95rem;letter-spacing:.01em;white-space:nowrap;
  border-bottom:3px solid transparent;margin-bottom:-3px;
}
.bp-nav__link:hover,.bp-nav__link:focus-visible,
.bp-nav__item--open>.bp-nav__link{color:var(--brand-ink);border-bottom-color:var(--brand)}
.bp-nav__link[aria-current="page"]{color:var(--brand-ink);border-bottom-color:var(--brand)}
.bp-nav__item{position:relative}
.bp-nav__item--has-sub>.bp-nav__link::after{
  content:"";display:inline-block;margin-left:.4rem;width:.42em;height:.42em;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:translateY(-2px) rotate(45deg)}
.bp-sub{
  position:absolute;top:100%;left:50%;translate:-50% 0;min-width:230px;
  background:#fff;border:1px solid var(--line);border-top:3px solid var(--brand);
  border-radius:0 0 var(--radius) var(--radius);box-shadow:var(--shadow-lift);
  list-style:none;margin:0;padding:.4rem;display:none;z-index:5;
}
/* keyboard path with no script: the toggle is focusable while the panel is
   display:none, focusing it opens the panel, and its links hold it open */
.bp-nav__item:hover>.bp-sub,
.bp-nav__item:focus-within>.bp-sub,
.bp-nav__item--open>.bp-sub{display:block}
.bp-sub--wide{min-width:min(560px,86vw);columns:2;column-gap:.4rem;padding:.6rem}
.bp-sub a{display:block;padding:.5rem .7rem;border-radius:var(--radius-sm);
  text-decoration:none;color:var(--ink);font-size:.92rem;break-inside:avoid}
.bp-sub a:hover,.bp-sub a:focus-visible{background:var(--peach-lt);color:var(--brand-ink)}

/* -------------------------------------------------------------- head search */
.bp-search{display:flex;align-items:center;gap:.35rem;flex:0 0 auto}
.bp-search input{
  width:clamp(120px,13vw,180px);padding:.5rem .7rem;border:1px solid #9a8c80;
  border-radius:var(--radius-sm);background:#fff;color:var(--ink);font-size:.9rem}
.bp-search input::placeholder{color:#6d6259}
.bp-search button{
  display:grid;place-items:center;width:38px;height:38px;padding:0;cursor:pointer;
  border:2px solid var(--brand);background:var(--brand);color:#fff;border-radius:var(--radius-sm)}
.bp-search button:hover,.bp-search button:focus-visible{background:var(--brand-dk);border-color:var(--brand-dk)}
.bp-search svg{width:17px;height:17px;fill:currentColor}

/* ------------------------------------------------------- burger + off-canvas
   Everything the drawer owns carries a base-level display:none, or it renders
   inside the desktop bar too - which is both a layout bug at one width and a
   duplicate link for a screen reader.                                        */
.bp-burger{display:none}
.bp-drawer{display:none}
.bp-backdrop{display:none}

/* ---------------------------------------------------------------- hero */
.bp-hero{position:relative;background:#2a2320;overflow:hidden}
/* A horizontal scroll-snap track CAPTURES the mouse wheel: a visitor scrolling
   down from the top of the page advances the carousel instead, and the page
   does not move at all. So give the track real overflow only where swiping is
   the input - on a touch device - and drive it from the arrows and dots
   everywhere else, where JS scrollTo still works on an overflow:hidden box. */
.bp-hero__track{
  display:flex;list-style:none;margin:0;padding:0;
  overflow-x:hidden;scroll-snap-type:x mandatory;scrollbar-width:none}
@media (pointer:coarse){.bp-hero__track{overflow-x:auto;overscroll-behavior-x:contain}}
.bp-hero__track::-webkit-scrollbar{display:none}
.bp-hero__slide{flex:0 0 100%;min-width:0;position:relative;scroll-snap-align:center}
.bp-hero__slide picture,.bp-hero__slide img{display:block;width:100%;object-fit:cover}
/* A CAPPED height, not an aspect ratio. The hero is full-bleed while the
   content shell is 1200, so on a wide desktop an aspect-ratio makes it grow
   without limit - at 2195px it was 724px tall and filled the entire fold
   before a word of the page appeared. Everything under 1920 was fine, which is
   exactly why probing up to 1920 did not catch it. */
.bp-hero__slide img{height:clamp(230px,27vw,460px)}
/* Slide 1 is a COMPOSITION - "CELEBRATING 30 YEARS" is painted into the
   artwork - so it is never cropped and never carries a ribbon over its own
   headline. It is 1920x425 where the photographs are 1280x425, so `contain`
   letterboxes it: #082739 is that artwork's own uniform edge colour, sampled
   from the file, which makes the bars invisible rather than approximately
   right. */
.bp-hero__slide--art,.bp-hero__slide--art img{background:#082739}
.bp-hero__slide--art img{object-fit:contain}
.bp-hero__cap{
  position:absolute;left:50%;translate:-50% 0;bottom:clamp(14px,4.5%,34px);
  width:max-content;max-width:min(90%,var(--shell));
  background:rgba(24,20,18,.82);color:#fff;text-align:center;
  font-weight:600;letter-spacing:.055em;text-transform:uppercase;
  font-size:clamp(.72rem,.53rem + .82vw,1.12rem);line-height:1.35;
  padding:.6em 1.6em;border:2px solid rgba(255,255,255,.9);border-radius:2px;
}
.bp-hero__nav{position:absolute;inset-block:0;display:grid;place-items:center;
  width:clamp(38px,5vw,56px);border:0;cursor:pointer;color:#fff;
  background:linear-gradient(90deg,rgba(0,0,0,.42),rgba(0,0,0,0))}
.bp-hero__nav--next{right:0;background:linear-gradient(270deg,rgba(0,0,0,.42),rgba(0,0,0,0))}
.bp-hero__nav--prev{left:0}
.bp-hero__nav:hover,.bp-hero__nav:focus-visible{background:rgba(0,0,0,.55)}
.bp-hero__nav svg{width:22px;height:22px;fill:currentColor}
/* the dots can land over a bright patch of a photograph, so they sit on their
   own scrim rather than relying on a 1px white ring to carry the contrast */
.bp-hero__dots{position:absolute;left:50%;translate:-50% 0;bottom:10px;display:flex;
  gap:.5rem;margin:0;padding:.4rem .6rem;list-style:none;
  background:rgba(24,20,18,.5);border-radius:999px;backdrop-filter:blur(2px)}
.bp-hero__dots button{width:10px;height:10px;padding:0;border-radius:50%;cursor:pointer;
  border:1px solid #fff;background:transparent;transition:background .15s}
.bp-hero__dots button:hover{background:rgba(255,255,255,.55)}
.bp-hero__dots [aria-current="true"]{background:#fff}

/* ------------------------------------------------------------------ layout */
.bp-main{display:block}
.bp-page{padding-block:clamp(1.8rem,4vw,3.2rem)}
.bp-cols{display:grid;gap:clamp(1.5rem,3vw,2.75rem);
  grid-template-columns:minmax(0,1fr) minmax(0,290px);align-items:start}
.bp-cols--full{grid-template-columns:minmax(0,1fr)}
.bp-prose{max-width:74ch}
.bp-prose h2{margin-top:1.8em;font-size:var(--step-2);color:var(--brand-ink)}
.bp-prose h2:first-child{margin-top:0}
.bp-lede{font-size:var(--step-1);color:var(--ink-soft);max-width:70ch}

/* ------------------------------------------------------------- page header */
.bp-crumbs{font-size:.85rem;color:var(--ink-soft);margin:0 0 .6rem;padding:0;list-style:none;
  display:flex;flex-wrap:wrap;gap:.4rem}
.bp-crumbs li+li::before{content:"/";margin-right:.4rem;color:#b8aca2}
.bp-crumbs a{color:var(--ink-soft)}
.bp-pagehead{margin-bottom:clamp(1.2rem,2.6vw,2rem)}
.bp-pagehead h1{margin-bottom:.15em}
.bp-pagehead__rule{width:64px;height:4px;background:var(--brand);border-radius:2px}

/* ------------------------------------------------------------ product cards */
.bp-items{display:grid;gap:clamp(1rem,2.2vw,1.6rem);
  grid-template-columns:repeat(auto-fill,minmax(min(310px,100%),1fr));
  list-style:none;margin:0;padding:0}
.bp-item{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);
  transition:box-shadow .18s,transform .18s}
.bp-item:hover{box-shadow:var(--shadow-lift);transform:translateY(-2px)}
.bp-item__media{background:var(--peach-lt);border-bottom:1px solid var(--line);
  display:grid;place-items:center;padding:14px;min-height:190px}
/* `scale-down` is `contain` that never enlarges. The CMS stored most product
   photographs at 192x149 and only the holiday items at full resolution, so a
   card 391px wide would upscale the small ones twofold and ship a blurry
   photograph - while the aspect-ratio check stays green, because the ratio is
   perfectly correct at the wrong size. */
.bp-item__media img{width:100%;height:100%;max-height:230px;object-fit:scale-down;
  display:block}
.bp-item__media picture{width:100%;display:grid;place-items:center}
.bp-item__body{padding:1.05rem 1.15rem 1.2rem;display:flex;flex-direction:column;gap:.45rem;flex:1}
.bp-item__name{margin:0;font-size:var(--step-1);color:var(--brand-ink)}
.bp-item__copy{margin:0;color:var(--ink-soft);font-size:.95rem}
.bp-item__copy p{margin:0 0 .6em}
.bp-item__copy p:last-child{margin-bottom:0}
.bp-item__note{font-size:.82rem;color:#6d6259;margin:0}
.bp-item__labels{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:auto;padding-top:.7rem}
.bp-nutri{display:inline-flex;align-items:center;gap:.35rem;font-size:.8rem;font-weight:600;
  text-decoration:none;color:var(--brand-ink);background:var(--peach-lt);
  border:1px solid var(--peach);border-radius:999px;padding:.3rem .7rem}
.bp-nutri:hover,.bp-nutri:focus-visible{background:var(--peach);color:var(--brand-dk)}
.bp-nutri svg{width:13px;height:13px;fill:currentColor;flex:0 0 auto}

/* --------------------------------------------------------------- tile grids */
/* A 300px floor settles the category grids at three columns in the 1136px
   content box, which divides the real counts tidily - 9 as 3/3/3, 6 as 3/3, 14
   as 3/3/3/3/2. At a 240px floor the same box took four, and the home page's
   nine categories stranded ONE tile alone on the last row.
   min(300px,100%) rather than 300px: a hard track floor is 300 + the gutter on
   a 320px screen, which puts a horizontal scrollbar on every page carrying the
   grid. */
.bp-tiles{display:grid;gap:clamp(1rem,2.4vw,1.75rem);
  grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));
  list-style:none;margin:0;padding:0}
.bp-tile a{display:flex;flex-direction:column;height:100%;text-decoration:none;color:var(--ink);
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow);transition:box-shadow .18s,transform .18s,border-color .18s}
.bp-tile a:hover,.bp-tile a:focus-visible{box-shadow:var(--shadow-lift);transform:translateY(-3px);
  border-color:var(--brand)}
.bp-tile__media{background:var(--peach-lt);display:grid;place-items:center;
  padding:12px;aspect-ratio:4/3}
.bp-tile__media img,.bp-tile__media picture{width:100%;height:100%;
  object-fit:scale-down;display:block}
.bp-tile__label{display:block;padding:.85rem 1rem 1rem;text-align:center;
  font-weight:700;font-size:.92rem;letter-spacing:.05em;text-transform:uppercase;
  color:var(--brand-ink);margin-top:auto}

/* --------------------------------------------------------------- side panel */
.bp-side{display:grid;gap:1.5rem;position:sticky;top:calc(var(--head-real) + 1rem)}
.bp-panel{border:1px solid var(--peach);border-radius:var(--radius);overflow:hidden;
  background:#fff;box-shadow:var(--shadow)}
.bp-panel__head{background:var(--brand);color:#fff;text-align:center;padding:1rem;
  font-family:var(--script);font-size:1.9rem;line-height:1.15}
.bp-panel__body{padding:1.15rem}
.bp-why{list-style:none;margin:0;padding:0;display:grid;gap:1rem}
.bp-why h3{margin:0 0 .15rem;font-size:1rem;color:var(--brand-ink);text-align:center}
.bp-why p{margin:0;font-size:.88rem;font-style:italic;color:var(--ink-soft);text-align:center}
.bp-motd{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.bp-motd li{display:flex;align-items:center;gap:.8rem;background:var(--peach-lt);
  border-radius:var(--radius-sm);padding:.5rem .7rem}
.bp-motd img{width:52px;height:52px;object-fit:contain;flex:0 0 auto}
.bp-motd b{display:block;font-size:.72rem;letter-spacing:.09em;color:var(--brand-ink)}
.bp-motd span{font-size:.9rem}

/* ------------------------------------------------------------ testimonials */
.bp-quotes{background:var(--grey);border-top:1px solid var(--line);
  padding-block:clamp(2rem,4.5vw,3.4rem)}
.bp-quotes h2{text-align:center;font-family:var(--script);font-weight:400;
  font-size:clamp(2rem,1.4rem + 2.2vw,3rem);color:var(--brand-ink);margin-bottom:1.5rem}
/* A carousel, but every quote is in the markup and the track is a real
   scroller - so with the script blocked it is a swipeable strip rather than
   an empty box, and search sees all eight. */
.bp-quotes__frame{position:relative;display:flex;align-items:center;gap:.4rem}
.bp-quotes__track{display:flex;list-style:none;margin:0;padding:0;flex:1;min-width:0;
  overflow-x:hidden;scroll-snap-type:x mandatory;scrollbar-width:none}
@media (pointer:coarse){.bp-quotes__track{overflow-x:auto;overscroll-behavior-x:contain}}
.bp-quotes__track::-webkit-scrollbar{display:none}
.bp-quote{flex:0 0 100%;min-width:0;scroll-snap-align:center;padding:.4rem}
.bp-quotes blockquote{margin:0;background:#fff;border:1px solid var(--line);
  border-left:4px solid var(--brand);border-radius:var(--radius);
  padding:clamp(1.3rem,3vw,2rem) clamp(1.4rem,4vw,3rem);
  font-size:clamp(1rem,.95rem + .3vw,1.15rem);line-height:1.65;color:var(--ink-soft);
  box-shadow:var(--shadow);text-align:center;min-height:9.5rem;
  display:flex;align-items:center;justify-content:center}
.bp-quotes blockquote p{margin:0;max-width:62ch}
.bp-quotes__nav{flex:0 0 auto;display:grid;place-items:center;width:42px;height:42px;
  border:1px solid var(--line);background:#fff;border-radius:50%;cursor:pointer;
  color:var(--brand-ink);box-shadow:var(--shadow)}
.bp-quotes__nav:hover,.bp-quotes__nav:focus-visible{background:var(--brand);color:#fff;
  border-color:var(--brand)}
.bp-quotes__nav svg{width:20px;height:20px;fill:currentColor}
.bp-quotes__dots{display:flex;justify-content:center;gap:.5rem;list-style:none;
  margin:1.1rem 0 0;padding:0}
.bp-quotes__dots button{width:10px;height:10px;padding:0;border-radius:50%;cursor:pointer;
  border:1px solid var(--brand);background:transparent;transition:background .15s}
.bp-quotes__dots button:hover{background:var(--peach)}
.bp-quotes__dots [aria-current="true"]{background:var(--brand)}
@media (max-width:560px){
  .bp-quotes__nav{width:36px;height:36px}
  .bp-quotes blockquote{min-height:11rem}
}

/* ------------------------------------------------------------------- footer */
.bp-foot{background:var(--brand);color:#fff;padding-block:clamp(2rem,4vw,3rem)}
.bp-foot a{color:#fff}
.bp-foot h2{font-family:var(--script);font-weight:400;color:#fff;
  font-size:1.85rem;margin:0 0 .8rem}
.bp-foot__grid{display:grid;gap:clamp(1.6rem,3.5vw,2.75rem);
  grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr))}
.bp-foot__nav{columns:2;column-gap:1.2rem;list-style:none;margin:0;padding:0}
.bp-foot__nav a{display:block;padding:.2rem 0;font-size:.85rem;letter-spacing:.045em;
  text-decoration:none;break-inside:avoid}
.bp-foot__nav a:hover,.bp-foot__nav a:focus-visible{text-decoration:underline}
.bp-foot address{font-style:normal;font-size:.95rem;line-height:1.7}
.bp-foot__allergen{margin:1.4rem 0 0;font-size:.82rem;line-height:1.6;
  background:rgba(0,0,0,.16);border-radius:var(--radius-sm);padding:.9rem 1rem}
.bp-foot__social{display:flex;gap:.5rem;list-style:none;margin:.9rem 0 0;padding:0}
.bp-foot__social a{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;
  border:1px solid rgba(255,255,255,.55)}
.bp-foot__social a:hover,.bp-foot__social a:focus-visible{background:rgba(255,255,255,.2)}
.bp-foot__social svg{width:19px;height:19px;fill:currentColor;display:block}
.bp-foot__bottom{border-top:1px solid rgba(255,255,255,.28);margin-top:2rem;padding-top:1.2rem;
  display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;font-size:.82rem;align-items:center}
.bp-foot__bottom p{margin:0}

/* ---------------------------------------------------------- newsletter form */
.bp-news label{display:block;font-size:.8rem;letter-spacing:.03em;margin:.55rem 0 .2rem}
.bp-news input[type=text],.bp-news input[type=email]{
  width:100%;padding:.5rem .6rem;border:1px solid rgba(255,255,255,.7);border-radius:var(--radius-sm);
  background:rgba(255,255,255,.94);color:var(--ink)}
.bp-news .bp-btn{margin-top:.9rem;background:#fff;border-color:#fff;color:var(--brand-ink)}
.bp-news .bp-btn:hover,.bp-news .bp-btn:focus-visible{background:var(--peach);border-color:var(--peach);color:var(--brand-dk)}

/* -------------------------------------------------------------------- forms */
.bp-form{max-width:640px}
.bp-field{margin-bottom:1.05rem}
.bp-field label{display:block;font-weight:600;font-size:.92rem;margin-bottom:.3rem}
/* A container-scoped colour is the trap here, from the other side: this red
   is chosen for a form on WHITE, and the newsletter form sits on the brand
   brown, where it is 1.22:1 and unreadable. Inherit by default; opt in to the
   red only where the background is light. */
.bp-req{color:inherit}
.bp-field .bp-req,.bp-form>p .bp-req{color:#a3341f}
/* type=search must be in this list: it is not type=text, so a selector that
   enumerates types silently leaves the search page's only input at the UA's
   default ~150px while every other field is full width. */
.bp-field input[type=text],.bp-field input[type=tel],.bp-field input[type=email],
.bp-field input[type=file],.bp-field input[type=search],.bp-field textarea{
  width:100%;padding:.7rem .8rem;border:1px solid #7d7269;border-radius:var(--radius-sm);
  background:#fff;color:var(--ink)}
/* WCAG 1.4.11 wants 3:1 on a non-text UI boundary, and a DOM contrast sweep
   only looks at text - #7d7269 on white is 4.5:1, computed by hand.          */
.bp-field textarea{min-height:150px;resize:vertical}
.bp-field input:focus,.bp-field textarea:focus{border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(144,91,60,.18);outline:none}
.bp-hint{font-size:.82rem;color:var(--ink-soft);margin:.3rem 0 0}
.bp-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.bp-err,.bp-ok{border-radius:var(--radius-sm);padding:.9rem 1.1rem;margin:0 0 1.2rem}
.bp-err{background:#fdecea;border:1px solid #d8907f;color:#8a2413}
.bp-ok{background:#eaf5ec;border:1px solid #86b992;color:#1f5a2e}
.bp-err ul{margin:.4rem 0 0;padding-left:1.2rem}

/* ------------------------------------------------------------------ FAQ */
.bp-faq{border-top:1px solid var(--line);margin:0 0 2rem}
.bp-faq details{border-bottom:1px solid var(--line)}
.bp-faq summary{cursor:pointer;padding:1rem .5rem 1rem 0;font-weight:600;
  list-style:none;display:flex;gap:1rem;align-items:flex-start}
.bp-faq summary::-webkit-details-marker{display:none}
.bp-faq summary::after{content:"";flex:0 0 auto;margin-left:auto;margin-top:.42em;
  width:.5em;height:.5em;border-right:2px solid var(--brand);border-bottom:2px solid var(--brand);
  transform:rotate(45deg);transition:transform .18s}
.bp-faq details[open] summary::after{transform:rotate(-135deg)}
.bp-faq summary:hover{color:var(--brand-ink)}
.bp-faq__a{padding:0 2rem 1.1rem 0;color:var(--ink-soft)}
.bp-faq__a p:last-child{margin-bottom:0}

/* -------------------------------------------------------------- blog */
.bp-posts{display:grid;gap:clamp(1.1rem,2.4vw,1.75rem);list-style:none;margin:0;padding:0;
  grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr))}
.bp-post{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.bp-post:hover{box-shadow:var(--shadow-lift)}
.bp-post__media img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;display:block}
.bp-post__body{padding:1.1rem 1.25rem 1.35rem;display:flex;flex-direction:column;gap:.4rem;flex:1}
.bp-post__date{font-size:.8rem;color:var(--ink-soft);margin:0}
.bp-post h2{font-size:var(--step-1);margin:0}
.bp-post h2 a{text-decoration:none}
.bp-post h2 a:hover{text-decoration:underline}
.bp-post__more{margin-top:auto;padding-top:.6rem;font-weight:600;font-size:.9rem}
.bp-article{max-width:74ch}
.bp-article img{height:auto;border-radius:var(--radius)}
.bp-article__date{color:var(--ink-soft);font-size:.9rem;margin:-.3rem 0 1.4rem}

/* ------------------------------------------------------------- misc blocks */
.bp-cta{background:var(--peach-lt);border:1px solid var(--peach);border-radius:var(--radius);
  padding:clamp(1.3rem,3vw,2rem);margin:2rem 0}
.bp-cta h2{margin-top:0;color:var(--brand-ink)}
.bp-cta p:last-child{margin-bottom:0}
.bp-note{background:var(--grey);border-left:4px solid var(--brand);border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  padding:1rem 1.2rem;margin:1.5rem 0}
.bp-note p:last-child{margin-bottom:0}
.bp-cards{display:grid;gap:1.1rem;list-style:none;margin:0 0 1.5rem;padding:0;
  grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr))}
.bp-cards li{background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:1.2rem;box-shadow:var(--shadow);text-align:center}
.bp-cards h3{color:var(--brand-ink);font-size:1.05rem}
.bp-cards p{margin:0;font-size:.92rem;color:var(--ink-soft)}

/* home */
.bp-home__intro{text-align:center;max-width:66ch;margin-inline:auto}
.bp-band{padding-block:clamp(2rem,4.5vw,3.4rem)}
.bp-band--tint{background:var(--peach-lt);border-block:1px solid var(--peach)}
.bp-band h2{text-align:center;margin-bottom:1.6rem}

/* nutrition lightbox */
.bp-lb{border:0;padding:0;max-width:min(94vw,560px);width:max-content;
  background:#fff;border-radius:var(--radius);box-shadow:var(--shadow-lift)}
.bp-lb::backdrop{background:rgba(20,15,12,.72)}
.bp-lb__body img{display:block;max-width:100%;max-height:78vh;width:auto;height:auto;margin-inline:auto}
.bp-lb__bar{display:flex;align-items:center;gap:1rem;padding:.7rem 1rem;
  border-bottom:1px solid var(--line)}
.bp-lb__bar h2{margin:0;font-size:1rem}
.bp-lb__close{margin-left:auto;width:34px;height:34px;display:grid;place-items:center;
  border:1px solid var(--line);background:#fff;border-radius:50%;cursor:pointer;font-size:1.1rem;
  line-height:1;color:var(--ink)}
.bp-lb__close:hover{background:var(--peach-lt);color:var(--brand-ink)}

/* search results */
.bp-results{list-style:none;margin:0;padding:0;display:grid;gap:.9rem}
.bp-results li{border:1px solid var(--line);border-radius:var(--radius);padding:1rem 1.15rem;
  background:#fff;box-shadow:var(--shadow)}
.bp-results h2{font-size:var(--step-1);margin:0 0 .2rem}
.bp-results h2 a{text-decoration:none}
.bp-results p{margin:0;font-size:.92rem;color:var(--ink-soft)}
.bp-results__where{font-size:.78rem;letter-spacing:.05em;text-transform:uppercase;
  color:var(--brand-ink);font-weight:700}

/* =========================================================== breakpoints ===
   The bar's own content measures ~1035px plus two 32px gutters, so 1100 is the
   narrowest window that holds one row with slack for the fallback font. The
   breakpoint belongs on the BAR side of the boundary, hence 1099.98px - written
   as 1100 the burger and the bar swap one pixel early and an "exactly one of
   them is visible" check fails on the boundary width.                        */
@media (max-width:1099.98px){
  .bp-nav__list{display:none}
  .bp-search{display:none}

  /* Position the three bars ABSOLUTELY rather than laying them out in a grid.
     The button also contains a .bp-vis-hidden "Menu" label for screen readers,
     and in a grid that is a FOURTH row - so the bars are pushed off centre,
     the gaps come out uneven, and the ±7px the X transform assumes no longer
     matches the real spacing, which is why the active state looked wrong too.
     At 16/23/30 the bars are exactly 7px apart, so translating the outer two
     by ±7px lands them both on 23 and the X is centred by construction. */
  .bp-burger{
    display:block;position:relative;margin-left:auto;
    width:48px;height:48px;padding:0;cursor:pointer;background:transparent;
    border:1px solid var(--line);border-radius:var(--radius-sm);color:var(--brand-ink);
    transition:border-color .15s,background .15s}
  .bp-burger span:not(.bp-vis-hidden){
    position:absolute;left:50%;width:24px;height:2px;margin-left:-12px;
    background:currentColor;border-radius:2px;
    transition:transform .22s ease,opacity .12s ease}
  .bp-burger span:nth-child(1){top:16px}
  .bp-burger span:nth-child(2){top:23px}
  .bp-burger span:nth-child(3){top:30px}
  .bp-burger:hover,.bp-burger:focus-visible{border-color:var(--brand);background:var(--peach-lt)}
  [aria-expanded="true"].bp-burger{border-color:var(--brand);background:var(--peach-lt)}
  [aria-expanded="true"].bp-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  [aria-expanded="true"].bp-burger span:nth-child(2){opacity:0}
  [aria-expanded="true"].bp-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

  .bp-drawer{
    display:block;position:fixed;top:var(--head-real);right:0;bottom:0;
    width:min(370px,88vw);background:#fff;border-left:1px solid var(--line);
    box-shadow:-12px 0 40px rgba(50,35,25,.18);
    overflow-y:auto;overscroll-behavior:contain;padding:1.1rem var(--gut) 2.5rem;
    transform:translateX(102%);transition:transform .26s ease;z-index:1400;visibility:hidden}
  .bp-drawer[data-open]{transform:translateX(0);visibility:visible}
  .bp-backdrop{display:block;position:fixed;inset:0;background:rgba(30,22,16,.5);
    opacity:0;visibility:hidden;transition:opacity .26s;z-index:1300}
  .bp-backdrop[data-open]{opacity:1;visibility:visible}
  /* a sticky header opens a stacking context, so the drawer's z-index resolves
     INSIDE it and a body-level backdrop paints over the whole menu - every tap
     on an item hits the backdrop and the panel closes. Lift the header above
     the backdrop only while the drawer is open. */
  html[data-nav-open] .bp-head{z-index:1500}
  html[data-nav-open]{overflow:hidden}

  .bp-drawer__list,.bp-drawer__sub{list-style:none;margin:0;padding:0}
  .bp-drawer__list>li{border-bottom:1px solid var(--line)}
  .bp-drawer__link{display:block;padding:.95rem .2rem;text-decoration:none;color:var(--ink);
    font-weight:600;font-size:1.02rem}
  .bp-drawer__link:hover,.bp-drawer__link:focus-visible{color:var(--brand-ink)}
  .bp-drawer__row{display:flex;align-items:center}
  .bp-drawer__row .bp-drawer__link{flex:1}
  .bp-drawer__toggle{flex:0 0 auto;width:44px;height:44px;display:grid;place-items:center;
    background:transparent;border:0;cursor:pointer;color:var(--brand-ink)}
  .bp-drawer__toggle::after{content:"";width:.5em;height:.5em;
    border-right:2px solid currentColor;border-bottom:2px solid currentColor;
    transform:translateY(-2px) rotate(45deg);transition:transform .18s}
  .bp-drawer__toggle[aria-expanded="true"]::after{transform:translateY(2px) rotate(-135deg)}
  .bp-drawer__sub{display:none;padding:0 0 .7rem .9rem}
  .bp-drawer__sub[data-open]{display:block}
  .bp-drawer__sub a{display:block;padding:.5rem .2rem;font-size:.94rem;color:var(--ink-soft);
    text-decoration:none}
  .bp-drawer__sub a:hover,.bp-drawer__sub a:focus-visible{color:var(--brand-ink)}
  .bp-drawer__search{display:flex;gap:.4rem;margin:.3rem 0 1.1rem}
  .bp-drawer__search input{flex:1;min-width:0;padding:.65rem .8rem;border:1px solid #7d7269;
    border-radius:var(--radius-sm)}
  .bp-drawer__foot{margin-top:1.4rem;display:grid;gap:.8rem}
  .bp-drawer__foot .bp-btn{width:100%}
}

@media (max-width:900px){
  .bp-cols{grid-template-columns:minmax(0,1fr)}
  .bp-side{position:static}
}
@media (max-width:620px){
  .bp-top .bp-shell{justify-content:center;gap:.75rem;padding-block:.4rem}
  .bp-top__tel{margin-right:0}
  .bp-foot__nav{columns:1}
  .bp-hero__cap{letter-spacing:.03em;padding:.5em 1em;max-width:94%;white-space:normal}
  .bp-item__media img{aspect-ratio:16/10}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;
    scroll-behavior:auto!important}
}
@media print{
  .bp-top,.bp-head,.bp-hero,.bp-quotes,.bp-side,.bp-foot__nav{display:none}
  body{color:#000}
}

/* sidebar section nav + blog list */
.bp-sidenav,.bp-bloglist{list-style:none;margin:0;padding:0}
.bp-sidenav a{display:block;padding:.5rem .1rem;border-bottom:1px solid var(--line);
  text-decoration:none;font-size:.86rem;font-weight:600;letter-spacing:.04em}
.bp-sidenav li:last-child a{border-bottom:0}
.bp-sidenav a:hover,.bp-sidenav a:focus-visible,
.bp-sidenav a[aria-current="page"]{color:var(--brand-dk);padding-left:.4rem}
.bp-blogcat{font-size:.95rem;margin:0 0 .5rem;color:var(--brand-ink)}
.bp-bloglist a{display:block;padding:.45rem .1rem;border-bottom:1px solid var(--line);
  text-decoration:none;font-size:.85rem;color:var(--ink)}
.bp-bloglist a:hover,.bp-bloglist a:focus-visible{color:var(--brand-ink)}
.bp-bloglist a[aria-current="page"]{color:var(--brand-ink);font-weight:700}
.bp-bloglist b{display:block;font-weight:400;font-size:.76rem;color:var(--ink-soft)}
.bp-bloglist li:last-child a{border-bottom:0}
.bp-postnav{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:2rem;
  border-top:1px solid var(--line);padding-top:1.4rem}
.bp-item__cap{margin:0;padding:0 14px 10px;text-align:center;font-size:.78rem;
  color:var(--ink-soft)}

/* Muffin of the Day is always Mon-Fri: five is a known count, so write it
   rather than letting auto-fill settle on 3 + 2. The photographs are small
   (~150px) so the media box is shorter here than on a category tile, or each
   muffin floats in a field of peach. */
.bp-tiles--week{grid-template-columns:repeat(5,minmax(0,1fr))}
.bp-tiles--week .bp-tile__media{aspect-ratio:4/3;padding:10px}
.bp-tiles--week .bp-tile__label{padding:.7rem .6rem .85rem;letter-spacing:.03em}
.bp-tiles--week .bp-tile__label b{display:block;font-size:.72rem;font-weight:700;
  letter-spacing:.11em;color:var(--ink-soft);margin-bottom:.15rem}
@media (max-width:1000px){.bp-tiles--week{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:620px){.bp-tiles--week{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* the cards' own bottom margin doubles the band's padding under the last row */
.bp-band .bp-cards{margin-bottom:0}

/* a size with no nutrition label of its own: plain text, same rhythm as a chip */
.bp-size{display:inline-flex;align-items:center;font-size:.8rem;color:#6d6259;
  padding:.3rem .2rem}