/* ==========================================================================
   Tūī Hill Roasters — stylesheet
   Built from style-spec.md: cobalt ink on white, square corners, flat
   full-bleed bands, 10px root, three transition durations only.
   ========================================================================== */

/* --------------------------------------------------------------- self-hosted faces
   Both families are variable woff2 subsets (latin only) served from this origin:
   no third-party font CDN, no third-party tracker, no extra connection. */

@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/fonts/bricolage-grotesque-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/fonts/bricolage-grotesque-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("/fonts/figtree-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("/fonts/figtree-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* base — 10px root, 1rem = 10px */
  font-size: 62.5%;

  /* colour — no greys anywhere; every neutral is a tinted blue */
  --blue: #006EB6;
  --light-blue: #EBF3FA;
  --lightest-blue: #F5F9FC;
  --mid-blue: #B2D3E9;
  --light-blue-2: #80B7DB;
  --blue-2: #1C6EA5;
  --footer: #1A5B7E;
  --link-hover: #1878B9;
  --white: #FFFFFF;
  --red: #D93D20;
  --yellow: #FFC709;

  /* type */
  --font-display: "Bricolage Grotesque", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body: "Figtree", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --display-xl: 5.3rem;  --display-xl-lh: 6.2rem;
  --display-sm: 3.4rem;  --display-sm-lh: 4.1rem;
  --h2: 5rem;            --h2-lh: 5.8rem;
  --h3: 4rem;            --h3-lh: 4.9rem;
  --h4: 3.2rem;          --h4-lh: 4rem;
  --h5: 2.2rem;          --h5-lh: 3.2rem;
  --body-lg: 2.2rem;     --body-lg-lh: 3.2rem;
  --body: 1.6rem;        --body-lh: 2.5rem;
  --body-sm: 1.8rem;     --body-sm-lh: 2.5rem;
  --meta: 1.4rem;        --meta-lh: 2.3rem;
  --micro: 1.2rem;       --micro-lh: 2.3rem;

  /* spacing */
  --space-10: 10px; --space-17: 17px; --space-20: 20px; --space-25: 25px;
  --space-30: 30px; --space-40: 40px; --space-50: 50px; --space-60: 60px;
  --space-70: 70px; --space-80: 80px; --space-90: 90px; --space-100: 100px;
  --space-120: 120px; --space-150: 150px;

  /* layout */
  --max-content-width: 1200px;
  --container-pl: 30px; --container-pr: 30px;
  --form-width: 600px; --input-height: 57px;
  --nav-height: 70px;
  --bar-height: 50px;
  --radius: 0px;
  --btn-h: 62px;

  /* motion */
  --dur-fast: 0.2s;
  --dur-base: 0.3s;
  --dur-slow: 0.5s;
  --ease-state: ease-in-out;
  --ease-color: ease-out;
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--white);
  color: var(--blue);
  font-family: var(--font-body);
  font-size: var(--body);
  line-height: var(--body-lh);
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}

*, *::before, *::after { box-sizing: border-box; }

img { max-width: 100%; height: auto; display: block; border: 0; }

h1, h2, h3, h4, h5, h6 {
  font-weight: 400;
  margin: 0 0 var(--space-25);
  color: var(--blue);
  text-wrap: balance;
}
h1 { font-family: var(--font-display); font-size: var(--display-xl); line-height: var(--display-xl-lh); font-weight: 600; }
h2 { font-size: var(--h2); line-height: var(--h2-lh); letter-spacing: -0.02em; }
h3 { font-size: var(--h3); line-height: var(--h3-lh); letter-spacing: -0.015em; }
h4 { font-size: var(--h4); line-height: var(--h4-lh); letter-spacing: -0.01em; }
h5 { font-size: var(--h5); line-height: var(--h5-lh); }

p { margin: 0 0 var(--space-25); max-width: 68ch; }
p:last-child { margin-bottom: 0; }

a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; transition: color var(--dur-fast) var(--ease-color); }
a:hover { color: var(--link-hover); }

ul, ol { margin: 0 0 var(--space-25); padding-left: var(--space-25); }
li { margin-bottom: var(--space-10); }

strong { font-weight: 700; }

:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.panel :focus-visible, .site-footer :focus-visible { outline-color: var(--yellow); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--blue); color: var(--white); padding: var(--space-17) var(--space-25);
}
/* --------------------------------------------------------------- layout */

.wrap {
  width: 100%;
  max-width: calc(var(--max-content-width) + var(--container-pl) + var(--container-pr));
  margin: 0 auto;
  padding-left: var(--container-pl);
  padding-right: var(--container-pr);
}

main { display: block; }

.section { padding-bottom: var(--space-120); }
.section:last-of-type { padding-bottom: 0; }

.eyebrow {
  font-size: var(--meta);
  line-height: var(--meta-lh);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  margin: 0 0 var(--space-20);
}

.lede { font-size: var(--body-lg); line-height: var(--body-lg-lh); }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-10);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  transition: color var(--dur-fast) var(--ease-color);
}
.link-arrow::after { content: "\2192"; transition: transform var(--dur-base) var(--ease-state); }
.link-arrow:hover::after { transform: translateX(4px); }

/* --------------------------------------------------------------- buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--btn-h);
  padding: 0 var(--space-40);
  border: 1px solid var(--blue);
  border-radius: var(--radius);
  background: var(--blue);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-color), color var(--dur-fast) var(--ease-color), border-color var(--dur-fast) var(--ease-color);
}

/* ------------------------------------------------------- announcement strip */

.strip {
  height: var(--bar-height);
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid var(--mid-blue);
  background: var(--white);
  font-size: var(--meta);
  line-height: var(--meta-lh);
  text-align: center;
  padding: 0 var(--space-20);
}

