/* Canonical Homer — cinematic Washington confectionery. The seamless campaign Hero, verified Swifts paisley color system, four-card Collections row, and Boysenberry Feature preserve C's architecture without its generic blob. */
/* Phone UI keeps touch-native shelves, protected product visibility, 44px controls, and subtle in-view motion with static reduced-motion fallbacks. */
:root {
  --ink: #141510;
  --ink-soft: #303229;
  --paper: #fffaf0;
  --paper-2: #f8f0df;
  --white: #ffffff;
  --gold: #d6a927;
  --gold-light: #f3d477;
  --gold-dark: #8e6b0d;
  --blue: #3268c9;
  --blue-deep: #1e2b65;
  --berry: #bc3f70;
  --cocoa: #562f25;
  --lime: #b9ca59;
  --honey: #e79b29;
  --leaf: #315c45;
  --line: rgba(20, 21, 16, 0.14);
  --line-light: rgba(255, 255, 255, 0.18);
  --serif: Georgia, "Iowan Old Style", "Palatino Linotype", Palatino, "Times New Roman", serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --header: 70px;
  --shell: 1240px;
  --radius: 26px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --paisley-asset: url('/homer/assets/brand/swifts-paisley-outline-source.webp');
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: var(--header); background: #141510; -webkit-text-size-adjust: 100%; }
body { min-width: 320px; overflow-x: hidden; background: var(--paper); color: var(--ink); font: 400 17px/1.62 var(--sans); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
[hidden] { display: none !important; }
a { color: inherit; }
button, input, select { font: inherit; }
button { color: inherit; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 4px; border-radius: 7px; }
.shell { width: min(calc(100% - 40px), var(--shell)); margin-inline: auto; }
.skip { position: fixed; top: 8px; left: -9999px; z-index: 999; padding: 0.85rem 1.1rem; background: var(--gold); color: var(--ink); font-weight: 800; text-decoration: none; }
.skip:focus { left: 8px; }

h1, h2, h3 { font-family: var(--serif); font-weight: 400; letter-spacing: -0.035em; line-height: 0.98; }
h1 { font-size: clamp(3rem, 7.4vw, 6.9rem); }
h2 { font-size: clamp(2.35rem, 5vw, 4.9rem); }
h3 { font-size: 1.45rem; line-height: 1.08; }
.eyebrow { color: var(--gold-dark); font-size: 0.76rem; font-weight: 850; letter-spacing: 0.18em; line-height: 1.3; text-transform: uppercase; }
.section { position: relative; padding: clamp(5.25rem, 9vw, 9rem) 0; }
.section-heading { max-width: 790px; }
.section-heading h2 { max-width: 720px; margin-top: 0.9rem; }
.section-heading > p:last-child { max-width: 620px; margin-top: 1.2rem; color: #5a5c52; font-size: 1.07rem; }
.section-heading.compact { max-width: 760px; }
.button { display: inline-flex; min-height: 52px; align-items: center; justify-content: center; border: 2px solid transparent; border-radius: 999px; padding: 0.9rem 1.5rem; font-weight: 800; line-height: 1; text-align: center; text-decoration: none; cursor: pointer; transition: transform 160ms var(--ease), box-shadow 220ms var(--ease), background 220ms var(--ease), color 220ms var(--ease), border-color 220ms var(--ease); }
.button:hover { transform: translateY(-2px); }
.button:active { transform: scale(0.97); }
.button-gold { border-color: var(--gold); background: var(--gold); color: #16170f; box-shadow: 0 10px 28px rgba(155, 111, 6, 0.2); }
.button-gold:hover { border-color: var(--gold-light); background: var(--gold-light); box-shadow: 0 14px 34px rgba(155, 111, 6, 0.28); }
.button-ink { border-color: var(--ink); background: var(--ink); color: var(--white); }
.button-ink:hover { background: var(--leaf); border-color: var(--leaf); }
.text-link, .text-button { display: inline-flex; align-items: center; gap: 0.45rem; width: max-content; border: 0; border-bottom: 1px solid currentColor; background: none; color: var(--ink); padding: 0.15rem 0; font-weight: 800; text-decoration: none; cursor: pointer; }
.text-link span { transition: transform 180ms var(--ease); }
.text-link:hover span { transform: translateX(4px); }

.site-header { position: fixed; inset: 0 0 auto; z-index: 100; height: var(--header); background: rgba(20, 21, 16, 0.97); border: 0; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); transition: background 220ms ease, box-shadow 220ms ease; }
.site-header.scrolled { background: rgba(20, 21, 16, 0.985); box-shadow: 0 12px 30px rgba(20, 21, 16, 0.16); }
.header-inner { display: flex; height: 100%; align-items: center; gap: 1.5rem; }
.brand { display: flex; width: 142px; height: 67px; align-items: center; flex: 0 0 auto; overflow: hidden; text-decoration: none; }
.brand img { width: 142px; max-width: none; }
.main-nav { display: flex; align-items: center; gap: 0.25rem; margin-left: auto; }
.main-nav a { position: relative; border-radius: 999px; color: rgba(255, 255, 255, 0.84); padding: 0.65rem 0.78rem; font-size: 0.91rem; font-weight: 680; text-decoration: none; transition: color 160ms ease, background 160ms ease; }
.main-nav a:hover { color: var(--gold-light); }
.main-nav .header-find { margin-left: 0.35rem; background: var(--gold); color: var(--ink); padding-inline: 1.05rem; }
.main-nav .header-find:hover { background: var(--gold-light); color: var(--ink); }
.menu-button { display: none; position: relative; width: 48px; height: 48px; margin-left: auto; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 50%; background: transparent; cursor: pointer; }
.menu-button span { position: absolute; left: 13px; right: 13px; height: 2px; background: var(--white); transition: transform 200ms var(--ease), opacity 140ms ease; }
.menu-button span:nth-child(1) { top: 16px; }
.menu-button span:nth-child(2) { top: 23px; }
.menu-button span:nth-child(3) { top: 30px; }
.menu-button[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-button[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-button[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.hero { position: relative; display: flex; min-height: 100svh; align-items: center; overflow: hidden; background: radial-gradient(118% 96% at 76% 10%, #26432f 0%, #16211a 52%, #0d120f 100%); padding: calc(var(--header) + clamp(1.25rem, 3vh, 2.5rem)) 0 clamp(1.5rem, 3vh, 2.75rem); }
.hero-inner { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr) minmax(460px, 0.9fr); gap: clamp(3rem, 5vw, 6rem); align-items: center; min-height: 0; }
.hero-copy { position: relative; z-index: 3; max-width: 720px; border: 0; border-radius: 26px; background: none; box-shadow: none; padding: 0; box-shadow: 0 0 0 rgba(5, 9, 6, 0.36); padding: clamp(1.25rem, 2.6vw, 2rem); backdrop-filter: blur(12px) saturate(1.08); -webkit-backdrop-filter: blur(12px) saturate(1.08); }
.hero-wordmark { width: clamp(175px, 15vw, 235px); margin: 0 0 0.55rem -0.55rem; }
.hero-copy .eyebrow { color: var(--gold-light); }
.hero-copy h1 { max-width: 760px; margin: 0.58rem 0 1rem; color: var(--white); font-size: clamp(3.85rem, 4.2vw, 4.9rem); text-shadow: 0 3px 28px rgba(0, 0, 0, 0.34); }
.hero-lede { max-width: 610px; color: rgba(255, 255, 255, 0.86); font-size: clamp(1.05rem, 1.6vw, 1.22rem); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 1.35rem; }
.hero-copy .button-ink { border-color: rgba(255, 255, 255, 0.48); background: rgba(8, 12, 9, 0.62); color: var(--white); }
.hero-copy .button-ink:hover { border-color: var(--gold-light); background: rgba(18, 29, 21, 0.88); }
.hero-find { margin-top: 0.9rem; color: var(--gold-light); }
.adult-note { max-width: 500px; margin-top: 1rem; color: #6b6c63; font-size: 0.78rem; line-height: 1.55; }
.adult-note strong { color: var(--ink); }
.hero-product { --hover-near-x: 0px; --hover-near-y: 0px; --hover-mid-x: 0px; --hover-mid-y: 0px; --hover-far-x: 0px; --hover-far-y: 0px; --hover-inverse-x: 0px; --hover-inverse-y: 0px; --hover-tilt-x: 0deg; --hover-tilt-y: 0deg; --hover-light-x: 50%; --hover-light-y: 50%; position: relative; z-index: 1; min-height: min(650px, calc(100svh - var(--header) - 4rem)); isolation: isolate; perspective: 1100px; }
.hero-product::after { content: ""; position: absolute; z-index: 3; inset: 3% 0 0 5%; border-radius: 42% 58% 38% 62% / 47% 39% 61% 53%; background: radial-gradient(circle at var(--hover-light-x) var(--hover-light-y), rgba(255, 255, 255, 0.42), rgba(245, 211, 115, 0.12) 18%, transparent 42%); opacity: 0; pointer-events: none; mix-blend-mode: screen; transition: opacity 240ms var(--ease); }
.hero-stage { position: absolute; inset: 4% 0 0 5%; overflow: hidden; border-radius: 42% 58% 38% 62% / 47% 39% 61% 53%; background: linear-gradient(145deg, #202e73 0%, #304d9f 55%, #8e4d83 100%); box-shadow: 0 38px 70px rgba(34, 45, 104, 0.25); transform: rotate(-3deg); transform-style: preserve-3d; transition: transform 420ms var(--ease), box-shadow 420ms var(--ease); }
.hero-stage::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 72% 24%, rgba(255, 255, 255, 0.38), transparent 18%), linear-gradient(120deg, transparent 45%, rgba(255, 255, 255, 0.08) 45.5%, transparent 46%); }
.hero-package { position: absolute; z-index: 2; width: 76%; top: 8%; left: 10%; border-radius: 24px; box-shadow: 0 26px 60px rgba(16, 20, 54, 0.35); transform: rotate(2deg); }
.hero-edible { position: absolute; z-index: 4; width: 27%; right: 1%; bottom: 3%; transform: rotate(8deg); filter: drop-shadow(0 22px 30px rgba(11, 20, 62, 0.38)); transition: transform 360ms var(--ease), filter 360ms var(--ease); }
.hero-product-label { position: absolute; z-index: 5; left: 0; bottom: 5%; padding: 0.85rem 1rem; border-left: 4px solid var(--gold); background: rgba(255, 250, 240, 0.94); box-shadow: 0 14px 30px rgba(20, 21, 16, 0.12); transition: transform 360ms var(--ease), box-shadow 360ms var(--ease); }
.hero-product-label span { display: block; color: var(--gold-dark); font-size: 0.67rem; font-weight: 850; letter-spacing: 0.14em; text-transform: uppercase; }
.hero-product-label strong { display: block; margin-top: 0.15rem; font-family: var(--serif); font-size: 1.3rem; font-weight: 400; }

.collections { background: var(--paper); }
.collection-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 3rem; }
.collection-card { --card-accent: var(--blue); position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; color: var(--ink); cursor: pointer; text-align: left; transition: transform 220ms var(--ease), box-shadow 220ms var(--ease), border-color 220ms ease; }
.collection-card:hover { transform: translateY(-7px); border-color: color-mix(in srgb, var(--card-accent) 38%, transparent); box-shadow: 0 25px 50px rgba(33, 32, 24, 0.14); }
.collection-card:active { transform: translateY(-2px) scale(0.99); }
.collection-photo { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--paper-2); }
.collection-photo::after { content: ""; position: absolute; inset: auto 0 0; height: 24%; background: linear-gradient(to bottom, transparent, rgba(20, 21, 16, 0.12)); }
.collection-package { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms var(--ease); }
.collection-card:hover .collection-package { transform: scale(1.035); }
.collection-edible { position: absolute; z-index: 2; right: 5%; bottom: -7%; width: 38%; max-height: 150px; object-fit: contain; filter: drop-shadow(0 12px 20px rgba(20, 21, 16, 0.24)); transition: transform 300ms var(--ease); }
.collection-secondary { position: absolute; z-index: 3; left: 4%; bottom: -5%; width: 31%; max-height: 126px; object-fit: contain; filter: drop-shadow(0 12px 20px rgba(20, 21, 16, 0.22)); transition: transform 300ms var(--ease); }
.collection-card:hover .collection-edible { transform: translateY(-6px) rotate(3deg); }
.collection-card:hover .collection-secondary { transform: translateY(-5px) rotate(-3deg); }
.collection-body { display: flex; min-height: 220px; flex-direction: column; align-items: flex-start; padding: 1.15rem 1.25rem 1.3rem; }
.collection-count { color: var(--card-accent); font-size: 0.7rem; font-weight: 850; letter-spacing: 0.12em; text-transform: uppercase; }
.collection-body h3 { margin-top: 0.45rem; font-size: 2rem; }
.collection-story { margin-top: 0.4rem; color: var(--card-accent); font-size: 0.72rem; font-weight: 850; letter-spacing: 0.09em; text-transform: uppercase; }
.collection-body p { margin-top: 0.6rem; color: #5a5c52; font-size: 0.88rem; line-height: 1.5; }
.collection-action { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: auto; padding-top: 0.85rem; color: var(--ink); font-size: 0.88rem; font-weight: 800; }

.featured { --feature-accent: #3268c9; overflow: hidden; border-block: 1px solid rgba(20, 21, 16, 0.06); background: linear-gradient(180deg, #f8f0df 0%, #fffaf0 100%); transition: background 360ms ease; }
.featured-shell { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(380px, 0.92fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.featured-visual { position: relative; min-height: 570px; }
.featured-image-field { position: absolute; inset: 3% 0; overflow: hidden; border: 1px solid rgba(20, 21, 16, 0.08); border-radius: var(--radius); background: rgba(255, 255, 255, 0.72); box-shadow: 0 30px 60px rgba(39, 49, 79, 0.12); }
.featured-package { position: absolute; width: 75%; max-height: 68%; top: 8%; left: 5%; border-radius: 20px; object-fit: cover; box-shadow: 0 22px 44px rgba(39, 49, 79, 0.2); transition: opacity 180ms ease, transform 320ms var(--ease); }
.featured-package.is-edible-only { width: 56%; height: 65%; left: 18%; object-fit: contain; background: transparent; box-shadow: none; }
.featured-edible { position: absolute; z-index: 2; width: 29%; max-height: 235px; right: 4%; bottom: 4%; object-fit: contain; filter: drop-shadow(0 18px 24px rgba(21, 31, 67, 0.28)); transition: opacity 180ms ease, transform 360ms var(--ease); }
.featured-copy { position: relative; z-index: 2; }
.featured-family { margin-top: 1.3rem; color: var(--feature-accent); font-size: 0.76rem; font-weight: 850; letter-spacing: 0.12em; text-transform: uppercase; }
.featured-copy h2 { margin: 0.45rem 0 1.2rem; }
.featured-description { max-width: 580px; color: #4f5148; font-size: 1.05rem; }
.product-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.8rem; margin-top: 2rem; }
.product-facts div { padding-top: 0.9rem; border-top: 1px solid rgba(20, 21, 16, 0.18); }
.product-facts dt { color: #6a6b62; font-size: 0.66rem; font-weight: 850; letter-spacing: 0.12em; text-transform: uppercase; }
.product-facts dd { margin-top: 0.35rem; font-family: var(--serif); font-size: 1.03rem; line-height: 1.25; }
.featured-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.1rem; margin-top: 2rem; }
.featured-swap { margin-top: 1.1rem; color: #6b6c63; font-size: 0.78rem; }

.lineup { background: #fff; }
.lineup-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; }
.rail-controls { display: flex; gap: 0.55rem; flex: 0 0 auto; }
.rail-controls button { width: 50px; height: 50px; border: 1px solid var(--line); border-radius: 50%; background: var(--paper); font-size: 1.25rem; cursor: pointer; transition: background 160ms ease, transform 160ms var(--ease); }
.rail-controls button:hover { background: var(--gold-light); }
.rail-controls button:active { transform: scale(0.94); }
.category-tabs { display: flex; flex-wrap: wrap; gap: 0.55rem; margin: 2.2rem 0 1.35rem; }
.category-tabs button { min-width: 44px; min-height: 44px; border: 1px solid var(--line); border-radius: 999px; background: transparent; padding: 0.65rem 1rem; font-weight: 760; cursor: pointer; transition: background 160ms ease, color 160ms ease, border-color 160ms ease; }
.category-tabs button:hover { border-color: var(--gold); }
.category-tabs button[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: var(--white); }
.lineup-rail { display: grid; grid-auto-columns: minmax(250px, 292px); grid-auto-flow: column; gap: 1rem; overflow-x: auto; overscroll-behavior-inline: contain; margin-inline: -22px; padding: 22px 22px 30px; scroll-behavior: smooth; scroll-snap-type: x mandatory; scrollbar-width: none; }
.lineup-rail::-webkit-scrollbar { display: none; }
.product-card { --product-accent: var(--blue); position: relative; display: flex; min-height: 634px; scroll-snap-align: start; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: 22px; background: #fbf8f0; }
.product-card.max { border-color: color-mix(in srgb, var(--product-accent) 50%, #ddd); }
.product-image { display: grid; height: 272px; place-items: center; overflow: hidden; background: radial-gradient(circle at 50% 46%, color-mix(in srgb, var(--product-accent) 20%, white) 0 29%, transparent 66%), #f4f0e7; }
.product-image img { width: 92%; height: 96%; object-fit: contain; filter: drop-shadow(0 18px 25px rgba(20, 21, 16, 0.22)); transition: transform 300ms var(--ease); }
.product-card[data-package-format="pouch"] .product-image img, .product-card[data-package-format="tin"] .product-image img, .product-card[data-package-format="compact"] .product-image img { width: 98%; height: 100%; }
.product-card:hover .product-image img { transform: translateY(-5px) rotate(2deg); }
.product-card-body { display: flex; flex: 1; flex-direction: column; align-items: flex-start; padding: 1.05rem 1.1rem 1.15rem; }
.product-family { color: var(--product-accent); font-size: 0.66rem; font-weight: 850; letter-spacing: 0.11em; text-transform: uppercase; }
.product-card h3 { margin-top: 0.45rem; font-size: 1.55rem; }
.product-flavor { margin-top: 0.48rem; color: #3f4139; font-family: var(--serif); font-size: 0.94rem; font-style: italic; line-height: 1.3; }
.product-description { display: -webkit-box; min-height: 4.25em; margin-top: 0.55rem; overflow: hidden; color: #606258; font-size: 0.78rem; line-height: 1.42; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.product-format { margin-top: 0.65rem; color: #777970; font-size: 0.65rem; font-weight: 780; letter-spacing: 0.055em; line-height: 1.38; text-transform: uppercase; }
.product-dose { margin-top: 0.5rem; color: #42443c; font-size: 0.76rem; font-weight: 720; line-height: 1.4; }
.product-badge { display: inline-flex; margin-top: 0.7rem; border-radius: 999px; background: var(--product-accent); color: #fff; padding: 0.28rem 0.5rem; font-size: 0.62rem; font-weight: 850; letter-spacing: 0.11em; text-transform: uppercase; }
.product-card-actions { display: grid; width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; margin-top: auto; padding-top: 0.95rem; }
.feature-button { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; border: 1px solid var(--ink); border-radius: 999px; background: transparent; padding: 0.65rem 0.72rem; color: var(--ink); font-size: 0.78rem; font-weight: 820; cursor: pointer; transition: transform 160ms var(--ease), background 180ms ease, color 180ms ease, border-color 180ms ease; }
.feature-button:hover { border-color: var(--product-accent); background: var(--product-accent); color: #fff; }
.feature-button:active { transform: scale(0.97); }
.product-find { border-color: var(--gold); background: var(--gold); }
.product-find:hover { border-color: var(--gold-light); background: var(--gold-light); color: var(--ink); }
.responsibility-note { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.75rem 1rem; align-items: start; margin-top: 1.4rem; border: 1px solid rgba(20, 21, 16, 0.12); border-radius: 16px; background: #f7f0e2; padding: 1rem 1.1rem; }
.responsibility-note strong { color: var(--gold-dark); font-family: var(--serif); font-size: 1rem; font-weight: 400; white-space: nowrap; }
.responsibility-note span { color: #64665c; font-size: 0.78rem; line-height: 1.55; }
.rail-progress { height: 3px; overflow: hidden; margin-top: 0.55rem; border-radius: 999px; background: #ece8df; }
.rail-progress span { display: block; width: 10%; height: 100%; border-radius: inherit; background: var(--gold); transform-origin: left; transition: transform 120ms linear; }

body.dialog-open { overflow: hidden; }
.product-dialog { --dialog-accent: var(--blue); width: 100vw; height: 100dvh; max-width: none; max-height: none; overflow: hidden; border: 0; background: transparent; color: var(--ink); padding: 14px; }
.product-dialog::backdrop { background: rgba(10, 11, 8, 0.72); backdrop-filter: blur(16px) saturate(0.75); -webkit-backdrop-filter: blur(16px) saturate(0.75); }
.product-sheet { position: relative; width: min(1420px, 100%); max-height: calc(100dvh - 28px); margin: 0 auto; overflow: auto; border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 34px; background: #fffaf0; box-shadow: 0 40px 110px rgba(7, 8, 5, 0.42); overscroll-behavior: contain; }
.product-dialog-close { position: absolute; z-index: 9; top: 14px; right: 14px; display: grid; width: 48px; height: 48px; margin: 0; place-items: center; border: 1px solid rgba(20, 21, 16, 0.15); border-radius: 50%; background: rgba(255, 250, 240, 0.92); box-shadow: 0 10px 24px rgba(20, 21, 16, 0.13); cursor: pointer; backdrop-filter: blur(12px); }
.product-dialog-close span { margin-top: -3px; font-size: 2rem; font-weight: 300; line-height: 1; }
.product-dialog-main { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(390px, 0.88fr); min-height: 610px; }
.product-dialog-visual { --dialog-light-x: 50%; --dialog-light-y: 50%; --dialog-tilt-x: 0deg; --dialog-tilt-y: 0deg; --dialog-shift-x: 0px; --dialog-shift-y: 0px; --dialog-edible-x: 0px; --dialog-edible-y: 0px; position: relative; min-height: 610px; overflow: hidden; isolation: isolate; perspective: 1200px; background: color-mix(in srgb, var(--dialog-accent) 13%, #f8f0df); }
.product-dialog-visual::before { content: ""; position: absolute; z-index: 3; inset: 0; background: radial-gradient(circle at var(--dialog-light-x) var(--dialog-light-y), rgba(255, 255, 255, 0.42), rgba(246, 214, 126, 0.12) 20%, transparent 46%); opacity: 0; pointer-events: none; mix-blend-mode: soft-light; transition: opacity 220ms var(--ease); }
.product-dialog-visual::after { content: ""; position: absolute; z-index: 2; width: 42%; aspect-ratio: 1; right: -12%; bottom: -26%; border: 1px solid color-mix(in srgb, var(--dialog-accent) 62%, transparent); border-radius: 50%; box-shadow: 0 0 0 46px color-mix(in srgb, var(--dialog-accent) 7%, transparent), 0 0 0 92px color-mix(in srgb, var(--dialog-accent) 4%, transparent); pointer-events: none; }
.product-dialog-hero { position: relative; z-index: 1; width: 100%; height: 100%; min-height: 610px; object-fit: cover; transform-origin: 50% 52%; transition: opacity 180ms ease, transform 320ms var(--ease), filter 320ms var(--ease); }
.product-dialog-edible-wrap { position: absolute; z-index: 4; width: clamp(112px, 16vw, 220px); aspect-ratio: 1; right: 4%; bottom: 4%; display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, 0.74); border-radius: 50%; background: rgba(255, 250, 240, 0.82); box-shadow: 0 24px 54px rgba(20, 21, 16, 0.22); transform-origin: 50% 58%; transition: transform 300ms var(--ease), box-shadow 300ms var(--ease), border-color 220ms ease; backdrop-filter: blur(12px); }
.product-dialog-edible { width: 72%; height: 72%; object-fit: contain; filter: drop-shadow(0 14px 20px rgba(20, 21, 16, 0.24)); transition: transform 300ms var(--ease), filter 300ms var(--ease); }
.product-dialog-count { position: absolute; z-index: 4; left: 1.25rem; bottom: 1.15rem; border-radius: 999px; background: rgba(20, 21, 16, 0.88); color: #fff; padding: 0.5rem 0.72rem; font-size: 0.7rem; font-weight: 850; letter-spacing: 0.12em; }
.product-dialog-copy { display: flex; flex-direction: column; justify-content: center; padding: clamp(2.3rem, 4vw, 4.4rem); }
.product-dialog-copy .eyebrow { color: var(--dialog-accent); }
.product-dialog-copy h2 { margin: 0.65rem 0 1.15rem; font-size: clamp(3rem, 5.1vw, 5.6rem); }
.product-dialog-description { color: #4f5148; font-size: clamp(1.02rem, 1.5vw, 1.2rem); }
.product-use-note { margin-top: 1.45rem; border-left: 3px solid var(--dialog-accent); background: color-mix(in srgb, var(--dialog-accent) 7%, #fff); padding: 0.9rem 1rem; }
.product-use-note span { color: var(--dialog-accent); font-size: 0.66rem; font-weight: 850; letter-spacing: 0.12em; text-transform: uppercase; }
.product-use-note p { margin-top: 0.3rem; color: #55574d; font-size: 0.9rem; line-height: 1.5; }
.product-dialog-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.65rem 1rem; margin-top: 1.4rem; }
.product-dialog-facts div { border-top: 1px solid var(--line); padding-top: 0.7rem; }
.product-dialog-facts dt { color: #6b6c63; font-size: 0.62rem; font-weight: 850; letter-spacing: 0.1em; text-transform: uppercase; }
.product-dialog-facts dd { margin-top: 0.25rem; font-family: var(--serif); font-size: 0.97rem; line-height: 1.25; }
.product-dialog-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 1.65rem; }
.product-dialog-stepper { display: flex; justify-content: space-between; gap: 0.75rem; margin-top: 1.5rem; border-top: 1px solid var(--line); padding-top: 1rem; }
.product-dialog-stepper button { border: 0; background: none; padding: 0.45rem 0; font-weight: 800; cursor: pointer; }
.product-dialog-browser { border-top: 1px solid var(--line); background: #f5edde; padding: 1.2rem clamp(1rem, 2.5vw, 2.2rem) 1.35rem; }
.product-dialog-browser-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; }
.product-dialog-browser-head > div:first-child > p:last-child { margin-top: 0.28rem; color: #64665c; font-size: 0.82rem; }
.product-thumb-controls { display: flex; gap: 0.45rem; }
.product-thumb-controls button { width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 50%; background: #fffaf0; cursor: pointer; }
.product-thumb-rail { display: grid; grid-auto-columns: 178px; grid-auto-flow: column; gap: 0.7rem; overflow-x: auto; margin-top: 1rem; padding: 0.2rem 0 0.55rem; scroll-behavior: smooth; scroll-snap-type: x mandatory; overscroll-behavior-inline: contain; scrollbar-width: thin; scrollbar-color: var(--dialog-accent) transparent; }
.product-thumb { display: grid; grid-template-columns: 64px 1fr; min-height: 80px; align-items: center; gap: 0.65rem; scroll-snap-align: start; border: 1px solid rgba(20, 21, 16, 0.12); border-radius: 15px; background: rgba(255, 255, 255, 0.72); padding: 0.42rem; cursor: pointer; text-align: left; transition: border-color 180ms ease, background 180ms ease, transform 180ms var(--ease); }
.product-thumb:hover { transform: translateY(-2px); border-color: var(--thumb-accent); }
.product-thumb.active { border-color: var(--thumb-accent); background: #fff; box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--thumb-accent) 28%, transparent); }
.product-thumb img { width: 64px; height: 64px; border-radius: 10px; object-fit: cover; }
.product-thumb span { min-width: 0; }
.product-thumb small { display: block; overflow: hidden; color: #72746a; font-size: 0.53rem; font-weight: 800; letter-spacing: 0.07em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.product-thumb strong { display: -webkit-box; margin-top: 0.15rem; overflow: hidden; font-family: var(--serif); font-size: 0.82rem; font-weight: 400; line-height: 1.14; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.product-dialog-legal { border-top: 1px solid rgba(20, 21, 16, 0.08); background: #eee5d5; color: #65675e; padding: 0.8rem clamp(1rem, 2.5vw, 2.2rem); font-size: 0.69rem; line-height: 1.5; }

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .product-dialog-visual.is-pointer-active::before { opacity: 0.78; }
  .product-dialog-visual.is-pointer-active .product-dialog-hero { transform: translate3d(var(--dialog-shift-x), var(--dialog-shift-y), 18px) rotateX(var(--dialog-tilt-x)) rotateY(var(--dialog-tilt-y)) scale(1.018); filter: saturate(1.025) contrast(1.012); will-change: transform; }
  .product-dialog-visual.is-pointer-active .product-dialog-edible-wrap { transform: translate3d(var(--dialog-edible-x), var(--dialog-edible-y), 34px) rotate(-1.5deg) scale(1.035); border-color: color-mix(in srgb, var(--dialog-accent) 32%, white); box-shadow: 0 30px 68px rgba(20, 21, 16, 0.27); will-change: transform; }
  .product-dialog-visual.is-pointer-active .product-dialog-edible { transform: rotate(2deg) scale(1.025); filter: drop-shadow(0 18px 24px rgba(20, 21, 16, 0.28)); }
}

@media (min-width: 861px) {
  .product-sheet { display: grid; height: calc(100dvh - 28px); max-height: calc(100dvh - 28px); grid-template-rows: minmax(0, 1fr) 132px 36px; overflow: hidden; }
  .product-dialog-main { min-height: 0; height: 100%; overflow: hidden; }
  .product-dialog-visual { min-height: 0; height: 100%; }
  .product-dialog-hero { min-height: 0; height: 100%; }
  /* was `overflow: hidden`, which silently CLIPPED anything past the fixed grid row — measured at
     1280x720 the open detail blocks lost 282px including both actions. The sheet keeps its fixed
     footprint; the column scrolls inside it. */
  .product-dialog-copy { min-height: 0; justify-content: flex-start; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding: clamp(1.35rem, 2.4vh, 2rem) clamp(2rem, 3vw, 3.1rem); }
  /* A flex item shrinks below its content by default, and its content then overflows its own box into
     whatever is drawn next — measured at 1280x720 the facts grid was squashed 35px and its last value
     ran 16px past the detail panel's rule, so the divider cut through "crispy pastry". Nothing in this
     column may shrink now that the column itself scrolls. */
  .product-dialog-copy > * { flex-shrink: 0; }
  .product-dialog-copy .eyebrow { min-height: 1.25rem; }
  .product-dialog-copy h2 { display: flex; min-height: 2.05em; max-height: 2.05em; align-items: flex-end; overflow: hidden; margin: 0.25rem 0 0.5rem; font-size: clamp(2.75rem, 4.25vw, 4.75rem); }
  .product-dialog-description { min-height: 3.15em; max-height: 3.15em; overflow: auto; font-size: clamp(0.9rem, 1.1vw, 1.05rem); line-height: 1.5; scrollbar-width: thin; }
  .product-use-note { min-height: 91px; max-height: 91px; overflow: auto; margin-top: 0.7rem; padding: 0.65rem 0.8rem; scrollbar-width: thin; }
  .product-use-note p { display: -webkit-box; overflow: hidden; margin-top: 0.18rem; font-size: 0.78rem; line-height: 1.42; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
  .product-dialog-facts { min-height: 66px; margin-top: 0.7rem; gap: 0.35rem 0.8rem; }
  .product-dialog-facts div { min-height: 49px; padding-top: 0.45rem; }
  .product-dialog-facts dd { margin-top: 0.12rem; font-size: 0.86rem; }
  .product-dialog-actions { min-height: 44px; flex-wrap: nowrap; gap: 0.75rem; margin-top: 0.65rem; }
  .product-dialog-actions .button { width: 210px; min-height: 44px; flex: 0 0 210px; padding: 0.7rem 0.65rem; font-size: 0.78rem; white-space: nowrap; }
  .product-dialog-stepper { min-height: 38px; margin-top: 0.55rem; padding-top: 0.45rem; }
  .product-dialog-stepper button { padding-block: 0.2rem; }
  .product-dialog-browser { overflow: hidden; padding: 0.65rem clamp(1rem, 2.5vw, 2.2rem) 0.55rem; }
  .product-dialog-browser-head { min-height: 34px; }
  .product-dialog-browser-head > div:first-child > p:last-child { display: none; }
  .product-thumb-controls button { width: 34px; height: 34px; }
  .product-thumb-rail { grid-auto-columns: 164px; height: 76px; margin-top: 0.35rem; padding: 0.08rem 0 0.2rem; }
  .product-thumb { grid-template-columns: 48px 1fr; min-height: 64px; padding: 0.32rem; }
  .product-thumb img { width: 48px; height: 48px; }
  .product-dialog-legal { display: flex; align-items: center; overflow: hidden; padding-block: 0.35rem; font-size: 0.62rem; white-space: nowrap; }
}

.match { --match-accent: var(--blue); overflow: hidden; border-block: 1px solid rgba(20, 21, 16, 0.06); background: #f8f0df; transition: background 380ms ease; }
.match-shell { position: relative; display: grid; grid-template-columns: minmax(310px, 0.72fr) minmax(0, 1.28fr); gap: clamp(2.2rem, 6vw, 6rem); align-items: start; }
.match-intro { position: sticky; top: calc(var(--header) + 40px); }
.match-intro h2 { margin: 0.85rem 0 1.1rem; }
.match-intro > p:last-child { max-width: 470px; color: #55574d; }
.match-panel { position: relative; border: 1px solid rgba(20, 21, 16, 0.12); border-radius: var(--radius); background: rgba(255, 255, 255, 0.84); box-shadow: 0 25px 60px rgba(55, 45, 65, 0.09); padding: clamp(1.25rem, 3vw, 2.2rem); backdrop-filter: blur(12px); }
.choice-group { border: 0; }
.choice-group + .choice-group { margin-top: 1.8rem; padding-top: 1.8rem; border-top: 1px solid var(--line); }
.choice-group legend { margin-bottom: 1rem; font-family: var(--serif); font-size: 1.35rem; }
.choice-group legend span { display: inline-flex; width: 28px; height: 28px; align-items: center; justify-content: center; margin-right: 0.5rem; border-radius: 50%; background: var(--ink); color: #fff; font: 800 0.66rem/1 var(--sans); }
.choice-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.65rem; }
.choice-row button { min-height: 52px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255, 255, 255, 0.72); padding: 0.75rem 0.85rem; font-weight: 750; cursor: pointer; text-align: left; transition: background 160ms ease, border-color 160ms ease, transform 160ms var(--ease); }
.choice-row button:hover { border-color: var(--match-accent); }
.choice-row button:active { transform: scale(0.98); }
.choice-row button[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: #fff; }
.match-result { min-height: 140px; margin-top: 2rem; border-radius: 20px; background: var(--ink); color: #fff; padding: 1.15rem; }
.match-result > p { color: rgba(255, 255, 255, 0.66); }
.match-selection { display: flex; flex-wrap: wrap; gap: 0.25rem 0.45rem; align-items: baseline; margin-bottom: 0.85rem; font-size: 0.72rem; line-height: 1.45; }
.match-selection strong { color: var(--gold-light); font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; }
.match-products { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.65rem; }
.match-products-1 { grid-template-columns: minmax(0, 1fr); }
.match-products-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.match-product { display: flex; min-width: 0; min-height: 296px; flex-direction: column; border: 1px solid rgba(255, 255, 255, 0.13); border-radius: 14px; background: rgba(255, 255, 255, 0.05); padding: 0.75rem; }
.match-products-1 .match-product { display: grid; grid-template-columns: minmax(128px, 0.55fr) minmax(0, 1.45fr); grid-template-rows: auto auto auto 1fr; column-gap: 1rem; }
.match-products-1 .match-product img { grid-row: 1 / 5; height: 188px; align-self: center; }
.match-products-1 .match-product span, .match-products-1 .match-product strong, .match-products-1 .match-product small, .match-products-1 .match-product-actions { grid-column: 2; }
.match-product img { width: 100%; height: 148px; object-fit: contain; filter: drop-shadow(0 13px 18px rgba(0, 0, 0, 0.38)); }
.match-product[data-package-format="tin"] img, .match-product[data-package-format="compact"] img { width: 106%; max-width: none; margin-inline: -3%; }
.match-product span { margin-top: 0.55rem; color: var(--gold-light); font-size: 0.62rem; font-weight: 850; letter-spacing: 0.09em; text-transform: uppercase; }
.match-product strong { margin-top: 0.16rem; font-family: var(--serif); font-size: 0.95rem; font-weight: 400; line-height: 1.2; }
.match-product small { display: -webkit-box; margin-top: 0.28rem; overflow: hidden; color: rgba(255, 255, 255, 0.58); font-size: 0.7rem; line-height: 1.3; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.match-product-actions { display: flex; gap: 0.7rem; margin-top: auto; padding-top: 0.7rem; }
.match-product-actions button { min-height: 36px; border: 0; border-bottom: 1px solid currentColor; background: none; color: #fff; padding: 0.3rem 0; font-size: 0.72rem; font-weight: 800; text-align: left; cursor: pointer; }
.match-product-actions .match-find { color: var(--gold-light); }
.match-guidance { margin-top: 0.8rem; color: rgba(255, 255, 255, 0.58); font-size: 0.68rem; line-height: 1.45; }

.story { background: #fff; }
.story-shell { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(420px, 1.1fr); gap: clamp(2rem, 7vw, 7rem); align-items: center; }
.story-copy h2 { margin: 0.85rem 0 1.3rem; }
.story-copy > p:not(.eyebrow) { max-width: 600px; color: #57594f; }
.story-copy > p + p { margin-top: 1rem; }
.story-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem 1.1rem; margin-top: 1.55rem; }
.story-actions .text-link { min-height: 44px; }
.story-facts { display: flex; flex-wrap: wrap; gap: 1.5rem; margin-top: 2rem; padding-top: 1.2rem; border-top: 1px solid rgba(20, 21, 16, 0.14); }
.story-facts div { display: flex; min-width: 100px; flex-direction: column; }
.story-facts strong { color: var(--gold-dark); font-family: var(--serif); font-size: 1.8rem; font-weight: 400; line-height: 1; }
.story-facts span { margin-top: 0.28rem; color: #6c6e64; font-size: 0.64rem; font-weight: 820; letter-spacing: 0.1em; text-transform: uppercase; }
.story-scene { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper-2); box-shadow: 0 26px 54px rgba(44, 40, 30, 0.12); }
.story-scene img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 520ms var(--ease); }
.story-scene figcaption { position: absolute; left: 1rem; right: 1rem; bottom: 1rem; display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; border-left: 4px solid var(--gold); background: rgba(255, 250, 240, 0.92); box-shadow: 0 12px 30px rgba(20, 21, 16, 0.14); padding: 0.8rem 1rem; backdrop-filter: blur(10px); }
.story-scene figcaption strong { font-family: var(--serif); font-size: 1.1rem; font-weight: 400; }
.story-scene figcaption span { color: var(--gold-dark); font-size: 0.68rem; font-weight: 850; letter-spacing: 0.1em; text-transform: uppercase; }
.story-scene:hover img { transform: scale(1.025); }

.journey { position: relative; display: flex; min-height: clamp(700px, 88svh, 920px); align-items: center; overflow: hidden; background: #101711; padding: clamp(5rem, 9vw, 8rem) 0; color: var(--ink); }
.journey-film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.journey-scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8, 12, 9, 0.76), rgba(8, 12, 9, 0.46) 46%, rgba(8, 12, 9, 0.12) 78%, rgba(8, 12, 9, 0.28)), linear-gradient(to top, rgba(8, 12, 9, 0.66), transparent 62%); }
.journey-inner { position: relative; z-index: 2; display: flex; justify-content: flex-start; }
.trailhead-sign { position: relative; width: min(760px, 70%); padding: 72px 42px 62px; filter: drop-shadow(0 30px 42px rgba(0, 0, 0, 0.45)); }
.trailhead-roof { position: absolute; z-index: 3; top: 0; left: 1%; width: 98%; height: 105px; clip-path: polygon(3% 100%, 8% 28%, 50% 0, 92% 28%, 97% 100%); background: linear-gradient(180deg, #765333 0 24%, #563b25 25% 48%, #6b492d 49% 70%, #46311f 71%); box-shadow: inset 0 -8px rgba(36, 25, 16, 0.28); }
.trailhead-post { position: absolute; z-index: 0; top: 72px; bottom: -52px; width: 54px; border-radius: 5px; background: linear-gradient(90deg, #4b3422, #7a5534 46%, #4a321f); box-shadow: inset 0 0 0 2px rgba(38, 26, 16, 0.24); }
.trailhead-post-left { left: 7%; }.trailhead-post-right { right: 7%; }
.trailhead-board { position: relative; z-index: 2; border: 8px solid #5b3f26; border-radius: 5px; background: linear-gradient(105deg, #a97b48, #c1945c 46%, #9a6b3f); box-shadow: inset 0 0 0 2px rgba(255, 228, 177, 0.22), 0 18px 28px rgba(0, 0, 0, 0.28); padding: clamp(1.1rem, 3vw, 2.2rem); }
.trailhead-board::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.2; background: repeating-linear-gradient(3deg, transparent 0 12px, rgba(71, 43, 22, 0.42) 13px 14px); }
.trailhead-name { position: relative; color: #332315; font-family: var(--sans); font-size: clamp(1rem, 2vw, 1.55rem); font-weight: 850; letter-spacing: 0.18em; text-align: center; text-shadow: 0 1px rgba(255, 230, 183, 0.3); text-transform: uppercase; }
.trailhead-notice { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 170px; gap: clamp(1rem, 2.5vw, 2rem); margin-top: 1rem; border: 1px solid rgba(50, 39, 26, 0.28); background: #f6f1df; box-shadow: 0 6px 12px rgba(53, 34, 17, 0.2); padding: clamp(1.25rem, 3vw, 2.4rem); }
.trailhead-copy .eyebrow { color: var(--leaf); }
.trailhead-copy h2 { max-width: 640px; margin: 0.65rem 0 0.85rem; font-size: clamp(2.35rem, 5vw, 4.7rem); }
.trailhead-copy p:not(.eyebrow) { max-width: 560px; color: #555347; }
.trailhead-copy .button { margin-top: 1.4rem; }
.trailhead-route { position: relative; min-height: 220px; overflow: hidden; border: 1px solid rgba(49, 92, 69, 0.32); background: linear-gradient(145deg, #dfe8d6, #f0e8d4); }
.trailhead-route::before, .trailhead-route::after { content: ""; position: absolute; border: 2px solid var(--leaf); border-radius: 50%; }
.trailhead-route::before { width: 210px; height: 280px; left: -80px; top: 16px; transform: rotate(-23deg); }
.trailhead-route::after { width: 96px; height: 170px; right: -32px; bottom: -35px; transform: rotate(18deg); }
.trailhead-route span { position: absolute; inset: 14px; border: 1px solid rgba(49, 92, 69, 0.25); }
.trailhead-route i { position: absolute; z-index: 2; width: 12px; height: 12px; border: 3px solid #f6f1df; border-radius: 50%; background: var(--gold-dark); box-shadow: 0 0 0 1px var(--leaf); }
.trailhead-route i:nth-of-type(1) { left: 28%; top: 24%; }.trailhead-route i:nth-of-type(2) { right: 28%; top: 49%; }.trailhead-route i:nth-of-type(3) { left: 42%; bottom: 18%; }

.find { background: #f8f0df; }
.find-head { max-width: 850px; }
.find-head h2 { margin: 0.85rem 0 1.1rem; }
.find-head > p:last-child { max-width: 660px; color: #55574e; font-size: 1.08rem; }
.locator-card { margin-top: 2.6rem; border: 1px solid rgba(20, 21, 16, 0.14); border-radius: 30px; background: var(--ink); color: #fff; box-shadow: 0 30px 70px rgba(46, 38, 24, 0.16); padding: clamp(1.3rem, 3vw, 2.2rem); }
.locator-form { display: grid; grid-template-columns: minmax(220px, 1.5fr) minmax(140px, 0.55fr) minmax(130px, 0.5fr) auto; gap: 0.75rem; align-items: end; }
.field { display: flex; min-width: 0; flex-direction: column; gap: 0.45rem; }
.field label { color: var(--gold-light); font-size: 0.68rem; font-weight: 850; letter-spacing: 0.13em; text-transform: uppercase; }
.field input, .field select { min-height: 52px; width: 100%; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 13px; background: rgba(255, 255, 255, 0.08); color: #fff; padding: 0.75rem 0.85rem; }
.field select option, .field select optgroup { background: #171813; color: #fff; }
.field input::placeholder { color: rgba(255, 255, 255, 0.42); }
.field input:focus, .field select:focus { border-color: var(--gold-light); outline: none; }
.field-product { position: relative; }
.field select.locator-select-enhanced { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }
.locator-picker { position: relative; min-width: 0; }
.locator-picker-button { display: grid; width: 100%; min-height: 64px; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: 0.72rem; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 15px; background: rgba(255, 255, 255, 0.09); color: #fff; padding: 0.45rem 0.75rem 0.45rem 0.5rem; cursor: pointer; text-align: left; transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease; }
.locator-picker-button:hover, .locator-picker-button[aria-expanded="true"] { border-color: var(--gold-light); background: rgba(255, 255, 255, 0.13); box-shadow: 0 14px 30px rgba(0, 0, 0, 0.24); }
.locator-picker-thumb, .locator-picker-option-art { display: grid; place-items: center; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 12px; background: #fffaf0; }
.locator-picker-thumb { width: 48px; height: 48px; }
.locator-picker-thumb img, .locator-picker-option-art img { width: 86%; height: 86%; object-fit: contain; filter: drop-shadow(0 6px 8px rgba(20, 21, 16, 0.18)); }
.locator-picker-mark { color: var(--blue-deep); font-family: var(--serif); font-size: 1.4rem; }
.locator-picker-value { min-width: 0; }
.locator-picker-value strong, .locator-picker-value small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.locator-picker-value strong { font-size: 0.94rem; line-height: 1.2; }
.locator-picker-value small { margin-top: 0.18rem; color: rgba(255, 255, 255, 0.52); font-size: 0.62rem; font-weight: 720; letter-spacing: 0.075em; text-transform: uppercase; }
.locator-picker-chevron { color: var(--gold-light); font-size: 1rem; transition: transform 180ms var(--ease); }
.locator-picker-button[aria-expanded="true"] .locator-picker-chevron { transform: rotate(180deg); }
.locator-picker-list { position: absolute; z-index: 80; top: calc(100% + 8px); left: 0; right: 0; display: none; max-height: min(430px, 54vh); overflow: auto; margin: 0; border: 1px solid rgba(20, 21, 16, 0.12); border-radius: 18px; background: #fffaf0; box-shadow: 0 28px 70px rgba(0, 0, 0, 0.34); color: var(--ink); padding: 0.45rem; list-style: none; overscroll-behavior: contain; }
.locator-picker-list.open { display: block; }
.locator-picker-group { position: sticky; z-index: 1; top: -0.45rem; margin: 0.25rem -0.2rem 0; background: rgba(255, 250, 240, 0.96); color: var(--gold-dark); padding: 0.65rem 0.65rem 0.35rem; font-size: 0.61rem; font-weight: 850; letter-spacing: 0.14em; text-transform: uppercase; backdrop-filter: blur(8px); }
.locator-picker-option { display: grid; min-height: 64px; grid-template-columns: 52px minmax(0, 1fr); align-items: center; gap: 0.72rem; border-radius: 13px; padding: 0.35rem 0.5rem; cursor: pointer; }
.locator-picker-option:hover, .locator-picker-option.focused { background: color-mix(in srgb, var(--gold) 15%, transparent); }
.locator-picker-option[aria-selected="true"] { background: color-mix(in srgb, var(--gold) 24%, transparent); box-shadow: inset 0 0 0 1px rgba(142, 107, 13, 0.28); }
.locator-picker-option-art { width: 52px; height: 52px; border-color: rgba(20, 21, 16, 0.08); }
.locator-picker-option-copy strong, .locator-picker-option-copy small { display: block; }
.locator-picker-option-copy strong { font-family: var(--serif); font-size: 0.96rem; font-weight: 400; line-height: 1.2; }
.locator-picker-option-copy small { margin-top: 0.17rem; color: #73756b; font-size: 0.61rem; font-weight: 780; letter-spacing: 0.08em; text-transform: uppercase; }
.locator-submit { white-space: nowrap; }
/* The search result and the freshness stamp share one line — the stamp right-aligned against it — so the
   map and the store list start a row higher. */
.locator-meta { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.4rem 1.2rem; margin-top: 0.9rem; }
.locator-status { min-height: 1.5em; color: rgba(255, 255, 255, 0.72); font-size: 0.92rem; }
.locator-status b { color: var(--gold-light); }
.locator-status.error { color: #ffb29b; }
.locator-updated { margin-left: auto; color: rgba(255, 255, 255, 0.48); font-size: 0.7rem; text-align: right; }
.locator-updated time { color: rgba(255, 255, 255, 0.68); }
.locator-output { display: none; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 1rem; margin-top: 1.2rem; }
.locator-output.visible { display: grid; }
.locator-list { display: flex; max-height: 470px; flex-direction: column; gap: 0.6rem; overflow: auto; padding-right: 0.2rem; }
.locator-item { flex: 0 0 auto; width: 100%; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 14px; background: rgba(255, 255, 255, 0.06); color: #fff; padding: 0.95rem; cursor: pointer; text-align: left; transition: background 160ms ease, border-color 160ms ease; }
.locator-item:hover, .locator-item.selected { border-color: var(--gold); background: rgba(214, 169, 39, 0.1); }
.locator-item h3 { font-size: 1.1rem; letter-spacing: -0.01em; }
.locator-address { margin-top: 0.25rem; color: rgba(255, 255, 255, 0.62); font-size: 0.84rem; line-height: 1.45; }
.locator-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; margin-top: 0.55rem; }
.locator-miles { color: rgba(255, 255, 255, 0.56); font-size: 0.73rem; font-weight: 700; }
.tier { display: inline-flex; align-items: center; gap: 0.3rem; border-radius: 999px; padding: 0.28rem 0.55rem; font-size: 0.62rem; font-weight: 850; letter-spacing: 0.08em; text-transform: uppercase; }
.tier::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.tier-stock { background: rgba(114, 216, 99, 0.14); color: #9be68d; }
.tier-likely { background: rgba(214, 169, 39, 0.16); color: #f0d580; }
.tier-call { background: rgba(200, 200, 200, 0.12); color: #c8cbc2; }
.locator-why { margin-top: 0.38rem; color: rgba(255, 255, 255, 0.46); font-size: 0.74rem; line-height: 1.4; }
.locator-map { min-height: 470px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 16px; background: #22251f; }
.locator-legend { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1rem; color: rgba(255, 255, 255, 0.58); font-size: 0.78rem; }
.locator-legend span { display: inline-flex; align-items: center; gap: 0.35rem; }
.locator-legend b { color: #fff; }
.legend-dot { width: 8px; height: 8px; border-radius: 50%; }.dot-stock { background: #72d863; }.dot-likely { background: var(--gold); }.dot-call { background: #a8aca3; }
.locator-fallback { display: flex; margin-top: 1rem; border: 1px solid rgba(214, 169, 39, 0.35); border-radius: 14px; background: rgba(214, 169, 39, 0.09); padding: 1rem; flex-direction: column; }
.locator-fallback strong { color: var(--gold-light); font-family: var(--serif); font-size: 1.25rem; font-weight: 400; }
.locator-fallback span { color: rgba(255, 255, 255, 0.76); }
.locator-foot { margin-top: 1rem; color: rgba(255, 255, 255, 0.5); font-size: 0.77rem; line-height: 1.6; }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background: #1c1e19; color: #fff; }
.leaflet-popup-content { font: 400 0.84rem/1.5 var(--sans); }

.retailers { overflow: hidden; background: linear-gradient(180deg, #fffaf0 0%, #f1eadb 100%); }
.retailers::before { content: ""; position: absolute; width: 42vw; aspect-ratio: 1; top: -24vw; right: -8vw; border: 1px solid rgba(50, 104, 201, 0.2); border-radius: 50%; box-shadow: 0 0 0 60px rgba(50, 104, 201, 0.04), 0 0 0 120px rgba(214, 169, 39, 0.035); }
.retailers-shell { position: relative; display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(390px, 1.05fr); gap: clamp(2rem, 7vw, 7rem); align-items: center; }
.retailers-copy h2 { max-width: 680px; margin: 0.85rem 0 1.2rem; }
.retailers-copy > p:last-of-type { max-width: 620px; color: #55574d; font-size: 1.05rem; }
.retailers-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem 1.1rem; margin-top: 1.7rem; }
.retailers-card { position: relative; overflow: hidden; border-radius: 30px; background: var(--ink); color: #fff; box-shadow: 0 32px 70px rgba(39, 32, 22, 0.2); padding: clamp(1.6rem, 4vw, 3rem); }
.retailers-card::after { content: ""; position: absolute; width: 230px; height: 230px; right: -80px; bottom: -100px; border: 1px solid rgba(243, 212, 119, 0.28); border-radius: 50%; box-shadow: 0 0 0 42px rgba(243, 212, 119, 0.04); }
.retailers-kicker { color: var(--gold-light); font-size: 0.66rem; font-weight: 850; letter-spacing: 0.16em; text-transform: uppercase; }
.retailers-card h3 { margin-top: 0.7rem; font-size: clamp(2rem, 4vw, 3.3rem); }
.retailers-card > p { position: relative; z-index: 1; margin-top: 1rem; color: rgba(255, 255, 255, 0.76); }
.retailers-card .retailers-note { border-top: 1px solid rgba(255, 255, 255, 0.14); padding-top: 1rem; color: rgba(255, 255, 255, 0.5); font-size: 0.75rem; }

.footer { background: #0b0c09; color: #fff; padding: clamp(3.8rem, 7vw, 6rem) 0 2rem; }
.footer-top { display: grid; grid-template-columns: 1.5fr 0.75fr 0.9fr; gap: 2.5rem; }
.footer-brand img { width: 170px; margin: -1.4rem 0 -0.8rem -1rem; }
.footer-brand p { max-width: 360px; color: rgba(255, 255, 255, 0.6); }
.footer nav { display: flex; flex-direction: column; align-items: flex-start; gap: 0.6rem; }
.footer nav h3 { margin-bottom: 0.35rem; color: var(--gold-light); font: 850 0.7rem/1 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; }
.footer nav a { color: rgba(255, 255, 255, 0.66); text-decoration: none; }
.footer nav a:hover { color: var(--gold-light); }
.legal { margin-top: 2.7rem; border: 1px solid rgba(214, 169, 39, 0.24); border-radius: 18px; background: rgba(214, 169, 39, 0.05); padding: 1.2rem 1.3rem; }
.legal strong { display: block; margin-bottom: 0.7rem; color: var(--gold-light); font-size: 0.69rem; letter-spacing: 0.13em; text-transform: uppercase; }
.legal p { color: rgba(255, 255, 255, 0.62); font-size: 0.79rem; line-height: 1.55; }
.legal p + p { margin-top: 0.5rem; }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.7rem; padding-top: 1.2rem; border-top: 1px solid rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.5); font-size: 0.78rem; }
.age-mark { display: inline-flex; width: 38px; height: 38px; align-items: center; justify-content: center; flex: 0 0 auto; border: 2px solid var(--gold); border-radius: 50%; color: var(--gold-light); font-weight: 850; }

.reveal { opacity: 0; transform: translateY(18px); transition: opacity 650ms var(--ease), transform 650ms var(--ease); }
.reveal.visible { opacity: 1; transform: none; }
.product-depth, .product-aura { animation: none; }

@media (prefers-reduced-motion: no-preference) and (hover: none), (prefers-reduced-motion: no-preference) and (pointer: coarse) {
  [data-auto-motion] .hero-package { animation: autoPackage 7.8s ease-in-out infinite; animation-play-state: paused; }
  [data-auto-motion] .hero-edible { animation: autoEdible 5.9s ease-in-out -1.1s infinite; animation-play-state: paused; }
  [data-auto-motion] .collection-package { animation: autoCollectionPackage 8.6s ease-in-out infinite; animation-delay: calc(var(--motion-order, 0) * -1.15s); animation-play-state: paused; }
  [data-auto-motion] .collection-edible { animation: autoCollectionEdible 6.2s ease-in-out infinite; animation-delay: calc(var(--motion-order, 0) * -0.85s); animation-play-state: paused; }
  [data-auto-motion] .collection-secondary { animation: autoCollectionSecondary 7.1s ease-in-out infinite; animation-delay: calc(var(--motion-order, 0) * -0.7s); animation-play-state: paused; }
  [data-auto-motion] .featured-package { animation: autoFeaturedPackage 8.2s ease-in-out infinite; animation-play-state: paused; }
  [data-auto-motion] .featured-edible { animation: autoFeaturedEdible 6s ease-in-out -1.4s infinite; animation-play-state: paused; }
  .product-card[data-auto-motion] .product-image img, .match-product[data-auto-motion] img { animation: autoProductLift 6.8s ease-in-out infinite; animation-delay: calc(var(--motion-order, 0) * -0.9s); animation-play-state: paused; }
  .story-scene[data-auto-motion] > img { animation: autoStoryScene 8.4s ease-in-out infinite; animation-play-state: paused; }
  .product-dialog-visual[data-auto-motion] .product-dialog-hero { animation: autoDialogHero 9s ease-in-out infinite; animation-play-state: paused; }
  .product-dialog-visual[data-auto-motion] .product-dialog-edible-wrap { animation: autoDialogProduct 6.7s ease-in-out -1.2s infinite; animation-play-state: paused; }
  [data-auto-motion].motion-active .hero-package,
  [data-auto-motion].motion-active .hero-edible,
  [data-auto-motion].motion-active .collection-package,
  [data-auto-motion].motion-active .collection-edible,
  [data-auto-motion].motion-active .collection-secondary,
  [data-auto-motion].motion-active .featured-package,
  [data-auto-motion].motion-active .featured-edible,
  .product-card[data-auto-motion].motion-active .product-image img,
  .match-product[data-auto-motion].motion-active img,
  .story-scene[data-auto-motion].motion-active > img,
  .product-dialog-visual[data-auto-motion].motion-active .product-dialog-hero,
  .product-dialog-visual[data-auto-motion].motion-active .product-dialog-edible-wrap { animation-play-state: running; }
  body.motion-paused [data-auto-motion] * { animation-play-state: paused !important; }
}

@keyframes autoPackage { 0%, 100% { transform: translate3d(0, 0, 0) rotate(2deg); } 50% { transform: translate3d(-3px, -7px, 0) rotate(1deg); } }
@keyframes autoEdible { 0%, 100% { transform: translate3d(0, 0, 0) rotate(8deg); } 50% { transform: translate3d(2px, -10px, 0) rotate(11deg); } }
@keyframes autoCollectionPackage { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(0, -4px, 0) scale(1.018); } }
@keyframes autoCollectionEdible { 0%, 100% { transform: translate3d(0, 0, 0) rotate(0); } 50% { transform: translate3d(0, -7px, 0) rotate(2deg); } }
@keyframes autoCollectionSecondary { 0%, 100% { transform: translate3d(0, 0, 0) rotate(0); } 50% { transform: translate3d(1px, -6px, 0) rotate(-2deg); } }
@keyframes autoFeaturedPackage { 0%, 100% { transform: translate3d(0, 0, 0) rotate(0); } 50% { transform: translate3d(-2px, -6px, 0) rotate(-0.7deg); } }
@keyframes autoFeaturedEdible { 0%, 100% { transform: translate3d(0, 0, 0) rotate(0); } 50% { transform: translate3d(3px, -9px, 0) rotate(3deg); } }
@keyframes autoProductLift { 0%, 100% { transform: translate3d(0, 0, 0) rotate(0); } 50% { transform: translate3d(0, -6px, 0) rotate(1.2deg); } }
@keyframes autoStoryScene { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.018); } }
@keyframes autoStoryA { 0%, 100% { transform: translate3d(0, 0, 0) rotate(0); } 50% { transform: translate3d(2px, -7px, 0) rotate(-1.5deg); } }
@keyframes autoStoryB { 0%, 100% { transform: translate3d(0, 0, 0) rotate(0); } 50% { transform: translate3d(-3px, -6px, 0) rotate(2deg); } }
@keyframes autoStoryC { 0%, 100% { transform: translate3d(0, 0, 0) rotate(0); } 50% { transform: translate3d(1px, -8px, 0) rotate(-1deg); } }
@keyframes autoDialogHero { 0%, 100% { transform: translate3d(0, 0, 0) scale(1.001); } 50% { transform: translate3d(0, -3px, 0) scale(1.008); } }
@keyframes autoDialogProduct { 0%, 100% { transform: translate3d(0, 0, 0) rotate(0); } 50% { transform: translate3d(0, -7px, 0) rotate(1.5deg); } }
@keyframes aura { 0%, 100% { filter: drop-shadow(0 18px 24px rgba(21, 31, 67, 0.28)); } 50% { filter: drop-shadow(0 24px 34px rgba(69, 102, 204, 0.46)); } }

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .product-aura { animation: aura 5s ease-in-out infinite; }
  .hero-product:hover::after { opacity: 0.78; }
  .hero-product:hover .hero-stage { transform: rotate(-3deg) rotateX(var(--hover-tilt-x)) rotateY(var(--hover-tilt-y)) translate3d(var(--hover-far-x), var(--hover-far-y), 0) scale(1.018); box-shadow: 0 48px 90px rgba(34, 45, 104, 0.34), 0 0 0 1px rgba(255, 255, 255, 0.14); }
  .hero-product:hover .hero-edible { transform: translate3d(var(--hover-near-x), var(--hover-near-y), 0) rotate(13deg) scale(1.08); filter: drop-shadow(0 30px 38px rgba(11, 20, 62, 0.5)) drop-shadow(0 0 22px rgba(243, 212, 119, 0.28)); }
  .hero-product:hover .hero-product-label { transform: translate3d(var(--hover-inverse-x), var(--hover-inverse-y), 0) rotate(-1deg); box-shadow: 0 22px 40px rgba(20, 21, 16, 0.18); }
}

@media (min-width: 861px) and (max-height: 820px) {
  .hero { padding-top: calc(var(--header) + 0.8rem); padding-bottom: 0.8rem; }
  .hero-inner { grid-template-columns: minmax(0, 1.12fr) minmax(390px, 0.88fr); gap: 2rem; }
  .hero-wordmark { width: 185px; margin-bottom: 0.2rem; }
  .hero-copy h1 { max-width: 700px; margin-block: 0.35rem 0.7rem; font-size: clamp(3.1rem, 7.2vh, 4.2rem); }
  .hero-lede { font-size: 1rem; line-height: 1.48; }
  .hero-actions { margin-top: 0.85rem; }
  .hero-find { margin-top: 0.55rem; }
  .adult-note { margin-top: 0.6rem; line-height: 1.4; }
  .hero-product { min-height: calc(100svh - var(--header) - 2rem); max-height: 610px; }
  .product-sheet { grid-template-rows: minmax(0, 1fr) 112px 30px; }
  .product-dialog-copy { padding-block: 1rem; }
  .product-dialog-copy h2 { min-height: 1.9em; max-height: 1.9em; font-size: clamp(2.35rem, 5.6vh, 3.65rem); }
  .product-dialog-description { min-height: 2.8em; max-height: 2.8em; font-size: 0.85rem; }
  .product-use-note { min-height: 76px; max-height: 76px; margin-top: 0.5rem; padding-block: 0.45rem; }
  .product-use-note p { font-size: 0.72rem; -webkit-line-clamp: 2; }
  .product-dialog-facts { min-height: 55px; margin-top: 0.5rem; }
  .product-dialog-facts div { min-height: 42px; padding-top: 0.3rem; }
  .product-dialog-facts dt { font-size: 0.55rem; }
  .product-dialog-facts dd { font-size: 0.78rem; }
  .product-dialog-actions { min-height: 38px; margin-top: 0.4rem; }
  .product-dialog-actions .button { min-height: 38px; padding: 0.55rem 0.9rem; font-size: 0.82rem; }
  .product-dialog-stepper { min-height: 32px; margin-top: 0.35rem; padding-top: 0.3rem; }
  .product-dialog-browser { padding-block: 0.4rem 0.3rem; }
  .product-dialog-browser-head { min-height: 27px; }
  .product-dialog-browser-head .eyebrow { font-size: 0.62rem; }
  .product-thumb-controls button { width: 29px; height: 29px; }
  .product-thumb-rail { height: 66px; margin-top: 0.2rem; }
  .product-thumb { grid-template-columns: 42px 1fr; min-height: 56px; }
  .product-thumb img { width: 42px; height: 42px; }
  .product-dialog-legal { font-size: 0.56rem; }
}

@media (max-width: 1080px) {
  .main-nav a { padding-inline: 0.58rem; font-size: 0.84rem; }
  .hero-inner { grid-template-columns: minmax(0, 0.92fr) minmax(380px, 1.08fr); }
  .collection-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .locator-form { grid-template-columns: 1fr 0.55fr 0.5fr; }
  .locator-submit { grid-column: 1 / -1; width: 100%; }
}

@media (max-width: 860px) {
  :root { --header: 70px; }
  section[id], .hero[id] { scroll-margin-top: 0; }
  .shell { width: min(calc(100% - 30px), var(--shell)); }
  .menu-button { display: block; }
  .main-nav { position: fixed; top: var(--header); left: 0; right: 0; display: flex; max-height: calc(100dvh - var(--header)); flex-direction: column; align-items: stretch; gap: 0; overflow: auto; border-bottom: 1px solid rgba(214, 169, 39, 0.3); background: rgba(20, 21, 16, 0.99); padding: 0.5rem 1rem 1rem; opacity: 0; pointer-events: none; transform: translateY(-10px); transition: opacity 180ms ease, transform 220ms var(--ease); }
  .main-nav.open { opacity: 1; pointer-events: auto; transform: none; }
  .main-nav a { border-radius: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.1); padding: 1rem 0.3rem; font-size: 1rem; }
  .main-nav .header-find { margin: 0.8rem 0 0; border: 0; border-radius: 999px; padding: 0.9rem 1rem; text-align: center; }
  .hero { min-height: auto; padding-bottom: 3.2rem; }
  .hero-inner { grid-template-columns: 1fr; min-height: auto; }
  .hero-product { order: -1; min-height: 440px; margin-top: 0.35rem; }
  .hero-copy { max-width: 680px; }
  .hero-wordmark { display: none; }
  .hero-copy h1 { font-size: clamp(3rem, 11vw, 5.25rem); }
  .featured-shell, .story-shell, .match-shell, .retailers-shell { grid-template-columns: 1fr; }
  .match-intro { position: static; }
  .featured-visual { min-height: 470px; }
  .story-scene { max-width: 760px; }
  .locator-form { grid-template-columns: 1fr 1fr; }
  .field-product { grid-column: 1 / -1; }
  .locator-output.visible { grid-template-columns: 1fr; }
  .locator-map { min-height: 340px; }
  .retailers-card { max-width: 680px; }
  .journey-inner { justify-content: center; }
  .trailhead-sign { width: min(760px, 96%); padding-inline: 38px; }
  .trailhead-notice { grid-template-columns: minmax(0, 1fr) 140px; }
  .product-dialog { width: 100vw; height: 100dvh; max-height: none; padding: 8px; }
  .product-sheet { max-height: calc(100dvh - 16px); border-radius: 24px; }
  .product-dialog-main { grid-template-columns: 1fr; }
  .product-dialog-visual { min-height: 52vw; }
  .product-dialog-hero { min-height: 52vw; aspect-ratio: 4 / 3; }
  .product-dialog-copy { padding: 2rem clamp(1.2rem, 5vw, 2.2rem); }
}

@media (max-width: 620px) {
  body { font-size: 16px; }
  .shell { width: min(calc(100% - 24px), var(--shell)); }
  .section { padding: 4rem 0; }
  .brand { width: 118px; }
  .brand img { width: 118px; }
  .hero { padding-top: calc(var(--header) + 0.85rem); padding-bottom: 2.8rem; }
  .hero-product { min-height: 350px; }
  .hero-stage { inset: 5% 1% 2% 1%; }
  .hero-package { width: 86%; left: 4%; top: 9%; }
  .hero-edible { width: 27%; right: 3%; bottom: 4%; }
  .hero-product-label { left: 2%; bottom: 2%; }
  .hero-copy h1 { margin-block: 0.45rem 0.7rem; font-size: clamp(2.9rem, 12vw, 4.4rem); }
  .hero-copy { border-radius: 22px; padding: 1.05rem; }
  .hero-lede { font-size: 0.98rem; line-height: 1.52; }
  .hero-actions { flex-direction: column; margin-top: 0.8rem; }
  .hero-actions .button { width: 100%; }
  .text-link, .text-button { min-height: 44px; align-items: center; padding-block: 0.55rem; }
  .collection-grid { width: calc(100% + 24px); grid-template-columns: none; grid-auto-columns: min(84vw, 348px); grid-auto-flow: column; gap: 0.8rem; overflow-x: auto; margin: 2.1rem -12px 0; padding: 0.25rem 12px 0.85rem; scroll-padding-inline: 12px; scroll-snap-type: x mandatory; overscroll-behavior-inline: contain; scrollbar-width: none; }
  .collection-grid::-webkit-scrollbar { display: none; }
  .collection-card { min-height: 460px; scroll-snap-align: start; border-radius: 22px; }
  .collection-photo { height: auto; aspect-ratio: 4 / 3; }
  .collection-body { min-height: 185px; padding: 0.95rem 1rem 1rem; }
  .collection-body h3 { font-size: 1.75rem; }
  .collection-body p { font-size: 0.84rem; line-height: 1.42; }
  .collection-action { min-height: 44px; align-items: center; padding-top: 0.55rem; }
  .featured-visual { min-height: 340px; }
  .featured-image-field { inset: 0; }
  .product-facts { grid-template-columns: 1fr; gap: 0.45rem; }
  .product-facts div { display: grid; grid-template-columns: 90px 1fr; align-items: baseline; }
  .featured-actions { align-items: stretch; flex-direction: column; gap: 0.45rem; margin-top: 1.35rem; }
  .featured-actions .button, .featured-actions .text-button { width: 100%; justify-content: center; }
  .lineup-head { align-items: flex-start; flex-direction: column; }
  .rail-controls { align-self: flex-end; margin-top: -0.35rem; }
  .rail-controls button { width: 44px; height: 44px; }
  .category-tabs { width: calc(100% + 24px); flex-wrap: nowrap; gap: 0.45rem; overflow-x: auto; margin: 1.55rem -12px 1rem; padding: 0 12px 0.45rem; scroll-padding-inline: 12px; scrollbar-width: none; }
  .category-tabs::-webkit-scrollbar { display: none; }
  .category-tabs button { flex: 0 0 auto; }
  .lineup-rail { width: calc(100% + 34px); grid-auto-columns: min(78vw, 308px); margin-inline: -22px -12px; padding: 18px 22px 24px; scroll-padding-right: 12px; }
  .product-card { min-height: 610px; }
  .product-image { height: 248px; }
  .product-description { min-height: 4.1em; font-size: 0.76rem; }
  .product-card-actions { gap: 0.4rem; padding-top: 0.75rem; }
  .feature-button { display: inline-flex; min-height: 44px; align-items: center; padding: 0.65rem 0.55rem; }
  .responsibility-note { grid-template-columns: 1fr; gap: 0.35rem; }
  .responsibility-note strong { white-space: normal; }
  .choice-row { grid-template-columns: 1fr; }
  .match-products { grid-template-columns: 1fr; }
  .match-product, .match-products-1 .match-product { display: grid; min-height: 180px; grid-template-columns: 126px minmax(0, 1fr); grid-template-rows: auto auto auto 1fr; column-gap: 0.85rem; }
  .match-product img { grid-row: 1 / 5; width: 100%; height: 138px; align-self: center; }
  .match-product span, .match-product strong, .match-product small, .match-product-actions { grid-column: 2; }
  .match-product-actions { gap: 0.8rem; padding-top: 0.45rem; }
  .match-product-actions button { display: flex; min-height: 44px; align-items: center; }
  .story-actions, .retailers-actions { align-items: stretch; flex-direction: column; }
  .story-actions .button, .story-actions .text-link, .retailers-actions .button, .retailers-actions .text-link { width: 100%; justify-content: center; }
  .story-facts { justify-content: space-between; gap: 0.75rem; }
  .story-facts div { min-width: 82px; }
  .story-scene figcaption { align-items: flex-start; flex-direction: column; gap: 0.1rem; }
  .journey { min-height: 720px; padding-block: 4.5rem; }
  .trailhead-sign { width: 100%; padding: 58px 14px 52px; }
  .trailhead-roof { height: 76px; }
  .trailhead-post { top: 50px; bottom: -34px; width: 34px; }
  .trailhead-post-left { left: 5%; }.trailhead-post-right { right: 5%; }
  .trailhead-board { border-width: 5px; padding: 1rem; }
  .trailhead-name { font-size: 0.83rem; letter-spacing: 0.13em; }
  .trailhead-notice { grid-template-columns: 1fr; gap: 1rem; padding: 1.05rem; }
  .trailhead-copy h2 { font-size: clamp(2.2rem, 10.8vw, 3.4rem); }
  .trailhead-copy p:not(.eyebrow) { font-size: 0.9rem; line-height: 1.48; }
  .trailhead-copy .button { width: 100%; }
  .trailhead-route { min-height: 118px; }
  .locator-form { grid-template-columns: 1fr; }
  .field-product, .locator-submit { grid-column: auto; }
  .locator-card { margin-top: 1.8rem; border-radius: 22px; padding: 1rem; }
  .locator-picker-button { min-height: 66px; }
  .locator-picker-list { max-height: min(390px, 48vh); }
  .locator-picker-option { min-height: 66px; }
  .locator-item { min-height: 58px; }
  .retailers-card { border-radius: 22px; }
  .footer-top { grid-template-columns: 1fr; }
  .footer nav a { display: flex; min-width: 44px; min-height: 44px; align-items: center; }
  .footer-bottom { align-items: flex-start; }
  .product-dialog { width: 100vw; height: 100dvh; max-height: none; margin: 0; padding: 0; }
  .product-sheet { max-height: 100dvh; border-radius: 0; }
  .product-dialog-close { top: 10px; right: 10px; margin: 0; }
  .product-dialog-visual, .product-dialog-hero { min-height: min(66vw, 300px); }
  .product-dialog-copy { padding: 1.55rem 1rem 1.35rem; }
  .product-dialog-copy h2 { margin-block: 0.45rem 0.8rem; font-size: clamp(2.45rem, 12vw, 3.6rem); }
  .product-use-note { margin-top: 1rem; }
  .product-dialog-facts { grid-template-columns: 1fr; }
  .product-dialog-actions { align-items: stretch; flex-direction: column; gap: 0.4rem; margin-top: 1.2rem; }
  .product-dialog-actions .button, .product-dialog-actions .text-button { width: 100%; min-height: 44px; justify-content: center; }
  .product-dialog-stepper button { min-height: 44px; padding: 0.65rem 0.25rem; }
  .product-dialog-browser-head { align-items: flex-start; }
  .product-dialog-browser-head > div:first-child > p:last-child { display: none; }
  .product-thumb-controls button { width: 44px; height: 44px; }
  .product-thumb-rail { grid-auto-columns: 160px; }
  .product-thumb { grid-template-columns: 54px 1fr; min-height: 70px; }
  .product-thumb img { width: 54px; height: 54px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: 0.001ms !important; }
  .reveal { opacity: 1; transform: none; }
}


/* ═══ THE SWIFTS PAISLEY BACKGROUND SYSTEM (operator, 2026-09-02) ══════════════════════════════════
   Not wallpaper. Two or three OVERSIZED fragments of the Swifts boteh per area, cropped by the section
   edge, drawn as contour outlines and nested inside themselves the way the print nests its tonal bands —
   which reads as topography. Each field is clipped by its own section, so a decorative shape can never
   scroll the page sideways, and each carries its section's own tone at a low opacity so products and
   copy stay the dominant layer. */
.paisley-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.section, .footer { position: relative; isolation: isolate; }
.section > .shell, .footer > .shell { position: relative; z-index: 1; }
.motif-field { position: absolute; z-index: 0; inset: 0; overflow: hidden; pointer-events: none; color: var(--motif-color, var(--ink)); contain: paint; }
.motif { position: absolute; left: var(--x); top: var(--y); width: var(--s); aspect-ratio: 1; overflow: visible; transform: translate(-50%, -50%) translateY(var(--par, 0px)) rotate(var(--r, 0deg)); opacity: var(--motif-alpha, 0.07); }
.motif use, .motif circle { fill: none; stroke: currentColor; stroke-width: 1.15; vector-effect: non-scaling-stroke; }

/* section tones, drawn from each section's own palette */
.hero { --motif-color: var(--gold-light); --motif-alpha: 0.15; }
.collections { --motif-color: var(--gold-dark); --motif-alpha: 0.09; }
.featured { --motif-color: var(--feature-accent, var(--gold-dark)); --motif-alpha: 0.12; }
.match { --motif-color: #ffffff; --motif-alpha: 0.1; }
.lineup { --motif-color: var(--gold-dark); --motif-alpha: 0.07; }
.story { --motif-color: var(--leaf); --motif-alpha: 0.1; }
.journey { --motif-color: var(--gold-light); --motif-alpha: 0.16; }
.find { --motif-color: var(--gold-dark); --motif-alpha: 0.06; }
.footer { --motif-color: var(--gold); --motif-alpha: 0.14; }
.hero .motif-field { z-index: 1; }
.journey .motif-field { z-index: 1; }

/* ═══ CTA HIERARCHY ═══════════════════════════════════════════════════════════════════════════════
   One primary per view: gold, heavier, lifted. Secondary is an outline that borrows the ground it sits
   on. Tertiary stays an underlined text link. */
.button-primary { min-height: 58px; padding: 1rem 2rem; font-size: 1.05rem; letter-spacing: 0.01em; box-shadow: 0 14px 34px rgba(155, 111, 6, 0.32); }
.button-primary:hover { box-shadow: 0 18px 42px rgba(155, 111, 6, 0.4); }
.button-ghost { border-color: currentColor; background: none; color: inherit; font-weight: 700; box-shadow: none; }
.button-ghost:hover { border-color: var(--gold); background: rgba(214, 169, 39, 0.12); color: inherit; }
.hero-copy .button-ghost { border-color: rgba(255, 255, 255, 0.5); color: rgba(255, 255, 255, 0.92); }
.hero-copy .button-ghost:hover { border-color: var(--gold-light); background: rgba(255, 255, 255, 0.08); color: #fff; }
.hero-find { font-size: 0.92rem; opacity: 0.86; }
.hero-find:hover { opacity: 1; }

/* ═══ FEATURED ════════════════════════════════════════════════════════════════════════════════════ */
.featured-flag { display: inline-flex; align-items: center; margin-top: 0.55rem; border: 1px solid var(--gold-dark); border-radius: 999px; background: rgba(214, 169, 39, 0.16); color: var(--gold-dark); padding: 0.35rem 0.8rem; font-size: 0.68rem; font-weight: 850; letter-spacing: 0.12em; text-transform: uppercase; }

/* ═══ THE LINEUP ══════════════════════════════════════════════════════════════════════════════════
   Formats sit beneath collections, so the second row appears only inside a collection that has more
   than one. Responsible use stays on the page but steps back behind the products. */
.format-tabs { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: -0.45rem 0 1.35rem; }
.format-tabs button { min-height: 38px; border: 1px solid rgba(20, 21, 16, 0.16); border-radius: 999px; background: none; color: #5c5e54; padding: 0.4rem 0.95rem; font-size: 0.78rem; font-weight: 800; cursor: pointer; transition: border-color 160ms ease, background 160ms ease, color 160ms ease; }
.format-tabs button:hover { border-color: var(--gold); color: var(--ink); }
.format-tabs button[aria-pressed="true"] { border-color: var(--gold-dark); background: rgba(214, 169, 39, 0.18); color: var(--ink); }
.responsibility-note { margin-top: 1.6rem; border-top: 1px solid rgba(20, 21, 16, 0.12); padding-top: 0.9rem; }
.responsibility-note summary { display: flex; min-height: 44px; align-items: center; gap: 0.5rem; color: #6b6d62; font-size: 0.8rem; cursor: pointer; list-style: none; }
.responsibility-note summary::-webkit-details-marker { display: none; }
.responsibility-note summary::after { content: "+"; margin-left: 0.1rem; color: var(--gold-dark); font-weight: 850; }
.responsibility-note[open] summary::after { content: "–"; }
.responsibility-note summary span { border: 1px solid rgba(20, 21, 16, 0.2); border-radius: 999px; padding: 0.1rem 0.42rem; font-size: 0.66rem; font-weight: 850; }
.responsibility-note p { max-width: 74ch; margin-top: 0.5rem; color: #74766b; font-size: 0.78rem; line-height: 1.6; }

/* ═══ RETAILER FINDER ═════════════════════════════════════════════════════════════════════════════
   One sentence stays prominent — call ahead. The status definitions and the disclaimer move behind a
   disclosure so the primary flow is product → ZIP → radius → find → directions. */
.locator-callahead { margin-top: 1rem; color: var(--gold-light); font-size: 0.95rem; }
.locator-callahead strong { font-weight: 800; }
.locator-about { margin-top: 0.5rem; border-top: 1px solid rgba(255, 255, 255, 0.14); padding-top: 0.5rem; }
.locator-about summary { display: flex; min-height: 44px; align-items: center; gap: 0.45rem; color: rgba(255, 255, 255, 0.66); font-size: 0.8rem; font-weight: 700; cursor: pointer; list-style: none; }
.locator-about summary::-webkit-details-marker { display: none; }
.locator-about summary::after { content: "+"; color: var(--gold-light); font-weight: 850; }
.locator-about[open] summary::after { content: "–"; }
.locator-about .locator-legend { margin-top: 0.35rem; }
.locator-about .locator-foot { margin-top: 0.7rem; }

/* ═══ RESPONSIVE ══════════════════════════════════════════════════════════════════════════════════ */

/* Narrow laptop / large tablet. The hero used to hold two columns down to 861px, which is where the
   copy and the package started fighting; it now stacks a full breakpoint earlier, deliberately. */
@media (max-width: 1024px) {
  .hero { min-height: auto; padding-bottom: 3.4rem; }
  .hero-inner { grid-template-columns: 1fr; gap: 2.2rem; min-height: auto; }
  .hero-product { order: -1; min-height: min(52vw, 460px); margin-top: 0.4rem; }
  .hero-copy { max-width: 720px; }
  .hero-copy h1 { font-size: clamp(2.9rem, 7.4vw, 4.4rem); }
  .featured-shell, .story-shell, .retailers-shell { grid-template-columns: 1fr; }
  .featured-visual { min-height: min(58vw, 520px); }
  .story-copy p, .retailers-copy p { max-width: 68ch; }
  .story-scene { max-width: 720px; }
  .trailhead-sign { width: min(760px, 92%); }
}

/* Tablet portrait. Four matcher options become 2 x 2 rather than four cramped columns. */
@media (max-width: 900px) {
  .choice-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .collection-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  .hero-product { min-height: min(62vw, 420px); }
  .locator-callahead { font-size: 0.9rem; }
}

@media (max-width: 620px) {
  .hero-copy h1 { font-size: clamp(2.7rem, 11.5vw, 4rem); }
  .hero-product { min-height: 350px; }
  .button-primary { min-height: 54px; font-size: 1rem; }
  .format-tabs { width: calc(100% + 24px); flex-wrap: nowrap; overflow-x: auto; margin: -0.2rem -12px 1.1rem; padding: 0 12px 0.4rem; scrollbar-width: none; }
  .format-tabs::-webkit-scrollbar { display: none; }
  .format-tabs button { flex: 0 0 auto; min-height: 40px; }
  /* one static motif per section, no parallax */
  .motif-field .motif:nth-of-type(n + 2) { display: none; }
  .motif { opacity: calc(var(--motif-alpha, 0.07) * 0.85); }
}

/* Touch is about the pointer, not the width — a tablet at 800px needs the same 44px targets a phone
   does, and the width-keyed rules below stop at 620. */
@media (hover: none), (pointer: coarse) {
  .text-link, .text-button, .hero-find { min-height: 44px; align-items: center; }
  .footer nav a { display: flex; min-width: 44px; min-height: 44px; align-items: center; }
  .responsibility-note summary, .locator-about summary { min-height: 44px; }
}

/* Phone landscape: the hero must not demand two screens. Width is ample here, so the composition goes
   back side-by-side rather than stacking — a landscape phone is a wide viewport, not a tall one. */
@media (max-height: 520px) and (orientation: landscape) {
  .hero { min-height: auto; padding-top: calc(var(--header) + 1rem); padding-bottom: 2.4rem; }
  .hero-product { min-height: 260px; }
  .journey { min-height: auto; padding-block: 3.5rem; }
  .product-dialog-visual, .product-dialog-hero { min-height: 42vh; }
}
@media (max-height: 520px) and (orientation: landscape) and (min-width: 640px) {
  .hero-inner { grid-template-columns: minmax(0, 1fr) minmax(260px, 0.8fr); gap: 1.8rem; align-items: center; }
  .hero-product { order: 0; min-height: 232px; margin-top: 0; }
  .hero-copy h1 { margin-block: 0.4rem 0.7rem; font-size: clamp(1.9rem, 4.4vw, 2.7rem); }
  .hero-lede { font-size: 0.95rem; }
  .hero-wordmark { width: 140px; }
}

@media (prefers-reduced-motion: reduce) {
  .motif { transform: translate(-50%, -50%) rotate(var(--r, 0deg)); }
}


/* ═══ THE SECTION RAIL (operator, 2026-09-02) ═════════════════════════════════════════════════════
   A vertical navigator floating in the left gutter: one tick per section, the current one lit, click to
   jump. It sits ABOVE the page and the finder's dropdown but BELOW the fixed header, and the product
   dialog covers it outright because a <dialog> renders in the top layer. Alpha-blended over whatever
   scrolls behind it, so it reads on the cream sections and on the dark ones alike. */
.section-rail { position: fixed; z-index: 90; top: 50%; left: 3px; display: none; grid-auto-flow: row; gap: 3px; border: 1px solid transparent; border-radius: 999px; background: transparent; padding: 7px 4px; transform: translateY(-50%); transition: background 220ms ease, border-color 220ms ease, padding 220ms var(--ease), box-shadow 220ms ease; }
.section-rail:hover, .section-rail:focus-within { border-color: rgba(243, 212, 119, 0.42); background: rgba(20, 21, 16, 0.72); box-shadow: 0 18px 44px rgba(8, 10, 7, 0.24); backdrop-filter: blur(16px) saturate(1.25); -webkit-backdrop-filter: blur(16px) saturate(1.25); }
.rail-item { position: relative; display: flex; width: 20px; height: 20px; align-items: center; justify-content: center; border-radius: 999px; text-decoration: none; }
.rail-tick { width: 11px; height: 2px; border-radius: 999px; background: rgba(255, 250, 240, 0.4); transition: width 200ms var(--ease), background 200ms ease; }
.rail-item:hover .rail-tick { width: 16px; background: var(--gold-light); }
.rail-item.active .rail-tick { width: 18px; height: 3px; background: var(--gold); box-shadow: 0 0 10px rgba(214, 169, 39, 0.55); }
.rail-item:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 2px; }
/* the label rides out of the rail on hover or keyboard focus; it stays in the accessibility tree always */
.rail-label { position: absolute; left: 26px; border-radius: 999px; background: rgba(20, 21, 16, 0.92); color: #fff; padding: 0.34rem 0.62rem; font: 850 0.64rem/1 var(--sans); letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; opacity: 0; pointer-events: none; transform: translateX(-5px); transition: opacity 170ms ease, transform 170ms var(--ease); }
.rail-item:hover .rail-label, .rail-item:focus-visible .rail-label { opacity: 1; transform: none; }

/* Two states, both of which keep the rail OUT of the content at rest.
   1100-1359px: the gutter is only ~22-30px, so the rail rides the very edge as bare ticks and only
   becomes the alpha-blended pill on hover or keyboard focus.
   1360px and up: the gutter is wide enough for the full floating pill to sit beside the content with a
   constant 12px of clearance at every width. */
@media (min-width: 1100px) {
  .section-rail { display: grid; }
}
@media (min-width: 1100px) and (max-width: 1359px) {
  /* ~20px of gutter here, so the rail is a bare tick strip on the edge and only becomes the pill on
     hover or keyboard focus, where overlapping the content is a deliberate interaction. */
  .section-rail { left: 0; padding: 5px 1px; }
  .section-rail .rail-item { width: 14px; }
  .section-rail .rail-tick { width: 9px; }
  .section-rail .rail-item:hover .rail-tick { width: 11px; }
  .section-rail .rail-item.active .rail-tick { width: 12px; }
  .section-rail:hover, .section-rail:focus-within { padding: 8px 6px; }
}
@media (min-width: 1360px) {
  /* `100%` on a fixed element is the viewport WITHOUT the scrollbar, which `100vw` includes — measuring
     from vw put the pill 15px further right and left only 3px of clearance. */
  .section-rail { left: calc((100% - var(--shell)) / 2 - 44px); border-color: rgba(243, 212, 119, 0.22); background: rgba(20, 21, 16, 0.42); padding: 8px 6px; box-shadow: 0 18px 44px rgba(8, 10, 7, 0.24); backdrop-filter: blur(16px) saturate(1.25); -webkit-backdrop-filter: blur(16px) saturate(1.25); }
}
@media (prefers-reduced-motion: reduce) {
  .rail-tick, .rail-label { transition: none; }
}


/* ═══ THE MAX AURA (operator, 2026-09-02) ═════════════════════════════════════════════════════════
   The same treatment the trail game gives its MAX cards — see the `aurora` branch in
   client/src/components/trailDressing.ts, "the glowing-AROUND effect (operator: the MAX-card
   treatment)". There it is a rounded-rectangle rim that stays faintly lit while two bright segments
   180 degrees apart chase around the border, the leading one picking up a cool blue-white cast over the
   product tint, blended additively.

   Here the rim is a conic gradient rotated by an animated angle and masked down to a 2px ring, so only
   the border lights up, over a constant soft outer glow in the product's own colour. The card clips its
   own overflow, so the ring sits just inside the border rather than straddling it.

   `@property` is what makes an angle animatable. Where it is unsupported the gradient simply holds
   still: a lit rim rather than a broken one. Reduced motion stops the sweep through the global rule. */
/* ═══ THE MAX HALO ═══════════════════════════════════════════════════════════════════════════════
   Recorded so it is not repeated. Two earlier passes looked static and flat for two separate reasons:

   1. The gradient never moved. `--aura` was declared on the CARD, so the `var(--aura-angle)` inside it
      resolved on the card — while the animation ran on the pseudo-elements. Measured live: the computed
      background came back byte-identical a second apart, with the `from` clause collapsed to a constant,
      even though getAnimations() reported the animation running.
   2. Blurring a gradient whose bright cores are narrow averages them away, which is what made the glow
      read as a flat wash instead of a light.

   So the light is a real ELEMENT rotated with `transform` — no registered custom property, and it runs
   on the compositor — inside a ring that does not rotate, with lobes wide enough to survive.

   On fidelity: the game blends additively over a dark forest scene, which is what makes its glow look
   blown out. Nothing on a cream page can be brighter than the page, so this is a saturated travelling
   bloom rather than white light. The card stays cream. */
.product-card.max {
  border-color: color-mix(in srgb, var(--product-accent) 55%, #ddd);
  overflow: visible;
  /* three falloffs so the light reads as a bloom rather than an outline */
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--product-accent) 70%, transparent),
    0 0 22px -2px color-mix(in srgb, var(--product-accent) 72%, transparent),
    0 0 64px 4px color-mix(in srgb, var(--product-accent) 34%, transparent);
}
/* the card used to clip its own children, which is what trapped the light inside it */
.product-card.max > .product-image { border-radius: 21px 21px 0 0; }

/* the halo: a 12px band hugging the card, lit from a conic gradient that genuinely turns */
.card-aura {
  position: absolute;
  z-index: 3;
  inset: -20px;
  border-radius: 42px;
  padding: 20px;
  overflow: hidden;
  pointer-events: none;
  /* the band bleeds both ways, which is what turns a lit edge into a halo */
  filter: blur(9px);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}
.card-aura i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 330%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  animation: auraSpin 5.5s linear infinite;
  /* blurring a rotating layer re-rasterizes every frame, so it only runs while the card is on screen —
     `.motion-active` is the page's existing IntersectionObserver signal */
  animation-play-state: paused;
  will-change: transform;
  /* two wide lobes 180 degrees apart, the way the shader keeps two travelling segments over a lit rim */
  background: conic-gradient(
    color-mix(in srgb, var(--product-accent) 18%, transparent) 0deg,
    color-mix(in srgb, var(--product-accent) 62%, transparent) 34deg,
    color-mix(in srgb, var(--product-accent) 92%, #ffffff) 62deg,
    var(--product-accent) 76deg,
    color-mix(in srgb, var(--product-accent) 88%, #ffffff) 90deg,
    color-mix(in srgb, var(--product-accent) 50%, transparent) 126deg,
    color-mix(in srgb, var(--product-accent) 16%, transparent) 168deg,
    color-mix(in srgb, var(--product-accent) 24%, transparent) 196deg,
    color-mix(in srgb, var(--product-accent) 70%, transparent) 228deg,
    var(--product-accent) 256deg,
    color-mix(in srgb, var(--product-accent) 70%, transparent) 288deg,
    color-mix(in srgb, var(--product-accent) 20%, transparent) 330deg,
    color-mix(in srgb, var(--product-accent) 18%, transparent) 360deg);
}
@keyframes auraSpin { to { transform: translate(-50%, -50%) rotate(1turn); } }
.product-card.max.motion-active .card-aura i { animation-play-state: running; }
.product-card.max .product-badge { box-shadow: 0 0 16px -4px color-mix(in srgb, var(--product-accent) 85%, transparent); }

/* ═══ STORE RESULTS — DIRECTIONS ═════════════════════════════════════════════════════════════════
   The row itself is a button that focuses the map pin, so Directions is its sibling. The dataset still
   carries no retailer website, so this is the only outward link offered. */
.locator-entry { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0.55rem; }
.locator-directions { display: inline-flex; min-height: 44px; align-items: center; gap: 0.35rem; border: 1px solid rgba(255, 255, 255, 0.26); border-radius: 999px; background: rgba(255, 255, 255, 0.06); color: #fff; padding: 0.5rem 0.9rem; font-size: 0.74rem; font-weight: 820; text-decoration: none; white-space: nowrap; transition: border-color 160ms ease, background 160ms ease; }
.locator-directions:hover { border-color: var(--gold); background: rgba(214, 169, 39, 0.12); }
.locator-directions:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 2px; }
@media (max-width: 620px) {
  .locator-entry { grid-template-columns: 1fr; gap: 0.35rem; }
  .locator-directions { justify-content: center; }
}



/* ═══ EXPANDED CARD — INGREDIENTS + NUTRITION ════════════════════════════════════════════════════
   From the Recipe Book through the same-origin public read. Both blocks are closed by default: the
   sheet's job is still the product, and this is the detail a shopper goes looking for. */
.product-detail { margin-top: 0.9rem; border-top: 1px solid rgba(20, 21, 16, 0.12); }
.product-detail-block { border-bottom: 1px solid rgba(20, 21, 16, 0.1); }
.product-detail-block summary { display: flex; min-height: 44px; align-items: center; justify-content: space-between; color: var(--ink); font: var(--label, 850 0.68rem/1.3 var(--sans)); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; list-style: none; }
.product-detail-block summary::-webkit-details-marker { display: none; }
.product-detail-block summary::after { content: "+"; color: var(--gold-dark); font-size: 1rem; font-weight: 850; }
.product-detail-block[open] summary::after { content: "\2013"; }
.product-detail-ingredients { margin-bottom: 0.4rem; color: #55574e; font-size: 0.79rem; line-height: 1.5; }
.product-detail-serving { margin-bottom: 0.5rem; color: #6f7167; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; }
.product-detail-nutrition { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.1rem 1.4rem; margin-bottom: 0.6rem; }
.product-detail-nutrition div { display: flex; justify-content: space-between; gap: 0.6rem; border-bottom: 1px solid rgba(20, 21, 16, 0.08); padding: 0.28rem 0; }
.product-detail-nutrition dt { color: #6b6d63; font-size: 0.78rem; }
.product-detail-nutrition dd { color: var(--ink); font-size: 0.78rem; font-weight: 800; }
.product-detail-note { margin-bottom: 0.7rem; color: #83857a; font-size: 0.7rem; line-height: 1.45; }
/* The Cannabinoids block reads in the same voice as the nutrition panel, but one column: its values are
   full breakdowns ("100mg THC · 300mg CBD · 100mg CBN"), too long for the nutrition grid's two. */
.product-detail-facts { display: grid; gap: 0.1rem; margin-bottom: 0.6rem; }
.product-detail-facts div { display: flex; justify-content: space-between; gap: 1rem; border-bottom: 1px solid rgba(20, 21, 16, 0.08); padding: 0.28rem 0; }
.product-detail-facts dt { color: #6b6d63; font-size: 0.78rem; white-space: nowrap; }
.product-detail-facts dd { color: var(--ink); font-size: 0.78rem; font-weight: 800; text-align: right; }
@media (max-width: 620px) {
  .product-detail-nutrition { grid-template-columns: 1fr; }
}

/* ═══ CANONICAL C × B CAMPAIGN SYSTEM (2026-09-03) ═══════════════════════════════════════════════
   Source-derived paisley only. C's generic inline contour sprite is no longer present in the document.
   Product-heavy areas stay quiet; color appears as cropped line atmosphere at the section edges. */
.section, .journey, .footer { overflow: hidden; isolation: isolate; }
.section > .shell, .journey > .shell, .footer > .shell { position: relative; z-index: 2; }
.paisley-field { position: absolute; z-index: 0; inset: 0; overflow: hidden; contain: paint; pointer-events: none; }
.paisley-fragment { --paisley-rotate: 0deg; --paisley-scale: 1; position: absolute; display: block; width: clamp(320px, 40vw, 760px); aspect-ratio: 1200 / 1308; background: currentColor; opacity: 0.07; transform: translate3d(0, var(--par, 0px), 0) rotate(var(--paisley-rotate)) scale(var(--paisley-scale)); transform-origin: center; -webkit-mask: var(--paisley-asset) center / contain no-repeat; mask: var(--paisley-asset) center / contain no-repeat; will-change: transform; }

/* Hero: seamless 43/57 editorial/product campaign field; no blob, panel, label card, or video. */
.hero { min-height: clamp(760px, calc(100svh - 14px), 880px); background: radial-gradient(ellipse at 73% 47%, rgba(102, 72, 177, 0.28) 0%, rgba(63, 46, 129, 0.13) 28%, transparent 57%), radial-gradient(ellipse at 42% 108%, rgba(214, 169, 39, 0.12), transparent 38%), linear-gradient(106deg, #03050f 0%, #060816 43%, #0b0c22 66%, #11112b 100%); padding: calc(var(--header) + clamp(2.3rem, 5vh, 4.8rem)) 0 clamp(3rem, 6vh, 5.2rem); }
.hero::before { content: ""; position: absolute; z-index: 0; inset: auto 0 0; height: 36%; background: linear-gradient(180deg, transparent, rgba(2, 3, 10, 0.54) 44%, #02030a 100%); pointer-events: none; }
.hero::after { content: ""; position: absolute; z-index: 1; left: 41%; right: 1%; bottom: 10%; height: 1px; background: linear-gradient(90deg, transparent, rgba(214, 169, 39, 0.3), rgba(161, 135, 213, 0.22), transparent); box-shadow: 0 36px 80px 22px rgba(5, 4, 21, 0.74); pointer-events: none; }
.hero .paisley-field { z-index: 1; }
.hero-paisley-field .motif-a { --paisley-rotate: 22deg; --paisley-scale: 1.2; width: min(52vw, 820px); top: -32%; right: -15%; color: #b294e6; opacity: 0.075; }
.hero-paisley-field .motif-b { --paisley-rotate: -28deg; --paisley-scale: 0.92; width: min(35vw, 560px); bottom: -28%; left: -9%; color: var(--gold-light); opacity: 0.055; }
.hero-paisley-field .motif-c { --paisley-rotate: 48deg; --paisley-scale: 0.78; width: min(28vw, 440px); top: 11%; left: 46%; color: #59a6ee; opacity: 0.04; }
.hero-inner { grid-template-columns: minmax(0, 0.43fr) minmax(0, 0.57fr); gap: clamp(1.5rem, 3.4vw, 4.4rem); align-items: center; }
.hero-copy { max-width: 600px; border: 0; border-radius: 0; background: none; box-shadow: none; padding: 0; backdrop-filter: none; -webkit-backdrop-filter: none; }
.hero-wordmark { width: clamp(160px, 13vw, 220px); margin: 0 0 1.3rem -0.35rem; }
.hero-copy .eyebrow { color: var(--gold-light); letter-spacing: 0.22em; }
.hero-copy h1 { max-width: 660px; margin: 1.15rem 0 1.4rem; color: #fff7dd; font-size: clamp(4rem, 5vw, 6.25rem); line-height: 0.98; text-shadow: 0 8px 36px rgba(0, 0, 0, 0.44); }
.hero-lede { max-width: 520px; color: rgba(255, 255, 255, 0.84); font-size: clamp(1rem, 1.18vw, 1.2rem); line-height: 1.65; }
.hero-actions { align-items: center; gap: clamp(1.1rem, 2.4vw, 2.5rem); margin-top: 2rem; }
.hero .button-primary { min-height: 62px; border-radius: 0; padding-inline: clamp(1.6rem, 2.8vw, 2.4rem); letter-spacing: 0.055em; text-transform: uppercase; box-shadow: 0 16px 38px rgba(214, 169, 39, 0.24); }
.hero-journey-link { display: inline-flex; min-height: 48px; align-items: center; gap: 0.75rem; border-bottom: 1px solid rgba(243, 212, 119, 0.72); color: #fff8df; padding: 0.25rem 0; font-size: 0.81rem; font-weight: 820; letter-spacing: 0.095em; text-decoration: none; text-transform: uppercase; }
.hero-journey-link span { color: var(--gold-light); font-size: 1.25rem; transition: transform 180ms var(--ease); }
.hero-journey-link:hover span { transform: translateX(4px); }
.hero-find { margin-top: 0.8rem; color: rgba(255, 255, 255, 0.7); }
.hero-featured { display: flex; max-width: 390px; align-items: center; gap: 0.75rem; margin-top: 2.6rem; color: rgba(255, 248, 221, 0.86); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; }
.hero-featured::before, .hero-featured > span { content: ""; display: block; height: 1px; flex: 1; background: linear-gradient(90deg, rgba(214, 169, 39, 0.65), transparent); }
.hero-featured::before { display: none; }
.hero-featured strong { flex: 0 0 auto; font-weight: 650; }
.hero-product { min-height: clamp(570px, 52vw, 735px); isolation: isolate; perspective: 1400px; }
.hero-product::before { content: ""; position: absolute; z-index: 0; left: 11%; right: 0; bottom: 7%; height: 18%; border-radius: 50%; background: radial-gradient(ellipse, rgba(123, 94, 188, 0.19), rgba(23, 17, 55, 0.28) 38%, transparent 70%); filter: blur(13px); transform: scaleY(0.6); pointer-events: none; }
.hero-product::after { content: none; }
.hero-stage { display: none; }
.hero-product-glow { position: absolute; z-index: 0; width: 76%; aspect-ratio: 1; top: 7%; left: 12%; border-radius: 50%; background: radial-gradient(circle, rgba(129, 88, 203, 0.34) 0%, rgba(72, 58, 147, 0.18) 38%, transparent 72%); filter: blur(18px); opacity: 0.86; pointer-events: none; }
.hero-ground { position: absolute; z-index: 1; left: 2%; right: -8%; bottom: 3%; height: 18%; background: linear-gradient(180deg, rgba(28, 22, 65, 0.12), rgba(6, 5, 18, 0.78)); transform: perspective(520px) rotateX(66deg); transform-origin: bottom; box-shadow: inset 0 1px rgba(243, 212, 119, 0.09); pointer-events: none; }
.hero-package { z-index: 2; width: 100%; height: 100%; max-width: none; top: -2%; left: -1%; border-radius: 0; object-fit: contain; filter: drop-shadow(0 32px 42px rgba(0, 0, 0, 0.54)); transform: translate3d(var(--hover-mid-x), var(--hover-mid-y), 0) rotateX(var(--hover-tilt-x)) rotateY(var(--hover-tilt-y)); transform-origin: 52% 64%; transition: transform 360ms var(--ease), filter 360ms var(--ease); }
.hero-edible { z-index: 4; width: 31%; right: -4%; bottom: 2%; filter: drop-shadow(0 24px 26px rgba(0, 0, 0, 0.5)); transform: translate3d(var(--hover-near-x), var(--hover-near-y), 0) rotate(7deg); transition: transform 360ms var(--ease), filter 360ms var(--ease); }
.hero-product-label { display: none; }

/* Source-derived paisley color rhythm. */
.collections-paisley-field .motif-a { --paisley-rotate: 18deg; width: 30vw; top: -19%; left: -12%; color: #4a82cc; opacity: 0.06; }
.collections-paisley-field .motif-b { --paisley-rotate: -34deg; width: 34vw; right: -14%; bottom: -28%; color: #c64e79; opacity: 0.055; }
.collections-paisley-field .motif-c { --paisley-rotate: 54deg; width: 22vw; top: 30%; right: 17%; color: #db8b24; opacity: 0.035; }
.match-paisley-field .motif-a { --paisley-rotate: -22deg; width: 32vw; top: -22%; right: -12%; color: #8eb8e7; opacity: 0.065; }
.lineup-paisley-field .motif-a { --paisley-rotate: -9deg; width: 27vw; top: -18%; left: -12%; color: #bc3f70; opacity: 0.035; }
.lineup-paisley-field .motif-b { --paisley-rotate: 142deg; width: 25vw; right: -13%; bottom: -24%; color: #d6a927; opacity: 0.03; }
.story-paisley-field .motif-a { --paisley-rotate: -16deg; width: 36vw; left: -13%; bottom: -22%; color: #6d997e; opacity: 0.075; }
.story-paisley-field .motif-b { --paisley-rotate: 31deg; width: 30vw; top: -22%; right: -10%; color: #7d483c; opacity: 0.055; }
.story-paisley-field .motif-c { --paisley-rotate: 76deg; width: 20vw; top: 40%; right: 24%; color: #bc3f70; opacity: 0.035; }
.journey-paisley-field { z-index: 1; }
.journey-paisley-field .motif-a { --paisley-rotate: -20deg; width: 54vw; left: -17%; bottom: -40%; color: #f3d477; opacity: 0.12; }
.journey-paisley-field .motif-b { --paisley-rotate: 146deg; width: 48vw; right: -16%; top: -35%; color: #87b5dd; opacity: 0.095; }
.journey-paisley-field .motif-c { --paisley-rotate: 72deg; width: 30vw; left: 47%; bottom: -24%; color: #c15b85; opacity: 0.07; }
.find-paisley-field .motif-a { --paisley-rotate: 162deg; width: 27vw; top: -24%; right: -12%; color: #d6a927; opacity: 0.035; }
.retailers-paisley-field .motif-a { --paisley-rotate: 25deg; width: 30vw; left: -11%; top: -20%; color: #3268c9; opacity: 0.05; }
.retailers-paisley-field .motif-b { --paisley-rotate: -41deg; width: 27vw; right: -10%; bottom: -22%; color: #bc3f70; opacity: 0.045; }
.footer-paisley-field .motif-a { --paisley-rotate: -12deg; width: 34vw; left: -10%; top: -28%; color: #d6a927; opacity: 0.11; }
.footer-paisley-field .motif-b { --paisley-rotate: 139deg; width: 31vw; left: 40%; bottom: -46%; color: #5791d5; opacity: 0.08; }
.footer-paisley-field .motif-c { --paisley-rotate: 26deg; width: 28vw; right: -10%; top: -16%; color: #c04e78; opacity: 0.075; }

/* Four collections in one desktop row. */
.collection-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(0.75rem, 1.2vw, 1.1rem); }
.collection-body { min-height: 244px; padding: 1.05rem 1rem 1.2rem; }
.collection-body h3 { font-size: clamp(1.55rem, 2vw, 1.95rem); }
.collection-body p { font-size: 0.83rem; }

/* Boysenberry launch campaign: C's copy, B's package-first composition, product-specific color. */
.featured { --feature-accent: #d2a7df; color: #fff8e7; border-color: rgba(243, 212, 119, 0.16); background: radial-gradient(ellipse at 22% 48%, rgba(143, 62, 129, 0.36), transparent 44%), radial-gradient(ellipse at 86% 8%, rgba(100, 75, 173, 0.28), transparent 40%), linear-gradient(126deg, #1a0c1d 0%, #271029 45%, #111126 100%); }
.featured-paisley-field .motif-a { --paisley-rotate: 21deg; width: 46vw; top: -28%; left: -14%; color: #d8a7df; opacity: 0.1; }
.featured-paisley-field .motif-b { --paisley-rotate: -31deg; width: 35vw; right: -13%; bottom: -34%; color: #f3d477; opacity: 0.075; }
.featured-paisley-field .motif-c { --paisley-rotate: 68deg; width: 24vw; top: 16%; right: 18%; color: #7fa8e3; opacity: 0.055; }
.featured-shell { grid-template-columns: minmax(0, 1.08fr) minmax(390px, 0.92fr); }
.featured-visual { min-height: 650px; }
.featured-image-field { inset: 0; border-color: rgba(243, 212, 119, 0.25); border-radius: 4px; background: radial-gradient(circle at 50% 43%, rgba(255, 255, 255, 0.12), transparent 34%), linear-gradient(145deg, rgba(88, 43, 83, 0.76), rgba(34, 24, 65, 0.88)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04), 0 34px 80px rgba(0, 0, 0, 0.32); }
.featured-package { width: 98%; height: 98%; max-height: none; top: 1%; left: 1%; border-radius: 0; object-fit: contain; box-shadow: none; filter: drop-shadow(0 28px 30px rgba(0, 0, 0, 0.34)); }
.featured-edible { display: none; }
.featured-copy .eyebrow { color: var(--gold-light); }
.featured-family { color: #d9b4e3; }
.featured-copy h2 { color: #fff7dd; }
.featured-description { color: rgba(255, 255, 255, 0.8); }
.product-facts div { border-color: rgba(255, 255, 255, 0.2); }
.product-facts dt { color: rgba(255, 255, 255, 0.58); }
.product-facts dd { color: #fff8e6; }
.featured-flag { border-color: rgba(243, 212, 119, 0.65); background: rgba(214, 169, 39, 0.14); color: var(--gold-light); }
.featured-swap { color: rgba(255, 255, 255, 0.58); }

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .hero-product:hover .hero-package { filter: drop-shadow(0 40px 52px rgba(0, 0, 0, 0.64)); }
  .hero-product:hover .hero-edible { transform: translate3d(var(--hover-near-x), calc(var(--hover-near-y) - 4px), 0) rotate(8deg) scale(1.015); }
}

@media (max-width: 1024px) {
  .hero { min-height: auto; padding-top: calc(var(--header) + 2.5rem); }
  .hero-inner { grid-template-columns: 1fr; gap: 1.6rem; }
  .hero-copy { max-width: 720px; }
  .hero-copy h1 { font-size: clamp(3.2rem, 7.8vw, 5.4rem); }
  .hero-product { order: 0; min-height: min(64vw, 590px); }
  .hero-package { width: min(92%, 700px); left: 4%; }
  .hero-edible { width: min(27%, 190px); right: 5%; }
  .featured-visual { min-height: min(70vw, 620px); }
}

@media (max-width: 900px) {
  .collection-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .hero { padding-top: calc(var(--header) + 1.8rem); padding-bottom: 2.8rem; }
  .hero-wordmark { width: 150px; margin-bottom: 0.8rem; }
  .hero-copy h1 { margin-block: 0.8rem 1rem; font-size: clamp(2.75rem, 12vw, 4rem); }
  .hero-lede { font-size: 0.98rem; line-height: 1.55; }
  .hero-actions { align-items: stretch; flex-direction: column; gap: 0.8rem; margin-top: 1.45rem; }
  .hero .button-primary, .hero-journey-link { width: 100%; justify-content: center; }
  .hero-featured { margin-top: 1.5rem; }
  .hero-product { min-height: 355px; margin-top: -0.4rem; }
  .hero-package { width: 112%; height: 112%; top: -7%; left: -6%; }
  .hero-edible { width: 34%; right: -3%; bottom: 0; }
  .hero-product-glow { width: 92%; top: 0; left: 4%; }
  .hero-ground { left: -6%; right: -6%; }
  .collection-grid { width: calc(100% + 40px); grid-template-columns: none; grid-auto-columns: minmax(260px, 84vw); grid-auto-flow: column; gap: 0.85rem; overflow-x: auto; overscroll-behavior-inline: contain; margin-inline: -20px; padding: 0 20px 1rem; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .collection-grid::-webkit-scrollbar { display: none; }
  .collection-card { scroll-snap-align: start; }
  .featured { padding-top: 4.8rem; }
  .featured-visual { min-height: 390px; }
  .featured-package { width: 112%; height: 112%; top: -6%; left: -6%; }
  .paisley-field .paisley-fragment:nth-child(n + 2) { display: none; }
  .paisley-fragment { opacity: 0.055; transform: rotate(var(--paisley-rotate)) scale(var(--paisley-scale)); will-change: auto; }
}

@media (max-height: 520px) and (orientation: landscape) and (min-width: 640px) {
  .hero { padding-top: calc(var(--header) + 1rem); padding-bottom: 2rem; }
  .hero-inner { grid-template-columns: minmax(0, 1fr) minmax(320px, 0.9fr); gap: 1.2rem; }
  .hero-copy h1 { margin-block: 0.35rem 0.6rem; font-size: clamp(2rem, 4.2vw, 2.8rem); }
  .hero-wordmark { width: 118px; margin-bottom: 0.25rem; }
  .hero-copy .eyebrow, .hero-featured { font-size: 0.61rem; }
  .hero-lede { font-size: 0.85rem; line-height: 1.4; }
  .hero-actions { gap: 1rem; margin-top: 0.8rem; }
  .hero .button-primary { min-height: 48px; padding-block: 0.7rem; }
  .hero-product { min-height: 300px; }
}

@media (prefers-reduced-motion: reduce) {
  .paisley-fragment { transform: rotate(var(--paisley-rotate)) scale(var(--paisley-scale)); will-change: auto; }
}

/* Canonical navigation: the approved alpha-blended nine-section rail on desktop and a 48px paisley
   activator in the fixed header plane on tablet/phone. It replaces C's desktop-only tick rail. */
.section-navigator { position: fixed; z-index: 94; top: 50%; left: max(9px, env(safe-area-inset-left)); color: #fff; transform: translateY(-50%); }
.section-navigator-toggle { display: none; }
.section-navigator-list { position: relative; display: flex; width: 46px; flex-direction: column; gap: 2px; overflow: visible; border: 1px solid rgba(243, 212, 119, 0.28); border-radius: 18px; background: rgba(12, 15, 11, 0.84); box-shadow: 0 18px 44px rgba(0, 0, 0, 0.24); padding: 5px; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.section-navigator-list::before { content: ""; position: absolute; inset: 3px; border-radius: 14px; background: var(--gold-light); opacity: 0.08; pointer-events: none; -webkit-mask: var(--paisley-asset) center / 160% auto no-repeat; mask: var(--paisley-asset) center / 160% auto no-repeat; }
.section-navigator-list a { position: relative; z-index: 1; display: grid; width: 34px; min-height: 34px; place-items: center; border: 1px solid transparent; border-radius: 12px; color: rgba(255, 255, 255, 0.66); text-decoration: none; transition: color 160ms ease, border-color 160ms ease, background 160ms ease, transform 160ms var(--ease); }
.section-navigator-list a:hover { color: #fff; background: rgba(255, 255, 255, 0.08); transform: translateX(2px); }
.section-navigator-list a.active { border-color: rgba(243, 212, 119, 0.62); background: var(--gold); color: var(--ink); }
.section-nav-index { font-size: 0.59rem; font-weight: 850; letter-spacing: 0.05em; }
.section-nav-label { position: absolute; left: 44px; top: 50%; width: max-content; max-width: 180px; border: 1px solid rgba(243, 212, 119, 0.28); border-radius: 9px; background: rgba(12, 15, 11, 0.94); color: #fff; padding: 0.42rem 0.6rem; font-size: 0.68rem; font-weight: 760; letter-spacing: 0.03em; opacity: 0; pointer-events: none; transform: translate(-5px, -50%); transition: opacity 150ms ease, transform 180ms var(--ease); white-space: nowrap; }
.section-navigator-list a:hover .section-nav-label, .section-navigator-list a:focus-visible .section-nav-label { opacity: 1; transform: translate(0, -50%); }
body.dialog-open .section-navigator { visibility: hidden; pointer-events: none; }

@media (max-width: 1366px) {
  .section-navigator { z-index: 101; top: calc((var(--header) - 48px) / 2); left: max(172px, calc(env(safe-area-inset-left) + 172px)); transform: none; }
  .section-navigator-toggle { display: grid; width: 48px; height: 48px; place-items: center; overflow: hidden; border: 1px solid rgba(243, 212, 119, 0.38); border-radius: 15px; background: rgba(12, 15, 11, 0.92); color: #fff; box-shadow: 0 12px 28px rgba(0, 0, 0, 0.25); cursor: pointer; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
  .section-navigator-toggle-mark { width: 27px; aspect-ratio: 1; background: var(--gold-light); transform: rotate(24deg); -webkit-mask: var(--paisley-asset) center / contain no-repeat; mask: var(--paisley-asset) center / contain no-repeat; }
  .section-navigator-toggle-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .section-navigator-list { position: absolute; top: 54px; left: 0; display: none; width: min(236px, calc(100vw - 24px)); max-height: calc(100dvh - var(--header) - 76px); gap: 2px; overflow-y: auto; border-radius: 18px; padding: 6px; overscroll-behavior: contain; }
  .section-navigator.open .section-navigator-list { display: flex; }
  .section-navigator-list a { width: 100%; min-height: 44px; grid-template-columns: 34px minmax(0, 1fr); justify-items: start; border-radius: 12px; padding: 0 0.6rem 0 0.35rem; }
  .section-nav-index { justify-self: center; }
  .section-nav-label { position: static; width: auto; max-width: none; border: 0; background: none; color: inherit; padding: 0; font-size: 0.75rem; opacity: 1; transform: none; white-space: normal; }
  .section-navigator-list a:hover .section-nav-label, .section-navigator-list a:focus-visible .section-nav-label, .section-navigator-list a.active .section-nav-label { opacity: 1; transform: none; }
}

@media (max-width: 620px) {
  .section-navigator { left: max(142px, calc(env(safe-area-inset-left) + 142px)); }
}

@media (prefers-reduced-motion: reduce) {
  .section-navigator-list a, .section-nav-label { transition: none; }
}

/* ═══ CANONICAL LAPTOP-FIT CORRECTION (2026-09-03) ════════════════════════════════════════════════
   One header wordmark only. Section links land flush below that header, and the campaign/Journey
   compositions scale from the available viewport height instead of assuming a presentation canvas. */
@media (min-width: 1025px) {
  .hero {
    min-height: 100svh;
    padding-top: calc(var(--header) + clamp(1rem, 2.3vh, 1.65rem));
    padding-bottom: clamp(1rem, 2.3vh, 1.65rem);
  }
  .hero-inner { gap: clamp(1.5rem, 2.4vw, 3.2rem); }
  .hero-copy h1 {
    margin-block: clamp(0.55rem, 1.2vh, 0.85rem) clamp(0.7rem, 1.5vh, 1rem);
    font-size: clamp(3.55rem, min(4.4vw, 8vh), 5rem);
  }
  .hero-lede { font-size: clamp(0.96rem, 1.08vw, 1.08rem); line-height: 1.5; }
  .hero-actions { gap: clamp(0.8rem, 1.5vw, 1.5rem); margin-top: clamp(0.85rem, 2vh, 1.25rem); }
  .hero .button-primary { min-height: 54px; padding-block: 0.82rem; }
  .hero-journey-link { min-height: 44px; }
  .hero-find { margin-top: 0.35rem; }
  .hero-featured { margin-top: clamp(0.7rem, 1.8vh, 1.2rem); }
  .hero-product { min-height: min(48vw, calc(100svh - var(--header) - 3.2rem), 650px); }
  .hero-product-glow { width: 70%; top: 8%; left: 15%; }
  .hero-package { width: 96%; height: 96%; top: 1%; left: 1%; }
  .hero-edible { width: 28%; right: 0; bottom: 2%; }

  .journey {
    min-height: calc(100svh - var(--header));
    padding-block: clamp(1.5rem, 3.2vh, 2.75rem);
  }
  .trailhead-sign { width: min(650px, 60%); padding: 52px 32px 36px; }
  .trailhead-roof { height: 80px; }
  .trailhead-post { top: 52px; bottom: -32px; width: 42px; }
  .trailhead-board { border-width: 6px; padding: clamp(0.9rem, 1.8vw, 1.45rem); }
  .trailhead-name { font-size: clamp(0.92rem, 1.4vw, 1.2rem); }
  .trailhead-notice { grid-template-columns: minmax(0, 1fr) 132px; gap: clamp(0.8rem, 1.6vw, 1.25rem); margin-top: 0.7rem; padding: clamp(1rem, 1.8vw, 1.45rem); }
  .trailhead-copy h2 { margin-block: 0.45rem 0.65rem; font-size: clamp(2.35rem, min(3.6vw, 6.4vh), 3.55rem); line-height: 0.96; }
  .trailhead-copy p:not(.eyebrow) { font-size: 0.9rem; line-height: 1.45; }
  .trailhead-copy .button { min-height: 50px; margin-top: 0.9rem; padding: 0.78rem 1.2rem; }
  .trailhead-route { min-height: 166px; }
}

/* ═══ REV94 — CONTROLLED INTENSITY / LOUD LUXURY (visual-only, 2026-09-04) ════════════════════════
   Authorized campaign imagery and one 8px commercial control grammar unify the existing architecture.
   Product data, finder, nutrition, Journey media, and navigation behavior remain unchanged. */
:root { --radius: 8px; --control-radius: 8px; }

.button,
.feature-button,
.category-tabs button,
.format-tabs button,
.choice-row button,
.locator-directions,
.field input,
.field select,
.product-picker-trigger,
.product-picker-option,
.locator-store,
.locator-fallback,
.retailers-card { border-radius: var(--control-radius); }
.button { min-height: 52px; padding-inline: 1.45rem; letter-spacing: 0.035em; }
.button-primary { min-height: 58px; }
.button-secondary { border: 1px solid rgba(243, 212, 119, 0.72); background: rgba(4, 5, 15, 0.34); color: #fff8e6; box-shadow: none; }
.button-secondary:hover { border-color: var(--gold-light); background: rgba(243, 212, 119, 0.12); color: #fff; }
.main-nav a { border-radius: var(--control-radius); }
.main-nav .header-find { border-radius: var(--control-radius); }
.section-navigator-list,
.section-navigator-list::before,
.section-navigator-list a,
.section-nav-label,
.section-navigator-toggle { border-radius: var(--control-radius); }

/* Hero — one complete campaign scene, not product art sitting on a generated field. */
.hero {
  background-color: #050514;
  background-image:
    linear-gradient(90deg, rgba(2, 3, 12, 0.74) 0%, rgba(2, 3, 12, 0.58) 34%, rgba(4, 4, 18, 0.2) 61%, rgba(4, 4, 18, 0.08) 100%),
    linear-gradient(180deg, rgba(2, 3, 12, 0.08) 48%, rgba(2, 3, 12, 0.48) 100%),
    url('/homer/assets/backgrounds/REV94-hero-v2.webp');
  background-position: center;
  background-size: cover;
}
.hero::before { height: 30%; background: linear-gradient(180deg, transparent, rgba(2, 3, 12, 0.6)); }
.hero::after { left: 42%; right: 2%; bottom: 12%; background: linear-gradient(90deg, transparent, rgba(243, 212, 119, 0.24), rgba(179, 145, 225, 0.22), transparent); box-shadow: 0 30px 62px 18px rgba(2, 3, 12, 0.6); }
.hero-paisley-field .motif-a { top: -34%; right: -19%; color: #d5b8f0; opacity: 0.055; }
.hero-paisley-field .motif-b { display: none; }
.hero-paisley-field .motif-c { top: 8%; left: 48%; color: var(--gold-light); opacity: 0.025; }
.hero-copy h1 { color: #fff4d3; }
.hero-actions { display: grid; width: min(100%, 500px); grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem; }
.hero-actions .button-primary { width: max-content; min-width: 230px; grid-column: 1 / -1; justify-self: start; border-radius: var(--control-radius); }
.hero-secondary { min-height: 50px; padding-inline: 1rem; font-size: 0.78rem; text-transform: uppercase; }
.hero-product { isolation: isolate; }
.hero-product::before { left: 8%; right: -2%; bottom: 6%; height: 13%; background: radial-gradient(ellipse, rgba(8, 5, 24, 0.52), rgba(6, 5, 19, 0.22) 52%, transparent 72%); filter: blur(9px); }
.hero-package { width: 94%; height: 94%; top: 1%; left: 3%; filter: drop-shadow(0 28px 34px rgba(0, 0, 0, 0.5)); }
.hero-edible { width: 28%; right: -1%; bottom: 4%; filter: drop-shadow(0 20px 22px rgba(0, 0, 0, 0.48)); }

/* Collections — image-led, concise, campaign-consistent. */
.collections {
  background-color: #fbf1df;
  background-image: linear-gradient(90deg, rgba(255, 250, 240, 0.9), rgba(255, 250, 240, 0.7)), url('/homer/assets/backgrounds/REV94-collections-v1.webp');
  background-position: center;
  background-size: cover;
}
.collections-paisley-field { opacity: 0.42; }
.collection-grid { gap: clamp(0.8rem, 1.35vw, 1.25rem); }
.collection-card { border-color: rgba(20, 21, 16, 0.17); border-radius: var(--radius); background: rgba(255, 253, 248, 0.95); box-shadow: 0 16px 32px rgba(46, 32, 26, 0.09); }
.collection-card:hover { transform: translateY(-5px); box-shadow: 0 24px 44px rgba(46, 32, 26, 0.15); }
.collection-photo { aspect-ratio: 4 / 3; background: #eadfce; }
.collection-photo::after { height: 36%; background: linear-gradient(to bottom, transparent, rgba(15, 12, 13, 0.2)); }
.collection-package { object-position: center; }
.collection-body { min-height: 205px; padding: 1.15rem 1.15rem 1.25rem; }
.collection-body h3 { margin-top: 0.35rem; font-size: clamp(1.7rem, 2vw, 2.05rem); }
.collection-body p { margin-top: 0.75rem; color: #4c4a43; line-height: 1.48; }
.collection-action { padding-top: 1rem; color: var(--card-accent); }

/* Featured — Boysenberry campaign scene over the strongest supplied purple/gold environment. */
.featured {
  --feature-accent: #d4a6dd;
  min-height: min(880px, calc(100svh - var(--header)));
  background-color: #1c0b26;
  background-image: linear-gradient(90deg, rgba(23, 8, 31, 0.42), rgba(23, 8, 31, 0.76)), url('/homer/assets/backgrounds/REV94-featured-v1.webp');
  background-position: center;
  background-size: cover;
}
.featured-paisley-field { opacity: 0.48; }
.featured-shell { grid-template-columns: minmax(0, 1.12fr) minmax(390px, 0.88fr); gap: clamp(2.5rem, 5vw, 5rem); }
.featured-visual { min-height: clamp(510px, 48vw, 680px); }
.featured-image-field { inset: 0; border: 1px solid rgba(243, 212, 119, 0.28); border-radius: var(--radius); background: #26102f; box-shadow: 0 36px 90px rgba(8, 3, 13, 0.45); }
.featured-package { width: 100%; height: 100%; max-height: none; inset: 0; object-fit: cover; filter: none; }
.featured-flag,
.featured-swap { display: none !important; }
.featured-family { color: #ecc7f0; }
.featured-copy h2 { font-size: clamp(3.6rem, 5.6vw, 6.1rem); }
.featured-description { max-width: 530px; color: rgba(255, 249, 235, 0.84); font-size: 1.08rem; }
.featured-actions .text-button { color: #fff; }

/* Matcher — richer campaign surface; choices remain clear and deterministic. */
.match {
  color: #fff8e8;
  background-color: #171024;
  background-image: radial-gradient(circle at 80% 18%, rgba(126, 69, 142, 0.26), transparent 32%), linear-gradient(128deg, #100b1a, #25102d 52%, #111624);
}
.match-intro .eyebrow { color: var(--gold-light); }
.match-intro > p:last-child { color: rgba(255, 255, 255, 0.7); }
.match-panel { border-color: rgba(243, 212, 119, 0.18); border-radius: var(--radius); background: rgba(7, 7, 17, 0.68); box-shadow: 0 28px 70px rgba(0, 0, 0, 0.36); backdrop-filter: blur(18px); }
.choice-group + .choice-group { border-color: rgba(255, 255, 255, 0.14); }
.choice-row button { border-color: rgba(255, 255, 255, 0.22); background: rgba(255, 255, 255, 0.06); color: #fff; }
.choice-row button:hover { border-color: var(--gold-light); background: rgba(243, 212, 119, 0.08); }
.choice-row button[aria-pressed="true"] { border-color: var(--gold); background: var(--gold); color: #15120c; }
.choice-group legend span { border-radius: 4px; background: var(--gold); color: #15120c; }
.match-result { border: 1px solid rgba(255, 255, 255, 0.14); border-radius: var(--radius); background: rgba(3, 4, 10, 0.82); }
.match-product { border-radius: var(--radius); }

/* Lineup — clean editorial cards; no glow, halo, or family-first copy. */
.lineup {
  background-color: #f8efe2;
  background-image: linear-gradient(90deg, rgba(255, 251, 244, 0.9), rgba(255, 251, 244, 0.8)), url('/homer/assets/backgrounds/REV94-lineup-v1.webp');
  background-position: center;
  background-size: cover;
}
.lineup-paisley-field { opacity: 0.34; }
.category-tabs button,
.format-tabs button { border-radius: var(--control-radius); background: rgba(255, 253, 248, 0.72); }
.category-tabs button[aria-pressed="true"],
.format-tabs button[aria-pressed="true"] { border-color: #17130f; background: #17130f; color: #fff; }
.product-card,
.product-card.max { min-height: 650px; overflow: hidden; border: 1px solid rgba(20, 21, 16, 0.16); border-radius: var(--radius); background: rgba(255, 253, 248, 0.97); box-shadow: 0 16px 34px rgba(45, 32, 25, 0.09); }
.product-card.max { border-color: rgba(20, 21, 16, 0.18); box-shadow: 0 16px 34px rgba(45, 32, 25, 0.09); }
.card-aura { display: none !important; }
.product-image { height: 282px; border-radius: 0; background: linear-gradient(150deg, color-mix(in srgb, var(--product-accent) 9%, #fffaf2), #f0e7d8); }
.product-image img { width: 90%; height: 94%; filter: drop-shadow(0 16px 18px rgba(22, 18, 15, 0.2)); }
.product-card.max > .product-image { border-radius: 0; }
.product-card-body { padding: 1.2rem 1.15rem 1.15rem; }
.product-card h3 { margin-top: 0; font-size: 1.62rem; line-height: 1.02; }
.product-description { min-height: 4.4em; margin-top: 0.7rem; color: #505049; font-size: 0.8rem; line-height: 1.47; }
.product-features { display: grid; gap: 0.38rem; width: 100%; margin-top: 0.85rem; padding-top: 0.8rem; border-top: 1px solid rgba(20, 21, 16, 0.11); }
.product-features div { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 0.5rem; }
.product-features dt { color: #858278; font-size: 0.59rem; font-weight: 850; letter-spacing: 0.08em; text-transform: uppercase; }
.product-features dd { color: #41413b; font-size: 0.68rem; font-weight: 680; line-height: 1.35; }
.product-total { display: flex; width: 100%; align-items: baseline; justify-content: space-between; gap: 0.8rem; margin-top: 0.75rem; }
.product-total span { color: #77746a; font-size: 0.61rem; font-weight: 850; letter-spacing: 0.08em; text-transform: uppercase; }
.product-total strong { color: var(--ink); font-family: var(--serif); font-size: 1.08rem; font-weight: 400; }
.product-total.is-unpublished strong { color: #7b786f; font-family: var(--sans); font-size: 0.68rem; font-weight: 700; }
.product-tags { display: flex; min-height: 28px; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.65rem; }
.product-tags span { display: inline-flex; min-height: 24px; align-items: center; border: 1px solid currentColor; border-radius: 4px; padding: 0.2rem 0.42rem; font-size: 0.57rem; font-weight: 900; letter-spacing: 0.08em; }
.product-tags .tag-thc { color: #743f96; background: #f3eafb; }
.product-tags .tag-cbd { color: #356847; background: #e9f5ec; }
.product-tags .tag-cbn { color: #315e96; background: #eaf1fb; }
.product-tags .tag-cbg { color: #9a6212; background: #fbf1d9; }
.product-tags .tag-max { color: #76570b; background: #f8e8a8; }
.product-card-actions { gap: 0.55rem; }
.feature-button { border-radius: var(--control-radius); }
.product-find { border-color: var(--gold); background: var(--gold); }
.rail-controls button,
.product-dialog-close,
.product-thumb-controls button { border-radius: 50%; }

/* Story — confectionery craft, not an unrelated product glamour image. */
.story { background: linear-gradient(100deg, #fff9ee, #f7ebdb); }
.story-scene { border-radius: var(--radius); box-shadow: 0 30px 64px rgba(57, 34, 22, 0.18); }
.story-scene img { aspect-ratio: 4 / 3; }
.story-scene::after { content: ""; position: absolute; inset: 56% 0 0; background: linear-gradient(180deg, transparent, rgba(21, 12, 8, 0.68)); pointer-events: none; }
.story-scene figcaption { z-index: 2; border: 0; border-left: 3px solid var(--gold); border-radius: 0; background: rgba(13, 9, 7, 0.74); color: #fff7e4; box-shadow: none; }
.story-scene figcaption span { color: var(--gold-light); }

/* Journey, finder, and retailer close join the material system without changing behavior. */
.trailhead-board,
.trailhead-notice,
.locator-card { border-radius: var(--radius); }
.trailhead-copy .button { border-radius: var(--control-radius); }
.find { background: radial-gradient(circle at 88% 0%, rgba(130, 83, 155, 0.16), transparent 30%), linear-gradient(128deg, #111820, #17121d 62%, #0d1514); }
.find-head .eyebrow { color: var(--gold-light); }
.find-head h2 { color: #fff6df; }
.find-head > p:last-child { color: rgba(255, 255, 255, 0.72); }
.locator-card { border-color: rgba(243, 212, 119, 0.2); box-shadow: 0 34px 78px rgba(0, 0, 0, 0.35); }
.retailers { background: linear-gradient(122deg, #efe0ca 0%, #f9f0e3 58%, #e8d3bd 100%); }
.retailers-card { border: 1px solid rgba(20, 21, 16, 0.16); background: #1b1520; color: #fff7e6; box-shadow: 0 28px 62px rgba(42, 24, 24, 0.2); }
.retailers-card p { color: rgba(255, 255, 255, 0.76); }
.retailers-card .retailers-note { color: rgba(255, 255, 255, 0.58); }

/* Footer — intentional brand close and readable exact legal copy. */
.footer {
  background-color: #080910;
  background-image: linear-gradient(90deg, rgba(5, 6, 12, 0.92), rgba(8, 7, 14, 0.82)), url('/homer/assets/backgrounds/REV94-footer-v2.webp');
  background-position: center;
  background-size: cover;
}
.footer-top { padding-bottom: 3rem; }
.footer nav a { min-height: 34px; }
.legal { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); border-top: 1px solid rgba(243, 212, 119, 0.38); background: rgba(3, 4, 9, 0.32); padding: 2.2rem 0; }
.legal-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; color: var(--gold-light); }
.legal-heading span { font-size: 0.72rem; font-weight: 850; letter-spacing: 0.15em; text-transform: uppercase; }
.legal-heading strong { display: grid; width: 48px; height: 48px; place-items: center; border: 1px solid rgba(243, 212, 119, 0.6); border-radius: 50%; font-size: 0.78rem; }
.legal-copy { display: grid; grid-template-columns: 0.86fr 1.35fr 0.9fr; gap: clamp(1.3rem, 2.4vw, 2.5rem); }
.legal-copy p { max-width: 52ch; color: rgba(255, 255, 255, 0.7); font-size: 0.82rem; line-height: 1.66; }
.footer-bottom { border-color: rgba(255, 255, 255, 0.14); }

@media (max-width: 1024px) {
  .hero { background-position: 54% center; }
  .hero-actions { width: min(100%, 560px); }
  .featured { min-height: auto; }
  .featured-shell { grid-template-columns: 1fr; gap: 2.25rem; }
  .featured-visual { min-height: min(76vw, 650px); }
  .legal { grid-template-columns: 1fr; gap: 1.3rem; }
  .legal-heading { justify-content: flex-start; align-items: center; }
  .legal-copy { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .legal-copy p:last-child { grid-column: 1 / -1; }
}

@media (max-width: 620px) {
  .hero { background-position: 59% center; }
  .hero::before { height: 46%; }
  .hero-actions { grid-template-columns: 1fr; gap: 0.6rem; }
  .hero-actions .button-primary { width: 100%; min-width: 0; grid-column: auto; justify-self: stretch; }
  .hero-secondary { width: 100%; }
  .hero-product { min-height: 340px; }
  .hero-package { width: 108%; height: 108%; top: -5%; left: -4%; }
  .hero-edible { width: 32%; right: 1%; }
  .collection-body { min-height: 190px; }
  .featured { padding-top: 4.5rem; }
  .featured-visual { min-height: min(94vw, 480px); }
  .featured-copy h2 { max-width: 100%; overflow-wrap: break-word; font-size: clamp(2.8rem, 12vw, 3.65rem); }
  .product-card, .product-card.max { min-height: 640px; }
  .legal-copy { grid-template-columns: 1fr; }
  .legal-copy p:last-child { grid-column: auto; }
}

@media (max-height: 520px) and (orientation: landscape) and (min-width: 640px) {
  .hero-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.45rem; }
  .hero-actions .button-primary { min-width: 190px; grid-column: 1 / -1; }
  .hero-secondary { min-height: 44px; font-size: 0.68rem; }
  .hero-product { min-height: 260px; }
}

@media (prefers-reduced-motion: reduce) {
  .collection-card,
  .collection-package,
  .product-card,
  .product-image img,
  .story-scene img { transition: none; }
}


/* ── The lineup fits one laptop screen (operator, 2026-09-04) ────────────────────────────────────
   "#lineup should scroll to the top lining up with the Swifts header logo, right under that The Lineup
   text, the whole point is making that page fit on my laptop screen."

   Measured live at 1440x900 before this: the section stood 1300px against 830px of usable viewport
   (900 minus the 70px header). 130px of padding sat above the heading, which is why the jump landed
   with "The Lineup" far below the header rather than under it.

   Everything above the rail is fixed overhead, so the image slot takes whatever height is left:
     100svh - 70px header - 573px of section padding, heading, filters, rail padding and card body.
   The clamp keeps it sane on very short and very tall screens. */
@media (min-width: 861px) {
  /* The rail takes exactly the height left over, so the section always ends at the fold; the image row
     is the only flexible track, so the packages get every pixel the text does not need. No magic
     constant. */
  /* The section IS the screen below the header, and the rail is the only part that flexes — so the fit is
     structural, not arithmetic. Deriving the rail's height from measured constants left it 13px over,
     because the section's own padding is vh-based and moves with the viewport. */
  .lineup { display: flex; flex-direction: column; height: calc(100svh - var(--header)); padding-block: clamp(1.05rem, 2.2vh, 2rem) clamp(1.2rem, 2.6vh, 2.2rem); }
  .lineup > .shell { display: flex; flex: 1; min-height: 0; flex-direction: column; }
  .lineup .section-heading.compact h2 { margin-top: 0.3rem; font-size: clamp(1.75rem, 2.5vw, 2.45rem); line-height: 1.05; }
  .lineup .category-tabs { margin: 0.95rem 0 0.75rem; }
  .lineup .lineup-rail { flex: 1; min-height: 0; height: auto; padding: 14px 22px 18px; }
  .lineup .product-card { min-height: 0; }
  .lineup .product-image { height: auto; min-height: 0; }
  .lineup .product-card-body { padding: 0.75rem 1rem 0.8rem; }
  .lineup .product-card h3 { font-size: 1.34rem; line-height: 1.06; }
  .lineup .product-description { margin-top: 0.45rem; }
  .lineup .product-features { gap: 0.3rem; margin-top: 0.55rem; padding-top: 0.5rem; }
  .lineup .product-features dd { font-size: 0.66rem; }
  .lineup .product-total { margin-top: 0.45rem; }
  .lineup .product-tags { margin-top: 0.35rem; }
  .lineup .product-card-actions { padding-top: 0.55rem; }
}

/* ── Row-for-row alignment across the cards ──────────────────────────────────────────────────────
   "Flavor / Ripe peach with a chili kick should line up with the next card's Flavor / Porch-cold pink
   lemonade. Same with their description."

   The card body was a flex column, so each card distributed its own leftover space and no two cards
   agreed on where a row began. The rail is already a grid, so the cards share its row tracks through
   subgrid: every row is as tall as the tallest card's content and every card starts each row at the
   same height. The pseudo-elements that draw the MAX aura are absolutely positioned, so they stay out
   of the grid. Without subgrid support the cards keep their previous flex behaviour. */
@supports (grid-template-rows: subgrid) {
  /* The image row is 1fr so it soaks up whatever the text rows leave; the rest size to their tallest
     card. The count MUST match the number of children the card body emits, or the last rows collapse
     into each other — that is exactly how the tag chips once ended up on top of the buttons.

     image + name + award + sentence + features + format + dose + ratio + tags + actions = 10 */
  .lineup-rail { grid-template-rows: minmax(104px, 1fr) repeat(9, auto); column-gap: 1rem; row-gap: 0; }
  .lineup-rail .product-card { display: grid; grid-row: 1 / -1; grid-template-rows: subgrid; }
  .lineup-rail .product-card > .product-image { grid-row: 1; }
  .lineup-rail .product-card > .product-card-body { display: grid; grid-row: 2 / -1; grid-template-rows: subgrid; align-items: start; }
  .lineup-rail .product-card-actions { align-self: end; margin-top: 0; }
}

/* Short laptops (roughly 1366x768 and below) cannot hold three lines of description AND a full-size
   package. The description drops to two lines with the full text one click away in the product sheet,
   and the type tightens, so the packages keep a usable size instead of hitting their floor. */
@media (min-width: 861px) and (max-height: 830px) {
  .lineup .product-card h3 { font-size: 1.2rem; }
  .lineup .product-description { min-height: 0; -webkit-line-clamp: 2; }
  .lineup .product-features dd { font-size: 0.63rem; }
  .lineup .product-total { margin-top: 0.35rem; }
  .lineup .product-tags { margin-top: 0.28rem; }
}

/* ── The packages as large as the card allows (operator, 2026-09-04) ─────────────────────────────
   The image row already takes whatever the text rows leave, so every extra pixel has to come from the
   text itself and from the image's own inset. The fitted renders are portrait, so the painted size is
   limited by the row's HEIGHT — width is never the constraint here, which is why this is all vertical.

   Measured at 1440x900: 176px painted before, 236px after. */
@media (min-width: 861px) {
  /* the image filled 90% x 94% of its slot — the last 6% of height is 6% of package */
  .lineup .product-image img { width: 100%; height: 100%; }
  .lineup .lineup-rail { padding: 10px 22px 14px; }
  .lineup .product-card-body { padding: 0.6rem 0.9rem 0.65rem; }
  .lineup .product-card h3 { font-size: 1.28rem; }
  /* two lines here, the full text one click away in the product sheet */
  .lineup .product-description { min-height: 0; margin-top: 0.4rem; -webkit-line-clamp: 2; }
  .lineup .product-features { gap: 0.26rem; margin-top: 0.45rem; padding-top: 0.45rem; }
  .lineup .product-total { margin-top: 0.38rem; }
  .lineup .product-tags { margin-top: 0.3rem; }
  .lineup .product-card-actions { padding-top: 0.45rem; }
  .lineup .product-card-actions .feature-button { min-height: 40px; }
}
/* Below ~830px of viewport the cannabinoid chips lose their chrome but NOT their words.
   They used to be hidden outright to buy the packages 34 pixels. website 97 makes that untenable: the
   ratio badge now prints bare numbers (6:2:1:1) precisely because the cannabinoids beneath it name the
   order, so hiding them would leave a row of digits meaning nothing on exactly the laptop heights most
   people browse at. Stripping the borders and padding gets the same pixels back and renders them as the
   operator wrote them — CBD * THC * CBG * CBN. */
@media (min-width: 861px) and (max-height: 830px) {
  .lineup .product-tags { display: flex; min-height: 0; gap: 0.28rem; margin-top: 0.24rem; }
  .lineup .product-tags span {
    min-height: 0;
    border: 0;
    border-radius: 0;
    background: none;
    padding: 0;
    font-size: 0.56rem;
    letter-spacing: 0.06em;
  }
  .lineup .product-tags span + span::before { content: "·"; margin-right: 0.28rem; opacity: 0.45; }
}

/* The package image gets a definite box.
   width/height:100% could not resolve against a slot whose height is auto, so once the picture loaded
   the element grew to its intrinsic height — measured 248x318 for Huckleberry MAX and 248x483 for Dubai
   Truffles against a 216px slot — and overflow:hidden cut the package off. object-fit was innocent: it
   was fitting the picture inside an element box that was itself overflowing. Absolute inset:0 makes the
   box definite, so the whole package letterboxes inside the slot. */
.product-image { position: relative; }
.product-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }


/* ── Find Swifts starts under the header (operator, 2026-09-04) ──────────────────────────────────
   "Make sure Find Swifts Near You / See what's on the shelf also aligns with the header of the page,
   right now we have about two inches of blue background from header to this text. Moving it up will
   help show the results better."

   Measured at 1440 wide: the section carried 129.6px of top padding, so a jump to #find landed with the
   eyebrow 147px below the header — the operator's two inches. The heading now sits just under the
   header, and the form follows sooner, which lifts the store results and the map into view with it. */
@media (min-width: 861px) {
  /* One screen, not a stub. Compacting the padding alone left the section only 513px tall, so the
     Retailers block appeared in the same view AND the confection dropdown — which opens downward and can
     run 430px — was cut off at the section's edge, because sections clip their own overflow for the
     paisley motifs. A full screen gives the dropdown and the results room inside the section. */
  /* Centred with GRID, not flex. Flex made .shell a flex item and the `width: 100%` I gave it overrode
     its own `min(100% - 40px, 1240px)` cap, so the locator card went full-bleed on wide screens. A grid
     with align-content centres the row vertically and leaves the shell's width rule untouched. */
  .find { display: grid; align-content: center; min-height: calc(100svh - var(--header)); padding-block: clamp(1.05rem, 2.2vh, 2rem) clamp(1.6rem, 3.2vh, 2.8rem); }
  .find .find-head h2 { margin: 0.3rem 0 0.55rem; font-size: clamp(1.75rem, 2.5vw, 2.45rem); line-height: 1.05; }
  .find .find-head > p:last-child { font-size: 1rem; }
  .find .locator-card { margin-top: 1.15rem; }
}

/* ── Explore Washington starts under the header (operator, 2026-09-04) ──
   The same treatment as the lineup and the finder: each section carried 129.6px of top padding at 1440
   wide, so a jump landed with its heading roughly 150px down. Each needed a different lever.

   Collections and Our Story were compacted too and then reverted: the operator preferred their original
   spacing, and Our Story's two columns are meant to sit centred against the photograph rather than
   top-aligned. Both keep the standard section rhythm.

   Explore Washington is not an ordinary section: it centres its trailhead sign inside a 700-920px
   min-height, so padding alone could never move the sign up — the min-height simply re-centred it. The
   sign now starts at the top and the block is only as tall as the sign needs, with enough bottom room
   for the posts, which hang 52px below the board. */
@media (min-width: 861px) {
  /* Collections keeps its original spacing — the operator preferred it that way. */

  .journey { min-height: calc(100svh - var(--header)); align-items: flex-start; padding-block: clamp(1.05rem, 2.2vh, 2rem) clamp(2.6rem, 5vh, 4.4rem); }
  .journey .trailhead-sign { padding-top: 54px; padding-bottom: 46px; }
  .journey .trailhead-copy h2 { margin: 0.4rem 0 0.7rem; font-size: clamp(2rem, 3.6vw, 3.4rem); }
}

/* The confection list opens above the button when there is more room there — its height is set in
   app.js from the space actually available, so it never runs off the screen. */
.locator-picker-list.flip-up { top: auto; bottom: calc(100% + 8px); }

/* the results follow the shared line directly */
@media (min-width: 861px) { .locator-output { margin-top: 0.85rem; } }

/* ── The detail sheet rests without a scrollbar (operator, 2026-09-04) ───────────────────────────
   Measured at 1440x900: the copy column ran 33px past its box, so a vertical scrollbar sat on the sheet
   the moment it opened. The cause was mine — the Cannabinoids block made three disclosure rows where
   there had been two, adding about 45px to a column whose other heights are deliberately fixed so every
   product's sheet is identical.

   The column keeps those fixed heights; this reclaims ~52px from type and padding, which clears the 33
   and leaves headroom. Expanding a block still scrolls, which is what scrolling is for. */
@media (min-width: 861px) {
  /* smaller type, same two-line box — a long name still fits */
  .product-dialog-copy h2 { font-size: clamp(2.4rem, 3.6vw, 4rem); }
  /* Back to 91px: that is exactly what the label plus three clamped lines needs, and my 80 forced a
     scrollbar inside the note. Both fixed-height blocks now clip rather than scroll — their text is
     line-clamped, so the height is guaranteed to be enough and a scrollbar can never be correct. */
  .product-use-note { min-height: 91px; max-height: 91px; overflow: hidden; }
  .product-dialog-description { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
  .product-dialog-facts { margin-top: 0.55rem; }
  .product-detail { margin-top: 0.6rem; }
  .product-detail-block summary { min-height: 38px; }
}

/* ── Featured and Our Story sit higher, with the image centred (operator, 2026-09-04) ────────────
   Measured at 1440x900: both carried 129.6px of padding above and below. That pushed Featured's eyebrow
   243px below the header and ran its image from y=219 down to the fold at 899, so the picture read as
   bottom-heavy rather than centred in the screen.

   Both shells were already `align-items: center`, so the columns were centred against EACH OTHER all
   along — what was off was the section's own padding. Trimming it lifts the block and leaves the image
   centred in the viewport, which is what it looked like it was missing. */
@media (min-width: 861px) {
  .featured, .story { padding-block: clamp(2.4rem, 5vh, 3.6rem); }

  /* Featured sets `min-height: min(880px, 100svh - header)`, and block layout puts a shorter content
     block at the TOP of that box — measured at 1900x940 the image sat 66px under the header with 124px
     of empty section beneath it, which is the "too high" the operator saw. Grid with align-content
     centres the content inside the min-height and leaves .shell's own width rule alone. */
  .featured { display: grid; align-content: center; }

  /* Our Story was still cut on a shorter window: measured at 1900x860 the section stood 831 against 790
     of screen, so its stats row ran 16px past the fold. The copy column is 745 tall and its heading alone
     is 307 of that, at the global display size over three lines. Capping the heading inside this section
     and tightening the copy's rhythm buys back about 120px, and the same min-height plus centring makes
     it behave like the sections either side of it. */
  .story { display: grid; align-content: center; min-height: min(880px, calc(100svh - var(--header))); }
  .story .story-copy h2 { margin: 0.4rem 0 0.8rem; font-size: clamp(2.8rem, 4vw, 4.8rem); }
  .story .story-copy > p + p { margin-top: 0.7rem; }
  .story .story-actions { margin-top: 1.05rem; }
  .story .story-facts { margin-top: 1.15rem; padding-top: 0.85rem; }

  /* Collections gets the same lift and the same centring: it carried the full 129.6px of section padding
     and sat low on the screen. */
  .collections { display: grid; align-content: center; min-height: min(880px, calc(100svh - var(--header))); padding-block: clamp(2.4rem, 5vh, 3.6rem); }
}

/* ── The cursor light (operator, 2026-09-04) ─────────────────────────────────────────────────────
   A soft circle of light under the pointer. `screen` blending means it only ever ADDS brightness, so a
   dark section glows and a cream one barely changes — the reason it is legible on Home, Featured, Find
   Your Swifts, Explore Washington and Find Nearby without bleaching the pale sections between them.

   It sits above the sections but never takes a click, and it fades in only once the pointer has actually
   moved, so a page that loads under a still cursor does not start with a light sitting in a corner. */
.cursor-flood {
  --flood-x: 50vw;
  --flood-y: 50vh;
  --flood-size: 300px;
  --flood-alpha: 0.05;
  position: fixed;
  z-index: 6;
  inset: 0;
  opacity: 0;
  background: radial-gradient(var(--flood-size) circle at var(--flood-x) var(--flood-y),
    rgba(255, 246, 224, var(--flood-alpha)) 0%,
    rgba(255, 242, 214, calc(var(--flood-alpha) * 0.45)) 38%,
    transparent 72%);
  mix-blend-mode: screen;
  pointer-events: none;
  transition: opacity 260ms ease;
}
.cursor-flood.is-live { opacity: 1; }
/* the dark grounds — the ones the operator named — carry a wider, stronger light */
.cursor-flood.is-bright { --flood-size: 420px; --flood-alpha: 0.16; }

@media (prefers-reduced-motion: reduce) { .cursor-flood { display: none; } }



/* ── Light running along the paisley, every section (operator, 2026-09-04) ───────────────────────
   The paisley is a raster mask, not a vector path, so there is no contour to stroke — and none is
   needed. A masked element clips its whole SUBTREE, so a light drawn INSIDE a fragment can only appear
   where the paisley ink is. Bands sweeping through therefore travel along the swirls and teardrops
   themselves rather than across a rectangle: exactly on the artwork.

   The obstacle is opacity, not geometry. A motif rests between 0.025 and 0.12, and a parent's opacity
   caps everything beneath it, so a child light could never be more than a ghost. Every fragment now
   carries 0.55 and each motif's colour carries the difference in its own alpha (alpha = resting / 0.55),
   so the resting appearance is unchanged while the light has room to read.

   Dark grounds take a LIGHT band blended with `screen`. Cream grounds take a soft DARK band blended with
   `multiply`, because `screen` cannot brighten what is already near white — on those the sheen reads as
   a travelling shadow through the same linework. */
@media (min-width: 861px) and (prefers-reduced-motion: no-preference) {
  .paisley-fragment::after {
    content: "";
    position: absolute;
    inset: -25%;
    background: var(--trace-band);
    background-repeat: no-repeat;
    background-size: 260% 260%;
    mix-blend-mode: var(--trace-blend, screen);
    pointer-events: none;
    animation: paisleyTrace 13s linear infinite;
  }

  /* dark grounds — light through the pattern */
  .hero, .featured, .match, .journey, .find, .footer {
    --trace-blend: screen;
    --trace-band:
      linear-gradient(112deg, transparent 41%, rgba(255, 248, 226, 0.95) 50%, transparent 59%),
      linear-gradient(112deg, transparent 43%, rgba(150, 200, 255, 0.62) 52%, transparent 61%);
  }
  /* cream grounds — the same sweep, as shadow, since light cannot register on near-white */
  .collections, .lineup, .story, .retailers {
    --trace-blend: multiply;
    --trace-band:
      linear-gradient(112deg, transparent 41%, rgba(74, 58, 30, 0.55) 50%, transparent 59%),
      linear-gradient(112deg, transparent 43%, rgba(40, 52, 78, 0.38) 52%, transparent 61%);
  }


  /* resting ink preserved: alpha = the opacity each motif used to carry, divided by 0.55 */
  .hero-paisley-field .motif-a { color: rgba(213, 184, 240, 0.1000); opacity: 0.55; }
  .hero-paisley-field .motif-c { color: rgba(243, 212, 119, 0.0455); opacity: 0.55; }
  .featured-paisley-field .motif-a { color: rgba(216, 167, 223, 0.1818); opacity: 0.55; }
  .featured-paisley-field .motif-b { color: rgba(243, 212, 119, 0.1364); opacity: 0.55; }
  .featured-paisley-field .motif-c { color: rgba(127, 168, 227, 0.1000); opacity: 0.55; }
  .match-paisley-field .motif-a { color: rgba(142, 184, 231, 0.1182); opacity: 0.55; }
  .journey-paisley-field .motif-a { color: rgba(243, 212, 119, 0.2182); opacity: 0.55; }
  .journey-paisley-field .motif-b { color: rgba(135, 181, 221, 0.1727); opacity: 0.55; }
  .journey-paisley-field .motif-c { color: rgba(193, 91, 133, 0.1273); opacity: 0.55; }
  .find-paisley-field .motif-a { color: rgba(214, 169, 39, 0.0636); opacity: 0.55; }
  .footer-paisley-field .motif-a { color: rgba(214, 169, 39, 0.2000); opacity: 0.55; }
  .footer-paisley-field .motif-b { color: rgba(87, 145, 213, 0.1455); opacity: 0.55; }
  .footer-paisley-field .motif-c { color: rgba(192, 78, 120, 0.1364); opacity: 0.55; }
  .collections-paisley-field .motif-a { color: rgba(74, 130, 204, 0.1091); opacity: 0.55; }
  .collections-paisley-field .motif-b { color: rgba(198, 78, 121, 0.1000); opacity: 0.55; }
  .collections-paisley-field .motif-c { color: rgba(219, 139, 36, 0.0636); opacity: 0.55; }
  .lineup-paisley-field .motif-a { color: rgba(188, 63, 112, 0.0636); opacity: 0.55; }
  .lineup-paisley-field .motif-b { color: rgba(214, 169, 39, 0.0545); opacity: 0.55; }
  .story-paisley-field .motif-a { color: rgba(109, 153, 126, 0.1364); opacity: 0.55; }
  .story-paisley-field .motif-b { color: rgba(125, 72, 60, 0.1000); opacity: 0.55; }
  .story-paisley-field .motif-c { color: rgba(188, 63, 112, 0.0636); opacity: 0.55; }
  .retailers-paisley-field .motif-a { color: rgba(50, 104, 201, 0.0909); opacity: 0.55; }
  .retailers-paisley-field .motif-b { color: rgba(188, 63, 112, 0.0818); opacity: 0.55; }

  .paisley-fragment.motif-a::after { animation-duration: 13s; animation-delay: 0s; }
  .paisley-fragment.motif-b::after { animation-duration: 9.5s; animation-delay: -4s; }
  .paisley-fragment.motif-c::after { animation-duration: 16s; animation-delay: -7s; }
}

@keyframes paisleyTrace {
  from { background-position: -85% 0, 185% 0; }
  to   { background-position: 185% 0, -85% 0; }
}

/* ── The hero's primary action (operator, 2026-09-04) ────────────────────────────────────────────
   "Explore Confections" is the one thing a first-time visitor should do, so it is about 30% larger than
   the two beside it rather than merely a different colour: more type, more padding, more height, and a
   lift that the secondaries do not have. The mobile rule keeps the same order of importance instead of
   flattening all three to full width. */
.hero-actions .button-primary {
  min-height: 62px;
  padding-inline: clamp(1.9rem, 2.6vw, 2.7rem);
  font-size: 1.06rem;
  letter-spacing: 0.005em;
  box-shadow: 0 16px 34px rgba(214, 169, 39, 0.28);
}
.hero-actions .hero-secondary { min-height: 48px; font-size: 0.86rem; }

@media (max-width: 860px) {
  /* the hierarchy survives the stack: primary full width and tall, secondaries share a lighter row */
  .hero-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
  .hero-actions .button-primary { grid-column: 1 / -1; min-height: 58px; font-size: 1.02rem; }
  .hero-actions .hero-secondary { min-height: 46px; font-size: 0.82rem; padding-inline: 0.9rem; }
}

/* ── The two custom background sets (operator, 2026-09-04) ───────────────────────────────────────
   The operator supplied two full background sets, V1 and V2, nine images each — one per section, in the
   navigator's own order. V1 is a bright Washington scene, V2 a dark studio, and both carry the paisley
   as a large cropped tone-on-tone signature rather than as wallpaper.

   These do NOT replace the REV94 backgrounds. The page keeps its current dress by default, and each set
   is opt-in with `?bg=v1` or `?bg=v2`, so all three can be judged on the real page against real copy.
   Every rule pairs the image with a scrim tuned to that section's own text — the hero's is weighted to
   the left, where its type sits, because V1's scene is bright daylight. */
html[data-bg-set="v1"] .hero { background-image: linear-gradient(100deg, rgba(4, 5, 14, 0.9) 0%, rgba(5, 6, 18, 0.74) 38%, rgba(8, 8, 26, 0.42) 62%, rgba(10, 10, 30, 0.55) 100%), url('/homer/assets/backgrounds/v1/top.webp'); background-position: center; background-size: cover; }
html[data-bg-set="v1"] .collections { background-image: linear-gradient(92deg, rgba(255, 250, 240, 0.9), rgba(255, 250, 240, 0.72)), url('/homer/assets/backgrounds/v1/collections.webp'); background-position: center; background-size: cover; }
html[data-bg-set="v1"] .featured { background-image: linear-gradient(96deg, rgba(23, 8, 31, 0.82), rgba(23, 8, 31, 0.6)), url('/homer/assets/backgrounds/v1/featured.webp'); background-position: center; background-size: cover; }
html[data-bg-set="v1"] .match { background-image: linear-gradient(96deg, rgba(16, 11, 26, 0.86), rgba(23, 16, 45, 0.66)), url('/homer/assets/backgrounds/v1/match.webp'); background-position: center; background-size: cover; }
html[data-bg-set="v1"] .lineup { background-image: linear-gradient(92deg, rgba(255, 250, 240, 0.92), rgba(255, 250, 240, 0.78)), url('/homer/assets/backgrounds/v1/lineup.webp'); background-position: center; background-size: cover; }
html[data-bg-set="v1"] .story { background-image: linear-gradient(92deg, rgba(255, 249, 238, 0.9), rgba(247, 235, 219, 0.76)), url('/homer/assets/backgrounds/v1/story.webp'); background-position: center; background-size: cover; }
html[data-bg-set="v1"] .journey { background-image: linear-gradient(96deg, rgba(8, 12, 9, 0.78), rgba(8, 12, 9, 0.5)), url('/homer/assets/backgrounds/v1/journey.webp'); background-position: center; background-size: cover; }
html[data-bg-set="v1"] .find { background-image: linear-gradient(96deg, rgba(17, 24, 32, 0.88), rgba(13, 21, 20, 0.7)), url('/homer/assets/backgrounds/v1/find.webp'); background-position: center; background-size: cover; }
html[data-bg-set="v1"] .retailers { background-image: linear-gradient(92deg, rgba(239, 224, 202, 0.9), rgba(249, 240, 227, 0.76)), url('/homer/assets/backgrounds/v1/retailers.webp'); background-position: center; background-size: cover; }
html[data-bg-set="v2"] .hero { background-image: linear-gradient(100deg, rgba(4, 5, 14, 0.9) 0%, rgba(5, 6, 18, 0.74) 38%, rgba(8, 8, 26, 0.42) 62%, rgba(10, 10, 30, 0.55) 100%), url('/homer/assets/backgrounds/v2/top.webp'); background-position: center; background-size: cover; }
html[data-bg-set="v2"] .collections { background-image: linear-gradient(92deg, rgba(255, 250, 240, 0.9), rgba(255, 250, 240, 0.72)), url('/homer/assets/backgrounds/v2/collections.webp'); background-position: center; background-size: cover; }
html[data-bg-set="v2"] .featured { background-image: linear-gradient(96deg, rgba(23, 8, 31, 0.82), rgba(23, 8, 31, 0.6)), url('/homer/assets/backgrounds/v2/featured.webp'); background-position: center; background-size: cover; }
html[data-bg-set="v2"] .match { background-image: linear-gradient(96deg, rgba(16, 11, 26, 0.86), rgba(23, 16, 45, 0.66)), url('/homer/assets/backgrounds/v2/match.webp'); background-position: center; background-size: cover; }
html[data-bg-set="v2"] .lineup { background-image: linear-gradient(92deg, rgba(255, 250, 240, 0.92), rgba(255, 250, 240, 0.78)), url('/homer/assets/backgrounds/v2/lineup.webp'); background-position: center; background-size: cover; }
html[data-bg-set="v2"] .story { background-image: linear-gradient(92deg, rgba(255, 249, 238, 0.9), rgba(247, 235, 219, 0.76)), url('/homer/assets/backgrounds/v2/story.webp'); background-position: center; background-size: cover; }
html[data-bg-set="v2"] .journey { background-image: linear-gradient(96deg, rgba(8, 12, 9, 0.78), rgba(8, 12, 9, 0.5)), url('/homer/assets/backgrounds/v2/journey.webp'); background-position: center; background-size: cover; }
html[data-bg-set="v2"] .find { background-image: linear-gradient(96deg, rgba(17, 24, 32, 0.88), rgba(13, 21, 20, 0.7)), url('/homer/assets/backgrounds/v2/find.webp'); background-position: center; background-size: cover; }
html[data-bg-set="v2"] .retailers { background-image: linear-gradient(92deg, rgba(239, 224, 202, 0.9), rgba(249, 240, 227, 0.76)), url('/homer/assets/backgrounds/v2/retailers.webp'); background-position: center; background-size: cover; }

/* ── The lineup card (operator, 2026-09-04) ──────────────────────────────────────────────────────
   Every card in the lineup card follows one hierarchy: name, one sentence, up to three features, the
   cannabinoid amount, the ratio, then the tags in the same order as the ratio. The Flavor/Format list is
   gone — flavour lives in the sentence now — and so is the glow, which the brief asked to drop in favour
   of a more editorial presentation. */
.product-feature-list { display: flex; flex-wrap: wrap; gap: 0.3rem 0.4rem; margin-top: 0.6rem; padding: 0; list-style: none; }
.product-feature-list li { border: 1px solid var(--line); border-radius: 6px; padding: 0.2rem 0.45rem; color: #5d5f55; font-size: 0.66rem; font-weight: 780; letter-spacing: 0.02em; }
.product-ratio { margin-top: 0.4rem; color: var(--gold-dark); font-size: 0.72rem; font-weight: 820; letter-spacing: 0.04em; }

/* no halo, no travelling rim: a premium card, not a lit one */
.product-card.max { box-shadow: none; }
.product-card.max::before, .product-card.max::after { content: none; }

/* An empty feature list or ratio still owns its row, so the cards stay in step across the rail. */
.product-feature-list:empty { margin-top: 0; }
.product-ratio:empty { margin-top: 0; }

/* ── The card sentence, and one button size (operator, 2026-09-04) ───────────────────────────────
   Measured on the live page at 1440: all 39 descriptions were clipped, by 19 to 57px. The sentence IS
   the card now — it carries the flavour that the Flavor/Format list used to — so a three-line clamp cuts
   the middle out of it. The rail aligns cards with a subgrid, which means the row can simply size itself
   to the longest sentence and every card still lines up; the clamp and the min-height are what stop it.

   Buttons already share one 8px radius. They did not share a height: 43, 48, 50, 52 and 62 all appeared.
   The lineup's own View/Find pair keeps 44 for touch, the hero's primary keeps its deliberate weight, and
   everything else settles on 52. */
.lineup .product-description { display: block; min-height: 0; overflow: visible; -webkit-line-clamp: none; }
.lineup .product-card-body h3 { min-height: 0; }

.button { min-height: 52px; }
.feature-button { min-height: 44px; }
.hero-actions .button-primary { min-height: 62px; }
.hero-actions .hero-secondary { min-height: 52px; }

/* The last two height outliers, found by measuring rather than reading: the lineup's View/Find pair sat
   at 43 because a short-viewport rule dropped its floor to 40 and padding decided the rest, and the
   trailhead's "Begin the Journey" carried its own 50. Both now match the rest — 44 where a control lives
   inside a card and needs a touch target, 52 for a section's own call to action. */
.lineup .product-card-actions .feature-button { min-height: 44px; }
.trailhead-copy .button, .journey .button { min-height: 52px; }

/* ── Find Your Swifts (operator, 2026-09-04) ─────────────────────────────────────────────────────
   One answer, stated large, with the product's name doing the work and two full-size actions under it —
   the section should feel like a tool that answers, not another block of content. The fallback note is
   visible when the pair had no exact answer, so a near-miss never passes as a direct hit. */
.match-result.is-answered { margin-top: 1.4rem; }
.match-answer { display: grid; grid-template-columns: minmax(0, 0.42fr) minmax(0, 0.58fr); gap: clamp(1.2rem, 3vw, 2.6rem); align-items: center; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 18px; background: rgba(255, 255, 255, 0.05); padding: clamp(1rem, 2.4vw, 1.8rem); }
.match-answer-image { width: 100%; max-height: 300px; object-fit: contain; filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.34)); }
.match-answer-kicker { color: var(--gold-light); font: var(--label, 850 0.68rem/1.3 var(--sans)); letter-spacing: 0.12em; text-transform: uppercase; }
.match-answer-name { margin: 0.35rem 0 0.6rem; font-family: var(--serif); font-size: clamp(2rem, 3.4vw, 3.1rem); font-weight: 400; line-height: 1.04; }
.match-answer-line { max-width: 46ch; color: rgba(255, 255, 255, 0.82); font-size: 1.02rem; }
.match-answer-note { margin-top: 0.6rem; color: var(--gold-light); font-size: 0.8rem; }
.match-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.7rem; margin-top: 1.2rem; }
.match-result.is-empty .match-actions { margin-top: 0.9rem; }
.match-prompt { color: rgba(255, 255, 255, 0.72); }

@media (max-width: 860px) {
  /* the answer stacks, and the two actions stay full width so the next step is never ambiguous */
  .match-answer { grid-template-columns: 1fr; text-align: left; }
  .match-answer-image { max-height: 210px; }
  .match-actions .button { width: 100%; }
}

/* ── The nearest shelf beyond the radius (operator, 2026-09-04) ──────────────────────────────────
   An empty search used to end in advice. It now ends in a store: one card, its distance, and the honest
   alternative of asking a nearer shop to carry it. */
.locator-outside { border: 1px solid rgba(243, 212, 119, 0.3); border-radius: 12px; background: rgba(255, 255, 255, 0.05); padding: 0.9rem; }
.locator-outside-head { color: var(--gold-light); font: 850 0.66rem/1.3 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; }
.locator-outside .locator-item { margin-top: 0.6rem; }
.locator-outside-note { margin-top: 0.7rem; color: rgba(255, 255, 255, 0.66); font-size: 0.8rem; line-height: 1.5; }

/* ── The hero's two objects (operator, 2026-09-04) ───────────────────────────────────────────────
   The box and the gummy drift independently and the cursor is an opposite magnet, pushing both away —
   between them, they separate. The script writes --magnet-x/y/rot every frame, so the CSS keyframe
   drift has to stand down on these two elements: an animation on `transform` overwrites whatever is
   written inline. Their base rotations are preserved so the composition is unchanged at rest.

   No transition on transform, deliberately: the spring in the script does the smoothing, and a CSS
   transition on top of a per-frame write only adds lag. */
.hero-magnet .hero-package,
.hero-magnet .hero-edible {
  animation: none !important;
  transition: filter 360ms var(--ease);
  will-change: transform;
}
.hero-magnet .hero-package { transform: translate3d(var(--magnet-x, 0px), var(--magnet-y, 0px), 0) rotate(calc(var(--magnet-rot, 0deg))); }
.hero-magnet .hero-edible { transform: translate3d(var(--magnet-x, 0px), var(--magnet-y, 0px), 0) rotate(calc(7deg + var(--magnet-rot, 0deg))); }
/* the hover-stage lift would fight the magnet for the same property */
.hero-magnet:hover .hero-package,
.hero-magnet:hover .hero-edible { transform: translate3d(var(--magnet-x, 0px), var(--magnet-y, 0px), 0) rotate(calc(var(--magnet-rot, 0deg))); }
.hero-magnet:hover .hero-edible { transform: translate3d(var(--magnet-x, 0px), var(--magnet-y, 0px), 0) rotate(calc(7deg + var(--magnet-rot, 0deg))); }

/* ── The wholesale enquiry form (operator, 2026-09-04) ───────────────────────────────────────────
   Replaces the block that restated the copy beside it. Fields inherit the card's dark ground, and the
   honeypot is removed from the layout entirely rather than merely hidden, so nothing reserves space. */
.contact-form { display: grid; gap: 0.7rem; margin-top: 1rem; }
.contact-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem; }
.contact-field { display: flex; min-width: 0; flex-direction: column; gap: 0.3rem; }
.contact-field > span { color: var(--gold-light); font: 850 0.64rem/1.3 var(--sans); letter-spacing: 0.11em; text-transform: uppercase; }
.contact-field > span i { color: rgba(255, 255, 255, 0.45); font-style: normal; }
.contact-field input, .contact-field textarea { min-height: 44px; width: 100%; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 8px; background: rgba(255, 255, 255, 0.07); color: #fff; padding: 0.6rem 0.7rem; font: 400 0.92rem/1.4 var(--sans); }
.contact-field textarea { min-height: 76px; resize: vertical; }
.contact-field input:focus, .contact-field textarea:focus { border-color: var(--gold-light); outline: none; }
.contact-trap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.contact-form .button { justify-self: start; margin-top: 0.2rem; }
.contact-status { min-height: 1.2em; color: rgba(255, 255, 255, 0.72); font-size: 0.82rem; }
.contact-status.is-sent { color: var(--gold-light); }
.contact-status.is-error { color: #ffb3a7; }

@media (max-width: 860px) {
  .contact-row { grid-template-columns: 1fr; }
  .contact-form .button { justify-self: stretch; width: 100%; }
}

/* A box-shadow follows the element's RECTANGLE, not a PNG's silhouette, so the one inherited from the
   base rule painted a soft square around the transparent package — the alpha-blended box the operator
   saw behind the hero. The Rev94 rules replaced the shadow with a drop-shadow filter, which does follow
   the artwork, but never cleared the old one. */
.hero-package { box-shadow: none; }

/* ── The Cuberto cursor (operator, 2026-09-05) ───────────────────────────────────────────────────
   A faithful port of cuberto.com's `.cb-cursor`: a white disc in `mix-blend-mode: exclusion`, so it
   inverts whatever it crosses — dark on the cream sections, bright on the dark ones — and never needs
   a colour of its own. Their geometry exactly: a 160px disc drawn at scale(0.1) for the 16px resting
   dot, scale(0.25) over anything clickable, and a small extra squeeze while the button is held. The
   sizes are written in px rather than their 10rem so a root font-size change cannot resize the cursor.

   The native pointer is deliberately left visible — cuberto.com does the same (there is no
   `cursor: none` anywhere in their stylesheets); the disc rides with it rather than replacing it. */
.cb-cursor { position: fixed; top: 0; left: 0; z-index: 9999; contain: size layout style; pointer-events: none; mix-blend-mode: exclusion; }
.cb-cursor::before { content: ""; display: block; position: absolute; top: -80px; left: -80px; width: 160px; height: 160px; border-radius: 50%; background: #fff; transform: scale(0.1); transition: transform 0.3s, opacity 0.1s; }
.cb-cursor.-pointer::before { transform: scale(0.25); }
.cb-cursor.-active::before { transform: scale(0.2); }
.cb-cursor.-pointer.-active::before { transform: scale(0.3); }
.cb-cursor.-hidden::before { transform: scale(0); }

/* ── ?bg=v1 only: the Cuberto header roll ────────────────────────────────────────────────────────
   Their nav label sits in an overflow-hidden box with a duplicate of itself, via `content: attr()`,
   parked one line below. Hovering slides the pair up, so the word leaves through the top while its
   copy arrives from the bottom, and the copy scales 0.9 → 1 as it lands. Their easing and durations
   exactly: 0.8s expo-out for the travel, 0.4s for the scale, and a 1s expo-out underline.

   Scoped to the v1 dress, and the markup is built by the script only under v1, so the default page
   keeps the DOM and the metrics it has today. */
html[data-bg-set="v1"] .nav-roll { display: block; position: relative; overflow: hidden; }
html[data-bg-set="v1"] .nav-roll > span { display: block; position: relative; transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
html[data-bg-set="v1"] .nav-roll > span::after { content: attr(data-text); display: block; position: absolute; top: 100%; left: 0; right: 0; transform: scale(0.9); transition: transform 0.4s; }
html[data-bg-set="v1"] .main-nav a::after { content: ""; position: absolute; left: 0.78rem; right: 0.78rem; bottom: 0.34rem; transform: scaleX(0); border-top: 1px solid currentColor; }
html[data-bg-set="v1"] .main-nav .header-find::after { content: none; }

@media (pointer: fine) {
  html[data-bg-set="v1"] .main-nav a:hover .nav-roll > span { transform: translateY(-100%); }
  html[data-bg-set="v1"] .main-nav a:hover .nav-roll > span::after { transform: scale(1); }
  html[data-bg-set="v1"] .main-nav a:hover::after { transform: scaleX(1); transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1); }
}

/* ── ?bg=v1 only: the hero parallax ──────────────────────────────────────────────────────────────
   Firewatch's keyart is nine painted plates translated at a fraction of the scroll. We have one
   photograph, so the plates are cut from it by depth (see the build script) and stacked here: plate 0
   is the whole picture and is never allowed a hole, the four above it are progressively nearer.

   Every plate is exactly the hero's box with the same `center / cover`, so at rest they land precisely
   on one another and on the framing of the flat background they replace — the hero at scroll zero is
   unchanged. The farthest plate descends most, so it uncovers a strip at the top of the hero; that
   strip is the field's own sky colour, sampled from the photograph's top edge. It is also never seen:
   the strip is `TRAVEL * 0.92 * scroll` tall while the hero's top is already `scroll` above the
   viewport, so for any travel factor below ~1 it has scrolled out of sight before it exists. */
html[data-bg-set="v1"] .hero.has-hero-parallax { background-image: none; }
.hero-parallax { position: absolute; z-index: 0; inset: 0; background: #cce0f0; pointer-events: none; }
/* growth is anchored to the bottom edge, so the dolly pushes the foreground up and outward — the way
   approaching it would — instead of scaling the whole frame about its middle */
.hero-parallax-plate { position: absolute; inset: 0; background-repeat: no-repeat; background-position: center; background-size: cover; transform-origin: 50% 100%; will-change: transform; }
/* the legibility scrim rides above every plate and never moves */
.hero-parallax-scrim { position: absolute; inset: 0; background: linear-gradient(100deg, rgba(4, 5, 14, 0.9) 0%, rgba(5, 6, 18, 0.74) 38%, rgba(8, 8, 26, 0.42) 62%, rgba(10, 10, 30, 0.55) 100%); }

/* The tuner, built only for `?tune=1`. It is a tool, not part of the page, so it is styled to look like
   one and deliberately shares nothing with the design system it is used to judge. */
.parallax-tuner { position: fixed; z-index: 9998; right: 16px; bottom: 16px; width: 268px; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 10px; background: rgba(14, 15, 20, 0.94); box-shadow: 0 18px 48px rgba(0, 0, 0, 0.5); padding: 12px 14px 11px; color: #e9e9ef; font: 400 12px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; backdrop-filter: blur(6px); }
.parallax-tuner-title { margin: 0 0 9px; color: #f5d373; font-size: 11px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; }
.parallax-tuner-presets { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 11px; }
.parallax-tuner-presets button { flex: 1 1 auto; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 5px; background: rgba(255, 255, 255, 0.06); color: inherit; padding: 5px 7px; font: inherit; font-size: 11px; cursor: pointer; }
.parallax-tuner-presets button:hover { border-color: #f5d373; background: rgba(245, 211, 115, 0.16); }
.parallax-tuner-dial { display: block; margin-bottom: 9px; }
.parallax-tuner-dial > span { display: flex; justify-content: space-between; gap: 8px; }
.parallax-tuner-dial b { color: #f5d373; font-weight: 700; }
.parallax-tuner-dial i { display: block; color: rgba(233, 233, 239, 0.5); font-size: 10px; font-style: normal; line-height: 1.35; }
.parallax-tuner-dial input { width: 100%; margin: 3px 0 2px; accent-color: #f5d373; }
.parallax-tuner-code { margin: 10px 0 6px; border-top: 1px solid rgba(255, 255, 255, 0.14); padding-top: 8px; color: #9fe6c0; font-size: 11px; overflow-wrap: anywhere; }
.parallax-tuner-note { margin: 0; color: rgba(233, 233, 239, 0.5); font-size: 10px; line-height: 1.4; }

/* ── The age gate (operator, website 97) ─────────────────────────────────────────────────────────
   Shown before anything else on a first visit. `data-gate` is set by an inline script in <head> so the
   decision is made before the body paints: no flash of the site behind the gate, and no flash of the
   gate at somebody who already answered.

   The panel is the page's own type and gold, not a grey compliance box — this is the first thing every
   visitor sees, and the category almost universally wastes it on a bare form. */
html[data-gate="open"] { overflow: hidden; }
html[data-gate="open"] body > *:not(.age-gate) { pointer-events: none; }
html[data-gate="closed"] .age-gate { display: none; }

.age-gate {
  position: fixed;
  z-index: 9999;
  inset: 0;
  display: grid;
  place-items: center;
  background:
    linear-gradient(160deg, rgba(6, 7, 18, 0.86), rgba(12, 10, 26, 0.93)),
    url('/homer/assets/backgrounds/v1/top.webp') center / cover no-repeat;
  padding: 1.5rem;
  overflow-y: auto;
}
.age-gate-panel { max-width: 33rem; text-align: center; }
.age-gate-mark { width: 172px; height: auto; margin: 0 auto 1.25rem; display: block; }
.age-gate-eyebrow { margin: 0 0 0.6rem; color: var(--gold-light, #f5d373); font: 850 0.68rem/1.3 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; }
.age-gate-title { margin: 0 0 1.6rem; color: #fff; font: 400 clamp(1.6rem, 3.6vw, 2.5rem)/1.16 var(--display, var(--sans)); }
.age-gate-actions { display: grid; gap: 0.7rem; justify-items: stretch; }
.age-gate .button { width: 100%; }
.age-gate-legal { margin: 1.5rem 0 0; color: rgba(255, 255, 255, 0.56); font-size: 0.78rem; line-height: 1.5; }

@media (max-width: 520px) {
  .age-gate-mark { width: 132px; }
  .age-gate-legal { font-size: 0.72rem; }
}

/* ── Careers page (operator, website 97) ─────────────────────────────────────────────────────────
   A separate page, not a homepage anchor. It borrows the site's section and heading system so the only
   new rules are the three role cards and the apply block. */
.careers-hero { padding-top: calc(var(--header-h, 76px) + 3.5rem); }
.careers-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem; margin-top: 2.5rem; }
.careers-card { border: 1px solid var(--t-border, rgba(20, 21, 16, 0.12)); border-radius: 10px; background: var(--t-surface, rgba(255, 255, 255, 0.6)); padding: 1.4rem 1.4rem 1.5rem; }
.careers-card h2 { margin: 0 0 0.5rem; font: 700 1.06rem/1.25 var(--sans); }
.careers-card p { margin: 0; color: var(--t-muted, #5c5d54); font-size: 0.93rem; line-height: 1.55; }
.careers-apply { margin-top: 2.5rem; max-width: 42rem; }
.careers-apply h2 { margin: 0 0 0.6rem; font: 700 1.2rem/1.25 var(--sans); }
.careers-apply p { margin: 0 0 0.8rem; line-height: 1.6; }
.careers-note { color: var(--t-muted, #5c5d54); font-size: 0.84rem; }

/* ── Lineup card: Format and the award callout (operator, website 97) ────────────────────────────
   Both rows are ALWAYS emitted, empty or not, because the rail aligns cards through a subgrid — a card
   that skipped a row would pull every row beneath it up out of alignment with its neighbours. Empty ones
   collapse to nothing, so they cost no height on the cards that have no award.

   The award is set as a small gold rule-and-caps line in the page's own system rather than a sticker on
   the photograph: the operator asked for it integrated, not turned into an oversized promotional badge. */
.product-award:empty, .product-format:empty { margin: 0; }
.product-award { margin: 0.15rem 0 0; }
.product-award span {
  display: inline-flex;
  align-items: center;
  gap: 0.34rem;
  color: #8e6b0d;
  font: 850 0.58rem/1.2 var(--sans);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.product-award span::before {
  content: "";
  width: 13px;
  height: 13px;
  flex: none;
  background: currentcolor;
  /* a laurel-free award mark: a rosette, so it reads as a medal without importing an icon set */
  clip-path: polygon(50% 0%, 61% 20%, 83% 17%, 82% 39%, 100% 50%, 82% 61%, 83% 83%, 61% 80%, 50% 100%, 39% 80%, 17% 83%, 18% 61%, 0% 50%, 18% 39%, 17% 17%, 39% 20%);
}
.product-format { display: flex; width: 100%; align-items: baseline; justify-content: space-between; gap: 0.8rem; margin-top: 0.55rem; }
.product-format span { color: #77746a; font-size: 0.61rem; font-weight: 850; letter-spacing: 0.08em; text-transform: uppercase; }
.product-format strong { color: #4a483f; font-size: 0.78rem; font-weight: 600; text-align: right; }

/* ── Newsletter capture (operator, website 97) ───────────────────────────────────────────────────
   A corner panel, not an interstitial. The category's worst habit is stacking a newsletter modal on a
   cookie banner on an age gate — three brands in the competitor survey hide their own homepage behind
   it — so this one never covers the page and never blocks a click that was not aimed at it. */
.signup {
  position: fixed;
  z-index: 900;
  right: 20px;
  bottom: 20px;
  width: min(23rem, calc(100vw - 40px));
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  background: linear-gradient(165deg, rgba(16, 14, 30, 0.98), rgba(9, 8, 20, 0.99));
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
  padding: 1.25rem 1.3rem 1.1rem;
  color: #fff;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 300ms var(--ease, ease), transform 300ms var(--ease, ease);
}
.signup.is-open { opacity: 1; transform: none; }
.signup-close { position: absolute; top: 6px; right: 8px; border: 0; background: none; color: rgba(255, 255, 255, 0.5); font-size: 1.4rem; line-height: 1; cursor: pointer; padding: 4px 8px; }
.signup-close:hover { color: #fff; }
.signup-eyebrow { margin: 0 0 0.3rem; color: var(--gold-light, #f5d373); font: 850 0.6rem/1.2 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; }
.signup h2 { margin: 0 0 0.35rem; font: 400 1.32rem/1.2 var(--display, var(--sans)); color: #fff; }
.signup-lede { margin: 0 0 0.85rem; color: rgba(255, 255, 255, 0.66); font-size: 0.84rem; line-height: 1.45; }
.signup-form { display: grid; gap: 0.55rem; }
.signup-form[hidden] { display: none; }
.signup-field input { width: 100%; min-height: 44px; border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 8px; background: rgba(255, 255, 255, 0.07); color: #fff; padding: 0.6rem 0.7rem; font: 400 0.92rem/1.4 var(--sans); }
.signup-field input:focus { border-color: var(--gold-light, #f5d373); outline: none; }
.signup-form .button { width: 100%; }
.signup-status { min-height: 1.2em; margin: 0.55rem 0 0; color: rgba(255, 255, 255, 0.72); font-size: 0.8rem; line-height: 1.4; }
.signup-status.is-sent { color: var(--gold-light, #f5d373); }
.signup-status.is-error { color: #ffb3a7; }
.signup-legal { margin: 0.5rem 0 0; color: rgba(255, 255, 255, 0.4); font-size: 0.68rem; }

@media (prefers-reduced-motion: reduce) {
  .signup { transition: none; transform: none; }
}
@media (max-width: 560px) {
  .signup { right: 12px; left: 12px; bottom: 12px; width: auto; }
}

/* ── Catalogue pages (SEO) ───────────────────────────────────────────────────────────────────────
   The per-product and per-collection pages generated by sites/swifts/seo.mjs. They are static: no
   app.js, no reveal observer, no parallax — so everything here paints at its final state rather than
   waiting to be un-hidden, and nothing below may depend on a class the homepage script adds. */
.seo-crumbs { width: min(calc(100% - 40px), var(--shell)); margin: calc(var(--header) + 1.6rem) auto 0; color: #6a6c61; font-size: 0.82rem; letter-spacing: 0.02em; }
.seo-crumbs a { color: var(--gold-dark); text-decoration: none; }
.seo-crumbs a:hover { text-decoration: underline; }
.seo-crumbs span[aria-hidden] { margin: 0 0.35rem; opacity: 0.5; }
.seo-crumbs [aria-current] { color: var(--ink); font-weight: 640; }

.seo-hero { padding-top: clamp(2rem, 4vw, 3.25rem); }
.seo-hero-inner { display: grid; gap: clamp(1.75rem, 4vw, 3.5rem); align-items: center; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 880px) { .seo-hero-inner { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } }
.seo-hero-media { position: relative; border-radius: var(--radius); background: color-mix(in srgb, var(--seo-accent, var(--gold)) 12%, var(--paper-2)); padding: clamp(1rem, 3vw, 2.25rem); }
.seo-hero-media img { width: 100%; border-radius: calc(var(--radius) - 12px); }
.seo-hero-copy h1 { max-width: 16ch; margin: 0.7rem 0 0; font: 400 clamp(2.1rem, 5vw, 3.4rem)/1.08 var(--serif); }
.seo-lede { max-width: 54ch; margin-top: 1.1rem; color: var(--ink-soft); font-size: 1.08rem; }
.seo-award { margin-top: 1rem; color: var(--gold-dark); font-size: 0.88rem; font-weight: 800; letter-spacing: 0.04em; }

.seo-features { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 1.25rem; list-style: none; }
.seo-features li { border: 1px solid var(--line); border-radius: 999px; background: var(--white); padding: 0.32rem 0.78rem; font-size: 0.8rem; font-weight: 700; }

.seo-facts { display: grid; gap: 0.05rem 1.5rem; margin-top: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.seo-facts > div { border-top: 1px solid var(--line); padding: 0.7rem 0; }
.seo-facts dt { color: #6a6c61; font-size: 0.72rem; font-weight: 850; letter-spacing: 0.12em; text-transform: uppercase; }
.seo-facts dd { margin-top: 0.2rem; font-size: 0.98rem; }

.seo-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.9rem; }

.seo-body { padding-bottom: clamp(4rem, 8vw, 7rem); }
.seo-block { max-width: 68ch; margin-top: clamp(2.25rem, 4vw, 3.25rem); }
.seo-block h2 { margin-bottom: 0.7rem; font: 400 clamp(1.35rem, 2.6vw, 1.85rem)/1.2 var(--serif); }
.seo-block p { color: var(--ink-soft); }
.seo-block .seo-facts { max-width: none; }
.seo-serving { color: #6a6c61; font-size: 0.88rem; font-weight: 700; }
.seo-note { max-width: 68ch; margin-top: 1rem; color: #6a6c61; font-size: 0.83rem; line-height: 1.55; }

.seo-related { display: flex; flex-wrap: wrap; gap: 0.45rem; list-style: none; }
.seo-related a { display: inline-block; border: 1px solid var(--line); border-radius: 999px; background: var(--white); padding: 0.4rem 0.85rem; font-size: 0.86rem; text-decoration: none; }
.seo-related a:hover { border-color: var(--gold); background: var(--paper-2); }

.seo-grid { display: grid; gap: 1rem; margin-top: 1rem; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); list-style: none; }
.seo-card { display: grid; height: 100%; align-content: start; border: 1px solid var(--line); border-radius: 18px; background: color-mix(in srgb, var(--seo-accent, var(--gold)) 7%, var(--white)); padding: 1rem 1rem 1.2rem; text-decoration: none; transition: transform 200ms var(--ease), box-shadow 200ms ease; }
.seo-card:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(20, 21, 16, 0.12); }
.seo-card img { width: 100%; border-radius: 12px; margin-bottom: 0.85rem; }
.seo-card-family { color: var(--gold-dark); font-size: 0.68rem; font-weight: 850; letter-spacing: 0.14em; text-transform: uppercase; }
.seo-card strong { margin-top: 0.2rem; font: 700 1.02rem/1.25 var(--sans); }
.seo-card-flavor { margin-top: 0.25rem; color: #6a6c61; font-size: 0.85rem; }