/* Phil's Barkery — storefront styles
   Hand-written, no build step, no framework.

   Palette sampled from the real marketing material — the Triple P flyer, the
   farmstand hours card, and the ingredients board — not from the logo alone.
   Those use three colours consistently: teal #5DC6C9, navy #001E3D, and a
   coral pink (#F0909C soft, #D84E6C deep). The logo's brown appears only
   inside the mark itself, so it is not a UI colour here.

   The teal is light in value, so white text on it fails contrast badly
   (~1.6:1). Everything sitting on teal uses the navy instead, at 8.3:1.
   For links and small text on pale grounds the teal darkens to --teal-deep.
   Committed to a single light theme; the brand is the teal. */

/* ---------------------------------------------------------------- tokens */
:root {
  --paper:      #FAFDFD;
  --turq-pale:  #D9F2F3;
  --turq-wash:  #EDFAFA;
  --card:       #FFFFFF;

  --ink:        #001E3D;   /* brand navy — 16.6:1 on paper */
  --ink-soft:   #2A4560;   /*              9.6:1 */
  --muted:      #4A6178;   /*              6.3:1 */
  --faint:      #5E7488;   /*              4.7:1, the floor for body text */
  --line:       #D6E8EA;
  --line-soft:  #EAF6F6;

  --turq:       #5DC6C9;   /* brand teal — fills only, navy text on top */
  --turq-mid:   #3FB3B7;   /* hover state for teal fills */
  --teal-deep:  #01707A;   /* links / small text — 5.7:1 on paper, 5.0:1 on the pale band */

  --pink:       #F0909C;   /* soft coral, from the flyers — fills and rules */
  --pink-deep:  #D84E6C;   /* deeper coral for emphasis */
  --pink-text:  #B93B58;   /* the pink darkened enough to read as text */

  --success:    #027E87;
  --alert:      #B93B58;

  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(0, 30, 61, .06);
  --shadow-md: 0 4px 16px rgba(0, 30, 61, .09);
  --shadow-lg: 0 18px 48px rgba(0, 30, 61, .16);

  --serif: Georgia, 'Iowan Old Style', 'Times New Roman', serif;
  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --wrap: 1160px;
  --gutter: clamp(1rem, 4vw, 2.5rem);
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 clamp(16px, 1.02vw, 17px)/1.65 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--teal-deep); }
h1, h2, h3 { font-family: var(--serif); font-weight: 700; line-height: 1.15; letter-spacing: -.015em; margin: 0; }
p { margin: 0 0 1em; }
ul { margin: 0; padding: 0; }

button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible {
  outline: 2.5px solid var(--turq);
  outline-offset: 2px;
  border-radius: 3px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

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

/* ---------------------------------------------------------------- layout */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.wrap.narrow { max-width: 720px; }
.center { text-align: center; }
.muted { color: var(--muted); }
.small { font-size: .875rem; }

.section { padding-block: clamp(3rem, 7vw, 5.5rem); }
.section-cream { background: var(--turq-pale); }

.section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}
.section-head h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); }

.eyebrow {
  font: 600 .78rem/1 var(--sans);
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--pink-text); margin-bottom: .9rem;
}

.lede { font-size: clamp(1.05rem, 1.6vw, 1.2rem); color: var(--ink-soft); line-height: 1.6; }

/* --------------------------------------------------------------- buttons */
.btn {
  --btn-bg: transparent; --btn-fg: var(--ink); --btn-bd: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  background: var(--btn-bg); color: var(--btn-fg);
  border: 1.5px solid var(--btn-bd); border-radius: var(--r-pill);
  padding: .72rem 1.5rem;
  font: 600 .95rem/1 var(--sans); letter-spacing: .01em;
  text-decoration: none; cursor: pointer;
  transition: transform .12s ease, box-shadow .15s ease, background-color .15s ease, border-color .15s ease;
}
.btn:hover:not(:disabled) { transform: translateY(-1px); }
.btn:active:not(:disabled) { transform: translateY(0); }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* Navy on teal, never white — 8.3:1. White on this teal is 1.6:1. */
.btn-primary { --btn-bg: var(--turq); --btn-fg: var(--ink); --btn-bd: var(--turq); box-shadow: var(--shadow-sm); }
.btn-primary:hover:not(:disabled) { --btn-bg: var(--turq-mid); --btn-bd: var(--turq-mid); box-shadow: var(--shadow-md); }

.btn-secondary { --btn-bg: transparent; --btn-fg: var(--ink); --btn-bd: var(--ink); }
.btn-secondary:hover:not(:disabled) { --btn-bg: var(--ink); --btn-fg: #fff; }

.btn-ghost { --btn-bd: var(--line); --btn-fg: var(--ink-soft); background: var(--card); }
.btn-ghost:hover:not(:disabled) { --btn-bd: var(--muted); }

.btn-link {
  --btn-fg: var(--teal-deep);
  padding: .4rem .1rem; border: 0; border-radius: 0;
  text-decoration: none;
}
.btn-link:hover { text-decoration: underline; text-underline-offset: 3px; }

.btn-sm { padding: .5rem 1rem; font-size: .875rem; }
.btn-lg { padding: .95rem 2rem; font-size: 1.02rem; }
.btn-block { display: flex; width: 100%; }

/* ---------------------------------------------------------- announcement */
/* Teal band with navy type — the pairing used across her printed material,
   and it stops the top of the page reading as navy/pale/navy stripes now the
   hero is dark. Navy on this teal is 8.3:1. */
.announce {
  background: var(--turq); color: var(--ink); font-weight: 500;
  text-align: center; padding: .6rem var(--gutter);
  font-size: .875rem; letter-spacing: .01em;
}
.announce p { margin: 0; }

/* ---------------------------------------------------------------- header */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(250, 253, 253, .88);
  backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.header-inner {
  display: flex; align-items: center; gap: 1.25rem;
  min-height: 72px;
}

.brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; color: inherit; margin-right: auto; }
.brand-mark { object-fit: contain; }
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-name { font: 700 1.22rem/1.1 var(--serif); letter-spacing: -.02em; }
.brand-tag {
  font-size: .66rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); margin-top: 3px;
}

