/*
Theme Name: De Praatjuf
Theme URI: https://depraatjuf.nl
Author: LJPc
Author URI: https://ljpc.nl
Description: Paper-craft pastel theme for De Praatjuf. Hand-written classic theme; SEO/security/head-meta live in the depraatjuf-core plugin.
Version: 1.0.0
Requires at least: 6.7
Tested up to: 7.0
Requires PHP: 8.5
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: depraatjuf
*/

/* 1. Self-hosted fonts (latin subset, woff2, swap); src paths are relative to
   the theme root. */

@font-face {
	font-family: 'Baloo 2';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('assets/fonts/baloo-2-v23-latin-600.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Baloo 2';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('assets/fonts/baloo-2-v23-latin-700.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

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

@font-face {
	font-family: 'Nunito';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('assets/fonts/nunito-v32-latin-600.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Nunito';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('assets/fonts/nunito-v32-latin-700.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* 2. Design tokens (contract, see CLAUDE.md). Body/UI text is always
   --color-ink; coral/coral-dark are decorative or bold large-text only. */

:root {
	--color-cream: #FAF3E6;
	--color-paper: #FDFBF6;
	--color-coral: #E8825F;
	--color-coral-dark: #C05C3B;
	--color-mint: #A8CDB4;
	--color-mint-dark: #4C7A5C;
	--color-sky: #B7D6E9;
	--color-butter: #F4D9A6;
	--color-ink: #3E4A59;

	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 1rem;
	--space-4: 1.5rem;
	--space-5: 2rem;
	--space-6: 3rem;
	--space-7: 4rem;
	--space-8: 6rem;

	--radius-sm: 0.5rem;
	--radius-md: 1rem;
	--radius-lg: 2rem;

	--shadow-paper: 0 2px 0 rgba(62, 74, 89, 0.08), 0 6px 16px rgba(62, 74, 89, 0.10);

	--font-display: 'Baloo 2', ui-rounded, 'Segoe UI', system-ui, sans-serif;
	--font-body: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;

	--wrap-max: 72rem;
	--tap-min: 44px;
	--ink-border: rgba(62, 74, 89, 0.08);

	/* Grayscale paper grain, ~4.5% opacity inline SVG (no image file). */
	--paper-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='0.045'/%3E%3C/svg%3E");

	/* Torn-paper silhouette mask: flat top, irregular bottom, so a strip reads
	   as a torn edge. */
	--torn-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 32' preserveAspectRatio='none'%3E%3Cpath fill='%23fff' d='M0,0 H1200 V17 L1150,24 L1100,15 L1050,27 L990,19 L940,30 L880,17 L830,25 L770,14 L720,28 L660,20 L600,26 L540,16 L480,29 L420,18 L360,24 L300,15 L240,27 L180,19 L120,30 L60,17 L0,23 Z'/%3E%3C/svg%3E");
}

/* 3. Reset-lite */

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

* {
	margin: 0;
}

html {
	color-scheme: light;
	scrollbar-gutter: stable;
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

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

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

ul,
ol {
	padding: 0;
}

/* 4. Base typography and elements */

body {
	min-block-size: 100dvh;
	margin: 0;
	font-family: var(--font-body);
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--color-ink);
	background-color: var(--color-cream);
	background-image: var(--paper-grain);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--font-display);
	font-weight: 700;
	line-height: 1.12;
	text-wrap: balance;
	color: var(--color-ink);
}

h1 {
	font-size: clamp(2rem, 1.4rem + 2.6vw, 3rem);
}

h2 {
	font-size: clamp(1.55rem, 1.2rem + 1.6vw, 2.25rem);
}

h3 {
	font-size: clamp(1.3rem, 1.15rem + 0.7vw, 1.6rem);
}

h4 {
	font-size: 1.2rem;
	font-weight: 600;
}

p,
li,
dd,
dt {
	text-wrap: pretty;
}

:where(h1, h2, h3, h4, h5, h6, p, ul, ol, figure, table) + :where(h1, h2, h3, h4, h5, h6, p, ul, ol, figure, table) {
	margin-block-start: var(--space-3);
}

a {
	color: var(--color-ink);
	text-decoration-line: underline;
	text-decoration-color: var(--color-coral-dark);
	text-decoration-thickness: 0.12em;
	text-underline-offset: 0.15em;
	transition: text-decoration-thickness 120ms ease, text-decoration-color 120ms ease;
}

a:hover {
	text-decoration-color: var(--color-coral);
	text-decoration-thickness: 0.2em;
}

:focus-visible {
	outline: 3px solid var(--color-coral-dark);
	outline-offset: 2px;
	border-radius: 2px;
}

::selection {
	background-color: color-mix(in srgb, var(--color-butter) 72%, transparent);
	color: var(--color-ink);
}

@view-transition {
	navigation: auto;
}

/* 5. Layout primitives and accessibility helpers */

.wrap {
	inline-size: 100%;
	max-inline-size: var(--wrap-max);
	margin-inline: auto;
	padding-inline: var(--space-4);
}

@media (max-width: 40rem) {
	.wrap {
		padding-inline: var(--space-3);
	}
}

.visually-hidden,
.screen-reader-text {
	position: absolute !important;
	inline-size: 1px;
	block-size: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.skip-link {
	position: absolute;
	inset-block-start: -6rem;
	inset-inline-start: var(--space-3);
	z-index: 1000;
	padding: var(--space-2) var(--space-3);
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 1.1875rem;            /* >= 18.66px bold: AA large-text path on coral */
	line-height: 1.2;
	color: var(--color-ink);
	text-decoration: none;
	background-color: var(--color-coral);
	border: 2px solid var(--color-coral-dark);
	border-radius: var(--radius-sm);
	box-shadow: var(--shadow-paper);
	transition: inset-block-start 140ms ease;
}

.skip-link:focus {
	inset-block-start: var(--space-3);
}

/* 6. Paper components */

.paper-card {
	padding: var(--space-4);
	background-color: var(--color-paper);
	background-image: var(--paper-grain);
	border: 1px solid var(--ink-border);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-paper);
}

.paper-card--tilt {
	transform: rotate(-1deg);
}

/* Paper-cutout button: a coloured edge gives thickness; presses on :active,
   lifts on :hover. */
.btn,
.btn:visited {
	--btn-bg: var(--color-coral);
	--btn-edge: var(--color-coral-dark);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	min-block-size: var(--tap-min);
	padding: 0.6rem 1.4rem;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.1875rem;            /* 19px bold display: AA large-text path on coral */
	line-height: 1.15;
	color: var(--color-ink);
	text-decoration: none;
	text-align: center;
	background-color: var(--btn-bg);
	border: 2px solid var(--btn-edge);
	border-radius: var(--radius-md);
	box-shadow: 0 3px 0 var(--btn-edge), var(--shadow-paper);
	cursor: pointer;
	appearance: none;
	transition: transform 120ms ease, box-shadow 120ms ease;
}

.btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 5px 0 var(--btn-edge), 0 12px 22px rgba(62, 74, 89, 0.16);
}

.btn:active {
	transform: translateY(1px);
	box-shadow: 0 1px 0 var(--btn-edge), 0 3px 8px rgba(62, 74, 89, 0.12);
}

.btn--secondary,
.btn--secondary:visited {
	--btn-bg: var(--color-mint);
	--btn-edge: var(--color-mint-dark);
	color: var(--color-ink);        /* ink on mint: 5.18:1, AA normal */
}

/* Washi-tape strip: translucent pastel, diagonal stripe, gently rotated.
   Decorative; needs a positioned parent. */
.tape {
	--tape-color: var(--color-butter);
	position: absolute;
	inset-block-start: -0.75rem;
	inline-size: 6rem;
	block-size: 2rem;
	background-color: color-mix(in srgb, var(--tape-color) 78%, transparent);
	background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.35) 0 5px, rgba(255, 255, 255, 0) 5px 12px);
	box-shadow: 0 1px 4px rgba(62, 74, 89, 0.12);
	transform: rotate(-4deg);
	pointer-events: none;
}

.tape--mint {
	--tape-color: var(--color-mint);
}

.tape--sky {
	--tape-color: var(--color-sky);
}

.tape--coral {
	--tape-color: var(--color-coral);
}

/* Torn-paper section divider; set --torn-color to the section it tears away
   from (defaults to paper). */
.torn-edge {
	--torn-color: var(--color-paper);
	display: block;
	block-size: 1.75rem;
	background-color: var(--torn-color);
	-webkit-mask-image: var(--torn-mask);
	mask-image: var(--torn-mask);
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}

.breadcrumbs {
	margin-block-end: var(--space-3);
	font-size: 0.9375rem;
}

/* Inline trail (the ol otherwise renders as a numbered block list). */
.breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Coral chevron separator; the empty alt keeps it out of the AT reading. */
.breadcrumbs li + li::before {
	content: "\203A" / "";
	margin-inline-end: 0.4rem;
	font-weight: 700;
	color: var(--color-coral-dark);
}

.breadcrumbs a {
	color: var(--color-ink);
}

/* 7. Site header, primary navigation, cart */

.site-header {
	background-color: var(--color-cream);
	background-image: var(--paper-grain);
	border-block-end: 1px solid rgba(62, 74, 89, 0.10);
}

.site-header__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-3);
	padding-block: var(--space-3);
}

.site-branding {
	margin: 0 auto 0 0;
}

.site-logo {
	display: inline-block;
	text-decoration: none;
	/* clip-path clips box-shadow, so the scrap's paper lift lives out here. */
	filter: drop-shadow(0 2px 3px rgba(62, 74, 89, 0.14)) drop-shadow(0 7px 12px rgba(62, 74, 89, 0.10));
}

/* Mockup logo: chunky tinted "Praatjuf" letters under a small mint "De" (plus
   heart), on a torn white paper scrap. The letter run is aria-hidden (the real
   name sits in the visually-hidden sibling) and a logotype is WCAG
   contrast-exempt, so it may use the mockup's full pastel palette. */
