/* ==========================================================================
   WHYNIET?! — DESIGN SYSTEM
   Donker, editorial, news-broadcast. Harde randen, veel zwart, 1px lijnen.
   Kleuren komen uit :root — overschrijfbaar via het WhyNiet admin-paneel.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. FONTS (self-hosted, geen externe requests)
   -------------------------------------------------------------------------- */

@font-face {
	font-family: 'Archivo Black';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/archivo-black-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Archivo Black';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/archivo-black-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Space Grotesk is een variabel font: één bestand dekt gewicht 300–700. */
@font-face {
	font-family: 'Space Grotesk';
	font-style: normal;
	font-weight: 300 700;
	font-display: swap;
	src: url('../fonts/space-grotesk-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Space Grotesk';
	font-style: normal;
	font-weight: 300 700;
	font-display: swap;
	src: url('../fonts/space-grotesk-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --------------------------------------------------------------------------
   2. TOKENS
   Kleurwaarden hieronder zijn defaults; het admin-paneel print :root-overrides
   in de <head> (inc/tokens.php) die deze overschrijven.
   -------------------------------------------------------------------------- */

:root {
	--wn-bg: #0C0B0A;
	--wn-text: #ECE7DB;
	--wn-accent: #FF4D00;
	--wn-muted: #7A756B;
	--wn-surface: #151412;

	--wn-font-display: 'Archivo Black', Impact, 'Arial Black', sans-serif;
	--wn-font-body: 'Space Grotesk', system-ui, -apple-system, sans-serif;

	/* Vloeiende typografie-schaal */
	--wn-fs-hero: clamp(4rem, 15vw, 14rem);      /* hero-wordmark, mag afsnijden */
	--wn-fs-1: clamp(2.75rem, 7vw, 6rem);
	--wn-fs-2: clamp(2rem, 4.5vw, 3.5rem);
	--wn-fs-3: clamp(1.375rem, 2.5vw, 1.75rem);
	--wn-fs-body: 1rem;
	--wn-fs-small: 0.8125rem;
	--wn-fs-micro: 0.6875rem;                     /* timestamps, tags, labels */

	--wn-space: clamp(4rem, 10vh, 9rem);          /* sectie-afstand */
	--wn-gutter: clamp(1rem, 3vw, 2.5rem);

	--wn-line: 1px solid var(--wn-muted);
	--wn-line-soft: 1px solid rgba(110, 110, 110, 0.35);
	--wn-radius: 0;                               /* harde randen; max 2px toegestaan */

	--wn-ease: cubic-bezier(0.22, 1, 0.36, 1);    /* ease-out, snel uitlopend */
	--wn-dur: 0.3s;
}

/* --------------------------------------------------------------------------
   3. BASIS
   -------------------------------------------------------------------------- */

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

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

body {
	margin: 0;
	background: var(--wn-bg);
	color: var(--wn-text);
	font-family: var(--wn-font-body);
	font-size: var(--wn-fs-body);
	font-weight: 400;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

::selection {
	background: var(--wn-accent);
	color: #000;
}

/* Dunne donkere scrollbar */
::-webkit-scrollbar {
	width: 10px;
}
::-webkit-scrollbar-track {
	background: var(--wn-bg);
}
::-webkit-scrollbar-thumb {
	background: #2a2a2a;
	border: 2px solid var(--wn-bg);
}
::-webkit-scrollbar-thumb:hover {
	background: var(--wn-muted);
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

hr {
	border: 0;
	border-top: var(--wn-line-soft);
	margin: 2rem 0;
}

/* --------------------------------------------------------------------------
   4. TYPOGRAFIE
   -------------------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
	font-family: var(--wn-font-display);
	font-weight: 400;
	text-transform: uppercase;
	line-height: 0.92;
	letter-spacing: -0.01em;
	margin: 0 0 0.6em;
	color: var(--wn-text);
}

h1 { font-size: var(--wn-fs-1); }
h2 { font-size: var(--wn-fs-2); }
h3 { font-size: var(--wn-fs-3); }
h4, h5, h6 { font-family: var(--wn-font-body); font-weight: 700; font-size: 1.0625rem; letter-spacing: 0.06em; }

p {
	margin: 0 0 1.25em;
}

a {
	color: var(--wn-text);
	text-decoration: none;
	transition: color var(--wn-dur) var(--wn-ease);
}

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

a:focus-visible {
	outline: 1px solid var(--wn-accent);
	outline-offset: 3px;
}

/* Oversized display-kop die van het scherm mag lopen */
.wn-display {
	font-family: var(--wn-font-display);
	font-size: var(--wn-fs-hero);
	text-transform: uppercase;
	line-height: 0.85;
	letter-spacing: -0.02em;
	white-space: nowrap;
}

/* --------------------------------------------------------------------------
   5. UTILITIES — news-broadcast accenten
   -------------------------------------------------------------------------- */

/* Tag-chip: "TRENDING 🔥", "LAATSTE STUKS", "NIEUW" */
.wn-tag {
	display: inline-block;
	font-size: var(--wn-fs-micro);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	padding: 0.3em 0.7em;
	border: var(--wn-line);
	color: var(--wn-text);
	line-height: 1.4;
}

.wn-tag--accent {
	border-color: var(--wn-accent);
	color: var(--wn-accent);
}

.wn-tag--solid {
	background: var(--wn-accent);
	border-color: var(--wn-accent);
	color: #000;
}

/* Timestamp: "3 UUR GELEDEN GEDROPT" */
.wn-timestamp {
	font-size: var(--wn-fs-micro);
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--wn-muted);
}

/* LIVE-marker met pulserende dot */
.wn-live {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	font-size: var(--wn-fs-micro);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--wn-accent);
}

.wn-live::before {
	content: '';
	width: 7px;
	height: 7px;
	background: var(--wn-accent);
	border-radius: 50%;
	animation: wn-pulse 1.6s ease-in-out infinite;
}

@keyframes wn-pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.25; }
}

/* --------------------------------------------------------------------------
   6. KNOPPEN
   Alle WP/Woo-knoppen + eigen .wn-btn variants. Hard, uppercase, 0 radius.
   -------------------------------------------------------------------------- */

button,
input[type='submit'],
input[type='button'],
.button,
.wp-block-button__link,
.wn-btn {
	display: inline-block;
	font-family: var(--wn-font-body);
	font-size: var(--wn-fs-small);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--wn-text);
	background: transparent;
	border: var(--wn-line);
	border-radius: var(--wn-radius);
	padding: 0.9em 1.8em;
	cursor: pointer;
	text-align: center;
	transition: background var(--wn-dur) var(--wn-ease),
		color var(--wn-dur) var(--wn-ease),
		border-color var(--wn-dur) var(--wn-ease);
}

button:hover,
input[type='submit']:hover,
input[type='button']:hover,
.button:hover,
.wp-block-button__link:hover,
.wn-btn:hover {
	background: var(--wn-text);
	border-color: var(--wn-text);
	color: #000;
}

/* Primaire CTA — het oranje reserveren we hiervoor */
.wn-btn--primary,
.single_add_to_cart_button,
.checkout-button,
#place_order {
	background: var(--wn-accent);
	border-color: var(--wn-accent);
	color: #000;
}

.wn-btn--primary:hover,
.single_add_to_cart_button:hover,
.checkout-button:hover,
#place_order:hover {
	background: var(--wn-text);
	border-color: var(--wn-text);
	color: #000;
}

button:focus-visible,
.button:focus-visible,
.wn-btn:focus-visible {
	outline: 1px solid var(--wn-accent);
	outline-offset: 3px;
}

button:disabled,
.button:disabled,
.single_add_to_cart_button:disabled {
	background: var(--wn-surface);
	border-color: var(--wn-line-soft);
	color: var(--wn-muted);
	cursor: not-allowed;
}

/* --------------------------------------------------------------------------
   7. FORMULIEREN
   -------------------------------------------------------------------------- */

input[type='text'],
input[type='email'],
input[type='url'],
input[type='password'],
input[type='search'],
input[type='number'],
input[type='tel'],
textarea,
select {
	font-family: var(--wn-font-body);
	font-size: var(--wn-fs-body);
	color: var(--wn-text);
	background: var(--wn-surface);
	border: var(--wn-line-soft);
	border-radius: var(--wn-radius);
	padding: 0.75em 1em;
	width: 100%;
	max-width: 100%;
	transition: border-color var(--wn-dur) var(--wn-ease);
}

input:focus,
textarea:focus,
select:focus {
	outline: none;
	border-color: var(--wn-accent);
}

