/*!
 * Lauriva Cosmetics — interactive/component layer.
 * CDDS child theme of coredigify-base. Pairs with assets/lauriva.js.
 *
 * Scope rules for this file:
 *   - Every selector is prefixed `lv-` (or a `data-lv-*` hook) so nothing
 *     collides with WooCommerce, Gutenberg or the parent theme.
 *   - Only the palette measured from the reference is used. Hover/active
 *     states are built from those same tokens (accent, ink, rose tints) —
 *     no new hues are introduced.
 *   - Colour tokens read the theme.json presets first and fall back to the
 *     literal hex, so this file is correct even if theme.json is not loaded
 *     (block editor iframe, editor-style context, plugin-rendered fragments).
 *   - Motion durations live in custom properties. `prefers-reduced-motion`
 *     zeroes those properties once, at the top — which is why no transition
 *     in this file needs an !important reset.
 *   - The single !important block is the WooCommerce bridge at the bottom,
 *     and it says so.
 *
 * Progressive enhancement contract:
 *   - Nothing here hides content unconditionally. The accordion's collapsed
 *     state is gated on `html.lv-js`; the scroll-reveal's hidden state is
 *     gated on `.is-armed`, a class only JS ever adds. With JS off (or
 *     broken) every section renders fully visible.
 */

/* ==========================================================================
   00 · Tokens
   ========================================================================== */

:root {
	/* Palette — measured from the reference. */
	--lv-accent: var(--wp--preset--color--accent, #c84464);
	--lv-ink: var(--wp--preset--color--ink, #231b1e); /* warm near-black */
	--lv-cream: var(--wp--preset--color--cream, #f8f5f4); /* warm off-white */
	--lv-rose-100: var(--wp--preset--color--rose-100, #f3e9eb);
	--lv-rose-200: var(--wp--preset--color--rose-200, #e8dcdf);
	--lv-rose-300: var(--wp--preset--color--rose-300, #d7c7cb);
	--lv-bg: var(--wp--preset--color--base, #ffffff);
	/* Warm near-black for body copy. NOT the `contrast` preset: that resolves
	   to pure #000, which is what the whole page was rendering in. The
	   reference sets #161315 for text and keeps #231b1e for dark surfaces. */
	--lv-text: #161315;

	/* Derived surfaces — same hues, transparency only. */
	--lv-rule: #e9e1e3;
	--lv-muted: #716a6d;
	--lv-overlay-top: color-mix(in srgb, var(--lv-ink) 55%, transparent);
	--lv-overlay-mid: color-mix(in srgb, var(--lv-ink) 14%, transparent);
	--lv-overlay-bottom: color-mix(in srgb, var(--lv-ink) 80%, transparent);

	/* Shape */
	--lv-radius: 3px;
	--lv-container-w: 1440px;
	--lv-gutter: clamp(1.25rem, 5vw, 4.5rem);

	/* Type */
	--lv-heading-weight: 620;
	--lv-heading-lh: 0.96;
	--lv-heading-ls: -0.052em;
	--lv-micro-size: 0.6875rem; /* 11px — buttons, eyebrows, counters, labels */
	--lv-micro-weight: 750;
	--lv-micro-ls: 0.12em;
	--lv-body-size: 1.125rem; /* 18px */

	/* Motion — every transition below reads these. */
	--lv-dur-fast: 0.22s;
	--lv-dur: 0.42s;
	--lv-dur-slow: 0.72s;
	--lv-ease: cubic-bezier(0.22, 0.61, 0.36, 1);

	/* Reveal geometry — zeroed under reduced motion so nothing moves. */
	--lv-reveal-y: 24px;
	--lv-reveal-x: 28px;
	--lv-reveal-scale: 0.965;

	/* Focus — deliberately not the browser default: a solid ink ring plus a
	   white halo so it stays visible on cream, on rose and on the accent. */
	--lv-focus-color: var(--lv-ink);
	--lv-focus-halo: #ffffff;

	/* Measured by JS from the sticky header. */
	--lv-header-h: 0px;
}

/* color-mix has been baseline for years, but a stale rendering context that
   drops it would leave these properties invalid-at-computed-value-time and
   inherit something unrelated. Pin literal fallbacks first. */
@supports not (color: color-mix(in srgb, #000 50%, transparent)) {
	:root {
		/* --lv-muted and --lv-rule are literals now; only the overlays need this. */
		--lv-overlay-top: rgba(35, 27, 30, 0.55);
		--lv-overlay-mid: rgba(35, 27, 30, 0.14);
		--lv-overlay-bottom: rgba(35, 27, 30, 0.8);
	}
}

/* --------------------------------------------------------------------------
   Reduced motion. Zeroing the duration tokens disables every transition this
   file declares, in one place, without !important. The reveal offsets are
   zeroed too so armed-but-unrevealed content cannot sit displaced, and the
   JS reads the same media query to switch its programmatic scrolling to
   `behavior: 'auto'` and to skip arming the reveal entirely.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	:root {
		--lv-dur-fast: 0s;
		--lv-dur: 0s;
		--lv-dur-slow: 0s;
		--lv-reveal-y: 0px;
		--lv-reveal-x: 0px;
		--lv-reveal-scale: 1;
	}

	.lv-carousel__viewport {
		scroll-behavior: auto;
	}
}

/* ==========================================================================
   01 · Primitives
   ========================================================================== */

/* Wide children (carousels, tab strips, spec tables) scroll inside their own
   box; the page itself never gains a horizontal scrollbar. `clip` rather than
   `hidden` so it does not turn these into scroll containers and does not
   break the sticky header. */
.lv-section,
.lv-hero,
.lv-cta,
.lv-guarantee {
	max-width: 100%;
	overflow-x: clip;
}

.lv-container {
	width: 100%;
	max-width: var(--lv-container-w);
	margin-inline: auto;
	padding-inline: var(--lv-gutter);
}

.lv-container--narrow {
	max-width: 940px;
}

.lv-section {
	background: var(--lv-bg);
	color: var(--lv-text);
	font-size: var(--lv-body-size);
	line-height: 1.55;
	padding-block: clamp(3.5rem, 9vw, 8.5rem);
}

.lv-section--tint {
	background: var(--lv-cream);
}

.lv-section--rose {
	background: var(--lv-rose-100);
}

.lv-section--dark {
	background: var(--lv-ink);
	color: #fff;
	--lv-rule: rgba(255, 255, 255, 0.18);
	--lv-muted: rgba(255, 255, 255, 0.68);
	--lv-focus-color: #fff;
	--lv-focus-halo: rgba(35, 27, 30, 0.9);
}

.lv-section--flush {
	padding-block: 0;
}

.lv-section__head {
	display: grid;
	gap: clamp(0.75rem, 2vw, 1.25rem);
	margin-bottom: clamp(2rem, 5vw, 4rem);
	max-width: 46ch;
}

.lv-section__head--wide {
	max-width: none;
}

.lv-section__title,
.lv-h1,
.lv-h2,
.lv-h3 {
	font-weight: var(--lv-heading-weight);
	line-height: var(--lv-heading-lh);
	letter-spacing: var(--lv-heading-ls);
	margin: 0;
	text-wrap: balance;
}

.lv-h1 {
	font-size: clamp(2.75rem, 9.2vw, 7rem);
}

.lv-section__title,
.lv-h2 {
	font-size: clamp(2rem, 6vw, 4.25rem);
}

.lv-h3 {
	font-size: clamp(1.375rem, 3.2vw, 2.125rem);
}

.lv-section__lead {
	margin: 0;
	font-size: clamp(1rem, 1.6vw, 1.25rem);
	line-height: 1.55;
	color: var(--lv-muted);
	max-width: 62ch;
}

/* Eyebrow label with its short leading rule. */
.lv-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0;
	font-size: var(--lv-micro-size);
	font-weight: var(--lv-micro-weight);
	letter-spacing: var(--lv-micro-ls);
	text-transform: uppercase;
	line-height: 1;
	color: var(--lv-accent);
}

.lv-eyebrow::before {
	content: "";
	flex: 0 0 auto;
	width: clamp(20px, 4vw, 36px);
	height: 1px;
	background: currentColor;
}

.lv-eyebrow--muted {
	color: var(--lv-muted);
}

.lv-eyebrow--light {
	color: rgba(255, 255, 255, 0.86);
}

/* Screen-reader-only text (the carousel counter's spoken form uses it). */
.lv-sr-only {
	position: absolute;
	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;
}

/* Focus rings — one visible treatment for every control this file owns. */
.lv-btn:focus-visible,
.lv-carousel__viewport:focus-visible,
.lv-carousel__btn:focus-visible,
.lv-tabs__tab:focus-visible,
.lv-tabs__panel:focus-visible,
.lv-accordion__trigger:focus-visible,
.lv-nav-toggle:focus-visible,
.lv-nav a:focus-visible,
.lv-header a:focus-visible {
	outline: 3px solid var(--lv-focus-color);
	outline-offset: 3px;
	box-shadow: 0 0 0 6px var(--lv-focus-halo);
	border-radius: var(--lv-radius);
}

/* ==========================================================================
   02 · Buttons
   ========================================================================== */

.lv-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.625rem;
	padding: 1.0625rem 2.125rem;
	border: 1px solid transparent;
	border-radius: var(--lv-radius);
	background: var(--lv-accent);
	color: #fff;
	font-family: inherit;
	font-size: var(--lv-micro-size);
	font-weight: var(--lv-micro-weight);
	letter-spacing: var(--lv-micro-ls);
	line-height: 1;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition:
		background-color var(--lv-dur-fast) var(--lv-ease),
		color var(--lv-dur-fast) var(--lv-ease),
		border-color var(--lv-dur-fast) var(--lv-ease),
		transform var(--lv-dur-fast) var(--lv-ease);
}

.lv-btn:hover,
.lv-btn:focus-visible {
	background: var(--lv-ink);
	color: #fff;
	border-color: var(--lv-ink);
}

.lv-btn:active {
	transform: translateY(1px);
}

.lv-btn--ghost {
	background: transparent;
	color: var(--lv-ink);
	border-color: var(--lv-rose-300);
}

.lv-btn--ghost:hover,
.lv-btn--ghost:focus-visible {
	background: var(--lv-ink);
	border-color: var(--lv-ink);
	color: #fff;
}

.lv-btn--light {
	background: #fff;
	color: var(--lv-ink);
}

.lv-btn--light:hover,
.lv-btn--light:focus-visible {
	background: var(--lv-accent);
	color: #fff;
	border-color: var(--lv-accent);
}

.lv-btn--wide {
	width: 100%;
}

@media (min-width: 640px) {
	.lv-btn--wide {
		width: auto;
	}
}

.lv-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	align-items: center;
}

/* ==========================================================================
   03 · Hero
   ========================================================================== */

.lv-hero {
	position: relative;
	isolation: isolate;
	display: grid;
	align-items: end;
	min-height: clamp(520px, 86vh, 940px);
	min-height: clamp(520px, 86svh, 940px);
	color: #fff;
	background: var(--lv-ink);
	--lv-focus-color: #fff;
	--lv-focus-halo: rgba(35, 27, 30, 0.85);
}

.lv-hero__media {
	position: absolute;
	inset: 0;
	z-index: -2;
	overflow: hidden;
}

.lv-hero__media img,
.lv-hero__media video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--lv-hero-focus, 50% 40%);
}

/* Dark gradient over the full-bleed image: readable at the top (where the
   overlay header sits) and at the bottom (where the copy sits), clear in
   the middle so the product still reads. */
.lv-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(
		--lv-hero-overlay,
		linear-gradient(
			180deg,
			var(--lv-overlay-top) 0%,
			var(--lv-overlay-mid) 34%,
			var(--lv-overlay-bottom) 100%
		)
	);
	pointer-events: none;
}

.lv-hero__inner {
	width: 100%;
	max-width: var(--lv-container-w);
	margin-inline: auto;
	padding-inline: var(--lv-gutter);
	padding-block: clamp(3.5rem, 10vw, 7rem);
	display: grid;
	gap: clamp(1rem, 2.5vw, 1.75rem);
	justify-items: start;
}

.lv-hero__inner--center {
	justify-items: center;
	text-align: center;
}

.lv-hero__title {
	margin: 0;
	max-width: 16ch;
	font-size: clamp(2.75rem, 9.2vw, 7rem);
	font-weight: var(--lv-heading-weight);
	line-height: var(--lv-heading-lh);
	letter-spacing: var(--lv-heading-ls);
	text-wrap: balance;
}

.lv-hero__lead {
	margin: 0;
	max-width: 44ch;
	font-size: clamp(1rem, 1.8vw, 1.25rem);
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.86);
}

.lv-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: clamp(0.5rem, 2vw, 1rem);
}

