/* ══════════════════════════════════════════
   EiGHT's CHiLi — COMPONENTS
   ══════════════════════════════════════════ */

/* ══════════════════════════════════════════
   TEXT LINK UTILITY — underline on hover
   ══════════════════════════════════════════ */
.nav-item:hover,
.nav-item-muted:hover,
.nav-sub-item:hover,
.cart-label:hover,
.bottom-link:hover,
.legal-panel-nav-item:hover,
.product-name:hover,
.media-controls-prev:hover,
.media-controls-next:hover { text-decoration: underline; }

/* ══════════════════════════════════════════
   CART LABEL
   ══════════════════════════════════════════ */
.cart-label {
  font-size: var(--fs-body);
  text-transform: uppercase;
  color: var(--dark);
  cursor: pointer;
  padding-top: var(--space-xs);
}

body.cart-open .cart-label { text-decoration: underline; }

/* ══════════════════════════════════════════
   CART PANEL
   ══════════════════════════════════════════ */
.cart-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: var(--cart-panel-w);
  height: 100vh;
  z-index: 997;
  background: #ffffff;
  border-left: var(--border-line);
  display: none;
  flex-direction: column;
}
body.cart-open .cart-panel { display: flex; }
body.cart-open { margin-right: var(--cart-panel-w); transition: margin-right var(--transition); }

.cart-panel-header {
  flex-shrink: 0;
  padding: var(--space-sm) var(--space-sm) 0;
}

