/**
 * Wolf Conversion Fix Pack
 *
 * Loads after the theme. Every block is gated on a body class the plugin adds
 * only when that fix is switched on, so turning one off in settings genuinely
 * turns it off rather than leaving dead rules behind.
 *
 * All colour, type and spacing comes from the theme's own custom properties,
 * with the Wolf palette as the fallback, so nothing here invents a second
 * design system.
 */

/* ===========================================================================
   1. The homepage hero
   ---------------------------------------------------------------------------
   The headline is now the page-head H1. That section was styled as a generic
   archive title bar - tinted panel, hairline underneath - which is wrong for
   a hero, so on the front page it loses the panel and flows into the content
   that follows it.
   ======================================================================== */

.wfp-hero.home .page-head {
	padding: 56px 0 0;
	background: none;
	border-bottom: 0;
}

.wfp-hero.home .page-head h1 {
	max-width: 20ch;
	margin: 0;
	font-family: var(--display, 'Archivo', sans-serif);
	font-size: clamp(2.1rem, 1.3rem + 2.7vw, 3.7rem);
	font-weight: 800;
	line-height: 1.04;
	letter-spacing: -0.028em;
	color: var(--navy, #0b2a5b);
	text-wrap: balance;
}

/* The content below the headline is the lede and the stat band. The theme
   caps .prose at 74ch for readability, which also caps the stat band - so
   the cap moves from the column onto the prose itself. */
.wfp-hero.home .page-head + .section {
	padding-top: 18px;
}

.wfp-hero.home .prose {
	max-width: none;
}

.wfp-hero.home .wpr-hero-plain {
	max-width: 58ch;
}

.wfp-hero.home .wpr-hero-plain p {
	margin: 0 0 1.5em;
	font-size: 1.12rem;
	line-height: 1.6;
	color: var(--slate, #5b6b82);
}

/* ===========================================================================
   2. Hero call-to-action buttons
   ---------------------------------------------------------------------------
   .wpr-btn and .wpr-btn-ghost are already in the markup; the theme stylesheet
   never defined them, so both rendered as bare inline links 4px apart and read
   as one run-on sentence. These mirror the theme's own .btn and .btn--ghost so
   the page gains no second button style.
   ======================================================================== */

.wfp-buttons .wpr-hero-plain p:has(> .wpr-btn) {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 1.6em;
}

.wfp-buttons .wpr-btn {
	display: inline-flex;
	gap: .5em;
	align-items: center;
	justify-content: center;
	padding: 15px 30px;
	font-family: var(--display, 'Archivo', sans-serif);
	font-size: .94rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -.005em;
	text-decoration: none;
	color: #fff;
	background: linear-gradient(180deg, var(--blue-hot, #3b74f0), var(--blue, #1b4fd8));
	border: 2px solid transparent;
	border-radius: 999px;
	box-shadow: var(--shadow-blue, 0 10px 28px -8px rgba(27, 79, 216, .42));
	transition: transform .22s var(--ease, cubic-bezier(.22, 1, .36, 1)),
		box-shadow .22s var(--ease, cubic-bezier(.22, 1, .36, 1));
}

.wfp-buttons .wpr-btn:hover {
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 16px 34px -10px rgba(27, 79, 216, .5);
}

.wfp-buttons .wpr-btn:active {
	transform: translateY(0);
	box-shadow: var(--shadow-blue, 0 10px 28px -8px rgba(27, 79, 216, .42));
}

.wfp-buttons .wpr-btn-ghost {
	color: var(--blue, #1b4fd8);
	background: rgba(255, 255, 255, .6);
	border-color: var(--line, #d5e0ee);
	box-shadow: none;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

.wfp-buttons .wpr-btn-ghost:hover {
	color: var(--navy, #0b2a5b);
	background: #fff;
	border-color: var(--blue, #1b4fd8);
	box-shadow: var(--shadow, 0 1px 2px rgba(11, 42, 91, .06), 0 8px 24px rgba(11, 42, 91, .08));
}

/* Fallback for browsers without :has() - the gap still beats 4px of
   whitespace between two pill buttons. */
@supports not selector(:has(*)) {
	.wfp-buttons .wpr-btn {
		margin: 0 8px 8px 0;
	}
}

/* ===========================================================================
   3. The stat band
   ---------------------------------------------------------------------------
   ul.wpr-stats-plain carries <strong> figure + <span> label per item but was
   rendering as a disc-bulleted list with figure and label run together:
   "≥99%Minimum released purity". Four columns, hairline separators rather
   than cards, figure above label.
   ======================================================================== */

.wfp-stats .wpr-stats-plain {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0;
	margin: 40px 0 8px;
	padding: 26px 0 0;
	list-style: none;
	border-top: 1px solid var(--line, #d5e0ee);
}

.wfp-stats .wpr-stats-plain > li {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 2px 24px;
	margin: 0;
	list-style: none;
	border-left: 1px solid var(--line, #d5e0ee);
}

.wfp-stats .wpr-stats-plain > li:first-child {
	padding-left: 0;
	border-left: 0;
}

.wfp-stats .wpr-stats-plain > li::marker {
	content: '';
}

.wfp-stats .wpr-stats-plain strong {
	font-family: var(--display, 'Archivo', sans-serif);
	font-size: clamp(1.4rem, 1.1rem + 1vw, 1.95rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -.02em;
	color: var(--blue, #1b4fd8);
}

.wfp-stats .wpr-stats-plain span {
	font-size: .82rem;
	line-height: 1.4;
	color: var(--slate, #5b6b82);
	text-wrap: pretty;
}

@media (max-width: 860px) {
	.wfp-stats .wpr-stats-plain {
		grid-template-columns: repeat(2, 1fr);
		gap: 22px 0;
	}

	.wfp-stats .wpr-stats-plain > li:nth-child(odd) {
		padding-left: 0;
		border-left: 0;
	}
}

@media (max-width: 420px) {
	.wfp-stats .wpr-stats-plain {
		grid-template-columns: 1fr;
		gap: 18px;
	}

	.wfp-stats .wpr-stats-plain > li {
		padding: 0;
		border-left: 0;
	}
}

/* ===========================================================================
   4. Add to cart
   ---------------------------------------------------------------------------
   The most important button on the highest-intent page was rendering in
   WooCommerce's default purple (#7F54B3), a colour that appears nowhere in
   the Wolf palette. Matches the theme's .btn.
   ======================================================================== */

.wfp-atc .single_add_to_cart_button,
.wfp-atc .single_add_to_cart_button.button,
.wfp-atc .single_add_to_cart_button.button.alt {
	padding: 15px 34px;
	font-family: var(--display, 'Archivo', sans-serif);
	font-size: .96rem;
	font-weight: 700;
	letter-spacing: -.005em;
	color: #fff;
	background: linear-gradient(180deg, var(--blue-hot, #3b74f0), var(--blue, #1b4fd8));
	border: 2px solid transparent;
	border-radius: 999px;
	box-shadow: var(--shadow-blue, 0 10px 28px -8px rgba(27, 79, 216, .42));
	transition: transform .22s var(--ease, cubic-bezier(.22, 1, .36, 1)),
		box-shadow .22s var(--ease, cubic-bezier(.22, 1, .36, 1));
}

.wfp-atc .single_add_to_cart_button:hover {
	background: linear-gradient(180deg, var(--blue-hot, #3b74f0), var(--blue, #1b4fd8));
	transform: translateY(-2px);
	box-shadow: 0 16px 34px -10px rgba(27, 79, 216, .5);
}

.wfp-atc .single_add_to_cart_button:active {
	transform: translateY(0);
}

.wfp-atc .single_add_to_cart_button:disabled,
.wfp-atc .single_add_to_cart_button.disabled {
	opacity: .5;
	box-shadow: none;
	transform: none;
}

/* The quantity field sits beside it and was inheriting nothing. */
.wfp-atc form.cart .quantity input.qty {
	height: 52px;
	padding: 0 10px;
	font-family: var(--mono, ui-monospace, Menlo, monospace);
	font-size: 1rem;
	text-align: center;
	border: 1px solid var(--line, #d5e0ee);
	border-radius: var(--radius-sm, 11px);
}

/* ===========================================================================
   5. The mobile fold
   ---------------------------------------------------------------------------
   On a 390x844 screen the price sat at y=721 and Add to Cart at y=1159 - 315px
   below the fold. Two causes: 193px of stacked bars (23% of the viewport)
   before any content, and the volume-tier block sitting between the price and
   the button. The tiers move below the button; the bars get compact.
   ======================================================================== */

.wfp-ann--short {
	display: none;
}

@media (max-width: 700px) {
	.wfp-ann--full {
		display: none;
	}

	.wfp-ann--short {
		display: inline;
	}
}

@media (max-width: 782px) {
	.wfp-fold .announce {
		padding-top: 7px;
		padding-bottom: 7px;
		font-size: .68rem;
		letter-spacing: .02em;
		line-height: 1.35;
	}

	.wfp-fold .topbar {
		padding-top: 6px;
		padding-bottom: 6px;
		font-size: .7rem;
		line-height: 1.3;
	}

	/* The product shot renders about 330px tall on a phone - more than a
	   third of the screen for a vial on white. Capped and centred, it still
	   reads clearly and the buy button clears the fold comfortably rather
	   than by a hairline. Tapping it still opens the full-size gallery. */
	.wfp-fold.single-product .woocommerce-product-gallery__image img,
	.wfp-fold.single-product .woocommerce-product-gallery img {
		max-height: 258px;
		width: auto;
		margin-inline: auto;
		object-fit: contain;
	}

	/* The research-use notice is 107px of the 844px screen. It has to stay
	   above the buy button - it is the compliance statement, and burying it
	   under the purchase would be the wrong trade - so it gets tighter
	   rather than smaller: same words, less air, still well above the 4.5:1
	   contrast floor. */
	.wfp-fold.single-product .notice--warn {
		padding: 10px 12px;
		font-size: .78rem;
		line-height: 1.4;
	}

	.wfp-fold.single-product .notice--warn p {
		margin: 0;
	}

	/* Quantity and Add to Cart share a row; the volume tiers drop below the
	   button. The tiers are a strong upsell but they are not the primary
	   action, and they were pushing the primary action off the screen. */
	.wfp-fold.single-product form.cart {
		display: grid;
		grid-template-columns: auto 1fr;
		align-items: center;
		gap: 12px 10px;
	}

	.wfp-fold.single-product form.cart > .quantity {
		grid-column: 1;
		grid-row: 1;
		margin: 0;
	}

	.wfp-fold.single-product form.cart > .single_add_to_cart_button {
		grid-column: 2;
		grid-row: 1;
		width: 100%;
		margin: 0;
	}

	.wfp-fold.single-product form.cart > .wvp-buttons {
		grid-column: 1 / -1;
		grid-row: 2;
		margin: 10px 0 0;
	}

	/* Anything else inside the form keeps its own full-width row below. */
	.wfp-fold.single-product form.cart > * {
		grid-column: 1 / -1;
	}

	.wfp-fold.single-product form.cart > .quantity {
		grid-column: 1;
	}

	.wfp-fold.single-product form.cart > .single_add_to_cart_button {
		grid-column: 2;
	}
}

/* ===========================================================================
   6. Main navigation
   ---------------------------------------------------------------------------
   The nav list is flex with gap:2px - almost certainly a 2rem that lost its
   unit. With 13px of link padding either side the six items read as one run
   of text: "Shop Lab results Wholesale About FAQ Affiliates". This separates
   them and gives the links a hover and current state they did not have.
   ======================================================================== */

.wfp-nav .site-header ul.nav {
	gap: 14px;
}

.wfp-nav .site-header .nav__link {
	border-radius: 999px;
	transition: color .18s var(--ease, cubic-bezier(.22, 1, .36, 1)),
		background .18s var(--ease, cubic-bezier(.22, 1, .36, 1));
}

.wfp-nav .site-header .nav__link:hover {
	color: var(--navy, #0b2a5b);
	background: var(--surface, #f4f8fd);
}

.wfp-nav .site-header .current-menu-item > .nav__link,
.wfp-nav .site-header .current_page_item > .nav__link,
.wfp-nav .site-header .current-menu-ancestor > .nav__link {
	color: var(--navy, #0b2a5b);
	font-weight: 700;
}

/* The menu collapses on small screens, where 14px between stacked items
   would just be wasted height. */
@media (max-width: 782px) {
	.wfp-nav .site-header ul.nav {
		gap: 2px;
	}
}

/* ===========================================================================
   7. Browser surfaces
   ---------------------------------------------------------------------------
   The parts nobody draws. Selection and the caret ship with browser defaults
   that belong to no design system; these are the site's own.
   ======================================================================== */

::selection {
	color: #fff;
	background: var(--blue, #1b4fd8);
}

body {
	caret-color: var(--blue, #1b4fd8);
}

@media (prefers-reduced-motion: reduce) {
	.wfp-buttons .wpr-btn,
	.wfp-atc .single_add_to_cart_button {
		transition: none;
	}

	.wfp-buttons .wpr-btn:hover,
	.wfp-atc .single_add_to_cart_button:hover {
		transform: none;
	}
}