/* WineDupes design tokens — see design_handoff_winedupes/README.md */
:root {
  --bg: #FAF5EC;
  --card: #FFFDF9;
  --brand: #6E1423;
  --accent: #A62639;
  --text: #3D1219;
  --muted: #6B4A44;
  --faint: #A08379;   /* decoration only: rules, swatches, logo suffix */
  --soft: #7A5E55;    /* secondary text — 5.4:1 on cream (WCAG AA) */
  --border: #E8D8C4;
  --border-2: #D9BFB2;
  --tint: #F1E4D3;
  --ob-text: #FAF5EC;   /* on-burgundy */
  --ob-muted: #E9CFC4;
  --ob-accent: #E4B8A8;
  --ob-card: #7E2231;
  --ob-border: #96404C;
}

html, body { margin: 0; padding: 0; background: var(--bg); }
html { scrollbar-gutter: stable; }
body { font-family: 'Karla', sans-serif; color: var(--text); line-height: 1.55; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
* { box-sizing: border-box; }
a { color: var(--brand); }
a:hover { color: var(--accent); }
input::placeholder { color: #B39A93; }
button { font-family: 'Karla', sans-serif; }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }

.shell { min-height: 100vh; background: var(--bg); display: flex; flex-direction: column; }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 40; background: rgba(250, 245, 236, 0.94); backdrop-filter: blur(8px); border-bottom: 1px solid var(--border); }
.site-header-inner { max-width: 1120px; margin: 0 auto; padding: 14px clamp(20px, 4vw, 32px); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 20px; }
.logo { display: inline-flex; align-items: center; gap: 9px; font-family: 'Young Serif', serif; font-size: 22px; letter-spacing: -0.01em; color: var(--brand); cursor: pointer; text-decoration: none; }
.logo-mark { height: 20px; display: block; }
.logo:hover { color: var(--brand); }
.logo-dark { color: var(--text); }
.logo-faint { color: var(--faint); }
.tabs { display: flex; gap: clamp(14px, 3vw, 28px); }
/* Once the nav wraps onto its own line under the logo, spread the tabs
   across the full width instead of clustering them left. */
@media (max-width: 600px) {
  .home-decor-wave { display: none; }
  .tabs { width: 100%; justify-content: space-between; gap: 0; order: 2; }
  .header-lang { order: 1; margin-left: auto; }
}
.tab { background: none; border: none; padding: 8px 2px; font-size: 15px; font-weight: 700; cursor: pointer; color: var(--muted); border-bottom: 2px solid transparent; text-decoration: none; transition: color 0.15s, border-bottom-color 0.15s; }
.tab:hover { color: var(--muted); }  /* neutralizes the global a:hover */
.tab.active { color: var(--brand); border-bottom-color: var(--accent); }
.tab.active:hover { color: var(--brand); }
/* Pointer devices only, so a tap doesn't leave a stuck hover state on phones.
   Hover = ink text + soft dusty underline; active keeps burgundy + accent. */
@media (hover: hover) {
  .tab:hover { color: var(--text); border-bottom-color: var(--border-2); }
  .tab.active:hover { color: var(--brand); border-bottom-color: var(--accent); }
}

.site-main { flex: 1; width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 32px); }