.site-nav { display: flex; gap: 1.6rem; }
.site-nav a {
  color: var(--ink-soft); text-decoration: none;
  font-size: .95rem; font-weight: 500; padding: .3rem 0;
  border-bottom: 2px solid transparent;
}
.site-nav a:hover { color: var(--ink); border-bottom-color: var(--line); }
.site-nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--turq); }

.cart-button {
  position: relative; display: grid; place-items: center;
  width: 42px; height: 42px;
  background: var(--card); color: var(--ink);
  border: 1.5px solid var(--line); border-radius: var(--r-pill);
  cursor: pointer; transition: border-color .15s ease, transform .12s ease;
}
.cart-button:hover { border-color: var(--muted); transform: translateY(-1px); }
.cart-count {
  position: absolute; top: -5px; right: -5px;
  min-width: 20px; height: 20px; padding: 0 5px;
  display: grid; place-items: center;
  background: var(--pink-text); color: #fff;
  border-radius: var(--r-pill);
  font: 700 .7rem/1 var(--sans);
}

.nav-toggle {
  display: none; width: 42px; height: 42px;
  flex-direction: column; justify-content: center; align-items: center; gap: 4px;
  background: var(--card); border: 1.5px solid var(--line);
  border-radius: var(--r-pill); cursor: pointer;
}
.nav-toggle-bar { width: 17px; height: 1.8px; background: var(--ink); border-radius: 2px; transition: transform .2s ease, opacity .2s ease; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) { transform: translateY(5.8px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) { transform: translateY(-5.8px) rotate(-45deg); }

@media (max-width: 860px) {
  /* The closed nav is max-height:0 but still wraps onto a second flex row, so
     a row-gap would apply below the brand even with nothing to separate --
     which is where the dead white space under the logo came from. Column gap
     only; the open nav spaces itself with its own link padding. */
  .header-inner { column-gap: 1.25rem; row-gap: 0; min-height: 60px; }
  .nav-toggle { display: flex; order: 3; }
  .cart-button { order: 2; }
  .site-nav {
    order: 4; flex-basis: 100%; flex-direction: column; gap: 0;
    max-height: 0; overflow: hidden; transition: max-height .25s ease;
  }
  .site-nav.is-open { max-height: 320px; }
  .site-nav a { padding: .85rem 0; border-bottom: 1px solid var(--line-soft); }
  .site-nav a[aria-current="page"] { border-bottom-color: var(--turq); }
  .header-inner { flex-wrap: wrap; padding-block: .6rem; }
}

/* ------------------------------------------------------------------ hero */
/* Split hero: navy copy panel on the left, photo bleeding off the right edge.
   Deliberately dark — the page previously opened on a near-white gradient,
   which read as calm rather than appetising, and navy panels are how her own
   printed material is built. Text sits on solid navy, never on the photo, so
   there is no scrim to get wrong. */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  background: var(--ink);
  color: #fff;

  /* Fill the screen below the announcement bar + header, so the hero bottom
     lands exactly at the fold on load.

     svh is the viewport height WITH the mobile browser toolbars showing, so
     the hero locks to its load-time size and does not resize as the toolbars
     hide and show on scroll -- dvh would grow mid-scroll and feel like it is
     fighting the user.

     --hero-lock is set once by JS from innerHeight, for browsers with no svh
     support where a plain vh would still resize on toolbar hide/show.
     --chrome is the measured announcement+header height; the px fallback is
     only used before the script runs. Declaration order matters: older
     browsers drop the svh line and keep the vh one. */
  min-height: calc(100vh - var(--chrome, 116px));
  min-height: calc(var(--hero-lock, 100svh) - var(--chrome, 116px));
}

.hero-inner { display: contents; }

.hero-copy {
  /* Right-aligning a half-wrap-wide block inside the left column lands its
     left edge exactly on the site content column, without touching 100vw
     (which would drift by the scrollbar width). */
  width: 100%;
  max-width: calc(var(--wrap) / 2);
  margin-left: auto;
  padding: clamp(2.75rem, 6vw, 5rem) var(--gutter);
  align-self: center;
}

/* ---- fitting the copy to the slot -------------------------------------
   min-height only sets a floor, so type sized purely in vw would overflow a
   short window and push the hero past the fold. Everything that eats
   vertical space is therefore capped against the viewport HEIGHT as well.

   Each rule is declared twice: the first is a width-only fallback, the
   second adds the height cap. A browser without svh drops the second and
   keeps a working value, rather than the whole declaration being invalid. */
