/* Helivex Immersive — hero smoke, scroll-scrub vial, 3D product cards. Palette: theme vars only. */

/* ---------- Hero background field: half strength, and feathered out at the bottom ---------- */
/* The hero is overflow:hidden, so without a mask the glass field gets sliced off at the section edge.
   Fading it out before that edge is what lets the hero read as continuing into the next section. */
/* Hero background field removed by request. The JS no longer creates this canvas; this is a guard in
   case a cached script still does. */
#hvx-smoke { display: none !important; }

/* ---------- Hero → Featured Compounds: one continuous field, not two stacked panels ---------- */
#featured-compounds {
	position: relative;
	/* start at the hero's white and ease into the panel tint instead of switching at a hard line */
	background: linear-gradient(180deg, #fff 0%, rgba(250, 250, 250, .55) 22%, rgba(250, 250, 250, .55) 100%) !important;
	border-top: 0 !important;
}
/* Rose wash carried down out of the hero across the seam. The radial reaches full transparency well
   inside the element's own box, so the rectangle itself never shows an edge — that hard top edge was
   what drew a line across the hero. */
#featured-compounds::before {
	content: ""; position: absolute; left: 0; right: 0; top: -260px; height: 520px;
	pointer-events: none; z-index: 0;
	background: radial-gradient(58% 48% at 70% 50%, rgba(244, 167, 167, .20), rgba(244, 167, 167, 0) 72%);
}
#featured-compounds > * { position: relative; z-index: 1; }
/* close the dead gap between the two sections so the gradient is continuous */
.hvx-home-hero + *, #featured-compounds { margin-top: 0 !important; }

/* ---------- Hero: photo removed, abstract glass field takes its place ---------- */
.hvx-home-hero > .absolute.inset-0.z-0 > .absolute.inset-0.z-0 { display: none !important; }
.hvx-home-hero picture, .hvx-home-hero > .absolute.inset-0 img { display: none !important; }
/* the theme's white wash over the photo is no longer needed at full strength */
.hvx-home-hero .bg-gradient-to-r.from-white { background: linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, .72) 42%, rgba(255, 255, 255, 0) 78%) !important; }

/* ---------- Etched hero, left column ("Option C") ----------
   PRECISION is stroked, not filled — type etched on lab glass. "in" is a quiet mono connector.
   "research." is the only solid mass, in wine. The ISO line runs up a hairline rule at the edge. */
.hvx-etched { position: relative; }
.hvx-etched .hvx-etch-rail { margin: 0 0 20px; }
.hvx-etched h1 { line-height: .84 !important; }

/* The theme reveals hero words by animating a rectangular clip-path across them. On stroked outline type
   that rectangle cuts straight through the letterforms — the square lines seen through "PRE" — and if the
   observer re-fires the word can sit at inset(0 100% 0 0) with opacity 0. The etched treatment doesn't use
   that wipe, so switch it off on these three words. */
.hvx-etched .hvx-hero-word,
.hvx-etched .hvx-hero-word.is-in {
	clip-path: none !important;
	-webkit-clip-path: none !important;
	opacity: 1 !important;
	transition: none !important;
}
/* helivex-compiled.css and style.css both apply `-webkit-box-reflect: below -15% linear-gradient(...)`
   to the h1 and to `h1 span.text-primary`. That paints a mirrored copy under the headline — the ghost
   sitting beneath "research.". The etched treatment has no reflection, so clear it here.
   Note: `-webkit-box-reflect: none` cannot be used to cancel it — CSS.supports() reports false for that
   value in Blink, so the declaration is dropped and the theme's reflection survives. Overriding with a
   fully transparent reflection is the value the engine does accept. */