.site-logo__text {
	display: inline-flex;
	flex-direction: column;
	padding: 0.45rem 1.1rem 0.65rem 0.85rem;
	font-family: var(--font-display);
	font-weight: 700;
	line-height: 0.9;
	background-color: var(--color-paper);
	background-image: var(--paper-grain);
	rotate: -1.5deg;
	clip-path: polygon(1% 10%, 10% 2%, 29% 7%, 46% 0%, 65% 6%, 83% 1%, 97% 9%, 100% 34%, 96% 56%, 99% 79%, 91% 98%, 70% 92%, 51% 100%, 30% 93%, 9% 99%, 2% 87%, 0% 60%, 3% 34%);
}

.site-logo__de {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	margin-inline-start: 0.3rem;
	font-size: clamp(0.9rem, 0.8rem + 0.4vw, 1.05rem);
	color: var(--color-mint-dark);
	rotate: -3deg;
}

/* The mockup's little mint heart beside "De". */
.site-logo__de::after {
	content: "";
	inline-size: 0.7rem;
	block-size: 0.7rem;
	background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23A8CDB4' d='M12 21 4 13a4.9 4.9 0 0 1 0-7 4.9 4.9 0 0 1 7 0l1 1 1-1a4.9 4.9 0 0 1 7 7Z'/%3E%3C/svg%3E");
	transition: scale 200ms ease;
}

.site-logo__name {
	font-size: clamp(1.6rem, 1.2rem + 1.7vw, 2.15rem);
}

/* Same guard as the hero words: never let the name break between letters. */
.site-logo__name .word {
	display: inline-block;
	white-space: nowrap;
}

.site-logo__name .word span {
	display: inline-block;
	text-shadow: 0 2px 2px rgba(62, 74, 89, 0.20);
	transition: translate 220ms cubic-bezier(0.34, 1.56, 0.64, 1);
	transition-delay: calc(var(--i) * 30ms);
}

/* Mockup letter palette with a light hand-cut jumble; butter/sky are deepened
   so the glyphs keep their shape against the white scrap. */
.site-logo__name .word span:nth-child(4n+1) { color: var(--color-coral); rotate: -2.5deg; }
.site-logo__name .word span:nth-child(4n+2) { color: var(--color-mint-dark); rotate: 1.5deg; translate: 0 -1px; }
.site-logo__name .word span:nth-child(4n+3) { color: color-mix(in srgb, var(--color-butter) 52%, var(--color-coral-dark)); rotate: -1deg; }
.site-logo__name .word span:nth-child(4n+4) { color: color-mix(in srgb, var(--color-sky) 52%, var(--color-ink)); rotate: 2deg; translate: 0 -1.5px; }

/* Hover: the letters do a quick staggered wave and the heart swells. */
.site-logo:hover .site-logo__name .word span {
	translate: 0 -4px;
}

.site-logo:hover .site-logo__de::after {
	scale: 1.35;
}

.primary-menu {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4);
	list-style: none;
	margin: 0;
	padding: 0;
}

.primary-menu a {
	position: relative;
	display: inline-flex;
	align-items: center;
	min-block-size: var(--tap-min);
	font-family: var(--font-body);
	font-weight: 600;
	color: var(--color-ink);
	text-decoration: none;
}

.primary-menu a::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0.4rem;
	block-size: 0.2rem;
	border-radius: 2px;
	background-color: var(--color-coral);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 150ms ease;
}

.primary-menu .current-menu-item > a::after,
.primary-menu .current-menu-ancestor > a::after,
.primary-menu a:hover::after,
.primary-menu a:focus-visible::after {
	transform: scaleX(1);
}

/* Active item coral: 3.94:1 needs the AA large-text path, so >= 19px bold. */
.primary-menu .current-menu-item > a,
.primary-menu .current-menu-ancestor > a {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.1875rem;
	color: var(--color-coral-dark);
}

.nav-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	inline-size: var(--tap-min);
	block-size: var(--tap-min);
	padding: 0;
	background-color: var(--color-paper);
	border: 2px solid rgba(62, 74, 89, 0.15);
	border-radius: var(--radius-sm);
	cursor: pointer;
}

.nav-js .nav-toggle {
	display: inline-flex;
}

.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
	content: "";
	display: block;
	inline-size: 20px;
	block-size: 2.5px;
	background-color: var(--color-ink);
	border-radius: 2px;
	transition: transform 150ms ease, background-color 150ms ease;
}

.nav-toggle__bars {
	position: relative;
}

.nav-toggle__bars::before {
	position: absolute;
	inset-block-start: -6px;
	inset-inline-start: 0;
}

.nav-toggle__bars::after {
	position: absolute;
	inset-block-start: 6px;
	inset-inline-start: 0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars {
	background-color: transparent;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before {
	transform: translateY(6px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after {
	transform: translateY(-6px) rotate(-45deg);
}

/* Mockup cart: butter icon button, hidden AT label, corner count badge. */
.cart-link {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 3rem;
	block-size: 3rem;
	color: var(--color-ink);
	text-decoration: none;
	background-color: var(--color-butter);
	border: 1px solid color-mix(in srgb, var(--color-coral-dark) 30%, var(--color-butter));
	border-radius: 0.9rem 1.1rem 0.9rem 1.2rem;
	box-shadow: var(--shadow-paper);
	transition: transform 140ms ease;
}

.cart-link:hover {
	transform: translateY(-3px) rotate(-4deg);
}

.cart-link__icon {
	inline-size: 24px;
	block-size: 24px;
	background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C05C3B' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.7 13.4a2 2 0 0 0 2 1.6h9.7a2 2 0 0 0 2-1.6L23 6H6'/%3E%3C/svg%3E");
}

.cart-count {
	position: absolute;
	inset-block-start: -0.45rem;
	inset-inline-end: -0.45rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-inline-size: 1.4rem;
	block-size: 1.4rem;
	padding-inline: 0.35rem;
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--color-ink);
	background-color: var(--color-paper);
	border: 1px solid var(--color-coral-dark);
	border-radius: 999px;
}

.cart-count[hidden] {
	display: none;
}

/* The badge pops in on page load whenever something is in the mand. */
.cart-count {
	animation: count-pop 400ms cubic-bezier(0.34, 1.66, 0.64, 1) 300ms backwards;
}

@keyframes count-pop {
	from { scale: 0; }
}

/* Mobile: collapse the menu behind the toggle only with JS; a no-JS visitor
   keeps a usable stacked menu. */
@media (max-width: 47.999rem) {
	.nav-toggle {
		order: 1;
	}

	.cart-link {
		order: 2;
	}

	.site-nav {
		order: 3;
		flex-basis: 100%;
	}

	.nav-js .site-nav .primary-menu {
		display: none;
		flex-direction: column;
		gap: 0;
		padding: var(--space-2);
		background-color: var(--color-paper);
		border: 1px solid var(--ink-border);
		border-radius: var(--radius-md);
		box-shadow: var(--shadow-paper);
	}

	.nav-js .site-nav .primary-menu.is-open {
		display: flex;
	}

	.primary-menu a {
		inline-size: 100%;
	}
}

@media (min-width: 48rem) {
	/* Matches .nav-js .nav-toggle specificity so the toggle stays hidden on
	   desktop after JS reveals it for mobile. */
	.nav-js .nav-toggle {
		display: none;
	}

	/* The nav shrinks and wraps its own items on mid widths, so the cart
	   button never drops under the logo (six items since FAQ joined). */
	.site-nav {
		order: 1;
		flex: 1 1 0;
		min-inline-size: 0;
	}

	.site-nav .primary-menu {
		justify-content: flex-end;
	}

	.cart-link {
		order: 2;
	}
}

/* 8. Main and site footer */

.site-main {
	display: block;
	padding-block: var(--space-5) var(--space-6);
}

.site-footer {
	margin-block-start: var(--space-6);
	background-color: var(--color-paper);
	background-image: var(--paper-grain);
	border-block-start: 1px solid rgba(62, 74, 89, 0.10);
}

.site-footer > .wrap {
	padding-block: var(--space-6);
}

.site-footer__cols {
	display: grid;
	gap: var(--space-5);
	grid-template-columns: 1fr;
}

@media (min-width: 48rem) {
	.site-footer__cols {
		grid-template-columns: 2fr 1fr 1fr;
	}
}

.site-footer__title {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.5rem;
}

.site-footer__brand p {
	max-inline-size: 40ch;
}

.site-footer__heading {
	font-size: 1.15rem;
	margin-block-end: var(--space-2);
}

.footer-menu,
.legal-menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.footer-menu a,
.legal-menu a {
	color: var(--color-ink);
	text-decoration-color: var(--color-coral-dark);
}

.site-footer__mascot {
	margin-block-start: var(--space-3);
}

.site-footer__mascot-img {
	inline-size: 3.875rem;
	block-size: auto;
}

.site-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-2) var(--space-4);
	margin-block-start: var(--space-5);
	padding-block-start: var(--space-4);
	border-block-start: 1px solid var(--ink-border);
	font-size: 0.9375rem;
}

.site-footer__pay {
	list-style: none;
	display: flex;
	align-items: center;
	gap: var(--space-2);
	margin: 0;
	padding: 0;
}

.site-footer__pay-icon {
	display: block;
	block-size: 24px;
	inline-size: auto;
	border-radius: 4px;
	box-shadow: 0 1px 0 var(--ink-border);
}

/* 9. Content blocks (page.php / index.php) */

.entry-content > * + * {
	margin-block-start: var(--space-3);
}

.entry-content {
	max-inline-size: 66ch;
}

.entry-content :where(h2, h3) {
	margin-block-start: var(--space-5);
}

.page-header {
	margin-block-end: var(--space-4);
}

.post-list {
	display: grid;
	gap: var(--space-4);
}

.post-list .entry-title {
	font-size: 1.5rem;
}

/* 10. Forms and WooCommerce notices */

label {
	display: block;
	font-weight: 600;
	margin-block-end: var(--space-1);
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="search"],
input[type="password"],
input[type="url"],
select,
textarea {
	inline-size: 100%;
	min-block-size: var(--tap-min);
	padding: 0.6rem 0.8rem;
	font-size: 1.0625rem;           /* 17px: no iOS zoom-on-focus */
	color: var(--color-ink);
	background-color: var(--color-paper);
	border: 2px solid rgba(62, 74, 89, 0.22);
	border-radius: var(--radius-sm);
}

textarea {
	min-block-size: 8rem;
}

:where(input, select, textarea):focus-visible {
	border-color: var(--color-coral-dark);
}

button,
[type="submit"],
[type="button"] {
	min-block-size: var(--tap-min);
}

/* Dutch form-error summaries + WooCommerce notices as paper boxes: one shared
   box, each type sets its own tint via background-color + border-color. */
.dp-form-errors,
.woocommerce-error,
.woocommerce-message,
.woocommerce-info {
	margin: 0 0 var(--space-3);
	padding: var(--space-2) var(--space-3);
	color: var(--color-ink);
	border: 1px solid;
	border-inline-start-width: 5px;
	border-radius: var(--radius-sm);
}

.dp-form-errors,
.woocommerce-error {
	list-style: none;
	background-color: color-mix(in srgb, var(--color-coral) 20%, var(--color-paper));
	border-color: var(--color-coral-dark);
}

.woocommerce-message {
	background-color: color-mix(in srgb, var(--color-mint) 40%, var(--color-paper));
	border-color: var(--color-mint-dark);
}

.woocommerce-info {
	background-color: color-mix(in srgb, var(--color-sky) 45%, var(--color-paper));
	border-color: #5a86a0;
}

/* 11. Front page (front-page.php): layered hero and homepage sections */

.home .site-main {
	padding-block: 0;
}

.hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: flex;
	align-items: center;
	min-block-size: min(88dvh, 56rem);
	padding-block: var(--space-7) var(--space-8);
	background:
		radial-gradient(90% 70% at 85% -5%, color-mix(in srgb, var(--color-butter) 34%, transparent), transparent 60%),
		var(--color-cream);
}

