/* ============================================================
   PYXAX — WordPress / WooCommerce adjustment layer
   Layered on top of the ported pyxax.css design system.
   ============================================================ */

/* ---- Layout containers ---- */
.pyxax-main { min-height: 60vh; }
.pyxax-narrow { max-width: 1000px; margin: 0 auto; padding: 140px 48px 100px; }
.pyxax-wc-wrap { padding: 130px 48px 90px; max-width: 1400px; margin: 0 auto; }

/* Documentation / compliance / hub / COA pages */
.pyxax-doc { }
.pyxax-doc-inner { max-width: 820px; margin: 0 auto; padding: 140px 48px 90px; }
.pyxax-doc-body { font-size: 14px; color: var(--white-dim); line-height: 1.85; font-weight: 300; }
.pyxax-doc-body h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(20px,3vw,28px); color: var(--white); margin: 40px 0 16px; line-height: 1.2; }
.pyxax-doc-body h3 { font-family: var(--font-display); font-weight: 600; font-size: 16px; color: var(--white); margin: 28px 0 10px; }
.pyxax-doc-body h4 { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cyan); margin: 22px 0 8px; }
.pyxax-doc-body p { margin-bottom: 18px; }
.pyxax-doc-body a { color: var(--cyan); text-decoration: none; }
.pyxax-doc-body a:hover { text-decoration: underline; }
/* In-prose links must carry a non-colour affordance (WCAG 1.4.1 / axe
   link-in-text-block): underline links that sit inside body paragraphs. */
.pyxax-doc-body p a { text-decoration: underline; text-underline-offset: 2px; }
.pyxax-doc-body strong { color: var(--white); font-weight: 500; }
.pyxax-doc-body ul, .pyxax-doc-body ol { margin: 0 0 18px 20px; }
.pyxax-doc-body li { margin-bottom: 8px; }
.pyxax-doc-body .pyx-callout { padding: 20px 24px; border: 1px solid var(--cyan); background: var(--cyan-dim); margin: 28px 0; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.05em; color: var(--cyan); line-height: 1.75; }
.pyxax-doc-body .pyx-legal-tag { padding: 20px; border: 1px solid var(--border); background: var(--obsidian-2); font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; color: var(--white-muted); line-height: 1.8; margin-top: 32px; }

/* ---- Shop notice banner ---- */
.pyxax-shop-notice {
	border-top: 1px solid var(--border-dim);
	border-bottom: 1px solid var(--border-dim);
	padding: 14px 0;
	margin-bottom: 40px;
	background: var(--obsidian-2);
	text-align: center;
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--white-muted);
}

/* ---- WooCommerce shop header ---- */
.woocommerce-products-header { margin-bottom: 32px; }
.woocommerce-products-header__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(28px,5vw,48px); color: var(--white); }
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering select {
	font-family: var(--font-mono); font-size: 11px; color: var(--white-dim); letter-spacing: 0.08em;
}
.woocommerce .woocommerce-ordering select {
	background: var(--obsidian-3); border: 1px solid var(--border-dim); color: var(--white-dim); padding: 8px 16px;
}
.woocommerce-breadcrumb { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; color: var(--white-muted); text-transform: uppercase; margin-bottom: 20px; }
.woocommerce-breadcrumb a { color: var(--white-dim); text-decoration: none; }

/* ---- Product loop grid ---- */
.woocommerce ul.products,
.woocommerce-page ul.products {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
	width: auto !important;
	float: none !important;
	margin: 0 !important;
	padding: 0 !important;
}
.woocommerce ul.products li.product::before { display: none; }
/* WooCommerce adds ul.products::before/::after (legacy clearfix). Inside a CSS
   grid those pseudo-elements become grid items and shove the whole grid one
   column to the right — kill them so cards start in column 1. */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after {
	content: none !important;
	display: none !important;
}

/* Product card (loop) — mirrors .product-card */
.pyxax-loop-card {
	background: var(--obsidian-2);
	border: 1px solid var(--border-dim);
	padding: 28px 24px;
	position: relative;
	overflow: hidden;
	transition: all 0.3s;
	display: flex;
	flex-direction: column;
	height: 100%;
	text-decoration: none;
}
.pyxax-loop-card:hover {
	border-color: var(--border);
	transform: translateY(-4px);
	box-shadow: 0 20px 40px rgba(0,0,0,0.4), 0 0 20px rgba(0,212,255,0.06);
}
.pyxax-loop-card .product-vial { height: 300px; margin-bottom: 18px; background: #06090F; overflow: hidden; }
.pyxax-loop-card .product-vial img { max-height: 100%; width: auto; filter: drop-shadow(0 0 12px rgba(0,212,255,0.2)); }
/* Scale up the placeholder cylinder so it fills the card like the product photos do. */
.pyxax-loop-card .vial-svg { height: 200px; filter: drop-shadow(0 0 22px rgba(0,212,255,0.22)); }
.pyxax-loop-card .product-name { color: var(--white); }
.pyxax-loop-card .product-footer { margin-top: auto; }
/* Trust pills (replace the .product-purity sentence on product cards) */
.product-trust { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 18px; }
.pyx-trust-pill { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.02em; color: var(--cyan); background: rgba(0,212,255,0.05); border: 1px solid rgba(0,212,255,0.22); padding: 4px 8px; line-height: 1.15; white-space: nowrap; }
.pyxax-loop-card .product-price ins { text-decoration: none; }
.pyxax-loop-card .product-price del { color: var(--white-muted); font-size: 13px; font-weight: 400; margin-right: 6px; }
.pyxax-loop-add {
	width: 36px; height: 36px; border: 1px solid var(--border); background: transparent; color: var(--cyan);
	cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 18px;
	transition: all 0.2s; text-decoration: none; line-height: 1;
}
.pyxax-loop-add:hover { background: var(--cyan); color: var(--obsidian); border-color: var(--cyan); }
.pyxax-loop-add.loading { opacity: 0.5; pointer-events: none; }
.pyxax-loop-add.added::after { content: '✓'; }

/* ---- Single product ---- */
.single-product .pyxax-wc-wrap { max-width: 1200px; }
.pyxax-single {
	display: grid;
	grid-template-columns: 0.9fr 1.1fr;
	gap: 60px;
	align-items: start;
}
.pyxax-single-media {
	background: var(--obsidian-2);
	border: 1px solid var(--border-dim);
	min-height: 560px;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	overflow: hidden;
	background-color: #06090F;
}
.pyxax-single-media::before {
	content: '';
	position: absolute; inset: 0;
	background: radial-gradient(circle at 50% 45%, rgba(0,212,255,0.08), transparent 60%);
	pointer-events: none;
	z-index: 1;
}
.pyxax-single-media .vial-svg { height: 400px; position: relative; z-index: 2; }
.pyxax-single-media img { height: auto; max-height: 520px; width: auto; filter: drop-shadow(0 0 24px rgba(0,212,255,0.25)); position: relative; z-index: 2; }
.pyxax-single-badge {
	position: absolute; top: 20px; left: 20px; z-index: 3;
	font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase;
	padding: 5px 12px; background: var(--cyan-dim); color: var(--cyan); border: 1px solid var(--border);
	backdrop-filter: blur(4px);
}
.pyxax-single-info .pyx-eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--cyan); margin-bottom: 14px; }
.pyxax-single-info h1.product_title { font-family: var(--font-display); font-weight: 700; font-size: clamp(30px,4vw,46px); line-height: 1.05; color: var(--white); margin-bottom: 10px; }
.pyxax-single-info .pyx-spec { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--white-muted); margin-bottom: 24px; }
.pyxax-purity-badge {
	display: inline-flex; align-items: center; gap: 10px; margin-bottom: 24px;
	font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; color: var(--cyan);
	border: 1px solid var(--border); background: var(--cyan-dim); padding: 10px 16px;
}
.pyxax-single-info .price {
	font-family: var(--font-display); font-weight: 700; font-size: 34px; color: var(--white); margin-bottom: 6px; display: block;
}
.pyxax-single-info .price del { color: var(--white-muted); font-size: 22px; font-weight: 400; margin-right: 10px; }
.pyxax-single-info .price ins { text-decoration: none; }
.pyxax-single-desc { font-size: 14px; color: var(--white-dim); line-height: 1.85; font-weight: 300; margin: 22px 0; }