::placeholder {
	color: var(--wn-muted);
	text-transform: uppercase;
	font-size: var(--wn-fs-small);
	letter-spacing: 0.08em;
}

label {
	display: block;
	font-size: var(--wn-fs-micro);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--wn-muted);
	margin-bottom: 0.5em;
}

/* --------------------------------------------------------------------------
   8. LAYOUT — Storefront-structuur, onze look
   -------------------------------------------------------------------------- */

.col-full {
	max-width: 1440px;
	margin: 0 auto;
	padding: 0 var(--wn-gutter);
}

.site-content {
	padding: 2.5rem 0 var(--wn-space);
}

/* Breadcrumbs passen niet bij de feed-esthetiek */
.storefront-breadcrumb {
	display: none;
}

/* ------------------------------------------------------------------ HEADER */

.site-header {
	background: var(--wn-bg);
	border-bottom: var(--wn-line-soft);
	position: relative;
	z-index: 50;
}

.site-header .col-full {
	display: flex;
	align-items: center;
	gap: 2rem;
	min-height: 64px;
}

.site-branding {
	margin: 0;
	flex-shrink: 0;
}

.site-branding .site-title,
.site-branding .beta {
	font-family: var(--wn-font-display);
	font-size: 1.5rem;
	margin: 0;
	line-height: 1;
	letter-spacing: -0.01em;
}

.site-branding .site-title a {
	color: var(--wn-text);
}

.site-branding .site-description {
	display: none;
}

/* Zoekveld in de header verbergen we — past niet in de minimale nav */
.site-header .site-search {
	display: none;
}

.storefront-primary-navigation {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	flex: 1;
	min-width: 0; /* mag krimpen zodat een lange nav de cart-knop niet uit beeld duwt */
	gap: 2rem;
}

.main-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap; /* wrap i.p.v. horizontale overflow bij veel items */
	gap: 1.75rem;
}

.main-navigation ul li a {
	font-size: var(--wn-fs-small);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--wn-text);
}

.main-navigation ul li a:hover {
	color: var(--wn-accent);
}

.main-navigation ul ul {
	display: none; /* submenu's stylen we wanneer nodig */
}

/* Storefront rendert náást de primary-nav óók een aparte handheld-nav in de
   header. Wij tonen overal alleen de primary-nav — anders staat het menu dubbel.
   (Storefront verbergt handheld normaal via z'n eigen CSS, maar die dequeuen we.) */
.handheld-navigation {
	display: none;
}

/* Cart-link in de header */
.site-header-cart {
	list-style: none;
	margin: 0;
	padding: 0;
	position: relative;
}

.site-header-cart .cart-contents {
	font-size: var(--wn-fs-small);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.14em;
}

.site-header-cart .widget_shopping_cart {
	display: none; /* dropdown-cart vervangen we door de drawer (fase 2) */
}

/* Mobiele menu-toggle (Storefront JS zet .toggled op .main-navigation) */
button.menu-toggle {
	display: none;
	border: var(--wn-line);
	background: transparent;
	padding: 0.5em 1em;
	/* Browsers geven buttons zwarte tekst — onleesbaar op de donkere bg. */
	color: var(--wn-text);
	font-size: var(--wn-fs-micro);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

@media (max-width: 767px) {
	button.menu-toggle {
		display: inline-block;
		margin-left: auto;
	}

	.storefront-primary-navigation {
		flex-direction: column;
		align-items: stretch;
		width: 100%;
	}

	/* Nav-lijst stapelt en vult de breedte — geldt voor een toegewezen menu
	   (ul.menu) én de WP fallback-paginalijst (div.menu > ul). */
	.main-navigation ul {
		flex-direction: column;
		gap: 0;
		width: 100%;
	}

	/* Dicht = géén breedte-/hoogtebijdrage. We togglen alleen de primary-nav
	   (de handheld-nav blijft altijd verborgen, zie boven), plus de directe
	   ul-fallback als er geen container-div is. */
	.main-navigation > .primary-navigation,
	.main-navigation > ul {
		display: none;
	}

	/* Open = fullscreen overlay (geen inline uitklap die de site omlaag duwt;
	   schaalt ook met meer categorieën). De toggle wordt de sluitknop. */
	.main-navigation.toggled {
		position: fixed;
		inset: 0;
		z-index: 99960; /* onder cart-drawer (99980) en print-overlay */
		background: var(--wn-bg);
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: var(--wn-gutter);
		overflow-y: auto;
	}

	.main-navigation.toggled button.menu-toggle {
		position: absolute;
		top: 1rem;
		right: var(--wn-gutter);
		margin: 0;
	}

	.main-navigation.toggled > .primary-navigation,
	.main-navigation.toggled > ul {
		display: block;
	}

	@media (prefers-reduced-motion: no-preference) {
		.main-navigation.toggled > .primary-navigation,
		.main-navigation.toggled > ul {
			animation: wn-menu-in 0.25s var(--wn-ease);
		}
	}

	.main-navigation li {
		display: block;
		width: 100%;
	}

	.main-navigation ul li a {
		display: block;
		padding: 0.75em 0;
	}

	/* Grote editorial menuregels in de overlay */
	.main-navigation.toggled ul li a {
		font-family: var(--wn-font-display);
		font-size: clamp(2rem, 9vw, 3.25rem);
		line-height: 1.1;
		letter-spacing: -0.01em;
		padding: 0.3em 0;
	}

	/* Merkaccent: eerste letter van elke menuregel in oranje (à la "?!") */
	.main-navigation.toggled ul li a::first-letter {
		color: var(--wn-accent);
	}

	.site-header .col-full {
		flex-wrap: wrap;
		padding-top: 0.75rem;
		padding-bottom: 0.75rem;
	}
}

@keyframes wn-menu-in {
	from {
		opacity: 0;
		transform: translateY(0.75rem);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

/* Pagina achter het open mobiele menu scrollt niet mee */
html.wn-menu-open {
	overflow: hidden;
}

/* ------------------------------------------------------------------ FOOTER */

.site-footer {
	background: var(--wn-bg);
	border-top: var(--wn-line-soft);
	color: var(--wn-muted);
	font-size: var(--wn-fs-small);
	padding: 3rem 0 2rem;
}

.site-footer a {
	color: var(--wn-muted);
}

.site-footer a:hover {
	color: var(--wn-accent);
}

.site-footer .widget-title {
	font-family: var(--wn-font-body);
	font-size: var(--wn-fs-micro);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--wn-text);
}

/* --------------------------------------------------------------------------
   9. WOOCOMMERCE — basis zodat niets kaal oogt vóór fase 4/5
   (shop- en productpagina's krijgen in latere fases hun eigen laag)
   -------------------------------------------------------------------------- */

ul.products {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: var(--wn-gutter);
}

ul.products li.product {
	background: var(--wn-surface);
	border: var(--wn-line-soft);
	padding: 0;
}

ul.products li.product a img {
	width: 100%;
}

ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--wn-font-body);
	font-size: var(--wn-fs-body);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	padding: 1rem 1rem 0.25rem;
	margin: 0;
}

ul.products li.product .price {
	display: block;
	padding: 0 1rem 1rem;
	font-weight: 700;
	color: var(--wn-text);
}

ul.products li.product .button {
	margin: 0 1rem 1rem;
}

.price ins {
	text-decoration: none;
	color: var(--wn-accent);
}

.price del {
	color: var(--wn-muted);
}

.onsale {
	background: var(--wn-accent);
	color: #000;
	font-size: var(--wn-fs-micro);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	padding: 0.3em 0.7em;
	position: absolute;
	top: 0.75rem;
	left: 0.75rem;
	z-index: 2;
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	background: var(--wn-surface);
	border: var(--wn-line-soft);
	border-left: 3px solid var(--wn-accent);
	color: var(--wn-text);
	padding: 1em 1.25em;
	margin: 0 0 1.5rem;
	list-style: none;
}

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

table th,
table td {
	border: var(--wn-line-soft);
	padding: 0.75em 1em;
	text-align: left;
}

table th {
	font-size: var(--wn-fs-micro);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--wn-muted);
}

/* --------------------------------------------------------------------------
   10. TOEGANKELIJKHEID & MOTION
   -------------------------------------------------------------------------- */

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

/* Harde eis: bij reduced motion gaat ALLE beweging uit, ook toekomstige
   effecten uit fase 2 (die checken dit óók in JS). */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ==========================================================================
   11. EFFECTENLAAG (fase 2)
   Alle beweging zit in JS (main.js); hier alleen de statische opmaak.
   ========================================================================== */