.cart-items {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.cart-panel-footer {
  flex-shrink: 0;
  padding: 0 var(--space-sm) var(--space-md);
}


/* ══════════════════════════════════════════
   ADD BUTTON
   ══════════════════════════════════════════ */
.add-btn {
  width: 100%;
  height: var(--btn-h);
  padding: 0 var(--space-xs);
  border: var(--border-line);
  background: transparent;
  font-size: var(--fs-body);
  text-transform: uppercase;
  text-align: left;
  cursor: pointer;
  transition: all var(--transition);
  color: var(--dark);
  font-family: inherit;
}
.add-btn:hover,
.add-btn--active { background: var(--dark); color: var(--cream); }
.add-btn--fit { width: fit-content; }
.add-btn--disabled { opacity: 0.3; pointer-events: none; }
.link-btn {
  background: none;
  border: none;
  padding: 0;
  font-size: var(--fs-body);
  font-family: inherit;
  color: var(--dark);
  text-decoration: underline;
  cursor: pointer;
  text-align: left;
}
.link-btn:hover { text-decoration: none; }
/* Inline text link — underlined at rest, off on hover. */
.text-link {
  color: var(--dark);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 1px;
  cursor: pointer;
}
.text-link:hover { text-decoration: none; }
/* Section label — a simple sans (primary-font) title at the top of a section,
   so the stacked sections stay legible as you scroll. */
/* Serif heading at the top of each app-section, naming the current view
   (the selected sub-item — Chili Oil, a specific collab/event/recipe). */
.section-title {
  font-family: var(--font-serif);
  font-size: var(--fs-serif-headline);
  line-height: var(--line-height-headline);
  color: var(--dark);
  margin-bottom: var(--space-md);
}

/* ══════════════════════════════════════════
   ANNOUNCEMENT BAR
   ══════════════════════════════════════════ */
.announcement {
  background: var(--dark);
  color: #fff;
  text-align: center;
  font-size: var(--fs-label);
  font-weight: 700;
  text-transform: uppercase;
  height: var(--announcement-h);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.announcement em { color: var(--red); font-style: normal; }

/* ══════════════════════════════════════════
   BOTTOM BAR
   ══════════════════════════════════════════ */
.bottom-bar {
  padding: 0 var(--space-md) var(--space-sm) var(--space-md);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-md);
}
/* On the fixed-hero (no-sidebar) layout the footer sits below the white content
   sheet, at body level — the same level as the pinned hero (z-index:0), which is
   positioned and would otherwise paint over the static footer. Lift it above the
   hero and give it an opaque background so the hero can't show through. */
.main-layout--no-sidebar + .bottom-bar {
  position: relative;
  z-index: 1;
  background: #fff;
}
.bottom-links {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
}
.bottom-link {
  font-size: var(--fs-body);
  text-transform: uppercase;
  color: var(--dark);
  text-decoration: none;
}
.bottom-copy {
  font-size: var(--fs-body);
  color: var(--dark);
}

/* ══════════════════════════════════════════
   FORMS / INPUTS
   ══════════════════════════════════════════ */

/* Outline form — generic bordered-row form template. Label column +
   field column per row, full black outline. Reusable anywhere a form
   is needed (reviews, contact, newsletter, etc). */
.form-outline {
  border: var(--border-line);
}
.form-outline__row {
  display: grid;
  grid-template-columns: 140px 1fr;
  border-bottom: var(--border-line);
}
.form-outline__row:last-child { border-bottom: none; }
.form-outline__label {
  display: flex;
  align-items: flex-start;
  padding: var(--space-xs) var(--space-sm);
  font-size: var(--fs-body);
  text-transform: uppercase;
  color: var(--dark);
}
.form-outline__field { display: flex; }
.form-outline__input {
  width: 100%;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: var(--fs-body);
  color: var(--dark);
  outline: none;
  padding: var(--space-xs) var(--space-sm);
}
.form-outline__input--textarea { resize: vertical; min-height: 60px; }
.form-outline__field--stacked { flex-direction: column; }
.form-outline__hint {
  padding: 0 var(--space-sm) var(--space-xs);
  font-size: var(--fs-label);
  color: var(--muted);
}
.form-outline__hint.is-over-limit { color: var(--red); }
.form-outline__field--file {
  align-items: center;
  gap: var(--space-sm);
}
.form-outline__input--file {
  width: auto;
  flex: 1;
  cursor: pointer;
}
.form-outline__file-preview {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  display: none;
  background: var(--color-grey-1);
  overflow: hidden;
}
.form-outline__file-preview.is-visible { display: block; }
.form-outline__file-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.form-outline__submit {
  display: block;
  width: 100%;
  text-align: center;
  padding: var(--space-xs) 0;
  background: none;
  border: none;
  font-family: inherit;
  font-size: var(--fs-body);
  text-transform: uppercase;
  color: var(--dark);
  cursor: pointer;
}
.form-outline__submit:hover { background: var(--dark); color: var(--cream); }

.review-form {
  width: var(--block-1-3);   /* span 4 — same width as a product tile */
}
.is-mobile .review-form { width: 100%; }

/* ══════════════════════════════════════════
   QUANTITY STEPPER
   ══════════════════════════════════════════ */
.qty-stepper {
  display: flex;
  align-items: center;
  height: var(--btn-h);
  border: var(--border-line);
}
.qty-btn {
  width: var(--space-lg);
  height: 100%;
  padding: 0;
  border: none;
  background: transparent;
  font-size: var(--fs-body);
  font-family: inherit;
  line-height: 1;
  cursor: pointer;
  transition: all var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 2px;
}
.qty-btn:hover { background: var(--dark); color: var(--color-grey-1); }
.qty-value {
  min-width: var(--space-lg);
  height: 100%;
  font-size: var(--fs-body);
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ══════════════════════════════════════════
   CART PRODUCT ITEM
   ══════════════════════════════════════════ */
.cart-product {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.cart-product-top {
  display: grid;
  grid-template-columns: var(--space-xl) 1fr;
  gap: var(--space-sm);
  align-items: start;
}
.cart-product-media {
  width: var(--space-xl);
  height: var(--space-xl);
  background: var(--color-grey-1);
  overflow: hidden;
  flex-shrink: 0;
}
.cart-product-media img { width: 100%; height: 100%; object-fit: cover; }
.cart-product-info {
  display: flex;
  flex-direction: column;
  font-size: var(--fs-body);
}
.cart-product-name { color: var(--dark); text-transform: uppercase; }
.cart-product-heat { color: var(--red); }
.cart-product-qty { color: var(--muted); }
.cart-product-price { color: var(--dark); }
.cart-product-actions {
  display: grid;
  grid-template-columns: var(--space-xl) 1fr;
  column-gap: var(--space-sm);
  align-items: center;
}

.cart-close-btn,
.cart-checkout {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* ══════════════════════════════════════════
   MEDIA CAPTION
   ══════════════════════════════════════════ */
.media-caption {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  z-index: 2;
  text-align: center;
  pointer-events: none;
  font-family: var(--font-serif);
}


/* ══════════════════════════════════════════
   HEADLINE UTILITY
   ══════════════════════════════════════════ */
.headline { letter-spacing: 0.04em; }
.media-title-sub { font-weight: 400; }

.section-view-more {
  margin-left: auto;
  font-size: var(--fs-body);
  text-transform: uppercase;
  text-decoration: underline;
  color: var(--dark);
  cursor: pointer;
}
.section-view-more:hover { text-decoration: none; }
.is-mobile .media-controls {
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-xs);
}
.is-mobile .section-view-more { order: -1; align-self: flex-end; margin-left: 0; }
.is-mobile .bottom-link[href*="design-system"] { display: none; }
.is-mobile .bottom-bar { gap: var(--space-xs); padding-bottom: 0; margin-bottom: 0; }
.media-active-caption {
  font-size: var(--fs-body);
  color: var(--dark);
  opacity: 0;
  transition: opacity var(--transition);
  pointer-events: none;
  min-height: calc(var(--fs-body) * var(--line-height-body) * 2);
  display: flex;
  align-items: flex-start;
}
.media-active-caption.is-visible { opacity: 1; }

/* ══════════════════════════════════════════
   SECTION HEADER
   ══════════════════════════════════════════ */
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 0 0 var(--space-sm) 0;
}
.section-header .section-header-link:only-child { margin-left: auto; }
.is-mobile .section-header {
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-xs);
}
.is-mobile .section-header .link-btn,
.is-mobile .section-header .section-header-link {
  order: -1;
  align-self: flex-end;
  margin-left: 0;
}
/* Same grid as .media-controls — 190px title column, then caption —
   so headers across the site line up on the same column edges. */
.section-header-info {
  display: grid;
  grid-template-columns: 190px 1fr;
  column-gap: var(--space-md);
  align-items: baseline;
}
.section-header-link {
  font-size: var(--fs-body);
  text-decoration: underline;
  color: var(--dark);
  text-transform: uppercase;
  cursor: pointer;
}
.section-header-link:hover { text-decoration: none; }

/* ══════════════════════════════════════════
   NEWSLETTER
   ══════════════════════════════════════════ */
.address-block {
  width: 100%;
  text-align: center;
  font-size: var(--fs-headline);
  font-family: var(--font-body);
  color: var(--dark);
  line-height: var(--line-height-body);
}
.newsletter { margin-top: var(--space-lg); }
/* Fills its column — centering is done by the layout (a 3-column row
   with empty side columns), not a block cap. */
.newsletter-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  width: 100%;
}
.newsletter-caption {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  font-size: var(--fs-headline);
  text-transform: uppercase;
  color: var(--dark);
}
.newsletter-form { width: 100%; max-width: var(--block-1-3); }

