/* PDP Redesign — opt-in per product via ACF `pdp_redesign_enabled`.
   Scoped entirely under body.pdp-redesign so it cannot affect any product
   that hasn't been migrated. Restyles WooCommerce's native gallery/summary
   markup in place (price, variations, add-to-cart stay WC-native — this is
   presentation only) and adds new sections below it. Visual language ported
   from the Kisspeptin mockup Josh approved (peptidology-kisspeptin-pdp-v2.html). */

body.pdp-redesign {
  --pep-primary: #de0076;
  --pep-secondary: #ee6d20;
  --pep-sky: #84eff6;
  --pep-ink: #171419;
  --pep-muted: #6a6570;
  --pep-line: #ece8ec;
  --pep-line2: #f4f1f5;
  --pep-green: #0a7d3f;
  --pep-greenbg: #e7f8ee;
  --pep-grad: linear-gradient(158deg,#d8fdff 0%,#ffdcef 50%,#ffd6bd 100%);
  --pep-silver: linear-gradient(180deg,#f5f5f7 0%,#fcfcfd 100%);
}

/* ---- hero: WC's native gallery + summary columns, regradiented ---- */
body.pdp-redesign div.product.type-product {
  background: var(--pep-grad);
  border-radius: 28px;
  padding: 32px clamp(16px, 4vw, 44px) 44px;
  display: flex;
  flex-wrap: wrap;
  gap: 44px;
  align-items: flex-start;
}
body.pdp-redesign div.product.type-product .woocommerce-product-gallery {
  position: sticky;
  top: 150px;
}
body.pdp-redesign div.product.type-product .woocommerce-product-gallery {
  flex: 1 1 380px;
}
body.pdp-redesign div.product.type-product .woocommerce-product-gallery img {
  border-radius: 22px;
  box-shadow: 0 40px 80px rgba(120,25,75,.22);
}
/* Belt to the removed gallery supports: if any plugin re-injects the
   lightbox trigger, it stays gone. */
body.pdp-redesign .woocommerce-product-gallery__trigger { display: none !important; }
body.pdp-redesign div.product.type-product .summary.entry-summary {
  flex: 1 1 420px;
  background: #fff;
  border-radius: 30px;
  padding: 34px 34px 30px;
  box-shadow: 0 34px 80px rgba(90,20,60,.13);
  float: none;
  width: auto;
}
body.pdp-redesign .summary.entry-summary .product_title {
  font-weight: 800;
  font-size: clamp(32px, 4vw, 46px);
  letter-spacing: -.03em;
  line-height: 1.02;
}
body.pdp-redesign .summary.entry-summary p.price {
  font-weight: 800;
  font-size: 2rem;
  letter-spacing: -.02em;
  margin: 14px 0 6px;
}
body.pdp-redesign .summary.entry-summary p.price ins { text-decoration: none; }
body.pdp-redesign .summary.entry-summary p.price del { color: var(--pep-muted); font-weight: 500; font-size: .7em; }
body.pdp-redesign .summary.entry-summary .save-amount {
  display: inline-block;
  margin-left: 8px;
  font-size: .7em;
  font-weight: 800;
  color: var(--pep-green);
  background: var(--pep-greenbg);
  border-radius: 50px;
  padding: 3px 10px;
}
body.pdp-redesign .summary.entry-summary .stock {
  font-size: .83rem;
  font-weight: 600;
  color: var(--pep-green);
}
/* One buy row: qty stays compact, Add (carrying the live price) takes the
   rest; Buy Now drops to its own quiet full-width row. Two shouting
   primaries squeezing one line read as a scam page — one leads. */
body.pdp-redesign .summary .woocommerce-variation-add-to-cart {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
body.pdp-redesign .summary .woocommerce-variation-add-to-cart .quantity { flex: none; }
/* Legacy inner wrapper: fixed-ish width and a tall flex box that floats the
   controls apart. Flatten it into the same wrapping row. */
body.pdp-redesign .summary .cart .btn-qnt-wrap {
  display: flex;
  flex-direction: row; /* legacy: column — which turns flex-basis into height */
  flex-wrap: wrap;
  align-items: center;
  align-content: flex-start;
  gap: 10px;
  width: 100%;
  height: auto;
  min-height: 0;
  padding-bottom: 0;
}
/* The legacy theme parks both buttons in a nowrap .button_wrap — open it
   up so Add can hold the row and Buy Now can take a full-width second. */
body.pdp-redesign .summary .cart .button_wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: flex-start;
  gap: 10px;
  flex: 1 1 240px;
  min-width: 0;
  height: auto;
}
body.pdp-redesign .summary.entry-summary .cart button.single_add_to_cart_button,
body.pdp-redesign .summary.entry-summary a.buy-now-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  background: var(--pep-primary);
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  border: 0;
  border-radius: 50px;
  padding: 16px 24px;
  margin-top: 8px;
  transition: .16s;
  white-space: nowrap;
}
body.pdp-redesign .summary.entry-summary .cart button.single_add_to_cart_button {
  flex: 1 1 200px;
  width: auto;
  margin-top: 0;
}
body.pdp-redesign .summary.entry-summary a.buy-now-button {
  flex: 1 1 100%;
  margin-top: 2px;
}
body.pdp-redesign .summary.entry-summary .cart button.single_add_to_cart_button:hover,
body.pdp-redesign .summary.entry-summary a.buy-now-button:hover {
  background: #c30068;
  transform: translateY(-1px);
}

/* ---- buybox extras: cutoff / delivery options / payment marks / tiers ---- */
/* ---- proof strip: real store-wide numbers, riding the trust block
   ahead of price and CTA (conviction before the decision) ---- */
body.pdp-redesign .pep-proofstrip {
  display: flex;
  gap: 4px 14px;
  flex-wrap: wrap;
  font-size: .74rem;
  color: var(--pep-muted);
  margin: 0;
}
body.pdp-redesign .pep-proofstrip b { color: var(--pep-ink); font-variant-numeric: tabular-nums; }
/* While JS echoes the selected price into the headline, WC's own
   variation-price block would be a duplicate answer — hide it. */
body.pdp-redesign form.variations_form.pep-price-echoed .woocommerce-variation-price { display: none; }


body.pdp-redesign .pep-cutoff {
  display: flex;
  align-items: center;
  gap: 11px;
  background: var(--pep-greenbg);
  border: 1px solid #cde5d6;
  border-radius: 14px;
  padding: 9px 14px;
  margin-top: 12px;
  font-size: .86rem;
  color: var(--pep-ink);
}
body.pdp-redesign .pep-cutoff svg { flex: none; color: var(--pep-green); }
body.pdp-redesign .pep-cutoff b { font-weight: 800; }
body.pdp-redesign .pep-cutoff .pep-sub { display: block; font-size: .74rem; color: #4d7a5f; margin-top: 2px; }

/* Delivery options: the three real methods with computed arrival dates.
   Display only — the actual choice happens at checkout. */
/* ---- delivery table folds behind a disclosure (fold economy) ---- */
body.pdp-redesign .pep-delivery-wrap { margin-top: 10px; }
body.pdp-redesign .pep-delivery-wrap summary {
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: .78rem;
  font-weight: 700;
  color: var(--pep-muted);
}
body.pdp-redesign .pep-delivery-wrap summary::-webkit-details-marker { display: none; }
body.pdp-redesign .pep-delivery-wrap[open] summary svg { transform: rotate(180deg); }
body.pdp-redesign .pep-delivery-wrap summary svg { transition: transform .15s; }

/* ---- assurance card: only what the published policies promise ---- */
body.pdp-redesign .pep-assure {
  border: 1px solid var(--pep-line);
  border-radius: 14px;
  padding: 12px 14px;
  margin-top: 12px;
}
body.pdp-redesign .pep-assure-label {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--pep-muted);
  margin-bottom: 6px;
}
body.pdp-redesign .pep-assure-row { font-size: .78rem; margin: 4px 0; }
body.pdp-redesign .pep-assure-row b { font-weight: 800; }
body.pdp-redesign .pep-assure-row a { color: inherit; text-decoration: underline; }

body.pdp-redesign .pep-pay-note {
  text-align: center;
  font-size: .72rem;
  color: var(--pep-muted);
  margin: 7px 0 0;
}

body.pdp-redesign .pep-delivery {
  border: 1.5px solid var(--pep-line);
  border-radius: 14px;
  margin-top: 10px;
  overflow: hidden;
}
body.pdp-redesign .pep-delivery-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 11px 16px;
  font-size: .82rem;
}
body.pdp-redesign .pep-delivery-row + .pep-delivery-row { border-top: 1px solid var(--pep-line2); }
body.pdp-redesign .pep-delivery-row .n { font-weight: 700; white-space: nowrap; }
body.pdp-redesign .pep-delivery-row .n em {
  font-style: normal;
  font-weight: 800;
  font-size: .64rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--pep-green);
  background: var(--pep-greenbg);
  border-radius: 50px;
  padding: 2px 8px;
  margin-left: 7px;
}
body.pdp-redesign .pep-delivery-row .a { color: var(--pep-muted); flex: 1; min-width: 0; }
body.pdp-redesign .pep-delivery-row .pr { font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---- kit nudge (replaced the tier card 28 Aug 2026: the same rule's
   math, moved beside the quantity control where the decision happens) ---- */
body.pdp-redesign .pep-kit-nudge {
  background: var(--pep-greenbg);
  color: var(--pep-green);
  font-size: .74rem;
  font-weight: 700;
  border-radius: 10px;
  padding: 7px 11px;
  margin: 10px 0 0;
}
body.pdp-redesign .pep-kit-nudge.is-on { background: var(--pep-green); color: #fff; }

/* woo-discount-rules-pro's own native bulk-pricing table (.awdr-bulk-
   customizable-table, "Buy More Save More!" heading injected via sitewide
   Additional CSS) duplicates the kit pricing the nudge line now carries —
   same data, its default styling. Hide its output for redesigned products;
   the rule/pricing engine underneath is untouched, only its table hides. */
body.pdp-redesign .summary > .awdr-bulk-customizable-table {
  display: none !important;
}

body.pdp-redesign .pep-pay {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--pep-line);
}
body.pdp-redesign .pep-pay .pep-pay-label { font-size: .76rem; color: var(--pep-muted); font-weight: 600; margin-right: 2px; }
body.pdp-redesign .pep-paymark {
  height: 30px;
  min-width: 48px;
  padding: 0 9px;
  border: 1px solid var(--pep-line);
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  background: #fff;
  overflow: hidden;
}
body.pdp-redesign .pep-paymark-visa {
  color: #1a1f71;
  font-weight: 800;
  font-style: italic;
  font-size: .82rem;
  letter-spacing: -.02em;
}
body.pdp-redesign .pep-paymark-amex {
  background: #016fd0;
  border-color: #016fd0;
  color: #fff;
  font-weight: 800;
  font-size: .68rem;
  letter-spacing: .04em;
}
body.pdp-redesign .pep-paymark-apay { color: #111; }
body.pdp-redesign .pep-paymark-apay b { font-weight: 600; font-size: .86rem; letter-spacing: -.01em; }
body.pdp-redesign .pep-paymark-zelle {
  background: #6d1ed4;
  border-color: #6d1ed4;
  color: #fff;
  font-weight: 800;
  font-size: .78rem;
  letter-spacing: -.01em;
}
body.pdp-redesign .pep-paymark-bank { color: #111; gap: 5px; }
body.pdp-redesign .pep-paymark-bank b { font-weight: 600; font-size: .8rem; letter-spacing: -.01em; }

/* ---- trust row (under the title): tier pill + live purity + COA jump ----
   Tier colorways duplicated from the PCM plugin stylesheet (same values as
   the homepage shelf) because PCM's own CSS enqueues with its module, which
   the redesigned PDP replaces. */
body.pdp-redesign .pep-trust {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 2px 0 4px;
}
body.pdp-redesign .pep-trust .pcm-tier-pill {
  display: inline-flex;
  align-items: center;
  font-weight: 800;
  font-size: .72rem;
  letter-spacing: .02em;
  border-radius: 50px;
  padding: 4px 11px;
}
body.pdp-redesign .pep-trust .pcm-tier-14x {
  background: linear-gradient(135deg, #fef3c7, #fbbf24);
  color: #78350f;
  border: 1px solid #f59e0b;
}
body.pdp-redesign .pep-trust .pcm-tier-7x {
  background: #d9f2e5;
  color: #0f6e56;
  border: 1px solid #5dcaa5;
}
body.pdp-redesign .pep-trust-purity { font-weight: 800; font-size: .9rem; }
body.pdp-redesign .pep-trust-lot { font-size: .8rem; color: var(--pep-muted); }
body.pdp-redesign .pep-trust2 {
  font-size: .78rem;
  color: var(--pep-muted);
  margin: 2px 0 0;
}
body.pdp-redesign .pep-trust2 b { color: var(--pep-ink); font-weight: 700; }
body.pdp-redesign .pep-ruo {
  font-size: .72rem;
  color: var(--pep-muted);
  margin: 6px 0 0;
}
body.pdp-redesign .pep-certainty {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin: 8px 0 0;
}
body.pdp-redesign .pep-reviews { font-size: .8rem; margin: 0; }
body.pdp-redesign .pep-reviews .star { color: #00b67a; font-weight: 800; }

/* ---- guarantee as a headline feature between price and the form ---- */
body.pdp-redesign .pep-guarantee-pop { margin: 6px 0 2px; }
body.pdp-redesign .pep-guarantee-pop summary {
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .78rem;
  font-weight: 700;
  color: var(--pep-ink);
}
body.pdp-redesign .pep-guarantee-pop summary svg { color: var(--pep-green); flex: none; }
body.pdp-redesign .pep-guarantee-pop summary::-webkit-details-marker { display: none; }
body.pdp-redesign .pep-guarantee-pop summary::after {
  content: "";
  width: 7px; height: 7px;
  border-right: 1.5px solid var(--pep-muted);
  border-bottom: 1.5px solid var(--pep-muted);
  transform: rotate(45deg) translateY(-2px);
  transition: transform .15s;
}
body.pdp-redesign .pep-guarantee-pop[open] summary::after { transform: rotate(-135deg) translateY(-1px); }
body.pdp-redesign .pep-guarantee-detail {
  border: 1px solid var(--pep-line);
  border-radius: 12px;
  padding: 10px 12px;
  margin-top: 7px;
  font-size: .76rem;
}
body.pdp-redesign .pep-guarantee-detail div { margin: 3px 0; }
body.pdp-redesign .pep-guarantee-detail a { color: inherit; text-decoration: underline; }

/* ---- ship line just above the Add button (full row in the flex form) ---- */
body.pdp-redesign .pep-ship-line {
  flex-basis: 100%;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .76rem;
  color: var(--pep-muted);
  margin: 8px 0 0;
}
body.pdp-redesign .pep-ship-line svg { color: var(--pep-green); flex: none; }

/* ---- one line of per-mg arithmetic under the pills ---- */
body.pdp-redesign .pep-permg-line {
  font-size: .74rem;
  font-weight: 700;
  color: var(--pep-green);
  margin-top: 8px;
  font-variant-numeric: tabular-nums;
}

/* ---- volume table folds behind a link-styled disclosure ---- */
body.pdp-redesign .pep-kit-table { margin: 5px 0 0; }
body.pdp-redesign .pep-kit-table summary {
  cursor: pointer;
  list-style: none;
  display: inline;
  font-size: .72rem;
  font-weight: 700;
  color: var(--pep-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}
body.pdp-redesign .pep-kit-table summary::-webkit-details-marker { display: none; }
body.pdp-redesign .pep-kit-grid {
  display: grid;
  grid-template-columns: max-content max-content;
  gap: 2px 16px;
  font-size: .74rem;
  padding: 8px 0 0;
  font-variant-numeric: tabular-nums;
}
body.pdp-redesign .pep-kit-grid .s { color: var(--pep-green); font-weight: 700; }
body.pdp-redesign .pep-kit-note { font-size: .7rem; color: var(--pep-muted); margin-top: 6px; }
body.pdp-redesign .pep-kit-social { font-size: .7rem; color: var(--pep-muted); margin: 5px 0 0; }

/* ---- micro-proof at the CTA: the certainty numbers, second placement ---- */
body.pdp-redesign .pep-cta-proof {
  flex-basis: 100%;
  text-align: center;
  font-size: .72rem;
  color: var(--pep-muted);
  margin: 10px 0 0;
  font-variant-numeric: tabular-nums;
}
body.pdp-redesign .pep-cta-proof .star { color: #00b67a; font-weight: 800; }
body.pdp-redesign .pep-trust-link {
  font-size: .8rem;
  font-weight: 700;
  color: var(--pep-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---- mass pills over the native variation select ---- */
body.pdp-redesign .pep-masspills { margin: 14px 0 4px; }
body.pdp-redesign .pep-masspills-label {
  display: block;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--pep-muted);
  margin-bottom: 9px;
}
body.pdp-redesign .pep-masspills-row { display: flex; flex-wrap: wrap; gap: 8px; }
body.pdp-redesign .pep-pill {
  appearance: none;
  position: relative; /* anchors the Best value chip */
  border: 1.5px solid var(--pep-line);
  background: #fff;
  border-radius: 14px;
  padding: 9px 14px;
  min-width: 74px;
  text-align: center;
  cursor: pointer;
  transition: border-color .14s, box-shadow .14s, transform .14s;
}
body.pdp-redesign .pep-pill:hover { border-color: #d5cfd8; transform: translateY(-1px); }
body.pdp-redesign .pep-pill b { display: block; font-weight: 800; font-size: .92rem; letter-spacing: -.01em; }
body.pdp-redesign .pep-pill span { display: block; font-size: .74rem; color: var(--pep-muted); margin-top: 2px; font-variant-numeric: tabular-nums; }
/* New-style batch-locked variants: the shipping batch as a quiet third
   line — the pill says exactly which lot this purchase ships. */
body.pdp-redesign .pep-pill.is-best { border-color: var(--pep-green); }
body.pdp-redesign .pep-pill .pep-bv {
  position: absolute;
  top: -9px;
  right: 8px;
  font-style: normal;
  background: var(--pep-green);
  color: #fff;
  font-size: .58rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  border-radius: 20px;
  padding: 2px 8px;
}
body.pdp-redesign .pep-pill .batch {
  display: block;
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #a9a2af;
  margin-top: 3px;
}
body.pdp-redesign .pep-pill.is-active .batch { color: var(--pep-primary); }
body.pdp-redesign .pep-pill.is-active {
  border-color: var(--pep-primary);
  box-shadow: 0 0 0 1px var(--pep-primary), 0 10px 22px rgba(222, 0, 118, .13);
  background: #fff8fc;
}
body.pdp-redesign .pep-pill.is-oos { opacity: .45; cursor: not-allowed; }
body.pdp-redesign .pep-pill.is-oos b { text-decoration: line-through; }
body.pdp-redesign .pep-pill .oos { color: var(--pep-muted); }
/* ERP-backed "On Order": the size exists and stock is inbound — visible,
   never selectable. */
body.pdp-redesign .pep-pill.is-soon {
  border-style: dashed;
  background: #fbfafc;
  cursor: default;
}
body.pdp-redesign .pep-pill.is-soon:hover { border-color: var(--pep-line); transform: none; }
/* Reads as a status tag, not an option (ACQ pass 4): no hover, no tap. */
body.pdp-redesign .pep-pill.is-soon { pointer-events: none; opacity: .55; }
/* Inbounded and at the lab: one step past On Order, one step before live. */
body.pdp-redesign .pep-pill.is-testing span { color: #0e7490; font-weight: 800; }
body.pdp-redesign .pep-pill.is-soon b { color: var(--pep-muted); }
body.pdp-redesign .pep-pill.is-soon span {
  color: #b26a0f;
  font-weight: 700;
  font-size: .64rem;
  letter-spacing: .05em;
  text-transform: uppercase;
}
body.pdp-redesign .pep-pill:focus-visible { outline: 2px solid var(--pep-primary); outline-offset: 2px; }
/* Ordering size leads the pill; the lot's tested net content sits under it
   (12 Sep 2026 — "30 mg On Order" beside a purchasable 34.08 mg). */
body.pdp-redesign .pep-pill .tested { font-size: .68rem; color: var(--pep-green); font-weight: 700; margin-top: 1px; }
body.pdp-redesign .pep-masshelp { font-size: .74rem; color: var(--pep-muted); line-height: 1.45; margin: 12px 0 0; max-width: 42ch; }
body.pdp-redesign .pep-masshelp b { color: var(--pep-ink); font-weight: 700; }

/* No dropdown flash: the native attribute table is hidden from FIRST
   paint — the pills own the selector on flagged PDPs. JS restores it
   (.pep-native) only when pills can't represent the product (more than
   one attribute); the <noscript> style in the mount covers JS-off. */
body.pdp-redesign form.variations_form table.variations { display: none; }
body.pdp-redesign form.variations_form.pep-native table.variations { display: table; }

/* Buy Now demotes all the way to a text link (29 Aug 2026, ACQ pass 2):
   even a ghost button next to the primary created a which-one moment.
   One button leads; the express path is a quiet sentence under it. */
body.pdp-redesign .summary.entry-summary a.buy-now-button {
  background: none;
  color: var(--pep-muted);
  border: 0;
  border-radius: 0;
  font-size: .8rem;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 4px 0 0;
  margin-top: 0;
}
body.pdp-redesign .summary.entry-summary a.buy-now-button:hover {
  background: none;
  color: var(--pep-primary);
  transform: none;
}

/* ---- sticky mobile buy bar ---- */
body.pdp-redesign .pep-stickybar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid var(--pep-line);
  box-shadow: 0 -12px 30px rgba(23, 20, 25, .08);
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
}
body.pdp-redesign .pep-stickybar[hidden] { display: none; }
body.pdp-redesign .pep-stickybar-info { min-width: 0; }
body.pdp-redesign .pep-stickybar-info .t {
  display: block;
  font-weight: 700;
  font-size: .84rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* The Add button now carries the live price ("Add to cart — $79"); the
   info price span stays in the DOM as the bar's price-ready gate but no
   longer paints — one price in a 68px bar, not two. */
body.pdp-redesign .pep-stickybar-info .p { display: none; }
body.pdp-redesign .pep-stickybar-add {
  flex: none;
  appearance: none;
  border: 0;
  background: var(--pep-primary);
  color: #fff;
  font-weight: 700;
  font-size: .92rem;
  border-radius: 50px;
  padding: 12px 22px;
  cursor: pointer;
}
@media (min-width: 900px) {
  body.pdp-redesign .pep-stickybar { display: none; }
}

/* ---- competitive-advantage band ---- */
body.pdp-redesign .pep-adv {
  background: #faf7fa;
  border-top: 1px solid var(--pep-line);
  border-bottom: 1px solid var(--pep-line);
  margin: 40px 0;
}
body.pdp-redesign .pep-adv-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 22px;
  padding: 26px 0;
  max-width: 1200px;
  margin: 0 auto;
}
body.pdp-redesign .pep-adv-item { display: flex; align-items: center; gap: 13px; padding: 0 16px; }
body.pdp-redesign .pep-adv-item .pep-adv-icon {
  width: 44px; height: 44px; border-radius: 12px;
  background: #fff; border: 1px solid var(--pep-line);
  display: grid; place-items: center; flex: none; color: var(--pep-primary);
}
body.pdp-redesign .pep-adv-item b { display: block; font-weight: 700; font-size: .92rem; }
body.pdp-redesign .pep-adv-item span { font-size: .78rem; color: var(--pep-muted); }

/* ---- shared section chrome ---- */
/* .main-head.fixed (js/common.js) overlays the page past 200px scroll; give
   anchor targets room so #coa / #about don't land underneath it. */
body.pdp-redesign .pep-section { padding: 20px 16px 60px; max-width: 1200px; margin: 0 auto; scroll-margin-top: 150px; }
body.pdp-redesign .pep-eyebrow { font-weight: 700; font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: var(--pep-primary); }
body.pdp-redesign .pep-h2 { font-weight: 300; letter-spacing: -.03em; font-size: clamp(28px,3.6vw,42px); margin: 10px 0 12px; }
body.pdp-redesign .pep-h2 b { font-weight: 800; }
body.pdp-redesign .pep-section > p { color: var(--pep-muted); max-width: 70ch; margin-bottom: 30px; }

/* ---- COA panel ---- */
body.pdp-redesign .pep-coa { border: 1.5px solid var(--pep-line); border-radius: 24px; overflow: hidden; max-width: 920px; }
body.pdp-redesign .pep-coa-top { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; background: linear-gradient(90deg,#fff4fa,#fff); gap: 16px; flex-wrap: wrap; }
body.pdp-redesign .pep-coa-top .t { font-weight: 800; font-size: 1.05rem; }
body.pdp-redesign .pep-coa-top .s { font-size: .8rem; color: var(--pep-muted); margin-top: 3px; }
body.pdp-redesign .pep-verified { display: inline-flex; align-items: center; gap: 6px; font-size: .72rem; font-weight: 800; letter-spacing: .04em; color: var(--pep-green); background: var(--pep-greenbg); border-radius: 50px; padding: 9px 15px; white-space: nowrap; }
body.pdp-redesign .pep-coa-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px,1fr)); }
body.pdp-redesign .pep-coa-cell { padding: 20px 24px; border-top: 1px solid var(--pep-line); border-left: 1px solid var(--pep-line); }
body.pdp-redesign .pep-coa-cell:first-child { border-left: 0; }
body.pdp-redesign .pep-coa-cell .k { font-size: .66rem; text-transform: uppercase; letter-spacing: .08em; color: var(--pep-muted); font-weight: 700; }
body.pdp-redesign .pep-coa-cell .v { font-weight: 800; font-size: 1.25rem; margin-top: 5px; }
body.pdp-redesign .pep-coa-cell .v.pink { color: var(--pep-primary); }

/* ---- QC panel ---- */
body.pdp-redesign .pep-qc { max-width: 920px; margin-top: 22px; border: 1.5px solid var(--pep-line); border-radius: 24px; overflow: hidden; }
body.pdp-redesign .pep-qc-head { padding: 24px; background: var(--pep-silver); }
body.pdp-redesign .pep-qc-badges span { font-size: .62rem; font-weight: 800; letter-spacing: .06em; border-radius: 50px; padding: 6px 12px; margin-right: 6px; background: var(--pep-ink); color: #fff; }
body.pdp-redesign .pep-qc-purity { text-align: center; margin-bottom: 14px; }
body.pdp-redesign .pep-qc-purity .big { font-weight: 800; font-size: 2.6rem; color: var(--pep-green); letter-spacing: -.03em; }
/* Non-percentage headline (capsule content assays like "561 mcg/unit"):
   smaller type so the unit string reads as one figure. */
body.pdp-redesign .pep-qc-purity .big.is-text { font-size: 1.5rem; letter-spacing: -.01em; }
body.pdp-redesign .pep-qc-list { padding: 8px 24px 16px; }
/* Test on the left; result, tested-unit count, and verdict on the right. */
body.pdp-redesign .pep-qc-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 4px 16px;
  align-items: center;
  padding: 14px 0;
  border-top: 1px solid var(--pep-line2);
}
body.pdp-redesign .pep-qc-row .n { font-weight: 650; font-size: .93rem; letter-spacing: -.01em; }
body.pdp-redesign .pep-qc-row .meta { display: block; font-size: .74rem; font-weight: 400; color: var(--pep-muted); margin-top: 2px; }
body.pdp-redesign .pep-qc-row .res { text-align: right; min-width: 0; }
body.pdp-redesign .pep-qc-row .res .v {
  font-weight: 650;
  font-size: .92rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
  overflow-wrap: anywhere;
}
body.pdp-redesign .pep-qc-row .res .u {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 3px;
  margin-top: 4px;
  color: #a9a2af;
}
body.pdp-redesign .pep-qc-row .res .u .pep-qc-unit { flex: none; }
body.pdp-redesign .pep-qc-row .res .u span {
  font-size: .7rem;
  font-weight: 600;
  color: var(--pep-muted);
  margin-left: 5px;
  white-space: nowrap;
}
body.pdp-redesign .pep-qc-chip {
  justify-self: end;
  font-size: .64rem;
  font-weight: 800;
  letter-spacing: .07em;
  border-radius: 50px;
  padding: 6px 12px;
  white-space: nowrap;
}
body.pdp-redesign .pep-qc-chip.is-pass { color: var(--pep-green); background: var(--pep-greenbg); }
body.pdp-redesign .pep-qc-chip.is-fail { color: #b91c1c; background: #fdecec; }
body.pdp-redesign .pep-qc-chip.is-reported { color: var(--pep-muted); background: var(--pep-line2); }
body.pdp-redesign .pep-qc-foot { padding: 16px 24px; border-top: 1px solid var(--pep-line); display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; }
body.pdp-redesign .pep-qc-foot .acc { font-size: .74rem; font-weight: 800; letter-spacing: .05em; color: var(--pep-green); }
body.pdp-redesign .pep-qc-foot a { color: var(--pep-primary); font-weight: 700; font-size: .85rem; }

/* ---- batch history ---- */
body.pdp-redesign .pep-batches { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: 20px; margin-top: 22px; max-width: 920px; }
body.pdp-redesign .pep-batch { display: block; background: var(--pep-silver); border: 1px solid var(--pep-line); border-radius: 20px; padding: 22px; color: var(--pep-ink); transition: border-color .16s, box-shadow .16s, transform .16s; }
body.pdp-redesign a.pep-batch:hover { color: var(--pep-ink); border-color: var(--pep-primary); box-shadow: 0 14px 30px rgba(222, 0, 118, .12); transform: translateY(-2px); }
body.pdp-redesign .pep-batch .go { display: inline-block; margin-top: 14px; font-size: .8rem; font-weight: 700; color: var(--pep-primary); }
body.pdp-redesign .pep-batch.is-selected { background: linear-gradient(180deg,#fff4fa,#fff); border-color: var(--pep-primary); }
body.pdp-redesign .pep-batch .bn .pcm-tier-pill,
body.pdp-redesign .pep-coa .pcm-tier-pill {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  font-weight: 800;
  font-size: .62rem;
  letter-spacing: .02em;
  border-radius: 50px;
  padding: 3px 9px;
  margin-left: 6px;
}
body.pdp-redesign .pep-batch .pcm-tier-14x,
body.pdp-redesign .pep-coa .pcm-tier-14x { background: linear-gradient(135deg, #fef3c7, #fbbf24); color: #78350f; border: 1px solid #f59e0b; }
body.pdp-redesign .pep-batch .pcm-tier-7x,
body.pdp-redesign .pep-coa .pcm-tier-7x { background: #d9f2e5; color: #0f6e56; border: 1px solid #5dcaa5; }
body.pdp-redesign .pep-coa-side { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
body.pdp-redesign .pep-coa-dl { font-size: .8rem; font-weight: 700; color: var(--pep-primary); white-space: nowrap; }
body.pdp-redesign .pep-coa-dl:hover { color: #c30068; }
body.pdp-redesign .pep-coa-vbv { font-size: .74rem; font-weight: 600; color: var(--pep-muted); white-space: nowrap; }
body.pdp-redesign .pep-coa-vbv:hover { color: var(--pep-primary); }
body.pdp-redesign .pep-batch .bh { display: flex; align-items: center; justify-content: space-between; }
body.pdp-redesign .pep-batch .bn { font-weight: 800; font-size: 1rem; }
body.pdp-redesign .pep-batch .live { font-size: .58rem; font-weight: 800; letter-spacing: .06em; color: #fff; background: var(--pep-primary); border-radius: 50px; padding: 5px 10px; }
body.pdp-redesign .pep-batch .meta { margin-top: 14px; font-size: .83rem; color: var(--pep-muted); display: grid; gap: 9px; }
body.pdp-redesign .pep-batch .meta div { display: flex; justify-content: space-between; }
body.pdp-redesign .pep-batch .meta b { color: var(--pep-ink); font-weight: 600; }

/* ---- compound facts + specs ---- */
body.pdp-redesign .pep-facts { display: grid; grid-template-columns: 1.3fr 1fr; gap: 50px; align-items: start; }
body.pdp-redesign .pep-facts .body p { color: var(--pep-muted); margin-bottom: 14px; }
/* Quiet in tone, body-copy in scale (sized up per Josh, 2026-08-26) —
   for most capsule products this line IS the section's body. */
body.pdp-redesign .pep-capsule-note { font-size: 1rem; color: var(--pep-muted); margin-top: 12px; }
body.pdp-redesign .pep-specs { border: 1.5px solid var(--pep-line); border-radius: 22px; overflow: hidden; }
body.pdp-redesign .pep-specs .row { display: flex; justify-content: space-between; gap: 16px; padding: 14px 20px; font-size: .9rem; border-bottom: 1px solid var(--pep-line); }
body.pdp-redesign .pep-specs .row:last-child { border-bottom: 0; }
body.pdp-redesign .pep-specs .row .k { color: var(--pep-muted); }
body.pdp-redesign .pep-specs .row .v { font-weight: 600; text-align: right; }

/* ---- references ---- */
body.pdp-redesign .pep-refs { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); gap: 0 44px; }
body.pdp-redesign .pep-ref { display: flex; gap: 16px; padding: 16px 0; border-top: 1px solid var(--pep-line); font-size: .9rem; }
body.pdp-redesign .pep-ref .n { font-weight: 800; color: var(--pep-primary); width: 26px; flex: none; }
body.pdp-redesign .pep-ref span { display: block; color: var(--pep-muted); font-size: .8rem; margin-top: 3px; }

/* ---- "Frequently researched together": continuous right-to-left rail ---- */
body.pdp-redesign .pep-rail { padding: 26px 0 74px; overflow: hidden; }
body.pdp-redesign .pep-rail-head { max-width: 1200px; margin: 0 auto 30px; padding: 0 16px; text-align: center; }
body.pdp-redesign .pep-rail-viewport {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
body.pdp-redesign .pep-rail-track {
  display: flex;
  width: max-content;
  animation: pep-rail-scroll var(--pep-rail-dur, 48s) linear infinite;
}
body.pdp-redesign .pep-rail-track:hover,
body.pdp-redesign .pep-rail-track:focus-within { animation-play-state: paused; }
body.pdp-redesign .pep-rail-set { display: flex; gap: 20px; padding-right: 20px; }
@keyframes pep-rail-scroll {
  to { transform: translateX(var(--pep-rail-shift, -50%)); }
}
@media (prefers-reduced-motion: reduce) {
  body.pdp-redesign .pep-rail-track { animation: none; width: auto; }
  body.pdp-redesign .pep-rail-viewport { overflow-x: auto; -webkit-mask-image: none; mask-image: none; padding-bottom: 10px; }
  body.pdp-redesign .pep-rail-set[aria-hidden] { display: none; }
}

body.pdp-redesign .pep-rail-card {
  width: 280px;
  flex: none;
  display: flex;
  flex-direction: column;
  text-align: center;
  background: #fff;
  border: 1.5px solid var(--pep-line);
  border-radius: 22px;
  padding: 16px 16px 18px;
}
body.pdp-redesign .pep-rail-card__media { display: block; }
body.pdp-redesign .pep-rail-card__media img {
  width: 100%;
  height: auto; /* natural ratio — the legacy crop box is what clipped the vial art */
  display: block;
  border-radius: 14px;
}
body.pdp-redesign .pep-rail-card__name { margin: 12px 0 9px; font-size: 1.02rem; font-weight: 800; letter-spacing: -.01em; }
body.pdp-redesign .pep-rail-card__name a { color: var(--pep-ink); }
body.pdp-redesign .pep-rail-card .pcm-badge-row {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 4px;
}
body.pdp-redesign .pep-rail-card .pcm-badge-purity {
  display: inline-flex;
  align-items: center;
  font-weight: 700;
  font-size: .74rem;
  color: #0f6e56;
  background: #e7f6ee;
  border: 1px solid #bfe6d2;
  border-radius: 50px;
  padding: 4px 11px;
}
body.pdp-redesign .pep-rail-card .pcm-tier-pill {
  display: inline-flex;
  align-items: center;
  font-weight: 800;
  font-size: .7rem;
  border-radius: 50px;
  padding: 4px 10px;
}
body.pdp-redesign .pep-rail-card .pcm-tier-14x { background: linear-gradient(135deg, #fef3c7, #fbbf24); color: #78350f; border: 1px solid #f59e0b; }
body.pdp-redesign .pep-rail-card .pcm-tier-7x { background: #d9f2e5; color: #0f6e56; border: 1px solid #5dcaa5; }
body.pdp-redesign .pep-rail-card__actions { margin-top: auto; display: grid; gap: 8px; padding-top: 14px; }
body.pdp-redesign .pep-rail-card__ghost,
body.pdp-redesign .pep-rail-card__primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50px;
  padding: 12px 18px;
  font-weight: 700;
  font-size: .9rem;
  transition: .16s;
  white-space: nowrap;
}
body.pdp-redesign .pep-rail-card__ghost { border: 1.5px solid var(--pep-line); color: var(--pep-ink); }
body.pdp-redesign .pep-rail-card__ghost:hover { border-color: var(--pep-ink); color: var(--pep-ink); }
body.pdp-redesign .pep-rail-card__primary { background: var(--pep-primary); color: #fff; }
body.pdp-redesign .pep-rail-card__primary:hover { background: #c30068; color: #fff; transform: translateY(-1px); }
body.pdp-redesign .pep-rail-card__primary.is-off { background: var(--pep-line2); color: var(--pep-muted); cursor: not-allowed; }
body.pdp-redesign .pep-rail-card.is-oos .pep-rail-card__media img { opacity: .55; }

/* ---- wider desktop canvas: the page breathes when the glass allows ---- */
@media (min-width: 1200px) {
  body.pdp-redesign .products-crd-sec > .container { max-width: min(1560px, 100% - 64px); }
  body.pdp-redesign .pep-section,
  body.pdp-redesign .pep-adv-row,
  body.pdp-redesign .pep-notice,
  body.pdp-redesign .pep-rail-head { max-width: min(1560px, 100% - 64px); }
  body.pdp-redesign .pep-coa,
  body.pdp-redesign .pep-qc { max-width: 1040px; }
}

/* ---- research notice ---- */
body.pdp-redesign .pep-notice { display: flex; gap: 20px; align-items: flex-start; border: 1.5px solid #f2d3e3; background: linear-gradient(180deg,#fff4fa,#fff); border-radius: 24px; padding: 26px 28px; max-width: 1200px; margin: 0 auto 60px; }
body.pdp-redesign .pep-notice h3 { font-weight: 800; font-size: 1.05rem; }
body.pdp-redesign .pep-notice p { color: var(--pep-muted); font-size: .88rem; margin-top: 6px; }

/* WC's own selected-variation price echoes the Add button; keep it, but in
   ink — the legacy theme colors it olive. */
body.pdp-redesign .summary .woocommerce-variation-price .price,
body.pdp-redesign .summary .woocommerce-variation-price .price .amount {
  color: var(--pep-ink);
  font-weight: 800;
}

@media (max-width: 900px) {
  body.pdp-redesign div.product.type-product { flex-direction: column; padding: 20px 16px 30px; gap: 16px; }
  /* Screen-one economics: the portrait hero otherwise renders ~460px tall
     at 375px wide and — with the legacy section padding below — spends the
     whole first viewport on packaging art. Cap it and pull the buy box up
     so title, trust row and price land on screen one. The full selector
     prefix out-ranks Woo core's `div.images img { width:100% }`, which
     would otherwise pair with max-height to distort the photo. */
  body.pdp-redesign div.product.type-product .woocommerce-product-gallery img {
    /* Clamped: 34vh on portrait phones (ACQ pass 5 — the hero yields so
       price, ship line AND guarantee all make screen one), floored at
       260px so a landscape phone (375px tall) keeps a real photo, capped
       at 380px on tablets. svh repeats the line to dodge URL-bar wobble. */
    max-height: max(min(34vh, 380px), 260px);
    max-height: max(min(34svh, 380px), 260px);
    width: auto;
    max-width: 100%;
    margin: 0 auto;
    display: block;
  }
  body.pdp-redesign.single-product .woocommerce-product-gallery { margin-bottom: 0 !important; }
  /* flex-basis 420px on a 343px column otherwise wins the min-size fight
     and shoves the card past the right edge of the phone. */
  body.pdp-redesign div.product.type-product .summary.entry-summary,
  body.pdp-redesign div.product.type-product .woocommerce-product-gallery {
    min-width: 0;
    width: 100%;
    flex-basis: auto;
  }
  body.pdp-redesign div.product.type-product .summary.entry-summary { padding: 20px 20px 24px; }
  /* The sticky gallery is a two-column device: in the stacked layout it
     pins at top:150px while the summary — a later sibling, so painted
     above it — scrolls straight over the product photo. */
  body.pdp-redesign div.product.type-product .woocommerce-product-gallery { position: static; }
  body.pdp-redesign .pep-facts { grid-template-columns: 1fr; }
  body.pdp-redesign .pep-coa-grid, body.pdp-redesign .pep-batches, body.pdp-redesign .pep-refs { grid-template-columns: 1fr; }
  /* QC rows stay test-left / result-right on phones — tighter, and the
     verdict chip tucks under the result instead of claiming a column. */
  body.pdp-redesign .pep-qc-list { padding: 4px 16px 12px; }
  body.pdp-redesign .pep-qc-row { grid-template-columns: minmax(0, 1fr) auto; gap: 3px 12px; }
  body.pdp-redesign .pep-qc-row .n { font-size: .88rem; }
  body.pdp-redesign .pep-qc-row .res { grid-column: 2; grid-row: 1; }
  body.pdp-redesign .pep-qc-chip { grid-column: 2; grid-row: 2; margin-top: 2px; }
  body.pdp-redesign .pep-qc-row .n { grid-column: 1; grid-row: 1 / span 2; }
}

/* Fixed-header clearance: the opaque header is 103px tall down to 768px and
   64px below that, and .products-crd-sec padding-top is the ONLY thing
   keeping the card out from under it (the legacy 104/85px values existed
   for exactly this). 768-900px keeps the legacy padding; the tightened
   values below match the shorter phone header, stepping up where the
   main-wrapper's own padding shrinks under 480px. */
@media (max-width: 767px) {
  /* Slimmer fixed header on phone PDPs. TRAP (found in review): the logo
     renders 120x59 on real phones — captures measured a 33px broken-image
     alt box because staging hotlink-blocks the logo by Referer, so the
     first cut of these numbers left the card 12px UNDER the header. The
     cap below is what actually delivers the short bar: logo 40px tall,
     8px navbar padding (was 14, shell-redesign.css), header ≈57px. */
  body.pdp-redesign header.main-head .navbar { padding-top: 8px; padding-bottom: 8px; }
  body.pdp-redesign header.main-head .navbar-brand img { max-height: 40px; width: auto; }
  body.pdp-redesign.single-product .products-crd-sec { padding-top: 32px; }
}
@media (max-width: 479px) {
  body.pdp-redesign.single-product .products-crd-sec { padding-top: 40px; }
}

/* The CTA micro-proof exists because the certainty block is two screens up
   on a phone — on wider viewports both fit one screen and the repeat reads
   as padding. Phones only. */
@media (min-width: 768px) {
  body.pdp-redesign .pep-cta-proof { display: none; }
}

@media (max-width: 560px) {
  /* Qty + Add + Buy Now can't share one row at phone width — stack them. */
  body.pdp-redesign .summary .woocommerce-variation-add-to-cart,
  body.pdp-redesign .summary form.cart .cart_group,
  body.pdp-redesign .summary form.cart { flex-wrap: wrap; }
  body.pdp-redesign .summary .cart button.single_add_to_cart_button,
  body.pdp-redesign .summary a.buy-now-button { width: 100%; }
  /* Delivery rows: arrival drops to its own quiet line under name + price. */
  body.pdp-redesign .pep-delivery-row { flex-wrap: wrap; }
  body.pdp-redesign .pep-delivery-row .n { flex: 1; }
  body.pdp-redesign .pep-delivery-row .n em { font-size: .56rem; padding: 2px 6px; margin-left: 5px; }
  body.pdp-redesign .pep-delivery-row .a { flex: none; order: 3; width: 100%; margin-top: 2px; }
}