/* ---------- Shared ---------- */
.screen { animation: fadeUp 0.5s ease both; }
.eyebrow { font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.btn-primary { padding: 12px 20px; font-size: 14px; font-weight: 700; background: var(--brand); color: var(--ob-text); border: none; border-radius: 10px; cursor: pointer; }
.btn-primary:hover { background: var(--accent); }

/* ---------- Home ---------- */
.home { position: relative; padding: clamp(56px, 9vw, 110px) 0 clamp(48px, 7vw, 80px); }
.home-decor { position: absolute; inset: -120px 0 0 0; overflow: hidden; pointer-events: none; }
.home-decor-glow { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: min(960px, 100%); height: 480px; background: radial-gradient(closest-side, rgba(166, 38, 57, 0.10), transparent 72%); }
/* Wave marks at the ≈ glyphs' exact opacity (was rgba(110,20,35,0.05)). */
.home-decor-wave { position: absolute; opacity: 0.05; user-select: none; }
.home-decor-wave.tl { top: 150px; left: -40px; width: clamp(120px, 18vw, 240px); }
.home-decor-wave.br { bottom: 0; right: -30px; width: clamp(80px, 10vw, 150px); transform: rotate(12deg); }
.hero { position: relative; max-width: 720px; margin: 0 auto; text-align: center; }
.hero-eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 7px 16px; border: 1px solid #E0C7B4; border-radius: 999px; background: rgba(255, 253, 249, 0.7); font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); margin-bottom: 24px; }
.hero-eyebrow-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.hero h1 { font-family: 'Young Serif', serif; font-size: clamp(34px, 6vw, 60px); line-height: 1.06; letter-spacing: -0.015em; margin: 0 0 18px; text-wrap: balance; }
.hero-sub { font-size: clamp(16px, 2vw, 18.5px); line-height: 1.6; color: var(--muted); margin: 0 auto 36px; max-width: 56ch; text-wrap: pretty; }
.search-wrap { position: relative; text-align: left; max-width: 640px; margin: 0 auto; }
.search-wrap form { position: relative; }
.search-input { width: 100%; padding: 21px clamp(112px, 20vw, 150px) 21px clamp(18px, 4vw, 26px); font-size: 17px; font-family: 'Karla', sans-serif; border: 1.5px solid var(--border-2); border-radius: 999px; background: var(--card); color: var(--text); outline: none; box-shadow: 0 10px 34px rgba(61, 18, 25, 0.10); }
.search-input:focus { border-color: var(--accent); box-shadow: 0 10px 34px rgba(166, 38, 57, 0.16); }
.search-btn { position: absolute; right: 7px; top: 7px; bottom: 7px; padding: 0 clamp(16px, 3vw, 24px); font-size: 15px; font-weight: 700; background: var(--brand); color: var(--ob-text); border: none; border-radius: 999px; cursor: pointer; }
.search-btn:hover { background: var(--accent); }
.hero-stats { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px clamp(24px, 4vw, 44px); margin-top: 36px; }
.hero-stat { display: flex; align-items: baseline; gap: 8px; }
/* One row at reduced size while it physically fits (needs ~470px of content
   width); below that no readable size holds the row, so switch to three
   stat tiles (number over label). */
@media (max-width: 700px) {
  .hero-stats { gap: 8px 18px; margin-top: 28px; }
  .hero-stat-num { font-size: 17px; }
  .hero-stat-label { font-size: 12px; }
}
@media (max-width: 520px) {
  .hero-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 10px; align-items: start; }
  .hero-stat { flex-direction: column; align-items: center; gap: 3px; text-align: center; }
  .hero-stat-num { font-size: 18px; }
  .hero-stat-label { font-size: 11px; line-height: 1.3; }
}
.hero-stat-num { font-family: 'Young Serif', serif; font-size: 20px; color: var(--brand); }
.hero-stat-label { font-size: 13.5px; font-weight: 500; color: var(--soft); }
.suggestions { position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 30; background: var(--card); border: 1.5px solid var(--border-2); border-radius: 14px; overflow: hidden; box-shadow: 0 12px 32px rgba(61, 18, 25, 0.12); }
.suggestion { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; width: 100%; padding: 14px 20px; background: none; border: none; border-bottom: 1px solid var(--tint); text-align: left; cursor: pointer; }
.suggestion:hover { background: #F7EDDD; }
.suggestion-name { font-weight: 700; font-size: 15.5px; color: var(--text); }
.suggestion-meta { font-size: 13.5px; color: var(--soft); }
.suggestion-price { font-size: 14px; font-weight: 700; color: var(--brand); flex-shrink: 0; }

.trending { max-width: 980px; margin: clamp(56px, 8vw, 88px) auto 0; }
.trending .eyebrow { margin-bottom: 20px; }
.trending-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 16px; }
.trending-card { text-decoration: none; color: inherit; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 22px 22px 20px; background: var(--card); border: 1.5px solid var(--border); border-radius: 16px; text-align: left; cursor: pointer; transition: border-color 0.15s, transform 0.15s; }
.trending-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.trending-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; width: 100%; }
.trending-titles { display: flex; flex-direction: column; gap: 6px; }
.trending-name { font-family: 'Young Serif', serif; font-size: 18px; color: var(--text); line-height: 1.25; }
.trending-meta { font-size: 13.5px; color: var(--soft); }
.trending-bottle { width: 46px; height: 108px; object-fit: contain; object-position: center bottom; flex-shrink: 0; filter: drop-shadow(0 6px 10px rgba(61, 18, 25, 0.18)); }
.trending-bottom { display: flex; align-items: baseline; justify-content: space-between; width: 100%; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--tint); }
.trending-prices { display: flex; align-items: baseline; gap: 8px; }
.trending-was { font-size: 13.5px; color: var(--brand); text-decoration: line-through; text-decoration-color: var(--faint); }
.trending-from { font-weight: 700; font-size: 16px; color: var(--brand); }
.trending-cta { font-size: 13.5px; font-weight: 700; color: var(--accent); }