/* ── Contact block — stack of Two-column label rows (.product-info__title-row),
   e.g. "Get in touch" / "Find Us" next to the Newsletter column ── */
.contact-block {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}
.contact-block .product-info__title { text-transform: uppercase; }
/* Tight rows — the label/value rows sit directly under one another,
   no extra gap between them. */
.contact-block .product-info__title-row { padding-bottom: 0; }

/* ══════════════════════════════════════════
   TASTE CARD
   ══════════════════════════════════════════ */
/* Scroll-snap strip, same as the post carousel. */
.taste-container {
  width: 100%;
}
/* Taste cards in one row (no carousel). Centered when the cards don't fill
   the row; if they ever overflow, justify-content:center falls back to
   flex-start automatically (browsers apply "safe" alignment under
   overflow) so nothing gets clipped. */
.taste-block {
  display: flex;
  gap: var(--space-lg);
  align-items: flex-start;
  justify-content: center;
}
/* Taste card keeps the .form-outline label/value row structure, but with
   no borders and at half the previous width. */
.taste-card {
  flex: 0 0 calc(var(--block-1-3) / 2);
  border: none;
}
.taste-card .form-outline__row {
  border-bottom: none;
  grid-template-columns: 1fr;   /* drop the repeating label column — values only */
}
.taste-card .form-outline__label { display: none; }
.is-mobile .taste-block { flex-direction: column; }
.is-mobile .taste-card { flex-basis: auto; width: 100%; }
.form-outline__value {
  width: 100%;
  margin: 0;
  font-family: inherit;
  font-size: var(--fs-body);
  color: var(--dark);
  padding: var(--space-xs) var(--space-sm);
}
/* ── Serif title — generic serif headline, used in taste cards and recipe blocks ── */
.serif-title {
  font-family: var(--font-serif);
  font-size: var(--fs-serif-headline);
}
.taste-card .serif-title {
  font-size: var(--fs-headline);
  padding: var(--space-xs) var(--space-sm);
}
.serif-title--link {
  color: var(--dark);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 1px;
  cursor: pointer;
}
.serif-title--link:hover { text-decoration: none; }
.taste-product { color: var(--red); }

