/**
 * WooCommerce styles.
 *
 * WooCommerce's own stylesheets are dequeued in inc/woocommerce.php, so this
 * file is responsible for the whole store surface: shop, product, cart,
 * checkout, and account. It reuses the design system's primitives rather than
 * restating them, so the store cannot drift away from the rest of the site.
 *
 * Loaded only when WooCommerce is active.
 */

/* -------------------------------------------------------------------------- *
 * Shop grid
 *
 * The filter bar itself lives in layout.css: the document libraries reuse it,
 * and they must stay styled even where this stylesheet is not loaded.
 * -------------------------------------------------------------------------- */

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

.pg-shop__empty {
	color: var( --wp--preset--color--slate );
	padding: var( --wp--preset--spacing--70 ) 0;
}

/* -------------------------------------------------------------------------- *
 * Product card
 *
 * The card primitive plus the product-specific behaviour the Brand Guide asks
 * for: the render scales 2–3% on hover while the card itself lifts.
 * -------------------------------------------------------------------------- */

.pg-product-card {
	background-color: var( --wp--preset--color--charcoal );
	border: 1px solid rgba( 212, 175, 55, 0.3 );
	border-radius: var( --wp--custom--radius--card );
	box-shadow: var( --wp--preset--shadow--soft );
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
	height: 100%;
	padding: 1.15rem;
	transition:
		transform var( --pg-duration-base ) var( --pg-easing ),
		box-shadow var( --pg-duration-base ) var( --pg-easing ),
		border-color var( --pg-duration-base ) var( --pg-easing );
}

/*
 * Shop card price. Gold on charcoal, matching the price treatment on the
 * featured cards so the same product does not look different in two places.
 * The "From" qualifier inside it inherits this colour and dims.
 */
.pg-product-card__price {
	color: var( --wp--preset--color--gold );
	font-size: 1.15rem;
	font-weight: 700;
	margin: 0;
}

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

.pg-product-card:hover,
.pg-product-card:focus-within {
	border-color: rgba( 212, 175, 55, 0.7 );
	box-shadow: var( --wp--preset--shadow--raised );
	transform: translateY( -4px );
}

/* Fixed, compact image stage: every vial contains to the same height and is
   bottom-aligned, so cards read as one consistent row regardless of the source
   vial's transparent padding. */
/* Layout only. The transparent PNG composites against the ivory panel set
   further down in this file. */
.pg-product-card__media {
	align-items: center;
	display: flex;
	height: 280px;
	justify-content: center;
	margin: 0 0 0.65rem;
	overflow: visible;
	position: relative;
}

.pg-product-card__media a {
	align-items: center;
	display: flex;
	height: 100%;
	justify-content: center;
}

.pg-product-card__media img {
	height: 100%;
	max-height: 100%;
	object-fit: contain;
	object-position: center;
	position: relative;
	width: auto;
	z-index: 1;
}

.pg-product-card__badge {
	align-self: flex-start;
}

.pg-product-card .pg-product-card__title {
	font-size: clamp( 1.35rem, 2.2vw, 1.5rem );
	font-weight: 600;
	margin: 0;
}

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

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

/*
 * "View Details" is core's read-more block. Styling it as the secondary button
 * avoids a second link element inside the card just to get a button shape.
 * margin-top:auto pins it to the bottom so cards of differing text length still
 * line their buttons up.
 */
.pg-product-card__link {
	align-self: flex-start;
	border: 1px solid rgba( 212, 175, 55, 0.55 );
	border-radius: var( --wp--custom--radius--md );
	color: var( --wp--preset--color--white );
	font-size: var( --wp--preset--font-size--small );
	font-weight: 600;
	margin-top: auto;
	padding: 0.6rem 1.2rem;
	text-decoration: none;
	transition:
		background-color var( --pg-duration-base ) var( --pg-easing ),
		border-color var( --pg-duration-base ) var( --pg-easing ),
		color var( --pg-duration-base ) var( --pg-easing );
}

.pg-product-card__link:hover,
.pg-product-card__link:focus-visible {
	background-color: rgba( 212, 175, 55, 0.12 );
	border-color: var( --pg-gold );
	color: var( --pg-gold-hi );
}

/* -------------------------------------------------------------------------- *
 * Vial rendering
 *
 * The approved catalogue renders are all exactly 1024x1536 (2:3) with the studio
 * background baked in, so a contain fit alone displays every product at an
 * identical size. The earlier per-slug scaling existed only to compensate for
 * uneven transparent padding in the previous 1:1 renders and is no longer needed
 * — keeping it would now distort these images.
 *
 * The image is never stretched: contain preserves the 2:3 proportions, and the
 * baked background is given the card's own corner radius so it reads as a framed
 * photograph rather than a pasted rectangle.
 * -------------------------------------------------------------------------- */
.pg-vial {
	object-fit: contain;
}

/* -------------------------------------------------------------------------- *
 * Product page
 * -------------------------------------------------------------------------- */

.pg-product-page .woocommerce-product-gallery__image img {
	border-radius: var( --wp--custom--radius--md );
}

.pg-product-page .price,
.pg-product-page .woocommerce-Price-amount {
	color: var( --wp--preset--color--gold );
	font-weight: 600;
}

.pg-product-page .stock.in-stock {
	color: var( --wp--preset--color--success );
	font-size: var( --wp--preset--font-size--small );
}

.pg-product-page .stock.out-of-stock {
	color: var( --wp--custom--state--error );
	font-size: var( --wp--preset--font-size--small );
}

/* Product meta: SKU and categories. */
.pg-product-page .product_meta {
	border-top: var( --wp--custom--border--subtle );
	color: var( --wp--preset--color--slate );
	font-size: var( --wp--preset--font-size--small );
	padding-top: var( --wp--preset--spacing--30 );
}

/* Specifications table, rendered by WooCommerce from product attributes. */
.woocommerce-product-attributes {
	border-collapse: collapse;
	width: 100%;
}

.woocommerce-product-attributes th,
.woocommerce-product-attributes td {
	border-bottom: var( --wp--custom--border--subtle );
	padding: 0.875rem 0;
	text-align: left;
	vertical-align: top;
}

.woocommerce-product-attributes th {
	color: var( --wp--preset--color--white );
	font-size: var( --wp--preset--font-size--small );
	font-weight: 500;
	padding-right: var( --wp--preset--spacing--40 );
	white-space: nowrap;
}

.woocommerce-product-attributes td,
.woocommerce-product-attributes td p {
	color: var( --wp--preset--color--slate );
	font-size: var( --wp--preset--font-size--small );
	margin: 0;
}

/* -------------------------------------------------------------------------- *
 * Buttons
 *
 * WooCommerce renders its own buttons in cart, checkout, and account, outside
 * the block system. Mapping its classes onto the primary button keeps one button
 * in the interface rather than two that nearly match.
 * -------------------------------------------------------------------------- */

.woocommerce button.button,
.woocommerce a.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.wc-block-components-button {
	background-color: var( --wp--preset--color--gold );
	background-image: var( --pg-gold-metal );
	border: none;
	border-radius: var( --wp--custom--radius--md );
	color: var( --wp--preset--color--navy );
	cursor: pointer;
	font-family: inherit;
	font-size: var( --wp--preset--font-size--medium );
	font-weight: 600;
	line-height: 1;
	padding: 1rem 2rem;
	text-decoration: none;
	transition: background-color var( --pg-duration-base ) var( --pg-easing ), background-image var( --pg-duration-base ) var( --pg-easing );
}

.woocommerce button.button:hover,
.woocommerce a.button:hover,
.woocommerce input.button:hover,
.wc-block-components-button:hover {
	background-image: var( --pg-gold-metal-hover );
	color: var( --wp--preset--color--navy );
}

/* WooCommerce's main call-to-action (Add to Cart) keeps the metallic fill. */
.woocommerce a.button.alt,
.woocommerce button.button.alt {
	background-color: var( --wp--preset--color--gold );
	background-image: var( --pg-gold-metal );
	color: var( --wp--preset--color--navy );
}

/* -------------------------------------------------------------------------- *
 * Quantity controls (product page + cart)
 *
 * The cart stepper is a compact outlined pill: minus / number / plus evenly
 * spaced and vertically centred, each a 44x44 tap target, with 16px of clear
 * space before the remove (trash) control. Sizing is capped so nothing wraps or
 * overlaps down to 320px. Functionality is untouched — this is presentation only.
 * -------------------------------------------------------------------------- */

/* Classic product-page quantity input. */
.quantity input.qty {
	max-width: 4.75rem;
	min-height: 44px;
	text-align: center;
}

/* Cart block stepper container: shorter, outlined, evenly spaced, centred. */
.wc-block-components-quantity-selector {
	align-items: center;
	border: 1px solid rgba( 212, 175, 55, 0.5 );
	border-radius: var( --wp--custom--radius--md );
	display: inline-flex;
	flex-wrap: nowrap;
	height: 44px;
	overflow: hidden;
	width: auto;
}

.wc-block-components-quantity-selector__button,
.wc-block-components-quantity-selector__input {
	background: transparent;
	border: 0;
	color: var( --wp--preset--color--white );
	height: 44px;
	margin: 0;
}

.wc-block-components-quantity-selector__button {
	align-items: center;
	cursor: pointer;
	display: inline-flex;
	flex: 0 0 auto;
	justify-content: center;
	min-width: 44px;
	padding: 0;
	transition: color var( --pg-duration-base ) var( --pg-easing );
}

.wc-block-components-quantity-selector__button:hover {
	color: var( --pg-gold );
}

.wc-block-components-quantity-selector__input {
	-moz-appearance: textfield;
	appearance: textfield;
	font-weight: 600;
	min-width: 44px;
	padding: 0;
	text-align: center;
	width: 2.75rem;
}

.wc-block-components-quantity-selector__input::-webkit-outer-spin-button,
.wc-block-components-quantity-selector__input::-webkit-inner-spin-button {
	appearance: none;
	margin: 0;
}

/* One non-wrapping row: stepper, then 16px, then the remove / trash control. */
.wc-block-cart-item__quantity {
	align-items: center;
	display: flex;
	flex-wrap: nowrap;
	gap: 16px;
}

.wc-block-cart-item__remove-link,
.woocommerce a.remove {
	align-items: center;
	color: var( --wp--preset--color--slate );
	display: inline-flex;
	flex: 0 0 auto;
	justify-content: center;
	margin: 0;
	min-height: 44px;
	min-width: 44px;
	text-decoration: none;
	transition: color var( --pg-duration-base ) var( --pg-easing );
}

.wc-block-cart-item__remove-link:hover,
.woocommerce a.remove:hover {
	color: var( --pg-gold );
}

/* -------------------------------------------------------------------------- *
 * Cart, checkout, account
 * -------------------------------------------------------------------------- */

.woocommerce table.shop_table,
.wc-block-cart-items {
	border-collapse: collapse;
	width: 100%;
}

.woocommerce table.shop_table th,
.woocommerce table.shop_table td,
.wc-block-cart-items th,
.wc-block-cart-items td {
	border-bottom: var( --wp--custom--border--subtle );
	padding: var( --wp--preset--spacing--30 );
	text-align: left;
}

.woocommerce table.shop_table th {
	color: var( --wp--preset--color--white );
	font-size: var( --wp--preset--font-size--small );
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.woocommerce table.shop_table td {
	color: var( --wp--preset--color--slate );
}

/* Panels: cart totals, checkout order review, account cards. */
/*
 * .woocommerce-MyAccount-navigation is deliberately NOT in this list.
 * It used to inherit the charcoal panel — a full card with gold border and
 * spacing--50 padding wrapped around what is now a row of pills, which is the
 * oversized empty navy card reported on the dashboard.
 */
.woocommerce .cart_totals,
.woocommerce-checkout #order_review,
.wc-block-components-sidebar {
	background-color: var( --wp--preset--color--charcoal );
	border: var( --wp--custom--border--gold );
	border-radius: var( --wp--custom--radius--card );
	padding: var( --wp--preset--spacing--50 );
}

.woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

/*
 * The vertical-list rules that used to live here (li borders, block links with
 * their own padding) were competing with the pill row further down this file.
 * Two layouts on one element is what pushed the active Dashboard pill out of
 * line with its siblings, so only the pill styling remains.
 */

/* -------------------------------------------------------------------------- *
 * Notices
 *
 * Each notice carries its own words, so color is never the only signal.
 * -------------------------------------------------------------------------- */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.wc-block-components-notice-banner {
	border: var( --wp--custom--border--subtle );
	border-radius: var( --wp--custom--radius--md );
	font-size: var( --wp--preset--font-size--small );
	list-style: none;
	margin: 0 0 var( --wp--preset--spacing--40 );
	padding: var( --wp--preset--spacing--30 ) var( --wp--preset--spacing--40 );
}

.woocommerce-message {
	border-left: 2px solid var( --wp--preset--color--success );
	color: var( --wp--preset--color--white );
}

.woocommerce-info {
	border-left: 2px solid var( --wp--preset--color--gold );
	color: var( --wp--preset--color--white );
}

.woocommerce-error {
	border-left: 2px solid var( --wp--custom--state--error );
	color: var( --wp--preset--color--white );
}

/* -------------------------------------------------------------------------- *
 * Variable products: option buttons, variation summary, live COA
 *
 * WooCommerce's own stylesheet is dequeued, so the variations form is styled
 * here. The native <select> is progressively replaced by buttons in
 * assets/js/variation-form.js; both are styled so the control is on-brand with
 * or without JavaScript.
 * -------------------------------------------------------------------------- */

.variations_form .variations {
	border-collapse: collapse;
	margin: var( --wp--preset--spacing--40 ) 0 0;
	width: 100%;
}

.variations_form .variations th.label {
	color: var( --wp--preset--color--white );
	font-size: var( --wp--preset--font-size--small );
	font-weight: 600;
	letter-spacing: 0.04em;
	padding: 0 0 0.5rem;
	text-align: left;
	vertical-align: top;
	width: 100%;
}

.variations_form .variations td.value {
	display: block;
	padding: 0 0 var( --wp--preset--spacing--30 );
}

/* Fallback styling for the native select when the script has not run. */
.variations_form select {
	background-color: var( --wp--preset--color--charcoal );
	border: var( --wp--custom--border--gold );
	border-radius: var( --wp--custom--radius--md );
	color: var( --wp--preset--color--white );
	max-width: 100%;
	padding: 0.7rem 1rem;
}

/* Visually hidden, but kept operable so WooCommerce still reads its value. */
.pg-variation-select--hidden {
	clip: rect( 0 0 0 0 );
	clip-path: inset( 50% );
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

.pg-variation-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
}

.pg-variation-btn {
	background: transparent;
	border: 1px solid rgba( 212, 175, 55, 0.55 );
	border-radius: var( --wp--custom--radius--pill );
	color: var( --wp--preset--color--white );
	cursor: pointer;
	font-size: var( --wp--preset--font-size--small );
	font-weight: 600;
	min-height: 44px;
	padding: 0.55rem 1.35rem;
	transition: background-color var( --pg-duration-base ) var( --pg-easing ), border-color var( --pg-duration-base ) var( --pg-easing ), color var( --pg-duration-base ) var( --pg-easing );
}

.pg-variation-btn:hover {
	border-color: var( --wp--preset--color--gold );
}

.pg-variation-btn.is-active,
.pg-variation-btn[ aria-pressed="true" ] {
	background: var( --pg-gold-metal );
	border-color: var( --pg-gold-dark );
	color: var( --wp--preset--color--navy );
}

.pg-variation-btn:disabled {
	cursor: not-allowed;
	opacity: 0.4;
}

.pg-variation-btn:focus-visible {
	outline: 2px solid var( --wp--preset--color--gold );
	outline-offset: 2px;
}

.reset_variations {
	color: var( --wp--preset--color--slate );
	display: inline-block;
	font-size: var( --wp--preset--font-size--small );
	margin-top: 0.5rem;
}

/* The selected-variation summary (price + availability). */
.woocommerce-variation.single_variation {
	margin-bottom: var( --wp--preset--spacing--40 );
}

.woocommerce-variation-price .price {
	color: var( --wp--preset--color--white );
	font-size: var( --wp--preset--font-size--x-large );
	font-weight: 700;
}

.woocommerce-variation-availability .stock {
	color: var( --wp--preset--color--slate );
	font-size: var( --wp--preset--font-size--small );
}

.woocommerce-variation-add-to-cart {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var( --wp--preset--spacing--30 );
}

.woocommerce-variation-add-to-cart.woocommerce-variation-add-to-cart-disabled .single_add_to_cart_button {
	cursor: not-allowed;
	opacity: 0.45;
}

/* The COA panel updates in place as a variation is chosen. */
.pg-coa-live {
	display: block;
}

/* -------------------------------------------------------------------------- *
 * Slide-out cart drawer
 *
 * An ivory panel over a navy site: light surface, navy text, champagne-gold
 * accents. Controls are deliberately high-contrast — the native number spinners
 * are hidden and replaced by real ± buttons, each a 44x44 target, with 16px of
 * clear space before the remove control.
 * -------------------------------------------------------------------------- */

/* Lock background scrolling while the drawer is open. */
html.pg-drawer-open,
body.pg-drawer-open {
	overflow: hidden;
}

.pg-drawer-root {
	inset: 0;
	position: fixed;
	z-index: 999;
}

.pg-drawer-root[ hidden ] {
	display: none;
}

.pg-drawer__backdrop {
	background: rgba( 6, 10, 20, 0.55 );
	inset: 0;
	opacity: 0;
	position: absolute;
	transition: opacity var( --pg-duration-base ) var( --pg-easing );
}

.pg-drawer-root.is-open .pg-drawer__backdrop {
	opacity: 1;
}

.pg-drawer {
	background: #f6f3ec;
	bottom: 0;
	box-shadow: -18px 0 48px rgba( 2, 6, 16, 0.4 );
	color: #16223a;
	display: flex;
	flex-direction: column;
	max-width: 92vw;
	position: absolute;
	right: 0;
	top: 0;
	transform: translateX( 100% );
	transition: transform var( --pg-duration-base ) var( --pg-easing );
	width: 420px;
}

.pg-drawer-root.is-open .pg-drawer {
	transform: translateX( 0 );
}

@media ( prefers-reduced-motion: reduce ) {
	.pg-drawer,
	.pg-drawer__backdrop {
		transition: none;
	}
}

.pg-drawer.is-busy {
	cursor: progress;
}

.pg-drawer__head {
	align-items: center;
	border-bottom: 1px solid rgba( 22, 34, 58, 0.12 );
	display: flex;
	flex: 0 0 auto;
	justify-content: space-between;
	padding: 1rem 1.15rem;
}

.pg-drawer__title {
	font-size: 1.15rem;
	font-weight: 700;
	letter-spacing: 0.01em;
	margin: 0;
}

.pg-drawer__close {
	align-items: center;
	background: transparent;
	border: 1px solid rgba( 22, 34, 58, 0.18 );
	border-radius: 50%;
	color: #16223a;
	cursor: pointer;
	display: inline-flex;
	justify-content: center;
	min-height: 44px;
	min-width: 44px;
	transition: background-color var( --pg-duration-base ) var( --pg-easing ), border-color var( --pg-duration-base ) var( --pg-easing );
}

.pg-drawer__close:hover {
	background: rgba( 212, 175, 55, 0.16 );
	border-color: var( --pg-gold-dark );
}

/* The body is the scrolling region, so the head and footer stay put. */
.pg-drawer__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-height: 0;
	overflow: hidden;
}

.pg-drawer__inner {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: 1rem 1.15rem;
	-webkit-overflow-scrolling: touch;
}

/* Free-shipping progress. */
.pg-ship-progress {
	background: rgba( 212, 175, 55, 0.1 );
	border: 1px solid rgba( 212, 175, 55, 0.35 );
	border-radius: var( --wp--custom--radius--md );
	margin-bottom: 1rem;
	padding: 0.7rem 0.85rem;
}

.pg-ship-progress__msg {
	color: #16223a;
	font-size: 0.85rem;
	font-weight: 600;
	margin: 0 0 0.5rem;
}

.pg-ship-progress__track {
	background: rgba( 22, 34, 58, 0.12 );
	border-radius: 999px;
	height: 6px;
	overflow: hidden;
}

.pg-ship-progress__bar {
	background: var( --pg-gold-metal );
	border-radius: 999px;
	display: block;
	height: 100%;
	transition: width var( --pg-duration-base ) var( --pg-easing );
}

.pg-ship-progress.is-qualified {
	background: rgba( 95, 191, 143, 0.12 );
	border-color: rgba( 95, 191, 143, 0.45 );
}

.pg-ship-progress.is-qualified .pg-ship-progress__bar {
	background: #3f9a72;
}

/* Items. */
.pg-drawer__items {
	list-style: none;
	margin: 0;
	padding: 0;
}

.pg-drawer__item {
	border-bottom: 1px solid rgba( 22, 34, 58, 0.1 );
	display: flex;
	gap: 0.85rem;
	padding: 0.9rem 0;
}

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

.pg-drawer__media {
	align-items: center;
	background: #FBF7EE;
	border: 1px solid rgba( 212, 175, 55, 0.22 );
	border-radius: var( --wp--custom--radius--md );
	display: flex;
	flex: 0 0 76px;
	height: 76px;
	justify-content: center;
	overflow: visible;
}

/*
 * Fixed pixel height, NOT height: 100%.
 *
 * WooCommerce wraps a cart thumbnail in <a href> when the product is visible, and
 * the WebP twin adds a <picture> that collapses to display: contents. A
 * percentage height is resolved against the nearest ancestor with a definite
 * height, and neither wrapper has one, so height: 100% computed to auto and the
 * 1254px master render drew at full size — spilling out of the 76px panel,
 * because .pg-drawer__media is overflow: visible for the scale correction.
 *
 * A pixel height has no such dependency: it holds however the thumbnail happens
 * to be wrapped.
 */
.pg-drawer__media > a {
	align-items: center;
	display: flex;
	height: 76px;
	justify-content: center;
}

.pg-drawer__media img,
.pg-drawer__img {
	display: block;
	height: 76px;
	max-width: none;
	object-fit: contain;
	width: auto;
}

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

.pg-drawer__name {
	font-size: 0.98rem;
	font-weight: 600;
	margin: 0;
}

.pg-drawer__name a {
	color: #16223a;
	text-decoration: none;
}

.pg-drawer__name a:hover {
	color: var( --pg-gold-dark );
}

.pg-drawer__variation {
	color: #56637d;
	font-size: 0.8rem;
	margin: 0.1rem 0 0;
}

.pg-drawer__price {
	color: #16223a;
	font-size: 0.88rem;
	font-weight: 600;
	margin: 0.25rem 0 0;
}

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

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

/* Quantity + remove: 16px of clear space between the plus and the trash. */
.pg-drawer__controls {
	align-items: center;
	display: flex;
	gap: 16px;
	margin-top: 0.55rem;
}

.pg-qty {
	align-items: center;
	background: #fff;
	border: 1px solid rgba( 22, 34, 58, 0.28 );
	border-radius: var( --wp--custom--radius--md );
	display: inline-flex;
	overflow: hidden;
}

.pg-qty__btn {
	align-items: center;
	background: transparent;
	border: 0;
	color: #16223a;
	cursor: pointer;
	display: inline-flex;
	font-size: 1.05rem;
	font-weight: 700;
	justify-content: center;
	line-height: 1;
	min-height: 44px;
	min-width: 44px;
	padding: 0;
	transition: background-color var( --pg-duration-base ) var( --pg-easing ), color var( --pg-duration-base ) var( --pg-easing );
}

