/*
 * LEVA Mind: styles that theme.json can't express.
 * Colors, fonts and sizes live in theme.json; always use the CSS variables below.
 */

/*
 * Dividers: a thin line (the line color, --wp--custom--color--line) with the Λ from the logo in its center,
 * in the same color, and a little extra space above and below. Used for the footer rows, Group style
 * "Bordered", the Separator block and the company details on Contact.
 */
:root {
	/* Space between the last paragraph of a section and the next section heading (about 2/3 of the
	   XL spacing preset: 32–52px instead of 48–80px). */
	--leva-section-space: clamp(2rem, 4.5vw, 3.25rem);
	--leva-divider-height: 12px; /* the mark's height */
	--leva-divider-gap: 0.5625rem; /* the line stops this far from the center, on both sides */
	--leva-divider-space: 0.75rem; /* extra space above and below a divider */
	--leva-divider:
		url("../images/divider-mark.svg") center / auto var(--leva-divider-height) no-repeat,
		linear-gradient(var(--wp--custom--color--line), var(--wp--custom--color--line)) left center / calc(50% - var(--leva-divider-gap)) 1px no-repeat,
		linear-gradient(var(--wp--custom--color--line), var(--wp--custom--color--line)) right center / calc(50% - var(--leva-divider-gap)) 1px no-repeat;
}

/* Cormorant Garamond is always italic, also when it is picked as font in the editor. */
.has-cormorant-garamond-font-family {
	font-style: italic;
}

/* Leva U section below the home hero: the text at a readable width, left-aligned on the wide area. */
.home-about .alignwide > * {
	max-width: 46rem;
}

/* Primary color per brand section (body classes from inc/sections.php); Olive Green by default
   (--wp--custom--color--primary in theme.json). Focus rings use the primary color too. */
.leva-section-mind {
	--wp--custom--color--primary: var(--wp--preset--color--olive-green);
}
.leva-section-vit {
	--wp--custom--color--primary: var(--wp--preset--color--terracotta-coral);
}
.leva-section-studio {
	--wp--custom--color--primary: var(--wp--preset--color--plum);
}

/* Page background: Ivory everywhere; on the coming soon page the sky color of the illustration
   "Dromerige wandeling door de duinen" (--leva-sky). The home page: the hero (and the header at the top)
   on that sky color, everything below the hero Ivory like the rest of the site. The sticky header bar
   uses --leva-page-background. */
:root {
	--leva-sky: #EFE4D0;
}
body.home {
	--leva-page-background: var(--leva-sky);
	background-color: var(--leva-page-background);
}
/* Below the hero (the hero has its own sky background): Ivory, as on every other page. */
body.home main:not(.coming-soon),
body.home .site-footer {
	background-color: var(--wp--preset--color--ivory);
}

/* Links: a subtle olive underline instead of a heavy one. */
a {
	text-decoration-color: color-mix(in srgb, var(--wp--custom--color--primary) 60%, transparent);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

/* Buttons: smooth hover. */
.wp-element-button,
.wp-block-button__link {
	transition: background-color 0.2s ease, color 0.2s ease;
}

/* Call-to-action button (Terracotta Coral). */
.wp-block-button.is-style-cta .wp-block-button__link {
	background-color: var(--wp--preset--color--terracotta-coral);
	color: var(--wp--preset--color--white);
}
.wp-block-button.is-style-cta .wp-block-button__link:hover,
.wp-block-button.is-style-cta .wp-block-button__link:focus-visible {
	background-color: var(--wp--preset--color--dark-forest);
	color: var(--wp--preset--color--ivory);
}

/* Badge: pill-shaped label that hugs its text. */
.is-style-badge {
	display: inline-block;
	width: fit-content;
}

/* Short olive rule under titles (as in the brand guide). */
.wp-block-separator.is-style-short {
	width: 3.5rem;
	margin-left: 0;
	border: 0;
	border-top: 2px solid currentColor;
	opacity: 1;
}
.wp-block-separator.has-text-align-center.is-style-short,
.has-text-align-center + .wp-block-separator.is-style-short {
	margin-left: auto;
	margin-right: auto;
}

/* Text selection in brand colors. */
::selection {
	background: var(--wp--preset--color--soft-mustard);
	color: var(--wp--preset--color--dark-forest);
}

/* Outline button (core style): Dark Forest line, fills on hover. */
.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background) {
	background-color: transparent;
	color: var(--wp--preset--color--dark-forest);
	border: 1px solid currentColor;
}
.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background):hover {
	background-color: var(--wp--preset--color--dark-forest);
	color: var(--wp--preset--color--ivory);
	border-color: var(--wp--preset--color--dark-forest);
}

/* Template parts sit flush against the page. */
.wp-site-blocks > header,
.wp-site-blocks > footer,
.wp-site-blocks > .wp-block-template-part {
	margin-block-start: 0;
}

/* Linked headings (category cards, product titles) don't need an underline. */
:where(h1, h2, h3, h4, h5, h6) a {
	text-decoration: none;
}
:where(h1, h2, h3, h4, h5, h6) a:hover {
	text-decoration: underline;
}

/* Mobile menu overlay: large serif links, left-aligned (overrides the desktop "justify right"). */
.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container,
.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item {
	align-items: flex-start;
}
.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding-top: var(--wp--preset--spacing--50);
}
.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	gap: var(--wp--preset--spacing--30);
}
.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-family: var(--wp--preset--font-family--cormorant-garamond);
	font-style: italic;
	font-size: var(--wp--preset--font-size--x-large);
	text-transform: none;
	letter-spacing: 0;
	color: var(--wp--custom--color--primary);
}

/* Sub menus (desktop dropdown): Ivory panel with a Warm Sand border. */
.wp-block-navigation .wp-block-navigation__submenu-container {
	background-color: var(--wp--preset--color--ivory) !important;
	color: var(--wp--preset--color--dark-forest) !important;
	border: 1px solid var(--wp--custom--color--line) !important;
	border-radius: var(--wp--custom--radius);
	box-shadow: 0 8px 24px rgb(62 65 56 / 0.08);
	padding: 0.5rem 0;
	min-width: 13rem !important;
}
.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 0.55rem 1.25rem;
}
.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	color: var(--wp--custom--color--primary);
	background-color: transparent;
}
/* The dropdown sits just below its menu item, in the same place whether it is opening, open or
   closing (a different position only while open made it jump during the closing delay). */
.wp-block-navigation .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-container {
	top: calc(100% + 0.25rem);
}

/* Sub menus in the mobile overlay: small Questrial links under their parent. */
.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none;
	padding: 0.25rem 0 0.5rem 0 !important;
	gap: 0.5rem;
}
.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	font-family: var(--wp--preset--font-family--questrial);
	font-style: normal;
	font-size: var(--wp--preset--font-size--small);
	text-transform: uppercase;
	letter-spacing: var(--wp--custom--letter-spacing--button);
	color: var(--wp--preset--color--dark-forest);
	padding: 0.25rem 0;
}

/* Footer: Ivory like the rest of the page, separated by a thin line. (The header has no line.) */
.site-footer {
	border-top: 1px solid var(--wp--custom--color--line);
}
/* Group style "Bordered": dividers (with the mark) instead of plain lines, and a little extra space
   outside them. Adjacent bordered sections share one divider instead of two. */
.wp-block-group.is-style-bordered {
	position: relative;
	border-top: 0 !important;
	border-bottom: 0 !important;
	margin-block: var(--leva-divider-space) !important;
}
.wp-block-group.is-style-bordered::before,
.wp-block-group.is-style-bordered::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	height: var(--leva-divider-height);
	background: var(--leva-divider);
	pointer-events: none;
}
.wp-block-group.is-style-bordered::before {
	top: calc(var(--leva-divider-height) / -2);
}
.wp-block-group.is-style-bordered::after {
	bottom: calc(var(--leva-divider-height) / -2);
}
.is-style-bordered + .is-style-bordered {
	margin-top: 0 !important;
}
.is-style-bordered + .is-style-bordered::before {
	content: none;
}
/* Separator block (all styles except the short accent line under titles). */
.wp-block-separator:not(.is-style-short) {
	height: var(--leva-divider-height);
	margin-block: calc(var(--wp--preset--spacing--40) + var(--leva-divider-space)) !important;
	border: 0 !important;
	background: var(--leva-divider) !important;
	opacity: 1;
}

/*
 * Link card (Group → style "Link card"): the whole card is clickable.
 * The first link inside stretches over the card, so the card stays a normal,
 * editable group in the editor and keeps one clear link for screen readers.
 */
.is-style-link-card {
	position: relative;
	height: 100%;
	transition: border-color 0.2s ease, transform 0.2s ease;
}
.is-style-link-card a:first-of-type {
	text-decoration: none;
}
.is-style-link-card a:first-of-type::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: var(--wp--custom--radius-button); /* same leaf shape as the card */
}
.is-style-link-card :where(h1, h2, h3, h4)::after {
	content: "→";
	display: inline-block;
	margin-left: 0.4em;
	font-family: var(--wp--preset--font-family--questrial);
	font-style: normal;
	font-size: 0.6em;
	vertical-align: middle;
	transition: transform 0.2s ease;
}
.is-style-link-card:hover,
.is-style-link-card:focus-within {
	border-color: var(--wp--custom--color--primary) !important;
	transform: translateY(-2px);
}
.is-style-link-card:hover :where(h1, h2, h3, h4)::after {
	transform: translateX(4px);
}
.is-style-link-card :where(h1, h2, h3, h4) a:hover {
	text-decoration: none;
}
.is-style-link-card a:first-of-type:focus-visible {
	outline: none;
}
.is-style-link-card:focus-within {
	outline: 2px solid var(--wp--custom--color--primary);
	outline-offset: 3px;
}
.is-style-link-card p {
	margin: 0;
}
@media (prefers-reduced-motion: reduce) {
	.is-style-link-card,
	.is-style-link-card :where(h1, h2, h3, h4)::after {
		transition: none;
		transform: none !important;
	}
}

/*
 * Home intro (desktop): the hero (text with the three brand cards below it) fills one screen below the
 * header, never less than 500px, with the text centered vertically. If the content can't fit (very
 * short screens) the intro grows instead of overlapping. --leva-header-height comes from
 * assets/js/header.js.
 */
@media (min-width: 782px) {
	.home-intro {
		--leva-intro-height: max(
			500px,
			calc(100svh - var(--leva-header-height, 76px) - var(--wp-admin--admin-bar--height, 0px))
		);
		display: flex;
		flex-direction: column;
		min-height: var(--leva-intro-height);
	}
	.home-intro > .home-intro__hero {
		flex: 1 1 auto;
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding-block: clamp(1rem, 4vh, 3rem) !important;
	}
}
/* Short desktop screens: a smaller headline so the text and cards still fit. */
@media (min-width: 782px) and (max-height: 760px) {
	.home-intro__hero h1 {
		font-size: var(--wp--preset--font-size--xx-large);
	}
	.home-intro__hero .has-large-font-size {
		font-size: var(--wp--preset--font-size--medium) !important;
	}
}

/* The tagline right below the headline, not italic, like the coming soon page; a little smaller than Large
   (16px on phones). */
.home-intro__text h1 + p {
	margin-top: 0.25rem !important;
	font-size: 1.1875rem !important;
	font-style: normal;
}
@media (max-width: 600px) {
	.home-intro__text h1 + p {
		font-size: 1rem !important;
	}
}

/* Brand entries: below the text, without boxes or lines, so the headline stays the focus and the left side
   is as airy as the illustration. Each title (and its arrow) has the primary color of its section (BRAND.md:
   Leva Mind Olive Green, Leva Vit Terracotta Coral, Leva Studio Plum). Each entry is still a link card (the
   whole entry is clickable; on hover the arrow moves). */
.home-intro__cards {
	display: flex;
	flex-direction: column;
	gap: clamp(1.1rem, 2.6vh, 1.75rem);
	margin-block-start: var(--wp--preset--spacing--50) !important;
}
.home-intro__cards > .home-intro__brand {
	--leva-brand: var(--wp--preset--color--olive-green);
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0;
	background: none !important;
	-webkit-backdrop-filter: none !important;
	backdrop-filter: none !important;
	transform: none !important;
}
.home-intro__brand.is-leva-vit {
	--leva-brand: var(--wp--preset--color--terracotta-coral);
}
.home-intro__brand.is-leva-studio {
	--leva-brand: var(--wp--preset--color--plum);
}
.home-intro__brand > * {
	margin-block: 0 !important;
}
.home-intro__brand > h3,
.home-intro__brand > h3 a {
	color: var(--leva-brand);
}
.home-intro__brand > h3 {
	font-size: var(--wp--preset--font-size--x-large) !important;
	line-height: 1.2;
}
.home-intro__brand > h3 + p {
	margin-block-start: 0.3rem !important;
	max-width: 26rem;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.55;
}
.home-intro__brand a:first-of-type::after {
	border-radius: 0;
}
.home-intro__brand:focus-within {
	outline-color: var(--leva-brand);
	outline-offset: 6px;
}