/* Add to cart */
.pyxax-single-info form.cart { display: flex; gap: 12px; align-items: stretch; margin: 24px 0; flex-wrap: wrap; }
.pyxax-single-info form.cart .quantity input.qty {
	width: 72px; background: var(--obsidian-3); border: 1px solid var(--border-dim); color: var(--white);
	font-family: var(--font-mono); font-size: 14px; padding: 14px 10px; text-align: center;
}
.woocommerce .pyxax-single-info button.single_add_to_cart_button,
.pyxax-single-info button.single_add_to_cart_button {
	font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
	padding: 16px 40px; background: var(--cyan); color: var(--obsidian); border: none; cursor: pointer;
	font-weight: 500; transition: all 0.2s; border-radius: 0;
}
.pyxax-single-info button.single_add_to_cart_button:hover { background: #33DCFF; box-shadow: 0 8px 30px rgba(0,212,255,0.3); }

/* RUO disclaimer + batch/lot spec table */
.pyxax-ruo {
	border: 1px solid var(--border); background: var(--obsidian-2); padding: 16px 18px; margin: 24px 0;
	font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; color: var(--white-muted); line-height: 1.75;
}
.pyxax-ruo strong { color: var(--cyan); }
.pyxax-specs { border-top: 1px solid var(--border-dim); margin-top: 28px; }
.pyxax-specs .pyx-spec-row {
	display: grid; grid-template-columns: 180px 1fr; gap: 16px; padding: 13px 0;
	border-bottom: 1px solid var(--border-dim); font-size: 13px;
}
.pyxax-specs .pyx-spec-k { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--white-muted); }
.pyxax-specs .pyx-spec-v { color: var(--white-dim); }
.pyxax-specs .pyx-spec-v.mono { font-family: var(--font-mono); color: var(--cyan); font-size: 12px; }

/* Tabs / related */
.woocommerce-tabs { margin-top: 60px; }
.woocommerce-tabs ul.tabs { list-style: none; padding: 0; display: flex; gap: 24px; border-bottom: 1px solid var(--border-dim); margin-bottom: 28px; }
.woocommerce-tabs ul.tabs li { }
.woocommerce-tabs ul.tabs li a { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--white-dim); text-decoration: none; padding-bottom: 12px; display: inline-block; }
.woocommerce-tabs ul.tabs li.active a { color: var(--cyan); border-bottom: 2px solid var(--cyan); }
.woocommerce-tabs .panel { color: var(--white-dim); font-size: 14px; line-height: 1.85; font-weight: 300; }
.related.products > h2, .up-sells > h2 { font-family: var(--font-display); font-weight: 700; font-size: 24px; color: var(--white); margin: 0 0 24px; }

/* ---- Cart & Checkout (dark) ---- */
.woocommerce table.shop_table {
	border: 1px solid var(--border-dim); background: var(--obsidian-2); color: var(--white-dim);
	border-collapse: collapse; border-radius: 0;
}
.woocommerce table.shop_table th { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--white-muted); border-bottom: 1px solid var(--border-dim); }
.woocommerce table.shop_table td { border-top: 1px solid var(--border-dim); color: var(--white-dim); }
.woocommerce a { color: var(--cyan); }
.woocommerce .cart-collaterals h2, .woocommerce-checkout h3, .woocommerce-cart h1, .woocommerce-checkout h1 { font-family: var(--font-display); color: var(--white); }
.woocommerce form .form-row label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(240,244,248,0.82); }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .select2-container .select2-selection {
	background: var(--obsidian-3) !important; border: 1px solid var(--border-dim) !important; color: var(--white) !important;
	font-family: var(--font-body); padding: 12px 14px; border-radius: 0;
}
.woocommerce #payment, .woocommerce-checkout #order_review { background: var(--obsidian-2); border: 1px solid var(--border-dim); }
.woocommerce .button, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce #respond input#submit {
	font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
	background: var(--cyan); color: var(--obsidian); border: none; border-radius: 0; padding: 14px 30px; font-weight: 500;
	transition: all 0.2s;
}
.woocommerce .button:hover, .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover { background: #33DCFF; color: var(--obsidian); }
.woocommerce .button.alt, .woocommerce button.button.alt { background: var(--cyan); color: var(--obsidian); }
/* Checkout / place-order buttons — override WooCommerce's default purple */
.woocommerce a.checkout-button,
.woocommerce a.checkout-button.button.alt,
.woocommerce .wc-proceed-to-checkout a.checkout-button,
.woocommerce #place_order,
.woocommerce button#place_order {
	background-color: var(--cyan) !important;
	color: var(--obsidian) !important;
	border: none !important;
}
.woocommerce a.checkout-button:hover,
.woocommerce #place_order:hover { background-color: #33DCFF !important; color: var(--obsidian) !important; }

/* ---- My Account (dark) ---------------------------------------------------
 * The theme shipped no styling for the account dashboard, so it fell back to
 * WooCommerce's raw defaults: a bulleted <ul> nav + core float layout that
 * collided with the fixed header. Replace the floats with a flex sidebar and
 * style the nav as dark tabs. Scoped to body.woocommerce-account so nothing
 * else is affected. */
.woocommerce-account .pyxax-wc-wrap > .woocommerce,
.woocommerce-account .pyxax-wc-wrap :has(> .woocommerce-MyAccount-navigation) {
	display: flex; flex-wrap: wrap; gap: 40px; align-items: flex-start;
}
/* ROOT CAUSE of the overlay: pyxax.css styles the bare `nav` element for the
   site header (position:fixed; top:0; z-index:100; display:flex; padding;
   blurred background) — and Woo's account menu is ALSO a <nav>, so it was
   pinned over the header/title/content on every viewport. Reset every property
   that header rule sets, at higher specificity. */
.woocommerce-account nav.woocommerce-MyAccount-navigation {
	position: static !important;
	top: auto !important; left: auto !important; right: auto !important;
	z-index: auto;
	display: block;
	align-items: normal; justify-content: normal;
	padding: 0;
	background: none;
	backdrop-filter: none;
	border-bottom: none;
}
/* !important beats WooCommerce's core float:left, which loads AFTER the theme
   CSS on account pages and was winning at equal specificity (making the nav
   float on top of the content). float is ignored on flex items anyway, so this
   also degrades cleanly to a stacked layout if :has() is ever unsupported. */
