/* ============================================================
   FARM PROFILE — "Provisions & Glass" (V4) page anatomy
   Source of truth: frontend-redesign/variant-4-provisions-glass/
   provisions-glass.html (profile view) + DESIGN.md.

   Scope: farm-profile.html ONLY. Page-scoped classes are prefixed
   fpv4-. Loaded LAST so it wins ties against design-system-compat
   and mobile-responsive where the V4 anatomy supersedes them.
   ============================================================ */

:root {
  /* --- V4 component tokens (page-scoped) --- */
  --fpv4-matte: var(--surface-card);
  --fpv4-cream-90: rgba(253, 251, 247, 0.90);
  --fpv4-cream-80: rgba(253, 251, 247, 0.80);
  --fpv4-hairline: rgba(253, 251, 247, 0.22);
  --fpv4-hairline-warm: rgba(139, 125, 107, 0.30);
  --fpv4-leader-dot: rgba(45, 42, 38, 0.38);
  --fpv4-glance-rule: rgba(45, 42, 38, 0.12);
  /* framer's warm fillet — honey pulled toward brown */
  --fpv4-fillet: #AC7F3F;
  --fpv4-fillet: color-mix(in srgb, var(--honey-500) 45%, var(--brown-500));
  --fpv4-frame-bevel: inset 0 1px 0 rgba(253, 251, 247, 0.7), inset 0 -1px 0 rgba(139, 125, 107, 0.16);
  /* stamps */
  --fpv4-stamp-ink: var(--green-700);
  --fpv4-stamp-ink-honey: #8F7440;
  --fpv4-stamp-ink-honey: color-mix(in srgb, var(--honey-500) 30%, var(--text-secondary));
  --fpv4-stamp-wash: rgba(253, 251, 247, 0.78);
  /* letterpress bites */
  --fpv4-btn-edge: #2D3A27;
  --fpv4-btn-edge: color-mix(in srgb, var(--green-800) 60%, var(--text-primary));
  --fpv4-btn-edge-blue: #2C3E4E;
  --fpv4-btn-edge-blue: color-mix(in srgb, var(--blue-700) 60%, var(--text-primary));
  --fpv4-btn-lift: 0 1px 2px rgba(45, 42, 38, 0.22);
  /* MTO / honey note ink (AA on cream) */
  --fpv4-honey-ink: #8B6F1A;
  /* Flat pasture ink field: the AI/farm-profile accent pass removes the old
     radial lighting washes, gradient edge, shimmer layer, and glow stack. */
  --fpv4-slab-bg: var(--green-800);
  --fpv4-slab-shadow: inset 0 0 0 1px rgba(253, 251, 247, 0.10), var(--shadow-lifted-float);
}

/* ============================================================
   SMALL-CAPS VOICE — Brygada 1918 600, uppercased + letterspaced
   ============================================================ */
.fpv4-smcp {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   THE GREEN GROUND — flat pasture ink + ruled edge
   ============================================================ */
.fpv4-ground {
  position: relative;
  overflow: hidden;
  overflow: clip;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--green-800) 78%, var(--text-primary));
  border-top: 4px solid var(--green-600);
  background: var(--fpv4-slab-bg);
  box-shadow: var(--fpv4-slab-shadow);
  color: var(--text-inverse);
  padding: 44px 40px 48px;
  margin-bottom: 40px;
}
.fpv4-ground::before,
.fpv4-ground::after { content: none; }
.fpv4-ground-content {
  position: relative;
  z-index: 1;
}
/* cream panels inside the ground get the green focus ring; controls
   directly on the ground use honey */
.fpv4-ground :focus-visible { outline: 2px solid var(--honey-500); outline-offset: 2px; }
.fpv4-panel :focus-visible { outline: 2px solid var(--green-600); outline-offset: 2px; }

/* ============================================================
   HERO — matted frame + placard on the ground
   ============================================================ */
/* neutralize the legacy hero rules aimed at the old photo-backdrop hero */
.fpv4-hero.farm-hero-banner {
  background: transparent !important;
  height: auto !important;
  overflow: visible !important;
}
.fpv4-hero.farm-hero-banner::after { content: none; }

.fpv4-frame {
  border: 1px solid var(--border-warm);
  background: var(--fpv4-matte);
  padding: 10px;
  box-shadow: var(--fpv4-frame-bevel);
  border-radius: 0;
}
.fpv4-photo {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  aspect-ratio: 4 / 3;
  background: var(--surface-linen);
}
.fpv4-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.96) sepia(0.06);
  border-radius: 0;
}
/* warm fillet drawn inside the photo edge */
.fpv4-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 8px;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px var(--fpv4-fillet);
  z-index: 2;
}
/* no-photo product placeholder: linen well + engraved plate art
   (js getPlaceholderArt → /static/img/engravings/ph-*.webp) */
.fpv4-photo .fpv4-photo-ph {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-linen);
}
.fpv4-photo .fpv4-photo-ph img.fs-ph-art {
  position: static;
  inset: auto;
  width: 66%;
  height: 82%;
  object-fit: contain;
  filter: none;
}
/* no-photo HERO fallback: linen well + sprout monogram */
.fpv4-photo-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--green-600);
  background: var(--surface-linen);
}
.fpv4-photo-fallback svg { display: block; opacity: 0.75; }

.fpv4-hero-frame {
  max-width: 880px;
  margin-inline: auto;
  position: relative;
  /* framer's wide bottom mat — the stamps live here */
  padding-bottom: 64px;
}
.fpv4-hero-frame .fpv4-photo { aspect-ratio: 16 / 9; }

/* ── certification stamps — clustered bottom-right of the matte,
      overlapping the photo edge ── */