/* ------------------------------------------------------------- PRELOADER */

.wn-preloader {
	position: fixed;
	inset: 0;
	z-index: 99995;
	background: var(--wn-bg);
	display: none;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2rem;
	cursor: pointer;
}

html.wn-preloading .wn-preloader {
	display: flex;
}

html.wn-preloading {
	overflow: hidden;
}

.wn-preloader-mark {
	font-family: var(--wn-font-display);
	font-size: clamp(2.5rem, 9vw, 7rem);
	color: var(--wn-text);
	overflow: hidden;
	line-height: 1;
	white-space: nowrap;
}

.wn-preloader-mark span {
	display: inline-block;
	will-change: transform;
}

.wn-preloader-skip {
	font-size: var(--wn-fs-micro);
	letter-spacing: 0.14em;
	color: var(--wn-muted);
	text-transform: uppercase;
	margin: 0;
}

/* ------------------------------------------------------ PAGINATRANSITIE */

.wn-transition {
	position: fixed;
	inset: 0;
	z-index: 99990;
	background: var(--wn-bg);
	display: flex;
	align-items: center;
	justify-content: center;
	transform: translateY(100%);
	visibility: hidden;
	pointer-events: none;
}

/* Bij aankomst op een nieuwe pagina dekt de overlay direct alles af
   (class komt uit het inline boot-script, vóór de eerste paint). */
html.wn-navigating .wn-transition {
	transform: none;
	visibility: visible;
}

.wn-transition-mark {
	font-family: var(--wn-font-display);
	font-size: clamp(2rem, 6vw, 4.5rem);
	color: var(--wn-text);
	letter-spacing: -0.01em;
}

/* -------------------------------------------------------- CUSTOM CURSOR */

/* Anker is 0×0; de dot/cirkel centreert zichzelf. GSAP stuurt alleen x/y. */
.wn-cursor {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 99999;
	width: 0;
	height: 0;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.2s ease;
}

.wn-cursor.is-visible {
	opacity: 1;
}

.wn-cursor::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 10px;
	height: 10px;
	background: var(--wn-text);
	border-radius: 50%;
	transform: translate(-50%, -50%);
	transition: width 0.25s var(--wn-ease), height 0.25s var(--wn-ease),
		background 0.25s var(--wn-ease);
	mix-blend-mode: difference;
}

.wn-cursor-label {
	position: absolute;
	top: 0;
	left: 0;
	transform: translate(-50%, -50%);
	font-size: var(--wn-fs-micro);
	font-weight: 700;
	letter-spacing: 0.1em;
	color: #000;
	opacity: 0;
	white-space: nowrap;
	transition: opacity 0.2s ease;
}

/* Groeit met label ("BEKIJK" / "SLEEP") boven kaarten en galerijen */
.wn-cursor.is-label::before {
	width: 72px;
	height: 72px;
	background: var(--wn-accent);
	mix-blend-mode: normal;
}

.wn-cursor.is-label .wn-cursor-label {
	opacity: 1;
}

/* Pijl boven links/knoppen */
.wn-cursor.is-arrow::before {
	width: 28px;
	height: 28px;
}

/* Native cursor alleen verbergen waar de custom cursor actief is */
html.wn-cursor-active body,
html.wn-cursor-active body * {
	cursor: none !important;
}

html.wn-cursor-active input[type='text'],
html.wn-cursor-active input[type='email'],
html.wn-cursor-active input[type='search'],
html.wn-cursor-active input[type='number'],
html.wn-cursor-active input[type='password'],
html.wn-cursor-active input[type='tel'],
html.wn-cursor-active textarea {
	cursor: text !important;
}

/* ----------------------------------------------------------- FILMKORREL */

.wn-grain {
	position: fixed;
	inset: -100px;
	z-index: 99960;
	pointer-events: none;
	opacity: 0.04; /* harde eis: ≤ 0.05 — textuur, geen ruis */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	background-size: 240px 240px;
}

/* Beweging alleen op desktop met fine pointer; mobiel = statisch */
@media (hover: hover) and (pointer: fine) {
	body.wn-fx-smooth ~ .wn-grain,
	.wn-grain {
		animation: wn-grain-shift 0.9s steps(2) infinite;
	}
}

@keyframes wn-grain-shift {
	0% { transform: translate(0, 0); }
	25% { transform: translate(-38px, 22px); }
	50% { transform: translate(24px, -30px); }
	75% { transform: translate(-14px, -12px); }
	100% { transform: translate(0, 0); }
}

/* --------------------------------------------------------- GLITCH HOVER */

/* Micro RGB-split, ≤ 150ms, alleen hover, alleen desktop, nooit op tekst.
   Gebruik: <div class="wn-glitch"><img …></div> (productkaarten, fase 4/5). */
@media (hover: hover) and (pointer: fine) {
	body.wn-fx-glitch .wn-glitch:hover img {
		animation: wn-glitch-anim 0.15s steps(3) 1;
	}
}

@keyframes wn-glitch-anim {
	0% {
		transform: translate(0);
		filter: none;
	}
	33% {
		transform: translate(-3px, 1px);
		filter: drop-shadow(3px 0 0 rgba(255, 0, 60, 0.6)) drop-shadow(-3px 0 0 rgba(0, 255, 255, 0.5));
	}
	66% {
		transform: translate(3px, -1px);
		filter: drop-shadow(-3px 0 0 rgba(255, 0, 60, 0.6)) drop-shadow(3px 0 0 rgba(0, 255, 255, 0.5));
	}
	100% {
		transform: translate(0);
		filter: none;
	}
}

/* ==========================================================================
   12. CART DRAWER
   ========================================================================== */

.wn-cart-toggle {
	font-size: var(--wn-fs-small);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	white-space: nowrap;
}

.wn-cart-toggle .wn-cart-count {
	color: var(--wn-accent);
}

/* Tap targets: minimaal 44px op touch (Fix 16) */
.wn-drawer-close {
	min-width: 44px;
	min-height: 44px;
}

@media (max-width: 767px) {
	.main-navigation ul li a {
		display: flex;
		align-items: center;
		min-height: 44px;
	}

	.wn-cart-toggle {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}

	button.menu-toggle {
		min-height: 44px;
	}
}

.wn-drawer-backdrop {
	position: fixed;
	inset: 0;
	z-index: 99970;
	background: rgba(0, 0, 0, 0.65);
	opacity: 0;
	transition: opacity 0.35s var(--wn-ease);
}

html.wn-drawer-open .wn-drawer-backdrop {
	opacity: 1;
}

.wn-drawer {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 99980;
	width: min(440px, 100vw);
	background: var(--wn-surface);
	border-left: var(--wn-line-soft);
	transform: translateX(100%);
	transition: transform 0.35s var(--wn-ease);
	display: flex;
}

html.wn-drawer-open .wn-drawer {
	transform: none;
}

html.wn-drawer-open {
	overflow: hidden;
}

.wn-drawer-inner {
	display: flex;
	flex-direction: column;
	width: 100%;
	padding: 1.25rem 1.5rem;
	overflow-y: auto;
}

.wn-drawer.is-busy .wn-drawer-inner {
	opacity: 0.5;
	pointer-events: none;
}

.wn-drawer-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-bottom: 1rem;
	border-bottom: var(--wn-line-soft);
}

.wn-drawer-title {
	font-size: 1.25rem;
	margin: 0;
}

.wn-drawer-count {
	color: var(--wn-accent);
}

.wn-drawer-close {
	border: none;
	background: none;
	font-size: 1.75rem;
	line-height: 1;
	padding: 0 0.25em;
	color: var(--wn-text);
}

.wn-drawer-close:hover {
	background: none;
	color: var(--wn-accent);
}

.wn-drawer-error {
	color: var(--wn-accent);
	font-size: var(--wn-fs-small);
	margin: 0.75rem 0 0;
}

.wn-drawer-empty {
	margin: auto 0;
	text-align: center;
	display: grid;
	gap: 0.75rem;
	justify-items: center;
	padding: 3rem 0;
}

.wn-drawer-empty-title {
	font-family: var(--wn-font-display);
	font-size: 1.5rem;
	text-transform: uppercase;
	margin: 0;
}

.wn-drawer-items {
	list-style: none;
	margin: 0;
	padding: 1rem 0;
	display: grid;
	gap: 1.25rem;
}

.wn-drawer-item {
	display: grid;
	grid-template-columns: 72px 1fr auto;
	gap: 1rem;
	align-items: start;
}

