/* Echo Perfume — Base / Reset */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

body {
	margin: 0;
	background: var(--color-bg);
	color: var(--color-text);
	font-family: var(--font-body);
	font-size: var(--fs-body);
	font-weight: 300;
	line-height: var(--lh-normal);
	-webkit-font-smoothing: antialiased;
	transition: background-color var(--dur-med) var(--ease-soft), color var(--dur-med) var(--ease-soft);
	/* overflow-x alone with no overflow-y makes browsers implicitly compute
	   overflow-y as auto (not visible), turning body into its own scroll
	   container decoupled from the window — silently breaking every
	   window-level 'scroll' listener sitewide (window.scrollY stuck at 0).
	   Setting overflow-y explicitly keeps the window as the real scroller. */
	overflow-x: hidden;
	overflow-y: visible;
}

img, svg, video { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
	font-family: var(--font-display);
	font-weight: 500;
	line-height: var(--lh-tight);
	margin: 0 0 var(--space-sm);
	letter-spacing: 0.01em;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
p { margin: 0 0 var(--space-sm); color: var(--color-text-muted); }

ul, ol { padding: 0; margin: 0; list-style: none; }
button { font-family: inherit; }
input, textarea, select { font-family: inherit; font-size: inherit; }

::selection { background: var(--color-gold); color: var(--color-black); }

.container {
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--container-pad);
}

.eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	font-family: var(--font-body);
	font-size: var(--fs-micro);
	text-transform: uppercase;
	letter-spacing: var(--tracking-wider);
	color: var(--color-gold);
	border: 1px solid var(--color-gold);
	border-radius: var(--radius-pill);
	padding: 0.45em 1em;
	margin-bottom: var(--space-md);
}

.section {
	padding-block: var(--space-2xl);
	position: relative;
}
.section--tight { padding-block: var(--space-xl); }
.section--alt { background: var(--color-bg-alt); }

/* Shop / Product / Cart / Checkout wrapper — tight top gap (the fixed nav
   already reserves its own space via body's padding-top), generous bottom
   gap before the footer. */
.wc-content { padding-block: var(--space-md) var(--space-2xl); position: relative; }

.section-head {
	max-width: 640px;
	margin-bottom: var(--space-xl);
}
.section-head--center { margin-inline: auto; text-align: center; }

/* Fine paper-grain overlay, fixed layer only (never on scrolling content) */
.grain-overlay {
	position: fixed;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	opacity: var(--noise-opacity);
	mix-blend-mode: overlay;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* Scroll-reveal target state (JS toggles .is-visible via IntersectionObserver) */
.reveal {
	opacity: 0;
	transform: translateY(28px);
	filter: blur(6px);
	transition: opacity var(--dur-slow) var(--ease-soft), transform var(--dur-slow) var(--ease-soft), filter var(--dur-slow) var(--ease-soft);
	will-change: transform, opacity;
}
.reveal.is-visible {
	opacity: 1;
	transform: translateY(0);
	filter: blur(0);
}
.reveal-stagger > * { transition-delay: calc(var(--i, 0) * 90ms); }

.skip-link {
	position: absolute;
	left: -999px;
	top: 0;
	background: var(--color-black);
	color: var(--color-inverse-text);
	padding: 1em 1.5em;
	z-index: 999;
}
.skip-link:focus { left: var(--space-sm); top: var(--space-sm); }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}