/**
 * Nova Pex Custom - front-end styles.
 *
 * Everything is scoped to a Nova Pex class (.novapex-home, body.novapex-woo)
 * so disabling a setting or the plugin restores the stock Blocksy/WooCommerce
 * presentation with nothing left behind.
 *
 * 1.  Design tokens
 * 2.  Primitives (container, buttons, eyebrow, reveal)
 * 3.  Theme container neutralisation (Blocksy friendly)
 * 4.  Hero
 * 5.  Trust strip
 * 6.  Product sections, grid and cards
 * 7.  Brand band
 * 8.  Research notice
 * 9.  Admin-only empty notice
 * 10. WooCommerce
 * 11. Responsive refinements
 * 12. Nova Pex header
 * 13. Theme accent neutralisation
 * 14. Nova Pex footer
 * 15. Shop archive and single product polish
 * 16. Cookie banner compatibility
 * 17. Research notice badge and full disclaimer
 * 18. Content page bands (About, Research)
 * 19. Legal / policy pages
 * 20. Legal page shell
 * 21. Manual payment instructions
 */

/* ------------------------------------------------------------------ *
 * 1. Design tokens
 * ------------------------------------------------------------------ */

:root {
	--novapex-deep-navy: #020b20;
	--novapex-navy: #061a40;
	--novapex-royal: #064bef;
	--novapex-electric: #078cff;
	--novapex-light-blue: #eaf5ff;
	--novapex-near-white: #f8fbff;
	--novapex-white: #ffffff;
	--novapex-text: #07152f;
	--novapex-text-soft: #56647a;
	--novapex-border: #dce8f5;

	--novapex-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;

	--novapex-radius-sm: 8px;
	--novapex-radius: 14px;
	--novapex-radius-lg: 22px;

	/*
	 * One token for every product photograph on the storefront, so a vial
	 * looks the same on a homepage card, on the shop archive, on its own
	 * product page and in a related-products row. Restrained on purpose:
	 * enough to soften the corner, never enough to read as a pill. Product
	 * imagery only - sections and bands keep their own radii.
	 *
	 * Harmless on a transparent PNG: those are laid out with object-fit
	 * contain and inset padding, so the rounded corner clips nothing that
	 * was ever painted.
	 */
	--novapex-image-radius: 12px;

	--novapex-shadow-sm: 0 1px 2px rgba(6, 26, 64, 0.05), 0 10px 26px -18px rgba(6, 26, 64, 0.35);
	--novapex-shadow: 0 2px 6px rgba(6, 26, 64, 0.05), 0 24px 48px -30px rgba(6, 26, 64, 0.45);

	--novapex-max: 1320px;
	--novapex-gutter: clamp(20px, 3.2vw, 48px);
	--novapex-section-y: clamp(72px, 7vw, 112px);
	--novapex-section-y-compact: clamp(40px, 4vw, 56px);

	--novapex-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ------------------------------------------------------------------ *
 * 2. Primitives
 * ------------------------------------------------------------------ */

.novapex-home {
	font-family: var(--novapex-font);
	color: var(--novapex-text);
	background: var(--novapex-white);
	text-align: left;
}

/*
 * Full-bleed wrapper.
 *
 * --novapex-vw is document.documentElement.clientWidth, written by the script,
 * so it EXCLUDES the scrollbar; 100vw is only the pre-script fallback. The
 * scoped selector also outranks the theme's own "constrain direct children of
 * .entry-content" rule, which was clamping this element while the negative
 * margins still pulled it left - the actual cause of the white gutters.
 *
 * When the container constraints below have already been neutralised the
 * containing block is the full viewport, the margin resolves to 0 and this
 * becomes a no-op rather than a second break-out.
 */
body.novapex-fullwidth .novapex-home,
body.novapex-fullwidth .novapex-page,
body.novapex-fullwidth .novapex-legal {
	width: var(--novapex-vw, 100vw);
	max-width: var(--novapex-vw, 100vw);
	margin-inline: calc(50% - var(--novapex-vw, 100vw) / 2);
}

.novapex-home *,
.novapex-home *::before,
.novapex-home *::after,
.novapex-page *,
.novapex-page *::before,
.novapex-page *::after,
.novapex-legal *,
.novapex-legal *::before,
.novapex-legal *::after {
	box-sizing: border-box;
}

/*
 * The single inner grid. Header, hero, trust items, section headings, product
 * grids, brand copy and footer all resolve to this same 1320px measure.
 */
.novapex-container,
.novapex-section-inner {
	width: 100%;
	max-width: var(--novapex-max);
	margin-inline: auto;
	padding-inline: var(--novapex-gutter);
}

.novapex-section {
	position: relative;
	padding-block: var(--novapex-section-y);
}

.novapex-home .novapex-section + .novapex-section,
.novapex-page .novapex-section + .novapex-section {
	margin-top: 0;
}

.novapex-eyebrow {
	margin: 0 0 14px;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--novapex-royal);
}

.novapex-eyebrow--light {
	color: #9dc8ff;
}

.novapex-section__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px;
	/* Grid starts 36-46px below the heading block. */
	margin-bottom: clamp(36px, 3.2vw, 46px);
}

.novapex-section__headings {
	max-width: 640px;
}

.novapex-section__title {
	margin: 0;
	font-size: clamp(1.6rem, 1.15rem + 1.7vw, 2.6rem);
	line-height: 1.15;
	letter-spacing: -0.02em;
	font-weight: 650;
	color: var(--novapex-text);
}

.novapex-section__text {
	margin: 12px 0 0;
	font-size: clamp(0.98rem, 0.95rem + 0.15vw, 1.06rem);
	line-height: 1.65;
	color: var(--novapex-text-soft);
}

/* Buttons ------------------------------------------------------------ */

.novapex-home .novapex-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	max-width: 100%;
	padding: 14px 26px;
	border: 1px solid transparent;
	border-radius: var(--novapex-radius-sm);
	font-family: inherit;
	font-size: 0.98rem;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.25s var(--novapex-ease), color 0.25s var(--novapex-ease), border-color 0.25s var(--novapex-ease), transform 0.25s var(--novapex-ease), box-shadow 0.25s var(--novapex-ease);
}

.novapex-home .novapex-btn--lg {
	padding: 17px 34px;
	font-size: 1rem;
	font-weight: 650;
	letter-spacing: 0.04em;
	border-radius: 10px;
}

.novapex-home .novapex-btn--primary {
	background-color: var(--novapex-royal);
	background-image: linear-gradient(135deg, var(--novapex-royal) 0%, var(--novapex-electric) 100%);
	border-color: transparent;
	color: var(--novapex-white);
	box-shadow: 0 16px 32px -18px rgba(6, 75, 239, 0.95);
}

.novapex-home .novapex-btn--primary:hover,
.novapex-home .novapex-btn--primary:focus {
	background-color: var(--novapex-navy);
	background-image: linear-gradient(135deg, var(--novapex-navy) 0%, var(--novapex-royal) 100%);
	border-color: transparent;
	color: var(--novapex-white);
	transform: translateY(-2px);
	box-shadow: 0 24px 44px -20px rgba(6, 75, 239, 0.95);
}

.novapex-home .novapex-btn--outline {
	background: var(--novapex-white);
	border-color: var(--novapex-border);
	color: var(--novapex-text);
}

.novapex-home .novapex-btn--outline:hover,
.novapex-home .novapex-btn--outline:focus {
	border-color: var(--novapex-royal);
	color: var(--novapex-royal);
}

.novapex-home .novapex-btn--ghost {
	padding-inline: 6px;
	background: transparent;
	color: var(--novapex-royal);
}

.novapex-home .novapex-btn--ghost:hover,
.novapex-home .novapex-btn--ghost:focus {
	color: var(--novapex-navy);
}

.novapex-home .novapex-btn--light {
	background: var(--novapex-white);
	border-color: var(--novapex-white);
	color: var(--novapex-navy);
}

.novapex-home .novapex-btn--light:hover,
.novapex-home .novapex-btn--light:focus {
	background: var(--novapex-light-blue);
	border-color: var(--novapex-light-blue);
	color: var(--novapex-navy);
}

.novapex-home a:focus-visible,
.novapex-home button:focus-visible {
	outline: 2px solid var(--novapex-electric);
	outline-offset: 3px;
}

/* Scroll reveal ------------------------------------------------------ */

html.novapex-js .novapex-home [data-novapex-reveal],
html.novapex-js .novapex-page [data-novapex-reveal] {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 0.7s var(--novapex-ease), transform 0.7s var(--novapex-ease);
	will-change: opacity, transform;
}

html.novapex-js .novapex-home [data-novapex-reveal].is-revealed,
html.novapex-js .novapex-page [data-novapex-reveal].is-revealed {
	opacity: 1;
	transform: none;
}

/* ------------------------------------------------------------------ *
 * 3. Theme container neutralisation
 * ------------------------------------------------------------------ */

body.novapex-fullwidth {
	overflow-x: clip;
}

@supports not (overflow-x: clip) {
	body.novapex-fullwidth {
		overflow-x: hidden;
	}
}

/* Content-area containers only. Header and footer containers are nested inside
   header#header / footer#footer and are deliberately left alone. */
body.novapex-fullwidth main [class*="ct-container"],
body.novapex-fullwidth #main-container > [class*="ct-container"],
body.novapex-fullwidth [class*="ct-container"]:has(.novapex-home),
body.novapex-fullwidth [class*="ct-container"]:has(.novapex-page),
body.novapex-fullwidth [class*="ct-container"]:has(.novapex-legal) {
	max-width: none;
	padding-left: 0;
	padding-right: 0;
	grid-template-columns: minmax(0, 1fr);
	gap: 0;
}

body.novapex-fullwidth main .entry-content,
body.novapex-fullwidth main > article,
body.novapex-fullwidth main article.page {
	margin: 0;
	padding: 0;
	max-width: none;
}

/*
 * Blocksy (like every block-aware theme) constrains the direct children of
 * .entry-content to a content width. Redefining the width custom properties
 * for this page only neutralises that at its source, without a global override.
 */
body.novapex-fullwidth main,
body.novapex-fullwidth main .entry-content {
	--theme-content-width: 100%;
	--theme-normal-container-max-width: 100%;
	--content-width: 100%;
	--wp--style--global--content-size: 100%;
	--wp--style--global--wide-size: 100%;
}

body.novapex-fullwidth main .entry-content > *,
body.novapex-fullwidth main > article > .entry-content > * {
	max-width: none;
}

/* No trailing white band between the last section and the Nova Pex footer. */
body.novapex-fullwidth #main-container,
body.novapex-fullwidth #content {
	padding-bottom: 0;
	margin-bottom: 0;
}

body.novapex-fullwidth main .ct-sidebar,
body.novapex-fullwidth main aside#sidebar,
body.novapex-fullwidth main .hero-section,
body.novapex-fullwidth main .page-title,
body.novapex-fullwidth main .entry-header,
body.novapex-fullwidth main .post-navigation,
body.novapex-fullwidth #main-container > .hero-section {
	display: none !important;
}

body.novapex-fullwidth main#main,
body.novapex-fullwidth #main-container > .ct-container,
body.novapex-fullwidth .site-main {
	padding-top: 0;
	padding-bottom: 0;
	margin-top: 0;
	margin-bottom: 0;
}

/* Blocksy adds spacing above the content area on some presets. */
body.novapex-fullwidth .ct-container > .entry-content > .novapex-home,
body.novapex-fullwidth .ct-container > .entry-content > .novapex-page,
body.novapex-fullwidth .ct-container > .entry-content > .novapex-legal {
	margin-block: 0;
}

/* ------------------------------------------------------------------ *
 * 4. Hero
 *
 * A light scientific canvas: layered blue gradients, an extremely subtle
 * grid and a soft radial glow behind the product. No cards, no panels.
 * ------------------------------------------------------------------ */

.novapex-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	width: 100%;
	padding-block: clamp(48px, 6.5vw, 104px);
	background:
		radial-gradient(58% 54% at 78% 10%, rgba(7, 140, 255, 0.16) 0%, rgba(7, 140, 255, 0) 62%),
		radial-gradient(48% 48% at 8% 94%, rgba(6, 75, 239, 0.09) 0%, rgba(6, 75, 239, 0) 70%),
		linear-gradient(177deg, var(--novapex-white) 0%, var(--novapex-near-white) 44%, var(--novapex-light-blue) 100%);
}

/* Extremely subtle measurement grid. */
.novapex-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image:
		linear-gradient(to right, rgba(6, 26, 64, 0.045) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(6, 26, 64, 0.045) 1px, transparent 1px);
	background-size: 64px 64px;
	-webkit-mask-image: radial-gradient(125% 100% at 50% 0%, #000 0%, transparent 84%);
	mask-image: radial-gradient(125% 100% at 50% 0%, #000 0%, transparent 84%);
	pointer-events: none;
}

.novapex-hero__inner {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(26px, 4vw, 56px);
	align-items: center;
}

/* Content ------------------------------------------------------------ */

.novapex-hero__content {
	max-width: 640px;
	min-width: 0;
}

.novapex-home .novapex-hero__eyebrow {
	margin-bottom: clamp(14px, 1.6vw, 20px);
	font-size: 0.72rem;
	font-weight: 650;
	letter-spacing: 0.22em;
	color: var(--novapex-electric);
}

.novapex-hero__title {
	margin: 0;
	font-size: clamp(2.15rem, 7.4vw, 3rem);
	line-height: 1.04;
	letter-spacing: -0.035em;
	font-weight: 700;
	color: var(--novapex-text);
	text-wrap: balance;
}

.novapex-hero__text {
	margin: clamp(16px, 2vw, 26px) 0 0;
	max-width: 580px;
	font-size: clamp(1rem, 0.95rem + 0.3vw, 1.18rem);
	line-height: 1.65;
	color: var(--novapex-text-soft);
}

.novapex-hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px 22px;
	margin-top: clamp(24px, 3vw, 38px);
}

/* Product / contain visual ------------------------------------------- */

.novapex-hero__visual {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 0;
	/* A definite height lets object-fit: contain scale tall vial photography up
	   to the full column height without ever cropping it. */
	height: clamp(260px, 60vw, 400px);
}

.novapex-hero__visual::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: -1;
	width: min(86%, 640px);
	aspect-ratio: 1 / 1;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: radial-gradient(circle, rgba(7, 140, 255, 0.2) 0%, rgba(7, 140, 255, 0.07) 46%, rgba(7, 140, 255, 0) 70%);
	pointer-events: none;
}

.novapex-hero--product .novapex-hero__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
	filter: drop-shadow(0 34px 46px rgba(6, 26, 64, 0.24));
}

/* Soft elliptical ground shadow so the product sits on the canvas instead of
   floating in a box. No frame, no card, no reflection. */
.novapex-hero--product .novapex-hero__visual::after {
	content: "";
	position: absolute;
	bottom: 4%;
	left: 50%;
	width: min(54%, 380px);
	height: 26px;
	transform: translateX(-50%);
	border-radius: 50%;
	background: radial-gradient(ellipse at center, rgba(6, 26, 64, 0.16) 0%, rgba(6, 26, 64, 0) 72%);
	pointer-events: none;
}

/* Decorative treatment when no hero image has been selected. */
.novapex-hero__visual.is-placeholder::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: min(62%, 380px);
	aspect-ratio: 1 / 1;
	transform: translate(-50%, -50%);
	border: 1px solid rgba(6, 75, 239, 0.16);
	border-radius: 50%;
	background: radial-gradient(circle at 38% 32%, rgba(255, 255, 255, 0.95) 0%, rgba(234, 245, 255, 0.5) 62%, rgba(234, 245, 255, 0) 100%);
	box-shadow: 0 30px 60px -34px rgba(6, 26, 64, 0.5);
}

/* Background / cover visual ------------------------------------------ *
 *
 * One photograph filling the whole hero, with the copy laid over it. There
 * is no second column, no framed visual and no isolated product cutout:
 * the image IS the hero canvas, edge to edge, and the copy sits on top of
 * it behind a soft wash that dissolves back into the photograph.
 *
 * --novapex-hero-focus is the single tuning point for the crop. object-fit
 * is cover, so whichever axis is over-long gets trimmed; this decides which
 * part of the photograph survives that trim. Mobile leans hard to the right
 * because a portrait hero crops a landscape photograph horizontally, and the
 * product vials sit on the right of the supplied image.
 * ------------------------------------------------------------------ */

.novapex-hero--background {
	--novapex-hero-focus: 76% 50%;

	display: flex;
	/* The copy sits in the upper portion on a phone, leaving the lower half
	   of the frame showing the photograph rather than covering it. */
	align-items: flex-start;
}

/* The decorative measurement grid is pointless behind an opaque photograph. */
.novapex-hero--background::before {
	display: none;
}

/*
 * Tall enough on a phone that the copy can hold the upper band and still
 * leave the lower third of the frame showing the photograph properly,
 * rather than the copy covering the whole picture.
 */
.novapex-hero.novapex-hero--background {
	min-height: clamp(600px, 140vw, 720px);
}

.novapex-hero--background .novapex-hero__inner {
	z-index: 1;
	grid-template-columns: minmax(0, 1fr);
}

.novapex-hero--background .novapex-hero__content {
	max-width: 560px;
}

.novapex-hero__backdrop {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	border-radius: 0;
	overflow: hidden;
	/* Holds the frame while the photograph decodes, so the hero never flashes
	   through to the page background. */
	background: var(--novapex-near-white);
}