/* ------------------------------------------------------------------- nav */

.site-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--white);
  border-bottom: 1px solid var(--mid-blue);
}
.nav-inner {
  height: var(--nav-height);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-25);
}
.nav-list a {
  font-size: var(--meta);
  text-decoration: none;
  padding: var(--space-10) 0;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-fast) var(--ease-color), color var(--dur-fast) var(--ease-color);
}

.brand {
  font-family: var(--font-display);
  font-size: 2.4rem;
  line-height: 1;
  font-weight: 700;
.footer__bottom ul { display: flex; gap: var(--space-25); list-style: none; margin: 0; padding: 0; }
.footer__bottom li { margin: 0; }

/* The FAQ is a plain definition list, not an accordion — no <details> here. */
.faq__item {
  border-bottom: 1px solid var(--mid-blue);
  padding: var(--space-25) 0;
}
.faq__q { margin: 0 0 var(--space-10); font-size: var(--h4); line-height: var(--h4-lh); }
.faq__a { margin: 0; max-width: 68ch; }
  letter-spacing: -0.02em;
  text-decoration: none;
  white-space: nowrap;
}
.brand:hover { color: var(--blue); }
/* v4 a11y: this was a bare `.brand span`, which also caught .brand__name and
   .brand__sub and repainted the wordmark #80B7DB on white — 2.16:1, failing AA
   at every size. The site name is the one string on every page that must read.
   The sub-line keeps the muted tint, but only on the lighter field where it
   passes (see .brand__sub below). */
.brand__text { color: inherit; }
.brand__sub { color: var(--blue-2); }

.nav-utils a, .nav-utils button {
  font-size: var(--meta);
  text-decoration: none;
  background: none;
  border: 0;
  padding: var(--space-10) 0;
  color: var(--blue);
  cursor: pointer;
  font-family: var(--font-body);
  transition: color var(--dur-fast) var(--ease-color);
}

/* Mobile-only column holding the menu toggle. Hidden by default (desktop shows
   the full link row instead); re-enabled at <=1080px. Kept as its own grid cell
   so it is never a descendant of the hidden .nav-utils. */

/* ---------------------------------------------------------------- ticker */

.ticker {
  height: var(--bar-height);
  background: var(--blue);
  color: var(--white);
  overflow: hidden;
  display: flex;
  align-items: center;
}
.ticker-track {
  display: flex;
  flex: 0 0 auto;
  min-width: 100%;
  animation: ticker-slide 40s linear infinite;
}
.ticker-group span {
  white-space: nowrap;
  font-size: var(--meta);
  line-height: var(--bar-height);
  padding: 0 var(--space-20);
  letter-spacing: 0.02em;
}
@keyframes ticker-slide {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
}

/* ------------------------------------------------------------------ hero */

.hero-split__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-80) var(--container-pr) var(--space-80) var(--space-70);
  max-width: 640px;
}

/* -------------------------------------------------------------- long band */

.band {
  position: relative;
  overflow: hidden;
  background: var(--light-blue);
  display: flex;
  align-items: flex-end;
}
/* ------------------------------------------------------------ cobalt panel */

.panel { background: var(--blue); color: var(--white); }
.panel a { color: var(--white); }
.panel a:hover { color: var(--yellow); }
.panel h2, .panel h3, .panel h4 { color: var(--white); }
.panel .eyebrow { color: var(--white); }

/* ----------------------------------------------------------------- cards */


/* v3: spec §6.5 — "card surfaces are transparent, border-radius 0, box-shadow
   none... defined entirely by their image and their type, not by a chrome box."
   The inherited rule drew a 1px mid-blue border; the later markup-layer rule
   re-added the border after this one. The border is removed at source. */
.card {
  border: 0;
  background: transparent;
  display: flex;
  flex-direction: column;
}
.card__media { background: var(--lightest-blue); }
/* v4: style-spec §7.2 — "object-fit: contain for product shots — packaging is
   never cropped." These were 1/1 + cover (measured 380x380), trimming the sides
   off any bag that is not perfectly square. Portrait 0.82 at the spec ratio,
   contain on the lightest blue so the whole bag always reads. */
.card__media img { width: 100%; aspect-ratio: 340 / 416; object-fit: contain; padding: var(--space-20); }
.card__price { font-size: var(--h5); line-height: var(--h5-lh); font-weight: 700; }
.card__foot { margin-top: auto; padding-top: var(--space-20); }
.card__origin { font-size: var(--meta); line-height: var(--meta-lh); }

.tags li {
  margin: 0;
  font-size: var(--micro);
  line-height: var(--micro-lh);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid var(--mid-blue);
  padding: 3px var(--space-10);
}

.roast-meter i.on { background: var(--blue); }

/* scroll-row on small screens */
@media (max-width: 767px) {
}

/* ------------------------------------------------------------ feature list */


.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-70);
  align-items: center;
}
/* --------------------------------------------------------------- callout */

.callout { text-align: center; padding: var(--space-70) 0; }
.callout h3 { margin-bottom: var(--space-17); }
.callout p { max-width: 52ch; margin: 0 auto var(--space-30); }

/* ---------------------------------------------------------------- filters */

.filter-btn {
  border: 1px solid var(--blue);
  background: transparent;
  color: var(--blue);
  font-family: var(--font-body);
  font-size: var(--meta);
  line-height: var(--meta-lh);
  padding: var(--space-10) var(--space-20);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-color), color var(--dur-fast) var(--ease-color);
}

/* -------------------------------------------------------------------- table */

table.spec {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  text-align: left;
}
table.spec .num { text-align: right; white-space: nowrap; }

/* -------------------------------------------------------------------- form */

