/* ==========================================================================
   SEOLLURE — design system
   Colour values, content width and edge padding are taken from the original
   seollure.com global stylesheet (Kadence global palette 1-9).
   ========================================================================== */

/* ---------------------------------------------------------------- fonts --- */
/* Pretendard — SIL Open Font License 1.1. Variable weight 100-900. */
@font-face {
	font-family: "Pretendard";
	src: url("../fonts/PretendardVariable.woff2") format("woff2-variations"),
	     url("../fonts/PretendardVariable.woff2") format("woff2");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

/* ---------------------------------------------------------------- tokens -- */
:root {
	/* Colour — from the original --global-palette1..9 */
	--color-accent: #d52520;
	--color-accent-dark: #8b1512;
	--color-gold: #cfb797;
	--color-heading: #111111;
	--color-text: #535353;
	--color-muted: #ababab;
	--color-border-strong: #bcbcbc;
	--color-border: #d0d0d0;
	--color-surface: #f6f5f2;
	--color-background: #ffffff;
	--color-inverse-text: #ffffff;
	--color-overlay: rgba(0, 0, 0, 0.45);

	/* Typography */
	--font-heading: "Pretendard", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo",
		"Malgun Gothic", "Helvetica Neue", Arial, sans-serif;
	--font-body: var(--font-heading);

	--fw-regular: 400;
	--fw-medium: 500;
	--fw-semibold: 600;
	--fw-bold: 700;
	--fw-black: 800;

	/* Fluid type scale */
	--fs-xs: 0.75rem;
	--fs-sm: 0.875rem;
	--fs-base: 1rem;
	--fs-md: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
	--fs-lg: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
	--fs-xl: clamp(1.375rem, 1.15rem + 1vw, 2rem);
	--fs-2xl: clamp(1.75rem, 1.3rem + 2vw, 3rem);
	--fs-3xl: clamp(2.25rem, 1.4rem + 3.6vw, 4.5rem);
	--fs-editorial: clamp(2.5rem, 1rem + 6vw, 5rem);

	--lh-tight: 1.15;
	--lh-heading: 1.25;
	--lh-body: 1.75;

	--ls-wide: 0.08em;
	--ls-wider: 0.18em;

	/* Spacing */
	--space-3xs: 0.25rem;
	--space-2xs: 0.5rem;
	--space-xs: 0.75rem;
	--space-sm: 1rem;
	--space-md: 1.5rem;
	--space-lg: 2rem;
	--space-xl: 3rem;
	--space-2xl: 4rem;
	--space-3xl: 6rem;
	--section-y: clamp(3.5rem, 7vw, 8rem);

	/* Layout — original --global-content-width / --global-content-edge-padding */
	--container-width: 1400px;
	--container-narrow: 900px;
	--edge-padding: clamp(20px, 4.5vw, 60px);

	/* Borders & radii */
	--radius-sm: 4px;
	--radius-md: 5px;
	--radius-lg: 12px;
	--radius-pill: 999px;
	--border-hairline: 1px solid var(--color-border);

	/* Motion */
	--dur-fast: 180ms;
	--dur-base: 320ms;
	--dur-slow: 620ms;
	--dur-reveal: 900ms;
	--ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--ease-out: cubic-bezier(0.16, 1, 0.3, 1);

	/* Chrome */
	--header-height: 90px;
	--drawer-width: 530px;

	/* Z-index layers */
	--z-base: 1;
	--z-sticky: 100;
	--z-header: 200;
	--z-drawer-overlay: 300;
	--z-drawer: 310;
	--z-skiplink: 400;
}

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

/*
 * The browser's built-in `[hidden] { display: none }` rule has element-level
 * specificity, so any class rule that sets `display` (.product-card, .news-card,
 * flex/grid items generally) silently overwins it — the element keeps its
 * `hidden` attribute but stays visually on screen. The client-side product
 * filter relies on toggling `hidden`, so this restores it as the deciding rule.
 */
[hidden] {
	display: none !important;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background-color: var(--color-background);
	color: var(--color-text);
	font-family: var(--font-body);
	font-size: var(--fs-base);
	font-weight: var(--fw-regular);
	line-height: var(--lh-body);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

body.is-drawer-open {
	overflow: hidden;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 var(--space-sm);
	color: var(--color-heading);
	font-family: var(--font-heading);
	font-weight: var(--fw-semibold);
	line-height: var(--lh-heading);
}

h1 { font-size: var(--fs-3xl); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-lg); }
h5, h6 { font-size: var(--fs-md); }

p { margin: 0 0 var(--space-sm); }
p:last-child { margin-bottom: 0; }

a {
	color: inherit;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.22em;
	transition: color var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}

a:hover { color: var(--color-accent); }

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

figure { margin: 0; }

ul, ol { padding-left: 1.25em; }

blockquote {
	margin: var(--space-lg) 0;
	padding-left: var(--space-md);
	border-left: 2px solid var(--color-accent);
	color: var(--color-heading);
	font-size: var(--fs-lg);
}

hr {
	height: 0;
	margin: var(--space-xl) 0;
	border: 0;
	border-top: var(--border-hairline);
}

table {
	width: 100%;
	border-collapse: collapse;
}

th, td {
	padding: var(--space-2xs) var(--space-xs);
	border-bottom: var(--border-hairline);
	text-align: left;
}

code, pre {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 0.9em;
}

pre {
	overflow-x: auto;
	padding: var(--space-md);
	background: var(--color-surface);
	border-radius: var(--radius-md);
}

::selection {
	background: var(--color-heading);
	color: var(--color-inverse-text);
}

/* --------------------------------------------------------------- a11y ----- */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 3px;
	border-radius: 2px;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	border: 0;
	white-space: nowrap;
}

.skip-link {
	position: absolute;
	top: -100px;
	left: var(--space-sm);
	z-index: var(--z-skiplink);
	padding: var(--space-2xs) var(--space-sm);
	background: var(--color-heading);
	color: var(--color-inverse-text);
	font-size: var(--fs-sm);
	text-decoration: none;
	border-radius: var(--radius-sm);
	transition: top var(--dur-fast) var(--ease);
}

.skip-link:focus {
	top: var(--space-sm);
	color: var(--color-inverse-text);
}