/* ==========================================================================
   04 · Stats row (vertical dividers)
   ========================================================================== */

/* The 1px grid gap over a rule-coloured background draws the dividers, so it
   stays correct at any item count and rewraps cleanly on small screens. */
.lv-stats {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1px;
	background: var(--lv-rule);
	border-block: 1px solid var(--lv-rule);
	list-style: none;
	margin: 0;
	padding: 0;
}

.lv-stats__item {
	background: var(--lv-bg);
	padding: clamp(1.25rem, 3.5vw, 2.5rem) clamp(0.75rem, 2vw, 1.5rem);
	display: grid;
	gap: 0.5rem;
	align-content: center;
	justify-items: center;
	text-align: center;
}

.lv-section--tint .lv-stats__item {
	background: var(--lv-cream);
}

.lv-section--rose .lv-stats__item {
	background: var(--lv-rose-100);
}

.lv-section--dark .lv-stats__item {
	background: var(--lv-ink);
}

.lv-stats__value {
	font-size: clamp(2rem, 5.5vw, 3.5rem);
	font-weight: var(--lv-heading-weight);
	line-height: var(--lv-heading-lh);
	letter-spacing: var(--lv-heading-ls);
	font-variant-numeric: tabular-nums;
}

.lv-stats__label {
	font-size: var(--lv-micro-size);
	font-weight: var(--lv-micro-weight);
	letter-spacing: var(--lv-micro-ls);
	text-transform: uppercase;
	line-height: 1.35;
	color: var(--lv-muted);
	max-width: 22ch;
}

@media (min-width: 860px) {
	.lv-stats {
		grid-template-columns: repeat(var(--lv-stats-cols, 4), minmax(0, 1fr));
	}
}

/* ==========================================================================
   05 · Feature strip (4 items)
   ========================================================================== */

.lv-features {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1px;
	background: var(--lv-rule);
	border: 1px solid var(--lv-rule);
	border-radius: var(--lv-radius);
	overflow: hidden;
	list-style: none;
	margin: 0;
	padding: 0;
}

.lv-features__item {
	background: var(--lv-bg);
	padding: clamp(1.5rem, 3.5vw, 2.5rem);
	display: grid;
	gap: 0.625rem;
	align-content: start;
	transition: background-color var(--lv-dur) var(--lv-ease);
}

.lv-section--tint .lv-features__item {
	background: var(--lv-cream);
}

.lv-features__item:hover {
	background: var(--lv-rose-100);
}

.lv-section--dark .lv-features__item {
	background: var(--lv-ink);
}

.lv-section--dark .lv-features__item:hover {
	background: rgba(255, 255, 255, 0.06);
}

.lv-features__icon {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	margin-bottom: 0.375rem;
	border-radius: 50%;
	background: var(--lv-rose-100);
	color: var(--lv-accent);
	font-size: var(--lv-micro-size);
	font-weight: var(--lv-micro-weight);
	letter-spacing: var(--lv-micro-ls);
}

.lv-features__icon img,
.lv-features__icon svg {
	width: 20px;
	height: 20px;
	display: block;
}

.lv-features__title {
	margin: 0;
	font-size: 1.125rem;
	font-weight: var(--lv-heading-weight);
	letter-spacing: -0.02em;
	line-height: 1.2;
}

.lv-features__text {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var(--lv-muted);
}

@media (min-width: 600px) {
	.lv-features {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1000px) {
	.lv-features {
		grid-template-columns: repeat(var(--lv-features-cols, 4), minmax(0, 1fr));
	}
}

/* ==========================================================================
   06 · Spec rows (label + value)
   ========================================================================== */

.lv-specs {
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--lv-rule);
}

.lv-specs__row {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0.25rem;
	padding-block: clamp(0.875rem, 2.4vw, 1.25rem);
	border-bottom: 1px solid var(--lv-rule);
	margin: 0;
}

.lv-specs__label,
.lv-specs dt {
	margin: 0;
	font-size: var(--lv-micro-size);
	font-weight: var(--lv-micro-weight);
	letter-spacing: var(--lv-micro-ls);
	text-transform: uppercase;
	line-height: 1.4;
	color: var(--lv-muted);
}

.lv-specs__value,
.lv-specs dd {
	margin: 0;
	font-size: 1rem;
	line-height: 1.5;
}

@media (min-width: 640px) {
	.lv-specs__row {
		grid-template-columns: minmax(140px, 30%) minmax(0, 1fr);
		gap: clamp(1rem, 3vw, 2.5rem);
		align-items: baseline;
	}
}

/* ==========================================================================
   07 · Results carousel
   ========================================================================== */

.lv-carousel {
	position: relative;
	--lv-carousel-gap: clamp(0.75rem, 2vw, 1.5rem);
}

.lv-carousel__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1.25rem;
	margin-bottom: clamp(1.5rem, 3.5vw, 2.5rem);
}

.lv-carousel__viewport {
	position: relative;
	display: flex;
	gap: var(--lv-carousel-gap);
	overflow-x: auto;
	overflow-y: hidden;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-padding-inline-start: 0;
	padding-block-end: 0.25rem;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	-ms-overflow-style: none;
	scroll-behavior: auto; /* JS drives the smooth scroll so it can honour reduced motion */
}

.lv-carousel__viewport::-webkit-scrollbar {
	display: none;
}

.lv-carousel__viewport.is-draggable {
	cursor: grab;
}

/* While a pointer drag is running the scroll position is assigned directly,
   so snapping has to stand down or it fights every frame. */
.lv-carousel__viewport.is-dragging {
	cursor: grabbing;
	scroll-snap-type: none;
	user-select: none;
}

.lv-carousel__viewport.is-dragging a,
.lv-carousel__viewport.is-dragging img {
	pointer-events: none;
}

.lv-carousel__slide {
	flex: 0 0 var(--lv-slide-w, clamp(232px, 78vw, 380px));
	scroll-snap-align: start;
	scroll-snap-stop: always;
	min-width: 0;
	transition: opacity var(--lv-dur) var(--lv-ease);
}

@media (min-width: 900px) {
	.lv-carousel__slide {
		--lv-slide-w: var(--lv-slide-w-lg, 360px);
	}
}

/* Opt-in: dim everything but the slide the observer says is in view. */
.lv-carousel--dim .lv-carousel__slide:not(.is-current) {
	opacity: 0.5;
}

.lv-carousel__media {
	display: block;
	width: 100%;
	aspect-ratio: var(--lv-slide-ratio, 3 / 4);
	overflow: hidden;
	border-radius: var(--lv-radius);
	background: var(--lv-rose-100);
}

.lv-carousel__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--lv-dur-slow) var(--lv-ease);
}

.lv-carousel__slide:hover .lv-carousel__media img {
	transform: scale(1.04);
}

.lv-carousel__caption {
	display: grid;
	gap: 0.25rem;
	margin-top: 0.875rem;
}

.lv-carousel__caption-title {
	margin: 0;
	font-size: 1rem;
	font-weight: var(--lv-heading-weight);
	letter-spacing: -0.02em;
}

.lv-carousel__caption-meta {
	margin: 0;
	font-size: var(--lv-micro-size);
	font-weight: var(--lv-micro-weight);
	letter-spacing: var(--lv-micro-ls);
	text-transform: uppercase;
	color: var(--lv-muted);
}

.lv-carousel__controls {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	margin-top: clamp(1.25rem, 3vw, 2rem);
}

.lv-carousel__counter {
	margin: 0 auto 0 0;
	font-size: var(--lv-micro-size);
	font-weight: var(--lv-micro-weight);
	letter-spacing: var(--lv-micro-ls);
	font-variant-numeric: tabular-nums;
	color: var(--lv-muted);
	white-space: nowrap;
}

.lv-carousel__btn {
	appearance: none;
	display: inline-grid;
	place-items: center;
	flex: 0 0 auto;
	width: 46px;
	height: 46px;
	padding: 0;
	border: 1px solid var(--lv-rose-300);
	border-radius: 50%;
	background: transparent;
	color: var(--lv-ink);
	cursor: pointer;
	transition:
		background-color var(--lv-dur-fast) var(--lv-ease),
		border-color var(--lv-dur-fast) var(--lv-ease),
		color var(--lv-dur-fast) var(--lv-ease);
}

.lv-section--dark .lv-carousel__btn {
	color: #fff;
	border-color: rgba(255, 255, 255, 0.28);
}

.lv-carousel__btn:hover {
	background: var(--lv-ink);
	border-color: var(--lv-ink);
	color: #fff;
}

/* aria-disabled rather than the disabled attribute: the button keeps its
   place in the tab order, so a keyboard user who reaches the last slide is
   not thrown out of the control cluster. JS makes the press a no-op. */
.lv-carousel__btn[aria-disabled="true"] {
	opacity: 0.32;
	pointer-events: none;
}

/* CSS-drawn chevrons so the markup can ship an empty button; suppressed the
   moment real icon markup is present. */
.lv-carousel__btn::before {
	content: "";
	width: 9px;
	height: 9px;
	border-top: 1.5px solid currentColor;
	border-right: 1.5px solid currentColor;
	transform: rotate(45deg);
	margin-inline-start: -3px;
}

.lv-carousel__btn--prev::before {
	transform: rotate(-135deg);
	margin-inline-start: 3px;
}

.lv-carousel__btn:has(svg)::before,
.lv-carousel__btn:has(img)::before {
	content: none;
}

.lv-carousel__btn svg {
	width: 16px;
	height: 16px;
	display: block;
}

/* ==========================================================================
   08 · Tabs
   ========================================================================== */

.lv-tabs {
	display: grid;
	gap: clamp(1.5rem, 3.5vw, 2.75rem);
}