.form { max-width: var(--form-width); }
.field { display: block; margin-bottom: var(--space-25); }
.field > span {
  display: block;
  font-size: var(--meta);
  line-height: var(--meta-lh);
  margin-bottom: var(--space-10);
  font-weight: 700;
}
.field input, .field select, .field textarea {
  width: 100%;
  min-height: var(--input-height);
  border: 1px solid var(--blue);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--blue);
  font-family: var(--font-body);
  font-size: var(--body);
  line-height: var(--body-lh);
  padding: var(--space-17);
  appearance: none;
}
.field select {
  background-image: linear-gradient(45deg, transparent 50%, var(--blue) 50%), linear-gradient(135deg, var(--blue) 50%, transparent 50%);
  background-position: calc(100% - 22px) 50%, calc(100% - 15px) 50%;
  background-size: 7px 7px, 7px 7px;
  background-repeat: no-repeat;
  padding-right: var(--space-50);
}
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--blue-2); }
/* ------------------------------------------------------------- locations */


/* ----------------------------------------------------------------- journal */


/* -------------------------------------------------------------- newsletter */


/* ------------------------------------------------------------------ footer */

.site-footer { background: var(--footer); color: var(--white); }
.site-footer a { color: var(--lightest-blue); text-decoration: none; }
.site-footer a:hover { color: var(--white); text-decoration: underline; }
.site-footer h3 { color: var(--white); font-size: var(--meta); letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700; margin-bottom: var(--space-20); }
.footer-grid .brand { color: var(--white); font-size: 2.8rem; display: inline-block; margin-bottom: var(--space-20); }
/* On the #1A5B7E footer --light-blue-2 measures 2.16:1. --lightest-blue is what
   the footer's own body copy already uses and it passes. */
.footer-grid .brand span { color: var(--lightest-blue); }
/* ------------------------------------------------------------ breakpoints */

@media (max-width: 1080px) {
  /* Keep the cart in the header on mobile — drop only the text links. */
  /* Two visible children (brand, toggle-wrap) plus the cart in between, so a
     flex row reads better than the 3-column desktop grid here. */
  .mobile-nav.is-open { display: block; }
}

@media (max-width: 959px) {
  .split, .split--wide-media, .panel-split, .newsletter-split { grid-template-columns: 1fr; gap: var(--space-40); }
  .split .media-3x4 img { max-width: 520px; }
}

@media (max-width: 767px) {
  :root {
    --display-xl: 3.4rem; --display-xl-lh: 4.1rem;
    --h2: 3.3rem;       --h2-lh: 4rem;
    --h3: 3.3rem;       --h3-lh: 4rem;
    --h4: 2.2rem;       --h4-lh: 3.2rem;
    --h5: 2rem;         --h5-lh: 2.8rem;
    --body: 1.8rem;     --body-lh: 2.5rem;
    --body-lg: 2rem;    --body-lg-lh: 2.8rem;
    --nav-height: 62px;
  }
  body { font-size: var(--body); }
  .section { padding-bottom: var(--space-80); }
  .btn { width: 100%; padding: 0 var(--space-20); }
  .btn-row { gap: var(--space-17); }
  .band__inner { padding-top: var(--space-80); padding-bottom: var(--space-50); }
  .faq summary { font-size: var(--h4); }

  /* Touch targets: give every inline link and footer link a 44px hit area
     without changing their visual rhythm or type size. */
  .link-arrow { padding: var(--space-10) 0; }
  .footer-grid .brand { padding: 0; }
  .site-footer a[href^="mailto:"],
  .site-footer a[href^="tel:"] { display: inline-block; padding: var(--space-10) 0; }
  /* The wordmark is the home link. Keep it a logo, but give it a real hit area. */
  .nav-brand-wrap .brand { display: inline-flex; align-items: center; min-height: 44px; }
  .footer-grid .brand { display: inline-flex; align-items: center; min-height: 44px; }
}

@media (max-width: 479px) {
  .brand { font-size: 2.1rem; }
  .btn-row .btn { width: 100%; }
}

@media print {
  .site-nav, .mobile-nav, .ticker, .strip, .panel, .band__media { display: none; }
  body { color: #000; background: #fff; }
}

/* -------------------------------------------------------------- utilities */


.form__status {
  margin-top: var(--space-20);
  font-size: var(--meta);
  line-height: var(--meta-lh);
  min-height: var(--meta-lh);
  padding-left: var(--space-20);
  border-left: 3px solid var(--blue);
}
.form__status.is-ok { color: var(--blue); font-weight: 700; }
.form__status.is-error { color: var(--red); border-left-color: var(--red); }
.form__status:focus-visible { outline-offset: 4px; }

.inline-form .field { flex: 1 1 260px; margin-bottom: 0; }

.faq { border-top: 1px solid var(--mid-blue); }
.faq details { border-bottom: 1px solid var(--mid-blue); }
.faq summary {
  list-style: none;
  cursor: pointer;
  padding: var(--space-25) 0;
  font-size: var(--h4);
  line-height: var(--h4-lh);
  display: flex;
  justify-content: space-between;
  gap: var(--space-25);
  align-items: center;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: var(--h3); line-height: 1; flex: 0 0 auto; }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { margin: 0 0 var(--space-25); }
.split img { width: 100%; height: auto; }
.split__media img { width: 100%; object-fit: cover; }
.band__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  padding-top: var(--space-120);
  padding-bottom: var(--space-80);
  color: var(--white);
}
.band__inner h2, .band__inner p, .band__inner a { color: var(--white); }
.band__copy {
  max-width: 560px;
  background: rgba(0, 60, 100, 0.34);
  padding: var(--space-25);
}
.mobile-nav {
  display: none;
  position: fixed;
  inset: var(--nav-height) 0 0 0;
  background: var(--white);
  border-top: 1px solid var(--mid-blue);
  overflow-y: auto;
  padding: var(--space-30) var(--container-pl) var(--space-60);
}
.mobile-nav a {
  display: block;
  padding: var(--space-20) 0;
  font-size: 2.4rem;
  line-height: 3.2rem;
  text-decoration: none;
}

