/**
 * Wandhaus — responsive polish.
 *
 * Desktop rules (topnav, generic pages) are defined here too since the topnav
 * was refactored from inline styles to semantic classes.
 *
 * Breakpoint strategy:
 *   - 1024px : collapse 2-col PDP + checkout layouts to a single column.
 *   - 900px  : show hamburger, stack homepage grids to 2-up, stack archive.
 *   - 600px  : 1-up grids, compress typography + padding, hide utility nav.
 */

/* ================================================================== */
/* Topnav — desktop                                                     */
/* ================================================================== */

/* V2 — 3-col grid, sticky, blurred bg, centered wordmark.
 * Cart badge in --accent (orange) per design system reference.
 * `position: relative` makes this the containing block for the
 * absolutely-positioned mega panels below.
 *
 * Collapse-on-scroll: JS toggles `.is-scrolled` once the page has
 * moved more than ~8px. The class trims vertical padding + wordmark
 * size so the nav reads as a denser, "pinned" chrome strip. Transition
 * is smooth via `--ease`. */
.wh-topnav {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	column-gap: var(--s-5);
	padding: var(--s-5) var(--page-pad);
	border-bottom: 1px solid var(--border);
	background: color-mix(in srgb, var(--bg) 80%, transparent);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	position: sticky;
	top: 0;
	z-index: 20;
	transition: padding .25s var(--ease);
}
.wh-topnav.is-scrolled { padding: var(--s-3) var(--page-pad); }
.wh-topnav__wordmark   { transition: font-size .25s var(--ease); }
.wh-topnav.is-scrolled .wh-topnav__wordmark { font-size: 22px; }
@media (prefers-reduced-motion: reduce) {
	.wh-topnav,
	.wh-topnav__wordmark { transition: none; }
}
.wh-topnav { position: sticky; }
.wh-topnav::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.wh-topnav__burger { display: none; }

.wh-topnav__left {
	display: flex;
	align-items: center;
	gap: 36px;
	min-width: 0;
}

.wh-topnav__brand {
	display: inline-flex;
	align-items: baseline;
	color: var(--ink);
	text-decoration: none;
	justify-self: center;
}
.wh-topnav__wordmark {
	font-size: 26px;
	letter-spacing: -0.045em;
	line-height: 1;
	font-style: italic;
}

.wh-topnav__link {
	font: 400 13px/1 var(--font-body);
	letter-spacing: .01em;
	color: var(--ink-muted);
	text-decoration: none;
	white-space: nowrap;
	transition: color .2s var(--ease);
}
.wh-topnav__link.is-current { color: var(--ink); }
.wh-topnav__link:hover      { color: var(--ink); }

.wh-topnav__right {
	display: flex;
	align-items: center;
	gap: 28px;
	justify-self: end;
}

.wh-topnav__divider {
	display: inline-block;
	width: 1px;
	height: 14px;
	background: var(--border);
}

.wh-topnav__util {
	font: 400 13px/1 var(--font-body);
	color: var(--ink-muted);
	text-decoration: none;
	transition: color .2s var(--ease);
}
.wh-topnav__util:hover { color: var(--ink); }

/* Icon-only utility (Account, Mand) — 36×36 hit target with 20px
 * Lucide glyph centered. Hover swaps to ink color (no fill change —
 * icons are line outlines, color is the affordance). */
.wh-topnav__util--icon,
.wh-topnav__cart--icon {
	position: relative;
	display: inline-grid;
	place-items: center;
	width: 36px;
	height: 36px;
	color: var(--ink);
	text-decoration: none;
	transition: color .2s var(--ease);
}
.wh-topnav__util--icon:hover,
.wh-topnav__cart--icon:hover { color: var(--accent); }
.wh-topnav__icon { display: block; }

/* Tighten the spacing between the Account icon and the cart icon —
 * they read as a paired utility cluster rather than two separate
 * top-level links. Negative margin overrides the parent's 28px gap
 * just for this pair, leaving the divider→Account spacing intact. */
.wh-topnav__util--icon + .wh-topnav__cart--icon { margin-left: -16px; }

/* Cart badge — absolute, top-right of the icon. Round orange disc,
 * white mono digit. Fixed 16×16 circle. Auto-hides at zero
 * (PHP omits the span when count = 0). */
.wh-topnav__cart--icon .wh-topnav__cart-count {
	position: absolute;
	top: 1px;
	right: 1px;
	width: 16px;
	height: 16px;
	background: var(--accent);
	color: var(--on-ink);
	font-size: 9px;
	letter-spacing: 0;
	display: inline-grid;
	place-items: center;
	border-radius: 50%;
}

/* ================================================================== */
/* Topnav — mobile drawer                                               */
/* ================================================================== */

