/* ============================================================================
 * pp-pdp-finish.css — PDP finish layer (Phase A consolidation, 2026-05-23)
 *
 * Concatenates TWO legacy files in their original cascade order:
 *   1. /assets/css/pp-pdp-phase3.css       (was: priority 120, LOCKED per PP_STATE.md)
 *   2. /assets/css/pp-pdp-buybox-v8.css    (was: priority 130)
 *
 * Loaded by mu-plugins/pp-pdp.php at priority 130 (after pp-pdp-base).
 *
 * The phase3 content is preserved byte-for-byte between the
 * PHASE-3-LOCKED-BEGIN / PHASE-3-LOCKED-END fences below so future audits
 * can checksum-verify it without re-deriving from history.
 * ============================================================================ */


/* ===== PHASE-3-LOCKED-BEGIN ===== */
/* ============================================================================
 * Pro Peptide - PDP Phase 3
 *
 * Pack tile visual hierarchy flip + supporting rules.
 *
 * Mock target (per Phase 3 prompt + pp-pdp-v7.jsx):
 *
 *   5-Pack
 *   $71.79 / vial          <- per-vial = HEADLINE (brand teal, 18px, weight 600)
 *   $358.97 total          <- pack total = SUBTITLE (muted, 11px, weight 500)
 *   Save $39.88 (10%)      <- combined savings pill (brand green, top-edge absolute)
 *
 * Single-vial tile keeps the same headline treatment but with no per-vial
 * label (no division to express), no total subtitle (no discount to express),
 * and no savings pill.
 *
 * Loaded by mu-plugins/pp-pdp-phase3.php at priority 120 (after pp-pdp-v7 at
 * 115). All rules scoped under .pp-buybox--v7 to inherit Phase 2 namespace.
 *
 * DESIGN.md v5 tokens used:
 *   --pp-blue-text  #0e6a99   (per-vial headline)
 *   --pp-green      #7ccf4a   (savings pill background)
 *   #6B7280 / #9CA3AF         (muted text scale used throughout v7 layer)
 * No new color tokens introduced.
 * ============================================================================ */


/* --- Per-vial HEADLINE: was the subtitle in Phase 2, now the headline ----- */
.pp-buybox--v7 .pp-pack-pill .pp-pack-pill__price {
	display: inline-block;
	font-family: 'Montserrat', sans-serif;
	font-weight: 600;
	font-size: 18px;
	line-height: 1.15;
	color: #0e6a99;
	letter-spacing: -0.3px;
}
.pp-buybox--v7 .pp-pack-pill .pp-pack-pill__price .woocommerce-Price-amount,
.pp-buybox--v7 .pp-pack-pill .pp-pack-pill__price .amount,
.pp-buybox--v7 .pp-pack-pill .pp-pack-pill__price bdi {
	font: inherit;
	color: inherit;
}
.pp-buybox--v7 .pp-pack-pill .pp-pack-pill__per-label {
	display: inline;
	margin-left: 4px;
	font-family: 'Montserrat', sans-serif;
	font-weight: 500;
	font-size: 12px;
	color: #6B7280;
	line-height: 1.15;
}
.pp-buybox--v7 .pp-pack-pill .pp-pack-pill__per-row {
	display: inline-flex;
	align-items: baseline;
	gap: 0;
}

/* --- Total SUBTITLE: was the headline in Phase 2, now demoted -------------
   Overrides pp-pdp-hero.css:185-200 which set this to 18px/weight 600/dark. */
.pp-buybox--v7 .pp-pack-pill__total-row {
	display: inline-flex;
	align-items: baseline;
	gap: 3px;
	margin-top: 2px;
}
.pp-buybox--v7 .pp-pack-pill__total {
	display: inline-block;
	font-family: 'Montserrat', sans-serif;
	font-size: 11px !important;
	font-weight: 500 !important;
	color: #6b7280 !important;
	letter-spacing: 0;
	line-height: 1.1;
}
.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;
}
.pp-buybox--v7 .pp-pack-pill__total-label {
	font-family: 'Montserrat', sans-serif;
	font-size: 11px;
	font-weight: 500;
	color: #6b7280;
	line-height: 1.1;
}
/* Slightly darker total on active pill (still subtle, doesn't compete with headline). */
.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: #6B7280 !important;
}


/* --- Single-vial tile: one price, no /vial label, no total subtitle ------- */
.pp-buybox--v7 .pp-pack-pill .pp-pack-pill__per-row--single .pp-pack-pill__per-label {
	display: none;
}


/* --- Savings pill: combined "Save $N.NN (N%)" text -----------------------
   Inherits the absolute-top-edge positioning from pp-pdp-v7.css; only the
   padding/font-size widens here to fit the longer combined label without
   wrapping. Phase 2's separate .pp-pack-pill__save-amount span is gone
   (merged) so its CSS rule in pp-pdp-v7.css is now orphan but harmless. */
.pp-buybox--v7 .pp-pack-pill__savings {
	padding: 4px 14px;
	font-size: 11px;
	letter-spacing: 0.3px;
}
.pp-buybox--v7 .pp-pack-pill__savings .woocommerce-Price-amount,
.pp-buybox--v7 .pp-pack-pill__savings .amount,
.pp-buybox--v7 .pp-pack-pill__savings bdi {
	font: inherit;
	color: inherit;
}
/* Phase 2 element merged into __savings. Hide if anything else still renders it. */
.pp-buybox--v7 .pp-pack-pill__save-amount {
	display: none !important;
}


