/** Shopify CDN: Minification failed
Line 2221:0 Unexpected "}"
**/
/* VASA theme stylesheet.
Ported from the static build (site-vasa/assets) so the theme renders identically to
the prototype.
TOKENS: the base :root block below carries the full design system (spacing, type
scale, radii, layout widths, motion). The "theme token bridge" at the END of this
file re-points the settings-driven subset — every colour, both fonts, the padding,
max-width and radius tokens — at the variables layout/theme.liquid emits from theme
settings. Base first, bridge last, so a value changed in the theme editor wins.
⛔ Do NOT delete the base block. It was stripped once during the port, which left 43
tokens (all spacing, all font sizes, all radii, both container widths) resolving to
nothing: the page rendered with zero padding and default type. If you move tokens
into the layout, move ALL of them and keep the bridge last.
*/
/* ==================== tokens.css ==================== */
/* ============================================================================
VASA — design tokens
· bone grounds, ink bands, arterial crimson accents — the VASA palette
sampled from this product's own photograph (branding-vasa.md s6).
· BLOOD ORANGE #C2400F is the ONE hue reserved by usage: buy actions only,
and it takes WHITE text (white on it is 5.21:1).
· Archivo (display) + Inter (UI/body) + JetBrains Mono (every dose and price)
· red urgency accents, struck-anchor pricing, badge-heavy merch frames
· MOBILE-FIRST: every value tuned at 390px first
Variable names keep the shared --e- prefix so the component library resolves.
VASA palette (branding-vasa.md s6), SAMPLED from _source-product-photo.jpg with
PowerShell + System.Drawing: bone grounds, warm charcoal ink #272629 off the VASA
wordmark, arterial CRIMSON #C8102E off the FLOW display type and the blood-cell
illustration, burgundy off the gummies. Blood orange #C2400F is reserved for buy
actions only and is deliberately NOT a colour on the product: the brand accent is a
saturated warm red covering most of the pouch, so a red button would dissolve into
it. Type: Archivo / Inter / JetBrains Mono, and the mono is load-bearing, not
decorative: every dose, price and panel figure takes it so the numbers read as data.
============================================================================ */
:root {
/* ---- REPLICA CORE (sampled from the reference) ---- */
--e-rose: #C8102E; /* crimson — sampled from FLOW + the blood cells */
--e-wine: #3A3A3E; /* core — headings on light, bands, chips */
--e-maroon: #272629; /* ink — sampled from the VASA wordmark */
--e-blush: #EFB3AE; /* sky — DARK GROUNDS ONLY (2.84:1 on paper) */
--e-cream: #E3DFD8; /* mist — sampled from the contour field */
--e-cta-deep: #C2400F; /* blood orange — BUY ONLY. The pouch flavour. */
--e-cta-dark: #A5340B;
/* ---- LIGHT GROUND LADDER ---- */
--e-tint-0: #F6F3ED;
--e-tint-1: #FBF9F5;
--e-tint-2: #F1EDE5;
--e-tint-3: #E3DFD8;
--e-tint-4: #EDE9E0;
--e-tint-5: #DBD6CA;
--e-tint-6: #CAC3B4;
/* ---- SEMANTIC ---- */
--e-bg: var(--e-tint-0);
--e-bg-alt: var(--e-tint-2);
--e-surface: #FFFDFA;
--e-ink: #272629; /* brand ink */
--e-ink-soft: #56545C; /* brand ink-soft */
--e-ink-faint: #6A6870; /* 5.62:1 on white, 4.98 on the mist tint */
--e-hairline: rgba(16,20,24,.14);
--e-heading: #272629;
--e-cta: var(--e-cta-deep); /* #C2400F fill, 5.2:1 with white text */
--e-cta-hover: var(--e-cta-dark); /* #A5340B, 6.3:1 with white */
--e-cta-text: #FFFFFF; /* white on blood orange, 5.21:1 */
--e-sale: #3A3A3E; /* core blue; orange is buy-only, so */
/* urgency is carried by words not hue */
--e-success: #3A3A3E; /* core blue */
--e-star: #C8102E; /* crimson stars */
/* ---- FORMAT COLOUR CODING (doc s3) — card border, badge, active tab ---- */
--e-fmt-gummies: #EFB3AE;
--e-fmt-drops: #3A3A3E;
--e-fmt-patches: #D6564F;
--e-amber: #C8102E; /* statistics, gift and value callouts */
/* ---- TYPE (reference stack) ---- */
--e-font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
--e-font-body: "Inter", -apple-system, "Segoe UI", sans-serif;
--e-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
--e-w-light:400; --e-w-reg:400; --e-w-med:500; --e-w-semi:600; --e-w-bold:700;
/* mobile-first fluid scale (390px values are the mins) */
--e-fs-display: clamp(2.8rem, 2rem + 3.4vw, 5.2rem);
--e-fs-h1: clamp(2.4rem, 1.8rem + 2.6vw, 4.2rem);
--e-fs-h2: clamp(2.1rem, 1.7rem + 1.9vw, 3.4rem);
--e-fs-h3: clamp(1.8rem, 1.5rem + 1.1vw, 2.4rem);
--e-fs-h4: clamp(1.6rem, 1.4rem + .6vw, 1.9rem);
--e-fs-lead: clamp(1.55rem, 1.4rem + .5vw, 1.9rem);
--e-fs-body: 1.5rem;
--e-fs-small: 1.35rem;
--e-fs-micro: 1.15rem;
--e-lh-display:1.12; --e-lh-head:1.2; --e-lh-body:1.55;
--e-ls-display:-.02em; --e-ls-caps:.14em;
/* ---- SPACING (tight, reference-dense) ---- */
--e-s1:.4rem; --e-s2:.8rem; --e-s3:1.2rem; --e-s4:1.6rem;
--e-s5:2rem; --e-s6:2.8rem; --e-s7:4rem; --e-s8:5.2rem;
--e-section-y: clamp(2.8rem, 2rem + 1.6vw, 4.8rem);
--e-section-y-tight: clamp(1.8rem, 1.4rem + .8vw, 2.8rem);
/* ---- LAYOUT ---- */
--e-page-w:160rem; --e-content-w:118rem; --e-prose-w:66rem;
--e-gutter: clamp(1.6rem, 1rem + 1.6vw, 3.2rem);
/* ---- RADIUS (reference: rounded cards, pill CTAs) ---- */
--e-r-card:1rem; --e-r-media:1.2rem; --e-r-btn:.8rem; --e-r-pill:999px; --e-r-tile:1.4rem;
/* ---- ELEVATION ---- */
--e-shadow-sm: 0 1px 3px rgba(16,20,24,.08);
--e-shadow-md: 0 6px 18px rgba(16,20,24,.1);
--e-shadow-cta: 0 4px 14px rgba(165,52,11,.34);
--e-glow: 0 0 0 rgba(0,0,0,0);
/* ---- MOTION ---- */
--e-dur-short:.1s; --e-dur:.2s; --e-dur-med:.3s; --e-dur-long:.5s; --e-dur-xl:.6s;
--e-ease: cubic-bezier(0,0,.3,1);
--e-btn-h:5rem; --e-btn-h-lg:5.6rem;
--e-focus: 2px solid var(--e-rose);
}
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 62.5%; -webkit-text-size-adjust: 100%; }
/* ⚠ MUST be `clip`, never `hidden` — hidden turns html/body into scroll
containers and structurally breaks position:sticky. See PART E. */
html, body { max-width: 100%; overflow-x: clip; }
img, video, table { max-width: 100%; }
body {
margin: 0; background: var(--e-bg); color: var(--e-ink);
font-family: var(--e-font-body); font-size: var(--e-fs-body);
line-height: var(--e-lh-body); -webkit-font-smoothing: antialiased;
}
h1,h2,h3,h4 {
font-family: var(--e-font-display); font-weight: 700;
color: var(--e-heading); line-height: var(--e-lh-head);
letter-spacing: var(--e-ls-display); margin: 0 0 var(--e-s3);
}
h1{font-size:var(--e-fs-h1);} h2{font-size:var(--e-fs-h2);} h3{font-size:var(--e-fs-h3);}
h4{font-size:var(--e-fs-h4);font-family:var(--e-font-body);font-weight:var(--e-w-semi);}
/* Accent phrase: the reference colors the payoff phrase bright green */
.accent { font-family: inherit; font-style: normal; font-weight: inherit; color: var(--e-rose); }
.eyebrow {
font-family: var(--e-font-body); font-size: var(--e-fs-micro);
font-weight: var(--e-w-semi); letter-spacing: var(--e-ls-caps);
text-transform: uppercase; color: var(--e-rose); margin-bottom: var(--e-s2);
}
.lead { font-size: var(--e-fs-lead); color: var(--e-ink-soft); }
.page{max-width:var(--e-page-w);margin-inline:auto;}
.container{max-width:var(--e-content-w);margin-inline:auto;padding-inline:var(--e-gutter);}
.prose{max-width:var(--e-prose-w);margin-inline:auto;padding-inline:var(--e-gutter);}
.section{padding-block:var(--e-section-y);}
.section--tight{padding-block:var(--e-section-y-tight);}
/* ---- BANDING — white default, cream tints, plum statement bands ---- */
.band-0{background:var(--e-tint-0);}
.band-1{background:var(--e-tint-2);}
.band-2{background:var(--e-tint-4);}
.band-3{background:var(--e-tint-3);}
/* Deep band: INK #1A1B1E. It was the gummy burgundy, but burgundy forced the buy button
to invert to a bone pill (blood orange on burgundy is 2.1:1), which meant the CTA
changed colour depending on the band and stopped reading as the buy action. On ink the
blood orange holds at 3.33:1 as a graphical object with white text at 5.21:1, so the
CTA is now consistent site-wide. Bone text is 15:1 here, the rose accent 9.7:1. */
.band-wine{
background:#1A1B1E;
--e-ink:#F6F3ED; --e-ink-soft:rgba(246,243,237,.84); --e-ink-faint:rgba(246,243,237,.64);
--e-heading:#FFFFFF; --e-hairline:rgba(246,243,237,.20); --e-surface:#5E0C19;
--e-tint-3:#5E0C19; --e-tint-4:#6B0E1C; --e-tint-5:#5E0C19;
--e-rose:#EFB3AE; --e-star:#EFB3AE; --e-success:#F0B49A;
/* the buy colour does NOT invert here: blood orange holds 3.31:1 against this ink
ground as a graphical object, so the CTA is identical on every band on the site. */
--e-shadow-cta:0 4px 18px rgba(0,0,0,.42);
color:var(--e-ink);
}
.band-wine h1,.band-wine h2,.band-wine h3{color:#fff;}
.band-wine .eyebrow{color:#EFB3AE;}
.band-cream{background:var(--e-tint-3);color:#272629;}
.band-cream h1,.band-cream h2,.band-cream h3{color:#0D0D0D;}
.band-cream .eyebrow{color:#3A3A3E;}
/* ---- BUTTONS (reference anatomy: bold pillish green ATC) ---- */
.btn{
display:inline-flex;align-items:center;justify-content:center;gap:var(--e-s2);
min-height:var(--e-btn-h);padding:0 var(--e-s6);
border:0;border-radius:var(--e-r-btn);
font-family:var(--e-font-body);font-size:var(--e-fs-body);font-weight:var(--e-w-bold);
letter-spacing:.01em;text-decoration:none;cursor:pointer;
transition:transform var(--e-dur) var(--e-ease),background var(--e-dur) var(--e-ease),box-shadow var(--e-dur) var(--e-ease);
}
.btn--buy{background:var(--e-cta);color:var(--e-cta-text);box-shadow:var(--e-shadow-cta);width:100%;min-height:var(--e-btn-h-lg);font-size:1.6rem;}
.btn--buy:hover{background:var(--e-cta-dark);transform:translateY(-1px);}
.btn--primary{background:var(--e-heading);color:#fff;}
.btn--primary:hover{background:#000;}
.btn--ghost{background:transparent;color:var(--e-wine);border:1.5px solid var(--e-wine);}
.btn--ghost:hover{background:var(--e-wine);color:#fff;}
.btn:focus-visible{outline:var(--e-focus);outline-offset:3px;}
/* struck anchor inside the ATC, reference-style */
.btn--buy .was{opacity:.6;text-decoration:line-through;font-weight:var(--e-w-med);margin-right:.6rem;}
/* ---- PILLS ---- */
.pill{display:inline-flex;align-items:center;gap:var(--e-s2);padding:.5rem 1.2rem;border-radius:var(--e-r-pill);font-size:var(--e-fs-micro);font-weight:var(--e-w-bold);letter-spacing:.04em;text-transform:uppercase;}
.pill--popular{background:var(--e-wine);color:#fff;}
.pill--save{background:var(--e-sale);color:#fff;}
.pill--soft{background:var(--e-tint-4);color:var(--e-wine);border:1px solid rgba(200,16,46,.25);}
.live-dot{width:9px;height:9px;border-radius:50%;display:inline-block;background:var(--e-success);animation:e-pulse 2.5s infinite;}
@keyframes e-pulse{0%{transform:scale(.95);box-shadow:0 0 0 0 rgba(200,16,46,.5);}70%{transform:scale(1);box-shadow:0 0 0 6px rgba(200,16,46,0);}100%{transform:scale(.95);box-shadow:0 0 0 0 rgba(200,16,46,0);}}
/* ---- MEDIA ---- */
.media{border-radius:var(--e-r-media);overflow:hidden;display:block;}
.media img,.media video{width:100%;height:100%;object-fit:cover;display:block;}
.ratio-1x1{aspect-ratio:1/1;} .ratio-4x5{aspect-ratio:4/5;} .ratio-3x4{aspect-ratio:3/4;} .ratio-16x9{aspect-ratio:16/9;} .ratio-3x2{aspect-ratio:3/2;}
.video-slot{position:relative;border-radius:var(--e-r-media);overflow:hidden;background:var(--e-tint-4);border:1px dashed rgba(200,16,46,.35);display:grid;place-items:center;color:var(--e-ink-faint);font-size:var(--e-fs-small);}
.video-slot::after{content:"▶";font-size:3rem;color:rgba(200,16,46,.4);}
/* ---- CARDS ---- */
.card{background:var(--e-surface);border-radius:var(--e-r-card);overflow:hidden;border:1px solid var(--e-hairline);transition:transform var(--e-dur-med) var(--e-ease),box-shadow var(--e-dur-med) var(--e-ease);}
.card:hover{transform:translateY(-2px);box-shadow:var(--e-shadow-md);}
.grid{display:grid;gap:var(--e-s5);}
.grid--2{grid-template-columns:repeat(2,1fr);} .grid--3{grid-template-columns:repeat(3,1fr);} .grid--4{grid-template-columns:repeat(4,1fr);}
.split{display:grid;grid-template-columns:1fr 1fr;gap:var(--e-s6);align-items:center;}
.stars{color:var(--e-star);letter-spacing:.08em;font-size:var(--e-fs-small);}
@media (max-width:989px){
.grid--4{grid-template-columns:repeat(2,1fr);}
.split{grid-template-columns:1fr !important;gap:var(--e-s5);}
.desktop-only{display:none !important;}
}
@media (max-width:749px){.grid--3{grid-template-columns:repeat(2,1fr);}}
@media (max-width:599px){
.grid--2,.grid--3,.grid--4{grid-template-columns:1fr;}
.mobile-hide{display:none !important;}
/* The old `:root{--e-gutter:1.8rem}` override lived here. Removed: --e-gutter is now
a clamp between the two padding settings (see the bridge at the foot of this file),
so the mobile value comes from the setting and this breakpoint snap is redundant. */
.split .media,.hero__media{max-height:46vh;}
.split .media img,.hero__media img,.hero__media video{max-height:46vh;}
.media.ratio-4x5,.media.ratio-1x1{aspect-ratio:auto;}
}
@media (min-width:600px){.mobile-only{display:none !important;}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important;}}
/* ============================================================================
VASA — NUMERALS ARE DATA (branding-vasa.md s5)
This brand's entire position is that the amounts are printed and checkable, so
every dose, price and panel figure is set in the mono. It makes the numbers read
as data rather than as marketing, and it makes the supplement panel the most
credible-looking object on the page. Additive block: components.css is untouched.
============================================================================ */
.rit__price, .rit__glass, .rit__save,
.tier__price .now, .tier__price .was,
.cmp__price, .product-card__price span,
.plan__price, .upsell-price span,
.statsband__n, .rsrch__n,
.rtier__name, .rtier__save,
.cartline__price, .cartfoot__row b,
.stickybuy__price {
font-family: var(--e-font-mono);
font-feature-settings: "tnum" 1;
letter-spacing: -.02em;
}
/* ==================== components.css ==================== */
/* ============================================================================
ELARISS — component layer
Section components matching the architecture in the officialquasi teardown.
Depends on tokens.css.
============================================================================ */
.visually-hidden {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* ---------- ANNOUNCEMENT BAR ---------- */
.announce {
background: var(--e-maroon); color: var(--e-cream);
font-size: var(--e-fs-micro); letter-spacing: .08em; text-transform: uppercase;
text-align: center; padding: var(--e-s2) var(--e-s4);
}
.announce__track { position: relative; min-height: 1.6rem; }
.announce__slide { display: none; }
.announce__slide.is-active { display: block; animation: e-fade var(--e-dur-xl) var(--e-ease); }
@keyframes e-fade { from { opacity: 0; transform: translateY(4px);} to { opacity: 1; transform: none;} }
/* ---------- HEADER ---------- */
.hdr { position: sticky; top: 0; z-index: 50; background: var(--e-tint-0); border-bottom: 1px solid var(--e-hairline); }
.hdr__inner {
display: grid; align-items: center; gap: var(--e-s4);
grid-template-columns: 1fr auto 1fr;
padding-block: var(--e-s3);
}
.hdr__nav { display: flex; gap: clamp(1.2rem, 1.6vw, 2.4rem); }
.hdr__nav--right { justify-content: flex-end; }
.hdr__nav a {
font-size: var(--e-fs-small); font-weight: var(--e-w-med); letter-spacing: .1em;
text-transform: uppercase; color: var(--e-ink); text-decoration: none;
padding-block: var(--e-s2); border-bottom: 1px solid transparent;
transition: color var(--e-dur) var(--e-ease), border-color var(--e-dur) var(--e-ease);
}
.hdr__nav a:hover { color: var(--e-rose); border-bottom-color: var(--e-rose); }
.hdr__brand { text-align: center; text-decoration: none; display: block; }
/* Mixed-case wordmark: the old .28em tracking was tuned for the all-caps
setting and reads as spaced-out letters once the name is cased properly. */
.hdr__wordmark {
display: block; font-family: var(--e-font-display); font-size: 2.6rem;
letter-spacing: .02em; color: var(--e-maroon); line-height: 1;
}
.hdr__sub {
display: block; font-size: 1rem; letter-spacing: .3em; text-transform: uppercase;
color: var(--e-rose); margin-top: .4rem;
}
/* Right zone. The secondary nav now lives INSIDE this flex row rather than beside
it, so the links and the two icons occupy a single grid cell on one line. Keeping
them as separate grid children pushed the icons onto a second row and added a
whole row of height to a sticky header. */
.hdr__utils { display: flex; justify-content: flex-end; align-items: center; gap: var(--e-s4); grid-column: 3; min-width: 0; }
.hdr__utils .hdr__nav { gap: var(--e-s4); }
.hdr__utils .hdr__nav a { padding-block: 0; }
.hdr__nav--left a { padding-block: 0; }
.hdr__icon {
position: relative; background: none; border: 0; cursor: pointer;
color: var(--e-maroon); font-size: 1.9rem; line-height: 1; padding: .4rem;
text-decoration: none;
}
.hdr__cart-count {
position: absolute; top: 0; right: -2px;
background: var(--e-rose); color: #fff; font-size: 1rem; font-weight: var(--e-w-semi);
min-width: 1.8rem; height: 1.8rem; border-radius: var(--e-r-pill);
display: grid; place-items: center;
}
.hdr__burger { background: none; border: 0; padding: var(--e-s2); cursor: pointer; display: grid; gap: 4px; }
.hdr__burger span { display: block; width: 22px; height: 2px; background: var(--e-maroon); }
@media (max-width: 989px) {
.hdr__inner { grid-template-columns: 1fr auto 1fr; }
.hdr__wordmark { font-size: 2.4rem; }
}
/* ---------- MOBILE DRAWER ---------- */
.drawer { position: fixed; inset: 0; z-index: 100; background: rgba(85,16,28,.4); }
.drawer[hidden] { display: none; }
.drawer__panel {
position: absolute; inset-block: 0; left: 0; width: min(88%, 36rem);
background: var(--e-tint-0); padding: var(--e-s6) var(--e-s5);
display: flex; flex-direction: column; gap: var(--e-s5); overflow-y: auto;
animation: e-slidein var(--e-dur-med) var(--e-ease);
}
@keyframes e-slidein { from { transform: translateX(-100%);} to { transform: none;} }
.drawer__close { align-self: flex-end; background: none; border: 0; font-size: 3rem; line-height: 1; color: var(--e-maroon); cursor: pointer; }
.drawer__nav { display: grid; gap: var(--e-s4); }
.drawer__nav a { --tap: 1;
font-family: var(--e-font-display); font-size: 2.2rem; color: var(--e-maroon);
text-decoration: none; padding-bottom: var(--e-s3); border-bottom: 1px solid var(--e-hairline);
}
.drawer__note { font-size: var(--e-fs-micro); color: var(--e-ink-soft); text-align: center; }
/* ---------- STICKY BUY BAR (mobile) ---------- */
.stickybuy {
position: fixed; bottom: 0; inset-inline: 0; z-index: 60;
background: var(--e-surface); border-top: 1px solid var(--e-hairline);
box-shadow: 0 -4px 18px rgba(85,16,28,.1);
/* Side padding is the token, not a spacing step: this bar is pinned to both
screen edges, so a 16px step put the product name 16px from the edge. */
padding: var(--e-s3) var(--e-gutter); display: flex; align-items: center; gap: var(--e-s4);
}
.stickybuy[hidden] { display: none; }
.stickybuy__meta { display: grid; line-height: 1.2; }
.stickybuy__name { font-size: var(--e-fs-small); font-weight: var(--e-w-med); }
.stickybuy__price { font-size: var(--e-fs-micro); color: var(--e-ink-soft); }
.stickybuy__cta { flex: 1; min-height: 4.8rem; font-size: var(--e-fs-body); }
/* ---------- HERO ---------- */
.hero { position: relative; }
.hero__media img { width: 100%; display: block; }
.hero--split { display: grid; grid-template-columns: 1.05fr 1fr; align-items: center; gap: var(--e-s6); }
.hero__copy { padding: var(--e-s6) 0; }
.hero h1 { margin-bottom: var(--e-s4); }
.hero__sub { font-size: var(--e-fs-lead); color: var(--e-ink-soft); font-weight: var(--e-w-light); margin-bottom: var(--e-s4); max-width: 46ch; }
.hero__cta-row { display: flex; flex-wrap: wrap; gap: var(--e-s3); align-items: center; }
.hero__reassure { display: flex; flex-wrap: wrap; gap: var(--e-s4); margin-top: var(--e-s5); font-size: var(--e-fs-small); color: var(--e-ink-soft); }
.hero__reassure span::before { content: "✓ "; color: var(--e-success); font-weight: var(--e-w-bold); }
@media (max-width: 989px) { .hero--split { grid-template-columns: 1fr; gap: var(--e-s5); } .hero__copy { padding-top: var(--e-s6); } }
/* ---------- TRUST BAR ---------- */
.trustbar { background: var(--e-cream); padding-block: var(--e-s5); }
.trustbar__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--e-s5); text-align: center; }
.trustbar__item { display: grid; gap: var(--e-s2); justify-items: center; }
.trustbar__glyph { font-size: 2.4rem; color: var(--e-rose); line-height: 1; }
.trustbar__label { font-size: var(--e-fs-small); font-weight: var(--e-w-med); color: var(--e-maroon); }
.trustbar__note { font-size: var(--e-fs-micro); color: var(--e-ink-soft); }
@media (max-width: 749px) { .trustbar__grid { grid-template-columns: repeat(2, 1fr); gap: var(--e-s4); } }
/* ---------- SECTION HEADER ---------- */
.sec-head { text-align: center; max-width: 62rem; margin: 0 auto var(--e-s5); }
.sec-head p { color: var(--e-ink-soft); font-size: var(--e-fs-lead); font-weight: var(--e-w-light); }
.sec-head--left { text-align: left; margin-inline: 0; }
/* ---------- TIER SELECTOR (the offer ladder) ---------- */
.tiers { display: grid; gap: var(--e-s3); }
.tier {
position: relative; display: grid;
grid-template-columns: auto 1fr auto; align-items: center; gap: var(--e-s4);
padding: var(--e-s4) var(--e-s5);
background: var(--e-surface);
border: 2px solid var(--e-hairline); border-radius: var(--e-r-card);
cursor: pointer; transition: border-color var(--e-dur) var(--e-ease), box-shadow var(--e-dur) var(--e-ease);
}
.tier:hover { border-color: var(--e-blush); }
.tier.is-selected { border-color: var(--e-rose); box-shadow: 0 0 0 3px rgba(188,58,80,.12); }
.tier__radio {
width: 2.2rem; height: 2.2rem; border-radius: 50%;
border: 2px solid var(--e-blush); display: grid; place-items: center; flex: none;
}
.tier.is-selected .tier__radio { border-color: var(--e-rose); }
.tier.is-selected .tier__radio::after { content: ""; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: var(--e-rose); }
.tier__body { display: grid; gap: .2rem; }
.tier__name { font-weight: var(--e-w-semi); font-size: var(--e-fs-body); color: var(--e-maroon); }
.tier__desc { font-size: var(--e-fs-small); color: var(--e-ink-soft); }
.tier__prices { text-align: right; display: grid; gap: .2rem; }
.tier__price { font-size: var(--e-fs-h4); font-weight: var(--e-w-semi); color: var(--e-maroon); font-family: var(--e-font-body); }
.tier__each { font-size: var(--e-fs-micro); color: var(--e-ink-soft); }
.tier__was { font-size: var(--e-fs-micro); color: var(--e-ink-faint); text-decoration: line-through; }
.tier__flag {
position: absolute; top: -1.1rem; left: var(--e-s5);
background: var(--e-maroon); color: var(--e-cream);
font-size: 1rem; font-weight: var(--e-w-semi); letter-spacing: .1em; text-transform: uppercase;
padding: .4rem 1rem; border-radius: var(--e-r-pill);
}
.tier--best { border-color: var(--e-blush); }
@media (max-width: 599px) {
.tier { grid-template-columns: auto 1fr; gap: var(--e-s3); padding: var(--e-s4); }
.tier__prices { grid-column: 2; text-align: left; display: flex; gap: var(--e-s3); align-items: baseline; }
}
/* ---------- BUY BOX ---------- */
.buybox { display: grid; gap: var(--e-s4); align-content: start; }
.buybox__title { margin-bottom: 0; }
.buybox__sub { font-size: var(--e-fs-small); color: var(--e-ink-soft); letter-spacing: .04em; }
.buybox__rating { display: flex; align-items: center; gap: var(--e-s2); font-size: var(--e-fs-small); color: var(--e-ink-soft); }
.buybox__ticks { display: grid; gap: var(--e-s2); font-size: var(--e-fs-small); }
.buybox__ticks li { list-style: none; }
.buybox__ticks li::before { content: "✓"; color: var(--e-success); font-weight: var(--e-w-bold); margin-right: .8rem; }
.buybox__micro { font-size: var(--e-fs-micro); color: var(--e-ink-faint); line-height: 1.5; }
.buybox__pay { display: flex; gap: var(--e-s2); flex-wrap: wrap; font-size: var(--e-fs-micro); color: var(--e-ink-faint); }
/* PDP gallery — sticky on desktop (standing rule) */
.pdp { display: grid; grid-template-columns: 1.15fr 1fr; gap: var(--e-s8); align-items: start; }
.pdp__gallery { position: sticky; top: 10rem; display: grid; gap: var(--e-s3); }
.pdp__row { display: grid; grid-template-columns: 7.2rem 1fr; gap: var(--e-s3); align-items: start; }
.pdp__thumbs--side { display: grid; grid-template-columns: 1fr; gap: var(--e-s2); align-content: start; }
.pdp__thumbs--side .pdp__thumb img { aspect-ratio: 1/1; }
.pdp__main { border-radius: var(--e-r-media); overflow: hidden; background: var(--e-tint-1); }
/* ⚠ `height: auto` is load-bearing. The gallery ![]()
carries width/height attributes
for CLS, and those attributes are presentational hints that set a used height. An
explicit height beats `aspect-ratio` (the ratio only applies when one axis is auto),
so without this the image rendered at its attribute height of 900px — 120% of a
phone's viewport. Measured, not guessed. */
.pdp__main img { width: 100%; height: auto; display: block; aspect-ratio: 1/1; object-fit: cover; }
.pdp__thumbs { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--e-s2); }
.pdp__thumb { border: 2px solid transparent; border-radius: .6rem; overflow: hidden; cursor: pointer; background: var(--e-tint-1); padding: 0; }
.pdp__thumb.is-active { border-color: var(--e-rose); }
.pdp__thumb img { width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block; }
@media (max-width: 989px) {
.pdp { grid-template-columns: 1fr; gap: var(--e-s5); }
.pdp__gallery { position: static; }
.pdp__row { grid-template-columns: 1fr; }
.pdp__thumbs--side { grid-template-columns: repeat(6, 1fr); order: 2; }
/* Mobile matches the reference: a square, near-full-bleed main image with the thumb
rail under it. The cap only bites on short handsets, where a true 1:1 would push
the buy box entirely below the fold. */
.pdp__main img { max-height: 58vh; }
}
/* Aside columns inside a .split are often far shorter than the column beside them,
which leaves a blank rectangle under the media for the rest of the row. Sticking
the short column keeps it in view for the whole row instead. Desktop only, since
.split collapses to one column below 990px. Requires align-self:start, because a
stretched or centred grid item has nowhere to travel. */
@media (min-width: 990px) {
.split > .is-sticky-col { position: sticky; top: 12rem; align-self: start; }
}
/* Sticky only works if the sticky element is SHORTER than the viewport. A 1:1 hero
image plus a thumb rail plus anything else stacked underneath overflows one screen,
at which point the column scrolls away and leaves a tall blank rectangle under the
thumbnails while the offer stack keeps going. So the desktop gallery is height-capped
to the viewport and the main image is sized from vh rather than from its own aspect
ratio. Anything that does not fit belongs in the offer column, not under the thumbs. */
@media (min-width: 990px) {
.pdp__gallery { max-height: calc(100vh - 12rem); align-content: start; }
/* Sized from the viewport, not from the image, so the whole column (image + thumb
rail + spec strip) always fits inside one screen and the sticky can pin. The
27rem subtracted is the sticky top offset plus the rail, strip and gaps. On a
tall display it settles at 56rem, which lands on the reference's ~575px square. */
.pdp__main img { aspect-ratio: auto; height: clamp(30rem, calc(100vh - 20rem), 56rem); width: 100%; object-fit: cover; }
/* Reference thumbs are a fixed ~60px rail, not six stretched cells. */
.pdp__thumbs { max-width: 42rem; }
}
/* The footer's top margin shows as a pale strip whenever a page closes on a dark band.
On the PDP the last section is band-wine, so the two dark blocks butt together. */
.page-pdp .ftr { margin-top: 0; }
/* ---------- COMPARISON TABLE ---------- */
.compare { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--e-surface); border-radius: var(--e-r-card); overflow: hidden; }
.compare th, .compare td { padding: var(--e-s4); text-align: center; border-bottom: 1px solid var(--e-hairline); font-size: var(--e-fs-small); }
.compare thead th { background: var(--e-cream); font-family: var(--e-font-body); font-weight: var(--e-w-semi); color: var(--e-maroon); }
.compare tbody th { text-align: left; font-weight: var(--e-w-med); color: var(--e-ink); }
.compare .col-ours { background: rgba(188,58,80,.06); font-weight: var(--e-w-semi); color: var(--e-maroon); }
.compare .yes { color: var(--e-success); font-weight: var(--e-w-bold); }
.compare .no { color: var(--e-ink-faint); }
.compare-wrap { overflow-x: auto; }
/* ---------- STEPS ---------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e-s5); counter-reset: step; }
.step { display: grid; gap: var(--e-s3); }
.step__n {
counter-increment: step; width: 4.4rem; height: 4.4rem; border-radius: 50%;
background: var(--e-wine); color: var(--e-cream);
display: grid; place-items: center; font-family: var(--e-font-display); font-size: 2rem;
}
.step__n::before { content: counter(step); }
@media (max-width: 749px) { .steps { grid-template-columns: 1fr; gap: var(--e-s5); } }
/* ---------- TIMELINE ---------- */
.timeline { display: grid; gap: 0; }
.tl-row { display: grid; grid-template-columns: 14rem 1fr; gap: var(--e-s5); padding-block: var(--e-s4); border-bottom: 1px solid var(--e-hairline); }
.tl-when { font-family: var(--e-font-display); font-size: var(--e-fs-h4); color: var(--e-rose); }
@media (max-width: 599px) { .tl-row { grid-template-columns: 1fr; gap: var(--e-s2); } }
/* ---------- ACCORDION (FAQ) ---------- */
.acc { border-top: 1px solid var(--e-hairline); }
.acc details { border-bottom: 1px solid var(--e-hairline); }
.acc summary {
cursor: pointer; list-style: none; padding: var(--e-s4) var(--e-s6) var(--e-s4) 0;
font-weight: var(--e-w-med); font-size: var(--e-fs-lead); color: var(--e-maroon);
position: relative;
}
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after {
content: "+"; position: absolute; right: 0; top: 50%; transform: translateY(-50%);
font-size: 2.4rem; color: var(--e-rose); line-height: 1;
}
.acc details[open] summary::after { content: "–"; }
.acc__body { padding-bottom: var(--e-s5); color: var(--e-ink-soft); max-width: 72ch; }
/* ---------- REVIEWS ---------- */
.rev-summary { display: grid; grid-template-columns: auto 1fr; gap: var(--e-s7); align-items: center; }
.rev-score { text-align: center; }
.rev-score__n { font-family: var(--e-font-display); font-size: 6rem; color: var(--e-maroon); line-height: 1; }
.rev-bars { display: grid; gap: var(--e-s2); }
.rev-bar { display: grid; grid-template-columns: 4rem 1fr 4rem; gap: var(--e-s3); align-items: center; font-size: var(--e-fs-micro); }
.rev-bar__track { display: block; height: 8px; background: var(--e-tint-3); border-radius: var(--e-r-pill); overflow: hidden; }
.rev-bar__fill { display: block; height: 100%; background: var(--e-star); border-radius: var(--e-r-pill); }
.rev-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e-s5); }
.rev-card { background: var(--e-surface); border-radius: var(--e-r-card); padding: var(--e-s5); display: grid; gap: var(--e-s3); align-content: start; }
.rev-card__head { display: flex; justify-content: space-between; align-items: center; font-size: var(--e-fs-micro); color: var(--e-ink-faint); }
.rev-card__name { font-weight: var(--e-w-semi); color: var(--e-ink); }
.rev-card__verified { color: var(--e-success); }
@media (max-width: 989px) { .rev-grid { grid-template-columns: 1fr; } .rev-summary { grid-template-columns: 1fr; gap: var(--e-s5); } }
/* Placeholder scaffolding — sample content, visibly marked. */
[data-synthetic="true"] { position: relative; }
.synthetic-note {
font-size: var(--e-fs-micro); color: var(--e-ink-faint); text-align: center;
border: 1px dashed var(--e-blush); border-radius: var(--e-r-btn);
padding: var(--e-s3); margin-top: var(--e-s5);
}
/* ---------- GUARANTEE ---------- */
.guarantee { display: grid; grid-template-columns: auto 1fr; gap: var(--e-s6); align-items: center; }
.guarantee__seal { width: 18rem; max-width: 40vw; }
@media (max-width: 749px) { .guarantee { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: var(--e-s5); } }
/* ---------- PULL QUOTE ---------- */
.pullquote { text-align: center; max-width: 76rem; margin-inline: auto; }
.pullquote blockquote {
font-family: var(--e-font-display); font-size: var(--e-fs-h2);
color: var(--e-maroon); line-height: 1.3; margin: 0 0 var(--e-s4);
}
.pullquote cite { font-style: normal; font-size: var(--e-fs-small); color: var(--e-ink-soft); letter-spacing: .1em; text-transform: uppercase; }
/* ---------- ARTICLE / ADVERTORIAL ---------- */
.article { padding-block: var(--e-s6); }
.article__kicker { font-size: var(--e-fs-micro); letter-spacing: .16em; text-transform: uppercase; color: var(--e-rose); }
.article__byline { display: flex; flex-wrap: wrap; gap: var(--e-s3); align-items: center; font-size: var(--e-fs-micro); color: var(--e-ink-faint); margin-bottom: var(--e-s6); padding-bottom: var(--e-s4); border-bottom: 1px solid var(--e-hairline); }
.article__disclosure { background: var(--e-tint-2); border-radius: var(--e-r-btn); padding: var(--e-s3) var(--e-s4); font-size: var(--e-fs-micro); color: var(--e-ink-soft); margin-bottom: var(--e-s6); }
.article p { margin: 0 0 var(--e-s4); }
.article h2 { margin-top: var(--e-s6); }
.article figure { margin: var(--e-s6) 0; }
.article figcaption { font-size: var(--e-fs-micro); color: var(--e-ink-faint); text-align: center; margin-top: var(--e-s2); }
.article__highlight { background: linear-gradient(180deg, transparent 58%, rgba(217,138,152,.45) 58%); }
/* Inline CTA block dropped between article beats */
.inline-cta {
background: var(--e-cream); border-radius: var(--e-r-tile);
padding: var(--e-s5); text-align: center; margin: var(--e-s6) 0;
display: grid; gap: var(--e-s4); justify-items: center;
}
.inline-cta h3 { margin: 0; }
.inline-cta p { max-width: 52ch; color: var(--e-ink-soft); margin: 0; }
/* Numbered listicle item */
.listicle-item { display: grid; gap: var(--e-s3); padding-block: var(--e-s5); border-bottom: 1px solid var(--e-hairline); }
.listicle-item__n {
font-family: var(--e-font-display); font-size: 5.6rem; line-height: 1;
color: var(--e-blush);
}
/* Ranking card */
.rank-card { display: grid; grid-template-columns: auto 1fr auto; gap: var(--e-s5); align-items: center; background: var(--e-surface); border-radius: var(--e-r-card); padding: var(--e-s5); }
.rank-card--top { border: 2px solid var(--e-rose); }
.rank-card__badge { font-family: var(--e-font-display); font-size: 3.2rem; color: var(--e-rose); }
.rank-card__score { font-size: var(--e-fs-h3); font-weight: var(--e-w-semi); color: var(--e-maroon); font-family: var(--e-font-body); }
@media (max-width: 749px) { .rank-card { grid-template-columns: auto 1fr; } }
/* ---------- QUIZ ---------- */
.quiz { max-width: 68rem; margin-inline: auto; text-align: center; }
.quiz__progress { height: 6px; background: var(--e-tint-3); border-radius: var(--e-r-pill); overflow: hidden; margin-bottom: var(--e-s6); }
.quiz__progress-fill { height: 100%; background: var(--e-rose); transition: width var(--e-dur-med) var(--e-ease); }
.quiz__options { display: grid; gap: var(--e-s3); margin-top: var(--e-s6); }
.quiz__option {
padding: var(--e-s5); border: 2px solid var(--e-hairline); border-radius: var(--e-r-card);
background: var(--e-surface); cursor: pointer; font-size: var(--e-fs-body); text-align: left;
transition: border-color var(--e-dur) var(--e-ease), background var(--e-dur) var(--e-ease);
}
.quiz__option:hover { border-color: var(--e-rose); background: var(--e-tint-1); }
.quiz__step[hidden] { display: none; }
/* ---------- FORMS ----------
Element-scoped so any form picks these up without per-field classes.
(Added after the support pages shipped with repeated inline styles.) */
.field { display: grid; gap: var(--e-s2); margin-bottom: var(--e-s4); }
.field > label,
form label:not(.ftr__consent):not(.visually-hidden) {
font-size: var(--e-fs-small); font-weight: var(--e-w-med); color: var(--e-maroon);
}
main input[type="text"], main input[type="email"], main input[type="tel"],
main input[type="search"], main select, main textarea {
width: 100%;
min-height: 5rem;
padding: var(--e-s3) var(--e-s4);
background: var(--e-surface);
border: 1px solid var(--e-hairline);
border-radius: var(--e-r-btn);
font-family: var(--e-font-body);
font-size: var(--e-fs-body);
color: var(--e-ink);
transition: border-color var(--e-dur) var(--e-ease), box-shadow var(--e-dur) var(--e-ease);
}
main textarea { min-height: 14rem; resize: vertical; padding-top: var(--e-s3); }
main input::placeholder, main textarea::placeholder { color: var(--e-ink-faint); }
main input:focus, main select:focus, main textarea:focus {
outline: none;
border-color: var(--e-rose);
box-shadow: 0 0 0 3px rgba(188,58,80,.12);
}
.field__hint { font-size: var(--e-fs-micro); color: var(--e-ink-faint); }
/* Ghost buttons sitting on the wine band need cream, not maroon, to stay legible */
.band-wine .btn--ghost { color: var(--e-cream); border-color: rgba(247,239,230,.5); }
.band-wine .btn--ghost:hover { background: var(--e-cream); color: var(--e-maroon); }
/* ---------- FOOTER ---------- */
.ftr { background: var(--e-maroon); color: var(--e-cream); margin-top: var(--e-s6); }
.ftr__top { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr 1.4fr; gap: var(--e-s6); padding-block: var(--e-s7); }
.ftr__wordmark { display: block; font-family: var(--e-font-display); font-size: 2.9rem; letter-spacing: .02em; }
/* Blush on the plum footer measured 2.96:1. The reversed treatment is cream. */
.ftr__sub { display: block; font-size: 1rem; letter-spacing: .3em; text-transform: uppercase; color: rgba(246,243,237,.82); margin-top: .4rem; }
.ftr__blurb { font-size: var(--e-fs-small); color: rgba(247,239,230,.75); margin: var(--e-s4) 0; max-width: 32ch; }
.ftr__social { display: flex; gap: var(--e-s3); }
.ftr__social a { color: var(--e-cream); text-decoration: none; font-size: var(--e-fs-micro); letter-spacing: .1em; border: 1px solid rgba(247,239,230,.3); border-radius: var(--e-r-pill); padding: .6rem 1rem; }
.ftr h4 { color: var(--e-cream); font-family: var(--e-font-body); font-size: var(--e-fs-micro); letter-spacing: .16em; text-transform: uppercase; margin-bottom: var(--e-s4); }
.ftr__col { display: grid; gap: var(--e-s3); align-content: start; }
.ftr__col a { color: rgba(247,239,230,.8); text-decoration: none; font-size: var(--e-fs-small); }
.ftr__col a:hover { color: var(--e-cream); text-decoration: underline; }
.ftr__news p { font-size: var(--e-fs-small); color: rgba(247,239,230,.75); margin-bottom: var(--e-s4); }
.ftr__form { display: flex; gap: var(--e-s2); }
.ftr__form input { flex: 1; min-height: 4.8rem; padding: 0 var(--e-s4); border: 1px solid rgba(247,239,230,.3); border-radius: var(--e-r-btn); background: rgba(247,239,230,.08); color: var(--e-cream); font-family: var(--e-font-body); font-size: var(--e-fs-small); }
.ftr__form input::placeholder { color: rgba(247,239,230,.5); }
.ftr__form .btn--primary { background: var(--e-cream); color: var(--e-maroon); min-height: 4.8rem; padding-inline: var(--e-s5); }
.ftr__consent { display: flex; gap: var(--e-s2); align-items: flex-start; font-size: var(--e-fs-micro); color: rgba(247,239,230,.65); margin-top: var(--e-s3); }
.ftr__bottom { border-top: 1px solid rgba(247,239,230,.18); padding-block: var(--e-s5); }
.ftr__bottom-inner { display: flex; flex-wrap: wrap; gap: var(--e-s4); align-items: center; justify-content: space-between; }
.ftr__legal, .ftr__policies a, .ftr__pay span { font-size: var(--e-fs-micro); color: rgba(247,239,230,.7); }
.ftr__policies { display: flex; gap: var(--e-s4); flex-wrap: wrap; }
.ftr__policies a { text-decoration: none; }
.ftr__pay { display: flex; gap: var(--e-s2); flex-wrap: wrap; }
.ftr__pay span { border: 1px solid rgba(247,239,230,.25); border-radius: .4rem; padding: .3rem .7rem; }
.ftr__disclaimer { font-size: var(--e-fs-micro); color: rgba(247,239,230,.55); line-height: 1.6; margin-top: var(--e-s5); max-width: 100ch; }
@media (max-width: 989px) { .ftr__top { grid-template-columns: 1fr 1fr; gap: var(--e-s6); } }
@media (max-width: 599px) { .ftr__top { grid-template-columns: 1fr; } }
/* ---------- v2 PDP: side thumb rail + sliding main stage ----------
Appended LAST so these win the cascade over the base .pdp__thumbs rules. */
.pdp__row { display: grid; grid-template-columns: 7.6rem 1fr; gap: var(--e-s3); align-items: start; }
.pdp__thumbs.pdp__thumbs--side { display: grid; grid-template-columns: 1fr; gap: var(--e-s2); align-content: start; }
.pdp__thumbs.pdp__thumbs--side .pdp__thumb { width: 100%; }
.pdp__thumbs.pdp__thumbs--side .pdp__thumb img { width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block; }
.pdp__stage { position: relative; overflow: hidden; border-radius: var(--e-r-media); background: var(--e-tint-2); }
.pdp__trackk { display: flex; transition: transform .45s var(--e-ease); }
.pdp__trackk > img { width: 100%; flex: 0 0 100%; object-fit: cover; display: block; height: clamp(30rem, calc(100vh - 20rem), 56rem); }
.pdp__navbtn {
position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
width: 3.8rem; height: 3.8rem; border-radius: 50%; border: 0; cursor: pointer;
background: rgba(253,251,245,.85); color: var(--e-heading); font-size: 1.6rem;
display: grid; place-items: center; box-shadow: var(--e-shadow-sm);
}
.pdp__navbtn:hover { background: #fff; }
.pdp__navbtn--prev { left: var(--e-s3); } .pdp__navbtn--next { right: var(--e-s3); }
@media (max-width: 989px) {
.pdp__row { grid-template-columns: 1fr; }
.pdp__thumbs.pdp__thumbs--side { grid-template-columns: repeat(6, 1fr); order: 2; }
.pdp__trackk > img { height: auto; aspect-ratio: 1/1; max-height: 58vh; }
}
/* ⚠ TABLET DEAD ZONE. .desktop-only (the nav) hides at <=989px but .mobile-only
(the burger) hides at >=600px, so between 600px and 989px the header had NO
navigation at all: no nav links and no burger. Give the burger its own rule so
it appears exactly where the nav disappears. Scoped to the burger so the
sticky buy bar keeps its own .mobile-only behaviour. */
@media (max-width: 989px) { .hdr__burger { display: grid !important; } }
/* ---------- CART DRAWER (shared) ----------
Was only present on index.html, so the cart button in the header did nothing on
every other page including all three PDPs. Now rendered from the shell. */
.cartdrawer__panel { left: auto; right: 0; gap: var(--e-s4); }
.cartgift { background: var(--e-tint-3); border-radius: var(--e-r-card); padding: var(--e-s4); }
.cartgift__msg { font-size: var(--e-fs-small); color: var(--e-ink); margin-bottom: var(--e-s3); }
.cartgift__msg b { color: var(--e-wine); }
.cartgift__track { display: block; height: 8px; border-radius: var(--e-r-pill);
background: rgba(16,20,24,.10); overflow: hidden; }
.cartgift__track i { display: block; height: 100%; border-radius: var(--e-r-pill);
background: var(--e-rose); transition: width .5s var(--e-ease); }
.cartgift__steps { display: flex; justify-content: space-between; margin-top: var(--e-s2);
font-size: var(--e-fs-micro); color: var(--e-ink-faint); }
.cartgift__steps .on { color: var(--e-wine); font-weight: var(--e-w-semi); }
.cartline { display: grid; grid-template-columns: 6.4rem 1fr auto; gap: var(--e-s3);
align-items: center; border: 1px solid var(--e-hairline); border-radius: var(--e-r-card);
padding: var(--e-s3); }
.cartline__img { width: 100%; border-radius: .8rem; background: var(--e-tint-2); }
.cartline__body { display: grid; gap: .3rem; min-width: 0; }
.cartline__name { font-weight: var(--e-w-semi); font-size: var(--e-fs-small); }
.cartline__meta { font-size: var(--e-fs-micro); color: var(--e-ink-soft); }
.cartline__gift { font-size: var(--e-fs-micro); color: var(--e-success); }
.cartline__price { font-weight: var(--e-w-bold); color: var(--e-wine); }
.cartfoot { margin-top: auto; display: grid; gap: var(--e-s2); }
.cartfoot__row { display: flex; justify-content: space-between; font-size: var(--e-fs-small); }
.cartfoot__row--muted { color: var(--e-ink-soft); }
.cartfoot__cta { margin-top: var(--e-s2); }
/* ---------- LINKS ----------
No rule set a link colour anywhere, so any anchor that carried its own text
instead of a styled child rendered in the browser default #0000EE. */
a { color: inherit; }
.prose a, p a, li a, td a {
color: var(--e-wine); text-decoration: underline;
text-underline-offset: .25em; text-decoration-thickness: 1px;
text-decoration-color: rgba(200,16,46,.4); transition: color var(--e-dur) var(--e-ease);
}
.prose a:hover, p a:hover, li a:hover, td a:hover {
color: var(--e-rose); text-decoration-color: currentColor;
}
.band-wine .prose a, .band-wine p a, .band-wine li a {
color: var(--e-cream); text-decoration-color: rgba(246,243,237,.45);
}
.band-wine .prose a:hover, .band-wine p a:hover, .band-wine li a:hover { color: #fff; }
/* Anchors that wrap a whole card or button must not pick up the underline. */
a.btn, a.card, a.rtier, a.hdr__logo, a.ftr__logo, .grid a, nav a { text-decoration: none; }
/* VASA: the drawer links were plain text rows and read as unstyled. A chevron, a firmer
weight and a taller tap target make them read as navigation without changing structure. */
.drawer__nav a {
display: flex; align-items: center; justify-content: space-between;
font-weight: 600; letter-spacing: -.01em; min-height: 4.6rem;
}
.drawer__nav a::after {
content: "›"; font-size: 2.2rem; line-height: 1; color: var(--e-rose);
opacity: .55; transform: translateY(-.1rem);
}
.drawer__nav a:hover, .drawer__nav a:focus-visible { color: var(--e-rose); }
.drawer__nav a:hover::after { opacity: 1; }
/* ==================== blocks.css ==================== */
/* ============================================================================
ELARISS — block library
The structural section components catalogued in the teardown
(research/site-teardowns/officialquasi/page-architecture-core.md §2 + §8),
re-implemented on Elariss tokens. Depends on tokens.css + components.css.
============================================================================ */
/* ---------- PROOF PILL (sits above the H1) ---------- */
.proofpill {
display: inline-flex; align-items: center; gap: var(--e-s3);
background: var(--e-surface); border-radius: var(--e-r-pill);
padding: .8rem 1.8rem .8rem .8rem; box-shadow: var(--e-shadow-sm);
margin-bottom: var(--e-s4);
}
.proofpill__avatars { display: flex; }
.proofpill__avatars span {
width: 3rem; height: 3rem; border-radius: 50%;
border: 2px solid var(--e-surface); margin-right: -1rem;
background: var(--e-tint-4); display: grid; place-items: center;
font-size: 1.1rem; color: var(--e-wine); font-weight: var(--e-w-semi);
}
.proofpill__avatars span:last-child { margin-right: 0; }
.proofpill__txt { font-size: var(--e-fs-micro); font-weight: var(--e-w-med); color: var(--e-ink); }
/* ---------- BENEFIT TRIO (hero) ---------- */
.btrio { display: grid; gap: var(--e-s3); margin: var(--e-s5) 0; }
.btrio__row { display: flex; align-items: center; gap: var(--e-s3); }
.btrio__chip {
width: 3.6rem; height: 3.6rem; border-radius: 50%; flex: none;
background: var(--e-tint-3); color: var(--e-wine);
display: grid; place-items: center; font-size: 1.6rem;
}
.btrio__txt { font-size: var(--e-fs-small); font-weight: var(--e-w-med); color: var(--e-ink); }
/* ---------- MARQUEE BAND ----------
Slimmed 2026-07-23: this was 105px tall (16px padding a side + a 20px label +
an 8px gap + a 33px track), which is a lot of vertical weight for a decorative
strip that sits between two content sections. It read as a slab rather than a
ribbon. Now ~58px: tighter padding, a smaller label sitting closer to the track,
and a display face two steps down. Measured, not eyeballed. */
.marquee {
background: linear-gradient(90deg, var(--e-wine), var(--e-maroon));
color: var(--e-cream); overflow: hidden; padding: .7rem 0;
}
.marquee__label {
text-align: center; font-size: .95rem; letter-spacing: .22em; line-height: 1.3;
text-transform: uppercase; color: var(--e-blush); margin-bottom: .1rem;
}
.marquee__track { display: flex; gap: var(--e-s6); width: max-content; animation: e-marquee 80s linear infinite; }
.marquee__item {
font-family: var(--e-font-display); font-size: 1.6rem; line-height: 1.5;
letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; opacity: .92;
}
@keyframes e-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; } }
/* ---------- TRENDING ROW ---------- */
.trend { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e-s5); }
.trend__card { background: var(--e-surface); border-radius: var(--e-r-tile); overflow: hidden; display: grid; align-content: start; }
.trend__media img { width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block; }
.trend__body { padding: var(--e-s5); display: grid; gap: var(--e-s3); }
.trend__rating { display: flex; align-items: center; gap: var(--e-s2); font-size: var(--e-fs-micro); color: var(--e-ink-soft); }
.trend__name { font-family: var(--e-font-display); font-size: var(--e-fs-h4); color: var(--e-maroon); }
.trend__desc { font-size: var(--e-fs-small); color: var(--e-ink-soft); }
.trend__pills { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-s2); }
.trend__pill {
background: var(--e-tint-2); color: var(--e-wine); border-radius: var(--e-r-btn);
padding: .7rem 1rem; font-size: 1.1rem; font-weight: var(--e-w-med); text-align: center;
}
.tag-new { background: var(--e-success); color: #fff; border-radius: var(--e-r-pill); padding: .3rem .9rem; font-size: 1rem; font-weight: var(--e-w-semi); letter-spacing: .08em; }
@media (max-width: 749px) {
.trend { grid-auto-flow: column; grid-auto-columns: 85%; grid-template-columns: none;
overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--e-s3); }
.trend__card { scroll-snap-align: start; }
}
/* ---------- TRANSFORMATION WALL (masonry) ---------- */
.wall { columns: 4; column-gap: var(--e-s4); }
.wall > * { break-inside: avoid; margin-bottom: var(--e-s4); }
.wall__comment { background: var(--e-surface); border-radius: var(--e-r-card); padding: var(--e-s4); display: grid; gap: var(--e-s3); }
.wall__head { display: flex; align-items: center; gap: var(--e-s3); }
.wall__avatar { width: 3.6rem; height: 3.6rem; border-radius: 50%; background: var(--e-tint-4); flex: none; display: grid; place-items: center; font-size: var(--e-fs-micro); color: var(--e-wine); font-weight: var(--e-w-semi); }
.wall__name { font-size: var(--e-fs-small); font-weight: var(--e-w-semi); color: var(--e-ink); }
.wall__body { font-size: var(--e-fs-small); color: var(--e-ink-soft); }
.wall__acts { display: flex; gap: var(--e-s4); font-size: var(--e-fs-micro); color: var(--e-ink-faint); }
.wall__ba { border-radius: var(--e-r-card); overflow: hidden; position: relative; }
.wall__ba img { width: 100%; display: block; }
.wall__ba-labels { position: absolute; inset: auto 0 0 0; display: flex; }
.wall__ba-labels span { flex: 1; text-align: center; background: rgba(85,16,28,.72); color: var(--e-cream); font-size: 1rem; letter-spacing: .12em; text-transform: uppercase; padding: .5rem; }
@media (max-width: 989px) { .wall { columns: 2; } }
@media (max-width: 599px) { .wall { columns: 1; } }
/* ---------- STAGE TIMELINE (numbered left rail) ---------- */
.stages { max-width: 72rem; margin-inline: auto; position: relative; padding-left: var(--e-s7); }
.stages::before { content: ""; position: absolute; left: 1.8rem; top: 1rem; bottom: 1rem; width: 2px; background: var(--e-blush); }
.stage { position: relative; padding-bottom: var(--e-s6); }
.stage__dot {
position: absolute; left: calc(-1 * var(--e-s7)); top: 0;
width: 3.6rem; height: 3.6rem; border-radius: 50%;
background: var(--e-tint-0); border: 2px solid var(--e-rose); color: var(--e-rose);
display: grid; place-items: center; font-family: var(--e-font-display); font-size: 1.8rem;
}
.stage__badge {
display: inline-block; background: var(--e-maroon); color: var(--e-cream);
font-size: 1rem; font-weight: var(--e-w-semi); letter-spacing: .12em; text-transform: uppercase;
padding: .5rem 1.1rem; border-radius: var(--e-r-pill); margin-bottom: var(--e-s3);
}
.stage__badge--peak { background: var(--e-rose); }
.stage__quote { font-family: var(--e-font-display); font-style: italic; font-size: var(--e-fs-h3); color: var(--e-maroon); margin-bottom: var(--e-s3); }
.stage__body { font-size: var(--e-fs-body); color: var(--e-ink-soft); max-width: 62ch; }
.stage__body strong { color: var(--e-ink); font-weight: var(--e-w-semi); }
.stage__body .hi { color: var(--e-rose); }
.stages__close {
background: linear-gradient(135deg, #3A3A3E, #1A1B1E); color: #F6F3ED;
--e-ink:#F6F3ED; --e-ink-soft:rgba(246,243,237,.78); --e-heading:#F6F3ED; --e-star:#E0B75B; --e-rose:#C99A4B;
border-radius: var(--e-r-tile); padding: var(--e-s6); text-align: center; display: grid; gap: var(--e-s3); justify-items: center;
}
.stages__close h3 { color: var(--e-cream); margin: 0; }
.stages__close p { color: rgba(247,239,230,.82); max-width: 48ch; margin: 0; font-size: var(--e-fs-small); }
.stages__close .btn { background: var(--e-cream); color: var(--e-maroon); }
/* ---------- STANDARDS ---------- */
.standards__pills { display: grid; gap: var(--e-s3); margin-top: var(--e-s5); }
.standards__pill {
background: var(--e-surface); border-radius: var(--e-r-btn); padding: var(--e-s4) var(--e-s5);
display: flex; align-items: center; gap: var(--e-s3); font-weight: var(--e-w-med); color: var(--e-maroon);
font-size: var(--e-fs-small);
}
.standards__pill span:first-child { color: var(--e-rose); font-size: 1.8rem; line-height: 1; }
/* ---------- UGC RAIL ---------- */
.ugc-rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(25rem, 1fr); gap: var(--e-s4); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--e-s3); }
.ugc-card { scroll-snap-align: start; border-radius: var(--e-r-media); overflow: hidden; position: relative; background: var(--e-tint-3); aspect-ratio: 9/16; }
.ugc-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ugc-card__play {
position: absolute; inset: 0; display: grid; place-items: center;
background: linear-gradient(180deg, rgba(85,16,28,0) 55%, rgba(85,16,28,.55));
color: #fff; font-size: 3.6rem;
}
.ugc-card__cap { position: absolute; left: var(--e-s3); right: var(--e-s3); bottom: var(--e-s3); color: #fff; font-size: var(--e-fs-micro); font-weight: var(--e-w-semi); text-shadow: 0 1px 4px rgba(0,0,0,.5); }
@media (max-width: 749px) { .ugc-rail { grid-auto-columns: 62%; } }
/* ---------- FOUNDER STORY ---------- */
.story__byline { display: flex; align-items: center; gap: var(--e-s3); margin-bottom: var(--e-s5); }
.story__avatar { width: 6rem; height: 6rem; border-radius: 50%; object-fit: cover; }
.story__who { display: grid; }
.story__name { font-family: var(--e-font-display); font-size: var(--e-fs-h4); color: var(--e-maroon); }
.story__role { font-size: var(--e-fs-micro); letter-spacing: .16em; text-transform: uppercase; color: var(--e-rose); }
.story__beat { margin-bottom: var(--e-s4); color: var(--e-ink-soft); }
.story__today { background: var(--e-surface); border-radius: var(--e-r-card); padding: var(--e-s5); display: grid; gap: var(--e-s3); margin-top: var(--e-s5); }
.story__today li { list-style: none; font-size: var(--e-fs-small); }
.story__today li::before { content: "✓"; color: var(--e-rose); font-weight: var(--e-w-bold); margin-right: .8rem; }
/* ---------- REVIEW CAROUSEL (with before/after) ---------- */
.revrail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(34rem, 1fr); gap: var(--e-s5); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--e-s3); }
.revrail .rev-card { scroll-snap-align: start; padding: 0; overflow: hidden; }
.revrail__media { position: relative; }
.revrail__media img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
.revrail__labels { position: absolute; inset: auto 0 0 0; display: flex; }
.revrail__labels span { flex: 1; text-align: center; background: rgba(85,16,28,.72); color: var(--e-cream); font-size: 1rem; letter-spacing: .14em; text-transform: uppercase; padding: .6rem; }
.revrail__body { padding: var(--e-s5); display: grid; gap: var(--e-s3); }
.revrail__title { font-weight: var(--e-w-semi); color: var(--e-rose); font-size: var(--e-fs-body); }
.chip-verified { background: var(--e-tint-3); color: var(--e-wine); border-radius: var(--e-r-pill); padding: .3rem .9rem; font-size: 1rem; font-weight: var(--e-w-med); }
@media (max-width: 749px) { .revrail { grid-auto-columns: 84%; } }
/* ---------- SECTION ARROWS ---------- */
.sec-arrows { display: flex; gap: var(--e-s2); justify-content: flex-end; margin-bottom: var(--e-s4); }
.sec-arrows button {
width: 4.4rem; height: 4.4rem; border-radius: 50%; border: 1px solid var(--e-hairline);
background: var(--e-surface); color: var(--e-maroon); font-size: 1.8rem; cursor: pointer;
}
.sec-arrows button:hover { background: var(--e-maroon); color: var(--e-cream); }
/* ---------- FINAL GUARANTEE ---------- */
.finalg { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-s6); align-items: center; }
.finalg__card { background: var(--e-surface); border-radius: var(--e-r-tile); padding: var(--e-s6); display: grid; gap: var(--e-s4); justify-items: start; }
.finalg__seal { width: 12rem; }
@media (max-width: 989px) { .finalg { grid-template-columns: 1fr; } }
/* ---------- HERO ground ----------
Built from the brand tints rather than a generated image, so it can never
drift off-palette. Soft cream at the left, warmest rose tint bottom-right,
with a faint bloom behind the copy column. */
.hero--bleed {
position: relative; overflow: hidden;
background:
radial-gradient(120% 90% at 12% 15%, rgba(255,255,255,.85) 0%, rgba(255,255,255,0) 55%),
linear-gradient(135deg, var(--e-tint-0) 0%, var(--e-tint-2) 42%, var(--e-tint-4) 100%);
}
.hero--bleed .container { position: relative; z-index: 1; }
/* ---------- BEFORE / AFTER SPLIT ----------
Two real images side by side, each carrying its own label. The earlier
version put both labels over a single photo, which read as nonsense. */
.ba { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; border-radius: var(--e-r-card); overflow: hidden; }
.ba figure { margin: 0; position: relative; }
.ba img { width: 100%; aspect-ratio: 4/5; object-fit: cover; display: block; }
.ba figcaption {
position: absolute; left: 0; right: 0; bottom: 0; text-align: center;
background: rgba(85,16,28,.74); color: var(--e-cream);
font-size: 1rem; letter-spacing: .14em; text-transform: uppercase; padding: .55rem;
}
.revrail__media .ba img { aspect-ratio: 1/1; }
/* ============================================================================
SAFETY BAND (.rsrch) — inherited as the H2 research band, repurposed as the interaction-caution band: full-bleed animated
organic ground, centred display headline, pill CTA, four glass stat cards.
Background is pure CSS (layered radial gradients + slow drift), so the block
ships with no external asset and costs no image credits.
============================================================================ */
.rsrch{position:relative;overflow:hidden;background:#1A1B1E;color:#F6F3ED;isolation:isolate;}
.rsrch::before{content:"";position:absolute;inset:-25%;z-index:-2;
background:
radial-gradient(40% 55% at 20% 30%, rgba(200,16,46,.55), transparent 60%),
radial-gradient(45% 50% at 78% 22%, rgba(122,16,32,.55), transparent 62%),
radial-gradient(55% 60% at 55% 88%, rgba(26,27,30,.85), transparent 65%),
radial-gradient(35% 45% at 88% 78%, rgba(239,179,174,.32), transparent 60%);
filter:blur(34px);
animation:rsrch-drift 26s ease-in-out infinite alternate;}
/* fine grain so the gradient never reads as a flat CSS blob */
.rsrch::after{content:"";position:absolute;inset:0;z-index:-1;opacity:.16;pointer-events:none;
background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.05) 0 1px,transparent 1px 3px);}
@keyframes rsrch-drift{
0%{transform:translate3d(-2%,-1%,0) scale(1.06);}
50%{transform:translate3d(2%,2%,0) scale(1.14);}
100%{transform:translate3d(-1%,1%,0) scale(1.07);}}
.rsrch__in{position:relative;text-align:center;max-width:104rem;margin-inline:auto;}
.rsrch h2{color:#fff;margin:0;font-family:var(--e-font-display);font-weight:400;}
.rsrch h2 em{font-style:italic;color:#EFB3AE;}
.rsrch__lead{color:rgba(246,243,237,.78);font-size:var(--e-fs-small);max-width:62ch;
margin:var(--e-s4) auto 0;line-height:1.7;}
.rsrch__cta{display:inline-block;margin-top:var(--e-s5);background:#fff;color:#272629;
font-family:var(--e-font-mono);font-size:1.15rem;font-weight:700;letter-spacing:.14em;
text-transform:uppercase;padding:1.3rem 3rem;border-radius:var(--e-r-pill);
text-decoration:none;transition:transform var(--e-dur) var(--e-ease),box-shadow var(--e-dur) var(--e-ease);}
.rsrch__cta:hover{transform:translateY(-2px);box-shadow:0 8px 26px rgba(0,0,0,.28);}
.rsrch__grid{display:grid;grid-template-columns:1fr;gap:var(--e-s3);margin-top:var(--e-s7);}
@media(min-width:620px){.rsrch__grid{grid-template-columns:repeat(2,1fr);}}
@media(min-width:990px){.rsrch__grid{grid-template-columns:repeat(4,1fr);}}
.rsrch__card{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.15);
border-radius:1.4rem;padding:var(--e-s5) var(--e-s4);backdrop-filter:blur(8px);
-webkit-backdrop-filter:blur(8px);
opacity:0;transform:translateY(18px);
transition:opacity .7s var(--e-ease),transform .7s var(--e-ease);}
.rsrch__card.is-in{opacity:1;transform:none;}
.rsrch__ct{font-family:var(--e-font-display);font-style:italic;font-size:1.9rem;
color:#fff;line-height:1.2;}
.rsrch__n{display:block;margin:var(--e-s3) 0 var(--e-s2);font-family:var(--e-font-display);
font-weight:700;font-size:clamp(3.4rem,6vw,4.6rem);line-height:1;color:#EFB3AE;
font-variant-numeric:tabular-nums;}
.rsrch__k{font-size:1.25rem;color:rgba(246,243,237,.72);line-height:1.55;margin:0;}
.rsrch__foot{margin-top:var(--e-s6);font-size:1.1rem;color:rgba(246,243,237,.52);
max-width:70ch;margin-inline:auto;line-height:1.6;}
@media(prefers-reduced-motion:reduce){
.rsrch::before{animation:none;}
.rsrch__card{opacity:1;transform:none;transition:none;}}
/* ============================================================================
.grid--swipe — on phones the format picker reads far better as a side-to-side
swipe than as a vertical stack: the three products stay comparable without a
long scroll, and the partial next card signals that more exist. Scoped with
its own modifier so the review and ingredient grids keep stacking.
============================================================================ */
@media (max-width: 749px) {
.grid--swipe {
grid-template-columns: none;
grid-auto-flow: column;
grid-auto-columns: 82%;
overflow-x: auto;
overscroll-behavior-x: contain;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scroll-padding-inline: var(--e-pad-x-mobile, 24px);
padding-bottom: var(--e-s3);
scrollbar-width: none;
}
.grid--swipe::-webkit-scrollbar { display: none; }
.grid--swipe > * { scroll-snap-align: center; }
}
/* ============================================================================
MOBILE COMPACTION (2026-07-25) — phone layouts were running long: full
desktop section rhythm plus a 4-row stats stack meant a lot of scrolling for
not much content. Tightened per Kevin. Desktop is untouched.
============================================================================ */
@media (max-width: 749px) {
:root { --e-section-y: 2.2rem; --e-section-y-tight: 1.4rem; }
/* the stats read fine 2-up on a phone and save two full rows of scroll */
.statsband { grid-template-columns: repeat(2, 1fr); gap: var(--e-s5) var(--e-s4); }
.statsband__n { font-size: clamp(2.8rem, 7.5vw, 3.8rem); }
.statsband__k { font-size: 1.2rem; line-height: 1.4; }
/* section headers carried desktop-sized breathing room */
.sec-head { margin-bottom: var(--e-s4); }
/* the FDA line is legal furniture; give it the minimum it needs */
.disclaimer { padding-block: var(--e-s2); }
.disclaimer p { font-size: 1.1rem; line-height: 1.45; }
}
/* The us-vs-them table wraps to many short lines on a phone, so desktop cell
padding turned it into a very tall block. Tighten it on small screens. */
@media (max-width: 749px) {
.vs th, .vs td { padding: var(--e-s2) var(--e-s2); font-size: 1.15rem; line-height: 1.3; }
.vs td.k { font-size: 1.2rem; }
}
/* ---------- SINGLE-PRODUCT PANEL ----------
A one-SKU line does not get a card grid. It gets one product, given room. */
.oneprod{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(2.4rem,4vw,6rem);
align-items:center;background:var(--e-surface);border:1px solid var(--e-hairline);
border-radius:var(--e-r-tile);overflow:hidden}
.oneprod__media{position:relative;display:block;background:var(--e-tint-3)}
.oneprod__media img{width:100%;display:block;aspect-ratio:1/1;object-fit:cover}
.oneprod__flag{position:absolute;top:var(--e-s4);left:var(--e-s4);background:var(--e-maroon);
color:#fff;font-family:var(--e-font-mono);font-size:1rem;letter-spacing:.14em;
text-transform:uppercase;padding:.6rem 1.4rem;border-radius:var(--e-r-pill)}
.oneprod__body{padding:clamp(2rem,3vw,4rem) clamp(2rem,3vw,4rem) clamp(2rem,3vw,4rem) 0;
display:grid;gap:var(--e-s3)}
.oneprod__body h2{font-size:clamp(2.8rem,1.9rem+2.2vw,4.4rem);line-height:1.05;margin:0}
.oneprod__lead{color:var(--e-ink-soft);max-width:46ch;margin:0}
.oneprod__spec{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:var(--e-s2);
margin:var(--e-s2) 0;padding:var(--e-s3) 0;border-top:1px solid var(--e-hairline);
border-bottom:1px solid var(--e-hairline)}
.oneprod__spec li{display:grid;gap:.2rem}
.oneprod__spec b{font-family:var(--e-font-display);font-size:2.2rem;color:var(--e-wine);line-height:1}
.oneprod__spec span{font-size:1.1rem;color:var(--e-ink-faint);line-height:1.3}
.oneprod__buy{display:flex;align-items:center;gap:var(--e-s4);flex-wrap:wrap}
.oneprod__price{font-family:var(--e-font-display);font-size:2.6rem;color:var(--e-wine);font-weight:600}
.oneprod__buy .btn{flex:1;min-width:22rem}
.oneprod__micro{font-size:1.15rem;color:var(--e-ink-faint);margin:0;line-height:1.5}
/* the sixty-second sequence */
.seq60{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--e-s3);
margin:var(--e-s6) 0 var(--e-s3);padding:0;counter-reset:s}
.seq60 li{background:var(--e-tint-3);border-radius:var(--e-r-card);padding:var(--e-s5);
display:grid;gap:var(--e-s2);align-content:start}
.seq60 b{font-family:var(--e-font-mono);font-size:1.1rem;letter-spacing:.16em;color:var(--e-rose)}
.seq60 span{font-size:var(--e-fs-small);color:var(--e-ink);line-height:1.45}
.seq60__note{text-align:center;color:var(--e-ink-faint);font-size:var(--e-fs-small);
max-width:60ch;margin:0 auto}
@media (max-width:989px){
.oneprod{grid-template-columns:1fr;gap:0}
.oneprod__body{padding:var(--e-s5)}
.oneprod__spec{grid-template-columns:repeat(2,1fr);gap:var(--e-s3)}
.oneprod__buy .btn{min-width:0;width:100%}
.seq60{grid-template-columns:1fr;gap:var(--e-s2);margin-top:var(--e-s5)}
.seq60 li{padding:var(--e-s4)}
}
/* ============================================================
RITUAL LADDER — one product, one panel. The pack ladder is a
selector inside the panel rather than three cloned cards, and
the per-glass readout pays off the section's own promise that
committing longer makes each glass cheaper.
============================================================ */
.rit{display:grid;grid-template-columns:1.02fr 1fr;gap:clamp(2rem,3.6vw,5rem);align-items:center;
background:var(--e-surface);border-radius:var(--e-r-tile);overflow:hidden;
box-shadow:0 30px 70px -50px rgba(39,38,41,.55)}
.rit__media{position:relative;align-self:stretch;display:grid;place-items:center;
background:linear-gradient(160deg,#E3DFD8 0%,#DBD6CA 55%,#EFE2DC 100%)}
.rit__stage{position:relative;width:100%;aspect-ratio:1/1;display:grid;place-items:center}
.rit__stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:8%;
opacity:0;transform:scale(.97);transition:opacity var(--e-dur-med) var(--e-ease),transform var(--e-dur-med) var(--e-ease)}
.rit__stage img.is-on{opacity:1;transform:none}
.rit__flag{position:absolute;top:var(--e-s4);left:var(--e-s4);z-index:2;background:var(--e-maroon);
color:#fff;font-size:1.05rem;font-weight:var(--e-w-bold);letter-spacing:.1em;text-transform:uppercase;
padding:.5rem 1.2rem;border-radius:var(--e-r-pill);opacity:0;transform:translateY(-4px);
transition:opacity var(--e-dur) var(--e-ease),transform var(--e-dur) var(--e-ease)}
.rit__flag.is-on{opacity:1;transform:none}
.rit__count{position:absolute;bottom:var(--e-s4);left:50%;transform:translateX(-50%);display:flex;gap:.5rem}
.rit__pip{width:.7rem;height:.7rem;border-radius:50%;background:rgba(39,38,41,.22);transition:background var(--e-dur) var(--e-ease)}
.rit__pip.is-on{background:var(--e-maroon)}
.rit__body{padding:clamp(2rem,3vw,3.6rem) clamp(2rem,3vw,3.6rem) clamp(2rem,3vw,3.6rem) 0;display:grid;gap:var(--e-s3)}
.rit__eyebrow{font-size:1.15rem;font-weight:var(--e-w-bold);letter-spacing:.14em;text-transform:uppercase;color:var(--e-ink-faint)}
.rit__stars{display:flex;align-items:center;gap:.6rem;font-size:1.3rem;color:var(--e-star)}
.rit__stars span{color:var(--e-ink-faint)}
/* segmented commitment selector */
.rit__seg{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;background:var(--e-cream);
border-radius:var(--e-r-pill);padding:.5rem}
.rit__opt{position:relative;border:0;background:transparent;border-radius:var(--e-r-pill);cursor:pointer;
padding:1rem .6rem;display:grid;gap:.1rem;justify-items:center;line-height:1.15;
transition:background var(--e-dur) var(--e-ease),color var(--e-dur) var(--e-ease);color:var(--e-ink-soft)}
.rit__opt b{font-size:1.45rem;font-weight:var(--e-w-semi)}
.rit__opt small{font-size:1.05rem;color:var(--e-ink-faint)}
.rit__opt:hover{background:rgba(200,16,46,.09)}
.rit__opt.is-on{background:var(--e-maroon);color:#fff}
.rit__opt.is-on small{color:rgba(255,255,255,.75)}
.rit__desc{margin:0;color:var(--e-ink-soft);min-height:4.4rem}
/* price + per-glass readout */
.rit__readout{display:flex;align-items:flex-end;gap:var(--e-s4);flex-wrap:wrap}
.rit__price{font-family:var(--e-font-display);font-size:3.4rem;line-height:1;color:var(--e-maroon);font-weight:600}
.rit__save{background:var(--e-cream);color:var(--e-maroon);font-size:1.15rem;font-weight:var(--e-w-bold);
border-radius:var(--e-r-pill);padding:.4rem 1.1rem;opacity:0;transition:opacity var(--e-dur) var(--e-ease)}
.rit__save.is-on{opacity:1}
.rit__glassbox{margin-left:auto;text-align:right}
.rit__glass{font-family:var(--e-font-display);font-size:2.2rem;line-height:1;color:var(--e-ink)}
.rit__glasslab{font-size:1.05rem;color:var(--e-ink-faint);letter-spacing:.02em}
.rit__bar{height:.6rem;border-radius:var(--e-r-pill);background:var(--e-cream);overflow:hidden}
.rit__bar i{display:block;height:100%;border-radius:var(--e-r-pill);
background:linear-gradient(90deg,var(--e-maroon),var(--e-rose));transition:width var(--e-dur-med) var(--e-ease)}
.rit__gift{display:flex;align-items:center;gap:.8rem;font-size:1.25rem;color:var(--e-ink-soft);
background:var(--e-cream);border-radius:var(--e-r-btn);padding:.9rem 1.2rem;
opacity:0;max-height:0;overflow:hidden;transition:opacity var(--e-dur) var(--e-ease),max-height var(--e-dur-med) var(--e-ease)}
.rit__gift.is-on{opacity:1;max-height:12rem}
.rit__gift svg{width:1.8rem;height:1.8rem;flex:none;stroke:var(--e-maroon);fill:none;stroke-width:1.6}
.rit__micro{font-size:1.15rem;color:var(--e-ink-faint);margin:0;line-height:1.5}
@media (prefers-reduced-motion:reduce){
.rit__stage img,.rit__flag,.rit__bar i,.rit__gift{transition:none}
}
@media (max-width:989px){
.rit{grid-template-columns:1fr;gap:0}
.rit__body{padding:var(--e-s5)}
.rit__stage{aspect-ratio:4/3}
.rit__readout{gap:var(--e-s3)}
.rit__price{font-size:2.8rem}
.rit__glassbox{margin-left:auto}
}
@media (max-width:479px){
.rit__opt b{font-size:1.3rem}
.rit__opt{padding:.8rem .3rem}
.rit__glass{font-size:1.9rem}
}
/* ============================================================================
STATS BAND ON PHONES (Kevin, this pass) — the band ran edge-to-edge, tall and
left-ragged. Give it real side padding, tighten the vertical rhythm, and
centre the figures so the two columns read as a pair.
============================================================================ */
@media (max-width: 749px) {
.band-wine .container { padding-inline: 2.4rem; }
.band-wine .statsband {
text-align: center !important;
gap: var(--e-s4) var(--e-s3);
margin-inline: auto;
}
.band-wine .statsband > div { display: grid; gap: .2rem; justify-items: center; }
.band-wine .statsband__n { font-size: clamp(2.4rem, 6.4vw, 3.2rem); }
.band-wine .statsband__k { font-size: 1.1rem; line-height: 1.35; max-width: 18ch; margin-inline: auto; }
.band-wine .lead { margin-bottom: var(--e-s5) !important; }
.band-wine .statsband + div { margin-top: var(--e-s5) !important; }
}
/* ==================== gadgets.css ==================== */
/* ============================================================================
NUVELLE v2 — gadget layer
The interactive + conversion furniture that differentiates v2 from v1.
Each gadget names its persuasion job (persuasion-codex.md).
============================================================================ */
/* ---------- OFFER COUNTDOWN BAR ----------
Job: Action (Scarcity closes). Counts to local midnight; site.js drives it. */
.countbar {
background: linear-gradient(90deg, #2C1F0E, #3A2A12);
border-block: 1px solid rgba(200,16,46,.35);
padding: var(--e-s2) var(--e-s4);
display: flex; align-items: center; justify-content: center; gap: var(--e-s4);
font-size: var(--e-fs-small); color: var(--e-cream); flex-wrap: wrap; text-align: center;
}
.countbar strong { color: var(--e-rose); font-weight: var(--e-w-bold); }
.countbar__clock { display: inline-flex; gap: .5rem; font-variant-numeric: tabular-nums; }
.countbar__cell {
background: rgba(0,0,0,.45); border: 1px solid rgba(200,16,46,.3);
border-radius: .5rem; padding: .3rem .8rem; min-width: 4.2rem;
font-weight: var(--e-w-bold); font-size: var(--e-fs-body); color: var(--e-star);
}
.countbar__label { font-size: var(--e-fs-micro); color: var(--e-ink-soft); }
/* ---------- LIVE PURCHASE TOAST ----------
Job: Trust (social proof) + Mimetic desire. site.js rotates entries. */
.toast {
position: fixed; left: var(--e-s4); bottom: var(--e-s4); z-index: 80;
background: var(--e-surface); border: 1px solid rgba(200,16,46,.35);
border-radius: var(--e-r-card); box-shadow: var(--e-shadow-md);
display: flex; align-items: center; gap: var(--e-s3);
padding: var(--e-s3) var(--e-s4); max-width: 32rem;
transform: translateY(140%); opacity: 0;
transition: transform .5s var(--e-ease), opacity .5s var(--e-ease);
pointer-events: none;
}
.toast.is-in { transform: none; opacity: 1; }
.toast__img { width: 4.4rem; height: 4.4rem; border-radius: .6rem; object-fit: cover; flex: none; }
.toast__txt { font-size: var(--e-fs-micro); line-height: 1.45; color: var(--e-ink-soft); }
.toast__txt strong { color: var(--e-heading); }
.toast__time { color: var(--e-ink-faint); }
@media (max-width: 599px) { .toast { max-width: calc(100vw - 4.8rem); } }
/* ---------- THE RING TEST DIAL ----------
Job: Commitment & consistency (a micro-yes you can drag) + Novelty/mechanism.
A range input scrubs Day 1 → Day 60; the card crossfades two states and the
caption rewrites. The signature Nuvelle device. */
.ringdial { background: var(--e-surface); border: 1px solid var(--e-hairline); border-radius: var(--e-r-tile); padding: var(--e-s6); }
.ringdial__stage { position: relative; border-radius: var(--e-r-media); overflow: hidden; aspect-ratio: 16/10; }
.ringdial__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .35s var(--e-ease); }
.ringdial__img--after { opacity: 0; }
.ringdial__day {
position: absolute; top: var(--e-s3); left: var(--e-s3);
background: rgba(26,27,30,.8); border: 1px solid rgba(200,16,46,.4);
color: var(--e-star); font-weight: var(--e-w-bold); font-size: var(--e-fs-small);
border-radius: var(--e-r-pill); padding: .5rem 1.4rem; letter-spacing: .08em;
}
.ringdial__cap { min-height: 5.2rem; margin-top: var(--e-s4); font-size: var(--e-fs-body); color: var(--e-ink-soft); font-style: italic; font-family: var(--e-font-display); font-size: 1.9rem; }
.ringdial input[type="range"] {
width: 100%; margin-top: var(--e-s3); appearance: none; height: .6rem;
background: linear-gradient(90deg, var(--e-tint-5), var(--e-rose)); border-radius: var(--e-r-pill); outline: none;
}
.ringdial input[type="range"]::-webkit-slider-thumb {
appearance: none; width: 2.8rem; height: 2.8rem; border-radius: 50%;
background: var(--e-star); border: 3px solid #14110A; cursor: grab;
box-shadow: var(--e-shadow-cta);
}
.ringdial__scale { display: flex; justify-content: space-between; font-size: var(--e-fs-micro); color: var(--e-ink-faint); margin-top: var(--e-s2); }
/* ---------- BEFORE / AFTER DRAG SLIDER ----------
Job: Desire + Justification (visible proof you control). Clip-path wipe,
handle driven by site.js. Distinct from the static .ba split. */
.baslide { position: relative; border-radius: var(--e-r-media); overflow: hidden; aspect-ratio: 4/3; user-select: none; touch-action: none; }
.baslide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.baslide__after { clip-path: inset(0 0 0 50%); }
.baslide__handle {
position: absolute; top: 0; bottom: 0; left: 50%; width: 3px; margin-left: -1.5px;
background: var(--e-star); cursor: ew-resize; z-index: 2;
}
.baslide__handle::after {
content: "◂ ▸"; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
background: var(--e-star); color: #14110A; font-size: 1.2rem; font-weight: 700;
width: 4.4rem; height: 4.4rem; border-radius: 50%; display: grid; place-items: center;
box-shadow: var(--e-shadow-md); letter-spacing: -.05em;
}
.baslide__tag { position: absolute; bottom: var(--e-s3); background: rgba(26,27,30,.8); color: var(--e-cream); font-size: var(--e-fs-micro); letter-spacing: .12em; text-transform: uppercase; padding: .5rem 1.2rem; border-radius: var(--e-r-pill); z-index: 1; }
.baslide__tag--l { left: var(--e-s3); } .baslide__tag--r { right: var(--e-s3); }
/* ---------- PRESS BAND ---------- */
.pressband { background: #1A1B1E; --e-ink:#F6F3ED; --e-ink-soft:rgba(246,243,237,.78); --e-ink-faint:rgba(246,243,237,.55); --e-heading:#F6F3ED; --e-star:#E0B75B; padding: var(--e-s5) 0; border-block: 1px solid var(--e-hairline); }
.pressband__label { text-align: center; font-size: var(--e-fs-micro); letter-spacing: .22em; text-transform: uppercase; color: var(--e-ink-faint); margin-bottom: var(--e-s3); }
.pressband__row { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--e-s4) var(--e-s7); align-items: baseline; }
.pressband__name { font-family: var(--e-font-display); font-size: 2rem; color: rgba(246,243,237,.55); letter-spacing: .06em; white-space: nowrap; }
.pressband__quote { text-align: center; margin-top: var(--e-s4); font-family: var(--e-font-display); font-style: italic; font-size: 1.9rem; color: var(--e-ink-soft); }
/* ---------- STOCK PILL + WEEK TICKER ---------- */
.stockpill { display: inline-flex; align-items: center; gap: var(--e-s2); background: rgba(217,113,63,.12); border: 1px solid rgba(217,113,63,.4); color: #A9502E; border-radius: var(--e-r-pill); padding: .5rem 1.2rem; font-size: var(--e-fs-micro); font-weight: var(--e-w-semi); }
.weekticker { display: inline-flex; align-items: center; gap: var(--e-s2); color: var(--e-ink-soft); font-size: var(--e-fs-micro); }
.weekticker strong { color: var(--e-cta-dark); font-variant-numeric: tabular-nums; }
/* ---------- CLIP CARDS (short ambient loops, autoplay muted) ---------- */
.clipcard { position: relative; border-radius: var(--e-r-media); overflow: hidden; background: var(--e-tint-2); }
.clipcard video { width: 100%; height: 100%; object-fit: cover; display: block; }
.clipcard__cap { position: absolute; left: var(--e-s3); right: var(--e-s3); bottom: var(--e-s3); color: #fff; font-size: var(--e-fs-micro); font-weight: var(--e-w-semi); text-shadow: 0 1px 6px rgba(0,0,0,.7); }
/* ---------- MORNING PROGRESS RAIL (PDP timeline enhancement) ----------
A scroll-driven gold line that fills as the timeline is read.
Job: Commitment — the reader "walks" the 60 mornings. */
.mornings { position: relative; padding-left: var(--e-s7); }
.mornings__rail { position: absolute; left: 1.6rem; top: 0; bottom: 0; width: 2px; background: var(--e-tint-4); }
.mornings__fill { position: absolute; left: 0; top: 0; width: 100%; height: 0%; background: linear-gradient(180deg, var(--e-rose), var(--e-star)); transition: height .2s linear; }
.morning { position: relative; padding-bottom: var(--e-s6); }
.morning__dot { position: absolute; left: calc(-1 * var(--e-s7) + .6rem); top: .4rem; width: 2rem; height: 2rem; border-radius: 50%; background: var(--e-tint-0); border: 2px solid var(--e-rose); }
.morning.is-lit .morning__dot { background: var(--e-star); box-shadow: 0 0 12px rgba(224,183,91,.6); }
.morning__when { font-family: var(--e-font-display); font-style: italic; font-size: 2rem; color: var(--e-star); }
/* ---------- CANDLE FLICKER ACCENT (hero) ---------- */
.candleglow { position: relative; }
.candleglow::before {
content: ""; position: absolute; inset: -10% -20%;
background: radial-gradient(50% 60% at 70% 40%, rgba(200,16,46,.10), transparent 70%);
animation: candle 6s ease-in-out infinite; pointer-events: none;
}
@keyframes candle { 0%,100%{opacity:.75} 40%{opacity:1} 60%{opacity:.85} 80%{opacity:.95} }
/* ---------- FREE-GIFT PROGRESS (cart) ---------- */
.giftbar { background: var(--e-tint-2); border: 1px solid var(--e-hairline); border-radius: var(--e-r-card); padding: var(--e-s4); display: grid; gap: var(--e-s2); }
.giftbar__track { height: 8px; background: var(--e-tint-4); border-radius: var(--e-r-pill); overflow: hidden; }
.giftbar__fill { display: block; height: 100%; border-radius: var(--e-r-pill); background: linear-gradient(90deg, var(--e-rose), var(--e-star)); }
.giftbar__msg { font-size: var(--e-fs-micro); color: var(--e-ink-soft); }
.giftbar__msg strong { color: var(--e-star); }
/* ---------- STAR BAND (rating summary + face strip) ----------
Job: Trust (volume proof). Modeled on the reference's Trustpilot band. */
.starband { text-align: center; }
.starband__row { display: inline-flex; align-items: center; gap: var(--e-s3); flex-wrap: wrap; justify-content: center; }
.starband__word { font-family: var(--e-font-display); font-size: 2.4rem; color: var(--e-heading); }
.starband__chips { display: inline-flex; gap: .3rem; }
.starband__chip { width: 2.6rem; height: 2.6rem; display: grid; place-items: center; background: var(--e-success); color: #fff; font-size: 1.4rem; border-radius: .4rem; }
.starband__score { font-weight: var(--e-w-bold); color: var(--e-heading); font-size: 1.8rem; }
.starband__src { color: var(--e-ink-faint); font-size: var(--e-fs-small); }
.starband__strip { display: flex; gap: var(--e-s2); overflow-x: auto; padding: var(--e-s4) 0 var(--e-s2); justify-content: center; flex-wrap: wrap; }
.starband__strip img { width: 7.2rem; height: 7.2rem; object-fit: cover; border-radius: .8rem; border: 2px solid var(--e-surface); box-shadow: var(--e-shadow-sm); }
@media (max-width: 749px) { .starband__strip { flex-wrap: nowrap; justify-content: flex-start; } }
/* ---------- PHOTO TESTIMONIAL CARDS ----------
Job: Trust + Unity (a peer she recognizes). Photo, stars, quote, benefit
tags, name + country — the reference's "Real Women" card anatomy. */
.phototest { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(26rem, 1fr); gap: var(--e-s4); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--e-s3); }
.phototest__card { scroll-snap-align: start; background: var(--e-surface); border: 1px solid var(--e-hairline); border-radius: var(--e-r-tile); overflow: hidden; display: grid; align-content: start; }
.phototest__card img { width: 100%; aspect-ratio: 4/5; object-fit: cover; }
.phototest__body { padding: var(--e-s4); display: grid; gap: var(--e-s3); text-align: center; justify-items: center; }
.phototest__quote { font-size: var(--e-fs-small); color: var(--e-ink-soft); }
.phototest__tags { display: flex; gap: var(--e-s2); flex-wrap: wrap; justify-content: center; }
.phototest__tag { background: var(--e-tint-2); border: 1px solid var(--e-hairline); color: var(--e-heading); font-size: 1rem; letter-spacing: .08em; text-transform: uppercase; font-weight: var(--e-w-semi); padding: .4rem 1rem; border-radius: var(--e-r-pill); }
.phototest__who { font-size: var(--e-fs-micro); color: var(--e-ink-faint); }
.phototest__who strong { color: var(--e-ink); }
@media (max-width: 749px) { .phototest { grid-auto-columns: 78%; } }
/* ============================================================================
SUBSCRIPTION LAYER
Pitch page, PDP toggle, and the manage-subscription surfaces.
Honest mechanics per stage-4: default one-time, side-by-side delta,
cancel in one click, no hidden toggles.
============================================================================ */
/* ---------- PDP: one-time vs subscribe toggle ---------- */
.subtoggle { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-s2); background: var(--e-tint-2); border: 1px solid var(--e-hairline); border-radius: var(--e-r-card); padding: var(--e-s2); }
.subtoggle__opt {
border: 2px solid transparent; border-radius: .6rem; background: transparent;
padding: var(--e-s3) var(--e-s4); cursor: pointer; text-align: left; font-family: var(--e-font-body);
display: grid; gap: .2rem;
}
.subtoggle__opt.is-on { background: var(--e-surface); border-color: var(--e-wine); box-shadow: var(--e-shadow-sm); }
.subtoggle__name { font-weight: var(--e-w-bold); color: var(--e-heading); font-size: var(--e-fs-small); }
.subtoggle__sub { font-size: var(--e-fs-micro); color: var(--e-ink-faint); }
.subtoggle__price { font-weight: var(--e-w-bold); color: var(--e-heading); }
.subperks { display: grid; gap: var(--e-s2); margin-top: var(--e-s3); }
.subperks li { list-style: none; font-size: var(--e-fs-small); color: var(--e-ink-soft); }
.subperks li::before { content: "✓"; color: var(--e-success); font-weight: var(--e-w-bold); margin-right: .8rem; }
/* ---------- account / manage surfaces ---------- */
.acct { display: grid; grid-template-columns: 24rem 1fr; gap: var(--e-s6); align-items: start; }
.acct__nav { display: grid; gap: var(--e-s2); position: sticky; top: 10rem; }
.acct__nav a {
padding: var(--e-s3) var(--e-s4); border-radius: var(--e-r-btn); text-decoration: none;
color: var(--e-ink-soft); font-size: var(--e-fs-small); font-weight: var(--e-w-med);
border: 1px solid transparent;
}
.acct__nav a.is-here { background: var(--e-surface); color: var(--e-heading); border-color: var(--e-hairline); box-shadow: var(--e-shadow-sm); }
.acct__nav a:hover { color: var(--e-heading); }
@media (max-width: 989px) { .acct { grid-template-columns: 1fr; } .acct__nav { position: static; grid-auto-flow: column; overflow-x: auto; } }
.subcard { background: var(--e-surface); border: 1px solid var(--e-hairline); border-radius: var(--e-r-tile); padding: var(--e-s5); display: grid; gap: var(--e-s4); }
.subcard__head { display: flex; flex-wrap: wrap; gap: var(--e-s3); align-items: center; justify-content: space-between; }
.substatus { display: inline-flex; align-items: center; gap: .7rem; font-size: var(--e-fs-micro); font-weight: var(--e-w-semi); letter-spacing: .08em; text-transform: uppercase; padding: .5rem 1.2rem; border-radius: var(--e-r-pill); }
.substatus--active { background: rgba(86,84,92,.14); color: var(--e-success); }
.substatus--paused { background: rgba(201,153,47,.14); color: #8A6A1F; }
.substatus--cancelled{ background: rgba(217,113,63,.14); color: #A9502E; }
.substatus .live-dot { width: 8px; height: 8px; }
.subrow { display: grid; grid-template-columns: 1fr auto; gap: var(--e-s3); align-items: center; padding: var(--e-s3) 0; border-bottom: 1px solid var(--e-hairline); }
.subrow:last-child { border-bottom: 0; }
.subrow__k { font-size: var(--e-fs-micro); color: var(--e-ink-faint); text-transform: uppercase; letter-spacing: .1em; }
.subrow__v { font-size: var(--e-fs-body); color: var(--e-ink); font-weight: var(--e-w-med); }
.cadence { display: flex; gap: var(--e-s2); flex-wrap: wrap; }
.cadence__opt {
border: 1px solid var(--e-hairline); background: var(--e-surface); border-radius: var(--e-r-pill);
padding: .7rem 1.6rem; cursor: pointer; font-family: var(--e-font-body); font-size: var(--e-fs-small);
color: var(--e-ink-soft);
}
.cadence__opt.is-on { background: var(--e-wine); color: var(--e-cream); border-color: var(--e-wine); }
.subactions { display: flex; gap: var(--e-s3); flex-wrap: wrap; }
.btn--quiet { background: transparent; color: var(--e-ink-soft); border: 1px solid var(--e-hairline); min-height: 4.4rem; padding: 0 var(--e-s5); font-size: var(--e-fs-small); }
.btn--quiet:hover { color: var(--e-heading); border-color: var(--e-ink-faint); }
.btn--danger-quiet { background: transparent; color: #A9502E; border: 1px solid rgba(169,80,46,.35); min-height: 4.4rem; padding: 0 var(--e-s5); font-size: var(--e-fs-small); }
.btn--danger-quiet:hover { background: rgba(169,80,46,.08); }
/* delivery timeline */
.delivs { display: grid; gap: 0; }
.deliv { display: grid; grid-template-columns: 2.4rem 1fr auto; gap: var(--e-s3); align-items: baseline; padding: var(--e-s3) 0; border-bottom: 1px solid var(--e-hairline); }
.deliv:last-child { border-bottom: 0; }
.deliv__dot { width: 1.2rem; height: 1.2rem; border-radius: 50%; background: var(--e-success); justify-self: center; align-self: center; }
.deliv__dot--next { background: var(--e-star); box-shadow: 0 0 0 4px rgba(201,153,47,.18); }
.deliv__dot--skip { background: var(--e-tint-5); }
.deliv__what { font-size: var(--e-fs-small); color: var(--e-ink); }
.deliv__meta { font-size: var(--e-fs-micro); color: var(--e-ink-faint); }
/* cancel modal */
.submodal { position: fixed; inset: 0; z-index: 120; background: rgba(26,27,30,.5); display: grid; place-items: center; padding: var(--e-s4); }
.submodal[hidden] { display: none; }
.submodal__panel { background: var(--e-surface); border-radius: var(--e-r-tile); max-width: 46rem; width: 100%; padding: var(--e-s6); display: grid; gap: var(--e-s4); box-shadow: var(--e-shadow-md); }
/* anchored account sections clear the sticky header */
.subcard[id], [id="orders"], [id="addresses"] { scroll-margin-top: 12rem; }
/* stronger active status pill (read as grey before) */
.substatus--active { background: rgba(86,84,92,.18); color: #56545C; border: 1px solid rgba(86,84,92,.35); }
/* ==================== replica.css ==================== */
/* ============================================================================
RESILIA-REPLICA LAYER — the reference's signature PDP furniture,
rebuilt for Nuvelle. Loaded after gadgets.css.
============================================================================ */
/* ---------- announcement countdown (dark green, inline timer) ---------- */
.rannounce{background:#272629;color:#fff;text-align:center;padding:.8rem 1.2rem;display:flex;flex-wrap:wrap;gap:.4rem 1.6rem;align-items:center;justify-content:center;}
.rannounce__sale{font-weight:800;font-size:1.5rem;letter-spacing:.02em;}
.rannounce__sub{font-size:1.2rem;color:rgba(255,255,255,.75);width:100%;}
.rannounce__clock{display:inline-flex;gap:.9rem;font-variant-numeric:tabular-nums;font-weight:700;font-size:1.5rem;}
.rannounce__unit{display:grid;justify-items:center;line-height:1.1;}
.rannounce__unit small{font-size:.9rem;font-weight:500;color:rgba(255,255,255,.6);text-transform:none;}
/* ---------- benefit ticker strip ---------- */
.bticker{background:var(--e-tint-4);border-block:1px solid var(--e-hairline);overflow:hidden;padding:.9rem 0;}
.bticker__track{display:flex;gap:2.8rem;width:max-content;animation:e-marquee 65s linear infinite;}
.bticker__item{display:inline-flex;align-items:center;gap:.6rem;font-size:1.25rem;font-weight:600;color:var(--e-wine);white-space:nowrap;}
.bticker__item .ic{color:var(--e-rose);}
/* ---------- gift-ladder tiers (reference anatomy) ---------- */
.rtiers{display:grid;gap:var(--e-s3);}
.rtier{position:relative;display:grid;grid-template-columns:auto auto 1fr;align-items:center;gap:var(--e-s3);padding:var(--e-s4);background:#fff;border:1.5px solid var(--e-hairline);border-radius:var(--e-r-card);cursor:pointer;transition:border-color var(--e-dur) var(--e-ease),background var(--e-dur) var(--e-ease);}
.rtier:hover{border-color:var(--e-blush);}
.rtier.is-selected{border-color:var(--e-wine);background:var(--e-tint-4);box-shadow:0 0 0 1px var(--e-wine);}
.rtier__radio{width:2rem;height:2rem;border-radius:50%;border:2px solid var(--e-blush);display:grid;place-items:center;flex:none;}
.rtier.is-selected .rtier__radio{border-color:var(--e-wine);}
.rtier.is-selected .rtier__radio::after{content:"";width:1rem;height:1rem;border-radius:50%;background:var(--e-wine);}
.rtier__thumb{width:5.2rem;height:5.2rem;border-radius:.8rem;object-fit:cover;background:var(--e-tint-2);}
.rtier__body{display:grid;gap:.15rem;min-width:0;}
.rtier__name{font-weight:700;color:var(--e-heading);font-size:1.5rem;}
.rtier__save{font-size:1.3rem;color:var(--e-ink-soft);}
.rtier__gift{grid-column:1/-1;display:flex;gap:.7rem;align-items:flex-start;font-size:1.3rem;color:var(--e-wine);border-top:1px dashed var(--e-hairline);padding-top:var(--e-s3);}
.rtier__gift::before{content:"✓";font-weight:800;color:var(--e-success);}
.rtier__gift small{display:block;color:var(--e-ink-faint);}
.rtier__flag{position:absolute;top:-1rem;right:var(--e-s4);background:var(--e-wine);color:#fff;font-size:1rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:.35rem 1rem;border-radius:var(--e-r-pill);}
.rtier__flag--gift{background:var(--e-rose);}
/* ---------- gifts unlocked strip ---------- */
.gifts{border:2px dashed var(--e-blush);border-radius:var(--e-r-card);padding:var(--e-s5) var(--e-s4) var(--e-s4);position:relative;margin-top:var(--e-s5);}
.gifts__label{position:absolute;top:-1.2rem;left:50%;transform:translateX(-50%);background:var(--e-heading);color:#fff;font-size:1.1rem;font-weight:800;letter-spacing:.08em;padding:.4rem 1.4rem;border-radius:.4rem;white-space:nowrap;}
.gifts__row{display:flex;align-items:center;justify-content:center;gap:var(--e-s2);}
.gifts__item{display:grid;justify-items:center;gap:.4rem;text-align:center;flex:1;min-width:0;}
.gifts__item img{width:6rem;height:6rem;object-fit:contain;}
.gifts__was{font-size:1.15rem;color:var(--e-ink-faint);text-decoration:line-through;}
.gifts__name{font-size:1.15rem;font-weight:700;color:var(--e-sale);line-height:1.25;}
.gifts__plus{color:var(--e-ink-faint);font-size:1.8rem;flex:none;}
.gifts__item--locked{opacity:.45;filter:grayscale(.6);}
/* ---------- sale progress bar ---------- */
.salebar{background:#fff;border:1px solid var(--e-hairline);border-radius:var(--e-r-pill);padding:.4rem;box-shadow:var(--e-shadow-sm);}
.salebar__track{height:1rem;border-radius:var(--e-r-pill);background:var(--e-tint-2);overflow:hidden;}
.salebar__fill{display:block;height:100%;border-radius:var(--e-r-pill);background:linear-gradient(90deg,#3A3A3E,#F04438);}
.salebar__msg{font-size:1.2rem;color:var(--e-ink-soft);text-align:center;margin-top:.5rem;}
.salebar__msg strong{color:var(--e-sale);}
/* ---------- delivery + refills lines ---------- */
.delivline{display:flex;align-items:center;gap:.8rem;font-size:1.35rem;color:var(--e-ink);flex-wrap:wrap;}
.delivline strong{color:var(--e-success);}
.delivline small{width:100%;color:var(--e-ink-faint);font-size:1.2rem;padding-left:1.7rem;}
.refline{display:flex;align-items:center;justify-content:center;gap:1.2rem;font-size:1.2rem;color:var(--e-ink-faint);flex-wrap:wrap;}
.refline span{display:inline-flex;align-items:center;gap:.5rem;}
/* ---------- stats band ---------- */
.statsband{display:grid;gap:var(--e-s6);}
.statsband__n{font-family:var(--e-font-body);font-weight:800;font-size:clamp(3.6rem,9vw,5.6rem);line-height:1;color:#fff;}
.statsband__k{font-size:1.35rem;color:rgba(246,243,237,.8);margin-top:.4rem;}
/* ⚠ The colours above were authored for the dark bands. On a light ground the
white numerals vanish completely and the captions ghost out (hit on
our-products.html §4, which is band-0). Give the light bands their own ink. */
.band-0 .statsband__n,.band-1 .statsband__n,.band-2 .statsband__n,
.band-3 .statsband__n,.band-cream .statsband__n{color:var(--e-wine);}
.band-0 .statsband__k,.band-1 .statsband__k,.band-2 .statsband__k,
.band-3 .statsband__k,.band-cream .statsband__k{color:var(--e-ink-soft);}
/* ---------- ingredient carousel ---------- */
.ingcar{max-width:60rem;margin-inline:auto;text-align:center;}
.ingcar__stage{border-radius:var(--e-r-media);overflow:hidden;aspect-ratio:1/1;max-height:44vh;}
.ingcar__stage img{width:100%;height:100%;object-fit:cover;}
.ingcar__name{font-family:var(--e-font-display);font-size:var(--e-fs-h3);margin-top:var(--e-s4);color:var(--e-heading);}
.ingcar__body{color:var(--e-ink-soft);font-size:var(--e-fs-small);max-width:46ch;margin:0 auto;}
.ingcar__nav{display:flex;gap:var(--e-s3);justify-content:center;margin-top:var(--e-s4);}
.ingcar__nav button{width:4.2rem;height:4.2rem;border-radius:50%;border:1px solid var(--e-hairline);background:#fff;color:var(--e-heading);font-size:1.6rem;cursor:pointer;}
.ingcar__nav button:hover{background:var(--e-wine);color:#fff;}
/* ---------- tagged review card ---------- */
.rrev{background:#fff;border:1px solid var(--e-hairline);border-radius:var(--e-r-card);padding:var(--e-s5);display:grid;gap:var(--e-s3);}
.rrev__score{display:flex;align-items:center;gap:.8rem;font-weight:800;color:var(--e-heading);}
.rrev__title{font-weight:800;font-size:1.5rem;color:var(--e-heading);}
.rrev__body{font-size:1.35rem;color:var(--e-ink-soft);}
.rrev__who{display:flex;align-items:center;gap:.8rem;font-size:1.2rem;color:var(--e-ink-faint);}
.rrev__avatar{width:2.8rem;height:2.8rem;border-radius:50%;background:var(--e-tint-4);display:grid;place-items:center;font-size:1rem;font-weight:700;color:var(--e-wine);}
.rrev__ver{color:var(--e-success);display:inline-flex;align-items:center;gap:.4rem;}
.rrev__tags{display:flex;gap:.8rem;flex-wrap:wrap;}
.rrev__tag{border:1px solid var(--e-blush);color:var(--e-wine);background:var(--e-tint-4);border-radius:var(--e-r-pill);padding:.5rem 1.4rem;font-size:1.15rem;font-weight:600;}
/* ---------- icon benefit grid on dark ---------- */
.dbene{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--e-s6) var(--e-s4);text-align:center;}
.dbene__item{display:grid;justify-items:center;gap:.8rem;}
.dbene__ic{width:5rem;height:5rem;border-radius:50%;border:1.5px solid rgba(246,243,237,.35);display:grid;place-items:center;font-size:2rem;color:#EFB3AE;}
.dbene__k{font-size:1.35rem;font-weight:600;color:#fff;line-height:1.35;}
@media (min-width:750px){.dbene{grid-template-columns:repeat(4,1fr);}}
/* ---------- us-vs-them comparison table ---------- */
/* ⚠ .vs paints its OWN white surface, so it must not inherit a dark band's
inverted ink tokens. .band-wine sets --e-ink/--e-heading to near-white for
text sitting directly on the dark green; inside this table that put white
text on a white background and the whole grid rendered invisible (hit on
our-products.html §3). Re-assert the light-ground tokens locally so the
table is legible on ANY band. Measured, not guessed. */
.vs{width:100%;border-collapse:separate;border-spacing:0;background:#fff;border-radius:var(--e-r-card);overflow:hidden;border:1px solid var(--e-hairline);
--e-ink:#1A1A1A;--e-ink-soft:#4A4F4C;--e-ink-faint:#8A8F8C;--e-heading:#0D0D0D;
--e-hairline:rgba(16,20,24,.12);
--e-rose:#C8102E;--e-star:#C8102E;--e-success:#3A3A3E;--e-sale:#3A3A3E;--e-tint-2:#F7F7F7;--e-tint-4:#EDE9E0;color:var(--e-ink);}
.vs th,.vs td{padding:var(--e-s3) var(--e-s4);text-align:center;border-bottom:1px solid var(--e-hairline);font-size:1.3rem;}
.vs thead th{background:var(--e-tint-2);font-weight:700;color:var(--e-heading);}
.vs thead th.vs__ours{background:var(--e-wine);color:#fff;}
.vs tbody th{text-align:left;font-weight:600;color:var(--e-ink);}
.vs td.vs__ours{background:var(--e-tint-4);font-weight:700;}
.vs .y{color:var(--e-success);font-weight:800;} .vs .n{color:var(--e-sale);font-weight:800;}
/* ⚠ .rtier__flag overhangs its parent by top:-1rem, which is correct on .rtier
(position:relative, no clipping) but is CUT OFF inside .card, which sets
overflow:hidden to round its media corners. The "Max Strength" / "No
Swallowing" badges on the format cards lost their top 8-9px. Inside a card,
sit the badge fully within the bounds. Measured at 1440 and 390. */
.card .rtier__flag{top:var(--e-s3);}
/* The sitewide FDA line is legal furniture, not a content section: drop it to a
hairline band instead of a full tight section (was 109px tall for 35px of text). */
.disclaimer{padding-block:var(--e-s3);}
.disclaimer p{margin:0;}
/* ==================== theme token bridge ====================
The ported stylesheet uses the --e- prefixed names from the static build. The layout
emits the settings-driven names. This bridge maps one onto the other so a value
changed in the theme editor flows through every ported rule.
MUST STAY LAST in this file: it overrides the base :root block at the top. Anything
listed here is merchant-editable; anything not listed keeps its base value. */
:root{
/* ---- colour ---- */
--e-rose:var(--crimson); --e-wine:var(--graphite); --e-maroon:var(--ink);
--e-cream:var(--mist); --e-cta-deep:var(--buy); --e-cta-dark:var(--buy-hover);
--e-cta:var(--buy); --e-cta-text:var(--buy-text);
--e-ink:var(--ink); --e-ink-soft:var(--steel); --e-heading:var(--ink);
--e-bg:var(--bone); --e-tint-0:var(--bone); --e-tint-3:var(--mist);
--e-star:var(--crimson); --e-sale:var(--crimson); --e-amber:var(--crimson);
/* ---- type ---- */
--e-font-display:var(--font-head); --e-font-body:var(--font-body); --e-font-mono:var(--font-mono);
/* ---- layout: the five Layout settings were emitted but consumed by nothing,
so the sliders saved and did nothing. They drive the real tokens now.
Side padding stays FLUID between the mobile and desktop settings rather than
snapping at a breakpoint, so text never sits tight against a phone edge. ---- */
--e-gutter: clamp(var(--pad-x-mobile), 1rem + 1.6vw, var(--pad-x));
--e-pad-x-mobile: var(--pad-x-mobile);
--e-content-w: var(--maxw);
/* Card/media/tile keep the prototype's 10/12/14px step off a single control. */
--e-r-card: var(--radius);
--e-r-media: calc(var(--radius) + 2px);
--e-r-tile: calc(var(--radius) + 4px);
/* --e-r-btn (secondary buttons, 8px) and --e-r-pill (999px chips) stay on their base
values: they are shape primitives, not preferences. The Buy button radius setting
drives .atc, the primary buy action, via --radius-pill in the PDP block below. */
}
/* ============================================================================
PDP / FAQ / COMPARE COMPONENT SHEET
Recovered 2026-08-02. This 38KB block was authored as an inline