/* ============================================
   Pages — Page-specific section layouts
   ============================================ */

/* --- Story layout (brand story: text + visual) --- */
.story-layout {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--space-3xl);
  align-items: center;
}

.story-layout__content p {
  color: var(--text-secondary);
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
}

/* The buttons were inline-block with only a text space between them, so a
   stacked pair (e.g. Events "Follow on Facebook"/"Follow on Instagram") sat
   almost flush. Flex + gap gives them real separation in both directions. */
.story-layout__actions {
  margin-top: var(--space-xl);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
}

.story-layout__visual .media-placeholder { min-height: 320px; }
.story-layout__visual img {
  width: 100%;
  height: 100%;
  max-height: 460px;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.story-layout--reverse .story-layout__visual { order: -1; }
@media (max-width: 768px) { .story-layout--reverse .story-layout__visual { order: 0; } }

/* --- Why Choose Us pillars --- */
.pillars-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-xl);
}

.pillar {
  text-align: center;
  padding: var(--space-xl);
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.pillar:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }

.pillar__icon {
  width: 64px;
  height: 64px;
  margin: 0 auto var(--space-lg);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(190, 38, 38, 0.08);
  color: var(--brand);
}
.pillar__icon .material-icons-outlined { font-size: 1.9rem; }

.pillar__title { font-size: var(--text-xl); margin-bottom: var(--space-sm); }

.pillar__text {
  color: var(--text-secondary);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
}

/* --- Responsive YouTube / video embed (16:9) --- */
.video-embed {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  background: var(--ink-deep);
}

.video-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* --- Card grid (recipes, generic) --- */
.card-grid { display: grid; gap: var(--space-2xl); }
.card-grid--3 { grid-template-columns: repeat(3, 1fr); }
.card-grid--2 { grid-template-columns: repeat(2, 1fr); }

/* --- Recipe card ---
   OG cards are FLAT and borderless: photo with a red badge/pill overlay, bold
   title, red meta lines, and a full-width red-outline VIEW RECIPE pill. */
.recipe-card {
  display: flex;
  flex-direction: column;
  background: transparent;
  color: inherit;
  transition: transform var(--transition-base);
}

.recipe-card:hover { transform: translateY(-4px); color: inherit; }

.recipe-card__body { padding: var(--space-lg) 0 0; flex: 1; display: flex; flex-direction: column; }

.recipe-card__title {
  font-size: var(--text-xl);
  margin-bottom: var(--space-xs);
}

.recipe-card__meta {
  /* Live meta lines are red sentence case ("Dinner, Holiday" / "Cook Time: 180m") */
  font-size: var(--text-sm);
  color: var(--brand);
  font-weight: 600;
}

.recipe-card__media {
  position: relative;
  min-height: 200px;
  overflow: hidden;
  background: var(--sand);
  border-radius: var(--radius-md);
}
.recipe-card__media img {
  width: 100%;
  height: 240px;
  object-fit: cover;
  display: block;
  transition: transform var(--transition-slow);
}
.recipe-card:hover .recipe-card__media img { transform: scale(1.04); }

/* Marker-font badge, top-center on the photo ("NEW RECIPE" / "FEATURED RECIPE") */
.recipe-card__badge {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  background: var(--brand);
  color: #fff;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  line-height: 1;
  letter-spacing: 0.03em;
  padding: 0.55rem 1.1rem 0.45rem;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  white-space: nowrap;
}

/* Category pill, top-right on the photo ("Duck", "Goose", "Loong Kong Chicken") */
.recipe-card__pill {
  position: absolute;
  top: var(--space-sm);
  right: var(--space-sm);
  background: var(--brand);
  color: #fff;
  font-size: var(--text-xs);
  font-weight: 600;
  padding: 0.3rem 0.9rem;
  border-radius: var(--radius-full);
}

/* Full-width outline pill below the card copy.
   These were three overlapping rules that fought each other: the `margin-top: auto`
   meant to pin the button to the card bottom was overridden by the equal-specificity
   rule after it, so only its stray `padding-top: 0` took effect — which stripped the
   pill's top padding and pushed "VIEW RECIPE" to the top of the button. Collapsed to
   one rule; the button keeps .btn's own symmetric padding so the label sits centred. */
.recipe-card__btn { display: block; width: 100%; margin-top: var(--space-md); }