/* ============================================================================
 * === STAGE B PATCH (2026-05-21, visual gate failures) ===
 *
 * The four bugs found in browser screenshot:
 *   1. "$71.79 /" wraps to second line ahead of "vial"
 *   2. "$358.97" wraps to second line ahead of "total"
 *   3. SAVE pill stretches full tile width (looks like a button)
 *   4. Single Vial tile shows duplicate $79.77 $79.77
 *
 * Root cause: pp-pack-tier-cards.css uses CSS Grid for the pack pills with
 * grid-template-areas (name / priceline / savings). Its
 * .pp-pack-pill__pricing rule is `display: flex; flex-direction: row
 * !important`, putting per-row + total-row + cad on one flex line (they
 * compete for width, content wraps). Its .pp-pack-pill__savings rule places
 * the savings in a full-width grid cell (bug 3). pp-pdp-hero.css's
 * .pp-pack-pill__total { display: block } overrides the [hidden] attribute
 * via class-vs-attribute specificity (bug 4).
 *
 * Fix is CSS-only here + a markup tweak in variable.php (single-vial branch
 * no longer renders the hidden .pp-pack-pill__total). All overrides use
 * !important since pp-pack-tier-cards.css uses !important on the layout
 * properties we need to beat.
 * ============================================================================ */


/* Patch 1: stack per-row + total-row vertically inside the pricing area
   (override pp-pack-tier-cards.css line 73-82 row !important).
   2026-05-27: explicit display:flex added — flex-direction alone was a no-op
   because nothing else upgraded the <span> from inline to flex container. */
.pp-buybox--v7 .pp-pack-pill__pricing {
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-start !important;
	flex-wrap: nowrap !important;
	gap: 2px !important;
	width: 100%;
}

/* Patch 1+2: nowrap inside the row containers so "/ vial" and "total" never
   line-break away from their price. */
.pp-buybox--v7 .pp-pack-pill__per-row,
.pp-buybox--v7 .pp-pack-pill__total-row {
	white-space: nowrap;
	display: inline-flex;
	align-items: baseline;
	flex-wrap: nowrap;
	gap: 4px;
	max-width: 100%;
}
.pp-buybox--v7 .pp-pack-pill__per-label,
.pp-buybox--v7 .pp-pack-pill__total-label {
	white-space: nowrap;
}

/* Patch 3: save pill = compact, absolute top-edge.
   pp-pack-tier-cards.css line 114-125 puts savings in a full-width grid
   cell via grid-area: savings + display: block. Override grid-area to unset
   AND position absolutely. Higher specificity by adding the
   [data-attribute=...] ancestor so we beat pp-pack-tier-cards on equal-
   specificity ties even without !important — but use !important anyway for
   defensive override of the display: block. */
.pp-buybox--v7 .pp-pack-pill__savings,
.pp-selector-group[data-attribute="pa_pack-size"] .pp-buybox--v7 .pp-pack-pill__savings,
.pp-buybox--v7 .pp-selector-group[data-attribute="pa_pack-size"] .pp-pack-pill__savings {
	position: absolute !important;
	top: -10px !important;
	left: 50% !important;
	right: auto !important;
	bottom: auto !important;
	transform: translateX(-50%) !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: auto !important;
	max-width: calc(100% - 24px);
	grid-area: unset !important;
	margin: 0 !important;
	background: #7ccf4a !important;
	color: #ffffff !important;
	padding: 4px 14px !important;
	border-radius: 9999px !important;
	font-family: 'Montserrat', 'DM Sans', sans-serif !important;
	font-size: 11px !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
	letter-spacing: 0.3px !important;
	text-transform: none !important;
	white-space: nowrap;
	z-index: 4;
}
.pp-buybox--v7 .pp-pack-pill__savings[hidden] {
	display: none !important;
}
.pp-buybox--v7 .pp-pack-pill__savings .woocommerce-Price-amount,
.pp-buybox--v7 .pp-pack-pill__savings .amount,
.pp-buybox--v7 .pp-pack-pill__savings bdi {
	font: inherit !important;
	color: inherit !important;
}

/* Patch 3b: ensure parent pill anchors the absolute savings pill. Already
   set in pp-pdp-v7.css ADDITIONS but reaffirm here in case load order
   somehow changes. */
.pp-buybox--v7 .pp-pack-pill {
	position: relative;
	overflow: visible;
}

/* Patch 4 belt: if any .pp-pack-pill__total[hidden] still renders despite
   the variable.php single-vial branch no longer emitting one, force-hide.
   pp-pdp-hero.css's display:block (class-level) outweighs browser default
   [hidden]{display:none}; this !important rule wins explicitly. */
.pp-buybox--v7 .pp-pack-pill__total[hidden] {
	display: none !important;
}

/* Patch 5: lock the per-vial headline at 18px / brand teal. pp-pack-tier-
   cards.css:84-95 set this to 22px / dark. Same specificity (3 classes) so
   Phase 3's later load order wins — but the screenshot suggested cache or
   spec ties; ensure with !important. */
.pp-buybox--v7 .pp-pack-pill__price {
	font-size: 18px !important;
	font-weight: 600 !important;
	color: #0e6a99 !important;
	letter-spacing: -0.3px !important;
}
.pp-buybox--v7 .pp-pack-pill.is-active .pp-pack-pill__price,
.pp-buybox--v7 .pp-pack-pill[aria-pressed="true"] .pp-pack-pill__price {
	color: #0e6a99 !important;
}


/* ============================================================================
 * === STAGE B v2 PATCH (2026-05-21, second visual-gate round) ===
 *
 * Fix 1: Single-Vial tile showed a tiny green pill stub on the top edge.
 *        Root cause: the PHP rendered <span class="pp-pack-pill__savings"
 *        hidden> as an empty placeholder, and Stage B Patch's
 *        .pp-buybox--v7 .pp-selector-group[data-attribute="pa_pack-size"]
 *        .pp-pack-pill__savings { display: inline-flex !important; }
 *        rule beats the [hidden]{display:none} override on specificity
 *        (0,4,0 vs 0,3,0). variable.php now omits the span when
 *        $savings === 0; the belt rule below covers the data-pp-units="1"
 *        case at higher specificity so the empty stub can't render even
 *        if something else creates it.
 *
 * Fix 2: HEALING + RECOVERY category pill was cramped and kissing the
 *        gallery thumbnails. Bigger padding + font, more bottom clearance.
 * ============================================================================ */