.woocommerce-account .woocommerce-MyAccount-navigation {
	float: none !important; width: 100%; max-width: 240px; flex: 0 0 240px; margin: 0;
}
.woocommerce-account .woocommerce-MyAccount-content {
	float: none !important; width: auto; flex: 1 1 320px; min-width: 0; overflow: hidden; color: var(--white-dim);
}
.woocommerce-account .woocommerce-MyAccount-navigation ul {
	list-style: none; margin: 0; padding: 0;
	border: 1px solid var(--border-dim); background: var(--obsidian-2);
}
.woocommerce-account .woocommerce-MyAccount-navigation li {
	margin: 0; border-bottom: 1px solid var(--border-dim);
}
.woocommerce-account .woocommerce-MyAccount-navigation li:last-child { border-bottom: none; }
.woocommerce-account .woocommerce-MyAccount-navigation li a {
	display: block; padding: 13px 18px; text-decoration: none;
	font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em;
	text-transform: uppercase; color: var(--white-dim); transition: all 0.15s;
}
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
	background: var(--obsidian-3); color: var(--white);
}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
	background: var(--cyan-dim); color: var(--cyan); box-shadow: inset 3px 0 0 var(--cyan);
}
.woocommerce-account .woocommerce-MyAccount-content > p,
.woocommerce-account .woocommerce-MyAccount-content address { color: var(--white-dim); }
.woocommerce-account .woocommerce-MyAccount-content a:not(.button) { color: var(--cyan); }
.woocommerce-account .woocommerce-MyAccount-content h2,
.woocommerce-account .woocommerce-MyAccount-content h3 { font-family: var(--font-display); color: var(--white); }
@media (max-width: 782px) {
	.woocommerce-account .pyxax-wc-wrap > .woocommerce { gap: 24px; }
	.woocommerce-account .woocommerce-MyAccount-navigation { max-width: none; flex-basis: 100%; }
}
.woocommerce-message, .woocommerce-info, .woocommerce-error {
	background: var(--obsidian-2); border-top: 3px solid var(--cyan); color: var(--white-dim);
	font-family: var(--font-body); border-radius: 0;
}
.woocommerce-message::before, .woocommerce-info::before { color: var(--cyan); }
.woocommerce .cart_totals, .woocommerce-checkout-review-order { color: var(--white-dim); }

/* ---- Checkout form: clean column layout + readable placeholders ----
   WooCommerce core sets `.form-row { display:grid }`, which in this theme
   mis-stacks the label/input and crams every field into a half-width float.
   Reset to label-above-input, pair first/last name on desktop, single column
   on mobile, and cap the field column so it reads as a deliberate layout. ---- */
.woocommerce-checkout .form-row input::placeholder,
.woocommerce-checkout .form-row textarea::placeholder { color: rgba(240,244,248,0.5) !important; opacity: 1; }
.woocommerce-checkout #customer_details .col2-set { display: block; }
.woocommerce-checkout #customer_details .col-1,
.woocommerce-checkout #customer_details .col-2 { float: none !important; width: 100% !important; max-width: 640px; padding: 0; }
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper,
.woocommerce-checkout .woocommerce-additional-fields__field-wrapper { display: grid; grid-template-columns: 1fr 1fr; column-gap: 20px; }
.woocommerce-checkout .form-row { display: flex !important; flex-direction: column; float: none !important; width: auto !important; margin: 0 0 18px !important; padding: 0; }
.woocommerce-checkout .form-row-wide { grid-column: 1 / -1; }
.woocommerce-checkout .form-row-first { grid-column: 1 / 2; }
.woocommerce-checkout .form-row-last { grid-column: 2 / 3; }
.woocommerce-checkout .form-row .woocommerce-input-wrapper { width: 100%; }
@media (max-width: 768px) {
	.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
	.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper,
	.woocommerce-checkout .woocommerce-additional-fields__field-wrapper { grid-template-columns: 1fr; }
	.woocommerce-checkout .form-row-first,
	.woocommerce-checkout .form-row-last { grid-column: 1 / -1; }
}

/* ---- My Account forms: same `.form-row` class collision as checkout ----
   pyxax.css's prototype rule `.form-row { display:grid; 1fr 1fr }` also hits
   the account Addresses / Account-details forms — each label and its input
   get split into opposite grid columns. Same reset as checkout, scoped to
   the account area: field wrapper is the 2-col grid, each row is a
   label-above-input flex column, first/last name pair up on desktop. */
.woocommerce-account .woocommerce-address-fields__field-wrapper,
.woocommerce-account form.woocommerce-EditAccountForm {
	display: grid; grid-template-columns: 1fr 1fr; column-gap: 20px; max-width: 640px;
}
.woocommerce-account .woocommerce-MyAccount-content .form-row {
	display: flex !important; flex-direction: column; float: none !important;
	width: auto !important; margin: 0 0 18px !important; padding: 0;
}
.woocommerce-account .woocommerce-MyAccount-content .form-row-wide,
.woocommerce-account form.woocommerce-EditAccountForm fieldset,
.woocommerce-account form.woocommerce-EditAccountForm p:not([class]) { grid-column: 1 / -1; }
.woocommerce-account .woocommerce-MyAccount-content .form-row-first { grid-column: 1 / 2; }
.woocommerce-account .woocommerce-MyAccount-content .form-row-last { grid-column: 2 / 3; }
.woocommerce-account .woocommerce-MyAccount-content .form-row .woocommerce-input-wrapper { width: 100%; }
.woocommerce-account form.woocommerce-EditAccountForm fieldset {
	border: 1px solid var(--border-dim); padding: 20px; margin: 6px 0 18px;
}
.woocommerce-account form.woocommerce-EditAccountForm fieldset legend {
	font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em;
	text-transform: uppercase; color: rgba(240,244,248,0.82); padding: 0 8px;
}
@media (max-width: 768px) {
	.woocommerce-account .woocommerce-address-fields__field-wrapper,
	.woocommerce-account form.woocommerce-EditAccountForm { grid-template-columns: 1fr; }
	.woocommerce-account .woocommerce-MyAccount-content .form-row-first,
	.woocommerce-account .woocommerce-MyAccount-content .form-row-last { grid-column: 1 / -1; }
}

/* ---- Cart: shipping-calculator layout + brighter price/subtotal ----
   Same `.form-row { display:grid }` reset as checkout, applied to the cart's
   Calculate Shipping form (it lives on .woocommerce-cart, so the checkout-
   scoped rule above didn't reach it). Then lift the dim line-item and totals
   amounts (were --white-dim 0.55) to full contrast, keeping the free line cyan. */
.woocommerce-cart .shipping-calculator-form .form-row {
	display: flex !important; flex-direction: column; float: none !important;
	width: 100% !important; margin: 0 0 14px !important; padding: 0;
}
.woocommerce-cart .shipping-calculator-form .form-row .woocommerce-input-wrapper { width: 100%; }
.woocommerce-cart .shipping-calculator-form .button { width: 100%; margin-top: 4px; }
.woocommerce-cart td.product-price .woocommerce-Price-amount,
.woocommerce-cart td.product-subtotal .woocommerce-Price-amount,
.woocommerce-cart .cart_totals tr.cart-subtotal .woocommerce-Price-amount,
.woocommerce-cart .cart_totals tr.order-total .woocommerce-Price-amount { color: var(--white); font-weight: 500; }
.woocommerce-cart .pyx-free-price,
.woocommerce-cart .pyx-free-price .woocommerce-Price-amount { color: var(--cyan) !important; }

/* ---- Cart / mini-cart thumbnails ---- */
.woocommerce td.product-thumbnail img,
.pyxax-cart-thumb,
.woocommerce-mini-cart img,
img.pyxax-cart-thumb {
	width: 64px !important;
	height: 84px !important;
	max-width: 64px;
	object-fit: contain;
	background: #06090F;
	border: 1px solid var(--border-dim);
	border-radius: 0;
}
.woocommerce-mini-cart img.pyxax-cart-thumb { width: 48px !important; height: 62px !important; }
.woocommerce td.product-name a { color: var(--white); text-decoration: none; }
.woocommerce td.product-name a:hover { color: var(--cyan); }