@media (max-width: 1023px) {
	/* Mobile: collapse the 3-col grid. Burger on the left, wordmark
	 * centered, cart on the right. Hide secondary links — they
	 * surface in the drawer. */
	/* 56 px header per design system §21 — burger left, brand centered,
	   cart right. Account stays inside the drawer (utility row at top). */
	.wh-topnav {
		grid-template-columns: 48px 1fr auto;
		column-gap: var(--s-3);
		padding: 0 var(--s-4);
		min-height: 56px;
		align-items: center;
	}
	.wh-topnav__left { display: none; }
	.wh-topnav__divider { display: none; }
	/* Hide the right-side text links (Inspiratie · Over Wandhaus) on
	   mobile — they live in the burger drawer instead. The account +
	   cart icons (`.wh-topnav__util--icon`, `.wh-topnav__cart--icon`)
	   stay visible so the right-side reads as: account → cart → end. */
	.wh-topnav__right > .wh-topnav__link { display: none; }

	.wh-topnav__burger {
		display: inline-flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		gap: 5px;
		width: 48px;
		height: 48px;
		padding: 0;
		background: transparent;
		border: 0;
		cursor: pointer;
	}
	.wh-topnav__burger span {
		display: block;
		width: 18px;
		height: 1.5px;
		background: var(--ink);
		transition: transform .2s var(--ease), opacity .2s var(--ease);
	}
	.wh-topnav.is-open .wh-topnav__burger span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
	.wh-topnav.is-open .wh-topnav__burger span:nth-child(2) { opacity: 0; }
	.wh-topnav.is-open .wh-topnav__burger span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

	.wh-topnav__right {
		gap: var(--s-1); /* tight icon spacing — account + cart sit close together */
	}
	/* Reset the desktop -16px icon overlap on mobile — there's no
	   adjacent text link, so the icons need their own breathing room. */
	.wh-topnav__util--icon + .wh-topnav__cart--icon { margin-left: 0; }

	/* Backdrop — design system §09 sheet pattern: rgba(--ink, .35),
	   click-anywhere-outside-the-panel to dismiss. */
	.wh-topnav__backdrop {
		position: fixed;
		inset: 0;
		background: color-mix(in srgb, var(--ink) 35%, transparent);
		z-index: 28;
		opacity: 0;
		pointer-events: none;
		transition: opacity .25s var(--ease);
	}
	.wh-topnav__backdrop[hidden] { display: block; }
	body.wh-topnav-open .wh-topnav__backdrop {
		opacity: 1;
		pointer-events: auto;
	}

	/* Drawer — slide-in-from-left sheet (§09 + §21). 90 vw cap at 380 px,
	   `--surface` panel, `--shadow-3`, full viewport height. Grid rows
	   (head, utility, 1fr nav) so the head + utility stay pinned and the
	   nav block scrolls independently — long accordion bodies (12+ city
	   tiles) overflow into a scrollable region instead of being cut off
	   at the bottom of the viewport. */
	.wh-topnav__drawer {
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		width: min(90vw, 380px);
		max-height: 100dvh;
		background: var(--surface);
		/* Shadow only while OPEN — closed it sits off-screen at translateX(-100%);
		   a persistent shadow would bleed onto the visible edge when collapsed. */
		box-shadow: none;
		z-index: 30;
		overflow: hidden;
		display: grid;
		grid-template-rows: auto auto 1fr;
		gap: 0;
		transform: translateX(-100%);
		transition: transform .25s var(--ease), box-shadow .25s var(--ease);
		padding: 0;
	}
	.wh-topnav__drawer[hidden] { display: grid; }
	body.wh-topnav-open .wh-topnav__drawer {
		transform: translateX(0);
		box-shadow: var(--shadow-3);
	}
	@media (prefers-reduced-motion: reduce) {
		.wh-topnav__drawer,
		.wh-topnav__backdrop { transition: none; }
	}

	/* Drawer header — brand left + close ✕ right. Matches the topnav
	   header height (56 px) so the brand visually anchors. */
	.wh-topnav__drawer-head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 var(--page-pad);
		height: 56px;
		border-bottom: 1px solid var(--border);
		flex-shrink: 0;
	}
	.wh-topnav__drawer-brand {
		font-size: 20px;
		font-style: italic;
		letter-spacing: -0.045em;
		color: var(--ink);
		text-decoration: none;
	}
	.wh-topnav__drawer-close {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 48px;
		height: 48px;
		background: transparent;
		border: 0;
		color: var(--ink);
		cursor: pointer;
		margin-right: -12px; /* recover hit-target padding */
	}
	/* flex:none — the inline-flex button otherwise flex-shrinks the X svg to a
	   ~3px sliver (invisible close button). Same guard as .wh-hero__nav svg. */
	.wh-topnav__drawer-close svg { flex: none; }

	/* Utility row — Account + Cart side-by-side just under the head. */
	.wh-topnav__drawer-utility {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 0;
		border-bottom: 1px solid var(--border);
		flex-shrink: 0;
	}
	.wh-topnav__drawer-util {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: var(--s-2);
		min-height: 48px;
		padding: var(--s-3) 14px;
		font-family: var(--font-mono);
		font-size: 11px;
		letter-spacing: 0.14em;
		text-transform: uppercase;
		color: var(--ink);
		text-decoration: none;
		border-right: 1px solid var(--border);
		transition: background .15s var(--ease);
	}
	.wh-topnav__drawer-util:last-child { border-right: 0; }
	.wh-topnav__drawer-util:hover { background: var(--surface-2); }
	.wh-topnav__drawer-util-count {
		display: inline-grid;
		place-items: center;
		min-width: 18px;
		height: 18px;
		padding: 0 5px;
		background: var(--accent);
		color: var(--on-ink);
		font-size: 10px;
		letter-spacing: 0;
		border-radius: var(--radius-pill);
	}

	/* Nav block — flat links + accordions stack. Owns its own scroll
	   region (the drawer's grid 1fr row) so long accordion bodies
	   overflow safely without breaking the pinned head + utility. */
	.wh-topnav__drawer-nav {
		display: flex;
		flex-direction: column;
		padding: var(--s-2) 0;
		overflow-y: auto;
		overscroll-behavior: contain;
		min-height: 0;
		-webkit-overflow-scrolling: touch;
	}
	.wh-topnav__drawer-link {
		display: block;
		padding: 14px var(--page-pad);
		font-family: var(--font-display);
		font-size: 22px;
		letter-spacing: -0.015em;
		color: var(--ink);
		text-decoration: none;
		transition: background .15s var(--ease);
	}
	.wh-topnav__drawer-link:hover { background: var(--surface-2); }
	.wh-topnav__drawer-link.is-current { color: var(--accent); }

	/* ── Drawer tiers ────────────────────────────────────────────────
	 * Three-tier IA: primary (display action-led) → secondary
	 * (smaller explore) → service (mono caps mini). Tiers are
	 * separated by a hairline border; primary inherits the existing
	 * `.wh-topnav__drawer-link` styling
	 * so the look stays consistent with the V1 drawer.
	 */
	.wh-drawer__tier {
		padding: var(--s-3) 0;
		border-top: 1px solid var(--border);
	}
	.wh-drawer__tier--primary {
		border-top: 0;
		padding-top: 0;
	}
	/* Service tier — stacked footer links, bottom-anchored (margin-top:auto)
	   so they sit at the foot of the drawer instead of a cramped one-line
	   mono-caps row. Same body-link language as the tiers above, quietest
	   level (14px, --ink-muted), full-bleed surface-2 hover. */
	.wh-drawer__tier--service {
		display: flex;
		flex-direction: column;
		list-style: none;
		margin: auto 0 0;
		padding: var(--s-4) 0 var(--s-2);
		border-top: 1px solid var(--border);
	}
	.wh-drawer__service-item { display: block; }
	.wh-drawer__service-link {
		display: block;
		padding: 10px var(--page-pad);
		font-family: var(--font-body);
		font-size: 14px;
		color: var(--ink-muted);
		text-decoration: none;
		transition: background .15s var(--ease), color .15s var(--ease);
	}
	.wh-drawer__service-link:hover { background: var(--surface-2); color: var(--ink); }
	.wh-drawer__service-link.is-current { color: var(--accent); }

	/* Secondary tier — restored (was accidentally removed in the service-tier
	   restyle). Smaller body links stacked below the primary nav. */
	.wh-drawer__secondary-link {
		display: block;
		padding: 10px var(--page-pad);
		font-family: var(--font-body);
		font-size: 16px;
		line-height: 1.4;
		color: var(--ink-2);
		text-decoration: none;
		transition: background .15s var(--ease), color .15s var(--ease);
	}
	.wh-drawer__secondary-link:hover {
		background: var(--surface-2);
		color: var(--ink);
	}
	.wh-drawer__secondary-link.is-current { color: var(--accent); }
}

/* Desktop: drawer + backdrop are offscreen */
@media (min-width: 1024px) {
	.wh-topnav__drawer,
	.wh-topnav__backdrop { display: none !important; }
}

/* ================================================================== */
/* Breadcrumbs — V2 (matches design system §11)                         */
/* ================================================================== */

/* Mono-caps wayfinding register. Single source of truth for breadcrumb
 * casing + typography — all PHP call sites pass natural-case labels and
 * this rule applies the editorial uppercase treatment. Was previously
 * inconsistent: archive + single-product templates manually `mb_strtoupper`'d
 * labels while page.php / generic archives used mixed case. Reconciled
 * 2026-05-07 (see [[Filter Bar V2 Scope]] follow-up). */
.wh-breadcrumbs {
	font-family: var(--font-mono);
	font-size: 11px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ink-muted);
	margin-bottom: var(--s-4);
}
.wh-breadcrumbs__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0;
}
.wh-breadcrumbs__item {
	display: inline-flex;
	align-items: center;
	gap: var(--s-2);
}
.wh-breadcrumbs__item + .wh-breadcrumbs__item { margin-left: var(--s-2); }
.wh-breadcrumbs__link {
	color: var(--ink-muted);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: var(--s-1);
	transition: color .2s var(--ease);
}
.wh-breadcrumbs__link:hover { color: var(--ink); }
.wh-breadcrumbs__current {
	color: var(--ink);
	font-weight: 500;
	display: inline-flex;
	align-items: center;
	gap: var(--s-1);
}
.wh-breadcrumbs__icon { display: block; }
.wh-breadcrumbs__sep {
	color: var(--ink-muted);
	display: block;
	flex-shrink: 0;
}

/* ================================================================== */
/* Hero V2 — floating photos + rotating headline                        */
/* ================================================================== */

/* Full-bleed: section spans 100vw, ignores any parent gutter on
 * `.site-content`. Photo stage uses absolute positioning across the
 * full viewport width so slot positions (left:3%, left:94%) anchor
 * to the actual edges. Text-block padding lives on
 * `.wh-hero__inner` so reading-line breathing room is preserved. */
.wh-hero--v2 {
	position: relative;
	/* Exactly one screenful — never taller, never shorter.
	 * `100dvh` honours mobile chrome (Safari toolbar) when supported;
	 * `100vh` is the fallback on browsers without dvh. */
	height: 100vh;
	height: 100dvh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	padding: 0;
	background: var(--bg);
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}
@media (min-width: 1024px) {
	.wh-hero--v2 { overflow: visible; padding: 0; }
}

/* Stage — full-bleed; photos absolute-positioned inside. Decorative
 * (purely visual gallery wall, not interactive), so the whole stage
 * stays transparent to the pointer — text/CTAs underneath stay
 * selectable + clickable. */