.how { background: linear-gradient(150deg, #7A1B2C 0%, #6E1423 45%, #57101C 100%); border-radius: 28px; padding: clamp(40px, 6vw, 64px) clamp(24px, 5vw, 56px); margin-bottom: clamp(48px, 7vw, 80px); box-shadow: 0 24px 60px rgba(61, 18, 25, 0.18); }
.how-top { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(24px, 4vw, 48px); margin-bottom: 44px; }
.how-intro { flex: 1 1 320px; min-width: min(100%, 320px); }
.how-intro h2 { font-family: 'Young Serif', serif; font-size: clamp(24px, 4vw, 36px); color: var(--ob-text); margin: 0 0 12px; text-wrap: balance; }
.how-intro p { font-size: 16px; color: var(--ob-accent); margin: 0; max-width: 52ch; }
.how-photo { flex: 1 1 340px; min-width: min(100%, 340px); max-width: 480px; width: 100%; height: auto; border-radius: 16px; display: block; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35); }
.how-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: clamp(16px, 2.5vw, 24px); }
.how-step { background: var(--ob-card); border: 1px solid var(--ob-border); border-radius: 18px; padding: 28px 26px; }
.how-step-num { font-family: 'Young Serif', serif; font-size: 36px; color: var(--ob-accent); margin-bottom: 16px; }
.how-step h3 { font-family: 'Young Serif', serif; font-size: 20px; color: var(--ob-text); margin: 0 0 10px; }
.how-step p { font-size: 15px; line-height: 1.6; color: var(--ob-muted); margin: 0; text-wrap: pretty; }

/* ---------- Analyzing ---------- */
.analyzing { min-height: 62vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 48px 0; animation: fadeUp 0.4s ease both; }
.spinner-wrap { position: relative; width: 76px; height: 76px; margin-bottom: 32px; }
.spinner-ring { position: absolute; inset: 0; border-radius: 50%; border: 4px solid var(--border); border-top-color: var(--accent); animation: spin 0.9s linear infinite; }
.spinner-glyph { position: absolute; inset: 0; display: grid; place-items: center; }
.spinner-wave { width: 32px; display: block; }
.analyzing-eyebrow { font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--soft); margin-bottom: 10px; }
.analyzing-msg { font-family: 'Young Serif', serif; font-size: clamp(22px, 3.5vw, 30px); color: var(--text); animation: pulse 1.3s ease-in-out infinite; }
.analyzing-sub { font-size: 14px; color: var(--soft); margin: 18px 0 0; }

/* ---------- Price report ---------- */
/* Deliberately quiet: it sits under the price note as an admission that a
   number might be wrong, not as a call to action competing with the dupe. */
.price-report { margin: 22px 0 0; font-size: 14px; }
.price-report > summary { display: inline-block; color: var(--soft); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.price-report > summary:hover { color: var(--accent); }
.price-report[open] > summary { margin-bottom: 14px; color: var(--text); }
.price-report-form { max-width: 420px; padding: 18px 20px; background: var(--card); border: 1.5px solid var(--border); border-radius: 14px; }
.price-report-intro { margin: 0 0 14px; font-size: 13.5px; color: var(--soft); }
.price-report-field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; }
.price-report-field > span { font-size: 12.5px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--soft); }
.price-report-field select,
.price-report-field input { width: 100%; padding: 10px 12px; font-family: 'Karla', sans-serif; font-size: 16px; color: var(--text); background: var(--bg); border: 1.5px solid var(--border-2); border-radius: 10px; }
.price-report-btn { padding: 10px 18px; font-size: 14px; font-weight: 700; background: var(--brand); color: var(--ob-text); border: none; border-radius: 10px; cursor: pointer; }
.price-report-btn:hover { background: var(--accent); }
.price-report-done { margin: 22px 0 0; font-size: 14px; color: var(--soft); }

/* ---------- Browse categories ---------- */
/* The section banner carries its heading and sub-line as artwork, in both
   locales. Below 720px that baked-in type is too small to read, so the banner
   drops out and the real heading takes over. Above it the heading stays in
   the DOM but is clipped rather than display:none — screen readers and
   crawlers still get it, they just do not see it twice. */