.hero-copy { padding-block: clamp(1.5rem, 6vw, 5rem); }
.hero-copy { padding-block: clamp(1.5rem, min(6vw, 4.5svh), 3.5rem); }

.hero h1 { font-size: clamp(2rem, 5.4vw, 4rem); }
.hero h1 { font-size: clamp(2rem, min(5.4vw, 7svh), 3.6rem); }
.hero h1 {
  color: #fff;
  margin-bottom: clamp(.5rem, 1.6svh, 1.1rem);
}

/* --muted, --ink-soft and --teal-deep are all tuned for pale grounds and fail
   on navy. Each gets a light counterpart here. */
.hero .eyebrow { color: var(--pink); margin-bottom: clamp(.45rem, 1.4svh, .9rem); } /* 7.3:1 */
.hero .lede { color: var(--turq-pale); max-width: 34rem; }              /* 14.3:1 */
.hero .lede { font-size: clamp(.95rem, 1.6vw, 1.2rem); margin-bottom: 2rem; }
.hero .lede {
  font-size: clamp(.95rem, min(1.6vw, 2.05svh), 1.15rem);
  margin-bottom: clamp(.85rem, 2.6svh, 2rem);
}
.hero .btn-link { --btn-fg: var(--turq); }              /* 8.3:1  */
.hero-trust li { color: var(--turq-pale); }             /* 14.3:1 */

.hero-actions {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 1rem 1.5rem;
  margin-bottom: clamp(.9rem, 2.4svh, 2.4rem);
}

.hero-trust { display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; list-style: none; }
.hero-trust li {
  position: relative; padding-left: 1.4rem; font-size: .9rem;
}
.hero-trust li::before {
  content: ''; position: absolute; left: 0; top: .52em;
  width: 7px; height: 7px; border-radius: 50%; background: var(--pink);
}

/* Absolute fill rather than height:100% -- a percentage height against a
   stretched grid item is resolved inconsistently, and this cannot fail. */
.hero-art { position: relative; overflow: hidden; }
.hero-photo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}

/* Below roughly 700px of viewport the three trust bullets are what stops the
   hero fitting. They are the least important thing in it, so they go. */
@media (min-width: 861px) and (max-height: 700px) {
  .hero-trust { display: none; }
}

@media (max-width: 860px) {
  /* Photo takes whatever height is left once the copy has what it needs, so
     the two together still land on the fold. It stops shrinking at 165px; on
     a very short screen the section grows rather than crushing the image. */
  .hero {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(165px, 1fr) auto;
  }
  .hero-art { order: -1; }
  .hero-copy {
    max-width: none; margin-left: 0;
    padding-block: clamp(1.4rem, 4.5vw, 2.25rem);
  }
  /* Phone screens do not have the room, and the bullets are the most
     expendable thing here: two of the three are already on screen -- "four
     ingredients" is the headline and local pickup is in the announcement bar
     -- and all three are restated in the pillars further down. */
  .hero-trust { display: none; }
}

/* ------------------------------------------------------------- page head */
.page-head {
  background: var(--turq-pale);
  border-bottom: 1px solid var(--line);
  padding-block: clamp(2.5rem, 5vw, 4rem);
}
.page-head h1 { font-size: clamp(2rem, 4.4vw, 3rem); margin-bottom: .6rem; }
.page-head .lede { max-width: 42rem; margin: 0; }

/* --------------------------------------------------------- product cards */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: clamp(1.1rem, 2.4vw, 1.9rem);
}

.product-card {
  display: flex; flex-direction: column;
  background: var(--card);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.product-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: #DCD0BC; }
.product-card.is-soldout { opacity: .72; }

.pc-link { position: relative; display: block; }
.pc-img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--turq-pale); }
.pc-img-placeholder {
  display: grid; place-items: center;
  background: linear-gradient(150deg, var(--turq-wash), var(--turq-pale));
  color: var(--teal-deep); font: 700 3.1rem/1 var(--serif);
}
.pc-badge {
  position: absolute; top: .7rem; left: .7rem;
  background: var(--ink); color: #fff;
  padding: .28rem .7rem; border-radius: var(--r-pill);
  font-size: .72rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
}

.pc-body { display: flex; flex-direction: column; flex: 1; padding: 1.1rem 1.15rem 1.2rem; }
.pc-name { font-size: 1.08rem; margin-bottom: .3rem; }
.pc-name a { color: inherit; text-decoration: none; }
.pc-name a:hover { color: var(--teal-deep); }
.pc-tagline { font-size: .89rem; color: var(--muted); margin-bottom: 1rem; }

.pc-foot { display: flex; align-items: center; justify-content: space-between; gap: .8rem; margin-top: auto; }
.pc-price { font: 700 1.08rem/1.2 var(--serif); display: flex; flex-direction: column; }
.pc-weight { font: 400 .75rem/1.3 var(--sans); color: var(--faint); margin-top: 2px; }

/* ------------------------------------------------------- product detail */
.breadcrumb { padding-block: 1.4rem .2rem; font-size: .85rem; color: var(--muted); }
.breadcrumb a { color: var(--muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--ink); text-decoration: underline; }
.breadcrumb span[aria-hidden] { padding-inline: .35rem; color: var(--faint); }

