/* ==========================================================================
   VAULT PEPTIDES - Main Stylesheet
   ========================================================================== */

/* ==========================================================================
   CSS Custom Properties (Variables)
   ========================================================================== */

:root {
	/* Colors */
	--color-navy: #1B2A4A;
	--color-teal: #2A9D8F;
	--color-mint: #F0F7F6;
	--color-white: #FFFFFF;
	--color-black: #000000;
	--color-gray-50: #F9FAFB;
	--color-gray-100: #F3F4F6;
	--color-gray-200: #E5E7EB;
	--color-gray-300: #D1D5DB;
	--color-gray-400: #9CA3AF;
	--color-gray-500: #6B7280;
	--color-gray-600: #4B5563;
	--color-gray-700: #374151;
	--color-gray-800: #1F2937;
	--color-gray-900: #111827;
	--color-success: #10B981;
	--color-warning: #F59E0B;
	--color-error: #EF4444;

	/* Typography */
	--font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--font-size-xs: 0.75rem;
	--font-size-sm: 0.875rem;
	--font-size-base: 1rem;
	--font-size-lg: 1.125rem;
	--font-size-xl: 1.25rem;
	--font-size-2xl: 1.5rem;
	--font-size-3xl: 1.875rem;
	--font-size-4xl: 2.25rem;
	--font-size-5xl: 3rem;

	--font-weight-light: 300;
	--font-weight-normal: 400;
	--font-weight-medium: 500;
	--font-weight-semibold: 600;
	--font-weight-bold: 700;

	/* Line Heights */
	--line-height-tight: 1.25;
	--line-height-snug: 1.375;
	--line-height-normal: 1.5;
	--line-height-relaxed: 1.625;
	--line-height-loose: 2;

	/* Spacing */
	--spacing-xs: 0.25rem;
	--spacing-sm: 0.5rem;
	--spacing-md: 1rem;
	--spacing-lg: 1.5rem;
	--spacing-xl: 2rem;
	--spacing-2xl: 2.5rem;
	--spacing-3xl: 3rem;
	--spacing-4xl: 4rem;

	/* Border Radius */
	--radius-none: 0;
	--radius-sm: 0.375rem;
	--radius-md: 0.5rem;
	--radius-lg: 0.75rem;
	--radius-xl: 1rem;
	--radius-2xl: 1.5rem;
	--radius-full: 9999px;

	/* Shadows */
	--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
	--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
	--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
	--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
	--shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

	/* Transitions */
	--transition-fast: 150ms ease-in-out;
	--transition-base: 250ms ease-in-out;
	--transition-slow: 350ms ease-in-out;

	/* Container Width */
	--container-max-width: 1280px;
	--container-padding: 2rem;
}

/* ==========================================================================
   Reset & Base Styles
   ========================================================================== */

*,
*::before,
*::after {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	font-family: var(--font-family-base);
	font-size: var(--font-size-base);
	line-height: var(--line-height-normal);
	color: var(--color-gray-900);
	background-color: var(--color-white);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* ==========================================================================
   Typography
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height-tight);
	margin-bottom: var(--spacing-lg);
}

h1 {
	font-size: var(--font-size-5xl);
}

h2 {
	font-size: var(--font-size-4xl);
}

h3 {
	font-size: var(--font-size-3xl);
}

h4 {
	font-size: var(--font-size-2xl);
}

h5 {
	font-size: var(--font-size-xl);
}

h6 {
	font-size: var(--font-size-lg);
}

p {
	margin-bottom: var(--spacing-md);
	line-height: var(--line-height-relaxed);
}

a {
	color: var(--color-teal);
	text-decoration: none;
	transition: color var(--transition-fast);
}

a:hover {
	color: var(--color-navy);
}

ul, ol {
	margin-bottom: var(--spacing-md);
	padding-left: var(--spacing-2xl);
}

li {
	margin-bottom: var(--spacing-sm);
}

strong, b {
	font-weight: var(--font-weight-bold);
}

em, i {
	font-style: italic;
}

/* ==========================================================================
   Layout Utilities
   ========================================================================== */

.vault-container {
	width: 100%;
	max-width: var(--container-max-width);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--container-padding);
	padding-right: var(--container-padding);
}

.vault-main {
	min-height: calc(100vh - 400px);
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--spacing-md) var(--spacing-2xl);
	font-size: var(--font-size-base);
	font-weight: var(--font-weight-semibold);
	border: 2px solid transparent;
	border-radius: var(--radius-lg);
	cursor: pointer;
	transition: all var(--transition-base);
	text-decoration: none;
	line-height: var(--line-height-normal);
	white-space: nowrap;
	text-align: center;
}

.btn:hover {
	text-decoration: none;
}

.btn-primary {
	background-color: var(--color-teal);
	color: var(--color-white);
	border-color: var(--color-teal);
}

.btn-primary:hover {
	background-color: #238B7D;
	border-color: #238B7D;
	box-shadow: 0 4px 12px rgba(42, 157, 143, 0.3);
}

.btn-outline {
	background-color: transparent;
	color: var(--color-teal);
	border-color: var(--color-teal);
}

.btn-outline:hover {
	background-color: var(--color-mint);
	border-color: var(--color-teal);
}

.btn-lg {
	padding: var(--spacing-lg) var(--spacing-4xl);
	font-size: var(--font-size-lg);
}

/* ==========================================================================
   Top Bar
   ========================================================================== */

.vault-top-bar {
	background-color: var(--color-navy);
	color: var(--color-white);
	padding: var(--spacing-md) 0;
	font-size: var(--font-size-sm);
	border-bottom: 1px solid rgba(42, 157, 143, 0.2);
}

.vault-top-bar-content {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--spacing-md);
}

.vault-top-bar-left {
	flex: 1;
	min-width: 200px;
}

.vault-location-text {
	display: inline-block;
	letter-spacing: 0.5px;
}

.vault-top-bar-right {
	display: flex;
	gap: var(--spacing-lg);
	align-items: center;
	flex-wrap: wrap;
	justify-content: flex-end;
}

.vault-top-bar-item {
	display: inline-block;
}

.vault-email-link {
	color: var(--color-mint);
	transition: color var(--transition-fast);
}

.vault-email-link:hover {
	color: var(--color-white);
}

.vault-badge-rou {
	background-color: rgba(42, 157, 143, 0.2);
	padding: var(--spacing-xs) var(--spacing-md);
	border-radius: var(--radius-full);
	border: 1px solid var(--color-teal);
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-semibold);
	text-transform: uppercase;
	letter-spacing: 1px;
}

/* Compact utility bar: support/location details remain in the desktop bar and footer. */
@media (max-width: 1200px) {
	.vault-top-bar {
		padding: 8px 0;
	}

	.vault-top-bar-left,
	.vault-top-bar-right > .vault-top-bar-item:nth-child(-n+2) {
		display: none;
	}

	.vault-top-bar-content {
		justify-content: center;
		gap: 0;
	}

	.vault-top-bar-right {
		width: 100%;
		justify-content: center;
		flex-direction: row;
		gap: 6px 12px;
	}

	.vault-top-bar-item,
	.vault-badge-rou {
		white-space: nowrap;
	}
}

/* ==========================================================================
   Sticky Header
   ========================================================================== */

.vault-header {
	background-color: var(--color-white);
	border-bottom: 1px solid var(--color-gray-100);
	position: sticky;
	top: 0;
	z-index: 100;
	transition: box-shadow var(--transition-base);
}

.vault-header.scrolled {
	box-shadow: var(--shadow-md);
}

.vault-header-content {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--spacing-2xl);
	padding: var(--spacing-lg) 0;
}

/* Logo */
.vault-logo {
	flex-shrink: 0;
	min-width: 80px;
}

.vault-logo img,
.vault-logo .custom-logo-link img,
.vault-header .vault-logo img.custom-logo {
	max-width: 200px !important;
	max-height: 50px !important;
	width: auto !important;
	height: auto !important;
	display: block;
}

.vault-logo .custom-logo-link,
.vault-logo a {
	display: flex;
	align-items: center;
}

.vault-logo-text {
	display: flex;
	gap: 0;
	align-items: baseline;
	font-size: var(--font-size-xl);
	font-weight: var(--font-weight-bold);
	letter-spacing: 1px;
}

.vault-logo-vault {
	color: var(--color-navy);
	font-size: var(--font-size-lg);
}

.vault-logo-peptides {
	color: var(--color-teal);
	font-size: var(--font-size-lg);
	margin-left: var(--spacing-xs);
}

/* Search Form */
.vault-search-form {
	flex: 1;
	max-width: 400px;
}

.vault-search-form form {
	display: flex;
	gap: var(--spacing-sm);
}

.vault-search-form input {
	flex: 1;
	padding: var(--spacing-md) var(--spacing-lg);
	border: 1px solid var(--color-gray-300);
	border-radius: var(--radius-lg);
	font-size: var(--font-size-sm);
	transition: border-color var(--transition-fast);
}

.vault-search-form input:focus {
	outline: none;
	border-color: var(--color-teal);
	box-shadow: 0 0 0 3px rgba(42, 157, 143, 0.1);
}

.vault-search-form button {
	padding: var(--spacing-md) var(--spacing-lg);
	background-color: #176c61;
	color: var(--color-white);
	border: none;
	border-radius: var(--radius-lg);
	cursor: pointer;
	font-weight: var(--font-weight-semibold);
	transition: background-color var(--transition-fast);
}

.vault-search-form button:hover {
	background-color: #12594f;
}
.vault-search-form button:focus-visible {
	outline: 2px solid #8fd8ce;
	outline-offset: 3px;
}

/* Header Right */
.vault-header-right {
	display: flex;
	align-items: center;
	gap: var(--spacing-xl);
}

.vault-icon {
	width: 24px;
	height: 24px;
	stroke-width: 1.5;
	color: var(--color-navy);
}

.vault-account-link,
.vault-cart-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: var(--radius-full);
	cursor: pointer;
	transition: background-color var(--transition-fast), color var(--transition-fast);
	position: relative;
}

.vault-account-link:hover,
.vault-cart-icon:hover {
	background-color: var(--color-mint);
	color: var(--color-teal);
}

/* Cart Count Badge */
.vault-cart-wrapper {
	position: relative;
}

.vault-cart-count {
	position: absolute;
	top: -8px;
	right: -8px;
	background-color: var(--color-error);
	color: var(--color-white);
	width: 24px;
	height: 24px;
	border-radius: var(--radius-full);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-bold);
	transition: transform var(--transition-fast);
}

/* Mobile Menu Toggle */
.vault-menu-toggle {
	display: none;
	flex-direction: column;
	gap: var(--spacing-xs);
	background: none;
	border: none;
	cursor: pointer;
	padding: var(--spacing-md);
	margin-right: calc(-1 * var(--spacing-md));
}

.vault-hamburger {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-xs);
}

.vault-hamburger span {
	width: 24px;
	height: 2px;
	background-color: var(--color-navy);
	border-radius: var(--radius-sm);
	transition: all var(--transition-base);
}

@media (max-width: 768px) {
	.vault-header-content {
		gap: var(--spacing-md);
	}

	.vault-search-form {
		max-width: 100%;
		flex: 0 0 100%;
		order: 3;
	}

	.vault-search-form form {
		width: 100%;
	}

	.vault-search-form input {
		font-size: 16px;
	}

	.vault-header-right {
		gap: var(--spacing-lg);
	}

	.vault-menu-toggle {
		display: flex;
		order: 2;
	}

	.vault-menu-toggle.active .vault-hamburger span:nth-child(1) {
		transform: rotate(45deg) translate(8px, 8px);
	}

	.vault-menu-toggle.active .vault-hamburger span:nth-child(2) {
		opacity: 0;
	}

	.vault-menu-toggle.active .vault-hamburger span:nth-child(3) {
		transform: rotate(-45deg) translate(7px, -7px);
	}
}

/* ==========================================================================
   Navigation
   ========================================================================== */

.vault-nav {
	background-color: var(--color-white);
	border-bottom: 1px solid var(--color-gray-100);
	position: relative;
	z-index: 99;
}

.vault-nav ul {
	display: flex;
	gap: var(--spacing-2xl);
	list-style: none;
	padding: 0;
	margin: 0;
}

.vault-nav li {
	margin: 0;
}

.vault-nav a {
	display: block;
	padding: var(--spacing-md) 0;
	color: var(--color-gray-700);
	font-weight: var(--font-weight-medium);
	border-bottom: 3px solid transparent;
	transition: all var(--transition-fast);
}

.vault-nav a:hover,
.vault-nav li.current-menu-item a,
.vault-nav li.current-post-ancestor a {
	color: var(--color-teal);
	border-bottom-color: var(--color-teal);
}

@media (max-width: 768px) {
	.vault-nav {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background-color: var(--color-white);
		border-bottom: 1px solid var(--color-gray-100);
		padding: var(--spacing-lg);
	}

	.vault-nav.active {
		display: block;
	}

	.vault-nav ul {
		flex-direction: column;
		gap: var(--spacing-lg);
	}

	.vault-nav a {
		border-bottom: none;
		border-left: 3px solid transparent;
		padding-left: var(--spacing-md);
	}

	.vault-nav a:hover,
	.vault-nav li.current-menu-item a,
	.vault-nav li.current-post-ancestor a {
		border-left-color: var(--color-teal);
	}
}

/* ==========================================================================
   Hero Section
   ========================================================================== */

.vault-hero {
	position: relative;
	overflow: hidden;
	background: linear-gradient(135deg, rgba(27,42,74,0.88) 0%, rgba(15,24,35,0.92) 100%),
		url('https://vaultpeptides.com/wp-content/uploads/2026/03/Vault-Peptides-Hero-Banner-Image-2.png') center/cover no-repeat;
	color: var(--color-white);
	padding: 6rem var(--spacing-lg) 4rem;
	text-align: center;
}

.vault-hero-bg {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	opacity: 0.3;
}

.vault-molecule-animation {
	width: 100%;
	height: 100%;
	object-fit: cover;
	animation: float 20s ease-in-out infinite;
}

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

.vault-hero-content {
	position: relative;
	z-index: 1;
}

.vault-hero-badge {
	display: inline-block;
	background-color: rgba(42, 157, 143, 0.2);
	border: 1px solid var(--color-teal);
	color: var(--color-mint);
	padding: var(--spacing-sm) var(--spacing-md);
	border-radius: var(--radius-full);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-semibold);
	text-transform: uppercase;
	letter-spacing: 1px;
	margin-bottom: var(--spacing-lg);
}

.vault-hero-headline {
	font-size: var(--font-size-5xl);
	font-weight: var(--font-weight-bold);
	line-height: 1.1;
	margin-bottom: var(--spacing-2xl);
	letter-spacing: -1px;
}

.vault-hero-subtitle {
	font-size: var(--font-size-lg);
	line-height: var(--line-height-relaxed);
	margin-bottom: var(--spacing-2xl);
	max-width: 700px;
	margin-left: auto;
	margin-right: auto;
	opacity: 0.95;
}

.vault-hero-ctas {
	display: flex;
	gap: var(--spacing-md);
	justify-content: center;
	margin-bottom: var(--spacing-2xl);
	flex-wrap: wrap;
}

.vault-hero-rou {
	margin-top: var(--spacing-lg);
	font-size: var(--font-size-sm);
	opacity: 0.8;
}

@media (max-width: 1024px) {
	.vault-hero {
		padding: 4rem var(--spacing-lg) 3rem;
	}

	.vault-hero-headline {
		font-size: var(--font-size-4xl);
	}

	.vault-hero-subtitle {
		font-size: var(--font-size-base);
	}
}

@media (max-width: 768px) {
	.vault-hero {
		padding: 3rem var(--spacing-lg) 2rem;
	}

	.vault-hero-headline {
		font-size: var(--font-size-3xl);
	}

	.vault-hero-ctas {
		flex-direction: column;
		align-items: center;
	}

	.vault-hero-ctas .btn {
		width: 100%;
	}
}

/* ==========================================================================
   Trust Bar (Hero)
   ========================================================================== */

.vault-trust-bar-hero {
	background-color: var(--color-mint);
	padding: 3rem var(--spacing-lg);
	border-bottom: 1px solid rgba(42, 157, 143, 0.1);
}

.vault-trust-items-hero {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: var(--spacing-2xl);
}

.vault-trust-item-hero {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--spacing-md);
	color: var(--color-navy);
	font-weight: var(--font-weight-semibold);
	font-size: var(--font-size-sm);
	text-align: center;
}

.vault-check-icon {
	width: 24px;
	height: 24px;
	color: var(--color-teal);
	flex-shrink: 0;
}

@media (max-width: 768px) {
	.vault-trust-items-hero {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--spacing-lg);
	}

	.vault-trust-item-hero {
		flex-direction: column;
	}
}

/* ==========================================================================
   Category Cards Section
   ========================================================================== */

.vault-categories-section {
	padding: 4rem var(--spacing-lg);
	background-color: var(--color-white);
}

.vault-section-title {
	text-align: center;
	font-size: var(--font-size-4xl);
	margin-bottom: 3rem;
	color: var(--color-navy);
}

.vault-categories-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: var(--spacing-2xl);
}

.vault-category-card {
	position: relative;
	overflow: hidden;
	border-radius: var(--radius-xl);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 250px;
	background: linear-gradient(135deg, var(--color-navy) 0%, #0F1823 100%);
	color: var(--color-white);
	text-decoration: none;
	transition: transform var(--transition-base), box-shadow var(--transition-base);
	overflow-wrap: break-word;
}

.vault-category-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(42, 157, 143, 0);
	transition: background-color var(--transition-base);
	z-index: 1;
}

.vault-category-card:hover {
	transform: translateY(-8px);
	box-shadow: var(--shadow-xl);
}

.vault-category-card:hover::before {
	background-color: rgba(42, 157, 143, 0.1);
}

.vault-category-image {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.vault-category-placeholder {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, var(--color-navy) 0%, #0F1823 100%);
}

.vault-category-name {
	position: relative;
	z-index: 2;
	font-size: var(--font-size-xl);
	font-weight: var(--font-weight-bold);
	text-align: center;
	padding: var(--spacing-lg);
}

@media (max-width: 768px) {
	.vault-categories-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--spacing-lg);
	}

	.vault-category-card {
		min-height: 180px;
	}
}

/* ==========================================================================
   Product Grid
   ========================================================================== */

.vault-featured-products {
	padding: 4rem var(--spacing-lg);
	background-color: var(--color-gray-50);
}

.vault-products-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: var(--spacing-2xl);
}

.woocommerce ul.products li.product {
	background-color: var(--color-white);
	border-radius: var(--radius-lg);
	overflow: hidden;
	transition: box-shadow var(--transition-base), transform var(--transition-base);
	border: 1px solid var(--color-gray-200);
}

.woocommerce ul.products li.product:hover {
	box-shadow: var(--shadow-xl);
	transform: translateY(-4px);
}

.woocommerce ul.products li.product img {
	width: 100%;
	height: auto;
	display: block;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-size: var(--font-size-base);
	color: var(--color-navy);
	padding: var(--spacing-md) var(--spacing-md) 0;
	min-height: 2.5em;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.woocommerce ul.products li.product .star-rating {
	margin: var(--spacing-sm) var(--spacing-md) 0;
}

.woocommerce ul.products li.product .woocommerce-loop-product__link {
	display: block;
}

.woocommerce ul.products li.product .price {
	color: var(--color-teal);
	font-weight: var(--font-weight-bold);
	padding: var(--spacing-md);
	font-size: var(--font-size-lg);
}

.woocommerce ul.products li.product .button {
	background-color: var(--color-teal);
	color: var(--color-white);
	border: none;
	padding: var(--spacing-md) var(--spacing-lg);
	border-radius: var(--radius-lg);
	cursor: pointer;
	font-weight: var(--font-weight-semibold);
	margin: var(--spacing-md);
	width: calc(100% - 2 * var(--spacing-md));
	transition: background-color var(--transition-fast);
}

.woocommerce ul.products li.product .button:hover {
	background-color: #238B7D;
}

.woocommerce ul.products li.product .onsale {
	background-color: var(--color-error);
	color: var(--color-white);
	padding: var(--spacing-sm) var(--spacing-md);
	position: absolute;
	top: var(--spacing-lg);
	left: var(--spacing-lg);
	border-radius: var(--radius-lg);
	font-weight: var(--font-weight-bold);
}

@media (max-width: 768px) {
	.vault-products-grid {
		grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
		gap: var(--spacing-lg);
	}
}

/* ==========================================================================
   Why Section
   ========================================================================== */

.vault-why-section {
	padding: 4rem var(--spacing-lg);
	background-color: var(--color-white);
}

.vault-why-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: var(--spacing-2xl);
}

.vault-why-card {
	text-align: center;
	padding: var(--spacing-2xl);
	border-radius: var(--radius-xl);
	background-color: var(--color-gray-50);
	transition: transform var(--transition-base), box-shadow var(--transition-base), background-color var(--transition-base);
	border: 1px solid var(--color-gray-200);
}

.vault-why-card:hover {
	transform: translateY(-8px);
	background-color: var(--color-mint);
	box-shadow: var(--shadow-lg);
}

.vault-why-icon {
	width: 60px;
	height: 60px;
	margin: 0 auto var(--spacing-lg);
	color: var(--color-teal);
	display: flex;
	align-items: center;
	justify-content: center;
}

.vault-why-icon svg {
	width: 100%;
	height: 100%;
	stroke-width: 1.5;
}

.vault-why-card h3 {
	font-size: var(--font-size-xl);
	color: var(--color-navy);
	margin-bottom: var(--spacing-md);
}

.vault-why-card p {
	font-size: var(--font-size-sm);
	color: var(--color-gray-600);
	line-height: var(--line-height-relaxed);
	margin: 0;
}

@media (max-width: 768px) {
	.vault-why-grid {
		grid-template-columns: 1fr;
		gap: var(--spacing-lg);
	}
}

/* ==========================================================================
   Bottom CTA Section
   ========================================================================== */

.vault-bottom-cta {
	background: linear-gradient(135deg, rgba(42,157,143,0.9) 0%, rgba(35,139,125,0.92) 100%),
		url('https://vaultpeptides.com/wp-content/uploads/2026/03/Category-Card-Vault-Peptides-7-Trust-COA-Image-9.png.png') center/cover no-repeat;
	color: var(--color-white);
	padding: 4rem var(--spacing-lg);
	text-align: center;
}

.vault-bottom-cta h2 {
	font-size: var(--font-size-4xl);
	color: var(--color-white);
	margin-bottom: var(--spacing-lg);
}

.vault-bottom-cta p {
	font-size: var(--font-size-lg);
	margin-bottom: var(--spacing-2xl);
	opacity: 0.95;
	max-width: 600px;
	margin-left: auto;
	margin-right: auto;
}

.vault-bottom-cta .btn-primary {
	background-color: var(--color-white);
	color: var(--color-teal);
	border-color: var(--color-white);
}

.vault-bottom-cta .btn-primary:hover {
	background-color: var(--color-mint);
	border-color: var(--color-mint);
}

@media (max-width: 768px) {
	.vault-bottom-cta h2 {
		font-size: var(--font-size-3xl);
	}

	.vault-bottom-cta p {
		font-size: var(--font-size-base);
	}
}

/* ==========================================================================
   Footer Trust Bar
   ========================================================================== */

.vault-trust-bar-footer {
	background-color: var(--color-mint);
	padding: 3rem var(--spacing-lg);
	border-top: 1px solid rgba(42, 157, 143, 0.1);
	border-bottom: 1px solid rgba(42, 157, 143, 0.1);
}

.vault-trust-items {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 2rem;
}

.vault-trust-item {
	display: flex;
	align-items: center;
	gap: var(--spacing-md);
	color: var(--color-navy);
}

.vault-trust-icon {
	width: 32px;
	height: 32px;
	color: var(--color-teal);
	flex-shrink: 0;
}

.vault-trust-item span {
	font-weight: var(--font-weight-semibold);
	font-size: var(--font-size-sm);
}

@media (max-width: 768px) {
	.vault-trust-items {
		grid-template-columns: 1fr;
		gap: var(--spacing-lg);
	}
}

/* ==========================================================================
   Main Footer
   ========================================================================== */

.vault-footer {
	background-color: var(--color-navy);
	color: var(--color-white);
	padding: 4rem var(--spacing-lg) 2rem;
}

.vault-footer-content {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: var(--spacing-4xl);
	margin-bottom: 2rem;
}

.vault-footer-col {
	display: flex;
	flex-direction: column;
}

.vault-footer-logo {
	display: flex;
	gap: 0;
	align-items: baseline;
	font-size: var(--font-size-lg);
	font-weight: var(--font-weight-bold);
	letter-spacing: 1px;
	margin-bottom: var(--spacing-lg);
}

.vault-footer-logo .vault-logo-vault {
	color: var(--color-white);
}

.vault-footer-logo .vault-logo-peptides {
	color: var(--color-teal);
	margin-left: var(--spacing-xs);
}

.vault-footer-tagline {
	font-size: var(--font-size-sm);
	color: rgba(255, 255, 255, 0.8);
	margin-bottom: var(--spacing-lg);
	line-height: var(--line-height-relaxed);
}

.vault-footer-seal {
	font-size: var(--font-size-xs);
	color: var(--color-teal);
	font-weight: var(--font-weight-semibold);
	letter-spacing: 1px;
	text-transform: uppercase;
}

.vault-footer-title {
	font-size: var(--font-size-base);
	font-weight: var(--font-weight-bold);
	margin-bottom: var(--spacing-lg);
	color: var(--color-white);
}

.vault-footer-links {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--spacing-md);
}

.vault-footer-links li {
	margin: 0;
}

.vault-footer-links a {
	color: rgba(255, 255, 255, 0.7);
	font-size: var(--font-size-sm);
	transition: color var(--transition-fast);
}

.vault-footer-links a:hover {
	color: var(--color-teal);
}

/* ==========================================================================
   ROU Disclaimer
   ========================================================================== */

.vault-rou-disclaimer {
	background-color: #0F1823;
	color: var(--color-white);
	padding: 2rem var(--spacing-lg);
	border-top: 1px solid rgba(42, 157, 143, 0.2);
	border-bottom: 1px solid rgba(42, 157, 143, 0.2);
}

.vault-disclaimer-text {
	font-size: var(--font-size-sm);
	line-height: var(--line-height-relaxed);
	opacity: 0.8;
	margin: 0;
	text-align: justify;
}

/* ==========================================================================
   Copyright Bar
   ========================================================================== */

.vault-copyright {
	background-color: var(--color-navy);
	color: rgba(255, 255, 255, 0.6);
	padding: 1.5rem var(--spacing-lg);
	border-top: 1px solid rgba(42, 157, 143, 0.1);
}

.vault-copyright-content {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--spacing-lg);
}

.vault-copyright-text {
	font-size: var(--font-size-sm);
	margin: 0;
}

.vault-badges {
	display: flex;
	gap: var(--spacing-md);
	flex-wrap: wrap;
}

.vault-badge {
	font-size: var(--font-size-xs);
	color: var(--color-teal);
	font-weight: var(--font-weight-semibold);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	border: 1px solid rgba(42, 157, 143, 0.3);
	padding: var(--spacing-xs) var(--spacing-md);
	border-radius: var(--radius-full);
}

@media (max-width: 768px) {
	.vault-copyright-content {
		flex-direction: column;
		text-align: center;
	}

	.vault-badges {
		justify-content: center;
	}
}

/* ==========================================================================
   Page Hero (Shop/Category Pages)
   ========================================================================== */

.vault-page-hero {
	background-color: var(--color-gray-50);
	padding: 3rem var(--spacing-lg);
	border-bottom: 1px solid var(--color-gray-200);
}

.vault-breadcrumbs {
	margin-bottom: var(--spacing-lg);
	font-size: var(--font-size-sm);
	color: var(--color-gray-600);
}

.vault-breadcrumbs a {
	color: var(--color-teal);
	transition: color var(--transition-fast);
}

.vault-breadcrumbs a:hover {
	color: var(--color-navy);
}

.vault-page-title {
	font-size: var(--font-size-4xl);
	color: var(--color-navy);
	margin: 0;
}

/* ==========================================================================
   Shop Layout
   ========================================================================== */

.vault-shop-wrapper {
	padding: 2rem var(--spacing-lg);
	background-color: var(--color-white);
}

.vault-shop-content {
	display: grid;
	grid-template-columns: 250px 1fr;
	gap: 3rem;
}

/* The legacy sidebar contents are already hidden; remove their reserved column. */
.vault-shop-content { grid-template-columns: minmax(0, 1fr); }
.vault-shop-sidebar { display: none; }
.vault-shop-main { min-width: 0; }
.woocommerce ul.products::before, .woocommerce ul.products::after { display: none !important; }
.vault-shop-main > #primary > main > .vp-research-badge { display: none; }


.vault-shop-sidebar {
	background-color: var(--color-gray-50);
	padding: var(--spacing-2xl);
	border-radius: var(--radius-lg);
	height: fit-content;
}

.vault-shop-sidebar h3 {
	font-size: var(--font-size-lg);
	color: var(--color-navy);
	margin-bottom: var(--spacing-lg);
	margin-top: 0;
}

.vault-shop-sidebar ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.vault-shop-sidebar li {
	margin-bottom: var(--spacing-md);
}

.vault-shop-sidebar a {
	color: var(--color-gray-700);
	font-size: var(--font-size-sm);
	transition: color var(--transition-fast);
}

.vault-shop-sidebar a:hover {
	color: var(--color-teal);
}

@media (max-width: 1024px) {
	.vault-shop-content {
		grid-template-columns: 1fr;
		gap: 2rem;
	}

	.vault-shop-sidebar {
		order: -1;
	}
}

@media (max-width: 768px) {
	.vault-shop-sidebar {
		padding: var(--spacing-lg);
	}
}

/* ==========================================================================
   WooCommerce Overrides
   ========================================================================== */

.woocommerce-result-count,
.woocommerce-ordering {
	margin-bottom: var(--spacing-2xl);
	font-size: var(--font-size-sm);
	color: var(--color-gray-600);
}

.woocommerce-ordering select {
	padding: var(--spacing-sm) var(--spacing-md);
	border: 1px solid var(--color-gray-300);
	border-radius: var(--radius-md);
	font-size: var(--font-size-sm);
	color: var(--color-gray-700);
}

.woocommerce ul.products {
	list-style: none;
	padding: 0;
	margin: 0 0 2rem 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: var(--spacing-2xl);
}

.woocommerce-pagination {
	text-align: center;
	margin-top: var(--spacing-4xl);
}

.woocommerce-pagination a,
.woocommerce-pagination span {
	display: inline-block;
	padding: var(--spacing-sm) var(--spacing-md);
	margin: 0 var(--spacing-xs);
	border: 1px solid var(--color-gray-300);
	border-radius: var(--radius-md);
	transition: all var(--transition-fast);
}

.woocommerce-pagination a:hover {
	background-color: var(--color-teal);
	color: var(--color-white);
	border-color: var(--color-teal);
}

.woocommerce-pagination span.current {
	background-color: var(--color-teal);
	color: var(--color-white);
	border-color: var(--color-teal);
}

/* Single Product */
.woocommerce div.product {
	padding: 2rem 0;
}

/* The product grid owns the columns; each direct child fills its cell. */
.woocommerce div.product > .images,
.woocommerce div.product > .summary {
	display: block;
	width: 100%;
	min-width: 0;
}

.woocommerce div.product > .images {
	margin-right: 0;
}

.woocommerce div.product .woocommerce-product-rating {
	margin-bottom: var(--spacing-lg);
}

.woocommerce div.product .price {
	font-size: var(--font-size-2xl);
	color: var(--color-teal);
	font-weight: var(--font-weight-bold);
	margin-bottom: var(--spacing-lg);
}

.woocommerce div.product .woocommerce-product-details__short-description {
	font-size: var(--font-size-base);
	line-height: var(--line-height-relaxed);
	margin-bottom: var(--spacing-lg);
}

.woocommerce div.product .single_add_to_cart_button {
	background-color: var(--color-teal);
	color: var(--color-white);
	border: none;
	padding: var(--spacing-lg) var(--spacing-4xl);
	font-size: var(--font-size-base);
	font-weight: var(--font-weight-bold);
	border-radius: var(--radius-lg);
	cursor: pointer;
	transition: background-color var(--transition-fast);
	width: 100%;
}

.woocommerce div.product .single_add_to_cart_button:hover {
	background-color: #238B7D;
}