.lv-tabs__list {
	display: flex;
	gap: clamp(1rem, 3vw, 2.75rem);
	align-items: stretch;
	border-bottom: 1px solid var(--lv-rule);
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: none;
	-ms-overflow-style: none;
	-webkit-overflow-scrolling: touch;
}

.lv-tabs__list::-webkit-scrollbar {
	display: none;
}

.lv-tabs__tab {
	position: relative;
	appearance: none;
	flex: 0 0 auto;
	display: inline-flex;
	align-items: baseline;
	gap: 0.5rem;
	padding: 0.875rem 0.125rem 1.0625rem;
	border: 0;
	background: none;
	color: var(--lv-muted);
	font-family: inherit;
	text-align: left;
	white-space: nowrap;
	cursor: pointer;
	transition: color var(--lv-dur-fast) var(--lv-ease);
}

.lv-tabs__tab-label {
	font-size: clamp(1rem, 2.6vw, 1.5rem);
	font-weight: var(--lv-heading-weight);
	letter-spacing: -0.03em;
	line-height: 1.1;
}

.lv-tabs__tab-num {
	font-size: var(--lv-micro-size);
	font-weight: var(--lv-micro-weight);
	letter-spacing: var(--lv-micro-ls);
	font-variant-numeric: tabular-nums;
	opacity: 0.7;
}

.lv-tabs__tab::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: -1px;
	height: 2px;
	background: var(--lv-accent);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform var(--lv-dur) var(--lv-ease);
}

.lv-tabs__tab:hover {
	color: var(--lv-ink);
}

.lv-section--dark .lv-tabs__tab:hover,
.lv-section--dark .lv-tabs__tab[aria-selected="true"] {
	color: #fff;
}

.lv-tabs__tab[aria-selected="true"] {
	color: var(--lv-ink);
}

.lv-tabs__tab[aria-selected="true"]::after {
	transform: scaleX(1);
}

/* The panels wrapper is the height-transition surface; the outgoing panel is
   taken out of flow while it fades so the height can animate to the new one. */
.lv-tabs__panels {
	position: relative;
	transition: height var(--lv-dur) var(--lv-ease);
}

.lv-tabs__panel {
	transition:
		opacity var(--lv-dur) var(--lv-ease),
		transform var(--lv-dur) var(--lv-ease);
}

.lv-tabs__panel:focus {
	outline: none;
}

/* JS hides inactive panels with the `hidden` attribute; any `display` rule
   added to the panel later would silently defeat it, so pin it here. */
.lv-tabs__panel[hidden] {
	display: none;
}

.lv-tabs__panel.is-entering {
	opacity: 0;
	transform: translate3d(0, 10px, 0);
}

.lv-tabs__panel.is-leaving {
	position: absolute;
	inset-block-start: 0;
	inset-inline: 0;
	opacity: 0;
	pointer-events: none;
}

.lv-tabs__panel-grid {
	display: grid;
	gap: clamp(1.25rem, 3vw, 2.5rem);
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 860px) {
	.lv-tabs__panel-grid {
		grid-template-columns: repeat(var(--lv-panel-cols, 2), minmax(0, 1fr));
	}
}

/* ==========================================================================
   09 · FAQ accordion
   ========================================================================== */

.lv-accordion {
	border-top: 1px solid var(--lv-rule);
}

.lv-accordion__item {
	border-bottom: 1px solid var(--lv-rule);
}

.lv-accordion__heading {
	margin: 0;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
}

.lv-accordion__trigger {
	appearance: none;
	width: 100%;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1.25rem;
	padding: clamp(1.125rem, 2.6vw, 1.75rem) 0;
	border: 0;
	background: none;
	color: inherit;
	font-family: inherit;
	font-size: clamp(1rem, 2.2vw, 1.375rem);
	font-weight: var(--lv-heading-weight);
	letter-spacing: -0.02em;
	line-height: 1.3;
	text-align: left;
	cursor: pointer;
	transition: color var(--lv-dur-fast) var(--lv-ease);
}

.lv-accordion__trigger:hover {
	color: var(--lv-accent);
}

.lv-accordion__question {
	flex: 1 1 auto;
	min-width: 0;
}

/* The `+` is two 1.5px bars; opening rotates the whole glyph 135° so the plus
   becomes an ×, in one transform. */
.lv-accordion__icon {
	position: relative;
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	margin-top: 0.15em;
	color: var(--lv-accent);
	transition: transform var(--lv-dur) var(--lv-ease);
}

.lv-accordion__icon::before,
.lv-accordion__icon::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	background: currentColor;
	transform: translate(-50%, -50%);
}

.lv-accordion__icon::before {
	width: 100%;
	height: 1.5px;
}

.lv-accordion__icon::after {
	width: 1.5px;
	height: 100%;
}

.lv-accordion__trigger[aria-expanded="true"] .lv-accordion__icon {
	transform: rotate(135deg);
}

/* Collapsed geometry is gated on `html.lv-js`. Without JS the answers stay
   open and readable; nothing here hides content unconditionally.
   `visibility: hidden` (delayed until the height finishes) keeps collapsed
   answers out of the tab order and the accessibility tree. */
.lv-js .lv-accordion__panel {
	height: 0;
	overflow: hidden;
	visibility: hidden;
	transition:
		height var(--lv-dur) var(--lv-ease),
		visibility 0s linear var(--lv-dur);
}

.lv-js .lv-accordion__item.is-open .lv-accordion__panel {
	visibility: visible;
	transition:
		height var(--lv-dur) var(--lv-ease),
		visibility 0s linear 0s;
}

.lv-accordion__panel-inner {
	padding-bottom: clamp(1.125rem, 2.6vw, 1.75rem);
	max-width: 70ch;
	font-size: 1rem;
	line-height: 1.6;
	color: var(--lv-muted);
}

.lv-accordion__panel-inner > :first-child {
	margin-top: 0;
}

.lv-accordion__panel-inner > :last-child {
	margin-bottom: 0;
}

/* ==========================================================================
   10 · Testimonial quote cards
   ========================================================================== */

.lv-quotes {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(1rem, 2.5vw, 1.75rem);
}

@media (min-width: 720px) {
	.lv-quotes {
		grid-template-columns: repeat(var(--lv-quotes-cols, 3), minmax(0, 1fr));
	}
}

.lv-quote {
	position: relative;
	display: grid;
	gap: 1rem;
	align-content: start;
	padding: clamp(1.5rem, 3.5vw, 2.5rem);
	background: var(--lv-rose-100);
	border-radius: var(--lv-radius);
	transition:
		background-color var(--lv-dur) var(--lv-ease),
		transform var(--lv-dur) var(--lv-ease);
}

.lv-quote:hover {
	background: var(--lv-rose-200);
	transform: translate3d(0, -3px, 0);
}

.lv-section--rose .lv-quote {
	background: #fff;
}

.lv-section--dark .lv-quote {
	background: rgba(255, 255, 255, 0.06);
}

.lv-section--dark .lv-quote:hover {
	background: rgba(255, 255, 255, 0.1);
}

.lv-quote__stars {
	font-size: 0.875rem;
	letter-spacing: 0.18em;
	line-height: 1;
	color: var(--lv-accent);
}

.lv-quote__text {
	margin: 0;
	font-size: 1.0625rem;
	line-height: 1.6;
	text-wrap: pretty;
}

.lv-quote__text::before {
	content: "\201C";
}

.lv-quote__text::after {
	content: "\201D";
}

.lv-quote__footer {
	display: grid;
	gap: 0.125rem;
	margin: 0;
	padding-top: 0.5rem;
	border-top: 1px solid var(--lv-rose-300);
}

.lv-section--dark .lv-quote__footer {
	border-top-color: rgba(255, 255, 255, 0.18);
}

.lv-quote__author {
	font-size: 0.9375rem;
	font-weight: var(--lv-heading-weight);
	letter-spacing: -0.01em;
	font-style: normal;
}

.lv-quote__meta {
	font-size: var(--lv-micro-size);
	font-weight: var(--lv-micro-weight);
	letter-spacing: var(--lv-micro-ls);
	text-transform: uppercase;
	color: var(--lv-muted);
}

/* ==========================================================================
   11 · Guarantee block (big numeral)
   ========================================================================== */

.lv-guarantee {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(1rem, 3vw, 2.5rem);
	align-items: center;
}

.lv-guarantee__numeral {
	display: block;
	font-size: clamp(6rem, 26vw, 15rem);
	font-weight: var(--lv-heading-weight);
	line-height: 0.78;
	letter-spacing: -0.06em;
	color: var(--lv-rose-300);
	font-variant-numeric: tabular-nums;
	user-select: none;
}

.lv-section--dark .lv-guarantee__numeral {
	color: rgba(255, 255, 255, 0.16);
}

.lv-guarantee__body {
	display: grid;
	gap: clamp(0.75rem, 2vw, 1.25rem);
	align-content: center;
	max-width: 52ch;
}

.lv-guarantee__title {
	margin: 0;
	font-size: clamp(1.75rem, 4.5vw, 3rem);
	font-weight: var(--lv-heading-weight);
	line-height: var(--lv-heading-lh);
	letter-spacing: var(--lv-heading-ls);
}

.lv-guarantee__text {
	margin: 0;
	font-size: clamp(1rem, 1.6vw, 1.125rem);
	line-height: 1.6;
	color: var(--lv-muted);
}

@media (min-width: 860px) {
	.lv-guarantee {
		grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr);
		gap: clamp(2rem, 5vw, 5rem);
	}
}

/* ==========================================================================
   12 · Final CTA band
   ========================================================================== */

.lv-cta {
	background: var(--lv-ink);
	color: #fff;
	--lv-muted: rgba(255, 255, 255, 0.7);
	--lv-focus-color: #fff;
	--lv-focus-halo: rgba(35, 27, 30, 0.9);
	padding-block: clamp(3.5rem, 9vw, 7.5rem);
}

.lv-cta--accent {
	background: var(--lv-accent);
}

.lv-cta--tint {
	background: var(--lv-cream);
	color: var(--lv-text);
	--lv-muted: color-mix(in srgb, var(--lv-ink) 62%, transparent);
	--lv-focus-color: var(--lv-ink);
	--lv-focus-halo: #fff;
}

.lv-cta__inner {
	display: grid;
	gap: clamp(1rem, 2.5vw, 1.75rem);
	justify-items: center;
	text-align: center;
	max-width: 68ch;
	margin-inline: auto;
}

.lv-cta__title {
	margin: 0;
	font-size: clamp(2rem, 6.5vw, 4.5rem);
	font-weight: var(--lv-heading-weight);
	line-height: var(--lv-heading-lh);
	letter-spacing: var(--lv-heading-ls);
	text-wrap: balance;
}

.lv-cta__text {
	margin: 0;
	font-size: clamp(1rem, 1.7vw, 1.1875rem);
	line-height: 1.55;
	color: var(--lv-muted);
}

.lv-cta__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	justify-content: center;
	margin-top: 0.5rem;
}

.lv-cta__note {
	margin: 0;
	font-size: var(--lv-micro-size);
	font-weight: var(--lv-micro-weight);
	letter-spacing: var(--lv-micro-ls);
	text-transform: uppercase;
	color: var(--lv-muted);
}

/* ==========================================================================
   13 · Sticky header
   ========================================================================== */