/* ══════════════════════════════════════════
   TASTE MEDIA
   ══════════════════════════════════════════ */
.taste-media {
  width: 100%;
  aspect-ratio: 3 / 4;
  background: var(--color-grey-1);
  overflow: hidden;
  flex-shrink: 0;
}
.taste-media img { width: 100%; height: 100%; object-fit: cover; }
/* Thumbnail variant — the taste card's own Photo row, next to a
   140px label column, same idea as the review form's file preview.
   Portrait (3:4), 80px wide. */
.taste-media--thumb {
  width: 80px;
  height: auto;
  aspect-ratio: 3 / 4;
  margin: var(--space-xs) var(--space-sm);
}

/* ══════════════════════════════════════════
   LEGAL PANEL
   ══════════════════════════════════════════ */
.legal-panel {
  display: none;
  /* --space-2xl bottom = gap before the footer (matches the product page). */
  padding: 0 var(--space-md) var(--space-2xl) 0;
  position: relative;
  /* Cap the reading measure to the column system (2/3 of the content) so the
     legal paragraphs aren't full-width. */
  max-width: var(--block-2-3);
}
.legal-panel.is-active { display: flex; flex-direction: column; gap: var(--space-lg); }
/* Subpage header — logo (home) + explicit Back, sticky so it's always in
   reach. Shared by the legal panel and the product-detail page. */
.legal-panel-header,
.subpage-header {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md) 0;
  background: #fff;
  z-index: 1;
}
.legal-panel-header .logo img,
.subpage-header .logo img { display: block; width: 44px; height: 44px; }
/* Offset scroll targets by the sticky header height so section titles aren't
   hidden behind it when jumping to a section. */
.legal-panel-section { scroll-margin-top: var(--subpage-header-h); }
.legal-back,
.subpage-back {
  font-size: var(--fs-body);
  text-transform: uppercase;
  color: var(--dark);
  text-decoration: underline;
  cursor: pointer;
}
.legal-back:hover,
.subpage-back:hover { text-decoration: none; }
.is-mobile .legal-panel { padding-left: 0; padding-right: var(--space-sm); }
.legal-panel-nav { display: none; }
body.legal-open .nav-links { display: none; }
body.legal-open .announcement { display: none; }
/* On the legal page the fixed hero and floating wordmark must go — the legal
   panel has its own header (icon + Back); otherwise the hero shows through the
   panel and the wordmark reads as a second logo. */