.novapex-hero__backdrop .novapex-hero__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--novapex-hero-focus);
}

/* The readability wash. Not a card and not a panel: it has no edge, no
   border and no radius, and it fades to fully transparent well before the
   right of the frame so it reads as light in the photograph. */
.novapex-hero--background .novapex-hero__backdrop::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(
		180deg,
		rgba(255, 255, 255, 0.96) 0%,
		rgba(255, 255, 255, 0.92) 40%,
		rgba(255, 255, 255, 0.72) 62%,
		rgba(255, 255, 255, 0.2) 80%,
		rgba(255, 255, 255, 0) 95%
	);
}

@media (min-width: 900px) {
	.novapex-hero {
		display: flex;
		align-items: center;
		min-height: 680px;
	}

	.novapex-hero__inner {
		grid-template-columns: minmax(0, 45fr) minmax(0, 55fr);
		gap: clamp(32px, 4vw, 72px);
	}

	.novapex-hero__visual {
		height: min(76vh, 640px);
	}

	.novapex-hero--background {
		/* A wide hero crops a landscape photograph top and bottom rather than
		   left and right, so the vertical half of this is what actually does
		   the work. Slightly above centre keeps the vials and the DNA in
		   frame instead of trimming them off the bottom. */
		--novapex-hero-focus: 62% 45%;

		align-items: center;
		justify-content: center;
	}

	/*
	 * Cinematic without swallowing a short laptop screen: 650-750px on a
	 * normal desktop, and never more than 92% of the viewport height. The
	 * doubled class beats the plain .novapex-hero heights declared for wide
	 * screens further down, whatever order they end up in.
	 */
	.novapex-hero.novapex-hero--background {
		min-height: min(clamp(650px, 58vw, 750px), 92vh);
	}

	.novapex-hero--background .novapex-hero__content {
		max-width: 560px;
	}

	/* Left to right on desktop: solid enough to read against behind the copy,
	   gone entirely by the middle of the frame so the photograph carries the
	   right-hand side untouched. */
	.novapex-hero--background .novapex-hero__backdrop::after {
		background: linear-gradient(
			90deg,
			rgba(255, 255, 255, 0.94) 0%,
			rgba(255, 255, 255, 0.80) 30%,
			rgba(255, 255, 255, 0.20) 52%,
			rgba(255, 255, 255, 0) 68%
		);
	}
}

@media (min-width: 1280px) {
	.novapex-hero__inner {
		grid-template-columns: minmax(0, 44fr) minmax(0, 56fr);
	}

	.novapex-hero__visual {
		height: min(78vh, 700px);
	}
}

@media (min-width: 1440px) {
	.novapex-hero {
		min-height: min(760px, 86vh);
	}
}

/* ------------------------------------------------------------------ *
 * 5. Trust strip
 *
 * A navy band directly under the hero. Line icons are inline SVG drawn in
 * the plugin: no icon font, no library, no external request.
 * ------------------------------------------------------------------ */

.novapex-strip {
	width: 100%;
	margin: 0;
	padding-block: var(--novapex-section-y-compact);
	background: linear-gradient(180deg, var(--novapex-navy) 0%, var(--novapex-deep-navy) 100%);
	color: var(--novapex-white);
	border: 0;
	border-radius: 0;
}

.novapex-strip__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(20px, 2.6vw, 34px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.novapex-strip__item {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
	min-width: 0;
}

.novapex-strip__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 46px;
	height: 46px;
	border-radius: 13px;
	border: 1px solid rgba(125, 180, 255, 0.24);
	background: rgba(7, 140, 255, 0.1);
	color: var(--novapex-electric);
}

.novapex-strip__icon svg {
	width: 23px;
	height: 23px;
}

.novapex-strip__body {
	display: flex;
	flex-direction: column;
	gap: 5px;
	min-width: 0;
	padding-top: 3px;
}

.novapex-strip__title {
	font-size: 0.96rem;
	font-weight: 640;
	line-height: 1.25;
	letter-spacing: 0.01em;
	color: var(--novapex-white);
}

.novapex-strip__text {
	font-size: 0.86rem;
	line-height: 1.55;
	color: rgba(197, 219, 246, 0.78);
}

/* Hairline separators between items rather than boxes. */
@media (min-width: 640px) {
	.novapex-strip__list {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 0;
	}

	.novapex-strip__item {
		padding-inline: clamp(16px, 2vw, 30px);
		border-left: 1px solid rgba(255, 255, 255, 0.09);
	}

	.novapex-strip__item:first-child {
		padding-left: 0;
		border-left: 0;
	}

	.novapex-strip__item:last-child {
		padding-right: 0;
	}
}

@media (max-width: 639px) {
	.novapex-strip__list {
		gap: 18px 16px;
	}

	.novapex-strip__icon {
		width: 40px;
		height: 40px;
		border-radius: 11px;
	}

	.novapex-strip__icon svg {
		width: 20px;
		height: 20px;
	}

	.novapex-strip__title {
		font-size: 0.9rem;
	}
}
/* ------------------------------------------------------------------ *
 * 6. Product sections
 * ------------------------------------------------------------------ */

.novapex-products {
	width: 100%;
	background: var(--novapex-white);
}

.novapex-products--featured {
	padding-block: clamp(56px, 6vw, 96px);
	background: var(--novapex-light-blue);
	border: 0;
}

.novapex-products--featured .novapex-card {
	background: var(--novapex-white);
}

.novapex-home ul.novapex-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	/* Whitespace does the separating work that heavy borders used to. */
	gap: clamp(18px, 2.2vw, 34px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.novapex-home ul.novapex-grid::before,
.novapex-home ul.novapex-grid::after {
	content: none;
}

@media (min-width: 430px) {
	.novapex-home ul.novapex-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.novapex-home ul.novapex-grid--3,
	.novapex-home ul.novapex-grid--4 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 1240px) {
	.novapex-home ul.novapex-grid--4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* Product card ------------------------------------------------------- */

.novapex-home li.novapex-card {
	display: flex;
	flex-direction: column;
	width: auto;
	min-width: 0;
	margin: 0;
	padding: 0;
	float: none;
	list-style: none;
	background: var(--novapex-white);
	/* One soft hairline instead of a heavy frame: the image canvas below
	   already provides its own edge, so a strong border read as doubled. */
	border: 1px solid rgba(226, 237, 248, 0.9);
	border-radius: 12px;
	overflow: hidden;
	transition: transform 0.3s var(--novapex-ease), box-shadow 0.3s var(--novapex-ease), border-color 0.3s var(--novapex-ease);
}

@media (hover: hover) {
	.novapex-home li.novapex-card:hover {
		transform: translateY(-4px);
		border-color: #d5e6f7;
		box-shadow: var(--novapex-shadow);
	}
}

/* Image canvas.
 *
 * Every card reserves the same portrait area so a grid of vials lines up
 * regardless of how tall or narrow each photograph is. object-fit: contain
 * guarantees a tall vial is scaled down whole and is never cropped. */
.novapex-card__media {
	position: relative;
	display: block;
	aspect-ratio: 4 / 5;
	background: linear-gradient(180deg, var(--novapex-white) 0%, var(--novapex-near-white) 100%);
	border-bottom: 1px solid rgba(232, 241, 250, 0.9);
	overflow: hidden;
}

.novapex-card__media img,
.novapex-card__img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	object-position: center;
	padding: 7%;
	/* The photograph is inset from the canvas edge, so its own corners are
	   visible and are softened to match every other product image on the
	   storefront. A transparent PNG loses nothing: the clipped corners were
	   never painted. */
	border-radius: var(--novapex-image-radius);
	transition: transform 0.45s var(--novapex-ease);
}

/* A card with no product image must still occupy the same area. */
.novapex-card__media .woocommerce-placeholder {
	opacity: 0.35;
}

/* Compact classification cues.
 *
 * One row holding at most two short pills: the strengths a variable product
 * is sold in, and the shelf the product sits on. The row keeps a reserved
 * height whether or not it holds anything, so a grid mixing simple and
 * variable products stays aligned. It is never a place for notice text. */
.novapex-home ul.novapex-card__flags,
.woocommerce ul.products li.product ul.novapex-card__flags {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 5px;
	min-height: 22px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.novapex-home li.novapex-card__flag,
.woocommerce ul.products li.product li.novapex-card__flag {
	display: inline-flex;
	align-items: center;
	margin: 0;
	padding: 3px 9px;
	border-radius: 999px;
	font-size: 0.72rem;
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: 0.01em;
	/* A long strength list ("5mg / 10mg / 20mg / 30mg") wraps inside the pill
	   rather than pushing the card wider than its neighbours. */
	overflow-wrap: anywhere;
}

.novapex-home li.novapex-card__flag--strength,
.woocommerce ul.products li.product li.novapex-card__flag--strength {
	background: var(--novapex-light-blue);
	color: var(--novapex-royal);
}

.novapex-home li.novapex-card__flag--class,
.woocommerce ul.products li.product li.novapex-card__flag--class {
	background: transparent;
	border: 1px solid var(--novapex-border);
	color: var(--novapex-text-soft);
	font-size: 0.68rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* The cosmetic shelf is tinted differently from the research one, matching
   the category label above it. Presentation only: neither pill carries a
   claim, and the full notices stay on the product page. */
.novapex-home li.novapex-card__flag--cosmetic,
.woocommerce ul.products li.product li.novapex-card__flag--cosmetic {
	border-color: rgba(15, 124, 108, 0.35);
	color: #0f7c6c;
}

.novapex-home li.novapex-card:hover .novapex-card__img {
	transform: scale(1.035);
}

.novapex-card__badge {
	position: absolute;
	top: 12px;
	left: 12px;
	padding: 5px 10px;
	border-radius: 999px;
	background: var(--novapex-royal);
	color: var(--novapex-white);
	font-size: 0.68rem;
	font-weight: 650;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	line-height: 1;
}

.novapex-card__body {
	display: flex;
	flex-direction: column;
	gap: 7px;
	flex: 1 1 auto;
	padding: 14px 14px 16px;
}

.novapex-card__meta {
	margin: 0;
	/* Category names such as "Research Peptides" must wrap rather than
	   overflow, and never gain any styling that implies a claim. */
	overflow-wrap: anywhere;
	font-size: 0.71rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--novapex-text-soft);
}

/* A cosmetic serum sits on a different shelf from a research material, so
   its category label is tinted differently. Presentation only: the card
   carries no use notice or claim of any kind either way. */
.novapex-card--cosmetic .novapex-card__meta {
	color: #0f7c6c;
}

/* Two lines of title room, reserved on every card, so names such as
   "BPC-157 + TB-500 10mg" wrap without pushing the price and CTA out of
   alignment with their neighbours. */
.novapex-home .novapex-card__title {
	margin: 0;
	min-height: 2.7em;
	font-size: clamp(0.95rem, 0.92rem + 0.15vw, 1.06rem);
	line-height: 1.35;
	font-weight: 620;
	letter-spacing: -0.01em;
	overflow-wrap: break-word;
}

.novapex-home .novapex-card__title a {
	color: var(--novapex-text);
	text-decoration: none;
}

.novapex-home .novapex-card__title a:hover {
	color: var(--novapex-royal);
}

/* Variable products publish a price range ("$40.00 – $180.00") as soon as
   their variation prices are configured. It is allowed to wrap onto a
   second line rather than being clipped. */
.novapex-home .novapex-card__price,
.novapex-home .novapex-card__price .amount {
	font-size: 1rem;
	font-weight: 650;
	line-height: 1.4;
	color: var(--novapex-navy);
}

.novapex-home .novapex-card__price {
	overflow-wrap: anywhere;
}

.novapex-home .novapex-card__price del {
	margin-right: 8px;
	font-weight: 500;
	opacity: 0.55;
}

.novapex-home .novapex-card__price ins {
	text-decoration: none;
	color: var(--novapex-royal);
}

.novapex-card__cta {
	margin-top: auto;
	padding-top: 6px;
}

.novapex-home .novapex-card__cta .button,
.novapex-home .novapex-card__cta .added_to_cart {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 44px;
	margin: 0;
	padding: 11px 16px;
	border: 1px solid var(--novapex-royal);
	border-radius: 8px;
	background: var(--novapex-royal);
	color: var(--novapex-white);
	font-family: inherit;
	/* ADD TO CART for simple products, SELECT OPTIONS for anything with
	   variations. Both are presented identically so the grid stays even. */
	font-size: 0.82rem;
	font-weight: 650;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	transition: background-color 0.25s var(--novapex-ease), color 0.25s var(--novapex-ease), border-color 0.25s var(--novapex-ease);
}

.novapex-home .novapex-card__cta .button:hover,
.novapex-home .novapex-card__cta .button:focus,
.novapex-home .novapex-card__cta .added_to_cart:hover {
	background: var(--novapex-navy);
	border-color: var(--novapex-navy);
	color: var(--novapex-white);
}

.novapex-home .novapex-card__cta .added_to_cart {
	margin-top: 8px;
	background: transparent;
	border-color: var(--novapex-border);
	border-style: dashed;
	color: var(--novapex-text);
}

.novapex-home .novapex-card__cta .button.loading {
	opacity: 0.7;
}

/* ------------------------------------------------------------------ *
 * 7. Brand band
 *
 * Layering is explicit and positive so the selected image is genuinely
 * visible: background image (z 0) -> navy scrim (z 1) -> content (z 2).
 * The scrim is heaviest behind the text column and clears towards the
 * right so the photograph reads through.
 * ------------------------------------------------------------------ */

.novapex-brand {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	width: 100%;
	margin: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	background: linear-gradient(135deg, var(--novapex-deep-navy) 0%, var(--novapex-navy) 58%, #0a2a63 100%);
	color: var(--novapex-white);
}

.novapex-brand__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
	/* Fully opaque: the scrim above provides the contrast, not a faded image. */
	opacity: 1;
	pointer-events: none;
}

.novapex-brand__scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		linear-gradient(100deg, rgba(2, 11, 32, 0.92) 0%, rgba(2, 11, 32, 0.78) 30%, rgba(2, 11, 32, 0.46) 58%, rgba(2, 11, 32, 0.24) 100%),
		linear-gradient(180deg, rgba(2, 11, 32, 0.28) 0%, rgba(2, 11, 32, 0) 32%, rgba(2, 11, 32, 0.34) 100%);
	pointer-events: none;
}

.novapex-brand__inner {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	min-height: clamp(320px, 42vw, 520px);
}

.novapex-brand--compact {
	padding-block: clamp(34px, 4vw, 56px);
}

.novapex-brand--compact .novapex-brand__inner {
	min-height: clamp(220px, 26vw, 320px);
}

.novapex-brand--standard {
	padding-block: clamp(48px, 6vw, 88px);
}

.novapex-brand--large {
	padding-block: clamp(64px, 8vw, 120px);
}

.novapex-brand--large .novapex-brand__inner {
	min-height: clamp(420px, 56vw, 700px);
}

.novapex-brand__content {
	max-width: 620px;
	padding-block: clamp(8px, 2vw, 24px);
}

.novapex-brand__title {
	margin: 0;
	font-size: clamp(1.7rem, 1.2rem + 2vw, 2.9rem);
	line-height: 1.14;
	letter-spacing: -0.025em;
	font-weight: 660;
	color: var(--novapex-white);
	text-shadow: 0 1px 24px rgba(2, 11, 32, 0.45);
	text-wrap: balance;
}

.novapex-brand__text {
	margin: 18px 0 0;
	font-size: clamp(1rem, 0.96rem + 0.2vw, 1.1rem);
	line-height: 1.72;
	color: rgba(232, 241, 255, 0.86);
	text-shadow: 0 1px 18px rgba(2, 11, 32, 0.45);
	max-width: 56ch;
}

.novapex-brand .novapex-btn {
	margin-top: clamp(24px, 3vw, 32px);
}

/* Narrow screens put the text over the middle of the image, so the scrim
   becomes a vertical wash instead of a horizontal one. */
@media (max-width: 899px) {
	.novapex-brand__scrim {
		background: linear-gradient(180deg, rgba(2, 11, 32, 0.9) 0%, rgba(2, 11, 32, 0.78) 45%, rgba(2, 11, 32, 0.86) 100%);
	}
}
/* ------------------------------------------------------------------ *
 * 8. Research notice
 *
 * A full-width navy band, not a card floating in white space: a thin
 * electric-blue top rule, icon, title and body inside the shared inner
 * container. It runs straight into the footer with no white gap.
 * ------------------------------------------------------------------ */

.novapex-notice {
	position: relative;
	width: 100%;
	margin: 0;
	padding-block: clamp(48px, 5vw, 76px);
	background: linear-gradient(180deg, var(--novapex-navy) 0%, #04122c 100%);
	color: var(--novapex-white);
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

/* Thin blue rule across the full width of the band. */
.novapex-notice::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	height: 2px;
	background: linear-gradient(90deg, var(--novapex-royal) 0%, var(--novapex-electric) 55%, rgba(7, 140, 255, 0) 100%);
}

.novapex-notice__card {
	display: flex;
	align-items: flex-start;
	gap: clamp(16px, 2.2vw, 28px);
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

.novapex-notice__mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 46px;
	height: 46px;
	border-radius: 12px;
	border: 1px solid rgba(125, 180, 255, 0.24);
	background: rgba(7, 140, 255, 0.1);
	color: var(--novapex-electric);
}

.novapex-notice__mark svg {
	width: 24px;
	height: 24px;
}

.novapex-notice__body {
	min-width: 0;
}

.novapex-home .novapex-notice__title {
	margin: 0 0 12px;
	font-size: clamp(1rem, 0.9rem + 0.45vw, 1.2rem);
	font-weight: 680;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--novapex-white);
}

.novapex-notice__text {
	font-size: 0.97rem;
	line-height: 1.72;
	color: rgba(203, 223, 247, 0.82);
	max-width: 82ch;
}

.novapex-notice__text p {
	margin: 0 0 10px;
}

.novapex-notice__text p:last-child {
	margin-bottom: 0;
}

.novapex-notice__text a {
	color: #9dc8ff;
}

/* Link from the compact homepage notice out to the full disclaimer. */
.novapex-notice__more {
	margin: 16px 0 0;
}

.novapex-notice .novapex-disclaimer-link {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	color: var(--novapex-electric);
	font-size: 0.9rem;
	font-weight: 650;
	letter-spacing: 0.02em;
	text-decoration: none;
	border-bottom: 1px solid rgba(7, 140, 255, 0.4);
	padding-bottom: 2px;
	transition: color 0.2s var(--novapex-ease), border-color 0.2s var(--novapex-ease);
}

.novapex-notice .novapex-disclaimer-link:hover,
.novapex-notice .novapex-disclaimer-link:focus {
	color: var(--novapex-white);
	border-color: var(--novapex-white);
}

/* The full disclaimer, when an administrator opts to show it inline. */
.novapex-notice--full .novapex-disclaimer__title {
	color: var(--novapex-white);
}

.novapex-notice--full .novapex-disclaimer__body {
	color: rgba(203, 223, 247, 0.82);
}

.novapex-notice--full .novapex-disclaimer__footnote {
	color: var(--novapex-electric);
	border-top-color: rgba(255, 255, 255, 0.12);
}

.novapex-notice__contact {
	margin: 18px 0 0;
	padding-top: 16px;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	font-size: 0.88rem;
	color: rgba(203, 223, 247, 0.7);
}

.novapex-notice__contact a {
	color: var(--novapex-electric);
	text-decoration: none;
	font-weight: 600;
}

.novapex-notice__contact a:hover {
	color: var(--novapex-white);
	text-decoration: underline;
}

.novapex-notice__contact span {
	margin-inline: 8px;
	opacity: 0.5;
}
/* ------------------------------------------------------------------ *
 * 9. Admin-only empty notice
 *
 * A product section with nothing to show renders nothing at all for a
 * visitor. A store manager gets this single compact line instead, kept
 * deliberately close to toolbar height so the shape of the homepage is
 * the same whoever is looking at it.
 * ------------------------------------------------------------------ */

.novapex-adminline {
	width: 100%;
	background: var(--novapex-light-blue);
	border-block: 1px dashed #c3d9f1;
}

.novapex-adminline__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 12px;
	padding-block: 9px;
	font-size: 0.82rem;
	line-height: 1.45;
	color: var(--novapex-text-soft);
}