/* Recipe toolbar — search left, dropdown filters right (live design) */
.recipe-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  margin-bottom: var(--space-2xl);
}
.recipe-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-lg);
}
/* Inside the toolbar the search keeps input + button on one line (live layout);
   the standalone .recipe-search margin would double the toolbar's own spacing. */
.recipe-toolbar .recipe-search {
  flex: 0 1 auto;
  flex-wrap: nowrap;
  margin-bottom: 0;
}
.recipe-toolbar .recipe-search__input { flex: 0 1 24rem; }
.recipe-filter__select {
  min-width: 190px;
  padding: 0.55rem 0.75rem;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-secondary);
  background: var(--white);
  border: none;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  cursor: pointer;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}
.recipe-filter__select:hover { border-bottom-color: var(--brand); color: var(--brand-deep); }
@media (max-width: 640px) {
  .recipe-toolbar { flex-direction: column; align-items: stretch; }
  .recipe-filters { flex-direction: column; }
  .recipe-filter__select { min-width: 0; width: 100%; }
  /* nowrap + a 24rem basis overflows a 375px viewport; let the row wrap again */
  .recipe-toolbar .recipe-search { flex-wrap: wrap; }
  .recipe-toolbar .recipe-search__input { flex: 1 1 100%; }
}
.recipe-card.is-hidden { display: none; }

/* Recipe detail page */
.recipe__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-lg);
  justify-content: center;
  margin-top: var(--space-lg);
}
.recipe__meta li {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}
.recipe__meta .material-icons-outlined { font-size: 1.15rem; color: var(--brand); }
.recipe__image {
  width: 100%;
  max-height: 460px;
  object-fit: cover;
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-2xl);
  box-shadow: var(--shadow-md);
}
.recipe__back { margin-top: var(--space-2xl); text-align: center; }

/* Prose — long-form body copy (recipes, legal, content) */
.prose { color: var(--text-secondary); font-size: var(--text-body); line-height: var(--leading-normal); }
.prose h2 { font-size: var(--text-2xl); color: var(--text-primary); margin: var(--space-2xl) 0 var(--space-md); }
.prose h3 { font-size: var(--text-xl); color: var(--text-primary); margin: var(--space-xl) 0 var(--space-sm); }
.prose h4 { font-size: var(--text-lg); color: var(--text-primary); margin: var(--space-lg) 0 var(--space-xs); }
.prose p { margin-bottom: var(--space-md); }
.prose ul, .prose ol { margin: 0 0 var(--space-lg) var(--space-xl); }
.prose ul li { list-style: disc; margin-bottom: var(--space-xs); }
.prose ol li { list-style: decimal; margin-bottom: var(--space-sm); }
.prose strong { color: var(--text-primary); }
.prose a { color: var(--brand-deep); text-decoration: underline; }
/* Inline links in card body copy need a non-colour cue too (WCAG 1.4.1) —
   brand red against --text-secondary is only 1.37:1, well under the 3:1 axe
   requires for colour-only differentiation. Same treatment as .prose a. */
.feature-card__text a { color: var(--brand-deep); text-decoration: underline; }
.recipe__body ol li { margin-bottom: var(--space-md); padding-left: var(--space-xs); }

/* Testimonials */
.testimonial {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  box-shadow: var(--shadow-sm);
}
.testimonial__quote {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
  margin: 0;
}
/* Attributions in the red marker caps ("– DANIEL V."), matching live */
.testimonial__cite {
  margin-top: var(--space-md);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--brand);
  font-style: normal;
}
/* Lead cell of the carousel row: a white card holding the eyebrow + heading */
.testimonial--lead { justify-content: center; }
.testimonial--lead h2 { color: var(--text-primary); font-size: var(--text-2xl); margin: 0; }
.testimonial--lead h2 .kw { color: var(--brand); }
.section--red .testimonial--lead h2 { color: var(--text-primary); }
.section--red .testimonial--lead h2 .kw { color: var(--brand); }

/* --- Store locator (where-to-buy) — mirrors the original Stockist widget:
       list + filters on the left, map on the right --- */