body.nav-open { overflow: hidden; }

.btn:hover { background: var(--blue-2); border-color: var(--blue-2); color: var(--white); }
/* v3 fix: on a cobalt panel a ghost button must be white-on-white-bordered. The
   old rule left .panel .btn--ghost as cobalt text on a cobalt panel — 1.0:1, an
   invisible button on the page's primary conversion path. */
.btn--ghost { background: transparent; color: var(--blue); border-color: var(--blue); }
.btn--ghost:hover { background: var(--blue); color: var(--white); }
.panel .btn--ghost,
.band__inner .btn--ghost,
.site-footer .btn--ghost {
  background: transparent;
  color: var(--white);
  border-color: var(--white);
}
.panel .btn--ghost:hover,
.band__inner .btn--ghost:hover,
.site-footer .btn--ghost:hover {
  background: var(--white);
  color: var(--blue);
}
.btn--light { background: var(--white); border-color: var(--white); color: var(--blue); }
.btn--light:hover { background: var(--light-blue); border-color: var(--light-blue); color: var(--blue); }
.btn--block { width: 100%; padding: 0 var(--space-25); }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-17); margin-top: var(--space-30); }
.skip-link:focus { left: 0; color: var(--white); }/* =============================================================================
   Markup layer — the class names the five pages actually use.

   The block in styles.css was authored against an earlier markup draft
   (wrap / hero-split / card-grid / nav-toggle / mobile-nav). The HTML uses a
   second, equivalent set of names (container / hero--split / grid-products /
   nav__toggle / drawer). Rather than rewrite five pages, this file implements
   the markup's names by composing the primitives already defined above, so both
   halves share one set of tokens, one type scale and one set of media queries.
   Nothing here changes a colour, size or duration that is already set — it only
   supplies layout for class names that had no rule at all.
   ========================================================================== */

/* ------------------------------------------------------------- containers */
.container {
  width: 100%;
  max-width: calc(var(--max-content-width) + var(--container-pl) + var(--container-pr));
  margin-inline: auto;
  padding-inline: var(--container-pl);
}

/* Section rhythm: the loose/tight/flush trio is spacing only. */
.section--loose { padding-bottom: var(--space-120); }
.section--tight { padding-top: var(--space-70); padding-bottom: var(--space-90); }
.section--flush-bottom { padding-bottom: 0; }

.section__head { margin-bottom: var(--space-50); }
.section__head h2, .section__head h3 { margin-bottom: var(--space-17); }
.section__head p { max-width: 62ch; }

.measure { max-width: 22ch; }
.small { font-size: var(--meta); line-height: var(--meta-lh); }