/* ---------------------------------------------------------------- layout -- */
.container {
	width: 100%;
	max-width: var(--container-width);
	margin-inline: auto;
	padding-inline: var(--edge-padding);
}

.container--narrow { max-width: var(--container-narrow); }
.container--flush { padding-inline: 0; }

.section {
	padding-block: var(--section-y);
}

.section--surface { background: var(--color-surface); }
.section--dark {
	background: var(--color-heading);
	color: rgba(255, 255, 255, 0.78);
}
.section--dark h1,
.section--dark h2,
.section--dark h3,
.section--dark h4 { color: var(--color-inverse-text); }

.section--tight { padding-block: clamp(2rem, 4vw, 4rem); }

.stack > * + * { margin-top: var(--space-sm); }
.stack-lg > * + * { margin-top: var(--space-lg); }

.grid { display: grid; gap: clamp(1rem, 2.5vw, 2rem); }

.text-center { text-align: center; }

/* Eyebrow / small caps label used throughout the original site */
.eyebrow {
	display: block;
	margin-bottom: var(--space-sm);
	color: var(--color-muted);
	font-size: var(--fs-xs);
	font-weight: var(--fw-semibold);
	letter-spacing: var(--ls-wider);
	text-transform: uppercase;
}

.section-title {
	font-size: var(--fs-2xl);
	font-weight: var(--fw-semibold);
	text-transform: uppercase;
	letter-spacing: var(--ls-wide);
}

.lede {
	max-width: 62ch;
	font-size: var(--fs-md);
	color: var(--color-text);
}

/* --------------------------------------------------------------- buttons -- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2xs);
	min-height: 48px;
	padding: 0.85em 2em;
	border: 1px solid var(--color-heading);
	border-radius: var(--radius-pill);
	background: var(--color-heading);
	color: var(--color-inverse-text);
	font-family: var(--font-heading);
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background var(--dur-base) var(--ease), color var(--dur-base) var(--ease),
		border-color var(--dur-base) var(--ease), transform var(--dur-base) var(--ease);
}

.btn:hover {
	background: var(--color-accent);
	border-color: var(--color-accent);
	color: var(--color-inverse-text);
	transform: translateY(-2px);
}

.btn--ghost {
	background: transparent;
	color: var(--color-heading);
}

.btn--ghost:hover {
	background: var(--color-heading);
	border-color: var(--color-heading);
	color: var(--color-inverse-text);
}

.btn--light {
	background: transparent;
	border-color: rgba(255, 255, 255, 0.6);
	color: var(--color-inverse-text);
}

.btn--light:hover {
	background: var(--color-inverse-text);
	border-color: var(--color-inverse-text);
	color: var(--color-heading);
}

.btn--accent {
	background: var(--color-accent);
	border-color: var(--color-accent);
	color: var(--color-inverse-text);
}

.btn--accent:hover {
	background: var(--color-accent-dark);
	border-color: var(--color-accent-dark);
}

/* Underlined text link with animated rule — used for "Learn more" */
.link-more {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	color: var(--color-heading);
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
	text-decoration: none;
}

.link-more::after {
	content: "";
	width: 2.5em;
	height: 1px;
	background: currentColor;
	transition: width var(--dur-base) var(--ease);
}

.link-more:hover::after { width: 4em; }

/* ==========================================================================
   HEADER — centred logo, off-canvas drawer trigger (matches original)
   ========================================================================== */
.site-header {
	position: relative;
	z-index: var(--z-header);
	background: var(--color-background);
	border-bottom: var(--border-hairline);
}

.site-header__inner {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: var(--space-sm);
	min-height: 60px;
	padding-block: 15px;
	padding-inline: var(--edge-padding);
}

.site-header__start { justify-self: start; }
.site-header__center { justify-self: center; }
.site-header__end {
	display: flex;
	align-items: center;
	gap: var(--space-xs);
	justify-self: end;
}

/* Sticky-on-scroll behaviour */
.site-header--sticky {
	position: sticky;
	top: 0;
}

.site-header.is-stuck {
	box-shadow: 0 1px 20px rgba(0, 0, 0, 0.07);
}

.site-branding__link {
	display: block;
	text-decoration: none;
}

.site-branding img {
	width: auto;
	max-height: 46px;
	object-fit: contain;
}

.site-branding__text {
	font-family: var(--font-heading);
	font-size: var(--fs-lg);
	font-weight: var(--fw-bold);
	letter-spacing: var(--ls-wider);
	text-transform: uppercase;
	color: var(--color-heading);
}

/* Hamburger / close buttons */
.icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--color-heading);
	cursor: pointer;
	transition: color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}

.icon-btn:hover { color: var(--color-accent); }
.icon-btn svg { width: 24px; height: 24px; }

/* -------------------------------------------------------------- drawer --- */
.drawer-overlay {
	position: fixed;
	inset: 0;
	z-index: var(--z-drawer-overlay);
	background: rgba(0, 0, 0, 0.4);
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--dur-base) var(--ease), visibility var(--dur-base) var(--ease);
}

.drawer-overlay.is-open {
	opacity: 1;
	visibility: visible;
}

.drawer {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	z-index: var(--z-drawer);
	width: min(100%, var(--drawer-width));
	display: flex;
	flex-direction: column;
	background: var(--color-background);
	transform: translateX(-100%);
	visibility: hidden;
	transition: transform var(--dur-slow) var(--ease-out), visibility var(--dur-slow) var(--ease-out);
	overflow-y: auto;
	overscroll-behavior: contain;
}

.drawer.is-open {
	transform: translateX(0);
	visibility: visible;
}

.drawer__head {
	display: flex;
	justify-content: flex-end;
	padding: var(--space-md) var(--space-md) 0;
}

.drawer__body {
	padding: clamp(1.5rem, 4vw, 3.75rem) clamp(1.25rem, 3vw, 1.875rem) 5rem;
}

/* Welcome panel — the original places this inside the drawer, over an image */
.drawer__welcome {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	min-height: 22vh;
	margin-bottom: var(--space-lg);
	padding: var(--space-sm);
	border-radius: var(--radius-md);
	overflow: hidden;
	background-color: var(--color-heading);
	background-size: cover;
	background-position: 42% 16%;
	color: var(--color-inverse-text);
	isolation: isolate;
}