.pg-qty__btn:hover {
	background: rgba( 212, 175, 55, 0.18 );
	color: #0f172a;
}

.pg-qty__btn:focus-visible,
.pg-drawer__remove:focus-visible,
.pg-drawer__close:focus-visible {
	outline: 2px solid var( --pg-gold-dark );
	outline-offset: 2px;
}

/*
 * The quantity value sits on the drawer's own light surface. The global form
 * styling in components.css paints inputs navy for the dark site, so these
 * properties are restated (and kept specific enough to win) — the drawer is a
 * light panel and the number must read as navy on white.
 */
.pg-drawer .pg-qty__input,
.pg-qty .pg-qty__input {
	-moz-appearance: textfield;
	appearance: textfield;
	background: #fff;
	background-image: none;
	border: 0;
	border-left: 1px solid rgba( 22, 34, 58, 0.18 );
	border-right: 1px solid rgba( 22, 34, 58, 0.18 );
	border-radius: 0;
	box-shadow: none;
	color: #16223a;
	font-size: 0.95rem;
	font-weight: 700;
	height: 44px;
	min-width: 46px;
	padding: 0 2px;
	text-align: center;
	width: 46px;
}

.pg-drawer .pg-qty__input:focus,
.pg-qty .pg-qty__input:focus {
	background: #fff;
	color: #16223a;
	outline: 2px solid var( --pg-gold-dark );
	outline-offset: -2px;
}

/* The ± buttons are the affordance; native spinners are hidden. */
.pg-qty__input::-webkit-outer-spin-button,
.pg-qty__input::-webkit-inner-spin-button {
	appearance: none;
	margin: 0;
}

.pg-drawer__remove {
	align-items: center;
	background: transparent;
	border: 1px solid transparent;
	border-radius: var( --wp--custom--radius--md );
	color: #56637d;
	cursor: pointer;
	display: inline-flex;
	justify-content: center;
	min-height: 44px;
	min-width: 44px;
	transition: background-color var( --pg-duration-base ) var( --pg-easing ), color var( --pg-duration-base ) var( --pg-easing );
}

.pg-drawer__remove:hover {
	background: rgba( 176, 58, 58, 0.1 );
	color: #b03a3a;
}

/* Footer: subtotal and actions. */
.pg-drawer__foot {
	background: #efeade;
	border-top: 1px solid rgba( 22, 34, 58, 0.12 );
	flex: 0 0 auto;
	padding: 1rem 1.15rem calc( 1rem + env( safe-area-inset-bottom, 0px ) );
}

.pg-drawer__subtotal {
	display: flex;
	font-size: 1.05rem;
	font-weight: 700;
	justify-content: space-between;
}

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

.pg-drawer__note {
	color: #56637d;
	font-size: 0.78rem;
	margin: 0.3rem 0 0.8rem;
}

.pg-drawer__actions {
	display: grid;
	gap: 0.6rem;
	grid-template-columns: 1fr 1fr;
}

.pg-drawer__btn {
	align-items: center;
	border-radius: var( --wp--custom--radius--md );
	display: inline-flex;
	font-size: 0.92rem;
	font-weight: 700;
	justify-content: center;
	min-height: 48px;
	padding: 0.7rem 1rem;
	text-align: center;
	text-decoration: none;
	transition: background var( --pg-duration-base ) var( --pg-easing ), border-color var( --pg-duration-base ) var( --pg-easing );
}

.pg-drawer__btn--primary {
	background: var( --pg-gold-metal );
	border: 1px solid var( --pg-gold-dark );
	color: #16223a;
}

.pg-drawer__btn--primary:hover {
	background: var( --pg-gold-metal-hover );
	color: #16223a;
}

.pg-drawer__btn--ghost {
	background: transparent;
	border: 1px solid rgba( 22, 34, 58, 0.35 );
	color: #16223a;
}

.pg-drawer__btn--ghost:hover {
	background: rgba( 22, 34, 58, 0.06 );
}

/* Empty state. */
.pg-drawer__empty {
	padding: 2.5rem 0;
	text-align: center;
}

.pg-drawer__empty-title {
	font-size: 1.05rem;
	font-weight: 700;
	margin: 0;
}

.pg-drawer__empty-text {
	color: #56637d;
	margin: 0.35rem 0 1.2rem;
}

.pg-drawer__empty .pg-drawer__btn {
	display: inline-flex;
}

/* Phones: near full-width, never wider than the viewport. */
@media ( max-width: 480px ) {
	.pg-drawer {
		max-width: 100vw;
		width: 100vw;
	}

	.pg-drawer__actions {
		grid-template-columns: 1fr;
	}
}

/* -------------------------------------------------------------------------- *
 * Checkout
 *
 * Two columns on desktop: customer details left, order summary + shipping +
 * coupon + acknowledgment + payment right. One column on phones. The summary
 * panel is ivory so the quantity controls read clearly, matching the drawer.
 * -------------------------------------------------------------------------- */

.woocommerce-checkout .pg-checkout,
.woocommerce-checkout form.checkout.woocommerce-checkout {
	display: grid;
	gap: clamp( 24px, 3vw, 44px );
	grid-template-columns: minmax( 0, 1fr ) minmax( 0, 420px );
	align-items: start;
}

/*
 * The left column is a real element (see woocommerce/checkout/form-checkout.php)
 * holding customer details, verification, and payment as a plain stack. The grid
 * therefore still only ever places TWO things: this column and the summary.
 */
.woocommerce-checkout form.checkout.woocommerce-checkout .pg-checkout__left {
	grid-column: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: clamp( 20px, 2.4vw, 32px );
}

.woocommerce-checkout form.checkout.woocommerce-checkout #order_review_heading,
.woocommerce-checkout form.checkout.woocommerce-checkout #order_review {
	grid-column: 2;
	min-width: 0;
}

/* The summary column sticks while the (longer) details column scrolls. */
@media ( min-width: 900px ) {
	.woocommerce-checkout form.checkout.woocommerce-checkout #order_review {
		position: sticky;
		top: 96px;
	}
}

.woocommerce-checkout form.checkout.woocommerce-checkout #order_review_heading {
	margin: 0 0 0.75rem;
}

/* Order summary panel. */
.woocommerce-checkout #order_review {
	background: #f6f3ec;
	border: 1px solid rgba( 212, 175, 55, 0.35 );
	border-radius: var( --wp--custom--radius--card );
	color: #16223a;
	padding: 1.15rem;
}

.woocommerce-checkout #order_review .pg-ship-progress {
	margin-bottom: 1rem;
}

.pg-order-review__items {
	list-style: none;
	margin: 0 0 1rem;
	padding: 0;
}

.pg-order-review__item {
	align-items: flex-start;
	border-bottom: 1px solid rgba( 22, 34, 58, 0.1 );
	display: flex;
	gap: 0.85rem;
	padding: 0.9rem 0;
}

.pg-order-review__item:first-child {
	padding-top: 0;
}

.pg-order-review__media {
	align-items: center;
	background: #FBF7EE;
	border: 1px solid rgba( 212, 175, 55, 0.22 );
	border-radius: var( --wp--custom--radius--md );
	display: flex;
	flex: 0 0 68px;
	height: 68px;
	justify-content: center;
	overflow: visible;
}

/* Same pixel-height rule as the drawer, for the same wrapper reason. */
.pg-order-review__media > a {
	align-items: center;
	display: flex;
	height: 68px;
	justify-content: center;
}

.pg-order-review__media img {
	display: block;
	height: 68px;
	max-width: none;
	object-fit: contain;
	width: auto;
}

.pg-order-review__details {
	flex: 1 1 auto;
	min-width: 0;
}

.pg-order-review__name {
	color: #16223a;
	font-size: 0.98rem;
	font-weight: 600;
	margin: 0;
}

.pg-order-review__variation {
	color: #56637d;
	font-size: 0.8rem;
	margin: 0.1rem 0 0;
}

.pg-order-review__details .pg-qty {
	margin-top: 0.5rem;
}

.pg-order-review__total {
	color: #16223a;
	flex: 0 0 auto;
	font-weight: 700;
	text-align: right;
	white-space: nowrap;
}

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

/* Totals. */
.pg-order-review__totals {
	margin: 0;
}

.pg-order-review__line {
	display: flex;
	gap: 1rem;
	justify-content: space-between;
	padding: 0.45rem 0;
}

.pg-order-review__line dt {
	color: #56637d;
	font-weight: 500;
	margin: 0;
}

.pg-order-review__line dd {
	color: #16223a;
	font-weight: 600;
	margin: 0;
	text-align: right;
}

.pg-order-review__line--total {
	border-top: 1px solid rgba( 22, 34, 58, 0.18 );
	font-size: 1.08rem;
	margin-top: 0.35rem;
	padding-top: 0.75rem;
}

.pg-order-review__line--total dt,
.pg-order-review__line--total dd {
	color: #16223a;
	font-weight: 700;
}

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

/* Shipping choices rendered by WooCommerce inside the summary. */
.woocommerce-checkout #order_review .woocommerce-shipping-totals th,
.woocommerce-checkout #order_review .woocommerce-shipping-totals td {
	background: transparent;
	border: 0;
	color: #16223a;
	padding: 0.45rem 0;
	text-align: left;
}

.woocommerce-checkout #order_review ul#shipping_method {
	list-style: none;
	margin: 0;
	padding: 0;
}

.woocommerce-checkout #order_review ul#shipping_method li {
	align-items: center;
	display: flex;
	gap: 0.5rem;
	margin: 0;
	min-height: 44px;
}

.woocommerce-checkout #order_review ul#shipping_method label {
	color: #16223a;
	margin: 0;
}

/* Address verification notice. */
.pg-checkout__notice {
	background: rgba( 212, 175, 55, 0.12 );
	border: 1px solid rgba( 212, 175, 55, 0.45 );
	border-radius: var( --wp--custom--radius--md );
	margin: 1rem 0;
	padding: 0.75rem 0.9rem;
}

.pg-checkout__notice p {
	color: #16223a;
	font-size: 0.86rem;
	margin: 0;
}

/* Acknowledgment + opt-in checkboxes. */
.pg-checkout__ack {
	border-top: 1px solid rgba( 22, 34, 58, 0.12 );
	margin-top: 1rem;
	padding-top: 1rem;
}

.pg-checkout__ack-row {
	margin: 0 0 0.85rem;
}

.pg-check {
	align-items: flex-start;
	cursor: pointer;
	display: flex;
	gap: 0.7rem;
	position: relative;
}

/* The real control stays in the DOM and operable; the visible box mirrors it. */
.pg-check__input {
	height: 24px;
	left: 0;
	margin: 0;
	opacity: 0;
	position: absolute;
	top: 0;
	width: 24px;
}

.pg-check__box {
	background: #fff;
	border: 2px solid rgba( 22, 34, 58, 0.45 );
	border-radius: 5px;
	flex: 0 0 24px;
	height: 24px;
	margin-top: 2px;
	position: relative;
	transition: background var( --pg-duration-base ) var( --pg-easing ), border-color var( --pg-duration-base ) var( --pg-easing );
}

.pg-check__input:checked + .pg-check__box {
	background: var( --pg-gold-metal );
	border-color: var( --pg-gold-dark );
}

.pg-check__input:checked + .pg-check__box::after {
	border: solid #16223a;
	border-width: 0 2.5px 2.5px 0;
	content: "";
	height: 11px;
	left: 7px;
	position: absolute;
	top: 3px;
	transform: rotate( 45deg );
	width: 6px;
}

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

/* A comfortable tap target without enlarging the drawn box. */
.pg-check__text {
	color: #16223a;
	font-size: 0.86rem;
	line-height: 1.5;
	min-height: 44px;
	padding-top: 2px;
}

.pg-check__text a {
	color: var( --pg-gold-dark );
	text-decoration: underline;
}

.pg-check__required {
	color: #b03a3a;
	margin-left: 0.15rem;
}

/*
 * Payment, inside the order-summary panel on the right.
 *
 * Scoped to .woocommerce-checkout rather than to #order_review, even though
 * payment currently renders inside #order_review and the two are equivalent
 * today. The looser scope is deliberate insurance: these rules — and the Stripe
 * contrast fix further down this file, which is the only reason that payment
 * list is readable — must not silently evaporate if the payment block is ever
 * moved again. A rule that stops matching leaves no error behind, just an
 * unreadable checkout.
 */
.woocommerce-checkout .woocommerce-checkout-payment {
	background: transparent;
	border-radius: 0;
}

.woocommerce-checkout .wc_payment_methods {
	list-style: none;
	margin: 0.5rem 0 0;
	padding: 0;
}

.woocommerce-checkout .wc_payment_method label {
	color: #16223a;
	min-height: 44px;
}

.woocommerce-checkout .payment_box {
	background: rgba( 22, 34, 58, 0.05 );
	border-radius: var( --wp--custom--radius--md );
	color: #16223a;
	padding: 0.75rem 0.9rem;
}

.woocommerce-checkout #place_order {
	background-image: var( --pg-gold-metal );
	border: 1px solid var( --pg-gold-dark );
	color: #16223a;
	font-weight: 700;
	min-height: 52px;
	width: 100%;
}

.woocommerce-checkout #place_order:hover {
	background-image: var( --pg-gold-metal-hover );
}

/* Phones: one column, nothing overflows. */
@media ( max-width: 899px ) {
	.woocommerce-checkout .pg-checkout,
	.woocommerce-checkout form.checkout.woocommerce-checkout {
		grid-template-columns: minmax( 0, 1fr );
	}

	.woocommerce-checkout form.checkout.woocommerce-checkout .pg-checkout__left,
	.woocommerce-checkout form.checkout.woocommerce-checkout #order_review_heading,
	.woocommerce-checkout form.checkout.woocommerce-checkout #order_review {
		grid-column: 1;
	}

	.pg-order-review__item {
		flex-wrap: wrap;
	}

	.pg-order-review__total {
		text-align: left;
	}
}

/* -------------------------------------------------------------------------- *
 * Product page
 *
 * Vial on the left, an ivory purchasing card on the right, then the information
 * and documentation cards below. The purchasing card is light so the quantity
 * stepper and price read clearly against it, matching the drawer and checkout.
 * -------------------------------------------------------------------------- */

.pg-product-page__hero {
	background: linear-gradient( 165deg, #13223f 0%, #0b1226 55%, #070c18 100% );
}

/*
 * The vial sits on its own panel rather than floating on the hero gradient,
 * which is what gives the approved layout its two-panel balance: a large calm
 * media surface beside the purchasing card, both sharing one radius.
 */
.pg-product-page__media .woocommerce-product-gallery {
	align-items: center;
	background: rgba( 255, 255, 255, 0.04 );
	border: 1px solid rgba( 212, 175, 55, 0.22 );
	border-radius: var( --wp--custom--radius--card );
	display: flex;
	justify-content: center;
	margin: 0;
	padding: clamp( 1.5rem, 4vw, 3rem );
}

/*
 * Square box + contain. The canvases in the set range from 2:3 to 1:1, and a
 * width-driven image would render a 2:3 file 50% taller than a square one, so
 * its vial would look 50% bigger. Against a square box every canvas (all are
 * aspect <= 1) is height-constrained, so rendered height is identical for all
 * products and the per-file --pg-vs lands every visible vial on the same height.
 */
.pg-product-page__media img {
	aspect-ratio: 1;
	display: block;
	height: auto;
	margin: 0 auto;
	max-width: 480px;
	object-fit: contain;
	width: 100%;
}

/* Ivory purchasing card. */
.pg-buy-card {
	background: #f6f3ec;
	border: 1px solid rgba( 212, 175, 55, 0.35 );
	border-radius: var( --wp--custom--radius--card );
	box-shadow: 0 18px 44px rgba( 2, 6, 16, 0.35 );
	color: #16223a;
	padding: clamp( 1.5rem, 3vw, 2.4rem );
}

/*
 * Intro block under the title: category eyebrow, alias chips, short
 * description. Each part is optional, so every rule here uses top margin only —
 * a missing part must not leave a gap behind it.
 */
.pg-intro {
	margin: 0.55rem 0 0;
}

.pg-intro__eyebrow {
	color: #5a6478;
	font-size: 0.95rem;
	font-style: italic;
	margin: 0;
}

.pg-intro__aliases {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem;
	list-style: none;
	margin: 0.75rem 0 0;
	padding: 0;
}

.pg-intro__alias {
	background: transparent;
	border: 1px solid rgba( 22, 34, 58, 0.16 );
	border-radius: var( --wp--custom--radius--pill );
	color: #3d4a63;
	font-size: 0.82rem;
	padding: 6px 14px;
}

.pg-intro__text {
	color: #3d4a63;
	font-size: 0.95rem;
	line-height: 1.6;
	margin: 0.9rem 0 0;
	max-width: 58ch;
}

/*
 * Labelled control rows. WooCommerce already emits the attribute label ("Mass",
 * "Volume") in the variations table, so the label column is real markup rather
 * than something invented here — it only needed aligning opposite its control.
 */
.pg-buy-card .variations tr,
.pg-buy-card .pg-qty-row {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 1.25rem;
	justify-content: space-between;
}

.pg-buy-card .variations th.label,
.pg-buy-card .pg-qty-row__label {
	color: #16223a;
	flex: 0 0 auto;
	font-size: 0.95rem;
	font-weight: 600;
}

.pg-buy-card .pg-buy-card__title,
.pg-buy-card h1 {
	color: #16223a;
	font-size: clamp( 1.6rem, 3vw, 2rem );
	font-weight: 600;
	line-height: 1.2;
	margin: 0;
}

.pg-buy-card .pg-buy-card__price,
.pg-buy-card .price {
	color: #16223a;
	font-size: clamp( 1.25rem, 2.4vw, 1.55rem );
	font-weight: 700;
	margin: 0.5rem 0 0;
}

.pg-buy-card .price .woocommerce-Price-amount,
.pg-buy-card .price del,
.pg-buy-card .price ins {
	color: inherit;
}

.pg-buy-card .price del {
	opacity: 0.55;
}

/* Stock badge — driven by WooCommerce, never hard-coded. */
.pg-stock {
	border-radius: var( --wp--custom--radius--pill );
	display: inline-block;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	margin: 0.75rem 0 0;
	padding: 0.3rem 0.75rem;
}

.pg-stock--in {
	background: rgba( 63, 154, 114, 0.16 );
	color: #2f7d5b;
}

.pg-stock--backorder {
	background: rgba( 212, 175, 55, 0.18 );
	color: var( --pg-gold-dark );
}

.pg-stock--out {
	background: rgba( 176, 58, 58, 0.12 );
	color: #b03a3a;
}

/*
 * The neutral state a variable product shows before a strength is chosen.
 *
 * Deliberately not red and not green: nothing has gone wrong and nothing has
 * been confirmed, so it reads as an instruction rather than a status. Navy on
 * the card's own tint keeps it quiet next to the price it sits under.
 */
.pg-stock--select {
	background: rgba( 22, 34, 58, 0.07 );
	color: #3d4a63;
	font-weight: 600;
}

/* WooCommerce's add-to-cart form inside the light card. */
.pg-buy-card form.cart {
	margin: 1rem 0 0;
}

.pg-buy-card .variations {
	margin-bottom: 0.5rem;
}

.pg-buy-card .variations th.label,
.pg-buy-card .variations label {
	color: #16223a;
}

.pg-buy-card .pg-variation-btn {
	background: #fff;
	border-color: rgba( 22, 34, 58, 0.3 );
	color: #16223a;
}

.pg-buy-card .pg-variation-btn:hover {
	border-color: var( --pg-gold-dark );
}

.pg-buy-card .pg-variation-btn.is-active,
.pg-buy-card .pg-variation-btn[ aria-pressed="true" ] {
	background: var( --pg-gold-metal );
	border-color: var( --pg-gold-dark );
	color: #16223a;
}

.pg-buy-card .reset_variations {
	color: #56637d;
}

.pg-buy-card .woocommerce-variation-price .price {
	margin-top: 0.5rem;
}

/* Quantity + Add to Cart row. */
.pg-buy-card form.cart .quantity {
	display: inline-flex;
	margin-right: 0.75rem;
}

.pg-buy-card form.cart .quantity input.qty,
.pg-buy-card input.qty {
	background: #fff;
	border: 1px solid rgba( 22, 34, 58, 0.3 );
	border-radius: var( --wp--custom--radius--md );
	color: #16223a;
	font-weight: 700;
	max-width: 5rem;
	min-height: 48px;
	text-align: center;
}

.pg-buy-card form.cart .quantity input.qty:focus {
	outline: 2px solid var( --pg-gold-dark );
	outline-offset: 1px;
}

.pg-buy-card .single_add_to_cart_button {
	background-image: var( --pg-gold-metal );
	border: 1px solid var( --pg-gold-dark );
	color: #16223a;
	font-weight: 700;
	min-height: 48px;
}

.pg-buy-card .single_add_to_cart_button:hover {
	background-image: var( --pg-gold-metal-hover );
	color: #16223a;
}

.pg-buy-card .woocommerce-variation-add-to-cart {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
}

/* COA panel inside the light card reads on ivory. */
.pg-buy-card .pg-coa__status--coming_soon {
	color: #56637d;
}

.pg-buy-card .pg-coa__fact dd,
.pg-buy-card .pg-coa__panel-title {
	color: #16223a;
}

.pg-buy-card .pg-coa__fact dt,
.pg-buy-card .pg-coa__note {
	color: #56637d;
}

/* Research-use notice. */
.pg-ruo {
	background: rgba( 22, 34, 58, 0.05 );
	border: 1px solid rgba( 22, 34, 58, 0.15 );
	border-left: 3px solid var( --pg-gold-dark );
	border-radius: var( --wp--custom--radius--md );
	margin-top: 1.1rem;
	padding: 0.85rem 1rem;
}

.pg-ruo__title {
	color: #16223a;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	margin: 0 0 0.35rem;
	text-transform: uppercase;
}

.pg-ruo__text {
	color: #3d4a63;
	font-size: 0.82rem;
	line-height: 1.55;
	margin: 0;
}

/* -------------------------------------------------------------------------- *
 * Information + documentation cards (light section)
 * -------------------------------------------------------------------------- */

.pg-product-page__info {
	background: #f8f9fb;
	color: #16223a;
}

.pg-props,
.pg-docs {
	display: grid;
	gap: 1.15rem;
}

.pg-props__card,
.pg-docs__card {
	background: #fff;
	border: 1px solid rgba( 22, 34, 58, 0.1 );
	border-radius: var( --wp--custom--radius--card );
	box-shadow: 0 6px 18px rgba( 15, 23, 42, 0.06 );
	padding: clamp( 1rem, 2vw, 1.5rem );
}

.pg-props__title {
	color: #16223a;
	font-size: 1.05rem;
	font-weight: 700;
	margin: 0 0 0.75rem;
}

.pg-props__body {
	color: #3d4a63;
	font-size: 0.92rem;
	line-height: 1.65;
}

.pg-props__body p {
	margin: 0 0 0.75rem;
}

.pg-props__body p:last-child {
	margin-bottom: 0;
}

.pg-props__list {
	margin: 0;
}

.pg-props__row {
	border-bottom: 1px solid rgba( 22, 34, 58, 0.08 );
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1rem;
	justify-content: space-between;
	padding: 0.55rem 0;
}

.pg-props__row:last-child {
	border-bottom: 0;
}

.pg-props__row dt {
	color: #56637d;
	font-size: 0.85rem;
	margin: 0;
}

.pg-props__row dd {
	color: #16223a;
	font-size: 0.88rem;
	font-weight: 600;
	margin: 0;
	max-width: 62%;
	overflow-wrap: anywhere;
	text-align: right;
}

.pg-props__source {
	color: #56637d;
	font-size: 0.78rem;
	margin: 0.75rem 0 0;
}

.pg-props__structure figcaption {
	color: #56637d;
	font-size: 0.78rem;
	margin-top: 0.5rem;
}

.pg-props__structure img {
	background: #fff;
	border-radius: var( --wp--custom--radius--md );
	display: block;
	height: auto;
	max-width: 320px;
	width: 100%;
}

.pg-docs__btn {
	align-items: center;
	background-image: var( --pg-gold-metal );
	border: 1px solid var( --pg-gold-dark );
	border-radius: var( --wp--custom--radius--md );
	color: #16223a;
	display: inline-flex;
	font-size: 0.88rem;
	font-weight: 700;
	justify-content: center;
	min-height: 44px;
	padding: 0.6rem 1.2rem;
	text-decoration: none;
}

.pg-docs__btn:hover {
	background-image: var( --pg-gold-metal-hover );
	color: #16223a;
}

/* Coming-soon is a state, never a control. */
/*
 * Both SDS states live in the DOM so the variation script can switch between
 * them, so both must honour [hidden].
 *
 * `display: inline-flex` / `inline-block` on the classes below are AUTHOR
 * styles, and author styles beat the user agent's `[hidden] { display: none }`
 * regardless of specificity — so without this rule the button and the
 * "SDS Coming Soon" badge render at the same time, which is exactly what
 * shipped. Same trap as .pg-bundle__total and the FAQ answers.
 */
.pg-docs__btn[ hidden ],
.pg-docs__pending[ hidden ] {
	display: none;
}

.pg-docs__pending {
	color: #56637d;
	cursor: default;
	display: inline-block;
	opacity: 0.85;
}

/* Documentation panel colours on white. */
.pg-docs__card .pg-coa__status--coming_soon {
	color: #56637d;
}

.pg-docs__card .pg-coa__fact dd,
.pg-docs__card .pg-coa__panel-title {
	color: #16223a;
}

.pg-docs__card .pg-coa__fact dt,
.pg-docs__card .pg-coa__note {
	color: #56637d;
}

/* Phones: single column, image first, purchasing controls right after. */
@media ( max-width: 781px ) {
	.pg-product-page__cols {
		flex-wrap: wrap !important;
	}

	.pg-product-page__media,
	.pg-product-page__buy {
		flex-basis: 100% !important;
	}

	.pg-product-page__media img {
		max-width: 320px;
	}

	.pg-props__row dd {
		max-width: 100%;
		text-align: left;
	}
}

/* -------------------------------------------------------------------------- *
 * Correction pass: drawer, checkout, and product-page controls
 * -------------------------------------------------------------------------- */

/* Drawer heading: explicit navy on ivory, so it never inherits a light colour
   from a surrounding dark section. */
.pg-drawer .pg-drawer__title {
	color: #16223a;
	font-size: 1.1rem;
	font-weight: 700;
}

/* Compact 44x44 close control (was an oversized circle). */
.pg-drawer .pg-drawer__close {
	background: transparent;
	border: 1px solid rgba( 22, 34, 58, 0.2 );
	border-radius: 8px;
	color: #16223a;
	flex: 0 0 auto;
	height: 44px;
	min-height: 44px;
	min-width: 44px;
	padding: 0;
	width: 44px;
}

.pg-drawer .pg-drawer__close svg {
	height: 18px;
	width: 18px;
}

/* Keep the panel clear of the WordPress admin bar. */
.admin-bar .pg-drawer {
	top: 32px;
}

@media screen and ( max-width: 782px ) {
	.admin-bar .pg-drawer {
		top: 46px;
	}
}

.pg-drawer__head {
	gap: 12px;
	padding: 0.85rem 1rem;
}

/* Quantity value: larger and unmistakably navy on white. */
.pg-drawer .pg-qty__input,
.pg-order-review .pg-qty__input,
.pg-buy-card .pg-qty__input {
	color: #16223a;
	font-size: 1.02rem;
	font-weight: 700;
}

.pg-drawer .pg-qty,
.pg-order-review .pg-qty,
.pg-buy-card .pg-qty {
	background: #fff;
	border: 1px solid rgba( 22, 34, 58, 0.32 );
}

.pg-drawer .pg-qty__btn,
.pg-order-review .pg-qty__btn,
.pg-buy-card .pg-qty__btn {
	color: #16223a;
	font-size: 1.15rem;
}

/* Trash: smaller glyph, aligned with the stepper, 16px clear of the plus. */
.pg-drawer__controls {
	align-items: center;
	gap: 16px;
}

.pg-drawer__remove {
	height: 44px;
	width: 44px;
}

.pg-drawer__remove svg {
	height: 16px;
	width: 16px;
}

/*
 * Order-summary quantity badge.
 *
 * A pale circle with white text is unreadable, so any count badge rendered in
 * the review column is forced to the metallic gold circle with a navy number.
 * Sized to hold two or more digits.
 */
.pg-order-review .quantity,
.pg-order-review__badge,
.woocommerce-checkout #order_review .product-quantity {
	align-items: center;
	background: var( --pg-gold-metal );
	border-radius: 999px;
	color: #16223a;
	display: inline-flex;
	font-size: 0.82rem;
	font-weight: 700;
	height: 32px;
	justify-content: center;
	line-height: 1;
	min-width: 32px;
	padding: 0 8px;
}

