/* ==========================================================================
   Aminex Nova — Components
   Buttons, chips, cards, RUO banner, header, footer, hero.
   ========================================================================== */

/* ---------- Buttons ---------- */
.nova-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	font-family: var(--nova-sans);
	font-weight: 600;
	font-size: 0.95rem;
	line-height: 1;
	padding: 0.95rem 1.6rem;
	border-radius: var(--nova-radius-pill);
	border: 1px solid transparent;
	cursor: pointer;
	transition:
		background var(--nova-fast) var(--nova-ease),
		color var(--nova-fast) var(--nova-ease),
		box-shadow var(--nova-med) var(--nova-ease),
		transform var(--nova-fast) var(--nova-ease);
	white-space: nowrap;
	text-decoration: none;
}
.nova-btn:hover { transform: translateY(-1px); }
.nova-btn:active { transform: translateY(0); }

.nova-btn--primary {
	background: var(--nova-purple);
	color: #FFFFFF;
	box-shadow: var(--nova-shadow-purple);
}
.nova-btn--primary:hover { background: var(--nova-purple-hover); color: #FFFFFF; }

.nova-btn--ink {
	background: var(--nova-ink);
	color: #FFFFFF;
}
.nova-btn--ink:hover { background: #1E1E2A; color: #FFFFFF; }

.nova-btn--ghost {
	background: transparent;
	color: var(--nova-ink);
	border-color: var(--nova-line-strong);
}
.nova-btn--ghost:hover {
	border-color: var(--nova-purple);
	color: var(--nova-purple);
}

.nova-btn--link {
	background: none;
	color: var(--nova-purple);
	padding: 0;
	border-radius: 0;
	box-shadow: none;
}
.nova-btn--link::after {
	content: "→";
	margin-left: 0.35rem;
	transition: transform var(--nova-fast) var(--nova-ease);
}
.nova-btn--link:hover::after { transform: translateX(4px); }

/* ---------- Chips / RUO tag ---------- */
.nova-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.3rem 0.7rem;
	border-radius: var(--nova-radius-pill);
	background: var(--nova-purple-soft);
	color: var(--nova-purple-deep);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}
.nova-chip--ink {
	background: var(--nova-ink);
	color: #FFFFFF;
}
.nova-chip--outline {
	background: transparent;
	border: 1px solid var(--nova-line-strong);
	color: var(--nova-ink-3);
}

/* ---------- RUO Banner (top-of-site) ---------- */
.nova-ruo-bar {
	background: var(--nova-ink);
	color: #FF4D4D;
	text-align: center;
	font-size: 0.78rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	padding: 0.6rem var(--nova-gutter);
	font-family: var(--nova-mono);
}
.nova-ruo-bar strong { color: #FF6B6B; }
.nova-ruo-bar .nova-ruo-bar__dot {
	display: inline-block;
	width: 6px; height: 6px;
	background: var(--nova-purple);
	border-radius: 50%;
	margin: 0 0.7rem 2px;
	vertical-align: middle;
}

/* ---------- Header ---------- */
.nova-header {
	position: sticky;
	top: 0;
	z-index: 40;
	background: rgba(255, 255, 255, 0.86);
	backdrop-filter: saturate(140%) blur(14px);
	-webkit-backdrop-filter: saturate(140%) blur(14px);
	border-bottom: 1px solid var(--nova-line);
}
.nova-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--nova-space-6);
	padding: 1rem 0;
}
.nova-header__brand {
	font-family: var(--nova-serif);
	font-size: 1.5rem;
	font-weight: 500;
	color: var(--nova-ink);
	letter-spacing: -0.01em;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}
.nova-header__brand-mark {
	display: inline-block;
	width: 26px; height: 26px;
	border-radius: 50%;
	background: radial-gradient(circle at 30% 30%, var(--nova-purple) 0, var(--nova-purple-deep) 100%);
	box-shadow: 0 4px 10px rgba(107, 78, 255, 0.3);
}
.nova-nav {
	display: flex;
	align-items: center;
	gap: var(--nova-space-6);
}
.nova-nav__menu {
	display: flex;
	gap: var(--nova-space-6);
	list-style: none;
	margin: 0; padding: 0;
}
.nova-nav__menu a {
	font-size: 0.94rem;
	font-weight: 500;
	color: var(--nova-ink-2);
	position: relative;
	padding: 0.2rem 0;
}
.nova-nav__menu a::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: -6px;
	height: 2px;
	background: var(--nova-purple);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--nova-med) var(--nova-ease);
}
.nova-nav__menu a:hover,
.nova-nav__menu .current-menu-item > a { color: var(--nova-ink); }
.nova-nav__menu a:hover::after,
.nova-nav__menu .current-menu-item > a::after { transform: scaleX(1); }

