/* ===== Brightly PDP refinements =====
   Consolidated, high-specificity overrides scoped to .ac-experiment so they win
   over the vendor + inline CSS. Loaded after product-glp3.css. Includes the
   custom rounded dropdown component (pairs with product-experiment-dd.js). */
.ac-experiment{
  --ink:#171310; --ink-soft:#4b453d; --muted:#928b81; --hairline:#e7e2d9;
  --surface:#f5f5f5; --accent:#1f6e50; --accent-soft:#eef4f0;
  --buy-blue:#4285F4; --buy-blue-hover:#3b78e7;
  --ease:cubic-bezier(.22,.61,.36,1);
  font-family:"Hanken Grotesk",Inter,sans-serif;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}

/* Header rhythm */
.ac-experiment > h1{ font-size:clamp(30px,3.4vw,46px)!important; line-height:1.02!important;
  letter-spacing:-.022em!important; font-weight:700!important; color:var(--ink)!important; margin:0 0 14px!important; }
/* Stacked (mobile) layout: add breathing room between the image and the title. */
@media (max-width:1023px){ .ac-experiment > h1{ margin-top:22px!important; } }
.ac-experiment > p:first-of-type{ font-size:15px!important; line-height:1.6!important;
  color:var(--ink-soft)!important; max-width:52ch; margin:0 0 32px!important; font-weight:400!important; }

/* Section labels */
.exp-strength__label,.exp-bundle__title,.exp-freq__title{ font-size:11px!important; font-weight:600!important;
  letter-spacing:.14em!important; text-transform:uppercase!important; color:var(--muted)!important; margin:0 0 20px!important; }

/* Section spacing (8px rhythm) */
.exp-strength{ margin-top:0!important; }
.exp-bundle,.exp-freq,.exp-quality,.exp-acc{ margin-top:48px!important; }

/* Strength chips — compact, hug content, gray fill */
.exp-strength__grid{ display:flex; gap:8px!important; flex-wrap:wrap!important; }
.ac-experiment .exp-strength__opt{ flex:0 0 auto!important; width:auto!important; min-width:0!important;
  height:38px!important; padding:0 18px!important; border-radius:6px!important; font-size:13.5px!important;
  border:1px solid var(--hairline)!important; background:#f5f5f5!important; color:var(--ink-soft)!important;
  font-weight:500!important; display:inline-flex; align-items:center; justify-content:center;
  transition:border-color .2s var(--ease),background .2s var(--ease),color .2s var(--ease),box-shadow .2s var(--ease)!important; }