.fpv4-stamp-cluster {
  position: absolute;
  right: -14px;
  bottom: -12px;
  z-index: 3;
  display: flex;
  align-items: flex-end;
  pointer-events: none;
}
/* #farm-badges is the JS-owned container; its stamps join the row */
#farm-badges.fpv4-stamps { display: contents; }
.fpv4-stamp {
  display: block;
  flex: none;
  width: 112px;
  height: 112px;
  margin-left: -21px;
  color: var(--fpv4-stamp-ink);
  transform: rotate(var(--tilt, 0deg));
}
.fpv4-stamp svg { display: block; width: 100%; height: 100%; overflow: visible; }
.fpv4-stamp--honey { color: var(--fpv4-stamp-ink-honey); }
/* Founding Farm: the engraved gold seal — larger than the ring stamps.
   Transparent: the .webp carries its own alpha; no CSS backplate. */
.fpv4-stamp--founding {
  width: 140px;
  height: 140px;
}
.fpv4-stamp--founding img { display: block; width: 100%; height: 100%; }

/* toggled visible by JS — must beat Tailwind's .hidden when shown */
#farm-pickup-badge.fpv4-stamp:not(.hidden) { display: block; }
.fpv4-stamp-more {
  align-self: flex-end;
  /* order pushes the marker past the pickup stamp (a later flex sibling via
     #farm-badges' display:contents) so it is never occluded */
  order: 99;
  margin: 0 0 10px 4px;
  color: var(--fpv4-cream-90);
  pointer-events: auto;
  text-shadow: 0 1px 2px rgba(45, 42, 38, 0.35);
}
/* stamp SVG construction (shared defs live inline in farm-profile.html) */
.fpv4-stamp .st-wash { fill: var(--fpv4-stamp-wash); }
.fpv4-stamp .st-band { fill: none; stroke: currentColor; stroke-width: 3.4; }
.fpv4-stamp .st-dash { fill: none; stroke: currentColor; stroke-width: 1.1; stroke-dasharray: 1 2.7; stroke-linecap: round; }
.fpv4-stamp .st-line { fill: none; stroke: currentColor; stroke-width: 1.1; }
.fpv4-stamp .st-rule { fill: none; stroke: currentColor; stroke-width: 1.2; }
.fpv4-stamp .st-sep { fill: currentColor; }
.fpv4-stamp text {
  fill: currentColor;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.1em;
}
.fpv4-stamp text.st-arc { font-size: 10px; letter-spacing: 0.09em; }

/* ── gallery placard beneath the photo ── */
.fpv4-placard {
  position: relative;
  text-align: center;
  margin-top: 26px;
}
.fpv4-placard h1#farm-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 33px;
  line-height: 1.15;
  color: var(--text-inverse);
  text-wrap: balance;
  margin: 0;
}
#farm-location {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--fpv4-cream-90);
  margin: 10px 0 0;
}
#farm-mission {
  color: var(--fpv4-cream-90);
  font-size: 15px;
  line-height: 1.65;
  max-width: 60ch;
  margin: 14px auto 0;
  text-wrap: balance;
}
#farm-share-btn {
  margin-top: 20px;
  background: transparent;
  color: var(--text-inverse);
  border: 1px solid var(--fpv4-cream-90);
  border-radius: var(--radius-sm);
  padding: 9px 22px;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  box-shadow: inset 0 -1px 0 rgba(45, 42, 38, 0.35);
  transition: background-color 150ms var(--ease-out), box-shadow 150ms var(--ease-out), transform 150ms var(--ease-out);
}
#farm-share-btn:hover { background: var(--fpv4-hairline); }
#farm-share-btn:active { transform: translateY(1px); box-shadow: none; }

/* ============================================================
   QUIET CREAM PANELS on the ground
   ============================================================ */
.fpv4-panel {
  background: var(--fpv4-matte);
  color: var(--text-primary);
  border-radius: 10px;
  padding: 30px 28px 34px;
}
.fpv4-info-region { margin-top: 40px; }

/* ============================================================
   INFO REGION — one placement system for every information card.
   The 12-column desktop grid gives About an 8/12 reading width and
   Contact 4/12; every sibling then shares the same half-width tracks.
   Grid auto-placement closes over hidden optional cards without the
   source-order jumps and ragged column bottoms caused by CSS columns.
   ============================================================ */
.fpv4-info-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 24px;
  align-items: stretch;
}
.fpv4-info-card {
  grid-column: span 6;
  min-width: 0;
  height: 100%;
}
.fpv4-info-card--about { grid-column: span 8; }
.fpv4-info-card--contact { grid-column: span 4; }
.fpv4-info-card--wide { grid-column: 1 / -1; }
/* A profile with no contact fields should not retain a narrow empty card or
   the four-column track reserved for it. */
.fpv4-info-grid:has(> .fpv4-info-card--contact.hidden) > .fpv4-info-card--about {
  grid-column: 1 / -1;
}
@media (max-width: 1023px) {
  .fpv4-info-grid { grid-template-columns: minmax(0, 1fr); }
  .fpv4-info-card,
  .fpv4-info-card--about,
  .fpv4-info-card--contact,
  .fpv4-info-card--wide { grid-column: 1; }
}
@media (max-width: 640px) {
  .fpv4-info-grid { gap: 16px; }
}

.fpv4-head {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 24px;
  line-height: 1.25;
  color: var(--text-primary);
  margin: 0 0 16px;
  text-wrap: balance;
}
.fpv4-head--sub { font-size: 19px; margin-bottom: 12px; }

/* About — serif reading voice, italic first line (V4) */
#farm-description {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 16.5px;
  line-height: 1.75;
  color: var(--text-primary);
  max-width: 65ch;
}
#farm-description::first-line { font-style: italic; }

/* ── plain label/value rows with warm hairline separators ── */
.fpv4-rows > * + * { border-top: 1px solid var(--fpv4-hairline-warm); }
.fpv4-row { padding: 12px 0; }
.fpv4-rows > :first-child .fpv4-row,
.fpv4-row:first-child { padding-top: 2px; }
.fpv4-row-label {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-secondary);
}
.fpv4-row-value {
  display: block;
  margin-top: 3px;
  font-size: 15px;
  color: var(--text-primary);
  overflow-wrap: anywhere;
}
a .fpv4-row-value, .fpv4-row a { text-decoration: none; color: var(--text-primary); }
.fpv4-row a:hover .fpv4-row-value,
a:hover .fpv4-row-value { text-decoration: underline; text-decoration-color: var(--honey-500); text-underline-offset: 3px; }

