/* Shelfdrop - site styles (v2, October 2026) */

:root {
  --ink: #0a0f0c;
  --ink-2: #121a15;
  --forest: #13261a;
  --forest-2: #1b3424;
  --forest-3: #24452f;
  --lime: #cdf25c;
  --lime-deep: #b4df34;
  --lime-rgb: 205, 242, 92;
  --cream: #f1ede2;
  --paper: #f8f6f0;
  --white: #ffffff;

  /* Blue accent (Oct 2026): a hint only, lime stays the brand colour. #3563e9 is George's royal blue. */
  --blue: #3563e9;          /* lines, bars, borders, fills; text on paper 4.72, white 5.11 */
  --blue-text: var(--blue); /* blue text; cream surfaces swap it for --blue-cream (4.82 on cream) */
  --blue-cream: #305ddc;
  --blue-tint: #eff3fe;     /* chip wash; --blue on it 4.60 */
  --blue-on-dark: #8fb0ff;  /* blue on ink 9.04, ink-2 8.29 */

  --text: #0f1712;
  --text-muted: #5b655e;
  --line: rgba(10, 15, 12, 0.16);

  --on-dark: #f3f5ef;
  --on-dark-muted: #9aa89e;
  --line-dark: rgba(243, 245, 239, 0.16);

  --font-display: "Archivo", "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --radius: 4px;
  --radius-sm: 3px;
  --max: 1400px;
  --gutter: clamp(18px, 4vw, 56px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: hidden; }  /* iOS Safari pans sideways unless the root clips too */
body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: visible;
  overflow-x: clip;  /* clip, not hidden: with html clipping, hidden would make body a scroll box and break the sticky bars */
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
::selection { background: var(--lime); color: var(--ink); }

/* ---------- Type ---------- */
h1, h2, h3, h4 { margin: 0 0 0.5em; text-wrap: balance; }
h1, h2 {
  font-family: var(--font-display);
  font-stretch: 75%;
  font-weight: 800;
  text-transform: uppercase;
  line-height: 0.9;
  letter-spacing: 0;
}
h1 { font-size: clamp(58px, 10vw, 160px); }
h2 { font-size: clamp(44px, 6.4vw, 96px); }
h3 { font-family: var(--font-display); font-weight: 700; font-size: clamp(20px, 1.8vw, 24px); line-height: 1.15; letter-spacing: -0.015em; }
h4 { font-family: var(--font-display); font-weight: 700; font-size: 17px; line-height: 1.3; }

.display { font-family: var(--font-display); font-stretch: 75%; font-weight: 800; text-transform: uppercase; line-height: 0.9; }

.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }

.section { padding: clamp(80px, 11vw, 160px) 0; }
.section--tight { padding: clamp(48px, 7vw, 88px) 0; }
.section--dark { background: var(--ink); color: var(--on-dark); }
.section--ink { background: var(--ink); color: var(--on-dark); }
.section--forest { background: var(--forest); color: var(--on-dark); }
.section--cream { background: var(--cream); }
.section--lime { background: var(--lime); color: var(--ink); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 22px;
}
.eyebrow::before { content: ""; width: 10px; height: 10px; background: var(--lime); border: 1px solid rgba(10,15,12,.25); }
.section--dark .eyebrow, .section--ink .eyebrow, .section--forest .eyebrow, .hero .eyebrow { color: var(--on-dark-muted); }
.section--dark .eyebrow::before, .section--ink .eyebrow::before, .section--forest .eyebrow::before, .hero:not(.hero--lime) .eyebrow::before { border-color: transparent; }
.section--lime .eyebrow, .hero--lime .eyebrow { color: rgba(10,15,12,.7); }
.section--lime .eyebrow::before, .hero--lime .eyebrow::before { background: var(--ink); border-color: var(--ink); }

.lede { font-size: clamp(18px, 1.5vw, 22px); line-height: 1.5; color: var(--text-muted); max-width: 46ch; }
.section--dark .lede, .section--ink .lede, .section--forest .lede, .hero:not(.hero--lime) .lede { color: var(--on-dark-muted); }
.section--lime .lede, .hero--lime .lede { color: rgba(10,15,12,.78); }

.hl { color: var(--lime); }
.hero--lime .hl, .section--lime .hl { color: var(--white); }
.hl-mark { background: linear-gradient(transparent 60%, var(--lime) 60%); padding: 0 .04em; }
.hl-outline { color: transparent; -webkit-text-stroke: 2px currentColor; }
.section--dark .hl-outline, .section--ink .hl-outline { -webkit-text-stroke-color: var(--lime); }
.hero--lime .hl-outline, .section--lime .hl-outline { -webkit-text-stroke-color: var(--ink); }

.section-head { display: grid; gap: 24px; margin-bottom: clamp(40px, 6vw, 72px); }
@media (min-width: 900px) {
  .section-head--split { grid-template-columns: 1.3fr 1fr; align-items: end; gap: 64px; }
  .section-head--split h2 { margin-bottom: 0; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 26px;
  border-radius: 999px;
  font-family: var(--font-display);
  font-stretch: 85%;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform .15s ease, background .15s ease, border-color .15s ease, color .15s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.btn--primary { background: var(--lime); color: var(--ink); }
.btn--primary:hover { background: var(--white); }
.btn--dark { background: var(--ink); color: var(--white); }
.btn--dark:hover { background: var(--forest-3); }
.btn--ghost { border-color: var(--line-dark); color: var(--on-dark); background: transparent; }
.btn--ghost:hover { border-color: var(--on-dark); }
.btn--outline { border-color: var(--line); color: var(--text); background: transparent; }
.btn--outline:hover { border-color: var(--text); }
.hero--lime .btn--outline, .section--lime .btn--outline, .cta-band .btn--outline { border-color: rgba(10,15,12,.35); color: var(--ink); }
.hero--lime .btn--outline:hover, .section--lime .btn--outline:hover, .cta-band .btn--outline:hover { border-color: var(--ink); }
.btn .arrow { transition: transform .15s ease; }
.btn:hover .arrow { transform: translateX(3px); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--ink); border-bottom: 1px solid var(--line-dark); color: var(--on-dark); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 72px; }
.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-stretch: 85%;
  font-weight: 800;
  font-size: 24px;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--on-dark);
}
.logo-mark { width: 28px; height: 28px; border-radius: 6px; background: var(--lime); display: grid; place-items: center; }
.logo-mark svg { width: 17px; height: 17px; }
.nav { display: none; align-items: center; gap: 2px; }
.nav a {
  padding: 8px 12px;
  font-family: var(--font-display);
  font-stretch: 85%;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--on-dark-muted);
  text-decoration: none;
  transition: color .15s ease;
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--lime); }
.header-cta { display: none; align-items: center; gap: 10px; }
.header-cta .btn { min-height: 42px; padding: 0 20px; font-size: 14px; }
.header-cta .login { color: var(--on-dark-muted); font-family: var(--font-display); font-stretch: 85%; font-weight: 600; font-size: 14px; letter-spacing: .03em; text-transform: uppercase; text-decoration: none; padding: 8px 10px; }
.header-cta .login:hover { color: var(--on-dark); }
.menu-toggle { display: inline-grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--line-dark); border-radius: 8px; background: transparent; color: var(--on-dark); cursor: pointer; }
.menu-toggle svg { width: 20px; height: 20px; }
.mobile-nav { display: none; border-top: 1px solid var(--line-dark); padding: 8px var(--gutter) 24px; }
.mobile-nav.open { display: block; max-height: calc(100vh - 73px); max-height: calc(100dvh - 73px); overflow-y: auto; overscroll-behavior: contain; }  /* the menu sits in the sticky header, so it scrolls within the screen */
.mobile-nav a {
  display: block;
  padding: 16px 0;
  border-bottom: 1px solid var(--line-dark);
  font-family: var(--font-display);
  font-stretch: 75%;
  font-size: 34px;
  font-weight: 800;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--on-dark);
}
.mobile-nav .btn-row { margin-top: 20px; }
.mobile-nav .btn-row a { display: inline-flex; font-size: 15px; border: 0; padding: 0 22px; }  /* keep the pill's centred label; .mobile-nav a makes links blocks */
.mobile-nav .btn-row .btn--ghost { border: 1.5px solid var(--line-dark); }
.mobile-nav .btn-row .btn--primary { color: var(--ink); }
@media (min-width: 1024px) {
  .nav, .header-cta { display: flex; }
  .menu-toggle, .mobile-nav, .mobile-nav.open { display: none; }
}

/* ---------- Hero ---------- */
.hero { background: var(--ink); color: var(--on-dark); position: relative; overflow: hidden; padding: clamp(64px, 9vw, 128px) 0; }
.hero--lime { background: var(--lime); color: var(--ink); }
.hero h1 { margin-bottom: 0; }
.hero--lime h1 { color: var(--ink); }
.hero:not(.hero--lime) h1 { color: var(--white); }
.hero-grid { display: grid; gap: 48px; align-items: end; }
@media (min-width: 1100px) { .hero-grid { grid-template-columns: 1.15fr 1fr; gap: 72px; align-items: center; } }
.hero-copy { display: grid; gap: 28px; max-width: 56ch; }
.hero-copy .lede { margin: 0; }
.hero-note { display: flex; flex-wrap: wrap; gap: 8px 22px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.hero-note span { display: inline-flex; align-items: center; gap: 8px; }
.hero-note span::before { content: ""; width: 6px; height: 6px; background: currentColor; }
.hero--lime .hero-note { color: rgba(10,15,12,.7); }
.hero:not(.hero--lime) .hero-note { color: var(--on-dark-muted); }
.hero-title { font-size: clamp(56px, 9.4vw, 150px); margin-bottom: clamp(28px, 4vw, 48px) !important; max-width: 19ch; }

.page-hero { padding: clamp(72px, 9vw, 120px) 0 clamp(64px, 8vw, 104px); }
.page-hero h1 { font-size: clamp(56px, 9vw, 136px); max-width: 12ch; margin-bottom: 28px; }
.page-hero .lede { max-width: 56ch; }

/* ---------- Drop mark (animated logo) ---------- */
.dropmark { position: absolute; right: var(--gutter); top: clamp(24px, 4vw, 48px); width: clamp(56px, 7vw, 104px); opacity: .9; pointer-events: none; }
.dropmark svg { width: 100%; height: auto; overflow: visible; }
.dropmark .arrow { animation: drop 2.6s cubic-bezier(.6,0,.4,1) infinite; transform-origin: center; }
@keyframes drop { 0% { transform: translateY(-34%); opacity: 0; } 25% { opacity: 1; } 55% { transform: translateY(0); } 70% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(0); opacity: 0; } }

/* ---------- Live feed ---------- */
.feed { background: var(--ink); color: var(--on-dark); border-radius: 8px; overflow: hidden; box-shadow: 0 40px 80px -30px rgba(10,15,12,.55); font-size: 13px; }
.feed-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--line-dark); font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--on-dark-muted); }
.feed-head .live { display: inline-flex; align-items: center; gap: 8px; color: var(--lime); }
.feed-head .live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--lime); animation: blink 1.6s ease-in-out infinite; }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.feed-cols, .feed-row { display: grid; grid-template-columns: 1.1fr 1.2fr .7fr .9fr; gap: 10px; align-items: center; padding: 11px 18px; }
.feed-cols { font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--on-dark-muted); border-bottom: 1px solid var(--line-dark); }
.feed-body { display: grid; }
.feed-row { border-bottom: 1px solid var(--line-dark); animation: feedin .5s ease both; }
.feed-row:last-child { border-bottom: 0; }
@keyframes feedin { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.feed-row .ch { font-family: var(--font-display); font-stretch: 85%; font-weight: 700; font-size: 13px; letter-spacing: .02em; text-transform: uppercase; }
.feed-row .pl { color: var(--on-dark-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.feed-row .un { font-variant-numeric: tabular-nums; }
.feed-row .st { text-align: right; }
.pill { display: inline-block; font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; border-radius: 999px; padding: 3px 9px; background: rgba(255,255,255,.08); color: var(--on-dark); white-space: nowrap; }
.pill.ok { background: rgba(var(--lime-rgb), .16); color: var(--lime); }
.pill.warn { background: rgba(255,196,87,.16); color: #ffc457; }
.feed-foot { padding: 10px 18px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--on-dark-muted); border-top: 1px solid var(--line-dark); }

/* ---------- Marquee ---------- */
.marquee { background: var(--ink); color: var(--white); padding: clamp(18px, 2.6vw, 32px) 0; overflow: hidden; display: grid; gap: 2px; border-top: 1px solid var(--line-dark); border-bottom: 1px solid var(--line-dark); }
.marquee-track { display: flex; width: max-content; animation: marquee 44s linear infinite; }
.marquee-row--rev .marquee-track { animation-direction: reverse; animation-duration: 52s; }
.marquee-track span { font-family: var(--font-display); font-stretch: 75%; font-weight: 800; font-size: clamp(40px, 6.6vw, 96px); line-height: 1; text-transform: uppercase; white-space: nowrap; padding-right: .35em; }
.marquee-track span i { font-style: normal; color: var(--lime); padding-left: .35em; }
.marquee-row--rev span { color: transparent; -webkit-text-stroke: 1.5px var(--lime); }
.marquee-row--rev span i { -webkit-text-stroke: 0; color: var(--on-dark-muted); }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- Statement (old way / our way) ---------- */
.statement { display: grid; border-top: 1px solid var(--line-dark); border-bottom: 1px solid var(--line-dark); }
@media (min-width: 900px) { .statement { grid-template-columns: 1fr 1fr; } .statement > div + div { border-left: 1px solid var(--line-dark); } }
.statement > div { padding: clamp(32px, 4vw, 56px) clamp(0px, 3vw, 48px); }
.statement > div + div { border-top: 1px solid var(--line-dark); }
@media (min-width: 900px) { .statement > div + div { border-top: 0; } .statement > div:first-child { padding-left: 0; } .statement > div:last-child { padding-right: 0; } }
.statement .label { font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--on-dark-muted); margin-bottom: 20px; }
.statement .label.us { color: var(--lime); }
.statement .big { font-family: var(--font-display); font-stretch: 75%; font-weight: 800; text-transform: uppercase; line-height: .92; font-size: clamp(34px, 4.6vw, 68px); margin-bottom: 20px; }
.statement .them .big { color: var(--on-dark-muted); }
.statement p { color: var(--on-dark-muted); max-width: 44ch; font-size: 17px; }
.statement .us p { color: var(--on-dark); }

/* ---------- Audience rows ---------- */
.aud { border-top: 1px solid var(--line); }
.aud-row { display: grid; gap: 16px 40px; padding: clamp(28px, 4vw, 48px) 0; border-bottom: 1px solid var(--line); text-decoration: none; color: inherit; position: relative; transition: padding-left .25s ease; }
@media (min-width: 900px) { .aud-row { grid-template-columns: 1.1fr 1.2fr auto; align-items: center; } }
.aud-row:hover { padding-left: 12px; }
.aud-row .word { font-family: var(--font-display); font-stretch: 75%; font-weight: 800; text-transform: uppercase; line-height: .9; font-size: clamp(48px, 7.4vw, 112px); }
.aud-row:hover .word { color: var(--forest-3); }
.aud-row .copy { font-size: 17px; color: var(--text-muted); max-width: 46ch; }
.aud-row .copy strong { display: block; color: var(--text); font-family: var(--font-display); font-weight: 700; font-size: 19px; margin-bottom: 6px; }
.aud-row .go { width: 56px; height: 56px; border-radius: 50%; border: 1.5px solid var(--line); display: grid; place-items: center; transition: background .2s ease, border-color .2s ease, color .2s ease; }
.aud-row:hover .go { background: var(--ink); border-color: var(--ink); color: var(--lime); }
.aud-row .go svg { width: 22px; height: 22px; }

/* ---------- Channel list ---------- */
.channels { border-top: 1px solid var(--line-dark); }
.channel { display: grid; grid-template-columns: auto 1fr; gap: 12px 24px; align-items: baseline; padding: clamp(18px, 2.4vw, 28px) 0; border-bottom: 1px solid var(--line-dark); }
@media (min-width: 900px) { .channel { grid-template-columns: 64px 1fr 1fr; } }
.channel .n { font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; color: var(--on-dark-muted); }
.channel .name { font-family: var(--font-display); font-stretch: 75%; font-weight: 800; text-transform: uppercase; line-height: .95; font-size: clamp(36px, 5vw, 76px); color: var(--white); transition: color .2s ease; }
.channel:hover .name { color: var(--lime); }
.channel .desc { grid-column: 2; color: var(--on-dark-muted); font-size: 16px; max-width: 46ch; }
@media (min-width: 900px) { .channel .desc { grid-column: 3; } }

/* ---------- Stats ---------- */
.stats { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid rgba(10,15,12,.25); }
.stat { padding: clamp(24px, 3vw, 40px) 20px clamp(24px, 3vw, 40px) 0; border-bottom: 1px solid rgba(10,15,12,.25); }
.stat:nth-child(odd) { border-right: 1px solid rgba(10,15,12,.25); }
.stat:nth-child(even) { padding-left: 20px; }
.stat-value { font-family: var(--font-display); font-stretch: 75%; font-weight: 800; font-size: clamp(64px, 9vw, 152px); line-height: .9; letter-spacing: -0.01em; white-space: nowrap; margin-bottom: 12px; }
.stat-label { font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: rgba(10,15,12,.7); line-height: 1.5; max-width: 26ch; }
@media (min-width: 900px) {
  .stats { grid-template-columns: repeat(4, 1fr); }
  .stat { padding: clamp(32px, 3vw, 48px) 28px; border-right: 1px solid rgba(10,15,12,.25); border-bottom: 0; }
  .stat:nth-child(even) { padding-left: 28px; }
  .stat:first-child { padding-left: 0; }
  .stat:last-child { border-right: 0; }
}
.section--dark .stats, .section--ink .stats, .section--dark .stat, .section--ink .stat { border-color: var(--line-dark); }
.section--dark .stat-label, .section--ink .stat-label { color: var(--on-dark-muted); }

/* ---------- Hairline grids & cards ---------- */
.grid-3, .grid-2 { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
@media (min-width: 720px) { .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 820px) { .grid-2 { grid-template-columns: repeat(2, 1fr); } }
.section--dark .grid-3, .section--dark .grid-2, .section--ink .grid-3, .section--ink .grid-2, .section--forest .grid-3, .section--forest .grid-2 { background: var(--line-dark); border-color: var(--line-dark); }
.card { background: var(--paper); padding: clamp(24px, 2.8vw, 36px); display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.section--cream .card { background: var(--cream); }
.section--dark .card, .section--ink .card { background: var(--ink); }
.section--forest .card { background: var(--forest); }
.section--lime .card { background: var(--lime); }
.card p { color: var(--text-muted); font-size: 15.5px; }
.card h3 { margin-bottom: 0; }
.section--dark .card p, .section--ink .card p, .section--forest .card p { color: var(--on-dark-muted); }
.card .tag { align-self: flex-start; font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 8px; }
.section--dark .card .tag, .section--ink .card .tag, .section--forest .card .tag { color: var(--lime); }
.card--link { text-decoration: none; color: inherit; transition: background .2s ease; }
.card--link:hover { background: var(--white); }
.section--dark .card--link:hover, .section--ink .card--link:hover { background: var(--ink-2); }
/* step cards inside a dark section: dark cards with light text, like the cards above (the light card left the numbers and headings unreadable) */
.section--dark .steps, .section--ink .steps, .section--forest .steps { background: var(--line-dark); border-color: var(--line-dark); }
.section--dark .step, .section--ink .step { background: var(--ink); color: var(--on-dark); }
.section--forest .step { background: var(--forest); color: var(--on-dark); }
.section--dark .step p, .section--ink .step p, .section--forest .step p, .section--dark .step-num .when, .section--ink .step-num .when { color: var(--on-dark-muted); }
.section--dark .step--link:hover, .section--ink .step--link:hover { background: var(--ink-2); }
.section--dark .step-link, .section--ink .step-link { color: var(--on-dark); }
.card--link .read { margin-top: auto; padding-top: 12px; font-family: var(--font-display); font-stretch: 85%; font-weight: 700; font-size: 14px; letter-spacing: .04em; text-transform: uppercase; }
.icon { width: 44px; height: 44px; border-radius: 6px; background: var(--ink); color: var(--lime); display: grid; place-items: center; margin-bottom: 8px; }
.icon svg { width: 22px; height: 22px; }
.section--dark .icon, .section--ink .icon { background: var(--lime); color: var(--ink); }

.ticks { list-style: none; padding: 0; margin: 4px 0 0; display: grid; gap: 10px; }
.ticks li { position: relative; padding-left: 26px; font-size: 16px; line-height: 1.45; }
.ticks li::before { content: ""; position: absolute; left: 2px; top: 7px; width: 11px; height: 6px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); opacity: .8; }
.section--dark .ticks li::before, .section--ink .ticks li::before, .section--forest .ticks li::before { border-color: var(--lime); opacity: 1; }

/* ---------- Steps ---------- */
.steps { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
@media (min-width: 720px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .steps { grid-template-columns: repeat(4, 1fr); } .steps--5 { grid-template-columns: repeat(5, 1fr); } }
.step { background: var(--paper); padding: clamp(24px, 2.8vw, 36px); display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.section--cream .step { background: var(--cream); }
.step-num { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 28px; }
.step-num > span:first-child { font-family: var(--font-display); font-stretch: 75%; font-weight: 800; font-size: 56px; line-height: .9; }
.step-num .when { font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.step h3 { margin-bottom: 4px; }
.step p { color: var(--text-muted); font-size: 15.5px; }

/* ---------- Split ---------- */
.split { display: grid; gap: 48px; align-items: center; }
@media (min-width: 1000px) { .split { grid-template-columns: 1fr 1.15fr; gap: 80px; } .split--rev > :first-child { order: 2; } }

/* ---------- Compare ---------- */
.compare { border: 1px solid var(--line-dark); }
.compare-row { display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--line-dark); }
.compare-row:first-child { border-top: 0; }
.compare-row > div { padding: 18px 20px; }
.compare-row .topic { font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--on-dark-muted); padding-bottom: 0; }
.compare-row .old { color: var(--on-dark-muted); padding-bottom: 6px; }
.compare-row .old::before { content: "Traditional  "; font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; opacity: .7; }
.compare-row .new { color: var(--white); font-weight: 500; padding-top: 6px; }
.compare-row .new::before { content: "Shelfdrop  "; font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--lime); font-weight: 500; }
.compare-head { display: none; }
@media (min-width: 820px) {
  .compare-row { grid-template-columns: 0.8fr 1fr 1fr; }
  .compare-row > div { padding: 20px 24px; }
  .compare-row .topic { padding-bottom: 20px; display: flex; align-items: center; }
  .compare-row .old, .compare-row .new { padding: 20px 24px; }
  .compare-row .old::before, .compare-row .new::before { content: none; }
  .compare-row .new { background: rgba(var(--lime-rgb), .06); border-left: 1px solid var(--line-dark); }
  .compare-row .old { border-left: 1px solid var(--line-dark); }
  .compare-head { display: grid; }
  .compare-head > div { font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--on-dark-muted); }
  .compare-head .new { color: var(--lime); font-weight: 500; }
}

/* ---------- Portal mockup ---------- */
.portal { background: var(--ink-2); border: 1px solid var(--line-dark); border-radius: 8px; box-shadow: 0 40px 80px -40px rgba(0,0,0,.6); overflow: hidden; font-size: 13px; color: var(--on-dark); }
.portal-bar { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--line-dark); font-family: var(--font-mono); font-size: 11px; color: var(--on-dark-muted); }
.portal-bar i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.15); }
.portal-bar .url { margin-left: 10px; }
.portal-bar .live { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; color: var(--lime); }
.portal-bar .live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--lime); animation: blink 1.6s infinite; }
.portal-body { padding: 18px; display: grid; gap: 14px; }
.portal-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.kpi { background: rgba(255,255,255,.04); border: 1px solid var(--line-dark); border-radius: 6px; padding: 12px; }
.kpi .k { font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--on-dark-muted); }
.kpi .v { font-family: var(--font-display); font-stretch: 80%; font-weight: 800; font-size: 24px; margin-top: 6px; }
.kpi .d { font-size: 11px; color: var(--lime); margin-top: 2px; }
.portal-chart { background: rgba(255,255,255,.03); border: 1px solid var(--line-dark); border-radius: 6px; padding: 14px 14px 10px; }
.portal-chart .ch-head { display: flex; justify-content: space-between; font-size: 12px; color: var(--on-dark-muted); margin-bottom: 10px; }
.bars { display: flex; align-items: flex-end; gap: 5px; height: 96px; }
.bars span { flex: 1; background: linear-gradient(to top, var(--forest-3), #3a6a48); border-radius: 2px 2px 0 0; }
.bars span.hi { background: var(--lime); }
.portal-table { border: 1px solid var(--line-dark); border-radius: 6px; overflow: hidden; }
.portal-table .tr { display: grid; grid-template-columns: 1.6fr 1fr .9fr; gap: 8px; padding: 9px 12px; border-top: 1px solid var(--line-dark); align-items: center; }
.portal-table .tr:first-child { border-top: 0; font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--on-dark-muted); }
.portal-table .tr span:last-child { text-align: right; }
.portal-caption { font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--on-dark-muted); margin-top: 12px; }

/* ---------- Pricing ---------- */
.plans { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
@media (min-width: 880px) { .plans { grid-template-columns: repeat(2, 1fr); } }
.plan { padding: clamp(28px, 3.6vw, 48px); background: var(--paper); display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.plan--featured { background: var(--lime); color: var(--ink); }
.plan-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.plan-name { font-family: var(--font-display); font-stretch: 75%; font-weight: 800; text-transform: uppercase; font-size: 40px; line-height: .9; }
.plan-badge { font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; background: var(--ink); color: var(--lime); border-radius: 999px; padding: 6px 10px; white-space: nowrap; }
.plan-price { display: flex; align-items: baseline; gap: 12px; }
.plan-price .amt { font-family: var(--font-display); font-stretch: 75%; font-weight: 800; font-size: clamp(88px, 11vw, 144px); line-height: .85; }
.plan-price .per { color: var(--text-muted); font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; line-height: 1.5; }
.plan--featured .plan-price .per, .plan--featured .plan-desc { color: rgba(10,15,12,.72); }
.plan-desc { color: var(--text-muted); }
.plan .ticks { border-top: 1px solid var(--line); padding-top: 20px; }
.plan--featured .ticks { border-color: rgba(10,15,12,.25); }
.plan--featured .ticks li::before { border-color: var(--ink); }
.plan .btn { margin-top: auto; align-self: flex-start; }

.fee-table { width: 100%; border-collapse: collapse; font-size: 15.5px; }
.fee-table th, .fee-table td { text-align: left; padding: 18px 16px 18px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.fee-table th { font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); font-weight: 500; }
.fee-table td:first-child { font-family: var(--font-display); font-weight: 700; width: 30%; }
.fee-table td:nth-child(2) { font-family: var(--font-display); font-stretch: 80%; font-weight: 800; font-size: 24px; white-space: nowrap; width: 18%; }
.fee-table td:last-child { color: var(--text-muted); }
.fee-table td[colspan] { font-family: var(--font-body); font-weight: 400; font-size: 16px; white-space: normal; width: auto; color: var(--text); }
@media (max-width: 640px) {
  .fee-table thead { display: none; }
  .fee-table tr { display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; padding: 16px 0; border-bottom: 1px solid var(--line); }
  .fee-table td { border: 0; padding: 0; width: auto !important; }
  .fee-table td:last-child { grid-column: 1 / -1; font-size: 14px; }
}

/* ---------- Calculator ---------- */
.calc { display: grid; border: 1px solid var(--line); background: var(--paper); overflow: hidden; }
@media (min-width: 960px) { .calc { grid-template-columns: 1fr 1.1fr; } }
.calc > * { min-width: 0; }
.calc-inputs { padding: clamp(24px, 3.4vw, 44px); display: grid; gap: 26px; align-content: start; }
.calc-out { background: var(--ink); color: var(--on-dark); padding: clamp(24px, 3.4vw, 44px); display: grid; gap: 20px; align-content: start; }
.field { display: grid; gap: 10px; }
.field label, .field .label { font-weight: 600; font-size: 15px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.field .hint { font-size: 13px; color: var(--text-muted); font-weight: 400; }
.money-input { display: flex; align-items: center; border: 1px solid var(--line); padding: 0 16px; background: var(--white); transition: border-color .15s ease; }
.money-input:focus-within { border-color: var(--ink); }
.money-input span { font-family: var(--font-display); font-stretch: 80%; font-weight: 800; font-size: 30px; color: var(--text-muted); }
.money-input input { flex: 1; width: 100%; min-width: 0; border: 0; background: transparent; font-family: var(--font-display); font-stretch: 80%; font-weight: 800; font-size: 36px; padding: 12px 8px; color: var(--text); outline: none; }
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; background: var(--cream); padding: 4px; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg label { text-align: center; padding: 10px 8px; cursor: pointer; font-family: var(--font-display); font-stretch: 85%; font-weight: 700; font-size: 14px; letter-spacing: .03em; text-transform: uppercase; display: block; color: var(--text-muted); transition: background .15s ease, color .15s ease; }
.seg label small { display: block; font-family: var(--font-body); font-weight: 400; font-size: 12px; text-transform: none; letter-spacing: 0; }
.seg input:checked + label { background: var(--ink); color: var(--lime); }
.seg input:focus-visible + label { outline: 2px solid var(--ink); outline-offset: 1px; }
input[type="range"] { width: 100%; accent-color: var(--ink); }
.out-hero .k { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--on-dark-muted); }
.out-hero .v { font-family: var(--font-display); font-stretch: 75%; font-weight: 800; font-size: clamp(72px, 9vw, 128px); line-height: .9; color: var(--lime); margin-top: 8px; }
.out-hero .s { color: var(--on-dark-muted); font-size: 14px; margin-top: 10px; }
.waterfall { display: grid; border-top: 1px solid var(--line-dark); }
.wf-row { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line-dark); font-size: 15px; }
.wf-row span:first-child { color: var(--on-dark-muted); }
.wf-row span:last-child { font-variant-numeric: tabular-nums; font-weight: 600; }
.wf-row.total span { color: var(--white); font-weight: 700; }
.wf-row.total span:last-child { color: var(--lime); }
.stack { height: 14px; display: flex; overflow: hidden; background: rgba(255,255,255,.06); }
.stack i { display: block; height: 100%; transition: width .25s ease; }
.stack .s-brand { background: var(--lime); }
.stack .s-sd { background: #7fa98a; }
.stack .s-coop { background: #4f7a5c; }
.stack .s-amz { background: #34533f; }
.stack .s-vat { background: #243a2c; }
.legend { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 12px; color: var(--on-dark-muted); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 9px; height: 9px; display: inline-block; }
.calc-note { font-size: 12.5px; color: var(--on-dark-muted); line-height: 1.5; }

/* ---------- FAQ ---------- */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 22px 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(18px, 1.8vw, 22px); letter-spacing: -0.01em; line-height: 1.3; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line); background: linear-gradient(var(--text), var(--text)) center / 12px 1.5px no-repeat, linear-gradient(var(--text), var(--text)) center / 1.5px 12px no-repeat; transition: transform .2s ease, background-color .2s ease; }
.faq details[open] summary::after { transform: rotate(45deg); background-color: var(--lime); border-color: var(--lime); }
.faq .answer { padding: 0 0 24px; color: var(--text-muted); max-width: 70ch; }
.faq-layout { display: grid; gap: 40px; }
@media (min-width: 960px) { .faq-layout { grid-template-columns: 0.9fr 1.4fr; gap: 80px; } .faq-layout .section-head { position: sticky; top: 104px; align-self: start; } }

/* ---------- CTA ---------- */
.cta-band { background: var(--lime); color: var(--ink); padding: clamp(48px, 8vw, 112px) clamp(24px, 5vw, 72px); display: grid; gap: 32px; }
@media (min-width: 900px) { .cta-band { grid-template-columns: 1.5fr auto; align-items: end; } }
.cta-band h2 { margin: 0; max-width: 14ch; font-size: clamp(52px, 8vw, 128px); }
.cta-band p { margin-top: 20px; max-width: 46ch; color: rgba(10,15,12,.75); font-size: 18px; }

/* ---------- Founder ---------- */
.founder { margin: 0 auto; max-width: 980px; }
.founder blockquote { margin: 0 0 36px; font-family: var(--font-display); font-weight: 600; font-size: clamp(24px, 3vw, 40px); line-height: 1.25; letter-spacing: -0.02em; color: var(--white); }
.founder blockquote p { margin-bottom: 0.8em; }
.founder figcaption { display: grid; gap: 2px; padding-left: 18px; border-left: 3px solid var(--lime); color: var(--on-dark); }
.founder figcaption strong { font-family: var(--font-display); font-weight: 700; }
.founder figcaption span { color: var(--on-dark-muted); font-size: 15px; }

/* ---------- Services ---------- */
.service { display: grid; gap: 32px; padding: clamp(48px, 6vw, 80px) 0; border-top: 1px solid var(--line); }
.service:first-child { border-top: 0; padding-top: 0; }
@media (min-width: 960px) { .service { grid-template-columns: 0.9fr 1.3fr; gap: 80px; } }
.service-num { font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 16px; }
.service h2 { font-size: clamp(40px, 5vw, 72px); }
.service-body .lede { max-width: none; margin-bottom: 28px; color: var(--text); }
.service-cols { display: grid; gap: 24px; }
@media (min-width: 640px) { .service-cols { grid-template-columns: 1fr 1fr; } }
.service-cols h4 { margin-bottom: 10px; }
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.chip { font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; border: 1px solid var(--line); padding: 7px 12px; background: transparent; }
.section--dark .chip { border-color: var(--line-dark); color: var(--on-dark); }

.subnav { position: sticky; top: 72px; z-index: 40; background: rgba(248,246,240,.94); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.subnav .wrap { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; padding-top: 8px; padding-bottom: 8px; }
.subnav .wrap::-webkit-scrollbar { display: none; }
.subnav a { flex: none; font-family: var(--font-display); font-stretch: 85%; font-weight: 700; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; text-decoration: none; padding: 8px 12px; color: var(--text-muted); }
.subnav a:hover { color: var(--text); }
[id] { scroll-margin-top: 140px; }

/* ---------- Timeline ---------- */
.timeline { display: grid; border-left: 1px solid var(--line-dark); margin-left: 6px; }
.tl-item { position: relative; padding: 0 0 36px 32px; }
.tl-item:last-child { padding-bottom: 0; }
.tl-item::before { content: ""; position: absolute; left: -6px; top: 6px; width: 11px; height: 11px; border-radius: 50%; background: var(--ink); border: 2px solid var(--lime); }
.tl-when { font-family: var(--font-display); font-stretch: 75%; font-weight: 800; font-size: 28px; line-height: 1; color: var(--lime); margin-bottom: 8px; }
.tl-item h3 { color: var(--white); margin-bottom: 6px; }
.tl-item p { color: var(--on-dark-muted); font-size: 15.5px; }

/* ---------- Forms ---------- */
.form { display: grid; gap: 18px; }
.form-row { display: grid; gap: 18px; }
@media (min-width: 640px) { .form-row { grid-template-columns: 1fr 1fr; } }
.form label { display: grid; gap: 8px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; font-weight: 500; color: var(--text-muted); }
.form input, .form select, .form textarea { font: inherit; font-family: var(--font-body); font-size: 16px; letter-spacing: 0; text-transform: none; width: 100%; padding: 14px; border: 1px solid var(--line); background: var(--white); color: var(--text); transition: border-color .15s ease; }
.form textarea { min-height: 140px; resize: vertical; }
.form input:focus, .form select:focus, .form textarea:focus { outline: none; border-color: var(--ink); }
.form-note { font-size: 13px; color: var(--text-muted); }
.contact-card { background: var(--ink); color: var(--on-dark); padding: clamp(24px, 3.4vw, 44px); display: grid; gap: 28px; align-content: start; }
.contact-card h3 { color: var(--white); }
.contact-card .k { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--on-dark-muted); margin-bottom: 6px; }
.contact-card a { color: var(--lime); text-decoration: none; font-weight: 600; }
.contact-card a:hover { text-decoration: underline; }
.contact-card p { color: var(--on-dark); }
.contact-card .ticks li::before { border-color: var(--lime); opacity: 1; }

/* ---------- Articles ---------- */
.article-hero .meta { font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--on-dark-muted); margin-top: 24px; }
.article-hero h1 { font-size: clamp(44px, 6.6vw, 96px); max-width: 16ch; }
.prose { max-width: 760px; margin: 0 auto; font-size: 18px; line-height: 1.7; }
.prose h2 { font-size: clamp(32px, 4vw, 52px); margin: 2em 0 0.5em; }
.prose h3 { font-size: 22px; margin: 1.6em 0 0.5em; }
.prose p, .prose ul, .prose ol { margin: 0 0 1.1em; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li { margin-bottom: 0.4em; }
.prose a { color: var(--forest-3); text-underline-offset: 3px; }
.prose strong { font-weight: 600; }
.prose .callout { background: var(--cream); border-left: 3px solid var(--lime); padding: 18px 22px; margin: 1.6em 0; font-size: 16px; }
.prose .callout p:last-child { margin-bottom: 0; }
.prose .tldr { background: var(--ink); color: var(--on-dark); padding: 24px 28px; margin: 0 0 2em; font-size: 16px; }
.prose .tldr strong { color: var(--lime); font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.prose .tldr ul { margin: 10px 0 0; }
.calc-table { width: 100%; border-collapse: collapse; font-size: 16px; margin: 1em 0 1.6em; font-variant-numeric: tabular-nums; }
.calc-table td, .calc-table th { padding: 10px 0; border-bottom: 1px solid var(--line); text-align: left; }
.calc-table td:last-child, .calc-table th:last-child { text-align: right; }
.calc-table tr.total td { font-weight: 700; border-bottom: 2px solid var(--text); }
.formula { font-family: var(--font-mono); font-size: 15px; background: var(--ink); color: var(--lime); padding: 16px 20px; overflow-x: auto; margin: 1em 0 1.4em; }

/* ---------- Footer ---------- */
.site-footer { background: var(--ink); color: var(--on-dark-muted); padding: clamp(56px, 8vw, 96px) 0 32px; font-size: 14px; border-top: 1px solid var(--line-dark); }
.footer-top { display: grid; gap: 40px; padding-bottom: 48px; border-bottom: 1px solid var(--line-dark); }
@media (min-width: 900px) { .footer-top { grid-template-columns: 1.3fr repeat(3, 1fr); } }
@media (min-width: 1180px) { .footer-top { grid-template-columns: 1.2fr repeat(5, 1fr); } }
.footer-top .logo { margin-bottom: 16px; }
.footer-top p { max-width: 30ch; }
.footer-col h2 { font-family: var(--font-mono); font-stretch: 100%; font-size: 11px; font-weight: 500; line-height: 1.4; letter-spacing: .1em; text-transform: uppercase; color: var(--on-dark); margin: 0 0 16px; }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.footer-col a { text-decoration: none; }
.footer-col a:hover { color: var(--lime); }
.footer-legal { padding-top: 28px; display: grid; gap: 16px; font-size: 12.5px; line-height: 1.6; }
@media (min-width: 900px) { .footer-legal { grid-template-columns: 1fr auto; } }
.footer-legal .reg { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .02em; }
.footer-legal .reg span { display: inline-block; margin-right: 16px; }

/* ---------- Utilities ---------- */
.mt-0 { margin-top: 0; }
.center { text-align: center; }
.muted { color: var(--text-muted); }
.small { font-size: 14px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .marquee-track, .dropmark .arrow, .feed-head .live::before, .portal-bar .live::before, .feed-row { animation: none; }
  html { scroll-behavior: auto; }
}

@media (max-width: 760px) { .dropmark { display: none; } }

/* ---------- Wordmark ---------- */
.logo img { height: 22px; width: auto; display: block; }
.site-footer .logo img { height: 26px; }
@media (min-width: 1024px) { .logo img { height: 24px; } }

/* ---------- Live feed: white, portal-style ---------- */
.feed { background: var(--white); color: var(--text); border: 1px solid #e2e5de; border-radius: 14px; box-shadow: 0 30px 60px -30px rgba(10,15,12,.35); font-family: var(--font-body); font-size: 14px; }
.feed-head { font-family: var(--font-body); font-size: 14px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--text); border-bottom: 1px solid #eceee8; }
.feed-head .live { color: #1f8a4c; }
.feed-head .live::before { background: #22c55e; }
.feed-cols { font-family: var(--font-body); font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none; color: #6b746e; background: #fafaf7; border-bottom: 1px solid #eceee8; }
.feed-cols, .feed-row { grid-template-columns: minmax(0,1.25fr) minmax(0,1.1fr) minmax(0,.55fr) minmax(0,.75fr) minmax(0,1fr); }
.feed-row { border-bottom: 1px solid #eceee8; }
.feed-row .ch { font-family: var(--font-body); font-stretch: normal; font-weight: 600; font-size: 14px; letter-spacing: 0; text-transform: none; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.feed-row .pl { color: #6b746e; }
.feed-row .un { color: var(--text); font-weight: 500; }
.feed .pill { font-family: var(--font-body); font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none; padding: 4px 10px; background: #f0f1ec; color: #3f4842; }
.feed .pill.ok { background: #e4f5e9; color: #1f8a4c; }
.feed .pill.warn { background: #fff2dc; color: #a35d00; }
.feed-foot { font-family: var(--font-body); font-size: 12px; letter-spacing: 0; text-transform: none; color: #8a938d; border-top: 1px solid #eceee8; background: #fafaf7; }
.feed-row .ord { display: grid; gap: 2px; min-width: 0; }
.feed-row .ord strong { font-weight: 600; font-size: 14px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.feed-row .ord small { font-size: 12px; color: #8a938d; }
.feed-row .ch { font-weight: 500; color: #3f4842; }
.feed-row .val { color: var(--text); font-weight: 500; font-variant-numeric: tabular-nums; }
@media (max-width: 560px) {
  .feed-cols, .feed-row { grid-template-columns: minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr); }
  .feed-row .un, .feed-cols span:nth-child(3), .feed-row .val, .feed-cols span:nth-child(4) { display: none; }
}

/* ---------- Devices (laptop + phone) ---------- */
.devices-wrap { position: relative; width: 100%; --dev-scale: 1; height: calc(600px * var(--dev-scale)); }
.devices { position: absolute; top: 0; right: 0; width: 640px; height: 600px; transform: scale(var(--dev-scale)); transform-origin: top right; }
.dev-mac { position: absolute; top: 0; right: 0; width: 560px; background: var(--ink); border-radius: 26px; padding: 12px; box-shadow: 0 34px 64px -26px rgba(10,15,12,.55); }
.dev-mac .cam { position: absolute; left: 50%; top: 4px; transform: translateX(-50%); width: 6px; height: 6px; border-radius: 50%; background: #333; }
.dev-mac .screen { border-radius: 15px; background: var(--white); overflow: hidden; }
.dev-mac .safaribar { height: 42px; display: flex; align-items: center; justify-content: center; background: #f2f2f2; border-bottom: 1px solid rgba(10,10,10,.12); }
.dev-mac .safaribar .pill { width: 46%; height: 22px; border-radius: 999px; background: var(--white); box-shadow: inset 0 0 0 1px rgba(10,10,10,.14); display: flex; align-items: center; justify-content: center; font-family: var(--font-body); font-size: 13px; font-weight: 500; color: rgba(10,10,10,.62); letter-spacing: 0; text-transform: none; padding: 0; }
.dev-mac .viewport { height: 380px; overflow: hidden; position: relative; }
.dev-mac .scroll-shot { width: 100%; height: auto; display: block; animation: device-scroll-mac 18s ease-in-out infinite; }
.dev-phone { position: absolute; left: 0; bottom: 0; width: 210px; height: 420px; background: var(--ink); border-radius: 40px; padding: 9px; box-shadow: 0 30px 56px -22px rgba(10,15,12,.55); }
.dev-phone .island { position: absolute; left: 50%; top: 20px; transform: translateX(-50%); width: 64px; height: 19px; background: var(--ink); border-radius: 999px; z-index: 3; }
.dev-phone .reelfeed { position: relative; height: 100%; overflow: hidden; border-radius: 31px; background: #17171a; isolation: isolate; -webkit-mask-image: -webkit-radial-gradient(white, black); } /* the mask keeps Safari clipping the videos to the rounded screen inside the scaled composition */
.dev-phone .reeltrack { height: 300%; display: grid; grid-template-rows: repeat(3, 1fr); animation: reel-advance 15s cubic-bezier(.7,0,.2,1) infinite; }
.dev-phone .reel { position: relative; overflow: hidden; background: #17171a; }
.dev-phone .reel video { width: 100%; height: 100%; object-fit: cover; display: block; background: #17171a; }
.dev-phone .reelchrome { position: absolute; inset: 0; z-index: 4; pointer-events: none; font-family: var(--font-body); color: var(--white); }
.dev-phone .scrim { position: absolute; left: 0; right: 0; bottom: 0; height: 46%; background: linear-gradient(to top, rgba(0,0,0,.72), rgba(0,0,0,0)); }
.dev-phone .rail { position: absolute; right: 8px; bottom: 84px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.dev-phone .act { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.dev-phone .act svg { width: 19px; height: 19px; display: block; fill: var(--white); filter: drop-shadow(0 1px 2px rgba(0,0,0,.45)); }
.dev-phone .act.liked svg { fill: #ff2d55; }
.dev-phone .act i { font-size: 8px; font-weight: 700; font-style: normal; text-shadow: 0 1px 2px rgba(0,0,0,.45); }
.dev-phone .cap { position: absolute; left: 14px; right: 46px; bottom: 44px; display: flex; flex-direction: column; gap: 3px; }
.dev-phone .cap .handle { font-size: 11px; font-weight: 800; }
.dev-phone .cap .line { font-size: 10px; font-weight: 500; line-height: 1.3; color: rgba(255,255,255,.88); }
.dev-phone .shop { position: absolute; left: 14px; right: 14px; bottom: 14px; height: 22px; border-radius: 999px; background: var(--lime); color: var(--ink); font-size: 10px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
@keyframes device-scroll-mac { 0%, 14% { transform: translateY(0); } 40%, 54% { transform: translateY(-22%); } 82%, 94% { transform: translateY(-44%); } 100% { transform: translateY(0); } }
@keyframes reel-advance { 0%, 28% { transform: translateY(0); } 33%, 61% { transform: translateY(-33.333%); } 66%, 94% { transform: translateY(-66.667%); } 100% { transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .dev-mac .scroll-shot, .dev-phone .reeltrack { animation: none; } }
.section--dark .feed { box-shadow: 0 40px 80px -30px rgba(0,0,0,.6); }

/* ---------- Deck-derived sections ---------- */
.flag { font-size: 22px; line-height: 1; display: inline-block; }
.bigstat { display: grid; gap: 28px; padding: clamp(32px, 4vw, 56px) 0; border-top: 1px solid var(--line); }
@media (min-width: 1000px) { .bigstat { grid-template-columns: 1fr 1.2fr; align-items: center; } .bigstat > .rank, .bigstat > .hbars { grid-column: 1 / -1; } }
.bigstat-num { display: flex; align-items: flex-end; gap: 10px; }
.bigstat-num .box { background: var(--lime); font-family: var(--font-display); font-stretch: 75%; font-weight: 800; font-size: clamp(96px, 13vw, 200px); line-height: .85; padding: .06em .08em .02em; }
.bigstat-num .unit { font-family: var(--font-display); font-stretch: 75%; font-weight: 800; font-size: clamp(40px, 5vw, 72px); line-height: 1; padding-bottom: .1em; display: grid; }
.bigstat-num .unit small { font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; font-weight: 500; color: var(--text-muted); margin-top: 8px; }
.bigstat-copy h3 { font-size: clamp(24px, 2.6vw, 34px); margin-bottom: 12px; }
.bigstat-copy p { color: var(--text-muted); font-size: 17px; max-width: 56ch; }
.rank { display: grid; gap: 10px; }
@media (min-width: 720px) { .rank { grid-template-columns: repeat(3, 1fr); } }
.rank-item { display: flex; align-items: center; gap: 14px; border: 1px solid var(--line); background: var(--paper); padding: 18px 20px; font-family: var(--font-display); font-weight: 700; font-size: 18px; }
.rank-item b { margin-left: auto; font-stretch: 80%; font-weight: 800; font-size: 26px; }
.rank-item.is-top { background: var(--lime); border-color: var(--lime); }
.hbars { display: grid; gap: 10px; }
.hbar { display: grid; grid-template-columns: 30px 150px 1fr; align-items: center; gap: 14px; font-family: var(--font-display); font-weight: 700; font-size: 17px; }
.hbar i { position: relative; display: block; height: 52px; width: var(--w); border: 1px solid var(--line); background: var(--paper); font-style: normal; }
.hbar i b { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font-stretch: 80%; font-weight: 800; font-size: 20px; color: var(--text-muted); }
.hbar.is-top i { background: var(--lime); border-color: var(--lime); }
.hbar.is-top i b { color: var(--ink); }
.hbars .footnote { grid-column: 1 / -1; margin-top: 10px; font-size: 14px; color: var(--text-muted); max-width: 90ch; }
@media (max-width: 560px) { .hbar { grid-template-columns: 26px 1fr; } .hbar i { grid-column: 1 / -1; } }

.laptop { background: var(--white); border: 3px solid var(--ink); border-radius: 14px; overflow: hidden; box-shadow: 0 40px 80px -40px rgba(0,0,0,.6); }
.laptop-bar { display: flex; gap: 8px; padding: 12px 16px; border-bottom: 3px solid var(--ink); }
.laptop-bar i { width: 12px; height: 12px; border-radius: 50%; border: 2.5px solid var(--ink); }
.laptop-bar i:first-child { background: var(--lime); }
.laptop img { display: block; width: 100%; height: auto; }

.band { background: var(--ink); color: var(--on-dark); padding: clamp(28px, 4vw, 48px); display: grid; gap: 20px; align-items: center; }
@media (min-width: 900px) { .band { grid-template-columns: 1.1fr 1fr; gap: 48px; } }
.band-num { font-family: var(--font-display); font-stretch: 75%; font-weight: 800; text-transform: uppercase; line-height: .9; font-size: clamp(44px, 6.4vw, 96px); color: var(--lime); }
.band-tag { font-family: var(--font-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--lime); }
.band p { color: var(--on-dark); font-size: 18px; margin: 0; }
.band p .hl { color: var(--lime); }
.cols3 { display: grid; gap: 28px; margin-top: 40px; }
@media (min-width: 820px) { .cols3 { grid-template-columns: repeat(3, 1fr); gap: 40px; } }
.cols3 > div { border-top: 2px solid var(--ink); padding-top: 18px; }
.cols3 h3 { margin-bottom: 8px; }
.cols3 p { color: var(--text-muted); font-size: 16px; }
.cols3--stats .stat-value { font-size: clamp(64px, 7vw, 112px); margin-bottom: 16px; }
.cols3--stats .stat-value small { font-size: .42em; }
.cols3--stats > div { border-top: 0; border-left: 1px solid var(--line); padding: 0 0 0 24px; }
.cols3--stats > div:first-child { border-left: 0; padding-left: 0; }

.numlist { list-style: none; margin: 32px 0 0; padding: 0; border-top: 1px solid var(--line); }
.numlist li { display: grid; grid-template-columns: 44px 1fr; gap: 12px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.numlist li > span { font-family: var(--font-mono); font-size: 13px; color: var(--text-muted); padding-top: 6px; }
.numlist h3 { margin-bottom: 6px; }
.numlist p { color: var(--text-muted); font-size: 16px; }
.report { background: var(--white); border: 1px solid var(--line); padding: clamp(24px, 3vw, 40px); }
.report-head { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 18px; }
.report h3 { font-size: clamp(24px, 2.6vw, 34px); margin-bottom: 18px; }
.report-chart { width: 100%; height: auto; background: #ececec; display: block; }
.report-chart line { stroke: rgba(10,15,12,.12); stroke-width: 1; }
.report-chart polyline { fill: none; stroke: var(--ink); stroke-width: 5; stroke-linejoin: round; stroke-linecap: round; }
.report-chart circle { fill: var(--lime); stroke: var(--ink); stroke-width: 4; }
.report-note { font-weight: 600; margin: 16px 0 18px; color: var(--text-muted); }
.report-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.report-kpis > div { border-top: 2px solid var(--ink); padding-top: 14px; }
.report-kpis b { display: block; font-family: var(--font-display); font-stretch: 80%; font-weight: 800; font-size: clamp(36px, 3.6vw, 52px); line-height: 1; margin-bottom: 8px; }
.report-kpis span { color: var(--text-muted); font-size: 15px; }
.report-foot { margin-top: 18px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }

.phone-shot-wrap { display: flex; justify-content: center; }
.phone-shot { width: min(320px, 80%); height: auto; }
.mkt { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.mkt .flag { font-size: 40px; }
.mkt h3 { margin: 0; }
.mkt span { font-size: 14px; color: var(--text-muted); }
.card p b { color: var(--text); }

.chain-label { font-family: var(--font-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); margin: 28px 0 12px; }
.chain { display: grid; gap: 8px; }
@media (min-width: 900px) { .chain { grid-auto-flow: column; grid-auto-columns: 1fr 24px; align-items: stretch; } }
.chain .node { border: 1px solid var(--line); background: var(--paper); padding: 18px 20px; }
.chain .node b { display: block; font-family: var(--font-display); font-weight: 700; font-size: 20px; }
.chain .node span { color: var(--text-muted); font-size: 15px; }
.chain .node.is-cost { background: #e9e9e4; }
.chain .node.is-cost b { color: var(--text-muted); }
.chain .node.is-us { background: var(--lime); border-color: var(--lime); box-shadow: 0 16px 32px -20px rgba(10,15,12,.5); }
.chain .node.is-us span { color: var(--text); }
.chain i { display: flex; align-items: center; justify-content: center; color: var(--text); }
.chain i::before { content: "→"; font-size: 18px; }
@media (max-width: 899px) { .chain i::before { content: "↓"; } }

.hod { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
@media (min-width: 1000px) { .hod { grid-template-columns: 1fr 1fr 1.1fr; } }
.hod-dark { background: var(--ink); color: var(--on-dark); padding: clamp(28px, 3.6vw, 48px); display: flex; flex-direction: column; justify-content: center; gap: 16px; }
.hod-addr { font-family: var(--font-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--lime); }
.hod-dark h3 { font-size: clamp(30px, 3.4vw, 44px); color: var(--white); margin: 0; }
.hod-dark p { color: var(--on-dark-muted); }
.hod-list { background: var(--cream); padding: clamp(24px, 3vw, 36px); display: grid; gap: 0; align-content: center; }
.hod-list blockquote { margin: 0 0 18px; border: 1px solid var(--line); background: var(--paper); padding: 18px 20px; font-family: var(--font-display); font-weight: 700; font-size: 18px; line-height: 1.35; }
.hod-list > div { border-top: 1px solid var(--line); padding: 14px 0; }
.hod-list h4 { margin-bottom: 4px; }
.hod-list p { color: var(--text-muted); font-size: 15px; }
.hod-photo { width: 100%; height: 100%; object-fit: cover; display: block; min-height: 320px; }

/* ---------- Market share card ---------- */
.share { background: var(--white); color: var(--text); border: 1px solid var(--line); padding: clamp(24px, 3vw, 36px); box-shadow: 0 40px 80px -30px rgba(0,0,0,.6); }
.share-top { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 16px; }
.share-top b { display: block; font-family: var(--font-display); font-stretch: 80%; font-weight: 800; font-size: clamp(44px, 4.6vw, 64px); line-height: 1; margin-bottom: 6px; }
.share-top b.up { color: #1f8a4c; }
.share-top span { color: var(--text-muted); font-size: 14px; }
.share-chart { width: 100%; height: auto; display: block; background: #f6f6f2; margin-bottom: 18px; }
.share-chart polyline { fill: none; stroke: var(--ink); stroke-width: 4; stroke-linejoin: round; stroke-linecap: round; }
.share-chart circle { fill: var(--lime); stroke: var(--ink); stroke-width: 3; }
.share-rows { display: grid; gap: 10px; }
.share-row { display: grid; grid-template-columns: 130px 1fr 52px; align-items: center; gap: 12px; font-size: 14px; font-weight: 500; }
.share-row i { display: block; height: 12px; background: #eceee8; position: relative; }
.share-row i::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: var(--w); background: var(--lime); border-right: 2px solid var(--ink); }
.share-row b { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- Mobile polish ---------- */
@media (max-width: 560px) {
  .share-top b { font-size: 38px; white-space: nowrap; }
  .feed-row .ch { white-space: normal; font-size: 13px; line-height: 1.25; }
  .eyebrow { align-items: flex-start; }
  .eyebrow::before { margin-top: 4px; }
}

.no-emoji-flags .flag { display: none; }

/* ---------- Duty calculator ---------- */
.duty { display: grid; border: 1px solid var(--line); background: var(--paper); }
@media (min-width: 960px) { .duty { grid-template-columns: 1.1fr 1fr; } }
.duty > * { min-width: 0; }
.duty-in { padding: clamp(24px, 3.4vw, 44px); display: grid; gap: 24px; align-content: start; }
.duty-out { background: var(--ink); color: var(--on-dark); padding: clamp(24px, 3.4vw, 44px); display: grid; gap: 20px; align-content: start; }
.seg--5 { grid-template-columns: repeat(5, 1fr); }
.seg label { padding: 10px 6px; font-size: 13px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chipbtn { font: inherit; font-family: var(--font-display); font-stretch: 85%; font-weight: 700; font-size: 14px; letter-spacing: .03em; text-transform: uppercase; padding: 10px 14px; border: 1px solid var(--line); background: var(--white); color: var(--text-muted); cursor: pointer; transition: background .15s ease, color .15s ease, border-color .15s ease; }
.chipbtn:hover { border-color: var(--text); color: var(--text); }
.chipbtn.is-on { background: var(--ink); color: var(--lime); border-color: var(--ink); }
.chips--small .chipbtn { padding: 8px 12px; font-size: 13px; }
.duty .money-input input { font-size: 32px; }
.duty .money-input span { font-size: 22px; }
.duty-more { border-top: 1px solid var(--line); padding-top: 18px; }
.duty-more summary { cursor: pointer; font-family: var(--font-display); font-weight: 700; font-size: 16px; list-style: none; display: flex; align-items: center; gap: 10px; }
.duty-more summary::-webkit-details-marker { display: none; }
.duty-more summary::before { content: "+"; width: 24px; height: 24px; border: 1px solid var(--line); border-radius: 50%; display: inline-grid; place-items: center; font-weight: 500; }
.duty-more[open] summary::before { content: "−"; background: var(--lime); border-color: var(--lime); }
.duty-out .out-hero .v { font-size: clamp(64px, 8vw, 112px); }
.duty-out .out-hero .s { font-size: 13px; }
.duty-out .wf-row span:first-child { max-width: 60%; }
.duty-out [data-out="leftpct"], .duty-out [data-out="dutypct"] { color: var(--on-dark-muted); font-weight: 400; font-size: 13px; }

[hidden] { display: none !important; }

/* ---------- Nav fit with eight items ---------- */
.nav a { white-space: nowrap; font-size: 14px; padding: 8px 9px; }
.header-cta .btn { white-space: nowrap; }
@media (max-width: 1320px) { .header-cta .login { display: none; } .nav a { padding: 8px 7px; font-size: 13.5px; } }
@media (max-width: 1180px) { .site-header .wrap { gap: 12px; } .nav a { padding: 8px 6px; font-size: 13px; } }
.site-header .logo, .si-logo { flex-shrink: 0; }

.statement--solo { grid-template-columns: 1fr; margin-top: clamp(32px, 4vw, 56px); border-bottom: 0; }
.statement--solo > div { padding-left: 0; padding-right: 0; padding-bottom: 0; }
.statement--solo .big { max-width: 22ch; }
.statement--solo p { max-width: 60ch; }

.chain--flow .node { background: var(--white); }
@media (min-width: 900px) { .chain--flow { grid-auto-columns: 1fr 20px; } }
.chain--flow .node span { font-size: 14px; }

@media (min-width: 1080px) { .steps--6 { grid-template-columns: repeat(6, 1fr); } }
@media (min-width: 720px) and (max-width: 1079px) { .steps--6 { grid-template-columns: repeat(3, 1fr); } }
.step--link { text-decoration: none; color: inherit; transition: background .2s ease; }
.step--link:hover { background: var(--white); }
.steps--6 .step { padding: clamp(20px, 2vw, 28px); }
.steps--6 .step-num { margin-bottom: 18px; }
.steps--6 .step-num > span:first-child { font-size: 40px; }
.steps--6 .step h3 { font-size: 19px; }
.steps--6 .step p { font-size: 14.5px; }

/* ---------- The route ---------- */
.route { position: relative; }
.route-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 28px 20px; position: relative; }
.route-step a { display: grid; gap: 14px; text-decoration: none; color: inherit; }
.route-node { width: 48px; height: 48px; border-radius: 50%; border: 2px solid var(--ink); background: var(--paper); color: var(--ink); display: grid; place-items: center; font-family: var(--font-display); font-stretch: 80%; font-weight: 800; font-size: 16px; position: relative; z-index: 1; transition: background .35s ease, color .35s ease, transform .35s ease; }
.route-step h3 { font-size: 20px; margin-bottom: 6px; }
.route-step p { color: var(--text-muted); font-size: 14.5px; margin-bottom: 10px; }
.route-meta { font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); display: inline-flex; align-items: center; gap: 8px; }
.route-meta::before { content: ""; width: 6px; height: 6px; background: var(--lime); border: 1px solid rgba(10,15,12,.3); }
.route-rail { position: absolute; background: var(--line); z-index: 0; }
.route-rail i { display: block; background: var(--ink); width: 100%; height: 100%; transform-origin: left top; transition: transform 1.8s cubic-bezier(.2,.8,.2,1) .15s; }
.route-step a:hover .route-node { transform: scale(1.08); }
.route-step a:hover h3 { text-decoration: underline; text-underline-offset: 4px; }
/* desktop: horizontal rail */
@media (min-width: 1080px) {
  .route-steps { grid-template-columns: repeat(6, 1fr); }
  .route-rail { left: 24px; right: 24px; top: 23px; height: 2px; }
  .route-rail i { transform: scaleX(0); }
  .route.in .route-rail i { transform: scaleX(1); }
}
/* below: vertical rail */
@media (max-width: 1079px) {
  .route-steps { grid-template-columns: 1fr; gap: 24px; }
  .route-step a { grid-template-columns: 48px 1fr; gap: 18px; align-items: start; }
  .route-rail { left: 23px; top: 24px; bottom: 24px; width: 2px; }
  .route-rail i { transform: scaleY(0); }
  .route.in .route-rail i { transform: scaleY(1); }
}
.route.in .route-step:nth-child(1) .route-node { background: var(--ink); color: var(--lime); transition-delay: .2s; }
.route.in .route-step:nth-child(2) .route-node { background: var(--ink); color: var(--lime); transition-delay: .5s; }
.route.in .route-step:nth-child(3) .route-node { background: var(--ink); color: var(--lime); transition-delay: .8s; }
.route.in .route-step:nth-child(4) .route-node { background: var(--ink); color: var(--lime); transition-delay: 1.1s; }
.route.in .route-step:nth-child(5) .route-node { background: var(--ink); color: var(--lime); transition-delay: 1.4s; }
.route.in .route-step:nth-child(6) .route-node { background: var(--lime); color: var(--ink); border-color: var(--ink); transition-delay: 1.7s; }
@media (prefers-reduced-motion: reduce) { .route-rail i, .route-node { transition: none; } }

/* ---------- Route map ---------- */
.routemap { display: grid; gap: 32px; margin-bottom: clamp(32px, 4vw, 56px); }
@media (min-width: 1000px) { .routemap { grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: center; } }
.routemap-stage { position: relative; width: 100%; aspect-ratio: 1000 / 1084; }
.routemap-dots, .routemap-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.routemap-svg { overflow: visible; }
.rt { fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-dasharray: 4 6; opacity: .45; }
.rt-main { stroke-width: 2; stroke-dasharray: 6 6; opacity: .7; }
.mv { fill: var(--lime); stroke: var(--ink); stroke-width: 1.5; }
.mv-paid { fill: var(--ink); stroke: var(--lime); }
.nd-city { fill: var(--paper); stroke: var(--ink); stroke-width: 1.5; }
.nd-bond { fill: var(--paper); stroke: var(--ink); stroke-width: 2; }
.nd-hub { fill: var(--lime); stroke: var(--ink); stroke-width: 2.5; }
.nd-core { fill: var(--ink); }
.nd-port { fill: var(--ink); }
.lb { font-family: var(--font-mono); font-size: 15px; letter-spacing: .06em; text-transform: uppercase; fill: var(--text); paint-order: stroke; stroke: var(--paper); stroke-width: 6px; stroke-linejoin: round; }
.routemap-legend { list-style: none; margin: 0; padding: 0; counter-reset: rm; border-top: 1px solid var(--line); }
.routemap-legend li { counter-increment: rm; display: grid; grid-template-columns: 40px 1fr; gap: 4px 12px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.routemap-legend li::before { content: counter(rm, decimal-leading-zero); grid-row: 1 / span 2; font-family: var(--font-display); font-stretch: 75%; font-weight: 800; font-size: 26px; line-height: 1; padding-top: 2px; }
.routemap-legend b { font-family: var(--font-display); font-weight: 700; font-size: 17px; }
.routemap-legend span { color: var(--text-muted); font-size: 14.5px; line-height: 1.5; }
@media (max-width: 600px) { .lb { font-size: 22px; } .rt { stroke-width: 2.5; } .nd-city { r: 7; } }

.routemap-key { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.routemap-key li { display: inline-flex; align-items: center; gap: 8px; }
.routemap-key i { width: 12px; height: 12px; border-radius: 50%; box-sizing: border-box; flex: none; }
.routemap-key .k-hub { background: var(--lime); border: 2px solid var(--ink); }
.routemap-key .k-bond { background: var(--lime); border: 1.5px solid var(--ink); }
.routemap-key .k-paid { background: var(--ink); border: 1.5px solid var(--lime); }
.routemap-key .k-end { background: var(--paper); border: 1.5px solid var(--ink); }

/* ---------- Route map scenarios ---------- */
.routemap-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
@media (min-width: 1000px) { .routemap { grid-template-columns: 1.1fr .9fr; grid-template-rows: auto auto auto; } .routemap-tabs { grid-column: 1 / -1; } .routemap-stage { grid-column: 1; grid-row: 2; } .routemap-key { grid-column: 1; grid-row: 3; } .routemap-side { grid-column: 2; grid-row: 2 / span 2; align-self: center; } }
.scn { display: none; }
.routemap[data-scn="all"] .scn-all, .routemap[data-scn="uk"] .scn-uk, .routemap[data-scn="eu"] .scn-eu, .routemap[data-scn="in"] .scn-in { display: block; }
.nd-origin { fill: var(--white); stroke: var(--ink); stroke-width: 2; }
.routemap-key .k-origin { background: var(--white); border: 2px solid var(--ink); }

/* ---------- Hero buttons on one line ---------- */
.hero-copy { max-width: 64ch; }
@media (min-width: 1180px) {
  .hero-copy .btn-row { flex-wrap: nowrap; }
  .hero-copy .btn { font-size: 14px; padding: 0 18px; min-height: 48px; gap: 8px; }
}
@media (min-width: 1180px) and (max-width: 1380px) { .hero-copy .btn-row { gap: 8px; } .hero-copy .btn { font-size: 12.5px; padding: 0 13px; letter-spacing: .02em; } }

/* ---------- Icon button (pause/next) ---------- */
.icon-btn { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); background: transparent; color: inherit; display: inline-grid; place-items: center; cursor: pointer; padding: 0; flex: none; }
.section--dark .icon-btn, .section--forest .icon-btn { border-color: var(--line-dark); }
.icon-btn .i-play { display: none; }
.icon-btn.is-paused .i-play { display: block; } .icon-btn.is-paused .i-pause { display: none; }

/* ---------- Route map: dim the hub that isn't in play ---------- */
.routemap[data-scn="uk"] .nd-nl, .routemap[data-scn="uk"] .lb-nl { opacity: .3; }
.nd-port { fill: var(--ink); }

/* ---------- Flags ---------- */
.flag { width: 24px; height: 16px; border-radius: 3px; box-shadow: 0 0 0 1px rgba(10,15,12,.18); flex: none; font-size: 0; }
.mkt .flag { width: 42px; height: 28px; border-radius: 4px; }
.seg label { display: flex; align-items: center; justify-content: center; gap: 8px; }
.seg input:checked + label .flag { box-shadow: 0 0 0 1px rgba(255,255,255,.35); }
@media (max-width: 640px) { .seg--5 { grid-template-columns: repeat(5, 1fr); } .seg--5 label { flex-direction: column; gap: 6px; padding: 10px 4px; font-size: 11px; } .seg--5 .flag { width: 26px; height: 17px; } }

/* ---------- Channel hub ---------- */
.hub { margin-top: clamp(8px, 2vw, 24px); }
.hub-stage { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; gap: 24px clamp(24px, 5vw, 80px); align-items: center; }
.hub-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.hub-lines path { fill: none; stroke: var(--lime); stroke-width: 1.5; opacity: .38; transition: opacity .3s; }
.hub-lines path.pulse { opacity: 1; stroke-width: 2.2; stroke-dasharray: 34 900; stroke-dashoffset: 934; animation: hubflow 3.2s linear infinite; stroke-linecap: round; }
.hub-lines circle { fill: var(--lime); transition: opacity .3s; }
@keyframes hubflow { to { stroke-dashoffset: 0; } }
.hub-col { display: grid; gap: 14px; position: relative; z-index: 1; }
.hub-col--l { justify-items: end; } .hub-col--r { justify-items: start; }
.hub-card { display: grid; grid-template-columns: 44px 1fr; gap: 2px 14px; align-items: center; width: min(100%, 300px); padding: 14px 16px; background: var(--paper); color: var(--text); border-radius: 14px; text-decoration: none; box-shadow: 0 20px 40px -24px rgba(0,0,0,.7); transition: transform .25s ease, opacity .3s ease, filter .3s ease; }
.hub-card:hover { transform: translateY(-2px); }
.hub-card .hub-ic { grid-row: span 2; width: 44px; height: 44px; border-radius: 11px; background: var(--ink); color: var(--lime); display: grid; place-items: center; font-family: var(--font-mono); font-size: 12px; letter-spacing: .04em; font-weight: 600; }
.hub-card b { font-family: var(--font-display); font-stretch: 85%; font-weight: 700; font-size: 16px; letter-spacing: .01em; text-transform: uppercase; line-height: 1.1; }
.hub-card small { font-size: 12.5px; color: var(--text-muted); line-height: 1.3; }
.hub.is-filtered .hub-card:not(.is-match) { opacity: .25; filter: grayscale(1); }
.hub.is-filtered .hub-lines [data-cat]:not(.is-match) { opacity: .06; }
.hub-mid { display: grid; gap: 18px; justify-items: center; position: relative; z-index: 1; }
.hub-core { width: clamp(150px, 15vw, 200px); aspect-ratio: 1; border-radius: 28px; background: var(--lime); display: grid; place-items: center; box-shadow: 0 30px 70px -20px rgba(var(--lime-rgb), .45), inset 0 -6px 0 rgba(0,0,0,.08); }
.hub-core img { width: 74%; height: auto; }
.hub-more { display: grid; gap: 4px; justify-items: center; text-align: center; padding: 16px 24px; border-radius: 16px; background: var(--forest); border: 1px solid var(--line-dark); color: var(--on-dark); text-decoration: none; min-width: 200px; transition: transform .2s ease; }
.hub-more:hover { transform: translateY(-2px); }
.hub-more b { font-family: var(--font-display); font-stretch: 80%; font-weight: 800; font-size: 24px; color: var(--lime); line-height: 1; }
.hub-more span { font-size: 13px; color: var(--on-dark-muted); }
.hub-more i { font-style: normal; color: var(--lime); }
.hub-tabs { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 18px; margin-top: clamp(28px, 4vw, 48px); padding-top: 16px; border-top: 1px solid var(--line-dark); }
.hub-tabs button:not(.icon-btn) { background: none; border: 0; color: var(--on-dark-muted); font: inherit; font-size: 14px; padding: 8px 2px; cursor: pointer; border-bottom: 2px solid transparent; }
.hub-tablist { display: contents; }  /* the tabs sit in the .hub-tabs row; the pause button is outside the tablist */
.hub-tabs button.is-on { color: var(--on-dark); border-bottom-color: var(--lime); }
.hub-tabs .icon-btn { margin-left: 6px; }
@media (max-width: 899px) {
  .hub { display: flex; flex-direction: column; }
  .hub-tabs { order: -1; margin: 0 0 20px; padding: 0 0 10px; border-top: 0; border-bottom: 1px solid var(--line-dark); flex-wrap: nowrap; justify-content: flex-start; gap: 2px 14px; overflow-x: auto; scrollbar-width: none; }
  .hub-tabs::-webkit-scrollbar { display: none; }
  .hub-tabs button:not(.icon-btn) { font-size: 13px; white-space: nowrap; padding: 6px 2px; }
  .hub-tabs .icon-btn { margin-left: auto; width: 32px; height: 32px; }
  .hub-stage { display: flex; flex-direction: column; align-items: stretch; position: relative; }
  .hub-lines { display: none; }
  .hub-mid { order: -1; display: grid; grid-template-columns: 84px 1fr; gap: 14px; align-items: center; justify-items: stretch; margin-bottom: 22px; }
  .hub-core { width: 84px; border-radius: 20px; box-shadow: 0 16px 36px -14px rgba(var(--lime-rgb), .5), inset 0 -4px 0 rgba(0,0,0,.08); }
  .hub-more { min-width: 0; padding: 12px 14px; justify-items: start; text-align: left; }
  .hub-more b { font-size: 19px; } .hub-more span { font-size: 12.5px; }
  .hub-stage::before { content: ""; position: absolute; left: 41px; top: 42px; bottom: 44px; width: 2px; background: repeating-linear-gradient(to bottom, var(--lime) 0 10px, transparent 10px 18px); opacity: .75; animation: spineflow 1.1s linear infinite; }
  .hub-col { display: contents; }
  .hub-card { position: relative; width: auto; margin: 0 0 12px 64px; grid-template-columns: 36px 1fr; padding: 12px 14px; gap: 2px 12px; }
  .hub-card::before { content: ""; position: absolute; left: -23px; top: 50%; width: 23px; height: 2px; background: var(--lime); opacity: .75; }
  .hub-card::after { content: ""; position: absolute; left: -27px; top: calc(50% - 4px); width: 8px; height: 8px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 3px var(--ink); }
  .hub-card .hub-ic { width: 36px; height: 36px; font-size: 11px; }
  .hub-card b { font-size: 14px; } .hub-card small { font-size: 12px; }
  .hub.is-filtered .hub-card:not(.is-match)::before, .hub.is-filtered .hub-card:not(.is-match)::after { opacity: .2; }
}
@keyframes spineflow { to { background-position: 0 18px; } }
@media (prefers-reduced-motion: reduce) { .hub-stage::before { animation: none; } }

/* ---------- Europe coverage map ---------- */
.cmap { display: grid; gap: clamp(28px, 4vw, 56px); align-items: center; }
@media (min-width: 1000px) { .cmap { grid-template-columns: .78fr 1.22fr; } }
.cmap-copy { display: grid; gap: 22px; align-content: center; }
.cmap-copy h2 { margin: 0; }
.cmap-stat { display: flex; gap: 20px; align-items: center; padding-top: 6px; }
.cmap-num { font-family: var(--font-display); font-stretch: 75%; font-weight: 800; font-size: clamp(72px, 8vw, 128px); line-height: .9; letter-spacing: -.02em; }
.cmap-stat span:last-child { font-size: 15px; color: var(--text-muted); max-width: 20ch; line-height: 1.45; }
.cmap-map { display: grid; gap: 14px; min-width: 0; }
.cmap-top { display: flex; justify-content: space-between; align-items: center; }
.cmap-eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); }
.cmap-svg { width: 100%; height: auto; display: block; }
.cm { fill: #e6e3d8; stroke: var(--cream); stroke-width: 1.2; stroke-linejoin: round; cursor: pointer; transition: fill .25s ease; }
.cm.is-req { fill: url(#cmHatch); }
.cm.is-live { fill: var(--forest); }
.cm.is-hub { fill: var(--forest-3); }
.cm.is-reach { fill: #6f8c58; }
.cm.is-reach.is-active { fill: var(--lime); }
.cmap-key .k-reach { background: #6f8c58; }
.cmap-pill.is-reach { background: #6f8c58; color: var(--white); }
.cm.is-active { fill: var(--lime); stroke: var(--ink); }
.cm.is-req.is-active { fill: #d4d0c1; stroke: var(--ink); }
.cm-lab { font-family: var(--font-mono); font-size: 15px; fill: var(--on-dark); pointer-events: none; text-anchor: middle; letter-spacing: .04em; }
.cm-lab.is-active { fill: var(--ink); }
.cmap-key { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 13px; color: var(--text-muted); align-items: center; }
.cmap-key i { display: inline-block; width: 12px; height: 12px; border-radius: 2px; margin-right: 8px; vertical-align: -1px; }
.cmap-key .k-live { background: var(--forest); } .cmap-key .k-hub { background: var(--forest-3); }
.cmap-key .k-req { background: #e6e3d8; background-image: repeating-linear-gradient(45deg, transparent 0 3px, rgba(10,15,12,.18) 3px 4.5px); }
.cmap-hint { margin-left: auto; }
.cmap-detail { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 18px 0 4px; border-top: 1px solid var(--line); min-height: 92px; }
.cmap-detail b { font-family: var(--font-display); font-stretch: 85%; font-size: 22px; font-weight: 700; display: block; margin-bottom: 4px; }
.cmap-detail p { font-size: 14.5px; color: var(--text-muted); margin: 0; max-width: 60ch; }
.cmap-pill { flex: none; padding: 8px 14px; border-radius: 999px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; background: var(--lime); color: var(--ink); }
.cmap-pill.is-req { background: transparent; border: 1px solid var(--line); color: var(--text-muted); }
.cmap-pill.is-hub { background: var(--forest); color: var(--lime); }
@media (max-width: 640px) { .cmap-hint { display: none; } .cmap-detail { flex-direction: column; align-items: flex-start; gap: 10px; } }

/* ---------- Portal frame (illustrative dashboard) ---------- */
.pf { background: #f4f6f2; color: #0f1712; border-radius: 18px; border: 1px solid rgba(10,15,12,.08); box-shadow: 0 40px 80px -30px rgba(0,0,0,.65); overflow: hidden; font-family: var(--font-body); font-size: 12px; line-height: 1.35; text-align: left; }
.pf a { color: inherit; text-decoration: none; }
.pf-top { display: flex; align-items: center; gap: 14px; padding: 11px 18px; background: var(--white); border-bottom: 1px solid #e6e8e3; }
.pf-top img { height: 15px; width: auto; }
.pf-crumb { font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: #6b746e; }
.pf-chip { margin-left: auto; padding: 4px 10px; border-radius: 999px; background: #eef7d2; color: #3b5a08; font-size: 11px; font-weight: 500; }
.pf-user { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: #3c443f; }
.pf-user i { width: 24px; height: 24px; border-radius: 50%; background: var(--ink); color: var(--lime); display: grid; place-items: center; font-style: normal; font-size: 9px; font-weight: 700; }
.pf-body { display: grid; grid-template-columns: 148px 1fr; }
.pf-nav { display: grid; align-content: start; gap: 2px; padding: 14px 10px; background: var(--white); border-right: 1px solid #e6e8e3; }
.pf-nav span { padding: 8px 10px; border-radius: 8px; color: #4b544e; font-size: 12px; display: flex; gap: 8px; align-items: center; }
.pf-nav span::before { content: ""; width: 11px; height: 11px; border-radius: 3px; border: 1.5px solid currentColor; opacity: .55; }
.pf-nav span.is-on { background: #eef7d2; color: #233a06; font-weight: 600; }
.pf-main { padding: 16px 18px 18px; display: grid; gap: 12px; min-width: 0; }
.pf-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; }
.pf-head .pf-title { line-height: 1.3; font-family: var(--font-body); font-size: 15px; font-weight: 600; margin: 0 0 2px; letter-spacing: -.01em; }
.pf-head p { margin: 0; color: #6b746e; font-size: 11.5px; }
.pf-period { padding: 6px 10px; border: 1px solid #dfe3dc; border-radius: 8px; background: var(--white); font-size: 11px; white-space: nowrap; }
.pf-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.pf-kpi { background: var(--white); border: 1px solid #e6e8e3; border-radius: 12px; padding: 12px 14px 12px; display: grid; gap: 3px; position: relative; overflow: hidden; min-width: 0; }
.pf-kpi::before { content: ""; position: absolute; left: 0; top: 0; right: 0; height: 4px; background: var(--kpi, var(--lime)); }
.pf-kpi--blue { --kpi: #2b3ad9; } .pf-kpi--amber { --kpi: #f2b53b; } .pf-kpi--purple { --kpi: #7c4dff; }
.pf-kpi small { font-size: 10.5px; color: #4b544e; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-kpi b { font-size: 21px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.pf-kpi span { font-size: 10px; color: #6b746e; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-kpi .up { color: #1f7a2f; } .pf-kpi .down { color: #b4461c; }
.pf-row { display: grid; grid-template-columns: 1.25fr 1fr; gap: 10px; }
.pf-panel { background: var(--white); border: 1px solid #e6e8e3; border-radius: 12px; padding: 12px 14px; display: grid; gap: 8px; align-content: start; min-width: 0; }
.pf-ph { display: flex; justify-content: space-between; align-items: center; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: #6b746e; }
.pf-ph a { color: #2b3ad9; text-transform: none; letter-spacing: 0; font-family: var(--font-body); font-size: 11px; }
.pf-big { font-size: 19px; font-weight: 600; letter-spacing: -.02em; }
.pf-big small { font-size: 10px; font-weight: 400; color: #8a938d; margin-left: 6px; letter-spacing: 0; }
.pf-chart svg { width: 100%; height: 90px; display: block; }
.pf-axis { display: flex; justify-content: space-between; font-size: 9.5px; color: #8a938d; }
.pf-ukmap svg { width: 100%; height: auto; max-height: 240px; display: block; margin: 0 auto; }
.pf-ukmap .hot { fill: rgba(180,223,52,.32); } .pf-ukmap .hot-c { fill: #5c8a0a; }
.pf-regions { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; font-size: 11px; }
.pf-regions li { display: flex; align-items: center; gap: 8px; padding: 4px 0; border-top: 1px solid #eef0ec; }
.pf-regions li i { width: 8px; height: 8px; border-radius: 50%; background: var(--lime-deep); flex: none; }
.pf-regions li span { margin-left: auto; font-variant-numeric: tabular-nums; color: #4b544e; }
.pf-foot { padding: 8px 18px; border-top: 1px solid #e6e8e3; background: var(--white); font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: #8a938d; }


/* ---------- Phones (portal on mobile) ---------- */
.phones { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: end; justify-items: center; max-width: 920px; margin: 0 auto; }
.phone { width: min(100%, 272px); background: #0b0f0d; border-radius: 42px; padding: 10px; box-shadow: 0 60px 100px -40px rgba(0,0,0,.9), inset 0 0 0 2px #2a2f2c; }
.ph-screen { background: #f4f6f2; color: #0f1712; border-radius: 34px; overflow: hidden; aspect-ratio: 9 / 18.6; position: relative; display: grid; align-content: start; gap: 10px; padding: 46px 12px 16px; font-family: var(--font-body); font-size: 12px; line-height: 1.35; text-align: left; }
.ph-screen::before { content: ""; position: absolute; top: 12px; left: 50%; width: 84px; height: 24px; transform: translateX(-50%); background: #0b0f0d; border-radius: 999px; }
.ph-top { font-size: 14px; font-weight: 600; letter-spacing: -.01em; display: flex; align-items: center; justify-content: space-between; }
.ph-top .live { font-size: 10px; font-weight: 500; color: #3b5a08; background: #eef7d2; padding: 3px 8px; border-radius: 999px; }
.phone--l { transform: rotate(-5deg) translateY(18px) scale(.94); } .phone--r { transform: rotate(5deg) translateY(18px) scale(.94); }
.phone .pf-kpis { grid-template-columns: 1fr 1fr; gap: 8px; } .phone .pf-kpi { padding: 10px 11px; } .phone .pf-kpi b { font-size: 17px; }
.phone .pf-panel { padding: 10px 12px; } .phone .pf-chart svg { height: 70px; } .phone .pf-ukmap svg { max-height: 220px; }
.ph-orders { display: grid; gap: 8px; }
.ph-order { background: var(--white); border: 1px solid #e6e8e3; border-radius: 10px; padding: 10px 12px; display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; }
.ph-order b { font-size: 12px; font-weight: 600; } .ph-order span { grid-column: 1; font-size: 10.5px; color: #6b746e; }
.ph-order i { grid-row: 1 / span 2; align-self: center; font-style: normal; font-size: 10px; padding: 3px 8px; border-radius: 999px; background: #eef0ec; color: #3c443f; white-space: nowrap; }
.ph-order i.ok { background: #eef7d2; color: #233a06; } .ph-order i.warn { background: #fdf0d5; color: #7a4b00; }
.phone-caps { display: grid; gap: 20px; margin: clamp(32px, 5vw, 56px) auto 0; max-width: 1100px; }
@media (min-width: 760px) { .phone-caps { grid-template-columns: repeat(3, 1fr); gap: 32px; border-top: 1px solid var(--line-dark); padding-top: 24px; } }
.phone-caps .n { display: block; font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--on-dark-muted); margin-bottom: 8px; }
.phone-caps b { display: block; font-family: var(--font-display); font-stretch: 85%; font-weight: 700; font-size: 18px; margin-bottom: 6px; }
.phone-caps p { color: var(--on-dark-muted); font-size: 14px; margin: 0; }
@media (max-width: 800px) { .phones { grid-template-columns: 1fr; gap: 28px; } .phone--l, .phone--r { transform: none; } .phone { width: min(100%, 300px); } }

/* ---------- FBS journey ---------- */
.journey { display: grid; gap: 20px; margin-top: clamp(28px, 4vw, 48px); }
.journey-frames { display: grid; gap: 20px; }
@media (min-width: 900px) { .journey-frames { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.jf { display: grid; gap: 12px; transition: transform .5s ease, opacity .5s ease; min-width: 0; }
.journey.is-live .jf:not(.is-on) { opacity: .55; transform: scale(.975); }
.jf-title { display: flex; gap: 12px; align-items: baseline; font-family: var(--font-display); font-stretch: 85%; font-weight: 700; font-size: 18px; }
.jf-title .n { font-family: var(--font-mono); font-size: 13px; color: var(--text-muted); font-weight: 500; }
.jf-frame { border-radius: 16px; overflow: hidden; border: 1px solid var(--line); background: var(--white); box-shadow: 0 30px 60px -30px rgba(10,15,12,.35); aspect-ratio: 4 / 3.5; display: grid; grid-template-rows: auto 1fr; font-size: 12px; line-height: 1.35; transition: box-shadow .4s ease, border-color .4s ease; }
.jf.is-on .jf-frame { border-color: var(--lime-deep); box-shadow: 0 0 0 3px rgba(var(--lime-rgb), .55), 0 30px 60px -30px rgba(10,15,12,.35); }
.jf-bar { display: flex; align-items: center; gap: 6px; padding: 8px 12px; border-bottom: 1px solid var(--line); font-family: var(--font-mono); font-size: 10px; letter-spacing: .04em; color: var(--text-muted); background: var(--paper); }
.jf-bar i { width: 8px; height: 8px; border-radius: 50%; background: #d9d5c8; }
.jf-bar .url { margin: 0 auto; padding: 3px 12px; border-radius: 999px; background: var(--white); border: 1px solid var(--line); }
.jf-cap { font-size: 13.5px; color: var(--text-muted); text-align: center; }
.jf-store { background: var(--forest); color: var(--on-dark); display: grid; grid-template-columns: 1.15fr .85fr; align-items: center; padding: 18px; gap: 10px; }
.jf-store .eyebrow { font-size: 9px; color: var(--on-dark-muted); margin-bottom: 0; }
.jf-store h5 { font-family: var(--font-display); font-stretch: 80%; font-weight: 800; font-size: 24px; line-height: 1; margin: 8px 0 12px; letter-spacing: -.01em; }
.jf-store .btn { min-height: 34px; padding: 0 14px; font-size: 11px; }
.jf-bottle { justify-self: center; width: auto; height: 100%; max-height: 160px; }
.jf-portal { padding: 14px; display: grid; gap: 10px; align-content: start; background: #f4f6f2; color: #0f1712; }
.jf-card { background: var(--white); border: 1px solid #e6e8e3; border-radius: 10px; padding: 10px 12px; display: grid; gap: 6px; }
.jf-card .row { display: flex; justify-content: space-between; gap: 10px; }
.jf-card .muted { color: #6b746e; }
.jf-steps { display: grid; gap: 7px; margin: 0; padding: 0 4px; }
.jf-steps li { list-style: none; display: flex; gap: 10px; align-items: center; font-size: 11.5px; color: #6b746e; }
.jf-steps li::before { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid #cfd5cc; flex: none; background: var(--white); }
.jf-steps li.done { color: #0f1712; } .jf-steps li.done::before { background: var(--lime); border-color: var(--lime-deep); }
.jf-steps li.now { color: #0f1712; font-weight: 500; } .jf-steps li.now::before { border-color: var(--ink); box-shadow: inset 0 0 0 3px var(--white), inset 0 0 0 8px var(--ink); }
.jf-door { padding: 14px; display: grid; gap: 10px; align-content: start; background: linear-gradient(180deg, #f4f6f2, #eaede6); color: #0f1712; }
.jf-notif { background: var(--white); border-radius: 14px; padding: 12px 14px; box-shadow: 0 12px 30px -16px rgba(10,15,12,.35); display: grid; gap: 4px; }
.jf-notif b { font-size: 13px; } .jf-notif small { color: #6b746e; font-size: 11px; }
.jf-track { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; font-size: 10px; text-align: center; color: #6b746e; }
.jf-track span { padding-top: 8px; border-top: 2px solid #dfe3dc; } .jf-track span.done { border-color: var(--lime-deep); color: #0f1712; }
.journey-ctl { display: grid; grid-template-columns: 1fr auto; gap: 12px 20px; align-items: center; }
.journey-steps { display: flex; gap: 10px; align-items: center; justify-content: center; font-size: 13px; color: var(--text-muted); flex-wrap: wrap; }
.journey-steps span { padding: 6px 12px; border-radius: 999px; transition: background .3s ease, color .3s ease; } .journey-steps span.is-on { background: var(--lime); color: var(--ink); }
.journey-steps i { width: 22px; height: 1px; background: var(--line); }
.journey-btns { display: flex; gap: 8px; }
.journey-bar { grid-column: 1 / -1; height: 3px; background: var(--line); border-radius: 2px; overflow: hidden; }
.journey-bar i { display: block; height: 100%; width: 0; background: var(--ink); }
@media (max-width: 899px) { .jf-frame { aspect-ratio: auto; min-height: 240px; } .journey-ctl { grid-template-columns: 1fr; justify-items: center; } }

/* ---------- Portal frame: fit narrow columns ---------- */
.pf { container-type: inline-size; }
.pf-kpi small, .pf-kpi span { white-space: normal; overflow: visible; }
.pf-kpi b { font-size: 19px; }
@container (max-width: 700px) {
  .pf-body { grid-template-columns: 128px 1fr; }
  .pf-kpis { grid-template-columns: 1fr 1fr; }
  .pf-kpi b { font-size: 18px; }
}
@container (max-width: 560px) {
  .pf-body { grid-template-columns: 1fr; }
  .pf-nav { display: flex; overflow-x: auto; padding: 8px; gap: 4px; scrollbar-width: none; border-right: 0; border-bottom: 1px solid #e6e8e3; }
  .pf-nav span { white-space: nowrap; padding: 6px 10px; } .pf-nav span::before { display: none; }
  .pf-row { grid-template-columns: 1fr; } .pf-ukmap svg { max-height: 200px; }
  .pf-crumb, .pf-user { display: none; } .pf-main { padding: 14px; }
}
.phone .pf-kpis { grid-template-columns: 1fr 1fr; }

/* ---------- Receipt (how we buy) ---------- */
.receipt-wrap { display: grid; justify-items: center; align-self: center; }
.receipt { width: min(100% - 20px, 380px); background: #fffdf6; color: var(--ink); padding: 26px 26px 38px; font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .01em; transform: rotate(-1.5deg); box-shadow: 0 34px 70px -24px rgba(10,15,12,.6); clip-path: polygon(0 0, 100% 0, 100% 97.5%, 96% 100%, 92% 97.5%, 88% 100%, 84% 97.5%, 80% 100%, 76% 97.5%, 72% 100%, 68% 97.5%, 64% 100%, 60% 97.5%, 56% 100%, 52% 97.5%, 48% 100%, 44% 97.5%, 40% 100%, 36% 97.5%, 32% 100%, 28% 97.5%, 24% 100%, 20% 97.5%, 16% 100%, 12% 97.5%, 8% 100%, 4% 97.5%, 0 100%); }
.rc-head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 14px; border-bottom: 2px solid var(--ink); margin-bottom: 6px; }
.rc-head img { height: 16px; width: auto; }
.rc-head span { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: rgba(10,15,12,.6); }
.rc-line { display: flex; justify-content: space-between; gap: 14px; padding: 9px 0; border-bottom: 1px dashed rgba(10,15,12,.22); }
.rc-line b { font-weight: 500; white-space: nowrap; }
.rc-total { display: flex; justify-content: space-between; gap: 14px; align-items: baseline; margin-top: 12px; padding-top: 12px; border-top: 2px solid var(--ink); font-family: var(--font-display); font-stretch: 85%; font-weight: 700; text-transform: uppercase; font-size: 15px; letter-spacing: .02em; }
.rc-total b { color: #3b5a08; background: var(--lime); padding: 2px 6px; }
.rc-foot { margin-top: 16px; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: rgba(10,15,12,.6); text-align: center; }

/* ---------- Connected (particles + six cards) ---------- */
.connected { background: var(--paper); border: 1px solid var(--line); border-radius: 24px; padding: clamp(18px, 3vw, 36px); display: grid; gap: 16px; }
.cn-top, .cn-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.cn-foot { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); }
.cn-stage { display: grid; grid-template-columns: 1fr minmax(0, 1.4fr) 1fr; gap: 24px clamp(16px, 3vw, 48px); align-items: center; }
.cn-col { display: grid; gap: clamp(16px, 3vw, 44px); }
.cn-canvas { width: 100%; aspect-ratio: 1; max-width: 560px; justify-self: center; display: block; }
.cn-card { position: relative; display: grid; gap: 4px; padding: 20px 22px 22px; background: var(--white); border-radius: 18px; color: var(--text); text-decoration: none; box-shadow: 0 20px 44px -28px rgba(10,15,12,.4); border: 1px solid rgba(10,15,12,.06); transition: transform .25s ease, box-shadow .25s ease; }
.cn-card:hover { transform: translateY(-3px); box-shadow: 0 26px 50px -26px rgba(10,15,12,.5); border-color: var(--lime-deep); }
.cn-card .n { font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; color: var(--text-muted); }
.cn-card b { font-family: var(--font-display); font-stretch: 85%; font-weight: 700; font-size: 20px; line-height: 1.1; padding-right: 40px; }
.cn-card small { font-size: 13px; color: var(--text-muted); }
.cn-card i { position: absolute; right: 18px; bottom: 18px; width: 28px; height: 28px; color: #5c8a0a; }
.cn-card i svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 899px) { .cn-stage { grid-template-columns: 1fr 1fr; gap: 12px; } .cn-canvas { grid-column: 1 / -1; order: -1; max-width: 340px; } .cn-col { gap: 12px; } .cn-card { padding: 14px 14px 16px; } .cn-card b { font-size: 15px; padding-right: 28px; } .cn-card small { font-size: 12px; } .cn-card i { width: 20px; height: 20px; right: 12px; bottom: 12px; } }
@media (max-width: 480px) { .cn-stage { grid-template-columns: 1fr; } }

/* ---------- Code sample (API page) ---------- */
.split > * { min-width: 0; }
.code { min-width: 0; max-width: 100%; background: var(--ink-2); border: 1px solid var(--line-dark); border-radius: 14px; overflow: hidden; font-family: var(--font-mono); font-size: 12.5px; line-height: 1.55; }
.code pre { margin: 0; padding: 18px 20px; overflow-x: auto; color: var(--on-dark); white-space: pre; }
@media (max-width: 640px) { .code { font-size: 11px; } .code pre { padding: 14px; } }
.code code { font-family: inherit; }
.code-bar { display: flex; justify-content: space-between; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--line-dark); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--on-dark-muted); }
.code-bar--foot { border-bottom: 0; border-top: 1px solid var(--line-dark); color: var(--lime); }
.c-ok { color: var(--lime); }

/* ---------- Hero laptop: rotating screens ---------- */
.pill-rot { position: relative; }
.pill-rot i { position: absolute; inset: 0; display: grid; place-items: center; font-style: normal; opacity: 0; animation: shotrot 18s infinite; }
.viewport-rot { position: relative; height: 380px; overflow: hidden; background: #f4f6f2; }
.shot { position: absolute; inset: 0; opacity: 0; overflow: hidden; }
/* Hero stays on the Amazon screen: no slideshow */
.pill-rot i, .shot { animation: none !important; }
.pill-rot i:first-child, .shot:first-child { opacity: 1; }
.pill-rot i:not(:first-child), .shot:not(:first-child) { display: none; }
.pill-rot i, .shot { animation-duration: 24s; }
.pill-rot i:nth-child(2), .shot:nth-child(2) { animation-delay: 6s; }
.pill-rot i:nth-child(3), .shot:nth-child(3) { animation-delay: 12s; }
.pill-rot i:nth-child(4), .shot:nth-child(4) { animation-delay: 18s; }
@keyframes shotrot { 0% { opacity: 0; } 2.5%, 23% { opacity: 1; } 27%, 100% { opacity: 0; } }
.pill-rot i:first-child, .shot:first-child { animation-delay: -0.6s; }
.shot-amazon { background: var(--white); }
.pf--hero { border-radius: 0; border: 0; box-shadow: none; }
.shot-store { background: var(--forest); color: var(--on-dark); display: grid; grid-template-rows: auto 1fr; }
.st-nav { display: flex; justify-content: space-between; align-items: center; padding: 12px 22px; border-bottom: 1px solid var(--line-dark); font-family: var(--font-display); font-weight: 800; font-size: 13px; letter-spacing: .08em; }
.st-nav span { font-family: var(--font-body); font-weight: 400; font-size: 11px; color: var(--on-dark-muted); letter-spacing: 0; }
.st-hero { display: grid; grid-template-columns: 1.1fr .9fr; align-items: center; padding: 22px 28px; gap: 16px; }
.st-hero .eyebrow { font-size: 9px; color: var(--on-dark-muted); margin-bottom: 0; }
.st-hero .st-title { font-family: var(--font-display); font-stretch: 80%; font-weight: 800; font-size: 40px; line-height: .95; margin: 10px 0 16px; letter-spacing: -.01em; }
.st-hero .btn { min-height: 38px; padding: 0 16px; font-size: 12px; }
.st-hero small { display: block; margin-top: 12px; font-size: 11px; color: var(--on-dark-muted); }
.st-hero .jf-bottle { height: 240px; max-height: none; justify-self: center; }
.shot-grocery { background: var(--white); color: #0f1712; display: grid; grid-template-rows: auto 1fr; font-family: var(--font-body); }
.gr-top { display: flex; align-items: center; gap: 12px; padding: 10px 16px; background: #f1f3ee; border-bottom: 1px solid #e3e6df; }
.gr-logo { width: 26px; height: 26px; border-radius: 6px; background: var(--ink); flex: none; }
.gr-search { flex: 1; height: 30px; border-radius: 6px; background: var(--white); border: 1px solid #d9ded6; display: flex; align-items: center; padding: 0 12px; font-size: 12px; }
.gr-basket { font-size: 11px; font-weight: 600; }
.gr-body { display: grid; grid-template-columns: 118px 1fr; }
.gr-side { padding: 14px 16px; border-right: 1px solid #e3e6df; display: grid; align-content: start; gap: 8px; font-size: 11px; color: #4b544e; }
.gr-side b { color: #0f1712; } .gr-side span { padding: 6px 8px; border-radius: 6px; background: #f1f3ee; }
.gr-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 14px; align-content: start; }
.gr-tile { display: grid; justify-items: center; gap: 3px; padding: 10px 8px; border: 1px solid #e3e6df; border-radius: 8px; font-size: 11px; text-align: center; }
.gr-tile svg { height: 60px; width: auto; } .gr-tile b { font-size: 13px; } .gr-tile span { color: #4b544e; }
.gr-tile em { font-style: normal; margin-top: 4px; padding: 5px 14px; border-radius: 999px; background: var(--lime); font-weight: 700; font-size: 11px; }
@media (prefers-reduced-motion: reduce) { .shot, .pill-rot i { animation: none; } .shot:first-child, .pill-rot i:first-child { opacity: 1; } }

/* ---------- Data guides: charts, tables, stats ---------- */
.article-hero--data { background: var(--ink); color: var(--on-dark); }
.article-hero--data .lede, .article-hero--data .meta { color: var(--on-dark-muted); }
.prose--data { max-width: 860px; }
.fig { margin: 1.8em 0 2.2em; }
.fig .chart { width: 100%; height: auto; display: block; }
.fig figcaption { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; font-size: 13px; color: var(--text-muted); }
.fig figcaption span { font-weight: 600; color: var(--text); }
.c-lab { font-family: var(--font-body); font-size: 13px; fill: var(--text); }
.c-val { font-family: var(--font-mono); font-size: 12px; fill: var(--text); }
.c-axis { font-family: var(--font-mono); font-size: 11px; fill: var(--text-muted); }
.c-grid { stroke: rgba(10,15,12,.1); stroke-width: 1; }
.c-bg { fill: rgba(10,15,12,.05); }
.c-legend { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 10px 0 0; padding: 0; font-size: 13px; color: var(--text-muted); }
.c-legend i { display: inline-block; width: 14px; height: 4px; border-radius: 2px; margin-right: 8px; vertical-align: 3px; }
.table-wrap { overflow-x: auto; margin: 1.4em 0 2em; -webkit-overflow-scrolling: touch; }
.data-table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.35; }
.data-table th { text-align: left; font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); padding: 10px 12px 10px 0; border-bottom: 2px solid var(--ink); white-space: nowrap; }
.data-table td { padding: 10px 12px 10px 0; border-bottom: 1px solid var(--line); vertical-align: top; font-variant-numeric: tabular-nums; }
.data-table td:first-child { font-weight: 600; }
.stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px; background: var(--line); border: 1px solid var(--line); margin: 1.6em 0 2em; }
@media (min-width: 700px) { .stat-grid { grid-template-columns: repeat(4, 1fr); } }
.stat-tile { background: var(--paper); padding: 20px 18px; display: grid; gap: 6px; }
.stat-tile b { font-family: var(--font-display); font-stretch: 78%; font-weight: 800; font-size: clamp(30px, 3.6vw, 44px); line-height: 1; letter-spacing: -.02em; }
.stat-tile span { font-size: 13px; color: var(--text-muted); line-height: 1.35; }
.prose .src { font-size: 14px; color: var(--text-muted); }
.prose .small { font-size: 13px; } .prose .muted { color: var(--text-muted); }

/* ---------- Leaderboard ---------- */
.lb-summary { display: grid; gap: 20px; margin: 1.6em 0 2.4em; }
@media (min-width: 800px) { .lb-summary { grid-template-columns: repeat(3, 1fr); } }
.lb-summary h3 { margin: 0 0 10px; font-size: 18px; }
.lb-movers { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 14px; line-height: 1.35; }
.lb-movers li { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; align-items: center; }
.lb-movers li b { font-weight: 600; } .lb-movers li small { grid-column: 2; color: var(--text-muted); font-size: 12px; }
.lb-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 2em; position: sticky; top: 72px; z-index: 5; background: var(--paper); padding: 10px 0; border-bottom: 1px solid var(--line); }
.lb-nav a { font-family: var(--font-display); font-stretch: 85%; font-weight: 700; font-size: 13px; letter-spacing: .03em; text-transform: uppercase; padding: 8px 12px; border: 1px solid var(--line); text-decoration: none; color: var(--text); }
.lb-nav a:hover { background: var(--ink); color: var(--lime); border-color: var(--ink); }
.lb-cat { margin: 0 0 3em; scroll-margin-top: 140px; }
.lb-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; border-bottom: 2px solid var(--ink); padding-bottom: 8px; margin-bottom: 4px; }
.lb-head h2 { margin: 0; font-size: clamp(28px, 3.4vw, 40px); } .lb-head span { font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); white-space: nowrap; }
.lb-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.lb-table th { text-align: left; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); padding: 10px 10px 8px 0; border-bottom: 1px solid var(--line); }
.lb-table td { padding: 10px 10px 10px 0; border-bottom: 1px solid var(--line); vertical-align: middle; font-variant-numeric: tabular-nums; }
.lb-pos { font-family: var(--font-display); font-stretch: 80%; font-weight: 800; font-size: 22px; width: 36px; }
.lb-name b { display: block; font-weight: 600; } .lb-name span { display: block; font-size: 12.5px; color: var(--text-muted); }
.lb-bar { width: 26%; min-width: 120px; } .lb-bar i { display: block; height: 8px; background: var(--line); border-radius: 4px; position: relative; overflow: hidden; }
.lb-bar i::after { content: ""; position: absolute; inset: 0; width: var(--w); background: var(--lime-deep); border-radius: 4px; }
.lb-bar em { font-style: normal; font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); }
.mv-badge { display: inline-block; min-width: 44px; text-align: center; font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: .04em; padding: 4px 7px; border-radius: 4px; }
.mv-up { background: #e3f5c4; color: #2f5a05; } .mv-down { background: #f7dcd3; color: #8a2d13; } .mv-new { background: var(--ink); color: var(--lime); } .mv-same { background: #ecece6; color: var(--text-muted); }
@media (max-width: 640px) { .lb-table th:nth-child(6), .lb-table td:nth-child(6) { display: none; } .lb-bar { min-width: 80px; } .lb-nav { top: 64px; } }

/* ---------- Why cards with data ---------- */
.why-stat { display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px; }
.why-stat b { font-family: var(--font-display); font-stretch: 78%; font-weight: 800; font-size: clamp(40px, 4.4vw, 56px); line-height: 1; color: var(--lime); letter-spacing: -.02em; }
.why-stat span { font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--on-dark-muted); max-width: 22ch; line-height: 1.35; }
.why-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.why-chips span { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .04em; padding: 5px 9px; border: 1px solid var(--line-dark); border-radius: 999px; color: var(--on-dark-muted); }
.why-bar { margin-top: 16px; height: 6px; background: var(--line-dark); border-radius: 3px; overflow: hidden; } .why-bar i { display: block; height: 100%; width: var(--w); background: var(--lime); }
.why-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 16px; }
.why-steps span { font-family: var(--font-mono); font-size: 10px; letter-spacing: .04em; color: var(--on-dark-muted); padding-top: 8px; border-top: 2px solid var(--line-dark); } .why-steps span.on { border-top-color: var(--lime); color: var(--on-dark); }
.why-ticks { display: flex; gap: 3px; margin-top: 16px; align-items: flex-end; height: 28px; } .why-ticks i { flex: 1; background: var(--lime); opacity: .85; border-radius: 1px; }

/* ---------- Market pulse strip ---------- */
.pulse { display: grid; gap: 2px; background: var(--line); border: 1px solid var(--line); }
@media (min-width: 700px) { .pulse { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .pulse { grid-template-columns: repeat(4, 1fr); } }
.pulse a { display: grid; gap: 6px; padding: 24px 22px; background: var(--paper); text-decoration: none; color: var(--text); transition: background .2s ease; }
.pulse a:hover { background: var(--white); }
.pulse b { font-family: var(--font-display); font-stretch: 78%; font-weight: 800; font-size: clamp(34px, 3.8vw, 48px); line-height: 1; letter-spacing: -.02em; }
.pulse span { font-size: 14px; color: var(--text-muted); line-height: 1.4; }
.pulse small { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); margin-top: 6px; }
.pulse small::after { content: " →"; }

/* ---------- Introduce your brand: lookup ---------- */
.lookup { display: grid; gap: 12px; padding: 20px; background: var(--ink); color: var(--on-dark); border-radius: 14px; }
.lookup .form-note { color: var(--on-dark-muted); }
.lookup-row { display: grid; gap: 10px; }
@media (min-width: 640px) { .lookup-row { grid-template-columns: 1fr auto; align-items: end; } }
.lookup-label { color: var(--on-dark-muted) !important; }
.lookup-label input { background: var(--white); color: var(--text); border-color: transparent; font-size: 17px; }
.lookup-go { min-height: 50px; white-space: nowrap; }
.lookup.is-off .lookup-row, .lookup.is-off > .form-note:first-of-type { display: none; }
.lookup-stage { display: grid; gap: 16px; padding-top: 6px; }
@media (min-width: 640px) { .lookup-stage { grid-template-columns: 1.1fr 1fr; align-items: center; } }
.lookup-scan { position: relative; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: #0f1713; border: 1px solid var(--line-dark); }
.lookup-grid { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: repeat(8, 1fr); padding: 10px; gap: 6px; }
.lookup-grid i { border-radius: 50%; background: var(--lime); opacity: .08; animation: lkpulse 2.4s ease-in-out infinite; transform: scale(.5); }
@keyframes lkpulse { 0%, 100% { opacity: .08; transform: scale(.5); } 50% { opacity: .9; transform: scale(1); } }
.lookup-beam { position: absolute; top: 0; bottom: 0; width: 18%; background: linear-gradient(90deg, transparent, rgba(var(--lime-rgb), .22), transparent); animation: lkbeam 2.2s linear infinite; }
@keyframes lkbeam { from { left: -20%; } to { left: 100%; } }
.lookup-name { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-family: var(--font-display); font-stretch: 80%; font-weight: 800; font-size: clamp(22px, 3vw, 34px); letter-spacing: -.01em; text-transform: uppercase; color: var(--lime); text-shadow: 0 0 24px rgba(var(--lime-rgb), .45); text-align: center; padding: 0 16px; }
.lookup-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .04em; color: var(--on-dark-muted); }
.lookup-steps li { display: flex; align-items: center; gap: 10px; }
.lookup-steps li::before { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--line-dark); flex: none; }
.lookup-steps li.now { color: var(--on-dark); } .lookup-steps li.now::before { border-color: var(--lime); box-shadow: inset 0 0 0 3px #0a0f0c, inset 0 0 0 8px var(--lime); animation: lkspin 1s linear infinite; }
.lookup-steps li.done { color: var(--on-dark); } .lookup-steps li.done::before { background: var(--lime); border-color: var(--lime); }
@keyframes lkspin { to { transform: rotate(360deg); } }
.snapshot { display: grid; gap: 14px; padding: 18px; background: var(--white); color: var(--text); border-radius: 12px; animation: snapin .5s ease both; }
@keyframes snapin { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.snap-head { display: flex; justify-content: space-between; gap: 14px; align-items: flex-start; }
.snap-eyebrow { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); }
.snap-head h3 { margin: 4px 0 2px; font-size: clamp(22px, 2.6vw, 30px); }
.snap-sub { margin: 0; font-size: 13px; color: var(--text-muted); }
.snap-pill { flex: none; padding: 6px 12px; border-radius: 999px; background: var(--lime); font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.snap-summary { margin: 0; font-size: 15px; line-height: 1.55; }
.snap-grid { display: grid; gap: 14px; } @media (min-width: 640px) { .snap-grid { grid-template-columns: 1fr 1fr; } }
.snap-block { display: grid; gap: 8px; align-content: start; } .snap-block > span { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
.snap-block ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 13.5px; } .snap-block li b { display: block; font-weight: 600; } .snap-block li span { color: var(--text-muted); font-size: 12.5px; }
.snap-chips { display: flex; flex-wrap: wrap; gap: 6px; } .snap-chips span { font-size: 12px; padding: 5px 10px; border-radius: 999px; background: var(--paper); border: 1px solid var(--line); }
.snap-fit { padding: 12px 14px; background: var(--cream); border-left: 3px solid var(--lime); font-size: 14px; line-height: 1.5; }
.snap-fit:empty { display: none; }
.snap-foot { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; font-size: 12.5px; color: var(--text-muted); }
.snap-foot a { color: var(--forest-3); } .snap-again { background: none; border: 0; padding: 0; font: inherit; color: var(--text-muted); text-decoration: underline; cursor: pointer; margin-left: auto; }
@media (prefers-reduced-motion: reduce) { .lookup-grid i, .lookup-beam, .lookup-steps li.now::before { animation: none; } }

/* ---------- Introduce your brand: immersive search ---------- */
.intro-hero { position: relative; min-height: calc(100svh - 72px); display: grid; align-items: center; background: var(--ink); color: var(--on-dark); overflow: hidden; padding: clamp(56px, 8vw, 96px) 0; }
.intro-field { position: absolute; inset: 0; pointer-events: none; }
.lookup-grid--full { display: grid; grid-template-columns: repeat(20, 1fr); grid-template-rows: repeat(16, 1fr); gap: 0; padding: 24px; opacity: .55; }
.lookup-grid--full i { justify-self: center; align-self: center; width: 5px; height: 5px; }
.intro-hero .lookup-beam { opacity: 0; transition: opacity .6s ease; }
.intro-hero.is-busy .lookup-beam { opacity: 1; }
.intro-hero.is-busy .lookup-grid--full { opacity: .9; }
.intro-wrap { position: relative; z-index: 1; display: grid; gap: 28px; justify-items: center; text-align: center; }
.intro-ask { display: grid; gap: 22px; justify-items: center; max-width: 900px; transition: opacity .4s ease, transform .4s ease; }
.intro-ask h1 { font-size: clamp(48px, 8vw, 120px); margin: 0; }
.intro-hero.is-busy .intro-ask, .intro-hero.is-done .intro-ask { opacity: .35; transform: scale(.96); }
.intro-hero.is-done .intro-ask h1, .intro-hero.is-done .intro-ask .intro-note { display: none; }
.intro-search { display: flex; width: min(100%, 760px); background: var(--white); border-radius: 999px; padding: 6px 6px 6px 28px; box-shadow: 0 30px 80px -30px rgba(var(--lime-rgb), .35), 0 0 0 1px rgba(255,255,255,.08); }
.intro-search input { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; font-size: clamp(18px, 2.2vw, 24px); color: var(--text); padding: 12px 0; outline: none; }
.intro-search input::placeholder { color: #8a938d; }
.intro-go { display: inline-flex; align-items: center; gap: 10px; border: 0; border-radius: 999px; background: var(--ink); color: var(--lime); font-family: var(--font-display); font-stretch: 85%; font-weight: 700; font-size: 15px; letter-spacing: .03em; text-transform: uppercase; padding: 0 22px; min-height: 52px; cursor: pointer; transition: transform .15s ease; }
.intro-go:hover { transform: translateY(-1px); } .intro-go i { font-style: normal; }
.intro-note { color: var(--on-dark-muted); font-size: 15px; margin: 0; } .intro-note a { color: var(--on-dark); }
.lookup-stage--hero { display: grid; gap: 22px; justify-items: center; max-width: 760px; width: 100%; }
.lookup-name--hero { position: static; transform: none; font-size: clamp(40px, 7vw, 96px); line-height: .95; padding: 0; }
.lookup-steps--hero { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); width: 100%; gap: 14px; font-size: 12px; }
.lookup-steps--hero li { flex-direction: column; text-align: center; gap: 8px; }
.snapshot--hero { width: min(100%, 820px); text-align: left; }
.snap-next { justify-self: start; margin-top: 4px; }
.intro-status { color: var(--on-dark-muted); font-size: 15px; max-width: 60ch; margin: 0; }
@media (max-width: 640px) {
  .intro-hero { min-height: calc(100svh - 64px); }
  .intro-search { flex-direction: column; border-radius: 22px; padding: 10px; gap: 8px; }
  .intro-search input { padding: 12px 14px; }
  .intro-go { justify-content: center; }
  .lookup-grid--full { grid-template-columns: repeat(10, 1fr); }
  .lookup-steps--hero { grid-template-columns: 1fr 1fr; }
}

/* ---------- Snapshot: marketplace figures ---------- */
.snap-amz { display: grid; gap: 10px; padding: 14px; background: var(--ink); color: var(--on-dark); border-radius: 12px; }
.snap-amz-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 14px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--on-dark-muted); }
.snap-amz-head small { font-size: 10.5px; letter-spacing: .04em; text-transform: none; }
.snap-amz-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 640px) { .snap-amz-grid { grid-template-columns: repeat(4, 1fr); } }
.snap-amz-grid div { display: grid; gap: 2px; padding: 10px 12px; background: rgba(255,255,255,.04); border: 1px solid var(--line-dark); border-radius: 8px; }
.snap-amz-grid b { font-family: var(--font-display); font-stretch: 78%; font-weight: 800; font-size: 26px; line-height: 1; color: var(--lime); }
.snap-amz-grid span { font-size: 11.5px; color: var(--on-dark-muted); }
.snap-amz-top { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 12.5px; }
.snap-amz-top li b { display: block; font-weight: 500; color: var(--on-dark); } .snap-amz-top li span { color: var(--on-dark-muted); font-size: 11.5px; }
.snap-amz-top:empty { display: none; }

/* ---------- Label compliance: market switcher ---------- */
.mk { margin: 1.6em 0 2.4em; }
.mk-tabs { display: flex; flex-wrap: wrap; gap: 8px; position: sticky; top: 72px; z-index: 5; background: var(--paper); padding: 10px 0; border-bottom: 1px solid var(--line); margin-bottom: 1.4em; }
.mk-tab { font: inherit; font-family: var(--font-display); font-stretch: 85%; font-weight: 700; font-size: 13px; letter-spacing: .03em; text-transform: uppercase; padding: 9px 14px; border: 1px solid var(--line); background: var(--white); color: var(--text); cursor: pointer; }
.mk-tab.is-on, .mk-tab:hover { background: var(--ink); color: var(--lime); border-color: var(--ink); }
.mk-panel h2 { margin-top: .4em; }
.mk-intro { font-size: 17px; }
.ticks--rules { gap: 14px; margin: 1.2em 0 1.6em; }
.ticks--rules li { padding-left: 30px; font-size: 15.5px; }
.ticks--rules li b { display: block; font-weight: 600; margin-bottom: 2px; }
.ticks--rules li span { color: var(--text-muted); }
@media (max-width: 640px) { .mk-tabs { top: 64px; } .mk-tab { font-size: 12px; padding: 8px 10px; } }

/* ---------- Snapshot: shelf check ---------- */
.snap-check { display: grid; gap: 12px; padding: 14px; background: var(--forest); color: var(--on-dark); border-radius: 12px; }
.snap-check .snap-amz-head em { font-style: normal; color: var(--lime); }
.snap-check-line { margin: 0; font-size: 13px; line-height: 1.5; color: var(--on-dark); } .snap-check-line:empty { display: none; }
.snap-check-table { margin: 4px 0 0; } .snap-check-table .data-table { font-size: 12.5px; color: var(--on-dark); }
.snap-check-table .data-table th { color: var(--on-dark-muted); border-bottom-color: var(--line-dark); } .snap-check-table .data-table td { border-bottom-color: var(--line-dark); }
.snap-flags { display: grid; gap: 6px; } .snap-flags > span { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--on-dark-muted); }
.snap-flags ul { margin: 0; padding: 0 0 0 18px; display: grid; gap: 5px; font-size: 12.5px; line-height: 1.45; color: var(--on-dark); }

.ts-slot { height: 0; overflow: hidden; }

/* ---------- /data: the UK drinks shelf in numbers ---------- */
.dp-hero { position: relative; overflow: hidden; background: var(--ink); color: var(--on-dark); padding: clamp(56px, 8vw, 104px) 0 clamp(40px, 6vw, 72px); }
.dp-hero .wrap { position: relative; }
.dp-grid { position: absolute; inset: 0; background-image: radial-gradient(rgba(var(--lime-rgb), .22) 1px, transparent 1.4px); background-size: 26px 26px; mask-image: radial-gradient(ellipse at 30% 20%, #000 20%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse at 30% 20%, #000 20%, transparent 75%); pointer-events: none; }
.dp-hero .eyebrow { color: var(--lime); display: inline-flex; align-items: center; gap: 10px; }
.dp-live { width: 9px; height: 9px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 0 rgba(var(--lime-rgb), .6); animation: dplive 2s ease-out infinite; }
@keyframes dplive { 0% { box-shadow: 0 0 0 0 rgba(var(--lime-rgb), .65); } 70% { box-shadow: 0 0 0 10px rgba(var(--lime-rgb), 0); } 100% { box-shadow: 0 0 0 0 rgba(var(--lime-rgb), 0); } }
.dp-hero h1 { max-width: 14ch; }
.dp-hero .hl { color: var(--lime); }
.dp-hero .lede { color: var(--on-dark-muted); max-width: 64ch; }
.dp-kpis { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line-dark); border: 1px solid var(--line-dark); margin: 36px 0 20px; }
@media (min-width: 860px) { .dp-kpis { grid-template-columns: repeat(4, 1fr); } }
.dp-kpis div { background: var(--ink); padding: 22px 20px; display: grid; gap: 8px; }
.dp-kpis b { font-family: var(--font-display); font-stretch: 78%; font-weight: 800; font-size: clamp(36px, 4.4vw, 56px); line-height: .95; letter-spacing: -.02em; color: var(--lime); }
.dp-kpis span { font-size: 13px; color: var(--on-dark-muted); line-height: 1.35; }
.dp-hero-hl { display: grid; gap: 10px; }
@media (min-width: 760px) { .dp-hero-hl { grid-template-columns: 1fr 1fr; } }
.dp-hero-hl a { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; align-items: center; padding: 14px 16px; border: 1px solid var(--line-dark); background: rgba(255,255,255,.03); color: var(--on-dark); text-decoration: none; transition: background .2s ease, border-color .2s ease; }
.dp-hero-hl a:hover { background: rgba(var(--lime-rgb), .08); border-color: rgba(var(--lime-rgb), .5); }
.dp-hero-hl a b { font-weight: 600; font-size: 15px; line-height: 1.25; }
.dp-hero-hl a span:last-child { grid-column: 2; font-size: 12.5px; color: var(--on-dark-muted); }
.dp-hero-hl .mv-badge { grid-row: span 2; font-size: 13px; padding: 8px 10px; }
.mv-cut { background: #dbe7ff; color: #1d3f9e; }

/* category bar */
.dp-catbar { position: sticky; top: 72px; z-index: 6; background: var(--paper); display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; justify-content: space-between; padding: 12px 0; margin: 0 0 28px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.dp-cats { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; max-width: 100%; }
.dp-cats::-webkit-scrollbar { display: none; }
.dp-cat { display: grid; gap: 2px; padding: 8px 14px; border: 1px solid var(--line); background: transparent; color: var(--text); cursor: pointer; font-family: var(--font-display); font-stretch: 85%; font-weight: 700; font-size: 13px; letter-spacing: .03em; text-transform: uppercase; text-align: left; white-space: nowrap; transition: background .15s ease, color .15s ease, border-color .15s ease; }
.dp-cat small { font-family: var(--font-mono); font-size: 10px; letter-spacing: .04em; text-transform: none; color: var(--text-muted); font-weight: 500; }
.dp-cat:hover { border-color: var(--ink); }
.dp-cat.is-on { background: var(--ink); color: var(--lime); border-color: var(--ink); }
.dp-cat.is-on small { color: var(--on-dark-muted); }
.dp-tools { flex: 0 0 auto; }
.dp-search { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); background: var(--white); padding: 0 12px; height: 44px; min-width: 240px; }
.dp-search svg { width: 16px; height: 16px; color: var(--text-muted); flex: none; }
.dp-search input { border: 0; outline: 0; background: transparent; font: inherit; font-size: 16px; width: 100%; color: var(--text); }
@media (max-width: 760px) { .dp-catbar { top: 64px; } .dp-tools { width: 100%; } .dp-search { min-width: 0; } }

/* panel */
.dp-panel-head { margin: 8px 0 20px; }
.dp-panel-head h2 { margin: 6px 0 0; }
.dp-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); margin: 0 0 20px; }
@media (min-width: 700px) { .dp-stats { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .dp-stats { grid-template-columns: repeat(6, 1fr); } }
.dp-tile { background: var(--white); padding: 18px 16px 16px; display: grid; gap: 4px; align-content: start; min-width: 0; }
.dp-tile b { font-family: var(--font-display); font-stretch: 78%; font-weight: 800; font-size: clamp(26px, 2.6vw, 34px); line-height: 1; letter-spacing: -.02em; }
.dp-tile b small { font-size: .55em; color: var(--text-muted); font-weight: 600; }
.dp-tile span { font-size: 12.5px; color: var(--text); line-height: 1.3; }
.dp-tile small { font-size: 11.5px; color: var(--text-muted); line-height: 1.3; }
.dp-tile small i { font-style: normal; font-weight: 600; }
.dp-up { color: #2f5a05; } .dp-down { color: #8a2d13; } .dp-dim { color: var(--text-muted); font-weight: 500; }
.dp-hls { display: grid; gap: 10px; margin: 0 0 22px; }
@media (min-width: 700px) { .dp-hls { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .dp-hls { grid-template-columns: repeat(3, 1fr); } }
.dp-hl { display: grid; gap: 3px; padding: 14px 16px 14px 18px; background: var(--white); border: 1px solid var(--line); border-left: 4px solid var(--ink); text-decoration: none; color: var(--text); transition: transform .15s ease, box-shadow .15s ease; }
.dp-hl:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -20px rgba(0,0,0,.45); }
.dp-hl--up { border-left-color: var(--lime-deep); } .dp-hl--down { border-left-color: #c9502b; } .dp-hl--cut { border-left-color: #4f74d9; } .dp-hl--rise { border-left-color: #e07a3f; } .dp-hl--hot { border-left-color: var(--forest-3); } .dp-hl--big { border-left-color: var(--ink); }
.dp-hl-k { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.dp-hl b { font-size: 15px; line-height: 1.2; }
.dp-hl-t { font-size: 12.5px; color: var(--text-muted); line-height: 1.3; }
.dp-hl em { font-style: normal; font-size: 13px; margin-top: 4px; }
.dp-read { max-width: 78ch; font-size: 15px; line-height: 1.6; color: var(--text); margin: 0 0 20px; }
.dp-read strong { font-weight: 600; }

/* table */
.dp-table-wrap { position: relative; margin: 0 0 8px; }
.dp-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.dp-table th { text-align: left; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); padding: 10px 10px 8px 0; border-bottom: 2px solid var(--ink); white-space: nowrap; }
.dp-table th[data-sort] { cursor: pointer; user-select: none; }
.dp-table th[data-sort]:hover { color: var(--text); }
.dp-table th[data-sort]::after { content: " ↕"; opacity: .4; }
.dp-table th.is-sorted::after { content: " ↑"; opacity: 1; color: var(--text); }
.dp-table th.is-sorted.is-desc::after { content: " ↓"; }
.dp-table td { padding: 10px 10px 10px 0; border-bottom: 1px solid var(--line); vertical-align: middle; font-variant-numeric: tabular-nums; }
.dp-table tbody tr { cursor: pointer; transition: background .12s ease; }
.dp-table tbody tr:hover, .dp-table tbody tr:focus-visible { background: var(--white); outline: none; }
.dp-table tbody tr:hover .dp-go span, .dp-table tbody tr:focus-visible .dp-go span { background: var(--ink); color: var(--lime); transform: translateX(2px); }
.dp-pos { font-family: var(--font-display); font-stretch: 80%; font-weight: 800; font-size: 20px; width: 34px; color: var(--text); }
.dp-name { min-width: 220px; }
.dp-name b { display: block; font-weight: 600; line-height: 1.2; }
.dp-name span { display: block; font-size: 12.5px; color: var(--text-muted); line-height: 1.3; margin-top: 2px; }
.dp-chip { display: inline-block; font-style: normal; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .04em; padding: 3px 7px; border-radius: 3px; background: #ecece6; color: var(--text-muted); white-space: nowrap; }
.dp-chip--amz { background: #fff1d6; color: #7a4b00; }
.dp-chip--off { margin-top: 5px; background: #f7dcd3; color: #8a2d13; }
.dp-price { font-weight: 600; white-space: nowrap; }
.dp-price small { display: block; font-weight: 500; font-size: 11px; color: var(--text-muted); }
.dp-num { text-align: right; white-space: nowrap; }
.dp-table th:nth-child(5), .dp-table th:nth-child(6), .dp-table th:nth-child(7), .dp-table th:nth-child(9) { text-align: right; }
.dp-spark { width: 104px; }
.dp-spark svg { width: 96px; height: 28px; display: block; color: var(--text-muted); }
.dp-spark polyline { fill: none; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.sp-flat { stroke: #4a5a4e; } .sp-up { stroke: #b2371a; } .sp-dn { stroke: #2f7a1f; }
.sp-dot { stroke: none; } .sp-dot.sp-flat { fill: #4a5a4e; } .sp-dot.sp-up { fill: #b2371a; } .sp-dot.sp-dn { fill: #2f7a1f; }
.sp-gap { fill: rgba(10,15,12,.07); }
.dp-go { width: 34px; text-align: right; }
.dp-go span { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line); font-size: 13px; transition: all .15s ease; }
.dp-empty { padding: 20px 0; color: var(--text-muted); font-size: 14px; }
@media (max-width: 1000px) { .dp-table th:nth-child(9), .dp-table td:nth-child(9) { display: none; } }
@media (max-width: 860px) { .dp-table th:nth-child(4), .dp-table td:nth-child(4), .dp-table th:nth-child(7), .dp-table td:nth-child(7), .dp-table th:nth-child(8), .dp-table td:nth-child(8) { display: none; } .dp-name { min-width: 160px; } }
@media (max-width: 520px) { .dp-table th:nth-child(6), .dp-table td:nth-child(6), .dp-table th:nth-child(10), .dp-table td:nth-child(10) { display: none; } .dp-img { width: 36px; height: 36px; } .dp-table { font-size: 13px; } .dp-pos { font-size: 17px; width: 26px; } }

/* drawer */
.dp-lock { overflow: hidden; }
.dp-drawer { position: fixed; inset: 0; z-index: 60; visibility: hidden; }
.dp-drawer.is-open { visibility: visible; }
.dp-drawer-bg { position: absolute; inset: 0; background: rgba(10,15,12,.55); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); opacity: 0; transition: opacity .25s ease; }
.dp-drawer.is-open .dp-drawer-bg { opacity: 1; }
.dp-drawer-panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(680px, 100%); background: var(--paper); color: var(--text); overflow-y: auto; padding: 28px clamp(18px, 3vw, 36px) 36px; transform: translateX(100%); transition: transform .32s cubic-bezier(.2,.8,.2,1); box-shadow: -30px 0 60px -40px rgba(0,0,0,.6); }
.dp-drawer.is-open .dp-drawer-panel { transform: none; }
@media (prefers-reduced-motion: reduce) { .dp-drawer-panel, .dp-drawer-bg { transition: none; } }
.dp-drawer-x { position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: var(--white); font-size: 22px; line-height: 1; cursor: pointer; color: var(--text); }
.dp-drawer-x:hover { background: var(--ink); color: var(--lime); border-color: var(--ink); }
.dp-dr-head { padding-right: 48px; margin: 0 0 18px; }
.dp-dr-head .eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.dp-dr-head code { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); letter-spacing: 0; text-transform: none; }
.dp-dr-head h3 { font-size: clamp(22px, 3vw, 30px); line-height: 1.1; margin: 10px 0 8px; letter-spacing: -.01em; }
.dp-dr-head p { margin: 0; color: var(--text-muted); font-size: 14px; }
.dp-dr-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); margin: 0 0 20px; }
@media (min-width: 560px) { .dp-dr-stats { grid-template-columns: repeat(4, 1fr); } }
.dp-dr-stats .dp-tile { padding: 14px 12px 12px; }
.dp-dr-stats .dp-tile b { font-size: 22px; }
.dp-dr-chart { background: var(--white); border: 1px solid var(--line); padding: 14px 14px 10px; margin: 0 0 18px; }
.dp-dr-tabs { display: flex; gap: 4px; margin: 0 0 10px; }
.dp-dr-tabs button { font-family: var(--font-display); font-stretch: 85%; font-weight: 700; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; padding: 7px 12px; border: 1px solid var(--line); background: transparent; color: var(--text); cursor: pointer; }
.dp-dr-tabs button.is-on { background: var(--ink); color: var(--lime); border-color: var(--ink); }
.dp-chart { position: relative; }
.dp-chart svg { width: 100%; height: auto; display: block; touch-action: pan-y; }
.ch-grid { stroke: rgba(10,15,12,.1); stroke-width: 1; }
.ch-lbl { font-family: var(--font-mono); font-size: 10px; fill: #5b655e; }
.ch-lbl--ref { fill: #8a2d13; }
.ch-ref { stroke: #c9502b; stroke-width: 1; stroke-dasharray: 4 4; }
.ch-gap { fill: rgba(10,15,12,.06); }
.ch-cursor { stroke: rgba(10,15,12,.4); stroke-width: 1; stroke-dasharray: 3 3; }
.dp-tip { position: absolute; top: 12px; left: 0; background: var(--ink); color: var(--on-dark); padding: 8px 10px; font-size: 12px; line-height: 1.4; border-radius: 4px; pointer-events: none; display: grid; gap: 2px; white-space: nowrap; z-index: 3; box-shadow: 0 10px 20px -10px rgba(0,0,0,.6); }
.dp-tip b { font-weight: 600; } .dp-tip > b { color: var(--lime); font-family: var(--font-mono); font-size: 11px; }
.dp-tip span { display: flex; align-items: center; gap: 6px; } .dp-tip i { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }
.dp-dr-note { font-size: 12px; color: var(--text-muted); margin: 8px 0 0; line-height: 1.4; }
.dp-dr-read p { font-size: 14.5px; line-height: 1.6; margin: 0 0 18px; }
.dp-dr-nav { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center; border-top: 1px solid var(--line); padding-top: 16px; }
.dp-dr-nav button { font: inherit; font-size: 13px; background: transparent; border: 1px solid var(--line); padding: 10px 12px; cursor: pointer; color: var(--text); text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dp-dr-nav button:last-child { text-align: right; }
.dp-dr-nav button:hover:not(:disabled) { background: var(--ink); color: var(--lime); border-color: var(--ink); }
.dp-dr-nav button:disabled { opacity: .35; cursor: default; }
.dp-dr-nav a { font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap; }
@media (max-width: 560px) { .dp-dr-nav { grid-template-columns: 1fr 1fr; } .dp-dr-nav a { grid-column: span 2; text-align: center; order: -1; } }

/* search demand */
.dp-search-grid { display: grid; gap: 22px; margin: 0 0 22px; }
@media (min-width: 1000px) { .dp-search-grid { grid-template-columns: 1.5fr 1fr; align-items: start; } }
.dp-chart-card { background: var(--white); border: 1px solid var(--line); padding: 16px; }
.dp-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.dp-chip-btn { font: inherit; font-size: 12.5px; padding: 6px 11px; border: 1px solid var(--line); background: transparent; color: var(--text); cursor: pointer; border-radius: 999px; transition: all .15s ease; }
.dp-chip-btn:hover { border-color: var(--ink); }
.dp-chip-btn.is-on { background: var(--c, var(--ink)); border-color: var(--c, var(--ink)); color: #fff; }
.dp-chip-btn.is-on[style*="#b4df34"] { color: var(--ink); }
.dp-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 10px 0 0; font-size: 12px; color: var(--text-muted); }
.dp-legend span { display: inline-flex; align-items: center; gap: 6px; } .dp-legend i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.dp-table--search td:first-child { font-weight: 600; }
.dp-table--search th { position: static; }
.dp-table--search small { display: block; font-weight: 400; font-size: 11px; color: var(--text-muted); }
.dp-term { font: inherit; font-weight: 600; background: none; border: 0; padding: 0; color: var(--text); cursor: pointer; text-decoration: underline; text-decoration-color: rgba(10,15,12,.25); text-underline-offset: 3px; }
.dp-term:hover { text-decoration-color: var(--ink); }
.dp-table--search tbody tr { cursor: default; } .dp-table--search tbody tr:hover { background: transparent; }

/* category size */
.dp-cat-grid { display: grid; gap: 12px; }
@media (min-width: 700px) { .dp-cat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .dp-cat-grid { grid-template-columns: repeat(3, 1fr); } }
.dp-cat-card { background: var(--white); border: 1px solid var(--line); padding: 18px 18px 14px; display: grid; gap: 12px; align-content: start; }
.dp-cat-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; border-bottom: 2px solid var(--ink); padding-bottom: 8px; }
.dp-cat-head h3 { margin: 0; font-size: 22px; }
.dp-cat-head span { font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); white-space: nowrap; }
.dp-cat-kv { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.dp-cat-kv b { display: block; font-family: var(--font-display); font-stretch: 78%; font-weight: 800; font-size: 24px; line-height: 1; letter-spacing: -.02em; }
.dp-cat-kv span { display: block; font-size: 11.5px; color: var(--text-muted); margin-top: 3px; line-height: 1.3; }
.dp-bands { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; height: 72px; align-items: end; }
.dp-bands i { display: grid; grid-template-rows: 1fr auto; height: 100%; font-style: normal; }
.dp-bands b { display: block; align-self: end; background: var(--lime-deep); min-height: 2px; }
.dp-bands span { font-family: var(--font-mono); font-size: 9px; color: var(--text-muted); text-align: center; margin-top: 4px; white-space: nowrap; }
.dp-mix { display: flex; height: 22px; overflow: hidden; border-radius: 3px; font-family: var(--font-mono); font-size: 10px; }
.dp-mix span { flex: 0 0 var(--w); display: grid; place-items: center; overflow: hidden; white-space: nowrap; color: var(--ink); }
.m-amz { background: #ffd98a; } .m-fba { background: var(--lime); } .m-fbm { background: #d9d9d1; }
.dp-mix { height: 10px; }
.dp-mix-key { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 11.5px; color: var(--text-muted); margin-top: -4px; }
.dp-mix-key span { display: inline-flex; align-items: center; gap: 6px; } .dp-mix-key i { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }
.dp-cat-card p { margin: 0; font-size: 12.5px; color: var(--text-muted); line-height: 1.45; }

/* data page: bottle photos */
.dp-prod { display: flex; align-items: center; gap: 12px; }
.dp-img { flex: none; width: 44px; height: 44px; object-fit: contain; background: var(--white); border: 1px solid var(--line); border-radius: 4px; padding: 3px; }
.dp-img--none { display: inline-block; background: repeating-linear-gradient(45deg, #ecece6 0 6px, #f4f3ee 6px 12px); }
.dp-hl { grid-template-columns: 56px 1fr; gap: 14px; align-items: center; padding: 12px 14px; }
.dp-hl > div { display: grid; gap: 3px; min-width: 0; }
.dp-hl-img { width: 56px; height: 56px; object-fit: contain; background: var(--white); border-radius: 4px; }
.dp-hl-img.dp-hl-img--none { display: block; background: repeating-linear-gradient(45deg, #ecece6 0 6px, #f4f3ee 6px 12px); }
.dp-hero-hl a { grid-template-columns: 56px 1fr; }
.dp-hero-hl .dp-hl-img { grid-row: span 2; background: #fff; padding: 4px; }
.dp-dr-head { display: grid; grid-template-columns: 112px 1fr; gap: 18px; align-items: start; }
.dp-dr-imgwrap { width: 112px; height: 140px; background: var(--white); border: 1px solid var(--line); border-radius: 6px; display: grid; place-items: center; padding: 8px; }
.dp-dr-imgwrap[hidden] { display: none; }
.dp-dr-img { max-width: 100%; max-height: 100%; object-fit: contain; }
@media (max-width: 520px) { .dp-dr-head { grid-template-columns: 76px 1fr; gap: 12px; } .dp-dr-imgwrap { width: 76px; height: 96px; } }

/* ================= Shelfdrop Intelligence (/data) ================= */
.section--tight { padding-top: clamp(24px, 3vw, 40px); }
.si-hero { position: relative; overflow: hidden; background: var(--ink); color: var(--on-dark); padding: clamp(40px, 6vw, 84px) 0 clamp(36px, 5vw, 64px); }
.si-hero .wrap { position: relative; }
.si-hero h1 { max-width: 15ch; margin: 0 0 18px; }
.si-hero .hl { color: var(--lime); }
.si-hero .lede { color: var(--on-dark-muted); max-width: 66ch; }
.si-lockrow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 0 0 26px; }
.si-lock { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--on-dark); text-decoration: none; padding: 7px 12px 7px 10px; border: 1px solid var(--line-dark); border-radius: 999px; }
.si-lock b { color: var(--lime); font-weight: 500; }
.si-lock i { width: 14px; height: 14px; display: inline-block; background: linear-gradient(to top, var(--lime) 0 30%, transparent 30% 40%, var(--lime) 40% 65%, transparent 65% 75%, var(--lime) 75% 100%); clip-path: polygon(0 100%, 0 70%, 33% 70%, 33% 40%, 66% 40%, 66% 0, 100% 0, 100% 100%); }
.si-lock:hover { border-color: var(--lime); }
.si-crumb { font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--on-dark-muted); }
.si-live { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; color: var(--on-dark-muted); }
@media (max-width: 700px) { .si-live { margin-left: 0; width: 100%; } }
.si-switch, .si-jump { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 24px; }
.si-switch a, .si-switch > .is-on, .si-jump a { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border: 1px solid var(--line-dark); border-radius: 999px; color: var(--on-dark); text-decoration: none; font-size: 13px; font-weight: 500; transition: background .15s ease, color .15s ease, border-color .15s ease; }
.si-jump a { padding: 7px 14px; }
.si-switch a:hover, .si-jump a:hover { border-color: var(--lime); }
.si-switch a.is-on, .si-switch > .is-on { background: var(--lime); color: var(--ink); border-color: var(--lime); }
.si-switch .si-sw-all { padding: 7px 14px; }
.si-sw-img { width: 22px; height: 22px; border-radius: 50%; background: #fff; object-fit: contain; padding: 2px; }
.si-sw-img--none { display: none; }

/* hub shelf */
/* the top 10 by revenue as a featured panel, not a row that blends into the page (George, 3 Nov 2026) */
.si-shelf-wrap { width: calc(100% - 2 * var(--gutter)); max-width: calc(var(--max) - 2 * var(--gutter)); margin: clamp(36px, 5vw, 56px) auto 0; padding: 18px 0 12px; border: 1px solid rgba(var(--lime-rgb), .35); border-radius: 20px; background: linear-gradient(160deg, rgba(var(--lime-rgb), .1), rgba(var(--lime-rgb), .015) 55%); box-shadow: 0 30px 60px -36px rgba(0,0,0,.9); overflow: hidden; }
.si-shelf-wrap > .wrap { padding: 0 18px; }
.si-shelf-wrap .si-shelf { padding-left: 18px; padding-right: 18px; scroll-padding-left: 18px; }
.si-shelf-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 20px; align-items: baseline; margin-bottom: 14px; }
.si-shelf-head .eyebrow { color: var(--lime); }
.si-shelf-head > span:last-child { font-size: 13px; color: var(--on-dark-muted); }
.si-shelf-disc { margin: 8px 0 0; font-size: 11px; line-height: 1.4; color: var(--on-dark-muted); }
.si-shelf { display: flex; align-items: flex-start; overflow-x: auto; scroll-snap-type: x proximity; padding: 8px var(--gutter) 6px; scroll-padding-left: var(--gutter); scrollbar-width: thin; scrollbar-color: var(--forest-3) transparent; }
/* centre when it fits, without pushing the first bottle off-screen when it doesn't */
.si-bottle:first-child { margin-left: auto; } .si-bottle:last-child { margin-right: auto; }
.si-bottle { flex: 0 0 156px; display: grid; grid-template-rows: auto 196px auto auto; text-decoration: none; color: var(--on-dark); padding: 0 7px; scroll-snap-align: start; }
.si-bottle-rank { font-family: var(--font-display); font-stretch: 80%; font-weight: 800; font-size: 22px; color: var(--lime); line-height: 1; margin: 0 0 8px 2px; }
.si-bottle-img { position: relative; display: block; background: linear-gradient(#fff, #f3f2ec); border-radius: 10px 10px 0 0; overflow: hidden; }
.si-bottle-photo { position: absolute; inset: 14px 12px 8px; width: calc(100% - 24px); height: calc(100% - 22px); object-fit: contain; object-position: center bottom; mix-blend-mode: multiply; transition: transform .3s ease; }
.si-bottle:hover .si-bottle-photo { transform: translateY(-6px) scale(1.04); }
.si-edge { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 2px 8px; margin: 0 -7px; padding: 10px 14px 12px; background: var(--forest-2); border-top: 4px solid var(--lime); }
.si-edge strong { font-family: var(--font-display); font-stretch: 80%; font-weight: 800; font-size: 22px; line-height: 1; }
.si-edge small { font-family: var(--font-mono); font-size: 10.5px; color: var(--on-dark-muted); }
.si-edge i { grid-column: 1 / -1; display: block; height: 4px; background: var(--lime); border-radius: 2px; margin-top: 6px; }
.si-bottle-name { display: grid; gap: 2px; padding: 10px 2px 0; }
.si-bottle-name b { font-size: 14px; font-weight: 600; line-height: 1.2; }
.si-bottle-name small { font-size: 11.5px; color: var(--on-dark-muted); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.si-bottle-name b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* treemap */
.si-tm { position: relative; width: 100%; aspect-ratio: 16 / 8.5; }
.si-tm-tile { position: absolute; left: var(--x); top: var(--y); width: var(--w); height: var(--h); border: 3px solid var(--paper); padding: clamp(10px, 1.4vw, 18px); display: flex; flex-direction: column; gap: 4px; overflow: hidden; text-decoration: none; color: var(--on-dark); container-type: size; transition: filter .2s ease; }
.si-tm-tile:hover { filter: brightness(1.12); }
.si-tm-name { font-family: var(--font-display); font-stretch: 85%; font-weight: 800; font-size: clamp(13px, 1.4vw, 18px); letter-spacing: .04em; text-transform: uppercase; }
.si-tm-rev { font-family: var(--font-display); font-stretch: 78%; font-weight: 800; font-size: clamp(28px, 4.2vw, 64px); line-height: .95; letter-spacing: -.02em; }
.si-tm-meta { font-size: 12.5px; opacity: .8; }
.si-tm-thumbs { margin-top: auto; display: flex; gap: 6px; }
.si-tm-img { width: 40px; height: 50px; object-fit: contain; background: #fff; border-radius: 4px; padding: 3px; }
.si-tm-img--none { display: none; }
.si-tm-go { position: absolute; right: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em; padding: 6px 10px; border-radius: 999px; background: rgba(255,255,255,.1); border: 1px solid currentColor; transition: background .2s ease, color .2s ease, transform .2s ease; }
.si-tm-go i { font-style: normal; transition: transform .2s ease; }
.si-tm-tile:hover .si-tm-go, .si-tm-tile:focus-visible .si-tm-go { background: var(--lime); color: var(--ink); border-color: var(--lime); }
.si-tm-tile:hover .si-tm-go i { transform: translateX(3px); }
.si-tm-tile:hover { filter: brightness(1.1); box-shadow: inset 0 0 0 2px var(--lime); }
@container (max-height: 170px) { .si-tm-thumbs { display: none; } }
@container (max-width: 190px) { .si-tm-meta { display: none; } .si-tm-rev { font-size: 26px; } .si-tm-go { font-size: 0; padding: 6px 8px; gap: 0; } .si-tm-go i { font-size: 13px; } }
@container (max-height: 110px) { .si-tm-meta { display: none; } }
.si-tm-t1 { background: var(--ink); } .si-tm-t1 .si-tm-rev { color: var(--lime); }
.si-tm-t2 { background: var(--forest); } .si-tm-t3 { background: var(--forest-2); } .si-tm-t4 { background: var(--forest-3); }
.si-tm-t5 { background: var(--lime-deep); color: var(--ink); } .si-tm-t6 { background: var(--lime); color: var(--ink); }
.si-tm-t7 { background: #dfe9c2; color: var(--ink); } .si-tm-t8 { background: var(--cream); color: var(--ink); }
@media (max-width: 760px) {
  .si-tm { aspect-ratio: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
  .si-tm-tile { position: relative; left: auto; top: auto; width: auto; height: auto; min-height: 132px; border: 0; container-type: normal; }
  .si-tm-tile:first-child { grid-column: 1 / -1; min-height: 180px; }
  .si-tm-rev { font-size: 30px; } .si-tm-thumbs { display: flex; padding-right: 64px; } .si-tm-go { font-size: 0; padding: 7px 9px; gap: 0; } .si-tm-go i { font-size: 14px; }
}

/* dark sections, heatmap */
.si-dark { background: var(--ink); color: var(--on-dark); padding: clamp(56px, 8vw, 104px) 0; }
.si-dark .section-head h2 { color: var(--on-dark); } .si-dark .hl { color: var(--lime); } .si-dark .lede { color: var(--on-dark-muted); } .si-dark .eyebrow { color: var(--lime); }
.si-heat { position: relative; display: grid; gap: 4px; margin: 0 0 28px; }
.si-heat-row { display: grid; grid-template-columns: 128px 1fr 64px; align-items: center; gap: 12px; }
.si-heat-term { font: inherit; font-size: 13.5px; text-align: left; color: var(--on-dark); background: none; border: 0; padding: 0; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.si-heat-term:hover { color: var(--lime); }
.si-heat-cells { display: grid; grid-template-columns: repeat(52, 1fr); gap: 2px; height: 24px; }
.si-heat-cells i { display: block; border-radius: 2px; background: rgba(var(--lime-rgb), calc(var(--a) * .92 + .05)); transition: transform .1s ease; }
.si-heat-cells i:hover { transform: scaleY(1.25); outline: 1px solid #fff; }
.si-heat-months .si-heat-cells { height: auto; }
.si-heat-months .si-heat-cells i { background: none; font-style: normal; font-family: var(--font-mono); font-size: 10px; color: var(--on-dark-muted); white-space: nowrap; overflow: visible; }
.si-heat-months .si-heat-cells i:hover { transform: none; outline: 0; }
.si-heat-peak { font-family: var(--font-mono); font-size: 12px; text-align: right; color: var(--on-dark); }
.si-heat-peak small { display: block; font-size: 10px; color: var(--on-dark-muted); }
.si-heat-tip { position: absolute; }
@media (max-width: 700px) { .si-heat-row { grid-template-columns: 82px 1fr 40px; gap: 6px; } .si-heat-cells { gap: 1px; height: 18px; } .si-heat-term { font-size: 12px; } .si-heat-peak small { display: none; } .si-heat-months .si-heat-cells i { font-size: 8px; } }
.si-chart-dark { background: var(--ink-2); border-color: var(--line-dark); }
.si-chart-dark .ch-lbl { fill: var(--on-dark-muted); } .si-chart-dark .ch-grid { stroke: rgba(255,255,255,.08); } .si-chart-dark .ch-cursor { stroke: rgba(255,255,255,.4); }
.si-chart-dark .dp-chip-btn { color: var(--on-dark); border-color: var(--line-dark); }
.si-chart-dark .dp-chip-btn.is-on { color: var(--ink); }
.si-chart-dark .dp-legend { color: var(--on-dark-muted); }

/* podium */
.si-answer { background: var(--white); border: 1px solid var(--line); border-left: 4px solid var(--lime-deep); padding: 16px 22px; margin: 0 0 clamp(24px, 3vw, 40px); }
.si-answer p { margin: 6px 0 0; font-size: 17px; line-height: 1.55; }
.si-podium { display: grid; gap: 16px; align-items: end; }
@media (min-width: 860px) { .si-podium { grid-template-columns: 1fr 1.18fr 1fr; } }
.si-pod { position: relative; display: grid; background: var(--white); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; text-decoration: none; color: var(--text); transition: transform .2s ease, box-shadow .2s ease; }
.si-pod:hover { transform: translateY(-4px); box-shadow: 0 24px 48px -30px rgba(0,0,0,.45); }
.si-pod-n { position: absolute; top: 14px; left: 16px; z-index: 2; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--ink); color: var(--lime); font-family: var(--font-display); font-stretch: 80%; font-weight: 800; font-size: 28px; }
.si-pod--1 .si-pod-n { background: var(--lime); color: var(--ink); width: 64px; height: 64px; font-size: 36px; }
.si-pod-img { position: relative; height: 270px; overflow: hidden; background: #fff; border-bottom: 1px solid var(--line); }
.si-pod--1 .si-pod-img { height: 340px; }
.si-pod-img::after { content: ""; position: absolute; left: 22%; right: 22%; bottom: 14px; height: 14px; border-radius: 50%; background: radial-gradient(closest-side, rgba(10,15,12,.22), transparent); z-index: 0; }
.si-pod-photo { position: absolute; inset: 26px 28px 20px; width: calc(100% - 56px); height: calc(100% - 46px); object-fit: contain; object-position: center bottom; mix-blend-mode: multiply; z-index: 1; transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.si-pod:hover .si-pod-photo { transform: translateY(-6px) scale(1.03); }
.si-pod-photo--none { position: absolute; inset: 0; background: repeating-linear-gradient(45deg, #ecece6 0 8px, #f4f3ee 8px 16px); }
.si-pod-body { display: grid; gap: 8px; padding: 16px 18px 18px; }
.si-pod-body > b { font-size: 21px; line-height: 1.15; }
.si-pod-body > span { font-size: 13px; color: var(--text-muted); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.si-tag { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; background: var(--lime); color: var(--ink); padding: 8px 12px; border-radius: 3px; margin-top: 4px; }
.si-tag strong { font-family: var(--font-display); font-stretch: 80%; font-weight: 800; font-size: 28px; line-height: 1; }
.si-tag small { font-family: var(--font-mono); font-size: 11px; text-align: right; }
.si-pod-kv { display: grid; grid-template-columns: 1fr auto auto; gap: 14px; align-items: end; }
.si-pod-kv em { display: block; font-style: normal; font-family: var(--font-display); font-stretch: 80%; font-weight: 800; font-size: 20px; }
.si-pod-kv small { display: block; font-size: 11px; color: var(--text-muted); }
.si-pod-kv svg { width: 96px; height: 28px; display: block; }
.si-pod-kv polyline { fill: none; stroke-width: 1.6; stroke-linejoin: round; }
@media (max-width: 859px) { .si-pod--1 { order: -1; } .si-pod-img, .si-pod--1 .si-pod-img { height: 250px; } }

/* brand share */
.si-bs-bar { display: flex; height: 58px; border-radius: 6px; overflow: hidden; margin: 0 0 18px; }
.si-bs-seg { flex: 0 0 var(--w); background: var(--c); display: grid; place-items: center; color: #fff; min-width: 2px; border-right: 2px solid var(--paper); transition: filter .15s ease; }
.si-bs-seg:last-child { border-right: 0; }
.si-bs-seg:hover { filter: brightness(1.1); }
.si-bs-seg.is-light { color: var(--ink); }
.si-bs-seg em { font-style: normal; font-family: var(--font-mono); font-size: 12px; font-weight: 600; }
.si-bs-list { list-style: none; margin: 0; padding: 0; display: grid; column-gap: 40px; }
@media (min-width: 860px) { .si-bs-list { grid-template-columns: 1fr 1fr; } }
.si-bs-list li { display: grid; grid-template-columns: 12px 36px 1fr auto 44px; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.si-bs-list li > i { width: 12px; height: 12px; border-radius: 3px; background: var(--c); }
.si-bs-img { width: 36px; height: 36px; object-fit: contain; background: #fff; border: 1px solid var(--line); border-radius: 4px; padding: 2px; }
.si-bs-img--none { display: block; background: #f1f1ec; }
.si-bs-list b { display: block; font-size: 15px; } .si-bs-list small { display: block; font-size: 12px; color: var(--text-muted); }
.si-bs-list strong { font-family: var(--font-display); font-stretch: 80%; font-weight: 800; font-size: 20px; }
.si-bs-list li > span:last-child { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); text-align: right; }

/* price map */
.si-pm { position: relative; background: var(--ink-2); border: 1px solid var(--line-dark); border-radius: 10px; padding: 34px 28px 46px 64px; }
.si-pm-plot { position: relative; height: clamp(380px, 46vw, 580px); }
.si-pm-axes { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.pm-grid { stroke: rgba(255,255,255,.07); stroke-width: 1; vector-effect: non-scaling-stroke; }
.pm-med { stroke: var(--lime); stroke-width: 1.2; stroke-dasharray: 5 5; vector-effect: non-scaling-stroke; opacity: .8; }
.pm-xl, .pm-yl, .pm-med-l, .pm-axis { position: absolute; font-family: var(--font-mono); font-size: 10.5px; color: var(--on-dark-muted); white-space: nowrap; pointer-events: none; }
.pm-xl { bottom: -28px; transform: translateX(-50%); }
.pm-yl { left: -50px; width: 40px; text-align: right; transform: translateY(-50%); }
.pm-med-l { top: -24px; transform: translateX(-50%); color: var(--lime); }
.pm-axis { letter-spacing: .08em; text-transform: uppercase; font-size: 10px; opacity: .7; }
.pm-axis--x { right: 0; bottom: 6px; } .pm-axis--y { left: 8px; top: 4px; }
.pm-dot { position: absolute; width: var(--s); height: var(--s); transform: translate(-50%, -50%); border-radius: 50%; padding: 0; border: 2px solid var(--ink-2); background: #fff; cursor: pointer; box-shadow: 0 0 0 1px rgba(var(--lime-rgb), .4); transition: transform .15s ease, box-shadow .15s ease; z-index: 1; }
.pm-dot img { width: 100%; height: 100%; object-fit: contain; border-radius: 50%; padding: 3px; display: block; }
.pm-dot span { display: none; position: absolute; top: -7px; right: -9px; min-width: 18px; padding: 1px 4px; border-radius: 9px; background: var(--lime); color: var(--ink); font-family: var(--font-mono); font-size: 10px; font-weight: 600; text-align: center; }
.pm-dot--t10 span { display: block; }
.pm-dot--top { box-shadow: 0 0 0 3px var(--lime); z-index: 3; }
.pm-dot--off { opacity: .45; }
.pm-dot:hover, .pm-dot:focus-visible { transform: translate(-50%, -50%) scale(1.4); z-index: 6; box-shadow: 0 0 0 3px var(--lime), 0 10px 24px -8px rgba(0,0,0,.8); outline: none; }
.si-pm-tip { position: absolute; z-index: 10; white-space: normal; max-width: 260px; }
@media (max-width: 700px) { .si-pm { padding: 30px 12px 44px 48px; } .si-pm-plot { height: 400px; } .pm-yl { left: -42px; width: 34px; } }

.si-read p { max-width: 78ch; font-size: 16px; line-height: 1.65; margin: 0; }
.si-table-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px 24px; margin: 0 0 18px; }
.si-table-head h2 { margin: 6px 0 0; }

/* faq + more */
.si-faq { display: grid; gap: 10px; max-width: 920px; }
.si-faq-q { background: var(--white); border: 1px solid var(--line); border-radius: 6px; padding: 16px 20px; }
.si-faq-q summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 16px; font-weight: 600; font-size: 16px; }
.si-faq-q summary::-webkit-details-marker { display: none; }
.si-faq-q summary::after { content: "+"; font-family: var(--font-mono); color: var(--text-muted); }
.si-faq-q[open] summary::after { content: "–"; }
.si-faq-q p { margin: 10px 0 0; line-height: 1.6; color: var(--text); }
.si-more-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.si-more { display: grid; grid-template-columns: 64px 1fr; gap: 14px; align-items: center; background: var(--white); border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; text-decoration: none; color: var(--text); transition: border-color .15s ease, transform .15s ease; }
.si-more:hover { border-color: var(--ink); transform: translateY(-2px); }
.si-more-img { width: 64px; height: 80px; object-fit: contain; }
.si-more-img--none { display: block; background: #f1f1ec; }
.si-more div { display: grid; gap: 2px; }
.si-more b { font-family: var(--font-display); font-stretch: 80%; font-weight: 800; font-size: 26px; line-height: 1; }
.si-more small { font-size: 11.5px; color: var(--text-muted); } .si-more em { font-style: normal; font-size: 12.5px; margin-top: 2px; }
.si-method { font-size: 13.5px; line-height: 1.6; color: var(--text-muted); max-width: 92ch; margin: 28px 0 0; }

/* powered by + track strip */
.si-powered { max-width: 820px; margin: 0 0 28px; }
.si-powered h2 { margin: 8px 0 12px; }
.si-powered p { font-size: 17px; line-height: 1.6; color: var(--text); margin: 0; }
.si-track { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); margin: 0 0 clamp(32px, 5vw, 56px); }
@media (min-width: 900px) { .si-track { grid-template-columns: repeat(5, 1fr); } }
.si-track div { background: var(--white); padding: 22px 18px; display: grid; gap: 6px; }
.si-track b { font-family: var(--font-display); font-stretch: 78%; font-weight: 800; font-size: clamp(30px, 3.4vw, 44px); line-height: 1; letter-spacing: -.02em; }
.si-track span { font-size: 12.5px; color: var(--text-muted); line-height: 1.35; }
.si-js-link { font-size: 13px; font-weight: 600; color: var(--text); }

/* five markets */
.si-mk-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.si-mk { background: var(--white); border: 1px solid var(--line); border-radius: 8px; padding: 18px; display: grid; gap: 12px; align-content: start; }
.si-mk header { display: flex; align-items: center; gap: 12px; }
.si-mk header .flag { width: 42px; height: 28px; border-radius: 4px; }
.si-mk h3 { margin: 0; font-size: 20px; } .si-mk header span { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); }
.si-mk-big b { display: block; font-family: var(--font-display); font-stretch: 78%; font-weight: 800; font-size: 42px; line-height: 1; letter-spacing: -.02em; }
.si-mk-big span { display: block; font-size: 12.5px; color: var(--text); margin-top: 4px; } .si-mk-big small { display: block; font-size: 11.5px; color: var(--text-muted); }
.si-mk-bar { height: 6px; background: #ecece6; border-radius: 3px; overflow: hidden; } .si-mk-bar i { display: block; height: 100%; background: var(--lime-deep); }
.si-mk-kv { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.si-mk-kv b { display: block; font-family: var(--font-display); font-stretch: 80%; font-weight: 800; font-size: 19px; } .si-mk-kv span { display: block; font-size: 11px; color: var(--text-muted); line-height: 1.3; }
.si-mk-split { display: flex; height: 12px; border-radius: 6px; overflow: hidden; }
.si-mk-split span { flex: 0 0 var(--w); }
.mk-beer-cider { background: #e3b649; } .mk-wine { background: #8e2f45; } .mk-spirits { background: var(--forest); } .mk-other { background: #c3cdb9; }
.si-mk-key { list-style: none; margin: -4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 11.5px; color: var(--text-muted); }
.si-mk-key li { display: inline-flex; align-items: center; gap: 5px; } .si-mk-key i { width: 9px; height: 9px; border-radius: 2px; display: inline-block; } .si-mk-key b { color: var(--text); }
.si-mk-top ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
.si-mk-top li { display: grid; grid-template-columns: 44px 1fr; gap: 10px; align-items: center; }
.si-mk-img { width: 44px; height: 56px; object-fit: contain; background: #fff; }
.si-mk-img--none { display: block; background: #f1f1ec; }
.si-mk-top b { display: block; font-size: 13px; } .si-mk-top small { display: block; font-size: 11.5px; color: var(--text-muted); line-height: 1.3; } .si-mk-top em { font-style: normal; font-family: var(--font-mono); font-size: 11px; }

/* ================= High-tech chart panels ================= */
.dp-chart-card, .dp-dr-chart, .si-chart-dark { position: relative; background: radial-gradient(120% 140% at 0% 0%, #17271d 0%, #0d1510 55%, #0a0f0c 100%); border: 1px solid rgba(var(--lime-rgb), .16); border-radius: 12px; color: var(--on-dark); box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 30px 60px -40px rgba(0,0,0,.6); overflow: hidden; }
.dp-chart-card::before, .dp-dr-chart::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(var(--lime-rgb), .035) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--lime-rgb), .035) 1px, transparent 1px); background-size: 28px 28px; mask-image: linear-gradient(to bottom, #000, transparent 90%); -webkit-mask-image: linear-gradient(to bottom, #000, transparent 90%); }
.dp-chart-card > *, .dp-dr-chart > * { position: relative; }
.dp-chart .ch-lbl, .dp-dr-chart .ch-lbl, .dp-chart-card .ch-lbl { fill: rgba(243,245,239,.5); font-family: var(--font-mono); font-size: 10px; letter-spacing: .02em; }
.dp-chart .ch-grid { stroke: rgba(243,245,239,.07); stroke-dasharray: 2 5; }
.dp-chart .ch-base { stroke: rgba(243,245,239,.18); stroke-dasharray: none; }
.dp-chart .ch-ref { stroke: #ff9a5a; stroke-dasharray: 3 5; opacity: .8; }
.dp-chart .ch-lbl--ref { fill: #ff9a5a; }
.dp-chart .ch-gap { fill: rgba(255,154,90,.07); }
.dp-chart .ch-cursor { stroke: rgba(var(--lime-rgb), .55); stroke-dasharray: 2 3; }
.ch-line { stroke-dasharray: 1; stroke-dashoffset: 0; }
.is-drawn .ch-line { animation: chdraw 1.3s cubic-bezier(.3,.7,.15,1) both; }
.is-drawn .ch-area { animation: chfade 1.3s ease both; }
@keyframes chdraw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes chfade { from { opacity: 0; } 60% { opacity: 0; } to { opacity: 1; } }
.ch-pulse { transform-box: fill-box; transform-origin: center; animation: chpulse 2.2s ease-out infinite; }
@keyframes chpulse { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(4); opacity: 0; } }
.ch-endl text { font-family: var(--font-mono); font-size: 11px; font-weight: 600; fill: #fff; paint-order: stroke; stroke: #0a0f0c; stroke-width: 4px; stroke-linejoin: round; }
@media (prefers-reduced-motion: reduce) { .is-drawn .ch-line, .is-drawn .ch-area, .ch-pulse { animation: none; } }
.dp-tip { background: rgba(10,15,12,.88); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(var(--lime-rgb), .35); box-shadow: 0 12px 30px -12px rgba(0,0,0,.7), 0 0 0 1px rgba(0,0,0,.4); }
.dp-dr-chart { padding: 16px 16px 12px; }
.dp-dr-tabs button { color: var(--on-dark); border-color: rgba(243,245,239,.18); background: rgba(255,255,255,.02); }
.dp-dr-tabs button.is-on { background: var(--lime); color: var(--ink); border-color: var(--lime); box-shadow: 0 0 18px -4px rgba(var(--lime-rgb), .7); }
.dp-dr-note { color: rgba(243,245,239,.55); }
.dp-chart-card { padding: 18px; }
.dp-chart-card .dp-chip-btn { color: var(--on-dark); border-color: rgba(243,245,239,.18); background: rgba(255,255,255,.02); }
.dp-chart-card .dp-chip-btn:hover { border-color: var(--lime); }
.dp-chart-card .dp-chip-btn.is-on { background: var(--c, var(--lime)); border-color: var(--c, var(--lime)); color: var(--ink); box-shadow: 0 0 16px -4px var(--c, var(--lime)); }
.dp-chart-card .dp-legend { color: rgba(243,245,239,.6); }
.sp-area { stroke: none; } .sp-a-flat { fill: rgba(74,90,78,.12); } .sp-a-up { fill: rgba(178,55,26,.1); } .sp-a-dn { fill: rgba(47,122,31,.12); }
.si-pod-kv .sp-area { opacity: 1; }

/* ================= Home: live Shelfdrop Intelligence widgets ================= */
.hw { position: relative; overflow: hidden; background: var(--ink); color: var(--on-dark); padding: clamp(64px, 9vw, 120px) 0; }
.hw .wrap { position: relative; }
.hw-head { display: grid; gap: 20px 48px; align-items: end; margin: 0 0 clamp(28px, 4vw, 44px); }
@media (min-width: 960px) { .hw-head { grid-template-columns: 1.2fr 1fr; } }
.hw-head h2 { margin: 0; color: var(--on-dark); } .hw-head .hl { color: var(--lime); }
.hw-head .lede { color: var(--on-dark-muted); margin: 0 0 18px; }
.hw-head .si-lockrow { margin-bottom: 18px; }
.hw-grid { display: grid; gap: 14px; }
@media (min-width: 980px) { .hw-grid { grid-template-columns: 7fr 5fr; } }
.hw-card { position: relative; background: radial-gradient(120% 140% at 0% 0%, #17271d 0%, #0d1510 55%, #0a0f0c 100%); border: 1px solid rgba(var(--lime-rgb), .16); border-radius: 14px; padding: 18px 20px 20px; overflow: hidden; box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 30px 60px -40px rgba(0,0,0,.8); }
.hw-card::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(var(--lime-rgb), .03) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--lime-rgb), .03) 1px, transparent 1px); background-size: 26px 26px; mask-image: linear-gradient(to bottom, #000, transparent 85%); -webkit-mask-image: linear-gradient(to bottom, #000, transparent 85%); }
.hw-card > * { position: relative; }
.hw-card header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 14px; margin: 0 0 14px; padding-bottom: 10px; border-bottom: 1px solid rgba(243,245,239,.08); }
.hw-card h3 { margin: 0; font-family: var(--font-display); font-stretch: 85%; font-weight: 800; font-size: 15px; letter-spacing: .06em; text-transform: uppercase; color: var(--on-dark); }
.hw-card header span { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .04em; color: rgba(243,245,239,.5); }
.hw-cats, .hw-mk { display: grid; gap: 6px; }
.hw-cat, .hw-mk a { display: grid; grid-template-columns: 30px 118px 1fr 64px; gap: 12px; align-items: center; color: var(--on-dark); text-decoration: none; padding: 4px 6px; margin: 0 -6px; border-radius: 6px; transition: background .15s ease; }
.hw-mk a { grid-template-columns: 26px 110px 1fr 76px; }
.hw-cat:hover, .hw-mk a:hover { background: rgba(var(--lime-rgb), .06); }
.hw-thumb { width: 30px; height: 38px; object-fit: contain; background: #fff; border-radius: 4px; padding: 2px; }
.hw-thumb--none { display: block; background: #1b3424; }
.hw-cat-name { font-size: 14px; font-weight: 600; line-height: 1.15; } .hw-cat-name small { display: block; font-size: 11px; font-weight: 400; color: rgba(243,245,239,.5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hw-bar { position: relative; height: 10px; background: rgba(243,245,239,.06); border-radius: 5px; overflow: hidden; }
.hw-bar i { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 5px; background: linear-gradient(90deg, #5b8a1a, var(--lime)); box-shadow: 0 0 14px rgba(var(--lime-rgb), .55); transition: width 1.4s cubic-bezier(.2,.8,.2,1); }
.hw-grid.in .hw-bar i, .hw-grid:not(.reveal) .hw-bar i { width: var(--w); }
.hw-cat:nth-child(2) .hw-bar i { transition-delay: .06s; } .hw-cat:nth-child(3) .hw-bar i { transition-delay: .12s; } .hw-cat:nth-child(4) .hw-bar i { transition-delay: .18s; } .hw-cat:nth-child(5) .hw-bar i { transition-delay: .24s; } .hw-cat:nth-child(6) .hw-bar i { transition-delay: .3s; } .hw-cat:nth-child(7) .hw-bar i { transition-delay: .36s; } .hw-cat:nth-child(8) .hw-bar i { transition-delay: .42s; }
.hw-cat b, .hw-mk b { font-family: var(--font-mono); font-size: 13px; font-weight: 600; text-align: right; color: var(--lime); }
.hw-mk span:not(.hw-bar) { font-size: 13.5px; } .hw-mk .flag { width: 26px; height: 17px; }
.hw-terms { display: grid; gap: 4px; }
.hw-term { display: grid; grid-template-columns: 92px 1fr 64px 62px; gap: 10px; align-items: center; color: var(--on-dark); text-decoration: none; padding: 5px 6px; margin: 0 -6px; border-radius: 6px; }
.hw-term:hover { background: rgba(var(--lime-rgb), .06); }
.hw-term > span { font-size: 14px; font-weight: 600; }
.hw-spark { width: 100%; height: 36px; display: block; overflow: visible; }
.hw-grid.in .hw-spark .ch-line { animation: chdraw 1.6s cubic-bezier(.3,.7,.15,1) both; }
.hw-term b { font-family: var(--font-mono); font-size: 13px; text-align: right; }
.hw-term em { font-style: normal; font-family: var(--font-mono); font-size: 11px; text-align: center; padding: 3px 6px; border-radius: 4px; background: rgba(243,245,239,.06); color: rgba(243,245,239,.7); }
.hw-term em.hw-up { background: rgba(var(--lime-rgb), .14); color: var(--lime); } .hw-term em.hw-down { background: rgba(255,154,90,.12); color: #ff9a5a; }
.hw-shelf { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.hw-bottle { position: relative; display: grid; gap: 3px; align-content: start; text-decoration: none; color: var(--on-dark); }
.hw-bottle-img { width: 100%; height: 128px; object-fit: contain; background: linear-gradient(#fff, #f1f0ea); border-radius: 8px; padding: 10px; margin-bottom: 6px; transition: transform .25s ease; }
.hw-bottle:hover .hw-bottle-img { transform: translateY(-4px); }
.hw-rank { position: absolute; top: 6px; left: 6px; z-index: 1; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--lime); font-family: var(--font-mono); font-size: 11px; font-weight: 600; }
.hw-bottle b { font-size: 13px; line-height: 1.15; } .hw-bottle small { font-size: 11px; color: rgba(243,245,239,.55); line-height: 1.25; }
.hw-tag { justify-self: start; margin-top: 4px; font-family: var(--font-mono); font-size: 10.5px; background: var(--lime); color: var(--ink); padding: 2px 6px; border-radius: 3px; }
.hw-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: rgba(243,245,239,.08); border-radius: 8px; overflow: hidden; }
.hw-kpis div { background: #0c130e; padding: 16px 14px; display: grid; gap: 6px; }
.hw-kpis b { font-family: var(--font-display); font-stretch: 78%; font-weight: 800; font-size: clamp(28px, 3vw, 38px); line-height: 1; color: var(--lime); text-shadow: 0 0 24px rgba(var(--lime-rgb), .35); }
.hw-kpis span { font-size: 12px; color: rgba(243,245,239,.6); line-height: 1.3; }
.hw-card--mk { grid-column: 1 / -1; }
@media (max-width: 700px) {
  .hw-cat { grid-template-columns: 26px 92px 1fr 54px; gap: 8px; } .hw-thumb { width: 26px; height: 32px; }
  .hw-term { grid-template-columns: 70px 1fr 52px 52px; gap: 6px; } .hw-term > span { font-size: 12.5px; }
  .hw-shelf { grid-template-columns: repeat(5, 132px); overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: 6px; } .hw-bottle { scroll-snap-align: start; }
}

/* ---------- Click-through affordances + focus ---------- */
.si-open { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 26px; }
.si-open > span, .si-jump > span, .hw-chips > span { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--on-dark-muted); }
.si-open .si-switch { margin-top: 0; }
.si-jump { align-items: center; margin-top: 14px; } .si-jump > span { margin-right: 4px; }
.si-jump a { border-style: dashed; }
.si-hint { display: inline-flex; align-items: center; gap: 8px; margin: -6px 0 14px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .04em; color: var(--text-muted); }
.si-hint span { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--lime); color: var(--ink); font-size: 12px; animation: sihint 1.8s ease-in-out infinite; }
@keyframes sihint { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(2px, 2px); } }
@media (prefers-reduced-motion: reduce) { .si-hint span { animation: none; } }
.hw-card header .hw-more { margin-left: auto; font-family: var(--font-mono); font-size: 11px; color: var(--lime); text-decoration: none; padding: 4px 8px; border: 1px solid rgba(var(--lime-rgb), .35); border-radius: 999px; }
.hw-card header .hw-more:hover { background: var(--lime); color: var(--ink); }
.hw-card header span { flex: 1 1 auto; }
.hw-cat { grid-template-columns: 30px 118px 1fr 64px 16px; } .hw-mk a { grid-template-columns: 26px 110px 1fr 76px; }
.hw-term { grid-template-columns: 92px 1fr 64px 62px 16px; }
.hw-go { font-style: normal; font-size: 13px; color: rgba(243,245,239,.35); transition: color .15s ease, transform .15s ease; }
.hw-cat:hover .hw-go, .hw-term:hover .hw-go { color: var(--lime); transform: translateX(3px); }
.hw-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 18px; }
.hw-chips a { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border: 1px solid var(--line-dark); border-radius: 999px; color: var(--on-dark); text-decoration: none; font-size: 13px; transition: border-color .15s ease, background .15s ease, color .15s ease; }
.hw-chips a:hover { background: var(--lime); color: var(--ink); border-color: var(--lime); }
.hw-chip-img { width: 22px; height: 22px; border-radius: 50%; background: #fff; object-fit: contain; padding: 2px; }
@media (max-width: 700px) { .hw-cat { grid-template-columns: 26px 92px 1fr 54px 12px; } .hw-term { grid-template-columns: 70px 1fr 52px 52px 12px; } .hw-card header .hw-more { margin-left: 0; } }
.si-tm-tile:focus-visible, .hw-cat:focus-visible, .hw-term:focus-visible, .hw-bottle:focus-visible, .si-bottle:focus-visible, .si-pod:focus-visible, .dp-hl:focus-visible, .si-more:focus-visible, .si-switch a:focus-visible, .hw-chips a:focus-visible, .dp-table tbody tr:focus-visible { outline: 3px solid var(--lime); outline-offset: 2px; }
.dp-table tbody tr:focus-visible { outline-offset: -3px; }
.hw-kpis b span { font-size: inherit; color: inherit; line-height: inherit; }

/* ================= Data mega menu ================= */
.nav-mega { display: flex; align-items: center; align-self: stretch; height: 72px; }
.nav-mega-btn { display: inline-grid; place-items: center; width: 22px; height: 28px; margin-left: -6px; padding: 0; border: 0; background: none; color: var(--on-dark-muted); cursor: pointer; }
.nav-mega-btn svg { width: 12px; height: 12px; transition: transform .2s ease; }
.nav-mega:hover .nav-mega-btn, .nav-mega.is-open .nav-mega-btn { color: var(--lime); }
.nav-mega.is-open .nav-mega-btn svg { transform: rotate(180deg); }
.nav-mega:hover > a, .nav-mega.is-open > a { color: var(--lime); }
.mega { position: absolute; left: 0; right: 0; top: 100%; z-index: 60; visibility: hidden; opacity: 0; transform: translateY(-8px); transition: opacity .18s ease, transform .22s ease, visibility 0s linear .22s; pointer-events: none; }
html:not(.has-js) .nav-mega:hover .mega, .nav-mega.is-open .mega { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; pointer-events: auto; }
.nav-mega.is-closed .mega { visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; }
.mega-in { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: 1.05fr 1.6fr 1.2fr 1.2fr; gap: 28px; padding: 28px var(--gutter) 30px; background: radial-gradient(120% 160% at 0% 0%, #17271d 0%, #0d1510 50%, #0a0f0c 100%); border: 1px solid rgba(var(--lime-rgb), .18); border-top: 0; border-radius: 0 0 16px 16px; box-shadow: 0 40px 80px -30px rgba(0,0,0,.75); position: relative; overflow: hidden; }
.mega-in::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(rgba(var(--lime-rgb), .16) 1px, transparent 1.4px); background-size: 22px 22px; mask-image: radial-gradient(ellipse at 0% 0%, #000 10%, transparent 60%); -webkit-mask-image: radial-gradient(ellipse at 0% 0%, #000 10%, transparent 60%); }
.mega-in > * { position: relative; }
.mg-intro { display: grid; align-content: start; gap: 12px; padding-right: 20px; border-right: 1px solid rgba(243,245,239,.08); }
.mg-lock { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--on-dark); }
.mg-lock b { color: var(--lime); font-weight: 500; }
.mg-lock i { width: 12px; height: 12px; display: inline-block; background: var(--lime); clip-path: polygon(0 100%, 0 70%, 33% 70%, 33% 40%, 66% 40%, 66% 0, 100% 0, 100% 100%); }
.mg-title { margin: 0; font-family: var(--font-display); font-stretch: 78%; font-weight: 800; font-size: 34px; line-height: .95; text-transform: uppercase; color: var(--on-dark); }
.mg-title span { color: var(--lime); }
.mg-live { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 0 8px; align-items: center; font-family: var(--font-mono); font-size: 11px; line-height: 1.6; color: var(--on-dark-muted); }
.mg-live .dp-live { grid-row: span 2; }
.mg-cta { justify-self: start; display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; padding: 10px 16px; border-radius: 999px; background: var(--lime); color: var(--ink) !important; text-decoration: none; font-family: var(--font-display); font-stretch: 85%; font-weight: 700; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; box-shadow: 0 0 24px -6px rgba(var(--lime-rgb), .7); }
.mg-cta:hover { transform: translateY(-1px); }
.mg-h { margin: 0 0 8px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--lime); }
.mg-h small { letter-spacing: .04em; text-transform: none; color: rgba(243,245,239,.4); margin-left: 6px; }
.mg-col .mg-h:not(:first-child) { margin-top: 16px; }
.mg-cats { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; }
.mega a.mg-cat, .mega a.mg-mv, .mega a.mg-link { display: grid; align-items: center; gap: 10px; padding: 6px 8px; margin: 0 -8px; border-radius: 8px; text-decoration: none; color: var(--on-dark); font-family: var(--font-body); font-weight: 400; font-size: 13px; letter-spacing: 0; text-transform: none; transition: background .15s ease; }
.mega a.mg-cat { grid-template-columns: 30px 1fr; }
.mega a.mg-mv { grid-template-columns: 28px 1fr auto; }
.mega a.mg-cat:hover, .mega a.mg-mv:hover, .mega a.mg-link:hover { background: rgba(var(--lime-rgb), .08); }
.mg-cat-img, .mg-mv-img { width: 30px; height: 38px; object-fit: contain; background: #fff; border-radius: 4px; padding: 2px; }
.mg-mv-img { width: 28px; height: 34px; }
.mg-cat-img--none, .mg-mv-img--none { display: block; background: #1b3424; }
.mega a b { display: block; font-weight: 600; font-size: 13.5px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mega a small { display: block; font-size: 11px; color: rgba(243,245,239,.5); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mega a span { min-width: 0; }
.mg-mv-b { font-style: normal; font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; padding: 3px 6px; border-radius: 4px; white-space: nowrap; }
.mg-mv-b--up { background: rgba(var(--lime-rgb), .16); color: var(--lime); } .mg-mv-b--down { background: rgba(255,120,90,.14); color: #ff8a6a; } .mg-mv-b--cut { background: rgba(111,227,214,.14); color: #6fe3d6; }
.mg-links { display: grid; gap: 2px; }
.mega a.mg-link b { font-size: 13px; }
@media (max-width: 1180px) { .mega-in { grid-template-columns: 1.5fr 1.2fr 1.2fr; } .mg-intro { display: none; } }

/* mobile: categories under Data */
.mobile-sub { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 0 16px; border-bottom: 1px solid var(--line-dark); }
.mobile-nav .mobile-sub a { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px 6px 6px; border: 1px solid var(--line-dark); border-radius: 999px; font-family: var(--font-body); font-size: 13px; font-weight: 500; text-transform: none; color: var(--on-dark); }
.mobile-nav .mobile-sub a:not(:has(img)) { padding-left: 12px; }
.mobile-sub-img { width: 22px; height: 22px; border-radius: 50%; background: #fff; object-fit: contain; padding: 2px; }
.mobile-sub-img--none { display: none; }

/* hub: movers */
.si-mv-grid { display: grid; gap: 14px; }
@media (min-width: 900px) { .si-mv-grid { grid-template-columns: repeat(3, 1fr); } }
.si-mv-col { background: var(--white); border: 1px solid var(--line); border-radius: 10px; padding: 16px 16px 10px; }
.si-mv-col h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; font-size: 18px; }
a.si-mv { display: grid; grid-template-columns: 34px 1fr auto; gap: 12px; align-items: center; padding: 8px 6px; margin: 0 -6px; border-radius: 6px; text-decoration: none; color: var(--text); border-bottom: 1px solid var(--line); }
a.si-mv:last-child { border-bottom: 0; }
a.si-mv:hover { background: var(--paper); }
.si-mv-img { width: 34px; height: 42px; object-fit: contain; background: #fff; border-radius: 4px; }
.si-mv-img--none { display: block; background: #f1f1ec; }
a.si-mv span { min-width: 0; } a.si-mv b { display: block; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } a.si-mv small { display: block; font-size: 12px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.si-mv-b { font-style: normal; font-family: var(--font-mono); font-size: 11.5px; font-weight: 600; padding: 4px 8px; border-radius: 4px; white-space: nowrap; }
.si-mv-b--up { background: #e3f5c4; color: #2f5a05; } .si-mv-b--down { background: #f7dcd3; color: #8a2d13; } .si-mv-b--cut { background: #d6f3ef; color: #0f5a52; }

/* ---------- Brand snapshot: range table, awards, press, highlights ---------- */
.snap-hl { display: flex; flex-wrap: wrap; gap: 6px; margin: -4px 0 4px; }
.snap-hl span { font-size: 12.5px; padding: 5px 10px; border-radius: 999px; background: #eef7d6; color: #2f4a0c; border: 1px solid #d6ebaa; }
.snap-range > span em { font-style: normal; color: var(--text-muted); font-family: var(--font-mono); font-size: 11px; margin-left: 6px; text-transform: none; letter-spacing: 0; }
.snap-range-t { font-size: 13px; } .snap-range-t td:first-child { font-weight: 600; } .snap-range-t td { padding: 8px 10px 8px 0; }
.snap-awards { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 8px; }
.snap-awards li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: center; }
.snap-awards li i { width: 22px; height: 22px; border-radius: 50%; background: #d9d9d1; box-shadow: inset 0 -3px 0 rgba(0,0,0,.15), 0 0 0 2px #fff, 0 0 0 3px rgba(0,0,0,.08); position: relative; }
.snap-awards li i::after { content: ""; position: absolute; left: 7px; top: 19px; width: 8px; height: 8px; background: inherit; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 70%, 0 100%); }
.snap-awards .aw-top i { background: radial-gradient(circle at 35% 30%, #fff6c8, #e2b23a 55%, #a9781a); }
.snap-awards .aw-gold i { background: radial-gradient(circle at 35% 30%, #fff1b0, #d9a92c 55%, #9d6f12); }
.snap-awards .aw-silver i { background: radial-gradient(circle at 35% 30%, #ffffff, #bfc3c7 55%, #868b90); }
.snap-awards .aw-bronze i { background: radial-gradient(circle at 35% 30%, #ffd9b8, #c27c45 55%, #8a4f22); }
.snap-awards .aw-none { grid-template-columns: 1fr; }
.snap-awards b { display: block; font-size: 13.5px; } .snap-awards small { display: block; font-size: 12px; color: var(--text-muted); line-height: 1.35; }
.snap-social { display: block; margin-top: 10px; font-family: var(--font-mono); font-size: 11.5px; color: var(--text-muted); text-transform: none; letter-spacing: 0; }
.snap-press { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 6px; }
.snap-press a, .snap-press span { display: grid; gap: 2px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 6px; text-decoration: none; color: var(--text); background: var(--paper); }
.snap-press a:hover { border-color: var(--ink); }
.snap-press small { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); } .snap-press b { font-size: 14px; font-weight: 600; line-height: 1.3; }
.snap-press a b::after { content: " ↗"; color: var(--text-muted); font-weight: 400; }

/* ================= Share bar, product of the week ================= */
.sb { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 18px; }
.sb-k { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--on-dark-muted); margin-right: 4px; }
.sb-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--line-dark); border-radius: 999px; background: rgba(255,255,255,.02); color: var(--on-dark); font: inherit; font-size: 12.5px; text-decoration: none; cursor: pointer; transition: all .15s ease; }
.sb-btn:hover { border-color: var(--lime); color: var(--lime); }
.sb-btn.is-done { background: var(--lime); color: var(--ink); border-color: var(--lime); }
.sb-dl { border-style: dashed; }
.si-potw-sec { padding-bottom: 0; }
.si-potw { display: grid; gap: 0; background: var(--ink); color: var(--on-dark); border-radius: 16px; overflow: hidden; text-decoration: none; position: relative; box-shadow: 0 40px 80px -50px rgba(0,0,0,.7); }
@media (min-width: 860px) { .si-potw { grid-template-columns: 340px 1fr; } }
.si-potw::after { content: ""; position: absolute; right: -120px; top: -160px; width: 520px; height: 520px; background: radial-gradient(circle, rgba(var(--lime-rgb), .18), transparent 62%); pointer-events: none; }
.si-potw-img { position: relative; min-height: 300px; background: linear-gradient(#fff, #efeee7); }
.si-potw-photo { position: absolute; inset: 24px; width: calc(100% - 48px); height: calc(100% - 48px); object-fit: contain; mix-blend-mode: multiply; transition: transform .35s ease; }
.si-potw:hover .si-potw-photo { transform: scale(1.04) rotate(-1.5deg); }
.si-potw-body { position: relative; z-index: 1; padding: clamp(22px, 3vw, 40px); display: grid; gap: 10px; align-content: center; }
.si-potw-k { display: inline-flex; align-items: center; gap: 8px; justify-self: start; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; background: var(--lime); color: var(--ink); padding: 6px 12px; border-radius: 999px; font-weight: 600; }
.si-potw-k i { font-style: normal; }
.si-potw h2 { margin: 6px 0 0; color: var(--on-dark); font-size: clamp(40px, 5vw, 72px); }
.si-potw-name { margin: 0; font-size: 18px; color: rgba(243,245,239,.8); }
.si-potw-why { margin: 4px 0 0; color: var(--on-dark-muted); max-width: 60ch; line-height: 1.55; }
.si-potw-kv { display: flex; flex-wrap: wrap; gap: 14px 34px; margin-top: 8px; }
.si-potw-kv b { display: block; font-family: var(--font-display); font-stretch: 78%; font-weight: 800; font-size: 34px; color: var(--lime); line-height: 1; text-shadow: 0 0 24px rgba(var(--lime-rgb), .35); }
.si-potw-kv span { font-size: 12px; color: var(--on-dark-muted); }
.si-potw-go { margin-top: 8px; font-family: var(--font-display); font-stretch: 85%; font-weight: 700; font-size: 14px; letter-spacing: .05em; text-transform: uppercase; color: var(--lime); }
.si-hero--potw h1 { max-width: none; font-size: clamp(44px, 6vw, 96px); }
.si-hero--potw h1 .hl { display: block; font-size: .55em; line-height: 1.05; margin-top: 8px; }
.potw-hero { display: grid; gap: 32px; align-items: center; }
@media (min-width: 980px) { .potw-hero { grid-template-columns: 1.4fr 1fr; } }
.potw-hero .si-potw-k { margin-bottom: 18px; }
.potw-photo { position: relative; display: block; aspect-ratio: 4 / 5; max-height: 560px; background: linear-gradient(#fff, #efeee7); border-radius: 18px; overflow: hidden; text-decoration: none; box-shadow: 0 0 0 1px rgba(var(--lime-rgb), .3), 0 40px 80px -40px rgba(0,0,0,.8); }
.potw-photo-img { position: absolute; inset: 28px 28px 56px; width: calc(100% - 56px); height: calc(100% - 84px); object-fit: contain; mix-blend-mode: multiply; }
.potw-photo span { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px; text-align: center; font-family: var(--font-mono); font-size: 12px; color: var(--ink); background: var(--lime); }
.si-mv-col--wide { display: grid; gap: 0 28px; }
@media (min-width: 860px) { .si-mv-col--wide { grid-template-columns: 1fr 1fr; } }
.si-mv-col--wide a.si-mv:nth-last-child(2) { border-bottom: 0; }
.hw-card--potw { grid-column: 1 / -1; display: grid; grid-template-columns: 110px 1fr auto auto auto; gap: 22px; align-items: center; text-decoration: none; color: var(--on-dark); padding: 14px 20px 14px 14px; border-color: rgba(var(--lime-rgb), .4); background: radial-gradient(120% 200% at 0% 50%, #22381f 0%, #0d1510 60%, #0a0f0c 100%); transition: border-color .2s ease, transform .2s ease; }
.hw-card--potw:hover { border-color: var(--lime); transform: translateY(-2px); }
.hw-potw-img { width: 110px; height: 140px; object-fit: contain; background: linear-gradient(#fff, #efeee7); border-radius: 10px; padding: 10px; }
.hw-potw-img--none { display: block; background: #1b3424; border-radius: 10px; }
.hw-potw-k { display: inline-block; font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; background: var(--lime); color: var(--ink); padding: 4px 10px; border-radius: 999px; font-weight: 600; }
h3.hw-potw-h { margin: 10px 0 4px; font-size: 26px; letter-spacing: .02em; } h3.hw-potw-h span { display: block; font-family: var(--font-body); font-stretch: 100%; font-weight: 500; font-size: 15px; text-transform: none; letter-spacing: 0; color: rgba(243,245,239,.75); margin-top: 4px; }
.hw-card--potw p { margin: 0; font-size: 13.5px; color: rgba(243,245,239,.6); max-width: 64ch; }
.hw-potw-kv b { display: block; font-family: var(--font-display); font-stretch: 78%; font-weight: 800; font-size: 46px; line-height: 1; color: var(--lime); text-shadow: 0 0 28px rgba(var(--lime-rgb), .45); }
.hw-potw-kv span { font-size: 12px; color: rgba(243,245,239,.55); }
.hw-potw-go { font-family: var(--font-display); font-stretch: 85%; font-weight: 700; font-size: 13px; letter-spacing: .05em; text-transform: uppercase; color: var(--lime); white-space: nowrap; }
@media (max-width: 860px) { .hw-card--potw { grid-template-columns: 84px 1fr; } .hw-potw-img { width: 84px; height: 108px; } .hw-potw-kv, .hw-potw-go { grid-column: 2; } }

/* ================= Hub strip + This week page ================= */
.si-strip-sec { padding: clamp(28px, 4vw, 44px) 0 0; }
.si-strip { display: grid; grid-template-columns: 40px auto 1fr auto auto; gap: 16px; align-items: center; padding: 10px 18px 10px 10px; border-radius: 12px; background: var(--ink); color: var(--on-dark); text-decoration: none; border: 1px solid rgba(var(--lime-rgb), .25); transition: border-color .2s ease, transform .2s ease; }
.si-strip:hover { border-color: var(--lime); transform: translateY(-1px); }
.si-strip-img { width: 40px; height: 50px; object-fit: contain; background: #fff; border-radius: 6px; padding: 3px; }
.si-strip-img--none { display: block; background: #1b3424; border-radius: 6px; }
.si-strip .si-potw-k { font-size: 10.5px; padding: 4px 10px; }
.si-strip-t { font-size: 15px; color: rgba(243,245,239,.85); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .si-strip-t b { color: #fff; }
.si-strip-s { font-family: var(--font-mono); font-size: 12.5px; color: var(--lime); white-space: nowrap; }
.si-strip-go { font-family: var(--font-display); font-stretch: 85%; font-weight: 700; font-size: 13px; letter-spacing: .05em; text-transform: uppercase; color: var(--lime); white-space: nowrap; }
@media (max-width: 860px) { .si-strip { grid-template-columns: 40px 1fr; gap: 6px 12px; } .si-strip .si-potw-k, .si-strip-t, .si-strip-s, .si-strip-go { grid-column: 2; } }
.tw-potw { padding-top: clamp(36px, 5vw, 64px); padding-bottom: 0; }
.tw-grid { display: grid; gap: 14px; }
@media (min-width: 900px) { .tw-grid { grid-template-columns: 1.3fr 1fr; } }
.tw-stat { background: var(--white); border: 1px solid var(--line); border-left: 5px solid var(--lime-deep); border-radius: 10px; padding: 22px 24px; display: grid; gap: 8px; }
.tw-stat b { font-family: var(--font-display); font-stretch: 78%; font-weight: 800; font-size: clamp(56px, 7vw, 96px); line-height: .9; letter-spacing: -.02em; }
.tw-stat p { margin: 0; font-size: 16px; line-height: 1.5; } .tw-stat a { font-weight: 600; color: var(--text); }
.tw-quick { background: var(--white); border: 1px solid var(--line); border-radius: 10px; padding: 22px 24px; display: grid; gap: 10px; align-content: start; }
.tw-quick a { font-weight: 600; color: var(--text); text-decoration: none; padding: 10px 0; border-bottom: 1px solid var(--line); } .tw-quick a:last-child { border-bottom: 0; } .tw-quick a:hover { color: var(--forest-3); }
.tw-gallery { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.tw-card { margin: 0; background: var(--ink-2); border: 1px solid var(--line-dark); border-radius: 12px; overflow: hidden; }
.tw-card img { display: block; width: 100%; height: auto; }
.tw-card figcaption { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 12px; font-size: 13px; color: var(--on-dark); }

/* ================= Label checker ================= */
.lc-hero { position: relative; overflow: hidden; background: var(--ink); color: var(--on-dark); padding: clamp(48px, 7vw, 96px) 0 clamp(48px, 7vw, 88px); }
.lc-hero .wrap { position: relative; max-width: 980px; }
.lc-eyebrow { color: var(--lime); }
.lc-hero h1 { margin: 10px 0 14px; } .lc-hero .hl { color: var(--lime); } .lc-hero .lede { color: var(--on-dark-muted); max-width: 62ch; }
.lc-card { margin-top: 30px; display: grid; gap: 16px; padding: clamp(18px, 3vw, 28px); border-radius: 16px; background: radial-gradient(120% 140% at 0% 0%, #17271d 0%, #0d1510 55%, #0a0f0c 100%); border: 1px solid rgba(var(--lime-rgb), .2); box-shadow: 0 40px 80px -50px rgba(0,0,0,.8); }
.lc-step { display: flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--on-dark-muted); }
.lc-step span { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--lime); color: var(--ink); font-weight: 600; letter-spacing: 0; }
.lc-mks { display: flex; flex-wrap: wrap; gap: 8px; }
.lc-mk { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 10px; border: 1px solid var(--line-dark); border-radius: 999px; background: rgba(255,255,255,.02); color: var(--on-dark); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; transition: all .15s ease; }
.lc-mk small { font-family: var(--font-mono); font-size: 10.5px; font-weight: 400; color: rgba(243,245,239,.5); }
.lc-mk .flag { width: 20px; height: 14px; }
.lc-flag-txt { color: var(--lime); font-size: 10px; }
.lc-mk:hover { border-color: var(--lime); }
.lc-mk.is-on { background: var(--lime); color: var(--ink); border-color: var(--lime); } .lc-mk.is-on small { color: rgba(10,15,12,.6); }
.lc-drops { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
@media (max-width: 600px) { .lc-drops { grid-template-columns: 1fr; } }
.lc-drop { position: relative; display: grid; place-items: center; min-height: 220px; border: 1.5px dashed rgba(var(--lime-rgb), .35); border-radius: 12px; background: rgba(var(--lime-rgb), .03); cursor: pointer; overflow: hidden; transition: border-color .15s ease, background .15s ease; }
.lc-drop:hover, .lc-drop.is-over { border-color: var(--lime); background: rgba(var(--lime-rgb), .07); }
.lc-drop-in { display: grid; gap: 6px; justify-items: center; text-align: center; padding: 18px; }
.lc-drop-in svg { width: 30px; height: 30px; color: var(--lime); } .lc-drop-in b { font-size: 16px; } .lc-drop-in small { font-size: 12.5px; color: rgba(243,245,239,.55); }
.lc-drop img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #0d1510; }
.lc-drop.has-img .lc-drop-in { visibility: hidden; } .lc-drop.has-img { border-style: solid; border-color: rgba(var(--lime-rgb), .5); }
.lc-x { position: absolute; top: 8px; right: 8px; width: 30px; height: 30px; border-radius: 50%; border: 0; background: rgba(10,15,12,.8); color: #fff; font-size: 18px; cursor: pointer; z-index: 2; }
.lc-scan { position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--lime); box-shadow: 0 0 24px 6px rgba(var(--lime-rgb), .6); opacity: 0; pointer-events: none; z-index: 1; }
.lc.is-busy .lc-drop.has-img .lc-scan { opacity: 1; animation: lcscan 2.2s ease-in-out infinite alternate; }
.lc.is-busy .lc-drop.has-img img { filter: saturate(.6) brightness(.85); }
@keyframes lcscan { from { top: 0; } to { top: calc(100% - 3px); } }
.lc-more summary { cursor: pointer; font-size: 13.5px; color: var(--on-dark-muted); }
.lc-fields { display: grid; gap: 10px; grid-template-columns: repeat(3, 1fr); margin-top: 12px; }
@media (max-width: 600px) { .lc-fields { grid-template-columns: 1fr; } }
.lc-fields label { display: grid; gap: 6px; font-size: 12.5px; color: var(--on-dark-muted); }
.lc-fields input, .lc-fields select { height: 42px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--line-dark); background: #0a0f0c; color: var(--on-dark); font: inherit; font-size: 16px; }
.lc-go { justify-self: start; min-height: 52px; padding: 0 26px; font-size: 15px; }
.lc-go:disabled { opacity: .45; cursor: not-allowed; }
.lc-note { margin: 0; font-size: 12px; color: rgba(243,245,239,.5); }
.lc-status { margin: 0; padding: 10px 14px; border-radius: 8px; background: rgba(255,154,90,.12); color: #ffb48a; font-size: 14px; }
.lc-stage { margin-top: 18px; }
.lc-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.lc-steps li { font-family: var(--font-mono); font-size: 12px; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line-dark); color: rgba(243,245,239,.45); transition: all .3s ease; }
.lc-steps li.is-on { color: var(--ink); background: var(--lime); border-color: var(--lime); box-shadow: 0 0 20px -4px rgba(var(--lime-rgb), .7); }
.lc-steps li.is-done { color: var(--lime); border-color: rgba(var(--lime-rgb), .4); }
.lc-result-sec { padding-top: clamp(40px, 6vw, 72px); }
.lc-res-head { display: grid; grid-template-columns: 150px 1fr; gap: 28px; align-items: center; margin-bottom: 26px; }
@media (max-width: 600px) { .lc-res-head { grid-template-columns: 1fr; } }
.lc-ring { position: relative; width: 150px; height: 150px; display: grid; place-items: center; align-content: center; }
.lc-ring svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.lc-ring-bg { fill: none; stroke: #e6e6de; stroke-width: 10; }
.lc-ring-fg { fill: none; stroke: var(--lime-deep); stroke-width: 10; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--p)); transition: stroke-dashoffset 1.4s cubic-bezier(.2,.8,.2,1); }
.lc-ring--fixes .lc-ring-fg { stroke: #e3b649; } .lc-ring--not_ready .lc-ring-fg { stroke: #d2553a; }
.lc-ring b { font-family: var(--font-display); font-stretch: 78%; font-weight: 800; font-size: 52px; line-height: 1; } .lc-ring span { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .1em; }
.lc-verdict { display: inline-block; font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; padding: 6px 12px; border-radius: 999px; font-weight: 600; }
.lc-verdict--ready { background: #e3f5c4; color: #2f5a05; } .lc-verdict--fixes { background: #fbefc9; color: #7a5600; } .lc-verdict--not_ready { background: #f7dcd3; color: #8a2d13; }
.lc-res-head h2 { margin: 10px 0 8px; font-size: clamp(26px, 3vw, 38px); } .lc-res-head p { margin: 0 0 12px; font-size: 16px; line-height: 1.55; max-width: 70ch; }
.lc-res-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.lc-chip { display: inline-block; font-family: var(--font-mono); font-size: 11px; font-weight: 600; padding: 4px 8px; border-radius: 4px; white-space: nowrap; }
.lc-chip--pass { background: #e3f5c4; color: #2f5a05; } .lc-chip--fix { background: #fbefc9; color: #7a5600; } .lc-chip--missing { background: #f7dcd3; color: #8a2d13; } .lc-chip--unclear, .lc-chip--na { background: #ecece6; color: var(--text-muted); }
.lc-fixes { background: var(--ink); color: var(--on-dark); border-radius: 12px; padding: 18px 22px; margin-bottom: 18px; }
.lc-fixes h3 { margin: 0 0 10px; color: var(--lime); font-size: 16px; text-transform: uppercase; letter-spacing: .06em; }
.lc-fixes ol { margin: 0; padding-left: 20px; display: grid; gap: 6px; } .lc-fixes li { line-height: 1.5; }
.lc-checks { display: grid; gap: 8px; }
.lc-check { background: var(--white); border: 1px solid var(--line); border-radius: 8px; padding: 12px 16px; border-left: 4px solid #d9d9d1; }
.lc-check--pass { border-left-color: var(--lime-deep); } .lc-check--fix { border-left-color: #e3b649; } .lc-check--missing { border-left-color: #d2553a; }
.lc-check summary { display: flex; align-items: center; gap: 12px; cursor: pointer; list-style: none; } .lc-check summary::-webkit-details-marker { display: none; }
.lc-check summary b { font-size: 15px; }
.lc-check p { margin: 10px 0 0; display: grid; gap: 2px; font-size: 14px; line-height: 1.5; }
.lc-check p span { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.lc-found { background: var(--paper); padding: 8px 10px; border-radius: 6px; }
.lc-res-foot { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.lc-rl { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; counter-reset: rl; }
@media (min-width: 900px) { .lc-rl { grid-template-columns: 1fr 1fr; } }
.lc-rl li { counter-increment: rl; display: grid; gap: 4px; padding: 14px 16px 14px 52px; position: relative; background: var(--white); border: 1px solid var(--line); border-radius: 8px; }
.lc-rl li::before { content: counter(rl); position: absolute; left: 14px; top: 14px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--lime); font-family: var(--font-mono); font-size: 12px; }
.lc-rl b { font-size: 15px; } .lc-rl span { font-size: 13.5px; color: var(--text-muted); line-height: 1.5; }
.lc-promo { display: grid; gap: 4px; margin: 0 0 28px; padding: 18px 22px; border-radius: 12px; background: var(--ink); color: var(--on-dark); text-decoration: none; border: 1px solid rgba(var(--lime-rgb), .3); transition: border-color .2s ease, transform .2s ease; }
.lc-promo:hover { border-color: var(--lime); transform: translateY(-2px); }
.lc-promo-k { justify-self: start; font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; background: var(--lime); color: var(--ink); padding: 3px 9px; border-radius: 999px; font-weight: 600; }
.lc-promo b { font-size: 20px; margin-top: 6px; } .lc-promo span:not(.lc-promo-k) { color: var(--on-dark-muted); font-size: 14px; } .lc-promo em { font-style: normal; color: var(--lime); font-weight: 600; font-size: 14px; margin-top: 4px; }
.lc-res-head h2 { font-family: var(--font-body); font-stretch: 100%; text-transform: none; letter-spacing: -.01em; font-weight: 700; font-size: clamp(22px, 2.4vw, 30px); line-height: 1.2; }
.mg-gh { grid-column: 1 / -1; margin: 8px 0 2px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: rgba(243,245,239,.4); } .mg-gh:first-child { margin-top: 0; }

/* ================= Price my bottle ================= */
.pm-hero .wrap { max-width: var(--max); }
.pm-grid { display: grid; gap: 18px; margin-top: 28px; align-items: start; }
@media (min-width: 980px) { .pm-grid { grid-template-columns: 1.1fr 1fr; } }
.pm-form { margin-top: 0; }
.pm-fields { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; }
.pm-fields label { display: grid; gap: 6px; font-size: 12.5px; color: var(--on-dark-muted); }
.pm-fields small { font-size: 11px; color: rgba(243,245,239,.4); }
.pm-fields input, .pm-fields select { height: 44px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--line-dark); background: #0a0f0c; color: var(--on-dark); font: inherit; font-size: 16px; }
.pm-price { display: grid; grid-template-columns: auto 140px 1fr; gap: 12px; align-items: center; }
.pm-price > span { font-family: var(--font-display); font-stretch: 78%; font-weight: 800; font-size: 40px; color: var(--lime); }
.pm-price input[name="price"] { height: 56px; padding: 0 12px; border-radius: 10px; border: 1px solid rgba(var(--lime-rgb), .4); background: #0a0f0c; color: var(--on-dark); font-family: var(--font-display); font-stretch: 80%; font-weight: 800; font-size: 32px; width: 100%; }
.pm-price input[type="range"] { accent-color: var(--lime); width: 100%; }
.pm-out { display: grid; gap: 14px; padding: clamp(18px, 3vw, 26px); border-radius: 16px; background: radial-gradient(120% 140% at 100% 0%, #17271d 0%, #0d1510 55%, #0a0f0c 100%); border: 1px solid rgba(var(--lime-rgb), .2); }
.pm-margin span { display: block; font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--on-dark-muted); }
.pm-margin b { display: block; font-family: var(--font-display); font-stretch: 78%; font-weight: 800; font-size: clamp(56px, 7vw, 88px); line-height: .95; color: var(--lime); text-shadow: 0 0 34px rgba(var(--lime-rgb), .35); }
.pm-margin b.is-loss { color: #ff8a6a; text-shadow: none; }
.pm-margin em { font-style: normal; font-size: 14px; color: var(--on-dark-muted); }
.pm-wf { display: grid; gap: 6px; }
.pm-row { display: grid; grid-template-columns: 170px 1fr auto; gap: 12px; align-items: center; font-size: 14px; color: var(--on-dark); }
.pm-row i { height: 12px; border-radius: 6px; background: rgba(255,154,90,.65); width: var(--w); transition: width .4s cubic-bezier(.2,.8,.2,1); justify-self: start; min-width: 2px; }
.pm-row b { font-family: var(--font-mono); font-size: 13px; text-align: right; white-space: nowrap; }
@media (max-width: 560px) { .pm-row { grid-template-columns: minmax(0, 1fr) 44px auto; gap: 10px; font-size: 13px; } .pm-row b { font-size: 12px; } }
.pm-row.is-total i { background: rgba(243,245,239,.35); } .pm-row.is-keep i { background: var(--lime); box-shadow: 0 0 16px rgba(var(--lime-rgb), .5); } .pm-row.is-loss i { background: #d2553a; }
.pm-row.is-keep, .pm-row.is-loss { border-top: 1px solid rgba(243,245,239,.12); padding-top: 8px; font-weight: 600; }
.pm-note { margin: 0; font-size: 12.5px; color: rgba(243,245,239,.55); line-height: 1.5; }
@media (max-width: 600px) { .pm-row { grid-template-columns: 120px 1fr 70px; font-size: 13px; } .pm-fields { grid-template-columns: 1fr; } .pm-price { grid-template-columns: auto 1fr; } .pm-price input[type="range"] { grid-column: 1 / -1; } }
.pm-strip-wrap { background: var(--ink); border-radius: 14px; padding: 30px 28px 44px; border: 1px solid rgba(var(--lime-rgb), .16); overflow: hidden; }
.pm-strip { position: relative; height: 250px; }
.pm-axis { position: absolute; left: 0; right: 0; bottom: -26px; height: 20px; border-top: 1px solid rgba(243,245,239,.15); }
.pm-axis span { position: absolute; top: 6px; transform: translateX(-50%); font-family: var(--font-mono); font-size: 10.5px; color: rgba(243,245,239,.5); }
.pm-dot { position: absolute; bottom: calc(6px + var(--lane) * 38px); width: 34px; height: 34px; transform: translateX(-50%); border-radius: 50%; background: #fff; border: 2px solid var(--ink); box-shadow: 0 0 0 1px rgba(var(--lime-rgb), .35); overflow: hidden; transition: transform .15s ease; }
.pm-dot img { width: 100%; height: 100%; object-fit: contain; padding: 3px; }
.pm-dot:hover { transform: translateX(-50%) scale(1.5); z-index: 5; box-shadow: 0 0 0 3px var(--lime); }
.pm-you { position: absolute; top: 0; bottom: 0; transform: translateX(-50%); width: 2px; background: var(--lime); box-shadow: 0 0 18px rgba(var(--lime-rgb), .8); z-index: 4; transition: left .3s cubic-bezier(.2,.8,.2,1); }
.pm-you b, .pm-you span { position: absolute; left: 50%; transform: translateX(-50%); white-space: nowrap; font-family: var(--font-mono); }
.pm-you b { top: -4px; background: var(--lime); color: var(--ink); padding: 3px 8px; border-radius: 4px; font-size: 11px; } .pm-you span { top: 22px; color: var(--lime); font-size: 12px; }
.pm-med { position: absolute; top: 40px; bottom: 0; width: 0; border-left: 1px dashed rgba(243,245,239,.4); }
.pm-med span { position: absolute; top: -18px; left: 6px; white-space: nowrap; font-family: var(--font-mono); font-size: 10.5px; color: rgba(243,245,239,.6); }
.pm-near { margin-top: 28px; } .pm-near h3 { margin: 0 0 12px; font-size: 18px; }
.pm-near-list { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.pm-near-i { display: grid; grid-template-columns: 56px 1fr; gap: 12px; align-items: center; padding: 10px 12px; background: var(--white); border: 1px solid var(--line); border-radius: 10px; text-decoration: none; color: var(--text); }
.pm-near-i:hover { border-color: var(--ink); }
.pm-near-i img { width: 56px; height: 70px; object-fit: contain; }
.pm-near-i b { display: block; font-size: 14px; } .pm-near-i small { display: block; font-size: 12px; color: var(--text-muted); } .pm-near-i em { display: block; font-style: normal; font-family: var(--font-mono); font-size: 11.5px; margin-top: 4px; }

/* ================= Brand pages + directory ================= */
.br-shares { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.br-share { display: grid; gap: 6px; padding: 18px; background: var(--white); border: 1px solid var(--line); border-radius: 10px; }
.br-share span { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
.br-share b { font-family: var(--font-display); font-stretch: 78%; font-weight: 800; font-size: 48px; line-height: 1; }
.br-share i { display: block; height: 8px; border-radius: 4px; background: #ecece6; position: relative; overflow: hidden; }
.br-share i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); background: var(--lime-deep); border-radius: 4px; }
.br-share small { font-size: 12.5px; color: var(--text-muted); } .br-share a { font-size: 13px; font-weight: 600; color: var(--text); }
.br-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.br-item { display: grid; grid-template-columns: 110px 1fr; gap: 14px; padding: 12px; background: var(--white); border: 1px solid var(--line); border-radius: 12px; text-decoration: none; color: var(--text); transition: border-color .15s ease, transform .15s ease; }
.br-item:hover { border-color: var(--ink); transform: translateY(-2px); }
.br-img { width: 110px; height: 140px; object-fit: contain; background: linear-gradient(#fff, #f3f2ec); border-radius: 8px; padding: 8px; }
.br-img--none { display: block; background: #f1f1ec; border-radius: 8px; }
.br-body { display: grid; gap: 6px; align-content: start; min-width: 0; }
.br-rank { justify-self: start; font-family: var(--font-mono); font-size: 11px; background: var(--ink); color: var(--lime); padding: 3px 8px; border-radius: 4px; }
.br-body > b { font-size: 15px; line-height: 1.25; }
.br-kv { display: flex; gap: 14px; flex-wrap: wrap; } .br-kv span { font-size: 11px; color: var(--text-muted); display: grid; } .br-kv em { font-style: normal; font-family: var(--font-display); font-stretch: 80%; font-weight: 800; font-size: 19px; color: var(--text); }
.br-spark { width: 100%; height: 32px; } .br-spark polyline { fill: none; stroke-linejoin: round; }
.br-body small { font-size: 11px; color: var(--text-muted); }
.br-neigh { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 24px; }
.br-neigh > span { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); margin-right: 6px; }
.br-neigh a { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border: 1px solid var(--line); border-radius: 999px; background: var(--white); color: var(--text); text-decoration: none; font-size: 13px; }
.br-neigh a:hover { border-color: var(--ink); }
.si-bs-link { color: inherit; text-decoration: none; border-bottom: 1px dashed rgba(10,15,12,.3); } .si-bs-link:hover { border-bottom-color: var(--ink); }
.bi-search { margin-top: 22px; max-width: 520px; background: #0a0f0c; border-color: var(--line-dark); height: 52px; }
.bi-search input { color: var(--on-dark); font-size: 16px; }
.bi-tops { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.bi-top { position: relative; display: grid; gap: 6px; justify-items: center; text-align: center; padding: 16px 12px; background: var(--white); border: 1px solid var(--line); border-radius: 12px; text-decoration: none; color: var(--text); }
.bi-top:hover { border-color: var(--ink); }
.bi-top > span { position: absolute; top: 10px; left: 10px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--lime); font-family: var(--font-mono); font-size: 11px; }
.bi-top-img { width: 48px; height: 60px; object-fit: contain; } .bi-top b { font-size: 14px; } .bi-top em { font-style: normal; font-family: var(--font-mono); font-size: 12px; color: var(--forest-3); }
.bi-nav { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 20px; position: sticky; top: 72px; z-index: 5; background: var(--cream); padding: 10px 0; }
.bi-nav a { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 6px; background: var(--white); color: var(--text); text-decoration: none; font-family: var(--font-mono); font-size: 13px; }
.bi-nav a:hover { background: var(--ink); color: var(--lime); }
.bi-group { scroll-margin-top: 140px; margin-bottom: 22px; } .bi-group h3 { margin: 0 0 10px; font-size: 26px; }
.bi-list { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.bi-list a { display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: center; padding: 8px 10px; background: var(--white); border: 1px solid var(--line); border-radius: 8px; text-decoration: none; color: var(--text); }
.bi-list a:hover { border-color: var(--ink); } .bi-list a[hidden] { display: none; }
.bi-img { width: 34px; height: 42px; object-fit: contain; } .bi-img--none { display: block; }
.bi-list b { display: block; font-size: 14px; } .bi-list small { display: block; font-size: 11.5px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ================= Share of search ================= */
.sv-grid { display: grid; gap: 18px; }
@media (min-width: 980px) { .sv-grid { grid-template-columns: 300px 1fr; align-items: start; } }
.sv-kpis { display: grid; gap: 1px; background: rgba(243,245,239,.1); border: 1px solid rgba(243,245,239,.1); border-radius: 12px; overflow: hidden; }
.sv-kpis div { background: #0c130e; padding: 18px; display: grid; gap: 6px; }
.sv-kpis b { font-family: var(--font-display); font-stretch: 78%; font-weight: 800; font-size: 44px; line-height: 1; color: var(--lime); text-shadow: 0 0 24px rgba(var(--lime-rgb), .35); }
.sv-kpis span { font-size: 13px; color: var(--on-dark-muted); }
.sv-list { display: grid; gap: 4px; padding: 16px 18px; border-radius: 12px; background: radial-gradient(120% 140% at 0% 0%, #17271d 0%, #0d1510 55%, #0a0f0c 100%); border: 1px solid rgba(var(--lime-rgb), .16); }
.sv-row { display: grid; grid-template-columns: 170px 1fr 52px; grid-template-rows: auto auto; gap: 2px 14px; align-items: center; padding: 8px 0; border-bottom: 1px solid rgba(243,245,239,.06); }
.sv-row:last-child { border-bottom: 0; }
.sv-b { font-weight: 600; font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sv-b a { color: var(--on-dark); text-decoration: none; border-bottom: 1px dashed rgba(243,245,239,.3); } .sv-b a:hover { color: var(--lime); }
.sv-bar { height: 12px; border-radius: 6px; background: rgba(243,245,239,.06); position: relative; overflow: hidden; }
.sv-o { position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: 6px; background: linear-gradient(90deg, #5b8a1a, var(--lime)); box-shadow: 0 0 14px rgba(var(--lime-rgb), .5); }
.sv-row b { font-family: var(--font-mono); font-size: 13px; color: var(--lime); text-align: right; }
.sv-row small { grid-column: 2 / 4; font-size: 11.5px; color: rgba(243,245,239,.5); }
@media (max-width: 600px) { .sv-row { grid-template-columns: 110px 1fr 44px; } }
.sv-hub { margin: 0 0 22px; } .sv-hub h3 { margin: 0 0 10px; color: var(--on-dark); font-size: 18px; }
.sv-tw { border-radius: 12px; border: 1px solid rgba(var(--lime-rgb), .16); background: #0c130e; padding: 6px 16px; }
.sv-tw .dp-table th { color: rgba(243,245,239,.5); border-bottom-color: rgba(243,245,239,.2); background: transparent; }
.sv-tw .dp-table td { color: var(--on-dark); border-bottom-color: rgba(243,245,239,.06); }
.sv-tw .dp-table small { color: var(--lime); font-family: var(--font-mono); margin-left: 6px; }
/* leaderboard movers: tidy rows */
.lb-summary > div { background: var(--white); border: 1px solid var(--line); border-radius: 10px; padding: 16px 16px 8px; }
.lb-movers { gap: 0; }
.lb-movers li { display: grid; grid-template-columns: 56px 1fr; gap: 12px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--line); }
.lb-movers li:last-child { border-bottom: 0; }
.lb-movers li .mv-badge { min-width: 0; width: 56px; padding: 5px 0; }
.lb-mv-t { min-width: 0; display: grid; gap: 1px; }
.lb-mv-t b { font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-mv-t small { grid-column: auto; font-size: 12.5px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-movers li .lb-mv-t small, .lb-movers li .lb-mv-t b { grid-column: auto; display: block; }

/* ================= Sign-up: Shelf Report ================= */
.su-sec { background: var(--ink); color: var(--on-dark); padding: clamp(48px, 7vw, 88px) 0; position: relative; overflow: hidden; }
.su-sec::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(var(--lime-rgb), .16) 1px, transparent 1.4px); background-size: 26px 26px; mask-image: radial-gradient(ellipse at 10% 20%, #000 10%, transparent 60%); -webkit-mask-image: radial-gradient(ellipse at 10% 20%, #000 10%, transparent 60%); pointer-events: none; }
.su { position: relative; display: grid; gap: 28px; }
@media (min-width: 980px) { .su { grid-template-columns: 1fr 1.2fr; align-items: start; } }
.su-lock { margin-bottom: 18px; }
.su-pitch h2 { margin: 0 0 12px; color: var(--on-dark); } .su-pitch .hl { color: var(--lime); }
.su-pitch p { color: var(--on-dark-muted); font-size: 17px; line-height: 1.55; margin: 0 0 16px; max-width: 46ch; }
.su-ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.su-ticks li { display: flex; gap: 10px; align-items: center; font-size: 15px; } .su-ticks li::before { content: "✓"; display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--lime); color: var(--ink); font-size: 12px; font-weight: 700; }
.su-fields { display: grid; gap: 14px; padding: clamp(18px, 3vw, 26px); border-radius: 16px; background: radial-gradient(120% 140% at 100% 0%, #17271d 0%, #0d1510 55%, #0a0f0c 100%); border: 1px solid rgba(var(--lime-rgb), .22); }
.su-fields label > span, .su-cats legend { display: block; font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--on-dark-muted); margin-bottom: 6px; }
.su-fields input:not([type=checkbox]), .su-fields select { width: 100%; height: 46px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--line-dark); background: #0a0f0c; color: var(--on-dark); font: inherit; font-size: 16px; }
.su-email input { height: 54px !important; font-size: 17px !important; border-color: rgba(var(--lime-rgb), .4) !important; }
.su-cats { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.su-cats legend { width: 100%; }
.su-chip input { position: absolute; opacity: 0; pointer-events: none; }
.su-chip span { display: inline-block; padding: 6px 12px; border: 1px solid var(--line-dark); border-radius: 999px; font-size: 13px; cursor: pointer; transition: all .15s ease; }
.su-chip input:checked + span { background: var(--lime); color: var(--ink); border-color: var(--lime); }
.su-chip input:focus-visible + span { outline: 2px solid var(--lime); outline-offset: 2px; }
.su-row { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; }
@media (max-width: 600px) { .su-row { grid-template-columns: 1fr; } }
.su-consent { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--on-dark-muted); cursor: pointer; }
.su-consent input { margin-top: 2px; accent-color: var(--lime); width: 16px; height: 16px; flex: none; }
.su-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.su-go { justify-self: start; min-height: 52px; padding: 0 24px; }
.su-status { margin: 0; padding: 10px 12px; border-radius: 8px; background: rgba(255,154,90,.12); color: #ffb48a; font-size: 14px; } .su-status.is-ok { background: rgba(var(--lime-rgb), .12); color: var(--lime); }
.su-done { padding: 26px; border-radius: 16px; background: rgba(var(--lime-rgb), .08); border: 1px solid rgba(var(--lime-rgb), .4); } .su-done b { font-size: 22px; color: var(--lime); } .su-done p { margin: 8px 0 0; color: var(--on-dark-muted); }
.su-toast { position: fixed; right: 18px; bottom: 18px; z-index: 70; width: min(340px, calc(100vw - 36px)); display: grid; gap: 10px; padding: 18px; border-radius: 14px; background: #0c130e; color: var(--on-dark); border: 1px solid rgba(var(--lime-rgb), .45); box-shadow: 0 30px 60px -20px rgba(0,0,0,.6), 0 0 30px -10px rgba(var(--lime-rgb), .4); transform: translateY(20px); opacity: 0; transition: all .35s cubic-bezier(.2,.8,.2,1); }
.su-toast.is-in { transform: none; opacity: 1; }
.su-toast b { font-size: 17px; } .su-toast p { margin: 0; font-size: 13.5px; color: var(--on-dark-muted); }
.su-toast input[type=email] { height: 44px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--line-dark); background: #0a0f0c; color: var(--on-dark); font: inherit; }
.su-toast .btn { min-height: 44px; }
.su-toast-x { position: absolute; top: 8px; right: 10px; border: 0; background: none; color: var(--on-dark-muted); font-size: 20px; cursor: pointer; }
/* hub shelf cards: price on the edge, then name, then units and revenue side by side */
.si-bottle { grid-template-rows: auto 196px auto auto auto; }
.si-edge { grid-template-columns: 1fr; gap: 0; padding: 10px 14px 10px; }
.si-edge strong { font-size: 26px; }
.si-edge i { margin-top: 8px; }
.si-bottle-name { padding: 10px 2px 0; }
.si-bottle-name small { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--lime); }
.si-bstats { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin-top: 10px; background: rgba(243,245,239,.1); border: 1px solid rgba(243,245,239,.1); border-radius: 8px; overflow: hidden; }
.si-bstats > span { display: grid; gap: 2px; padding: 8px 8px 7px; background: #0d1510; }
.si-bstats em { font-style: normal; font-family: var(--font-display); font-stretch: 80%; font-weight: 800; font-size: 19px; line-height: 1; color: var(--on-dark); }
.si-bstats small { font-family: var(--font-mono); font-size: 9.5px; color: rgba(243,245,239,.5); white-space: nowrap; }
.si-bottle { flex: 0 0 184px; }
.si-bstats > span { padding: 8px 9px 7px; }
.si-bstats em { font-size: 18px; }
.si-bstats small { font-size: 9px; letter-spacing: 0; }
/* sign-up gate after five free product views */
.su-gate { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 18px; }
.su-gate-bg { position: absolute; inset: 0; background: rgba(10,15,12,.6); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.su-gate-card { position: relative; width: min(460px, 100%); display: grid; gap: 12px; padding: 26px; border-radius: 16px; background: radial-gradient(120% 140% at 0% 0%, #17271d 0%, #0d1510 55%, #0a0f0c 100%); color: var(--on-dark); border: 1px solid rgba(var(--lime-rgb), .45); box-shadow: 0 40px 80px -30px rgba(0,0,0,.8), 0 0 40px -10px rgba(var(--lime-rgb), .35); animation: snapin .35s ease both; }
.su-gate-card .su-lock { justify-self: start; margin: 0; }
.su-gate-h { font-family: var(--font-display); font-stretch: 80%; font-weight: 800; font-size: 28px; line-height: 1.05; text-transform: uppercase; }
.su-gate-card p { margin: 0; color: var(--on-dark-muted); line-height: 1.5; }
.su-gate-card input[type=email] { height: 50px; padding: 0 14px; border-radius: 10px; border: 1px solid rgba(var(--lime-rgb), .4); background: #0a0f0c; color: var(--on-dark); font: inherit; font-size: 16px; }
.su-gate-card .btn { min-height: 50px; }
.su-gate-card small { color: rgba(243,245,239,.45); font-size: 12px; }
.su-roles { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.su-roles legend { width: 100%; font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--on-dark-muted); margin-bottom: 6px; }
.su-roles .su-chip span { font-size: 12.5px; padding: 5px 11px; }
.hw-cut { grid-template-columns: 30px 1fr 62px 52px 16px; }
.hw-cut > span { font-size: 13.5px; font-weight: 600; min-width: 0; } .hw-cut > span small { display: block; font-weight: 400; font-size: 11px; color: rgba(243,245,239,.5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 700px) { .hw-cut { grid-template-columns: 26px 1fr 56px 48px 12px; } }

/* ================= Pro panels ================= */
.kw-grid { display: grid; gap: 14px; }
@media (min-width: 1000px) { .kw-grid { grid-template-columns: 1.4fr 1fr; align-items: stretch; } }
.kw-head { display: flex; justify-content: space-between; gap: 10px; font-family: var(--font-mono); font-size: 11px; color: rgba(243,245,239,.55); margin-bottom: 6px; } .kw-head em { font-style: normal; color: var(--lime); }
.pro-panel { position: relative; border-radius: 12px; overflow: hidden; }
.pro-lock { height: 100%; display: grid; gap: 10px; align-content: center; padding: 22px; border-radius: 12px; background: radial-gradient(120% 140% at 100% 0%, #22381f 0%, #0d1510 60%, #0a0f0c 100%); color: var(--on-dark); border: 1px solid rgba(var(--lime-rgb), .4); }
.pro-lock b { font-family: var(--font-display); font-stretch: 80%; font-weight: 800; font-size: 26px; text-transform: uppercase; line-height: 1; }
.pro-lock p { margin: 0; color: var(--on-dark-muted); line-height: 1.5; font-size: 14.5px; }
.pro-lock ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } .pro-lock li { font-size: 13.5px; display: flex; gap: 8px; } .pro-lock li::before { content: "◆"; color: var(--lime); font-size: 10px; margin-top: 3px; }
.pro-lock .btn { justify-self: start; }
.pro-have { font-size: 12.5px; color: var(--on-dark-muted); }
.pro-badge { justify-self: start; display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; background: var(--lime); color: var(--ink); padding: 4px 10px; border-radius: 999px; }
.pro-body { display: grid; gap: 14px; } .pro-tag { display: flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 11px; color: var(--on-dark-muted); }
.section--cream .pro-tag { color: var(--text-muted); }
.si-heat-row.is-locked .si-heat-cells { filter: blur(3px) saturate(.4); opacity: .55; }
.si-heat-row.is-locked .si-heat-term { color: rgba(243,245,239,.58); }
.si-dark .pro-panel[data-kind="hub"] { margin-top: 18px; }
.pro-sov, .pro-sov-grid > div { padding: 14px 16px; border-radius: 12px; background: #0c130e; border: 1px solid rgba(var(--lime-rgb), .16); color: var(--on-dark); }
.pro-sov-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.pro-sov-head { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 6px; } .pro-sov-head span { font-family: var(--font-mono); font-size: 11px; color: rgba(243,245,239,.55); }
.pro-sov .sv-row { grid-template-columns: 130px 1fr 44px; }
.dr-lock { position: absolute; inset: 0; display: grid; gap: 10px; align-content: center; justify-items: start; padding: 24px 28px; background: rgba(10,15,12,.86); backdrop-filter: blur(3px); color: var(--on-dark); }
.dr-lock b { font-family: var(--font-display); font-stretch: 80%; font-weight: 800; font-size: 24px; text-transform: uppercase; } .dr-lock p { margin: 0; color: var(--on-dark-muted); font-size: 14px; max-width: 46ch; }
.dp-chart--dr { min-height: 220px; }
.si-pro-btn.is-pro { background: transparent; color: var(--lime); border: 1px solid var(--lime); }
.dr-sellers { margin: -6px 0 18px; }
.dr-sell-lock { display: grid; gap: 8px; justify-items: start; padding: 16px 18px; border-radius: 10px; background: var(--ink); color: var(--on-dark); border: 1px solid rgba(var(--lime-rgb), .35); }
.dr-sell-lock b { font-size: 17px; } .dr-sell-lock p { margin: 0; font-size: 13.5px; color: var(--on-dark-muted); }
.dr-sell-load { font-size: 13px; color: var(--text-muted); }
.dr-sell-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 8px; } .dr-sell-head small { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); }
.dr-sell-t { width: 100%; border-collapse: collapse; font-size: 13px; } .dr-sell-t th { text-align: left; font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); padding: 6px 8px 6px 0; border-bottom: 1px solid var(--line); }
.dr-sell-t td { padding: 8px 8px 8px 0; border-bottom: 1px solid var(--line); vertical-align: top; } .dr-sell-t td small { display: block; font-size: 11px; color: var(--text-muted); }
.dr-sell-t tr.is-bb td { background: #f3fbe0; } .dr-bb { font-style: normal; font-family: var(--font-mono); font-size: 10px; background: var(--lime); color: var(--ink); padding: 2px 6px; border-radius: 3px; margin-left: 4px; }

/* ================= Shelfdrop Intelligence shell ================= */
.si-site-header { background: rgba(10,15,12,.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom-color: rgba(var(--lime-rgb), .14); }
.si-logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--on-dark); font-family: var(--font-mono); font-size: 13px; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
.si-logo i { width: 18px; height: 18px; background: var(--lime); clip-path: polygon(0 100%, 0 70%, 33% 70%, 33% 40%, 66% 40%, 66% 0, 100% 0, 100% 100%); box-shadow: 0 0 18px rgba(var(--lime-rgb), .6); }
.si-logo b { color: var(--lime); font-weight: 500; }
.si-nav a { font-size: 13.5px; }
.si-cta { gap: 14px; }
.si-hlive { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 11px; color: var(--on-dark-muted); white-space: nowrap; }
@media (max-width: 1320px) { .si-hlive { display: none; } }
.si-exit { color: var(--on-dark-muted); font-family: var(--font-display); font-stretch: 85%; font-weight: 600; font-size: 14px; letter-spacing: .03em; text-transform: uppercase; text-decoration: none; padding: 8px 10px; white-space: nowrap; }
.si-exit:hover { color: var(--lime); }
@media (max-width: 1240px) { .si-cta { gap: 6px; } .si-exit { padding: 8px 4px; font-size: 13px; } }
@media (min-width: 1024px) and (max-width: 1099px) { .si-site-header .nav, .si-site-header .header-cta { display: none; } .si-site-header .menu-toggle { display: inline-grid; } .si-site-header .mobile-nav.open { display: block; } }
.si-nav a[href="/label-checker"] { display: none; }
@media (max-width: 1359px) { .si-nav a[href="/price-my-bottle"] { display: none; } }
.mobile-nav a.si-exit-m { font-family: var(--font-mono); font-stretch: normal; font-size: 12px; font-weight: 500; letter-spacing: .12em; color: var(--lime); padding: 14px 0; }
@media (max-width: 1240px) { .si-nav a[href="/price-my-bottle"], .si-nav a[href="/label-checker"] { display: none; } }
.si-site-header .nav-mega { height: 72px; }
.si-site-footer .si-foot-top { display: grid; gap: 32px; padding-bottom: 40px; border-bottom: 1px solid var(--line-dark); }
@media (min-width: 900px) { .si-site-footer .si-foot-top { grid-template-columns: 1.4fr repeat(4, 1fr); } }
.si-foot-brand { display: grid; gap: 14px; align-content: start; } .si-foot-brand p { margin: 0; color: var(--on-dark-muted); font-size: 14px; line-height: 1.55; max-width: 40ch; } .si-foot-brand p a { color: var(--on-dark); } .si-foot-brand .btn { justify-self: start; }

/* search page */
.sr-hero h1 { max-width: none; }
.sr-form { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; margin-top: 26px; max-width: 760px; padding: 8px 8px 8px 18px; border-radius: 14px; background: #0c130e; border: 1px solid rgba(var(--lime-rgb), .45); box-shadow: 0 0 40px -14px rgba(var(--lime-rgb), .5); }
.sr-form svg { width: 20px; height: 20px; color: var(--lime); }
.sr-form input { border: 0; outline: 0; background: transparent; color: var(--on-dark); font: inherit; font-size: 19px; height: 50px; min-width: 0; }
.sr-form .btn { min-height: 50px; }
.sr-hint { margin: 12px 0 0; font-family: var(--font-mono); font-size: 12px; color: var(--on-dark-muted); }
.section.sr-results-sec { padding: clamp(28px, 3.5vw, 44px) 0 clamp(72px, 8vw, 104px); }
.sr-results, .sr-live { display: grid; gap: 6px; }
.sr-live { margin-top: 28px; }
.sr-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 0 0 8px; border-bottom: 2px solid var(--ink); margin-bottom: 4px; } .sr-head span { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); }
.sr-row { display: grid; grid-template-columns: 40px 1fr 150px 96px; gap: 14px; align-items: center; padding: 10px 12px; background: var(--white); border: 1px solid var(--line); border-radius: 10px; text-decoration: none; color: var(--text); transition: border-color .15s ease; }
.sr-row:hover { border-color: var(--ink); }
.sr-row img { width: 40px; height: 50px; object-fit: contain; }
.sr-t { min-width: 0; } .sr-t b { display: block; font-size: 15px; } .sr-t small { display: block; font-size: 12.5px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr-c { font-size: 13px; } .sr-c small { display: block; font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); }
.sr-p { font-family: var(--font-mono); font-size: 14px; text-align: right; } .sr-p small { display: block; font-size: 11px; color: var(--text-muted); }
@media (max-width: 640px) { .sr-row { grid-template-columns: 36px 1fr 78px; } .sr-c { display: none; } }
.sr-lock { display: grid; gap: 10px; justify-items: start; padding: 22px; border-radius: 14px; background: var(--ink); color: var(--on-dark); border: 1px solid rgba(var(--lime-rgb), .4); }
.sr-lock b { font-family: var(--font-display); font-stretch: 80%; font-weight: 800; font-size: 26px; text-transform: uppercase; } .sr-lock p { margin: 0; color: var(--on-dark-muted); max-width: 64ch; }
.sr-loading { display: flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 13px; color: var(--text-muted); }
/* search page: starting points before anyone types (popular searches, top sellers, categories, price drops) */
.sr-start { display: grid; gap: clamp(28px, 3.5vw, 40px); }
.sr-start[hidden] { display: none; }
.sr-mod { min-width: 0; }
.sr-mod-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 10px; }
.sr-mod-head h2 { margin: 0; font-family: var(--font-display); font-stretch: 80%; font-weight: 800; font-size: clamp(20px, 2.2vw, 26px); line-height: 1.1; text-transform: uppercase; }
.sr-more { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; color: var(--text); font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.sr-more:hover { text-decoration: underline; }
.sr-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sr-chip { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid var(--line); border-radius: 999px; background: var(--white); color: var(--text); font-size: 15px; font-weight: 600; text-decoration: none; }
.sr-chip:hover { border-color: var(--ink); }
.sr-ones { display: grid; grid-auto-flow: column; grid-auto-columns: 136px; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter) 6px; scroll-padding-left: var(--gutter); scrollbar-width: thin; }
@media (min-width: 1100px) { .sr-ones { grid-auto-flow: row; grid-template-columns: repeat(10, minmax(0, 1fr)); overflow: visible; margin: 0; padding: 0; } }
.sr-one { scroll-snap-align: start; display: grid; gap: 6px; align-content: start; padding: 10px; background: var(--white); border: 1px solid var(--line); border-radius: 10px; color: var(--text); text-decoration: none; }
.sr-one:hover { border-color: var(--ink); }
.sr-one-img { display: block; width: 100%; height: 90px; object-fit: contain; }
.sr-one-img--none { background: #f1f1ec; border-radius: 6px; }
.sr-one-k { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr-one-n { font-size: 13px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.sr-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 8px; }
@media (max-width: 640px) { .sr-cats { grid-template-columns: 1fr 1fr; } }
.sr-cat { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 12px; background: var(--white); border: 1px solid var(--line); border-radius: 10px; color: var(--text); font-size: 14.5px; font-weight: 600; text-decoration: none; }
.sr-cat:hover { border-color: var(--ink); }
.sr-cat-img { flex: none; width: 28px; height: 34px; object-fit: contain; }
.sr-cat-img--none { display: block; background: #f1f1ec; border-radius: 4px; }
.sr-cat span { min-width: 0; overflow-wrap: anywhere; }
.sr-boards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
.sr-board { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 12px; align-items: center; min-height: 76px; padding: 8px 14px 8px 8px; background: var(--white); border: 1px solid var(--line); border-radius: 10px; color: var(--text); text-decoration: none; }
.sr-board:hover { border-color: var(--ink); }
.sr-board-img { width: 48px; height: 60px; object-fit: contain; }
.sr-board-img--none { display: block; background: #f1f1ec; border-radius: 6px; }
.sr-board span { display: grid; gap: 3px; min-width: 0; }
.sr-board em { font-style: normal; font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); }
.sr-board b { font-size: 14px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sr-board i, .sr-fact i { font-style: normal; color: var(--text-muted); }
.sr-reads { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 8px; }
.sr-read { display: grid; gap: 4px; align-content: start; padding: 14px 16px; background: var(--white); border: 1px solid var(--line); border-radius: 10px; color: var(--text); text-decoration: none; }
.sr-read:hover { border-color: var(--ink); }
.sr-read b { font-size: 15px; line-height: 1.3; }
.sr-read span { font-size: 13px; line-height: 1.45; color: var(--text-muted); }
.sr-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; }
.sr-fact { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: end; padding: 14px 16px; background: var(--ink); border-radius: 10px; color: var(--on-dark); text-decoration: none; border: 1px solid var(--ink); }
.sr-fact:hover { border-color: var(--lime); }
.sr-fact p { margin: 0; font-size: 14px; line-height: 1.45; }
.sr-fact i { color: var(--lime); }

/* pro page */
.pro-hero h1 { max-width: 16ch; }
.pro-price { display: flex; align-items: baseline; gap: 12px; margin: 26px 0 14px; } .pro-price b { font-family: var(--font-display); font-stretch: 78%; font-weight: 800; font-size: 72px; line-height: 1; color: var(--lime); text-shadow: 0 0 30px rgba(var(--lime-rgb), .4); } .pro-price span { color: var(--on-dark-muted); }
.pro-start { display: flex; flex-wrap: wrap; gap: 10px; max-width: 620px; }
.pro-start input[type=email] { flex: 1 1 260px; height: 54px; padding: 0 16px; border-radius: 10px; border: 1px solid rgba(var(--lime-rgb), .45); background: #0a0f0c; color: var(--on-dark); font: inherit; font-size: 16px; }
.pro-start .btn { min-height: 54px; }
.pro-start.is-wait { display: grid; } .pro-start .su-consent { color: var(--on-dark-muted); } .pro-start .su-status { flex-basis: 100%; }
.pro-fine { margin: 12px 0 0; font-size: 13px; color: var(--on-dark-muted); }
.pro-feats { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); border-top: 2px solid var(--ink); border-left: 1px solid var(--line); }
.pro-feat { display: flex; flex-direction: column; gap: 8px; padding: 18px 22px 20px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.pro-feat-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.pro-feat-n { font: 500 12px/1 var(--font-mono); letter-spacing: .06em; color: var(--blue-text); } .pro-feat-ic { width: 18px; height: 18px; color: var(--ink); }
.pro-feat-cov { margin-top: auto; padding-top: 12px; font: 500 11.5px/1.2 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--text); } .pro-feat b { font-size: 18px; } .pro-feat p { margin: 0; color: var(--text-muted); line-height: 1.5; font-size: 14.5px; }
.pro-compare { display: grid; gap: 14px; max-width: 900px; } @media (min-width: 760px) { .pro-compare { grid-template-columns: 1fr 1fr; } }
.pro-plan { display: grid; gap: 12px; align-content: start; padding: 24px; border-radius: 14px; background: var(--white); border: 1px solid var(--line); }
.pro-plan b { font-family: var(--font-display); font-stretch: 78%; font-weight: 800; font-size: 48px; line-height: 1; } .pro-plan b small { font-size: 18px; color: var(--text-muted); }
.pro-plan ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .pro-plan li { display: flex; gap: 8px; font-size: 14.5px; } .pro-plan li::before { content: "✓"; color: var(--forest-3); font-weight: 700; }
.pro-plan .btn { justify-self: start; }
.pro-plan.is-pro { background: var(--ink); color: var(--on-dark); border-color: var(--lime); box-shadow: 0 30px 60px -40px rgba(0,0,0,.7); } .pro-plan.is-pro b { color: var(--lime); } .pro-plan.is-pro b small { color: var(--on-dark-muted); } .pro-plan.is-pro li::before { color: var(--lime); }
.pro-restore { display: grid; gap: 20px; align-items: end; } @media (min-width: 900px) { .pro-restore { grid-template-columns: 1fr 1fr; } }
.pro-restore h2 { margin: 6px 0 8px; } .pro-restore p { margin: 0; color: var(--text-muted); }
.pro-restore form { display: flex; flex-wrap: wrap; gap: 8px; } .pro-restore input { flex: 1 1 240px; height: 50px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--white); font: inherit; } .pro-restore .su-status { flex-basis: 100%; background: #f7dcd3; color: #8a2d13; } .pro-restore .su-status.is-ok { background: #e3f5c4; color: #2f5a05; }
.pro-link { display: grid; gap: 10px; max-width: 760px; margin-top: 24px; padding: 18px; border-radius: 12px; background: #0c130e; border: 1px solid rgba(var(--lime-rgb), .4); } .pro-link span { color: var(--on-dark-muted); font-size: 14px; } .pro-link input { height: 46px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--line-dark); background: #0a0f0c; color: var(--lime); font-family: var(--font-mono); font-size: 12px; } .pro-link .btn { justify-self: start; }
.pm-share { justify-self: start; }
.duty-share-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 14px; }
.duty-share { color: var(--text); border-color: var(--line); background: var(--white); }
.duty-share:hover { color: var(--text); border-color: var(--ink); }
.duty-pmb { font-size: 13.5px; font-weight: 600; color: var(--text); }

/* ================= The whole UK market (HMRC) ================= */
.ukm-kpis { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: rgba(243,245,239,.1); border: 1px solid rgba(243,245,239,.1); border-radius: 12px; overflow: hidden; margin-bottom: 14px; }
@media (min-width: 900px) { .ukm-kpis { grid-template-columns: repeat(4, 1fr); } }
.ukm-kpis div { background: #0c130e; padding: 18px; display: grid; gap: 6px; }
.ukm-kpis b { font-family: var(--font-display); font-stretch: 78%; font-weight: 800; font-size: clamp(34px, 3.6vw, 48px); line-height: 1; color: var(--lime); text-shadow: 0 0 26px rgba(var(--lime-rgb), .35); }
.ukm-kpis span { font-size: 12.5px; color: var(--on-dark-muted); }
.ukm-grid { display: grid; gap: 14px; } @media (min-width: 1000px) { .ukm-grid { grid-template-columns: 1.6fr 1fr; } }
.ukm-duty { display: grid; gap: 12px; align-content: start; padding: 18px; border-radius: 12px; background: #0c130e; border: 1px solid rgba(var(--lime-rgb), .16); }
.ukm-duty b { font-family: var(--font-display); font-stretch: 78%; font-weight: 800; font-size: 54px; line-height: 1; }
.ukm-bar { display: flex; height: 14px; border-radius: 7px; overflow: hidden; } .ukm-bar span { flex: 0 0 var(--w); background: var(--c); }
.ukm-duty ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ukm-duty li { display: grid; grid-template-columns: 12px 1fr auto 40px; gap: 10px; align-items: center; font-size: 14px; } .ukm-duty li i { width: 12px; height: 12px; border-radius: 3px; background: var(--c); }
.ukm-duty li b { font-family: var(--font-mono); font-size: 13px; font-weight: 600; } .ukm-duty li small { font-family: var(--font-mono); font-size: 12px; color: var(--on-dark-muted); text-align: right; }
.ukm-src { color: rgba(243,245,239,.5); }

/* ================= Interactive portal demo (platform page) ================= */
.pf-nav button { padding: 8px 10px; border-radius: 8px; color: #4b544e; font: inherit; font-size: 12px; display: flex; gap: 8px; align-items: center; background: none; border: 0; cursor: pointer; text-align: left; transition: background .15s ease, color .15s ease; }
.pf-nav button::before { content: ""; width: 11px; height: 11px; border-radius: 3px; border: 1.5px solid currentColor; opacity: .55; flex: none; }
.pf-nav button:hover { background: #f3f6ec; color: #233a06; }
.pf-nav button.is-on { background: #eef7d2; color: #233a06; font-weight: 600; }
@container (max-width: 680px) { .pf-nav button { white-space: nowrap; padding: 6px 10px; } .pf-nav button::before { display: none; } }
@media (max-width: 760px) { .pf-nav button { white-space: nowrap; padding: 6px 10px; } .pf-nav button::before { display: none; } }
.pf-view { display: grid; gap: 12px; min-width: 0; }
.pf-view[hidden] { display: none; }
.pf-view.pf-in { animation: pfin .35s cubic-bezier(.2,.8,.2,1) both; }
@keyframes pfin { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.pf-table { width: 100%; border-collapse: collapse; font-size: 12px; background: var(--white); border: 1px solid #e6e8e3; border-radius: 10px; overflow: hidden; }
.pf-table th { text-align: left; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: #6b746e; padding: 9px 10px; border-bottom: 1px solid #e6e8e3; background: #fafbf8; }
.pf-table td { padding: 9px 10px; border-bottom: 1px solid #f0f2ee; color: #1d2520; white-space: nowrap; }
.pf-table tr:last-child td { border-bottom: 0; }
.pf-ch { font-style: normal; font-size: 11px; padding: 3px 7px; border-radius: 4px; background: #eef1ec; color: #2d3530; }
.pf-ch--amz { background: #fff1d6; color: #7a4b00; } .pf-ch--pronto { background: #e6f7cf; color: #2f5a05; } .pf-ch--shop { background: #e5ecff; color: #2a3f9e; } .pf-ch--groc { background: #fde4ec; color: #8a1f45; } .pf-ch--eu { background: #e7f4f2; color: #0f5a52; } .pf-ch--trade { background: #efe7ff; color: #4b2a9e; }
.pf-st { font-style: normal; font-size: 11px; padding: 3px 7px; border-radius: 4px; white-space: nowrap; }
.pf-st--ok { background: #e3f5c4; color: #2f5a05; } .pf-st--go { background: #e5ecff; color: #2a3f9e; } .pf-st--pick { background: #fbefc9; color: #7a5600; }
.pf-stock, .pf-share { display: grid; gap: 8px; padding: 14px; background: var(--white); border: 1px solid #e6e8e3; border-radius: 10px; }
.pf-stock > div, .pf-share > div { display: grid; grid-template-columns: 150px 1fr 70px; grid-template-rows: auto auto; gap: 2px 12px; align-items: center; font-size: 12px; color: #1d2520; }
.pf-stock i, .pf-share i { position: relative; height: 9px; border-radius: 5px; background: #eef1ec; overflow: hidden; }
.pf-stock i::after, .pf-share i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: 5px; background: #8fc31f; animation: pfbar .9s cubic-bezier(.2,.8,.2,1) both; }
@keyframes pfbar { from { width: 0; } }
.pf-stock b, .pf-share b { font-family: var(--font-mono); font-size: 11.5px; text-align: right; }
.pf-stock small { grid-column: 1 / -1; font-size: 10.5px; color: #6b746e; }
.pf-stock .is-low i::after { background: #e3b649; } .pf-stock .is-low b { color: #9a6a00; }
.pf-share .is-you { font-weight: 700; } .pf-share .is-you i::after { background: #13261a; }
.pf-receipt { display: grid; gap: 6px; padding: 16px; background: var(--white); border: 1px solid #e6e8e3; border-radius: 10px; max-width: 420px; font-size: 12.5px; color: #1d2520; }
.pf-receipt > div { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; border-bottom: 1px dashed #e6e8e3; }
.pf-receipt b { font-family: var(--font-mono); font-weight: 500; }
.pf-receipt .is-total { border-bottom: 0; border-top: 2px solid #1d2520; margin-top: 4px; padding-top: 8px; font-weight: 700; } .pf-receipt .is-total b { font-weight: 700; color: #2f5a05; font-size: 15px; }
.pf-receipt small { font-size: 10.5px; color: #6b746e; }
.pf-insights { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.pf-insights > div { display: grid; gap: 4px; padding: 12px 14px; background: var(--white); border: 1px solid #e6e8e3; border-radius: 10px; }
.pf-insights em { justify-self: start; } .pf-insights b { font-size: 13px; color: #1d2520; } .pf-insights p { margin: 0; font-size: 11.5px; color: #5b655e; line-height: 1.45; }
.pf-try { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 12px; font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); }
.pf-try span { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--lime); color: var(--ink); animation: sihint 1.8s ease-in-out infinite; }
.snap-intel { display: grid; gap: 4px; padding: 14px 16px; border-radius: 10px; background: var(--ink); color: var(--on-dark); text-decoration: none; border: 1px solid rgba(var(--lime-rgb), .4); }
.snap-intel:hover { border-color: var(--lime); } .snap-intel .pro-badge { justify-self: start; } .snap-intel b { font-size: 16px; } .snap-intel small { color: var(--on-dark-muted); font-size: 13px; }
.si-table-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.si-csv { color: var(--text); border-color: var(--line); background: var(--white); gap: 8px; } .si-csv:hover { border-color: var(--ink); color: var(--text); }
.si-csv .pro-badge { font-size: 9.5px; padding: 2px 7px; }

/* ================= What sells in Europe ================= */
.eu-nav .flag { width: 22px; height: 15px; border-radius: 3px; }
.eu-sec:nth-of-type(even) { background: var(--cream); }
.eu-head { display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: center; margin-bottom: 14px; }
.eu-head .flag { width: 64px; height: 43px; border-radius: 6px; } .eu-head h2 { margin: 4px 0 0; }
.eu-size { text-align: right; } .eu-size b { display: block; font-family: var(--font-display); font-stretch: 78%; font-weight: 800; font-size: 44px; line-height: 1; } .eu-size span { font-size: 12.5px; color: var(--text-muted); }
@media (max-width: 700px) { .eu-head { grid-template-columns: auto 1fr; } .eu-size { grid-column: 1 / -1; text-align: left; } }
.eu-grid { display: grid; gap: 18px; margin-top: 16px; } @media (min-width: 980px) { .eu-grid { grid-template-columns: 1fr 1.6fr; align-items: start; } }
.eu-kv { margin-top: 14px; }
.eu-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; counter-reset: eu; }
.eu-list li { counter-increment: eu; display: grid; grid-template-columns: 28px 44px 1fr auto; gap: 12px; align-items: center; padding: 8px 12px; background: var(--white); border: 1px solid var(--line); border-radius: 10px; }
.eu-list li::before { content: counter(eu); font-family: var(--font-display); font-stretch: 80%; font-weight: 800; font-size: 18px; }
.eu-img { width: 44px; height: 56px; object-fit: contain; } .eu-img--none { display: block; }
.eu-list b { display: block; font-size: 14px; } .eu-list small { display: block; font-size: 12px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .eu-list div { min-width: 0; }
.eu-p { font-family: var(--font-mono); font-size: 13px; text-align: right; } .eu-p small { display: block; font-size: 11px; color: var(--text-muted); }
.eu-none { grid-template-columns: 1fr !important; color: var(--text-muted); } .eu-none::before { content: none !important; }
.si-hint a { color: inherit; }

.mg-subs { display: flex; flex-wrap: wrap; gap: 4px 6px; margin: -4px 0 6px 40px; }
.mg-subs a { font-size: 11.5px; color: var(--on-dark-muted); text-decoration: none; padding: 2px 8px; border: 1px solid var(--line-dark); border-radius: 999px; }
.mg-subs a:hover { color: var(--lime); border-color: var(--lime); }
.si-seg-note { margin-top: 12px; max-width: 66ch; font-size: 14px; color: var(--on-dark-muted); border-left: 3px solid var(--lime); padding-left: 12px; }
.si-seg-note a { color: var(--lime); }

/* movers: rank before and after on its own line, never truncated */
.si-mv-rk, .mg-mv-rk { display: block; font-style: normal; font-family: var(--font-mono); white-space: normal; line-height: 1.35; }
.si-mv-rk { font-size: 11.5px; color: var(--text-muted); margin-top: 3px; }
.si-mv-rk s { text-decoration: none; } .si-mv-rk strong { color: var(--text); font-weight: 700; }
.mg-mv-rk { font-size: 10.5px; color: rgba(243,245,239,.5); margin-top: 2px; }
.mg-mv-rk s { text-decoration: none; opacity: .75; } .mg-mv-rk strong { color: var(--on-dark); font-weight: 700; }

/* cookie choice */
.cc { position: fixed; z-index: 90; left: 16px; right: 16px; bottom: 16px; max-width: 560px; margin: 0 auto; display: grid; gap: 12px; padding: 14px 16px; background: var(--ink); color: var(--on-dark); border: 1px solid rgba(var(--lime-rgb), .25); border-radius: 12px; box-shadow: 0 18px 40px -18px rgba(0,0,0,.6); font-size: 13.5px; line-height: 1.45; }
.cc p { margin: 0; } .cc a { color: var(--lime); }
.cc-btns { display: flex; gap: 8px; }
.cc-btns button { font: inherit; font-weight: 600; font-size: 13px; padding: 8px 14px; border-radius: 999px; cursor: pointer; border: 1px solid var(--lime); }
.cc-yes { background: var(--lime); color: var(--ink); } .cc-no { background: transparent; color: var(--on-dark); border-color: rgba(243,245,239,.3) !important; }
@media (min-width: 720px) { .cc { grid-template-columns: 1fr auto; align-items: center; } }

.hw-mk-na { font-family: var(--font-body) !important; font-weight: 500 !important; font-size: 11px !important; color: var(--on-dark-muted) !important; line-height: 1.2; text-align: right; }
.si-mk-big--thin b { font-size: 22px !important; color: var(--text-muted); }
.si-mk-note { margin: 14px 0 0; font-size: 13.5px; color: var(--text-muted); line-height: 1.5; }
.pm-row.is-sub { border-top: 1px solid rgba(243,245,239,.12); padding-top: 8px; font-weight: 600; } .pm-row.is-sub i { background: #6fe3d6; }
.pm-paid { margin: 6px 0 14px; font-size: 14px; color: var(--on-dark-muted); line-height: 1.5; }
.pro-panel.is-free { margin-top: 18px; } .pro-loading { color: var(--text-muted); font-size: 14px; margin: 12px 0; }
.pm-margin b.is-range { font-size: clamp(34px, 7vw, 64px); white-space: nowrap; }
@media (max-width: 420px) { .pm-row { grid-template-columns: minmax(0, 1fr) auto; } .pm-row i { display: none; } }

/* map key: only what the map does not label itself; markers mirror the moving dots and endpoints */
.routemap-key { gap: 8px 26px; }
.routemap-key .k-move { width: 11px; height: 11px; background: var(--lime); border: 1.5px solid var(--ink); }
.routemap-key .k-paid { width: 11px; height: 11px; background: var(--ink); border: 1.5px solid var(--lime); box-shadow: 0 0 0 1px var(--ink); }
.routemap-key .k-end { width: 11px; height: 11px; background: var(--paper); border: 1.5px solid var(--ink); }

/* the map stands on its own: one centred column, no side notes */
@media (min-width: 1000px) { .routemap { grid-template-columns: 1fr; } .routemap-stage, .routemap-key { grid-column: 1; width: 100%; max-width: 700px; justify-self: center; } .routemap-tabs { justify-self: center; } }

/* Amazon's #1 Best Seller badge, in its own orange */
.bs-badge { display: inline-block; vertical-align: middle; margin: 2px 0 2px 6px; padding: 2px 7px; border-radius: 3px; background: #e47911; color: #fff; font-family: var(--font-mono); font-style: normal; font-size: 10.5px; font-weight: 600; letter-spacing: .02em; line-height: 1.5; white-space: nowrap; }
.si-pod-body .bs-badge { margin: 6px 0 0; align-self: flex-start; }

.si-pm-note { margin: 10px 0 0; font-size: 13px; color: var(--on-dark-muted); }

/* ================= Free account: locked sales estimates ================= */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.si-lk { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; white-space: nowrap; }
.si-lk > span { filter: blur(5px); opacity: .75; user-select: none; -webkit-user-select: none; transition: opacity .15s; }
.si-lk::after { content: ""; flex: none; width: 11px; height: 13px; background: currentColor; opacity: .85; -webkit-mask: var(--lock-ico) center / contain no-repeat; mask: var(--lock-ico) center / contain no-repeat; }
.si-lk:hover > span { opacity: .45; }
:root { --lock-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 14'%3E%3Cpath d='M3 6V4a3 3 0 0 1 6 0v2h1a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1zm1.6 0h2.8V4a1.4 1.4 0 0 0-2.8 0z'/%3E%3C/svg%3E"); }
.si-unlock-bar { background: var(--lime); color: var(--ink); }
.si-unlock-bar .wrap { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 20px; padding-top: 12px; padding-bottom: 12px; }
.si-unlock-bar span { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; font-size: 15px; line-height: 1.4; }
.si-unlock-bar span i { width: 12px; height: 14px; background: currentColor; -webkit-mask: var(--lock-ico) center / contain no-repeat; mask: var(--lock-ico) center / contain no-repeat; }
.si-unlock-bar .btn--primary { background: var(--ink); color: var(--lime); min-height: 40px; padding: 0 18px; font-size: 14px; }
.si-unlock-bar .btn--primary:hover { background: #000; }
.si-um { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: 16px; }
.si-um[hidden] { display: none; }
.si-um-bg { position: absolute; inset: 0; background: rgba(10,15,12,.72); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.si-um-box { position: relative; width: min(440px, 100%); max-height: calc(100vh - 32px); overflow: auto; display: grid; gap: 12px; padding: 26px 24px 22px; border-radius: 14px; background: var(--ink); color: var(--on-dark); border: 1px solid rgba(var(--lime-rgb), .35); box-shadow: 0 30px 80px rgba(0,0,0,.45); }
.si-um-box h2 { margin: 0; font-family: var(--font-display); font-stretch: 75%; font-weight: 800; font-size: 32px; line-height: .95; text-transform: uppercase; color: var(--on-dark); }
.si-um-box p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--on-dark-muted); }
.si-um-box label { display: grid; gap: 6px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--on-dark-muted); }

.si-um-box input:not([type=checkbox]), .si-um-box select { width: 100%; font-family: var(--font-body); font-size: 16px; letter-spacing: 0; text-transform: none; color: var(--on-dark); background: rgba(255,255,255,.06); border: 1px solid var(--line-dark); border-radius: 8px; padding: 11px 12px; }
.si-um-box input:focus, .si-um-box select:focus { outline: 2px solid var(--lime); outline-offset: 1px; }
.si-um-box select option { color: #111; }
.si-um-box .si-um-check { display: flex; align-items: center; gap: 10px; font-family: var(--font-body); font-size: 14px; letter-spacing: 0; text-transform: none; color: var(--on-dark); }
.si-um-check input { width: 18px; height: 18px; accent-color: var(--lime); }
.si-um-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.si-um-x { position: absolute; top: 8px; right: 10px; width: 36px; height: 36px; border: 0; background: none; color: var(--on-dark-muted); font-size: 26px; line-height: 1; cursor: pointer; }
.si-um-x:hover { color: var(--on-dark); }
.si-um-k { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }
.si-um-k i { width: 14px; height: 14px; background: var(--lime); clip-path: polygon(0 100%, 0 70%, 33% 70%, 33% 40%, 66% 40%, 66% 0, 100% 0, 100% 100%); }
.si-um-k b { color: var(--lime); font-weight: 500; }
.si-um-box .btn { justify-content: center; margin-top: 4px; }
.si-um-box .si-um-err { color: #ff9a8a; }
.si-um-fine { font-size: 12px; line-height: 1.5; color: var(--on-dark-muted); } .si-um-fine a { color: var(--on-dark); }
.dr-lock .btn { margin-top: 4px; }
html:not(.sd-unlocked) .pm-yl { display: none; }  /* the units scale shows once the estimates are unlocked */
.si-potw-kv .si-potw-cat { font-size: 24px; line-height: 34px; color: var(--on-dark); text-shadow: none; }
.si-lk { position: relative; }
.si-lk::before { content: ""; position: absolute; inset: -10px -8px; }  /* a finger-sized tap target */
html:not(.sd-unlocked) :is(td, .dp-tile, .si-pod-kv > div, .si-tag, .si-bstats > span, .br-kv > span, .dp-kpis > div, .dp-hl em, .si-mk-kv > div, .eu-p):has(.si-lk) { cursor: pointer; }
.si-lk:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; border-radius: 3px; }
.step-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; font-weight: 600; font-size: 15px; color: var(--ink); text-decoration: underline; text-decoration-color: var(--lime); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.step-link:hover { text-decoration-color: var(--ink); }
/* hub: start by picking a market */
.si-mkpick { margin-top: 26px; }
.si-mkpick > span { display: block; margin-bottom: 10px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--on-dark-muted); }
.si-mkpick > div { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; max-width: 900px; }
.si-mkpick a { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line-dark); border-radius: 10px; color: var(--on-dark); text-decoration: none; background: rgba(255,255,255,.03); transition: border-color .15s, background .15s; }
.si-mkpick a:hover { border-color: var(--lime); }
.si-mkpick a.is-on { border-color: var(--lime); background: rgba(var(--lime-rgb), .1); }
.si-mkpick .flag { width: 30px; height: 20px; flex: none; border-radius: 3px; }
.si-mkpick a span { display: grid; gap: 2px; min-width: 0; }
.si-mkpick b { font-size: 16px; font-weight: 600; }
.si-mkpick small { font-family: var(--font-mono); font-size: 11px; color: var(--on-dark-muted); white-space: nowrap; }
.si-mkpick a.is-on small { color: var(--lime); }
.dp-kpis--3 { margin-top: 30px; }
.dp-kpis--3 { grid-template-columns: repeat(3, 1fr); }
@media (min-width: 860px) { .dp-kpis--3 { grid-template-columns: repeat(3, 1fr); max-width: 900px; } }
@media (max-width: 600px) { .dp-kpis--3 > div { padding: 14px 12px; } .dp-kpis--3 b { font-size: 28px; } .dp-kpis--3 span { font-size: 12px; } }
@media (max-width: 600px) { .si-mkpick a.is-on { grid-column: 1 / -1; } }
/* Pick a market: each market's figure says what it is, with its #1 and an arrow; a sideways strip on phones */
.si-mkpick > div { grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); max-width: 980px; }
.si-mkpick a { display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 12px; row-gap: 8px; align-items: center; min-height: 44px; }
.si-mkpick a .si-mk-t { display: grid; gap: 2px; min-width: 0; }
.si-mkpick small { white-space: normal; }
.si-mk-go { margin-left: auto; font-style: normal; color: var(--on-dark-muted); transition: color .15s, transform .15s; }
.si-mkpick a:hover .si-mk-go, .si-mkpick a.is-on .si-mk-go { color: var(--lime); }
.si-mkpick a:hover .si-mk-go { transform: translateX(2px); }
.si-mkpick a .si-mk-one { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; min-width: 0; padding-top: 8px; border-top: 1px solid var(--line-dark); }
.si-mk-img { flex: none; width: 22px; height: 28px; object-fit: contain; background: #fff; border-radius: 3px; }
.si-mk-one em { min-width: 0; font-style: normal; font-size: 12.5px; color: var(--on-dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 600px) {
  .si-mkpick > div { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 172px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter) 6px; scroll-padding-left: var(--gutter); scrollbar-width: thin; }
  .si-mkpick a, .si-mkpick a.is-on { grid-column: auto; scroll-snap-align: start; }
}
.hw-unlock { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; white-space: nowrap; margin-top: 14px; padding: 7px 14px; border: 1px solid rgba(var(--lime-rgb), .3); border-radius: 999px; font-family: var(--font-body); font-size: 13px; font-weight: 500; color: var(--lime); text-decoration: none; transition: border-color .15s, background .15s; }
.hw-unlock i { width: 9px; height: 11px; flex: none; background: currentColor; -webkit-mask: var(--lock-ico) center / contain no-repeat; mask: var(--lock-ico) center / contain no-repeat; }
.hw-unlock span { transition: transform .15s; }
.hw-unlock:hover { border-color: var(--lime); background: rgba(var(--lime-rgb), .08); }
.hw-unlock:hover span { transform: translateX(2px); }
@media (max-width: 420px) { .hw-unlock { font-size: 12.5px; padding: 7px 12px; gap: 7px; } }
@media (max-width: 340px) { .hw-unlock { font-size: 11px; padding: 6px 10px; gap: 5px; } }
.si-lk > span[data-ph]::before { content: attr(data-ph); }  /* the blurred stand-in is drawn, not written, so search engines never read it as a figure */
/* previews of what a free account unlocks: illustrative shapes, blurred, no figures */
.lk-preview { width: 100%; filter: blur(3px); opacity: .55; pointer-events: none; }
.lk-preview--chart svg { display: block; width: 100%; height: 90px; }
.lk-preview--chart path { fill: none; stroke: var(--lime); stroke-width: 3; }
.lk-preview--chart path.b { stroke: #6fe3d6; }
.lk-preview--rows { display: grid; gap: 7px; }
.lk-preview--rows i { display: block; height: 12px; border-radius: 4px; background: linear-gradient(90deg, rgba(var(--lime-rgb), .55) 0 38%, rgba(255,255,255,.18) 38% 70%, rgba(255,255,255,.1) 70%); }
.pro-lock--free .btn { margin-top: 4px; }
/* main menu: For brands and Tools dropdowns beside the Data hub mega menu */
.nav-dd { position: relative; display: flex; align-items: center; align-self: stretch; height: 72px; }
.nav-dd-btn { display: inline-flex; align-items: center; gap: 4px; padding: 8px 12px; border: 0; background: none; cursor: pointer; font-family: var(--font-display); font-stretch: 85%; font-weight: 600; font-size: 15px; letter-spacing: .03em; text-transform: uppercase; color: var(--on-dark-muted); white-space: nowrap; transition: color .15s ease; }
.nav-dd-btn svg { width: 12px; height: 12px; transition: transform .2s ease; }
.nav-dd:hover .nav-dd-btn, .nav-dd.is-open .nav-dd-btn, .nav-dd-btn:focus-visible { color: var(--lime); }
.nav-dd.is-open .nav-dd-btn svg { transform: rotate(180deg); }
.nav-dd-menu { position: absolute; top: calc(100% - 8px); left: 0; z-index: 60; min-width: 270px; display: grid; gap: 2px; padding: 8px; border-radius: 12px; background: var(--ink); border: 1px solid var(--line-dark); box-shadow: 0 20px 50px rgba(0,0,0,.35); visibility: hidden; opacity: 0; transform: translateY(-6px); transition: opacity .16s ease, transform .2s ease, visibility 0s linear .2s; pointer-events: none; }
html:not(.has-js) .nav-dd:hover .nav-dd-menu, .nav-dd.is-open .nav-dd-menu { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; pointer-events: auto; }
.nav-dd.is-closed .nav-dd-menu { visibility: hidden; opacity: 0; pointer-events: none; }
.nav .nav-dd-menu a { display: grid; gap: 2px; padding: 10px 12px; border-radius: 8px; font-family: var(--font-body); font-stretch: normal; letter-spacing: 0; text-transform: none; white-space: normal; }
.nav .nav-dd-menu a:hover, .nav .nav-dd-menu a:focus-visible { background: rgba(255,255,255,.06); outline: none; }
.nav-dd-menu b { font-size: 14.5px; font-weight: 600; color: var(--on-dark); }
.nav-dd-menu a:hover b { color: var(--lime); }
.nav-dd-menu small { font-size: 12.5px; color: var(--on-dark-muted); }
@media (max-width: 1320px) { .nav-dd-btn { padding: 8px 7px; font-size: 13.5px; } }
@media (max-width: 1180px) { .nav-dd-btn { padding: 8px 6px; font-size: 13px; } }
.mobile-nav .mn-h { margin: 18px 0 2px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--on-dark-muted); }
.mobile-nav .mn-group { display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; border-bottom: 1px solid var(--line-dark); }
.mobile-nav .mn-group a { font-size: 22px; padding: 10px 0; border-bottom: 0; }
.mobile-nav .mn-group--1 { grid-template-columns: 1fr; }
/* home "Why Shelfdrop": calm stat columns, no boxes or ornaments */
.section--dark .grid-2.why-grid { background: none; border: 0; gap: 0 clamp(32px, 5vw, 80px); }
.why-grid .card { background: none; padding: 28px 0 36px; border-top: 1px solid var(--line-dark); gap: 10px; }
.why-grid .why-stat { display: block; margin-bottom: 8px; }
.why-grid .why-stat b { display: block; font-size: clamp(44px, 5vw, 64px); }
.why-grid .why-stat span { display: block; max-width: none; margin-top: 10px; font-family: var(--font-body); font-size: 14px; letter-spacing: 0; text-transform: none; line-height: 1.45; }
.why-grid h3 { font-size: 19px; }
.why-grid p { max-width: 46ch; }
/* data pages on phones: folded sections */
.is-folded > .wrap { max-height: 560px; overflow: hidden; -webkit-mask-image: linear-gradient(#000 62%, transparent); mask-image: linear-gradient(#000 62%, transparent); }
.fold-more { display: block; margin: 14px auto 0; padding: 11px 20px; border: 1px solid currentColor; border-radius: 999px; background: none; color: inherit; font: 600 14px/1 var(--font-body); cursor: pointer; opacity: .85; }
.fold-more:hover { opacity: 1; }
/* price my bottle: market picker */
.pm-country { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 14px; }
.pm-country label { cursor: pointer; }
.pm-country input { position: absolute; opacity: 0; pointer-events: none; }
.pm-country span { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border: 1px solid var(--line-dark); border-radius: 999px; font-size: 13.5px; color: var(--on-dark-muted); transition: border-color .15s, color .15s, background .15s; }
.pm-country .flag { width: 20px; height: 14px; border-radius: 2px; }
.pm-country input:checked + span { border-color: var(--lime); color: var(--on-dark); background: rgba(var(--lime-rgb), .1); }
.pm-country input:focus-visible + span { outline: 2px solid var(--lime); outline-offset: 2px; }
/* API page: how an order moves */
.api-flow { list-style: none; margin: 34px 0 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 26px; }
.api-flow li { position: relative; padding: 0 0 0 30px; }
.api-flow li::before { content: ""; position: absolute; left: 0; top: 4px; width: 12px; height: 12px; border-radius: 50%; background: var(--lime); border: 2px solid var(--ink); }
.api-flow li:not(:last-child)::after { content: ""; position: absolute; left: 7px; top: 22px; bottom: -22px; width: 2px; background: var(--line); }
.api-flow .af-k { display: block; font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
.api-flow b { display: block; margin: 6px 0 4px; font-size: 18px; }
.api-flow p { margin: 0; color: var(--text-muted); font-size: 15px; line-height: 1.5; max-width: 34ch; }
@media (min-width: 860px) {
  .api-flow { grid-template-columns: repeat(4, 1fr); gap: 28px; }
  .api-flow li { padding: 30px 0 0; }
  .api-flow li::before { top: 0; }
  .api-flow li:not(:last-child)::after { left: 22px; right: -24px; top: 7px; bottom: auto; width: auto; height: 2px; }
}
.api-back { display: grid; gap: 12px; margin-top: 34px; padding: 18px 20px; border: 1px dashed var(--line); border-radius: 12px; }
.af-back-k { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
.af-back-k i { font-style: normal; margin-right: 4px; }
.api-back ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.api-back li { font-size: 14.5px; color: var(--text-muted); line-height: 1.45; }
.api-back li b { display: block; color: var(--ink); font-size: 15.5px; margin-bottom: 2px; }
@media (min-width: 860px) { .api-back ul { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
/* portal mock-up: live chart and map */
.pf-plot { position: relative; }
.pf-chart .pf-plot svg { width: 100%; height: 90px; display: block; }
.pf-grid line { stroke: #e6eae2; stroke-width: 1; stroke-dasharray: 2 4; vector-effect: non-scaling-stroke; }
.pf-prev { fill: none; stroke: #a4ada5; stroke-width: 1.1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.pf-line { fill: none; stroke: #5c8a0a; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.pf-endpt { position: absolute; right: -4px; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: #5c8a0a; box-shadow: 0 0 0 3px rgba(var(--lime-rgb), .6); }
.pf-endpt::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1.5px solid #84ac16; animation: pfPing2 2.2s ease-out infinite; }
.pf-legend { display: flex; gap: 14px; margin-top: 8px; font-size: 10.5px; color: #6b746d; }
.pf-legend span { display: inline-flex; align-items: center; gap: 6px; }
.pf-legend i { width: 14px; height: 0; border-top: 2px solid #5c8a0a; }
.pf-legend i.d { border-top: 1.5px dashed #a4ada5; }
.pf-ukmap .pf-arc { fill: none; stroke: #6f9612; stroke-width: 1.6; stroke-dasharray: 2 5; stroke-linecap: round; opacity: .9; animation: pfFlow 1.4s linear infinite; }
.pf-ukmap .ping { fill: none; stroke: #84ac16; stroke-width: 1.4; vector-effect: non-scaling-stroke; transform-box: fill-box; transform-origin: center; animation: pfPing 2.8s ease-out infinite; }
.pf-live { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: #5c8a0a; }
.pf-live i { width: 6px; height: 6px; border-radius: 50%; background: #84ac16; animation: pfLive 1.8s ease-out infinite; }
@keyframes pfFlow { to { stroke-dashoffset: -14; } }
@keyframes pfPing { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(7); opacity: 0; } }
@keyframes pfPing2 { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(2.2); opacity: 0; } }
@keyframes pfLive { 0% { box-shadow: 0 0 0 0 rgba(132,172,22,.55); } 100% { box-shadow: 0 0 0 7px rgba(132,172,22,0); } }
@media (prefers-reduced-motion: reduce) { .pf-ukmap .pf-arc, .pf-ukmap .ping, .pf-endpt::after, .pf-live i { animation: none; } .pf-ukmap .ping { display: none; } }
/* brand lookup: progress poured like a glass */
.pour-wrap { width: min(100%, 520px); display: grid; gap: 12px; }
.pour-step { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0; font-size: 17px; font-weight: 500; color: var(--on-dark); }
.pour-step span.is-in { animation: pourIn .45s ease both; }
.pour-step small { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--on-dark-muted); white-space: nowrap; }
.pour { position: relative; height: 10px; border-radius: 999px; background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); overflow: hidden; }
.pour-fill { position: relative; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, #9cc23a, #cdf25c); box-shadow: 0 0 18px rgba(var(--lime-rgb), .45); transition-property: width; transition-timing-function: cubic-bezier(.2,.65,.25,1); overflow: hidden; }
.pour-fill::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 0 35%, rgba(255,255,255,.45) 50%, transparent 65% 100%); background-size: 220% 100%; animation: pourShine 2.2s linear infinite; }
.pour-fill i { position: absolute; bottom: -4px; width: 3px; height: 3px; border-radius: 50%; background: rgba(255,255,255,.75); animation: pourBubble 1.8s ease-in infinite; }
.pour-fill i:nth-child(1) { right: 8%; animation-delay: 0s; } .pour-fill i:nth-child(2) { right: 22%; animation-delay: .5s; width: 2px; height: 2px; }
.pour-fill i:nth-child(3) { right: 38%; animation-delay: 1s; } .pour-fill i:nth-child(4) { right: 55%; animation-delay: 1.4s; width: 2px; height: 2px; }
.pour-note { margin: 0; font-size: 12.5px; color: var(--on-dark-muted); }
@keyframes pourIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes pourShine { from { background-position: 120% 0; } to { background-position: -120% 0; } }
@keyframes pourBubble { 0% { transform: translateY(0); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(-14px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .pour-fill::after, .pour-fill i, .pour-step span.is-in { animation: none; } }
.pour-note.is-in { animation: pourIn .45s ease both; }
/* brand snapshot: one calm sheet, sections divided by hairlines, plain figures */
.snapshot--hero { gap: 22px; padding: clamp(22px, 3vw, 36px); border-radius: 16px; box-shadow: 0 30px 80px rgba(0,0,0,.35); }
.snapshot--hero .snap-range, .snapshot--hero .snap-grid, .snapshot--hero .snap-press-b, .snapshot--hero .snap-check, .snapshot--hero .snap-amz, .snapshot--hero .snap-foot { padding-top: 22px; border-top: 1px solid var(--line); }
.snapshot--hero .snap-pill { background: none; border: 1px solid var(--line); color: var(--text-muted); }
.snapshot--hero .snap-summary { font-size: 16px; max-width: 64ch; }
.snapshot--hero .snap-hl, .snapshot--hero .snap-chips { gap: 0; margin: 0; }
.snapshot--hero .snap-hl span, .snapshot--hero .snap-chips span { padding: 0; background: none; border: 0; border-radius: 0; color: var(--text); font-size: 13.5px; }
.snapshot--hero .snap-hl span + span::before, .snapshot--hero .snap-chips span + span::before { content: "·"; margin: 0 9px; color: var(--text-muted); }
.snapshot--hero .snap-press a, .snapshot--hero .snap-press span { padding: 0; border: 0; border-radius: 0; background: none; }
.snapshot--hero .snap-press a:hover b { text-decoration: underline; }
.snapshot--hero .snap-check, .snapshot--hero .snap-amz { gap: 16px; padding-left: 0; padding-right: 0; padding-bottom: 0; background: none; color: var(--text); border-radius: 0; }
.snapshot--hero .snap-amz-head { color: var(--text-muted); }
.snapshot--hero .snap-check .snap-amz-head em { color: var(--text); font-weight: 600; }
.snapshot--hero .snap-amz-grid { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 16px 0; }
.snapshot--hero .snap-amz-grid div { padding: 0 18px; background: none; border: 0; border-left: 1px solid var(--line); border-radius: 0; gap: 6px; }
.snapshot--hero .snap-amz-grid div:first-child { padding-left: 0; border-left: 0; }
.snapshot--hero .snap-amz-grid b { color: var(--ink); font-size: 32px; }
.snapshot--hero .snap-amz-grid span { color: var(--text-muted); font-size: 12px; line-height: 1.35; }
.snapshot--hero .snap-check-line { color: var(--text-muted); font-size: 13.5px; max-width: 70ch; }
.snapshot--hero .snap-check-table .data-table { color: var(--text); }
.snapshot--hero .snap-check-table .data-table th { color: var(--text-muted); border-bottom-color: var(--line); }
.snapshot--hero .snap-check-table .data-table td { border-bottom-color: var(--line); }
.snapshot--hero .snap-flags > span { color: var(--text-muted); }
.snapshot--hero .snap-flags ul { color: var(--text); font-size: 13.5px; }
.snapshot--hero .snap-amz-top { gap: 10px; font-size: 13.5px; }
.snapshot--hero .snap-amz-top li b { color: var(--text); } .snapshot--hero .snap-amz-top li span { color: var(--text-muted); font-size: 12.5px; }
.snapshot--hero .snap-fit { padding: 2px 0 2px 16px; background: none; border-left: 2px solid var(--lime); font-size: 15.5px; }
@media (max-width: 560px) {
  .snapshot--hero .snap-amz-grid { grid-template-columns: 1fr 1fr; gap: 18px 0; }
  .snapshot--hero .snap-amz-grid div { padding: 0 0 0 14px; }
  .snapshot--hero .snap-amz-grid div:nth-child(odd) { padding-left: 0; border-left: 0; }
}
.prose .lc-promo, .prose .lc-promo:hover { color: var(--on-dark); text-decoration: none; }
.prose .lc-promo b { color: var(--on-dark); }
.prose .lc-promo em { color: var(--lime); }

/* Brand lookup: units and revenue locked until a free account */
.snap-amz-grid b .si-lk { font-size: inherit; color: inherit; }
.snap-amz-grid b .si-lk > span { font-size: inherit; color: inherit; }
.snap-amz-grid b .si-lk::after { width: 13px; height: 15px; }
.snap-amz-grid div:has(.si-lk) { cursor: pointer; transition: border-color .15s; }
.snap-amz-grid div:has(.si-lk):hover { border-color: rgba(var(--lime-rgb), .45); }
.snap-amz-unlock { justify-self: start; display: inline-flex; align-items: center; gap: 8px; padding: 0; border: 0; background: none; font: inherit; font-size: 12.5px; color: var(--lime); cursor: pointer; text-align: left; }
.snap-amz-unlock[hidden] { display: none; }
.snap-amz-unlock i { flex: none; width: 10px; height: 12px; background: currentColor; -webkit-mask: var(--lock-ico) center / contain no-repeat; mask: var(--lock-ico) center / contain no-repeat; }
.snap-amz-unlock:hover span { transform: translateX(2px); } .snap-amz-unlock span { transition: transform .15s; }
.snapshot--hero .snap-amz-unlock { color: var(--ink); font-weight: 500; font-size: 13px; padding: 7px 13px; border-radius: 999px; background: rgba(var(--lime-rgb), .55); transition: background .15s; }
.snapshot--hero .snap-amz-unlock:hover { background: var(--lime); }

/* API page: the dot walk from checkout to doorstep */
.morph { margin-top: 30px; background: var(--paper); border: 1px solid var(--line); border-radius: 24px; padding: clamp(18px, 3vw, 32px); display: grid; gap: 12px; }
.morph-canvas { display: block; width: 100%; height: clamp(250px, 32vw, 380px); }
.morph-cap { display: flex; align-items: baseline; justify-content: center; gap: 12px; min-height: 22px; }
.morph-cap span { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; color: var(--text-muted); }
.morph-cap b { font-size: 16px; font-weight: 600; }
.api-flow.is-live li { opacity: .5; transition: opacity .5s ease; }
.api-flow.is-live li.is-on { opacity: 1; }
.api-flow.is-live li::before { background: var(--paper); transition: background .5s ease, box-shadow .5s ease; }
.api-flow.is-live li.is-on::before { background: var(--lime); box-shadow: 0 0 0 5px rgba(var(--lime-rgb), .4); }
@media (prefers-reduced-motion: reduce) { .api-flow.is-live li { opacity: 1; } }
/* FBS journey, step 01: the platforms a brand's store can run on */
.jf-platforms { grid-template-columns: 1fr; align-content: center; gap: 12px; padding: clamp(14px, 2.4vw, 22px); }
.jf-pf-k { font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--on-dark-muted); }
.jf-platforms ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.jf-platforms li { display: grid; justify-items: center; align-content: center; gap: 8px; min-height: 74px; padding: 12px 6px; border-radius: 12px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09); }
.jf-platforms svg { width: 26px; height: 26px; fill: var(--on-dark); }
.jf-platforms span { font-size: 11.5px; line-height: 1.2; text-align: center; color: var(--on-dark-muted); }
.jf-platforms .jf-custom { background: rgba(var(--lime-rgb), .1); border-color: rgba(var(--lime-rgb), .38); }
.jf-platforms .jf-custom svg { fill: none; color: var(--lime); }
.jf-platforms .jf-custom span { color: var(--lime); }
@media (max-width: 480px) { .jf-platforms li { min-height: 64px; padding: 10px 4px; } .jf-platforms svg { width: 22px; height: 22px; } .jf-platforms span { font-size: 10.5px; } }
.jf-platforms .jf-wide svg { width: 52px; height: 26px; transform: scale(1.5); }
/* Portal "Sales by region": the canvas dot map replaces the static SVG */
.pf-ukmap.is-live svg { display: none; }
.pf-ukmap canvas { display: block; width: 100%; height: 250px; }
.phone .pf-ukmap canvas { height: 210px; }
@media (max-width: 899px) { .pf-ukmap canvas { height: 300px; } .phone .pf-ukmap canvas { height: 210px; } }
.pf-ukmap.is-live ~ .pf-regions li { cursor: pointer; transition: color .15s; }
.pf-regions li.is-on { font-weight: 600; } .pf-regions li.is-on span { color: var(--ink); }
/* Home hero: the headline sits in the copy column beside the devices, stacked, with the intro and buttons right under it */
.hero-head .eyebrow { margin-bottom: 18px; }
.hero-head .hero-title { margin-bottom: 0 !important; max-width: 9.5ch; font-size: clamp(56px, 8.6vw, 136px); }
@media (min-width: 1100px) { .hero--lime .hero-grid { align-items: center; } .hero-head .hero-title { font-size: clamp(88px, 7.6vw, 132px); } }
/* Route map: the dotted land fades out at the crop instead of stopping on a hard edge */
.routemap-dots { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 86%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 9%, #000 88%, transparent 100%); -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 86%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 9%, #000 88%, transparent 100%); mask-composite: intersect; }
/* Route map: heading, tabs and key beside the map, with the map sized to the screen, so the section fits in one view */
.routemap--split { gap: 28px; }
.routemap-copy { display: grid; gap: 20px; align-content: center; }
.routemap-copy .eyebrow, .routemap-copy h2, .routemap-copy .lede { margin: 0; }
.routemap-copy .routemap-tabs { margin: 6px 0 0; }
.routemap-copy .routemap-key { margin: 0; }
@media (min-width: 1000px) {
  .routemap.routemap--split { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); grid-template-rows: auto; gap: clamp(40px, 5vw, 80px); align-items: center; }
  .routemap.routemap--split .routemap-copy { grid-column: 1; grid-row: 1; }
  .routemap.routemap--split .routemap-stage { grid-column: 2; grid-row: 1; justify-self: end; max-width: none; width: min(100%, calc((100svh - 150px) * .9225), 720px); }
  .routemap-copy h2 { font-size: clamp(52px, 5.2vw, 88px); }
  .routemap-copy .routemap-tabs { justify-self: start; }
}
.routemap-copy .routemap-tabs, .routemap-copy .routemap-key { grid-column: auto; grid-row: auto; justify-self: start; width: auto; max-width: none; }
/* Route map: "UK to UK" zooms into Britain; labels and markers counter-scale so they stay the same size on screen */
@property --rz { syntax: "<number>"; inherits: true; initial-value: 1; }
.routemap-stage { overflow: hidden; }
.routemap-zoom { position: absolute; inset: 0; transform-origin: 0 0; transition: transform .9s cubic-bezier(.22,.8,.24,1), --rz .9s cubic-bezier(.22,.8,.24,1); }
.routemap[data-scn="uk"] .routemap-zoom { --rz: 2.1; transform: translate(-2.5%, -3.3%) scale(2.1); }
.routemap .lb { font-size: calc(15px / var(--rz)); stroke-width: calc(6px / var(--rz)); }
@media (max-width: 600px) { .routemap .lb { font-size: calc(22px / var(--rz)); } }
.routemap[data-scn="uk"] .nd-nl, .routemap[data-scn="uk"] .lb-nl { opacity: 0; }
.routemap[data-scn="uk"] .nd-hub { r: 8; }
.routemap[data-scn="uk"] .nd-city { r: 3; stroke-width: 1; }
.routemap[data-scn="uk"] .nd-origin { r: 4.5; stroke-width: 1.2; } .routemap[data-scn="uk"] .nd-core { r: 1.6; }
.routemap[data-scn="uk"] .mv { r: 2.8; stroke-width: 1; } .routemap[data-scn="uk"] .mv-paid { r: 2.2; }
.routemap[data-scn="uk"] .rt { stroke-width: 1; stroke-dasharray: 2.5 3.5; } .routemap[data-scn="uk"] .rt-main { stroke-width: 1.3; stroke-dasharray: 3.5 3.5; }
@media (max-width: 600px) { .routemap[data-scn="uk"] .nd-city { r: 3.8; } .routemap[data-scn="uk"] .rt { stroke-width: 1.4; } }

/* Data hub menu: categories, explore and this week in three calm columns, with a slim footer bar */
.mega-in { grid-template-columns: minmax(0, 2.1fr) minmax(0, 1fr) minmax(0, 1.05fr); gap: 0 28px; padding: 26px var(--gutter) 0; }
.mg-col--cats { display: grid; gap: 14px; align-content: start; }
.mg-group { display: grid; gap: 4px; }
.mg-gh { margin: 0; font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: rgba(243,245,239,.42); }
.mega-in .mg-cats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px 14px; }
.mega a.mg-cat { grid-template-columns: 24px minmax(0, 1fr); padding: 5px 8px; }
.mega .mg-cat-img { width: 24px; height: 30px; }
.mg-also { margin: 2px 0 0; font-size: 11.5px; color: rgba(243,245,239,.42); }
.mg-also a { color: var(--on-dark-muted); text-decoration: none; } .mg-also a:hover { color: var(--lime); }
.mega-in > .mg-col + .mg-col { padding-left: 28px; border-left: 1px solid rgba(243,245,239,.08); }
.mg-col--week { display: grid; gap: 2px; align-content: start; }
.mega .mg-mv small { display: none; }
.mg-foot { grid-column: 1 / -1; display: flex; align-items: center; gap: 18px; margin-top: 22px; padding: 14px 0 16px; border-top: 1px solid rgba(243,245,239,.08); }
.mg-foot .mg-live { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 11px; color: var(--on-dark-muted); }
.mg-foot .mg-cta { margin: 0 0 0 auto; padding: 9px 16px; }
@media (max-width: 1180px) { .mega-in { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } .mg-col--week { display: none; } }
.mega .mg-also a { font-family: var(--font-body); font-stretch: normal; font-weight: 500; font-size: 11.5px; letter-spacing: 0; text-transform: none; padding: 0; }
.mega a.mg-link { gap: 2px; padding: 7px 8px; }
.mega .mg-mv small { display: block; } .mega .mg-mv:has(.mg-mv-rk) small { display: none; }
/* Markets map: the hub is lime, live markets dark green; selecting a country outlines it instead of recolouring it, so the colours keep their meaning */
.cm.is-hub { fill: var(--lime); }
.cm.is-active { fill: var(--forest-3); stroke: var(--lime); stroke-width: 2.5; }
.cm.is-hub.is-active { fill: #b9e33f; stroke: var(--ink); stroke-width: 2.5; }
.cm.is-req.is-active { fill: #d4d0c1; stroke: var(--ink); stroke-width: 1.5; }
.cm-lab.is-active { fill: var(--lime); }
.cm-lab.cm-lab--hub, .cm-lab.cm-lab--hub.is-active { fill: var(--ink); }
.cmap-key .k-live { background: var(--forest); } .cmap-key .k-hub { background: var(--lime); box-shadow: inset 0 0 0 1px rgba(10,15,12,.35); }
.cmap-pill.is-live { background: var(--forest); color: var(--lime); } .cmap-pill.is-hub { background: var(--lime); color: var(--ink); }
/* Treemap: figures scale to the tile, and small tiles keep just the arrow, so nothing overlaps or clips */
.si-tm-rev { font-size: min(clamp(28px, 4.2vw, 64px), 30cqh, 21cqw); }
@container (max-height: 175px) { .si-tm-go { font-size: 0; padding: 6px 8px; gap: 0; } .si-tm-go i { font-size: 13px; } .si-tm-meta { display: none; } }
@container (max-width: 300px) { .si-tm-go { font-size: 0; padding: 6px 8px; gap: 0; } .si-tm-go i { font-size: 13px; } }
@container (max-height: 90px) { .si-tm-go { display: none; } }
.si-tm-more { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; margin: 14px 0 0; font-size: 14px; }
.si-tm-more span { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
.si-tm-more a { color: var(--text); text-decoration: none; border-bottom: 1px solid var(--line); } .si-tm-more a:hover { border-color: var(--ink); }
.si-tm-more b { font-weight: 600; }
@media (max-width: 760px) { .si-tm-img:nth-child(3) { display: none; } }
/* wide tables: a fade at the right edge and a quiet hint while there is more to swipe to */
.table-wrap.is-scroll:not(.at-end) { -webkit-mask-image: linear-gradient(to right, #000 82%, transparent); mask-image: linear-gradient(to right, #000 82%, transparent); }
.swipe-hint { margin: 0 0 6px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); text-align: right; }
.swipe-hint span { display: inline-block; animation: swipeNudge 1.6s ease-in-out infinite; }
@keyframes swipeNudge { 50% { transform: translateX(4px); } }
@media (prefers-reduced-motion: reduce) { .swipe-hint span { animation: none; } }
/* Two sections on the same background: the first one's bottom padding is gap enough, so the second drops its top padding */
.section:not([class*="--"]) + .section:not([class*="--"]), .section--cream + .section--cream, .section--dark + .section--dark, .si-dark + .si-dark { padding-top: 0; }
/* five markets: one row of five on wide screens, so no country sits alone on a second row */
@media (min-width: 1200px) { .si-mk-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (min-width: 760px) and (max-width: 1199px) { .si-mk-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } .si-mk-grid > .si-mk { grid-column: span 2; } .si-mk-grid > .si-mk:nth-child(n+4) { grid-column: span 3; } }
.si-mk-top li.no-img { grid-template-columns: 1fr; padding-left: 12px; border-left: 2px solid var(--line); }
/* CTA band: its edges line up with the page grid (.wrap) at every width */
.cta-band { padding-left: max(var(--gutter), calc((100% - var(--max)) / 2 + var(--gutter))); padding-right: max(var(--gutter), calc((100% - var(--max)) / 2 + var(--gutter))); }
.stat-tile { align-content: start; }
/* leaderboard: on phones the category bar is one row that scrolls sideways, so it covers less of the screen */
@media (max-width: 640px) { .lb-nav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter)); padding-left: var(--gutter); padding-right: var(--gutter); } .lb-nav::-webkit-scrollbar { display: none; } .lb-nav a { flex: none; } }
/* price map axis titles: scoped, so the price tool's .pm-axis rules can't pull them under the £0 tick */
.si-pm .pm-axis { left: auto; right: 0; bottom: 6px; top: auto; height: auto; border: 0; }
.si-pm .pm-axis--y { left: 8px; right: auto; top: 4px; bottom: auto; }

/* ================= Polish pass (23 Oct 2026): consistent rhythm across pages ================= */
/* headings wrap evenly, with no single word left on a line */
h1, h2, h3, .hero-title, .cta-band h2 { text-wrap: balance; }
p, li { text-wrap: pretty; }
/* page heroes: wider headings on desktop, so they take two or three lines instead of five or six */
@media (min-width: 1024px) { .page-hero h1 { max-width: 17ch; font-size: clamp(64px, 7.4vw, 120px); } }
/* section rhythm: a calmer maximum, and the first section after a hero starts closer to it */
.section { padding: clamp(64px, 8.5vw, 120px) 0; }
.page-hero + .section, .page-hero + .subnav + .section { padding-top: clamp(40px, 5vw, 64px); }
/* CTA band headline: two lines, not four */
.cta-band h2 { max-width: 18ch; }
/* hairline grids: lines drawn on the cards, so an unfilled last row shows page background instead of grey blocks */
.grid-3, .grid-2 { background: transparent; border: 0; }
.grid-3 > *, .grid-2 > * { box-shadow: 0 0 0 1px var(--line); }
/* footer: column headings stay on one line, so every column's links start level */
.footer-col h2 { white-space: nowrap; }
/* home: the live date sits with its heading; price-drop header stays on one line; top-seller price tags line up */
.hw-head .si-live { margin-left: 0; }
.hw-card header span { flex: 1 1 0; min-width: 0; }
.hw-bottle { display: flex; flex-direction: column; } .hw-bottle .hw-tag { margin-top: auto; }
/* home channel tabs on phones: the pause button sits outside the scrolling row, and the row fades at the edge */
@media (max-width: 860px) { .hub-tabs { -webkit-mask-image: linear-gradient(to right, #000 85%, transparent); mask-image: linear-gradient(to right, #000 85%, transparent); padding-right: 40px; } .hub-tabs .icon-btn { position: sticky; right: 0; flex: none; background: var(--ink); } }
/* markets map and dashboard mock-up: no taller than the screen, so heading and graphic share a view */
@media (min-width: 1000px) { .cmap-svg { max-height: 76vh; } }
.section--cream .pf, .section:not(.section--dark):not(.section--forest) .pf { box-shadow: 0 30px 60px -32px rgba(10,15,12,.28); }
/* services: the product shot's white background melts into the page, and it no longer sits on the divider */
.phone-shot { mix-blend-mode: multiply; } .phone-shot-wrap { padding-bottom: 24px; }
/* services sub-navigation: text lines up with the content edge, and fades where it scrolls on phones */
.subnav .wrap { padding-left: calc(var(--gutter) - 12px); }
@media (max-width: 760px) { .subnav .wrap { -webkit-mask-image: linear-gradient(to right, #000 85%, transparent); mask-image: linear-gradient(to right, #000 85%, transparent); } }
/* how we buy: the bill sits beside the intro instead of pushing the hero past the fold */
@media (min-width: 1100px) { .hero-grid:has(.receipt-wrap) { align-items: start; } .hero:has(.receipt-wrap) .hero-title { margin-bottom: 32px !important; } .hero:has(.receipt-wrap) .receipt-wrap { margin-top: -40px; } }
/* FBS: the store, portal and doorstep frames get the full width instead of being squeezed into one column */
@media (min-width: 960px) { .service:has(.journey) { grid-template-columns: 1fr; gap: 28px; } .service:has(.journey) .service-body { display: grid; grid-template-columns: 1.2fr 1fr; gap: 24px 64px; } .service:has(.journey) .journey { grid-column: 1 / -1; } }
@media (max-width: 600px) { .cn-foot span:last-child { display: none; } }
/* API: a shorter dot stage, so the steps share the screen with it */
.morph-canvas { height: clamp(220px, 24vw, 300px); }
/* about: stat dividers only where the stats sit side by side */
@media (max-width: 819px) { .cols3--stats > div { border-left: 0; padding-left: 0; } }
/* label checker: rule cards top-aligned; six market chips on one row on desktop */
.lc-rl li { align-content: start; }
@media (min-width: 900px) { .lc-mks { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); } }
/* duty calculator: the stacked flag-over-name tab layout for all five until there is room for all inline */
@media (max-width: 1400px) { .seg--5 label { flex-direction: column; gap: 6px; padding: 10px 4px; font-size: 12px; } }
.section.section--tight { padding-top: clamp(24px, 3vw, 40px); padding-bottom: clamp(48px, 7vw, 88px); }
/* gin and other category pages: the search chart and keyword card start level, and the chart fills its card */
.kw-grid .pro-panel.is-free { margin-top: 0; }
@media (min-width: 1000px) { .kw-preview { display: flex; flex-direction: column; } .kw-preview .dp-chart { flex: 1; display: flex; align-items: center; } }
/* leaderboard movers: wider cards on desktop, and names wrap to two lines instead of being cut */
@media (min-width: 1100px) { .lb-summary { margin-left: calc(50% - min(560px, 46vw)); margin-right: calc(50% - min(560px, 46vw)); } }
.lb-movers li .lb-mv-t b { white-space: normal; }
.lb-movers li .lb-mv-t small { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
/* guide and leaderboard charts are drawn 720 wide; on phones their text is scaled up so it stays readable */
@media (max-width: 600px) { .c-lab { font-size: 19px; } .c-axis { font-size: 16px; } .c-val { font-size: 18px; } }
@media (max-width: 600px) { .c-lab { font-size: 16px; } .c-axis { font-size: 15px; } .c-val { font-size: 16px; } svg.chart { overflow: visible; } }
/* lime heroes start a little higher, so the how-we-buy bill fits on a laptop screen */
@media (min-width: 1100px) { .hero { padding-top: clamp(56px, 6vw, 96px); } .hero:has(.receipt-wrap) .receipt-wrap { margin-top: -64px; } }
@media (min-width: 1100px) { .hero:has(.receipt-wrap) .receipt-wrap { margin-top: 0; transform: scale(.9); transform-origin: top right; } }
@media (max-width: 520px) { .routemap-copy .routemap-tabs { display: grid; grid-template-columns: 1fr 1fr; justify-self: stretch; } .routemap-copy .routemap-tabs .chipbtn { justify-content: center; text-align: center; } }
/* Markets map, final: every market dark green, and a lime square marks each hub (London and Rotterdam) */
.cm.is-hub { fill: var(--forest); }
.cm.is-hub.is-active { fill: var(--forest-3); stroke: var(--lime); stroke-width: 2.5; }
.cm-hub { fill: var(--lime); stroke: var(--ink); stroke-width: 2; pointer-events: none; }
.cmap-key .k-hub { border-radius: 2px; }
.cm-wh { pointer-events: none; } .cm-wh circle { fill: var(--paper); stroke: var(--ink); stroke-width: 1.5; } .cm-wh .cm-wh-c { fill: var(--ink); stroke: none; }
.cmap-key .k-wh { border-radius: 50%; background: radial-gradient(circle, var(--ink) 0 28%, var(--paper) 30%); box-shadow: inset 0 0 0 1.5px var(--ink); }
/* market split bars: the key sits clear of the bar */
.si-mk-key { margin-top: 2px; }
.eu-grid .si-mk-key { margin-top: 12px; }
/* Europe page: the market summary stays in view beside its long top-seller list */
@media (min-width: 980px) { .eu-grid > div:first-child { position: sticky; top: 96px; } }
/* Data hub menu: patterns sub-group, quick links, tools and the free-account button */
.mg-sub { margin: 12px 0 2px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: rgba(243,245,239,.42); }
.mg-more { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 10px 0 0; }
.mega .mg-more a { font-family: var(--font-body); font-stretch: normal; font-size: 12.5px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--lime); text-decoration: none; padding: 0; }
.mega .mg-more a:hover { text-decoration: underline; }
.mg-tools { display: inline-flex; align-items: center; gap: 14px; margin-left: auto; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: rgba(243,245,239,.42); }
.mega .mg-tools a { font-family: var(--font-body); font-stretch: normal; font-size: 12.5px; letter-spacing: 0; text-transform: none; color: var(--on-dark); text-decoration: none; padding: 0; }
.mega .mg-tools a:hover { color: var(--lime); }
.mg-foot .mg-cta { margin-left: 0; }
.mg-unlock { padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(var(--lime-rgb), .5); background: none; color: var(--lime); font-family: var(--font-display); font-stretch: 85%; font-weight: 700; font-size: 12.5px; letter-spacing: .04em; text-transform: uppercase; cursor: pointer; }
.mg-unlock:hover { background: rgba(var(--lime-rgb), .12); }
.sd-pro .mg-unlock, .sd-unlocked .mg-unlock { display: none; }
@media (max-width: 1180px) { .mg-tools { display: none; } }

/* Seasonal calendar */
.sc-cards { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.sc-card { display: grid; gap: 6px; align-content: start; padding: 20px; background: var(--white); border: 1px solid var(--line); border-radius: 12px; }
.sc-card header { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.sc-card h3 { margin: 0; font-size: 18px; }
.sc-card header span { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--lime-deep); }
.sc-mult { font-family: var(--font-display); font-stretch: 78%; font-weight: 800; font-size: 56px; line-height: .95; letter-spacing: -.02em; }
.sc-card > small { font-size: 13px; color: var(--text-muted); }
.sc-card dl { margin: 10px 0 0; display: grid; gap: 6px; border-top: 1px solid var(--line); padding-top: 10px; }
.sc-card dl div { display: flex; justify-content: space-between; gap: 10px; font-size: 13.5px; } .sc-card dt { color: var(--text-muted); } .sc-card dd { margin: 0; font-weight: 600; text-align: right; }
.sc-legend { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0 0 16px; padding: 0; font-size: 13px; color: var(--text-muted); }
.sc-legend li { display: inline-flex; align-items: center; gap: 8px; } .sc-legend i { width: 14px; height: 14px; border-radius: 3px; display: inline-block; }
.sc-heat { margin: 0 0 28px; } .sc-heat figcaption { margin: 0 0 8px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
.sc-heat table { width: 100%; min-width: 620px; border-collapse: separate; border-spacing: 3px; }
.sc-heat th { font-size: 12px; font-weight: 500; color: var(--text-muted); text-align: center; padding: 4px 0; }
.sc-heat tr th:first-child { text-align: left; font-size: 14px; font-weight: 600; color: var(--text); white-space: nowrap; padding-right: 10px; width: 1%; }
.sc-heat td { height: 30px; border-radius: 4px; }
.sc-l0 { background: #e7e5dc; } .sc-l1 { background: #d9e8a8; } .sc-l2 { background: #b7dc4f; } .sc-l3 { background: #6f9612; } .sc-l4 { background: #13261a; }
/* Pack sizes */
.pk-key { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0 0 18px; padding: 0; font-size: 13px; color: var(--text-muted); }
.pk-key li { display: inline-flex; align-items: center; gap: 8px; } .pk-key i { width: 14px; height: 14px; border-radius: 3px; display: inline-block; }
.pk-k--n { background: #cfd3c8; } .pk-k--r { background: var(--lime-deep); }
.pk-mix { display: grid; gap: 18px; }
.pk-row { display: grid; gap: 8px; } @media (min-width: 760px) { .pk-row { grid-template-columns: 240px 1fr; align-items: center; gap: 24px; } }
.pk-row > b { font-size: 16px; }
.pk-bars { display: grid; gap: 5px; }
.pk-bar { position: relative; display: block; height: 22px; width: max(var(--w), 3px); border-radius: 4px; }
.pk-bar--n { background: #cfd3c8; } .pk-bar--r { background: var(--lime-deep); }
.pk-bar i { position: absolute; left: calc(100% + 8px); top: 50%; transform: translateY(-50%); font-style: normal; font-family: var(--font-mono); font-size: 12.5px; color: var(--text); white-space: nowrap; }
.pk-price { display: grid; gap: 14px; max-width: 860px; }
.pk-pr { display: grid; grid-template-columns: 1fr; gap: 6px; } @media (min-width: 760px) { .pk-pr { grid-template-columns: 240px 1fr 64px; align-items: center; gap: 20px; } }
.pk-pr > b { font-size: 16px; } .pk-pr em { font-style: normal; font-family: var(--font-mono); font-size: 15px; font-weight: 600; }
.pk-axis { position: relative; height: 22px; background: linear-gradient(to right, transparent calc(50% - 1px), var(--line) calc(50% - 1px), var(--line) calc(50% + 1px), transparent calc(50% + 1px)); }
.pk-axis span { position: absolute; top: 3px; bottom: 3px; right: 50%; width: var(--w); background: var(--forest-3); border-radius: 4px 0 0 4px; }
.pk-pr.is-up .pk-axis span { right: auto; left: 50%; background: var(--lime-deep); border-radius: 0 4px 4px 0; }
.si-nav .mega .mg-tools a[href="/label-checker"] { display: inline; }
@media (min-width: 1100px) { .sc-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.sc-card dd small { display: block; font-weight: 400; font-size: 12px; color: var(--text-muted); }
.sc-heat table { table-layout: fixed; } .sc-heat tr th:first-child { width: 150px; }
@media (max-width: 760px) { .sc-heat tr th:first-child { width: 110px; } }
.sc-heat .m1 { display: none; }
@media (max-width: 760px) {
  .sc-heat table { min-width: 0; border-spacing: 2px; } .sc-heat .m3 { display: none; } .sc-heat .m1 { display: inline; }
  .sc-heat tr th:first-child { width: 96px; white-space: normal; font-size: 12.5px; line-height: 1.2; }
  .sc-heat td { height: 26px; border-radius: 3px; }
}
/* Search: suggestions drop down from the bar as you type */
.sr-box { position: relative; max-width: 760px; z-index: 20; }
.sr-suggest { position: absolute; left: 0; right: 0; top: calc(100% + 8px); display: grid; gap: 2px; padding: 6px; border-radius: 14px; background: #0d1510; border: 1px solid rgba(var(--lime-rgb), .28); box-shadow: 0 24px 60px rgba(0,0,0,.45); max-height: min(62vh, 480px); overflow-y: auto; }
.sr-suggest[hidden] { display: none; }
.sr-sg { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 8px 10px; border-radius: 10px; color: var(--on-dark); text-decoration: none; }
.sr-sg:hover, .sr-sg.is-active { background: rgba(var(--lime-rgb), .1); }
.sr-sg img, .sr-sg > span:first-child { width: 32px; height: 40px; object-fit: contain; background: #fff; border-radius: 4px; padding: 2px; }
.sr-sg > span:first-child:empty { background: #1b3424; }
.sr-sg b { display: block; font-size: 14.5px; font-weight: 600; } .sr-sg small { display: block; font-size: 12px; color: var(--on-dark-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr-sg em { font-style: normal; font-family: var(--font-mono); font-size: 11px; color: var(--on-dark-muted); white-space: nowrap; }
.sr-sg i { font-style: normal; font-family: var(--font-mono); font-size: 13px; color: var(--lime); white-space: nowrap; }
.sr-sg-all { margin-top: 2px; padding: 10px; border: 0; border-top: 1px solid rgba(243,245,239,.08); background: none; color: var(--lime); font: inherit; font-size: 13px; text-align: left; cursor: pointer; border-radius: 0 0 10px 10px; }
.sr-sg-all:hover { background: rgba(var(--lime-rgb), .08); }
@media (max-width: 640px) { .sr-sg { grid-template-columns: 32px minmax(0, 1fr) auto; } .sr-sg em { display: none; } }
/* the search hero lets the suggestions hang over the results below it */
.si-hero.sr-hero { overflow: visible; position: relative; z-index: 6; }
.sr-form input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; width: 14px; height: 14px; cursor: pointer; background: var(--on-dark-muted); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2 2l10 10M12 2L2 12' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2 2l10 10M12 2L2 12' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.sr-form input::-webkit-search-cancel-button:hover { background: var(--lime); }
/* movers: each list says what it measures */
.si-mv-col h3 { flex-wrap: wrap; row-gap: 2px; }
.si-mv-col h3 small { flex-basis: 100%; padding-left: 40px; font-family: var(--font-mono); font-size: 11px; font-weight: 400; letter-spacing: .02em; color: var(--text-muted); }
.ukm-online { display: block; margin-top: 10px; padding-top: 8px; border-top: 1px solid rgba(243,245,239,.1); font-family: var(--font-mono); font-size: 11.5px; color: var(--lime); letter-spacing: .02em; }
.ukm-kpis div { align-content: start; }
.ukm-online { font-family: var(--font-body); font-size: 12.5px; letter-spacing: 0; color: var(--on-dark-muted); line-height: 1.4; }
.ukm-online em { font-style: normal; font-weight: 700; color: var(--lime); }

/* ================= How we buy ================= */
/* your side and our side */
.hwb-sides { display: grid; gap: 14px; }
@media (min-width: 960px) { .hwb-sides { grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr); } }
.hwb-side { border-radius: 16px; padding: clamp(22px, 2.6vw, 32px); display: grid; gap: 18px; align-content: start; }
.hwb-side--you { background: rgba(243,245,239,.04); border: 1px solid var(--line-dark); }
.hwb-side--us { background: linear-gradient(180deg, rgba(var(--lime-rgb), .1), rgba(var(--lime-rgb), .03)); border: 1px solid rgba(var(--lime-rgb), .3); }
.hwb-k { font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--on-dark-muted); }
.hwb-side--us .hwb-k { color: var(--lime); }
.hwb-you { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; counter-reset: you; }
.hwb-you li { counter-increment: you; display: grid; grid-template-columns: 34px 1fr; gap: 2px 14px; }
.hwb-you li::before { content: counter(you); grid-row: span 2; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid var(--on-dark-muted); font-family: var(--font-mono); font-size: 13px; color: var(--on-dark); }
.hwb-you b, .hwb-us b { font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--on-dark); }
.hwb-you span, .hwb-us span { font-size: 14px; line-height: 1.45; color: var(--on-dark-muted); }
.hwb-us { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px 28px; }
@media (min-width: 640px) { .hwb-us { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .hwb-us { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.hwb-us li { display: grid; grid-template-columns: 26px 1fr; gap: 2px 12px; align-content: start; }
.hwb-us svg { grid-row: span 2; width: 26px; height: 26px; padding: 5px; border-radius: 50%; background: var(--lime); color: var(--ink); }
/* worked back from the drinker: a price waterfall */
.hwb-math { display: grid; gap: clamp(32px, 5vw, 72px); align-items: center; }
@media (min-width: 1000px) { .hwb-math { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); } }
.hwb-math h2 { margin-bottom: 18px; } .hwb-math .lede { margin: 0; }
.hwb-stat { display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; align-items: center; margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line); }
.hwb-stat b { font-family: var(--font-display); font-stretch: 78%; font-weight: 800; font-size: clamp(48px, 5vw, 72px); line-height: .9; }
.hwb-stat span { font-size: 15px; color: var(--text-muted); line-height: 1.45; max-width: 34ch; }
.hwb-fall { margin: 0; display: grid; gap: 10px; padding: clamp(20px, 2.6vw, 32px); background: var(--white); border: 1px solid var(--line); border-radius: 16px; }
.hwb-row { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 16px; align-items: center; }
.hwb-row > span { font-size: 14px; color: var(--text-muted); }
.hwb-row i { position: relative; display: block; height: 30px; background: linear-gradient(to right, transparent var(--l), var(--c, #cfd3c8) var(--l), var(--c, #cfd3c8) calc(var(--l) + var(--w)), transparent calc(var(--l) + var(--w))); border-radius: 4px; }
.hwb-row--top i { --c: var(--ink); } .hwb-row--top > span { color: var(--text); font-weight: 600; }
.hwb-row--end { margin-top: 6px; padding-top: 14px; border-top: 1px dashed var(--line); }
.hwb-row--end i { --c: var(--lime); } .hwb-row--end > span { color: var(--text); font-weight: 700; }
.hwb-fall figcaption { margin-top: 8px; font-size: 12.5px; color: var(--text-muted); }
@media (max-width: 560px) { .hwb-row { grid-template-columns: 1fr; gap: 6px; } .hwb-row i { height: 22px; } }
/* four things: a light checklist */
.hwb-needs { list-style: none; margin: 0; padding: 0; display: grid; gap: 28px; }
@media (min-width: 760px) { .hwb-needs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .hwb-needs { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; } }
.hwb-needs li { display: grid; gap: 10px; align-content: start; padding-top: 18px; border-top: 2px solid var(--ink); }
.hwb-n { font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; color: var(--text-muted); }
.hwb-needs b { font-family: var(--font-display); font-weight: 700; font-size: 20px; }
.hwb-needs p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--text-muted); }
.hwb-link { justify-self: start; margin-top: 4px; font-weight: 600; font-size: 14.5px; color: var(--ink); text-decoration: none; border-bottom: 2px solid var(--lime); }
/* Home hero: "shop." as a solid dark block with lime letters, so it holds its own beside the heavy black words */
.hero-head .hero-title .hl-outline { display: inline-block; color: var(--lime); -webkit-text-stroke: 0; background: var(--ink); padding: .02em .1em .06em; margin: .08em 0 0 -.04em; border-radius: .06em; line-height: .86; transform: rotate(-1.5deg); box-shadow: .06em .06em 0 rgba(10,15,12,.18); }

/* API page: the order journey (replaces the dot walk) */
.jr { display: grid; gap: 18px; padding: clamp(10px, 2vw, 22px) 0 6px; }
@media (min-width: 980px) { .jr { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 28px; align-items: center; } }
.jr-track { position: relative; padding: 86px 0 8px; }
.jr-line { position: absolute; left: 12.5%; right: 12.5%; top: 86px; margin-top: 27px; height: 3px; border-radius: 3px; background: var(--line); overflow: hidden; }
.jr-line i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--lime-deep), var(--lime)); border-radius: 3px; transition: width .9s cubic-bezier(.65, 0, .35, 1); }
.jr-nodes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); position: relative; }
.jr-node { display: grid; justify-items: center; gap: 10px; }
.jr-ic { width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; background: var(--white); border: 1.5px solid var(--line); color: var(--text-muted); transition: background .45s ease, border-color .45s ease, color .45s ease, transform .6s cubic-bezier(.34, 1.56, .64, 1), box-shadow .45s ease; }
.jr-ic svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.jr-node b { font-size: 13px; font-weight: 600; color: var(--text-muted); transition: color .45s ease; }
.jr-node.is-done .jr-ic { background: #eef5d6; border-color: var(--lime-deep); color: var(--ink); }
.jr-node.is-on .jr-ic { background: var(--ink); border-color: var(--ink); color: var(--lime); transform: translateY(-4px) scale(1.06); box-shadow: 0 14px 28px -12px rgba(10,15,12,.45); }
.jr-node.is-on b, .jr-node.is-done b { color: var(--text); }
.jr-chip { position: absolute; left: 0; top: 0; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; background: var(--white); border: 1px solid var(--line); box-shadow: 0 12px 30px -14px rgba(10,15,12,.35); white-space: nowrap; transition: transform .9s cubic-bezier(.65, 0, .35, 1); }
.jr-chip b { font-size: 13px; font-weight: 600; } .jr-chip small { font-family: var(--font-mono); font-size: 11px; padding: 3px 8px; border-radius: 999px; background: var(--lime); color: var(--ink); }
.jr-chip.is-pop small { animation: jrPop .5s cubic-bezier(.34, 1.56, .64, 1); }
.jr-chip::after { content: ""; position: absolute; left: 50%; bottom: -7px; width: 12px; height: 12px; background: var(--white); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); transform: translateX(-50%) rotate(45deg); }
@keyframes jrPop { 0% { transform: scale(.7); opacity: 0; } 100% { transform: none; opacity: 1; } }
.jr-log { background: var(--ink); color: var(--on-dark); border-radius: 16px; padding: 16px 18px; min-height: 214px; font-family: var(--font-mono); font-size: 12.5px; box-shadow: 0 24px 50px -30px rgba(10,15,12,.6); }
.jr-log-h { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid rgba(243,245,239,.08); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--on-dark-muted); }
.jr-log-h em { font-style: normal; color: var(--lime); display: inline-flex; align-items: center; gap: 6px; } .jr-log-h em::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--lime); animation: pfLive 1.6s ease-in-out infinite; }
.jr-log ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.jr-log li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; opacity: 0; animation: jrIn .5s cubic-bezier(.22, .8, .24, 1) forwards; }
.jr-log code { color: var(--lime); font-family: inherit; } .jr-log span { color: var(--on-dark-muted); }
.jr-log .m { font-style: normal; font-size: 10.5px; padding: 2px 6px; border-radius: 4px; background: rgba(var(--lime-rgb), .14); color: var(--lime); }
.jr-log .ok { font-style: normal; margin-left: auto; color: #8fe3a0; }
@keyframes jrIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (max-width: 600px) { .jr-ic { width: 46px; height: 46px; border-radius: 14px; } .jr-line { margin-top: 22px; } .jr-node b { font-size: 11.5px; } .jr-chip b { display: none; } .jr-log { min-height: 0; } }
@media (prefers-reduced-motion: reduce) { .jr-line i, .jr-chip, .jr-ic { transition: none; } .jr-log li { animation: none; opacity: 1; } }
.api-flow.is-live li { cursor: pointer; }

/* Skip link: the first thing a keyboard reaches on every page */
.skip-link { position: absolute; left: 16px; top: -64px; z-index: 200; padding: 12px 18px; background: var(--lime); color: var(--ink); font-family: var(--font-body); font-weight: 700; font-size: 15px; border-radius: 999px; text-decoration: none; transition: top .15s ease; }
.skip-link:focus { top: 12px; outline: 3px solid var(--ink); outline-offset: 2px; }
/* the sales locks on the hub shelf: a full 44px touch target */
.si-bstats .si-lk { min-height: 44px; min-width: 44px; margin: -13px 0; }
/* rows with no listing detail behind them (no data-asin) don't open the drawer */
.dp-table tbody tr:not([data-asin]) { cursor: default; }
.dp-table tbody tr:not([data-asin]):hover { background: transparent; }
div.si-pod { cursor: default; }
div.si-pod:hover { transform: none; box-shadow: none; }
div.si-pod:hover .si-pod-photo { transform: none; }
/* category pages: the numbers, share buttons and category chips sit in a band near the end */
.si-numbers .dp-kpis { margin-top: 0; }
.si-numbers .si-numbers-h { margin-top: 36px; }
.si-numbers .si-switch { margin-top: 14px; }
/* category pages on phones open on the answer: a short hero (the header already says Shelfdrop Intelligence) */
@media (max-width: 700px) {
  .si[data-cat] .si-hero { padding: 20px 0 24px; }
  .si[data-cat] .si-hero .si-lock, .si[data-cat] .si-hero .si-crumb { display: none; }
  .si[data-cat] .si-lockrow { margin-bottom: 12px; }
  .si[data-cat] .si-hero h1 { font-size: clamp(36px, 10.6vw, 52px); max-width: none; margin-bottom: 10px; }
  .si[data-cat] .si-hero .lede { font-size: 15px; line-height: 1.45; }
  .si[data-cat] .si-seg-note { margin-top: 10px; }
}
.si-numbers .si-numbers-h { display: flex; margin: 36px 0 0; }

/* Home: your own store, plugged in (platforms → Shelfdrop, then the four steps after the checkout) */
.ss-link { display: grid; grid-template-columns: minmax(0, 1fr) minmax(90px, .7fr) minmax(0, 1fr); align-items: center; margin: 8px 0 56px; }
.ss-plats { display: grid; gap: 12px; }
.ss-plat { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--white); border: 1px solid var(--line); border-radius: 14px; font-family: var(--font-display); font-stretch: 85%; font-weight: 800; font-size: 17px; text-transform: uppercase; letter-spacing: .01em; color: var(--ink); }
.ss-plat i { flex: none; width: 36px; height: 36px; display: grid; place-items: center; }
.ss-plat i svg { width: 32px; height: 32px; fill: var(--c); }
.ss-plat i.ss-wide { width: 104px; height: 36px; }
.ss-plat i.ss-wide svg { width: 104px; height: 22px; }  /* the Woo mark is its wordmark, five times wider than tall, so it carries the name itself */
.ss-plat--mark { justify-content: center; }
@media (min-width: 861px) { .ss-plat--mark { justify-content: flex-start; } }  /* each platform's own mark, in its own colour */
.ss-wires { position: relative; align-self: stretch; min-height: 180px; }
.ss-wires svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ss-wires path { fill: none; stroke: var(--ink); stroke-opacity: .45; stroke-width: 1.6; stroke-dasharray: 4 6; vector-effect: non-scaling-stroke; animation: ss-flow 1.4s linear infinite; }
.ss-wires .ss-v { display: none; }
@keyframes ss-flow { to { stroke-dashoffset: -20; } }
.ss-core { justify-self: start; display: grid; justify-items: center; gap: 10px; padding: 26px 30px; background: var(--lime); border-radius: 22px; box-shadow: 0 24px 48px -30px rgba(10,15,12,.5); }
.ss-core img { width: 170px; height: auto; display: block; }
.ss-core small { font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: rgba(10,15,12,.72); }
.ss-flow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; position: relative; }
.ss-flow::before { content: ""; position: absolute; left: 8%; right: 8%; top: 33px; border-top: 2px dashed rgba(10,15,12,.22); }
.ss-flow li { position: relative; background: var(--white); border: 1px solid var(--line); border-radius: 16px; padding: 22px 20px 24px; }
.ss-n { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; color: var(--text-muted); }
.ss-tick { position: absolute; top: 18px; right: 18px; width: 30px; height: 30px; border-radius: 50%; background: var(--lime); display: grid; place-items: center; box-shadow: 0 0 0 4px var(--white); }
.ss-tick svg { width: 16px; height: 16px; fill: none; stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.ss-flow h3 { margin: 18px 0 8px; }
.ss-flow p { margin: 0; color: var(--text-muted); font-size: 15px; line-height: 1.5; }
.ss-cur { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.ss-cur span { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: var(--ink); color: var(--on-dark); font-family: var(--font-mono); font-size: 11.5px; }
.ss-cur b { color: var(--lime); font-weight: 500; }
.ss-more { display: flex; flex-wrap: wrap; gap: 12px 28px; margin: 28px 0 0; }
.ss-more a { font-family: var(--font-display); font-stretch: 85%; font-weight: 700; text-transform: uppercase; font-size: 15px; color: var(--ink); text-decoration: underline; text-decoration-color: var(--lime); text-decoration-thickness: 3px; text-underline-offset: 5px; }
@media (max-width: 860px) {
  .ss-link { grid-template-columns: 1fr; margin-bottom: 40px; }
  .ss-plats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .ss-plat { flex-direction: column; gap: 8px; padding: 12px 4px; font-size: 12.5px; text-align: center; }
  .ss-wires { min-height: 72px; }
  .ss-wires .ss-h { display: none; }
  .ss-wires .ss-v { display: block; }
  .ss-core { justify-self: center; padding: 22px 26px; }
  .ss-core img { width: 150px; }
  .ss-flow { grid-template-columns: 1fr; gap: 12px; }
  .ss-flow::before { left: 35px; right: auto; top: 34px; bottom: 34px; border-top: 0; border-left: 2px dashed rgba(10,15,12,.22); }
  .ss-flow li { padding: 20px 18px 22px 66px; }
  .ss-tick { left: 20px; right: auto; top: 20px; }
  .ss-flow h3 { margin-top: 4px; }
}
@media (prefers-reduced-motion: reduce) { .ss-wires path { animation: none; } }

/* ---------- Bottle facts: the line under each listing, Buy links, and the drawer's facts panel ---------- */
.dp-name .dp-facts { display: block; margin-top: 3px; font-size: 12px; line-height: 1.4; color: var(--text-muted); }
.dp-stars { color: var(--text); white-space: nowrap; }
.dp-stars span { color: var(--text-muted); }
.dp-buy { display: inline-flex; align-items: center; gap: 4px; margin-top: 7px; padding: 5px 11px; border: 1px solid var(--line); border-radius: 999px; background: var(--white); font-size: 12px; font-weight: 600; line-height: 1; color: var(--text); text-decoration: none; white-space: nowrap; }
.dp-buy:hover, .dp-buy:focus-visible { background: var(--ink); color: var(--lime); border-color: var(--ink); }
.dp-name .dp-prod > div > .dp-buy { width: max-content; }
.dp-disclose { margin: 12px 0 0; font-size: 12px; line-height: 1.5; color: var(--text-muted); }
.dp-dr-facts { margin: 0 0 20px; }
.dp-dr-facts h4 { margin: 20px 0 8px; font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); }
.dp-dr-facts h4:first-child { margin-top: 0; }
.dp-kv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 0; background: var(--line); border: 1px solid var(--line); }
@media (min-width: 560px) { .dp-kv { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.dp-kv div { background: var(--white); padding: 10px 12px; min-width: 0; }
.dp-kv dt { font-size: 11px; color: var(--text-muted); margin: 0 0 3px; }
.dp-kv dd { margin: 0; font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.dp-kv dd small { font-weight: 400; color: var(--text-muted); }
.dp-kv code { font-family: var(--font-mono); font-size: 12.5px; font-weight: 500; }
.dp-notes { display: grid; gap: 8px; margin: 0; }
.dp-notes div { display: grid; grid-template-columns: 64px 1fr; gap: 10px; font-size: 14px; line-height: 1.5; }
.dp-notes dt { font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); padding-top: 3px; }
.dp-notes dd { margin: 0; }
.dp-src { margin: 8px 0 0; font-size: 12px; color: var(--text-muted); }
.dp-src a { color: inherit; }
.dp-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 0; }
.dp-tags i { font-style: normal; font-size: 12px; padding: 4px 10px; border-radius: 999px; background: var(--cream); }
.dp-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 14px; }
.dp-list b { font-weight: 600; }
.dp-shops { width: 100%; border-collapse: collapse; font-size: 14px; }
.dp-shops td { padding: 8px 0; border-bottom: 1px solid var(--line); }
.dp-shops td:nth-child(2) { text-align: right; font-weight: 600; padding-right: 12px; white-space: nowrap; }
.dp-shops td:last-child { text-align: right; width: 1%; white-space: nowrap; }
.dp-shops small { color: var(--text-muted); }
.dp-abroad { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.dp-abroad li { padding: 8px 12px; border: 1px solid var(--line); background: var(--white); font-size: 14px; }
.dp-abroad small { color: var(--text-muted); }
.dp-dr-nav a.dp-dr-buy { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 16px; border-radius: 999px; background: var(--lime); color: var(--ink); text-decoration: none; }
.dp-dr-nav a.dp-dr-buy:hover { background: var(--ink); color: var(--lime); }

/* ---------- Ranked cards on category pages (top 30, then the rest on demand) ---------- */
.rk-top { display: grid; gap: 16px; margin-top: 28px; }
@media (min-width: 900px) { .rk-top { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.rk-grid { display: grid; gap: 12px; margin-top: 16px; }
@media (min-width: 720px) { .rk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1140px) { .rk-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.rk-card { position: relative; display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 14px; padding: 14px; background: var(--white); border: 1px solid var(--line); border-radius: 14px; }
.rk-card--top { grid-template-columns: 1fr; gap: 0; padding: 0; overflow: hidden; box-shadow: 0 14px 30px -22px rgba(10,15,12,.35); }
.rk-media { position: relative; display: grid; place-items: start center; text-decoration: none; }
.rk-card--top .rk-media { place-items: center; padding: 22px 16px; min-height: 270px; border-bottom: 1px solid var(--line); }
.rk-photo { display: block; width: 92px; height: 115px; object-fit: contain; }
.rk-card--top .rk-photo { width: 196px; height: 245px; }
.rk-n { position: absolute; top: -4px; left: -4px; z-index: 1; display: grid; place-items: center; min-width: 30px; height: 30px; padding: 0 7px; border-radius: 999px; background: var(--ink); color: var(--lime); font-family: var(--font-display); font-weight: 800; font-size: 14px; }
.rk-card--top .rk-n { top: 16px; left: 16px; min-width: 54px; height: 54px; font-size: 26px; }
.rk-top .rk-card:first-child .rk-n { background: var(--lime); color: var(--ink); }
.rk-body { min-width: 0; display: grid; gap: 10px; align-content: start; }
.rk-card--top .rk-body { padding: 18px 20px 20px; }
.rk-name { display: grid; gap: 2px; color: var(--text); text-decoration: none; }
.rk-name b { font-family: var(--font-display); font-weight: 800; font-size: 17px; line-height: 1.15; }
.rk-name span { font-size: 13.5px; line-height: 1.35; color: var(--text-muted); }
.rk-card--top .rk-name b { font-size: 24px; }
.rk-card--top .rk-name span { font-size: 15px; }
.rk-name:hover b { text-decoration: underline; text-underline-offset: 3px; }
.rk-icons { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 12px; }
.rk-icons li { display: inline-flex; align-items: center; gap: 5px; min-width: 0; font-size: 12.5px; line-height: 1.3; }
.rk-icons svg { flex: none; width: 15px; height: 15px; color: #2f5a3a; }
.rk-icons b { font-weight: 600; }
.rk-icons small { color: var(--text-muted); margin-left: 3px; font-size: 12px; }
.rk-card--top .rk-icons, .bt-head .rk-icons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; }
.rk-card--top .rk-icons li, .bt-head .rk-icons li { align-items: flex-start; gap: 8px; }
.rk-card--top .rk-icons svg, .bt-head .rk-icons svg { width: 18px; height: 18px; margin-top: 1px; }
.rk-card--top .rk-icons b, .bt-head .rk-icons b { display: block; font-size: 13.5px; }
.rk-card--top .rk-icons small, .bt-head .rk-icons small { display: block; margin: 1px 0 0; font-size: 11.5px; }
.rk-price { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 10px; padding: 9px 12px; border-radius: 8px; background: var(--lime); }
.rk-price strong { font-family: var(--font-display); font-weight: 800; font-size: 21px; line-height: 1; }
.rk-card--top .rk-price strong { font-size: 30px; }
.rk-price small { font-family: var(--font-mono); font-size: 11px; letter-spacing: .02em; }
.rk-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.rk-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--white); color: var(--text); font: 600 13px/1 var(--font-body); text-decoration: none; white-space: nowrap; cursor: pointer; }
.rk-btn:hover, .rk-btn:focus-visible { border-color: var(--ink); }
.rk-btn--buy { background: var(--ink); color: var(--lime); border-color: var(--ink); }
.rk-btn--buy:hover, .rk-btn--buy:focus-visible { background: #000; }
.rk-btn--data { color: var(--text-muted); background: transparent; }
.rk-more { margin-top: 16px; }
.rk-more > summary { list-style: none; display: inline-flex; align-items: center; min-height: 46px; padding: 0 22px; border-radius: 999px; background: var(--ink); color: var(--lime); font: 700 15px/1 var(--font-display); letter-spacing: .02em; cursor: pointer; }
.rk-more > summary::-webkit-details-marker { display: none; }
.rk-more[open] > summary { display: none; }
.rk-more .rk-grid { margin-top: 0; }

/* ---------- Bottle pages (/data/bottle/...) ---------- */
.bt-top { display: grid; gap: 24px; margin-top: 18px; }
@media (min-width: 880px) { .bt-top { grid-template-columns: minmax(280px, 380px) minmax(0, 1fr); gap: 44px; align-items: start; } }
.bt-photo { display: grid; place-items: center; padding: 24px; background: var(--white); border-radius: 16px; }
.bt-img { display: block; width: 260px; height: 325px; max-width: 100%; object-fit: contain; }
.bt-head .eyebrow a { color: var(--lime); text-decoration: none; }
.bt-head h1 { font-size: clamp(32px, 5.4vw, 60px); line-height: .98; margin: 10px 0 12px; }
.bt-head h1 span { display: block; margin-top: 8px; font-size: .5em; line-height: 1.15; color: var(--on-dark-muted); }
.bt-facts { margin: 0 0 12px; color: var(--on-dark-muted); font-size: 15px; }
.bt-head .rk-icons { margin: 18px 0; }
.bt-head .rk-icons svg { color: var(--lime); }
.bt-head .rk-icons small { color: var(--on-dark-muted); }
.bt-buy { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; padding: 14px 16px; border-radius: 12px; background: var(--lime); color: var(--ink); }
.bt-buy strong { font-family: var(--font-display); font-weight: 800; font-size: 34px; line-height: 1; }
.bt-answer { margin: 18px 0 0; font-size: 16px; line-height: 1.6; color: var(--on-dark); max-width: 62ch; }
.bt-body { padding-top: 8px; padding-bottom: 56px; max-width: 1040px; }
.bt-sec { padding: 30px 0; border-bottom: 1px solid var(--line); }
.bt-sec h2 { font-size: clamp(24px, 3vw, 32px); margin: 0 0 16px; }
.bt-stats { margin: 0; }
.bt-charts { display: grid; gap: 14px; margin-top: 16px; }
@media (min-width: 760px) { .bt-charts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.bt-charts figure { margin: 0; padding: 12px 12px 6px; background: var(--white); border: 1px solid var(--line); }
.bt-charts figcaption { margin: 0 0 6px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
.bt-chart { display: block; width: 100%; height: auto; }
.bt-shops tr.is-lead td:first-child b::after { content: "Best price"; margin-left: 8px; padding: 2px 8px; border-radius: 999px; background: var(--lime); font-size: 11px; font-weight: 700; }
.bt-sims { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.bt-sim { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 12px; align-items: center; padding: 10px; background: var(--white); border: 1px solid var(--line); border-radius: 10px; color: var(--text); text-decoration: none; }
.bt-sim:hover { border-color: var(--ink); }
.bt-sim-img { display: block; width: 72px; height: 90px; object-fit: contain; }
.bt-sim b { display: block; font-size: 15px; }
.bt-sim span { display: block; font-size: 13px; color: var(--text-muted); }
.bt-sim small { display: block; margin-top: 4px; font-size: 12px; }
.bt-more { margin: 14px 0 0; font-size: 14px; }
.bt-brandline { margin: 30px 0 0; padding: 16px 18px; border-radius: 12px; background: var(--ink); color: var(--on-dark); }
.bt-brandline a { color: var(--lime); font-weight: 600; }
.dp-pp { margin: 0 0 12px; font-size: 14px; font-weight: 600; }
.rk-card--row .rk-acts { gap: 4px 14px; align-items: center; }
.rk-card--row .rk-btn--buy { min-height: 34px; padding: 0 13px; }
.rk-card--row .rk-btn:not(.rk-btn--buy) { min-height: 30px; padding: 0; border: 0; background: none; font-size: 12.5px; text-decoration: underline; text-underline-offset: 3px; }
.rk-card--row .rk-price { padding: 7px 10px; }
.rk-notes { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--text-muted); }
.rk-notes b { display: block; margin-bottom: 2px; font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--text); }

/* ---------- Shelfdrop buy box: "Available from" on cards, bottle pages and the drawer ---------- */
.rk-sd { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.rk-sd-k { flex: 0 0 100%; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; }
.rk-sd-row { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.rk-sd-row b { font-family: var(--font-display); font-weight: 800; font-size: 15px; }
.rk-sd .rk-btn--buy { flex: none; }
.rk-also { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--text-muted); }
.rk-also span { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; }
.rk-also a { color: var(--text); font-weight: 600; text-decoration: none; white-space: nowrap; }
.rk-also a:hover { text-decoration: underline; }
.rk-sold { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); }
.bt-buy > div { display: grid; gap: 4px; }
.bt-head .rk-also { margin-top: 10px; color: var(--on-dark-muted); }
.bt-head .rk-also a { color: var(--on-dark); }
.bt-shops tr.is-sd td { background: var(--lime); padding-left: 10px; padding-right: 10px; }
.bt-shops tr.is-sd small { color: var(--ink); opacity: .75; }
.dp-sd { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; margin: 0 0 16px; border-radius: 10px; background: var(--lime); }
.dp-sd span { display: block; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; }
.dp-sd b { font-family: var(--font-display); font-weight: 800; font-size: 15px; margin-right: 8px; }
.dp-sd strong { font-family: var(--font-display); font-weight: 800; font-size: 22px; }
.od-item { display: grid; grid-template-columns: 64px 1fr; gap: 14px; align-items: center; }
.od-item img { width: 64px; height: 80px; object-fit: contain; background: #fff; border-radius: 8px; }
.od-item h2 { font-size: 22px !important; text-transform: none !important; line-height: 1.1 !important; }
.od-item p b { color: var(--lime); font-size: 18px; }

/* ---------- Rankings (/data/rankings/...) and drinks groups (/data/groups/...) ---------- */
.rk-why { margin: 0; padding: 6px 10px; border-left: 3px solid var(--lime-deep); background: var(--paper); font-size: 13px; font-weight: 600; line-height: 1.4; }
.rk-cats { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.rk-cat { padding: 16px 18px; background: var(--white); border: 1px solid var(--line); border-radius: 12px; }
.rk-cat h3 { margin: 0 0 8px; font-size: 18px; }
.rk-cat h3 a { color: var(--text); text-decoration: none; }
.rk-cat ol { margin: 0; padding-left: 20px; display: grid; gap: 6px; font-size: 14px; line-height: 1.4; }
.rk-cat ol a { color: var(--text); font-weight: 600; text-decoration: none; }
.rk-cat ol a:hover { text-decoration: underline; }
.rk-cat small { display: block; color: var(--text-muted); font-size: 12px; }
.rk-links, .rk-hubs { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }
.rk-links a, .rk-hub { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 18px; background: var(--white); border: 1px solid var(--line); border-radius: 12px; color: var(--text); font-family: var(--font-display); font-weight: 800; font-size: 18px; text-decoration: none; }
.rk-links a:hover, .rk-hub:hover { border-color: var(--ink); background: var(--lime); }
.rk-hub { min-height: 96px; font-size: 22px; }
.gp-table td small { display: block; color: var(--text-muted); font-size: 12.5px; margin-top: 2px; }
.gp-table td a { display: block; color: var(--text); text-decoration: none; }  /* the whole cell opens the group */
.gp-table td a b, .tk-table td a b { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); }
.gp-table .gp-go { margin-left: 6px; font-style: normal; font-weight: 700; }  /* outside the <b>: no underline, and no line break between the name and the arrow */
.gp-table td a:hover b, .tk-table td a:hover b { text-decoration-color: currentColor; }
.rm-bar { position: relative; display: block; width: 76px; height: 6px; margin-top: 7px; border-radius: 3px; background: linear-gradient(90deg, #cf4b32, #e9b23a 50%, #3f9a45); }
.rm-bar i { position: absolute; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--white); border: 2.5px solid var(--ink); }
.rm-key { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; margin: 22px 0 18px; }
.rm-scale { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.rm-scale .rm-bar { width: 110px; margin: 0; }
.rm-key p { flex: 1 1 320px; margin: 0; font-size: 13px; line-height: 1.5; color: var(--text-muted); }
.rm-key p b { color: var(--text); }
.ex-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }
.ex-card { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 12px; align-items: center; padding: 10px 12px; background: var(--white); border: 1px solid var(--line); border-radius: 12px; color: var(--text); text-decoration: none; }
.ex-card:hover { border-color: var(--ink); }
.ex-img { display: block; width: 48px; height: 60px; object-fit: contain; }
.ex-card b { display: block; font-family: var(--font-display); font-weight: 800; font-size: 16px; line-height: 1.15; }
.ex-card small { display: block; margin-top: 3px; font-size: 12px; color: var(--text-muted); }
.sr-potw { max-width: 520px; }
.sr-archive { display: flex; flex-wrap: wrap; gap: 8px; }
.sr-archive a { padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--white); color: var(--text); font-size: 14px; font-weight: 600; text-decoration: none; }
.sr-archive a:hover { border-color: var(--ink); }
.bt-embed summary { cursor: pointer; font-weight: 600; font-size: 14px; }
.bt-embed textarea { width: 100%; margin-top: 8px; padding: 10px; font-family: var(--font-mono); font-size: 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--white); resize: vertical; }

/* ---------- Buy box: best price first, then up to four places to buy, cheapest first ---------- */
.rk-opts { flex: 0 0 100%; min-width: 0; list-style: none; margin: 2px 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; }  /* one row per retailer: the name, then its price on the right */
.rk-opts li { min-width: 0; }
.rk-opts a { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 6px 10px; border-radius: 6px; background: rgba(10,15,12,.07); color: var(--ink); font-size: 13px; text-decoration: none; }
.rk-opts a:hover { background: rgba(10,15,12,.14); }
.rk-opts span { min-width: 0; overflow-wrap: anywhere; }
.rk-opts b { font-weight: 700; white-space: nowrap; }
.bt-buy .rk-opts { flex-basis: 100%; }
.dp-sd .rk-opts { flex-basis: 100%; }
.rk-sd > .rk-btn--buy { flex: none; }
.rk-sd--off { background: var(--cream); }
.cmp-buy { display: grid; gap: 6px; }
.cmp-buy .rk-sd-k { display: none; }
.cmp-table thead a { display: grid; justify-items: start; gap: 4px; color: var(--text); text-decoration: none; }
.cmp-table thead span { font-size: 12.5px; font-weight: 400; color: var(--text-muted); }
.cmp-img { display: block; width: 72px; height: 90px; object-fit: contain; }
.cmp-table th[scope], .cmp-table tbody th { text-align: left; font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); white-space: nowrap; }

/* ---------- Drawer: at a glance (tasting notes, origin, parent company, UK distributor) ---------- */
.dp-glance { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 0 0 14px; background: var(--line); border: 1px solid var(--line); }
@media (min-width: 560px) { .dp-glance { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.dp-glance div { background: var(--white); padding: 12px; min-width: 0; }
.dp-glance dt { margin: 0 0 4px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
.dp-glance dd { margin: 0; font-size: 13.5px; line-height: 1.4; font-weight: 600; overflow-wrap: anywhere; }
.dp-glance dd a { color: var(--text); }
.dp-pp .rk-btn--buy { min-height: 42px; padding: 0 18px; font-size: 14px; }
.rk-sd .rk-btn--buy { max-width: 100%; white-space: normal; line-height: 1.2; }
.rk-body > * { min-width: 0; max-width: 100%; }
.rk-sd { min-width: 0; }
.rk-sd-row { flex: 1 1 auto; flex-wrap: wrap; }
.rk-sd-row b { overflow-wrap: anywhere; }

/* ---------- Shopper pages: deals, Black Friday, price bands, Christmas gifts (tools/build_shop.py) ---------- */
.sh-group { margin-top: clamp(40px, 5vw, 64px); scroll-margin-top: 96px; }
.sh-group-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 18px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.sh-group-head h2 { margin: 0; font-size: clamp(26px, 3.4vw, 40px); line-height: 1.05; }
.sh-group-head p { margin: 0; font-size: 14px; line-height: 1.45; color: var(--text-muted); }
.sh-group-head a { color: var(--text); font-weight: 600; white-space: nowrap; }
.sh-group .si-more-grid { margin-top: 16px; }
.sh-note { border-left-color: var(--ink); }
.si-hero .dp-kpis { margin: 28px 0 0; }
.rk-deal { margin: 0; padding: 0; background: none; color: var(--text-muted); font-size: 12.5px; line-height: 1.4; }  /* a quiet line, never a red banner (George, 25 Oct) */
.rk-deal b { font-weight: 700; }
.sh-links { margin: 24px 0 0; }

/* ---------- Reviewers' likes and dislikes; the submissions page ---------- */
.bt-revs { display: grid; gap: 14px; }
@media (min-width: 700px) { .bt-revs { grid-template-columns: 1fr 1fr; } }
.bt-revs h3 { margin: 0 0 8px; font-size: 16px; }
.bt-rev { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 14px; line-height: 1.45; }
.bt-rev li { display: flex; gap: 8px; align-items: baseline; }
.bt-rev li span { flex: none; font-weight: 800; }
.bt-rev .is-up span { color: #2f5a3a; }
.bt-rev .is-down span { color: #8a2d13; }
.bt-none { margin: 0; color: var(--text-muted); font-size: 14px; }
.sb-wrap { display: grid; gap: 32px; }
@media (min-width: 960px) { .sb-wrap { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: start; } }
.sb-form { display: grid; gap: 14px; padding: 24px; background: var(--white); border: 1px solid var(--line); border-radius: 16px; }
.sb-form label, .sb-form legend { display: grid; gap: 6px; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.sb-form input:not([type=checkbox]), .sb-form select, .sb-form textarea { width: 100%; font: 16px/1.4 var(--font-body); letter-spacing: 0; text-transform: none; color: var(--text); background: var(--paper); border: 1px solid var(--line); border-radius: 8px; padding: 11px 12px; }
.sb-form fieldset { margin: 0; padding: 14px; border: 1px dashed var(--line); border-radius: 12px; display: grid; gap: 12px; }
.sb-form fieldset[hidden] { display: none; }
.sb-row { display: grid; gap: 14px; }
@media (min-width: 600px) { .sb-row { grid-template-columns: 1fr 1fr; } }
.sb-form .sb-check { display: flex; align-items: center; gap: 10px; font-family: var(--font-body); font-size: 14px; letter-spacing: 0; text-transform: none; color: var(--text); }
.sb-status { margin: 0; min-height: 1.4em; font-size: 14px; }
.sb-status.is-bad { color: #8a2d13; }
.sb-fine { color: var(--text-muted); font-size: 12px; }
.sb-aside { padding: 22px; border-radius: 16px; background: var(--ink); color: var(--on-dark); }
.sb-aside h2 { margin: 0 0 12px; font-size: 24px; color: var(--on-dark); }
.sb-aside ol { margin: 0; padding-left: 20px; display: grid; gap: 8px; color: var(--on-dark-muted); }
.rk-was { flex: 0 0 100%; font-size: 12.5px; font-weight: 600; color: var(--ink); }
.rk-was s { font-weight: 500; }
.dp-sd .rk-was { display: block; }
.rk-also-k { flex: 0 0 100%; margin-top: 4px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; opacity: .75; }
.rk-opts b { flex: none; font-size: 13px; }
.dir { display: grid; gap: 34px; }
.dir-sec h2 { margin: 0 0 12px; font-size: clamp(22px, 2.6vw, 30px); }
.dir-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.dir-chips a { padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--white); color: var(--text); font-size: 14px; font-weight: 600; text-decoration: none; }
.dir-chips a:hover { border-color: var(--ink); background: var(--lime); }
.mg-col--lists .mg-sub { margin-top: 12px; }
.mg-col--lists .mg-sub:first-of-type { margin-top: 0; }
.mg-lists { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.mg-lists a { font-size: 13.5px; font-weight: 600; color: var(--on-dark); text-decoration: none; padding: 3px 0; }
.mg-lists a:hover { color: var(--lime); }
/* Menus, every section (menus-full, 25 Oct): desktop mega = top 50s column + three section columns; phone = one collapsible block per section */
.mega-in { grid-template-columns: minmax(0, 1.55fr) repeat(3, minmax(0, 1fr)); gap: 0 24px; max-height: calc(100vh - 72px); max-height: calc(100dvh - 72px); overflow-y: auto; overscroll-behavior: contain; }
.mega-in > .mg-col + .mg-col { padding-left: 24px; }
.mega-in .mg-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mg-col--secs { display: grid; gap: 18px; align-content: start; }
.mg-sec .mg-h { margin: 0 0 6px; }
.mega .mg-sec .mg-lists { gap: 0 14px; }
.mega .mg-sec .mg-lists a { font-size: 13px; line-height: 1.25; padding: 4px 0; white-space: nowrap; }
.mega .mg-sec .mg-lists a.mg-all { color: var(--lime); }
.mega .mg-sec .mg-lists a.mg-all:hover, .mega .mg-sec .mg-lists a.mg-all:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
.mega a:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; border-radius: 4px; }
@media (min-width: 1440px) { .mega-in .mg-cats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1180px) {
  .mega-in { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mega-in > .mg-col--cats { grid-column: 1 / -1; padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px solid rgba(243,245,239,.08); }
  .mega-in .mg-cats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .mega-in > .mg-col--cats + .mg-col { padding-left: 0; border-left: 0; }
}
.mobile-nav details.mn-sec { border-bottom: 1px solid var(--line-dark); }
.mobile-nav .mn-sec > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 10px 0; cursor: pointer; font-family: var(--font-display); font-stretch: 75%; font-size: 28px; font-weight: 800; line-height: 1; text-transform: uppercase; color: var(--on-dark); -webkit-tap-highlight-color: transparent; }
.mobile-nav .mn-sec > summary::-webkit-details-marker { display: none; }
.mobile-nav .mn-sec > summary::after { content: ""; flex: none; width: 9px; height: 9px; margin: 0 6px 4px 0; border-right: 2px solid var(--lime); border-bottom: 2px solid var(--lime); transform: rotate(45deg); transition: transform .2s ease, margin .2s ease; }
.mobile-nav .mn-sec[open] > summary { color: var(--lime); }
.mobile-nav .mn-sec[open] > summary::after { transform: rotate(-135deg); margin-bottom: -4px; }
.mobile-nav .mn-sec > summary:focus-visible, .mobile-nav a:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; border-radius: 4px; }
.mobile-nav .mn-sec .mn-group { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; padding: 0 0 14px; border-bottom: 0; }
.mobile-nav .mn-sec .mn-group a { display: flex; align-items: center; min-height: 44px; padding: 4px 0; font-stretch: 85%; font-size: 17px; font-weight: 700; line-height: 1.15; overflow-wrap: anywhere; }
.mobile-nav .mn-sec a.mn-all { grid-column: 1 / -1; color: var(--lime); }
.mobile-nav .mn-sec .mobile-sub { padding: 0 0 16px; border-bottom: 0; }
.mobile-nav .mn-sec .mobile-sub a { min-height: 44px; }
.mobile-nav .mn-sec .mobile-sub a.mn-all { border-color: rgba(var(--lime-rgb), .5); color: var(--lime); }
/* room for the My shelf heart (.sf-nav, assets/shelf.js) at every width: the laptop heart (--d) shows whenever the header buttons do,
   the phone one (--m) only while the menu button does. To fit it, Contact (the same page as the CTA) leaves Shelfdrop.com's laptop
   nav below 1280px, and the hub's "← Shelfdrop.com" moves into its mega menu below 1400px. */
@media (min-width: 1024px) {
  .site-header:not(.si-site-header) .wrap > .sf-nav--m { display: none; }
  .site-header:not(.si-site-header) .header-cta > .sf-nav--d { display: inline-grid; }
}
@media (min-width: 1024px) and (max-width: 1279px) { .site-header:not(.si-site-header) .nav > a[href="/contact"] { display: none; } }
@media (min-width: 1100px) {
  .si-site-header .wrap > .sf-nav--m { display: none; }
  .si-site-header .header-cta > .sf-nav--d { display: inline-grid; }
}
@media (max-width: 1399px) { .si-site-header .header-cta .si-exit { display: none; } }
.mobile-nav a.mn-hub { display: flex; align-items: center; min-height: 44px; padding: 20px 0 4px; border-bottom: 0; font-family: var(--font-mono); font-stretch: normal; font-size: 12px; font-weight: 500; letter-spacing: .12em; color: var(--lime); }
/* Drink Finder */
.fd-tabs { display: inline-flex; gap: 4px; padding: 4px; margin: 0 0 18px; border-radius: 999px; background: var(--cream); }
.fd-tabs button { padding: 10px 18px; border: 0; border-radius: 999px; background: transparent; font: 700 14px/1 var(--font-body); color: var(--text); cursor: pointer; }
.fd-tabs button.is-on { background: var(--ink); color: var(--lime); }
.fd-controls { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: end; margin-bottom: 16px; }
.fd-controls label, .fd-pick { display: grid; gap: 6px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.fd-controls select, .fd-pick input { font: 16px/1.3 var(--font-body); letter-spacing: 0; text-transform: none; color: var(--text); background: var(--white); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; min-width: 180px; }
.fd-pick input { width: min(560px, 100%); }
.fd-controls .fd-check { display: flex; align-items: center; gap: 8px; font-family: var(--font-body); font-size: 14px; letter-spacing: 0; text-transform: none; color: var(--text); padding-bottom: 10px; }
.fd-flavs { display: grid; gap: 10px; margin-bottom: 22px; }
.fd-fg { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.fd-fg > span { width: 130px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.fd-chip { padding: 7px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--white); font: 600 13px/1 var(--font-body); color: var(--text); cursor: pointer; }
.fd-chip[aria-pressed="true"] { background: var(--ink); color: var(--lime); border-color: var(--ink); }
.fd-count, .fd-hint, .fd-load { margin: 0 0 12px; color: var(--text-muted); font-size: 14px; }
.fd-h { margin: 24px 0 12px; font-size: 22px; }
.fd-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.fd-card { display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: 12px; padding: 12px; background: var(--white); border: 1px solid var(--line); border-radius: 12px; }
.fd-media img { display: block; width: 80px; height: 100px; object-fit: contain; }
.fd-body { display: grid; gap: 6px; align-content: start; min-width: 0; }
.fd-name { color: var(--text); text-decoration: none; display: grid; }
.fd-name b { font-family: var(--font-display); font-weight: 800; font-size: 16px; }
.fd-name span { font-size: 13px; color: var(--text-muted); }
.fd-meta { font-size: 12px; color: var(--text-muted); }
.fd-why { margin: 0; font-size: 12.5px; line-height: 1.4; }
.fd-why b { color: #2f5a3a; }
.fd-buy { justify-self: start; min-height: 32px; font-size: 12.5px; max-width: 100%; white-space: normal; }
.fd-me { margin-bottom: 8px; max-width: 520px; }
@media (max-width: 600px) { .fd-fg > span { width: 100%; } .fd-controls select { min-width: 0; width: 100%; } .fd-controls label { flex: 1 1 140px; } }

/* ---------- Hub: search the shelf, and the two doors ---------- */
.hs { position: relative; margin: 26px 0 0; max-width: 780px; }
.hs > svg { position: absolute; left: 18px; top: 50%; width: 20px; height: 20px; transform: translateY(-50%); color: var(--ink); pointer-events: none; }
.hs input { width: 100%; min-height: 60px; padding: 0 20px 0 50px; border: 0; border-radius: 999px; background: var(--white); color: var(--ink); font: 500 17px/1.2 var(--font-body); box-shadow: 0 0 0 3px rgba(var(--lime-rgb), .35); }
.hs input:focus { outline: none; box-shadow: 0 0 0 3px var(--lime); }
.hs-out { position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + 8px); max-height: min(70vh, 560px); overflow: auto; padding: 8px; background: var(--white); color: var(--text); border-radius: 16px; box-shadow: 0 24px 60px -20px rgba(0,0,0,.5); }
.hs-k { margin: 8px 10px 4px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
.hs-row { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 10px; color: var(--text); text-decoration: none; }
.hs-row img { flex: none; width: 34px; height: 42px; object-fit: contain; }
.hs-row span { display: grid; font-size: 14.5px; line-height: 1.3; min-width: 0; }
.hs-row small { font-size: 12px; color: var(--text-muted); }
.hs-row:hover, .hs-row.is-sel { background: var(--cream); }
.hs-row--page { padding-left: 14px; }
.hs-none, .hs-all { display: block; margin: 8px 10px; font-size: 13.5px; color: var(--text-muted); }
.hs-all { color: var(--text); font-weight: 600; }
.hs-doors { display: grid; gap: 12px; margin: 18px 0 0; max-width: 980px; }
@media (min-width: 820px) { .hs-doors { grid-template-columns: 1fr 1fr; } }
.hs-door { padding: 14px 16px; border: 1px solid rgba(var(--lime-rgb), .25); border-radius: 14px; background: rgba(255,255,255,.04); }
.hs-door .eyebrow { color: var(--lime); }
.hs-door > div { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 8px; }
.hs-door a { color: var(--on-dark); font-size: 14.5px; font-weight: 600; text-decoration: none; }
.hs-door a:hover { color: var(--lime); }

/* ---------- Cocktails: the hub and the recipe block ---------- */
.ck-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); }
.ck-card { display: grid; gap: 10px; align-content: start; padding: 18px; background: var(--white); border: 1px solid var(--line); border-radius: 16px; }
.ck-head { display: grid; gap: 2px; color: var(--text); text-decoration: none; }
.ck-head b { font-family: var(--font-display); font-weight: 800; font-size: 24px; line-height: 1.05; }
.ck-head span { font-size: 13px; color: var(--text-muted); }
.ck-method { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--text-muted); }
.ck-k { margin: 4px 0 0; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
.ck-picks { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ck-picks a { display: flex; gap: 10px; align-items: center; color: var(--text); text-decoration: none; font-size: 13.5px; line-height: 1.3; }
.ck-picks a:hover b { text-decoration: underline; }
.ck-pimg { flex: none; width: 32px; height: 40px; object-fit: contain; }
.ck-picks small { display: block; font-size: 11.5px; color: var(--text-muted); }
.ck-card > .rk-btn { justify-self: start; }
.ck-wrap { display: grid; gap: 24px; }
@media (min-width: 860px) { .ck-wrap { grid-template-columns: 1.2fr 1fr; } }
.ck-recipe ul { margin: 12px 0; padding-left: 20px; display: grid; gap: 6px; font-size: 16px; }
.ck-recipe p, .ck-why p { font-size: 15px; line-height: 1.6; }

/* ---------- Drink Finder, redesigned: from a bottle you love first ---------- */
.fd-love { padding: clamp(18px, 3vw, 28px); border-radius: 20px; background: var(--ink); color: var(--on-dark); }
.fd-step { margin: 0 0 10px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--lime); }
.fd-search { position: relative; max-width: 760px; }
.fd-search > svg { position: absolute; left: 18px; top: 50%; width: 20px; height: 20px; transform: translateY(-50%); color: var(--ink); pointer-events: none; }
.fd-search input { width: 100%; min-height: 58px; padding: 0 18px 0 50px; border: 0; border-radius: 999px; background: var(--white); color: var(--ink); font: 500 17px/1.2 var(--font-body); }
.fd-search input:focus { outline: 3px solid var(--lime); outline-offset: 2px; }
.fd-sug { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 8px); padding: 6px; background: var(--white); border-radius: 16px; box-shadow: 0 24px 60px -20px rgba(0,0,0,.5); max-height: 60vh; overflow: auto; }
.fd-sg { display: flex; width: 100%; align-items: center; gap: 12px; padding: 8px 10px; border: 0; border-radius: 10px; background: none; text-align: left; font: 14.5px/1.3 var(--font-body); color: var(--text); cursor: pointer; }
.fd-sg img { flex: none; width: 34px; height: 42px; object-fit: contain; }
.fd-sg span { display: grid; min-width: 0; }
.fd-sg small { font-size: 12px; color: var(--text-muted); }
.fd-sg:hover, .fd-sg.is-sel { background: var(--cream); }
.fd-none { margin: 8px 10px; font-size: 14px; color: var(--text-muted); }
.fd-try { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 14px 0 0; }
.fd-try > span { font-size: 13px; color: var(--on-dark-muted); margin-right: 2px; }
.fd-try button { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px 5px 5px; border: 1px solid rgba(var(--lime-rgb), .3); border-radius: 999px; background: rgba(255,255,255,.06); color: var(--on-dark); font: 600 13px/1 var(--font-body); cursor: pointer; }
.fd-try button:hover { border-color: var(--lime); }
.fd-try img { width: 24px; height: 24px; object-fit: contain; background: #fff; border-radius: 50%; }
.fd-love .fd-out:not(:empty) { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--line-dark); }
.fd-because { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 16px; align-items: center; margin-bottom: 8px; }
.fd-because img { width: 96px; height: 120px; object-fit: contain; background: #fff; border-radius: 12px; padding: 6px; }
.fd-because h3 { margin: 0; font-size: clamp(22px, 3vw, 30px); color: var(--on-dark); line-height: 1.05; }
.fd-because h3 span { display: block; font-size: .6em; color: var(--on-dark-muted); margin-top: 4px; }
.fd-notes { margin: 8px 0 6px; color: var(--on-dark-muted); font-size: 14px; }
.fd-because a { color: var(--lime); font-weight: 600; font-size: 14px; }
.fd-love .fd-h { color: var(--on-dark); }
.fd-love .fd-hint { color: var(--on-dark-muted); }
.fd-match { position: relative; height: 18px; border-radius: 999px; background: var(--cream); overflow: hidden; }
.fd-match i { position: absolute; inset: 0 auto 0 0; background: var(--lime); border-radius: 999px; }
.fd-match b { position: relative; display: block; padding: 0 8px; font-size: 11px; line-height: 18px; color: var(--ink); }
.fd-build { margin-top: 22px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 20px; background: var(--white); }
.fd-build > summary { list-style: none; cursor: pointer; display: grid; gap: 2px; }
.fd-build > summary::-webkit-details-marker { display: none; }
.fd-build > summary .fd-step { color: var(--text); margin: 0; }
.fd-build > summary small { font-size: 14px; color: var(--text-muted); }
.fd-build[open] > summary { margin-bottom: 16px; }
.fd-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 10px; }
.fd-lab { width: 86px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.fd-pill { padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); font: 600 13px/1 var(--font-body); color: var(--text); cursor: pointer; }
.fd-pill.is-on { background: var(--ink); color: var(--lime); border-color: var(--ink); }
.fd-flavs { display: grid; gap: 8px; margin: 14px 0 18px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.fd-fg { padding: 12px; border-radius: 14px; background: var(--paper); border-left: 4px solid var(--tone, var(--line)); }
.fd-fg > span { display: block; margin-bottom: 8px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); width: auto; }
.fd-fg > div { display: flex; flex-wrap: wrap; gap: 6px; }
.fd-tone--sweet { --tone: #e0a84a; } .fd-tone--fruit { --tone: #d9534f; } .fd-tone--spice { --tone: #b5651d; } .fd-tone--smoke { --tone: #5b4636; } .fd-tone--herb { --tone: #5b8a4a; }
.fd-tone--nut { --tone: #a47148; } .fd-tone--sea { --tone: #3b7ea1; } .fd-tone--tex { --tone: #c9b79c; } .fd-tone--earth { --tone: #7a6a3a; }
.fd-chip { background: var(--white); }
.fd-chip[aria-pressed="true"] { background: var(--ink); color: var(--lime); border-color: var(--ink); }
@media (max-width: 600px) { .fd-lab { width: 100%; } .fd-because { grid-template-columns: 72px minmax(0, 1fr); } .fd-because img { width: 72px; height: 90px; } }
@media (max-width: 760px) { .fd-sug, .hs-out { max-height: 46vh; } }

/* ==== hub first screen, redesigned for trust (25 Oct) ==== */
.si-lockrow { gap: 8px 16px; }
.si-crumbs { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13.5px; color: var(--on-dark-muted); }
.si-crumbs a { color: var(--on-dark); font-weight: 600; text-decoration: none; }
.si-crumbs a:hover { color: var(--lime); }
.si-live { font-family: inherit; font-size: 13px; letter-spacing: 0; text-transform: none; }
.si-hero--hub h1 { max-width: 16ch; }
@media (max-width: 600px) { .si-hero--hub h1 { font-size: clamp(36px, 10.5vw, 48px); line-height: 1; } .si-hero--hub .lede { font-size: 16.5px; } }
.si-hero--hub .lede { max-width: 60ch; }
.hs-hint { margin: 10px 4px 0; font-size: 13.5px; color: var(--on-dark-muted); }
.hs-hint a { color: var(--on-dark); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(var(--lime-rgb), .5); }
.hs-quick { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 0; }
.hs-quick a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px; border: 1px solid rgba(255,255,255,.28); color: #fff; font: 600 13px/1 var(--mono, ui-monospace, monospace); letter-spacing: .06em; text-transform: uppercase; text-decoration: none; }
.hs-quick a b { color: var(--lime); font-weight: 600; font-variant-numeric: tabular-nums; }
.hs-quick a:hover, .hs-quick a:focus-visible { border-color: var(--lime); }
.hs-trust { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 18px 0 0; padding: 0; font-size: 14px; color: var(--on-dark); }
.hs-trust li { position: relative; padding-left: 24px; }
.hs-trust li::before { content: ""; position: absolute; left: 0; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--lime) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4.5 8.2 2.3 2.3 4.7-5' fill='none' stroke='%23111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat; }
.hs-trust a { color: var(--lime); }
.hs-ones-wrap { margin: 26px 0 0; }
.hs-ones-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 10px; }
.hs-ones-head a { color: var(--on-dark); font-size: 13.5px; font-weight: 600; text-decoration: none; }
.hs-ones-head a:hover { color: var(--lime); }
.hs-ones { display: grid; grid-auto-flow: column; grid-auto-columns: 152px; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; margin: 0 calc(-1 * var(--gutter)); padding-left: var(--gutter); padding-right: var(--gutter); scroll-padding-left: var(--gutter); scrollbar-width: thin; }
.hs-one { scroll-snap-align: start; display: flex; flex-direction: column; gap: 6px; padding: 10px; border-radius: 14px; background: #fff; color: var(--ink); text-decoration: none; min-height: 236px; box-shadow: 0 1px 0 rgba(0,0,0,.2); transition: transform .15s ease; }
.hs-one:hover { transform: translateY(-2px); }
.hs-one-k { align-self: flex-start; font-size: 11px; font-weight: 700; letter-spacing: .02em; padding: 3px 8px; border-radius: 99px; background: var(--ink); color: var(--lime); }
.hs-one-img { width: 100%; height: 112px; object-fit: contain; }
.hs-one-n { font-size: 13px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.hs-one-p { margin-top: auto; font-size: 12.5px; color: #555; }
.hs-one-p b { font-size: 15px; color: var(--ink); }
.hs-door { padding: 16px; border-color: rgba(255,255,255,.12); }
.hs-tiles { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px !important; margin-top: 10px; }
@media (min-width: 560px) { .hs-tiles { grid-template-columns: repeat(3, 1fr); } }
.hs-door a.hs-tile { display: grid; grid-template-columns: 34px 1fr; column-gap: 10px; align-items: center; padding: 12px; min-height: 64px; border-radius: 12px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); color: var(--on-dark); transition: border-color .15s ease, background .15s ease; }
.hs-door a.hs-tile:hover { border-color: var(--lime); background: rgba(var(--lime-rgb), .08); color: var(--on-dark); }
.hs-tile-ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: rgba(var(--lime-rgb), .14); color: var(--lime); }
.hs-tile-ic svg { width: 19px; height: 19px; }
.hs-tile-t { font-size: 14.5px; font-weight: 700; line-height: 1.2; }
.hs-tile-s { font-size: 12px; font-weight: 400; line-height: 1.3; color: var(--on-dark-muted); }
/* the two doors (tools/build_data.py entry_doors): a name and, when there is one, a count from this build; the whole tile is the link */
.hs-tile-x { display: grid; gap: 3px; min-width: 0; }
.hs-door a.hs-tile { text-decoration: none; }
.hs-doors--light { margin: 0; max-width: none; }
.hs-doors--light .hs-door { background: var(--white); border: 1px solid var(--line); }
.hs-doors--light .hs-door .eyebrow { color: var(--text-muted); }
.hs-doors--light .hs-door a.hs-tile { background: var(--paper); border-color: var(--line); color: var(--text); }
.hs-doors--light .hs-door a.hs-tile:hover { background: var(--white); border-color: var(--ink); color: var(--text); }
.hs-doors--light .hs-tile-ic { background: var(--lime); color: var(--ink); }
.hs-doors--light .hs-tile-s { color: var(--text-muted); }
/* Shop, Track, Compare and Shopper tools (entry_doors): stacked doors, the first three in 4 columns on desktop and 2 on phones; chip tiles span two */
.hs-doors { grid-template-columns: 1fr !important; }
.hs-tiles--4 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
@media (min-width: 900px) { .hs-tiles--4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } }
.hs-tile-t { text-wrap: balance; overflow-wrap: normal; hyphens: none; }
.hs-tile--chips { grid-column: span 2; display: grid; gap: 10px; align-content: start; padding: 12px; border-radius: 12px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); }
.hs-door a.hs-tile-main { display: grid; grid-template-columns: 34px 1fr; column-gap: 10px; align-items: center; min-height: 44px; color: var(--on-dark); text-decoration: none; }
.hs-door a.hs-tile-main:hover .hs-tile-t { color: var(--lime); }
.hs-door .hs-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.hs-door .hs-chips a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; color: var(--on-dark); font-size: 13.5px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.hs-door .hs-chips a:hover { border-color: var(--lime); color: var(--lime); }
@media (max-width: 559px) {
  .hs-door a.hs-tile { grid-template-columns: 1fr; row-gap: 8px; align-content: start; align-items: start; }
  .hs-door .hs-chips a { padding: 0 12px; font-size: 13px; }
}
.hs-doors--light .hs-tile--chips { background: var(--paper); border-color: var(--line); }
.hs-doors--light .hs-door a.hs-tile-main { color: var(--text); }
.hs-doors--light .hs-door a.hs-tile-main:hover .hs-tile-t { color: var(--text); text-decoration: underline; }
.hs-doors--light .hs-door .hs-chips a { background: var(--white); border-color: var(--line); color: var(--text); }
.hs-doors--light .hs-door .hs-chips a:hover { border-color: var(--ink); color: var(--text); }
.hs-trade { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 0 18px; }
@media (min-width: 560px) { .hs-trade { grid-template-columns: 1fr 1fr; } }
.hs-trade a { display: flex; justify-content: space-between; padding: 11px 2px; border-bottom: 1px solid rgba(255,255,255,.08); font-size: 14.5px; }
.hs-trade-cta { display: inline-block; margin-top: 12px; color: var(--lime) !important; font-size: 14px; }
/* ---------- Drinks glossary, and the Irish and Japanese whisky pages (tools/build_glossary.py) ---------- */
.gl-prose h2 { font-size: clamp(26px, 3.2vw, 40px); margin: 1.6em 0 .45em; }
.gl-prose .si-answer { margin-bottom: 1.4em; }
.gl-prose .si-answer p { font-size: 18px; }
.gl-prose > .eyebrow + h2 { margin-top: 0; }
.gl-links { grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.gl-links a { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 6px; }
.gl-links a small { font-family: var(--font-body); font-weight: 400; font-size: 14px; line-height: 1.45; color: var(--text-muted); }
.gl-links a:hover small { color: var(--ink); }
.gl-back { margin-top: 12px; }
.gl-sub { margin: clamp(32px, 4vw, 48px) 0 12px; }
.gl-letter { scroll-margin-top: 96px; margin: 0 0 clamp(28px, 4vw, 44px); }
.gl-letter > h2 { font-size: clamp(36px, 4.4vw, 60px); margin: 0 0 14px; }
.gl-groups { display: grid; gap: 22px 36px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.gl-groups h3 { margin: 0 0 8px; font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
.gl-groups p { margin: 0; font-size: 15.5px; line-height: 1.75; }
.gl-groups a { color: var(--forest-3); text-underline-offset: 3px; }
.gl-az a { min-width: 34px; justify-content: center; }
/* ==== trackers: out of stock, price wars, new launches (tools/build_trackers.py) ==== */
.tk-line, .tk-line--oos, .tk-line--cut, .tk-line--prem, .tk-line--back, .tk-line--new { background: none; color: var(--text-muted); }
.tk-empty { margin: 16px 0 0; padding: 16px 18px; background: var(--white); border: 1px dashed var(--line); border-radius: 12px; color: var(--text-muted); font-size: 15px; }
.tk-more { margin: 24px 0 0; font-size: 15px; } .tk-more a { color: var(--text); font-weight: 600; }
.tk-xlink { margin-top: clamp(32px, 4vw, 48px); } .tk-xlink a { color: var(--text); font-weight: 700; }
.tk-trade .section-head { margin-bottom: 12px; }
.tk-intro { margin: 0 0 8px; max-width: 80ch; font-size: 14.5px; line-height: 1.55; color: var(--text-muted); }
.tk-h3 { margin: clamp(32px, 4vw, 48px) 0 8px; font-size: clamp(21px, 2.6vw, 28px); line-height: 1.1; scroll-margin-top: 96px; }
.tk-table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 14px; background: var(--white); }
.tk-table th { text-align: left; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); padding: 12px 12px 8px; border-bottom: 2px solid var(--ink); white-space: nowrap; }
.tk-table td { padding: 11px 12px; border-bottom: 1px solid var(--line); vertical-align: top; line-height: 1.4; font-variant-numeric: tabular-nums; }
.tk-table .tk-num { text-align: right; white-space: nowrap; }
.tk-table td small { display: block; margin-top: 2px; color: var(--text-muted); font-size: 12.5px; font-weight: 400; }
.tk-table td a { color: var(--text); text-decoration: none; }
.tk-fold { margin-top: 20px; }
.tk-fold > summary { display: inline-flex; align-items: center; min-height: 46px; padding: 0 20px; border: 1px solid var(--ink); border-radius: 999px; font: 700 15px/1 var(--font-display); cursor: pointer; list-style: none; }
.tk-fold > summary::-webkit-details-marker { display: none; }
.tk-fold[open] > summary { background: var(--ink); color: var(--lime); }
.tk-charts { display: grid; gap: 12px; margin-top: 18px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.tk-chart { display: grid; gap: 6px; padding: 14px 14px 8px; background: var(--white); border: 1px solid var(--line); border-radius: 12px; color: var(--text); text-decoration: none; }
.tk-chart:hover { border-color: var(--ink); }
.tk-chart-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.tk-chart-h b { font-family: var(--font-display); font-size: 18px; font-weight: 800; }
.tk-chg { font-style: normal; font-family: var(--font-mono); font-size: 11.5px; white-space: nowrap; color: #4a5a4e; }
.tk-chg--dn { color: #2f7a1f; } .tk-chg--up { color: #b2371a; }
.tk-ix { display: block; width: 100%; height: auto; }
.tk-ix-base { stroke: rgba(10,15,12,.28); stroke-width: 1; stroke-dasharray: 3 4; }
.tk-spark { display: block; width: 132px; height: 34px; }
@media (max-width: 600px) { .tk-table { font-size: 13px; } .tk-table td, .tk-table th { padding-left: 8px; padding-right: 8px; } }
/* ==== Ask the shelf (/data/ask, and its links on the hub and the Drink Finder) ==== */
.ask-entry { margin: 12px 0 0; max-width: 780px; }
.hx-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 12px; }
.hx-acts .ask-entry { margin: 0; }
.hx-track { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border: 1px solid rgba(var(--lime-rgb), .3); border-radius: 999px; color: var(--on-dark); font-weight: 600; text-decoration: none; }
.hx-track svg { width: 18px; height: 18px; color: var(--lime); }
.hx-track b { padding: 4px 8px; border-radius: 999px; background: rgba(var(--lime-rgb), .16); color: var(--lime); font: 700 10.5px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
@media (hover: hover) { .hx-track:hover { border-color: var(--lime); } }
.sd-drops-cta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: 14px 0 0; font-size: 13.5px; }
.sd-drops-cta a { color: var(--lime-deep, #4a7a00); font-weight: 700; }
.si-hero .sd-drops-cta a, .si-dark .sd-drops-cta a { color: var(--lime); }
.sd-drops-cta span { color: var(--text-muted); } .si-hero .sd-drops-cta span { color: var(--on-dark-muted); }
.ask-entry a { display: inline-flex; align-items: center; gap: 10px; max-width: 100%; min-height: 44px; padding: 0 16px 0 6px; border: 1px solid rgba(var(--lime-rgb), .3); border-radius: 999px; background: rgba(255,255,255,.05); color: var(--on-dark); font: 600 14.5px/1.25 var(--font-body); text-decoration: none; transition: border-color .15s ease, color .15s ease; }
.ask-entry a > span:first-of-type { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ask-entry a > span:last-child { flex: none; }
.ask-entry a b { flex: none; padding: 5px 9px; border-radius: 999px; background: var(--lime); color: var(--ink); font: 700 10.5px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.ask-entry a:hover, .ask-entry a:focus-visible { border-color: var(--lime); color: var(--lime); }
.ask-entry--finder { margin-top: 18px; }
.ask-entry[hidden], .ask-form[hidden], .ask-chips[hidden], .ask-off[hidden] { display: none; }
.ask-form { position: relative; display: flex; align-items: flex-end; gap: 8px; max-width: 820px; margin: 26px 0 0; padding: 8px; background: var(--white); border-radius: 22px; box-shadow: 0 0 0 3px rgba(var(--lime-rgb), .35); }
.ask-form:focus-within { box-shadow: 0 0 0 3px var(--lime); }
.ask-form textarea { flex: 1; min-width: 0; min-height: 60px; max-height: 180px; padding: 10px 12px; border: 0; background: transparent; color: var(--ink); font: 500 19px/1.35 var(--font-body); resize: none; }
.ask-form textarea:focus { outline: none; }
.ask-form textarea::placeholder { color: #7b847e; }
.ask-go { flex: none; min-width: 56px; min-height: 52px; padding: 0 22px; border: 0; border-radius: 16px; background: var(--ink); color: var(--lime); font: 800 17px/1 var(--font-display); letter-spacing: .02em; cursor: pointer; }
.ask-go:hover, .ask-go:focus-visible { background: #000; }
.ask-go:focus-visible { outline: 3px solid var(--lime); outline-offset: 2px; }
.ask-go:disabled { opacity: .55; cursor: progress; }
.ask-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.ask-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; max-width: 820px; margin: 14px 0 0; }
.ask-chips > span { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--on-dark-muted); }
.ask-chips button { min-height: 44px; padding: 0 16px; border: 1px solid rgba(var(--lime-rgb), .3); border-radius: 999px; background: rgba(255,255,255,.06); color: var(--on-dark); font: 600 14px/1.25 var(--font-body); text-align: left; cursor: pointer; }
.ask-chips button:hover, .ask-chips button:focus-visible { border-color: var(--lime); color: var(--lime); }
.ask-off { max-width: 820px; margin: 24px 0 0; padding: 16px 18px; border: 1px solid rgba(var(--lime-rgb), .3); border-radius: 14px; color: var(--on-dark); }
.ask-off a { color: var(--lime); font-weight: 600; }
.ask-out { display: grid; gap: 28px; margin: 0 0 36px; }
.ask-out:empty { display: none; }
.ask-item { display: grid; gap: 14px; min-width: 0; padding-bottom: 28px; border-bottom: 1px solid var(--line); }
.ask-q { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: clamp(21px, 2.6vw, 28px); line-height: 1.15; overflow-wrap: anywhere; }
.ask-q span { display: block; margin-bottom: 6px; font-family: var(--font-mono); font-weight: 500; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
.ask-a { margin: 0; max-width: 920px; }
.ask-a--not_covered { border-left-color: var(--text-muted); }
.ask-a--declined { border-left-color: #e0a84a; }
.ask-a--err { border-left-color: #d9534f; }
.ask-grid { margin-top: 0; }
.ask-links { display: flex; flex-wrap: wrap; gap: 8px; }
.ask-links .rk-btn { min-height: 44px; white-space: normal; line-height: 1.2; }
.ask-note { margin: 0; font-size: 12px; line-height: 1.5; color: var(--text-muted); }
.ask-wait { display: flex; align-items: center; gap: 10px; min-height: 52px; color: var(--text-muted); font-size: 15px; }
.ask-dots { display: inline-flex; gap: 5px; }
.ask-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--lime-deep); animation: ask-pulse 1s infinite ease-in-out; }
.ask-dots i:nth-child(2) { animation-delay: .15s; } .ask-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes ask-pulse { 0%, 80%, 100% { opacity: .25; transform: scale(.8); } 40% { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .ask-dots i { animation: none; opacity: .7; } }
.ask-how { max-width: 820px; }
.ask-how p { margin: 8px 0 0; font-size: 15px; line-height: 1.6; color: var(--text-muted); }
@media (max-width: 600px) {
  .ask-form { border-radius: 18px; }
  .ask-form textarea { min-height: 56px; font-size: 17px; padding: 8px; }
  .ask-go { min-height: 48px; padding: 0 16px; border-radius: 13px; }
  .ask-chips button { font-size: 13.5px; padding: 0 14px; }
}

/* ==== head to head, redesigned (25 Oct) ==== */
.cmp { max-width: 980px; margin: 28px auto 0; }
.cmp-heads, .cmp-row { display: grid; grid-template-columns: 1fr 1fr; column-gap: 14px; }
.cmp-heads > .cmp-k { display: none; }
.cmp-p { display: flex; flex-direction: column; gap: 10px; padding: 14px; border: 1px solid var(--line); border-radius: 16px; background: #fff; min-width: 0; }
.cmp-p-link { display: flex; flex-direction: column; gap: 4px; color: var(--text); text-decoration: none; }
.cmp-p-link:hover b { text-decoration: underline; text-underline-offset: 3px; }
.cmp-img { display: block; width: 100%; height: 150px; object-fit: contain; margin-bottom: 6px; }
.cmp-rank { align-self: flex-start; font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 99px; background: var(--ink); color: var(--lime); }
.cmp-p b { font-size: 17px; line-height: 1.2; }
.cmp-name { font-size: 14px; color: var(--text-muted); line-height: 1.35; }
.cmp-buy { margin-top: auto; }
.cmp-buy .rk-btn { width: 100%; justify-content: center; }
.cmp-rows { margin-top: 18px; border-top: 2px solid var(--ink); }
.cmp-row { border-bottom: 1px solid var(--line); }
.cmp-row > .cmp-k { grid-column: 1 / -1; padding: 12px 0 2px; font-size: 13px; font-weight: 600; color: var(--text-muted); }
.cmp-v { padding: 2px 0 12px; font-size: 15.5px; line-height: 1.45; min-width: 0; overflow-wrap: anywhere; }
.cmp-v.is-win { font-weight: 700; }
.cmp-v.is-win::after { content: ""; display: inline-block; width: 8px; height: 8px; margin-left: 8px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 1.5px var(--ink); vertical-align: 1px; }
@media (min-width: 760px) {
  .cmp-heads, .cmp-row { grid-template-columns: 190px 1fr 1fr; column-gap: 24px; }
  .cmp-heads > .cmp-k { display: block; }
  .cmp-row > .cmp-k { grid-column: auto; padding: 15px 0; }
  .cmp-v { padding: 15px 0; }
  .cmp-img { height: 190px; }
}
.cmp-buy .rk-also-k, .cmp-buy .rk-opts { display: none; }
.cmp-buy .rk-btn { font-size: 14px; padding: 11px 12px; }
/* ==== Market time series: seasonal forecast, shelf share by owner, Drinks Price Index (tools/build_market.py, tools/market.py) ==== */
.mk-card { padding: 16px 14px 10px; margin: 0 0 20px; }
.mk-svg { width: 100%; height: auto; display: block; overflow: visible; }
.mk-svg .ch-lbl { fill: rgba(243,245,239,.55); font-family: var(--font-mono); font-size: 10px; }
.mk-svg .ch-grid { stroke: rgba(243,245,239,.08); stroke-dasharray: 2 5; }
.mk-base { stroke: rgba(243,245,239,.4); stroke-width: 1; stroke-dasharray: 4 4; }
.mk-end { font-family: var(--font-mono); font-size: 11px; font-weight: 600; }
.mk-val { font-family: var(--font-mono); font-size: 11px; font-weight: 700; fill: var(--on-dark); }
.mk-hit rect { cursor: crosshair; } .mk-hit rect:hover { fill: rgba(var(--lime-rgb), .08); }
.mk-legend { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0 0 12px; padding: 0; font-size: 12.5px; color: rgba(243,245,239,.75); }
.mk-legend li { display: inline-flex; align-items: center; gap: 7px; } .mk-legend i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; flex: none; }
.mk-table { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.mk-table th, .mk-table td { text-align: left; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--line); vertical-align: middle; }
.mk-table thead th { font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); border-bottom: 2px solid var(--ink); white-space: nowrap; }
.mk-table tbody th { font-weight: 600; }
.mk-table a { color: var(--text); font-weight: 600; text-underline-offset: 3px; }
.mk-table .mk-num { text-align: right; white-space: nowrap; }
.mk-table .mk-n { font-family: var(--font-display); font-stretch: 80%; font-weight: 800; font-size: 18px; width: 30px; }
.mk-table--wide { min-width: 560px; }
.mk-key { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 8px; vertical-align: 0; }
.mk-more { margin: 4px 0 24px; } .mk-more > summary { cursor: pointer; font-weight: 600; font-size: 14px; padding: 12px 0; min-height: 44px; box-sizing: border-box; }
.mk-fc-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
/* Forecast cards are white (UK and EU, as .mk-fc below for the EU pages), so the chart is drawn in ink and muted tones, with the
   peak week the one solid bar (George, 27 Oct: lime on white "too bright for the screen") */
.mk-fc { display: grid; gap: 4px; align-content: start; padding: 18px 16px 12px; border-radius: 12px; background: var(--white); border: 1px solid var(--line); color: var(--text); }
.mk-fc header { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.mk-fc h3 { margin: 0; font-size: 18px; } .mk-fc h3 a { color: var(--text); text-decoration: none; } .mk-fc h3 a:hover { text-decoration: underline; }
.mk-fc header span { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.mk-fc-big { font-family: var(--font-display); font-stretch: 78%; font-weight: 800; font-size: 48px; line-height: .95; letter-spacing: -.02em; color: var(--text); }
.mk-fc > small { font-size: 12.5px; color: var(--text-muted); margin-bottom: 6px; }
.mk-bar { fill: #c9d2c1; } .mk-bar--pk { fill: var(--ink); } .mk-bar--dn { fill: #e8cdbc; }
.mk-bar:hover { opacity: .75; }
.mk-fc .mk-svg .ch-lbl { fill: var(--text-muted); } .mk-fc .mk-base { stroke: rgba(10, 15, 12, .3); } .mk-fc .mk-val { fill: var(--text); }
.mk-fc .mk-base + .ch-lbl { display: none; }   /* "now 100" sat behind the last bar; each card already says "against this week" */
.mk-h3 { margin: 28px 0 10px; font-size: 18px; }
.mk-brands { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 8px; font-size: 14px; color: var(--text-muted); }
.mk-brands b { color: var(--text); margin-right: 6px; }
.mk-switch { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; }
.mk-switch a { display: inline-flex; align-items: center; min-height: 44px; box-sizing: border-box; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--white); color: var(--text); font-size: 13px; font-weight: 500; text-decoration: none; }
.mk-switch a:hover { border-color: var(--ink); } .mk-switch a.is-on { background: var(--ink); color: var(--lime); border-color: var(--ink); }
.mk-dl { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0 40px; }
.mk-gcards { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); margin-top: 8px; }
.mk-gcard { display: grid; gap: 4px; padding: 16px; border-radius: 12px; background: var(--ink); color: var(--on-dark); text-decoration: none; border: 1px solid rgba(var(--lime-rgb), .16); }
.mk-gcard:hover { border-color: var(--lime); }
.mk-gcard span { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--on-dark-muted); }
.mk-gcard b { font-family: var(--font-display); font-stretch: 78%; font-weight: 800; font-size: 40px; line-height: 1; color: var(--lime); }
.mk-gcard small { font-size: 12.5px; color: var(--on-dark-muted); }
.mk-spark { width: 100%; height: auto; display: block; margin: 4px 0; }
@media (max-width: 520px) { .mk-table { font-size: 13px; } .mk-table th, .mk-table td { padding-right: 8px; } .mk-fc-big { font-size: 40px; } }
.mk-svg.mk-m { display: none; } .mk-svg.mk-m .ch-lbl { font-size: 11px; }
@media (max-width: 640px) { .mk-svg.mk-d { display: none; } .mk-svg.mk-m { display: block; } .mk-card { padding: 14px 10px 8px; } }
/* ==== Bottle extras: 90-day low, value score, flavour wheel, tax, UK vs Europe, listing quality (tools/bottle_extras.py) ==== */
.bx-top h2 { margin-bottom: 14px; }
.bx-row { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); align-items: start; }
.bx-card { min-width: 0; padding: 16px; background: var(--white); color: var(--text); border: 1px solid var(--line); border-radius: 12px; }
.bx-card h3 { margin: 0 0 10px; font-size: 18px; }
.bx-score { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 4px; margin: 0; }
.bx-score b { font-family: var(--font-display); font-stretch: 78%; font-weight: 800; font-size: 46px; line-height: 1; letter-spacing: -.02em; }
.bx-score span { font-size: 16px; font-weight: 600; color: var(--text-muted); }
.bx-score em { margin-left: 8px; font-style: normal; font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.bx-meter { height: 8px; margin: 10px 0 12px; border-radius: 999px; background: rgba(10, 15, 12, .08); overflow: hidden; }
.bx-meter i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #5b8a4a, var(--lime)); }
.bx-verdict { margin: 0 0 10px; font-size: 15px; font-weight: 600; line-height: 1.4; }
.bx-why { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 14px; line-height: 1.45; }
.bx-why li { display: flex; gap: 8px; align-items: baseline; }
.bx-why li span { flex: none; width: 12px; font-weight: 800; }
.bx-why .is-up span { color: #2f5a3a; }
.bx-why .is-down span { color: #8a2d13; }
.bx-src { margin: 12px 0 0; font-size: 12px; line-height: 1.45; color: var(--text-muted); }
.bx-src a { color: inherit; }
/* the flavour wheel: currentColor and the house lime, so it reads on paper, cream or ink */
.bx-wheel { display: block; width: 100%; max-width: 320px; height: auto; margin: 0 auto; color: inherit; overflow: visible; }
.bx-w-ring { fill: none; stroke: currentColor; stroke-opacity: .14; }
.bx-w-spoke { stroke: currentColor; stroke-opacity: .12; }
.bx-w-shape.bx-w-a { fill: var(--lime); fill-opacity: .65; stroke: #2f5a3a; stroke-width: 2; stroke-linejoin: round; }
.bx-w-dot.bx-w-a { fill: #2f5a3a; }
.bx-w-shape.bx-w-b { fill: none; stroke: currentColor; stroke-width: 2; stroke-dasharray: 5 4; stroke-linejoin: round; }
.bx-w-dot.bx-w-b { fill: currentColor; }
.bx-w-lbl { fill: currentColor; font-family: var(--font-mono); font-size: 15px; letter-spacing: .02em; }
.section--dark .bx-w-shape.bx-w-a, .si-dark .bx-w-shape.bx-w-a, .si-hero .bx-w-shape.bx-w-a { stroke: var(--lime); fill-opacity: .35; }
.section--dark .bx-w-dot.bx-w-a, .si-dark .bx-w-dot.bx-w-a, .si-hero .bx-w-dot.bx-w-a { fill: var(--lime); }
.bx-fl-list { list-style: none; margin: 6px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 12px; font-size: 13px; line-height: 1.35; }
.bx-fl-list b { font-weight: 600; }
.bx-fl-list small { display: block; font-size: 12px; color: var(--text-muted); }
.bx-str { display: inline-block; padding: 1px 6px; border-radius: 999px; background: rgba(10, 15, 12, .07); font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; vertical-align: 1px; }
.bx-str--strong { background: var(--lime); color: var(--ink); }
.bx-flav--cmp { margin-top: 16px; }
.bx-flav-cmp { display: grid; gap: 12px; align-items: center; }
@media (min-width: 700px) { .bx-flav-cmp { grid-template-columns: minmax(0, 340px) minmax(0, 1fr); } }
.bx-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0 0 8px; font-size: 13px; font-weight: 600; }
.bx-key { display: inline-block; width: 14px; height: 14px; border-radius: 3px; }
.bx-key--a { background: var(--lime); border: 2px solid #2f5a3a; }
.bx-key--b { border: 2px dashed currentColor; margin-left: 8px; }
.bx-fl-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.bx-fl-table th, .bx-fl-table td { padding: 6px 8px; border-bottom: 1px solid var(--line); text-align: left; font-weight: 400; }
.bx-fl-table thead th, .bx-fl-table tbody th { font-weight: 600; }
/* how much is tax: a stacked bar */
.bx-tax-line { margin: 0 0 12px; font-size: 15px; line-height: 1.5; }
.bx-bar { display: flex; height: 16px; border-radius: 999px; overflow: hidden; background: rgba(10, 15, 12, .08); }
.bx-bar i { display: block; height: 100%; }
.bx-bar-d, .bx-k--d { background: var(--ink); }
.bx-bar-v, .bx-k--v { background: #5b8a4a; }
.bx-bar-r, .bx-k--r { background: var(--lime); }
.bx-bar-key { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12.5px; }
.bx-k { display: inline-block; width: 10px; height: 10px; margin-right: 5px; border-radius: 2px; vertical-align: -1px; }
.bx-k--r { box-shadow: inset 0 0 0 1px rgba(10, 15, 12, .25); }
/* UK vs Europe */
.bx-eu-line { margin: 0 0 12px; font-size: 15px; line-height: 1.5; max-width: 66ch; }
.bx-eu .table-wrap { margin: 0; }
.bx-eu-table { width: 100%; border-collapse: collapse; background: var(--white); border: 1px solid var(--line); font-size: 14px; font-variant-numeric: tabular-nums; }
.bx-eu-table th, .bx-eu-table td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; }
.bx-eu-table thead th { font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.bx-eu-table tbody th { font-weight: 600; }
.bx-eu-table tr.is-uk { background: rgba(var(--lime-rgb), .28); }
.bx-eu-table .bx-up { color: #8a2d13; font-weight: 600; }
.bx-eu-table td small { display: block; font-size: 12px; color: var(--text-muted); }
.bx-eu-table .bx-down { color: #2f5a3a; font-weight: 600; }
@media (max-width: 480px) { .bx-eu-table { font-size: 13px; } .bx-eu-table th, .bx-eu-table td { padding: 8px 6px; } }
/* listing quality (the trade layer) */
.bx-lq .eyebrow { margin: 0 0 6px; }
.bx-lq-card { max-width: 720px; }
.bx-lq-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.bx-fix { min-height: 44px; padding: 0 18px; font-size: 14px; }
.bx-lq-card h3 { margin: 14px 0 8px; font-size: 16px; }
.bx-good { margin: 12px 0 0; font-size: 13.5px; line-height: 1.45; }
/* the 90-day low: on rank cards, the bottle page and the drawer */
.rk-icons .bx-low-li b, .bx-low-badge { padding: 1px 7px; border-radius: 4px; background: var(--lime); color: var(--ink); }
.bx-low-badge { display: inline-block; vertical-align: middle; margin: 2px 0 2px 6px; font-family: var(--font-mono); font-style: normal; font-size: 10.5px; font-weight: 600; letter-spacing: .02em; line-height: 1.5; white-space: nowrap; }
/* the UK vs Europe page */
.eu-cat { margin: 0 0 28px; }
.eu-cat h2 { margin: 0 0 6px; font-size: clamp(22px, 2.6vw, 28px); }
.eu-cat > p { margin: 0 0 12px; color: var(--text-muted); font-size: 14px; }
.eu-table td small { display: block; color: var(--text-muted); font-size: 12px; }
.eu-table a { color: inherit; font-weight: 600; }
.eu-kpis { display: grid; gap: 1px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); margin: 18px 0 0; background: var(--line-dark); border: 1px solid var(--line-dark); }
.eu-kpis div { padding: 14px 16px; background: var(--ink); }
.eu-kpis b { display: block; font-family: var(--font-display); font-stretch: 78%; font-weight: 800; font-size: 32px; line-height: 1; color: var(--lime); }
.eu-kpis span { display: block; margin-top: 6px; font-size: 12.5px; color: var(--on-dark-muted); }
@media (max-width: 480px) { .bx-card { padding: 14px; } .bx-score b { font-size: 40px; } .bx-fl-list { gap: 5px 10px; } .bx-wheel { max-width: 270px; } }
.eu-h3 { margin: 16px 0 8px; font-size: 16px; }
.eu-table th small, .eu-table td small { display: block; margin-top: 2px; font-weight: 400; color: var(--text-muted); font-size: 12px; }
.bx-row--1 .bx-card { max-width: 720px; }
/* ==== Alerts: price alerts, follow a brand, category winners and losers, the manage page (tools/build_alerts.py, assets/alerts.js) ==== */
.al-form { display: grid; gap: 12px; min-width: 0; }
.al-lede { margin: 0; font-size: 16px; line-height: 1.5; color: var(--text-muted); } .al-lede b { color: var(--text); }
.al-row { display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); align-items: end; }
.al-f { display: grid; gap: 6px; min-width: 0; }
.al-f > span:first-child { font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.al-f input { width: 100%; min-width: 0; height: 48px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--white); color: var(--text); font: inherit; font-size: 16px; }
.al-f input:focus { outline: 2px solid var(--lime-deep); outline-offset: 1px; border-color: var(--ink); }
.al-gbp { position: relative; display: block; } .al-gbp i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font-style: normal; font-weight: 600; color: var(--text-muted); pointer-events: none; }
.al-gbp input { padding-left: 30px; font-family: var(--font-mono); font-weight: 600; }
.al-go { min-height: 48px; width: 100%; justify-content: center; white-space: nowrap; }
.al-go[disabled] { opacity: .6; cursor: progress; }
.al-consent { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.45; color: var(--text-muted); cursor: pointer; min-height: 44px; padding: 4px 0; }
.al-consent input { margin-top: 2px; width: 18px; height: 18px; flex: none; accent-color: var(--ink); }
.al-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.al-small { margin: 0; font-size: 13px; line-height: 1.5; color: var(--text-muted); } .al-small a { color: inherit; }
.al-status { margin: 0; padding: 10px 12px; border-radius: 8px; background: rgba(217,83,79,.1); color: #9c2f2b; font-size: 14px; } .al-status.is-ok { background: rgba(var(--lime-rgb), .25); color: var(--text); }
.al-done { padding: 18px 20px; border-radius: 14px; background: rgba(var(--lime-rgb), .18); border: 1px solid var(--lime-deep); } .al-done b { display: block; font-size: 19px; } .al-done p { margin: 6px 0 0; font-size: 15px; color: var(--text-muted); }
.al-done--off { background: var(--cream); border-color: var(--line); }
@media (min-width: 640px) {
  .al-row { grid-template-columns: 150px minmax(0, 1fr); } .al-card .al-row { grid-template-columns: minmax(0, 1fr); }
  .al-go { width: auto; justify-self: start; padding: 0 24px; }
}
/* the brand and category band: a dark card in the house look */
.al-card { position: relative; overflow: hidden; gap: 22px; padding: clamp(20px, 4vw, 40px); border-radius: 18px; background: var(--ink); color: var(--on-dark); }
.al-card > * { position: relative; }
.al-card > .dp-grid { position: absolute; }
.al-pitch h2 { margin: 8px 0 10px; color: var(--on-dark); max-width: 22ch; } .al-pitch .eyebrow { color: var(--lime); } .al-pitch p { margin: 0; max-width: 56ch; color: var(--on-dark-muted); font-size: 16px; line-height: 1.55; }
.al-body { display: grid; gap: 12px; min-width: 0; }
.al-card .al-f > span:first-child, .al-card .al-consent, .al-card .al-small { color: var(--on-dark-muted); }
.al-card .al-f input { background: #0a0f0c; color: var(--on-dark); border-color: rgba(var(--lime-rgb), .4); }
.al-card .al-f input:focus { outline-color: var(--lime); }
.al-card .al-consent input { accent-color: var(--lime); }
.al-card .al-status { background: rgba(255,154,90,.12); color: #ffb48a; } .al-card .al-status.is-ok { color: var(--lime); }
.al-card .al-done { background: rgba(var(--lime-rgb), .08); border-color: rgba(var(--lime-rgb), .4); } .al-card .al-done b { color: var(--lime); } .al-card .al-done p { color: var(--on-dark-muted); }
@media (min-width: 960px) { .al-card { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: center; gap: 40px; } }
/* in the bottle drawer: always stacked, the panel is narrow */
.al-dr { margin: 0 0 20px; }
.al-form--dr { padding: 16px; border-radius: 14px; background: var(--white); border: 1px solid var(--line); }
.al-form--dr h4 { margin: 0 !important; }
.al-form--dr .al-row { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .al-form--dr .al-row { grid-template-columns: 140px minmax(0, 1fr); } }
/* the manage page, /data/alerts */
.al-hero h1 { max-width: none; }
.al-manage { display: grid; gap: 40px; max-width: 900px; }
.al-view { display: grid; gap: 18px; } .al-view[aria-busy="true"] { opacity: .6; }
.al-empty { margin: 0; padding: 18px 20px; border-radius: 14px; background: var(--cream); font-size: 16px; }
.al-list-head h2 { margin: 0; font-size: clamp(22px, 3vw, 30px); } .al-list-head p { margin: 4px 0 0; font-size: 15px; color: var(--text-muted); overflow-wrap: anywhere; }
.al-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.al-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 14px; align-items: center; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--white); }
.al-kind { grid-column: 1 / -1; justify-self: start; padding: 3px 10px; border-radius: 999px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; background: var(--cream); }
.al-kind--price { background: var(--lime); color: var(--ink); } .al-kind--brand { background: var(--ink); color: var(--lime); }
.al-what { display: grid; gap: 2px; min-width: 0; } .al-what a { font-weight: 700; color: var(--text); overflow-wrap: anywhere; } .al-what small { font-size: 14px; color: var(--text-muted); }
.al-rm { min-height: 44px; }
.al-actions { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; }
.al-stop { min-height: 48px; }
.al-link { min-height: 44px; padding: 0; border: 0; background: none; color: var(--text); font: inherit; font-size: 14px; text-decoration: underline; cursor: pointer; }
.al-how h2 { margin: 0 0 16px; font-size: clamp(24px, 3vw, 32px); }
.al-how-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); margin-bottom: 16px; }
.al-how-card { display: grid; gap: 6px; padding: 18px; border-radius: 14px; background: var(--white); border: 1px solid var(--line); color: var(--text); text-decoration: none; }
.al-how-card:hover, .al-how-card:focus-visible { border-color: var(--ink); } .al-how-card span { font-size: 14.5px; color: var(--text-muted); }
/* ==== Trade tools: data feed and API (tf-), press room (prs-), embed generator (emg-) ==== */
.tf-cta { margin-top: 26px; }
.tf-eps { display: grid; gap: 12px; }
@media (min-width: 860px) { .tf-eps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tf-ep { border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; background: var(--white); min-width: 0; }
.tf-ep > code { display: block; font-family: var(--font-mono); font-size: 13px; overflow-wrap: anywhere; color: var(--text); }
.tf-ep > code b { display: inline-block; margin-right: 8px; padding: 2px 7px; border-radius: 5px; background: var(--ink); color: var(--lime); font-weight: 700; font-size: 11.5px; }
.tf-ep p { margin: 8px 0 0; font-size: 14.5px; color: var(--text-muted); }
.tf-ep p code, .tf-table code, .tf-faq code { font-family: var(--font-mono); font-size: .9em; background: rgba(10,15,12,.06); padding: 1px 5px; border-radius: 4px; overflow-wrap: anywhere; }
.tf-code-grid { display: grid; gap: 12px; margin-top: 18px; }
@media (min-width: 1000px) { .tf-code-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tf-code { min-width: 0; }
.tf-code .eyebrow { margin-bottom: 10px; }
.tf-code pre { margin: 0; padding: 16px; border-radius: 12px; background: var(--ink); color: var(--on-dark); overflow-x: auto; font-family: var(--font-mono); font-size: 12.5px; line-height: 1.6; -webkit-overflow-scrolling: touch; }
.tf-code pre code { font: inherit; white-space: pre; }
.tf-table td:nth-child(3) { font-family: var(--font-mono); font-size: 12.5px; white-space: nowrap; }
.tf-table td:first-child code { white-space: nowrap; overflow-wrap: normal; }
.tf-table td:nth-child(2) { min-width: 240px; }
.tf-sample { margin-top: 8px; }
.tf-sample .btn { margin-top: 14px; }
.tf-cats a code { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); margin-right: 4px; }
.tf-plans { display: grid; gap: 16px; }
@media (min-width: 860px) { .tf-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tf-plan { border: 1px solid var(--line-dark); border-radius: 14px; padding: 24px; display: grid; gap: 12px; align-content: start; }
.tf-plan--on { border-color: var(--lime); box-shadow: 0 0 0 1px var(--lime) inset; }
.tf-plan h3 { color: var(--on-dark); margin: 0; }
.tf-plan ul { margin: 0 0 6px; padding: 0; list-style: none; display: grid; gap: 6px; color: var(--on-dark-muted); font-size: 15px; }
.tf-plan li::before { content: "✓"; color: var(--lime); margin-right: 8px; font-weight: 700; }
.tf-plan .btn { justify-self: start; }

.prs-qs { display: grid; gap: 14px; }
@media (min-width: 900px) { .prs-qs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.prs-q { margin: 0; background: var(--white); border: 1px solid var(--line); border-left: 4px solid var(--lime-deep); border-radius: 0 12px 12px 0; padding: 18px 20px; display: grid; gap: 12px; align-content: space-between; }
.prs-q blockquote { margin: 0; }
.prs-q blockquote p { margin: 0; font-size: 17.5px; line-height: 1.45; font-weight: 600; color: var(--text); }
.prs-q figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font-size: 13px; color: var(--text-muted); }
.prs-q figcaption span { font-family: var(--font-mono); font-size: 11.5px; flex: 1 1 220px; }
.prs-q figcaption a { color: var(--text); font-weight: 600; }
.prs-copy { min-height: 44px; padding: 0 16px; border: 1px solid var(--line); border-radius: 999px; background: var(--white); color: var(--text); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.prs-copy:hover { border-color: var(--ink); }
.prs-copy.is-done { background: var(--lime); border-color: var(--lime); color: var(--ink); }
.prs-feat, .prs-grid { display: grid; gap: 18px; }
@media (min-width: 900px) { .prs-feat { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 640px) { .prs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .prs-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.prs-chart { margin: 0; display: grid; gap: 10px; align-content: start; min-width: 0; }
.prs-chart-img { display: block; border: 1px solid var(--line-dark); border-radius: 10px; overflow: hidden; background: var(--ink); }
.prs-chart-img img { display: block; width: 100%; height: auto; }
.prs-chart figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; }
.prs-chart figcaption b { color: var(--on-dark); font-size: 14.5px; font-weight: 600; }
.prs-chart figcaption span { display: flex; gap: 8px; }
.prs-dl { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border: 1px solid var(--line-dark); border-radius: 999px; color: var(--on-dark); font-family: var(--font-mono); font-size: 12.5px; text-decoration: none; }
.prs-dl:hover { border-color: var(--lime); color: var(--lime); }
.prs-h3 { color: var(--on-dark); margin: clamp(36px, 5vw, 56px) 0 16px; }
.prs-zip { margin-top: 28px; }
.prs-cols { display: grid; gap: clamp(32px, 5vw, 64px); }
@media (min-width: 900px) { .prs-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.prs-cols h2 { margin: 8px 0 16px; }
.prs-cols p { color: var(--text-muted); max-width: 60ch; }
.prs-cols p a { color: var(--text); }
.prs-cite-line { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.prs-cite-line code { font-family: var(--font-mono); font-size: 14px; padding: 10px 12px; border-radius: 8px; background: var(--cream); color: var(--text); overflow-wrap: anywhere; }
.prs-contact .btn-row { margin: 18px 0; }
.prs-small { font-size: 14px; }
.prs-logos { display: grid; gap: 14px; }
@media (min-width: 760px) { .prs-logos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.prs-logo { display: grid; gap: 14px; justify-items: start; padding: 22px; border-radius: 12px; border: 1px solid var(--line); text-decoration: none; color: var(--text); font-size: 14px; font-weight: 600; }
.prs-logo img { height: 44px; width: auto; max-width: 100%; }
.prs-logo--light { background: var(--white); }
.prs-logo--dark { background: var(--ink); color: var(--on-dark); }
.prs-logo:hover { border-color: var(--ink); }

.emg { display: grid; gap: clamp(28px, 4vw, 48px); align-items: start; }
@media (min-width: 960px) { .emg { grid-template-columns: minmax(0, 1fr) 480px; } }
.emg-form { display: grid; gap: 18px; min-width: 0; }
.emg-field { display: grid; gap: 8px; }
.emg-field > span, .emg-theme legend { font-weight: 700; font-size: 14px; }
.emg-field select, .emg-field textarea { width: 100%; font: inherit; font-size: 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--white); color: var(--text); }
.emg-field select { min-height: 48px; padding: 0 12px; }
.emg-field textarea { padding: 12px; font-family: var(--font-mono); font-size: 12.5px; line-height: 1.5; resize: vertical; }
.emg-theme { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.emg-theme legend { margin-bottom: 8px; padding: 0; }
.emg-theme label { position: relative; }
.emg-theme input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.emg-theme span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; border: 1px solid var(--line); border-radius: 999px; background: var(--white); font-weight: 600; font-size: 14px; }
.emg-theme input:checked + span { background: var(--ink); color: var(--lime); border-color: var(--ink); }
.emg-theme input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }
.emg-copy { justify-self: start; }
.emg-note { margin: 0; font-size: 14px; color: var(--text-muted); }
.emg-ticks { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: 14.5px; }
.emg-ticks li::before { content: "✓"; color: var(--lime-deep); font-weight: 700; margin-right: 8px; }
.emg-preview { display: grid; gap: 10px; min-width: 0; }
.emg-preview iframe { display: block; width: 100%; max-width: 480px; border: 0; border-radius: 12px; background: var(--ink); box-shadow: 0 30px 60px -32px rgba(10,15,12,.35); }
.bt-brandline.emg-hook { margin-top: 12px; background: none; color: var(--text); padding: 0 2px; }
.bt-brandline.emg-hook a { color: var(--text); text-decoration: underline; text-decoration-color: var(--lime-deep); text-decoration-thickness: 2px; text-underline-offset: 4px; }
/* ==== community: reader reviews (I14) and brand page claims (I22) ==== */
.cm-vh { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.cm-sum { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0 0 6px; }
.cm-sum b { font-family: var(--font-display); font-stretch: 78%; font-weight: 800; font-size: 44px; line-height: 1; }
.cm-sum > span:last-child { color: var(--text-muted); font-size: 14px; }
.cm-stars-lg { position: relative; display: inline-block; font-size: 22px; line-height: 1; letter-spacing: 2px; color: #cfd3c8; white-space: nowrap; }
.cm-stars-lg::before { content: "★★★★★"; }
.cm-stars-lg::after { content: "★★★★★"; position: absolute; left: 0; top: 0; width: var(--v, 0%); overflow: hidden; color: #2f5a3a; }
.cm-note { max-width: 72ch; }
.cm-list { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 12px; }
.cm-rev { padding: 16px 18px; background: var(--white); border: 1px solid var(--line); border-radius: 14px; min-width: 0; }
.cm-rev-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.cm-rev-top h3 { margin: 0; font-family: var(--font-body); font-size: 17px; font-weight: 700; line-height: 1.3; text-transform: none; overflow-wrap: anywhere; }
.cm-stars-sm { color: #2f5a3a; font-size: 15px; letter-spacing: 1px; white-space: nowrap; }
.cm-text { margin: 8px 0 0; font-size: 15px; line-height: 1.55; overflow-wrap: anywhere; }
.cm-text p { margin: 0 0 .6em; }
.cm-text p:last-child { margin-bottom: 0; }
.cm-photo { margin: 12px 0 0; }
.cm-photo img { display: block; width: auto; max-width: min(100%, 360px); height: auto; max-height: 360px; border-radius: 10px; background: var(--paper); }
.cm-inc { margin: 10px 0 0; padding: 8px 12px; border-radius: 8px; background: var(--cream); font-size: 13px; }
.cm-meta { margin: 10px 0 0; font-size: 13px; color: var(--text-muted); }
.cm-meta b, .cm-exp { color: var(--text); font-weight: 600; }
.cm-checked { margin: 6px 0 0; font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: #2f5a3a; }
.cm-write { margin-top: 20px; }
.cm-write > summary { list-style: none; display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 22px; border-radius: 999px; background: var(--ink); color: var(--lime); font-family: var(--font-display); font-stretch: 85%; font-weight: 700; font-size: 15px; letter-spacing: .03em; text-transform: uppercase; cursor: pointer; }
.cm-write > summary::-webkit-details-marker { display: none; }
.cm-write > summary::after { content: "+"; font-size: 20px; line-height: 1; }
.cm-write[open] > summary::after { content: "−"; }
.cm-write[open] > summary { margin-bottom: 14px; }
.cm-write > summary:focus-visible { outline: 2px solid var(--lime-deep); outline-offset: 3px; }
.cm-form label small { font-family: var(--font-body); font-size: 12.5px; letter-spacing: 0; text-transform: none; color: var(--text-muted); }
.cm-form .sb-check { align-items: flex-start; min-height: 44px; line-height: 1.45; }
.cm-form .sb-check input { flex: none; width: 18px; height: 18px; margin: 1px 0 0; padding: 0; accent-color: var(--forest-3); }
.cm-form fieldset.cm-starset { padding: 0; border: 0; }
.cm-starrow { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: 2px; }
.cm-form .cm-starrow input { position: absolute; width: 1px; height: 1px; padding: 0; margin: 0; border: 0; opacity: 0; }
.cm-form .cm-starrow label { display: grid; place-items: center; width: 44px; height: 44px; cursor: pointer; }
.cm-starrow label::before { content: "★"; font-size: 34px; line-height: 1; color: #cfd3c8; transition: color .1s; }
.cm-starrow input:checked ~ label::before, .cm-starrow label:hover::before, .cm-starrow label:hover ~ label::before { color: #2f5a3a; }
.cm-starrow input:focus-visible + label { outline: 2px solid var(--forest-3); outline-offset: 1px; border-radius: 8px; }
.cm-count.is-ok { color: #2f5a3a; }
.cm-preview { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.cm-preview img { width: 120px; height: 120px; object-fit: cover; border-radius: 10px; }
.cm-thanks h2, .cm-thanks h3 { margin: 0 0 8px; font-size: clamp(24px, 3vw, 32px); }
.cm-thanks p { margin: 0; font-size: 15px; }
.cm-claimbar { background: var(--cream); color: var(--ink); border-bottom: 1px solid var(--line); }
.cm-claimbar p { margin: 0; padding: 8px 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0 12px; font-size: 15px; }
.cm-claimbar a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--forest-3); font-weight: 700; text-underline-offset: 3px; }
.cm-claimbar small { flex: 1 1 100%; padding-bottom: 6px; font-size: 13px; color: rgba(10, 15, 12, .75); }
@media (min-width: 900px) { .cm-claimbar small { flex: 0 1 auto; padding-bottom: 0; } }
.section.cm-brand { padding: clamp(40px, 6vw, 80px) 0; background: var(--white); }
.cm-brand .section-head { margin-bottom: 18px; }
.cm-verified { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 20px; font-family: var(--font-display); font-stretch: 85%; font-weight: 800; font-size: 20px; letter-spacing: .02em; text-transform: uppercase; }
.cm-tick { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--lime); color: var(--ink); font-size: 16px; }
.cm-verified small { flex: 1 1 100%; font-family: var(--font-body); font-stretch: 100%; font-weight: 400; font-size: 14px; letter-spacing: 0; text-transform: none; color: var(--text-muted); }
.cm-facts { display: grid; gap: 1px; margin: 0; background: var(--line); border: 1px solid var(--line); }
.cm-fact { min-width: 0; padding: 12px 14px; background: var(--paper); }
.cm-fact dt { margin: 0 0 4px; font-size: 11px; color: var(--text-muted); }
.cm-fact dd { margin: 0; font-size: 15px; overflow-wrap: anywhere; }
.cm-fact dd p { margin: 0 0 .6em; }
.cm-fact dd p:last-child, .cm-fact .dp-list { margin-bottom: 0; }
@media (min-width: 760px) { .cm-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cm-fact--story { grid-column: 1 / -1; } }
.cm-by { margin: 8px 0 0; font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.cm-actions { display: grid; gap: 20px; margin-top: 28px; align-items: start; }
@media (min-width: 960px) { .cm-actions { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); } .cm-actions .cm-write { margin-top: 0; } }
.cm-cta { padding: 22px; border-radius: 16px; background: var(--ink); color: var(--on-dark); }
.cm-cta h3 { margin: 0 0 8px; font-size: 20px; color: var(--on-dark); }
.cm-cta p { margin: 0 0 16px; font-size: 14px; color: var(--on-dark-muted); }
.cm-cta .btn { white-space: normal; text-align: center; }
.cm-formnote { margin: 0; font-size: 14px; color: var(--text-muted); }
.cm-claiming { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 12px 14px; border-radius: 10px; background: var(--ink); color: var(--on-dark); }
.cm-claiming span { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--on-dark-muted); }
.cm-claiming b { font-family: var(--font-display); font-stretch: 85%; font-weight: 800; font-size: 22px; text-transform: uppercase; color: var(--lime); overflow-wrap: anywhere; }
.cm-claiming a { margin-left: auto; font-size: 13px; color: var(--on-dark); }
.cm-check { margin: 0; padding: 10px 12px; border-radius: 8px; font-size: 14px; }
.cm-check.is-ok { background: rgba(180, 223, 52, .28); }
.cm-check.is-warn { background: var(--cream); color: #6b4a12; }
.sb-aside .cm-aside-h { margin-top: 24px; }
.cm-aside-p { margin: 0; color: var(--on-dark-muted); font-size: 15px; }
.cm-aside-p a { color: var(--lime); }
/* ==== Shopper tools: My shelf, compare any four, barcode scanner, units calculator, the Drink Finder quiz (tools/build_tools_pages.py) ==== */
/* Save and Compare buttons (assets/shelf.js) */
.sf-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.sf-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--text); font: 600 13px/1 var(--font-body); cursor: pointer; white-space: nowrap; }
.sf-btn svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; }
.sf-btn:hover, .sf-btn:focus-visible { border-color: var(--ink); }
.sf-btn[aria-pressed="true"] { background: var(--ink); color: var(--lime); border-color: var(--ink); }
.sf-btn--save[aria-pressed="true"] svg { fill: var(--lime); stroke: var(--lime); }
.sf-btn--cmp[aria-pressed="true"] svg { fill: rgba(var(--lime-rgb), .35); }
@media (pointer: coarse) { .sf-btn { min-height: 44px; padding: 0 14px; } }
.rk-card--row .rk-acts .sf-btn { min-height: 32px; padding: 0 10px; font-size: 12.5px; }
@media (pointer: coarse) { .rk-card--row .rk-acts .sf-btn { min-height: 44px; } }
.sf-acts--card { margin-top: 4px; }
.sf-acts--bt { margin-top: 14px; align-items: center; }
.sf-acts--bt .sf-btn { border-color: rgba(243,245,239,.3); color: var(--on-dark); }
.sf-acts--bt .sf-btn:hover, .sf-acts--bt .sf-btn:focus-visible { border-color: var(--lime); }
.sf-acts--bt .sf-btn[aria-pressed="true"] { background: var(--lime); color: var(--ink); border-color: var(--lime); }
.sf-acts--bt .sf-btn--save[aria-pressed="true"] svg { fill: var(--ink); stroke: var(--ink); }
.sf-link { color: var(--on-dark-muted); font-size: 13.5px; }
.sf-acts--dr { margin-top: 10px; }
.sf-count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; margin-left: 4px; border-radius: 999px; background: var(--lime); color: var(--ink); font: 700 11.5px/1 var(--font-body); vertical-align: 1px; }
.sf-toast { position: fixed; z-index: 75; left: 50%; bottom: 18px; width: max-content; max-width: calc(100vw - 32px); padding: 12px 16px; border-radius: 12px; background: var(--ink); color: var(--on-dark); border: 1px solid rgba(var(--lime-rgb), .45); box-shadow: 0 18px 40px -18px rgba(0,0,0,.6); font-size: 14px; line-height: 1.4; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; transition: transform .25s ease, opacity .25s ease; }
.sf-toast.is-on { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
.sf-toast a { color: var(--lime); font-weight: 600; }
.sf-undo { min-height: 32px; margin-left: 6px; padding: 0 12px; border: 1px solid var(--lime); border-radius: 999px; background: none; color: var(--lime); font: 700 13px/1 var(--font-body); cursor: pointer; }
.sf-undo:hover, .sf-undo:focus-visible { background: var(--lime); color: var(--ink); }
@media (pointer: coarse) { .sf-undo { min-height: 44px; } }
/* the heart in the header with the saved count (assets/shelf.js), beside the menu button */
.sf-nav { flex: none; position: relative; display: inline-grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--line-dark); border-radius: 8px; color: var(--on-dark); text-decoration: none; }
.sf-nav--m { margin-left: auto; }
.sf-nav--d { width: 40px; height: 40px; border-radius: 999px; }
@media (min-width: 1100px) { .sf-nav--m { display: none; } }
@media (max-width: 1399px) { .sf-nav--d { display: none; } }  /* the laptop header has no room for it below 1400px */
.sf-nav svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; }
.sf-nav:not(.is-empty) svg { fill: var(--lime); stroke: var(--lime); }
.sf-nav:hover, .sf-nav:focus-visible, .sf-nav[aria-current] { border-color: var(--lime); }
.sf-nav-n { position: absolute; top: -7px; right: -7px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: var(--lime); color: var(--ink); font: 800 11.5px/20px var(--font-body); text-align: center; }
.sf-nav.is-empty .sf-nav-n { display: none; }
body.sf-has-bar { padding-bottom: 84px; }
body.sf-has-bar .sf-toast { bottom: 92px; }
.sf-bar { position: fixed; z-index: 55; left: 16px; right: 16px; bottom: max(12px, env(safe-area-inset-bottom)); max-width: 820px; margin: 0 auto; padding: 8px 8px 8px 16px; border-radius: 16px; background: var(--ink); color: var(--on-dark); border: 1px solid rgba(var(--lime-rgb), .4); box-shadow: 0 18px 40px -16px rgba(0,0,0,.6); }
.sf-bar[hidden] { display: none; }
.sf-bar-in { display: flex; align-items: center; gap: 10px; min-width: 0; }
.sf-bar-k { flex: none; font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--lime); }
.sf-bar-list { display: flex; gap: 6px; min-width: 0; flex: 1; margin: 0; padding: 0; list-style: none; overflow-x: auto; scrollbar-width: none; }
.sf-bar-list li { display: inline-flex; align-items: center; gap: 2px; flex: none; max-width: 190px; padding: 0 2px 0 10px; border-radius: 999px; background: rgba(255,255,255,.08); font-size: 13px; }
.sf-bar-list span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-bar-list button { width: 32px; height: 32px; border: 0; background: none; color: var(--on-dark-muted); font-size: 18px; cursor: pointer; }
.sf-bar-list button:hover { color: var(--lime); }
.sf-bar-hint { flex: none; color: var(--on-dark-muted); font-size: 12px; }
.sf-bar-add { position: relative; flex: 0 1 220px; min-width: 120px; }
.sf-bar-add input { width: 100%; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06); color: var(--on-dark); font: 500 14px/1 var(--font-body); }
.sf-bar-add input::placeholder { color: var(--on-dark-muted); }
.sf-bar-add input:focus { outline: none; border-color: var(--lime); }
.sf-bar-res { position: absolute; left: 0; bottom: calc(100% + 10px); width: min(420px, calc(100vw - 32px)); max-height: 60vh; overflow-y: auto; padding: 6px; border-radius: 14px; background: var(--ink); border: 1px solid rgba(var(--lime-rgb), .4); box-shadow: 0 18px 40px -16px rgba(0,0,0,.6); }
.sf-bar-res[hidden] { display: none; }
.sf-bar-res button { display: block; width: 100%; min-height: 44px; padding: 8px 10px; border: 0; border-radius: 10px; background: none; color: var(--on-dark); font: 400 14px/1.3 var(--font-body); text-align: left; cursor: pointer; }
.sf-bar-res button:hover, .sf-bar-res button:focus-visible { background: rgba(255,255,255,.08); outline: none; }
.sf-bar-res p { margin: 0; padding: 10px; color: var(--on-dark-muted); font-size: 13px; }
.sf-bar-x { flex: none; min-height: 44px; padding: 0 10px; border: 0; background: none; color: var(--on-dark-muted); font: 600 13px/1 var(--font-body); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.sf-bar-go { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 18px; border-radius: 999px; background: var(--lime); color: var(--ink); font: 700 14px/1 var(--font-body); text-decoration: none; }
.sf-bar-go:hover { background: var(--white); }
@media (max-width: 640px) { .sf-bar-list, .sf-bar-hint { display: none; } .sf-bar-in { justify-content: space-between; } .sf-bar-add { flex: 1 1 auto; } .sf-bar-k { display: none; } }

/* the hub: scan from the search box, and the tools door */
.hs input[data-hs-q] { padding-right: 116px; }
.tk-hs-scan { position: absolute; right: 8px; top: 30px; transform: translateY(-50%); display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px; border-radius: 999px; background: var(--ink); color: var(--lime); font: 700 14px/1 var(--font-body); text-decoration: none; }
.tk-hs-scan svg { width: 20px; height: 20px; }
.tk-hs-scan:hover, .tk-hs-scan:focus-visible { background: var(--forest-3); }
@media (max-width: 480px) { .hs input[data-hs-q] { padding-right: 64px; } .tk-hs-scan { padding: 0 12px; } .tk-hs-scan span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } }
.tk-door { grid-column: 1 / -1; }
.tk-more { color: var(--text-muted); }
.tk-steps { counter-reset: tl; display: grid; gap: 14px; margin: 0 0 clamp(32px, 5vw, 56px); padding: 0; list-style: none; }
@media (min-width: 820px) { .tk-steps { grid-template-columns: repeat(3, 1fr); } }
.tk-steps li { counter-increment: tl; display: grid; gap: 6px; padding: 18px 20px; border-radius: 16px; background: var(--white); border: 1px solid var(--line); }
.tk-steps li::before { content: counter(tl); display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--lime); color: var(--ink); font: 800 16px/1 var(--font-display); }
.tk-steps b { font-size: 17px; }
.tk-steps span { font-size: 14.5px; color: var(--text-muted); }

/* My shelf (assets/myshelf.js) */
.ms { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(28px, 4vw, 44px); min-width: 0; }
.ms > *, .ms-loading > * { min-width: 0; }
.ms-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ms-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; padding: 14px 18px; border-radius: 14px; background: var(--cream); border-left: 4px solid var(--lime-deep); }
.ms-banner p { flex: 1 1 260px; margin: 0; }
.ms-banner .rk-btn, .ms-share .rk-btn { min-height: 44px; }
/* the bar: count, total, share, filter and sort */
.ms-tb { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 16px 18px; border-radius: 16px; background: var(--white); border: 1px solid var(--line); }
.ms-tb-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.ms-sum { margin: 0; font-size: 17px; line-height: 1.4; }
.ms-sum b { font-family: var(--font-display); font-weight: 800; }
.ms-sum-down { color: #2f5a3a; font-weight: 600; }
.ms-share { display: flex; flex-wrap: wrap; gap: 8px; }
.ms-link { display: grid; gap: 6px; margin: 0; }
.ms-link[hidden] { display: none; }
.ms-link label { display: grid; gap: 6px; font-size: 13px; font-weight: 600; }
.ms-link input { width: 100%; min-width: 0; min-height: 44px; padding: 0 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); font: 16px var(--font-mono); color: var(--text); }
.ms-link span { font-size: 13px; color: #2f5a3a; }
.ms-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.ms-chips { flex: 0 1 auto; display: flex; gap: 6px; min-width: 0; max-width: 100%; overflow-x: auto; scrollbar-width: none; margin: -2px; padding: 2px; }
.ms-chips::-webkit-scrollbar { display: none; }
.ms-chips button { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--white); color: var(--text); font: 600 13.5px/1 var(--font-body); cursor: pointer; }
.ms-chips button span { color: var(--text-muted); font-weight: 500; }
.ms-chips button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--lime); }
.ms-chips button[aria-pressed="true"] span { color: var(--on-dark-muted); }
.ms-sort { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--text-muted); }
.ms-sort select { min-height: 44px; padding: 0 36px 0 14px; border: 1px solid var(--line); border-radius: 999px; appearance: none; background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%230a0f0c' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 14px center / 11px 8px; color: var(--text); font: 600 14px/1 var(--font-body); cursor: pointer; }
.ms-scan { font-size: 12px; color: var(--text-muted); }
/* a saved bottle */
.ms-list { display: grid; gap: 12px; align-items: stretch; }  /* every card in a row the same height */
@media (min-width: 900px) { .ms-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ms-item { display: grid; grid-template-columns: 76px minmax(0, 1fr); grid-template-areas: "ph main" "acts acts" "al al"; grid-template-rows: 1fr auto auto; gap: 12px 14px; padding: 14px; border-radius: 16px; background: var(--white); border: 1px solid var(--line); }
@media (min-width: 520px) { .ms-item { grid-template-columns: 96px minmax(0, 1fr); grid-template-areas: "ph main" "ph acts" "al al"; } }
.ms-item.is-new { animation: ms-in .6s ease; }
@keyframes ms-in { from { box-shadow: 0 0 0 3px var(--lime); } to { box-shadow: 0 0 0 0 rgba(var(--lime-rgb), 0); } }
@media (prefers-reduced-motion: reduce) { .ms-item.is-new { animation: none; } }
.ms-ph { grid-area: ph; display: grid; place-items: center; align-self: start; height: 112px; border-radius: 10px; background: var(--paper); }
@media (min-width: 520px) { .ms-ph { height: 128px; } }
.ms-ph img { display: block; max-width: 86%; max-height: 100px; object-fit: contain; mix-blend-mode: multiply; }
.ms-main { grid-area: main; display: grid; gap: 4px; align-content: start; min-width: 0; }
.ms-name { display: grid; color: var(--text); text-decoration: none; }
.ms-name b { font-family: var(--font-display); font-weight: 800; font-size: 17px; line-height: 1.2; }
.ms-name span { font-size: 14px; line-height: 1.35; color: var(--text-muted); }
.ms-name:hover b, .ms-name:focus-visible b { text-decoration: underline; text-underline-offset: 3px; }
.ms-meta { font-size: 12px; line-height: 1.4; color: var(--text-muted); }
.ms-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; margin: 4px 0 0; }
.ms-price strong { font-family: var(--font-display); font-weight: 800; font-size: 24px; line-height: 1; }
.ms-price span { font-size: 13px; color: var(--text-muted); }
.ms-price--off { font-size: 14px; color: var(--text-muted); }
.ms-delta, .ms-usual { justify-self: start; margin: 2px 0 0; padding: 4px 9px; border-radius: 6px; font-size: 13px; font-weight: 600; line-height: 1.3; }
.ms-delta--down { background: rgba(var(--lime-rgb), .45); color: var(--ink); }
.ms-delta--up { background: var(--cream); color: #7a3b1a; }
.ms-usual { padding: 0; font-weight: 500; color: #2f5a3a; }
.ms-acts { grid-area: acts; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; align-self: end; }
.ms-acts .rk-btn, .ms-acts .sf-btn { min-height: 44px; }
.ms-buy { padding: 0 16px; font-size: 14px; }
.ms-rm span[aria-hidden] { font-size: 18px; line-height: 1; margin-top: -2px; }
.ms-rm:hover, .ms-rm:focus-visible { border-color: #9c2f2b; color: #9c2f2b; }
@media (max-width: 519px) {
  .ms-rm { width: 44px; justify-content: center; padding: 0; } .ms-rm span:last-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .ms-acts { flex-wrap: nowrap; } .ms-buy { flex: 1 1 auto; justify-content: center; min-width: 0; padding: 0 12px; }
  .ms-al-f { flex: 1 1 calc(100% - 28px); } .ms-al-f .al-gbp { flex: 1; width: auto; }
  .ms-al-go, .ms-al-any { flex: 1 1 0; }
}
/* the price alert on each bottle (a data-al-mini form, sent by assets/alerts.js) */
.ms-al { grid-area: al; display: grid; gap: 10px; align-self: end; min-height: 57px; margin: 0; padding: 12px 0 0; border-top: 1px dashed var(--line); min-width: 0; }
.ms-al svg { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.ms-al-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ms-al-f { display: inline-flex; align-items: center; gap: 8px; min-width: 0; font-size: 14px; font-weight: 600; }
.ms-al-f .al-gbp { width: 104px; }
.ms-al-f input, .ms-al-e input { width: 100%; height: 44px; padding: 0 10px 0 26px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); color: var(--text); font: 600 16px var(--font-mono); }
.ms-al-f .al-gbp i { left: 10px; }
.ms-al-f input:focus, .ms-al-e input:focus { outline: 2px solid var(--lime-deep); outline-offset: 1px; border-color: var(--ink); }
.ms-al-go, .ms-al-any { min-height: 44px; padding: 0 16px; border-radius: 999px; font: 700 14px/1 var(--font-body); cursor: pointer; }
.ms-al-go { border: 1px solid var(--ink); background: var(--ink); color: var(--lime); }
.ms-al-any { border: 1px solid var(--line); background: var(--white); color: var(--text); }
.ms-al-go:hover, .ms-al-go:focus-visible { background: #000; }
.ms-al-any:hover, .ms-al-any:focus-visible { border-color: var(--ink); }
.ms-al-go[disabled], .ms-al-ok[disabled] { opacity: .6; cursor: progress; }
.ms-al-mail { display: grid; gap: 8px; padding: 12px; border-radius: 12px; background: var(--paper); }
.ms-al-mail[hidden] { display: none; }
.ms-al-e { display: grid; gap: 4px; font-size: 13px; font-weight: 600; }
.ms-al-e input { padding-left: 12px; font-family: var(--font-body); font-weight: 500; background: var(--white); }
.ms-al .al-consent { min-height: 44px; font-size: 13.5px; }
.ms-al-ok { justify-self: start; min-height: 44px; padding: 0 18px; font-size: 14px; }
.ms-al .al-small { font-size: 12px; }
.ms-al-st { font-size: 13.5px; }
.ms-al--on { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 14px; }
.ms-al--on svg { color: var(--ink); fill: var(--lime); }
.ms-al-k { font-weight: 600; }
.ms-al-acts { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; gap: 0 14px; margin-left: auto; }
.ms-al-link.ms-al-email { font-weight: 500; font-size: 13px; color: var(--text-muted); }
.ms-al-link[disabled] { opacity: .5; cursor: progress; }
.ms-al-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0; background: none; color: var(--text); font: 600 14px/1 var(--font-body); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.ms-me { margin: -16px 0 0; font-size: 13px; color: var(--text-muted); }
.ms-me .ms-al-link { font-size: 13px; color: var(--text-muted); }
/* empty, loading, gone */
.ms-empty { display: flex; align-items: center; gap: 18px; padding: clamp(20px, 4vw, 32px); border-radius: 20px; background: var(--ink); color: var(--on-dark); }
.ms-empty h2 { margin: 0 0 6px; color: var(--on-dark); font-size: clamp(26px, 4vw, 38px); }
.ms-empty p { margin: 0; color: var(--on-dark-muted); font-size: 16px; }
.ms-empty p b { color: var(--lime); }
.ms-empty-i { flex: none; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: rgba(var(--lime-rgb), .12); }
.ms-empty-i svg { width: 28px; height: 28px; fill: none; stroke: var(--lime); stroke-width: 1.6; stroke-linejoin: round; }
@media (max-width: 519px) { .ms-empty { align-items: flex-start; } .ms-empty-i { width: 44px; height: 44px; } .ms-empty-i svg { width: 22px; height: 22px; } }
.ms-loading { display: grid; gap: 16px; }
.ms-tb--ghost { height: 76px; }
.ms-item--ghost { grid-template-areas: "ph main"; grid-template-rows: auto; }
.ms-item--ghost .ms-ph, .ms-tb--ghost, .ms-ghost-l i { background: linear-gradient(90deg, var(--paper) 0, #ece9df 50%, var(--paper) 100%) 0 0 / 200% 100%; animation: ms-shine 1.2s linear infinite; }
.ms-ghost-l { display: grid; gap: 10px; align-content: start; padding-top: 4px; }
.ms-ghost-l i { display: block; height: 14px; border-radius: 6px; } .ms-ghost-l i:nth-child(1) { width: 70%; height: 18px; } .ms-ghost-l i:nth-child(2) { width: 45%; } .ms-ghost-l i:nth-child(3) { width: 30%; height: 24px; }
@keyframes ms-shine { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .ms-item--ghost .ms-ph, .ms-tb--ghost, .ms-ghost-l i { animation: none; } }
.ms-gone { margin: 0; }
.ms-clean { min-height: 44px; padding: 0; border: 0; background: none; color: var(--text); font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
/* suggestions: a row of bottles to save */
.ms-row { display: grid; gap: 12px; min-width: 0; }
.ms-row + .ms-row { margin-top: 8px; }
.ms-row-h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; }
.ms-row-h h3 { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: clamp(20px, 2.4vw, 26px); text-transform: uppercase; letter-spacing: -.01em; }
.ms-row-h a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: 14px; font-weight: 600; color: var(--text); text-underline-offset: 3px; }
.ms-strip { display: grid; gap: 12px; grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 1099px) { .ms-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 719px) { .ms-strip { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 46%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 calc(-1 * var(--gutter)); padding: 2px var(--gutter) 6px; scroll-padding: 0 var(--gutter); } .ms-strip::-webkit-scrollbar { display: none; } .ms-sg { scroll-snap-align: start; } }
.ms-sg { display: grid; grid-template-rows: auto auto 1fr auto; gap: 6px; min-width: 0; padding: 10px; border-radius: 14px; background: var(--white); border: 1px solid var(--line); }
.ms-sg-ph { position: relative; display: grid; place-items: center; height: 148px; border-radius: 10px; background: var(--paper); }
.ms-sg-ph img { display: block; max-width: 80%; max-height: 132px; object-fit: contain; mix-blend-mode: multiply; }
.ms-sg-tag { position: absolute; left: 6px; top: 6px; max-width: calc(100% - 12px); padding: 4px 8px; border-radius: 999px; background: var(--ink); color: var(--lime); font: 600 11px/1.2 var(--font-body); font-style: normal; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-sg-name { display: grid; min-width: 0; color: var(--text); text-decoration: none; }
.ms-sg-name b { font-family: var(--font-display); font-weight: 800; font-size: 15px; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-sg-name span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 13px; line-height: 1.35; color: var(--text-muted); }
.ms-sg-price { display: flex; align-items: baseline; gap: 6px; margin: 0; align-self: end; }
.ms-sg-price strong { font-family: var(--font-display); font-weight: 800; font-size: 18px; }
.ms-sg-price { flex-wrap: wrap; } .ms-sg-price small { font-size: 12px; color: #2f5a3a; }
.ms-sg-save { justify-content: center; width: 100%; min-height: 44px; }

/* Compare any four */
.cq-pick { padding: clamp(18px, 3vw, 28px); border-radius: 20px; background: var(--ink); color: var(--on-dark); }
.cq-slots { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.cq-slot { position: relative; min-width: 0; }
.cq-slot .fd-search { max-width: none; }
.cq-slot .fd-search > svg { left: 16px; }
.cq-slot .fd-search input { min-height: 52px; padding: 0 14px 0 44px; font-size: 16px; }
.cq-slot .fd-sug { right: auto; width: max(100%, 340px); }
.cq-slot:nth-child(4) .fd-sug { left: auto; right: 0; }
.cq-slot.is-on { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 44px 8px 8px; border: 1px solid var(--lime); border-radius: 18px; background: rgba(255,255,255,.06); }
.cq-slot.is-on img { flex: none; width: 44px; height: 56px; object-fit: contain; padding: 3px; background: #fff; border-radius: 10px; }
.cq-slot-t { display: grid; min-width: 0; gap: 2px; }
.cq-slot-t b { font-family: var(--font-display); font-weight: 800; font-size: 15px; line-height: 1.1; color: var(--on-dark); overflow-wrap: anywhere; }
.cq-slot-t span { font-size: 12.5px; line-height: 1.3; color: var(--on-dark-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cq-slot-x { position: absolute; top: 50%; right: 2px; width: 44px; height: 44px; transform: translateY(-50%); border: 0; border-radius: 50%; background: none; color: var(--on-dark); font-size: 22px; line-height: 1; cursor: pointer; }
.cq-slot-x:hover, .cq-slot-x:focus-visible { color: var(--lime); }
.cq-bar { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px; margin-top: 4px; }
.cq-try { flex: 1 1 360px; min-width: 0; }
.cq-choose { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 14px; padding: 0 18px; border: 1px solid var(--lime); border-radius: 999px; background: none; color: var(--lime); font: 600 14px/1 var(--font-body); cursor: pointer; }
.cq-choose svg { width: 18px; height: 18px; }
.cq-choose:hover, .cq-choose:focus-visible { background: var(--lime); color: var(--ink); }
.cq-dlg { width: min(520px, calc(100vw - 32px)); max-height: calc(100vh - 48px); padding: 0; border: 0; border-radius: 20px; background: var(--ink); color: var(--on-dark); box-shadow: 0 30px 80px -20px rgba(0,0,0,.6); }
.cq-dlg::backdrop { background: rgba(10,15,12,.6); }
.cq-dlg form { display: grid; gap: 14px; padding: 20px; }
.cq-dlg-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cq-dlg h2 { margin: 0; font-size: 22px; color: var(--on-dark); }
.cq-dlg-x { flex: none; width: 44px; height: 44px; margin: -6px -8px -6px 0; border: 0; border-radius: 50%; background: none; color: var(--on-dark); font-size: 24px; line-height: 1; cursor: pointer; }
.cq-dlg-x:hover, .cq-dlg-x:focus-visible { color: var(--lime); }
.cq-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin: 0; padding: 0; border: 0; }
.cq-opt { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 12px; border: 1px solid rgba(var(--lime-rgb), .25); border-radius: 12px; font-size: 14.5px; cursor: pointer; }
.cq-opt:has(input:checked) { border-color: var(--lime); background: rgba(var(--lime-rgb), .08); }
.cq-opt input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--lime); }
.cq-dlg-foot { display: flex; justify-content: flex-end; gap: 8px; }
.cq-dlg-foot .rk-btn { min-height: 44px; padding: 0 20px; font-size: 14px; }
.cq-dlg-foot .rk-btn--buy { background: var(--lime); color: var(--ink); border-color: var(--lime); }
@media (max-width: 760px) {
  .cq-slots { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .cq-slot:not(.is-on) { position: static; }
  .cq-slots { position: relative; }
  .cq-slot .fd-sug, .cq-slot:nth-child(4) .fd-sug { left: 0; right: 0; width: auto; top: auto; margin-top: 8px; }
  .cq-slot .fd-search { position: static; }
  .cq-slot .fd-search input { padding: 0 10px 0 38px; font-size: 15px; }
  .cq-slot .fd-search input::-webkit-search-cancel-button { display: none; }
  .cq-slot .fd-search > svg { left: auto; top: auto; width: 18px; height: 18px; transform: translate(13px, 17px); }  /* static position: the slot's corner, while the list spans both columns */
  .cq-slot.is-on { gap: 8px; padding: 8px 32px 8px 8px; border-radius: 16px; }
  .cq-slot.is-on img { width: 30px; height: 42px; padding: 2px; border-radius: 8px; }
  .cq-slot-t b { font-size: 14px; overflow-wrap: break-word; }
  .cq-slot-x { width: 36px; right: 0; font-size: 20px; }
  .cq-opt { gap: 8px; padding: 6px 10px; font-size: 14px; line-height: 1.2; }
  .cq-choose { margin-top: 0; }
}
.cq-out { margin-top: 24px; }
.cq-wrap { margin-top: 0; }
.cq-table, .uc-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.cq-table th, .cq-table td, .uc-table th, .uc-table td { padding: 10px 10px 10px 0; border-bottom: 1px solid var(--line); text-align: left; font-variant-numeric: tabular-nums; }
.cq-table thead th, .uc-table thead th { border-bottom: 2px solid var(--ink); }
.uc-table thead th { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); white-space: nowrap; }
.cq-table { table-layout: fixed; min-width: 560px; }
.cq-table.cq-n3 { min-width: 720px; }
.cq-table.cq-n4 { min-width: 900px; }
.cq-table th[scope="row"] { position: sticky; left: 0; z-index: 1; width: 128px; padding-right: 12px; background: var(--paper); color: var(--text-muted); font: 600 11.5px/1.3 var(--font-mono); letter-spacing: .04em; text-transform: uppercase; vertical-align: top; white-space: normal; }
.cq-table thead th { position: relative; vertical-align: bottom; text-transform: none; letter-spacing: 0; font: inherit; color: var(--text); white-space: normal; }
.cq-table thead th:first-child { position: sticky; left: 0; z-index: 1; width: 128px; background: var(--paper); }
.cq-table td { vertical-align: top; font-size: 14px; line-height: 1.45; }
.cq-table td small { display: block; color: var(--text-muted); font-size: 12px; }
.cq-table td .rk-btn { margin: 0 6px 6px 0; min-height: 40px; }
.cq-bottle { display: grid; gap: 2px; padding-right: 30px; color: var(--text); text-decoration: none; }
.cq-bottle img { width: 72px; height: 90px; object-fit: contain; margin-bottom: 6px; }
.cq-bottle b { font-family: var(--font-display); font-weight: 800; font-size: 16px; line-height: 1.1; }
.cq-bottle span { font-size: 13px; color: var(--text-muted); line-height: 1.3; }
.cq-x { position: absolute; top: 8px; right: 6px; width: 36px; height: 36px; border: 1px solid var(--line); border-radius: 50%; background: var(--white); color: var(--text); font-size: 18px; line-height: 1; cursor: pointer; }
.cq-x:hover { border-color: var(--ink); }
.cq-best { background: linear-gradient(transparent 55%, var(--lime) 55%); font-weight: 700; }
.cq-hi { font-weight: 700; }
.cq-table td .rk-btn { white-space: normal; }
@media (max-width: 600px) {
  .cq-table th[scope="row"], .cq-table thead th:first-child { width: 88px; font-size: 10.5px; }
  .cq-table, .cq-table.cq-n2 { min-width: 100%; }
  .cq-table.cq-n3 { min-width: 540px; }
  .cq-table.cq-n4 { min-width: 700px; }
  .cq-bottle img { width: 56px; height: 70px; }
}
.cq-share { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 8px; font-size: 13px; color: #2f5a3a; }
.cq-share .rk-btn { min-height: 44px; }

/* the barcode scanner */
.bc { max-width: 760px; }
.bc-cam { position: relative; aspect-ratio: 4 / 3; margin: 0 0 16px; border-radius: 20px; overflow: hidden; background: #000; }
@media (max-width: 600px) { .bc-cam { aspect-ratio: 3 / 4; } }
.bc-cam[hidden] { display: none; }
.bc-cam video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bc-frame { position: absolute; left: 10%; right: 10%; top: 32%; bottom: 32%; border: 3px solid var(--lime); border-radius: 14px; box-shadow: 0 0 0 999px rgba(0,0,0,.38); }
.bc-frame::after { content: ""; position: absolute; left: 6%; right: 6%; top: 50%; height: 2px; background: var(--lime); box-shadow: 0 0 12px var(--lime); animation: bc-line 1.8s ease-in-out infinite alternate; }
@keyframes bc-line { from { transform: translateY(-34px); } to { transform: translateY(34px); } }
@media (prefers-reduced-motion: reduce) { .bc-frame::after { animation: none; } }
.bc-stop { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); min-height: 44px; padding: 0 18px; border: 0; border-radius: 999px; background: rgba(10,15,12,.8); color: var(--on-dark); font: 600 14px/1 var(--font-body); cursor: pointer; }
.bc-start { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.bc-start [hidden] { display: none; }
.bc-go { gap: 10px; }
.bc-go svg { width: 22px; height: 22px; }
.bc-photo { min-height: 44px; cursor: pointer; }
.bc-status { min-height: 1.5em; margin: 14px 0; font-size: 15px; }
.bc-type { margin: 8px 0 0; padding: 16px 18px; border-radius: 16px; background: var(--white); border: 1px solid var(--line); }
.bc-type label { display: block; margin-bottom: 8px; font-size: 14px; font-weight: 600; }
.bc-type div { display: flex; flex-wrap: wrap; gap: 8px; }
.bc-type input { flex: 1 1 200px; min-width: 0; min-height: 48px; padding: 0 16px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); font: 500 17px/1 var(--font-mono); letter-spacing: .04em; color: var(--text); }
.bc-type input:focus { outline: 3px solid var(--lime); outline-offset: 1px; }
.bc-type .rk-btn { min-height: 48px; padding: 0 20px; }
.bc-out:not(:empty) { margin-top: 20px; }
.bc-miss { padding: 18px 20px; border-radius: 16px; background: var(--white); border: 1px solid var(--line); border-left: 4px solid var(--lime-deep); }
.bc-miss h2 { font-size: clamp(26px, 3.6vw, 34px); margin-bottom: 8px; }
.bc-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.bc-links .rk-btn { min-height: 44px; white-space: normal; text-align: left; }

/* the units calculator */
.uc-grid { display: grid; gap: 20px; align-items: start; }
@media (min-width: 900px) { .uc-grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); } .uc-tot { position: sticky; top: 92px; } }
.uc .fd-step { color: var(--text-muted); }
.uc-tot { scroll-margin-top: 84px; }
.uc-presets { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 148px), 1fr)); }
.uc-pre { display: grid; gap: 3px; min-height: 60px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--white); color: var(--text); text-align: left; font: 14.5px/1.25 var(--font-body); cursor: pointer; }
.uc-pre:hover, .uc-pre:focus-visible { border-color: var(--ink); }
.uc-pre small { font-size: 12px; color: var(--text-muted); }
.uc-more { margin-top: 12px; padding: 4px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--white); }
.uc-more > summary { display: flex; align-items: center; min-height: 48px; font-weight: 600; cursor: pointer; }
.uc-more[open] > summary { margin-bottom: 6px; }
.uc-more .fd-search input { min-height: 48px; border: 1px solid var(--line); }
.uc-note { margin: 10px 0 12px; font-size: 13px; color: var(--text-muted); }
.uc-own { display: grid; gap: 10px; padding-bottom: 14px; }
.uc-own label { display: grid; gap: 4px; font-size: 13px; font-weight: 600; }
.uc-own small { font-weight: 400; color: var(--text-muted); }
.uc-own input, .uc-own select { min-height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); font: 16px var(--font-body); color: var(--text); }
.uc-own .rk-btn { justify-self: start; min-height: 44px; }
.uc-row { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; }
.uc-err { margin: 0; font-size: 13px; color: #a33; }
.uc-err:empty { display: none; }
.uc-tot { padding: 18px 20px; border-radius: 20px; background: var(--white); border: 1px solid var(--line); }
.uc-list { display: grid; gap: 8px; margin: 0 0 16px; padding: 0; list-style: none; }
.uc-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.uc-list li > div:first-child { display: grid; gap: 2px; min-width: 0; }
.uc-list b { font-size: 14.5px; }
.uc-list small { font-size: 12px; color: var(--text-muted); }
.uc-step { display: flex; align-items: center; gap: 6px; flex: none; }
.uc-step button { width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 50%; background: var(--paper); color: var(--text); font: 600 18px/1 var(--font-body); cursor: pointer; }
@media (pointer: coarse) { .uc-step button { width: 44px; height: 44px; } }
.uc-step span { min-width: 22px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.uc-empty { color: var(--text-muted); font-size: 14px; }
.uc-sum { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0 0 14px; }
.uc-sum div { display: grid; gap: 2px; padding: 12px 14px; border-radius: 14px; background: var(--ink); color: var(--on-dark); }
.uc-sum b { font: 800 clamp(30px, 4vw, 42px)/1 var(--font-display); color: var(--lime); font-variant-numeric: tabular-nums; }
.uc-sum span { font-size: 12.5px; color: var(--on-dark-muted); }
.uc-guide { margin: 0; padding: 12px 14px; border-radius: 12px; background: var(--cream); font-size: 14px; line-height: 1.5; }
.uc-acts { margin: 12px 0 0; }
.uc-acts .rk-btn { min-height: 44px; }
.uc-cmo { margin: 28px 0 0; padding: 16px 22px; background: var(--white); border: 1px solid var(--line); border-left: 4px solid var(--lime-deep); }
.uc-cmo p { margin: 8px 0 0; font-size: 15.5px; line-height: 1.6; max-width: 80ch; }
.uc-table td { text-align: right; }
.uc-table th:not(:first-child) { text-align: right; }
.uc-table tbody th { font: 600 14px/1.3 var(--font-body); color: var(--text); text-transform: none; letter-spacing: 0; padding: 10px 10px 10px 0; border-bottom: 1px solid var(--line); white-space: normal; }

/* the Drink Finder quiz and the taste profile card (assets/finder.js) */
.fd-quiz { scroll-margin-top: 84px; }
.qz-prog { height: 6px; margin: 0 0 14px; border-radius: 999px; background: var(--cream); overflow: hidden; }
.qz-prog i { display: block; height: 100%; background: var(--lime-deep); border-radius: 999px; transition: width .25s ease; }
.qz-n { margin: 0; font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
.qz-h { margin: 6px 0 14px; font: 800 clamp(24px, 3.4vw, 32px)/1.05 var(--font-display); outline: none; }
.qz-opts { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 132px), 1fr)); }
.qz-opt { min-height: 52px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); color: var(--text); font: 600 15px/1.2 var(--font-body); text-align: left; cursor: pointer; }
.qz-opt:hover, .qz-opt:focus-visible { border-color: var(--ink); }
.qz-opt.is-on { background: var(--ink); color: var(--lime); border-color: var(--ink); }
.qz-also { margin: 16px 0 8px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.qz-opts--sm .qz-opt { min-height: 44px; font-size: 14px; }
.qz-back { margin-top: 14px; min-height: 44px; padding: 0; border: 0; background: none; color: var(--text-muted); font: 600 14px/1 var(--font-body); cursor: pointer; }
.qz-card { position: relative; overflow: hidden; padding: clamp(20px, 4vw, 34px); border-radius: 20px; background: var(--ink); color: var(--on-dark); }
.qz-in { position: relative; }
.qz-title { margin: 4px 0 8px; font: 800 clamp(30px, 5.4vw, 54px)/.95 var(--font-display); font-stretch: 75%; text-transform: uppercase; color: var(--on-dark); outline: none; }
.qz-meta { margin: 0 0 14px; color: var(--on-dark-muted); font-size: 15px; }
.qz-flavs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; }
.qz-flavs i { padding: 7px 14px; border-radius: 999px; background: var(--lime); color: var(--ink); font: 600 14px/1 var(--font-body); font-style: normal; }
.qz-picks { display: grid; gap: 10px; margin: 0 0 20px; padding: 0; list-style: none; counter-reset: qz; }
.qz-picks li { counter-increment: qz; }
.qz-picks a { display: grid; grid-template-columns: 22px 44px minmax(0, 1fr); align-items: center; gap: 12px; color: var(--on-dark); text-decoration: none; font-size: 15px; line-height: 1.3; }
.qz-picks a::before { content: counter(qz); font: 800 24px/1 var(--font-display); color: var(--lime); }
.qz-picks img { width: 44px; height: 54px; object-fit: contain; padding: 3px; border-radius: 8px; background: #fff; }
.qz-picks small { display: block; color: var(--on-dark-muted); font-size: 13px; }
.qz-picks a:hover b { text-decoration: underline; }
.qz-acts { display: flex; flex-wrap: wrap; gap: 10px; }
.qz-acts .rk-btn { min-height: 48px; }
.qz-msg { margin: 10px 0 0; min-height: 1.2em; color: var(--lime); font-size: 13.5px; word-break: break-all; }
.qz-gift { margin: 16px 0 0; padding: 12px 16px; border-radius: 12px; background: var(--cream); font-size: 15px; }
/* ==== Occasions, food pairing, gifts and the gift finder (tools/build_occasions.py) ==== */
.oc-why { margin: 0; padding: 8px 10px; border-radius: 8px; background: var(--cream); font-size: 13px; line-height: 1.45; color: var(--text); }
.oc-why b { display: block; margin-bottom: 2px; font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
.oc-cta { border-left-color: var(--lime); }
.oc-cta a, .sh-note a { color: var(--text); font-weight: 600; }
.oc-calc { margin: 0 0 clamp(24px, 3vw, 40px); padding: 18px 20px; background: var(--white); border: 1px solid var(--line); border-radius: 16px; scroll-margin-top: 96px; }
.oc-calc-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 18px; }
.oc-calc-head .eyebrow { margin: 0; }
.oc-calc-in { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: 15px; }
.oc-calc-in input { width: 96px; min-height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); color: var(--text); font: 600 18px/1 var(--font-body); }
.oc-calc-in input:focus { outline: 3px solid var(--lime); outline-offset: 1px; }
.oc-calc-out { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }
.oc-calc-out li { display: flex; align-items: baseline; gap: 12px; padding: 12px 14px; border-radius: 12px; background: var(--cream); min-width: 0; }
.oc-calc-out b { flex: none; min-width: 2ch; font-family: var(--font-display); font-weight: 800; font-size: 32px; line-height: 1; color: var(--ink); }
.oc-calc-out span { min-width: 0; font-size: 14.5px; line-height: 1.35; }
.oc-calc-out small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--text-muted); }
.oc-calc-note { margin: 12px 0 0; font-size: 13px; line-height: 1.5; color: var(--text-muted); }
.gf { display: grid; gap: 22px; }
.gf-qs { display: grid; gap: 18px; padding: clamp(18px, 3vw, 28px); border-radius: 20px; background: var(--ink); color: var(--on-dark); }
.gf-n { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0 0 10px; font-family: var(--font-display); font-weight: 800; font-size: 19px; line-height: 1.2; color: var(--on-dark); }
.gf-n b { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--lime); color: var(--ink); font-size: 14px; }
.gf-n small { font-family: var(--font-mono); font-weight: 500; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--on-dark-muted); }
.gf-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.gf-qs .fd-pill { min-height: 44px; padding: 10px 16px; background: rgba(255,255,255,.06); color: var(--on-dark); border-color: rgba(var(--lime-rgb), .3); font-size: 14px; }
.gf-qs .fd-pill:hover { border-color: var(--lime); }
.gf-qs .fd-pill.is-on { background: var(--lime); color: var(--ink); border-color: var(--lime); }
.gf-h { margin: 0 0 8px; font-size: clamp(22px, 3vw, 30px); }
.gf-grid { margin-top: 12px; }
.gf-card .fd-media img { background: #fff; }
.gf-why { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; font-size: 13px; line-height: 1.4; }
.gf-why li { position: relative; padding-left: 14px; }
.gf-why li::before { content: ""; position: absolute; left: 0; top: .5em; width: 6px; height: 6px; background: var(--lime-deep); }
.gf-price { margin: 2px 0 0; font-size: 13.5px; color: var(--text-muted); }
.gf-price span { display: block; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; }
.gf-price b { font-family: var(--font-display); font-weight: 800; font-size: 20px; color: var(--text); }
.gf-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.gf-acts .fd-buy { min-height: 44px; }
.gf-view { color: var(--text); font-size: 13.5px; font-weight: 600; }
.gf-more { margin: 16px 0 0; font-size: 14px; color: var(--text-muted); }
.gf-more a { color: var(--text); font-weight: 600; }

/* ==== Pro: sales locks, the Pro offer and /data/pro ==== */
/* every locked figure (build_data lock(), SDUnlock.lock()): blurred stand-in, lock, then a small "Unlock" that opens the Pro offer */
.si-lk::after { order: 1; }
/* the label looks the same wherever the lock sits, so it beats the big-figure rules of tiles and cards (.dp-tile b and friends) */
.si-lk > b { order: 2; font-family: var(--font-mono) !important; font-size: 10.5px !important; font-weight: 600 !important; font-stretch: normal !important; line-height: 1 !important; letter-spacing: .06em !important; text-transform: uppercase; text-decoration: underline; text-underline-offset: 2px; }
.si-lk::before { inset: calc(50% - 22px) -6px; }  /* a 44px tap target, whatever the line height, that never changes the row */
@media (max-width: 700px) { td .si-lk { gap: 4px; } td .si-lk > span { display: none; } }  /* phone tables: lock and Unlock only, so columns keep their width */
.si-pm-have { justify-self: center; min-height: 44px; padding: 0 8px; border: 0; background: none; color: var(--on-dark-muted); font: inherit; font-size: 14px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.si-pm-have:hover { color: var(--on-dark); }
.si-pm-code { display: grid; gap: 8px; }
.si-pm-code[hidden] { display: none; }
.si-pm-code .btn { min-height: 44px; }
.pro-go { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.pro-go .btn { min-height: 54px; }
.pro-go[hidden] { display: none; }
.pro-on { display: grid; gap: 12px; max-width: 640px; margin-top: 8px; padding: 18px; border-radius: 12px; background: #0c130e; border: 1px solid rgba(var(--lime-rgb), .4); }
.pro-on[hidden] { display: none; }
.pro-on > b { font-size: 17px; color: var(--lime); }
.pro-code { display: flex; flex-wrap: wrap; gap: 8px; }
.pro-code label { flex-basis: 100%; font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--on-dark-muted); }
.pro-code input { flex: 1 1 220px; min-width: 0; height: 48px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line-dark); background: rgba(255,255,255,.06); color: var(--on-dark); font-family: var(--font-mono); font-size: 16px; }
.pro-code .btn, .pro-on .btn { min-height: 48px; }
.pro-on .btn-row { display: flex; flex-wrap: wrap; gap: 8px; }
.pro-hero .su-status { margin: 12px 0 0; color: var(--on-dark-muted); } .pro-hero .su-status.is-ok { color: var(--lime); }
.pro-restore .su-status { flex-basis: 100%; margin: 4px 0 0; } .pro-restore .su-status.is-ok { color: var(--forest-3); }
/* ==== estimates: estimated UK sales, last 12 months, in three layers (tools/estimates.py) ==== */
.est-sec { padding: clamp(8px, 2vw, 24px) 0 clamp(40px, 5vw, 64px); }
.est-h { margin: 0 0 14px; }
.est-h a { color: inherit; text-decoration: none; }
.est-h a:hover { text-decoration: underline; text-underline-offset: 3px; }
.est-kpis, .est-trade { margin: 0; max-width: 900px; }
.est-kpis b { font-size: clamp(28px, 3.6vw, 46px); overflow-wrap: anywhere; }
.est-kpis b span, .est-trade b span { font: inherit; color: inherit; }  /* a figure behind a lock reads at the figure's size, locked or not */
.est-kpis--rng b { font-size: clamp(22px, 2.6vw, 34px); }
.est-trade { grid-template-columns: 1fr; border-top: 0; }
@media (min-width: 600px) { .est-trade { grid-template-columns: 1fr 1fr; } }
.est-trade > div { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; padding: 14px 20px; min-height: 44px; }
.est-trade > div > b { order: 2; font-size: clamp(20px, 2.2vw, 26px); }
@media (max-width: 759px) {  /* brand ranges read as rows on a phone: label left, range right */
  .est-kpis--rng { grid-template-columns: 1fr; }
  .est-kpis--rng > div { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; padding: 14px 20px; }
  .est-kpis--rng > div > b { order: 2; }
}
.est-pb { margin: 0; color: var(--text-muted); }
.est-table { margin: 18px 0 24px; }
.est-table th:not(:first-child), .est-table td:not(:first-child) { text-align: right; white-space: nowrap; }
.dp-table.est-table th:nth-child(4), .dp-table.est-table td:nth-child(4) { display: table-cell; }  /* the top 50 table hides its 4th column on phones; this one keeps it */
.est-table td { padding: 10px 10px 10px 0; border-bottom: 1px solid var(--line); }
.est-table td a { font-weight: 600; }

/* ==== Every bottle: /data/all-<category> pages and the filterable brands directory (tools/build_catalogue.py, assets/catalogue.js) ==== */
.ct-hero { padding-bottom: clamp(26px, 4vw, 44px); }
.ct-hero h1 { max-width: 20ch; }
.ct-hero .lede { margin-bottom: 0; }
.ct-pop { display: flex; gap: 8px; margin: 22px calc(-1 * var(--gutter)) 0; padding: 0 var(--gutter) 4px; overflow-x: auto; scrollbar-width: none; }
.ct-pop::-webkit-scrollbar { display: none; }
.ct-pop a { flex: none; display: inline-flex; align-items: center; min-height: 40px; padding: 0 15px; border: 1px solid var(--line-dark); border-radius: 999px; color: var(--on-dark); font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.ct-pop a:hover { border-color: var(--lime); color: var(--lime); }
.ct-pop a[aria-current] { background: var(--lime); border-color: var(--lime); color: var(--ink); }
@media (min-width: 960px) { .ct-pop { flex-wrap: wrap; overflow: visible; margin: 24px 0 0; padding: 0; } }
.ct-sec { padding: clamp(18px, 3vw, 36px) 0 clamp(56px, 8vw, 96px); }
.ct { display: grid; gap: 24px; align-items: start; }
@media (min-width: 960px) { .ct { grid-template-columns: 264px minmax(0, 1fr); gap: 32px; } }
.ct-main { min-width: 0; }
/* the filter: a side panel on a laptop, a bottom sheet on a phone */
.ct-side { background: var(--white); }
.ct-side-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 8px 10px 18px; border-bottom: 1px solid var(--line); }
.ct-side-head h2 { margin: 0; font-size: 26px; }
.ct-x { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 999px; background: transparent; color: var(--text); font-size: 28px; line-height: 1; cursor: pointer; }
.ct-x:hover { background: var(--cream); }
.ct-side-body { padding: 0 18px; }
.ct-side-foot { display: flex; gap: 10px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--white); }
.ct-clear { min-height: 48px; padding: 0 16px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--text); font: 600 14px/1 var(--font-body); cursor: pointer; }
.ct-show.btn { flex: 1; min-height: 48px; font-size: 15px; background: var(--ink); color: var(--lime); }
.ct-show.btn:hover { transform: none; background: #000; }
.ct-scrim { display: none; }
@media (min-width: 960px) {
  .ct-side { position: sticky; top: calc(var(--ct-top, 72px) + 16px); max-height: calc(100vh - var(--ct-top, 72px) - 32px); overflow-y: auto; overscroll-behavior: contain; border: 1px solid var(--line); border-radius: 14px; scrollbar-width: thin; }
  .ct-side-head, .ct-side-foot { display: none; }
}
@media (max-width: 959px) {
  .ct-side { position: fixed; left: 0; right: 0; bottom: 0; z-index: 96; display: flex; flex-direction: column; max-height: 88vh; max-height: 88dvh; border-radius: 18px 18px 0 0; box-shadow: 0 -24px 60px -24px rgba(10,15,12,.5); transform: translateY(105%); visibility: hidden; transition: transform .28s cubic-bezier(.2,.8,.2,1), visibility 0s linear .28s; }
  .ct-side.is-open { transform: none; visibility: visible; transition: transform .28s cubic-bezier(.2,.8,.2,1); }
  .ct-side-body { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
  html.ct-locked, html.ct-locked body { overflow: hidden; }
  html.ct-locked .ct-scrim { display: block; position: fixed; inset: 0; z-index: 95; background: rgba(10,15,12,.55); }
}
@media (prefers-reduced-motion: reduce) { .ct-side, .ct-side.is-open { transition: none; } }
.ct-f { border-bottom: 1px solid var(--line); }
.ct-f:last-child { border-bottom: 0; }
.ct-f > summary { display: flex; align-items: center; justify-content: space-between; min-height: 50px; list-style: none; cursor: pointer; font-weight: 700; font-size: 15px; }
.ct-f > summary::-webkit-details-marker { display: none; }
.ct-f > summary::after { content: ""; width: 8px; height: 8px; margin-right: 4px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-3px); transition: transform .15s ease; }
.ct-f[open] > summary::after { transform: rotate(-135deg) translateY(-1px); }
.ct-vals { display: grid; gap: 1px; padding-bottom: 10px; }
.ct-v { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 44px; padding: 0 6px; margin: 0 -6px; border-radius: 8px; font-size: 15px; line-height: 1.25; cursor: pointer; }
@media (min-width: 960px) { .ct-v { min-height: 36px; font-size: 14px; } }
.ct-v:hover { background: rgba(10,15,12,.05); }
.ct-v input { width: 20px; height: 20px; margin: 0; accent-color: var(--ink); cursor: inherit; }
.ct-v em { font-style: normal; font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); }
.ct-v.is-zero { opacity: .42; cursor: default; }
.ct-v.is-zero:hover { background: none; }
.ct-v.is-more { display: none; }
.ct-f.is-all .ct-v.is-more { display: grid; }
.ct-all { display: inline-flex; align-items: center; min-height: 40px; margin: -4px 0 8px; padding: 0; border: 0; background: none; color: var(--text); font: 600 13.5px/1 var(--font-body); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.ct-range { --a: 0%; --b: 100%; padding: 4px 2px 16px; }
.ct-range-in { position: relative; height: 32px; }
.ct-range-in::before, .ct-range-in::after { content: ""; position: absolute; top: 14px; height: 4px; border-radius: 2px; }
.ct-range-in::before { left: 0; right: 0; background: rgba(10,15,12,.14); }
.ct-range-in::after { left: var(--a); right: calc(100% - var(--b)); background: var(--ink); }
.ct-range input { position: absolute; inset: 0; width: 100%; height: 32px; margin: 0; background: none; pointer-events: none; -webkit-appearance: none; appearance: none; z-index: 1; }
.ct-range input::-webkit-slider-runnable-track { background: none; }
.ct-range input::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; border-radius: 50%; background: var(--lime); border: 2px solid var(--ink); pointer-events: auto; cursor: grab; }
.ct-range input::-moz-range-thumb { width: 24px; height: 24px; border-radius: 50%; background: var(--lime); border: 2px solid var(--ink); pointer-events: auto; cursor: grab; }
.ct-range input::-moz-range-track { background: none; }
.ct-range output { display: block; margin-top: 6px; font-weight: 600; font-size: 14px; }
/* the bar over the results: Filter (phone), count, sort */
.ct-bar { display: flex; align-items: center; gap: 10px; }
@media (max-width: 959px) { .ct-bar { position: sticky; top: var(--ct-top, 64px); z-index: 20; margin: 0 calc(-1 * var(--gutter)); padding: 10px var(--gutter); background: var(--paper); border-bottom: 1px solid var(--line); } }
.ct-open { display: inline-flex; align-items: center; gap: 8px; flex: none; min-height: 44px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--ink); color: var(--lime); font: 700 15px/1 var(--font-body); cursor: pointer; }
.ct-open svg { width: 18px; height: 18px; }
.ct-open i { display: grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--lime); color: var(--ink); font-style: normal; font-size: 12px; }
.ct-open i[hidden] { display: none; }
@media (min-width: 960px) { .ct-open { display: none; } }
.ct-fab { position: fixed; right: 16px; bottom: max(16px, env(safe-area-inset-bottom)); z-index: 60; display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 18px; border: 1px solid rgba(var(--lime-rgb), .5); border-radius: 999px; background: var(--ink); color: var(--lime); font: 700 15px/1 var(--font-body); box-shadow: 0 12px 30px -8px rgba(0,0,0,.45); cursor: pointer; opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .2s, transform .2s; }
.ct-fab.is-on { opacity: 1; transform: none; pointer-events: auto; }
.ct-fab svg { width: 18px; height: 18px; }
.ct-fab i { display: grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--lime); color: var(--ink); font-style: normal; font-size: 12px; }
.ct-fab i[hidden] { display: none; }
body:has(.sf-bar:not([hidden])) .ct-fab { bottom: calc(max(12px, env(safe-area-inset-bottom)) + 76px); }
@media (min-width: 960px) { .ct-fab { display: none; } }
.ct-count { flex: 1 1 auto; min-width: 0; margin: 0; font-size: 14px; color: var(--text-muted); white-space: nowrap; }
.ct-count b { color: var(--text); font-size: 16px; }
.ct-sort { position: relative; flex: none; }
.ct-sort-v { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 15px; border: 1px solid var(--line); border-radius: 999px; background: var(--white); font: 600 14px/1 var(--font-body); }
.ct-sort-v svg { width: 17px; height: 17px; }
.ct-sort.is-on .ct-sort-v { background: var(--ink); border-color: var(--ink); color: var(--lime); }
.ct-sort select:focus-visible + .ct-sort-v, .ct-sort:focus-within .ct-sort-v { border-color: var(--ink); }
@media (max-width: 959px) { .ct-sort select { position: absolute; inset: 0; width: 100%; opacity: 0; } }
@media (min-width: 960px) { .ct-sort-v { display: none; } }
.ct-sort select { min-height: 44px; padding: 0 34px 0 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%230f1712' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 12px center / 12px; color: var(--text); font: 600 16px/1 var(--font-body); -webkit-appearance: none; appearance: none; cursor: pointer; text-overflow: ellipsis; }
.ct-q { display: flex; align-items: center; gap: 10px; height: 48px; margin: 12px 0 0; padding: 0 16px; border: 1px solid var(--line); border-radius: 999px; background: var(--white); }
.ct-q:focus-within { border-color: var(--ink); }
.ct-q svg { flex: none; width: 18px; height: 18px; color: var(--text-muted); }
.ct-q input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; color: var(--text); font: 400 16px/1 var(--font-body); outline: none; }
.ct-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; }
.ct-chips[hidden] { display: none; }
.ct-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 12px 0 14px; border: 0; border-radius: 999px; background: var(--ink); color: var(--on-dark); font: 600 13px/1 var(--font-body); cursor: pointer; }
.ct-chip i { font-style: normal; font-size: 17px; color: var(--lime); }
.ct-chip--clear { padding: 0 6px; background: none; color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
/* the cards: the house ranked card, compact */
.ct-grid { display: grid; gap: 12px; margin-top: 16px; }
@media (min-width: 640px) and (max-width: 959px) { .ct-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1120px) { .ct-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1480px) { .ct-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ct-card { content-visibility: auto; contain-intrinsic-size: auto 210px; }
.ct-card .rk-body { gap: 6px; }
.ct-card .rk-name b { font-size: 16px; }
.ct-card .rk-name span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ct-rk { margin: 0; font-size: 12.5px; font-weight: 600; color: #2f5a3a; }
.ct-fx { margin: 0; font-size: 13px; line-height: 1.4; color: var(--text-muted); }
.ct-tags { display: flex; flex-wrap: wrap; gap: 5px; margin: 0; }
.ct-tags i { padding: 2px 8px; border-radius: 999px; background: var(--cream); font-style: normal; font-size: 12px; font-weight: 600; }
.ct-card .ct-sd { margin-top: 4px; padding: 7px 8px 7px 12px; flex-wrap: nowrap; }
.ct-card .ct-sd .rk-sd-row { gap: 4px 8px; }
.ct-card .ct-sd .rk-sd-row strong { font-size: 19px; }
.ct-card .ct-sd .rk-was { flex-basis: 100%; font-size: 11.5px; }
.ct-card .ct-sd .rk-btn--buy { min-height: 40px; padding: 0 16px; }
.ct-off { font-weight: 600; font-size: 13px; }
.rk-photo--none { display: block; width: 92px; height: 115px; border-radius: 8px; background: var(--cream) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 92 115'%3E%3Cpath d='M40 14h12v14c0 5 6 8 6 18v54a4 4 0 0 1-4 4H38a4 4 0 0 1-4-4V46c0-10 6-13 6-18z' fill='none' stroke='%23b9b3a1' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M34 62h24M34 84h24' stroke='%23d3cdbb' stroke-width='2'/%3E%3C/svg%3E") center / 72% no-repeat; }  /* a bottle outline where a bottle has no photo yet (rare bottles from shops we can't use pictures from) */
.ct-more { margin-top: 22px; text-align: center; }
.ct-more[hidden] { display: none; }
.ct-more .rk-btn { min-height: 46px; padding: 0 24px; font-size: 14px; }
.ct-none { margin: 36px 0; text-align: center; color: var(--text-muted); }
.ct-none[hidden] { display: none; }
.ct-none .rk-btn { margin-left: 8px; }
.ct-links { margin-top: 44px; }
.ct-see { margin: 20px 0 0; text-align: center; }
.ct-see .rk-btn { min-height: 46px; padding: 0 22px; font-size: 14px; }
/* the ranked list pages (tools/list_filter.py): the list as it was, beside the same filter */
.ct--list { margin-top: 8px; }
.ct--list [data-lf][hidden], .ct--list .ct-twin[hidden], .ct--list .rk-top[hidden], .ct--list .rk-more[hidden] { display: none !important; }
.ct--list .ct-rows > .table-wrap:first-child, .ct--list .ct-rows > .rk-grid:first-child { margin-top: 14px; }
.ct--list .rk-top { margin-top: 16px; }
@media (min-width: 960px) and (max-width: 1399px) { .ct--list .rk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) { .ct--list .ct-bar { min-height: 44px; } }
/* the brands directory */
.ct--brands .bi-nav { position: static; margin: 14px 0 18px; padding: 0; background: none; }
.ct--brands .bi-nav a { width: 40px; height: 40px; }
.ct--brands .bi-nav a.is-on { background: var(--ink); color: var(--lime); border-color: var(--ink); }
.ct--brands .bi-nav a.is-zero { opacity: .35; }
@media (min-width: 960px) { .ct--brands .bi-nav { position: sticky; top: var(--ct-top, 72px); z-index: 5; padding: 10px 0; background: var(--paper); } .ct--brands .bi-nav a { width: 34px; height: 34px; } }
.ct--brands .bi-group { scroll-margin-top: calc(var(--ct-top, 72px) + 70px); }
.ct--brands .bi-group[hidden], .ct--brands .bi-list a[hidden] { display: none; }
.ct--brands .bi-list { grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.ct--brands .bi-list a { grid-template-columns: 34px minmax(0, 1fr); }
.bi-list a:not([href]) { cursor: default; }
.bi-list a:not([href]):hover { border-color: var(--line); }
.bi-img--none { width: 34px; height: 42px; border-radius: 6px; background: var(--cream); }

/* ==== G92 search coverage: a deals page for every category, best-of pages, wine ==== */
.rk-value { margin: 0; padding: 7px 10px; border-radius: 8px; background: var(--cream); color: var(--text); font-size: 12.5px; line-height: 1.4; }
.rk-value b { font-weight: 700; }
.dl-cats { margin-top: 16px; }
.dl-cats a { display: inline-flex; align-items: center; min-height: 44px; }
/* ==== EU shopper, bottle and brand pages (tools/build_eu_more.py) ==== */
.eu-shop { display: grid; gap: 26px; }
.eu-shop-g h3 { margin: 0 0 12px; }
.eu-shop--dark { margin-top: 18px; }
.eu-more .rk-links { margin-top: 14px; }
.eu-az + .eu-az { margin-top: 32px; }
.eu-az h2 { margin: 0 0 12px; padding-bottom: 10px; border-bottom: 1px solid var(--line); font-size: 28px; }
.eu-az-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.eu-az-list a { display: grid; grid-template-columns: 28px 1fr; column-gap: 10px; align-items: center; min-height: 44px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--white); color: var(--text); text-decoration: none; }
.eu-az-list a:hover { border-color: var(--ink); }
.eu-az-list .si-sw-img { grid-row: span 2; width: 28px; height: 28px; object-fit: contain; }
.eu-az-list b { font-size: 15px; line-height: 1.25; }
.eu-az-list small { font-size: 12.5px; line-height: 1.35; color: var(--text-muted); }

/* ==== Pro request form (26 Oct) ==== */
.pro-request { max-width: 720px; }
.pro-request h2 { margin: 0 0 22px; }
.pro-request form { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 700px) { .pro-request form { grid-template-columns: 1fr 1fr; } .pro-request .pr-wide, .pro-request button, .pro-request .su-status { grid-column: 1 / -1; } }
.pro-request label { display: grid; gap: 6px; font-size: 14px; font-weight: 600; color: var(--text); }
.pro-request input:not(.sr-only), .pro-request select, .pro-request textarea { width: 100%; min-height: 50px; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--line); background: #fff; font: inherit; font-size: 16px; font-weight: 400; color: var(--text); }
.pro-request select { appearance: none; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23333' stroke-width='1.6'/%3E%3C/svg%3E") right 14px center/12px no-repeat; padding-right: 36px; }
.pro-request textarea { resize: vertical; }
.pro-request button { justify-self: start; }
.pro-request .su-status { margin: 0; }

/* ==== UK market size (tools/build_market_size.py) ==== */
.ms-src { font-size: 12.5px; line-height: 1.5; color: var(--text-muted); margin: 12px 0 0; max-width: 92ch; }
.ms-src a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.si-dark .ms-src { color: rgba(243,245,239,.55); }
.ms-more { margin: 14px 0 0; font-size: 14px; }
.ms-more a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 600; color: var(--text); text-underline-offset: 3px; }
.ms-links { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; }
.ms-links a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px; border: 1px solid rgba(243,245,239,.2); border-radius: 999px; color: var(--on-dark); font-size: 14px; font-weight: 600; text-decoration: none; }
.ms-links a:hover { border-color: var(--lime); color: var(--lime); }
.ms-kpis b { font-size: clamp(28px, 4vw, 52px); overflow-wrap: anywhere; }
.section .ms-kpis { margin: 0 0 4px; }
@media (min-width: 860px) { .ms-k2 { grid-template-columns: repeat(2, 1fr); } .ms-k3, .ms-k6 { grid-template-columns: repeat(3, 1fr); } .ms-k5 { grid-template-columns: repeat(5, 1fr); } }
@media (max-width: 859px) { .ms-kpis > div:last-child:nth-child(odd) { grid-column: 1 / -1; } }
.ms-card { padding: 18px 16px; }
.ms-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.ms-bars li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; align-items: baseline; }
.ms-n { font-size: 14px; color: var(--on-dark); min-width: 0; }
.ms-n a { color: inherit; text-underline-offset: 3px; }
.ms-v { font-family: var(--font-mono); font-size: 14px; font-weight: 600; color: var(--on-dark); white-space: nowrap; }
.ms-bar { grid-column: 1 / -1; display: block; width: 100%; height: 10px; border-radius: 5px; background: rgba(243,245,239,.08); overflow: hidden; }
.ms-bar:not(.ms-bar--stack) rect { fill: #cdf25c; }
.ms-bar--lk { background: repeating-linear-gradient(135deg, rgba(243,245,239,.16) 0 4px, rgba(243,245,239,.04) 4px 9px); }
.ms-bar--stack { height: 14px; border-radius: 3px; background: none; }
.ms-bars--stack .ms-v { font-size: 12.5px; font-weight: 500; color: rgba(243,245,239,.75); }
.ms-two { display: grid; gap: 14px; }
@media (min-width: 900px) { .ms-two { grid-template-columns: 1fr 1fr; } }
.ms-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.ms-cat { display: grid; gap: 4px; padding: 14px 16px; background: var(--white); border: 1px solid var(--line); border-radius: 8px; color: var(--text); text-decoration: none; min-width: 0; }
.ms-cat span { font-size: 13px; color: var(--text-muted); overflow-wrap: anywhere; }
.ms-cat b { font-family: var(--font-display); font-stretch: 78%; font-weight: 800; font-size: 28px; line-height: 1; }
.ms-cat:hover { border-color: var(--ink); background: var(--lime); }
.ms-cat:hover span { color: var(--text); }
.ms-who-grid { display: grid; gap: 28px; }
@media (min-width: 800px) { .ms-who-grid { grid-template-columns: 1fr 1fr; gap: 40px; } }
.ms-who h3 { font-size: 16px; margin: 0 0 6px; }
.ms-who ol { list-style: none; margin: 0; padding: 0; }
.ms-who li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px; align-items: center; min-height: 44px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.ms-who li i { font-style: normal; font-family: var(--font-display); font-stretch: 80%; font-weight: 800; font-size: 18px; }
.ms-who li span { min-width: 0; overflow-wrap: anywhere; }
.ms-who li span a { color: var(--text); font-weight: 600; text-underline-offset: 3px; }
.ms-who li b { font-family: var(--font-mono); font-size: 14px; }
.mk-table .ms-tot th, .mk-table .ms-tot td { border-top: 2px solid var(--ink); }
/* ==== Derived metrics (G94): /data/insights, the brand page "Promotions and stock" panel, the bottle page price response ==== */
.dv .section { padding: clamp(48px, 7vw, 96px) 0; }
.dv .section-head.dv-head { margin-bottom: 14px; gap: 10px; }
.dv .dv-head h2 { font-size: clamp(32px, 4.6vw, 60px); }
.dv-read { max-width: 78ch; font-size: 17px; line-height: 1.6; margin: 0 0 22px; }
.dv-grid { display: grid; gap: 20px; align-items: start; }
.dv-grid .table-wrap { margin: 0; }
.dv-side { display: grid; gap: 12px; }
@media (min-width: 960px) { .dv-grid { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 32px; } .dv-grid--2 { grid-template-columns: 1fr 1fr; } }
.dv-table td small { color: var(--text-muted); font-size: 12px; }
.dv-table b { font-weight: 700; }
.dv-rg { position: relative; display: inline-block; width: clamp(96px, 22vw, 220px); height: 10px; border-radius: 5px; background: rgba(10,15,12,.08); vertical-align: middle; }
.dv-rg i { position: absolute; top: 0; bottom: 0; border-radius: 5px; background: var(--lime-deep); }
.dv-rg b { position: absolute; top: -3px; width: 4px; height: 16px; margin-left: -2px; border-radius: 2px; background: var(--ink); }
.dv-bar { display: inline-block; width: clamp(64px, 16vw, 160px); height: 8px; border-radius: 4px; background: rgba(10,15,12,.08); vertical-align: middle; overflow: hidden; }
.dv-bar i { display: block; height: 100%; background: var(--forest); }
.dv-stack { display: flex; width: clamp(120px, 24vw, 240px); height: 12px; border-radius: 3px; overflow: hidden; vertical-align: middle; }
.dv-stack i { display: block; height: 100%; }
.dv-s-vat { background: #8fa38a; } .dv-s-duty { background: var(--forest); } .dv-s-cut { background: #c3cdb9; } .dv-s-net { background: var(--lime-deep); }
.dv-key { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 0; margin: 0 0 4px; font-size: 13px; }
.dv-key li { display: inline-flex; align-items: center; gap: 6px; }
.dv-key i { display: inline-block; width: 12px; height: 12px; border-radius: 2px; }
.dv-card { margin: 0 0 24px; padding: 16px 14px 12px; border-radius: 12px; background: radial-gradient(120% 140% at 0% 0%, #17271d 0%, #0d1510 55%, #0a0f0c 100%); border: 1px solid rgba(var(--lime-rgb), .16); color: var(--on-dark); }
.dv-card figcaption { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--lime); margin: 0 0 8px; }
.dv-card .dv-key { color: var(--on-dark-muted); margin: 8px 0 0; }
.dv-k-ev { background: var(--lime); } .dv-k-wk { background: rgba(var(--lime-rgb), .38); }
.dv-pb { fill: rgba(var(--lime-rgb), .38); } .dv-pb--ev { fill: var(--lime); } .dv-pb:hover { fill: #e6ff8f; }
.dv-lst { background: var(--white); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px 6px; min-width: 0; }
.dv-lst h3 { font-size: 15px; margin: 0 0 4px; }
.dv-lst ol { list-style: none; margin: 0; padding: 0; }
.dv-lst li { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 44px; padding: 8px 0; border-top: 1px solid var(--line); box-sizing: border-box; }
.dv-lst li:first-child { border-top: 0; }
.dv-lst li > span { display: grid; min-width: 0; font-size: 14.5px; line-height: 1.35; font-weight: 600; }
.dv-lst li > span a { color: var(--text); font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.dv-lst li > span a:hover { text-decoration: underline; text-underline-offset: 3px; }
.dv-lst small { font-size: 12px; font-weight: 400; color: var(--text-muted); }
.dv-lst li > b { flex: none; font-size: 14px; text-align: right; }
.est-kpis.dv-kpis b { font-size: clamp(20px, 2.4vw, 30px); }
.dv-kpis > div { min-width: 0; }
@media (max-width: 720px) { .dp-kpis.dv-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dv-kpis > div { padding: 16px 14px; } .dv-kpis .si-lk { flex-wrap: wrap; white-space: normal; } }
.dv-bt-line { font-size: 16px; line-height: 1.6; max-width: 70ch; margin: 0 0 6px; }
.dv-bt-line b .si-lk > span { font-size: inherit; }
@media (max-width: 520px) { .dv-read { font-size: 16px; } .dv-lst { padding: 12px 14px 4px; } }

/* ==== brand directory: registry brand pages and Add your brand (G84) ==== */
.bd-story { max-width: 72ch; margin: 0 0 20px; }
.bd-story p { margin: 0 0 12px; font-size: 16px; line-height: 1.6; }
.bd-about .dp-kv dd small { font-weight: 500; color: var(--text-muted); }
.bd-about .dp-kv dd a { color: var(--text); }
.bd-h { margin: 28px 0 12px; font-size: 20px; }
.bd-cols { display: grid; gap: 20px; margin-top: 8px; }
@media (min-width: 720px) { .bd-cols { grid-template-columns: 1fr 1fr; } }
.ab-cats > div { display: flex; flex-wrap: wrap; gap: 8px; }
.ab-cats .su-chip { position: relative; }
.ab-cats .su-chip span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-color: var(--line); color: var(--text); font-family: var(--font-body); letter-spacing: 0; text-transform: none; }
.ab-cats .su-chip input:checked + span { background: var(--ink); color: var(--lime); border-color: var(--ink); }
.ab-known { margin: -6px 0 0; padding: 10px 12px; border-radius: 8px; background: var(--cream); font-size: 14px; }
.ab-known a { color: var(--text); font-weight: 600; }

/* ==== shopper experience (site audit F3): the bottle page's first screen, and the trade layer behind "For brands" ==== */
/* UK bottle page (.bt-hero--shop): photo beside the name on a phone, best price and Buy straight under it */
.bt-hero--shop .bt-top { grid-template-columns: 96px minmax(0, 1fr); grid-template-areas: "photo head" "side side"; gap: 16px; align-items: start; margin-top: 0; }
.bt-hero--shop .bt-photo { grid-area: photo; padding: 8px; border-radius: 12px; }
.bt-hero--shop .bt-img { width: 80px; height: 100px; }
.bt-hero--shop .bt-head { grid-area: head; min-width: 0; align-self: center; }
.bt-hero--shop .bt-side { grid-area: side; min-width: 0; display: grid; gap: 18px; }
.si.bt .bt-hero--shop .bt-head h1 { max-width: none; margin: 6px 0 8px; font-size: clamp(26px, 7.2vw, 60px); line-height: .98; overflow-wrap: anywhere; }
.si.bt .bt-hero--shop .bt-head h1 span { font-size: clamp(15px, .5em, 30px); }
.bt-hero--shop .bt-head .eyebrow { margin: 0; }
.bt-hero--shop .bt-facts { margin: 0; font-size: 14px; line-height: 1.45; }
.bt-hero--shop .bt-buy { margin: 0; }
.bt-hero--shop .bt-buy .rk-btn--buy { min-height: 44px; padding: 0 18px; }
.bt-hero--shop .bt-buy .rk-opts a { min-height: 32px; align-items: center; }
.bt-side .rk-icons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; margin: 0; }
.bt-side .rk-icons li { align-items: flex-start; gap: 8px; }
.bt-side .rk-icons svg { width: 18px; height: 18px; margin-top: 1px; color: var(--lime); }
.bt-side .rk-icons b { display: block; font-size: 13.5px; }
.bt-side .rk-icons small { display: block; margin: 1px 0 0; font-size: 11.5px; color: var(--on-dark-muted); }
.bt-side .rk-icons small:empty { display: none; }
.bt-side .sf-acts--bt { margin-top: 0; }
@media (max-width: 700px) { .si.bt .bt-hero--shop { padding: 14px 0 22px; } .bt-hero--shop .si-lockrow { margin-bottom: 12px; } }
@media (min-width: 880px) {
  .bt-hero--shop .bt-top { grid-template-columns: minmax(280px, 380px) minmax(0, 1fr); grid-template-areas: "photo head" "photo side"; gap: 20px 44px; margin-top: 18px; }
  .bt-hero--shop .bt-photo { padding: 24px; border-radius: 16px; }
  .bt-hero--shop .bt-img { width: 260px; height: 325px; }
  .bt-hero--shop .bt-head { align-self: end; }
  .si.bt .bt-hero--shop .bt-head h1 { font-size: clamp(32px, 5.4vw, 60px); margin: 10px 0 12px; }
  .bt-hero--shop .bt-facts { font-size: 15px; }
}
/* taste: the notes and tags beside the flavour wheel */
.bt-taste-row { display: grid; gap: 16px; align-items: start; }
@media (min-width: 760px) { .bt-taste-row--2 { grid-template-columns: minmax(0, 1fr) minmax(0, 340px); } }
.bt-taste .dp-tags { margin: 12px 0 0; }
.bt-taste .bx-flav { margin: 0; }
/* units and calories: the numbers first */
.bt-units-dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 1px; margin: 0; background: var(--line); border: 1px solid var(--line); }
.bt-units-dl div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 4px; padding: 12px; background: var(--white); min-width: 0; }
.bt-units-dl dd { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: 26px; line-height: 1; }
.bt-units-dl dt { font-size: 12px; line-height: 1.35; color: var(--text-muted); }
@media (max-width: 559px) { .bt-units-dl div:last-child:nth-child(odd) { grid-column: 1 / -1; } }
/* reader reviews with none yet: just the button */
.cm-revs--none { padding: 18px 0; }
.cm-revs--none .cm-write { margin-top: 0; }
/* For brands: one collapsed section at the end of a bottle page */
.fb-d > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; cursor: pointer; }
.fb-d > summary::-webkit-details-marker { display: none; }
.fb-d > summary h2 { margin: 0; }
.fb-d > summary::after { content: "+"; flex: none; display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 999px; font-size: 22px; line-height: 1; }
.fb-d[open] > summary::after { content: "−"; }
.fb-d > summary:focus-visible { outline: 2px solid var(--lime-deep); outline-offset: 3px; }
.fb-body { display: grid; gap: 26px; padding-top: 14px; }
.fb-sec { padding: 0; border: 0; }
.fb-body h3 { margin: 0 0 12px; font-size: clamp(19px, 2.4vw, 24px); }
.fb-body .bt-brandline { margin: 0; }
.fb-body .si-unlock-bar { border-radius: 12px; }
/* category pages: everything after the shopper's top 50 sits under one "For brands" band */
.fb-band { background: var(--ink); color: var(--on-dark); padding: 22px 0; border-top: 3px solid var(--lime); }
.fb-band .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; }
.fb-h { margin: 0; color: var(--on-dark); font-size: clamp(26px, 4vw, 40px); }
.fb-make { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--lime); font-weight: 600; text-decoration: none; }
.fb-make:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ==== G91 bottle attributes: the Details table on bottle pages (tools/attributes.py) ==== */
.at-grp + .at-grp { margin-top: 20px; }
.at-grp h3 { margin: 0 0 8px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.at-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.at-tags i { font-style: normal; font-size: 12px; font-weight: 500; padding: 2px 8px; border-radius: 999px; background: var(--cream); }
@media (max-width: 559px) { .at .dp-kv > div:last-child:nth-child(odd) { grid-column: 1 / -1; } }
@media (min-width: 560px) { .at .dp-kv > div:last-child:nth-child(3n+1) { grid-column: 1 / -1; } .at .dp-kv > div:last-child:nth-child(3n+2) { grid-column: span 2; } }

/* ==== Trust and compliance: the disclosure line in the data footer ==== */
.si-foot-note { margin: 0; padding-top: 24px; font-size: 13px; line-height: 1.6; color: var(--on-dark-muted); max-width: 80ch; }
.si-foot-note a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.eu-share td { white-space: nowrap; }
.dp-table[data-table="eu"] th:nth-child(4), .dp-table[data-table="eu"] td:nth-child(4) { display: table-cell; text-align: right; }  /* the EU top 50 table: its 4th column is the locked sales estimate, kept on phones */
.eu-bar { display: inline-block; width: min(220px, 40vw); height: 10px; margin-right: 10px; border-radius: 5px; background: var(--line); vertical-align: middle; overflow: hidden; }
.eu-bar i { display: block; height: 100%; background: #2f5a3a; border-radius: 5px; }
.eu-bar--none { visibility: hidden; }  /* all other owners: no place to draw, the share lines up with the rest */
.eu-mk-cats { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); margin-top: 16px; }
.eu-mk-cats a { display: grid; gap: 2px; min-height: 44px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--white); color: var(--text); text-decoration: none; }
.eu-mk-cats a:hover { border-color: var(--ink); }
.eu-mk-cats span { font-size: 13px; color: var(--text-muted); }
.eu-lines .eu-l-sd { stroke: #2f5a3a; stroke-width: 2.6; }
.eu-lines .eu-l-hicp { stroke: #7a847c; stroke-width: 2; stroke-dasharray: 5 4; }
.eu-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; margin: 8px 0 16px; font-size: 14px; color: var(--text-muted); }
.eu-k { display: inline-block; width: 18px; height: 3px; margin-right: 6px; vertical-align: middle; }
.eu-k-sd { background: #2f5a3a; } .eu-k-hicp { background: #7a847c; }
.eu-fc-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); margin-top: 8px; }
.mk-fc { padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--white); }
.mk-fc h3 { margin: 0 0 6px; font-size: 18px; } .mk-fc h3 a { color: var(--text); }
.mk-fc p { margin: 6px 0 0; font-size: 13px; color: var(--text-muted); }

/* ==== Market numbers and shares: A to Z owner lists, chart titles ==== */
.ms-az { list-style: none; margin: 0; padding: 0; }
.ms-who .ms-az li { grid-template-columns: minmax(0, 1fr); }
.bsl li { grid-template-columns: 12px 36px minmax(0, 1fr) auto; }
@media (max-width: 559px) { .bsl li { grid-template-columns: 12px 36px minmax(0, 1fr); row-gap: 4px; } .bsl li > strong { grid-column: 3; } }
.ms-chart-t { margin: 0 0 8px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--on-dark-muted); }

/* ==== track B ==== */
/* lighter pages, 25 Oct: the buy box, category pages (top 25 cards, then the full table), compact group pages, Drink Finder (tools/lean.py) */
.ln-jump { margin-top: 16px; }
.ln-jump a { min-height: 44px; }
.ln-jump small { font-size: 11px; color: var(--on-dark-muted); }
.ln-more { margin: 16px 0 0; }
.ln-more a { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 22px; border-radius: 999px; background: var(--ink); color: var(--lime); font: 700 15px/1 var(--font-display); letter-spacing: .02em; text-decoration: none; }
.dp-name-a { display: block; color: var(--text); text-decoration: none; }
.dp-name-a:hover b, .dp-name-a:focus-visible b { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 520px) { .dp-table .dp-name { min-width: 128px; } }  /* the top 50 table fits a 375px phone */
.si-numbers .si-switch a, .si-numbers .si-switch > .is-on { padding: 7px 14px; min-height: 40px; }
.si-numbers .si-method { color: var(--on-dark-muted); }
.si-numbers .si-method strong { color: var(--on-dark); }
.ln-table { margin-top: 8px; }
.ln-table tbody tr { cursor: default; }
.ln-table tbody tr:hover { background: transparent; }
.ln-table th:nth-child(2), .ln-table th:nth-child(3), .ln-table td.ln-rank, .ln-table td.ln-price { text-align: right; white-space: nowrap; }
.ln-table tr.ln-bh th { padding: 22px 0 8px; border-bottom: 1px solid var(--ink); text-align: left; font: 800 20px/1.15 var(--font-display); color: var(--text); text-transform: none; letter-spacing: 0; white-space: normal; }
.ln-table tr.ln-bh a { margin-left: 10px; font: 600 13px/1 var(--font-body); color: var(--text); }
.ln-table tbody { scroll-margin-top: 96px; }
.ln-b { display: flex; align-items: center; gap: 10px; min-width: 0; color: var(--text); text-decoration: none; }
a.ln-b:hover span { text-decoration: underline; text-underline-offset: 3px; }
.ln-b span { min-width: 0; font-size: 14px; line-height: 1.3; }
.ln-img { flex: none; width: 36px; height: 45px; object-fit: contain; background: var(--white); border-radius: 4px; }
.ln-img--none { display: inline-block; width: 36px; height: 45px; }
.ln-rank small { color: var(--text-muted); font-size: 12px; }
.ln-price { font-weight: 700; }
@media (max-width: 520px) { .ln-table td, .ln-table th { padding-right: 8px; } .ln-rank small { display: block; } }
.si-hero .tk-more { color: var(--on-dark-muted); }  /* the Drink Finder hero: links in the on-dark link colour */
.si-hero .tk-more a { color: var(--lime); }
.fd-card { color: var(--text); }  /* white cards inside the dark "start from a bottle" panel */

/* ==== track C ==== */
/* menus (tools/menus.py): the menu's group headings link their hub; the hub's shopper tools read as links */
.mega .mg-gh a { padding: 0; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; text-decoration: none; }
.mega .mg-gh a::after { content: " →"; }
.mega .mg-gh a:hover, .mega .mg-gh a:focus-visible { color: var(--lime); }
.tk-door > div { gap: 8px; }
.hs-door.tk-door > div a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; font-size: 14px; text-decoration: underline; text-decoration-color: rgba(var(--lime-rgb), .6); text-underline-offset: 4px; }
.hs-door.tk-door > div a:hover, .hs-door.tk-door > div a:focus-visible { border-color: var(--lime); color: var(--lime); }
/* hubs: /data/wine and /data/spirits (tools/build_hubs.py) */
.hb-grid { display: grid; gap: 16px; margin-top: 24px; }
@media (min-width: 900px) { .hb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.hb-card { min-width: 0; padding: 18px 18px 6px; border: 1px solid var(--line); border-radius: 14px; background: var(--white); scroll-margin-top: 96px; }
.hb-card h2 { margin: 0 0 6px; font-size: clamp(22px, 2.6vw, 28px); line-height: 1.1; }
.hb-list + .hb-list { margin-top: 8px; padding-top: 10px; border-top: 1px dashed var(--line); }
.hb-list h3, .hb-where { margin: 2px 0 4px; font: 600 11.5px/1.4 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
.hb-list h3 small { letter-spacing: 0; text-transform: none; font-size: 12px; }
.hb-ol { margin: 0; padding: 0; list-style: none; }
.hb-row a { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 48px; padding: 6px 0; border-bottom: 1px solid var(--line); color: var(--text); text-decoration: none; }
.hb-row--one a { grid-template-columns: 34px 56px minmax(0, 1fr) auto; }
.hb-row:last-child a { border-bottom: 0; }
.hb-row a:hover .hb-t b, .hb-row a:focus-visible .hb-t b { text-decoration: underline; }
.hb-k { font: 700 13px/1 var(--font-mono); color: var(--text-muted); }
.hb-row--one .hb-k { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--lime); color: var(--ink); }
.hb-img { width: 56px; height: 70px; object-fit: contain; border-radius: 6px; background: #fff; }
.hb-img--none { display: block; background: var(--cream); }
.hb-t { display: grid; min-width: 0; line-height: 1.3; }
.hb-t b { font-size: 15px; }
.hb-t span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 13.5px; color: var(--text-muted); }
.hb-p { display: grid; justify-items: end; text-align: right; }
.hb-p b { font: 800 16px/1.1 var(--font-display); }
.hb-p small { font-size: 12px; color: var(--text-muted); }
.hb-foot { margin: 4px 0 10px; }
.hb-foot a { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; font-weight: 600; color: var(--text); }
.hb-mt { width: 100%; border-collapse: collapse; background: var(--white); font-size: 15px; }
.hb-mt th, .hb-mt td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: right; white-space: nowrap; }
.hb-mt th:first-child { text-align: left; white-space: normal; }
.hb-mt thead th { font: 600 11px/1.3 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.hb-mt tbody th a { color: var(--text); font-weight: 600; }
.hb-lists { display: grid; gap: 22px; margin-top: 8px; }
.hb-links h3 { margin: 0; font-size: 18px; }
.hb-links .dl-cats { margin-top: 10px; }
@media (max-width: 480px) { .hb-card { padding: 14px 14px 4px; } .hb-mt th, .hb-mt td { padding: 9px 6px; font-size: 13.5px; } }
/* the Black Friday price watch (tools/build_hubs.py, assets/price-watch.js) */
.pw-season { max-width: 70ch; margin: 14px 0 0; padding: 10px 14px; border-left: 3px solid var(--lime); background: rgba(var(--lime-rgb), .1); color: var(--on-dark); font-size: 15px; line-height: 1.5; }
.pw-list { display: grid; gap: 12px; margin: 16px 0 0; padding: 0; list-style: none; }
@media (min-width: 900px) { .pw-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pw-row { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 10px 14px; min-width: 0; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--white); }
.pw-img { width: 48px; height: 60px; object-fit: contain; border-radius: 6px; background: #fff; }
.pw-img--none { display: block; background: var(--cream); }
.pw-body { min-width: 0; }
.pw-name { display: block; font-size: 15px; line-height: 1.3; color: var(--text); text-decoration: none; }
.pw-name span { color: var(--text-muted); }
.pw-name:hover b, .pw-name:focus-visible b { text-decoration: underline; }
.pw-rank { margin: 3px 0 0; font: 500 12px/1.4 var(--font-mono); color: var(--text-muted); }
.pw-chip { display: inline-block; margin: 8px 0 0; padding: 4px 10px; border-radius: 999px; background: var(--cream); font-size: 13px; font-weight: 600; line-height: 1.35; }
.pw-chip--low, .pw-chip--under { background: var(--lime); color: var(--ink); }
.pw-chip--over { background: #ffe3d9; color: #7a2a12; }
.pw-chip--off { background: #ececec; color: var(--text-muted); }
.pw-alt { display: flex; align-items: center; min-height: 44px; font-size: 13.5px; font-weight: 600; color: var(--text); }
.pw-prices { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0; padding-top: 10px; border-top: 1px solid var(--line); }
.pw-prices > div { min-width: 0; }
.pw-prices dt { font: 600 10.5px/1.3 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.pw-prices dd { margin: 4px 0 0; font: 800 17px/1.1 var(--font-display); }
.pw-now { grid-column: 1 / -1; }
.pw-box { display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 12px; }
.pw-box .rk-sd-k, .pw-box .rk-sd-row b, .pw-box .rk-was, .pw-box .rk-opts, .pw-box .rk-also-k { display: none; }
.pw-box strong { font: 800 22px/1.1 var(--font-display); }
.pw-box .rk-btn { min-height: 44px; padding: 0 16px; }
/* drinks advent calendars (tools/build_hubs.py) */
.ad-list { display: grid; gap: 10px; margin: 14px 0 0; padding: 0; list-style: none; }
@media (min-width: 900px) { .ad-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ad-item { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-width: 0; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--white); }
.ad-t { display: grid; gap: 2px; min-width: 0; line-height: 1.35; }
.ad-t b { font-size: 15px; }
.ad-t span { font-size: 14.5px; overflow-wrap: anywhere; }
.ad-t small { font: 500 12px/1.4 var(--font-mono); color: var(--text-muted); }
.ad-buy { flex: none; display: grid; justify-items: center; gap: 2px; min-width: 96px; min-height: 44px; padding: 8px 14px; border-radius: 12px; background: var(--ink); color: var(--lime); text-decoration: none; }
.ad-buy b { font: 800 17px/1.1 var(--font-display); color: var(--on-dark); }
.ad-buy span { font-size: 12.5px; font-weight: 600; }
.ad-buy:hover, .ad-buy:focus-visible { background: #000; }
/* Christmas: the line on the big gift categories and what sells as a gift in December (tools/gifting.py) */
.xm-line { margin: 14px 0 0; padding: 12px 16px; border-radius: 12px; background: var(--cream); font-size: 15px; line-height: 1.5; }
.xm-line b { margin-right: 6px; font: 700 11px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; }
.xm-line a { font-weight: 600; color: var(--text); white-space: nowrap; }
.xm-facts { margin-top: 28px; padding: 22px; border: 1px solid var(--line); border-radius: 16px; background: var(--white); scroll-margin-top: 96px; }
.xm-facts h2 { margin: 0 0 12px; font-size: clamp(24px, 3vw, 34px); line-height: 1.1; }
.xm-facts ul { display: grid; gap: 10px; margin: 0; padding-left: 20px; font-size: 16px; line-height: 1.55; }
.xm-more { display: flex; flex-wrap: wrap; gap: 0 18px; margin: 12px 0 0; }
.xm-more a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--text); }
@media (max-width: 480px) { .xm-facts { padding: 16px; } .xm-facts ul { font-size: 15px; } }

/* ==== Bottle pages: the price line under the H1 and other sizes (tools/bottle_head.py, tools/sizes.py) ==== */
.bt-first { margin: 0 0 10px; max-width: 46ch; font-size: 15px; line-height: 1.5; color: var(--on-dark); }
.bt-hero--shop .bt-first { font-size: 14px; }
.sz-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 148px), 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.sz-it { display: grid; gap: 2px; min-height: 44px; padding: 10px 12px; background: var(--white); border: 1px solid var(--line); border-radius: 10px; color: var(--text); text-decoration: none; }
.sz-it:hover { border-color: var(--ink); }
.sz-it b { font-size: 15px; }
.sz-it span { font-size: 15px; font-weight: 600; }
.sz-it small { font-size: 12px; color: var(--text-muted); }

/* ==== brand directory rows (25 Oct): only real links look like cards ==== */
.bi-list a.bi-noimg { grid-template-columns: minmax(0, 1fr); }
.bi-list a.bi-plain { background: transparent; border-color: transparent; cursor: default; color: var(--text-muted); }
.bi-list a.bi-plain b { font-weight: 600; color: var(--text); }
.bi-list a.bi-plain:hover { border-color: transparent; }
/* ==== sizes row (audit 3): this size marked, an unavailable size plain text ==== */
span.sz-it:hover { border-color: var(--line); }
.sz-it.is-current, .sz-it.is-current:hover { background: var(--lime); border-color: var(--lime); color: var(--ink); }
.sz-it.is-current small { color: var(--ink); }
.sz-it.is-off { background: transparent; color: var(--text-muted); }

/* ==== flavour links on bottle pages (25 Oct): each flavour opens the bottles that share it ==== */
.bx-fl-a { display: block; min-height: 44px; margin: -4px -8px; padding: 4px 8px; border-radius: 8px; color: inherit; text-decoration: none; }
.bx-fl-a b { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); }
.bx-fl-a:hover { background: rgba(10, 15, 12, .05); }
.bx-fl-a:hover b { text-decoration-color: currentColor; }
/* ==== directory ==== */
/* the owner block under every brand page's hero (tools/community.py brand_section) */
.dir-owner { background: var(--cream); color: var(--ink); border-bottom: 1px solid var(--line); }
.dir-owner .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 0 18px; padding-top: 4px; padding-bottom: 4px; }
.dir-owner p { margin: 0; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 15px; }
.dir-owner a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--forest-3); font-weight: 700; font-size: 15px; text-underline-offset: 3px; }
.dir-owner .cm-tick { width: 24px; height: 24px; font-size: 14px; }
@media (max-width: 559px) { .dir-owner p { flex: 1 1 100%; min-height: 36px; } .dir-owner a { margin-right: 14px; } }
/* the brand's mark at the head of its About section: a free-licence logo with its credit, or a wordmark */
.dir-mark { margin: 0 0 18px; display: grid; gap: 6px; justify-items: start; }
.dir-mark img { display: block; width: auto; height: auto; max-width: min(100%, 160px); max-height: 60px; }
.dir-mark figcaption { font-size: 11.5px; line-height: 1.4; color: var(--text-muted); max-width: 60ch; }
.dir-mark figcaption a { color: inherit; }
.dir-mark--word span { display: inline-block; padding: 8px 14px; border: 2px solid var(--ink); border-radius: 6px; font-family: var(--font-display); font-stretch: 78%;
  font-weight: 800; font-size: 22px; line-height: 1.05; letter-spacing: .01em; text-transform: uppercase; overflow-wrap: anywhere; max-width: 100%; }
/* a claimed brand's pack shots and image form */
.dir-shots { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); margin: 0 0 20px; }
.dir-shots img { width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; background: var(--white); border: 1px solid var(--line); border-radius: 10px; }
.dir-what { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.dir-what legend { padding: 0; margin-bottom: 6px; font-size: 14px; font-weight: 600; }
.dir-what .su-chip span { border-color: var(--line); min-height: 44px; display: inline-flex; align-items: center; }
/* the A to Z: text lines, no photos (tools/build_catalogue.py brands_page) */
.ct--brands .bi-list.dir-az { grid-template-columns: repeat(auto-fill, minmax(min(46%, 210px), 1fr)); gap: 6px; }
.ct--brands .bi-list.dir-az a { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 1px; min-height: 44px; padding: 6px 10px;
  text-align: left; font-size: 14px; font-weight: 700; line-height: 1.2; overflow-wrap: anywhere; }
.ct--brands .bi-list.dir-az small { max-width: 100%; font-weight: 400; }
.ct--brands .bi-list.dir-az a[hidden] { display: none; }
.dir-tops { grid-template-columns: repeat(auto-fill, minmax(min(30%, 150px), 1fr)); gap: 8px; }
.dir-tops .bi-top { gap: 4px; padding: 30px 6px 10px; border-radius: 10px; }
.dir-tops .bi-top > span { top: 6px; left: 6px; width: 20px; height: 20px; font-size: 10px; }
.dir-tops .bi-top-img { width: 40px; height: 50px; }
.dir-tops .bi-top b { font-size: 13px; line-height: 1.2; overflow-wrap: anywhere; }
.dir-tops .bi-top em { font-size: 11px; color: var(--text-muted); }
/* New in the directory (tools/build_brands.py new_brands) */
.dir-new { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.dir-new a { display: grid; gap: 2px; min-height: 44px; padding: 10px 12px; background: var(--white); border: 1px solid var(--line); border-radius: 10px; color: var(--text); text-decoration: none; }
.dir-new a:hover { border-color: var(--ink); }
.dir-new small { font-size: 12.5px; color: var(--text-muted); }
/* archived bottle pages (tools/bottle_archive.py) */
.dir-arch .bt-first { margin: 0 0 8px; color: var(--on-dark-muted); font-size: 15px; line-height: 1.45; }
.dir-price { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 14px 16px; border-radius: 12px; background: var(--lime); color: var(--ink); }
.dir-price b { font-family: var(--font-display); font-weight: 800; font-size: 32px; line-height: 1; }
.dir-price span { font-size: 14px; flex: 1 1 auto; }
.dir-price .rk-btn { min-height: 44px; }
.dir-sib { margin: 0 0 8px; padding: 12px 14px; border-radius: 10px; background: var(--cream); font-size: 15px; }
.dir-sib a { font-weight: 700; color: var(--forest-3); }
.dir-chart { margin: 0; }
.dir-chart .bt-chart { width: 100%; height: auto; }
/* a product we know without a photo: a text card, no empty box */
.br-item.dir-noimg { grid-template-columns: minmax(0, 1fr); }
/* facts and figures fill their row: the last cell takes the space an odd count leaves (no grey gap) */
.bd-about .dp-kv > div:last-child:nth-child(odd), .dir-arch .dp-kv > div:last-child:nth-child(odd), .dir-kpis > div:last-child:nth-child(odd) { grid-column: span 2; }
@media (min-width: 560px) {
  .bd-about .dp-kv > div:last-child, .dir-arch .dp-kv > div:last-child { grid-column: auto; }
  .bd-about .dp-kv > div:last-child:nth-child(3n+1), .dir-arch .dp-kv > div:last-child:nth-child(3n+1) { grid-column: span 3; }
  .bd-about .dp-kv > div:last-child:nth-child(3n+2), .dir-arch .dp-kv > div:last-child:nth-child(3n+2) { grid-column: span 2; }
}
@media (min-width: 860px) {  /* two to four figures share one row */
  .dir-kpis { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
  .dir-kpis > div:last-child:nth-child(odd) { grid-column: auto; }
}
/* ==== bottle sizes (tools/build_sizes.py) ==== */
.bs-table tbody tr { cursor: default; }
.bs-table tbody tr:hover { background: transparent; }
.bs-table th:last-child, .bs-price th:nth-child(2), .bs-table td.dp-price, .bs-table td.bs-vs { text-align: right; }
.bs-price { max-width: 720px; }
.bs-table .dp-pos { width: 30px; font-size: 18px; }
.bs-name .ln-b span b { font-weight: 600; }
.bs-name small { color: var(--text-muted); font-size: 12px; }
.bs-name .bs-rk { display: block; margin-top: 3px; }
.bs-vs { white-space: nowrap; }
.bs-vs small { display: block; color: var(--text-muted); font-size: 12px; }
.bs-table td.dp-price small { font-size: 12px; }
.si-numbers .bs-switch a { min-height: 44px; padding: 6px 16px; }
.bs-more { margin: 12px 0 0; font-size: 14px; }
.bs-more a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--text); font-weight: 600; text-underline-offset: 3px; }
@media (max-width: 520px) { .bs-table td, .bs-table th { padding-right: 8px; } .bs-table td:last-child, .bs-table th:last-child { padding-right: 0; } }
/* ==== hub brands ==== */
/* the 20 brands under the UK categories on /data (tools/hub_brands.py): the category chips' look, its heading the categories' label */
.hb { margin-top: 18px; }
.hb-h { margin: 0; font-family: var(--font-mono); font-stretch: normal; font-size: 11px; font-weight: 400; line-height: 1.5; letter-spacing: .1em; text-transform: uppercase; color: var(--on-dark-muted); }
.hb-h small { display: block; font-size: 10px; opacity: .75; }
@media (max-width: 600px) {  /* one row to swipe, edge to edge like the number ones, so 20 chips don't stack ten deep */
  .hb .si-switch { flex: none; flex-wrap: nowrap; width: calc(100% + 2 * var(--gutter)); margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter) 2px; overflow-x: auto; scroll-padding-left: var(--gutter); scroll-snap-type: x proximity; scrollbar-width: none; }
  .hb .si-switch::-webkit-scrollbar { display: none; }
  .hb .si-switch a { flex: none; min-height: 44px; white-space: nowrap; scroll-snap-align: start; }
}
/* ==== shopper fixes, audit 3 (25 Oct): compact gift rows, search tips, advent photos ==== */
.sh-rows { margin-top: 12px; }
.sh-rows .dp-table tbody tr { position: relative; cursor: pointer; }
.sh-rows .dp-table tbody tr:hover { background: var(--white); }
.sh-rows .dp-name-a::after { content: ""; position: absolute; inset: 0; }  /* the whole row opens the bottle */
.sh-rows .dp-name { min-width: 0; }
.sr-tips { margin: 10px 0 0; font-size: 14px; color: var(--text-muted); }
.sr-tips a, .hs-none a { color: var(--text); font-weight: 600; }
.ad-item .ad-img { flex: none; width: 44px; height: 56px; object-fit: contain; }
.ad-item .ad-img + .ad-t { flex: 1 1 auto; }
.rk-body .rk-stars { display: block; margin: 2px 0 6px; font-size: 13px; }

/* ==== integrity fixes, audit 3 (25 Oct): the date beside another shop's price, plain cards, the edition you are on ==== */
.rk-opts span small, .rk-sd-row > small { margin-left: 6px; font-size: 11.5px; font-weight: 500; opacity: .7; white-space: nowrap; }
span.rk-name:hover b { text-decoration: none; }
.sr-archive span[aria-current] { padding: 8px 14px; border: 1px solid var(--ink); border-radius: 999px; background: var(--ink); color: var(--white); font-size: 14px; font-weight: 600; }
/* rows 26 to 50 (George, 25 Oct): a compact card each, one link to the bottle page; the table's names carry the photo too */
.rk-rows { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
@media (min-width: 760px) { .rk-rows { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .rk-rows { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.rk-row { display: flex; align-items: center; gap: 10px; min-height: 76px; padding: 8px 14px 8px 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--white); color: var(--text); text-decoration: none; }
.rk-row:hover { border-color: var(--ink); }
.rk-row:hover .rk-row-t b { text-decoration: underline; text-underline-offset: 3px; }
.rk-row-n { flex: none; min-width: 26px; font: 800 15px/1 var(--font-display); text-align: center; }
.rk-row-img { flex: none; width: 48px; height: 60px; object-fit: contain; border-radius: 6px; background: var(--white); }
.rk-row-img--none { display: inline-block; width: 48px; height: 60px; }
.rk-row-t { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rk-row-t b { font-weight: 700; font-size: 14.5px; line-height: 1.2; }
.rk-row-t span { font-size: 13px; line-height: 1.3; color: var(--text-muted); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.rk-row-t small { font-size: 11.5px; line-height: 1.3; color: var(--text-muted); }
.rk-row > strong { flex: none; max-width: 34%; text-align: right; font: 800 16px/1.15 var(--font-display); }
.rk-row > strong small { display: block; margin-top: 2px; font: 500 11px/1.3 var(--font-body); color: var(--text-muted); }
.rk-row > strong.is-off { font: 600 13px/1.2 var(--font-body); color: var(--text-muted); }
/* Shelfdrop Rank switch on a category top 50 (assets/srank.js): two ruled buttons, a mono note under a 2px ink rule */
.sr-switch { margin: 0 0 18px; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--line); padding: 10px 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; }
.sr-btns { display: inline-flex; border: 1px solid var(--ink); border-radius: 999px; overflow: hidden; }
.sr-btns button { appearance: none; border: 0; margin: 0; padding: 7px 14px; background: var(--white); color: var(--text); font: 600 11px/1.2 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.sr-btns button + button { border-left: 1px solid var(--ink); }
.sr-btns button[aria-pressed="true"] { background: var(--ink); color: var(--white); }
.sr-btns button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.sr-note { flex: 1 1 260px; margin: 0; font: 500 10.5px/1.4 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.sr-note a { color: inherit; text-underline-offset: 3px; }
.sr-list { margin-top: 0; }
.dp-name-a { display: flex; align-items: center; gap: 10px; }
.dp-name .dp-name-t { display: block; min-width: 0; margin: 0; font-size: inherit; color: inherit; }
.dp-thumb { flex: none; width: 36px; height: 45px; object-fit: contain; border-radius: 4px; background: var(--white); }
.dp-thumb--none { display: inline-block; width: 36px; height: 45px; }
@media (max-width: 520px) { .dp-thumb, .dp-thumb--none { width: 28px; height: 35px; } .dp-name-a { gap: 8px; } }
/* ==== hub modules and market widget ==== */
/* tools/hub_modules.py: the hub's previews in its existing parts (movers rows, number-one tiles, link cards, chips, the groups
   table); only spacing, 44px taps and the two-column spirits and wine grid are new. tools/market_widget.py: one dark card, on
   the hub and every category page, with the UK market figures' own grid (ukm-kpis) and pills (ms-links). */
.hs-doors .tk-door:nth-child(2) { grid-column: auto; }  /* the For brands door moved to the foot of the hub */
.hm-jump a { min-height: 44px; }
@media (max-width: 600px) { .si--hub .si-open:not(.hb) .si-switch a { min-height: 44px; } }  /* the UK categories, as tall as the brands strip under them */
.si--hub .hs-ones-head a { display: inline-flex; align-items: center; min-height: 44px; }
.hm .rk-links + .hm-chips, .hm .hm-chips + .si-mv-col, .hm .si-mv-grid + .hm-chips, .hm .table-wrap + .ln-more { margin-top: 14px; }
.hm-chips a { display: inline-flex; align-items: center; min-height: 44px; box-sizing: border-box; }
@media (max-width: 600px) {  /* one row to swipe, edge to edge, as the brands strip: twenty gift pages don't stack ten deep */
  .hm-chips { flex-wrap: nowrap; width: calc(100% + 2 * var(--gutter)); margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter)); padding: 0 var(--gutter) 2px; overflow-x: auto; scroll-padding-left: var(--gutter); scroll-snap-type: x proximity; scrollbar-width: none; }
  .hm-chips::-webkit-scrollbar { display: none; }
  .hm-chips a { flex: none; white-space: nowrap; scroll-snap-align: start; }
}
.hm .si-mv-col h3 a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: inherit; text-decoration: none; }
.hm .si-mv-col h3 a:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 900px) { .hm-two { grid-template-columns: repeat(2, 1fr); } }
.hm-owners td:last-child { white-space: nowrap; }
.mw { display: grid; gap: 12px; max-width: 900px; padding: 14px; border: 1px solid rgba(var(--lime-rgb), .16); border-radius: 14px; background: #0c130e; color: var(--on-dark); }
.mw [hidden] { display: none !important; }
.mw-pick { display: block; }
.mw-pick select { width: 100%; min-height: 44px; padding: 0 12px; border: 1px solid var(--line-dark); border-radius: 8px; background: rgba(255,255,255,.06); color: var(--on-dark); font: 600 16px/1.2 var(--font-body); }
.mw-pick select:focus { outline: 2px solid var(--lime); outline-offset: 1px; }
.mw-pick option { color: var(--ink); background: var(--white); }
.mw .ukm-kpis { margin: 0; }
.mw b, .mw dd { font-variant-numeric: tabular-nums; }
.mw-kv { margin: 0; }
.mw-kv > div { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 2px 14px; padding: 10px 0; border-bottom: 1px solid var(--line-dark); font-size: 14px; }
.mw-kv > div:last-child { border-bottom: 0; }
.mw-kv dt { color: var(--on-dark-muted); }
.mw-kv dd { margin: 0; font-weight: 600; text-align: right; }
.mw-kv a { display: inline-block; padding: 12px 0; margin: -12px 0; color: var(--on-dark); text-underline-offset: 3px; }
.mw .ms-links { margin: 0; }
.mw .ms-src { margin: 0; color: rgba(243,245,239,.55); }
.mw .ms-src a { color: inherit; }
#market > .wrap > .ms-links { margin-top: 14px; }
/* one card structure (George, 25 Oct): the same photo area on every card, cards in a row as tall as each other, the price box at the bottom */
.rk-top, .rk-grid { align-items: stretch; }
.rk-card { align-items: stretch; }
.rk-card--top { grid-template-rows: auto 1fr; }
.rk-card--top .rk-media { height: 290px; min-height: 0; box-sizing: border-box; }
.rk-body { display: flex; flex-direction: column; gap: 10px; }
.rk-body > .rk-price, .rk-body > .rk-buy { margin-top: auto; }
.rk-notes { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }  /* its label, then two lines */
.rk-opts-more a { display: block; padding: 4px 10px; color: var(--ink); font-size: 12.5px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Rank cards, 25 Oct: the bottle page link, the bottle's own facts, when each price was checked ---------- */
.rk-media { cursor: pointer; }
.rk-media:hover .rk-photo { transform: scale(1.03); }
.rk-photo { transition: transform .2s ease; }
.rk-meta { margin: 0; display: flex; flex-wrap: wrap; gap: 2px 0; font-size: 12.5px; line-height: 1.4; color: var(--text-muted); }
.rk-meta span + span::before { content: "·"; margin: 0 6px; }
.rk-taste { display: grid; gap: 6px; }
.rk-taste > b { font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--text); }
.rk-fl { margin: 0; display: flex; flex-wrap: wrap; gap: 5px; }
.rk-fl a, .rk-fl span { display: inline-flex; align-items: center; min-height: 26px; padding: 0 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); color: var(--text); font-size: 12.5px; font-weight: 600; line-height: 1; text-decoration: none; }
.rk-fl a:hover, .rk-fl a:focus-visible { border-color: var(--ink); background: var(--lime); }
.rk-tn { margin: 0; font-size: 13px; line-height: 1.45; color: var(--text-muted); }
.rk-tn--clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rk-sd-row > small.rk-ck { flex: 0 0 100%; margin: 0; font-size: 11px; font-weight: 500; opacity: .68; }
.rk-sd-note { flex: 0 0 100%; margin: -2px 0 0; font-size: 12px; font-weight: 600; line-height: 1.35; color: var(--ink); }
.rk-sd-note::before { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 6px 1px 0; border-radius: 50%; background: var(--ink); vertical-align: middle; }
.rk-opts span small { opacity: .68; }
time.ck { font-variant-numeric: tabular-nums; }
.dp-price small.dp-ck, .ln-price small { display: block; font-weight: 500; font-size: 11px; color: var(--text-muted); }
a.si-mv small.si-mv-ck { font-size: 11px; }
.rk-row > strong small + small { margin-top: 0; }
.rk-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.rk-go { flex: 0 0 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 42px; padding: 8px 14px; box-sizing: border-box; border: 1.5px solid var(--ink); border-radius: 10px; background: var(--white); color: var(--ink); font: 700 13.5px/1.25 var(--font-body); text-decoration: none; }
.rk-go:hover, .rk-go:focus-visible { background: var(--ink); color: var(--lime); }
.rk-go span { flex: none; font-size: 16px; }
.rk-card--top .rk-go { min-height: 46px; font-size: 14.5px; }
.rk-acts .sf-btn, .rk-card--row .rk-acts .sf-btn { min-height: 28px; padding: 0 9px; gap: 4px; font-size: 12px; border-color: transparent; color: var(--text-muted); }
.rk-acts .sf-btn svg { width: 14px; height: 14px; }
.rk-acts .sf-btn:hover, .rk-acts .sf-btn:focus-visible { border-color: var(--line); color: var(--text); }
@media (pointer: coarse) { .rk-acts .sf-btn, .rk-card--row .rk-acts .sf-btn { min-height: 40px; } }
.rk-body > .rk-acts { margin-top: auto; }
.rk-body > .rk-price + .rk-acts, .rk-body > .rk-buy + .rk-acts { margin-top: 0; }
.dp-sd > div > small { display: block; margin-top: 3px; font-size: 11px; font-weight: 500; opacity: .68; }

/* card body rows (tools/card_info.py rows): one fixed set, one line each, so cards in a row end level */
.rk-rows4 { display: grid; gap: 6px; min-width: 0; }
.rk-l { margin: 0; min-width: 0; min-height: 18px; font-size: 12.5px; line-height: 18px; color: var(--text-muted); }
.rk-l--rank { display: flex; align-items: center; gap: 6px; color: var(--text); }
.rk-l--rank svg { flex: none; width: 15px; height: 15px; color: #2f5a3a; }
.rk-l--rank span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.rk-l--facts { min-height: 18px; max-height: 36px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.rk-l.rk-fl { display: flex; flex-wrap: wrap; gap: 4px 5px; min-height: 24px; max-height: 24px; overflow: hidden; }
.rk-l.rk-fl a, .rk-l.rk-fl span { min-height: 24px; padding: 0 9px; font-size: 12px; }
.rk-l--hon { display: flex; flex-wrap: wrap; gap: 0 10px; max-height: 18px; overflow: hidden; color: var(--text); }
.rk-h { white-space: nowrap; font-weight: 600; }
.rk-h small { font-weight: 500; color: var(--text-muted); }
.rk-h--low { color: #2f5a3a; }
.rk-card--top .rk-l { font-size: 13.5px; line-height: 20px; min-height: 20px; }
.rk-card--top .rk-l--facts { max-height: 40px; }
.rk-card--top .rk-l--hon { max-height: 20px; }
.rk-card--top .rk-l.rk-fl { min-height: 28px; max-height: 28px; }
.rk-card--top .rk-l.rk-fl a, .rk-card--top .rk-l.rk-fl span { min-height: 28px; font-size: 12.5px; }
.rk-name span { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
/* the buy box (tools/offers.py box): the lime box is the best price and its button; the other shops sit under it */
.rk-buy { display: grid; gap: 8px; min-width: 0; }
.rk-sd-row b a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.rk-alt { display: grid; gap: 4px; min-width: 0; }
.rk-alt-k { margin: 0; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.rk-alt-more { font-family: var(--font-body); font-size: 12.5px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--text); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.rk-alt .rk-opts { margin: 0; }
.rk-alt .rk-opts a { padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--white); color: var(--text); }
.rk-alt .rk-opts a:hover, .rk-alt .rk-opts a:focus-visible { border-color: var(--ink); background: var(--white); }
.rk-alt .rk-opts span small { color: var(--text-muted); opacity: 1; }
.bt-side .rk-alt-k, .bt-side .rk-alt .rk-opts span small, .bt-head .rk-alt-k, .bt-head .rk-alt .rk-opts span small { color: var(--on-dark-muted); }
.bt-side .rk-alt-more, .bt-head .rk-alt-more { color: var(--on-dark); }
.bt-side .rk-alt .rk-opts a, .bt-head .rk-alt .rk-opts a { background: transparent; border-color: rgba(243,245,239,.22); color: var(--on-dark); }
.bt-side .rk-alt .rk-opts a:hover, .bt-head .rk-alt .rk-opts a:hover { border-color: var(--lime); }
@media (max-width: 719px) { .rk-l:empty { display: none; } }  /* one card a row: nothing to line up, so an empty row takes no room */
@media (max-width: 899px) { .rk-card--top .rk-l:empty { display: none; } }

/* ===== Blue accent (Oct 2026). Sparse by design: chart price line and bars, light-copy links, focus rings,
   Checked dates and the "Lowest price in 90 days" chip, outline buttons, the market strips. Lime CTAs and the buy box are untouched. ===== */
.section--cream, .eu-sec:nth-of-type(even), .prose .callout { --blue-text: var(--blue-cream); }
.site-header, .site-footer, .mega, .mobile-nav, .si-hero, .hero:not(.hero--lime), .article-hero, .section--dark, .section--ink, .section--forest, .si-dark, .dp-hero, .dp-chart-card, .dp-dr-chart, .si-chart-dark, .bt-brandline, .prose .tldr { --blue-text: var(--blue-on-dark); }
/* links in light-section copy */
.prose a, .si-method a, .bt-more a, .bs-more a { color: var(--blue-text); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.prose a:hover, .si-method a:hover, .bt-more a:hover, .bs-more a:hover { text-decoration-thickness: 2px; }
.si-numbers .si-method a { color: var(--blue-on-dark); }
/* focus rings: zero specificity, so every existing lime or ink ring still wins */
:where(a, button, summary, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--blue-text); outline-offset: 3px; }
/* info chips: Checked dates in tables and lists (not the lime buy box), and the 90-day low */
.dp-ck .ck, .dp-shops .ck, .rk-row strong .ck { color: var(--blue-text); }
.rk-h--low { display: inline-flex; align-items: center; min-height: 22px; padding: 0 9px; border-radius: 999px; background: var(--blue-tint); color: var(--blue); }
/* secondary buttons (lime bands keep their ink outline) */
.btn--outline { border-color: var(--blue); color: var(--blue-text); }
.btn--outline:hover { background: var(--blue); border-color: var(--blue); color: var(--white); }
.hero--lime .btn--outline, .section--lime .btn--outline, .cta-band .btn--outline { border-color: var(--line); color: var(--text); }
.hero--lime .btn--outline:hover, .section--lime .btn--outline:hover, .cta-band .btn--outline:hover { background: transparent; border-color: var(--ink); color: var(--text); }
.rk-go:hover, .rk-go:focus-visible { background: var(--blue); border-color: var(--blue); color: var(--white); }
/* market strips: Europe switcher and Pick a market */
.eu-nav a:hover { border-color: var(--blue-on-dark); }
.eu-nav a.is-on, .eu-nav > .is-on { background: var(--blue); border-color: var(--blue); color: var(--white); }
.si-mkpick a:hover, .si-mkpick a.is-on { border-color: var(--blue-on-dark); }
.si-mkpick a.is-on { background: rgba(53, 99, 233, .16); }
.si-mkpick a.is-on small, .si-mkpick a:hover .si-mk-go, .si-mkpick a.is-on .si-mk-go { color: var(--blue-on-dark); }
/* charts: price series blue (rank keeps its colour), and bars in market share and group shares */
.ch-s--price { stroke: var(--blue); }
.ch-e--price { fill: var(--blue); stroke: var(--white); }
:is(.dp-chart-card, .dp-dr-chart, .si-chart-dark, .si-dark, .hw-card) .ch-s--price { stroke: var(--blue-on-dark); }
:is(.dp-chart-card, .dp-dr-chart, .si-chart-dark, .si-dark, .hw-card) .ch-e--price { fill: var(--blue-on-dark); stroke: var(--ink); }
:is(.dp-chart-card, .dp-dr-chart, .si-chart-dark, .si-dark, .hw-card) .ch-s--rank { stroke: var(--lime); }
.ms-bar:not(.ms-bar--stack) rect { fill: var(--blue); }
.br-share i::after { background: var(--blue); }
/* ==== "N people are tracking this price" (assets/alerts.js, assets/data/watching.json) ==== */
.al-watch { margin: 0; font-size: 13px; line-height: 1.4; color: var(--text-muted); }
.al-card .al-watch { color: var(--on-dark-muted); }
.ms-watch { margin-top: 2px; }
/* ==== The shopper account, /data/account (tools/build_alerts.py, assets/account.js) ==== */
.ac-hero h1 { max-width: none; }
.ac { display: grid; gap: 28px; max-width: 900px; }
.ac-card { display: grid; gap: 14px; max-width: 520px; padding: clamp(20px, 4vw, 32px); border: 1px solid var(--line); border-radius: 18px; background: var(--white); }
.ac-card h2 { margin: 0; font-size: clamp(22px, 3vw, 28px); }
.ac-go { width: 100%; min-height: 52px; }
.ac-go[disabled] { opacity: .6; cursor: progress; }
.ac-in { display: grid; gap: 28px; } .ac-in[aria-busy="true"] { opacity: .65; }
.ac-top { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; padding: 14px 18px; border-radius: 14px; background: var(--cream); }
.ac-who { margin: 0; font-size: 15px; overflow-wrap: anywhere; min-width: 0; }
.ac-in .rk-btn { min-height: 44px; padding: 0 16px; }
.ac-sec { display: grid; gap: 14px; }
.ac-sec-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; }
.ac-sec-h h2 { margin: 0; font-size: clamp(22px, 3vw, 30px); }
.ac-n { display: inline-grid; place-items: center; min-width: 28px; height: 28px; padding: 0 8px; border-radius: 999px; background: var(--ink); color: var(--lime); font: 700 13px/1 var(--font-mono); }
.ac-more { margin-left: auto; display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--text); }
.ac-add { display: grid; gap: 8px; position: relative; }
.ac-q { width: 100%; height: 50px; padding: 0 16px; border-radius: 12px; border: 1px solid var(--line); background: var(--white); color: var(--text); font: inherit; font-size: 16px; }
.ac-q:focus { outline: 2px solid var(--lime-deep); outline-offset: 1px; border-color: var(--ink); }
.ac-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; }
.ac-res { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ac-res:empty { display: none; }
.ac-r { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 10px 12px; align-items: center; padding: 8px 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); }
.ac-r--none { display: block; padding: 12px 14px; color: var(--text-muted); }
.ac-r-ph { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 8px; background: var(--white); overflow: hidden; }
.ac-r-ph img { max-width: 100%; max-height: 44px; object-fit: contain; }
.ac-r-ph--i svg, .ac-ph--i svg { width: 20px; height: 20px; fill: none; stroke: var(--ink); stroke-width: 1.6; }
.ac-r-t { min-width: 0; font-size: 15px; line-height: 1.3; overflow-wrap: anywhere; } .ac-r-t small { display: block; margin-top: 2px; font-size: 13px; color: var(--text-muted); }
.ac-r-on { font: 600 12px var(--font-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); }
.ac-edit { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; }
.ac-edit--new { grid-column: 2 / -1; }
.ac-edit--new .ac-r-t { flex: 1 1 100%; }
.ac-edit .al-status { flex: 1 1 100%; }
.ac-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ac-al { display: grid; grid-template-columns: 56px minmax(0, 1fr); grid-template-areas: "ph what" "acts acts"; gap: 10px 14px; align-items: center; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--white); }
.ac-al.is-paused { background: var(--paper); } .ac-al.is-paused .ac-what a { color: var(--text-muted); }
.ac-ph { grid-area: ph; display: grid; place-items: center; width: 56px; height: 64px; border-radius: 10px; background: var(--paper); overflow: hidden; }
.ac-ph img { max-width: 100%; max-height: 60px; object-fit: contain; }
.ac-what { grid-area: what; display: grid; gap: 4px; min-width: 0; } .ac-what .al-kind { grid-column: auto; }
.ac-what a { font-weight: 700; color: var(--text); overflow-wrap: anywhere; } .ac-what small { font-size: 14px; color: var(--text-muted); }
.ac-acts { grid-area: acts; display: flex; flex-wrap: wrap; gap: 8px; }
.ac-al .ac-edit { grid-column: 1 / -1; }
.al-kind--cat { background: var(--cream); }
.ac-shelf { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); }
.ac-sh { display: grid; gap: 6px; align-content: start; height: 100%; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--white); color: var(--text); text-decoration: none; font-size: 14px; line-height: 1.3; }
.ac-sh img, .ac-sh-ph { width: 100%; height: 110px; object-fit: contain; }
.ac-sh strong { font-family: var(--font-mono); font-size: 15px; }
.ac-sh:hover, .ac-sh:focus-visible { border-color: var(--ink); }
.ac-foot { display: flex; flex-wrap: wrap; gap: 12px 22px; align-items: center; padding-top: 6px; border-top: 1px solid var(--line); }
.ac-stop { min-height: 48px; }
.ac-del { min-height: 44px; color: #9c2f2b; }
@media (min-width: 720px) {
  .ac-al { grid-template-columns: 56px minmax(0, 1fr) auto; grid-template-areas: "ph what acts"; }
  .ac-acts { justify-content: flex-end; }
  .ac-go { width: auto; justify-self: start; }
}
/* ==== hub first screen: search on the left, tabs of cards on the right (George, 25 Oct; tools/hub_hero.py) ==== */
.si-hero--hub { padding-top: clamp(18px, 2.6vw, 36px); }
.si-hero--hub .si-lockrow { margin-bottom: 18px; }
.hx { display: grid; gap: 26px; align-items: start; }
@media (min-width: 1100px) { .hx { grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 44px; } }
.hx-l .hs { margin: 0; max-width: none; }
.hx-l .hs input { min-height: 68px; font-size: 18px; }
.hx-l .hs-trust { margin-top: 14px; font-size: 13.5px; }
.hx-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 20px; }
@media (min-width: 560px) { .hx-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.hx-tile { display: grid; gap: 10px; align-content: start; min-height: 88px; padding: 13px; border-radius: 14px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); color: var(--on-dark); text-decoration: none; transition: border-color .15s ease, background .15s ease; }
.hx-tile:hover { border-color: var(--lime); background: rgba(var(--lime-rgb), .08); color: var(--on-dark); }
@media (max-width: 559px) { .hx-tile { grid-template-columns: 34px 1fr; align-items: center; min-height: 60px; padding: 11px; } }
.hx-r { min-width: 0; }
.hx-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.hx-tabs { display: flex; gap: 6px; min-width: 0; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter); }
.hx-tabs::-webkit-scrollbar, .hx-car::-webkit-scrollbar { display: none; }
.hx-tab { flex: none; min-height: 40px; padding: 0 15px; border-radius: 999px; border: 1px solid rgba(255,255,255,.16); background: transparent; color: var(--on-dark); font: 600 14px/1 var(--font-body); cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.hx-tab:hover { border-color: var(--lime); }
.hx-tab[aria-selected="true"] { background: var(--lime); border-color: var(--lime); color: var(--ink); }
.hx-tab:focus-visible, .hx-arrow:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
.hx-arrows { display: none; gap: 6px; flex: none; }
.hx-arrow { width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255,255,255,.2); background: transparent; color: var(--on-dark); display: grid; place-items: center; cursor: pointer; }
.hx-arrow svg { width: 18px; height: 18px; }
.hx-arrow:hover { border-color: var(--lime); color: var(--lime); }
.hx-car { display: grid; grid-auto-flow: column; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter) 4px; scroll-padding-left: var(--gutter); }
@media (min-width: 1100px) { .hx-tabs, .hx-car { margin: 0; padding-left: 0; padding-right: 0; scroll-padding-left: 0; } .hx-arrows { display: flex; } }
.hx-car--cards { grid-auto-columns: 156px; }
.hx-car--links { grid-template-rows: repeat(3, auto); grid-auto-columns: minmax(176px, 1fr); }
.hx-car .hs-one { min-height: 240px; }
.hx-cat { min-height: 0 !important; }
.hx-cat-n { margin-top: auto; font-size: 14.5px; font-weight: 700; line-height: 1.2; }
.hx-link { scroll-snap-align: start; display: flex; align-items: center; min-height: 54px; padding: 10px 14px; border-radius: 12px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); color: var(--on-dark); font-size: 14.5px; font-weight: 600; line-height: 1.25; text-decoration: none; }
.hx-link:hover { border-color: var(--lime); color: var(--lime); }
.hx-more { scroll-snap-align: start; display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 54px; padding: 12px 14px; border-radius: 14px; border: 1px dashed rgba(var(--lime-rgb), .55); color: var(--lime); font-size: 14.5px; font-weight: 700; text-decoration: none; }
.hx-more:hover { background: rgba(var(--lime-rgb), .08); color: var(--lime); }
.hx-car--cards .hx-more { flex-direction: column; justify-content: center; text-align: center; }
/* ==== researched lists: rare whisky, organic, eco-friendly and kosher spirits (tools/build_lists.py) ==== */
.ls-bar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 16px; margin: 20px 0 14px; }
.ls-kinds, .ls-sort { display: flex; flex-wrap: wrap; gap: 6px; }
.ls-kinds button, .ls-sort button { min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--white); color: var(--text); font: 600 13.5px/1 var(--font-body); cursor: pointer; }
.ls-kinds button:hover, .ls-sort button:hover { border-color: var(--ink); }
.ls-kinds button.is-on, .ls-sort button.is-on { background: var(--ink); border-color: var(--ink); color: var(--lime); }
.ls-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ls-row { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px 16px; padding: 16px; background: var(--white); border: 1px solid var(--line); border-radius: 16px; }
.ls-row--plain { grid-template-columns: minmax(0, 1fr); }
.ls-row[hidden] { display: none; }
@media (min-width: 820px) { .ls-row { grid-template-columns: 76px minmax(0, 1fr) 270px; align-items: center; } .ls-row--plain { grid-template-columns: minmax(0, 1fr) 270px; } }
.ls-age { display: grid; justify-items: center; align-content: center; width: 64px; height: 64px; border-radius: 14px; background: var(--ink); color: var(--lime); font: 800 24px/1 var(--font-display); }
@media (min-width: 820px) { .ls-age { width: 76px; height: 76px; font-size: 27px; } }
.ls-age small { margin-top: 5px; font: 500 9.5px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--on-dark-muted); }
.ls-main { min-width: 0; }
.ls-main h3 { margin: 0 0 4px; font: 600 16.5px/1.3 var(--font-body); }
.ls-main h3 b { font-weight: 800; }
.ls-main h3 a { color: inherit; text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }
.ls-facts { margin: 0; font-size: 13.5px; line-height: 1.4; color: var(--text-muted); }
.ls-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.ls-chip { display: inline-flex; align-items: baseline; gap: 6px; padding: 5px 10px; border-radius: 999px; background: var(--cream); color: var(--text); font-size: 12.5px; font-weight: 600; line-height: 1.2; text-decoration: none; }
.ls-chip small { font-size: 11.5px; font-weight: 500; color: var(--text-muted); }
a.ls-chip:hover { background: var(--lime); }
.ls-chip--n { background: var(--ink); color: var(--lime); }
.ls-buy { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding-top: 12px; border-top: 1px solid var(--line); }
@media (min-width: 820px) { .ls-buy { grid-column: auto; display: grid; justify-items: end; text-align: right; padding: 0 0 0 16px; border-top: 0; border-left: 1px solid var(--line); } }
.ls-price { margin: 0; font-size: 13px; color: var(--text-muted); }
.ls-price b { font: 800 21px/1.1 var(--font-display); color: var(--text); }
.ls-price small { display: block; font-size: 11.5px; }
.ls-buy .rk-btn { white-space: normal; }
.ls-more { flex-basis: 100%; margin: 0; font-size: 12.5px; color: var(--text-muted); }
.ls-more a { color: var(--text); }
/* a bottle page with no photo of our own (tools/bottle_research.py): its age, vintage or kind, in the dot style */
.bt-photo--type { position: relative; overflow: hidden; background: var(--ink); background-image: radial-gradient(rgba(var(--lime-rgb), .22) 1px, transparent 1.4px); background-size: 18px 18px; border: 1px solid rgba(255,255,255,.12); }
.bt-type { display: grid; justify-items: center; align-content: center; gap: 4px; width: 80px; height: 100px; color: var(--lime); text-align: center; }
.bt-type b { font: 800 34px/0.9 var(--font-display); text-transform: uppercase; }
.bt-type b.bt-type-w { font-size: 13px; letter-spacing: .02em; }
.bt-type small { font: 500 8.5px/1.2 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--on-dark-muted); }
@media (min-width: 880px) { .bt-type { width: 260px; height: 325px; gap: 10px; } .bt-type b { font-size: 110px; } .bt-type b.bt-type-w { font-size: 40px; } .bt-type small { font-size: 12px; } }

/* hub, first section (George, 26 Oct): categories and brands as tiles, the stats in the tile look, a plain jump strip */
.hc { margin-top: 30px; }
.hc-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.hc-h { margin: 0; font-family: var(--font-mono); font-stretch: normal; font-size: 11px; font-weight: 400; line-height: 1.5; letter-spacing: .1em; text-transform: uppercase; color: var(--on-dark-muted); }
.hc-all { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; color: var(--on-dark); font-size: 13.5px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.hc-all:hover { color: var(--lime); }
.hc-sub { margin: 16px 0 8px; font-size: 14px; font-weight: 700; color: var(--on-dark); }
.hc--brands .hc-grid { margin-top: 6px; }
.hc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 900px) { .hc-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.hc-tile { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 10px; align-items: center; min-height: 72px; padding: 10px 12px 10px 10px; border-radius: 12px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); color: var(--on-dark); text-decoration: none; transition: border-color .15s ease, background .15s ease; }
.hc-tile:hover { border-color: var(--lime); background: rgba(var(--lime-rgb), .08); }
.hc-img { width: 40px; height: 50px; object-fit: contain; background: #fff; border-radius: 6px; padding: 2px; }
.hc-img--none { display: block; background: rgba(255,255,255,.12); }
.hc-x { display: grid; gap: 2px; min-width: 0; }
.hc-x b { font-size: 14.5px; font-weight: 700; line-height: 1.2; }
.hc-one { font-size: 12.5px; line-height: 1.3; color: var(--on-dark-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hc-x small { font-family: var(--font-mono); font-size: 11px; color: var(--lime); }
.si--hub .dp-kpis.hc-stats { gap: 8px; background: none; border: 0; }
.si--hub .dp-kpis.hc-stats > div { border-radius: 12px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); }
.si--hub .hm-jump { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter)); padding: 2px var(--gutter) 6px; }
.si--hub .hm-jump > span { flex: none; }
.si--hub .hm-jump a { flex: none; white-space: nowrap; border-style: solid; border-color: rgba(255,255,255,.14); background: rgba(255,255,255,.05); }
.si--hub .hm-jump a:hover { border-color: var(--lime); }
/* hub: Trending products, brands and parent companies under the tabs (tools/hub_hero.py trending) */
.tr-wrap { display: grid; gap: 22px; margin-top: 28px; }
.tr { min-width: 0; }
.tr-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 8px; }
.tr-h { margin: 0; font-family: var(--font-mono); font-stretch: normal; font-size: 11px; font-weight: 400; line-height: 1.5; letter-spacing: .1em; text-transform: uppercase; color: var(--on-dark-muted); }
.tr-all { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; color: var(--on-dark); font-size: 13.5px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.tr-all:hover { color: var(--lime); }
.tr-row .hs-one-p { font-size: 12px; }
/* hub: In the press (tools/hub_hero.py press(), tools/pull_press.py) and the brand page list (tools/build_brands.py press_section) */
.tr-note { margin-left: auto; color: var(--on-dark-muted); font-size: 12px; }
.tr--press .hs-ones { grid-auto-columns: minmax(236px, 272px); }
.hs-press { gap: 8px; min-height: 0; }
.hs-press:hover { transform: none; }
.hs-press .hs-one-k { font-weight: 600; letter-spacing: .01em; }
.hs-press-h { color: var(--ink); font-size: 15px; font-weight: 700; line-height: 1.3; text-decoration: none; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.hs-press-h:hover, .hs-press-h:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
.hs-press-s { margin: 0; color: #555; font-size: 12.5px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.hs-press-b { margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; min-height: 36px; padding: 0 12px; border: 1px solid var(--ink); border-radius: 99px; color: var(--ink); font-size: 12.5px; font-weight: 600; text-decoration: none; }
a.hs-press-b:hover, a.hs-press-b:focus-visible { background: var(--ink); color: var(--lime); }
.bd-press .bd-h { margin-top: 0; }
.bd-press-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; max-width: 760px; }
.bd-press-list li { padding: 14px 0; border-top: 1px solid var(--line, rgba(0,0,0,.12)); }
.bd-press-list li:last-child { border-bottom: 1px solid var(--line, rgba(0,0,0,.12)); }
.bd-press-list a { font-weight: 700; font-size: 17px; line-height: 1.3; color: inherit; }
.bd-press-m { display: block; margin-top: 4px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; opacity: .7; }
.bd-press-list p { margin: 6px 0 0; font-size: 14.5px; line-height: 1.5; }
/* ==== product page (tools/product_page.py, assets/product.js): one template for every bottle page ==== */
.pp-brand { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin: -4px 0 2px; color: var(--lime); font-weight: 600; font-size: 15px; text-decoration: none; }
.pp-brand:hover, .pp-brand:focus-visible { text-decoration: underline; text-underline-offset: 4px; }
.bt-hero--shop .pp-facts { display: flex; flex-wrap: wrap; gap: 4px; margin: 8px 0 0; padding: 0; list-style: none; }
.pp-facts li { padding: 2px 8px; border: 1px solid var(--line-dark); border-radius: 999px; font-size: 12.5px; line-height: 1.4; }
@media (min-width: 880px) { .pp-facts li { padding: 3px 10px; font-size: 13.5px; } }
.pp-facts li:has(> a) { padding: 0; }
.pp-facts a { position: relative; display: inline-block; padding: 2px 8px; color: inherit; text-decoration: none; }
.pp-facts a::after, a.pp-tag::after { content: ""; position: absolute; inset: -11px -2px; }  /* a 44px tap target, the chip's own size */
.pp-facts li:has(> a:hover), .pp-facts li:has(> a:focus-visible) { border-color: var(--lime); }
.pp-facts a:hover, .pp-facts a:focus-visible { color: var(--lime); outline: none; }
.at-tags a.pp-tag { position: relative; font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--cream); color: var(--text); text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 30%, transparent); text-underline-offset: 2px; }
.at-tags a.pp-tag:hover, .at-tags a.pp-tag:focus-visible { background: var(--lime); text-decoration-color: currentColor; outline: none; }
.at-tags i.is-plain { color: var(--text-muted); }
@media (min-width: 880px) { .pp-facts li:has(> a) { padding: 0; } .pp-facts a { padding: 3px 10px; } }
.pp-per { display: grid; gap: 8px; }
.pp-per-tabs, .pp-range { display: flex; flex-wrap: wrap; gap: 6px; }
.pp-per-tabs[hidden], .pp-range[hidden] { display: none; }
.pp-per-tabs button, .pp-range button { min-height: 44px; padding: 0 16px; border: 1px solid var(--line); border-radius: 999px; background: var(--white); color: var(--text); font: 600 14px/1 var(--font-body); cursor: pointer; }
.bt-hero .pp-per-tabs button { border-color: var(--line-dark); background: transparent; color: var(--on-dark); }
.pp-per-tabs button[aria-pressed="true"], .pp-range button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--lime); }
.bt-hero .pp-per-tabs button[aria-pressed="true"] { background: var(--lime); border-color: var(--lime); color: var(--ink); }
.pp-per-vals { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; padding: 0; list-style: none; font-size: 14px; color: var(--on-dark-muted); }
.pp-per-vals b { color: var(--on-dark); font-size: 16px; }
[data-pp-root] .rk-btn, [data-pp-root] .bt-embed summary { min-height: 44px; }
[data-pp-root] .bt-embed summary { display: flex; align-items: center; }
.pp-sub { margin-top: 22px; }
.pp-sec h2 + .pp-sub, .pp-sec h2 + p + .pp-sub { margin-top: 0; }
.pp-sub h3 { margin: 0 0 12px; font-size: clamp(18px, 2.2vw, 22px); }
.pp-low { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 14px; padding: 6px 12px; border-radius: 999px; background: var(--lime); color: var(--ink); font-weight: 700; font-size: 14px; }
.pp-low svg { width: 18px; height: 18px; }
.pp-sec .dp-dr-stats, .fb .dp-dr-stats { display: flex; flex-wrap: wrap; }  /* any number of tiles, the last row stretched: never an empty cell */
.pp-sec .dp-dr-stats .dp-tile, .fb .dp-dr-stats .dp-tile { flex: 1 1 150px; }
.bt-brandline .rk-btn { background: var(--lime); border-color: var(--lime); color: var(--ink); }
.pp-card .dp-kv div:last-child:nth-child(odd), .fb-body .dp-kv div:last-child:nth-child(odd) { grid-column: 1 / -1; }
.pp-range { margin: 0 0 10px; }
/* ---- bottle page, Bloomberg standard (26 Oct): ruled strips, the chart across the full width, mono labels and figures ---- */
.pp-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0 0 18px; border-top: 2px solid var(--ink); }
.pp-strip--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .pp-strip--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pp-strip--1 { grid-template-columns: minmax(0, 1fr); }
.pp-strip > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 12px 14px 12px 0; border-bottom: 1px solid var(--line); }
.pp-strip > div + div { padding-left: 14px; border-left: 1px solid var(--line); }
.pp-strip--8 > div:nth-child(4n + 1) { padding-left: 0; border-left: 0; }
.pp-strip dd { order: 1; margin: 0; font: 600 20px/1.1 var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: -.01em; color: var(--text); }
.pp-strip dt { order: 2; font: 500 10.5px/1.3 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.pp-strip small { order: 3; font: 400 11px/1.3 var(--font-mono); color: var(--text-muted); }
.pp-strip small time { font: inherit; color: inherit; }
.pp-strip .pp-na { color: var(--text-muted); font-weight: 400; }
@media (max-width: 699px) {
  .pp-strip, .pp-strip--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pp-strip > div:nth-child(odd) { padding-left: 0; border-left: 0; }
  .pp-strip > div:nth-child(even) { padding-left: 14px; border-left: 1px solid var(--line); }
  .pp-strip--3 > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .pp-strip dd { font-size: 18px; }
}
.pp-ph { --hc-ink: var(--ink); --hc-muted: var(--text-muted); --hc-bg: var(--paper); --hc-line: rgba(10, 15, 12, .09); --hc-rank: var(--forest-3); --hc-price: var(--blue); --hc-gap: rgba(10, 15, 12, .04);
  margin: 0 0 8px; padding: 10px 0 0; border-top: 2px solid var(--ink); }
.si-dark .pp-ph, .pp-ph.is-dark, [data-theme="dark"] .pp-ph { --hc-ink: var(--on-dark); --hc-muted: var(--on-dark-muted); --hc-bg: var(--ink-2); --hc-line: rgba(243, 245, 239, .1); --hc-rank: var(--lime); --hc-price: var(--blue-on-dark); --hc-gap: rgba(243, 245, 239, .05); border-top-color: var(--on-dark); }
.pp-legend { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin: 0 0 6px; }
.pp-key { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; padding: 0; list-style: none; font: 500 11px/1.4 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--hc-ink); }
.pp-key li { display: inline-flex; align-items: center; gap: 7px; }
.pp-key i { display: inline-block; width: 9px; height: 9px; background: var(--hc-rank); }
.pp-key .pp-k-p i { background: var(--hc-price); }
.pp-key .pp-k-u i { width: 14px; height: 0; background: none; border-top: 1.5px dashed var(--hc-muted); }
.pp-key .pp-k-g i { background: var(--hc-gap); box-shadow: inset 0 0 0 1px var(--hc-line); }
.pp-range { display: inline-flex; gap: 0; margin: 0; }
.pp-range[hidden] { display: none; }
.pp-range button { min-height: 36px; padding: 0 12px; border: 1px solid var(--ink); border-radius: 0; background: transparent; color: var(--ink); font: 500 11.5px/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; position: relative; }
.pp-range button + button { margin-left: -1px; }
.pp-range button::after { content: ""; position: absolute; inset: -4px 0; }  /* 44px tap target */
.pp-range button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.pp-hc-wrap { position: relative; touch-action: pan-y; }
.pp-hc-wrap:focus-visible { outline: 2px solid var(--lime-deep); outline-offset: 3px; }
.pp-hc { display: block; width: 100%; height: auto; overflow: visible; font-family: var(--font-mono); }
.pp-hc-g { stroke: var(--hc-line); stroke-width: 1; }
.pp-hc-r, .pp-hc-p, .pp-hc-d { font-size: 10.5px; font-variant-numeric: tabular-nums; fill: var(--hc-muted); }
.pp-hc-p { fill: var(--hc-price); }
.pp-hc-r { fill: var(--hc-rank); }  /* each axis in its line's colour */
.pp-hc-gap { fill: var(--hc-gap); }
.pp-hc-u { stroke: var(--hc-muted); stroke-width: 1; stroke-dasharray: 4 4; opacity: .7; }
.pp-hc-pl { fill: none; stroke: var(--hc-price); stroke-width: 1.6; stroke-linejoin: round; }
.pp-hc-rl { fill: none; stroke: var(--hc-rank); stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
.pp-hc-pd { fill: var(--hc-price); stroke: var(--hc-bg); stroke-width: 1; }
.pp-hc-rd { fill: var(--hc-rank); stroke: var(--hc-bg); stroke-width: 1; }
.pp-hc-end { stroke-width: 2.5; }
.pp-hc-ev { font: 600 11.5px var(--font-mono); font-variant-numeric: tabular-nums; paint-order: stroke; stroke: var(--hc-bg); stroke-width: 3.5px; stroke-linejoin: round; }
.pp-hc-pv { fill: var(--hc-price); }
.pp-hc-rv { fill: var(--hc-rank); }
.pp-hc-best { fill: var(--hc-bg); stroke: var(--hc-rank); stroke-width: 1.6; }
.pp-hc-bl { font: 400 12px var(--font-mono); fill: var(--hc-ink); paint-order: stroke; stroke: var(--hc-bg); stroke-width: 4px; stroke-linejoin: round; }
.pp-hc-cur { stroke: var(--hc-muted); stroke-width: 1; stroke-dasharray: 3 3; }
.pp-tip { position: absolute; top: 4px; transform: translateX(-50%); display: grid; gap: 2px; min-width: 150px; padding: 8px 10px; border-top: 2px solid var(--lime); background: var(--ink); color: var(--on-dark); font: 400 12px/1.4 var(--font-mono); font-variant-numeric: tabular-nums; pointer-events: none; }
.pp-tip b { font-weight: 600; color: var(--lime); }
.bt-side .rk-alt .rk-opts { border-top: 1px solid rgba(243, 245, 239, .35); }
.bt-side .rk-alt .rk-opts li { margin: 0; }
.bt-side .rk-alt .rk-opts a { min-height: 44px; padding: 0 2px; border: 0; border-bottom: 1px solid rgba(243, 245, 239, .16); border-radius: 0; background: transparent; }
.bt-side .rk-alt .rk-opts a:hover, .bt-side .rk-alt .rk-opts a:focus-visible { border-color: rgba(243, 245, 239, .16); background: rgba(243, 245, 239, .05); }
.bt-side .rk-alt .rk-opts b { font-family: var(--font-mono); font-weight: 600; font-variant-numeric: tabular-nums; }
.bt-side .rk-alt .rk-opts span small { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .04em; }
.si-dark .pp-key li, .pp-ph.is-dark .pp-key li { background: rgba(243, 245, 239, .07); }
.pp-hnotes { margin: 10px 0 2px; }
.pp-hnotes dl { display: grid; gap: 4px; margin: 0; }
.pp-hnotes dl div { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 8px; align-items: baseline; }
.pp-hnotes dt { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--lime); }
.pp-hnotes dd { margin: 0; font-size: 14px; line-height: 1.45; color: var(--on-dark); }
.pp-hnotes ul { display: flex; flex-wrap: wrap; gap: 4px; margin: 9px 0 0; padding: 0; list-style: none; }
.pp-hnotes ul a { position: relative; display: inline-block; padding: 2px 9px; border: 1px solid rgba(var(--lime-rgb), .45); border-radius: 999px; color: var(--lime); font-size: 12.5px; font-weight: 600; line-height: 1.4; text-decoration: none; }
.pp-hnotes ul a::after { content: ""; position: absolute; inset: -10px -2px; }  /* a 44px tap target, the chip's own size */
.pp-hnotes ul a:hover, .pp-hnotes ul a:focus-visible { background: var(--lime); color: var(--ink); outline: none; }
.pp-hsrc { margin: 6px 0 0; font-size: 11.5px; color: var(--on-dark-muted); }
.pp-hsrc a { color: inherit; }
@media (min-width: 880px) { .pp-hnotes dd { font-size: 14.5px; } }
.pp-jump { position: relative; z-index: 6; background: var(--paper); border-bottom: 1px solid var(--line); }
.pp-jump ul { display: flex; gap: 6px; margin: 0; padding: 8px 0; list-style: none; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
.pp-jump ul::-webkit-scrollbar { display: none; }
.pp-jump li { flex: none; scroll-snap-align: start; }
.pp-jump a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--white); color: var(--text); font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.pp-jump a:hover, .pp-jump a:focus-visible { border-color: var(--ink); }
@media (min-width: 880px) { .pp-jump { position: sticky; top: 72px; } }
.pp-jump ul { gap: 0; padding: 0; border-left: 1px solid var(--line); }
.pp-jump li { border-right: 1px solid var(--line); }
.pp-jump a { min-height: 44px; padding: 0 14px; border: 0; border-radius: 0; background: transparent; font: 500 11.5px/1 var(--font-mono); letter-spacing: .07em; text-transform: uppercase; }
.pp-jump a:hover, .pp-jump a:focus-visible { background: var(--ink); color: var(--paper); border-color: transparent; }
.pp-jump { border-top: 1px solid var(--line); }
.bt-body > .pp-sec { scroll-margin-top: 140px; }
.bt-photo { position: relative; }
.pp-low-tag, .rk-media .pp-low-tag { position: absolute; z-index: 2; padding: 3px 8px; border-radius: 999px; background: var(--ink); color: var(--lime); font-size: 11px; font-weight: 700; line-height: 1.25; letter-spacing: .01em; pointer-events: none; }
.bt-photo .pp-low-tag { top: 6px; left: 6px; }
.pp-low-tag { white-space: nowrap; }
.pp-lt-s { display: none; }
@media (max-width: 879px) { .bt-photo .pp-low-tag { top: 4px; left: 4px; padding: 2px 6px; font-size: 10px; } .bt-photo .pp-lt-l { display: none; } .bt-photo .pp-lt-s { display: inline; } }
.rk-media { position: relative; }
.rk-media .pp-low-tag { bottom: 6px; left: 6px; }
@media (min-width: 880px) { .bt-photo .pp-low-tag { top: 12px; left: 12px; font-size: 12.5px; padding: 4px 10px; } }
.pp-daily { margin: 16px 0 0; }
.pp-daily h3 { margin: 0 0 10px; }
.pp-daily .pro-lock { height: auto; }
.pp-daily-svg { display: block; width: 100%; max-width: 720px; height: auto; }
.pp-daily-svg rect { fill: var(--forest-3); }
.pp-sellers { margin-top: 12px; }
.bt-hero .bt-buy .rk-was { color: var(--ink); }
.pp-taste { display: grid; gap: 18px; align-items: start; }
.pp-taste-l { min-width: 0; }
.pp-taste-l .dp-notes { margin-top: 0; }
.pp-wheel { padding: 12px 12px 6px; }
.pp-wheel h3 { margin: 0 0 4px; font-size: 17px; }
.pp-wheel .bx-wheel { max-height: 300px; }
@media (min-width: 760px) {
  .pp-taste--2 { grid-template-columns: minmax(0, 1fr) minmax(0, 300px); grid-template-areas: "left wheel"; }
  .pp-taste--2 .pp-wheel { grid-area: wheel; position: sticky; top: 90px; }
  .pp-taste--2 .pp-taste-l { grid-area: left; }
  .pp-wheel .bx-wheel { max-height: 260px; }
}
.pp-fams { display: grid; gap: 0; margin: 14px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.pp-fams li { border-bottom: 1px solid var(--line); }
.pp-fam { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; min-height: 44px; padding: 6px 0; color: var(--text); text-decoration: none; font-size: 14.5px; }
.pp-fam b { font-weight: 600; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); }
.pp-fam small { color: var(--text-muted); font-size: 13px; }
.pp-fam:hover b, .pp-fam:focus-visible b { text-decoration-color: currentColor; }
.pp-taste-l .pp-serve h3:first-child { margin-top: 18px; }
.pp-off { display: grid; gap: 6px; justify-items: start; }
.pp-off-h { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: 22px; line-height: 1.15; }
.pp-last { margin: 0 0 6px; font-size: 14.5px; }
.bt-shops tr.is-best td { background: rgba(var(--lime-rgb), .18); }
.bt-shops tr.is-best td:first-child { padding-left: 8px; }
.pp-best { display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 999px; background: var(--ink); color: var(--lime); font-style: normal; font-size: 11.5px; font-weight: 700; vertical-align: 1px; }
.pp-rating { margin: 0 0 16px; font-size: 16px; }
.pp-rating b { font-size: 20px; }
.pp-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; padding: 0; list-style: none; }
.pp-chips li { padding: 6px 12px; border-radius: 999px; background: var(--cream); font-size: 13.5px; }
.pp-chips li.pp-a { padding: 0; }
.pp-chips a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; color: var(--text); font-weight: 600; text-decoration: none; }
.pp-chips a:hover, .pp-chips a:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
.pp-list { display: grid; gap: 1px; margin: 0; padding: 0; list-style: none; background: var(--line); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.pp-list li { display: flex; justify-content: space-between; gap: 12px; align-items: center; min-height: 44px; padding: 0 12px; background: var(--white); }
.pp-list li > a { display: flex; flex: 1; justify-content: space-between; gap: 12px; align-items: center; min-height: 44px; color: var(--text); text-decoration: none; }
.pp-list li > a:hover b { text-decoration: underline; }
.pp-card { padding: 18px; background: var(--white); border: 1px solid var(--line); border-radius: 12px; }
.pp-card h3 { margin: 0 0 8px; font-size: 22px; }
.pp-card > p:not(.bt-more) { margin: 0 0 14px; line-height: 1.55; }
.pp-card .bt-more { margin-bottom: 0; }
.pp-near { margin: 12px 0 16px; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.pp-near li { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 10px; align-items: center; min-height: 44px; border-bottom: 1px solid var(--line); font-size: 14px; }
.pp-near li a { display: block; padding: 12px 0; line-height: 1.45; color: var(--text); text-decoration: none; }
.pp-near li a:hover b { text-decoration: underline; }
.pp-near .is-me { background: rgba(var(--lime-rgb), .22); }
.pp-n { padding-left: 6px; font-family: var(--font-display); font-weight: 800; }
.pp-p { padding-right: 6px; font-weight: 600; white-space: nowrap; }
.pp-promo { display: grid; grid-template-columns: repeat(52, minmax(0, 1fr)); gap: 2px; max-width: 520px; height: 18px; margin: 8px 0 0; }
.pp-promo i { background: var(--cream); border-radius: 2px; }
.pp-promo i.on { background: var(--forest-3); }
.pp-quote { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: start; margin: 0 0 12px; padding: 14px 16px; background: var(--white); border: 1px solid var(--line); border-left: 4px solid var(--lime-deep); border-radius: 8px; }
.pp-quote blockquote { margin: 0; }
.pp-quote p { margin: 0; line-height: 1.5; }
.pp-quote .rk-btn.is-done { background: var(--ink); color: var(--lime); }
.pp-serve h3, .pp-gift h3 { margin: 22px 0 10px; font-size: clamp(18px, 2.2vw, 22px); }
.pp-crumbs ol { display: flex; flex-wrap: wrap; gap: 0 8px; margin: 26px 0 0; padding: 0; list-style: none; font-size: 14px; }
.pp-crumbs li { display: inline-flex; align-items: center; min-height: 44px; }
.pp-crumbs li + li::before { content: "›"; margin-right: 8px; color: var(--text-muted); }
.pp-crumbs a { display: inline-flex; align-items: center; min-height: 44px; color: var(--text); }
.pp-crumbs [aria-current] { color: var(--text-muted); }
.pp-updated { margin: 0 0 24px; font-size: 13px; color: var(--text-muted); }

/* Awards as a ruled table (tools/build_data.py awards_list) */
.aw-list { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.aw-list li { display: grid; grid-template-columns: 16px minmax(120px, 170px) 1fr 52px; gap: 14px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); }
.aw-list .aw-h { padding: 8px 0; font: 500 11px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.aw-list .aw-h span:last-child, .aw-y { text-align: right; }
.aw svg { width: 16px; height: 16px; } .aw b { font-size: 15px; font-weight: 600; } .aw-c { font-size: 14.5px; color: var(--text); }
.aw-y { font: 500 13.5px/1 var(--font-mono); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.aw .aw-ring { fill: none; stroke: rgba(255,255,255,.5); stroke-width: 1; }
.aw--platinum .aw-disc { fill: #C9D1D9; stroke: #8E99A4; } .aw--gold .aw-disc { fill: #D4A52A; stroke: #9C7612; } .aw--silver .aw-disc { fill: #B4BBC2; stroke: #7D868F; }
.aw--bronze .aw-disc { fill: #B5703A; stroke: #7E4A22; } .aw--plain .aw-disc { fill: #9AA1A8; stroke: #6B7280; }
.aw .aw-disc { stroke-width: 1; }
@media (max-width: 559px) { .aw-list li { grid-template-columns: 16px 1fr auto; row-gap: 4px; } .aw-list .aw-h { display: none; } .aw-c { grid-column: 2 / -1; grid-row: 2; color: var(--text-muted); font-size: 13.5px; } }
/* Tax, at the foot of the bottle page: the ruled style, no card */
.pp-tax .bx-card { padding: 12px 0 0; border: 0; border-top: 2px solid var(--ink); border-radius: 0; background: transparent; }
.pp-tax .bx-card h3 { margin: 0 0 8px; font: 500 11px/1.3 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.pp-tax .bx-bar { border-radius: 0; }
.pp-tax .bx-bar-key { font: 500 11px/1.5 var(--font-mono); letter-spacing: .04em; text-transform: uppercase; font-variant-numeric: tabular-nums; }
.pp-tax .bx-k { border-radius: 0; }

.lg-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; align-items: start; }
.lg-brand { border-top: 2px solid var(--ink, #111); }
.lg-brand p { margin: 0 0 16px; }
.hx-l .tr { margin-top: 18px; }
.ls-table th[scope="row"] { font-weight: 400; }
.ls-b { display: inline-flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; }
.ls-b:hover span { text-decoration: underline; }
.ls-img { flex: none; width: 40px; height: 40px; object-fit: contain; background: #fff; }
.ls-group { margin: 0 0 28px; }
.ls-links { list-style: none; margin: 0; padding: 0; columns: 2 280px; }
.ls-links li { break-inside: avoid; padding: 6px 0; border-bottom: 1px solid var(--line, rgba(0,0,0,.12)); }
.st-bar { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 18px; }
.st-bar label { display: grid; gap: 4px; font: 400 11px/1.4 var(--font-mono, ui-monospace, monospace); letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted, #5b655e); }
.st-bar select { min-height: 44px; min-width: 150px; padding: 0 12px; border: 1px solid var(--line, #ccc); border-radius: 0; background: #fff; color: var(--ink, #111); font: 600 15px/1 var(--font-body, inherit); }
.st-table .st-bar-h { width: 28%; }
.st-bar-c { padding-right: 0; }
.st-bar-c i { display: block; height: 10px; background: var(--ink, #111); }
.hx-l .hx-r, .hx-l [data-hx] { margin-top: 18px; }
.hx-side { min-width: 0; }
.hx-side .hs-quick { margin-top: 0; }
@media (min-width: 560px) { .hx-side .hx-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* hub first screen, stacked (George, 27 Oct): search, one carousel, then the counts and the most visited tiles in rows */
@media (min-width: 1100px) {
  .hx { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .hx-l .hs { max-width: 940px; }
  .hx-side .hx-tiles { grid-template-columns: repeat(6, minmax(0, 1fr)); margin-top: 0; }
}
.hx-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin: 0 0 18px; }
.hx-meta .hs-trust { margin: 0; }
.hx-side .hx-tiles { margin-top: 0; }
@media (min-width: 560px) and (max-width: 1099px) { .hx-side .hx-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.bt-pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.bt-pill { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 12px; border: 1px solid rgba(255,255,255,.22); border-radius: 999px; color: var(--on-dark); font: 600 13px/1 var(--font-body, inherit); text-decoration: none; white-space: nowrap; }
.bt-pill b { font-variant-numeric: tabular-nums; }
.bt-pill--blue { background: #2f6df6; border-color: #2f6df6; color: #fff; }
a.bt-pill--blue:hover { background: #4b82ff; border-color: #4b82ff; }
.bt-pill--badge { background: rgba(255,255,255,.08); }

/* Ink and paper (George, 27 Oct 2026): a quieter scheme to look at, off unless asked for: add ?theme=paper to any address (?theme=default turns it off).
   Deep green-black surfaces, warm cream paper, and one restrained accent, brass, in place of the lime. */
:root[data-theme="paper"] {
  --ink: #0b130f; --ink-2: #111b16; --forest: #14231b; --forest-2: #1c3026; --forest-3: #274133;
  --lime: #c8a45a; --lime-deep: #b08d45; --lime-rgb: 200, 164, 90;
  --cream: #f1e9d8; --paper: #f8f3e8;
  --text: #16201a; --text-muted: #5d655c;
  --on-dark: #f3eee2; --on-dark-muted: #a0a595;
  --blue-on-dark: #b9c7a8;
}
:root[data-theme="paper"] ::selection { background: var(--lime); color: var(--ink); }
:root[data-theme="paper"] .bt-pill--blue { background: #8a6d2f; border-color: #8a6d2f; color: #fff; }
:root[data-theme="paper"] a.bt-pill--blue:hover { background: #a3823a; border-color: #a3823a; }
:root[data-theme="paper"] .dp-grid { opacity: .5; }
.pp-feat-list { list-style: none; margin: 0; padding: 0; columns: 2 300px; border-top: 2px solid var(--ink); }
.pp-feat-list li { break-inside: avoid; padding: 10px 0; border-bottom: 1px solid var(--line); }
.pp-feat-list a { color: var(--text); font-weight: 600; text-decoration: none; }
.pp-feat-list a:hover { text-decoration: underline; text-underline-offset: 3px; }
.pp-feat-more { margin: 10px 0 0; font-size: 14px; color: var(--text-muted); }
/* product of the week, its own card under the first screen (tools/build_data.py potw_widget) */
.potw { padding: 30px 0 14px; background: var(--ink); }
.potw-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.potw-k { margin: 0; font: 500 12px/1.4 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--on-dark-muted); }
.potw-head a { color: var(--on-dark); font-weight: 600; text-decoration: none; white-space: nowrap; }
.potw-head a:hover { color: var(--lime); }
.potw-pair { display: grid; gap: 14px; }
@media (min-width: 860px) { .potw-pair { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); } }
/* a featured pair, not a row that blends in (George, 3 Nov 2026) */
.potw-card { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px 18px; align-items: start; padding: 16px 18px 18px; border: 1px solid rgba(var(--lime-rgb), .3); border-radius: 18px; background: linear-gradient(160deg, rgba(var(--lime-rgb), .1), rgba(var(--lime-rgb), .015) 55%); box-shadow: 0 30px 60px -36px rgba(0,0,0,.9); }
.potw-card--potw { border-color: rgba(var(--lime-rgb), .75); box-shadow: 0 0 0 1px rgba(var(--lime-rgb), .25), 0 30px 70px -30px rgba(var(--lime-rgb), .28); }
.potw-tag { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.potw-tag b { display: inline-flex; align-items: center; padding: 7px 12px; border-radius: 999px; font: 700 11px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; border: 1px solid rgba(var(--lime-rgb), .5); color: var(--lime); }
.potw-card--potw .potw-tag b { background: var(--lime); border-color: var(--lime); color: var(--ink); }
.potw-tag a { color: var(--on-dark); font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.potw-tag a:hover { color: var(--lime); }
.potw-img { display: grid; place-items: center; padding: 8px; background: #fff; border-radius: 12px; }
.potw-photo { display: block; max-width: 100%; height: auto; max-height: 120px; object-fit: contain; }
.potw-move { margin: 0 0 4px; font: 600 clamp(17px, 2.2vw, 22px)/1.3 var(--font-body); color: var(--on-dark); }
.potw-move small { font-size: 13px; font-weight: 400; color: var(--on-dark-muted); }
.potw-b h3 { margin: 0 0 10px; font-size: 15px; font-weight: 400; line-height: 1.4; }
.potw-b h3 a { color: var(--on-dark-muted); text-decoration: underline; text-underline-offset: 3px; }
.potw-b h3 a:hover { color: var(--lime); }
.potw-b h3 b { color: var(--on-dark); }
.potw-facts { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 0; }
.potw-facts div { min-width: 0; }
.potw-facts dt { font: 400 11px/1.4 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--on-dark-muted); }
.potw-facts dd { margin: 2px 0 0; font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }
.potw-facts small { font-size: 12px; font-weight: 400; color: var(--on-dark-muted); }
@media (max-width: 560px) { .potw-card { grid-template-columns: 84px minmax(0, 1fr); gap: 14px; padding: 14px; } }
/* the dropdown's groups as home page sections (tools/build_data.py hub_directory) */
.hd-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 28px 32px; }
.hd-group h3 { margin: 0 0 8px; padding-top: 10px; border-top: 2px solid var(--ink); font: 400 12px/1.4 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
.hd-group ul { list-style: none; margin: 0; padding: 0; }
.hd-group li { border-bottom: 1px solid var(--line); }
.hd-group a { display: block; padding: 9px 0; color: var(--text); font-weight: 600; text-decoration: none; }
.hd-group a:hover { text-decoration: underline; text-underline-offset: 3px; }
.hd-all a { color: var(--blue-text, #3563e9); }
.brand-link { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; padding: 16px 0; border-top: 2px solid var(--ink); }
.brand-link code { padding: 6px 10px; background: var(--cream); font: 600 14px/1 var(--font-mono); }
/* the hero's columns may shrink below their widest child: without this the carousel's row widens the whole page on a phone (27 Oct) */
.hx { grid-template-columns: minmax(0, 1fr); }
.hx-l, .hx-side { min-width: 0; max-width: 100%; }
.hx-l [data-hx], .hx-l .hx-bar, .hx-l .hx-tabs, .hx-l .hx-car { min-width: 0; max-width: 100%; }
.rk-near { margin: 6px 0 2px; font-size: 13px; line-height: 1.5; }
.rk-near a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.pp-fix { margin-top: 10px; }

/* ===== Design pass, 3 Nov 2026 audit ===== */
/* Lime is for a real deal only: a saving on the usual price (.rk-was) or the lowest price in 90 days (rk-sd--deal from
   tools/build_data.py buy_box; the "Lowest in 90 days" tag or icon on a card built elsewhere). Every other price box is neutral.
   assets/prices.js redraws the box's inside and keeps its classes, so a saving it finds turns the box lime too. */
.rk-price { background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); }
.bt-buy { background: var(--white); }
.rk-price.rk-sd--deal, .bt-buy.rk-sd--deal, .rk-sd:has(.rk-was), .rk-card:has(.pp-low-tag, .bx-low-li) .rk-sd { background: var(--lime); box-shadow: none; }
.rk-price.rk-sd--off, .bt-buy.rk-sd--off { background: var(--cream); box-shadow: none; }

/* Category top 50: big cards for 1 to 3, compact rows from 4 (tools/build_data.py rank_rows) */
.si[data-cat] .si-podium-sec { padding-top: clamp(16px, 2.4vw, 32px); }
.si[data-cat] .rk-top { margin-top: 0; }
.si[data-cat] .rk-grid:empty { display: none; }
.rk-rows--top50 { gap: 6px; margin-top: 14px; }
.rk-rows--top50 .rk-row { min-height: 0; padding: 8px 12px 8px 6px; gap: 10px; border-radius: 10px; }
.rk-rows--top50 .rk-row-img { width: 40px; height: 50px; }
.rk-rows--top50 .rk-row-t b { font-size: 14px; }
.rk-rows--top50 .rk-row-t small { font-size: 11px; }
.rk-row-end { flex: none; max-width: 38%; display: flex; flex-direction: column; align-items: flex-end; gap: 5px; text-align: right; }
.rk-row-end > strong { font: 800 16px/1.15 var(--font-display); }
.rk-row-end > strong small { display: block; margin-top: 2px; font: 500 11px/1.3 var(--font-body); color: var(--text-muted); }
.rk-mv { display: inline-flex; align-items: center; padding: 3px 7px; border-radius: 999px; font: 600 11px/1 var(--font-mono); font-style: normal; white-space: nowrap; }
.rk-mv--up { background: #e3f5c4; color: #2f5a05; }
.rk-mv--down { background: #f7dcd3; color: #8a2d13; }
.rk-mv--flat { background: var(--cream); color: var(--text-muted); }
@media (max-width: 599px) { .rk-rows--top50 .rk-row-t span { -webkit-line-clamp: 1; } }

/* Category hero: short, with the #1 bottle beside the headline on a laptop */
.si-one { display: none; }
@media (min-width: 900px) {
  .si-hero--cat { padding: 36px 0 34px; }
  .si-cat-hx { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 340px); gap: 48px; align-items: center; }
  .si-cat-hx-l { min-width: 0; }
  .si-hero--cat h1 { font-size: clamp(48px, 4.6vw, 76px); max-width: 22ch; margin-bottom: 14px; }
  .si-hero--cat .lede { font-size: 17px; }
  .si-hero--cat .si-jump { margin-top: 16px; }
  .si-one { position: relative; display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 16px; align-items: center; padding: 14px 18px 14px 14px; border-radius: 14px; background: var(--white); color: var(--text); text-decoration: none; box-shadow: 0 18px 40px -24px rgba(0,0,0,.7); }
  .si-one:hover { box-shadow: 0 0 0 2px var(--lime), 0 18px 40px -24px rgba(0,0,0,.7); }
  .si-one-img { display: grid; place-items: center; }
  .si-one-photo { width: 104px; height: 130px; object-fit: contain; }
  .si-one-x { display: grid; gap: 3px; min-width: 0; }
  .si-one-k { justify-self: start; margin-bottom: 4px; padding: 3px 8px; border-radius: 999px; background: var(--ink); color: var(--lime); font: 500 10.5px/1.2 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
  .si-one-x b { font: 800 22px/1.1 var(--font-display); }
  .si-one-n { font-size: 13.5px; line-height: 1.35; color: var(--text-muted); }
  .si-one-p { margin-top: 6px; font-size: 13px; color: var(--text-muted); }
  .si-one-p strong { font: 800 20px/1 var(--font-display); color: var(--text); }
}

/* Hub: the search, one row of links, then today's movers (tools/hub_hero.py quick, movers_today) */
.hx--lead { gap: 14px; }
.hx--lead .hs { margin: 0; max-width: 940px; }
.hx--lead .hs input { min-height: 64px; font-size: 17px; }
.hx-quick { display: flex; gap: 6px; min-width: 0; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter); }
.hx-quick::-webkit-scrollbar { display: none; }
.hx-quick a { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 14px; border: 1px solid rgba(255,255,255,.16); border-radius: 999px; color: var(--on-dark); font: 600 13.5px/1 var(--font-body); text-decoration: none; }
.hx-quick a:hover, .hx-quick a:focus-visible { border-color: var(--lime); }
.hx-quick b { font: 500 12px/1 var(--font-mono); color: var(--lime); }
.hx-movers { margin-top: 10px; min-width: 0; }
.hx-mv-head h2 { margin: 0 0 6px; font-size: clamp(34px, 4.4vw, 56px); color: var(--on-dark); }
.hx-mv-head p { margin: 0; max-width: 64ch; font-size: 14px; line-height: 1.45; color: var(--on-dark-muted); }
.hx-mv-grid { display: grid; gap: 16px; margin-top: 16px; }
@media (min-width: 760px) { .hx-mv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } }
.hx-mv-col { min-width: 0; }
.hx-mv-col h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font: 500 12px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--on-dark-muted); }
.hx-mv-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.hx-mv { display: flex; align-items: center; gap: 10px; padding: 7px 12px 7px 7px; border: 1px solid rgba(255,255,255,.1); border-radius: 10px; background: rgba(255,255,255,.04); color: var(--on-dark); text-decoration: none; }
/* hover only where there is a pointer: on a phone a tap while scrolling left the lime box stuck on (George, 3 Nov 2026) */
@media (hover: hover) { .hx-mv:hover { border-color: var(--lime); } }
.hx-mv:focus-visible { border-color: var(--lime); }
.ab-quick { padding: 20px; border: 2px solid var(--lime); border-radius: 18px; background: rgba(var(--lime-rgb), .12); margin-bottom: 28px; }
.ab-quick h2, .ab-or { margin: 0 0 6px; font-size: 22px; }
.ab-quick p { margin: 0 0 14px; color: var(--text-muted); }
.ab-or { margin: 8px 0 14px; }
.hx-mv, .hs-one, .si-bottle, .potw-card a { -webkit-tap-highlight-color: transparent; }
.hx-mv-img { flex: none; width: 40px; height: 50px; object-fit: contain; border-radius: 6px; background: var(--white); }
.hx-mv-t { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.hx-mv-t b { font-size: 14px; line-height: 1.2; }
.hx-mv-t > span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 12.5px; line-height: 1.3; color: var(--on-dark-muted); }
.hx-mv-t small { margin-top: 2px; font: 500 11px/1.35 var(--font-mono); color: var(--on-dark-muted); }
.hx-mv-t small s { text-decoration: none; opacity: .75; }
.hx-mv-t small strong { color: var(--on-dark); font-weight: 700; }
.hx-mv-b { flex: none; display: inline-flex; align-items: center; gap: 3px; padding: 5px 8px; border-radius: 999px; font: 700 12px/1 var(--font-mono); font-style: normal; white-space: nowrap; }
.hx-mv-col h3 .hx-mv-b { padding: 3px 6px; font-size: 10px; }
.hx-mv-b--up { background: rgba(var(--lime-rgb), .16); color: var(--lime); }
.hx-mv-b--down { background: rgba(255,154,90,.16); color: #ffb38a; }
@media (max-width: 759px) { .hx-mv-list li:nth-child(n+5) { display: none; } .hx-mv-col + .hx-mv-col .hx-mv-list li:nth-child(n+4) { display: none; } }
.hx-mv-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin: 12px 0 0; font-size: 12.5px; color: var(--on-dark-muted); }
.hx-mv-foot a { color: var(--lime); }
.hx-mv-more { font-weight: 600; text-decoration: none; }
.hx-browse { margin-top: 36px; }
.hx-browse [data-hx] { margin-top: 12px; }

/* Cookie choice on a phone: a slim bar along the bottom edge, the same text and the same two buttons */
@media (max-width: 719px) {
  .cc { left: 0; right: 0; bottom: 0; max-width: none; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px)); border-width: 1px 0 0; border-radius: 0; font-size: 12px; line-height: 1.38; box-shadow: 0 -10px 24px -14px rgba(0,0,0,.6); }
  .cc-btns { flex-direction: column; gap: 6px; }
  .cc-btns button { min-height: 38px; padding: 0 14px; font-size: 12.5px; }
}

/* The Shelf Report sign-up pop-up on /data pages (assets/signup.js) */
html.pop-on { overflow: hidden; }
.pop { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 16px; }
.pop-back { position: absolute; inset: 0; background: rgba(10,15,12,.66); opacity: 0; transition: opacity .2s ease; }
.pop-card { position: relative; width: 100%; max-width: 440px; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow: auto; padding: 26px 24px 20px; border: 1px solid rgba(var(--lime-rgb), .3); border-radius: 16px; background: var(--ink); color: var(--on-dark); box-shadow: 0 30px 70px -30px rgba(0,0,0,.85); opacity: 0; transform: translateY(14px); transition: opacity .24s ease, transform .24s ease; }
.pop.is-in .pop-back, .pop.is-in .pop-card { opacity: 1; transform: none; }
.pop--still .pop-back, .pop--still .pop-card { transition: none; transform: none; }
@media (prefers-reduced-motion: reduce) { .pop-back, .pop-card { transition: none; transform: none; } }
.pop-x { position: absolute; top: 10px; right: 10px; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; background: transparent; color: var(--on-dark); cursor: pointer; }
.pop-x svg { width: 18px; height: 18px; }
.pop-x:hover, .pop-x:focus-visible { border-color: var(--lime); color: var(--lime); outline: none; }
.pop-k { margin: 0 0 10px; font: 500 11px/1.2 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--lime); }
.pop-h { margin: 0 0 12px; padding-right: 40px; font-size: clamp(40px, 11vw, 54px); color: var(--on-dark); }
.pop-h:focus { outline: none; }
.pop-p { margin: 0 0 18px; font-size: 15px; line-height: 1.5; color: var(--on-dark-muted); }
.pop-aud { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin: 0 0 16px; padding: 4px; border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid var(--line-dark); }
.pop-aud-o { position: relative; display: block; cursor: pointer; }
.pop-aud-o input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.pop-aud-o span { display: grid; place-items: center; min-height: 38px; padding: 0 8px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--on-dark-muted); transition: background .15s, color .15s; }
.pop-aud-o input:checked + span { background: var(--lime); color: var(--ink); }
.pop-aud-o input:focus-visible + span { outline: 2px solid var(--lime); outline-offset: 2px; }
.pop-b { margin: -6px 0 18px; padding: 0; list-style: none; display: grid; gap: 8px; }
.pop-b li { position: relative; padding-left: 24px; font-size: 14.5px; line-height: 1.4; color: var(--on-dark); }
.pop-b li::before { content: ""; position: absolute; left: 2px; top: 5px; width: 12px; height: 7px; border-left: 2px solid var(--lime); border-bottom: 2px solid var(--lime); transform: rotate(-45deg); }
.pop-l { display: block; margin: 0 0 8px; font: 500 11px/1.2 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--on-dark-muted); }
.pop-row { display: flex; flex-wrap: wrap; gap: 8px; }
.pop-row input { flex: 1 1 210px; min-width: 0; min-height: 48px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--white); color: var(--ink); font: 500 16px/1.2 var(--font-body); }
.pop-row input:focus { outline: none; box-shadow: 0 0 0 3px var(--lime); }
.pop-go { flex: 1 1 auto; min-height: 48px; padding: 0 20px; border: 0; border-radius: 999px; background: var(--lime); color: var(--ink); font: 700 15px/1 var(--font-body); cursor: pointer; }
.pop-go:hover { background: var(--lime-deep); }
.pop-go:focus-visible { outline: 2px solid var(--on-dark); outline-offset: 2px; }
.pop-go:disabled { opacity: .7; cursor: progress; }
.pop-age { display: flex; align-items: center; gap: 10px; min-height: 36px; margin: 12px 0 0; font-size: 14.5px; cursor: pointer; }
.pop-age input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--lime); }
.pop-age input:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
.pop-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.pop-msg { margin: 12px 0 0; padding: 10px 12px; border-radius: 8px; background: rgba(255,154,90,.14); color: #ffc6a8; font-size: 14px; line-height: 1.4; }
.pop-legal { margin: 14px 0 0; font-size: 12px; line-height: 1.45; color: var(--on-dark-muted); }
.pop-alt { margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--line-dark); font-size: 13px; color: var(--on-dark-muted); }
.pop-legal a, .pop-alt a { color: var(--lime); }
.pop-done { width: 100%; }

/* Phones: the rows drop the "in the top 50" words (the number is beside them); the full table scrolls in a box of its own
   with its header kept in view, so all 50 rows stay on the page for search without making it 7,500px tall */
@media (max-width: 599px) {
  .rk-row-pos { display: none; }
  .rk-rows--top50 .rk-row { padding: 6px 10px 6px 4px; }
}
.rk-row-pos { font-style: normal; }
@media (max-width: 719px) {
  .si[data-cat] #top-50 .dp-table-wrap { max-height: 72vh; overflow: auto; overscroll-behavior: contain; border-bottom: 1px solid var(--line); }
  .si[data-cat] #top-50 .dp-table thead th { position: sticky; top: 0; z-index: 2; background: var(--paper); }
}
.si[data-cat] #top-50 .dp-table-wrap:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* Hub directory on a phone: each group's links as chips, two or three to a line, not one long ruled list */
@media (max-width: 699px) {
  .hd-grid { gap: 22px; }
  .hd-group ul { display: flex; flex-wrap: wrap; gap: 6px; }
  .hd-group li { border: 0; }
  .hd-group a { display: inline-flex; align-items: center; min-height: 38px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--white); font-size: 14px; }
}

/* the brands A to Z: a search box in the hero, typing into the directory below (3 Nov 2026) */
.ct-hero-q { max-width: 560px; margin-top: 22px; }
.ct-hero-q .ct-q { margin: 0; height: 52px; }

/* the Shelfdrop Rank (3 Nov 2026): its pages (tools/build_srank.py), the card row, the hub's top 10 by revenue, the bottle chart's third line */
.srk-hero .srk-eyebrow { color: var(--lime); margin: 0 0 14px; }
.srk-hero h1 { max-width: 20ch; }
.srk-hero .srk-strap { color: var(--on-dark); font-weight: 600; margin: 0 0 10px; }
.srk-scope { max-width: 72ch; margin: 0; font-size: 14px; line-height: 1.5; color: var(--on-dark-muted); }
.srk-scope a, .srk-alt a { color: var(--lime); text-underline-offset: 3px; }
.srk-alt { margin: 18px 0 0; font: 600 13px/1.4 var(--font-mono); letter-spacing: .04em; }
.srk-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px 28px; }
@media (min-width: 900px) { .srk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.srk-cat h2 { margin: 0; font-size: clamp(22px, 2.2vw, 28px); padding-top: 10px; border-top: 2px solid var(--ink); }
.srk-cat h2 a { color: inherit; text-decoration: none; }
.srk-cat .rk-rows { grid-template-columns: minmax(0, 1fr); }
.srk-link { justify-content: space-between; }
.srk-go { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-height: 44px; padding: 6px 16px; border-radius: 999px; background: var(--lime); color: var(--ink); font-weight: 600; font-size: 14px; text-decoration: none; }
.srk-go b { font: 700 11px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.srk-go:hover, .srk-go:focus-visible { background: var(--lime-deep); }
.srk-in { color: inherit; text-decoration: none; }
.srk-in b { font-weight: 700; }
.srk-in:hover b, .srk-in:focus-visible b { text-decoration: underline; text-underline-offset: 2px; }
.si-edge--rev strong { font-size: 22px; }
.si-edge--rev small { grid-column: 1 / -1; }
.si-edge--rev .si-edge-p { font-size: 10px; opacity: .85; }
.si-shelf-ask { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 14px 0 0; padding: 12px 0; border-top: 1px solid var(--line-dark); color: var(--on-dark); font-size: 14px; }
.si-shelf-ask a { color: var(--lime); font-weight: 600; text-underline-offset: 3px; }
.si-shelf-ask small { flex-basis: 100%; font: 400 11px/1.4 var(--font-mono); color: var(--on-dark-muted); }
.si-shelf-head a { color: inherit; text-underline-offset: 3px; }
/* the price and rank chart, redrawn (3 Nov 2026): softer lines, a light fill under the price, faint gridlines, values in the legend,
   the Shelfdrop Rank in lime with a forest edge on top. Overrides the earlier .pp-hc rules above. */
.pp-ph { --hc-sr: var(--lime); --hc-sr-edge: var(--forest-2); --hc-line: rgba(10, 15, 12, .07); }
.si-dark .pp-ph, .pp-ph.is-dark, [data-theme="dark"] .pp-ph { --hc-sr: var(--lime); --hc-sr-edge: var(--ink-2); --hc-rank: #8fbf9a; --hc-line: rgba(243, 245, 239, .08); }
.pp-hc-g { stroke-dasharray: 2 5; }
.pp-hc-pa { fill: var(--hc-price); opacity: .08; }
.pp-hc-pl { stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pp-hc-rl { stroke-width: 2.4; }
.pp-hc-sc { fill: none; stroke: var(--hc-sr-edge); stroke-width: 5.4; stroke-linecap: round; stroke-linejoin: round; }
.pp-hc-sl { fill: none; stroke: var(--hc-sr); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.pp-hc-sd { fill: var(--hc-sr); stroke: var(--hc-sr-edge); stroke-width: 1.6; }
.pp-hc-pd, .pp-hc-rd { stroke-width: 1.6; }
.pp-hc-end { stroke-width: 2; }
.pp-hc-best { fill: var(--hc-bg); }
.pp-key { gap: 6px 14px; text-transform: none; letter-spacing: .02em; font-size: 12px; }
.pp-key li { gap: 8px; }
.pp-key span { display: inline-flex; align-items: baseline; gap: 6px; }
.pp-key b { font-weight: 700; font-variant-numeric: tabular-nums; }
.pp-key small { font-size: 10.5px; color: var(--hc-muted); }
.pp-key i { width: 16px; height: 3px; border-radius: 2px; }
.pp-key .pp-k-s i { height: 6px; border-radius: 3px; background: var(--hc-sr); box-shadow: 0 0 0 1.2px var(--hc-sr-edge); }
.pp-key .pp-k-p i { height: 3px; }
.pp-key .pp-k-g i { width: 12px; height: 12px; border-radius: 2px; }
.pp-sr-cap { margin: 6px 0 0; font: 400 11px/1.4 var(--font-mono); color: var(--hc-muted); }

/* ==== brand A to Z by drink, /data/brands/a-z/<drink> (tools/build_brand_az.py) ==== */
.az-q { display: flex; max-width: 520px; margin: 0 0 14px; }
.az-nav { position: static; margin: 0 0 18px; padding: 0; background: none; gap: 4px; }
.az-nav a, .az-nav span { width: 32px; height: 32px; }
.az-nav span { display: grid; place-items: center; border: 1px dashed var(--line); border-radius: 6px; color: var(--text-muted); opacity: .5; font-family: var(--font-mono); font-size: 13px; }
@media (min-width: 960px) { .az-nav { position: sticky; top: 72px; z-index: 5; padding: 10px 0; background: var(--cream); } .az-group { scroll-margin-top: 140px; } }
.az-group { scroll-margin-top: 90px; }
.az-group[hidden], .az-row[hidden] { display: none; }
.az-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.az-row { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; align-items: start; padding: 12px 14px; background: var(--white); border: 1px solid var(--line); border-radius: 10px; }
.az-pic { width: 44px; height: 54px; display: grid; place-items: center; text-decoration: none; }
.az-pic img { width: 40px; height: 50px; object-fit: contain; }
.az-init { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--lime); font-family: var(--font-display); font-weight: 800; font-size: 18px; }
.az-pic.az-init { margin: 7px 2px; }
.az-head { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.az-name { font-weight: 700; font-size: 16px; color: var(--text); text-decoration: none; overflow-wrap: anywhere; }
a.az-name:hover { text-decoration: underline; }
.az-head small { font-size: 13px; color: var(--text-muted); }
.az-head small a { color: inherit; }
.az-facts { margin: 6px 0 0; display: flex; flex-wrap: wrap; gap: 4px 12px; font-family: var(--font-mono); font-size: 12px; color: var(--forest-3); }
.az-facts b { color: var(--text); }
.az-top { margin: 6px 0 0; font-size: 13px; line-height: 1.4; color: var(--text-muted); }
.az-top a { color: var(--text); }
.az-cats { margin-top: 18px; }
.az-by { margin-top: 16px; gap: 6px; align-items: center; }
.az-by > span { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; margin-right: 4px; }
.az-by a { min-height: 36px; padding: 6px 12px; font-size: 13px; }
@media (max-width: 759px) { .az-by { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; } .az-by::-webkit-scrollbar { display: none; } .az-by > * { flex: none; } }
.az-more a[aria-current] { background: var(--ink); color: var(--lime); border-color: var(--ink); }

/* The Shelf Report under the price alert on bottle pages, and its line on the manage and account pages (4 Nov 2026) */
.su-mini { margin-top: 18px; padding: 18px; border-radius: 14px; background: var(--ink); color: var(--on-dark); display: grid; gap: 12px; }
.su-mini[hidden] { display: none; }
.su-mini-t b { display: block; font-size: 17px; line-height: 1.25; } .su-mini-t p { margin: 4px 0 0; font-size: 14px; opacity: .8; }
.su-mini-f { display: flex; gap: 8px; flex-wrap: wrap; } .su-mini-f input { flex: 1 1 180px; min-width: 0; height: 46px; padding: 0 14px; border-radius: 10px; border: 1px solid rgba(var(--lime-rgb), .4); font-size: 16px; }
.su-mini-c { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; line-height: 1.4; opacity: .85; } .su-mini-c a { color: inherit; } .su-mini-c input { margin-top: 2px; flex: none; }
.su-mini .su-status { margin: 0; font-size: 14px; } .su-mini .su-done { padding: 14px; } .su-mini .su-done b { font-size: 16px; } .su-mini .su-done p { margin: 4px 0 0; font-size: 14px; }
.al-offer { margin-top: 12px; padding: 14px; border-radius: 12px; background: var(--cream, #f1ede2); color: var(--ink); } .al-offer p { margin: 0 0 10px; font-size: 14px; line-height: 1.45; } .al-offer p:last-child { margin-bottom: 0; }
.al-report { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 18px; padding: 14px 16px; border: 1px solid var(--line, #e2ddd0); border-radius: 12px; } .al-report small { display: block; margin-top: 2px; font-size: 13px; opacity: .75; }