/* WineWay — catálogo. Tokens em theme.css (gerado de DESIGN.md); este arquivo só os aplica.
   Conceito: carta de vinhos editorial. Marfim para leitura, vinho profundo para pausas,
   o arco de adega como único motivo recorrente, dourado fosco apenas em filetes. */

@font-face { font-family: Manrope; src: url("./fonts/manrope-latin-wght-normal.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url("./fonts/instrument-serif-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url("./fonts/instrument-serif-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }

:root {
  color-scheme: light;
  --serif: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --sans: Manrope, "Helvetica Neue", Arial, sans-serif;
  --ink: var(--ww-on-surface);
  --muted: var(--ww-secondary);
  --line: var(--ww-border);
  --paper: var(--ww-surface);
  --page: clamp(20px, 4.4vw, 72px);
  --max: 1440px;
  --header-h: 76px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --stage: linear-gradient(180deg, #F3EDE5 0%, var(--ww-surface-muted) 100%);
  --ink-veil: color-mix(in srgb, var(--ww-inverse) 72%, transparent);
  --hair-light: color-mix(in srgb, var(--ww-on-inverse) 18%, transparent);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --t-display: clamp(54px, 8.2vw, 132px);
  --t-h2: clamp(42px, 5.2vw, 84px);
  --t-h3: clamp(26px, 2.2vw, 34px);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scrollbar-gutter: stable; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 24px); -webkit-text-size-adjust: 100%; }
body { margin: 0; color: var(--ink); background: var(--ww-neutral); font: 400 16px/1.65 var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
html[data-menu-open], html[data-sheet-open], body:has(dialog[open]) { overflow: hidden; }
::selection { background: var(--ww-primary); color: var(--ww-on-primary); }
button, input, select { font: inherit; color: inherit; }
button, a, input, select, summary { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
button:disabled { cursor: not-allowed; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
h1, h2, h3, p, dl, dd, figure, blockquote, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }
h1, h2, h3 { font-weight: 400; text-wrap: balance; }
h1 em, h2 em, h3 em, .wordmark em, .footer-brand em { font-style: italic; color: var(--ww-chart-secondary); }
p { text-wrap: pretty; }
:focus-visible { outline: 2px solid var(--ww-primary); outline-offset: 3px; }
.on-dark :focus-visible, .site-footer :focus-visible, .hero :focus-visible, .origin :focus-visible, .menu-panel :focus-visible { outline-color: var(--ww-on-inverse); }
[hidden] { display: none !important; }
svg.icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; top: -90px; left: 16px; z-index: 200; padding: 12px 18px; background: var(--paper); color: var(--ww-primary); }
.skip:focus { top: 12px; }
.shell { width: min(var(--max), 100% - var(--page) * 2); margin-inline: auto; }

/* ---------- Type helpers ---------- */
.eyebrow { display: flex; align-items: center; gap: 12px; color: var(--muted); font: 600 11px/1.4 var(--sans); letter-spacing: .2em; text-transform: uppercase; }
.eyebrow .rule { width: 28px; height: 1px; background: var(--ww-tertiary); flex: 0 0 auto; }
.eyebrow-light { color: var(--ww-inverse-muted); }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px 48px; flex-wrap: wrap; margin-bottom: clamp(32px, 4vw, 56px); }
.section-head h2 { font: 400 var(--t-h2)/1 var(--serif); letter-spacing: -.025em; color: var(--ww-primary); margin-top: 18px; }
.section-aside { max-width: 38ch; color: var(--muted); font-size: 15px; }
.text-link { display: inline-flex; align-items: center; gap: 10px; font: 600 14px/1.2 var(--sans); color: var(--ww-primary); padding-block: 8px; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; transition: background-size .5s var(--ease-out); }
.text-link:hover { background-size: 0 1px; background-position: 100% 100%; }
.text-link .icon, .link-light .icon, .button .icon { width: 18px; height: 18px; transition: transform .45s var(--ease-out); }
.text-link:hover .icon, .link-light:hover .icon, .button:hover .icon { transform: translateX(4px); }
.link-light { display: inline-flex; align-items: center; gap: 10px; color: var(--ww-on-inverse); font: 600 14px/1.2 var(--sans); padding-block: 10px; border-bottom: 1px solid var(--hair-light); transition: border-color .3s; }
.link-light:hover { border-color: var(--ww-on-inverse); }

/* ---------- Buttons ---------- */
.button { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 14px; min-height: 52px; padding: 0 28px; border-radius: var(--ww-radius-sm); background: var(--ww-primary); color: var(--ww-on-primary); font: 600 14px/1.2 var(--sans); letter-spacing: .01em; border: 1px solid var(--ww-primary); transition: color .35s, border-color .35s, transform .2s; white-space: nowrap; }
.button::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--ww-primary-hover); transform: scaleX(0); transform-origin: right; transition: transform .6s var(--ease-out); }
.button:hover::before { transform: scaleX(1); transform-origin: left; }
.button:active { transform: scale(.985); }
.button-light { background: var(--ww-on-inverse); color: var(--ww-primary); border-color: var(--ww-on-inverse); }
.button-light::before { background: var(--ww-rose); }
.button-secondary { background: transparent; color: var(--ww-primary); border-color: var(--ww-primary); }
.button-secondary::before { background: var(--ww-primary); }
.button-secondary:hover { color: var(--ww-on-primary); }
.button-block { width: 100%; }
.button[aria-disabled="true"] { opacity: .45; pointer-events: none; }
.icon-button { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line); color: var(--ww-primary); transition: background .3s, color .3s, border-color .3s, opacity .3s; }
.icon-button:hover:not(:disabled) { background: var(--ww-primary); color: var(--ww-on-primary); border-color: var(--ww-primary); }
.icon-button:disabled { opacity: .35; }
.text-button { font: 600 13px/1.2 var(--sans); color: var(--muted); text-decoration: underline; text-underline-offset: 4px; padding: 10px 0; }
.text-button:hover:not(:disabled) { color: var(--ww-primary); }
.text-button:disabled { opacity: .4; text-decoration: none; }

