/* ==========================================================================
   Zee's Wildflower Bakery
   Design tokens pulled from her logo: ivory paper, script brown, olive
   "WILDFLOWER" green, dusty rose "BAKERY", with lavender, gold and
   cornflower from the wreath used only as small accents.
   ========================================================================== */
:root {
  --font-heading: 'Cormorant Garamond', 'Iowan Old Style', Georgia, serif;
  --font-body: 'Nunito Sans', -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-script: 'Caveat', 'Bradley Hand', cursive;

  --text-h1: clamp(2.5rem, 4.6vw, 4rem); --weight-h1: 500; --tracking-h1: -0.015em;
  --text-h2: clamp(2.05rem, 3.6vw, 3.1rem); --weight-h2: 500; --tracking-h2: -0.01em;
  --text-h3: clamp(1.55rem, 2.2vw, 1.95rem);
  --text-body: 1.0625rem; --line-body: 1.65;
  --text-label: 0.72rem; --weight-label: 700; --tracking-label: 0.16em;

  /* Pulled from Zandra's fall menu poster: mottled cream paper, cream panels,
     olive and rust ribbon headers, pumpkin accent, deep brown ink. */
  --color-primary: #5F6B41;
  --color-secondary: #7A4522;
  --color-accent: #9C4A2C;
  --color-pumpkin: #C4702F;
  --color-new: #B23A24;
  --color-cta: #5F6B41; --color-cta-hover: #4A5432; --color-cta-rgb: 95, 107, 65;
  --color-bg: #F3E7D3; --color-surface: #FBF4E7; --color-surface-deep: #F0E3CB;
  --color-text: #3B2A1C; --color-text-muted: #7A6650; --color-border: #DFCBA8;
  --color-rule: #C9AE85;
  --color-olive-deep: #4A5432;

  --layout-gutter: clamp(1.25rem, 4vw, 3.5rem);
  --content-max: 1200px; --content-narrow: 680px; --content-wide: 1360px;
  --space-section: clamp(4rem, 8vw, 7rem); --space-component: 2.5rem; --space-element: 1rem;
  --radius-small: 4px; --radius-medium: 10px; --radius-large: 18px;
  --shadow-card: 0 1px 2px rgba(59,42,28,.06), 0 10px 26px -14px rgba(59,42,28,.22);
  --shadow-elevated: 0 26px 60px -24px rgba(59,42,28,.42);
  --reveal-distance: 18px; --reveal-duration: .7s;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
/* clip, not hidden: hidden would make the sticky header stop sticking. */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--line-body);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3, h4 { font-family: var(--font-heading); margin: 0; line-height: 1.08; color: var(--color-text); }
h1 { font-size: var(--text-h1); font-weight: var(--weight-h1); letter-spacing: var(--tracking-h1); }
h2 { font-size: var(--text-h2); font-weight: var(--weight-h2); letter-spacing: var(--tracking-h2); }
h3 { font-size: var(--text-h3); font-weight: 600; }
p { margin: 0 0 1rem; }
button { font: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--color-cornflower); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* .btn and friends set their own display, which would otherwise beat the hidden attribute. */
[hidden] { display: none !important; }

.container { width: 100%; max-width: var(--content-max); margin: 0 auto; padding-inline: var(--layout-gutter); }
.container--wide { max-width: var(--content-wide); }
.container--narrow { max-width: var(--content-narrow); }

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-label); font-weight: var(--weight-label);
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--color-accent);
  margin: 0 0 1rem;
  display: flex; align-items: center; gap: .6rem;
}
.eyebrow::before { content: ""; width: 26px; height: 1px; background: var(--color-accent); }
.eyebrow--center { justify-content: center; }
.eyebrow--center::before { display: none; }

.lede { font-size: 1.2rem; line-height: 1.6; color: var(--color-text-muted); max-width: 34rem; }
.muted { color: var(--color-text-muted); }
.italic { font-family: var(--font-script); font-size: 1.55rem; color: var(--color-secondary); }

/* buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .95rem 1.6rem;
  font-family: var(--font-body); font-weight: 700; font-size: .82rem;
  letter-spacing: .12em; text-transform: uppercase; text-decoration: none;
  border-radius: var(--radius-small); border: 1px solid transparent;
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .15s ease;
  white-space: nowrap;
}
.btn-primary { background: var(--color-cta); color: #FBF7EF; }
.btn-primary:hover { background: var(--color-cta-hover); }
.btn-primary:active { transform: translateY(1px); }
.btn-primary:disabled { opacity: .55; cursor: default; }
.btn-outline { background: transparent; color: var(--color-primary); border-color: var(--color-primary); }
.btn-outline:hover { background: rgba(var(--color-cta-rgb), .08); }
.btn-link {
  font-weight: 700; font-size: .82rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--color-secondary); text-decoration: none;
  border-bottom: 1px solid var(--color-wheat); padding-bottom: .2rem;
}
.btn-link:hover { border-color: var(--color-secondary); }

/* ---------- uppercase headings ----------
   .caps          uppercase display heading, may wrap
   .caps--line    must hold one line on desktop; wraps again on small screens */