.novapex-adminline__tag {
	flex: 0 0 auto;
	padding: 2px 8px;
	border-radius: 999px;
	background: var(--novapex-royal);
	color: var(--novapex-white);
	font-size: 0.66rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	line-height: 1.6;
}

.novapex-adminline__text {
	min-width: 0;
}

.novapex-home .novapex-adminline__link {
	color: var(--novapex-royal);
	font-weight: 650;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.novapex-home .novapex-adminline__link:hover {
	color: var(--novapex-navy);
}

/* ------------------------------------------------------------------ *
 * 10. WooCommerce
 * ------------------------------------------------------------------ */

body.novapex-woo {
	--novapex-woo-radius: 12px;
}

/* Buttons ------------------------------------------------------------ */

body.novapex-woo .woocommerce a.button,
body.novapex-woo .woocommerce button.button,
body.novapex-woo .woocommerce input.button,
body.novapex-woo .woocommerce a.button.alt,
body.novapex-woo .woocommerce button.button.alt,
body.novapex-woo .woocommerce input.button.alt,
body.novapex-woo .woocommerce #respond input#submit,
body.novapex-woo .wc-block-components-button {
	border-radius: var(--novapex-woo-radius);
	font-family: var(--novapex-font);
	font-weight: 600;
	letter-spacing: 0.01em;
	line-height: 1.25;
	min-height: 46px;
	padding: 12px 24px;
	transition: background-color 0.25s var(--novapex-ease), color 0.25s var(--novapex-ease), border-color 0.25s var(--novapex-ease), transform 0.2s var(--novapex-ease);
}

body.novapex-woo .woocommerce a.button.alt,
body.novapex-woo .woocommerce button.button.alt,
body.novapex-woo .woocommerce input.button.alt,
body.novapex-woo .woocommerce button.single_add_to_cart_button,
body.novapex-woo .woocommerce #respond input#submit.alt,
body.novapex-woo .wc-block-components-button:not(.is-link) {
	background-color: var(--novapex-royal);
	border-color: var(--novapex-royal);
	color: var(--novapex-white);
}

body.novapex-woo .woocommerce a.button.alt:hover,
body.novapex-woo .woocommerce button.button.alt:hover,
body.novapex-woo .woocommerce input.button.alt:hover,
body.novapex-woo .woocommerce button.single_add_to_cart_button:hover,
body.novapex-woo .wc-block-components-button:not(.is-link):hover {
	background-color: var(--novapex-navy);
	border-color: var(--novapex-navy);
	color: var(--novapex-white);
}

body.novapex-woo .woocommerce a.button:focus-visible,
body.novapex-woo .woocommerce button:focus-visible,
body.novapex-woo .woocommerce input.button:focus-visible {
	outline: 2px solid var(--novapex-electric);
	outline-offset: 2px;
}

/* Notices ------------------------------------------------------------ */

body.novapex-woo .woocommerce-message,
body.novapex-woo .woocommerce-info,
body.novapex-woo .woocommerce-error,
body.novapex-woo .woocommerce-noreviews,
body.novapex-woo p.no-comments {
	border-top: 0;
	border-left: 3px solid var(--novapex-royal);
	border-radius: var(--novapex-woo-radius);
	background: var(--novapex-near-white);
	color: var(--novapex-text);
	font-size: 0.95rem;
	line-height: 1.6;
	padding: 16px 20px;
	box-shadow: var(--novapex-shadow-sm);
}

body.novapex-woo .woocommerce-error {
	border-left-color: #c8322f;
	background: #fff5f5;
}

body.novapex-woo .woocommerce-message::before,
body.novapex-woo .woocommerce-info::before,
body.novapex-woo .woocommerce-error::before {
	color: inherit;
}

/* Shop archive cards -------------------------------------------------- */

body.novapex-woo .woocommerce ul.products li.product {
	border-radius: var(--novapex-woo-radius);
	transition: transform 0.3s var(--novapex-ease), box-shadow 0.3s var(--novapex-ease);
}

body.novapex-woo .woocommerce ul.products li.product:hover {
	transform: translateY(-2px);
}

/*
 * Every product photograph WooCommerce renders: archive cards, the single
 * product gallery, related products, up-sells, cross-sells, the block grid
 * and the cart/checkout line-item thumbnails. All on one token so the
 * storefront stays consistent.
 */
body.novapex-woo .woocommerce ul.products li.product img,
body.novapex-woo .woocommerce div.product div.images img,
body.novapex-woo .woocommerce div.product .woocommerce-product-gallery__image img,
body.novapex-woo .woocommerce .related ul.products li.product img,
body.novapex-woo .woocommerce .upsells ul.products li.product img,
body.novapex-woo .woocommerce .cross-sells ul.products li.product img,
body.novapex-woo .woocommerce table.cart td.product-thumbnail img,
body.novapex-woo .wc-block-grid__product-image img,
body.novapex-woo .wc-block-components-product-image img {
	border-radius: var(--novapex-image-radius);
	max-width: 100%;
	height: auto;
}

/* The gallery wrapper clips its own corners too, so the zoom overlay and
   the flexslider frame follow the photograph rather than squaring it off. */
body.novapex-woo .woocommerce div.product .woocommerce-product-gallery__wrapper,
body.novapex-woo .woocommerce div.product .woocommerce-product-gallery__image {
	border-radius: var(--novapex-image-radius);
	overflow: hidden;
}

body.novapex-woo .woocommerce ul.products li.product .woocommerce-loop-product__title,
body.novapex-woo .woocommerce ul.products li.product h2 {
	font-size: 1rem;
	font-weight: 620;
	letter-spacing: -0.01em;
	line-height: 1.35;
}

body.novapex-woo .woocommerce ul.products li.product .price,
body.novapex-woo .woocommerce div.product p.price {
	color: var(--novapex-navy);
	font-weight: 650;
}

body.novapex-woo .woocommerce ul.products li.product .price ins,
body.novapex-woo .woocommerce div.product p.price ins {
	text-decoration: none;
	color: var(--novapex-royal);
}

body.novapex-woo .woocommerce span.onsale {
	background: var(--novapex-royal);
	color: var(--novapex-white);
	border-radius: 999px;
	font-size: 0.7rem;
	font-weight: 650;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	min-height: 0;
	min-width: 0;
	line-height: 1;
	padding: 7px 12px;
}

/* Two cards per row on a phone -------------------------------------- */

/*
 * The archive grid belongs to the theme, so it is only re-declared inside
 * the mobile breakpoint: from 768px up Blocksy keeps its own column count
 * and nothing here applies. Grid rather than floats, because a float is
 * ignored on a grid or flex item and the theme lays this list out as one
 * of those two. Scoped to body.novapex-woo, so unticking the WooCommerce
 * styling setting removes it with the rest.
 */
@media (max-width: 767.98px) {

	body.novapex-woo .woocommerce ul.products,
	body.novapex-woo .woocommerce-page ul.products {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 22px 14px;
		margin: 0 0 24px;
		padding: 0;
		list-style: none;
	}

	/* The clearfix pseudo-elements WooCommerce and the theme print would
	   otherwise sit in the grid as two empty cells. */
	body.novapex-woo .woocommerce ul.products::before,
	body.novapex-woo .woocommerce ul.products::after,
	body.novapex-woo .woocommerce-page ul.products::before,
	body.novapex-woo .woocommerce-page ul.products::after {
		content: none;
	}

	/* Cards fill their own cell: the percentage widths, floats and gutter
	   margins WooCommerce or the theme sets are all dropped, so a hidden
	   or odd-numbered card can no longer break the row. */
	body.novapex-woo .woocommerce ul.products li.product,
	body.novapex-woo .woocommerce-page ul.products li.product {
		width: auto !important;
		max-width: none;
		margin: 0 !important;
		float: none !important;
		clear: none !important;
	}

	/* Card furniture at half width rather than full width. */
	body.novapex-woo .woocommerce ul.products li.product .woocommerce-loop-product__title,
	body.novapex-woo .woocommerce ul.products li.product h2 {
		font-size: 0.92rem;
	}

	body.novapex-woo .woocommerce ul.products li.product .button {
		display: block;
		width: 100%;
		text-align: center;
	}
}

/* Single product ------------------------------------------------------ */

body.novapex-woo .woocommerce div.product .product_title {
	font-size: clamp(1.55rem, 1.2rem + 1.4vw, 2.35rem);
	line-height: 1.15;
	letter-spacing: -0.025em;
	font-weight: 660;
	color: var(--novapex-text);
}

body.novapex-woo .woocommerce div.product p.price,
body.novapex-woo .woocommerce div.product span.price {
	font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.6rem);
}

body.novapex-woo .woocommerce div.product .woocommerce-product-details__short-description {
	color: var(--novapex-text-soft);
	line-height: 1.7;
}

body.novapex-woo .woocommerce div.product form.cart {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin-bottom: 24px;
}

body.novapex-woo .woocommerce div.product form.cart.variations_form {
	display: block;
}

body.novapex-woo .woocommerce div.product form.cart div.quantity {
	margin: 0;
	float: none;
}

body.novapex-woo .woocommerce div.product form.cart .button {
	float: none;
}

body.novapex-woo .woocommerce div.product form.cart table.variations {
	margin-bottom: 18px;
}

body.novapex-woo .woocommerce div.product form.cart table.variations td,
body.novapex-woo .woocommerce div.product form.cart table.variations th {
	padding: 8px 0;
	vertical-align: middle;
}

body.novapex-woo .woocommerce div.product form.cart table.variations label {
	font-weight: 600;
	color: var(--novapex-text);
}

body.novapex-woo .woocommerce div.product .woocommerce-tabs ul.tabs {
	padding-left: 0;
}

body.novapex-woo .woocommerce div.product .woocommerce-tabs ul.tabs li {
	border-radius: var(--novapex-woo-radius) var(--novapex-woo-radius) 0 0;
}

body.novapex-woo .woocommerce .product_meta {
	font-size: 0.86rem;
	color: var(--novapex-text-soft);
	padding-top: 16px;
	border-top: 1px solid var(--novapex-border);
}

@media (min-width: 1024px) {
	body.novapex-woo .woocommerce div.product div.summary,
	body.novapex-woo .woocommerce div.product .entry-summary {
		max-width: 620px;
	}
}

/* Form controls ------------------------------------------------------- */

body.novapex-woo .woocommerce form .form-row input.input-text,
body.novapex-woo .woocommerce form .form-row textarea,
body.novapex-woo .woocommerce form .form-row select,
body.novapex-woo .woocommerce table.cart td.actions .coupon .input-text,
body.novapex-woo .woocommerce .select2-container .select2-selection--single,
body.novapex-woo .woocommerce input[type="text"],
body.novapex-woo .woocommerce input[type="email"],
body.novapex-woo .woocommerce input[type="tel"],
body.novapex-woo .woocommerce input[type="password"],
body.novapex-woo .woocommerce input[type="number"] {
	border: 1px solid var(--novapex-border);
	border-radius: var(--novapex-woo-radius);
	background: var(--novapex-white);
	color: var(--novapex-text);
	font-family: var(--novapex-font);
	font-size: 1rem;
	line-height: 1.4;
	padding: 12px 14px;
	min-height: 46px;
	max-width: 100%;
	box-shadow: none;
	transition: border-color 0.2s var(--novapex-ease), box-shadow 0.2s var(--novapex-ease);
}

body.novapex-woo .woocommerce form .form-row input.input-text:focus,
body.novapex-woo .woocommerce form .form-row textarea:focus,
body.novapex-woo .woocommerce form .form-row select:focus,
body.novapex-woo .woocommerce input[type="text"]:focus,
body.novapex-woo .woocommerce input[type="email"]:focus,
body.novapex-woo .woocommerce input[type="tel"]:focus,
body.novapex-woo .woocommerce input[type="password"]:focus,
body.novapex-woo .woocommerce input[type="number"]:focus {
	border-color: var(--novapex-electric);
	box-shadow: 0 0 0 3px rgba(7, 140, 255, 0.16);
	outline: none;
}

body.novapex-woo .woocommerce form .form-row label {
	font-size: 0.88rem;
	font-weight: 600;
	color: var(--novapex-text);
	margin-bottom: 6px;
}

/* Quantity ------------------------------------------------------------ */

body.novapex-woo .woocommerce .quantity input.qty {
	border: 1px solid var(--novapex-border);
	border-radius: var(--novapex-woo-radius);
	background: var(--novapex-white);
	color: var(--novapex-text);
	font-family: var(--novapex-font);
	font-size: 1rem;
	font-weight: 600;
	min-height: 46px;
	text-align: center;
}

body.novapex-woo .novapex-qty {
	display: inline-flex;
	align-items: stretch;
	border: 1px solid var(--novapex-border);
	border-radius: var(--novapex-woo-radius);
	background: var(--novapex-white);
	overflow: hidden;
}

body.novapex-woo .novapex-qty .quantity,
body.novapex-woo .novapex-qty div.quantity {
	margin: 0;
	float: none;
	border: 0;
}

body.novapex-woo .novapex-qty input.qty {
	border: 0;
	border-radius: 0;
	width: 56px;
	min-height: 44px;
	padding: 0;
	-moz-appearance: textfield;
	appearance: textfield;
}

body.novapex-woo .novapex-qty input.qty::-webkit-outer-spin-button,
body.novapex-woo .novapex-qty input.qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

body.novapex-woo .novapex-qty__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	min-height: 44px;
	padding: 0;
	border: 0;
	background: var(--novapex-near-white);
	color: var(--novapex-navy);
	font-size: 1.15rem;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.2s var(--novapex-ease), color 0.2s var(--novapex-ease);
}

body.novapex-woo .novapex-qty__btn:hover {
	background: var(--novapex-royal);
	color: var(--novapex-white);
}

body.novapex-woo .novapex-qty__btn:focus-visible {
	outline: 2px solid var(--novapex-electric);
	outline-offset: -2px;
}

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

body.novapex-woo .woocommerce table.shop_table,
body.novapex-woo .woocommerce-cart .cart-collaterals .cart_totals > div,
body.novapex-woo .woocommerce-checkout #order_review,
body.novapex-woo .woocommerce-checkout #payment {
	border: 1px solid var(--novapex-border);
	border-radius: var(--novapex-radius);
	background: var(--novapex-white);
}

body.novapex-woo .woocommerce table.shop_table th {
	font-size: 0.78rem;
	font-weight: 650;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--novapex-text-soft);
}