/* The stepper is the interactive control, so it must not inherit the badge pill. */
.pg-order-review .pg-qty.quantity,
.pg-order-review__details .pg-qty {
	background: #fff;
	border-radius: var( --wp--custom--radius--md );
	height: auto;
	padding: 0;
}

/* -------------------------------------------------------------------------- *
 * Product-page quantity: ivory field, navy text, visible +/- buttons.
 * Native spinners are suppressed; assets/js/quantity.js supplies the buttons.
 * -------------------------------------------------------------------------- */

.pg-buy-card .quantity input.qty::-webkit-outer-spin-button,
.pg-buy-card .quantity input.qty::-webkit-inner-spin-button {
	appearance: none;
	margin: 0;
}

.pg-buy-card .quantity input.qty {
	-moz-appearance: textfield;
	appearance: textfield;
}

/* The enhanced group built around the native input. */
.pg-qty-wrap {
	align-items: center;
	background: #fff;
	border: 1px solid rgba( 22, 34, 58, 0.32 );
	border-radius: var( --wp--custom--radius--md );
	display: inline-flex;
	overflow: hidden;
}

.pg-qty-wrap .pg-qty__btn {
	background: transparent;
	border: 0;
	color: #16223a;
	cursor: pointer;
	font-size: 1.15rem;
	font-weight: 700;
	line-height: 1;
	min-height: 48px;
	min-width: 48px;
}

.pg-qty-wrap .pg-qty__btn:hover {
	background: rgba( 212, 175, 55, 0.18 );
}

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

.pg-qty-wrap input.qty {
	border: 0 !important;
	border-left: 1px solid rgba( 22, 34, 58, 0.18 ) !important;
	border-radius: 0 !important;
	border-right: 1px solid rgba( 22, 34, 58, 0.18 ) !important;
	color: #16223a !important;
	font-weight: 700;
	min-height: 48px;
	width: 3.25rem;
}

/* -------------------------------------------------------------------------- *
 * Product Properties: table card + structure card
 * -------------------------------------------------------------------------- */

.pg-properties {
	background: #f8f9fb;
	border-radius: var( --wp--custom--radius--card );
	color: #16223a;
	padding: clamp( 1.25rem, 3vw, 2rem );
}

.pg-properties__heading {
	color: #16223a;
	font-size: clamp( 1.25rem, 2.4vw, 1.5rem );
	font-weight: 700;
	margin: 0 0 1.15rem;
}

.pg-properties__grid {
	align-items: start;
	display: grid;
	gap: 1.15rem;
	grid-template-columns: 1.55fr 1fr;
}

.pg-properties__card {
	background: #fff;
	border: 1px solid rgba( 22, 34, 58, 0.1 );
	border-radius: var( --wp--custom--radius--card );
	box-shadow: 0 6px 18px rgba( 15, 23, 42, 0.06 );
	padding: clamp( 1rem, 2vw, 1.35rem );
}

.pg-properties__subtitle {
	color: #16223a;
	font-size: 1rem;
	font-weight: 700;
	margin: 0 0 0.7rem;
}

.pg-properties__intro {
	color: #3d4a63;
	font-size: 0.92rem;
	line-height: 1.65;
	margin-bottom: 0.9rem;
}

.pg-properties__intro p {
	margin: 0 0 0.7rem;
}

.pg-properties__blend {
	background: rgba( 212, 175, 55, 0.1 );
	border-left: 3px solid var( --pg-gold-dark );
	border-radius: 6px;
	color: #3d4a63;
	font-size: 0.86rem;
	margin: 0 0 0.9rem;
	padding: 0.6rem 0.8rem;
}

.pg-properties__list {
	margin: 0;
}

.pg-properties__row {
	border-bottom: 1px solid rgba( 22, 34, 58, 0.08 );
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 1rem;
	justify-content: space-between;
	padding: 0.55rem 0;
}

.pg-properties__row:last-child {
	border-bottom: 0;
}

.pg-properties__row dt {
	color: #56637d;
	font-size: 0.85rem;
	margin: 0;
}

.pg-properties__row dd {
	color: #16223a;
	font-size: 0.88rem;
	font-weight: 600;
	margin: 0;
	max-width: 60%;
	overflow-wrap: anywhere;
	text-align: right;
}

.pg-properties__row dd a {
	color: var( --pg-gold-dark );
}

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

.pg-properties__terms {
	border-top: 1px solid rgba( 22, 34, 58, 0.1 );
	color: #56637d;
	font-size: 0.78rem;
	line-height: 1.55;
	margin: 0.9rem 0 0;
	padding-top: 0.75rem;
}

.pg-properties__source {
	color: #7d8aa1;
	font-size: 0.75rem;
	margin: 0.5rem 0 0;
}

.pg-properties__structure img {
	background: #fff;
	border-radius: var( --wp--custom--radius--md );
	display: block;
	height: auto;
	margin: 0 auto;
	max-width: 100%;
}

.pg-properties__structure figcaption {
	color: #7d8aa1;
	font-size: 0.75rem;
	margin-top: 0.6rem;
	text-align: center;
}

.pg-properties__empty {
	color: #7d8aa1;
	font-size: 0.86rem;
	margin: 0;
}

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

	.pg-properties__row dd {
		max-width: 100%;
		text-align: left;
	}
}

/* -------------------------------------------------------------------------- *
 * Cart / Checkout BLOCK order-summary quantity badge
 *
 * The block checkout renders its own summary, and its quantity badge is a pale
 * circle that inherited the theme's white body text — a white number on a light
 * disc, effectively invisible. Forced here to the metallic gold circle with a
 * navy number, sized to hold two or more digits.
 *
 * WooCommerce's block styles are not covered by the woocommerce_enqueue_styles
 * filter, so they must be overridden rather than dequeued.
 * -------------------------------------------------------------------------- */

.wc-block-components-order-summary-item__quantity,
.wp-block-woocommerce-checkout-order-summary-cart-items-block .wc-block-components-order-summary-item__quantity,
.wc-block-cart-item__quantity .wc-block-components-order-summary-item__quantity {
	align-items: center !important;
	background: var( --pg-gold-metal ) !important;
	background-color: var( --pg-gold ) !important;
	border: 1px solid var( --pg-gold-dark ) !important;
	border-radius: 999px !important;
	box-shadow: 0 2px 6px rgba( 2, 6, 16, 0.35 ) !important;
	box-sizing: border-box !important;
	color: #16223a !important;
	display: inline-flex !important;
	font-size: 0.8rem !important;
	font-weight: 700 !important;
	height: 32px !important;
	justify-content: center !important;
	line-height: 1 !important;
	min-width: 32px !important;
	padding: 0 7px !important;
	width: auto !important;
}

/* Any nested span (WooCommerce sometimes wraps the digits) must inherit, not
   fall back to the theme's white. */
.wc-block-components-order-summary-item__quantity * {
	color: inherit !important;
}

/* The badge sits over the thumbnail; keep it clear of the image edge. */
.wc-block-components-order-summary-item__image {
	position: relative;
}

.wc-block-components-order-summary-item__image .wc-block-components-order-summary-item__quantity {
	position: absolute;
	right: -10px;
	top: -10px;
}

/* Summary text on the navy panel stays readable. */
.wc-block-components-order-summary-item__description,
.wc-block-components-order-summary-item__individual-prices {
	color: var( --wp--preset--color--slate );
}

.wc-block-components-order-summary-item__title,
.wc-block-components-order-summary-item__total-price {
	color: var( --wp--preset--color--white );
}

/* Documentation cards now sit under the vial, in the left column. */
.pg-product-page__media .pg-docs {
	margin-top: 1.25rem;
}

.pg-product-page__media .pg-docs__card {
	background: rgba( 255, 255, 255, 0.05 );
	border: 1px solid rgba( 212, 175, 55, 0.28 );
	box-shadow: none;
	padding: 1rem 1.15rem;
}

/* On the dark hero the documentation text must read light, not navy-on-navy. */
.pg-product-page__media .pg-props__title {
	color: var( --wp--preset--color--white );
	font-size: 0.95rem;
}

.pg-product-page__media .pg-coa__status--coming_soon,
.pg-product-page__media .pg-docs__pending,
.pg-product-page__media .pg-coa__fact dt,
.pg-product-page__media .pg-coa__note {
	color: var( --wp--preset--color--slate );
}

.pg-product-page__media .pg-coa__fact dd,
.pg-product-page__media .pg-coa__panel-title {
	color: var( --wp--preset--color--white );
}

/* The product information band is now full width. */
.pg-product-page__info .pg-properties {
	background: transparent;
	padding: 0;
}

/* -------------------------------------------------------------------------- *
 * My Account — Rewards
 * -------------------------------------------------------------------------- */