.product-detail {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(1.8rem, 4vw, 3.5rem);
  padding-block: clamp(1.5rem, 3vw, 2.5rem) clamp(3rem, 6vw, 4.5rem);
  align-items: start;
}
.pd-img {
  width: 100%; aspect-ratio: 1; object-fit: cover;
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--turq-pale);
}
.pd-img-placeholder {
  display: grid; place-items: center;
  background: linear-gradient(150deg, var(--turq-wash), var(--turq-pale));
  color: var(--teal-deep); font: 700 clamp(5rem, 14vw, 9rem)/1 var(--serif);
}

.pd-info h1 { font-size: clamp(1.9rem, 4vw, 2.7rem); margin-bottom: .5rem; }
.pd-tagline { font-size: 1.1rem; color: var(--teal-deep); font-style: italic; margin-bottom: 1.2rem; }
.pd-price { font: 700 1.75rem/1.2 var(--serif); display: flex; align-items: baseline; gap: .6rem; margin-bottom: 1.4rem; }
.pd-weight { font: 400 .85rem/1 var(--sans); color: var(--faint); }
.pd-description { color: var(--ink-soft); margin-bottom: 1.6rem; }

.pd-buy { display: flex; flex-wrap: wrap; gap: .9rem; align-items: center; margin-bottom: .8rem; }

.qty-picker {
  display: flex; align-items: center;
  border: 1.5px solid var(--line); border-radius: var(--r-pill);
  background: var(--card); overflow: hidden;
}
.qty-btn {
  width: 42px; height: 46px; border: 0; background: transparent;
  font-size: 1.2rem; color: var(--ink-soft); cursor: pointer;
}
.qty-btn:hover { background: var(--turq-pale); color: var(--ink); }
.qty-picker input {
  width: 48px; height: 46px; border: 0; background: transparent;
  text-align: center; font-weight: 600;
  -moz-appearance: textfield;
}
.qty-picker input::-webkit-outer-spin-button,
.qty-picker input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.pd-low-stock { font-size: .875rem; color: var(--alert); font-weight: 600; }
.pd-soldout {
  background: var(--turq-pale); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 1rem 1.2rem; color: var(--muted);
}

.pd-panel { border-top: 1px solid var(--line); padding-top: 1.3rem; margin-top: 1.6rem; }
.pd-panel h2 {
  font: 600 .78rem/1 var(--sans);
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--muted); margin-bottom: .6rem;
}
.pd-panel p { font-size: .95rem; color: var(--ink-soft); margin: 0; }

@media (max-width: 800px) { .product-detail { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------- pillars */
.pillars { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: clamp(1.5rem, 3vw, 2.8rem); }
.pillar h3 { font-size: 1.22rem; margin-bottom: .6rem; }
.pillar p { color: var(--muted); margin: 0; font-size: .96rem; }

/* ---------------------------------------------------------- story strip */
.story-strip { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
/* The badge carries its own turquoise ground, so no tile behind it. */
.story-strip-art { display: grid; place-items: center; }
.story-strip-art img {
  width: 100%; max-width: 300px; height: auto;
  border-radius: 22%; box-shadow: var(--shadow-md);
}
.story-strip-copy h2 { font-size: clamp(1.6rem, 3.4vw, 2.35rem); margin-bottom: 1rem; }
.story-strip-copy p { color: var(--ink-soft); }
.story-strip-copy .btn { margin-top: .8rem; }
@media (max-width: 780px) {
  .story-strip { grid-template-columns: 1fr; }
  .story-strip-art { max-width: 220px; }
}

/* ---------------------------------------------------------------- quotes */
.quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.6rem; }
.quotes blockquote {
  margin: 0; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 1.6rem 1.5rem;
}
.quotes p { font-family: var(--serif); font-size: 1.04rem; line-height: 1.55; color: var(--ink-soft); }
.quotes cite { font-style: normal; font-size: .85rem; color: var(--faint); font-weight: 600; }

/* -------------------------------------------------------------- cta band */
.cta-band { background: var(--ink); color: var(--turq-pale); padding-block: clamp(3rem, 6vw, 4.5rem); }
.cta-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.8rem; }
.cta-inner h2 { font-size: clamp(1.5rem, 3.2vw, 2.2rem); max-width: 24ch; color: #fff; }

/* ----------------------------------------------------------------- prose */
.prose { font-size: 1.05rem; color: var(--ink-soft); }
.prose h2 { font-size: clamp(1.35rem, 2.6vw, 1.75rem); margin: 2.4rem 0 .8rem; color: var(--ink); }
.prose .drop { font-size: 1.2rem; color: var(--ink); }
.prose .drop::first-letter { font-family: var(--serif); font-size: 2.6em; float: left; line-height: .82; padding: .06em .1em 0 0; color: var(--teal-deep); }
.prose .signoff { font-family: var(--serif); font-style: italic; color: var(--muted); margin-top: 2rem; }
.prose a { color: var(--teal-deep); }

.tick-list, .cross-list { list-style: none; display: grid; gap: .7rem; margin-bottom: 1.4rem; }
.tick-list li, .cross-list li { position: relative; padding-left: 1.9rem; }
.tick-list li::before { content: '✓'; position: absolute; left: 0; color: var(--success); font-weight: 700; }
.cross-list li::before { content: '✕'; position: absolute; left: 0; color: var(--alert); font-weight: 700; }

.callout {
  background: var(--turq-wash); border-left: 3px solid var(--turq);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  padding: 1.1rem 1.3rem; margin-top: 2rem;
}
.callout p { margin: 0; font-size: .96rem; }

.contact-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1.2rem; margin-top: 2rem; }
.contact-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.4rem; }
.contact-card h2 { font: 600 .78rem/1 var(--sans); letter-spacing: .13em; text-transform: uppercase; color: var(--muted); margin-bottom: .6rem; }
.contact-card p { font-size: .95rem; margin-bottom: .4rem; }