/* ---------------------------------------------------------------- chrome */
.announce {
  margin: 0;
  min-height: var(--bar-height);
  /* v3: /wholesale wrapped to 67px at 390 because the copy is longer than the
     50px bar. The bar is a fixed-height strip in the reference — nowrap plus a
     tighter line-height keeps it at exactly 50px at every width. */
  height: var(--bar-height);
  overflow: hidden;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-10);
  padding: 0 var(--container-pl);
  text-align: center;
  font-size: var(--meta);
  line-height: var(--bar-height);
  background: var(--white);
  border-bottom: 1px solid var(--mid-blue);
}
.announce a { font-weight: 700; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--white);
  border-bottom: 1px solid var(--mid-blue);
}
.nav {
  min-height: var(--nav-height);
  max-width: calc(var(--max-content-width) + var(--container-pl) + var(--container-pr));
  margin-inline: auto;
  padding-inline: var(--container-pl);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-30);
}
.brand { display: inline-flex; align-items: center; gap: var(--space-17); text-decoration: none; }
.brand__mark { width: 40px; height: 40px; flex: 0 0 auto; }
.brand__text { display: flex; flex-direction: column; line-height: 1.1; }
.brand__name { font-weight: 700; font-size: var(--h5); line-height: var(--h5-lh); }
.brand__sub {
  font-size: var(--micro);
  line-height: var(--micro-lh);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
/* ------------------------------------------------------------------ hero */
.hero { padding-block: var(--space-70); }
.hero--short .container > * { max-width: 62ch; }
.hero--short h1 { margin-bottom: var(--space-30); }

.hero--split { padding-block: 0; }
/* v3: the split was declared here but never took effect because the markup put
   style="display:contents" on .container, which removes the element from the grid
   and collapses .hero to a single block. The grid now lives on the section itself
   and .container is no longer a wrapper, so the two columns are real. */
.hero--split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  max-width: calc(var(--max-content-width) + var(--container-pl) + var(--container-pr));
  margin-inline: auto;
}
/* The grid now lives on the section, so it carries the gutter itself. */
.hero--split .hero__copy { padding-left: var(--container-pl); }
.hero--split .hero__media { padding-right: var(--container-pr); }
.hero__copy {
  padding: var(--space-90) var(--space-70) var(--space-90) 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
/* v3: style-spec §2.2 — "never a designed wide-tracking label". Sentence case at
   normal tracking; the display weight is what makes it read as a label. */
.hero__eyebrow {
  font-size: var(--body);
  line-height: var(--body-lh);
  letter-spacing: normal;
  text-transform: none;
  font-weight: 700;
  margin-bottom: var(--space-25);
}
.hero__copy h1 { max-width: 14ch; }
.hero__body { font-size: var(--body-lg); line-height: var(--body-lg-lh); max-width: 46ch; }
.hero__media { align-self: stretch; display: flex; }
.media--hero { width: 100%; margin: 0; }
/* v3: spec §6.3 calls for a 720×781 image box (ar 0.92) beside the copy. The old
   3/4 ratio rendered a 1440×1920 box from an 864×1152 source. */
.media--hero img {
  width: 100%;
  height: 100%;
  min-height: 781px;
  object-fit: cover;
  aspect-ratio: 720 / 781;
}

/* ----------------------------------------------------------------- media */
.media { margin: 0; }
.media img { width: 100%; height: auto; }
.media--four img { aspect-ratio: 4 / 3; object-fit: cover; }
.media--square img { aspect-ratio: 1 / 1; object-fit: cover; }
.media--portrait img { aspect-ratio: 3 / 4; object-fit: cover; }

/* ---------------------------------------------------------------- ticker */
.ticker__track { display: flex; width: max-content; animation: ticker-slide 40s linear infinite; }
.ticker__group { display: flex; flex: 0 0 auto; }
.ticker__group span {
  display: inline-flex;
  align-items: center;
  padding: 0 var(--space-25);
  color: var(--white);
  white-space: nowrap;
}

/* ----------------------------------------------------------------- grids */
.grid-products, .grid-loc, .grid-journal {
  display: grid;
  gap: var(--space-30);
  list-style: none;
  margin: 0;
  padding: 0;
}
.grid-products, .grid-loc { grid-template-columns: repeat(3, 1fr); }
.grid-journal { grid-template-columns: repeat(2, 1fr); }
.grid-products > li, .grid-loc > li, .grid-journal > li { margin: 0; }

/* ----------------------------------------------------------------- cards */
.card { display: flex; flex-direction: column; height: 100%; }
.card__media { background: var(--lightest-blue); }
/* v4: style-spec §7.2 — "object-fit: contain for product shots — packaging is
   never cropped." These were 1/1 + cover (measured 380x380), trimming the sides
   off any bag that is not perfectly square. Portrait 0.82 at the spec ratio,
   contain on the lightest blue so the whole bag always reads. */
.card__media img { width: 100%; aspect-ratio: 340 / 416; object-fit: contain; padding: var(--space-20); }
.card__name { margin: var(--space-25) 0 var(--space-10); }
.card__origin { font-size: var(--meta); line-height: var(--meta-lh); margin-bottom: var(--space-10); }
.card__notes { font-size: var(--body); line-height: var(--body-lh); margin-bottom: var(--space-25); }
.card__tag {
  display: inline-block;
  align-self: flex-start;
  font-size: var(--micro);
  line-height: var(--micro-lh);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  background: var(--light-blue);
  padding: var(--space-10) var(--space-17);
  margin-bottom: var(--space-17);
}
.card__foot {
  margin-top: auto;
  padding-top: var(--space-20);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-17);
}
.card__price { font-size: var(--h5); line-height: var(--h5-lh); font-weight: 700; }
.btn--small { min-height: 46px; padding: 0 var(--space-25); font-size: var(--meta); }
.btn--solid { background: var(--blue); color: var(--white); border-color: var(--blue); }

/* location + journal cards */
.loc__media, .article__media { background: var(--light-blue); }
.loc__media img, .article__media img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.loc__meta, .article__meta { font-size: var(--meta); line-height: var(--meta-lh); margin-bottom: var(--space-10); }
.article { text-decoration: none; display: block; }
.article__title { font-size: var(--h4); line-height: var(--h4-lh); margin-top: var(--space-25); }

/* ---------------------------------------------------------------- splits */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-70);
  align-items: center;
}
.split__body-copy > *:last-child { margin-bottom: 0; }
.split__media img { width: 100%; height: auto; object-fit: cover; }

/* ------------------------------------------------------- bands + panels */
/* v4 spacing: a full-bleed surface that follows a --flush-bottom section had
   NO top padding of its own, so on every page the band/panel butted straight
   against the copy above it — measured 0px between consecutive sections on / and
   /coffees, which is what "Brew it right image overlaps the product card row"
   actually was. The photo now starts below the preceding section's rhythm. */
.band, .panel { padding-top: var(--space-80); }
.band { position: relative; overflow: hidden; background: var(--footer); }
.band > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.band__inner { position: relative; z-index: 1; padding-block: var(--space-120); color: var(--white); }
.band__inner h2, .band__inner p, .band__inner a { color: var(--white); }
.band__inner p { max-width: 52ch; }

.panel { background: var(--blue); color: var(--white); }
.panel h2, .panel h3, .panel p, .panel a { color: var(--white); }
/* ------------------------------------------------------ filters + tables */
.filterbar { display: flex; flex-wrap: wrap; gap: var(--space-10); margin-top: var(--space-40); }
.filterbar button {
  min-height: 46px;
  padding: 0 var(--space-25);
  border: 1px solid var(--blue);
  background: var(--white);
  color: var(--blue);
  font: inherit;
  font-size: var(--meta);
  font-weight: 700;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-state), color var(--dur-fast) var(--ease-state);
}
.filterbar button:hover { background: var(--light-blue); }
.filterbar button[aria-pressed="true"] { background: var(--blue); color: var(--white); }

.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-wrap table { width: 100%; border-collapse: collapse; min-width: 560px; }
.table-wrap:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }
.table-wrap th, .table-wrap td {
  text-align: left;
  padding: var(--space-20) var(--space-25);
  border-bottom: 1px solid var(--mid-blue);
  font-size: var(--body);
  line-height: var(--body-lh);
}
.table-wrap th { font-weight: 700; }
.table-note { font-size: var(--meta); line-height: var(--meta-lh); margin-top: var(--space-20); }