/* Contract: absolutely stacked, non-interactive parallax layers. */
.hero__layer {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.hero__layer--sky { z-index: 0; }
.hero__layer--hills { z-index: 1; }
.hero__layer--mascot { z-index: 2; }
.hero__layer--foreground { z-index: 4; }

/* Mockup: parrot left, bubble beside its head (col 1), text column right. */
.hero__content {
	position: relative;
	z-index: 3;
	inline-size: 100%;
	max-inline-size: var(--wrap-max);
	margin-inline: auto;
	padding-inline: var(--space-4);
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	align-items: center;
}

.hero__text {
	grid-column: 2;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-4);
}

/* Real-text bubble (never the png), tail pointing left toward the beak. */
.hero__bubble {
	position: relative;
	grid-column: 1;
	justify-self: end;
	align-self: start;
	margin-block-start: clamp(0rem, 4vh, 2.5rem);
	margin-inline-end: clamp(-1rem, -0.5vw, 0rem);
	max-inline-size: 11.5rem;
	padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4);
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 1.0625rem;
	line-height: 1.3;
	text-align: center;
	color: var(--color-ink);
	background-color: var(--color-paper);
	border: 1px solid var(--ink-border);
	border-radius: 1.4rem;
	box-shadow: var(--shadow-paper);
	transform-origin: 12% 88%;
	/* Pops in from the beak once the headline is underway, then keeps bobbing. */
	animation:
		bubble-pop 500ms cubic-bezier(0.34, 1.66, 0.64, 1) 700ms backwards,
		bubble-bob 4.6s ease-in-out 1.4s infinite alternate;
}

@keyframes bubble-pop {
	from {
		opacity: 0;
		scale: 0.4;
	}
}

@keyframes bubble-bob {
	from { translate: 0 0; rotate: 0deg; }
	to   { translate: 0 -9px; rotate: 1.6deg; }
}

.hero__bubble::after {
	content: "";
	position: absolute;
	inset-block-end: 1.2rem;
	inset-inline-start: -0.45rem;
	inline-size: 1rem;
	block-size: 1rem;
	background-color: var(--color-paper);
	border-inline-start: 1px solid var(--ink-border);
	border-block-end: 1px solid var(--ink-border);
	transform: rotate(45deg);
}

/* The mockup's tiny companion bubble with a coral heart. */
.hero__bubble::before {
	content: "";
	position: absolute;
	inset-block-end: -1.9rem;
	inset-inline-start: -0.9rem;
	inline-size: 1.7rem;
	block-size: 1.7rem;
	background:
		center / 0.8rem no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23E8825F' d='M12 21 4 13a4.9 4.9 0 0 1 0-7 4.9 4.9 0 0 1 7 0l1 1 1-1a4.9 4.9 0 0 1 7 7Z'/%3E%3C/svg%3E"),
		var(--color-paper);
	border: 1px solid var(--ink-border);
	border-radius: 50% 50% 50% 20%;
	box-shadow: var(--shadow-paper);
}

.hero__title {
	margin: 0;
	max-inline-size: min-content;
	font-size: clamp(2.6rem, 1.1rem + 6.4vw, 5.25rem);
	line-height: 1.04;
	letter-spacing: -0.01em;
}

/* Words are unbreakable inline-block wrappers (see dp_letter_spans()); the
   letters inside are inline-block so each can rotate, carry paper-depth
   shadows, and bounce in staggered by its --i index at load. white-space:
   nowrap is load-bearing: line breaks are allowed BETWEEN inline-blocks, so
   without it min-content sizing collapses to one letter per line. */
.hero__letters .word {
	display: inline-block;
	white-space: nowrap;
}

.hero__letters .word span {
	display: inline-block;
	color: var(--color-ink);
	text-shadow: 0 0.05em 0 rgba(62, 74, 89, 0.10), 0 0.12em 0.45em rgba(62, 74, 89, 0.16);
	animation: letter-in 600ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
	animation-delay: calc(120ms + var(--i) * 40ms);
}

/* From-only keyframes settle back to each letter's own base rotate/tint. */
@keyframes letter-in {
	from {
		opacity: 0;
		translate: 0 0.55em;
		scale: 0.7;
	}
}

/* Hand-cut jumble: amplitudes tiny enough that the baseline still reads level. */
.hero__letters .word span:nth-child(odd) { rotate: -1.4deg; }
.hero__letters .word span:nth-child(even) { rotate: 1.6deg; translate: 0 -0.02em; }

/* Per-letter tints: only tokens clearing AA large-text 3:1 on cream
   (coral-dark 3.94, mint-dark 4.48); every third letter stays ink. Even words
   start on mint so not every word opens with the same colour. */
.hero__letters .word span:nth-child(3n+1) {
	color: var(--color-coral-dark);
}

.hero__letters .word span:nth-child(3n+2) {
	color: var(--color-mint-dark);
}

.hero__letters .word:nth-of-type(even) span:nth-child(3n+1) {
	color: var(--color-mint-dark);
}

.hero__letters .word:nth-of-type(even) span:nth-child(3n+2) {
	color: var(--color-coral-dark);
}

.hero__sub {
	font-size: clamp(1.1rem, 1rem + 0.6vw, 1.35rem);
	font-weight: 600;
	color: var(--color-ink);
	animation: rise-in 550ms ease-out 850ms backwards;
}

.hero__cta {
	margin-block-start: var(--space-2);
	animation: rise-in 550ms ease-out 1000ms backwards;
}

@keyframes rise-in {
	from {
		opacity: 0;
		translate: 0 14px;
	}
}

.btn__arrow {
	font-size: 1.15em;
	line-height: 1;
	transition: translate 180ms ease;
}

.btn:hover .btn__arrow {
	translate: 4px 0;
}

.hero__cloud {
	position: absolute;
	opacity: 0.92;
}

.hero__cloud--1 { inset-block-start: 2.5rem; inset-inline-start: 2%; inline-size: clamp(6rem, 11vw, 8.5rem); }
.hero__cloud--2 { inset-block-start: 1.5rem; inset-inline-end: 2%; inline-size: clamp(6.5rem, 13vw, 10rem); }
.hero__cloud--3 { inset-block-start: 30%; inset-inline-start: -2rem; inline-size: clamp(4.5rem, 8vw, 6.5rem); opacity: 0.75; }

/* CSS-softened to the mockup mint; the shipped strip is more saturated. */
.hero__hills {
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	inline-size: 100%;
	block-size: clamp(10rem, 24vw, 17rem);
	object-fit: cover;
	object-position: center bottom;
	filter: saturate(0.55) brightness(1.12);
}

.hero__parrot {
	position: absolute;
	inset-inline-start: clamp(0.5rem, 5vw, 6rem);
	inset-block-end: clamp(3rem, 8vw, 6rem);
	inline-size: clamp(15rem, 29vw, 25rem);
	height: auto;
	filter: drop-shadow(0 10px 18px rgba(62, 74, 89, 0.18));
}

.hero__leaf,
.hero__flower {
	position: absolute;
	height: auto;
}

/* Base angles as individual props: sway writes the same ones (no doubling). */
.hero__leaf--1 { inset-inline-start: -1.5rem; inset-block-end: 0; inline-size: clamp(7rem, 15vw, 12rem); rotate: -8deg; }
.hero__leaf--2 { inset-inline-end: -1.25rem; inset-block-end: 1rem; inline-size: clamp(5rem, 11vw, 8.5rem); scale: -1 1; rotate: -6deg; }
.hero__flower--butter { inset-inline-end: -2.25rem; inset-block-end: clamp(7rem, 17vw, 12rem); inline-size: clamp(5.5rem, 11vw, 9.5rem); }

/* The hero's own torn bottom edge; foreground decor (z 4) peeks over it. */
.hero__torn {
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	z-index: 3;
	block-size: 2rem;
}

/* Idle float (contract): every cutout moves, at amplitudes a visitor can
   actually see. Keyframes animate INDIVIDUAL translate/rotate, never
   `transform`, so base scale/rotate values compose instead of being
   clobbered; leaf angles live in their sway keyframes. */

