/* ==========================================================================
   Theme design tokens + shared primitives.
   Brand primitives live here once (colors, type, radii, container widths);
   sections consume the variables and the color-scheme --color-* triplets.
   ========================================================================== */
:root {
  --theme-ink: #0B0B0B;
  --theme-ink-soft: #252525;
  --theme-ink-panel: #161512;
  --theme-cream: #F7F2E7;
  --theme-cream-2: #EDE5D3;
  --theme-white: #FFFFFF;
  --theme-accent: #FFC61A;
  --theme-accent-2: #FFD75C;
  --theme-tint: #C9A6E9;
  --theme-tint-ink: #241C2E;

  --theme-text: #0B0B0B;
  --theme-text-muted: #5C564C;
  --theme-text-mono: #6B6459;
  --theme-text-faint: #8E887B;
  --theme-text-on-dark: #F7F2E7;
  --theme-text-on-dark-muted: #A8A296;
  --theme-text-on-dark-faint: #8E887B;

  --theme-green: #1F7A3F;
  --theme-red: #D6372E;
  --theme-coral: #FF8A7A;

  --theme-line: #0B0B0B14;
  --theme-line-2: #0B0B0B22;
  --theme-line-3: #0B0B0B33;
  --theme-line-dark: #F7F2E71F;
  --theme-line-dark-2: #F7F2E733;
  --theme-link-hover: #B8860B;
  --theme-ink-faint: #3A3730;
  --theme-text-soft: #3A362E;
  --theme-accent-ink: #3A3123;

  --font-body: Archivo, Helvetica, Arial, sans-serif;
  --font-display: "Archivo Black", Archivo, Helvetica, sans-serif;
  --font-mono: "DM Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --sort-body-font: Archivo, Helvetica, Arial, sans-serif;
  --sort-title-font: "Archivo Black", Archivo, Helvetica, sans-serif;

  --wrap: 1320px;
  --wrap-mid: 1100px;
  --wrap-narrow: 900px;
  --gutter: 24px;
  --section-pad: 86px;
  --radius-sm: 12px;
  --radius: 18px;
  --radius-lg: 22px;
  --radius-xl: 26px;
  --pill: 999px;
  --header-h: 70px;
  --theme-shadow: 0 18px 40px -24px #0B0B0B55;
  --theme-shadow-lg: 0 30px 70px -30px #0B0B0B66;

  --page-padding: 24px;
  --focus-ring-color: var(--theme-accent);
  --focus-ring-width: 2px;
  --focus-ring-offset: 3px;
}
@media (max-width: 959px) {
  :root { --page-padding: 18px; }
}
@media (max-width: 900px) {
  :root { --section-pad: 64px; --gutter: 18px; }
}
@media (max-width: 560px) {
  :root { --section-pad: 52px; }
}

/* ---------- Global cascade ---------- */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
body.theme-locked { overflow: hidden; }
a:not(.button) { color: inherit; text-decoration: none; transition: color 0.15s ease; }
a:not(.button):hover { color: var(--theme-link-hover); }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: #0B0B0B33; border-radius: 8px; }
::-webkit-scrollbar-track { background: transparent; }

/* Scoped element reset for migrated bands (stock Bottle sections keep their own rules). */
:where([data-section-key]) :where(h1, h2, h3, h4, h5, h6, p, figure, blockquote, ul, ol) { margin: 0; overflow-wrap: break-word; }
:where([data-section-key]) :where(ul, ol) { padding: 0; list-style: none; }
:where([data-section-key]) :where(h1, h2, h3, h4, h5, h6) { color: inherit; }
:where([data-section-key]) :where(img, svg, video) { max-width: 100%; display: block; }
:where([data-section-key]) :where(button, input, textarea, select) { font: inherit; color: inherit; }

/* Per-scheme interactive tokens (hover shades the scheme buttons the way the source does). */
.color-scheme-1 { --theme-btn-hover-bg: var(--theme-ink-soft); --theme-btn-secondary-hover-bg: var(--theme-accent-2); }
.color-scheme-2 { --theme-btn-hover-bg: var(--theme-accent-2); --theme-btn-secondary-hover-bg: var(--theme-ink-soft); }
.color-scheme-3,
.color-scheme-4 { --theme-btn-hover-bg: var(--theme-ink-soft); --theme-btn-secondary-hover-bg: var(--theme-cream-2); }
.color-scheme-5 { --theme-btn-hover-bg: var(--theme-accent-2); --theme-btn-secondary-hover-bg: var(--theme-ink-soft); }

