/* ==========================================================================
   Chrome — the Aviva layer over the shared base: utility bar, header,
   product card, contact band, footer, age gate, cookie consent, quick view.
   Loaded after sections.css, so equal-specificity rules here win.
   ========================================================================== */

/* Icons size to their text unless a component says otherwise. */
.icon { width: 1.25em; height: 1.25em; flex: none; }

/* ---------- Type: Sora display headings ------------------------------------ */

h1, h2, h3, .display { font-family: var(--font-display); letter-spacing: var(--tracking-heading); }
h1, h2 { font-weight: 600; }
.eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2xs);
	color: var(--accent-text);
	font-family: var(--font-display);
	font-weight: 600;
}
.eyebrow::before {
	content: "";
	width: 18px;
	height: 2px;
	border-radius: 2px;
	background: var(--gradient-brand);
}
.on-ink .eyebrow { color: var(--accent-lift); }

.ah-gradient-text {
	background: var(--gradient-brand);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	/* Gradient text is decorative; keep a solid fallback for forced colours. */
}
@media (forced-colors: active) { .ah-gradient-text { color: CanvasText; background: none; } }

/* ---------- Buttons: purple primary, soft glow ----------------------------- */

.btn--primary {
	background: var(--accent-ink);
	border-color: var(--accent-ink);
	color: var(--on-accent);
	box-shadow: 0 6px 18px rgb(91 61 150 / 0.22);
}
.btn--primary:hover {
	background: var(--accent-ink-hover);
	border-color: var(--accent-ink-hover);
	box-shadow: 0 10px 26px rgb(91 61 150 / 0.30);
}
.on-ink .btn--primary { background: var(--white); border-color: var(--white); color: var(--ink); box-shadow: none; }
.on-ink .btn--primary:hover { background: var(--on-ink-btn-hover); border-color: var(--on-ink-btn-hover); }
.on-ink .btn--ghost { color: var(--on-ink); }
.on-ink .btn--ghost:hover { background: var(--on-ink-10); color: var(--white); }
.on-ink .btn--outline { border-color: var(--on-ink-28); color: var(--white); background: transparent; }
.on-ink .btn--outline:hover { border-color: var(--white); background: var(--on-ink-8); }
.btn .icon { width: 18px; height: 18px; }

/* ---------- Utility bar ----------------------------------------------------- */

.utility-bar {
	background: var(--ink);
	color: var(--on-ink-muted);
	font-size: var(--step--2);
}
.utility-bar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-m);
	min-height: 38px;
}
.utility-bar__item {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2xs);
	margin: 0;
	color: inherit;
	text-decoration: none;
	white-space: nowrap;
}
a.utility-bar__item:hover { color: var(--white); }
.utility-bar .icon { width: 14px; height: 14px; color: var(--accent-lift); }
@media (max-width: 719px) {
	.utility-bar__inner { justify-content: center; }
	.utility-bar__item:first-child { display: none; }
}

/* ---------- Header ----------------------------------------------------------- */

.site-header.is-stuck { box-shadow: 0 6px 24px rgb(24 17 39 / 0.06); }
.site-logo img { height: 46px; }
.site-header.is-stuck .site-logo img { height: 38px; }
.site-logo--footer img { height: 56px; }
.nav-link { font-size: var(--step--1); font-weight: 500; }
.nav-link--top::after { background: var(--gradient-brand); }
.header-cart .cart-count { background: var(--accent-ink); color: var(--white); }

/* ---------- Product card (square vial shots on white) ------------------------ */

.product-card__media {
	aspect-ratio: 1 / 1;
	background:
		radial-gradient(70% 60% at 50% 40%, var(--white) 0%, var(--surface) 100%);
}
.product-card__media img {
	object-fit: contain;
	padding: var(--space-s);
	filter: drop-shadow(0 14px 18px rgb(24 17 39 / 0.12));
}
.product-card__title { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em; }
.product-card .price { font-family: var(--font-display); font-weight: 600; color: var(--text); }