.caps { text-transform: uppercase; letter-spacing: .045em; text-wrap: balance; }
h1.caps { font-size: clamp(1.9rem, 3.2vw, 2.95rem); letter-spacing: .03em; line-height: 1.16; text-wrap: normal; }
h2.caps { font-size: clamp(1.45rem, 3vw, 2.35rem); line-height: 1.2; }
@media (min-width: 861px) {
  .caps--line { white-space: nowrap; text-wrap: nowrap; }
}

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 40;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
}
.site-header .container { display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: 74px; }
.brand { display: flex; align-items: center; gap: .8rem; text-decoration: none; min-width: 0; }
.brand img { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--color-border); flex: none; }
.brand span { font-family: var(--font-heading); font-size: 1.3rem; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; }
.site-nav { display: flex; gap: clamp(1rem, 1.8vw, 1.9rem); flex: 0 1 auto; }
.site-nav a { text-decoration: none; font-size: .92rem; font-weight: 600; color: var(--color-text-muted); white-space: nowrap; }
.site-nav a:hover { color: var(--color-text); }
.cart-btn {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .6rem 1rem .6rem 1.1rem;
  background: transparent; border: 1px solid var(--color-primary); border-radius: var(--radius-small);
  color: var(--color-primary); font-weight: 700; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase;
}
.cart-btn:hover { background: rgba(var(--color-cta-rgb), .08); }
.menu-btn {
  display: none; place-items: center; width: 44px; height: 44px; padding: 0; flex: none;
  background: transparent; border: 1px solid var(--color-primary); border-radius: var(--radius-small);
  color: var(--color-primary);
}
.menu-btn:hover { background: rgba(var(--color-cta-rgb), .08); }
.menu-bars { position: relative; display: block; width: 20px; height: 14px; }
.menu-bars span {
  position: absolute; left: 0; width: 100%; height: 2px; border-radius: 2px; background: currentColor;
  transition: transform .25s ease, opacity .2s ease, top .25s ease;
}
.menu-bars span:nth-child(1) { top: 0; }
.menu-bars span:nth-child(2) { top: 6px; }
.menu-bars span:nth-child(3) { top: 12px; }
.menu-btn[aria-expanded="true"] .menu-bars span:nth-child(1) { top: 6px; transform: rotate(45deg); }
.menu-btn[aria-expanded="true"] .menu-bars span:nth-child(2) { opacity: 0; }
.menu-btn[aria-expanded="true"] .menu-bars span:nth-child(3) { top: 6px; transform: rotate(-45deg); }
.cart-count {
  display: inline-grid; place-items: center; min-width: 1.5rem; height: 1.5rem; padding: 0 .35rem;
  border-radius: 999px; background: var(--color-accent); color: #fff; font-size: .75rem; letter-spacing: 0;
}
.cart-count.bump { animation: bump .35s ease; }
@keyframes bump { 40% { transform: scale(1.3); } }

/* ---------- hero ---------- */
.hero { padding-block: clamp(3rem, 6vw, 5.5rem) var(--space-section); }
.hero .container { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: clamp(2rem, 4vw, 3.5rem); align-items: center; }
.hero h1 { margin-bottom: 1.4rem; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem; margin-top: 2rem; }
.hero-proof { margin-top: 2.6rem; padding-top: 1.4rem; border-top: 1px solid var(--color-border); display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 1.75rem; }
.hero-proof div { display: grid; gap: .15rem; }
.hero-proof strong { font-family: var(--font-heading); font-size: 1.3rem; font-weight: 600; line-height: 1.15; white-space: nowrap; }
.hero-proof span { font-size: .82rem; color: var(--color-text-muted); }