.locator {
  display: grid;
  grid-template-columns: 400px 1fr;
  grid-template-rows: auto auto 1fr;
  grid-template-areas:
    "toolbar map"
    "status  map"
    "list    map";
  column-gap: var(--space-lg);
  align-items: stretch;
}
.locator__toolbar { grid-area: toolbar; display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-bottom: var(--space-xs); }
.locator__status { grid-area: status; }
.locator__list { grid-area: list; }
.locator__map { grid-area: map; }
.locator__geo .material-icons-outlined { font-size: 16px; vertical-align: -3px; margin-right: 4px; }
.locator__select {
  flex: 1 1 140px;
  padding: 0.45rem 0.6rem;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--text-primary);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.locator__status { min-height: 1.2em; font-size: var(--text-xs); color: var(--text-light); margin: 0 0 var(--space-xs); }
.locator__list {
  min-height: 0;
  max-height: 600px;
  overflow-y: auto;
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
}
.locator__cityhead {
  position: sticky;
  top: 0;
  z-index: 1;
  margin: 0;
  padding: var(--space-xs) var(--space-md);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--brand-deep);
  background: var(--cream);
  border-bottom: 1px solid var(--border-light);
}
.locator__item {
  display: flex;
  gap: var(--space-sm);
  padding: var(--space-md);
  border-bottom: 1px solid var(--border-light);
  cursor: pointer;
}
.locator__item:hover, .locator__item.is-selected { background: #fdf6f6; }
.locator__pin {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  padding: 0;
  margin-top: 2px;
  border: none;
  background: transparent;
  color: var(--brand);
  cursor: pointer;
}
.locator__pin .material-icons-outlined { font-size: 20px; }
.locator__body { min-width: 0; }
.locator__name { font-weight: 600; margin: 0; color: var(--brand); }
.locator__name a { color: var(--brand); }
.locator__name a:hover { text-decoration: underline; }
.locator__dist {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--text-light);
  margin-left: 6px;
  white-space: nowrap;
}
.locator__addr { font-size: var(--text-sm); color: var(--text-secondary); margin: 2px 0 0; }
.locator__links { font-size: var(--text-xs); margin: 4px 0 0; }
.locator__links a { color: var(--brand-deep); text-decoration: underline; }
.locator__products { font-size: var(--text-xs); color: var(--text-light); margin: 4px 0 0; }
.locator__map {
  min-height: 600px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-light);
  z-index: 0;
}
html:not(.js) .js-only { display: none; }
/* Map library failed to load → hide the box, let the list breathe */
.locator--no-map {
  grid-template-columns: 1fr;
  grid-template-areas: "toolbar" "status" "list";
}
.locator--no-map .locator__list { max-height: none; }

/* Filter empty states (recipes index + locator) */
.filter-empty {
  text-align: center;
  padding: var(--space-2xl) var(--space-lg);
  color: var(--text-secondary);
  margin: 0;
}
.filter-empty__reset {
  border: none;
  background: none;
  padding: 0;
  font: inherit;
  color: var(--brand-deep);
  text-decoration: underline;
  cursor: pointer;
}
.filter-empty__reset:hover { color: var(--brand); }

/* Touch hint overlay — two-finger pan (see store-locator.js) */
.locator__hint {
  position: absolute;
  inset: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(32, 39, 44, 0.55);
  color: #fff;
  font-weight: 600;
  text-align: center;
  padding: var(--space-lg);
  border-radius: var(--radius-md);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.locator__hint.is-visible { opacity: 1; }

@media (max-width: 900px) {
  /* Task-first order on mobile: controls, then map, then results */
  .locator {
    grid-template-columns: 1fr;
    grid-template-areas: "toolbar" "status" "map" "list";
  }
  .locator__map { min-height: 380px; margin-bottom: var(--space-md); }
  .locator__list { max-height: 420px; }
}

/* Recipe title — the live recipe pages use the red script display font on white */
.hero--recipe .hero__title {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--brand);
  font-size: clamp(2.4rem, 5vw, 3.4rem);
}
.hero--recipe .hero__content { max-width: 720px; margin: 0 auto; text-align: center; }

/* --- Farm Store page — live-design components --- */
.subhead-caps {
  text-align: center;
  font-size: var(--text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-primary);
  margin: 0 0 var(--space-xl);
}