/* ---- Post list (blog fallback) ---- */
.pyxax-post-list { display: flex; flex-direction: column; gap: 32px; }
.pyxax-post-card { border-bottom: 1px solid var(--border-dim); padding-bottom: 24px; }
.pyxax-post-title { font-family: var(--font-display); font-size: 22px; font-weight: 600; }
.pyxax-post-title a { color: var(--white); text-decoration: none; }
.pyxax-post-title a:hover { color: var(--cyan); }
.pyxax-post-meta { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--white-muted); margin: 6px 0 12px; }
.pyxax-post-excerpt { color: var(--white-dim); font-size: 14px; line-height: 1.75; font-weight: 300; }
.pyxax-pagination { margin-top: 40px; }
.pyxax-pagination a, .pyxax-pagination .current { font-family: var(--font-mono); font-size: 12px; color: var(--white-dim); padding: 8px 12px; border: 1px solid var(--border-dim); text-decoration: none; }
.pyxax-pagination .current { color: var(--cyan); border-color: var(--cyan-mid); }

/* ---- Breadcrumbs (subtle, muted) ---- */
.pyxax-breadcrumb { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--white-muted); margin: 0 0 22px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pyxax-breadcrumb a { color: var(--white-muted); text-decoration: none; transition: color .15s; }
.pyxax-breadcrumb a:hover { color: var(--cyan); }
.pyxax-breadcrumb .pyxb-sep { opacity: 0.45; }
.pyxax-breadcrumb .pyxb-current { color: var(--white-dim); }

/* ---- Request Batch cylinder overlay ---- */
.product-vial.vial-request { position: relative; }
.pyx-vial-tag { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--white-muted); background: rgba(13,17,23,0.72); border: 1px solid var(--border-dim); padding: 4px 10px; white-space: nowrap; pointer-events: none; }

/* ---- Contact page ---- */
.pyxax-contact-sub { font-size: 16px; color: var(--white-dim); font-weight: 300; margin: -8px 0 30px; }
.pyxax-contact { margin-bottom: 30px; }
.pyxax-contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px; margin-bottom: 4px; }
.pyxax-contact .pyxax-field span em { color: var(--cyan); font-style: normal; opacity: 1; }
.pyxax-contact-select { width: 100%; background: var(--obsidian-3); border: 1px solid var(--border-dim); color: var(--white); font-family: var(--font-body); font-size: 14px; padding: 12px 14px; outline: none; border-radius: 0; }
.pyxax-contact-select:focus { border-color: var(--cyan-mid); }
.pyxax-contact textarea { resize: vertical; }
.pyxax-contact-btn { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; padding: 15px 34px; background: var(--cyan); color: var(--obsidian); border: none; cursor: pointer; font-weight: 500; transition: all .2s; margin-top: 8px; }
.pyxax-contact-btn:hover { background: #33DCFF; box-shadow: 0 8px 30px rgba(0,212,255,0.3); }
.pyxax-contact-err { color: #FF5A5A; font-family: var(--font-mono); font-size: 12px; padding: 11px 13px; border: 1px solid rgba(255,90,90,0.4); background: rgba(255,90,90,0.08); margin-bottom: 16px; }
.pyxax-contact-success { border: 1px solid var(--cyan-mid); background: var(--cyan-dim); padding: 22px 26px; }
.pyxax-contact-info { display: flex; gap: 44px; margin: 6px 0 26px; flex-wrap: wrap; }
.pcii-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--white-muted); margin-bottom: 6px; }
.pyxax-contact-info-item a { color: var(--cyan); text-decoration: none; font-size: 15px; }
.pyxax-contact-info-item span { color: var(--white); font-size: 15px; }
@media (max-width: 560px) { .pyxax-contact-grid { grid-template-columns: 1fr; } }

/* ---- Sitemap page ---- */
.pyxax-doc-body .pyxax-sitemap { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 34px 26px; margin: 28px 0 0; }
.pyxax-doc-body .pyx-sitemap-col h3 { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cyan); margin: 0 0 14px; padding-bottom: 10px; border-bottom: 1px solid var(--border-dim); }
.pyxax-doc-body .pyx-sitemap-col ul { list-style: none; margin: 0; padding: 0; }
.pyxax-doc-body .pyx-sitemap-col li { padding: 7px 0; font-size: 14px; color: var(--white-dim); margin: 0; }
.pyxax-doc-body .pyx-sitemap-col a { color: var(--white-dim); text-decoration: none; transition: color .15s; }
.pyxax-doc-body .pyx-sitemap-col a:hover { color: var(--cyan); }
.pyxax-doc-body .pyx-sitemap-col ul ul { margin: 8px 0 4px 4px; padding-left: 12px; border-left: 1px solid var(--border-dim); }
.pyxax-doc-body .pyx-sitemap-col ul ul li { padding: 4px 0; font-size: 13px; }