.wn-drawer-item-thumb img {
	width: 72px;
	height: 90px;
	object-fit: cover;
	background: var(--wn-bg);
	border: var(--wn-line-soft);
}

.wn-drawer-item-name {
	display: block;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-size: var(--wn-fs-small);
}

.wn-drawer-item-meta {
	font-size: var(--wn-fs-micro);
	color: var(--wn-muted);
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.wn-drawer-item-meta dl,
.wn-drawer-item-meta dt,
.wn-drawer-item-meta dd {
	display: inline;
	margin: 0;
}

.wn-drawer-item-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 0.6rem;
}

.wn-qty {
	display: inline-flex;
	align-items: center;
	border: var(--wn-line-soft);
}

.wn-qty-btn {
	border: none;
	background: none;
	padding: 0.25em 0.7em;
	font-size: 1rem;
	line-height: 1.4;
	color: var(--wn-text);
}

.wn-qty-btn:hover {
	background: var(--wn-accent);
	color: #000;
}

.wn-qty-num {
	min-width: 2em;
	text-align: center;
	font-size: var(--wn-fs-small);
	font-weight: 700;
}

.wn-drawer-item-price {
	font-weight: 700;
	font-size: var(--wn-fs-small);
}

.wn-item-remove {
	border: none;
	background: none;
	color: var(--wn-muted);
	font-size: 1.1rem;
	line-height: 1;
	padding: 0 0.2em;
}

.wn-item-remove:hover {
	background: none;
	color: var(--wn-accent);
}

.wn-drawer-upsell {
	border-top: var(--wn-line-soft);
	padding: 1rem 0;
}

.wn-drawer-upsell-title {
	font-size: var(--wn-fs-micro);
	font-weight: 700;
	letter-spacing: 0.14em;
	color: var(--wn-accent);
	text-transform: uppercase;
	margin: 0 0 0.75rem;
}

.wn-drawer-upsell-row {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0.75rem;
}

.wn-drawer-upsell-row img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	background: var(--wn-bg);
	border: var(--wn-line-soft);
}

.wn-drawer-upsell-name {
	display: block;
	font-size: var(--wn-fs-micro);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin-top: 0.4rem;
}

.wn-drawer-upsell-price {
	display: block;
	font-size: var(--wn-fs-micro);
	color: var(--wn-muted);
}

.wn-drawer-foot {
	margin-top: auto;
	border-top: var(--wn-line-soft);
	padding-top: 1rem;
	display: grid;
	gap: 0.6rem;
}

.wn-drawer-subtotal {
	display: flex;
	justify-content: space-between;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.wn-drawer-checkout {
	width: 100%;
}

.wn-drawer-continue {
	border: none;
	background: none;
	color: var(--wn-muted);
	font-size: var(--wn-fs-micro);
	letter-spacing: 0.14em;
	text-decoration: underline;
	text-underline-offset: 3px;
	padding: 0.25em;
}

.wn-drawer-continue:hover {
	background: none;
	color: var(--wn-accent);
}

/* ==========================================================================
   13. HOMEPAGE + FEED-KAARTEN + FOOTER (fase 3)
   ========================================================================== */

/* Volle breedte binnen Storefronts .col-full wrapper.
   We breken uit de .col-full-gutter met negatieve inline-marges i.p.v. 100vw —
   100vw telt de scrollbar mee en gaf horizontale overflow. */
.wn-bleed {
	width: auto;
	margin-inline: calc(var(--wn-gutter) * -1);
}

.wn-section {
	padding: calc(var(--wn-space) / 2) 0;
}

.wn-section-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1.5rem;
	border-bottom: var(--wn-line-soft);
	padding-bottom: 1.15rem;
	margin-bottom: 2.75rem;
}

.wn-section-title {
	margin: 0;
}

/* Editorial subkopje naast een sectietitel — "deze week gecureerd" */
.wn-section-kicker {
	font-size: var(--wn-fs-micro);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.22em;
	color: var(--wn-muted);
	white-space: nowrap;
}

/* ---------------------------------------------------------------- TICKER */

.wn-ticker {
	background: var(--wn-accent);
	color: #000;
	overflow: hidden;
	white-space: nowrap;
	font-size: var(--wn-fs-micro);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	padding: 0.45em 0;
}

.wn-ticker-track {
	display: inline-flex;
	animation: wn-marquee var(--wn-ticker-dur, 30s) linear infinite;
	will-change: transform;
}

.wn-ticker:hover .wn-ticker-track {
	animation-play-state: paused;
}

.wn-ticker-group {
	display: inline-flex;
	flex-shrink: 0;
}

.wn-ticker-item,
.wn-ticker-sep {
	padding: 0 1.5rem;
}

.wn-ticker-sep {
	opacity: 0.5;
}

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

/* Reduced motion: ticker staat stil, eerste berichten blijven leesbaar */
@media (prefers-reduced-motion: reduce) {
	.wn-ticker-track {
		animation: none;
	}
}

/* ------------------------------------------------------------------ HERO */

.wn-hero {
	min-height: 88vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	overflow: hidden;
	position: relative;
	padding: 3rem var(--wn-gutter);
}

.wn-hero-kicker {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	margin: 0 0 1.75rem;
}

.wn-hero-stack {
	position: relative;
}

/* Met productfoto: twee kolommen, wordmark links, drop rechts — geen overlap. */
.wn-hero-stack--with-img {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: clamp(1.5rem, 4vw, 4rem);
}

.wn-hero-stack--with-img .wn-hero-mark {
	font-size: clamp(3rem, 10.5vw, 10rem);
}

.wn-hero-mark {
	font-size: var(--wn-fs-hero);
	line-height: 0.82;
	letter-spacing: -0.03em;
	margin: 0;
	display: flex;
	flex-direction: column;
	position: relative;
	z-index: 2;
	/* Tekst mag de klikbare hero-productfoto eronder niet blokkeren. */
	pointer-events: none;
}

.wn-hero-line {
	display: block;
	will-change: transform;
}

/* Tweede regel schuift rechts uit beeld — mag bloeden */
.wn-hero-line--2 {
	align-self: flex-end;
	margin-right: -0.08em;
	color: var(--wn-accent);
	position: relative;
	z-index: 0;
}

.wn-hero-img {
	width: clamp(200px, 26vw, 420px);
	display: block;
}

/* Mobiel: foto onder de wordmark, rechts uitgelijnd. */
@media (max-width: 767px) {
	.wn-hero-stack--with-img {
		grid-template-columns: 1fr;
	}

	.wn-hero-img {
		width: min(70vw, 320px);
		justify-self: end;
	}
}

.wn-hero-img img {
	width: 100%;
	height: auto;
	border: var(--wn-line-soft);
	filter: grayscale(20%) contrast(1.05);
	transition: filter 0.3s var(--wn-ease);
}

.wn-hero-img:hover img {
	filter: grayscale(0%) contrast(1.05);
}

.wn-hero-sub {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 2rem;
	margin-top: 3.5rem;
	flex-wrap: wrap;
}

.wn-hero-tagline {
	font-size: var(--wn-fs-small);
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wn-muted);
	margin: 0;
	line-height: 1.9;
}

/* ---------------------------------------------------------- FEED-KAARTEN */

.wn-feed {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--wn-gutter);
}

@media (min-width: 900px) {
	.wn-feed {
		grid-template-columns: repeat(3, 1fr);
	}
}

.wn-card {
	background: var(--wn-surface);
	border: var(--wn-line-soft);
	display: flex;
	flex-direction: column;
}

.wn-card-media {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: 4 / 5;
	background: var(--wn-bg);
}

.wn-card-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s var(--wn-ease);
}

.wn-card-media:hover img {
	transform: scale(1.03);
}

/* Hover-swap naar de vrouw-shot */
.wn-card-hover {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 0.25s var(--wn-ease);
}

@media (hover: hover) and (pointer: fine) {
	.wn-card-media:hover .wn-card-hover {
		opacity: 1;
	}
}

/* Modelvoorkeur VROUW: kaarten tonen standaard de vrouw-shot (ook op touch,
   waar hover niet bestaat); hover onthult dan juist de man-shot. */
html.wn-model-vrouw .wn-card-hover {
	opacity: 1;
}

@media (hover: hover) and (pointer: fine) {
	html.wn-model-vrouw .wn-card-media:hover .wn-card-hover {
		opacity: 0;
	}
}

.wn-card-chips {
	position: absolute;
	top: 0.75rem;
	left: 0.75rem;
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	z-index: 2;
}