code { font: .9em/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background: var(--turq-pale); padding: .15em .4em; border-radius: 4px; }

/* --------------------------------------------------------------- notices */
.notice {
  background: var(--turq-pale); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: .9rem 1.1rem;
  font-size: .95rem; color: var(--ink-soft);
}
.notice-warn { background: #FFF4E3; border-color: #EFD9B4; }

.empty-state { text-align: center; color: var(--muted); padding-block: 3rem; }

/* ------------------------------------------------------------ cart drawer */
.cart-overlay {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(43, 38, 34, .38);
  opacity: 0; transition: opacity .22s ease;
}
.cart-overlay.is-open { opacity: 1; }

.cart-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 90;
  width: min(420px, 100%);
  display: flex; flex-direction: column;
  background: var(--paper);
  border-left: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
  transform: translateX(100%);
  transition: transform .26s cubic-bezier(.4, 0, .2, 1);
}
.cart-drawer.is-open { transform: translateX(0); }

.cart-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.2rem 1.3rem; border-bottom: 1px solid var(--line);
}
.cart-head h2 { font-size: 1.25rem; }

.icon-button {
  display: grid; place-items: center; width: 36px; height: 36px;
  background: transparent; border: 0; border-radius: 50%;
  color: var(--muted); cursor: pointer;
}
.icon-button:hover { background: var(--turq-pale); color: var(--ink); }

.cart-body { flex: 1; overflow-y: auto; padding: 1.1rem 1.3rem; }
.cart-empty { text-align: center; color: var(--muted); padding-block: 2.5rem; }

.cart-items { list-style: none; display: grid; gap: 1rem; }
.cart-item { display: grid; grid-template-columns: 62px 1fr auto; gap: .9rem; align-items: start; }
.cart-item-img {
  width: 62px; height: 62px; object-fit: cover;
  border-radius: var(--r-sm); background: var(--turq-pale); border: 1px solid var(--line);
}
.cart-item-img-placeholder {
  display: grid; place-items: center;
  background: linear-gradient(150deg, var(--turq-wash), var(--turq-pale));
  color: var(--teal-deep); font: 700 1.4rem/1 var(--serif);
}
.cart-item-name { font-weight: 600; font-size: .95rem; margin-bottom: .1rem; }
.cart-item-name a { color: inherit; text-decoration: none; }
.cart-item-name a:hover { text-decoration: underline; }
.cart-item-meta { font-size: .8rem; color: var(--faint); margin-bottom: .45rem; }
.cart-item-price { font-weight: 600; font-size: .95rem; white-space: nowrap; }

.qty-mini { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--card); }
.qty-mini button {
  width: 28px; height: 28px; border: 0; background: transparent;
  cursor: pointer; color: var(--muted); font-size: 1rem; line-height: 1;
}
.qty-mini button:hover { color: var(--ink); }
.qty-mini span { min-width: 26px; text-align: center; font-size: .85rem; font-weight: 600; }

.cart-item-remove {
  background: 0; border: 0; padding: 0; margin-top: .4rem;
  font-size: .78rem; color: var(--faint); cursor: pointer; text-decoration: underline;
}
.cart-item-remove:hover { color: var(--alert); }

.cart-foot { border-top: 1px solid var(--line); padding: 1.1rem 1.3rem 1.3rem; background: var(--card); }

.ship-progress { margin-bottom: 1rem; }
.ship-bar { height: 5px; background: var(--line-soft); border-radius: var(--r-pill); overflow: hidden; margin-bottom: .45rem; }
.ship-bar span { display: block; height: 100%; width: 0; background: var(--success); border-radius: var(--r-pill); transition: width .3s ease; }
.ship-progress p { margin: 0; font-size: .82rem; color: var(--muted); }

.fulfilment { border: 0; padding: 0; margin: 0 0 1rem; }
.fulfilment legend {
  font: 600 .72rem/1 var(--sans); letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted); padding: 0; margin-bottom: .5rem;
}
.radio { display: flex; align-items: center; gap: .55rem; padding: .4rem 0; font-size: .92rem; cursor: pointer; }
.radio input { accent-color: var(--turq); width: 17px; height: 17px; }
.radio em { font-style: normal; color: var(--success); font-weight: 600; font-size: .82rem; }

.cart-totals { margin: 0 0 1rem; display: grid; gap: .4rem; }
.cart-totals > div { display: flex; justify-content: space-between; align-items: baseline; }
.cart-totals dt, .cart-totals dd { margin: 0; font-size: .92rem; color: var(--muted); }
.cart-totals dd { font-weight: 600; color: var(--ink); }
.cart-totals .total { border-top: 1px solid var(--line); padding-top: .6rem; margin-top: .3rem; }
.cart-totals .total dt, .cart-totals .total dd { font: 700 1.15rem/1.2 var(--serif); color: var(--ink); }