/* ---- Research Hub: dynamic Articles & Guides grid ---- */
.rh-articles-section { margin: 0 0 60px; }
.rh-articles-section h2 { font-family: 'Syne', sans-serif; font-weight: 800; font-size: clamp(26px,4vw,36px); line-height: 1.1; letter-spacing: -0.01em; color: var(--white); margin: 6px 0 0; }
.rh-articles-note { font-size: 15px; line-height: 1.6; color: var(--white-dim); font-weight: 300; margin: 12px 0 28px; max-width: 640px; }
.rh-articles-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; align-items: stretch; }
.rh-article-card { display: flex; flex-direction: column; background: var(--obsidian-2); border: 1px solid var(--border-dim); padding: 26px 28px 24px; text-decoration: none; height: 100%; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.rh-article-card:hover { border-color: var(--cyan); box-shadow: 0 10px 34px rgba(0,212,255,0.10); transform: translateY(-2px); }
.rh-article-tag { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cyan); margin-bottom: 14px; }
.rh-article-title { font-family: 'Syne', sans-serif; font-weight: 700; font-size: 18px; line-height: 1.3; letter-spacing: -0.01em; color: var(--white); margin: 0 0 12px; transition: color .2s ease; }
.rh-article-desc { font-size: 13.5px; line-height: 1.6; color: var(--white-dim); font-weight: 300; margin: 0 0 20px; flex: 1 1 auto; }
.rh-article-btn { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cyan); font-weight: 500; margin-top: auto; transition: color .2s ease; }
.rh-article-card:hover .rh-article-title { color: var(--cyan); }
.rh-article-card:hover .rh-article-btn { color: #33DCFF; }
@media (max-width: 720px) { .rh-articles-grid { grid-template-columns: 1fr; } }

/* ============================================================
   FOUNDING RESEARCHER launch page
   ============================================================ */
.pyxax-founding { padding-top: 0; }
.fnd-hero { max-width: 800px; margin: 0 auto; padding: 150px 40px 40px; text-align: center; }
.fnd-hero .section-label { justify-content: center; }
.fnd-hero-title { font-family: 'Syne', sans-serif; font-weight: 800; font-size: clamp(38px,7vw,72px); line-height: 1.02; letter-spacing: -0.02em; color: var(--white); margin: 14px 0 20px; }
.fnd-hero-sub { font-size: clamp(15px,2vw,18px); line-height: 1.7; color: var(--white-dim); font-weight: 300; max-width: 600px; margin: 0 auto; }

.fnd-tiers-section { max-width: 1140px; margin: 0 auto; padding: 40px 40px 20px; }
.fnd-tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: start; }
.fnd-card { background: var(--obsidian-2); border: 1px solid var(--border-dim); padding: 34px 30px; position: relative; display: flex; flex-direction: column; height: 100%; }
.fnd-card-featured { border-color: var(--cyan); box-shadow: 0 0 44px rgba(0,212,255,0.09); padding: 44px 34px; margin-top: -12px; }
.fnd-card-badge { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); background: var(--cyan); color: var(--obsidian); font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; padding: 5px 14px; font-weight: 500; white-space: nowrap; }
.fnd-card-name { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cyan); margin-bottom: 16px; }
.fnd-card-price { font-family: 'Syne', sans-serif; font-weight: 800; font-size: 48px; color: var(--white); line-height: 1; margin-bottom: 18px; }
.fnd-card-desc { font-size: 13.5px; line-height: 1.65; color: var(--white-dim); font-weight: 300; margin-bottom: 22px; }
.fnd-card-includes { list-style: none; margin: 0 0 26px; padding: 0; border-top: 1px solid var(--border-dim); }
.fnd-card-includes li { position: relative; padding: 11px 0 11px 24px; font-size: 12.5px; line-height: 1.5; color: rgba(240,244,248,0.75); border-bottom: 1px solid var(--border-dim); }
.fnd-card-includes li::before { content: '\2713'; position: absolute; left: 0; top: 11px; color: var(--cyan); font-size: 12px; }
.fnd-card-btn { margin-top: auto; display: block; text-align: center; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 500; padding: 16px 20px; background: var(--cyan); color: var(--obsidian); text-decoration: none; transition: all .2s; border: 1px solid var(--cyan); cursor: pointer; }
.fnd-card-btn:hover { background: #33DCFF; box-shadow: 0 8px 30px rgba(0,212,255,0.3); }
.fnd-card:not(.fnd-card-featured) .fnd-card-btn { background: transparent; color: var(--cyan); }
.fnd-card:not(.fnd-card-featured) .fnd-card-btn:hover { background: var(--cyan); color: var(--obsidian); }
.fnd-btn-closed, .fnd-card:not(.fnd-card-featured) .fnd-btn-closed { background: var(--obsidian-3) !important; color: var(--white-muted) !important; border-color: var(--border-dim) !important; cursor: not-allowed; pointer-events: none; box-shadow: none !important; }

.fnd-closed { margin-top: 42px; text-align: center; padding: 36px 30px; border: 1px solid var(--border); background: var(--obsidian-2); }
.fnd-closed-msg { font-family: 'Syne', sans-serif; font-weight: 700; font-size: 20px; color: var(--white); line-height: 1.4; margin-bottom: 24px; }
.fnd-waitlist { max-width: 560px; margin: 0 auto; }
.fnd-waitlist-row { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.fnd-waitlist-input { flex: 1 1 180px; background: var(--obsidian-3); border: 1px solid var(--border-dim); color: var(--white); font-family: var(--font-body); font-size: 14px; padding: 13px 14px; outline: none; }
.fnd-waitlist-input:focus { border-color: var(--cyan-mid); }
.fnd-waitlist-btn { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; padding: 13px 24px; background: var(--cyan); color: var(--obsidian); border: none; cursor: pointer; font-weight: 500; transition: all .2s; }
.fnd-waitlist-btn:hover { background: #33DCFF; }
.fnd-waitlist-note { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--white-muted); margin-top: 12px; }
.fnd-waitlist-err { color: #FF6B6B; font-family: var(--font-mono); font-size: 10px; margin-top: 10px; text-transform: uppercase; }

/* ---- Pre-launch waitlist capture ---- */
.fnd-waitlist-primary { margin-top: 32px; }
.fnd-waitlist-success { max-width: 560px; margin: 0 auto; text-align: center; padding: 28px 24px; border: 1px solid var(--cyan); background: rgba(0,212,255,0.04); }
.fnd-waitlist-success-h { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em; color: var(--cyan); margin: 0; }
.fnd-waitlist-success-p { font-size: 14px; line-height: 1.6; color: var(--white-dim); margin: 10px 0 0; }
.fnd-benefits { list-style: none; max-width: 480px; margin: 34px auto 0; padding: 0; text-align: left; }
.fnd-benefits li { position: relative; padding: 12px 0 12px 30px; font-size: 14px; line-height: 1.5; color: rgba(240,244,248,0.82); border-bottom: 1px solid var(--border-dim); }
.fnd-benefits li:last-child { border-bottom: none; }
.fnd-benefit-check { position: absolute; left: 0; top: 12px; color: var(--cyan); font-weight: 700; }

/* ---- "Coming Soon" tier previews (no buy button) ---- */
.fnd-card-badge-soon { background: var(--obsidian-3); color: var(--white-muted); border: 1px solid var(--border-dim); }
.fnd-card-comingsoon { opacity: 1; } /* was 0.94 — the ancestor opacity dimmed .fnd-card-soon-note text to 3.94:1 (below WCAG AA 4.5:1); the dim was imperceptible so removed */
.fnd-card-soon-note { margin-top: auto; text-align: center; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--white-muted); padding: 15px 20px; border: 1px dashed var(--border-dim); background: var(--obsidian-3); }
.fnd-tiers-cta { text-align: center; font-size: 13.5px; color: var(--white-dim); max-width: 560px; margin: 30px auto 0; line-height: 1.6; }

.fnd-timer-section { text-align: center; padding: 66px 40px; }
.fnd-section-h { font-family: 'Syne', sans-serif; font-weight: 700; font-size: clamp(22px,3vw,30px); color: var(--white); margin: 0 0 34px; text-align: center; }
.fnd-timer { display: flex; align-items: flex-start; justify-content: center; gap: 14px; }
.fnd-timer-block { display: flex; flex-direction: column; align-items: center; min-width: 90px; background: var(--obsidian-2); border: 1px solid var(--border-dim); padding: 20px 10px 14px; }
.fnd-timer-num { font-family: 'Syne', sans-serif; font-weight: 800; font-size: clamp(38px,6vw,60px); color: var(--cyan); line-height: 1; font-variant-numeric: tabular-nums; }
.fnd-timer-lbl { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--white-muted); margin-top: 10px; }
.fnd-timer-sep { font-family: 'Syne', sans-serif; font-weight: 800; font-size: clamp(28px,5vw,48px); color: var(--white-muted); line-height: 1; padding-top: 20px; }
.fnd-timer-ended .fnd-timer-num { color: var(--white-muted); }
.fnd-timer-closed-note { margin-top: 24px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: #FF6B6B; }

.fnd-verify-section { max-width: 940px; margin: 0 auto; padding: 60px 40px; }
.learn-flags.fnd-verify-cols { margin-top: 0; }
.fnd-verify-disclaimer { margin-top: 26px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; color: var(--white-muted); line-height: 1.7; text-align: center; }

.fnd-compliance { max-width: 820px; margin: 0 auto; padding: 10px 40px 90px; text-align: center; }
.fnd-compliance p { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; color: var(--white-muted); line-height: 1.9; margin: 0; }

@media (max-width: 860px) {
	.fnd-tiers { grid-template-columns: 1fr; gap: 24px; }
	.fnd-card-featured { margin-top: 0; }
	.learn-flags.fnd-verify-cols { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
	.fnd-hero { padding-top: 128px; }
	.fnd-timer { gap: 6px; }
	.fnd-timer-block { min-width: 66px; padding: 14px 6px 10px; }
	.fnd-timer-sep { display: none; }
}

/* ---- Pre-launch payment-coming-soon notice (cart / checkout / thank-you) ---- */
.pyxax-payment-notice { background: var(--obsidian-2, #0d1117); border: 1px solid var(--border-dim, rgba(255,255,255,0.08)); border-left: 3px solid var(--cyan, #00D4FF); padding: 22px 26px; margin: 0 0 26px; }
.pyxax-payment-notice-title { font-family: 'Syne', sans-serif; font-weight: 700; font-size: 17px; letter-spacing: -0.01em; color: var(--white, #F0F4F8); margin: 0 0 10px; }
.pyxax-payment-notice p { font-family: var(--font-body, sans-serif); font-size: 14px; line-height: 1.7; color: var(--white-dim, rgba(240,244,248,0.72)); font-weight: 300; margin: 0 0 16px; }
.pyxax-payment-notice a.pyxax-payment-notice-btn { display: inline-block; font-family: var(--font-mono, monospace); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; padding: 12px 24px; background: var(--cyan, #00D4FF); color: var(--obsidian, #080A0C) !important; text-decoration: none; font-weight: 500; transition: all .2s; }
.pyxax-payment-notice a.pyxax-payment-notice-btn:hover { background: #33DCFF; box-shadow: 0 8px 24px rgba(0,212,255,0.28); color: var(--obsidian, #080A0C) !important; }
.pyxax-payment-notice-contact { margin: 16px 0 0 !important; font-size: 12px !important; color: var(--white-muted, rgba(240,244,248,0.5)) !important; }
/* WCAG 1.4.1: in-prose link needs a non-colour affordance (2.15:1 vs surrounding text). */
.pyxax-payment-notice-contact a { color: var(--cyan, #00D4FF); text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 560px) { .pyxax-payment-notice { padding: 18px 20px; } .pyxax-payment-notice-btn { display: block; text-align: center; } }

/* ============================================================
   COMPLIANCE SYSTEM — age gate · checkout confirm · RUO banner
   ============================================================ */

/* ---- Component 1: age / researcher gate ---- */
.pyxax-gate { position: fixed; inset: 0; z-index: 100000; background: #080A0C; display: flex; align-items: center; justify-content: center; padding: 24px; overflow-y: auto; }
html.pyx-verified .pyxax-gate { display: none !important; }
html.pyx-gate-lock, html.pyx-gate-lock body { overflow: hidden !important; }
.pyxax-gate-card { width: 100%; max-width: 520px; background: #0D1117; border: 1px solid rgba(0,212,255,0.2); padding: 44px 44px 38px; box-shadow: 0 30px 90px rgba(0,0,0,0.7), 0 0 60px rgba(0,212,255,0.05); }
.pyxax-gate-logo { display: flex; align-items: center; gap: 12px; margin-bottom: 26px; }
.pyxax-gate-wordmark { font-family: 'Syne', sans-serif; font-weight: 800; font-size: 20px; letter-spacing: 0.28em; color: #F0F4F8; }
.pyxax-gate-wordmark span { color: #00D4FF; }
.pyxax-gate-title { font-family: 'Syne', sans-serif; font-weight: 800; font-size: clamp(24px,4vw,32px); color: #F0F4F8; line-height: 1.1; margin: 0 0 16px; }
.pyxax-gate-lead { font-family: 'DM Sans', sans-serif; font-size: 14px; line-height: 1.7; color: rgba(240,244,248,0.7); font-weight: 300; margin: 0 0 20px; }
.pyxax-gate-sub { font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: #00D4FF; margin: 0 0 14px; }
.pyxax-gate-list { list-style: none; margin: 0 0 30px; padding: 0; }
.pyxax-gate-list li { position: relative; padding: 9px 0 9px 26px; font-size: 13.5px; line-height: 1.55; color: rgba(240,244,248,0.8); font-weight: 300; border-bottom: 1px solid rgba(240,244,248,0.06); }
.pyxax-gate-list li:last-child { border-bottom: none; }
.pyxax-gate-list li::before { content: ''; position: absolute; left: 0; top: 14px; width: 11px; height: 11px; border: 1.5px solid #00D4FF; border-radius: 50%; }
.pyxax-gate-list a { color: #00D4FF; text-decoration: none; }
.pyxax-gate-list a:hover { text-decoration: underline; }
.pyxax-gate-actions { display: flex; flex-direction: column; gap: 12px; }
.pyxax-gate-confirm { font-family: 'DM Mono', monospace; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 500; padding: 17px 28px; background: #0066FF; color: #fff; border: none; cursor: pointer; transition: all .2s; border-radius: 0; }
.pyxax-gate-confirm:hover { background: #1a75ff; box-shadow: 0 8px 30px rgba(0,102,255,0.35); }
.pyxax-gate-exit { font-family: 'DM Mono', monospace; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; padding: 13px 28px; background: transparent; color: var(--white-muted); border: 1px solid rgba(240,244,248,0.12); cursor: pointer; transition: all .2s; border-radius: 0; }
.pyxax-gate-exit:hover { color: rgba(240,244,248,0.7); border-color: rgba(240,244,248,0.25); }
@media (max-width: 520px) { .pyxax-gate-card { padding: 32px 24px 28px; } .pyxax-gate-list li { font-size: 13px; } }

/* ---- Component 2: checkout researcher-confirmation checkbox ---- */
/* Shop promo line — subtle top-of-funnel awareness (buy 5 get 1) */
.pyx-shop-promo { display: flex; align-items: center; gap: 9px; margin: 2px 0 20px; padding: 10px 14px; background: rgba(0,212,255,0.045); border-left: 2px solid var(--cyan); color: var(--white-dim); font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.02em; }
.pyx-shop-promo strong { color: var(--cyan); font-weight: 600; }
.pyx-shop-promo-gift { font-size: 14px; flex: 0 0 auto; }
/* Buy-N-get-1 promo banner (cart + checkout payment step) */
.pyx-bogo-promo { display: flex; align-items: flex-start; gap: 9px; margin: 0 0 20px; padding: 12px 16px; background: rgba(0,212,255,0.06); border: 1px solid rgba(0,212,255,0.28); color: var(--white-dim); font-family: var(--font-body); font-size: 13px; line-height: 1.5; }
.pyx-bogo-promo .pyx-bogo-hl { color: var(--cyan); font-weight: 600; }
.pyx-bogo-text { flex: 1 1 auto; }
.pyx-bogo-gift { font-size: 16px; flex: 0 0 auto; line-height: 1.5; }
.pyxax-checkout-confirm { margin: 22px 0 18px; padding: 18px 20px; background: rgba(0,212,255,0.04); border: 1px solid var(--border-dim); }
.pyxax-confirm-error { color: #FF5A5A; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; margin: 0 0 14px; padding: 11px 13px; border: 1px solid rgba(255,90,90,0.4); background: rgba(255,90,90,0.08); }
.pyxax-purpose-field { margin: 0 0 16px; }
.pyxax-purpose-label { display: block; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(240,244,248,0.82); margin: 0 0 8px; }
.pyxax-purpose-req { color: var(--cyan-mid); }
.pyxax-purpose-select { width: 100%; background: var(--obsidian-3); border: 1px solid var(--border-dim); color: var(--white); font-family: var(--font-body); font-size: 14px; padding: 12px 14px; outline: none; border-radius: 0; }
.pyxax-purpose-select:focus { border-color: var(--cyan-mid); }
.pyxax-purpose-select option { background: var(--obsidian-2); color: var(--white); }
.pyxax-purpose-field .pyxax-confirm-error { margin: 8px 0 0; }
/* display needs !important: woocommerce.css forces checkout labels to block,
   which also leaves the box span inline and collapses its 20px sizing. */
.pyxax-confirm-label { display: flex !important; gap: 12px; align-items: flex-start; cursor: pointer; margin: 0; }
.pyxax-confirm-label input { position: absolute; opacity: 0; width: 0; height: 0; }
.pyxax-confirm-box { display: inline-block; flex: 0 0 20px; width: 20px; height: 20px; margin-top: 2px; border: 1.5px solid var(--cyan-mid); background: var(--obsidian-3); position: relative; transition: all .15s; }
.pyxax-confirm-label input:checked + .pyxax-confirm-box { background: #00D4FF; border-color: #00D4FF; }
.pyxax-confirm-label input:checked + .pyxax-confirm-box::after { content: ''; position: absolute; left: 6px; top: 2px; width: 5px; height: 10px; border: solid #080A0C; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.pyxax-confirm-label input:focus-visible + .pyxax-confirm-box { outline: 2px solid #00D4FF; outline-offset: 2px; }
.pyxax-confirm-text { font-size: 12.5px; line-height: 1.6; color: rgba(240,244,248,0.65); font-weight: 300; }
.woocommerce #place_order.pyx-disabled, .woocommerce #place_order:disabled { opacity: 0.4 !important; cursor: not-allowed; filter: grayscale(0.2); }

/* ---- Buy-N-get-M-free gift line (cart + checkout) ---- */
.pyx-free-badge { display: inline-block; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: #080A0C; background: var(--cyan); padding: 2px 7px; margin-left: 8px; vertical-align: middle; white-space: nowrap; }
.pyx-free-price { color: var(--cyan); font-weight: 600; }
.pyx-free-qty { font-family: var(--font-mono); color: rgba(240,244,248,0.7); }

/* ---- Suppress Woo's "no payment methods" notice while no gateway is
   connected — the custom "coming soon" block already fills that spot. The
   :has() guard means this self-disables the moment a real payment method
   (li.wc_payment_method) is added. ---- */
.woocommerce-checkout #payment ul.wc_payment_methods:not(:has(.wc_payment_method)) { display: none; }

/* ---- Free-shipping progress (cart totals + checkout order review) ---- */
.pyx-freeship-row td { padding: 10px 0 14px; border: none; }
.pyx-freeship-label { display: flex; justify-content: space-between; gap: 12px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(240,244,248,0.65); margin-bottom: 8px; }
.pyx-freeship-label span { color: var(--cyan); font-weight: 500; }
.pyx-freeship-label span .woocommerce-Price-amount { color: var(--cyan); }
.pyx-freeship-track { height: 4px; background: rgba(240,244,248,0.08); overflow: hidden; }
.pyx-freeship-fill { height: 100%; background: var(--cyan); transition: width 0.3s; }
.pyx-freeship-ok { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--cyan); }

/* ---- Component 3: RUO disclaimer banner (cart/checkout/order-received) ---- */
.pyxax-ruo-cart-banner { display: flex; gap: 12px; align-items: flex-start; background: #111827; border-left: 3px solid #00D4FF; padding: 14px 18px; margin: 0 0 24px; font-family: var(--font-mono); font-size: 11px; line-height: 1.65; letter-spacing: 0.02em; color: rgba(240,244,248,0.62); }
.pyxax-ruo-icon { color: #00D4FF; font-size: 14px; flex-shrink: 0; line-height: 1.3; }

/* ---- Compound Selector quiz ---- */
.pyx-quiz-wrap { max-width: 720px; margin: 0 auto; padding: 150px 40px 110px; }
.pyx-quiz-title { font-family: var(--font-display); font-weight: 800; font-size: clamp(30px,5vw,50px); line-height: 1.05; color: var(--white); margin: 12px 0 14px; }
.pyx-quiz-sub { font-size: 15px; color: var(--white-dim); line-height: 1.7; font-weight: 300; margin-bottom: 34px; max-width: 560px; }
.pyx-quiz-progress { display: flex; gap: 6px; margin-bottom: 40px; }
.pyx-quiz-dot { height: 3px; flex: 1; background: var(--border-dim); transition: background .3s; }
.pyx-quiz-dot.done { background: var(--cyan); }
.pyx-quiz-q { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--white-muted); margin-bottom: 12px; }
.pyx-quiz-qh { font-family: var(--font-display); font-weight: 700; font-size: clamp(20px,3vw,28px); color: var(--white); margin-bottom: 24px; line-height: 1.2; }
.pyx-quiz-opts { display: flex; flex-direction: column; gap: 12px; }
.pyx-quiz-opt { text-align: left; background: var(--obsidian-2); border: 1px solid var(--border-dim); padding: 19px 22px; cursor: pointer; transition: all .18s; display: block; width: 100%; border-radius: 0; }
.pyx-quiz-opt:hover { border-color: var(--cyan); transform: translateX(4px); }
.pqo-t { display: block; font-family: var(--font-display); font-weight: 600; font-size: 16px; color: var(--white); }
.pqo-s { display: block; font-size: 12px; color: var(--white-muted); margin-top: 5px; font-family: var(--font-mono); letter-spacing: 0.04em; }
.pyx-quiz-back { margin-top: 26px; background: none; border: none; color: var(--white-dim); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; padding: 0; }
.pyx-quiz-back:hover { color: var(--cyan); }
.pyx-quiz-recs { display: flex; flex-direction: column; gap: 12px; margin: 10px 0 22px; }
.pyx-quiz-rec { background: var(--obsidian-2); border: 1px solid var(--border-dim); padding: 20px 22px; text-decoration: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; transition: all .18s; }
.pyx-quiz-rec:hover { border-color: var(--cyan); transform: translateX(4px); }
.pqr-main { flex: 1; }
.pqr-name { font-family: var(--font-display); font-weight: 600; font-size: 17px; color: var(--white); }
.pqr-tag { font-size: 12px; color: var(--white-muted); margin-top: 4px; font-family: var(--font-mono); letter-spacing: 0.03em; }
.pqr-arrow { font-family: var(--font-mono); font-size: 11px; color: var(--cyan); letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; }
.pyx-quiz-note { font-size: 13px; color: var(--white-dim); line-height: 1.7; margin-bottom: 18px; }
.pyx-quiz-ruo { border: 1px solid var(--border); background: var(--obsidian-2); padding: 16px 18px; margin: 6px 0 26px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.05em; color: var(--white-muted); line-height: 1.75; }
.pyx-quiz-actions { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }

/* ---- Variable product strength pills ---- */
.pyx-strength-row { margin: 6px 0 22px; }
.pyx-strength-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--white-muted); margin-bottom: 10px; }
.pyx-strength-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pyx-pill {
	font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.05em;
	padding: 10px 16px; min-width: 54px; text-align: center;
	background: var(--obsidian-3); border: 1px solid var(--border-dim); color: var(--white-dim);
	cursor: pointer; transition: all 0.18s; border-radius: 0; -webkit-appearance: none; appearance: none;
}
.pyx-pill:hover { border-color: var(--cyan-mid); color: var(--white); }
.pyx-pill.active { background: var(--cyan-dim); border-color: var(--cyan); color: var(--cyan); }
.pyx-pill.is-request { color: var(--white-muted); }
.pyx-pill.is-request::after { content: '•'; display: inline-block; margin-left: 6px; font-size: 9px; vertical-align: middle; opacity: 0.6; }
.pyx-pill.active.is-request { background: rgba(240,244,248,0.06); border-color: var(--white-dim); color: var(--white); }

/* ---- Shop: sort select, pagination, empty ---- */
.pyxax-sort-select {
	background: var(--obsidian-3); border: 1px solid var(--border-dim); color: var(--white-dim);
	font-family: var(--font-mono); font-size: 11px; padding: 8px 16px; letter-spacing: 0.08em;
	cursor: pointer; border-radius: 0;
}
.shop-search-count { font-family: var(--font-mono); font-size: 11px; color: var(--white-muted); letter-spacing: 0.08em; margin: 0 0 20px; min-height: 14px; }
.pyxax-shop-pagination { display: flex; gap: 8px; margin-top: 44px; flex-wrap: wrap; align-items: center; justify-content: center; }
.pyx-page-btn {
	font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; color: var(--white-dim);
	padding: 9px 15px; border: 1px solid var(--border-dim); background: transparent; cursor: pointer;
	transition: all 0.18s; border-radius: 0; min-width: 40px;
}
.pyx-page-btn:hover:not(.disabled):not(.current) { border-color: var(--cyan-mid); color: var(--white); }
.pyx-page-btn.current { color: var(--cyan); border-color: var(--cyan); background: var(--cyan-dim); }
.pyx-page-btn.disabled { opacity: 0.35; cursor: default; }
.pyxax-shop-empty { color: var(--white-dim); font-size: 14px; padding: 50px 0; text-align: center; }
.pyxax-reset-link { background: none; border: none; color: var(--cyan); cursor: pointer; font-size: 14px; text-decoration: underline; font-family: inherit; padding: 0; }

/* ---- Request Batch (non-active compounds) ---- */
.product-badge.badge-request {
	background: transparent;
	color: var(--white-dim);
	border: 1px solid var(--border-dim);
}
.pyxax-single-badge.is-request {
	background: rgba(240,244,248,0.06);
	color: var(--white-dim);
	border-color: var(--border-dim);
}
.pyxax-request-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 12px 18px;
	border: 1px solid var(--border);
	color: var(--cyan);
	background: var(--cyan-dim);
	text-decoration: none;
	transition: all 0.2s;
	white-space: nowrap;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	border-radius: 0;
}
.pyxax-request-btn:hover { background: var(--cyan); color: var(--obsidian); border-color: var(--cyan); }
.pyxax-request-btn.lg { width: auto; padding: 16px 34px; font-size: 12px; }
.status-request .product-footer { border-top-color: var(--border-dim); }

.pyxax-request-panel {
	border: 1px solid var(--border);
	background: var(--obsidian-2);
	padding: 24px 26px;
	margin: 24px 0;
}
.pyxax-request-panel .prp-label {
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--cyan);
	margin-bottom: 12px;
}
.pyxax-request-panel p {
	font-size: 13px;
	color: var(--white-dim);
	line-height: 1.75;
	font-weight: 300;
	margin-bottom: 20px;
	max-width: 460px;
}

/* ---- Batch request modal ---- */
.pyxax-modal { position: fixed; inset: 0; z-index: 2000; display: none; align-items: center; justify-content: center; padding: 24px; }
.pyxax-modal.open { display: flex; }
.pyxax-modal-backdrop { position: absolute; inset: 0; background: rgba(4,6,8,0.78); backdrop-filter: blur(6px); }
.pyxax-modal-card {
	position: relative;
	width: 100%;
	max-width: 460px;
	background: var(--obsidian-2);
	border: 1px solid var(--border);
	padding: 40px 38px 34px;
	box-shadow: 0 30px 80px rgba(0,0,0,0.6), 0 0 40px rgba(0,212,255,0.06);
	max-height: 90vh;
	overflow-y: auto;
}
.pyxax-modal-close {
	position: absolute; top: 14px; right: 16px;
	background: transparent; border: none; color: var(--white-muted);
	font-size: 22px; line-height: 1; cursor: pointer; padding: 4px;
}
.pyxax-modal-close:hover { color: var(--cyan); }
.pyxax-modal-eyebrow { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cyan); margin-bottom: 12px; }
.pyxax-modal-title { font-family: var(--font-display); font-weight: 700; font-size: 24px; color: var(--white); line-height: 1.15; margin-bottom: 10px; }
.pyxax-modal-sub { font-size: 13px; color: var(--white-dim); line-height: 1.7; font-weight: 300; margin-bottom: 24px; }
.pyxax-field { display: block; margin-bottom: 16px; }
.pyxax-field > span { display: block; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--white-muted); margin-bottom: 7px; }
.pyxax-field > span em { color: var(--white-muted); font-style: normal; } /* no opacity: the 0.7 multiplied --white-muted's 0.5 alpha to 0.35 effective = 2.9:1 (below WCAG AA 4.5:1); the token alone is 4.85:1+ on all panel bgs */
.pyxax-field input, .pyxax-field textarea {
	width: 100%;
	background: var(--obsidian-3);
	border: 1px solid var(--border-dim);
	color: var(--white);
	font-family: var(--font-body);
	font-size: 14px;
	padding: 12px 14px;
	outline: none;
	transition: border-color 0.2s;
	border-radius: 0;
}
.pyxax-field input:focus, .pyxax-field textarea:focus { border-color: var(--cyan-mid); }
.pyxax-field input[readonly] { color: var(--cyan); background: rgba(0,212,255,0.05); }
.pyxax-field textarea { resize: vertical; }
.pyxax-field-err { font-family: var(--font-mono); font-size: 10px; color: #FF6B6B; letter-spacing: 0.06em; margin-bottom: 12px; text-transform: uppercase; }
.pyxax-modal-fineprint { font-family: var(--font-mono); font-size: 9px; color: var(--white-muted); letter-spacing: 0.06em; text-transform: uppercase; margin-top: 12px; line-height: 1.6; }

/* Real product photos sit inside the same slots as the cylinder SVG */
.product-vial img.pyxax-product-photo { height: 100%; max-height: 100%; width: 100%; object-fit: contain; filter: drop-shadow(0 0 18px rgba(0,212,255,0.18)); }
.pyxax-single-media img.pyxax-product-photo { height: auto; max-height: 520px; width: auto; object-fit: contain; filter: drop-shadow(0 0 26px rgba(0,212,255,0.22)); }

/* ---- Homepage link sections (Research Hub / COA) ---- */
.pyxax-linksec { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 0 48px 0; }
.pyxax-linkcard {
	background: var(--obsidian-2); border: 1px solid var(--border-dim); padding: 44px 40px; text-decoration: none;
	display: block; transition: all 0.3s; position: relative; overflow: hidden;
}
.pyxax-linkcard:hover { border-color: var(--border); transform: translateY(-4px); box-shadow: 0 20px 40px rgba(0,0,0,0.4), 0 0 20px rgba(0,212,255,0.06); }
.pyxax-linkcard .plc-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cyan); margin-bottom: 16px; }
.pyxax-linkcard h3 { font-family: var(--font-display); font-weight: 700; font-size: 26px; color: var(--white); margin-bottom: 12px; }
.pyxax-linkcard p { font-size: 14px; color: var(--white-dim); line-height: 1.7; font-weight: 300; max-width: 380px; }
.pyxax-linkcard .plc-arrow { font-family: var(--font-mono); font-size: 12px; color: var(--cyan); margin-top: 20px; display: inline-block; letter-spacing: 0.1em; text-transform: uppercase; }

@media (max-width: 900px) {
	.woocommerce ul.products, .woocommerce-page ul.products { grid-template-columns: repeat(2, 1fr); }
	.pyxax-single { grid-template-columns: 1fr; gap: 32px; }
	.pyxax-linksec { grid-template-columns: 1fr; margin: 0 20px; }
	.pyxax-wc-wrap, .pyxax-doc-inner, .pyxax-narrow { padding-left: 20px; padding-right: 20px; }
}
@media (max-width: 560px) {
	/* 2-up compact grid on mobile (was 1-up) — see more products per screen. */
	.woocommerce ul.products, .woocommerce-page ul.products { grid-template-columns: repeat(2, 1fr); gap: 10px; }
	.pyxax-loop-card { padding: 14px 12px; }
	.pyxax-loop-card .product-vial { height: 148px; margin-bottom: 10px; }
	.pyxax-loop-card .vial-svg { height: 104px; }
	.pyxax-loop-card .product-name { font-size: 13.5px; line-height: 1.2; margin-bottom: 3px; }
	.pyxax-loop-card .product-category { font-size: 8.5px; letter-spacing: 0.05em; margin-bottom: 9px; }
	.pyxax-loop-card .product-trust { gap: 5px; margin: 9px 0 10px; }
	.pyxax-loop-card .pyx-trust-pill { font-size: 8px; padding: 3px 6px; letter-spacing: 0; }
	.pyxax-loop-card .product-footer { padding-top: 9px; }
	.pyxax-loop-card .product-price { font-size: 14px; }
	.pyxax-loop-card .product-badge { font-size: 7px; padding: 3px 5px; letter-spacing: 0.04em; }
	.pyxax-loop-card .pyxax-loop-add { width: 30px; height: 30px; font-size: 15px; }
	.pyxax-loop-card .pyxax-request-btn { font-size: 10px; padding: 8px 6px; letter-spacing: 0; line-height: 1.25; }
}