.drawer__welcome::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	opacity: 0.7;
	background-image: linear-gradient(304deg, rgba(0, 0, 0, 0.05) 45%, rgb(0, 0, 0) 100%);
}

.drawer__welcome-title {
	margin: 0;
	color: var(--color-inverse-text);
	font-size: var(--fs-lg);
	font-weight: var(--fw-semibold);
	line-height: 1.4;
	text-transform: uppercase;
}

.drawer__welcome-sub {
	margin: 0;
	font-size: var(--fs-base);
	line-height: 1.4;
	color: rgba(255, 255, 255, 0.9);
}

/* Drawer navigation */
.drawer-nav ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.drawer-nav > ul > li {
	border-bottom: var(--border-hairline);
}

.drawer-nav > ul > li > .menu-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-2xs);
}

.drawer-nav a {
	display: block;
	padding: 0.9rem 0;
	color: var(--color-heading);
	font-size: 1.4rem;
	font-weight: var(--fw-semibold);
	line-height: 1.4;
	letter-spacing: 0.02em;
	text-decoration: none;
	text-transform: uppercase;
}

.drawer-nav a:hover,
.drawer-nav .current-menu-item > .menu-row > a,
.drawer-nav .current_page_item > .menu-row > a {
	color: var(--color-accent);
}

.drawer-nav .submenu-toggle {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	background: transparent;
	color: inherit;
	cursor: pointer;
}

.drawer-nav .submenu-toggle svg {
	width: 14px;
	height: 14px;
	transition: transform var(--dur-base) var(--ease);
}

.drawer-nav .submenu-toggle[aria-expanded="true"] svg {
	transform: rotate(180deg);
}

/* Product sub-menu — two columns, mirrors the original mega menu */
.drawer-nav .sub-menu {
	display: none;
	padding-bottom: var(--space-sm);
}

.drawer-nav .sub-menu.is-open {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 var(--space-sm);
}

.drawer-nav .sub-menu a {
	padding: 0.45rem 0;
	font-size: var(--fs-sm);
	font-weight: var(--fw-regular);
	letter-spacing: 0;
	text-transform: none;
	color: var(--color-text);
}

.drawer-nav .sub-menu a:hover { color: var(--color-accent); }

.drawer__meta {
	margin-top: var(--space-xl);
	font-size: var(--fs-sm);
	color: var(--color-muted);
}

.drawer__meta a { color: var(--color-text); }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: clamp(420px, 82vh, 900px);
	padding-block: clamp(3rem, 8vw, 6rem);
	overflow: hidden;
	background: var(--color-heading);
	color: var(--color-inverse-text);
	isolation: isolate;
}

.hero__media {
	position: absolute;
	inset: 0;
	z-index: -2;
}

.hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Slow reveal on load */
	transform: scale(1.06);
	animation: hero-reveal var(--dur-reveal) var(--ease-out) forwards;
}

@keyframes hero-reveal {
	to { transform: scale(1); }
}

/*
 * Two stacked scrims. Seollure's product photography is mostly white product
 * on pale concrete, so a bottom-only gradient leaves the left-aligned white
 * hero copy on a near-white background. The second, horizontal scrim keeps the
 * text side dark enough for AA contrast whatever the slide shows.
 */
.hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image:
		linear-gradient(0deg, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.18) 55%, rgba(0, 0, 0, 0.3) 100%),
		linear-gradient(90deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.12) 45%, rgba(0, 0, 0, 0) 70%);
}

.hero__inner {
	width: 100%;
	max-width: var(--container-width);
	margin-inline: auto;
	padding-inline: var(--edge-padding);
}

.hero__eyebrow {
	color: rgba(255, 255, 255, 0.82);
	margin-bottom: var(--space-xs);
}

.hero__title {
	max-width: 22ch;
	margin: 0 0 var(--space-sm);
	color: var(--color-inverse-text);
	font-size: var(--fs-3xl);
	font-weight: var(--fw-semibold);
	line-height: var(--lh-tight);
}

.hero__text {
	max-width: 56ch;
	color: rgba(255, 255, 255, 0.86);
	font-size: var(--fs-md);
}

.hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs);
	margin-top: var(--space-lg);
}

/* Hero slider */
.hero-slider {
	position: relative;
	/* Safety net for the zero-slide-image fallback: every slide is absolutely
	   positioned, so nothing else reserves the section's height. */
	min-height: clamp(420px, 82vh, 900px);
	overflow: hidden;
	background: var(--color-heading);
}

/* Static overlay: sits on top of every slide so the headline, text and CTA
   never fade with the rotating background image. */
.hero-slider__content {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	align-items: flex-end;
	padding-block: clamp(3rem, 8vw, 6rem);
}

.hero-slider__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 1.2s var(--ease);
	pointer-events: none;
}

.hero-slider__slide.is-active {
	position: relative;
	opacity: 1;
	pointer-events: auto;
}

.hero-slider__dots {
	position: absolute;
	left: 50%;
	bottom: var(--space-md);
	z-index: 3;
	display: flex;
	gap: var(--space-2xs);
	transform: translateX(-50%);
}

.hero-slider__dot {
	width: 40px;
	height: 3px;
	padding: 0;
	border: 0;
	background: rgba(255, 255, 255, 0.4);
	cursor: pointer;
	transition: background var(--dur-base) var(--ease);
}

.hero-slider__dot[aria-selected="true"] { background: var(--color-inverse-text); }

/* Page hero (interior pages) */
.page-hero {
	position: relative;
	display: flex;
	align-items: center;
	min-height: clamp(260px, 42vh, 480px);
	padding-block: var(--space-2xl);
	background: var(--color-surface);
	color: var(--color-heading);
	overflow: hidden;
	isolation: isolate;
}

.page-hero--media {
	background: var(--color-heading);
	color: var(--color-inverse-text);
}

.page-hero--media .page-hero__title,
.page-hero--media .eyebrow { color: var(--color-inverse-text); }

.page-hero--media::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: rgba(0, 0, 0, 0.42);
}

.page-hero__media {
	position: absolute;
	inset: 0;
	z-index: -2;
}

.page-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.page-hero__title {
	margin: 0;
	font-size: var(--fs-2xl);
	font-weight: var(--fw-semibold);
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
}