.ac-experiment .exp-strength__opt:hover{ border-color:#cfc8bc!important; background:#efefef!important; }
.ac-experiment .exp-strength__opt.is-selected{ background:#fff!important; color:var(--ink)!important;
  font-weight:600!important; border-color:var(--ink)!important; box-shadow:0 0 0 1px var(--ink) inset!important; }

/* Bundle cards — gray fill, ink selected (no green) */
.exp-bundle__grid{ gap:12px!important; }
.ac-experiment .exp-bundle__card{ border-radius:6px!important; border:1px solid var(--hairline)!important;
  background:#f5f5f5!important; padding-top:14px!important; padding-bottom:11px!important; gap:4px!important;
  transition:border-color .2s var(--ease),background .2s var(--ease),box-shadow .2s var(--ease),transform .2s var(--ease)!important; }
.ac-experiment .exp-bundle__media img{ height:clamp(30px,10vw,40px)!important; }
.ac-experiment .exp-bundle__card:hover{ border-color:#cfc8bc!important; background:#efefef!important; }
.ac-experiment .exp-bundle__card.is-selected{ border-color:var(--ink)!important; background:#fff!important;
  box-shadow:0 0 0 1px var(--ink) inset, 0 12px 26px -18px rgba(23,19,16,.4)!important; }
/* Fluid card text so it scales with the (now smaller) bundle cards. */
.exp-bundle__qty{ color:var(--ink)!important; letter-spacing:.01em!important; font-size:clamp(9.5px,3vw,12px)!important; text-transform:none!important; }
.exp-bundle__save{ color:var(--accent)!important; font-weight:600!important; font-size:clamp(8.5px,2.5vw,11px)!important; }

/* Bundle badges — quiet neutrals, single ink hero */
.ac-experiment .exp-bundle__badge--muted{ background:transparent!important; border:0!important; box-shadow:none!important;
  color:var(--muted)!important; font-size:9.5px!important; font-weight:700!important; letter-spacing:.1em!important;
  text-transform:uppercase!important; padding:0!important; top:-16px!important; }
/* Hero badge as a deliberate notch: centered on the card's top border with a
   page-colored cutout ring so it reads as an intentional straddling tab. */
.ac-experiment .exp-bundle__badge:not(.exp-bundle__badge--muted){ background:var(--buy-blue)!important; color:#fff!important;
  border-radius:999px!important; font-size:clamp(6.5px,2.1vw,8px)!important; font-weight:700!important; letter-spacing:.02em!important;
  padding:2px 6px!important; top:0!important; transform:translate(-50%,-50%)!important; max-width:none!important;
  box-shadow:0 4px 10px -4px rgba(23,19,16,.35)!important; }

/* Frequency cards */
.ac-experiment .exp-freq__card{ border-radius:6px!important; border:1px solid var(--hairline)!important; padding:16px 18px!important;
  transition:border-color .2s var(--ease),background .2s var(--ease),box-shadow .2s var(--ease)!important; }
.ac-experiment .exp-freq__card:hover{ border-color:#cfc8bc!important; }
.ac-experiment .exp-freq__card.is-selected{ border-color:var(--ink)!important;
  box-shadow:0 0 0 1px var(--ink) inset, 0 10px 24px -18px rgba(23,19,16,.4)!important; }
.exp-freq__radio{ border-color:#cbc4b8!important; }
/* Subscribe & Save: subtle wave grounded at the card bottom. Uses background-image
   (not an <img> + overflow:hidden) so it clips to the 6px corners automatically
   WITHOUT clipping the delivery dropdown panel that opens out of the card. */
.ac-experiment .exp-freq__card--sub{ position:relative;
  background-image:url("../images/subscribe-wave.png"); background-repeat:no-repeat;
  background-position:bottom center; background-size:100% 240px; }
.exp-freq__savebadge{ background:var(--buy-blue)!important; color:#fff!important; border-radius:999px!important;
  font-size:10px!important; font-weight:700!important; letter-spacing:.04em!important; padding:3px 9px!important;
  box-shadow:0 2px 6px -2px rgba(66,133,244,.4)!important; }
.exp-freq del,.exp-freq s{ color:var(--muted)!important; }

/* Add to cart (sticky buy button) — blue. Literal hex: the sticky bar lives
   outside .ac-experiment, so the --buy-blue custom prop wouldn't resolve here. */
.exp-sticky__btn{ background:#4285F4!important; color:#fff!important; border-color:#4285F4!important; }
.exp-sticky__btn:hover{ background:#3b78e7!important; border-color:#3b78e7!important; }

/* Free-shipping nudge under the frequency section */
.ac-experiment .exp-shipnote{ display:flex; align-items:center; justify-content:center; gap:8px; margin:14px 0 0;
  font-size:13px; font-weight:600; color:var(--ink-soft); }
.ac-experiment .exp-shipnote svg{ width:18px; height:18px; color:var(--buy-blue); flex:0 0 auto; }

/* Live ship-cutoff countdown time — blue accent, tabular so it doesn't jitter. */
.ac-experiment .exp-ship-t{ color:var(--buy-blue); font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1; }

/* Inline buy button — desktop only. On desktop the floating sticky bar is
   replaced by this in-flow button (no blur), sitting between the free-shipping
   line and the quality checklist. */
.ac-experiment .exp-buybtn{ display:none; }
@media (min-width:1024px){
  .exp-sticky{ display:none !important; }
  .ac-experiment .exp-buybtn{ display:flex; align-items:center; justify-content:center; gap:8px; width:100%;
    margin:16px 0 2px; height:52px; border:0; border-radius:9999px; background:var(--buy-blue); color:#fff;
    font-family:inherit; font-size:15px; font-weight:600; letter-spacing:-.01em; cursor:pointer;
    box-shadow:0 10px 24px -12px rgba(66,133,244,.55); transition:background .15s var(--ease), transform .1s var(--ease); }
  .ac-experiment .exp-buybtn:hover{ background:var(--buy-blue-hover); }
  .ac-experiment .exp-buybtn:active{ transform:scale(.99); }
  .ac-experiment .exp-buybtn s{ font-weight:400; opacity:.6; font-size:13px; }
}

/* RUO microcopy near the quality checklist (compliance, associated with the buy) */
.ac-experiment .exp-ruo{ margin:18px 0 0; font-size:11.5px; line-height:1.5; color:var(--muted);
  text-align:center; letter-spacing:.01em; }

/* Trust badges */
.exp-quality__item{ color:var(--ink-soft)!important; }
.exp-quality__item b{ color:var(--ink)!important; }
.exp-quality__item svg circle,.exp-quality__item svg path,.exp-quality__item svg [fill="#2f88e0"]{ fill:var(--accent)!important; }

/* Accordion */
.ac-experiment .exp-acc{ border:1px solid var(--hairline)!important; border-radius:6px!important;
  box-shadow:0 1px 2px rgba(23,19,16,.04)!important; }
.exp-acc__row + .exp-acc__row::before{ background:var(--hairline)!important; }
.exp-acc__head{ font-size:15.5px!important; color:var(--ink)!important; padding:18px 20px!important; }
.exp-acc__lead{ color:var(--ink)!important; }

/* Hide native select + its old static caret (custom dropdown replaces them) */
.ac-experiment .exp-freq__select{ position:absolute; opacity:0; pointer-events:none; width:1px; height:1px; }
.ac-experiment .exp-freq__caret{ display:none!important; }

/* Custom dropdown */
.ac-experiment .bx-dd{ position:relative; font-family:"Hanken Grotesk",Inter,sans-serif; }
.ac-experiment .bx-dd__trigger{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:12px;
  border:1px solid var(--hairline); border-radius:6px; background:#f5f5f5; padding:13px 16px;
  font-size:15px; font-weight:500; color:var(--ink); cursor:pointer;
  transition:border-color .2s var(--ease),background .2s var(--ease),box-shadow .2s var(--ease); }
.ac-experiment .bx-dd__trigger:hover{ border-color:#cfc8bc; background:#efefef; }
.ac-experiment .bx-dd.is-open .bx-dd__trigger{ border-color:var(--ink); box-shadow:0 0 0 1px var(--ink) inset; background:#fff; }
.ac-experiment .bx-dd__chev{ width:18px; height:18px; color:var(--muted); flex:0 0 auto; transition:transform .22s var(--ease); }
.ac-experiment .bx-dd.is-open .bx-dd__chev{ transform:rotate(180deg); color:var(--ink); }
.ac-experiment .bx-dd__panel{ position:absolute; z-index:60; top:calc(100% + 8px); left:0; right:0; background:#fff;
  border:1px solid var(--hairline); border-radius:6px;
  box-shadow:0 18px 40px -12px rgba(23,19,16,.22), 0 4px 10px -6px rgba(23,19,16,.12);
  padding:6px; overflow:hidden; animation:bxddIn .16s var(--ease); }
@keyframes bxddIn{ from{opacity:0; transform:translateY(-6px);} to{opacity:1; transform:translateY(0);} }
.ac-experiment .bx-dd__opt{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:11px 12px;
  border-radius:4px; font-size:14.5px; font-weight:500; color:var(--ink-soft); cursor:pointer; outline:none;
  transition:background .12s var(--ease),color .12s var(--ease); }
.ac-experiment .bx-dd__opt:focus,.ac-experiment .bx-dd__opt:hover{ background:#f5f5f5; color:var(--ink); }
.ac-experiment .bx-dd__opt.is-selected{ color:var(--ink); font-weight:600; }
.ac-experiment .bx-dd__check{ width:17px; height:17px; color:var(--ink); flex:0 0 auto; opacity:0; transition:opacity .12s var(--ease); }
.ac-experiment .bx-dd__opt.is-selected .bx-dd__check{ opacity:1; }

/* ===== Brightly PDP — premium refinements ===== */

/* Image frame: soft rounded, shadow (not hard border), clipped for zoom */
.ac-experiment .bx-imgframe, .grid .bx-imgframe{
  border-radius:6px !important; border:1px solid #eeece7 !important;
  background:#f5f5f5 !important; overflow:hidden !important; box-shadow:none !important;
}
.grid .bx-img{ transition:transform .6s cubic-bezier(.22,.61,.36,1) !important; will-change:transform; }
.grid .bx-imgframe:hover .bx-img{ transform:scale(1.045) !important; }

/* Tabular pricing (prevents digit jitter between variants) */
.exp-freq, .exp-freq__price, .exp-freq [class*=price], .ac-experiment [class*=price]{
  font-variant-numeric:tabular-nums !important; font-feature-settings:"tnum" 1 !important;
}
.exp-freq__price{ font-weight:700 !important; letter-spacing:-.01em !important; color:var(--ink) !important; }

/* Tactile press states + unified easing */
.ac-experiment .exp-strength__opt,
.ac-experiment .exp-bundle__card,
.ac-experiment .exp-freq__card,
.ac-experiment .bx-dd__trigger{ transition-timing-function:var(--ease) !important; }
.ac-experiment .exp-strength__opt:active,
.ac-experiment .bx-dd__trigger:active{ transform:scale(.97) !important; }
.ac-experiment .exp-bundle__card:active{ transform:translateY(-1px) scale(.99) !important; }

/* Keyboard focus rings */
.ac-experiment .exp-strength__opt:focus-visible,
.ac-experiment .exp-bundle__card:focus-visible,
.ac-experiment .bx-dd__trigger:focus-visible,
.ac-experiment .exp-freq__card:focus-visible{
  outline:2px solid var(--ink) !important; outline-offset:2px !important; box-shadow:none !important;
}

/* Icon buttons (wishlist/share) refined hover */
.ac-experiment .brightly-iconbtn, .grid .brightly-iconbtn{
  border:1px solid #ecebe6 !important; box-shadow:0 1px 3px rgba(23,16,10,.06) !important;
  transition:transform .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease) !important;
}
.ac-experiment .brightly-iconbtn:hover, .grid .brightly-iconbtn:hover{
  background:#fff !important; transform:translateY(-1px) !important;
  box-shadow:0 6px 16px -8px rgba(23,16,10,.28) !important;
}

/* Frequency card hover — tint the COLOR only (background-color, not the shorthand)
   so the subscribe card's wave image is never wiped on hover. */
.ac-experiment .exp-freq__card:not(.is-selected):hover{ background-color:#faf9f6 !important; }

/* Headline kerning/ligatures + description micro-tune */
.ac-experiment > h1{ font-kerning:normal !important; font-feature-settings:"kern" 1,"liga" 1 !important; }
.ac-experiment > p:first-of-type{ color:#5b554d !important; line-height:1.62 !important; }

/* === Safety Documentation / Certificate of Analysis (outside .ac-experiment;
   hardcoded palette literals since the tokens are scoped to .ac-experiment) === */
.bx-coa { padding: 16px 0 44px; }
.bx-coa__inner { max-width: 1339px; margin: 0 auto; padding: 0 24px; box-sizing: border-box; }

.bx-coa__head { max-width: 640px; margin: 0 0 34px; }
.bx-coa__eyebrow {
  display: inline-block;
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  font-weight: 700; color: #928b81;
}
.bx-coa__title {
  font-size: 30px; line-height: 1.1; letter-spacing: -.025em;
  margin: 10px 0 12px; color: #171310; font-weight: 700;
}
.bx-coa__intro { color: #4b453d; font-size: 15px; line-height: 1.65; margin: 0; }

.bx-coa__panel {
  display: grid; grid-template-columns: 300px 1fr;
  border: 1px solid #e7e2d9; border-radius: 8px; background: #fff; overflow: hidden;
}

.bx-coa__side {
  padding: 36px 30px; background: #fafaf9; border-right: 1px solid #e7e2d9;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}

.bx-coa__pct {
  display: inline-flex; align-items: baseline;
  font-size: 58px; line-height: .9; font-weight: 800; letter-spacing: -.03em; color: #171310;
}
/* % grounded on the baseline with the digits; + a small superscript just above it. */
.bx-coa__unit { font-size: .6em; font-weight: 700; color: #4285F4; margin-left: .02em; }
.bx-coa__plus { font-size: .42em; font-weight: 700; color: #4285F4; position: relative; top: -.7em; margin-left: .03em; }
.bx-coa__pctlabel { margin-top: 10px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #928b81; }

.bx-coa__verified { display: inline-flex; align-items: center; gap: 7px; margin-top: 16px; font-size: 13px; font-weight: 600; color: #171310; }
.bx-coa__lab { display: inline-flex; align-items: center; gap: 6px; margin-top: 5px; font-size: 12.5px; color: #4b453d; line-height: 1.5; }
.bx-coa__lab svg { flex: 0 0 auto; }

.bx-coa__btn {
  margin-top: 20px; align-self: stretch; text-align: center; text-decoration: none;
  padding: 13px 18px; border: 1px solid #171310; border-radius: 9999px;
  background: transparent; color: #171310; font-weight: 600; font-size: 13.5px; cursor: pointer;
  transition: background .18s cubic-bezier(.22,.61,.36,1), color .18s;
}
.bx-coa__btn:hover { background: #171310; color: #fff; }
.bx-coa__note { margin: 16px 0 0; font-size: 11px; color: #928b81; font-style: italic; line-height: 1.5; }

.bx-coa__results { padding: 6px 32px; }
.bx-coa__row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 20px;
  padding: 16px 0; border-bottom: 1px solid #e7e2d9;
}
.bx-coa__results .bx-coa__row:last-child { border-bottom: none; }
.bx-coa__k { color: #4b453d; font-size: 14px; white-space: nowrap; }
.bx-coa__v { color: #171310; font-size: 14px; font-weight: 600; text-align: right; }

@media (max-width: 820px) {
  /* minmax(0,1fr) lets the track shrink below its content; key wrap + reduced
     padding keep the results within the viewport (no right-edge cutoff). */
  .bx-coa__panel { grid-template-columns: minmax(0, 1fr); }
  .bx-coa__side { border-right: none; border-bottom: 1px solid #e7e2d9; }
  .bx-coa__title { font-size: 28px; }
  .bx-coa__inner { padding: 0 16px; }
  .bx-coa__results { padding: 4px 20px; }
  .bx-coa__k { white-space: normal; }
  .bx-coa__row { gap: 14px; }
}

/* Skeuomorphic COA document preview under the button — show only the TOP HALF
   (2:1 crop anchored to the top). Bleeds a little past the column padding so the
   sheet is bigger/wider, with a drop-shadow so the white paper reads against the
   near-white panel. */
.bx-coa__doc { margin: 24px -18px 0; align-self: center; width: calc(100% + 36px); max-width: none;
  aspect-ratio: 2 / 1; object-fit: cover; object-position: top; display: block;
  filter: drop-shadow(0 10px 20px rgba(23,19,16,.16)); }

/* ===== Primary price (anchor of the options area) + fixed-width digits ===== */
.ac-experiment > p.exp-lede{ margin-bottom:0 !important; }
/* Anchor price: a little more space above (sits lower from the description). */
.ac-experiment .exp-price{ margin:36px 0 26px; }
.ac-experiment .exp-price [data-price-top]{ display:inline-block; font-family:"Hanken Grotesk",Inter,sans-serif;
  font-weight:800; font-size:clamp(34px,6vw,44px); line-height:1; letter-spacing:-.02em; color:var(--ink);
  font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1; }
/* Fixed-width figures wherever the price shows, so layout never shifts as digits change. */
[data-price-top],[data-cta-price],[data-cta-compare],
[data-onetime-price],[data-sub-price],[data-sub-compare]{
  font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1; }

/* ===== Desktop: below-zone breaks out of the buy-box column =====
   The .ac-below block (RUO + Description accordion + Frequently Researched
   Together) now sits OUTSIDE the two-column grid (a sibling that follows it,
   still inside the max-w container), so the sticky product image un-sticks
   after the buy-box row instead of overlapping this content. On desktop it
   centers to the main content width (~1339px, matching the brand/CTA block +
   COA). Mobile: no width rule, so .ac-below is just the next stacked block and
   the single-column layout is unchanged; the RUO's own top margin supplies the
   gap. */
@media (min-width:1024px){
  .ac-below{ max-width:1339px; margin-inline:auto; margin-top:24px; }
}