.wn-card-chips .wn-tag {
	background: var(--wn-bg);
}

.wn-card-chips .wn-tag--solid {
	background: var(--wn-accent);
}

/* Uitverkocht: desaturatie + diagonale GEMIST-stempel; kaart blijft klikbaar */
.wn-card--soldout .wn-card-media img {
	filter: grayscale(100%) brightness(0.55);
}

.wn-card-stamp {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) rotate(-12deg);
	font-family: var(--wn-font-display);
	font-size: clamp(1.75rem, 4vw, 2.75rem);
	color: var(--wn-accent);
	border: 3px solid var(--wn-accent);
	padding: 0.1em 0.5em;
	letter-spacing: 0.02em;
	z-index: 3;
	white-space: nowrap;
}

/* Flex-kolom + margin-top:auto op de prijs: prijzen staan op één lijn,
   ook als de ene kaart een titel van twee regels heeft en de andere één. */
.wn-card-meta {
	padding: 1.15rem 1.15rem 1.35rem;
	display: flex;
	flex-direction: column;
	gap: 0.45rem;
	flex: 1;
}

.wn-card-meta .wn-timestamp {
	margin: 0;
}

.wn-card-name {
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-size: var(--wn-fs-small);
	line-height: 1.35;
}

/* Curator-oneliner: de "take" die de kaart editorial maakt */
.wn-card-take {
	margin: 0;
	font-size: var(--wn-fs-small);
	font-style: italic;
	line-height: 1.5;
	color: var(--wn-muted);
	text-wrap: pretty;
}

.wn-card-price {
	font-weight: 700;
	font-size: var(--wn-fs-body);
	margin-top: auto;
	padding-top: 0.35rem;
}

.wn-card-price del {
	color: var(--wn-muted);
	font-weight: 400;
}

.wn-card-price ins {
	text-decoration: none;
	color: var(--wn-accent);
}

/* ------------------------------------------------------------- COUNTDOWN */

.wn-countdown {
	background: var(--wn-surface);
	border-top: var(--wn-line-soft);
	border-bottom: var(--wn-line-soft);
	padding: calc(var(--wn-space) / 1.5) var(--wn-gutter);
	display: grid;
	justify-items: center;
	text-align: center;
	gap: 1.5rem;
	margin-block: calc(var(--wn-space) / 2);
}

.wn-countdown-digits {
	display: flex;
	gap: clamp(1rem, 4vw, 3rem);
}

.wn-countdown-unit {
	display: grid;
	gap: 0.4rem;
	justify-items: center;
}

.wn-countdown-unit span {
	font-family: var(--wn-font-display);
	font-size: clamp(2.75rem, 9vw, 7rem);
	line-height: 1;
	font-variant-numeric: tabular-nums;
	min-width: 2ch;
}

.wn-countdown-unit small {
	font-size: var(--wn-fs-micro);
	font-weight: 700;
	letter-spacing: 0.14em;
	color: var(--wn-muted);
}

.wn-countdown-live {
	font-family: var(--wn-font-display);
	font-size: clamp(2.75rem, 9vw, 7rem);
	color: var(--wn-accent);
	margin: 0;
}

/* ---------------------------------------------------------------- SIGNUP */

.wn-signup-box {
	border: var(--wn-line-soft);
	padding: clamp(1.5rem, 5vw, 3.5rem);
	display: grid;
	gap: 1rem;
	justify-items: start;
	background: var(--wn-surface);
}

.wn-signup-heading {
	margin: 0;
	max-width: 14ch;
}

.wn-signup-form {
	display: flex;
	gap: 0.75rem;
	width: 100%;
	max-width: 560px;
	flex-wrap: wrap;
}

.wn-signup-form input[type='email'] {
	flex: 1 1 260px;
	background: var(--wn-bg);
}

.wn-signup-form.is-busy {
	opacity: 0.6;
	pointer-events: none;
}

/* Honeypot — visueel én voor screenreaders verborgen */
.wn-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	opacity: 0;
}

.wn-signup-msg {
	font-size: var(--wn-fs-small);
	font-weight: 700;
	letter-spacing: 0.08em;
	margin: 0;
	min-height: 1.4em; /* geen layout shift als de melding verschijnt */
}

.wn-signup-msg.is-error {
	color: var(--wn-accent);
}

/* ---------------------------------------------------------------- FOOTER */

.wn-footer-grid {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1fr;
	gap: var(--wn-gutter);
	padding-bottom: 2.5rem;
}

@media (max-width: 767px) {
	.wn-footer-grid {
		grid-template-columns: 1fr 1fr;
	}
}

.wn-footer-mark {
	font-family: var(--wn-font-display);
	font-size: 1.5rem;
	color: var(--wn-text);
	margin: 0 0 0.75rem;
}

.wn-footer-title {
	font-size: var(--wn-fs-micro);
	font-weight: 700;
	letter-spacing: 0.14em;
	color: var(--wn-text);
	margin: 0 0 0.75rem;
}

.wn-footer-col {
	display: grid;
	gap: 0.5rem;
	align-content: start;
	font-size: var(--wn-fs-small);
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.wn-footer-bottom {
	border-top: var(--wn-line-soft);
	padding-top: 1.5rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	flex-wrap: wrap;
	font-size: var(--wn-fs-micro);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.wn-footer-bottom p {
	margin: 0;
}

.wn-paymarks {
	display: flex;
	gap: 0.5rem;
}

.wn-paymark {
	border: var(--wn-line-soft);
	padding: 0.35em 0.8em;
	font-weight: 700;
	white-space: nowrap;
}

/* ==========================================================================
   14. SHOP — social feed archief (fase 4)
   ========================================================================== */

.wn-shop-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1.5rem;
	border-bottom: var(--wn-line-soft);
	padding-bottom: 1.25rem;
	margin-bottom: 1.25rem;
	flex-wrap: wrap;
}

.wn-shop-title {
	margin: 0.25em 0 0;
}

/* ------------------------------------------------------------- FILTERBALK */

.wn-filters {
	display: flex;
	gap: 2.5rem;
	flex-wrap: wrap;
	padding: 0.75rem 0 1.5rem;
	border-bottom: var(--wn-line-soft);
	margin-bottom: 2rem;
}

.wn-filter-group {
	border: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-wrap: wrap;
}

.wn-filter-label {
	font-size: var(--wn-fs-micro);
	font-weight: 700;
	letter-spacing: 0.14em;
	color: var(--wn-muted);
	padding-right: 0.5rem;
}

.wn-filter-chip input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.wn-filter-chip span {
	display: inline-block;
	font-size: var(--wn-fs-micro);
	font-weight: 700;
	letter-spacing: 0.12em;
	padding: 0.4em 0.9em;
	border: var(--wn-line-soft);
	cursor: pointer;
	transition: border-color var(--wn-dur) var(--wn-ease), color var(--wn-dur) var(--wn-ease);
}

.wn-filter-chip:hover span {
	border-color: var(--wn-text);
}

.wn-filter-chip input:checked + span {
	background: var(--wn-text);
	border-color: var(--wn-text);
	color: #000;
}

.wn-filter-chip input:focus-visible + span {
	outline: 1px solid var(--wn-accent);
	outline-offset: 3px;
}

/* MODEL-toggle: weergavekeuze (man/vrouw-shots), géén productfilter */
.wn-model-chip {
	font: inherit;
	background: none;
	cursor: pointer;
	font-size: var(--wn-fs-micro);
	font-weight: 700;
	letter-spacing: 0.12em;
	padding: 0.4em 0.9em;
	border: var(--wn-line-soft);
	color: var(--wn-text);
}

.wn-model-chip:hover {
	border-color: var(--wn-text);
}

.wn-model-chip.is-active {
	background: var(--wn-text);
	border-color: var(--wn-text);
	color: #000;
}

/* --------------------------------------------------- ASYMMETRISCH GRID */

.wn-shop-results.is-busy {
	opacity: 0.4;
	pointer-events: none;
	transition: opacity 0.2s ease;
}

/* Mobiel: strakke 2 kolommen (geërfd van .wn-feed). Desktop: editorial
   ritme — rij van 2 brede kaarten, dan rij van 3 smallere, en herhaal. */
@media (min-width: 900px) {
	.wn-feed--shop {
		grid-template-columns: repeat(6, 1fr);
	}

	.wn-feed--shop .wn-card {
		grid-column: span 2;
	}

	.wn-feed--shop .wn-card:nth-child(5n + 1),
	.wn-feed--shop .wn-card:nth-child(5n + 2) {
		grid-column: span 3;
	}
}

.wn-shop-empty {
	font-family: var(--wn-font-display);
	font-size: var(--wn-fs-3);
	text-transform: uppercase;
	color: var(--wn-muted);
	padding: 4rem 0;
	text-align: center;
}

.wn-shop-pagination {
	display: flex;
	justify-content: center;
	gap: 0.5rem;
	padding: 2.5rem 0 0;
}

.wn-shop-pagination .page-numbers {
	display: inline-block;
	min-width: 2.5em;
	text-align: center;
	padding: 0.5em;
	border: var(--wn-line-soft);
	font-size: var(--wn-fs-small);
	font-weight: 700;
}

.wn-shop-pagination .page-numbers.current {
	background: var(--wn-accent);
	border-color: var(--wn-accent);
	color: #000;
}

/* ==========================================================================
   15. PRODUCTPAGINA (fase 5)
   ========================================================================== */

.wn-product-top {
	display: grid;
	gap: var(--wn-gutter);
	margin-bottom: var(--wn-space);
}

/* Grid-kolom mag krimpen zodat de horizontale galerij-scroller niet de hele
   pagina breed maakt op mobiel (anders steekt een foto buiten beeld). */
.wn-product-gallery {
	min-width: 0;
}

@media (min-width: 900px) {
	.wn-product-top {
		grid-template-columns: minmax(0, 7fr) minmax(320px, 5fr);
		align-items: start;
	}

	.wn-product-buy {
		position: sticky;
		top: 2rem;
	}
}

/* ------------------------------------------------------ MODEL-SWITCHER */

.wn-model-tabs {
	display: flex;
	gap: 0.5rem;
	margin-bottom: 1rem;
}

.wn-model-tab {
	font-size: var(--wn-fs-micro);
	font-weight: 700;
	letter-spacing: 0.12em;
	padding: 0.5em 1.1em;
	border: var(--wn-line-soft);
	background: transparent;
	color: var(--wn-muted);
}

.wn-model-tab.is-active {
	background: var(--wn-text);
	border-color: var(--wn-text);
	color: #000;
}

/* ------------------------------------------------------------- GALERIJ */

.wn-gallery-strip {
	position: relative;
}

.wn-gallery-set {
	display: none;
	opacity: 0;
}

.wn-gallery-set.is-active {
	display: block;
	opacity: 1;
	transition: opacity 0.35s var(--wn-ease);
}

.wn-gallery-set.is-entering {
	opacity: 0;
}

.wn-gallery-track {
	display: flex;
	gap: 1rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.wn-gallery-track::-webkit-scrollbar {
	display: none;
}

.wn-gallery-track.is-dragging {
	scroll-snap-type: none;
	cursor: grabbing;
	user-select: none;
}

.wn-gallery-item {
	flex: 0 0 min(78%, 560px);
	margin: 0;
	scroll-snap-align: start;
	background: var(--wn-surface);
	border: var(--wn-line-soft);
}

.wn-gallery-item img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	pointer-events: none; /* drag mag geen image-drag starten */
}

.wn-gallery-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
	background: var(--wn-bg);
	border: var(--wn-line-soft);
	padding: 0.5em 0.9em;
	font-size: 1.1rem;
	line-height: 1;
}