.page-hero__text {
	max-width: 58ch;
	margin-top: var(--space-xs);
}

/* ==========================================================================
   HOME — editorial sections
   ========================================================================== */

/* Brand intro: three value statements */
.intro-grid {
	--intro-gap: clamp(1.5rem, 3vw, 3rem);
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--intro-gap);
}

@media (min-width: 1024px) {
	.intro-grid {
		/* Fixed 3-up grid (this section always renders exactly 3 cards,
		   see intro_1../intro_3.. in the customizer) so columns stay
		   exactly equal instead of drifting with auto-fit's track count. */
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.intro-card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

/* Desktop only: a hairline between columns once the grid actually renders
   three across. Below that, cards stack and a vertical rule has nothing
   to separate. 1024px is this stylesheet's existing desktop breakpoint;
   the three-column grid itself reflows a little earlier (~930px), so this
   stays safely inside the range where three columns are always present.
   A soft top/bottom fade reads as more deliberate than a hard-edged rule
   that just touches the icon and text. Offsetting by half the grid gap
   (rather than sitting flush at left:0) centers the rule inside the gap,
   so it's equidistant from both neighboring columns — flush-left made the
   middle column read as off-center, hugging its left divider while a full
   gap's worth of empty space sat before the right one. */
@media (min-width: 1024px) {
	.intro-card:not(:first-child)::before {
		content: "";
		position: absolute;
		inset-block: 8% 8%;
		left: calc(var(--intro-gap) / -2);
		width: 1px;
		background: linear-gradient(
			to bottom,
			transparent,
			var(--color-border) 15%,
			var(--color-border) 85%,
			transparent
		);
	}
}

.intro-card__icon {
	width: 72px;
	height: 72px;
	margin-inline: auto;
	margin-bottom: var(--space-2xs);
}

.intro-card__icon img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.intro-card__title {
	display: flex;
	align-items: start;
	justify-content: center;
	/* Reserve room for the tallest heading (2 lines) so every card's
	   divider and body copy start at the same Y, while text still wraps
	   naturally instead of being forced onto one line. */
	min-height: calc(2em * var(--lh-heading));
	font-size: var(--fs-lg);
	font-weight: var(--fw-semibold);
	line-height: var(--lh-heading);
}

.intro-card__text {
	max-width: 30ch;
	margin-inline: auto;
	color: var(--color-text);
	font-size: var(--fs-base);
}

.intro-card__text::before {
	content: "";
	display: block;
	width: 32px;
	height: 2px;
	margin: 0 auto var(--space-sm);
	background: var(--color-gold);
}

.intro-cta {
	display: flex;
	justify-content: center;
	margin-top: clamp(2rem, 4vw, 3.5rem);
}

/* Oversized editorial heading */
.editorial {
	text-align: center;
}

.editorial__title {
	margin: 0;
	font-size: var(--fs-editorial);
	font-weight: var(--fw-semibold);
	line-height: 1.02;
	letter-spacing: -0.02em;
	text-transform: uppercase;
}

.editorial__sub {
	margin-top: var(--space-md);
	color: var(--color-muted);
	font-size: var(--fs-md);
}

/* Split image + text */
.split {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
	align-items: center;
	gap: clamp(1.5rem, 4vw, 4.5rem);
}

.split--reverse .split__media { order: 2; }

.split__media {
	position: relative;
	overflow: hidden;
	border-radius: var(--radius-md);
	aspect-ratio: 4 / 3;
}

.split__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--dur-slow) var(--ease);
}

.split__media:hover img { transform: scale(1.05); }

.split__title {
	font-size: var(--fs-2xl);
	margin-bottom: var(--space-sm);
}

/* Full-bleed lifestyle band with parallax-ish drift */
.lifestyle {
	position: relative;
	display: flex;
	align-items: center;
	min-height: clamp(320px, 60vh, 640px);
	padding-block: var(--space-2xl);
	overflow: hidden;
	background: var(--color-heading);
	color: var(--color-inverse-text);
	isolation: isolate;
	text-align: center;
}

.lifestyle__media {
	position: absolute;
	inset: -8% 0;
	z-index: -2;
	will-change: transform;
}

.lifestyle__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Only applied when more than one slide image is configured; a single
   .lifestyle__media (here or on the reused .lifestyle section in
   manifesto.php) is unaffected and keeps rendering at full opacity. */
.lifestyle__media--slide {
	opacity: 0;
	transition: opacity 1.2s var(--ease);
}

.lifestyle__media--slide.is-active {
	opacity: 1;
}

.lifestyle::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: rgba(0, 0, 0, 0.4);
}

.lifestyle__title {
	max-width: 26ch;
	margin-inline: auto;
	color: var(--color-inverse-text);
	font-size: var(--fs-2xl);
	line-height: var(--lh-heading);
}

.lifestyle__text {
	max-width: 60ch;
	margin: var(--space-sm) auto 0;
	color: rgba(255, 255, 255, 0.86);
}

/* Full-bleed two-image split banner, no text overlay */
.split-banner {
	display: grid;
	grid-template-columns: 1fr 1fr;
}

.split-banner__panel {
	position: relative;
	overflow: hidden;
	height: clamp(220px, 32vw, 420px);
}

.split-banner__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (max-width: 640px) {
	.split-banner {
		grid-template-columns: 1fr;
	}

	.split-banner__panel {
		height: clamp(220px, 60vw, 360px);
	}
}

/* ==========================================================================
   PRODUCT CARDS — image-swap on hover, gradient overlay (as original)
   ========================================================================== */
.product-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
	gap: clamp(0.75rem, 1.6vw, 1.5rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.product-grid--2 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); }

.product-card {
	position: relative;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: clamp(280px, 34vw, 420px);
	padding: var(--space-sm);
	border-radius: var(--radius-md);
	overflow: hidden;
	background-color: var(--color-surface);
	color: var(--color-inverse-text);
	isolation: isolate;
	transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
}

.product-card:hover,
.product-card:focus-within {
	transform: translateY(-4px);
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.16);
}

/* Base and hover images stacked; hover cross-fades to the second image. */
.product-card__img {
	position: absolute;
	inset: 0;
	z-index: -3;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
}