/* ---------- Header ---------- */
.site-header { position: fixed; inset: 0 0 auto; z-index: 60; color: var(--ink); transition: transform .5s var(--ease-out); view-transition-name: site-header; }
.header-bar { position: relative; background: color-mix(in srgb, var(--ww-neutral) 88%, transparent); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid color-mix(in srgb, var(--ww-border) 70%, transparent); transition: background .4s, border-color .4s, color .4s; }
.site-header[data-hidden] { transform: translateY(-100%); }
html[data-menu-open] .site-header { transform: none; }
.site-header.is-overlay:not([data-scrolled]) .header-bar { background: transparent; border-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; color: var(--ww-on-inverse); }
.site-header.is-overlay:not([data-scrolled]) .wordmark em { color: var(--ww-rose); }
html[data-menu-open] .site-header.site-header.site-header .header-bar { background: var(--ww-inverse); border-color: var(--hair-light); color: var(--ww-on-inverse); backdrop-filter: none; }
html[data-menu-open] .site-header .wordmark em { color: var(--ww-rose); }
.header-inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: var(--header-h); gap: 24px; }
.main-nav { display: flex; gap: 32px; font: 500 14px/1 var(--sans); }
.main-nav a { position: relative; padding-block: 10px; }
.main-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .5s var(--ease-out); }
.main-nav a:hover::after, .main-nav a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.wordmark { display: grid; justify-items: center; line-height: 1; }
.wordmark-name { font: 400 32px/1 var(--serif); letter-spacing: -.02em; }
.wordmark-caption { font: 600 9px/1 var(--sans); letter-spacing: .38em; text-transform: uppercase; margin-top: 6px; padding-left: .38em; opacity: .7; }
.header-actions { display: flex; justify-content: flex-end; align-items: center; gap: 22px; }
.header-talk { display: inline-flex; align-items: center; gap: 8px; font: 500 14px/1 var(--sans); padding-block: 10px; }
.header-talk .icon { width: 18px; height: 18px; }
.selection-trigger { display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 8px 0 16px; border: 1px solid currentColor; border-radius: 999px; font: 600 13px/1 var(--sans); transition: background .3s, color .3s; }
.selection-trigger:hover:not(:disabled) { background: var(--ww-primary); color: var(--ww-on-primary); border-color: var(--ww-primary); }
.selection-trigger .icon { width: 18px; height: 18px; }
.selection-trigger b, .mobile-action-bar b { display: inline-grid; place-items: center; min-width: 28px; height: 28px; padding: 0 6px; border-radius: 999px; background: var(--ww-primary); color: var(--ww-on-primary); font: 700 12px/1 var(--sans); font-variant-numeric: tabular-nums; }
.site-header.is-overlay:not([data-scrolled]) .selection-trigger b, html[data-menu-open] .selection-trigger b { background: var(--ww-on-inverse); color: var(--ww-primary); }
[data-count-badge].bump { animation: bump .6s var(--ease-out); }
@keyframes bump { 0% { transform: scale(1); } 30% { transform: scale(1.35); } 100% { transform: scale(1); } }
.menu-toggle { display: none; width: 44px; height: 44px; position: relative; margin-left: -10px; }
.menu-toggle span { position: absolute; left: 11px; right: 11px; height: 1.5px; background: currentColor; transition: transform .45s var(--ease-out); }
.menu-toggle span:first-child { top: 17px; }
.menu-toggle span:last-child { top: 26px; }
.menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(4.5px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-4.5px) rotate(-45deg); }
.menu-panel { position: fixed; inset: var(--header-h) 0 0; background: var(--ww-inverse); color: var(--ww-on-inverse); clip-path: inset(0 0 100% 0); visibility: hidden; transition: clip-path .7s var(--ease-out), visibility 0s .7s; overflow-y: auto; }
.menu-panel::before { content: ""; position: absolute; inset: 0; background: var(--grain); opacity: .06; pointer-events: none; }
html[data-menu-open] .menu-panel { clip-path: inset(0); visibility: visible; transition: clip-path .7s var(--ease-out); }
.menu-panel-inner { position: relative; display: grid; gap: 32px; padding-block: 40px calc(40px + env(safe-area-inset-bottom, 0px)); min-height: 100%; align-content: space-between; }
.menu-panel nav { display: grid; }
.menu-panel nav a { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--hair-light); font: 400 clamp(38px, 9vw, 64px)/1.05 var(--serif); opacity: 0; transform: translateY(24px); transition: opacity .5s, transform .7s var(--ease-out); }
.menu-panel nav a small { font: 500 12px/1 var(--sans); letter-spacing: .1em; color: var(--ww-inverse-muted); }
html[data-menu-open] .menu-panel nav a { opacity: 1; transform: none; }
html[data-menu-open] .menu-panel nav a:nth-child(2) { transition-delay: .05s; }
html[data-menu-open] .menu-panel nav a:nth-child(3) { transition-delay: .1s; }
html[data-menu-open] .menu-panel nav a:nth-child(4) { transition-delay: .15s; }
html[data-menu-open] .menu-panel nav a:nth-child(5) { transition-delay: .2s; }
html[data-menu-open] .menu-panel nav a:nth-child(n+6) { transition-delay: .25s; }
.menu-panel-foot { display: grid; gap: 16px; justify-items: start; }
.menu-panel-foot p { font-size: 13px; color: var(--ww-inverse-muted); }
body:not(.has-overlay-header) main { padding-top: var(--header-h); }

/* ---------- Motion primitives ---------- */
.motion [data-reveal].armed { opacity: 0; transform: translateY(32px); }
.motion [data-reveal].armed.is-in { opacity: 1; transform: none; transition: opacity 1s var(--ease-out), transform 1.2s var(--ease-out); transition-delay: calc(var(--i, 0) * 80ms); }

/* ---------- Hero ---------- */
.hero { position: relative; isolation: isolate; min-height: clamp(640px, 100svh, 960px); display: grid; grid-template-rows: 1fr auto; color: var(--ww-on-inverse); background: var(--ww-inverse); overflow: hidden; }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--grain); opacity: .07; mix-blend-mode: overlay; pointer-events: none; }
.hero-media { position: absolute; inset: 0; z-index: -3; overflow: hidden; }
.hero-media img { width: 100%; height: calc(100% + 120px); margin-top: -60px; object-fit: cover; object-position: 72% 50%; transform: translate3d(0, var(--py, 0px), 0); }
.motion .hero-media { animation: hero-zoom 2.8s var(--ease-out) both; }
@keyframes hero-zoom { from { transform: scale(1.14); filter: brightness(.6); } to { transform: none; filter: none; } }
.hero-veil { position: absolute; inset: 0; z-index: -2; background: linear-gradient(90deg, color-mix(in srgb, var(--ww-inverse) 92%, transparent) 0%, color-mix(in srgb, var(--ww-inverse) 70%, transparent) 34%, color-mix(in srgb, var(--ww-inverse) 10%, transparent) 70%), linear-gradient(0deg, color-mix(in srgb, var(--ww-inverse) 85%, transparent) 0%, transparent 34%); }
.hero-inner { align-self: center; padding-top: calc(var(--header-h) + 48px); padding-bottom: 32px; display: grid; justify-items: start; }
.hero-title { font: 400 var(--t-display)/.94 var(--serif); letter-spacing: -.035em; margin: 28px 0 0; }
.hero-title .line { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.hero-title .line > span { display: block; }
.hero-title em { color: var(--ww-rose); }
.hero-lede { max-width: 44ch; margin-top: 32px; font-size: clamp(16px, 1.3vw, 19px); line-height: 1.7; color: color-mix(in srgb, var(--ww-on-inverse) 82%, transparent); }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 20px 32px; margin-top: 40px; }
.hero-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding-bottom: 40px; border-top: 1px solid var(--hair-light); padding-top: 24px; }
.hero-facts { display: flex; gap: clamp(28px, 5vw, 72px); }
.hero-facts div { display: grid; gap: 4px; }
.hero-facts dt { order: 2; font: 600 10px/1.4 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--ww-inverse-muted); }
.hero-facts dd { font: 400 clamp(40px, 4vw, 60px)/1 var(--serif); font-variant-numeric: tabular-nums; }
.scroll-cue { display: flex; align-items: center; gap: 14px; font: 600 10px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--ww-inverse-muted); }
.scroll-cue i { position: relative; width: 1px; height: 48px; background: var(--hair-light); overflow: hidden; }
.scroll-cue i::after { content: ""; position: absolute; left: 0; top: 0; width: 1px; height: 40%; background: var(--ww-on-inverse); animation: cue 2.2s var(--ease) infinite; }
@keyframes cue { from { transform: translateY(-100%); } to { transform: translateY(260%); } }
.motion .hero-title .line > span { animation: rise 1.3s var(--ease-out) both; }
.motion .hero-title .line:nth-child(1) > span { animation-delay: .25s; }
.motion .hero-title .line:nth-child(2) > span { animation-delay: .37s; }
.motion .hero-title .line:nth-child(3) > span { animation-delay: .49s; }
.motion .hero-eyebrow, .motion .hero-lede, .motion .hero-actions, .motion .hero-foot { animation: fade-up 1.2s var(--ease-out) both; }
.motion .hero-eyebrow { animation-delay: .1s; }
.motion .hero-lede { animation-delay: .75s; }
.motion .hero-actions { animation-delay: .9s; }
.motion .hero-foot { animation-delay: 1.1s; }
@keyframes rise { from { transform: translateY(105%) rotate(2deg); } to { transform: none; } }
@keyframes fade-up { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

/* ---------- Producers marquee ---------- */
.producers { display: flex; align-items: center; border-bottom: 1px solid var(--line); background: var(--ww-neutral); overflow: hidden; }
.producers-label { flex: 0 0 auto; padding: 22px var(--page); font: 600 10px/1.5 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); border-right: 1px solid var(--line); background: var(--ww-neutral); position: relative; z-index: 1; }
.marquee { flex: 1; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.marquee-track { display: flex; width: max-content; }
.marquee ul { display: flex; flex: 0 0 auto; }
.marquee li a { display: flex; align-items: center; padding: 22px 28px; font: italic 400 26px/1 var(--serif); color: var(--ww-primary); white-space: nowrap; transition: color .3s; }
.marquee li a::after { content: ""; width: 5px; height: 5px; margin-left: 56px; background: var(--ww-tertiary); transform: rotate(45deg); }
.marquee li a:hover { color: var(--ww-chart-secondary); }
.motion .marquee-track { animation: marquee 70s linear infinite; }
.motion .marquee:hover .marquee-track, .motion .marquee:focus-within .marquee-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
html:not(.motion) .marquee { overflow-x: auto; }
html:not(.motion) .marquee ul[aria-hidden] { display: none; }

/* ---------- Styles (accordion panels) ---------- */
.styles { padding-block: clamp(80px, 10vw, 152px) clamp(64px, 8vw, 120px); }
.style-panels { display: flex; gap: 12px; height: clamp(460px, 44vw, 620px); }
.style-panel { container-type: inline-size; position: relative; isolation: isolate; flex: 1 1 0; min-width: 0; overflow: hidden; border-radius: var(--ww-radius-sm); color: var(--ww-on-inverse); background: var(--ww-inverse); transition: flex-grow .9s var(--ease-out); }
.style-panels:not(:hover):not(:focus-within) .style-panel:first-child, .style-panel:hover, .style-panel:focus-visible { flex-grow: 2.6; }
.style-panel img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); transition: transform 1.4s var(--ease-out), filter .9s; filter: saturate(.9) brightness(.85); }
.style-panel:hover img, .style-panel:focus-visible img { transform: scale(1); filter: none; }
.style-shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, color-mix(in srgb, var(--ww-inverse) 92%, transparent) 0%, color-mix(in srgb, var(--ww-inverse) 25%, transparent) 55%, transparent 100%); }
.style-count { position: absolute; top: 24px; left: 24px; font: 600 10px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: color-mix(in srgb, var(--ww-on-inverse) 80%, transparent); }
.style-body { position: absolute; left: 0; right: 0; bottom: 0; padding: 28px; display: grid; gap: 12px; }
.style-name { font: 400 clamp(30px, 17cqi, 68px)/1 var(--serif); letter-spacing: -.02em; white-space: nowrap; }
.style-intro { max-width: 38ch; font-size: 14px; line-height: 1.6; color: color-mix(in srgb, var(--ww-on-inverse) 80%, transparent); }
.style-go { display: inline-flex; align-items: center; gap: 10px; font: 600 13px/1 var(--sans); }
.style-go .icon { width: 18px; transition: transform .45s var(--ease-out); }
.style-panel:hover .style-go .icon { transform: translateX(6px); }
.style-intro, .style-go { opacity: 0; transform: translateY(12px); transition: opacity .5s, transform .7s var(--ease-out); }
.style-panels:not(:hover):not(:focus-within) .style-panel:first-child :is(.style-intro, .style-go), .style-panel:hover :is(.style-intro, .style-go), .style-panel:focus-visible :is(.style-intro, .style-go) { opacity: 1; transform: none; transition-delay: .25s; }