.cat-banner { display: none; }
@media (min-width: 720px) {
  .cat-banner { display: block; width: 100%; height: auto; border-radius: 16px; margin-bottom: 26px; }
  .cat-block > .cat-head,
  .cat-block > .cat-head-sub { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
}
.cat-block { margin-bottom: clamp(40px, 6vw, 64px); }
.cat-block:last-child { margin-bottom: 0; }
.cat-head { font-family: 'Young Serif', serif; font-size: clamp(20px, 2.6vw, 26px); margin: 0 0 6px; }
.cat-head-sub { font-size: 15px; color: var(--soft); margin: 0 0 22px; text-wrap: pretty; }
.cat-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 16px; }
.cat-card { text-decoration: none; color: inherit; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; height: 100%; padding: 22px 22px 20px; background: var(--card); border: 1.5px solid var(--border); border-radius: 16px; cursor: pointer; transition: border-color 0.15s, transform 0.15s; }
.cat-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.cat-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; width: 100%; }
.cat-titles { display: flex; flex-direction: column; gap: 6px; }
.cat-name { font-family: 'Young Serif', serif; font-size: 18px; color: var(--text); line-height: 1.25; }
.cat-meta { font-size: 13.5px; color: var(--soft); }
.cat-bottle { width: 40px; height: 92px; object-fit: contain; object-position: center bottom; flex-shrink: 0; filter: drop-shadow(0 6px 10px rgba(61, 18, 25, 0.18)); }
.cat-bottom { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; width: 100%; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--tint); }
.cat-save { font-weight: 700; font-size: 15px; color: var(--brand); }
.cat-cta { font-size: 13.5px; font-weight: 700; color: var(--accent); white-space: nowrap; }
.results-cat { margin: 26px 0 0; font-size: 14px; font-weight: 700; }
.results-cat a { color: var(--accent); text-decoration: none; }
.results-cat a:hover { text-decoration: underline; }

/* ---------- Results ---------- */
.results { padding: clamp(36px, 5vw, 56px) 0 clamp(48px, 7vw, 72px); }
.results h1 { font-family: 'Young Serif', serif; font-size: clamp(26px, 4.2vw, 40px); margin: 0 0 8px; text-wrap: pretty; }
.results-sub { font-size: 16px; color: var(--muted); margin: 0 0 40px; }
.btn-on-burgundy { padding: 12px 20px; font-size: 14px; font-weight: 700; background: var(--bg); color: var(--brand); border: none; border-radius: 10px; cursor: pointer; }
.btn-on-burgundy:hover { background: var(--tint); }
.btn-on-burgundy-ghost { padding: 12px 20px; font-size: 14px; font-weight: 700; background: transparent; color: var(--ob-text); border: 1.5px solid var(--ob-border); border-radius: 10px; cursor: pointer; }
.btn-on-burgundy-ghost:hover { border-color: var(--ob-accent); }
.results .eyebrow { margin-bottom: 18px; }
.dupe-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.dupe-row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; background: var(--card); border: 1.5px solid var(--border); border-radius: 16px; padding: 20px 22px; }
.match-pill { background: var(--tint); color: var(--brand); font-weight: 700; font-size: 12.5px; padding: 8px 14px; border-radius: 999px; flex-shrink: 0; white-space: nowrap; }
.dupe-mid { flex: 1; min-width: 200px; }
.dupe-name { font-family: 'Young Serif', serif; font-size: 18px; margin-bottom: 3px; }
.dupe-meta { font-size: 13.5px; color: var(--muted); }
.dupe-pricing { text-align: right; flex-shrink: 0; }
.dupe-price { font-weight: 700; font-size: 17px; color: var(--text); }
.dupe-save { font-size: 13px; font-weight: 700; color: var(--accent); }
.dupe-actions { display: flex; gap: 8px; flex-shrink: 0; }
.btn-compare { display: inline-block; padding: 10px 16px; font-size: 13.5px; font-weight: 700; background: var(--brand); color: var(--ob-text); border: none; border-radius: 10px; cursor: pointer; text-decoration: none; text-align: center; }
.btn-compare:hover, a.btn-compare:hover { background: var(--accent); color: var(--ob-text); }
.btn-save { padding: 10px 16px; font-size: 13.5px; font-weight: 700; background: none; color: var(--brand); border: 1.5px solid var(--border-2); border-radius: 10px; cursor: pointer; }
.btn-save:hover { border-color: var(--accent); }

/* ---------- Detail ---------- */
.detail { padding: clamp(32px, 5vw, 48px) 0 clamp(48px, 7vw, 72px); max-width: 880px; margin: 0 auto; }
.back-link { background: none; border: none; padding: 0; font-size: 14px; font-weight: 700; color: var(--brand); cursor: pointer; margin-bottom: 24px; display: inline-block; text-decoration: none; }
.back-link:hover { color: var(--accent); }
.detail h1 { font-family: 'Young Serif', serif; font-size: clamp(26px, 4vw, 36px); margin: 0 0 8px; text-wrap: pretty; }
.detail .results-sub { margin-bottom: 32px; }
/* Splurge/steal comparison: 50/50 seamed grid with a circular match badge
   over the seam (design-assets-src/detail-comparison-card.md). Never stacks;
   type/padding scale via clamp. Bottles sit on the outer edges (ours). */