.hvx-etched h1,
.hvx-etched h1 span,
.hvx-etched .hvx-etch-solid {
	-webkit-box-reflect: below 0 linear-gradient(transparent, transparent) !important;
}
.hvx-etched .hvx-etch-outline {
	display: block;
	color: transparent !important;
	/* em-based so the outline keeps the same weight-to-size ratio at every breakpoint. A fixed px stroke
	   made the mobile headline proportionally far heavier than desktop (1.1px on 36px = .031em against
	   1.9px on 96px = .020em), which is what made the small version look wrong. */
	/* floor at 1px: below that iOS draws the stroke broken and uneven (29px x .02em = 0.58px on phones) */
	-webkit-text-stroke: max(.02em, 1px) #18181b;
	text-stroke: max(.02em, 1px) #18181b;
	letter-spacing: -.045em;
	padding-bottom: .04em; /* stroke sits outside the glyph box; stop descenders clipping */
	/* the theme's wine glow smears a hairline outline — the desktop look is a clean stroke */
	text-shadow: none !important;
}
.hvx-etched .hvx-etch-join {
	display: block;
	font-family: "Geist Mono", "JetBrains Mono", ui-monospace, monospace;
	font-size: 11px; font-weight: 500; font-style: normal;
	letter-spacing: .3em; text-transform: uppercase;
	color: #a1a1aa;
	/* em margins so the connector sits the same distance from the two headline lines at every size.
	   These resolve to the desktop 9px/7px at 12px, and scale correctly down to mobile — where fixed
	   px had collapsed them to 3.5px/2.5px and jammed "in" against PRECISION. */
	margin: .75em 0 .58em; padding-left: .25em;
}
/* The theme's markup keeps a <br> between "IN" and "RESEARCH." Once the words are blocks that <br> is an
   empty line — a 31px hole under "in" on mobile (8px above it). Desktop hides it in the larger leading. */