/* social links: quiet text links, not brand-colored icon circles
   (markup emitted by updateSocialMedia) */
#social-links { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.fpv4-social-link {
  display: inline-block;
  color: var(--green-700);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  padding: 2px 0;
  border-bottom: 1px solid var(--border-faint);
  transition: border-color 150ms var(--ease-out), color 150ms var(--ease-out);
}
.fpv4-social-link:hover { color: var(--green-600); border-bottom-color: var(--honey-500); }

/* ── dotted-leader ledger rows (Hours, Pickup windows, Shipping) ── */
.fpv4-ledger-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--fpv4-glance-rule);
}
.fpv4-ledger-row:last-child { border-bottom: 0; padding-bottom: 2px; }
.fpv4-ledger-row:first-child { padding-top: 2px; }
.fpv4-ledger-label {
  flex: 1 1 auto;
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
  white-space: nowrap;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-secondary);
}
.fpv4-leader {
  flex: 1 1 20px;
  min-width: 20px;
  height: 3px;
  align-self: baseline;
  background-image: radial-gradient(circle, var(--fpv4-leader-dot) 1px, transparent 1.4px);
  background-size: 7px 3px;
  background-repeat: repeat-x;
  background-position: left bottom;
}
.fpv4-ledger-value {
  margin-left: auto;
  flex: 0 1 auto;
  max-width: 62%;
  font-size: 14px;
  text-align: right;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.fpv4-ledger-row.is-today .fpv4-ledger-label,
.fpv4-ledger-row.is-today .fpv4-ledger-value {
  color: var(--fpv4-honey-ink);
  font-weight: 700;
}
.fpv4-ledger-note { font-size: 13px; color: var(--text-secondary); margin-top: 8px; }

/* Shipping-schedule card content is emitted by the shared
   pickup-schedule-display.js — restyle it in place. */
#pickup-schedule-content i[data-lucide],
#pickup-schedule-content svg { display: none !important; }
#pickup-schedule-content [class*="border-"] { border-color: var(--fpv4-glance-rule) !important; }
#pickup-schedule-content .font-semibold { font-variant-numeric: tabular-nums; }

/* ── gallery: modest framed thumbs that flow in a balanced grid ── */
#farm-gallery-grid.fpv4-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
}
.fpv4-gallery-thumb .fpv4-photo { aspect-ratio: 4 / 3; }
.fpv4-gallery-thumb {
  cursor: pointer;
  padding: 6px;
  transition: transform 200ms var(--ease-spring), box-shadow 200ms var(--ease-out);
}
.fpv4-gallery-thumb:hover {
  transform: translateY(-2px);
  box-shadow: var(--fpv4-frame-bevel), var(--shadow-md);
}

/* ============================================================
   SHOP PANEL — toolbar, tabs, notes
   ============================================================ */
.fpv4-shop-panel { margin-top: 32px; }
/* farm-color accent rule (JS recolors it via profile_primary_color) */
.fpv4-shop-accent {
  height: 3px;
  border-radius: 2px;
  background: var(--honey-500);
  margin-bottom: 18px;
}
.fpv4-shop-lead {
  font-size: 17px;
  font-weight: 400;
  color: var(--text-primary);
  margin: 0;
}
.fpv4-note {
  font-family: var(--font-display);
  font-weight: 500;
  font-style: italic;
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-secondary);
  margin: 12px 0 0;
  max-width: 62ch;
}
.fpv4-note strong { font-weight: 700; }
.fpv4-note i { display: none; }

/* Flash Sale pinned section — reuses panel/ledger language; sits above shop tabs */
.fpv4-flash-section {
  margin-top: 22px;
  margin-bottom: 8px;
  padding: 18px 16px 20px;
  border: 1px solid rgba(139, 125, 107, 0.45);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(253, 248, 235, 0.95), rgba(253, 251, 247, 0.9));
  box-shadow: inset 0 1px rgba(253, 251, 247, 0.7);
}
.fpv4-flash-banner__head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.fpv4-flash-banner__icon {
  font-size: 18px;
  line-height: 1;
}
.fpv4-flash-banner__copy {
  margin: 4px 0 0;
  font-size: 15px;
  color: var(--text-primary);
  line-height: 1.5;
}
.fpv4-flash-banner__instructions {
  margin: 8px 0 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.5;
}
.fpv4-flash-banner__soldout {
  margin: 8px 0 0;
  font-size: 13px;
  font-weight: 600;
  color: #9a3412;
}
.fpv4-flash-banner--ended .fpv4-flash-banner__copy {
  color: var(--text-secondary);
}
.fpv4-flash-grid {
  margin-top: 14px;
}
.fpv4-flash-stock {
  font-size: 12px;
  font-weight: 700;
  color: #b45309;
  letter-spacing: 0.02em;
}
.fpv4-flash-add-row {
  width: 100%;
}
.fpv4-flash-qty {
  flex: 0 0 auto;
  min-width: 108px;
}
.fpv4-flash-add-row .flash-add-to-cart-btn {
  flex: 1 1 auto;
}
button.fs-flash-pill {
  cursor: pointer;
  border: 0;
  font: inherit;
}

/* Shop / Animal Share tabs — quiet text tabs (honey underline comes from
   the promoted compat rules on .farm-profile-tab-btn) */
#farm-profile-tabs {
  border-bottom: 1px solid var(--fpv4-hairline-warm) !important;
  margin-top: 24px;
  gap: 26px !important;
  padding: 0 !important;
  /* Clearance for the on-arrival scroll (farm-profile.js
     _scrollToInventoryOnArrival) so page chrome never covers the tab bar. */
  scroll-margin-top: 88px;
}
#farm-profile-tabs .farm-profile-tab-btn {
  padding: 12px 2px 10px !important;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: none;
}
#farm-profile-tabs .farm-profile-tab-btn .text-sm { font-size: 12px; text-transform: none; letter-spacing: 0.02em; }