/* Section shows the page background through (no band colour of its own). */
.theme-bg-page.theme-bg-page { background: transparent; }

/* ---------- Typography helpers ---------- */
.theme-display { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; letter-spacing: -0.03em; line-height: 0.94; margin: 0; }
.theme-display--h1 { font-size: clamp(38px, 5.2vw, 76px); }
.theme-display--h2 { font-size: clamp(32px, 4vw, 54px); line-height: 1; letter-spacing: -0.02em; }
.theme-display--h3 { font-size: clamp(26px, 3vw, 40px); line-height: 1.02; letter-spacing: -0.02em; }
.theme-display--h4 { font-size: clamp(20px, 2.2vw, 28px); line-height: 1.1; letter-spacing: -0.01em; }
.theme-title-lg { font: 700 21px/1.15 var(--font-body); letter-spacing: -0.01em; }
.theme-title { font: 700 18px/1.25 var(--font-body); }
.theme-title-sm { font: 700 15px/1.3 var(--font-body); }
.theme-lede { font-size: clamp(17px, 1.5vw, 19px); line-height: 1.55; color: rgba(var(--color-light-text)); text-wrap: pretty; }
.theme-body { font-size: 16px; line-height: 1.6; color: rgba(var(--color-light-text)); text-wrap: pretty; }
.theme-eyebrow { font: 500 11px/1 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--theme-text-mono); }
.theme-mono { font: 500 12px/1.4 var(--font-mono); letter-spacing: 0.08em; color: var(--theme-text-mono); }
.theme-label { font: 600 12px/1 var(--font-body); letter-spacing: 0.1em; text-transform: uppercase; }
.theme-price { font-family: var(--font-display); font-size: 24px; line-height: 1; }
/* Headline price: the display face scales with the viewport so a hero price never crowds a narrow column. */
.theme-price--lg { font-size: clamp(28px, 3vw, 38px); }
.theme-stars { color: var(--theme-red); letter-spacing: 0.16em; font-size: 14px; }
.theme-balance { text-wrap: balance; }
.theme-center { text-align: center; }
.theme-accent-text { color: var(--theme-accent); }
.theme-on-dark { color: var(--theme-text-on-dark); }
.theme-on-dark .theme-eyebrow { color: var(--theme-accent); }
.theme-on-dark .theme-mono { color: var(--theme-text-on-dark-faint); }
@media (max-width: 560px) {
  .theme-display--h1 { font-size: clamp(34px, 10vw, 48px); }
  .theme-display--h2 { font-size: clamp(27px, 8vw, 38px); }
  .theme-display--h3 { font-size: clamp(23px, 7vw, 32px); }
  .theme-lede { font-size: 16px; }
}