.product-card__img--hover {
	z-index: -2;
	opacity: 0;
}

.product-card:hover .product-card__img--hover,
.product-card:focus-within .product-card__img--hover { opacity: 1; }

.product-card:hover .product-card__img,
.product-card:focus-within .product-card__img { transform: scale(1.04); }

/*
 * The original uses a 304deg corner gradient here. That darkens the top-right
 * while the card title sits bottom-left, which is unreadable over Seollure's
 * pale product shots — so the direction is flipped to bottom-up and the
 * corner wash is kept as a second layer for the same visual feel.
 */
.product-card::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	opacity: 1;
	background-image:
		linear-gradient(to top, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.34) 42%, rgba(0, 0, 0, 0.04) 78%),
		linear-gradient(304deg, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.45) 100%);
	transition: opacity var(--dur-base) var(--ease);
}

.product-card:hover::after,
.product-card:focus-within::after { opacity: 0.92; }

.product-card__title {
	margin: 0;
	color: var(--color-inverse-text);
	font-size: var(--fs-lg);
	font-weight: var(--fw-semibold);
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.product-card__title a {
	color: inherit;
	text-decoration: none;
}

/* Stretched hit area keeps the whole card clickable without nesting links. */
.product-card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
}

.product-card__excerpt {
	margin: var(--space-3xs) 0 0;
	color: rgba(255, 255, 255, 0.88);
	font-size: var(--fs-sm);
	line-height: 1.5;
}

.product-card__cta {
	margin-top: var(--space-2xs);
	color: rgba(255, 255, 255, 0.9);
	font-size: var(--fs-xs);
	font-weight: var(--fw-semibold);
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
}

.product-card__badge {
	position: absolute;
	top: var(--space-sm);
	left: var(--space-sm);
	z-index: 3;
	padding: 0.35em 0.85em;
	border-radius: var(--radius-pill);
	background: var(--color-accent);
	color: var(--color-inverse-text);
	font-size: var(--fs-xs);
	font-weight: var(--fw-semibold);
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
}

/* Horizontal scrolling carousel variant */
.product-scroller {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(240px, 28%);
	gap: var(--space-sm);
	margin: 0;
	padding: 0 var(--edge-padding) var(--space-sm);
	list-style: none;
	min-width: 0;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	overscroll-behavior-x: contain;
	scrollbar-width: thin;
}

.product-scroller > li { scroll-snap-align: start; }

.scroller-wrap { position: relative; }

.scroller-nav {
	display: flex;
	gap: var(--space-2xs);
	justify-content: flex-end;
	max-width: var(--container-width);
	margin: 0 auto var(--space-sm);
	padding-inline: var(--edge-padding);
}

.scroller-nav[hidden] { display: none; }

.scroller-nav button {
	width: 44px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--color-border);
	border-radius: 50%;
	background: transparent;
	color: var(--color-heading);
	cursor: pointer;
	transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.scroller-nav button:hover {
	background: var(--color-heading);
	color: var(--color-inverse-text);
}

.scroller-nav button[disabled] {
	opacity: 0.35;
	cursor: default;
}

/* ==========================================================================
   PRODUCT ARCHIVE — filters
   ========================================================================== */
.filter-bar {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2xs);
	margin-bottom: var(--space-lg);
	padding: 0;
	list-style: none;
	border-bottom: var(--border-hairline);
	padding-bottom: var(--space-md);
}

.filter-bar__link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0.5em 1.25em;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-pill);
	background: transparent;
	color: var(--color-text);
	font-size: var(--fs-sm);
	font-weight: var(--fw-medium);
	letter-spacing: 0.04em;
	text-decoration: none;
	text-transform: uppercase;
	cursor: pointer;
	transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease),
		border-color var(--dur-fast) var(--ease);
}

.filter-bar__link:hover {
	border-color: var(--color-heading);
	color: var(--color-heading);
}

.filter-bar__link[aria-current="page"],
.filter-bar__link.is-active {
	background: var(--color-heading);
	border-color: var(--color-heading);
	color: var(--color-inverse-text);
}

.result-count {
	margin-bottom: var(--space-md);
	color: var(--color-muted);
	font-size: var(--fs-sm);
}

/* ==========================================================================
   SINGLE PRODUCT
   ========================================================================== */
.product-hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: clamp(400px, 72vh, 820px);
	padding-block: clamp(2.5rem, 6vw, 5rem);
	overflow: hidden;
	background: var(--color-heading);
	color: var(--color-inverse-text);
	isolation: isolate;
}

.product-hero__media { position: absolute; inset: 0; z-index: -2; }

.product-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.product-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(0deg, rgba(0, 0, 0, 0.66) 0%, rgba(0, 0, 0, 0.1) 60%, rgba(0, 0, 0, 0.25) 100%);
}

.product-hero__title {
	margin: 0 0 var(--space-2xs);
	color: var(--color-inverse-text);
	font-size: var(--fs-3xl);
	font-weight: var(--fw-semibold);
	text-transform: uppercase;
	letter-spacing: 0.01em;
}

.product-hero__tagline {
	max-width: 40ch;
	margin: 0;
	color: rgba(255, 255, 255, 0.92);
	font-size: var(--fs-lg);
}

.product-hero__cat {
	display: inline-block;
	margin-bottom: var(--space-xs);
	color: rgba(255, 255, 255, 0.8);
	font-size: var(--fs-xs);
	font-weight: var(--fw-semibold);
	letter-spacing: var(--ls-wider);
	text-transform: uppercase;
	text-decoration: none;
}

.product-intro {
	max-width: 68ch;
	font-size: var(--fs-md);
}

/* Product gallery */
.gallery {
	display: grid;
	gap: var(--space-sm);
	/* minmax(0, …) rather than 1fr: a grid item defaults to min-width:auto, so
	   the horizontally scrolling thumb strip would otherwise widen the track to
	   its full content width and push the page sideways on narrow screens. */
	grid-template-columns: minmax(0, 1fr);
}

.gallery__main {
	position: relative;
	overflow: hidden;
	border-radius: var(--radius-md);
	background: var(--color-surface);
	aspect-ratio: 4 / 3;
}

.gallery__main img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.gallery__thumbs {
	display: flex;
	gap: var(--space-2xs);
	min-width: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
}