.hero-media { position: relative; margin: 0; }
.hero-media::before {
  content: ""; position: absolute; inset: 10% -5% -8% 6%;
  background: var(--color-surface); border-radius: var(--radius-large);
  z-index: 0;
}
.hero-media .hero-photo {
  position: relative; z-index: 1; width: 100%; aspect-ratio: 5 / 4; object-fit: cover;
  border-radius: var(--radius-large) var(--radius-large) var(--radius-large) var(--radius-large);
  box-shadow: var(--shadow-elevated);
}
.hero-media .hero-seal {
  position: absolute; z-index: 2; left: -7%; bottom: 4%;
  width: clamp(104px, 12vw, 156px); height: auto; aspect-ratio: 1; border-radius: 50%;
  box-shadow: 0 10px 30px -10px rgba(51,40,31,.4); background: #fff;
}
.hero-caption { position: absolute; z-index: 2; right: 0; bottom: -2.2rem; font-size: .8rem; color: var(--color-text-muted); }

/* ---------- motto strip ---------- */
.strip { background: var(--color-surface); border-block: 1px solid var(--color-border); }
.strip ul { list-style: none; margin: 0; padding: 1.1rem var(--layout-gutter); display: flex; justify-content: center; flex-wrap: wrap; gap: .8rem 2.4rem; }
.strip li { font-family: var(--font-body); font-size: var(--text-label); font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-secondary); display: flex; align-items: center; gap: .7rem; white-space: nowrap; }
.strip li::before { content: "♥"; color: var(--color-accent); font-size: .8rem; letter-spacing: 0; }
/* On a phone the four mottos wrap. A 2 by 2 grid, left-aligned inside a centered
   block, keeps every heart in a straight column instead of a ragged row. */
@media (max-width: 860px) {
  .strip ul { display: grid; grid-template-columns: repeat(2, auto); justify-content: center; gap: .85rem 1.75rem; padding-block: 1.25rem; }
  .strip li { letter-spacing: .12em; }
}
@media (max-width: 340px) {
  .strip ul { grid-template-columns: auto; }
}

/* ---------- sections ---------- */
.section { padding-block: var(--space-section); }
.section-head { max-width: 42rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section-head h2 { margin-bottom: 1rem; }
.section-head p { color: var(--color-text-muted); font-size: 1.1rem; }
.section-head--split { max-width: none; display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 2rem; }

/* ---------- menu ---------- */
.menu { background: var(--color-bg); }
.new-pill {
  display: inline-block; vertical-align: middle; margin-left: .5rem;
  font-family: var(--font-body); font-size: .62rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: #fff; background: var(--color-new); padding: .22rem .5rem .18rem; border-radius: 999px;
}
.season-tag { font-family: var(--font-script); font-size: 1.75rem; color: var(--color-secondary); transform: rotate(-2deg); }

.menu-feature { margin-bottom: 3.5rem; }
.menu-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.75rem, 3vw, 2.5rem); align-items: start; }