.wn-gallery-arrow--prev { left: 0.75rem; }
.wn-gallery-arrow--next { right: 0.75rem; }

/* ------------------------------------------------------------- BUY BOX */

.wn-product-kicker {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin: 0 0 1rem;
}

.wn-product-title {
	font-size: var(--wn-fs-2);
	margin-bottom: 0.4em;
}

.wn-product-price {
	font-size: 1.5rem;
	font-weight: 700;
	margin: 0 0 1.25rem;
}

.wn-product-price del { color: var(--wn-muted); font-weight: 400; }
.wn-product-price ins { text-decoration: none; color: var(--wn-accent); }

.wn-product-short {
	color: var(--wn-muted);
	font-size: var(--wn-fs-small);
	margin-bottom: 1.5rem;
}

/* Schaarste-balk */
.wn-scarcity {
	margin-bottom: 1.5rem;
}

.wn-scarcity-bar {
	height: 3px;
	background: rgba(110, 110, 110, 0.3);
	overflow: hidden;
}

.wn-scarcity-bar span {
	display: block;
	height: 100%;
	background: var(--wn-accent);
	transition: width 0.4s var(--wn-ease);
}

.wn-scarcity-label {
	font-size: var(--wn-fs-micro);
	font-weight: 700;
	letter-spacing: 0.14em;
	color: var(--wn-accent);
	margin: 0.5em 0 0;
}

/* Maat-tegels (JS verbergt de native select zodra de tegels er staan) */
form.cart.wn-has-tiles .variations {
	position: absolute !important;
	clip-path: inset(50%);
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.wn-size-tiles {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0 0 1.25rem;
}

.wn-size-tile {
	min-width: 3.25em;
	padding: 0.8em 0.5em;
	font-size: var(--wn-fs-small);
	font-weight: 700;
	letter-spacing: 0.06em;
	border: var(--wn-line-soft);
	background: transparent;
	text-align: center;
}

.wn-size-tile.is-active {
	background: var(--wn-text);
	border-color: var(--wn-text);
	color: #000;
}

.wn-size-tile.is-unavailable {
	opacity: 0.3;
	text-decoration: line-through;
	cursor: not-allowed;
}

/* Inline "kies je maat"-feedback (vervangt de browser-alert van Woo) */
.wn-size-tiles.has-error .wn-size-tile:not(.is-unavailable) {
	border-color: var(--wn-accent);
}

.wn-size-error {
	margin: -0.75rem 0 1.25rem;
	font-size: var(--wn-fs-micro);
	font-weight: 700;
	letter-spacing: 0.14em;
	color: var(--wn-accent);
}

/* Native Woo-formulier op maat van het design */
form.cart {
	margin-bottom: 1rem;
}

form.cart .quantity {
	display: inline-block;
	margin-right: 0.75rem;
}

form.cart .quantity .qty {
	width: 4.5em;
	text-align: center;
}

form.cart .single_add_to_cart_button {
	width: 100%;
	margin-top: 0.75rem;
	padding: 1.1em;
	font-size: var(--wn-fs-body);
}

form.cart .woocommerce-variation-price {
	margin-bottom: 0.75rem;
	font-weight: 700;
}

form.cart .woocommerce-variation-availability {
	font-size: var(--wn-fs-micro);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--wn-muted);
}

.wn-maattabel-link {
	background: none;
	border: none;
	border-bottom: 1px solid var(--wn-muted);
	padding: 0 0 0.15em;
	font-size: var(--wn-fs-micro);
	font-weight: 700;
	letter-spacing: 0.14em;
	color: var(--wn-text);
}

.wn-maattabel-link:hover {
	background: none;
	color: var(--wn-accent);
	border-color: var(--wn-accent);
}

.wn-buy-usps {
	list-style: none;
	margin: 1.75rem 0 0;
	padding: 1.25rem 0 0;
	border-top: var(--wn-line-soft);
	display: grid;
	gap: 0.5rem;
	font-size: var(--wn-fs-micro);
	letter-spacing: 0.1em;
	color: var(--wn-muted);
}

.wn-buy-usps li::before {
	content: '✓ ';
	color: var(--wn-accent);
}

/* Drop nog niet live */
.wn-buy-locked {
	border: var(--wn-line-soft);
	padding: 1.5rem;
	display: grid;
	gap: 1rem;
	background: var(--wn-surface);
}

.wn-countdown-digits--small .wn-countdown-unit span {
	font-size: clamp(1.75rem, 5vw, 3rem);
}

/* Uitverkocht */
.wn-missed-stamp {
	font-family: var(--wn-font-display);
	font-size: clamp(2.5rem, 7vw, 4.5rem);
	color: var(--wn-accent);
	margin: 0 0 0.5rem;
	transform: rotate(-4deg);
	display: inline-block;
	border: 4px solid var(--wn-accent);
	padding: 0.05em 0.4em;
}

/* -------------------------------------------------- SCROLL-ZOOM SECTIE */

.wn-zoom {
	background: var(--wn-bg);
}

.wn-zoom-stage {
	height: 100vh;
	display: grid;
	place-items: center;
	position: relative;
	overflow: hidden;
}

.wn-zoom-model,
.wn-zoom-detail {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	will-change: transform, opacity;
}

.wn-zoom-model img,
.wn-zoom-detail img {
	max-height: 82vh;
	width: auto;
	max-width: 90vw;
	object-fit: contain;
}

