/* ============================================================================
 * pp-pdp-base.css — PDP base layer (Phase A consolidation, 2026-05-23)
 *
 * Concatenates THREE legacy files in their original cascade order:
 *   1. /assets/css/pp-pdp-phase1.css   (was: priority 20  via inc/pp-pdp-phase1.php)
 *   2. /pp-pdp-hero.css                (was: priority 110 via mu-plugins/pp-pdp-hero.php)
 *   3. /pp-pdp-v7.css                  (was: priority 115 via mu-plugins/pp-pdp-v7.php)
 *
 * Loaded by mu-plugins/pp-pdp.php at priority 110.
 * Zero visual change vs the 3-file stack — bytes preserved, concatenated
 * in their original load order so the cascade is identical.
 * ============================================================================ */


/* ============================================================================
 * SOURCE 1 of 3 — pp-pdp-phase1.css (was priority 20)
 * ============================================================================ */
/* ============================================================================
 * Pro Peptide · PDP Phase 1 — Conversion cleanup  (naturally-child adapted)
 *
 *   1. Sticky buy bar styling
 *   2. Hide the SEO tag-pill cloud in the buy box  (REAL selector:
 *      .pp-buybox__tags — woocommerce-single.php:184. NOT WC's .tagged_as.)
 *   3. Demote the Peptide Planner callout to a subtle inline link
 *      (REAL selector: .pp-planner-card — add-to-cart/variable.php:225.
 *      Pure CSS restyle of the existing <a>, no markup change.)
 *
 * Brand tokens: blue #1f9edb / blueText #0e6a99 / red #ef4444 / text #343434
 * Body font on this theme: Montserrat. (JetBrains Mono is NOT loaded here,
 * so the sticky price uses Montserrat/Space Grotesk to match .ppx-price.)
 * Tags + tag archives (/product-tag/...) are never touched — display only.
 * ============================================================================ */

/* ───────────────────────────────────────────
 * 1 · STICKY BUY BAR
 *
 * top is a CSS var defaulting to 0. If the site header is fixed and the bar
 * overlays it, set --pp-sticky-top to the header height (one value) — flagged
 * for the dev-first eyeball before this goes live.
 * ─────────────────────────────────────────── */
#pp-sticky-buybar {
  position: fixed;
  top: var(--pp-sticky-top, 0px);
  left: 0;
  right: 0;
  z-index: 999;
  background: #FFFFFF;
  border-bottom: 1px solid #E5E7EB;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  transform: translateY(-100%);
  transition: transform 0.25s ease;
}

#pp-sticky-buybar.is-visible {
  transform: translateY(0);
}

.pp-sticky-buybar-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 12px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.pp-sticky-buybar-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.pp-sticky-buybar-thumb {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: #fafafa;
  flex-shrink: 0;
  object-fit: contain;
  padding: 4px;
}