/* ---------- Rails ---------- */
.featured { padding-block: clamp(48px, 6vw, 96px) clamp(80px, 9vw, 140px); }
.rail-controls { display: flex; align-items: center; gap: 12px; }
.rail-controls .text-link { margin-right: 16px; }
.rail { position: relative; }
.rail-track { display: grid; grid-auto-flow: column; grid-auto-columns: clamp(250px, 23vw, 340px); gap: clamp(16px, 2vw, 28px); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: max(var(--page), (100% - var(--max)) / 2); padding-inline: max(var(--page), (100% - var(--max)) / 2); padding-bottom: 8px; scrollbar-width: none; }
.rail-track::-webkit-scrollbar { display: none; }
.rail-track > * { scroll-snap-align: start; }
.rail-progress { position: relative; height: 1px; margin-top: 40px; background: var(--line); overflow: hidden; }
.rail-progress span { position: absolute; inset: 0; background: var(--ww-primary); transform-origin: left; transform: scaleX(var(--k, .1)); transition: transform .3s; }

/* ---------- Product card ---------- */
.product-card { position: relative; display: grid; gap: 18px; align-content: start; min-width: 0; }
.card-stage { position: relative; aspect-ratio: 4 / 5; max-width: 100%; overflow: hidden; border-radius: var(--ww-radius-sm); background: var(--stage); isolation: isolate; }
.card-stage::after { content: ""; position: absolute; left: 22%; right: 22%; bottom: 7%; height: 18px; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--ww-inverse) 26%, transparent), transparent); transition: transform .8s var(--ease-out), opacity .8s; }
.card-photo { position: absolute; inset: 0; display: block; }
.bottle { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; view-transition-class: bottle; transform: translateY(var(--lift, 0px)) scale(calc(var(--photo-scale, 1) * .9)); transition: transform 1s var(--ease-out); }
.product-card:hover .bottle { --lift: -12px; }
.product-card:hover .card-stage::after { transform: scaleX(.78); opacity: .6; }
.card-style { position: absolute; top: 16px; left: 16px; font: 600 10px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--ww-primary); }
.quick-add { position: absolute; left: 12px; right: 12px; bottom: 12px; display: flex; align-items: center; justify-content: center; gap: 8px; height: 46px; border-radius: var(--ww-radius-sm); background: var(--ww-primary); color: var(--ww-on-primary); font: 600 13px/1 var(--sans); transform: translateY(calc(100% + 14px)); transition: transform .55s var(--ease-out), background .3s; }
.quick-add .icon { width: 18px; height: 18px; }
.quick-add:hover { background: var(--ww-primary-hover); }
.quick-add.is-added { background: var(--ww-success); }
.product-card:hover .quick-add, .product-card:focus-within .quick-add, .quick-add.is-added { transform: none; }
.card-info { display: grid; gap: 6px; }
.card-producer { font: 600 10px/1.4 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.card-title { font: 400 clamp(24px, 1.9vw, 30px)/1.08 var(--serif); letter-spacing: -.01em; color: var(--ink); }
.card-title a { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .6s var(--ease-out), color .3s; }
.product-card:hover .card-title a { background-size: 100% 1px; color: var(--ww-primary); }
.card-meta { font-size: 13px; line-height: 1.5; color: var(--muted); }
.card-price { margin-top: 6px; font: 600 16px/1.2 var(--sans); font-variant-numeric: tabular-nums; color: var(--ww-primary); }
.card-price small { font-weight: 500; font-size: 12px; color: var(--muted); }
.photo-placeholder { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; gap: 6px; color: var(--muted); }
.photo-placeholder span { font: italic 400 28px/1 var(--serif); color: var(--ww-primary); }
.photo-placeholder small { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
@media (hover: none) {
  .quick-add { left: auto; width: 46px; padding: 0; border-radius: 50%; transform: none; }
  .quick-add span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}
@supports (animation-timeline: view()) {
  .motion .product-card { animation: card-in linear both; animation-timeline: view(); animation-range: entry 0% entry 55%; }
  @keyframes card-in { from { opacity: 0; transform: translateY(48px); } to { opacity: 1; transform: none; } }
}

/* ---------- Grape index ---------- */
.grapes { padding-block: clamp(80px, 10vw, 152px); border-top: 1px solid var(--line); }
.grapes-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); gap: clamp(40px, 7vw, 120px); align-items: start; }
.grapes-intro { position: sticky; top: calc(var(--header-h) + 40px); display: grid; gap: 22px; }
.grapes-intro h2 { font: 400 var(--t-h2)/1 var(--serif); letter-spacing: -.025em; color: var(--ww-primary); }
.grapes-intro p:not(.eyebrow) { max-width: 38ch; color: var(--muted); }
.grapes-note { font: 600 11px/1 var(--sans) !important; letter-spacing: .2em; text-transform: uppercase; color: var(--ww-tertiary) !important; }
.grape-index { position: relative; }
.grape-index ol { border-top: 1px solid var(--line); counter-reset: g; }
.grape-index a { position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr) auto 28px; align-items: baseline; gap: 16px; padding: clamp(16px, 1.8vw, 24px) 0; border-bottom: 1px solid var(--line); overflow: hidden; }
.grape-index a::before { content: ""; position: absolute; inset: 0; z-index: -1; background: color-mix(in srgb, var(--ww-rose) 55%, transparent); transform: scaleY(0); transform-origin: bottom; transition: transform .6s var(--ease-out); }
.grape-index a:hover::before, .grape-index a:focus-visible::before { transform: scaleY(1); }
.grape-no { font: 600 11px/1 var(--sans); letter-spacing: .14em; color: var(--ww-tertiary); padding-left: 8px; }
.grape-name { font: 400 clamp(34px, 4.2vw, 64px)/1 var(--serif); letter-spacing: -.02em; transition: transform .7s var(--ease-out), color .3s; }
.grape-index a:hover .grape-name { transform: translateX(16px); color: var(--ww-primary); font-style: italic; }
.grape-count { font: 500 13px/1 var(--sans); color: var(--muted); font-variant-numeric: tabular-nums; }
.grape-arrow { color: var(--ww-primary); transform: translateX(-12px); opacity: 0; transition: transform .5s var(--ease-out), opacity .3s; }
.grape-index a:hover .grape-arrow { transform: none; opacity: 1; }
.grape-figure { position: absolute; top: 0; left: 0; z-index: 3; pointer-events: none; opacity: 0; transition: opacity .35s; will-change: transform; }
.grape-figure img { width: 190px; height: 240px; padding: 22px 12px 8px; object-fit: contain; mix-blend-mode: multiply; transform: scale(var(--photo-scale, 1)); }
.grape-figure::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 95px 95px 4px 4px; background: var(--stage); box-shadow: 0 30px 60px -30px color-mix(in srgb, var(--ww-inverse) 50%, transparent); }
.grape-figure { isolation: isolate; translate: 40px -58%; scale: .85; transition: opacity .35s, scale .5s var(--ease-out); }
.grape-figure[data-on] { opacity: 1; scale: 1; }
@media (hover: none), (pointer: coarse) { .grape-figure { display: none; } }