/* Red product cards with the site's custom white line-art icons */
.product-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}
.product-card {
  background: var(--brand);
  border-radius: var(--radius-md);
  padding: var(--space-xl);
  color: #fff;
}
.product-card__icon {
  display: block;
  width: 84px;
  height: 84px;
  margin: 0 auto var(--space-md);
  background-color: #fff;
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}
.product-card__icon--font {
  -webkit-mask: none;
  mask: none;
  background: none;
  color: #fff;
  font-size: 72px;
  text-align: center;
  line-height: 84px;
}
.product-card__title {
  font-size: var(--text-base);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #fff;
  margin-bottom: var(--space-sm);
}
.product-card__text {
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: rgba(255, 255, 255, 0.94);
  margin: 0;
}
@media (max-width: 1024px) { .product-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .product-grid { grid-template-columns: 1fr; } }

/* Deal tiles — the physical store's promo board (photo bg + pill + heading) */
.deals-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}
.deal-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-md);
  aspect-ratio: 5 / 6;
  padding: var(--space-xl);
  border-radius: var(--radius-md);
  background-size: cover;
  background-position: center;
  overflow: hidden;
  text-align: center;
  color: #fff;
}
.deal-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(20, 24, 28, 0.35);
}
.deal-tile--light::before { background: rgba(255, 255, 255, 0.15); }
.deal-tile--light { color: var(--text-primary); }
.deal-tile > * { position: relative; }
.deal-tile__pill {
  background: var(--brand);
  color: #fff;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0.35rem 1.1rem;
  border-radius: var(--radius-full);
}
.deal-tile__heading {
  font-size: var(--text-2xl);
  font-weight: 700;
  line-height: var(--leading-tight);
  max-width: 260px;
}
.deal-tile__heading em { font-style: normal; color: var(--brand); }
.deal-tile__cta {
  margin-top: auto;
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-decoration: underline;
}
.deal-tile:hover .deal-tile__cta { color: var(--brand); }
.deal-tile--light:hover .deal-tile__cta { color: var(--brand-deep); }
@media (max-width: 900px) { .deals-grid { grid-template-columns: 1fr; } .deal-tile { aspect-ratio: 16 / 10; } }

/* Google Maps embed (store location) */
.map-embed {
  margin-top: var(--space-2xl);
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--border-light);
}
.map-embed iframe {
  display: block;
  width: 100%;
  height: 420px;
  border: 0;
}

/* Outlined info cards (store contact + hours) */
.outline-cards { max-width: 620px; margin: 0 auto; display: grid; gap: var(--space-lg); }
.outline-card {
  border: 1px solid var(--brand);
  border-radius: var(--radius-sm);
  padding: var(--space-lg) var(--space-xl);
  background: var(--white);
}
.outline-card__title {
  font-size: var(--text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding-bottom: var(--space-sm);
  margin-bottom: var(--space-md);
  border-bottom: 2px solid var(--brand);
}
.outline-card p { margin: 0 0 var(--space-xs); font-size: var(--text-sm); color: var(--text-secondary); }
.outline-card a { color: var(--brand-deep); }

/* Store interior photo strip */
/* Matches the live gallery exactly (measured 2026-08-29 at 2048px): a top row
   of two 3:2 images spanning half the content width each, then a row of four
   squares. */
.store-gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-lg);
}
.store-gallery img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius-md);
}
.store-gallery img.store-gallery__wide {
  grid-column: span 2;
  aspect-ratio: 3 / 2;
}
@media (max-width: 900px) {
  .store-gallery { grid-template-columns: repeat(2, 1fr); }
  .store-gallery img.store-gallery__wide { grid-column: span 2; }
}

/* FAQ accordion (native details/summary — no JS) */
.faq-accordion details { border-bottom: 1px solid var(--border); }
.faq-accordion summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md) 0;
  font-weight: 700;
  color: var(--text-primary);
  cursor: pointer;
  list-style: none;
}
.faq-accordion summary::-webkit-details-marker { display: none; }
.faq-accordion summary::after {
  content: "+";
  font-size: var(--text-xl);
  font-weight: 400;
  color: var(--text-primary);
  transition: transform var(--transition-fast);
  flex: 0 0 auto;
}
.faq-accordion details[open] summary::after { transform: rotate(45deg); }
.faq-accordion details > p,
.faq-accordion details > ul {
  margin: 0 0 var(--space-md);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
}
.faq-accordion details > ul { padding-left: 1.25rem; }
.faq-accordion details a { color: var(--brand-deep); text-decoration: underline; }

