that repeats the tab name inside the Description
and Additional-information panels — redundant once the accordion header
already labels the row. Hide that leading duplicate. The COA panel starts
with a
(pp-coa-section), so :first-child won't match it. */
body.pp-theme-v2 .ppv2-pdp-acc__panel > h2:first-child {
display: none !important;
}
@media (prefers-reduced-motion: reduce) {
body.pp-theme-v2 .ppv2-pdp-acc__chev {
transition: none;
}
}
/* ---------------------------------------------------------------------------
13. RUO BAND — pp_pdp_v2_ruo_band. Dark navy band, white text (AA).
--------------------------------------------------------------------------- */
body.pp-theme-v2 .ppv2-pdp-ruo {
display: flex;
align-items: flex-start;
gap: 12px;
margin: 22px 0 0;
padding: 16px 18px;
background: var(--pp-band);
border-radius: var(--ppv2-radius);
color: #e7eefb;
}
body.pp-theme-v2 .ppv2-pdp-ruo__badge {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
padding: 4px 10px;
border-radius: 20px;
background: #fef3c7;
color: var(--pp-gold-text);
border: 1px solid #fde68a;
font-family: var(--ppv2-font-body);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
}
body.pp-theme-v2 .ppv2-pdp-ruo__text {
margin: 0;
font-size: 13px;
line-height: 1.6;
color: #e7eefb;
}
body.pp-theme-v2 .ppv2-pdp-ruo__text strong {
color: #ffffff;
font-weight: 700;
}
/* ---------------------------------------------------------------------------
14. STICKY MOBILE ADD-TO-CART BAR (sticky-cart-v2) — light treatment +
body bottom padding so it never hides content.
--------------------------------------------------------------------------- */
body.pp-theme-v2.single-product.pp-sticky-cart-v2 {
/* reserve space for the bar on small screens (the section may also set
this; this is a defensive guard so content is never hidden). */
}
body.pp-theme-v2 .pp-sticky-cart {
background: #ffffff;
border-top: 1px solid var(--pp-line);
box-shadow: 0 -4px 20px rgba(0, 41, 82, 0.12);
}
body.pp-theme-v2 .pp-sticky-cart__name {
color: var(--pp-navy);
font-family: var(--ppv2-font-heading);
font-weight: 700;
}
body.pp-theme-v2 .pp-sticky-cart__price {
color: var(--pp-navy);
font-weight: 800;
font-variant-numeric: tabular-nums;
}
body.pp-theme-v2 .pp-sticky-cart__add {
min-height: 44px;
padding: 10px 20px;
background: var(--pp-blue);
color: #fff;
border: 0;
border-radius: var(--ppv2-radius);
font-family: var(--ppv2-font-heading);
font-weight: 700;
cursor: pointer;
}
body.pp-theme-v2 .pp-sticky-cart__add:hover {
background: var(--pp-blue-hover);
}
/* Reserve bottom space on mobile so the fixed sticky bar can't hide the RUO
band / accordion / related products. */
@media (max-width: 783px) {
body.pp-theme-v2.single-product.pp-sticky-cart-v2 .site-main,
body.pp-theme-v2.single-product.pp-sticky-cart-v2 #content {
padding-bottom: 88px;
}
}
/* ---------------------------------------------------------------------------
15. RELATED / UPSELLS — keep them on the v2 card styling. The related rows
render WC loop products; the design-system .ppv2-pcard rules don't apply to
the default WC loop markup, so just keep the section heading light + tidy.
--------------------------------------------------------------------------- */
body.pp-theme-v2 .woocommerce div.product .related > h2,
body.pp-theme-v2 .woocommerce div.product .upsells > h2 {
font-family: var(--ppv2-font-heading) !important;
font-size: clamp(1.3rem, 3vw, 1.8rem) !important;
font-weight: 800 !important;
text-transform: none !important;
letter-spacing: -0.01em !important;
color: var(--pp-navy) !important;
margin: 8px 0 18px !important;
}
/* ---------------------------------------------------------------------------
BREAKPOINT: 768px (tablet) — begin two-column buy box.
--------------------------------------------------------------------------- */
@media (min-width: 768px) {
body.pp-theme-v2 .woocommerce div.product div.images img {
max-height: 420px;
}
body.pp-theme-v2 .ppv2-pdp-trust {
gap: 10px;
}
}
/* ---------------------------------------------------------------------------
BREAKPOINT: 992px (desktop) — gallery left / buy box right two-column grid.
product-layout-v2 may also grid .product; this base grid is robust on its
own and harmless if the section's grid wins (both target two columns).
--------------------------------------------------------------------------- */
@media (min-width: 992px) {
body.pp-theme-v2.single-product div.product {
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
grid-template-areas:
"gallery summary"
"info summary"
"tabs tabs"
"related related";
column-gap: 40px;
row-gap: 6px;
align-items: start;
}
body.pp-theme-v2.single-product div.product > .woocommerce-product-gallery,
body.pp-theme-v2.single-product div.product > .images {
grid-area: gallery;
width: 100% !important;
margin: 0 0 18px !important;
/* Fix 2026-06-06: was position:sticky; top:96px. Pinning the gallery let the
full-width Description/specs (grid-area:tabs, which sits below it in the
same left column) scroll up and paint over the image. Let the gallery
scroll normally with the page. */
position: static;
}
body.pp-theme-v2.single-product div.product > .summary,
body.pp-theme-v2.single-product div.product > .entry-summary {
grid-area: summary;
width: 100% !important;
margin: 0 !important;
}
body.pp-theme-v2.single-product div.product > .pp-product-info-block {
grid-area: info;
width: 100%;
margin: 0 0 22px !important;
}
body.pp-theme-v2.single-product div.product > .woocommerce-tabs {
grid-area: tabs;
}
body.pp-theme-v2.single-product div.product > .related,
body.pp-theme-v2.single-product div.product > .upsells {
grid-area: related;
}
/* Keep the gallery at its natural height; don't let it stretch the row. */
body.pp-theme-v2.single-product div.product > .woocommerce-product-gallery {
align-self: start;
}
}
/* ---------------------------------------------------------------------------
BELOW 992px — force a true single column. Some legacy PDP layout features
(product-layout-v2) grid `.product` at a lower width, which left the buy box
in a sparse 2-column layout on tablets / intermediate widths. Pin it to one
column until the desktop grid above takes over at 992px. !important + the
.single-product div.product specificity (0,3,1) beats the section grid. */
@media (max-width: 991.98px) {
/* Flex column with EXPLICIT order — a plain display:block would fall back to
DOM source order, which puts the info block (description/specs/MOA) above
the buy box. The mockup order is: gallery → buy box → info → tabs → related. */
body.pp-theme-v2.single-product div.product {
display: flex !important;
flex-direction: column !important;
grid-template-columns: none !important;
}
body.pp-theme-v2.single-product div.product > .woocommerce-product-gallery,
body.pp-theme-v2.single-product div.product > .images {
order: 1 !important;
}
body.pp-theme-v2.single-product div.product > .summary,
body.pp-theme-v2.single-product div.product > .entry-summary {
order: 2 !important;
}
body.pp-theme-v2.single-product div.product > .pp-product-info-block {
order: 3 !important;
}
body.pp-theme-v2.single-product div.product > .woocommerce-tabs {
order: 4 !important;
}
body.pp-theme-v2.single-product div.product > .related,
body.pp-theme-v2.single-product div.product > .upsells {
order: 5 !important;
}
body.pp-theme-v2.single-product div.product > * {
float: none !important;
width: 100% !important;
max-width: 100% !important;
grid-column: auto !important;
grid-area: auto !important;
position: static !important;
}
}
/* ---------------------------------------------------------------------------
9. FIX — price color + buy-box order (match the live PDP)
--------------------------------------------------------------------------- */
/* The price rules in §4 above were written "body.pp-theme-v2 .woocommerce
div.product ..." — a *descendant* .woocommerce. But on the single-product PDP
the .woocommerce class sits on itself (no nested .woocommerce wrapper),
so those selectors never matched and the legacy silver !important rule won →
the price rendered #C8D8E8 (pale, unreadable). Re-assert navy with BOTH classes
on (body.pp-theme-v2.woocommerce), which out-specifies legacy silver. */
body.pp-theme-v2.woocommerce div.product p.price,
body.pp-theme-v2.woocommerce div.product .summary .price,
body.pp-theme-v2.woocommerce div.product span.price,
body.pp-theme-v2.woocommerce div.product .woocommerce-variation-price .price,
body.pp-theme-v2.woocommerce div.product .price > .amount,
body.pp-theme-v2.woocommerce div.product .price > .woocommerce-Price-amount,
body.pp-theme-v2.woocommerce div.product .price ins,
body.pp-theme-v2.woocommerce div.product .price ins .woocommerce-Price-amount,
body.pp-theme-v2.woocommerce div.product .woocommerce-variation-price ins {
color: var(--pp-navy) !important;
}
body.pp-theme-v2.woocommerce div.product .price del,
body.pp-theme-v2.woocommerce div.product .price del .woocommerce-Price-amount,
body.pp-theme-v2.woocommerce div.product .woocommerce-variation-price del {
color: var(--pp-slate2) !important;
}
/* Buy-box flex-column order — match the live PDP. The legacy overrides-base.css
rules put price(.single_variation) order 1 / bulk-upsell order 2 with the
add-to-cart row at the default 0 (qty/Add-to-cart ABOVE the price). Live order
is price + 'X in stock' → bulk-tier upsell (BRONZE) → qty stepper + Add-to-cart
+ shipping rows, all just above the +/- button. */
body.pp-theme-v2.pp-pdp-summary-clean-v2 .single_variation_wrap > .single_variation {
order: 0 !important;
}
body.pp-theme-v2.pp-pdp-summary-clean-v2 .single_variation_wrap > .pp-bulk-upsell {
order: 1 !important;
}
body.pp-theme-v2.pp-pdp-summary-clean-v2 .single_variation_wrap > .woocommerce-variation-add-to-cart {
order: 2 !important;
}
/* ---------------------------------------------------------------------------
10. FIX — legacy silver (#C8D8E8 / --pp-silver) text bleeding onto the light
v2 PDP, unreadable (~1.3:1 on white). Same family as the price: a v2 override
that is either inert (the .woocommerce-descendant bug) or non-!important and
loses to a legacy silver rule. Audit of the body.pp-theme-v2 .woocommerce
pattern surfaced these. Re-assert readable colors.
--------------------------------------------------------------------------- */
/* "Clear" variation reset + product-meta (Category / Tags) links. Both had
`color:var(--pp-blue)` in §4-style rules scoped "body.pp-theme-v2 .woocommerce
div.product ..." (a nested .woocommerce that doesn't exist on the PDP), so the
legacy silver won. Re-assert with both classes on . */
body.pp-theme-v2.woocommerce div.product .reset_variations,
body.pp-theme-v2.woocommerce div.product .product_meta a {
color: var(--pp-blue) !important;
}
/* "View COA (PDF)" ghost button. pp-v2-design-system.css sets color:var(--pp-blue)
but WITHOUT !important, so a legacy silver link rule out-prioritises it. */
html body.pp-theme-v2 .ppv2-btn--ghost,
html body.pp-theme-v2 a.ppv2-btn--ghost {
color: var(--pp-blue) !important;
border-color: var(--pp-blue) !important;
}
html body.pp-theme-v2 .ppv2-btn--ghost:hover {
color: #ffffff !important;
}
/* Near-title "For Research Use Only — Not for human consumption" badge. It's a
legacy element (overrides-base.css) colored var(--pp-silver,#C0C0C0) for the
old DARK theme; on the light v2 PDP that's ~1.25:1. Make it navy + a defined
light-navy border so the compliance text actually reads. */
body.pp-theme-v2.single-product .pp-research-badge,
body.pp-theme-v2.single-product .pp-research-badge .pp-research-badge__icon {
color: var(--pp-navy) !important;
}
body.pp-theme-v2.single-product .pp-research-badge {
border-color: rgba(0, 41, 82, 0.18) !important;
}
/* ---------------------------------------------------------------------------
11. PDP declutter (UI/UX) — one on-brand sale signal + one RUO notice
Brand palette is authority-navy + trust-gold (no green). The PDP had THREE
sale cues (green WDR flash + amber "-15% OFF" pill + strikethrough price) and
TWO RUO notices. Keep the single on-brand, quantified sale signal and one
notice; drop the rest.
--------------------------------------------------------------------------- */
/* (a) Off-brand green "SALE!" flash badge (WooCommerce Discount Rules .onsale.
wdr-onsale / WC span.onsale). The amber .ppv2-pdp-chip--sale ("-15% OFF") pill
+ the strikethrough->sale price already signal AND quantify the discount
on-brand, so remove the green badge.
NOTE: do NOT target .sales-flash-overlay — WDR puts that class on the
div.product CONTAINER itself, so display:none there blanks the whole page. */
body.pp-theme-v2.single-product .onsale.wdr-onsale,
body.pp-theme-v2.single-product .woocommerce-product-gallery .onsale,
body.pp-theme-v2.single-product span.onsale {
display: none !important;
}
/* (b) Two RUO notices -> keep ONE. Drop the duplicate navy PDP band; the top
.pp-shop-ruo-notice is first, carries the "Full Disclaimer" link, and is
consistent with shop/cart (stated once, up front). */
body.pp-theme-v2.single-product .ppv2-pdp-ruo {
display: none !important;
}
/* (c) The kept notice's body text was a muted grey (~2.5:1) — make it readable. */
body.pp-theme-v2 .pp-shop-ruo-notice__body {
color: var(--pp-slate2) !important;
}
/* Fix 2026-06-05: the PDP RUO band (.ppv2-pdp-ruo from pdp-v2-aminoclub.php) is a
direct child of div.product with no grid-area, so it auto-placed into the
gallery cell and overlapped the product image on scroll. Per the eebb025
declutter decision it's a duplicate of the top .pp-shop-ruo-notice — drop it. */
.ppv2-pdp-ruo{display:none!important}