/* toolbar row */
.fpv4-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  padding: 18px 0 4px;
}
.fpv4-field {
  /* width/margin/border explicitly reset: mobile-responsive.css's
     (min-width:320px) base forces select/input to width:100% + 2px border +
     bottom margin at EVERY width */
  width: auto;
  margin: 0;
  background: var(--text-inverse);
  color: var(--text-primary);
  border: 1px solid var(--border-warm);
  border-radius: 8px;
  padding: 9px 12px;
  font: 400 15px/1.4 var(--font-body);
}
.fpv4-field::placeholder { color: #7A6F5E; }
.fpv4-field--search { flex: 1 1 200px; min-width: 0; max-width: 300px; }
.fpv4-sort-label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-secondary);
}

/* dynamic category tab links (JS-emitted) — quiet text + honey underline.
   The active button keeps the legacy `bg-green-600 text-white` classes for
   the E2E contract; these rules repaint them as V4 text links. */
#category-tabs { margin-top: 18px; }
#category-tabs .fpv4-cat-link {
  position: relative;
  background: transparent !important;
  color: var(--text-secondary) !important;
  border: 0;
  border-radius: 0;
  box-shadow: none !important;
  padding: 6px 2px !important;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  white-space: nowrap;
  cursor: pointer;
  transition: color 150ms var(--ease-out);
}
#category-tabs .fpv4-cat-link::after {
  content: '';
  position: absolute;
  left: -3px;
  right: -3px;
  bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--honey-500);
  opacity: 0;
  transition: opacity 150ms var(--ease-out);
}
#category-tabs .fpv4-cat-link:hover { color: var(--text-primary) !important; }
#category-tabs .fpv4-cat-link:hover::after { opacity: 0.4; }
#category-tabs .fpv4-cat-link.bg-green-600 { color: var(--text-primary) !important; }
#category-tabs .fpv4-cat-link.bg-green-600::after { opacity: 1; }
#category-tabs > .flex { gap: 6px 22px !important; }

/* category section heads (horizontal-scroll view) */
.category-section .fpv4-cat-head {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 20px;
  color: var(--text-primary);
}
.category-section .fpv4-cat-head .fpv4-cat-count {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 13px;
  color: var(--text-muted);
}
/* scroll affordances recolored for the cream panel */
.scroll-arrow {
  background: var(--fpv4-matte) !important;
  border-color: var(--border-warm) !important;
  color: var(--text-secondary) !important;
}
.scroll-arrow:hover { background: var(--surface-linen) !important; }
.fpv4-scroll-fade {
  background: linear-gradient(to left, var(--fpv4-matte), transparent) !important;
}

/* scroll-affordance hint: while a row auto-peeks (JS adds .fpv4-hinting on
   the wrapper for one cycle, then removes it / cancels on interaction),
   keep the right arrow + fade lit and nudge the chevron so the motion reads
   as "there's more this way". Nudging the inner icon — not the button —
   avoids clobbering the arrow's positioning transform. */
@keyframes fpv4-arrow-nudge {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(4px); }
}
.fpv4-hinting .scroll-arrow-right { opacity: 1 !important; }
.fpv4-hinting .fpv4-scroll-fade { opacity: 1 !important; }
.fpv4-hinting .scroll-arrow-right svg,
.fpv4-hinting .scroll-arrow-right i { animation: fpv4-arrow-nudge 0.85s ease-in-out 3; }

/* inventory grid density */
#inventory-grid { gap: 40px 24px; }
#inventory-categories-view .category-section + .category-section { margin-top: 8px; }

/* ============================================================
   PRODUCT CARD ANATOMY — frame + aligned type on cream
   ============================================================ */
.fpv4-product-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100%;
  width: 100%;
}
.fpv4-product-card[data-has-options="true"] { cursor: pointer; }
.fpv4-product-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 17.5px;
  line-height: 1.35;
  color: var(--text-primary);
  margin: 12px 0 0;
}
.fpv4-product-card .item-description-wrapper { margin-top: 4px; }
.fpv4-product-card .item-description {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-secondary);
}
/* meta tokens: category / fulfillment / cold-chain as quiet text */
.fpv4-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 3px 12px;
  margin-top: 7px;
}
.fpv4-token {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
  white-space: nowrap;
}
.fpv4-token--quiet { color: var(--text-muted); }
.fpv4-token--warn { color: var(--terra-500); }
.fpv4-token--cold { color: var(--blue-700); }

/* calm price row */
.fpv4-price-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 9px;
}
.fpv4-price { min-width: 0; }
.fpv4-price .text-green-600,
.fpv4-price .fs-price-now {
  color: var(--text-primary) !important;
  font-family: var(--font-display);
  font-weight: 600 !important;
  font-size: 20px;
  line-height: 1.25;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}
.fpv4-price .text-xs,
.fpv4-price .text-sm,
.fpv4-price .text-gray-500 {
  font-family: var(--font-body);
  font-weight: 400 !important;
  font-size: 12.5px;
  color: var(--text-secondary) !important;
}
.fpv4-price .fs-price-was { font-size: 13px; }
.fpv4-stock-out {
  font-size: 13px;
  font-style: italic;
  color: var(--text-secondary);
}
/* sold-out photo treatment */
.fpv4-product-card.is-soldout .fpv4-photo img,
.variant-group-card.is-soldout .fpv4-photo img {
  opacity: 0.55;
  filter: saturate(0.6) sepia(0.06);
}
/* MTO deadline — quiet honey-tinted note */
.fpv4-mto-note {
  font-family: var(--font-display);
  font-weight: 500;
  font-style: italic;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--fpv4-honey-ink);
  margin-top: 6px;
}
.fpv4-mto-note i { display: none; }
/* "N in cart" chip on the photo */
.fpv4-incart-chip {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 5;
  background: var(--green-800);
  color: #FDFBF7;
  font: 600 11px/1 var(--font-body);
  padding: 4px 10px;
  border-radius: 2px;
  border: 0;
}
/* on-photo MTO chip, quieted to the honey family */
.fpv4-photo .fs-photo-badges .fpv4-mto-chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 2px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  color: var(--text-primary);
  background: rgba(253, 251, 247, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.85);
}