.cart-note { text-align: center; font-size: .78rem; color: var(--faint); margin: .7rem 0 0; }
.cart-error {
  margin: .8rem 0 0; padding: .7rem .9rem;
  background: #FBEEEF; border: 1px solid #EFD3D5; border-radius: var(--r-sm);
  font-size: .85rem; color: var(--alert);
}

/* ------------------------------------------------------------- cart page */
.cart-page-grid { display: grid; grid-template-columns: 1.5fr .9fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
.cart-items-page { gap: 1.4rem; }
.cart-items-page .cart-item { grid-template-columns: 88px 1fr auto; }
.cart-items-page .cart-item-img { width: 88px; height: 88px; }
.cart-summary {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 1.4rem;
  position: sticky; top: 96px;
}
.cart-summary h2 { font-size: 1.2rem; margin-bottom: 1rem; }
@media (max-width: 820px) { .cart-page-grid { grid-template-columns: 1fr; } .cart-summary { position: static; } }

/* --------------------------------------------------------------- success */
.success-card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: clamp(1.8rem, 4vw, 3rem);
  text-align: center;
}
.success-mark {
  width: 80px; height: 80px; margin: 0 auto 1.2rem;
  display: grid; place-items: center; padding: 13px;
  background: var(--turq-wash); border-radius: 50%;
}
.success-mark img { width: 100%; height: auto; }
.success-card h1 { font-size: clamp(1.6rem, 3.4vw, 2.3rem); margin-bottom: .7rem; }
.success-card .lede { margin-bottom: 1.8rem; }

.success-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem 2.5rem; margin: 0 0 1.8rem; }
.success-meta dt { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: .2rem; }
.success-meta dd { margin: 0; font-weight: 700; font-family: var(--serif); font-size: 1.05rem; }

.order-table { width: 100%; border-collapse: collapse; text-align: left; margin-bottom: 1.6rem; }
.order-table td { padding: .55rem 0; border-bottom: 1px solid var(--line-soft); font-size: .94rem; }
.order-table .num { text-align: right; white-space: nowrap; }
.order-table tfoot td { border-bottom: 0; color: var(--muted); }
.order-table tfoot .grand td { border-top: 2px solid var(--ink); padding-top: .7rem; font: 700 1.1rem/1.2 var(--serif); color: var(--ink); }
.success-card .notice { text-align: left; margin-bottom: 1.6rem; }

/* -------------------------------------------------------------- notfound */
.notfound { padding-block: clamp(2.5rem, 7vw, 5rem); }
.notfound span { font-size: 4rem; display: block; margin-bottom: 1rem; }
.notfound h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); margin-bottom: .8rem; }
.notfound .lede { margin-bottom: 2rem; }

/* ---------------------------------------------------------------- footer */
.site-footer { background: var(--turq-pale); border-top: 1px solid var(--line); padding-block: clamp(2.5rem, 5vw, 4rem) 2rem; margin-top: auto; }
.footer-grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 2rem; }
.footer-brand img { margin-bottom: .9rem; }
.footer-blurb { font-size: .9rem; color: var(--muted); max-width: 30ch; }
.site-footer h3 { font: 600 .74rem/1 var(--sans); letter-spacing: .13em; text-transform: uppercase; color: var(--muted); margin-bottom: .9rem; }
.site-footer ul { list-style: none; display: grid; gap: .5rem; }
.site-footer a { color: var(--ink-soft); text-decoration: none; font-size: .92rem; }
.site-footer a:hover { color: var(--teal-deep); text-decoration: underline; }

.footer-bottom { border-top: 1px solid var(--line); margin-top: 2.4rem; padding-top: 1.4rem; }
.footer-bottom p { font-size: .82rem; color: var(--faint); margin: 0 0 .3rem; }
.footer-fineprint { font-size: .76rem; }

@media (max-width: 720px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 460px) { .footer-grid { grid-template-columns: 1fr; } }

/* ------------------------------------------------------- enquiry forms */
.enquiry-form { margin-top: 2rem; }

.field { margin-bottom: 1.15rem; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 620px) { .field-row { grid-template-columns: 1fr; gap: 0; } }

.enquiry-form label {
  display: block; margin-bottom: .4rem;
  font-size: .88rem; font-weight: 600; color: var(--ink-soft);
}
.enquiry-form .req, .enquiry-form .opt {
  font-weight: 400; font-size: .78rem; color: var(--faint);
  text-transform: uppercase; letter-spacing: .08em; margin-left: .35rem;
}

.enquiry-form input[type="text"],
.enquiry-form input[type="email"],
.enquiry-form input[type="tel"],
.enquiry-form select,
.enquiry-form textarea {
  width: 100%; padding: .72rem .85rem;
  background: var(--card); color: var(--ink);
  border: 1.5px solid var(--line); border-radius: var(--r-sm);
  font: 400 1rem/1.45 var(--sans);
  transition: border-color .15s ease;
}
.enquiry-form input:hover, .enquiry-form select:hover, .enquiry-form textarea:hover { border-color: #B9DDE0; }
.enquiry-form input:focus, .enquiry-form select:focus, .enquiry-form textarea:focus { border-color: var(--turq-mid); }
.enquiry-form textarea { resize: vertical; min-height: 110px; }
.enquiry-form select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%234A6178' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .85rem center; background-size: 12px;
  padding-right: 2.4rem;
}