.pp-sticky-buybar-name {
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #343434;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pp-sticky-buybar-right {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* Price: Montserrat/Space Grotesk to match the buy box (.ppx-price),
   not JetBrains Mono which this theme does not load. */
.pp-sticky-buybar-price {
  font-family: 'Montserrat', 'Space Grotesk', system-ui, sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: #343434;
  margin: 0;
  letter-spacing: -0.4px;
  white-space: nowrap;
}

.pp-sticky-buybar-price del {
  font-size: 13px;
  font-weight: 500;
  color: #6b7280;
  margin-right: 6px;
}

.pp-sticky-buybar-price ins {
  text-decoration: none;
}

.pp-sticky-buybar-btn {
  padding: 10px 22px;
  height: 42px;
  border-radius: 10px;
  background: #ef4444;
  color: #fafafa;
  border: 0;
  cursor: pointer;
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: background 0.15s;
}

.pp-sticky-buybar-btn:hover {
  background: #dc2626;
}

@media (max-width: 768px) {
  .pp-sticky-buybar-inner { padding: 10px 16px; }
  .pp-sticky-buybar-name  { display: none; }
  .pp-sticky-buybar-btn   { padding: 10px 18px; }
}

/* ───────────────────────────────────────────
 * 2 · HIDE THE SEO TAG CLOUD IN THE BUY BOX
 *
 * Real markup (woocommerce-single.php:184-196):
 *   <div class="pp-buybox__tags"> <span class="pp-buybox__tags-label">
 *   <span class="pp-buybox__tags-list"> <a class="pp-buybox__tag">…
 * Hiding the display only. Tags + /product-tag/ archives are unaffected.
 * ─────────────────────────────────────────── */
.single-product .pp-buybox__tags {
  display: none !important;
}

/* ───────────────────────────────────────────
 * 3 · DEMOTE THE PEPTIDE PLANNER CALLOUT
 *
 * Real markup (add-to-cart/variable.php:225-237) is already an <a>:
 *   <a class="pp-planner-card">
 *     <span class="pp-planner-card__icon">…svg…</span>
 *     <span class="pp-planner-card__copy">
 *       <span class="pp-planner-card__title">Not sure how much you need?</span>
 *       <span class="pp-planner-card__desc">Use the Peptide Planner to map out your protocol</span>
 *     </span>
 *     <span class="pp-planner-card__cta">Plan it ›</span>
 *   </a>
 *
 * Demote = strip the box chrome, drop the icon + "Not sure…" eyebrow + the
 * "Plan it" chip text, keep a quiet inline link reading:
 *   "Use the Peptide Planner to map out your protocol ›"
 * Pure CSS, fully reversible.
 * ─────────────────────────────────────────── */
.single-product .pp-planner-card {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  width: auto !important;
  min-height: 0 !important;
  margin: 6px 0 14px !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-family: 'Montserrat', system-ui, sans-serif !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: #0e6a99 !important;
  text-decoration: none !important;
}
.single-product .pp-planner-card:hover .pp-planner-card__desc {
  text-decoration: underline;
}
.single-product .pp-planner-card__icon,
.single-product .pp-planner-card__title {
  display: none !important;
}
.single-product .pp-planner-card__copy {
  display: inline !important;
  margin: 0 !important;
}
.single-product .pp-planner-card__desc {
  display: inline !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: #0e6a99 !important;
  margin: 0 !important;
}
.single-product .pp-planner-card__cta {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  font-size: 0 !important;            /* hides the "Plan it" text node */
  color: #0e6a99 !important;
}
.single-product .pp-planner-card__cta svg {
  width: 12px !important;
  height: 12px !important;
}


/* ============================================================================
 * SOURCE 2 of 3 — pp-pdp-hero.css (was priority 110)
 * ============================================================================ */
/* ============================================================================
 * Pro Peptide — PDP Hero polish (V7 mock)
 *
 * Loaded by mu-plugins/pp-pdp-hero.php at priority 110 (after pp-mobile-fixes
 * at 99), depends on pro-peptide-style. Most rules scope under
 * `.pp-buybox--v7` (added to the right-column .pp-buybox in
 * woocommerce-single.php) so we don't fight unscoped legacy rules.
 *
 * The .pp-planner-card block here OVERRIDES the demote rules at
 * assets/css/pp-pdp-phase1.css:166-217 via higher specificity. The demote
 * stays in place (reversible) on purpose.
 * ============================================================================ */


/* ── Gallery category pill: layout polish only ────────────────────────────────
   Colors inherit from existing `.pp-page--cat-*` tokens on the page body
   (style.css:15770). No new color tokens added per design alignment. */
body.single-product .pp-gallery-cat-pill {
	padding: 7px 16px;
	border-radius: 9999px;
	font-family: 'Montserrat', 'DM Sans', sans-serif;
	font-weight: 600;
	font-size: 11px;
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	text-decoration: none;
	border: 0;
}


/* ── RUO kicker ───────────────────────────────────────────────────────────── */
.pp-buybox--v7 .pp-buybox__ruo {
	display: block;
	margin: 0 0 14px;
	font-family: 'Montserrat', sans-serif;
	font-weight: 400;
	font-style: italic;
	font-size: 11px;
	line-height: 1.4;
	letter-spacing: 0.3px;
	color: #6b7280;
}


/* ── Short description ────────────────────────────────────────────────────── */
.pp-buybox--v7 .pp-buybox__short-desc {
	margin: 0 0 26px;
	font-family: 'Montserrat', sans-serif;
	font-weight: 400;
	font-size: 14px;
	line-height: 1.6;
	color: #6B7280;
}
.pp-buybox--v7 .pp-buybox__short-desc p { margin: 0 0 8px; }
.pp-buybox--v7 .pp-buybox__short-desc p:last-child { margin-bottom: 0; }


/* ── Planner CTA tinted bar ───────────────────────────────────────────────────
   Higher-specificity override of `assets/css/pp-pdp-phase1.css:166-217` which
   demotes this card to a quiet inline link site-wide. We keep the demote in
   place (reversible) and beat it under the V7 buybox ancestor. */
.pp-buybox--v7 .pp-planner-card {
	display: flex !important;
	align-items: center !important;
	gap: 14px !important;
	width: auto !important;
	min-height: 0 !important;
	margin: 14px 0 18px !important;
	padding: 16px 20px !important;
	background: #E8F4FB !important;
	border: 1px solid #1f9edb !important;
	border-radius: 12px !important;
	box-shadow: none !important;
	text-decoration: none !important;
	color: #343434 !important;
	transition: border-color .15s;
}
.pp-buybox--v7 .pp-planner-card:hover {
	border-color: #0e6a99 !important;
}
.pp-buybox--v7 .pp-planner-card__icon {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex: 0 0 40px !important;
	width: 40px !important;
	height: 40px !important;
	background: #fff !important;
	border-radius: 10px !important;
	color: #0d5a87 !important;
}
.pp-buybox--v7 .pp-planner-card__icon svg {
	width: 20px !important;
	height: 20px !important;
}
.pp-buybox--v7 .pp-planner-card__copy {
	display: flex !important;
	flex-direction: column !important;
	flex: 1 1 auto !important;
	margin: 0 !important;
	line-height: 1.3 !important;
}
.pp-buybox--v7 .pp-planner-card__title {
	display: block !important;
	font-family: 'Montserrat', sans-serif !important;
	font-weight: 600 !important;
	font-size: 14px !important;
	color: #343434 !important;
	margin: 0 0 2px !important;
}
.pp-buybox--v7 .pp-planner-card__desc {
	display: block !important;
	font-family: 'Montserrat', sans-serif !important;
	font-weight: 400 !important;
	font-size: 12px !important;
	color: #6B7280 !important;
	line-height: 1.4 !important;
	margin: 0 !important;
	text-decoration: none !important;
}
.pp-buybox--v7 .pp-planner-card:hover .pp-planner-card__desc {
	text-decoration: none !important;
}
.pp-buybox--v7 .pp-planner-card__cta {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex: 0 0 auto !important;
	width: 24px !important;
	height: 24px !important;
	padding: 0 !important;
	margin: 0 !important;
	background: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	font-size: 0 !important;
	color: #0d5a87 !important;
}
.pp-buybox--v7 .pp-planner-card__cta svg {
	width: 16px !important;
	height: 16px !important;
}


/* ── Static "only size available" panel ──────────────────────────────────── */
.pp-buybox--v7 .pp-buybox__static-size {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 18px;
	background: #fafafa;
	border: 1.5px solid #E5E7EB;
	border-radius: 9999px;
	margin: 0 0 14px;
}
.pp-buybox--v7 .pp-buybox__static-size-value {
	font-family: 'Montserrat', sans-serif;
	font-weight: 600;
	font-size: 14px;
	color: #343434;
	line-height: 1;
}
.pp-buybox--v7 .pp-buybox__static-size-caption {
	font-family: 'Montserrat', sans-serif;
	font-weight: 600;
	font-size: 10px;
	color: #6b7280;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	line-height: 1;
}


/* ── Pack pill: total prominent, per-vial subtitle ─────────────────────────
   pp-pack-tier-cards.css lays the card out as a CSS grid (areas: name /
   priceline / savings). We keep that grid and re-style the pricing block
   to stack vertically: total headline, optional per-vial subtitle. */
.pp-buybox--v7 .pp-pack-pill__pricing {
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-start !important;
	gap: 4px !important;
}
.pp-buybox--v7 .pp-pack-pill__total {
	display: block;
	font-family: 'Montserrat', sans-serif;
	font-weight: 600;
	font-size: 18px;
	line-height: 1.1;
	color: #343434;
	letter-spacing: -0.3px;
}
.pp-buybox--v7 .pp-pack-pill.is-active .pp-pack-pill__total,
.pp-buybox--v7 .pp-pack-pill[aria-pressed="true"] .pp-pack-pill__total {
	color: #0e6a99;
}
.pp-buybox--v7 .pp-pack-pill__total .woocommerce-Price-amount,
.pp-buybox--v7 .pp-pack-pill__total .amount,
.pp-buybox--v7 .pp-pack-pill__total bdi { font: inherit; color: inherit; }
/* The legacy "CAD" eyebrow duplicates wc_price's $ symbol; hide on V7. */
.pp-buybox--v7 .pp-pack-pill__cad { display: none !important; }
.pp-buybox--v7 .pp-pack-pill__per-row {
	display: inline-flex;
	align-items: baseline;
	gap: 3px;
	font-family: 'Montserrat', sans-serif;
	font-size: 11px;
	font-weight: 500;
	color: #6B7280;
	line-height: 1.1;
}
.pp-buybox--v7 .pp-pack-pill__per-row .pp-pack-pill__price,
.pp-buybox--v7 .pp-pack-pill__per-row .pp-pack-pill__price .woocommerce-Price-amount,
.pp-buybox--v7 .pp-pack-pill__per-row .pp-pack-pill__price bdi { font: inherit; color: inherit; }
.pp-buybox--v7 .pp-pack-pill__per-label { color: inherit; }
.pp-buybox--v7 .pp-pack-pill__price[hidden] { display: none !important; }


/* ── Trust strip (full-width below hero) ─────────────────────────────────── */
.pp-trust-strip {
	margin: 56px 0 0;
	padding: 0;
	background: #fafafa;
	border-top: 1px solid #F3F4F6;
	border-bottom: 1px solid #F3F4F6;
}
/* 2026-06-11 owner call: all six badges on ONE row, much smaller icons +
   text (was 4-across at 48px icons / 17px labels, wrapping to a second row). */
.pp-trust-strip__inner {
	max-width: 1440px;
	margin: 0 auto;
	padding: 18px 32px;
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 16px;
}
.pp-trust-badge {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 8px;
	min-width: 0;
}
/* 2026-06-11: icon sits in a 48px tinted square (DESIGN.md icon-box pattern:
   blue tint #E8F4FB + blue icon; the red Canada flag pairs with the red tint
   #FDE8EA instead — accent-tint pairing rule). Stroke art ~24px inside. */
.pp-trust-badge__icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	background: #E8F4FB;
	border-radius: 10px;
}
.pp-trust-badge__icon--red {
	background: #FDE8EA;
}
.pp-trust-badge__icon svg {
	width: 24px;
	height: 24px;
	stroke-width: 1.5; /* was 1.25 unboxed; nudged back up so the art reads at 24px on the tint */
	display: block;
}
.pp-trust-badge__body { min-width: 0; }
.pp-trust-badge__label {
	margin: 0 0 2px;
	font-family: 'Montserrat', sans-serif;
	font-weight: 600;
	font-size: 13px;
	line-height: 1.25;
	color: #343434;
}
.pp-trust-badge__sub {
	margin: 0 auto;
	max-width: 22ch;
	font-family: 'Montserrat', sans-serif;
	font-weight: 400;
	font-size: 11px;
	line-height: 1.4;
	color: #6B7280;
}