/* Footer link columns (block leva-u/footer-nav): one column per menu group. */
.footer-links {
	display: grid;
	grid-template-columns: repeat(var(--footer-links-columns, 4), minmax(0, 1fr));
	gap: var(--wp--preset--spacing--40);
}
.footer-links__title {
	margin-block: 0 0.75rem;
}
.footer-links__title a {
	text-decoration: none;
}
.footer-links__title a:hover {
	text-decoration: underline;
}
.footer-links__list {
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: var(--wp--preset--font-size--small);
}
.footer-links__list li + li {
	margin-top: 0.4rem;
}
.footer-links__list a {
	text-decoration: none;
}
.footer-links__list a:hover,
.footer-links__list a:focus-visible,
.footer-links__list a[aria-current="page"] {
	color: var(--wp--custom--color--primary);
	text-decoration: underline;
}
/* Phones: two columns per row. */
@media (max-width: 781px) {
	.footer-links {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Logo (pattern leva-u/logo): an SVG sized by height, per location. */
.leva-logo {
	margin: 0;
	line-height: 0;
}
.leva-logo img {
	display: block;
	width: auto;
	height: var(--leva-logo-height, 64px);
}
.site-header .leva-logo {
	--leva-logo-height: 52px;
}
@media (max-width: 781px) {
	.site-header .leva-logo {
		--leva-logo-height: 46px;
	}
}

/*
 * Sticky header.
 * At the top of the page: a full-width Ivory bar (no line).
 * Once scrolled (`is-scrolled` on <html>, set in header.js): the bar becomes transparent and a
 * floating card appears behind the logo and menu: content width, rounded, blurred translucent
 * Ivory with a drop shadow, with space above and below.
 * The card is a pseudo-element that extends *outward* from the row, so the logo and menu items
 * never move or resize between the two states.
 */
.wp-site-blocks > header.wp-block-template-part:has(> .site-header) {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 100;
	background-color: var(--leva-page-background, var(--wp--preset--color--ivory));
	transition: background-color 0.25s ease;
}
.site-header__bar {
	/* How far the floating card reaches beyond the content, kept inside the page gutter. */
	--leva-card-reach-x: min(1.5rem, calc(var(--wp--style--root--padding-left, 1.5rem) - 0.5rem));
	--leva-card-reach-y: 0.625rem; /* leaves 12px above and below the card (header padding is 22px) */
	position: relative;
	isolation: isolate;
}
.site-header__bar::before {
	content: "";
	position: absolute;
	inset: calc(-1 * var(--leva-card-reach-y)) calc(-1 * var(--leva-card-reach-x));
	z-index: -1;
	border-radius: 18px;
	border: 1px solid rgb(220 212 193 / 0.7);
	background-color: rgb(244 241 225 / 0.72);
	-webkit-backdrop-filter: blur(14px) saturate(1.2);
	backdrop-filter: blur(14px) saturate(1.2);
	box-shadow: 0 10px 30px rgb(62 65 56 / 0.12), 0 2px 6px rgb(62 65 56 / 0.06);
	opacity: 0;
	transform: scale(0.985);
	transition: opacity 0.25s ease, transform 0.25s ease;
	pointer-events: none;
}
.is-scrolled .wp-site-blocks > header.wp-block-template-part:has(> .site-header) {
	background-color: transparent;
}
.is-scrolled .site-header__bar::before {
	opacity: 1;
	transform: none;
}
/* Browsers without backdrop blur get a more opaque card instead. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.site-header__bar::before {
		background-color: rgb(244 241 225 / 0.96);
	}
}
/* On small screens the admin bar scrolls away, so the header sticks to the very top. */
@media (max-width: 600px) {
	.wp-site-blocks > header.wp-block-template-part:has(> .site-header) {
		top: 0;
	}
}
/* In-page anchors land below the sticky header instead of under it. */
html {
	scroll-padding-top: calc(var(--leva-header-height, 97px) + var(--wp-admin--admin-bar--height, 0px) + 1rem);
}
@media (prefers-reduced-motion: reduce) {
	.wp-site-blocks > header.wp-block-template-part:has(> .site-header),
	.site-header__bar::before {
		transition: none;
	}
}

/*
 * Footer layout:
 * 1. logo + menu link columns (the logo is the first column, same width as the others);
 * 2. contact row: email (left), Instagram (center), WhatsApp (right), each with an icon;
 * 3. copyright line with legal links.
 */
.footer-top {
	/* The logo and every menu column share one grid, so all columns are exactly equal,
	   however many columns the menu produces. */
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--40);
	align-items: start;
}
@media (min-width: 782px) {
	/* The logo starts on the same line as the column headings: no block spacing above the menu
	   columns, and the logo nudged down to the headings' letter tops (they have a little leading). */
	.footer-top > * {
		margin-block: 0 !important;
	}
	.footer-top > .leva-logo {
		margin-top: 3px !important;
	}
}
.footer-top > .footer-links {
	/* The nav spans one grid column per menu column and lines its columns up with the
	   parent grid (subgrid), so it stays a real <nav> landmark for screen readers. */
	grid-column: 2 / span var(--footer-links-columns, 4);
	grid-template-columns: subgrid;
}
.site-footer .leva-logo {
	--leva-logo-height: 96px;
}

.footer-contact {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	position: relative;
}
/* Dividers above and below the contact row run edge to edge across the screen. */
.footer-contact::before,
.footer-contact::after {
	content: "";
	position: absolute;
	left: 50%;
	width: 100vw;
	height: var(--leva-divider-height);
	transform: translateX(-50%);
	background: var(--leva-divider);
}
.footer-contact::before {
	top: calc(var(--leva-divider-height) / -2);
}
.footer-contact::after {
	bottom: calc(var(--leva-divider-height) / -2);
}
/* The full-width lines may not cause sideways scrolling (e.g. next to a scrollbar). */
.site-footer {
	overflow-x: clip;
}
.footer-contact > * {
	margin: 0 !important;
}
.footer-contact > :nth-child(1) { justify-self: start; }
.footer-contact > :nth-child(2) { justify-self: center; }
.footer-contact > :nth-child(3) { justify-self: end; }
/* All three items are equally wide (enough for the longest text); icon and text are centered
   within that width, so every icon sits centered above its text. */
.footer-contact > * {
	width: 8.5rem;
	text-align: center;
}
.footer-contact > * a {
	display: flex;
	width: 100%;
}
.footer-contact a {
	display: inline-flex;
	flex-direction: column; /* icon above the text */
	align-items: center;
	gap: 0.6em;
	text-decoration: none;
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.02em;
}
.footer-contact a::before {
	content: "";
	flex: none;
	width: 2.5em;
	height: 2.5em;
	background-color: var(--wp--custom--color--primary);
	-webkit-mask: var(--leva-icon) center / contain no-repeat;
	mask: var(--leva-icon) center / contain no-repeat;
}
.footer-contact a:hover,
.footer-contact a:focus-visible {
	color: var(--wp--custom--color--primary);
	text-decoration: underline;
}
.footer-contact .has-icon-mail a::before {
	--leva-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2.5'/%3E%3Cpath d='m3.5 7 8.5 6 8.5-6'/%3E%3C/svg%3E");
}
.footer-contact .has-icon-instagram a::before {
	--leva-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6'%3E%3Crect x='3.5' y='3.5' width='17' height='17' rx='5'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Ccircle cx='17.2' cy='6.8' r='1.1' fill='black' stroke='none'/%3E%3C/svg%3E");
}
.footer-contact .has-icon-whatsapp a::before {
	--leva-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linejoin='round'%3E%3Cpath d='M4 20l1.2-3.9A8.3 8.3 0 1 1 8.1 19z'/%3E%3Cpath fill='black' stroke='none' d='M9.1 7.9c.2-.4.4-.5.7-.5h.5c.2 0 .4.1.5.4l.6 1.5c.1.2 0 .4-.1.6l-.5.6c.5 1 1.3 1.8 2.3 2.3l.6-.5c.2-.2.4-.2.6-.1l1.5.6c.3.1.4.3.4.5v.5c0 .3-.2.6-.5.7-.6.3-1.4.4-2.2.1a8.1 8.1 0 0 1-4.6-4.6c-.3-.8-.2-1.6.2-2.1z'/%3E%3C/svg%3E");
}

.footer-legal {
	letter-spacing: 0.02em;
}
.footer-legal a {
	text-decoration: none; /* items use non-breaking spaces, so lines wrap only between items */
}
.footer-legal a:hover,
.footer-legal a:focus-visible {
	color: var(--wp--custom--color--primary);
	text-decoration: underline;
}

@media (max-width: 781px) {
	/* Phones: logo above the link columns; contact items stacked and centered. */
	.footer-top {
		grid-auto-flow: row;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.footer-top > .leva-logo {
		grid-column: 1 / -1;
	}
	.footer-top > .footer-links {
		grid-column: 1 / -1;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.site-footer .leva-logo {
		--leva-logo-height: 80px;
	}
	.footer-contact {
		grid-template-columns: 1fr;
		justify-items: center;
		gap: var(--wp--preset--spacing--40);
	}
	.footer-contact > * {
		justify-self: center !important;
	}
}

/*
 * Footer rhythm: every row has the same *visible* space above and below its content
 * (--leva-footer-space). Each row's padding subtracts the invisible space its content already
 * has (line-height leading, logo whitespace), measured per row: --leva-ink-top / --leva-ink-bottom.
 */
.site-footer {
	--leva-footer-space: clamp(1.75rem, 3vw, 2.5rem);
}
.footer-top,
.footer-contact,
.footer-legal {
	margin-block: 0 !important;
	padding-block:
		calc(var(--leva-footer-space) - var(--leva-ink-top, 0px))
		calc(var(--leva-footer-space) - var(--leva-ink-bottom, 0px)) !important;
}
/* Measured invisible space per row (see above). */
.footer-top {
	--leva-ink-top: 2px;
	--leva-ink-bottom: 8px;
}
@media (max-width: 781px) {
	.footer-top {
		--leva-ink-top: 1px;
	}
}
.footer-contact {
	--leva-ink-top: 4px;
	--leva-ink-bottom: 6.5px;
}
.footer-legal {
	--leva-ink-top: 5px;
	--leva-ink-bottom: 6px;
}
@media (max-width: 781px) {
	.footer-top {
		--leva-ink-bottom: 6px;
	}
	.footer-contact {
		--leva-ink-top: 5px;
		--leva-ink-bottom: 7.5px;
	}
	.footer-legal {
		--leva-ink-bottom: 5px;
	}
}
/* The footer rows (below the newsletter) get a little more vertical space: 36–50px; the contact and
   legal rows 2/3 of that. */
.footer-top {
	--leva-footer-space: clamp(2.25rem, 3.75vw, 3.125rem);
}
.footer-contact,
.footer-legal {
	--leva-footer-space: calc(clamp(2.25rem, 3.75vw, 3.125rem) * 2 / 3);
}
/* Extra space next to the two dividers (around the contact row). */
.footer-top {
	padding-bottom: calc(var(--leva-footer-space) - var(--leva-ink-bottom, 0px) + var(--leva-divider-space)) !important;
}
.footer-contact {
	padding-block:
		calc(var(--leva-footer-space) - var(--leva-ink-top, 0px) + var(--leva-divider-space))
		calc(var(--leva-footer-space) - var(--leva-ink-bottom, 0px) + var(--leva-divider-space)) !important;
}
.footer-legal {
	/* The same visible space below the copyright line as above it (to the divider), down to the page's end. */
	padding-block:
		calc(var(--leva-footer-space) - var(--leva-ink-top, 0px) + var(--leva-divider-space))
		calc(var(--leva-footer-space) - var(--leva-ink-bottom, 0px) + var(--leva-divider-space)) !important;
}

/* Text for screen readers only (e.g. "opens in a new tab"). */
.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

/*
 * Home intro background image (Group → Styles → Background image; replace it with a photo there).
 * A soft Ivory fade on the left keeps the headline readable on any image, and the brand cards
 * get a frosted backdrop like the floating header.
 */
.home-intro {
	position: relative;
	isolation: isolate;
}
.home-intro::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background: linear-gradient(
		90deg,
		rgb(244 241 225 / 0.88) 0%,
		rgb(244 241 225 / 0.7) 32%,
		rgb(244 241 225 / 0) 62%
	);
}
.home-intro__text {
	max-width: 36rem;
}
/* The hero is a flex column; keep its wide row full width so the text starts at the content edge. */
.home-intro__hero > .alignwide {
	width: 100%;
}
.home-intro .is-style-link-card {
	background-color: rgb(244 241 225 / 0.78);
	-webkit-backdrop-filter: blur(12px) saturate(1.15);
	backdrop-filter: blur(12px) saturate(1.15);
}
@media (max-width: 781px) {
	/* Phones: text sits on top of the image, so fade from the top instead of the left. */
	.home-intro::before {
		background: linear-gradient(
			180deg,
			rgb(244 241 225 / 0.9) 0%,
			rgb(244 241 225 / 0.65) 45%,
			rgb(244 241 225 / 0.1) 75%
		);
	}
}

/*
 * Contact form (Jetpack Forms): same field style as the shop forms (Ivory, sand border,
 * 4px radius, focus ring in the primary color), Questrial labels.
 */
.wp-block-jetpack-contact-form :is(input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="number"], input[type="date"], select, textarea) {
	background-color: var(--wp--preset--color--ivory) !important;
	color: var(--wp--preset--color--dark-forest) !important;
	border: 1px solid #CFC7B3 !important;
	border-radius: var(--wp--custom--radius) !important;
	font-family: var(--wp--preset--font-family--questrial);
	font-size: var(--wp--preset--font-size--medium);
	box-shadow: none !important;
}
.wp-block-jetpack-contact-form :is(input, select, textarea):focus {
	border-color: var(--wp--custom--color--primary) !important;
	outline: 2px solid var(--wp--custom--color--primary) !important;
	outline-offset: 1px;
}
.wp-block-jetpack-contact-form label {
	font-family: var(--wp--preset--font-family--questrial);
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--dark-forest);
}
.wp-block-jetpack-contact-form label .required,
.wp-block-jetpack-contact-form .grunion-label-required {
	color: var(--wp--custom--color--primary);
	opacity: 0.85;
}
.contact-privacy-note {
	opacity: 0.85;
}
/* Jetpack wraps the dropdown in its own white, square-bordered box: let the select carry the style. */
.wp-block-jetpack-contact-form .contact-form__select-wrapper,
.wp-block-jetpack-contact-form .contact-form__select-element-wrapper {
	background: transparent !important;
	border: 0 !important;
	border-radius: var(--wp--custom--radius) !important;
}