/* ---------- Layout helpers ---------- */
.theme-wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.theme-wrap--mid { max-width: var(--wrap-mid); }
.theme-wrap--narrow { max-width: var(--wrap-narrow); }
.theme-wrap--form { max-width: 760px; }
.theme-between { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end; justify-content: space-between; }
.theme-row { display: flex; align-items: center; gap: 12px; }
.theme-row--wrap { flex-wrap: wrap; }
.theme-stack { display: grid; gap: 14px; }
.theme-grid { display: grid; gap: 20px; }
.theme-grid--2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.theme-grid--3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.theme-grid--4 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.theme-grid--cards { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.theme-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 44px; align-items: center; }
.theme-split--top { align-items: start; }
@media (max-width: 900px) {
  .theme-grid { gap: 16px; }
  .theme-grid--2, .theme-grid--3, .theme-grid--4, .theme-grid--cards { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
  .theme-split { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 560px) {
  .theme-grid--2, .theme-grid--3, .theme-grid--4, .theme-grid--cards { grid-template-columns: 1fr; }
  .theme-between { align-items: flex-start; }
}
.theme-hidden { display: none !important; }
.theme-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; }

/* ---------- Buttons (pill system driven by the section color scheme) ---------- */
.theme-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  border: 0; cursor: pointer; border-radius: var(--pill);
  font: 700 15px/1 var(--font-body); letter-spacing: 0.05em; text-transform: uppercase;
  padding: 19px 30px; text-align: center; text-decoration: none; white-space: normal;
  background: rgba(var(--color-button-background)); color: rgba(var(--color-button-text));
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.12s ease;
}
.theme-btn:hover, a.theme-btn:hover { background: var(--theme-btn-hover-bg, rgba(var(--color-button-background))); color: rgba(var(--color-button-text)); }
.theme-btn:active { transform: translateY(1px); }
.theme-btn--secondary { background: rgba(var(--color-button-secondary-background)); color: rgba(var(--color-button-secondary-text)); }
.theme-btn--secondary:hover, a.theme-btn--secondary:hover { background: var(--theme-btn-secondary-hover-bg, rgba(var(--color-button-secondary-background))); color: rgba(var(--color-button-secondary-text)); }
.theme-btn--ghost { background: transparent; color: rgba(var(--color-button-secondary-text)); border: 1px solid rgba(var(--color-button-secondary-border), 0.33); }
.theme-btn--ghost:hover, a.theme-btn--ghost:hover { background: transparent; border-color: rgba(var(--color-button-secondary-border)); color: rgba(var(--color-button-secondary-text)); }
.theme-btn--outline { background: transparent; color: rgba(var(--color-text)); border: 1px solid rgba(var(--color-text), 0.2); }
.theme-btn--outline:hover, a.theme-btn--outline:hover { background: transparent; border-color: rgba(var(--color-text)); color: rgba(var(--color-text)); }
/* Anchor pills: match a:not(.button) (0,1,1) so link buttons keep their scheme text colour. */
a.theme-btn { color: rgba(var(--color-button-text)); }
a.theme-btn--secondary { color: rgba(var(--color-button-secondary-text)); }
a.theme-btn--ghost { color: rgba(var(--color-button-secondary-text)); }
a.theme-btn--outline { color: rgba(var(--color-text)); }
.theme-btn--soft { background: var(--theme-cream); color: var(--theme-ink); border: 1px solid var(--theme-line-2); }
.theme-btn--soft:hover, a.theme-btn--soft:hover { background: var(--theme-cream-2); color: var(--theme-ink); }
a.theme-btn--soft { color: var(--theme-ink); }
/* `a:not(.button)` (0,2,1) outranks `.theme-btn` (0,1,0), so an anchor pill would otherwise fall
   back to the generic link colour fade. The source's `a` rule is (0,0,1) and loses to `.btn`, so
   anchor pills need this to keep the same eased hover as button pills. */
a.theme-btn:not(.button) { transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.12s ease; }
.theme-btn--sm { font-size: 13px; letter-spacing: 0.08em; padding: 14px 20px; }
.theme-btn--xs { font-size: 11px; letter-spacing: 0.08em; padding: 11px 14px; }
.theme-btn--lg { font-size: 17px; padding: 23px 32px; }
.theme-btn--block { display: flex; width: 100%; }
/* The platform base sheet fades disabled buttons (opacity .3); the design greys them with colour only. */
.theme-btn[disabled], .theme-btn.is-disabled { background: #0B0B0B1A; color: var(--theme-text-faint); cursor: not-allowed; opacity: 1; }
.theme-btn.loading { pointer-events: none; }
@media (max-width: 560px) {
  /* Narrow screens enlarge every pill (sm/xs included) to one comfortable tap size; only lg keeps its own step. */
  .theme-btn, .theme-btn--sm, .theme-btn--xs { padding: 17px 24px; font-size: 14px; }
  .theme-btn--lg { padding: 20px 26px; font-size: 15px; }
}
.theme-text-link {
  display: inline-block; background: none; border: 0; border-bottom: 2px solid currentColor; cursor: pointer;
  font: 700 13px/1 var(--font-body); letter-spacing: 0.1em; text-transform: uppercase; padding: 6px 0; border-radius: 0; color: inherit;
}
.theme-text-link:hover, a.theme-text-link:hover { color: var(--theme-link-hover); border-color: var(--theme-link-hover); }
.theme-quiet-btn { background: none; border: 0; cursor: pointer; font: 500 11px/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--theme-text-faint); padding: 8px; }
/* Same specificity trap as the pills above: `a:not(.button)` (0,2,1) outranks `.theme-quiet-btn`
   (0,1,0), so an anchor quiet button would inherit the running colour instead of the faint token. */