.product {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-large);
  padding: 0 clamp(1.25rem, 2.4vw, 1.9rem) clamp(1.4rem, 2.4vw, 1.8rem);
  display: flex; flex-direction: column; gap: 1rem;
  box-shadow: var(--shadow-card);
}
.product-media { position: relative; }
.product-photo { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius-medium); }
.product--photo .product-media { margin: .3rem 0 .4rem; }
.thumbs { position: absolute; left: .6rem; bottom: .6rem; display: flex; gap: .4rem; }
.thumb { width: 3.25rem; height: 3.25rem; padding: 0; border: 2px solid #FBF4E7; border-radius: .5rem; overflow: hidden; background: #FBF4E7; cursor: pointer; opacity: .8; box-shadow: 0 2px 8px rgba(0, 0, 0, .25); transition: opacity .2s, border-color .2s; }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb:hover, .thumb[aria-pressed="true"] { opacity: 1; }
.thumb[aria-pressed="true"] { border-color: var(--color-primary); }

/* Painted ribbon header, the way her menu labels each section. */
.ribbon {
  margin: 0 auto; transform: translateY(-1px);
  align-self: center; max-width: min(100%, 30ch);
  display: flex; align-items: center; justify-content: center; gap: .7rem;
  padding: .62rem 1.6rem .58rem;
  background: var(--ribbon, var(--color-primary));
  color: #FBF4E7;
  font-family: var(--font-heading);
  font-size: clamp(1.15rem, 1.8vw, 1.5rem); font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase; line-height: 1.1; text-align: center;
  border-radius: 0 0 var(--radius-medium) var(--radius-medium);
  clip-path: polygon(0 0, 100% 0, 100% 84%, 96% 100%, 78% 90%, 52% 100%, 26% 89%, 5% 99%, 0 85%);
}
.ribbon .hrt { font-family: var(--font-body); font-size: .62em; opacity: .75; flex: none; }
.ribbon-name { display: inline; }
.product:nth-of-type(odd) { --ribbon: var(--color-primary); }
.product:nth-of-type(even) { --ribbon: var(--color-accent); }
.product--feature { --ribbon: var(--color-accent); }

/* Zandra's own handwritten asides, lifted from the menu. */
.note {
  font-family: var(--font-script); font-size: 1.45rem; line-height: 1.15;
  color: var(--color-secondary); margin: 0; transform: rotate(-1.4deg);
  align-self: flex-end; text-align: right; max-width: 22ch;
}

.product--feature {
  padding: 0; flex-direction: row; align-items: stretch; gap: 0; overflow: hidden;
}
.product--feature .product-media { flex: 0 0 46%; }
.product--feature .product-photo { height: 100%; aspect-ratio: auto; border-radius: 0; min-height: 460px; }
.product--feature .thumbs { left: 1rem; bottom: 1rem; }
.product--feature .product-body { padding: 0 clamp(1.5rem, 3vw, 2.5rem) clamp(1.75rem, 3vw, 2.5rem); display: flex; flex-direction: column; gap: 1rem; flex: 1; justify-content: center; }
.product--feature .ribbon { align-self: center; }

.product-head { display: flex; align-items: baseline; justify-content: center; gap: .9rem; flex-wrap: wrap; text-align: center; margin-top: .2rem; }
.product-name { font-size: var(--text-h3); font-weight: 600; margin: 0; flex: 0 1 auto; min-width: 0; overflow-wrap: break-word; }
.product--feature .product-name { font-size: clamp(2rem, 3vw, 2.6rem); }
.product-leader { flex: 1; border-bottom: 1px dotted var(--color-wheat); transform: translateY(-.45em); min-width: 1.5rem; }
.product-price { margin: 0; flex: none; text-align: center; line-height: 1.25; }
.product-price strong { font-family: var(--font-heading); font-size: 1.85rem; font-weight: 600; }
.product-price span { display: block; font-size: .78rem; color: var(--color-text-muted); letter-spacing: .06em; text-transform: uppercase; }
.product-blurb { margin: 0; color: var(--color-text-muted); text-align: center; }

.flavors { border: 0; margin: .25rem 0 0; padding: 0; }
.flavors legend { font-size: var(--text-label); font-weight: var(--weight-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-secondary); padding: 0; margin-bottom: .7rem; }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.chip span {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .42rem .85rem; border: 1px solid var(--color-rule); border-radius: 999px;
  font-size: .9rem; font-weight: 600; color: var(--color-text); background: #FEFAF2;
  transition: background .15s, border-color .15s, color .15s;
}
.chip:hover span { border-color: var(--color-wheat); }
.chip input:checked + span { background: var(--color-primary); border-color: var(--color-primary); color: #FBF7EF; }
.chip input:focus-visible + span { outline: 2px solid var(--color-cornflower); outline-offset: 2px; }
.chip .new-pill { margin-left: 0; font-size: .55rem; padding: .16rem .4rem .12rem; }
.chip input:checked + span .new-pill { background: #FBF4E7; color: var(--color-new); }
.chip small { font-weight: 500; color: var(--color-text-muted); }
.chip input:checked + span small { color: rgba(251,247,239,.75); }

.product-actions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: .4rem; }
.stepper { display: inline-flex; align-items: center; border: 1px solid var(--color-rule); border-radius: var(--radius-small); background: #FEFAF2; }
.stepper button { width: 2.5rem; height: 2.75rem; border: 0; background: transparent; font-size: 1.2rem; color: var(--color-secondary); }
.stepper button:hover { background: var(--color-surface); }
.stepper output { min-width: 2.2rem; text-align: center; font-weight: 700; }
.add-btn { flex: 1; min-width: 12rem; }
.add-btn.added { background: var(--color-secondary); }

/* ---------- her menu poster ---------- */
.poster { background: var(--color-surface-deep); border-block: 1px solid var(--color-border); }
.poster .container { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.poster-copy h2 { margin-bottom: 1rem; }
.poster-copy .note { align-self: flex-start; text-align: left; max-width: none; margin-top: 1.5rem; transform: rotate(-1deg); }
.poster-figure { margin: 0; }
.poster-figure img {
  width: 100%; border-radius: var(--radius-medium);
  border: 1px solid var(--color-border); box-shadow: var(--shadow-elevated);
}
.poster-figure figcaption { margin-top: .9rem; font-size: .85rem; color: var(--color-text-muted); text-align: center; }

/* heart rule used between sections, as on her menu */
.hearts { display: flex; align-items: center; justify-content: center; gap: .8rem; color: var(--color-accent); font-size: .8rem; }
.hearts::before, .hearts::after { content: ""; height: 1px; width: clamp(2rem, 8vw, 6rem); background: var(--color-rule); }

@media (max-width: 860px) {
  .poster .container { grid-template-columns: 1fr; }
  .poster-figure { order: -1; }
}

/* ---------- touch sizing ----------
   Fingers, not cursors: the flavor chips are the control people use most, so
   they get the 44px minimum. Long product names also need a smaller ribbon on
   a narrow screen, otherwise "Brown Butter Pumpkin Oatmeal Cream Pies" stacks
   five lines deep. */
@media (pointer: coarse), (max-width: 860px) {
  .chip span { min-height: 44px; padding-inline: 1rem; }
  .stepper button { width: 3rem; height: 3rem; }
  .new-pill { font-size: .68rem; padding: .28rem .55rem .24rem; }
  .contact-list a, .site-footer a { display: inline-block; padding-block: .35rem; }
  .section-head a[href^="tel:"] { display: inline-block; padding-block: .3rem; }
  .btn-link { display: inline-block; padding-block: .72rem; }
}
@media (max-width: 620px) {
  .ribbon { font-size: clamp(1rem, 4.4vw, 1.2rem); padding-inline: 1.1rem; letter-spacing: .06em; }
}

/* ---------- how it works ---------- */
.how { background: var(--color-surface); border-block: 1px solid var(--color-border); }
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem; counter-reset: step; }
.steps li { position: relative; padding-top: 1rem; border-top: 1px solid var(--color-wheat); }
.steps li::before {
  counter-increment: step; content: "0" counter(step);
  display: block; font-family: var(--font-heading); font-size: 3rem; font-weight: 500; line-height: 1; color: var(--color-accent); margin-bottom: 1rem;
}
.steps h3 { margin-bottom: .5rem; }
.steps p { color: var(--color-text-muted); margin: 0; }
.how-aside { margin-top: 3rem; display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }

/* ---------- story ---------- */
.story { position: relative; min-height: 0; display: flex; align-items: center; background: var(--color-olive-deep); isolation: isolate; padding-block: var(--space-section); }
.story-card {
  max-width: 640px; background: var(--color-bg); padding: clamp(2rem, 4vw, 3.25rem);
  border-radius: var(--radius-medium); box-shadow: var(--shadow-elevated);
  margin-block: 0;
}
.story-card h2 { margin-bottom: 1.25rem; }
.story-card p { color: var(--color-text); }
.signoff { font-family: var(--font-script); font-size: 1.9rem; color: var(--color-secondary); margin: .25rem 0 0; transform: rotate(-1.5deg); }
.mottos { margin: 1.5rem 0 0; padding: 1.25rem 0 0; border-top: 1px solid var(--color-border); list-style: none; display: grid; gap: .5rem; }
.mottos li { font-family: var(--font-script); font-size: 1.5rem; color: var(--color-secondary); }
.mottos li::before { content: "“"; color: var(--color-pumpkin); margin-right: .1rem; }
.mottos li::after { content: "”"; color: var(--color-pumpkin); margin-left: .1rem; }

/* Family photo beside the story. The figure stays hidden until
   images/family.jpg exists, so a missing file never shows a broken icon. */
.story-grid { display: grid; grid-template-columns: minmax(0, 1fr); }
.story-grid:has(.family:not([hidden])) { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.family { margin: 0; }
.family img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
  border-radius: var(--radius-medium);
  border: 6px solid #FBF4E7;
  box-shadow: var(--shadow-elevated);
  transform: rotate(-1.6deg);
}
.family figcaption {
  font-family: var(--font-script); font-size: 1.35rem; color: #FBF4E7;
  text-align: center; margin-top: 1rem; transform: rotate(-1deg);
  text-shadow: 0 1px 6px rgba(45,54,37,.65);
}
@media (max-width: 860px) {
  .story-grid:has(.family:not([hidden])) { grid-template-columns: 1fr; gap: 2rem; }
  /* Show the whole family. Cropping this portrait photo to a landscape box
     cut the top and bottom off the picture. */
  .family img { aspect-ratio: auto; height: auto; }
  .family { max-width: 420px; margin-inline: auto; }
}

/* ---------- reviews ---------- */
.reviews-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; align-items: start; }
.quote { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-medium); padding: 2rem 1.9rem 1.7rem; position: relative; }
.quote::before { content: "“"; position: absolute; top: -.2rem; left: 1.3rem; font-family: var(--font-heading); font-size: 5rem; line-height: 1; color: var(--color-pumpkin); opacity: .55; }
.quote p { margin: 1.2rem 0 1.2rem; font-size: 1.05rem; }
.quote cite { font-style: normal; font-weight: 700; font-size: .85rem; letter-spacing: .06em; color: var(--color-secondary); }
.quote cite span { display: block; font-weight: 500; letter-spacing: 0; color: var(--color-text-muted); }
.reviews-grid .quote:nth-child(2) { margin-top: 2.5rem; }
.reviews-grid .quote:nth-child(3) { margin-top: 5rem; }

/* ---------- contact ---------- */
.contact { background: var(--color-surface); border-top: 1px solid var(--color-border); }
.contact .container { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.contact h2 { margin-bottom: 1.2rem; max-width: 21ch; }
.contact-list { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--color-border); }
.contact-list li { display: grid; grid-template-columns: 8rem 1fr; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--color-border); align-items: baseline; }
.contact-list .k { font-size: var(--text-label); font-weight: var(--weight-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-secondary); }
.contact-list a { font-family: var(--font-heading); font-size: 1.45rem; font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.contact-list a:hover { color: var(--color-primary); }
.contact-list .v { font-family: var(--font-heading); font-size: 1.45rem; font-weight: 600; overflow-wrap: anywhere; }
.contact-logo { display: grid; place-items: center; }
.contact-logo img { width: min(100%, 420px); border-radius: 50%; box-shadow: var(--shadow-card); }

/* ---------- footer ---------- */
.site-footer { background: var(--color-olive-deep); color: rgba(251,244,231,.84); padding-block: 3.5rem 2rem; font-size: .92rem; }
.site-footer .container { display: grid; grid-template-columns: 1.2fr .8fr 1.4fr; gap: 3rem; }
.site-footer h4 { font-family: var(--font-heading); color: #FBF7EF; font-size: 1.6rem; font-weight: 600; margin-bottom: .4rem; }
.site-footer .tag { font-family: var(--font-script); font-size: 1.4rem; color: rgba(251,244,231,.78); text-wrap: balance; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.site-footer a { color: inherit; text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.footer-label { font-size: var(--text-label); font-weight: var(--weight-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-wheat); margin-bottom: .8rem; }
.notice { font-size: .82rem; line-height: 1.55; color: rgba(251,247,239,.68); }
.footer-bottom { grid-column: 1 / -1; border-top: 1px solid rgba(251,247,239,.14); padding-top: 1.2rem; margin-top: 1rem; display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem; font-size: .82rem; color: rgba(251,247,239,.6); }

/* ---------- cart drawer ---------- */
.overlay { position: fixed; inset: 0; background: rgba(51,40,31,.4); opacity: 0; pointer-events: none; transition: opacity .3s; z-index: 50; }
.overlay.show { opacity: 1; pointer-events: auto; }
.cart-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(440px, 100%); z-index: 60;
  background: var(--color-bg); box-shadow: var(--shadow-elevated);
  transform: translateX(105%); transition: transform .35s cubic-bezier(.2,.8,.2,1);
  display: flex; flex-direction: column;
}
.cart-drawer.open { transform: none; }
.cart-head { display: flex; align-items: center; justify-content: space-between; padding: 1.25rem var(--layout-gutter); border-bottom: 1px solid var(--color-border); }
.cart-head h2 { font-size: 1.8rem; }
.icon-btn { background: transparent; border: 0; font-size: 1.6rem; line-height: 1; color: var(--color-text-muted); padding: .25rem .5rem; }
.icon-btn:hover { color: var(--color-text); }
.cart-body { flex: 1; overflow: auto; padding: .5rem var(--layout-gutter); }
.cart-empty { padding: 3rem 0; text-align: center; color: var(--color-text-muted); }
.cart-empty .italic { display: block; margin-bottom: .5rem; }
.cart-line { display: grid; grid-template-columns: 1fr auto; gap: .4rem 1rem; padding: 1.1rem 0; border-bottom: 1px solid var(--color-border); }
.cart-line-name { font-family: var(--font-heading); font-size: 1.25rem; font-weight: 600; line-height: 1.15; }
.cart-line-flavor { font-size: .9rem; color: var(--color-text-muted); }
.cart-line-total { font-family: var(--font-heading); font-size: 1.25rem; font-weight: 600; text-align: right; }
.cart-line-controls { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; margin-top: .3rem; }
.cart-line .stepper button { height: 2.2rem; width: 2.2rem; }
.remove-btn { background: transparent; border: 0; font-size: .82rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-muted); text-decoration: underline; text-underline-offset: 3px; }
.remove-btn:hover { color: var(--color-accent); }
.cart-foot { padding: 1.25rem var(--layout-gutter) 1.5rem; border-top: 1px solid var(--color-border); background: var(--color-surface); }
.cart-subtotal { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 1rem; }
.cart-subtotal strong { font-family: var(--font-heading); font-size: 1.7rem; font-weight: 600; }
.cart-foot .btn { width: 100%; }
.cart-note { font-size: .84rem; color: var(--color-text-muted); margin: .9rem 0 0; text-align: center; }
.cart-msg { display: none; margin: 0 0 1rem; padding: .9rem 1rem; background: #fff; border: 1px solid var(--color-accent); border-radius: var(--radius-small); font-size: .92rem; }
.cart-msg.show { display: block; }

/* checkout details, the step between the box and the Venmo page */
.cart-details { padding-top: 1.25rem; padding-bottom: 1.25rem; }
.details-intro { font-size: .95rem; color: var(--color-text-muted); margin-bottom: 1.35rem; }
.field { margin-bottom: 1.2rem; }
.field label { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: .35rem; font-size: .95rem; font-weight: 700; }
.field .opt { font-size: var(--text-label); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--color-text-muted); }
.field input, .field textarea {
  width: 100%; min-height: 3rem; padding: .7rem .85rem;
  font: inherit; font-size: 1rem; color: var(--color-text);
  background: #FEFAF2; border: 1px solid var(--color-rule); border-radius: var(--radius-small);
}
.field textarea { min-height: 5.5rem; line-height: 1.5; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: #A08B72; }
.field input:focus, .field textarea:focus { outline: 2px solid var(--color-primary); outline-offset: 1px; border-color: var(--color-primary); }
.field [aria-invalid="true"] { border-color: var(--color-new); background: #FFF7F2; }
.field-hint { margin: .35rem 0 0; font-size: .84rem; color: var(--color-text-muted); }
.field-error { margin: .35rem 0 0; font-size: .88rem; font-weight: 700; color: var(--color-new); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.back-btn { display: block; margin: .7rem auto 0; padding: .45rem .6rem; background: transparent; border: 0; font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-muted); text-decoration: underline; text-underline-offset: 3px; }
.back-btn:hover { color: var(--color-text); }

/* toast */
.toast {
  position: fixed; left: 50%; bottom: 1.5rem; transform: translate(-50%, 20px); z-index: 70;
  background: var(--color-secondary); color: #FBF7EF; padding: .8rem 1rem .8rem 1.25rem; border-radius: 999px;
  display: flex; align-items: center; gap: 1rem; box-shadow: var(--shadow-elevated);
  opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; font-size: .95rem;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.toast button { background: #FBF7EF; color: var(--color-secondary); border: 0; border-radius: 999px; padding: .4rem .9rem; font-weight: 700; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; }

/* reveal on scroll */
.reveal { opacity: 0; transform: translateY(var(--reveal-distance)); transition: opacity var(--reveal-duration) ease, transform var(--reveal-duration) ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .cart-drawer, .overlay, .toast, .site-nav, .menu-bars span { transition: none; }
}

/* ---------- responsive ---------- */
@media (max-width: 1180px) {
  .reviews-grid { grid-template-columns: 1fr 1fr; }
  .reviews-grid .quote:nth-child(3) { margin-top: 0; grid-column: 1 / -1; }
  .site-footer .container { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  .brand { margin-right: auto; }
  .site-header .container { gap: .6rem; }
  .cart-btn { order: 1; }
  .menu-btn { display: inline-grid; order: 2; }
  .site-nav {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; gap: 0;
    padding: .25rem var(--layout-gutter) 1rem;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    box-shadow: 0 18px 30px -18px rgba(59,42,28,.35);
    opacity: 0; visibility: hidden; transform: translateY(-6px); pointer-events: none;
    transition: opacity .22s ease, transform .22s ease, visibility 0s linear .22s;
  }
  .site-nav.open {
    opacity: 1; visibility: visible; transform: none; pointer-events: auto;
    transition: opacity .22s ease, transform .22s ease, visibility 0s;
  }
  .site-nav a {
    display: flex; align-items: center; justify-content: space-between;
    padding-block: .95rem; border-bottom: 1px solid var(--color-border);
    font-family: var(--font-heading); font-size: 1.4rem; font-weight: 600; color: var(--color-text);
  }
  .site-nav a:last-child { border-bottom: 0; }
  .site-nav a::after { content: "♥"; font-family: var(--font-body); font-size: .75rem; color: var(--color-accent); opacity: .7; }
  /* On a phone the headline and the menu button come first. The photo sits
     under them, wider and shorter, so the first screen is not one giant crust.
     The decorative shape and the seal are dropped: the shape hung off the right
     edge, the seal covered the caption, and the logo is already in the header. */
  .hero .container { grid-template-columns: 1fr; }
  .hero-media { order: 0; margin: 2.5rem auto 0; max-width: 560px; }
  .hero-media .hero-photo { aspect-ratio: 3 / 2; }
  /* Sized so the headline holds two lines on a phone, same as on desktop. */
  h1.caps { font-size: clamp(1.45rem, 6.3vw, 2.1rem); }
  .hero-media::before { display: none; }
  .hero-media .hero-seal { display: none; }
  .hero-caption { position: static; display: block; margin-top: .9rem; text-align: right; }
  .menu-grid { grid-template-columns: 1fr; }
  .product--feature { flex-direction: column; }
  .product--feature .product-photo { min-height: 0; aspect-ratio: 4 / 3; }
  .product--feature .product-body { padding: 1.5rem; }
  .steps { grid-template-columns: 1fr; gap: 2rem; }
  .story-card { margin-block: 0; }
  .contact .container { grid-template-columns: 1fr; }
  .contact-logo { order: -1; }
  .contact-logo img { width: min(100%, 260px); }
  .section-head--split { grid-template-columns: 1fr; align-items: start; }
}
@media (max-width: 560px) {
  .brand span { display: none; }
  .thumbs { gap: .35rem; }
  .thumb { width: 2.6rem; height: 2.6rem; }
  .contact-list a, .contact-list .v { font-size: 1.2rem; }
  .hero-proof { grid-template-columns: 1fr; gap: 1.1rem; }
  .hero-proof strong { white-space: normal; }
  .reviews-grid { grid-template-columns: 1fr; }
  .reviews-grid .quote:nth-child(2) { margin-top: 0; }
  .site-footer .container { grid-template-columns: 1fr; gap: 2rem; }
  .contact-list li { grid-template-columns: 1fr; gap: .2rem; }
  .product-head { flex-wrap: wrap; }
  .product-leader { display: none; }
  /* Stack the quantity control above a full-width Add button. Side by side,
     the bigger touch-sized stepper squeezed the button and clipped its label. */
  .product-actions { display: grid; grid-template-columns: 1fr; gap: .75rem; }
  .stepper { justify-self: start; }
  .add-btn { min-width: 0; width: 100%; }
}

/* ---------- phone hero: her logo leads ----------
   On a phone the first thing anyone sees is Zandra's wreath logo, big and
   centered, with the headline and button stacked beneath it. It sits in a round
   seal with a cream ring, the same treatment as the seal on the desktop photo.
   The image is scaled up a touch inside the circle to crop the thin dark line
   along the left edge of the logo file. The small header logo stays hidden
   while the big one is on screen and fades in once it scrolls away. */
.hero-logo { display: none; }
@media (max-width: 860px) {
  .hero { padding-top: 1rem; }
  .hero-copy { text-align: center; }
  .hero-logo {
    display: block; width: min(62vw, 250px); aspect-ratio: 1; margin: .6rem auto 1.6rem;
    border-radius: 50%; overflow: hidden; background: #FBF9F4;
    box-shadow: 0 0 0 7px rgba(251, 244, 231, .8), 0 0 0 8px var(--color-border), 0 24px 46px -22px rgba(59, 42, 28, .55);
    animation: logo-in .9s cubic-bezier(.2, .7, .2, 1) both;
  }
  .hero-logo img { width: 104%; max-width: none; height: 104%; margin: -2%; object-fit: cover; }
  .hero .eyebrow { justify-content: center; letter-spacing: .12em; text-wrap: balance; }
  .hero .eyebrow::before { display: none; }
  .hero h1 { margin-bottom: 1rem; }
  .hero .lede { margin-inline: auto; font-size: 1.08rem; max-width: 30rem; text-wrap: balance; }
  .hero-actions { justify-content: center; margin-top: 1.5rem; }
  .hero-proof { justify-content: center; text-align: center; margin-top: 2.2rem; }
  .hero-proof div { justify-items: center; }
  .hero-caption { text-align: center; }
  .site-header .brand { transition: opacity .35s ease, transform .35s ease; }
  .site-header.logo-up .brand { opacity: 0; transform: translateY(-4px); pointer-events: none; }
}
@keyframes logo-in { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .hero-logo { animation: none; }
  .site-header .brand { transition: none; }
}