:root{--track:-.02em;
  --plum:#3F1A3B; --plum-2:#5B3757; --plum-deep:#2C0F29;
  --white:#FFFFFF; --cream:#F6EFDC; --cream-2:#FBF6E9;
  --butter:#F4E1A3;
  --teal:#72B0A6; --teal-dk:#3E7B71; --teal-soft:#EDF5F2;
  --amber:#E9962B; --amber-dk:#C87A16;
  --line:rgba(63,26,59,.16); --line-soft:rgba(63,26,59,.08);
  --display:inherit;
  --body:inherit;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --pad:clamp(18px,5vw,64px);
  --gap:clamp(58px,8.5vw,136px);
  --r:16px;
}.rv *{min-width:0}html{scroll-behavior:smooth}.rv{background:var(--white);color:var(--plum-2);font-family:var(--body);font-size:16px;line-height:1.6}.rv *{box-sizing:border-box}.rv img{max-width:100%;display:block;height:auto}.rv a{color:inherit}.rv button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}.rv :focus-visible{outline:3px solid var(--amber);outline-offset:4px}.rv .wrap{width:100%;max-width:1280px;margin:0 auto;padding-inline:var(--pad)}.rv h1,.rv h2,.rv h3{font-family:var(--display);margin:0;color:var(--plum);line-height:1.08;letter-spacing:var(--track);font-weight:600}.rv h2{font-size:clamp(27px,5.2vw,50px)}.rv h3{font-size:clamp(17px,2.7vw,21px);letter-spacing:-.02em}.rv .lbl{font-family:var(--mono);font-size:clamp(9.5px,2.2vw,11px);letter-spacing:.24em;text-transform:uppercase;color:var(--teal-dk);margin:0;font-weight:500}.rv .sec{padding-block:var(--gap)}.rv .sec-cream{background:var(--cream-2)}.rv .head{display:grid;gap:clamp(14px,2.5vw,30px);margin-bottom:clamp(30px,4.5vw,58px)}.rv .head p.sub{margin:0;font-size:clamp(15px,2.3vw,18px);line-height:1.6;max-width:52ch}.rv .hero{padding-block:clamp(24px,4vw,54px) 0}.rv .hero-body{display:grid;gap:clamp(28px,4.5vw,66px)}.rv .shot-tag{position:absolute;top:16px;left:16px;z-index:2;background:var(--plum);color:var(--butter);font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;padding:9px 15px;border-radius:100px}.rv .buy{align-self:start}.rv .buy .lbl{margin-bottom:12px}.rv .buy h1{font-size:clamp(29px,6vw,50px);font-weight:700;letter-spacing:-.04em;margin:0 0 14px;max-width:18ch}.rv .hero-rating{display:inline-flex;align-items:center;gap:8px;margin:0 0 16px;text-decoration:none;color:var(--plum-2);font-size:13.5px}.rv .hero-rating:hover{text-decoration:underline}.rv .hero-rating .rv-rv-stars svg{width:15px;height:15px}.rv .buy .dek{margin:0 0 28px;font-size:clamp(15px,2.3vw,18px);line-height:1.55;max-width:42ch}.rv .price-row{margin-top:clamp(22px,3.4vw,34px);display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-bottom:20px;border-bottom:1px solid var(--line)}.rv .now{font-family:var(--display);font-size:clamp(38px,8vw,60px);font-weight:700;color:var(--plum);line-height:.9;letter-spacing:calc(var(--track) - .015em)}.rv .now s{display:block;font-size:.28em;font-weight:400;opacity:.38;letter-spacing:0;margin-top:10px}.rv .save{background:var(--butter);color:var(--plum);font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.08em;padding:8px 14px;border-radius:100px;text-transform:uppercase}.rv .taxline{margin:14px 0 26px;font-size:13px;opacity:.68}.rv .qtyrow{display:flex;gap:10px;margin-bottom:20px;flex-wrap:wrap}.rv .stepper{display:flex;align-items:center;border:1px solid var(--line);border-radius:100px;flex:0 0 auto}.rv .stepper button{width:48px;height:66px;font-size:20px;border-radius:100px;transition:background .18s ease}.rv .stepper button:hover{background:var(--cream-2)}.rv .stepper output{width:34px;text-align:center;font-family:var(--mono);font-weight:600;color:var(--plum)}.rv .btn{display:flex;align-items:center;justify-content:center;height:66px;border-radius:100px;font-weight:600;font-size:clamp(16px,3vw,18px);text-decoration:none;padding-inline:30px;transition:background .2s ease,transform .12s ease}.rv .btn:active{transform:translateY(2px)}.rv .btn-primary{flex:1 1 190px;background:var(--amber);color:var(--plum);box-shadow:0 3px 0 var(--amber-dk)}.rv .btn-primary:hover{background:#F2A63F}.rv .facts{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:24px}.rv .facts div{padding:22px 8px;text-align:center;border-left:1px solid var(--line-soft)}.rv .facts div:first-child{border-left:0}.rv .facts b{display:block;font-family:var(--display);font-size:clamp(19px,3.6vw,27px);font-weight:600;color:var(--plum);line-height:1;letter-spacing:-.03em}.rv .facts span{display:block;margin-top:9px;font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--teal-dk)}.rv /* ---------- NEW: photo collage with circle overlay ---------- */
.rv .collage-copy h2{margin-bottom:clamp(20px,3vw,30px)}.rv .ruled{list-style:none;margin:0;padding:0}.rv .ruled li{border-bottom:1px solid var(--line);padding:clamp(13px,2vw,18px) 0;font-size:clamp(14.5px,2.3vw,17px);color:var(--plum)}.rv .ruled li:first-child{border-top:1px solid var(--line)}.rv /* ---------- NEW: photo cards with gradient ---------- */
.rv .photocards{display:grid;gap:clamp(12px,2vw,22px);grid-template-columns:1fr}.rv .photocard{position:relative;border-radius:var(--r);overflow:hidden;min-height:clamp(320px,52vw,440px);background:var(--plum);display:flex;flex-direction:column;justify-content:flex-end}.rv .photocard>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.rv .photocard::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(44,15,41,.96) 0%,rgba(44,15,41,.8) 30%,rgba(44,15,41,.16) 66%,rgba(44,15,41,.05) 100%)}.rv .photocard .pc-body{position:relative;z-index:2;padding:clamp(20px,3vw,30px)}.rv .photocard .n{display:block;font-family:var(--display);font-size:clamp(22px,3.6vw,30px);font-weight:400;color:var(--butter);line-height:1;margin-bottom:12px;letter-spacing:-.03em}.rv .photocard h3{color:#fff;margin:0 0 8px}.rv .photocard p{margin:0;font-size:clamp(14px,2.1vw,15.5px);line-height:1.55;color:rgba(255,255,255,.84)}.rv /* ---------- symptom cards,.rv now with icons ---------- */
.rv .grid-4{display:grid;gap:clamp(12px,2vw,20px);grid-template-columns:1fr}.rv .card{background:var(--white);border:1px solid var(--line-soft);border-radius:var(--r);padding:clamp(22px,3.2vw,30px);transition:border-color .25s ease}.rv .card:hover{border-color:var(--amber)}.rv .card .ic{width:clamp(40px,7vw,52px);height:auto;margin-bottom:16px}.rv .card h3{margin:0 0 8px}.rv .card p{margin:0;font-size:clamp(14px,2.1vw,15.5px);line-height:1.6}.rv .fos{display:grid;gap:clamp(14px,3vw,48px);align-items:center;padding-block:clamp(20px,3vw,36px);border-bottom:1px solid var(--line)}.rv .fos-n{font-family:var(--display);font-size:clamp(56px,13vw,128px);font-weight:700;color:var(--plum);line-height:.8;letter-spacing:calc(var(--track) - .02em)}.rv .fos-n small{font-size:.2em;font-family:var(--mono);letter-spacing:.1em;vertical-align:super;margin-left:8px;font-weight:500}.rv .fos h3{font-size:clamp(20px,3.6vw,30px);margin-bottom:12px}.rv .fos p{margin:0;font-size:clamp(15px,2.3vw,17.5px);line-height:1.6;max-width:44ch}.rv .index{border-top:0}.rv .idx{display:grid;grid-template-columns:auto 1fr;gap:clamp(14px,3vw,36px);padding-block:clamp(20px,2.8vw,30px);border-bottom:1px solid var(--line-soft);align-items:start}.rv .idx-n{font-family:var(--display);font-size:clamp(19px,3vw,28px);font-weight:400;color:var(--amber);line-height:1;opacity:.8}.rv .idx h3{margin:0 0 8px}.rv .idx p{margin:0;font-size:clamp(14.5px,2.2vw,16.5px);line-height:1.6;max-width:56ch}.rv .idx .amt{display:inline-block;margin-left:10px;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--teal-dk);vertical-align:middle}.rv .arc{display:grid;gap:clamp(12px,2vw,20px);grid-template-columns:1fr}.rv .arc-step{background:var(--cream-2);border-radius:var(--r);padding:clamp(20px,3vw,28px);display:flex;flex-direction:column}.rv .arc-badge{align-self:flex-start;background:var(--plum);color:var(--butter);border-radius:100px;padding:8px 15px;font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;margin-bottom:18px}.rv .arc-step h3{margin:0 0 14px;font-size:clamp(18px,2.9vw,23px)}.rv .arc-step ul{list-style:none;margin:0 0 22px;padding:0;flex:1}.rv .arc-step li{position:relative;padding-left:22px;margin-bottom:11px;font-size:clamp(14px,2.1vw,15.5px);line-height:1.55}.rv .arc-step li:last-child{margin-bottom:0}.rv .arc-step li::before{content:"";position:absolute;left:0;top:.7em;width:11px;height:1px;background:var(--teal-dk)}.rv /* ---------- comparison ---------- */
@media (min-width:760px){
}.rv /* centred section head */
.rv .head-c{grid-template-columns:1fr;justify-items:center;text-align:center}.rv .head-c h2{max-width:22ch}.rv /* benefit icon grid */
.rv .bens{display:grid;grid-template-columns:1fr;gap:12px 18px;margin:0 0 24px;padding:0;list-style:none}.rv .bens li{display:flex;gap:12px;align-items:center;font-size:clamp(13.5px,2.2vw,15px);line-height:1.3;color:var(--plum)}.rv .bens svg{width:36px;height:36px;flex:0 0 auto;background:var(--teal-soft);border-radius:50%;padding:8px;stroke:var(--teal-dk);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.rv /* promo bar */
.rv /* reel cards */
.rv .reels{display:grid;gap:clamp(12px,2vw,20px);grid-template-columns:1fr}.rv .reel{position:relative;display:block;border-radius:16px;overflow:hidden;aspect-ratio:9/16;background:var(--plum);text-decoration:none;transition:transform .25s ease}.rv .reel:hover{transform:translateY(-4px)}.rv .reel>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.rv .reel::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(44,15,41,.94) 0%,rgba(44,15,41,.5) 42%,rgba(44,15,41,.12) 72%,rgba(44,15,41,.3) 100%)}.rv .reel-play{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);z-index:2;width:58px;height:58px;border-radius:50%;background:rgba(255,255,255,.92);display:grid;place-items:center}.rv .reel-play svg{width:20px;height:20px;fill:var(--plum);margin-left:3px}.rv .reel-tag{position:absolute;top:14px;left:14px;z-index:2;background:rgba(255,255,255,.92);color:var(--plum);font-family:var(--mono);font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;padding:6px 11px;border-radius:100px}.rv .reel-body{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:clamp(16px,2.6vw,22px);color:#fff}.rv .reel-handle{font-family:var(--mono);font-size:11px;color:var(--butter);margin:0 0 7px;letter-spacing:.05em}.rv .reel-body p{margin:0 0 10px;font-size:clamp(13px,2.1vw,14.5px);line-height:1.45;color:rgba(255,255,255,.86)}@media (min-width:560px){.rv .bens{grid-template-columns:1fr 1fr}.rv .reels{grid-template-columns:repeat(3,1fr)}}.rv .band{background:var(--butter);padding-block:clamp(36px,5vw,60px)}.rv .creators{display:grid;gap:clamp(12px,2vw,20px);grid-template-columns:1fr}.rv .creator{border-top:1px solid var(--line);padding-top:24px;display:flex;flex-direction:column}.rv .creator .handle{font-family:var(--mono);font-size:11px;color:var(--amber-dk);margin:0 0 12px;letter-spacing:.1em}.rv .creator p{margin:0 0 18px;font-size:clamp(14.5px,2.2vw,16px);line-height:1.55;flex:1}.rv .creator a{align-self:flex-start;font-size:13px;font-weight:600;text-decoration:none;color:var(--plum);border-bottom:1.5px solid var(--amber);padding-bottom:3px}.rv .faq{border-top:1px solid var(--line)}.rv .faq details{border-bottom:1px solid var(--line-soft)}.rv .faq summary{list-style:none;cursor:pointer;padding:clamp(20px,2.8vw,30px) 46px clamp(20px,2.8vw,30px) 0;position:relative;font-family:var(--display);font-size:clamp(17px,3vw,23px);font-weight:600;color:var(--plum);line-height:1.25;letter-spacing:-.02em}.rv .faq summary::-webkit-details-marker{display:none}.rv .faq summary::after{content:"+";position:absolute;right:2px;top:50%;transform:translateY(-50%);font-family:var(--mono);font-size:21px;color:var(--amber-dk);font-weight:300}.rv .faq details[open] summary::after{content:"\2013"}.rv .faq .ans{padding:0 0 clamp(22px,3vw,32px);font-size:clamp(14.5px,2.2vw,16.5px);line-height:1.7;max-width:64ch}.rv .faq .ans p{margin:0 0 12px}.rv .faq .ans p:last-child{margin:0}.rv .closer{text-align:center;padding-block:clamp(64px,9vw,150px)}.rv .closer h2{margin:20px auto 20px;max-width:12ch;font-size:clamp(36px,8vw,78px);font-weight:700;letter-spacing:calc(var(--track) - .01em)}.rv .closer p{max-width:38ch;margin:0 auto 34px;font-size:clamp(15px,2.3vw,18px);line-height:1.55}.rv .closer .btn-primary{max-width:380px;margin:0 auto;display:inline-flex;flex:0 1 auto}.rv .reveal{opacity:0;transform:translateY(18px)}.rv .reveal.in{opacity:1;transform:none;transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1)}@media (min-width:560px){.rv .grid-4{grid-template-columns:1fr 1fr}.rv .photocards{grid-template-columns:1fr 1fr}.rv .creators{grid-template-columns:1fr 1fr}.rv .fos{grid-template-columns:auto 1fr}.rv .arc{grid-template-columns:1fr 1fr}
}@media (min-width:900px){.rv .head{grid-template-columns:180px 1fr;align-items:start}.rv .hero-body{grid-template-columns:1fr 1fr;gap:clamp(38px,5vw,86px);align-items:start}.rv .shot-wrap{position:sticky;top:calc(clamp(58px,8vw,80px) + 26px)}.rv .grid-4{grid-template-columns:repeat(4,1fr)}.rv .photocards{grid-template-columns:repeat(3,1fr)}.rv .creators{grid-template-columns:repeat(3,1fr)}.rv .arc{grid-template-columns:repeat(4,1fr)}
  
}@media (prefers-reduced-motion:reduce){.rv *{transition:none!important}html{scroll-behavior:auto}.rv .reveal{opacity:1;transform:none}
}