.wh-hero__stage {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 1;
}

/* Each floating photo — upright frame, fixed in place (no parallax,
 * no rotation). Soft shadow gives the gallery-wall feel.
 *
 * On load, each frame fades + lifts in via the `wh-hero-photo-in`
 * keyframes below. Staggered per `:nth-child` so the gallery wall
 * assembles itself rather than popping all at once.
 *
 * On scroll, JS updates `--scroll-fade` per frame (read from
 * `--fade-distance` below). Applied via `filter: opacity(...)` so it
 * compounds with — but doesn't fight — the entrance `opacity` prop. */
.wh-hero__photo {
	position: absolute;
	display: block;
	overflow: hidden;
	background: var(--bg-alt);
	box-shadow: 0 24px 64px rgba(14, 14, 12, .12), 0 6px 16px rgba(14, 14, 12, .06);
	opacity: 0;
	animation: wh-hero-photo-in 1.1s cubic-bezier(.2, .7, .2, 1) forwards;
	filter: opacity(var(--scroll-fade, 1));
	will-change: filter;
}
.wh-hero__photo:nth-child(1) { animation-delay: 480ms; --fade-distance: 180; } /* tulips — fades fast */
.wh-hero__photo:nth-child(2) { animation-delay:   0ms; --fade-distance: 520; } /* LCP, dad+toddler — holds longest */
.wh-hero__photo:nth-child(3) { animation-delay: 240ms; --fade-distance: 460; } /* family poppy — holds */
.wh-hero__photo:nth-child(4) { animation-delay: 120ms; --fade-distance: 320; } /* child paint — fades medium */
.wh-hero__photo:nth-child(5) { animation-delay: 360ms; --fade-distance: 540; } /* family beach — holds longest */
.wh-hero__photo:nth-child(6) { animation-delay: 600ms; --fade-distance: 200; } /* driftwood — fades fast */

@keyframes wh-hero-photo-in {
	from { opacity: 0; transform: translateY(12px) scale(.96); }
	to   { opacity: 1; transform: none; }
}
.wh-hero__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	/* Defeat parent Storefront `img { border-radius: 3px }` so frames
	 * have crisp square corners. */
	border-radius: 0;
}
.wh-hero__photo { border-radius: 0; }

/* Headline + body sit above the stage, max-width 700px, centred. */
.wh-hero__inner {
	position: relative;
	z-index: 10;
	max-width: 700px;
	width: 100%;
	margin: 0 auto;
	padding: var(--s-5) var(--s-5);
	text-align: center;
	pointer-events: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
}
@media (min-width: 1024px) {
	.wh-hero__inner { padding: 0 var(--page-pad); }
}
.wh-hero__strap {
	font-size: 11px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--ink-muted);
	margin: 0 0 var(--s-4);
}
.wh-hero__intro {
	font-size: clamp(16px, 1.6vw, 22px);
	color: var(--ink-muted);
	margin: 0 0 var(--s-3);
	font-style: italic;
}
.wh-hero__title {
	font-size: clamp(48px, 9vw, 96px);
	letter-spacing: -0.035em;
	line-height: .95;
	margin: 0;
	color: var(--ink);
	font-weight: 400;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0 14px;
}
.wh-hero__prefix { white-space: nowrap; }

/* Rotating word — italic + accent. The rotator wrapper is a fixed
 * inline-block; word swap happens via fade + Y-slide of an inner
 * span (not the wrapper) so the layout doesn't jump. */
/* Single-cell grid: both the active and the transitioning word stack
 * in the same cell with `place-items: center`, so centering is
 * automatic regardless of word width. JS pins min-width to the widest
 * candidate so the H1 layout doesn't reflow each cycle. */
.wh-hero__rotator {
	display: inline-grid;
	grid-template-areas: 'word';
	place-items: center;
	color: var(--accent);
	font-style: italic;
	white-space: nowrap;
}
.wh-hero__rotator-word {
	grid-area: word;
	transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.wh-hero__rotator-word.is-leaving {
	opacity: 0;
	transform: translateY(-12px);
}
.wh-hero__rotator-word.is-entering {
	opacity: 0;
	transform: translateY(12px);
}
.wh-hero__rotator-word.is-current {
	opacity: 1;
	transform: translateY(0);
}

.wh-hero__body {
	font-size: clamp(15px, 1.4vw, 18px);
	line-height: 1.6;
	color: var(--ink-2);
	max-width: 540px;
	margin: var(--s-5) 0 0;
}
.wh-hero__ctas {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-3);
	justify-content: center;
	margin-top: var(--s-6);
}

/* Cap inline-pixel sizes on smaller viewports so the bigger desktop
 * frames don't dominate the screen or bleed off the right edge.
 * `object-fit: cover` on the img absorbs the resulting aspect deltas.
 *
 * Tier 1 — large laptops (1281–1680): photos render at full
 * inline size, slight intentional bleed off the right edge, editorial.
 *
 * Tier 2 — common laptops (≤1280): cap so right-edge photos stay
 * mostly inside the viewport. 24vw × 1280 = 307 px (down from
 * 392 px on slot 5).
 *
 * Tier 3 — tablets (≤1024): only 2 photos visible, capped tighter.
 *
 * Tier 4 — phones (≤639): 2 photos, capped further. Padding restored
 * on `.wh-hero--v2` because the section is 100vw and otherwise
 * has zero gutter for the text block (which has its own padding,
 * but vertical breathing room helps too). */
@media (max-width: 1679px) {
	.wh-hero__photo { max-width: 26vw; max-height: 34vh; }
}
@media (max-width: 1279px) {
	.wh-hero__photo { max-width: 24vw; max-height: 32vh; }
}

/* Mobile: 2 photos visible, smaller, no parallax. JS still skips
 * parallax below 1025px regardless. */
@media (max-width: 1024px) {
	.wh-hero--v2 { padding: var(--s-5) 0 var(--s-40); }
	.wh-hero__title { font-size: clamp(40px, 11vw, 64px); }
	/* Tablet: keep slots 2 + 5 (top-left + bottom-right corner anchors). */
	.wh-hero__photo:nth-child(1),
	.wh-hero__photo:nth-child(3),
	.wh-hero__photo:nth-child(4),
	.wh-hero__photo:nth-child(6),
	.wh-hero__photo:nth-child(7),
	.wh-hero__photo:nth-child(8) { display: none; }
	.wh-hero__photo { max-width: 36vw; max-height: 30vh; }
}
@media (max-width: 639px) {
	.wh-hero__title { font-size: clamp(36px, 10vw, 52px); gap: 0 var(--s-2); }
	.wh-hero__body { font-size: 14px; }
	.wh-hero__ctas .btn { width: 100%; }
	.wh-hero__photo { max-width: 44vw; max-height: 28vh; }
}

/* Reduced-motion: photo fade-in skipped + scroll-fade disabled
 * (photos appear instantly, stay fully visible regardless of scroll),
 * rotation freezes on first word, all transitions disabled. */
@media (prefers-reduced-motion: reduce) {
	.wh-hero__photo { opacity: 1; animation: none; filter: none; }
	.wh-hero__rotator-word { transition: none; }
}

/* ================================================================== */
/* Homepage — Collection grid (3-up editorial)                          */
/* ================================================================== */

/* 2026 pattern (Aritzia, Mr Porter): 3-up on desktop, 4:5 aspect ratio,
 * `N° 01 — PARIJS` em-dash overline above the image, minimal card body
 * (city name + italic tagline only — no spec rows). Whole tile is the
 * link. Mobile: horizontal snap-scroller with 1.15 cards visible.
 *
 * Tokens: `--page-max-catalog`, `--page-pad`, `--s-*` (8pt grid),
 * `--type-*`, `--ink`, `--ink-muted`, `--accent`, `--font-display`,
 * `--font-body`, `--ease`. Title uses the `.display-l` utility class
 * (applied in the partial) so it auto-aligns with the V2 display scale. */