.hero__layer img {
	animation: float-bob 7s ease-in-out infinite alternate;
}

@keyframes float-bob {
	from { translate: 0 0; }
	to   { translate: 0 -14px; }
}

@keyframes drift {
	from { translate: 0 0; }
	to   { translate: 30px -12px; }
}

@keyframes perch {
	from { translate: 0 0; rotate: 0deg; }
	to   { translate: 0 -13px; rotate: 2.2deg; }
}

@keyframes sway-left {
	from { rotate: -12deg; }
	to   { rotate: -2deg; }
}

@keyframes sway-right {
	from { rotate: -10deg; }
	to   { rotate: 0deg; }
}

@keyframes bloom {
	from { translate: 0 0; rotate: -3deg; scale: 1; }
	to   { translate: 0 -10px; rotate: 4deg; scale: 1.06; }
}

/* Staggered per element; only the ground holds still (parallax moves it). */
.hero .hero__cloud--1 { animation: drift 11s ease-in-out -3s infinite alternate; }
.hero .hero__cloud--2 { animation: drift 9s ease-in-out -6s infinite alternate-reverse; }
.hero .hero__cloud--3 { animation: drift 13s ease-in-out -2s infinite alternate; }
.hero .hero__parrot { animation: perch 5.5s ease-in-out -1.5s infinite alternate; }
.hero .hero__hills { animation: none; }
.hero .hero__leaf--1 { transform-origin: 25% 92%; animation: sway-left 5s ease-in-out -1s infinite alternate; }
.hero .hero__leaf--2 { transform-origin: 75% 92%; animation: sway-right 5.6s ease-in-out -2.5s infinite alternate; }
.hero .hero__flower--butter { animation: bloom 5.2s ease-in-out -3s infinite alternate; }

/* Load-in: the decor layers rise into place back-to-front. The hills layer
   never joins (it is the LCP element on the throttled profiles and must
   paint immediately). */

.hero__layer--sky { animation: layer-in 700ms ease-out 100ms backwards; }
.hero__layer--mascot { animation: layer-in 700ms ease-out 300ms backwards; }
.hero__layer--foreground { animation: layer-in 700ms ease-out 480ms backwards; }

@keyframes layer-in {
	from {
		opacity: 0;
		translate: 0 30px;
	}
}

/* Scroll-driven parallax (contract), progressive */

@supports (animation-timeline: scroll()) {
	.hero__layer {
		animation: parallax linear both;
		animation-timeline: scroll(root);
		animation-range: 0 120vh;
		will-change: transform;
	}

	/* Entrance plus parallax together; the shorthand resets the timeline, so
	   the grouped longhands below re-pin scroll(root) to the parallax slot. */
	.hero__layer--sky { animation: layer-in 700ms ease-out 100ms backwards, parallax linear both; }
	.hero__layer--mascot { animation: layer-in 700ms ease-out 300ms backwards, parallax linear both; }
	.hero__layer--foreground { animation: layer-in 700ms ease-out 480ms backwards, parallax linear both; }

	.hero__layer--sky,
	.hero__layer--mascot,
	.hero__layer--foreground {
		animation-timeline: auto, scroll(root);
		animation-range: normal, 0 120vh;
	}

	@keyframes parallax {
		to { transform: translateY(calc(var(--depth) * -9rem)); }
	}
}

/* space-6, not space-8: adjacent sections stack two paddings (whitespace pass). */
.section {
	padding-block: var(--space-6);
	content-visibility: auto;
	contain-intrinsic-size: auto 600px;
}

.section__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-3);
	margin-block-end: var(--space-5);
}

.section__head--center {
	justify-content: center;
	text-align: center;
}

.section__title {
	margin: 0;
	font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.25rem);
}

.section__link {
	white-space: nowrap;
	font-weight: 700;
	text-decoration-color: var(--color-coral-dark);
}

.section__link span {
	display: inline-block;
	transition: translate 180ms ease;
}

.section__link:hover span {
	translate: 3px 0;
}

/* Coloured paper bands; --torn-color is the neighbouring colour showing
   through each ragged edge. */
.section--band {
	position: relative;
}

.section--paper {
	background-color: var(--color-paper);
	background-image: var(--paper-grain);
}

.section--mint {
	background-color: color-mix(in srgb, var(--color-mint) 22%, var(--color-paper));
}

.section--band > .wrap {
	position: relative;
	z-index: 1;
}

.torn-edge--top {
	position: absolute;
	inset-block-start: 0;
	inset-inline: 0;
	block-size: 2rem;
}

.torn-edge--bottom {
	position: absolute;
	inset-block-end: -1.9rem;
	inset-inline: 0;
	block-size: 2rem;
}

.usp__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--space-4);
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 56rem) {
	.usp__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.usp__item,
.steps__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-3);
	text-align: center;
}

/* Mockup strip: flat coloured glyphs (decorative) with small labels. */
.usp__glyph {
	inline-size: 2.6rem;
	block-size: 2.6rem;
	filter: drop-shadow(0 2px 2px rgba(62, 74, 89, 0.16));
	transition: scale 200ms ease, rotate 200ms ease;
}

.usp__item:hover .usp__glyph {
	scale: 1.18;
	rotate: -6deg;
}

.usp__glyph--coral { color: color-mix(in srgb, var(--color-coral) 88%, var(--color-ink)); }
.usp__glyph--mint { color: color-mix(in srgb, var(--color-mint) 78%, var(--color-ink)); }
.usp__glyph--butter { color: color-mix(in srgb, var(--color-butter) 74%, var(--color-coral-dark)); }
.usp__glyph--sky { color: color-mix(in srgb, var(--color-sky) 80%, var(--color-ink)); }

.usp__label {
	font-weight: 600;
	font-size: 0.95rem;
	line-height: 1.3;
	color: var(--color-ink);
}

.products__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--space-5);
	grid-template-columns: 1fr;
}

@media (min-width: 40rem) {
	.products__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.dp-product {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-3);
	padding-block-start: var(--space-5);
	text-align: center;
	/* Paper pick-up on hover: `scale` stays clear of the parity rotations
	   (transform) and the scroll reveal (translate/opacity). */
	transition: scale 200ms ease;
}

.dp-product:hover {
	scale: 1.03;
}

.dp-product:nth-child(odd) { transform: rotate(-0.8deg); }
.dp-product:nth-child(even) { transform: rotate(0.6deg); }

.dp-product__media {
	inline-size: 100%;
}

.dp-product__img {
	inline-size: 100%;
	height: auto;
	border-radius: var(--radius-sm);
}

.dp-product__img--empty {
	display: block;
	aspect-ratio: 3 / 4;
	background-color: color-mix(in srgb, var(--color-sky) 30%, var(--color-paper));
	border-radius: var(--radius-sm);
}

.dp-product__title {
	margin: 0;
	font-size: 1.2rem;
}

.dp-product__link {
	color: var(--color-ink);
	text-decoration: none;
}

/* Whole-card hit area without trapping the accessible name. */
.dp-product__link::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: var(--radius-md);
}

/* Whole-card focus ring where :has() exists; elsewhere the link keeps its own
   outline so keyboard focus is never invisible. */
@supports selector(:has(*)) {
	.dp-product__link:focus-visible {
		outline: none;
	}

	.dp-product:has(.dp-product__link:focus-visible) {
		outline: 3px solid var(--color-coral-dark);
		outline-offset: 3px;
	}
}

.dp-product__price {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.3rem;
	color: var(--color-ink);
}

.dp-product__tax {
	display: block;
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 0.85rem;
	color: var(--color-ink);
}

/* Homepage mockup tiles: covers on pastel slabs, straight, rule above price. */
.products__grid .dp-product--tile {
	padding: var(--space-4) var(--space-4) var(--space-5);
	border-radius: 1.6rem;
	box-shadow: var(--shadow-paper);
	transform: none;
}

.dp-product--coral { background-color: color-mix(in srgb, var(--color-coral) 42%, var(--color-paper)); }
.dp-product--mint { background-color: color-mix(in srgb, var(--color-mint) 60%, var(--color-paper)); }
.dp-product--sky { background-color: color-mix(in srgb, var(--color-sky) 65%, var(--color-paper)); }

.dp-product--tile .dp-product__img {
	border-radius: 0.6rem;
	box-shadow: var(--shadow-paper);
}

.dp-product--tile .dp-product__price {
	padding-block-start: var(--space-2);
	padding-inline: var(--space-5);
	border-block-start: 2px solid color-mix(in srgb, var(--color-ink) 22%, transparent);
}

.steps__list {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: step;
	display: grid;
	gap: var(--space-4);
	grid-template-columns: 1fr;
}

@media (min-width: 48rem) {
	.steps__list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.steps__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 3.25rem;
	block-size: 3.25rem;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.5rem;
	color: var(--color-ink);
	background-color: var(--color-butter);
	border: 2px solid var(--color-coral-dark);
	border-radius: 60% 60% 60% 16%;
	box-shadow: var(--shadow-paper);
}

.steps__badge::before {
	counter-increment: step;
	content: counter(step);
}

.steps__title {
	margin: 0;
	font-size: 1.2rem;
}

.steps__text {
	margin: 0;
}

.over-teaser__inner {
	display: grid;
	gap: var(--space-5);
	grid-template-columns: 1fr;
	align-items: center;
}

@media (min-width: 48rem) {
	.over-teaser__inner {
		grid-template-columns: 1.4fr 1fr;
	}
}

.over-teaser__text {
	max-inline-size: 42ch;
}

.over-teaser__text .btn {
	margin-block-start: var(--space-3);
}

.over-teaser__decor {
	display: flex;
	justify-content: center;
}

.over-teaser__parrot {
	inline-size: clamp(10rem, 26vw, 15rem);
	height: auto;
	transform: rotate(-3deg);
	filter: drop-shadow(0 8px 14px rgba(62, 74, 89, 0.16));
}

.blog-teasers__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--space-4);
	grid-template-columns: 1fr;
}