.compare-wrap { position: relative; margin-bottom: 40px; }
.compare-grid { position: relative; display: grid; grid-template-columns: 1fr 1fr; border-radius: 18px; border: 1.5px solid var(--border); }
.compare-panel.splurge { border-radius: 16.5px 0 0 16.5px; }
.compare-panel.steal { border-radius: 0 16.5px 16.5px 0; }
.compare-panel { display: flex; gap: 10px; align-items: stretch; }
.compare-panel.splurge { background: var(--card); padding: clamp(16px, 3vw, 24px) clamp(40px, 6vw, 48px) clamp(18px, 3vw, 26px) clamp(14px, 3vw, 24px); }
.compare-panel.steal { background: var(--brand); color: var(--ob-text); padding: clamp(16px, 3vw, 24px) clamp(14px, 3vw, 24px) clamp(18px, 3vw, 26px) clamp(40px, 6vw, 48px); }
.compare-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.compare-label { font-size: clamp(10.5px, 1.6vw, 12px); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--soft); margin-bottom: 4px; }
.compare-label-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.compare-label-row .compare-label { margin-bottom: 0; }
.tier-pill { background: var(--bg); color: var(--brand); font-size: 11.5px; font-weight: 700; padding: 4px 11px; border-radius: 999px; white-space: nowrap; flex-shrink: 0; text-decoration: none; }
.tier-pill:hover { background: var(--tint); text-decoration: underline; }
/* Tier headings on /tiers/ echo the comparison-card pill (tint-on-cream variant). */
.tier-head { line-height: 1; }
.tier-pill-static { display: inline-block; background: var(--tint); color: var(--brand); font-family: 'Karla', sans-serif; font-size: 14px; font-weight: 700; padding: 8px 16px; border-radius: 999px; }
.compare-panel.steal .compare-label { color: var(--ob-accent); }
.compare-name { font-family: 'Young Serif', serif; font-size: clamp(15px, 2.4vw, 20px); line-height: 1.25; }
.compare-meta { font-size: clamp(12px, 1.8vw, 13.5px); color: var(--soft); }
.compare-panel.steal .compare-meta { color: var(--ob-muted); }
.compare-price { font-weight: 700; font-size: clamp(17px, 2.6vw, 20px); color: var(--text); margin-top: auto; padding-top: 10px; }
.compare-panel.steal .compare-price { color: var(--ob-text); }
.compare-price-row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-top: auto; padding-top: 10px; }
.compare-price-row .compare-price { margin-top: 0; padding-top: 0; }
.compare-save { font-size: clamp(11.5px, 1.7vw, 13px); font-weight: 700; color: var(--ob-accent); }
.compare-bottle { height: clamp(56px, 10vw, 92px); align-self: center; object-fit: contain; flex-shrink: 0; filter: drop-shadow(0 4px 8px rgba(61, 18, 25, 0.2)); }
/* Results variant: same seamed card, richer steal panel (why + actions). */
.results-compare { margin-bottom: clamp(48px, 6vw, 64px); }
.results-compare .compare-bottle { height: clamp(64px, 12vw, 130px); }
.compare-card { position: relative; }
@media (max-width: 560px) {
  [data-view-mobile] { cursor: pointer; }
}
/* On small phones the buttons leave the steal panel for a full-width row
   below the card, so the bottles keep their room. */