.wh-collection-grid {
	padding: var(--s-9) 0;
}
.wh-collection-grid__inner {
	/* Fills the homepage main (capped at 1400 via body.home .site-content,
	   matching the archive). page-pad gutter matches the archive grid. */
	max-width: var(--page-max-catalog);
	margin-inline: auto;
	padding-inline: var(--page-pad);
}
.wh-collection-grid__head {
	display: flex;
	justify-content: space-between;
	align-items: end;
	gap: var(--s-5);
	flex-wrap: wrap;
	margin-bottom: var(--s-7);
}
.wh-collection-grid__eyebrow { margin-bottom: var(--s-4); }
.wh-collection-grid__title {
	margin: 0;
	max-width: 18ch;
}
.wh-collection-grid__title em { font-style: italic; }
.wh-collection-grid__period { color: var(--ink); }
.wh-collection-grid__more {
	font: 400 var(--type-sm)/1 var(--font-body);
	color: var(--ink);
	border-bottom: 1px solid var(--ink);
	padding-bottom: var(--s-1);
	text-decoration: none;
	flex-shrink: 0;
	transition: color .18s var(--ease), border-bottom-color .18s var(--ease);
}
.wh-collection-grid__more:hover { color: var(--accent); border-bottom-color: var(--accent); }

.wh-collection-grid__rail {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	/* Same card gap as the /collecties/ archive grid. */
	gap: clamp(28px, 3vw, var(--s-7));
}

/* .wh-collection-card is just the homepage surface hook (grid + mobile rail);
   the card visual is the shared .wh-card (css/wh-card.css). */
.wh-collection-card {
	display: block;
	text-decoration: none;
	color: inherit;
}

/* Tablet (≤1023): 2-up */
@media (max-width: 1023px) {
	.wh-collection-grid__rail { grid-template-columns: repeat(2, 1fr); }
	.wh-collection-grid__head { margin-bottom: var(--s-6); }
}
/* Mobile (≤639): horizontal snap-scroller (Aritzia pattern) */
@media (max-width: 639px) {
	.wh-collection-grid { padding: var(--s-8) 0; }
	/* padding-inline:0 → head + cards align to the section's 20px (the homepage
	   band gutter), not 36px. The base `__inner` --page-pad would otherwise stack
	   on top of the section padding. */
	.wh-collection-grid__inner { padding-inline: 0; }
	.wh-collection-grid__head { padding-right: var(--page-pad); }
	.wh-collection-grid__rail {
		grid-template-columns: none;
		display: flex;
		gap: var(--s-3);
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		/* scroll-padding-left:0 (≤ gap) so a swiped card snaps flush to the rail
		   start and the PREVIOUS card's edge lands left of the rail (hidden behind
		   the gutter) instead of peeking. Was `0 var(--page-pad)` (16 > gap 12). */
		scroll-padding: 0;
		padding-right: var(--page-pad);
		padding-bottom: var(--s-2);
		-webkit-overflow-scrolling: touch;
	}
	.wh-collection-card {
		flex: 0 0 calc(85% - 12px);
		scroll-snap-align: start;
	}
}

/* ================================================================== */
/* Homepage — Materials rail (Aesop / &Daughter)                        */
/* ================================================================== */

/* Macro photography per material on 4:5 portrait tiles. Horizontal
 * scroll-snap on mobile, 3-up desktop, 4-up at the wide cap. Photos
 * are pulled by `wh_home_material_cards()` from
 * `Probo_Profile::image_for($key)` — admin-uploaded fallback_id when
 * set, otherwise the builder's placeholder SVG.
 *
 * Tokens: same set as the collection grid above — `--page-max-catalog`,
 * `--page-pad`, `--s-*`, `--type-*`, `--ink`, `--ink-muted`, `--accent`,
 * `--font-display`, `--font-body`. Title uses the `.display-l` utility
 * (applied in the partial) for consistency with the adjacent grid. */

.wh-materials {
	padding: var(--s-9) 0;
	background: var(--bg-alt);
}
.wh-materials__inner {
	max-width: var(--page-max-catalog);
	margin-inline: auto;
	padding: 0 var(--page-pad);
}

/* --- Homepage colour-band full-bleed -----------------------------------
 * `body.home .site-content` is capped at 1400px (to align the homepage grid
 * with the /collecties/ archive). That cap also held the full-width colour
 * bands (BYO dark band + materials tint) ~20px short of the viewport on both
 * sides, leaving a hard vertical seam against the cool-white page that reads
 * as a drop-shadow down the screen edges. Break the BANDS out to the viewport
 * edges (the theme's canonical 100vw trick) and re-cap their inner content to
 * the homepage width, so the colour reaches the screen edge while the content
 * stays aligned with the grid above/below it. */
body.home .wh-byo,
body.home .wh-materials {
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}
body.home .wh-byo__inner,
body.home .wh-materials__inner {
	max-width: 1400px;
	margin-inline: auto;
}
.wh-materials__head {
	display: flex;
	justify-content: space-between;
	align-items: end;
	gap: var(--s-5);
	flex-wrap: wrap;
	margin-bottom: var(--s-7);
}
.wh-materials__eyebrow { margin-bottom: var(--s-4); }
.wh-materials__title {
	margin: 0;
	max-width: 18ch;
}
.wh-materials__more {
	font: 400 var(--type-sm)/1 var(--font-body);
	color: var(--ink);
	border-bottom: 1px solid var(--ink);
	padding-bottom: var(--s-1);
	text-decoration: none;
	flex-shrink: 0;
	transition: color .18s var(--ease), border-bottom-color .18s var(--ease);
}
.wh-materials__more:hover { color: var(--accent); border-bottom-color: var(--accent); }

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

.wh-material-card {
	background: var(--surface);
	display: block;
	text-decoration: none;
	color: inherit;
}
.wh-material-card__media {
	position: relative;
	aspect-ratio: 4 / 5;
	overflow: hidden;
}
.wh-material-card__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .4s var(--ease);
}
.wh-material-card:hover .wh-material-card__img { transform: scale(1.02); }
.wh-material-card__number {
	position: absolute;
	top: var(--s-4);
	left: var(--s-4);
	font-size: 11px; /* mirrors `.eyebrow` */
	letter-spacing: .18em;
	color: var(--on-ink);
	mix-blend-mode: difference;
	z-index: 1;
}
.wh-material-card__body {
	padding: var(--s-4) var(--s-5) var(--s-5);
}
.wh-material-card__name {
	font-family: var(--font-display);
	font-size: var(--type-lg);
	letter-spacing: -0.015em;
	margin: 0;
	font-weight: 400;
}
.wh-material-card__desc {
	font-family: var(--font-display);
	font-style: italic;
	font-size: var(--type-sm);
	color: var(--ink-muted);
	margin: var(--s-1) 0 0;
	line-height: 1.4;
}

/* Tablet (≤1023): 2-up */
@media (max-width: 1023px) {
	.wh-materials__rail { grid-template-columns: repeat(2, 1fr); }
}
/* Wide cap (≥1680): allow 4-up at gallery scale */
@media (min-width: 1680px) {
	.wh-materials__rail { grid-template-columns: repeat(4, 1fr); gap: var(--s-5); }
}
/* Big screen (≥1920): more air between tiles */
@media (min-width: 1920px) {
	.wh-materials__rail { gap: var(--s-5); }
}
/* Mobile (≤639): horizontal snap-scroller */
@media (max-width: 639px) {
	.wh-materials { padding: var(--s-8) 0; }
	.wh-materials__inner { padding-inline: 0; } /* align to section 20px (see collection grid note) */
	.wh-materials__head { padding-right: var(--page-pad); }
	.wh-materials__rail {
		grid-template-columns: none;
		display: flex;
		gap: var(--s-3);
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding: 0; /* ≤ gap → previous card hides on snap (see collection grid note) */
		padding-right: var(--page-pad);
		-webkit-overflow-scrolling: touch;
	}
	.wh-material-card {
		flex: 0 0 calc(70% - 12px);
		scroll-snap-align: start;
	}
}