.hvx-etched h1 > br { display: none; }
.hvx-etched .hvx-etch-solid {
	display: block;
	color: var(--primary, #8b1a1a) !important;
	font-style: italic;
	letter-spacing: -.05em;
	/* the source text is "RESEARCH." — the mock set it lowercase, which is what softens the line */
	text-transform: lowercase;
}
.hvx-etched > p { margin-top: 20px !important; max-width: 44ch; }
/* the CTA row carries space-y-8 (32px) plus pt-4; the mock sat it at 26px */
.hvx-etched > .flex.flex-wrap { margin-top: 26px !important; padding-top: 0 !important; }

/* the rule + vertical ISO label (desktop) */
@media (min-width: 768px) {
	/* hvx-tactile-104.css zeroes this padding with !important. Its winning selector is
	   `.home section.relative.h-\[80vh\] .max-w-2xl` = (0,4,1), so 4 classes was not enough to beat it.
	   This is (0,6,0) and clears it properly. */
	.home .hvx-home-hero .container > .flex > .max-w-2xl.hvx-etched,
	.home section.relative.h-\[80vh\] .container > .flex > .max-w-2xl.hvx-etched,
	.hvx-etched { padding-left: 52px !important; }
	/* stroke is em-based now, so it scales with the headline on its own */
	.hvx-etched .hvx-etch-join { font-size: 12px; letter-spacing: .34em; }
	.hvx-etched .hvx-etch-rail {
		position: absolute; left: 0; top: 4px; bottom: 6px; width: 1.5px;
		background: linear-gradient(180deg, var(--primary, #8b1a1a) 0%, rgba(139, 26, 26, .15) 100%);
		margin: 0;
	}
	.hvx-etched .hvx-etch-rail .inline-flex {
		position: absolute; top: 0; left: 10px;
		writing-mode: vertical-rl;
		background: none !important; border: 0 !important; padding: 0 !important; margin: 0 !important;
		border-radius: 0 !important;
		font-family: "Geist Mono", "JetBrains Mono", ui-monospace, monospace;
		font-size: 9.5px; letter-spacing: .28em; white-space: nowrap;
		color: var(--primary, #8b1a1a);
	}
	.hvx-etched .hvx-etch-rail .inline-flex svg { display: none; }
}
/* below 768 the rule would crowd the column — the ISO line goes back to being a pill above the headline */
@media (max-width: 767px) {
	.hvx-etched .hvx-etch-join { font-size: 10.5px; }

	/* Mobile: no stroked outline at all — sub-2px text-stroke never renders cleanly on iOS. PRECISION is
	   set solid in Geist Sans 900 (the site's own headline face); "in" and "research." are unchanged. */
	.hvx-etched .hvx-etch-outline {
		-webkit-text-stroke: 0 !important;
		text-stroke: 0 !important;
		color: #18181b !important;
		font-family: "Geist Sans", Inter, system-ui, sans-serif;
		font-weight: 900;
		letter-spacing: -.035em;
		padding-bottom: 0;
	}

	/* The theme hides the mark below md, which left the mobile hero as type only. Show it, and let the
	   hero grow to fit rather than keeping the fixed 80vh, so the mark is never clipped. Making the box
	   a real size is also what lets the orbital ring and the logo-lens canvas initialise — both bail out
	   when they measure a zero-width container. */
	.hvx-home-hero .hidden.md\:block { display: block !important; }
	/* copy left, mark right — the desktop arrangement, held at phone width */
	.hvx-home-hero .container > .flex {
		flex-direction: row !important;
		align-items: center !important;
		gap: 10px !important;
		flex-wrap: nowrap !important;
	}
	.hvx-home-hero .container > .flex > .max-w-2xl.hvx-etched { flex: 1 1 0%; min-width: 0; }
	/* the mark carries close to half the row so it reads as a peer to the headline, not an afterthought */
	.hvx-home-hero .hidden.md\:block { flex: 0 0 46%; order: 2; }
	.hvx-home-hero .hidden.md\:block > div[class*="w-80"] {
		width: 100% !important; height: auto !important; aspect-ratio: 1 / 1;
	}
	/* copy column is ~185px here — everything below is sized to that, not scaled down from desktop */
	.hvx-etched h1 { font-size: 29px !important; }
	.hvx-etched > p {
		font-size: 12.5px !important; line-height: 1.4; margin-top: 12px !important; max-width: none;
	}
	.hvx-etched > .flex.flex-wrap { margin-top: 14px !important; gap: 7px !important; }
	.hvx-etched > .flex.flex-wrap > a {
		font-size: 8.5px !important; padding: 10px 12px !important;
		width: 100%; justify-content: center; letter-spacing: .08em !important;
	}
	.hvx-etched .hvx-etch-rail { margin-bottom: 10px; }
	.hvx-etched .hvx-etch-rail .inline-flex { font-size: 7px !important; padding: 3px 7px !important; }
	.hvx-etched .hvx-etch-rail .inline-flex svg { width: 8px; height: 8px; }
	/* An inline <style> the theme injects sets `min-height: calc(-112px + 100svh)` with padding 48/64 at
	   <=700px, which held the hero at 740px around a 439px row. It uses the same `.hvx-home-hero`
	   specificity as this file but is declared later, so it won on order — hence the extra selector. */
	.home section.relative.hvx-home-hero,
	.hvx-home-hero {
		height: auto !important;
		min-height: 0 !important;
		padding-top: 24px !important;
		padding-bottom: 32px !important;
	}
}

/* ---------- Intro: particle assembly + curtain (STR8FIRE) ---------- */
.hvx-intro-lock, .hvx-intro-lock body { overflow: hidden; }
.hvx-intro {
	position: fixed; inset: 0; z-index: 2147482000; display: grid; place-items: center;
	background: radial-gradient(120% 120% at 50% 45%, #fff 55%, #f9f3f3 100%);
	transition: opacity .8s cubic-bezier(.16, 1, .3, 1), clip-path .9s cubic-bezier(.16, 1, .3, 1);
	clip-path: inset(0 0 0 0);
}
.hvx-intro canvas { display: block; }
.hvx-intro.is-out { opacity: 0; clip-path: inset(0 0 100% 0); pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .hvx-intro { display: none; } .hvx-intro-lock, .hvx-intro-lock body { overflow: auto; } }

/* ---------- Orbital ring + focal parallax on the hero mark ---------- */
.hvx-home-hero .hidden.md\:block > div { position: relative; }
.hvx-orbit { position: absolute; pointer-events: none; z-index: 0; display: block; }
/* ring is desktop-only — see initOrbit() */
@media (max-width: 767px) { .hvx-orbit { display: none !important; } }
.hvx-focal { will-change: transform; }
.hvx-focal > img, .hvx-focal > canvas#hvx-logo-lens { position: relative; z-index: 1; }

/* the theme draws its own conic "scanning laser" in this core — hide it so ours is the only sweep */
.hvx-radar-host [class*="conic-gradient"] { display: none !important; }

/* ---------- Radar scan in the diagnostics core (Avora AI) ---------- */
.hvx-radar {
	position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
	pointer-events: none; z-index: 1; display: block; mix-blend-mode: multiply; opacity: .9;
}

/* ---------- Regulatory disclosure: one slim line, slow continuous ticker ---------- */
.hvx-ticker { padding-top: 6px !important; padding-bottom: 6px !important; overflow: hidden; }
.hvx-ticker .container { max-width: none; padding: 0; }
.hvx-ticker p { white-space: nowrap; overflow: hidden; margin: 0; line-height: 1.4; }
.hvx-ticker-track { display: inline-flex; width: max-content; will-change: transform; animation: hvx-ticker var(--hvx-dur, 40s) linear infinite; }
.hvx-ticker-item { display: inline-block; padding-right: 6rem; }
.hvx-ticker:hover .hvx-ticker-track { animation-play-state: paused; }
@keyframes hvx-ticker { to { transform: translateX(var(--hvx-shift, -50%)); } }
@media (prefers-reduced-motion: reduce) { .hvx-ticker-track { animation: none; } .hvx-ticker p { white-space: normal; } }

/* ---------- Header: floating rounded glass bar (Syntyra-style pill nav, full text labels) ---------- */
#main-header { background: transparent !important; border-bottom: 0 !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; padding: 12px 16px 0; box-shadow: none !important; }
#main-header > .container {
	height: 72px; padding: 0 10px 0 26px; border-radius: 999px;
	background: rgba(255, 255, 255, .62);
	border: 1px solid rgba(139, 26, 26, .14);
	box-shadow: 0 8px 26px -18px rgba(60, 40, 20, .5), 0 1px 0 rgba(255, 255, 255, .9) inset;
	backdrop-filter: blur(14px) saturate(1.5); -webkit-backdrop-filter: blur(14px) saturate(1.5);
}
#main-header nav.hidden.md\:flex {
	gap: 2px; padding: 4px; border-radius: 999px;
	border: 1px solid rgba(139, 26, 26, .12); background: rgba(255, 255, 255, .55);
	box-shadow: 0 8px 26px -18px rgba(60, 40, 20, .5);
	backdrop-filter: blur(10px) saturate(1.5); -webkit-backdrop-filter: blur(10px) saturate(1.5);
}
#main-header nav.hidden.md\:flex > a { position: relative; isolation: isolate; padding: 8px 14px; border-radius: 999px; color: #3f3f46; transition: color .25s; }
#main-header nav.hidden.md\:flex > a > span { display: none; } /* theme's underline slide */
#main-header nav.hidden.md\:flex > a::before { /* radial glow */
	content: ""; position: absolute; inset: 0; z-index: -2; border-radius: 999px; opacity: 0; transition: opacity .3s;
	background: radial-gradient(circle, rgba(200, 50, 74, .34) 0%, rgba(181, 18, 46, .12) 48%, rgba(255, 255, 255, 0) 78%); filter: blur(7px);
}
#main-header nav.hidden.md\:flex > a::after { /* gradient sheen */
	content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 999px; opacity: 0; transition: opacity .3s;
	background: linear-gradient(120deg, rgba(200, 50, 74, .22) 0%, rgba(255, 255, 255, 0) 82%);
}
#main-header nav.hidden.md\:flex > a:hover, #main-header nav.hidden.md\:flex > a[aria-current], #main-header nav.hidden.md\:flex > a.is-active { color: var(--primary, #8b1a1a); }
#main-header nav.hidden.md\:flex > a:hover::before, #main-header nav.hidden.md\:flex > a:hover::after,
#main-header nav.hidden.md\:flex > a.is-active::before, #main-header nav.hidden.md\:flex > a.is-active::after { opacity: 1; }
#main-header #mobile-menu { margin: 8px 0 0; border-radius: 24px; border: 1px solid rgba(139, 26, 26, .14) !important; background: rgba(255, 255, 255, .8); backdrop-filter: blur(14px) saturate(1.5); -webkit-backdrop-filter: blur(14px) saturate(1.5); box-shadow: 0 8px 26px -18px rgba(60, 40, 20, .5); }
@media (max-width: 767px) { #main-header { padding: 8px 10px 0; } #main-header > .container { height: 60px; padding: 0 6px 0 18px; } }

/* ---------- Hero smoke canvas ---------- */
.hvx-home-hero { isolation: isolate; }
#hvx-smoke {
	position: absolute; inset: 0; width: 100%; height: 100%;
	display: block; z-index: 1; pointer-events: none;
	mix-blend-mode: multiply;
}
/* the theme's own left-to-right white wash sits at z-10 inside the bg wrapper; keep smoke under the copy */
.hvx-home-hero > .container { position: relative; z-index: 2; }

/* Fix: theme wrapper for the 3D logo lens has no width/height in compiled CSS (w-80 / md:w-[450px] missing).
   Sized well past the theme's 450px so the mark reads as the hero's focal object; it drives the lens canvas,
   the orbital ring and the parallax rig, so all three scale with it. */
@media (min-width: 768px) {
	.hvx-home-hero .hidden.md\:block > div[class*="w-80"] { width: min(46vw, 720px); height: min(46vw, 720px); }
}
@media (min-width: 1280px) {
	.hvx-home-hero .hidden.md\:block > div[class*="w-80"] { width: min(42vw, 780px); height: min(42vw, 780px); }
}
/* let the enlarged mark overflow the hero column instead of squeezing the headline */
@media (min-width: 768px) {
	.hvx-home-hero .hidden.md\:block { flex: 0 0 auto; margin-right: -4vw; }
	.hvx-home-hero .container > div { gap: 1rem !important; }
}

/* ---------- Pinned scroll-scrub vial section ---------- */
#hvx-vial { position: relative; height: 420vh; background: #fff; }
#hvx-vial .hvx-vial-stage {
	position: sticky; top: 0;
	/* 100vh on mobile measures the viewport with the browser toolbar collapsed, so the bottom of the
	   stage — step 04 — sits behind the toolbar and looks cut off by the next section. dvh tracks the
	   actually-visible height; vh stays as the fallback for older browsers. */
	height: 100vh; height: 100dvh;
	overflow: hidden;
	display: grid; grid-template-columns: 1fr 1fr; align-items: center;
	max-width: 1180px; margin: 0 auto; padding: 0 24px;
}
#hvx-vial .hvx-vial-title { position: absolute; top: 6vh; left: 24px; right: 24px; text-align: center; z-index: 2; }
#hvx-vial .hvx-vial-title h2 { font-size: clamp(34px, 6vw, 72px); font-weight: 900; letter-spacing: -.04em; line-height: .95; color: #18181b; margin: 0; }
#hvx-vial .hvx-vial-title h2 em { color: var(--primary, #8b1a1a); font-style: italic; }
#hvx-vial .hvx-vial-title .hvx-eyebrow { justify-content: center; }
#hvx-vial .hvx-vial-stage { padding-top: 14vh; }
#hvx-vial .hvx-ring {
	position: absolute; inset: 0; margin: auto; width: 70vmin; height: 70vmin;
	border-radius: 50%; border: 1px solid rgba(139, 26, 26, .12); pointer-events: none;
}
#hvx-vial .hvx-ring.r2 { width: 52vmin; height: 52vmin; border-style: dashed; }
/* Flip rig: front = vial photo (fills), back = logo. Scroll drives rotateY on the inner element. */
#hvx-vial .hvx-flip { width: min(380px, 56vw); aspect-ratio: 800 / 876; margin: 0 auto; perspective: 1400px; }
#hvx-vial .hvx-flip-inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; will-change: transform; }
#hvx-vial .hvx-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
#hvx-vial .hvx-face-back { transform: rotateY(180deg); display: flex; align-items: center; justify-content: center; }
#hvx-vial .hvx-face-back img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 30px 44px rgba(139, 26, 26, .22)); }
#hvx-vial .hvx-vial-photo { filter: drop-shadow(0 30px 44px rgba(139, 26, 26, .18)); }
#hvx-vial .hvx-gauge { transition: opacity .2s linear; }
/* Particle dissolve mode: no flip — faces crossfade with the point-cloud canvas that sits over the box */
#hvx-vial.hvx-dissolve .hvx-face-back { transform: none; opacity: 0; backface-visibility: visible; }
#hvx-vial.hvx-dissolve .hvx-face-front { opacity: 1; backface-visibility: visible; }
#hvx-vial .hvx-dissolve-canvas { position: absolute; left: 0; top: 0; display: block; pointer-events: none; opacity: 0; z-index: 3; }
#hvx-vial.hvx-dissolve .hvx-flip { position: relative; }
#hvx-vial .hvx-vial-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; z-index: 1; }
/* Liquid: painted over the photo with multiply, confined to the vial's own pixels via alpha mask, then clipped to the fill level by JS */
#hvx-vial .hvx-liquid {
	position: absolute; inset: 0; z-index: 2; pointer-events: none;
	background: linear-gradient(180deg, #d94a4a 0%, #8b1a1a 55%, #4a0e0e 100%);
	mix-blend-mode: multiply;
	clip-path: inset(90.5% 0 0 0);
	will-change: clip-path;
}
#hvx-vial .hvx-meniscus { position: absolute; left: 0; right: 0; top: var(--hvx-top, 90.5%); height: 3%; background: linear-gradient(180deg, rgba(255, 255, 255, .6), rgba(255, 255, 255, 0)); }
#hvx-vial .hvx-gauge {
	text-align: center; margin-top: 10px;
	font-family: "Geist Mono", "JetBrains Mono", ui-monospace, monospace;
	font-size: 52px; font-weight: 700; letter-spacing: -.02em; color: var(--primary, #8b1a1a);
	font-variant-numeric: tabular-nums;
}
#hvx-vial .hvx-gauge small { font-size: 13px; letter-spacing: .2em; color: #666; margin-left: 8px; }
#hvx-vial .hvx-steps { display: grid; gap: 26px; }
#hvx-vial .hvx-step { opacity: .18; transform: translateX(24px); transition: opacity .5s, transform .6s cubic-bezier(.16, 1, .3, 1); }
#hvx-vial .hvx-step.on { opacity: 1; transform: none; }
#hvx-vial .hvx-step .n { font-family: "Geist Mono", "JetBrains Mono", ui-monospace, monospace; color: var(--primary, #8b1a1a); font-size: 11px; letter-spacing: .2em; }
#hvx-vial .hvx-step h3 { font-size: 28px; font-weight: 900; letter-spacing: -.03em; line-height: 1.05; margin: 6px 0 4px; color: #18181b; }
#hvx-vial .hvx-step p { color: #666; max-width: 420px; font-size: 15px; line-height: 1.5; }
#hvx-vial .hvx-eyebrow {
	display: inline-flex; align-items: center; gap: 10px; color: var(--primary, #8b1a1a); margin-bottom: 14px;
	font-family: "Geist Mono", "JetBrains Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
}
#hvx-vial .hvx-eyebrow::before { content: ""; width: 28px; height: 1px; background: currentColor; }
@media (max-width: 860px) {
	#hvx-vial { height: 340vh; height: 340dvh; }
	/* The title was absolutely positioned at top:6vh while the stage reserved only 14vh of padding, so on a
	   short viewport the heading and the vial sat on top of each other. On mobile the title joins the flow
	   and everything below is sized to fit one 100vh pinned screen. */
	#hvx-vial .hvx-vial-title { position: static; margin: 0 0 2px; }
	#hvx-vial .hvx-vial-title h2 { font-size: clamp(25px, 6.6vw, 33px); }
	#hvx-vial .hvx-vial-title .hvx-eyebrow { margin-bottom: 8px; }
	#hvx-vial .hvx-vial-stage {
		grid-template-columns: 1fr; align-content: start; gap: 8px;
		padding-top: 22px; padding-bottom: 22px;
	}
	#hvx-vial .hvx-ring, #hvx-vial .hvx-ring.r2 { display: none; }
	#hvx-vial .hvx-flip { width: min(132px, 33vw); }
	#hvx-vial .hvx-gauge { font-size: 27px; margin-top: 2px; }
	#hvx-vial .hvx-gauge small { font-size: 9.5px; letter-spacing: .14em; margin-left: 5px; }
	#hvx-vial .hvx-steps { gap: 7px; }
	#hvx-vial .hvx-step h3 { font-size: 16.5px; margin: 3px 0 2px; }
	#hvx-vial .hvx-step p { font-size: 12.5px; line-height: 1.42; }
	#hvx-vial .hvx-step .n { font-size: 9px; letter-spacing: .16em; }
}