/* Card flush to the band's leading edge — the live "Let's keep in touch."
   pattern (measured 2026-08-29: 896px card, 46% of the 1948px band, x flush
   with the band's left edge). */
.photo-band--flush > .container {
  max-width: 100%;
  padding-left: 0;
  padding-right: 0;
}
.photo-band--flush .photo-band__card {
  max-width: 46%;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
@media (max-width: 900px) {
  .photo-band--flush .photo-band__card { max-width: 100%; border-radius: var(--radius-md); }
}

/* --- Newsletter sign-up (Farm Store list; partials/newsletter.njk) --- */
.newsletter-form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}
.newsletter-form__input {
  flex: 1 1 240px;
  padding: 0.75rem 1.1rem;
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--text-primary);
  background: var(--white);
  /* Was border:none — a white field on a white card, so the input was invisible
     until focused. Worse on mobile now the card chrome is gone. */
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
}
.newsletter-form__input:focus-visible { border-color: var(--brand); }
.newsletter-form__note {
  font-size: var(--text-xs);
  margin-top: var(--space-sm);
  opacity: 0.85;
}

/* --- Responsive --- */
@media (max-width: 1024px) {
  .pillars-grid { grid-template-columns: repeat(2, 1fr); }
  .card-grid--3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .story-layout { grid-template-columns: 1fr; gap: var(--space-2xl); }
  .pillars-grid { grid-template-columns: 1fr; }
  .card-grid--3, .card-grid--2 { grid-template-columns: 1fr; }
}

/* ============================================
   Shared parity components (visual-parity pass 2026-07-23)
   ============================================ */

/* --- Left-aligned section header with an action pill on the right (OG recipes header) --- */
.section__header--row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-xl);
  text-align: left;
  margin-left: 0;
  margin-right: 0;
  max-width: none;
}
.section__header--row > div { max-width: 640px; }
@media (max-width: 768px) {
  .section__header--row { flex-direction: column; align-items: flex-start; }
}

/* --- Photo band: full-width photo background with white overlay card(s) —
       the OG's recurring treatment (sustainability, oversight, stay-connected,
       cook-snap-share, careers CTA). --- */
/* Photo bands are inset blocks, not full-bleed — live geometry measured
   2026-08-29 at 2048px: calc(100% - 100px) wide (calc(100% - 80px) when the
   band carries a card row) with 16px rounded corners, exactly like the page
   banners. They were rendering edge-to-edge, which is what read as
   "not consistent with the current site". */
/* The photo now lives in .photo-band__bg (see components/band.njk) so mobile can
   lift it above the text. On desktop it simply fills the band. */
.photo-band__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  border-radius: inherit;
}

.photo-band {
  position: relative;
  width: var(--banner-inset);
  margin-inline: auto;
  /* An inset rounded block butting straight against a full-bleed red or black
     section reads as a mistake. Live never does that: its photo bands sit inside
     a white section with 57.6px of vertical padding, so there is always white
     breathing room. Reproduced here as vertical margin (Joanne rev.2 #1,2,3,4,6). */
  margin-block: var(--space-3xl);
  border-radius: var(--banner-radius);
  overflow: hidden;
  padding: var(--space-4xl) 0;
}
.photo-band--cards { width: var(--banner-inset-wide); }
/* On phones a 50px gutter each side leaves the band only 275px of a 375px
   screen, with the card covering what little photo shows. Live sidesteps this by
   dropping the band photos on mobile entirely; we keep the imagery and instead
   match the hero's own mobile inset so the content isn't squeezed. */

.photo-band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;                     /* above .photo-band__bg */
  background: rgba(20, 24, 28, 0.25);
}
.photo-band > .container { position: relative; z-index: 2; }
.photo-band .container { position: relative; z-index: 1; }
.photo-band__card {
  background: var(--white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  /* Live's band rows measure 40px top / 30px sides / 36px bottom. The sides
     matter: at 48px the Contact "Follow. Share. Like. Comment." heading wraps to
     two lines, where live fits it on one (Joanne rev.1 #23, rev.2 #6). */
  padding: 40px 30px 36px;
  max-width: 560px;
}
/* Live intro card inside a photo band measures 984px, centered. */
.photo-band__card--center { margin: 0 auto; text-align: center; max-width: 984px; }
.photo-band__card--center .hero__actions,
.photo-band__card--center .btn { justify-content: center; }
.photo-band__cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-lg);
  margin-top: var(--space-2xl);
}
.photo-band__cards .feature-card { background: rgba(255, 255, 255, 0.94); border: none; }
@media (max-width: 1024px) { .photo-band__cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .photo-band__cards { grid-template-columns: 1fr; } }