body.legal-open .hero-section--fullbleed,
body.legal-open .hero-logo-float { display: none; }
body.legal-open .legal-panel-nav { display: flex; flex-direction: column; gap: var(--space-xs); }
.legal-panel-nav-item {
  font-size: var(--fs-body);
  text-transform: uppercase;
  color: var(--dark);
  cursor: pointer;
  text-decoration: none;
}
/* ── Paragraph block — title + body text. Generic, not legal-specific;
   .legal-panel-section instances each contain one. ── */
.paragraph-title {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  text-transform: uppercase;
  margin-bottom: var(--space-sm);
}
.paragraph-body {
  font-size: var(--fs-body);
  width: 100%;
  padding-left: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}
/* Optional narrower variant — half its column, via the shared width
   module (span 6 of 12), not a fixed px cap. */
.paragraph-body--1-2 { width: var(--block-1-2); }
.is-mobile .paragraph-body,
.is-mobile .paragraph-body--1-2 { padding-left: var(--space-sm); width: 100%; }
/* List variant — e.g. a recipe's ingredients/method inside a Paragraph block */
.paragraph-body ul,
.paragraph-body ol {
  padding-left: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

/* ══════════════════════════════════════════
   PRODUCT DETAIL PAGE
   Runs on the same .layout-row/.layout-column skeleton as everything
   else (info 1/4, gallery 1/2, spacer 1/4 ≈ the old 360/1fr/360 grid,
   but fluid instead of fixed-px) — see Layout Columns in the design
   system. .product-page itself only adds page-specific behavior
   (min-height, sticky-column alignment) on top of that shared grid.
   ══════════════════════════════════════════ */
/* --space-2xl bottom = gap before the footer (matches the legal page). */
.product-detail-page .content { overflow: visible; padding-bottom: var(--space-2xl); }
/* .layout-row (media-blocks.css) sets column-gap and loads later, so match
   its specificity with both classes to override the gap on this page only. */
.product-page.layout-row {
  min-height: calc(100vh - var(--subpage-header-h));
  align-items: start;
  column-gap: var(--space-md);   /* wider, harmonized gap on this page only */
}
/* Description column — sticky viewport-height, content centred vertically,
   mirroring the info column that flanks the scrolling gallery. */
.product-page__spacer {
  position: sticky;
  top: var(--subpage-header-h);
  height: calc(100vh - var(--subpage-header-h));
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.is-mobile .product-page__spacer { display: none; }
.is-mobile .product-info {
  position: static;
  height: auto;
  transform: none;
}
.is-mobile .product-gallery {
  order: -1;
  padding-left: 0;
  padding-right: 0;
  flex-direction: row;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  gap: 0;
}
.is-mobile .product-gallery::-webkit-scrollbar { display: none; }
.is-mobile .product-gallery__img {
  flex: 0 0 100%;
  width: 100%;
  scroll-snap-align: start;
  aspect-ratio: 1 / 1;
  height: auto;
}

/* ── Info column (left, sticky) ── */
.product-info {
  position: sticky;
  top: var(--subpage-header-h);   /* pin below the sticky subpage header, not over it */
  height: calc(100vh - var(--subpage-header-h));
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;   /* centre the info vertically in the viewport column */
  font-size: var(--fs-body);
  line-height: var(--line-height-body);
}
.product-info__header {
  padding: 0;
  display: flex;
  flex-direction: column;
  line-height: var(--line-height-body);
}
.product-info__stepper-row {
  display: grid;
  grid-template-columns: 100px 1fr;
  column-gap: var(--space-md);
  align-items: center;
  padding: var(--space-sm) 0;
}
.product-info__stepper-row .add-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  padding-left: 0;
  padding-right: 0;
}

/* ── Details toggle ── */
.product-info__details-btn {
  font-size: var(--fs-body);
  text-transform: uppercase;
  color: var(--dark);
}
.product-info__desc { font-size: var(--fs-body); line-height: var(--line-height-body); margin: 0; }
/* + Detail toggle — body font/size, underlined; reveals more text below. */
.product-detail-toggle {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  text-transform: uppercase;
  color: var(--dark);
  background: none;
  border: none;
  padding: 0;
  text-decoration: underline;
  cursor: pointer;
  align-self: flex-start;
}
.product-detail-toggle:hover { text-decoration: none; }
/* Revealed text sits absolutely below the toggle so expanding it doesn't
   grow the centered block and shift the content above. */
.product-page__spacer .product-info__title-spacer { position: relative; }
.product-detail-more {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  padding-top: var(--space-sm);
}
.product-detail-more[hidden] { display: none; }
.product-info__details { font-size: var(--fs-body); line-height: var(--line-height-body); margin: 0; }

/* ── Taste notes ── */
/* Write a Review + taste-card carousel: two full-width stacked rows (each
   a span-12 .layout-column), narrower than the row so centered rather than
   flush-left. */
.product-info__taste {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  align-items: center;
}
.product-info__taste-grid { width: 100%; }
/* A bit more breathing room between the two stacked rows (review form,
   taste-card carousel) than the default .layout-row row-gap. */
.product-page__taste-row { row-gap: calc(var(--space-lg) + var(--space-sm)); }

/* ── Gallery column (right, scrollable) ── */
.product-gallery__header {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  padding: 0 0 var(--space-sm) 0;
  font-size: var(--fs-body);
  color: var(--dark);
}
.product-gallery__meta {
  display: flex;
  flex-direction: column;
  font-size: var(--fs-body);
  color: var(--dark);
}
.product-gallery {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.product-gallery__img {
  width: 100%;
  aspect-ratio: 3 / 4;
  height: auto;
  background: var(--color-grey-1);
  overflow: hidden;
}
.product-gallery__img img { width: 100%; height: 100%; object-fit: contain; }

/* Product title row — dedicated to the product page, decoupled from
   the shared .media-controls/.media-active-caption carousel component.
   The spacer column reserves the same width Previous/count/Next used
   to take, and now also hosts the Details toggle + its copy. */
.product-info__title-row {
  display: grid;
  grid-template-columns: 100px 1fr;
  column-gap: var(--space-md);
  align-items: flex-start;
  padding: 0 0 var(--space-sm) 0;
  font-size: var(--fs-body);
}
.product-info__title-spacer {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.product-info__title {
  font-size: var(--fs-body);
  color: var(--dark);
}
.product-info__heat { color: var(--red); }

/* ══════════════════════════════════════════
   FIND US OVERLAY — experimental
   ══════════════════════════════════════════ */
.find-us-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.find-us-overlay.is-open { display: flex; }
.find-us-overlay__content {
  text-align: center;
}
.find-us-overlay__line {
  font-family: var(--font-serif);
  font-size: var(--fs-hero);
  color: var(--dark);
  line-height: var(--line-height-hero);
}

/* ══════════════════════════════════════════
   SPLIT LAYOUT — list (left column) + post (right column)
   A plain .layout-row: the list is a --1-3 column, the post panel a
   --2-3 column — on the standard column system, no bespoke grid.
   Used by recipes/events/collaborations index pages: left lists every
   item as a link, right shows the Post template for the last clicked
   one, swapped via a <template> lookup — no page navigation. Events use
   the Two-column-label pattern (.product-info__title-row) per row.
   ══════════════════════════════════════════ */
/* .content's default overflow:hidden (layout.css) clips position:sticky
   for any descendant — override it only on pages using the split
   layout so the left list can stick while browsing the right panel. */
.content:has(.split-layout) { overflow: visible; }
.split-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  position: sticky;
  top: var(--space-md);
  max-width: 360px;
}
.is-mobile .split-list { position: static; }
/* Parent label above a split-list — the section's own title, styled as a
   full-strength serif section heading, with its links nested beneath. First
   step toward a sidebar that lists sections and their sub-links. */
.split-list-parent {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--line-height-body);
  color: var(--dark);
  cursor: pointer;
  text-transform: uppercase;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 1px;
}
.split-list-parent:hover,
.split-list-parent.is-current { text-decoration: none; }
.split-list-parent.is-current { color: var(--red); }
/* A section's parent link + its sub-links, grouped in the rail. */
.rail-group { display: flex; flex-direction: column; gap: var(--space-sm); }
/* Social links — always visible at the bottom of the menu, set off from the
   section list above. */
.rail-social {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}
/* Body font at normal size — set apart from the serif section links. */
.rail-social .split-list-item {
  font-family: var(--font-body);
  font-size: var(--fs-body);
}

/* ══ APP-SHELL — the sidebar menu swaps which section shows on the right.
   Both columns flow with the page: the right column's content scrolls
   normally, and the (tall) menu scrolls with the page instead of pinning,
   so no links ever get clipped. ══ */
.app-menu {
  align-self: start;
  position: sticky;
  top: var(--space-md);
  max-height: calc(100vh - var(--space-md) * 2);
  overflow-y: auto;
  scrollbar-width: none;
}
.app-menu::-webkit-scrollbar { display: none; }
.app-section[hidden] { display: none; }
/* The content panel is its own query container so block widths (--block-* via
   100cqi) measure the panel, not the outer .content (which still spans the
   sidebar track too). Without this a "1/3" tile is a third of the wider .content
   and only 2 fit per row instead of 3. */
#mainRight { container-type: inline-size; }
#mainRight .app-section { margin-bottom: var(--space-2xl); }
/* Scroll-swap section: JS sets its height = posts × 100vh so each post gets one
   viewport of scroll. The sticky child pins one post filling the view; the
   controller swaps the post's content as you scroll through. The title stays
   pinned at the top while .scroll-swap__body scrolls natively beneath it —
   the wheel scrolls the post's own content first, then chains to the page
   scroll to advance to the next post once the post is fully read. */
.scroll-swap { position: relative; }
.scroll-swap__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  /* Matches the floating wordmark's fixed resting top (--space-md +
     --announcement-h, see place() in homepage-prototype.html) so the post
     title lines up with the logo instead of sitting above it. */
  padding-top: calc(var(--space-md) + var(--announcement-h));
  display: flex;
  flex-direction: column;
}
.scroll-swap__body {
  flex: 1;
  min-height: 0;
  /* Only scrollable once JS confirms the section has actually reached its
     pinned resting position (.is-pinned) — otherwise a wheel/trackpad input
     that lands here while the section is still sliding into view would
     scroll this instead of finishing the section's entrance. */
  overflow-y: hidden;
  padding-bottom: var(--space-lg);
  scrollbar-width: none;
}
.scroll-swap.is-pinned .scroll-swap__body {
  overflow-y: auto;
}
.scroll-swap__body::-webkit-scrollbar { display: none; }
/* About fills the last screen so it lands at the top, with the full-width
   footer (a page-level element below .main-layout) sitting at the bottom of
   the same screen — no void, no previous section above. --footer-h is the
   footer's height, subtracted so the footer lands exactly at the viewport
   bottom. */