a.theme-quiet-btn { color: var(--theme-text-faint); }
/* Inline underlined link inside running copy: inherits size/colour, keeps the hover token. */
a.theme-inline-link { text-decoration: underline; }
.theme-quiet-btn:hover, a.theme-quiet-btn:hover { color: rgba(var(--color-text)); }
/* Comfortable hit target on touch devices regardless of viewport width — the source's own
   `@media (pointer:coarse){.btn-quiet{padding:12px 8px}}` (components.css:672). The frozen basis
   cannot see it: capture-source.mjs and contract-diff.mjs both open a plain viewport with no touch
   emulation, so every target encodes the `pointer: fine` layout. Matching it is a pure addition. */
@media (pointer: coarse) {
  .theme-quiet-btn { padding: 12px 8px; }
}

/* Stock Bottle .button rendered inside a migrated band adopts the same pill system. */
.theme-btn-scope .button:not(.button--link, .button--icon) {
  border-radius: var(--pill) !important;
  padding: 19px 30px !important;
  font: 700 15px/1 var(--font-body) !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  box-shadow: none !important;
  white-space: normal !important;
  background-color: rgba(var(--color-button-background)) !important;
  color: rgba(var(--color-button-text)) !important;
  transition: background-color 0.18s ease, color 0.18s ease !important;
}
.theme-btn-scope .button:not(.button--link, .button--icon)::after { content: none !important; display: none !important; }
.theme-btn-scope .button:not(.button--link, .button--icon):hover { background-color: var(--theme-btn-hover-bg, rgba(var(--color-button-background))) !important; }
.theme-btn-scope .button--secondary:not(.button--link, .button--icon) {
  background-color: rgba(var(--color-button-secondary-background)) !important;
  color: rgba(var(--color-button-secondary-text)) !important;
}
.theme-btn-scope .button--secondary:not(.button--link, .button--icon):hover { background-color: var(--theme-btn-secondary-hover-bg, rgba(var(--color-button-secondary-background))) !important; }
@media (max-width: 560px) {
  .theme-btn-scope .button:not(.button--link, .button--icon) { padding: 17px 24px !important; font-size: 14px !important; }
}

