/*
 * FEVA SOUL — design system + homepage components.
 * Tokens are derived directly from the approved reference image
 * (references/fevasoul-homepage-reference.png.png): a warm, restrained,
 * editorial monochrome palette where photography carries the color, and a
 * single grotesque sans (Inter) carries all live text at varying
 * weight/tracking. The logo itself is a raster asset — see header.php —
 * so no serif is declared here.
 */

:root {
	/* Color */
	--color-ink: #141414;
	--color-paper: #ffffff;
	--color-cream: #f7f4ef;
	--color-sand: #ededea;
	--color-line: #e3dfd7;
	--color-muted: #6b6862;

	/* Type */
	--font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;

	/* Spacing scale */
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 20px;
	--space-6: 24px;
	--space-8: 32px;
	--space-10: 40px;
	--space-12: 48px;
	--space-16: 64px;
	--space-20: 80px;
	--space-24: 96px;
	--space-30: 120px;

	/* Layout */
	--page-margin: var(--space-16);
	--section-padding-y: var(--space-24);
	--container-max: 1440px;
	--header-height: 88px;
	--announcement-height: 40px;
}

@media (max-width: 1024px) {
	:root {
		--page-margin: var(--space-6);
		--section-padding-y: var(--space-16);
	}
}

@media (max-width: 480px) {
	:root {
		--page-margin: var(--space-4);
		--section-padding-y: var(--space-12);
	}
}

/* ---------- Base ---------- */

body {
	font-family: var(--font-sans);
	background: var(--color-paper);
	color: var(--color-ink);
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

h1, h2, h3 {
	margin: 0;
	font-weight: 800;
	letter-spacing: -0.01em;
	line-height: 1;
}

p {
	margin: 0;
}

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

*:focus-visible {
	outline: 2px solid var(--color-ink);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.001ms !important;
		transition-duration: 0.001ms !important;
	}
}

.icon {
	display: block;
	flex-shrink: 0;
}

/* ---------- Buttons ---------- */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-4) var(--space-6);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	border: 1px solid var(--color-ink);
	white-space: nowrap;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.btn--primary {
	background: var(--color-ink);
	color: var(--color-paper);
}

.btn--primary:hover {
	background: #000;
}

.btn--outline {
	background: transparent;
	color: var(--color-ink);
}

.btn--outline:hover {
	background: var(--color-ink);
	color: var(--color-paper);
}

/*
 * Commerce CTA geometry — one system for the customer-facing commerce
 * buttons: sticky PDP Add to Bag, cart-drawer View Bag/Checkout/Shop New
 * In, cart-page Checkout, and the checkout Place Order button (which is
 * WooCommerce-native and carries no .btn class, so it gets the same
 * geometry plus the ink fill here). Matches the approved PDP Add to Bag
 * pill: 999px radius, 48px height, 0.8125rem/700/0.1em uppercase.
 * Deliberately scoped to commerce CTAs — icon buttons (search, wishlist,
 * cart, close, quantity steppers, carousel arrows) and non-commerce
 * links are excluded. Primary=filled ink / secondary=outline distinction
 * comes from .btn--primary/.btn--outline and is unchanged.
 */
.sticky-add-to-bag__cta,
.cart-drawer__actions .btn,
.cart-drawer__empty .btn,
.cart-totals__action .btn,
.woocommerce-checkout #place_order {
	border-radius: 999px;
	height: 48px;
	padding: 0 var(--space-8);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.1em;
}

.woocommerce-checkout #place_order {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	/* WC core styles #place_order with a 3-ID selector; !important is
	   required to take over its geometry/chrome. */
	float: none !important;
	width: 100% !important;
	height: 48px !important;
	padding: 0 var(--space-8) !important;
	border-radius: 999px !important;
	font-size: 0.8125rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.1em !important;
	text-transform: uppercase !important;
	background: var(--color-ink) !important;
	color: var(--color-paper) !important;
	border: 1px solid var(--color-ink) !important;
	box-shadow: none !important;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.woocommerce-checkout #place_order:hover {
	background: #000 !important;
}

.woocommerce-checkout #place_order:focus-visible {
	outline: 2px solid var(--color-ink);
	outline-offset: 3px;
}

/* ---------- Announcement bar marquee ---------- */

.announcement-bar {
	background: var(--color-ink);
	color: var(--color-paper);
	min-height: var(--announcement-height);
	display: flex;
	align-items: center;
	overflow: hidden; /* clip the scrolling track */
	padding: 0;       /* padding moved to track so it doesn't break overflow clip */
}

.announcement-bar__track {
	display: flex;
	white-space: nowrap;
	/* Two copies of the text side-by-side so the loop is seamless */
	animation: marquee-scroll 28s linear infinite;
}

.announcement-bar__item {
	flex-shrink: 0;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	padding: var(--space-2) var(--space-8);
}

@keyframes marquee-scroll {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
	.announcement-bar__track {
		animation: none;
	}
	.announcement-bar {
		justify-content: center;
		padding: var(--space-2) var(--space-4);
	}
}

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

.site-header {
	position: sticky;
	top: 0;
	z-index: 40;
	background: var(--color-paper);
	border-bottom: 1px solid var(--color-line);
}

.site-header__inner {
	max-width: var(--container-max);
	margin: 0 auto;
	min-height: var(--header-height);
	padding: var(--space-3) var(--page-margin);
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: var(--space-4);
}

.site-header__brand {
	grid-column: 2;
	justify-self: center;
	display: block;
	line-height: 0;
}

/* Word logo — all pages (homepage + interior) */
.site-header__brand .site-header__logo--word,
.site-header__brand img.site-header__logo--word {
	display: block;
	height: 66px;
	max-height: 66px;
	width: auto;
	max-width: 360px;
	/* Asset is white on transparent — invert to black on white headers */
	filter: brightness(0);
}

.site-header__nav {
	grid-column: 1;
}

.primary-menu {
	display: flex;
	align-items: center;
	gap: var(--space-6);
	list-style: none;
	margin: 0;
	padding: 0;
}

.primary-menu a {
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	color: var(--color-ink);
	padding-bottom: var(--space-1);
	border-bottom: 1px solid transparent;
	transition: border-color 0.2s ease;
}

.primary-menu a:hover {
	border-bottom-color: var(--color-ink);
}

.site-header__icons {
	grid-column: 3;
	justify-self: end;
	display: flex;
	align-items: center;
	gap: var(--space-4);
}

.site-header__icon-btn {
	position: relative;
	display: inline-flex;
	background: none;
	border: none;
	padding: var(--space-1);
	color: var(--color-ink);
	cursor: pointer;
}