.nova-header__actions {
	display: flex;
	align-items: center;
	gap: var(--nova-space-4);
}
.nova-icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px; height: 40px;
	border-radius: 50%;
	background: transparent;
	color: var(--nova-ink);
	border: 1px solid var(--nova-line);
	transition: background var(--nova-fast) var(--nova-ease), border-color var(--nova-fast) var(--nova-ease);
	position: relative;
	text-decoration: none;
}
.nova-icon-btn:hover { background: var(--nova-purple-soft); border-color: var(--nova-purple-soft); color: var(--nova-purple-deep); }
.nova-icon-btn__count {
	position: absolute;
	top: -4px; right: -4px;
	min-width: 18px; height: 18px;
	background: var(--nova-purple);
	color: #FFFFFF;
	font-size: 0.68rem;
	font-weight: 700;
	border-radius: 999px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 5px;
}

@media (max-width: 900px) {
	/* No hamburger, no toggle, no hidden/shown state at all — the nav is
	   always visible as a second row under the logo/icons, horizontally
	   scrollable if it doesn't all fit. Nothing here is ever hidden via
	   display:none or toggled by JS, so the whole category of bug we kept
	   hitting (z-index fights, click-interrupts-navigation, wrapping/
	   height glitches) is structurally impossible — there's no state to
	   get into a bad configuration. */
	.nova-header__inner {
		flex-wrap: wrap;
		row-gap: 0;
		/* Extra right padding so the cart count badge — which is
		   positioned 4px outside its button — never touches or clips at
		   the screen edge. */
		padding-right: calc(var(--nova-gutter) + 6px);
	}
	.nova-nav {
		order: 3;
		flex-basis: 100%;
		width: 100%;
		border-top: 1px solid var(--nova-line);
		margin-top: .85rem;
		padding-top: .65rem;
		/* Bleed the scroll strip out to the container's padding edges, then
		   re-add that padding inside the scroller itself. This way the first
		   and last links still sit inset from the screen edge at rest, but
		   the strip can scroll edge-to-edge instead of visually cutting off
		   mid-link against a hard container boundary. */
		margin-left: calc(var(--nova-gutter) * -1);
		margin-right: calc(var(--nova-gutter) * -1);
		width: calc(100% + (var(--nova-gutter) * 2));
	}
	.nova-nav__menu {
		display: flex !important;
		flex-wrap: nowrap !important;
		overflow-x: auto !important;
		-webkit-overflow-scrolling: touch;
		gap: var(--nova-space-5) !important;
		padding: 0 var(--nova-gutter) 2px !important;
		scrollbar-width: none;
	}
	.nova-nav__menu::-webkit-scrollbar { display: none; }
	.nova-nav__menu a {
		flex: 0 0 auto;
		white-space: nowrap;
		font-size: .88rem;
	}
}

/* ---------- Hero ---------- */
.nova-hero {
	position: relative;
	padding-top: var(--nova-space-9);
	padding-bottom: var(--nova-space-9);
	overflow: hidden;
	background:
		radial-gradient(1000px 480px at 85% -10%, var(--nova-purple-soft), transparent 60%),
		radial-gradient(700px 500px at -10% 110%, var(--nova-purple-tint), transparent 60%),
		var(--nova-canvas);
}
.nova-hero__inner {
	max-width: 900px;
	margin: 0 auto;
	text-align: center;
}