:root { --footer-h: 30px; }
.main-layout--no-sidebar { padding-bottom: 0; }
/* Reserve a --space-md buffer on top of the scroll offset + footer height so
   About + footer land comfortably inside one screen (a bare-fit overflows by a
   sub-pixel and crops the footer). */
#section-about { min-height: calc(100vh - var(--space-lg) - var(--footer-h) - var(--space-md)); }
#mainRight .app-section:last-child { margin-bottom: 0; }
/* Accordion: a section's sub-links show only while that section is the
   current one (in view / clicked), so the sticky menu stays short. */
.split-list-sub {
  display: none;
  flex-direction: column;
  gap: var(--space-sm);
  padding-left: var(--space-md);
}
.rail-group.is-current .split-list-sub { display: flex; }
.split-list-item {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--line-height-body);
  color: var(--dark);
  cursor: pointer;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 1px;
}
.split-list-item:hover,
.split-list-item.is-current { text-decoration: none; }
.split-list-item.is-current { color: var(--red); }

/* ══ NAV STYLE TOGGLE (design review) ══
   Default = "Body": primary font, body size, uppercase parents.
   body.nav-style--serif = "Serif": serif headline, mixed case, on both
   parent and nested links.
   body.nav-style--hybrid = "Hybrid": same as Serif (parent links, layout,
   spacing) except nested links drop back to body font/size — so it shares
   every serif-style rule below and then overrides just the nested-link font
   afterward. Flip with the floating switch on the homepage to compare live. */