/* ================================================================== */
/* Material list — list-style variant of .wh-material-card              */
/* (design system §06 Cards). Same dynamic Probo data; a ruled list of  */
/* horizontal rows (thumb · N° · name · italic line · chevron). Two-up  */
/* on wide screens, single column on mobile. Used on the collection-PDP */
/* specifications section.                                              */
/* ================================================================== */
.wh-material-list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	column-gap: var(--s-7);
}
.wh-material-list__item {
	display: flex;
	align-items: center;
	gap: var(--s-4);
	padding: var(--s-4) 0;
	border-bottom: 1px solid var(--border);
	text-decoration: none;
	color: inherit;
}
.wh-material-list__media {
	position: relative;
	flex: 0 0 auto;
	width: 64px;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: var(--bg-alt);
}
.wh-material-list__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .4s var(--ease);
}
.wh-material-list__item:hover .wh-material-list__img { transform: scale(1.03); }
.wh-material-list__body {
	flex: 1 1 auto;
	min-width: 0;
}
.wh-material-list__num {
	display: block;
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ink-muted);
	margin-bottom: 2px;
}
.wh-material-list__name {
	display: block;
	font-family: var(--font-display);
	font-size: var(--type-md);
	font-weight: 400;
	letter-spacing: -0.01em;
	line-height: 1.2;
	color: var(--ink);
	margin: 0;
}
.wh-material-list__desc {
	display: block;
	font-family: var(--font-display);
	font-style: italic;
	font-size: var(--type-sm);
	color: var(--ink-muted);
	line-height: 1.4;
	margin: 2px 0 0;
}
.wh-material-list__chevron {
	flex: 0 0 auto;
	color: var(--ink-muted);
	transition: transform .18s var(--ease), color .18s var(--ease);
}
.wh-material-list__item:hover .wh-material-list__chevron {
	color: var(--ink);
	transform: translateX(2px);
}
/* Single column on phones — two list columns would get too narrow. */
@media (max-width: 639px) {
	.wh-material-list {
		grid-template-columns: 1fr;
		column-gap: 0;
	}
}

/* ================================================================== */
/* Materials page — dynamic Probo profile grid                          */
/* ================================================================== */

/* /materialen/ is an archive like /collecties/ + /foto-op-paneel/. Via the
 * `wh-materials-archive` body class the intro + grid fill the .page article
 * (1304/212), matching those pages exactly. The old full-bleed "negative-
 * margin" trick (needed when body-inner was a 720px reading column) is gone:
 * the header + body-inner now fill the article, so the grid sits in normal
 * flow and gets the article's single gutter. Page Consistency Standard 2026-06-17. */
body.wh-materials-archive .wh-page__header-inner,
body.wh-materials-archive .wh-page__body-inner {
	max-width: none; /* fill the .page article (1304) — archive tier, beats page.php's inline 1200 */
}
.wh-materials-page {
	margin-top: var(--s-7);
}
.wh-materials-page__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--s-6);
}
/* Old .wh-material hub-card styles removed 2026-06-19: the hub now renders the
   unified .wh-card (borderless) — see Vault "Material Hub Card — Local Profile
   Staleness". The .wh-materials-page wrapper + __grid rules below stay live. */

@media (max-width: 1023px) {
	.wh-materials-page__grid { grid-template-columns: repeat(2, 1fr); gap: var(--s-5); }
}
@media (max-width: 639px) {
	.wh-materials-page__grid { grid-template-columns: 1fr; gap: var(--s-20); }
}

/* ================================================================== */
/* Footer V2                                                            */
/* ================================================================== */

.wh-footer--v2 {
	background: var(--ink);
	color: var(--on-ink-muted);
	padding: 120px 0 var(--s-40);
}
.wh-footer__inner {
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 var(--page-pad);
}
.wh-footer__wordmark {
	/* Never wrap (the trailing "." was dropping to a second line on phones,
	   where the old 96px min forced the word wider than the viewport). Scale
	   it to roughly fill the width on one line at every size. */
	font-size: clamp(40px, 21vw, 240px);
	white-space: nowrap;
	line-height: .85;
	letter-spacing: -0.045em;
	color: var(--on-ink);
	margin: 0 0 80px;
	font-style: italic;
}
.wh-footer__grid {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
	gap: var(--s-7);
}
.wh-footer__intro {
	min-width: 0;
}
.wh-footer__tagline {
	max-width: 320px;
	margin: 0;
	font-size: 14px;
	line-height: 1.7;
	color: var(--on-ink-faint);
}
.wh-footer__address {
	margin-top: var(--s-6);
	font-size: 11px;
	color: var(--on-ink-faint);
	letter-spacing: .14em;
	text-transform: uppercase;
	line-height: 1.6;
}
.wh-footer__col {
	min-width: 0;
}
.wh-footer__col-title {
	font-size: 11px;
	color: var(--on-ink);
	letter-spacing: .16em;
	text-transform: uppercase;
	margin-bottom: 18px;
}
.wh-footer__col-link {
	display: block;
	font-size: 13px;
	color: var(--on-ink-faint);
	line-height: 2.1;
	text-decoration: none;
	transition: color .2s var(--ease);
}
.wh-footer__col-link:hover { color: var(--on-ink); }
.wh-footer__bottom {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--s-5);
	margin-top: 80px;
	padding-top: var(--s-6);
	border-top: 1px solid var(--on-ink-border);
}
.wh-footer__legal {
	font-size: 11px;
	color: var(--on-ink-faint);
	letter-spacing: .04em;
}
.wh-footer__legal-link {
	color: var(--on-ink-faint);
	text-decoration: none;
	transition: color .2s var(--ease);
}
.wh-footer__legal-link:hover,
.wh-footer__legal-link:focus,
.wh-footer__legal-link:focus-visible {
	color: var(--on-ink);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.wh-footer__legal-sep {
	color: var(--on-ink-faint);
	opacity: .5;
	margin: 0 var(--s-1);
}
/* Payment-icons defensive guard — gateways occasionally ship link-wrapped
 * <img> via Mollie / Woo extensions. Force any anchor inside the payment
 * row to inherit the on-ink color instead of WC's default purple link. */
.wh-footer__payments a,
.wh-footer__payments a:hover,
.wh-footer__payments a:focus {
	color: var(--on-ink);
	text-decoration: none;
	box-shadow: none;
	background: transparent;
}
/* Dynamic payment-method icons in the footer — same renderer as the cart
 * sidebar (wh_payment_gateway_icons() → gateway get_icon() <img>). On the
 * dark footer band we render the brand artwork on a tight-fit white chip
 * so colourful brand logos (Bancontact blue, iDEAL pink, etc.) stay
 * legible. No outer border / radius on the <li>; just a quiet white
 * background pad behind the actual brand img. */
.wh-footer__payments {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-2);
	align-items: center;
}
.wh-footer__payments li {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	background: transparent;
	padding: 0;
	border-radius: 0;
}
.wh-footer__payments li img {
	display: block !important;
	height: 18px !important;
	width: auto !important;
	max-width: 56px !important;
	margin: 0 !important;
	box-shadow: none !important;
	border: 0 !important;
	background: transparent !important;
}
.wh-footer__payments li .payment-icons {
	display: inline-flex;
	align-items: center;
	gap: var(--s-1);
}
.wh-footer__payments li .payment-icons img:nth-child(n+2) { display: none !important; }

@media (max-width: 1023px) {
	.wh-footer--v2 { padding: 80px 0 var(--s-6); }
	.wh-footer__grid { grid-template-columns: 1fr 1fr 1fr; gap: 36px; }
	.wh-footer__intro { grid-column: 1 / -1; }
}
@media (max-width: 639px) {
	.wh-footer__inner { padding: 0 var(--s-20); }
	.wh-footer__grid { grid-template-columns: 1fr 1fr; gap: 28px; }
	.wh-footer__bottom { flex-direction: column; align-items: flex-start; margin-top: var(--s-7); }
}

/* ================================================================== */
/* Homepage                                                             */
/* ================================================================== */

@media (max-width: 1023px) {
	.wh-hero > div:first-child {
		grid-template-columns: 1fr !important;
		min-height: 0 !important;
		gap: var(--s-6) !important;
	}
	.wh-hero h1.display {
		font-size: clamp(48px, 10vw, 88px) !important;
	}
	.wh-hero > div:first-child > div:last-child {
		height: auto !important;
		aspect-ratio: 4 / 5;
	}
}