.compare-actions-below { display: none; }
@media (max-width: 560px) {
  .results-compare .compare-text .compare-actions { display: none; }
  .compare-actions-below { display: flex; gap: 10px; margin-top: 12px; }
  /* Equal halves: the transparent border matches the outline button's, so
     both flex items start from the same border-box base (flex-basis: 0). */
  .compare-actions-below button { flex: 1 1 0; }
  .compare-actions-below .btn-compare { border: 1.5px solid transparent; }
}
.compare-why { font-size: clamp(12px, 1.8vw, 14px); line-height: 1.5; color: var(--ob-muted); margin-top: 4px; text-wrap: pretty; }
.compare-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.compare-badge { position: absolute; z-index: 2; top: 50%; left: 50%; transform: translate(-50%, -50%); width: clamp(40px, 6vw, 50px); height: clamp(40px, 6vw, 50px); border-radius: 50%; background: var(--bg); border: 1.5px solid var(--border); display: grid; place-items: center; box-shadow: 0 6px 18px rgba(61, 18, 25, 0.15); }
@media (max-width: 640px) {
  .compare-grid { grid-template-columns: 1fr; }
  .compare-panel.splurge { border-radius: 16.5px 16.5px 0 0; padding: clamp(16px, 3vw, 24px) clamp(14px, 3vw, 24px) 28px; }
  .compare-panel.steal { border-radius: 0 0 16.5px 16.5px; padding: 28px clamp(14px, 3vw, 24px) clamp(18px, 3vw, 26px); }
  .compare-badge { position: relative; left: auto; top: auto; transform: none; margin: -14px auto; }
}
.compare-badge-wave { width: clamp(18px, 2.6vw, 22px); display: block; }
.detail h2 { font-family: 'Young Serif', serif; font-size: 22px; margin: 0 0 24px; }
.dims { display: flex; flex-direction: column; gap: 22px; margin-bottom: 44px; }
.dim-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.dim-label { font-weight: 700; font-size: 14.5px; }
.dim-note { font-size: 13px; color: var(--soft); }
.dim-track { height: 12px; background: var(--tint); border-radius: 999px; overflow: hidden; }
.dim-track.splurge { margin-bottom: 6px; }
.dim-fill { height: 100%; border-radius: 999px; }
.dim-fill.splurge { background: var(--border-2); }
.dim-fill.steal { background: var(--accent); }
.detail h2.tight { margin-bottom: 16px; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 44px; }
.chip { padding: 9px 16px; border: 1.5px solid var(--border-2); border-radius: 999px; font-size: 14px; font-weight: 500; color: var(--muted); background: var(--card); }
.detail h2.grab { margin-bottom: 8px; }
.grab-intro { font-size: 14.5px; color: var(--muted); margin: 0 0 16px; }
.grab-intro strong { font-weight: 700; color: var(--brand); }
.retailers { display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px; }
.retailer-link { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 20px; background: var(--card); border: 1.5px solid var(--border); border-radius: 14px; text-decoration: none; color: var(--text); transition: border-color 0.15s; }
.retailer-link:hover { border-color: var(--accent); color: var(--text); }
.retailer-store { font-weight: 700; font-size: 15px; }
.retailer-note { font-size: 13.5px; color: var(--soft); }
.retailer-cta { font-size: 13.5px; font-weight: 700; color: var(--accent); flex-shrink: 0; }
.indicative-note { font-size: 13px; color: var(--soft); margin: 0 0 36px; }
.btn-save-big { padding: 15px 28px; font-size: 15px; font-weight: 700; background: var(--brand); color: var(--ob-text); border: none; border-radius: 12px; cursor: pointer; }
.btn-save-big:hover { background: var(--accent); }