body.novapex-woo .woocommerce table.shop_table td,
body.novapex-woo .woocommerce table.shop_table th {
	border-color: var(--novapex-border);
	padding: 16px 14px;
}

body.novapex-woo .woocommerce-checkout #payment {
	background: var(--novapex-near-white);
}

body.novapex-woo .woocommerce-checkout #payment div.payment_box {
	background: var(--novapex-light-blue);
	border-radius: var(--novapex-woo-radius);
	color: var(--novapex-text);
}

body.novapex-woo .woocommerce-checkout #payment div.payment_box::before {
	border-bottom-color: var(--novapex-light-blue);
}

body.novapex-woo .woocommerce-cart table.cart img {
	width: 64px;
	height: auto;
	border-radius: var(--novapex-radius-sm);
}

body.novapex-woo .woocommerce-account .woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	border: 1px solid var(--novapex-border);
	border-radius: var(--novapex-radius);
	overflow: hidden;
}

body.novapex-woo .woocommerce-account .woocommerce-MyAccount-navigation li {
	margin: 0;
	border-bottom: 1px solid var(--novapex-border);
}

body.novapex-woo .woocommerce-account .woocommerce-MyAccount-navigation li:last-child {
	border-bottom: 0;
}

body.novapex-woo .woocommerce-account .woocommerce-MyAccount-navigation li a {
	display: block;
	padding: 13px 18px;
	color: var(--novapex-text);
	font-weight: 550;
	text-decoration: none;
	transition: background-color 0.2s var(--novapex-ease), color 0.2s var(--novapex-ease);
}

body.novapex-woo .woocommerce-account .woocommerce-MyAccount-navigation li a:hover,
body.novapex-woo .woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
	background: var(--novapex-light-blue);
	color: var(--novapex-royal);
}

/* ------------------------------------------------------------------ *
 * 11. Responsive refinements
 * ------------------------------------------------------------------ */

/* Mobile and tablet hero: stacked, text first, a visual with real presence. */
@media (max-width: 899px) {
	.novapex-hero {
		padding-block: clamp(34px, 8vw, 64px) clamp(40px, 9vw, 72px);
	}

	.novapex-hero__content {
		max-width: 100%;
	}

	.novapex-hero__visual {
		margin-top: clamp(6px, 2vw, 18px);
	}
}

@media (max-width: 767px) {
	.novapex-hero__visual {
		height: clamp(260px, 62vw, 340px);
	}
}

@media (max-width: 599px) {
	.novapex-section__head {
		align-items: flex-start;
	}

	.novapex-section__cta {
		width: 100%;
	}

	.novapex-notice__card {
		flex-direction: column;
	}

	body.novapex-woo .woocommerce div.product form.cart .button,
	body.novapex-woo .woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
	body.novapex-woo .woocommerce #place_order {
		width: 100%;
	}
}

@media (max-width: 429px) {
	.novapex-strip__item {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
	}

	.novapex-hero {
		padding-block: 30px 38px;
	}

	.novapex-hero__title {
		font-size: clamp(1.95rem, 8.8vw, 2.5rem);
		letter-spacing: -0.03em;
	}

	.novapex-hero__text {
		font-size: 1rem;
	}

	.novapex-hero__actions {
		gap: 12px;
	}

	.novapex-home .novapex-hero__actions .novapex-btn--lg {
		width: 100%;
		padding-inline: 20px;
	}

	.novapex-hero__visual {
		height: 250px;
	}

	/*
	 * The backdrop is deliberately NOT given a height here. It fills the hero
	 * edge to edge at every width; the old fixed height belonged to the
	 * superseded treatment that placed the photograph in a rounded card
	 * beneath the copy.
	 */
}

/* Never let anything push the viewport sideways. */
.novapex-home img,
.novapex-home svg,
.novapex-home video,
.novapex-page img,
.novapex-page svg {
	max-width: 100%;
}

@media (prefers-reduced-motion: reduce) {
	html.novapex-js .novapex-home [data-novapex-reveal],
	html.novapex-js .novapex-page [data-novapex-reveal] {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.novapex-home *,
	.novapex-page *,
	body.novapex-woo * {
		animation-duration: 0.001ms !important;
		transition-duration: 0.001ms !important;
	}
}

/* ------------------------------------------------------------------ *
 * 12. Nova Pex header
 *
 * Rendered by the plugin on wp_body_open. The theme header is hidden
 * visually only while this is active; no theme option is changed.
 * ------------------------------------------------------------------ */

.novapex-header {
	position: relative;
	z-index: 120;
	background: var(--novapex-deep-navy);
	color: var(--novapex-white);
	font-family: var(--novapex-font);
	border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.novapex-header *,
.novapex-header *::before,
.novapex-header *::after {
	box-sizing: border-box;
}

.novapex-header.is-sticky {
	position: sticky;
	top: 0;
}

@media (min-width: 601px) and (max-width: 782px) {
	body.admin-bar .novapex-header.is-sticky {
		top: 46px;
	}
}

@media (min-width: 783px) {
	body.admin-bar .novapex-header.is-sticky {
		top: 32px;
	}
}

.novapex-header .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.novapex-header__inner {
	display: flex;
	align-items: center;
	gap: clamp(12px, 2.4vw, 40px);
	width: 100%;
	max-width: var(--novapex-max);
	min-height: 64px;
	margin-inline: auto;
	padding-inline: var(--novapex-gutter);
}

@media (min-width: 1024px) {
	.novapex-header__inner {
		min-height: 86px;
	}
}

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

.novapex-header__brand {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	flex: 0 1 auto;
	min-width: 0;
	margin-right: clamp(8px, 2vw, 28px);
	color: var(--novapex-white);
	text-decoration: none;
}

.novapex-header__logo {
	display: block;
	/* Height is driven by the admin setting, scaled down on small screens.
	   Width stays auto so horizontal logos keep their aspect ratio. */
	height: min(var(--novapex-logo-h, 46px), 40px);
	width: auto;
	max-width: min(260px, 46vw);
	object-fit: contain;
}

@media (min-width: 1024px) {
	.novapex-header__logo {
		height: var(--novapex-logo-h, 46px);
		max-width: 320px;
	}
}

.novapex-header__wordmark {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
	line-height: 1;
}

.novapex-header__wordmark-main {
	max-width: 100%;
	overflow: hidden;
	font-size: clamp(1rem, 0.94rem + 0.4vw, 1.22rem);
	font-weight: 680;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--novapex-white);
	white-space: nowrap;
	text-overflow: ellipsis;
}

.novapex-header__wordmark-sub {
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	font-size: 0.6rem;
	font-weight: 600;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: #7fb6ff;
	white-space: nowrap;
}

/* Navigation ---------------------------------------------------------- */

.novapex-header__nav {
	display: none;
}

@media (min-width: 1024px) {
	.novapex-header__nav {
		display: block;
		margin-left: auto;
	}
}

.novapex-header .novapex-nav {
	display: flex;
	align-items: center;
	gap: clamp(18px, 2.2vw, 40px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.novapex-header .novapex-nav li {
	position: relative;
	margin: 0;
	padding: 0;
	list-style: none;
}

.novapex-header .novapex-nav a {
	position: relative;
	display: inline-block;
	padding: 12px 1px;
	color: rgba(255, 255, 255, 0.82);
	font-size: 0.81rem;
	font-weight: 600;
	letter-spacing: 0.13em;
	line-height: 1.2;
	text-transform: uppercase;
	text-decoration: none;
	transition: color 0.25s var(--novapex-ease);
}

.novapex-header .novapex-nav a::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 4px;
	left: 0;
	height: 2px;
	border-radius: 2px;
	background: var(--novapex-electric);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.3s var(--novapex-ease);
}

.novapex-header .novapex-nav a:hover,
.novapex-header .novapex-nav a:focus,
.novapex-header .novapex-nav a.is-active,
.novapex-header .novapex-nav .current-menu-item > a,
.novapex-header .novapex-nav .current_page_item > a {
	color: var(--novapex-white);
}

.novapex-header .novapex-nav a:hover::after,
.novapex-header .novapex-nav a:focus::after,
.novapex-header .novapex-nav a.is-active::after,
.novapex-header .novapex-nav .current-menu-item > a::after,
.novapex-header .novapex-nav .current_page_item > a::after {
	transform: scaleX(1);
}

.novapex-header .novapex-nav .sub-menu {
	position: absolute;
	top: 100%;
	left: -16px;
	min-width: 214px;
	margin: 0;
	padding: 8px 0;
	list-style: none;
	background: var(--novapex-navy);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 12px;
	box-shadow: 0 26px 50px -26px rgba(2, 11, 32, 0.95);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity 0.25s var(--novapex-ease), transform 0.25s var(--novapex-ease), visibility 0.25s;
}

.novapex-header .novapex-nav li:hover > .sub-menu,
.novapex-header .novapex-nav li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.novapex-header .novapex-nav .sub-menu a {
	display: block;
	padding: 9px 16px;
	font-size: 0.85rem;
	letter-spacing: 0.04em;
	text-transform: none;
}

.novapex-header .novapex-nav .sub-menu a::after {
	display: none;
}

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

.novapex-header__utils {
	display: flex;
	align-items: center;
	gap: 2px;
	flex: 0 0 auto;
	margin-left: auto;
}

@media (min-width: 1024px) {
	.novapex-header__utils {
		margin-left: clamp(16px, 2vw, 36px);
	}
}

.novapex-header__icon {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 10px;
	background: transparent;
	color: rgba(255, 255, 255, 0.88);
	text-decoration: none;
	cursor: pointer;
	transition: color 0.2s var(--novapex-ease), background-color 0.2s var(--novapex-ease);
}

.novapex-header__icon:hover,
.novapex-header__icon:focus {
	color: var(--novapex-white);
	background: rgba(255, 255, 255, 0.08);
}

.novapex-header__icon:focus-visible {
	outline: 2px solid var(--novapex-electric);
	outline-offset: 2px;
}

.novapex-header .novapex-icon {
	width: 21px;
	height: 21px;
}

.novapex-cart__count {
	position: absolute;
	top: 6px;
	right: 4px;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: 999px;
	background: var(--novapex-electric);
	color: #02142e;
	font-size: 0.66rem;
	font-weight: 700;
	line-height: 18px;
	text-align: center;
}

.novapex-cart__count.is-empty {
	display: none;
}

.novapex-header__burger-icon {
	display: inline-flex;
}

.novapex-header__burger-icon--close {
	display: none;
}

.novapex-header__burger[aria-expanded="true"] .novapex-header__burger-icon--open {
	display: none;
}

.novapex-header__burger[aria-expanded="true"] .novapex-header__burger-icon--close {
	display: inline-flex;
}

@media (min-width: 1024px) {
	.novapex-header__burger {
		display: none;
	}
}

/* Search panel -------------------------------------------------------- */

.novapex-header__search {
	background: var(--novapex-deep-navy);
	border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.novapex-header__search[hidden],
.novapex-header__panel[hidden] {
	display: none;
}

.novapex-header__search-inner {
	max-width: var(--novapex-max);
	margin-inline: auto;
	padding: 14px var(--novapex-gutter) 18px;
}

.novapex-search {
	display: flex;
	gap: 10px;
}

.novapex-search__field {
	flex: 1 1 auto;
	min-width: 0;
	height: 46px;
	padding: 0 14px;
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.06);
	color: var(--novapex-white);
	font-family: inherit;
	font-size: 0.95rem;
}

.novapex-search__field::placeholder {
	color: rgba(255, 255, 255, 0.5);
}

.novapex-search__field:focus {
	outline: none;
	border-color: var(--novapex-electric);
	box-shadow: 0 0 0 3px rgba(7, 140, 255, 0.22);
}

.novapex-search__submit {
	flex: 0 0 auto;
	height: 46px;
	padding: 0 20px;
	border: 0;
	border-radius: 10px;
	background: var(--novapex-royal);
	color: var(--novapex-white);
	font-family: inherit;
	font-size: 0.9rem;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.2s var(--novapex-ease), color 0.2s var(--novapex-ease);
}

.novapex-search__submit:hover {
	background: var(--novapex-electric);
	color: #02142e;
}

/* Mobile panel -------------------------------------------------------- */

.novapex-header__panel {
	background: var(--novapex-deep-navy);
	border-top: 1px solid rgba(255, 255, 255, 0.07);
}

@media (min-width: 1024px) {
	.novapex-header__panel {
		display: none;
	}
}

.novapex-header__panel-inner {
	width: 100%;
	max-width: var(--novapex-max);
	margin-inline: auto;
	padding: 4px var(--novapex-gutter) 22px;
}

.novapex-header .novapex-nav--stacked {
	flex-direction: column;
	align-items: stretch;
	gap: 0;
}

.novapex-header .novapex-nav--stacked li {
	width: 100%;
}

.novapex-header .novapex-nav--stacked a {
	display: block;
	padding: 15px 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.07);
	font-size: 0.88rem;
}

.novapex-header .novapex-nav--stacked a::after {
	display: none;
}

.novapex-header .novapex-nav--stacked a.is-active,
.novapex-header .novapex-nav--stacked .current-menu-item > a {
	color: var(--novapex-electric);
}

.novapex-header .novapex-nav--stacked .sub-menu {
	position: static;
	min-width: 0;
	padding: 0 0 8px 14px;
	background: transparent;
	border: 0;
	box-shadow: none;
	opacity: 1;
	visibility: visible;
	transform: none;
}

.novapex-header__panel-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 18px;
	padding-top: 18px;
}

.novapex-header__panel-link {
	color: #9dc8ff;
	font-size: 0.8rem;
	font-weight: 650;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
}

.novapex-header__panel-link:hover {
	color: var(--novapex-white);
}

.novapex-header__panel-link--soft {
	color: rgba(255, 255, 255, 0.6);
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
}

/* Hide the theme header while the Nova Pex header is active ------------ */

body.novapex-header-hide-theme header#header,
body.novapex-header-hide-theme .ct-header,
body.novapex-header-hide-theme #header.ct-header,
body.novapex-header-hide-theme #offcanvas {
	display: none !important;
}

@media (max-width: 429px) {
	.novapex-header__inner {
		gap: 8px;
		min-height: 60px;
	}

	.novapex-header__icon {
		width: 40px;
		height: 40px;
	}

	.novapex-header__wordmark-main {
		font-size: 0.98rem;
		letter-spacing: 0.13em;
	}

	.novapex-header__wordmark-sub {
		font-size: 0.55rem;
		letter-spacing: 0.26em;
	}

	.novapex-search {
		flex-wrap: wrap;
	}

	.novapex-search__submit {
		width: 100%;
	}
}

/* ------------------------------------------------------------------ *
 * 13. Theme accent neutralisation
 *
 * Redefines the theme's accent palette variables on the front end so the
 * starter accent (the Modern Shop orange) resolves to Nova Pex blue. No
 * theme option is written: removing the body class, switching the setting
 * off, or deactivating the plugin restores the theme palette exactly.
 * ------------------------------------------------------------------ */

body.novapex-brand-colors {
	--theme-palette-color-1: var(--novapex-royal);
	--theme-palette-color-2: var(--novapex-navy);
	--paletteColor1: var(--novapex-royal);
	--paletteColor2: var(--novapex-navy);
	--theme-link-initial-color: var(--novapex-royal);
	--theme-link-hover-color: var(--novapex-electric);
	--theme-button-background-initial-color: var(--novapex-royal);
	--theme-button-background-hover-color: var(--novapex-navy);
	--theme-button-text-initial-color: var(--novapex-white);
	--theme-button-text-hover-color: var(--novapex-white);
}

/* ------------------------------------------------------------------ *
 * 14. Nova Pex footer
 *
 * Rendered by the plugin on wp_footer. The theme footer is hidden
 * visually only while this is active; no theme option is changed.
 * ------------------------------------------------------------------ */

.novapex-footer {
	position: relative;
	width: 100%;
	/* Sits flush against whatever band precedes it. */
	margin-top: 0;
	background: var(--novapex-deep-navy);
	color: var(--novapex-white);
	font-family: var(--novapex-font);
	border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.novapex-footer *,
.novapex-footer *::before,
.novapex-footer *::after {
	box-sizing: border-box;
}

.novapex-footer .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.novapex-footer__inner {
	width: 100%;
	max-width: var(--novapex-max);
	margin-inline: auto;
	padding: clamp(44px, 5vw, 80px) var(--novapex-gutter) clamp(24px, 3vw, 36px);
}

.novapex-footer__top {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(30px, 4vw, 56px);
}

@media (min-width: 900px) {
	.novapex-footer__top {
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.9fr);
		gap: clamp(40px, 5vw, 90px);
	}
}

/* Brand column ------------------------------------------------------- */

.novapex-footer__brand {
	display: inline-flex;
	align-items: center;
	max-width: 100%;
	color: var(--novapex-white);
	text-decoration: none;
}

.novapex-footer__logo {
	display: block;
	width: auto;
	height: clamp(34px, 5vw, 48px);
	max-width: min(260px, 60vw);
	object-fit: contain;
}

.novapex-footer__wordmark {
	display: flex;
	flex-direction: column;
	gap: 4px;
	line-height: 1;
}

.novapex-footer__wordmark-main {
	font-size: 1.16rem;
	font-weight: 680;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--novapex-white);
}