/* Vial drop-in — 3 illustrated vials glide in and settle in a fanned row */
.nova-hero__vials {
	display: flex;
	justify-content: center;
	align-items: flex-start;
	gap: clamp(8px, 2.4vw, 30px);
	margin-bottom: var(--nova-space-6);
}
.nova-vialcard {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-decoration: none;
	opacity: 0;
	will-change: transform, opacity;
	animation: nova-vial-drop 1s cubic-bezier(.22, 1, .36, 1) forwards;
}
.nova-vialcard--1 { animation-delay: .06s; }
.nova-vialcard--2 { animation-delay: .20s; margin-top: -16px; }
.nova-vialcard--3 { animation-delay: .34s; }
.nova-vial__img {
	display: block;
	width: clamp(96px, 12vw, 138px);
	height: auto;
	filter: drop-shadow(0 14px 22px rgba(60, 40, 160, .14));
	transition: transform .25s ease, filter .25s ease;
}
.nova-vialcard--2 .nova-vial__img { width: clamp(112px, 14.5vw, 164px); }
.nova-vialcard--1 .nova-vial__img { transform: rotate(-5deg); }
.nova-vialcard--3 .nova-vial__img { transform: rotate(5deg); }
/* Hover lift (applied to the un-animated image, so it never fights the drop-in) */
.nova-vialcard:hover .nova-vial__img { filter: drop-shadow(0 20px 30px rgba(107, 78, 255, .26)); }
.nova-vialcard--1:hover .nova-vial__img { transform: rotate(-5deg) translateY(-6px) scale(1.03); }
.nova-vialcard--2:hover .nova-vial__img { transform: translateY(-6px) scale(1.03); }
.nova-vialcard--3:hover .nova-vial__img { transform: rotate(5deg) translateY(-6px) scale(1.03); }
.nova-vialcard:hover .nova-vial__price b { color: var(--nova-purple); }
.nova-vial__price {
	margin-top: 14px;
	text-align: center;
	line-height: 1.25;
	font-size: .82rem;
	color: var(--nova-ink-3);
}
.nova-vial__price b {
	display: block;
	font-family: var(--nova-serif);
	font-weight: 500;
	font-size: 1.4rem;
	color: var(--nova-ink);
}
/* Sale price: drop the default <ins> underline, mute the old struck price */
.nova-vial__price b ins { text-decoration: none; background: transparent; }
.nova-vial__price b del {
	color: var(--nova-ink-4);
	font-weight: 400;
	font-size: .72em;
	margin-right: .18em;
}

@keyframes nova-vial-drop {
	from { opacity: 0; transform: translateY(-60vh); }
	to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
	.nova-vialcard { animation: none; opacity: 1; transform: none; }
}
.nova-hero__title {
	font-size: var(--nova-fs-hero);
	line-height: 1.02;
	letter-spacing: -0.03em;
	color: var(--nova-ink);
	margin: var(--nova-space-4) 0 var(--nova-space-5);
}
.nova-hero__title em {
	font-style: italic;
	color: var(--nova-purple);
}
.nova-hero__lede {
	font-size: 1.15rem;
	color: var(--nova-ink-3);
	max-width: 620px;
	margin: 0 auto var(--nova-space-6);
	line-height: 1.55;
}
.nova-hero__ctas {
	display: inline-flex;
	gap: var(--nova-space-4);
	flex-wrap: wrap;
	justify-content: center;
}
.nova-hero__proof {
	margin-top: var(--nova-space-8);
	display: flex;
	gap: var(--nova-space-7);
	justify-content: center;
	flex-wrap: wrap;
	color: var(--nova-ink-3);
	font-size: 0.9rem;
}
.nova-hero__proof strong {
	display: block;
	font-family: var(--nova-serif);
	font-size: 1.75rem;
	color: var(--nova-ink);
	line-height: 1;
	margin-bottom: 0.35rem;
}

/* ---------- Section headings ---------- */
.nova-section__head {
	text-align: center;
	margin-bottom: var(--nova-space-7);
	max-width: 640px;
	margin-left: auto;
	margin-right: auto;
}
.nova-section__head h2 { margin: 0 0 var(--nova-space-3); }
.nova-section__head p { color: var(--nova-ink-3); }

/* ---------- Feature blocks (borderless, editorial) ---------- */
.nova-feature {
	position: relative;
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	padding: var(--nova-space-4) 0 !important;
	overflow: visible !important;
	isolation: auto;
	transition: transform var(--nova-med) var(--nova-ease);
}
/* Kill the previous decorative pseudo-elements */
.nova-feature::before,
.nova-feature::after {
	content: none !important;
	display: none !important;
}
.nova-feature:hover {
	transform: translateY(-3px);
	box-shadow: none !important;
}

/* Editorial serif number — solid purple, generous line-height, no clipping */
.nova-feature__icon {
	position: relative;
	display: block;
	width: auto;
	height: auto;
	background: none !important;
	color: var(--nova-purple-deep) !important;
	margin: 0 0 var(--nova-space-3) !important;
	padding: 0.4em 0.05em 0.15em !important;   /* generous ascender + descender room */
	font-family: var(--nova-serif);
	font-weight: 400;
	font-style: italic;
	font-size: 2.6rem;
	line-height: 1.4;
	letter-spacing: -0.03em;
	overflow: visible !important;
	-webkit-text-fill-color: currentColor;
}
.nova-feature__icon::after {
	content: "";
	display: block;
	width: 40px;
	height: 2px;
	margin-top: 0.25rem;
	background: linear-gradient(90deg, var(--nova-purple), rgba(107, 78, 255, 0));
	border-radius: 2px;
	transition: width var(--nova-med) var(--nova-ease);
}
.nova-feature:hover .nova-feature__icon::after { width: 64px; }