.lv-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: transparent;
	transition:
		background-color var(--lv-dur) var(--lv-ease),
		box-shadow var(--lv-dur) var(--lv-ease),
		color var(--lv-dur) var(--lv-ease),
		backdrop-filter var(--lv-dur) var(--lv-ease);
}

.lv-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	width: 100%;
	max-width: var(--lv-container-w);
	margin-inline: auto;
	padding-inline: var(--lv-gutter);
	padding-block: clamp(1rem, 2.6vw, 1.75rem);
	transition: padding var(--lv-dur) var(--lv-ease);
}

/* Sits over the hero image until the hero has been scrolled past. */
.lv-header--overlay:not(.is-stuck) {
	color: #fff;
	--lv-focus-color: #fff;
	--lv-focus-halo: rgba(35, 27, 30, 0.85);
}

/* `is-stuck` fires past the hero (or `data-lv-header-offset`); `is-scrolled`
   fires after ~8px, for callers that want the shadow immediately. */
.lv-header.is-stuck {
	background: color-mix(in srgb, var(--lv-bg) 92%, transparent);
	backdrop-filter: saturate(140%) blur(12px);
	-webkit-backdrop-filter: saturate(140%) blur(12px);
	color: var(--lv-ink);
	box-shadow:
		0 1px 0 var(--lv-rose-200),
		0 18px 40px -32px rgba(35, 27, 30, 0.85);
}

.lv-header.is-stuck .lv-header__inner {
	padding-block: clamp(0.5rem, 1.4vw, 0.875rem);
}

.lv-header__logo {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	color: inherit;
	text-decoration: none;
	font-weight: var(--lv-heading-weight);
	letter-spacing: -0.03em;
	font-size: clamp(1.0625rem, 2.4vw, 1.375rem);
	transition: transform var(--lv-dur) var(--lv-ease);
}

.lv-header__logo img,
.lv-header__logo svg {
	display: block;
	height: clamp(20px, 3.4vw, 28px);
	width: auto;
	transition: height var(--lv-dur) var(--lv-ease);
}

.lv-header.is-stuck .lv-header__logo img,
.lv-header.is-stuck .lv-header__logo svg {
	height: clamp(18px, 2.8vw, 24px);
}

.lv-header__actions {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

/* Mobile nav (optional — only wired up if the toggle exists). */
.lv-nav-toggle {
	appearance: none;
	display: inline-grid;
	place-items: center;
	gap: 4px;
	width: 42px;
	height: 42px;
	padding: 0;
	border: 1px solid currentColor;
	border-radius: var(--lv-radius);
	background: none;
	color: inherit;
	cursor: pointer;
}

.lv-nav-toggle__bar {
	display: block;
	width: 18px;
	height: 1.5px;
	background: currentColor;
	transition:
		transform var(--lv-dur-fast) var(--lv-ease),
		opacity var(--lv-dur-fast) var(--lv-ease);
}

.lv-nav-toggle[aria-expanded="true"] .lv-nav-toggle__bar:nth-child(1) {
	transform: translateY(5.5px) rotate(45deg);
}

.lv-nav-toggle[aria-expanded="true"] .lv-nav-toggle__bar:nth-child(2) {
	opacity: 0;
}

.lv-nav-toggle[aria-expanded="true"] .lv-nav-toggle__bar:nth-child(3) {
	transform: translateY(-5.5px) rotate(-45deg);
}

@media (min-width: 900px) {
	.lv-nav-toggle {
		display: none;
	}
}

.lv-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: clamp(1rem, 2.6vw, 2.25rem);
	align-items: center;
}

.lv-nav a {
	color: inherit;
	text-decoration: none;
	font-size: var(--lv-micro-size);
	font-weight: var(--lv-micro-weight);
	letter-spacing: var(--lv-micro-ls);
	text-transform: uppercase;
	transition: color var(--lv-dur-fast) var(--lv-ease);
}

.lv-nav a:hover {
	color: var(--lv-accent);
}

@media (max-width: 899px) {
	.lv-nav {
		position: fixed;
		inset: var(--lv-header-h) 0 auto 0;
		max-height: calc(100dvh - var(--lv-header-h));
		overflow-y: auto;
		background: var(--lv-bg);
		color: var(--lv-text);
		padding: clamp(1.25rem, 5vw, 2rem) var(--lv-gutter) clamp(2rem, 7vw, 3rem);
		border-bottom: 1px solid var(--lv-rule);
		opacity: 0;
		visibility: hidden;
		transform: translate3d(0, -8px, 0);
		transition:
			opacity var(--lv-dur) var(--lv-ease),
			transform var(--lv-dur) var(--lv-ease),
			visibility 0s linear var(--lv-dur);
	}

	.lv-nav.is-open {
		opacity: 1;
		visibility: visible;
		transform: none;
		transition:
			opacity var(--lv-dur) var(--lv-ease),
			transform var(--lv-dur) var(--lv-ease),
			visibility 0s linear 0s;
	}

	.lv-nav ul {
		flex-direction: column;
		align-items: flex-start;
		gap: 1.125rem;
	}

	.lv-nav a {
		font-size: 1.125rem;
		letter-spacing: -0.02em;
		text-transform: none;
		font-weight: var(--lv-heading-weight);
	}
}

/* Scroll lock while the mobile nav is open. */
.lv-nav-open,
.lv-nav-open body {
	overflow: hidden;
}

/* Anchor targets clear the sticky header. */
:target {
	scroll-margin-top: calc(var(--lv-header-h) + 16px);
}

/* ==========================================================================
   14 · Scroll reveal
   ========================================================================== */

/* `.is-armed` is added by JS and only by JS — and never at all under reduced
   motion, or when IntersectionObserver is missing. That is the whole
   progressive-enhancement guarantee: no unconditional opacity: 0 exists. */
.lv-reveal {
	transition:
		opacity var(--lv-dur-slow) var(--lv-ease) var(--lv-reveal-delay, 0ms),
		transform var(--lv-dur-slow) var(--lv-ease) var(--lv-reveal-delay, 0ms);
}

.lv-reveal.is-armed:not(.is-revealed) {
	opacity: 0;
	transform: translate3d(0, var(--lv-reveal-y), 0);
}

.lv-reveal--fade.is-armed:not(.is-revealed) {
	transform: none;
}

.lv-reveal--left.is-armed:not(.is-revealed) {
	transform: translate3d(calc(-1 * var(--lv-reveal-x)), 0, 0);
}

.lv-reveal--right.is-armed:not(.is-revealed) {
	transform: translate3d(var(--lv-reveal-x), 0, 0);
}

.lv-reveal--scale.is-armed:not(.is-revealed) {
	transform: scale(var(--lv-reveal-scale));
}

.lv-reveal.is-revealed {
	opacity: 1;
	transform: none;
}

/* ==========================================================================
   15 · WooCommerce bridge
   ========================================================================== */