.woocommerce div.product .product-meta {
	margin-top: var(--spacing-2xl);
	padding-top: var(--spacing-2xl);
	border-top: 1px solid var(--color-gray-200);
}

.woocommerce div.product .product-meta .product_meta_label {
	font-weight: var(--font-weight-semibold);
	display: inline-block;
	width: 150px;
}

/* Cart */
.woocommerce-cart table.shop_table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: var(--spacing-2xl);
}

.woocommerce-cart table.shop_table th,
.woocommerce-cart table.shop_table td {
	padding: var(--spacing-md);
	border-bottom: 1px solid var(--color-gray-200);
	text-align: left;
}

.woocommerce-cart table.shop_table th {
	background-color: var(--color-gray-50);
	font-weight: var(--font-weight-bold);
	color: var(--color-navy);
}

.woocommerce-cart .cart-totals {
	width: 100%;
	max-width: 400px;
	margin-left: auto;
	margin-bottom: var(--spacing-2xl);
	background-color: var(--color-gray-50);
	padding: var(--spacing-2xl);
	border-radius: var(--radius-lg);
}

.woocommerce-cart .cart-totals table {
	width: 100%;
	margin-bottom: var(--spacing-lg);
}

.woocommerce-cart .cart-totals .cart_totals_label,
.woocommerce-cart .cart-totals .order-total {
	font-weight: var(--font-weight-bold);
	color: var(--color-navy);
}

.woocommerce .checkout .button.alt {
	background-color: var(--color-teal);
	color: var(--color-white);
	border: none;
	padding: var(--spacing-lg) var(--spacing-4xl);
	font-size: var(--font-size-base);
	font-weight: var(--font-weight-bold);
	border-radius: var(--radius-lg);
	width: 100%;
	cursor: pointer;
}

.woocommerce .checkout .button.alt:hover {
	background-color: #238B7D;
}

/* ==========================================================================
   Age Gate Modal
   ========================================================================== */

.vault-age-gate {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.7);
	backdrop-filter: blur(4px);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 9999;
}

.vault-age-gate.hidden {
	display: none;
}

.vault-age-gate-box {
	background-color: var(--color-white);
	border-radius: var(--radius-2xl);
	padding: 3rem;
	max-width: 500px;
	text-align: center;
	box-shadow: var(--shadow-2xl);
}

.vault-age-gate-box h2 {
	font-size: var(--font-size-3xl);
	color: var(--color-navy);
	margin-bottom: var(--spacing-lg);
}

.vault-age-gate-box p {
	font-size: var(--font-size-base);
	color: var(--color-gray-600);
	margin-bottom: var(--spacing-2xl);
	line-height: var(--line-height-relaxed);
}

.vault-age-gate-buttons {
	display: flex;
	gap: var(--spacing-lg);
	justify-content: center;
}

.vault-age-gate-buttons button {
	flex: 1;
	padding: var(--spacing-lg) var(--spacing-2xl);
	border: none;
	border-radius: var(--radius-lg);
	font-size: var(--font-size-base);
	font-weight: var(--font-weight-semibold);
	cursor: pointer;
	transition: all var(--transition-fast);
}

.vault-age-gate-buttons .confirm {
	background-color: var(--color-teal);
	color: var(--color-white);
}

.vault-age-gate-buttons .confirm:hover {
	background-color: #238B7D;
}

.vault-age-gate-buttons .decline {
	background-color: var(--color-gray-200);
	color: var(--color-navy);
}

.vault-age-gate-buttons .decline:hover {
	background-color: var(--color-gray-300);
}

/* ==========================================================================
   ROU Sticky Banner
   ========================================================================== */

.vault-rou-banner {
	position: fixed;
	top: 60px;
	left: 0;
	right: 0;
	background-color: var(--color-teal);
	color: var(--color-white);
	padding: var(--spacing-md) var(--spacing-lg);
	text-align: center;
	z-index: 98;
	display: none;
	animation: slideDown 0.3s ease-out;
}

.vault-rou-banner.active {
	display: block;
}

@keyframes slideDown {
	from {
		transform: translateY(-100%);
	}
	to {
		transform: translateY(0);
	}
}

.vault-rou-banner-content {
	max-width: var(--container-max-width);
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--spacing-lg);
}

.vault-rou-banner-text {
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-semibold);
}

.vault-rou-banner-close {
	background: none;
	border: none;
	color: var(--color-white);
	cursor: pointer;
	font-size: var(--font-size-lg);
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: opacity var(--transition-fast);
}

.vault-rou-banner-close:hover {
	opacity: 0.7;
}

/* ==========================================================================
   Responsive Design - Breakpoints
   ========================================================================== */

@media (max-width: 1024px) {
	:root {
		--font-size-5xl: 2.5rem;
		--font-size-4xl: 2rem;
		--font-size-3xl: 1.5rem;
	}

	.vault-container {
		--container-padding: 1.5rem;
	}
}

@media (max-width: 768px) {
	:root {
		--font-size-5xl: 2rem;
		--font-size-4xl: 1.5rem;
		--font-size-3xl: 1.25rem;
		--spacing-4xl: 3rem;
		--container-padding: 1rem;
	}

	h1 { font-size: var(--font-size-4xl); }
	h2 { font-size: var(--font-size-3xl); }
	h3 { font-size: var(--font-size-2xl); }

	.vault-main {
		min-height: auto;
	}
}

@media (max-width: 480px) {
	:root {
		--font-size-5xl: 1.75rem;
		--font-size-4xl: 1.375rem;
		--font-size-3xl: 1.125rem;
		--font-size-2xl: 1.125rem;
		--spacing-4xl: 2rem;
		--spacing-3xl: 2rem;
		--container-padding: 1rem;
	}

	h1 { font-size: var(--font-size-3xl); }
	h2 { font-size: var(--font-size-2xl); }

	.btn {
		padding: var(--spacing-md) var(--spacing-lg);
	}

	.vault-hero-ctas {
		flex-direction: column;
	}

	.vault-hero-ctas .btn {
		width: 100%;
	}

	.vault-footer-content {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   Utility Classes
   ========================================================================== */

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

.text-right {
	text-align: right;
}

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

.mt-0 { margin-top: 0; }
.mt-1 { margin-top: var(--spacing-sm); }
.mt-2 { margin-top: var(--spacing-md); }
.mt-3 { margin-top: var(--spacing-lg); }
.mt-4 { margin-top: var(--spacing-xl); }

.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: var(--spacing-sm); }
.mb-2 { margin-bottom: var(--spacing-md); }
.mb-3 { margin-bottom: var(--spacing-lg); }
.mb-4 { margin-bottom: var(--spacing-xl); }

.pt-0 { padding-top: 0; }
.pt-1 { padding-top: var(--spacing-sm); }
.pt-2 { padding-top: var(--spacing-md); }
.pt-3 { padding-top: var(--spacing-lg); }

.pb-0 { padding-bottom: 0; }
.pb-1 { padding-bottom: var(--spacing-sm); }
.pb-2 { padding-bottom: var(--spacing-md); }
.pb-3 { padding-bottom: var(--spacing-lg); }

.hidden {
	display: none !important;
}

.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border-width: 0;
}


/* ================================================================
   SINGLE PRODUCT PAGE
   ================================================================ */

/* Product page container - 2 column layout */
.single-product div.product {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 3rem;
	max-width: 1200px;
	margin: 0 auto;
	padding: 2rem var(--spacing-lg);
	align-items: start;
}

/* Product image gallery - left column */
.single-product div.product div.images,
.single-product div.product .woocommerce-product-gallery {
	grid-column: 1;
	grid-row: 1;
	position: sticky;
	top: 100px;
}

.single-product div.product div.images img,
.single-product div.product .woocommerce-product-gallery img {
	width: 100%;
	height: auto;
	border-radius: var(--radius-lg);
	box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

/* Product summary - right column */
.single-product div.product .summary,
.single-product div.product .entry-summary {
	grid-column: 2;
	grid-row: 1;
}

.single-product div.product .product_title,
.single-product div.product h1 {
	font-size: 2rem;
	font-weight: var(--font-weight-bold);
	color: var(--color-navy);
	margin-bottom: 0.75rem;
	line-height: 1.2;
}

/* Price styling */
.single-product div.product .price,
.single-product div.product p.price {
	font-size: 1.75rem;
	font-weight: var(--font-weight-bold);
	color: var(--color-teal);
	margin-bottom: 1.5rem;
}

.single-product div.product .price del {
	color: var(--color-gray-400);
	font-size: 1.25rem;
	font-weight: normal;
}

.single-product div.product .price ins {
	text-decoration: none;
}

/* Short description */
.single-product div.product .woocommerce-product-details__short-description {
	font-size: 1rem;
	line-height: 1.7;
	color: var(--color-gray-600);
	margin-bottom: 1.5rem;
	padding-bottom: 1.5rem;
	border-bottom: 1px solid var(--color-gray-200);
}

/* Quick Facts box */
.single-product .vault-quick-facts {
	background: var(--color-mint);
	border-left: 4px solid var(--color-teal);
	border-radius: var(--radius-md);
	padding: 1.25rem 1.5rem;
	margin-bottom: 1.5rem;
}

/* Add to cart section */
.single-product div.product form.cart {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-bottom: 1.5rem;
	padding: 1.5rem 0;
	border-top: 1px solid var(--color-gray-200);
	border-bottom: 1px solid var(--color-gray-200);
}

.single-product div.product form.cart .quantity {
	width: 80px;
}

.single-product div.product form.cart .quantity input {
	width: 100%;
	padding: 0.75rem;
	border: 2px solid var(--color-gray-200);
	border-radius: var(--radius-md);
	text-align: center;
	font-size: 1rem;
	font-weight: 600;
}

.single-product div.product form.cart button.single_add_to_cart_button,
.single-product div.product form.cart .button {
	flex: 1;
	background: var(--color-teal) !important;
	color: white !important;
	border: none;
	padding: 1rem 2rem;
	font-size: 1.1rem;
	font-weight: var(--font-weight-semibold);
	border-radius: var(--radius-md);
	cursor: pointer;
	transition: all 0.2s ease;
	text-transform: none;
	letter-spacing: 0;
}

.single-product div.product form.cart button.single_add_to_cart_button:hover,
.single-product div.product form.cart .button:hover {
	background: #238B7D !important;
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(42,157,143,0.3);
}

/* SKU and meta */
.single-product div.product .product_meta {
	font-size: 0.875rem;
	color: var(--color-gray-500);
	margin-top: 1.5rem;
	padding-top: 1rem;
	border-top: 1px solid var(--color-gray-200);
	line-height: 2;
}

.single-product div.product .product_meta .sku_wrapper,
.single-product div.product .product_meta .posted_in,
.single-product div.product .product_meta .tagged_as {
	display: block;
}

.single-product div.product .product_meta a {
	color: var(--color-teal);
	text-decoration: none;
}

.single-product div.product .product_meta a:hover {
	text-decoration: underline;
}

/* Product tabs - full width below grid */
.single-product div.product .woocommerce-tabs {
	grid-column: 1 / -1;
	margin-top: 2rem;
}

.single-product div.product .woocommerce-tabs ul.tabs {
	list-style: none;
	display: flex;
	gap: 0;
	border-bottom: 2px solid var(--color-gray-200);
	margin: 0;
	padding: 0;
}

.single-product div.product .woocommerce-tabs ul.tabs li {
	margin: 0;
	padding: 0;
	background: none;
	border: none;
}

.single-product div.product .woocommerce-tabs ul.tabs li a {
	display: block;
	padding: 0.75rem 1.5rem;
	font-size: 0.95rem;
	font-weight: var(--font-weight-semibold);
	color: var(--color-gray-500);
	text-decoration: none;
	border-bottom: 3px solid transparent;
	margin-bottom: -2px;
	transition: all 0.2s ease;
}

.single-product div.product .woocommerce-tabs ul.tabs li.active a,
.single-product div.product .woocommerce-tabs ul.tabs li a:hover {
	color: var(--color-navy);
	border-bottom-color: var(--color-teal);
}

.single-product div.product .woocommerce-tabs .woocommerce-Tabs-panel {
	padding: 2rem 0;
	line-height: 1.7;
	color: var(--color-gray-700);
}

.single-product div.product .woocommerce-tabs .woocommerce-Tabs-panel h2 {
	font-size: 1.5rem;
	color: var(--color-navy);
	margin-bottom: 1rem;
}

/* Related products - full width grid (no ul wrapper) */
.single-product div.product section.related.products {
	grid-column: 1 / -1;
	margin-top: 2rem;
	padding-top: 2rem;
	border-top: 1px solid var(--color-gray-200);
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.5rem;
	list-style: none;
}

.single-product div.product section.related.products > h2 {
	grid-column: 1 / -1;
	font-size: 1.5rem;
	color: var(--color-navy);
	margin-bottom: 0.5rem;
}

.single-product div.product section.related.products > .vp-research-badge {
	grid-column: 1 / -1;
	display: none;
}

.single-product div.product section.related.products > li.product {
	background: white;
	border: 1px solid var(--color-gray-200);
	border-radius: var(--radius-lg);
	overflow: hidden;
	transition: all 0.2s ease;
	padding: 0;
	margin: 0;
	width: 100% !important;
	float: none !important;
	list-style: none;
}

.single-product div.product section.related.products > li.product:hover {
	box-shadow: 0 4px 12px rgba(0,0,0,0.1);
	transform: translateY(-2px);
}

.single-product div.product section.related.products > li.product a img {
	width: 100%;
	height: 200px;
	object-fit: contain;
	background: var(--color-gray-50);
	padding: 1rem;
}

.single-product div.product section.related.products > li.product a {
	text-decoration: none;
}

.single-product div.product section.related.products > li.product .woocommerce-loop-product__title,
.single-product div.product section.related.products > li.product h2 {
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--color-navy);
	padding: 0.75rem 1rem 0.25rem;
	margin: 0;
	line-height: 1.3;
}

.single-product div.product section.related.products > li.product .price {
	color: var(--color-teal);
	font-weight: 700;
	font-size: 1.1rem;
	padding: 0 1rem;
	display: block;
}

.single-product div.product section.related.products > li.product .button,
.single-product div.product section.related.products > li.product .add_to_cart_button {
	display: block;
	width: calc(100% - 2rem);
	margin: 0.75rem 1rem;
	padding: 0.6rem;
	background: var(--color-teal);
	color: white;
	border: none;
	border-radius: var(--radius-md);
	text-align: center;
	font-weight: 600;
	font-size: 0.85rem;
	cursor: pointer;
	transition: background 0.2s;
}

.single-product div.product section.related.products > li.product .button:hover {
	background: #238b7d;
}
/* Breadcrumb styling */
.woocommerce-breadcrumb {
	max-width: 1200px;
	margin: 0 auto;
	padding: 1rem var(--spacing-lg);
	font-size: 0.85rem;
	color: var(--color-gray-500);
}

.woocommerce-breadcrumb a {
	color: var(--color-teal);
	text-decoration: none;
}

.woocommerce-breadcrumb a:hover {
	text-decoration: underline;
}

/* Responsive product page */
@media (max-width: 768px) {
	.single-product div.product {
		grid-template-columns: 1fr;
		gap: 1.5rem;
		padding: 1rem;
	}

	.single-product div.product div.images,
	.single-product div.product .woocommerce-product-gallery {
		position: relative;
		top: 0;
	}

	.single-product div.product .summary,
	.single-product div.product .entry-summary {
		grid-column: 1;
		grid-row: auto;
	}

	.single-product div.product .woocommerce-tabs,
	.single-product div.product .related,
	.single-product div.product section.related {
		grid-column: 1;
	}

	.single-product div.product .related ul.products {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}

/* ================================================================
   SHOP / ARCHIVE PAGE PRODUCT GRID
   ================================================================ */

.woocommerce ul.products {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.5rem;
	list-style: none;
	padding: 0;
	margin: 0;
}

.woocommerce ul.products li.product {
	background: white;
	border: 1px solid var(--color-gray-200);
	border-radius: var(--radius-lg);
	overflow: hidden;
	transition: all 0.2s ease;
	padding: 0 !important;
	margin: 0 !important;
	width: 100% !important;
	float: none !important;
}

.woocommerce ul.products li.product:hover {
	box-shadow: 0 8px 24px rgba(0,0,0,0.1);
	transform: translateY(-2px);
}

.woocommerce ul.products li.product a img {
	width: 100%;
	height: 220px;
	object-fit: cover;
	border-radius: 0;
}

.woocommerce ul.products li.product a {
	text-decoration: none;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2 {
	font-size: 0.95rem !important;
	color: var(--color-navy);
	padding: 0.75rem 1rem 0.25rem;
	margin: 0;
	font-weight: 600;
	line-height: 1.3;
}

.woocommerce ul.products li.product .price {
	font-size: 1.1rem !important;
	color: var(--color-teal) !important;
	padding: 0 1rem;
	margin: 0.25rem 0;
	font-weight: 700;
}

.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product a.add_to_cart_button,
.woocommerce ul.products li.product a.product_type_simple {
	display: block;
	width: calc(100% - 2rem);
	margin: 0.75rem 1rem !important;
	padding: 0.65rem !important;
	background: var(--color-teal) !important;
	color: white !important;
	border: none !important;
	border-radius: var(--radius-md) !important;
	font-size: 0.85rem;
	font-weight: 600;
	text-align: center;
	cursor: pointer;
	transition: background 0.2s ease;
	text-decoration: none;
}

.woocommerce ul.products li.product .button:hover,
.woocommerce ul.products li.product a.add_to_cart_button:hover {
	background: #238B7D !important;
}

/* Shop page header */
.woocommerce-products-header {
	max-width: 1200px;
	margin: 0 auto;
	padding: 2rem var(--spacing-lg) 0;
}

.woocommerce-products-header__title {
	font-size: 2rem;
	color: var(--color-navy);
}

/* Results count and ordering */
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering {
	margin-bottom: 1rem;
}

.woocommerce .woocommerce-ordering select {
	padding: 0.5rem 1rem;
	border: 1px solid var(--color-gray-300);
	border-radius: var(--radius-md);
	font-size: 0.875rem;
}

/* Pagination */
.woocommerce nav.woocommerce-pagination {
	grid-column: 1 / -1;
	text-align: center;
	margin-top: 2rem;
}

.woocommerce nav.woocommerce-pagination ul {
	display: inline-flex;
	gap: 0.5rem;
	list-style: none;
	padding: 0;
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: var(--radius-md);
	font-size: 0.875rem;
	font-weight: 600;
	text-decoration: none;
	border: 1px solid var(--color-gray-300);
	color: var(--color-navy);
	transition: all 0.2s;
}

.woocommerce nav.woocommerce-pagination ul li span.current,
.woocommerce nav.woocommerce-pagination ul li a:hover {
	background: var(--color-teal);
	color: white;
	border-color: var(--color-teal);
}

@media (max-width: 768px) {
	.woocommerce ul.products {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 1rem;
	}
}

@media (max-width: 480px) {
	.woocommerce ul.products {
		grid-template-columns: 1fr !important;
	}
}
/* Hide sidebar on all WooCommerce pages */
#sidebar,
.sidebar,
.widget-area {
	display: none !important;
}

/* =========================================================
   VPR — "The Vault" redesign (2026-07)
   APPEND this whole block to the END of assets/css/main.css
   All selectors are vpr- prefixed or scoped to body.home,
   so nothing outside the new sections is affected.
   ============================================================ */

:root {
  --vpr-navy: #111f38;
  --vpr-navy-2: #16263f;
  --vpr-panel: #1b2c49;
  --vpr-teal: #2A9D8F;
  --vpr-teal-ink: #8fd8ce;
  --vpr-mint: #F0F7F6;
  --vpr-ink: #eaf1f4;
  --vpr-muted: #9fb2c6;
  --vpr-faint: #6f849c;
  --vpr-amber: #E1A34B;
  --vpr-line: rgba(143, 216, 206, 0.16);
  --vpr-line-2: rgba(255, 255, 255, 0.08);
  --vpr-mono: 'SFMono-Regular', ui-monospace, Menlo, Consolas, monospace;
}

/* ---------- shared primitives ---------- */
.vpr-eyebrow {
  display: block;
  font-family: var(--vpr-mono);
  font-size: 11.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--vpr-teal-ink);
  margin-bottom: 14px;
}
.vpr-h2 {
  font-size: clamp(30px, 4.4vw, 52px);
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--vpr-ink);
  margin: 0 0 10px;
}
.vpr-em { font-style: normal; color: var(--vpr-teal-ink); }
.vpr-sec-head { margin-bottom: 42px; }
.vpr-lead { color: var(--vpr-muted); font-size: 17px; max-width: 46ch; margin: 14px 0 24px; }

.vpr-btn-frame {
  display: inline-block;
  font-family: var(--vpr-mono);
  font-size: 13.5px;
  letter-spacing: 0.04em;
  color: var(--vpr-ink);
  border: 1.5px solid var(--vpr-teal);
  padding: 15px 26px;
  border-radius: 11px;
  position: relative;
  overflow: hidden;
  text-decoration: none;
  transition: color 0.25s;
}
.vpr-btn-frame span { position: relative; z-index: 1; }
.vpr-btn-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--vpr-teal);
  transform: translateY(101%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.vpr-btn-frame:hover { color: #04201c; text-decoration: none; }
.vpr-btn-frame:hover::after { transform: translateY(0); }

.vpr-btn-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--vpr-mono);
  font-size: 13.5px;
  letter-spacing: 0.04em;
  color: var(--vpr-teal-ink);
  text-decoration: none;
}
.vpr-btn-link:hover { color: var(--vpr-teal-ink); text-decoration: none; }
.vpr-u { position: relative; padding-bottom: 3px; }
.vpr-u::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1.5px;
  width: 100%;
  background: var(--vpr-teal-ink);
  transform-origin: left;
  transform: scaleX(0.34);
  transition: transform 0.3s;
}
.vpr-btn-link:hover .vpr-u::after { transform: scaleX(1); }
.vpr-arw { transition: transform 0.3s; }
.vpr-btn-link:hover .vpr-arw { transform: translateX(5px); }

.vpr-chips { display: flex; gap: 7px; flex-wrap: wrap; }
.vpr-chip {
  font-family: var(--vpr-mono);
  font-size: 10.5px;
  color: var(--vpr-teal-ink);
  border: 1px solid var(--vpr-line);
  border-radius: 20px;
  padding: 4px 9px;
  white-space: nowrap;
}
.vpr-chip-on { background: var(--vpr-teal); color: #04201c; border-color: var(--vpr-teal); }

/* ---------- HERO ---------- */
.vpr-hero {
  position: relative;
  min-height: clamp(460px, 72vh, 640px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--vpr-navy);
}
.vpr-hero-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.vpr-hero-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(10, 18, 33, 0.9) 0%, rgba(10, 18, 33, 0.5) 34%, transparent 62%),
    linear-gradient(0deg, rgba(10, 18, 33, 0.92) 2%, transparent 46%);
}
.vpr-hero-content {
  position: relative;
  z-index: 2;
  padding-top: 56px;
  padding-bottom: clamp(40px, 7vh, 84px);
}
.vpr-hero-headline {
  font-size: clamp(32px, 5.2vw, 68px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: #fff;
  margin: 0 0 18px;
  max-width: 22ch;
}
.vpr-hero-sub { font-size: clamp(15px, 1.5vw, 19px); color: var(--vpr-muted); max-width: 44ch; margin: 0 0 26px; }
.vpr-hero-ctas { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }

/* Homepage hero: clear catalog action and qualified report availability. */
.vpr-hero-headline span { display: block; }
.vpr-hero-ctas .vpr-btn-link { min-height: 44px; display: inline-flex; align-items: center; }
@media (max-width: 600px) {
  .vpr-hero-ctas { row-gap: 12px; }
  .vpr-hero-scrim { background: linear-gradient(180deg, rgba(10,18,33,.3), rgba(10,18,33,.8) 50%, rgba(10,18,33,.95)); }
}
.vpr-hero .vpr-hero-shop {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; max-width: 100%; text-align: center;
  color: #0a1221; background: #8fd8ce; border-color: #8fd8ce; font-weight: 600;
}
.vpr-hero .vpr-hero-shop::after { content: none; }
.vpr-hero .vpr-hero-shop:hover { color: #0a1221; background: #b2e5de; border-color: #b2e5de; }
.vpr-hero-ctas a:focus-visible { outline: 3px solid #fff; outline-offset: 5px; }
.vpr-hero-coverage { color: #9fb2c6; font-size: 14px; line-height: 1.5; max-width: 48ch; margin: 18px 0 0; }


/* ---------- CERTIFICATES ---------- */
.vpr-verify {
  position: relative;
  background: linear-gradient(180deg, var(--vpr-navy) 0%, #1B2A4A 100%);
  padding: clamp(70px, 10vh, 120px) 0;
  overflow: hidden;
}
.vpr-ghost {
  position: absolute;
  right: -2%;
  top: 6%;
  font-weight: 800;
  font-size: min(38vw, 480px);
  line-height: 0.8;
  color: var(--vpr-teal);
  opacity: 0.09;
  letter-spacing: -0.05em;
  pointer-events: none;
}
.vpr-ghost span { font-size: 0.5em; }
.vpr-verify .vault-container { position: relative; z-index: 2; }
.vpr-verify-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 52px;
  align-items: center;
}
.vpr-verify-visual img {
  border-radius: 14px;
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.7);
}
.vpr-stats { display: flex; gap: 34px; margin: 26px 0 30px; flex-wrap: wrap; }
.vpr-stat b { display: block; font-family: var(--vpr-mono); font-size: 28px; font-weight: 500; color: var(--vpr-ink); }
.vpr-stat span { font-size: 13px; color: var(--vpr-faint); }

/* ---------- CATEGORIES ---------- */
.vpr-cats { background: var(--vpr-navy); padding: clamp(70px, 10vh, 120px) 0; }
.vpr-cat-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1px;
  background: var(--vpr-line-2);
  border: 1px solid var(--vpr-line-2);
  border-radius: 14px;
  overflow: hidden;
}
.vpr-cat {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--vpr-panel);
  aspect-ratio: 16 / 11;
  display: block;
  text-decoration: none;
  grid-column: span 2;
}
/* 5 tiles: 3 on the first row, 2 wider on the second */
.vpr-cat:nth-child(4), .vpr-cat:nth-child(5) { grid-column: span 2; }
.vpr-cat img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
  transition: transform 0.7s cubic-bezier(0.2, 0.6, 0.2, 1);
}
.vpr-cat:hover img { transform: scale(1.06); }
.vpr-cat::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(17, 31, 56, 0.1) 30%, rgba(13, 22, 40, 0.86) 100%);
  z-index: -1;
}
.vpr-cat-lbl {
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 18px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 10px;
}
.vpr-cat-name { font-size: 21px; font-weight: 800; letter-spacing: -0.01em; color: #fff; }
.vpr-cat-count { font-family: var(--vpr-mono); font-size: 11.5px; color: var(--vpr-teal-ink); }
.vpr-cat-arw {
  position: absolute;
  top: 16px;
  right: 18px;
  color: var(--vpr-teal-ink);
  opacity: 0;
  transform: translate(-6px, 6px);
  transition: 0.3s;
  font-size: 18px;
}
.vpr-cat:hover .vpr-cat-arw { opacity: 1; transform: none; }
.vpr-cat:hover { text-decoration: none; }

/* ---------- BESTSELLERS ---------- */
.vpr-best { background: var(--vpr-navy-2); padding: clamp(70px, 10vh, 120px) 0; }
.vpr-best-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.vpr-best-card {
  position: relative;
  display: flex;
  gap: 20px;
  align-items: center;
  background: var(--vpr-panel);
  border: 1px solid var(--vpr-line-2);
  border-radius: 14px;
  padding: 22px;
  text-decoration: none;
  transition: border-color 0.3s, transform 0.3s;
}
.vpr-best-card:hover { border-color: var(--vpr-teal); transform: translateY(-4px); text-decoration: none; }
.vpr-best-thumb {
  width: 96px;
  flex: none;
  border-radius: 10px;
  overflow: hidden;
  background: #f3f6f7;
}
.vpr-best-thumb img { width: 100%; height: auto; }
.vpr-best-body { flex: 1; min-width: 0; }
.vpr-best-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 12px; }
.vpr-best-name { font-size: 19px; font-weight: 700; color: var(--vpr-ink); }
.vpr-best-price { font-family: var(--vpr-mono); font-size: 17px; color: var(--vpr-ink); white-space: nowrap; }
.vpr-best-price .woocommerce-Price-amount { color: var(--vpr-ink); }
.vpr-tag {
  position: absolute;
  top: 0;
  right: 22px;
  transform: translateY(-50%);
  background: var(--vpr-teal);
  color: #04201c;
  font-family: var(--vpr-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 11px;
  border-radius: 20px;
}

/* ---------- LOGISTICS ---------- */
.vpr-logi { background: var(--vpr-navy); padding: clamp(60px, 9vh, 100px) 0; }
.vpr-logi-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  padding: 28px 0;
  border-bottom: 1px solid var(--vpr-line);
}
.vpr-logi-row:first-child { border-top: 1px solid var(--vpr-line); }
.vpr-logi-big {
  font-size: clamp(24px, 3.4vw, 42px);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--vpr-mint);
}
.vpr-logi-note { font-family: var(--vpr-mono); font-size: 12.5px; color: var(--vpr-muted); white-space: nowrap; }

/* ---------- FAQ ---------- */
.vpr-faq { background: var(--vpr-navy-2); padding: clamp(70px, 10vh, 120px) 0; }
.vpr-faq-wrap { max-width: 920px; }
.vpr-faq-item { border-bottom: 1px solid var(--vpr-line); }
.vpr-faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 24px 4px;
  font-size: clamp(17px, 2vw, 22px);
  font-weight: 700;
  color: var(--vpr-ink);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}
.vpr-faq-item summary::-webkit-details-marker { display: none; }
.vpr-faq-item summary::after { content: "\2228"; color: var(--vpr-teal-ink); transition: transform 0.3s; flex: none; }
.vpr-faq-item[open] summary::after { transform: rotate(180deg); }
.vpr-faq-item p { color: var(--vpr-muted); font-size: 16px; max-width: 70ch; padding: 0 4px 24px; margin: 0; }

/* ---------- HOME-PAGE CHROME ----------
   The live header is a white sticky bar in normal flow (Phase 1 keeps it).
   Phase 2 restyles the header dark to sit over the hero; until then the
   hero simply begins below the header. Reset any main padding on home so
   the hero meets the header flush, and defend the shared .vault-container
   against unknown Customizer background rules inside the dark sections. */
body.home .vault-main { padding: 0; }
body.home .vpr-hero { margin-top: 0; }
.vpr-hero .vault-container,
.vpr-verify .vault-container,
.vpr-cats .vault-container,
.vpr-best .vault-container,
.vpr-logi .vault-container,
.vpr-faq .vault-container { background: transparent; }