/*
 * Newsletter section (pattern leva-u/newsletter), the first row of the footer area.
 * Styles the Jetpack Subscribe block (WordPress.com newsletter); Jetpack adds inline sizes and
 * colors to its field and button, hence the !important rules.
 */
.newsletter {
	position: relative;
	padding-block:
		calc(var(--leva-footer-space) * 1.5 - var(--leva-ink-top, 0px))
		calc(var(--leva-footer-space) * 1.5 - var(--leva-ink-bottom, 0px)) !important;
	margin-block: 0 !important;
}
/* The newsletter is set apart by a full-width background in the primary color (Olive Green, Terracotta
   Coral on Leva Vit) with Ivory text, instead of divider lines. */
.newsletter {
	background-color: var(--wp--custom--color--primary);
	color: var(--wp--preset--color--ivory);
}
.newsletter :is(h2, p, .is-style-label) {
	color: var(--wp--preset--color--ivory);
}
.newsletter a {
	color: inherit;
	text-decoration-color: color-mix(in srgb, currentColor 60%, transparent);
}
/* Focus rings in Ivory here (the primary color would vanish on this background). */
.newsletter :focus-visible {
	outline-color: var(--wp--preset--color--ivory) !important;
}
/* No line at the top of the footer when the newsletter (with its own background) opens it. */
.site-footer:has(> .newsletter) {
	border-top: 0;
}
.newsletter__inner {
	margin-block: 0 !important;
}
.newsletter h2 {
	margin-block: 0.35rem 0.5rem;
}
.newsletter p {
	margin-block: 0;
}
:is(.newsletter, .coming-soon) .wp-block-jetpack-subscriptions,
:is(.newsletter, .coming-soon) .wp-block-jetpack-subscriptions__container,
:is(.newsletter, .coming-soon) .wp-block-jetpack-subscriptions form {
	margin: 0;
}
:is(.newsletter, .coming-soon) .wp-block-jetpack-subscriptions__form-elements {
	/* The button sits inside the email field: 4px from its top, right and bottom edges. */
	--leva-field-height: 3rem;
	--leva-field-inset: 4px;
	--leva-submit-width: 7.25rem;
	position: relative;
	display: block !important;
}
:is(.newsletter, .coming-soon) #subscribe-email {
	margin: 0 !important;
}
:is(.newsletter, .coming-soon) #subscribe-submit {
	position: absolute;
	top: var(--leva-field-inset);
	right: var(--leva-field-inset);
	bottom: var(--leva-field-inset);
	margin: 0 !important;
	display: flex;
}
:is(.newsletter, .coming-soon) #subscribe-email input {
	box-sizing: border-box;
	width: 100% !important;
	height: var(--leva-field-height) !important; /* WordPress.com's subscribe styles set their own height */
	margin: 0 !important;
	/* Room on the right so typed text never runs under the button. */
	padding: 0 calc(var(--leva-submit-width) + var(--leva-field-inset) + 0.75rem) 0 1.25rem !important;
	background-color: var(--wp--preset--color--ivory) !important;
	color: var(--wp--preset--color--dark-forest) !important;
	border: 1px solid transparent !important; /* the Ivory field stands out on the colored background */
	border-radius: var(--wp--custom--radius-button) !important; /* same leaf shape as the buttons */
	font-family: var(--wp--preset--font-family--questrial) !important;
	font-size: var(--wp--preset--font-size--medium) !important;
}
:is(.newsletter, .coming-soon) #subscribe-email input:focus {
	outline: 2px solid var(--wp--preset--color--ivory);
	outline-offset: 2px;
}
:is(.newsletter, .coming-soon) #subscribe-submit button {
	box-sizing: border-box;
	width: var(--leva-submit-width);
	height: 100%; /* field height minus 2 × 4px */
	margin: 0 !important;
	padding: 0 0.75rem !important;
	background-color: var(--wp--custom--color--primary) !important;
	color: var(--wp--preset--color--white) !important;
	border: 0 !important;
	/* Close to concentric with the field (6/24px minus the 4px inset), with a slightly softer
	   small corner so it doesn't look square. */
	border-radius: 4px 20px 4px 20px !important;
	font-family: var(--wp--preset--font-family--questrial) !important;
	font-size: 0.8125rem !important;
	text-transform: uppercase;
	letter-spacing: var(--wp--custom--letter-spacing--button);
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}
:is(.newsletter, .coming-soon) #subscribe-submit button:hover,
:is(.newsletter, .coming-soon) #subscribe-submit button:focus-visible {
	background-color: var(--wp--preset--color--dark-forest) !important;
	color: var(--wp--preset--color--ivory) !important;
}
.newsletter__privacy {
	margin-top: 0.75rem !important;
	opacity: 0.85;
}
/* Local preview only (no WordPress.com connection). */
.newsletter__preview-note {
	display: none;
	margin-top: 0.75rem !important;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--ivory);
}
.newsletter__preview.is-submitted .newsletter__preview-note {
	display: block;
}
@media (max-width: 781px) {
	:is(.newsletter, .coming-soon) .wp-block-jetpack-subscriptions__form-elements {
		--leva-submit-width: 7.25rem;
	}
}
/*
 * MailerLite signup form (plugin "MailerLite – Signup forms"; replaces the Subscribe block when set up,
 * inc/render-filters.php): the same field with the button inside it. Its title and description are left
 * out (the section has its own heading and text); the e-mail label is for screen readers only.
 */
:is(.newsletter, .coming-soon) .mailerlite-form :is(.mailerlite-form-title, .mailerlite-form-description) {
	display: none;
}
:is(.newsletter, .coming-soon) :is(.leva-newsletter-form, .mailerlite-form form) {
	margin: 0 !important;
}
:is(.newsletter, .coming-soon) .mailerlite-form-inputs {
	--leva-field-height: 3rem;
	--leva-field-inset: 4px;
	--leva-submit-width: 7.25rem;
	position: relative;
	text-align: left;
}
:is(.newsletter, .coming-soon) .mailerlite-form-field {
	margin: 0 !important;
}
:is(.newsletter, .coming-soon) .mailerlite-form-field label:not(.error) {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}
:is(.newsletter, .coming-soon) .mailerlite-form-field input {
	box-sizing: border-box;
	display: block;
	width: 100%;
	height: var(--leva-field-height);
	margin: 0;
	padding: 0 calc(var(--leva-submit-width) + var(--leva-field-inset) + 0.75rem) 0 1.25rem;
	background-color: var(--wp--preset--color--ivory);
	color: var(--wp--preset--color--dark-forest);
	border: 1px solid transparent;
	border-radius: var(--wp--custom--radius-button); /* same leaf shape as the buttons */
	font-family: var(--wp--preset--font-family--questrial);
	font-size: var(--wp--preset--font-size--medium);
}
.coming-soon .mailerlite-form-field input {
	border-color: #D9CBB0; /* the Ivory field on the light sky */
}
.newsletter .mailerlite-form-field input:focus {
	outline: 2px solid var(--wp--preset--color--ivory);
	outline-offset: 2px;
}
/* The button (and, while sending, the "please wait" text) inside the field, on the right. */
:is(.newsletter, .coming-soon) :is(.mailerlite-subscribe-button-container, .mailerlite-form-loader) {
	position: absolute;
	top: var(--leva-field-inset);
	right: var(--leva-field-inset);
	height: calc(var(--leva-field-height) - 2 * var(--leva-field-inset));
	margin: 0;
	text-align: center;
}
:is(.newsletter, .coming-soon) .mailerlite-form-loader {
	width: var(--leva-submit-width);
	line-height: calc(var(--leva-field-height) - 2 * var(--leva-field-inset));
	font-size: var(--wp--preset--font-size--small);
	font-weight: 400;
	color: var(--wp--preset--color--dark-forest);
}
:is(.newsletter, .coming-soon) .mailerlite-subscribe-submit {
	box-sizing: border-box;
	width: var(--leva-submit-width);
	height: 100%;
	margin: 0;
	padding: 0 0.75rem;
	background-color: var(--wp--custom--color--primary);
	color: var(--wp--preset--color--white);
	border: 0;
	border-radius: 4px 20px 4px 20px;
	font-family: var(--wp--preset--font-family--questrial);
	font-size: 0.8125rem;
	text-transform: uppercase;
	letter-spacing: var(--wp--custom--letter-spacing--button);
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}
:is(.newsletter, .coming-soon) .mailerlite-subscribe-submit:is(:hover, :focus-visible) {
	background-color: var(--wp--preset--color--dark-forest);
	color: var(--wp--preset--color--ivory);
}
:is(.newsletter, .coming-soon) .mailerlite-subscribe-submit:disabled {
	opacity: 0.6;
	cursor: wait;
}
/* Error ("enter a valid e-mail address") below the field, and the thank-you message. */
:is(.newsletter, .coming-soon) .mailerlite-form-error {
	display: block;
	margin-top: 0.5rem;
	font-size: var(--wp--preset--font-size--small);
	color: inherit;
}
.coming-soon .mailerlite-form-error {
	color: var(--wp--preset--color--terracotta-coral);
}
:is(.newsletter, .coming-soon) .mailerlite-form-response {
	margin: 0;
	text-align: inherit;
	color: inherit;
}
:is(.newsletter, .coming-soon) .mailerlite-form-response :is(h4, span) {
	margin: 0;
	font-family: var(--wp--preset--font-family--questrial);
	font-size: var(--wp--preset--font-size--medium);
	font-style: normal;
	font-weight: 400;
	line-height: 1.5;
	color: inherit !important; /* MailerLite colors the message green by default */
}
/* Measured invisible space in the newsletter row (label leading, privacy note line-height). */
.newsletter {
	--leva-ink-top: 4px;
	--leva-ink-bottom: 5px;
}
@media (max-width: 781px) {
	.newsletter {
		--leva-ink-bottom: 4px;
	}
}

/* Company details on the Contact page: label column + value column, separated by a thin line. */
.company-details {
	position: relative;
	margin-top: var(--wp--preset--spacing--60) !important;
	padding-top: calc(var(--wp--preset--spacing--50) + var(--leva-divider-space));
}
.company-details::before {
	content: "";
	position: absolute;
	top: calc(var(--leva-divider-height) / -2);
	left: 0;
	right: 0;
	height: var(--leva-divider-height);
	background: var(--leva-divider);
}
.company-details h2 {
	margin-block: 0 var(--wp--preset--spacing--30);
}
.company-details__list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.company-details__list li {
	display: grid;
	grid-template-columns: 7rem 1fr;
	gap: var(--wp--preset--spacing--30);
	align-items: baseline;
	padding-block: 0.4rem;
}
.company-details__label {
	font-size: var(--wp--preset--font-size--small);
	text-transform: uppercase;
	letter-spacing: var(--wp--custom--letter-spacing--label);
	color: var(--wp--custom--color--primary);
}

/*
 * Wide pages (template "Brede pagina"): copy on the left, a sticky aside on the right
 * (e.g. the packages on Ademcoaching). The aside stays in view below the floating header.
 */
.page-columns {
	align-items: flex-start !important;
}
@media (min-width: 782px) {
	/* A column taller than the screen scrolls along until its bottom is in view, then sticks
	   (--leva-aside-height comes from assets/js/header.js). */
	.page-aside {
		position: sticky;
		top: min(
			calc(var(--leva-header-height, 96px) + var(--wp-admin--admin-bar--height, 0px) + 1.5rem),
			calc(100vh - var(--leva-aside-height, 0px) - 1.5rem)
		);
	}
}
/* Brand cards in the text (Over mij, "Ontdek Leva U": groups with the link card style and class "brand-card"
   in a group "brand-cards"):
   the card around a brand's title and text, the whole card clickable; the title (and its arrow) in the
   brand's primary color (Leva Mind Olive Green, Leva Vit Terracotta Coral, Leva Studio Plum). */