.field-hint { margin: .4rem 0 0; font-size: .82rem; color: var(--muted); }
.form-note { margin-top: 1rem; font-size: .85rem; color: var(--muted); max-width: 46ch; }

.enquiry-form button[type="submit"] { margin-top: .6rem; }

/* Honeypot: off-screen rather than display:none, which some bots skip. */
.hp {
  position: absolute; left: -9999px; top: auto;
  width: 1px; height: 1px; overflow: hidden;
}

.form-error {
  background: #FBEEEF; border: 1px solid #EFD3D5;
  border-radius: var(--r-md); padding: .85rem 1.1rem;
  color: var(--alert); font-size: .95rem; margin-bottom: 1.4rem;
}

.form-sent {
  background: var(--turq-wash); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: clamp(1.6rem, 4vw, 2.6rem);
  text-align: center;
}
.form-sent h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); margin-bottom: .7rem; }
.form-sent p { color: var(--ink-soft); margin-bottom: .5rem; }
.form-sent p:last-child { margin-bottom: 0; font-size: .9rem; }

/* ---------------------------------------------------------- wholesale */
.wholesale-points {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.2rem; margin-bottom: 2.6rem;
}
.wholesale-point {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 1.3rem 1.4rem;
}
.wholesale-point h2 {
  font: 600 .76rem/1 var(--sans); letter-spacing: .12em;
  text-transform: uppercase; color: var(--teal-deep); margin-bottom: .6rem;
}
.wholesale-point p { margin: 0; font-size: .93rem; color: var(--ink-soft); }

/* --------------------------------------------------------------- farmstand */
.farmstand {
  display: grid; grid-template-columns: 1.25fr .75fr;
  gap: 0;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-lg); overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.farmstand-info { padding: clamp(1.5rem, 3.5vw, 2.6rem); }
.farmstand-info h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); margin-bottom: .9rem; }
.farmstand-address {
  font: 700 clamp(1.05rem, 2vw, 1.25rem)/1.45 var(--serif);
  color: var(--ink); margin-bottom: .5rem;
}
.farmstand-note { color: var(--muted); font-size: .95rem; margin-bottom: 1.4rem; }

/* Teal panel with navy type, the pairing used across the printed material. */
.farmstand-hours {
  background: var(--turq); color: var(--ink);
  padding: clamp(1.4rem, 3vw, 2.2rem);
  display: flex; flex-direction: column; justify-content: center;
}
.farmstand-hours h3 {
  font: 600 .74rem/1 var(--sans); letter-spacing: .14em;
  text-transform: uppercase; margin-bottom: 1rem; opacity: .75;
}
.farmstand-hours dl { margin: 0; display: grid; gap: .55rem; }
.farmstand-hours dl > div {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; padding-bottom: .55rem;
  border-bottom: 1px solid rgba(0, 30, 61, .14);
}
.farmstand-hours dl > div:last-child { border-bottom: 0; padding-bottom: 0; }
.farmstand-hours dt { font-weight: 600; font-size: .95rem; }
.farmstand-hours dd { margin: 0; font-weight: 700; font-size: .95rem; white-space: nowrap; }

@media (max-width: 720px) {
  .farmstand { grid-template-columns: 1fr; }
}

/* Photo across the top of the farmstand card, above the info and hours. */
.farmstand-photo {
  grid-column: 1 / -1;
  width: 100%; aspect-ratio: 21 / 9; object-fit: cover;
  border-bottom: 1px solid var(--line);
}
@media (max-width: 720px) { .farmstand-photo { aspect-ratio: 3 / 2; } }

/* ------------------------------------------------------- inline figures */
.prose-figure { max-width: 340px; margin: 2.2rem auto; }
.prose-figure-wide { max-width: 480px; }
.prose-figure img {
  width: 100%; height: auto;
  border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
}
.prose-figure figcaption {
  margin-top: .65rem; text-align: center;
  font-size: .84rem; color: var(--muted); line-height: 1.5;
}

/* Lead figure at the top of a story — wider than an inline one, and it sits
   flush with the top of the prose rather than floating in from a margin. */
.prose-figure-lead { max-width: 560px; margin-top: 0; margin-bottom: 2.6rem; }

/* ------------------------------------------------- photo-backed CTA band */
/* Navy at .68 over the photo, measured at 5.9:1 worst-case against white --
   sampled per-pixel on the actual image, not guessed. Lighter than the .72
   used over the old brown shot, so more of the marble reads through. The
   colour is declared on .cta-band first, so if the image fails to load the
   band is still solid navy and the text still reads. */
.cta-band-photo {
  position: relative; isolation: isolate;
  background-image:
    linear-gradient(rgba(0, 30, 61, .68), rgba(0, 30, 61, .68)),
    url('/img/treats-band.jpg');
  background-size: cover;
  background-position: center;
}
@media (min-width: 900px) { .cta-band-photo { background-attachment: fixed; } }
@media (prefers-reduced-motion: reduce) { .cta-band-photo { background-attachment: scroll; } }