.pg-rewards__summary {
	background: linear-gradient( 160deg, #13223f 0%, #0b1226 100% );
	border: 1px solid rgba( 212, 175, 55, 0.35 );
	border-radius: var( --wp--custom--radius--card );
	margin-bottom: var( --wp--preset--spacing--50 );
	padding: var( --wp--preset--spacing--50 );
}

.pg-rewards__label {
	color: var( --wp--preset--color--slate );
	display: block;
	font-size: 0.78rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.pg-rewards__points {
	background: var( --pg-gold-metal );
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	display: block;
	font-size: clamp( 2rem, 5vw, 2.75rem );
	font-weight: 800;
	line-height: 1.1;
	margin: 0.25rem 0;
}

.pg-rewards__value {
	color: var( --wp--preset--color--slate );
	font-size: 0.88rem;
}

.pg-rewards__value .woocommerce-Price-amount {
	color: var( --pg-gold-hi );
}

.pg-rewards__rules {
	color: var( --wp--preset--color--slate );
	font-size: 0.9rem;
	line-height: 1.7;
	margin: 0 0 var( --wp--preset--spacing--50 );
	padding-left: 1.15rem;
}

.pg-rewards__table {
	width: 100%;
}

.pg-rewards__table td.is-positive {
	color: var( --wp--preset--color--success );
	font-weight: 700;
}

.pg-rewards__table td.is-negative {
	color: var( --pg-gold-hi );
	font-weight: 700;
}

/* Rewards redemption control inside the ivory checkout summary. */
.pg-rewards-checkout {
	border-top: 1px solid rgba( 22, 34, 58, 0.12 );
	margin-top: 1rem;
	padding-top: 1rem;
}

.pg-rewards-checkout__title {
	color: #16223a;
	font-size: 0.9rem;
	font-weight: 700;
	margin: 0 0 0.4rem;
}

.pg-rewards-checkout__note {
	color: #3d4a63;
	font-size: 0.84rem;
	margin: 0 0 0.6rem;
}

.pg-rewards-checkout__note .woocommerce-Price-amount {
	color: var( --pg-gold-dark );
	font-weight: 700;
}

.pg-rewards-checkout__row {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
}

.pg-rewards-checkout__input {
	background: #fff;
	border: 1px solid rgba( 22, 34, 58, 0.3 );
	border-radius: var( --wp--custom--radius--md );
	color: #16223a;
	font-weight: 700;
	min-height: 44px;
	padding: 0.5rem 0.7rem;
	width: 7rem;
}

.pg-rewards-checkout__input:focus {
	outline: 2px solid var( --pg-gold-dark );
	outline-offset: 1px;
}

.pg-rewards-checkout__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.86rem;
	font-weight: 700;
	min-height: 44px;
	padding: 0.5rem 1rem;
}

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

.pg-rewards-checkout__fine {
	color: #56637d;
	font-size: 0.75rem;
	margin: 0.6rem 0 0;
}

/*
 * No white or grey plates behind a transparent vial, anywhere. These are the
 * WooCommerce-rendered thumbnail slots (cart table, related products, the
 * gallery) which are not covered by the theme's own card markup.
 */
.woocommerce-cart-form__cart-item .product-thumbnail img,
.woocommerce table.shop_table .product-thumbnail img,
.related.products li.product img,
.up-sells li.product img,
.pg-product-page .woocommerce-product-gallery__image,
.pg-product-page .woocommerce-product-gallery__image img,
.wc-block-components-order-summary-item__image img {
	background: transparent;
	box-shadow: none;
}

/* Checkout block order summary: same ivory panel as the classic summary. */
.wc-block-components-order-summary-item__image {
	align-items: center;
	background: #FBF7EE;
	border-radius: var( --wp--custom--radius--md );
	box-shadow: none;
	display: flex;
	height: 64px;
	justify-content: center;
	width: 64px;
}

/* Pinned in pixels for the same wrapper reason as the drawer and cart table. */
.wc-block-components-order-summary-item__image img {
	height: 64px;
	max-width: none;
	object-fit: contain;
	width: auto;
}

/* Give those slots the same restrained navy glow the cards use. */
.woocommerce-cart-form__cart-item .product-thumbnail {
	align-items: center;
	background: #FBF7EE;
	border-radius: var( --wp--custom--radius--md );
	display: flex;
	height: 96px;
	justify-content: center;
}

/*
 * Height-driven so the per-file scale normalises the visible vial here too, and
 * pinned in pixels rather than percent — the cart table wraps its thumbnail in an
 * <a>, so a percentage height would resolve to auto and let the master render
 * through at full size.
 */
.woocommerce-cart-form__cart-item .product-thumbnail > a,
.woocommerce table.shop_table .product-thumbnail > a {
	align-items: center;
	display: flex;
	height: 96px;
	justify-content: center;
}

.woocommerce-cart-form__cart-item .product-thumbnail img,
.woocommerce table.shop_table .product-thumbnail img {
	height: 96px;
	max-width: none;
	object-fit: contain;
	width: auto;
}

/* -------------------------------------------------------------------------- *
 * Product imagery on ivory
 * -------------------------------------------------------------------------- */

/*
 * Every product image sits on an ivory panel: the gallery on a product page, and
 * the image area of every product card (shop, category, related, up-sells). The
 * page itself stays navy — only the image panels change.
 *
 * The vials are transparent PNGs, so this is the surface they are composited
 * against. It replaces the navy radial glow that previously lifted them off the
 * dark page; that glow is no longer needed and would halo around the ivory.
 *
 * Sizing is deliberately untouched. On cards only the background and radius are
 * set, so the existing media heights and padding still decide how large a vial
 * renders, and the per-file scale factors in layout.css keep working unchanged.
 */
.pg-product-page .woocommerce-product-gallery__image {
	background: #FBF7EE;
	border-radius: var( --wp--custom--radius--card );
	padding: var( --wp--preset--spacing--40 );
}

/* -------------------------------------------------------------------------- *
 * Gallery zoom: off, and kept off
 * -------------------------------------------------------------------------- */

/*
 * jQuery zoom works by injecting a full-resolution <img class="zoomImg"> over the
 * gallery image with its width and height written as inline styles, so no
 * stylesheet sizing rule can rein it in — the only reliable answer is to not
 * render it. The PHP side already stops the script loading; this is the last line
 * of defence for a page or object cache still serving the previous build.
 */
.zoomImg {
	display: none !important;
}

/*
 * The lightbox trigger.
 *
 * WooCommerce prints this as a bare "🔍" emoji in the template and relies on its
 * own stylesheet to place it — and that stylesheet is dequeued here, so it was
 * landing as loose emoji above the panel. Same control, drawn as a quiet chip in
 * the top-right corner of the ivory panel with the glyph replaced by a CSS
 * magnifier. Click-to-enlarge still works, on the chip and on the image.
 */
.pg-product-page__media .woocommerce-product-gallery {
	position: relative;
}

.pg-product-page .woocommerce-product-gallery__trigger {
	align-items: center;
	background: rgba( 255, 255, 255, 0.9 );
	border: 1px solid rgba( 22, 34, 58, 0.14 );
	border-radius: 50%;
	color: #16223a;
	display: flex;
	font-size: 0; /* Hides WooCommerce's emoji glyph. */
	height: 34px;
	justify-content: center;
	position: absolute;
	right: 14px;
	text-decoration: none;
	top: 14px;
	transition: background 0.2s ease, border-color 0.2s ease;
	width: 34px;
	z-index: 2;
}

.pg-product-page .woocommerce-product-gallery__trigger:hover,
.pg-product-page .woocommerce-product-gallery__trigger:focus-visible {
	background: #fff;
	border-color: rgba( 212, 175, 55, 0.65 );
	color: #8a6a16;
}

/* Lens. */
.pg-product-page .woocommerce-product-gallery__trigger::before {
	border: 2px solid currentColor;
	border-radius: 50%;
	content: "";
	height: 11px;
	left: 9px;
	position: absolute;
	top: 9px;
	width: 11px;
}

/* Handle. */
.pg-product-page .woocommerce-product-gallery__trigger::after {
	background: currentColor;
	border-radius: 1px;
	bottom: 9px;
	content: "";
	height: 2px;
	position: absolute;
	right: 8px;
	transform: rotate( 45deg );
	width: 8px;
}

/*
 * Phones: vertical padding only.
 *
 * .pg-product-page__media img is capped at 320px on mobile and is width:100%
 * below that, so horizontal padding narrows the content box and starts deciding
 * the size instead of the cap — measured at 5.6% smaller with spacing--40 at
 * 390px, and still 5% smaller with spacing--20 at 360px. At zero horizontal
 * padding the content box equals the full column at every width, so the cap
 * always governs and the vial renders at exactly its intended size on any phone.
 */
@media ( max-width: 781px ) {
	.pg-product-page .woocommerce-product-gallery__image {
		padding: var( --wp--preset--spacing--20 ) 0;
	}
}

/*
 * Shop, category, related and up-sell cards. This figure holds the image alone,
 * and it is inset by the card's own padding, so it needs its own radius to read
 * as a panel rather than a raw rectangle. Height and margins are left as they
 * were, so vial size does not move.
 */
.pg-product-card__media {
	background: #FBF7EE;
	border-radius: var( --wp--custom--radius--card );
}


/* -------------------------------------------------------------------------- *
 * Bundle & Save tiles
 * -------------------------------------------------------------------------- */

/*
 * These render INSIDE .pg-buy-card, which is ivory (#f6f3ec) with dark text —
 * not on the navy page. Everything here is therefore coloured for a light
 * surface. Measured against that ivory: white is 1.11:1 and slate 1.96:1, both
 * effectively invisible, which is what the first version got wrong.
 *
 * Contrast against #f6f3ec:
 *   #16223A  14.31:1  labels and headings
 *   #5A6478   5.37:1  secondary text
 *   #8A6A16   4.56:1  discount figures
 *   #A67C22   3.43:1  icons only (graphics need 3:1, not 4.5:1)
 */
.pg-bundle {
	margin: var( --wp--preset--spacing--40 ) 0;
}

.pg-bundle__heading {
	color: #5a6478;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	margin: 0 0 0.75rem;
	text-transform: uppercase;
}

.pg-bundle__tiles {
	display: grid;
	gap: 0.6rem;
	grid-template-columns: repeat( 3, 1fr );
}

.pg-bundle__tile {
	align-items: center;
	background: #fff;
	border: 1px solid rgba( 22, 34, 58, 0.18 );
	border-radius: var( --wp--custom--radius--md );
	color: #16223a;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	font: inherit;
	gap: 0.15rem;
	padding: 1.5rem 0.6rem 0.85rem;
	position: relative;
	text-align: center;
	transition: border-color var( --pg-duration-base ) var( --pg-easing ),
		box-shadow var( --pg-duration-base ) var( --pg-easing );
}

.pg-bundle__tile:hover {
	border-color: #a67c22;
}

.pg-bundle__tile.is-selected {
	border-color: #a67c22;
	box-shadow: inset 0 0 0 1px #a67c22;
}

/* Badge straddles the top edge, as in the reference. */
.pg-bundle__badge {
	background-image: var( --pg-gold-metal );
	border-radius: var( --wp--custom--radius--pill );
	color: #14213d;
	font-size: 0.58rem;
	font-weight: 800;
	left: 50%;
	letter-spacing: 0.09em;
	padding: 3px 9px;
	position: absolute;
	text-transform: uppercase;
	top: -0.55rem;
	transform: translateX( -50% );
	white-space: nowrap;
}

.pg-bundle__qty {
	color: #16223a;
	font-size: 0.95rem;
	font-weight: 700;
}

.pg-bundle__off {
	color: #8a6a16;
	font-size: 0.82rem;
	font-weight: 700;
}

.pg-bundle__off--none {
	color: #5a6478;
	font-weight: 600;
}

.pg-bundle__unit {
	color: #5a6478;
	font-size: 0.78rem;
}

/*
 * "From" qualifier on a variable product's price.
 *
 * Its own line above the amount, small and muted, so the price itself stays the
 * thing the eye lands on. display:block is what puts it on that line — the
 * amount that follows is an inline span from wc_price().
 */
/*
 * Deliberately no colour of its own: it inherits and dims.
 *
 * This label appears on the ivory buy card, on white shop cards, and on the
 * charcoal featured cards. A fixed grey would fail contrast on at least one of
 * them, and hard-coding three surface overrides goes stale the next time a card
 * changes colour. Dimming whatever colour the card already uses tracks every
 * surface automatically and stays well clear of 4.5:1 on all of them.
 */
.pg-price__from {
	display: block;
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.04em;
	line-height: 1.2;
	/*
	 * 0.78, not 0.7. At 0.7 this label sits on gold-on-charcoal at 4.38:1 —
	 * under the 4.5 minimum for text this small. 0.78 clears every surface it
	 * appears on, the tightest being the shop card at 5.10:1.
	 */
	opacity: 0.78;
}

/*
 * Variable product, no strength chosen yet: the whole selector is withheld.
 *
 * Hidden rather than disabled because there is genuinely nothing to choose
 * between — every tier would show the same blank price. It appears the moment a
 * strength is picked, which is also the moment the discounts become real.
 */
/*
 * A variable product's bundle cards stay ON SCREEN before a strength is picked.
 *
 * They used to be hidden outright, which meant RTA-3 never advertised its
 * bundles at the moment the customer was deciding what to buy — they had to
 * choose a strength first to discover that buying two was cheaper. The cards
 * now show their quantities, badges and discount percentages immediately; only
 * the per-unit and total FIGURES wait, because those genuinely depend on which
 * strength is selected and inventing them would be worse than leaving them off.
 */
.pg-bundle--awaiting .pg-bundle__unit:empty {
	display: none;
}

/*
 * Bundle total: struck-through regular price, then the bundle price.
 *
 * [hidden] is restated because this element is a flex container — `display:flex`
 * on the class would otherwise beat the browser's `[hidden] { display: none }`
 * and the summary would show at quantity 1, where there is no discount. This is
 * the same cascade trap that once left every FAQ answer expanded.
 */
.pg-bundle__total {
	align-items: baseline;
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem 0.6rem;
	margin: 0.85rem 0 0;
}

.pg-bundle__total[ hidden ] {
	display: none;
}

.pg-bundle__was {
	color: #5a6478;
	font-size: 0.95rem;
	text-decoration: line-through;
}

.pg-bundle__now-label {
	color: #1f7a4d;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.pg-bundle__now {
	color: #1f7a4d;
	font-size: 1.35rem;
	font-weight: 700;
}

.pg-bundle__save {
	color: #5a6478;
	flex: 1 1 100%;
	font-size: 0.8rem;
}

.pg-bundle__note {
	color: #5a6478;
	font-size: 0.76rem;
	margin: 0.7rem 0 0;
}

/*
 * The old narrow-phone treatment — three full-width horizontal strips — is gone.
 *
 * It turned each tile into a left-aligned row and stacked the three of them, so
 * the bundle choice occupied most of a phone screen and pushed Add to Cart out
 * of view. The replacement lower in this file keeps them as side-by-side cards
 * in a scrolling row, which is what the vial thumbnails need to read as "one
 * bottle / two bottles / three bottles".
 *
 * Its flex-direction: row survived here long enough to fight the new layout:
 * the cards became 110px wide while their contents still ran horizontally, so
 * "1 Bottle" wrapped to one letter per line. Removed rather than overridden.
 */

/* -------------------------------------------------------------------------- *
 * Trust row
 * -------------------------------------------------------------------------- */

/*
 * Also inside the ivory buy-card, so the same light-surface palette applies.
 * The free-shipping figure is printed from the live threshold (inc/bundles.php)
 * so it can never advertise a number the cart would not honour.
 */
.pg-trust {
	border-top: 1px solid rgba( 22, 34, 58, 0.15 );
	display: grid;
	gap: 0.9rem;
	grid-template-columns: repeat( 3, 1fr );
	list-style: none;
	margin: var( --wp--preset--spacing--40 ) 0 0;
	padding: var( --wp--preset--spacing--40 ) 0 0;
}

.pg-trust__item {
	align-items: center;
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	text-align: center;
}

.pg-trust__icon {
	color: #a67c22;
	height: 22px;
	margin-bottom: 0.3rem;
	width: 22px;
}

.pg-trust__label {
	color: #16223a;
	font-size: 0.86rem;
	font-weight: 700;
}

.pg-trust__sub {
	color: #5a6478;
	font-size: 0.78rem;
}

@media ( max-width: 480px ) {
	.pg-trust {
		gap: 0.7rem;
		grid-template-columns: 1fr;
	}

	.pg-trust__item {
		align-items: center;
		flex-direction: row;
		gap: 0.6rem;
		text-align: left;
	}

	.pg-trust__icon {
		margin-bottom: 0;
	}
}

/* -------------------------------------------------------------------------- *
 * Manual payment instructions (order-received)
 *
 * Ivory card on the navy page, matching the purchase card and the drawer. The
 * contrast here is not cosmetic: the memo is the only thing linking an incoming
 * transfer to an order, so every value has been checked against the ivory
 * surface — navy text 14.8:1, muted 5.6:1, the warning 8.5:1, all well past the
 * 4.5:1 minimum. An unreadable order number is a lost payment.
 * -------------------------------------------------------------------------- */

.pg-pay {
	background: #FBF7EE;
	border: 1px solid rgba( 212, 175, 55, 0.35 );
	border-radius: var( --wp--custom--radius--card );
	color: #16223a;
	margin: 0 0 2rem;
	padding: clamp( 1.15rem, 2.4vw, 1.75rem );
}

.pg-pay__title,
.pg-pay-dialog__title {
	color: #16223a;
	font-size: clamp( 1.2rem, 2.4vw, 1.5rem );
	font-weight: 600;
	line-height: 1.25;
	margin: 0 0 0.75rem;
}

.pg-pay__intro {
	color: #5a6478;
	margin: 0 0 1.1rem;
}

.pg-pay__field {
	border-top: 1px solid rgba( 22, 34, 58, 0.12 );
	padding: 0.7rem 0;
}

.pg-pay__field:first-of-type {
	border-top: 0;
	padding-top: 0;
}

.pg-pay__label {
	color: #5a6478;
	display: block;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	margin: 0 0 0.3rem;
	text-transform: uppercase;
}

.pg-pay__value-row {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
}

/*
 * Monospace, and allowed to break anywhere. A $cashtag or a Bitcoin address is
 * transcribed character by character, so ambiguous glyphs and a value running
 * off the edge of a phone screen are both real ways to lose a payment.
 */
.pg-pay__value {
	background: rgba( 22, 34, 58, 0.05 );
	border-radius: 8px;
	color: #16223a;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 1rem;
	overflow-wrap: anywhere;
	padding: 0.4rem 0.6rem;
}

/* The memo is the field that decides whether a payment can be matched. */
.pg-pay__field--key .pg-pay__value {
	background: rgba( 212, 175, 55, 0.16 );
	border: 1px solid rgba( 212, 175, 55, 0.55 );
	font-size: 1.15rem;
	font-weight: 700;
	letter-spacing: 0.02em;
}

.pg-pay__copy {
	background: transparent;
	border: 1px solid rgba( 22, 34, 58, 0.25 );
	border-radius: 8px;
	color: #16223a;
	cursor: pointer;
	font-size: 0.85rem;
	font-weight: 600;
	min-height: 34px;
	padding: 0.3rem 0.7rem;
	transition: background 0.2s ease, border-color 0.2s ease;
}

.pg-pay__copy:hover,
.pg-pay__copy:focus-visible {
	background: rgba( 212, 175, 55, 0.14 );
	border-color: rgba( 212, 175, 55, 0.7 );
}

.pg-pay__copy.is-copied {
	background: rgba( 22, 34, 58, 0.08 );
	border-color: rgba( 22, 34, 58, 0.3 );
}

.pg-pay__rule {
	color: #16223a;
	font-weight: 700;
	margin: 1rem 0 0.4rem;
}

.pg-pay__warning {
	background: rgba( 140, 29, 24, 0.07 );
	border-left: 3px solid #8c1d18;
	border-radius: 0 8px 8px 0;
	color: #8c1d18;
	margin: 0;
	padding: 0.7rem 0.85rem;
}

/* -------------------------------------------------------------------------- *
 * The confirmation dialog
 * -------------------------------------------------------------------------- */

.pg-pay-dialog[hidden] {
	display: none;
}

.pg-pay-dialog {
	inset: 0;
	position: fixed;
	z-index: 1000;
}

.pg-pay-dialog__backdrop {
	background: rgba( 4, 8, 18, 0.72 );
	inset: 0;
	position: absolute;
}

.pg-pay-dialog__panel {
	background: #FBF7EE;
	border: 1px solid rgba( 212, 175, 55, 0.45 );
	border-radius: var( --wp--custom--radius--card );
	box-shadow: 0 28px 70px rgba( 2, 6, 16, 0.5 );
	color: #16223a;
	left: 50%;
	max-height: calc( 100vh - 2.5rem );
	max-width: 34rem;
	overflow-y: auto;
	padding: clamp( 1.25rem, 3vw, 2rem );
	position: absolute;
	top: 50%;
	transform: translate( -50%, -50% );
	width: calc( 100vw - 2.5rem );
}

.pg-pay-dialog__ack {
	background: var( --pg-gold-metal );
	border: 0;
	border-radius: 999px;
	color: #16223a;
	cursor: pointer;
	font-size: 0.95rem;
	font-weight: 700;
	margin-top: 1.4rem;
	min-height: 48px;
	padding: 0.75rem 1.2rem;
	width: 100%;
}

/* The page behind must not scroll while the dialog is up. */
body.pg-pay-open {
	overflow: hidden;
}

/* -------------------------------------------------------------------------- *
 * My Account: premium login / register cards
 *
 * WooCommerce's stock two-column login/register renders as bare forms on the
 * navy page. Both forms become ivory cards matching the purchase card, with the
 * same input and button treatment as checkout.
 * -------------------------------------------------------------------------- */

.woocommerce-account .u-columns.col2-set,
.woocommerce-account .u-column1.col-1,
.woocommerce-account .u-column2.col-2 {
	float: none;
	width: 100%;
}

.woocommerce-account .u-columns.col2-set {
	display: grid;
	gap: var( --wp--preset--spacing--50 );
	grid-template-columns: repeat( auto-fit, minmax( min( 100%, 380px ), 1fr ) );
	margin: 0 auto var( --wp--preset--spacing--70 );
	max-width: 980px;
}

.woocommerce-account .u-column1 h2,
.woocommerce-account .u-column2 h2 {
	color: #16223a;
	font-size: 1.35rem;
	font-weight: 700;
	margin: 0 0 1rem;
}

.woocommerce-account form.woocommerce-form-login,
.woocommerce-account form.woocommerce-form-register {
	background: #FBF7EE;
	border: 1px solid rgba( 212, 175, 55, 0.35 );
	border-radius: var( --wp--custom--radius--card );
	box-shadow: 0 18px 44px rgba( 2, 6, 16, 0.35 );
	box-sizing: border-box;
	color: #16223a;
	margin: 0;
	padding: clamp( 1.15rem, 2.4vw, 1.75rem );
}

/* The card carries its own heading colour; the columns sit on navy. */
.woocommerce-account .u-column1,
.woocommerce-account .u-column2 {
	color: var( --wp--preset--color--white );
}

.woocommerce-account .u-column1 h2,
.woocommerce-account .u-column2 h2 {
	color: var( --wp--preset--color--white );
}

/*
 * LABEL COLOUR FOLLOWS THE SURFACE THE FORM SITS ON.
 *
 * Only the Login and Register forms are ivory cards. Account details, Addresses,
 * and Lost password render straight onto the navy page, where their inputs,
 * fieldset legends, and help text are already styled light. This rule used to
 * set #16223a for EVERY account form, which put navy labels on the navy page —
 * "First name", "Last name", "Display name", "Email address", and both password
 * labels were effectively invisible (1.2:1) on Account details.
 *
 * The base is therefore light, and the ivory cards override it below.
 */
.woocommerce-account form .woocommerce-form-row label,
.woocommerce-account form .form-row label {
	color: var( --wp--preset--color--white );
	display: block;
	font-size: 0.9rem;
	font-weight: 600;
	margin-bottom: 0.3rem;
}

/* The ivory login/register cards take navy labels back. */
.woocommerce-account form.woocommerce-form-login .woocommerce-form-row label,
.woocommerce-account form.woocommerce-form-register .woocommerce-form-row label,
.woocommerce-account form.woocommerce-form-login .form-row label,
.woocommerce-account form.woocommerce-form-register .form-row label {
	color: #16223a;
}

.pcs-optional {
	color: #5a6478;
	font-weight: 400;
}

.woocommerce-account form .woocommerce-form-row input.input-text,
.woocommerce-account form .woocommerce-form-row select {
	background: #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: 46px;
	padding: 0.55rem 0.8rem;
	width: 100%;
}

.woocommerce-account form .woocommerce-form-row input.input-text:focus,
.woocommerce-account form .woocommerce-form-row select:focus {
	border-color: #a67c22;
	box-shadow: 0 0 0 1px #a67c22;
	outline: none;
}

/* The acknowledgment: quiet gold-tinted panel, not a warning screen. */
.pcs-ack-row {
	margin-top: 0.4rem;
}

.pcs-ack {
	background: rgba( 212, 175, 55, 0.1 );
	border: 1px solid rgba( 212, 175, 55, 0.4 );
	border-radius: var( --wp--custom--radius--md );
	display: flex;
	gap: 0.65rem;
	padding: 0.85rem 0.95rem;
}

.pcs-ack input[type="checkbox"] {
	accent-color: #a67c22;
	flex-shrink: 0;
	height: 18px;
	margin-top: 2px;
	width: 18px;
}

.pcs-ack span {
	color: #16223a;
	font-size: 0.88rem;
	font-weight: 400;
	line-height: 1.55;
}

.pcs-ack a {
	color: #8a6a16;
}

.woocommerce-account form .woocommerce-form-login__submit,
.woocommerce-account form .woocommerce-form-register__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: 1rem;
	font-weight: 700;
	margin-top: 1rem;
	min-height: 48px;
	padding: 0.8rem 1.6rem;
	width: 100%;
}

.woocommerce-account form .woocommerce-form-login__submit:hover,
.woocommerce-account form .woocommerce-form-register__submit:hover {
	background-image: var( --pg-gold-metal-hover );
}

.woocommerce-account .woocommerce-LostPassword a,
.woocommerce-account .woocommerce-form-login__rememberme {
	color: #5a6478;
	font-size: 0.9rem;
}

.woocommerce-account .woocommerce-LostPassword a:hover {
	color: #8a6a16;
}

/* Logged-in dashboard: navigation and content on the navy page. */
.woocommerce-account .woocommerce-MyAccount-navigation ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	list-style: none;
	margin: 0 0 var( --wp--preset--spacing--50 );
	padding: 0;
}

/*
 * Identical box metrics on every pill. The active state changes background,
 * border COLOR, and text color only — never border width, padding, or line
 * height — so the selected pill cannot sit higher than its neighbors.
 */
.woocommerce-account .woocommerce-MyAccount-navigation a {
	align-items: center;
	border: 1px solid rgba( 212, 175, 55, 0.35 );
	border-radius: var( --wp--custom--radius--pill );
	box-sizing: border-box;
	color: var( --wp--preset--color--white );
	display: inline-flex;
	font-size: 0.9rem;
	font-weight: 600;
	justify-content: center;
	line-height: 1.2;
	min-height: 40px;
	padding: 0.45rem 1rem;
	text-decoration: none;
	vertical-align: top;
}

.woocommerce-account .woocommerce-MyAccount-navigation li {
	display: flex;
	margin: 0;
}

.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation a:hover {
	background: rgba( 212, 175, 55, 0.14 );
	border-color: rgba( 212, 175, 55, 0.7 );
	color: var( --wp--preset--color--gold );
}

/* -------------------------------------------------------------------------- *
 * Cart drawer: empty state and BAC Water supply prompt
 * -------------------------------------------------------------------------- */

/* The face is sized here so the inline SVG stroke weights stay legible. */
.pg-drawer__face {
	color: #5a6478;
	display: block;
	height: 92px;
	margin: 0 auto 1rem;
	width: 92px;
}

.pg-drawer__empty-title {
	font-size: 1.1rem;
	font-weight: 700;
}

/*
 * One compact row, not a second advert: image, name, size, price, Add. The
 * prompt is removed server-side once BAC Water is in the cart, so there is no
 * dismissed-state styling to maintain.
 */
.pg-suggest {
	background: #fff;
	border: 1px solid rgba( 212, 175, 55, 0.45 );
	border-radius: var( --wp--custom--radius--md );
	margin-top: 1rem;
	padding: 0.85rem 0.9rem;
}

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

.pg-suggest__row {
	align-items: center;
	display: flex;
	gap: 0.75rem;
}

.pg-suggest__media {
	align-items: center;
	background: #FBF7EE;
	border-radius: 8px;
	display: flex;
	flex: 0 0 52px;
	height: 52px;
	justify-content: center;
	overflow: hidden;
}

.pg-suggest__media img,
.pg-suggest__img {
	display: block;
	height: 52px;
	max-width: none;
	object-fit: contain;
	width: auto;
}

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

.pg-suggest__name {
	color: #16223a;
	font-size: 0.92rem;
	font-weight: 600;
	margin: 0 0 0.45rem;
}