.site-header__cart-count,
.site-header__wishlist-count {
	position: absolute;
	top: -6px;
	right: -8px;
	min-width: 16px;
	height: 16px;
	padding: 0 3px;
	border-radius: 8px;
	background: var(--color-ink);
	color: var(--color-paper);
	font-size: 10px;
	font-weight: 700;
	line-height: 16px;
	text-align: center;
}

/* Zero is "no wishlist" — the badge stays out of the DOM-visible flow
   (PHP and wishlist.js both render an empty span at 0) so no stray 0
   appears on the header icons or floating at the end of the fullscreen
   menu's Wishlist row. */
.site-header__wishlist-count:empty {
	display: none;
}

.site-header__menu-toggle {
	display: none;
	grid-column: 1;
	justify-self: start;
	background: none;
	border: none;
	padding: var(--space-1);
	color: var(--color-ink);
	cursor: pointer;
}

.icon--menu-close {
	display: none;
}

.site-header__menu-toggle[aria-expanded="true"] .icon--menu-open {
	display: none;
}

.site-header__menu-toggle[aria-expanded="true"] .icon--menu-close {
	display: block;
}

.site-search {
	display: none;
	max-width: var(--container-max);
	margin: 0 auto;
	padding: 0 var(--page-margin) var(--space-4);
}

.site-search.is-open {
	display: block;
}

.site-search input[type="search"] {
	width: 100%;
	padding: var(--space-3) var(--space-6);
	border: 1px solid var(--color-line);
	border-radius: 999px;
	background: var(--color-cream);
	font-family: var(--font-sans);
	font-size: 14px;
	/*
	 * Safari gives input[type="search"] its own native chrome and ignores
	 * border-radius on it; without this the field stays square on iOS.
	 */
	-webkit-appearance: none;
	appearance: none;
}

/*
 * From tablet up the search panel reads as a centred composition instead of a
 * field dragged across the viewport — the whole panel is constrained, so the
 * "or" divider and the photo control below inherit the same measure for free.
 * min() keeps a gutter on narrow windows; the side padding is dropped here so
 * the cap is the field's real width. Below 768px the padding-based
 * near-full-width layout above is left as it is.
 */
@media (min-width: 768px) {
	.site-search {
		width: min(100% - 96px, 760px);
		padding-inline: 0;
	}
}

/* Wishlist pulse keyframe — scale 1→1.2→1 in 150ms */
@keyframes wishlist-pulse {
	0%   { transform: scale(1); }
	50%  { transform: scale(1.2); }
	100% { transform: scale(1); }
}

.product-card__wishlist.is-pulsing {
	animation: wishlist-pulse 150ms ease-in-out both;
}

/* Product-grid entrance stagger — CSS-driven, no library.
   JS sets --card-i on each .product-card at DOM-ready so
   delay steps without touching the HTML. */
@keyframes card-enter {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: translateY(0); }
}

.product-card.will-animate {
	opacity: 0;
	animation: card-enter 0.3s ease both;
	animation-delay: calc(var(--card-i, 0) * 0.03s);
}

@media (prefers-reduced-motion: reduce) {
	.product-card__wishlist.is-pulsing {
		animation: none;
	}
	.product-card.will-animate {
		opacity: 1;
		animation: none;
	}
}

/* ---------- Mobile nav full-screen overlay ---------- */

.mobile-nav {
	position: fixed;
	inset: 0;
	/*
	 * Above the homepage's fixed announcement bar (z-index 200 in
	 * home-hero.css). On interior pages the announcement bar is static
	 * and the overlay covers it at any z-index; on the homepage the bar
	 * is position:fixed and painted OVER a z-150 overlay, clipping the
	 * top-right close button. 300 puts the open menu above every fixed
	 * chrome layer.
	 */
	z-index: 300;
	background: var(--color-ink);
	display: flex;
	flex-direction: column;
	overflow-y: auto;
	/* Keep scroll gestures inside the menu from chaining to the page. */
	overscroll-behavior: contain;
	/* Safe-area insets keep content clear of the notch and home indicator. */
	padding:
		calc(var(--space-6) + env(safe-area-inset-top, 0px))
		calc(var(--space-6) + env(safe-area-inset-right, 0px))
		calc(var(--space-8) + env(safe-area-inset-bottom, 0px))
		calc(var(--space-6) + env(safe-area-inset-left, 0px));
	opacity: 1;
	transition: opacity 0.25s ease;
}

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

/* Existing white-on-transparent wordmark, centered at the top of the menu.
   Rendered unfiltered — the asset is natively white, unlike the header
   which inverts it to black with brightness(0). */
.mobile-nav__brand {
	display: block;
	align-self: center;
	margin-bottom: var(--space-8);
	line-height: 0;
}

.mobile-nav__brand img {
	display: block;
	height: 40px;
	width: auto;
}

/* Close control — visually light 16px X inside a 44px touch target.
   position: fixed (not absolute) so it stays on screen even if the menu
   content ever scrolls on a short device. */
.mobile-nav__close {
	position: fixed;
	top: calc(var(--space-5) + env(safe-area-inset-top, 0px));
	right: calc(var(--space-5) + env(safe-area-inset-right, 0px));
	background: none;
	border: none;
	color: var(--color-paper);
	padding: var(--space-4);
	cursor: pointer;
	line-height: 0;
}

.mobile-nav__close .icon {
	width: 16px;
	height: 16px;
}

.mobile-nav__close:focus-visible {
	outline: 2px solid var(--color-paper);
	outline-offset: 3px;
}

/* Primary menu items — large Cormorant editorial typography */
.mobile-nav .primary-menu {
	flex-direction: column;
	/* stretch (not flex-start): shrink-fit li's made each link's full-row
	   separator only as wide as its label — the uneven short underlines. */
	align-items: stretch;
	gap: 0;
	list-style: none;
	margin: 0;
	padding: 0;
	width: 100%;
}

.mobile-nav .primary-menu a {
	display: block;
	/* 10px (not a scale token): ~15% tighter than space-3, tuned so six
	   links + the utility rows fit a normal iPhone viewport. */
	padding: 10px 0;
	width: 100%;
	font-family: var(--font-display);
	/* ~30px at 390px — 8-10% under the previously approved 8.5vw scale. */
	font-size: clamp(28px, 7.7vw, 33px);
	font-weight: 400;
	letter-spacing: 0.01em;
	text-transform: none;
	color: var(--color-paper);
	text-decoration: none;
	/* One consistent full-row separator alpha for the whole menu. */
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	transition: opacity 0.15s ease;
}

.mobile-nav .primary-menu a:hover,
.mobile-nav .primary-menu a:focus-visible {
	opacity: 0.7;
}