.gallery__thumb {
	/* Positioned so the nested .screen-reader-text (position:absolute) anchors
	   here instead of the document — otherwise the off-screen label lands past
	   the viewport edge and extends the page horizontally. */
	position: relative;
	flex: 0 0 auto;
	width: 84px;
	padding: 0;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	background: none;
	cursor: pointer;
	overflow: hidden;
	scroll-snap-align: start;
	transition: border-color var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}

.gallery__thumb img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
}

.gallery__thumb[aria-current="true"] {
	border-color: var(--color-heading);
}

.gallery__thumb:not([aria-current="true"]) { opacity: 0.65; }
.gallery__thumb:hover { opacity: 1; }

/* Ingredient cards */
.ingredient-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
	gap: clamp(1rem, 2.5vw, 2rem);
}

.ingredient-card__media {
	margin-bottom: var(--space-sm);
	overflow: hidden;
	border-radius: var(--radius-md);
	aspect-ratio: 3 / 2;
	background: var(--color-background);
}

.ingredient-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--dur-slow) var(--ease);
}

.ingredient-card:hover .ingredient-card__media img { transform: scale(1.05); }

.ingredient-card__title {
	margin-bottom: var(--space-3xs);
	font-size: var(--fs-md);
	font-weight: var(--fw-semibold);
}

.ingredient-card__text {
	color: var(--color-text);
	font-size: var(--fs-sm);
	line-height: 1.7;
}

/* Effect / how-to blocks */
.effect-line {
	font-size: var(--fs-xl);
	font-weight: var(--fw-semibold);
	color: var(--color-heading);
	margin-bottom: var(--space-sm);
}

.steps {
	counter-reset: step;
	margin: 0;
	padding: 0;
	list-style: none;
}

.steps li {
	position: relative;
	padding: var(--space-sm) 0 var(--space-sm) 3.25rem;
	border-bottom: var(--border-hairline);
	counter-increment: step;
}

.steps li:last-child { border-bottom: 0; }

.steps li::before {
	content: counter(step, decimal-leading-zero);
	position: absolute;
	top: var(--space-sm);
	left: 0;
	color: var(--color-accent);
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
	letter-spacing: var(--ls-wide);
}

/* Spec list */
.spec-list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
	gap: var(--space-md);
	margin: 0;
	padding: 0;
}

.spec-list div {
	padding-top: var(--space-xs);
	border-top: 1px solid var(--color-heading);
}

.spec-list dt {
	color: var(--color-muted);
	font-size: var(--fs-xs);
	font-weight: var(--fw-semibold);
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
}

.spec-list dd {
	margin: var(--space-3xs) 0 0;
	color: var(--color-heading);
	font-size: var(--fs-base);
}

/* Reviews */
.review-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
	gap: clamp(1rem, 2.5vw, 2rem);
}

.review-card {
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
	padding: var(--space-md);
	/* Tinted, so the cards read as cards on the white reviews band. */
	background: var(--color-surface);
	border: var(--border-hairline);
	border-radius: var(--radius-md);
}

/* Inverted when the band itself is tinted. */
.section--surface .review-card { background: var(--color-background); }

.review-card__body {
	color: var(--color-text);
	font-size: var(--fs-sm);
	line-height: 1.7;
}

.review-card__author {
	display: flex;
	align-items: center;
	gap: var(--space-2xs);
	margin-top: auto;
	color: var(--color-heading);
	font-size: var(--fs-xs);
	font-weight: var(--fw-semibold);
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
}

.review-card__avatar {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	object-fit: cover;
}

/* ==========================================================================
   ACCORDION (FAQ / expandable education content)
   ========================================================================== */
.accordion {
	border-top: 1px solid var(--color-heading);
}

.accordion__item { border-bottom: var(--border-hairline); }

.accordion__trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-sm);
	width: 100%;
	min-height: 56px;
	padding: var(--space-sm) 0;
	border: 0;
	background: none;
	color: var(--color-heading);
	font-family: var(--font-heading);
	font-size: var(--fs-md);
	font-weight: var(--fw-semibold);
	line-height: 1.5;
	text-align: left;
	cursor: pointer;
}

.accordion__trigger:hover { color: var(--color-accent); }

.accordion__icon {
	position: relative;
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
}

.accordion__icon::before,
.accordion__icon::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: 1.5px;
	background: currentColor;
	transition: transform var(--dur-base) var(--ease);
}

.accordion__icon::after { transform: rotate(90deg); }

.accordion__trigger[aria-expanded="true"] .accordion__icon::after {
	transform: rotate(0deg);
}

.accordion__panel {
	overflow: hidden;
	height: 0;
	transition: height var(--dur-base) var(--ease);
}

.accordion__panel-inner {
	padding-bottom: var(--space-md);
	color: var(--color-text);
	font-size: var(--fs-base);
}

/* Show more / less */
.show-more__content {
	position: relative;
	overflow: hidden;
	transition: max-height var(--dur-slow) var(--ease);
}

.show-more__content[data-collapsed="true"] {
	max-height: 11em;
}

.show-more__content[data-collapsed="true"]::after {
	content: "";
	position: absolute;
	inset: auto 0 0;
	height: 5em;
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--color-background));
	pointer-events: none;
}

.section--surface .show-more__content[data-collapsed="true"]::after {
	background: linear-gradient(to bottom, rgba(246, 245, 242, 0), var(--color-surface));
}

.show-more__btn { margin-top: var(--space-md); }

/* ==========================================================================
   NEWS
   ========================================================================== */
.news-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
	gap: clamp(1.25rem, 3vw, 2.5rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.news-card { display: flex; flex-direction: column; }

.news-card__media {
	position: relative;
	margin-bottom: var(--space-sm);
	overflow: hidden;
	border-radius: var(--radius-md);
	background: var(--color-surface);
	aspect-ratio: 3 / 2;
}

.news-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--dur-slow) var(--ease);
}

.news-card:hover .news-card__media img { transform: scale(1.05); }

.news-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2xs);
	margin-bottom: var(--space-2xs);
	color: var(--color-muted);
	font-size: var(--fs-xs);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.news-card__cat {
	color: var(--color-accent);
	font-weight: var(--fw-semibold);
	text-decoration: none;
}