/* Fix 1: belt-and-suspenders savings hide. Specificity (0,5,0) to beat
   the (0,4,0) display:inline-flex !important rule above. Combines the
   data-pp-units="1" filter (matches the Single Vial tile) with the
   pa_pack-size attribute ancestor. */
.pp-buybox--v7 .pp-selector-group[data-attribute="pa_pack-size"] .pp-pack-pill[data-pp-units="1"] .pp-pack-pill__savings,
.pp-selector-group[data-attribute="pa_pack-size"] .pp-buybox--v7 .pp-pack-pill[data-pp-units="1"] .pp-pack-pill__savings,
.pp-buybox--v7 .pp-selector-group[data-attribute="pa_pack-size"] .pp-pack-pill[data-pp-units="1"] .pp-pack-pill__save-amount,
.pp-buybox--v7 .pp-selector-group[data-attribute="pa_pack-size"] .pp-pack-pill__savings[hidden],
.pp-selector-group[data-attribute="pa_pack-size"] .pp-buybox--v7 .pp-pack-pill__savings[hidden] {
	display: none !important;
}


/* Fix 2: enlarge the category pill that overlays the gallery image.
   Tokens used:
     padding   10/22 (was 8/18 in pp-pdp-v7.css ADDITIONS)
     font-size 12px  (was 11px in pp-pdp-v7.css ADDITIONS)
   Bottom offset is adjusted upward on multi-image galleries so the pill
   has breathing room above the thumbnail strip (was bottom: 112px;
   bumped to 132px for ~20px clearance from the thumbs). Single-image
   gallery: pill still straddles outside the image; offset bumped from
   -16px to -20px to keep it visually balanced at the new larger size. */
body.single-product .ppx-gallery > .pp-gallery-cat-pill {
	padding: 10px 22px !important;
	font-size: 12px !important;
	bottom: -20px !important;
}
body.single-product .ppx-gallery:has(.flex-control-thumbs) > .pp-gallery-cat-pill {
	bottom: 132px !important;
}
@media (max-width: 768px) {
	body.single-product .ppx-gallery > .pp-gallery-cat-pill {
		bottom: -16px !important;
	}
	body.single-product .ppx-gallery:has(.flex-control-thumbs) > .pp-gallery-cat-pill {
		bottom: 120px !important;
	}
}


/* ============================================================================
 * === STAGE C: live running total under qty/Add-to-Cart row ===
 *
 * Renders inside .pp-buybox__buy-footer as a full-width flex-row element
 * above the existing .pp-buybox__stock + .pp-buybox__points-slot.
 * Populated by recomputeRunningTotal() in pro-peptide.js on init, pack-tile
 * click, found_variation, reset_data, and input.qty change.
 *
 * DESIGN.md v5 tokens used (no new colors introduced):
 *   #E5E7EB  divider                (matches existing buybox borders)
 *   #6B7280  muted text / label     (matches .pp-buybox__stock pattern)
 *   #343434  primary text / total   (matches .pp-pdp-title body color)
 *   #4e9c2a  --pp-green-text        (used for "You save $N" savings line)
 *
 * Note: DESIGN.md rule "Montserrat 400/500/600 only - NO 700/800" overrides
 * the Phase 3 prompt's spec which used font-weight: 700 for the value.
 * Logged in PHASE3_FINDINGS.md entry 10.
 * ============================================================================ */

/* Allow buy-footer to wrap so running-total takes its own row. The original
   .pp-buybox__buy-footer layout lives in the watched style.css:19542 (cannot
   edit). flex-wrap: wrap is the additive override that lets us stack the
   total above the existing stock/points line. */
.pp-buybox--v7 .pp-buybox__buy-footer {
	flex-wrap: wrap !important;
}

.pp-buybox--v7 .pp-running-total {
	flex-basis: 100%;
	width: 100%;
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	padding: 14px 0;
	margin: 0 0 12px;
	border-top: 1px solid #E5E7EB;
	border-bottom: 1px solid #E5E7EB;
}

.pp-buybox--v7 .pp-running-total__label {
	font-family: 'Montserrat', 'DM Sans', sans-serif;
	font-size: 14px;
	font-weight: 500;
	color: #6B7280;
	line-height: 1.2;
	letter-spacing: 0;
}

.pp-buybox--v7 .pp-running-total__value {
	font-family: 'Montserrat', 'DM Sans', sans-serif;
	font-size: 22px;
	font-weight: 600;   /* DESIGN.md cap is 600; prompt's 700 not allowed */
	color: #343434;
	line-height: 1.1;
	letter-spacing: -0.3px;
	margin-left: auto;
	white-space: nowrap;
}
.pp-buybox--v7 .pp-running-total__value .woocommerce-Price-amount,
.pp-buybox--v7 .pp-running-total__value .amount,
.pp-buybox--v7 .pp-running-total__value bdi {
	font: inherit;
	color: inherit;
}

.pp-buybox--v7 .pp-running-total__savings {
	flex-basis: 100%;
	width: 100%;
	display: block;
	font-family: 'Montserrat', 'DM Sans', sans-serif;
	font-size: 13px;
	font-weight: 600;
	color: #4e9c2a;
	text-align: right;
	line-height: 1.2;
	margin: 4px 0 0;
}

.pp-buybox--v7 .pp-running-total__savings[hidden] {
	display: none !important;
}