.pg-suggest__controls {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.pg-suggest__select {
	background: #fff;
	border: 1px solid rgba( 22, 34, 58, 0.22 );
	border-radius: 8px;
	color: #16223a;
	flex: 1 1 auto;
	font-size: 0.85rem;
	min-height: 38px;
	min-width: 0;
	padding: 0.3rem 0.5rem;
}

.pg-suggest__single {
	color: #3d4a63;
	flex: 1 1 auto;
	font-size: 0.85rem;
}

.pg-suggest__add {
	background-image: var( --pg-gold-metal );
	border: 0;
	border-radius: 8px;
	color: #16223a;
	cursor: pointer;
	flex-shrink: 0;
	font-size: 0.85rem;
	font-weight: 700;
	min-height: 38px;
	padding: 0.3rem 1.1rem;
}

.pg-suggest__add:disabled {
	cursor: default;
	opacity: 0.6;
}

/* -------------------------------------------------------------------------- *
 * Product page: technical header and Compound Information cards
 * -------------------------------------------------------------------------- */

.pg-tech-header {
	margin: 0 0 1rem;
}

.pg-tech-header__name {
	color: #3d4a63;
	font-size: 0.95rem;
	font-weight: 600;
	margin: 0 0 0.5rem;
}

.pg-tech-header__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.pg-tech-header__chip {
	background: rgba( 22, 34, 58, 0.06 );
	border: 1px solid rgba( 22, 34, 58, 0.14 );
	border-radius: var( --wp--custom--radius--pill );
	color: #16223a;
	font-size: 0.74rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	padding: 4px 10px;
	text-transform: uppercase;
}

.pg-tech-header__desc {
	color: #3d4a63;
	font-size: 0.92rem;
	line-height: 1.6;
	margin: 0.7rem 0 0;
}

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

/*
 * Section header: an icon tile beside a stacked title and subtitle. The tile is
 * a fixed square so the heading baseline stays put whether or not the subtitle
 * wraps, which is what keeps a row of these aligned down a long page.
 */
.pg-compound__head {
	align-items: center;
	display: flex;
	gap: 0.95rem;
	margin: 0 0 var( --wp--preset--spacing--50 );
}

/*
 * This section renders inside .pg-product-page__info, which is a LIGHT band
 * (#f8f9fb) — not the navy used elsewhere on the page. Every colour below is
 * chosen against that light surface. Getting this wrong once already shipped a
 * white heading on a near-white background at roughly 1.02:1.
 */
.pg-compound__icon {
	align-items: center;
	background: rgba( 212, 175, 55, 0.16 );
	border: 1px solid rgba( 176, 137, 26, 0.32 );
	border-radius: 14px;
	color: #8a6a16;
	display: flex;
	flex: 0 0 auto;
	height: 46px;
	justify-content: center;
	width: 46px;
}

.pg-compound__icon svg {
	height: 24px;
	width: 24px;
}

.pg-compound__headings {
	min-width: 0;
}

.pg-compound__title {
	color: #16223a;
	font-size: clamp( 1.5rem, 2.8vw, 2.05rem );
	font-weight: 700;
	letter-spacing: -0.01em;
	margin: 0;
}

/*
 * Two columns, not auto-fit. The approved layout pairs a profile card with a
 * storage card at roughly equal width; auto-fit would break them to three-up on
 * a wide screen and lose that pairing.
 */
.pg-compound__grid {
	align-items: start;
	display: grid;
	gap: var( --wp--preset--spacing--40 );
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
}

/*
 * A third column for the products that need one.
 *
 * Two columns suit a single compound, whose section is one profile card beside
 * one storage card. KLOW renders six — four components, the blend, and storage
 * — and at two columns that becomes a tall stack the reader has to scroll past.
 * The modifier is applied from the card count rather than from the product, so
 * it follows complexity wherever it appears.
 *
 * Only above 1200px: at 1000px a third column squeezes the label/value rows
 * enough that values start wrapping under their labels.
 */
@media ( min-width: 1200px ) {
	.pg-compound__grid--wide {
		grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	}
}

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

.pg-tech {
	background: #FBF7EE;
	border: 1px solid rgba( 212, 175, 55, 0.35 );
	border-radius: var( --wp--custom--radius--card );
	color: #16223a;
	padding: clamp( 1.15rem, 2.4vw, 1.6rem );
}

.pg-tech__title {
	color: #16223a;
	font-size: 1.05rem;
	font-weight: 700;
	margin: 0 0 0.9rem;
}

.pg-tech__list {
	margin: 0;
}

.pg-tech__row {
	border-top: 1px solid rgba( 22, 34, 58, 0.12 );
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1rem;
	padding: 0.6rem 0;
}

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

.pg-tech__label {
	color: #5a6478;
	flex: 0 0 42%;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	margin: 0;
	text-transform: uppercase;
}

.pg-tech__value {
	color: #16223a;
	flex: 1 1 auto;
	font-size: 0.95rem;
	margin: 0;
	min-width: 0;
	overflow-wrap: anywhere;
}

.pg-tech__prose,
.pg-tech__note {
	color: #3d4a63;
	font-size: 0.92rem;
	line-height: 1.65;
	margin: 0;
}

.pg-tech__note {
	color: #5a6478;
	font-size: 0.84rem;
	margin-top: 0.75rem;
}

.pg-tech__link {
	margin: 1rem 0 0;
}

.pg-tech__link a {
	color: #8a6a16;
	font-size: 0.9rem;
	font-weight: 600;
}

.pg-compound__ruo {
	color: #5a6478;
	font-size: 0.82rem;
	margin: 1.25rem 0 0;
}

@media ( max-width: 781px ) {
	.pg-tech__label {
		flex: 1 1 100%;
	}
}

/* -------------------------------------------------------------------------- *
 * Checkout: light interface
 *
 * The checkout was navy-on-navy and hard to read. It becomes an ivory page with
 * navy type and white controls, keeping the gold only as an accent on the focus
 * ring and the place-order button. Contrast measured against #FBF7EE: navy body
 * 14.8:1, muted 5.6:1, gold-dark 4.7:1 — all past 4.5:1.
 * -------------------------------------------------------------------------- */

/*
 * SCOPED TO .pg-checkout-main, NOT THE BODY CLASS — DO NOT WIDEN THIS.
 *
 * .woocommerce-checkout is a class on <body>, so scoping the ivory text colours
 * to it alone paints the ENTIRE page navy — including the site header and
 * footer, which sit on navy backgrounds. That put navy nav links on the navy
 * header (1.1:1, invisible) and navy "Support"/"Company" headings on the near
 * black footer. It went unnoticed only because WooCommerce's own checkout
 * template rendered no header or footer at all; restoring the Peptogenesis
 * chrome exposed it. The checkout's light surface must stop at its own main.
 */
.woocommerce-checkout {
	background: #FBF7EE;
}

.woocommerce-checkout .pg-checkout-main,
.woocommerce-checkout .pg-checkout {
	background: #FBF7EE;
	color: #16223a;
}

.woocommerce-checkout .pg-checkout-main h1,
.woocommerce-checkout .pg-checkout-main h2,
.woocommerce-checkout .pg-checkout-main h3,
.woocommerce-checkout .pg-checkout-main label,
.woocommerce-checkout .pg-checkout-main legend,
.woocommerce-checkout .pg-checkout-main th {
	color: #16223a;
}

.woocommerce-checkout .pg-checkout-main p,
.woocommerce-checkout .pg-checkout-main td,
.woocommerce-checkout .pg-checkout-main .woocommerce-input-wrapper span {
	color: #3d4a63;
}

.woocommerce-checkout .form-row label {
	display: block;
	font-size: 0.9rem;
	font-weight: 600;
	margin-bottom: 0.35rem;
}

.woocommerce-checkout input[ type="text" ],
.woocommerce-checkout input[ type="email" ],
.woocommerce-checkout input[ type="tel" ],
.woocommerce-checkout input[ type="password" ],
.woocommerce-checkout input[ type="number" ],
.woocommerce-checkout select,
.woocommerce-checkout textarea,
.woocommerce-checkout .select2-selection {
	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.65rem 0.85rem;
	width: 100%;
}

.woocommerce-checkout input:focus,
.woocommerce-checkout select:focus,
.woocommerce-checkout textarea:focus {
	border-color: #a67c22;
	box-shadow: 0 0 0 3px rgba( 212, 175, 55, 0.24 );
	outline: none;
}

/* Two columns on desktop, with the summary sticky beside the form. */
.woocommerce-checkout form.checkout {
	display: grid;
	gap: var( --wp--preset--spacing--50 );
	grid-template-columns: minmax( 0, 1.35fr ) minmax( 0, 1fr );
	margin: 0 auto;
	max-width: 1180px;
}

/* The grid item is the wrapper, not #customer_details, which now sits inside it. */
.woocommerce-checkout .pg-checkout__left {
	grid-column: 1;
}

.woocommerce-checkout #order_review,
.woocommerce-checkout #order_review_heading {
	grid-column: 2;
}

.woocommerce-checkout #order_review {
	align-self: start;
	background: #fff;
	border: 1px solid rgba( 22, 34, 58, 0.14 );
	border-radius: var( --wp--custom--radius--card );
	box-shadow: 0 8px 24px rgba( 2, 6, 16, 0.07 );
	padding: clamp( 1.1rem, 2.2vw, 1.6rem );
	position: sticky;
	top: 1.5rem;
}

.woocommerce-checkout #order_review_heading {
	font-size: 1.15rem;
	font-weight: 700;
	margin: 0 0 0.75rem;
}

.woocommerce-checkout .shop_table,
.woocommerce-checkout .shop_table th,
.woocommerce-checkout .shop_table td {
	background: transparent;
	border-color: rgba( 22, 34, 58, 0.12 );
	color: #16223a;
}

.woocommerce-checkout .order-total .amount {
	color: #16223a;
	font-size: 1.15rem;
	font-weight: 700;
}

.woocommerce-checkout #place_order {
	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;
	width: 100%;
}

.woocommerce-checkout #place_order:hover {
	background-image: var( --pg-gold-metal-hover );
}

/* A quiet secure-checkout marker; no badge imagery, no claims. */
.pg-checkout__secure {
	align-items: center;
	color: #5a6478;
	display: flex;
	font-size: 0.85rem;
	gap: 0.4rem;
	justify-content: center;
	margin-top: 0.85rem;
}

.pg-checkout__secure svg {
	color: #a67c22;
}

@media ( max-width: 900px ) {
	.woocommerce-checkout form.checkout {
		grid-template-columns: minmax( 0, 1fr );
	}

	.woocommerce-checkout .pg-checkout__left,
	.woocommerce-checkout #order_review,
	.woocommerce-checkout #order_review_heading {
		grid-column: 1;
	}

	.woocommerce-checkout #order_review {
		position: static;
	}
}

/* -------------------------------------------------------------------------- *
 * My Account: customer portal
 * -------------------------------------------------------------------------- */

.woocommerce-account .pg-portal {
	background: #FBF7EE;
	border: 1px solid rgba( 212, 175, 55, 0.3 );
	border-radius: var( --wp--custom--radius--card );
	color: #16223a;
	margin: 0 auto var( --wp--preset--spacing--50 );
	max-width: 1100px;
	padding: clamp( 1.25rem, 3vw, 2rem );
}

.pg-portal__head {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
}

/* Initial avatar: the customer's own initial, never a stock silhouette. */
.pg-portal__avatar {
	align-items: center;
	background-image: var( --pg-gold-metal );
	border-radius: 50%;
	color: #16223a;
	display: flex;
	flex-shrink: 0;
	font-size: 1.5rem;
	font-weight: 700;
	height: 60px;
	justify-content: center;
	width: 60px;
}

.pg-portal__greeting {
	color: #16223a;
	font-size: clamp( 1.3rem, 2.6vw, 1.7rem );
	font-weight: 700;
	margin: 0;
}

.pg-portal__since {
	color: #5a6478;
	font-size: 0.88rem;
	margin: 0.15rem 0 0;
}

.pg-portal__stats {
	display: grid;
	gap: 0.75rem;
	grid-template-columns: repeat( auto-fit, minmax( min( 100%, 190px ), 1fr ) );
	margin-top: var( --wp--preset--spacing--40 );
}

.pg-portal__stat {
	background: #fff;
	border: 1px solid rgba( 22, 34, 58, 0.12 );
	border-radius: var( --wp--custom--radius--md );
	padding: 0.9rem 1rem;
}

.pg-portal__stat-label {
	color: #5a6478;
	display: block;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
}

.pg-portal__stat-value {
	color: #16223a;
	display: block;
	font-size: 1.35rem;
	font-weight: 700;
	margin-top: 0.2rem;
}

.pg-portal__links {
	display: grid;
	gap: 0.75rem;
	grid-template-columns: repeat( auto-fit, minmax( min( 100%, 170px ), 1fr ) );
	margin-top: var( --wp--preset--spacing--40 );
}

.pg-portal__link {
	background: #fff;
	border: 1px solid rgba( 22, 34, 58, 0.14 );
	border-radius: var( --wp--custom--radius--md );
	color: #16223a;
	display: block;
	font-weight: 600;
	padding: 0.85rem 1rem;
	text-decoration: none;
	transition: border-color var( --pg-duration-base ) var( --pg-easing ), color var( --pg-duration-base ) var( --pg-easing );
}

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

.pg-portal__link-sub {
	color: #5a6478;
	display: block;
	font-size: 0.82rem;
	font-weight: 400;
	margin-top: 0.15rem;
}

/* -------------------------------------------------------------------------- *
 * Compound Information cards
 *
 * Same information architecture as the reference layouts — ivory technical
 * cards, a dark card for blend/reference summaries, restrained badges — drawn
 * entirely in the Peptogenesis palette. Nothing here is borrowed artwork: the
 * surfaces, gold accent, and radii are the tokens already used by the purchase
 * card and the drawer.
 * -------------------------------------------------------------------------- */

.pg-compound__sub {
	color: #5a6478;
	font-size: 0.92rem;
	margin: 0.15rem 0 0;
}

/*
 * White card on the light band, with a neutral hairline rather than a gold one.
 * Gold at card scale turned the whole section amber; it is kept for the small
 * accents — the header tile and the source links — where it still reads as the
 * brand without tinting every surface.
 */
.pg-cc {
	background: #fff;
	border: 1px solid rgba( 22, 34, 58, 0.1 );
	border-radius: 20px;
	box-shadow: 0 1px 2px rgba( 16, 24, 40, 0.04 );
	color: #16223a;
	display: flex;
	flex-direction: column;
	padding: clamp( 1.5rem, 3vw, 2.15rem );
}

/*
 * Eyebrow above the card heading. Uppercase and small, so it reads as a
 * category marker rather than competing with the heading beneath it.
 */
.pg-cc__eyebrow {
	align-items: center;
	color: rgba( 22, 34, 58, 0.62 );
	display: flex;
	font-size: 0.72rem;
	font-weight: 600;
	gap: 0.5rem;
	letter-spacing: 0.09em;
	margin: 0 0 0.85rem;
	text-transform: uppercase;
}

.pg-cc__eyebrow-icon {
	align-items: center;
	background: rgba( 22, 34, 58, 0.06 );
	border-radius: 7px;
	color: #4a5a76;
	display: flex;
	flex: 0 0 auto;
	height: 24px;
	justify-content: center;
	width: 24px;
}

.pg-cc__eyebrow-icon svg {
	height: 14px;
	width: 14px;
}

.pg-cc--dark .pg-cc__eyebrow {
	color: rgba( 255, 255, 255, 0.66 );
}

.pg-cc--dark .pg-cc__eyebrow-icon {
	background: rgba( 255, 255, 255, 0.1 );
	color: var( --wp--preset--color--gold );
}

/* Dark variant: blend summaries and research references. */
.pg-cc--dark {
	background: #10203f;
	border-color: rgba( 212, 175, 55, 0.4 );
	color: var( --wp--preset--color--white );
}

.pg-cc--warn {
	background: #fdf6ec;
	border-color: rgba( 180, 105, 20, 0.45 );
}

.pg-cc--info {
	background: #eef4fb;
	border-color: rgba( 42, 94, 158, 0.3 );
}

/*
 * The colour is explicit, not inherited from .pg-cc.
 *
 * theme.json sets elements.heading.text to white for the navy site, and
 * WordPress emits that as `:root :where(h1,h2,h3,h4,h5,h6){color:white}`. That
 * selector matches this h3 directly, so it beats any colour inherited from an
 * ancestor class no matter how specific the ancestor is. Every heading this
 * theme places on a light surface therefore has to name its own colour.
 *
 * The ancestor is in the selector on purpose. `:where()` carries no
 * specificity, so WordPress's rule scores (0,1,0) from `:root` alone — exactly
 * tying a bare `.pg-cc__title`, which would leave the winner decided by
 * stylesheet load order. Qualifying it to (0,2,0) settles it outright.
 */
.pg-compound .pg-cc__title {
	color: #16223a;
	font-size: clamp( 1.15rem, 2vw, 1.4rem );
	font-weight: 700;
	letter-spacing: -0.01em;
	margin: 0 0 1.15rem;
}

.pg-cc--dark .pg-cc__title {
	color: var( --wp--preset--color--white );
}

/*
 * The spec table sits in its own inset panel rather than running edge to edge
 * in the card. That panel is what visually separates "the data" from the card's
 * heading and its footnotes, and it is the strongest single cue in the approved
 * layout reference.
 */
.pg-cc__list {
	background: #f4f6f8;
	border-radius: 14px;
	margin: 0;
	padding: 0.35rem 1.1rem;
}

.pg-cc--dark .pg-cc__list {
	background: rgba( 255, 255, 255, 0.05 );
}

/*
 * Label left, value hard right. Space-between rather than a fixed label column:
 * values here range from "15" to a 43-residue note, and a fixed column either
 * strands the short ones or crushes the long ones.
 */
.pg-cc__row {
	align-items: baseline;
	border-top: 1px solid rgba( 22, 34, 58, 0.1 );
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem 1.5rem;
	justify-content: space-between;
	padding: 0.8rem 0;
}

.pg-cc--dark .pg-cc__row {
	border-top-color: rgba( 255, 255, 255, 0.12 );
}

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

.pg-cc__label {
	color: #5a6478;
	font-size: 0.88rem;
	font-weight: 400;
	letter-spacing: 0;
	margin: 0;
	text-transform: none;
}

.pg-cc--dark .pg-cc__label {
	color: var( --wp--preset--color--slate );
}

.pg-cc__value {
	color: #16223a;
	font-size: 0.92rem;
	font-weight: 700;
	margin: 0;
	min-width: 0;
	overflow-wrap: anywhere;
	text-align: right;
}

.pg-cc--dark .pg-cc__value {
	color: var( --wp--preset--color--white );
}

/*
 * Phones: label above value, tightly.
 *
 * The desktop row is a flex line with the label left and the value right. On a
 * phone the pair no longer fits side by side, so it wraps — and a wrapped flex
 * line plus baseline alignment and the row's own padding inflated each row to
 * 116px for about 47px of text. KLOW renders thirty-three of those rows across
 * six cards, which made its specification section 6,315px tall: the reader
 * scrolls past six screens of it to reach the storage card.
 *
 * Stacking explicitly is both shorter and easier to scan, because the value sits
 * directly under the label it belongs to instead of across a gap from it.
 */
@media ( max-width: 600px ) {
	.pg-compound .pg-cc__row {
		display: block;
		padding: 0.5rem 0;
	}

	.pg-compound .pg-cc__label {
		display: block;
		font-size: 0.82rem;
	}

	.pg-compound .pg-cc__value {
		margin-top: 0.1rem;
		text-align: left;
	}
}

.pg-cc__prose,
.pg-cc__note {
	color: #3d4a63;
	font-size: 0.92rem;
	line-height: 1.65;
	margin: 0.85rem 0 0;
}

.pg-cc--dark .pg-cc__prose {
	color: var( --wp--preset--color--slate );
}

.pg-cc__note {
	color: #5a6478;
	font-size: 0.84rem;
}

/* Darkened gold: brand gold is ~2:1 on the white card. */
.pg-cc__note-link {
	color: #8a6a16;
	font-weight: 600;
	white-space: nowrap;
}

.pg-cc--dark .pg-cc__note-link {
	color: var( --wp--preset--color--gold );
}

.pg-cc__bullets {
	color: #3d4a63;
	font-size: 0.92rem;
	line-height: 1.6;
	margin: 0;
	padding-left: 1.15rem;
}

.pg-cc__bullets li + li {
	margin-top: 0.4rem;
}

/* Handling badges: informative chips, not warning banners. */
.pg-cc__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	list-style: none;
	margin: 0 0 0.35rem;
	padding: 0;
}

.pg-cc__badge {
	background: rgba( 22, 34, 58, 0.06 );
	border: 1px solid rgba( 22, 34, 58, 0.1 );
	border-radius: var( --wp--custom--radius--pill );
	color: #2b3852;
	font-size: 0.82rem;
	font-weight: 500;
	letter-spacing: 0;
	padding: 8px 15px;
}

/* Direct source links. */
.pg-cc__sources {
	list-style: none;
	margin: 1rem 0 0;
	padding: 0;
}

.pg-cc__sources li + li {
	margin-top: 0.4rem;
}

.pg-cc__sources a {
	align-items: baseline;
	color: #8a6a16;
	display: inline-flex;
	font-size: 0.88rem;
	font-weight: 600;
	gap: 0.35rem;
	text-decoration: none;
}

.pg-cc--dark .pg-cc__sources a {
	color: var( --wp--preset--color--gold );
}

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

/*
 * Sources & References: its own section below the card grid, so citations read
 * as a reference list rather than as one more spec card in the row.
 */
/* The references section follows the card grid, so it drops its top padding. */
.pg-compound--refs {
	padding-top: 0;
}

.pg-refs {
	background: #fff;
	border: 1px solid rgba( 22, 34, 58, 0.1 );
	border-radius: 20px;
	box-shadow: 0 1px 2px rgba( 16, 24, 40, 0.04 );
	padding: clamp( 1.5rem, 3vw, 2.15rem );
}

.pg-refs__intro {
	color: #3d4a63;
	font-size: 0.95rem;
	line-height: 1.65;
	margin: 0 0 1.15rem;
	max-width: 62ch;
}

.pg-refs__grid {
	display: grid;
	gap: 0.6rem 1.75rem;
	grid-template-columns: repeat( auto-fit, minmax( min( 100%, 280px ), 1fr ) );
	margin: 0;
}

.pg-refs__grid li + li {
	margin-top: 0;
}

/* Brand gold at #D4AF37 is ~2:1 on white. This is the darkened gold used for
   every link that sits on a light surface. */
.pg-refs__grid a {
	color: #8a6a16;
}

@media ( max-width: 600px ) {
	/*
	 * Below this width a right-aligned value collides with its own label, so the
	 * pair stacks. Deliberately not the 781px breakpoint the rest of the file
	 * uses: these rows hold short values and survive a narrower viewport.
	 */
	.pg-cc__row {
		flex-direction: column;
	}

	.pg-cc__value {
		text-align: left;
	}
}

/* -------------------------------------------------------------------------- *
 * Shipping Protection card (checkout, left column)
 *
 * Rendered by the catalog-setup plugin, which owns the fee. This file only
 * dresses it, so the money logic survives a theme change.
 *
 * The control is a real checkbox restyled into a switch: the input keeps focus,
 * keyboard, and screen-reader behaviour, and the visible track is drawn from
 * its :checked state. Nothing here uses display:none on the input, which would
 * take it out of the accessibility tree.
 * -------------------------------------------------------------------------- */

.pcs-sp {
	background: #f6f3ec;
	border: 1px solid rgba( 212, 175, 55, 0.38 );
	border-radius: var( --wp--custom--radius--card );
	color: #16223a;
	margin: 1.25rem 0 0;
	padding: 1rem 1.1rem;
	transition: border-color var( --pg-duration-fast ) var( --pg-easing ),
		opacity var( --pg-duration-fast ) var( --pg-easing );
}

.pcs-sp.is-off {
	border-color: rgba( 22, 34, 58, 0.16 );
}

.pcs-sp.is-busy {
	opacity: 0.65;
	pointer-events: none;
}

.pcs-sp__head {
	align-items: center;
	display: flex;
	gap: 0.6rem;
}

.pcs-sp__icon {
	align-items: center;
	color: var( --wp--preset--color--gold );
	display: inline-flex;
	flex: none;
}

.pcs-sp.is-off .pcs-sp__icon {
	color: rgba( 22, 34, 58, 0.4 );
}

/* Title takes the free space so the price is pushed to the right edge. */
.pcs-sp__title {
	color: #16223a;
	flex: 1 1 auto;
	font-family: var( --wp--preset--font-family--heading, inherit );
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 0.01em;
}