/*
 * The ONLY !important declarations in this file.
 * WooCommerce ships `.woocommerce #respond input#submit, .woocommerce a.button,
 * .woocommerce button.button, .woocommerce input.button` as one selector list
 * with its own background/colour/border-radius, loaded after theme styles by
 * woocommerce-layout/woocommerce.css. Matching that specificity from a child
 * theme means chaining four class selectors per rule and re-doing it for every
 * `.alt` / `:hover` / `:disabled` variant; !important on three properties is
 * the smaller and more maintainable override. Add the `lv-btn` class to Woo
 * buttons where you can — this block only catches the ones you cannot reach.
 */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce button.button.single_add_to_cart_button {
	background-color: var(--lv-accent) !important;
	color: #fff !important;
	border-radius: var(--lv-radius) !important;
	padding: 1.0625rem 2.125rem;
	font-family: inherit;
	font-size: var(--lv-micro-size);
	font-weight: var(--lv-micro-weight);
	letter-spacing: var(--lv-micro-ls);
	line-height: 1;
	text-transform: uppercase;
	border: 1px solid transparent;
	transition:
		background-color var(--lv-dur-fast) var(--lv-ease),
		border-color var(--lv-dur-fast) var(--lv-ease);
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce button.button.single_add_to_cart_button:hover {
	background-color: var(--lv-ink) !important;
	color: #fff !important;
}

.woocommerce a.button:focus-visible,
.woocommerce button.button:focus-visible,
.woocommerce input.button:focus-visible {
	outline: 3px solid var(--lv-focus-color);
	outline-offset: 3px;
	box-shadow: 0 0 0 6px var(--lv-focus-halo);
}

.woocommerce .quantity input.qty {
	border: 1px solid var(--lv-rule);
	border-radius: var(--lv-radius);
	padding: 0.75rem 0.5rem;
	font-family: inherit;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
	color: var(--lv-ink);
	font-size: clamp(1.5rem, 3.4vw, 2.25rem);
	font-weight: var(--lv-heading-weight);
	letter-spacing: -0.03em;
}

/* ---------------------------------------------------------------------------
   Dark-context corrections
   ---------------------------------------------------------------------------
   WordPress global styles emit `:root :where(h1,h2,…){color:…}`. `:where()`
   contributes nothing, so that rule scores (0,1,0) — the same as a single
   class — and it is inlined after our stylesheets, so the tie goes to it.
   Every heading on a dark band therefore rendered black on near-black.
   Two classes settle it without !important.

   Measured on the live page before fixing: .lv-section--dark .lv-h2,
   .lv-cta--accent .lv-cta__title and .lv-guarantee__title all computed
   rgb(0,0,0) while their section colour was #fff.
--------------------------------------------------------------------------- */

.lv-hero .lv-h1,
.lv-hero .lv-h2,
.lv-hero .lv-hero__title,
.lv-section--dark .lv-h2,
.lv-section--dark .lv-h3,
.lv-section--dark .lv-section__title,
.lv-guarantee .lv-guarantee__title,
.lv-cta--accent .lv-cta__title,
.lv-cta--accent .lv-h2 {
	color: #fff;
}

/* The two-tone second phrase uses <em> purely as a hook — the reference sets
   it in a lighter tone, never in italic. */
.lv-h1 em,
.lv-h2 em,
.lv-h3 em,
.lv-hero__title em,
.lv-cta__title em,
.lv-guarantee__title em,
.lv-section__title em {
	font-style: normal;
	font-weight: inherit;
}

.lv-hero .lv-hero__title em,
.lv-section--dark .lv-h2 em,
.lv-section--dark .lv-section__title em,
.lv-cta--accent .lv-cta__title em,
.lv-guarantee .lv-guarantee__title em {
	color: rgba(255, 255, 255, 0.64);
}

/* Stats inherit the light-section card treatment, which on the hero put white
   text on a white card. Over an image they are dividers, not cards. */
.lv-hero .lv-stats,
.lv-section--dark .lv-stats {
	background: none;
	border-top: 1px solid rgba(255, 255, 255, 0.22);
	border-bottom: 1px solid rgba(255, 255, 255, 0.22);
}

.lv-hero .lv-stats__item,
.lv-section--dark .lv-stats__item {
	background: none;
	border-left: 1px solid rgba(255, 255, 255, 0.18);
}

.lv-hero .lv-stats__item:first-child,
.lv-section--dark .lv-stats__item:first-child {
	border-left: 0;
}

.lv-hero .lv-stats__value,
.lv-section--dark .lv-stats__value {
	color: #fff;
	/* 56px is the light-section display size; in the hero these sit under an
	   82px headline and must not compete with it. */
	font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
}

.lv-hero .lv-stats__label,
.lv-section--dark .lv-stats__label {
	color: rgba(255, 255, 255, 0.7);
}

.lv-hero .lv-eyebrow,
.lv-section--dark .lv-eyebrow {
	color: #fff;
}

.lv-hero .lv-eyebrow::before,
.lv-section--dark .lv-eyebrow::before {
	background: var(--lv-accent, #c84464);
}

/* ==========================================================================
   20 · Reference parity — laurivacosmetics.shop

   Every number below was read off the reference with getComputedStyle at
   1440x900 (and 360x760), then re-checked against the inline stylesheet it
   ships. Where our markup differs from the reference's, the rule reproduces
   the reference's *result*, not its markup.

   Load order note: this file loads after WordPress's global styles, so a
   single class already wins the ties that matter. Two classes are used where
   a rule has to beat an earlier rule in THIS file (notably the dark-context
   block in § 19), and `color` is declared explicitly on every heading —
   WordPress paints headings with a bare `h1,h2,…{color:…}` element rule, so
   a heading that declares no colour of its own silently renders #000
   regardless of the section it sits in.
   ========================================================================== */

/* --------------------------------------------------------------------------
   20.1 Measure. The reference content column is 1320px inside a 40px gutter
   (`width: min(1320px, 100% - 80px)`). Declared on the landing-page wrappers
   rather than on :root so assets/lauriva-woo.css keeps the shop measure it
   was verified against.
   -------------------------------------------------------------------------- */
.lv-hero,
.lv-section,
.lv-cta {
	--lv-container-w: 1400px; /* 1320 content + 2 x 40 gutter */
	--lv-gutter: 40px;
}

@media (max-width: 1024px) {
	.lv-hero,
	.lv-section,
	.lv-cta {
		--lv-gutter: 24px;
	}
}

@media (max-width: 767px) {
	.lv-hero,
	.lv-section,
	.lv-cta {
		--lv-gutter: 18px;
	}
}

/* wpautop leaves empty <p> and stray <br> between block-level siblings. They
   carry the UA 1em margin, which next to the 150px guarantee numeral was
   150px of dead space above and below it. Nothing here is empty on purpose. */
.lv-hero p:empty,
.lv-section p:empty,
.lv-cta p:empty {
	display: none;
}

.lv-actions br,
.lv-tabs__list br,
.lv-carousel__nav br,
.lv-stats br {
	display: none;
}

/* --------------------------------------------------------------------------
   20.2 Section rhythm and surfaces.

   The page content (post 64) carries different section modifiers than the
   reference uses: the results band ships `--dark` but is warm off-white on
   the reference, the bundle ships `--rose` but is near-black, the guarantee
   ships `--dark` but is white, and the tabs band ships plain but is blush.
   Until those classes are swapped in the content, `:has()` re-assigns the
   surface from what the section *contains*, which is stable.
   -------------------------------------------------------------------------- */
.lv-section {
	padding-block: 110px;
}

.lv-section--flush,
.lv-section--flush.lv-section--flush {
	padding-block: 0;
}

.lv-carousel.lv-section--dark {
	background: var(--lv-cream);
	color: var(--lv-text);
	--lv-rule: #e9e1e3;
	--lv-muted: #716a6d;
	--lv-focus-color: var(--lv-ink);
	--lv-focus-halo: #ffffff;
}

.lv-section:has(> .lv-container > .lv-tabs) {
	background: var(--lv-rose-100);
}

.lv-section--rose:has(> .lv-split--reverse) {
	background: var(--lv-ink);
	color: #fff;
	padding-block: 0;
	--lv-rule: rgba(255, 255, 255, 0.15);
	--lv-muted: rgba(255, 255, 255, 0.68);
	--lv-focus-color: #fff;
	--lv-focus-halo: rgba(35, 27, 30, 0.9);
}

.lv-section--dark:has(> .lv-guarantee) {
	background: var(--lv-bg);
	color: var(--lv-text);
	--lv-rule: #e9e1e3;
	--lv-muted: #716a6d;
	--lv-focus-color: var(--lv-ink);
	--lv-focus-halo: #ffffff;
}

.lv-section--tint:has(.lv-features) {
	background: var(--lv-bg);
	padding-block: 0;
	border-bottom: 1px solid var(--lv-rule);
}

/* Flipping a surface means flipping every colour the dark context set. Those
   rules are two classes deep (§ 19), so these are three. */
.lv-carousel.lv-section--dark .lv-eyebrow,
.lv-section--dark:has(> .lv-guarantee) .lv-eyebrow {
	color: var(--lv-accent);
}

.lv-carousel.lv-section--dark .lv-h2,
.lv-carousel.lv-section--dark .lv-h3,
.lv-carousel.lv-section--dark .lv-section__title,
.lv-section--dark:has(> .lv-guarantee) .lv-guarantee__title {
	color: inherit;
}

.lv-carousel.lv-section--dark .lv-h2 em,
.lv-carousel.lv-section--dark .lv-section__title em,
.lv-section--dark:has(> .lv-guarantee) .lv-guarantee__title em {
	color: var(--lv-accent);
}

.lv-section--dark:has(> .lv-guarantee) .lv-guarantee__numeral {
	color: var(--lv-accent);
}

/* --------------------------------------------------------------------------
   20.3 Type scale.
   -------------------------------------------------------------------------- */
.lv-section .lv-eyebrow,
.lv-cta .lv-eyebrow {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.19em;
	line-height: 1;
	margin-bottom: 16px;
}

/* The short leading rule belongs to the hero label alone; every other
   overline on the reference is the bare word. */
.lv-section .lv-eyebrow::before,
.lv-cta .lv-eyebrow::before {
	display: none;
}

.lv-h1.lv-h1,
.lv-h2.lv-h2,
.lv-h3.lv-h3,
.lv-hero__title.lv-hero__title,
.lv-cta__title.lv-cta__title,
.lv-guarantee__title.lv-guarantee__title,
.lv-section .lv-section__title,
.lv-accordion__heading {
	color: inherit;
}

.lv-h2.lv-h2,
.lv-section .lv-section__title {
	font-size: clamp(2.5rem, 4.4vw, 4.125rem); /* 40 -> 66px */
	line-height: 1.02;
	letter-spacing: -0.045em;
	font-weight: 580;
	max-width: 780px;
	text-wrap: normal;
}

/* Section titles keep the two-tone phrase inline; the hero, the bundle and
   the final CTA break it onto its own line. */
.lv-h2 em,
.lv-section__title em {
	display: inline;
	font-style: normal;
	font-weight: 330;
	color: var(--lv-accent);
}

.lv-split--reverse .lv-h2 em,
.lv-hero__title em,
.lv-cta__title em {
	display: block;
}

.lv-section__head {
	max-width: 780px;
	margin-bottom: 48px;
}

.lv-section__lead.lv-section__lead {
	margin-top: 24px;
	max-width: 660px;
	font-size: 17px;
	line-height: 1.75;
	color: var(--lv-muted);
}

@media (max-width: 767px) {
	.lv-h2.lv-h2,
	.lv-section .lv-section__title {
		font-size: 38px;
	}

	.lv-section__lead.lv-section__lead {
		margin-top: 18px;
		font-size: 14px;
	}
}

@media (max-width: 390px) {
	.lv-h2.lv-h2,
	.lv-section .lv-section__title {
		font-size: 34px;
	}
}

/* --------------------------------------------------------------------------
   20.4 Buttons — 52px tall, 29px side padding, 3px radius.
   -------------------------------------------------------------------------- */
.lv-btn {
	min-height: 52px;
	padding: 0 29px;
	gap: 0.625rem;
}

.lv-btn:hover,
.lv-btn:focus-visible {
	background: #aa3651;
	border-color: #aa3651;
	color: #fff;
}

.lv-btn--ghost {
	background: #fff;
	border-color: var(--lv-rule);
	color: var(--lv-text);
}

.lv-btn--ghost:hover,
.lv-btn--ghost:focus-visible {
	background: #fff;
	border-color: var(--lv-accent);
	color: var(--lv-accent);
}

.lv-btn--light,
.lv-cta .lv-btn--light {
	background: #fff;
	border-color: #fff;
	color: var(--lv-accent);
}

.lv-btn--light:hover,
.lv-btn--light:focus-visible {
	background: #fff;
	border-color: #fff;
	color: #aa3651;
}

/* The 2px lift is the only thing hover moves, and reduced motion keeps it
   still — the duration tokens alone would not stop an untransitioned jump. */
@media (prefers-reduced-motion: no-preference) {
	.lv-btn:hover {
		transform: translateY(-2px);
	}
}

/* --------------------------------------------------------------------------
   20.5 Hero.

   The reference caps the band at `min(860px, 91vh)` — 819px at a 900px
   viewport. Ours had no cap, so the copy set the height (971px) and
   `object-fit: cover` then had to scale the photo to 1.22x to fill it.
   Capping the height is what un-zooms the image; the client's "the hero
   image is too long" is this rule.
   -------------------------------------------------------------------------- */
.lv-hero {
	min-height: min(860px, 91vh);
	align-items: center;
	background: var(--lv-rose-300);
}

.lv-hero__media img,
.lv-hero__media video {
	object-position: var(--lv-hero-focus, 50% 50%);
}

/* Horizontal wash: dark where the copy sits, clear over the product. */
.lv-hero::after {
	background: var(
		--lv-hero-overlay,
		linear-gradient(
			90deg,
			rgba(15, 9, 11, 0.77) 0%,
			rgba(15, 9, 11, 0.59) 30%,
			rgba(15, 9, 11, 0.22) 56%,
			rgba(15, 9, 11, 0.03) 78%
		)
	);
}

.lv-hero__inner {
	gap: 0;
	padding-block: 90px;
	justify-items: stretch;
}

.lv-hero .lv-eyebrow {
	margin-bottom: 24px;
	gap: 14px;
	font-size: 10px;
	font-weight: 650;
	letter-spacing: 0.2em;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.88);
}

.lv-hero .lv-eyebrow::before {
	width: 35px;
	background: rgba(255, 255, 255, 0.65);
}

.lv-hero__title.lv-hero__title {
	max-width: 720px;
	font-size: clamp(3.25rem, 6vw, 5.125rem); /* 52 -> 82px */
	line-height: 0.96;
	letter-spacing: -0.052em;
	font-weight: 620;
	text-wrap: normal;
}

/* § 19 sets this at three classes deep; match it or the tone stays at .64. */
.lv-hero .lv-hero__title em {
	font-weight: 300;
	color: rgba(255, 255, 255, 0.91);
}

.lv-hero__lead.lv-hero__lead {
	margin-top: 28px;
	max-width: 550px;
	font-size: 17px;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.84);
}

.lv-hero__actions {
	margin-top: 35px;
	gap: 27px;
	align-items: center;
}

/* The reference's second hero action is an underlined word, not a button. */
.lv-hero .lv-btn--ghost {
	min-height: 0;
	padding: 0 0 5px;
	border: 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.55);
	border-radius: 0;
	background: none;
	color: #fff;
	font-size: 11px;
	font-weight: 650;
	letter-spacing: 0.1em;
}