.news-card__title {
	margin: 0;
	font-size: var(--fs-md);
	font-weight: var(--fw-semibold);
	line-height: 1.45;
}

.news-card__title a {
	position: relative;
	color: inherit;
	text-decoration: none;
}

.news-card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.news-card__excerpt {
	margin-top: var(--space-2xs);
	color: var(--color-text);
	font-size: var(--fs-sm);
	line-height: 1.7;
}

/* News list rows (homepage) */
.news-rows {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--color-heading);
}

.news-row {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 96px;
	align-items: center;
	gap: var(--space-md);
	padding: var(--space-md) 0;
	border-bottom: var(--border-hairline);
	transition: background var(--dur-base) var(--ease);
}

.news-row:hover { background: var(--color-surface); }

.news-row__media {
	overflow: hidden;
	border-radius: var(--radius-sm);
	aspect-ratio: 1;
}

.news-row__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--dur-slow) var(--ease);
}

.news-row:hover .news-row__media img { transform: scale(1.06); }

/* Article body */
.entry-content {
	max-width: 78ch;
	font-size: var(--fs-md);
}

.entry-content > * + * { margin-top: var(--space-md); }

.entry-content h2 {
	margin-top: var(--space-xl);
	font-size: var(--fs-xl);
}

.entry-content h3 {
	margin-top: var(--space-lg);
	font-size: var(--fs-lg);
}

.entry-content img { border-radius: var(--radius-md); }

.entry-content figcaption {
	margin-top: var(--space-2xs);
	color: var(--color-muted);
	font-size: var(--fs-sm);
}

.entry-meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-sm);
	margin-bottom: var(--space-md);
	color: var(--color-muted);
	font-size: var(--fs-sm);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* Post navigation */
.post-nav {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
	gap: var(--space-sm);
	margin-top: var(--space-2xl);
	padding-top: var(--space-lg);
	border-top: var(--border-hairline);
}

.post-nav__link {
	display: block;
	padding: var(--space-md);
	border: var(--border-hairline);
	border-radius: var(--radius-md);
	text-decoration: none;
	transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}

.post-nav__link:hover {
	border-color: var(--color-heading);
	background: var(--color-surface);
}

.post-nav__dir {
	display: block;
	margin-bottom: var(--space-3xs);
	color: var(--color-muted);
	font-size: var(--fs-xs);
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
}

.post-nav__title {
	color: var(--color-heading);
	font-size: var(--fs-base);
	font-weight: var(--fw-semibold);
}

.post-nav--next { text-align: right; }

/* Pagination */
.pagination {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2xs);
	justify-content: center;
	margin-top: var(--space-2xl);
}

.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 var(--space-2xs);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-pill);
	color: var(--color-text);
	font-size: var(--fs-sm);
	text-decoration: none;
	transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease),
		border-color var(--dur-fast) var(--ease);
}

.pagination .page-numbers:hover,
.pagination .page-numbers.current {
	background: var(--color-heading);
	border-color: var(--color-heading);
	color: var(--color-inverse-text);
}

/* ==========================================================================
   FORMS / CONTACT
   ========================================================================== */
.contact-layout {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
	gap: clamp(1.5rem, 4vw, 4rem);
	align-items: start;
}

.form-field { margin-bottom: var(--space-md); }

.form-field label {
	display: block;
	margin-bottom: var(--space-3xs);
	color: var(--color-heading);
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
	letter-spacing: 0.03em;
}

.form-field .required { color: var(--color-accent); }

.form-field input[type="text"],
.form-field input[type="email"],
.form-field input[type="tel"],
.form-field select,
.form-field textarea {
	width: 100%;
	min-height: 48px;
	padding: 0.7em 0.9em;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	background: var(--color-background);
	color: var(--color-heading);
	font-family: var(--font-body);
	font-size: var(--fs-base);
	transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}

.form-field textarea {
	min-height: 160px;
	resize: vertical;
	line-height: 1.7;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
	border-color: var(--color-heading);
	outline: 0;
	box-shadow: 0 0 0 3px rgba(17, 17, 17, 0.08);
}

.form-field input[aria-invalid="true"],
.form-field textarea[aria-invalid="true"],
.form-field select[aria-invalid="true"] {
	border-color: var(--color-accent);
}

.field-error {
	display: block;
	margin-top: var(--space-3xs);
	color: var(--color-accent-dark);
	font-size: var(--fs-sm);
	font-weight: var(--fw-medium);
}

.form-field--consent {
	display: flex;
	align-items: flex-start;
	gap: var(--space-2xs);
}

.form-field--consent input { margin-top: 0.35em; }

.form-field--consent label {
	margin: 0;
	font-weight: var(--fw-regular);
	font-size: var(--fs-sm);
	line-height: 1.6;
	color: var(--color-text);
}

/* Honeypot — hidden from users, visible to naive bots. */
.form-hp {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.form-notice {
	margin-bottom: var(--space-md);
	padding: var(--space-sm) var(--space-md);
	border-left: 3px solid;
	border-radius: var(--radius-sm);
	font-size: var(--fs-sm);
}

.form-notice--success {
	border-color: #13612e;
	background: rgba(19, 97, 46, 0.07);
	color: #0f4a24;
}

.form-notice--error {
	border-color: var(--color-accent);
	background: rgba(213, 37, 32, 0.06);
	color: var(--color-accent-dark);
}

.form-notice ul { margin: var(--space-2xs) 0 0; }

.contact-details {
	padding: var(--space-lg);
	background: var(--color-surface);
	border-radius: var(--radius-md);
}

.contact-details dl {
	margin: 0;
	display: grid;
	gap: var(--space-md);
}

.contact-details dt {
	color: var(--color-muted);
	font-size: var(--fs-xs);
	font-weight: var(--fw-semibold);
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
}

.contact-details dd {
	margin: var(--space-3xs) 0 0;
	color: var(--color-heading);
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer {
	padding-top: var(--section-y);
	background: var(--color-surface);
	color: var(--color-text);
	font-size: var(--fs-sm);
}

.site-footer__top {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) repeat(auto-fit, minmax(150px, 1fr));
	gap: clamp(1.5rem, 3vw, 3rem);
	padding-bottom: var(--space-2xl);
}

.site-footer__brand img {
	max-height: 40px;
	width: auto;
	margin-bottom: var(--space-sm);
}

.site-footer__blurb {
	max-width: 40ch;
	color: var(--color-text);
}

.site-footer__company {
	margin-top: var(--space-md);
	line-height: 1.9;
}

.site-footer__company strong {
	display: block;
	color: var(--color-heading);
	font-weight: var(--fw-semibold);
}

.site-footer__col-title {
	margin-bottom: var(--space-sm);
	color: var(--color-heading);
	font-size: var(--fs-xs);
	font-weight: var(--fw-semibold);
	letter-spacing: var(--ls-wider);
	text-transform: uppercase;
}

.site-footer ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-footer li + li { margin-top: var(--space-2xs); }

.site-footer a {
	color: var(--color-text);
	text-decoration: none;
}

.site-footer a:hover {
	color: var(--color-accent);
	text-decoration: underline;
}

.social-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2xs);
}