.pcs-sp__price {
	color: #16223a;
	flex: none;
	font-size: 1rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

/*
 * The price stays legible while protection is off — the brief requires the fee
 * to remain disclosed so the customer can see what re-enabling would cost — but
 * is muted to read as "not currently charged".
 */
.pcs-sp.is-off .pcs-sp__price {
	color: rgba( 22, 34, 58, 0.55 );
	text-decoration: line-through;
}

.pcs-sp__copy {
	color: rgba( 22, 34, 58, 0.78 );
	font-size: 0.8125rem;
	line-height: 1.55;
	margin: 0.5rem 0 0.85rem;
}

.pcs-sp__terms {
	color: #7a5c12;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.pcs-sp__terms:hover,
.pcs-sp__terms:focus {
	color: #16223a;
}

/* Switch ------------------------------------------------------------------ */

.pcs-sp__switch {
	align-items: center;
	cursor: pointer;
	display: flex;
	gap: 0.6rem;
	margin: 0;
}

/*
 * The input is visually replaced by the track but stays in the layout and in
 * the accessibility tree. It is stretched over the track so a pointer press
 * anywhere on the switch hits the real control.
 */
.pcs-sp__switch input[type="checkbox"] {
	height: 26px;
	margin: 0;
	opacity: 0;
	position: absolute;
	width: 46px;
	z-index: 1;
}

.pcs-sp__track {
	background: rgba( 22, 34, 58, 0.25 );
	border-radius: 999px;
	display: inline-block;
	flex: none;
	height: 26px;
	position: relative;
	transition: background var( --pg-duration-fast ) var( --pg-easing );
	width: 46px;
}

.pcs-sp__thumb {
	background: var( --wp--preset--color--white );
	border-radius: 50%;
	box-shadow: 0 1px 3px rgba( 0, 0, 0, 0.3 );
	height: 20px;
	left: 3px;
	position: absolute;
	top: 3px;
	transition: transform var( --pg-duration-fast ) var( --pg-easing );
	width: 20px;
}

.pcs-sp__switch input[type="checkbox"]:checked ~ .pcs-sp__track {
	background: var( --wp--preset--color--gold );
}

.pcs-sp__switch input[type="checkbox"]:checked ~ .pcs-sp__track .pcs-sp__thumb {
	transform: translateX( 20px );
}

/* Focus ring is drawn on the track, since the input itself is transparent. */
.pcs-sp__switch input[type="checkbox"]:focus-visible ~ .pcs-sp__track {
	outline: 2px solid var( --wp--preset--color--gold );
	outline-offset: 2px;
}

.pcs-sp__state {
	color: rgba( 22, 34, 58, 0.8 );
	font-size: 0.8125rem;
	font-weight: 600;
}

/* -------------------------------------------------------------------------- *
 * Product card actions — Details + Add
 *
 * Rendered by peptogenesis_card_actions_block(). Two controls side by side, so
 * a customer can go straight to the cart without opening the product first.
 * Details is the quiet outline; Add is the gold action.
 * -------------------------------------------------------------------------- */

.pg-product-card__actions {
	display: flex;
	gap: 0.5rem;
	/* Pushes the row to the card's bottom so ragged card heights still align. */
	margin-top: auto;
	padding-top: 0.5rem;
}

.pg-product-card__actions .pg-product-card__link {
	/* Overrides the standalone link's align-self/margin from the base rule. */
	align-self: auto;
	flex: 1 1 0;
	margin-top: 0;
	text-align: center;
}

.pg-product-card__add {
	background: var( --pg-gold-metal, var( --wp--preset--color--gold ) );
	border: 1px solid var( --wp--preset--color--gold );
	border-radius: var( --wp--custom--radius--md );
	color: var( --wp--preset--color--navy );
	flex: 1 1 0;
	font-size: var( --wp--preset--font-size--small );
	font-weight: 700;
	padding: 0.6rem 1rem;
	text-align: center;
	text-decoration: none;
	transition:
		filter var( --pg-duration-base ) var( --pg-easing ),
		transform var( --pg-duration-base ) var( --pg-easing );
}

.pg-product-card__add:hover,
.pg-product-card__add:focus-visible {
	color: var( --wp--preset--color--navy );
	filter: brightness( 1.07 );
}

/*
 * WooCommerce appends its own "View cart" link after an AJAX add. It is styled
 * to sit quietly under the row rather than inheriting the gold button look.
 */
.pg-product-card .added_to_cart {
	color: var( --wp--preset--color--gold );
	font-size: 0.78rem;
	font-weight: 600;
	text-align: center;
	text-decoration: underline;
	width: 100%;
}

/* -------------------------------------------------------------------------- *
 * Mobile Shop
 *
 * Phones get two cards per row. The desktop grid is untouched: every rule here
 * is inside a max-width query, and the grid override is scoped to .pg-shop__grid
 * so the Featured section and the document libraries keep their own layouts.
 * -------------------------------------------------------------------------- */

@media ( max-width: 781px ) {

	/* Two columns. !important is required because the Query Loop's grid layout
	   is emitted as an inline-ish layout style by core, not as a class we can
	   outrank any other way. */
	.pg-shop__grid.is-layout-grid {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) ) !important;
		gap: 0.7rem !important;
	}

	.pg-shop__grid .pg-product-card {
		border-radius: var( --wp--custom--radius--md );
		gap: 0.35rem;
		padding: 0.6rem;
	}

	/* The image stage is the single biggest source of wasted height on a phone:
	   280px per card meant barely one card per screen. */
	.pg-shop__grid .pg-product-card__media {
		height: 132px;
		margin-bottom: 0.4rem;
	}

	.pg-shop__grid .pg-product-card .pg-product-card__title {
		font-size: 0.95rem !important;
		line-height: 1.25;
	}

	.pg-shop__grid .pg-product-card__price {
		font-size: 0.95rem;
	}

	/* "Research Use Only" is a legal marker, not a headline — it stays present
	   and readable but stops competing with the product name. */
	.pg-shop__grid .pg-product-card__badge {
		font-size: 0.55rem;
		letter-spacing: 0.06em;
		padding: 2px 6px;
	}

	/* COA status stays visible but secondary, per the COA rules. */
	.pg-shop__grid .pg-coa-badge {
		font-size: 0.58rem;
		padding: 2px 6px;
	}

	/* Stacked, because two buttons side by side in a half-width card would wrap
	   their own labels. */
	.pg-shop__grid .pg-product-card__actions {
		flex-direction: column;
		gap: 0.35rem;
		padding-top: 0.35rem;
	}

	.pg-shop__grid .pg-product-card__actions .pg-product-card__link,
	.pg-shop__grid .pg-product-card__add {
		font-size: 0.78rem;
		padding: 0.5rem 0.5rem;
	}
}

@media ( max-width: 360px ) {
	.pg-shop__grid .pg-product-card__media {
		height: 112px;
	}
}

/* -------------------------------------------------------------------------- *
 * Checkout layout and surface
 *
 * THE GRID ROWS ARE EXPLICIT ON PURPOSE — DO NOT REVERT TO AUTO-PLACEMENT.
 *
 * The classic checkout form has four children in this order: #customer_details,
 * the Shipping Protection card (inside customer_details), #order_review_heading,
 * and #order_review. Assigning only columns and letting rows auto-place puts
 * customer_details and the heading in row 1 — so row 1 becomes as tall as the
 * entire billing form, and #order_review is pushed to row 2, starting ~1500px
 * down the page with the whole right column empty above it.
 *
 * Spanning customer_details across both rows, and pinning the heading to row 1
 * and the summary to row 2, is what makes the summary sit at the TOP of the
 * right column beside the billing fields, which is the whole point of a
 * two-column checkout.
 * -------------------------------------------------------------------------- */

/* Ivory page surface with navy text, replacing the navy site background. */
.woocommerce-checkout .pg-checkout-main {
	background: #fbf8f2;
	color: #16223a;
	padding-bottom: var( --wp--preset--spacing--70 );
	padding-top: var( --wp--preset--spacing--50 );
}

.woocommerce-checkout .pg-checkout-main h1,
.woocommerce-checkout .pg-checkout-main h2,
.woocommerce-checkout .pg-checkout-main h3,
.woocommerce-checkout .pg-checkout-main label,
.woocommerce-checkout .pg-checkout-main p {
	color: #16223a;
}

@media ( min-width: 900px ) {
	.woocommerce-checkout form.checkout.woocommerce-checkout {
		grid-template-rows: auto 1fr;
	}

	.woocommerce-checkout form.checkout.woocommerce-checkout .pg-checkout__left {
		grid-column: 1;
		grid-row: 1 / span 2;
	}

	.woocommerce-checkout form.checkout.woocommerce-checkout #order_review_heading {
		grid-column: 2;
		grid-row: 1;
	}

	.woocommerce-checkout form.checkout.woocommerce-checkout #order_review {
		grid-column: 2;
		grid-row: 2;
	}
}

/* One clean column on phones and small tablets, in the brief's order. */
@media ( max-width: 899px ) {
	.woocommerce-checkout .pg-checkout,
	.woocommerce-checkout form.checkout.woocommerce-checkout {
		display: block;
	}

	.woocommerce-checkout form.checkout.woocommerce-checkout #order_review_heading {
		margin-top: var( --wp--preset--spacing--50 );
	}

	.woocommerce-checkout #order_review {
		padding: 0.9rem;
	}

	/* Full-width inputs, but first and last name may share a row where there
	   is room — WooCommerce already floats those two as form-row-first/last. */
	.woocommerce-checkout .form-row {
		box-sizing: border-box;
	}
}

@media ( max-width: 480px ) {
	.woocommerce-checkout .form-row-first,
	.woocommerce-checkout .form-row-last {
		float: none !important;
		width: 100% !important;
	}
}

/* Fields: white wells, navy text, gold focus. */
.woocommerce-checkout .pg-checkout-main input[ type="text" ],
.woocommerce-checkout .pg-checkout-main input[ type="email" ],
.woocommerce-checkout .pg-checkout-main input[ type="tel" ],
.woocommerce-checkout .pg-checkout-main input[ type="password" ],
/* date is the purchaser's date of birth — omitted from this list at first, so
   it kept the dark navy field styling and read as broken on the white card. */
.woocommerce-checkout .pg-checkout-main input[ type="date" ],
.woocommerce-checkout .pg-checkout-main input[ type="number" ],
.woocommerce-checkout .pg-checkout-main input[ type="search" ],
.woocommerce-checkout .pg-checkout-main textarea,
.woocommerce-checkout .pg-checkout-main select,
.woocommerce-checkout .pg-checkout-main .select2-selection {
	background: #ffffff;
	border: 1px solid rgba( 22, 34, 58, 0.18 );
	border-radius: var( --wp--custom--radius--md );
	color: #16223a;
}

.woocommerce-checkout .pg-checkout-main input:focus,
.woocommerce-checkout .pg-checkout-main textarea:focus,
.woocommerce-checkout .pg-checkout-main select:focus {
	border-color: var( --wp--preset--color--gold );
	outline: 2px solid rgba( 212, 175, 55, 0.45 );
	outline-offset: 1px;
}

/* Coupon and login prompts: champagne rather than WooCommerce's stock blue. */
.woocommerce-checkout .pg-checkout-main .woocommerce-form-login-toggle .woocommerce-info,
.woocommerce-checkout .pg-checkout-main .woocommerce-form-coupon-toggle .woocommerce-info {
	background: #f6f3ec;
	border: 1px solid rgba( 212, 175, 55, 0.4 );
	border-radius: var( --wp--custom--radius--card );
	color: #16223a;
}

.woocommerce-checkout .pg-checkout-main .woocommerce-info::before {
	color: #a67c22;
}

.woocommerce-checkout .pg-checkout-main .woocommerce-form-coupon,
.woocommerce-checkout .pg-checkout-main .woocommerce-form-login {
	background: #ffffff;
	border: 1px solid rgba( 22, 34, 58, 0.12 );
	border-radius: var( --wp--custom--radius--card );
	padding: 1rem;
}

/* Place Order: the gold action, full width so it reads as the final step. */
.woocommerce-checkout #place_order {
	font-size: 1rem;
	font-weight: 700;
	padding: 0.9rem 1.4rem;
	width: 100%;
}

/*
 * Centred, capped checkout width.
 *
 * The template gives the checkout the theme's wide size (1320px) so the billing
 * column is not squeezed by the 800px content size. This caps it again at a
 * comfortable reading width and centres it, per the brief's "reasonable centered
 * max-width — do not stretch checkout across the entire monitor".
 */
@media ( min-width: 900px ) {
	.woocommerce-checkout form.checkout.woocommerce-checkout,
	.woocommerce-checkout .woocommerce-form-login-toggle,
	.woocommerce-checkout .woocommerce-form-coupon-toggle,
	.woocommerce-checkout .woocommerce-form-login,
	.woocommerce-checkout .woocommerce-form-coupon,
	.woocommerce-checkout .woocommerce-notices-wrapper {
		margin-left: auto;
		margin-right: auto;
		max-width: 1080px;
	}
}

/*
 * The .woocommerce wrapper carries the 1000px cap that actually governs the
 * checkout's width. Centring it is what makes the two columns sit in the middle
 * of a wide monitor instead of hugging the left edge.
 */
.woocommerce-checkout .pg-checkout-main .woocommerce {
	margin-left: auto;
	margin-right: auto;
}

/*
 * Login and coupon prompts.
 *
 * WooCommerce renders these with wc-block-components-notice-banner.is-info,
 * which is stock blue (#f4f8ff on #007cba) and reads as foreign next to the
 * champagne palette. Recoloured to the Peptogenesis accent. The SVG's fill is
 * set through `background` on the icon element by WooCommerce, so it is
 * restated rather than inherited.
 */
.woocommerce-checkout .pg-checkout-main .wc-block-components-notice-banner.is-info {
	background: #f6f3ec;
	border-color: rgba( 212, 175, 55, 0.55 );
	color: #16223a;
}

.woocommerce-checkout .pg-checkout-main .wc-block-components-notice-banner.is-info > svg {
	background: #a67c22;
	fill: #ffffff;
}

.woocommerce-checkout .pg-checkout-main .wc-block-components-notice-banner.is-info a {
	color: #7a5c12;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.woocommerce-checkout .pg-checkout-main .wc-block-components-notice-banner.is-info a:hover,
.woocommerce-checkout .pg-checkout-main .wc-block-components-notice-banner.is-info a:focus {
	color: #16223a;
}

/*
 * Shipping method choices read left-to-right beside their radio, not
 * right-aligned against the totals column. The totals rows align their money to
 * the right, which is correct for figures but turns a multi-line method name
 * into a ragged-left block that is hard to scan.
 */
.woocommerce-checkout #order_review ul#shipping_method {
	margin: 0;
	padding: 0;
	text-align: left;
}

.woocommerce-checkout #order_review ul#shipping_method li {
	align-items: flex-start;
	display: flex;
	gap: 0.5rem;
	text-align: left;
}

.woocommerce-checkout #order_review ul#shipping_method li input {
	flex: none;
	margin-top: 0.25rem;
}

.woocommerce-checkout #order_review ul#shipping_method label {
	flex: 1 1 auto;
	text-align: left;
}

@media ( max-width: 899px ) {
	/* Stack the shipment row so the method list gets the full card width. */
	.woocommerce-checkout #order_review .woocommerce-shipping-totals {
		display: block;
	}

	.woocommerce-checkout #order_review .woocommerce-shipping-totals dd,
	.woocommerce-checkout #order_review .woocommerce-shipping-totals td {
		display: block;
		width: 100%;
	}
}

/*
 * Product gallery overflow on phones (pre-existing defect).
 *
 * .woocommerce-product-gallery is box-sizing: content-box, so its 100% width
 * (342px in a 390px viewport) had its 24px side padding and 1px borders ADDED
 * on top, giving a 392px box and 26px of sideways scroll on every product page.
 * Setting border-box is the actual fix — capping width does nothing, because
 * the padding is added outside the declared width either way.
 */
@media ( max-width: 781px ) {
	.woocommerce-product-gallery {
		box-sizing: border-box;
		max-width: 100%;
	}

	.woocommerce-product-gallery img {
		height: auto;
		max-width: 100%;
	}
}

/* -------------------------------------------------------------------------- *
 * Research verification — compact treatment
 *
 * The legal text is unchanged; only its weight on the page is. Each
 * acknowledgment was a separate bordered, tinted, generously padded card, so
 * four required confirmations plus the optional marketing box read as six
 * stacked panels and dominated the end of the checkout.
 *
 * They become one quiet grouped block with hairline separators: still clearly
 * individual checkboxes with individual hit areas (each remains its own label),
 * but no longer six competing cards.
 * -------------------------------------------------------------------------- */

.pg-verify .pcs-ack-row {
	margin-top: 0;
}

.pg-verify .pcs-ack-row + .pcs-ack-row .pcs-ack {
	border-top: 1px solid rgba( 22, 34, 58, 0.09 );
}

.pg-verify .pcs-ack {
	background: transparent;
	border: 0;
	border-radius: 0;
	gap: 0.55rem;
	padding: 0.6rem 0.1rem;
}

.pg-verify .pcs-ack span {
	font-size: 0.82rem;
	line-height: 1.45;
}

.pg-verify__intro {
	font-size: 0.82rem;
	line-height: 1.5;
}

/* -------------------------------------------------------------------------- *
 * Research verification — left-column card
 *
 * The section now sits in the left column between the address fields and
 * payment, so it has to read as one of the checkout's own steps rather than as
 * an embedded legal form. It gets the same white ground, hairline navy border
 * and radius token as the rest of the checkout's surfaces; the only thing
 * marking it out is a gold rule above the heading, which is the same accent the
 * order summary uses.
 *
 * WHITE, NOT IVORY, ON PURPOSE: the order summary is ivory (#f6f3ec). If this
 * card were ivory too, the two would read as one continuous panel wrapping the
 * page, and the left column would stop looking like a sequence of steps.
 * -------------------------------------------------------------------------- */

.woocommerce-checkout .pg-verify {
	background: #ffffff;
	border: 1px solid rgba( 22, 34, 58, 0.14 );
	border-radius: var( --wp--custom--radius--card );
	padding: clamp( 1rem, 2vw, 1.4rem );
	position: relative;
}

.woocommerce-checkout .pg-verify::before {
	background-image: var( --pg-gold-metal );
	border-radius: var( --wp--custom--radius--card ) var( --wp--custom--radius--card ) 0 0;
	content: "";
	height: 3px;
	left: -1px;
	position: absolute;
	right: -1px;
	top: -1px;
}

.woocommerce-checkout .pg-verify__title {
	font-size: clamp( 1.05rem, 1.6vw, 1.2rem );
	margin: 0 0 0.35rem;
}

.woocommerce-checkout .pg-verify__intro {
	color: #4a5568;
	margin: 0 0 1rem;
	max-width: 58ch;
}

/* Updated-terms notice for a returning customer whose accepted version is old. */
.woocommerce-checkout .pg-verify__notice {
	background: #f6f3ec;
	border: 1px solid rgba( 212, 175, 55, 0.45 );
	border-radius: var( --wp--custom--radius--md );
	font-size: 0.82rem;
	line-height: 1.5;
	margin: 0 0 1rem;
	padding: 0.7rem 0.85rem;
}

/*
 * Date of birth and research role share a row on desktop — they are short,
 * related, and stacking them made the card twice as tall as it needed to be.
 * Grid rather than WooCommerce's form-row-first/last floats, which do not
 * clear predictably next to a conditionally hidden third row.
 */
.woocommerce-checkout .pg-verify__fields {
	display: grid;
	gap: 0 1rem;
	grid-template-columns: 1fr 1fr;
}

.woocommerce-checkout .pg-verify__fields .pg-verify__row {
	float: none;
	margin-bottom: 0.9rem;
	width: auto;
}

.woocommerce-checkout .pg-verify__fields #pcs_verify_other_row {
	grid-column: 1 / -1;
}

.woocommerce-checkout .pg-verify__fields label {
	display: block;
	font-size: 0.82rem;
	font-weight: 600;
	margin-bottom: 0.3rem;
}

.woocommerce-checkout .pg-verify__fields .input-text,
.woocommerce-checkout .pg-verify__fields select {
	box-sizing: border-box;
	min-height: 46px;
	padding: 0.55rem 0.7rem;
	width: 100%;
}

.woocommerce-checkout .pg-verify__hint {
	color: #5a6478;
	display: block;
	font-size: 0.74rem;
	margin-top: 0.25rem;
}

/* -------------------------------------------------------------------------- *
 * Verified returning purchaser
 *
 * The reward for having verified once is that this replaces the entire form, so
 * it is deliberately one line tall. Anything more and the account record would
 * have saved the customer no effort at all.
 * -------------------------------------------------------------------------- */

.woocommerce-checkout .pg-verify__status {
	align-items: center;
	background: #f3f7f2;
	border: 1px solid rgba( 42, 122, 74, 0.32 );
	border-radius: var( --wp--custom--radius--md );
	display: flex;
	gap: 0.6rem;
	margin-bottom: 0.9rem;
	padding: 0.7rem 0.85rem;
}

.woocommerce-checkout .pg-verify__badge {
	align-items: center;
	background: #2a7a4a;
	border-radius: 50%;
	color: #ffffff;
	display: inline-flex;
	flex: 0 0 auto;
	height: 22px;
	justify-content: center;
	width: 22px;
}

.woocommerce-checkout .pg-verify__status-text {
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
	line-height: 1.35;
}

.woocommerce-checkout .pg-verify__status-text strong {
	font-size: 0.9rem;
}

.woocommerce-checkout .pg-verify__status-meta {
	color: #5a6478;
	font-size: 0.76rem;
}

/* -------------------------------------------------------------------------- *
 * Optional marketing consent
 *
 * Divided from the required block by a rule and set a step quieter, so it can
 * never be mistaken for part of the agreement above it. It is not a condition of
 * sale and must not look like one.
 * -------------------------------------------------------------------------- */

.woocommerce-checkout .pg-verify__optional {
	border-top: 1px solid rgba( 22, 34, 58, 0.1 );
	margin-top: 0.9rem;
	padding-top: 0.75rem;
}

.woocommerce-checkout .pg-verify__optional .pcs-ack span {
	color: #5a6478;
	font-size: 0.78rem;
}

.woocommerce-checkout .pg-verify__optional-tag {
	background: rgba( 22, 34, 58, 0.07 );
	border-radius: 3px;
	font-size: 0.68rem;
	letter-spacing: 0.04em;
	margin-left: 0.35rem;
	padding: 0.1rem 0.35rem;
	text-transform: uppercase;
	white-space: nowrap;
}

/* Mobile: one column, bigger targets, nothing clipped. */
@media ( max-width: 899px ) {
	.woocommerce-checkout .pg-checkout__left {
		display: block;
	}

	.woocommerce-checkout .pg-verify {
		margin-top: var( --wp--preset--spacing--40 );
	}

	/*
	 * Stacked. Two 50% columns at this width would leave the date input too
	 * narrow for its own MM/DD/YYYY placeholder, and a select too narrow for the
	 * longer role names — which is how dropdowns end up clipping their options.
	 */
	.woocommerce-checkout .pg-verify__fields {
		grid-template-columns: 1fr;
	}

	/*
	 * SELECTOR SHAPE MATTERS — DO NOT SIMPLIFY THIS BACK.
	 *
	 * WooCommerce sets the field size with
	 * `.woocommerce-page form .form-row input.input-text`, which is
	 * (0,3,1). The obvious `.woocommerce-checkout .pg-verify__fields .input-text`
	 * is (0,3,0) and quietly loses, leaving the field at 14px — under the 16px
	 * threshold at which iOS Safari zooms the whole page in on focus, which is
	 * how a checkout ends up scrolled sideways the moment someone taps a field.
	 * Carrying .pg-verify and the element name takes this to (0,4,1) so it wins.
	 */
	.woocommerce-checkout .pg-verify .pg-verify__fields input.input-text,
	.woocommerce-checkout .pg-verify .pg-verify__fields select {
		font-size: 16px;
		min-height: 50px;
	}

	/* Comfortable tap targets for the acknowledgment boxes. */
	.woocommerce-checkout .pg-verify .pcs-ack input[type="checkbox"],
	.woocommerce-checkout .pg-verify__optional input[type="checkbox"] {
		height: 22px;
		min-width: 22px;
		width: 22px;
	}

	.woocommerce-checkout .pg-verify .pcs-ack span {
		font-size: 0.85rem;
	}

	/* The policy panel must not become a tiny scrolling window on a phone. */
	.woocommerce-checkout .pg-verify .pg-terms__body {
		max-height: 40vh;
	}
}

/* -------------------------------------------------------------------------- *
 * Checkout Terms & Conditions panel
 *
 * A native <details> accordion holding the Research Use Policy, sitting under
 * the single agreement checkbox. The policy is rendered from its own page, so
 * it arrives as full block markup — the rules below neutralise that page's
 * section padding and heading scale so it reads as compact panel text rather
 * than a full-width policy page embedded mid-checkout.
 * -------------------------------------------------------------------------- */

.pg-verify .pg-terms {
	background: #ffffff;
	border: 1px solid rgba( 22, 34, 58, 0.14 );
	border-radius: var( --wp--custom--radius--md );
	margin-top: 0.6rem;
}

.pg-verify .pg-terms__summary {
	background: #f6f3ec;
	border-radius: var( --wp--custom--radius--md );
	cursor: pointer;
	font-size: 0.85rem;
	font-weight: 700;
	list-style: none;
	padding: 0.7rem 0.9rem;
	user-select: none;
}

.pg-verify .pg-terms[open] .pg-terms__summary {
	border-bottom: 1px solid rgba( 22, 34, 58, 0.12 );
	border-radius: var( --wp--custom--radius--md ) var( --wp--custom--radius--md ) 0 0;
}

/* Replace the default disclosure marker with a caret on the right. */
.pg-verify .pg-terms__summary::-webkit-details-marker {
	display: none;
}