.rv .price-row .now{display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.rv .price-row .now s{font-size:.30em;opacity:.4;font-weight:400;text-decoration:line-through}
.rv .price-row .save{align-self:center}
.rv .closer .btn{display:inline-flex;gap:8px}

/* ============================================================
   CARD GRIDS — intrinsic, no breakpoints.
   auto-fit + minmax means the browser fits as many columns as
   will hold the minimum width, so these cannot be defeated by a
   stale media query, a cached stylesheet or a theme override.
   Marked important because this file is loaded on a live theme
   we do not control.
   ============================================================ */
.rv .photocards{
  display:grid !important;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)) !important;
  gap:clamp(12px,2vw,22px) !important;
  align-items:stretch;
}
.rv .grid-4{
  display:grid !important;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,215px),1fr)) !important;
  gap:clamp(12px,2vw,20px) !important;
}
.rv .arc{
  display:grid !important;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,235px),1fr)) !important;
  gap:clamp(12px,2vw,20px) !important;
  align-items:stretch;
}
.rv .reels,.rv .creators{
  display:grid !important;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr)) !important;
  gap:clamp(12px,2vw,20px) !important;
}
.rv .bens{
  display:grid !important;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr)) !important;
  gap:12px 18px !important;
}

.rv .facts{display:grid !important;grid-template-columns:repeat(3,1fr) !important}