.lv-hero .lv-btn--ghost:hover,
.lv-hero .lv-btn--ghost:focus-visible {
	background: none;
	color: #fff;
	border-bottom-color: #fff;
}

/* --------------------------------------------------------------------------
   20.6 Hero proof row: three columns, hairline top and bottom, and a short
   divider between items rather than a full-height rule.
   -------------------------------------------------------------------------- */
.lv-hero .lv-stats {
	max-width: 650px;
	margin-top: 38px;
	gap: 0;
	background: none;
	border-top: 1px solid rgba(255, 255, 255, 0.27);
	border-bottom: 1px solid rgba(255, 255, 255, 0.27);
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.lv-hero .lv-stats__item {
	position: relative;
	padding: 21px 22px 21px 0;
	gap: 0;
	background: none;
	border-left: 0;
	justify-items: start;
	text-align: left;
}

.lv-hero .lv-stats__item + .lv-stats__item {
	padding-left: 22px;
}

.lv-hero .lv-stats__item + .lv-stats__item::before {
	content: "";
	position: absolute;
	left: 0;
	top: 22%;
	width: 1px;
	height: 56%;
	background: rgba(255, 255, 255, 0.22);
}

.lv-hero .lv-stats__value {
	display: block;
	font-size: 18px;
	font-weight: 600;
	letter-spacing: normal;
	text-transform: none;
	color: #fff;
}

.lv-hero .lv-stats__label {
	display: block;
	margin-top: 5px;
	max-width: none;
	font-size: 11px;
	font-weight: 400;
	line-height: 1.45;
	letter-spacing: normal;
	text-transform: none;
	color: rgba(255, 255, 255, 0.63);
}

/* --------------------------------------------------------------------------
   20.7 Feature strip: white band, no vertical padding, one hairline under.
   -------------------------------------------------------------------------- */
.lv-features.lv-features {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0;
	background: none;
	border: 0;
	border-radius: 0;
	overflow: visible;
}

.lv-features__item,
.lv-section--tint .lv-features__item {
	min-height: 105px;
	padding: 25px 30px;
	gap: 4px;
	align-content: center;
	background: none;
}

.lv-features__item:hover,
.lv-section--tint .lv-features__item:hover {
	background: none;
}

.lv-features__item + .lv-features__item {
	border-left: 1px solid var(--lv-rule);
}

.lv-features__title.lv-features__title {
	font-size: 14px;
	font-weight: 650;
	line-height: 1.55;
	letter-spacing: normal;
}

.lv-features__text.lv-features__text {
	font-size: 12px;
	line-height: 1.45;
	color: var(--lv-muted);
}

@media (max-width: 767px) {
	.lv-features.lv-features {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.lv-features__item,
	.lv-section--tint .lv-features__item {
		min-height: 115px;
		padding: 20px;
		border-bottom: 1px solid var(--lv-rule);
	}

	.lv-features__item + .lv-features__item {
		border-left: 0;
	}

	.lv-features__item:nth-child(even) {
		border-left: 1px solid var(--lv-rule);
	}
}

/* --------------------------------------------------------------------------
   20.8 Split sections (product editorial + bundle).

   These had NO rules at all before this: `.lv-split` was an unstyled block,
   so both sections collapsed to one column and their images rendered at an
   intrinsic 1844px. Between them that was ~3,400px of the 5,800px by which
   the page overran the reference.
   -------------------------------------------------------------------------- */
.lv-split {
	display: grid;
	grid-template-columns: minmax(0, 1.08fr) minmax(420px, 0.92fr);
	gap: 8vw;
	align-items: center;
}

.lv-split__media {
	position: relative;
	min-height: 650px;
	overflow: hidden;
	background: #e4d6da;
}

.lv-split__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.lv-split__body {
	max-width: 570px;
}

.lv-split__body .lv-specs {
	margin: 35px 0;
}

.lv-split__body .lv-actions {
	margin-top: 0;
}

/* The bundle is full-bleed on the reference: the copy column carries its own
   padding and the image runs to the edge of the viewport. */
.lv-split--reverse {
	max-width: none;
	padding-inline: 0;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0;
	align-items: stretch;
}

.lv-split--reverse .lv-split__body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	max-width: none;
	padding: 100px max(55px, 7vw);
}

.lv-split--reverse .lv-split__media {
	min-height: 690px;
	background: #ddcbd0;
}

.lv-split--reverse .lv-eyebrow {
	color: #e6a9b8;
}

.lv-split--reverse .lv-h2 {
	max-width: 570px;
	font-size: clamp(2.6875rem, 4.5vw, 4.1875rem); /* 43 -> 67px */
	line-height: 1;
	letter-spacing: -0.047em;
	font-weight: 530;
}

.lv-split--reverse .lv-h2 em {
	color: #e6a9b8;
	font-weight: 300;
}

.lv-split--reverse .lv-section__lead.lv-section__lead {
	max-width: 520px;
	margin: 25px 0 35px;
	font-size: 15px;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.68);
}

/* In the bundle the three facts are rows, not a divided triptych. */
.lv-split--reverse .lv-stats {
	display: block;
	max-width: none;
	margin: 0 0 35px;
	gap: 0;
	background: none;
	border-top: 1px solid rgba(255, 255, 255, 0.15);
	border-bottom: 0;
}

.lv-split--reverse .lv-stats__item {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 30px;
	padding: 14px 0;
	background: none;
	border-left: 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.15);
	text-align: left;
}

.lv-split--reverse .lv-stats__value {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: normal;
	text-transform: none;
	color: #fff;
}

.lv-split--reverse .lv-stats__label {
	margin: 0;
	max-width: none;
	font-size: 12px;
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: normal;
	text-transform: none;
	color: rgba(255, 255, 255, 0.58);
}

@media (min-width: 768px) and (max-width: 1024px) {
	.lv-split {
		gap: 50px;
	}
}

@media (max-width: 767px) {
	.lv-split {
		grid-template-columns: minmax(0, 1fr);
		gap: 42px;
	}

	.lv-split__media {
		min-height: 480px;
	}

	.lv-split--reverse {
		display: flex;
		flex-direction: column-reverse;
	}

	.lv-split--reverse .lv-split__body {
		padding: 60px 20px;
	}

	.lv-split--reverse .lv-split__media {
		min-height: 470px;
	}
}

/* --------------------------------------------------------------------------
   20.9 Spec rows (editorial list + the usage/routine tab panels). The label
   is a plain 13px bold word on the reference, not a micro caps label.
   -------------------------------------------------------------------------- */
.lv-specs__label.lv-specs__label,
.lv-specs dt {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: normal;
	text-transform: none;
	line-height: 1.6;
	color: var(--lv-text);
}

.lv-specs__value.lv-specs__value,
.lv-specs dd {
	font-size: 13px;
	line-height: 1.55;
	color: var(--lv-muted);
}

@media (min-width: 640px) {
	.lv-specs__row {
		grid-template-columns: 140px minmax(0, 1fr);
		gap: 25px;
		padding-block: 20px;
	}
}

@media (max-width: 767px) {
	.lv-specs__row {
		grid-template-columns: 105px minmax(0, 1fr);
		gap: 15px;
	}
}

/* --------------------------------------------------------------------------
   20.10 Results carousel.

   Geometry is the reference's: a viewport exactly one content column wide,
   three 4:5 cards per view, 22px between them, no peek, arrows left and the
   counter right. Behaviour stays ours — the reference's own carousel script
   never runs. Its inline JS ships `&#038;&#038;` where it means `&&`, so the
   block dies on a SyntaxError and its arrows, dots and autoplay are inert
   (its `.carousel-dots` container renders empty, which is why there are no
   dots to copy).
   -------------------------------------------------------------------------- */
.lv-carousel__head {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
	column-gap: 60px;
	align-items: end;
	margin-bottom: 46px;
}

.lv-carousel__head > .lv-eyebrow {
	grid-column: 1;
	grid-row: 1;
}

.lv-carousel__head > .lv-h2 {
	grid-column: 1;
	grid-row: 2;
}

.lv-carousel__head > .lv-section__lead.lv-section__lead {
	grid-column: 2;
	grid-row: 2;
	align-self: end;
	margin: 0;
	max-width: 420px;
	font-size: 13px;
	line-height: 1.65;
}

.lv-carousel__viewport {
	width: min(1320px, 100% - 80px);
	margin-inline: auto;
	gap: 22px;
}

.lv-carousel__slide {
	flex: 0 0 calc((100% - 44px) / 3);
}

.lv-carousel__media {
	aspect-ratio: 4 / 5;
	border-radius: 0;
	background: var(--lv-rose-200);
}

.lv-carousel__caption {
	padding: 18px 2px 4px;
}

.lv-carousel__caption-title.lv-carousel__caption-title {
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: normal;
	text-transform: none;
	color: var(--lv-text);
}

.lv-carousel__caption-meta.lv-carousel__caption-meta {
	margin-top: 5px;
	font-size: 11px;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: normal;
	text-transform: none;
	color: var(--lv-muted);
}

.lv-carousel__controls {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	margin-top: 32px;
}

/* Arrows read first on the reference; our markup puts the counter first. */
.lv-carousel__nav {
	order: -1;
	display: flex;
	gap: 8px;
}

.lv-carousel__btn,
.lv-carousel.lv-section--dark .lv-carousel__btn {
	width: 52px;
	height: 52px;
	border: 1px solid var(--lv-rule);
	border-radius: 50%;
	background: #fff;
	color: var(--lv-text);
}

.lv-carousel__btn:hover:not([aria-disabled="true"]),
.lv-carousel.lv-section--dark .lv-carousel__btn:hover:not([aria-disabled="true"]) {
	border-color: var(--lv-accent);
	background: var(--lv-accent);
	color: #fff;
}

.lv-carousel.lv-section--dark .lv-carousel__btn[aria-disabled="true"] {
	opacity: 0.4;
}

.lv-carousel__counter.lv-carousel__counter {
	margin: 0;
	font-size: 11px;
	letter-spacing: 0.12em;
	color: var(--lv-muted);
}

@media (max-width: 1024px) {
	.lv-carousel__viewport {
		width: calc(100% - 48px);
	}

	.lv-carousel__slide {
		flex-basis: calc((100% - 22px) / 2);
	}
}

@media (max-width: 767px) {
	.lv-carousel__head {
		display: block;
		margin-bottom: 32px;
	}

	.lv-carousel__head > .lv-section__lead.lv-section__lead {
		max-width: none;
		margin-top: 20px;
	}

	.lv-carousel__viewport {
		width: calc(100% - 36px);
		gap: 14px;
	}

	.lv-carousel__slide {
		flex-basis: 100%;
	}

	.lv-carousel__controls {
		margin-top: 24px;
	}
}

/* --------------------------------------------------------------------------
   20.11 Tabs.

   The reference runs the heading and the tab rail down a narrow left column
   with the panel beside them. Our markup nests the rail and the panels
   inside `.lv-tabs`, so `display: contents` lifts them into the container's
   grid — `.lv-tabs` carries no box of its own to lose, and the tablist and
   tabpanel roles are untouched. Row 2 takes the slack so the rail sits under
   the intro instead of being pushed down by the panel spanning both rows.
   -------------------------------------------------------------------------- */