/* ── letterpress buttons ── */
.fpv4-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--green-700);
  color: var(--text-inverse);
  border: 0;
  border-radius: var(--radius-sm);
  padding: 11px 20px;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.01em;
  text-align: center;
  cursor: pointer;
  text-decoration: none;
  box-shadow: inset 0 -1px 0 var(--fpv4-btn-edge), var(--fpv4-btn-lift);
  transition: background-color 150ms var(--ease-out), box-shadow 150ms var(--ease-out), transform 150ms var(--ease-out);
}
.fpv4-btn:hover { background: var(--green-600); }
.fpv4-btn:active { transform: translateY(1px); box-shadow: inset 0 -1px 0 var(--fpv4-btn-edge); }
.fpv4-btn--block { width: 100%; }
.fpv4-btn i[data-lucide] { width: 15px; height: 15px; }
/* store-action blue: optioned items keep lake-blue letterpress */
.fpv4-btn--blue { background: var(--blue-600); box-shadow: inset 0 -1px 0 var(--fpv4-btn-edge-blue), var(--fpv4-btn-lift); }
.fpv4-btn--blue:hover { background: var(--blue-700); }
.fpv4-btn--blue:active { transform: translateY(1px); box-shadow: inset 0 -1px 0 var(--fpv4-btn-edge-blue); }
/* disabled: quietly matte, not translucent */
.fpv4-btn--matte,
.fpv4-btn[disabled] {
  background: var(--surface-linen);
  color: var(--text-secondary);
  box-shadow: none;
  cursor: not-allowed;
}
.fpv4-btn--matte:hover, .fpv4-btn[disabled]:hover { background: var(--surface-linen); }
.fpv4-btn--matte:active, .fpv4-btn[disabled]:active { transform: none; }
.fpv4-product-card .fpv4-actions { margin-top: auto; padding-top: 12px; }

