/* ============================================================================
   CONSUMER HEALTH LEDGER — PDP RE-SKIN  (loaded LAST, after style.css/common.css)
   Unifies the SlimSoda product page with the validated advertorial control:
   · Type: Bitter (headings) + Poppins (body)   · was DM Serif Display + Inter
   · Structure navy #0e213a  ->  editorial teal #0C2E5C
   · Accent orange #f47e2b   ->  teal / gold, kept warm only for rating stars
   · Every CTA  ->  flat green #479C1A / hover #3B8215 / translucent shadow
   The jQuery + jQuery-UI + Slick stack and all page behaviour are untouched.
   ========================================================================== */

:root{
  --teal:#0C2E5C; --teal-d:#081F3E;
  --cta:#479C1A; --cta-d:#3B8215; --cta-sh:rgba(71,156,26,.35);
  --gold:#C29B38; --star:#FF8C00;
  --serif:'Bitter',ui-serif,serif;
  --sans:'Poppins',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
}

/* ---- 1. Typography — unified Bitter + Poppins, no legacy fonts -------- */
body,.bdfont,.bdfont1,.bdfont2,.bdfont3,.bdfont6,input,button,select,textarea{font-family:var(--sans) !important}
.bdhding1,.bnrhding,.s1bx2hding,.s5bx-inbxhd p,.s5bx-inbxhd p.long,
.s7lhding,.s7subhding,.s7bx1ltxt1,.s7bx2hding,.s7bx4txt,
.week_heading,.ratingbx-txt1,.s10rgthding,.mbbx-txt1,.mbbx-hding,
.s7bx2-txtbx1-txt2,.s10hding,.s10rgthding,
.np-kicker,.np-stat p.np-statnum,.s1bx2hding span,.ratingbx-txt1{
  font-family:var(--serif) !important;
  letter-spacing:-.01em;
}
.np-card h4,.np-acc-item>summary{font-family:var(--sans) !important}

