/**
 * Peptogenesis layout styles.
 *
 * Structural pieces: the entry gate, the header, the footer, and the homepage
 * sections. Component primitives live in components.css; this file composes them
 * into page furniture.
 *
 * As in components.css, every value comes from a theme.json token.
 */

/* -------------------------------------------------------------------------- *
 * Entry verification gate
 * -------------------------------------------------------------------------- */

body.pg-entry-locked {
	overflow: hidden;
}

.pg-entry-gate {
	align-items: center;
	background-color: #0a1020;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='520'%3E%3Cg fill='%23D4AF37'%3E%3Ccircle cx='38' cy='72' r='1.6' opacity='.5'/%3E%3Ccircle cx='142' cy='38' r='1' opacity='.35'/%3E%3Ccircle cx='268' cy='96' r='1.3' opacity='.4'/%3E%3Ccircle cx='402' cy='54' r='1' opacity='.3'/%3E%3Ccircle cx='486' cy='140' r='1.6' opacity='.45'/%3E%3Ccircle cx='96' cy='188' r='1.1' opacity='.35'/%3E%3Ccircle cx='210' cy='240' r='1.5' opacity='.42'/%3E%3Ccircle cx='348' cy='210' r='1' opacity='.3'/%3E%3Ccircle cx='452' cy='300' r='1.3' opacity='.4'/%3E%3Ccircle cx='60' cy='330' r='1.5' opacity='.45'/%3E%3Ccircle cx='170' cy='398' r='1' opacity='.32'/%3E%3Ccircle cx='300' cy='360' r='1.4' opacity='.4'/%3E%3Ccircle cx='430' cy='430' r='1.1' opacity='.35'/%3E%3Ccircle cx='120' cy='470' r='1.3' opacity='.4'/%3E%3Ccircle cx='260' cy='486' r='1' opacity='.3'/%3E%3Ccircle cx='500' cy='500' r='1.5' opacity='.45'/%3E%3C/g%3E%3C/svg%3E");
	background-size: 520px 520px;
	display: flex;
	inset: 0;
	justify-content: center;
	opacity: 1;
	overflow-y: auto;
	padding: var( --wp--preset--spacing--40 ) 20px;
	position: fixed;
	transition: opacity var( --pg-duration-slow ) var( --pg-easing );
	z-index: 9999;
}

/* Navy vignette over the gold flecks, so the panel reads clearly. */
.pg-entry-gate::before {
	background: radial-gradient( ellipse 72% 60% at 50% 28%, rgba( 34, 49, 79, 0.55 ) 0%, rgba( 8, 13, 24, 0.92 ) 74% );
	content: "";
	inset: 0;
	pointer-events: none;
	position: absolute;
	z-index: 0;
}

.pg-entry-gate.is-dismissed {
	opacity: 0;
	pointer-events: none;
}

/* Refined glass panel: subtle blur, gold hairline, soft gold glow. */
.pg-entry-gate__panel {
	-webkit-backdrop-filter: blur( 16px ) saturate( 120% );
	backdrop-filter: blur( 16px ) saturate( 120% );
	background: rgba( 18, 27, 45, 0.72 );
	border: 1px solid rgba( 212, 175, 55, 0.4 );
	border-radius: 14px;
	box-shadow: 0 20px 60px rgba( 2, 6, 16, 0.6 ), 0 0 40px rgba( 212, 175, 55, 0.1 );
	max-height: calc( 100dvh - 40px );
	max-width: 30rem;
	overflow-y: auto;
	padding: var( --wp--preset--spacing--60 ) var( --wp--preset--spacing--50 );
	position: relative;
	text-align: center;
	width: 100%;
	z-index: 1;
}

.pg-entry-gate__panel .custom-logo-link,
.pg-entry-gate__logo {
	display: inline-flex;
	margin: 0 auto var( --wp--preset--spacing--40 );
}

.pg-entry-gate__logo .pg-logo__mark {
	height: auto;
	width: 64px;
}

/* Fallback when no logo has been uploaded yet. */
.pg-entry-gate__wordmark {
	color: var( --wp--preset--color--white );
	font-size: var( --wp--preset--font-size--x-large );
	font-weight: 700;
	letter-spacing: 0.02em;
	margin: 0 0 var( --wp--preset--spacing--40 );
}

.pg-entry-gate .pg-eyebrow {
	margin: 0 0 0.6rem;
}

.pg-entry-gate__title {
	color: var( --wp--preset--color--white );
	font-size: var( --wp--preset--font-size--xx-large );
	letter-spacing: -0.02em;
	line-height: 1.15;
	margin: 0 0 var( --wp--preset--spacing--30 );
}

.pg-entry-gate__body p {
	color: var( --wp--preset--color--slate );
	font-size: var( --wp--preset--font-size--small );
	line-height: 1.7;
	margin: 0;
	text-align: left;
}

.pg-entry-gate__body p + p {
	margin-top: 1rem;
}

.pg-entry-gate__actions {
	margin-top: var( --wp--preset--spacing--40 );
}

.pg-entry-gate__enter {
	cursor: pointer;
	width: 100%;
}

.pg-entry-gate__decline {
	color: var( --wp--preset--color--slate );
	font-size: 0.75rem;
	margin: var( --wp--preset--spacing--30 ) 0 0;
}

@media ( max-width: 480px ) {
	.pg-entry-gate__panel {
		padding: var( --wp--preset--spacing--50 ) var( --wp--preset--spacing--40 );
	}

	.pg-entry-gate__title {
		font-size: var( --wp--preset--font-size--x-large );
	}
}

/* -------------------------------------------------------------------------- *
 * Header
 * -------------------------------------------------------------------------- */

/*
 * Sticky lives on the template-part WRAPPER, not on .pg-header itself.
 *
 * Every template includes the header as `wp:template-part` with tagName "div",
 * so the header group is nested one level down inside `.pg-header-slot`. A
 * sticky element only sticks while its containing block is on screen, and that
 * wrapper is exactly as tall as the header — so sticking the inner group makes
 * it scroll away immediately. Sticking the wrapper is what actually holds it.
 *
 * The offset follows the admin bar so the bar does not cover the nav for a
 * logged-in user; it resolves to 0 for everyone else.
 */
.pg-header-slot {
	position: sticky;
	top: var( --wp-admin--admin-bar--position-offset, 0px );
	z-index: 100;
}

.pg-header {
	border-bottom: var( --wp--custom--border--gold );
	z-index: 100;
}

.pg-header .wp-block-site-title a {
	color: var( --wp--preset--color--white );
	font-weight: 700;
	letter-spacing: 0.02em;
	text-decoration: none;
}

.pg-header .wp-block-site-title a:hover {
	color: var( --wp--preset--color--gold );
}

/*
 * Navigation links.
 *
 * The Brand Guide calls for a gold underline on hover. It is drawn as a
 * transform on a pseudo-element rather than a border, so it wipes in from the
 * left instead of appearing all at once, and costs no layout.
 */
.pg-header .wp-block-navigation-item__content {
	color: var( --wp--preset--color--white );
	font-size: var( --wp--preset--font-size--small );
	font-weight: 500;
	letter-spacing: 0.02em;
	padding-bottom: 0.25rem;
	position: relative;
	text-decoration: none;
}

.pg-header .wp-block-navigation-item__content::after {
	background-color: var( --wp--preset--color--gold );
	bottom: 0;
	content: "";
	height: 1px;
	left: 0;
	position: absolute;
	right: 0;
	transform: scaleX( 0 );
	transform-origin: left center;
	transition: transform var( --pg-duration-base ) var( --pg-easing );
}

.pg-header .wp-block-navigation-item__content:hover::after,
.pg-header .wp-block-navigation-item__content:focus-visible::after,
.pg-header .wp-block-navigation-item.current-menu-item .wp-block-navigation-item__content::after {
	transform: scaleX( 1 );
}

.pg-header .wp-block-navigation-item.current-menu-item .wp-block-navigation-item__content {
	color: var( --wp--preset--color--gold );
}

/* Utility icon links: search, account, cart. */
.pg-header__utilities {
	align-items: center;
	display: flex;
	gap: var( --wp--preset--spacing--30 );
}

.pg-header__utility {
	align-items: center;
	border-radius: var( --wp--custom--radius--sm );
	color: var( --wp--preset--color--gold );
	display: inline-flex;
	justify-content: center;
	/* 44px keeps the touch target at the accessible minimum on mobile. */
	min-height: 44px;
	min-width: 44px;
	text-decoration: none;
	transition: background-color var( --pg-duration-base ) var( --pg-easing );
}

.pg-header__utility:hover {
	background-color: rgba( 212, 175, 55, 0.12 );
}

.pg-header__utility--cart {
	position: relative;
}

/* Cart quantity badge — updated live by the WooCommerce fragment. Hidden while
   empty so an empty cart shows a clean icon. */
.pg-cart-count {
	align-items: center;
	background: var( --pg-gold-metal );
	border-radius: 999px;
	color: var( --wp--preset--color--navy );
	display: none;
	font-size: 0.65rem;
	font-weight: 700;
	justify-content: center;
	line-height: 1;
	min-width: 18px;
	padding: 0 4px;
	height: 18px;
	position: absolute;
	right: 3px;
	top: 3px;
}

.pg-cart-count.is-visible {
	display: inline-flex;
}

/*
 * Mobile navigation overlay.
 *
 * Core renders the hamburger and the overlay; only its colors are restated here
 * so the panel matches the header rather than core's defaults.
 */
.pg-header .wp-block-navigation__responsive-container.is-menu-open {
	background-color: var( --wp--preset--color--navy );
	padding: var( --wp--preset--spacing--50 ) var( --wp--preset--spacing--40 );
}

.pg-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	color: var( --wp--preset--color--white );
	font-size: var( --wp--preset--font-size--x-large );
}

.pg-header .wp-block-navigation__responsive-container-open,
.pg-header .wp-block-navigation__responsive-container-close {
	color: var( --wp--preset--color--gold );
	min-height: 44px;
	min-width: 44px;
}

/* -------------------------------------------------------------------------- *
 * Footer
 * -------------------------------------------------------------------------- */

.pg-footer {
	border-top: var( --wp--custom--border--gold );
}

.pg-footer h2 {
	color: var( --wp--preset--color--white );
	font-size: var( --wp--preset--font-size--small );
	letter-spacing: 0.12em;
	margin-bottom: var( --wp--preset--spacing--30 );
	text-transform: uppercase;
}

.pg-footer .wp-block-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.pg-footer .wp-block-list li {
	margin-bottom: 0.625rem;
}

.pg-footer .wp-block-list a {
	color: var( --wp--preset--color--slate );
	font-size: var( --wp--preset--font-size--small );
	text-decoration: none;
	transition: color var( --pg-duration-base ) var( --pg-easing );
}

.pg-footer .wp-block-list a:hover,
.pg-footer .wp-block-list a:focus-visible {
	color: var( --wp--preset--color--gold );
}

.pg-footer__statement {
	color: var( --wp--preset--color--slate );
	font-size: var( --wp--preset--font-size--small );
	max-width: 34ch;
}

/*
 * Research disclaimer.
 *
 * Deliberately smaller and quieter than body copy but still above the 14px
 * floor and at 8.2:1 contrast — legally significant text that stays readable.
 */
.pg-footer__disclaimer {
	border-top: var( --wp--custom--border--subtle );
	color: var( --wp--preset--color--slate );
	font-size: var( --wp--preset--font-size--small );
	line-height: 1.7;
	padding-top: var( --wp--preset--spacing--50 );
}

.pg-footer__bottom {
	border-top: var( --wp--custom--border--subtle );
	color: var( --wp--preset--color--slate );
	font-size: 0.75rem;
	padding-top: var( --wp--preset--spacing--40 );
}

.pg-footer__bottom a {
	color: var( --wp--preset--color--slate );
	text-decoration: none;
}

.pg-footer__bottom a:hover {
	color: var( --wp--preset--color--gold );
}

/* -------------------------------------------------------------------------- *
 * Product renders
 *
 * A single, uniform gold glow sits behind every render. The catalogue is now
 * data-driven and the brand presentation is consistent across products, so the
 * glow is one shared treatment rather than a per-product accent colour.
 * -------------------------------------------------------------------------- */

.pg-product {
	margin: 0;
	position: relative;
	text-align: center;
}

/*
 * Accent glow.
 *
 * Sits behind the render and is decorative, so it is a pseudo-element rather
 * than markup. color-mix keeps the falloff tied to the product's own accent
 * instead of a second hard-coded value per product.
 */
.pg-product::before {
	background: radial-gradient(
		ellipse 60% 50% at 50% 55%,
		color-mix( in srgb, var( --pg-accent, var( --wp--preset--color--gold ) ) 28%, transparent ) 0%,
		transparent 70%
	);
	content: "";
	inset: 0;
	pointer-events: none;
	position: absolute;
	z-index: 0;
}

.pg-product__render {
	height: auto;
	max-width: 100%;
	position: relative;
	z-index: 1;
}

/* No zoom on hover. The card itself still lifts; the render stays put. */

.pg-product__name {
	color: var( --wp--preset--color--white );
	font-size: var( --wp--preset--font-size--small );
	font-weight: 600;
	letter-spacing: 0.08em;
	margin-top: var( --wp--preset--spacing--30 );
	position: relative;
	text-transform: uppercase;
	z-index: 1;
}

/* -------------------------------------------------------------------------- *
 * Brand logo
 * -------------------------------------------------------------------------- */

.pg-logo {
	align-items: center;
	display: inline-flex;
	gap: 0.7rem;
	text-decoration: none;
}

.pg-logo__mark {
	display: block;
	flex-shrink: 0;
	filter: drop-shadow( 0 2px 8px rgba( 212, 175, 55, 0.25 ) );
	height: auto;
}

.pg-logo__word {
	font-weight: 800;
	letter-spacing: 0.14em;
	line-height: 1;
	white-space: nowrap;
}