/* Side by side (group "brand-cards"), equally tall; stacked on phones. */
.brand-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
	gap: 1rem;
	margin-block: var(--wp--preset--spacing--30) 0 !important;
}
.brand-card {
	--leva-brand: var(--wp--preset--color--olive-green);
	height: auto;
	margin: 0 !important;
	padding: var(--wp--preset--spacing--40) !important;
	border: 1px solid var(--wp--custom--color--line);
	border-radius: var(--wp--custom--radius-button);
	background-color: color-mix(in srgb, var(--wp--preset--color--dark-forest) 3%, var(--leva-page-background, var(--wp--preset--color--ivory)));
}
.brand-card.is-leva-vit {
	--leva-brand: var(--wp--preset--color--terracotta-coral);
}
.brand-card.is-leva-studio {
	--leva-brand: var(--wp--preset--color--plum);
}
.brand-card:hover,
.brand-card:focus-within {
	border-color: var(--leva-brand) !important;
}
.brand-card > * {
	margin-block: 0 !important;
}
.brand-card > * + * {
	margin-block-start: 0.75rem !important;
}
.brand-card > p {
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.65;
}
.brand-card > h3,
.brand-card > h3 a {
	color: var(--leva-brand);
}
.brand-card:focus-within {
	outline-color: var(--leva-brand);
}
.brand-cards + p {
	margin-block-start: var(--wp--preset--spacing--40) !important;
}

/* A signature at the end of a text (paragraph with class "page-signature", e.g. "Liefs Sanne" on Over mij):
   in the heading font and the primary color, like a handwritten closing. */
.page-signature {
	margin-block-start: var(--wp--preset--spacing--40) !important;
	font-family: var(--wp--preset--font-family--cormorant-garamond);
	font-style: italic;
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 1.2;
	color: var(--wp--custom--color--primary);
}

/* Photo in the text (Image block with class "page-photo", e.g. Over mij): landscape, in the buttons' leaf
   shape, with the same space around it as between sections. The photo is cropped around its middle to 3:2
   plus 30px above and below (60px taller), at any width (container query units). */
.page-photo {
	margin-block: var(--leva-section-space) !important;
	container-type: inline-size;
}
.page-photo img {
	display: block;
	width: 100%;
	height: calc(100cqw * 2 / 3 + 60px);
	object-fit: cover;
	object-position: 50% 45%;
	border-radius: var(--wp--custom--radius-button);
}

/*
 * Portrait column (e.g. Over mij: a column with class "page-portrait"). Inside it a group with class
 * "page-portrait__stack": an Image block with class "page-portrait__photo" (a cut-out photo on a transparent
 * background) and right below it a card (class "page-portrait__card", e.g. "Samenwerken?") in the buttons'
 * leaf shape, so the person seems to stand behind it. Wide screens:
 * the column runs the full height of the text and the group sticks to the bottom of the screen while
 * reading; at the end of the text it rests at the bottom of the column. The photo is mirrored here in CSS
 * (the file itself is not). Phones: below the text.
 */
.page-portrait__stack {
	display: flex;
	flex-direction: column;
	align-items: center;
}
.page-portrait__stack > * {
	margin: 0 !important;
}
.page-portrait__photo {
	position: relative;
	z-index: 0;
	width: 54%; /* about half the column, centered */
}
.page-portrait__photo img {
	display: block;
	width: 100%;
	height: auto;
	transform: scaleX(-1);
}
.page-portrait__card {
	position: relative;
	z-index: 1;
	align-self: stretch;
	padding: var(--wp--preset--spacing--40) !important;
	border: 1px solid var(--wp--custom--color--line);
	border-radius: var(--wp--custom--radius-button);
	background-color: var(--wp--preset--color--ivory);
	box-shadow: 0 10px 30px rgb(62 65 56 / 0.08), 0 2px 6px rgb(62 65 56 / 0.05);
}
.page-portrait__card > * {
	margin-block: 0;
}
.page-portrait__card > * + * {
	margin-block-start: 0.6rem;
}
.page-portrait__card h2 {
	font-size: var(--wp--preset--font-size--x-large) !important;
}
.page-portrait__card p {
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.6;
}
@media (min-width: 782px) {
	.page-columns > .page-portrait {
		align-self: stretch !important;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
	}
	.page-portrait__stack {
		position: sticky;
		bottom: 3.5rem;
	}
	.page-portrait__photo img {
		/* The photo and the card fit the screen below the page title from the start. */
		max-height: calc((100vh - var(--leva-header-height, 96px) - var(--wp-admin--admin-bar--height, 0px) - 9.5rem) * 0.54);
		object-fit: contain;
		object-position: 50% 100%;
	}
	/* The text column's bottom space: the card rests just above the footer at the end. */
	.page-content > .page-columns:has(> .page-portrait):last-child {
		margin-bottom: calc(-1 * var(--wp--preset--spacing--60) + 3.5rem) !important;
	}
}
@media (max-width: 781px) {
	.page-portrait__stack {
		max-width: 26rem;
		margin-inline: auto;
		margin-top: var(--wp--preset--spacing--50);
	}
}
/* Phones, a page with a contact form in its text column and a side column (e.g. Mindful walks): the side
   column (the packages) right after the text, and only then the form with its heading and intro ("Zie ik je
   snel?"). The text column's blocks join the page's own order for this (display: contents). */
@media (max-width: 781px) {
	.page-columns:has(> .page-aside):has(> .wp-block-column .page-contact) {
		display: flex;
		flex-direction: column;
		row-gap: 0;
	}
	.page-columns:has(> .page-aside):has(> .wp-block-column .page-contact) > .wp-block-column:not(.page-aside) {
		display: contents;
	}
	.page-columns:has(> .page-aside):has(> .wp-block-column .page-contact) > .page-aside {
		order: 1;
		margin-block: var(--wp--preset--spacing--50) 0 !important;
	}
	.page-columns > .wp-block-column > :is(h2:has(+ p + .page-contact), p:has(+ .page-contact), .page-contact) {
		order: 2;
	}
	/* (No collapsing margins in this order: the spacing set here, as on Ademcoaching.) */
	.page-columns > .wp-block-column > h2:has(+ p + .page-contact) {
		margin-block: var(--leva-section-space) 0.75rem !important;
	}
	.page-columns > .wp-block-column > p:has(+ .page-contact) {
		margin-block: 0.75rem 0 !important;
	}
	.page-columns > .wp-block-column > .page-contact {
		margin-block: 1.5rem 0 !important;
	}
	.page-columns:has(> .page-aside):has(> .wp-block-column .page-contact) > .wp-block-column:not(.page-aside) > * {
		margin-block-end: 0;
	}
}

.page-aside > .is-style-label {
	margin-block: 0 0.5rem;
}
.page-aside__intro {
	margin-block: 0 var(--wp--preset--spacing--30) !important;
	font-size: var(--wp--preset--font-size--small); /* as small as the note below the packages */
}
/* Short note under the packages (e.g. the location on Mindful walks). */
.page-aside__note {
	margin-block: var(--wp--preset--spacing--30) 0 !important;
	font-size: var(--wp--preset--font-size--small);
}
.page-closing {
	margin-top: var(--leva-section-space) !important;
}
/* Conditional form fields (assets/js/conditional-fields.js), e.g. "Aantal deelnemers" for a group. */
.wp-block-jetpack-contact-form .is-hidden-field {
	display: none !important;
}

/*
 * Pages (templates page and page-wide): left-aligned on the full content width. The title starts at
 * the left edge of the wide area (1200px); text blocks start there too and keep a readable width, the
 * same as the text column on Ademcoaching (62% of the row, minus its share of the column gap). Wide
 * and full blocks (columns, cards, images set to wide/full) use the whole width. Phones: full width.
 */
@media (min-width: 782px) {
	.page-content > :not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright) {
		max-width: calc(min(100%, var(--wp--style--global--wide-size)) * 0.62 - var(--wp--preset--spacing--60) * 0.62);
		margin-left: max(0px, calc((100% - var(--wp--style--global--wide-size)) / 2)) !important;
		margin-right: auto !important;
	}
}

/*
 * Table of contents (Group block with class "page-toc", e.g. Algemene voorwaarden; filled by
 * assets/js/page-toc.js). Wide screens: the text in a 62% column on the left and the table of contents
 * sticky in the right column; the list scrolls by itself when it's taller than the screen. Narrow
 * screens: a collapsible "Inhoud" block where it's placed in the text.
 */
@media (min-width: 1024px) {
	.page-content:has(> .page-toc) {
		display: grid;
		grid-template-columns:
			1fr
			minmax(0, calc(min(100%, var(--wp--style--global--wide-size)) * 0.62 - var(--wp--preset--spacing--60) * 0.62))
			var(--wp--preset--spacing--60)
			minmax(0, calc(min(100%, var(--wp--style--global--wide-size)) * 0.38 - var(--wp--preset--spacing--60) * 0.38))
			1fr;
		align-items: start;
	}
	.page-content:has(> .page-toc) > :not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.page-toc) {
		grid-column: 2;
		max-width: none;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
	.page-content:has(> .page-toc) > .alignwide {
		grid-column: 2 / 5;
	}
	.page-content:has(> .page-toc) > .alignfull {
		grid-column: 1 / -1;
	}
	.page-content:has(> .page-toc) > .page-toc.page-toc {
		grid-column: 4;
		grid-row: 1 / span 999;
		align-self: stretch;
		max-width: none !important; /* the full right column (not the text width) */
		margin: 0 !important;
	}
	.page-toc__details {
		position: sticky;
		top: calc(var(--leva-header-height, 96px) + var(--wp-admin--admin-bar--height, 0px) + 1.5rem);
	}
	.page-toc .page-toc__title {
		display: none;
	}
	.page-toc__nav {
		max-height: calc(100vh - var(--leva-header-height, 96px) - var(--wp-admin--admin-bar--height, 0px) - 3rem);
		overflow-y: auto;
		overscroll-behavior: contain;
		scrollbar-width: thin;
		padding-right: 0.5rem;
	}
}
/* Before the script runs (or without it), only the block's title would show: hide it. */
.page-toc:not(.is-ready):not(.block-editor-block-list__block) {
	display: none;
}
.page-toc__nav {
	position: relative;
}
.page-toc__list {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.4;
}
.page-toc__item a {
	display: block;
	padding: 0.3rem 0 0.3rem 0.85rem;
	border-left: 2px solid var(--wp--custom--color--line);
	color: var(--wp--preset--color--dark-forest);
	text-decoration: none;
	transition: color 0.15s ease, border-color 0.15s ease;
}
.page-toc__item a:hover {
	color: var(--wp--custom--color--primary);
}
.page-toc__item a.is-active {
	border-left-color: var(--wp--custom--color--primary);
	color: var(--wp--custom--color--primary);
}
/* H2s with H3s below them (the parts of the Algemene voorwaarden, "DEEL I – …"): small uppercase labels
   between the articles. Without H3s (Privacyverklaring) the H2s are plain items. */
.page-toc__list:has(.is-h3) .page-toc__item.is-h2 a {
	margin-top: 0.9rem;
	padding-block: 0.35rem;
	font-size: 0.7rem;
	letter-spacing: var(--wp--custom--letter-spacing--label);
	text-transform: uppercase;
}
.page-toc__list:has(.is-h3) .page-toc__item.is-h2:first-child a {
	margin-top: 0;
}
/* Narrow screens: a collapsible block. */
@media (max-width: 1023px) {
	.page-toc {
		margin-block: var(--wp--preset--spacing--40) !important;
		padding: 0.25rem 1rem;
		border: 1px solid var(--wp--custom--color--line);
		border-radius: var(--wp--custom--radius-button);
	}
	.page-toc__title {
		padding: 0.6rem 0;
		font-size: 0.75rem;
		letter-spacing: var(--wp--custom--letter-spacing--label);
		text-transform: uppercase;
		cursor: pointer;
	}
	.page-toc__nav {
		padding-bottom: 0.75rem;
	}
}

/* Page title with its subtitle (templates page and page-wide; inc/subtitle.php): grouped closely. */
.page-heading > .wp-block-post-title {
	margin-bottom: 0;
}
.page-heading > .page-subtitle {
	margin-top: 0.5rem !important;
	font-family: var(--wp--preset--font-family--questrial);
	font-style: normal;
	font-size: clamp(1.2rem, 1rem + 0.5vw, 1.375rem); /* up to the Large preset (22px) */
	line-height: 1.3;
	color: var(--wp--preset--color--dark-forest);
}

/* A paragraph that continues the subtitle (class "page-subtitle-follow", first in the page content,
   e.g. Ademcoaching): right below it, without the usual space between title area and content. */
.page-content > .page-subtitle-follow:first-child {
	margin-top: calc(-1 * var(--wp--style--block-gap, 1.5rem) + 0.25rem) !important;
}

/* Contact form at the end of the text column (e.g. Mindful walks), right below the sentence that
   introduces it. */
.page-contact {
	margin-top: var(--wp--preset--spacing--30) !important;
}
.page-contact,
.page-closing {
	scroll-margin-bottom: 1.5rem; /* jump-link.js scrolls the form to the bottom of the screen */
}
.page-contact > .is-style-label {
	margin-block: 0 0.5rem;
}
/* Same width as the left column above it (62% of the row, minus its share of the column gap). */
@media (min-width: 782px) {
	.page-closing > * {
		max-width: calc(62% - var(--wp--preset--spacing--60) * 0.62);
	}
}