/* ---------- Origin (dark) ---------- */
.origin { position: relative; isolation: isolate; color: var(--ww-on-inverse); background: var(--ww-inverse); padding-block: clamp(88px, 11vw, 168px); overflow: hidden; }
.origin::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--grain); opacity: .06; mix-blend-mode: overlay; }
.origin::after { content: ""; position: absolute; z-index: -1; width: 70vw; aspect-ratio: 1; right: -20vw; top: -30%; background: radial-gradient(closest-side, color-mix(in srgb, var(--ww-primary) 70%, transparent), transparent); }
.origin-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.origin-copy { display: grid; gap: 28px; justify-items: start; }
.origin-copy h2 { font: 400 var(--t-h2)/1 var(--serif); letter-spacing: -.025em; }
.origin-copy h2 em { color: var(--ww-rose); }
.origin-copy > p:not(.eyebrow) { max-width: 46ch; color: color-mix(in srgb, var(--ww-on-inverse) 78%, transparent); }
.origin-facts { display: flex; flex-wrap: wrap; gap: 0; border-top: 1px solid var(--hair-light); width: 100%; }
.origin-facts div { flex: 1 1 120px; padding: 20px 20px 0 0; display: grid; gap: 6px; }
.origin-facts div + div { padding-left: 20px; border-left: 1px solid var(--hair-light); }
.origin-facts dt { font: 600 10px/1.4 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--ww-inverse-muted); }
.origin-facts dd { font: 400 44px/1 var(--serif); font-variant-numeric: tabular-nums; }
.origin-facts dd small { font: 500 12px/1 var(--sans); color: var(--ww-inverse-muted); }
.route { position: relative; }
.route svg { width: 100%; height: auto; overflow: visible; }
.route-grid line { stroke: var(--hair-light); stroke-dasharray: 2 6; }
.route-grid text, .route-coord, .route-label { fill: var(--ww-inverse-muted); font: 600 10px var(--sans); letter-spacing: .16em; }
.route-label { text-transform: uppercase; }
.route-andes { fill: none; stroke: var(--ww-tertiary); stroke-width: 1.2; opacity: .7; }
.route-path { fill: none; stroke: var(--ww-rose); stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.route-pin circle:first-child { fill: var(--ww-tertiary); }
.route-pin .halo { fill: none; stroke: var(--ww-tertiary); stroke-width: 1; transform-box: fill-box; transform-origin: center; }
.motion .route-pin .halo { animation: halo 2.6s var(--ease) infinite; }
.motion .route-pin-b .halo { animation-delay: 1.3s; }
@keyframes halo { from { transform: scale(.4); opacity: 1; } to { transform: scale(1.8); opacity: 0; } }
.route-city { fill: var(--ww-on-inverse); font: italic 400 30px var(--serif); }
.motion .route.armed .route-path { stroke-dashoffset: 1; }
.motion .route.armed .route-pin-b, .motion .route.armed .route-city, .motion .route.armed .route-coord { opacity: 0; }
.motion .route.armed.is-in .route-path { stroke-dashoffset: 0; transition: stroke-dashoffset 2.6s var(--ease) .4s; }
.motion .route.armed.is-in :is(.route-pin-b, .route-city, .route-coord) { opacity: 1; transition: opacity .8s 2.4s; }

/* ---------- Story ---------- */
.story { padding-block: clamp(88px, 11vw, 168px); }
.story-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 8vw, 140px); align-items: center; }
.story-arch { position: relative; aspect-ratio: 4 / 5; max-width: 100%; overflow: hidden; border-radius: 999px 999px var(--ww-radius-sm) var(--ww-radius-sm) / 42% 42% var(--ww-radius-sm) var(--ww-radius-sm); background: var(--ww-surface-muted); }
.story-arch img { position: absolute; inset: -60px 0; width: 100%; height: calc(100% + 120px); object-fit: cover; object-position: 30% 50%; transform: translate3d(0, var(--py, 0px), 0) scale(1.05); }
.story-copy { display: grid; gap: 28px; }
.story-copy h2 { font: 400 var(--t-h2)/1.02 var(--serif); letter-spacing: -.025em; color: var(--ww-primary); }
.story-copy > p:not(.eyebrow) { max-width: 46ch; color: var(--muted); font-size: 17px; }
.story-copy blockquote { margin-top: 12px; padding-top: 28px; border-top: 1px solid var(--line); display: grid; gap: 14px; }
.story-copy blockquote p { position: relative; font: italic 400 clamp(26px, 2.4vw, 36px)/1.2 var(--serif); color: var(--ink); max-width: 22ch; }
.story-copy blockquote p::before { content: "“"; position: absolute; left: -.5em; top: -.08em; color: var(--ww-tertiary); }
.story-copy cite { font: 600 10px/1 var(--sans); font-style: normal; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }

/* ---------- How it works ---------- */
.how { padding-block: clamp(72px, 9vw, 136px); border-top: 1px solid var(--line); }
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 48px); }
.steps li { position: relative; display: grid; gap: 14px; align-content: start; padding-top: 32px; }
.steps li::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--ww-primary); transform-origin: left; }
.motion .steps li.armed::before { transform: scaleX(0); }
.motion .steps li.armed.is-in::before { transform: scaleX(1); transition: transform 1.4s var(--ease-out) calc(var(--i) * 160ms + .2s); }
.step-no { font: italic 400 56px/1 var(--serif); color: var(--ww-tertiary); }
.steps h3 { font: 600 19px/1.3 var(--sans); color: var(--ink); }
.steps p { max-width: 34ch; color: var(--muted); font-size: 15px; }

/* ---------- FAQ ---------- */
.faq { padding-block: clamp(72px, 9vw, 136px); background: var(--ww-surface); }
.faq-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.3fr); gap: clamp(40px, 7vw, 120px); align-items: start; }
.faq-intro { display: grid; gap: 22px; position: sticky; top: calc(var(--header-h) + 40px); }
.faq-intro h2 { font: 400 var(--t-h2)/1.02 var(--serif); letter-spacing: -.025em; color: var(--ww-primary); }
.faq-intro p:not(.eyebrow) { color: var(--muted); }
.faq-list { border-top: 1px solid var(--line); }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 26px 0; cursor: pointer; list-style: none; font: 400 clamp(22px, 2vw, 30px)/1.2 var(--serif); transition: color .3s; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary:hover { color: var(--ww-primary); }
.faq-list summary i { position: relative; flex: 0 0 auto; width: 36px; height: 36px; border: 1px solid var(--line); border-radius: 50%; transition: background .3s, border-color .3s, transform .5s var(--ease-out); }
.faq-list summary i::before, .faq-list summary i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; margin: -.75px 0 0 -6px; background: currentColor; transition: transform .5s var(--ease-out); }
.faq-list summary i::after { transform: rotate(90deg); }
.faq-list details[open] summary i { background: var(--ww-primary); border-color: var(--ww-primary); color: var(--ww-on-primary); transform: rotate(180deg); }
.faq-list details[open] summary i::after { transform: rotate(0deg); }
.faq-list details > div { padding: 0 64px 28px 0; }
.faq-list details p { max-width: 60ch; color: var(--muted); }
@supports (interpolate-size: allow-keywords) {
  .faq-list { interpolate-size: allow-keywords; }
  .faq-list details::details-content { height: 0; overflow: clip; transition: height .6s var(--ease-out), content-visibility .6s allow-discrete; }
  .faq-list details[open]::details-content { height: auto; }
}

/* ---------- Journal ---------- */
.journal-section { padding-block: clamp(64px, 8vw, 120px); }
.journal-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.journal-grid article { display: grid; gap: 14px; align-content: start; border-top: 1px solid var(--line); padding-top: 24px; }
.journal-grid img { width: 100%; aspect-ratio: 1.5; object-fit: cover; border-radius: var(--ww-radius-sm); }
.journal-grid h2, .journal-grid h3 { font: 400 30px/1.12 var(--serif); }
.journal-grid p:not(.eyebrow) { font-size: 14px; color: var(--muted); }
.journal-grid small { font-size: 12px; color: var(--muted); }