.mobile-nav__utility {
	margin-top: var(--space-6);
}

.mobile-nav__utility-link {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-4) 0;
	width: 100%;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.65);
	text-decoration: none;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/*
 * The shared .site-header__wishlist-count badge is absolute (top:-6px,
 * right:-8px) and needs a positioned parent. This wrapper gives it the
 * same anchor the closed header's .site-header__icon-btn provides, so the
 * count hugs the heart icon instead of floating at the row's far edge —
 * and stays well inside the overlay (no horizontal overflow).
 */
.mobile-nav__icon-anchor {
	position: relative;
	display: inline-flex;
}

.mobile-nav__utility-link .icon {
	width: 18px;
	height: 18px;
}

@media (max-width: 1024px) {
	.site-header__menu-toggle {
		display: block;
	}

	.site-header__nav {
		display: none;
	}

	.site-header__inner {
		grid-template-columns: auto 1fr auto;
	}
}

@media (max-width: 480px) {
	/* Word logo scales down on narrow mobile (51px reads level with the
	   icon row; 47px rendered slightly too delicate next to it). */
	.site-header__brand .site-header__logo--word,
	.site-header__brand img.site-header__logo--word {
		height: 51px !important;
		max-height: 51px !important;
		max-width: 260px !important;
	}

	/* Below ~390px the wordmark's 153px plus the five icons no longer fit:
	   the 1fr track cannot shrink under its content, so the icon row spilled
	   past the right gutter and pushed the cart-count badge off-screen. Let
	   the brand box shrink and the wordmark scale down proportionally to the
	   space left; at 390px and up the 51px cap still applies, so it is
	   unchanged there. */
	.site-header__brand {
		min-width: 0;
	}

	.site-header__brand .site-header__logo--word,
	.site-header__brand img.site-header__logo--word {
		height: auto !important;
		max-width: 100% !important;
	}

	.site-header__icons {
		gap: var(--space-3);
	}

	/*
	 * Account icon (inside .site-header__icons-secondary) shows on mobile
	 * too — five 24px icons fit next to the full-size 51px wordmark at
	 * 375-430px only if the buttons' side padding tightens from 4px to 2px
	 * (28px touch targets still clear WCAG 2.5.8's 24px minimum). Previously
	 * this block hid the Account icon entirely to make room.
	 */
	.site-header__menu-toggle,
	.site-header__icon-btn {
		padding: 2px;
	}

	.mobile-nav__utility {
		display: block;
	}
}

/* ---------- Hero — full-screen cinematic ---------- */

.hero {
	position: relative;
	width: 100%;
	height: calc(100svh - var(--announcement-height));
	min-height: 560px;
	overflow: hidden;
	background: var(--color-ink);
}

.hero__track {
	position: absolute;
	inset: 0;
}

.hero__slide {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: flex-end;
}

.hero__slide[hidden] {
	display: none;
}

.hero__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 20%;
}

.hero__image--placeholder {
	background: linear-gradient(160deg, #1a1209, #2e1e0e);
}

.hero__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to bottom,
		rgba(0,0,0,0.08) 0%,
		rgba(0,0,0,0.0) 35%,
		rgba(0,0,0,0.45) 75%,
		rgba(0,0,0,0.72) 100%
	);
	pointer-events: none;
}

.hero__content {
	position: relative;
	z-index: 2;
	width: 100%;
	padding: var(--space-20) var(--space-16) var(--space-20);
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	color: #fff;
}

.hero__eyebrow {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: rgba(255,255,255,0.75);
}

.hero__headline {
	display: flex;
	flex-direction: column;
	font-family: var(--font-display);
	font-size: clamp(60px, 7vw, 110px);
	font-weight: 500;
	line-height: 0.95;
	letter-spacing: -0.01em;
	text-transform: none;
	color: #fff;
}

.hero__body {
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(255,255,255,0.8);
	margin-top: var(--space-2);
}

.hero__ctas {
	display: flex;
	gap: var(--space-3);
	margin-top: var(--space-4);
	flex-wrap: wrap;
}

.btn--hero {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding: 14px 32px;
	background: rgba(255,255,255,0.12);
	color: #fff;
	border: 1px solid rgba(255,255,255,0.5);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: none;
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	transition: background 0.2s ease, border-color 0.2s ease;
}

.btn--hero:hover {
	background: rgba(255,255,255,0.22);
	border-color: rgba(255,255,255,0.8);
}

.btn--hero:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}

.hero__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1px solid rgba(255,255,255,0.4);
	background: rgba(0,0,0,0.3);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	backdrop-filter: blur(4px);
}

.hero__arrow--prev { left: var(--space-6); }
.hero__arrow--next { right: var(--space-6); }

.hero__dots {
	position: absolute;
	left: var(--space-16);
	bottom: var(--space-8);
	display: flex;
	gap: var(--space-2);
	z-index: 3;
}

.hero__dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	border: 1px solid rgba(255,255,255,0.6);
	background: transparent;
	padding: 0;
	cursor: pointer;
}

.hero__dot.is-active {
	background: #fff;
	border-color: #fff;
}

/* Scroll indicator */
.hero__scroll-indicator {
	position: absolute;
	bottom: var(--space-8);
	left: 50%;
	transform: translateX(-50%);
	z-index: 3;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-2);
	color: rgba(255,255,255,0.65);
	cursor: pointer;
}

.hero__scroll-label {
	font-size: 9px;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

.hero__scroll-line {
	width: 1px;
	height: 32px;
	background: rgba(255,255,255,0.4);
	position: relative;
	overflow: hidden;
}

.hero__scroll-line::after {
	content: '';
	position: absolute;
	top: -100%;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(255,255,255,0.9);
	animation: hero-scroll-line 1.8s ease-in-out infinite;
}

@keyframes hero-scroll-line {
	0%   { top: -100%; }
	100% { top: 100%; }
}

/* Hero text entrance — fade + rise 18px, fires once on load */
@keyframes hero-enter {
	from { opacity: 0; transform: translateY(18px); }
	to   { opacity: 1; transform: translateY(0); }
}

.hero__content {
	animation: hero-enter 700ms 200ms ease-out both;
}

@media (prefers-reduced-motion: reduce) {
	.hero__content {
		animation: none;
	}
	.hero__scroll-line::after {
		animation: none;
		top: 0;
	}
}

@media (max-width: 1024px) {
	.hero__content {
		padding: var(--space-16) var(--space-6) var(--space-16);
	}

	.hero__dots {
		left: var(--space-6);
	}
}

@media (max-width: 480px) {
	.hero__headline {
		font-size: clamp(40px, 10vw, 56px);
	}

	.hero__content {
		padding: var(--space-12) var(--space-4) var(--space-12);
	}

	.hero__scroll-indicator {
		display: none;
	}
}



/* ---------- Campaign Video ---------- */

.campaign-video {
	position: relative;
	width: 100%;
	background: var(--color-ink);
	overflow: hidden;
}

.campaign-video__media {
	position: relative;
	aspect-ratio: 16 / 7;
	min-height: 320px;
}

.campaign-video__video,
.campaign-video__poster {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.campaign-video__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to bottom,
		rgba(0,0,0,0.1) 0%,
		rgba(0,0,0,0.4) 100%
	);
	pointer-events: none;
}