@media (max-width: 768px) {
	.pp-trust-strip__inner {
		grid-template-columns: 1fr 1fr;
		gap: 20px 14px;
		padding: 16px;
	}
	.pp-trust-strip { margin-top: 40px; }
}


/* ── Qty stepper: PDP override of the shared cart-context spinner ──────
   .pp-qty-enhanced rules in style.css:10405-10472 are tuned for the cart
   page (wide input, 26px side padding for chevron buttons). In the V7
   buybox the qty input sits in a 48px row alongside Add to Cart, so we
   tighten the wrapper, input, and button placement to fit. Buttons are
   absolutely positioned chevrons stacked on the right edge of the input. */
.pp-buybox--v7 .quantity.pp-qty-enhanced {
	display: inline-block;
	position: relative;
	vertical-align: middle;
	border: 1.5px solid #E5E7EB;
	border-radius: 10px;
	overflow: hidden;
	height: 48px;
	background: #fff;
}
.pp-buybox--v7 .quantity.pp-qty-enhanced .qty {
	padding-left: 14px !important;
	padding-right: 32px !important;
	width: 84px;
	height: 48px;
	border: 0;
	text-align: center;
	font-family: 'Montserrat', 'Space Grotesk', sans-serif;
	font-size: 15px;
	font-weight: 600;
	background: transparent;
}
.pp-buybox--v7 .quantity.pp-qty-enhanced .pp-qty-btn {
	right: 11px;
	width: 14px;
	height: 16px;
}
.pp-buybox--v7 .quantity.pp-qty-enhanced .pp-qty-up { top: 6px; }
.pp-buybox--v7 .quantity.pp-qty-enhanced .pp-qty-down { bottom: 6px; }