body.nav-style--serif .split-list-parent,
body.nav-style--serif .split-list-item,
body.nav-style--hybrid .split-list-parent,
body.nav-style--hybrid .split-list-item {
  font-family: var(--font-serif);
  font-size: var(--fs-serif-headline);
  line-height: var(--line-height-headline);
  text-transform: none;
}
/* Hybrid: nested links only, back to body font/size (parents stay serif). */
body.nav-style--hybrid .split-list-item {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--line-height-body);
}
/* Social links stay body font at body size in every style (they're external,
   set apart from the section links) — re-assert over the serif override. */
body.nav-style--serif .rail-social .split-list-item,
body.nav-style--hybrid .rail-social .split-list-item {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--line-height-body);
}
/* Body and Hybrid styles pack the links tighter (same gap as the insta
   links) than the airier Serif style. */
body:not(.nav-style--serif) .split-list,
body:not(.nav-style--serif) .rail-group,
body:not(.nav-style--serif) .split-list-sub,
body:not(.nav-style--serif) .rail-social {
  gap: var(--space-xs);
}
/* Serif: tighten only the insta links (leave the section links airy). */
body.nav-style--serif .rail-social {
  gap: var(--space-xs);
}
/* Body style uses a narrower fixed-width sidebar; serif/hybrid keep the wider
   proportional --1-4 column. */