/* --- Solid red info card (OG contact: HEAD OFFICE / FARM STORE) ---
   Uses brand red, not --brand-deep: the deeper shade read as visibly darker
   than the brand colour against the live site. */
.red-card {
  background: var(--brand);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: var(--space-2xl);
}
.red-card__title {
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: var(--text-lg);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid rgba(255, 255, 255, 0.45);
  margin-bottom: var(--space-lg);
}
.red-card p, .red-card li { color: rgba(255, 255, 255, 0.92); }
.red-card strong { color: #fff; }
.red-card a { color: #fff; text-decoration: underline; }
.red-card a:hover { color: rgba(255, 255, 255, 0.85); }

/* --- Rule-flanked small-caps heading (OG contact right column) --- */
.rule-heading {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--text-primary);
}
.rule-heading::before, .rule-heading::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--brand);
}

/* --- Social icon buttons: solid red rounded squares, white glyphs (OG) --- */
.social-btns { display: flex; gap: var(--space-sm); }
.social-btns a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: var(--brand);
  border-radius: var(--radius-sm);
  color: #fff;
  transition: background var(--transition-fast), transform var(--transition-fast);
}
.social-btns a:hover { background: var(--brand-deep); color: #fff; transform: translateY(-2px); }

/* --- Recipe detail: red-bordered ingredients panel, red step numbers, actions --- */
.ingredients-panel {
  border: 2px solid var(--brand);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
}
.ingredients-panel ul { margin: 0 0 0 var(--space-lg); }
.ingredients-panel li { list-style: disc; margin-bottom: var(--space-xs); color: var(--text-secondary); }
.recipe__body ol li::marker { color: var(--brand); font-weight: 700; }
.recipe-actions { display: flex; gap: var(--space-lg); margin-bottom: var(--space-md); }
.recipe-actions a, .recipe-actions button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--brand);
  font-weight: 600;
  font-size: var(--text-sm);
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
}
.recipe-actions a:hover, .recipe-actions button:hover { color: var(--brand-deep); }
.recipe-actions .material-icons-outlined { font-size: 1.15rem; }

/* ============================================
   Per-page parity fixes (fleet merge 2026-07-23)
   ============================================ */

/* White (non---red) feature cards nested INSIDE a red band keep light-theme
   tokens — generalizes the existing .section--red .testimonial rescope in
   components.css. Used by farming-practices, quality-standards, and the
   careers benefits band. Values mirror :root in tokens.css — keep in sync. */
.section--red .feature-card:not(.feature-card--red) {
  --text-primary: #1e1e1e;
  --text-secondary: #666666;
  --text-light: #666c72;
  --brand-deep: #9e1f1f;
  --border: #e2e4e6;
  --border-light: #eef0f1;
  color: var(--text-primary);
}
.section--red .feature-card:not(.feature-card--red) .feature-card__title,
.section--red .feature-card:not(.feature-card--red) h3 { color: var(--text-primary); }
.section--red .feature-card:not(.feature-card--red) .feature-card__text,
.section--red .feature-card:not(.feature-card--red) p { color: var(--text-secondary); }

/* --- Home: Why Choose Us two-column split (video left / pillar accordion right) --- */
.split-media {
  display: grid;
  grid-template-columns: 11fr 9fr;
  gap: var(--space-2xl);
  align-items: center;
  margin-top: var(--space-2xl);
}
.split-media__media,
.split-media__panel { min-width: 0; }
@media (max-width: 900px) {
  .split-media { grid-template-columns: 1fr; }
}