/* Package cards (WooCommerce products in the aside): Ivory with a thin line, leaf-shaped. */
.package-card {
	padding: 1.1rem var(--wp--preset--spacing--30) 1.25rem;
	border: 1px solid var(--wp--custom--color--line);
	border-radius: var(--wp--custom--radius-button);
	text-align: left;
}
.package-card > * {
	margin-block: 0 !important;
	text-align: left !important;
}
.package-card > * + * {
	margin-block-start: 0.25rem !important;
}
.package-card h3 {
	font-size: var(--wp--preset--font-size--large);
	font-weight: 600;
}
.package-card .wp-block-woocommerce-product-price {
	font-size: var(--wp--preset--font-size--medium);
	color: var(--wp--preset--color--dark-forest);
}
.package-card .wp-block-post-excerpt__excerpt {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
}
.package-card .wp-block-woocommerce-product-button {
	margin-top: 0.75rem !important;
	justify-content: flex-start;
	text-align: left;
}
.package-card .wc-block-components-product-button {
	align-items: flex-start !important;
	justify-content: flex-start !important;
}
.package-card .wp-block-woocommerce-product-button .wp-block-button__link,
.package-card .wp-block-woocommerce-product-button .wc-block-components-product-button__button {
	margin: 0;
	padding: 0.55rem 1.1rem;
	font-size: 0.8125rem;
}
/* Package cards written out on the page (not products, e.g. Mindful walks): title, what's included,
   price and an optional extra below a thin line. */
.packages > .package-card.is-static + .package-card.is-static {
	margin-top: var(--wp--preset--spacing--30);
}
.package-card.is-static h3 {
	margin-bottom: 0.5rem !important;
}
.package-card__features {
	padding-left: 1.1em;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.6;
}
.package-card__price {
	padding-top: 0.5rem;
	font-size: var(--wp--preset--font-size--large);
	color: var(--wp--preset--color--dark-forest);
}
.package-card__extra {
	margin-top: 0.35rem !important; /* right below the price, no divider */
	font-size: var(--wp--preset--font-size--small);
}

/*
 * Package cards with details (class "has-details", e.g. Ademcoaching; assets/js/package-details.js):
 * the card shows title, summary and price; clicking it opens all details in an overlay that grows
 * out of the card. In the editor the details stay visible, so they can be edited.
 */
.package-card.has-details {
	position: relative;
}
/* On the site the card shows only the detail rows marked "is-in-card" (e.g. Traject), styled exactly
   as in the overlay; the overlay shows them all. */
.package-card.has-details:not(.package-dialog):not(.block-editor-block-list__block) > .package-card__details > .package-card__row:not(.is-in-card) {
	display: none;
}
.package-card.has-details:not(.package-dialog):not(.block-editor-block-list__block) > .package-card__details:not(:has(.is-in-card)) {
	display: none;
}
.package-card.has-details > .package-card__details {
	margin-top: 1rem !important;
}
.package-card__summary {
	font-size: var(--wp--preset--font-size--small);
}
/* Cards with details: the summary close below the title row (no margin under the title in that row). */
.package-card.is-static .package-card__head > h3 {
	margin-bottom: 0 !important;
}
.package-card.has-details > .package-card__summary {
	margin-top: 0.15rem !important;
	line-height: 1.5;
}
/* In the card the traject (rows marked "is-in-card") has no label and no line above it; the overlay
   shows both (faded in by assets/js/package-details.js). */
.package-card.has-details:not(.package-dialog) .package-card__row.is-in-card {
	padding-top: 0;
	border-top: 0;
}
.package-card.has-details:not(.package-dialog) .package-card__row.is-in-card > .package-card__label {
	display: none;
}
.package-card.has-details:not(.package-dialog) > .package-card__details {
	margin-top: 0.6rem !important;
}
/* (In the overlay the traject label grows in from zero height: keep it clipped meanwhile.) */
.package-dialog .package-card__row.is-in-card > .package-card__label {
	overflow: hidden;
}
.package-card.is-interactive {
	cursor: pointer;
	transition: border-color 0.2s ease, transform 0.2s ease;
}
.package-card.is-interactive:hover,
.package-card.is-interactive:focus-within {
	border-color: var(--wp--custom--color--primary);
	transform: translateY(-2px);
}
/* Title with the price top right (group "package-card__head"). */
.package-card__head {
	gap: 1rem !important;
	align-items: baseline !important;
}
.package-card__head > * {
	margin: 0 !important;
}
.package-card__head > .package-card__price {
	padding: 0;
	line-height: 1.15; /* like the title, so the summary sits close below it */
	white-space: nowrap;
}
/* Cards with details (and the script): no price (nor the optional extra below it) in the card; they show
   once the card is opened. */
.package-card.has-details.is-interactive:not(.package-dialog) :is(.package-card__price, .package-card__extra) {
	display: none;
}
/* Bottom row: the add-to-cart button and "Meer informatie". */
.package-card.is-interactive {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	column-gap: 1rem;
}
.package-card.is-interactive > * {
	grid-column: 1 / -1;
}
.package-card.is-interactive > .wp-block-woocommerce-product-button {
	grid-column: 1;
	position: relative;
	z-index: 1; /* above the card-wide click area */
	margin-top: 1rem !important;
}
/* "Meer informatie →": visible, and its ::after makes the whole card clickable. */
.package-card__open {
	grid-column: 2 !important;
	align-self: center;
	margin: 1rem 0 0 !important;
	padding: 0.25rem 0;
	border: 0;
	background: none;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.02em;
	color: var(--wp--custom--color--primary);
	text-decoration: underline;
	text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
	text-underline-offset: 0.25em;
	cursor: pointer;
	white-space: nowrap;
}
.package-card__open::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}
.package-card__open span[aria-hidden] {
	display: inline-block;
	transition: transform 0.2s ease;
}
.package-card.is-interactive:hover .package-card__open span[aria-hidden] {
	transform: translateX(3px);
}
.package-card__open:focus-visible {
	outline: none;
}
.package-card__open:focus-visible::after {
	outline: 2px solid var(--wp--custom--color--primary);
	outline-offset: 3px;
}
.package-card__open .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}
.package-card.is-open-elsewhere {
	visibility: hidden;
}

/* Overlay: the site behind it is blurred and doesn't scroll. */
html.has-package-dialog {
	overflow: hidden;
	padding-right: var(--leva-scrollbar, 0px);
}
.package-dialog__backdrop {
	position: fixed;
	inset: 0;
	z-index: 1000;
	background: rgb(244 241 225 / 0.45);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}
.package-card.package-dialog {
	position: fixed;
	z-index: 1001;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	box-sizing: border-box;
	width: min(40rem, calc(100vw - 3rem));
	max-height: calc(100dvh - 3rem);
	margin: 0 !important;
	padding: 1.5rem var(--wp--preset--spacing--40) 1.75rem;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	background-color: var(--wp--preset--color--ivory);
	box-shadow: 0 24px 60px rgb(62 65 56 / 0.18), 0 4px 12px rgb(62 65 56 / 0.08);
}
/* While the card grows, title and summary stay at the top and the price at the bottom; the details
   are revealed in between (they shrink to fit until the overlay is fully open). */
.package-card.package-dialog > * {
	flex: none;
}
.package-card.package-dialog > .package-card__details {
	flex: 0 1 auto;
	min-height: 0;
	overflow: hidden;
}
.package-card.package-dialog.is-open > .package-card__details {
	flex-shrink: 0;
	overflow: visible;
}
.package-card.package-dialog.is-placed {
	transform: none; /* from here on the script sets the position and size */
}
.package-card.package-dialog.is-fullscreen {
	top: 0;
	left: 0;
	transform: none;
	width: 100vw;
	height: 100dvh;
	max-height: none;
	border: 0;
	padding-top: 1.25rem;
}
.package-card.package-dialog.is-open {
	overflow-y: auto;
	overscroll-behavior: contain;
}
.package-dialog__close {
	position: sticky;
	top: 0;
	align-self: flex-end;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	margin: -0.5rem -0.75rem -2rem 0 !important; /* overlaps the title row, top right */
	padding: 0;
	border: 0;
	border-radius: var(--wp--custom--radius-pill);
	background: var(--wp--preset--color--ivory);
	color: var(--wp--preset--color--dark-forest);
	cursor: pointer;
}
.package-dialog__close svg {
	fill: currentColor;
}
.package-dialog__close:hover {
	color: var(--wp--custom--color--primary);
}
.package-card__row {
	padding-top: 0.85rem;
	border-top: 1px solid var(--wp--custom--color--line);
}
.package-card__row + .package-card__row {
	margin-top: 0.85rem !important;
}
.package-card__row > * {
	margin-block: 0 !important;
}
.package-card__row > * + * {
	margin-top: 0.3rem !important;
}
.package-card__label {
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: var(--wp--custom--letter-spacing--label);
	color: var(--wp--custom--color--primary);
}
.package-card__note {
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.6;
}
.package-dialog .package-card__head {
	padding-right: 2.75rem; /* room for the close button */
}
.package-dialog__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-top: 1rem !important; /* as above the card's button row */
	padding-top: 1rem;
	border-top: 1px solid var(--wp--custom--color--line);
	transition: border-color 0.25s ease;
}
/* The line above the add-to-cart button fades in once open (the card itself has none). */
.package-dialog:not(.is-open) .package-dialog__footer {
	border-top-color: transparent;
}
.package-dialog__add {
	flex: none;
	font-size: 0.8125rem;
	padding: 0.55rem 1.1rem;
	white-space: nowrap;
}
.package-dialog__more {
	flex: none;
	margin: 0 !important;
	pointer-events: none;
}
.package-dialog__more::after {
	content: none;
}
.package-dialog.is-open .package-dialog__more {
	visibility: hidden;
}
.package-dialog__add.is-busy {
	opacity: 0.6;
}

/* File block (download link, e.g. the PDF on Algemene voorwaarden): file name and a small download
   button side by side, wrapping neatly on narrow screens. */
.wp-block-file:not(.wp-element-button) {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 1rem;
}
.wp-block-file .wp-block-file__button {
	margin: 0 !important;
	padding: 0.55rem 1.1rem;
	font-size: 0.8125rem;
}

/* Jump link (Buttons block with class "jump-link", assets/js/jump-link.js), e.g. "Meer informatie"
   under the packages: hidden while its target (the contact form) is in view. It keeps its space, so
   the column doesn't shift. */
.wp-block-buttons.jump-link {
	margin-top: var(--wp--preset--spacing--30) !important;
	transition: opacity 0.25s ease, visibility 0s linear 0s;
}
.wp-block-buttons.jump-link.is-target-visible {
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}
@media (prefers-reduced-motion: reduce) {
	.wp-block-buttons.jump-link,
	.wp-block-buttons.jump-link.is-target-visible {
		transition: none;
	}
}

/* Short screens: hide the package descriptions so all cards fit while the column is sticky. */
@media (min-width: 782px) and (max-height: 760px) {
	.package-card .wp-block-post-excerpt {
		display: none;
	}
	.packages .wp-block-woocommerce-single-product + .wp-block-woocommerce-single-product {
		margin-top: 0.75rem;
	}
	.package-card {
		padding-block: 0.9rem 1rem;
	}
	.page-aside__intro {
		margin-bottom: 1rem !important;
	}
}

/*
 * Compact contact form (synced pattern "Contactformulier (compact)"): name and e-mail side by side,
 * a shorter message field and tighter spacing.
 */
.wp-block-jetpack-contact-form.is-compact {
	gap: var(--wp--preset--spacing--30) !important;
	row-gap: var(--wp--preset--spacing--30) !important;
}
.wp-block-jetpack-contact-form.is-compact :is(input[type="text"], input[type="email"]) {
	min-height: 3rem;
	padding-block: 0.6rem !important;
}
.wp-block-jetpack-contact-form.is-compact textarea {
	min-height: 7.5rem !important;
	height: 7.5rem;
}
.wp-block-jetpack-contact-form.is-compact label {
	margin-bottom: 0.25rem;
}
.wp-block-jetpack-contact-form.is-compact + .contact-privacy-note {
	margin-top: var(--wp--preset--spacing--30);
}

/*
 * Section headings in page text (e.g. Ademcoaching, Over mij): a little smaller than the
 * default H2, with clear space between sections. Home page sections keep their larger titles.
 */
.wp-block-post-content > h2,
.page-columns > .wp-block-column:not(.page-aside) > h2,
.page-closing > h2,
.collection-list > .collection-more-title {
	font-size: clamp(1.75rem, 2.6vw, 2.25rem);
	margin-block-end: 0.75rem;
}
.wp-block-post-content > h2:not(:first-child),
.page-columns > .wp-block-column:not(.page-aside) > h2:not(:first-child) {
	margin-block-start: var(--leva-section-space);
}

/* Contact forms (full and compact): a compact "Verstuur bericht" button that fits its text. */
.wp-block-jetpack-contact-form .wp-block-button {
	width: auto !important;
	flex-basis: auto !important;
}
.wp-block-jetpack-contact-form .wp-block-button button[type="submit"] {
	width: auto !important;
	min-height: 0 !important;
	padding: 0.7rem 1.4rem !important;
	font-size: var(--wp--preset--font-size--small) !important;
	line-height: 1.2 !important;
}

/*
 * Header layout.
 * Both navigation blocks show the same menu (so the footer keeps following it):
 * - desktop (≥ 1024px): the first four items on the left, the logo in the center, the remaining
 *   items plus account/cart on the right. The logo is larger at the top of the page and shrinks
 *   to its normal size once the page scrolls; the header bar keeps its height, so nothing moves.
 * - below 1024px: logo left, the full menu (or the hamburger) on the right, as before.
 */
