/* ===== HOUSE SKIN — role overrides the token swap cannot express =========================
   The donor used ONE white for text on the dark page AND for text on gold buttons. The token
   swap turned that white to ink everywhere, so every filled control went black-on-black
   (Kalp, 2026-09-10 screenshots). A token is a VALUE; these are ROLES. Loaded LAST in <head>.
   Rules are written by ROLE (filled control / clipped-gradient text / card / photo caption /
   brand mark) so a re-skin edits values here and nowhere else. No !important; doubled
   class selectors win on specificity without opting out of the cascade.
   ======================================================================================= */
:root { --hx-fill: #030303; --hx-on-fill: #ffffff; --hx-paper: #ffffff; --hx-rule: #030303; --hx-muted: rgba(3,3,3,.72); }

/* 1. FILLED CONTROLS — flat ink fill, paper text, paper-on-ink hover */
.based-buybox__atc.based-buybox__atc, .based-hero-v2__cta.based-hero-v2__cta, .based-ingredients__cta.based-ingredients__cta,
.based-sticky-cta__btn.based-sticky-cta__btn, .based-tabs__radio:checked + .based-tabs__tab.based-tabs__tab {
  background: var(--hx-fill); background-image: none; color: var(--hx-on-fill); border: 1px solid var(--hx-fill); }
.based-buybox__atc-label.based-buybox__atc-label, .based-buybox__atc-price.based-buybox__atc-price, .based-hero-v2__cta-label.based-hero-v2__cta-label,
.based-buybox__atc .based-buybox__atc-compare, .based-sticky-cta__btn span { color: var(--hx-on-fill); }
.based-buybox__atc.based-buybox__atc:hover:not(:disabled), .based-hero-v2__cta.based-hero-v2__cta:hover, .based-ingredients__cta.based-ingredients__cta:hover {
  background: var(--hx-paper); color: var(--hx-fill); filter: none; }
.based-buybox__atc.based-buybox__atc:hover:not(:disabled) .based-buybox__atc-label, .based-buybox__atc.based-buybox__atc:hover:not(:disabled) .based-buybox__atc-price,
.based-hero-v2__cta.based-hero-v2__cta:hover .based-hero-v2__cta-label { color: var(--hx-fill); }
.based-buybox__atc.based-buybox__atc:active:not(:disabled) { background: var(--hx-fill); filter: none; }

/* 2. OUTLINE CONTROLS — paper fill, ink rule, ink text */
.based-tabs__tab.based-tabs__tab { color: var(--hx-fill); background: var(--hx-paper); border: 1px solid var(--hx-rule); }
.bbw-header__routine.bbw-header__routine { background: var(--hx-paper); background-image: none; color: var(--hx-fill); border: 1px solid var(--hx-rule); }
.bbw-header__routine.bbw-header__routine span { color: var(--hx-fill); }
.bbw-header__routine.bbw-header__routine:hover { background: var(--hx-fill); color: var(--hx-on-fill); }
.bbw-header__routine.bbw-header__routine:hover span { color: var(--hx-on-fill); }

/* 3. CLIPPED-GRADIENT TEXT — the gold gradient painted through the glyphs; now plain ink */
.based-hero-v2__headline.based-hero-v2__headline, .based-hero-v2__subhead.based-hero-v2__subhead, .based-comparison__heading-accent.based-comparison__heading-accent,
.based-buybox__toiletry-text.based-buybox__toiletry-text, .based-buybox__toiletry-text.based-buybox__toiletry-text s,
.based-single-product-template .based-hero-v2__headline.based-hero-v2__headline, .based-hero-v2--headline-first .based-hero-v2__subhead.based-hero-v2__subhead {
  background: none; background-image: none; color: var(--hx-fill); -webkit-text-fill-color: var(--hx-fill); }
.based-buybox__toiletry-text.based-buybox__toiletry-text s:after { background-image: none; background: var(--hx-fill); }

/* 4. CARDS — paper panel, hairline rule; a filled panel is an event, not a default */
.based-buybox__toiletry.based-buybox__toiletry { background: var(--hx-paper); background-image: none; border: 1px solid var(--hx-rule); }
.based-buybox__toiletry-icon.based-buybox__toiletry-icon { color: var(--hx-fill); }
.based-buybox__sale-card.based-buybox__sale-card, .based-buybox__sale-card--global.based-buybox__sale-card--global,
.based-single-product-template .based-buybox__sale-card--single.based-buybox__sale-card--single, .based-bundle-product-template .based-buybox__sale-card--bundle.based-buybox__sale-card--bundle {
  background: var(--hx-paper); background-image: none; border: 1px solid var(--hx-rule); color: var(--hx-fill); }
.based-buybox__sale-card .based-buybox__sale-heading, .based-buybox__sale-card .based-buybox__sale-heading > span, .based-buybox__sale-card .based-buybox__sale-kicker { color: var(--hx-fill); }
.based-buybox__sale-card .based-buybox__sale-highlight, .based-buybox__sale-card .based-buybox__sale-heading > .based-buybox__sale-highlight { color: var(--hx-fill); font-weight: 600; }
.based-buybox__sale-card .based-buybox__sale-icon, .based-buybox__sale-card .based-buybox__sale-heading > .based-buybox__sale-icon { color: var(--hx-fill); }
.based-buybox__sale-card .based-buybox__sale-body, .based-buybox__sale-card .based-buybox__sale-copy > span:last-child { color: var(--hx-muted); }

/* 5. PHOTO CAPTIONS — the ingredient tiles are photographs; the caption sits on a scrim, so it stays paper */
.based-ingredients__item.based-ingredients__item { background: #f2f2f2; }
.based-ingredients__item.based-ingredients__item:after { background: linear-gradient(180deg, rgba(3,3,3,0) 40%, rgba(3,3,3,.62) 100%); }
.based-ingredients__caption, .based-ingredients__caption h3, .based-ingredients__caption p, .based-ingredients__caption * { color: var(--hx-on-fill); }

/* 6. BRAND MARKS + ICON ART — the donor's marks are light-on-dark files; invert to ink on paper */
.bbw-footer.bbw-footer { background: var(--hx-paper); color: var(--hx-fill); }
.bbw-footer__logo.bbw-footer__logo { filter: invert(1); }
.bbw-footer__watermark.bbw-footer__watermark, .bbw-footer__watermark-mobile.bbw-footer__watermark-mobile { filter: invert(1); opacity: .06; }
.based-buybox__order-benefit-icon, .based-hero-v2__usp-icon, .based-hero-v2__sub-usp-icon, .based-ingredients__sub-usp-icon, .based-trust-strip__icon,
.based-comparison__badge img, .based-buybox__inbox-usp img, .based-ingredients__trust img, .based-buybox__best-for-pill img { filter: grayscale(1) brightness(.25); }

/* 7. PACK CARDS — paper cards, ink rule; selection = a heavier rule, never a wash */
.based-pack__card.based-pack__card, .based-pack__card--best.based-pack__card--best, .based-pack__card--thin.based-pack__card--thin,
.based-single-product-template .based-pack__card.based-pack__card {
  background: var(--hx-paper); background-image: none; border: 1px solid var(--hx-rule); color: var(--hx-fill); }
.based-pack__card--selected.based-pack__card--selected, .based-pack__card--thin.based-pack__card--thin.based-pack__card--selected,
.based-single-product-template .based-pack__card--selected.based-pack__card--selected {
  background: var(--hx-paper); background-image: none; border: 2px solid var(--hx-rule); }
.based-pack__card.based-pack__card:hover { border-color: var(--hx-rule); }
.based-pack__badge.based-pack__badge, .based-pack__badge--popular.based-pack__badge--popular, .based-pack__badge--best_value.based-pack__badge--best_value,
.based-pack__card--selected .based-pack__badge.based-pack__badge, .based-pack__card:not(.based-pack__card--selected) .based-pack__badge--popular.based-pack__badge--popular,
.based-pack__card:not(.based-pack__card--selected) .based-pack__badge--best_value.based-pack__badge--best_value {
  background: var(--hx-fill); background-image: none; color: var(--hx-on-fill); }
.based-pack__savings-badge.based-pack__savings-badge, .based-pack__free-shipping.based-pack__free-shipping,
.based-pack__card--selected .based-pack__savings-badge.based-pack__savings-badge, .based-pack__card--selected .based-pack__free-shipping.based-pack__free-shipping {
  background: var(--hx-paper); background-image: none; color: var(--hx-fill); border: 1px solid var(--hx-rule); }
.based-pack__savings-badge svg, .based-pack__free-shipping svg, .based-pack__included-icon.based-pack__included-icon { color: var(--hx-fill); }
.based-pack__included-summary.based-pack__included-summary { background: var(--hx-paper); color: var(--hx-fill); border: 1px solid var(--hx-rule); }
.based-pack__included-summary.based-pack__included-summary span { color: var(--hx-fill); }
.based-pack__included-body.based-pack__included-body { background: var(--hx-paper); color: var(--hx-muted); border: 1px solid var(--hx-rule); }

/* 8. ICON ART, CORRECTED (Kalp 2026-09-10 #2) — the benefit icons are a dark disc with a LIGHT glyph: left alone they
   are already ink-on-paper; darkening them buried the glyph. The chevron and the giant footer wordmark are WHITE files:
   invert to ink; the watermark reads at ~12% so it is visible, not a ghost. */
.based-buybox__order-benefit-icon.based-buybox__order-benefit-icon, .based-buybox__order-benefit-icon img { filter: none; }
.based-tabs__chev img, .based-tabs__chev svg, .based-tabs__summary img { filter: invert(1); }
.bbw-footer__watermark.bbw-footer__watermark, .bbw-footer__watermark-mobile.bbw-footer__watermark-mobile { filter: invert(1); opacity: .12; }
.based-buybox__order-benefit-icon img, .based-buybox__order-benefit-icon.based-buybox__order-benefit-icon { filter: grayscale(1); }

/* 9. GALLERY ARROWS (Kalp 2026-09-10 #5) — the donor's white glyph on a dark disc; the ink swap took the
   glyph to black too. Ink disc, paper glyph. */
.based-gallery__nav.based-gallery__nav { background: rgba(3,3,3,.85); color: var(--hx-on-fill); }
.based-gallery__nav.based-gallery__nav svg, .based-gallery__nav.based-gallery__nav path { color: var(--hx-on-fill); fill: currentColor; stroke: currentColor; }
.based-gallery__nav.based-gallery__nav img { filter: invert(1); }
.based-gallery__nav.based-gallery__nav:hover { background: var(--hx-fill); }

/* 10. INGREDIENT POPOVER — the heading needs air above the list once the subheading is gone */
.based-ingredients__popover.based-ingredients__popover h3 { margin-bottom: 18px; }
.based-ingredients__popover.based-ingredients__popover ul { margin-top: 18px; }

/* 11. THE BODY IS A GROUND TOO (Kalp 2026-09-10 #6, "find that grey bar once and for all"). The donor's <body>
   background was a dark ground token; the white ramp ranks grounds by lightness and only the darkest becomes
   paper, so the body landed at rgb(210,210,210) and showed through every gap between sections as a grey band.
   Four probes missed it because they walked `body *`, never the body. */
/* bbw-base.css is linked INSIDE <body> (three times) and paints body:not(.bbw-redesign) at (0,1,1) after this file;
   (0,1,2) beats it regardless of order. */
html, html body:not(.bbw-redesign), html body.bbw-redesign { background: var(--hx-paper); background-color: var(--hx-paper); }

/* 12. HERO STAT LINE wraps on phones (Kalp 2026-09-10: it overflowed and hid the Rolling Stone line) */
@media (max-width: 760px) { .based-hero-v2__stat-row.based-hero-v2__stat-row, .based-hero-v2__stat.based-hero-v2__stat { white-space: normal; overflow: visible; max-width: 100%; } }