@media (min-width: 40rem) {
	.blog-teasers__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.blog-teasers__title {
	margin: 0;
	font-size: 1.3rem;
}

.blog-teasers__date {
	margin: var(--space-1) 0 0;
	font-size: 0.9rem;
	color: var(--color-ink);
}

.blog-teasers__excerpt {
	margin-block-start: var(--space-2);
}

/* Section entry. Browsers with scroll-driven animations reveal each heading
   and card as it scrolls into the viewport: the animation is scrubbed by a
   view() timeline, so items entering the viewport rise+fade in, while
   anything already past its entry range (deep links, reloads mid-page)
   renders settled. Elsewhere the old @starting-style block still gives the
   initial-load fade (it fires at first render, which for below-fold sections
   happens invisibly; view() is what makes the reveal actually observable).
   Reduced motion kills both via the global switch. */

@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.section__head,
		.usp__item,
		.steps__item,
		.dp-product,
		.blog-teasers__item,
		.over-teaser__text,
		.over-teaser__decor,
		.post-grid .paper-card,
		.search-results .paper-card {
			animation: reveal-rise linear both;
			animation-timeline: view();
			/* cover-based end: short headings scrub over ~170px of scroll
			   instead of their own (tiny) entry height. */
			animation-range: entry 0% cover 18%;
		}

		@keyframes reveal-rise {
			from {
				opacity: 0;
				translate: 0 1.75rem;
			}
		}
	}
}

@supports (transition-behavior: allow-discrete) and (not (animation-timeline: view())) {
	@media (prefers-reduced-motion: no-preference) {
		.section {
			transition: opacity 650ms ease, transform 650ms ease;
			transition-behavior: allow-discrete;
		}

		@starting-style {
			.section {
				opacity: 0;
				transform: translateY(26px);
			}
		}
	}
}

/* Linked paper cards lift on hover; `scale` stays clear of the reveal's
   translate/opacity and any base transform (.dp-product has its own rule). */
.blog-teasers__item,
.post-grid .paper-card,
.search-results .paper-card {
	transition: scale 200ms ease;
}

.blog-teasers__item:hover,
.post-grid .paper-card:hover,
.search-results .paper-card:hover {
	scale: 1.02;
}

/* Hero responsive: mascot moves below-right and shrinks on phones */

@media (max-width: 47.999rem) {
	.hero {
		min-block-size: auto;
		padding-block: var(--space-5) var(--space-6);
	}

	/* Single column: bubble, text, small parrot bottom-left on the hills. */
	.hero__content {
		grid-template-columns: minmax(0, 1fr);
		text-align: center;
		padding-block-end: 13rem;
	}

	.hero__bubble,
	.hero__text {
		grid-column: 1;
	}

	.hero__bubble {
		justify-self: center;
		margin-block-end: var(--space-4);
		margin-inline-end: 0;
	}

	.hero__text {
		align-items: center;
	}

	.hero__title {
		max-inline-size: none;
	}

	.hero__parrot {
		inline-size: clamp(9.5rem, 44vw, 13rem);
		inset-inline-start: 0.75rem;
		inset-block-end: 2.75rem;
	}

	.hero__hills {
		block-size: clamp(7rem, 26vw, 11rem);
	}

	.hero__cloud--3,
	.hero__leaf--2,
	.hero__flower--butter {
		display: none;
	}

	.hero__leaf--1 {
		inline-size: 5.5rem;
	}
}

/* 12. WooCommerce: shop archive + single product (task 18) */

.dp-shop-head {
	margin-block-end: var(--space-5);
}

.dp-shop-title {
	margin: 0;
}

.dp-shop-intro {
	max-inline-size: 60ch;
	margin-block-start: var(--space-3);
}

.dp-chips {
	margin-block-start: var(--space-4);
}

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

/* Outline chips; the current one is filled mint. Ink clears AA on both
   (8.72:1 paper, 5.18:1 mint). 44px hit targets. */
.dp-chip {
	display: inline-flex;
	align-items: center;
	min-block-size: var(--tap-min);
	padding: 0.4rem 1.15rem;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 1.0625rem;
	line-height: 1.2;
	color: var(--color-ink);
	text-decoration: none;
	background-color: var(--color-paper);
	border: 2px solid var(--color-mint-dark);
	border-radius: 999px;
	transition: transform 120ms ease, box-shadow 120ms ease, background-color 120ms ease;
}

.dp-chip:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow-paper);
}

.dp-chip--current {
	background-color: var(--color-mint);
	box-shadow: 0 2px 0 var(--color-mint-dark);
}

/* Shop toolbar: WooCommerce notices stack full width above the grid (the
   ordering dropdown and result count are removed for this tiny catalogue). */

.dp-shop-toolbar {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	margin-block-end: var(--space-5);
}

.dp-shop-toolbar:empty {
	display: none;
}

/* Product grid: reuses the .dp-product paper card (section 11) */

/* minmax(0, 1fr), never bare 1fr: content cannot widen grid tracks, so WCAG
   1.4.12 text-spacing overrides wrap inside cards instead of overflowing. */
.dp-shop-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--space-4);
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 30rem) {
	.dp-shop-grid {
		gap: var(--space-5);
	}
}

@media (min-width: 48rem) {
	.dp-shop-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 64rem) {
	.dp-shop-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* Cross-sell rows hold 2-4 cards; cap at 3 columns so they never stretch thin,
   except the 4-card variant (pakket page: alle + missing letters). */
@media (min-width: 64rem) {
	.dp-shop-grid--cross {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		max-inline-size: 54rem;
	}

	.dp-shop-grid--cross-4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		max-inline-size: none;
	}
}

/* Plain text with a glyph, deliberately NOT pill-shaped: the whole card is one
   link, and a button-looking badge reads as a download control (it is not). */
.dp-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	margin: 0;
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 0.8125rem;
	line-height: 1.2;
	color: var(--color-ink);
}

/* The pakket savings chip IS a pill on purpose: it is a price fact, not a
   control, and sits away from the card's click affordance. Ink on butter-tint
   passes AA at this size. */
.dp-deal {
	display: inline-flex;
	align-items: center;
	gap: 0.28em; /* inline-flex drops the whitespace text node before the price span */
	margin: 0;
	padding: 0.25rem 0.7rem;
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 0.8125rem;
	line-height: 1.2;
	color: var(--color-ink);
	background-color: color-mix(in srgb, var(--color-butter) 55%, var(--color-paper));
	border: 1px solid color-mix(in srgb, var(--color-ink) 22%, var(--color-butter));
	border-radius: 999px;
}

.dp-single__deal {
	margin-inline-start: var(--space-2);
	vertical-align: middle;
}

.dp-badge__icon {
	display: inline-flex;
	color: var(--color-mint-dark);
}

.dp-glyph {
	inline-size: 0.95rem;
	block-size: 0.95rem;
}

/* Shared empty/signpost scene box (shop-empty, cart-empty, blog/search/404). */
.dp-shop-empty,
.dp-cart-empty,
.dp-empty {
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-3);
	text-align: center;
}

.dp-shop-empty {
	max-inline-size: 32rem;
	margin-block-start: var(--space-5);
}

.dp-shop-empty__parrot,
.dp-cart-empty__parrot,
.dp-empty__parrot {
	inline-size: 7rem;
	height: auto;
	transform: rotate(-3deg);
}

.dp-shop-empty__text {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 1.2rem;
}

/* Pagination: paper buttons (hidden today, styled for growth) */

.woocommerce-pagination,
.pagination {
	margin-block-start: var(--space-6);
}

.woocommerce-pagination ul.page-numbers,
.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-2);
	list-style: none;
	margin: 0;
	padding: 0;
}

.woocommerce-pagination .page-numbers,
.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-inline-size: var(--tap-min);
	min-block-size: var(--tap-min);
	padding-inline: 0.9rem;
	font-family: var(--font-display);
	font-weight: 700;
	color: var(--color-ink);
	text-decoration: none;
	background-color: var(--color-paper);
	border: 2px solid rgba(62, 74, 89, 0.18);
	border-radius: var(--radius-sm);
	transition: transform 120ms ease, box-shadow 120ms ease;
}

.woocommerce-pagination a.page-numbers:hover,
.pagination a.page-numbers:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow-paper);
}

.woocommerce-pagination .page-numbers.current,
.pagination .page-numbers.current {
	background-color: var(--color-mint);
	border-color: var(--color-mint-dark);
}

.woocommerce-notices-wrapper:not(:empty) {
	margin-block-end: var(--space-4);
}

.woocommerce-message,
.woocommerce-error,
.woocommerce-info {
	box-shadow: var(--shadow-paper);
}

/* Hide woocommerce-general's ::before notice icon; our paper boxes carry their
   own left-border accent, so it would only overlap the text. */
.woocommerce-message::before,
.woocommerce-error::before,
.woocommerce-info::before {
	content: none;
}

.woocommerce-message {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2) var(--space-3);
}

/* WooCommerce's "Winkelmand bekijken" add-to-cart link, as a mint outline button. */
.woocommerce-message a.button {
	display: inline-flex;
	align-items: center;
	min-block-size: var(--tap-min);
	padding: 0.3rem 1rem;
	font-family: var(--font-display);
	font-weight: 700;
	color: var(--color-ink);
	text-decoration: none;
	background-color: var(--color-paper);
	border: 2px solid var(--color-mint-dark);
	border-radius: var(--radius-sm);
}

.woocommerce-message a.button:hover {
	background-color: color-mix(in srgb, var(--color-mint) 30%, var(--color-paper));
}

.dp-single__grid {
	display: grid;
	gap: var(--space-5);
	grid-template-columns: 1fr;
}

@media (min-width: 48rem) {
	.dp-single__grid {
		grid-template-columns: minmax(0, 24rem) minmax(0, 1fr);
		align-items: start;
		gap: var(--space-6);
	}

	/* Sticky-ish cover while the summary scrolls. */
	.dp-single__media {
		position: sticky;
		inset-block-start: var(--space-4);
	}
}