/* ============================================================================
 * SOURCE 3 of 3 — pp-pdp-v7.css (was priority 115)
 * ============================================================================ */
/* ============================================================================
 * Pro Peptide — PDP v7
 *
 * Enqueued by mu-plugins/pp-pdp-v7.php at priority 115 (after pp-pdp-hero at
 * 110), so V7 rules win on equal-specificity ties.
 *
 * Sections:
 *   1. Extracted from the inline <style id="ppx-css"> block that previously
 *      lived in woocommerce-single.php (lines 345-923). Moved here verbatim
 *      on 2026-05-21 to keep the PDP template focused on markup.
 *   2. V7 ADDITIONS — Phase 2 build. New rules appended at bottom under the
 *      "V7 ADDITIONS" banner. Keep all new V7 rules below that banner so the
 *      extracted block stays trivially diffable against the template backup.
 *
 * Tokens follow DESIGN.md v5: Montserrat 400/500/600 (no 700/800 in V7
 * additions). 12px/16px/6px radii. Color palette comes from style.css and
 * pp-pdp-hero.css; no new color tokens introduced here.
 * ============================================================================ */


/* === EXTRACTED BLOCK (was inline in woocommerce-single.php) === */

/* PDP surface is white by design — the whole layout below is built on
   #ffffff / #fafafa with light borders. The body is already white globally
   (style.css), but the parent NineTheme section wrappers carry their own
   tinted background, so they are pinned to white here too. Permanent rule,
   not a preview hack. */