.product-card__qv {
	position: absolute;
	left: 50%;
	bottom: var(--space-s);
	z-index: 3;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 40px;
	padding: 0 var(--space-s);
	border: 1px solid var(--border);
	border-radius: var(--radius-full);
	background: var(--frost-strong);
	backdrop-filter: blur(8px);
	color: var(--text);
	font-size: var(--step--2);
	font-weight: 600;
	cursor: pointer;
	opacity: 0;
	transform: translate(-50%, 8px);
	transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.product-card__qv .icon { width: 15px; height: 15px; }
.product-card:hover .product-card__qv,
.product-card__qv:focus-visible { opacity: 1; transform: translate(-50%, 0); }
.product-card__qv:hover { background: var(--white); color: var(--accent-text); }
@media (hover: none) { .product-card__qv { opacity: 1; transform: translate(-50%, 0); } }

.badge--kit { background: var(--ink); color: var(--white); }
.badge--kit .icon { width: 13px; height: 13px; color: var(--accent-lift); }
.badge--ribbon { background: var(--teal-soft); color: var(--teal-text); }

/* ---------- Contact band ------------------------------------------------------ */

.contact-band {
	position: relative;
	padding-block: var(--section-y-tight);
	background:
		radial-gradient(60% 120% at 100% 0%, var(--veil-accent-sm) 0%, transparent 60%),
		radial-gradient(50% 120% at 0% 100%, var(--veil-brand-sm) 0%, transparent 60%),
		var(--surface);
	border-top: var(--hairline);
	overflow: hidden;
}
.contact-band__inner {
	display: grid;
	gap: var(--space-l);
	align-items: center;
}
.contact-band h2 { margin: 0 0 var(--space-2xs); font-size: var(--step-2); max-width: 26ch; }
.contact-band .lead { margin: 0; color: var(--text-muted); }
.contact-band__mark img { width: 72px; height: auto; }
.contact-band__actions { display: flex; flex-wrap: wrap; gap: var(--space-s); }
@media (min-width: 960px) {
	.contact-band__inner { grid-template-columns: auto 1fr auto; gap: var(--space-xl); }
}

/* ---------- Footer -------------------------------------------------------------- */

.site-footer { position: relative; overflow: hidden; background: var(--gradient-ink); }
.site-footer__glow {
	position: absolute;
	inset: -40% 0 auto auto;
	width: 60vw;
	height: 60vw;
	max-width: 760px;
	max-height: 760px;
	background: radial-gradient(circle, rgb(46 196 182 / 0.14) 0%, transparent 62%);
	pointer-events: none;
}
.site-footer .container { position: relative; }
.site-footer__grid { grid-template-columns: 1fr; }
@media (min-width: 720px) { .site-footer__grid { grid-template-columns: 1.4fr 1fr 1fr; } .site-footer__brand { grid-column: 1 / -1; } }
@media (min-width: 1100px) { .site-footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; } .site-footer__brand { grid-column: auto; } }
.site-footer__owned {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2xs);
	margin-top: var(--space-s);
	padding: 6px 14px;
	border: 1px solid var(--on-ink-16);
	border-radius: var(--radius-full);
	color: var(--on-ink);
	font-size: var(--step--1);
	font-weight: 600;
}
.site-footer__owned .icon { width: 15px; height: 15px; color: var(--accent-lift); }
.site-footer__social {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2xs);
	min-height: 44px;
	margin-top: var(--space-xs);
	color: var(--on-ink-muted);
	text-decoration: none;
	font-size: var(--step--1);
}
.site-footer__social:hover { color: var(--white); }
.site-footer__social .icon { width: 20px; height: 20px; }
.site-footer__legal {
	display: grid;
	gap: var(--space-xs);
	margin-top: var(--space-2xl);
	padding: var(--space-l);
	border: 1px solid var(--ink-line);
	border-radius: var(--radius-l);
	background: var(--on-ink-4);
	color: var(--on-ink-muted);
	font-size: var(--step--2);
	line-height: 1.6;
}
.site-footer__legal p { margin: 0; max-width: none; }

/* ---------- Modal shell (age gate, cookies, quick view) ---------------------------- */

html.has-modal { overflow: hidden; }
.modal, .age-gate {
	position: fixed;
	inset: 0;
	z-index: var(--z-modal);
	display: grid;
	place-items: center;
	padding: var(--space-s);
	background: var(--scrim-strong);
	backdrop-filter: blur(6px);
	opacity: 0;
	transition: opacity var(--dur-base) var(--ease-out);
}
.modal.is-open, .age-gate.is-open { opacity: 1; }
.modal[hidden], .age-gate[hidden] { display: none; }
.modal__box, .age-gate__box {
	position: relative;
	width: min(100%, 520px);
	max-height: calc(100dvh - 32px);
	overflow: auto;
	padding: var(--space-xl) var(--space-l);
	background: var(--bg);
	border-radius: var(--radius-xl);
	box-shadow: var(--shadow-l);
	transform: translateY(14px) scale(0.98);
	transition: transform var(--dur-slow) var(--ease-out);
}
.is-open > .modal__box, .is-open > .age-gate__box { transform: none; }
.modal__close {
	position: absolute;
	top: var(--space-s);
	right: var(--space-s);
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 50%;
	background: var(--surface);
	color: var(--text);
	cursor: pointer;
}
.modal__close:hover { background: var(--surface-2); }
.modal__close .icon { width: 18px; height: 18px; }

