/*
 * Reset + base element styles. Loaded after variables.css, before
 * every other stylesheet.
 */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	/* Safety net: nothing on the site is meant to scroll horizontally
	   at the page level (product carousels and the hero slider scroll
	   internally), so this guarantees no stray horizontal scrollbar
	   can appear even if something elsewhere overflows unexpectedly. */
	overflow-x: hidden;
}

@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;
		scroll-behavior: auto !important;
	}
}

/* ---- Lenis Smooth Scroll ---- */
html.lenis,
html.lenis body {
	height: auto;
}

.lenis.lenis-smooth {
	scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
	overscroll-behavior: contain;
}

.lenis.lenis-stopped {
	overflow: hidden;
}

.lenis.lenis-smooth iframe {
	pointer-events: none;
}

body {
	margin: 0;
	background: var(--color-bg);
	color: var(--color-ink);
	font-family: var(--font-body);
	font-size: var(--fs-base);
	font-weight: var(--fw-regular);
	line-height: var(--lh-normal);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	transition: background-color var(--duration-base) var(--ease-standard), color var(--duration-base) var(--ease-standard);
}

img,
picture,
video,
canvas,
svg {
	display: block;
	max-width: 100%;
	height: auto;
}

input,
button,
textarea,
select {
	font: inherit;
	color: inherit;
}

button {
	background: none;
	border: 0;
	cursor: pointer;
	padding: 0;
}

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

ul,
ol {
	list-style: none;
	margin: 0;
	padding: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0 0 var(--space-3);
	font-family: var(--font-display);
	font-weight: var(--fw-medium);
	line-height: var(--lh-tight);
	color: var(--color-ink);
	text-wrap: balance;
}

h1 {
	font-size: var(--fs-4xl);
}

h2 {
	font-size: var(--fs-3xl);
}

h3 {
	font-size: var(--fs-2xl);
}

h4 {
	font-size: var(--fs-xl);
}

h5 {
	font-size: var(--fs-lg);
}

h6 {
	font-size: var(--fs-md);
	font-family: var(--font-body);
	font-weight: var(--fw-semibold);
}

p {
	margin: 0 0 var(--space-4);
}

p:last-child {
	margin-bottom: 0;
}

/* ---- Focus states — visible everywhere, never suppressed ---- */
:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 2px;
	border-radius: var(--radius-sm);
}

::selection {
	background: var(--color-accent);
	color: var(--color-accent-ink);
}

/* ---- Accessibility: skip link ---- */
.skip-link {
	position: absolute;
	top: -100px;
	left: var(--space-4);
	z-index: 1000;
	background: var(--color-ink-solid);
	color: #fff;
	padding: var(--space-3) var(--space-5);
	border-radius: var(--radius-sm);
	font-weight: var(--fw-medium);
	transition: top var(--duration-fast) var(--ease-standard);
}

.skip-link:focus {
	top: var(--space-4);
}

/* ---- Screen-reader-only utility ---- */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ---- Sensible default for embedded content ---- */
.wp-block-embed,
iframe {
	max-width: 100%;
}