/* ---------- Cellar ---------- */
.cellar { padding: clamp(36px, 5vw, 56px) 0 clamp(48px, 7vw, 72px); max-width: 880px; margin: 0 auto; }
.cellar h1 { font-family: 'Young Serif', serif; font-size: clamp(26px, 4.2vw, 38px); margin: 0 0 8px; }
.cellar-sub { font-size: 16px; color: var(--muted); margin: 0 0 36px; }
.cellar-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; margin-bottom: 28px; }
.cellar-row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; background: var(--card); border: 1.5px solid var(--border); border-radius: 16px; padding: 20px 22px; }
.cellar-mid { flex: 1; min-width: 220px; }
.cellar-struck { font-size: 13.5px; color: var(--soft); margin-bottom: 4px; }
.cellar-struck span { text-decoration: line-through; }
.cellar-pair { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.cellar-approx { font-family: 'Young Serif', serif; font-size: 18px; color: var(--brand); }
.cellar-dupe-name { font-family: 'Young Serif', serif; font-size: 18px; }
.cellar-dupe-price { font-weight: 700; font-size: 15px; color: var(--brand); }
.pocketed-pill { background: var(--tint); color: var(--brand); font-size: 12.5px; font-weight: 700; padding: 6px 12px; border-radius: 999px; flex-shrink: 0; }
.cellar-actions { display: flex; gap: 8px; flex-shrink: 0; }
.btn-view { padding: 10px 16px; font-size: 13.5px; font-weight: 700; background: var(--brand); color: var(--ob-text); border: none; border-radius: 10px; cursor: pointer; }
.btn-view:hover { background: var(--accent); }
.btn-remove { padding: 10px 14px; font-size: 13.5px; font-weight: 700; background: none; color: var(--soft); border: 1.5px solid var(--border); border-radius: 10px; cursor: pointer; }
.btn-remove:hover { border-color: var(--accent); color: var(--accent); }
.cellar-total { font-family: 'Young Serif', serif; font-size: 19px; color: var(--brand); }
.cellar-empty { text-align: center; padding: clamp(40px, 8vw, 72px) 20px; border: 1.5px dashed var(--border-2); border-radius: 20px; }
.cellar-empty-approx { font-family: 'Young Serif', serif; font-size: 48px; color: var(--border-2); margin-bottom: 12px; }
.cellar-empty-title { font-family: 'Young Serif', serif; font-size: 22px; margin-bottom: 8px; }
.cellar-empty-sub { font-size: 15px; color: var(--muted); margin: 0 0 24px; }
.btn-cta { padding: 13px 24px; font-size: 15px; font-weight: 700; background: var(--brand); color: var(--ob-text); border: none; border-radius: 12px; cursor: pointer; }
.btn-cta:hover { background: var(--accent); color: var(--ob-text); }  /* beats the global a:hover on link-styled CTAs */

/* ---------- Settings ---------- */
.settings { padding: clamp(36px, 5vw, 56px) 0 clamp(48px, 7vw, 72px); max-width: 640px; margin: 0 auto; }
.settings h1 { font-family: 'Young Serif', serif; font-size: clamp(26px, 4.2vw, 38px); margin: 0 0 8px; }
.settings-sub { font-size: 16px; color: var(--muted); margin: 0 0 40px; }
.settings-block { margin-bottom: 40px; }
.settings-block.ruled { padding-top: 32px; border-top: 1px solid var(--border); }
.settings-label { font-weight: 700; font-size: 15px; margin-bottom: 6px; }
.settings-desc { font-size: 14px; color: var(--soft); margin: 0 0 14px; }
.currency-row { display: flex; gap: 10px; }
.btn-currency { padding: 12px 22px; font-size: 15px; font-weight: 700; background: transparent; color: var(--muted); border: 1.5px solid var(--border-2); border-radius: 12px; cursor: pointer; }
.btn-currency.active { background: var(--brand); color: var(--ob-text); border-color: var(--brand); }
.btn-empty-cellar { padding: 12px 20px; font-size: 14px; font-weight: 700; background: none; color: var(--accent); border: 1.5px solid var(--border-2); border-radius: 12px; cursor: pointer; }
.btn-empty-cellar:hover { border-color: var(--accent); }
.settings-legal { padding-top: 32px; border-top: 1px solid var(--border); font-size: 13px; color: var(--soft); line-height: 1.6; }

/* ---------- Imprint ---------- */
.imprint { padding: clamp(36px, 5vw, 56px) 0 clamp(48px, 7vw, 72px); max-width: 720px; margin: 0 auto; }
.imprint h1 { font-family: 'Young Serif', serif; font-size: clamp(26px, 4.2vw, 38px); margin: 0 0 8px; }
.imprint-sub { font-size: 16px; color: var(--muted); margin: 0 0 40px; }
.imprint-body { display: flex; flex-direction: column; gap: 30px; font-size: 15.5px; line-height: 1.65; color: var(--muted); }
.imprint-body h2 { font-family: 'Young Serif', serif; font-size: 19px; color: var(--text); margin: 0 0 8px; }
.imprint-body p { margin: 0; }
.imprint-body p + p { margin-top: 8px; }
.imprint-fine { font-size: 13px; color: var(--soft); margin-top: 8px; }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--border); padding: 20px clamp(20px, 4vw, 32px); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px 16px; font-size: 13px; color: var(--soft); }
.footer-logo { font-family: 'Young Serif', serif; font-size: 15px; color: var(--brand); }
.footer-logo span { color: var(--soft); }
.footer-right { display: flex; align-items: center; gap: 16px; }
.footer-right a { color: var(--soft); text-decoration: underline; white-space: nowrap; }
.footer-age { border: 1.5px solid var(--soft); border-radius: 6px; padding: 1px 6px; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; color: var(--soft); flex-shrink: 0; }
/* Narrow screens: logo, then a links row, then the © line — no mid-link or
   mid-sentence wrapping. */
@media (max-width: 600px) {
  .site-footer { flex-direction: column; align-items: flex-start; gap: 10px; }
  .footer-right { flex-wrap: wrap; gap: 6px 16px; }
  .footer-right .footer-copy { width: 100%; }
}

/* ---------- Mobile hit targets ---------- */
@media (max-width: 640px), (pointer: coarse) {
  .tab, .suggestion, .btn-primary, .btn-on-burgundy, .btn-on-burgundy-ghost,
  .btn-compare, .btn-save, .btn-view, .btn-remove, .btn-cta, .btn-currency,
  .btn-empty-cellar, .btn-save-big, .retailer-link, .back-link { min-height: 44px; }
}


/* ---------- Review round: a11y, search states, header search ---------- */
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--brand); color: var(--ob-text); padding: 10px 18px; border-radius: 0 0 10px 0; font-weight: 700; font-size: 14px; text-decoration: none; }
.skip-link:focus { left: 0; color: var(--ob-text); }

.site-footer a { display: inline-block; padding: 5px 0; }

.search-empty { padding-bottom: 4px; }
.search-empty-title { font-family: 'Young Serif', serif; font-size: 16px; color: var(--text); padding: 14px 20px 2px; }
.search-empty-sub { font-size: 13px; color: var(--muted); padding: 0 20px 8px; }
.search-empty-browse { display: block; padding: 12px 20px; font-size: 13.5px; font-weight: 700; color: var(--accent); text-decoration: none; }
.search-empty-browse:hover { color: var(--accent); text-decoration: underline; }
.wishlist-form { border-top: 1px solid var(--tint); padding: 12px 20px 16px; }
.wishlist-title { font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 8px; }
.wishlist-row { display: flex; gap: 8px; }
.wishlist-email { flex: 1; min-width: 0; padding: 9px 12px; border: 1px solid var(--border); border-radius: 8px; font: inherit; font-size: 13.5px; background: var(--bg); color: var(--text); }
.wishlist-email::placeholder { color: var(--soft); }
.wishlist-btn { padding: 9px 16px; border: none; border-radius: 8px; background: var(--brand); color: var(--ob-text); font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; flex-shrink: 0; }
.wishlist-btn:hover { background: var(--accent); }
.wishlist-done { border-top: 1px solid var(--tint); padding: 14px 20px; font-size: 13.5px; font-weight: 700; color: var(--accent); }