.pg-verify .pg-terms__summary::after {
	content: "▾";
	float: right;
	transition: transform var( --pg-duration-fast ) var( --pg-easing );
}

.pg-verify .pg-terms[open] .pg-terms__summary::after {
	transform: rotate( 180deg );
}

/*
 * The policy scrolls inside the panel instead of pushing Place Order far down
 * the page — the customer can read all of it without losing the button.
 */
.pg-verify .pg-terms__body {
	max-height: 260px;
	overflow-y: auto;
	padding: 0.2rem 0.9rem;
}

/* Strip the policy page's own page-level spacing and type scale. */
.pg-verify .pg-terms__body .wp-block-group {
	padding: 0 !important;
}

.pg-verify .pg-terms__body h1,
.pg-verify .pg-terms__body h2,
.pg-verify .pg-terms__body h3 {
	font-size: 0.85rem !important;
	line-height: 1.35;
	margin: 0.9rem 0 0.3rem !important;
}

.pg-verify .pg-terms__body h1 {
	/* The policy's page title would otherwise repeat the panel's own label. */
	display: none;
}

.pg-verify .pg-terms__body p,
.pg-verify .pg-terms__body li {
	color: #3d4a63;
	font-size: 0.78rem !important;
	line-height: 1.5;
	margin: 0.3rem 0 !important;
}

.pg-verify .pg-terms__body .is-style-pg-eyebrow {
	display: none;
}

.pg-verify .pg-terms__links {
	border-top: 1px solid rgba( 22, 34, 58, 0.1 );
	font-size: 0.75rem;
	margin: 0;
	padding: 0.6rem 0.9rem;
}

.pg-verify .pg-terms__links a {
	color: #7a5c12;
	text-decoration: underline;
	text-underline-offset: 2px;
}

/*
 * The policy page opens with large "RESEARCH USE ONLY / NOT FOR HUMAN USE"
 * pills. At page scale they are the right emphasis; inside a 260px panel they
 * filled the entire first screen and pushed the actual terms out of sight.
 * Shrunk to a compact row so the substantive text is what the customer sees.
 */
.pg-verify .pg-terms__body .pg-ruo-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem;
	margin: 0 0 0.5rem;
}

.pg-verify .pg-terms__body .pg-ruo-pill {
	font-size: 0.58rem !important;
	letter-spacing: 0.05em;
	padding: 2px 7px !important;
}

/* -------------------------------------------------------------------------- *
 * select2 dropdowns (State / Country) — height conflict fix
 *
 * NOT A THEME BUG. Two WooCommerce stylesheets disagree:
 *
 *   select2.css              .select2-selection--single { height: 28px }
 *                            .select2-selection__rendered { line-height: 28px }
 *   woocommerce-blocktheme   .select2-selection__rendered { padding: .9rem 1.1rem }
 *
 * The second adds 14.4px of padding top and bottom to make the control look
 * like a themed input, but never raises the 28px height it has to fit inside.
 * The result is 57px of content in a 28px box: the selected value renders
 * BELOW the white control and collides with whatever label follows it — on
 * Addresses, "Select an option…" landed on top of "ZIP Code".
 *
 * The control is rebuilt here to match the sibling text inputs exactly: same
 * min-height, same padding, flex-centred so the value sits on the middle line
 * whatever the font size.
 * -------------------------------------------------------------------------- */

.woocommerce-account .select2-container--default .select2-selection--single,
.woocommerce-checkout .select2-container--default .select2-selection--single {
	align-items: center;
	background: #ffffff;
	border: 1px solid rgba( 22, 34, 58, 0.22 );
	border-radius: var( --wp--custom--radius--md );
	display: flex;
	height: auto;
	min-height: 52px;
}

.woocommerce-account .select2-container--default .select2-selection--single .select2-selection__rendered,
.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered {
	color: #16223a;
	line-height: 1.4;
	padding: 0.55rem 2.2rem 0.55rem 0.8rem;
	width: 100%;
}

.woocommerce-account .select2-container--default .select2-selection--single .select2-selection__placeholder,
.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__placeholder {
	color: #5a6478;
}

/* The arrow is absolutely positioned against the control, so it has to grow
   with it or it floats near the top of a now-taller box. */
.woocommerce-account .select2-container--default .select2-selection--single .select2-selection__arrow,
.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow {
	height: 100%;
	right: 6px;
	top: 0;
}

/* The open dropdown list: readable on the light control rather than inheriting
   the navy page text colour. */
.select2-container--default .select2-results__option {
	color: #16223a;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
	background-color: #a67c22;
	color: #ffffff;
}

.select2-dropdown {
	border-color: rgba( 22, 34, 58, 0.22 );
}

/* -------------------------------------------------------------------------- *
 * Shipping estimates and processing notice
 *
 * The estimate sits under its own option as a quiet second line so the method
 * name and price stay the scannable part. The notice separates what the store
 * controls from what the carrier controls.
 * -------------------------------------------------------------------------- */

/*
 * The rate rows are flex (radio + label), so the estimate has to claim a full
 * row of its own or it becomes a third flex item and rides on the same line,
 * right-aligned by the totals column. flex-basis 100% forces the wrap; the left
 * margin then lines it up under the label rather than under the radio.
 */
.pg-ship-est {
	color: #5a6478;
	display: block;
	/*
	 * SHRINKABLE — `flex: 0 0 100%` HERE CAUSED SIDEWAYS SCROLL ON PHONES.
	 *
	 * A flex basis of 100% plus the 1.6rem indent below is wider than the row by
	 * exactly that indent, and flex-shrink: 0 forbade it from giving the space
	 * back. At 390px the estimate line ran 10px past the viewport and took the
	 * whole checkout with it. Allowing it to shrink lets the basis and the indent
	 * coexist.
	 */
	flex: 1 1 100%;
	font-size: 0.72rem;
	line-height: 1.4;
	margin: 2px 0 0 1.6rem;
	min-width: 0;
	text-align: left;
}

.woocommerce-checkout #order_review ul#shipping_method li {
	flex-wrap: wrap;
}

.woocommerce-checkout #order_review ul#shipping_method li {
	/* The rows now hold two lines each, so they need breathing room. */
	margin-bottom: 0.5rem;
}

.pg-ship-note {
	border-top: 1px solid rgba( 22, 34, 58, 0.12 );
	color: #5a6478;
	font-size: 0.72rem;
	line-height: 1.45;
	margin: 0.65rem 0 0;
	padding-top: 0.6rem;
}

/* On the cart page this lands on the navy panel rather than the ivory summary. */
.woocommerce-cart .pg-ship-note {
	border-top-color: rgba( 245, 247, 250, 0.16 );
	color: var( --wp--preset--color--slate );
}

.woocommerce-cart .pg-ship-est {
	color: var( --wp--preset--color--slate );
}

/* --------------------------------------------------------------------------
 * Order Received / Thank You
 *
 * THE CONFIRMATION IS NOT RENDERED BY page-checkout.html — DO NOT ASSUME
 * .pg-checkout-main EXISTS HERE.
 *
 * The order-received endpoint lives on the checkout page, so <body> carries
 * .woocommerce-checkout and picks up the cream page surface set for the
 * checkout. The markup, however, comes from WooCommerce's own block template
 * (order-confirmation.html) inside a plain <main class="wp-block-group">.
 *
 * Every checkout text colour is scoped to .pg-checkout-main, which that
 * template never outputs. The result was the background changing to cream while
 * the type kept the site's global near-white — #f5f7fa on #fbf7ee, a contrast
 * ratio of 1.00. The heading, the thank-you line, the order summary, the totals
 * table and both addresses were all invisible.
 *
 * Scoped to <main> rather than to the body class, for the same reason the
 * checkout rules are: the navy header and footer are siblings of <main>, so
 * painting the body navy would put navy type on the navy header. Everything
 * here stays inside the confirmation's own content area.
 *
 * Colours are inherited from one declaration on the container so that markup
 * this file does not enumerate — a gateway's payment instructions, a plugin's
 * extra row — is legible by default instead of falling back to near-white.
 * -------------------------------------------------------------------------- */

body.woocommerce-order-received main,
body.woocommerce-order-received .pg-checkout-main {
	color: #16223a;
}

body.woocommerce-order-received main :is(
	h1, h2, h3, h4, h5, h6,
	p, li, dt, dd, span, strong, em, bdi, mark, small, time, code,
	td, th, address, figcaption, label, legend
),
body.woocommerce-order-received .pg-checkout-main :is(
	h1, h2, h3, h4, h5, h6,
	p, li, dt, dd, span, strong, em, bdi, mark, small, time, code,
	td, th, address, figcaption, label, legend
) {
	color: inherit;
}

/*
 * Secondary labels — "Order #:", "Date:", "Email:", "Payment:" and the totals
 * row labels. Muted enough to sit behind their values, still 8.6:1 on cream.
 */
body.woocommerce-order-received .wc-block-order-confirmation-summary-list-item__key,
body.woocommerce-order-received .wc-block-order-confirmation-totals__label,
body.woocommerce-order-received .woocommerce-table__line-item .product-quantity {
	color: #3d4a63;
}

/* Values, amounts and the grand total carry the full navy. */
body.woocommerce-order-received .wc-block-order-confirmation-summary-list-item__value,
body.woocommerce-order-received .wc-block-order-confirmation-totals__total,
body.woocommerce-order-received .woocommerce-Price-amount,
body.woocommerce-order-received .woocommerce-Price-currencySymbol {
	color: #16223a;
}

/* Section headings: "Order details", "Shipping address", "Billing address". */
body.woocommerce-order-received main h1,
body.woocommerce-order-received main h2,
body.woocommerce-order-received main h3,
body.woocommerce-order-received .woocommerce-column__title,
body.woocommerce-order-received .wc-block-order-confirmation-totals th {
	color: #16223a;
}

/*
 * Links stay gold, but not --pg-gold-dark (#A67C22): at body size on cream that
 * measures 3.5:1, under the 4.5:1 minimum. This is the same hue carried far
 * enough down to pass, and it is underlined so the link does not rely on colour
 * alone to be recognisable.
 */
body.woocommerce-order-received main a,
body.woocommerce-order-received .pg-checkout-main a {
	color: #7A5A11;
	text-decoration: underline;
}

body.woocommerce-order-received main a:hover,
body.woocommerce-order-received main a:focus {
	color: #16223a;
}

/*
 * Payment instructions — Zelle and any other offline gateway print into the
 * additional-information block, or into .woocommerce-order-payment-instructions
 * on the classic template. Given a panel of its own so the details a customer
 * must act on are the clearest thing on the page.
 */