.dp-single__figure {
	margin: 0;
}

/* Inkijkexemplaar thumb strip under the cover (single product). */
.dp-gallery__hint {
	margin: var(--space-3) 0 0;
	font-size: 0.9rem;
	font-weight: 700;
}

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

.dp-gallery__thumb {
	display: block;
	inline-size: 4.5rem;
	border: 2px solid transparent;
	border-radius: var(--radius-sm);
}

.dp-gallery__thumb.is-current {
	border-color: var(--color-coral-dark);
}

.dp-gallery__thumb-img {
	display: block;
	inline-size: 100%;
	block-size: auto;
	border: 1px solid var(--ink-border);
	border-radius: calc(var(--radius-sm) - 2px);
	background-color: var(--color-paper);
}

.dp-single__cover {
	inline-size: 100%;
	height: auto;
	background-color: var(--color-paper);
	border: 1px solid var(--ink-border);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-paper);
}

.dp-single__cover--empty {
	display: block;
	aspect-ratio: 3 / 4;
	background-color: color-mix(in srgb, var(--color-sky) 30%, var(--color-paper));
}

/* On small screens the cover must not push title/price/CTA far below the fold:
   cap it to roughly half the viewport and center the narrowed image. */
@media (max-width: 47.9375rem) {
	.dp-single__cover {
		display: block;
		inline-size: auto;
		max-inline-size: 100%;
		max-block-size: 55vh;
		margin-inline: auto;
	}
}

.dp-single__summary {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-3);
}

.dp-single__summary > .breadcrumbs {
	margin-block-end: 0;
}

.dp-single__title {
	margin: 0;
}

.dp-single__price {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(1.6rem, 1.3rem + 1vw, 2rem);
	color: var(--color-ink);
}

.dp-single__tax {
	margin-inline-start: 0.4rem;
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 0.9375rem;
	color: var(--color-ink);
}

.dp-single__short {
	font-size: 1.0625rem;
}

.dp-single__short p {
	margin: 0;
}

.dp-cart-form {
	margin: 0;
	inline-size: 100%;
}

.dp-cart-form .single_add_to_cart_button {
	font-size: 1.25rem;
	padding: 0.7rem 2rem;
}

/* Reassurance line: ink text (AA), mint-dark glyph accent (decorative). */
.dp-single__reassure {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	font-weight: 700;
	color: var(--color-ink);
}

.dp-single__reassure-icon {
	display: inline-flex;
	color: var(--color-mint-dark);
}

.dp-single__meta {
	margin: 0;
	font-size: 0.9375rem;
}

.dp-single__meta a {
	color: var(--color-ink);
}

.dp-single__meta-label {
	font-weight: 700;
}

.dp-single__details {
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
	margin-block-start: var(--space-6);
}

/* Wide screens: description + FAQ share the row (the right half sat empty);
   the cross-sell keeps the full width below them. */
@media (min-width: 64rem) {
	.dp-single__details {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 24rem);
		align-items: start;
	}

	.dp-single__details > .dp-single__long {
		grid-column: 1;
	}

	.dp-single__details > .dp-faq {
		grid-column: 2;
		grid-row: 1;
		position: sticky;
		inset-block-start: var(--space-4);
	}

	.dp-single__details > .dp-cross {
		grid-column: 1 / -1;
	}
}

.dp-single__long {
	max-inline-size: 66ch;
}

.dp-faq {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	max-inline-size: 66ch;
}

.dp-faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.15rem;
	cursor: pointer;
	list-style: none;
}

.dp-faq__q::-webkit-details-marker {
	display: none;
}

/* Coral chevron: points down when closed, flips up when open. */
.dp-faq__q::after {
	content: "";
	flex: 0 0 auto;
	inline-size: 0.6rem;
	block-size: 0.6rem;
	margin-inline-end: 0.2rem;
	border-inline-end: 2.5px solid var(--color-coral-dark);
	border-block-end: 2.5px solid var(--color-coral-dark);
	transform: rotate(45deg);
	transition: transform 150ms ease;
}

.dp-faq__item[open] .dp-faq__q::after {
	transform: rotate(-135deg);
}

.dp-faq__a {
	margin-block-start: var(--space-3);
}

.dp-faq__a p {
	margin: 0;
}

.dp-cross__title {
	margin: 0 0 var(--space-4);
}

/* 13. WooCommerce cart, checkout, account, order received (task 19).
   Body-class rules unwrap page.php's card; checkout widths target stable
   #billing_*_field ids, immune to address-i18n.js class resets. */

body.woocommerce-cart .page-article,
body.woocommerce-checkout .page-article,
body.woocommerce-account .page-article { padding: 0; background: none; border: 0; box-shadow: none; max-inline-size: none; }

body.woocommerce-cart .entry-content,
body.woocommerce-checkout .entry-content,
body.woocommerce-account .entry-content { max-inline-size: none; }

.woocommerce-account .woocommerce-form,
.woocommerce-MyAccount-content table.shop_table { background-color: var(--color-paper); border: 1px solid var(--ink-border); border-radius: var(--radius-md); }
.woocommerce-account .woocommerce-form { padding: var(--space-4); }

.woocommerce .button:not(.btn), .woocommerce .button.alt:not(.btn) { min-block-size: var(--tap-min); padding: 0.5rem 1.25rem; font-family: var(--font-display); font-weight: 700; color: var(--color-ink); background: var(--color-mint); border: 2px solid var(--color-mint-dark); border-radius: var(--radius-sm); box-shadow: 0 2px 0 var(--color-mint-dark); }

.woocommerce-invalid input.input-text,
.woocommerce-invalid select,
.woocommerce-invalid textarea,
.woocommerce-invalid .select2-selection { border-color: var(--color-coral-dark); }

@media (min-width: 60rem) {
	.woocommerce-cart .woocommerce { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 22rem); gap: var(--space-5) var(--space-6); align-items: start; }
	.woocommerce-cart .woocommerce-notices-wrapper { grid-column: 1 / -1; }
	.woocommerce-cart .cart_totals { position: sticky; inset-block-start: var(--space-4); }
}

/* WC layout CSS floats .cart_totals at 48% inside our grid cell; the grid owns the width. */
.woocommerce-cart .cart-collaterals .cart_totals { float: none; inline-size: auto; }

/* An empty notices wrapper still occupies a grid row plus its row gap. */
.woocommerce-cart .woocommerce-notices-wrapper:empty { display: none; }

.dp-cart-table { inline-size: 100%; border-collapse: collapse; }
.dp-cart-table__img { inline-size: 64px; height: auto; border-radius: var(--radius-sm); box-shadow: var(--shadow-paper); }
.dp-cart-table__name a { color: var(--color-ink); font-family: var(--font-display); font-weight: 700; text-decoration: none; }
.dp-cart-table__price, .dp-cart-table__subtotal { font-weight: 700; white-space: nowrap; }
.dp-cart-remove { display: inline-flex; align-items: center; justify-content: center; inline-size: 2rem; block-size: 2rem; font-size: 1.5rem; line-height: 1; color: var(--color-coral-dark); text-decoration: none; }
.woocommerce table.dp-cart-table td.dp-cart-table__thumb::before, .woocommerce table.dp-cart-table td.dp-cart-table__remove::before { content: ""; }

@media (min-width: 48rem) {
	.dp-cart-table thead th { padding: 0 var(--space-2) var(--space-2); font-size: 0.8rem; font-weight: 700; border-block-end: 2px solid var(--ink-border); }
	.dp-cart-table thead .dp-cart-table__price, .dp-cart-table thead .dp-cart-table__subtotal { text-align: end; }
	.dp-cart-table tbody td { padding: var(--space-3) var(--space-2); border-block-end: 1px solid var(--ink-border); vertical-align: middle; }
	.dp-cart-table tbody .dp-cart-table__price, .dp-cart-table tbody .dp-cart-table__subtotal { text-align: end; }
	.dp-cart-table__thumb { inline-size: 64px; }
	.dp-cart-table__remove { text-align: end; }
}

.dp-cart-summary__title { margin: 0 0 var(--space-3); font-size: 1.4rem; }
.dp-cart-summary__table { inline-size: 100%; border-collapse: collapse; }
.dp-cart-summary__table th,
.dp-cart-summary__table td { padding: var(--space-2) 0; }
.dp-cart-summary__table td { text-align: end; font-weight: 700; white-space: nowrap; }
.dp-cart-summary__table .order-total th,
.dp-cart-summary__table .order-total td { padding-block-start: var(--space-2); border-block-start: 2px solid var(--ink-border); font-size: 1.15rem; }
.dp-cart-summary__checkout { display: flex; inline-size: 100%; margin-block-start: var(--space-4); }
.dp-cart-summary__back { display: inline-block; margin-block-start: var(--space-3); font-weight: 700; }

.dp-cart-empty { max-inline-size: 34rem; }
.dp-cart-empty__text { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; }
.dp-cart-empty__sub { margin: 0; max-inline-size: 30ch; }
.dp-cart-empty .btn { margin-block-start: var(--space-2); }

/* Checkout: fields + payment flow left, compact sticky summary right (mobile:
   fields, summary, payment in source order). #order_review keeps wrapping both
   halves for WooCommerce's JS delegation/fragments; display: contents lets the
   grid place summary and payment independently. */
.woocommerce-checkout form.checkout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
.woocommerce-checkout #order_review_heading { margin: 0; }
.woocommerce-checkout #order_review { display: contents; }
.dp-checkout__payment-title { margin: var(--space-2) 0 0; }

.dp-checkout__reassure { display: flex; align-items: center; gap: 0.4rem; margin: var(--space-3) 0 0; font-size: 0.9rem; font-weight: 700; }
.dp-checkout__reassure-icon { display: inline-flex; color: var(--color-mint-dark); }

/* Calm summary card: no Product/Subtotaal header band, transparent cells
   (double selector outweighs WC's .woocommerce table.shop_table tfoot rules),
   label column capped so the btw note fits the amount cell on one line. */