body:not(.nav-style--serif):not(.nav-style--hybrid) #mainLayout {
  grid-template-columns: 240px 1fr;
}
body:not(.nav-style--serif):not(.nav-style--hybrid) #mainRail { grid-column: 1; }
body:not(.nav-style--serif):not(.nav-style--hybrid) #mainRight { grid-column: 2; }
/* Switch to flip between the two nav styles during design review. */
.nav-style-switch {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs);
  background: #fff;
  border: 1px solid var(--dark);
  border-radius: 999px;
}
.nav-style-switch__label {
  font-family: var(--font-body);
  font-size: var(--fs-label);
  text-transform: uppercase;
  color: var(--muted);
  padding-left: var(--space-xs);
}
.nav-style-switch__btn {
  font-family: var(--font-body);
  font-size: var(--fs-label);
  text-transform: uppercase;
  color: var(--dark);
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px var(--space-sm);
  border-radius: 999px;
}
.nav-style-switch__btn.is-active { background: var(--dark); color: #fff; }
/* Event rows in the menu: baseline-align the date with the event title's
   first line (not top-aligned). */
.split-list-sub .product-info__title-row { align-items: baseline; }
.split-layout__right { min-width: 0; }

/* Post content inside the panel uses the native column grid (.layout-row /
   .layout-column), panel-relative — no bespoke override. Because the column
   grid and the block grid share --block-gap, a half-panel column (--1-2) in
   the 2/3 panel resolves to exactly one carousel-portrait width (--block-1-3),
   so image blocks still line up with the carousel while every ratio
   (1/2+1/2, 1/3+2/3, 2/3+1/3, ...) stays available for layout variety. */
/* Standalone post paragraphs (About / Method) — half width, a two-column
   feel, not a full-bleed line. */
.split-layout__right .media-row:not(.layout-row) .paragraph-body { width: var(--block-1-2); }