/* --- About Us: Our Story red band — story text left, stacked photo column right --- */
.red-story {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: var(--space-3xl);
  align-items: start;
}
.red-story__content h2 { margin: var(--space-xs) 0 var(--space-2xl); }
.red-story__content h3 { font-size: var(--text-xl); margin: var(--space-xl) 0 var(--space-sm); }
.red-story__content p { line-height: var(--leading-relaxed); }
.red-story__photos { display: grid; gap: var(--space-lg); align-content: start; }
.red-story__photos img {
  display: block;
  width: 100%;
  aspect-ratio: 27 / 16; /* live photos render ~405x240, uniform crops */
  object-fit: cover;
  /* Photo blocks carry the banner radius, not the small card radius — at 8px
     these read as square next to live's rounding (Joanne rev.3 #5). */
  border-radius: var(--banner-radius);
}
@media (max-width: 1024px) {
  .red-story { grid-template-columns: 1fr; }
  .red-story__photos { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
  .red-story__photos { grid-template-columns: 1fr; }
}

/* Photo-band card internals — global reset strips heading/p margins */
.cta-card h2 { margin: var(--space-xs) 0 var(--space-md); }
.cta-card p { color: var(--text-secondary); margin-bottom: var(--space-lg); }

/* --- Farming Practices: red h3 subheads in Local Farmer story rows --- */
.subheads-red h3 { color: var(--brand); }
.subheads-red h3 + p { margin-top: var(--space-md); }
.story-stack > .story-layout + .story-layout { margin-top: var(--space-3xl); }
/* Wide left-aligned section header: heading spans wide, intro stays narrow */
.section__header--row > .header-wide { max-width: 900px; }
.header-wide p { max-width: 640px; }

/* --- Careers: "Why work with us?" white two-column (red heading left, copy right) --- */
.split-copy {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2.75fr);
  gap: var(--space-3xl);
  align-items: start;
}
.split-copy__heading h2 { color: var(--brand); font-size: var(--text-3xl); margin: 0; }
.split-copy__body p { color: var(--text-secondary); line-height: var(--leading-relaxed); margin-bottom: var(--space-lg); }
.split-copy__body ul { margin: 0 0 var(--space-lg) var(--space-xl); }
.split-copy__body ul li { list-style: disc; font-weight: 600; color: var(--text-primary); margin-bottom: var(--space-sm); line-height: var(--leading-relaxed); }
.split-copy__actions { margin-top: var(--space-xl); }
@media (max-width: 768px) {
  .split-copy { grid-template-columns: 1fr; gap: var(--space-xl); }
}

/* --- Contact: two-column info layout (red cards left, rule-heading groups right) --- */
.contact-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2xl);
  align-items: start;
}
.contact-cols__stack {
  display: grid;
  gap: var(--space-xl);
  align-content: start;
}
.contact-group .rule-heading { margin-bottom: var(--space-lg); }
.contact-group p { margin: 0 0 var(--space-sm); }
/* Right-column lines read as plain body text; links keep a quiet underline */
.contact-group a { color: inherit; text-decoration: underline; text-decoration-color: rgba(0, 0, 0, 0.25); }
.contact-group a:hover { text-decoration-color: currentColor; }
@media (max-width: 900px) {
  .contact-cols { grid-template-columns: 1fr; }
}
.contact-social { margin-top: var(--space-lg); }

/* --- FAQs: sidebar + grouped accordion (live Divi vertical tab-list look) --- */
.faq-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: var(--space-3xl);
  align-items: start;
}
.faq-nav {
  position: sticky;
  top: 120px;
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}
.faq-nav a {
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
  text-decoration: none;
  transition: color var(--transition-fast);
}
.faq-nav a:hover { color: var(--brand); }
.faq-nav a.is-active { color: var(--brand); }
.faq-group { scroll-margin-top: 120px; }
.faq-group + .faq-group { margin-top: var(--space-3xl); }
.faq-group__title {
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-primary);
  margin-bottom: var(--space-md);
}
/* Live FAQ accordion rows are bounded by thin RED rules (grey elsewhere) */
.faq-accordion.faq-accordion--ruled details { border-bottom: 1px solid var(--brand); }
.faq-accordion.faq-accordion--ruled details:first-child { border-top: 1px solid var(--brand); }
/* .hero__card--wide and .section__header--wide are gone: both existed to widen
   past defaults that were too narrow, and the defaults now carry live's own
   measurements (card 50%, header 984px). --wide had become a no-op on the cards
   and actively narrower than the base on the headers. */