/* ---------- Footer ---------- */
.site-footer { position: relative; isolation: isolate; background: var(--ww-inverse); color: var(--ww-on-inverse); overflow: hidden; }
.site-footer::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--grain); opacity: .06; mix-blend-mode: overlay; pointer-events: none; }
.footer-invite { padding-block: clamp(88px, 11vw, 160px) clamp(64px, 8vw, 112px); border-bottom: 1px solid var(--hair-light); }
.invite-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, .7fr); gap: clamp(40px, 6vw, 96px); align-items: end; }
.invite-arch { position: relative; aspect-ratio: 3 / 4; max-width: 100%; overflow: hidden; border-radius: 999px 999px var(--ww-radius-sm) var(--ww-radius-sm) / 44% 44% var(--ww-radius-sm) var(--ww-radius-sm); }
.invite-arch img { position: absolute; inset: -40px 0; width: 100%; height: calc(100% + 80px); object-fit: cover; object-position: 62% 50%; transform: translate3d(0, var(--py, 0px), 0); }
.invite-inner { display: grid; gap: 28px; justify-items: start; }
.invite-inner h2 { font: 400 clamp(44px, 6.4vw, 104px)/.98 var(--serif); letter-spacing: -.03em; max-width: 16ch; }
.invite-inner h2 em { color: var(--ww-rose); }
.invite-lede { max-width: 52ch; color: color-mix(in srgb, var(--ww-on-inverse) 76%, transparent); }
.invite-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 20px 32px; margin-top: 8px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr)); gap: 40px; padding-block: 72px 48px; }
.footer-brand p { font: 400 clamp(30px, 2.8vw, 40px)/1.1 var(--serif); }
.footer-brand em { color: var(--ww-rose); }
.footer-col { display: grid; gap: 12px; align-content: start; font-size: 14px; }
.footer-col a, .footer-col span { color: color-mix(in srgb, var(--ww-on-inverse) 78%, transparent); transition: color .3s; width: fit-content; }
.footer-col a:hover { color: var(--ww-on-inverse); }
.footer-title { font: 600 10px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--ww-inverse-muted); margin-bottom: 8px; }
.footer-legal { display: flex; align-items: center; gap: 20px; padding-block: 28px; border-top: 1px solid var(--hair-light); }
.footer-legal p { font-size: 13px; color: var(--ww-inverse-muted); max-width: 90ch; }
.age-mark { flex: 0 0 auto; display: grid; place-items: center; width: 52px; height: 52px; border: 1px solid var(--ww-tertiary); border-radius: 50%; font: 600 13px/1 var(--sans); color: var(--ww-on-inverse); }
.footer-mark { line-height: .78; padding-top: 24px; text-align: center; user-select: none; pointer-events: none; }
.footer-mark span { display: block; font: 400 clamp(96px, 22.5vw, 380px)/.78 var(--serif); letter-spacing: -.05em; color: color-mix(in srgb, var(--ww-on-inverse) 7%, transparent); white-space: nowrap; transform: translateY(14%); }
.footer-mark em { color: inherit; }
.footer-bottom { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-block: 20px calc(20px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--hair-light); font-size: 12px; color: var(--ww-inverse-muted); }
.footer-bottom a:hover { color: var(--ww-on-inverse); }
.mobile-action-bar { display: none; }