/* ===== PHASE-3-LOCKED-END ===== */


/* ============================================================================
 * SOURCE 2 of 2 — pp-pdp-buybox-v8.css (was priority 130)
 * ============================================================================ */
/* ============================================================================
 * pp-pdp-buybox-v8.css
 *
 * Buy-box layer extracted out of pp-pdp-phase3.css per PP_STATE.md
 * (Phase 3 is LOCKED, all session additions move here) and PP_TOKENS.md
 * (new CSS in new files). Enqueued by mu-plugins/pp-pdp-buybox-v8.php
 * at priority 130, depends on pp-pdp-phase3 so load order stays correct.
 *
 * Token contract (PP_TOKENS.md):
 *   - Font family: Montserrat ONLY. No monospace anywhere.
 *   - Font-weight cap: 600. No 700/800/900.
 *   - Category pill = FILLED tint bg + brand-stop border + brand-text color.
 *   - Vial-size pill = white bg, 1.5px border inactive, 2px blue active,
 *     #6B7280 text inactive, #343434 active.
 *   - Pack tile = 18px 14px padding, 1.5px/2px border, 12px radius.
 *
 * Fixes during the move (vs the prior phase3.css block):
 *   1. Vial-size pill font-family monospace → Montserrat (token rule).
 *   2. .pp-buybox__title font-weight 700 → 600 (hard cap).
 *   3. File moved out of pp-pdp-phase3.css (LOCKED file).
 *   4. Category pill outline → filled tint per PP_TOKENS.md "Category pill
 *      (filled, straddling image)" spec.
 *
 * Out of scope, not moved:
 *   - .pp-gallery-cat-pill straddle rules (lines 537-557 of old phase3) —
 *     orphan, the in-gallery pill is no longer rendered. Discarded.
 * ============================================================================ */


/* === GALLERY ============================================================== */

/* Drop the WC zoom magnifier overlay. */
body.single-product .ppx-gallery .woocommerce-product-gallery__trigger {
	display: none !important;
}

/* Phase 1: flexslider stamps inline height on .flex-viewport from a
   premature image-measure → cap clipped at top. height: auto !important
   beats the inline non-important style. Radius lives on the IMG, not the
   viewport (style.css line 1865 puts it on .flex-viewport which is the
   wrong element). overflow visible so any absolute children sit outside. */
body.single-product .ppx-gallery .flex-viewport {
	height: auto !important;
	border-radius: 0 !important;
	overflow: visible !important;
}
body.single-product .ppx-gallery .woocommerce-product-gallery__image {
	overflow: visible !important;
	background: transparent;
}

/* Phase 2: natural-ratio image card. Aspect-ratio constraint dropped after
   confirming the source image is 1024×800 landscape — forcing 1:1 made
   CSS fight the asset. White card, 1px border, 16px radius, 24px padding. */
body.single-product .ppx-gallery {
	max-width: 720px;
	margin: 0 auto;
	background: #ffffff;
	border: 1px solid #E5E7EB;
	border-radius: 16px;
	padding: 24px;
	box-sizing: border-box;
	position: relative;
	display: block;
}
body.single-product .ppx-gallery .woocommerce-product-gallery,
body.single-product .ppx-gallery .woocommerce-product-gallery__wrapper,
body.single-product .ppx-gallery .woocommerce-product-gallery__image {
	width: 100% !important;
	height: auto !important;
	max-width: 100% !important;
	display: block;
	float: none !important;
	margin: 0 !important;
}
body.single-product .ppx-gallery .woocommerce-product-gallery__image a {
	display: block;
}
body.single-product .ppx-gallery .woocommerce-product-gallery__image img {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
	margin: 0 auto;
	border-radius: 0;
	border: 0;
	background: transparent;
}


/* === PAGE CHROME ========================================================== */

/* Wider canvas (1600px). Top padding zeroed so the .pp-page-header below
   owns the full above-H1 space (30px). Bottom padding kept for the related-
   products section breathing room.
   Overrides pp-pdp-v7.css `.ppx-page` (max-width: 1280px). */
body.single-product .ppx-page {
	max-width: 1600px !important;
	padding: 0 64px 80px !important;
}
@media (max-width: 768px) {
	body.single-product .ppx-page {
		padding: 0 20px 60px !important;
	}
}


/* === HEADER SECTION (centered single-tone variant on PDP) ================ */

/* PDP-only spacing: 50px above the H1 and 50px below the breadcrumb.
   Global pp-page-header.css ships 56px top / 32px bottom (desktop). We
   override here scoped to body.single-product so non-PDP pages keep their
   roomier header. .ppx-page above has padding-top zeroed so the total space
   ABOVE the H1 is exactly this 50px; total space BELOW the breadcrumb is
   this 50px (no margin between .pp-page-header and table.ppx-grid). */
body.single-product .pp-page-header {
	padding-top: 50px;
	padding-bottom: 50px;
}


/* === STRADDLING CATEGORY PILL (FILLED, on image edge) ==================== */

/* Per PP_TOKENS.md "Category pill (filled, straddling image)":
     padding: 6px 14px
     bg: --pp-{color}-tint
     text: --pp-{color}-text
     border: 1px solid --pp-{color}
     font-size: 12px
     font-weight: 600
     letter-spacing: 0.3px
     radius: 9999px
   The image card already gets relative + 24px padding above; we drop the pill
   onto the bottom edge of .ppx-gallery (which IS the image card per the
   GALLERY block at the top of this file) and reserve 16px of overhang. */