/* ---- 2. Colour: structural navy -> teal ----------------------------- */
.bdhding1,.bnrhding,.s1bx2hding,.s7bx1ltxt2,.s10rgthding,.mbbx-txt1,.mbbx-hding,
.s7bx2-txtbx1-txt1,.week_heading,.ratingbx-txt1,ul.s10rgtlist li{color:var(--teal)}
.bnrhding span,.bdhding1 .orange,.orange{color:#B07D1F}   /* warm highlight, legible on white */

.s5bx>div,.s7bx2,.s2bx2{border-color:var(--teal) !important}
.s5bx-inbxhd,.s7l2hding,.s7l2hding span,.s7bx4>div.rgt,
.np-stats,.s10bar1,.s11bar,.s7bx2hd,.s7bx3-inbxhd,
.timeline__row_center_step.viewing{background:var(--teal) !important}
ul.s7bx2hdlist li.active{background:var(--teal-d) !important}
.timeline__row_center_step{background:var(--teal)}
.timeline__mid_row.timeline__entry_point:before{border-right-color:var(--cta) !important}
.timeline__mid_row.timeline__entry_point:after{border-right-color:var(--teal) !important}
.timeline__row_content_box{border-color:var(--teal) !important}
.timeline__row_content_box:after{border-right-color:var(--teal) !important}
.timeline__mid_row.reverse .timeline__row_content_box:after{border-left-color:var(--teal) !important}

/* accent orange -> teal / gold on structure; keep warm for stars only */
#clockdiv div>span,#clockdiv p{color:#B07D1F !important}
.bnrtbx1{background:linear-gradient(to bottom,#e9eef6,var(--teal)) !important}
.bnrtbx1-inbx-txt1,.bnrtbx1-inbx-txt3{color:var(--teal) !important}
ul.bnrlist li{border-top-color:#e1e1e1 !important}
.strip{border-bottom-color:#e6e6e6}
ul.s2list3 li,ul.s7list1 li:nth-child(2),ul.s7bx1list li,.s7bx2,.s4bxrgt ul.s4list li,
ul.s2list2 li,.s2bx3-top,.s2bx3-btm,.s6bxinbx-lhding span.span2,
.np-card,.np-revcard,.s10rgt-inbx,ul.tablist li,
.ui-accordion .ui-accordion-header,.ui-accordion2 .ui-accordion-header,.ui-accordion3 .ui-accordion-header,
.ui-accordion .ui-accordion-content,.ui-accordion2 .ui-accordion-content,.ui-accordion3 .ui-accordion-content{
  border-color:#d9e0ea !important;
}
ul.tablist li.active{background:var(--teal) !important;color:#fff !important;border-color:var(--teal) !important}
.ui-accordion .ui-accordion-header,.ui-accordion2 .ui-accordion-header,.ui-accordion3 .ui-accordion-header{color:var(--teal) !important}
.np-if li:before,ul.s2list3 li,ul.s7list3 li p{color:inherit}
.np-if li:before{background:var(--teal) !important}
.s6bxinbx-lhding span.span2{background:#eef2f8 !important;border-color:var(--teal) !important;color:var(--teal) !important}
.comp-chart .col2{background:var(--cta) !important}
.chart-logo{filter:none}
.s10bar2{background:var(--gold) !important}

/* rating stars / verified pills stay warm + green */
.stars,.s12stars,.s12star2,.bnrstars,.s7bx1ltxt1{color:var(--star)}
.s7bx1ltxt1{color:var(--star) !important}
.slidenmbx-txt2 span,.s12tbxtxt2 span{background:#ecfdf5 !important;color:#059669 !important}
.s12tbxnm,.s7l1img{filter:none}
.s12tbxnm{background:var(--teal) !important}

/* ---- 3. CTA SYSTEM: every button -> validated flat green + lift-on-hover ---- */
a.bnrbtn,a.s10btn,a.v3btn,.hdrbtn,a.noshadow{
  background:var(--cta) !important;
  background-image:none !important;
  border:0 !important;
  border-radius:8px !important;
  color:#fff !important;
  box-shadow:0 4px 15px rgba(71,156,26,.4) !important;
  transition:background .15s ease,box-shadow .2s ease,transform .2s ease !important;
}
a.bnrbtn:hover,a.s10btn:hover,a.v3btn:hover,.hdrbtn:hover{
  background:var(--cta-d) !important;
  box-shadow:0 10px 26px rgba(71,156,26,.45) !important;
  transform:translateY(-2px) !important;
}
a.bnrbtn:active,a.s10btn:active,a.v3btn:active,.hdrbtn:active{transform:translateY(0) !important}
a.s10btn span.span1{background:var(--cta-d) !important}
.btntxt1::before{background:#00e54c !important}
@media(prefers-reduced-motion:reduce){
  a.bnrbtn,a.s10btn,a.v3btn,.hdrbtn{transition:background .15s ease !important}
  a.bnrbtn:hover,a.s10btn:hover,a.v3btn:hover,.hdrbtn:hover{transform:none !important}
}

/* ---- 3-CRO. shared media-proof blocks (mirror of chl-core.css) ------ */
.cro-media{
  width:100% !important;max-width:600px !important;border-radius:12px !important;
  box-shadow:0 8px 24px rgba(0,0,0,0.12) !important;margin:32px auto 12px auto !important;
  display:block !important;border:1px solid #E2E8F0 !important;height:auto !important;
  background:#f1f5f9 !important;
}
.media-caption{
  text-align:center !important;font-size:13px !important;color:#64748B !important;
  font-style:italic !important;margin:0 auto 32px auto !important;max-width:600px !important;line-height:1.5 !important;
}
.cro-hi{
  background:#FDF9E3 !important;border-left:4px solid #F59E0B !important;padding:16px 18px !important;
  margin:24px auto !important;border-radius:0 8px 8px 0 !important;max-width:660px !important;
  font-size:16px !important;line-height:1.6 !important;color:#4a3d1a !important;
}
.cro-hi :first-child{margin-top:0 !important}
.cro-hi :last-child{margin-bottom:0 !important}
.cro-hi b,.cro-hi strong{color:#7a5c00 !important}

/* ---- 3a. hero product wrapper (SlimSoda PDP only; inert here) ------- */
.prd60{position:relative;display:table;margin:24px auto 0;max-width:100%}
.prd60 > img.bnrprd{display:block;margin:0;max-width:100%;height:auto;width:auto}
@media only screen and (max-width:1030px){.prd60{margin:0 auto}}

/* ---- 3b. OFFER BOX — dominant, impossible-to-ignore launch offer ---- */
/* mirrors chl-core.css .offer-box so the advertorial + PDP read identically.
   PDP has no chl-core.css, so the full component lives here. Everything
   forced to beat style.css / common.css. */
.offer-box{
  position:relative !important;
  border:4px solid #0C2E5C !important;
  background:#F0F4FA !important;
  border-radius:20px !important;
  box-shadow:0 16px 36px rgba(12,46,92,.12) !important;
  padding:40px 24px !important;
  margin:30px auto 0 !important;
  max-width:640px !important;
  text-align:center !important;
}
.offer-box p{margin:0 !important}
.offer-box .offer-eyebrow{
  display:block !important;font-family:var(--sans) !important;
  font-size:15px !important;font-weight:800 !important;
  letter-spacing:1.5px !important;text-transform:uppercase !important;
  color:#0C2E5C !important;line-height:1.3 !important;margin:0 0 14px !important;
}
.offer-box .offer-kit{
  font-family:var(--sans) !important;font-size:22px !important;font-weight:700 !important;
  color:#111 !important;line-height:1.32 !important;letter-spacing:0 !important;margin:0 0 8px !important;
}
.offer-box .offer-price{
  display:block !important;font-family:var(--serif) !important;
  font-size:72px !important;font-weight:900 !important;color:#479C1A !important;
  line-height:1 !important;letter-spacing:-1px !important;
  text-transform:uppercase !important;margin:12px 0 !important;
}
.offer-box .offer-priceline{
  display:block !important;font-family:var(--sans) !important;
  font-size:20px !important;line-height:1.4 !important;margin:8px 0 0 !important;
}
.offer-box .offer-anchor{
  color:#888 !important;text-decoration:line-through !important;
  font-weight:600 !important;margin-right:8px !important;
}
.offer-box .offer-now{
  color:#0C2E5C !important;font-weight:800 !important;text-transform:uppercase !important;
}
.offer-box .offer-det{
  font-family:var(--sans) !important;font-size:15px !important;font-weight:500 !important;
  color:#555 !important;line-height:1.55 !important;max-width:580px !important;margin:12px auto 0 !important;
}
/* box -> 80% OFF -> button: bond the CTA block straight to the box */
#offer .s10btnbx2{width:100% !important;max-width:560px !important;margin:24px auto 0 !important}
#offer .s10btnbx2 .btntxt1{margin-bottom:10px !important}
#offer .chl-scarcity{max-width:560px !important;margin:0 auto 14px !important}
/* the long label wraps — kill common.css line-height:64px so it can't self-overlap */
#offer a.bnrbtn{
  height:auto !important;min-height:62px !important;line-height:1.3 !important;
  white-space:normal !important;padding:15px 22px !important;
  font-size:clamp(15px,2.3vw,18px) !important;gap:8px !important;
  text-wrap:balance;
}
@media(max-width:480px){
  .offer-box{padding:32px 18px !important}
  .offer-box .offer-price{font-size:52px !important}
  .offer-box .offer-kit{font-size:19px !important}
}

/* ---- 4. Scarcity bar (validated .scarcity .bar) -------------------- */
.chl-scarcity{max-width:560px;margin:14px auto 0}
.chl-scarcity .bar{height:10px;background:#e9e6de;border-radius:99px;overflow:hidden}
.chl-scarcity .bar i{display:block;height:100%;width:82%;background:var(--cta);border-radius:99px}
.chl-scarcity span{display:block;font-size:12.5px;color:#2f6a10;font-weight:700;margin-top:7px;text-align:center}
ul.bnrrgtinbx-list li:nth-child(2)::after{background:#ffe08a !important}
ul.bnrrgtinbx-list li:nth-child(1){background:#B42318 !important}
ul.bnrrgtinbx-list li:nth-child(1)::after{background:#f7c3bf !important}

/* ---- 5. CHL editorial ribbon (brand continuity across the 5 pages) - */
.chl-ribbon{
  background:var(--teal);color:#dfe4ef;font-size:12px;font-weight:500;text-align:center;
  padding:7px 16px;letter-spacing:.02em;
}
.chl-ribbon a{color:#fff;font-weight:600;text-decoration:underline;text-underline-offset:2px}
.chl-ribbon .sep{opacity:.45;margin:0 8px}

/* ---- 6. Mobile polish -------------------------------------------------- */
@media only screen and (max-width:767px){
  a.bnrbtn,a.v3btn{width:100% !important;max-width:100% !important}
  .bnrbtnbx,.s1btnbx,.s5btnbx,.s7btnbx,.s8btnbx,.s9btnbx,.s10btnbx2,.s7bx1btnbx{width:100% !important}
}
@media(prefers-reduced-motion:reduce){
  .scroller-track,.btntxt1::before{animation:none !important}
}