@media (max-width: 1023px) {
	.wh-hero { padding: var(--s-6) var(--s-20) 0 !important; }
	.wh-hero p { font-size: 15px !important; }
	.wh-hero > div:first-child > div:last-child > div:last-child {
		left: 20px !important;
		right: 20px !important;
		bottom: -24px !important;
		width: auto !important;
	}

	.wh-collection-grid { padding: var(--s-8) var(--s-20) !important; }
	.wh-collection-grid h2.display { font-size: clamp(32px, 7vw, 44px) !important; }

	.wh-byo { padding: var(--s-8) var(--s-20) !important; }
	.wh-byo h2.display { font-size: clamp(36px, 9vw, 56px) !important; }

	.wh-materials { padding: var(--s-8) var(--s-20) !important; }

	.wh-process { padding: var(--s-8) var(--s-20) !important; }

	.wh-press { padding: var(--s-8) var(--s-20) !important; }
	.wh-press blockquote { font-size: clamp(22px, 5vw, 32px) !important; }
}

/* ================================================================== */
/* Shop archive                                                         */
/* ================================================================== */

@media (max-width: 1023px) {
	.wh-archive__header > div:first-child {
		max-width: none !important;
		padding: var(--s-6) var(--s-20) !important;
	}
	.wh-archive__header h1.display { font-size: clamp(48px, 10vw, 72px) !important; }
	.wh-archive__body > div {
		grid-template-columns: 1fr !important;
		gap: var(--s-5) !important;
		padding-inline: var(--s-20) !important;
	}
	.wh-archive__body aside {
		position: static !important;
		max-height: 0;
		overflow: hidden;
		transition: max-height .3s var(--ease);
	}
	.wh-archive__body aside.is-open { max-height: 2000px; }
	.wh-archive__filters-toggle {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		padding: 10px var(--s-4);
		background: var(--surface);
		border: 1px solid var(--border-strong);
		border-radius: 999px;
		font-family: var(--font-mono);
		font-size: 11px;
		letter-spacing: .14em;
		text-transform: uppercase;
		color: var(--ink);
		cursor: pointer;
	}
	.wh-archive__main ul.products,
	.wh-archive__main .products {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 14px !important;
	}
}

@media (max-width: 639px) {
	.wh-archive__main ul.products,
	.wh-archive__main .products {
		grid-template-columns: 1fr !important;
	}
}

/* ================================================================== */
/* Single product                                                       */
/* ================================================================== */

@media (max-width: 1023px) {
	body.single-product section[style*="grid-template-columns:1.3fr 1fr"],
	body.single-product section > div[style*="grid-template-columns:1.3fr 1fr"] {
		grid-template-columns: 1fr !important;
		gap: var(--s-6) !important;
		padding-inline: var(--s-20) !important;
	}
	.wh-product-info {
		position: static !important;
	}
	.wh-product-info h1.display { font-size: clamp(40px, 9vw, 56px) !important; }
}

@media (max-width: 1023px) {
}

/* ================================================================== */
/* Cart                                                                 */
/* ================================================================== */

@media (max-width: 1023px) {
	.wh-cart__header { padding: var(--s-4) var(--s-20); flex-wrap: wrap; gap: var(--s-2); }
	.wh-cart__header .wh-checkout__stepper { order: 3; width: 100%; justify-content: center; font-size: 10px; gap: var(--s-2); }
	.wh-cart__wrap { padding: var(--s-6) var(--s-20) var(--s-8); }
	.wh-cart__title { font-size: clamp(32px, 9vw, 48px); margin-bottom: var(--s-5); }

	/* Collapse table to stacked cards */
	.wh-cart table.cart,
	.wh-cart table.shop_table,
	.wh-cart table.cart tbody,
	.wh-cart table.cart tbody tr,
	.wh-cart table.cart td {
		display: block !important;
		width: 100% !important;
	}
	.wh-cart table.cart thead { display: none !important; }
	.wh-cart table.cart tbody tr {
		border: 1px solid var(--border);
		padding: var(--s-4);
		margin-bottom: var(--s-3);
		background: var(--surface);
	}
	.wh-cart table.cart td {
		padding: var(--s-1) 0 !important;
		border: 0 !important;
		text-align: left !important;
	}
	.wh-cart table.cart td.product-remove { text-align: right !important; }
	.wh-cart table.cart td.product-thumbnail img { width: 60px !important; margin-bottom: var(--s-2); }
	.wh-cart table.cart td.product-name a { font-size: 18px !important; }
	.wh-cart table.cart td[data-title]::before {
		content: attr(data-title) ": ";
		display: inline-block;
		font-family: var(--font-mono);
		font-size: 10px;
		letter-spacing: .14em;
		text-transform: uppercase;
		color: var(--ink-muted);
		margin-right: 6px;
	}
	.wh-cart table.cart td.product-thumbnail::before,
	.wh-cart table.cart td.product-name::before,
	.wh-cart table.cart td.product-remove::before { display: none; }

	.wh-cart table.cart td.actions {
		padding-top: var(--s-4) !important;
		display: flex !important;
		flex-wrap: wrap;
		gap: 10px;
	}
	.wh-cart .cart_totals { margin-top: var(--s-6); max-width: none; }
}

/* ================================================================== */
/* Checkout                                                             */
/* ================================================================== */

@media (max-width: 1023px) {
	.wh-checkout__grid {
		grid-template-columns: 1fr !important;
		gap: var(--s-6) !important;
		padding: var(--s-6) var(--s-20) var(--s-8) !important;
	}
	.wh-checkout__form h1.display { font-size: clamp(32px, 8vw, 56px) !important; }
	.wh-order-summary {
		position: static !important;
		order: -1;
	}
}

@media (max-width: 1023px) { /* hide on tight viewports — wordmark + stepper are enough */

	.wh-checkout .wh-two-col {
		grid-template-columns: 1fr !important;
	}
	.wh-checkout #payment ul.payment_methods {
		grid-template-columns: repeat(2, 1fr) !important;
	}
	.wh-cart__empty-actions .btn { text-align: center; width: 100%; }

	/* Empty-state shipping callout — slightly tighter padding on mobile. */
	.wh-checkout .wh-checkout__shipping-empty {
		padding: var(--s-3) 14px !important;
		font-size: 12px !important;
	}
}

@media (max-width: 639px) {
	.wh-order-summary__item {
		flex-wrap: wrap;
		gap: 10px;
	}
	.wh-order-summary__thumb {
		width: 64px !important;
	}
}

/* ================================================================== */
/* My Account                                                           */
/* ================================================================== */

@media (max-width: 1023px) {
	.wh-account {
		padding: var(--s-6) var(--s-20) var(--s-8) !important;
	}
	/* Transactional/account screens render through page.php's generic
	   wrappers. The `#wh-main` id-rule below (20px, !important) outranks the
	   `body.wh-*-page .wh-main{padding:0!important}` reset in
	   wandhaus-checkout.css (id 1,0,0 beats class 0,2,1, both !important), so
	   #wh-main keeps its 20px gutter and the inner container (.wh-account /
	   .wh-checkout__grid / .wh-cart / .wh-thankyou) stacks ITS gutter on top
	   → content sat 36–56px each side (~70–80% width), tighter than the
	   homepage's single 20px band. Zero #wh-main on all of these so the inner
	   container is the SINGLE 20px gutter, giving them the same content width
	   as the homepage (335px @375). The `.page` article is already zeroed by
	   checkout.css on the Woo pages, so only account needs the `.wh-page.page`
	   line. id-rule + this override are both ≤1023 → desktop unchanged. */
	body.wh-account-page #wh-main,
	body.wh-checkout-page #wh-main,
	body.wh-cart-page #wh-main,
	body.wh-thankyou-page #wh-main,
	body.wh-account-page .wh-page.page {
		padding-inline: 0 !important;
	}
	.wh-account__sidebar {
		position: static !important;
	}
	.wh-account__welcome { font-size: clamp(32px, 9vw, 48px); }
	.wh-account__card { padding: 18px; }
	.wh-active-order {
		grid-template-columns: 1fr !important;
		gap: var(--s-4) !important;
	}
	.wh-active-order__thumb { max-width: 140px; }
	.wh-tracker {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: var(--s-3) var(--s-4) !important;
	}
	.wh-saved-designs__grid {
		grid-template-columns: repeat(2, 1fr) !important;
	}
	.wh-order-history__row {
		grid-template-columns: 1fr auto !important;
		gap: var(--s-2) !important;
		padding: 14px var(--s-4) !important;
	}
	.wh-order-history__row > *:not(:first-child):not(:last-child) {
		grid-column: 1 / -1;
	}
}