.lv-section .lv-container:has(> .lv-tabs) {
	display: grid;
	grid-template-columns: minmax(310px, 0.72fr) minmax(0, 1.28fr);
	grid-template-rows: max-content 1fr;
	column-gap: 90px;
	row-gap: 0;
	align-items: start;
}

.lv-tabs {
	display: contents;
}

.lv-container:has(> .lv-tabs) > .lv-section__head {
	grid-column: 1;
	grid-row: 1;
	margin-bottom: 0;
}

.lv-tabs__list {
	grid-column: 1;
	grid-row: 2;
	display: block;
	margin-top: 35px;
	border-top: 1px solid var(--lv-rule);
	border-bottom: 0;
	overflow: visible;
}

.lv-tabs__panels {
	grid-column: 2;
	grid-row: 1 / span 2;
}

.lv-tabs__tab {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 21px 0;
	border: 0;
	border-bottom: 1px solid var(--lv-rule);
	background: transparent;
	color: var(--lv-muted);
	font-family: inherit;
	text-align: left;
	white-space: normal;
}

.lv-tabs__tab[aria-selected="true"],
.lv-tabs__list.lv-tabs__list .lv-tabs__tab[aria-selected="true"] {
	color: var(--lv-accent);
	border-bottom-color: var(--lv-rule);
}

/* The reference marks the active tab with colour alone — no sliding rule. */
.lv-tabs__tab::after {
	display: none;
}

.lv-tabs__tab-label {
	font-size: 14px;
	font-weight: 550;
	letter-spacing: normal;
	text-transform: none;
}

.lv-tabs__tab-num {
	font-size: 18px;
	font-weight: 400;
	letter-spacing: normal;
	font-variant-numeric: normal;
	opacity: 1;
	color: inherit;
}

.lv-tabs__panel {
	min-height: 470px;
	padding: 55px;
	background: var(--lv-bg);
}

.lv-tabs__panel .lv-h3 {
	max-width: 590px;
	font-size: clamp(1.875rem, 3vw, 2.75rem); /* 30 -> 44px */
	line-height: 1.08;
	letter-spacing: -0.035em;
	font-weight: 520;
	text-wrap: normal;
}

.lv-tabs__panel > p {
	max-width: 650px;
	margin: 23px 0 35px;
	font-size: 15px;
	line-height: 1.75;
	color: var(--lv-muted);
}

.lv-tabs__panel > .lv-specs {
	margin: 0;
}

.lv-tabs__panel-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0;
	border-top: 1px solid var(--lv-rule);
}

.lv-tabs__panel-grid > p {
	margin: 0;
	padding: 21px 25px 21px 0;
	border-bottom: 1px solid var(--lv-rule);
	font-size: 12px;
	line-height: 1.5;
	color: var(--lv-muted);
}

.lv-tabs__panel-grid > p:nth-child(even) {
	padding-left: 25px;
}

.lv-tabs__panel-grid strong {
	display: block;
	margin-bottom: 6px;
	font-size: 13px;
	font-weight: 700;
	color: var(--lv-text);
}

@media (min-width: 768px) and (max-width: 1024px) {
	.lv-section .lv-container:has(> .lv-tabs) {
		column-gap: 50px;
	}
}

@media (max-width: 767px) {
	.lv-section .lv-container:has(> .lv-tabs) {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: none;
		row-gap: 35px;
		column-gap: 0;
	}

	.lv-container:has(> .lv-tabs) > .lv-section__head,
	.lv-tabs__list,
	.lv-tabs__panels {
		grid-column: 1;
		grid-row: auto;
	}

	.lv-tabs__panel {
		min-height: 0;
		padding: 30px 22px;
	}

	.lv-tabs__panel-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.lv-tabs__panel-grid > p,
	.lv-tabs__panel-grid > p:nth-child(even) {
		padding: 17px 0;
	}
}

/* --------------------------------------------------------------------------
   20.12 Guarantee band — one centred column, not a two-column split.
   -------------------------------------------------------------------------- */
.lv-guarantee {
	display: block;
	max-width: 980px;
	margin-inline: auto;
	text-align: center;
}

.lv-guarantee__body {
	display: block;
	max-width: none;
}

.lv-guarantee__numeral.lv-guarantee__numeral {
	margin: 0 0 15px;
	font-size: clamp(4.75rem, 11vw, 9.375rem); /* 76 -> 150px */
	line-height: 0.8;
	font-weight: 260;
	letter-spacing: -0.065em;
	color: var(--lv-accent);
}

.lv-guarantee__title.lv-guarantee__title {
	margin: 30px 0 0;
	font-size: clamp(2.0625rem, 3.6vw, 3.25rem); /* 33 -> 52px */
	line-height: 1.2;
	letter-spacing: -0.035em;
	font-weight: 520;
	text-wrap: normal;
}

.lv-guarantee__text.lv-guarantee__text {
	max-width: 650px;
	margin: 22px auto 0;
	font-size: 15px;
	line-height: 1.7;
	color: var(--lv-muted);
}

/* --------------------------------------------------------------------------
   20.13 FAQ — heading column beside the list.
   -------------------------------------------------------------------------- */
.lv-section .lv-container--narrow:has(> .lv-accordion) {
	max-width: var(--lv-container-w);
	display: grid;
	grid-template-columns: 0.7fr 1.3fr;
	gap: 90px;
	align-items: start;
}

.lv-container:has(> .lv-accordion) > .lv-section__head {
	margin-bottom: 0;
}

.lv-accordion__trigger {
	padding: 24px 0;
	align-items: center;
	gap: 30px;
	font-size: 15px;
	font-weight: 520;
	line-height: 1.6;
	letter-spacing: normal;
	color: var(--lv-text);
}

.lv-accordion__icon {
	color: inherit;
}

.lv-accordion__panel-inner {
	padding: 0 45px 25px 0;
	max-width: none;
	font-size: 13px;
	line-height: 1.7;
	color: var(--lv-muted);
}

@media (max-width: 767px) {
	.lv-section .lv-container--narrow:has(> .lv-accordion) {
		grid-template-columns: minmax(0, 1fr);
		gap: 40px;
	}
}

/* --------------------------------------------------------------------------
   20.14 Final CTA.
   -------------------------------------------------------------------------- */
.lv-cta.lv-cta--accent {
	padding: 130px 30px;
	text-align: center;
}

.lv-cta__inner {
	max-width: none;
	padding-inline: 0;
	gap: 0;
}

.lv-cta .lv-eyebrow {
	margin-bottom: 22px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.2em;
	color: rgba(255, 255, 255, 0.75);
}

.lv-cta__title.lv-cta__title {
	max-width: 900px;
	margin-inline: auto;
	font-size: clamp(3rem, 6vw, 5.125rem); /* 48 -> 82px */
	line-height: 0.98;
	letter-spacing: -0.052em;
	font-weight: 540;
	text-wrap: normal;
}

/* § 19 sets this at three classes deep; match it. */
.lv-cta--accent .lv-cta__title em {
	font-weight: 280;
	color: rgba(255, 255, 255, 0.77);
}

.lv-cta__text.lv-cta__text {
	max-width: 540px;
	margin: 25px auto 32px;
	font-size: 15px;
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.76);
}

.lv-cta__actions {
	justify-content: center;
	margin-top: 0;
}

@media (max-width: 767px) {
	.lv-cta.lv-cta--accent {
		padding: 85px 20px;
	}

	.lv-cta__title.lv-cta__title {
		font-size: 43px;
	}

	.lv-cta .lv-btn--wide {
		width: 100%;
		max-width: 360px;
	}
}

/* --------------------------------------------------------------------------
   20.15 Testimonials. The reference has no counterpart for this section (see
   the handover note); kept on the reference's type scale so it does not read
   as a different site.
   -------------------------------------------------------------------------- */
.lv-quotes {
	gap: 18px;
}

.lv-quote {
	padding: 34px 30px;
	background: var(--lv-bg);
	border: 1px solid var(--lv-rule);
	border-radius: 0;
}

.lv-quote__text {
	font-size: 15px;
	line-height: 1.7;
	color: var(--lv-text);
}

.lv-quote__footer {
	font-size: 11px;
	line-height: 1.5;
	color: var(--lv-muted);
}

/* --------------------------------------------------------------------------
   20.16 Header + navigation.

   Reference: a white bar 126px tall with links at 16px/600 in ink, 24px
   apart, no uppercase and no accent tint on the current page. Both shapes
   are covered — the `wp_nav_menu` list this theme renders today and a
   `core/navigation` block — so populating either produces the same bar.
   -------------------------------------------------------------------------- */
.lv-header__inner {
	--lv-container-w: 1400px;
	--lv-gutter: 40px;
	min-height: 126px;
	padding-block: 0;
	gap: 40px;
}

.lv-header.is-stuck .lv-header__inner {
	min-height: 84px;
	padding-block: 0;
}

