/* Ecolura store theme (2026-10-18). Shopify-style product page: gallery first, quiet surfaces,
   one accent, generous spacing. Mobile first; the 768px and 1024px blocks at the end widen it. */
:root {
  --bg: #f7f3ec;
  --surface: #fffdf8;
  --tint: #efe8db;
  --ink: #1d241b;
  --muted: #5a6455;
  --line: #e2d9c9;
  --accent: #2f4a2b;
  --accent-hover: #24391f;
  --accent-soft: #e6ecdf;
  --gold: #b07a22;
  --dark: #1f2b1d;
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --gutter: 20px;
  --section: 80px;
  --radius: 12px;
  --radius-sm: 12px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  /* z-index scale */
  --z-header: 30; --z-sticky: 40; --z-sheet: 50; --z-skip: 60;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { font-family: var(--sans); font-size: 15px; line-height: 1.55; color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
fieldset { border: 0; min-width: 0; }
svg { flex-shrink: 0; }
p { text-wrap: pretty; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 1.12; letter-spacing: -0.015em; text-wrap: balance; font-optical-sizing: auto; }
h2 { font-size: 32px; line-height: 1.1; }
h3 { font-size: 20px; line-height: 1.25; }
b, strong { font-weight: 600; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 999px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: var(--z-skip); background: var(--ink); color: #fff; padding: 10px 14px; border-radius: var(--radius-sm); font-size: 15px; }
.skip:focus { top: 12px; }

.wrap { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 var(--gutter); }
.eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin-bottom: 10px; }
.section-sub { color: var(--muted); margin-top: 12px; max-width: 46ch; }
.note { font-size: 13px; color: var(--muted); text-align: center; margin-top: 10px; }
.stars { color: var(--gold); letter-spacing: 1px; }

/* Image slot. If a file is missing it shows the expected filename instead of a broken icon. */
.media { position: relative; overflow: hidden; background: var(--tint); }
.media img { width: 100%; height: 100%; object-fit: cover; }
.media.missing img { visibility: hidden; }
.media.missing::after { content: attr(data-label); position: absolute; inset: 0; display: grid; place-items: center; font-size: 12px; color: var(--muted); }

/* Sections: one rhythm for the whole page. Bottom padding a touch larger so blocks sit optically centered. */
.section { padding: var(--section) 0 calc(var(--section) + 8px); }
.section--tint { background: var(--tint); }
.section--dark { background: var(--dark); color: #f3efe6; }
.section--dark .eyebrow { color: #c9b98f; }
.section--dark h2, .section--dark h3 { color: #fbf8f1; }
.section__head { margin-bottom: 36px; }

/* ---------- Announcement + header ---------- */
/* Red countdown strip above the announcement. */
.countdown { background: #b42318; color: #fff; text-align: center; font-size: 13px; font-weight: 500; padding: 8px 12px; letter-spacing: .01em; }
.countdown[hidden] { display: none; }
.countdown b[hidden] { display: none; }
.countdown b { font-weight: 700; font-variant-numeric: tabular-nums; display: inline-block; min-width: 3.2em; text-align: left; }
/* Announcement: lines stack in one grid cell and cross-fade, so the bar never changes height. */
.announce { display: grid; background: var(--dark); color: #f3efe6; font-size: 13px; letter-spacing: .01em; padding: 9px 12px; text-align: center; overflow: hidden; }
.announce__msg { grid-area: 1 / 1; opacity: 0; transform: translateY(6px); transition: opacity .45s var(--ease), transform .45s var(--ease); }
.announce__msg.is-on { opacity: 1; transform: none; }
.announce__msg b { font-weight: 600; color: #e9d9a8; }
.announce__msg[hidden] { display: none; }
.header { position: sticky; top: 0; z-index: var(--z-header); background: rgba(247, 243, 236, .94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.header__inner { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; height: 56px; }
.icon-btn { display: grid; place-items: center; width: 44px; height: 44px; margin-left: -10px; }
.header__cart { margin: 0 -10px 0 0; justify-self: end; }
.icon-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
/* Wordmark: Lilla's logo file (assets/img/logo-wordmark.png) used as a mask, so it takes the text colour.
   The word stays in the markup for screen readers and search; font-size 0 hides it visually. */
.logo { justify-self: center; display: block; width: 96px; height: 24px; font-size: 0; color: var(--ink); background: currentColor; -webkit-mask: url("../img/logo-wordmark.png") center / contain no-repeat; mask: url("../img/logo-wordmark.png") center / contain no-repeat; }
.nav { display: none; position: absolute; top: 56px; left: 0; right: 0; flex-direction: column; background: var(--bg); border-bottom: 1px solid var(--line); padding: 4px var(--gutter) 16px; }
.nav.open { display: flex; }
.nav a { padding: 13px 0; font-size: 15px; border-bottom: 1px solid var(--line); }
.nav a:last-child { border-bottom: 0; }

/* ---------- Product ---------- */
.product { display: grid; padding-bottom: 56px; }

/* Gallery: full-bleed swipe on phones with dots; main image + thumbnails on desktop. */
.gallery { position: relative; }
/* One photo at a time, full width. The arrows and dots show there are more (Lilla did not want the next photo peeking in). */
.gallery__track { display: flex; gap: 0; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.gallery__track::-webkit-scrollbar { display: none; }
.slide { flex: 0 0 100%; aspect-ratio: 1 / .92; scroll-snap-align: start; scroll-snap-stop: always; }
.gallery__dots { position: absolute; left: 0; right: 0; bottom: 14px; display: flex; justify-content: center; gap: 6px; pointer-events: none; }
.gallery__dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(29, 36, 27, .25); transition: background .2s var(--ease), width .2s var(--ease); }
.gallery__dots i.is-active { width: 18px; border-radius: 3px; background: var(--ink); }
.gallery__arrow { position: absolute; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 253, 248, .9); border: 1px solid var(--line); box-shadow: 0 1px 4px rgba(29, 36, 27, .12); transition: opacity .2s var(--ease); }
.gallery__arrow svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.gallery__arrow--prev { left: 10px; }
.gallery__arrow--next { right: 10px; }
.gallery__arrow[disabled] { opacity: 0; pointer-events: none; }
.gallery__thumbs { display: none; }

.info { padding: 20px var(--gutter) 0; }
.rating { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); min-height: 24px; }
.rating .stars { font-size: 15px; }
.title { font-size: 36px; margin-top: 6px; letter-spacing: -0.02em; }
.promise { font-size: 15px; color: var(--muted); margin-top: 8px; }
.price { display: flex; align-items: baseline; gap: 10px; margin-top: 14px; }
.price strong { font-size: 24px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.price__note { font-size: 13px; color: var(--accent); font-weight: 500; }

.bundles { margin-top: 24px; }
.label { float: left; width: 100%; font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: 12px; padding: 0; }
.label + * { clear: both; }
.bundle { position: relative; display: block; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 10px; cursor: pointer; transition: border-color .2s var(--ease), box-shadow .2s var(--ease); }
.bundle input { position: absolute; opacity: 0; pointer-events: none; }
.bundle__row { display: grid; grid-template-columns: 20px 1fr auto; gap: 14px; align-items: center; min-height: 60px; padding: 10px 16px; }
.bundle__dot { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid #a9a191; transition: border .2s var(--ease); }
.bundle__name { display: block; font-weight: 600; font-size: 15px; }
.bundle__save { display: block; font-size: 13px; color: var(--muted); }
.bundle__price { font-weight: 600; font-size: 15px; font-variant-numeric: tabular-nums; }
.bundle__tag { position: absolute; top: -9px; right: 14px; background: var(--accent); color: #fff; font-size: 12px; font-weight: 600; letter-spacing: .02em; line-height: 1; padding: 5px 8px; border-radius: 999px; }
.bundle__tag--alt { background: var(--gold); }
.bundle__gifts { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 16px 12px 50px; margin-top: -4px; }
.gift { display: inline-flex; align-items: center; gap: 8px; background: var(--accent-soft); border-radius: 999px; padding: 3px 10px 3px 3px; font-size: 12px; color: var(--accent); font-weight: 500; }
.gift img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; background: #fff; }
.bundle.is-selected { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.bundle.is-selected .bundle__dot { border: 6px solid var(--ink); }
.bundle:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (hover: hover) { .bundle:not(.is-selected):hover { border-color: #b9ae99; } }

/* Primary button: solid, quiet, a single soft highlight on top. */
.atc { display: block; width: 100%; text-align: center; background: var(--accent); color: #fff; font-size: 15px; font-weight: 600; letter-spacing: .01em; min-height: 54px; padding: 16px 24px; border-radius: 999px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 1px 2px rgba(29, 36, 27, .18); transition: background .2s var(--ease), transform .12s var(--ease); }
@media (hover: hover) { .atc:hover { background: var(--accent-hover); } }
.atc:active { transform: translateY(1px); }
.info .atc { margin-top: 18px; }
.atc--sm { width: auto; min-height: 46px; padding: 12px 22px; font-size: 15px; }
.btn-line { display: inline-block; border: 1px solid var(--ink); padding: 12px 22px; font-size: 15px; font-weight: 600; border-radius: 999px; transition: background .2s var(--ease), color .2s var(--ease); }
@media (hover: hover) { .btn-line:hover { background: var(--ink); color: #fff; } }

.secure { display: flex; justify-content: center; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); margin-top: 10px; }
.secure svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; }

.proof { display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: 18px; }
.proof__faces { display: flex; }
.proof__faces img { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--bg); object-fit: cover; }
.proof__faces img + img { margin-left: -8px; }
.proof__line { font-size: 13px; color: var(--muted); }
.proof__line strong { color: var(--ink); }
.proof--below { margin-top: 14px; }

.perks { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 24px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.perks li { display: grid; justify-items: center; text-align: center; gap: 6px; padding: 16px 4px; font-size: 13px; font-weight: 600; line-height: 1.3; }
.perks li + li { border-left: 1px solid var(--line); }
.perks small { display: block; font-weight: 400; color: var(--muted); font-size: 12px; margin-top: 2px; }
.perks svg { width: 22px; height: 22px; fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

.ticks { list-style: none; margin-top: 22px; display: grid; gap: 8px; }
.ticks li { position: relative; padding-left: 28px; font-size: 15px; }
.ticks li::before { content: ""; position: absolute; left: 2px; top: 5px; width: 14px; height: 8px; border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg); }

/* Accordions (product details and FAQ) */
.accordion { margin-top: 22px; border-top: 1px solid var(--line); }
.accordion details { border-bottom: 1px solid var(--line); }
.accordion summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 56px; padding: 14px 0; font-weight: 500; font-size: 15px; cursor: pointer; }
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after { content: ""; flex: 0 0 auto; width: 12px; height: 12px; background: linear-gradient(currentColor, currentColor) center / 12px 1.5px no-repeat, linear-gradient(currentColor, currentColor) center / 1.5px 12px no-repeat; transition: transform .25s var(--ease); }
.accordion details[open] summary::after { transform: rotate(45deg); }
.accordion details > div { padding: 0 0 18px; color: var(--muted); font-size: 15px; max-width: 62ch; }

/* ---------- Review cards ---------- */
.strip__track { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); padding: 0 var(--gutter) 4px; scrollbar-width: none; }
.strip__track::-webkit-scrollbar { display: none; }
.rcard { flex: 0 0 78%; max-width: 300px; scroll-snap-align: start; background: var(--surface); border: 0; border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; }
.rcard .media { aspect-ratio: 1; }
.rcard__body { padding: 16px 18px 20px; font-size: 15px; color: #3b4437; }
.rcard__who { display: flex; flex-direction: column; gap: 2px; margin-bottom: 10px; color: var(--ink); font-weight: 600; font-size: 15px; }
.rcard__who .stars { font-size: 13px; font-weight: 400; }

/* ---------- Story ---------- */
.story__grid { display: grid; gap: 28px; }
.story__img { aspect-ratio: 1; border-radius: var(--radius); }
.story__copy h2 { margin-bottom: 16px; }
.story__copy p + p { margin-top: 12px; }
.story__copy p { color: #3b4437; max-width: 52ch; font-size: 17px; }
.vs { margin-top: 36px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; font-size: 15px; }
.vs__row { display: grid; grid-template-columns: .9fr 1fr 1.1fr; }
.vs__row > span { padding: 13px 12px; border-top: 1px solid var(--line); line-height: 1.35; }
.vs__row > span:first-child { color: var(--muted); font-size: 13px; }
.vs__row > span:nth-child(2) { color: var(--muted); }
.vs__row > span:nth-child(3) { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.vs__head > span { border-top: 0; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.vs__head > span:nth-child(3) { background: var(--accent); color: #fff; }

/* ---------- Areas ---------- */
.ugc__row { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); padding: 0 var(--gutter) 4px; scrollbar-width: none; }
.ugc__row::-webkit-scrollbar { display: none; }
.area { flex: 0 0 44%; max-width: 220px; scroll-snap-align: start; background: none; border: 0; border-radius: 0; }
.area .media { aspect-ratio: 3 / 4; border-radius: var(--radius); }
.area .rcard__body { padding: 10px 2px 0; font-size: 15px; font-weight: 600; color: var(--ink); }

/* ---------- Ingredients ---------- */
.ingredients__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 14px; }
.ing .media { aspect-ratio: 1; border-radius: var(--radius); background: var(--surface); margin-bottom: 12px; }
.ing .media img { object-fit: contain; padding: 12%; }
.ing p { font-size: 15px; color: var(--muted); margin-top: 4px; }

/* ---------- Steps ---------- */
.steps__list { list-style: none; display: grid; }
.steps__list li { display: grid; grid-template-columns: 44px 1fr; column-gap: 16px; padding: 20px 0; border-top: 1px solid rgba(243, 239, 230, .14); }
.steps__list li:last-child { border-bottom: 1px solid rgba(243, 239, 230, .14); }
.steps__list span { grid-row: span 2; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(243, 239, 230, .35); display: grid; place-items: center; font-family: var(--serif); font-size: 20px; }
.steps__list p { color: rgba(243, 239, 230, .72); font-size: 15px; margin-top: 2px; }

/* ---------- Kit ---------- */
.kitshow__hero { aspect-ratio: 1; border-radius: var(--radius); }
.features { display: grid; gap: 36px; margin-top: 40px; }
.feature__img { aspect-ratio: 4 / 3; border-radius: var(--radius); margin-bottom: 16px; }
.feature__tag { display: inline-block; font-size: 12px; font-weight: 600; letter-spacing: .04em; color: var(--accent); background: var(--accent-soft); padding: 4px 8px; border-radius: 999px; margin-bottom: 10px; }
.feature p { color: #3b4437; margin-top: 8px; font-size: 15px; }
.kitshow__box { margin: 44px auto 0; max-width: 480px; background: var(--surface); border: 0; border-radius: var(--radius); padding: 24px 20px 18px; }
.kitshow__list { list-style: none; margin: 14px 0 20px; font-size: 15px; }
.kitshow__list li { display: flex; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.kitshow__list b { color: var(--accent); white-space: nowrap; font-variant-numeric: tabular-nums; }
.kitshow__list li:first-child b { color: var(--ink); }

/* ---------- Guarantee ---------- */
.guarantee__grid { display: grid; gap: 28px; }
.guarantee__img { aspect-ratio: 4 / 5; border-radius: var(--radius); max-height: 520px; }
.guarantee__copy p { color: #3b4437; margin: 16px 0 28px; max-width: 46ch; font-size: 17px; }
.seal { width: 96px; height: 96px; margin-bottom: 18px; color: var(--accent); }
.seal text { font-family: var(--sans); font-weight: 600; letter-spacing: .12em; font-size: 9.5px; fill: currentColor; }
.seal .seal__num { font-family: var(--serif); font-size: 34px; letter-spacing: 0; font-weight: 500; }
.seal .seal__days { font-size: 9px; letter-spacing: .2em; }

/* ---------- Reviews wall ---------- */
.wall__head { display: grid; justify-items: center; text-align: center; gap: 16px; margin-bottom: 32px; }
.wall__score strong { display: block; font-family: var(--serif); font-size: 40px; font-weight: 400; line-height: 1; }
.wall__score .stars { font-size: 17px; display: block; margin-top: 6px; }
.wall__score small { display: block; color: var(--muted); font-size: 13px; margin-top: 4px; }
.wall__bars { width: 100%; max-width: 280px; font-size: 13px; }
.bar { display: grid; grid-template-columns: 56px 1fr 36px; gap: 8px; align-items: center; }
.bar__fill { height: 6px; background: var(--line); border-radius: 3px; overflow: hidden; }
.bar__fill i { display: block; height: 100%; background: var(--gold); }

/* ---------- FAQ ---------- */
.faq { max-width: 760px; }
.faq .accordion { margin-top: 0; }
.faq__more { margin-top: 24px; color: var(--muted); font-size: 15px; }
.faq__more a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Footer ---------- */
.footer { background: var(--dark); color: rgba(243, 239, 230, .78); padding: 56px 0 104px; font-size: 15px; }
.footer .logo { color: #fbf8f1; width: 120px; height: 30px; margin: 0; }
.footer__grid { display: grid; gap: 36px; }
.footer__brand p { margin-top: 14px; max-width: 34ch; }
.footer__contact a { color: #fbf8f1; text-decoration: underline; text-underline-offset: 3px; }
.footer__links { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; }
.footer__links a { color: #fbf8f1; }
@media (hover: hover) { .footer__links a:hover { text-decoration: underline; text-underline-offset: 3px; } }
.footer__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; align-items: center; margin-top: 40px; padding-top: 20px; border-top: 1px solid rgba(243, 239, 230, .14); font-size: 13px; }
.pay { display: flex; flex-wrap: wrap; gap: 6px; }
.pay__card { border: 1px solid rgba(243, 239, 230, .25); border-radius: 999px; padding: 2px 7px; font-size: 12px; font-weight: 500; color: #f3efe6; }

/* ---------- Sticky bar ---------- */
.sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-sticky); background: rgba(255, 253, 248, .96); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-top: 1px solid var(--line); transform: translateY(110%); transition: transform .35s var(--ease); padding-bottom: env(safe-area-inset-bottom); }
.sticky.show { transform: none; }
.sticky__inner { display: flex; align-items: center; gap: 12px; padding-block: 10px; }
.sticky__prod { display: none; align-items: center; gap: 12px; flex: 1; font-size: 15px; }
.sticky__thumb { width: 44px; height: 44px; border-radius: var(--radius-sm); }
.sticky__price { flex: 1; font-weight: 600; font-size: 17px; font-variant-numeric: tabular-nums; line-height: 1.2; }
.sticky__price small { display: block; font-size: 12px; font-weight: 500; color: var(--accent); }

/* ---------- On-page checkout sheet ---------- */
.paysheet { position: fixed; inset: 0; z-index: var(--z-sheet); display: flex; align-items: flex-end; justify-content: center; }
.paysheet[hidden] { display: none; }
.paysheet__scrim { position: absolute; inset: 0; background: rgba(20, 26, 18, .5); animation: paysheet-fade .25s var(--ease); }
.paysheet__panel { position: relative; width: 100%; max-width: 520px; height: 92vh; height: 92dvh; display: flex; flex-direction: column; background: #fff; border-radius: var(--radius) var(--radius) 0 0; box-shadow: 0 -10px 40px rgba(20, 26, 18, .2); animation: paysheet-up .32s var(--ease); padding-bottom: env(safe-area-inset-bottom); }
.paysheet__head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.paysheet__title { flex: 1; min-width: 0; }
.paysheet__title strong { display: block; font-size: 15px; }
.paysheet__title span { display: block; font-size: 13px; color: var(--muted); }
.paysheet__close { flex: 0 0 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--bg); }
.paysheet__close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.paysheet__body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 8px 4px 0; min-height: 320px; }
.paysheet__loading { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 64px 16px; color: var(--muted); font-size: 15px; }
.paysheet__loading[hidden] { display: none; } /* the display:flex above would otherwise beat the hidden attribute */
.paysheet__spin { width: 28px; height: 28px; border-radius: 50%; border: 3px solid var(--tint); border-top-color: var(--accent); animation: paysheet-spin .8s linear infinite; }
.paysheet__foot { padding: 10px 16px 14px; text-align: center; font-size: 13px; color: var(--muted); border-top: 1px solid var(--line); }
.paysheet__foot a { color: var(--accent); text-decoration: underline; }
body.paysheet-open { overflow: hidden; }
@keyframes paysheet-up { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes paysheet-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes paysheet-spin { to { transform: rotate(360deg); } }

/* ---------- Tablet and up ---------- */
@media (min-width: 768px) {
  :root { --gutter: 32px; --section: 96px; }
  h2 { font-size: 40px; }
  .header__inner { grid-template-columns: auto 1fr 44px; gap: 40px; height: 68px; }
  .header__menu { display: none; }
  .logo { justify-self: start; width: 112px; height: 28px; }
  .nav { display: flex !important; position: static; flex-direction: row; justify-content: center; gap: 32px; padding: 0; border: 0; background: none; }
  .nav a { padding: 0; border: 0; font-size: 15px; }
  .paysheet { align-items: center; padding: 24px; }
  .paysheet__panel { border-radius: var(--radius); height: auto; max-height: 90vh; }
  .paysheet__body { min-height: 480px; }
  .sticky__prod { display: flex; }
  .sticky__price { flex: 0 0 auto; }
  .story__grid, .guarantee__grid { grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
  .features { grid-template-columns: 1fr 1fr; gap: 32px; }
  .kitshow__hero { aspect-ratio: 16 / 9; }
  .ingredients__grid { grid-template-columns: repeat(4, 1fr); gap: 24px; }
  .steps__list { grid-template-columns: repeat(3, 1fr); gap: 32px; }
  .steps__list li, .steps__list li:last-child { grid-template-columns: 1fr; border: 0; border-top: 1px solid rgba(243, 239, 230, .14); padding-top: 24px; }
  .steps__list span { grid-row: auto; margin-bottom: 18px; }
  .rcard { flex-basis: 280px; }
  .area { flex-basis: 220px; }
  .footer__grid { grid-template-columns: 2fr 1fr; }
  .wall__head { grid-template-columns: auto 1fr auto; justify-items: start; text-align: left; gap: 40px; }
}
@media (min-width: 768px) and (hover: hover) { .nav a:hover { color: var(--accent); } }

/* ---------- Desktop product layout ---------- */
@media (min-width: 1024px) {
  .product { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 64px; max-width: 1240px; margin: 0 auto; padding: 40px 32px 96px; align-items: start; }
  .gallery { position: sticky; top: 92px; }
  .gallery__track { border-radius: var(--radius); }
  .gallery__track { gap: 0; }
  .slide { flex-basis: 100%; aspect-ratio: 1; }
  .gallery__dots { display: none; }
  .gallery__arrow { position: absolute; top: calc(50% - 50px); transform: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 253, 248, .92); border: 1px solid var(--line); transition: background .2s var(--ease); }
  .gallery__arrow svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .gallery__arrow--prev { left: 14px; }
  .gallery__arrow--next { right: 14px; }
  .gallery__thumbs { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-top: 12px; }
  .gallery__thumbs button { aspect-ratio: 1; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid transparent; opacity: .7; transition: opacity .2s var(--ease), border-color .2s var(--ease); }
  .gallery__thumbs button img { width: 100%; height: 100%; object-fit: cover; }
  .gallery__thumbs button.is-active { border-color: var(--ink); opacity: 1; }
  .info { padding: 0; }
  .title { font-size: 44px; }
  .rcard { flex: 0 0 calc((100% - 56px) / 5); max-width: none; }
  .strip__track { max-width: 1240px; margin: 0 auto; padding: 0 32px; overflow: visible; }
  .ugc__row { justify-content: center; }
}
@media (min-width: 1024px) and (hover: hover) {
  .gallery__arrow:hover { background: #fff; }
  .gallery__thumbs button:hover { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ---------- 2026-10-18 audit additions ---------- */
/* Eco badge (Lilla's asset): corner of the first gallery photo, and above the story. */
.slide .gallery__badge { position: absolute; top: 14px; left: 14px; width: 64px; height: 64px; pointer-events: none; filter: drop-shadow(0 2px 6px rgba(29, 36, 27, .18)); }
.story__badge { width: 76px; height: 76px; margin-bottom: 18px; }
.story__areas { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 15px !important; color: var(--muted) !important; }

/* Reviews: one section, score in the head, all ten cards in one swipe row. */
.reviews__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: 32px; }
.reviews__head .wall__score { display: flex; align-items: center; gap: 12px; }
.reviews__head .wall__score strong { font-size: 40px; }
.reviews__head .wall__score .stars { display: block; margin: 0; font-size: 17px; }
.reviews__head .wall__score small { margin: 0; font-size: 13px; }
.reviews__write { margin-top: 24px; font-size: 15px; }
.reviews__write a { text-decoration: underline; text-underline-offset: 3px; }

/* Ingredients as text: numbered list, serif names, no stock tiles. */
.ingredients__list { list-style: none; counter-reset: ing; display: grid; border-top: 1px solid var(--line); }
.ingredients__list li { counter-increment: ing; display: grid; grid-template-columns: 40px 1fr; padding: 20px 0; border-bottom: 1px solid var(--line); }
.ingredients__list li::before { content: "0" counter(ing); grid-row: span 2; font-size: 13px; font-weight: 600; color: var(--gold); padding-top: 4px; }
.ingredients__list p { color: var(--muted); font-size: 15px; margin-top: 4px; }
@media (min-width: 768px) {
  h2 { font-size: 40px; }
  .ingredients__list { grid-template-columns: repeat(2, 1fr); column-gap: 48px; }
  .slide .gallery__badge { width: 84px; height: 84px; top: 20px; left: 20px; }
}


/* =====================================================================
   ELEVATED CARDS (mockup, 2026-10-18). Patterns borrowed from Lilla's Gemini layout:
   white cards that lift off the cream page with soft green-tinted shadows, nested
   radii (24px outer, 16px inner), pill section labels, benefit chips, a framed hero
   photo with a floating review bubble, gold gift band in the selected pack.
   ===================================================================== */
:root {
  --card: #ffffff;
  --gold-light: #f4e8d1;
  --line-soft: rgba(226, 217, 201, .8);
  --shadow-sm: 0 2px 8px -1px rgba(15, 35, 22, .06), 0 1px 4px -1px rgba(15, 35, 22, .04);
  --shadow-md: 0 12px 32px -4px rgba(15, 35, 22, .10), 0 4px 12px -2px rgba(15, 35, 22, .05);
  --shadow-lg: 0 24px 48px -8px rgba(15, 35, 22, .14), 0 8px 16px -4px rgba(15, 35, 22, .06);
  --r-outer: 24px;
  --r-inner: 16px;
}

/* Pill section labels, centered section heads */
.eyebrow { display: inline-block; background: var(--dark); color: #e2c48a; font-size: 12px; letter-spacing: .1em; padding: 5px 12px; border-radius: 999px; margin-bottom: 14px; }
.section--dark .eyebrow { background: rgba(243, 239, 230, .1); color: #e2c48a; }
.section__head, .reviews__head > div:first-child { text-align: center; }
.section__head .section-sub { margin-inline: auto; }

/* Hero photo in a white frame card, inner photo rounded, review bubble floating on it */
.gallery { margin: 12px var(--gutter) 0; padding: 8px; background: var(--card); border-radius: var(--r-outer); box-shadow: var(--shadow-md); border: 1px solid var(--line-soft); }
.gallery__track { border-radius: var(--r-inner); }
.slide { aspect-ratio: 1; }
.gallery__dots { position: static; padding: 10px 0 4px; }
.gallery__arrow { top: calc(50% - 22px); }
.bubble { position: absolute; left: 20px; bottom: 50px; display: flex; align-items: center; gap: 10px; padding: 8px 12px 8px 8px; background: rgba(255, 255, 255, .9); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid var(--line-soft); border-radius: var(--r-inner); box-shadow: var(--shadow-md); font-size: 12px; line-height: 1.3; color: var(--ink); pointer-events: none; }
.bubble[hidden] { display: none; }
.bubble__faces { display: flex; }
.bubble__faces img { width: 28px; height: 28px; border-radius: 50%; border: 2px solid #fff; object-fit: cover; }
.bubble__faces img + img { margin-left: -8px; }
.bubble__text .stars { display: block; font-size: 12px; }
.bubble__text b { font-weight: 700; }

/* Benefit chips, 2 x 2 */
.chips { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 16px; }
.chips li { display: flex; align-items: center; gap: 8px; background: var(--card); border: 1px solid var(--line-soft); border-radius: 12px; padding: 9px 10px; font-size: 13px; font-weight: 600; box-shadow: var(--shadow-sm); }
.chips li::before { content: ""; flex: 0 0 16px; height: 16px; border-radius: 50%; background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4.5 8.2 2.2 2.2 4.8-4.8' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat; }

/* Pack cards: lifted, thick dark border when chosen, gold gift band inside */
.bundle { background: var(--card); border: 2px solid var(--line); border-radius: var(--r-inner); box-shadow: var(--shadow-sm); margin-bottom: 12px; }
.bundle.is-selected { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(47, 74, 43, .12), var(--shadow-md); background: linear-gradient(90deg, #fff, #f5f7f4 50%, #fff); }
.bundle.is-selected .bundle__dot { border-color: var(--accent); }
.bundle__tag { top: -11px; background: #c89a4b; color: var(--dark); font-weight: 700; padding: 5px 10px; box-shadow: var(--shadow-sm); }
.bundle__tag--alt { background: var(--dark); color: #e2c48a; }
.bundle__gifts { margin: 0 12px 12px; padding: 8px 10px; background: var(--gold-light); border-radius: 12px; gap: 8px 12px; }
.bundle__gifts::before { content: "Includes free"; flex-basis: 100%; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #8a6a2f; }
.gift { background: none; padding: 0; color: var(--ink); font-weight: 600; }
.gift img { width: 28px; height: 28px; border-radius: 8px; }

/* Button: rounded rectangle with depth, not a flat pill */
.atc { border-radius: var(--r-inner); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), var(--shadow-md); border: 1px solid #3e6339; }
@media (hover: hover) { .atc:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), var(--shadow-lg); } }

/* Trust points as icon tiles on a tinted panel */
.perks { border: 0; background: var(--tint); border-radius: var(--r-outer); padding: 16px 6px; gap: 4px; }
.perks li + li { border-left: 0; }
.perks svg { width: 44px; height: 44px; padding: 11px; background: var(--card); border-radius: 14px; box-shadow: var(--shadow-sm); border: 1px solid var(--line-soft); }

/* Review cards: lifted, photo inset with its own radius */
.rcard { background: var(--card); border-radius: var(--r-outer); box-shadow: var(--shadow-sm); border: 1px solid var(--line-soft); padding: 8px; }
.rcard .media { border-radius: var(--r-inner); }
.rcard__body { padding: 14px 10px 12px; }
.reviews__head { flex-direction: column; align-items: center; }

/* Story image and kit box lift too */
.story__img, .kitshow__hero, .feature__img, .guarantee__img { border-radius: var(--r-outer); box-shadow: var(--shadow-md); }
.kitshow__box { border-radius: var(--r-outer); box-shadow: var(--shadow-lg); border: 1px solid var(--line-soft); }

/* Comparison: dark header, Ecolura column highlighted, tick and cross marks */
.vs { border-radius: var(--r-outer); box-shadow: var(--shadow-md); border: 1px solid var(--line-soft); }
.vs__head > span { background: var(--dark); color: #f3efe6; padding-block: 15px; }
.vs__head > span:nth-child(3) { background: #24391f; color: #e2c48a; }
.vs__row:not(.vs__head) > span:nth-child(2)::before { content: "\2715  "; color: #c0574b; font-weight: 700; }
.vs__row:not(.vs__head) > span:nth-child(3)::before { content: "\2713  "; color: var(--accent); font-weight: 700; }

/* Ingredients: white cards, number tile, gold micro-label */
.ingredients__list { border-top: 0; gap: 12px; }
.ingredients__list li { display: grid; grid-template-columns: 64px 1fr; gap: 14px; align-items: start; padding: 20px; background: var(--card); border: 1px solid var(--line-soft); border-radius: var(--r-outer); box-shadow: var(--shadow-sm); }
.ingredients__list li::before { content: none; }
.ing__tile { display: block; width: 64px; height: 64px; border-radius: 16px; overflow: hidden; background: #fff; border: 1px solid var(--line-soft); box-shadow: var(--shadow-sm); }
.ing__tile img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.ingredients__list .ing__tag { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #b07a22; margin: 4px 0 6px; }

/* FAQ: each question its own card */
.faq .accordion { border-top: 0; }
.faq .accordion details { background: var(--card); border: 1px solid var(--line-soft); border-radius: var(--r-inner); box-shadow: var(--shadow-sm); margin-bottom: 12px; padding: 0 18px; }

@media (min-width: 1024px) {
  .gallery { margin: 0; }
  .bubble { bottom: 120px; }
}

/* The floating bubble carries the rating now, so the line under the photo goes. */
.info > .rating { display: none; }
.vs__head > span:nth-child(2) { color: rgba(243, 239, 230, .85); }


/* =====================================================================
   LOVABLE IDEAS (2026-10-18): promise headline with gold highlight words, price in the
   button, Shop now pill, dark trust strip, Seen on Snapchat videos, real before/after,
   dark guarantee card, final buy section. Buttons: Lilla's premium lit-from-above look
   (FatedFace .btn-lit), shaped as pills.
   ===================================================================== */

/* Premium lit pill: lighter top, deep bottom, top highlight, bottom edge, contact shadow, green glow */
.atc, .btn-lit {
  --btn-c: #2f4a2b; --btn-c-light: #4d7446; --btn-glow: rgba(47, 74, 43, .55); --btn-hi: rgba(255, 255, 255, .32);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  color: #fff; font-weight: 700; letter-spacing: .01em;
  background: linear-gradient(var(--btn-c-light), var(--btn-c));
  border: 0; border-radius: 999px;
  box-shadow: inset 0 1px 0 var(--btn-hi), inset 0 -2px 0 rgba(0, 0, 0, .22), 0 1px 2px rgba(15, 35, 22, .35), 0 8px 24px -6px var(--btn-glow);
  transition: filter 120ms ease, translate 120ms ease, box-shadow 120ms ease;
}
.atc { width: 100%; }
@media (hover: hover) { .atc:hover, .btn-lit:hover { filter: brightness(1.06); } }
.atc:active, .btn-lit:active { translate: 0 1px; box-shadow: inset 0 2px 4px rgba(0, 0, 0, .3); }
.atc--sm { width: auto; }
.btn-lit--sm { min-height: 38px; padding: 8px 16px; font-size: 13px; }
.header__shop { justify-self: end; }
.header__inner { grid-template-columns: 44px 1fr auto; }

/* Headline: promise first, gold words pop */
.kicker { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin-top: 10px; }
.title { font-size: 34px; font-weight: 600; line-height: 1.06; letter-spacing: -.025em; margin-top: 6px; }
.hl { color: #b07a22; font-style: italic; }
.section--dark .hl, .guarantee__card .hl { color: #e2c48a; }

/* Dark trust strip under the buy box */
.truststrip { background: var(--dark); color: #f3efe6; }
.truststrip ul { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 12px; padding-block: 20px; }
.truststrip li { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 13px; font-weight: 600; }
.truststrip svg { width: 20px; height: 20px; fill: none; stroke: #e2c48a; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* Seen on Snapchat: vertical video cards */
/* Videos wrap into rows instead of side-scrolling: 2 per row on phones, 4 across from 900px. */
.videos__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-width: 1240px; margin: 0 auto; padding: 4px var(--gutter) 8px; }
.vcard { position: relative; aspect-ratio: 9 / 16; border-radius: var(--r-outer); overflow: hidden; background: var(--tint); box-shadow: var(--shadow-md); }
.vcard video { width: 100%; height: 100%; object-fit: cover; display: block; }
.vcard figcaption { position: absolute; left: 12px; right: 12px; bottom: 12px; text-align: center; font-size: 12px; font-weight: 600; color: #fff; text-shadow: 0 1px 4px rgba(0, 0, 0, .5); pointer-events: none; }
.vcard--empty { display: grid; place-items: center; border: 2px dashed var(--line); box-shadow: none; }
.vcard--empty figcaption { color: var(--muted); text-shadow: none; }
.vcard__play { width: 56px; height: 56px; border-radius: 50%; background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 7v10l8-5z' fill='%23fff'/%3E%3C/svg%3E") center / 26px no-repeat; box-shadow: var(--shadow-md); }

/* Before & after: real dated photos */
.results__grid { display: grid; gap: 16px; }
.result { background: var(--card); border-radius: var(--r-outer); padding: 8px; box-shadow: var(--shadow-sm); border: 1px solid var(--line-soft); }
.result .media { aspect-ratio: 1; border-radius: var(--r-inner); }
.result figcaption { padding: 12px 8px 6px; font-size: 13px; color: var(--muted); }
.result figcaption b { color: var(--ink); margin-right: 6px; }
.results .note { margin-top: 20px; }

/* Guarantee: one dark card */
.guarantee__card { max-width: 760px; margin: 0 auto; text-align: center; background: var(--dark); color: #f3efe6; border-radius: var(--r-outer); padding: 40px 24px 44px; box-shadow: var(--shadow-lg); }
.guarantee__card .seal { color: #e2c48a; width: 112px; height: 112px; margin: 0 auto 20px; }
.guarantee__card h2 { color: #fbf8f1; }
.guarantee__card p { margin: 14px auto 0; max-width: 46ch; color: rgba(243, 239, 230, .82); font-size: 17px; }

/* Final buy section */
.final__inner { max-width: 560px; text-align: center; }
.final__inner p { color: var(--muted); margin: 12px 0 24px; font-size: 17px; }
.final__other { display: inline-block; margin-top: 14px; font-size: 15px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

@media (min-width: 768px) {
  .title { font-size: 46px; }
  .truststrip ul { grid-template-columns: repeat(4, 1fr); }
  .results__grid { grid-template-columns: repeat(3, 1fr); }
  .header__inner { grid-template-columns: auto 1fr auto; }
  .guarantee__card { padding: 56px 48px; }
}

/* Section heads: the short label is the big heading, the longer line sits under it as a subheading. */
.subhead { font-family: var(--serif); font-size: 21px; line-height: 1.25; color: var(--muted); margin-top: 10px; text-wrap: balance; }
.section__head .subhead, .reviews__head .subhead { margin-inline: auto; max-width: 30ch; }
.story__copy .subhead { margin-bottom: 18px; font-size: 21px; color: var(--muted); max-width: 30ch; }
@media (min-width: 768px) { .story__copy .subhead { font-size: 24px; } }
.guarantee__card .subhead { color: rgba(243, 239, 230, .8); }
@media (min-width: 768px) { .subhead { font-size: 24px; } }
@media (min-width: 900px) { .videos__row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } }
/* Narrow phones (under 360px wide): one video per row so each stays big enough to watch. */
@media (max-width: 359px) { .videos__row { grid-template-columns: minmax(0, 1fr); max-width: 300px; } }


/* =====================================================================
   COLOR TEST: "California beaches" (2026-10-18). Only active with ?theme=beach.
   Palette: pastel orange #FFC067, cyan #66F4FF, sky #66C4FF, slate #7D99AA.
   Darker slate and orange shades are derived for text contrast. The countdown and
   announcement bars keep their current colors on purpose (Lilla).
   ===================================================================== */
html.theme-beach {
  --bg: #fffaf2;
  --surface: #ffffff;
  --card: #ffffff;
  --tint: #eaf6ff;
  --ink: #1d2a33;
  --muted: #566a76;
  --line: #d8e6ee;
  --line-soft: rgba(196, 220, 233, .8);
  --accent: #2e4b5c;
  --accent-hover: #233b49;
  --accent-soft: #e3f3ff;
  --gold: #e8891c;
  --gold-light: #fff0d6;
  --dark: #2e4553;
  --shadow-sm: 0 2px 8px -1px rgba(46, 69, 83, .08), 0 1px 4px -1px rgba(46, 69, 83, .05);
  --shadow-md: 0 12px 32px -4px rgba(46, 69, 83, .14), 0 4px 12px -2px rgba(46, 69, 83, .06);
  --shadow-lg: 0 24px 48px -8px rgba(46, 69, 83, .18), 0 8px 16px -4px rgba(46, 69, 83, .07);
}
/* Top bars stay exactly as live */
html.theme-beach .announce { background: #1f2b1d; }

/* Header glass and sticky bar pick up the warm page */
html.theme-beach .header { background: rgba(255, 250, 242, .94); }
html.theme-beach .sticky { background: rgba(255, 255, 255, .96); }

/* Highlight words: deep orange */
html.theme-beach .hl { color: #d97a12; }
html.theme-beach .guarantee__card .hl, html.theme-beach .section--dark .hl { color: #ffc067; }
html.theme-beach .stars, html.theme-beach .bubble__text .stars { color: #f0a12e; }

/* Buttons: lit pill in pastel orange with dark text */
html.theme-beach .atc, html.theme-beach .btn-lit {
  --btn-c: #ffad3d; --btn-c-light: #ffd08f; --btn-glow: rgba(255, 160, 50, .55); --btn-hi: rgba(255, 255, 255, .6);
  color: #1d2a33;
}

/* Packs: slate selected border, orange and sky tags, warm gift band */
html.theme-beach .bundle.is-selected { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(102, 196, 255, .25), var(--shadow-md); background: linear-gradient(90deg, #fff, #f2faff 50%, #fff); }
html.theme-beach .bundle__tag { background: #ffc067; color: #1d2a33; }
html.theme-beach .bundle__tag--alt { background: #66c4ff; color: #12303f; }
html.theme-beach .bundle__gifts::before { color: #b25f00; }
html.theme-beach .chips li::before { background-color: #66c4ff; }

/* Trust strip, steps band, guarantee card, footer: slate */
html.theme-beach .truststrip svg { stroke: #66f4ff; }
html.theme-beach .section--dark .eyebrow { color: #ffc067; }
html.theme-beach .guarantee__card .seal { color: #ffc067; }
html.theme-beach .perks svg { stroke: var(--accent); }

/* Ingredient tags and tiles */
html.theme-beach .ingredients__list .ing__tag { color: #c46a00; }

/* Comparison table */
html.theme-beach .vs__head > span { background: #2e4553; }
html.theme-beach .vs__head > span:nth-child(3) { background: #24404f; color: #ffc067; }
html.theme-beach .vs__row > span:nth-child(3) { background: #e8f6ff; color: #1f4a63; }
html.theme-beach .vs__row:not(.vs__head) > span:nth-child(3)::before { color: #2b8fd1; }

/* Video play button */
html.theme-beach .vcard__play { background-color: #66c4ff; }
html.theme-beach .vs__row.vs__head > span:nth-child(3) { background: #24404f; color: #ffc067; }

/* =====================================================================
   COLOR TEST: "Coastal morning" (2026-10-18). Only active with ?theme=coastal.
   Palette: seafoam green #93C572, soft blue #89CFF0, sandy beige #F5F5DC, blue #82C8E5.
   Darker slate and orange shades are derived for text contrast. The countdown and
   announcement bars keep their current colors on purpose (Lilla).
   ===================================================================== */
html.theme-coastal {
  --bg: #f8f8e9;
  --surface: #ffffff;
  --card: #ffffff;
  --tint: #e7f5fb;
  --ink: #1c2b25;
  --muted: #55675e;
  --line: #dfe5cf;
  --line-soft: rgba(205, 221, 190, .8);
  --accent: #3f7a2a;
  --accent-hover: #32661f;
  --accent-soft: #eaf4e0;
  --gold: #5c9a3a;
  --gold-light: #eef0d4;
  --dark: #1e4656;
  --shadow-sm: 0 2px 8px -1px rgba(30, 70, 86, .08), 0 1px 4px -1px rgba(30, 70, 86, .05);
  --shadow-md: 0 12px 32px -4px rgba(30, 70, 86, .14), 0 4px 12px -2px rgba(30, 70, 86, .06);
  --shadow-lg: 0 24px 48px -8px rgba(30, 70, 86, .18), 0 8px 16px -4px rgba(30, 70, 86, .07);
}
/* Top bars stay exactly as live */
html.theme-coastal .announce { background: #1f2b1d; }

/* Header glass and sticky bar pick up the warm page */
html.theme-coastal .header { background: rgba(248, 248, 233, .94); }
html.theme-coastal .sticky { background: rgba(255, 255, 255, .96); }

/* Highlight words: deep orange */
html.theme-coastal .hl { color: #4c8a2c; }
html.theme-coastal .guarantee__card .hl, html.theme-coastal .section--dark .hl { color: #b8e39a; }
html.theme-coastal .stars, html.theme-coastal .bubble__text .stars { color: #e0a42a; }

/* Buttons: lit pill in pastel orange with dark text */
html.theme-coastal .atc, html.theme-coastal .btn-lit {
  --btn-c: #7db559; --btn-c-light: #b2da93; --btn-glow: rgba(110, 170, 80, .5); --btn-hi: rgba(255, 255, 255, .55);
  color: #16260f;
}

/* Packs: slate selected border, orange and sky tags, warm gift band */
html.theme-coastal .bundle.is-selected { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(147, 197, 114, .28), var(--shadow-md); background: linear-gradient(90deg, #fff, #f3f9ec 50%, #fff); }
html.theme-coastal .bundle__tag { background: #93c572; color: #16260f; }
html.theme-coastal .bundle__tag--alt { background: #89cff0; color: #0f3446; }
html.theme-coastal .bundle__gifts::before { color: #4f7a2a; }
html.theme-coastal .chips li::before { background-color: #5c9a3a; }

/* Trust strip, steps band, guarantee card, footer: slate */
html.theme-coastal .truststrip svg { stroke: #b8e39a; }
html.theme-coastal .section--dark .eyebrow { color: #b8e39a; }
html.theme-coastal .guarantee__card .seal { color: #b8e39a; }
html.theme-coastal .perks svg { stroke: var(--accent); }

/* Ingredient tags and tiles */
html.theme-coastal .ingredients__list .ing__tag { color: #4c8a2c; }

/* Comparison table */
html.theme-coastal .vs__head > span { background: #1e4656; }
html.theme-coastal .vs__head > span:nth-child(3) { background: #17394a; color: #b8e39a; }
html.theme-coastal .vs__row > span:nth-child(3) { background: #e9f6fc; color: #1e4656; }
html.theme-coastal .vs__row:not(.vs__head) > span:nth-child(3)::before { color: #4c8a2c; }

/* Video play button */
html.theme-coastal .vcard__play { background-color: #5c9a3a; }
html.theme-coastal .vs__row.vs__head > span:nth-child(3) { background: #17394a; color: #b8e39a; }

/* =====================================================================
   COLOR TEST: "Spring energy" (2026-10-18). Only active with ?theme=spring.
   Palette: lime #89F336, yellow #FFFC30, teal #4FE0CB, green #00BF33.
   Darker slate and orange shades are derived for text contrast. The countdown and
   announcement bars keep their current colors on purpose (Lilla).
   ===================================================================== */
html.theme-spring {
  --bg: #fafdf2;
  --surface: #ffffff;
  --card: #ffffff;
  --tint: #e6faf5;
  --ink: #10261a;
  --muted: #4d6355;
  --line: #d6eccf;
  --line-soft: rgba(196, 230, 190, .8);
  --accent: #00872a;
  --accent-hover: #006f22;
  --accent-soft: #e5f9df;
  --gold: #00a52c;
  --gold-light: #fdfccc;
  --dark: #0d3b2a;
  --shadow-sm: 0 2px 8px -1px rgba(13, 59, 42, .08), 0 1px 4px -1px rgba(13, 59, 42, .05);
  --shadow-md: 0 12px 32px -4px rgba(13, 59, 42, .14), 0 4px 12px -2px rgba(13, 59, 42, .06);
  --shadow-lg: 0 24px 48px -8px rgba(13, 59, 42, .18), 0 8px 16px -4px rgba(13, 59, 42, .07);
}
/* Top bars stay exactly as live */
html.theme-spring .announce { background: #10261a; }
/* Footer matches the top announcement bar (Lilla, 2026-10-19) */
html.theme-spring .footer { background: #10261a; }

/* Header glass and sticky bar pick up the warm page */
html.theme-spring .header { background: rgba(250, 253, 242, .94); }
html.theme-spring .sticky { background: rgba(255, 255, 255, .96); }

/* Highlight words: deep orange */
html.theme-spring .hl { color: #00a52c; }
html.theme-spring .guarantee__card .hl, html.theme-spring .section--dark .hl { color: #89f336; }
html.theme-spring .stars, html.theme-spring .bubble__text .stars { color: #e2b400; }

/* Buttons: lit pill in pastel orange with dark text */
html.theme-spring .atc, html.theme-spring .btn-lit {
  --btn-c: #6fd81c; --btn-c-light: #aaff5e; --btn-glow: rgba(110, 216, 28, .55); --btn-hi: rgba(255, 255, 255, .6);
  color: #0b2a12;
}

/* Packs: slate selected border, orange and sky tags, warm gift band */
html.theme-spring .bundle.is-selected { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(137, 243, 54, .3), var(--shadow-md); background: linear-gradient(90deg, #fff, #f3fde9 50%, #fff); }
html.theme-spring .bundle__tag { background: #fffc30; color: #10261a; }
html.theme-spring .bundle__tag--alt { background: #4fe0cb; color: #0b3a33; }
html.theme-spring .bundle__gifts::before { color: #6b6a00; }
html.theme-spring .chips li::before { background-color: #00bf33; }

/* Trust strip, steps band, guarantee card, footer: slate */
html.theme-spring .truststrip svg { stroke: #89f336; }
html.theme-spring .section--dark .eyebrow { color: #89f336; }
html.theme-spring .guarantee__card .seal { color: #89f336; }
html.theme-spring .perks svg { stroke: var(--accent); }

/* Ingredient tags and tiles */
html.theme-spring .ingredients__list .ing__tag { color: #00872a; }

/* Comparison table */
html.theme-spring .vs__head > span { background: #0d3b2a; }
html.theme-spring .vs__head > span:nth-child(3) { background: #0a2f21; color: #89f336; }
html.theme-spring .vs__row > span:nth-child(3) { background: #e6faf5; color: #0d3b2a; }
html.theme-spring .vs__row:not(.vs__head) > span:nth-child(3)::before { color: #00a52c; }

/* Video play button */
html.theme-spring .vcard__play { background-color: #00bf33; }
html.theme-spring .vs__row.vs__head > span:nth-child(3) { background: #0a2f21; color: #89f336; }

html.theme-spring .vs__row.vs__head > span:nth-child(3) { background: #0a2f21; color: #89f336; }

/* Sticky bar: five stars over the price, and a secure-payment line under the row. */
.sticky__left { flex: 1; display: grid; gap: 1px; }
.sticky__stars { font-size: 12px; line-height: 1; letter-spacing: 1px; }
.sticky__left .sticky__price { flex: none; }
.sticky__inner { padding-block: 8px 4px; }
.sticky__secure { display: flex; justify-content: center; align-items: center; gap: 5px; font-size: 12px; color: var(--muted); padding: 0 12px 8px; }
.sticky__secure svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.8; }
@media (min-width: 768px) { .sticky__left { flex: 0 0 auto; text-align: right; } }
/* Sticky button: wide and tall on phones (about 60% of the bar), roomy on desktop. */
.sticky .atc--sm { flex: 1 1 58%; max-width: 280px; min-height: 52px; font-size: 16px; padding: 12px 18px; }
.sticky__left { flex: 0 1 auto; min-width: 0; }
@media (min-width: 768px) { .sticky .atc--sm { flex: 0 0 auto; min-width: 260px; max-width: none; } }
.sticky__ship { padding-bottom: 2px; font-weight: 600; color: var(--accent); }
.sticky__ship svg { width: 14px; height: 14px; }
/* Footer clears the taller sticky bar (112px). */
.footer { padding-bottom: 136px; }
/* Shipping line under the product description */
.shipline { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; padding: 6px 12px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: 13px; font-weight: 600; }
.shipline svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* Pack picker gifts: one per line, bigger photo and text (Lilla). */
.bundle__gifts { flex-direction: column; align-items: stretch; gap: 8px; }
.bundle__gifts .gift { gap: 12px; font-size: 15px; }
.bundle__gifts .gift img { width: 44px; height: 44px; border-radius: 10px; }
/* Cutout gift photos (transparent PNG/WebP): no white tile, a soft shadow so they lift off the yellow band. */
.bundle__gifts .gift--cutout img { background: none; border-radius: 0; object-fit: contain; filter: drop-shadow(0 2px 3px rgba(60, 50, 0, .28)); }
/* Beige loofah vanished on the yellow band: white tile behind it plus a soft shadow, matching the soap case photo. */
.bundle__gifts .gift--cutout img { background: #fff; border-radius: 10px; padding: 4px; filter: none; box-shadow: 0 1px 4px rgba(60, 50, 0, .22); }

/* Gift band: light band, "+ Free ..." lines, cutout photos with a shadow. No "Includes free" label. */
.bundle__gifts { background: var(--gold-light); }
.bundle__gifts::before { content: none; }
.bundle__gifts .gift { color: var(--ink); }
/* Lilla switched to "shadows only" (2026-10-18): light band, cutouts lifted by a two-layer shadow. */
.bundle__gifts .gift--cutout img { background: none; padding: 0; box-shadow: none; border-radius: 0; filter: drop-shadow(0 3px 4px rgba(20, 30, 10, .55)) drop-shadow(0 0 1px rgba(20, 30, 10, .6)); }

/* Stars: one bright yellow everywhere (Lilla), and a star row between the secure line and the reviews line. */
:root { --star: #f5b800; }
.stars, html.theme-spring .stars, html.theme-spring .bubble__text .stars, .bubble__text .stars, .rcard__who .stars, .sticky__stars, .wall__score .stars { color: #f5b800; }
.proof-stars { text-align: center; font-size: 20px; letter-spacing: 3px; margin-top: 12px; line-height: 1; }
.proof-stars + .proof { margin-top: 8px; }
.info > .title:first-child, .info > .rating + .title { margin-top: 14px; }
/* Shipping pill sits under the price now, wraps cleanly on narrow phones. */
.price + .shipline { margin-top: 8px; line-height: 1.35; }
.shipline { border-radius: 14px; padding: 8px 14px 8px 12px; gap: 10px; }
.shipline svg { width: 20px; height: 20px; }
.shipline b { display: block; font-weight: 700; }
.shipline small { display: block; font-size: 12px; font-weight: 500; opacity: .85; }

/* ---------- Secondary pages: thank-you, contact, privacy, terms ---------- */
/* Ported from the old style.css (2026-10-18) onto store tokens so every page shares one look. */
.page { padding-top: 40px; padding-bottom: 80px; }
.page h1 { font-size: 32px; letter-spacing: -0.02em; }
.micro { font-size: 13px; color: var(--muted); }

/* Thank-you */
.thanks { max-width: 760px; }
.thanks h2 { font-size: 24px; margin-bottom: 6px; }
.tcard { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 32px 20px; text-align: center; }
.tcard__check { width: 56px; height: 56px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; margin: 0 auto 16px; }
.tcard h1 { margin-bottom: 8px; }
.tcard__sub { color: var(--muted); font-size: 15px; max-width: 46ch; margin: 0 auto; }
.tcard__order { display: flex; align-items: center; gap: 16px; text-align: left; margin: 24px auto 0; padding: 12px; border-radius: var(--radius); background: var(--tint); max-width: 420px; }
.tcard__img { width: 96px; height: 96px; flex: 0 0 96px; border-radius: var(--radius); background: var(--surface); }
.tcard__img img { object-fit: contain; }
.tcard__lines { display: grid; gap: 2px; }
.tcard__lines strong { font-size: 17px; font-weight: 600; }
.tcard__amount { font-size: 15px; font-variant-numeric: tabular-nums; }
.tcard__gifts { font-size: 13px; font-weight: 600; color: var(--accent); }
.tcard__ship { font-size: 13px; color: var(--accent); font-weight: 600; }
.tnext, .tuse { margin-top: 48px; }
.tnext__grid, .tuse__grid { list-style: none; display: grid; gap: 12px; margin-top: 20px; }
.tnext__grid li { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; display: grid; grid-template-columns: 44px 1fr; gap: 4px 14px; align-items: center; }
.tnext__icon { width: 44px; height: 44px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; grid-row: span 2; }
.tnext__grid strong, .tuse__grid strong { font-size: 15px; font-weight: 600; }
.tnext__grid p, .tuse__grid p { font-size: 13px; color: var(--muted); }
.tuse__grid li { display: flex; gap: 14px; align-items: flex-start; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; }
.tuse__grid li > span { flex: 0 0 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); color: var(--accent); display: grid; place-items: center; font-family: var(--serif); font-size: 17px; }
.tuse__grid strong { display: block; margin-bottom: 2px; }
.tgifts { margin-top: 12px; background: var(--accent-soft); border-radius: var(--radius); padding: 18px 20px; font-size: 15px; color: var(--muted); }
.tgifts h3 { color: var(--ink); margin-bottom: 8px; }
.tgifts p + p { margin-top: 8px; }
.tgifts b { color: var(--ink); }
.thanks__contact { margin-top: 40px; text-align: center; font-size: 15px; color: var(--muted); }
.thanks__back { display: block; width: max-content; margin: 18px auto 0; }

/* Contact */
.contact__intro { max-width: 640px; margin-bottom: 32px; }
.contact__grid { display: grid; gap: 24px; }
.contact__form { display: grid; gap: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px 20px; }
.contact__form label { display: grid; gap: 6px; font-size: 13px; font-weight: 600; }
.contact__form label small { font-size: 13px; color: var(--muted); font-weight: 400; }
.contact__form input, .contact__form select, .contact__form textarea { font: inherit; font-size: 15px; font-weight: 400; min-height: 48px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); color: var(--ink); width: 100%; transition: border-color .2s var(--ease); }
.contact__form textarea { resize: vertical; }
.contact__form input:focus-visible, .contact__form select:focus-visible, .contact__form textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-radius: var(--radius); border-color: var(--accent); }
.contact__form .atc { margin-top: 4px; }
.contact__form .micro { text-align: center; }
.contact__info { display: grid; gap: 12px; align-content: start; }
.contact__card { background: var(--tint); border-radius: var(--radius); padding: 18px 20px; font-size: 15px; color: var(--muted); }
.contact__card h3 { font-size: 17px; color: var(--ink); margin-bottom: 6px; }
.contact__card p + p { margin-top: 4px; }
.contact__card a, .thanks a:not(.btn-line), .legal a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* Legal text (privacy, terms) */
.legal { max-width: 760px; }
.legal h1 { margin-bottom: 6px; }
.legal h2 { font-size: 20px; line-height: 1.25; margin: 32px 0 8px; }
.legal p, .legal li { font-size: 15px; color: #3b4437; }
.legal p + p { margin-top: 10px; }
.legal ul { padding-left: 20px; margin-top: 8px; }
.legal li { margin-bottom: 6px; }
.legal mark { background: #f6e3b8; color: var(--ink); padding: 0 3px; border-radius: 4px; }

/* No sticky bar on these pages, so the footer needs no room for it. */
.footer--flat { padding-bottom: 48px; }

@media (min-width: 768px) {
  .page { padding-top: 56px; padding-bottom: 96px; }
  .page h1 { font-size: 40px; }
  .thanks h2 { font-size: 32px; }
  .tcard { padding: 40px 32px; }
  .tnext__grid, .tuse__grid { grid-template-columns: repeat(3, 1fr); }
  .tnext__grid li { grid-template-columns: 1fr; align-content: start; }
  .tnext__icon { grid-row: auto; margin-bottom: 8px; }
  .tuse__grid li { flex-direction: column; gap: 10px; }
  .contact__grid { grid-template-columns: 1.4fr 1fr; gap: 40px; }
  .contact__form { padding: 32px; }
}
/* Newer Chrome applies justify-self to plain blocks too, which centred the footer logo; pin it left. */
.footer .logo { justify-self: start; }

/* Headline A/B: only the chosen variant shows (default A when no JS). */
.ab-hl-b { display: none; }
html[data-hl="b"] .ab-hl-a { display: none; }
html[data-hl="b"] .ab-hl-b { display: block; }
html[data-hl="b"] h1.ab-hl-b { display: block; }
/* Review pull quote */
.rcard__quote { font-family: var(--serif); font-size: 19px; line-height: 1.25; color: var(--ink); margin: 2px 0 8px; }

/* =====================================================================
   COLOR TEST: "Wildflower meadow" (2026-10-18). Only active with ?theme=meadow.
   Palette: daisy white #FBF9E7, buttercup #FDB813, sky blue #82C8E5, green #7CFC00.
   Darker slate and orange shades are derived for text contrast. The countdown and
   announcement bars keep their current colors on purpose (Lilla).
   ===================================================================== */
html.theme-meadow {
  --bg: #fbf9e7;
  --surface: #ffffff;
  --card: #ffffff;
  --tint: #e8f5fb;
  --ink: #1f2a1a;
  --muted: #5a6150;
  --line: #e6e1c4;
  --line-soft: rgba(225, 218, 180, .8);
  --accent: #3d7a0c;
  --accent-hover: #2f630a;
  --accent-soft: #eef8de;
  --gold: #c98a00;
  --gold-light: #fff3cc;
  --dark: #24410f;
  --shadow-sm: 0 2px 8px -1px rgba(36, 65, 15, .08), 0 1px 4px -1px rgba(36, 65, 15, .05);
  --shadow-md: 0 12px 32px -4px rgba(36, 65, 15, .14), 0 4px 12px -2px rgba(36, 65, 15, .06);
  --shadow-lg: 0 24px 48px -8px rgba(36, 65, 15, .18), 0 8px 16px -4px rgba(36, 65, 15, .07);
}
/* Top bars stay exactly as live */
html.theme-meadow .announce { background: #1f2b1d; }

/* Header glass and sticky bar pick up the warm page */
html.theme-meadow .header { background: rgba(251, 249, 231, .94); }
html.theme-meadow .sticky { background: rgba(255, 255, 255, .96); }

/* Highlight words: deep orange */
html.theme-meadow .hl { color: #c98a00; }
html.theme-meadow .guarantee__card .hl, html.theme-meadow .section--dark .hl { color: #fdb813; }
html.theme-meadow .stars, html.theme-meadow .bubble__text .stars { color: #e2b400; }

/* Buttons: lit pill in pastel orange with dark text */
html.theme-meadow .atc, html.theme-meadow .btn-lit {
  --btn-c: #f2a900; --btn-c-light: #ffd35c; --btn-glow: rgba(253, 184, 19, .55); --btn-hi: rgba(255, 255, 255, .6);
  color: #0b2a12;
}

/* Packs: slate selected border, orange and sky tags, warm gift band */
html.theme-meadow .bundle.is-selected { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(253, 184, 19, .3), var(--shadow-md); background: linear-gradient(90deg, #fff, #fffbea 50%, #fff); }
html.theme-meadow .bundle__tag { background: #fdb813; color: #1f2a1a; }
html.theme-meadow .bundle__tag--alt { background: #82c8e5; color: #0f3446; }
html.theme-meadow .bundle__gifts::before { color: #6b6a00; }
html.theme-meadow .chips li::before { background-color: #3d7a0c; }

/* Trust strip, steps band, guarantee card, footer: slate */
html.theme-meadow .truststrip svg { stroke: #7cfc00; }
html.theme-meadow .section--dark .eyebrow { color: #7cfc00; }
html.theme-meadow .guarantee__card .seal { color: #fdb813; }
html.theme-meadow .perks svg { stroke: var(--accent); }

/* Ingredient tags and tiles */
html.theme-meadow .ingredients__list .ing__tag { color: #3d7a0c; }

/* Comparison table */
html.theme-meadow .vs__head > span { background: #24410f; }
html.theme-meadow .vs__head > span:nth-child(3) { background: #1b3209; color: #fdb813; }
html.theme-meadow .vs__row > span:nth-child(3) { background: #e8f5fb; color: #1f2a1a; }
html.theme-meadow .vs__row:not(.vs__head) > span:nth-child(3)::before { color: #3d7a0c; }

/* Video play button */
html.theme-meadow .vcard__play { background-color: #3d7a0c; }
html.theme-meadow .vs__row.vs__head > span:nth-child(3) { background: #1b3209; color: #fdb813; }

/* Sticky red countdown (2026-10-18): stays on top while scrolling; header docks under it.
   --cd-h is set by main.js only when the bar is shown, so with no bar the header stays at top: 0. */
.countdown { position: sticky; top: 0; z-index: calc(var(--z-header) + 1); }
.header { top: var(--cd-h, 0px); }
@media (min-width: 1024px) { .gallery { top: calc(92px + var(--cd-h, 0px)); } }

/* Thank-you one-tap upsell (2026-10-18) */
.tupsell { margin-top: 20px; background: var(--surface); border: 2px solid var(--accent); border-radius: var(--radius); padding: 20px 18px 16px; box-shadow: var(--shadow-md); text-align: center; }
.tupsell__tag { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); background: var(--gold-light); border-radius: 999px; padding: 4px 12px; margin-bottom: 12px; }
.tupsell__row { display: flex; align-items: center; gap: 14px; text-align: left; }
.tupsell__img { width: 88px; height: 88px; flex: 0 0 88px; border-radius: var(--radius); background: var(--tint); }
.tupsell__img img { object-fit: cover; }
.tupsell h2 { font-size: 22px; line-height: 1.15; margin: 0 0 4px; }
.tupsell__sub { font-size: 14px; color: var(--muted); }
.tupsell__btn { margin-top: 16px; min-height: 54px; font-size: 17px; }
.tupsell__fine { margin-top: 10px; font-size: 13px; color: var(--muted); }
.tupsell__fine b { font-variant-numeric: tabular-nums; color: var(--ink); }
.tupsell__no { margin-top: 8px; background: none; border: 0; font-size: 14px; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; padding: 6px; }
.tupsell__msg { margin-top: 12px; font-size: 14px; }
.tupsell.is-done { border-color: var(--line); box-shadow: none; }
.tupsell [hidden], .tupsell[hidden] { display: none; }
/* With the offer showing, the confirmation card shrinks so the offer button fits on the first phone screen. */
.has-upsell .tcard { padding: 18px 16px; }
.has-upsell .tcard__check { width: 40px; height: 40px; margin-bottom: 8px; }
.has-upsell .tcard h1 { font-size: 24px; margin-bottom: 0; }
.has-upsell .tcard__sub { display: none; }
.has-upsell .tcard__order { margin-top: 14px; }
.has-upsell .tcard__img { width: 64px; height: 64px; flex-basis: 64px; }

/* =====================================================================
   Advertorials (2026-10-19): dark-spots.html and bacne.html.
   One reading column, editorial rhythm, same tokens and buttons as the store.
   ===================================================================== */
.adv { max-width: 700px; margin: 0 auto; padding: 24px var(--gutter) 72px; }
.adv h1 { font-size: 34px; line-height: 1.08; letter-spacing: -0.02em; }
.adv__dek { font-size: 19px; line-height: 1.5; color: var(--muted); margin-top: 14px; }
.adv__by { display: flex; align-items: center; gap: 12px; margin: 22px 0 24px; padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.adv__by img { width: 40px; height: 40px; border-radius: 50%; background: var(--accent-soft); padding: 6px; }
.adv__by strong { display: block; color: var(--ink); font-size: 14px; }
.adv figure { margin: 26px 0; }
.adv figure .media { border-radius: var(--radius); aspect-ratio: 4 / 3; box-shadow: var(--shadow-sm, none); }
.adv figure .media--sq { aspect-ratio: 1; }
.adv figcaption { font-size: 13px; color: var(--muted); margin-top: 8px; }
.adv p { font-size: 17.5px; line-height: 1.72; margin-top: 18px; color: #22301f; }
.adv h2 { font-size: 28px; margin-top: 52px; }
.adv h3 { font-size: 19px; }
.adv__callout { margin: 26px 0; padding: 18px 20px; background: var(--accent-soft); border-left: 3px solid var(--accent); border-radius: 0 var(--radius) var(--radius) 0; font-size: 17px; }
.adv__callout p { margin: 0; font-size: 17px; }
.adv__kicker { font-family: var(--serif); font-style: italic; font-size: 18px !important; color: var(--accent) !important; margin-top: 8px !important; }
.adv__pull { margin: 34px 0; font-family: var(--serif); font-size: 26px; line-height: 1.25; text-align: center; color: var(--ink); }
.adv__cards { list-style: none; display: grid; gap: 12px; margin-top: 22px; }
.adv__cards li { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; font-size: 15.5px; line-height: 1.55; color: var(--muted); }
.adv__cards li strong { display: block; color: var(--ink); font-size: 16px; margin-bottom: 4px; }
.adv__cards--bad li strong::before { content: "\2715  "; color: #b42318; }
.adv__cards--num { counter-reset: n; }
.adv__cards--num li strong::before { counter-increment: n; content: counter(n) ". "; color: var(--accent); font-size: 24px; line-height: 1; vertical-align: -2px; }
.adv__ings { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 22px; }
.adv__ings div { text-align: center; font-size: 13px; color: var(--muted); line-height: 1.4; }
.adv__ings .media { aspect-ratio: 1; border-radius: var(--radius); margin-bottom: 8px; background: var(--surface); }
.adv__ings .media img { object-fit: contain; }
.adv__ings strong { display: block; color: var(--ink); font-size: 14px; }
.adv__steps { list-style: none; counter-reset: s; margin-top: 22px; display: grid; gap: 14px; }
.adv__steps li { position: relative; padding: 14px 16px 14px 60px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); font-size: 15.5px; line-height: 1.55; }
.adv__steps li::before { counter-increment: s; content: counter(s); position: absolute; left: 16px; top: 14px; width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 14px; }
.adv__steps strong { display: block; }
.adv__safety { margin: 26px 0; padding: 16px 18px; border: 1px dashed var(--line); border-radius: var(--radius); background: var(--surface); font-size: 14.5px; color: var(--muted); line-height: 1.6; }
.adv__safety strong { color: var(--ink); }
.adv__time { list-style: none; margin-top: 22px; border-left: 2px solid var(--line); padding-left: 20px; display: grid; gap: 18px; }
.adv__time li { position: relative; font-size: 15.5px; line-height: 1.55; color: var(--muted); }
.adv__time li::before { content: ""; position: absolute; left: -27px; top: 5px; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--bg); }
.adv__time strong { display: block; color: var(--ink); }
.adv__ba { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 24px 0 6px; }
.adv__ba .media { aspect-ratio: 1; border-radius: var(--radius); }
.adv__ba--3 { grid-template-columns: repeat(3, 1fr); }
.adv__quotes { display: grid; gap: 12px; margin-top: 22px; }
.adv__quote { display: flex; gap: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; font-size: 15px; line-height: 1.55; color: #3b4437; }
.adv__quote img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; flex: 0 0 52px; }
.adv__quote strong { display: block; color: var(--ink); font-size: 14px; margin-top: 6px; }
/* Comparison: editorial two-column list, no boxes or tinted column. Row label sits above each pair. */
.adv__vs { margin-top: 26px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 6px 22px 8px; box-shadow: var(--shadow-sm, none); }
.adv__vs div:last-child { padding-bottom: 14px; }
.adv__vs div { display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; padding: 14px 0 16px; border-top: 1px solid var(--line); }
.adv__vs div:first-child { border-top: 0; padding: 14px 0 12px; align-items: end; }
.adv__vs span:first-child { grid-column: 1 / -1; font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.adv__vs div:first-child span:first-child { display: none; }
.adv__vs div:first-child span { font-family: var(--serif); font-size: 19px; line-height: 1.15; white-space: nowrap; }
.adv__vs div:first-child span:nth-child(2) { color: var(--muted); font-style: italic; }
.adv__vs div:first-child span:nth-child(3) { color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 7px; }
.adv__vs div:not(:first-child) span:nth-child(2) { color: var(--muted); font-size: 15px; line-height: 1.45; }
.adv__vs div:not(:first-child) span:nth-child(3) { color: var(--ink); font-size: 15px; line-height: 1.45; font-weight: 600; }
.adv__vs div:not(:first-child) span:nth-child(2)::before { content: "✕"; margin-right: 7px; font-size: 11px; color: #b9a99a; }
.adv__vs div:not(:first-child) span:nth-child(3)::before { content: "✓"; margin-right: 7px; color: var(--accent); font-weight: 700; }
.adv__offer { margin: 44px 0 10px; background: var(--surface); border: 2px solid var(--accent); border-radius: 20px; padding: 22px 20px 20px; box-shadow: var(--shadow-md, none); }
/* No pills in the advertorials: labels are small caps with a short rule, like a magazine kicker. */
.adv .eyebrow, .adv__label { display: flex; align-items: center; gap: 10px; background: none; border: 0; border-radius: 0; padding: 0; margin: 0 0 12px; font-size: 11.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); line-height: 1.3; }
.adv .eyebrow::before, .adv__label::before { content: ""; width: 22px; height: 1.5px; background: currentColor; flex: 0 0 22px; }
.adv__label { color: var(--muted); margin-bottom: 18px; }
.adv__offer h2 { margin-top: 0; font-size: 26px; }
.adv__offer .media { aspect-ratio: 1; border-radius: var(--radius); margin: 16px 0; background: #fff; }
.adv__offer ul { list-style: none; margin: 4px 0 18px; font-size: 15.5px; }
.adv__offer li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px dashed var(--line); }
.adv__offer li b { color: var(--accent); white-space: nowrap; }
.adv__offer li:first-child b { color: var(--ink); }
.adv__offer .atc { margin-top: 4px; }
.adv__offer .note a { text-decoration: underline; text-underline-offset: 3px; }
.adv__disclaimer { margin-top: 40px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 12.5px !important; line-height: 1.6 !important; color: var(--muted) !important; }
.adv-sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-sticky); background: rgba(255, 255, 255, .96); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-top: 1px solid var(--line); padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 12px; transform: translateY(110%); transition: transform .35s var(--ease); }
.adv-sticky.show { transform: none; }
.adv-sticky__txt { flex: 1; font-size: 13px; line-height: 1.3; color: var(--muted); }
.adv-sticky__txt strong { display: block; color: var(--ink); font-size: 14px; }
.adv-sticky .atc { width: auto; min-height: 46px; padding: 12px 20px; font-size: 14px; }
@media (min-width: 768px) {
  .adv { padding-top: 40px; }
  .adv h1 { font-size: 46px; }
  .adv h2 { font-size: 32px; }
  .adv__cards--2 { grid-template-columns: 1fr 1fr; }
  .adv__offer { padding: 32px; }
}

/* Headline test arm c (2026-10-20): problem-first headline and proof above the gallery, countdown under the buy button. */
.ab-hl-c { display: none; }
html[data-hl="c"] .ab-hl-c { display: block; }
html[data-hl="c"] .ab-hl-a, html[data-hl="c"] .info > .rating { display: none; }
.hero-c { padding: 16px var(--gutter) 2px; max-width: 1240px; margin: 0 auto; }
.hero-c .title { margin: 0; }
.hero-c__proof { display: flex; align-items: center; gap: 10px; margin-top: 10px; font-size: 13px; color: var(--muted); }
.hero-c__proof b { color: var(--ink); }
.hero-c__faces { display: flex; }
.hero-c__faces img { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--bg); object-fit: cover; }
.hero-c__faces img + img { margin-left: -8px; }
.hero-c .promise { margin-top: 8px; }
.countdown--inline { position: static; border-radius: 12px; margin-top: 10px; }