body.woocommerce-order-received .wc-block-order-confirmation-additional-information,
body.woocommerce-order-received .woocommerce-order-payment-instructions,
body.woocommerce-order-received .woocommerce-thankyou-order-received + p {
	background: #ffffff;
	border: 1px solid rgba( 22, 34, 58, 0.12 );
	border-left: 3px solid var( --pg-gold-dark, #A67C22 );
	border-radius: 6px;
	color: #16223a;
	padding: 1.1rem 1.25rem;
}

/* The totals table needs its own rules: WooCommerce ships it borderless. */
body.woocommerce-order-received .wc-block-order-confirmation-totals__table,
body.woocommerce-order-received .woocommerce-table--order-details {
	border-collapse: collapse;
	width: 100%;
}

body.woocommerce-order-received .wc-block-order-confirmation-totals__table th,
body.woocommerce-order-received .wc-block-order-confirmation-totals__table td,
body.woocommerce-order-received .woocommerce-table--order-details th,
body.woocommerce-order-received .woocommerce-table--order-details td {
	border-bottom: 1px solid rgba( 22, 34, 58, 0.1 );
	padding: 0.65rem 0.5rem;
}

body.woocommerce-order-received .wc-block-order-confirmation-totals__table tfoot tr:last-child :is( th, td ) {
	border-bottom: 0;
	font-size: 1.05rem;
	font-weight: 700;
}

/* Addresses read as blocks of text, not italics. */
body.woocommerce-order-received address {
	font-style: normal;
	line-height: 1.6;
}

/* --------------------------------------------------------------------------
 * Storage condition rows
 *
 * A badge and a labelled condition per row, so the storage card can be read at
 * a glance instead of parsed out of a paragraph. The reference this follows
 * uses a green "-20°C" and a blue "2-8°C" chip; those are temperatures, which
 * no Peptogenesis document establishes, so the chips carry the verified
 * condition instead and are toned in the house palette rather than in the
 * traffic-light colours a temperature scale implies.
 *
 * The badge is a fixed column so the three rows align down the card and the
 * eye can run straight down the conditions. It wraps to full width below 380px,
 * where a fixed column would squeeze the text to two words a line.
 * -------------------------------------------------------------------------- */

.pg-store {
	display: grid;
	gap: 0.5rem;
	list-style: none;
	margin: 0 0 1rem;
	padding: 0;
}

.pg-store__row {
	align-items: center;
	background: rgba( 22, 34, 58, 0.03 );
	border: 1px solid rgba( 22, 34, 58, 0.08 );
	border-radius: 10px;
	display: grid;
	gap: 0.85rem;
	grid-template-columns: 7.5rem minmax( 0, 1fr );
	margin: 0;
	padding: 0.7rem 0.85rem;
}

.pg-store__badge {
	align-items: center;
	border-radius: 7px;
	display: flex;
	font-size: 0.74rem;
	font-weight: 700;
	justify-content: center;
	letter-spacing: 0.01em;
	line-height: 1.25;
	min-height: 2.4rem;
	padding: 0.35rem 0.5rem;
	text-align: center;
}

/* Gold: the dry/sealed state — the product's default condition. */
.pg-store__badge--gold {
	background: rgba( 212, 175, 55, 0.18 );
	color: #7A5A11;
}

/* Cool slate: the reconstituted state, and BAC Water's do-not-freeze rule. */
.pg-store__badge--cool {
	background: rgba( 84, 132, 200, 0.16 );
	color: #2f5488;
}

/*
 * Deep indigo: the -80 °C tier. Reads as "colder / longer" beside the -20 °C
 * slate without borrowing the reference's green, which on a storage chip
 * suggests "safe" rather than "colder".
 */
.pg-store__badge--deep {
	background: rgba( 47, 63, 122, 0.16 );
	color: #2b3a72;
}

/* Navy: light protection. */
.pg-store__badge--navy {
	background: rgba( 22, 34, 58, 0.09 );
	color: #16223a;
}

.pg-store__body {
	display: block;
	min-width: 0;
}

.pg-store__label {
	color: #16223a;
	display: block;
	font-size: 0.9rem;
	font-weight: 700;
	line-height: 1.3;
}

.pg-store__text {
	color: #3d4a63;
	display: block;
	font-size: 0.85rem;
	line-height: 1.45;
	margin-top: 0.1rem;
}

.pg-store__duration {
	color: #16223a;
	font-weight: 700;
	white-space: nowrap;
}

/* The supporting note under the rows sits quieter than the rows themselves. */
.pg-cc__prose--sm {
	font-size: 0.85rem;
}

/* The dark blend card, should the rows ever be placed on one. */
.pg-cc--dark .pg-store__row {
	background: rgba( 255, 255, 255, 0.04 );
	border-color: rgba( 255, 255, 255, 0.12 );
}

.pg-cc--dark .pg-store__label {
	color: var( --wp--preset--color--white );
}

.pg-cc--dark .pg-store__text {
	color: var( --wp--preset--color--slate );
}

/*
 * Phones: the badge sits above the text, not beside it.
 *
 * The side-by-side row needs roughly 500px to work, which it has inside a
 * half-width card on a desktop. Inside a single-column card on a 390px phone
 * the content box is about 294px, and holding the badge column at 7.5rem left
 * ~160px for the condition — three words a line, and a row taller than the
 * card it sits in. Stacking gives the text the full width back.
 *
 * The threshold is 600px rather than the 380px first used here: 390px and
 * 430px are the two commonest phone widths and both were still being squeezed.
 */
@media ( max-width: 600px ) {
	.pg-store__row {
		gap: 0.4rem;
		grid-template-columns: minmax( 0, 1fr );
	}

	.pg-store__badge {
		justify-content: flex-start;
		min-height: 0;
		padding: 0.25rem 0.6rem;
		width: -moz-fit-content;
		width: fit-content;
	}
}

/* --------------------------------------------------------------------------
 * Bundle cards — vial thumbnails
 *
 * Each card carries the product's own vial photograph, once per bottle, so the
 * choice reads as "how many of this" rather than as an abstract quantity. On
 * RTA-3 the picture follows the selected strength.
 * -------------------------------------------------------------------------- */

.pg-bundle__vials {
	align-items: flex-end;
	display: flex;
	gap: 0.15rem;
	justify-content: center;
	margin: 0.35rem 0 0.15rem;
	min-height: 2.6rem;
}

.pg-bundle__vial {
	display: block;
	height: 2.6rem;
	object-fit: contain;
	width: auto;
}

/*
 * The vials are photographs on a transparent ground, so two side by side can
 * read as one wide bottle. A hair of negative space between them keeps the
 * count legible at a glance, which is the entire point of showing them.
 */
.pg-bundle__vial + .pg-bundle__vial {
	margin-left: 0.1rem;
}

.pg-bundle__vial--empty {
	display: block;
	height: 2.6rem;
	width: 1.2rem;
}

/*
 * Horizontal row that scrolls rather than stacking.
 *
 * Three cards at ~7rem each need ~21rem; a 375px viewport gives about 20rem
 * inside the buy card, so at the narrowest sizes the row scrolls by a few
 * pixels instead of collapsing into three full-width blocks that push Add to
 * Cart below the fold.
 */
@media ( max-width: 600px ) {
	.pg-bundle__tiles {
		-webkit-overflow-scrolling: touch;
		display: flex;
		gap: 0.45rem;
		overflow-x: auto;
		/*
		 * Room for the badge, which sits above the card on a negative offset.
		 * overflow-x: auto makes this a clipping context in both axes — there is
		 * no overflow-y: visible to pair with it — so without the padding the
		 * top of "MOST POPULAR" and "BEST VALUE" was sliced off.
		 */
		padding-bottom: 0.25rem;
		padding-top: 0.7rem;
		scroll-snap-type: x proximity;
	}

	.pg-bundle__tile {
		/*
		 * Restated, not inherited. The base rule already stacks the tile's
		 * contents, but this block has to own the whole layout so no earlier
		 * narrow-width rule can leave the direction pointing sideways.
		 */
		align-items: center;
		/*
		 * Share the width rather than claim a fixed slice, so all three cards
		 * fit a 375px screen without the row needing to scroll. flex-basis 0
		 * with min-width 0 lets them shrink below their content's natural width;
		 * the row keeps overflow-x: auto purely as a safety net for very small
		 * screens or large text settings.
		 */
		flex: 1 1 0;
		flex-direction: column;
		min-width: 0;
		gap: 0.2rem;
		justify-content: flex-start;
		padding: 1.4rem 0.4rem 0.7rem;
		scroll-snap-align: start;
		text-align: center;
	}

	.pg-bundle__qty {
		font-size: 0.82rem;
		line-height: 1.2;
	}

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

	.pg-bundle__unit {
		font-size: 0.72rem;
	}

	.pg-bundle__badge {
		font-size: 0.6rem;
		padding: 0.15rem 0.4rem;
		white-space: nowrap;
	}

	/*
	 * Sized so THREE fit inside one card at 375px.
	 *
	 * The card is about 93px wide at that viewport; three vials at 2.2rem plus
	 * their gaps came to ~110px, so the third bottle on the "3+" card ran past
	 * its own border. The height is driven by what has to fit, not by what looks
	 * best in isolation — a cropped third bottle defeats the point of showing
	 * three.
	 */
	.pg-bundle__vials {
		gap: 0.08rem;
		min-height: 1.7rem;
	}

	.pg-bundle__vial,
	.pg-bundle__vial--empty {
		height: 1.7rem;
	}

	.pg-bundle__vial + .pg-bundle__vial {
		margin-left: 0;
	}
}

/* --------------------------------------------------------------------------
 * Simplified card action row
 *
 * One primary control. The image and the title already link to the product
 * page, so the old "Details" button repeated a journey the card already
 * offered twice and halved the width of the button that mattered.
 * -------------------------------------------------------------------------- */

.pg-product-card__actions--single {
	display: block;
}

.pg-product-card__actions--single .pg-product-card__add {
	display: block;
	text-align: center;
	width: 100%;
}

.pg-product-card__unavailable {
	color: #5a6478;
	display: block;
	font-size: 0.85rem;
	padding: 0.6rem 0;
	text-align: center;
}

/* A range reads as one figure, so it must not break across two lines. */
.pg-price__range {
	white-space: nowrap;
}

.pg-price__dash {
	padding: 0 0.15em;
}

/* --------------------------------------------------------------------------
 * Quick strength selector
 * -------------------------------------------------------------------------- */

.pg-quick[hidden] {
	display: none;
}

.pg-quick {
	align-items: center;
	display: flex;
	inset: 0;
	justify-content: center;
	padding: 1.25rem;
	position: fixed;
	z-index: 1200;
}

.pg-quick__backdrop {
	background: rgba( 11, 18, 38, 0.62 );
	inset: 0;
	position: absolute;
}

.pg-quick__panel {
	background: #FBF7EE;
	border: 1px solid rgba( 212, 175, 55, 0.35 );
	border-radius: 16px;
	box-shadow: 0 24px 60px rgba( 11, 18, 38, 0.35 );
	max-height: calc( 100vh - 2.5rem );
	max-width: 26rem;
	overflow-y: auto;
	padding: 1.5rem 1.4rem 1.4rem;
	position: relative;
	width: 100%;
}

.pg-quick__close {
	background: none;
	border: 0;
	color: #3d4a63;
	cursor: pointer;
	font-size: 1.6rem;
	line-height: 1;
	padding: 0.25rem 0.4rem;
	position: absolute;
	right: 0.7rem;
	top: 0.6rem;
}

.pg-quick__close:hover,
.pg-quick__close:focus-visible {
	color: #16223a;
}

.pg-quick__title {
	color: #16223a;
	font-size: 1.25rem;
	font-weight: 700;
	margin: 0 2rem 0.15rem 0;
}

.pg-quick__eyebrow {
	color: #5a6478;
	font-size: 0.76rem;
	font-weight: 700;
	letter-spacing: 0.09em;
	margin: 0 0 1rem;
	text-transform: uppercase;
}

.pg-quick__rows {
	display: grid;
	gap: 0.55rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.pg-quick__row {
	align-items: center;
	background: #fff;
	border: 1px solid rgba( 22, 34, 58, 0.14 );
	border-radius: 12px;
	display: grid;
	gap: 0.75rem;
	grid-template-columns: minmax( 0, 1fr ) auto auto;
	margin: 0;
	padding: 0.75rem 0.85rem;
}

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

.pg-quick__price {
	color: #16223a;
	font-size: 1rem;
	font-weight: 700;
	white-space: nowrap;
}

/*
 * The add control is a circle, matched to the gold used on every other primary
 * action rather than to the reference's black.
 */
.pg-quick__add {
	align-items: center;
	background: linear-gradient( 145deg, #E4C65A 0%, #D4AF37 55%, #B8912B 100% );
	border: 0;
	border-radius: 50%;
	color: #16223a;
	cursor: pointer;
	display: flex;
	font-size: 1.35rem;
	font-weight: 700;
	height: 2.4rem;
	justify-content: center;
	line-height: 1;
	transition: transform 0.15s ease, filter 0.15s ease;
	width: 2.4rem;
}

.pg-quick__add:hover {
	filter: brightness( 1.05 );
	transform: translateY( -1px );
}

.pg-quick__add:focus-visible {
	outline: 2px solid #16223a;
	outline-offset: 2px;
}

.pg-quick__add.is-adding {
	opacity: 0.55;
	pointer-events: none;
}

/* Scrolling behind the modal is locked, matching the drawer's behaviour. */
html.pg-quick-open,
body.pg-quick-open {
	overflow: hidden;
}

/* --------------------------------------------------------------------------
 * Floating cart summary
 * -------------------------------------------------------------------------- */

.pg-cartpill {
	bottom: calc( 1rem + env( safe-area-inset-bottom, 0px ) );
	position: fixed;
	right: 1rem;
	z-index: 1100;
}

/*
 * Empty cart: nothing rendered inside, so nothing shows. The wrapper stays in
 * the DOM because it is the fragment target — remove it and an AJAX add would
 * have nowhere to write the summary back to.
 */
.pg-cartpill__inner[data-pg-cartpill-empty] {
	display: none;
}

.pg-cartpill__btn {
	align-items: center;
	background: #16223a;
	border: 1px solid rgba( 212, 175, 55, 0.55 );
	border-radius: 999px;
	box-shadow: 0 10px 28px rgba( 11, 18, 38, 0.35 );
	color: #fff;
	cursor: pointer;
	display: flex;
	gap: 0.6rem;
	padding: 0.6rem 1rem;
}

.pg-cartpill__btn:hover {
	border-color: var( --wp--preset--color--gold, #D4AF37 );
}

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

.pg-cartpill__icon {
	color: var( --wp--preset--color--gold, #D4AF37 );
	display: inline-flex;
	position: relative;
}

.pg-cartpill__count {
	background: var( --wp--preset--color--gold, #D4AF37 );
	border-radius: 999px;
	color: #16223a;
	font-size: 0.66rem;
	font-weight: 700;
	line-height: 1;
	min-width: 1.05rem;
	padding: 0.15rem 0.25rem;
	position: absolute;
	right: -0.5rem;
	text-align: center;
	top: -0.45rem;
}

.pg-cartpill__total {
	font-size: 0.92rem;
	font-weight: 700;
	white-space: nowrap;
}

.pg-cartpill__sep {
	background: rgba( 255, 255, 255, 0.22 );
	height: 1.1rem;
	width: 1px;
}

.pg-cartpill__cta {
	color: var( --wp--preset--color--gold, #D4AF37 );
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	white-space: nowrap;
}

/* A brief nudge after an add, since the drawer no longer announces it. */
.pg-cartpill.is-bumped .pg-cartpill__btn {
	animation: pg-cartpill-bump 0.45s ease;
}

@keyframes pg-cartpill-bump {
	0%, 100% { transform: scale( 1 ); }
	35%      { transform: scale( 1.06 ); }
}

@media ( prefers-reduced-motion: reduce ) {
	.pg-cartpill.is-bumped .pg-cartpill__btn {
		animation: none;
	}
}

/*
 * Phones: the pill sits clear of the drawer's own controls and of the browser
 * chrome, and drops the "View Cart" wording so it cannot span the screen.
 */
@media ( max-width: 600px ) {
	.pg-cartpill {
		bottom: calc( 0.85rem + env( safe-area-inset-bottom, 0px ) );
		right: 0.85rem;
	}

	.pg-cartpill__cta {
		font-size: 0.72rem;
	}

	.pg-cartpill__btn {
		padding: 0.55rem 0.85rem;
	}

	.pg-quick__panel {
		padding: 1.35rem 1.1rem 1.2rem;
	}

	.pg-quick__row {
		gap: 0.5rem;
		padding: 0.7rem 0.7rem;
	}
}

/* The drawer sits above the pill when both are on screen. */
.pg-drawer-open .pg-cartpill {
	display: none;
}

/*
 * Clearance beneath the catalog so the pill never permanently covers a card.
 *
 * The summary is fixed to the bottom-right, so whatever the last thing on
 * screen happens to be sits under it — on a phone that was the bottom row's
 * Add button, which could not be reached by scrolling because the pill moved
 * with the viewport. The extra space at the end of the grid lets that row
 * scroll clear.
 *
 * Applied to the shop and the front page's product row, the two places the
 * summary renders.
 */
@media ( max-width: 600px ) {
	.pg-shop__grid,
	.pg-featured__grid {
		padding-bottom: 4.5rem;
	}
}

/* --------------------------------------------------------------------------
 * My Account: WooCommerce's show-password toggle
 *
 * WooCommerce wraps a password field in .password-input and appends a
 * .show-password-input button that it positions absolutely and paints with its
 * own eye icon. The theme's account-card input styling gives the field its own
 * padding and border but never accounted for that button, so it collapsed to a
 * 16x6px grey stub sitting under the field — visible on the login card as a
 * small unexplained rectangle.
 *
 * Sized and placed inside the field where it belongs, with the same navy the
 * rest of the card uses.
 * -------------------------------------------------------------------------- */

.woocommerce-account .password-input {
	display: block;
	position: relative;
}

.woocommerce-account .password-input .show-password-input {
	background: none;
	border: 0;
	color: #5a6478;
	cursor: pointer;
	height: 1.5rem;
	padding: 0;
	position: absolute;
	right: 0.85rem;
	top: 50%;
	transform: translateY( -50% );
	width: 1.5rem;
}

.woocommerce-account .password-input .show-password-input::after {
	content: "";
	background: currentColor;
	display: block;
	height: 100%;
	-webkit-mask: var( --pg-eye ) center / 1.25rem no-repeat;
	mask: var( --pg-eye ) center / 1.25rem no-repeat;
	width: 100%;
}

.woocommerce-account .password-input .show-password-input:hover,
.woocommerce-account .password-input .show-password-input.display-password {
	color: #16223a;
}

.woocommerce-account .password-input .show-password-input:focus-visible {
	outline: 2px solid var( --pg-gold-dark, #A67C22 );
	outline-offset: 2px;
}

/* Room for the toggle so a long password never runs under it. */
.woocommerce-account .password-input input[type="password"],
.woocommerce-account .password-input input[type="text"] {
	padding-right: 2.9rem;
}

:root {
	--pg-eye: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E" );
}

/* --------------------------------------------------------------------------
 * COA panel button — size it like its sibling, and keep it in flow
 * --------------------------------------------------------------------------
 * The SDS control is a .pg-docs__btn (0.88rem, 44px min-height, sized to its
 * text). The COA control next to it is a bare .wp-element-button, so it
 * inherited the theme's full-size button styling: measured at 68px tall
 * against the sibling's 44px, and stretching the full column width. Once a COA
 * is uploaded and the facts list appears above it, that oversized block is
 * what crowds and overlaps the "Strength / Volume" rows.
 *
 * This matches it to .pg-docs__btn and pins the layout down: inline-flex so it
 * shrinks to its text rather than filling the column, a real margin above so
 * it can never sit on top of the last fact row, and clear:both so it always
 * starts below floated content.
 * -------------------------------------------------------------------------- */

.pg-coa a.wp-element-button,
.pg-docs__card a.wp-element-button {
	align-items: center;
	clear: both;
	display: inline-flex;
	font-size: 0.82rem;
	justify-content: center;
	line-height: 1.2;
	margin-top: 0.9rem;
	min-height: 38px;
	padding: 0.45rem 1.1rem;
	position: relative;
	width: auto;
}

/* The facts list keeps its own breathing room, so the button is never the
   thing preventing a collision. */
.pg-coa .pg-coa__fact:last-of-type {
	margin-bottom: 0.35rem;
}

/* -------------------------------------------------------------------------- *
 * Cross-sell size buttons
 *
 * Replaces the <select> in the cart drawer's "Complete your order" prompt. A
 * collapsed select showed only the first size, so the prompt read as though
 * 3 mL were the only option. Both sizes and both prices are now visible at
 * once, styled to match the variation buttons on the product page.
 * -------------------------------------------------------------------------- */

.pg-suggest__sizes {
	display: flex;
	flex: 1 1 auto;
	gap: 0.4rem;
	min-width: 0;
}

.pg-suggest__size {
	align-items: center;
	background: #fff;
	border: 1px solid rgba( 22, 34, 58, 0.22 );
	border-radius: 8px;
	color: #16223a;
	cursor: pointer;
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	gap: 0.05rem;
	justify-content: center;
	line-height: 1.2;
	min-height: 44px;
	min-width: 0;
	padding: 0.35rem 0.5rem;
	transition:
		background-color var( --pg-duration-base ) var( --pg-easing ),
		border-color var( --pg-duration-base ) var( --pg-easing );
}

.pg-suggest__size-label {
	font-size: 0.85rem;
	font-weight: 600;
}

/* #5A6478 on white = 5.95:1. */
.pg-suggest__size-price {
	color: #5A6478;
	font-size: 0.75rem;
}

.pg-suggest__size:hover {
	border-color: rgba( 212, 175, 55, 0.55 );
}

/*
 * The selected state carries a border and a tint, not colour alone, so it is
 * still legible to anyone who cannot separate the gold from the white.
 */
.pg-suggest__size.is-selected {
	background: rgba( 212, 175, 55, 0.12 );
	border-color: var( --wp--preset--color--gold );
	box-shadow: inset 0 0 0 1px var( --wp--preset--color--gold );
}

.pg-suggest__size.is-selected .pg-suggest__size-price {
	color: var( --pg-pv-gold-ink, #856B1F );
}

.pg-suggest__size:focus-visible {
	outline: 2px solid var( --wp--preset--color--gold );
	outline-offset: 2px;
}

/* -------------------------------------------------------------------------- *
 * Checkout length on a phone
 *
 * Measured before this block: 5,648px at 375x812 — seven full screens of
 * scrolling to reach Place Order. Three things account for most of it.
 *
 * 1. The full site footer, 1,029px of navigation and brand copy, sits below
 *    Place Order. On a checkout page that is a row of exits at the exact
 *    moment the buyer is deciding, and it is the single largest block on the
 *    page. The legal disclaimer and copyright stay; the nav columns and the
 *    brand blurb are hidden HERE ONLY.
 * 2. Each field row costs 102px: a 48px input, a 24px label and 30px of gaps.
 *    The gaps tighten, the INPUT DOES NOT — 48px is the touch target and
 *    shrinking it to save pixels would make the form harder to use, which is
 *    the opposite of the point.
 * 3. Section padding of 40px/48px is generous for a 375px screen.
 * -------------------------------------------------------------------------- */

@media ( max-width: 781px ) {

	.woocommerce-checkout .pg-footer__inner > *:not( .pg-footer__base ),
	.woocommerce-checkout .pg-footer__brand,
	.woocommerce-checkout .pg-footer__cols,
	.woocommerce-checkout .pg-footer__nav {
		display: none;
	}

	.woocommerce-checkout .pg-footer__base {
		padding-bottom: 1.25rem;
		padding-top: 1.25rem;
	}

	/*
	 * Tighter rhythm, same 48px targets.
	 *
	 * The `form` in these selectors is not decoration: WooCommerce ships
	 * `.woocommerce form .form-row` and `.woocommerce-page form .form-row
	 * label`, which outspecify the shorter selectors and silently won. Matching
	 * their shape ties the specificity, and this file loads after theirs.
	 */
	.woocommerce-checkout form .form-row {
		margin-bottom: 0.6rem;
	}

	.woocommerce-checkout form .form-row label {
		margin-bottom: 0.25rem;
	}

	.woocommerce-checkout .pg-checkout-main > .wp-block-group {
		padding-bottom: 1.5rem;
		padding-top: 1.25rem;
	}

	.woocommerce-checkout .woocommerce-checkout-review-order {
		padding: 0.75rem;
	}
}

/* -------------------------------------------------------------------------- *
 * Stripe Payment Element — force the LIGHT theme
 *
 * The Payment Element renders in a Stripe iframe, so its colours cannot be
 * styled from here. The gateway builds them with Stripe's Appearance API by
 * SAMPLING this page, walking a fixed list until it finds a background that is
 * not transparent (woocommerce-gateway-stripe, build/upe-classic.js):
 *
 *   li.wc_payment_method .wc-payment-form
 *   li.wc_payment_method .payment_box
 *   #payment
 *   #order_review
 *   form.checkout
 *   body
 *
 * It then picks `theme: isLight( sampled ) ? 'stripe' : 'night'`, while taking
 * colorText SEPARATELY from `.woocommerce-checkout .form-row` — which on this
 * site is dark navy. So when the sample falls through to body (#04101F) the
 * result is Stripe's dark "night" boxes carrying our dark text: the unreadable
 * payment list the owner reported.
 *
 * The first two entries were transparent — .payment_box used a 5% tint — so the
 * chain could reach body. Both are now OPAQUE and light, which stops the walk
 * at the first entry and pins Stripe to its light theme.
 *
 * #F3F4F6 is what rgba(22,34,58,0.05) already composited to over white, so this
 * changes what Stripe SAMPLES without changing what the page looks like.
 * -------------------------------------------------------------------------- */

/*
 * SCOPE NOTE: this was scoped to #order_review while payment rendered inside the
 * order summary. Payment now renders in the left column, so that scope would no
 * longer match and the sampling chain would fall through to body (#04101F) —
 * putting Stripe straight back into its unreadable dark theme. The rule is
 * scoped to the checkout instead, so it holds wherever the block is rendered.
 */
.woocommerce-checkout li.wc_payment_method .payment_box {
	background: #F3F4F6;
}

.woocommerce-checkout #payment {
	background: #FFFFFF;
}

/* -------------------------------------------------------------------------- *
 * Stripe express checkout — Apple Pay / Link
 *
 * WHY IT WAS AT THE BOTTOM. The gateway prints these two at
 * woocommerce_checkout_before_customer_details, so they are FIRST in source
 * order:
 *
 *   <div id="wc-stripe-express-checkout-element">
 *   <p id="wc-stripe-express-checkout-button-separator">— OR —</p>
 *
 * But this theme makes form.checkout a two-column GRID and places
 * #customer_details and #order_review explicitly, by grid-column. Grid puts
 * explicitly placed items down first and then auto-places everything else into
 * whatever cells are left — so the express element, which has no placement of
 * its own, was pushed into a new row BELOW both columns. Source order said
 * first, the grid said last, and the grid won.
 *
 * That is also why the "— OR —" looked orphaned: it is Stripe's separator
 * between the wallet buttons and the form, and it had been carried to the end
 * of the page along with them, where there is no form left to introduce.
 *
 * Placing them explicitly in the first row, spanning both columns, puts the
 * wallet buttons back above the form where they save the buyer the scroll.
 *
 * Below 900px the layout is a single block column and source order already
 * puts them first, so no override is needed there.
 * -------------------------------------------------------------------------- */

@media ( min-width: 900px ) {

	/*
	 * `order` alone does not work here. Grid places EXPLICITLY positioned items
	 * first and only then auto-places the rest, so a full-width express element
	 * can never share a row with #customer_details (column 1) and #order_review
	 * (column 2) — it gets pushed to a row below them no matter what order says.
	 * The rows have to be assigned.
	 *
	 * The shift is wrapped in :has() so it applies ONLY when the express element
	 * is actually on the page. Stripe omits it whenever the buyer has no wallet
	 * available, and hard-coding rows would leave a two-row hole in the layout
	 * on every one of those visits.
	 */
	/*
	 * IN THE SUMMARY COLUMN, NOT FULL WIDTH.
	 *
	 * These used to span both columns in a band across the top of the page, which
	 * made two enormous wallet buttons the first thing on the checkout — louder
	 * than the order itself. They now sit at the top of the right-hand column,
	 * directly above the order summary, so the column reads: pay instantly with a
	 * wallet, OR review the order and pay below.
	 *
	 * They stay DIRECT CHILDREN OF THE FORM and are only re-placed by the grid.
	 * That is deliberate: WooCommerce replaces .woocommerce-checkout-review-order-table
	 * and .woocommerce-checkout-payment wholesale on every totals refresh, so
	 * moving this element inside #order_review would put Stripe's mounted iframe
	 * inside a fragment that gets torn out from under it several times per
	 * checkout. Same DOM position as before, different cell.
	 */
	/*
	 * FOUR ROWS, AND THE FLEXIBLE ONE MUST BE LAST.
	 *
	 * The base rule is `grid-template-rows: auto 1fr`, sized for the two-row
	 * layout. Adding the express element makes four rows, and that leaves row 2 —
	 * the "— OR —" separator — as the 1fr track. The details column spans all four
	 * rows and is far taller than the summary, so every pixel of that difference
	 * was dumped into the separator's row: a 27px line sitting in a 199px gap.
	 *
	 * Restating the tracks puts the slack in the last row, where the summary sits
	 * and where `align-items: start` keeps it pinned to the top.
	 */
	.woocommerce-checkout form.checkout.woocommerce-checkout:has( > #wc-stripe-express-checkout-element ) {
		grid-template-rows: auto auto auto 1fr;
	}

	.woocommerce-checkout form.checkout.woocommerce-checkout:has( > #wc-stripe-express-checkout-element ) > #wc-stripe-express-checkout-element {
		grid-column: 2;
		grid-row: 1;

		/*
		 * !important is required, not lazy. The gateway writes
		 * `style="margin-top: 1em;clear:both;display:none;"` inline on this div,
		 * and an inline style beats any selector no matter how specific. Grid gap
		 * already provides the spacing, so the inline margin only adds a gap on
		 * top of a gap.
		 */
		margin-top: 0 !important;
	}

	.woocommerce-checkout form.checkout.woocommerce-checkout:has( > #wc-stripe-express-checkout-element ) > #wc-stripe-express-checkout-button-separator {
		grid-column: 2;
		grid-row: 2;

		/* Row gap handles the spacing; its own margin would double it. */
		margin: 0;
	}

	/* The details column now runs the full height beside all four rows. */
	.woocommerce-checkout form.checkout.woocommerce-checkout:has( > #wc-stripe-express-checkout-element ) .pg-checkout__left {
		grid-column: 1;
		grid-row: 1 / span 4;
	}

	.woocommerce-checkout form.checkout.woocommerce-checkout:has( > #wc-stripe-express-checkout-element ) #order_review_heading {
		grid-column: 2;
		grid-row: 3;
	}

	.woocommerce-checkout form.checkout.woocommerce-checkout:has( > #wc-stripe-express-checkout-element ) #order_review {
		grid-column: 2;
		grid-row: 4;
	}
}

.woocommerce-checkout #wc-stripe-express-checkout-button-separator {
	margin-bottom: 1.25rem;
}

/*
 * If the wallet buttons never appear — no Apple Pay on the device, no saved
 * Link account — the separator must not sit there on its own announcing a
 * choice that is not being offered.
 */
#wc-stripe-express-checkout-element[style*="display: none"] + #wc-stripe-express-checkout-button-separator,
#wc-stripe-express-checkout-element[style*="display:none"] + #wc-stripe-express-checkout-button-separator {
	display: none !important;
}

/* -------------------------------------------------------------------------- *
 * Wider checkout
 *
 * form.checkout was capped at 1000px inside a container that already allows
 * 1320px, so the two columns sat in a narrow ribbon with empty space either
 * side. Raised to the theme's own wide size so the billing card and the order
 * summary both get room, matching the proportions of the reference layout.
 * -------------------------------------------------------------------------- */

@media ( min-width: 900px ) {

	.woocommerce-checkout .pg-checkout-main .woocommerce,
	.woocommerce-checkout form.checkout.woocommerce-checkout {
		max-width: var( --wp--style--global--wide-size, 1320px );
	}

	/* A little more of the extra width goes to the summary column. */
	.woocommerce-checkout form.checkout.woocommerce-checkout {
		grid-template-columns: minmax( 0, 1fr ) minmax( 0, 460px );
	}
}

/* -------------------------------------------------------------------------- *
 * Inline coupon, in the order summary
 *
 * Replaces WooCommerce's full-width "Have a coupon?" banner at the top of the
 * page. Sits under the total, where the discount it applies actually shows.
 * -------------------------------------------------------------------------- */

.pg-coupon {
	border-top: 1px solid rgba( 22, 34, 58, 0.12 );
	margin-top: 0.9rem;
	padding-top: 0.9rem;
}

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

.pg-coupon__row {
	display: flex;
	gap: 0.5rem;
}

.pg-coupon__input {
	background: #fff;
	border: 1px solid rgba( 22, 34, 58, 0.22 );
	border-radius: 8px;
	color: #16223a;
	flex: 1 1 auto;
	min-height: 44px;
	min-width: 0;
	padding: 0.5rem 0.75rem;
}

.pg-coupon__input:focus {
	border-color: var( --wp--preset--color--gold );
	box-shadow: 0 0 0 3px rgba( 212, 175, 55, 0.18 );
	outline: none;
}

.pg-coupon__apply {
	background: var( --wp--preset--color--gold );
	border: 0;
	border-radius: 8px;
	color: #16223a;
	cursor: pointer;
	flex: 0 0 auto;
	font-weight: 700;
	min-height: 44px;
	padding: 0.5rem 1.25rem;
}

.pg-coupon__apply:disabled {
	cursor: default;
	opacity: 0.6;
}

.pg-coupon__msg {
	font-size: 0.82rem;
	margin: 0.45rem 0 0;
	min-height: 0;
}

.pg-coupon__msg:empty {
	display: none;
}

/* #9A2A2A on white = 6.48:1;  #1E6B3A on white = 5.61:1. */
.pg-coupon__msg.is-error {
	color: #9A2A2A;
}

.pg-coupon__msg.is-success {
	color: #1E6B3A;
}

/* -------------------------------------------------------------------------- *
 * My Account — research verification status
 *
 * Read-only by design (see pcs_account_verification_card in the catalog
 * plugin). It reports state and nothing sensitive: the date of birth is never
 * printed on a customer-facing page, so this card carries role, date and terms
 * version only.
 * -------------------------------------------------------------------------- */

.pg-account-verify {
	background: #ffffff;
	border: 1px solid rgba( 22, 34, 58, 0.14 );
	border-radius: var( --wp--custom--radius--card );
	margin-bottom: var( --wp--preset--spacing--40 );
	padding: clamp( 1rem, 2vw, 1.35rem );
}

.pg-account-verify__title {
	font-size: 1.05rem;
	margin: 0 0 0.6rem;
}

.pg-account-verify__status {
	align-items: center;
	color: #2a7a4a;
	display: flex;
	font-weight: 700;
	gap: 0.45rem;
	margin: 0 0 0.7rem;
}

.pg-account-verify__badge {
	align-items: center;
	background: #2a7a4a;
	border-radius: 50%;
	color: #ffffff;
	display: inline-flex;
	height: 20px;
	justify-content: center;
	width: 20px;
}

/* Not-yet-verified and review-needed are states, not failures — amber, not red.
   Nothing is wrong with the account; it simply has a step left. */
.pg-account-verify__status--pending {
	color: #8a6314;
}

.pg-account-verify__list {
	display: grid;
	gap: 0.3rem 1rem;
	grid-template-columns: auto 1fr;
	margin: 0 0 0.7rem;
}

.pg-account-verify__list dt {
	color: #5a6478;
	font-size: 0.82rem;
}

.pg-account-verify__list dd {
	font-size: 0.82rem;
	font-weight: 600;
	margin: 0;
}

.pg-account-verify__note {
	color: #5a6478;
	font-size: 0.8rem;
	line-height: 1.5;
	margin: 0;
}

@media ( max-width: 599px ) {
	.pg-account-verify__list {
		grid-template-columns: 1fr;
	}

	.pg-account-verify__list dd {
		margin-bottom: 0.35rem;
	}
}