.novapex-footer__wordmark-sub {
	font-size: 0.6rem;
	font-weight: 600;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: #7fb6ff;
}

.novapex-footer__description {
	margin: 18px 0 0;
	max-width: 42ch;
	font-size: 0.92rem;
	line-height: 1.72;
	color: rgba(197, 219, 246, 0.72);
}

.novapex-footer__contact {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 20px;
	margin: 20px 0 0;
	padding: 0;
	list-style: none;
}

.novapex-footer__contact li {
	margin: 0;
	list-style: none;
}

.novapex-footer__contact a {
	color: var(--novapex-electric);
	font-size: 0.92rem;
	font-weight: 600;
	text-decoration: none;
}

.novapex-footer__contact a:hover {
	color: var(--novapex-white);
	text-decoration: underline;
}

/* Link columns ------------------------------------------------------- */

.novapex-footer__cols {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(26px, 3vw, 40px);
}

@media (min-width: 700px) {
	.novapex-footer__cols {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.novapex-footer__col {
	min-width: 0;
}

.novapex-footer .novapex-footer__col-title {
	margin: 0 0 16px;
	font-size: 0.76rem;
	font-weight: 680;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--novapex-white);
}

.novapex-footer__list {
	display: flex;
	flex-direction: column;
	gap: 11px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.novapex-footer__list li {
	margin: 0;
	list-style: none;
}

.novapex-footer__list a {
	color: rgba(197, 219, 246, 0.76);
	font-size: 0.92rem;
	line-height: 1.5;
	text-decoration: none;
	transition: color 0.2s var(--novapex-ease);
}

.novapex-footer__list a:hover,
.novapex-footer__list a:focus {
	color: var(--novapex-white);
}

/* Research badge ----------------------------------------------------- */

/* The badge speaks for the whole catalog, which now holds two classes of
   product, so the second line is a readable sentence rather than a stamp. */
.novapex-footer__badge {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 7px;
	margin-top: clamp(32px, 4vw, 56px);
	padding: clamp(16px, 2vw, 22px) clamp(18px, 2.4vw, 28px);
	border: 1px solid rgba(7, 140, 255, 0.35);
	border-left: 3px solid var(--novapex-electric);
	border-radius: 12px;
	background: rgba(7, 140, 255, 0.07);
}

.novapex-footer__badge-title {
	font-size: 0.86rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--novapex-white);
}

.novapex-footer__badge-text {
	max-width: 68ch;
	font-size: 0.86rem;
	font-weight: 500;
	line-height: 1.6;
	letter-spacing: 0.01em;
	color: rgba(197, 219, 246, 0.78);
}

/* Bottom bar --------------------------------------------------------- */

.novapex-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px 24px;
	margin-top: clamp(26px, 3vw, 40px);
	padding-top: clamp(18px, 2vw, 26px);
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.novapex-footer__copyright {
	margin: 0;
	font-size: 0.84rem;
	color: rgba(197, 219, 246, 0.6);
}

.novapex-footer__social {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.novapex-footer__social li {
	margin: 0;
	list-style: none;
}

.novapex-footer__social-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 10px;
	color: rgba(197, 219, 246, 0.8);
	text-decoration: none;
	transition: color 0.2s var(--novapex-ease), border-color 0.2s var(--novapex-ease), background-color 0.2s var(--novapex-ease);
}

.novapex-footer__social-link:hover,
.novapex-footer__social-link:focus {
	color: var(--novapex-white);
	border-color: rgba(7, 140, 255, 0.5);
	background: rgba(7, 140, 255, 0.12);
}

.novapex-footer .novapex-icon {
	width: 19px;
	height: 19px;
}

/* Hide the theme footer while the Nova Pex footer is active ------------ */

body.novapex-footer-hide-theme footer#footer,
body.novapex-footer-hide-theme .ct-footer,
body.novapex-footer-hide-theme #footer.ct-footer {
	display: none !important;
}

@media (max-width: 599px) {
	.novapex-footer__badge {
		width: 100%;
		flex-direction: column;
		gap: 6px;
	}

	.novapex-footer__bottom {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* ------------------------------------------------------------------ *
 * 15. Shop archive and single product polish
 * ------------------------------------------------------------------ */

body.novapex-woo.woocommerce-shop .hero-section,
body.novapex-woo.tax-product_cat .hero-section,
body.novapex-woo .woocommerce-products-header {
	background: linear-gradient(180deg, var(--novapex-near-white) 0%, var(--novapex-light-blue) 100%);
	border-bottom: 1px solid var(--novapex-border);
}

body.novapex-woo .woocommerce-products-header {
	padding: clamp(28px, 4vw, 56px) 0;
	margin-bottom: clamp(20px, 3vw, 36px);
	text-align: left;
}

body.novapex-woo .woocommerce-products-header__title,
body.novapex-woo.woocommerce-shop .page-title,
body.novapex-woo .hero-section .page-title {
	font-size: clamp(1.8rem, 1.3rem + 1.9vw, 2.9rem);
	line-height: 1.12;
	letter-spacing: -0.028em;
	font-weight: 660;
	color: var(--novapex-text);
}

body.novapex-woo .woocommerce-products-header .term-description,
body.novapex-woo .hero-section .page-description {
	max-width: 62ch;
	font-size: 1rem;
	line-height: 1.68;
	color: var(--novapex-text-soft);
}

body.novapex-woo .woocommerce .woocommerce-result-count,
body.novapex-woo .woocommerce .woocommerce-ordering select {
	font-size: 0.9rem;
	color: var(--novapex-text-soft);
}

/* Archive cards get the same vial-friendly canvas as the homepage: a fixed
   portrait area and contain, so a tall vial is scaled whole and never
   cropped, and every tile in the row lines up. */
body.novapex-woo .woocommerce ul.products li.product a img {
	aspect-ratio: 4 / 5;
	width: 100%;
	height: auto;
	max-height: 100%;
	padding: 6%;
	box-sizing: border-box;
	border-radius: 10px;
	background: linear-gradient(180deg, var(--novapex-white) 0%, var(--novapex-light-blue) 100%);
	object-fit: contain;
	object-position: center;
}

body.novapex-woo .woocommerce ul.products li.product .woocommerce-loop-product__title {
	overflow-wrap: break-word;
}

/* WooCommerce already labels a variable product "Select options" and a
   simple one "Add to cart". Both are presented identically here, so no
   archive card ever implies a default strength. */
body.novapex-woo .woocommerce ul.products li.product .button {
	border-radius: 10px;
	font-size: 0.82rem;
	font-weight: 650;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* Variable products publish a price range once variation prices exist. */
body.novapex-woo .woocommerce ul.products li.product .price {
	line-height: 1.4;
	overflow-wrap: anywhere;
}

/* Single product ----------------------------------------------------- */

body.novapex-woo .novapex-woo-eyebrow {
	margin: 0 0 10px;
	font-size: 0.72rem;
	font-weight: 650;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--novapex-electric);
}

body.novapex-woo.single-product .woocommerce-product-gallery {
	background: linear-gradient(180deg, var(--novapex-white) 0%, var(--novapex-near-white) 100%);
	border: 1px solid var(--novapex-border);
	border-radius: var(--novapex-radius);
	padding: clamp(10px, 1.6vw, 22px);
}

body.novapex-woo.single-product .woocommerce-product-gallery img {
	object-fit: contain;
}

body.novapex-woo .novapex-woo-info {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 22px;
	width: 100%;
	margin: 18px 0 0;
	padding: 16px 0 0;
	border-top: 1px solid var(--novapex-border);
	list-style: none;
}

body.novapex-woo .novapex-woo-info__item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	list-style: none;
	font-size: 0.86rem;
	font-weight: 550;
	color: var(--novapex-text-soft);
}

body.novapex-woo .novapex-woo-info__item .novapex-icon {
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
	color: var(--novapex-royal);
}

/* ------------------------------------------------------------------ *
 * 16. Cookie banner compatibility
 *
 * Recognised consent plugins only, and only spacing/width. Nothing is
 * hidden, and no Accept/Decline control is touched. If none of these
 * plugins is installed, none of this matches anything.
 * ------------------------------------------------------------------ */

body.novapex-cookie-compat #cookie-law-info-bar,
body.novapex-cookie-compat .cky-consent-container .cky-consent-bar,
body.novapex-cookie-compat .cmplz-cookiebanner,
body.novapex-cookie-compat #moove_gdpr_cookie_info_bar .moove-gdpr-info-bar-container {
	padding-top: 14px !important;
	padding-bottom: 14px !important;
	font-size: 0.88rem;
	line-height: 1.5;
}

body.novapex-cookie-compat .cky-consent-container,
body.novapex-cookie-compat .cmplz-cookiebanner.banner-1.bottom-left {
	max-width: min(420px, calc(100vw - 32px));
}

body.novapex-cookie-compat .cmplz-cookiebanner .cmplz-body,
body.novapex-cookie-compat .cky-consent-container .cky-notice-des {
	max-height: 42vh;
	overflow-y: auto;
}

@media (max-width: 599px) {
	body.novapex-cookie-compat .cky-consent-container,
	body.novapex-cookie-compat .cmplz-cookiebanner.banner-1.bottom-left {
		max-width: calc(100vw - 20px);
	}
}

/* ------------------------------------------------------------------ *
 * 17. Research notice badge and full disclaimer
 *
 * One standardised badge, used on single product pages and in the
 * cart / checkout presentation, plus the typographic treatment for the
 * full disclaimer wherever it is published. Static presentation only:
 * there is no dismiss control, no form field and no script, so nothing
 * here can interfere with WooCommerce behaviour.
 * ------------------------------------------------------------------ */

.novapex-rbadge {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	width: 100%;
	box-sizing: border-box;
	margin: 22px 0;
	padding: 16px 18px;
	border: 1px solid rgba(7, 140, 255, 0.28);
	border-left: 3px solid var(--novapex-electric);
	border-radius: 12px;
	background: rgba(7, 140, 255, 0.06);
	clear: both;
}

.novapex-rbadge__mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	margin-top: 1px;
	color: var(--novapex-royal);
}

.novapex-rbadge__mark .novapex-icon {
	width: 20px;
	height: 20px;
}

.novapex-rbadge__body {
	display: flex;
	flex-direction: column;
	gap: 5px;
	min-width: 0;
}

.novapex-rbadge__title {
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	line-height: 1.3;
	color: var(--novapex-navy);
}

.novapex-rbadge__text {
	font-size: 0.9rem;
	font-weight: 500;
	line-height: 1.6;
	color: var(--novapex-text-soft);
}

.novapex-rbadge__link {
	margin-top: 2px;
}

.novapex-rbadge .novapex-disclaimer-link {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	font-size: 0.84rem;
	font-weight: 650;
	color: var(--novapex-royal);
	text-decoration: none;
	border-bottom: 1px solid rgba(6, 75, 239, 0.35);
	padding-bottom: 1px;
	transition: color 0.2s var(--novapex-ease), border-color 0.2s var(--novapex-ease);
}

.novapex-rbadge .novapex-disclaimer-link:hover,
.novapex-rbadge .novapex-disclaimer-link:focus {
	color: var(--novapex-navy);
	border-color: var(--novapex-navy);
}

/* Cart and checkout sit on wider canvases, so the badge reads as a band. */
/* Cosmetic variant.
 *
 * A different accent and a different mark, so a topical product never reads
 * as a research material at a glance. It carries no link: the full research
 * disclaimer does not describe cosmetic products. */
.novapex-rbadge.is-cosmetic {
	border-color: rgba(20, 148, 132, 0.3);
	border-left-color: #14a08c;
	background: rgba(20, 160, 140, 0.07);
}

.novapex-rbadge.is-cosmetic .novapex-rbadge__mark {
	color: #0f7c6c;
}

.novapex-rbadge.is-cosmetic .novapex-rbadge__title {
	color: #0b5a4f;
}

/* A mixed cart shows both notices. They are stacked with a real gap so they
   read as two separate statements, never as one run-on paragraph. */
.novapex-rbadge-group {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0 0 26px;
}

.novapex-rbadge-group .novapex-rbadge {
	margin: 0;
}

.novapex-rbadge--cart,
.novapex-rbadge--cart-cosmetic {
	margin: 0 0 26px;
}

/* Full disclaimer ---------------------------------------------------- */

.novapex-disclaimer {
	max-width: 82ch;
}

.novapex-disclaimer__title {
	margin: 0 0 18px;
	font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.35rem);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	line-height: 1.35;
	color: var(--novapex-navy);
}

.novapex-disclaimer__body {
	font-size: 0.97rem;
	line-height: 1.75;
	color: var(--novapex-text-soft);
}

.novapex-disclaimer__body p {
	margin: 0 0 16px;
}

.novapex-disclaimer__body p:last-child {
	margin-bottom: 0;
}

.novapex-disclaimer__footnote {
	margin: 24px 0 0;
	padding-top: 18px;
	border-top: 1px solid var(--novapex-border);
	font-size: 0.84rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	line-height: 1.6;
	color: var(--novapex-royal);
}

@media (max-width: 599px) {
	.novapex-rbadge {
		gap: 11px;
		padding: 14px 15px;
	}

	.novapex-rbadge__mark {
		width: 22px;
		height: 22px;
	}
}

/* ------------------------------------------------------------------ *
 * 18. Content page bands (About, Research)
 *
 * The [nova_pex_about] and [nova_pex_research] shortcodes render into
 * the same design system as the homepage: full-bleed bands, one shared
 * inner measure, the existing navy / electric blue palette. No new
 * framework, no new font, no external asset.
 * ------------------------------------------------------------------ */

.novapex-page {
	width: 100%;
}

.novapex-pband {
	position: relative;
	width: 100%;
	isolation: isolate;
	overflow: hidden;
}

.novapex-pband__inner {
	position: relative;
	z-index: 2;
}

/* Opening band ------------------------------------------------------- */

.novapex-pband--hero {
	padding-block: clamp(64px, 8vw, 128px);
	background: linear-gradient(160deg, var(--novapex-deep-navy) 0%, var(--novapex-navy) 62%, #072a63 100%);
	color: var(--novapex-white);
	text-align: center;
}

/*
 * A subtle laboratory motif drawn entirely in CSS: a faint dot matrix
 * fading out towards the base of the band. No image request, no asset,
 * and nothing that reads as a claim or a credential.
 */
.novapex-pband--hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background-image: radial-gradient(circle, rgba(125, 180, 255, 0.16) 1px, transparent 1.6px);
	background-size: 26px 26px;
	-webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.85) 0%, transparent 78%);
	mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.85) 0%, transparent 78%);
	pointer-events: none;
}

/* Thin blue rule, matching the research notice band on the homepage. */
.novapex-pband--hero::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 3;
	height: 2px;
	background: linear-gradient(90deg, var(--novapex-royal) 0%, var(--novapex-electric) 55%, rgba(7, 140, 255, 0) 100%);
}

.novapex-pband--hero.has-image .novapex-pband__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}

.novapex-pband--hero.has-image .novapex-pband__scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(180deg, rgba(2, 11, 32, 0.9) 0%, rgba(6, 26, 64, 0.86) 100%);
}

.novapex-page .novapex-pband__title {
	max-width: 20ch;
	margin: 0 auto;
	font-size: clamp(2rem, 1.4rem + 2.6vw, 3.4rem);
	line-height: 1.08;
	letter-spacing: -0.03em;
	font-weight: 660;
	color: var(--novapex-white);
}

.novapex-pband__text {
	max-width: 74ch;
	margin-inline: auto;
	font-size: 1.02rem;
	line-height: 1.78;
}

.novapex-pband__text p {
	margin: 0 0 16px;
}

.novapex-pband__text p:last-child {
	margin-bottom: 0;
}

.novapex-pband--hero .novapex-pband__text {
	margin-top: 26px;
	color: rgba(203, 223, 247, 0.86);
}

.novapex-pband__text--lead p:first-child {
	font-size: 1.1rem;
	color: rgba(219, 234, 252, 0.94);
}

/* Statement band ----------------------------------------------------- */

.novapex-pband--statement {
	padding-block: clamp(56px, 6.5vw, 104px);
	background: var(--novapex-white);
	color: var(--novapex-text);
	text-align: center;
}

.novapex-page .novapex-pband__heading {
	max-width: 26ch;
	margin: 0 auto 22px;
	font-size: clamp(1.35rem, 1.1rem + 1.2vw, 2.05rem);
	line-height: 1.22;
	letter-spacing: -0.02em;
	font-weight: 640;
	color: var(--novapex-text);
}

.novapex-pband--statement .novapex-pband__text {
	color: var(--novapex-text-soft);
}

/* Areas of research -------------------------------------------------- */

.novapex-pband--list {
	padding-block: clamp(56px, 6.5vw, 104px);
	background: linear-gradient(180deg, var(--novapex-near-white) 0%, var(--novapex-light-blue) 100%);
	border-block: 1px solid var(--novapex-border);
	text-align: center;
}

.novapex-page ul.novapex-pband__list {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 12px;
	max-width: 900px;
	margin: 8px auto 0;
	padding: 0;
	list-style: none;
	text-align: left;
}

@media (min-width: 720px) {
	.novapex-page ul.novapex-pband__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px 28px;
	}
}

.novapex-page li.novapex-pband__list-item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 0;
	padding: 13px 16px;
	list-style: none;
	border: 1px solid rgba(226, 237, 248, 0.9);
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.72);
	font-size: 0.96rem;
	line-height: 1.55;
	color: var(--novapex-text);
}