.nova-feature h3 {
	font-family: var(--nova-sans);
	font-size: 1.15rem;
	font-weight: 600;
	letter-spacing: -0.005em;
	margin: 0 0 var(--nova-space-2);
	color: var(--nova-ink);
}
.nova-feature p {
	color: var(--nova-ink-3);
	font-size: 0.95rem;
	line-height: 1.6;
	margin: 0;
	max-width: 34ch;
}

/* -------- Kill footer dots (removed per request) ------------------------- */
.nova-footer__grid-bg { display: none !important; }
.nova-footer::after { display: none !important; }

/* ---------- Footer ---------- */
.nova-footer {
	background: var(--nova-ink);
	color: #C7C4D4;
	padding-top: var(--nova-space-9);
	padding-bottom: var(--nova-space-6);
}
.nova-footer a { color: #E9E7F0; }
.nova-footer a:hover { color: var(--nova-purple); }

.nova-footer__grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1fr;
	gap: var(--nova-space-7);
	padding-bottom: var(--nova-space-7);
	border-bottom: 1px solid rgba(255,255,255,0.08);
}
@media (max-width: 800px) {
	.nova-footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
	.nova-footer__grid { grid-template-columns: 1fr; }
}
.nova-footer__brand {
	font-family: var(--nova-serif);
	color: #FFFFFF;
	font-size: 1.4rem;
	margin-bottom: var(--nova-space-3);
}
.nova-footer__blurb {
	font-size: 0.9rem;
	color: #9A97AB;
	max-width: 32ch;
	line-height: 1.6;
}
.nova-footer__widget-title,
.nova-footer__col h4 {
	color: #FFFFFF;
	font-family: var(--nova-sans);
	font-weight: 600;
	font-size: 0.8rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	margin-bottom: var(--nova-space-4);
}
.nova-footer__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; font-size: 0.94rem; }