.site-header__nav-left {
	display: none !important;
}
@media (min-width: 1024px) {
	.site-header__bar {
		display: grid !important;
		grid-template-columns: 1fr auto 1fr;
		align-items: center;
	}
	.site-header__nav-left {
		display: flex !important;
		justify-self: start;
	}
	.site-header__logo {
		justify-self: center;
	}
	.site-header__right {
		justify-self: end;
	}
	/* Left: the first four menu items (Leva U and the brands); right: everything after them. */
	.site-header__nav-left .wp-block-navigation__container > li:nth-child(n + 5),
	.site-header__nav-right .wp-block-navigation__container > li:nth-child(-n + 4) {
		display: none;
	}
	/* Larger centered logo at the top of the page, shrinking to its normal size on scroll. */
	.site-header__logo .leva-logo img {
		transform: scale(var(--leva-logo-top-scale, 1.75));
		transform-origin: 50% 0;
		transition: transform 0.3s ease;
	}
	.is-scrolled .site-header__logo .leva-logo img {
		transform: scale(1);
	}
}
@media (prefers-reduced-motion: reduce) {
	.site-header__logo .leva-logo img {
		transition: none;
	}
}

/* Sub page list (Query Loop of child pages, e.g. on Leva Vit): link cards with title + summary. */
.subpage-list {
	margin-top: var(--wp--preset--spacing--50) !important;
}
.subpage-list .wp-block-post-template {
	gap: var(--wp--preset--spacing--40);
}
.subpage-list .is-style-link-card > * {
	margin-block: 0;
}
.subpage-list .is-style-link-card > * + * {
	margin-block-start: 0.5rem;
}
/*
 * Collection cards on Leva Mind (sample-data/leva-mind.html): Group blocks with class "collection-card"
 * (photo, title with the category link, description, product line). First the three moods side by side
 * (group "collection-moods": tall photos), then "Ontdek ook" (class "collection-more-title") with Leva
 * Originals and Leva Selects (group "collection-more": two wider photos). The photo has the buttons'
 * leaf shape; the whole card is clickable (its title link covers the card). Phones: one card per row.
 */
.collection-list {
	margin-top: var(--wp--preset--spacing--60) !important;
}
.collection-moods,
.collection-more {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--60) clamp(2rem, 5vw, 4rem); /* up to 64px between the cards */
}
.collection-more {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}
/* In a row, all cards start at the top (no block gap above the second and third). */
.collection-moods > .collection-card,
.collection-more > .collection-card {
	margin-block: 0 !important;
}
.collection-list > .collection-more-title {
	margin-top: var(--wp--preset--spacing--70) !important;
	margin-bottom: var(--wp--preset--spacing--50) !important; /* size: as section headings in page text */
}
@media (max-width: 781px) {
	.collection-moods,
	.collection-more {
		grid-template-columns: minmax(0, 1fr);
		row-gap: var(--wp--preset--spacing--60); /* less than the space above "Ontdek ook" */
	}
}
.collection-card {
	position: relative;
}
.collection-card > * {
	margin-block: 0;
}
.collection-card > * + * {
	margin-block-start: 0.75rem;
}
/* The photo: a leaf; tall for the moods, wider for Originals and Selects; it lifts slightly on hover. */
.collection-card > .collection-card__image {
	margin-bottom: var(--wp--preset--spacing--40);
	border-radius: var(--wp--custom--radius-button);
	overflow: hidden;
	transition: transform 0.25s ease;
}
.collection-card__image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
}
.collection-more .collection-card__image img {
	aspect-ratio: 3 / 2;
}
@media (max-width: 781px) {
	.collection-moods .collection-card__image img {
		aspect-ratio: 3 / 2; /* phones: a wider photo, so a card fits the screen */
	}
}
.collection-card:hover > .collection-card__image,
.collection-card:focus-within > .collection-card__image {
	transform: translateY(-2px);
}
/* The product line: a List block shown as chips, each a small leaf (the buttons' shape, scaled down). */
.collection-card > .collection-card__products {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-block-start: 1.25rem;
	padding: 0;
	list-style: none;
}
.collection-card__products > li {
	margin: 0;
	padding: 0.3rem 0.8rem;
	border: 1px solid color-mix(in srgb, var(--wp--custom--color--primary) 30%, transparent);
	border-radius: 3px 12px 3px 12px;
	background: color-mix(in srgb, var(--wp--custom--color--primary) 8%, transparent);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.4;
	color: var(--wp--custom--color--primary);
}
.collection-card h3 a {
	text-decoration: none;
}
.collection-card h3 a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}
.collection-card h3 a:focus-visible {
	outline: none;
}
.collection-card:has(h3 a:focus-visible) {
	outline: 2px solid var(--wp--custom--color--primary);
	outline-offset: 3px;
}
.collection-card h3::after {
	content: "→";
	display: inline-block;
	margin-left: 0.4em;
	font-family: var(--wp--preset--font-family--questrial);
	font-style: normal;
	font-size: 0.6em;
	vertical-align: middle;
	transition: transform 0.2s ease;
}
.collection-card:hover h3::after {
	transform: translateX(3px);
}
/* Category description above the products (e.g. Alive): readable width, normal paragraph spacing. */
.is-layout-constrained > .wp-block-term-description.alignwide {
	max-width: calc(min(100%, var(--wp--style--global--wide-size)) * 0.62 - var(--wp--preset--spacing--60) * 0.62);
	margin-left: max(0px, calc((100% - var(--wp--style--global--wide-size)) / 2)) !important;
}
.wp-block-term-description.wp-block-term-description > * {
	margin-block: 0;
}
.wp-block-term-description.wp-block-term-description > * + * {
	margin-top: 1rem;
}
.wp-block-term-description h2 {
	font-size: clamp(1.75rem, 2.6vw, 2.25rem);
}
.subpage-list .wp-block-post-excerpt__excerpt {
	margin: 0;
}
.subpage-list .wp-block-post-excerpt__more-text {
	display: none;
}

/* Company details in a side column (Contact page): no separator line or extra space on top. */
.page-aside .company-details {
	margin-top: 0 !important;
	padding-top: 0;
	border-top: 0;
}
.page-aside .company-details::before {
	content: none;
}
.page-aside .company-details h2 {
	font-size: var(--wp--preset--font-size--x-large);
}

/*
 * Featured quote (Quote block → style "Uitgelicht", pattern "Citaat"): a card in the body text color
 * (Dark Forest) at very low opacity (3%) with the buttons' leaf shape, a 5px line in the primary color on
 * the left (following the leaf shape) and centered italic Cormorant in the primary color
 * (22–26px). At most about two-thirds of the width.
 */
.wp-block-quote.is-style-featured {
	max-width: 46rem;
	margin: 0;
	box-sizing: border-box;
	text-align: center;
	/* The line on the left: a layer in the primary color, covered by the card's own background shifted
	   5px to the right with the same leaf corners, so the line is 5px wide along the whole curve. */
	position: relative;
	isolation: isolate;
	background: transparent !important;
}
/* The colored layer underneath, only at the left (so no colored hairline shows along the other edges). */
.wp-block-quote.is-style-featured::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -2;
	border-radius: inherit;
	background: var(--wp--custom--color--primary);
	clip-path: inset(0 calc(100% - 32px) 0 0);
}
.wp-block-quote.is-style-featured::after {
	content: "";
	position: absolute;
	inset: 0 0 0 5px;
	z-index: -1;
	border-radius: inherit;
	/* Dark Forest at 3% on the page background, made opaque so the line doesn't show through. */
	background: color-mix(in srgb, var(--wp--preset--color--dark-forest) 3%, var(--leva-page-background, var(--wp--preset--color--ivory)));
}
.wp-block-quote.is-style-featured p {
	margin: 0;
}
/* The quote's citation (the block's "Add citation" field): a line in the body font below the quote,
   e.g. the writer's name or a closing sentence. */
.wp-block-quote.is-style-featured cite {
	display: block;
	margin-top: 0.4rem;
	font-family: var(--wp--preset--font-family--questrial);
	font-size: var(--wp--preset--font-size--medium);
	font-style: normal;
	line-height: 1.6;
	letter-spacing: normal;
	text-transform: none;
	color: var(--wp--preset--color--dark-forest); /* the body text color */
}
/* As the first thing on a page: some space before the content that follows. */
.quote-section {
	margin-top: 1rem !important; /* a little more room below the title */
	margin-bottom: var(--leva-section-space) !important; /* as between sections */
}
/* On wide pages, the quote below the title is exactly as wide as the text column underneath. */
@media (min-width: 782px) {
	.quote-section > .wp-block-quote.is-style-featured {
		max-width: calc(62% - var(--wp--preset--spacing--60) * 0.62);
	}
}

/*
 * Intro (inc/intro.php): first page view of a session. Hidden unless the <head> script adds
 * .is-intro to <html>. The logo is "written" (pen masks), then the logo moves
 * onto the header logo and the layer fades away (timeline in inc/intro.php).
 */
.leva-intro {
	display: none;
}
.is-intro .leva-intro {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	/* The page's own background (Ivory, the sky color on the home page) and its logo's color. */
	background-color: var(--leva-page-background, var(--wp--preset--color--ivory));
	color: var(--wp--preset--color--sage-green);
}
body.home .leva-intro,
body:has(.coming-soon) .leva-intro {
	color: var(--wp--preset--color--olive-green); /* the Olive Green logo of the home and coming soon pages */
}
.is-intro body {
	overflow: hidden;
}
/* While the intro plays, the header logo is hidden: the intro logo lands exactly on its spot and
   the two swap in the same frame when the intro ends, so there's never a double (darker) logo. */
.is-intro .site-header .leva-logo {
	visibility: hidden;
}
.leva-intro__svg {
	display: block;
	height: clamp(180px, 42vh, 380px);
	width: auto;
	aspect-ratio: 271.5 / 332;
}
/* Starting state: nothing drawn yet (pens and line use pathLength="1"). The gap is longer than the
   path (1 2, not 1 1): otherwise the next, zero-length dash starts exactly at the path's end, and its
   round cap shows as a dot there before anything is drawn. */
.leva-intro__svg .li-pen,
.leva-intro__svg .li-line {
	stroke-dasharray: 1 2;
	stroke-dashoffset: 1;
}

/*
 * Forgiving dropdowns (desktop): an invisible bridge covers the small gap between a menu item and
 * its dropdown, so the dropdown stays open while the mouse moves down into it; and closing waits a
 * moment (opening stays immediate), so a slightly diagonal or slow movement doesn't close it.
 */
@media (min-width: 600px) {
	/* The bridge hangs below the menu item itself (not the wider dropdown), so it never covers
	   the neighbouring menu items. */
	.wp-block-navigation .wp-block-navigation__container > .has-child::after {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		top: 100%;
		height: 0.75rem;
	}
}
.wp-block-navigation .has-child:not(.open-on-click) > .wp-block-navigation__submenu-container {
	/* Closed (and closing): 6px lower and transparent; closing waits 0.25s, then slides down and fades out. */
	translate: 0 6px;
	transition: opacity 0.15s ease-in 0.25s, translate 0.15s ease-in 0.25s, visibility 0s linear 0.4s;
}
/* WordPress collapses a closed dropdown to 0×0 instantly, which would defeat the closing delay;
   keep its size and hide it with visibility/opacity only (hidden elements can't be hovered). */
@media (min-width: 600px) {
	.wp-block-navigation .has-child:not(.open-on-click) > .wp-block-navigation__submenu-container {
		width: auto;
		height: auto;
		overflow: visible;
	}
}
/* Opening: immediately slide up into place and fade in (quick). Also when opened with the keyboard. */
.wp-block-navigation .has-child:not(.open-on-click):hover > .wp-block-navigation__submenu-container,
.wp-block-navigation .has-child:not(.open-on-click):focus-within > .wp-block-navigation__submenu-container,
.wp-block-navigation .has-child > .wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container {
	translate: none;
	transition: opacity 0.15s ease-out, translate 0.15s ease-out, visibility 0s;
}
/* In the mobile overlay the sub items are always shown: no motion there. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	translate: none !important;
	transition: none !important;
}
/* In the mobile overlay the sub items are always shown: no bridge needed there. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .has-child::after {
	content: none;
}
/* As soon as another menu item is hovered, every other dropdown closes immediately (no delay),
   so dropdowns never stack when moving quickly along the menu. */
.wp-block-navigation__container:has(> li:hover) > .has-child:not(:hover) > .wp-block-navigation__submenu-container {
	transition: none;
}

/* Dropdown chevrons: centered on the (uppercase) menu text. The icon's arrow sits low in its box,
   so it's nudged up; `translate` combines with the 180° rotation when a dropdown opens. */
.wp-block-navigation .wp-block-navigation__submenu-icon svg {
	translate: 0 -0.2em;
}

/*
 * Keyboard: the menu item is one focus stop (the chevron isn't focusable, see render-filters.php).
 * Its dropdown opens while the item or one of its links has keyboard focus, and the focus ring
 * goes around the whole item (text + chevron).
 */