.novapex-pband__bullet {
	flex: 0 0 auto;
	width: 8px;
	height: 8px;
	margin-top: 8px;
	border-radius: 50%;
	background: var(--novapex-electric);
	box-shadow: 0 0 0 4px rgba(7, 140, 255, 0.14);
}

.novapex-pband__note {
	max-width: 78ch;
	margin: clamp(26px, 3vw, 40px) auto 0;
	font-size: 0.93rem;
	line-height: 1.72;
	color: var(--novapex-text-soft);
}

/* Closing research-use band ------------------------------------------ */

.novapex-pband--notice {
	padding-block: clamp(56px, 6.5vw, 104px);
	background: linear-gradient(180deg, var(--novapex-navy) 0%, #04122c 100%);
	color: var(--novapex-white);
	text-align: center;
}

.novapex-pband--notice::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	z-index: 1;
	height: 2px;
	background: linear-gradient(90deg, var(--novapex-royal) 0%, var(--novapex-electric) 55%, rgba(7, 140, 255, 0) 100%);
}

.novapex-page .novapex-pband__heading--notice {
	max-width: 32ch;
	font-size: clamp(1.05rem, 0.92rem + 0.6vw, 1.4rem);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--novapex-white);
}

.novapex-pband--notice .novapex-pband__text {
	font-size: 0.97rem;
	color: rgba(203, 223, 247, 0.82);
}

.novapex-pband__footnote {
	max-width: 46ch;
	margin: clamp(26px, 3vw, 38px) auto 0;
	padding-top: 20px;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	font-size: 0.84rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	line-height: 1.6;
	color: var(--novapex-electric);
}

.novapex-pband__more {
	margin: 18px 0 0;
}

.novapex-pband--notice .novapex-disclaimer-link {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	color: var(--novapex-electric);
	font-size: 0.9rem;
	font-weight: 650;
	text-decoration: none;
	border-bottom: 1px solid rgba(7, 140, 255, 0.4);
	padding-bottom: 2px;
	transition: color 0.2s var(--novapex-ease), border-color 0.2s var(--novapex-ease);
}

.novapex-pband--notice .novapex-disclaimer-link:hover,
.novapex-pband--notice .novapex-disclaimer-link:focus {
	color: var(--novapex-white);
	border-color: var(--novapex-white);
}

@media (max-width: 599px) {
	.novapex-page .novapex-pband__title {
		max-width: none;
	}

	.novapex-page .novapex-pband__heading {
		max-width: none;
	}
}

/* ------------------------------------------------------------------ *
 * 19. Legal / policy pages
 *
 * These read as documents, not as a stack of cards. A navy masthead,
 * then one quiet measure of text on white: numbered sections separated
 * by a hairline rather than boxed, generous leading, and a comfortable
 * line length. Nothing here is a container for its own sake.
 * ------------------------------------------------------------------ */

.novapex-legal {
	width: 100%;
	background: var(--novapex-white);
}

.novapex-legal__measure {
	width: 100%;
	max-width: 920px;
	margin-inline: auto;
	padding-inline: var(--novapex-gutter);
}

/* Masthead ----------------------------------------------------------- */

.novapex-legal__head {
	position: relative;
	padding-block: clamp(48px, 6vw, 92px);
	background: linear-gradient(160deg, var(--novapex-deep-navy) 0%, var(--novapex-navy) 70%, #072a63 100%);
	color: var(--novapex-white);
}

.novapex-legal__head::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 2px;
	background: linear-gradient(90deg, var(--novapex-royal) 0%, var(--novapex-electric) 55%, rgba(7, 140, 255, 0) 100%);
}

.novapex-legal .novapex-legal__title {
	margin: 0;
	font-size: clamp(1.9rem, 1.4rem + 2.2vw, 3rem);
	line-height: 1.1;
	letter-spacing: -0.03em;
	font-weight: 660;
	color: var(--novapex-white);
}

.novapex-legal__updated {
	margin: 16px 0 0;
	font-size: 0.86rem;
	letter-spacing: 0.02em;
	color: rgba(203, 223, 247, 0.78);
}

/* Document body ------------------------------------------------------ */

.novapex-legal__body {
	padding-block: clamp(44px, 5vw, 80px);
	font-size: 1rem;
	line-height: 1.8;
	color: var(--novapex-text-soft);
}

.novapex-legal__body > .novapex-legal__measure > p:first-child {
	font-size: 1.08rem;
	line-height: 1.75;
	color: var(--novapex-text);
}

.novapex-legal__body p {
	margin: 0 0 18px;
}

.novapex-legal__body p:last-child {
	margin-bottom: 0;
}

/* Numbered sections: separated by a rule, never boxed. */
.novapex-legal__section {
	margin-top: clamp(34px, 4vw, 52px);
	padding-top: clamp(28px, 3.4vw, 44px);
	border-top: 1px solid var(--novapex-border);
}

.novapex-legal .novapex-legal__heading {
	margin: 0 0 18px;
	font-size: clamp(1rem, 0.92rem + 0.4vw, 1.18rem);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	line-height: 1.35;
	color: var(--novapex-navy);
}

.novapex-legal .novapex-legal__sub {
	margin: 26px 0 12px;
	font-size: 1rem;
	font-weight: 650;
	letter-spacing: -0.005em;
	color: var(--novapex-text);
}

.novapex-legal ul.novapex-legal__list {
	margin: 0 0 18px;
	padding-left: 0;
	list-style: none;
}

.novapex-legal ul.novapex-legal__list li {
	position: relative;
	margin: 0 0 9px;
	padding-left: 22px;
	list-style: none;
	line-height: 1.7;
}

.novapex-legal ul.novapex-legal__list li::before {
	content: "";
	position: absolute;
	top: 0.72em;
	left: 4px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--novapex-electric);
}

/* Contact block ------------------------------------------------------ */

.novapex-legal__contact {
	margin: 22px 0 0;
	padding: 22px 24px;
	border-left: 3px solid var(--novapex-electric);
	background: var(--novapex-near-white);
	border-radius: 0 10px 10px 0;
}

.novapex-legal .novapex-legal__contact-name {
	margin: 0 0 12px;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--novapex-navy);
}

.novapex-legal ul.novapex-legal__contact-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.novapex-legal ul.novapex-legal__contact-list li {
	margin: 0 0 8px;
	padding: 0;
	list-style: none;
	line-height: 1.7;
}

.novapex-legal ul.novapex-legal__contact-list li:last-child {
	margin-bottom: 0;
}

.novapex-legal__contact-label {
	font-weight: 650;
	color: var(--novapex-text);
}

.novapex-legal__contact-value a {
	color: var(--novapex-royal);
	text-decoration: none;
	border-bottom: 1px solid rgba(6, 75, 239, 0.3);
}

.novapex-legal__contact-value a:hover {
	color: var(--novapex-navy);
	border-color: var(--novapex-navy);
}

/* Closing notice and strapline --------------------------------------- */

.novapex-legal__callout {
	margin-top: clamp(34px, 4vw, 52px);
	padding: clamp(24px, 3vw, 34px);
	border: 1px solid rgba(7, 140, 255, 0.28);
	border-left: 3px solid var(--novapex-electric);
	border-radius: 12px;
	background: rgba(7, 140, 255, 0.06);
}

.novapex-legal .novapex-legal__callout-title {
	margin: 0 0 14px;
	font-size: 0.86rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--novapex-navy);
}

.novapex-legal__strap {
	margin: 22px 0 0;
	font-size: 0.84rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	line-height: 1.7;
	color: var(--novapex-royal);
}

.novapex-legal__section .novapex-legal__strap,
.novapex-legal__callout .novapex-legal__strap {
	margin-top: 14px;
}

/* The document-closing strapline sits apart from the last section. */
.novapex-legal__body > .novapex-legal__measure > .novapex-legal__strap {
	margin-top: clamp(34px, 4vw, 52px);
	padding-top: clamp(24px, 3vw, 34px);
	border-top: 1px solid var(--novapex-border);
}

@media (max-width: 599px) {
	.novapex-legal__body {
		font-size: 0.97rem;
		line-height: 1.75;
	}

	.novapex-legal__contact {
		padding: 18px 18px;
	}

	.novapex-legal ul.novapex-legal__list li {
		padding-left: 18px;
	}
}

/* ------------------------------------------------------------------ *
 * 20. Legal page shell
 * 21. Manual payment instructions
 *
 * The navy masthead has to start immediately under the Nova Pex header.
 * Section 3 zeroes the bottom spacing of #main-container and #content but
 * not the top, and its last-mile rules name .novapex-home and
 * .novapex-page only - the legal document root is .novapex-legal, so it
 * fell through all of them and kept the theme's page-top spacing.
 *
 * Everything below is scoped to body.novapex-legal-active, which is set
 * only on a page that actually renders a Nova Pex legal document. No
 * other template, and no other Nova Pex page, is touched.
 * ------------------------------------------------------------------ */

/* Every wrapper that can sit between the header and the masthead. Whichever
   one the theme puts its page-top spacing on, it resolves to zero here. */
body.novapex-legal-active #main-container,
body.novapex-legal-active #content,
body.novapex-legal-active main#main,
body.novapex-legal-active .site-main,
body.novapex-legal-active main > [class*="ct-container"],
body.novapex-legal-active #main-container > [class*="ct-container"],
body.novapex-legal-active #content > [class*="ct-container"],
body.novapex-legal-active main > article,
body.novapex-legal-active article.page,
body.novapex-legal-active .entry-content,
body.novapex-legal-active .entry-content > .novapex-legal,
body.novapex-legal-active .novapex-legal {
	padding-top: 0 !important;
	margin-top: 0 !important;
	border-top: 0 !important;
}

/*
 * An empty page-title / hero wrapper is removed from the layout, not
 * covered over: display:none takes it out of flow entirely, so it
 * contributes no height and no spacing of its own.
 */
body.novapex-legal-active .hero-section,
body.novapex-legal-active [class*="hero-section"],
body.novapex-legal-active .page-title,
body.novapex-legal-active .entry-header,
body.novapex-legal-active .ct-page-title,
body.novapex-legal-active .post-navigation {
	display: none !important;
}

/*
 * A stray empty paragraph or container left by the editor ahead of the
 * shortcode would otherwise show as a band of white. Only genuinely empty
 * elements are removed, and only as direct children of the content area.
 */
body.novapex-legal-active .entry-content > p:empty,
body.novapex-legal-active .entry-content > div:empty,
body.novapex-legal-active .entry-content > br:first-child,
body.novapex-legal-active main > div:empty {
	display: none !important;
}

/* The masthead paints to the top edge of the content area. Its own internal
   padding, and the electric-blue rule beneath it, are untouched. */
body.novapex-legal-active .novapex-legal__head {
	margin-top: 0;
}

/* ------------------------------------------------------------------ *
 * 21. Manual payment instructions
 *
 * Shown on the order-received page and, with the same markup, inside
 * the customer's order email. Nothing here is decorative: it is the
 * information someone needs in order to pay, so it is set for reading
 * rather than for styling.
 * ------------------------------------------------------------------ */