.campaign-video__content {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--space-3);
	color: #fff;
	text-align: center;
	padding: var(--space-12) var(--page-margin);
	z-index: 2;
}

.campaign-video__headline {
	display: flex;
	flex-direction: column;
	font-size: clamp(48px, 7vw, 110px);
	font-weight: 800;
	line-height: 0.92;
	letter-spacing: -0.02em;
	text-transform: uppercase;
	color: #fff;
}

.campaign-video__brand {
	font-size: clamp(14px, 2vw, 22px);
	font-weight: 700;
	letter-spacing: 0.25em;
	text-transform: uppercase;
	color: rgba(255,255,255,0.85);
	margin-top: var(--space-2);
}

.campaign-video__subtext {
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: rgba(255,255,255,0.6);
}

.campaign-video__pause {
	position: absolute;
	bottom: var(--space-5);
	right: var(--space-5);
	z-index: 3;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 1px solid rgba(255,255,255,0.4);
	background: rgba(0,0,0,0.3);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	backdrop-filter: blur(4px);
}

.campaign-video__pause:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.campaign-video__video {
		animation: none;
	}
}

@media (max-width: 1024px) {
	.campaign-video__media {
		aspect-ratio: 4 / 3;
	}
}

@media (max-width: 480px) {
	.campaign-video__media {
		aspect-ratio: 3 / 4;
		min-height: 420px;
	}
}

/* ---------- Trust bar ---------- */

.trust-bar {
	border-bottom: 1px solid var(--color-line);
	background: var(--color-paper);
}

.trust-bar__list {
	max-width: var(--container-max);
	margin: 0 auto;
	padding: var(--space-6) var(--page-margin);
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-6);
	list-style: none;
}

.trust-bar__item {
	display: flex;
	align-items: center;
	gap: var(--space-3);
}

.trust-bar__icon {
	color: var(--color-ink);
}

.trust-bar__text {
	display: flex;
	flex-direction: column;
}

.trust-bar__title {
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.trust-bar__subtitle {
	font-size: 12px;
	color: var(--color-muted);
}

@media (max-width: 768px) {
	.trust-bar__list {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 390px) {
	.trust-bar__list {
		grid-template-columns: 1fr;
	}
}

/* ---------- Shop by category — 4 edge-to-edge tall tiles ---------- */

.category-grid-section {
	width: 100%;
	overflow: hidden;
}

.category-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 2px;
}

/*
 * Count-aware desktop layouts (see category-grid.php, which adds the
 * modifier from the live tile count). The approved 4-tile layout is the
 * default above and is untouched; 3/5/6 tiles fill their row intentionally
 * instead of leaving a blank 4th/6th column, and 7+ wraps in rows of 4.
 * The mobile/tablet overrides further down come later in the file and keep
 * winning over these at narrow widths.
 */
.category-grid--3 {
	grid-template-columns: repeat(3, 1fr);
}

.category-grid--5 {
	grid-template-columns: repeat(5, 1fr);
}

.category-grid--6 {
	grid-template-columns: repeat(6, 1fr);
}

.category-card {
	position: relative;
	display: block;
	aspect-ratio: 2 / 3;
	overflow: hidden;
	text-decoration: none;
	color: #fff;
	background: var(--color-ink);
}

.category-card__media {
	position: absolute;
	inset: 0;
}

.category-card__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
	transition: transform 0.6s ease;
}

.category-card:hover .category-card__image {
	transform: scale(1.05);
}

.category-card__image--placeholder {
	background: linear-gradient(160deg, #2a2a2a, #0c0c0c);
}

.category-card__label {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: var(--space-6) var(--space-4) var(--space-5);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-1);
	text-align: center;
	background: linear-gradient(to top, rgba(0,0,0,0.65) 0%, transparent 100%);
}

.category-card__name {
	font-size: 18px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.category-card__cta {
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	opacity: 0.8;
}

.category-grid-section__footer {
	display: none;
}

@media (max-width: 1024px) {
	.category-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 2px;
	}
}

@media (max-width: 480px) {
	.category-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 2px;
	}

	.category-card {
		aspect-ratio: 3 / 4;
	}
}



/* ---------- New In ---------- */

.new-in {
	max-width: var(--container-max);
	margin: 0 auto;
	padding: 0 var(--page-margin) var(--section-padding-y);
}

.new-in__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: var(--space-6);
}

.new-in__title {
	font-size: 22px;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.new-in__controls {
	display: flex;
	align-items: center;
	gap: var(--space-4);
}

.new-in__view-all {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--color-ink);
}

.new-in__arrow {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: 1px solid var(--color-line);
	background: var(--color-paper);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

.new-in__track {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-4);
}

@media (max-width: 1024px) {
	.new-in__track {
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: 45%;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		padding-bottom: var(--space-2);
	}

	.new-in__item {
		scroll-snap-align: start;
	}
}

@media (max-width: 480px) {
	.new-in__track {
		grid-auto-columns: 72%;
	}
}

/* --- New In density selector --- */

.new-in__density {
	display: flex;
	align-items: center;
	gap: 2px;
}

.new-in__density-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	padding: 0;
	border: 1px solid transparent;
	border-radius: 3px;
	background: transparent;
	cursor: pointer;
	color: var(--color-ink-muted, #999);
	transition: color 0.15s ease, border-color 0.15s ease;
}

.new-in__density-btn svg {
	fill: currentColor;
}

.new-in__density-btn:hover {
	color: var(--color-ink);
}

.new-in__density-btn:focus-visible {
	outline: 2px solid var(--color-ink);
	outline-offset: 2px;
}

.new-in__density-btn[aria-pressed="true"] {
	color: var(--color-ink);
	border-color: var(--color-line);
}

/* Hide density selector on tablet/mobile — responsive grid takes over */
@media (max-width: 1024px) {
	.new-in__density {
		display: none;
	}
}

/* --- New In desktop grid density modes (desktop only, ≥1025px) --- */