body.single-product,
body.single-product .ppx-wrap,
body.single-product .ppx-page,
body.single-product .nt-single-product,
body.single-product .section,
body.single-product .section-custom-8 {
  background: #ffffff !important;
}

/* === LAYOUT === */
.ppx-wrap {
  width: 100%;
  padding: 0;
  margin: 0;
}
.ppx-page {
  max-width: 1280px;
  margin: 0 auto;
  padding: 24px 64px 80px;
  font-family: 'Montserrat', 'DM Sans', -apple-system, sans-serif;
  color: #343434;
  box-sizing: border-box;
}
table.ppx-grid {
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 48px 0;
}
.ppx-left, .ppx-right {
  padding: 0;
  vertical-align: top;
}

/* === BREADCRUMBS === */
.ppx-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  font-size: 12px;
  color: #6B7280;
  margin-bottom: 24px;
  padding: 8px 0;
  line-height: 1.4;
}
.ppx-crumbs-link {
  display: inline;
  color: #0e6a99;
  text-decoration: none;
  font-weight: 500;
}
.ppx-crumbs-link:hover { text-decoration: underline; }
.ppx-crumbs-current {
  display: inline;
  color: #6b7280;
  font-weight: 500;
}
.ppx-crumbs-sep {
  display: inline;
  color: #D1D5DB;
  margin: 0 8px;
}

/* === GALLERY === */
.ppx-gallery {
  background: transparent;
  border-radius: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
}
.ppx-gallery .woocommerce-product-gallery,
.ppx-gallery .woocommerce-product-gallery__wrapper,
.ppx-gallery .images,
.ppx-gallery .flex-viewport {
  width: 100% !important;
  float: none !important;
  margin: 0 !important;
  max-width: none !important;
  opacity: 1 !important;
  background: transparent !important;
}
.ppx-gallery .woocommerce-product-gallery__image img {
  border-radius: 0;
  width: 100%;
  height: auto;
  display: block;
  background: transparent;
}
.ppx-gallery .flex-control-thumbs {
  display: flex;
  gap: 14px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}
.ppx-gallery .flex-control-thumbs li { width: 108px; margin: 0; }
.ppx-gallery .flex-control-thumbs img {
  border-radius: 10px;
  border: 2px solid #E5E7EB;
  width: 100%;
  height: auto;
}
.ppx-gallery .flex-control-thumbs img.flex-active { border-color: #0e6a99; }
@media (max-width: 768px) {
  .ppx-gallery { padding: 32px 20px; min-height: 280px; }
}

/* Category pill relocated onto the product image, bottom-centered with
   breathing room so it does not cover the bottle. Mirrors the wishlist-heart
   sibling-overlay pattern. Color still comes from the .pp-page--cat-* ancestor. */
.ppx-gallery > .pp-gallery-cat-pill {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 24px;
  z-index: 5;
  margin: 0;
  width: auto;
  height: auto;
  white-space: nowrap;
}
.ppx-gallery:has(.flex-control-thumbs) > .pp-gallery-cat-pill {
  /* Multi-image products: lift above the thumbnail strip (108px thumbs + 20px gap). */
  bottom: 152px;
}
@media (max-width: 768px) {
  .ppx-gallery > .pp-gallery-cat-pill { bottom: 16px; }
  .ppx-gallery:has(.flex-control-thumbs) > .pp-gallery-cat-pill { bottom: 140px; }
}

/* COA wrapper (used inside the COA tab body) */
.ppx-tabs__panel-body .ppx-coa { margin-top: 0; }

/* === RIGHT COLUMN === */
.ppx-title-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  margin: 0 0 12px;
}
.ppx-title {
  font-family: 'Montserrat', 'Space Grotesk', sans-serif;
  font-size: 38px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.5px;
  margin: 0;
  color: #343434;
}

/* Size badge — v6 Option C bordered (Sale color family: purple) */
.ppx-size {
  display: inline-block;
  background: transparent;
  color: #0e6a99;
  border: 1px solid #1f9edb;
  font-family: 'Montserrat', 'DM Sans', sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.3px;
  padding: 3px 8px;
  border-radius: 4px;
  margin: 0;
  text-transform: uppercase;
  white-space: nowrap;
  flex: 0 0 auto;
}