@media (min-width: 600px) {
	.wp-block-navigation .wp-block-navigation__container > .has-child:focus-within > .wp-block-navigation__submenu-container {
		visibility: visible;
		opacity: 1;
		width: auto;
		height: auto;
		min-width: 200px;
		overflow: visible;
	}
}
.wp-block-navigation .wp-block-navigation__container > li > a:focus-visible {
	outline: none;
}
.wp-block-navigation .wp-block-navigation__container > li:has(> a:focus-visible) {
	outline: 2px solid var(--wp--custom--color--primary);
	outline-offset: 6px;
	border-radius: 2px;
}
/* Keyboard: moving focus to another menu item closes the other dropdowns immediately as well. */
.wp-block-navigation__container:has(> li:focus-within) > .has-child:not(:focus-within):not(:hover) > .wp-block-navigation__submenu-container {
	transition: none;
}
/* Focus ring for links inside a dropdown: primary color, inset, matching the menu items. */
.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible {
	outline: 2px solid var(--wp--custom--color--primary);
	outline-offset: -2px;
	border-radius: 2px;
}

/*
 * One focus ring everywhere: a 2px outline in the primary color (Olive Green, Terracotta Coral on Leva Vit) on anything that gets keyboard focus
 * (links, buttons, form fields, WooCommerce, the cart, the skip link, …). Overrides the browser's
 * blue and plugin-specific colors. Menu items and link cards keep their ring around the whole
 * item (set on the parent, see above), so their inner link is excluded here.
 */
:is(a, button, input, select, textarea, summary, [tabindex]):not(.wp-block-navigation__container > li > a):not(.is-style-link-card a):focus-visible {
	outline: 2px solid var(--wp--custom--color--primary) !important;
	outline-offset: 2px;
}
/* Form fields: the ring sits just outside the field's own border. */
:is(input, select, textarea):focus-visible {
	outline-offset: 1px !important;
}
/* WooCommerce buttons draw their own focus shadow; the shared outline replaces it. */
.wc-block-components-button:focus-visible,
.wp-element-button:focus-visible {
	box-shadow: none !important;
}

/*
 * Home page: the hero on the sky color, below it Ivory like the rest of the site (body.home; the background
 * itself is set at the top of this file).
 * - The navigation has the sky color too: the bar at the top, the floating card once scrolled, the
 *   dropdowns and the mobile menu. Once the page below the hero reaches the header (`is-header-past-hero`
 *   on <html>, assets/js/header.js) they turn Ivory, as on the other pages.
 * - The Olive Green logo in the header and footer (inc/render-filters.php swaps the file).
 * - Hero: the illustration as the background image of the "home-intro" Group (replaceable in the editor).
 *   Wide screens: it fills the right half at the hero's full height, the text sits on the left on the sky
 *   color. Phones and portrait screens: at full width along the bottom of the hero, below the text, with
 *   the brand cards on the dunes.
 */
body.home .site-header__bar::before {
	background-color: rgb(239 228 208 / 0.78);
	border-color: var(--leva-sky);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	body.home .site-header__bar::before {
		background-color: rgb(239 228 208 / 0.96);
	}
}
body.home .wp-block-navigation .wp-block-navigation__submenu-container {
	background-color: var(--leva-sky) !important;
	border-color: var(--leva-sky) !important;
}
body.home .wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--leva-sky) !important;
}
/* Past the hero (see above): the Ivory navigation of the other pages. */
body.home .site-header__bar::before {
	transition: opacity 0.25s ease, transform 0.25s ease, background-color 0.3s ease, border-color 0.3s ease;
}
.is-header-past-hero body.home .site-header__bar::before {
	background-color: rgb(244 241 225 / 0.72);
	border-color: rgb(220 212 193 / 0.7);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.is-header-past-hero body.home .site-header__bar::before {
		background-color: rgb(244 241 225 / 0.96);
	}
}
.is-header-past-hero body.home .wp-block-navigation .wp-block-navigation__submenu-container {
	background-color: var(--wp--preset--color--ivory) !important;
	border-color: var(--wp--custom--color--line) !important;
}
.is-header-past-hero body.home .wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--wp--preset--color--ivory) !important;
}

/* Hero (see above). The fade used on photos isn't needed: the text sits on the plain sky. */
body.home .home-intro::before {
	content: none;
}
body.home .home-intro {
	background-color: var(--leva-sky);
	background-repeat: no-repeat;
	/* Phones and portrait screens (the default): full width at the bottom (the illustration is 2:3, so
	   150vw tall); room below the text for the sky, the sun and the mountains. */
	background-size: 100% auto !important;
	background-position: 50% 100% !important;
	padding-bottom: calc(150vw * 0.8) !important; /* the sun and the birds below the brand rows */
}
@media (min-width: 782px) and (min-aspect-ratio: 1/1) {
	body.home .home-intro {
		padding-bottom: 0 !important;
		/* Half the width, and at least the hero's full height. */
		background-size: max(50%, calc(var(--leva-intro-height, 100svh) * 2 / 3)) auto !important;
		background-position: 100% 40% !important; /* the sun stays in view */
	}
	/* The text column ends well before the illustration (at least ~6rem of air in between). */
	body.home .home-intro__text {
		max-width: min(30rem, 34vw);
	}
}

/*
 * Scroll hint (assets/js/hero-motion.js): wide screens only, at the bottom of the hero, centered below the
 * text column. A small mouse outline with a dot gliding down; it fades away once the page is scrolled
 * (`is-scrolled`, assets/js/header.js) and scrolls to what follows when clicked.
 */