/* ---------- Reconstitution Solution & Kits: vial photograph behind the section header ----------
   The header copy sits left (h2 724px wide, lede capped at 520px) and the product grid starts 252px
   down, so the image is anchored top-right and faded out with a single radial mask — one mask, no
   mask-composite, so there is nothing to fall back from. It clears the copy and the cards on its own. */
#research-essentials { position: relative; }
#research-essentials > .hvx-priority-wrap { position: relative; z-index: 1; }
#research-essentials::before {
	content: ""; position: absolute; left: 0; right: 0; top: 0; z-index: 0;
	/* The band carries the photo's own 16:9, so one copy fills the width with the whole frame visible —
	   no tiling and no crop. Height follows the width, and the veil below fades it out. */
	height: auto; aspect-ratio: 1600 / 900;
	pointer-events: none;
	/* A white veil layered over the photo rather than a mask: the single frame reads at the top and
	   dissolves to solid white before the product grid. A gradient over a photograph also avoids the
	   banding a mask shows on flat areas. */
	background-image:
		linear-gradient(180deg, rgba(255, 255, 255, .40) 0%, rgba(255, 255, 255, .50) 26%, rgba(255, 255, 255, .70) 44%, rgba(255, 255, 255, .90) 62%, #fff 78%),
		url("vials-bg-1.webp");
	background-size: cover, cover;
	background-position: 50% 0, 50% 0;
	background-repeat: no-repeat, no-repeat;
	/* the caps photograph a brighter, cooler red than #8b1a1a — pulling saturation back reconciles them */
	filter: saturate(.8);
	opacity: 1;
}
@media (max-width: 900px) {
	#research-essentials::before {
		height: 210px; opacity: .42;
		background-image: url("vials-bg-1-sm.webp");
		/* pinned explicitly so the desktop `contain` above can never leak down here — mobile already
		   matches the photo's aspect, so `cover` shows the whole scene and must stay as it is */
		background-size: cover;
		background-position: 78% 18%;
		-webkit-mask-image: radial-gradient(120% 100% at 84% 6%, #000 0%, rgba(0, 0, 0, .5) 45%, transparent 72%);
		mask-image: radial-gradient(120% 100% at 84% 6%, #000 0%, rgba(0, 0, 0, .5) 45%, transparent 72%);
	}
}

/* ---------- Product-card trust badges ----------
   Was: two washed-out pills stacked top-right. The theme's tactile-glass rules were overriding
   border-primary/20 with a white border and replacing shadow-xl with a white inset, so they lost all
   definition over the photo. Re-styled as one tidy row across the bottom of the image, on a soft scrim. */
.product-card a .absolute.z-10.flex.flex-col {
	top: auto !important; right: auto !important;
	left: 0 !important; bottom: 0 !important;
	flex-direction: row !important; flex-wrap: wrap;
	gap: 6px !important;
	width: 100%; padding: 0 10px 10px !important;
	align-items: center; justify-content: flex-start;
	/* scrim so light label text stays legible whatever the photo is doing */
	background: linear-gradient(to top, rgba(24, 10, 10, .55) 0%, rgba(24, 10, 10, .22) 55%, rgba(24, 10, 10, 0) 100%);
	padding-top: 34px !important;
	pointer-events: none;
}
.product-card a .absolute.z-10.flex.flex-col > div {
	background: rgba(255, 255, 255, .93) !important;
	border: 1px solid rgba(139, 26, 26, .18) !important;
	border-radius: 999px !important;
	padding: 4px 9px 4px 7px !important;
	box-shadow: 0 2px 10px rgba(26, 10, 10, .18) !important;
	backdrop-filter: blur(6px) saturate(1.4) !important; -webkit-backdrop-filter: blur(6px) saturate(1.4) !important;
	gap: 5px !important;
}
.product-card a .absolute.z-10.flex.flex-col > div span {
	font-family: "Geist Mono", "JetBrains Mono", ui-monospace, monospace !important;
	font-size: 8.5px !important; letter-spacing: .1em !important; font-weight: 700 !important;
	color: var(--accent, #4a0e0e) !important; text-transform: uppercase; white-space: nowrap;
}
.product-card a .absolute.z-10.flex.flex-col > div > div { width: 5px !important; height: 5px !important; }
@media (min-width: 640px) {
	.product-card a .absolute.z-10.flex.flex-col > div span { font-size: 9.5px !important; }
	.product-card a .absolute.z-10.flex.flex-col { padding: 40px 12px 12px !important; }
}
/* Mobile: the card is ~166px wide, so the two badges at desktop type measured 70px + 79px and wrapped
   onto separate lines, spilling past the image. Shrink them so both sit on one row inside the card. */
@media (max-width: 639px) {
	.product-card a .absolute.z-10.flex.flex-col {
		padding: 26px 6px 6px !important; gap: 3px !important; flex-wrap: nowrap !important;
		/* style.css shrinks this wrapper with `transform: scale(.75); transform-origin: right top` — written
		   for the old top-right badge stack. Now that it is a full-width bottom bar, that scale pulled the
		   bar and its scrim 41px in from the left edge of the image. The badges are already sized down for
		   mobile above, so the scale is not needed. */
		transform: none !important;
		transform-origin: center !important;
	}
	.product-card a .absolute.z-10.flex.flex-col > div {
		padding: 3px 5px 3px 4px !important; gap: 3px !important; min-width: 0;
	}
	.product-card a .absolute.z-10.flex.flex-col > div span {
		font-size: 6.5px !important; letter-spacing: .05em !important;
	}
	.product-card a .absolute.z-10.flex.flex-col > div > div { width: 4px !important; height: 4px !important; flex: 0 0 4px; }
}

/* The three spec cells sit in a fixed 3-column grid ~44px wide each; at the inherited type "VERIFIED"
   measured 45px and overflowed its cell, so the row read as misaligned against the shorter "RUO / LAB USE".
   Size the type to the cell and centre every cell the same way. */
@media (max-width: 639px) {
	.product-card .hvx-data-strip { gap: 4px !important; }
	.product-card .hvx-data-cell {
		padding: 6px 2px !important; text-align: center !important;
		display: flex !important; flex-direction: column !important; align-items: center !important;
		justify-content: center !important;
	}
	.product-card .hvx-data-cell strong { font-size: 10px !important; line-height: 1.15; white-space: nowrap; }
	.product-card .hvx-data-cell span {
		font-size: 7px !important; letter-spacing: .04em !important; white-space: nowrap; line-height: 1.2;
	}
}

/* the badges ride in on card hover instead of just sitting there */
.product-card a .absolute.z-10.flex.flex-col > div { transition: transform .45s cubic-bezier(.16, 1, .3, 1), box-shadow .45s; }
.product-card:hover a .absolute.z-10.flex.flex-col > div { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(26, 10, 10, .26) !important; }

/* ---------- Buttons: fully rounded pills instead of rounded rectangles ---------- */
.btn-primary,
a.btn-primary,
button.btn-primary,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce .button.add_to_cart_button,
.woocommerce button.single_add_to_cart_button,
.wc-block-components-button,
.hvx-priority-section a.btn-primary,
#hvx-vial .btn,
button.wp-element-button,
.wp-element-button {
	border-radius: 999px !important;
}
/* keep the pill from looking cramped now that the corners are fully round */
.btn-primary, a.btn-primary, .woocommerce a.button, .woocommerce button.button {
	padding-left: 1.6em; padding-right: 1.6em;
}
/* icon-only and square controls stay as they are */
.btn-primary.is-square, .wc-block-components-quantity-selector button { border-radius: 8px !important; }

/* ---------- Product cards: demo typography + 3D tilt, photo kept ---------- */
.products .product-card {
	--hvx-gx: 50%; --hvx-gy: 50%;
	transform-style: preserve-3d;
	transition: transform .15s ease-out, box-shadow .4s, border-color .3s !important;
	will-change: transform;
}
.products { perspective: 1400px; }
.products .product-card:hover { box-shadow: 0 30px 70px rgba(74, 14, 14, .18) !important; }
.products .product-card > a:first-child { transform: translateZ(28px); }
.products .product-card > .p-2\.5, .products .product-card > [class*="p-2.5"] { transform: translateZ(40px); }
/* photo glare */
.products .product-card > a:first-child::after {
	content: ""; position: absolute; inset: -40%; pointer-events: none; z-index: 5;
	background: radial-gradient(circle at var(--hvx-gx) var(--hvx-gy), rgba(255, 255, 255, .55), transparent 40%);
	opacity: 0; transition: opacity .3s; mix-blend-mode: soft-light;
}
.products .product-card:hover > a:first-child::after { opacity: 1; }
/* rotating conic border on hover */
@property --hvx-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.products .product-card::before {
	content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; z-index: 6; pointer-events: none;
	background: conic-gradient(from var(--hvx-a), transparent 0 70%, var(--primary, #8b1a1a) 85%, transparent 100%);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor; mask-composite: exclude;
	opacity: 0; transition: opacity .4s;
}
.products .product-card:hover::before { opacity: 1; animation: hvx-spin 3s linear infinite; }
@keyframes hvx-spin { to { --hvx-a: 360deg; } }

/* typography (desktop sizes; mobile inherits theme's compact sizes) */
@media (min-width: 640px) {
	.products .product-card h3 { font-size: 24px !important; letter-spacing: -.03em !important; line-height: 1 !important; text-transform: uppercase; }
	.products .product-card .hvx-data-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
	.products .product-card .hvx-data-cell {
		background: rgba(255, 255, 255, .7); border: 1px solid #e5e5e5; border-radius: 8px; padding: 8px; text-align: center;
	}
	.products .product-card .hvx-data-cell strong { display: block; font-family: "Geist Mono", "JetBrains Mono", ui-monospace, monospace; font-size: 12px; color: var(--accent, #4a0e0e); }
	.products .product-card .hvx-data-cell span { font-family: "Geist Mono", "JetBrains Mono", ui-monospace, monospace; font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: #666; }
	.products .product-card .hvx-coa-chip {
		font-family: "Geist Mono", "JetBrains Mono", ui-monospace, monospace; font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
	}
	.products .product-card .price, .products .product-card p.text-primary { font-size: 26px !important; letter-spacing: -.03em !important; color: #18181b !important; }
	.products .product-card del { color: #a1a1aa; font-size: 14px; letter-spacing: 0; font-weight: 500; margin-right: 8px; }
	.products .product-card ins { text-decoration: none; }
	.products .product-card p.hidden.sm\:block { font-family: "Geist Mono", "JetBrains Mono", ui-monospace, monospace; }
}

@media (prefers-reduced-motion: reduce) {
	#hvx-smoke { display: none; }
	.products .product-card::before { animation: none; }
	#hvx-vial .hvx-step { opacity: 1; transform: none; }
}