body.single-product .ppx-gallery {
	margin-bottom: 24px;
}
body.single-product .ppx-gallery .pp-buybox__category-pill--straddle {
	position: absolute;
	bottom: -16px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 2;
	display: inline-flex;
	padding: 6px 14px;
	border-radius: 9999px;
	border: 1px solid #7ccf4a;
	background: #EAF7DF;
	color: #4e9c2a;
	font-family: 'Montserrat', sans-serif;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.3px;
	text-transform: uppercase;
	text-decoration: none;
	line-height: 1;
	white-space: nowrap;
	box-shadow: 0 1px 2px rgba(52, 52, 52, 0.05);
}

/* Brain + Mood = blue */
.ppx-page.pp-page--cat-brain .ppx-gallery .pp-buybox__category-pill--straddle {
	background: #E8F4FB;
	border-color: #0e6a99;
	color: #0e6a99;
}
/* Weight + Metabolism = orange */
.ppx-page.pp-page--cat-weight .ppx-gallery .pp-buybox__category-pill--straddle {
	background: #FEEAD8;
	border-color: #f97316;
	color: #c2410c;
}
/* Performance + Growth = red */
.ppx-page.pp-page--cat-performance .ppx-gallery .pp-buybox__category-pill--straddle {
	background: #FDE8EA;
	border-color: #ef4444;
	color: #c0384a;
}
/* Skin + Longevity = purple */
.ppx-page.pp-page--cat-skin .ppx-gallery .pp-buybox__category-pill--straddle {
	background: #F1ECFB;
	border-color: #9b7aef;
	color: #5e3fb5;
}
/* Immune Support = green fallback (same as default) */
.ppx-page.pp-page--cat-immune .ppx-gallery .pp-buybox__category-pill--straddle {
	background: #EAF7DF;
	border-color: #7ccf4a;
	color: #4e9c2a;
}


/* === WISHLIST HEART (icon button on image card) ========================== */

/* Per PP_TOKENS.md "Icon button (heart, etc.)":
     32x32, circle, white bg, 0.5px #E5E7EB border, shadow-sm,
     color #6B7280 inactive, #ef4444 active. Pinned to the same image card
     (.ppx-gallery is position: relative from the GALLERY block above). */
body.single-product .ppx-gallery .pp-wishlist-btn {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 2;
	width: 32px;
	height: 32px;
	padding: 0;
	border-radius: 50%;
	background: #FFFFFF;
	border: 0.5px solid #E5E7EB;
	box-shadow: 0 1px 2px rgba(52, 52, 52, 0.05);
	color: #6B7280;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: color 0.15s ease;
}
body.single-product .ppx-gallery .pp-wishlist-btn:hover {
	color: #ef4444;
}
body.single-product .ppx-gallery .pp-wishlist-btn.pp-wishlist-btn--active {
	color: #ef4444;
}
body.single-product .ppx-gallery .pp-wishlist-btn svg {
	width: 16px;
	height: 16px;
}
body.single-product .ppx-gallery .pp-wishlist-btn.pp-wishlist-btn--active svg {
	fill: currentColor;
}


/* === VIAL-SIZE PILL (Montserrat, no monospace) ====================== */

/* Per PP_TOKENS.md "Selectable pill (vial size, etc.)":
     padding: 10px 22px
     bg: white
     border inactive: 1.5px #E5E7EB
     border active: 2px #1f9edb
     text inactive: #6B7280
     text active: #343434
     font-size: 14px
     font-weight: 600
     radius: 9999px
   Font family fixed Montserrat (was monospace in old phase3 block). */
body.single-product .pp-buybox--v7 .pp-pill {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0;
	padding: 10px 22px;
	min-width: 0;
	/* width must be explicit: the legacy "simple round pill" block in
	   style.css (~19362) sets .pp-pill to a 68px circle; without this
	   override its width leaks through and OOS pills render as crammed
	   ovals (the Retatrutide circle bug). */
	width: auto;
	height: auto;
	border-radius: 9999px;
	border: 1.5px solid #E5E7EB;
	background: #ffffff;
	cursor: pointer;
	font-family: 'Montserrat', sans-serif;
	color: #6B7280;
	transition: all 0.18s;
}
body.single-product .pp-buybox--v7 .pp-pill:hover {
	border-color: #D1D5DB;
}
body.single-product .pp-buybox--v7 .pp-pill.is-active,
body.single-product .pp-buybox--v7 .pp-pill[aria-checked="true"] {
	border: 2px solid #1f9edb;
	background: #E8F4FB;
	color: #343434;
}
body.single-product .pp-buybox--v7 .pp-pill .pp-pill__value {
	display: block;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: -0.2px;
	line-height: 1.15;
	text-transform: lowercase;
}
body.single-product .pp-buybox--v7 .pp-pill .pp-pill__unit {
	display: block;
	margin-top: 2px;
	font-family: 'Montserrat', sans-serif;
	font-size: 9px;
	font-weight: 600;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: inherit;
	opacity: 0.7;
}

/* Vial pill OOS — render dimmed, block click so a tap doesn't wipe Add-to-Cart
   by selecting a no-variation combination. */
body.single-product .pp-pill[data-pp-oos="1"],
body.single-product .pp-pill.pp-pill--oos {
	opacity: 0.32;
	filter: grayscale(0.6);
	cursor: not-allowed;
	pointer-events: none;
	box-shadow: none !important;
}
body.single-product .pp-pill[data-pp-oos="1"]:hover,
body.single-product .pp-pill.pp-pill--oos:hover {
	background: inherit;
	border-color: inherit;
}
body.single-product .pp-pill[data-pp-oos="1"] .pp-pill__unit,
body.single-product .pp-pill.pp-pill--oos .pp-pill__unit {
	font-size: 9px;
	letter-spacing: 0.2px;
	text-transform: uppercase;
}


/* === PLANNER CTA CARD (blue-tint card with icon + text + arrow) ========== */