/* Default / 4-column mode */
@media (min-width: 1025px) {
	.new-in__track[data-columns="4"],
	.new-in__track {
		grid-template-columns: repeat(4, 1fr);
	}

	.new-in__track[data-columns="4"] .product-card__media,
	.new-in__track .product-card__media {
		aspect-ratio: 2 / 3 !important;
	}

	/* 3-column mode — larger cards, taller portrait ratio */
	.new-in__track[data-columns="3"] {
		grid-template-columns: repeat(3, 1fr);
	}

	.new-in__track[data-columns="3"] .product-card__media {
		aspect-ratio: 2 / 3 !important;
	}
}


/* Mirrors New In's structure/behavior exactly (rail on mobile, grid on
   desktop) but on its own class namespace rather than reusing `.new-in` —
   duplicated deliberately, matching the project's own precedent for small,
   scoped duplication over touching approved M2 markup/CSS for a later
   milestone's reason. 4 columns (vs New In's 6) since this section's
   default count is 8, giving a clean 2-row grid instead of an uneven wrap. */

.featured-products {
	max-width: var(--container-max);
	margin: 0 auto;
	padding: 0 var(--page-margin) var(--section-padding-y);
}

.featured-products__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: var(--space-6);
}

.featured-products__title {
	font-size: 22px;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.featured-products__controls {
	display: flex;
	align-items: center;
	gap: var(--space-4);
}

.featured-products__view-all {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--color-ink);
}

.featured-products__arrow {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: 1px solid var(--color-line);
	background: var(--color-paper);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

/*
 * Carousel arrows: force FEVA ink/neutral chrome. Without an explicit
 * color the chevron inherits from the UA button default, and iOS Safari
 * paints its default blue-grey tap overlay on these buttons — both read
 * as "browser blue" on-device. Scoped to the reported arrow groups only
 * (hero keeps its existing color treatment; tap overlay only).
 * Keyboard focus stays on the global *:focus-visible ink outline.
 */
.new-in__arrow,
.featured-products__arrow {
	color: var(--color-ink);
	transition: border-color 0.15s ease, background 0.15s ease;
}

.hero__arrow,
.new-in__arrow,
.featured-products__arrow {
	-webkit-tap-highlight-color: transparent;
}

.new-in__arrow:hover,
.featured-products__arrow:hover {
	border-color: var(--color-ink);
}

.new-in__arrow:active,
.featured-products__arrow:active {
	background: var(--color-sand);
}

.new-in__arrow:disabled,
.featured-products__arrow:disabled {
	opacity: 0.4;
	cursor: default;
	pointer-events: none;
}

.featured-products__track {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-4);
}

@media (max-width: 1024px) {
	.featured-products__track {
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: 45%;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		padding-bottom: var(--space-2);
	}

	.featured-products__item {
		scroll-snap-align: start;
	}
}

@media (max-width: 480px) {
	.featured-products__track {
		grid-auto-columns: 72%;
	}
}

/* ---------- Product card ---------- */

/* New In grid items: stretch cards to row height so media frames
   align across all cards regardless of info-section content height. */
.new-in__item {
	display: flex;
	flex-direction: column;
}

.new-in__item .product-card {
	flex: 1;
	display: flex;
	flex-direction: column;
}

.new-in__item .product-card__media {
	flex-shrink: 0;
}

.new-in__item .product-card__info {
	flex: 1;
}

.product-card {
	position: relative;
	/* Lets the card shrink inside any grid/flex track instead of growing
	   to fit a long title. */
	min-width: 0;
}

.product-card__media {
	position: relative;
	display: block;
	aspect-ratio: 2 / 3;
	overflow: hidden;
	background: var(--color-sand);
}

.product-card__image,
.product-card__media > img {
	/* The bare img selector also pins a placeholder or filtered <img> that
	   arrives without the card class, so it can't size the 2:3 box itself. */
	position: absolute !important;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	transition: opacity 0.35s ease;
}

.product-card__image--hover {
	opacity: 0;
}

.product-card__media:hover .product-card__image--primary {
	opacity: 0;
}

.product-card__media:hover .product-card__image--hover {
	opacity: 1;
}

/* Sold out (WooCommerce stock status): only the photography is softened,
   to 65% opacity — no overlay, grayscale or blur. Opacity sits on the media
   box, never on the info text, price, badge, or the wishlist button, and the
   link stays clickable. */
.product-card--sold-out .product-card__media {
	opacity: 0.65;
}

/* One text badge between the image and the title — never over the photo.
   The slot is always rendered at a fixed height so titles and prices line
   up across a row whether or not a card has a badge. */
.product-card__badge-slot {
	display: block;
	height: 14px;
	line-height: 14px;
	overflow: hidden;
}

.product-card__badge {
	display: inline-block;
	font-size: 10px;
	line-height: 14px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--color-ink);
	white-space: nowrap;
}

.product-card__badge--sale {
	/* #a4342a: the muted red already used for the "red" colour swatch. */
	color: #a4342a;
}

.product-card__badge--sold-out {
	color: var(--color-muted);
}

@media (min-width: 768px) {
	.product-card__badge {
		font-size: 11px;
	}
}

.product-card__wishlist {
	position: absolute;
	top: var(--space-2);
	right: var(--space-2);
	z-index: 2;
	background: var(--color-paper);
	border: none;
	border-radius: 50%;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: var(--color-ink);
}

.product-card__wishlist[aria-pressed="true"] {
	color: #b1382f;
}

.product-card__info {
	padding-top: var(--space-2);
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
}

.product-card__name {
	font-size: 14px;
	line-height: 1.35;
	color: var(--color-ink);
	text-decoration: none;
	/* Up to two lines, always reserving two, so prices align across a row.
	   The hover swap to Cormorant italic can re-wrap the text but never
	   changes the box height: the clamp clips anything past line two. */
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
	overflow-wrap: anywhere;
	height: calc(2 * 1.35em);
	font-style: normal;
	font-family: var(--font-sans);
	transition: font-family 0s, font-style 0s;
}

.product-card:hover .product-card__name,
.product-card:focus-within .product-card__name {
	font-family: var(--font-display);
	font-style: italic;
}

.product-card__price {
	font-size: 14px;
	font-weight: 600;
	color: #44403C;
}

.product-card__price del {
	color: var(--color-muted);
	font-weight: 400;
	margin-right: var(--space-2);
}

.product-card__price ins {
	text-decoration: none;
	color: #A16207;
}

.product-card__swatches {
	display: flex;
	gap: var(--space-1);
	margin-top: var(--space-1);
}

.product-card__swatch {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	border: 1px solid var(--color-line);
	display: inline-block;
}

/* ---------- Editorial campaign ---------- */