.lv-nav .lv-menu,
.lv-nav .wp-block-navigation__container,
.lv-nav ul {
	display: flex;
	align-items: center;
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.lv-nav a,
.lv-nav .wp-block-navigation-item__content {
	font-size: 16px;
	font-weight: 600;
	letter-spacing: normal;
	text-transform: none;
	color: inherit;
	text-decoration: none;
}

.lv-nav a:hover,
.lv-nav .wp-block-navigation-item__content:hover {
	color: var(--lv-accent);
}

/* The reference does not tint the current page in the top level. */
.lv-nav .current-menu-item > a,
.lv-nav .current-menu-parent > a,
.lv-nav .current-menu-item > .wp-block-navigation-item__content {
	color: inherit;
}

/* Sub-menu links stay at the small size the dropdown was drawn for. */
.lv-nav .sub-menu a,
.lv-nav .wp-block-navigation__submenu-container a {
	font-size: 14px;
	font-weight: 500;
}

@media (max-width: 1024px) {
	.lv-header__inner {
		--lv-gutter: 24px;
		min-height: 96px;
	}
}

@media (max-width: 767px) {
	.lv-header__inner {
		--lv-gutter: 18px;
		min-height: 76px;
		gap: 16px;
	}
}

/* --------------------------------------------------------------------------
   20.17 Mobile hero.

   The reference switches the hero wholesale below 768px: full viewport
   height, copy pinned to the bottom, a vertical wash instead of the
   horizontal one, the label as a pill, the proof row as stacked cards and
   both actions as full-width pills. Without it the horizontal gradient
   leaves the headline sitting on the bright half of the photo.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
	.lv-hero {
		min-height: 100svh;
		align-items: end;
		background: #171214;
	}

	.lv-hero__media img,
	.lv-hero__media video {
		object-position: 50% center;
	}

	.lv-hero::after {
		background: var(
			--lv-hero-overlay,
			linear-gradient(
				180deg,
				rgba(12, 8, 9, 0) 0%,
				rgba(12, 8, 9, 0.02) 25%,
				rgba(12, 8, 9, 0.1) 38%,
				rgba(12, 8, 9, 0.3) 51%,
				rgba(12, 8, 9, 0.6) 66%,
				rgba(12, 8, 9, 0.84) 82%,
				rgba(12, 8, 9, 0.96) 100%
			)
		);
	}

	.lv-hero__inner {
		width: 100%;
		max-width: none;
		margin: 0;
		padding: 135px 20px calc(22px + env(safe-area-inset-bottom));
	}

	.lv-hero .lv-eyebrow {
		width: max-content;
		margin: 0 0 16px;
		padding: 9px 14px;
		gap: 9px;
		border: 1px solid rgba(255, 255, 255, 0.35);
		border-radius: 999px;
		background: rgba(255, 255, 255, 0.08);
		color: #fff;
		font-size: 9px;
		-webkit-backdrop-filter: blur(6px);
		backdrop-filter: blur(6px);
	}

	.lv-hero .lv-eyebrow::before {
		width: 7px;
		height: 7px;
		border-radius: 50%;
		background: #efb2c1;
	}

	.lv-hero__title.lv-hero__title {
		max-width: 390px;
		font-size: clamp(2.4375rem, 11.2vw, 3.1875rem); /* 39 -> 51px */
		font-weight: 650;
	}

	.lv-hero .lv-hero__title em {
		color: #fff;
		font-weight: 650;
	}

	.lv-hero__lead.lv-hero__lead {
		max-width: 380px;
		margin-top: 17px;
		font-size: 14px;
		line-height: 1.58;
	}

	.lv-hero .lv-stats {
		width: 100%;
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		gap: 8px;
		margin-top: 20px;
		border: 0;
	}

	.lv-hero .lv-stats__item,
	.lv-hero .lv-stats__item + .lv-stats__item {
		min-height: 59px;
		display: grid;
		grid-template-columns: minmax(102px, 118px) minmax(0, 1fr);
		align-items: center;
		gap: 12px;
		padding: 11px 15px;
		border: 1px solid rgba(255, 255, 255, 0.3);
		border-radius: 16px;
		background: rgba(255, 255, 255, 0.085);
	}

	.lv-hero .lv-stats__item + .lv-stats__item::before {
		display: none;
	}

	.lv-hero .lv-stats__value {
		font-size: 15px;
	}

	.lv-hero .lv-stats__label {
		margin: 0;
		font-size: 11px;
		color: rgba(255, 255, 255, 0.82);
	}

	.lv-hero__actions {
		width: 100%;
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		gap: 9px;
		margin-top: 17px;
	}

	.lv-hero__actions .lv-btn {
		width: 100%;
		min-height: 55px;
		border-radius: 999px;
	}

	.lv-hero .lv-btn--ghost {
		width: 100%;
		min-height: 53px;
		padding: 0 20px;
		display: flex;
		align-items: center;
		justify-content: center;
		border: 1px solid rgba(255, 255, 255, 0.44);
		border-radius: 999px;
		background: rgba(20, 13, 15, 0.17);
		-webkit-backdrop-filter: blur(6px);
		backdrop-filter: blur(6px);
	}
}

@media (max-width: 390px) {
	.lv-hero__inner {
		padding: 120px 17px calc(17px + env(safe-area-inset-bottom));
	}

	.lv-hero__title.lv-hero__title {
		font-size: 2.3125rem; /* 37px */
	}
}

/* ---------------------------------------------------------------------------
   § 21 · Product grid (#lauriva-products) and the offer popup
   ---------------------------------------------------------------------------
   Two blocks the reference has that we did not: the three-card collection
   grid, and the delayed offer popup. Both are page markup driven; the JS for
   the popup lives in lauriva.js.
--------------------------------------------------------------------------- */

.lv-products {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
	gap: 18px;
	align-items: stretch;
}

.lv-product {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--lv-rule, #e9e1e3);
	background: var(--lv-base, #fff);
	overflow: hidden;
}

.lv-product__media {
	position: relative;
	display: block;
	aspect-ratio: 1 / 1.08;
	overflow: hidden;
	background: var(--lv-cream, #f8f5f4);
}

.lv-product__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--lv-dur-slow, .5s) var(--lv-ease, cubic-bezier(.2, .7, .3, 1));
}

.lv-product:hover .lv-product__media img { transform: scale(1.03); }

.lv-product__badge {
	position: absolute;
	top: 14px;
	left: 14px;
	z-index: 1;
	padding: 6px 11px;
	border-radius: 3px;
	background: var(--lv-base, #fff);
	color: var(--lv-ink, #231b1e);
	font-size: 8px;
	font-weight: 800;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.lv-product__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 10px;
	padding: 28px;
}

.lv-product__eyebrow {
	margin: 0;
	color: var(--lv-accent, #c84464);
	font-size: 9px;
	font-weight: 800;
	letter-spacing: .16em;
	text-transform: uppercase;
}

.lv-product__title {
	margin: 0;
	color: inherit;
	font-size: 23px;
	font-weight: 580;
	line-height: 1.14;
	letter-spacing: -.03em;
}

.lv-product__text {
	margin: 0;
	color: var(--lv-muted, #716a6d);
	font-size: 14px;
	line-height: 1.55;
}

.lv-product__meta {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin: 4px 0 0;
	padding-top: 14px;
	border-top: 1px solid var(--lv-rule, #e9e1e3);
	font-size: 12px;
	color: var(--lv-muted, #716a6d);
}

.lv-product__meta strong {
	color: var(--lv-ink, #231b1e);
	font-size: 17px;
	font-weight: 650;
	letter-spacing: -.02em;
}

/* Two half-width buttons, and they must survive being pushed down by a longer
   description in a neighbouring card — hence margin-top:auto on the row. */
.lv-product__actions {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
	margin-top: auto;
	padding-top: 16px;
}

.lv-product__actions .lv-btn {
	min-height: 44px;
	padding: 0 10px;
	font-size: 9px;
	letter-spacing: .1em;
	text-align: center;
}

/* ── Offer popup ─────────────────────────────────────────────────────────── */

.lv-popup[hidden] { display: none; }

.lv-popup {
	position: fixed;
	inset: 0;
	z-index: 9000;
	display: grid;
	place-items: center;
	padding: 20px;
}

.lv-popup__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(23, 18, 20, .55);
	opacity: 0;
	transition: opacity var(--lv-dur, .32s) var(--lv-ease, ease);
}

.lv-popup__dialog {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, .82fr) minmax(0, 1fr);
	width: min(58rem, 100%);
	max-height: min(38rem, 92vh);
	overflow: hidden auto;
	background: var(--lv-base, #fff);
	box-shadow: 0 30px 80px rgba(23, 18, 20, .28);
	opacity: 0;
	transform: translateY(14px) scale(.985);
	transition: opacity var(--lv-dur, .32s) var(--lv-ease, ease),
		transform var(--lv-dur, .32s) var(--lv-ease, ease);
}

.lv-popup.is-open .lv-popup__backdrop { opacity: 1; }

.lv-popup.is-open .lv-popup__dialog {
	opacity: 1;
	transform: none;
}

.lv-popup__media {
	background: var(--lv-rose-100, #f3e9eb);
}

.lv-popup__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.lv-popup__body {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: clamp(26px, 4vw, 44px);
}

.lv-popup__title {
	margin: 0;
	color: var(--lv-ink, #231b1e);
	font-size: clamp(30px, 4vw, 42px);
	font-weight: 600;
	line-height: 1.02;
	letter-spacing: -.045em;
}

.lv-popup__title em {
	display: block;
	color: var(--lv-accent, #c84464);
	font-style: normal;
	font-weight: 330;
}

.lv-popup__text {
	margin: 0;
	color: var(--lv-muted, #716a6d);
	font-size: 15px;
	line-height: 1.6;
}

.lv-popup__text strong { color: var(--lv-ink, #231b1e); }

/* Dashed frame, label left, code right — a coupon reads as something to copy,
   not as a heading. */
.lv-popup__code {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	margin: 4px 0 0;
	padding: 16px 20px;
	border: 1px dashed var(--lv-accent, #c84464);
	border-radius: 3px;
	background: var(--lv-rose-100, #f3e9eb);
}

.lv-popup__code-label {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--lv-muted, #716a6d);
}

.lv-popup__code-value {
	color: var(--lv-accent, #c84464);
	font-size: 19px;
	font-weight: 700;
	letter-spacing: .04em;
}

.lv-popup__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.lv-popup__actions .lv-btn { text-align: center; }

.lv-popup__close {
	position: absolute;
	top: 14px;
	right: 14px;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 1px solid var(--lv-rule, #e9e1e3);
	border-radius: 50%;
	background: var(--lv-base, #fff);
	cursor: pointer;
}

.lv-popup__close::before,
.lv-popup__close::after {
	content: "";
	position: absolute;
	width: 14px;
	height: 1.5px;
	background: var(--lv-ink, #231b1e);
}

.lv-popup__close::before { transform: rotate(45deg); }
.lv-popup__close::after { transform: rotate(-45deg); }

@media (max-width: 720px) {
	.lv-popup__dialog { grid-template-columns: 1fr; }
	/* The offer image is a square packshot (1024×1024). Stacked on a phone it
	   used to sit in a 16/9 letterbox, and object-fit:cover then sliced the top
	   and bottom off the product — the bottles arrived cropped. A 4/3 box keeps
	   the whole bottle in frame while still reading as a banner rather than a
	   full-height photo. */
	.lv-popup__media { aspect-ratio: 4 / 3; }
	.lv-popup__media img { object-position: 50% 45%; }
	.lv-popup__actions { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
	.lv-popup__backdrop,
	.lv-popup__dialog { transition: none; }
	.lv-product__media img { transition: none; }
}

/* wpautop inserts empty <p> between block-level siblings in post content. In a
   grid container each one becomes a real grid item: in the popup it took the
   first cell, pushing the media right and the body onto a second row, and in
   the product grid it added a phantom 0px column. Hide them, and place the
   popup's two panes explicitly so no future stray node can reorder them. */
.lv-popup__dialog > p:empty,
.lv-products > p:empty,
.lv-product__body > p:empty,
.lv-popup__body > p:empty { display: none; }

.lv-popup__media { grid-area: 1 / 1; }
.lv-popup__body  { grid-area: 1 / 2; }

@media (max-width: 720px) {
	.lv-popup__media { grid-area: 1 / 1; }
	.lv-popup__body  { grid-area: 2 / 1; }
}

/* ==========================================================================
   Header — matched to the client's own build, measured at 1440px.

   The reference has NO separate wordmark: the first nav item ("Lauriva")
   links home and does that job, which is why parts/header.html no longer
   renders [lauriva_brand]. Numbers below are measurements, not taste:
   content column 1000px starting at x=220, links 16px/600, 24px apart,
   account + cart immediately after the last link, header 126px tall.
   ========================================================================== */

.lv-header__inner--navfirst {
	--lv-container-w: 1000px;
	justify-content: flex-start;
	gap: 24px;
}

.lv-header__inner--navfirst .lv-nav {
	flex: 0 0 auto;
}

.lv-header__inner--navfirst .lv-menu {
	gap: 24px;
}

.lv-header__inner--navfirst .lv-menu > li > a {
	font-size: 16px;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
}

.lv-header__inner--navfirst .lv-header__actions {
	flex: 0 0 auto;
	gap: 4px;
}

/* Below the nav breakpoint the links collapse into the drawer, so the icons
   would otherwise sit alone against the left edge. Push them back to the
   right, where a thumb expects them. */
@media (max-width: 899px) {
	.lv-header__inner--navfirst { justify-content: space-between; }
	.lv-header__inner--navfirst .lv-header__actions { margin-left: auto; }
}