/* ---------------------------------------------------------- forms + faq */
.field { display: block; margin-bottom: var(--space-25); }
.field__hint { font-size: var(--micro); line-height: var(--micro-lh); margin-top: var(--space-10); }
.form__note { font-size: var(--meta); line-height: var(--meta-lh); }
.form__status {
  margin-top: var(--space-20);
  font-size: var(--meta);
  line-height: var(--meta-lh);
  min-height: var(--meta-lh);
}
.form__status.ok { font-weight: 700; }
.form__status.error { color: var(--red); }
.newsletter__form { display: flex; flex-wrap: wrap; gap: var(--space-17); }
.newsletter__form input { flex: 1 1 180px; min-width: 0; }

.faq { border-top: 1px solid var(--mid-blue); }
.faq details { border-bottom: 1px solid var(--mid-blue); }
.faq summary {
  list-style: none;
  cursor: pointer;
  padding: var(--space-25) 0;
  font-size: var(--h4);
  line-height: var(--h4-lh);
  display: flex;
  justify-content: space-between;
  gap: var(--space-25);
  align-items: center;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: var(--h3); line-height: 1; flex: 0 0 auto; }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { margin: 0 0 var(--space-25); }
.faq__a { max-width: 68ch; }

/* ---------------------------------------------------------------- footer */
.site-footer { background: var(--footer); color: var(--white); }
.site-footer a { color: var(--lightest-blue); text-decoration: none; }
.site-footer a:hover { color: var(--white); text-decoration: underline; }
.footer__top {
  max-width: calc(var(--max-content-width) + var(--container-pl) + var(--container-pr));
  margin-inline: auto;
  padding: var(--space-70) var(--container-pl);
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: var(--space-40);
}
.footer__top h4 {
  color: var(--white);
  font-size: var(--meta);
  line-height: var(--meta-lh);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: var(--space-20);
}
.footer__blurb { color: var(--lightest-blue); font-size: var(--meta); line-height: var(--meta-lh); }
.footer__list { list-style: none; margin: 0; padding: 0; }
/* v3 a11y: footer links measured 45×17, 38×17 and 194×22 — below the 24px AA
   minimum and far below a comfortable thumb. Inline-block + vertical padding
   gives every footer link a >=24px hit area without changing the type. */
.footer__list li { margin-bottom: 0; }
.footer__list a,
.footer__bottom a {
  display: inline-block;
  padding-block: 4px;
  min-height: 24px;
}
.footer__bottom {
  max-width: calc(var(--max-content-width) + var(--container-pl) + var(--container-pr));
  margin-inline: auto;
  padding: var(--space-25) var(--container-pl) var(--space-50);
  border-top: 1px solid var(--footer);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-25);
  justify-content: space-between;
  align-items: center;
  font-size: var(--meta);
  line-height: var(--meta-lh);
}
.footer__bottom ul { display: flex; gap: var(--space-25); list-style: none; margin: 0; padding: 0; }
.footer__bottom li { margin: 0; }
.panel__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-70);
  align-items: center;
}
.panel__body { font-size: var(--body-lg); line-height: var(--body-lg-lh); max-width: 48ch; }

.callout { text-align: center; }
.callout .btn-row { justify-content: center; }

/* -------------------------------------------------------- stats + columns */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-40); margin: 0; }
.stat { margin: 0; }
.stat__num { font-family: var(--font-display); font-size: var(--h3); line-height: var(--h3-lh); font-weight: 600; }
.stat__label { margin: 0; font-size: var(--meta); line-height: var(--meta-lh); }

.columns-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-40); }
.col-item h4 { margin-bottom: var(--space-10); font-size: var(--h5); line-height: var(--h5-lh); }
/* On a phone the reference pattern is a snapping scroll-row, not a stack.
   v4: this rule previously carried `grid-auto-flow: column; grid-auto-columns: 78vw`
   UNCONDITIONALLY, so on desktop every card rendered 1123px wide (measured at
   1440) inside a 1260px rail that scrolled to 3470px — roughly 1.1 cards visible
   on the page that sells the product. It now only *describes the row*; the
   column-flow sizing lives in the max-width:768px query further down, where the
   mobile behaviour belongs. Desktop is a plain grid. */
.scroll-row {
  display: grid;
  gap: var(--space-20);
  list-style: none;
  margin: 0;
  padding: 0;
}
/* The bleed to the viewport edge is a mobile affordance only — on desktop the row
   must not bleed, so these live with the column-flow rules below. */
.scroll-row > li { margin: 0; }
/* The negative margins bleed the scroll-row to the viewport edge on purpose, so
   the bleed must be clipped: without this the scroll-row widens the document and
   the whole page scrolls sideways on a phone. overflow-x:clip contains the bleed
   without creating a scroll container, so the row still scrolls inside itself. */
.section:has(.scroll-row),
.section:has(.grid-products),
.section:has(.grid-loc) { overflow-x: clip; }
/* v4 desktop: the homepage rail is three coffees in a row, matching .grid-products
   on /coffees. Same track sizing as the card grid so the two pages line up. */