/* ---------- Chips / tags ---------- */
.theme-tag { display: inline-block; background: var(--theme-accent); color: var(--theme-ink); font: 700 10px/1 var(--font-body); letter-spacing: 0.12em; text-transform: uppercase; padding: 8px 11px; border-radius: var(--pill); }
.theme-tag--ink { background: var(--theme-ink); color: var(--theme-accent); }
.theme-tag--outline { background: transparent; border: 1px solid #FFC61A55; color: var(--theme-accent); padding: 7px 14px; font-family: var(--font-mono); font-weight: 500; letter-spacing: 0.14em; }
.theme-chip {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  border: 1px solid var(--theme-line-2); background: var(--theme-white); color: var(--theme-ink);
  border-radius: var(--pill); padding: 11px 16px;
  font: 600 12px/1 var(--font-body); letter-spacing: 0.06em; text-transform: uppercase;
  transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}
.theme-chip:hover { border-color: var(--theme-ink); }
.theme-chip.is-active { background: var(--theme-ink); color: var(--theme-accent); border-color: var(--theme-ink); }
/* Non-interactive status chip: keeps the pill shape without the pointer affordance. */
.theme-chip--static { cursor: default; background: var(--theme-white); }
.theme-chip--static:hover { border-color: var(--theme-line-2); }

/* ---------- Forms ---------- */
.theme-field { display: block; }
.theme-field > span, .theme-field-label { display: block; font: 500 11px/1 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--theme-text-mono); margin-bottom: 8px; }
.theme-input, .theme-textarea, .theme-select {
  width: 100%; background: var(--theme-white); border: 1px solid var(--theme-line-2); border-radius: var(--radius-sm);
  padding: 15px; font: 400 15px/1.4 var(--font-body); color: var(--theme-text); outline: none;
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}
.theme-textarea { resize: vertical; min-height: 96px; }
.theme-input:focus, .theme-textarea:focus, .theme-select:focus { border-color: var(--theme-ink); box-shadow: 0 0 0 3px #0B0B0B0F; }
.theme-input::placeholder, .theme-textarea::placeholder { color: #A9A296; }
.theme-input.is-error, .theme-textarea.is-error { border-color: var(--theme-red); box-shadow: 0 0 0 3px #D6372E1A; }
.theme-input--pill { border-radius: var(--pill); padding-inline: 18px; }
.theme-field-error { display: block; color: var(--theme-red); font: 500 12px/1.4 var(--font-body); margin-top: 7px; }
.theme-on-dark .theme-field > span, .theme-on-dark .theme-field-label { color: var(--theme-text-on-dark-faint); }
.theme-on-dark .theme-input, .theme-on-dark .theme-textarea, .theme-on-dark .theme-select {
  background: var(--theme-ink-panel); border-color: var(--theme-line-dark-2); color: var(--theme-cream);
}
/* The source does NOT re-colour the placeholder on dark — `.input::placeholder` (#A9A296) is
   what renders inside the ink panels on wholesale/community/contact, so no override here. */
.theme-on-dark .theme-input:focus, .theme-on-dark .theme-textarea:focus, .theme-on-dark .theme-select:focus {
  border-color: var(--theme-accent); box-shadow: 0 0 0 3px #FFC61A26;
}
.theme-on-dark .theme-field-error { color: var(--theme-coral); }

/* ---------- Surfaces ---------- */
.theme-card { background: rgba(var(--color-card-background)); border: 1px solid var(--theme-line); border-radius: var(--radius-lg); }
.theme-panel { background: var(--theme-white); border: 1px solid var(--theme-line); border-radius: var(--radius-xl); padding: 28px; }
.theme-card--pad { padding: 28px; }
.theme-round { border-radius: var(--radius-lg); overflow: hidden; }
.theme-cell-grid { display: grid; gap: 1px; background: var(--theme-line-2); border: 1px solid var(--theme-line-2); border-radius: var(--radius-lg); overflow: hidden; }
.theme-cell-grid > * { background: var(--theme-white); }
.theme-cell-grid--dark { background: rgba(var(--color-text), 0.18); border: 0; border-radius: 0; }
.theme-cell-grid--dark > * { background: rgba(var(--color-background)); }
@media (max-width: 900px) {
  .theme-panel, .theme-card--pad { padding: 22px; }
}

/* ---------- Motion ---------- */
.theme-reveal { opacity: 0; transform: translateY(18px); }
.theme-reveal.is-in { animation: theme-rise 0.55s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }
@keyframes theme-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes theme-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes theme-slide-in { from { transform: translateX(100%); } to { transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  .theme-reveal { opacity: 1; transform: none; }
}

/* ---------- Horizontal rails ---------- */
.theme-rail { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 0 18px; scrollbar-width: thin; }
.theme-rail > * { scroll-snap-align: start; flex: 0 0 auto; }
.theme-rail--edge { padding-inline: var(--gutter); margin-inline: calc(var(--gutter) * -1); }
@media (max-width: 760px) {
  .theme-swipe-mobile {
    display: flex; grid-template-columns: none; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; gap: 14px; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter);
    scroll-padding-left: var(--gutter); scrollbar-width: none;
  }
  .theme-swipe-mobile::-webkit-scrollbar { display: none; }
  .theme-swipe-mobile > * { flex: 0 0 80%; scroll-snap-align: start; }
}
@media (max-width: 420px) {
  .theme-swipe-mobile > * { flex-basis: 86%; }
}

/* ---------- Choice indicators + small surfaces (used by option/tier/add-on pickers) ---------- */
.theme-radio { width: 20px; height: 20px; border-radius: var(--pill); border: 2px solid var(--theme-ink); background: transparent; flex: 0 0 auto; transition: background 0.15s ease; }
.theme-radio.is-on { background: var(--theme-ink); }
.theme-check {
  width: 22px; height: 22px; border-radius: 6px; border: 2px solid var(--theme-ink);
  background: transparent; color: var(--theme-accent); flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  font: 700 13px/1 var(--font-body); transition: background 0.15s ease;
}
.theme-check.is-on { background: var(--theme-ink); }
.theme-panel--dashed { background: var(--theme-white); border: 1px dashed var(--theme-line-3); border-radius: var(--radius-lg); padding: 22px; }
.theme-step-label { font: 500 11px/1 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--theme-text-mono); }
.theme-strike { text-decoration: line-through; color: var(--theme-text-mono); }
.theme-green { color: var(--theme-green); font-weight: 600; }