/* Age gate */
.age-gate { z-index: calc(var(--z-modal) + 10); background: rgb(24 17 39 / 0.78); }
.age-gate__box { text-align: center; padding-block: var(--space-2xl) var(--space-xl); }
.age-gate__box::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 5px;
	background: var(--gradient-brand);
}
.age-gate__mark { width: 64px; height: auto; margin: 0 auto var(--space-m); }
.age-gate h2 { margin: 0 0 var(--space-xs); font-size: var(--step-3); }
.age-gate p { margin-inline: auto; color: var(--text-muted); }
.age-gate__actions { display: grid; gap: var(--space-xs); margin-top: var(--space-l); }
@media (min-width: 480px) { .age-gate__actions { grid-template-columns: 1fr 1fr; } }
.age-gate__note { margin-top: var(--space-m); font-size: var(--step--2); }
.age-gate [data-age-denied] h2:focus { outline: none; }

/* Cookie bar */
.cookie-bar {
	position: fixed;
	left: var(--space-s);
	right: var(--space-s);
	bottom: var(--space-s);
	z-index: var(--z-toast);
	display: flex;
	justify-content: center;
	pointer-events: none;
}
.cookie-bar[hidden] { display: none; }
.cookie-bar__inner {
	display: grid;
	gap: var(--space-s);
	width: min(100%, 980px);
	padding: var(--space-m);
	border: var(--hairline);
	border-radius: var(--radius-l);
	background: var(--bg);
	box-shadow: var(--shadow-l);
	pointer-events: auto;
	animation: cookie-in var(--dur-slow) var(--ease-out) both;
}
.cookie-bar p { margin: 0; color: var(--text-muted); font-size: var(--step--1); max-width: none; }
.cookie-bar__actions { display: flex; flex-wrap: wrap; gap: var(--space-2xs); }
@media (min-width: 860px) {
	.cookie-bar__inner { grid-template-columns: 1fr auto; align-items: center; }
}
@keyframes cookie-in { from { opacity: 0; transform: translateY(16px); } }

.cookie-modal__list { margin: var(--space-m) 0; padding: 0; list-style: none; display: grid; gap: var(--space-2xs); }
.cookie-modal__list li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-s);
	padding: var(--space-s);
	border: var(--hairline);
	border-radius: var(--radius-m);
}
.cookie-modal__list strong { display: block; }
.cookie-modal__list small { color: var(--text-subtle); }
.cookie-modal__actions { display: flex; justify-content: flex-end; gap: var(--space-2xs); }

/* Switch */
.switch { position: relative; display: inline-flex; flex: none; cursor: pointer; }
.switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: inherit; }
.switch__ui {
	width: 46px;
	height: 26px;
	border-radius: var(--radius-full);
	background: var(--border-strong);
	transition: background-color var(--dur-fast) var(--ease-out);
}
.switch__ui::after {
	content: "";
	display: block;
	width: 20px;
	height: 20px;
	margin: 3px;
	border-radius: 50%;
	background: var(--white);
	box-shadow: var(--shadow-s);
	transition: transform var(--dur-base) var(--ease-spring);
}
.switch input:checked + .sr-only + .switch__ui { background: var(--accent-ink); }
.switch input:checked + .sr-only + .switch__ui::after { transform: translateX(20px); }
.switch input:focus-visible + .sr-only + .switch__ui { outline: 2px solid var(--focus); outline-offset: 2px; }
.switch input:disabled + .sr-only + .switch__ui { opacity: 0.6; }

/* Quick view */
.qv__box {
	width: min(100%, 920px);
	display: grid;
	gap: var(--space-l);
	padding: var(--space-l);
}
@media (min-width: 760px) { .qv__box { grid-template-columns: 1fr 1fr; padding: var(--space-xl); } }
.qv__media {
	aspect-ratio: 1;
	border-radius: var(--radius-l);
	background: radial-gradient(70% 60% at 50% 40%, var(--white) 0%, var(--surface) 100%);
	overflow: hidden;
}
.qv__media img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.qv[aria-busy="true"] .qv__media { animation: qv-pulse 1.2s ease-in-out infinite; }
@keyframes qv-pulse { 50% { opacity: 0.55; } }
.qv__body { display: flex; flex-direction: column; gap: var(--space-s); }
.qv__body h2 { margin: 0; font-size: var(--step-2); padding-right: var(--space-xl); }
.qv__body .eyebrow { margin: 0; }
.qv__price { margin: 0; font-family: var(--font-display); font-size: var(--step-2); font-weight: 600; }
.qv__price del { color: var(--text-subtle); font-size: 0.7em; }
.qv__price ins { text-decoration: none; }
.qv__desc { color: var(--text-muted); font-size: var(--step--1); }
.qv__desc p { margin: 0; }
.qv__buy { display: grid; gap: var(--space-s); margin-top: auto; }
.qv__buy .field { display: grid; gap: 6px; }
.qv__buy .field__label { font-weight: 600; font-size: var(--step--1); }

@media (prefers-reduced-motion: reduce) {
	.cookie-bar__inner { animation: none; }
	.modal__box, .age-gate__box { transform: none; }
}