.scroll-row { grid-template-columns: repeat(3, 1fr); }
.scroll-hint { margin-top: var(--space-20); font-size: var(--meta); }
/* The hint only means something when the row actually scrolls. */
@media (min-width: 769px) { .scroll-hint { display: none; } }
.nav__links {
  display: flex;
  align-items: center;
  gap: var(--space-30);
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav__links li { margin: 0; }
/* v3: nav links are 18px / weight 400 per style-spec §6.1 — they read small and
   heavy at 14px/700 next to the 24px/700 wordmark. The hover the transition was
   always promising now actually resolves to --link-hover. */
.nav__links a:not(.btn) {
  text-decoration: none;
  font-size: var(--body-lg);
  line-height: var(--body-lg-lh);
  font-weight: 400;
  transition: color var(--dur-fast) var(--ease-color);
}
.nav__links a:not(.btn):hover { color: var(--link-hover); }
.nav__links a[aria-current="page"] { border-bottom: 2px solid currentColor; }

/* A real button, so it is focusable and can expose aria-expanded. */
.nav__toggle {
  display: none;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid var(--mid-blue);
  background: var(--white);
  cursor: pointer;
}
.nav__toggle span {
  display: block;
  width: 20px;
  height: 2px;
  margin: 4px auto;
  background: var(--blue);
}
.drawer {
  display: none;
  border-top: 1px solid var(--mid-blue);
  background: var(--white);
  padding: var(--space-30) var(--container-pl) var(--space-50);
}
.drawer ul { list-style: none; margin: 0 0 var(--space-30); padding: 0; }
.drawer li { border-bottom: 1px solid var(--mid-blue); margin: 0; }
.drawer a:not(.btn) {
  display: block;
  padding: var(--space-20) 0;
  text-decoration: none;
  font-size: var(--h5);
  line-height: var(--h5-lh);
  font-weight: 700;
}
.drawer__cta { border-bottom: 0; padding-top: var(--space-25); }

/* ------------------------------------------------------------ responsive */
@media (max-width: 1080px) {
  .nav__links { display: none; }
  .nav__toggle { display: block; }
  .drawer.is-open { display: block; }
  body.nav-open { overflow: hidden; }
  .footer__top { grid-template-columns: 1fr 1fr; }
  .panel__grid { gap: var(--space-50); }
}

@media (max-width: 900px) {
  .hero--split { grid-template-columns: 1fr; }
  .hero--split .hero__copy { padding: var(--space-70) var(--container-pl) var(--space-50); }
  .hero--split .hero__media { padding-right: 0; }
  .media--hero img { aspect-ratio: 4 / 3; min-height: 0; }
  .split, .panel__grid { grid-template-columns: 1fr; gap: var(--space-40); }
  .grid-journal { grid-template-columns: 1fr; }
  .columns-4 { grid-template-columns: 1fr 1fr; }
  .stats { grid-template-columns: 1fr; gap: var(--space-30); }
}

@media (max-width: 768px) {
  /* body type grows on mobile while headings shrink — rule 3 of the style spec */
  :root { --body: 1.8rem; }
  .measure { max-width: none; }
  .band__inner { padding-block: var(--space-80); }
  /* product and location grids become a snapping scroll-row, not a stack */
  .grid-products, .grid-loc, .scroll-row {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 78vw;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    margin-inline: calc(var(--container-pl) * -1);
    padding-inline: var(--container-pl);
    padding-bottom: var(--space-20);
    -webkit-overflow-scrolling: touch;
  }
  .grid-products > li, .grid-loc > li, .scroll-row > li { scroll-snap-align: start; margin: 0; }
  .columns-4 { grid-template-columns: 1fr; gap: var(--space-30); }
  .footer__top { grid-template-columns: 1fr; gap: var(--space-30); }
  .footer__bottom { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 400px) {
  .brand__name { font-size: var(--body); }
}

@media (prefers-reduced-motion: reduce) {
  .ticker__track { animation: none; }
}

/* ==========================================================================
   v3 — components added this iteration.

   1. A real cart. eyes/v2 blocker B1: six "Add to cart" controls were
      <a href="/contact">, so the site advertised a shop, prices, and a
      "free shipping over $45" promise against a checkout that did not exist.
   2. Scroll affordances for the product row (fix 5) — measured 2 of 6 cards
      visible at 320/390 with zero arrows, zero counter, zero hint text.
   3. The Café & Visit page (fix 9) — the brief names it; it was missing.
   ========================================================================== */

/* --------------------------------------------------------------- cart trigger */
.cart-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-10);
  min-height: 40px;
  padding: 0 var(--space-17);
  border: 1px solid var(--blue);
  background: var(--white);
  color: var(--blue);
  font: inherit;
  font-size: var(--meta);
  font-weight: 700;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-state), color var(--dur-fast) var(--ease-state);
}
.cart-btn:hover { background: var(--blue); color: var(--white); }
.cart-btn__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  background: var(--blue);
  color: var(--white);
  font-size: var(--micro);
  line-height: 1;
  font-weight: 700;
}
.cart-btn:hover .cart-btn__count,
.cart-btn[aria-expanded="true"] .cart-btn__count { background: var(--white); color: var(--blue); }
.cart-btn__count[data-count="0"] { display: none; }
/* ------------------------------------------------------------------ cart drawer */
.cart {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
}
.cart.is-open { display: block; }
.cart__scrim {
  position: absolute;
  inset: 0;
  background: rgba(0, 60, 100, 0.5);
  border: 0;
  padding: 0;
  width: 100%;
  cursor: pointer;
}
.cart__panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(420px, 100%);
  display: flex;
  flex-direction: column;
  background: var(--white);
  border-left: 1px solid var(--mid-blue);
}
.cart__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-17);
  padding: var(--space-25) var(--space-25) var(--space-17);
  border-bottom: 1px solid var(--mid-blue);
}
.cart__head h2 { font-size: var(--h4); line-height: var(--h4-lh); margin: 0; }
.cart__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--blue);
  background: var(--white);
  color: var(--blue);
  font-size: var(--h4);
  line-height: 1;
  cursor: pointer;
}
.cart__close:hover { background: var(--blue); color: var(--white); }
.cart__body { flex: 1 1 auto; overflow-y: auto; padding: var(--space-25); }
.cart__foot {
  border-top: 1px solid var(--mid-blue);
  padding: var(--space-25);
  background: var(--lightest-blue);
}
.cart__empty { margin: 0; color: var(--blue); }