.nova-footer__meta {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-top: var(--nova-space-5);
	font-size: 0.82rem;
	color: #7C7A8F;
	flex-wrap: wrap;
	gap: var(--nova-space-3);
}
.nova-footer__ruo {
	font-family: var(--nova-mono);
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

/* ---------- Newsletter (footer widget) ---------- */
.nova-footer__widget input[type="email"] {
	background: rgba(255,255,255,0.06);
	border-color: rgba(255,255,255,0.14);
	color: #FFFFFF;
}
.nova-footer__widget input[type="email"]::placeholder { color: #8A879A; }
.nova-footer__widget input[type="email"]:focus {
	border-color: var(--nova-purple);
	box-shadow: 0 0 0 4px rgba(107, 78, 255, 0.22);
}

/* ---------- Reveal-on-scroll ---------- */
.nova-reveal {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity var(--nova-slow) var(--nova-ease), transform var(--nova-slow) var(--nova-ease);
}
.nova-reveal.is-in {
	opacity: 1;
	transform: translateY(0);
}

/* ---------- Shop loop: "COA included" trust badge ---------- */
.nova-coa-badge{
	display:inline-flex;align-items:center;gap:.35rem;
	margin:.35rem 0 .1rem;
	font-size:.72rem;font-weight:600;letter-spacing:.02em;
	color:var(--nova-purple);background:var(--nova-purple-soft);
	padding:.22rem .55rem;border-radius:var(--nova-radius-pill);line-height:1.2;
}
.nova-coa-badge svg{flex:0 0 12px}

/* ---------- Footer legal / business identity line ---------- */
.nova-footer__legal{
	margin-top:1.5rem;padding-top:1.25rem;
	border-top:1px solid rgba(255,255,255,.1);
	font-size:.82rem;color:#9A97AB;
}
.nova-footer__legal strong{color:#E9E7F0;letter-spacing:.02em}
.nova-footer__legal a{color:#E9E7F0;text-decoration:underline}

/* ---------- Checkout: required RUO consent ---------- */
.nova-consent{
	margin:1rem 0 1.25rem;padding:.9rem 1rem;
	border:1px solid var(--nova-line);border-radius:var(--nova-radius-sm);
	background:var(--nova-purple-tint);font-size:.85rem;line-height:1.5;
}
.nova-consent label{display:flex;gap:.6rem;align-items:flex-start;cursor:pointer;margin:0}
.nova-consent input[type=checkbox]{margin-top:.2rem;flex:0 0 auto}
.nova-consent a{color:var(--nova-purple);text-decoration:underline}

/* ---------- Free shipping notice popup ---------- */
.nova-promo-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(11, 11, 18, 0.55);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.5rem;
	z-index: 1000;
	opacity: 0;
	backdrop-filter: blur(8px);
	transition: opacity var(--nova-med) var(--nova-ease);
}
.nova-promo-overlay.is-open {
	opacity: 1;
}
.nova-promo-overlay.is-closing {
	opacity: 0;
}
.nova-promo-popup {
	position: relative;
	background: linear-gradient(135deg, #6B4EFF 0%, #5A3EE8 50%, #4830BC 100%);
	border: 1px solid rgba(255,255,255,0.15);
	border-radius: var(--nova-radius-lg);
	box-shadow:
		0 50px 100px rgba(107, 78, 255, 0.35),
		inset 0 1px 1px rgba(255,255,255,0.2);
	padding: 2.5rem;
	max-width: 480px;
	width: 100%;
	animation: popupSlideIn var(--nova-med) var(--nova-ease);
	overflow: hidden;
}
.nova-promo-bg-animated {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background:
		radial-gradient(600px at 20% 50%, rgba(255,255,255,0.08) 0%, transparent 80%),
		radial-gradient(400px at 80% 20%, rgba(255,255,255,0.06) 0%, transparent 70%);
	animation: bgShift 8s ease-in-out infinite;
	pointer-events: none;
}
@keyframes bgShift {
	0%, 100% { transform: translate(0, 0); }
	50% { transform: translate(20px, -20px); }
}
.nova-promo-popup::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background:
		repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(255,255,255,0.02) 2px, rgba(255,255,255,0.02) 4px),
		repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(255,255,255,0.01) 2px, rgba(255,255,255,0.01) 4px);
	pointer-events: none;
	opacity: 0.5;
}
@keyframes popupSlideIn {
	from {
		opacity: 0;
		transform: translateY(30px) scale(0.95);
	}
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}
.nova-promo-close {
	position: absolute;
	top: 1.25rem;
	right: 1.25rem;
	width: 32px;
	height: 32px;
	border: 1.5px solid rgba(255,255,255,0.25);
	background: rgba(255,255,255,0.08);
	border-radius: 50%;
	font-size: 1.4rem;
	color: #FFFFFF;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all var(--nova-fast) var(--nova-ease);
	backdrop-filter: blur(8px);
	z-index: 2;
}
.nova-promo-close:hover {
	border-color: rgba(255,255,255,0.5);
	background: rgba(255,255,255,0.15);
	transform: rotate(90deg);
}
.nova-promo-content {
	position: relative;
	z-index: 2;
	text-align: center;
}
.nova-promo-icon {
	font-size: 3.5rem;
	line-height: 1;
	margin-bottom: 1rem;
	animation: iconBounce var(--nova-slow) var(--nova-ease) infinite;
}
@keyframes iconBounce {
	0%, 100% { transform: scale(1) translateY(0); }
	50% { transform: scale(1.1) translateY(-8px); }
}
.nova-promo-content h2 {
	font-family: var(--nova-serif);
	font-size: clamp(2rem, 5vw, 2.8rem);
	font-weight: 700;
	line-height: 1.15;
	margin: 0 0 0.75rem;
	color: #FFFFFF;
	letter-spacing: -0.02em;
	background: linear-gradient(135deg, #FFFFFF 0%, rgba(255,255,255,0.95) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	animation: shimmer 3s ease-in-out infinite;
}
@keyframes shimmer {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.85; }
}
.nova-promo-content p {
	font-size: 0.95rem;
	line-height: 1.6;
	color: rgba(255,255,255,0.9);
	margin: 0;
}
@media (max-width: 640px) {
	.nova-promo-popup {
		padding: 2rem 1.5rem;
	}
	.nova-promo-close {
		top: 1rem;
		right: 1rem;
		width: 28px;
		height: 28px;
		font-size: 1.2rem;
	}
	.nova-promo-icon {
		font-size: 2.8rem;
	}
	.nova-promo-content h2 {
		font-size: 1.8rem;
	}
}