/* hero: image beside the buy panel from 900px up */
@media (min-width:900px){
  .rv .hero-body{display:grid !important;grid-template-columns:1fr 1fr !important;align-items:start !important}
  
  .rv .head{display:grid !important;grid-template-columns:180px 1fr !important;align-items:start}
}
.rv .head-c{grid-template-columns:1fr !important;justify-items:center;text-align:center}

/* every card fills its cell so a row lines up even with uneven text */
.rv .photocard,.rv .card,.rv .arc-step,.rv .creator,.rv .reel{height:100%}

/* ---- image slots added in 1.4 ---- */
.rv .fos-img{width:clamp(90px,16vw,150px);height:clamp(90px,16vw,150px);border-radius:50%;object-fit:cover;flex:0 0 auto}
.rv .idx-head{display:flex;align-items:center;gap:14px;margin-bottom:8px;flex-wrap:wrap}
.rv .idx-head h3{margin:0}
.rv .idx-img{width:clamp(44px,8vw,58px);height:clamp(44px,8vw,58px);border-radius:50%;object-fit:cover;flex:0 0 auto}

@media (min-width:560px){
  .rv .fos{grid-template-columns:auto auto 1fr !important;align-items:center}
  .rv .fos:not(:has(.fos-img)){grid-template-columns:auto 1fr !important}
}

/* ══════════════════════════════════════════════════════════════
   1. EYEBROW HEADINGS — larger and more prominent
   ══════════════════════════════════════════════════════════════ */
.rv .lbl{
  font-family:var(--mono);
  font-size:clamp(12.5px,2.6vw,14px);
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--teal-dk);font-weight:600;margin:0 0 4px;
  display:inline-flex;align-items:center;gap:11px;
}
.rv .lbl::after{content:"";width:clamp(24px,5vw,44px);height:2px;background:var(--amber);border-radius:2px;flex:0 0 auto}
.rv .head-c .lbl{justify-content:center}
.rv .head-c .lbl::before{content:"";width:clamp(24px,5vw,44px);height:2px;background:var(--amber);border-radius:2px;flex:0 0 auto}

/* ══════════════════════════════════════════════════════════════
   2. PROMOTIONAL BENEFITS — dark plum panel with icons
   ══════════════════════════════════════════════════════════════ */
.rv .promo{
  background:linear-gradient(150deg,var(--plum) 0%,var(--plum-deep) 100%);
  color:#fff;border-radius:18px;padding:clamp(18px,3.2vw,26px);margin-bottom:24px;
}
.rv .promo-title{
  margin:0 0 16px;font-family:var(--mono);font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--butter);font-weight:600;
}
.rv .promo-list{display:grid;gap:14px;margin:0;padding:0;list-style:none}
.rv .promo-list li{display:flex;align-items:center;gap:14px;min-width:0}
.rv .promo-ic{
  flex:0 0 auto;width:44px;height:44px;border-radius:50%;
  background:rgba(244,225,163,.14);border:1px solid rgba(244,225,163,.3);
  display:grid;place-items:center;
}
.rv .promo-ic svg{width:22px;height:22px;fill:none;stroke:var(--butter);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.rv .promo-ic img{width:24px;height:24px;object-fit:contain}
.rv .promo-tx{font-size:clamp(13.5px,2.3vw,15px);line-height:1.4;color:rgba(255,255,255,.85)}
.rv .promo-tx b{color:var(--butter);font-weight:600}
@media (min-width:520px){.rv .promo-list{grid-template-columns:1fr 1fr}}
@media (min-width:900px){.rv .promo-list{grid-template-columns:1fr}}
@media (min-width:1100px){.rv .promo-list{grid-template-columns:repeat(3,1fr);gap:18px}
  .rv .promo-list li{flex-direction:column;text-align:center;gap:11px}}

/* ══════════════════════════════════════════════════════════════
   7. PURITY BADGES — premium band
   ══════════════════════════════════════════════════════════════ */
.rv .band-title{
  text-align:center;margin:0 0 clamp(24px,3.5vw,38px);
  font-size:clamp(22px,4vw,36px);color:var(--plum);
}
.rv .purity{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,140px),1fr));
  gap:clamp(16px,2.6vw,26px);margin:0;padding:0;list-style:none}
.rv .purity li{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px}
.rv .purity-badge{
  width:clamp(64px,12vw,86px);height:clamp(64px,12vw,86px);border-radius:50%;
  background:#fff;display:grid;place-items:center;
  box-shadow:0 2px 0 rgba(63,26,59,.08), 0 14px 26px -16px rgba(63,26,59,.45);
}
.rv .purity-badge svg{width:52%;height:52%;fill:none;stroke:var(--plum);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.rv .purity-badge img{width:56%;height:56%;object-fit:contain}
.rv .purity-label{
  font-family:var(--mono);font-size:clamp(10.5px,2.1vw,12px);letter-spacing:.13em;
  text-transform:uppercase;color:var(--plum);line-height:1.45;font-weight:600;max-width:15ch;
}

/* ══════════════════════════════════════════════════════════════
   8. REELS — inline video
   ══════════════════════════════════════════════════════════════ */
.rv .reel-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:var(--plum)}
.rv .reel-play{
  position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);z-index:3;
  width:60px;height:60px;border-radius:50%;background:rgba(255,255,255,.94);
  display:grid;place-items:center;border:0;cursor:pointer;padding:0;
  transition:transform .2s ease,opacity .2s ease;
}
.rv .reel-play svg{width:21px;height:21px;fill:var(--plum);margin-left:3px}
.rv .reel:hover .reel-play{transform:translate(-50%,-50%) scale(1.07)}
.rv .reel.playing .reel-play{opacity:0;pointer-events:none}
.rv .reel.playing::after{opacity:.55}
.rv .reel::after{transition:opacity .3s ease}