.editorial {
	max-width: var(--container-max);
	margin: 0 auto;
	padding: var(--section-padding-y) var(--page-margin);
	display: grid;
	grid-template-columns: minmax(240px, 24%) 1fr;
	gap: var(--space-8);
	align-items: center;
}

.editorial__headline {
	display: flex;
	flex-direction: column;
	font-size: 34px;
	text-transform: uppercase;
	margin-bottom: var(--space-4);
}

.editorial__body {
	font-size: 15px;
	line-height: 1.6;
	color: var(--color-muted);
	margin-bottom: var(--space-6);
}

.editorial__images {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-3);
}

.editorial__image {
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
}

.editorial__image--placeholder {
	background: linear-gradient(160deg, var(--color-sand), var(--color-line));
}

@media (max-width: 1024px) {
	.editorial {
		grid-template-columns: 1fr;
	}

	.editorial__images {
		grid-template-columns: repeat(4, 1fr);
	}
}

@media (max-width: 480px) {
	.editorial__images {
		grid-auto-flow: column;
		grid-template-columns: none;
		grid-auto-columns: 60%;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
	}

	.editorial__image {
		scroll-snap-align: start;
	}

	.editorial__headline {
		font-size: 28px;
	}
}

/* ---------- Brand benefits ---------- */

.brand-benefits {
	background: var(--color-sand);
}

.brand-benefits__list {
	max-width: var(--container-max);
	margin: 0 auto;
	padding: var(--space-12) var(--page-margin);
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-6);
	list-style: none;
}

.brand-benefits__item {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-2);
}

.brand-benefits__icon {
	color: var(--color-ink);
}

.brand-benefits__title {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

.brand-benefits__text {
	font-size: 13px;
	color: var(--color-muted);
	line-height: 1.4;
}

@media (max-width: 768px) {
	.brand-benefits__list {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 390px) {
	.brand-benefits__list {
		grid-template-columns: 1fr;
	}
}

/* ---------- Footer (black multi-column) ---------- */

.site-footer {
	background: #000;
	color: #fff;
}

.site-footer__inner {
	max-width: var(--container-max);
	margin: 0 auto;
	padding: 64px var(--page-margin) 0;
}

/* Four-column grid: three nav cols + brand col */
.site-footer__columns {
	display: grid;
	grid-template-columns: repeat(3, 1fr) 200px;
	gap: var(--space-8);
	padding-bottom: 48px;
	border-bottom: 1px solid rgba(255,255,255,0.12);
}

/* Column heading / toggle button */
.site-footer__col-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	background: none;
	border: none;
	padding: 0;
	margin: 0 0 var(--space-5);
	cursor: default;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #a8a29e;
	font-family: var(--font-sans);
	text-align: left;
	pointer-events: none; /* desktop: not interactive */
}

.site-footer__col-icon {
	display: none; /* hidden on desktop */
}

/* Column links: always visible on desktop */
.site-footer__col-links {
	display: block !important; /* override hidden attr on desktop */
}

.site-footer__col-links ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

.site-footer__col-links a {
	font-size: 13px;
	color: rgba(255,255,255,0.85);
	text-decoration: none;
	transition: color 0.15s;
	letter-spacing: 0.01em;
}

.site-footer__col-links a:hover,
.site-footer__col-links a:focus-visible {
	color: #fff;
	outline: none;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Brand column */
.site-footer__col--brand {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-5);
}

.site-footer__brand {
	display: inline-block;
	line-height: 0;
}

.site-footer__logo {
	/* Explicit width so all pages render identically regardless of whether
	 * WooCommerce's height:auto !important is present (shop pages) or not.
	 * 200px = the brand column's fixed grid track width; height is always auto. */
	width: 200px;
	height: auto;
	max-width: 100%;
	display: block;
	filter: invert(1); /* black artwork on transparent → white on black footer */
}

/* Tagline under logo */
.site-footer__tagline {
	font-size: 11px;
	font-weight: 400;
	letter-spacing: 0.06em;
	color: rgba(255,255,255,0.38);
	margin: 0;
	line-height: 1.4;
}

/* Social icons */
.site-footer__social {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: var(--space-4);
}

.site-footer__social a {
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgba(255,255,255,0.7);
	transition: color 0.15s;
}

.site-footer__social a:hover,
.site-footer__social a:focus-visible {
	color: #fff;
	outline: none;
}

.site-footer__social svg {
	width: 18px;
	height: 18px;
}

/* Bottom bar */
.site-footer__bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	padding: var(--space-5) 0 var(--space-6);
	flex-wrap: wrap;
}

.site-footer__copyright {
	font-size: 11px;
	color: rgba(255,255,255,0.4);
	margin: 0;
	letter-spacing: 0.03em;
}

.site-footer__legal-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: var(--space-5);
	flex-wrap: wrap;
}

.site-footer__legal-nav a {
	font-size: 11px;
	color: rgba(255,255,255,0.4);
	text-decoration: none;
	letter-spacing: 0.03em;
	transition: color 0.15s;
}

.site-footer__legal-nav a:hover,
.site-footer__legal-nav a:focus-visible {
	color: rgba(255,255,255,0.8);
	outline: none;
}

/* ── Footer mobile: accordion ─────────────────────────────────────────────── */
@media (max-width: 768px) {
	.site-footer__inner {
		padding-top: 40px;
	}

	.site-footer__columns {
		grid-template-columns: 1fr;
		gap: 0;
		padding-bottom: 32px;
	}

	/* Brand col: move to top on mobile */
	.site-footer__col--brand {
		order: -1;
		flex-direction: column;
		align-items: flex-start;
		gap: var(--space-3);
		padding-bottom: var(--space-6);
		border-bottom: 1px solid rgba(255,255,255,0.1);
		margin-bottom: var(--space-2);
	}

	.site-footer__logo {
		height: auto;
		width: 120px; /* constrain by width on mobile — prevents full-viewport overflow */
		max-width: 40vw;
	}

	.site-footer__tagline {
		font-size: 10px;
	}

	/* Nav cols: accordion on mobile */
	.site-footer__col:not(.site-footer__col--brand) {
		border-bottom: 1px solid rgba(255,255,255,0.1);
	}

	.site-footer__col-toggle {
		cursor: pointer;
		pointer-events: auto;
		padding: var(--space-4) 0;
		margin: 0;
		font-size: 12px;
		color: #a8a29e;
		min-height: 44px;
	}

	.site-footer__col-icon {
		display: inline-block;
		width: 16px;
		height: 16px;
		position: relative;
		flex-shrink: 0;
	}

	/* + / − via pseudo-element cross */
	.site-footer__col-icon::before,
	.site-footer__col-icon::after {
		content: '';
		position: absolute;
		top: 50%;
		left: 50%;
		background: rgba(255,255,255,0.6);
		border-radius: 1px;
		transform: translate(-50%, -50%);
		transition: transform 0.2s, opacity 0.2s;
	}

	.site-footer__col-icon::before { width: 14px; height: 1.5px; }
	.site-footer__col-icon::after  { width: 1.5px; height: 14px; }

	/* When expanded: hide the vertical bar (becomes –) */
	.site-footer__col-toggle[aria-expanded="true"] .site-footer__col-icon::after {
		opacity: 0;
		transform: translate(-50%, -50%) scaleY(0);
	}

	/* On mobile, links are hidden by default and toggled via JS / aria-hidden */
	.site-footer__col-links[hidden] {
		display: none !important;
	}

	.site-footer__col-links:not([hidden]) {
		display: block !important;
	}

	.site-footer__col-links {
		padding-bottom: var(--space-4);
	}

	.site-footer__col-links ul {
		gap: var(--space-4);
	}

	.site-footer__col-links a {
		font-size: 14px;
		min-height: 44px;
		display: flex;
		align-items: center;
	}

	.site-footer__bottom {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--space-3);
		padding-top: var(--space-4);
	}
}