.pg-logo__word-a {
	color: var( --wp--preset--color--gold );
}

.pg-logo__word-b {
	color: var( --wp--preset--color--white );
}

/* Header lockup: horizontal, sized up from the old text logo. */
.pg-logo--header .pg-logo__mark {
	width: 62px;
}

.pg-logo--header .pg-logo__word {
	font-size: 1.4rem;
}

.pg-logo--header:hover .pg-logo__word-b {
	color: var( --wp--preset--color--gold );
	transition: color var( --pg-duration-base ) var( --pg-easing );
}

/* Hero lockup: stacked and prominent, sitting above the headline. */
.pg-logo--stacked {
	align-items: center;
	flex-direction: column;
	gap: 1rem;
}

.pg-logo--hero {
	/* Full-width flex column so the mark and wordmark centre in the hero. */
	display: flex;
	margin: 0 auto var( --wp--preset--spacing--50 );
	position: relative;
	text-align: center;
	z-index: 1;
}

.pg-logo--hero .pg-logo__mark {
	width: clamp( 104px, 14vw, 148px );
}

.pg-logo--hero .pg-logo__word {
	font-size: clamp( 1.6rem, 4vw, 2.4rem );
	letter-spacing: 0.2em;
	/* Optical: the wordmark centres better with the extra tracking pulled in. */
	text-indent: 0.2em;
}

/* -------------------------------------------------------------------------- *
 * Hero
 * -------------------------------------------------------------------------- */

/*
 * Hero background.
 *
 * Built entirely in CSS: a navy-to-deep-blue gradient carrying a cool blue glow
 * behind the vials and a restrained champagne-gold bloom low and centre. No
 * photographic plate is used, so nothing in the background can carry wording,
 * and the composition scales to any viewport without cropping.
 *
 * The vials themselves are the approved transparent catalogue renders, layered
 * over this by .pg-hero__stage.
 */
.pg-hero {
	background:
		radial-gradient( ellipse 38% 32% at 70% 46%, rgba( 84, 132, 200, 0.18 ) 0%, transparent 68% ),
		radial-gradient( ellipse 54% 26% at 52% 102%, rgba( 212, 175, 55, 0.11 ) 0%, transparent 70% ),
		linear-gradient( 168deg, #14254a 0%, #0f1e3c 54%, #0c1830 100% );
	min-height: 560px;
	overflow: hidden;
	position: relative;
}

/*
 * Styled anchors that take width:100% plus horizontal padding.
 *
 * Anchors are content-box by default (unlike form controls), so without this a
 * full-width link is 100% PLUS its padding and spills off the right edge —
 * caught rendered at 375px, where both hero CTAs overflowed the viewport.
 * Scoped to the affected components rather than a global reset, because the
 * rest of the layout was tuned under content-box and a blanket change would
 * resize things that already measure correctly.
 */
.pg-hero__btn,
.pg-frp__buy,
.pg-drawer__btn,
.pg-pay-dialog__ack {
	box-sizing: border-box;
}

/* The copy column leads: it carries the headline and the primary call to action,
   so it takes the larger share and the vials sit beside it rather than over it. */
.pg-hero__inner {
	align-items: center;
	display: grid;
	gap: clamp( 40px, 5vw, 96px );
	grid-template-columns: 1fr 0.84fr;
	margin: 0 auto;
	max-width: 1440px;
	min-height: 560px;
	padding: var( --wp--preset--spacing--50 ) clamp( 24px, 4vw, 56px );
	position: relative;
	z-index: 2;
}

.pg-hero__copy {
	position: relative;
	text-align: left;
	z-index: 3;
}

.pg-hero__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 0.55rem;
	margin-bottom: var( --wp--preset--spacing--40 );
}

.pg-hero__badge {
	border: 1px solid rgba( 212, 175, 55, 0.4 );
	border-radius: var( --wp--custom--radius--pill );
	color: var( --wp--preset--color--gold );
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	padding: 6px 13px;
	text-transform: uppercase;
}

.pg-hero__title {
	color: var( --wp--preset--color--white );
	font-size: clamp( 2.5rem, 4.6vw, 4.2rem );
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.03;
	margin: 0;
}

.pg-hero__title em {
	color: var( --wp--preset--color--gold );
	font-style: normal;
}

.pg-hero__lead {
	color: var( --wp--preset--color--slate );
	font-size: 1.125rem;
	line-height: 1.65;
	margin-top: var( --wp--preset--spacing--40 );
	max-width: 46ch;
}

.pg-hero__cta {
	display: flex;
	flex-wrap: wrap;
	gap: var( --wp--preset--spacing--30 );
	margin-top: var( --wp--preset--spacing--50 );
}

/* Primary hero button: metallic champagne fill (the ghost variant stays outlined). */
.pg-hero__btn.wp-element-button:not( .pg-hero__btn--ghost ) {
	background-image: var( --pg-gold-metal );
	box-shadow: 0 6px 18px rgba( 212, 175, 55, 0.22 );
	font-size: 1.05rem;
	font-weight: 700;
	letter-spacing: 0.01em;
	padding: 1.05rem 2.4rem;
}

.pg-hero__btn.wp-element-button:not( .pg-hero__btn--ghost ):hover {
	background-image: var( --pg-gold-metal-hover );
}

.pg-hero__btn--ghost {
	align-items: center;
	background: transparent;
	border: 1px solid rgba( 212, 175, 55, 0.55 );
	border-radius: var( --wp--custom--radius--md );
	color: var( --wp--preset--color--white );
	display: inline-flex;
	font-size: 1rem;
	font-weight: 600;
	padding: 1rem 2rem;
	text-decoration: none;
	transition: background var( --pg-duration-base ) var( --pg-easing ), border-color var( --pg-duration-base ) var( --pg-easing );
}

.pg-hero__btn--ghost:hover {
	background: rgba( 212, 175, 55, 0.12 );
	border-color: rgba( 212, 175, 55, 0.8 );
}

.pg-hero__stage {
	align-self: stretch;
	min-height: 520px;
	position: relative;
}

/* A single soft key light behind the group — enough to lift the glass off the
   navy, not enough to read as a decorative glow. */
.pg-hero__glow {
	aspect-ratio: 1;
	background: radial-gradient( circle, rgba( 80, 138, 205, 0.18 ) 0%, rgba( 74, 132, 200, 0.06 ) 44%, transparent 66% );
	border-radius: 50%;
	filter: blur( 12px );
	left: 52%;
	pointer-events: none;
	position: absolute;
	top: 12%;
	transform: translateX( -50% );
	width: 68%;
	z-index: 0;
}

.pg-hero__floor {
	background: radial-gradient( ellipse 56% 100% at 50% 0%, rgba( 130, 160, 210, 0.10 ) 0%, transparent 72% );
	bottom: 7%;
	height: 96px;
	left: 12%;
	pointer-events: none;
	position: absolute;
	right: 6%;
	z-index: 1;
}

/*
 * Vial stage.
 *
 * Three approved catalogue cut-outs, sized as a percentage of the stage so the
 * whole vial is always visible: RTA-3 30 MG leads in front, GLOW 70 MG and
 * KLOW 80 MG sit back on either side, smaller and slightly dimmed so the lead
 * vial stays dominant. Sizes are relative, so the grouping holds at any width.
 */
.pg-hero__vial {
	bottom: 0;
	position: absolute;
	transition: transform 0.35s ease-out;
	will-change: transform;
}

.pg-hero__vial img {
	display: block;
	filter: drop-shadow( 0 18px 20px rgba( 0, 0, 0, 0.42 ) );
	height: 100%;
	object-fit: contain;
	width: auto;
}

.pg-hero__float {
	height: 100%;
	transform-origin: 50% 90%;
	will-change: transform;
}

/*
 * Sizes lifted ~16% on the owner's instruction so the group carries more visual
 * weight against the headline. Anchors stay put — the vials grow leftward and
 * upward from their fixed right/bottom edges, deepening the overlap slightly,
 * which reads as a tighter group rather than three separate bottles.
 */
.pg-hero__vial--left {
	bottom: -2%;
	height: 88%;
	left: 50%;
	transform: translate( var( --pg-parallax-x, 0 ), var( --pg-parallax-y, 0 ) ) translateX( -50% );
	z-index: 3;
}

/* Set back and lifted slightly, so roughly three-quarters of each stays clear of
   the lead vial and both labels remain readable. */
/*
 * Positioned from the CENTRE, not from the right edge.
 *
 * Right-offset percentages cannot produce a symmetric trio here: each vial's box
 * is width:auto from its height, so the centre vial is a third wider than the
 * flanks and equal right-offsets put the two flanks at different distances from
 * it — measured at 304px of overlap on one side against 204px on the other.
 *
 * Both flanks are the same height, therefore the same width, so mirroring them
 * about 50% with equal-and-opposite translateX values makes the composition
 * symmetric at any viewport width.
 */
/*
 * Brought forward on the owner's instruction: the flanks read as too distant.
 *
 * Three levers, all small, because this trio is easy to overbalance:
 *   height 62% -> 72%   the artwork is height-driven inside a contain box, so
 *                       this is what actually makes them bigger
 *   offset 78% -> 72%   of each flank's own width, mirrored about centre, so
 *                       they close the gap without breaking symmetry
 *   dimming eased       (see the depth rule below)
 *
 * The offsets stay equal and opposite about -50%: -50-72 and -50+72. Both
 * flanks share one fixed box width, so mirrored values put them the same
 * distance from centre at any viewport width — the property that took three
 * attempts to get right and must not be broken by nudging one side.
 */
.pg-hero__vial--front {
	bottom: 7%;
	height: 76%;
	left: 50%;
	transform: translate( var( --pg-parallax-x, 0 ), var( --pg-parallax-y, 0 ) ) translateX( -106% );
	z-index: 2;
}

.pg-hero__vial--right {
	bottom: 7%;
	height: 76%;
	left: 50%;
	transform: translate( var( --pg-parallax-x, 0 ), var( --pg-parallax-y, 0 ) ) translateX( 6% );
	z-index: 2;
}

/*
 * NO fixed width on the flanks — deliberately removed.
 *
 * (An earlier comment here claimed the three canvases had different aspect
 * ratios and that a fixed width was the only way to make the mirrored offsets
 * symmetric. Measuring the files disproved it: all three are 1254x1254. The
 * asymmetry it was chasing came from elsewhere.)
 *
 * The source canvases are square (1254x1254) with the vial drawn down the
 * middle: measured, the artwork is only ~45% of the canvas WIDTH but ~96% of its
 * HEIGHT. With object-fit: contain in a box 44% of the stage wide, the contained
 * square was width-bound, so the flank size was pinned by that 44% and raising
 * `height` from 62% to 72% to 82% changed nothing at all. That is why two rounds
 * of "make them bigger" had no visible effect.
 *
 * Dropping the width lets these behave exactly like the lead vial: height drives
 * the square, width follows it. Both flanks share one height, therefore one
 * width, so the mirrored translateX offsets stay symmetric — the property the
 * fixed width was originally introduced to guarantee.
 */

/*
 * The two back vials still read as depth, but less so than before: at
 * brightness 0.9 / opacity 0.95 they receded further than intended once they
 * were also small and widely spaced. Eased to 0.96 / 1 so they sit just behind
 * the lead vial rather than in a different plane. The drop shadow, not the
 * dimming, is now what separates them.
 */
.pg-hero__vial--front img,
.pg-hero__vial--right img {
	filter: drop-shadow( 0 16px 16px rgba( 0, 0, 0, 0.42 ) ) brightness( 0.96 );
	opacity: 1;
}

@media ( prefers-reduced-motion: no-preference ) {
	.pg-hero__vial--left .pg-hero__float {
		animation: pg-hero-float-rta 5.5s ease-in-out infinite;
	}

	.pg-hero__vial--front .pg-hero__float {
		animation: pg-hero-float-glow 6.5s ease-in-out infinite;
	}

	.pg-hero__vial--right .pg-hero__float {
		animation: pg-hero-float-glow 7.2s ease-in-out infinite 0.4s;
	}
}

@keyframes pg-hero-float-rta {
	0%, 100% { transform: translateY( 0 ) rotate( 0deg ); }
	50% { transform: translateY( -6px ) rotate( 0.6deg ); }
}

@keyframes pg-hero-float-glow {
	0%, 100% { transform: translateY( 0 ) rotate( 0deg ); }
	50% { transform: translateY( 5px ) rotate( -0.6deg ); }
}