/* ── in-cart quantity stepper: quiet bordered squares ── */
.fpv4-stepper {
  background: var(--text-inverse);
  border: 1px solid var(--border-faint);
  border-radius: var(--radius-md);
  padding: 10px 12px;
}
.fpv4-qty-btn {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--fpv4-matte);
  border: 1px solid var(--border-faint);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: 16px;
  line-height: 1;
  padding: 0;
  cursor: pointer;
  box-shadow: inset 0 -1px 0 var(--fpv4-hairline-warm);
  transition: border-color 150ms var(--ease-out), color 150ms var(--ease-out), box-shadow 150ms var(--ease-out), transform 150ms var(--ease-out);
}
.fpv4-qty-btn:hover { border-color: var(--border-warm); color: var(--text-primary); }
.fpv4-qty-btn:active { transform: translateY(1px); box-shadow: none; }
.fpv4-qty-btn[disabled] { opacity: 0.4; cursor: not-allowed; }
.fpv4-qty-num {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
  color: var(--text-primary);
  min-width: 20px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.fpv4-remove {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 100%;
  margin-top: 8px;
  background: none;
  border: 0;
  padding: 2px 0;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  transition: color 150ms var(--ease-out);
}
.fpv4-remove:hover { color: var(--terra-500); }
.fpv4-remove i[data-lucide] { width: 12px; height: 12px; }

/* variant group price/count row */
.fpv4-group-foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  padding-top: 10px;
}
.fpv4-group-count {
  font-size: 13px;
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
}
.fpv4-group-price {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 19px;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.variant-group-card.is-soldout .fpv4-group-price { color: var(--text-muted); text-decoration: line-through; }
/* variant group card carries the same unboxed anatomy */
.variant-group-card.fpv4-product-card {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  opacity: 1;
}
.variant-group-card.fpv4-product-card:hover { box-shadow: none; transform: none; }
.variant-group-card.fpv4-product-card:hover .fpv4-frame {
  box-shadow: var(--fpv4-frame-bevel), var(--shadow-md);
}
.variant-group-card.fpv4-product-card:active { transform: none; }

/* ============================================================
   VARIANT SELECTOR OVERLAY — cream matte product grammar
   Structural position/flex here so shells stay correct even when
   the Tailwind CDN utilities are unavailable (diagnostics mock).
   ============================================================ */
#variant-modal-overlay.fs-paper-overlay,
#variant-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: block;
  background-color: rgba(45, 42, 38, .55);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
#variant-modal-overlay.hidden { display: none !important; }
#variant-modal-backdrop {
  position: absolute;
  inset: 0;
  background-color: transparent !important;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
#variant-modal-container {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  background: var(--surface-card, #F5F0E8) !important;
  color: var(--text-primary, #2D2A26);
  border: 1px solid var(--border-defined, #6B5E50);
  border-radius: 10px;
  box-shadow: 0 12px 28px rgba(45, 42, 38, .16);
  width: min(calc(100vw - 48px), 720px);
  max-height: min(80dvh, 760px);
  max-width: none;
}
/* JS open/close toggles these utilities — keep transform-based states working */
#variant-modal-container.translate-y-full { transform: translate(-50%, 100%); }
#variant-modal-container .fs-paper-overlay__header,
#variant-modal-container > .fs-paper-overlay__header {
  padding: 20px 24px 16px;
  background: var(--surface-card, #F5F0E8);
  border-bottom: 3px double var(--border-defined, #6B5E50);
  border-top: 0;
  border-left: 0;
  border-right: 0;
}
#variant-modal-title {
  font-family: var(--font-body);
  font-size: 21px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--text-primary, #2D2A26);
}
#variant-modal-subtitle {
  font-size: 13px;
  color: var(--text-secondary, #5C4A32);
}
#variant-modal-grid {
  flex: 1 1 auto;
  overflow-y: auto;
  min-height: 0;
  background: var(--surface-card, #F5F0E8);
  padding: 20px 24px;
}
#variant-modal-footer { flex-shrink: 0; }
#variant-modal-items {
  gap: 14px;
}
.variant-modal-drag-handle {
  width: 36px;
  height: 3px;
  background: var(--border-defined, #6B5E50);
  border-radius: 2px;
}
#variant-modal-footer {
  background: var(--surface-linen, #E8E2D8) !important;
  border-top: 3px double var(--border-defined, #6B5E50) !important;
  border-bottom: 0;
  border-left: 0;
  border-right: 0;
  border-radius: 0 !important;
  padding: 16px 24px;
}
#variant-modal-cart-summary {
  font-size: 13px;
  color: var(--text-secondary, #5C4A32);
}
#variant-modal-done-btn.fpv4-btn {
  border-radius: 8px;
  min-height: 44px;
  padding: 11px 20px;
}
#close-variant-modal.fs-paper-overlay__close {
  width: 32px;
  height: 32px;
  min-height: 32px;
  border-radius: 8px;
}

/* variant modal cards — framed product family, compact */
.variant-modal-card {
  background: var(--surface-card, #F5F0E8) !important;
  border: 1px solid var(--border-warm, #8B7D6B) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  overflow: hidden;
}
.variant-modal-card.is-selected,
.variant-modal-card.border-green-600 {
  border-color: var(--border-warm, #8B7D6B) !important;
  border-left: 4px solid var(--green-700, #37671E) !important;
  box-shadow: none !important;
  outline: none;
  ring: none;
}
.variant-modal-card.is-soldout {
  opacity: 0.62;
  filter: none;
}
.variant-modal-card__title,
.variant-modal-card .fpv4-product-name {
  font-size: 16px !important;
  font-weight: 600 !important;
  margin-top: 0 !important;
  color: var(--text-primary, #2D2A26);
}
.variant-modal-card__support,
.variant-modal-card .text-xs.text-gray-500 {
  font-size: 12.5px;
  color: var(--text-secondary, #5C4A32) !important;
  margin-top: 2px;
}
.variant-modal-card .fpv4-price .text-green-600,
.variant-modal-card .fpv4-price .fs-price-now {
  font-size: 18px !important;
  font-weight: 600 !important;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary, #2D2A26) !important;
}
.variant-modal-card .fpv4-stepper { padding: 8px 10px; }

/* ============================================================
   EMBEDDED PRE-ORDER WIZARD — butcher folio + pasture ledger
   ============================================================ */
#pre-order-wizard-overlay.fs-paper-overlay,
#pre-order-wizard-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: block;
  background-color: rgba(45, 42, 38, .55);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
#pre-order-wizard-overlay.hidden { display: none !important; }
#pre-order-wizard-backdrop {
  position: absolute;
  inset: 0;
  background-color: transparent !important;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
#pre-order-wizard-modal {
  position: absolute;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--surface-card, #F5F0E8) !important;
  color: var(--text-primary, #2D2A26);
  border: 1px solid var(--border-defined, #6B5E50);
  border-radius: 10px;
  box-shadow: 0 12px 28px rgba(45, 42, 38, .16);
  top: 24px;
  right: 24px;
  bottom: 24px;
  left: 24px;
  max-width: 1120px;
  width: auto;
  margin: auto;
  opacity: 1;
}
#pre-order-wizard-modal.opacity-0 { opacity: 0; }
#pre-order-wizard-modal.scale-95 { transform: scale(0.95); }
#pre-order-wizard-modal > .fs-paper-overlay__header {
  padding: 20px 24px 16px;
  background: var(--surface-card, #F5F0E8);
  border-bottom: 3px double var(--border-defined, #6B5E50);
  border-top: 0;
  border-left: 0;
  border-right: 0;
}
#pre-order-wizard-modal .wizard-header-mark {
  width: auto;
  height: auto;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: var(--green-700, #37671E);
  margin-right: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: none !important;
}
#pre-order-wizard-modal .wizard-header-mark i {
  font-size: 18px;
  color: var(--green-700, #37671E);
  line-height: 1;
}
#wizard-item-name {
  font-size: 20px !important;
  font-weight: 700 !important;
  line-height: 1.25;
  color: var(--text-primary, #2D2A26) !important;
}
#wizard-farm-name {
  font-size: 12px !important;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-secondary, #5C4A32) !important;
}
#pre-order-wizard-scroll {
  flex: 1 1 auto;
  overflow-y: auto;
  min-height: 0;
  background: var(--surface-primary, #EDE6DA);
  padding: 20px 24px;
}
#wizard-content {
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
}
#pre-order-wizard-overlay #wizard-main {
  background: var(--surface-card, #F5F0E8);
  border: 1px solid var(--border-defined, #6B5E50);
  border-top: 4px solid var(--green-700, #37671E);
  border-radius: 10px;
  padding: 28px;
  box-shadow: none;
}

/* loading / error status dockets */
#pre-order-wizard-overlay #wizard-loading,
#pre-order-wizard-overlay #wizard-error,
#pre-order-wizard-overlay .wizard-status-docket {
  width: min(100%, 720px);
  margin: 28px auto;
  background: var(--surface-card, #F5F0E8);
  border: 1px solid var(--border-warm, #8B7D6B);
  border-radius: 10px;
  padding: 44px 24px;
  box-shadow: none;
}
#pre-order-wizard-overlay #wizard-loading,
#pre-order-wizard-overlay .wizard-status-docket--loading {
  border-top: 4px solid var(--green-700, #37671E);
}
#pre-order-wizard-overlay #wizard-error,
#pre-order-wizard-overlay .wizard-status-docket--error,
#pre-order-wizard-overlay .wizard-error-docket {
  border-top: 4px solid var(--terra-500, #C4652A);
}
#pre-order-wizard-overlay #wizard-loading i,
#pre-order-wizard-overlay #wizard-error i,
#pre-order-wizard-overlay .wizard-error-docket__icon {
  display: inline-block;
  width: auto;
  height: auto;
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--green-700, #37671E);
  font-size: 1.75rem;
  margin-bottom: 1rem;
}
#pre-order-wizard-overlay #wizard-error i,
#pre-order-wizard-overlay .wizard-error-docket__icon {
  color: var(--terra-500, #C4652A);
}
#pre-order-wizard-overlay .wizard-error-docket__msg,
#pre-order-wizard-overlay #wizard-error p {
  color: var(--terra-500, #C4652A);
  margin: 0;
}

/* flat folio step tabs (preserve mobile active-label contract) */
#pre-order-wizard-overlay .wizard-steps::before {
  top: 14px;
  height: 1px;
  background: var(--border-warm, #8B7D6B);
}
#pre-order-wizard-overlay .wizard-step-circle {
  width: 28px !important;
  height: 28px !important;
  border-radius: 2px !important;
  background: var(--surface-card, #F5F0E8);
  color: var(--text-secondary, #5C4A32);
  border: 1px solid var(--border-defined, #6B5E50);
  box-shadow: none !important;
  transform: none !important;
  font-size: 12px;
  font-weight: 700;
}
#pre-order-wizard-overlay .wizard-step.active .wizard-step-circle {
  background: var(--green-700, #37671E);
  border-color: var(--green-700, #37671E);
  color: var(--text-inverse, #FDFBF7);
  box-shadow: none !important;
  transform: none !important;
}
#pre-order-wizard-overlay .wizard-step.completed .wizard-step-circle {
  background: var(--surface-card, #F5F0E8);
  border-color: var(--green-700, #37671E);
  color: var(--green-700, #37671E);
  box-shadow: none !important;
}
#pre-order-wizard-overlay .wizard-step.completed:hover .wizard-step-circle {
  background: var(--surface-linen, #E8E2D8);
  box-shadow: none !important;
}
#pre-order-wizard-overlay .wizard-step-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-secondary, #5C4A32);
  max-width: 88px;
}
#pre-order-wizard-overlay .wizard-step.active .wizard-step-label,
#pre-order-wizard-overlay .wizard-step.completed .wizard-step-label {
  color: var(--green-700, #37671E);
}

/* generated cards / panels — paper ledger, no glow */
#pre-order-wizard-overlay :is(.portion-card, .profile-card, .profile-card-v2, .section-card, .cut-section, .toggle-card, .profile-options-panel, .yield-bar-full, .summary-card, .fee-breakdown, .step5-fee-section) {
  background: var(--surface-card, #F5F0E8);
  border: 1px solid var(--border-warm, #8B7D6B);
  border-radius: 8px;
  box-shadow: none !important;
}
#pre-order-wizard-overlay :is(.portion-card, .profile-card, .profile-card-v2):hover {
  transform: none;
  box-shadow: none !important;
}
#pre-order-wizard-overlay :is(.portion-card, .profile-card, .profile-card-v2).selected {
  background: var(--surface-card, #F5F0E8);
  border: 1px solid var(--border-warm, #8B7D6B);
  border-left: 4px solid var(--green-700, #37671E);
  box-shadow: none !important;
}
#pre-order-wizard-overlay :is(.section-card-header, .cut-section-header, .toggle-card-options, .sticky-bottom-bar) {
  background: var(--surface-linen, #E8E2D8);
  border-color: var(--border-faint, #B5AD9E);
  background-image: none !important;
}
#pre-order-wizard-overlay :is(.fee-breakdown, .step5-fee-section, .summary-card) {
  background: var(--surface-linen, #E8E2D8);
  border-color: var(--border-warm, #8B7D6B);
}
#pre-order-wizard-overlay .summary-card {
  border-top: 3px double var(--border-defined, #6B5E50);
}
#pre-order-wizard-overlay :is(.summary-row .font-bold, .summary-total, .deposit-amount, .order-total, [class*="total"]) {
  color: var(--text-primary, #2D2A26) !important;
}
#pre-order-wizard-overlay .summary-card .summary-row:last-child span:last-child,
#pre-order-wizard-overlay .wizard-success-docket .summary-card .font-mono {
  font-size: 20px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary, #2D2A26);
}

/* nav row */
#pre-order-wizard-overlay .wizard-nav-row {
  border-top: 1px solid var(--border-defined, #6B5E50);
  padding-top: 18px;
  margin-top: 2rem;
}
.wizard-nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}
.wizard-nav-btn--back {
  background: var(--surface-card, #F5F0E8);
  color: var(--text-primary, #2D2A26);
  border: 1px solid var(--border-defined, #6B5E50);
  box-shadow: none;
}
.wizard-nav-btn--back:hover {
  background: var(--surface-linen, #E8E2D8);
  border-color: var(--border-defined, #6B5E50);
}
.wizard-nav-btn--continue {
  background: var(--green-700, #37671E);
  color: var(--text-inverse, #FDFBF7);
  border: 0;
  box-shadow: inset 0 -1px 0 var(--fpv4-btn-edge, #2D3A27), 0 1px 2px rgba(45, 42, 38, 0.22);
}
.wizard-nav-btn--continue:hover { background: var(--green-600, #477E25); }
.wizard-nav-btn--continue:disabled,
.wizard-nav-btn--continue[disabled] {
  background: var(--surface-linen, #E8E2D8);
  color: var(--text-secondary, #5C4A32);
  box-shadow: none;
  cursor: not-allowed;
}

/* success / error dockets + toast (shared semantic classes) */
.wizard-success-docket {
  border-top: 4px solid var(--green-700, #37671E);
  background: var(--surface-card, #F5F0E8);
  border-radius: 10px;
  padding: 28px 20px;
}
.wizard-success-docket__stamp {
  width: 54px;
  height: 54px;
  margin: 0 auto 1.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: 1px solid var(--green-700, #37671E);
  background: var(--surface-linen, #E8E2D8);
  color: var(--green-700, #37671E);
  font-size: 1.5rem;
  box-shadow: none;
}
.wizard-success-docket .summary-card {
  background: var(--surface-linen, #E8E2D8);
  border: 1px solid var(--border-warm, #8B7D6B);
  border-radius: 8px;
  box-shadow: none;
  border-top: 3px double var(--border-defined, #6B5E50);
}
.wizard-success-docket__status {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  background: var(--surface-card, #F5F0E8);
  color: var(--green-700, #37671E);
  border: 1px solid var(--green-700, #37671E);
}
.wizard-error-docket {
  border-top: 4px solid var(--terra-500, #C4652A);
}
.wizard-error-docket__icon {
  color: var(--terra-500, #C4652A) !important;
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.wizard-error-docket__msg {
  color: var(--terra-500, #C4652A);
}

/* no-results / empty state */
#no-inventory h3 { font-family: var(--font-display); font-weight: 600; }

/* MTO info banner — pull the purple card into the V4 voice (linen wash,
   honey ink) without touching its JS */
#mto-info-banner {
  background: var(--surface-linen) !important;
  border-color: var(--fpv4-hairline-warm) !important;
  border-radius: var(--radius-xl) !important;
}
#mto-info-banner h4 { color: var(--text-primary) !important; font-family: var(--font-display); }
#mto-info-banner p { color: var(--text-secondary) !important; }
#mto-info-banner .bg-purple-600 {
  background: var(--fpv4-honey-ink) !important;
  color: var(--text-inverse) !important;
}

/* ============================================================
   RESPONSIVE — phone-width cohesion (bottom nav present ≤768px)
   ============================================================ */
@media (max-width: 768px) {
  .fpv4-ground { padding: 26px 14px 30px; border-radius: 10px; margin-bottom: 28px; }
  .fpv4-panel { padding: 22px 16px 26px; }
  .fpv4-info-region { margin-top: 26px; }
  .fpv4-shop-panel { margin-top: 22px; }
  .fpv4-head { font-size: 21px; }

  /* stamps stay legible but stop dominating the photo */
  .fpv4-hero-frame { padding-bottom: 46px; }
  .fpv4-stamp-cluster { right: -6px; bottom: -8px; }
  .fpv4-stamp { width: 76px; height: 76px; margin-left: -14px; }
  .fpv4-stamp--founding { width: 94px; height: 94px; }

  /* fields: 16px floor so iOS doesn't zoom-on-focus; 44px touch targets */
  .fpv4-field { font-size: 16px; min-height: 44px; }
  .fpv4-btn { min-height: 44px; }
  .fpv4-qty-btn { width: 40px; height: 40px; }
  .fpv4-toolbar { gap: 8px 10px; }
  .fpv4-field--search { max-width: none; flex-basis: 100%; }
  /* selects share tidy rows instead of ragged natural widths */
  .fpv4-toolbar select.fpv4-field { flex: 1 1 40%; min-width: 0; }

  #inventory-grid { gap: 30px 16px; }

  #close-variant-modal.fs-paper-overlay__close,
  #pre-order-wizard-modal .fs-paper-overlay__close {
    min-width: 44px;
    min-height: 44px;
  }
  #variant-modal-done-btn.fpv4-btn,
  #pre-order-wizard-overlay .wizard-nav-btn {
    min-height: 44px;
  }
}

/* Bottom-sheet + compact wizard match Tailwind `lg` (1024) used by the HTML shell */
@media (max-width: 1023px) {
  #variant-modal-container {
    width: 100% !important;
    max-width: none !important;
    max-height: 88dvh !important;
    border-radius: 10px 10px 0 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    margin: 0 !important;
    transform: none;
  }
  #variant-modal-container.translate-y-full {
    transform: translateY(100%);
  }
  #variant-modal-grid { padding: 16px; }
  #variant-modal-items {
    grid-template-columns: 1fr !important;
    gap: 12px;
  }
  #variant-modal-footer {
    padding: 14px 16px calc(14px + var(--safe-bottom, 0px));
  }

  #pre-order-wizard-modal {
    inset: 8px 8px calc(8px + var(--safe-bottom, 0px)) 8px !important;
    left: 8px !important;
    right: 8px !important;
    top: 8px !important;
    bottom: calc(8px + var(--safe-bottom, 0px)) !important;
    max-height: calc(100dvh - 16px - var(--safe-bottom, 0px));
    max-width: none;
    margin: 0;
    border-radius: 10px;
  }
  #pre-order-wizard-scroll { padding: 16px; }
  #pre-order-wizard-overlay #wizard-main {
    padding: 18px 14px;
  }
}
@media (max-width: 768px) {
  /* Modals must paint (and receive taps) ABOVE the fixed mobile bottom nav
     (.fs-bottom-nav is z-index:1000; these overlays shipped as Tailwind z-50,
     so the nav intercepted taps on the variant modal's Done button). */
  #variant-modal-overlay,
  #product-detail-modal-overlay,
  #special-order-modal-overlay,
  #custom-item-modal-overlay,
  #pre-order-wizard-overlay {
    z-index: 1100 !important;
  }
  /* bottom-sheet footer clears notch insets */
  #variant-modal-container { padding-bottom: var(--safe-bottom); }
}
@media (max-width: 640px) {
  /* mobile-responsive.css pins #farm-name to 1.5rem!important for the old
     photo-overlay hero; the placard wants a touch more presence. Same
     specificity + later file = this wins. */
  #farm-name { font-size: 27px !important; }
  .fpv4-placard { margin-top: 18px; }
  #farm-mission { font-size: 14px; }
}

/* ============================================================
   ACCESSIBILITY FALLBACKS
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .fpv4-gallery-thumb, .fpv4-btn, .fpv4-qty-btn { transition: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .fpv4-stamp .st-wash { fill: var(--fpv4-matte); }
  .fpv4-incart-chip { background: var(--green-800); -webkit-backdrop-filter: none; backdrop-filter: none; }
}