.cart-line {
  display: grid;
  grid-template-columns: 68px 1fr;
  gap: var(--space-17);
  padding: var(--space-20) 0;
  border-bottom: 1px solid var(--mid-blue);
}
.cart-line:last-child { border-bottom: 0; }
.cart-line__media { background: var(--light-blue); }
.cart-line__media img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.cart-line__name { font-size: var(--h5); line-height: var(--h5-lh); font-weight: 700; margin: 0 0 2px; }
.cart-line__meta { font-size: var(--micro); line-height: var(--micro-lh); margin: 0 0 var(--space-10); }
.cart-line__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-10); }
.cart-line__price { font-size: var(--h5); line-height: var(--h5-lh); font-weight: 700; }

/* Quantity stepper: two 44px targets and a read-only count between them. */
.qty { display: inline-flex; align-items: stretch; border: 1px solid var(--blue); }
.qty button {
  width: 44px;
  min-height: 44px;
  border: 0;
  background: var(--white);
  color: var(--blue);
  font: inherit;
  font-size: var(--h5);
  line-height: 1;
  font-weight: 700;
  cursor: pointer;
}
.qty button:hover { background: var(--blue); color: var(--white); }
.qty output {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  padding: 0 var(--space-10);
  border-inline: 1px solid var(--blue);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.cart-line__remove {
  border: 0;
  background: none;
  color: var(--blue);
  font: inherit;
  font-size: var(--micro);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  padding: var(--space-10) 0;
  min-height: 24px;
}
.cart-line__remove:hover { color: var(--red); }

/* Free-shipping meter — the $45 promise the marketing copy already makes. */
.cart__ship { margin: 0 0 var(--space-17); }
.cart__ship-text { font-size: var(--micro); line-height: var(--micro-lh); margin: 0 0 var(--space-10); }
.cart__ship-bar { height: 6px; background: var(--light-blue); overflow: hidden; }
.cart__ship-fill {
  display: block;
  height: 100%;
  width: 0;
  background: var(--blue);
  transition: width var(--dur-base) var(--ease-state);
}
.cart__ship.is-met .cart__ship-text { font-weight: 700; }
.cart__ship.is-met .cart__ship-fill { background: var(--yellow); }
.cart__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-17);
  margin: 0 0 var(--space-17);
  font-size: var(--h4);
  line-height: var(--h4-lh);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.cart__note { font-size: var(--micro); line-height: var(--micro-lh); margin: var(--space-17) 0 0; }
body.cart-open { overflow: hidden; }
.cart :focus-visible { outline-color: var(--yellow); }

/* "Added to cart" confirmation, announced politely. */
.cart-toast {
  position: fixed;
  left: 50%;
  bottom: var(--space-30);
  transform: translateX(-50%);
  z-index: 210;
  display: none;
  margin: 0;
  padding: var(--space-17) var(--space-25);
  background: var(--blue);
  color: var(--white);
  font-size: var(--meta);
  line-height: var(--meta-lh);
  font-weight: 700;
}
.cart-toast.is-visible { display: block; }

/* ------------------------------------------------- product scroll affordance */
/* fix 5: at 320/390 the row showed 2 of 6 cards, the second clipped mid-card,
   with no arrow, no counter and no hint anywhere in the section. */
.scrollnav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-17);
  margin-bottom: var(--space-25);
}
.scrollnav__status { font-size: var(--meta); line-height: var(--meta-lh); margin: 0; }
.scrollnav__buttons { display: flex; gap: var(--space-10); }
.scrollnav__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--blue);
  background: var(--white);
  color: var(--blue);
  font: inherit;
  font-size: var(--h5);
  line-height: 1;
  cursor: pointer;
}
.scrollnav__btn:hover:not([disabled]) { background: var(--blue); color: var(--white); }
.scrollnav__btn[disabled] { border-color: var(--mid-blue); color: var(--mid-blue); cursor: default; }
/* On desktop the row is a 3-up grid that does not scroll, so the controls hide. */
@media (min-width: 769px) {
  .scrollnav { display: none; }
}

/* --------------------------------------------------------------- cafe page */
.hours { width: 100%; border-collapse: collapse; }
.hours caption {
  text-align: left;
  font-size: var(--meta);
  line-height: var(--meta-lh);
  padding-bottom: var(--space-10);
}
.hours th, .hours td {
  text-align: left;
  padding: var(--space-17) var(--space-20);
  border-bottom: 1px solid var(--mid-blue);
  font-size: var(--body);
  line-height: var(--body-lh);
  vertical-align: top;
}
.hours th { font-weight: 700; white-space: nowrap; }
.hours td { font-variant-numeric: tabular-nums; }
.hours tr:last-child th, .hours tr:last-child td { border-bottom: 0; }
.hours__note { font-size: var(--meta); line-height: var(--meta-lh); margin-top: var(--space-20); }

.pill-list { display: flex; flex-wrap: wrap; gap: var(--space-10); list-style: none; margin: 0; padding: 0; }
.pill-list li {
  margin: 0;
  padding: var(--space-10) var(--space-17);
  background: var(--light-blue);
  font-size: var(--micro);
  line-height: var(--micro-lh);
  font-weight: 700;
}

/* v5 spacing fix (Lead, 2026-10-11): every section gets the --space-section gap top and bottom;
   product grids keep their Add buttons off the next section. */
:root { --space-section: 64px; }
@media (max-width: 390px) { :root { --space-section: 40px; } }
main > section.section, main > .section, body > section.section { padding-top: var(--space-section); padding-bottom: var(--space-section); }
.grid-products, .scroll-row { padding-bottom: var(--space-20); }