/* Phones: centred content and one complete RTA-3 below the buttons. */
@media ( max-width: 781px ) {
	.pg-hero {
		background:
			radial-gradient( ellipse 86% 24% at 50% 60%, rgba( 84, 132, 200, 0.18 ) 0%, transparent 72% ),
			radial-gradient( ellipse 118% 22% at 50% 100%, rgba( 212, 175, 55, 0.10 ) 0%, transparent 74% ),
			linear-gradient( 176deg, #14254a 0%, #10203f 60%, #0f1e3c 100% );
		min-height: auto;
	}

	.pg-hero__inner {
		/* Tightened so the headline, CTAs, and the vial group read as one hero
		   and the next section is not a long scroll away. */
		gap: var( --wp--preset--spacing--20 );
		grid-template-columns: 1fr;
		min-height: auto;
		padding: var( --wp--preset--spacing--40 ) 20px var( --wp--preset--spacing--20 );
	}

	.pg-hero__copy {
		text-align: center;
	}

	/* Compress the copy block so the search band below the hero is reachable
	   without a long scroll on a phone. */
	.pg-hero__badge {
		font-size: 0.62rem;
		letter-spacing: 0.1em;
		padding: 5px 10px;
	}

	.pg-hero__badges {
		gap: 0.35rem;
		margin-bottom: var( --wp--preset--spacing--20 );
	}

	.pg-hero__lead {
		font-size: 1rem;
		line-height: 1.5;
		margin-top: var( --wp--preset--spacing--20 );
	}

	.pg-hero__badges,
	.pg-hero__cta {
		justify-content: center;
	}

	.pg-hero__lead {
		margin-left: auto;
		margin-right: auto;
	}

	.pg-hero__cta {
		align-items: center;
		flex-direction: column;
		margin-top: var( --wp--preset--spacing--30 );
	}

	.pg-hero__cta > a {
		display: flex;
		justify-content: center;
		max-width: 340px;
		width: 100%;
	}

	.pg-hero__glow {
		left: 50%;
		top: 4%;
		width: 92%;
	}

	.pg-hero__floor {
		bottom: 2%;
	}

	/*
	 * MOBILE VIAL GROUP — sized from the artwork, not from the image box.
	 *
	 * Every vial PNG is a 1254px SQUARE in which the bottle occupies only ~45%
	 * of the width (measured: 44.8-47.2% across the three files). That is then
	 * multiplied by the per-image normalisation scale --pg-vs (~0.86, set near
	 * the end of this file so every vial lands on a common apparent height),
	 * giving an EFFECTIVE artwork width of ~38.8% of the box and ~30.6% of
	 * transparent padding on each side. A 232px box therefore rendered a bottle
	 * only ~90px wide, which is why one lone vial read as small and sparse.
	 *
	 * Two consequences drive everything below:
	 *
	 * 1. Boxes must be far wider than the vial should appear. Width is set from
	 *    the target artwork size divided by 0.45.
	 * 2. Adjacent boxes may overlap by ~61% of a box width before any artwork
	 *    touches, because that overlap is consumed by the transparent margins
	 *    (30.6% from each neighbour). The negative margins here are set to
	 *    exactly that budget, which is what lets the bottles sit as one tight
	 *    group at full size without ever occluding one another.
	 *
	 * The widths and the negative margin are all in vw and sum to 98vw, so the
	 * group is exactly viewport-wide at every phone size — it cannot overflow,
	 * and it cannot leave a ragged gap. 98 rather than 100 keeps a hair of
	 * clearance in case a scrollbar is present.
	 */
	.pg-hero__stage {
		align-items: flex-end;
		display: flex;
		justify-content: center;
		/* Full-bleed: reclaims the inner 20px padding as artwork width. */
		margin-left: -20px;
		margin-right: -20px;
		/*
		 * Reclaims the transparent band at the top of every vial box.
		 * After the --pg-vs scale the artwork is ~83% of the box height,
		 * centred, leaving ~8.6% of pure transparency above the caps. Pulling
		 * the stage up by 7vw moves the BOXES into the whitespace under the
		 * CTAs while the visible caps land roughly where the box tops were —
		 * the group tightens without any artwork riding over the buttons.
		 *
		 * Only the top band is reclaimed. A matching negative margin-bottom
		 * would let the following section paint over the vial bottoms, which
		 * would read as cropping.
		 */
		/*
		 * No lift. The group used to be pulled up 7vw to tighten a pair of
		 * large overlapping vials against the buttons. The pair below is now
		 * a quarter smaller and sits apart, so that pull would read as the
		 * vials crowding "View COA Library" rather than as a tight group.
		 * Removing it returns 7vw of breathing room under the CTAs, and the
		 * smaller artwork still leaves the hero shorter than before.
		 */
		margin-top: 0;
		min-height: 0;
		order: 2;
		position: relative;
		width: calc( 100% + 40px );
	}

	/* Unpick the desktop absolute placement so flex can lay the group out. */
	.pg-hero__vial {
		bottom: auto;
		flex: 0 0 auto;
		height: auto;
		left: auto;
		position: static;
		right: auto;
		/* Also drops the desktop translateX(-50%) centring and the parallax
		   offset, neither of which applies to a flex row. */
		transform: none;
	}

	.pg-hero__vial img {
		height: auto;
		width: 100%;
	}

	.pg-hero__float {
		height: auto;
	}

	/*
	 * Phones: TWO vials, deliberately.
	 *
	 * Three will not fit at phone widths without shrinking every bottle below
	 * the single vial shown before this change. At 390px a trio leaves ~79px of
	 * artwork each against the 90px shown today; the pair gives 114px and 100px
	 * — larger AND fuller. Three returns at 601px, where there is width for it
	 * without that trade.
	 */
	.pg-hero__vial--front {
		display: none;
	}

	/*
	 * MATCHED PAIR — same box width, so the same apparent bottle size.
	 *
	 * The two were previously 66vw and 75vw, overlapping by 43vw so the larger
	 * RTA-3 sat in front. That made the flagship read bigger, but the bottles
	 * were different heights and touched where the boxes met.
	 *
	 * Both are 52vw now. Because --pg-vs has already normalised every vial to a
	 * common apparent height, equal boxes give equal bottles, and the stage's
	 * align-items: flex-end sits them on a shared baseline.
	 *
	 * Sizing: artwork is ~45% of its box, so 52vw renders ~23.4vw of bottle
	 * against the ~31.7vw the old pair averaged — a reduction of about a
	 * quarter, inside the 20-30% asked for.
	 *
	 * The -20vw margin is what keeps the pair on screen: two 52vw boxes are
	 * 104vw side by side, which would overflow. Pulling them to 84vw total
	 * leaves 8vw of margin each side, and because ~30.6% of each box is
	 * transparent padding the BOTTLES still stand ~11.8vw apart — a clean gap,
	 * not an overlap.
	 */
	.pg-hero__vial--right {
		margin-right: -20vw;
		order: 1;
		/*
		 * Restated per modifier, not inherited from the .pg-hero__vial reset
		 * above. Each vial carries its own desktop translateX for the stagger
		 * — klow 6%, RTA-3 -50% — and those are set on the SAME single-class
		 * specificity as the reset. Measured at 375px they were still in force
		 * on the phone layout, dragging the bottles 184px into one another and
		 * the pair 44px off centre. Overriding on the modifier itself is what
		 * actually clears them.
		 */
		transform: none;
		width: 52vw;
	}

	.pg-hero__vial--left {
		order: 2;
		transform: none;
		width: 52vw;
	}
}

/*
 * Tablets and large phones in landscape: the full trio.
 *
 * At 768px each flank renders ~138px of artwork and the centre ~159px, all
 * comfortably larger than the phone layout, so the third bottle adds to the
 * composition instead of shrinking it. Widths plus the two negative margins
 * sum to 96vw, keeping the group inside the viewport.
 */
@media ( min-width: 601px ) and ( max-width: 781px ) {
	/*
	 * A gentler lift than the phone rule. -7vw is measured against a much wider
	 * viewport here, so it exceeded the transparent band above the caps and the
	 * artwork grazed the CTA by 7px at 768px. -3vw stays inside the band.
	 */
	.pg-hero__stage {
		margin-top: -3vw;
	}

	.pg-hero__vial--front {
		display: block;
		margin-right: -34vw;
		order: 1;
		width: 52vw;
		z-index: 2;
	}

	.pg-hero__vial--left {
		order: 2;
		width: 59vw;
		z-index: 3;
	}

	.pg-hero__vial--right {
		margin-left: -34vw;
		margin-right: 0;
		order: 3;
		width: 52vw;
		z-index: 2;
	}
}

/* -------------------------------------------------------------------------- *
 * Product discovery — search + category chips, directly under the hero
 * -------------------------------------------------------------------------- */

/*
 * A flat navy band, deliberately calmer than the hero: no gradient stack, no
 * glow. The only decoration is a molecular line motif at 4% opacity, which sits
 * behind flat colour and is separated from every piece of text by the field and
 * chip surfaces, so it cannot affect legibility.
 */
.pg-discover {
	background-color: #0e1c38;
	border-bottom: 1px solid rgba( 212, 175, 55, 0.14 );
	border-top: 1px solid rgba( 212, 175, 55, 0.14 );
	position: relative;
}

.pg-discover::before {
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='180' viewBox='0 0 220 180'%3E%3Cg fill='none' stroke='%23D4AF37' stroke-width='1' opacity='0.5'%3E%3Cpath d='M20 40 L72 18 L124 44 L176 22'/%3E%3Cpath d='M72 18 L66 78 L124 44'/%3E%3Cpath d='M66 78 L18 108 L40 158'/%3E%3Cpath d='M66 78 L120 104 L176 88'/%3E%3Cpath d='M120 104 L112 158 L40 158'/%3E%3Cpath d='M176 22 L200 70 L176 88'/%3E%3C/g%3E%3Cg fill='%23D4AF37' opacity='0.75'%3E%3Ccircle cx='20' cy='40' r='2.6'/%3E%3Ccircle cx='72' cy='18' r='2.6'/%3E%3Ccircle cx='124' cy='44' r='2.6'/%3E%3Ccircle cx='176' cy='22' r='2.6'/%3E%3Ccircle cx='66' cy='78' r='2.6'/%3E%3Ccircle cx='18' cy='108' r='2.6'/%3E%3Ccircle cx='40' cy='158' r='2.6'/%3E%3Ccircle cx='120' cy='104' r='2.6'/%3E%3Ccircle cx='176' cy='88' r='2.6'/%3E%3Ccircle cx='112' cy='158' r='2.6'/%3E%3Ccircle cx='200' cy='70' r='2.6'/%3E%3C/g%3E%3C/svg%3E" );
	background-repeat: repeat;
	background-size: 220px 180px;
	content: "";
	inset: 0;
	opacity: 0.04;
	pointer-events: none;
	position: absolute;
}

/* Compact on purpose: this is a utility band between the hero and the featured
   products, not a section in its own right. */
.pg-discover__inner {
	margin: 0 auto;
	max-width: 1320px;
	padding: var( --wp--preset--spacing--40 ) clamp( 20px, 4vw, 56px );
	position: relative;
	z-index: 1;
}

.pg-discover__heading {
	color: var( --wp--preset--color--white );
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	margin: 0 0 var( --wp--preset--spacing--30 );
	text-transform: uppercase;
}

.pg-discover__search {
	display: flex;
	gap: 0.6rem;
	max-width: 760px;
}

.pg-discover__field {
	background: rgba( 8, 15, 30, 0.72 );
	border: 1px solid rgba( 166, 177, 194, 0.32 );
	border-radius: var( --wp--custom--radius--md );
	color: var( --wp--preset--color--white );
	flex: 1 1 auto;
	font-size: 1rem;
	min-width: 0;
	padding: 0.9rem 1.1rem;
	transition: border-color var( --pg-duration-base ) var( --pg-easing );
}

.pg-discover__field::placeholder {
	color: rgba( 166, 177, 194, 0.8 );
}

.pg-discover__field:focus {
	border-color: var( --wp--preset--color--gold );
	outline: none;
}

.pg-discover__submit.wp-element-button {
	background-image: var( --pg-gold-metal );
	flex: 0 0 auto;
	font-weight: 700;
	padding: 0.9rem 1.9rem;
}

.pg-discover__submit.wp-element-button:hover {
	background-image: var( --pg-gold-metal-hover );
}

.pg-discover__cats {
	display: flex;
	flex-wrap: wrap;
	gap: 0.55rem;
	margin-top: var( --wp--preset--spacing--40 );
}

/*
 * Chips read as navigation, not as buttons competing with Add to Cart: outlined
 * slate by default, gold only on hover and for the active category.
 */
.pg-discover__cats .pg-chip {
	align-items: center;
	background: rgba( 8, 15, 30, 0.5 );
	border: 1px solid rgba( 166, 177, 194, 0.3 );
	border-radius: var( --wp--custom--radius--pill );
	color: var( --wp--preset--color--white );
	display: inline-flex;
	font-size: 0.86rem;
	font-weight: 600;
	gap: 0.5rem;
	padding: 0.5rem 1rem;
	text-decoration: none;
	transition: border-color var( --pg-duration-base ) var( --pg-easing ), color var( --pg-duration-base ) var( --pg-easing );
}

.pg-discover__cats .pg-chip:hover,
.pg-discover__cats .pg-chip.is-current {
	border-color: rgba( 212, 175, 55, 0.75 );
	color: var( --wp--preset--color--gold );
}

.pg-discover__cats .pg-chip--all {
	border-color: rgba( 212, 175, 55, 0.5 );
	color: var( --wp--preset--color--gold );
}

.pg-chip__count {
	color: var( --wp--preset--color--slate );
	font-size: 0.74rem;
	font-weight: 600;
}

@media ( max-width: 781px ) {
	.pg-discover__search {
		flex-direction: column;
	}

	.pg-discover__submit.wp-element-button {
		justify-content: center;
		width: 100%;
	}

	/* Chips scroll rather than wrapping into a tall block on a phone. */
	.pg-discover__cats {
		flex-wrap: nowrap;
		margin-inline: -20px;
		overflow-x: auto;
		padding-inline: 20px;
		scrollbar-width: none;
	}

	.pg-discover__cats::-webkit-scrollbar {
		display: none;
	}

	.pg-discover__cats .pg-chip {
		flex: 0 0 auto;
	}
}

/* -------------------------------------------------------------------------- *
 * Featured products
 * -------------------------------------------------------------------------- */

.pg-frp {
	margin: 0 auto;
	max-width: 1320px;
	padding: var( --wp--preset--spacing--80 ) var( --wp--preset--spacing--40 ) var( --wp--preset--spacing--90 );
}

.pg-frp__head {
	margin-bottom: var( --wp--preset--spacing--60 );
}

.pg-frp__title {
	color: var( --wp--preset--color--white );
	font-size: var( --wp--preset--font-size--xxx-large );
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.1;
	margin: var( --wp--preset--spacing--30 ) 0 0;
}

.pg-frp__grid {
	display: grid;
	gap: var( --wp--preset--spacing--50 );
	grid-template-columns: repeat( 3, 1fr );
}

.pg-frp__card {
	background-color: var( --wp--preset--color--charcoal );
	border: var( --wp--custom--border--gold );
	border-radius: var( --wp--custom--radius--card );
	display: flex;
	flex-direction: column;
	overflow: hidden;
	transition: transform var( --pg-duration-base ) var( --pg-easing ), border-color var( --pg-duration-base ) var( --pg-easing ), box-shadow var( --pg-duration-base ) var( --pg-easing );
}

.pg-frp__media {
	background: radial-gradient( 70% 60% at 50% 42%, rgba( 74, 144, 217, 0.12 ), transparent 70% );
	display: block;
	padding: var( --wp--preset--spacing--40 ) var( --wp--preset--spacing--40 ) 0;
}

/* Square box + contain, for the same reason as the product-page gallery: it
   makes every canvas height-constrained so the per-file scale normalises the
   visible vial rather than the canvas. */
.pg-frp__img {
	aspect-ratio: 1;
	display: block;
	height: auto;
	margin: 0 auto;
	max-width: 230px;
	object-fit: contain;
	width: 100%;
}

.pg-frp__body {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	padding: var( --wp--preset--spacing--40 );
}

.pg-frp__name {
	font-size: clamp( 1.35rem, 2vw, 1.5rem );
	font-weight: 600;
	margin: 0;
}

.pg-frp__name a {
	color: var( --wp--preset--color--white );
	text-decoration: none;
}

.pg-frp__name a:hover,
.pg-frp__name a:focus-visible {
	color: var( --wp--preset--color--gold );
}

.pg-frp__strength {
	color: var( --wp--preset--color--gold );
	font-size: var( --wp--preset--font-size--small );
	font-weight: 500;
	letter-spacing: 0.04em;
	margin: 0;
}

.pg-frp__coa {
	font-size: var( --wp--preset--font-size--small );
	font-weight: 600;
	margin: 0;
}

.pg-frp__coa--supplier {
	color: var( --wp--preset--color--gold );
}

.pg-frp__coa--independent {
	color: var( --wp--preset--color--success );
}

.pg-frp__coa--coming_soon,
.pg-frp__coa--varies {
	color: var( --wp--preset--color--slate );
}

.pg-frp__foot {
	align-items: center;
	display: flex;
	gap: var( --wp--preset--spacing--30 );
	justify-content: space-between;
	margin-top: var( --wp--preset--spacing--30 );
}

.pg-frp__price {
	color: var( --wp--preset--color--white );
	font-size: var( --wp--preset--font-size--large );
	font-weight: 700;
}

.pg-frp__price .woocommerce-Price-amount {
	color: inherit;
}

.pg-frp__stock {
	color: var( --wp--preset--color--slate );
	font-size: var( --wp--preset--font-size--small );
}

.pg-frp__btn {
	background: var( --pg-gold-metal );
	border-radius: var( --wp--custom--radius--md );
	color: var( --wp--preset--color--navy );
	font-size: var( --wp--preset--font-size--small );
	font-weight: 700;
	padding: 0.7rem 1.1rem;
	text-decoration: none;
	white-space: nowrap;
}

.pg-frp__btn:hover,
.pg-frp__btn:focus-visible {
	background: #e0bf4a;
	color: var( --wp--preset--color--navy );
}

.pg-frp__all {
	margin-top: var( --wp--preset--spacing--60 );
	text-align: center;
}

/* Restrained hover elevation on pointer devices only. */
@media ( hover: hover ) {
	.pg-frp__card:hover {
		border-color: rgba( 212, 175, 55, 0.7 );
		box-shadow: var( --wp--preset--shadow--raised );
		transform: translateY( -6px );
	}
}

/* Phones: a scroll-snap swipe carousel, one full card with a peek of the next.
   Native scrolling only — it never auto-advances. */
@media ( max-width: 781px ) {
	.pg-frp {
		padding-left: 20px;
		padding-right: 20px;
	}

	.pg-frp__grid {
		display: flex;
		gap: var( --wp--preset--spacing--30 );
		margin: 0 -20px;
		overflow-x: auto;
		padding: 4px 20px var( --wp--preset--spacing--20 );
		scroll-padding-left: 20px;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
	}

	.pg-frp__grid::-webkit-scrollbar {
		display: none;
	}

	.pg-frp__card {
		flex: 0 0 82%;
		scroll-snap-align: start;
	}
}

@keyframes pg-rise {
	from {
		opacity: 0;
		transform: translateY( 24px );
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@supports ( animation-timeline: view() ) {
	@media ( prefers-reduced-motion: no-preference ) {
		.pg-frp__card {
			animation: pg-rise linear both;
			animation-range: entry 2% cover 22%;
			animation-timeline: view();
		}
	}
}

/* -------------------------------------------------------------------------- *
 * FAQ accordion
 * -------------------------------------------------------------------------- */

.pg-accordion {
	background-color: var( --wp--preset--color--charcoal );
	border: var( --wp--custom--border--gold );
	border-radius: var( --wp--custom--radius--md );
	padding: var( --wp--preset--spacing--40 ) var( --wp--preset--spacing--50 );
	transition: border-color var( --pg-duration-base ) var( --pg-easing );
}

.pg-accordion:hover,
.pg-accordion[ open ] {
	border: var( --wp--custom--border--gold-hover );
}

.pg-accordion summary {
	align-items: center;
	color: var( --wp--preset--color--white );
	cursor: pointer;
	display: flex;
	font-size: var( --wp--preset--font-size--large );
	font-weight: 600;
	gap: var( --wp--preset--spacing--40 );
	justify-content: space-between;
	/* Hide the native disclosure triangle in favour of the gold marker below. */
	list-style: none;
}

.pg-accordion summary::-webkit-details-marker {
	display: none;
}

/*
 * Gold plus/minus marker, matching the icon set's geometry (24px grid, 1.5px
 * stroke). Inlined as a data URI because a pseudo-element cannot call the icon
 * renderer.
 */
.pg-accordion summary::after {
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D4AF37' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E" );
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	content: "";
	flex-shrink: 0;
	height: 20px;
	width: 20px;
}

.pg-accordion[ open ] summary::after {
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D4AF37' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E" );
}

.pg-accordion p {
	color: var( --wp--preset--color--slate );
	margin: var( --wp--preset--spacing--30 ) 0 0;
	max-width: 68ch;
}

/* -------------------------------------------------------------------------- *
 * Search and filter bar
 *
 * Shared by the Shop page and both document libraries.
 * -------------------------------------------------------------------------- */

.pg-shop-filters {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var( --wp--preset--spacing--40 );
	justify-content: space-between;
	margin-bottom: var( --wp--preset--spacing--50 );
}

/* Sort control: quiet, outlined, matching the search field's height and radius. */
.pg-shop-filters__sort {
	align-items: center;
	display: flex;
	gap: 0.6rem;
}

.pg-shop-filters__sort-label {
	color: var( --wp--preset--color--slate );
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.pg-shop-filters__sort select {
	background: rgba( 255, 255, 255, 0.04 );
	border: 1px solid rgba( 212, 175, 55, 0.35 );
	border-radius: var( --wp--custom--radius--md );
	color: var( --wp--preset--color--white );
	cursor: pointer;
	font-size: 0.95rem;
	min-height: 44px;
	padding: 0.45rem 0.9rem;
}

.pg-shop-filters__sort select:focus-visible {
	border-color: var( --wp--preset--color--gold );
	outline: 2px solid rgba( 212, 175, 55, 0.5 );
	outline-offset: 1px;
}

/* Options render on the OS sheet, which is light — navy text keeps them readable. */
.pg-shop-filters__sort option {
	color: #16223a;
}

.pg-shop-filters__sort-apply {
	background: transparent;
	border: 1px solid rgba( 212, 175, 55, 0.45 );
	border-radius: var( --wp--custom--radius--md );
	color: var( --wp--preset--color--white );
	cursor: pointer;
	min-height: 44px;
	padding: 0.45rem 1rem;
}

.pg-shop-filters__search {
	display: flex;
	flex: 1 1 22rem;
	gap: var( --wp--preset--spacing--20 );
	max-width: 32rem;
}

.pg-shop-filters__search input[ type="search" ] {
	flex: 1;
}

.pg-shop-filters__search button {
	cursor: pointer;
	flex-shrink: 0;
}

.pg-shop-filters__cats {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var( --wp--preset--spacing--20 );
}

/* Category chip: the badge shape, made interactive. */
.pg-chip {
	background-color: transparent;
	border: var( --wp--custom--border--subtle );
	border-radius: var( --wp--custom--radius--pill );
	color: var( --wp--preset--color--slate );
	display: inline-flex;
	font-size: var( --wp--preset--font-size--small );
	padding: 0.5rem 1rem;
	text-decoration: none;
	transition:
		border-color var( --pg-duration-base ) var( --pg-easing ),
		color var( --pg-duration-base ) var( --pg-easing );
}

.pg-chip:hover,
.pg-chip:focus-visible {
	border-color: var( --wp--preset--color--gold );
	color: var( --wp--preset--color--white );
}

.pg-chip.is-current {
	border-color: var( --wp--preset--color--gold );
	color: var( --wp--preset--color--gold );
}

/* -------------------------------------------------------------------------- *
 * Document libraries (COA and SDS)
 * -------------------------------------------------------------------------- */

.pg-library__list {
	display: grid;
	gap: var( --wp--preset--spacing--30 );
	list-style: none;
	margin: 0;
	padding: 0;
}

.pg-library__item {
	align-items: flex-start;
	display: flex;
	flex-wrap: wrap;
	gap: var( --wp--preset--spacing--40 );
	justify-content: space-between;
	padding: var( --wp--preset--spacing--40 ) var( --wp--preset--spacing--50 );
}

.pg-library__info {
	align-items: flex-start;
	display: flex;
	flex: 1 1 16rem;
	gap: var( --wp--preset--spacing--30 );
}

.pg-library__detail {
	flex: 1;
	min-width: 0;
}

/* Variable products: each strength / volume listed with its own status. */
.pg-library__variations {
	display: grid;
	gap: 0.6rem;
	margin-top: 0.7rem;
}

.pg-library__variation {
	align-items: center;
	border-top: 1px solid rgba( 255, 255, 255, 0.08 );
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1rem;
	justify-content: space-between;
	padding-top: 0.6rem;
}

.pg-library__variation:first-child {
	border-top: 0;
	padding-top: 0;
}

.pg-library__variation-head {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}

.pg-library__option {
	color: var( --wp--preset--color--white );
	font-weight: 600;
}

.pg-library__lot {
	color: var( --wp--preset--color--slate );
	font-size: var( --wp--preset--font-size--small );
	margin: 0;
}

/*
 * No flex-shrink: 0 here. It let the status block keep its full content width
 * (status text + "View COA" button = 352px) inside a 217px row, so on a phone
 * the button hung off the right of the page and the whole document scrolled
 * sideways. Allowing it to shrink is what lets its own flex-wrap take effect.
 */
.pg-library__status {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	min-width: 0;
}

.pg-library__name {
	color: var( --wp--preset--color--white );
	font-size: var( --wp--preset--font-size--large );
	font-weight: 600;
	margin: 0;
}

.pg-library__type {
	color: var( --wp--preset--color--slate );
	font-size: var( --wp--preset--font-size--small );
	margin: 0.125rem 0 0;
}

.pg-library__download {
	align-items: center;
	border: 1px solid var( --wp--preset--color--gold );
	border-radius: var( --wp--custom--radius--md );
	box-sizing: border-box;
	color: var( --wp--preset--color--white );
	display: inline-flex;
	flex-shrink: 0;
	font-size: var( --wp--preset--font-size--small );
	font-weight: 600;
	gap: 0.5rem;
	justify-content: center;
	min-height: 44px;
	padding: 0.6rem 1.25rem;
	text-decoration: none;
	transition:
		background-color var( --pg-duration-base ) var( --pg-easing ),
		color var( --pg-duration-base ) var( --pg-easing );
}

.pg-library__download:hover,
.pg-library__download:focus-visible {
	background-color: rgba( 212, 175, 55, 0.12 );
	color: var( --wp--preset--color--gold );
}

/* A product whose document has not been uploaded yet. */
.pg-library__pending {
	border-color: rgba( 166, 177, 194, 0.35 );
	color: var( --wp--preset--color--slate );
	flex-shrink: 0;
}

.pg-library__empty {
	color: var( --wp--preset--color--slate );
	padding: var( --wp--preset--spacing--70 ) 0;
	text-align: center;
}

/*
 * On a phone there is no room for the option name and the COA status side by
 * side. Give the status its own full-width line so the download button sits
 * under the option it belongs to instead of being squeezed against the edge.
 */
@media ( max-width: 781px ) {

	.pg-library__variation {
		align-items: flex-start;
		flex-direction: column;
	}

	.pg-library__status {
		justify-content: flex-start;
		width: 100%;
	}

	.pg-library__download {
		max-width: 100%;
	}
}

/* -------------------------------------------------------------------------- *
 * About: commitments
 * -------------------------------------------------------------------------- */

.pg-commitments {
	display: grid;
	gap: var( --wp--preset--spacing--40 );
	grid-template-columns: repeat( auto-fit, minmax( 16rem, 1fr ) );
}

.pg-commitment__title {
	color: var( --wp--preset--color--white );
	font-size: var( --wp--preset--font-size--large );
	font-weight: 600;
	margin: var( --wp--preset--spacing--30 ) 0 0;
}

.pg-commitment__body {
	color: var( --wp--preset--color--slate );
	font-size: var( --wp--preset--font-size--small );
	margin: 0.5rem 0 0;
}

/* -------------------------------------------------------------------------- *
 * Utilities
 * -------------------------------------------------------------------------- */

/*
 * Visually hidden but available to screen readers. Used for labels whose meaning
 * is already carried visually by an icon or placeholder.
 */
.screen-reader-text {
	border: 0;
	clip-path: inset( 50% );
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

/* -------------------------------------------------------------------------- *
 * Skip link
 * -------------------------------------------------------------------------- */

.skip-link {
	background-color: var( --wp--preset--color--gold );
	color: var( --wp--preset--color--navy );
	font-weight: 600;
	left: 50%;
	padding: 0.75rem 1.25rem;
	position: absolute;
	transform: translateX( -50% );
}

/* -------------------------------------------------------------------------- *
 * Why value cards — a tidy grid, two-up on phones, one-up on the narrowest.
 * -------------------------------------------------------------------------- */
.pg-why__cards {
	display: grid;
	gap: var( --wp--preset--spacing--40 );
	grid-template-columns: 1fr 1fr;
}

.pg-why__card {
	height: 100%;
}

.pg-why__card-title {
	color: var( --wp--preset--color--white );
	font-size: var( --wp--preset--font-size--x-large );
	font-weight: 700;
	margin: 0 0 var( --wp--preset--spacing--30 );
}

@media ( max-width: 781px ) {
	.pg-why__cards {
		gap: var( --wp--preset--spacing--30 );
	}

	.pg-why__card {
		padding: var( --wp--preset--spacing--40 );
	}

	.pg-why__card-title {
		font-size: var( --wp--preset--font-size--large );
		margin-bottom: var( --wp--preset--spacing--20 );
	}

	.pg-why__card p {
		font-size: var( --wp--preset--font-size--small );
	}
}

@media ( max-width: 350px ) {
	.pg-why__cards {
		grid-template-columns: 1fr;
	}
}

/* -------------------------------------------------------------------------- *
 * Mobile: footer accordion + documentation buttons
 * -------------------------------------------------------------------------- */
@media ( max-width: 781px ) {
	.pg-footer__group {
		border-top: var( --wp--custom--border--subtle );
		padding-top: var( --wp--preset--spacing--20 );
	}

	.pg-footer__toggle {
		align-items: center;
		cursor: pointer;
		display: flex;
		justify-content: space-between;
		margin: 0;
		min-height: 48px;
		user-select: none;
	}

	.pg-footer__toggle::after {
		color: var( --wp--preset--color--gold );
		content: "+";
		font-size: 1.5rem;
		font-weight: 400;
		line-height: 1;
	}

	.pg-footer__toggle[ aria-expanded="true" ]::after {
		content: "\2013";
	}

	.pg-documentation .wp-block-button {
		width: 100%;
	}

	.pg-documentation .wp-block-button .wp-block-button__link {
		display: block;
		text-align: center;
		width: 100%;
	}
}

/* -------------------------------------------------------------------------- *
 * General: no horizontal overflow; one consistent visible focus ring.
 * -------------------------------------------------------------------------- */
body {
	overflow-x: clip;
}

a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.wp-element-button:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var( --wp--preset--color--gold );
	outline-offset: 2px;
}

/* ========================================================================== *
 * Section themes — real light / dark contrast so sections do not merge.
 * Champagne-gold (#9c7b2e) for accents on light grounds; brand gold on dark.
 * Consistent vertical rhythm: ~56–72px mobile, ~90–120px desktop.
 * ========================================================================== */
/*
 * One rhythm for every section — trimmed ~25–30% from the original
 * clamp(56px, 9vw, 120px) on the owner's instruction: the page read as
 * unnecessarily long, and the height was empty navy, not content.
 */
.pg-why,
.pg-frp,
.pg-documentation,
.pg-faq,
.pg-cta {
	padding-bottom: clamp( 48px, 7vw, 88px );
	padding-top: clamp( 48px, 7vw, 88px );
}

/* Documentation and the closing CTA are short sections — two cards and a pair of
   buttons. They carry the deepest cut (~40%) because they had the most air. */
.pg-documentation,
.pg-cta {
	padding-bottom: clamp( 40px, 5.5vw, 72px );
	padding-top: clamp( 40px, 5.5vw, 72px );
}

/* --- WHY — warm ivory, navy text, white cards, small gold icons --- */
.pg-why {
	background: #f6f3ec;
	color: #16223a;
}

.pg-why :is( h2, h3, .wp-block-heading, .pg-why__card-title ) {
	color: #16223a;
}

.pg-why p {
	color: #4b566d;
}

.pg-why .is-style-pg-eyebrow {
	color: #9c7b2e;
}

.pg-why__card,
.pg-why .pg-card {
	background: #ffffff;
	border: 1px solid rgba( 22, 34, 58, 0.08 );
	box-shadow: 0 6px 22px rgba( 22, 34, 58, 0.06 );
	color: #16223a;
}

.pg-why__icon {
	color: #9c7b2e;
	display: inline-flex;
	margin-bottom: 0.6rem;
}

.pg-why .wp-block-button.is-style-outline .wp-block-button__link {
	border-color: #9c7b2e;
	color: #16223a;
}

.pg-why .wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: rgba( 156, 123, 46, 0.1 );
	color: #16223a;
}

@media ( hover: hover ) {
	.pg-why__card:hover,
	.pg-why .pg-card:hover {
		border-color: rgba( 156, 123, 46, 0.5 );
		box-shadow: 0 12px 30px rgba( 22, 34, 58, 0.1 );
	}
}

/* --- FEATURED — deep navy-to-sapphire, glass cards, gold borders --- */
.pg-frp {
	background: linear-gradient( 160deg, #10224a 0%, #13284d 45%, #0b1730 100% );
}

.pg-frp__intro {
	color: var( --wp--preset--color--slate );
	margin: var( --wp--preset--spacing--30 ) 0 0;
	max-width: 60ch;
}

.pg-frp__card {
	-webkit-backdrop-filter: blur( 8px );
	backdrop-filter: blur( 8px );
	background: rgba( 255, 255, 255, 0.05 );
	border: 1px solid rgba( 212, 175, 55, 0.28 );
	box-shadow: 0 10px 30px rgba( 2, 6, 16, 0.4 );
}

.pg-frp__media {
	background: radial-gradient( 62% 46% at 50% 82%, rgba( 0, 0, 0, 0.45 ) 0%, transparent 72% ),
		radial-gradient( 70% 60% at 50% 40%, rgba( 74, 144, 217, 0.16 ), transparent 72% );
}

.pg-frp__img {
	filter: drop-shadow( 0 14px 14px rgba( 0, 0, 0, 0.45 ) );
	max-width: 270px;
}

/* Tablet: two cards per row where the grid has room. */
@media ( min-width: 782px ) and ( max-width: 1024px ) {
	.pg-frp__grid {
		grid-template-columns: repeat( 2, 1fr );
	}
}

/* --- DOCUMENTATION — very light gray, navy text, white cards --- */
.pg-documentation {
	background: #f8f9fb;
	color: #16223a;
}

.pg-documentation :is( h2, h3, .wp-block-heading ) {
	color: #16223a;
}

.pg-documentation p {
	color: #4b566d;
}

.pg-documentation .is-style-pg-eyebrow {
	color: #9c7b2e;
}

.pg-documentation .is-style-pg-card,
.pg-documentation .pg-card {
	background: #ffffff;
	border: 1px solid rgba( 22, 34, 58, 0.08 );
	box-shadow: 0 6px 22px rgba( 22, 34, 58, 0.06 );
	color: #16223a;
}

.pg-documentation .pg-icon {
	color: #9c7b2e;
}

/* --- FAQ — soft blue-gray, navy text, white accordion cards --- */
.pg-faq {
	background: #eaf0f6;
	color: #16223a;
}

.pg-faq :is( h2, .wp-block-heading ) {
	color: #16223a;
}

.pg-faq .is-style-pg-eyebrow {
	color: #9c7b2e;
}

.pg-faq .pg-accordion {
	background: #ffffff;
	border: 1px solid rgba( 22, 34, 58, 0.1 );
}

.pg-faq .pg-accordion summary {
	color: #16223a;
}

.pg-faq .pg-accordion[ open ],
.pg-faq .pg-accordion:hover {
	border-color: rgba( 156, 123, 46, 0.5 );
}

.pg-faq .pg-accordion p {
	color: #4b566d;
}

.pg-faq .wp-block-button.is-style-outline .wp-block-button__link {
	border-color: #9c7b2e;
	color: #16223a;
}

.pg-faq .wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: rgba( 156, 123, 46, 0.1 );
	color: #16223a;
}

/* --- FINAL CTA — dark navy with a restrained gold glow --- */
.pg-cta {
	overflow: hidden;
	position: relative;
}

.pg-cta::before {
	background: radial-gradient( 46% 60% at 50% 28%, rgba( 212, 175, 55, 0.14 ) 0%, transparent 62% );
	content: "";
	inset: 0;
	pointer-events: none;
	position: absolute;
	z-index: 0;
}

.pg-cta > * {
	position: relative;
	z-index: 1;
}

/* ---- v3.1 refinements ---- */

/* Compact Why cards: ~150–175px tall, tighter padding and gaps.
   (Vertical padding now comes from the shared section rhythm above.) */
.pg-why__cards {
	gap: 16px;
}

.pg-why__card {
	padding: 24px;
}

.pg-why__card-title {
	font-size: 1.05rem;
	margin-bottom: 6px;
}

.pg-why__card p {
	font-size: 0.92rem;
	line-height: 1.5;
}

.pg-why__icon {
	margin-bottom: 0.4rem;
}

@media ( max-width: 781px ) {
	.pg-why__cards {
		gap: 12px;
	}

	.pg-why__card {
		padding: 18px;
	}
}

/* Featured: a compact, fixed image stage — every vial contains to the same
   height and bottom-aligns — with the purchase control on the bottom edge and
   the name / price / COA stacked below. */
/* Layout only. The ivory panel lives on .pg-frp__media-link (the image area);
   the purchase control now sits at the end of the card body, not in here. */
.pg-frp__media {
	align-items: center;
	display: flex;
	flex-direction: column;
	overflow: visible;
	padding: 14px 12px 16px;
	position: relative;
}

.pg-frp__media-link {
	align-items: center;
	display: flex;
	height: 300px;
	justify-content: center;
	width: 100%;
}

.pg-frp__img {
	height: 100%;
	margin: 0 auto;
	max-width: 100%;
	object-fit: contain;
	object-position: center;
	position: relative;
	width: auto;
	z-index: 1;
}

/*
 * The purchase button closes the card body, full width, after name / price /
 * COA. It used to float over the image's bottom edge; the owner ruled that
 * placement out, and a uniform full-width button also equalises card heights.
 */
.pg-frp__buy {
	background: var( --pg-gold-metal );
	border-radius: var( --wp--custom--radius--pill );
	color: var( --wp--preset--color--navy );
	display: block;
	font-size: var( --wp--preset--font-size--small );
	font-weight: 700;
	margin-top: 0.85rem;
	padding: 0.7rem 1.4rem;
	position: relative;
	text-align: center;
	text-decoration: none;
	transition: background var( --pg-duration-base ) var( --pg-easing ), transform var( --pg-duration-base ) var( --pg-easing );
	white-space: nowrap;
	width: 100%;
	z-index: 2;
}

.pg-frp__buy:hover,
.pg-frp__buy:focus-visible {
	background: var( --pg-gold-metal-hover );
	color: var( --wp--preset--color--navy );
	transform: translateY( -2px );
}

.pg-frp__buy.loading,
.pg-frp__buy.added {
	opacity: 0.85;
}

.pg-frp__buy--ghost {
	background: transparent;
	border: 1px solid rgba( 212, 175, 55, 0.6 );
	color: var( --wp--preset--color--gold );
}

.pg-frp__buy--ghost:hover,
.pg-frp__buy--ghost:focus-visible {
	background: rgba( 212, 175, 55, 0.12 );
	color: var( --wp--preset--color--gold );
	transform: translateY( -2px );
}

.pg-frp__body {
	align-items: flex-start;
	flex: 1;
	gap: 0.3rem;
	padding: 0.9rem 1rem 1.1rem;
	text-align: left;
}

/* The button ranks below price and COA in the body's stacking order; pin it to
   the bottom so all six cards keep a level baseline whatever their text wraps. */
.pg-frp__body {
	display: flex;
	flex-direction: column;
}

.pg-frp__body .pg-frp__buy {
	margin-top: auto;
	padding-top: 0.7rem;
}

.pg-frp__body .pg-frp__coa {
	margin-bottom: 0.85rem;
}

/* WooCommerce appends a "View cart" link after an AJAX add — keep it tidy. */
.pg-frp__body .added_to_cart,
.pg-frp__media .added_to_cart {
	color: var( --wp--preset--color--gold );
	font-size: var( --wp--preset--font-size--small );
	font-weight: 600;
	margin-top: 8px;
	white-space: nowrap;
}

/* -------------------------------------------------------------------------- *
 * FAQ — search + accordion categories
 * -------------------------------------------------------------------------- */

.pg-faq-section {
	background: #f8f9fb;
	color: #16223a;
}

.pg-faq__search {
	margin: 0 auto var( --wp--preset--spacing--60 );
	max-width: 620px;
}

.pg-faq__label {
	color: #16223a;
	display: block;
	font-size: 0.85rem;
	font-weight: 600;
	margin-bottom: 0.35rem;
}

/*
 * Scoped with the block class so specificity is (0,2,0). The global input skin
 * in components.css is written for navy surfaces and selects on
 * input[type="search"] — (0,1,1) — which outranks a bare class, so this rule was
 * losing and the search box rendered as a heavy navy block among white cards.
 */
.pg-faq .pg-faq__input {
	background: #fff;
	border: 1px solid rgba( 22, 34, 58, 0.28 );
	border-radius: var( --wp--custom--radius--md );
	color: #16223a;
	font-size: 1rem;
	min-height: 48px;
	padding: 0.7rem 1rem;
	width: 100%;
}

.pg-faq .pg-faq__input:focus {
	border-color: var( --pg-gold-dark );
	outline: 2px solid var( --pg-gold-dark );
	outline-offset: 1px;
}

.pg-faq__count {
	color: #56637d;
	font-size: 0.82rem;
	margin: 0.4rem 0 0;
	min-height: 1.2em;
}

.pg-faq__empty {
	background: #fff;
	border: 1px solid rgba( 22, 34, 58, 0.12 );
	border-radius: var( --wp--custom--radius--md );
	color: #3d4a63;
	margin: 0 auto var( --wp--preset--spacing--50 );
	max-width: 620px;
	padding: 1rem;
	text-align: center;
}

/* Two columns of categories on desktop, one on phones. */
.pg-faq__cats {
	column-gap: var( --wp--preset--spacing--60 );
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	row-gap: var( --wp--preset--spacing--60 );
}

/*
 * Each category is a premium disclosure card: four calm cards on first load,
 * question accordions revealed inside on demand. align-self keeps a closed
 * card from stretching to the height of an open neighbour in the same grid row.
 */
.pg-faq__cat {
	align-self: start;
	background: #fff;
	border: 1px solid rgba( 22, 34, 58, 0.12 );
	border-radius: var( --wp--custom--radius--card );
	box-shadow: 0 6px 18px rgba( 2, 6, 16, 0.05 );
	overflow: hidden;
	transition: border-color var( --pg-duration-base ) var( --pg-easing );
}

.pg-faq__cat:has( .pg-faq__cat-btn[aria-expanded="true"] ) {
	border-color: rgba( 212, 175, 55, 0.55 );
}

.pg-faq__cat-title {
	margin: 0;
}

.pg-faq__cat-btn {
	align-items: center;
	background: transparent;
	border: 0;
	color: #16223a;
	cursor: pointer;
	display: flex;
	font-family: inherit;
	font-size: 1.15rem;
	font-weight: 700;
	gap: 0.75rem;
	justify-content: space-between;
	line-height: 1.3;
	min-height: 64px;
	padding: 1.05rem 1.25rem;
	text-align: left;
	width: 100%;
}

.pg-faq__cat-btn:hover .pg-faq__cat-text,
.pg-faq__cat-btn:focus-visible .pg-faq__cat-text {
	color: #8a6a16;
}

.pg-faq__cat-btn:focus-visible {
	outline: 2px solid #a67c22;
	outline-offset: -2px;
}

.pg-faq__cat-text {
	flex: 1 1 auto;
	transition: color var( --pg-duration-base ) var( --pg-easing );
}

.pg-faq__cat-count {
	color: #5a6478;
	flex-shrink: 0;
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.pg-faq__items {
	display: grid;
	gap: 0.6rem;
	padding: 0 1rem 1rem;
}

/*
 * A class selector beats the user-agent's [hidden] { display: none }, so the
 * rule above kept every collapsed category's questions on screen — the whole
 * FAQ was visible at once despite aria-expanded="false". Restate it here so the
 * hidden attribute stays the single source of truth for open/closed state.
 */
.pg-faq__items[ hidden ],
.pg-faq__a[ hidden ] {
	display: none;
}

.pg-faq__item {
	background: #fff;
	border: 1px solid rgba( 22, 34, 58, 0.12 );
	border-radius: var( --wp--custom--radius--md );
	overflow: hidden;
}

.pg-faq__q-wrap {
	margin: 0;
}

.pg-faq__q {
	align-items: center;
	background: transparent;
	border: 0;
	color: #16223a;
	cursor: pointer;
	display: flex;
	font-family: inherit;
	font-size: 0.95rem;
	font-weight: 600;
	gap: 0.75rem;
	justify-content: space-between;
	line-height: 1.4;
	min-height: 44px;
	padding: 0.85rem 1rem;
	text-align: left;
	width: 100%;
}

.pg-faq__q:hover {
	background: rgba( 212, 175, 55, 0.08 );
}

.pg-faq__q:focus-visible {
	outline: 2px solid var( --pg-gold-dark );
	outline-offset: -2px;
}

/* Plus/minus affordance drawn in CSS. */
.pg-faq__icon {
	flex: 0 0 auto;
	height: 14px;
	position: relative;
	width: 14px;
}

.pg-faq__icon::before,
.pg-faq__icon::after {
	background: var( --pg-gold-dark );
	content: "";
	position: absolute;
	transition: transform var( --pg-duration-base ) var( --pg-easing ), opacity var( --pg-duration-base ) var( --pg-easing );
}

.pg-faq__icon::before {
	height: 2px;
	left: 0;
	top: 6px;
	width: 14px;
}

.pg-faq__icon::after {
	height: 14px;
	left: 6px;
	top: 0;
	width: 2px;
}

.pg-faq__q[ aria-expanded="true" ] .pg-faq__icon::after {
	opacity: 0;
	transform: rotate( 90deg );
}

.pg-faq__a {
	border-top: 1px solid rgba( 22, 34, 58, 0.1 );
	color: #3d4a63;
	font-size: 0.9rem;
	line-height: 1.65;
	padding: 0.85rem 1rem 1rem;
}

.pg-faq__a p {
	margin: 0;
}

@media ( prefers-reduced-motion: reduce ) {
	.pg-faq__icon::before,
	.pg-faq__icon::after {
		transition: none;
	}
}

@media ( max-width: 781px ) {
	.pg-faq__cats {
		grid-template-columns: minmax( 0, 1fr );
	}
}

/* -------------------------------------------------------------------------- *
 * Contact page: quick cards + support accordions
 * -------------------------------------------------------------------------- */

.pg-contact-body {
	background: #f8f9fb;
	color: #16223a;
}

.pg-quick-cards {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	margin-bottom: var( --wp--preset--spacing--70 );
}

.pg-quick-card {
	background: #fff;
	border: 1px solid rgba( 22, 34, 58, 0.12 );
	border-radius: var( --wp--custom--radius--card );
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	min-height: 44px;
	padding: 1.15rem;
	text-decoration: none;
	transition: border-color var( --pg-duration-base ) var( --pg-easing ), transform var( --pg-duration-base ) var( --pg-easing );
}

.pg-quick-card:hover,
.pg-quick-card:focus-visible {
	border-color: var( --pg-gold );
	transform: translateY( -3px );
}

.pg-quick-card__title {
	color: #16223a;
	font-size: 1rem;
	font-weight: 700;
}

.pg-quick-card__text {
	color: #56637d;
	font-size: 0.86rem;
	line-height: 1.5;
}

.pg-quick-card__cta {
	color: var( --pg-gold-dark );
	font-size: 0.84rem;
	font-weight: 700;
	margin-top: 0.35rem;
}

.pg-support-info {
	margin-bottom: var( --wp--preset--spacing--70 );
}

.pg-support-info__title {
	color: #16223a;
	font-size: 1.25rem;
	font-weight: 700;
	margin: 0 0 0.85rem;
}

.pg-support-info__item {
	background: #fff;
	border: 1px solid rgba( 22, 34, 58, 0.12 );
	border-radius: var( --wp--custom--radius--md );
	color: #3d4a63;
	margin-bottom: 0.6rem;
	padding: 0.85rem 1rem;
}

.pg-support-info__item summary {
	color: #16223a;
	cursor: pointer;
	font-weight: 600;
	min-height: 44px;
	padding: 0.5rem 0;
}

.pg-support-info__item summary:focus-visible {
	outline: 2px solid var( --pg-gold-dark );
	outline-offset: 2px;
}

.pg-support-info__item p {
	font-size: 0.9rem;
	line-height: 1.6;
	margin: 0.5rem 0 0;
}

.pg-field__hint {
	color: #56637d;
	display: inline-block;
	font-size: 0.78rem;
	font-weight: 400;
}

@media ( max-width: 781px ) {
	.pg-quick-cards {
		grid-template-columns: minmax( 0, 1fr );
	}
}

/* -------------------------------------------------------------------------- *
 * Newsletter
 * -------------------------------------------------------------------------- */

.pg-newsletter {
	color: var( --wp--preset--color--white );
	margin: 0 auto;
	max-width: 620px;
	text-align: center;
}

.pg-newsletter__title {
	color: var( --wp--preset--color--white );
	font-size: clamp( 1.4rem, 3vw, 1.9rem );
	font-weight: 700;
	margin: 0;
}

.pg-newsletter__lead {
	color: var( --wp--preset--color--slate );
	margin: 0.5rem 0 1.25rem;
}

.pg-newsletter__form {
	display: grid;
	gap: 0.7rem;
	text-align: left;
}

.pg-newsletter__field label {
	color: var( --wp--preset--color--slate );
	display: block;
	font-size: 0.82rem;
	margin-bottom: 0.25rem;
}

.pg-newsletter__field input {
	background: #fff;
	border: 1px solid rgba( 255, 255, 255, 0.25 );
	border-radius: var( --wp--custom--radius--md );
	color: #16223a;
	min-height: 48px;
	padding: 0.65rem 0.9rem;
	width: 100%;
}

.pg-newsletter__field input:focus {
	outline: 2px solid var( --pg-gold );
	outline-offset: 1px;
}

.pg-newsletter .pg-check__text {
	color: var( --wp--preset--color--slate );
	font-size: 0.8rem;
}

.pg-newsletter__btn {
	background-image: var( --pg-gold-metal );
	border: 1px solid var( --pg-gold-dark );
	border-radius: var( --wp--custom--radius--md );
	color: #16223a;
	cursor: pointer;
	font-size: 0.95rem;
	font-weight: 700;
	min-height: 48px;
	padding: 0.7rem 1.4rem;
}

.pg-newsletter__btn:hover {
	background-image: var( --pg-gold-metal-hover );
}

.pg-newsletter__fine {
	color: var( --wp--preset--color--slate );
	font-size: 0.75rem;
	margin: 0;
}

.pg-newsletter__fine a {
	color: var( --pg-gold-hi );
}

.pg-newsletter__msg {
	border-radius: var( --wp--custom--radius--md );
	font-size: 0.86rem;
	margin: 0 0 0.9rem;
	padding: 0.7rem 0.9rem;
	text-align: left;
}

.pg-newsletter__msg--ok {
	background: rgba( 95, 191, 143, 0.16 );
	color: #b9ecd4;
}

.pg-newsletter__msg--pending,
.pg-newsletter__msg--error {
	background: rgba( 212, 175, 55, 0.14 );
	color: var( --pg-gold-hi );
}

.pg-newsletter__admin {
	background: rgba( 176, 58, 58, 0.14 );
	border-radius: var( --wp--custom--radius--md );
	color: #f0b4b4;
	font-size: 0.8rem;
	margin: 0 0 0.9rem;
	padding: 0.6rem 0.8rem;
	text-align: left;
}

/* Compact variant used in the footer. */
.pg-newsletter--compact {
	margin: 0;
	max-width: none;
	text-align: left;
}

.pg-newsletter--compact .pg-newsletter__title {
	font-size: 0.95rem;
	font-weight: 700;
	margin-bottom: 0.6rem;
}

.pg-newsletter--compact .pg-newsletter__btn {
	min-height: 44px;
}

/* -------------------------------------------------------------------------- *
 * Global footer
 * -------------------------------------------------------------------------- */

.pg-footer {
	background: #0b1226;
	border-top: 1px solid rgba( 212, 175, 55, 0.28 );
	color: var( --wp--preset--color--slate );
	padding: var( --wp--preset--spacing--80 ) clamp( 20px, 4vw, 56px ) var( --wp--preset--spacing--50 );
}

.pg-footer__inner {
	display: grid;
	gap: var( --wp--preset--spacing--50 );
	grid-template-columns: 1.6fr 1fr 1fr 1fr 1.4fr;
	margin: 0 auto;
	max-width: 1320px;
}

.pg-footer__wordmark {
	color: var( --wp--preset--color--white );
	font-weight: 700;
	letter-spacing: 0.06em;
	margin: 0 0 0.6rem;
}

.pg-footer__tagline {
	font-size: 0.85rem;
	line-height: 1.6;
	margin: 0.6rem 0 0;
	max-width: 34ch;
}

.pg-footer__hours {
	font-size: 0.8rem;
	margin: 0.6rem 0 0;
}

.pg-footer__hours strong {
	color: var( --wp--preset--color--white );
}

.pg-footer__social {
	display: flex;
	flex-wrap: wrap;
	gap: 0.9rem;
	list-style: none;
	margin: 0.9rem 0 0;
	padding: 0;
}

.pg-footer__social a {
	color: var( --pg-gold-hi );
	font-size: 0.82rem;
	text-decoration: none;
}

.pg-footer__heading {
	color: var( --wp--preset--color--white );
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	margin: 0 0 0.75rem;
	text-transform: uppercase;
}

.pg-footer__links {
	list-style: none;
	margin: 0;
	padding: 0;
}

.pg-footer__links li {
	margin-bottom: 0.3rem;
}

.pg-footer__links a {
	color: var( --wp--preset--color--slate );
	display: inline-block;
	font-size: 0.85rem;
	min-height: 32px;
	padding: 0.28rem 0;
	text-decoration: none;
	transition: color var( --pg-duration-base ) var( --pg-easing );
}

.pg-footer__links a:hover,
.pg-footer__links a:focus-visible {
	color: var( --pg-gold-hi );
}

.pg-footer__base {
	border-top: 1px solid rgba( 255, 255, 255, 0.08 );
	margin: var( --wp--preset--spacing--60 ) auto 0;
	max-width: 1320px;
	padding-top: var( --wp--preset--spacing--40 );
}

.pg-footer__disclaimer {
	color: #7d8aa1;
	font-size: 0.76rem;
	line-height: 1.6;
	margin: 0;
}

.pg-footer__payments {
	color: #7d8aa1;
	font-size: 0.76rem;
	margin: 0.7rem 0 0;
}

.pg-footer__copy {
	color: #7d8aa1;
	font-size: 0.78rem;
	margin: 0.7rem 0 0;
}

@media ( max-width: 1024px ) {
	.pg-footer__inner {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}

	.pg-footer__brand,
	.pg-footer__signup {
		grid-column: 1 / -1;
	}
}

@media ( max-width: 600px ) {
	.pg-footer__inner {
		grid-template-columns: minmax( 0, 1fr );
	}
}

/* Newsletter section: navy band above the footer, keeping the alternating
   light/dark rhythm rather than one continuous navy screen. */
.pg-newsletter-section {
	background: linear-gradient( 160deg, #13223f 0%, #0b1226 60%, #070c18 100% );
	border-top: 1px solid rgba( 212, 175, 55, 0.2 );
}

/* ==== VIAL DISPLAY NORMALISATION — generated, do not hand-edit ==== */

img[src*="amino-h2o-10ml-transparent"] { --pg-vs: 0.9133; --pg-vy: 0.66%; }
img[src*="amino-h2o-3ml-transparent"] { --pg-vs: 0.7755; --pg-vy: 7.21%; }
img[src*="bpc-157-5mg-transparent"] { --pg-vs: 0.8624; --pg-vy: 3.15%; }
img[src*="bpc-157-tb-500-5mg-5mg-transparent"] { --pg-vs: 0.8624; --pg-vy: 3.15%; }
img[src*="cjc-ipa-5mg-5mg-transparent"] { --pg-vs: 0.8624; --pg-vy: 3.15%; }
img[src*="glow-70mg-transparent"] { --pg-vs: 0.8624; --pg-vy: 3.15%; }
img[src*="klow-80mg-transparent"] { --pg-vs: 0.8624; --pg-vy: 3.15%; }
img[src*="mt-2-10mg-transparent"] { --pg-vs: 0.8624; --pg-vy: 3.15%; }
img[src*="rta-3-10mg-transparent"] { --pg-vs: 0.8624; --pg-vy: 3.15%; }
img[src*="rta-3-20mg-transparent"] { --pg-vs: 0.8624; --pg-vy: 3.15%; }
img[src*="rta-3-30mg-transparent"] { --pg-vs: 0.8624; --pg-vy: 3.15%; }
img[src*="tb-500-5mg-transparent"] { --pg-vs: 0.8624; --pg-vy: 3.15%; }
img[src*="trz-2-30mg-transparent"] { --pg-vs: 0.8624; --pg-vy: 3.15%; }

/*
 * Contexts that display a catalogue vial. Each applies the per-file correction
 * above; anything without it falls back to scale(1) translateY(0), so an image
 * this file does not know about is simply left alone.
 */
.pg-vial,
.pg-frp__img,
.pg-product-card__media img,
.pg-hero__vial img,
.pg-product-page__media img,
.pg-product-page .woocommerce-product-gallery__image img,
.pg-drawer__media img,
.pg-drawer__img,
.pg-order-review__media img,
.woocommerce-cart-form__cart-item .product-thumbnail img,
.wc-block-components-order-summary-item__image img {
	transform: translateY( var( --pg-vy, 0 ) ) scale( var( --pg-vs, 1 ) );
	transform-origin: 50% 50%;
}

/* The correction scales slightly past the box, so these must not clip. */
.pg-frp__media,
.pg-frp__media-link,
.pg-product-card__media,
.pg-drawer__media,
.pg-order-review__media {
	overflow: visible;
}

/*
 * <picture> wrapper for the WebP twins. display:contents removes the wrapper's
 * own box, so the <img> remains the flex/grid item and every sizing rule above
 * keeps applying exactly as it did before the wrapper existed.
 */
.pg-vial-pic {
	display: contents;
}

/* ==== end vial display normalisation ==== */

/* -------------------------------------------------------------------------- *
 * Featured-card image area on ivory
 * -------------------------------------------------------------------------- */

/*
 * On a featured card the purchase button lives INSIDE .pg-frp__media alongside
 * the image, so the ivory belongs on .pg-frp__media-link — the image area
 * proper. Putting it on .pg-frp__media would place the gold button on ivory,
 * which is not what "product image area" means here.
 *
 * .pg-frp__media keeps its layout and padding; only its navy glow is cleared,
 * since it would otherwise halo around the ivory panel it sits behind.
 */
.pg-frp__media {
	background: none;
}

.pg-frp__media-link {
	background: #FBF7EE;
	border-radius: var( --wp--custom--radius--card );
}

/* -------------------------------------------------------------------------- *
 * "Still need help?" strip (FAQ close)
 *
 * A single compact band, deliberately far smaller than a hero: the FAQ used to
 * fall off into a tall empty navy stretch before the footer, and this replaces
 * that dead space with a short, useful handoff to Contact.
 * -------------------------------------------------------------------------- */

.pg-still-help {
	background: #10203f;
	padding: var( --wp--preset--spacing--50 ) var( --wp--preset--spacing--40 );
}

.pg-still-help__inner {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var( --wp--preset--spacing--40 );
	justify-content: space-between;
	margin: 0 auto;
	max-width: 980px;
}

.pg-still-help__title {
	color: var( --wp--preset--color--white );
	font-size: 1.35rem;
	font-weight: 700;
	margin: 0 0 0.3rem;
}

.pg-still-help__text {
	color: var( --wp--preset--color--slate );
	margin: 0;
	max-width: 52ch;
}

.pg-still-help__btn {
	background-image: var( --pg-gold-metal );
	box-sizing: border-box;
	flex-shrink: 0;
}

@media ( max-width: 781px ) {
	.pg-still-help__inner {
		text-align: left;
	}

	.pg-still-help__btn {
		width: 100%;
		display: flex;
		justify-content: center;
	}
}

/* -------------------------------------------------------------------------- *
 * Contact: primary support card + helpful-links row
 * -------------------------------------------------------------------------- */

.pg-support-card {
	background: #fff;
	border: 1px solid rgba( 22, 34, 58, 0.12 );
	border-radius: var( --wp--custom--radius--card );
	box-shadow: 0 6px 18px rgba( 2, 6, 16, 0.05 );
	display: grid;
	gap: 1px;
	grid-template-columns: repeat( 4, 1fr );
	margin-bottom: var( --wp--preset--spacing--60 );
	overflow: hidden;
}

.pg-support-card__cell {
	background: #fff;
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	outline: 1px solid rgba( 22, 34, 58, 0.08 );
	padding: 1.15rem 1.25rem;
}

.pg-support-card__label {
	color: #5a6478;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.pg-support-card__value {
	color: #16223a;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.45;
}

a.pg-support-card__value {
	color: #8a6a16;
	overflow-wrap: anywhere;
	text-decoration: none;
}

a.pg-support-card__value:hover,
a.pg-support-card__value:focus-visible {
	text-decoration: underline;
}

.pg-contact-links__title {
	color: #16223a;
	font-size: 1.2rem;
	font-weight: 700;
	margin: 0 0 0.3rem;
}

.pg-contact-links__intro {
	color: #5a6478;
	margin: 0 0 0.8rem;
}

.pg-contact-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.55rem;
	margin-bottom: var( --wp--preset--spacing--60 );
}

.pg-contact-links a {
	background: #fff;
	border: 1px solid rgba( 22, 34, 58, 0.16 );
	border-radius: var( --wp--custom--radius--pill );
	color: #16223a;
	font-size: 0.88rem;
	font-weight: 600;
	padding: 0.45rem 0.95rem;
	text-decoration: none;
	transition: border-color var( --pg-duration-base ) var( --pg-easing ), color var( --pg-duration-base ) var( --pg-easing );
}

.pg-contact-links a:hover,
.pg-contact-links a:focus-visible {
	border-color: rgba( 212, 175, 55, 0.7 );
	color: #8a6a16;
}

@media ( max-width: 781px ) {
	.pg-support-card {
		grid-template-columns: 1fr;
	}
}

/* Research Use Policy: status pills — informative, not a warning screen. */
.pg-ruo-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: var( --wp--preset--spacing--40 );
}

.pg-ruo-pill {
	border: 1px solid rgba( 212, 175, 55, 0.45 );
	border-radius: var( --wp--custom--radius--pill );
	color: var( --wp--preset--color--gold );
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	padding: 5px 12px;
	text-transform: uppercase;
}

/* -------------------------------------------------------------------------- *
 * Contact form
 *
 * The form previously inherited two global rules written for NAVY surfaces:
 * `label { color: white }` and the navy-filled input skin. On the light contact
 * page that made labels white-on-near-white (measured 1.01:1 — effectively
 * invisible) and turned every field into a heavy navy block. It was also capped
 * at 34rem and left-aligned, so two thirds of a desktop viewport sat empty.
 *
 * Everything below is scoped to .pg-contact so the navy-surface forms
 * (newsletter, checkout) keep the skin they were designed for.
 * -------------------------------------------------------------------------- */

.pg-contact {
	margin: 0 auto;
	max-width: 1020px;
	width: 100%;
}

/* Two columns on desktop; message, attachment, notes and actions span both. */
.pg-contact .pg-form {
	background: #fff;
	border: 1px solid rgba( 22, 34, 58, 0.12 );
	border-radius: var( --wp--custom--radius--card );
	box-shadow: 0 6px 20px rgba( 2, 6, 16, 0.06 );
	box-sizing: border-box;
	column-gap: var( --wp--preset--spacing--40 );
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	max-width: none;
	padding: clamp( 1.25rem, 3vw, 2rem );
	row-gap: var( --wp--preset--spacing--40 );
}

.pg-contact .pg-field--wide,
.pg-contact .pg-form-note,
.pg-contact .pg-form__actions,
.pg-contact .pg-form-message {
	grid-column: 1 / -1;
}

/* Readable on a light surface: 15.06:1 for labels, 5.73:1 for hints. */
.pg-contact .pg-form label {
	color: #16223a;
	font-size: 0.9rem;
	font-weight: 600;
	margin-bottom: 0.4rem;
}

.pg-contact .pg-field__hint {
	color: #56637d;
	font-weight: 400;
}

.pg-contact .pg-form-note {
	color: #3d4a63;
	font-size: 0.85rem;
	line-height: 1.6;
	margin: 0;
}

/* White fields with a neutral border, not navy blocks. */
.pg-contact .pg-form input[ type="text" ],
.pg-contact .pg-form input[ type="email" ],
.pg-contact .pg-form input[ type="tel" ],
.pg-contact .pg-form select,
.pg-contact .pg-form textarea {
	background-color: #fff;
	border: 1px solid rgba( 22, 34, 58, 0.22 );
	border-radius: var( --wp--custom--radius--md );
	box-sizing: border-box;
	color: #16223a;
	font-size: 1rem;
	min-height: 48px;
	padding: 0.7rem 0.9rem;
}

.pg-contact .pg-form textarea {
	min-height: 9rem;
}

.pg-contact .pg-form input:focus,
.pg-contact .pg-form select:focus,
.pg-contact .pg-form textarea:focus {
	border-color: #a67c22;
	box-shadow: 0 0 0 3px rgba( 212, 175, 55, 0.22 );
}

.pg-contact .pg-form ::placeholder {
	color: #6b7690;
	opacity: 1;
}

/* The select arrow is drawn for the navy skin; restate it for the light one. */
.pg-contact .pg-form select {
	appearance: none;
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%2316223a' d='M1 1l5 5 5-5'/%3E%3C/svg%3E" );
	background-position: right 0.9rem center;
	background-repeat: no-repeat;
	background-size: 12px 8px;
	padding-right: 2.4rem;
}

/*
 * The file input. The native button cannot be restyled directly across
 * browsers, so ::file-selector-button is styled where supported and the control
 * keeps its own focus ring — it stays a real <input type="file">, so keyboard
 * operation and assistive technology are unaffected.
 */
.pg-contact .pg-form input[ type="file" ] {
	background: #fbfbfd;
	border: 1px dashed rgba( 22, 34, 58, 0.3 );
	border-radius: var( --wp--custom--radius--md );
	box-sizing: border-box;
	color: #3d4a63;
	font-size: 0.9rem;
	padding: 0.8rem 0.9rem;
	width: 100%;
}

.pg-contact .pg-form input[ type="file" ]::file-selector-button {
	background: #fff;
	border: 1px solid rgba( 22, 34, 58, 0.25 );
	border-radius: var( --wp--custom--radius--sm );
	color: #16223a;
	cursor: pointer;
	font-family: inherit;
	font-size: 0.85rem;
	font-weight: 600;
	margin-right: 0.8rem;
	padding: 0.45rem 0.9rem;
}

.pg-contact .pg-form input[ type="file" ]::file-selector-button:hover {
	border-color: rgba( 212, 175, 55, 0.7 );
	color: #8a6a16;
}

.pg-contact .pg-form input[ type="file" ]:focus-visible {
	border-color: #a67c22;
	box-shadow: 0 0 0 3px rgba( 212, 175, 55, 0.22 );
}

.pg-contact .pg-form__actions {
	margin-top: 0.3rem;
}

.pg-contact .pg-form__submit {
	background-image: var( --pg-gold-metal );
	border: 0;
	border-radius: var( --wp--custom--radius--md );
	box-sizing: border-box;
	color: #16223a;
	cursor: pointer;
	font-size: 1.02rem;
	font-weight: 700;
	min-height: 52px;
	padding: 0.85rem 2.4rem;
}

.pg-contact .pg-form__submit:hover {
	background-image: var( --pg-gold-metal-hover );
}

/* Success and error messages sit on the light surface too. */
.pg-contact .pg-card {
	background: #fff;
	border: 1px solid rgba( 22, 34, 58, 0.12 );
	border-radius: var( --wp--custom--radius--card );
	padding: clamp( 1.15rem, 2.4vw, 1.6rem );
}

@media ( max-width: 781px ) {
	.pg-contact .pg-form {
		grid-template-columns: minmax( 0, 1fr );
	}

	.pg-contact .pg-form__submit {
		width: 100%;
	}
}

/* Effective date on a legal page: quiet, factual, not a design element. */
.pg-effective-date {
	color: var( --wp--preset--color--slate );
	font-size: 0.85rem;
	letter-spacing: 0.02em;
	margin: var( --wp--preset--spacing--30 ) 0 0;
}

/* -------------------------------------------------------------------------- *
 * Footer: use the desktop width deliberately
 *
 * The grid reserves a fifth column for the newsletter signup, but that block is
 * suppressed while no email provider is connected — so the columns bunched to
 * the left of an empty track. When the signup is absent the grid drops to four
 * columns and widens the gaps, which spreads the content across the footer
 * without making it taller. If a provider is connected later the five-column
 * layout returns on its own.
 * -------------------------------------------------------------------------- */

@media ( min-width: 900px ) {
	.pg-footer__inner:not( :has( .pg-footer__signup ) ) {
		column-gap: clamp( 2.5rem, 5vw, 5.5rem );
		grid-template-columns: minmax( 250px, 1.5fr ) repeat( 3, minmax( 0, 1fr ) );
	}
}

.pg-footer__email a {
	color: var( --wp--preset--color--gold );
	overflow-wrap: anywhere;
}

/* The research-use notice: readable, but a footnote rather than an alarm. */
.pg-footer__disclaimer {
	font-size: 0.84rem;
	line-height: 1.7;
	max-width: 94ch;
}

/* -------------------------------------------------------------------------- *
 * Home compression: featured cards, Why, Documentation, CTA
 *
 * The homepage ran far longer than it needed to. Nothing is removed here — the
 * same content is made compact so four product cards fit one desktop row and
 * the supporting sections stop consuming a screen each.
 * -------------------------------------------------------------------------- */

/* Four across on desktop, and a tighter card so they fit comfortably. */
@media ( min-width: 1024px ) {
	.pg-frp__grid {
		gap: var( --wp--preset--spacing--40 );
		grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
	}
}

@media ( min-width: 782px ) and ( max-width: 1023px ) {
	.pg-frp__grid {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}
}

/* Shorter image area is the single biggest saving on card height. */
@media ( min-width: 782px ) {
	.pg-frp__media {
		height: 210px;
	}

	.pg-frp__body {
		padding: 0.9rem 1rem 1.1rem;
	}

	.pg-frp__name {
		font-size: 1rem;
	}

	.pg-frp__price {
		font-size: 1rem;
		margin: 0.25rem 0 0.35rem;
	}

	.pg-frp__coa {
		font-size: 0.74rem;
	}

	.pg-frp__buy {
		font-size: 0.88rem;
		min-height: 40px;
		padding: 0.5rem 1rem;
	}
}

/*
 * Mobile: a real swipe carousel. ~1.2 cards visible so the next one clearly
 * peeks, scroll-snap for a positive stop, momentum scrolling on iOS. No arrows
 * to tap — the finger is the control.
 */
@media ( max-width: 781px ) {
	/*
	 * 90% of the scroller's content box puts ~1.24 cards in a 375px viewport —
	 * inside the 1.15–1.25 target, so the next card peeks far enough to read as
	 * swipeable without a second card competing for attention.
	 */
	.pg-frp__card {
		flex: 0 0 90%;
	}

	.pg-frp__media {
		height: 190px;
	}
}

/* Why Peptogenesis: four compact items across, 2 x 2 on phones. */
@media ( min-width: 1024px ) {
	.pg-why__cards {
		grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
	}
}

@media ( max-width: 1023px ) {
	.pg-why__cards {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}
}

.pg-why__card {
	padding: clamp( 0.9rem, 2vw, 1.25rem );
}

.pg-why__card-title {
	font-size: 1rem;
}

.pg-why__card p {
	font-size: 0.88rem;
	line-height: 1.55;
}

/* Documentation and closing CTA: trim the vertical padding, keep the content. */
.pg-docs,
.pg-cta {
	padding-bottom: var( --wp--preset--spacing--60 );
	padding-top: var( --wp--preset--spacing--60 );
}

.pg-docs__card {
	padding: clamp( 1.1rem, 2.4vw, 1.6rem );
}

/* -------------------------------------------------------------------------- *
 * Mobile header
 *
 * Order on a phone is hamburger, brand, utilities — set with flex `order` so
 * the markup (and therefore the desktop layout and the tab order source) is
 * untouched. Everything is inside a max-width query; the desktop header keeps
 * its existing proportions exactly.
 *
 * THE BUG THIS FIXES: the row is flex/nowrap/space-between, and at 390px the
 * full-size logo (282px) + hamburger (44px) + utilities (164px) overflowed the
 * available width, pushing search, account, and cart off-screen at x=398. They
 * were unreachable on every phone. Shrinking the lockup is what brings them
 * back, not just cosmetics.
 * -------------------------------------------------------------------------- */

@media ( max-width: 781px ) {
	.pg-header {
		padding-left: 12px !important;
		padding-right: 12px !important;
		padding-top: 8px !important;
		padding-bottom: 8px !important;
	}

	/* The single flex row holding logo, nav, and utilities. */
	.pg-header > .wp-block-group {
		gap: 6px !important;
	}

	.pg-header .wp-block-navigation {
		flex: 0 0 auto;
		order: -1;
	}

	.pg-logo--header {
		flex: 1 1 auto;
		gap: 0.4rem;
		min-width: 0;
		order: 0;
	}

	.pg-header__utilities {
		flex: 0 0 auto;
		gap: 0;
		order: 1;
	}

	.pg-logo--header .pg-logo__mark {
		width: 30px;
	}

	.pg-logo--header .pg-logo__word {
		font-size: 0.82rem;
		letter-spacing: 0.08em;
	}

	/*
	 * Touch targets stay at 44px tall — the accessible minimum — but narrow, so
	 * three icons plus the hamburger fit beside the brand. Height is what makes
	 * a target comfortable on a phone; width can give.
	 */
	.pg-header__utility {
		min-width: 38px;
	}

	.pg-header .wp-block-navigation__responsive-container-open {
		min-width: 38px;
	}
}

/*
 * PRE-EXISTING BREAKPOINT GAP — 600px to 781px.
 *
 * WordPress expands the navigation from its own 600px overlay breakpoint, but
 * the compact phone header above runs to 781px. Between the two, a full 445px
 * navigation, the brand lockup, and the utilities all competed in one flex row:
 * the logo has flex 1 1 auto, so it was the element that gave, collapsing to
 * 5px while its white-space: nowrap wordmark spilled 13px past the viewport.
 *
 * The navigation becomes the flexible element instead, so the brand keeps its
 * width and the links wrap. Nothing here touches the desktop header at 782px+.
 */
@media ( min-width: 600px ) and ( max-width: 781px ) {
	.pg-header .wp-block-navigation {
		flex: 1 1 auto;
		min-width: 0;
		order: 0;
	}

	.pg-logo--header {
		flex: 0 0 auto;
	}
}

@media ( max-width: 360px ) {
	.pg-logo--header .pg-logo__word {
		font-size: 0.74rem;
		letter-spacing: 0.05em;
	}

	/*
	 * PRE-EXISTING, NOT PART OF THE HERO WORK.
	 *
	 * The FOOTER wordmark keeps the base 16px / 0.14em tracking and is
	 * white-space: nowrap, so at 320px it measured 149px wide ending at x=341 —
	 * 21px past the viewport, and the only source of horizontal scroll on the
	 * homepage at that width. Scaled down rather than allowed to wrap, so the
	 * mark and the word stay on one line as a single lockup.
	 */
	.pg-logo--footer .pg-logo__word {
		font-size: 0.78rem;
		letter-spacing: 0.06em;
	}

	.pg-header__utility,
	.pg-header .wp-block-navigation__responsive-container-open {
		min-width: 34px;
	}
}

/* -------------------------------------------------------------------------- *
 * Mobile Shop intro and filter bar
 * -------------------------------------------------------------------------- */

@media ( max-width: 781px ) {
	/* The intro band was ~700px tall before a single product was visible. */
	.pg-shop-hero {
		padding-top: var( --wp--preset--spacing--40 ) !important;
		padding-bottom: var( --wp--preset--spacing--30 ) !important;
	}

	.pg-shop-hero .is-style-pg-eyebrow {
		font-size: 0.58rem;
		letter-spacing: 0.1em;
	}

	.pg-shop-hero h1 {
		font-size: 2.1rem !important;
		margin-top: 0.35rem !important;
	}

	.pg-shop-hero p:not( .is-style-pg-eyebrow ) {
		font-size: 0.9rem !important;
		line-height: 1.45;
		margin-top: 0.5rem !important;
	}

	.pg-shop {
		padding-top: var( --wp--preset--spacing--30 ) !important;
	}

	.pg-shop-filters {
		gap: 0.6rem;
		margin-bottom: var( --wp--preset--spacing--30 );
	}

	/* Search and sort each take a full row, then the pills scroll. */
	.pg-shop-filters__search {
		flex: 1 1 100%;
		gap: 0.4rem;
		max-width: none;
		order: 0;
	}

	.pg-shop-filters__search input[ type="search" ] {
		font-size: 0.9rem;
		min-height: 40px;
		padding: 0.4rem 0.7rem;
	}

	.pg-shop-filters__search button {
		font-size: 0.82rem;
		min-height: 40px;
		padding: 0.4rem 0.9rem;
	}

	.pg-shop-filters__sort {
		flex: 1 1 100%;
		gap: 0.45rem;
		order: 1;
	}

	.pg-shop-filters__sort-label {
		flex: 0 0 auto;
		font-size: 0.68rem;
		/* Stops "SORT BY" breaking onto two lines in a narrow flex item. */
		white-space: nowrap;
	}

	.pg-shop-filters__sort select {
		flex: 1 1 auto;
		font-size: 0.85rem;
		min-height: 40px;
		padding: 0.35rem 0.6rem;
		width: 100%;
	}

	/*
	 * Category pills scroll horizontally instead of wrapping to three rows.
	 * The negative margin + matching padding lets the row bleed to the screen
	 * edges, so it reads as scrollable rather than clipped.
	 */
	.pg-shop-filters__cats {
		-ms-overflow-style: none;
		flex-wrap: nowrap;
		gap: 0.4rem;
		margin-left: calc( -1 * var( --wp--preset--spacing--40 ) );
		margin-right: calc( -1 * var( --wp--preset--spacing--40 ) );
		order: 2;
		overflow-x: auto;
		padding-left: var( --wp--preset--spacing--40 );
		padding-right: var( --wp--preset--spacing--40 );
		scroll-padding-left: var( --wp--preset--spacing--40 );
		scroll-snap-type: x proximity;
		scrollbar-width: none;
		width: 100%;
	}

	.pg-shop-filters__cats::-webkit-scrollbar {
		display: none;
	}

	.pg-shop-filters__cats .pg-chip {
		flex: 0 0 auto;
		font-size: 0.78rem;
		padding: 0.4rem 0.8rem;
		scroll-snap-align: start;
		white-space: nowrap;
	}
}

/* --------------------------------------------------------------------------
 * Researcher verification gate — checkboxes and exit
 *
 * The gate grew from a two-button acknowledgment into a form with two
 * affirmations, so it needs checkbox styling of its own. Navy panel, champagne
 * accents, white type — the same system as the rest of the gate.
 * -------------------------------------------------------------------------- */

.pg-entry-gate__checks {
	display: grid;
	gap: 0.75rem;
	margin: 0 0 1.25rem;
	text-align: left;
}

.pg-entry-check {
	align-items: flex-start;
	background: rgba( 255, 255, 255, 0.04 );
	border: 1px solid rgba( 212, 175, 55, 0.28 );
	border-radius: 10px;
	display: grid;
	gap: 0.7rem;
	grid-template-columns: auto minmax( 0, 1fr );
	padding: 0.8rem 0.9rem;
	transition: border-color 0.2s ease, background 0.2s ease;
}

.pg-entry-check:focus-within {
	border-color: var( --wp--preset--color--gold, #D4AF37 );
}

/*
 * A checked box tints its whole row, not just the control. At the size a
 * checkbox renders on a phone the tick alone is easy to miss, and the visitor
 * has to be sure which statements they have agreed to.
 */
.pg-entry-check:has( .pg-entry-check__input:checked ) {
	background: rgba( 212, 175, 55, 0.1 );
	border-color: rgba( 212, 175, 55, 0.55 );
}

.pg-entry-check__input {
	accent-color: var( --wp--preset--color--gold, #D4AF37 );
	height: 1.25rem;
	margin: 0.1rem 0 0;
	width: 1.25rem;
}

.pg-entry-check__input:focus-visible {
	outline: 2px solid var( --wp--preset--color--gold, #D4AF37 );
	outline-offset: 3px;
}

.pg-entry-check__label {
	color: rgba( 255, 255, 255, 0.92 );
	cursor: pointer;
	font-size: 0.92rem;
	line-height: 1.45;
}

/* The disabled state has to read as "not yet", not as "broken". */
.pg-entry-gate__enter[disabled] {
	cursor: not-allowed;
	filter: grayscale( 0.45 );
	opacity: 0.5;
}

.pg-entry-gate__foot {
	color: rgba( 255, 255, 255, 0.62 );
	font-size: 0.78rem;
	line-height: 1.5;
	margin: 0.9rem 0 0;
}

.pg-entry-gate__exit-wrap {
	margin: 1rem 0 0;
}

.pg-entry-gate__exit {
	background: none;
	border: 0;
	color: rgba( 255, 255, 255, 0.7 );
	cursor: pointer;
	font-size: 0.85rem;
	padding: 0.4rem 0.6rem;
	text-decoration: underline;
}

.pg-entry-gate__exit:hover,
.pg-entry-gate__exit:focus-visible {
	color: var( --wp--preset--color--gold, #D4AF37 );
}

/*
 * The panel must scroll on a short viewport. Two checkboxes, a footnote and an
 * exit link make this taller than the old two-button gate, and on a landscape
 * phone the button would otherwise sit below the fold with no way to reach it.
 */
@media ( max-width: 781px ) {
	.pg-entry-gate {
		align-items: flex-start;
		overflow-y: auto;
		padding: 1.25rem 1rem;
	}

	.pg-entry-gate__panel {
		margin: auto;
		max-height: none;
	}

	.pg-entry-check__label {
		font-size: 0.88rem;
	}
}