.wn-zoom-hint {
	position: absolute;
	bottom: 2rem;
	left: 50%;
	transform: translateX(-50%);
}

/* Mobiel: de scroll-zoom dubbelt met de DE PRINT-grid (zelfde close-crops)
   en pinnen werkt daar toch niet — sectie weg, de grid neemt het over. */
@media (max-width: 767px) {
	.wn-zoom {
		display: none;
	}
}

/* Reduced motion (desktop): gewone sectie met tik-om-te-zoomen */
.wn-zoom--static .wn-zoom-stage {
	height: auto;
	padding: 3rem 0;
	cursor: zoom-in;
}

.wn-zoom--static .wn-zoom-model {
	display: none;
}

.wn-zoom--static .wn-zoom-detail {
	position: static;
}

/* ------------------------------------------------------- PRINT VIEWER */

.wn-prints {
	padding: calc(var(--wn-space) / 2) 0;
}

.wn-prints-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 1rem;
}

.wn-print-thumb {
	padding: 0;
	border: var(--wn-line-soft);
	background: var(--wn-surface);
	cursor: zoom-in;
}

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

.wn-print-overlay {
	position: fixed;
	inset: 0;
	z-index: 99985;
	background: rgba(10, 10, 10, 0.96);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	padding: 1rem;
}

/* Het hidden-attribuut moet winnen van de display: flex/grid hierboven, anders
   staan deze overlays vanaf paginalading al open zonder manier om te sluiten
   (de attribuut-selector is specifieker dan de losse class). */
.wn-modal[hidden],
.wn-print-overlay[hidden] {
	display: none;
}

.wn-print-overlay-stage {
	width: min(92vw, 900px);
	height: min(75vh, 900px);
	overflow: hidden;
	display: grid;
	place-items: center;
	touch-action: none;
	cursor: grab;
	border: var(--wn-line-soft);
}

.wn-print-overlay-stage img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	transform-origin: center;
	will-change: transform;
}

.wn-print-overlay-close {
	position: absolute;
	top: 1rem;
	right: 1rem;
	font-size: 2rem;
	background: none;
	border: none;
	color: var(--wn-text);
	line-height: 1;
}

/* --------------------------------------------------------- HET MOMENT */

.wn-moment {
	background: var(--wn-surface);
	border-top: var(--wn-line-soft);
	border-bottom: var(--wn-line-soft);
	padding: calc(var(--wn-space) / 1.5) var(--wn-gutter);
	margin-block: calc(var(--wn-space) / 2);
}

.wn-moment-inner {
	max-width: 900px;
	margin: 0 auto;
	display: grid;
	gap: 1.25rem;
}

.wn-moment-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
}

.wn-moment-stamp {
	font-size: var(--wn-fs-micro);
	font-weight: 700;
	letter-spacing: 0.14em;
	border: 2px solid var(--wn-text);
	padding: 0.35em 0.8em;
	transform: rotate(2deg);
}

.wn-moment-date {
	font-family: var(--wn-font-display);
	font-size: var(--wn-fs-1);
	line-height: 0.9;
	margin: 0;
}

.wn-moment-story {
	font-size: 1.0625rem;
	max-width: 62ch;
}

.wn-moment-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 1rem;
	margin: 0.5rem 0 0;
	border-top: var(--wn-line-soft);
	padding-top: 1.5rem;
}

.wn-moment-stat-value {
	font-family: var(--wn-font-display);
	font-size: clamp(1.75rem, 4vw, 2.75rem);
	color: var(--wn-accent);
	font-variant-numeric: tabular-nums;
}

.wn-moment-stat-label {
	font-size: var(--wn-fs-micro);
	letter-spacing: 0.12em;
	color: var(--wn-muted);
	margin: 0.25rem 0 0;
}

.wn-moment-source {
	justify-self: start;
	border-bottom: 1px solid var(--wn-muted);
}

/* ------------------------------------------------------------- MODALS */

.wn-modal {
	position: fixed;
	inset: 0;
	z-index: 99986;
	display: grid;
	place-items: center;
	padding: 1rem;
}

.wn-modal-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.7);
}

.wn-modal-panel {
	position: relative;
	background: var(--wn-surface);
	border: var(--wn-line-soft);
	max-width: 560px;
	width: 100%;
	max-height: 85vh;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 1.5rem;
}

.wn-modal-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 1rem;
}

.wn-modal-title {
	font-size: 1.4rem;
	margin: 0;
}

.wn-modal-sub {
	font-family: var(--wn-font-body);
	font-size: var(--wn-fs-micro);
	font-weight: 700;
	letter-spacing: 0.14em;
	color: var(--wn-accent);
	margin: 1.5rem 0 0.5rem;
}

.wn-modal-close {
	background: none;
	border: none;
	font-size: 1.75rem;
	line-height: 1;
	color: var(--wn-text);
	padding: 0 0.25em;
}

html.wn-modal-open {
	overflow: hidden;
}

/* --------------------------------------------------- TERUG NAAR BOVEN */

.wn-totop {
	position: fixed;
	right: 1.25rem;
	bottom: 1.25rem;
	z-index: 9990;
	width: 2.75rem;
	height: 2.75rem;
	display: grid;
	place-items: center;
	background: var(--wn-surface);
	border: var(--wn-line-soft);
	color: var(--wn-text);
	font-size: 1.1rem;
	cursor: pointer;
	opacity: 0.85;
	transition: opacity 0.2s var(--wn-ease), border-color 0.2s var(--wn-ease);
}

.wn-totop:hover {
	opacity: 1;
	border-color: var(--wn-accent);
	color: var(--wn-accent);
}

.wn-totop[hidden] {
	display: none;
}

/* Niet in de weg zitten van de mobiele koopbalk */
@media (max-width: 767px) {
	.wn-totop {
		bottom: 4.5rem;
	}
}

/* ------------------------------------------------------------- DELEN */

.wn-share {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem 1.1rem;
	margin-top: 1.4rem;
	padding-top: 1.1rem;
	border-top: var(--wn-line-soft);
}

.wn-share-label {
	font-size: var(--wn-fs-micro);
	font-weight: 700;
	letter-spacing: 0.14em;
	color: var(--wn-muted);
}

.wn-share-link {
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	font-size: var(--wn-fs-micro);
	font-weight: 700;
	letter-spacing: 0.14em;
	color: var(--wn-text);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: color 0.2s var(--wn-ease), border-color 0.2s var(--wn-ease);
}

.wn-share-link:hover {
	color: var(--wn-accent);
	border-bottom-color: var(--wn-accent);
}

.wn-share-link.is-done {
	color: var(--wn-accent);
}

/* hidden-attribuut moet winnen van author-display (zelfde valkuil als bij
   de modals): anders staat de mobiele DELEN-knop dood op desktop. */
.wn-share-link[hidden] {
	display: none;
}

/* ----------------------------------------------------- STATISCHE PAGINA'S */

.wn-page {
	max-width: 760px;
	margin: 0 auto;
	padding: calc(var(--wn-space) / 1.5) var(--wn-gutter) var(--wn-space);
}

.wn-page-kicker {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin: 0 0 1.25rem;
}

.wn-page-title {
	font-size: var(--wn-fs-1);
	line-height: 0.95;
	letter-spacing: -0.02em;
	text-transform: uppercase;
	margin: 0 0 2.5rem;
}

.wn-page-body {
	font-size: var(--wn-fs-body);
	line-height: 1.75;
}

.wn-page-body h2 {
	font-size: var(--wn-fs-3);
	text-transform: uppercase;
	letter-spacing: 0.01em;
	margin: 2.5rem 0 0.75rem;
}

.wn-page-body h2::before {
	content: "+++ ";
	color: var(--wn-accent);
}

.wn-page-body p {
	margin: 0 0 1.1rem;
	color: var(--wn-text);
}

.wn-page-body ul,
.wn-page-body ol {
	margin: 0 0 1.1rem;
	padding-left: 1.2rem;
}

.wn-page-body li {
	margin-bottom: 0.4rem;
}

.wn-page-body a {
	color: var(--wn-accent);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.wn-page-body mark {
	background: var(--wn-accent);
	color: var(--wn-bg);
	padding: 0 0.3em;
	font-weight: 700;
}

.wn-page-body table {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 1.5rem;
	font-size: var(--wn-fs-small);
}

.wn-page-body th,
.wn-page-body td {
	border: var(--wn-line-soft);
	padding: 0.55em 0.8em;
	text-align: left;
}

.wn-page-body th {
	background: var(--wn-surface);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: var(--wn-fs-micro);
}

/* ------------------------------------------- STICKY MOBIELE KOOPBALK */

.wn-mobile-buybar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 99950;
	background: var(--wn-surface);
	border-top: var(--wn-line-soft);
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.75rem var(--wn-gutter);
}

