/*
 * Site Style "brand" (runviet-wp 4.39.0) -- mint family + CTA colour, Figtree.
 * Ported from 01-wordpress/prototypes/product-styles/style2-brand.
 *
 * Every colour derives from the site's own options (--st-* tokens, printed by
 * inc/site-style.php): the mint family is the primary colour mixed with white, the ink is
 * the primary darkened, the CTA is the CTA colour. No brand hue is hard-coded, so the same
 * style reads right on a teal, green or maroon site. Fixed colours kept on purpose: star
 * gold and the amber warning panel.
 *
 * Motion (PORT-SPEC): content is visible on first paint. Only press springs, the gallery
 * swap, slow blob drift, the badge bob, the seal spin and doodle spark strokes move; all
 * of it stops under prefers-reduced-motion.
 */

body.rv-style-brand {
  --bx-brand: var(--st-brand, #0E4D3F);
  --bx-ink: color-mix(in srgb, var(--bx-brand) 84%, #000);
  --bx-ink-deep: color-mix(in srgb, var(--bx-brand) 64%, #000);
  --bx-text: color-mix(in srgb, var(--st-text, #15201D) 20%, #111816);
  --bx-head: color-mix(in srgb, var(--st-heading, #15201D) 28%, #0F1513);
  --bx-muted: color-mix(in srgb, var(--bx-text) 74%, #fff);
  --bx-line: color-mix(in srgb, var(--bx-brand) 14%, #fff);
  --bx-g25: color-mix(in srgb, var(--bx-brand) 4%, #fff);
  --bx-g50: color-mix(in srgb, var(--bx-brand) 8%, #fff);
  --bx-g100: color-mix(in srgb, var(--bx-brand) 15%, #fff);
  --bx-g200: color-mix(in srgb, var(--bx-brand) 27%, #fff);
  --bx-g300: color-mix(in srgb, var(--bx-brand) 48%, #fff);
  --bx-cta: var(--st-cta, #D9481F);
  --bx-cta-hi: color-mix(in srgb, var(--bx-cta) 88%, #fff);
  --bx-cta-press: color-mix(in srgb, var(--bx-cta) 76%, #000);
  --bx-cta-soft: color-mix(in srgb, var(--bx-cta) 12%, #fff);
  --bx-on-cta: var(--st-on-cta, #fff);
  --bx-bg: var(--st-bg, #fff);
  --bx-star: #F2A516;
  --bx-star-off: color-mix(in srgb, var(--bx-brand) 12%, #E4E7E6);
  --bx-font: var(--st-font, system-ui, sans-serif);
  --bx-r-lg: 26px;
  --bx-r-md: 20px;
  --bx-r-sm: 14px;
  --bx-gut: 18px;
  --bx-ease: cubic-bezier(.22, 1, .36, 1);
  --bx-spring: cubic-bezier(.34, 1.4, .64, 1);
  --bx-shadow: 0 1px 2px color-mix(in srgb, var(--bx-ink) 8%, transparent), 0 10px 28px -12px color-mix(in srgb, var(--bx-ink) 30%, transparent);
  --rv-illo-fill: var(--bx-g200);
  --rv-illo-paper: #fff;
  background: var(--bx-bg);
  color: var(--bx-text);
  font-family: var(--bx-font);
}

/* =================== base (product body) =================== */
.bx-main { font: 500 17px/1.56 var(--bx-font); color: var(--bx-text); overflow-x: clip; }
.bx-main *, .bx-main *::before, .bx-main *::after { box-sizing: border-box; }
.bx-main img { max-width: 100%; height: auto; display: block; }
.bx-main h1, .bx-main h2, .bx-main h3 { margin: 0; font-family: var(--bx-font); font-weight: 800; letter-spacing: -.02em; line-height: 1.14; text-wrap: balance; color: var(--bx-head); }
.bx-main p { margin: 0; }
.bx-main ul, .bx-main ol { margin: 0; padding: 0; list-style: none; }
.bx-main em { font-style: normal; }
.bx-main fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.bx-main [id] { scroll-margin-top: 84px; }
.bx-main :focus-visible { outline: 3px solid var(--bx-cta-hi); outline-offset: 3px; border-radius: 8px; }
.bx-main .rv-illo { display: block; }
/* Motion rule: images are visible on first paint -- main.css's lazy fade starts them at
   opacity 0, which left blank tiles on a fast flick (gallery thumbs, collages, banner, herbs). */
body.rv-style-brand img[loading="lazy"] { opacity: 1; transition: none; }

.bx-wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 var(--bx-gut); }
.bx-narrow { width: 100%; max-width: 720px; margin: 0 auto; padding: 0 var(--bx-gut); }
.bx-block { position: relative; padding: 32px 0; }
.bx-block--mint { background: var(--bx-g100); }
.bx-block--soft { background: var(--bx-g25); }
.bx-block--ink { background: var(--bx-ink); }
.bx-center { text-align: center; }

.bx-h2 { font-size: clamp(28px, 7.6vw, 42px); font-weight: 900 !important; }
.bx-h2 em, .bx-h3 em { color: var(--bx-ink); background: linear-gradient(transparent 62%, var(--bx-g200) 62%, var(--bx-g200) 92%, transparent 92%); padding: 0 .08em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.bx-block--mint .bx-h2 em { background: linear-gradient(transparent 62%, #fff 62%, #fff 92%, transparent 92%); }
.bx-h3 { font-size: 20px; line-height: 1.22; }
.bx-lead { font-size: 17px; color: var(--bx-muted); margin-top: 12px; }
.bx-sec-head { display: flex; align-items: end; justify-content: space-between; gap: 16px; }
.bx-sec-sub { color: var(--bx-muted); margin-top: 6px; font-size: 16px; }
.bx-tag {
  display: inline-block; font-size: 13.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--bx-ink); background: var(--bx-g100); padding: 6px 13px; border-radius: 999px; margin-bottom: 12px;
}
.bx-tag--ink { background: var(--bx-ink); color: #fff; }
.bx-label { font-weight: 800; font-size: 17px; margin: 18px 0 10px; padding: 0; color: var(--bx-head); }

/* waves: sit on the band's top edge */
.bx-wave { position: absolute; left: 0; top: -29px; width: 100%; height: 30px; display: block; }
.bx-wave path { fill: var(--bx-g100); }

/* =================== buttons =================== */
.rv-style-brand .bx-cta {
  display: flex; align-items: center; justify-content: center; gap: 2px; text-align: center; text-decoration: none;
  min-height: 56px; padding: 12px 24px; border: 0; border-radius: 999px; cursor: pointer; overflow: visible; isolation: auto;
  background: var(--bx-cta); color: var(--bx-on-cta); font: 800 18.5px/1.2 var(--bx-font); text-shadow: none; filter: none;
  box-shadow: 0 6px 0 var(--bx-cta-press), 0 14px 24px -10px color-mix(in srgb, var(--bx-cta) 55%, transparent);
  transition: transform .18s var(--bx-ease), box-shadow .18s var(--bx-ease), background .2s;
}
.rv-style-brand .bx-cta::before, .rv-style-brand .bx-cta::after { content: none; display: none; }
.rv-style-brand .bx-cta:hover { background: var(--bx-cta-hi); transform: none; filter: none; box-shadow: 0 6px 0 var(--bx-cta-press), 0 14px 24px -10px color-mix(in srgb, var(--bx-cta) 55%, transparent); }
.rv-style-brand .bx-cta:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--bx-cta-press), 0 6px 14px -8px color-mix(in srgb, var(--bx-cta) 50%, transparent); }
.rv-style-brand .bx-cta--xl { width: 100%; min-height: 64px; font-size: 20.5px; flex-direction: column; padding: 10px 20px; }
.bx-cta__sub { font-size: 15px; font-weight: 700; opacity: .92; }
/* main.css pins .rv-btn-primary { background: var(--color-cta) !important } -- answered here */
.rv-style-brand .bx-cta--light { display: inline-flex; background: #fff !important; color: var(--bx-ink); box-shadow: 0 6px 0 var(--bx-g300); }
.rv-style-brand .bx-cta--light:hover { background: var(--bx-g50) !important; box-shadow: 0 6px 0 var(--bx-g300); }

/* =================== hero =================== */
.bx-hero { padding-top: 2px; padding-bottom: 28px; }
.bx-stage { position: relative; aspect-ratio: 1 / .84; margin: 0 -6px; isolation: isolate; }
.bx-stage__blob { position: absolute; inset: 4% 5%; width: 90%; height: 92%; z-index: -1; animation: bx-spin 40s linear infinite; }
.bx-stage__blob path { fill: var(--bx-g100); }
.bx-stage__blob--2 { inset: 11% 11%; width: 78%; height: 78%; animation-duration: 56s; animation-direction: reverse; }
.bx-stage__blob--2 path { fill: var(--bx-g200); opacity: .55; }
@keyframes bx-spin { to { transform: rotate(360deg); } }
/* v4.43.4: the packshot sits in a clipping frame. Sizing the <img> alone let an oversized or
   odd-ratio mockup spill out of the stage and cover the thumbnail row on some phones
   (heenza Parazicid) -- the frame can never grow past its box, whatever the file is. */
.bx-stage__frame {
  position: absolute; left: 14%; top: 10%; width: 72%; height: 76%; overflow: hidden;
  border-radius: var(--bx-r-lg);
}
.bx-stage.has-photo .bx-stage__frame { box-shadow: var(--bx-shadow); background: var(--bx-g50); }
.bx-stage .bx-stage__img {
  /* .bx-stage prefix: `.bx-main img { height: auto }` (0,1,1) used to beat a bare
     .bx-stage__img (0,1,0), so the height never applied and a non-square file set its
     own height -- the real cause of the packshot covering the thumbnails. */
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover;
  transition: opacity .25s var(--bx-ease), transform .4s var(--bx-ease);
}
/* Cutout packshot: contained, with room at the bottom of the frame for its drop shadow. */
.bx-stage .bx-stage__img.is-cutout { inset: 0 3% 9% 3%; width: 94%; height: 91%; object-fit: contain; filter: drop-shadow(0 14px 14px color-mix(in srgb, var(--bx-ink) 18%, transparent)); }
@supports not (aspect-ratio: 1) { .bx-stage { height: 0; padding-top: 84%; } }
.bx-stage .bx-stage__img.is-swapping { opacity: .15; transform: scale(.96); }
.bx-stage.has-photo .bx-ring { opacity: 0; transition: opacity .25s; }
.bx-ring { position: absolute; inset: 0; pointer-events: none; transition: opacity .25s; }
.bx-ring__badge {
  position: absolute; display: flex; align-items: center; gap: 7px;
  background: #fff; border-radius: 999px; padding: 4px 12px 4px 4px; box-shadow: var(--bx-shadow);
  font-size: 14.5px; font-weight: 800; color: var(--bx-ink); line-height: 1.15; max-width: 168px;
  animation: bx-bob 5s ease-in-out infinite; animation-delay: calc(var(--i) * -1.3s);
}
.bx-ring__ic { flex: none; width: 38px; height: 38px; border-radius: 50%; background: var(--bx-g100); display: grid; place-items: center; color: var(--bx-ink); --rv-illo-fill: #fff; }
.bx-ring__ic svg { width: 28px; height: 28px; }
.bx-ring__badge--0 { left: 0; top: 3%; }
.bx-ring__badge--1 { right: 0; top: 16%; }
.bx-ring__badge--2 { left: 0; bottom: 16%; }
.bx-ring__badge--3 { right: 0; bottom: 2%; }
@keyframes bx-bob { 50% { transform: translateY(-6px); } }

.bx-thumbs { position: relative; z-index: 2; display: flex; gap: 9px; overflow-x: auto; padding: 10px 2px 4px; scrollbar-width: none; scroll-snap-type: x mandatory; }
.bx-thumbs::-webkit-scrollbar { display: none; }
.bx-thumb {
  flex: none; width: 58px; height: 58px; padding: 0; border-radius: 16px; overflow: hidden; cursor: pointer;
  border: 2.5px solid transparent; background: var(--bx-g50); scroll-snap-align: start;
  transition: border-color .2s, transform .2s var(--bx-ease);
}
.bx-thumb img { width: 100%; height: 100%; object-fit: cover; }
.bx-thumb.is-on { border-color: var(--bx-ink); transform: translateY(-2px); }

.bx-cats { display: flex; gap: 6px; margin: 12px calc(var(--bx-gut) * -1) 0 !important; padding: 0 var(--bx-gut); overflow-x: auto; scrollbar-width: none; }
.bx-cats::-webkit-scrollbar { display: none; }
.bx-cats span { flex: none; white-space: nowrap; font-size: 13.5px; font-weight: 700; color: var(--bx-ink); background: var(--bx-g50); border: 1px solid var(--bx-g200); padding: 3px 10px; border-radius: 999px; }
.bx-hero__name { font-size: clamp(40px, 11vw, 58px) !important; font-weight: 900 !important; letter-spacing: -.035em !important; margin-top: 10px !important; }
.bx-rating { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 8px; font-size: 16px; }
.bx-rating a { color: var(--bx-muted); text-decoration: underline; text-decoration-color: var(--bx-g300); text-underline-offset: 3px; }
.bx-rating__sold { flex-basis: 100%; color: var(--bx-muted); font-weight: 600; font-size: 15.5px; }
.bx-stars { display: inline-flex; gap: 1px; vertical-align: middle; }
.bx-star { width: 19px; height: 19px; }
.bx-hero__desc { margin-top: 10px !important; font-size: 17.5px; }

/* buy box */
.bx-buybox { margin-top: 18px; }
.bx-price { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; }
.bx-price__now { font-size: 40px; font-weight: 900; letter-spacing: -.03em; color: var(--bx-head); line-height: 1; }
.bx-price__was { font-size: 19px; color: var(--bx-muted); font-weight: 600; }
.bx-save { background: var(--bx-cta); color: var(--bx-on-cta); font-weight: 800; font-size: 14.5px; padding: 4px 10px; border-radius: 999px; }

.bx-pkgs { display: grid; gap: 10px; }
.bx-pkgs > legend { float: left; width: 100%; }
.bx-pkg {
  position: relative; display: grid; grid-template-columns: 24px auto minmax(0, 1fr) auto; align-items: center; column-gap: 10px; row-gap: 2px;
  padding: 12px 12px; border: 2px solid var(--bx-line); border-radius: var(--bx-r-md); cursor: pointer; background: #fff;
  transition: border-color .2s, background .2s, box-shadow .2s;
}
.bx-pkg input { position: absolute; opacity: 0; pointer-events: none; }
.bx-pkg:focus-within { outline: 3px solid var(--bx-cta-hi); outline-offset: 2px; }
.bx-pkg__radio { width: 24px; height: 24px; border-radius: 50%; border: 2.5px solid var(--bx-g300); background: #fff; display: grid; place-items: center; }
.bx-pkg__radio::after { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--bx-ink); transform: scale(0); transition: transform .3s var(--bx-spring); }
.bx-pkg.is-selected { border-color: var(--bx-ink); background: var(--bx-g25); box-shadow: 0 0 0 4px var(--bx-g100); }
.bx-pkg.is-selected .bx-pkg__radio { border-color: var(--bx-ink); }
.bx-pkg.is-selected .bx-pkg__radio::after { transform: scale(1); }
.bx-pkg.is-spring { animation: bx-spring .5s var(--bx-spring); }
@keyframes bx-spring { 0% { transform: scale(.965); } 100% { transform: scale(1); } }
.bx-pkg--pop { margin-top: 8px; padding-top: 18px; }
.bx-pkg__ribbon {
  position: absolute; top: -12px; left: 46px; background: var(--bx-cta); color: var(--bx-on-cta); font-weight: 800; font-size: 12.5px;
  letter-spacing: .04em; text-transform: uppercase; padding: 3px 11px; border-radius: 999px; line-height: 1.4;
}
.bx-pkg__boxes { display: flex; width: 60px; height: 46px; align-items: end; }
.bx-pkg__boxes img { width: 44px; height: 44px; object-fit: contain; margin-left: -34px; filter: drop-shadow(1px 2px 2px color-mix(in srgb, var(--bx-ink) 20%, transparent)); }
.bx-pkg__boxes img:first-child { margin-left: 0; }
.bx-pkg__boxes--4 img:not(:first-child) { margin-left: -38px; }
.bx-pkg__main { display: grid; min-width: 0; line-height: 1.25; }
.bx-pkg__qty { font-size: 18.5px; font-weight: 800; color: var(--bx-head); }
.bx-pkg__per { font-size: 14.5px; color: var(--bx-muted); font-weight: 600; }
.bx-pkg__price { display: grid; justify-items: end; text-align: right; line-height: 1.2; }
.bx-pkg__price b { font-size: 19.5px; font-weight: 900; color: var(--bx-head); }
.bx-pkg__price s { font-size: 14px; color: var(--bx-muted); }
.bx-pkg__save { font-size: 13px; font-weight: 800; color: var(--bx-cta-press); background: var(--bx-cta-soft); padding: 1px 8px; border-radius: 999px; margin-top: 2px; }
.bx-pkg__ship { grid-column: 2 / -1; display: flex; align-items: center; gap: 5px; font-size: 14px; color: var(--bx-brand); font-weight: 700; padding-top: 5px; border-top: 1.5px dashed var(--bx-line); margin-top: 5px; }
.bx-pkg__ship .bx-tick { width: 16px; height: 16px; flex: none; }
.bx-pkgs__ship { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 10px !important; font-size: 15px; font-weight: 700; color: var(--bx-brand); }
.bx-pkgs__ship .bx-tick { width: 18px; height: 18px; }

.bx-buybox .bx-cta--xl { margin-top: 18px; }
.bx-eta { margin-top: 10px !important; text-align: center; font-size: 15.5px; color: var(--bx-muted); }
.bx-eta b { color: var(--bx-ink); }
.bx-mini-trust { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 14px !important; }
.bx-mini-trust li { display: grid; justify-items: center; gap: 3px; text-align: center; font-size: 13.5px; font-weight: 700; line-height: 1.25; color: var(--bx-ink); background: var(--bx-g25); border-radius: var(--bx-r-sm); padding: 8px 6px; }
.bx-mini-trust svg { width: 26px; height: 26px; color: var(--bx-ink); }

/* =================== doodles =================== */
.bx-doodle { position: relative; display: inline-grid; place-items: center; flex: none; color: var(--bx-ink); }
.bx-doodle--lg { width: 104px; height: 104px; }
.bx-doodle--md { width: 88px; height: 88px; }
.bx-doodle--sm { width: 62px; height: 62px; }
.bx-doodle__blob { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(calc(var(--v) * 40deg)); }
.bx-doodle__blob path { fill: var(--bx-g200); }
.bx-block--mint .bx-doodle__blob path { fill: #fff; }
.bx-doodle .bx-doodle__icon { position: relative; width: 60%; height: 60%; }
.bx-doodle__spark { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.bx-doodle__spark path { fill: none; stroke: var(--bx-ink); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset .5s var(--bx-ease) .2s; }
.bx-doodle__spark .sq { stroke: var(--bx-brand); stroke-width: 3.5; transition-delay: .35s; }
/* JS draws the ticks when the doodle scrolls in; icon + blob are visible from first paint. */
.bx-js .bx-doodle:not(.is-drawn) .bx-doodle__spark path { stroke-dashoffset: 1; }
.bx-doodle.is-drawn .bx-doodle__icon { animation: bx-wiggle .6s var(--bx-spring); }
@keyframes bx-wiggle { 40% { transform: rotate(-7deg) scale(1.04); } }

/* =================== hero_benefits =================== */
.bx-helps { margin-top: 30px; padding-top: 30px; padding-bottom: 34px; }
.bx-helps .bx-h2 { max-width: 13em; margin: 0 auto; }
.bx-helps__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 22px !important; }
.bx-helps__row--1 { grid-template-columns: minmax(0, 1fr); }
.bx-helps__row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bx-helps__row--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 18px; }
.bx-helps__item { display: grid; justify-items: center; align-content: start; gap: 10px; text-align: center; }
.bx-helps__item .bx-doodle--lg { width: 96px; height: 96px; }
.bx-helps__item b { font-size: 16px; font-weight: 800; line-height: 1.28; color: var(--bx-ink); }

/* =================== recognition =================== */
.bx-recog .bx-h2 { max-width: 14em; }
.bx-recog__photo { margin: 18px calc(var(--bx-gut) * -1) 0; }
.bx-recog__photo img { width: 100%; aspect-ratio: 2 / 1; object-fit: cover; }
.bx-recog__list { display: grid; gap: 10px; margin-top: 18px !important; }
.bx-recog__item { display: grid; grid-template-columns: 50px minmax(0, 1fr); gap: 12px; align-items: center; padding: 9px 12px 9px 9px; border-radius: var(--bx-r-md); background: var(--bx-g25); border: 1.5px solid var(--bx-line); }
.bx-recog__item .bx-doodle--sm { width: 50px; height: 50px; }
.bx-recog__item p { font-size: 16px; line-height: 1.42; font-weight: 600; }
.bx-js [data-bx-list]:not(.is-open) > .is-extra { display: none; }
.bx-more { display: none; }
.bx-js .bx-more {
  display: flex; align-items: center; justify-content: center; width: 100%; min-height: 48px; margin-top: 10px; padding: 8px 16px;
  border: 2px solid var(--bx-ink); border-radius: 999px; background: #fff; color: var(--bx-ink); font: 800 16.5px/1.2 var(--bx-font); cursor: pointer;
}
.bx-js .bx-more:active { transform: scale(.98); }
.bx-bubble { position: relative; margin-top: 24px; background: var(--bx-ink); color: #fff; border-radius: var(--bx-r-lg); padding: 16px 16px 18px 12px; display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 12px; align-items: start; }
.bx-bubble::after { content: ""; position: absolute; left: 36px; top: -14px; border: 14px solid transparent; border-bottom-color: var(--bx-ink); border-top: 0; }
.bx-bubble p { font-size: 16.5px; line-height: 1.5; font-weight: 600; }
.bx-bubble .bx-doodle { width: 46px; height: 46px; color: var(--bx-ink); }
.bx-bubble .bx-doodle__spark path { stroke: var(--bx-g200); }

/* =================== usp_title banner =================== */
.bx-banner { position: relative; background: var(--bx-ink); color: #fff; overflow: hidden; }
.bx-banner__img { width: 100%; aspect-ratio: 16 / 11; object-fit: cover; object-position: 50% 28%; -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent 98%); mask-image: linear-gradient(180deg, #000 60%, transparent 98%); }
.bx-banner--pack .bx-banner__img { object-fit: contain; aspect-ratio: 16 / 10; padding: 24px 0 0; }
.bx-banner__copy { position: relative; margin-top: -84px; padding-bottom: 40px; }
.bx-main .bx-banner__title { font-size: clamp(34px, 9.6vw, 60px); font-weight: 900; letter-spacing: -.035em; line-height: 1.06; max-width: 11em; color: #fff; }
.bx-banner__title em { color: var(--bx-g200); }
.bx-banner .bx-cta { margin-top: 20px; }

/* =================== usp_cards =================== */
.bx-usp { padding-top: 32px; }
.bx-usp__list { display: grid; gap: 24px; }
.bx-usp__row { display: grid; gap: 10px; }
.bx-usp__head { display: flex; align-items: center; gap: 12px; }
.bx-usp__row--flip .bx-usp__head { flex-direction: row-reverse; }
.bx-usp__title { min-width: 0; }
.bx-usp__n { display: inline-block; font-weight: 900; font-size: 14px; letter-spacing: .1em; color: var(--bx-ink); background: var(--bx-g100); border-radius: 999px; padding: 2px 11px; margin-bottom: 6px; }
.bx-collage { position: relative; width: 150px; height: 118px; flex: none; }
.bx-collage__blob { position: absolute; inset: 0 6%; width: 88%; height: 100%; }
.bx-collage__blob path { fill: var(--bx-g100); }
.bx-collage__p { position: absolute; border-radius: 50%; object-fit: cover; border: 4px solid #fff; box-shadow: var(--bx-shadow); aspect-ratio: 1; }
.bx-collage__p--0 { width: 90px; left: 4px; top: 12px; }
.bx-collage__p--1 { width: 56px; right: 2px; top: 0; }
.bx-collage__p--2 { width: 50px; right: 14px; bottom: 0; }
.bx-collage--1 .bx-collage__p--0 { left: 28px; }
.bx-usp__title .bx-h3 { font-size: 19.5px; }
.bx-usp__txt p { margin-top: 2px; font-size: 16.5px; }

/* =================== formula_roles =================== */
.bx-formula { margin-top: 30px; padding-top: 30px; }
.bx-formula .bx-lead { color: var(--bx-text); }
.bx-roles { display: grid; gap: 20px; margin-top: 24px !important; }
.bx-role { position: relative; background: #fff; border-radius: var(--bx-r-lg); padding: 14px 14px 14px; display: grid; gap: 8px; align-content: start; box-shadow: var(--bx-shadow); }
.bx-role:not(:last-child)::after { content: ""; position: absolute; left: 50%; bottom: -20px; height: 20px; border-left: 3px dashed var(--bx-ink); opacity: .4; }
.bx-role__n { position: absolute; top: -12px; right: 16px; width: 36px; height: 36px; border-radius: 50%; background: var(--bx-cta); color: var(--bx-on-cta); font-weight: 900; font-size: 18px; display: grid; place-items: center; box-shadow: 0 4px 0 var(--bx-cta-press); }
.bx-role__head { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 12px; align-items: start; padding-right: 30px; }
.bx-role__head .bx-h3 { font-size: 18.5px; margin-top: 2px; }
.bx-role__head .bx-doodle { width: 58px; height: 58px; }
.bx-role .bx-doodle__blob path { fill: var(--bx-g100); }
.bx-role__chips { display: flex; padding-left: 8px; margin-top: 8px; }
.bx-role__chips img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 3px solid #fff; margin-left: -10px; box-shadow: 0 4px 10px -4px color-mix(in srgb, var(--bx-ink) 35%, transparent); }
.bx-herbs { display: flex; flex-wrap: wrap; align-items: flex-start; align-content: flex-start; gap: 6px; }
.bx-herbs span { font-size: 14px; font-weight: 700; color: var(--bx-ink); border: 1.5px dashed var(--bx-g300); padding: 2px 9px; border-radius: 999px; background: #fff; }

/* =================== ingredients =================== */
.bx-ing { padding-bottom: 36px; }
.bx-car-nav { display: none; gap: 8px; flex: none; }
.bx-car-nav[hidden] { display: none !important; }
.bx-car-btn { width: 46px; height: 46px; border-radius: 50%; border: 2px solid var(--bx-ink); background: #fff; color: var(--bx-ink); display: grid; place-items: center; cursor: pointer; transition: background .2s, opacity .2s; padding: 0; }
.bx-car-btn svg { width: 22px; height: 22px; }
.bx-car-btn:hover:not(:disabled) { background: var(--bx-g100); }
.bx-car-btn:disabled { opacity: .3; cursor: default; }
.bx-track {
  display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 16px var(--bx-gut) 10px;
  scroll-padding: 0 var(--bx-gut); scrollbar-width: none; overscroll-behavior-x: contain;
}
.bx-track::-webkit-scrollbar { display: none; }
.bx-herb { flex: 0 0 76%; max-width: 310px; scroll-snap-align: start; background: #fff; border-radius: var(--bx-r-lg); overflow: hidden; border: 1.5px solid var(--bx-line); display: flex; flex-direction: column; }
.bx-herb__img { position: relative; aspect-ratio: 16 / 10; background: var(--bx-g50); display: grid; place-items: center; }
.bx-herb__img img { width: 100%; height: 100%; object-fit: cover; }
.bx-herb__feat { position: absolute; left: 10px; top: 10px; background: var(--bx-cta); color: var(--bx-on-cta); font-size: 13px; font-weight: 800; padding: 3px 10px; border-radius: 999px; }
.bx-herb__body { padding: 14px 16px 8px; display: flex; flex-direction: column; gap: 3px; flex: 1; }
.bx-herb__role { align-self: start; font-size: 13px; font-weight: 800; color: var(--bx-ink); background: var(--bx-g100); padding: 2px 9px; border-radius: 999px; margin-bottom: 4px; }
.bx-main .bx-herb__title { font-size: 18px; line-height: 1.25; letter-spacing: -.01em; }
.bx-herb__latin { font-style: italic; color: var(--bx-muted); font-size: 15px; }
.bx-herb__more p { padding-top: 6px; font-size: 16px; line-height: 1.52; }
.bx-js .bx-herb:not(.is-open) .bx-herb__more p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.bx-herb__toggle { display: none; }
.bx-js .bx-herb__toggle { display: block; margin-top: auto; align-self: start; min-height: 44px; padding: 0; border: 0; background: none; font: 800 16px/1.2 var(--bx-font); color: var(--bx-ink); text-decoration: underline; text-decoration-color: var(--bx-g300); text-decoration-thickness: 2px; text-underline-offset: 4px; cursor: pointer; }

/* =================== usage =================== */
.bx-routine { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 10px; margin-top: 16px; padding: 10px 12px 10px; background: #fff; border-radius: var(--bx-r-lg); border: 2px dashed var(--bx-g300); color: var(--bx-ink); }
.bx-routine__caps { display: flex; align-items: center; }
.bx-routine__caps .bx-routine__unit { width: 44px; height: 44px; margin-left: -12px; }
.bx-routine__caps .bx-routine__unit:first-child { margin-left: 0; }
.bx-routine__plus { font-weight: 900; font-size: 20px; margin-left: 4px; }
.bx-routine__x { font-size: 34px; font-weight: 900; color: var(--bx-cta); letter-spacing: -.02em; line-height: 1; }
.bx-routine__when .bx-doodle { width: 50px; height: 50px; }
.bx-routine__cap { flex-basis: 100%; text-align: center; font-weight: 800; font-size: 17px; color: var(--bx-ink); }
.bx-steps { display: grid; gap: 10px; margin-top: 16px !important; }
.bx-step { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 12px; align-items: start; background: #fff; border-radius: var(--bx-r-md); padding: 14px 14px; border: 1.5px solid var(--bx-line); }
.bx-step__n { width: 42px; height: 42px; border-radius: 50%; background: var(--bx-ink); color: #fff; display: grid; place-items: center; font-weight: 900; font-size: 20px; }
.bx-step .bx-h3 { font-size: 18.5px; }
.bx-step p { margin-top: 3px; color: var(--bx-muted); font-size: 16.5px; }
.bx-sub-h { margin-top: 26px !important; font-size: 20px; }
.bx-aud { display: grid; gap: 6px; margin-top: 10px !important; }
.bx-aud__i { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; align-items: start; font-weight: 600; font-size: 16px; line-height: 1.45; }
.bx-aud__mark { width: 26px; height: 26px; border-radius: 50%; background: var(--bx-g200); color: var(--bx-ink); display: grid; place-items: center; }
.bx-aud__mark svg { width: 17px; height: 17px; }
.bx-aud__i--no .bx-aud__mark { background: var(--bx-cta-soft); color: var(--bx-cta-press); }
.bx-note { margin-top: 20px; background: #FFF5D1; border: 1.5px solid #F1DB8C; border-radius: var(--bx-r-md); padding: 14px 16px 16px; color: #4A3700; }
.bx-note__t { display: flex; align-items: center; gap: 9px; font-size: 17px; font-weight: 800; }
.bx-note__t span { width: 26px; height: 26px; border-radius: 50%; background: #F2C230; color: #3D2C00; display: grid; place-items: center; font-weight: 900; }
.bx-note p { margin-top: 4px; font-size: 15px; line-height: 1.5; }
.bx-facts { margin: 10px 0 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.bx-facts__row { display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 8px; align-items: start; align-content: start; padding: 10px 10px; background: #fff; border-radius: var(--bx-r-sm); border: 1.5px solid var(--bx-line); color: var(--bx-ink); }
.bx-facts__row .bx-facts__ic { grid-row: span 2; width: 30px; height: 30px; }
.bx-facts dt { font-size: 13px; font-weight: 700; color: var(--bx-muted); line-height: 1.3; }
.bx-facts dd { margin: 0; font-weight: 700; font-size: 15px; line-height: 1.35; color: var(--bx-text); overflow-wrap: anywhere; }

/* =================== comparison (why_choose_items) =================== */
.bx-cmp { margin-top: 18px; border-radius: var(--bx-r-lg); overflow: hidden; border: 2px solid var(--bx-line); }
.bx-cmp table { width: 100%; border-collapse: collapse; table-layout: fixed; margin: 0; }
.bx-cmp th, .bx-cmp td { padding: 9px 6px; text-align: center; vertical-align: middle; border: 0; }
.bx-cmp thead th, .bx-cmp thead td { font-size: 14px; font-weight: 800; line-height: 1.2; overflow-wrap: break-word; }
/* phones: give the two tick columns room for the site name / "Venditore non ufficiale" */
@media (max-width: 413px) { .bx-cmp thead td:first-child { width: 50%; } .bx-cmp thead th { font-size: 12.5px; padding-left: 3px; padding-right: 3px; } }
.bx-cmp thead td:first-child { width: 58%; }
.bx-cmp tbody th { text-align: left; font-weight: 700; font-size: 15.5px; line-height: 1.32; padding-left: 14px; color: var(--bx-text); }
.bx-cmp tbody tr + tr > * { border-top: 1.5px solid var(--bx-line); }
.bx-cmp .bx-cmp__us { background: var(--bx-g100); color: var(--bx-ink); }
.bx-cmp thead .bx-cmp__us { background: var(--bx-ink); color: #fff; }
.bx-cmp thead .bx-cmp__them { color: var(--bx-muted); background: #F4F5F5; }
.bx-cmp tbody .bx-cmp__them { background: #FAFAFA; }
.bx-cmp__yes { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--bx-ink); color: #fff; }
.bx-cmp__yes svg { width: 20px; height: 20px; }
.bx-cmp__unsure { display: block; font-size: 13.5px; font-weight: 700; line-height: 1.25; color: #5F6664; }

/* =================== reviews =================== */
.bx-reviews { margin-top: 30px; padding-top: 30px; padding-bottom: 32px; }
.bx-rev-score { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.bx-rev-score__big { font-size: 60px; font-weight: 900; letter-spacing: -.04em; line-height: 1; color: var(--bx-ink); }
.bx-rev-score__meta { display: grid; gap: 2px; color: var(--bx-ink); font-weight: 700; }
.bx-rev-score .bx-star { width: 22px; height: 22px; }
.bx-rev { flex: 0 0 86%; max-width: 380px; scroll-snap-align: start; margin: 0; background: #fff; border-radius: var(--bx-r-lg); padding: 18px 18px 16px; display: flex; flex-direction: column; gap: 10px; box-shadow: var(--bx-shadow); }
.bx-rev blockquote { margin: 0; padding: 0; border: 0; font-size: 17px; line-height: 1.55; font-weight: 500; flex: 1; color: var(--bx-text); background: none; }
.bx-rev blockquote::before { content: "\201C"; display: block; height: 24px; font: 700 64px/1 Georgia, "Times New Roman", serif; color: var(--bx-g300); }
.bx-rev figcaption { display: flex; align-items: center; gap: 12px; padding-top: 12px; border-top: 1.5px solid var(--bx-line); }
.bx-rev figcaption > span:last-child { display: grid; font-size: 15.5px; }
.bx-rev__av { width: 44px; height: 44px; flex: none; border-radius: 50%; background: var(--bx-g200); color: var(--bx-ink); display: grid; place-items: center; font-weight: 900; font-size: 15.5px; }
.bx-rev__ver { display: inline-flex; align-items: center; gap: 4px; color: var(--bx-brand); font-weight: 700; font-size: 14px; }
.bx-rev__ver svg { width: 15px; height: 15px; }

/* =================== COD =================== */
.bx-cod__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.bx-seal { position: relative; width: 118px; height: 118px; display: grid; place-items: center; transform: rotate(-6deg); flex: none; }
.bx-seal__ring { position: absolute; inset: 0; width: 100%; height: 100%; animation: bx-spin 30s linear infinite; }
.bx-seal__bg { fill: var(--bx-cta); }
.bx-seal__in { fill: none; stroke: var(--bx-on-cta); stroke-width: 2; stroke-dasharray: 4 5; opacity: .8; }
.bx-seal text { fill: var(--bx-on-cta); font: 800 14px var(--bx-font); letter-spacing: .04em; }
.bx-seal__txt { position: relative; text-align: center; color: var(--bx-on-cta); font-weight: 900; font-size: 11.5px; line-height: 1.12; display: grid; justify-items: center; gap: 3px; max-width: 70px; }
.bx-seal__tick { width: 20px; height: 20px; border-radius: 50%; background: #fff; color: var(--bx-cta); display: grid; place-items: center; }
.bx-seal__tick svg { width: 14px; height: 14px; }
.bx-path { position: relative; display: grid; gap: 14px; margin-top: 22px !important; }
.bx-path::before { content: ""; position: absolute; left: 27px; top: 30px; bottom: 34px; border-left: 3px dashed var(--bx-g300); }
.bx-path__step { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 12px; align-items: start; }
.bx-path__mark { position: relative; width: 56px; height: 56px; z-index: 1; background: var(--bx-bg); border-radius: 50%; }
.bx-path__step .bx-doodle { width: 56px; height: 56px; }
.bx-path__n { position: absolute; right: -4px; bottom: -4px; width: 24px; height: 24px; border-radius: 50%; background: var(--bx-ink); color: #fff; display: grid; place-items: center; font-weight: 900; font-size: 13px; box-shadow: 0 0 0 3px var(--bx-bg); }
.bx-path__step .bx-h3 { font-size: 18.5px; }
.bx-path__step p { margin-top: 3px; color: var(--bx-muted); font-size: 16px; }

/* =================== FAQ =================== */
.bx-faq__list { display: grid; gap: 8px; margin-top: 18px; }
.bx-qa { border-radius: var(--bx-r-md); background: var(--bx-g25); border: 1.5px solid var(--bx-line); transition: background .2s, border-color .2s; }
.bx-qa[open] { background: #fff; border-color: var(--bx-g300); box-shadow: var(--bx-shadow); }
.bx-qa summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; min-height: 54px; cursor: pointer; font-weight: 800; font-size: 17px; line-height: 1.35; color: var(--bx-head); }
.bx-qa summary::-webkit-details-marker { display: none; }
.bx-qa summary i { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--bx-g100); position: relative; transition: transform .35s var(--bx-ease), background .2s; }
.bx-qa summary i::before, .bx-qa summary i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 13px; height: 3px; border-radius: 2px; background: var(--bx-ink); transform: translate(-50%, -50%); }
.bx-qa summary i::after { transform: translate(-50%, -50%) rotate(90deg); }
.bx-qa[open] summary i { transform: rotate(45deg); background: var(--bx-g200); }
.bx-qa__a { padding: 0 16px 16px; }
.bx-qa__a p { font-size: 16.5px; }

/* =================== final / order card =================== */
.bx-final { padding: 36px 0 40px; }
.bx-order { background: #fff; border-radius: var(--bx-r-lg); padding: 20px 16px 20px; box-shadow: 0 24px 50px -20px rgba(0, 0, 0, .45); color: var(--bx-text); }
.bx-order__top { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 12px; align-items: center; }
.bx-order__pack { position: relative; width: 92px; height: 92px; }
.bx-order__pack svg { position: absolute; inset: 0; }
.bx-order__pack path { fill: var(--bx-g100); }
.bx-order__pack img { position: relative; width: 100%; height: 100%; object-fit: contain; }
.bx-order .bx-h2 { font-size: 25px; }
.bx-order__sub { color: var(--bx-muted); margin-top: 3px !important; font-size: 15.5px; }
/* order-card mirror: compact tiles, 2 per row */
.bx-pkgs--compact { display: grid; grid-template-columns: repeat(auto-fit, minmax(138px, 1fr)); gap: 12px 8px; }
.bx-pkgs--compact .bx-pkg { grid-template-columns: 22px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 8px; padding: 10px 10px; align-items: start; }
.bx-pkgs--compact .bx-pkg--pop { margin-top: 0; padding-top: 14px; }
.bx-pkgs--compact .bx-pkg__ribbon { left: 10px; top: -11px; font-size: 11.5px; padding: 2px 9px; }
.bx-pkgs--compact .bx-pkg__radio { width: 22px; height: 22px; grid-row: span 2; margin-top: 2px; }
.bx-pkgs--compact .bx-pkg__radio::after { width: 10px; height: 10px; }
.bx-pkgs--compact .bx-pkg__qty { font-size: 17px; }
.bx-pkgs--compact .bx-pkg__per { display: none; }
.bx-pkgs--compact .bx-pkg__price { grid-column: 2; justify-items: start; text-align: left; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; }
.bx-pkgs--compact .bx-pkg__price b { font-size: 17.5px; }
.bx-pkgs--compact .bx-pkg__price s { font-size: 13.5px; }
.bx-order__sum { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 14px !important; padding: 12px 4px 0; border-top: 2px dashed var(--bx-line); font-weight: 700; color: var(--bx-muted); }
.bx-order__sum b { font-size: 26px; font-weight: 900; color: var(--bx-head); letter-spacing: -.02em; }
.bx-final-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; margin-top: 18px !important; }
.bx-final-chips li { display: inline-flex; align-items: center; gap: 6px; color: #fff; font-weight: 700; font-size: 15.5px; }
.bx-final-chips svg { width: 19px; height: 19px; color: var(--bx-g300); }

/* the shared order form, restyled inside the brand card */
.rv-style-brand .bx-order .rv-order-form { margin-top: 16px; display: block; background: none; padding: 0; box-shadow: none; border: 0; }
.rv-style-brand .bx-order--pkgs .rv-single-product { display: none; }
.rv-style-brand .bx-order .rv-single-product { margin: 4px 0 14px; padding: 12px 14px; background: var(--bx-g25); border: 1.5px solid var(--bx-line); border-radius: 16px; }
/* The card head already shows the packshot: the shared block's second packshot is dropped and
   its text becomes one full-width price row (name + badge | price), instead of a small
   column hugging the left of a wide card. */
.rv-style-brand .bx-order .rv-single-product__media { display: none; }
.rv-style-brand .bx-order .rv-single-product__info { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; align-items: center; }
.rv-style-brand .bx-order .rv-single-product__name { grid-column: 1; margin: 0 0 4px; font-family: var(--bx-font); color: var(--bx-head); }
.rv-style-brand .bx-order .rv-single-product__badge { grid-column: 1; justify-self: start; margin: 0; background: var(--bx-g100); color: var(--bx-ink); }
.rv-style-brand .bx-order .rv-single-product__price-row { grid-column: 2; grid-row: 1 / span 2; justify-content: flex-end; text-align: right; }
.rv-style-brand .bx-order .rv-single-product__price { font: 900 32px/1 var(--bx-font); color: var(--bx-head); text-align: right; }
.rv-style-brand .bx-order .rv-single-product__strike { font-size: 16px; }
.rv-style-brand .bx-order .rv-single-product__pill { font-size: 14px; padding: 2px 10px; background: var(--bx-cta); color: var(--bx-on-cta); }
.rv-style-brand .bx-order .rv-single-product__badge { white-space: nowrap; }
@media (max-width: 479px) {
  .rv-style-brand .bx-order .rv-single-product__info { grid-template-columns: minmax(0, 1fr); }
  .rv-style-brand .bx-order .rv-single-product__price-row { grid-column: 1; grid-row: auto; justify-content: flex-start; text-align: left; margin-top: 8px; }
  .rv-style-brand .bx-order .rv-single-product__price { text-align: left; }
}
.rv-style-brand .bx-order .rv-single-fieldshead { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-weight: 800; font-size: 16.5px; color: var(--bx-head); }
.rv-style-brand .bx-order .rv-single-fieldshead svg { display: none; }
.rv-style-brand .bx-order .rv-field { margin-bottom: 12px; }
.rv-style-brand .bx-order .rv-field__wrap { background: var(--bx-g25); border: 2px solid var(--bx-line); border-radius: 16px; min-height: 58px; }
.rv-style-brand .bx-order .rv-field__label { background: var(--bx-g25); color: var(--bx-muted); font-family: var(--bx-font); font-size: 16.5px; }
.rv-style-brand .bx-order .rv-field__input { font-family: var(--bx-font); font-size: 17.5px; color: var(--bx-text); }
.rv-style-brand .bx-order .rv-field__icon { color: var(--bx-g300); }
.rv-style-brand .bx-order .rv-field__wrap:focus-within { border-color: var(--bx-ink); box-shadow: 0 0 0 4px var(--bx-g100); background: #fff; }
.rv-style-brand .bx-order .rv-field__wrap:focus-within .rv-field__label { background: #fff; }
.rv-style-brand .bx-order .rv-field__input:focus + .rv-field__label,
.rv-style-brand .bx-order .rv-field__input:not(:placeholder-shown) + .rv-field__label { color: var(--bx-ink); }
.rv-style-brand .bx-order .rv-field__wrap:focus-within .rv-field__icon { color: var(--bx-ink); }
.rv-style-brand .bx-order .rv-field--error .rv-field__wrap { border-color: var(--bx-cta); background: var(--bx-cta-soft); }
.rv-style-brand .bx-order .rv-field__error { color: var(--bx-cta-press); }
.rv-style-brand .bx-order .rv-order-form .rv-btn-primary--full {
  width: 100%; min-height: 64px; margin-top: 6px; border-radius: 999px; background: var(--bx-cta); color: var(--bx-on-cta);
  font: 800 20px/1.2 var(--bx-font); text-transform: none; letter-spacing: 0; text-shadow: none; filter: none; overflow: visible;
  box-shadow: 0 6px 0 var(--bx-cta-press), 0 14px 24px -10px color-mix(in srgb, var(--bx-cta) 55%, transparent);
  transition: transform .18s var(--bx-ease), box-shadow .18s var(--bx-ease), background .2s;
  animation: none;
}
.rv-style-brand .bx-order .rv-order-form .rv-btn-primary--full .rv-btn-primary__label { text-transform: none; letter-spacing: 0; font: inherit; font-size: 20px !important; }
.rv-style-brand .bx-order .rv-order-form .rv-btn-primary--full::before,
.rv-style-brand .bx-order .rv-order-form .rv-btn-primary--full::after { content: none; display: none; }
.rv-style-brand .bx-order .rv-order-form .rv-btn-primary--full:hover { background: var(--bx-cta-hi); transform: none; }
.rv-style-brand .bx-order .rv-order-form .rv-btn-primary--full:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--bx-cta-press); }
.rv-style-brand .bx-order .rv-btn-primary__icon-trailing { background: color-mix(in srgb, var(--bx-on-cta) 22%, transparent); color: var(--bx-on-cta); }
.rv-style-brand .bx-order .rv-single-notes { display: grid; gap: 6px; margin: 14px 0 0; padding: 0; list-style: none; }
.rv-style-brand .bx-order .rv-single-notes__item { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; align-items: start; font-size: 14.5px; line-height: 1.45; color: var(--bx-muted); }
.rv-style-brand .bx-order .rv-single-notes__item svg { width: 20px; height: 20px; color: var(--bx-ink); }
.rv-style-brand .bx-order .rv-single-notes__link { color: var(--bx-ink); }

/* =================== sticky bar =================== */
.bx-sticky {
  position: fixed; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 50;
  display: grid; grid-template-columns: 50px minmax(0, 1fr) auto; gap: 10px; align-items: center; max-width: 560px; margin: 0 auto;
  background: #fff; border-radius: 22px; padding: 7px 7px 7px 9px; box-shadow: 0 -2px 0 var(--bx-g100), 0 16px 40px -8px color-mix(in srgb, var(--bx-ink-deep) 50%, transparent);
  transform: translateY(150%); visibility: hidden; transition: transform .4s var(--bx-ease), visibility 0s .4s;
}
.bx-sticky.is-on { transform: none; visibility: visible; transition: transform .4s var(--bx-ease), visibility 0s; }
.bx-sticky__thumb { width: 50px; height: 50px; object-fit: contain; background: var(--bx-g100); border-radius: 14px; padding: 3px; }
.bx-sticky__price { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 8px; align-items: baseline; line-height: 1.2; margin: 0; font-family: var(--bx-font); color: var(--bx-text); }
.bx-sticky__price b { font-size: 21px; font-weight: 900; }
.bx-sticky__price s { color: var(--bx-muted); font-size: 14.5px; }
.bx-sticky__price span { grid-column: span 2; font-size: 13.5px; font-weight: 700; color: var(--bx-brand); }
.rv-style-brand .bx-sticky__cta { min-height: 50px; padding: 10px 22px; font-size: 18px; box-shadow: 0 4px 0 var(--bx-cta-press); }

/* =================== site chrome skin (every page) =================== */
body.rv-style-brand .rv-announce { background: var(--bx-ink); color: #fff; border: 0; font-family: var(--bx-font); }
body.rv-style-brand .rv-marquee__item { color: #fff; font-weight: 700; font-size: 14.5px; }
body.rv-style-brand .rv-marquee__item svg { color: var(--bx-g300); }
body.rv-style-brand .rv-header { background: color-mix(in srgb, var(--bx-bg) 94%, transparent); -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1.5px solid var(--bx-line); box-shadow: none; font-family: var(--bx-font); }
body.rv-style-brand .rv-nav__link { font-family: var(--bx-font); font-weight: 700; color: var(--bx-ink); }
body.rv-style-brand .rv-header__cta.rv-btn-primary {
  background: var(--bx-ink) !important; color: #fff; box-shadow: none; text-shadow: none; font: 800 15.5px/1 var(--bx-font); border-radius: 999px; min-height: 44px; padding: 0 18px;
}
body.rv-style-brand .rv-header__cta.rv-btn-primary::before, body.rv-style-brand .rv-header__cta.rv-btn-primary::after { content: none; }
body.rv-style-brand .rv-header__cta .rv-btn-primary__icon-trailing { display: none; }
body.rv-style-brand .rv-search-btn { color: var(--bx-ink); border-radius: 50%; background: var(--bx-g50); }
body.rv-style-brand .rv-nav__burger span { background: var(--bx-ink); }

body.rv-style-brand .rv-footer { background: var(--bx-g25); color: var(--bx-text); border-top: 1.5px solid var(--bx-line); font-family: var(--bx-font); padding-top: 30px; }
body.rv-style-brand .rv-footer p, body.rv-style-brand .rv-footer span, body.rv-style-brand .rv-footer a { color: var(--bx-muted); }
body.rv-style-brand .rv-footer .rv-footer__brand-logo span, body.rv-style-brand .rv-footer__tagline { color: var(--bx-head); font-weight: 800; }
body.rv-style-brand .rv-footer a:hover { color: var(--bx-ink); }
body.rv-style-brand .rv-footer::before { background: linear-gradient(90deg, transparent, var(--bx-g300), transparent); }
body.rv-style-brand .rv-footer__brand-image { filter: none; }
body.rv-style-brand .rv-footer__brand-logo svg { color: var(--bx-ink); }
body.rv-style-brand .rv-footer__brand-logo { margin-bottom: 10px; }
body.rv-style-brand .rv-footer__contact-group { gap: 10px; }
body.rv-style-brand .rv-footer__contact-icon { width: 38px; height: 38px; }
body.rv-style-brand .rv-footer__top { gap: 20px; padding-bottom: 20px; border-bottom-color: var(--bx-line); }
body.rv-style-brand .rv-footer__trust { display: flex; flex-wrap: wrap; gap: 8px; padding: 18px 0; border-bottom-color: var(--bx-line); }
body.rv-style-brand .rv-footer__seal { background: #fff; border: 1.5px solid var(--bx-line); border-radius: 999px; padding: 5px 14px 5px 5px; gap: 8px; box-shadow: none; color: var(--bx-ink); }
body.rv-style-brand .rv-footer__seal:hover { transform: none; box-shadow: none; }
body.rv-style-brand .rv-footer__seal-icon { width: 30px; height: 30px; border-radius: 50%; }
body.rv-style-brand .rv-footer__seal-text { color: var(--bx-ink); font-size: 14px; }
body.rv-style-brand .rv-footer__contact-icon { border-color: var(--bx-line); }
body.rv-style-brand .rv-footer__contact-label { color: var(--bx-muted); }
body.rv-style-brand .rv-footer__contact-val { color: var(--bx-text); }
body.rv-style-brand .rv-footer__bottom { gap: 12px; padding-top: 18px; }
body.rv-style-brand .rv-footer__seal-icon, body.rv-style-brand .rv-footer__contact-icon { color: var(--bx-ink); background: var(--bx-g100); }
body.rv-style-brand .rv-footer__seal-icon svg, body.rv-style-brand .rv-footer__contact-icon svg { color: var(--bx-ink); }
body.rv-style-brand .rv-footer__bottom { border-top-color: var(--bx-line); }
body.rv-style-brand.single-health_product .rv-footer { padding-bottom: 104px; }

/* product cards (home, search, related) */
body.rv-style-brand .rv-shell-ai-product { background: #fff; border: 1.5px solid var(--bx-line); border-radius: var(--bx-r-lg); box-shadow: var(--bx-shadow); overflow: hidden; font-family: var(--bx-font); }
body.rv-style-brand .rv-shell-ai-product__media { background: radial-gradient(circle at 50% 55%, var(--bx-g100) 0 58%, var(--bx-g25) 59%); }
body.rv-style-brand .rv-shell-ai-product__media img { object-fit: contain; }
body.rv-style-brand .rv-shell-ai-product__flag { background: var(--bx-cta); color: var(--bx-on-cta); border-radius: 999px; font-weight: 800; }
body.rv-style-brand .rv-shell-ai-product h3, body.rv-style-brand .rv-shell-ai-product h3 a { font-family: var(--bx-font); font-weight: 800; color: var(--bx-head); letter-spacing: -.01em; }
body.rv-style-brand .rv-shell-ai-product__sub { color: var(--bx-muted); }
body.rv-style-brand .rv-shell-ai-product__price { font: 900 26px/1 var(--bx-font); color: var(--bx-head); letter-spacing: -.02em; }
body.rv-style-brand .rv-shell-ai-product__now { color: var(--bx-head); }
body.rv-style-brand .rv-shell-ai-product__was { font-family: var(--bx-font); }
body.rv-style-brand .rv-shell-ai-product__save { background: var(--bx-cta-soft); color: var(--bx-cta-press); border-radius: 999px; }
body.rv-style-brand .rv-shell-ai-product__cta.rv-btn-primary { background: var(--bx-cta); color: var(--bx-on-cta); text-shadow: none; box-shadow: 0 4px 0 var(--bx-cta-press); font-family: var(--bx-font); font-weight: 800; border-radius: 999px; }
body.rv-style-brand .rv-shell-ai-product__save { font-family: var(--bx-font); font-size: 14px; font-weight: 800; padding: 3px 9px; }
body.rv-style-brand .rv-shell-ai-product__cta.rv-btn-primary::before, body.rv-style-brand .rv-shell-ai-product__cta.rv-btn-primary::after { content: none; }
body.rv-style-brand h1, body.rv-style-brand h2, body.rv-style-brand h3 { font-family: var(--bx-font); }

/* =================== ≥ 768 =================== */
@media (min-width: 768px) {
  body.rv-style-brand { --bx-gut: 32px; }
  .bx-block { padding: 72px 0; }
  .bx-car-nav { display: flex; }
  .bx-helps { padding-top: 56px; padding-bottom: 64px; }
  .bx-helps__row, .bx-helps__row--4 { grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 32px; max-width: 860px; margin-left: auto; margin-right: auto; }
  .bx-helps__row--4 { --n: 4; }
  .bx-helps__item .bx-doodle--lg { width: 140px; height: 140px; }
  .bx-helps__item b { font-size: 19px; }
  .bx-recog__photo { margin: 22px 0 0; }
  .bx-recog__photo img { border-radius: var(--bx-r-lg); }
  .bx-banner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; min-height: 520px; }
  .bx-banner__img { grid-column: 2; grid-row: 1; height: 100%; aspect-ratio: auto; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 30%); mask-image: linear-gradient(90deg, transparent 0%, #000 30%); }
  .bx-banner__copy { grid-column: 1; grid-row: 1; margin-top: 0; padding: 56px 0 56px max(var(--bx-gut), calc((100vw - 1120px) / 2 + var(--bx-gut))); z-index: 1; }
  .bx-usp__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 40px; }
  .bx-herb { flex-basis: 300px; }
  .bx-track { padding-left: max(var(--bx-gut), calc((100vw - 1120px) / 2 + var(--bx-gut))); scroll-padding-left: max(var(--bx-gut), calc((100vw - 1120px) / 2 + var(--bx-gut))); }
  .bx-rev { flex-basis: 360px; }
  .bx-seal { width: 160px; height: 160px; }
  .bx-seal__txt { font-size: 15px; max-width: 92px; }
  .bx-path { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
  .bx-path::before { left: 28px; right: 12%; top: 28px; bottom: auto; border-left: 0; border-top: 3px dashed var(--bx-g300); }
  .bx-path__step { grid-template-columns: minmax(0, 1fr); row-gap: 10px; }
  .bx-path::before { left: 28px; top: 28px; right: calc(25% - 43px); }
  .bx-path:has(> :nth-child(3):last-child)::before { right: calc(50% - 38px); }
  .bx-path:has(> :nth-child(2):last-child)::before { right: calc(75% - 33px); }
  .bx-path:has(> :nth-child(5))::before { display: none; }
  .bx-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bx-order { padding: 28px 28px 28px; }
  .bx-sticky { left: 16px; right: 16px; }
}
@media (min-width: 1024px) {
  /* Desktop: the price pill docks in the bottom-right corner instead of floating over the
     centre of the reading column; JS drops it entirely while a sticky header shows its own
     order button (.bx-sticky--header). */
  .bx-sticky { left: auto; right: 24px; bottom: 24px; width: auto; max-width: 420px; margin: 0; }
  .bx-sticky--header { display: none; }
}
@media (min-width: 1000px) {
  /* 3 role cards side by side only when each gets ~300px (at 768-999 titles ran under the number badge) */
  .bx-roles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
  .bx-role:not(:last-child)::after { left: auto; right: -24px; top: 44px; bottom: auto; width: 24px; height: 0; border-left: 0; border-top: 3px dashed var(--bx-ink); }
  .bx-usp__list { column-gap: 56px; }
  .bx-collage { width: 240px; height: 160px; }
  .bx-collage__p--0 { width: 128px; }
  .bx-collage__p--1 { width: 82px; }
  .bx-collage__p--2 { width: 70px; }
  .bx-hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 56px; align-items: start; padding-top: 24px; }
  .bx-hero__media { position: sticky; top: 90px; }
  .bx-cats { margin-top: 0 !important; }
}

/* =================== reduced motion =================== */
@media (prefers-reduced-motion: reduce) {
  .rv-style-brand *, .rv-style-brand *::before, .rv-style-brand *::after { animation: none !important; transition-duration: .01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
  .bx-js .bx-doodle:not(.is-drawn) .bx-doodle__spark path { stroke-dashoffset: 0; }
}

/* UGC photo strip (template-parts/styles/_shared/ugc-strip.php) -- the classic reviews band:
   looping row of customer-style photos, bleeds to the section edge, pauses on hover, a plain
   swipe row under prefers-reduced-motion. Tiles carry their gutter as margin so the -50%
   loop never jumps. */
body.rv-style-brand .rv-sugc {
  overflow: hidden;
  margin: 4px calc(-1 * 20px) 18px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
body.rv-style-brand .rv-sugc__track {
  display: flex;
  width: max-content;
  padding-left: 6px;
  animation: rv-sugc-scroll var(--rv-sugc-dur, 40s) linear infinite;
  will-change: transform;
}
body.rv-style-brand .rv-sugc:hover .rv-sugc__track { animation-play-state: paused; }
body.rv-style-brand .rv-sugc__tile { display: block; background-repeat: no-repeat; }
body.rv-style-brand .rv-sugc__img {
  flex: 0 0 auto;
  width: 150px;
  height: 150px;
  margin-right: 8px;
  object-fit: cover;
  border-radius: 18px;
  background-color: rgba(0, 0, 0, .05);
}
@keyframes rv-sugc-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (min-width: 768px) {
  body.rv-style-brand .rv-sugc__img { width: 200px; height: 200px; }
}
@media (prefers-reduced-motion: reduce) {
  body.rv-style-brand .rv-sugc { overflow-x: auto; -webkit-mask-image: none; mask-image: none; scroll-snap-type: x proximity; }
  body.rv-style-brand .rv-sugc__track { animation: none; will-change: auto; }
  body.rv-style-brand .rv-sugc__img { scroll-snap-align: start; }
}

/* v4.45.0 out-of-stock — .bx-cta--light pins a white background with !important; answer
   it here at the same specificity so the disabled state actually greys out. */
.rv-style-brand .bx-cta--light.is-disabled,
.rv-style-brand .bx-cta--light.is-disabled:hover {
  background: var(--color-border) !important;
  color: var(--color-text-muted) !important;
  box-shadow: none !important;
}

/* v4.45.0 out-of-stock — header CTA colour pinned above at (0,3,1) !important; answer the
   disabled state at the same specificity. */
body.rv-style-brand .rv-header__cta.rv-btn-primary.is-disabled {
  background: var(--color-border) !important;
  color: var(--color-text-muted) !important;
}