/* ── Interior page title (shared system) ────────────────────────────────── */

/*
 * One shell for every interior page H1 rendered through index.php
 * (Cart, Checkout, My Account, search results, plain pages): the title
 * sits in the same container grid as the page content instead of hugging
 * the viewport edge. Typography mirrors .archive-header__title so shop
 * and interior pages read as one system. Homepage hero/editorial
 * headings, PDP titles and product cards have their own typography and
 * must never receive this class.
 */

.page-heading {
	max-width: var(--container-max);
	margin: 0 auto;
	padding: var(--space-8) var(--page-margin) 0;
}

.page-heading__title {
	margin: 0;
	font-size: 28px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.01em;
}

@media (max-width: 767px) {
	.page-heading {
		padding-top: var(--space-6);
	}

	.page-heading__title {
		font-size: 22px;
	}
}

/* ── Static page template (About, etc.) ─────────────────────────────────── */

.fsc-static-page {
	padding: var(--section-padding-y) var(--page-margin);
}

.fsc-static-page__inner {
	max-width: 720px;
	margin: 0 auto;
}

.fsc-static-page__heading {
	font-size: clamp(28px, 5vw, 48px);
	margin-bottom: var(--space-8);
}

.fsc-static-page__image {
	margin-bottom: var(--space-8);
}

.fsc-static-page__image img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 4px;
}

.fsc-static-page__body {
	font-size: 16px;
	line-height: 1.7;
	color: var(--color-ink);
}

.fsc-static-page__body p {
	margin-bottom: var(--space-6);
}

.fsc-static-page__body p:last-child {
	margin-bottom: 0;
}

/* ── Owner-decision notices (draft copy placeholders) ──────────────────────── */

.fsc-owner-note {
	background: #fffbec;
	border-left: 3px solid #d97706;
	padding: var(--space-3) var(--space-4);
	margin: var(--space-4) 0;
	font-size: 13px;
	color: #92400e;
}

/* ── Return timeline component ─────────────────────────────────────────────── */

.fsc-return-timeline {
	border: 1px solid var(--color-line);
	margin: var(--space-6) 0;
}

.fsc-return-timeline__step {
	display: grid;
	grid-template-columns: 1fr 1.5fr;
	gap: var(--space-4);
	padding: var(--space-4) var(--space-5);
	border-bottom: 1px solid var(--color-line);
}

.fsc-return-timeline__step:last-child {
	border-bottom: none;
}

.fsc-return-timeline__label {
	font-size: 13px;
	font-weight: 600;
	color: var(--color-ink);
}

.fsc-return-timeline__value {
	font-size: 13px;
	color: var(--color-ink);
}

.fsc-return-timeline__step--closed .fsc-return-timeline__value {
	color: var(--color-muted);
}

@media (max-width: 480px) {
	.fsc-return-timeline__step {
		grid-template-columns: 1fr;
		gap: var(--space-1);
	}
}

/* ── Track order form ───────────────────────────────────────────────────────── */

.fsc-track-note {
	font-size: 13px;
	color: var(--color-muted);
	margin-top: var(--space-4);
}

/* ── Contact page ────────────────────────────────────────────────────────── */

/* Two-column layout: info left, form right */
.fsc-contact-layout {
	display: grid;
	grid-template-columns: 1fr 2fr;
	gap: var(--space-16, 64px);
	max-width: 960px;
	margin: 0 auto;
}

.fsc-contact-layout__info {
	padding-top: var(--space-2);
}

.fsc-contact-page__heading {
	font-size: clamp(28px, 5vw, 48px);
	margin: 0 0 var(--space-4);
}

.fsc-contact-page__lead {
	font-size: 16px;
	line-height: 1.7;
	color: var(--color-ink);
	margin: 0 0 var(--space-8);
}

.fsc-contact-channels {
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
}

.fsc-contact-channel__label {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-muted);
	margin: 0 0 var(--space-1);
}

.fsc-contact-channel__email {
	font-size: 14px;
	color: var(--color-ink);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Side-by-side form field pair */
.fsc-form-pair {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-4);
}

/* select shares visual style with pill inputs */
.fsc-form-field select {
	width: 100%;
	padding: 13px var(--space-6);
	padding-right: 44px;
	border: 1px solid var(--color-line);
	border-radius: 999px;
	background: var(--color-paper);
	font-family: var(--font-sans);
	font-size: 14px;
	color: var(--color-ink);
	box-sizing: border-box;
	transition: border-color 0.2s ease;
	-webkit-appearance: none;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23111'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right var(--space-5) center;
}

.fsc-form-field select:focus-visible {
	outline: none;
	border-color: var(--color-ink);
	box-shadow: 0 0 0 2px rgba(20, 20, 20, 0.08);
}

.fsc-form-required {
	color: var(--color-muted);
}

/* contact-form top margin removed: now handled by layout */
.fsc-static-page--contact .fsc-contact-form {
	margin-top: 0;
}

/* Pill-shaped submit button for contact form */
.fsc-contact-form .btn--primary {
	border-radius: 999px;
	padding: 13px var(--space-8);
	font-size: 13px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.fsc-contact-form .btn--primary:hover {
	box-shadow: 0 2px 12px rgba(20, 20, 20, 0.18);
}

.fsc-contact-form .btn--primary:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba(20, 20, 20, 0.2);
}