/* ---------- Drawer (selection) ---------- */
.drawer { position: fixed; inset: 0 0 0 auto; width: min(480px, 100vw); max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; padding: 0; border: 0; background: transparent; color: var(--ink); overflow: visible; }
.drawer::backdrop { background: color-mix(in srgb, var(--ww-inverse) 55%, transparent); backdrop-filter: blur(4px); }
.drawer-panel { display: grid; grid-template-rows: auto 1fr auto; height: 100%; background: var(--ww-neutral); box-shadow: -30px 0 80px -40px color-mix(in srgb, var(--ww-inverse) 60%, transparent); }
.motion .drawer[open] .drawer-panel { animation: drawer-in .6s var(--ease-out); }
.motion .drawer[open]::backdrop { animation: fade .4s ease; }
.motion .drawer[data-closing] .drawer-panel { animation: drawer-out .3s ease-in forwards; }
.motion .drawer[data-closing]::backdrop { animation: fade .3s ease reverse forwards; }
@keyframes drawer-in { from { transform: translateX(100%); } }
@keyframes drawer-out { to { transform: translateX(100%); } }
@keyframes fade { from { opacity: 0; } }
.drawer-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 28px 28px 22px; border-bottom: 1px solid var(--line); }
.drawer-head h2 { margin-top: 10px; font: 400 40px/1 var(--serif); color: var(--ww-primary); }
.drawer-head h2 span { font: 500 15px/1 var(--sans); color: var(--muted); }
.drawer-body { overflow-y: auto; padding: 8px 28px; overscroll-behavior: contain; }
.drawer-list { display: grid; }
.drawer-item { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.motion .drawer[open] .drawer-item { animation: fade-up .7s var(--ease-out) both; animation-delay: calc(.15s + var(--n) * 60ms); }
.drawer-thumb { position: relative; aspect-ratio: 4 / 5; border-radius: var(--ww-radius-sm); background: var(--stage); overflow: hidden; align-self: start; }
.drawer-thumb .bottle, .toast-thumb .bottle { position: absolute; inset: 0; }
.drawer-item-info { display: grid; gap: 4px; align-content: start; min-width: 0; }
.drawer-item-producer { font: 600 10px/1.3 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.drawer-item-title { font: 400 22px/1.1 var(--serif); }
.drawer-item-title:hover { color: var(--ww-primary); }
.drawer-item-variant { font-size: 12px; color: var(--muted); }
.drawer-item-row { display: flex; align-items: center; gap: 16px; margin-top: 10px; }
.drawer-item-total { font: 600 15px/1.2 var(--sans); font-variant-numeric: tabular-nums; color: var(--ww-primary); }
.stepper { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 999px; height: 38px; }
.stepper button { display: grid; place-items: center; width: 38px; height: 38px; color: var(--ww-primary); border-radius: 50%; transition: background .2s; }
.stepper button:hover:not(:disabled) { background: var(--ww-rose); }
.stepper button:disabled { opacity: .35; }
.stepper .icon { width: 16px; height: 16px; }
.stepper span { min-width: 24px; text-align: center; font: 600 14px/1 var(--sans); font-variant-numeric: tabular-nums; }
.stepper-lg { height: 52px; }
.stepper-lg button { width: 48px; height: 48px; }
.drawer-empty { display: grid; justify-items: center; text-align: center; gap: 14px; padding: 64px 12px; }
.drawer-empty .icon { width: 40px; height: 40px; color: var(--ww-tertiary); stroke-width: 1; }
.drawer-empty h3 { font: 400 30px/1.1 var(--serif); color: var(--ww-primary); }
.drawer-empty p { color: var(--muted); font-size: 14px; max-width: 34ch; }
.drawer-empty .button { margin-top: 10px; }
.drawer-foot { display: grid; gap: 14px; padding: 22px 28px calc(24px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); background: var(--ww-surface); }
.drawer-subtotal { display: flex; justify-content: space-between; align-items: baseline; }
.drawer-subtotal span { font: 600 11px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.drawer-subtotal strong { font: 600 24px/1 var(--sans); font-variant-numeric: tabular-nums; color: var(--ww-primary); }
.drawer-note { font-size: 12px; line-height: 1.55; color: var(--muted); }

/* ---------- Toast ---------- */
.toast-region { position: fixed; z-index: 90; right: max(24px, env(safe-area-inset-right, 0px)); bottom: calc(24px + env(safe-area-inset-bottom, 0px)); pointer-events: none; }
.toast { pointer-events: auto; display: flex; align-items: center; gap: 14px; width: min(380px, calc(100vw - 32px)); padding: 12px 12px 12px 12px; border-radius: var(--ww-radius-md); background: var(--ww-inverse); color: var(--ww-on-inverse); box-shadow: 0 24px 60px -24px color-mix(in srgb, var(--ww-inverse) 80%, transparent); animation: toast-in .6s var(--ease-out); }
.toast > div { flex: 1; min-width: 0; }
.toast-thumb { position: relative; flex: 0 0 auto; width: 48px; height: 60px; border-radius: var(--ww-radius-sm); background: var(--ww-surface); overflow: hidden; }
.toast-text { font: 600 10px/1.3 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--ww-inverse-muted); }
.toast-title { font: 400 20px/1.15 var(--serif); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.toast-action { flex: 0 0 auto; padding: 10px 14px; border-radius: var(--ww-radius-sm); border: 1px solid var(--hair-light); font: 600 12px/1 var(--sans); color: var(--ww-on-inverse); transition: background .3s, color .3s; }
.toast-action:hover { background: var(--ww-on-inverse); color: var(--ww-primary); }
@keyframes toast-in { from { opacity: 0; transform: translateY(24px) scale(.97); } }

/* ---------- Catalog page ---------- */
.catalog-page { min-height: 70vh; }
.catalog-hero { display: grid; gap: 40px; padding-top: clamp(32px, 5vw, 64px); }
.catalog-hero-copy { display: grid; gap: 22px; }
.catalog-hero h1 { font: 400 clamp(54px, 8vw, 128px)/.95 var(--serif); letter-spacing: -.035em; color: var(--ww-primary); }
.catalog-lede { max-width: 58ch; color: var(--muted); font-size: 17px; }
.breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font: 500 12px/1.4 var(--sans); color: var(--muted); }
.breadcrumbs a { transition: color .3s; }
.breadcrumbs a:hover { color: var(--ww-primary); text-decoration: underline; text-underline-offset: 4px; }
.breadcrumbs [aria-current] { color: var(--ink); }
.style-tabs { display: flex; gap: clamp(20px, 3vw, 44px); border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.style-tabs::-webkit-scrollbar { display: none; }
.style-tabs a { position: relative; flex: 0 0 auto; padding: 0 0 18px; font: 400 clamp(26px, 2.6vw, 38px)/1 var(--serif); color: var(--muted); transition: color .3s; }
.style-tabs a small { font: 600 11px/1 var(--sans); letter-spacing: .06em; vertical-align: super; margin-left: 2px; color: var(--ww-tertiary); }
.style-tabs a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--ww-primary); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease-out); }
.style-tabs a:hover { color: var(--ink); }
.style-tabs a[aria-current="page"] { color: var(--ww-primary); }
.style-tabs a[aria-current="page"]::after { transform: scaleX(1); }
.catalog-toolbar { display: flex; align-items: center; gap: 16px 28px; padding-block: 28px; flex-wrap: wrap; }
.catalog-search { position: relative; flex: 1 1 320px; display: flex; align-items: center; }
.catalog-search .icon { position: absolute; left: 0; color: var(--muted); }
.catalog-search input { width: 100%; height: 52px; padding: 0 0 0 34px; border: 0; border-bottom: 1px solid var(--muted); background: transparent; font-size: 16px; border-radius: 0; transition: border-color .3s; }
.catalog-search input::placeholder { color: color-mix(in srgb, var(--muted) 80%, transparent); }
.catalog-search input:focus { outline: none; border-color: var(--ww-primary); box-shadow: 0 1px 0 var(--ww-primary); }
.filter-toggle { display: none; align-items: center; gap: 10px; height: 48px; padding: 0 18px; border: 1px solid var(--ww-primary); border-radius: 999px; color: var(--ww-primary); font: 600 13px/1 var(--sans); }
.filter-toggle b { display: inline-grid; place-items: center; min-width: 22px; height: 22px; border-radius: 999px; background: var(--ww-primary); color: var(--ww-on-primary); font-size: 11px; }
.sort { display: flex; align-items: center; gap: 12px; font: 600 11px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.sort select { height: 48px; padding: 0 40px 0 16px; border: 1px solid var(--line); border-radius: 999px; background: var(--ww-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234B172A' stroke-width='1.6'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center / 16px; appearance: none; font: 500 14px/1 var(--sans); letter-spacing: 0; text-transform: none; color: var(--ink); cursor: pointer; }
.catalog-body { display: grid; grid-template-columns: 264px minmax(0, 1fr); gap: clamp(32px, 4vw, 64px); align-items: start; padding-bottom: clamp(80px, 10vw, 140px); }
.filters { position: sticky; top: calc(var(--header-h) + 24px); max-height: calc(100vh - var(--header-h) - 48px); display: grid; grid-template-rows: auto 1fr auto; }
.filters-head { display: none; }
.filters-scroll { overflow-y: auto; overscroll-behavior: contain; padding-right: 8px; scrollbar-width: thin; }
.facet { border: 0; margin: 0; padding: 0 0 28px; min-width: 0; }
.facet + .facet { border-top: 1px solid var(--line); padding-top: 24px; }
.facet legend { float: left; width: 100%; margin-bottom: 16px; font: 600 11px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--ink); }
.facet-chips { clear: both; display: flex; flex-wrap: wrap; gap: 8px; }
.facet-chips button { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; font: 500 13px/1 var(--sans); background: var(--ww-surface); transition: background .25s, color .25s, border-color .25s; }
.facet-chips button small { font-size: 11px; color: var(--muted); }
.facet-chips button:hover { border-color: var(--ww-primary); }
.facet-chips button[aria-pressed="true"] { background: var(--ww-primary); border-color: var(--ww-primary); color: var(--ww-on-primary); }
.facet-chips button[aria-pressed="true"] small { color: var(--ww-rose); }
.facet-list { clear: both; display: grid; }
.facet-list button { display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%; padding: 9px 0; text-align: left; font-size: 14px; color: var(--muted); transition: color .2s; }
.facet-list button span { position: relative; padding-left: 20px; }
.facet-list button span::before { content: ""; position: absolute; left: 0; top: 50%; width: 10px; height: 10px; margin-top: -5px; border: 1px solid var(--muted); border-radius: 50%; transition: background .2s, border-color .2s, box-shadow .2s; }
.facet-list button small { font-size: 12px; font-variant-numeric: tabular-nums; }
.facet-list button:hover { color: var(--ink); }
.facet-list button[aria-pressed="true"] { color: var(--ww-primary); font-weight: 600; }
.facet-list button[aria-pressed="true"] span::before { background: var(--ww-primary); border-color: var(--ww-primary); box-shadow: inset 0 0 0 2px var(--ww-neutral); }
.price-inputs { display: flex; align-items: flex-end; gap: 10px; margin-top: 16px; }
.price-inputs label { flex: 1; display: grid; gap: 6px; font-size: 11px; color: var(--muted); }
.price-inputs input { width: 100%; height: 42px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--ww-radius-sm); background: var(--ww-surface); font-size: 14px; }
.price-inputs input:focus { outline: none; border-color: var(--ww-primary); }
.price-inputs > span { padding-bottom: 10px; color: var(--muted); }
.filters-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.sheet-done { display: none; }
.sheet-backdrop { display: none; }
.results { min-width: 0; }
.results-head { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 20px; min-height: 40px; margin-bottom: 28px; }
.results-count { font-size: 14px; color: var(--muted); }
.results-count strong { font: 400 28px/1 var(--serif); color: var(--ww-primary); margin-right: 4px; font-variant-numeric: tabular-nums; }
.active-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.active-chips button { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px 0 14px; border-radius: 999px; background: var(--ww-rose); color: var(--ww-primary); font: 600 12px/1 var(--sans); transition: background .2s; }
.active-chips button:hover { background: color-mix(in srgb, var(--ww-rose) 70%, var(--ww-primary) 12%); }
.active-chips .icon { width: 14px; height: 14px; }
.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: clamp(40px, 4vw, 56px) clamp(16px, 2vw, 28px); }
.empty-state { display: grid; justify-items: start; gap: 16px; padding: 56px 0; max-width: 56ch; }
.empty-state h2 { font: 400 clamp(36px, 4vw, 52px)/1.05 var(--serif); color: var(--ww-primary); }
.empty-state p:not(.eyebrow) { color: var(--muted); }
.empty-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.noscript-note { color: var(--muted); margin-bottom: 24px; }