.novapex-pay {
	margin: 0 0 clamp(24px, 3vw, 36px);
	padding: clamp(20px, 2.6vw, 30px);
	border: 1px solid rgba(7, 140, 255, 0.28);
	border-left: 3px solid var(--novapex-electric, #078CFF);
	border-radius: 12px;
	background: rgba(7, 140, 255, 0.06);
}

.novapex-pay .novapex-pay__title {
	margin: 0 0 12px;
	font-size: 0.86rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	line-height: 1.4;
	color: var(--novapex-navy, #061A40);
}

.novapex-pay__lead {
	margin: 0 0 16px;
	font-size: 1rem;
	line-height: 1.6;
	color: var(--novapex-text, #07152f);
}

.novapex-pay__how {
	margin: 0 0 10px;
	font-weight: 650;
	color: var(--novapex-text, #07152f);
}

.novapex-pay ul.novapex-pay__details {
	margin: 0 0 16px;
	padding: 0;
	list-style: none;
}

.novapex-pay ul.novapex-pay__details li {
	margin: 0 0 7px;
	padding: 0;
	list-style: none;
	line-height: 1.65;
	overflow-wrap: anywhere;
}

.novapex-pay__label {
	font-weight: 650;
	color: var(--novapex-text, #07152f);
}

.novapex-pay__reference {
	margin: 0 0 10px;
}

.novapex-pay .novapex-pay__code {
	display: inline-block;
	padding: 3px 9px;
	border-radius: 6px;
	background: var(--novapex-white, #fff);
	border: 1px solid rgba(7, 140, 255, 0.3);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.92em;
	letter-spacing: 0.04em;
	color: var(--novapex-royal, #064BEF);
}

.novapex-pay__note {
	margin: 0 0 14px;
	font-size: 0.92rem;
	line-height: 1.6;
	color: var(--novapex-text-soft, #56647a);
}

.novapex-pay__instructions {
	margin: 0 0 14px;
	font-size: 0.95rem;
	line-height: 1.7;
}

.novapex-pay__instructions p {
	margin: 0 0 10px;
}

.novapex-pay__instructions p:last-child {
	margin-bottom: 0;
}

.novapex-pay__hold {
	margin: 0;
	padding-top: 12px;
	border-top: 1px solid rgba(7, 140, 255, 0.22);
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--novapex-navy, #061A40);
}

/* The checkout block prints its own description under each method label. */
.novapex-pay-block__description {
	font-size: 0.92em;
	line-height: 1.6;
	opacity: 0.85;
}

/* Order screen, admin only. */
.novapex-order-payment {
	margin-top: 14px;
}

.novapex-order-payment p {
	margin: 0 0 6px;
}

/* ------------------------------------------------------------------ *
 * 21. About page bands
 *
 * The About page reads as a sequence of distinct full-width bands - a
 * dark opening, a priorities row, three alternating narrative sections
 * and a closing signature - rather than one long text column. Same
 * tokens, same measure, no new asset.
 * ------------------------------------------------------------------ */

.novapex-pband--approach {
	padding-block: clamp(56px, 6.5vw, 104px);
	background: var(--novapex-white);
	color: var(--novapex-text);
	text-align: center;
}

.novapex-pband__lead-in {
	margin: 30px 0 16px;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--novapex-text-soft);
}

/* The four priority words. A row on desktop, two columns on a phone: never
   a stack of four separate boxes. */
.novapex-page ul.novapex-pillars {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1px;
	max-width: 860px;
	margin: 0 auto;
	padding: 0;
	list-style: none;
	background: var(--novapex-border);
	border: 1px solid var(--novapex-border);
	border-radius: var(--novapex-radius);
	overflow: hidden;
}

@media (min-width: 720px) {
	.novapex-page ul.novapex-pillars {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.novapex-page li.novapex-pillars__item {
	margin: 0;
	padding: 20px 12px;
	background: var(--novapex-near-white);
	font-size: clamp(0.86rem, 0.82rem + 0.2vw, 1rem);
	font-weight: 640;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--novapex-navy);
}

.novapex-pband__text--after {
	margin-top: 28px;
}

/* Narrative bands ---------------------------------------------------- */

.novapex-pband--feature {
	padding-block: clamp(52px, 6vw, 96px);
}

.novapex-pband--feature.is-light {
	background: var(--novapex-white);
}

.novapex-pband--feature.is-tint {
	background: var(--novapex-near-white);
	border-block: 1px solid var(--novapex-border);
}

/* Heading beside the copy on desktop, above it on a phone. */
.novapex-pband__split {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 18px;
	align-items: start;
}

@media (min-width: 900px) {
	.novapex-pband__split {
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		gap: clamp(32px, 4vw, 72px);
	}
}

.novapex-pband__aside .novapex-eyebrow {
	margin-bottom: 10px;
}

/* The shared heading rule centres itself inside a narrow measure. In a
   split band the heading is a column, so it aligns left and fills it. */
.novapex-page .novapex-pband__split .novapex-pband__heading {
	max-width: none;
	margin: 0;
	text-align: left;
}

.novapex-page .novapex-pband__split .novapex-eyebrow {
	text-align: left;
}

.novapex-pband__main {
	display: flex;
	flex-direction: column;
	gap: 16px;
	max-width: 68ch;
}

.novapex-pband__main p {
	margin: 0;
	font-size: clamp(0.98rem, 0.95rem + 0.16vw, 1.08rem);
	line-height: 1.75;
	color: var(--novapex-text-soft);
}

/* A hairline before the first paragraph, so the two columns read as one
   section rather than two unrelated blocks. */
@media (min-width: 900px) {
	.novapex-pband__main {
		padding-left: clamp(24px, 3vw, 48px);
		border-left: 1px solid var(--novapex-border);
	}
}

/* Closing signature -------------------------------------------------- */

.novapex-pband--signature {
	padding-block: clamp(44px, 5vw, 72px);
	background: var(--novapex-white);
	text-align: center;
}

.novapex-signature__name {
	margin: 0 0 10px;
	font-size: clamp(1.1rem, 1rem + 0.5vw, 1.4rem);
	font-weight: 660;
	letter-spacing: -0.01em;
	color: var(--novapex-navy);
}

.novapex-signature__pillars {
	margin: 0;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--novapex-royal);
}

/* ------------------------------------------------------------------ *
 * 22. FAQ
 *
 * Native <details> disclosures: keyboard accessible, screen reader
 * accessible, and fully functional with JavaScript disabled. The only
 * script involved is deep linking.
 * ------------------------------------------------------------------ */

.novapex-faq {
	padding-block: clamp(48px, 5.5vw, 88px);
	background: var(--novapex-white);
}

.novapex-faq__inner {
	max-width: 900px;
	margin-inline: auto;
}

/* Category jump links. */
.novapex-faq__nav {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: clamp(32px, 4vw, 52px);
}

.novapex-faq__nav-link {
	display: inline-flex;
	align-items: center;
	min-height: 34px;
	padding: 6px 14px;
	border: 1px solid var(--novapex-border);
	border-radius: 999px;
	background: var(--novapex-near-white);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--novapex-navy);
	text-decoration: none;
	transition: background-color 0.25s var(--novapex-ease), border-color 0.25s var(--novapex-ease), color 0.25s var(--novapex-ease);
}

.novapex-faq__nav-link:hover,
.novapex-faq__nav-link:focus {
	background: var(--novapex-light-blue);
	border-color: rgba(6, 75, 239, 0.28);
	color: var(--novapex-royal);
}

.novapex-faq__group {
	/* Room for a fixed header when a jump link lands on this group. */
	scroll-margin-top: 96px;
}

.novapex-faq__group + .novapex-faq__group {
	margin-top: clamp(36px, 4vw, 56px);
}

.novapex-page .novapex-faq__group-title {
	margin: 0 0 14px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--novapex-border);
	font-size: 0.8rem;
	font-weight: 660;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--novapex-royal);
}

/* Hairline-separated rows rather than a stack of cards. */
.novapex-faq__item {
	border-bottom: 1px solid var(--novapex-border);
	scroll-margin-top: 96px;
}

.novapex-faq__question {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	padding: 18px 2px;
	cursor: pointer;
	list-style: none;
	font-size: clamp(0.98rem, 0.95rem + 0.16vw, 1.06rem);
	font-weight: 620;
	line-height: 1.5;
	color: var(--novapex-text);
	transition: color 0.25s var(--novapex-ease);
}

/* Remove the platform disclosure triangle: the marker below replaces it. */
.novapex-faq__question::-webkit-details-marker {
	display: none;
}

.novapex-faq__question::marker {
	content: '';
}

.novapex-faq__question:hover {
	color: var(--novapex-royal);
}

.novapex-faq__question:focus-visible {
	outline: 2px solid var(--novapex-royal);
	outline-offset: 3px;
	border-radius: 4px;
}

.novapex-faq__question-text {
	min-width: 0;
}

/* A plus that becomes a minus when the disclosure is open. Drawn in CSS,
   so there is no icon font and no image request. */
.novapex-faq__marker {
	position: relative;
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin-top: 3px;
}

.novapex-faq__marker::before,
.novapex-faq__marker::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 13px;
	height: 2px;
	background: var(--novapex-royal);
	border-radius: 2px;
	transform: translate(-50%, -50%);
	transition: transform 0.25s var(--novapex-ease), opacity 0.25s var(--novapex-ease);
}

.novapex-faq__marker::after {
	transform: translate(-50%, -50%) rotate(90deg);
}

.novapex-faq__item[open] .novapex-faq__marker::after {
	transform: translate(-50%, -50%) rotate(0deg);
	opacity: 0;
}

.novapex-faq__answer {
	padding: 0 2px 22px;
	max-width: 72ch;
}

.novapex-faq__answer p {
	margin: 0 0 12px;
	font-size: 0.97rem;
	line-height: 1.75;
	color: var(--novapex-text-soft);
}

.novapex-faq__answer p:last-child {
	margin-bottom: 0;
}

.novapex-page ul.novapex-faq__list {
	margin: 0 0 12px;
	padding-left: 18px;
	list-style: disc;
}

.novapex-page ul.novapex-faq__list:last-child {
	margin-bottom: 0;
}

.novapex-page li.novapex-faq__list-item,
.novapex-page ul.novapex-faq__list li {
	margin: 0 0 6px;
	font-size: 0.95rem;
	line-height: 1.7;
	color: var(--novapex-text-soft);
}

/* ------------------------------------------------------------------ *
 * 23. First-visit access confirmation
 *
 * A full-screen gate, not a cookie bar. Light laboratory canvas, one
 * centred column of content, no card inside a card and no decorative
 * borders: the page behind it is simply replaced for the moment it is
 * open.
 *
 * Rendered with `hidden` already set and revealed only by script, so a
 * visitor without JavaScript is never blocked.
 * ------------------------------------------------------------------ */

.novapex-gate-open,
.novapex-gate-open body {
	overflow: hidden;
}

.novapex-gate {
	position: fixed;
	inset: 0;
	z-index: 100000;
}

.novapex-gate[hidden] {
	display: none;
}

/* The canvas. Very light rather than a dark scrim: the gate reads as a
   page of its own, in the Nova Pex palette. */
.novapex-gate__backdrop {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(62% 52% at 78% 8%, rgba(7, 140, 255, 0.1) 0%, rgba(7, 140, 255, 0) 64%),
		radial-gradient(52% 48% at 6% 96%, rgba(6, 75, 239, 0.07) 0%, rgba(6, 75, 239, 0) 72%),
		linear-gradient(178deg, var(--novapex-white) 0%, var(--novapex-near-white) 58%, var(--novapex-light-blue) 100%);
}

/*
 * The scrolling layer. The agreement is long, and on a short window or a
 * phone it must be reachable by scrolling inside the gate rather than
 * being cut off. Scrolling happens here so the backdrop stays put.
 */
.novapex-gate__scroll {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	padding: clamp(28px, 5vh, 72px) 24px;
}

.novapex-gate__dialog {
	width: 100%;
	max-width: 980px;
	margin-inline: auto;
	/* No panel, no border, no shadow. The content sits directly on the
	   canvas, which is what keeps it from reading as a card. */
	text-align: left;
}

.novapex-gate__mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 54px;
	height: 54px;
	margin-bottom: clamp(18px, 2.4vw, 26px);
	border-radius: 50%;
	background: var(--novapex-light-blue);
	color: var(--novapex-royal);
}

.novapex-gate__eyebrow {
	margin: 0 0 clamp(12px, 1.6vw, 18px);
	font-size: 0.74rem;
	font-weight: 650;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--novapex-electric);
}

/* The large opening line. */
.novapex-gate__intro {
	margin: 0 0 clamp(26px, 3.4vw, 44px);
	max-width: 40ch;
	font-size: clamp(1.5rem, 1.15rem + 1.1vw, 2.05rem);
	line-height: 1.32;
	letter-spacing: -0.02em;
	font-weight: 620;
	color: var(--novapex-navy);
}

.novapex-gate__body {
	margin: 0 0 clamp(24px, 3vw, 36px);
	max-width: 74ch;
}

.novapex-gate__body p {
	margin: 0 0 12px;
	font-size: 1rem;
	line-height: 1.75;
	color: var(--novapex-text-soft);
}

.novapex-gate__body p:last-child {
	margin-bottom: 0;
}

/* Confirmations ------------------------------------------------------ */

.novapex-gate__confirmations {
	display: flex;
	flex-direction: column;
	gap: clamp(18px, 2.2vw, 26px);
	margin-bottom: clamp(28px, 3.4vw, 44px);
	max-width: 78ch;
}

.novapex-gate__confirm {
	display: flex;
	align-items: flex-start;
	gap: clamp(14px, 1.6vw, 20px);
}

/*
 * A real checkbox input, restyled rather than replaced, so it keeps its
 * native keyboard behaviour, its native focus ring target and its native
 * announcement to assistive technology. accent-color does the colouring
 * everywhere it is supported.
 */
.novapex-gate__checkbox {
	flex: 0 0 auto;
	width: 30px;
	height: 30px;
	margin: 0;
	border: 2px solid var(--novapex-border);
	border-radius: 7px;
	background: var(--novapex-white);
	accent-color: var(--novapex-royal);
	cursor: pointer;
	transition: border-color 0.2s var(--novapex-ease), box-shadow 0.2s var(--novapex-ease);
}

.novapex-gate__checkbox:hover {
	border-color: var(--novapex-electric);
}

.novapex-gate__checkbox:focus-visible {
	outline: 2px solid var(--novapex-royal);
	outline-offset: 3px;
}

.novapex-gate__confirm-label {
	flex: 1 1 auto;
	min-width: 0;
	font-size: clamp(1rem, 0.96rem + 0.2vw, 1.08rem);
	line-height: 1.7;
	color: var(--novapex-text);
	cursor: pointer;
}

.novapex-gate__confirm-label strong {
	font-weight: 680;
	color: var(--novapex-navy);
}

.novapex-gate__legal-link {
	color: var(--novapex-electric);
	font-weight: 620;
	text-decoration: none;
	border-bottom: 1px solid currentColor;
	transition: color 0.2s var(--novapex-ease);
}

.novapex-gate__legal-link:hover,
.novapex-gate__legal-link:focus {
	color: var(--novapex-royal);
}

/* Actions ------------------------------------------------------------ */

.novapex-gate__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
	margin-bottom: 16px;
}

.novapex-gate__accept,
.novapex-gate__decline {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 54px;
	padding: 14px 34px;
	border-radius: var(--novapex-radius-sm);
	font-family: inherit;
	font-size: 0.86rem;
	font-weight: 680;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	line-height: 1.2;
	cursor: pointer;
	transition: background-color 0.25s var(--novapex-ease), border-color 0.25s var(--novapex-ease), color 0.25s var(--novapex-ease), opacity 0.25s var(--novapex-ease);
}

.novapex-gate__accept {
	border: 1px solid var(--novapex-royal);
	background: var(--novapex-royal);
	color: var(--novapex-white);
	box-shadow: 0 12px 26px -16px rgba(6, 75, 239, 0.9);
}

.novapex-gate__accept:hover:not(:disabled),
.novapex-gate__accept:focus-visible:not(:disabled) {
	background: var(--novapex-navy);
	border-color: var(--novapex-navy);
}

/* Plainly unavailable until both statements are confirmed, and it says so
   through the hint below rather than only by looking faded. */
.novapex-gate__accept:disabled {
	background: #b9c6d8;
	border-color: #b9c6d8;
	color: var(--novapex-white);
	box-shadow: none;
	cursor: not-allowed;
	opacity: 1;
}

.novapex-gate__decline {
	border: 1px solid transparent;
	background: transparent;
	color: var(--novapex-text-soft);
	letter-spacing: 0.08em;
}

.novapex-gate__decline:hover,
.novapex-gate__decline:focus-visible {
	border-color: var(--novapex-border);
	color: var(--novapex-text);
}

.novapex-gate__hint {
	margin: 0 0 4px;
	font-size: 0.85rem;
	line-height: 1.6;
	color: var(--novapex-text-soft);
}

.novapex-gate__hint[hidden] {
	display: none;
}

.novapex-gate__more {
	margin: clamp(20px, 2.4vw, 30px) 0 0;
	padding-top: clamp(18px, 2.2vw, 26px);
	border-top: 1px solid var(--novapex-border);
	font-size: 0.86rem;
}

.novapex-gate__more a {
	color: var(--novapex-royal);
}

/* Mobile ------------------------------------------------------------- *
 *
 * A deliberate treatment rather than the desktop one scaled down: the
 * gate scrolls from the top, the copy is set at a comfortable reading
 * size, the touch targets grow and the buttons go full width.
 * ------------------------------------------------------------------ */

@media (max-width: 767px) {
	.novapex-gate__scroll {
		/* Top aligned, so a long agreement starts at the top of the screen
		   instead of being centred and clipped at both ends. */
		align-items: flex-start;
		padding: 32px 24px 40px;
	}

	.novapex-gate__mark {
		width: 46px;
		height: 46px;
		margin-bottom: 16px;
	}

	.novapex-gate__intro {
		max-width: none;
		font-size: clamp(1.32rem, 1.1rem + 1.6vw, 1.6rem);
		line-height: 1.35;
	}

	.novapex-gate__confirm {
		gap: 14px;
	}

	.novapex-gate__checkbox {
		/* Comfortably above the 24px minimum touch target. */
		width: 32px;
		height: 32px;
	}

	.novapex-gate__confirm-label {
		font-size: 1rem;
		line-height: 1.72;
	}

	.novapex-gate__actions {
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
	}

	.novapex-gate__accept,
	.novapex-gate__decline {
		width: 100%;
		padding-inline: 20px;
	}

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

@media (prefers-reduced-motion: reduce) {
	.novapex-gate__checkbox,
	.novapex-gate__accept,
	.novapex-gate__decline,
	.novapex-gate__legal-link {
		transition: none;
	}
}

/* ------------------------------------------------------------------ *
 * 24. Checkout additions
 *
 * The account prompt and the research acknowledgement. Both sit inside
 * the native WooCommerce checkout markup; neither replaces any of it.
 * ------------------------------------------------------------------ */

.novapex-account-prompt {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 0 0 24px;
	padding: 16px 20px;
	border: 1px solid var(--novapex-border);
	border-left: 3px solid var(--novapex-royal);
	border-radius: var(--novapex-radius-sm);
	background: var(--novapex-near-white);
}

.novapex-account-prompt__text {
	margin: 0;
	font-size: 0.95rem;
	line-height: 1.6;
	color: var(--novapex-text);
}

.novapex-account-prompt__actions {
	margin: 0;
}

.novapex-account-prompt__link {
	font-size: 0.82rem;
	font-weight: 650;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--novapex-royal);
	text-decoration: none;
	border-bottom: 1px solid currentColor;
}

.novapex-account-prompt__link:hover,
.novapex-account-prompt__link:focus {
	color: var(--novapex-navy);
}

.novapex-consent {
	margin: 20px 0;
	padding: 16px 18px;
	border: 1px solid var(--novapex-border);
	border-radius: var(--novapex-radius-sm);
	background: var(--novapex-near-white);
}

.novapex-consent__label {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 0;
	cursor: pointer;
}

.novapex-consent__input {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	margin: 2px 0 0;
	accent-color: var(--novapex-royal);
	cursor: pointer;
}

.novapex-consent__text {
	font-size: 0.92rem;
	line-height: 1.65;
	color: var(--novapex-text);
}

.novapex-consent__text .required {
	border: 0;
	color: #b32d2e;
	text-decoration: none;
}

/* ------------------------------------------------------------------ *
 * 25. Variable product selector
 *
 * WooCommerce's own variations table, restyled. No template is
 * overridden: the native form, the native reset link and the native
 * variation price all keep working exactly as WooCommerce built them.
 * ------------------------------------------------------------------ */

body.novapex-woo .woocommerce div.product form.cart table.variations {
	width: 100%;
	margin: 0 0 18px;
	border: 0;
	border-collapse: collapse;
}

body.novapex-woo .woocommerce div.product form.cart table.variations th,
body.novapex-woo .woocommerce div.product form.cart table.variations td {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: transparent;
	text-align: left;
}

body.novapex-woo .woocommerce div.product form.cart table.variations th.label {
	padding-bottom: 7px;
}

body.novapex-woo .woocommerce div.product form.cart table.variations th.label label {
	margin: 0;
	font-size: 0.74rem;
	font-weight: 650;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--novapex-text-soft);
}

body.novapex-woo .woocommerce div.product form.cart table.variations td.value {
	padding-bottom: 14px;
}

body.novapex-woo .woocommerce div.product form.cart table.variations select {
	width: 100%;
	min-height: 48px;
	padding: 12px 44px 12px 14px;
	border: 1px solid var(--novapex-border);
	border-radius: var(--novapex-radius-sm);
	background-color: var(--novapex-white);
	/* Inline chevron, so the control looks the same in every browser and
	   still needs no image request. */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%2356647A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 16px center;
	appearance: none;
	-webkit-appearance: none;
	font-family: inherit;
	font-size: 0.98rem;
	font-weight: 550;
	color: var(--novapex-text);
	cursor: pointer;
}

body.novapex-woo .woocommerce div.product form.cart table.variations select:focus {
	outline: none;
	border-color: var(--novapex-royal);
	box-shadow: 0 0 0 3px rgba(6, 75, 239, 0.14);
}

/* WooCommerce's "Clear" link, which appears once a selection is made. */
body.novapex-woo .woocommerce div.product form.cart .reset_variations {
	display: inline-block;
	margin-top: 2px;
	font-size: 0.8rem;
	color: var(--novapex-text-soft);
}

body.novapex-woo .woocommerce div.product form.cart .reset_variations:hover {
	color: var(--novapex-royal);
}

/* The price and availability WooCommerce swaps in for the chosen variation. */
body.novapex-woo .woocommerce div.product form.cart .woocommerce-variation {
	margin-bottom: 14px;
}

body.novapex-woo .woocommerce div.product form.cart .woocommerce-variation-price .price {
	font-size: clamp(1.2rem, 1.1rem + 0.5vw, 1.5rem);
	font-weight: 660;
	color: var(--novapex-navy);
}

body.novapex-woo .woocommerce div.product form.cart .woocommerce-variation-availability p {
	margin: 6px 0 0;
	font-size: 0.88rem;
	color: var(--novapex-text-soft);
}

/* A variation with no price configured yet leaves this area empty rather
   than printing a zero. Nothing is invented in its place. */
body.novapex-woo .woocommerce div.product form.cart .woocommerce-variation-description p {
	font-size: 0.94rem;
	line-height: 1.7;
	color: var(--novapex-text-soft);
}