/* ---------- PRODUCT PAGE: tier ladder ---------- */
.vpr-ladder { display: flex; flex-direction: column; gap: 10px; margin: 18px 0 6px; }
.vpr-tier {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  background: #fff;
  border: 1.5px solid var(--vp-medium-gray, #E8E8E8);
  border-radius: 11px;
  padding: 13px 16px;
  cursor: pointer;
  color: var(--vp-navy, #1B2A4A);
  transition: border-color 0.2s, background 0.2s;
}
.vpr-tier:hover { border-color: var(--vpr-teal); background: #fff; }
.vpr-tier-sel { border-color: var(--vpr-teal); background: rgba(42, 157, 143, 0.08); }
.vpr-tier-sel:hover { background: rgba(42, 157, 143, 0.08); }
.vpr-tier-l { font-weight: 700; font-size: 15px; }
.vpr-tier-r { font-family: var(--vpr-mono); font-size: 13.5px; color: var(--vp-dark-gray, #666); }
.vpr-tier-save { font-style: normal; color: var(--vpr-teal); font-weight: 600; }
.vpr-ladder-note { font-size: 12.5px; color: var(--vp-dark-gray, #666); margin: 4px 0 0; }
.vpr-chips-loop { margin-top: 6px; }
.vpr-chips-loop .vpr-chip { border-color: rgba(42, 157, 143, 0.35); color: var(--vpr-teal); }
.vpr-chips-loop .vpr-chip-on { color: #fff; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 900px) {
  .vpr-verify-grid { grid-template-columns: 1fr; gap: 36px; }
  .vpr-cat-grid { grid-template-columns: 1fr 1fr; }
  .vpr-cat, .vpr-cat:nth-child(4), .vpr-cat:nth-child(5) { grid-column: span 1; }
  .vpr-best-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .vpr-cat-grid { grid-template-columns: 1fr; }
  .vpr-logi-row { flex-direction: column; align-items: flex-start; gap: 6px; }
  .vpr-best-top { flex-wrap: wrap; }
  .vpr-best-thumb { width: 72px; }
  .vpr-best-card { padding: 16px; gap: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .vpr-btn-frame::after, .vpr-cat img, .vpr-best-card, .vpr-arw, .vpr-u::after { transition: none !important; }
}

/* ============ VPR 2026-07-16: fidelity pass (stat strip, CoA lookup, mega footer, dark overlay header, guest price gate) ============ */

/* Guest price gate on homepage bestsellers (2026-07-16) */
.vpr-best-price-gate { font-family: var(--vpr-mono); font-size: 12px; letter-spacing: 0.05em; color: var(--vpr-teal-ink); white-space: nowrap; }

/* ---------- HERO STAT STRIP (vpr-statstrip, 2026-07) ---------- */
.vpr-statstrip {
  position: relative;
  z-index: 2;
  background: var(--vpr-navy-2);
  border-top: 1px solid var(--vpr-line-2);
  border-bottom: 1px solid var(--vpr-line-2);
  padding: 26px 0;
}
.vpr-statstrip .vault-container { background: transparent; }
.vpr-statstrip-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.vpr-sstat {
  padding: 6px 26px;
  border-left: 1px solid var(--vpr-line-2);
}
.vpr-sstat:first-child { border-left: 0; padding-left: 0; }
.vpr-sstat b {
  display: block;
  font-family: var(--vpr-mono);
  font-weight: 500;
  font-size: 15.5px;
  letter-spacing: 0.01em;
  color: var(--vpr-ink);
  margin: 0 0 3px;
}
.vpr-sstat-num { color: var(--vpr-teal-ink); }
.vpr-sstat-sub {
  display: block;
  font-size: 13px;
  line-height: 1.45;
  color: var(--vpr-muted);
}

@media (max-width: 900px) {
  .vpr-statstrip-grid { grid-template-columns: 1fr 1fr; row-gap: 22px; }
  .vpr-sstat:nth-child(odd) { border-left: 0; padding-left: 0; }
  .vpr-sstat:nth-child(even) { border-left: 1px solid var(--vpr-line-2); padding-left: 26px; }
}
@media (max-width: 560px) {
  .vpr-statstrip { padding: 20px 0; }
  .vpr-statstrip-grid { grid-template-columns: 1fr; row-gap: 0; }
  .vpr-sstat,
  .vpr-sstat:nth-child(even) { border-left: 0; border-top: 1px solid var(--vpr-line-2); padding: 13px 0; }
  .vpr-sstat:first-child { border-top: 0; padding-top: 0; }
  .vpr-sstat:last-child { padding-bottom: 0; }
}

/* ---------- CERTIFICATES: verify-a-batch-code lookup ---------- */
.vpr-coa {
  margin: 6px 0 28px;
  padding: 22px;
  max-width: 480px;
  background: rgba(10, 18, 33, 0.45);
  border: 1px solid var(--vpr-line-2);
  border-radius: 14px;
}
.vpr-coa-kicker { margin-bottom: 12px; }
.vpr-coa-form {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--vpr-line);
  border-radius: 10px;
  overflow: hidden;
  background: rgba(10, 18, 33, 0.6);
  transition: border-color 0.25s;
}
.vpr-coa-form:focus-within { border-color: var(--vpr-teal); }
.vpr-coa-input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 0;
  color: var(--vpr-ink);
  font-family: var(--vpr-mono);
  font-size: 13.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 13px 15px;
}
.vpr-coa-input::placeholder { color: var(--vpr-faint); text-transform: none; letter-spacing: 0.04em; }
.vpr-coa-input:focus { outline: none; }
.vpr-coa-btn {
  flex: none;
  background: var(--vpr-teal);
  color: #04201c;
  border: 0;
  font-family: var(--vpr-mono);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
  padding: 0 20px;
  cursor: pointer;
  transition: background 0.25s;
}
.vpr-coa-btn:hover { background: var(--vpr-teal-ink); }
.vpr-coa-help {
  font-family: var(--vpr-mono);
  font-size: 12px;
  color: var(--vpr-faint);
  margin: 12px 0 0;
}
.vpr-coa-eg {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-family: var(--vpr-mono);
  font-size: 12px;
  color: var(--vpr-teal-ink);
  border-bottom: 1px dashed var(--vpr-line);
}
.vpr-coa-eg:hover { color: var(--vpr-ink); border-bottom-color: var(--vpr-teal); }
.vpr-coa-result { margin: 16px 0 0; font-size: 14px; line-height: 1.55; }
.vpr-coa-result:empty { display: none; }
.vpr-coa-hit,
.vpr-coa-miss {
  padding: 13px 15px;
  border-radius: 10px;
  border: 1px solid var(--vpr-line-2);
  background: rgba(10, 18, 33, 0.5);
}
.vpr-coa-hit { color: var(--vpr-ink); border-left: 3px solid var(--vpr-teal); }
.vpr-coa-miss { color: var(--vpr-muted); }
.vpr-coa-code { font-family: var(--vpr-mono); color: var(--vpr-teal-ink); }
.vpr-coa-link,
.vpr-coa-miss a { color: var(--vpr-teal-ink); text-decoration: underline; text-underline-offset: 2px; }
.vpr-coa-link:hover,
.vpr-coa-miss a:hover { color: var(--vpr-ink); }
@media (max-width: 560px) {
  .vpr-coa { max-width: 100%; }
}
/* =============================================================
   VPR MEGA FOOTER — "The Vault" redesign (2026-07)
   Sitewide dark-navy footer. Append to END of assets/css/main.css
   (after the existing VPR redesign block). All selectors vpr- prefixed.
   Token fallbacks included so the footer stays navy even if the
   :root --vpr-* block is ever moved or trimmed.
   ============================================================ */

.vpr-foot {
  background: #0d1a30;
  border-top: 1px solid var(--vpr-line-2, rgba(255, 255, 255, 0.08));
  padding: 60px 0 34px;
}
.vpr-foot a { text-decoration: none; }

/* RUO specimen strip (corner-ticked box) */
.vpr-specimen {
  border: 2px solid var(--vpr-line, rgba(143, 216, 206, 0.16));
  border-radius: 8px;
  padding: 22px 26px;
  text-align: center;
  font-family: var(--vpr-mono, 'SFMono-Regular', ui-monospace, Menlo, Consolas, monospace);
  font-size: 14px;
  letter-spacing: 0.04em;
  line-height: 1.7;
  color: var(--vpr-mint, #F0F7F6);
  max-width: 640px;
  margin: 0 auto 46px;
  position: relative;
  background: rgba(240, 247, 246, 0.03);
}
.vpr-specimen::before,
.vpr-specimen::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  border: 2px solid var(--vpr-teal, #2A9D8F);
}
.vpr-specimen::before { left: 8px; top: 8px; border-right: 0; border-bottom: 0; }
.vpr-specimen::after  { right: 8px; bottom: 8px; border-left: 0; border-top: 0; }

/* Link grid */
.vpr-foot-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(4, 1fr);
  gap: 30px;
}
.vpr-foot-col h2 {
  font-size: 13px;
  font-family: var(--vpr-mono, 'SFMono-Regular', ui-monospace, Menlo, Consolas, monospace);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--vpr-teal-ink, #8fd8ce);
  margin: 0 0 14px;
  font-weight: 500;
}
.vpr-foot-col a {
  display: block;
  color: var(--vpr-muted, #9fb2c6);
  font-size: 14px;
  padding: 5px 0;
  transition: color 0.2s;
}
.vpr-foot-col a:hover,
.vpr-foot-col a:focus { color: var(--vpr-ink, #eaf1f4); }
.vpr-foot-mail { overflow-wrap: anywhere; }

/* Brand column */
.vpr-foot-logo {
  display: inline-block;
  font-size: 18px;
  letter-spacing: 0.06em;
  color: var(--vpr-ink, #eaf1f4);
  margin-bottom: 16px;
  padding: 0;
}
.vpr-foot-col a.vpr-foot-logo { display: inline-block; padding: 0; color: var(--vpr-ink, #eaf1f4); }
.vpr-foot-logo b { font-weight: 800; color: var(--vpr-teal-ink, #8fd8ce); }
.vpr-foot-brand p {
  color: var(--vpr-faint, #6f849c);
  font-size: 13.5px;
  line-height: 1.6;
  max-width: 30ch;
  margin: 0 0 18px;
}

/* Base row */
.vpr-foot-base {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  margin-top: 44px;
  padding-top: 22px;
  border-top: 1px solid var(--vpr-line-2, rgba(255, 255, 255, 0.08));
  color: var(--vpr-faint, #6f849c);
  font-size: 12.5px;
  font-family: var(--vpr-mono, 'SFMono-Regular', ui-monospace, Menlo, Consolas, monospace);
}
.vpr-foot-base a { color: var(--vpr-faint, #6f849c); transition: color 0.2s; }
.vpr-foot-base a:hover,
.vpr-foot-base a:focus { color: var(--vpr-ink, #eaf1f4); }
.vpr-foot-legal-links {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* Anchor offset so /#certificates lands below the sticky header */
.vpr-verify { scroll-margin-top: 96px; }

/* Responsive */
@media (max-width: 900px) {
  .vpr-foot-grid { grid-template-columns: 1fr 1fr; }
  .vpr-foot-brand { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .vpr-foot { padding: 46px 0 28px; }
  .vpr-specimen { margin-bottom: 36px; font-size: 13px; }
  .vpr-foot-grid { gap: 26px 18px; }
  .vpr-foot-base { flex-direction: column; align-items: flex-start; }
}

/* =============================================================
   VPR PHASE 2 — Dark overlay header (front page only)
   APPEND to the very END of css/main.css (the ENQUEUED stylesheet
   — NOT assets/css/main.css), after the Phase 1 VPR block.
   Everything is scoped to body.home; inner pages keep the white
   header untouched.
   ROLLBACK: delete from this banner to the end of the file.
   ============================================================ */

/* Top bar: hidden on home. Its trust copy (free shipping over $200,
   RUO badge, San Diego) is already restated on the redesigned home
   (hero eyebrow + logistics rows), and the prototype opens straight
   into the film. Inner pages keep it. */
body.home .vault-top-bar { display: none; }

/* Header + nav rows — three states:
   1. Base (no JS): solid deep navy. Safe fallback, nothing invisible.
   2. body.vpr-overlay + not scrolled: fully transparent over the film.
   3. .vpr-hdr-solid (scrolled >40px): frosted navy + hairline border. */
body.home .vault-header,
body.home .vault-nav {
	background-color: var(--vpr-navy);
	border-bottom: 1px solid transparent;
	transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
body.home.vpr-overlay .vault-header:not(.vpr-hdr-solid),
body.home.vpr-overlay .vault-nav:not(.vpr-hdr-solid) {
	background-color: transparent;
	border-bottom-color: transparent;
}
body.home .vault-header.vpr-hdr-solid,
body.home .vault-nav.vpr-hdr-solid {
	background-color: rgba(14, 25, 45, 0.82);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	border-bottom-color: var(--vpr-line-2);
}
/* Neutralize the white-era drop shadow main.js adds via .scrolled */
body.home .vault-header.scrolled { box-shadow: none; }

/* Pull the page up under the transparent header stack so the hero
   film runs flush to the viewport top. --vpr-hdr-h is measured live
   by vpr_overlay_header_js(); without JS it stays 0px and the solid
   dark header simply sits above the hero (graceful fallback).
   Applied to .vault-main (not .vpr-hero) so no ancestor overflow rule
   can ever clip the pulled-up hero. */
body.home.vpr-overlay .vault-main {
	margin-top: calc(-1 * var(--vpr-hdr-h, 0px));
}

/* Logo: white wordmark + teal-ink accent. Any uploaded image logo is
   forced to a clean white silhouette so it reads on the film. */
body.home .vault-logo-vault { color: #fff; }
body.home .vault-logo-peptides { color: var(--vpr-teal-ink); }
body.home .vault-logo img { filter: brightness(0) invert(1); }

/* Account + cart icons */
body.home .vault-icon { color: var(--vpr-ink); }
body.home .vault-account-link:hover,
body.home .vault-cart-icon:hover { background-color: rgba(143, 216, 206, 0.12); }
body.home .vault-account-link:hover .vault-icon,
body.home .vault-cart-icon:hover .vault-icon { color: var(--vpr-teal-ink); }

/* Hamburger */
body.home .vault-hamburger span { background-color: var(--vpr-ink); }

/* Search pill: dark glass on home */
body.home .vault-search-form input {
	background-color: rgba(255, 255, 255, 0.07);
	border-color: var(--vpr-line);
	color: var(--vpr-ink);
}
body.home .vault-search-form input::placeholder { color: var(--vpr-faint); opacity: 1; }
body.home .vault-search-form input:focus {
	border-color: var(--vpr-teal);
	box-shadow: 0 0 0 3px rgba(42, 157, 143, 0.22);
}

/* Nav links: muted slate → white on hover, teal underline for
   hover/current (matches the prototype's .nav-links) */
body.home .vault-nav a { color: var(--vpr-muted); }
body.home .vault-nav a:hover,
body.home .vault-nav li.current-menu-item a,
body.home .vault-nav li.current-post-ancestor a {
	color: var(--vpr-ink);
	border-bottom-color: var(--vpr-teal);
}

/* Keep the sticky header below the WP admin bar for logged-in admins
   (WP pushes the page down 32px / 46px but the bar itself is fixed). */
body.home.admin-bar .vault-header { top: 32px; }
@media (max-width: 782px) {
	body.home.admin-bar .vault-header { top: 46px; }
}

/* Mobile: the nav is a dropdown panel — always an opaque dark panel,
   never transparent (these selectors match/outrank the transparent
   state above and sit later in the file, so they win). */
@media (max-width: 768px) {
	body.home .vault-nav,
	body.home.vpr-overlay .vault-nav:not(.vpr-hdr-solid),
	body.home .vault-nav.vpr-hdr-solid {
		background-color: var(--vpr-panel);
		border-bottom: 1px solid var(--vpr-line-2);
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}
	body.home .vault-nav a {
		border-bottom: none;
		border-left: 3px solid transparent;
	}
	body.home .vault-nav a:hover,
	body.home .vault-nav li.current-menu-item a,
	body.home .vault-nav li.current-post-ancestor a {
		color: var(--vpr-ink);
		border-left-color: var(--vpr-teal);
	}
}
/* ============ end VPR PHASE 2 — dark overlay header ============ */

/* ============== VPR 2026-07-17: 6-tile grid fix + featured buying experience ============ */

/* Catalog grid now has 6 tiles (Neuro added): uniform 3x2, retire the
   5-tile "two wide on row two" spans. Tablet override restored below. */
.vpr-cat:nth-child(4), .vpr-cat:nth-child(5) { grid-column: span 2; }
@media (max-width: 900px) {
  .vpr-cat:nth-child(4), .vpr-cat:nth-child(5) { grid-column: span 1; }
}
@media (max-width: 560px) {
  .vpr-cat:nth-child(4), .vpr-cat:nth-child(5) { grid-column: span 1; }
}

/* ---------- Featured product / the buying experience ---------- */
.vpr-buysec { background: var(--vpr-navy); padding: 96px 0; }
.vpr-buy {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 48px;
  align-items: center;
}
.vpr-buy-visual {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--vpr-line-2);
  background: var(--vpr-panel);
}
.vpr-buy-visual img { display: block; width: 100%; height: auto; }
.vpr-buy-card {
  background: var(--vpr-panel);
  border: 1px solid var(--vpr-line-2);
  border-radius: 16px;
  padding: 30px 30px 26px;
}
.vpr-buy-name { font-size: 26px; font-weight: 800; letter-spacing: -0.01em; color: var(--vpr-ink); margin: 0 0 6px; }
.vpr-buy-price { font-family: var(--vpr-mono); font-size: 20px; color: #fff; margin: 0 0 4px; }
.vpr-buy-price span { font-size: 12.5px; color: var(--vpr-faint); }
.vpr-buy-price-gated { color: var(--vpr-teal-ink); font-size: 14px; letter-spacing: 0.05em; }
.vpr-buy-note { font-size: 13px; color: var(--vpr-muted); margin: 0 0 18px; }
.vpr-buy-tiers { border: 1px solid var(--vpr-line-2); border-radius: 12px; overflow: hidden; margin: 0 0 18px; }
.vpr-buy-tier {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 11px 15px;
  border-top: 1px solid var(--vpr-line-2);
  font-size: 13.5px;
  color: var(--vpr-muted);
}
.vpr-buy-tier:first-child { border-top: 0; }
.vpr-buy-tier-hot { background: rgba(42, 157, 143, 0.10); color: var(--vpr-ink); box-shadow: inset 3px 0 0 var(--vpr-teal); }
.vpr-buy-tier-l { font-weight: 600; color: var(--vpr-ink); }
.vpr-buy-tier-r { font-family: var(--vpr-mono); font-size: 12.5px; }
.vpr-buy-tier-r em { font-style: normal; color: var(--vpr-teal-ink); margin-left: 6px; }
.vpr-buy-form { display: flex; gap: 12px; margin: 0 0 18px; }
.vpr-buy-qty { display: flex; align-items: stretch; border: 1px solid var(--vpr-line-2); border-radius: 10px; overflow: hidden; background: var(--vpr-navy); }
.vpr-buy-qty input { width: 56px; text-align: center; background: transparent; border: 0; color: var(--vpr-ink); font-family: var(--vpr-mono); font-size: 15px; -moz-appearance: textfield; }
.vpr-buy-qty input::-webkit-outer-spin-button, .vpr-buy-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.vpr-buy-step { background: transparent; border: 0; color: var(--vpr-teal-ink); font-size: 17px; width: 38px; cursor: pointer; }
.vpr-buy-step:hover { color: #fff; background: rgba(42, 157, 143, 0.12); }
.vpr-buy-add {
  flex: 1;
  background: var(--vpr-teal);
  border: 1.5px solid var(--vpr-teal);
  border-radius: 10px;
  color: #04201c;
  font-family: var(--vpr-mono);
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 12px 18px;
  cursor: pointer;
  transition: background 0.2s;
}
.vpr-buy-add:hover { background: var(--vpr-teal-dk, #23857a); border-color: var(--vpr-teal-dk, #23857a); }
.vpr-buy-cta { display: inline-block; margin: 0 0 18px; }
.vpr-buy-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.vpr-buy-coa { display: inline-block; font-family: var(--vpr-mono); font-size: 12.5px; color: var(--vpr-teal-ink); text-decoration: underline; text-underline-offset: 3px; margin: 0 0 14px; }
.vpr-buy-coa:hover { color: #fff; }
.vpr-buy-ruo { font-family: var(--vpr-mono); font-size: 10.5px; letter-spacing: 0.1em; color: var(--vpr-faint); margin: 0; }
@media (max-width: 900px) {
  .vpr-buysec { padding: 64px 0; }
  .vpr-buy { grid-template-columns: 1fr; gap: 26px; }
}
@media (max-width: 560px) {
  .vpr-buy-card { padding: 22px 18px 20px; }
  .vpr-buy-form { flex-direction: column; }
}

/* ============ VPR SHELF (2026-07-17): desktop grid, mobile swipe row ============ */
.vpr-shelfsec { background: var(--vpr-navy-2); padding: 96px 0; }
.vpr-shelf-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
}
.vpr-shelf-all { white-space: nowrap; padding-bottom: 6px; }
.vpr-shelf {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.vpr-shelf-card {
  display: block;
  text-decoration: none;
  background: var(--vpr-panel);
  border: 1px solid var(--vpr-line-2);
  border-radius: 14px;
  overflow: hidden;
  transition: transform 0.25s ease, border-color 0.25s ease;
}
.vpr-shelf-card:hover {
  transform: translateY(-4px);
  border-color: rgba(42, 157, 143, 0.45);
}
.vpr-shelf-img {
  display: block;
  aspect-ratio: 1 / 1;
  background: #e8ecef;
  overflow: hidden;
}
.vpr-shelf-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease;
}
.vpr-shelf-card:hover .vpr-shelf-img img { transform: scale(1.04); }
.vpr-shelf-body { display: block; padding: 14px 16px 16px; }
.vpr-shelf-name {
  display: block;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--vpr-ink);
  margin: 0 0 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vpr-shelf-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.vpr-shelf-price {
  font-family: var(--vpr-mono);
  font-size: 13px;
  color: #fff;
  white-space: nowrap;
}
.vpr-shelf-price .amount { color: #fff; }
.vpr-shelf-chip { flex: none; }

@media (max-width: 900px) {
  .vpr-shelfsec { padding: 64px 0; }
  .vpr-shelf { grid-template-columns: repeat(2, 1fr); }
  .vpr-shelf-head { flex-direction: column; align-items: flex-start; gap: 8px; }
}
@media (max-width: 560px) {
  /* S-tier switch: same markup becomes a swipeable row on phones */
  .vpr-shelf {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 12px;
    padding-bottom: 8px;
    margin-right: -18px;
    scrollbar-width: none;
  }
  .vpr-shelf::-webkit-scrollbar { display: none; }
  .vpr-shelf-card {
    flex: 0 0 72%;
    scroll-snap-align: start;
  }
}

/* ============ VPR BLOG REDESIGN 2026-07-17 (index grid + single post) ============ */

/* ============================================================
   VPR BLOG INDEX — "The Research Library" (2026-07)
   Card grid for the posts list + category / tag / search / date
   archives rendered by index.php. APPEND to the END of the
   ENQUEUED css/main.css (functions.php:104), after the existing
   VPR redesign blocks. Every selector is vpr-blog- prefixed and
   scoped under .vpr-blog. Delete this whole block to roll back.
   Reuses existing tokens only (--vpr-*): no new colors.
   ============================================================ */

.vpr-blog {
  background: var(--vpr-navy);
  padding: clamp(56px, 8vh, 104px) 0 clamp(70px, 10vh, 120px);
}
.vpr-blog .vault-container { background: transparent; }

/* ---------- header ---------- */
.vpr-blog__head { max-width: 760px; margin: 0 0 clamp(32px, 5vh, 52px); }
.vpr-blog__head .vpr-h2 { margin-bottom: 12px; }
.vpr-blog__head .vpr-lead { margin-bottom: 0; }

/* ---------- category filter chips ---------- */
.vpr-blog__filters {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--vpr-line-2);
}
.vpr-blog__filter.vpr-chip {
  text-decoration: none;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.vpr-blog__filter.vpr-chip:hover {
  color: var(--vpr-ink);
  border-color: var(--vpr-teal);
  text-decoration: none;
}
.vpr-blog__filter.vpr-chip-on:hover { color: #04201c; }

/* ---------- grid ---------- */
.vpr-blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

/* ---------- card ---------- */
.vpr-blog-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--vpr-panel);
  border: 1px solid var(--vpr-line-2);
  border-radius: 14px;
  overflow: hidden;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.vpr-blog-card:hover {
  transform: translateY(-4px);
  border-color: rgba(42, 157, 143, 0.45);
  box-shadow: 0 24px 50px -32px rgba(0, 0, 0, 0.75);
}

/* media (16:9) — shared by real featured image + branded fallback */
.vpr-blog-card__media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--vpr-navy-2);
}
.vpr-blog-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 56%, rgba(13, 22, 40, 0.55) 100%);
  pointer-events: none;
}
.vpr-blog-card__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.vpr-blog-card:hover .vpr-blog-card__img { transform: scale(1.045); }

/* ghost monogram sits on the branded gradient when no image exists */
.vpr-blog-card__glyph {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--vpr-mono);
  font-weight: 700;
  font-size: clamp(60px, 12vw, 104px);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--vpr-teal-ink);
  opacity: 0.16;
  transition: transform 0.4s ease, opacity 0.3s ease;
}
.vpr-blog-card:hover .vpr-blog-card__glyph { transform: scale(1.06); opacity: 0.22; }

/* Branded gradient fallbacks — palette tokens only (navy family + translucent teal/teal-ink). */
.vpr-blog-card__media--fb1 { background: radial-gradient(120% 92% at 16% 18%, rgba(42, 157, 143, 0.30), transparent 60%), linear-gradient(158deg, var(--vpr-navy) 0%, var(--vpr-panel) 100%); }
.vpr-blog-card__media--fb2 { background: radial-gradient(120% 90% at 84% 16%, rgba(143, 216, 206, 0.20), transparent 55%), linear-gradient(200deg, var(--vpr-navy-2) 0%, var(--vpr-navy) 100%); }
.vpr-blog-card__media--fb3 { background: radial-gradient(110% 120% at 50% 118%, rgba(42, 157, 143, 0.32), transparent 60%), linear-gradient(140deg, var(--vpr-panel) 0%, var(--vpr-navy) 100%); }
.vpr-blog-card__media--fb4 { background: radial-gradient(120% 84% at 12% 88%, rgba(143, 216, 206, 0.18), transparent 55%), linear-gradient(120deg, var(--vpr-navy) 0%, var(--vpr-navy-2) 100%); }
.vpr-blog-card__media--fb5 { background: radial-gradient(112% 100% at 72% 30%, rgba(42, 157, 143, 0.26), transparent 60%), linear-gradient(210deg, var(--vpr-navy-2) 0%, var(--vpr-panel) 100%); }
.vpr-blog-card__media--fb6 { background: radial-gradient(130% 110% at 28% 12%, rgba(143, 216, 206, 0.18), transparent 55%), linear-gradient(160deg, var(--vpr-panel) 0%, var(--vpr-navy-2) 100%); }

/* body */
.vpr-blog-card__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px 18px 20px;
  flex: 1;
}
.vpr-blog-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.vpr-blog-card__cat.vpr-chip {
  position: relative;
  z-index: 2; /* keep the category link clickable above the stretched title link */
  text-decoration: none;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.vpr-blog-card__cat.vpr-chip:hover {
  background: var(--vpr-teal);
  border-color: var(--vpr-teal);
  color: #04201c;
  text-decoration: none;
}
.vpr-blog-card__date {
  font-family: var(--vpr-mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--vpr-faint);
  white-space: nowrap;
}
.vpr-blog-card__title {
  margin: 0;
  font-size: 18.5px;
  line-height: 1.28;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--vpr-ink);
}
.vpr-blog-card__title a { color: inherit; text-decoration: none; }
.vpr-blog-card__title a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1; /* stretched link: whole card navigates to the post */
}
.vpr-blog-card:hover .vpr-blog-card__title { color: #fff; }
.vpr-blog-card__excerpt {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--vpr-muted);
}
.vpr-blog-card__more {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--vpr-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--vpr-teal-ink);
}
.vpr-blog-card__arw { transition: transform 0.3s ease; }
.vpr-blog-card:hover .vpr-blog-card__arw { transform: translateX(5px); }

/* ---------- empty state ---------- */
.vpr-blog-empty { max-width: 560px; padding: 24px 0 40px; }
.vpr-blog-empty h2 { margin: 0 0 12px; color: var(--vpr-ink); font-size: 24px; }
.vpr-blog-empty p { margin: 0 0 20px; color: var(--vpr-muted); }
.vpr-blog-empty .search-form { display: flex; gap: 10px; flex-wrap: wrap; }
.vpr-blog-empty .search-field {
  min-width: 220px;
  background: rgba(10, 18, 33, 0.6);
  border: 1px solid var(--vpr-line);
  border-radius: 10px;
  color: var(--vpr-ink);
  font-size: 14px;
  padding: 11px 14px;
}
.vpr-blog-empty .search-field::placeholder { color: var(--vpr-faint); }
.vpr-blog-empty .search-field:focus { outline: none; border-color: var(--vpr-teal); }
.vpr-blog-empty .search-submit {
  background: var(--vpr-teal);
  border: 0;
  border-radius: 10px;
  color: #04201c;
  font-family: var(--vpr-mono);
  font-size: 12.5px;
  letter-spacing: 0.04em;
  padding: 0 18px;
  cursor: pointer;
  transition: background 0.2s;
}
.vpr-blog-empty .search-submit:hover { background: var(--vpr-teal-ink); }

/* ---------- pagination (WP the_posts_pagination markup) ---------- */
.vpr-blog-pagination { margin-top: clamp(40px, 6vh, 64px); }
.vpr-blog-pagination .screen-reader-text {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
}
.vpr-blog-pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.vpr-blog-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 42px;
  padding: 0 12px;
  border: 1px solid var(--vpr-line-2);
  border-radius: 10px;
  font-family: var(--vpr-mono);
  font-size: 13.5px;
  color: var(--vpr-muted);
  text-decoration: none;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.vpr-blog-pagination a.page-numbers:hover {
  color: var(--vpr-ink);
  border-color: var(--vpr-teal);
}
.vpr-blog-pagination .page-numbers.current {
  background: var(--vpr-teal);
  border-color: var(--vpr-teal);
  color: #04201c;
}
.vpr-blog-pagination .page-numbers.dots {
  border-color: transparent;
  min-width: 0;
  padding: 0 4px;
}

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .vpr-blog-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .vpr-blog-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .vpr-blog-card,
  .vpr-blog-card__img,
  .vpr-blog-card__glyph,
  .vpr-blog-card__arw { transition: none !important; }
}
/* ============ end VPR BLOG INDEX ============ */
/* ============================================================
   VPR BLOG — single-post reading experience (2026-07)
   APPEND to the END of css/main.css (the ENQUEUED stylesheet:
   functions.php:104 → get_template_directory_uri().'/css/main.css').
   All selectors are .vpr-blog-* prefixed or scoped to body.single-post,
   reusing the existing --vpr-* tokens. Nothing outside the blog is touched.
   ROLLBACK: delete from this banner to the end of the file.
   ============================================================ */

/* Guarantee no white sliver: the whole single-post main sits on deep navy,
   bookended by the (white) inner-page header above and the dark mega footer
   below. Reading happens on a light card for max legibility. */
body.single-post { background-color: var(--vpr-navy); }
body.single-post .vault-main { background-color: var(--vpr-navy); padding: 0; }
.vpr-blog-single { background: var(--vpr-navy); color: var(--vpr-ink); }

/* ---------- HERO MASTHEAD (dark) ---------- */
.vpr-blog-hero {
	position: relative;
	background:
		radial-gradient(120% 80% at 88% 0%, rgba(42, 157, 143, 0.10) 0%, transparent 55%),
		var(--vpr-navy);
	padding: clamp(36px, 6vh, 72px) 0 clamp(28px, 4vh, 44px);
	border-bottom: 1px solid var(--vpr-line-2);
}
.vpr-blog-hero .vault-container { background: transparent; }

.vpr-blog-crumbs {
	font-family: var(--vpr-mono);
	font-size: 12px;
	letter-spacing: 0.02em;
	color: var(--vpr-faint);
	margin-bottom: 22px;
	line-height: 1.7;
}
.vpr-blog-crumbs a,
.vpr-blog-crumbs .rank-math-breadcrumb a {
	color: var(--vpr-teal-ink);
	text-decoration: none;
	transition: color 0.2s ease;
}
.vpr-blog-crumbs a:hover,
.vpr-blog-crumbs .rank-math-breadcrumb a:hover { color: var(--vpr-ink); }
.vpr-blog-crumb-sep,
.vpr-blog-crumbs .separator { color: var(--vpr-faint); margin: 0 8px; }
.vpr-blog-crumb-current,
.vpr-blog-crumbs .rank-math-breadcrumb .last { color: var(--vpr-muted); }
/* RankMath sometimes wraps its trail in <p>; flatten it inline. */
.vpr-blog-crumbs p { margin: 0; }

.vpr-blog-cat {
	display: inline-block;
	margin-bottom: 18px;
	text-decoration: none;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.vpr-blog-cat:hover { background: var(--vpr-teal); color: #04201c; border-color: var(--vpr-teal); }
.vpr-blog-eyebrow { margin-bottom: 18px; }

.vpr-blog-title {
	font-size: clamp(30px, 4.6vw, 54px);
	line-height: 1.06;
	letter-spacing: -0.02em;
	font-weight: 800;
	color: var(--vpr-mint);
	margin: 0 0 18px;
	max-width: 20ch;
}

.vpr-blog-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 10px;
	font-family: var(--vpr-mono);
	font-size: 13px;
	color: var(--vpr-muted);
}
.vpr-blog-meta-dot { color: var(--vpr-faint); }
.vpr-blog-meta-author { color: var(--vpr-ink); }

.vpr-blog-hero-img {
	margin-top: clamp(28px, 4vh, 44px);
	border-radius: 16px;
	overflow: hidden;
	border: 1px solid var(--vpr-line-2);
	background: var(--vpr-panel);
	aspect-ratio: 16 / 9;
	box-shadow: 0 30px 70px -34px rgba(0, 0, 0, 0.7);
}
.vpr-blog-hero-img-el {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ---------- BODY: reading card + TOC rail ---------- */
.vpr-blog-body { background: var(--vpr-navy); padding: clamp(40px, 6vh, 72px) 0; }
.vpr-blog-body .vault-container { background: transparent; }

.vpr-blog-inner {
	max-width: 820px;
	margin: 0 auto;
}
.vpr-blog-inner.vpr-blog--with-toc {
	max-width: none;
	display: grid;
	grid-template-columns: minmax(190px, 220px) minmax(0, 780px);
	gap: clamp(28px, 4vw, 56px);
	justify-content: center;
	align-items: start;
}

/* Aside is a passive wrapper; the TOC does the work. */
.vpr-blog-aside { min-width: 0; }
.vpr-blog--with-toc .vpr-blog-aside { position: relative; }

/* TOC ------------------------------------------------ */
.vpr-blog-toc[hidden] { display: none; }
.vpr-blog-toc {
	background: var(--vpr-panel);
	border: 1px solid var(--vpr-line-2);
	border-radius: 12px;
	padding: 6px 6px 8px;
}
.vpr-blog-toc summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 14px;
	font-family: var(--vpr-mono);
	font-size: 11.5px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--vpr-teal-ink);
}
.vpr-blog-toc summary::-webkit-details-marker { display: none; }
.vpr-blog-toc summary::after {
	content: "\2228";
	color: var(--vpr-teal-ink);
	transition: transform 0.3s ease;
	flex: none;
}
.vpr-blog-toc[open] summary::after { transform: rotate(180deg); }

.vpr-blog-toc-list { display: flex; flex-direction: column; padding: 4px; }
.vpr-blog-toc-link {
	display: block;
	font-size: 13.5px;
	line-height: 1.4;
	color: var(--vpr-muted);
	text-decoration: none;
	padding: 8px 10px;
	border-left: 2px solid transparent;
	border-radius: 0 6px 6px 0;
	transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.vpr-blog-toc-link:hover { color: var(--vpr-ink); background: rgba(143, 216, 206, 0.06); }
.vpr-blog-toc-sub { padding-left: 24px; font-size: 12.5px; color: var(--vpr-faint); }
.vpr-blog-toc-link.is-active {
	color: var(--vpr-teal-ink);
	border-left-color: var(--vpr-teal);
	background: rgba(42, 157, 143, 0.10);
}

/* Desktop: sticky rail, TOC always expanded, summary is a static label. */
@media (min-width: 1101px) {
	.vpr-blog--with-toc .vpr-blog-toc {
		position: sticky;
		top: 104px;
		max-height: calc(100vh - 132px);
		overflow-y: auto;
	}
	.vpr-blog-toc summary { pointer-events: none; }
	.vpr-blog-toc summary::after { display: none; }
	.vpr-blog--with-toc .vpr-blog-toc-list { display: flex !important; }
}

/* ---------- READING CARD (light) ---------- */
.vpr-blog-article {
	background: var(--vpr-mint);
	border: 1px solid rgba(0, 0, 0, 0.05);
	border-radius: 16px;
	padding: clamp(26px, 4vw, 56px) clamp(22px, 4vw, 52px) clamp(30px, 4vw, 48px);
	box-shadow: 0 30px 70px -40px rgba(0, 0, 0, 0.6);
	min-width: 0;
}
.vpr-blog--with-toc .vpr-blog-article { justify-self: center; width: 100%; }

/* Branded long-form typography — navy ink on mint, teal accents. */
.vpr-blog-prose {
	color: #22303f;
	font-size: 18px;
	line-height: 1.8;
	max-width: 720px;
}
.vpr-blog-prose > *:first-child { margin-top: 0; }
.vpr-blog-prose > *:last-child { margin-bottom: 0; }
.vpr-blog-prose p { margin: 0 0 22px; }
.vpr-blog-prose h2 {
	font-size: clamp(24px, 2.6vw, 31px);
	line-height: 1.2;
	letter-spacing: -0.01em;
	font-weight: 700;
	color: var(--vp-navy, #1B2A4A);
	margin: 46px 0 16px;
	padding-top: 10px;
	scroll-margin-top: 104px;
}
.vpr-blog-prose h2::before {
	content: "";
	display: block;
	width: 42px;
	height: 3px;
	background: var(--vpr-teal);
	border-radius: 2px;
	margin-bottom: 18px;
}
.vpr-blog-prose h3 {
	font-size: clamp(19px, 2vw, 23px);
	line-height: 1.3;
	font-weight: 700;
	color: #1a7060; /* darkened teal — AA-compliant on the mint card (~4.9:1) */
	margin: 34px 0 12px;
	scroll-margin-top: 104px;
}
.vpr-blog-prose h4 {
	font-size: 17px;
	font-weight: 700;
	color: var(--vp-navy, #1B2A4A);
	margin: 26px 0 10px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}
.vpr-blog-prose a {
	color: #1a7060; /* AA-compliant teal on the mint card (~4.9:1) */
	text-decoration: underline;
	text-underline-offset: 2px;
	text-decoration-thickness: 1px;
	transition: color 0.2s ease;
}
.vpr-blog-prose a:hover { color: #12564a; }
.vpr-blog-prose ul,
.vpr-blog-prose ol { margin: 0 0 22px; padding-left: 24px; }
.vpr-blog-prose li { margin-bottom: 9px; padding-left: 4px; }
.vpr-blog-prose ul li::marker { color: var(--vpr-teal); }
.vpr-blog-prose ol li::marker { color: var(--vpr-teal); font-family: var(--vpr-mono); font-size: 0.92em; }
.vpr-blog-prose blockquote {
	margin: 28px 0;
	padding: 4px 0 4px 24px;
	border-left: 3px solid var(--vpr-teal);
	color: #3a4a5a;
	font-size: 19px;
	font-style: italic;
	line-height: 1.65;
}
.vpr-blog-prose blockquote p:last-child { margin-bottom: 0; }
.vpr-blog-prose img,
.vpr-blog-prose figure { max-width: 100%; height: auto; }
.vpr-blog-prose figure { margin: 28px 0; }
.vpr-blog-prose img { border-radius: 10px; display: block; }
.vpr-blog-prose figcaption {
	font-size: 13px;
	color: #6a7a88;
	margin-top: 8px;
	text-align: center;
}
.vpr-blog-prose hr {
	border: 0;
	height: 1px;
	background: rgba(27, 42, 74, 0.14);
	margin: 40px 0;
}
.vpr-blog-prose code {
	font-family: var(--vpr-mono);
	font-size: 0.88em;
	background: rgba(27, 42, 74, 0.06);
	border: 1px solid rgba(27, 42, 74, 0.10);
	border-radius: 5px;
	padding: 2px 6px;
}
.vpr-blog-prose pre {
	background: #0f1d33;
	color: #e6edf3;
	border-radius: 12px;
	padding: 18px 20px;
	overflow-x: auto;
	margin: 26px 0;
	font-size: 14px;
	line-height: 1.6;
}
.vpr-blog-prose pre code { background: none; border: 0; padding: 0; color: inherit; }

/* Tables — branded + horizontally scrollable on narrow screens. */
.vpr-blog-prose .wp-block-table,
.vpr-blog-prose figure.wp-block-table { overflow-x: auto; margin: 28px 0; }
.vpr-blog-prose table {
	width: 100%;
	border-collapse: collapse;
	font-size: 15px;
	line-height: 1.5;
}
.vpr-blog-prose th,
.vpr-blog-prose td {
	text-align: left;
	padding: 11px 14px;
	border: 1px solid rgba(27, 42, 74, 0.12);
}
.vpr-blog-prose thead th {
	background: var(--vp-navy, #1B2A4A);
	color: #fff;
	font-family: var(--vpr-mono);
	font-size: 12.5px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	font-weight: 500;
}
.vpr-blog-prose tbody tr:nth-child(even) { background: rgba(27, 42, 74, 0.035); }

.vpr-blog-pagelinks {
	margin-top: 30px;
	font-family: var(--vpr-mono);
	font-size: 13px;
	color: #6a7a88;
}
.vpr-blog-pagelinks a { color: #1a7060; }

/* Tags row under the article. */
.vpr-blog-tags {
	margin-top: 30px;
	padding-top: 24px;
	border-top: 1px solid rgba(27, 42, 74, 0.12);
}
.vpr-blog-tags .vpr-chip {
	color: #1a7060;
	border-color: rgba(42, 157, 143, 0.35);
	text-decoration: none;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.vpr-blog-tags .vpr-chip:hover { background: var(--vpr-teal); color: #fff; border-color: var(--vpr-teal); }

/* ---------- END-OF-POST CTA (dark, RUO-safe) ---------- */
.vpr-blog-cta { background: var(--vpr-navy-2); padding: clamp(46px, 7vh, 84px) 0; border-top: 1px solid var(--vpr-line-2); }
.vpr-blog-cta .vault-container { background: transparent; }
.vpr-blog-cta-card {
	max-width: 820px;
	margin: 0 auto;
	background:
		radial-gradient(90% 120% at 100% 0%, rgba(42, 157, 143, 0.12) 0%, transparent 60%),
		var(--vpr-panel);
	border: 1px solid var(--vpr-line);
	border-radius: 18px;
	padding: clamp(28px, 4vw, 46px);
}
.vpr-blog-cta-title {
	font-size: clamp(22px, 3vw, 32px);
	line-height: 1.15;
	letter-spacing: -0.01em;
	font-weight: 800;
	color: var(--vpr-ink);
	margin: 0 0 12px;
	max-width: 22ch;
}
.vpr-blog-cta-sub { color: var(--vpr-muted); font-size: 16px; line-height: 1.6; max-width: 56ch; margin: 0 0 26px; }
.vpr-blog-cta-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 18px 28px; margin-bottom: 26px; }
.vpr-blog-cta-ruo {
	font-family: var(--vpr-mono);
	font-size: 11px;
	line-height: 1.6;
	letter-spacing: 0.02em;
	color: var(--vpr-faint);
	margin: 0;
	padding-top: 20px;
	border-top: 1px solid var(--vpr-line-2);
}

/* ---------- RELATED POSTS (dark) ---------- */
.vpr-blog-related { background: var(--vpr-navy); padding: clamp(52px, 8vh, 96px) 0; border-top: 1px solid var(--vpr-line-2); }
.vpr-blog-related .vault-container { background: transparent; }
.vpr-blog-related-head { margin-bottom: 34px; }
.vpr-blog-related-title { font-size: clamp(24px, 3.2vw, 38px); margin: 0; }
.vpr-blog-related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.vpr-blog-rcard {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	background: var(--vpr-panel);
	border: 1px solid var(--vpr-line-2);
	border-radius: 14px;
	overflow: hidden;
	transition: transform 0.25s ease, border-color 0.25s ease;
}
.vpr-blog-rcard:hover { transform: translateY(-4px); border-color: rgba(42, 157, 143, 0.45); text-decoration: none; }
.vpr-blog-rcard-img {
	display: block;
	aspect-ratio: 16 / 10;
	background: #16233c;
	overflow: hidden;
	position: relative;
}
.vpr-blog-rcard-img-el { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.35s ease; }
.vpr-blog-rcard:hover .vpr-blog-rcard-img-el { transform: scale(1.04); }
.vpr-blog-rcard-ph {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--vpr-mono);
	font-size: 13px;
	letter-spacing: 0.3em;
	color: var(--vpr-faint);
	opacity: 0.5;
}
.vpr-blog-rcard-body { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px 18px; flex: 1; }
.vpr-blog-rcard-cat {
	font-family: var(--vpr-mono);
	font-size: 10.5px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--vpr-teal-ink);
}
.vpr-blog-rcard-name {
	font-size: 16px;
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: -0.01em;
	color: var(--vpr-ink);
}
.vpr-blog-rcard-meta { margin-top: auto; font-family: var(--vpr-mono); font-size: 12px; color: var(--vpr-faint); }
.vpr-blog-related-foot { margin-top: 34px; }

/* ---------- comments container inherits the dark surface ---------- */
.vpr-blog-comments { background: var(--vpr-navy); padding: 0 0 clamp(40px, 6vh, 72px); }
.vpr-blog-comments .vault-container { background: transparent; color: var(--vpr-muted); }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1100px) {
	.vpr-blog-inner.vpr-blog--with-toc {
		display: block;
		max-width: 820px;
		margin: 0 auto;
	}
	.vpr-blog--with-toc .vpr-blog-aside { margin-bottom: 22px; }
	.vpr-blog-toc { position: static; max-height: none; }
}
@media (max-width: 720px) {
	.vpr-blog-related-grid { grid-template-columns: 1fr; }
	.vpr-blog-prose { font-size: 17px; }
	.vpr-blog-hero-img { aspect-ratio: 4 / 3; }
}
@media (prefers-reduced-motion: reduce) {
	.vpr-blog-rcard,
	.vpr-blog-rcard-img-el,
	.vpr-blog-toc summary::after,
	.vpr-blog-toc-link,
	.vpr-blog-cat { transition: none !important; }
}
/* ============ end VPR BLOG single-post block ============ */



/* ============ 15-SECOND BRIEF (silent b-roll video + RUO-safe TL;DR, dark) ============
   Bridges the dark hero and the light reading card. Renders only when a post has a
   `_vpr_video_id`. Reuses existing --vpr-* tokens; delete this block to roll back. */
.vpr-blog-brief { background: var(--vpr-navy); padding: clamp(20px, 3vh, 40px) 0 clamp(40px, 7vh, 80px); }
.vpr-blog-brief .vault-container { background: transparent; }
.vpr-brief-card {
	display: grid;
	grid-template-columns: 1.15fr 1fr;
	gap: clamp(18px, 3vw, 40px);
	align-items: stretch;
	background:
		radial-gradient(90% 120% at 0% 0%, rgba(42, 157, 143, 0.10) 0%, transparent 55%),
		var(--vpr-panel);
	border: 1px solid var(--vpr-line);
	border-radius: 20px;
	padding: clamp(14px, 2vw, 22px);
}
.vpr-brief-media {
	position: relative;
	border-radius: 14px;
	overflow: hidden;
	background: #0c1626;
	aspect-ratio: 16 / 9;
}
.vpr-brief-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.vpr-brief-badge {
	position: absolute;
	top: 12px;
	left: 12px;
	font-family: var(--vpr-mono);
	font-size: 10px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--vpr-teal-ink);
	background: rgba(6, 20, 18, 0.72);
	border: 1px solid rgba(42, 157, 143, 0.5);
	padding: 5px 10px;
	border-radius: 999px;
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
}
.vpr-brief-body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(8px, 1.4vw, 18px) clamp(6px, 1.4vw, 20px);
}
.vpr-brief-eyebrow { margin-bottom: 10px; }
.vpr-brief-headline {
	font-size: clamp(22px, 2.8vw, 30px);
	line-height: 1.12;
	letter-spacing: -0.01em;
	font-weight: 800;
	color: var(--vpr-ink);
	margin: 0 0 10px;
}
.vpr-brief-tldr {
	color: var(--vpr-muted);
	font-size: 15px;
	line-height: 1.55;
	margin: 0 0 16px;
	max-width: 46ch;
}
.vpr-brief-facts {
	list-style: none;
	margin: 0 0 18px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.vpr-brief-facts li {
	position: relative;
	padding-left: 22px;
	color: var(--vpr-mint);
	font-size: 14px;
	line-height: 1.5;
}
.vpr-brief-facts li::before {
	content: "\2192"; /* → */
	position: absolute;
	left: 0;
	top: 0;
	color: var(--vpr-teal);
	font-weight: 700;
}
.vpr-brief-ruo {
	font-family: var(--vpr-mono);
	font-size: 10.5px;
	line-height: 1.6;
	letter-spacing: 0.02em;
	color: var(--vpr-faint);
	margin: 0;
	padding-top: 14px;
	border-top: 1px solid var(--vpr-line-2);
}
@media (max-width: 900px) {
	.vpr-brief-card { grid-template-columns: 1fr; }
	.vpr-brief-body { padding: 4px 6px 6px; }
}


/* ============================================================
   MOBILE HEADER FIX
   Every page rendered ~256px wider than a phone (631px document on a 375px
   screen), so the site scrolled sideways and, zoomed out, showed the header
   search box stranded in white space beside the content.

   The @media (max-width:768px) block above already asks the search bar to take
   a full-width row of its own (flex:0 0 100%; order:3), but .vault-header-content
   is display:flex with no flex-wrap, so it defaults to nowrap and the row can
   never wrap. The search bar stayed on the logo's row, unable to shrink, and
   pushed the document past the viewport. Verified 256px -> 0px at 320/375/390/
   414/600/768px on home, blog and certificates.
   ============================================================ */
@media (max-width: 768px) {

	/* 1. The fix: let the header wrap so search drops to its own row. */
	.vault-header-content {
		flex-wrap: wrap;
		row-gap: var(--spacing-md);
	}

	/* 2. Keep row 1 (logo + account + cart + menu) on one line. A 200px logo made
	      that row ~376px against a 371px viewport, pushing the hamburger
	      off-screen and forcing a third row. 150px lands it at ~347px. */
	.vault-logo img,
	.vault-logo .custom-logo-link img,
	.vault-header .vault-logo img.custom-logo {
		max-width: 150px !important;
	}

	.vault-header-right {
		gap: var(--spacing-md);
	}

	/* 2b. Let the search input shrink; flex items default to min-width:auto,
	      which kept the Search button 21px off-screen at 320px. */
	.vault-search-form input {
		min-width: 0;
	}
}

/* 3. The certificate-archive image had no width constraint and rendered at its
      intrinsic 1920px inside a 323px column; section.vpr-verify{overflow:hidden}
      hid it from the scrollbar but cropped the image and the copy beside it. */
.vpr-verify-visual img {
	max-width: 100%;
	height: auto;
	display: block;
}


/* ============================================================
   VPR SHOP — "The Vault" makeover for shop / category archives
   APPEND to the END of css/main.css (the enqueued stylesheet),
   directly after the existing VPR homepage block.
   Pure CSS. No PHP. Fully reversible — delete this block to undo.
   Relies on the --vpr-* variables defined in the VPR homepage block.
   ============================================================ */

/* ---------- page shell goes dark ---------- */
.woocommerce-shop .vault-main,
.tax-product_cat .vault-main,
.tax-product_tag .vault-main,
.post-type-archive-product .vault-main {
  background: var(--vpr-navy);
}

.vault-shop-wrapper {
  background: var(--vpr-navy);
  padding-top: clamp(28px, 4vh, 48px);
  padding-bottom: clamp(60px, 9vh, 110px);
}

/* ---------- archive hero ---------- */
.woocommerce-shop .vault-page-hero,
.tax-product_cat .vault-page-hero,
.tax-product_tag .vault-page-hero,
.post-type-archive-product .vault-page-hero {
  background:
    radial-gradient(120% 140% at 82% 8%, rgba(42, 157, 143, 0.16), transparent 60%),
    linear-gradient(180deg, #0e1a30 0%, var(--vpr-navy) 100%);
  border-bottom: 1px solid var(--vpr-line-2);
  padding: clamp(34px, 6vh, 64px) 0 clamp(30px, 5vh, 52px);
  position: relative;
  overflow: hidden;
}

/* faint helix wash, echoes the homepage ghost numeral */
.woocommerce-shop .vault-page-hero::after,
.tax-product_cat .vault-page-hero::after,
.post-type-archive-product .vault-page-hero::after {
  content: "";
  position: absolute;
  right: -60px;
  top: -40px;
  width: 380px;
  height: 380px;
  background:
    repeating-linear-gradient(115deg, rgba(143, 216, 206, 0.10) 0 2px, transparent 2px 16px);
  transform: rotate(-8deg);
  pointer-events: none;
}

.vault-page-hero .vault-container { position: relative; z-index: 2; }

.vault-page-title {
  color: #fff;
  font-size: clamp(34px, 5vw, 58px);
  letter-spacing: -0.02em;
  line-height: 1.02;
  margin: 6px 0 0;
}

/* eyebrow above the title, matches homepage voice */
.vault-page-hero .vault-container::before {
  content: "Research use only  /  99%+ tested purity";
  display: block;
  font-family: var(--vpr-mono);
  font-size: 11.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--vpr-teal-ink);
  margin-bottom: 12px;
}

/* breadcrumbs */
.vault-breadcrumbs,
.vault-breadcrumbs .woocommerce-breadcrumb {
  color: var(--vpr-faint);
  font-family: var(--vpr-mono);
  font-size: 12px;
  margin: 0;
}
.vault-breadcrumbs a,
.vault-breadcrumbs .woocommerce-breadcrumb a { color: var(--vpr-muted); }
.vault-breadcrumbs a:hover { color: var(--vpr-teal-ink); text-decoration: none; }

/* ---------- loop header: result count + sorting ---------- */
.woocommerce-result-count {
  color: var(--vpr-faint);
  font-family: var(--vpr-mono);
  font-size: 12.5px;
}

.woocommerce-ordering select,
.woocommerce-ordering .orderby {
  background: var(--vpr-panel);
  color: var(--vpr-ink);
  border: 1.5px solid var(--vpr-line-2);
  border-radius: 10px;
  padding: 11px 14px;
  font-family: var(--vpr-mono);
  font-size: 12.5px;
  appearance: none;
  -webkit-appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--vpr-teal-ink) 50%),
    linear-gradient(135deg, var(--vpr-teal-ink) 50%, transparent 50%);
  background-position: calc(100% - 19px) 50%, calc(100% - 13px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 40px;
}
.woocommerce-ordering select:focus { outline: none; border-color: var(--vpr-teal); }

/* ---------- product cards ---------- */
.vault-shop-main li.product,
.vault-shop-content li.product {
  background: var(--vpr-panel) !important;
  border: 1px solid var(--vpr-line-2) !important;
  border-radius: 14px !important;
  overflow: hidden;
  transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
}
.vault-shop-main li.product:hover {
  border-color: var(--vpr-teal) !important;
  transform: translateY(-4px);
  box-shadow: 0 26px 50px -30px rgba(0, 0, 0, 0.85);
}

/* image plate — keeps generated vials on a consistent light plate */
.vault-shop-main li.product img {
  border-radius: 10px;
  background: #eef2f4;
  transition: transform 0.6s cubic-bezier(0.2, 0.6, 0.2, 1);
}
.vault-shop-main li.product:hover img { transform: scale(1.04); }

/* product title */
.vault-shop-main li.product .woocommerce-loop-product__title,
.vault-shop-main li.product h2,
.vault-shop-main li.product h3 {
  color: var(--vpr-ink) !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em;
}
.vault-shop-main li.product a { text-decoration: none; }

/* price in mono, teal — reads as data, matches homepage */
.vault-shop-main li.product .price,
.vault-shop-main li.product .price .amount,
.vault-shop-main li.product .woocommerce-Price-amount {
  color: var(--vpr-teal-ink) !important;
  font-family: var(--vpr-mono) !important;
  font-size: 18px !important;
  font-weight: 500 !important;
}
.vault-shop-main li.product .price del { color: var(--vpr-faint) !important; opacity: 0.7; }
.vault-shop-main li.product .price ins { text-decoration: none; }

/* star ratings */
.vault-shop-main li.product .star-rating { color: var(--vpr-teal); }
.vault-shop-main li.product .star-rating::before { color: rgba(143, 216, 206, 0.25); }

/* volume tier chips (from the VPR loop snippet) sit on dark now */
.vault-shop-main .vpr-chips-loop .vpr-chip {
  border-color: var(--vpr-line);
  color: var(--vpr-teal-ink);
}
.vault-shop-main .vpr-chips-loop .vpr-chip-on {
  background: var(--vpr-teal-deep, #2A9D8F);
  border-color: var(--vpr-teal-deep, #2A9D8F);
  color: #04201c;
}

/* buttons — add to cart AND the catalog-only state */
.vault-shop-main li.product .button,
.vault-shop-main li.product .add_to_cart_button {
  background: var(--vpr-teal-deep, #2A9D8F) !important;
  color: #04201c !important;
  border: 0 !important;
  border-radius: 10px !important;
  font-weight: 800 !important;
  font-size: 14px !important;
  padding: 12px 18px !important;
  transition: background 0.2s, transform 0.1s;
}
.vault-shop-main li.product .button:hover { background: #33b5a3 !important; }
.vault-shop-main li.product .button:active { transform: scale(0.98); }

/* catalog-mode ("Catalog Only") — quiet, outlined, clearly non-interactive.
   Live markup is <span class="vp-catalog-notice button">, so it must beat the
   .button rule above: same specificity, declared later. */
.vault-shop-main li.product .vp-catalog-notice,
.vault-shop-main li.product .button[disabled],
.vault-shop-main li.product .vp-catalog-only,
.vault-shop-main li.product .catalog-only,
.vault-shop-main li.product .button.disabled {
  background: transparent !important;
  color: var(--vpr-muted) !important;
  border: 1.5px solid var(--vpr-line-2) !important;
  font-family: var(--vpr-mono) !important;
  font-weight: 400 !important;
  font-size: 12.5px !important;
  letter-spacing: 0.04em;
  cursor: default;
}

/* products with no featured image: give them a branded placeholder plate
   instead of a blank white void */
.vault-shop-main li.product:not(.has-post-thumbnail) .woocommerce-loop-product__link::before {
  content: "VAULT";
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  border-radius: 10px;
  margin-bottom: 12px;
  background:
    radial-gradient(120% 90% at 50% 25%, #22375c, #16243d);
  border: 1px solid var(--vpr-line-2);
  color: rgba(143, 216, 206, 0.32);
  font-family: var(--vpr-mono);
  font-size: 13px;
  letter-spacing: 0.3em;
}

/* ---------- sidebar ---------- */
.vault-shop-sidebar,
.vault-shop-sidebar .widget {
  background: transparent;
  color: var(--vpr-muted);
}
.vault-shop-sidebar .widget-title,
.vault-shop-sidebar h2,
.vault-shop-sidebar h3 {
  color: var(--vpr-ink);
  font-family: var(--vpr-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 500;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--vpr-line);
  margin-bottom: 14px;
}
.vault-shop-sidebar a { color: var(--vpr-muted); }
.vault-shop-sidebar a:hover { color: var(--vpr-teal-ink); text-decoration: none; }
.vault-shop-sidebar li { border-bottom: 1px solid var(--vpr-line-2); padding: 8px 0; }
.vault-shop-sidebar .count { color: var(--vpr-faint); font-family: var(--vpr-mono); font-size: 11px; }

/* price filter slider, if present */
.vault-shop-sidebar .ui-slider { background: var(--vpr-line-2); }
.vault-shop-sidebar .ui-slider .ui-slider-range { background: var(--vpr-teal-deep, #2A9D8F); }
.vault-shop-sidebar .ui-slider .ui-slider-handle { background: var(--vpr-teal-ink); border: 0; }

/* ---------- pagination ---------- */
.woocommerce-pagination ul,
.woocommerce-pagination ul li { border: 0 !important; }
.woocommerce-pagination ul li a,
.woocommerce-pagination ul li span {
  background: var(--vpr-panel);
  color: var(--vpr-muted);
  border: 1px solid var(--vpr-line-2) !important;
  border-radius: 9px;
  font-family: var(--vpr-mono);
  font-size: 13px;
  margin: 0 3px;
  transition: 0.2s;
}
.woocommerce-pagination ul li a:hover {
  border-color: var(--vpr-teal) !important;
  color: var(--vpr-ink);
  background: var(--vpr-panel);
}
.woocommerce-pagination ul li span.current {
  background: var(--vpr-teal-deep, #2A9D8F) !important;
  border-color: var(--vpr-teal-deep, #2A9D8F) !important;
  color: #04201c;
}

/* ---------- woo notices on dark ---------- */
.woocommerce-shop .woocommerce-message,
.woocommerce-shop .woocommerce-info,
.tax-product_cat .woocommerce-info {
  background: var(--vpr-panel);
  color: var(--vpr-ink);
  border-top-color: var(--vpr-teal);
}

/* ---------- no-results state ---------- */
.woocommerce-no-products-found,
.woocommerce-info {
  color: var(--vpr-muted);
}

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .vault-shop-wrapper { padding-bottom: 64px; }
  .vault-page-hero .vault-container::before { font-size: 10.5px; letter-spacing: 0.18em; }
}
@media (prefers-reduced-motion: reduce) {
  .vault-shop-main li.product,
  .vault-shop-main li.product img { transition: none !important; }
  .vault-shop-main li.product:hover { transform: none; }
  .vault-shop-main li.product:hover img { transform: none; }
}

/* catalog-only notice must NOT light up like a real CTA on hover */
.vault-shop-main li.product .vp-catalog-notice:hover,
.vault-shop-content li.product .vp-catalog-notice:hover {
  background: transparent !important;
  color: var(--vpr-muted) !important;
}

/* ============================================================
   VPR SHOP v2 — FULL-BLEED product image override
   v2 product art is a navy studio plate that IS the card colour,
   so the image must fill the tile edge to edge. Overrides the
   theme's background:#f9fafb + 16px padding (the old two-tone box)
   and the earlier light-plate rule above.
   ============================================================ */
.vault-shop-main li.product img,
.vault-shop-content li.product img {
  background: transparent !important;
  padding: 0 !important;
  width: 100% !important;
  height: auto !important;
  display: block !important;
  border-radius: 0 !important;
  margin: 0 0 14px !important;
}
.vault-shop-main li.product .woocommerce-loop-product__link,
.vault-shop-content li.product .woocommerce-loop-product__link { display: block !important; }


/* ============================================================
   VPR STORE DARK HEADER
   The homepage already runs a dark header (transparent over the hero
   film). Every store page was still serving the WHITE header + white
   nav, which clashed hard against the new dark shop body. This gives
   the store a SOLID dark header using the same treatment as home,
   including the logo invert so the navy wordmark stays visible.
   Blog + static pages keep the light header (light content).
   ============================================================ */
body:is(.woocommerce-shop,.post-type-archive-product,.tax-product_cat,.tax-product_tag,.single-product,.woocommerce-cart,.woocommerce-checkout,.woocommerce-account) .vault-header,
body:is(.woocommerce-shop,.post-type-archive-product,.tax-product_cat,.tax-product_tag,.single-product,.woocommerce-cart,.woocommerce-checkout,.woocommerce-account) .vault-nav {
  background-color: #0e1a30 !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
  box-shadow: none !important;
}
body:is(.woocommerce-shop,.post-type-archive-product,.tax-product_cat,.tax-product_tag,.single-product,.woocommerce-cart,.woocommerce-checkout,.woocommerce-account) .vault-logo img { filter: brightness(0) invert(1) !important; }
body:is(.woocommerce-shop,.post-type-archive-product,.tax-product_cat,.tax-product_tag,.single-product,.woocommerce-cart,.woocommerce-checkout,.woocommerce-account) .vault-logo-vault { color: #fff !important; }
body:is(.woocommerce-shop,.post-type-archive-product,.tax-product_cat,.tax-product_tag,.single-product,.woocommerce-cart,.woocommerce-checkout,.woocommerce-account) .vault-logo-peptides { color: var(--vpr-teal-ink) !important; }
body:is(.woocommerce-shop,.post-type-archive-product,.tax-product_cat,.tax-product_tag,.single-product,.woocommerce-cart,.woocommerce-checkout,.woocommerce-account) .vault-nav a { color: var(--vpr-muted) !important; }
body:is(.woocommerce-shop,.post-type-archive-product,.tax-product_cat,.tax-product_tag,.single-product,.woocommerce-cart,.woocommerce-checkout,.woocommerce-account) .vault-nav a:hover { color: #fff !important; }
body:is(.woocommerce-shop,.post-type-archive-product,.tax-product_cat,.tax-product_tag,.single-product,.woocommerce-cart,.woocommerce-checkout,.woocommerce-account) .vault-nav .current-menu-item > a { color: var(--vpr-teal-ink) !important; }
body:is(.woocommerce-shop,.post-type-archive-product,.tax-product_cat,.tax-product_tag,.single-product,.woocommerce-cart,.woocommerce-checkout,.woocommerce-account) .vault-icon,
body:is(.woocommerce-shop,.post-type-archive-product,.tax-product_cat,.tax-product_tag,.single-product,.woocommerce-cart,.woocommerce-checkout,.woocommerce-account) .vault-account-link,
body:is(.woocommerce-shop,.post-type-archive-product,.tax-product_cat,.tax-product_tag,.single-product,.woocommerce-cart,.woocommerce-checkout,.woocommerce-account) .vault-cart-icon { color: #cfe0e6 !important; }
body:is(.woocommerce-shop,.post-type-archive-product,.tax-product_cat,.tax-product_tag,.single-product,.woocommerce-cart,.woocommerce-checkout,.woocommerce-account) .vault-search-form input {
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.12) !important;
  color: var(--vpr-ink) !important;
}
body:is(.woocommerce-shop,.post-type-archive-product,.tax-product_cat,.tax-product_tag,.single-product,.woocommerce-cart,.woocommerce-checkout,.woocommerce-account) .vault-search-form input::placeholder { color: var(--vpr-faint) !important; }
body:is(.woocommerce-shop,.post-type-archive-product,.tax-product_cat,.tax-product_tag,.single-product,.woocommerce-cart,.woocommerce-checkout,.woocommerce-account) .vault-menu-toggle .vault-hamburger span { background: #cfe0e6 !important; }


/* ================= VPR CARD 360 (v4 — 2026-08) =================
   Hover turntable overlay for shop / category / tag product cards.
   Still image is the default and the only thing shown when the video
   is absent, still loading, or prefers-reduced-motion is set.
   Revert: delete this block.
================================================================ */
.vpr-360 {
  position: relative;
  display: block;
  overflow: hidden;
  line-height: 0;
}
.vpr-360 img {
  display: block;
  width: 100%;
  height: auto;
}
.vpr-360-vid {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s ease;
  border-radius: inherit;
}
.vpr-360.is-playing .vpr-360-vid { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .vpr-360-vid { display: none !important; }
}

/* ==========================================================================
   VPR PDP  —  product-page buy module  (2026-08-05, review round applied)
   APPEND this whole block to the END of the ENQUEUED stylesheet: css/main.css
   Pairs with pdp-append.js (append to the END of js/main.js).

   REVERT: delete everything from this banner down to the "END VPR PDP"
   banner at the bottom of the file. No other file is touched.

   CASCADE NOTE THAT GOVERNS THIS WHOLE FILE
   WordPress prints the Customizer's "Additional CSS" in
   <style id="wp-custom-css"> at wp_head priority 101 — i.e. AFTER every
   enqueued stylesheet, this one included. That file is
   Theme/FULL-REPLACEMENT-CSS-v3.css (504 lines) and it uses !important
   liberally. Anything here that has to beat it therefore needs BOTH
   !important AND higher specificity, because equal-specificity !important
   ties are decided by source order, which we lose. That is why the reclaim
   rules and the single-column rule below are written as
   `html body.single-product …` / `body.single-product …`.

   Contents
     0  new tokens (light-mode-safe teal)
     1  PRE-EXISTING MOBILE BUG FIXES (validated 2026-08-05 in a 390px harness)
     2  .vpr-pdp-head        chips + title + spec sub + rating (sits on white)
     3  gallery frame, height cap, CoA pin, CoA dialog
     4  .vpr-pdp-buy         dark "vault" buy panel
     5  bundle cards (2x2 mobile / 4-across desktop)
     6  CTA stack, trust row, free-shipping box, RUO legend
     7  qty stepper (post-catalog-flip only)
     8  sticky add-to-cart bar (post-catalog-flip only)
     9  responsive + reduced motion
    10  compliance override: blanket purity claim in the page-hero eyebrow
   ========================================================================== */

/* ---------- 0. tokens ------------------------------------------------------
   The --vpr-* palette is already declared earlier in main.css. Only the
   light-mode-safe teal is new: --vpr-teal (#2A9D8F) is 2.9:1 on white and
   fails AA for the 10.5px chip text in .vpr-pdp-head, which sits on the
   PDP's white background. #17635b is 6.3:1.
   --vpr-faint (#6f849c) is ~4.2:1 on the panel insets and ~3.6:1 on the bare
   panel, so it is used for DECORATION ONLY. Every label that carries
   information — price bases, cell headings, card captions — uses
   --vpr-muted (#9fb2c6, ~7.4:1) instead. */
:root {
  --vpr-teal-ink-lt: #17635b;
  --vpr-line-lt: rgba(23, 99, 91, 0.26);
  --vpr-ink-lt: #1b2a4a;
  --vpr-muted-lt: #4b5563;
}

/* ---------- 1. PRE-EXISTING MOBILE BUG FIXES ------------------------------
   Two bugs measured on the live PDP before any of this module existed:
   (a) 63px horizontal overflow at 390px. Grid items default to
       min-width:auto, so .woocommerce-product-gallery (min-content 300px)
       could not shrink into its 294px column and forced the 1fr track out.
   (b) Two product tabs were CLIPPED, not scrollable (ul.tabs computes
       overflow-x:hidden), so "Storage & Handling" and "Reviews" were
       unreachable on a phone.
   Both fixes were verified before/after: scrollWidth 453 -> 390, offending
   elements 94 -> 0, tabs reachable 2 of 4 -> 4 of 4. Keep these even if the
   rest of this block is ever reverted. */

.single-product div.product > * { min-width: 0; }
.single-product .woocommerce-product-gallery,
.single-product .woocommerce-product-gallery__wrapper,
.single-product .woocommerce-product-gallery__image { min-width: 0; max-width: 100%; }
.single-product .woocommerce-product-gallery img { width: 100%; height: auto; max-width: 100%; display: block; }

/* (c) Reclaim the 64px nested inset on phones. This block MUST carry both
   !important and extra specificity: FULL-REPLACEMENT-CSS-v3.css:301-307 sets
   `.single-product main.site-main { padding-left:24px !important }` and
   `.single-product .content-area { padding: 0 24px }` from the Customizer,
   which is printed after this file. Without the specificity bump the reclaim
   is dead code and div.product stays at 294px/262px on a 390px phone instead
   of the ~358px every width figure in DECISIONS assumes. A media query adds
   no specificity, so the media query alone changes nothing. */
@media (max-width: 560px) {
  html body.single-product .content-area {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  html body.single-product main.site-main {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  html body.single-product div.product {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

@media (max-width: 768px) {
  .single-product .woocommerce-tabs { min-width: 0; max-width: 100%; }
  .single-product .woocommerce-tabs ul.tabs {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 6px;
    overflow: visible !important;
    margin: 0 0 1rem !important;
    padding: 0 !important;
    width: 100%;
  }
  /* the theme's clearfix pseudo-elements become stray grid cells */
  .single-product .woocommerce-tabs ul.tabs::before,
  .single-product .woocommerce-tabs ul.tabs::after { display: none !important; }
  .single-product .woocommerce-tabs ul.tabs li {
    margin: 0 !important;
    min-width: 0;
    max-width: 100%;
    text-align: center;
  }
  .single-product .woocommerce-tabs ul.tabs li a {
    display: block;
    padding: 12px 8px;
    min-height: 44px;
    white-space: normal;
    overflow-wrap: anywhere;
    font-size: 0.85rem;
  }
}

/* Woo image zoom: the video names it as a defect twice and Vault does not
   currently load it. Defensive kill so it can never appear on this page. */
.single-product .zoomImg { display: none !important; }

/* ---------- 2. .vpr-pdp-head  (chips + H1 + spec line + rating) -----------
   Built by JS. On <=900px it is moved ABOVE the gallery so the buyer gets
   "is this the right product" confirmation before a 300px image; on >900px
   it becomes the first child of .summary (same visual position as today).
   Styled for the PDP's WHITE background - see the commented dark-mode
   variant at the end of this section if the PDP is ever darkened. */
.vpr-pdp-head { min-width: 0; margin: 0 0 18px; }
.single-product .summary > .vpr-pdp-head { margin-bottom: 14px; }

.vpr-pdp-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 12px;
  min-width: 0;
}
.vpr-pdp-chip {
  font-family: var(--vpr-mono, ui-monospace, Menlo, Consolas, monospace);
  font-size: 10.5px;
  line-height: 1.5;
  letter-spacing: 0.06em;
  color: var(--vpr-teal-ink-lt);
  border: 1px solid var(--vpr-line-lt);
  border-radius: 20px;
  padding: 4px 10px;
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}
.vpr-pdp-chip-ruo {
  background: var(--vpr-teal-ink-lt);
  border-color: var(--vpr-teal-ink-lt);
  color: #fff;
  font-weight: 600;
}

.vpr-pdp-head .product_title,
.vpr-pdp-head h1.product_title.entry-title {
  font-size: clamp(22px, 6.4vw, 34px);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--vpr-ink-lt);
  margin: 0 0 8px;
  overflow-wrap: anywhere;
}
.vpr-pdp-sub {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  font-family: var(--vpr-mono, ui-monospace, Menlo, Consolas, monospace);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--vpr-muted-lt);
  margin: 0 0 8px;
  min-width: 0;
}
.vpr-pdp-sub:empty { display: none; }
/* Availability colour must track the actual state. Woo emits p.stock for BOTH
   states, so an unscoped affirmative colour printed "Out of stock" in the
   module's positive accent, directly above a priced bundle grid. */
.vpr-pdp-sub .stock { margin: 0; font-size: 12.5px; }
.vpr-pdp-sub .stock.in-stock { color: var(--vpr-teal-ink-lt) !important; }
.vpr-pdp-sub .stock.out-of-stock,
.vpr-pdp-sub .stock.available-on-backorder { color: var(--vpr-muted-lt) !important; font-weight: 600; }
.vpr-pdp-head .woocommerce-product-rating { margin: 0; }

/* If the PDP is ever converted to the dark vault theme, uncomment:
.vpr-pdp-head .product_title { color: var(--vpr-ink); }
.vpr-pdp-sub { color: var(--vpr-muted); }
.vpr-pdp-chip { color: var(--vpr-teal-ink); border-color: var(--vpr-line); }
.vpr-pdp-chip-ruo { background: var(--vpr-teal); border-color: var(--vpr-teal); color: #04201c; }
*/

/* ---------- 3. gallery frame + CoA pin + CoA dialog ----------------------- */

/* position:relative on BOTH boxes. The JS appends the pin to the INNER
   wrapper, because the wrapper is capped to 320px and centred below 901px
   while the outer gallery box stays full-column-width — a pin positioned
   against the outer box detaches from the artwork by ~19px at 390px and up to
   ~148px at 768px, leaving a frosted pill floating on the page background.
   The outer relative is kept as the fallback when the wrapper is absent. */
.single-product .woocommerce-product-gallery { position: relative; }
.single-product .woocommerce-product-gallery__wrapper {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: var(--vpr-navy, #111f38);
}
/* reserve the box before the 1200x1200 render decodes, so the price and the
   SELECT QUANTITY label do not jump after first paint */
.single-product .woocommerce-product-gallery__image { aspect-ratio: 1 / 1; }
.single-product .woocommerce-product-gallery__image > a { display: block; cursor: default; }

/* CoA pin — bottom-right (Polar's placement, the one thing the video calls
   "perfect"), sitting in the dead space of the v4 renders. 44px minimum.
   Only ever rendered when a real certificate document exists. */
.vpr-pdp-coa-pin {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 44px;
  min-height: 44px;
  padding: 0 14px;
  border: 1.5px solid var(--vpr-teal, #2A9D8F);
  border-radius: 12px;
  background: rgba(10, 18, 33, 0.72);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: var(--vpr-mint, #F0F7F6);
  font-family: var(--vpr-mono, ui-monospace, Menlo, Consolas, monospace);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(42, 157, 143, 0.18);
  transition: background 0.2s, border-color 0.2s;
}
.vpr-pdp-coa-pin:hover,
.vpr-pdp-coa-pin:focus-visible {
  background: var(--vpr-teal, #2A9D8F);
  color: #04201c;
  text-decoration: none;
}

/* native <dialog>: the UA owns scroll lock + focus containment, which avoids
   the iOS body{overflow:hidden} bug that loses scroll position */
.vpr-pdp-coa-modal {
  width: min(560px, calc(100vw - 32px));
  max-height: min(80vh, 80svh);
  padding: 0;
  border: 1px solid var(--vpr-line-2, rgba(255, 255, 255, 0.08));
  border-radius: 16px;
  background: var(--vpr-panel, #1b2c49);
  color: var(--vpr-ink, #eaf1f4);
  overflow: auto;
  overscroll-behavior: contain;
}
.vpr-pdp-coa-modal::backdrop { background: rgba(6, 12, 22, 0.72); }
.vpr-pdp-coa-modal-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 18px 12px;
  border-bottom: 1px solid var(--vpr-line-2, rgba(255, 255, 255, 0.08));
}
.vpr-pdp-coa-modal-ttl {
  font-family: var(--vpr-mono, ui-monospace, Menlo, Consolas, monospace);
  font-size: 12.5px;
  line-height: 1.5;
  letter-spacing: 0.06em;
  color: var(--vpr-teal-ink, #8fd8ce);
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
}
.vpr-pdp-coa-x {
  flex: none;
  width: 44px;
  height: 44px;
  margin: -10px -8px 0 0;
  background: none;
  border: 0;
  border-radius: 10px;
  color: var(--vpr-muted, #9fb2c6);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
}
.vpr-pdp-coa-x:hover { color: #fff; background: rgba(255, 255, 255, 0.07); }
.vpr-pdp-coa-modal-body { padding: 16px 18px; font-size: 14px; line-height: 1.6; }
.vpr-pdp-coa-modal-body h3,
.vpr-pdp-coa-modal-body h4 { color: var(--vpr-ink, #eaf1f4); margin: 0 0 8px; font-size: 15px; }
.vpr-pdp-coa-modal-body p,
.vpr-pdp-coa-modal-body li,
.vpr-pdp-coa-modal-body td,
.vpr-pdp-coa-modal-body th { color: var(--vpr-muted, #9fb2c6); }
.vpr-pdp-coa-modal-body table { width: 100%; border-collapse: collapse; font-family: var(--vpr-mono, ui-monospace, Menlo, Consolas, monospace); font-size: 12.5px; }
.vpr-pdp-coa-modal-body th,
.vpr-pdp-coa-modal-body td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--vpr-line-2, rgba(255, 255, 255, 0.08)); }
.vpr-pdp-coa-modal-body a { color: var(--vpr-teal-ink, #8fd8ce); }
.vpr-pdp-coa-modal-body img { max-width: 100%; height: auto; display: block; }
.vpr-pdp-coa-modal-body .button {
  display: inline-block;
  background: var(--vpr-teal, #2A9D8F) !important;
  color: #04201c !important;
  border: 0 !important;
  border-radius: 10px !important;
  font-family: var(--vpr-mono, ui-monospace, Menlo, Consolas, monospace) !important;
  font-size: 12.5px !important;
  letter-spacing: 0.06em;
  padding: 12px 18px !important;
  min-height: 44px;
  text-decoration: none;
}
.vpr-pdp-coa-foot {
  padding: 0 18px 18px;
  font-size: 12px;
  line-height: 1.55;
  color: var(--vpr-muted, #9fb2c6);
}
.vpr-pdp-coa-foot a { color: var(--vpr-teal-ink, #8fd8ce); }

/* ---------- 4. .vpr-pdp-buy  (the dark vault buy panel) ------------------- */
.vpr-pdp-buy {
  margin: 0 0 22px;
  padding: 20px 18px 18px;
  min-width: 0;
  background: var(--vpr-panel, #1b2c49);
  border: 1px solid var(--vpr-line-2, rgba(255, 255, 255, 0.08));
  border-radius: 16px;
  color: var(--vpr-ink, #eaf1f4);
}
.vpr-pdp-buy > * { min-width: 0; }

/* Woo's own price node, moved inside the panel. It always states the
   single-vial price; the tier figures live in .vpr-pdp-static below it. */
.vpr-pdp-buy p.price {
  margin: 0 !important;
  font-family: var(--vpr-mono, ui-monospace, Menlo, Consolas, monospace) !important;
  font-size: clamp(26px, 7vw, 32px) !important;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.vpr-pdp-buy p.price,
.vpr-pdp-buy p.price .amount,
.vpr-pdp-buy p.price bdi,
.vpr-pdp-buy p.price .woocommerce-Price-amount,
.vpr-pdp-buy p.price .woocommerce-Price-currencySymbol { color: #fff !important; }
.vpr-pdp-buy p.price del,
.vpr-pdp-buy p.price del .woocommerce-Price-amount { color: var(--vpr-muted, #9fb2c6) !important; font-size: 0.6em; }
.vpr-pdp-buy p.price ins { text-decoration: none; }

.vpr-pdp-unit {
  font-family: var(--vpr-mono, ui-monospace, Menlo, Consolas, monospace);
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: var(--vpr-teal-ink, #8fd8ce);
  margin: 6px 0 0;
}

.vpr-pdp-sum {
  display: grid;
  grid-template-columns: minmax(3.5rem, 0.5fr) minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1.4fr);
  gap: 1px;
  margin: 12px 0 0;
  background: var(--vpr-line-2, rgba(255, 255, 255, 0.08));
  border: 1px solid var(--vpr-line-2, rgba(255, 255, 255, 0.08));
  border-radius: 12px;
  overflow: hidden;
}
.vpr-pdp-sum[hidden] { display: none; }
.vpr-pdp-cell { background: rgba(10, 18, 33, 0.42); padding: 10px 10px 11px; min-width: 0; }
.vpr-pdp-cell span {
  display: block;
  font-family: var(--vpr-mono, ui-monospace, Menlo, Consolas, monospace);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--vpr-muted, #9fb2c6);
  margin: 0 0 4px;
}
.vpr-pdp-cell b {
  display: block;
  font-family: var(--vpr-mono, ui-monospace, Menlo, Consolas, monospace);
  font-size: 14px;
  font-weight: 600;
  color: var(--vpr-ink, #eaf1f4);
  font-variant-numeric: tabular-nums;
  overflow-wrap: normal;
  word-break: normal;
}
.vpr-pdp-cell-save b { color: var(--vpr-teal-ink, #8fd8ce); }

/* ---------- 5. bundle cards ---------------------------------------------- */
.vpr-pdp-bundles { margin: 18px 0 0; }
.vpr-pdp-bundles-top {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 12px;
  margin: 0 0 10px;
  min-width: 0;
}
.vpr-pdp-bundles-lbl {
  font-family: var(--vpr-mono, ui-monospace, Menlo, Consolas, monospace);
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--vpr-teal-ink, #8fd8ce);
}
.vpr-pdp-bundles-mark {
  font-family: var(--vpr-mono, ui-monospace, Menlo, Consolas, monospace);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--vpr-muted, #9fb2c6);
}
.vpr-pdp-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.vpr-pdp-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  min-height: 84px;
  /* NO reserved padding-top: the badge is a normal flex item that bleeds to
     the card edges with negative margins, so the card GROWS if the badge
     wraps. The previous absolutely-positioned badge against a fixed 22-24px
     reservation overlapped the quantity label as soon as its text took two
     lines, which happened at 320-390px on the highlighted card. */
  padding: 12px;
  border: 1.5px solid var(--vpr-line-2, rgba(255, 255, 255, 0.08));
  border-radius: 12px;
  background: rgba(10, 18, 33, 0.42);
  cursor: pointer;
  overflow: hidden;
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(42, 157, 143, 0.18);
  transition: border-color 0.2s, background 0.2s;
}
.vpr-pdp-radio {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  pointer-events: none;
}
.vpr-pdp-card:focus-within { outline: 2px solid var(--vpr-teal-ink, #8fd8ce); outline-offset: 2px; }
/* Selected state is driven by the JS-applied .vpr-pdp-sel class, NOT by
   :has(:checked). Deliberate: an unsupported :has() inside a comma-separated
   selector list invalidates the WHOLE rule in older engines, which would
   silently kill the selected state. The cards only exist when the JS ran, so
   the class is always available. Never drive selection from :hover either —
   on iOS :hover sticks after a tap and two cards would look selected.

   It is NEUTRAL on purpose. It means "this is the current quantity", not
   "this is the best deal": a teal fill on the pre-selected 1-vial card gave
   the worst-value option more emphasis than the BEST VALUE ribbon. */
.vpr-pdp-card.vpr-pdp-sel {
  border-color: rgba(255, 255, 255, 0.42);
  background: rgba(255, 255, 255, 0.05);
}
/* a tier above the stock maximum must not look selectable */
.vpr-pdp-card-off {
  opacity: 0.45;
  pointer-events: none;
  cursor: default;
}
.vpr-pdp-card-badge {
  display: block;
  margin: -12px -12px 6px;
  padding: 4px 8px;
  background: rgba(255, 255, 255, 0.05);
  font-family: var(--vpr-mono, ui-monospace, Menlo, Consolas, monospace);
  font-size: 9px;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--vpr-muted, #9fb2c6);
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
}
.vpr-pdp-card-hot .vpr-pdp-card-badge { background: rgba(42, 157, 143, 0.24); color: var(--vpr-mint, #F0F7F6); }
.vpr-pdp-card-best .vpr-pdp-card-badge { background: var(--vpr-teal, #2A9D8F); color: #04201c; font-weight: 600; }
.vpr-pdp-card-qty {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--vpr-ink, #eaf1f4);
}
.vpr-pdp-card.vpr-pdp-sel .vpr-pdp-card-qty::before {
  content: "\2713\00a0";
  color: var(--vpr-teal-ink, #8fd8ce);
}
/* NB: no white-space:nowrap on any price line — long totals must wrap, not
   blow the grid track out (that is how the July overflow bug happened). */
.vpr-pdp-card-each,
.vpr-pdp-card-total,
.vpr-pdp-card-save,
.vpr-pdp-card-cap {
  font-family: var(--vpr-mono, ui-monospace, Menlo, Consolas, monospace);
  font-size: 11.5px;
  line-height: 1.45;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
  min-width: 0;
}
.vpr-pdp-card-each { color: #fff; }
/* the struck figure and the label that identifies it. Both are information,
   so both use --vpr-muted, not the sub-AA --vpr-faint. */
.vpr-pdp-card-each s { color: var(--vpr-muted, #9fb2c6); }
.vpr-pdp-card-each i { font-style: normal; color: var(--vpr-muted, #9fb2c6); }
.vpr-pdp-card-total { color: var(--vpr-ink, #eaf1f4); font-weight: 600; }
.vpr-pdp-card-save { color: var(--vpr-teal-ink, #8fd8ce); }
/* the caption is the ONLY non-numeric reason to step up a tier, so it is
   never hidden — not at 320px either. It was the merchandising payload, not
   "merchandising nuance". */
.vpr-pdp-card-cap { color: var(--vpr-muted, #9fb2c6); font-size: 10.5px; margin-top: 2px; }

/* THE canonical volume-pricing disclosure — one statement, in-path, never
   collapsed, never behind a link, never pushed below the purchase decision */
.vpr-pdp-note {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--vpr-muted, #9fb2c6);
  margin: 10px 0 0;
  display: block !important;
}

/* incremental-savings nudge — dollars only, never "free vials". Sits BELOW
   the CTA so it cannot compete with it. */
.vpr-pdp-upsell {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin: 14px 0 0;
  padding: 11px 14px;
  border: 1px dashed var(--vpr-line, rgba(143, 216, 206, 0.16));
  border-radius: 12px;
  background: rgba(10, 18, 33, 0.35);
  min-width: 0;
}
.vpr-pdp-upsell[hidden] { display: none; }
.vpr-pdp-upsell-t {
  flex: 1 1 240px;
  min-width: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--vpr-mint, #F0F7F6);
  font-variant-numeric: tabular-nums;
  margin: 0;
  overflow-wrap: anywhere;
}
.vpr-pdp-upsell-b {
  flex: none;
  min-height: 44px;
  padding: 0 14px;
  border: 1.5px solid var(--vpr-teal, #2A9D8F);
  border-radius: 10px;
  background: transparent;
  color: var(--vpr-mint, #F0F7F6);
  font-family: var(--vpr-mono, ui-monospace, Menlo, Consolas, monospace);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(42, 157, 143, 0.18);
}
.vpr-pdp-upsell-b:hover { background: var(--vpr-teal, #2A9D8F); color: #04201c; }

/* ---------- 6. CTA stack / trust row / RUO legend ------------------------- */
.vpr-pdp-cta { margin: 16px 0 0; min-width: 0; }
.vpr-pdp-cta form.cart { display: block; margin: 0; }
.vpr-pdp-cta form.cart::before,
.vpr-pdp-cta form.cart::after { display: none; }

/* Woo's real button, once VP_CATALOG_MODE is lifted. The only element on the
   page that reads as a button. */
.vpr-pdp-cta .single_add_to_cart_button,
.vpr-pdp-cta button.button[name="add-to-cart"] {
  flex: 1 1 auto;
  width: 100%;
  min-height: 52px;
  background: var(--vpr-teal, #2A9D8F) !important;
  color: #04201c !important;
  border: 0 !important;
  border-radius: 12px !important;
  font-family: var(--vpr-mono, ui-monospace, Menlo, Consolas, monospace) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 14px 18px !important;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(42, 157, 143, 0.18);
  transition: background 0.2s;
}
.vpr-pdp-cta .single_add_to_cart_button:hover { background: #33b5a3 !important; }
.vpr-pdp-cta .single_add_to_cart_button:active { transform: scale(0.995); }

/* catalog-mode plate: deliberate, quiet, obviously non-interactive.
   Deliberately NOT matching .woocommerce-info / .woocommerce-message: those
   are generic and the JS no longer adopts them, so styling them here would
   dash-plate an unrelated notice that happens to land in the adopted form. */
.vpr-pdp-catalog,
.vpr-pdp-cta .vp-catalog-notice,
.vpr-pdp-cta .vp-catalog-only,
.vpr-pdp-cta .catalog-only {
  display: block;
  width: 100%;
  margin: 0;
  padding: 14px 16px !important;
  background: rgba(10, 18, 33, 0.45) !important;
  border: 1.5px dashed var(--vpr-line-2, rgba(255, 255, 255, 0.08)) !important;
  border-radius: 12px !important;
  color: var(--vpr-muted, #9fb2c6) !important;
  font-family: var(--vpr-mono, ui-monospace, Menlo, Consolas, monospace) !important;
  font-size: 12.5px !important;
  font-weight: 400 !important;
  line-height: 1.55;
  letter-spacing: 0.03em;
  text-align: left;
  text-transform: none;
  cursor: default;
}
.vpr-pdp-cta .vp-catalog-notice strong,
.vpr-pdp-catalog strong { color: var(--vpr-ink, #eaf1f4); }
.vpr-pdp-cta .vp-catalog-notice:hover { background: rgba(10, 18, 33, 0.45) !important; color: var(--vpr-muted, #9fb2c6) !important; }

/* Secondary action — a TEXT LINK, not a button. As a full-width uppercase
   teal-outlined block it was visually identical to the primary CTA sitting
   immediately above it, which is textbook CTA competition. 44px of tap
   height is kept. */
.vpr-pdp-cta2 {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-width: 0;
  min-height: 44px;
  margin: 12px 0 0;
  padding: 11px 0;
  border: 0;
  background: none;
  color: var(--vpr-teal-ink, #8fd8ce);
  font-family: var(--vpr-mono, ui-monospace, Menlo, Consolas, monospace);
  font-size: 12.5px;
  letter-spacing: 0.04em;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(42, 157, 143, 0.18);
  overflow-wrap: anywhere;
  max-width: 100%;
}
.vpr-pdp-cta2:hover,
.vpr-pdp-cta2:focus-visible { color: #fff; text-decoration: underline; }

/* RUO legend — proximate to the CTA at every breakpoint, never collapsed,
   never below 13px, never grey fine print */
.vpr-pdp-ruo {
  display: block !important;
  margin: 14px 0 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--vpr-ink, #eaf1f4);
}
.vpr-pdp-ruo b { color: #fff; letter-spacing: 0.03em; }

.vpr-pdp-trust {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 14px;
  margin: 16px 0 0;
  padding: 14px 0 0;
  border-top: 1px solid var(--vpr-line-2, rgba(255, 255, 255, 0.08));
}
.vpr-pdp-trust li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--vpr-muted, #9fb2c6);
  overflow-wrap: anywhere;
}
.vpr-pdp-trust li::before {
  content: "\25B8";
  flex: none;
  color: var(--vpr-teal-ink, #8fd8ce);
  font-size: 11px;
  line-height: 1.5;
}

.vpr-pdp-ship {
  margin: 14px 0 0;
  padding: 11px 14px;
  border-radius: 12px;
  background: rgba(42, 157, 143, 0.10);
  border: 1px solid var(--vpr-line, rgba(143, 216, 206, 0.16));
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--vpr-mint, #F0F7F6);
}

/* ---------- 7. qty stepper (only exists after the catalog flip) ----------- */
.single-product div.product form.cart .quantity.vpr-pdp-qty {
  width: auto;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: stretch;
  margin: 0 10px 0 0;
  border: 1.5px solid var(--vpr-line-2, rgba(255, 255, 255, 0.08));
  border-radius: 12px;
  overflow: hidden;
  background: rgba(10, 18, 33, 0.5);
}
/* Not scoped to .vpr-pdp-qty on purpose: the 16px rule must apply even if
   the stepper enhancement never runs. Anything smaller than 16px makes iOS
   Safari zoom the page on focus, which leaves the layout horizontally
   scrolled and reads to the user as a broken page. */
.single-product div.product .vpr-pdp-cta .quantity input.qty {
  flex: 0 0 56px;
  width: 56px;
  padding: 8px 4px;
  min-height: 44px;
  text-align: center;
  background: transparent;
  border: 0;
  color: var(--vpr-ink, #eaf1f4);
  font-family: var(--vpr-mono, ui-monospace, Menlo, Consolas, monospace);
  font-size: 16px;
  -moz-appearance: textfield;
}
.vpr-pdp-cta .quantity input.qty::-webkit-outer-spin-button,
.vpr-pdp-cta .quantity input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.vpr-pdp-step {
  width: 44px;
  min-height: 44px;
  background: transparent;
  border: 0;
  color: var(--vpr-teal-ink, #8fd8ce);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
}
.vpr-pdp-step:hover { color: #fff; background: rgba(42, 157, 143, 0.14); }
/* qty + button share a row. Driven by a JS-applied class, not :has(), for
   the same selector-list-validity reason as the bundle cards. */
.vpr-pdp-cta form.cart.vpr-pdp-hasqty { display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px; }
.vpr-pdp-cta form.cart.vpr-pdp-hasqty .quantity.vpr-pdp-qty { margin: 0; }
.single-product div.product .vpr-pdp-cta form.cart.vpr-pdp-hasqty .single_add_to_cart_button { flex: 1 1 160px; width: auto; }

/* ---------- 8. sticky add-to-cart bar ------------------------------------
   Only ever built when form.cart .single_add_to_cart_button exists in the
   DOM, so it does not render at all under VP_CATALOG_MODE and self-activates
   the day the block is removed. Its button is a PROXY that clicks Woo's own
   button — there is never a second form. */
.vpr-atc-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 720px;
  margin: 0 auto;
  padding: 10px 14px;
  padding-bottom: max(10px, env(safe-area-inset-bottom));
  background: rgba(14, 25, 45, 0.96);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--vpr-line-2, rgba(255, 255, 255, 0.08));
  transform: translateY(110%);
  transition: transform 0.28s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.vpr-atc-bar.is-on { transform: translateY(0); }
.vpr-atc-bar-l {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--vpr-mono, ui-monospace, Menlo, Consolas, monospace);
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--vpr-muted, #9fb2c6);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.vpr-atc-bar-l b { display: block; color: #fff; font-size: 13px; font-weight: 600; }
.vpr-atc-bar-cta {
  flex: none;
  min-height: 48px;
  padding: 0 18px;
  background: var(--vpr-teal, #2A9D8F);
  border: 0;
  border-radius: 12px;
  color: #04201c;
  font-family: var(--vpr-mono, ui-monospace, Menlo, Consolas, monospace);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(42, 157, 143, 0.18);
}
.vpr-atc-bar-cta:hover { background: #33b5a3; }
body.vpr-pdp-stuck { padding-bottom: calc(74px + env(safe-area-inset-bottom)); }
/* The bar is a phone affordance only. NOTE: desktop therefore has no
   persistent CTA once the catalog flips — the sticky buy column that would
   cover it is section 11(c) and it is NOT shipped (it needs a live check that
   no ancestor of .summary has overflow:hidden, or sticky silently dies). */
@media (min-width: 901px) {
  .vpr-atc-bar { display: none; }
  body.vpr-pdp-stuck { padding-bottom: 0; }
}

/* Keep currency amounts intact when the purchase column is narrow. */
@media (min-width: 901px) and (max-width: 1200px) {
  .vpr-pdp-sum { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- 9. responsive ------------------------------------------------ */
@media (max-width: 900px) {
  /* The JS re-parents .vpr-pdp-head above the gallery at this same width
     (CFG.mobileMQ). The theme only collapses div.product to one column at
     768px (FULL-REPLACEMENT-CSS-v3.css:332), so between 769 and 900px the
     head would become grid item #1 of a still-2-column grid and push the
     whole .summary buy panel to row 2 at half width — iPad Air (820px),
     iPad Pro 11" portrait (834px), any half-screen desktop window. Forcing
     the collapse here keeps the two ranges identical.
     !important + the extra `body` type selector are both required to beat
     `.single-product div.product { grid-template-columns: 1fr 1fr !important }`
     from the Customizer, which is printed after this file. */
  body.single-product div.product {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .single-product div.product > .vpr-pdp-head { grid-column: 1 / -1; }

  /* Cap the 1200x1200 square render. The cap goes on the WRAPPER width, not
     the image height, so aspect-ratio:1/1 still reserves the box before
     decode (no layout shift under the price and the bundle grid).
     svh, not vh: iOS resolves vh against the LARGE viewport, over-measuring
     by ~90px on first paint and pushing the price below the fold while the
     address bar is still expanded. The plain px value is the fallback for
     engines without svh. */
  .single-product .woocommerce-product-gallery__wrapper {
    max-width: 320px;
    max-width: min(320px, 44svh);
    margin-left: auto;
    margin-right: auto;
  }
  .vpr-pdp-buy { padding: 18px 14px 16px; }
  .vpr-pdp-sum { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .vpr-pdp-card { padding: 10px; }
  .vpr-pdp-card-badge { margin: -10px -10px 5px; font-size: 8.5px; letter-spacing: 0.05em; }
  /* .vpr-pdp-card-cap is deliberately NOT hidden here — see section 5. */
  .vpr-pdp-upsell { flex-direction: column; align-items: stretch; }
  /* flex-direction:column turns the main axis vertical, so the paragraph's
     `flex: 1 1 240px` basis would size its HEIGHT to 240px and leave ~180px
     of dead space above the button on every phone. */
  .vpr-pdp-upsell-t { flex: 0 1 auto; }
  .vpr-pdp-upsell-b { width: 100%; }
  .vpr-pdp-trust { grid-template-columns: minmax(0, 1fr); }
  .vpr-atc-bar-l { font-size: 11px; }
}

@media (min-width: 901px) {
  .vpr-pdp-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .vpr-pdp-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vpr-pdp-buy { padding: 24px 22px 20px; }
}

/* every :hover on a new control is capability-gated: on iOS :hover sticks
   after a tap, which would leave a card looking selected when it is not */
@media (hover: none) {
  .vpr-pdp-card:hover { border-color: var(--vpr-line-2, rgba(255, 255, 255, 0.08)); background: rgba(10, 18, 33, 0.42); }
  .vpr-pdp-card.vpr-pdp-sel:hover { border-color: rgba(255, 255, 255, 0.42); background: rgba(255, 255, 255, 0.05); }
}
@media (hover: hover) and (pointer: fine) {
  .vpr-pdp-card:hover { border-color: rgba(42, 157, 143, 0.5); }
  .vpr-pdp-card-off:hover { border-color: var(--vpr-line-2, rgba(255, 255, 255, 0.08)); }
}

@media (prefers-reduced-motion: reduce) {
  .vpr-atc-bar,
  .vpr-pdp-card,
  .vpr-pdp-coa-pin,
  .vpr-pdp-cta .single_add_to_cart_button,
  .vpr-pdp-cta2 { transition: none !important; }
  .vpr-pdp-cta .single_add_to_cart_button:active { transform: none; }
}

/* ---------- 10. COMPLIANCE OVERRIDE — HELD OUT OF THIS DEPLOY ----------
   A rule was authored here to replace the blanket "99%+ tested purity" claim
   that shop-css-append.css injects into every .vault-page-hero eyebrow.
   It is DELIBERATELY NOT SHIPPED: it is an unscoped, sitewide change to
   marketing copy on the shop/category/tag archives, which is Jeremy's call to
   make, not a PDP fix. See DECISIONS.md A6 and the session notes. To apply it,
   add:  .vault-page-hero .vault-container::before {
           content: "Research use only  /  Not for diagnostic or therapeutic use" !important; }
   ---------------------------------------------------------------------- */

/* ---------- 11. OPTIONAL, COMMENTED-OUT ---------------------------------
   These are deliberately inert. Uncomment only after looking at the live
   page, because each one depends on markup this build could not inspect.

   (a) The summary column already contains a legacy trust/quick-facts div and
       (possibly) a legacy amber RUO box, both hooked to
       woocommerce_before/after_add_to_cart_form — hooks that DO NOT FIRE
       under VP_CATALOG_MODE, so they are probably absent today and will
       reappear at the flip. If they duplicate the new trust row / RUO legend
       once the flip happens, kill the legacy copies here (keep the new ones:
       the RUO legend must stay adjacent to the CTA):

   .single-product .vp-product-quick-facts { display: none; }
   .single-product .summary .vp-free-shipping-notice { display: none; }
   .single-product .summary > .vp-ruo-disclaimer { display: none; }

   (b) Reclaim ~70px of the mobile fold by hiding PDP breadcrumbs and the
       page-hero eyebrow (the buy module restates all of it). Section 10 has
       already made the eyebrow text safe, so this is purely a fold decision:

   @media (max-width: 900px) {
     .single-product .vault-breadcrumbs,
     .single-product .vault-page-hero { display: none; }
   }

   (c) Desktop only: keep the buy panel in view. NOT SHIPPED — sticky dies
       silently if any ancestor of .summary has overflow:hidden, and that
       could not be checked from the mirrors. Until this ships, desktop has
       no persistent CTA after the catalog flip (the sticky bar is phone-only):

   @media (min-width: 901px) {
     .single-product div.product > .summary { position: sticky; top: 88px; align-self: start; }
   }
   ------------------------------------------------------------------------ */

/* ======================= END VPR PDP ===================================== */


/* ---------- VPR PDP — mobile source-order fix (2026-08-05, verified) -------
   The gallery carries an explicit grid-row: 1 from the theme. Explicitly
   placed grid items claim their cell BEFORE auto-placed ones, so .vpr-pdp-head
   — which JS correctly makes the FIRST DOM child of div.product on phones —
   was still painted below the gallery (head top 831px vs gallery 447px).
   Neutralising the explicit placement inside the collapse MQ lets auto-flow
   follow DOM order again. Measured at 390px: head 447 / gallery 719 / summary
   1103, zero horizontal overflow.
   Revert: delete this block.
   ------------------------------------------------------------------------- */
@media (max-width: 900px) {
  body.single-product div.product > * {
    grid-row: auto !important;
    grid-column: 1 / -1 !important;
  }
}


/* ---------- VPR PDP STAGE TURNTABLE (2026-08-05) ------------------------
   Puts the existing <slug>-360.mp4 on the product page's main image. Reuses
   the productId -> video map already embedded in the VPR CARD 360 block, so
   there is no new data and no PHP. Still image is the default; the video only
   loads on hover (desktop) or on tapping the 360 button. The CoA pin owns
   bottom-right, so the button sits bottom-left.
   Revert: delete this block (and enhanceStage() in js/main.js).
   --------------------------------------------------------------------- */
body.single-product .woocommerce-product-gallery__wrapper { position: relative; }

body.single-product .woocommerce-product-gallery__wrapper .vpr-stage-vid {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s ease;
  border-radius: inherit;
}
body.single-product .woocommerce-product-gallery__wrapper.is-playing .vpr-stage-vid { opacity: 1; }

body.single-product .vpr-stage-btn {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 3;
  min-width: 44px;
  min-height: 44px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: 600 12px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .06em;
  color: #eef4f8;
  background: rgba(10, 18, 33, .72);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 8px;
  cursor: pointer;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: border-color .2s ease, background .2s ease;
}
body.single-product .vpr-stage-btn:hover,
body.single-product .vpr-stage-btn:focus-visible {
  border-color: rgba(42, 157, 143, .75);
  background: rgba(10, 18, 33, .88);
}
body.single-product .vpr-stage-btn[aria-pressed="true"] {
  border-color: rgba(42, 157, 143, .9);
  color: #7fdccf;
}

@media (prefers-reduced-motion: reduce) {
  body.single-product .vpr-stage-vid { display: none !important; }
  body.single-product .vpr-stage-btn { display: none !important; }
}


/* ---------- VPR PDP — bundle card density trim (2026-08-05) --------------
   Jeremy: "this is good, but that's a lot of text."
   Each card was 6 lines / 173px, and the price line wrapped mid-token so the
   basis label rendered as "1– / vial". Changes:
     - the struck 1-vial price moved out of the price line onto its own quiet,
       non-wrapping line (still labelled, so it can never read as a former price)
     - per-card prose captions dropped; the badge already carries the message,
       and "Highest cost per vial" argued against the entry option.
       The span is kept but emitted EMPTY because markUnreachable() reuses it
       for "Only N available" when stock caps a tier — :empty hides it until then.
     - total and savings share one line instead of stacking.
   Revert: delete this block and the 4 template edits in js/main.js.
   --------------------------------------------------------------------- */
body.single-product .vpr-pdp-card-cap:empty { display: none; }

body.single-product .vpr-pdp-card-vs {
  display: block;
  white-space: nowrap;
  font-size: 11px;
  line-height: 1.35;
  margin-top: 2px;
  opacity: .68;
}
body.single-product .vpr-pdp-card-vs s { opacity: .9; }

/* total and savings stay stacked: at 159px they wrap anyway, and an inline
   separator then renders as a stray leading bullet on the wrapped line. */
body.single-product .vpr-pdp-card-total,
body.single-product .vpr-pdp-card-save { display: block; }
body.single-product .vpr-pdp-card-save:empty { display: none; }


/* ---------- VPR COA DOCUMENT IMAGE (2026-08-05) --------------------------
   The certificate <img> shipped with no CSS size and no intrinsic size, so it
   laid out at 0x0 — and because it carries loading="lazy", a zero-size image
   never intersects the viewport, so it never loads, so it never gains a size.
   Circular: the certificate silently never rendered. Giving it real box rules
   breaks the loop (verified: force-load decodes to 1084x1600), and the caps
   stop a full-page scan from overflowing a phone or dominating the tab.
   Revert: delete this block.
   ------------------------------------------------------------------------ */
body.single-product .vp-product-tab-coa .vp-coa-document img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 70vh;
  /* reserves layout so the lazy image can intersect the viewport at all:
     width/height:auto on a never-loaded img resolves to 0, which is what kept
     it from ever loading. Irrelevant once decoded (a capped cert is ~469px). */
  min-height: 200px;
  margin: 0 0 12px;
  border-radius: 6px;
}


/* ---------- VPR IDENTITY / COA CARDS (2026-08-06) -------------------------
   The Research Details and Certificate of Analysis panels are now rendered
   entirely by our own callbacks, so their content is fully known and can be
   safely dark-converted. The other tab panels (Storage, Reviews) still render
   arbitrary content whose text colours come from theme rules, so they are
   deliberately left alone — dark-converting those risks dark-on-dark text.
   These two therefore become self-contained dark cards matching .vpr-pdp-buy
   (#1b2c49, 16px radius) rather than the panel background changing underneath.
   Informational text uses --vpr-muted, never --vpr-faint: faint is sub-AA at
   these sizes (measured in the round-2 review).
   Revert: delete this block.
   ------------------------------------------------------------------------- */
body.single-product .vpr-identity,
body.single-product .vp-product-tab-coa {
  background: var(--vpr-panel, #1b2c49);
  color: var(--vpr-ink, #eaf1f4);
  border: 1px solid var(--vpr-line-2, rgba(255, 255, 255, .08));
  border-radius: 16px;
  padding: 22px 24px;
  margin: 4px 0 8px;
}
body.single-product .vp-product-tab-coa h2 {
  color: var(--vpr-ink, #eaf1f4);
  font-size: 18px;
  margin: 0 0 12px;
}

body.single-product .vpr-identity table + h3 { margin-top: 24px; }
body.single-product .vpr-identity-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
}
body.single-product .vpr-identity-table tr + tr th,
body.single-product .vpr-identity-table tr + tr td {
  border-top: 1px solid var(--vpr-line-2, rgba(255, 255, 255, .08));
}
body.single-product .vpr-identity-table th {
  width: 1%;
  white-space: nowrap;
  text-align: left;
  vertical-align: top;
  padding: 11px 20px 11px 0;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--vpr-muted, #9fb2c6);
}
body.single-product .vpr-identity-table td {
  vertical-align: top;
  padding: 11px 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--vpr-ink, #eaf1f4);
  overflow-wrap: anywhere;
}
body.single-product .vpr-identity-table td code {
  display: inline-block;
  font: 500 14px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: #7fdccf;
  background: rgba(42, 157, 143, .10);
  border: 1px solid rgba(42, 157, 143, .22);
  border-radius: 6px;
  padding: 3px 9px;
  overflow-wrap: anywhere;
}

body.single-product .vpr-identity-note,
body.single-product .vpr-identity-verify,
body.single-product .vp-product-tab-coa p {
  color: var(--vpr-muted, #9fb2c6);
  font-size: 13.5px;
  line-height: 1.65;
  margin: 14px 0 0;
}
body.single-product .vpr-identity a,
body.single-product .vp-product-tab-coa a {
  color: #7fdccf;
  text-decoration: underline;
  text-underline-offset: 2px;
}
body.single-product .vpr-identity a:hover,
body.single-product .vp-product-tab-coa a:hover { color: #a9e9de; }

/* the theme gives this a near-white block background; inside a dark card that
   reads as a hole punched in the panel */
body.single-product .vpr-identity .vp-desc-disclaimer,
body.single-product .vp-product-tab-coa .vp-desc-disclaimer {
  background: transparent !important;
  border: 0 !important;
  border-top: 1px solid var(--vpr-line-2, rgba(255, 255, 255, .08)) !important;
  border-radius: 0 !important;
  color: var(--vpr-muted, #9fb2c6) !important;
  font-size: 12.5px;
  font-style: normal;
  margin: 18px 0 0 !important;
  padding: 13px 0 0 !important;
}

@media (max-width: 560px) {
  body.single-product .vpr-identity,
  body.single-product .vp-product-tab-coa { padding: 18px 16px; border-radius: 12px; }
  /* stack label over value: a nowrap label column eats a 320px viewport */
  body.single-product .vpr-identity-table th,
  body.single-product .vpr-identity-table td {
    display: block;
    width: auto;
    white-space: normal;
    padding: 0;
    border-top: 0 !important;
  }
  body.single-product .vpr-identity-table th { padding-top: 4px; font-size: 11px; }
  body.single-product .vpr-identity-table td { padding: 3px 0 0; font-size: 14.5px; }
  body.single-product .vpr-identity-table tr + tr th {
    margin-top: 12px;
    padding-top: 13px;
    border-top: 1px solid var(--vpr-line-2, rgba(255, 255, 255, .08)) !important;
  }
}

/* ======================================================================
   VPR HOME V2 — homepage collections rebuild (2026-08-13)
   Append to END of css/main.css. Pairs with HOME-append.js.
   PART A rules are UNCONDITIONAL compliance hides (work with JS dead).
   Everything else is scoped under body.vpr2 (added by the JS).
   ====================================================================== */

/* ---------- PART A · unconditional compliance hides (fail closed) ----- */

/* A1  "Most reordered" card badge — purchase-behaviour claim, no data.
       Never restored. */
.vpr-best .vpr-tag { display: none !important; }

/* A2  Featured grid ("Featured research materials.") and "From the vault"
       shelf are off the homepage. Fail-closed even if cached markup remains. */
body.home .vpr-best,
body.home .vpr-shelfsec { display: none !important; }

/* A2b Grid section head (kept in case the block is restored later). */
.vpr-best .vpr-sec-head { visibility: hidden; }
body.vpr2 .vpr-best .vpr-sec-head { visibility: visible; }

/* A3  Category tile counts ("1 compound", "0 items") — hidden until the JS
       replaces them with gate microcopy. */
.vpr-cats .vpr-cat-count { visibility: hidden; }
body.vpr2 .vpr-cats .vpr-cat-count { visibility: visible; }

/* A4  Stat-strip claim chips: #2 "HPLC + mass-spec" (assays the on-file
       certificates do not all perform) and #3 "Same-day dispatch"
       (unverified shipping promise). Rebuilt by JS, then restored. */
.vpr-statstrip .vpr-sstat:nth-child(2),
.vpr-statstrip .vpr-sstat:nth-child(3) { visibility: hidden; }
body.vpr2 .vpr-statstrip .vpr-sstat:nth-child(2),
body.vpr2 .vpr-statstrip .vpr-sstat:nth-child(3) { visibility: visible; }

/* A5  Logistics rows: "Same-day dispatch before 2 PM PT" (rewritten by JS)
       and "Free shipping over $200" (unverified offer term — stays hidden;
       remove this rule only when the shipping terms are confirmed in
       writing). Row 3 (Bitcoin/Zelle — true) untouched. */
.vpr-logi .vpr-logi-row:nth-child(1) { visibility: hidden; }
body.vpr2 .vpr-logi .vpr-logi-row:nth-child(1) { visibility: visible; }
.vpr-logi .vpr-logi-row:nth-child(2) { display: none !important; }

/* A6  BUGFIX (pre-existing, found 2026-08-14): the age-verification modal
       content box is fixed at 500px — it overflows sideways on every phone
       under 500px. Unconditional; not claim-bearing. */
.vp-age-verification-content {
  width: min(500px, calc(100vw - 32px));
  max-width: min(500px, calc(100vw - 32px));
}

/* ---------- PART B · redesign, all scoped under body.vpr2 -------------- */

/* B1  Category pill rail (collections quick-nav inside the grid section) */
body.vpr2 .vpr-pillrail {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 4px 0 22px;
  min-width: 0;
}
body.vpr2 .vpr-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  border: 1px solid var(--vpr-line-2, rgba(255,255,255,.12));
  border-radius: 999px;
  font-size: 12.5px;
  letter-spacing: .02em;
  color: var(--vpr-muted, rgba(255,255,255,.66));
  text-decoration: none;
  white-space: nowrap;
  flex: 0 0 auto;
  transition: border-color .15s ease, color .15s ease;
}
body.vpr2 .vpr-pill:hover {
  color: #fff;
  border-color: rgba(255,255,255,.32);
}
body.vpr2 .vpr-pill-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--vpr2-cap, #8a8f98);
  flex: 0 0 auto;
}
/* cap-colour tokens — matched to the category tile art
   (cat-glp1-teal / cat-growth-blue / cat-tissue-sage /
    cat-neuro-slate / cat-blends-copper / cat-supplies-bone) */
body.vpr2 .vpr-pill[data-cap="teal"]   { --vpr2-cap: #2dd4bf; }
body.vpr2 .vpr-pill[data-cap="blue"]   { --vpr2-cap: #60a5fa; }
body.vpr2 .vpr-pill[data-cap="sage"]   { --vpr2-cap: #a3b18a; }
body.vpr2 .vpr-pill[data-cap="slate"]  { --vpr2-cap: #94a3b8; }
body.vpr2 .vpr-pill[data-cap="copper"] { --vpr2-cap: #c9825e; }
body.vpr2 .vpr-pill[data-cap="bone"]   { --vpr2-cap: #d6cfc2; }
body.vpr2 .vpr-pill-lock { opacity: .55; display: inline-flex; }
body.vpr2 .vpr-pill-lock svg { width: 10px; height: 10px; display: block; }

/* B1b grid cap — cards beyond CFG.gridMax are hidden, never removed */
body.vpr2 .vpr-best .vpr-hidden { display: none; }

/* B2  Slot-1 definition line (renders only when CFG.slot1DefLine is set) */
body.vpr2 .vpr-card-def {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 12px;
  line-height: 1.45;
  opacity: .65;
  margin-top: 3px;
}

/* B3  Rebuilt cats section head subline */
body.vpr2 .vpr-cats-sub {
  max-width: 560px;
  margin: 10px 0 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--vpr-muted, rgba(255,255,255,.66));
}

/* B4  Closing catalog CTA band */
body.vpr2 .vpr-catcta {
  background: var(--vpr-navy);
  padding: 96px 24px;
  text-align: center;
}
body.vpr2 .vpr-catcta .vpr-sec-head { display: block; }
body.vpr2 .vpr-catcta-sub {
  margin: 12px auto 26px;
  max-width: 480px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--vpr-muted, rgba(255,255,255,.66));
}

/* B5  Anchor comfort for the stat-strip CoA chip link */
body.vpr2 #vpr-coa { scroll-margin-top: 96px; }
body.vpr2 .vpr-statstrip a.vpr-sstat-link {
  color: inherit;
  text-decoration: none;
  display: block;
}
body.vpr2 .vpr-statstrip a.vpr-sstat-link:hover b { color: #fff; }

/* ---------- B6 · mobile (≤640px) --------------------------------------- */
@media (max-width: 640px) {

  /* grid: exactly two columns, cards restacked vertically (the live card
     is horizontal thumb+body — restack or 2-up crushes the name/price) */
  body.vpr2 .vpr-best-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  body.vpr2 .vpr-best-card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    min-width: 0;
  }
  body.vpr2 .vpr-best-thumb {
    width: 100%;
    display: block;
  }
  body.vpr2 .vpr-best-thumb img {
    width: 100%;
    height: auto;
  }
  body.vpr2 .vpr-best-body { min-width: 0; }
  body.vpr2 .vpr-best-top {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  body.vpr2 .vpr-best-name {
    font-size: 15px;
    line-height: 1.3;
    white-space: normal;
  }
  body.vpr2 .vpr-best-price,
  body.vpr2 .vpr-best-price-gate { white-space: normal; }

  /* pill rail becomes a horizontal scroll rail */
  body.vpr2 .vpr-pillrail {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
  }
  body.vpr2 .vpr-pillrail::-webkit-scrollbar { display: none; }

  /* stat strip scrolls the same way */
  body.vpr2 .vpr-statstrip-grid {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 10px;
    min-width: 0;
  }
  body.vpr2 .vpr-statstrip-grid::-webkit-scrollbar { display: none; }
  body.vpr2 .vpr-statstrip .vpr-sstat { flex: 0 0 auto; max-width: 78vw; }

  /* section rhythm compression */
  body.vpr2 .vpr-best,
  body.vpr2 .vpr-cats { padding-top: 40px; padding-bottom: 40px; }
  body.vpr2 .vpr-catcta { padding: 56px 20px; }

  /* cats tiles 2-up; kill inherited span rules */
  body.vpr2 .vpr-cat-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  body.vpr2 .vpr-cat { grid-column: span 1 !important; min-height: 120px; }
  body.vpr2 .vpr-cat img { object-fit: cover; }
  body.vpr2 .vpr-cat-name { font-size: 13.5px; }
}

/* B7 · cats tiles 3-up on tablet, span rules reset */
@media (min-width: 641px) and (max-width: 960px) {
  body.vpr2 .vpr-cat-grid { grid-template-columns: repeat(3, 1fr); }
  body.vpr2 .vpr-cat { grid-column: span 1 !important; }
  body.vpr2 .vpr-cat img { object-fit: cover; }
}

/* ================== END VPR HOME V2 (css) ============================= */

/* ======================================================================
   VPR HOME V2.1 (2026-08-14) — header alignment + collections removal
   Jeremy: nav row ghosted over the hero; hero collided with the overlay
   header on short viewports; collections tiles cut per Aden's guidance.
   ====================================================================== */
@media (min-width: 769px) {
  /* the standalone menu row rendered as transparent text over the hero */
  body.home nav.vault-nav { display: none !important; }
}
/* collections tiles removed 2026-08-14 (owner call, per consultant guidance):
   the pill rail in the grid section is the category nav; tiles revisit at
   the catalog flip. JS still clones the pills from this hidden markup. */
section.vpr-cats { display: none; }
/* ================== END VPR HOME V2.1 (css) =========================== */

/* ======================================================================
   VPR HOME V2.2 (2026-08-14) — restore the STANDARD header stack on the
   homepage (Jeremy: "match /shop/" — top bar + solid navy header + nav
   row in normal flow). Neutralizes the July overlay treatment in place,
   CSS-only (no class removal, so no flash or layout jump), and retires
   the V2.1 nav-hide + hero-clearance patches.
   ====================================================================== */

/* top bar back on the homepage (undoes the July body.home hide) */
body.home .vault-top-bar { display: block; }

/* nav row back at desktop widths (undoes VPR HOME V2.1); the mobile
   hamburger dropdown behavior is untouched */
@media (min-width: 769px) {
  body.home nav.vault-nav { display: block !important; }
}

/* neutralize the overlay: header + nav stay solid navy even while the
   vpr-overlay body class is present, and the page is no longer pulled
   up underneath the header stack */
body.home.vpr-overlay .vault-header:not(.vpr-hdr-solid),
body.home.vpr-overlay .vault-nav:not(.vpr-hdr-solid) {
  background-color: var(--vpr-navy);
  border-bottom-color: var(--vpr-line-2);
}
body.home.vpr-overlay .vault-main { margin-top: 0; }

/* ================== END VPR HOME V2.2 (css) =========================== */

/* ======================================================================
   VPR HEADER V2.3 (2026-08-14) — two Jeremy requests:
   A. Blog surfaces get the SAME dark header treatment the store pages
      use (mirror of the "VPR STORE DARK HEADER" block, new scopes).
   B. Single-row header sitewide: the nav row folds into the header line
      (logo · search · links · icons). header.php renders the nav inside
      .vault-header-content and body.vpr3row before first paint. The
      legacy JS fold remains a fallback for older cached markup.
   ====================================================================== */

/* ---------- A · blog / posts dark header ------------------------------ */
body:is(.blog,.single-post,.category,.tag,.page-id-1283) .vault-header,
body:is(.blog,.single-post,.category,.tag,.page-id-1283) .vault-nav {
  background-color: #0e1a30 !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
  box-shadow: none !important;
}
body:is(.blog,.single-post,.category,.tag,.page-id-1283) .vault-logo img { filter: brightness(0) invert(1) !important; }
body:is(.blog,.single-post,.category,.tag,.page-id-1283) .vault-logo-vault { color: #fff !important; }
body:is(.blog,.single-post,.category,.tag,.page-id-1283) .vault-logo-peptides { color: var(--vpr-teal-ink) !important; }
body:is(.blog,.single-post,.category,.tag,.page-id-1283) .vault-nav a { color: var(--vpr-muted) !important; }
body:is(.blog,.single-post,.category,.tag,.page-id-1283) .vault-nav a:hover { color: #fff !important; }
body:is(.blog,.single-post,.category,.tag,.page-id-1283) .vault-nav .current-menu-item > a { color: var(--vpr-teal-ink) !important; }
body:is(.blog,.single-post,.category,.tag,.page-id-1283) .vault-icon,
body:is(.blog,.single-post,.category,.tag,.page-id-1283) .vault-account-link,
body:is(.blog,.single-post,.category,.tag,.page-id-1283) .vault-cart-icon { color: #cfe0e6 !important; }
body:is(.blog,.single-post,.category,.tag,.page-id-1283) .vault-search-form input {
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.12) !important;
  color: var(--vpr-ink) !important;
}
body:is(.blog,.single-post,.category,.tag,.page-id-1283) .vault-search-form input::placeholder { color: var(--vpr-faint) !important; }
body:is(.blog,.single-post,.category,.tag,.page-id-1283) .vault-menu-toggle .vault-hamburger span { background: #cfe0e6 !important; }

/* ---------- B · single-row header (body.vpr3row rendered by header.php) -------- */

/* desktop: nav lives inline between the search pill and the icons */
@media (min-width: 1024px) {
  body.vpr3row .vault-nav {
    background: transparent !important;
    border-bottom: none !important;
    position: static;
    flex: 0 0 auto;
    margin-left: auto;
  }
  body.vpr3row .vault-nav .vault-container {
    padding: 0;
    margin: 0;
    width: auto;
    max-width: none;
  }
  body.vpr3row .vault-nav ul { gap: 22px; }
  body.vpr3row .vault-nav a { font-size: 14px; white-space: nowrap; }
  body.vpr3row .vault-header-right { margin-left: 20px; }
}

/* tablet: not enough width for one line — the nav wraps to a second
   line inside the header (same footprint as the old dual row) */
@media (min-width: 769px) and (max-width: 1023px) {
  body.vpr3row .vault-header-content { flex-wrap: wrap; }
  body.vpr3row .vault-nav {
    flex-basis: 100%;
    order: 10;
    background: transparent !important;
    border-bottom: none !important;
  }
  body.vpr3row .vault-nav .vault-container { padding: 0; margin: 0; max-width: none; }
}

/* mobile: the hamburger panel drops below the sticky header exactly as
   before the move (the header is the positioned ancestor) */
@media (max-width: 768px) {
  body.vpr3row .vault-nav {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
  }
}

/* ---------- C · hero text lifted (Jeremy: "move up the hero text") ---- */
body.home section.vpr-hero { align-items: center; }

/* ================== END VPR HEADER V2.3 (css) ========================= */


/* VPR RELATED-DARK 2026-08-31: PDP related-product cards match the dark shop cards (override the white Customizer rules) */
.single-product div.product section.related.products ul.products li.product,
.single-product section.related.products li.product{background:rgb(27,44,73)!important;border:1px solid rgba(255,255,255,0.08)!important;border-radius:14px!important;overflow:hidden;}
.single-product div.product section.related.products ul.products li.product a img,
.single-product section.related.products li.product a img{background:transparent!important;padding:0!important;height:auto!important;object-fit:cover;}
.single-product section.related.products li.product .woocommerce-loop-product__title,
.single-product section.related.products li.product h2{color:rgb(234,241,244)!important;}
.single-product section.related.products li.product .price{color:rgb(143,216,206)!important;}
.single-product section.related.products>h2{color:rgb(234,241,244);}


/* VPR CATALOG-CTA CONTRAST 2026-09-01: ad-compliance item 3, catalog notice was 9FB2C6 on transparent */
.vp-catalog-notice, li.product .vp-catalog-notice.button{color:#EAF1F4 !important;background:rgba(42,157,143,0.16) !important;border:1.5px solid rgba(42,157,143,0.75) !important;font-weight:600;letter-spacing:0.02em;text-align:center;border-radius:8px;}
.vp-catalog-notice:hover{background:rgba(42,157,143,0.16) !important;color:#EAF1F4 !important;cursor:default;}


/* ====================================================================
   VPR PDP3 FLIP-DAY ADOPTION 2026-09-01. APPEND-ONLY.
   Suppresses two unsubstantiated-promise boxes and spaces the blocks
   the PDP3 JS re-homes after the buy panel. Owner-gated to return:
   the countdown needs a written dispatch SLA and the free-shipping
   box needs the threshold confirmed for manually arranged orders.
   Rollback: delete down to END VPR PDP3 ADOPTION.
   ==================================================================== */
body.single-product #vp-shipping-countdown,
body.single-product .summary .vp-free-shipping-notice,
body.single-product .vp-payment-badges { display: none !important; } /* badges suppressed 9/1: BTC/Zelle deactivated, cards via PRISM; rails copy must match checkout */
/* flip-day strandees found live 9/2: bulk-pricing table duplicates the tier
   selector; the old trust-badge strip carries an owner-gated same-day claim. */
body.single-product .summary .vp-bulk-pricing,
body.single-product .summary .vp-trust-badges { display: none !important; }
body.single-product .summary .vpr-pdp-buy + .vp-product-ruo-disclaimer { margin-top: 14px; }
body.single-product .summary .vp-product-ruo-disclaimer + .vp-payment-badges { margin-top: 10px; }
/* END VPR PDP3 ADOPTION */


/* ==========================================================================
   VPR PDP3B B1 DARK SURFACE 2026-09-01. APPEND-ONLY.
   Target: css/main.css (append to the very END, after END VPR PDP3 ADOPTION).
   Deploy: append-to-end via the WP theme editor. MUST ship in the same pass
   as b1-customizer-patch.json: the Customizer PHASE-1 block paints the tabs
   and related sections opaque #ffffff so the sticky gallery slides under
   them, and the patch swaps that to the same navy this block paints the
   page. Shipping one without the other leaves white slabs on navy (or the
   reverse). The patch also fixes the Customizer's related-section border and
   heading color, which print last and would otherwise win.
   Scope: page shell, breadcrumbs, hero strip, title/chips/stock, short
   description, product meta, quick-facts box, amber RUO box (restyled,
   NEVER hidden), Woo notices, base tab-panel text. The buy panel, gallery
   tile, and related-card innards are already dark and are not touched.
   Tab bar and section chrome belong to B2.
   Rollback: delete this block down to END VPR PDP3B B1 and re-apply each
   customizer needle inverted (swap find and replace).
   ========================================================================== */

/* ---------- 1. page shell: the same navy as the shop archives ------------ */
body.single-product { background-color: var(--vpr-navy, #111f38); }
body.single-product .vault-main { background: var(--vpr-navy, #111f38); }

/* the hero strip, when the template prints one, sits on gray-50 sitewide.
   Its sitewide ::before eyebrow is already teal-ink and reads fine on navy. */
body.single-product .vault-page-hero {
  background: transparent;
  border-bottom: 1px solid var(--vpr-line-2, rgba(255, 255, 255, 0.08));
}
body.single-product .vault-page-hero .vault-page-title { color: var(--vpr-ink, #eaf1f4); }

/* ---------- 2. breadcrumbs -----------------------------------------------
   --vpr-faint is ~4.25:1 on this navy (sub-AA at 12px), so unlike the shop
   hero these use --vpr-muted for text and --vpr-teal-ink for links. */
body.single-product .woocommerce-breadcrumb,
body.single-product .vault-breadcrumbs { color: var(--vpr-muted, #9fb2c6); }
body.single-product .woocommerce-breadcrumb a,
body.single-product .vault-breadcrumbs a { color: var(--vpr-teal-ink, #8fd8ce); }
body.single-product .woocommerce-breadcrumb a:hover,
body.single-product .vault-breadcrumbs a:hover { color: #a9e9de; }

/* ---------- 3. head: title, spec sub-line, chips, availability -----------
   Tokens are the round-1 authored dark variant (main.css ~4819), verbatim. */
body.single-product div.product .product_title,
body.single-product div.product h1 { color: var(--vpr-ink, #eaf1f4); }
body.single-product .vpr-pdp-sub { color: var(--vpr-muted, #9fb2c6); }
body.single-product .vpr-pdp-chip {
  color: var(--vpr-teal-ink, #8fd8ce);
  border-color: var(--vpr-line, rgba(143, 216, 206, 0.16));
}
body.single-product .vpr-pdp-chip-ruo {
  background: var(--vpr-teal, #2A9D8F);
  border-color: var(--vpr-teal, #2A9D8F);
  color: #04201c;
}
/* the light-mode stock rules carry !important at (0,3,0); these outrank them
   on specificity. Out of stock stays muted by round-1 design (no false
   urgency color). The unscoped pair is the JS-dead fallback for a bare
   p.stock in the summary. */
body.single-product .vpr-pdp-sub .stock.in-stock { color: var(--vpr-teal-ink, #8fd8ce) !important; }
body.single-product .vpr-pdp-sub .stock.out-of-stock,
body.single-product .vpr-pdp-sub .stock.available-on-backorder { color: var(--vpr-muted, #9fb2c6) !important; }
body.single-product div.product .stock.in-stock { color: var(--vpr-teal-ink, #8fd8ce); }
body.single-product div.product .stock.out-of-stock,
body.single-product div.product .stock.available-on-backorder { color: var(--vpr-muted, #9fb2c6); }

/* ---------- 4. short description + product meta -------------------------- */
body.single-product div.product .woocommerce-product-details__short-description {
  color: #c6d3e2;
  border-bottom-color: var(--vpr-line-2, rgba(255, 255, 255, 0.08));
}
body.single-product div.product .product_meta {
  color: var(--vpr-muted, #9fb2c6);
  border-top-color: var(--vpr-line-2, rgba(255, 255, 255, 0.08));
}
body.single-product div.product .product_meta a { color: var(--vpr-teal-ink, #8fd8ce); }

/* ---------- 5. quick-facts box (reappears post-flip) ---------------------
   The PHP callback prints its own <style> in the BODY (mint #f0f7f6 box,
   navy text), which beats head styles on order, so every override here
   carries !important. .vault-quick-facts is the legacy alias, kept inert. */
body.single-product .vp-product-quick-facts,
body.single-product .vault-quick-facts {
  background: var(--vpr-panel, #1b2c49) !important;
  border-left: 4px solid var(--vpr-teal, #2A9D8F) !important;
  border-radius: 12px !important;
}
body.single-product .vp-product-quick-facts h3 { color: var(--vpr-ink, #eaf1f4) !important; }
body.single-product .vp-product-quick-facts li { color: #c6d3e2 !important; }
body.single-product .vp-product-quick-facts strong { color: var(--vpr-teal-ink, #8fd8ce) !important; }

/* ---------- 6. amber RUO box (restyle only, NEVER hidden) ----------------
   The disclaimer div carries inline style attributes (amber gradient, brown
   text), so only !important can restyle it. Amber identity kept: amber
   border and heading on a faint amber-tinted navy. Contrast on the tinted
   ground: heading #E1A34B ~5.3:1, body #eaf1f4 ~10:1. */
body.single-product .vp-product-ruo-disclaimer {
  background: rgba(225, 163, 75, 0.06) !important;
  border: 1px solid rgba(225, 163, 75, 0.4) !important;
  color: var(--vpr-ink, #eaf1f4) !important;
}
body.single-product .vp-product-ruo-disclaimer strong { color: var(--vpr-amber, #E1A34B) !important; }

/* ---------- 7. Woo notices (added-to-cart etc., post-flip) ---------------
   Same treatment the shop archives already use (main.css ~4506). Errors
   keep the Woo red accent bar so failures still look like failures. */
body.single-product .woocommerce-message,
body.single-product .woocommerce-info {
  background: var(--vpr-panel, #1b2c49);
  color: var(--vpr-ink, #eaf1f4);
  border-top-color: var(--vpr-teal, #2A9D8F);
}
body.single-product .woocommerce-error {
  background: var(--vpr-panel, #1b2c49);
  color: var(--vpr-ink, #eaf1f4);
}

/* ---------- 8. no-image gallery placeholder ------------------------------
   The Customizer paints it gray-50 with #999 text and prints last, hence
   the !important. Edge case only (all 18 live products have imagery). */
body.single-product .woocommerce-product-gallery--without-images { background: var(--vpr-panel, #1b2c49) !important; }
body.single-product .woocommerce-product-gallery--without-images::after { color: var(--vpr-muted, #9fb2c6) !important; }

/* ---------- 9. related heading, partial-deploy guard ---------------------
   The Customizer needle patch is the real fix (its rule prints last). This
   duplicate wins by !important even if the patch lags a paste cycle, and it
   agrees with the patched value, so it can never fight it. */
body.single-product div.product section.related.products > h2 { color: var(--vpr-ink, #eaf1f4) !important; }

/* ---------- 10. base tab-panel text (surface only; chrome is B2's) -------
   Keeps arbitrary Storage and description copy legible on navy. Deliberately
   NO !important so B2, and the existing dark Research Details / CoA cards
   (own colors on more specific selectors), restyle freely on top. Known
   gap: enrichment blocks printed by the live functions.php wp_footer styles
   are not mirrored locally and may hardcode grays after this sheet prints;
   audit the description and storage panels visually after the paste. */
body.single-product div.product .woocommerce-tabs .woocommerce-Tabs-panel { color: #c6d3e2; }
body.single-product div.product .woocommerce-tabs .woocommerce-Tabs-panel h2,
body.single-product div.product .woocommerce-tabs .woocommerce-Tabs-panel h3 { color: var(--vpr-ink, #eaf1f4); }

/* ======================= END VPR PDP3B B1 ================================ */

/* ====================================================================
   VPR PDP3B SECTIONS (css) 2026-09-01
   Target: assets/css/main.css - APPEND TO END of file.
   Tab UI becomes stacked sections (>=901px) and accordions (<=900px).
   EVERY rule is gated on html.vpr-pdp3b-secs, which the twin
   "VPR PDP3B SECTIONS (js)" block stamps only AFTER it has built the
   section headers. No JS (or window.VPR_PDP3B_OFF=true) means no
   stamp, and the stock Woo tab UI keeps working, untouched.
   Class prefix is vpr-psec-*: .vpr-sec-head already exists as a
   HOMEPAGE section-header class (main.css ~2402, unscoped), so that
   name is off limits here.
   Rollback: delete down to END VPR PDP3B SECTIONS (css), plus the
   twin js block.
   ==================================================================== */

/* Tab strip retires as an interaction. display:none (not removal):
   round-1's activateCoaTab() still clicks its #tab-coa link. Must beat
   the <=768px "display:grid !important" at main.css ~4721 - that rule
   is (0,3,1); this one is (0,5,4), so it wins at equal importance. */
html.vpr-pdp3b-secs body.single-product div.product .woocommerce-tabs ul.tabs.wc-tabs {
  display: none !important;
}

/* Panels always laid out, full width, stacked. !important beats the
   inline style="display:none" Woo's tabs JS writes (and re-writes) on
   inactive panels. Panels are NOT collapsed by removal at any point -
   ids stay live for #tab-coa hash links and the round-1 dialog clone. */
html.vpr-pdp3b-secs body.single-product div.product .woocommerce-tabs .woocommerce-Tabs-panel {
  display: block !important;
  width: 100%;
  /* deep links land below the 72px sticky header + 32px admin bar */
  scroll-margin-top: 104px;
}

/* ---------- section header: mono eyebrow bar, corner-tick motif ------
   Echoes .vpr-specimen (main.css ~2915): thin teal-tinted frame, mono
   uppercase label, 8px teal corner ticks. h2 wrapper carries document
   outline; the button is the whole visual and (on mobile) the control. */
html.vpr-pdp3b-secs body.single-product .woocommerce-tabs .vpr-psec-h {
  margin: 28px 0 0;
  padding: 0;
}
html.vpr-pdp3b-secs body.single-product .woocommerce-tabs .vpr-psec-h:first-of-type {
  margin-top: 6px;
}
html.vpr-pdp3b-secs body.single-product .woocommerce-tabs .vpr-psec-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  position: relative;
  margin: 0;
  padding: 13px 20px;
  background: rgba(240, 247, 246, 0.03);
  border: 1px solid var(--vpr-line, rgba(143, 216, 206, 0.16));
  border-radius: 8px;
  font-family: var(--vpr-mono, 'SFMono-Regular', ui-monospace, Menlo, Consolas, monospace);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: left;
  line-height: 1.4;
  color: var(--vpr-teal-ink, #8fd8ce);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
html.vpr-pdp3b-secs body.single-product .woocommerce-tabs .vpr-psec-head::before,
html.vpr-pdp3b-secs body.single-product .woocommerce-tabs .vpr-psec-head::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  border: 2px solid var(--vpr-teal, #2A9D8F);
}
html.vpr-pdp3b-secs body.single-product .woocommerce-tabs .vpr-psec-head::before {
  left: 6px; top: 6px; border-right: 0; border-bottom: 0;
}
html.vpr-pdp3b-secs body.single-product .woocommerce-tabs .vpr-psec-head::after {
  right: 6px; bottom: 6px; border-left: 0; border-top: 0;
}
html.vpr-pdp3b-secs body.single-product .woocommerce-tabs .vpr-psec-head:focus-visible {
  outline: 2px solid var(--vpr-teal, #2A9D8F);
  outline-offset: 2px;
}

/* chevron: CSS-drawn; headers toggle at every width (desktop defaults
   all-open), so the affordance shows everywhere */
html.vpr-pdp3b-secs body.single-product .vpr-psec-chev {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  margin-right: 4px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg); /* points down = can open */
  transition: transform 0.18s ease;
  display: inline-block;
}
html.vpr-pdp3b-secs body.single-product .vpr-psec-head[aria-expanded="true"] .vpr-psec-chev {
  transform: rotate(225deg); /* points up = can close */
}

/* collapse is a class toggle on the PANEL, scoped under
   .woocommerce-tabs on purpose: the round-1 CoA <dialog> clone lives
   at body level, so a cloned vpr-psec-closed can never hide content
   inside the dialog. One extra class out-specifies the display:block
   rule above at equal importance. Lives OUTSIDE the media query so the
   toggle works at every width; desktop still defaults to all-open. */
html.vpr-pdp3b-secs body.single-product div.product .woocommerce-tabs .woocommerce-Tabs-panel.vpr-psec-closed {
  display: none !important;
}

/* a panel heading the JS flagged as repeating the section header */
html.vpr-pdp3b-secs body.single-product .woocommerce-tabs .vpr-psec-dup {
  display: none !important;
}

/* ---------- <=900px: accordion (matches round-1's PDP breakpoint) --- */
@media (max-width: 900px) {
  html.vpr-pdp3b-secs body.single-product .woocommerce-tabs .vpr-psec-h { margin: 10px 0 0; }
  html.vpr-pdp3b-secs body.single-product .woocommerce-tabs .vpr-psec-h:first-of-type { margin-top: 4px; }
  html.vpr-pdp3b-secs body.single-product .woocommerce-tabs .vpr-psec-head {
    min-height: 48px; /* tap target */
    padding: 12px 16px;
    cursor: pointer;
  }
  /* base panel padding is 2rem 0 (main.css ~2044); tighten under the
     header bars. The >=901px Customizer padding-top:1.25rem !important
     does not reach this breakpoint. */
  html.vpr-pdp3b-secs body.single-product div.product .woocommerce-tabs .woocommerce-Tabs-panel {
    padding: 0.5rem 0 1.25rem;
  }
}
/* ============== END VPR PDP3B SECTIONS (css) ======================== */

/* ===== VPR PDP3B ENHANCE (css) 2026-09-01 =============================
   4:3 mobile gallery crop, gallery control bar, related snap rail, tags
   hide, PDP top-bar hide, ordering-steps strip.
   Target: assets/css/main.css (LIVE), APPEND TO END after VPR PDP3.
   Pairs with the PDP3B js block; all .vpr-b3-* rules are inert without it.
   Rollback: delete down to END VPR PDP3B ENHANCE (css) + the js twin. */

/* 1. Top bar off on PDPs, ALL widths (it stacks ~3 rows on phones where
   the fold is scarcest; PDP keeps its own RUO chips + legend + amber box,
   and the bar's free-shipping line is an owner-gated-OFF promise). Tags
   row off; SKU + Category stay. */
body.single-product .vault-top-bar { display: none !important; }
body.single-product .product_meta .tagged_as { display: none !important; }

/* 2. 4:3 mobile crop (round-2 measured: center 52% clips only dead band;
   cover from 1:1 scales by WIDTH, vial size unchanged). Beats the 1:1
   rule ~4843. Absolute fill, not %-height (flaky vs aspect-ratio). */
@media (max-width: 900px) {
  html body.single-product .woocommerce-product-gallery__image {
    aspect-ratio: 4 / 3; display: block; position: relative; overflow: hidden;
  }
  html body.single-product .woocommerce-product-gallery__image > a {
    position: absolute; top: 0; right: 0; bottom: 0; left: 0;
    display: block; width: auto; height: auto;
  }
  html body.single-product .woocommerce-product-gallery__image img {
    position: absolute; top: 0; right: 0; bottom: 0; left: 0;
    width: 100% !important; height: 100% !important; max-width: 100%;
    display: block; object-fit: cover; object-position: center 52%;
  }
  html body.single-product div.product div.images,
  html body.single-product div.product .woocommerce-product-gallery { margin-bottom: 0 !important; }
  /* turntable shares the still's crop or the vial jumps on play */
  html body.single-product .woocommerce-product-gallery__wrapper.vpr-b3-staged .vpr-stage-vid {
    object-position: center 52%;
  }
}

/* 3. Control bar: JS MOVES the round-1 pills into one labelled bar below
   the artwork (an overlay would scrim the vial base + label). One
   control = one full-width cell; none = no bar. */
html body.single-product .vpr-b3-stage-bar {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  gap: 1px; min-width: 0;
  background: var(--vpr-line-2, rgba(255, 255, 255, 0.08));
  border-top: 1px solid var(--vpr-line-2, rgba(255, 255, 255, 0.08));
  position: relative; z-index: 5; /* above the turntable video */
}
/* unpin the moved controls (round-1: absolute frosted pills) */
html body.single-product .vpr-b3-stage-bar .vpr-stage-btn,
html body.single-product .vpr-b3-stage-bar .vpr-pdp-coa-pin {
  position: static !important;
  left: auto !important; right: auto !important; bottom: auto !important;
  z-index: auto;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; min-width: 0; min-height: 48px; margin: 0; padding: 0 10px;
  border: 0 !important; border-radius: 0 !important;
  background: rgba(10, 18, 33, 0.92) !important;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  color: var(--vpr-mint, #F0F7F6) !important;
  font-family: var(--vpr-mono, ui-monospace, Menlo, Consolas, monospace);
  font-size: 11px; font-weight: 600; letter-spacing: 0.1em; line-height: 1.2;
  text-align: center; text-decoration: none; overflow-wrap: anywhere;
  cursor: pointer; touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(42, 157, 143, 0.18);
  transition: background 0.2s, color 0.2s;
}
html body.single-product .vpr-b3-stage-bar .vpr-stage-btn:hover,
html body.single-product .vpr-b3-stage-bar .vpr-stage-btn:focus-visible,
html body.single-product .vpr-b3-stage-bar .vpr-pdp-coa-pin:hover,
html body.single-product .vpr-b3-stage-bar .vpr-pdp-coa-pin:focus-visible {
  background: rgba(42, 157, 143, 0.18) !important; color: #fff !important;
}
/* ring marker per cell; filled while the turntable plays */
html body.single-product .vpr-b3-stage-bar .vpr-stage-btn::before,
html body.single-product .vpr-b3-stage-bar .vpr-pdp-coa-pin::before {
  content: ""; flex: none; width: 7px; height: 7px;
  border: 1.5px solid var(--vpr-teal, #2A9D8F); border-radius: 50%;
}
html body.single-product .vpr-b3-stage-bar .vpr-stage-btn[aria-pressed="true"] {
  background: rgba(42, 157, 143, 0.22) !important; color: #fff !important;
}
html body.single-product .vpr-b3-stage-bar .vpr-stage-btn[aria-pressed="true"]::before {
  background: var(--vpr-teal, #2A9D8F);
}
/* loading: turntable is preload="none"; first tap needs feedback */
html body.single-product .vpr-b3-stage-bar .vpr-stage-btn.is-loading {
  color: var(--vpr-muted, #9fb2c6) !important; cursor: progress;
}
html body.single-product .vpr-b3-stage-bar .vpr-stage-btn.is-loading::before {
  border-color: var(--vpr-muted, #9fb2c6); border-top-color: transparent;
  animation: vpr-b3-spin 0.8s linear infinite;
}
@keyframes vpr-b3-spin { to { transform: rotate(360deg); } }
/* live video is height:100% of the wrapper, which now contains the bar;
   hold it to the artwork box */
html body.single-product .woocommerce-product-gallery__wrapper.vpr-b3-staged .vpr-stage-vid {
  height: auto; bottom: 48px;
}
@media (prefers-reduced-motion: reduce) {
  /* live CSS hides .vpr-stage-btn here; rot-only mark = no empty strip */
  html body.single-product .vpr-b3-stage-bar.vpr-b3-rot-only { display: none !important; }
  html body.single-product .vpr-b3-stage-bar .vpr-stage-btn.is-loading::before { animation: none; }
  html body.single-product .vpr-b3-stage-bar .vpr-stage-btn,
  html body.single-product .vpr-b3-stage-bar .vpr-pdp-coa-pin { transition: none !important; }
}

/* 4. Related rail. JS wraps the DIRECT li.product children (theme bug
   destroys ul.products) in .vpr-b3-rail; section drops to block, rail
   owns layout: desktop = the same 4-col/1.5rem grid, <=900px = snap
   rail. (0,5,4) beats every Customizer section rule (0,4,2). COLORS
   UNTOUCHED: RELATED-DARK + CATALOG-CTA use descendant selectors and
   still style cards inside the rail; the continuity rules below only
   restore spacing the Customizer's `> li.product` CHILD selectors stop
   delivering once wrapped (values copied verbatim). */
html body.single-product div.product section.related.products.vpr-b3-railed {
  display: block !important;
}
html body.single-product div.product section.related.products ul.products.vpr-b3-rail {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.5rem; margin: 0; padding: 0; list-style: none; min-width: 0; position: relative;
}
html body.single-product .vpr-b3-rail > li.product {
  min-width: 0; width: auto !important; margin: 0 !important; float: none !important;
}
html body.single-product .vpr-b3-rail > li.product a { text-decoration: none; }
html body.single-product .vpr-b3-rail > li.product a img { width: 100%; display: block; }
html body.single-product .vpr-b3-rail > li.product .woocommerce-loop-product__title,
html body.single-product .vpr-b3-rail > li.product h2 {
  font-size: 0.95rem; font-weight: 600; line-height: 1.3;
  padding: 0.75rem 1rem 0.25rem; margin: 0;
}
html body.single-product .vpr-b3-rail > li.product .price {
  display: block; padding: 0 1rem 0.25rem; font-size: 1.1rem; font-weight: 700;
}
html body.single-product .vpr-b3-rail > li.product .button,
html body.single-product .vpr-b3-rail > li.product .add_to_cart_button,
html body.single-product .vpr-b3-rail > li.product .vp-catalog-notice {
  display: block; width: calc(100% - 2rem); margin: 0.75rem 1rem;
  padding: 0.6rem; text-align: center; font-weight: 600; font-size: 0.85rem;
}
/* post-flip loop buttons: the Customizer child rule's teal, copied.
   Covers add_to_cart_button AND plain a.button (Select options / Read
   more); the outlined Catalog Only pill keeps its own look. */
html body.single-product .vpr-b3-rail > li.product .add_to_cart_button,
html body.single-product .vpr-b3-rail > li.product a.button:not(.vp-catalog-notice) {
  background: var(--color-teal, #2A9D8F); color: #ffffff;
  border: none; border-radius: 8px;
}
/* the pre-wrap child-selector hover rules stop matching once wrapped;
   restore a desktop hover affordance on the cards */
@media (min-width: 901px) {
  html body.single-product .vpr-b3-rail > li.product {
    transition: transform 0.18s ease;
  }
  html body.single-product .vpr-b3-rail > li.product:hover {
    transform: translateY(-3px);
  }
}
/* mirror the Customizer's 3-col step so 901-992px does not shift */
@media (min-width: 901px) and (max-width: 992px) {
  html body.single-product div.product section.related.products ul.products.vpr-b3-rail { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  html body.single-product div.product section.related.products ul.products.vpr-b3-rail {
    grid-template-columns: none !important; grid-auto-flow: column; grid-auto-columns: 46vw;
    gap: 12px; overflow-x: auto; overflow-y: hidden;
    overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; padding: 2px 2px 10px;
    scrollbar-width: none; /* rail edge + snap communicate scrollability */
  }
  html body.single-product .vpr-b3-rail::-webkit-scrollbar { display: none; height: 0; }
  html body.single-product .vpr-b3-rail > li.product { scroll-snap-align: start; }
}
/* JS sets tabindex=0 on the rail (WCAG 2.1.1); focus needs an indicator */
html body.single-product .vpr-b3-rail:focus-visible {
  outline: 2px solid var(--vpr-teal, #2A9D8F); outline-offset: 2px;
}

/* 5. "How ordering works" strip (post-flip only; JS gates on form.cart) */
body.single-product .vpr-b3-steps {
  margin: 16px 0 0; padding: 14px 0 0;
  border-top: 1px solid var(--vpr-line-2, rgba(255, 255, 255, 0.08));
}
body.single-product .vpr-b3-steps-t {
  margin: 0 0 8px;
  font-family: var(--vpr-mono, ui-monospace, Menlo, Consolas, monospace);
  font-size: 11px; font-weight: 600; letter-spacing: 0.14em;
  color: var(--vpr-teal-ink, #8fd8ce);
}
body.single-product .vpr-b3-steps ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
body.single-product .vpr-b3-steps li {
  margin: 0; padding: 0;
  font-family: var(--vpr-mono, ui-monospace, Menlo, Consolas, monospace);
  font-size: 12px; line-height: 1.5; color: var(--vpr-ink, #eaf1f4);
}
/* ===== END VPR PDP3B ENHANCE (css) ===== */

/* ==========================================================================
   VPR CART + CHECKOUT DARK 2026-09-02. APPEND-ONLY.
   Dark house theme for the stock Woo cart and checkout, CSS only. No layout
   or behavior changes; PRISM's iframed card fields are unaffected by page
   CSS. Also fixes the undersized coupon input (was 138px wide).
   Rollback: delete down to END VPR CART + CHECKOUT DARK.
   ========================================================================== */
body.woocommerce-cart, body.woocommerce-checkout { background: var(--vpr-navy, #111f38); }
body.woocommerce-cart .vault-main, body.woocommerce-checkout .vault-main { background: var(--vpr-navy, #111f38); color: #c6d3e2; }
body.woocommerce-cart .entry-title, body.woocommerce-checkout .entry-title,
body.woocommerce-cart .vault-main h1, body.woocommerce-checkout .vault-main h1,
body.woocommerce-cart .vault-main h2, body.woocommerce-checkout .vault-main h2,
body.woocommerce-cart .vault-main h3, body.woocommerce-checkout .vault-main h3 { color: var(--vpr-ink, #eaf1f4); }

/* RUO reminder box: mint accent kept, dark ground */
body.woocommerce-cart .vp-cart-ruo-notice {
  background: rgba(42, 157, 143, 0.08) !important;
  border: 1px solid rgba(42, 157, 143, 0.35) !important;
  color: var(--vpr-ink, #eaf1f4) !important;
  border-radius: 10px;
}
body.woocommerce-cart .vp-cart-ruo-notice strong { color: var(--vpr-teal-ink, #8fd8ce) !important; }

/* tables: cart contents, cart totals, checkout order review */
body.woocommerce-cart table.shop_table, body.woocommerce-checkout table.shop_table {
  background: var(--vpr-navy-2, #16263f);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  color: #c6d3e2;
}
body.woocommerce-cart table.shop_table th, body.woocommerce-checkout table.shop_table th {
  color: var(--vpr-teal-ink, #8fd8ce);
  border-color: rgba(255, 255, 255, 0.08) !important;
  background: rgba(240, 247, 246, 0.03);
}
body.woocommerce-cart table.shop_table td, body.woocommerce-checkout table.shop_table td {
  border-color: rgba(255, 255, 255, 0.08) !important;
  background: transparent;
}
body.woocommerce-cart table.shop_table a, body.woocommerce-checkout table.shop_table a { color: var(--vpr-teal-ink, #8fd8ce); }
body.woocommerce-cart .woocommerce-Price-amount, body.woocommerce-checkout .woocommerce-Price-amount { color: var(--vpr-ink, #eaf1f4); }
body.woocommerce-cart a.remove { color: #e07575 !important; }
body.woocommerce-cart a.remove:hover { background: #e07575; color: #ffffff !important; }

/* inputs */
body.woocommerce-cart input.input-text, body.woocommerce-cart input.qty,
body.woocommerce-checkout .input-text, body.woocommerce-checkout input.qty,
body.woocommerce-checkout textarea, body.woocommerce-checkout select {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: var(--vpr-ink, #eaf1f4);
  border-radius: 8px;
  padding: 10px 12px;
}
body.woocommerce-cart input.qty { padding: 8px 6px; }
body.woocommerce-checkout .select2-container--default .select2-selection--single {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  height: auto; padding: 6px 8px;
}
body.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--vpr-ink, #eaf1f4); }
body.woocommerce-checkout .select2-dropdown {
  background: var(--vpr-navy-2, #16263f);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: var(--vpr-ink, #eaf1f4);
}
body.woocommerce-checkout .select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--vpr-teal, #2A9D8F); }
body.woocommerce-checkout .select2-search--dropdown .select2-search__field {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: var(--vpr-ink, #eaf1f4);
}

/* coupon: the undersized box */
body.woocommerce-cart .coupon { display: flex; gap: 10px; align-items: stretch; }
body.woocommerce-cart .coupon input[name="coupon_code"] {
  width: 220px !important;
  min-height: 42px;
  font-size: 14px;
}

/* buttons: house teal, retire the stock purple */
body.woocommerce-cart .button, body.woocommerce-checkout .button:not([class*="psc-"]), body.woocommerce-checkout #place_order {
  background: transparent;
  border: 1px solid var(--vpr-teal, #2A9D8F);
  color: var(--vpr-teal-ink, #8fd8ce);
  border-radius: 8px;
  padding: 10px 18px;
}
body.woocommerce-cart .button:hover, body.woocommerce-checkout .button:not([class*="psc-"]):hover,
body.woocommerce-checkout #place_order:hover { background: rgba(42, 157, 143, 0.15); color: #ffffff; }
body.woocommerce-cart .checkout-button, body.woocommerce-checkout #place_order {
  background: var(--vpr-teal, #2A9D8F) !important;
  border-color: var(--vpr-teal, #2A9D8F) !important;
  color: #ffffff !important;
  font-weight: 600;
  min-height: 48px;
}
body.woocommerce-cart .checkout-button:hover, body.woocommerce-checkout #place_order:hover { background: #248d80 !important; }
body.woocommerce-cart .button[name="update_cart"]:disabled,
body.woocommerce-cart .button[name="apply_coupon"]:disabled { opacity: 0.45; color: var(--vpr-muted, #9fb2c6); }

/* checkout panels */
body.woocommerce-checkout #payment {
  background: var(--vpr-navy-2, #16263f) !important;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  color: #c6d3e2;
}
body.woocommerce-checkout #payment div.payment_box {
  background: rgba(255, 255, 255, 0.05) !important;
  color: #c6d3e2 !important;
}
body.woocommerce-checkout #payment div.payment_box::before { border-bottom-color: rgba(255, 255, 255, 0.05) !important; }
body.woocommerce-checkout form .form-row label { color: var(--vpr-muted, #9fb2c6); }
body.woocommerce-checkout .woocommerce-privacy-policy-text,
body.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper { color: var(--vpr-muted, #9fb2c6); }

/* mobile stacked rows */
@media (max-width: 768px) {
  body.woocommerce-cart table.shop_table_responsive tr td::before,
  body.woocommerce-checkout table.shop_table_responsive tr td::before { color: var(--vpr-teal-ink, #8fd8ce); }
  body.woocommerce-cart .coupon { flex-wrap: wrap; }
  body.woocommerce-cart .coupon input[name="coupon_code"] { width: 100% !important; }
  body.woocommerce-cart .coupon .button { width: 100%; }
  /* Keep native commerce columns full-width when Woo layout CSS loads later.
     These selectors do not target the PRISM payment component. */
  body.woocommerce-cart .woocommerce .cart-collaterals .cart_totals,
  body.woocommerce-checkout #customer_details > .col-1,
  body.woocommerce-checkout #customer_details > .col-2,
  body.woocommerce-checkout #customer_details .form-row-first,
  body.woocommerce-checkout #customer_details .form-row-last {
    float: none;
    width: 100%;
    min-width: 0;
  }
  body.woocommerce-checkout #customer_details > .col-2 { margin-top: 24px; }
}
/* VPR CHECKOUT FIELD REINFORCE 2026-09-02: a theme input rule outranks the
   block above on checkout billing fields; match the cart styling. */
body.woocommerce-checkout form .form-row input.input-text,
body.woocommerce-checkout form .form-row textarea {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  color: var(--vpr-ink, #eaf1f4) !important;
}
body.woocommerce-checkout form .form-row input.input-text::placeholder { color: var(--vpr-muted, #9fb2c6); }

/* Keep the native WooCommerce coupon form visible; its AJAX handler and notices
   remain unchanged. Important rules counter Woo's inline hide/slide animation. */
body.woocommerce-checkout .woocommerce-form-coupon-toggle { display: none; }
body.woocommerce-checkout #woocommerce-checkout-form-coupon {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  height: auto !important;
  overflow: visible !important;
  padding: 20px !important;
  margin: 0 0 24px !important;
  border: 1px solid #40536d;
  border-radius: 12px;
  background: #162542;
}
body.woocommerce-checkout #woocommerce-checkout-form-coupon .form-row {
  float: none; width: auto; min-width: 0; padding: 0; margin: 0;
}
body.woocommerce-checkout #woocommerce-checkout-form-coupon .form-row-last { padding-top: 28px; }
body.woocommerce-checkout #woocommerce-checkout-form-coupon label {
  position: static !important; clip: auto !important; clip-path: none !important;
  display: block; width: auto; height: auto; overflow: visible;
  margin: 0 0 8px; padding: 0; font-size: 14px; line-height: 20px;
  color: #eef3f7; font-weight: 600;
}
body.woocommerce-checkout #woocommerce-checkout-form-coupon #coupon_code {
  width: 100%; min-height: 48px; font-size: 16px;
  background: #0e1a30; color: #eef3f7; border: 1px solid #8fa9be;
}
body.woocommerce-checkout #woocommerce-checkout-form-coupon #coupon_code::placeholder { color: #b9c8d8; }
body.woocommerce-checkout #woocommerce-checkout-form-coupon button {
  min-height: 48px; padding: 12px 20px; font-size: 16px; line-height: 24px;
  letter-spacing: normal; white-space: nowrap;
  background: #2a9d8f !important; color: #071728 !important; border: 0;
}
body.woocommerce-checkout #woocommerce-checkout-form-coupon .clear { display: none; }
body.woocommerce-checkout #woocommerce-checkout-form-coupon .coupon-error-notice {
  color: #ffb4a8; font-size: 14px; line-height: 1.5; margin-top: 8px;
}
/* Woo inserts coupon success messages beside the form, outside PRISM. */
body.woocommerce-checkout .woocommerce > .woocommerce-message {
  background: #162542; color: #eef3f7;
  border: 1px solid #40536d; border-left: 3px solid #2a9d8f;
  border-radius: 8px; padding: 16px; margin: 0 0 24px;
}
body.woocommerce-checkout .woocommerce > .woocommerce-message::before { content: none; }
@media (max-width: 520px) {
  body.woocommerce-checkout #woocommerce-checkout-form-coupon { grid-template-columns: minmax(0, 1fr); padding: 16px !important; }
  body.woocommerce-checkout #woocommerce-checkout-form-coupon .form-row-last { padding-top: 0; }
  body.woocommerce-checkout #woocommerce-checkout-form-coupon button { width: 100%; }
}

/* ===== END VPR CART + CHECKOUT DARK ===== */

/* ==========================================================================
   VPR CART DARK FIX 2026-09-02. APPEND-ONLY.
   QA regression found by the owner: the dark cart pass colored text light but
   left article.page-article white, so the Cart / Cart totals headings and the
   RUO notice went light-on-white and disappeared. article.page-article is the
   ONLY light wrapper in the chain (entry-content, container, vp-page-content
   are all already transparent), so clearing it lets the navy body show and the
   dark table and totals panels read as intended.
   Secondary buttons (Apply coupon, Update cart) were losing a specificity tie
   to a WooCommerce rule and rendered light-grey with grey text.
   Rollback: delete down to END VPR CART DARK FIX.
   ========================================================================== */
body.woocommerce-cart article.page-article,
body.woocommerce-checkout article.page-article,
body.woocommerce-cart .entry-content,
body.woocommerce-checkout .entry-content { background: transparent !important; }

/* secondary actions: outlined on the dark ground */
body.woocommerce-cart .woocommerce button.button,
body.woocommerce-cart .woocommerce a.button,
body.woocommerce-cart button.button,
body.woocommerce-checkout .woocommerce button.button:not([class*="psc-"]),
body.woocommerce-checkout button.button:not([class*="psc-"]) {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid var(--vpr-teal, #2A9D8F) !important;
  color: var(--vpr-teal-ink, #8fd8ce) !important;
  border-radius: 8px !important;
}
body.woocommerce-cart .woocommerce button.button:hover,
body.woocommerce-cart button.button:hover,
body.woocommerce-checkout button.button:not([class*="psc-"]):hover {
  background: rgba(42, 157, 143, 0.18) !important;
  color: #ffffff !important;
}
body.woocommerce-cart .woocommerce button.button:disabled,
body.woocommerce-cart button.button:disabled,
body.woocommerce-cart button.button[disabled] {
  background: rgba(255, 255, 255, 0.03) !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
  color: var(--vpr-muted, #9fb2c6) !important;
}

/* primary CTAs stay solid teal and must outrank the secondary rule above */
body.woocommerce-cart .woocommerce a.checkout-button.button,
body.woocommerce-cart a.checkout-button,
body.woocommerce-checkout #place_order,
body.woocommerce-checkout button#place_order {
  background: var(--vpr-teal, #2A9D8F) !important;
  border: 1px solid var(--vpr-teal, #2A9D8F) !important;
  color: #ffffff !important;
}
body.woocommerce-cart .woocommerce a.checkout-button.button:hover,
body.woocommerce-checkout button#place_order:hover { background: #248d80 !important; color: #ffffff !important; }
/* ===== END VPR CART DARK FIX ===== */

/* ===== PRISM OWNS ITS OWN UI 2026-09-02 =================================
   The payment plugin ships checkout.css with its own theming system
   (--psc-surface / --psc-text, plus .psc-checkout--theme-dark|light), and the
   cart/checkout button rules above were overriding its real payment controls
   (Send code, Pay with card). Those selectors now exclude [class*=psc-] so the
   plugin styles its own UI. Cosmetic only either way, but the payment surface
   is not ours to restyle. If its panel should read dark, set PRISM's own theme
   option rather than adding CSS here.
   Our compliance acknowledgment box IS ours, so it matches the dark page. */
body.woocommerce-checkout .vp-rou-acknowledgment {
  background: var(--vpr-navy-2, #16263f) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 12px !important;
  color: #c6d3e2 !important;
}
body.woocommerce-checkout .vp-rou-acknowledgment h3,
body.woocommerce-checkout .vp-rou-acknowledgment h4,
body.woocommerce-checkout .vp-rou-acknowledgment strong { color: var(--vpr-ink, #eaf1f4) !important; }
body.woocommerce-checkout .vp-rou-acknowledgment label,
body.woocommerce-checkout .vp-rou-acknowledgment p,
body.woocommerce-checkout .vp-rou-acknowledgment span { color: #c6d3e2 !important; }
body.woocommerce-checkout .vp-rou-acknowledgment a { color: var(--vpr-teal-ink, #8fd8ce) !important; }
/* ===== END PRISM OWNS ITS OWN UI ===== */

/* ================================================================9========9
   VPR AUTOFILL LEGIBILITY 2026-09-02. APPEND-ONLY.
   No stylesheet on this site handles :-webkit-autofill, not ours, not the
   theme's, not the payment plugin's. So when Chrome or a password manager
   fills a field the browser paints its own light background underneath, and
   on any dark field the light text becomes unreadable while typing.
   These rules apply ONLY in the autofilled state; the normal state of every
   field is untouched. Each context keeps its own colors: ours use the theme
   tokens, PRISM's keep PRISM's own field colors so its design is preserved
   rather than restyled.
   Rollback: delete down to END VPR AUTOFILL LEGIBILITY.
   ======================================================================= */
body.woocommerce-checkout input:-webkit-autofill,
body.woocommerce-checkout textarea:-webkit-autofill,
body.woocommerce-checkout select:-webkit-autofill,
body.woocommerce-cart input:-webkit-autofill {
  -webkit-text-fill-color: var(--vpr-ink, #eaf1f4) !important;
  -webkit-box-shadow: 0 0 0 1000px var(--vpr-navy-2, #16263f) inset !important;
  box-shadow: 0 0 0 1000px var(--vpr-navy-2, #16263f) inset !important;
  caret-color: var(--vpr-ink, #eaf1f4) !important;
}
body.woocommerce-checkout .psc-checkout input:-webkit-autofill,
body.woocommerce-checkout [class*="psc-"] input:-webkit-autofill {
  -webkit-text-fill-color: #fffdf8 !important;
  -webkit-box-shadow: 0 0 0 1000px #0c0b09 inset !important;
  box-shadow: 0 0 0 1000px #0c0b09 inset !important;
  caret-color: #fffdf8 !important;
}
/* ===== END VPR AUTOFILL LEGIBILITY ===== */

/* ==========================================================================
   VPR ORDER RECEIVED DARK 2026-09-02. APPEND-ONLY.
   The thank-you page carries the woocommerce-checkout body class, so the
   dark surface applied to it, but WooCommerce's default #333 text was
   never re-coloured: 10 elements measured at rgb(51,51,51) on navy.
   Order details table was already covered by the cart/checkout dark block.
   Rollback: delete down to END VPR ORDER RECEIVED DARK.
   ========================================================================== */
body.woocommerce-order-received .woocommerce-notice,
body.woocommerce-order-received .woocommerce-thankyou-order-received,
body.woocommerce-order-received .woocommerce-order-overview li,
body.woocommerce-order-received .woocommerce-order p,
body.woocommerce-order-received .woocommerce-customer-details address {
  color: #c6d3e2 !important;
}
body.woocommerce-order-received .woocommerce-thankyou-order-received,
body.woocommerce-order-received .woocommerce-order-overview li strong,
body.woocommerce-order-received h2,
body.woocommerce-order-received h3 {
  color: var(--vpr-ink, #eaf1f4) !important;
}
body.woocommerce-order-received .woocommerce-order-overview,
body.woocommerce-order-received .woocommerce-order-overview li {
  border-color: rgba(255, 255, 255, 0.12) !important;
}
body.woocommerce-order-received mark {
  background: transparent !important;
  color: var(--vpr-teal-ink, #8fd8ce) !important;
}
/* ===== END VPR ORDER RECEIVED DARK ===== */

/* ==========================================================================
   VPR ACCOUNT DARK 2026-09-02. APPEND-ONLY.
   My-account was unreachable until the research gate opened it up (the old
   login wall always redirected it to wp-login.php), so it had never been
   themed and rendered as raw WooCommerce default. This is the same dark
   treatment as VPR CART + CHECKOUT DARK: CSS only, no layout or behavior
   changes, no PRISM surfaces touched.
   Rollback: delete down to END VPR ACCOUNT DARK.
   ========================================================================== */
body.woocommerce-account { background: var(--vpr-navy, #111f38); }
body.woocommerce-account .vault-main { background: var(--vpr-navy, #111f38); color: #c6d3e2; }
body.woocommerce-account .entry-title,
body.woocommerce-account .vault-main h1,
body.woocommerce-account .vault-main h2,
body.woocommerce-account .vault-main h3 { color: var(--vpr-ink, #eaf1f4); }
body.woocommerce-account .entry-title { margin-bottom: 8px; }

/* Login and Register sit side by side on desktop, stacked on phones.
   Woo emits .u-columns.col2-set with no layout CSS of its own. */
body.woocommerce-account #customer_login.u-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 26px;
  align-items: start;
}
body.woocommerce-account #customer_login .u-column1,
body.woocommerce-account #customer_login .u-column2 {
  width: auto; float: none; margin: 0;
}
body.woocommerce-account #customer_login h2 {
  font-size: 20px;
  margin: 0 0 14px;
  letter-spacing: -0.01em;
}

/* Panels */
body.woocommerce-account .woocommerce-form.login,
body.woocommerce-account .woocommerce-form.register,
body.woocommerce-account .woocommerce-MyAccount-content,
body.woocommerce-account .woocommerce-MyAccount-navigation {
  background: var(--vpr-navy-2, #16263f);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 26px 26px 24px;
  margin: 0;
}

/* Fields */
body.woocommerce-account .woocommerce-form-row label,
body.woocommerce-account .woocommerce-MyAccount-content label {
  display: block;
  font-size: 12.5px;
  letter-spacing: 0.02em;
  color: var(--vpr-muted, #9fb2c6);
  margin: 0 0 6px;
}
body.woocommerce-account input[type="text"],
body.woocommerce-account input[type="email"],
body.woocommerce-account input[type="password"],
body.woocommerce-account input[type="tel"],
body.woocommerce-account .woocommerce-Input--text,
body.woocommerce-account .input-text {
  width: 100%;
  background: var(--vpr-navy, #111f38);
  border: 1px solid rgba(143, 216, 206, 0.16);
  border-radius: 8px;
  color: var(--vpr-ink, #eaf1f4);
  padding: 12px 14px;
  font-size: 15px;
  line-height: 1.4;
}
body.woocommerce-account input[type="text"]:focus,
body.woocommerce-account input[type="email"]:focus,
body.woocommerce-account input[type="password"]:focus,
body.woocommerce-account .input-text:focus {
  outline: 2px solid var(--vpr-teal, #2A9D8F);
  outline-offset: 1px;
  border-color: transparent;
}
body.woocommerce-account ::placeholder { color: var(--vpr-faint, #6f849c); }

/* Buttons */
body.woocommerce-account .woocommerce-Button,
body.woocommerce-account .woocommerce-form-login__submit,
body.woocommerce-account .woocommerce-form-register__submit,
body.woocommerce-account .woocommerce-MyAccount-content .button {
  background: var(--vpr-teal, #2A9D8F);
  color: #08131f;
  border: 0;
  border-radius: 8px;
  padding: 13px 26px;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: filter 0.2s ease;
}
body.woocommerce-account .woocommerce-Button:hover,
body.woocommerce-account .woocommerce-form-login__submit:hover,
body.woocommerce-account .woocommerce-form-register__submit:hover { filter: brightness(1.12); }
body.woocommerce-account .woocommerce-Button:focus-visible,
body.woocommerce-account .woocommerce-form-login__submit:focus-visible,
body.woocommerce-account .woocommerce-form-register__submit:focus-visible {
  outline: 2px solid var(--vpr-teal-ink, #8fd8ce);
  outline-offset: 2px;
}

/* Remember me, lost password, privacy text */
body.woocommerce-account .woocommerce-form-login__rememberme {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--vpr-muted, #9fb2c6); font-size: 13.5px; margin: 0 0 14px;
}
body.woocommerce-account .woocommerce-form-login__rememberme input { accent-color: var(--vpr-teal, #2A9D8F); }
body.woocommerce-account .woocommerce-LostPassword { margin: 14px 0 0; font-size: 13.5px; }
body.woocommerce-account .woocommerce-LostPassword a,
body.woocommerce-account .woocommerce-privacy-policy-text a,
body.woocommerce-account .vault-main a { color: var(--vpr-teal-ink, #8fd8ce); }
body.woocommerce-account .woocommerce-privacy-policy-text p,
body.woocommerce-account .woocommerce-form-register p:not(.form-row) {
  color: var(--vpr-muted, #9fb2c6); font-size: 13.5px; line-height: 1.6;
}

/* Notices */
body.woocommerce-account .woocommerce-error,
body.woocommerce-account .woocommerce-message,
body.woocommerce-account .woocommerce-info {
  background: var(--vpr-navy-2, #16263f);
  border: 1px solid rgba(143, 216, 206, 0.16);
  border-left: 3px solid var(--vpr-teal, #2A9D8F);
  border-radius: 8px;
  color: var(--vpr-ink, #eaf1f4);
  padding: 14px 18px;
  list-style: none;
}
body.woocommerce-account .woocommerce-error {
  border-left-color: var(--vpr-amber, #E1A34B);
}
body.woocommerce-account .woocommerce-error a,
body.woocommerce-account .woocommerce-message a,
body.woocommerce-account .woocommerce-info a { color: var(--vpr-teal-ink, #8fd8ce); }

/* Logged-in dashboard */
body.woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; }
body.woocommerce-account .woocommerce-MyAccount-navigation li { border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
body.woocommerce-account .woocommerce-MyAccount-navigation li:last-child { border-bottom: 0; }
body.woocommerce-account .woocommerce-MyAccount-navigation li a {
  display: block; padding: 11px 2px; color: var(--vpr-muted, #9fb2c6);
  text-decoration: none; font-size: 14.5px;
}
body.woocommerce-account .woocommerce-MyAccount-navigation li a:hover,
body.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a { color: var(--vpr-teal-ink, #8fd8ce); }
body.woocommerce-account .woocommerce-MyAccount-content table.shop_table,
body.woocommerce-account .woocommerce-MyAccount-content table.shop_table td,
body.woocommerce-account .woocommerce-MyAccount-content table.shop_table th {
  background: transparent; color: var(--vpr-ink, #eaf1f4);
  border-color: rgba(255, 255, 255, 0.08);
}

@media (max-width: 600px) {
  body.woocommerce-account .woocommerce-form.login,
  body.woocommerce-account .woocommerce-form.register,
  body.woocommerce-account .woocommerce-MyAccount-content,
  body.woocommerce-account .woocommerce-MyAccount-navigation { padding: 20px 18px; }
}
/* ===== END VPR ACCOUNT DARK ===== */

/* ========================================================
   VPR ACCOUNT DARK ADDENDUM 2026-09-02. APPEND-ONLY.
   Visual QA caught two misses in the first account pass:
   the page article still painted a white card behind the
   account header, and WooCommerce default body copy stayed
   dark grey on the navy panel. Scoped to the account pages
   only, so cart and checkout are untouched. CSS only, no
   PRISM surfaces.
   Rollback: delete from this banner to END VPR ACCOUNT DARK ADDENDUM.
   ======================================================== */
body.woocommerce-account article.page-article {
	background: transparent;
	border: 0;
	box-shadow: none;
}
body.woocommerce-account .woocommerce-MyAccount-content,
body.woocommerce-account .woocommerce-MyAccount-content p,
body.woocommerce-account .woocommerce-MyAccount-content li,
body.woocommerce-account .woocommerce-MyAccount-content td,
body.woocommerce-account .woocommerce-MyAccount-content th,
body.woocommerce-account .woocommerce-MyAccount-content dt,
body.woocommerce-account .woocommerce-MyAccount-content dd,
body.woocommerce-account .woocommerce-MyAccount-content address,
body.woocommerce-account .woocommerce-MyAccount-content label,
body.woocommerce-account .woocommerce-MyAccount-content legend,
body.woocommerce-account .woocommerce-MyAccount-content fieldset,
body.woocommerce-account .woocommerce-MyAccount-content h2,
body.woocommerce-account .woocommerce-MyAccount-content h3,
body.woocommerce-account .woocommerce-MyAccount-content strong,
body.woocommerce-account .woocommerce-MyAccount-content mark {
	color: #eaf1f4;
}
body.woocommerce-account .woocommerce-MyAccount-content mark {
	background: transparent;
}
body.woocommerce-account .woocommerce-MyAccount-content em,
body.woocommerce-account .woocommerce-MyAccount-content small,
body.woocommerce-account .woocommerce-MyAccount-content .description,
body.woocommerce-account .woocommerce-MyAccount-content span em {
	color: #9fb2c6;
}
body.woocommerce-account .woocommerce-MyAccount-content legend {
	font-weight: 700;
}
body.woocommerce-account .woocommerce-MyAccount-content fieldset {
	border: 1px solid rgba(143, 216, 206, .16);
	border-radius: 8px;
	padding: 18px 20px;
	margin: 22px 0 0;
}
/* END VPR ACCOUNT DARK ADDENDUM */

/* ========================================================
   VPR ACCOUNT FIELDS 2026-09-02. APPEND-ONLY.
   WooCommerce's own stylesheet loads after main.css, so its
   .woocommerce button.button and input rules were winning
   the tie against the account block above and repainting
   the fields white and the buttons grey. Same declarations,
   one extra class of specificity so they land. No
   !important, no layout change, no PRISM surfaces.
   Rollback: delete from this banner to END VPR ACCOUNT FIELDS.
   ======================================================== */
body.woocommerce-account #customer_login input[type="text"],
body.woocommerce-account #customer_login input[type="email"],
body.woocommerce-account #customer_login input[type="password"],
body.woocommerce-account #customer_login input[type="tel"],
body.woocommerce-account #customer_login textarea,
body.woocommerce-account .woocommerce-MyAccount-content input[type="text"],
body.woocommerce-account .woocommerce-MyAccount-content input[type="email"],
body.woocommerce-account .woocommerce-MyAccount-content input[type="password"],
body.woocommerce-account .woocommerce-MyAccount-content input[type="tel"],
body.woocommerce-account .woocommerce-MyAccount-content select,
body.woocommerce-account .woocommerce-MyAccount-content textarea {
	width: 100%;
	background: var(--vpr-navy, #111f38);
	border: 1px solid rgba(143, 216, 206, .16);
	border-radius: 8px;
	color: var(--vpr-ink, #eaf1f4);
	padding: 12px 14px;
	font-size: 15px;
	line-height: 1.4;
}
body.woocommerce-account #customer_login input:focus,
body.woocommerce-account .woocommerce-MyAccount-content input:focus,
body.woocommerce-account .woocommerce-MyAccount-content select:focus,
body.woocommerce-account .woocommerce-MyAccount-content textarea:focus {
	outline: 2px solid var(--vpr-teal, #2A9D8F);
	outline-offset: 1px;
	border-color: transparent;
}
body.woocommerce-account #customer_login button.button,
body.woocommerce-account #customer_login input.button,
body.woocommerce-account .woocommerce-MyAccount-content button.button,
body.woocommerce-account .woocommerce-MyAccount-content input.button,
body.woocommerce-account .woocommerce-form button.button {
	background: var(--vpr-teal, #2A9D8F);
	color: #08131f;
	border: 0;
	border-radius: 8px;
	padding: 13px 26px;
	font-weight: 700;
	font-size: 13px;
	letter-spacing: .14em;
	text-transform: uppercase;
	cursor: pointer;
	transition: filter .2s ease;
}
body.woocommerce-account #customer_login button.button:hover,
body.woocommerce-account .woocommerce-MyAccount-content button.button:hover,
body.woocommerce-account .woocommerce-form button.button:hover {
	filter: brightness(1.12);
	background: var(--vpr-teal, #2A9D8F);
	color: #08131f;
}
/* END VPR ACCOUNT FIELDS */

/* ===== VP_CTA_TOUCH_FILL — 2026-09-03 =====
 * .vpr-btn-frame's teal fill lives on ::after at translateY(101%) and is
 * revealed only by :hover. On a touch device (hover: none) that rule can
 * never fire, so the primary hero CTA renders as a permanently unfilled
 * outline with no feedback on tap. Give touch devices the filled state at
 * rest, plus a pressed state and the brand tap highlight used on the PDP.
 * Revert: delete this block.
 */
@media (hover: none) {
  .vpr-btn-frame {
    color: #04201c;
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(42, 157, 143, 0.18);
  }
  .vpr-btn-frame::after { transform: translateY(0); }
  .vpr-btn-frame:active { opacity: 0.88; }
}
.vpr-btn-frame:focus-visible {
  outline: 2px solid var(--vpr-teal, #2A9D8F);
  outline-offset: 3px;
}
/* ===== END VP_CTA_TOUCH_FILL ===== */

/* ===== VP_ACCOUNT_NOTICE_ICON — 2026-09-03 =====
 * The account-page notice rule sets `padding: 14px 18px`, overriding Woo's
 * `1em 2em 1em 3.5em`. Woo still absolutely positions its ::before icon at
 * left:1.5em, so the icon lands on top of the "Error:" text on mobile.
 * Give the icon its own gutter and align it to the 14px top padding.
 * Revert: delete this block.
 */
body.woocommerce-account .woocommerce-error,
body.woocommerce-account .woocommerce-message,
body.woocommerce-account .woocommerce-info {
  padding-left: 46px;
}
body.woocommerce-account .woocommerce-error::before,
body.woocommerce-account .woocommerce-message::before,
body.woocommerce-account .woocommerce-info::before {
  left: 16px;
  top: 15px;
  line-height: 1;
}
/* ===== END VP_ACCOUNT_NOTICE_ICON ===== */

/* ===== VP_COA_PILL_LEGIBILITY — 2026-09-04 =====
 * The CoA accreditation pill ships at 10px uppercase, below a comfortable
 * reading floor on a phone, on the one element in that block meant to convey
 * trust. Bump to 11.5px; trim padding and letter-spacing so the pill does not
 * grow taller and still wraps to its own line exactly as before.
 * Revert: delete this block.
 */
.beacon-coa-product-coas .beacon-coa-product-coas__accreditation {
  font-size: 11.5px;
  letter-spacing: 0.4px;
  padding: 4px 10px;
}
/* ===== END VP_COA_PILL_LEGIBILITY ===== */

/* Product evidence stays beside the purchase panel without waiting for its height. */
@media (min-width: 901px) {
  body.single-product div.product:has(> .beacon-coa-product-coas) {
    grid-template-rows: auto 1fr;
    row-gap: 24px;
  }
  body.single-product div.product:has(> .beacon-coa-product-coas) > .woocommerce-product-gallery {
    position: relative;
    top: 0;
    margin-bottom: 0;
  }
  body.single-product div.product:has(> .beacon-coa-product-coas) > .summary {
    grid-row: 1 / span 2;
  }
  body.single-product div.product > .beacon-coa-product-coas {
    grid-column: 1;
    grid-row: 2;
    align-self: start;
    margin: 0;
  }
}
body.single-product .beacon-coa-product-coas {
  --beacon-coa-text: #eaf1f4;
  --beacon-coa-muted: #b5c4d5;
  --beacon-coa-border: #40536d;
  --beacon-coa-bg: #1b2b48;
  --beacon-coa-bg-subtle: #16263f;
  --beacon-coa-accent: #8fd8ce;
  --beacon-coa-on-accent: #102035;
  --beacon-coa-success: #8fd8ce;
  --beacon-coa-success-soft: #1b3546;
  --beacon-coa-success-border: #557985;
}
body.single-product .beacon-coa-card:only-child { flex-basis: 100%; }
body.single-product .beacon-coa-card { padding: 16px; }
body.single-product .beacon-coa-card__badges { margin-bottom: 12px; }
body.single-product .beacon-coa-card__meta { margin-bottom: 12px; padding: 8px 12px; }
body.single-product .beacon-coa-product-coas__header { margin-bottom: 12px; }

/* COA headings sit on Vault's navy surface; report cards keep their light palette. */
body.single-product .beacon-coa-product-coas__title {
  color: #eaf1f4;
}
body.single-product .beacon-coa-product-coas__subtitle {
  color: #afbdce;
}
body.single-product .beacon-coa-product-coas__accreditation,
body.single-product .beacon-coa-product-coas__icon {
  color: #8fd8ce;
  background: #1b3546;
  border-color: #557985;
}

/* Keyboard bypass for the repeated site header; no script dependency. */
.vault-skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 1000001;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  transition: none;
}
.vault-skip-link:focus {
  width: auto;
  height: auto;
  max-width: calc(100vw - 24px);
  padding: 12px 18px;
  clip-path: none;
  white-space: normal;
  color: #111f38;
  background: #eaf1f4;
  border: 2px solid #111f38;
  border-radius: 6px;
  outline: 3px solid #8fd8ce;
  outline-offset: 2px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  text-decoration: underline;
}
#vault-content { scroll-margin-top: 160px; }
/* The storefront bypass is unavailable while the research-access overlay is open. */
body:has(.vprg-ov) > .vault-skip-link { display: none; }

/* Catalog card spacing: keep text, tiers and actions on one inset. */
.woocommerce .vault-shop-main ul.products > li.product {
  display: flex;
  flex-direction: column;
}
.woocommerce .vault-shop-main ul.products > li.product .woocommerce-loop-product__title {
  padding: 18px 18px 0 !important;
  margin: 0 !important;
  line-height: 1.35;
  min-height: calc(2.7em + 18px);
}
.woocommerce .vault-shop-main ul.products > li.product .star-rating {
  margin: 10px 18px 0 !important;
}
.woocommerce .vault-shop-main ul.products > li.product .price {
  padding: 0 !important;
  margin: 12px 18px !important;
}
.woocommerce .vault-shop-main ul.products > li.product .vpr-chips-loop {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 18px 18px !important;
}
.woocommerce .vault-shop-main ul.products > li.product .vpr-chips-loop .vpr-chip {
  box-sizing: border-box;
  padding: 5px 5px;
  font-size: 10px;
  line-height: 1.4;
  white-space: nowrap;
}
.woocommerce .vault-shop-main ul.products > li.product > .button {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1.3;
  margin: auto 18px 18px !important;
  width: calc(100% - 36px) !important;
  min-height: 44px;
}

/* Compact shop introduction and a single catalog toolbar. */
.woocommerce-shop .vault-page-hero { text-align: center; padding: 24px 0; }
.woocommerce-shop .vault-page-title { font-size: clamp(32px, 4vw, 44px); }
.woocommerce-shop .vault-page-hero .vault-container::before { margin-bottom: 8px; }
.vault-shop-wrapper { padding-top: 20px; }
.vault-shop-main .woocommerce-breadcrumb,
.vault-shop-main .vp-research-badge { display: none; }
.woocommerce .vault-shop-main .woocommerce-result-count {
  float: left !important; margin: 0 0 18px; line-height: 44px; color: #9fb2c6;
}
.woocommerce .vault-shop-main .woocommerce-ordering {
  float: right !important; margin: 0 0 18px;
}
.woocommerce .vault-shop-main ul.products { clear: both; }
@media (max-width: 600px) {
  .woocommerce .vault-shop-main .woocommerce-result-count,
  .woocommerce .vault-shop-main .woocommerce-ordering { float: none !important; }
  .woocommerce .vault-shop-main .woocommerce-result-count { line-height: 1.5; margin-bottom: 10px; }
  .woocommerce .vault-shop-main .woocommerce-ordering select { width: 100%; }
}

/* COA archive: use the storefront palette and the plugin's public tokens. */
body.page-id-1283 {
  background: #111f38; color: #eaf1f4;
  --beacon-coa-text: #eaf1f4;
  --beacon-coa-muted: #b5c4d5;
  --beacon-coa-border: #40536d;
  --beacon-coa-bg: #1b2b48;
  --beacon-coa-bg-subtle: #16263f;
  --beacon-coa-accent: #8fd8ce;
  --beacon-coa-on-accent: #102035;
  --beacon-coa-placeholder: #b5c4d5;
  --beacon-coa-error: #ffb4ab;
}
body.page-id-1283 .vault-main,
body.page-id-1283 .page-article { background: #111f38; color: #eaf1f4; }
body.page-id-1283 .vp-page-content { max-width: 1240px; padding: 36px 24px 48px; }
body.page-id-1283 .entry-header { margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid #40536d; }
body.page-id-1283 .entry-title { color: #eaf1f4; font-size: clamp(30px,4vw,44px); }
body.page-id-1283 .entry-content { color: #eaf1f4; }
body.page-id-1283 .beacon-coa-database__title { display: none; }
body.page-id-1283 .entry-content .beacon-coa-result__name { color: #eaf1f4; font-size: 20px; line-height: 1.35; margin: 0; }
body.page-id-1283 .entry-content .beacon-coa-result__batches-heading { color: #b5c4d5; margin: 0; font-size: 11px; }
body.page-id-1283 .entry-content .beacon-coa-result__batch-list { margin: 0; padding: 0; }
body.page-id-1283 .entry-content .beacon-coa-result__batch { margin: 0; }
body.page-id-1283 .entry-content .beacon-coa-btn--outline { color: #eaf1f4; }
body.page-id-1283 .entry-content .beacon-coa-btn--primary { color: #102035; }
body.page-id-1283 .beacon-coa-database a:focus-visible,
body.page-id-1283 .beacon-coa-database button:focus-visible,
body.page-id-1283 .beacon-coa-database input:focus-visible { outline: 2px solid #8fd8ce; outline-offset: 3px; }
body.page-id-1283 .vault-search-form input::placeholder { color: #9fb2c6 !important; }
@media(max-width:600px) {
  body.page-id-1283 .vp-page-content { padding: 24px 16px 32px; }
  body.page-id-1283 .beacon-coa-result__header { gap: 12px; padding: 16px; flex-wrap: wrap; }
  body.page-id-1283 .beacon-coa-result__batch { padding: 16px; }
  body.page-id-1283 .beacon-coa-result__batch-number { overflow-wrap: anywhere; }
}
body.page-id-1283 .entry-content .beacon-coa-result__image { width: 64px; height: 64px; object-fit: cover; margin: 0; }