@media (max-width: 639px) {
	.wh-saved-designs__grid { grid-template-columns: 1fr !important; }

	/* Thank-you page on small phones — tighter typography + stacked meta. */
	.wh-thankyou__title { font-size: clamp(32px, 8vw, 44px) !important; }
	.wh-thankyou__head { margin-bottom: var(--s-6) !important; }
	.wh-thankyou__lede { font-size: 14px !important; }
	.wh-thankyou__meta {
		grid-template-columns: 1fr !important;
		gap: var(--s-1) 0 !important;
	}
	.wh-thankyou__meta dt { margin-top: var(--s-3); }
	.wh-thankyou__meta dt:first-child { margin-top: 0; }
	.wh-thankyou__total { font-size: 18px !important; }
	.wh-thankyou__next { padding: var(--s-20) !important; }
	.wh-thankyou__failed-actions { flex-direction: column; }
	.wh-thankyou__failed-actions .btn { width: 100%; text-align: center; }

	/* Auth screens — single column on phones (already handled in
	   account.css at 720px, repeated here so any future move keeps
	   the breakpoint logic in one place). */
	.wh-account #customer_login.u-columns,
	.wh-account .u-columns.col2-set {
		grid-template-columns: 1fr !important;
		gap: var(--s-4) !important;
	}
}

/* ================================================================== */
/* Footer                                                               */
/* ================================================================== */

@media (max-width: 1023px) {
	.wh-footer { padding: var(--s-7) var(--page-pad) var(--s-5) !important; }
	.wh-footer > div:first-child {
		grid-template-columns: 1fr 1fr !important;
		gap: var(--s-6) !important;
	}
	.wh-footer > div:last-child {
		flex-direction: column !important;
		align-items: flex-start !important;
		gap: var(--s-2) !important;
		margin-top: var(--s-6) !important;
	}
}

@media (max-width: 639px) {
	.wh-footer > div:first-child {
		grid-template-columns: 1fr !important;
	}
}

/* ================================================================== */
/* Generic page chrome (Materialen / Inspiratie / etc.)                  */
/* ================================================================== */

@media (max-width: 1023px) {
	#wh-main {
		padding: var(--s-6) var(--s-20) var(--s-8) !important;
	}
	/* #wh-main (above) is the SINGLE 20px page gutter on mobile. The generic
	   page.php / wh-prose wrappers each re-applied var(--page-pad): the `.page`
	   container utility (tokens.css) AND the editorial content section
	   (.wh-page__body-inner / .wh-prose) — so content stacked 2–3 gutters and
	   shrank to ~271–303px (vs the homepage's 335px band). Collapse them to 0
	   here so the inner content shares #wh-main's 20px edge (this also aligns
	   the page header with the body, per page.php's own note). Selectors are
	   specificity-bumped to beat the source rules (incl. page.php's inline
	   <style>). Full-bleed sections (.wh-materials-page) use
	   margin:calc(50%-50vw) so they're unaffected; Woo pages use the `--full`
	   inner variant, excluded below, and zero #wh-main via wandhaus-checkout.css. */
	article.page:not(body) { padding-inline: 0; }
	.wh-page__body-inner:not(.wh-page__body-inner--full) { padding-inline: 0; }
	body .wh-prose { padding-inline: 0; }
}

/* ================================================================== */
/* Mobile gutter normalization → the 20px / 335px standard              */
/* (2026-06-14, see Vault/03 Operations/Mobile Content-Width Audit.)    */
/* Several surfaces used var(--page-pad) (16px @≤639) or double-stacked  */
/* it on #wh-main's 20px, so content landed at 16px or 36px instead of   */
/* the homepage/account 20px band. Pull them all to a single 20px gutter */
/* so every page + the chrome line up. Selectors are specificity-bumped  */
/* (and !important where the source rule is !important) to win over the  */
/* origin rules, incl. the plugin shop CSS. All ≤1023 → desktop intact.  */
/* ================================================================== */
@media (max-width: 1023px) {
	/* Inside #wh-main(20) → drop the template's own 16px so #wh-main is the
	   sole gutter (same model as the editorial pages above). */
	body.archive .wccb-collections-page { padding-inline: 0 !important; } /* /collecties/ archive (plugin CSS, overridden here) */
	.wh-sp-pdp .wh-sp-pdp__inner { padding-inline: 0; }                    /* single-panel PDP */
	.wh-single-panel .wh-single-panel__inner { padding-inline: 0; }        /* /foto-op-paneel/ single-panel archive */
	.wh-installatie [class*="-inner"] { padding-inline: 0; }               /* /installatie/ content sections */

	/* Standalone 16px gutters → bump to the 20px standard. */
	.wh-pdp [class*="-inner"] { padding-inline: var(--s-20); }                    /* collection PDP content (full-bleed hero unchanged) */
	.wh-materials-page { padding-inline: var(--s-20); }                           /* /materialen/ full-bleed gallery band */
	.wh-topnav, .wh-topnav.is-scrolled { padding-inline: var(--s-20); }           /* header (incl. scrolled state) */
	.wh-topbar .wh-topbar__inner { padding-inline: var(--s-20); }                 /* USP topbar */

	/* Footer: keep the band full-bleed, make the inner the single 20px gutter
	   (was outer var(--page-pad) 16 + inner 20 = 36). */
	.wh-footer { padding-inline: 0 !important; }
	.wh-footer__inner { padding-inline: var(--s-20); }

	/* NOTE: auth (login/register) is intentionally a centered-card layout, not a
	   content-gutter page — left untouched here. */
}

/* Lock scroll when either drawer is open */
body.wh-topnav-open,
body.wh-account-open { overflow: hidden; }

/* ===================================================================== *
 * Account slide-out drawer — RIGHT-side overlay, ALL viewports.          *
 * Sibling of the left mobile-nav drawer above, but lives OUTSIDE every   *
 * @media block so it works on desktop too. Mechanics mirror the nav      *
 * drawer (fixed panel, translateX slide, .25s var(--ease), --ink 35%     *
 * scrim, [hidden]{display:grid} override, reduced-motion guard) — opened *
 * by the header user icon via js/wandhaus-mobile.js setupDrawer().       *
 * ===================================================================== */
.wh-account__backdrop {
	position: fixed;
	inset: 0;
	background: color-mix(in srgb, var(--ink) 35%, transparent);
	z-index: 1040;
	opacity: 0;
	pointer-events: none;
	transition: opacity .25s var(--ease);
}
.wh-account__backdrop[hidden] { display: block; }
body.wh-account-open .wh-account__backdrop {
	opacity: 1;
	pointer-events: auto;
}

.wh-account-drawer {
	position: fixed;
	top: 0;
	bottom: 0;
	right: 0;
	left: auto;
	width: min(92vw, 380px);
	max-height: 100dvh;
	background: var(--surface);
	/* Shadow only while OPEN — when closed the panel sits off-screen at
	   translateX(100%), and a persistent shadow would bleed back onto the
	   visible right edge of every page (the "drop-shadow on the right"). */
	box-shadow: none;
	z-index: 1050;
	overflow: hidden;
	display: grid;
	grid-template-rows: auto 1fr;
	transform: translateX(100%);
	transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.wh-account-drawer[hidden] { display: grid; }
body.wh-account-open .wh-account-drawer { transform: translateX(0); box-shadow: var(--shadow-3); }
@media (prefers-reduced-motion: reduce) {
	.wh-account-drawer,
	.wh-account__backdrop { transition: none; }
}

.wh-account-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-4);
	padding: 0 var(--page-pad);
	height: 56px;
	border-bottom: 1px solid var(--border);
	flex-shrink: 0;
}
.wh-account-drawer__title {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: 17px;
	letter-spacing: -0.02em;
	color: var(--ink);
	margin: 0;
}
/* Close button matches the burger drawer's (.wh-topnav__drawer-close): 48px,
   -12px hit-target recovery, plain — so both drawers share one chrome. */