.ppx-rating {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  text-decoration: none;
  color: inherit;
}
.ppx-rating-badge {
  background: #1f9edb;
  color: #fff;
  font-family: 'Montserrat', 'Space Grotesk', sans-serif;
  font-size: 18px;
  font-weight: 700;
  padding: 8px 14px;
  border-radius: 8px;
  line-height: 1;
  min-width: 44px;
  text-align: center;
}
.ppx-rating-stars {
  position: relative;
  display: inline-block;
  font-size: 26px;
  line-height: 1;
  letter-spacing: 4px;
}
.ppx-rating-stars-empty {
  color: #E5E7EB;
}
.ppx-rating-stars-fill {
  position: absolute;
  top: 0;
  left: 0;
  color: #0e6a99;
  white-space: nowrap;
  overflow: hidden;
  pointer-events: none;
}
.ppx-rating-count { font-size: 13px; color: #6B7280; }

.ppx-price,
.ppx-price .price {
  font-family: 'Montserrat', 'Space Grotesk', sans-serif;
  font-size: 28px;
  font-weight: 700;
  color: #343434;
  margin: 0 0 16px;
}

.ppx-excerpt {
  font-size: 15px;
  line-height: 1.65;
  color: #6B7280;
  margin-bottom: 24px;
}
.ppx-excerpt p { margin: 0 0 8px; }

/* === ADD TO CART — Pack Size pills stacked above [qty] [button] row === */
.ppx-buy { margin-bottom: 20px; }
.ppx-buy form.cart {
  display: block;
  margin: 0;
  padding: 0;
  background: none;
  border: none;
}

/* Hide stock count, variation price */
.ppx-buy .stock,
.ppx-buy .woocommerce-variation-price,
.ppx-buy .woocommerce-variation-availability { display: none; }
.ppx-buy .woocommerce-variation.single_variation { display: none; }

/* Native WC variations table: stack label + select per row, brand-styled selects */
.ppx-buy table.variations,
.ppx-buy table.variations tbody,
.ppx-buy table.variations tr,
.ppx-buy table.variations th,
.ppx-buy table.variations td {
  display: block;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  width: 100%;
}
.ppx-buy table.variations { margin: 0 0 16px; }
.ppx-buy table.variations tr { margin-bottom: 14px; }
.ppx-buy table.variations th.label,
.ppx-buy table.variations th.label label {
  font-family: 'Montserrat', 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #6B7280;
  margin: 0 0 6px;
}
.ppx-buy table.variations td.value select {
  width: 100%;
  max-width: 100%;
  height: 44px;
  padding: 0 14px;
  border: 1.5px solid #E5E7EB;
  border-radius: 10px;
  background: #fff;
  font-family: 'Montserrat', 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #343434;
  cursor: pointer;
  appearance: auto;
}
.ppx-buy table.variations td.value select:focus {
  outline: none;
  border-color: #5fb8e6;
}
.ppx-buy a.reset_variations {
  display: inline-block;
  margin-top: 6px;
  font-size: 12px;
  color: #6B7280;
  text-decoration: underline;
}

/* Qty + Button on the same row, BELOW the pill groups */
.ppx-buy .single_variation_wrap {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  align-items: stretch;
}
.ppx-buy .woocommerce-variation-add-to-cart {
  display: contents;
}
.ppx-buy .quantity {
  border: 1.5px solid #E5E7EB;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  align-items: center;
  height: 48px;
  flex-shrink: 0;
}
.ppx-buy input.qty {
  height: 48px;
  width: 56px;
  border: none;
  text-align: center;
  font-family: 'Montserrat', 'Space Grotesk', sans-serif;
  font-size: 15px;
  font-weight: 600;
  background: #fff;
  padding: 0;
}
.ppx-buy button.single_add_to_cart_button {
  flex: 0 0 auto;
  background: #ef4444;
  color: #fff;
  border: none;
  height: 48px;
  border-radius: 10px;
  font-family: 'Montserrat', 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 0 24px;
  cursor: pointer;
  white-space: nowrap;
}
.ppx-buy button.single_add_to_cart_button:hover { background: #dc2626; }
.ppx-buy .reset_variations { display: none; }
.ppx-buy .woocommerce-variation-price { display: none; }

/* === TRUST + RUO + META === */
.ppx-trust {
  display: flex;
  gap: 22px;
  padding: 18px 0;
  border-top: 1px solid #E5E7EB;
  font-size: 15px;
  font-weight: 500;
  color: #1E293B;
  flex-wrap: wrap;
}
.ppx-trust span::first-letter { color: #0e6a99; font-weight: 700; }

/* .ppx-ruo removed in Phase 1.14 — v6 forbids compliance banners on product pages */

.ppx-meta { font-size: 14px; color: #64748B; line-height: 1.6; }
.ppx-meta div { margin-bottom: 6px; }
.ppx-meta a { color: #0e6a99; }
.ppx-meta a:hover { color: #1577AD; }

/* === TABS / ACCORDION — Description | COA | Reviews | FAQ === */
.ppx-tabs {
  margin-top: 56px;
  padding-top: 0;
  border-top: none;
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}
/* Tabs — centered, bigger labels, less bottom padding (per design pass) */
.ppx-tabs__list {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.ppx-tabs__tab {
  appearance: none;
  background: none;
  border: 0;
  font: inherit;
  font-family: 'Montserrat', 'DM Sans', sans-serif;
  padding: 16px 28px;
  cursor: pointer;
  color: #6B7280;
  font-weight: 500;
  font-size: 18px;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;                 /* sit on top of the 1px container border */
  transition: color .2s, border-color .2s;
}
.ppx-tabs__tab:hover { color: #343434; }
.ppx-tabs__tab.is-active {
  color: #343434;                      /* v6: dark text, NOT purple */
  border-bottom-color: #0e6a99;        /* v6: purple bottom border = the indicator */
}
.ppx-tabs__panel { display: none; }
.ppx-tabs__panel.is-active { display: block; }
.ppx-tabs__panel-body { font-size: 16px; line-height: 1.75; color: #333; }
.ppx-tabs__panel-body p { margin: 0 0 16px; }
.ppx-tabs__acc-header { display: none; }

/* FAQ list inside the FAQ panel */
.ppx-tabs__faq-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ppx-tabs__faq-item {
  border: 1px solid #E5E7EB;
  border-radius: 10px;
  padding: 16px 20px;
}
.ppx-tabs__faq-item summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 15px;
  color: #343434;
  list-style: none;
  font-family: 'Montserrat', 'Space Grotesk', sans-serif;
}
.ppx-tabs__faq-item summary::-webkit-details-marker { display: none; }
.ppx-tabs__faq-item[open] summary {
  color: #0e6a99;
  margin-bottom: 10px;
}
.ppx-tabs__faq-answer {
  font-size: 15px;
  line-height: 1.7;
  color: #374151;
}
.ppx-tabs__faq-answer p { margin: 0 0 10px; }
.ppx-tabs__faq-empty {
  color: #6B7280;
  font-style: italic;
}

/* === RELATED PRODUCTS === */
.ppx-related {
  margin-top: 64px;
  padding-top: 64px;
  border-top: 1px solid #E5E7EB;
}
.ppx-related .pp-section-header {
  margin-bottom: 32px;
}

/* === MOBILE === */
@media (max-width: 768px) {
  .ppx-page { padding: 16px 20px 60px; }
  table.ppx-grid,
  table.ppx-grid tbody,
  table.ppx-grid tr,
  table.ppx-grid td {
    display: block;
    width: 100%;
    border-spacing: 0;
  }
  .ppx-left, .ppx-right { width: 100%; padding: 0; }
  .ppx-right { margin-top: 32px; }
  .ppx-title { font-size: 28px; }

  /* Tabs become accordion on mobile */
  .ppx-tabs {
    margin-top: 40px;
    padding-top: 40px;
    max-width: none;
  }
  .ppx-tabs__list { display: none; }
  .ppx-tabs__panel,
  .ppx-tabs__panel.is-active {
    display: block;
    border-bottom: 1px solid #E5E7EB;
  }
  .ppx-tabs__panel:first-child { border-top: 1px solid #E5E7EB; }
  .ppx-tabs__acc-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 20px 4px;
    background: none;
    border: 0;
    font: 600 16px 'Space Grotesk', sans-serif;
    color: #343434;
    cursor: pointer;
    text-align: left;
  }
  .ppx-tabs__acc-icon::before {
    content: '+';
    font-size: 22px;
    color: #0e6a99;
  }
  .ppx-tabs__acc-header[aria-expanded="true"] .ppx-tabs__acc-icon::before {
    content: '\2212'; /* minus sign */
  }
  .ppx-tabs__panel-body {
    display: none;
    padding: 0 4px 20px;
  }
  .ppx-tabs__acc-header[aria-expanded="true"] + .ppx-tabs__panel-body {
    display: block;
  }
}

/* === PDP TITLE ROW: simplified — heart relocated to gallery, planner link removed === */
.pp-pdp-titleblock {
  display: block;
  text-align: left;
}
.pp-pdp-titleblock .pp-pdp-title,
.pp-pdp-titleblock .pp-pdp-title.pp-compound-name,
.pp-pdp-titleblock .pp-pdp-title.product_title {
  flex: none;
  width: auto !important;
  max-width: none !important;
  text-align: left;
  margin: 0 !important;
}


/* ============================================================================
 * === V7 ADDITIONS — Phase 2 build (2026-05-21) ===
 *
 * All Phase 2 rules below. Class-name policy: prefer existing classes from
 * pp-pdp-hero.css and pp-card-v2.css; only invent new classes when nothing
 * in the existing system covers the new surface. New classes here:
 *   .pp-pdp-meta                  subline below H1
 *   .pp-pack-pill__save-amount    "$N off" green text under per-vial price
 * Everything else reuses existing classes (.pp-pack-pill__savings,
 * .pp-qty-enhanced, .ppx-gallery > .pp-wishlist-btn, .pp-gallery-cat-pill).
 * ============================================================================ */


/* ── Subline meta under H1: e.g. "10mg · 99%+ Purity · COA Verified" ──────── */
.pp-pdp-meta {
  display: block;
  margin: 6px 0 14px;
  font-family: 'Montserrat', 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: #6B7280;
  letter-spacing: 0.2px;
}


/* ── Category pill: straddle bottom border of the gallery image ───────────────
   Overrides bottom: 24px from the extracted block above (same selector) with
   higher placement in the cascade. Multi-image variant nudges accordingly. */
.ppx-gallery > .pp-gallery-cat-pill {
  bottom: -16px;
  border: 3px solid #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  padding: 8px 18px;
  font-size: 11px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.ppx-gallery:has(.flex-control-thumbs) > .pp-gallery-cat-pill {
  /* Multi-image: keep straddle look but clear thumbnail strip. */
  bottom: 112px;
}
@media (max-width: 768px) {
  .ppx-gallery > .pp-gallery-cat-pill { bottom: -14px; }
  .ppx-gallery:has(.flex-control-thumbs) > .pp-gallery-cat-pill { bottom: 100px; }
}


/* ── SAVE pill: reposition the existing .pp-pack-pill__savings span to sit
   as a centered badge on the top edge of the pack-tier card. Percent only.
   Existing markup in variable.php:301-305 — no DOM change needed. ─────────── */
.pp-buybox--v7 .pp-pack-pill { position: relative; overflow: visible; }
.pp-buybox--v7 .pp-pack-pill__savings {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: #7ccf4a;
  color: #fff;
  padding: 3px 12px;
  border-radius: 9999px;
  font-family: 'Montserrat', 'DM Sans', sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1.2;
  z-index: 2;
}
.pp-buybox--v7 .pp-pack-pill__savings[hidden] { display: none !important; }


/* ── "$N off" green amount line below per-vial price (new) ─────────────────── */
.pp-buybox--v7 .pp-pack-pill__save-amount {
  display: block;
  margin-top: 4px;
  font-family: 'Montserrat', 'DM Sans', sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: #4e9c2a;
  line-height: 1.1;
}


/* ── Qty stepper: convert .pp-qty-enhanced from stacked chevrons (right edge,
   from pp-pdp-hero.css:288-316) to horizontal [minus][value][plus] row. The
   pro-peptide.js enhancer (assets/js/pro-peptide.js:317-329) already appends
   .pp-qty-up + .pp-qty-down buttons site-wide; we keep those, restyle to
   chars, and flex-order so minus sits left of the input and plus sits right.
   Scoped under .ppx-buy so other contexts (cart page) keep their stack. ──── */
.ppx-buy .quantity.pp-qty-enhanced {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  position: relative !important;
  height: 48px;
  width: auto;
  padding: 0 !important;
  border: 1.5px solid #E5E7EB;
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
}
.ppx-buy .quantity.pp-qty-enhanced input.qty {
  order: 2;
  width: 56px;
  height: 100%;
  padding: 0 !important;
  border: 0;
  text-align: center;
  font-family: 'Montserrat', 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 600;
  background: transparent;
  color: #343434;
  -moz-appearance: textfield;
}
.ppx-buy .quantity.pp-qty-enhanced input.qty::-webkit-outer-spin-button,
.ppx-buy .quantity.pp-qty-enhanced input.qty::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.ppx-buy .quantity.pp-qty-enhanced .pp-qty-btn {
  position: static !important;
  width: 44px !important;
  height: 100% !important;
  top: auto !important;
  bottom: auto !important;
  right: auto !important;
  left: auto !important;
  background: transparent;
  border: 0;
  color: #343434;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-family: 'Montserrat', 'DM Sans', sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 1;
}
.ppx-buy .quantity.pp-qty-enhanced .pp-qty-btn:hover { color: #0e6a99; }
.ppx-buy .quantity.pp-qty-enhanced .pp-qty-down { order: 1; }
.ppx-buy .quantity.pp-qty-enhanced .pp-qty-up   { order: 3; }
.ppx-buy .quantity.pp-qty-enhanced .pp-qty-down::before { content: '\2212'; }
.ppx-buy .quantity.pp-qty-enhanced .pp-qty-up::before   { content: '+'; }


/* ── Sticky tabs on desktop. Mobile keeps the accordion pattern already
   defined in the extracted block above. Top offset is zero — the parent
   NineTheme header is not fixed on PDP, so sticky-to-viewport-top is fine. */
@media (min-width: 769px) {
  .ppx-tabs__list {
    position: sticky;
    top: 0;
    z-index: 8;
    background: #fff;
    padding: 8px 0 0;
    border-bottom: 1px solid #E5E7EB;
  }
}


/* ── Trim WPLoyalty points line so it sits politely next to the in-stock
   indicator instead of crowding it. Spec note from prompt 2l. ─────────────── */
.pp-buybox__points-slot .wlr-product-message {
  font-size: 11px;
  color: #6b7280;
}