@media (min-width: 768px) {
	.wn-mobile-buybar {
		display: none;
	}
}

.wn-mobile-buybar-price {
	font-weight: 700;
	white-space: nowrap;
}

.wn-mobile-buybar-size {
	flex: 1;
	min-width: 0;
}

.wn-mobile-buybar-size select {
	padding: 0.6em 0.75em;
	font-size: var(--wn-fs-small);
}

.wn-mobile-buybar .wn-btn {
	white-space: nowrap;
	padding: 0.8em 1.1em;
}

/* -------------------------------------------------------- BESCHRIJVING */

.wn-product-desc {
	max-width: 760px;
	padding: calc(var(--wn-space) / 3) 0;
}

.wn-product-desc-body {
	color: var(--wn-text);
	font-size: 1.0625rem;
}

/* ==========================================================================
   16. CART-PAGINA, CHECKOUT & CONTENTPAGINA'S (fase 6)
   ========================================================================== */

/* ------------------------------------------------------------ CART-PAGINA */

.woocommerce-cart-form table.shop_table {
	background: var(--wn-surface);
}

.woocommerce-cart-form .product-thumbnail img {
	width: 64px;
}

.cart_totals {
	border: var(--wn-line-soft);
	padding: 1.5rem;
	background: var(--wn-surface);
	margin-top: 2rem;
}

.cart_totals h2 {
	font-size: 1.25rem;
}

.wc-proceed-to-checkout .checkout-button {
	width: 100%;
	display: block;
	padding: 1.1em;
}

/* Couponveld nooit breder dan z'n container */
.woocommerce-cart-form .coupon input#coupon_code {
	max-width: 100%;
}

.woocommerce-cart-form .actions .coupon {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

/* Storefronts responsive-table-stacking wordt met de dequeue verwijderd; hier
   opnieuw: op smal scherm worden de rijen blokken met labels uit data-title. */
@media (max-width: 600px) {
	table.shop_table_responsive thead {
		display: none;
	}

	table.shop_table_responsive tbody,
	table.shop_table_responsive tr,
	table.shop_table_responsive td {
		display: block;
		width: 100% !important;
	}

	table.shop_table_responsive tr {
		border-bottom: var(--wn-line-soft);
		padding: 0.5rem 0;
	}

	table.shop_table_responsive td {
		text-align: right;
		border: 0;
		padding: 0.4rem 1rem;
	}

	table.shop_table_responsive td::before {
		content: attr(data-title);
		float: left;
		font-weight: 700;
		text-transform: uppercase;
		font-size: var(--wn-fs-micro);
		letter-spacing: 0.1em;
		color: var(--wn-muted);
	}

	table.shop_table_responsive td.product-remove {
		text-align: left;
	}

	table.shop_table_responsive td.product-remove::before {
		content: '';
	}
}

/* --------------------------------------------------------------- CHECKOUT */

.wn-checkout-head {
	margin-bottom: 2rem;
}

.wn-checkout-title {
	margin: 0.25em 0 0;
}

/* Eén kolom, rustig en donker */
form.woocommerce-checkout {
	display: grid;
	gap: 2.5rem;
	max-width: 720px;
}

form.woocommerce-checkout .col2-set {
	display: grid;
	gap: 2rem;
	width: 100%;
}

form.woocommerce-checkout .col2-set .col-1,
form.woocommerce-checkout .col2-set .col-2 {
	width: 100%;
	float: none;
}

.woocommerce-billing-fields h3,
.woocommerce-shipping-fields h3,
#order_review_heading {
	font-family: var(--wn-font-body);
	font-size: var(--wn-fs-micro);
	font-weight: 700;
	letter-spacing: 0.14em;
	color: var(--wn-accent);
	text-transform: uppercase;
	border-bottom: var(--wn-line-soft);
	padding-bottom: 0.75rem;
}

.form-row {
	margin: 0 0 1rem;
	padding: 0;
}

.form-row.form-row-first,
.form-row.form-row-last {
	width: 100%;
	float: none;
}

@media (min-width: 640px) {
	.woocommerce-billing-fields__field-wrapper {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 0 1rem;
	}

	.woocommerce-billing-fields__field-wrapper .form-row-wide,
	.woocommerce-billing-fields__field-wrapper .notes {
		grid-column: 1 / -1;
	}
}

#order_review {
	border: var(--wn-line-soft);
	background: var(--wn-surface);
	padding: 1.5rem;
}

#order_review table.shop_table {
	margin-bottom: 1.5rem;
}

#order_review table.shop_table th,
#order_review table.shop_table td {
	border-left: none;
	border-right: none;
}

/* Betaalmethodes */
#payment {
	background: transparent;
}

#payment ul.payment_methods {
	list-style: none;
	margin: 0 0 1.5rem;
	padding: 0;
	display: grid;
	gap: 0.5rem;
}

#payment ul.payment_methods li {
	border: var(--wn-line-soft);
	padding: 0.9em 1.1em;
}

#payment ul.payment_methods li label {
	display: inline;
	font-size: var(--wn-fs-small);
	font-weight: 700;
	color: var(--wn-text);
	letter-spacing: 0.06em;
	cursor: pointer;
}

#payment ul.payment_methods li img {
	display: inline-block;
	vertical-align: middle;
	max-height: 24px;
	width: auto;
	margin-left: 0.5em;
}

#payment div.payment_box {
	background: var(--wn-bg);
	border: var(--wn-line-soft);
	padding: 1em;
	margin-top: 0.75em;
	font-size: var(--wn-fs-small);
	color: var(--wn-muted);
}

#place_order {
	width: 100%;
	padding: 1.2em;
	font-size: var(--wn-fs-body);
}

.wn-trust-row {
	margin-top: 1.5rem;
	display: grid;
	gap: 1rem;
	justify-items: center;
	text-align: center;
}

.wn-trust-usps {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.4rem;
	font-size: var(--wn-fs-micro);
	letter-spacing: 0.1em;
	color: var(--wn-muted);
	text-transform: uppercase;
}

.wn-trust-usps li::before {
	content: '✓ ';
	color: var(--wn-accent);
}

/* Bedankpagina */
.woocommerce-order-received .woocommerce-thankyou-order-received {
	font-family: var(--wn-font-display);
	font-size: var(--wn-fs-2);
	text-transform: uppercase;
	color: var(--wn-accent);
}

.woocommerce-order-overview {
	list-style: none;
	margin: 1.5rem 0;
	padding: 1.5rem;
	border: var(--wn-line-soft);
	background: var(--wn-surface);
	display: grid;
	gap: 0.75rem;
	font-size: var(--wn-fs-small);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

/* ------------------------------------------------------- CONTENTPAGINA'S */

.page .entry-content,
.wn-page-body {
	max-width: 720px;
}

.page .entry-content h2 {
	font-size: var(--wn-fs-3);
	margin-top: 2em;
}

.page .entry-content a {
	border-bottom: 1px solid var(--wn-muted);
}

.page .entry-header .entry-title {
	border-bottom: var(--wn-line-soft);
	padding-bottom: 0.4em;
	margin-bottom: 1em;
}

/* Placeholder-markering in juridische teksten */
.page .entry-content mark {
	background: var(--wn-accent);
	color: #000;
	font-weight: 700;
	padding: 0.05em 0.3em;
}

/* ==========================================================================
   17. COOKIE-CONSENT BAR
   ========================================================================== */

.wn-cookiebar {
	position: fixed;
	left: var(--wn-gutter);
	right: var(--wn-gutter);
	bottom: 1rem;
	z-index: 99940;
	background: var(--wn-surface);
	border: var(--wn-line-soft);
	padding: 1rem 1.25rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.25rem;
	flex-wrap: wrap;
	max-width: 720px;
	margin: 0 auto;
}

.wn-cookiebar-text {
	margin: 0;
	font-size: var(--wn-fs-micro);
	font-weight: 700;
	letter-spacing: 0.1em;
	color: var(--wn-text);
}

.wn-cookiebar-text a {
	color: var(--wn-accent);
	border-bottom: 1px solid var(--wn-accent);
}

.wn-cookiebar .wn-btn {
	padding: 0.6em 1.4em;
}