.wh-account-drawer__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	margin-right: -12px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--ink);
	cursor: pointer;
}

.wh-account-drawer__body {
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: var(--s-5) var(--page-pad) var(--s-6);
	display: flex;
	flex-direction: column;
	gap: var(--s-2);
}
.wh-account-drawer__lede {
	color: var(--ink-muted);
	font-size: 14px;
	line-height: 1.5;
	margin: 0 0 var(--s-2);
}
.wh-account-drawer__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0 var(--s-4);
	border-radius: var(--radius-1);
	font-weight: 600;
	text-decoration: none;
	background: var(--accent);
	color: var(--surface);
	border: 1px solid var(--accent);
	transition: background .15s var(--ease);
}
.wh-account-drawer__cta:hover { background: var(--accent-ink); border-color: var(--accent-ink); }
.wh-account-drawer__cta--ghost {
	background: transparent;
	color: var(--ink);
	border-color: var(--border-strong);
}
.wh-account-drawer__cta--ghost:hover { background: var(--bg-alt); border-color: var(--border-strong); }

/* Rows bleed full-width past the body padding (negative margin) with a
   surface-2 hover — same hover language as the burger drawer's nav links. */
.wh-account-drawer__nav {
	display: flex;
	flex-direction: column;
	margin: var(--s-3) calc(-1 * var(--page-pad)) 0;
}
.wh-account-drawer__row {
	display: flex;
	align-items: center;
	gap: var(--s-4);
	min-height: 48px;
	padding: var(--s-3) var(--page-pad);
	color: var(--ink);
	text-decoration: none;
	border-bottom: 1px solid var(--border);
	transition: background .15s var(--ease);
}
.wh-account-drawer__row:first-child { border-top: 1px solid var(--border); }
.wh-account-drawer__row:hover { background: var(--surface-2); }
.wh-account-drawer__row-icon { flex-shrink: 0; color: var(--ink-muted); }
.wh-account-drawer__row-label { flex: 1 1 auto; font-size: 15px; }
.wh-account-drawer__row-chev { flex-shrink: 0; color: var(--ink-faint); }

.wh-account-drawer__logout {
	display: flex;
	align-items: center;
	gap: var(--s-4);
	padding: var(--s-4) 0 0;
	margin-top: var(--s-3);
	color: var(--ink-muted);
	text-decoration: none;
	font-size: 14px;
	transition: color .15s var(--ease);
}
.wh-account-drawer__logout:hover { color: var(--ink); }
.wh-account-drawer__logout .wh-account-drawer__row-icon { color: inherit; }

/* ==================================================================
 * /collecties/ archive — header top spacing parity.
 * The plugin's `.wccb-collections-page` (= the site-main wrapper) had
 * `padding-top: var(--s-5)`, putting the breadcrumb ~var(--s-6) higher than the other
 * archive/header pages (which use the page-header `clamp(var(--s-6),5vw,var(--s-56))`).
 * Theme override (loads after the plugin CSS) brings it in line so the
 * breadcrumb + intro sit at the same height as materialen/inspiratie/
 * foto-op-paneel. Page Consistency Standard 2026-06-17.
 * ================================================================== */
body .wccb-collections-page {
	padding-top: clamp(var(--s-6), 5vw, var(--s-56));
}
/* No eyebrow + H1 sits right after the breadcrumb — matches the other archives
   (materialen/foto-op-paneel/inspiratie) + the Page Header Convention (no eyebrow).
   Was: "VERZAMELINGEN" eyebrow + 32px intro top padding → H1 ~64px lower. */
body .wccb-collections-intro__eyebrow {
	display: none;
}
body .wccb-collections-intro {
	padding-top: 0;
}

/* ==================================================================
 * Shop filter pills — "quiet pills" minimisation (mirror of the plugin's
 * shop-filters.css 2026-06-16 refresh, see [[Filter Pills Minimal Refresh
 * Scope (2026-06-16)]]). The plugin change was never deployed to beta (the
 * plugin file there is older, same WCCB version) — re-applied here from the
 * theme so it ships without touching the plugin / bumping the shared WCCB
 * version (avoids cross-agent version drift). `body` prefix wins the cascade.
 * Drops the leading filter icons + shows just the label ("Aantal frames ⌄")
 * until a value is picked (then the value replaces the label).
 * ================================================================== */
body .wccb-shop-filters__chip-icon { display: none; }
body .wccb-shop-filters__chip-label {
	color: var(--ink);
	font-size: 13px;
	font-weight: 500;
}
body .wccb-shop-filters__chip.is-active .wccb-shop-filters__chip-label { display: none; }
body .wccb-shop-filters__chip:not(.is-active) .wccb-shop-filters__chip-value { display: none; }
body .wccb-shop-filters__chip-value {
	font-weight: 600;
	white-space: nowrap;
	max-width: 140px;
	overflow: hidden;
	text-overflow: ellipsis;
}
body .wccb-shop-filters__chip.is-active .wccb-shop-filters__chip-icon,
body .wccb-shop-filters__chip.is-active .wccb-shop-filters__chip-caret,
body .wccb-shop-filters__chip.is-active .wccb-shop-filters__chip-clear { color: var(--bg); }

/* Sort pill, ACTIVE state (a non-default sort selected → chip gets `.is-active`
   = ink/dark background, esp. in the mobile Filter&sorteer drawer). The plugin
   flips the sort text to light for `[aria-expanded]` (open) but NOT for
   `.is-active`, so the eyebrow/sep/value kept their explicit --ink colour →
   black-on-black. Flip them to light here. (Ayrton 2026-06-18.) */
body .wccb-shop-filters__chip.is-active .wccb-sort-pill__eyebrow,
body .wccb-shop-filters__chip.is-active .wccb-sort-pill__sep,
body .wccb-shop-filters__chip.is-active .wccb-sort-pill__value {
	color: var(--bg);
}

/* Remove the "Wandformaat" filter (Ayrton 2026-06-18): the collections aren't
   tagged with an orientation, so every option (liggend/staand/vierkant) returned
   0 results — it only emptied the grid. Hidden in the bar AND the mobile drawer
   (both render it as a `.wccb-shop-filters__chip-wrap` containing the radios).
   Theme-side removal; the plugin still registers the param (inert once hidden) —
   a deeper plugin removal can follow. */
body .wccb-shop-filters__chip-wrap:has(input[name="wandformaat"]) {
	display: none;
}
/* ==================================================================
 * Search + 404 — Storefront parent templates (no child search.php/404.php).
 * Bring their `header.page-header` / `.page-title` into the site header
 * pattern: a --page-pad gutter (was edge-to-edge), the Fraunces display H1
 * (was Inter), and the hairline bottom border. Page Consistency Standard
 * 2026-06-17. (Body content — 404 widgets / search result rendering — still
 * uses the Storefront default; a branded child template is the deeper fix.)
 * ================================================================== */
body.search .content-area,
body.error404 .content-area {
	/* the gutter the .page article gives normal pages — search/404 have no
	   article; !important beats Storefront's minified .content-area rule */
	padding-inline: var(--page-pad) !important;
}
body.search .page-header,
body.error404 .page-header {
	padding-block: clamp(var(--s-6), 5vw, var(--s-56)) clamp(var(--s-20), 3vw, 28px);
	margin-bottom: clamp(var(--s-6), 5vw, var(--s-56));
	border-bottom: 1px solid var(--border);
}
body.search .page-title,
body.error404 .page-title {
	font-family: var(--font-display);
	font-size: clamp(34px, 4.5vw, 56px);
	line-height: 1.05;
	letter-spacing: -0.02em;
	font-weight: 400;
	color: var(--ink);
	margin: 0;
}