.photo-band__card h2 { font-size: var(--text-display); line-height: 1; }
@media (max-width: 900px) {
  .faq-layout { grid-template-columns: 1fr; gap: var(--space-xl); }
  .faq-nav { position: static; flex-direction: row; flex-wrap: wrap; gap: var(--space-sm) var(--space-lg); }
}

/* --- Recipes index: search row (thin red-bordered input + solid red Search) --- */
.recipe-search {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
}
.recipe-search__input {
  flex: 0 1 28rem;
  min-width: 0;
  padding: 0.7rem 1rem;
  font-family: inherit;
  font-size: var(--text-base);
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--brand);
  border-radius: var(--radius-sm);
}
.recipe-search__input::placeholder { color: #757575; }
.recipe-search__input:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
@media (max-width: 640px) {
  .recipe-search__input { flex: 1 1 100%; }
  .recipe-search__btn { flex: 1 1 auto; }
}

/* --- Recipe detail: title-on-white top, 60/40 photo/ingredients columns --- */
.recipe-meta-line {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-sm) var(--space-5xl);
  margin-top: var(--space-xl);
  color: var(--brand);
  font-size: var(--text-lg);
}
.recipe-meta-line strong { color: inherit; font-weight: 700; }
.recipe-cols {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: var(--space-xl) var(--space-2xl);
  align-items: start;
}
.recipe-cols__media, .recipe-cols__instructions { grid-column: 1; }
.recipe-cols__aside { grid-column: 2; grid-row: 1 / span 2; }
.recipe-cols__aside .recipe-actions { justify-content: center; }
.recipe-photo {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
}
.instructions-heading {
  color: var(--brand);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: var(--text-xl);
  margin: var(--space-lg) 0;
}
.card-grid--4 { grid-template-columns: repeat(4, 1fr); }
.social-btns--round a { border-radius: 50%; }
@media (max-width: 1024px) {
  .card-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .recipe-cols { grid-template-columns: 1fr; }
  .recipe-cols__aside { grid-column: 1; grid-row: auto; }
}
@media (max-width: 640px) {
  .card-grid--4 { grid-template-columns: 1fr; }
}

/* --- Print: recipe printouts are just title/intro/ingredients/instructions --- */
@media print {
  .site-header, .site-footer, .cookie-banner, .photo-band,
  .related-recipes, .recipe-actions, .cta-banner { display: none !important; }
  .recipe-cols { grid-template-columns: 1fr; }
}

/* Mobile: bands stack like the heroes — rounded photo block, then the text
   below it on white, left-aligned, in the same ~40px-gutter column as live.
   (An earlier attempt DROPPED the photo on phones because a DOM probe reported
   live had none; the probe was reading a hidden duplicate node. Live keeps the
   photo, it just puts it above the text. That mistake became Joanne rev.3 #2
   and #7.) */
@media (max-width: 767px) {
  .photo-band,
  .photo-band--cards,
  .photo-band--flush {
    width: var(--mobile-content);
    margin-block: var(--space-xl);
    padding: 0;
    border-radius: 0;        /* the photo block carries the radius now */
    overflow: visible;
    background-image: none;
  }
  .photo-band__bg {
    position: static;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: var(--banner-radius);
  }
  .photo-band::before { display: none; }   /* no scrim behind stacked text */

  .photo-band > .container { max-width: 100%; padding: 0; }

  .photo-band__card,
  .photo-band__card--center,
  .photo-band--flush .photo-band__card {
    max-width: 100%;
    width: 100%;
    margin: 0;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    padding: var(--space-xl) 0 0;
    text-align: left;
  }
  .photo-band__card--center .hero__actions,
  .photo-band__card--center .btn,
  .photo-band__card .hero__actions { justify-content: flex-start; }

  /* the 4-up feature row sits under the text, full width of the column */
  .photo-band__cards { margin-top: var(--space-lg); }
}

/* A band card whose last child is a bare .btn (no .hero__actions wrapper) had the
   button sitting directly against the paragraph above it (Joanne rev.3 #15, #19). */
.photo-band__card > .btn { margin-top: var(--space-lg); }

@media (max-width: 767px) {
  /* .red-story__content h3 sets 20px, which out-specifies the global mobile
     subhead size. Live renders these at 25px/35px (Joanne rev.3 #4). */
  .red-story__content h3 { font-size: var(--text-card-title); line-height: 1.4; }
}