/* ---------- Product page ---------- */
.product-page { padding-bottom: 0; }
.product-page > .shell:first-child { padding-top: 28px; }
.pdp { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 112px); align-items: start; padding-block: 32px clamp(72px, 9vw, 128px); }
.pdp-stage { position: sticky; top: calc(var(--header-h) + 24px); display: grid; gap: 16px; }
.pdp-arch { position: relative; isolation: isolate; aspect-ratio: 4 / 5; max-width: 100%; max-height: calc(100vh - var(--header-h) - 90px); overflow: hidden; border-radius: 999px 999px var(--ww-radius-sm) var(--ww-radius-sm) / 38% 38% var(--ww-radius-sm) var(--ww-radius-sm); background: radial-gradient(70% 45% at 50% 52%, color-mix(in srgb, var(--ww-surface) 85%, transparent) 0%, transparent 100%), linear-gradient(180deg, color-mix(in srgb, var(--ww-rose) 80%, var(--ww-neutral)) 0%, var(--ww-surface-muted) 100%); }
.pdp-arch .bottle { position: absolute; inset: 6% 0 4%; height: 90%; transform: scale(calc(var(--photo-scale, 1) * .96)); }
.motion .pdp-arch .bottle { animation: bottle-in 1.4s var(--ease-out) both .1s; }
@keyframes bottle-in { from { opacity: 0; transform: translateY(40px) scale(calc(var(--photo-scale, 1) * .96)); } }
.pdp-arch-label { position: absolute; z-index: -1; left: 50%; top: 50%; translate: -50% -50%; writing-mode: vertical-rl; rotate: 180deg; font: italic 400 clamp(90px, 12vw, 200px)/1 var(--serif); letter-spacing: -.02em; color: color-mix(in srgb, var(--ww-primary) 8%, transparent); white-space: nowrap; pointer-events: none; }
.pdp-floor { position: absolute; z-index: -1; left: 26%; right: 26%; bottom: 5%; height: 22px; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--ww-inverse) 30%, transparent), transparent); }
.pdp-stage-note { font: 600 10px/1.4 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); text-align: center; }
.pdp-info { display: grid; gap: 24px; padding-top: clamp(0px, 3vw, 40px); min-width: 0; }
.pdp-title { font: 400 clamp(46px, 5.6vw, 92px)/.98 var(--serif); letter-spacing: -.03em; color: var(--ww-primary); }
.motion .pdp-info > * { animation: fade-up 1s var(--ease-out) both; }
.motion .pdp-info > :nth-child(2) { animation-delay: .08s; }
.motion .pdp-info > :nth-child(3) { animation-delay: .16s; }
.motion .pdp-info > :nth-child(4) { animation-delay: .24s; }
.motion .pdp-info > :nth-child(n+5) { animation-delay: .32s; }
.pdp-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.pdp-tags a { display: inline-flex; align-items: center; height: 32px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); font: 500 13px/1 var(--sans); transition: border-color .25s, background .25s, color .25s; }
.pdp-tags li:first-child a { background: var(--ww-rose); border-color: var(--ww-rose); color: var(--ww-primary); }
.pdp-tags a:hover { border-color: var(--ww-primary); }
.pdp-intro { max-width: 52ch; font-size: 17px; color: var(--muted); }
.pdp-buy { padding: 28px 0; border-block: 1px solid var(--line); }
.purchase { display: grid; gap: 20px; }
.purchase-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 16px; }
.price { font: 600 clamp(30px, 2.6vw, 38px)/1 var(--sans); letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--ww-primary); }
.price-note { font-size: 13px; color: var(--muted); }
.variant { display: grid; gap: 8px; font-size: 13px; color: var(--muted); }
.variant select { height: 48px; padding: 0 14px; border: 1px solid var(--muted); border-radius: var(--ww-radius-sm); background: var(--ww-surface); font-size: 15px; color: var(--ink); }
.purchase-row { display: flex; gap: 12px; flex-wrap: wrap; }
.add-button { flex: 1 1 220px; }
.add-button.is-added { background: var(--ww-success); border-color: var(--ww-success); }
.add-button .icon { width: 18px; height: 18px; }
.purchase-unavailable { color: var(--muted); }
.ask-link { display: inline-flex; align-items: center; gap: 10px; width: fit-content; font: 600 14px/1.2 var(--sans); color: var(--ww-primary); padding-block: 6px; }
.ask-link .icon { width: 18px; height: 18px; }
.ask-link:hover { text-decoration: underline; text-underline-offset: 5px; }
.pdp-service { display: grid; gap: 14px; }
.pdp-service li { display: flex; gap: 14px; align-items: flex-start; font-size: 14px; color: var(--muted); line-height: 1.55; }
.pdp-service b { color: var(--ink); font-weight: 600; }
.pdp-service .icon { color: var(--ww-tertiary); margin-top: 1px; }
.pdp-sheet { padding-top: 8px; }
.pdp-sheet-title { margin-bottom: 14px; font: 600 11px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--ink); }
.pdp-sheet dl { display: grid; }
.pdp-sheet dl div { display: flex; align-items: baseline; gap: 12px; padding: 11px 0; font-size: 15px; }
.pdp-sheet dt { flex: 0 0 auto; color: var(--muted); }
.pdp-sheet dl div::before { content: ""; order: 2; flex: 1; border-bottom: 1px dotted color-mix(in srgb, var(--muted) 60%, transparent); transform: translateY(-4px); min-width: 24px; }
.pdp-sheet dd { order: 3; text-align: right; color: var(--ink); font-weight: 500; }
.pdp-sheet dd a:hover { color: var(--ww-primary); text-decoration: underline; text-underline-offset: 4px; }
.pdp-story { background: var(--ww-surface); padding-block: clamp(80px, 10vw, 144px); border-top: 1px solid var(--line); }
.pdp-story-grid { display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); gap: clamp(40px, 7vw, 120px); align-items: start; }
.pdp-story-side { position: sticky; top: calc(var(--header-h) + 40px); display: grid; gap: 22px; }
.pdp-story-side h2 { font: 400 var(--t-h2)/1 var(--serif); letter-spacing: -.025em; color: var(--ww-primary); }
.help-card { margin-top: 24px; padding: 28px; border-radius: var(--ww-radius-sm); background: var(--ww-neutral); border: 1px solid var(--line); display: grid; gap: 12px; justify-items: start; }
.help-title { font: 400 26px/1.1 var(--serif); }
.help-card p:not(.help-title) { font-size: 14px; color: var(--muted); }
.editorial-body { font-size: 17px; line-height: 1.8; color: var(--ink); max-width: 68ch; overflow-wrap: anywhere; }
.editorial-body > * + * { margin-top: 1.1em; }
.editorial-body h2 { font: 400 clamp(30px, 3vw, 42px)/1.12 var(--serif); letter-spacing: -.015em; color: var(--ww-primary); }
.editorial-body h3 { display: flex; align-items: center; gap: 12px; margin-top: 2.8rem; font: 600 11px/1.3 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--ink); }
.editorial-body h3::before { content: ""; width: 28px; height: 1px; background: var(--ww-tertiary); flex: 0 0 auto; }
.editorial-body h2 + p::first-letter { float: left; font: 400 4.6em/.82 var(--serif); margin: .06em .1em 0 0; color: var(--ww-primary); }
.editorial-body p { color: color-mix(in srgb, var(--ink) 88%, var(--muted)); }
.editorial-body strong { font-weight: 600; color: var(--ink); }
.editorial-body ul { display: grid; gap: 8px; }
.editorial-body li { position: relative; padding-left: 22px; }
.editorial-body li::before { content: ""; position: absolute; left: 0; top: .85em; width: 10px; height: 1px; background: var(--ww-tertiary); }
.editorial-body a { color: var(--ww-primary); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.editorial-body img { max-width: 100%; height: auto; border-radius: var(--ww-radius-sm); }
.editorial-body blockquote { border-left: 1px solid var(--ww-tertiary); padding-left: 24px; font: italic 400 26px/1.3 var(--serif); }
.related { padding-block: clamp(72px, 9vw, 128px); }
.buybar { position: fixed; z-index: 55; left: 0; right: 0; bottom: 0; padding: 12px max(var(--page), env(safe-area-inset-right, 0px)) calc(12px + env(safe-area-inset-bottom, 0px)) max(var(--page), env(safe-area-inset-left, 0px)); background: color-mix(in srgb, var(--ww-neutral) 92%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid var(--line); transform: translateY(110%); transition: transform .6s var(--ease-out); }
html[data-buy-docked] .buybar { transform: none; }
.buybar-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; max-width: var(--max); margin-inline: auto; }
.buybar-info { min-width: 0; }
.buybar-title { font: 400 22px/1.1 var(--serif); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.buybar-price { font: 600 14px/1.3 var(--sans); color: var(--ww-primary); font-variant-numeric: tabular-nums; }
.buybar .button { min-height: 46px; }
html[data-buy-docked] .toast-region { bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
.redirect-page, .error-page { display: grid; justify-items: start; gap: 22px; padding-block: clamp(64px, 10vw, 140px); min-height: 60vh; }
.redirect-page h1, .error-page h1 { font: 400 clamp(46px, 6vw, 92px)/1 var(--serif); letter-spacing: -.03em; color: var(--ww-primary); max-width: 14ch; }
.error-page > p:not(.eyebrow):not(.error-code) { max-width: 52ch; color: var(--muted); }
.error-code { font: italic 400 clamp(120px, 22vw, 300px)/.8 var(--serif); color: color-mix(in srgb, var(--ww-primary) 10%, transparent); }
.error-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- Blog ---------- */
.blog-list { padding-block: clamp(48px, 7vw, 96px); }
body:not(.has-overlay-header) main.blog-list { padding-top: calc(var(--header-h) + clamp(24px, 4vw, 48px)); }
.blog-list h1 { font: 400 clamp(54px, 7vw, 112px)/.98 var(--serif); letter-spacing: -.03em; color: var(--ww-primary); margin-top: 18px; }
.blog-lede { font-size: 18px; color: var(--muted); max-width: 56ch; margin: 24px 0 48px; }
.blog-article { max-width: 820px; margin: 48px auto 80px; }
.blog-article header { display: grid; gap: 18px; margin: 32px 0; }
.blog-article h1 { font: 400 clamp(42px, 5.4vw, 76px)/1.02 var(--serif); letter-spacing: -.025em; color: var(--ww-primary); }
.blog-article .byline { font-size: 13px; color: var(--muted); }
.back-link { font: 600 13px/1 var(--sans); color: var(--muted); }
.back-link:hover { color: var(--ww-primary); }
.article-cover { width: 100%; height: auto; margin: 24px 0 40px; border-radius: var(--ww-radius-sm); }
.pagination { display: flex; gap: 8px; margin-top: 48px; }
.pagination a { display: grid; place-items: center; min-width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 999px; }
.pagination a[aria-current] { background: var(--ww-primary); color: var(--ww-on-primary); border-color: var(--ww-primary); }
.editorial-page { padding-block: 64px; }

/* ---------- View transitions (same-origin page navigations) ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: .35s ease both vt-out; }
::view-transition-new(root) { animation: .55s var(--ease-out) both vt-in; }
::view-transition-group(*) { animation-duration: .7s; animation-timing-function: var(--ease-out); }
::view-transition-image-pair(*.bottle) { mix-blend-mode: multiply; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-12px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(16px); } }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  .header-talk { display: none; }
  .main-nav { gap: 24px; }
}
@media (max-width: 1023px) {
  :root { --header-h: 64px; }
  .menu-toggle { display: block; }
  .main-nav { display: none; }
  .header-inner { grid-template-columns: 44px 1fr 44px; gap: 8px; }
  .wordmark-name { font-size: 28px; }
  .selection-trigger { padding: 0; width: 44px; justify-content: center; border: 0; position: relative; }
  .selection-trigger:hover:not(:disabled) { background: transparent; color: inherit; }
  .selection-label { display: none; }
  .selection-trigger b { position: absolute; top: 2px; right: -2px; min-width: 18px; height: 18px; font-size: 10px; padding: 0 4px; }
  .selection-trigger b[data-empty] { display: none; }
  .style-panels { display: grid; grid-template-columns: 1fr 1fr; height: auto; }
  .style-panel { aspect-ratio: 3 / 4; }
  .style-intro { display: none; }
  .style-go, .style-panels:not(:hover):not(:focus-within) .style-panel:first-child .style-go { opacity: 1; transform: none; }
  .grapes-grid, .origin-grid, .story-grid, .faq-grid, .pdp-story-grid { grid-template-columns: 1fr; }
  .grapes-intro, .faq-intro, .pdp-story-side { position: static; }
  .story-arch { max-width: 520px; width: 100%; }
  .steps { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .invite-grid { grid-template-columns: 1fr; }
  .invite-arch { display: none; }
  .footer-brand { grid-column: 1 / -1; }
  .catalog-body { grid-template-columns: 1fr; }
  .filter-toggle { display: inline-flex; }
  .sheet-backdrop { display: block; position: fixed; inset: 0; z-index: 70; background: color-mix(in srgb, var(--ww-inverse) 50%, transparent); opacity: 0; visibility: hidden; transition: opacity .4s, visibility 0s .4s; }
  .sheet-backdrop.is-open { opacity: 1; visibility: visible; transition: opacity .4s; }
  .filters { position: fixed; z-index: 71; inset: auto 0 0; top: auto; max-height: 86dvh; padding: 0 max(20px, env(safe-area-inset-right, 0px)) calc(16px + env(safe-area-inset-bottom, 0px)) max(20px, env(safe-area-inset-left, 0px)); border-radius: 16px 16px 0 0; background: var(--ww-neutral); transform: translateY(105%); visibility: hidden; transition: transform .6s var(--ease-out), visibility 0s .6s; box-shadow: 0 -30px 60px -30px color-mix(in srgb, var(--ww-inverse) 50%, transparent); }
  .filters.is-open { transform: none; visibility: visible; transition: transform .6s var(--ease-out); }
  .filters-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 0; border-bottom: 1px solid var(--line); margin-bottom: 20px; }
  .filters-head h2 { font: 400 32px/1 var(--serif); color: var(--ww-primary); }
  .sheet-done { display: inline-flex; }
  .mobile-action-bar { position: fixed; z-index: 50; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: 1fr 1fr; background: var(--ww-inverse); color: var(--ww-on-inverse); padding-bottom: env(safe-area-inset-bottom, 0px); transition: transform .5s var(--ease-out); }
  .mobile-action-bar > * { display: flex; align-items: center; justify-content: center; gap: 10px; height: 58px; font: 600 13px/1 var(--sans); }
  .mobile-action-bar > * + * { border-left: 1px solid var(--hair-light); }
  .mobile-action-bar b { background: var(--ww-on-inverse); color: var(--ww-primary); min-width: 22px; height: 22px; font-size: 11px; }
  html[data-buy-docked] .mobile-action-bar { transform: translateY(100%); }
  .site-footer { padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px)); }
  .toast-region { left: 16px; right: 16px; bottom: calc(74px + env(safe-area-inset-bottom, 0px)); }
  .toast { width: 100%; }
  .pdp { grid-template-columns: 1fr; padding-top: 16px; }
  .pdp-stage { position: relative; top: 0; }
  .pdp-arch { max-height: none; width: min(100%, 520px); margin-inline: auto; }
}
@media (max-width: 640px) {
  body { font-size: 15px; }
  .hero { min-height: clamp(600px, 100svh, 820px); }
  .hero-media img { object-position: 78% 50%; }
  .hero-veil { background: linear-gradient(0deg, color-mix(in srgb, var(--ww-inverse) 96%, transparent) 0%, color-mix(in srgb, var(--ww-inverse) 80%, transparent) 50%, color-mix(in srgb, var(--ww-inverse) 25%, transparent) 100%); }
  .hero-inner { align-self: end; padding-top: calc(var(--header-h) + 120px); }
  .hero-title { font-size: clamp(48px, 13.5vw, 68px); }
  .hero-lede { margin-top: 22px; }
  .hero-actions { margin-top: 28px; gap: 16px 24px; }
  .hero-actions .button { width: 100%; }
  .hero-foot { padding-bottom: 28px; }
  .hero-facts { gap: 24px; }
  .hero-facts dd { font-size: 36px; }
  .scroll-cue { display: none; }
  .producers-label { display: none; }
  .marquee li a { font-size: 22px; padding: 18px 20px; }
  .marquee li a::after { margin-left: 40px; }
  .style-panels { gap: 8px; }
  .style-body { padding: 16px; }
  .style-count { top: 14px; left: 14px; }
  .style-go { font-size: 12px; }
  .rail-controls .icon-button { display: none; }
  .rail-controls .text-link { margin: 0; }
  .rail-track { grid-auto-columns: 72%; gap: 14px; }
  .product-grid { grid-template-columns: 1fr 1fr; gap: 36px 12px; }
  .card-title { font-size: 21px; }
  .card-meta { font-size: 12px; }
  .card-style { top: 10px; left: 10px; font-size: 9px; }
  .quick-add { right: 8px; bottom: 8px; width: 40px; height: 40px; }
  .grape-index a { grid-template-columns: 34px minmax(0, 1fr) auto; }
  .grape-arrow { display: none; }
  .grape-name { font-size: 34px; }
  .origin-facts dd { font-size: 36px; }
  .route-city { font-size: 36px; }
  .route-coord, .route-grid text, .route-label { font-size: 14px; }
  .faq-list summary { font-size: 22px; }
  .faq-list details > div { padding-right: 0; }
  .footer-grid { padding-block: 56px 32px; }
  .footer-legal { align-items: flex-start; }
  .catalog-toolbar { gap: 12px; }
  .catalog-search { flex-basis: 100%; }
  .filter-toggle { flex: 1; justify-content: center; }
  .sort { flex: 1; }
  .sort span { display: none; }
  .sort select { width: 100%; padding: 0 32px 0 14px; font-size: 13px; background-position: right 10px center; }
  .filter-toggle { flex: 0 1 auto; }
  .sort { flex: 1 1 0; }
  .pdp-title { font-size: clamp(42px, 12vw, 60px); }
  .purchase-row .stepper-lg { flex: 0 0 auto; }
  .help-card { padding: 22px; }
  .editorial-body { font-size: 16px; }
  .drawer-head, .drawer-foot { padding-inline: 20px; }
  .drawer-body { padding-inline: 20px; }
  .drawer-item { grid-template-columns: 64px minmax(0, 1fr); }
  .drawer-item-total { grid-column: 2; }
  .buybar-title { font-size: 18px; }
}