/* --------------------------------------------------------- account button */
.account-button {
  position: relative; display: grid; place-items: center;
  width: 42px; height: 42px; flex: none;
  background: var(--card); color: var(--ink);
  border: 1.5px solid var(--line); border-radius: var(--r-pill);
  cursor: pointer; text-decoration: none;
  transition: border-color .15s ease, transform .12s ease;
}
.account-button:hover { border-color: var(--muted); transform: translateY(-1px); }
.account-button::-webkit-details-marker { display: none; }
.account-button::marker { content: ''; }

/* Small coral dot marks a signed-in session without needing a label. */
.account-dot {
  position: absolute; top: -2px; right: -2px;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--pink-text); border: 2px solid var(--paper);
}

/* <details> gives a keyboard-accessible disclosure with no JavaScript. */
.account-menu { position: relative; flex: none; }
.account-pop {
  position: absolute; right: 0; top: calc(100% + .5rem); z-index: 60;
  min-width: 210px; padding: .5rem;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-md); box-shadow: var(--shadow-lg);
}
.account-pop-email {
  margin: 0; padding: .5rem .65rem .6rem;
  font-size: .8rem; color: var(--muted);
  border-bottom: 1px solid var(--line-soft);
  overflow-wrap: anywhere;
}
.account-pop a,
.account-pop button {
  display: block; width: 100%; text-align: left;
  padding: .6rem .65rem; border: 0; border-radius: var(--r-sm);
  background: transparent; color: var(--ink);
  font: 500 .92rem/1.2 var(--sans); text-decoration: none; cursor: pointer;
}
.account-pop a:hover, .account-pop button:hover { background: var(--turq-wash); }
.account-pop form { margin: 0; }

@media (max-width: 860px) { .account-button { order: 2; } .account-menu { order: 2; } }

/* ------------------------------------------------------------ auth pages */
.auth-tabs { display: flex; gap: .4rem; margin-bottom: 1.6rem; }
.auth-tab {
  padding: .55rem 1.1rem; border-radius: var(--r-pill);
  border: 1.5px solid var(--line); background: var(--card);
  color: var(--ink-soft); text-decoration: none;
  font-size: .92rem; font-weight: 600;
}
.auth-tab:hover { border-color: var(--muted); }
.auth-tab.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }

.auth-form { margin-top: 0; }

.auth-alt { margin-top: 2rem; }
.auth-or {
  display: flex; align-items: center; gap: 1rem;
  margin: 0 0 1.2rem; color: var(--faint); font-size: .82rem;
  text-transform: uppercase; letter-spacing: .12em;
}
.auth-or::before, .auth-or::after {
  content: ''; flex: 1; height: 1px; background: var(--line);
}

.auth-admin {
  margin-top: 2.5rem; padding-top: 1.4rem;
  border-top: 1px solid var(--line);
  font-size: .88rem; color: var(--muted);
}

.form-notice {
  background: var(--turq-wash); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: .85rem 1.1rem;
  color: var(--ink-soft); font-size: .95rem; margin-bottom: 1.4rem;
}

.verify-notice {
  background: #FFF4E3; border: 1px solid #EFD9B4;
  border-radius: var(--r-lg); padding: 1.4rem 1.5rem; margin-bottom: 2rem;
}
.verify-notice h2 { font-size: 1.15rem; margin-bottom: .5rem; }
.verify-notice p { font-size: .95rem; color: var(--ink-soft); }

/* ---------------------------------------------------------- order history */
.account-h2 { font-size: 1.3rem; margin-bottom: 1rem; }

.order-list { list-style: none; display: grid; gap: .7rem; margin-bottom: 2.5rem; }
.order-row {
  position: relative; display: flex; align-items: center;
  justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 1rem 1.1rem;
  transition: border-color .15s ease;
}
.order-row:hover { border-color: var(--muted); }
.order-num { margin: 0; font-weight: 700; font-size: .98rem; }
.order-meta { margin: .2rem 0 0; font-size: .85rem; color: var(--muted); }
.order-row-side { display: flex; align-items: center; gap: .8rem; }
.order-total { font: 700 1.05rem/1 var(--serif); }

/* Stretched link keeps the whole row clickable without nesting interactive
   elements inside one another. */
.order-row-link { position: static; font-size: .88rem; font-weight: 600; }
.order-row-link::after { content: ''; position: absolute; inset: 0; }

.account-card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 1.4rem 1.5rem; margin-bottom: 1.5rem;
}
.account-card h2 { font-size: 1.1rem; margin-bottom: .3rem; }
.account-signout { margin-top: 1rem; }

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

/* Order status pills, shared shape with the admin ones. */
.a-pill {
  display: inline-block; padding: 3px 9px; border-radius: 20px;
  font-size: .75rem; font-weight: 600;
  background: var(--line-soft); color: var(--muted); white-space: nowrap;
}
.a-pill-paid      { background: #E7F4EC; color: #1D6B3F; }
.a-pill-fulfilled { background: var(--turq-wash); color: var(--teal-deep); }
.a-pill-refunded,
.a-pill-cancelled { background: #FBEEEF; color: var(--pink-text); }

/* Email echoed at the top of steps 2a/2b, with a way back to step 1. */
.auth-email-line { font-size: 1rem; }
.auth-email-line a { font-size: .92rem; }
.auth-centre { text-align: center; }
.auth-alt .btn-block + .field-hint { margin-top: .7rem; }