.woocommerce-checkout-review-order-table thead { display: none; }
.woocommerce-checkout .woocommerce-checkout-review-order-table { border: 0; }
.woocommerce-checkout .woocommerce-checkout-review-order-table tr,
.woocommerce-checkout .woocommerce-checkout-review-order-table th,
.woocommerce-checkout .woocommerce-checkout-review-order-table td { background: transparent; border-inline: 0; }
.woocommerce-checkout .woocommerce-checkout-review-order-table th { inline-size: 42%; }
.woocommerce-checkout .wc_payment_methods { margin-block-start: 0; }

@media (min-width: 64rem) {
	.woocommerce-checkout form.checkout { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: var(--space-5) var(--space-6); align-items: start; }
	.woocommerce-checkout #customer_details { grid-column: 1; grid-row: 1 / span 2; }
	.woocommerce-checkout #order_review_heading { grid-column: 2; grid-row: 1; }
	.woocommerce-checkout .dp-checkout__summary { grid-column: 2; grid-row: 2 / span 3; align-self: start; position: sticky; inset-block-start: var(--space-4); }
	.woocommerce-checkout .dp-checkout__payment-title { grid-column: 1; grid-row: 3; }
	.woocommerce-checkout #payment { grid-column: 1; grid-row: 4; }
}

.woocommerce-checkout .col2-set,
.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2 { float: none; inline-size: auto; max-inline-size: none; padding: 0; }
.woocommerce-checkout .col2-set .col-2 { display: none; }

.dp-checkout__section-title { margin: 0 0 var(--space-3); font-size: 1.4rem; }
.dp-checkout__field-grid > .form-row { margin: 0 0 var(--space-3); }
/* The address h2 and the autofill status are .form-row grid items on purpose
   (WooCommerce's address-i18n sort, see form-billing.php); these run after the
   generic .form-row rule so their margins win the specificity tie. */
.dp-checkout__field-grid > .dp-checkout__section-title--address { margin-block-start: var(--space-4); margin-block-end: var(--space-3); }
.dp-checkout__field-grid > .dp-adres-status { margin-block-start: calc(-1 * var(--space-2)); font-size: 0.9rem; font-weight: 600; color: var(--color-mint-dark); }
.dp-adres-status:empty { display: none; }

@media (min-width: 48rem) {
	.dp-checkout__field-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: var(--space-3); }
	.dp-checkout__field-grid > .form-row { float: none; inline-size: auto; grid-column: 1 / -1; }
	.dp-checkout__section-title--address { grid-column: 1 / -1; align-self: end; }
	#billing_first_name_field, #billing_last_name_field, #billing_city_field { grid-column: span 3; }
	#billing_postcode_field, #billing_house_number_field, #billing_house_number_suffix_field { grid-column: span 2; }
}

.dp-checkout__account { margin-block-start: var(--space-4); }
.dp-checkout__account .create-account label { display: flex; gap: var(--space-2); align-items: flex-start; font-weight: 400; }

.woocommerce-checkout-review-order-table { inline-size: 100%; border-collapse: collapse; margin: 0 0 var(--space-3); }
.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td { padding: var(--space-2) 0; border-block-end: 1px solid var(--ink-border); }
.woocommerce-checkout-review-order-table td { text-align: end; font-weight: 700; white-space: nowrap; }
.woocommerce-checkout-review-order-table .product-name { text-align: start; font-weight: 400; }
.woocommerce-checkout-review-order-table .order-total th,
.woocommerce-checkout-review-order-table .order-total td { border-block-end: 0; padding-block-start: var(--space-2); font-size: 1.15rem; }

/* WC's "(inclusief btw)" note as its own small line under the total. */
.woocommerce-checkout-review-order-table .includes_tax { display: block; white-space: nowrap; font-size: 0.75rem; font-weight: 400; }

.woocommerce-checkout #payment { background: transparent; }
.wc_payment_methods { list-style: none; margin: var(--space-4) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.wc_payment_method { padding: var(--space-2) var(--space-3); background-color: var(--color-cream); border: 1px solid var(--ink-border); border-radius: var(--radius-sm); }
.wc_payment_method > label { display: inline-flex; align-items: center; gap: var(--space-2); margin: 0; font-weight: 700; cursor: pointer; }
.wc_payment_method > input[type="radio"] { inline-size: 1.25rem; block-size: 1.25rem; accent-color: var(--color-coral-dark); }
.wc_payment_method .payment_box { margin-block-start: var(--space-2); padding: var(--space-2) var(--space-3); font-size: 0.95rem; background-color: color-mix(in srgb, var(--color-sky) 24%, var(--color-paper)); border-radius: var(--radius-sm); }

.dp-waiver, .woocommerce-terms-and-conditions-wrapper { margin-block-start: var(--space-4); padding: var(--space-3); background-color: color-mix(in srgb, var(--color-butter) 42%, var(--color-paper)); border: 1px solid var(--color-butter); border-inline-start: 5px solid var(--color-coral-dark); border-radius: var(--radius-sm); }
.dp-waiver label, .woocommerce-terms-and-conditions-wrapper label { display: flex; gap: var(--space-2); align-items: flex-start; margin: 0; font-weight: 400; cursor: pointer; }
.dp-waiver input[type="checkbox"], .woocommerce-terms-and-conditions-wrapper input[type="checkbox"] { flex: 0 0 auto; inline-size: 24px; block-size: 24px; margin-block-start: 0.1rem; accent-color: var(--color-coral-dark); }
.dp-waiver-uitleg { display: block; margin-block-start: var(--space-2); font-size: 0.9rem; }
.woocommerce-checkout #place_order { display: flex; inline-size: 100%; min-block-size: var(--tap-min); margin-block-start: var(--space-4); padding: 0.6rem 1.4rem; font-family: var(--font-display); font-weight: 700; font-size: 1.1875rem; color: var(--color-ink); background: var(--color-coral); border: 2px solid var(--color-coral-dark); border-radius: var(--radius-md); box-shadow: 0 3px 0 var(--color-coral-dark), var(--shadow-paper); }

.dp-thankyou { display: flex; flex-direction: column; gap: var(--space-6); }
.dp-thankyou__tip-title { margin: 0 0 var(--space-2); font-size: 1.15rem; }
.dp-thankyou__tip-text { margin: 0; }
.dp-login-note { margin-block-start: var(--space-3); font-size: 0.95rem; }

/* Blog card / front-page teaser illustrations (papercraft featured images). */
.post-card__media, .blog-teasers__media { display: block; }
.post-card__img, .blog-teasers__img {
	display: block;
	inline-size: 100%;
	block-size: auto;
	margin-block-end: var(--space-3);
	border: 1px solid var(--ink-border);
	border-radius: var(--radius-sm);
	background-color: var(--color-paper);
}
.dp-thankyou__header { position: relative; text-align: center; padding-block: var(--space-5); }
.dp-thankyou__decor { position: absolute; inset: 0; pointer-events: none; }
.dp-thankyou__flower, .dp-thankyou__leaf { position: absolute; height: auto; opacity: 0.85; }
.dp-thankyou__flower--1 { inline-size: 3.25rem; inset-block-start: 0.5rem; inset-inline-start: 7%; transform: rotate(-10deg); }
.dp-thankyou__leaf--1 { inline-size: 3rem; inset-block-end: 0.5rem; inset-inline-end: 9%; transform: rotate(8deg); }
.dp-thankyou__title { margin: 0; font-size: clamp(1.9rem, 1.3rem + 2.4vw, 2.8rem); }
.dp-thankyou__lead { margin: var(--space-3) auto 0; max-inline-size: 42ch; font-size: 1.1rem; }

.dp-order-summary { max-inline-size: 40rem; }
.dp-order-summary__title { margin: 0 0 var(--space-2); font-size: 1.25rem; }
.dp-order-summary__list { list-style: none; }
.dp-order-summary__list li { display: flex; justify-content: space-between; gap: var(--space-3); padding-block: var(--space-1); }
.dp-order-summary__list li + li { border-block-start: 1px solid var(--ink-border); }
.dp-order-summary__value { font-weight: 700; text-align: end; }

.dp-downloads__title { margin: 0 0 var(--space-4); }
.dp-downloads__list { list-style: none; display: flex; flex-direction: column; gap: var(--space-3); }
.dp-download { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); }
.dp-download__icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; inline-size: 3rem; block-size: 3rem; color: var(--color-mint-dark); background-color: color-mix(in srgb, var(--color-mint) 40%, var(--color-paper)); border-radius: 60% 60% 60% 16%; }
.dp-download__icon .dp-glyph { inline-size: 1.5rem; block-size: 1.5rem; }
.dp-download__body { flex: 1 1 auto; min-inline-size: 0; }
.dp-download__name { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; }
.dp-download__btn { flex: 0 0 auto; }
.dp-download__btn-icon { display: inline-flex; }
.dp-download__btn-icon .dp-glyph { inline-size: 1.05rem; block-size: 1.05rem; }
.dp-downloads__note { margin-block-start: var(--space-4); font-size: 0.95rem; }
.dp-thankyou__contact { text-align: center; }

@media (max-width: 34rem) {
	.dp-download { flex-wrap: wrap; }
	.dp-download__btn { inline-size: 100%; }
}