.header-search { position: relative; flex: 0 1 220px; min-width: 140px; }
.header-lang { display: none; gap: 2px; border: 1.5px solid var(--border); border-radius: 999px; padding: 2px; }
.is-home .header-lang { display: inline-flex; }
.header-lang a { padding: 4px 11px; font-size: 12.5px; font-weight: 700; border-radius: 999px; color: var(--soft); text-decoration: none; }
.header-lang a.active { background: var(--brand); color: var(--ob-text); }
.is-home .header-search { display: none; }
.header-search-input { width: 100%; padding: 8px 14px; font-size: 16px; font-family: 'Karla', sans-serif; border: 1.5px solid var(--border-2); border-radius: 999px; background: var(--card); color: var(--text); outline: none; }
.header-search-input:focus { border-color: var(--accent); }
.header-search .suggestions { top: calc(100% + 6px); }
.header-search #hs-box { position: absolute; left: 0; right: 0; z-index: 45; min-width: min(320px, 80vw); }
@media (max-width: 600px) {
  .header-search { flex-basis: 100%; order: 3; }
}

.dims-legend { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: -10px 0 18px; font-size: 13px; color: var(--muted); }
.dims-legend-item { display: inline-flex; align-items: center; gap: 7px; }
.dims-swatch { width: 12px; height: 12px; border-radius: 3px; flex-shrink: 0; }
.dims-swatch.splurge { background: var(--border-2); }
.dims-swatch.steal { background: var(--accent); }
.dim-note strong { color: var(--text); font-weight: 700; }

.price-note { font-size: 12.5px; color: var(--soft); margin: 10px 2px 0; }
.dupe-why { font-size: 12.5px; color: var(--soft); margin-top: 3px; font-style: italic; }
.dims-note { font-size: 12.5px; color: var(--soft); margin: -30px 0 40px; }
.compare-mini-dims { display: flex; flex-direction: column; gap: 5px; margin: 8px 0 2px; max-width: 220px; }
/* Grid, not flex: a flex label can never shrink below its own text, so
   SWEETNESS (the longest of the five) pushed its own track out of line. */
.mini-dim { display: grid; grid-template-columns: 70px 1fr; align-items: center; gap: 8px; }
.mini-dim-label { font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--soft); }
.mini-dim-track { height: 5px; background: var(--tint); border-radius: 999px; overflow: hidden; }
.mini-dim-fill { display: block; height: 100%; background: var(--brand); border-radius: 999px; }
.btn-bought { padding: 10px 14px; font-size: 13.5px; font-weight: 700; background: none; color: var(--brand); border: 1.5px solid var(--border-2); border-radius: 10px; cursor: pointer; white-space: nowrap; }
.btn-bought.active { background: var(--brand); color: var(--ob-text); border-color: var(--brand); }
.pocketed-pill.pending { background: none; border: 1.5px dashed var(--border-2); color: var(--soft); }
.cellar .btn-empty-cellar { margin-top: 20px; }
.footer-currency { display: inline-flex; gap: 2px; border: 1.5px solid var(--border); border-radius: 8px; padding: 2px; }
.footer-cur { padding: 3px 8px; font: inherit; font-size: 11.5px; font-weight: 700; background: none; border: none; border-radius: 6px; color: var(--soft); cursor: pointer; }
.footer-cur.active { background: var(--brand); color: var(--ob-text); }

.lateral { margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--border); }
.lateral-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.lateral-links a { font-size: 14.5px; font-weight: 700; }
.lateral-line { font-size: 14.5px; color: var(--muted); line-height: 1.7; margin: 0; }

/* 404 */
.notfound { text-align: center; padding: clamp(48px, 10vw, 96px) 20px; }
.notfound-glyph { width: clamp(64px, 10vw, 96px); opacity: 0.35; margin-bottom: 18px; }
.notfound h1 { font-family: 'Young Serif', serif; font-size: clamp(26px, 4vw, 38px); margin: 0 0 10px; }
.notfound p { font-size: 16px; color: var(--muted); margin: 0 0 26px; }
.notfound-links { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }

/* Respect the OS motion preference (the analyzing theater is skipped in JS). */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}