.rv .reel-sound{
  position:absolute;right:14px;top:14px;z-index:3;
  width:34px;height:34px;border-radius:50%;background:rgba(44,15,41,.55);
  display:none;align-items:center;justify-content:center;border:0;cursor:pointer;padding:0;
}
.rv .reel-sound svg{width:17px;height:17px;color:#fff}
.rv .reel-sound .ico-off{display:none}
.rv .reel-sound[aria-pressed="true"] .ico-on{display:none}
.rv .reel-sound[aria-pressed="true"] .ico-off{display:block}
.rv .reel.playing .reel-sound{display:flex}

.rv .reel.has-video{cursor:pointer}

/* ══════════════════════════════════════════════════════════════
   8b. CUSTOMER REVIEWS
   ══════════════════════════════════════════════════════════════ */
.rv .rv-reviews{background:#fff;padding-block:clamp(36px,5vw,64px)}
.rv .rv-rv-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:clamp(18px,2.4vw,24px);flex-wrap:wrap}
.rv .rv-rv-head h2{margin:0;font-size:clamp(22px,3.4vw,28px);font-weight:700}
.rv .rv-rv-write-btn{border:1px solid var(--plum);background:#fff;color:var(--plum);font-size:13px;font-weight:600;
  padding:11px 20px;border-radius:8px;cursor:pointer;transition:background .2s ease}
.rv .rv-rv-write-btn:hover{background:var(--plum);color:#fff}

.rv .rv-rv-stars{display:inline-flex;gap:2px;vertical-align:middle}
.rv .rv-rv-stars svg{width:15px;height:15px}
.rv .rv-rv-stars svg.on{fill:var(--amber)}
.rv .rv-rv-stars svg.off{fill:var(--line)}

.rv .rv-rv-summary{display:grid;grid-template-columns:1fr;gap:20px;padding-bottom:clamp(18px,2.6vw,26px);
  border-bottom:1px solid var(--line-soft)}
.rv .rv-rv-avg{display:flex;flex-direction:column;gap:6px}
.rv .rv-rv-avg .rv-rv-stars svg{width:20px;height:20px}
.rv .rv-rv-avg p{margin:0;font-size:14px;font-weight:600;color:var(--plum)}

.rv .rv-rv-bars{display:flex;flex-direction:column;gap:6px;max-width:420px}
.rv .rv-rv-bar-row{display:grid;grid-template-columns:76px 1fr 34px 30px;align-items:center;gap:8px}
.rv .rv-rv-bar-row .rv-rv-stars svg{width:12px;height:12px}
.rv .rv-rv-bar-track{height:8px;border-radius:100px;background:var(--line-soft);overflow:hidden}
.rv .rv-rv-bar-fill{display:block;height:100%;background:var(--amber);border-radius:100px}
.rv .rv-rv-bar-pct{font-size:12px;color:var(--plum-2)}
.rv .rv-rv-bar-count{font-size:12px;color:var(--plum-2);opacity:.7}

.rv .rv-rv-toolbar{display:flex;justify-content:flex-start;padding:clamp(12px,1.6vw,16px) 0}
.rv .rv-rv-sort-form select{font-size:13px;padding:9px 14px;border:1px solid var(--line);border-radius:8px;
  background:#fff;color:var(--plum);cursor:pointer}

.rv .rv-rv-list{display:flex;flex-direction:column}
.rv .rv-rv-item{display:flex;gap:16px;padding:clamp(20px,2.8vw,26px) 0;border-top:1px solid var(--line-soft)}
.rv .rv-rv-avatar{flex:0 0 auto;width:44px;height:44px;border-radius:50%;background:var(--line-soft);
  color:var(--plum);font-weight:700;font-size:15px;display:flex;align-items:center;justify-content:center}
.rv .rv-rv-body{flex:1 1 auto;min-width:0}
.rv .rv-rv-item-top{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.rv .rv-rv-date{font-size:13px;color:var(--plum-2);opacity:.75}
.rv .rv-rv-item-name{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.rv .rv-rv-verified{font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  background:var(--plum);color:#fff;padding:3px 8px;border-radius:5px}
.rv .rv-rv-item-name strong{font-size:14.5px;font-weight:600}
.rv .rv-rv-title{margin:0 0 6px;font-size:16px;font-weight:700}
.rv .rv-rv-text{margin:0;font-size:14.5px;line-height:1.6;color:var(--plum-2)}
.rv .rv-rv-empty{font-size:14.5px;color:var(--plum-2)}

.rv .rv-rv-form-wrap{margin-top:clamp(24px,3.4vw,34px);padding-top:clamp(24px,3.4vw,34px);border-top:1px solid var(--line-soft)}
.rv .rv-rv-form-wrap{display:none}
.rv .rv-rv-form-wrap:target,
.rv .rv-rv-form-wrap.rv-open,
.rv .rv-rv-form-wrap:has(:target){display:block}
.rv .rv-rv-form-wrap .comment-reply-title{font-size:18px;font-weight:700;margin:0 0 16px}
.rv .rv-rv-form-wrap p{margin:0 0 14px}
.rv .rv-rv-form-wrap label{display:block;font-size:13px;font-weight:600;margin-bottom:6px;color:var(--plum)}
.rv .rv-rv-form-wrap input[type=text],
.rv .rv-rv-form-wrap input[type=email],
.rv .rv-rv-form-wrap select,
.rv .rv-rv-form-wrap textarea{width:100%;padding:11px 14px;border:1px solid var(--line);border-radius:8px;font-size:14px}
.rv .rv-rv-form-wrap textarea{resize:vertical}
.rv .rv-rv-form-wrap .form-submit input[type=submit]{border:0;background:var(--plum);color:#fff;font-weight:600;
  font-size:14px;padding:12px 26px;border-radius:8px;cursor:pointer}
.rv .rv-rv-form-wrap input[type=file]{width:100%;font-size:13px;color:var(--plum-2)}

/* Photo attached to a submitted review, shown under its text. */
.rv .rv-rv-photo{display:inline-block;margin-top:12px;border-radius:10px;overflow:hidden;
  border:1px solid var(--line-soft);line-height:0}
.rv .rv-rv-photo img{display:block;width:84px;height:84px;object-fit:cover}

@media (min-width:760px){
  .rv .rv-rv-summary{grid-template-columns:220px 1fr}
}

/* ══════════════════════════════════════════════════════════════
   9. RESPONSIVE PASS
   Mobile is treated as its own layout, not a shrunken desktop.
   ══════════════════════════════════════════════════════════════ */

/* --- small phones, 360px and below --- */
@media (max-width:400px){
  .rv{--pad:16px}
  .rv h1{font-size:26px;line-height:1.12}
  .rv h2{font-size:24px;line-height:1.14}
  .rv .now{font-size:34px}
  
  
  .rv .facts div{padding:16px 4px}
  .rv .facts b{font-size:17px}
  .rv .facts span{font-size:8.5px;letter-spacing:.1em}
  
  .rv .purity-badge{width:60px;height:60px}
  .rv .btn{height:58px;font-size:15.5px;padding-inline:18px}
}

/* --- phones, up to 560px --- */
@media (max-width:560px){
  .rv .sec{padding-block:clamp(40px,10vw,58px)}
  .rv .head{margin-bottom:26px}
  .rv .hero{padding-block:18px 0}
  .rv .hero-body{gap:22px}
  .rv .buy .dek{margin-bottom:22px}
  .rv .bens{gap:11px}
  .rv .bens li{font-size:14px}
  .rv .bens svg{width:34px;height:34px;padding:7px}
  
  
  .rv .fos{gap:16px;text-align:left}
  .rv .fos-n{font-size:56px}
  .rv .fos-img{width:74px;height:74px}
  .rv .idx{gap:12px;padding-block:18px}
  .rv .idx-n{font-size:17px}
  .rv .photocard{min-height:340px}
  .rv .arc-step{padding:18px}
  .rv .reel-play{width:52px;height:52px}
  .rv .reel-body{padding:16px}
  .rv .faq summary{font-size:17px;padding-right:38px}
  .rv .closer{padding-block:52px}
  .rv .closer h2{font-size:34px}
  .rv .promo{padding:18px;border-radius:16px}
  
  .rv .band-title{font-size:23px}
  /* full width tap targets on phones */
  .rv .btn,.rv .closer .btn{width:100% !important;min-width:0 !important}
}

/* --- tablet portrait --- */
@media (min-width:561px) and (max-width:899px){
  .rv .sec{padding-block:clamp(52px,8vw,76px)}
  
  
  .rv .buy{max-width:640px;margin-inline:auto}
  
  .rv .photocard{min-height:400px}
}

/* --- laptop --- */
@media (min-width:900px) and (max-width:1279px){
  .rv .wrap{max-width:1120px}
  .rv h1{font-size:clamp(30px,3.6vw,42px)}
  .rv .photocard{min-height:400px}
}

/* --- large desktop --- */
@media (min-width:1600px){
  .rv .wrap{max-width:1360px}
}

/* --- video and media never overflow --- */
.rv video,.rv iframe{max-width:100%}
.rv .reel{aspect-ratio:9/16}

/* --- touch devices: no hover lift, bigger targets --- */
@media (hover:none){
  .rv .card:hover,.rv .creator:hover,.rv .reel:hover{transform:none}
  .rv .faq summary{padding-block:20px}
  
}
/* ══════════════════════════════════════════════════════════════
   COMPARISON — head to head bar chart
   Mirrored bars either side of the attribute. On mobile it
   unfolds into labelled full width bars so nothing scrolls.
   ══════════════════════════════════════════════════════════════ */
.rv .vs2{max-width:1060px;margin-inline:auto}

.rv .vs2-head{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  gap:clamp(12px,3vw,28px);padding-bottom:clamp(22px,3.5vw,34px);
  border-bottom:1px solid var(--line);margin-bottom:clamp(22px,3.5vw,36px);
}
.rv .vs2-brand{display:flex;align-items:center;gap:clamp(10px,2vw,18px);min-width:0}
.rv .vs2-brand.us{justify-content:flex-end;text-align:right}
.rv .vs2-brand.them{justify-content:flex-start;text-align:left}
.rv .vs2-brand-tx{min-width:0}
.rv .vs2-brand-tx b{
  display:block;font-family:var(--display);font-weight:700;color:var(--plum);
  font-size:clamp(17px,3.2vw,30px);line-height:1.1;letter-spacing:var(--track);
}
.rv .vs2-brand-tx span{
  display:block;margin-top:7px;font-size:clamp(11.5px,1.9vw,13.5px);
  line-height:1.45;color:var(--plum-2);opacity:.7;max-width:32ch;
}
.rv .vs2-brand.us .vs2-brand-tx span{margin-left:auto}
.rv .vs2-ic{
  flex:0 0 auto;width:clamp(46px,9vw,72px);height:clamp(46px,9vw,72px);border-radius:50%;
  display:grid;place-items:center;border:3px solid;background:#fff;overflow:hidden;
}
.rv .vs2-ic.us{border-color:var(--teal-dk)}
.rv .vs2-ic.them{border-color:rgba(63,26,59,.28)}
.rv .vs2-ic svg{width:46%;height:46%;fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.rv .vs2-ic.us svg{stroke:var(--teal-dk)}
.rv .vs2-ic.them svg{stroke:var(--plum);opacity:.5}
.rv .vs2-ic img{width:100%;height:100%;object-fit:cover}
.rv .vs2-vs{
  font-family:var(--display);font-weight:700;color:var(--plum);
  font-size:clamp(20px,4vw,34px);letter-spacing:-.02em;
}

.rv .vs2-rows{display:grid;gap:clamp(12px,2vw,18px)}
.rv .vs2-row{
  display:grid;grid-template-columns:1fr minmax(96px,168px) 1fr;
  align-items:center;gap:clamp(8px,2vw,18px);
}
.rv .vs2-attr{
  margin:0;text-align:center;font-family:var(--body);font-weight:600;
  font-size:clamp(12.5px,2.1vw,15px);line-height:1.3;color:var(--plum);
}
.rv .vs2-side{display:flex;flex-direction:column;min-width:0;gap:6px}
.rv .vs2-side.us{align-items:flex-end}
.rv .vs2-side.them{align-items:flex-start}
.rv .vs2-bar{
  width:0;min-width:54px;height:clamp(34px,5.2vw,42px);border-radius:100px;
  display:flex;align-items:center;padding-inline:14px;
  transition:width 1s cubic-bezier(.2,.75,.3,1);
}
.rv .vs2.in .vs2-bar{width:var(--w)}
.rv .vs2-bar b{font-family:var(--mono);font-size:clamp(11.5px,2vw,13.5px);font-weight:700;letter-spacing:.02em}
.rv .vs2-side.us .vs2-bar{
  background:linear-gradient(90deg,var(--teal) 0%,var(--teal-dk) 100%);
  justify-content:flex-end;color:#fff;
}
.rv .vs2-side.them .vs2-bar{
  background:linear-gradient(90deg,rgba(63,26,59,.34) 0%,rgba(63,26,59,.15) 100%);
  justify-content:flex-start;color:var(--plum);
}
.rv .vs2-cap{
  font-size:clamp(11.5px,1.9vw,13px);line-height:1.4;color:var(--plum-2);
  opacity:.72;max-width:30ch;
}
.rv .vs2-side.us .vs2-cap{text-align:right}
.rv .vs2-side.them .vs2-cap{text-align:left;opacity:.5}

/* mobile: unfold into labelled full width bars */
@media (max-width:719px){
  .rv .vs2-head{grid-template-columns:1fr auto 1fr;gap:8px;text-align:center}
  .rv .vs2-brand{flex-direction:column;gap:10px}
  .rv .vs2-brand.us,.rv .vs2-brand.them{text-align:center;justify-content:flex-start}
  .rv .vs2-brand.them{flex-direction:column-reverse}
  .rv .vs2-brand-tx span{display:none}
  .rv .vs2-rows{gap:16px}
  .rv .vs2-row{
    grid-template-columns:1fr;gap:8px;background:var(--white);
    border-radius:14px;padding:15px 16px;border:1px solid var(--line-soft);
  }
  .rv .vs2-attr{
    text-align:left;order:-1;font-family:var(--mono);font-size:10.5px;
    letter-spacing:.16em;text-transform:uppercase;opacity:.6;
  }
  .rv .vs2-side{width:100%;align-items:stretch !important}
  .rv .vs2-side::before{
    content:attr(data-l);font-family:var(--mono);font-size:9px;letter-spacing:.14em;
    text-transform:uppercase;font-weight:700;opacity:.55;color:var(--plum);
  }
  .rv .vs2-bar{justify-content:flex-start !important}
  .rv .vs2-side.us .vs2-bar{background:linear-gradient(90deg,var(--teal-dk),var(--teal))}
  .rv .vs2-cap{text-align:left !important;max-width:none}
}


/* ══════════════════════════════════════════════════════════════
   COLLAGE BAND — one image with the circle over it
   ══════════════════════════════════════════════════════════════ */
.rv .collage-sec{
  background:transparent;
  padding-block:clamp(48px,8vw,110px);
  margin-block:clamp(24px,4.5vw,60px);
}
.rv .collage{
  position:relative;border-radius:20px;overflow:hidden;
  aspect-ratio:1/1;background:var(--cream);max-width:560px;
}
.rv .collage>img{width:100%;height:100%;object-fit:cover;display:block}

@media (max-width:899px){
  .rv .collage{margin-inline:auto}
  .rv .collage-sec{margin-block:clamp(22px,5vw,40px)}
}

.rv .collage-grid{display:grid;gap:clamp(28px,6vw,96px);align-items:center}
@media (min-width:900px){
  .rv .collage-grid{grid-template-columns:minmax(280px,480px) 1fr}
}




/* ══════════════════════════════════════════════════════════════
   PRODUCT GALLERY — image fills the frame, no coloured card behind it
   ══════════════════════════════════════════════════════════════ */





.rv .thumbs button[aria-current="true"]{border-color:var(--amber)}
.rv .thumbs button img{width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit}
@media (max-width:400px){}

/* ══════════════════════════════════════════════════════════════
   Buy Now buttons injected by other plugins are hidden inside the
   template. The template has one call to action on purpose.
   ══════════════════════════════════════════════════════════════ */
.rv .buy-now,
.rv .buy-now-button,
.rv .buy_now_button,
.rv .wc-buy-now,
.rv .quick-buy,
.rv [class*="buy-now"],
.rv [class*="buynow"],
.rv [class*="buy_now"],
.rv [id*="buy-now"],
.rv [id*="buynow"],
.rv .single_add_to_cart_button + a.button,
.rv .wd-buy-now-btn,
.rv .yith-wcqv-button{
  display:none !important;
}

/* ══════════════════════════════════════════════════════════════
   Heading to body spacing. Headings were butting into the
   paragraph or list underneath them.
   ══════════════════════════════════════════════════════════════ */
.rv .head p.sub{margin-top:clamp(16px,2.4vw,24px)}
.rv .head h2{margin-bottom:0}
.rv .collage-copy h2{margin-bottom:clamp(24px,3.4vw,34px)}
.rv .collage-copy .lbl{margin-bottom:clamp(10px,1.6vw,14px)}
.rv .fos h3{margin-bottom:clamp(12px,1.8vw,16px)}
.rv .arc-step h3{margin-bottom:clamp(14px,2vw,18px)}
.rv .idx h3{margin-bottom:clamp(8px,1.4vw,12px)}
.rv .card h3{margin-bottom:clamp(8px,1.4vw,12px)}
.rv .photocard h3{margin-bottom:clamp(8px,1.4vw,12px)}
.rv .closer h2{margin-bottom:clamp(16px,2.4vw,24px)}
.rv .band-title{margin-bottom:clamp(26px,3.8vw,42px)}
.rv h1,.rv h2,.rv h3{line-height:1.14}
.rv .now{line-height:.9}

/* Closing section button only. Scoped to .closer so the hero Add to cart,
   which is already full width inside the buy panel, is untouched. */
.rv .closer form.cart{display:flex;justify-content:center}
.rv .closer .btn-primary{
  width:100%;
  max-width:min(460px,100%);
  flex:0 0 auto;
  padding-inline:clamp(28px,5vw,48px);
}

/* highlight card icons: built in svg, or an uploaded image */
.rv .card .ic-svg{
  display:grid;place-items:center;
  width:clamp(46px,8vw,56px);height:clamp(46px,8vw,56px);
  border-radius:50%;background:var(--teal-soft);margin-bottom:18px;
}
.rv .card .ic-svg svg{
  width:52%;height:52%;fill:none;stroke:var(--teal-dk);
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
}
.rv .card img.ic{
  width:clamp(46px,8vw,56px);height:clamp(46px,8vw,56px);
  object-fit:contain;margin-bottom:18px;border-radius:0;background:none;
}

/* ══════════════════════════════════════════════════════════════
   SPEC TABLE — readable. Body font instead of mono, larger sizes,
   proper contrast, and it stacks on small phones.
   ══════════════════════════════════════════════════════════════ */
.rv .spec{
  margin:clamp(22px,3vw,30px) 0 0;
  border:1px solid var(--line-soft);
  border-radius:14px;
  overflow:hidden;
  background:var(--cream-2);
}
.rv .spec div{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:clamp(14px,3vw,28px);
  padding:clamp(13px,2.2vw,16px) clamp(14px,2.6vw,20px);
  border-bottom:1px solid var(--line-soft);
  font-family:var(--body);
}
.rv .spec div:last-child{border-bottom:0}
.rv .spec dt{
  margin:0;flex:0 0 auto;
  font-family:var(--body);
  font-size:clamp(13px,2.2vw,14px);
  font-weight:400;letter-spacing:normal;text-transform:none;
  color:var(--plum-2);opacity:.75;
}
.rv .spec dd{
  margin:0;text-align:right;
  font-family:var(--body);
  font-size:clamp(13.5px,2.3vw,15px);
  font-weight:600;letter-spacing:normal;
  color:var(--plum);line-height:1.4;
}
@media (max-width:430px){
  .rv .spec div{flex-direction:column;align-items:flex-start;gap:4px}
  .rv .spec dd{text-align:left;max-width:none}
}

/* ══════════════════════════════════════════════════════════════
   Flashing offer line above the price.
   A soft pulse rather than a hard on/off blink: hard blinking is a
   WCAG 2.2.2 problem and reads as spam. Fully stopped for anyone
   with reduced motion switched on.
   ══════════════════════════════════════════════════════════════ */

.rv .flash-dot{
  width:8px;height:8px;border-radius:50%;background:#D64545;flex:0 0 auto;
  animation:rvPulse 1.4s ease-in-out infinite;
}
.rv .flash-tx{animation:rvFade 1.4s ease-in-out infinite}
@keyframes rvPulse{
  0%,100%{opacity:1;transform:scale(1);box-shadow:0 0 0 0 rgba(214,69,69,.55)}
  50%{opacity:.5;transform:scale(.82);box-shadow:0 0 0 6px rgba(214,69,69,0)}
}
@keyframes rvFade{0%,100%{opacity:1}50%{opacity:.55}}
@media (prefers-reduced-motion:reduce){
  .rv .flash-dot,.rv .flash-tx{animation:none}
}

/* Benefit list: two per row on phones and tablets instead of a single
   long column. The auto-fit rule needs a 200px minimum to fit two, which
   a phone cannot give, so the column count is set explicitly here. */
@media (max-width:899px){
  .rv .bens{
    grid-template-columns:repeat(2,1fr) !important;
    gap:16px 12px !important;
  }
  .rv .bens li{
    align-items:flex-start;
    gap:9px;
    font-size:clamp(12.5px,3.2vw,14px);
    line-height:1.35;
  }
  .rv .bens svg{
    width:30px;height:30px;padding:6px;margin-top:1px;
  }
}
/* very small phones keep one column, two would break the words up */
@media (max-width:359px){
  .rv .bens{grid-template-columns:1fr !important}
  .rv .bens li{align-items:center;font-size:13.5px}
  .rv .bens svg{width:34px;height:34px;padding:7px;margin-top:0}
}

/* ══════════════════════════════════════════════════════════════
   THUMBNAIL SLIDER — scrolls horizontally once there are more
   thumbnails than fit. Arrows appear only when it can scroll.
   ══════════════════════════════════════════════════════════════ */
.rv .thumbs-wrap{position:relative;margin-top:10px}
.rv .thumbs{
  display:flex;gap:10px;
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x proximity;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  padding-bottom:6px;
  scrollbar-width:thin;
  scrollbar-color:rgba(63,26,59,.25) transparent;
}
.rv .thumbs::-webkit-scrollbar{height:4px}
.rv .thumbs::-webkit-scrollbar-track{background:transparent}
.rv .thumbs::-webkit-scrollbar-thumb{background:rgba(63,26,59,.22);border-radius:100px}
.rv .thumbs button{
  flex:0 0 clamp(74px,19vw,108px);
  scroll-snap-align:start;
  aspect-ratio:1/1;max-width:none;
}
.rv .thumbs-nav{
  position:absolute;top:calc(50% - 3px);transform:translateY(-50%);z-index:3;
  width:34px;height:34px;border-radius:50%;
  background:rgba(255,255,255,.95);
  box-shadow:0 2px 4px rgba(63,26,59,.1), 0 8px 18px -8px rgba(63,26,59,.5);
  display:none;place-items:center;padding:0;border:0;cursor:pointer;
}
.rv .thumbs-wrap.can-scroll .thumbs-nav{display:grid}
.rv .thumbs-nav.prev{left:-6px}
.rv .thumbs-nav.next{right:-6px}
.rv .thumbs-nav svg{width:16px;height:16px;fill:none;stroke:var(--plum);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.rv .thumbs-nav[disabled]{opacity:0;pointer-events:none}
@media (hover:none){
  /* on touch, swiping is the obvious gesture, so the arrows stay out of the way */
  .rv .thumbs-wrap.can-scroll .thumbs-nav{display:none}
}

/* ══════════════════════════════════════════════════════════════
   Offer row above the price: pulsing offer line + countdown
   ══════════════════════════════════════════════════════════════ */
.rv .flash-row{
  display:grid;grid-template-columns:auto auto;
  align-items:center;justify-content:space-between;
  gap:10px 14px;
  margin:clamp(20px,3vw,30px) 0 -6px;
}
.rv .flash{
  display:inline-flex;align-items:center;gap:9px;margin:0;
  padding:8px 15px;border-radius:100px;
  background:var(--butter);border:1px solid rgba(233,150,43,.5);
  font-size:clamp(12px,2.2vw,13.5px);font-weight:600;
  letter-spacing:.02em;color:var(--plum);
}
.rv .ctdn{
  display:inline-flex;align-items:center;gap:9px;margin:0;
  justify-self:end;white-space:nowrap;
}
.rv .ctdn-l{
  font-size:clamp(10.5px,2vw,12px);font-weight:500;
  color:var(--plum-2);opacity:.75;letter-spacing:.02em;
}
.rv .ctdn-t{
  font-family:var(--mono);font-size:clamp(12.5px,2.4vw,15px);font-weight:700;
  color:var(--plum);background:rgba(63,26,59,.07);
  padding:6px 11px;border-radius:8px;letter-spacing:.06em;
  font-variant-numeric:tabular-nums;
}
.rv .ctdn.is-over{display:none}


/* Offer line and countdown stay side by side on phones.
   The pill flexes, the clock keeps its width, and the label drops
   away on the narrowest screens so the digits never get squeezed. */
@media (max-width:640px){
  .rv .flash-row{grid-template-columns:1fr auto;gap:8px;align-items:center}
  .rv .flash{
    font-size:clamp(10px,2.9vw,12px);
    padding:7px 11px;gap:7px;line-height:1.25;min-width:0;
    /* hug the text instead of filling the 1fr column */
    justify-self:start;width:fit-content;max-width:100%;
  }
  .rv .flash-dot{width:7px;height:7px}
  .rv .ctdn{gap:6px;justify-self:end}
  .rv .ctdn-l{font-size:clamp(8.5px,2.3vw,10.5px)}
  .rv .ctdn-t{font-size:clamp(11px,3vw,13px);padding:5px 8px;letter-spacing:.04em}
}
@media (max-width:420px){
  .rv .ctdn-l{display:none}
  .rv .flash{font-size:10px;padding:6px 9px;gap:6px}
  .rv .ctdn-t{font-size:11px;padding:5px 7px}
}

/* ══════════════════════════════════════════════════════════════
   REELS ON MOBILE — swipeable strip.
   One card fills the view and the next one peeks in from the right,
   so it is obvious the row slides. Full bleed to the screen edge.
   ══════════════════════════════════════════════════════════════ */
@media (max-width:640px){
  .rv .reels{
    display:flex !important;
    grid-template-columns:none !important;
    flex-wrap:nowrap;
    gap:12px !important;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-snap-type:x mandatory;
    scroll-padding-left:var(--pad);
    -webkit-overflow-scrolling:touch;
    margin-inline:calc(var(--pad) * -1);
    padding-inline:var(--pad);
    padding-bottom:10px;
    scrollbar-width:none;
  }
  .rv .reels::-webkit-scrollbar{display:none}
  .rv .reels .reel{
    flex:0 0 68%;
    scroll-snap-align:start;
    height:auto;
  }
  /* the last card can still reach the left edge when snapped */
  .rv .reels::after{content:"";flex:0 0 calc(32% - 12px)}
}

/* video card: tap anywhere to play */
.rv .reel.has-video{cursor:pointer}
.rv .reel:not(.has-video) .reel-play{display:none}

/* ══════════════════════════════════════════════════════════════
   HOW TO USE CARDS ON MOBILE — swipeable strip, same behaviour as
   the reels: one card in view, the next peeking in from the right.
   ══════════════════════════════════════════════════════════════ */
@media (max-width:640px){
  .rv .photocards{
    display:flex !important;
    grid-template-columns:none !important;
    flex-wrap:nowrap;
    gap:12px !important;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-snap-type:x mandatory;
    scroll-padding-left:var(--pad);
    -webkit-overflow-scrolling:touch;
    margin-inline:calc(var(--pad) * -1);
    padding-inline:var(--pad);
    padding-bottom:10px;
    scrollbar-width:none;
  }
  .rv .photocards::-webkit-scrollbar{display:none}
  .rv .photocards .photocard{
    flex:0 0 72%;
    scroll-snap-align:start;
    min-height:clamp(300px,62vw,400px);
    height:auto;
  }
  .rv .photocards::after{content:"";flex:0 0 calc(28% - 12px)}
}

/* ══════════════════════════════════════════════════════════════
   Gallery images are shown whole, not cropped.
   Product photography here is often a square infographic, and
   object-fit:cover was slicing the edges off it.
   ══════════════════════════════════════════════════════════════ */


.rv .thumbs button{background:#fff;padding:4px}
.rv .thumbs button img{object-fit:contain;border-radius:8px}
@media (max-width:640px){
  .rv .thumbs button{flex:0 0 clamp(64px,17vw,88px);padding:3px}
}

/* ══════════════════════════════════════════════════════════════
   MAIN IMAGE — swipeable track. Swipe the big image to change
   slide, or tap a thumbnail. The two stay in sync both ways.
   ══════════════════════════════════════════════════════════════ */
.rv .shot{
  position:relative;background:#fff;border-radius:18px;
  aspect-ratio:1/1;overflow:hidden;padding:0;display:block;
}
.rv .shot-track{
  display:flex;height:100%;width:100%;
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.rv .shot-track::-webkit-scrollbar{display:none}
.rv .shot-track img{
  flex:0 0 100%;width:100%;height:100%;
  object-fit:contain;scroll-snap-align:center;
  border-radius:0;
}
@media (prefers-reduced-motion:reduce){
  .rv .shot-track{scroll-behavior:auto}
}

/* add to cart button states */
.rv .btn.is-loading{opacity:.85;cursor:progress}
.rv .btn.is-added{background:var(--teal-dk);color:#fff;box-shadow:0 3px 0 #2F6157}
.rv .rv-spin{
  width:16px;height:16px;border-radius:50%;flex:0 0 auto;
  border:2px solid rgba(63,26,59,.28);border-top-color:var(--plum);
  animation:rvSpin .7s linear infinite;
}
.rv .rv-tick{font-size:15px;line-height:1;flex:0 0 auto}
@keyframes rvSpin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.rv .rv-spin{animation-duration:2s}}

/* The reveal works with CSS alone via :target, so the Write a review
   button is never dependent on JavaScript running. */
.rv .rv-rv-write-btn{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;cursor:pointer}
.rv .rv-rv-form-wrap:target{scroll-margin-top:90px}

/* ══════════════════════════════════════════════════════════════
   PACK OPTIONS
   Ribbon sits as a tab above the card, the saving line sits below
   it, and the card itself hugs its content. Radio driven, so the
   selection works with no JavaScript.
   ══════════════════════════════════════════════════════════════ */
.rv .tiers{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,124px),1fr));
  gap:clamp(9px,1.8vw,15px);
  /* room for the tab above and the saving line below */
  padding:26px 0 30px;
  margin:clamp(10px,2vw,18px) 0 0;
  align-items:stretch;
}
.rv .tier{
  position:relative;display:flex;flex-direction:column;
  border:2px solid rgba(63,26,59,.14);border-radius:12px;
  background:var(--cream-2);cursor:pointer;
  text-align:center;padding:0;overflow:visible;
  transition:border-color .18s ease,background .18s ease,box-shadow .18s ease;
}
.rv .tier-radio{position:absolute;opacity:0;width:0;height:0;margin:0;pointer-events:none}
.rv .tier:hover{border-color:var(--teal)}

/* Selected state is a sibling rule on the radio itself. It needs no :has()
   support and no JavaScript, so exactly one card can ever look selected. */
.rv .tier-radio:checked + .tier{
  border-color:var(--teal-dk);background:#fff;
  box-shadow:0 12px 24px -18px rgba(63,26,59,.55);
}
.rv .tier-radio:focus-visible + .tier{outline:3px solid var(--amber);outline-offset:3px}

/* tab above the card */
.rv .tier-ribbon{
  position:absolute;top:-26px;left:-2px;right:-2px;height:26px;
  display:flex;align-items:center;justify-content:center;
  background:var(--butter);color:var(--plum);
  border-radius:11px 11px 0 0;
  font-size:clamp(9.5px,2vw,11px);font-weight:700;letter-spacing:.02em;
  padding:0 6px;line-height:1.1;white-space:nowrap;overflow:hidden;
}
.rv .tier.has-ribbon{border-top-left-radius:0;border-top-right-radius:0}

/* saving line below the card */
.rv .tier-save{
  position:absolute;left:0;right:0;bottom:-27px;
  font-size:clamp(11px,2.2vw,13px);font-weight:700;
  color:var(--teal-dk);line-height:1.2;
}

.rv .tier-body{
  display:block;
  padding:clamp(14px,2.6vw,20px) 8px clamp(12px,2.2vw,16px);
}
.rv .tier-head{
  display:block;font-family:var(--display);font-weight:700;color:var(--plum);
  font-size:clamp(19px,4vw,26px);line-height:1;letter-spacing:var(--track);
}
.rv .tier-sub{
  display:block;margin-top:3px;font-size:clamp(11px,2.2vw,13px);
  color:var(--plum-2);opacity:.8;line-height:1.2;
}
.rv .tier-mrp{
  display:block;margin-top:10px;font-size:clamp(10.5px,2vw,12px);
  opacity:.45;text-decoration:line-through;
}
.rv .tier-price{
  display:block;margin-top:2px;font-weight:700;color:var(--plum);
  font-size:clamp(14px,2.9vw,18px);
}

/* per unit strip fills the bottom of the card */
.rv .tier-unit{
  display:block;margin-top:auto;
  background:var(--teal-dk);color:#fff;
  border-radius:0 0 9px 9px;
  font-family:var(--mono);font-size:clamp(9.5px,1.9vw,11px);font-weight:700;
  padding:7px 4px;letter-spacing:.02em;
}

.rv .tier-note{
  margin:0 0 18px;text-align:center;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;
  text-transform:uppercase;opacity:.5;
}
@media (max-width:360px){
  .rv .tiers{grid-template-columns:1fr 1fr;gap:8px}
}

/* The cart form holds only the button, but themes still style form.cart,
   so keep it out of the way of our layout. */
.rv form.cart{
  display:block !important;width:100% !important;float:none !important;
  clear:both !important;margin:0 !important;padding:0 !important;
  border:0 !important;background:none !important;
}
.rv form.cart::before,.rv form.cart::after{content:none !important;display:none !important}

/* Elementor writes a per-product CSS file (post-<id>.css) that pins
   form.cart to a fixed height (60px on the pages checked), sized for the
   quantity row on one line. Below ~320px that row wraps the plus/minus
   stepper and the Add to cart button onto two lines, the form's own box
   stays at that fixed height with overflow left visible, and the button
   spills out of it and overlaps whatever section comes next (the
   certification badges). Only the narrow width where that wrap actually
   happens gets height:auto - leaving it on at every width, tablet and
   desktop included, is what caused a different, unrelated layout problem
   above 320px last time, and nothing at those wider sizes needs the
   override anyway since the row never wraps there. 480px leaves a safety
   margin above the ~360px this actually wraps at, without reaching into
   the widths the fixed height was presumably sized for. */
@media (max-width:480px){
  .rv form.cart{height:auto !important}
}
.rv .tiers{position:relative;z-index:2}

/* Breathing room under the Add to cart button. The button's own inline
   bottom margin collapses through the form on some themes, so the gap is
   set on the promo box instead where nothing can swallow it. */
.rv .promo{margin-top:clamp(22px,3.4vw,32px)}
.rv form.cart{margin-bottom:clamp(4px,1vw,8px) !important}

/* ══════════════════════════════════════════════════════════════
   SECTION ORDER
   The tint is decided in PHP as the page renders, so a reorder
   cannot stack two tinted blocks. This is the belt and braces
   for a child theme partial that hardcodes the cream class:
   the second of a pair drops its tint, a third picks it back up.
   ══════════════════════════════════════════════════════════════ */
.rv .sec-cream + .sec-cream{background:transparent}
.rv .sec-cream + .sec-cream + .sec-cream{background:var(--cream-2)}

/* ══════════════════════════════════════════════════════════════
   QUANTITY SELECTOR
   The alternative to the pack cards. .qtyrow and .stepper were
   already styled for the pill shaped control; these rules add the
   label and swap the old display element for a real number input,
   so the quantity still posts with JavaScript off.
   ══════════════════════════════════════════════════════════════ */
.rv .qty-label{margin:clamp(22px,3.4vw,30px) 0 10px;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--teal-dk)}
.rv .qtyrow{margin-bottom:20px}
.rv .stepper input.rv-qty-num{width:56px;height:64px;border:0;background:transparent;text-align:center;
  font-family:var(--mono);font-size:16px;font-weight:600;color:var(--plum);padding:0;
  -moz-appearance:textfield;appearance:textfield}
.rv .stepper input.rv-qty-num::-webkit-outer-spin-button,
.rv .stepper input.rv-qty-num::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.rv .stepper input.rv-qty-num:focus{outline:0}
.rv .stepper:focus-within{box-shadow:0 0 0 3px rgba(233,150,43,.28)}
.rv .stepper button:disabled{opacity:.35;cursor:not-allowed}
.rv .stepper button:disabled:hover{background:none}

@media (max-width:400px){
  .rv .qtyrow{gap:8px}
  .rv .stepper button{width:42px}
  .rv .stepper input.rv-qty-num{width:44px}
}

/* ══════════════════════════════════════════════════════════════
   CERTIFICATION BADGES
   Small logo cards under Add to cart. Five across at every width,
   including the narrowest phone: a certification row that wraps
   to three and two reads as two separate things.

   Sized defensively on purpose. The first version took its height
   from aspect-ratio and left the image at width:auto, capped only
   by max-width and max-height percentages. That works until one
   of those percentages has no definite height to resolve against,
   and then the image renders at its natural size and takes the
   page with it. Here the card has a real height, the image is
   told to fill it, and the card clips anything that still does
   not behave. No single property failing can blow the row out.
   ══════════════════════════════════════════════════════════════ */
.rv .trust{list-style:none;margin:0 0 24px;padding:0;display:grid;
  grid-template-columns:repeat(5,1fr);gap:clamp(4px,1.5vw,8px)}
.rv .trust li{display:flex;flex-direction:column;align-items:center;gap:5px;min-width:0}
.rv .trust-badge{box-sizing:border-box;display:flex;align-items:center;justify-content:center;
  width:100%;height:clamp(44px,12.5vw,64px);overflow:hidden;
  background:#fff;border:1px solid var(--line-soft);border-radius:10px;
  padding:5px;transition:border-color .18s ease}
.rv .trust li:hover .trust-badge{border-color:var(--line)}
.rv .trust-badge img{display:block;width:100%;height:100%;max-width:100%;max-height:100%;
  object-fit:contain;mix-blend-mode:multiply}
.rv .trust-label{font-family:var(--mono);font-size:8px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--teal-dk);text-align:center;line-height:1.2;overflow-wrap:anywhere}

/* Five labels do not fit under five cards on a small phone, and the logos
   say the same thing on their own. The alt text still carries the name. */
@media (max-width:400px){
  .rv .trust{gap:4px}
  .rv .trust-badge{border-radius:8px;padding:4px}
  .rv .trust-label{display:none}
}

/* ══════════════════════════════════════════════════════════════
   UPLOADED BENEFIT ICON
   Same circle as the built in set, so a mixed list of uploaded
   and built in icons still lines up.
   ══════════════════════════════════════════════════════════════ */
.rv .bens .ben-ic{width:36px;height:36px;flex:0 0 auto;display:grid;place-items:center;
  background:var(--teal-soft);border-radius:50%;padding:7px}
.rv .bens .ben-ic img{width:100%;height:100%;object-fit:contain;display:block}

/* ══════════════════════════════════════════════════════════════
   STICKY ADD TO CART — mobile only
   Hidden by default everywhere. On mobile widths it sits fixed to
   the bottom of the screen but stays off-screen (translateY) until
   revaya-product.js adds .is-visible, which happens once the real
   buy panel up in the hero has scrolled out of view. If JS never
   runs, this bar simply never appears — the hero's own Add to cart
   button still works on its own, so nothing is lost, only the
   sticky convenience.
   ══════════════════════════════════════════════════════════════ */
.rv-sticky-atc{display:none}

@media (max-width:899px){
  .rv-sticky-atc{
    display:block;position:fixed;left:0;right:0;bottom:0;width:100%;
    box-sizing:border-box;z-index:40;
    background:var(--white);border-top:1px solid var(--line);
    box-shadow:0 -6px 18px rgba(44,15,41,.1);
    padding-bottom:env(safe-area-inset-bottom,0px);
    transform:translateY(100%);transition:transform .28s cubic-bezier(.2,.7,.3,1);
  }
  .rv-sticky-atc.is-visible{transform:translateY(0)}
  /* Deliberately its own small, fixed padding rather than .wrap's
     clamp(18px,5vw,64px) — that scale is sized for a full page section,
     not a slim chrome bar, and was what made this look oversized. */
  .rv-sticky-atc-body{
    display:flex;align-items:center;gap:8px;
    padding:8px 12px;width:100%;box-sizing:border-box;
  }
  .rv-sticky-atc-shot{
    flex:0 0 auto;width:32px;height:32px;border-radius:8px;object-fit:cover;
    border:1px solid var(--line-soft);
  }
  .rv-sticky-atc-info{flex:1 1 auto;min-width:0}
  .rv-sticky-atc-name{
    margin:0;font-size:12px;font-weight:600;color:var(--plum);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  .rv-sticky-atc-price{margin:1px 0 0;font-family:var(--mono);font-size:12px;color:var(--teal-dk)}
  /* !important throughout this rule and the next: Elementor and theme
     stylesheets commonly reset form/button width to 100% for their own
     form fields, with enough specificity to beat a plain flex:0 0 auto
     here. Pinning both width and margin explicitly is what actually keeps
     this adaptive-width and pushed to the right edge regardless of what
     else is loaded on the page — the same reasoning the font-family
     overrides in revaya-product-template.php's enqueue already use. */
  .rv-sticky-atc form.rv-cart{
    flex:0 0 auto !important;width:auto !important;max-width:none !important;
    margin:0 0 0 auto !important;display:block;
  }
  .rv-sticky-atc .btn{
    height:36px;padding-inline:16px;font-size:12.5px;border-radius:100px;
    flex:0 0 auto !important;width:auto !important;max-width:none !important;
    min-width:0;white-space:nowrap;
  }
}

@media (prefers-reduced-motion:reduce){
  .rv-sticky-atc{transition:none}
}