.social-list li + li { margin-top: 0; }

.social-list a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 1px solid var(--color-border);
	border-radius: 50%;
	transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease),
		border-color var(--dur-fast) var(--ease);
}

.social-list a:hover {
	background: var(--color-heading);
	border-color: var(--color-heading);
	color: var(--color-inverse-text);
	text-decoration: none;
}

.social-list svg { width: 18px; height: 18px; }

.site-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-sm);
	padding-block: var(--space-md);
	border-top: 1px solid var(--color-border-strong);
	color: var(--color-muted);
	font-size: var(--fs-xs);
}

.site-footer__policies {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-md);
}

.site-footer__policies li + li { margin-top: 0; }

/* Back to top */
.to-top {
	position: fixed;
	right: clamp(1rem, 3vw, 2rem);
	bottom: clamp(1rem, 3vw, 2rem);
	z-index: var(--z-sticky);
	width: 48px;
	height: 48px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--color-border-strong);
	border-radius: 50%;
	background: var(--color-background);
	color: var(--color-heading);
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(12px);
	transition: opacity var(--dur-base) var(--ease), visibility var(--dur-base) var(--ease),
		transform var(--dur-base) var(--ease), background var(--dur-fast) var(--ease);
}

.to-top.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.to-top:hover {
	background: var(--color-heading);
	color: var(--color-inverse-text);
}

.to-top svg { width: 18px; height: 18px; }

/* ==========================================================================
   404 / search / misc
   ========================================================================== */
.error-404 {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--space-md);
	min-height: 60vh;
	padding-block: var(--section-y);
	text-align: center;
}

.error-404__code {
	margin: 0;
	font-size: var(--fs-editorial);
	font-weight: var(--fw-semibold);
	line-height: 1;
	letter-spacing: -0.03em;
}

.error-404__links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs);
	justify-content: center;
}

.breadcrumbs {
	margin-bottom: var(--space-md);
	color: var(--color-muted);
	font-size: var(--fs-xs);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2xs);
	margin: 0;
	padding: 0;
	list-style: none;
}

.breadcrumbs li + li::before {
	content: "/";
	margin-right: var(--space-2xs);
	color: var(--color-border-strong);
}

.breadcrumbs a { text-decoration: none; }

.no-results {
	padding-block: var(--space-2xl);
	text-align: center;
	color: var(--color-muted);
}

/* Gutenberg alignment helpers */
.alignwide { width: 100%; }
.alignfull { width: 100%; }
.aligncenter { margin-inline: auto; text-align: center; }
.wp-caption { max-width: 100%; }

/* ==========================================================================
   SCROLL ANIMATIONS
   ========================================================================== */
[data-animate] {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
	transition-delay: var(--animate-delay, 0ms);
}

[data-animate].is-visible {
	opacity: 1;
	transform: none;
}

[data-animate="fade"] { transform: none; }

[data-animate="scale"] {
	transform: scale(0.96);
}

/* Never leave content hidden if JS fails to load or is unavailable. */
.no-js [data-animate] {
	opacity: 1;
	transform: none;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (min-width: 700px) {
	.gallery {
		grid-template-columns: 1fr;
	}

	.news-row {
		grid-template-columns: 140px minmax(0, 1fr) 120px;
	}

	.news-row__media { order: -1; }
}

@media (min-width: 1024px) {
	.product-scroller { grid-auto-columns: minmax(280px, 24%); }
	.gallery__thumb { width: 96px; }
}

@media (max-width: 1023px) {
	:root { --header-height: 76px; }
}

@media (max-width: 767px) {
	:root {
		--section-y: clamp(2.5rem, 8vw, 4rem);
	}

	.split--reverse .split__media { order: 0; }

	.site-footer__top {
		grid-template-columns: 1fr;
		gap: var(--space-lg);
	}

	.site-footer__bottom {
		flex-direction: column;
		align-items: flex-start;
	}

	.post-nav--next { text-align: left; }

	.news-row {
		grid-template-columns: 80px minmax(0, 1fr);
		row-gap: var(--space-2xs);
	}

	.news-row__date { grid-column: 2; }

	.product-card { min-height: 300px; }

	.filter-bar { padding-bottom: var(--space-sm); }
}

@media (max-width: 480px) {
	.product-grid { grid-template-columns: 1fr; }
	.hero, .hero-slider { min-height: 78vh; }
	.drawer-nav a { font-size: 1.2rem; }
	.drawer-nav .sub-menu.is-open { grid-template-columns: 1fr; }
}

/* ==========================================================================
   REDUCED MOTION — the site must be fully usable with animation disabled
   ========================================================================== */
@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;
	}

	[data-animate] {
		opacity: 1 !important;
		transform: none !important;
	}

	.hero__media img { animation: none; transform: none; }
	.lifestyle__media { transform: none !important; }

	.product-card:hover,
	.product-card:focus-within { transform: none; }

	.split__media:hover img,
	.news-card:hover .news-card__media img,
	.ingredient-card:hover .ingredient-card__media img { transform: none; }
}

/* ------------------------------------------------------------------ print - */
@media print {
	.site-header,
	.site-footer,
	.drawer,
	.drawer-overlay,
	.to-top,
	.filter-bar { display: none !important; }

	body { color: #000; }
}