/* ------------------------------------------------------------------ *
 * 26. Reduced motion
 * ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	.novapex-faq__marker::before,
	.novapex-faq__marker::after,
	.novapex-faq__nav-link,
	.novapex-gate__accept,
	.novapex-gate__decline {
		transition: none;
	}
}

/* On a shop archive card the cue row sits between the title and the price,
   so it needs the breathing room the homepage card gets from its flex gap. */
.woocommerce ul.products li.product ul.novapex-card__flags {
	margin-bottom: 8px;
}

/* ------------------------------------------------------------------ *
 * 27. Breadcrumbs
 *
 * Nova Pex does not output a breadcrumb: whichever of WooCommerce or the
 * theme already renders one keeps doing so, and printing a second would
 * be worse than printing none. This only makes the existing one sit in
 * the Nova Pex type system.
 * ------------------------------------------------------------------ */

body.novapex-woo .woocommerce .woocommerce-breadcrumb {
	margin: 0 0 18px;
	font-size: 0.8rem;
	line-height: 1.6;
	color: var(--novapex-text-soft);
}

body.novapex-woo .woocommerce .woocommerce-breadcrumb a {
	color: var(--novapex-text-soft);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: color 0.25s var(--novapex-ease), border-color 0.25s var(--novapex-ease);
}

body.novapex-woo .woocommerce .woocommerce-breadcrumb a:hover,
body.novapex-woo .woocommerce .woocommerce-breadcrumb a:focus {
	color: var(--novapex-royal);
	border-bottom-color: currentColor;
}

/* ------------------------------------------------------------------ *
 * 28. Variation pills
 *
 * A row of buttons in front of WooCommerce's own attribute <select>.
 * The select is still there, still the thing that holds the value, and
 * still the thing WooCommerce reads: these buttons only drive it. When
 * the script has not run the select is never hidden, so the ordinary
 * dropdown is what the visitor gets.
 * ------------------------------------------------------------------ */

.novapex-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
}

/* Only hidden once the buttons genuinely exist in front of it. */
body.novapex-woo .woocommerce div.product form.cart table.variations td.novapex-has-pills select {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.novapex-pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 62px;
	min-height: 46px;
	padding: 11px 18px;
	border: 1px solid var(--novapex-border);
	border-radius: var(--novapex-radius-sm);
	background: var(--novapex-white);
	font-family: inherit;
	font-size: 0.95rem;
	font-weight: 620;
	line-height: 1.2;
	color: var(--novapex-text);
	cursor: pointer;
	transition: border-color 0.2s var(--novapex-ease), background-color 0.2s var(--novapex-ease), color 0.2s var(--novapex-ease), box-shadow 0.2s var(--novapex-ease);
}

.novapex-pill:hover:not(:disabled) {
	border-color: var(--novapex-electric);
	color: var(--novapex-royal);
}

.novapex-pill:focus-visible {
	outline: 2px solid var(--novapex-royal);
	outline-offset: 2px;
}

/* The chosen strength, unmistakably. */
.novapex-pill.is-selected {
	border-color: var(--novapex-royal);
	background: var(--novapex-royal);
	color: var(--novapex-white);
	box-shadow: 0 10px 22px -14px rgba(6, 75, 239, 0.9);
}

/*
 * A combination WooCommerce reports as unavailable. Struck through as well
 * as faded, so it does not rely on colour alone, and genuinely disabled so
 * it cannot be clicked or focused.
 */
.novapex-pill:disabled {
	border-color: var(--novapex-border);
	background: var(--novapex-near-white);
	color: var(--novapex-text-soft);
	opacity: 0.55;
	text-decoration: line-through;
	cursor: not-allowed;
}

@media (max-width: 429px) {
	.novapex-pill {
		min-width: 56px;
		padding-inline: 14px;
	}
}

/* ------------------------------------------------------------------ *
 * 29. Section closing CTA
 *
 * The "Shop now" button beneath a product grid. Centred, with real
 * separation from the cards above it, and full width on a phone.
 * ------------------------------------------------------------------ */

.novapex-products__footer {
	display: flex;
	justify-content: center;
	margin-top: clamp(30px, 3.6vw, 52px);
}

.novapex-home .novapex-products__cta {
	min-width: min(280px, 100%);
}

@media (max-width: 599px) {
	.novapex-home .novapex-products__cta {
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.novapex-pill {
		transition: none;
	}
}

/* =====================================================================
 * Page banners
 *
 * Shop and Contact header bands. They reuse .novapex-pband--hero for the
 * scrim, the dot matrix and the blue rule beneath, so a banner matches the
 * About page without a second set of styles to maintain.
 *
 * Two differences from the About band. The image is a real <img> rather
 * than a CSS background, so WordPress can serve a size that suits the
 * viewport through srcset. And the title selector is repeated here without
 * the .novapex-page ancestor, because a banner is printed outside the
 * shortcode wrapper that class belongs to.
 * ================================================================== */

/*
 * The min-height is what gives an image-only banner its shape: with no
 * title inside, the section has nothing to set its height but padding and
 * would otherwise collapse into a thin strip.
 */
.novapex-banner {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: clamp(180px, 22vw, 360px);
	padding-block: clamp(48px, 5.5vw, 96px);
}

.novapex-banner__media {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}

.novapex-banner__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

.novapex-banner .novapex-pband__title {
	max-width: 24ch;
	margin: 0 auto;
	font-size: clamp(1.75rem, 1.2rem + 2.2vw, 3rem);
	line-height: 1.1;
	letter-spacing: -0.03em;
	font-weight: 660;
	color: var(--novapex-white);
	text-align: center;
}

/*
 * The shop banner sits above the product grid, which brings its own top
 * spacing. Pulling the gap out keeps the two from stacking into a wide
 * empty strip.
 */
.novapex-banner--shop {
	margin-bottom: clamp(24px, 3vw, 48px);
}

.novapex-banner--contact,
.novapex-banner--about {
	margin-bottom: clamp(24px, 3vw, 48px);
}

@media (prefers-reduced-motion: reduce) {
	.novapex-banner,
	.novapex-banner__img {
		transition: none;
	}
}

/* ---------------------------------------------------------------------
 * Standing the theme's own banner down
 *
 * Scoped to body.novapex-banner-replace, which NovaPex_Banners adds only
 * when a banner really is rendering on this view and the "Hide the theme
 * banner underneath" box is ticked. Untick it, or remove the image, and
 * every rule here stops matching and the theme returns untouched.
 *
 * The selectors are the same ones the full-width page mode already uses
 * on this site, plus the two WooCommerce prints on the shop archive.
 * Blocksy itself is never edited.
 * ------------------------------------------------------------------ */

body.novapex-banner-replace .hero-section,
body.novapex-banner-replace #main-container > .hero-section,
body.novapex-banner-replace main .hero-section,
body.novapex-banner-replace main .page-title,
body.novapex-banner-replace main .entry-header,
body.novapex-banner-replace .woocommerce-products-header,
body.novapex-banner-replace .woocommerce-products-header__title,
body.novapex-banner-replace main > .page-header,
body.novapex-banner-replace .ct-page-title {
	display: none !important;
}

/*
 * Closing the gap the hidden hero leaves behind.
 *
 * The theme reserves top spacing on the content area for a banner that is
 * no longer there, which reads as an empty band between the navigation and
 * the Nova Pex banner. Only the TOP is zeroed: bottom spacing still
 * separates the content from the footer.
 */
body.novapex-banner-replace #main-container,
body.novapex-banner-replace #content,
body.novapex-banner-replace main#main,
body.novapex-banner-replace .site-main,
body.novapex-banner-replace #main-container > .ct-container,
body.novapex-banner-replace #main-container > [class*="ct-container"] {
	padding-top: 0;
	margin-top: 0;
}

/*
 * Full bleed.
 *
 * The shop banner is printed at priority 5 on woocommerce_before_main_content,
 * ahead of the wrapper the theme opens at 10, so it is usually already
 * outside the container. The contact banner is not: it arrives through
 * the_content, inside the entry content and inside the container, so the
 * container that holds it has its width limit and side padding removed for
 * the width of the band. Matching on :has() means only a container that
 * actually contains a banner is affected - the same approach the full-width
 * page mode uses.
 */
body.novapex-banner-shop [class*="ct-container"]:has(> .novapex-banner),
body.novapex-banner-shop .entry-content:has(> .novapex-banner),
body.novapex-banner-shop [class*="ct-container"]:has(> .entry-content > .novapex-banner) {
	max-width: none;
	padding-inline: 0;
}

/*
 * And the band itself flush to the top, so the transition from the
 * navigation into the blue is unbroken.
 */
body.novapex-banner-replace .novapex-banner {
	margin-top: 0;
}

/*
 * No white strip between the banner and what follows it. The product grid
 * and the page content bring their own top spacing, so the banner does not
 * add a second gap of its own.
 */
body.novapex-banner-active .novapex-banner--shop,
body.novapex-banner-active .novapex-banner--contact,
body.novapex-banner-active .novapex-banner--about {
	margin-bottom: 0;
}

body.novapex-banner-active .woocommerce-notices-wrapper:empty {
	display: none;
}

/*
 * The shop toolbar - result count and sorting - sits directly under the
 * banner once the WooCommerce heading is gone, and its own top margin is
 * sized for a heading that is no longer above it.
 */
body.novapex-banner-replace .woocommerce-result-count,
body.novapex-banner-replace .woocommerce-ordering {
	margin-top: clamp(20px, 2.5vw, 36px);
}

/* ---------------------------------------------------------------------
 * About and Contact: breaking the band out of the content column
 *
 * Everything below is scoped to body.novapex-banner-inline, which is added
 * ONLY on the About and Contact pages. The shop carries
 * body.novapex-banner-shop instead and is not matched by a single rule
 * here, so it keeps working exactly as it does now.
 *
 * Why these two need it and the shop does not: the shop banner is printed
 * at priority 5 on woocommerce_before_main_content, ahead of the wrapper
 * the theme opens at 10, so it is already outside the content column. The
 * About band is drawn by a shortcode and the Contact band arrives through
 * the_content - both are inside the entry content, inside an article,
 * inside a container with a width limit.
 *
 * The break-out is the viewport calculation rather than a :has() rule on
 * the ancestor, because it does not depend on knowing the theme's nesting.
 * It is also self-correcting: the margin resolves to zero when the
 * containing block is already the full viewport width, so a page that is
 * ALREADY full-bleed is not shifted sideways by it.
 * ------------------------------------------------------------------ */

body.novapex-banner-inline .novapex-banner,
body.novapex-banner-about .novapex-page--about > .novapex-pband--hero {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	border-radius: 0;
}

/*
 * 100vw counts the vertical scrollbar, so the band ends up a scrollbar's
 * width wider than the content area and would otherwise add a horizontal
 * scrollbar. `clip` rather than `hidden`: hidden turns the element into a
 * scroll container, which silently breaks any position:sticky inside it -
 * a sticky header among them.
 */
body.novapex-banner-inline #main-container,
body.novapex-banner-inline #content,
body.novapex-banner-inline main#main,
body.novapex-banner-inline .site-main {
	overflow-x: clip;
}

/*
 * No rule strips side padding from the wrappers, deliberately. The margin
 * calculation above is measured from the parent's CONTENT box, which is
 * itself centred in the viewport, so it already resolves to exactly the
 * distance from that box to the page edge - padding included. Zeroing the
 * padding as well would drag the ordinary page content below the banner
 * out to the edges with it, which on Contact is text.
 */

/* ---------------------------------------------------------------------
 * About and Contact: the theme's own hero
 *
 * A wider net than the shop needs. The shop's heading is WooCommerce's and
 * is removed at its hook, so no selector is required for it; these two are
 * the theme's and can only be reached with CSS.
 *
 * The selectors are unscoped by ancestor on purpose. The earlier
 * `main .hero-section` form missed a hero that Blocksy renders outside
 * <main>, which is what left it visible under the banner.
 * ------------------------------------------------------------------ */

body.novapex-banner-inline.novapex-banner-replace .hero-section,
body.novapex-banner-inline.novapex-banner-replace .ct-hero-section,
body.novapex-banner-inline.novapex-banner-replace [data-type*="type-1"].hero-section,
body.novapex-banner-inline.novapex-banner-replace [data-type*="type-2"].hero-section,
body.novapex-banner-inline.novapex-banner-replace .page-title,
body.novapex-banner-inline.novapex-banner-replace .ct-page-title,
body.novapex-banner-inline.novapex-banner-replace .entry-header,
body.novapex-banner-inline.novapex-banner-replace .page-header,
body.novapex-banner-inline.novapex-banner-replace .ct-breadcrumbs,
body.novapex-banner-inline.novapex-banner-replace .woocommerce-breadcrumb {
	display: none !important;
}

/*
 * With the hero gone, the space the theme reserved above it goes too, so
 * the band meets the navigation directly. Top only: the spacing below the
 * content still separates it from the footer.
 */
body.novapex-banner-inline.novapex-banner-replace #main-container,
body.novapex-banner-inline.novapex-banner-replace #content,
body.novapex-banner-inline.novapex-banner-replace main#main,
body.novapex-banner-inline.novapex-banner-replace .site-main,
body.novapex-banner-inline.novapex-banner-replace .entry-content,
body.novapex-banner-inline.novapex-banner-replace article {
	padding-top: 0;
	margin-top: 0;
}

/* The band itself flush to the top of the content area. */
body.novapex-banner-inline .novapex-banner,
body.novapex-banner-about .novapex-page--about > .novapex-pband--hero {
	margin-top: 0;
}

/* =====================================================================
 * Cart and Checkout blocks
 *
 * Styling only. Not one rule here changes markup, adds an element or
 * moves anything the Checkout block owns - it cannot, because CSS has no
 * way to. That distinction is the whole reason this file is where the
 * work is done: the checkout froze once already, and the cause was PHP
 * printing markup into the block's own output. Nothing here does that.
 *
 * The Shop is not matched by any selector below.
 * ================================================================== */

body.woocommerce-cart .wp-block-woocommerce-cart,
body.woocommerce-checkout .wp-block-woocommerce-checkout {
	--novapex-block-ink: var(--novapex-deep-navy, #041027);
	color: var(--novapex-block-ink);
}

/* Section headings inside the blocks, so they read as Nova Pex. */
body.woocommerce-cart .wc-block-components-title,
body.woocommerce-checkout .wc-block-components-title,
body.woocommerce-cart .wp-block-woocommerce-cart h1,
body.woocommerce-cart .wp-block-woocommerce-cart h2,
body.woocommerce-checkout .wp-block-woocommerce-checkout h1,
body.woocommerce-checkout .wp-block-woocommerce-checkout h2 {
	color: var(--novapex-deep-navy, #041027);
	letter-spacing: -0.02em;
	font-weight: 660;
}

/* The primary actions: place order, proceed to checkout. */
body.woocommerce-cart .wc-block-cart__submit-button,
body.woocommerce-checkout .wc-block-components-checkout-place-order-button {
	background: linear-gradient(135deg, var(--novapex-royal, #064bef) 0%, var(--novapex-electric, #078cff) 100%);
	border: 0;
	border-radius: 10px;
	color: #fff;
	font-weight: 600;
	letter-spacing: 0.01em;
}

body.woocommerce-cart .wc-block-cart__submit-button:hover,
body.woocommerce-checkout .wc-block-components-checkout-place-order-button:hover {
	filter: brightness(1.08);
}

/* Links and the focus ring, so both match the rest of the site. */
body.woocommerce-cart .wc-block-components-button--text,
body.woocommerce-checkout .wc-block-components-button--text,
body.woocommerce-cart .wc-block-components-express-payment__event-buttons a,
body.woocommerce-checkout .wc-block-components-checkout-step__description a {
	color: var(--novapex-royal, #064bef);
}

body.woocommerce-cart .wc-block-components-text-input input:focus,
body.woocommerce-checkout .wc-block-components-text-input input:focus,
body.woocommerce-checkout .wc-block-components-select select:focus {
	outline: 2px solid var(--novapex-electric, #078cff);
	outline-offset: 1px;
}

/*
 * The panel edges the blocks draw for themselves, toned to the Nova Pex
 * palette rather than the theme's default grey.
 */
body.woocommerce-cart .wc-block-components-sidebar,
body.woocommerce-checkout .wc-block-components-sidebar,
body.woocommerce-checkout .wc-block-checkout__sidebar {
	border-radius: 14px;
}

/*
 * Breathing room between the Nova Pex header and the block, which the
 * theme sizes for its own header.
 */
body.novapex-header-on.woocommerce-cart .wp-block-woocommerce-cart,
body.novapex-header-on.woocommerce-checkout .wp-block-woocommerce-checkout {
	margin-top: clamp(16px, 2.5vw, 40px);
}

/*
 * The theme's own page title on these two pages. The Nova Pex header
 * already names the site and the block prints its own headings, so a
 * third "Cart"/"Checkout" strip above them is the generic band that does
 * not belong. Only ever hidden while the Nova Pex header is actually on.
 */
body.novapex-header-on.woocommerce-cart .hero-section,
body.novapex-header-on.woocommerce-cart .page-title,
body.novapex-header-on.woocommerce-cart .entry-header,
body.novapex-header-on.woocommerce-checkout .hero-section,
body.novapex-header-on.woocommerce-checkout .page-title,
body.novapex-header-on.woocommerce-checkout .entry-header {
	display: none !important;
}