.home-intro__scroll {
	display: none;
}
@media (min-width: 782px) and (min-aspect-ratio: 1/1) {
	/* Room for it below the text. */
	body.home .home-intro > .home-intro__hero {
		padding-bottom: max(clamp(1rem, 4vh, 3rem), 4.5rem) !important;
	}
	.home-intro__scroll {
		position: absolute;
		bottom: clamp(1rem, 3vh, 1.75rem);
		left: calc(max(var(--wp--style--root--padding-left, 1.5rem), (100% - var(--wp--style--global--wide-size)) / 2) + min(30rem, 34vw) / 2);
		z-index: 1;
		display: block;
		padding: 0.5rem;
		border: 0;
		background: none;
		cursor: pointer;
		translate: -50% 0;
		color: var(--wp--custom--color--primary);
		transition: opacity 0.4s ease;
	}
	.is-scrolled .home-intro__scroll {
		opacity: 0;
		pointer-events: none;
	}
	.home-intro__scroll:focus-visible {
		outline: 2px solid var(--wp--custom--color--primary);
		outline-offset: 2px;
		border-radius: 6px;
	}
}
.home-intro__scroll-mouse {
	display: block;
	position: relative;
	width: 20px;
	height: 30px;
	border: 1.5px solid currentColor;
	border-radius: 10px;
	opacity: 0.75;
}
.home-intro__scroll-dot {
	position: absolute;
	top: 6px;
	left: 50%;
	width: 3px;
	height: 6px;
	margin-left: -1.5px;
	border-radius: 2px;
	background: currentColor;
	animation: leva-scroll-dot 2.2s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
@keyframes leva-scroll-dot {
	0% {
		opacity: 0;
		translate: 0 0;
	}
	20% {
		opacity: 1;
	}
	70% {
		opacity: 0;
		translate: 0 10px;
	}
	100% {
		opacity: 0;
		translate: 0 10px;
	}
}
@media (prefers-reduced-motion: reduce) {
	.home-intro__scroll-dot {
		animation: none;
	}
}

/*
 * Hero motion (inc/hero-motion.php, assets/js/hero-motion.js): the illustration in a frame of its own
 * (.home-intro__art) with exactly the image's size and place; the frame clips, so the zoom never spills
 * over the text and the image keeps its size on screen. Inside it, the image layer comes in with a soft
 * zoom and fade (once all its images have loaded, `.is-ready`, and after the logo intro, if that plays),
 * then "breathes" very slowly (3% over 20 seconds,
 * back and forth). With the theme's dunes illustration a bird glides through the sky now and then, and
 * the lavender on its own layer sways in the wind, bending from its roots (--leva-lav-pivot). The frame
 * scrolls a little slower than the page (--leva-hero-shift). Reduced motion: the image just shows.
 */
.leva-hero-motion body.home .home-intro {
	background-image: none !important;
	overflow: clip; /* the frame moves down a little when scrolling: it stays within the hero */
}
.home-intro__art {
	position: absolute;
	inset: 0;
	z-index: -1;
	overflow: clip;
	pointer-events: none;
	translate: 0 var(--leva-hero-shift, 0px);
}
.home-intro__layer {
	position: absolute;
	inset: 0;
	background-repeat: no-repeat;
	background-size: 100% auto;
	background-position: 50% 100%;
	transform-origin: 50% 100%;
	opacity: 0;
}
@media (min-width: 782px) and (min-aspect-ratio: 1/1) {
	/* The right part of the hero, as wide as the image (see the hero's background above). */
	.home-intro__art {
		left: auto;
		width: max(50%, calc(var(--leva-intro-height, 100svh) * 2 / 3));
	}
	.home-intro__layer {
		background-position: 50% 40%;
		transform-origin: 100% 30%;
	}
}
.leva-hero-motion:not(.is-intro) .is-ready > .home-intro__layer {
	animation:
		leva-hero-in 2.8s cubic-bezier(0.2, 0.7, 0.2, 1) forwards,
		leva-hero-breathe 20s ease-in-out 2.8s infinite alternate;
}
.leva-hero-motion:not(.is-intro) .is-ready > .home-intro__layer.is-lavender {
	animation:
		leva-hero-in 2.8s cubic-bezier(0.2, 0.7, 0.2, 1) forwards,
		leva-hero-breathe 20s ease-in-out 2.8s infinite alternate,
		leva-lavender-wind 7s ease-in-out infinite;
}
@keyframes leva-hero-in {
	from {
		opacity: 0;
		scale: 1.08;
	}
	to {
		opacity: 1;
		scale: 1;
	}
}
@keyframes leva-hero-breathe {
	from {
		opacity: 1;
		scale: 1;
	}
	to {
		opacity: 1;
		scale: 1.03;
	}
}
/* The wind: an uneven gust to the right and back. skewX bends the layer; the translateX (tan of the angle
   times the pivot distance) keeps the roots in place, so only the stems and flowers move. */
@keyframes leva-lavender-wind {
	0%,
	100% {
		transform: translateX(calc(var(--leva-lav-pivot, 0px) * 0.0035)) skewX(-0.2deg);
	}
	22% {
		transform: translateX(calc(var(--leva-lav-pivot, 0px) * 0.0227)) skewX(-1.3deg);
	}
	40% {
		transform: translateX(calc(var(--leva-lav-pivot, 0px) * 0.0087)) skewX(-0.5deg);
	}
	58% {
		transform: translateX(calc(var(--leva-lav-pivot, 0px) * 0.0175)) skewX(-1deg);
	}
	78% {
		transform: translateX(calc(var(--leva-lav-pivot, 0px) * -0.0035)) skewX(0.2deg);
	}
}
/* The hair: blows a little in the same gusts as the lavender, with a quicker flutter on top, turning
   around the top of the head (--leva-hair-origin) so the head stays put and the loose ends move. */
.home-intro__layer.is-hair {
	background: none;
}
.home-intro__hair {
	position: absolute;
	inset: 0;
	background-repeat: no-repeat;
	background-size: 100% auto;
	background-position: 50% 100%;
	transform-origin: var(--leva-hair-origin, 67% 53%);
}
@media (min-width: 782px) and (min-aspect-ratio: 1/1) {
	.home-intro__hair {
		background-position: 50% 40%;
	}
}
.leva-hero-motion:not(.is-intro) .home-intro__hair {
	animation: leva-hair-wind 7s ease-in-out infinite;
}
@keyframes leva-hair-wind {
	0%,
	100% {
		rotate: 0deg;
	}
	10% {
		rotate: -2.4deg;
	}
	16% {
		rotate: -0.9deg;
	}
	22% {
		rotate: -4.8deg;
	}
	30% {
		rotate: -2.5deg;
	}
	40% {
		rotate: -1.3deg;
	}
	50% {
		rotate: -3.2deg;
	}
	58% {
		rotate: -4.2deg;
	}
	66% {
		rotate: -1.6deg;
	}
	78% {
		rotate: 0.9deg;
	}
	88% {
		rotate: -0.7deg;
	}
}

/* The birds: a small flock of three, muted, in the visible sky of the image (above the mountains). It crosses slowly from
   the right to the left (48 seconds, rising a little), once every 80 seconds, out of sight in between; on
   load it is already on its way, so it shows as the image fades in. Its
   wings beat a few times, then it glides with them slightly raised; the body bobs a little with each beat. */
.home-intro__layer.is-sky {
	top: var(--leva-sky-top, 0px);
	bottom: auto;
	height: var(--leva-sky-height, 30%);
	background: none;
}
.home-intro__bird {
	position: absolute;
	left: 92%;
	top: 48%;
	width: clamp(16px, 1.5vw, 24px);
	opacity: 0;
	color: #7c6a72; /* a muted Dusty Mauve, like the distant mountains */
}
.home-intro__bird svg {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
	fill: currentColor;
}
.home-intro__bird-body,
.home-intro__wing {
	transform-box: view-box;
	transform-origin: 0 0; /* the shoulders */
}
.leva-hero-motion:not(.is-intro) .home-intro__bird {
	animation: leva-bird-glide 80s linear -2.4s infinite; /* already in view, fading in with the image */
}
/* Each bird has its own rhythm: 4, 3 or 5 wing beats per burst, and cycle lengths that never line up
   (4.8s, 6.3s, 5.5s), so their wing beats drift in and out of step. */
.leva-hero-motion:not(.is-intro) .home-intro__bird-body {
	animation: leva-bird-bob 4.8s ease-in-out var(--leva-wing-delay, 0s) infinite;
}
.leva-hero-motion:not(.is-intro) .home-intro__wing.is-left {
	animation: leva-bird-wing-left 4.8s ease-in-out var(--leva-wing-delay, 0s) infinite;
}
.leva-hero-motion:not(.is-intro) .home-intro__wing.is-right {
	animation: leva-bird-wing-right 4.8s ease-in-out var(--leva-wing-delay, 0s) infinite;
}
.leva-hero-motion:not(.is-intro) .home-intro__bird.is-2 .home-intro__bird-body {
	animation: leva-bird-bob-3 6.3s ease-in-out var(--leva-wing-delay) infinite;
}
.leva-hero-motion:not(.is-intro) .home-intro__bird.is-2 .home-intro__wing.is-left {
	animation: leva-bird-wing-left-3 6.3s ease-in-out var(--leva-wing-delay) infinite;
}
.leva-hero-motion:not(.is-intro) .home-intro__bird.is-2 .home-intro__wing.is-right {
	animation: leva-bird-wing-right-3 6.3s ease-in-out var(--leva-wing-delay) infinite;
}
.leva-hero-motion:not(.is-intro) .home-intro__bird.is-3 .home-intro__bird-body {
	animation: leva-bird-bob-5 5.5s ease-in-out var(--leva-wing-delay) infinite;
}
.leva-hero-motion:not(.is-intro) .home-intro__bird.is-3 .home-intro__wing.is-left {
	animation: leva-bird-wing-left-5 5.5s ease-in-out var(--leva-wing-delay) infinite;
}
.leva-hero-motion:not(.is-intro) .home-intro__bird.is-3 .home-intro__wing.is-right {
	animation: leva-bird-wing-right-5 5.5s ease-in-out var(--leva-wing-delay) infinite;
}
/* A loose flock of three: the leader, one a little behind and above, one further behind and below; each a
   slightly different size, with its own wing rhythm. The spacing changes slowly: each bird drifts a few
   pixels at its own pace (different durations, so the formation never quite repeats). */
.home-intro__bird.is-2 {
	width: clamp(13px, 1.25vw, 20px);
	--leva-wing-delay: -2.3s;
}
.home-intro__bird.is-3 {
	width: clamp(12px, 1.1vw, 18px);
	--leva-wing-delay: -0.9s;
}
.leva-hero-motion:not(.is-intro) .home-intro__bird.is-1 {
	animation: leva-bird-glide 80s linear -2.4s infinite, leva-bird-drift-1 9s ease-in-out infinite alternate;
}
.leva-hero-motion:not(.is-intro) .home-intro__bird.is-2 {
	animation: leva-bird-glide 80s linear -2.4s infinite, leva-bird-drift-2 13s ease-in-out -4s infinite alternate;
}
.leva-hero-motion:not(.is-intro) .home-intro__bird.is-3 {
	animation: leva-bird-glide 80s linear -2.4s infinite, leva-bird-drift-3 11s ease-in-out -7s infinite alternate;
}
@keyframes leva-bird-drift-1 {
	from {
		translate: 0 0;
	}
	to {
		translate: -4px 2px;
	}
}
@keyframes leva-bird-drift-2 {
	0% {
		translate: 30px -14px;
	}
	45% {
		translate: 36px -11px;
	}
	100% {
		translate: 26px -17px;
	}
}
@keyframes leva-bird-drift-3 {
	0% {
		translate: 52px 9px;
	}
	55% {
		translate: 45px 13px;
	}
	100% {
		translate: 58px 6px;
	}
}
@keyframes leva-bird-glide {
	0% {
		left: 92%;
		top: 48%;
		opacity: 0;
		scale: 0.85;
	}
	3% {
		opacity: 0.8;
	}
	30% {
		top: 36%;
	}
	57% {
		left: 6%;
		top: 40%;
		opacity: 0.8;
		scale: 1;
	}
	60%,
	100% {
		left: 3%;
		top: 39%;
		opacity: 0;
		scale: 1;
	}
}
/* Four wing beats (0.55s each), then a glide. Up = the wing tip rises (left wing: positive rotation). */
@keyframes leva-bird-wing-left {
	0%, 11.5%, 23%, 34.5% {
		rotate: 26deg;
	}
	5.75%, 17.25%, 28.75%, 40.25% {
		rotate: -24deg;
	}
	46%,
	100% {
		rotate: 6deg;
	}
}
@keyframes leva-bird-wing-right {
	0%, 11.5%, 23%, 34.5% {
		rotate: -26deg;
	}
	5.75%, 17.25%, 28.75%, 40.25% {
		rotate: 24deg;
	}
	46%,
	100% {
		rotate: -6deg;
	}
}
/* The body rises a little on each downstroke. */
@keyframes leva-bird-bob {
	0%, 11.5%, 23%, 34.5%, 46%, 100% {
		translate: 0 0.5px;
	}
	5.75%, 17.25%, 28.75%, 40.25% {
		translate: 0 -0.6px;
	}
}
@keyframes leva-bird-wing-left-3 {
	0%, 8.74%, 17.48% {
		rotate: 28deg;
	}
	4.37%, 13.11%, 21.85% {
		rotate: -22deg;
	}
	26.22%,
	100% {
		rotate: 4deg;
	}
}
@keyframes leva-bird-wing-right-3 {
	0%, 8.74%, 17.48% {
		rotate: -28deg;
	}
	4.37%, 13.11%, 21.85% {
		rotate: 22deg;
	}
	26.22%,
	100% {
		rotate: -4deg;
	}
}
@keyframes leva-bird-bob-3 {
	0%, 8.74%, 17.48%, 26.22%, 100% {
		translate: 0 0.5px;
	}
	4.37%, 13.11%, 21.85% {
		translate: 0 -0.6px;
	}
}
@keyframes leva-bird-wing-left-5 {
	0%, 9.2%, 18.4%, 27.6%, 36.8% {
		rotate: 24deg;
	}
	4.6%, 13.8%, 23%, 32.2%, 41.4% {
		rotate: -26deg;
	}
	46%,
	100% {
		rotate: 8deg;
	}
}
@keyframes leva-bird-wing-right-5 {
	0%, 9.2%, 18.4%, 27.6%, 36.8% {
		rotate: -24deg;
	}
	4.6%, 13.8%, 23%, 32.2%, 41.4% {
		rotate: 26deg;
	}
	46%,
	100% {
		rotate: -8deg;
	}
}
@keyframes leva-bird-bob-5 {
	0%, 9.2%, 18.4%, 27.6%, 36.8%, 46%, 100% {
		translate: 0 0.5px;
	}
	4.6%, 13.8%, 23%, 32.2%, 41.4% {
		translate: 0 -0.6px;
	}
}
@media (prefers-reduced-motion: reduce) {
	.leva-hero-motion .home-intro__layer,
	.leva-hero-motion:not(.is-intro) .home-intro__layer,
	.leva-hero-motion:not(.is-intro) .home-intro__layer.is-lavender {
		animation: none;
		opacity: 1;
	}
	.home-intro__bird {
		display: none;
	}
	.home-intro__hair {
		animation: none;
	}
}

/*
 * Page transitions (cross-document View Transitions; Chrome, Edge, Safari 18.2+; other browsers
 * simply switch pages instantly). The page cross-fades, so the background color changes smoothly
 * (Sage Green on the home page, Ivory elsewhere). The header and its logo are separate parts: they
 * stay in place and only change color, and the logo also changes size (it is larger at the top of
 * a page). Off for visitors who prefer reduced motion.
 */
@media (prefers-reduced-motion: no-preference) {
	@view-transition {
		navigation: auto;
	}
}
/* Named only during a page transition (.is-page-transition, set in inc/page-transitions.php): a named
   element isolates its contents, which would switch off the header card's backdrop blur. */
.is-page-transition .wp-site-blocks > header.wp-block-template-part:has(> .site-header) {
	view-transition-name: site-header;
}
.is-page-transition .site-header .leva-logo {
	view-transition-name: site-logo;
}
::view-transition-group(*) {
	animation-duration: 0.4s;
	animation-timing-function: cubic-bezier(.4, 0, .2, 1);
}

/*
 * Coming soon page (pattern leva-u/coming-soon, template templates/coming-soon.html; shown by WooCommerce
 * while Sitezichtbaarheid is "Binnenkort beschikbaar"): the illustration "Dromerige wandeling door de duinen"
 * (the background image of the page's main Group, replaceable in the editor) on its own sky color.
 * - Phones and portrait screens: the illustration at full width along the bottom; the text sits in its sky.
 * - Wide screens: the illustration fills the right half at full height, the text is centered in the left half
 *   on the sky color, so the sky runs on across the page.
 */
body:has(.coming-soon) {
	--leva-page-background: var(--leva-sky);
	background-color: var(--leva-page-background);
}
.coming-soon {
	box-sizing: border-box;
	min-height: 100vh;
	min-height: 100svh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding-block: var(--wp--preset--spacing--50) !important;
	padding-inline: var(--wp--style--root--padding-left, 1rem) var(--wp--style--root--padding-right, 1rem);
	background-color: var(--leva-page-background);
	background-repeat: no-repeat;
	text-align: center;
}
/* Phones and portrait screens (the default): the illustration at full width at the bottom (150vw tall);
   the text ends above its sun (at 20% of its height), so the page scrolls down onto the mountains and the
   walker. */
.coming-soon {
	justify-content: flex-start;
	padding-bottom: calc(150vw * 0.8 + var(--wp--preset--spacing--30)) !important;
	background-size: 100% auto !important;
	background-position: 50% 100% !important;
}
/* Wide screens: the illustration fills the right half. */
@media (min-width: 900px) and (min-aspect-ratio: 1/1) {
	.coming-soon {
		justify-content: center;
		padding-bottom: var(--wp--preset--spacing--50) !important;
		padding-right: 50% !important;
		/* Half the width, and at least the full height (the illustration is 2:3). */
		background-size: max(50%, 66.667vh) auto !important;
		background-position: 100% 40% !important; /* the sun stays in view */
	}
	/* The © line as a footer at the bottom of the left half; the rest stays centered above it. */
	.coming-soon > :first-child {
		margin-top: auto !important;
	}
	.coming-soon > p.footer-legal {
		margin-top: auto !important;
		padding-top: var(--wp--preset--spacing--40) !important;
	}
}
.coming-soon > * {
	width: 100%;
	margin-block: 0 !important;
}
.coming-soon .leva-logo {
	display: flex;
	justify-content: center;
	margin-bottom: var(--wp--preset--spacing--50) !important;
}
.coming-soon .leva-logo img {
	height: clamp(100px, 15vh, 150px) !important; /* !important: the editor sets height: auto inline */
	width: auto !important;
}
/* Also on the home page address, where the Sage Green home rules would make these Ivory. */
.coming-soon h1 {
	color: var(--wp--preset--color--olive-green) !important;
}
.coming-soon .footer-contact a::before {
	background-color: var(--wp--preset--color--olive-green) !important;
}
.coming-soon .footer-contact a:is(:hover, :focus-visible) {
	color: var(--wp--preset--color--olive-green) !important;
}
.coming-soon h1 + p {
	margin-top: 0.25rem !important;
}
@media (max-width: 600px) {
	.coming-soon h1 + p {
		font-size: 1rem !important; /* phones: smaller than Large */
	}
}
.coming-soon__status {
	margin-top: var(--wp--preset--spacing--40) !important;
}
.coming-soon__newsletter {
	margin-top: 0.75rem !important;
}
.coming-soon__newsletter > p {
	margin: 0 0 0.75rem;
}
.coming-soon .wp-block-jetpack-subscriptions__form-elements {
	text-align: left;
}
.coming-soon #subscribe-email input {
	border-color: #D9CBB0 !important; /* the Ivory field on the light sky */
}
.coming-soon #subscribe-email input:focus {
	outline-color: var(--wp--custom--color--primary);
}
.coming-soon .newsletter__preview-note {
	display: none;
	color: var(--wp--preset--color--dark-forest);
	margin-top: 0.75rem;
	font-size: var(--wp--preset--font-size--small);
}
.coming-soon .newsletter__preview.is-submitted .newsletter__preview-note {
	display: block;
}
/* Contact details: the footer row, without its full-width lines. */
.coming-soon .footer-contact {
	justify-content: center;
	margin-top: var(--wp--preset--spacing--50) !important;
}
.coming-soon .footer-contact::before,
.coming-soon .footer-contact::after {
	content: none;
}
.coming-soon :is(.footer-contact, .footer-legal) {
	padding-block: 0 !important;
}
.coming-soon .footer-legal {
	margin-top: var(--wp--preset--spacing--30) !important;
	opacity: 0.85;
}
@media (max-width: 600px) {
	.coming-soon .footer-contact {
		grid-template-columns: repeat(3, auto);
		gap: 1rem;
	}
	.coming-soon .footer-contact > * {
		width: auto;
	}
	.coming-soon .footer-contact a {
		font-size: 0.75rem;
	}
}