@media (max-width: 768px) {
	.fsc-contact-layout {
		grid-template-columns: 1fr;
		gap: var(--space-8);
	}

	.fsc-form-pair {
		grid-template-columns: 1fr;
	}
}

.fsc-form-notice {
	padding: var(--space-4) var(--space-6);
	margin-bottom: var(--space-6);
	font-size: 14px;
	border: 1px solid transparent;
}

.fsc-form-notice--success {
	background: #f0faf4;
	border-color: #a3d9b1;
	color: #1a5c30;
}

.fsc-form-notice--error {
	background: #fdf3f3;
	border-color: #e8b4b4;
	color: #7a2020;
}

.fsc-contact-form {
	margin-top: var(--space-8);
}

.fsc-form-field {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	margin-bottom: var(--space-6);
}

.fsc-form-field label {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-ink);
}

.fsc-form-field input[type="text"],
.fsc-form-field input[type="email"] {
	width: 100%;
	padding: 13px var(--space-6);
	border: 1px solid var(--color-line);
	border-radius: 999px;
	background: var(--color-paper);
	font-family: var(--font-sans);
	font-size: 14px;
	color: var(--color-ink);
	box-sizing: border-box;
	transition: border-color 0.2s ease;
}

.fsc-form-field input[type="text"]:focus-visible,
.fsc-form-field input[type="email"]:focus-visible {
	outline: none;
	border-color: var(--color-ink);
	box-shadow: 0 0 0 2px rgba(20, 20, 20, 0.08);
}

.fsc-form-field textarea {
	width: 100%;
	padding: var(--space-4) var(--space-5);
	border: 1px solid var(--color-line);
	border-radius: 18px;
	background: var(--color-paper);
	font-family: var(--font-sans);
	font-size: 14px;
	color: var(--color-ink);
	box-sizing: border-box;
	transition: border-color 0.2s ease;
	resize: vertical;
	min-height: 140px;
}

.fsc-form-field textarea:focus-visible {
	outline: none;
	border-color: var(--color-ink);
	box-shadow: 0 0 0 2px rgba(20, 20, 20, 0.08);
}

/* ── FAQ page accordion ──────────────────────────────────────────────────── */

.fsc-faq-list {
	margin-top: var(--space-8);
}

.fsc-faq-item {
	border-bottom: 1px solid var(--color-line);
}

.fsc-faq-item:first-child {
	border-top: 1px solid var(--color-line);
}

.fsc-faq-item h3 {
	margin: 0;
}

.fsc-faq-trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: var(--space-5) 0;
	background: none;
	border: none;
	font-family: var(--font-sans);
	font-size: 15px;
	font-weight: 600;
	color: var(--color-ink);
	text-align: left;
	cursor: pointer;
	gap: var(--space-4);
}

.fsc-faq-trigger:focus-visible {
	outline: 2px solid var(--color-ink);
	outline-offset: 2px;
}

.fsc-faq-trigger::after {
	content: '+';
	flex-shrink: 0;
	font-size: 20px;
	font-weight: 300;
	line-height: 1;
	transition: transform 0.2s ease;
}

.fsc-faq-trigger[aria-expanded="true"]::after {
	transform: rotate(45deg);
}

.fsc-faq-panel {
	padding-bottom: var(--space-6);
	font-size: 15px;
	line-height: 1.7;
	color: var(--color-ink);
}

.fsc-faq-panel p:last-child {
	margin-bottom: 0;
}

/* ── About page ──────────────────────────────────────────────────────────── */

.fsc-about-page {
	padding: 0 0 var(--section-padding-y);
}

.fsc-about-page__hero {
	padding: clamp(64px, 10vw, 120px) var(--page-margin);
	background: var(--color-ink);
	color: var(--color-paper);
	text-align: center;
}

.fsc-about-page__hero-inner {
	max-width: 680px;
	margin: 0 auto;
}

.fsc-about-page__eyebrow {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.6);
	margin: 0 0 var(--space-4);
}

.fsc-about-page__headline {
	font-family: var(--font-display);
	font-style: italic;
	font-weight: 400;
	font-size: clamp(36px, 6vw, 72px);
	line-height: 1.05;
	letter-spacing: -0.02em;
	color: var(--color-paper);
	margin: 0 0 var(--space-6);
}

.fsc-about-page__lead {
	font-size: 16px;
	line-height: 1.75;
	color: rgba(255, 255, 255, 0.8);
	margin: 0;
}

.fsc-about-page__body {
	max-width: 720px;
	margin: 0 auto;
	padding: var(--space-16, 64px) var(--page-margin);
	display: flex;
	flex-direction: column;
	gap: var(--space-12, 48px);
}

.fsc-about-page__section h2 {
	font-family: var(--font-display);
	font-style: italic;
	font-weight: 400;
	font-size: clamp(22px, 3vw, 32px);
	margin: 0 0 var(--space-4);
}

.fsc-about-page__section p {
	font-size: 16px;
	line-height: 1.75;
	color: var(--color-ink);
	margin: 0 0 var(--space-4);
}

.fsc-about-page__section p:last-child {
	margin-bottom: 0;
}

.fsc-about-page__section--values {
	border-top: 1px solid var(--color-line);
	padding-top: var(--space-10, 40px);
}

.fsc-about-page__values {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: var(--space-6);
	flex-wrap: wrap;
}

.fsc-about-page__values li {
	font-family: var(--font-display);
	font-style: italic;
	font-size: clamp(18px, 2.5vw, 26px);
	color: var(--color-ink);
}

.fsc-about-page__values-sub {
	font-size: 14px;
	color: var(--color-muted);
	margin: var(--space-5) 0 0;
	letter-spacing: 0.02em;
}

.fsc-about-page__cta {
	border-top: 1px solid var(--color-line);
	padding-top: var(--space-10, 40px);
	text-align: center;
}

.fsc-about-page__cta-label {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--color-muted);
	margin: 0 0 var(--space-5);
}

.fsc-about-page__cta-btn {
	border-radius: 999px;
	padding: 14px var(--space-10);
	font-size: 12px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	font-weight: 600;
}

/* ── 404 page ────────────────────────────────────────────────────────────── */

.fsc-404 {
	padding: var(--section-padding-y) var(--page-margin);
	text-align: center;
}

.fsc-404__inner {
	max-width: 480px;
	margin: 0 auto;
}

.fsc-404__inner h1 {
	font-size: clamp(24px, 4vw, 36px);
	margin-bottom: var(--space-4);
}

.fsc-404__inner p {
	font-size: 16px;
	line-height: 1.6;
	color: var(--color-ink);
	margin-bottom: var(--space-8);
}

.fsc-404__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4);
	justify-content: center;
}