.woocommerce-MyAccount-content { min-inline-size: 0; }
.woocommerce-MyAccount-navigation ul { list-style: none; margin: 0 0 var(--space-5); padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.woocommerce-MyAccount-navigation li { margin: 0; border: 0; }
.woocommerce-MyAccount-navigation a { display: inline-flex; align-items: center; min-block-size: var(--tap-min); padding: 0.4rem 1.1rem; color: var(--color-ink); font-weight: 700; text-decoration: none; background-color: var(--color-paper); border: 2px solid var(--color-mint-dark); border-radius: 999px; }
.woocommerce-MyAccount-navigation .is-active a { background-color: var(--color-mint); }
.woocommerce-MyAccount-content table.shop_table th,
.woocommerce-MyAccount-content table.shop_table td { padding: var(--space-3); border-block-end: 1px solid var(--ink-border); }

/* 14. Content templates: page article, blog index, single post, search, 404.
   Reuses .paper-card, .btn and the section 12 pagination buttons. */

.page-article,
.post-single,
.author-box,
.post-single__back {
	max-inline-size: 46rem;
	margin-inline: auto;
}

.page-intro {
	margin-block-start: var(--space-3);
	max-inline-size: 60ch;
	font-size: 1.15rem;
}

.entry-content :where(ul, ol) {
	padding-inline-start: 1.4em;
}

.entry-content li + li {
	margin-block-start: var(--space-1);
}

.entry-content blockquote {
	margin: var(--space-4) 0;
	padding: var(--space-3) var(--space-4);
	font-size: 1.15rem;
	font-weight: 700;
	background-color: var(--color-paper);
	border-inline-start: 4px solid var(--color-mint);
	border-radius: var(--radius-sm);
	box-shadow: var(--shadow-paper);
}

.entry-content blockquote cite {
	display: block;
	margin-block-start: var(--space-2);
	font-size: 0.9375rem;
	font-style: normal;
	font-weight: 700;
}

.entry-content table {
	inline-size: 100%;
	border-collapse: collapse;
}

.entry-content :where(th, td) {
	padding: var(--space-2) var(--space-3);
	text-align: start;
	border: 1px solid var(--ink-border);
}

.entry-content th {
	background-color: color-mix(in srgb, var(--color-butter) 32%, var(--color-paper));
}

.entry-content figcaption {
	margin-block-start: var(--space-1);
	font-size: 0.9375rem;
	text-align: center;
}

/* Paper accordions: any <details> in content (site-wide FAQ pattern) */

.entry-content details {
	padding: var(--space-3) var(--space-4);
	background-color: var(--color-paper);
	background-image: var(--paper-grain);
	border: 1px solid var(--ink-border);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-paper);
}

.entry-content summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	min-block-size: var(--tap-min);
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.15rem;
	cursor: pointer;
	list-style: none;
}

.entry-content summary::-webkit-details-marker {
	display: none;
}

/* Plus when closed, minus (U+2212) when open. */
.entry-content summary::after {
	content: "+";
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 1.75rem;
	block-size: 1.75rem;
	font-size: 1.6rem;
	line-height: 1;
	color: var(--color-ink);
	background-color: color-mix(in srgb, var(--color-coral) 30%, var(--color-paper));
	border-radius: 50%;
}

.entry-content details[open] summary::after {
	content: "\2212";
}

.entry-content summary + * {
	margin-block-start: var(--space-3);
}

/* Accordions (product FAQ + content details) unfold instead of jumping:
   interpolate-size lets block-size transition to auto (Chromium/Safari 26+;
   others keep the instant toggle). Reduced motion kills the transition and
   block-size: 0 on a closed item is then just the UA's hidden content. */
@supports (interpolate-size: allow-keywords) {
	:root {
		interpolate-size: allow-keywords;
	}

	.dp-faq__item::details-content,
	.entry-content details::details-content {
		block-size: 0;
		overflow-y: clip;
		transition: block-size 320ms ease, content-visibility 320ms allow-discrete;
	}

	.dp-faq__item[open]::details-content,
	.entry-content details[open]::details-content {
		block-size: auto;
	}
}

/* Shared empty / signpost scene (blog empty, search empty, 404) */

.dp-empty {
	max-inline-size: 40rem;
}

.dp-empty__parrot {
	inline-size: 8rem;
	filter: drop-shadow(0 8px 14px rgba(62, 74, 89, 0.16));
}

.dp-empty__text {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.4rem;
}

.dp-empty .search-form {
	margin-block: var(--space-2) 0;
}

.dp-empty__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-3);
	margin-block-start: var(--space-2);
}

.error-404__title {
	margin-block-start: var(--space-2);
}

.search-form {
	inline-size: 100%;
	max-inline-size: 34rem;
	margin-block-end: var(--space-5);
}

.search-form__label {
	font-weight: 700;
}

.search-form__row {
	display: flex;
	gap: var(--space-2);
	margin-block-start: var(--space-1);
}

.search-form__field {
	flex: 1 1 auto;
	min-inline-size: 0;
}

.search-form__submit {
	flex: 0 0 auto;
}

.search-results {
	list-style: none;
	padding: 0;
	display: grid;
	gap: var(--space-4);
}

.search-result__type {
	display: inline-flex;
	margin-block-end: var(--space-2);
	padding: 0.15rem 0.7rem;
	font-weight: 700;
	font-size: 0.8125rem;
	color: var(--color-ink);
	background-color: color-mix(in srgb, var(--color-sky) 45%, var(--color-paper));
	border: 1px solid #5a86a0;
	border-radius: 999px;
}

/* Product hits show cover + price beside the text. */
.search-result--product {
	display: flex;
	gap: var(--space-3);
	align-items: flex-start;
}

.search-result__media {
	display: block;
	flex: 0 0 6rem;
}

.search-result__img {
	display: block;
	inline-size: 100%;
	block-size: auto;
	border: 1px solid var(--ink-border);
	border-radius: var(--radius-sm);
	background-color: var(--color-paper);
}

.search-result__body {
	min-inline-size: 0;
}

.search-result__price {
	margin: var(--space-1) 0 var(--space-2);
	font-weight: 700;
}

.search-result__tax {
	font-size: 0.8125rem;
	font-weight: 400;
}

.search-result__title {
	font-size: 1.35rem;
}

/* Card/list heading links (post-list, blog-teasers, search-result, post-card):
   ink, no underline, coral underline on hover. */
.post-list .entry-title a,
.blog-teasers__title a,
.search-result__title a,
.post-card__title a {
	color: var(--color-ink);
	text-decoration: none;
}

.post-list .entry-title a:hover,
.blog-teasers__title a:hover,
.search-result__title a:hover,
.post-card__title a:hover {
	text-decoration: underline;
	text-decoration-color: var(--color-coral-dark);
}

.search-result__excerpt {
	margin-block-start: var(--space-2);
}

.post-grid {
	display: grid;
	gap: var(--space-4);
	grid-template-columns: 1fr;
}

@media (min-width: 44rem) {
	.post-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.post-card__title {
	font-size: 1.4rem;
}

.post-card__meta {
	margin-block-start: var(--space-1);
	font-size: 0.9rem;
	color: var(--color-ink);
}

.post-card__excerpt {
	margin-block-start: var(--space-2);
}

.read-more {
	display: inline-block;
	margin-block-start: var(--space-3);
	font-weight: 700;
	text-decoration-color: var(--color-coral-dark);
}

.read-more__arrow {
	display: inline-block;
	transition: transform 120ms ease;
}

.read-more:hover .read-more__arrow {
	transform: translateX(3px);
}

.post-single__header {
	margin-block-end: var(--space-4);
}

.post-single__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-1) var(--space-3);
	margin-block-start: var(--space-2);
	font-size: 0.9375rem;
}

.post-single__author {
	font-weight: 700;
}

.post-single__figure {
	margin-block-end: var(--space-4);
}

.post-single__image {
	inline-size: 100%;
	height: auto;
	border-radius: var(--radius-md);
}

.author-box {
	margin-block-start: var(--space-5);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-4);
}

.author-box__parrot {
	inline-size: 5rem;
	height: auto;
	transform: rotate(-4deg);
}

.author-box__body {
	flex: 1 1 14rem;
}

.author-box__name {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.2rem;
}

.author-box__bio {
	margin-block: var(--space-1) var(--space-2);
	font-size: 0.95rem;
}

.author-box__link,
.post-single__back a {
	font-weight: 700;
	text-decoration-color: var(--color-coral-dark);
}

.post-single__back {
	margin-block-start: var(--space-4);
}

/* Legal-content tables scroll inside their own .dp-table-scroll container. */

.dp-table-scroll {
	overflow-x: auto;
	margin-block: var(--space-4);
}

.dp-table-scroll table {
	inline-size: 100%;
	min-inline-size: 36rem;
	border-collapse: collapse;
	font-size: 0.9rem;
	background-color: var(--color-paper);
}

.dp-table-scroll th,
.dp-table-scroll td {
	padding: var(--space-2) var(--space-3);
	border: 1px solid var(--ink-border);
	text-align: start;
	vertical-align: top;
}

.dp-table-scroll thead th {
	font-family: var(--font-display);
	background-color: var(--color-cream);
}

/* 15. Reduced motion: global kill switch (required accessibility item) */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation: none !important;
		transition: none !important;
		scroll-behavior: auto !important;
	}

	/* ::view-transition-* pseudos sit outside the * selectors above and need
	   their own off switch. */
	@view-transition {
		navigation: none;
	}
}

/* Forced colours: repaint the nav bars, surface the cart label (its bg-image
   icon flattens away); unwind every .visually-hidden clip prop, not just
   display. */

@media (forced-colors: active) {
	.nav-toggle__bars,
	.nav-toggle__bars::before,
	.nav-toggle__bars::after {
		background-color: ButtonText;
		forced-color-adjust: none;
	}

	.cart-link {
		inline-size: auto;
		padding-inline: 0.6rem;
	}

	.cart-link .cart-link__label {
		position: static !important; /* beats .visually-hidden's !important */
		inline-size: auto;
		block-size: auto;
		margin: 0;
		padding: 0;
		overflow: visible;
		clip: auto;
		clip-path: none;
		white-space: normal;
	}
}

/* 16. Print: drop navigation and decorative paper, flatten surfaces */

@media print {
	.site-header,
	.site-footer,
	.skip-link,
	.nav-toggle,
	.tape,
	.torn-edge,
	.hero__layer,
	.over-teaser__decor,
	.site-footer__mascot {
		display: none !important;
	}

	.hero {
		min-block-size: auto;
		background: #fff;
	}

	body {
		background: #fff;
		color: #000;
	}

	.paper-card {
		background: #fff;
		box-shadow: none;
		border: 1px solid #999;
	}
}