/* Per PP_TOKENS.md "Planner CTA card" + CC_v2_PDP_FINAL_POLISH.md Fix 7.
   Replaces the previous strip-to-text-link override. Icon box is a small
   white square with the brand teal glyph; description is a quiet caption
   under the title; arrow on the right cues navigation. */
body.single-product .pp-buybox--v7 .pp-planner-card {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 14px 0 18px;
	padding: 12px 14px;
	background: #E8F4FB;
	border: 0.5px solid #B5D4F4;
	border-radius: 12px;
	text-decoration: none;
	color: #343434;
	font-family: 'Montserrat', sans-serif;
	font-size: 13px;
	line-height: 1.3;
	transition: background 0.15s ease;
}
body.single-product .pp-buybox--v7 .pp-planner-card:hover {
	background: #D5EBF6;
	text-decoration: none;
}
body.single-product .pp-buybox--v7 .pp-planner-card .pp-planner-card__icon {
	flex-shrink: 0;
	width: 32px;
	height: 32px;
	border-radius: 8px;
	background: #FFFFFF;
	color: #0e6a99;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
body.single-product .pp-buybox--v7 .pp-planner-card .pp-planner-card__icon svg {
	width: 18px;
	height: 18px;
}
body.single-product .pp-buybox--v7 .pp-planner-card .pp-planner-card__copy {
	display: flex;
	flex-direction: column;
	gap: 2px;
	flex: 1 1 auto;
	min-width: 0;
}
body.single-product .pp-buybox--v7 .pp-planner-card .pp-planner-card__title {
	font-size: 13px;
	font-weight: 600;
	color: #343434;
	line-height: 1.25;
}
body.single-product .pp-buybox--v7 .pp-planner-card .pp-planner-card__desc {
	font-size: 12px;
	font-weight: 400;
	color: #6B7280;
	line-height: 1.3;
}
body.single-product .pp-buybox--v7 .pp-planner-card .pp-planner-card__cta {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	color: #0e6a99;
	font-size: 13px;
	font-weight: 600;
}
body.single-product .pp-buybox--v7 .pp-planner-card .pp-planner-card__cta svg {
	width: 12px;
	height: 12px;
}


/* === UNIFIED QUANTITY STEPPER ============================================ */

/* Per PP_TOKENS.md "Quantity stepper": 108px wide, 44px tall, 1.5px #E5E7EB
   border, 10px radius. Minus/plus buttons are .pp-qty-btn (injected by
   pro-peptide.js initQtySpinners). Center the WC native input between them
   and draw the chevrons via CSS so the whole group reads as one control. */
body.single-product form.cart .quantity {
	position: relative;
	display: inline-flex;
	align-items: stretch;
	width: 108px;
	height: 44px;
	border: 1.5px solid #E5E7EB;
	border-radius: 10px;
	background: #FFFFFF;
	overflow: hidden;
	padding: 0;
}
body.single-product form.cart .quantity input.qty {
	order: 2;
	width: 32px;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	text-align: center;
	font-family: 'Montserrat', sans-serif;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	color: #343434;
	-moz-appearance: textfield;
	appearance: textfield;
	box-shadow: none;
}
body.single-product form.cart .quantity input.qty::-webkit-outer-spin-button,
body.single-product form.cart .quantity input.qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
body.single-product form.cart .quantity input.qty:focus {
	outline: none;
}
body.single-product form.cart .quantity .pp-qty-btn {
	width: 38px;
	height: 100%;
	border: 0;
	background: transparent;
	color: #6B7280;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	font-size: 16px;
	line-height: 1;
	transition: color 0.15s ease;
}
body.single-product form.cart .quantity .pp-qty-btn:hover {
	color: #343434;
}
body.single-product form.cart .quantity .pp-qty-btn.pp-qty-down {
	order: 1;
}
body.single-product form.cart .quantity .pp-qty-btn.pp-qty-up {
	order: 3;
}
body.single-product form.cart .quantity .pp-qty-btn::before {
	font-family: 'Montserrat', sans-serif;
	font-size: 18px;
	font-weight: 500;
	line-height: 1;
}
body.single-product form.cart .quantity .pp-qty-btn.pp-qty-down::before { content: '\2212'; } /* minus */
body.single-product form.cart .quantity .pp-qty-btn.pp-qty-up::before   { content: '+'; }

/* Keep stepper inline with Add to Cart at the spec'd 10px gap. */
body.single-product form.cart {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}


/* === PACK-TIER CARDS (token spec: 18px/14px padding, 1.5/2px borders) ==== */

/* Per PP_TOKENS.md "Pack tile":
     padding: 18px 14px desktop, 14px 16px mobile
     bg: white
     border inactive: 1.5px #E5E7EB
     border active: 2px #1f9edb
     radius: 12px
     text-align: center desktop */
body.single-product .pp-buybox--v7 .pp-pack-row {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
}
body.single-product .pp-buybox--v7 .pp-pack-pill {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 5px;
	padding: 18px 14px;
	background: #ffffff;
	border: 1.5px solid #E5E7EB;
	border-radius: 12px;
	cursor: pointer;
	text-align: center;
	font-family: 'Montserrat', sans-serif;
	transition: all 0.18s;
}
body.single-product .pp-buybox--v7 .pp-pack-pill:hover {
	border-color: #D1D5DB;
}
body.single-product .pp-buybox--v7 .pp-pack-pill.is-active,
body.single-product .pp-buybox--v7 .pp-pack-pill[aria-pressed="true"] {
	border: 2px solid #1f9edb;
	background: #E8F4FB;
}
body.single-product .pp-buybox--v7 .pp-pack-pill .pp-pack-pill__name {
	font-size: 14px;
	font-weight: 600;
	color: #343434;
	line-height: 1.1;
}
body.single-product .pp-buybox--v7 .pp-pack-pill.is-active .pp-pack-pill__name,
body.single-product .pp-buybox--v7 .pp-pack-pill[aria-pressed="true"] .pp-pack-pill__name {
	color: #0e6a99;
}
@media (max-width: 768px) {
	body.single-product .pp-buybox--v7 .pp-pack-pill {
		padding: 14px 16px;
	}
}
/* Radio dot is decorative — active state is the border + bg, not the dot. */
body.single-product .pp-buybox--v7 .pp-pack-pill .pp-pack-pill__radio {
	display: none;
}

/* =========================================================================
 * 2026-05-27 polish — pack-pill spacing + new "Save N%" line + size group breathing room
 * ========================================================================= */

/* Keep "Single Vial" on a single line (was wrapping into two rows). */
body.single-product .pp-buybox--v7 .pp-pack-pill .pp-pack-pill__name {
	white-space: nowrap;
}

/* "save N%" sits inline at the end of the total-row, separated by a
 * vertical | bar — e.g. "$598.77 total | save 25%". Renders as a flex
 * sibling inside .pp-pack-pill__total-row. */
body.single-product .pp-buybox--v7 .pp-pack-pill .pp-pack-pill__pct {
	display: inline-flex;
	align-items: baseline;
	font-family: 'Montserrat', 'DM Sans', sans-serif;
	font-size: 12px;
	font-weight: 600;
	color: #0e6a99;
	line-height: 1.2;
	letter-spacing: 0.2px;
}
body.single-product .pp-buybox--v7 .pp-pack-pill .pp-pack-pill__pct::before {
	content: '';
	display: inline-block;
	width: 1px;
	height: 11px;
	background: #BFC5CC;
	margin: 0 8px 0 4px;
	vertical-align: middle;
	align-self: center;
}

/* Breathing room around the Size pill group:
 *   - margin-top puts space between the Planner card and the "Size" label
 *   - margin-bottom puts space between the size pills and the pack pills */
body.single-product .pp-buybox--v7 .pp-selector-group[data-attribute="pa_size"],
body.single-product .pp-buybox--v7 .pp-selector-group[data-attribute="pa_vial-size"] {
	margin-top: 18px;
	margin-bottom: 22px;
}

/* =========================================================================
 * Pack pill — center the inner stack:
 *   [pack name]              <- absolute __savings badge floats above this
 *   $35.75 / vial            (centered)
 *   $178.77 total            (centered)
 *   ─────────────            (separator)
 *   Save 10%                 (centered, blue)
 * ========================================================================= */
body.single-product .pp-buybox--v7 .pp-pack-pill {
	text-align: center;
}
body.single-product .pp-buybox--v7 .pp-pack-pill .pp-pack-pill__main,
body.single-product .pp-buybox--v7 .pp-pack-pill .pp-pack-pill__pricing {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center;
	width: 100%;
	text-align: center;
}
body.single-product .pp-buybox--v7 .pp-pack-pill .pp-pack-pill__per-row,
body.single-product .pp-buybox--v7 .pp-pack-pill .pp-pack-pill__total-row {
	justify-content: center;
	margin-left: auto;
	margin-right: auto;
}
/* (Old block-level separator rule retired — __pct now lives inline inside
   the .pp-pack-pill__total-row, separated by a vertical bar pseudo-element
   defined in the .pp-pack-pill__pct block above.) */

/* =========================================================================
 * 2026-05-29 — Vertical-stack pack tiers (kill the middle-card bulge).
 * The inline "$XXX total | save N%" run was the widest element in the card,
 * and `1fr` (= minmax(auto,1fr)) let that content blow the grid track past an
 * equal share, so 5-Pack / 10-Pack bulged wider than Single Vial. Fix:
 *   (1) lock columns to minmax(0,1fr) so all three tiers stay equal width;
 *   (2) wrap the total-row so "save N%" drops onto its own centered line
 *       (and drop the leading vertical | bar, which only made sense inline).
 * ========================================================================= */
body.single-product .pp-buybox--v7 .pp-pack-row {
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
body.single-product .pp-buybox--v7 .pp-pack-pill .pp-pack-pill__total-row {
	flex-wrap: wrap;
	justify-content: center;
	white-space: normal;
}
body.single-product .pp-buybox--v7 .pp-pack-pill .pp-pack-pill__pct {
	flex: 0 0 100%;
	justify-content: center;
}
body.single-product .pp-buybox--v7 .pp-pack-pill .pp-pack-pill__pct::before {
	display: none;
}
/* Below ~600px the buy column is too narrow for 3 across (cards crush to ~88px
   and text clips), so stack to a single column. Overrides the desktop
   minmax(0,1fr) rule above. */
@media (max-width: 600px) {
	body.single-product .pp-buybox--v7 .pp-pack-row {
		grid-template-columns: 1fr !important;
	}
}

/* =========================================================================
 * Qty stepper — convert WC's <input type=number> into a flat horizontal row:
 *   [−]  qty  [+]   with the input fitting between two buttons.
 * JS in pro-peptide.js wraps the input + injects the buttons; this just
 * styles the result and hides the native browser spinners.
 * ========================================================================= */
body.single-product .pp-buybox--v7 .pp-qty {
	display: inline-flex;
	align-items: stretch;
	height: 48px;
	border: 1.5px solid #E5E7EB;
	border-radius: 10px;
	overflow: hidden;
	background: #fff;
}
body.single-product .pp-buybox--v7 .pp-qty__btn {
	width: 36px;
	border: 0;
	background: #fff;
	color: #343434;
	font-size: 20px;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background 0.15s ease;
}
body.single-product .pp-buybox--v7 .pp-qty__btn:hover {
	background: #F3F4F6;
}
body.single-product .pp-buybox--v7 .pp-qty__btn:disabled {
	color: #D1D5DB;
	cursor: not-allowed;
	background: #fff;
}
/* Visible vials display (the user-facing number). 2026-05-27 — replaces the
   native WC <input class="qty"> as the visible control. WC's input is still
   in the DOM (carrying the pack count for form submit) but visually hidden
   via the [aria-hidden] rule below. */
body.single-product .pp-buybox--v7 .pp-qty .pp-qty__display {
	width: 56px;
	height: 100%;
	border: 0;
	border-left: 1px solid #BFC5CC;
	border-right: 1px solid #BFC5CC;
	border-radius: 0;
	text-align: center;
	font-size: 15px;
	font-weight: 600;
	color: #343434;
	background: #fff;
	padding: 0;
	box-sizing: border-box;
	-moz-appearance: textfield;
	appearance: textfield;
}
body.single-product .pp-buybox--v7 .pp-qty .pp-qty__display:focus {
	outline: 2px solid #1f9edb;
	outline-offset: -2px;
}
body.single-product .pp-buybox--v7 .pp-qty .pp-qty__display::-webkit-outer-spin-button,
body.single-product .pp-buybox--v7 .pp-qty .pp-qty__display::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
/* WC's native <input class="qty"> — kept submittable, visually removed. */
body.single-product .pp-buybox--v7 .pp-qty input.qty[aria-hidden="true"] {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
	border: 0;
	padding: 0;
	margin: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
}
/* 2026-06-03 — stepper symmetry. The stepper was clamped narrower than its
   content (130px fixed for simple via style.css .pp-buybox__cart-row .pp-qty;
   shrunk to ~128px for variable) while its three children need 144px: two
   44px WCAG touch-target buttons (pp-mobile-fixes.css) + a 56px display. With
   overflow:hidden that clipped the right (+) button flush against the edge,
   so − read with a margin and + looked cramped. Let the stepper size to its
   own content and refuse to shrink, so − and + get equal breathing room. */
body.single-product .pp-buybox--v7 .pp-qty,
body.single-product .pp-buybox--v7 .pp-buybox__cart-row .pp-qty {
	flex: 0 0 auto;
	width: auto;
}

/* =========================================================================
 * Add to Cart — wider button, white cart icon left of the text.
 * JS in pro-peptide.js prepends the SVG; this styles the layout + size.
 * ========================================================================= */
body.single-product .pp-buybox--v7 .single_variation_wrap .woocommerce-variation-add-to-cart {
	display: flex;
	gap: 10px;
	align-items: stretch;
}
body.single-product .pp-buybox--v7 button.single_add_to_cart_button {
	flex: 1 1 auto;
	min-width: 200px;
	padding: 0 28px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
}
body.single-product .pp-buybox--v7 button.single_add_to_cart_button .pp-atc-icon {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	color: #fff;
}
/* 2026-06-03 — live line total on the Add to Cart button ("Add {product} to
   cart · $X.XX"). JS in pro-peptide.js (ppAtcTotalInit) builds the spans and
   keeps .pp-atc-total in sync on qty / pack / variation change. The dot + total
   carry the emphasis; on narrow screens the product name drops so the label
   stays one line ("Add to cart · $X.XX"). */
body.single-product .pp-buybox--v7 button.single_add_to_cart_button .pp-atc-sep {
	opacity: 0.7;
}
body.single-product .pp-buybox--v7 button.single_add_to_cart_button .pp-atc-total {
	font-weight: 600;
}
@media (max-width: 480px) {
	body.single-product .pp-buybox--v7 button.single_add_to_cart_button .pp-atc-name {
		display: none;
	}
	/* The stepper (two 44px touch targets + 56px display = ~147px) plus the
	   200px-min Add to Cart button can't share one row under ~390px without
	   clipping the button off-screen. Let the row wrap so the button drops to
	   its own full-width line below the stepper — standard, thumb-friendly. */
	body.single-product .pp-buybox--v7 .pp-buybox__cart-row,
	body.single-product .pp-buybox--v7 .woocommerce-variation-add-to-cart {
		flex-wrap: wrap;
	}
	body.single-product .pp-buybox--v7 .pp-buybox__cart-row .single_add_to_cart_button,
	body.single-product .pp-buybox--v7 .woocommerce-variation-add-to-cart .single_add_to_cart_button {
		flex: 1 1 100%;
	}
}

/* =========================================================================
 * Tier upsell hint — 2026-05-27. Shown below the qty stepper / inside the
 * sticky ATC bar when a higher discount tier is one click away. Single JS
 * function in pro-peptide.js drives both surfaces from the precomputed
 * packIndex (PHP-emitted via variable.php data-pp-pack-index).
 * ========================================================================= */
.pp-tier-hint {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin: 6px 0 10px;
	padding: 0;
	background: none;
	border: 0;
	font-family: 'Montserrat', system-ui, sans-serif;
	font-size: 13px;
	font-weight: 600;
	color: #0e6a99;
	cursor: pointer;
	text-decoration: none;
	line-height: 1.3;
}
.pp-tier-hint:hover { color: #0e6a99; }
.pp-tier-hint:hover .pp-tier-hint__text { text-decoration: underline; }
.pp-tier-hint[hidden] { display: none !important; }
.pp-tier-hint__arrow {
	flex-shrink: 0;
	transition: transform 0.15s;
}
.pp-tier-hint:hover .pp-tier-hint__arrow { transform: translateX(2px); }

/* Sticky-bar variant: compact, smaller font. Hides on narrow mobile so the
 * sticky bar's cart button has room to breathe. */
.pp-tier-hint--sticky {
	font-size: 12px;
	margin: 0;
	color: #0e6a99;
}
.pp-sticky-buybar-center {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	justify-content: center;
	overflow: hidden;
}
@media (max-width: 768px) {
	.pp-sticky-buybar-center { display: none; }
}