/* Project 22, "Rariteitenkabinet".
 * Kleuren en letters komen uit theme.json (var(--wp--preset--...)); hier alleen wat theme.json niet kan.
 * Opbouw: basis, kop, knoppen, hero met museummuur, lijstjes, collectie en bordjes, zoekblok, voet,
 * itempagina met viewer, fotoweergave (lightbox), bekijk ook, beweging.
 */

:root {
	--p22-papier: var(--wp--preset--color--papier);
	--p22-licht: var(--wp--preset--color--licht);
	--p22-inkt: var(--wp--preset--color--inkt);
	--p22-diep: var(--wp--preset--color--inkt-diep);
	--p22-grijs: var(--wp--preset--color--grijs);
	--p22-muur: var(--wp--preset--color--muur);
	--p22-teal: var(--wp--preset--color--teal);
	--p22-link: var(--wp--preset--color--teal-donker);
	--p22-terra: var(--wp--preset--color--terracotta);
	--p22-terra-donker: var(--wp--preset--color--terracotta-donker);
	--p22-serif: var(--wp--preset--font-family--fraunces);
	--p22-sans: var(--wp--preset--font-family--lato);
	--p22-rand: clamp(1rem, 4vw, 2.5rem);
	--p22-breed: 1240px;
	--p22-zacht: cubic-bezier(0.2, 0.7, 0.2, 1);
	/* Draadje en spijker boven een lijstje aan de muur */
	--p22-draad: 2.25rem;
}

/* ---------- Basis ---------- */
*,
*::before,
*::after {
	box-sizing: border-box;
}
html {
	scroll-padding-top: 1.5rem;
}
body {
	background: var(--p22-papier);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}
img {
	max-width: 100%;
	height: auto;
}
::selection {
	background: var(--p22-teal);
	color: var(--p22-licht);
}
:where(a, button, [tabindex]):focus-visible {
	outline: 3px solid var(--p22-link);
	outline-offset: 3px;
	border-radius: 2px;
}
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
.p22-overslaan {
	position: absolute;
	left: var(--p22-rand);
	top: -4rem;
	z-index: 20;
	padding: 0.75rem 1rem;
	background: var(--p22-diep);
	color: var(--p22-licht);
	font-weight: 700;
	text-decoration: none;
}
.p22-overslaan:focus {
	top: 1rem;
}
.p22-main {
	margin-block-start: 0;
}
.p22-main > .wp-block-post-content > * {
	margin-block: 0;
}

/* ---------- Kop ---------- */
.p22-kop__balk {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	width: min(var(--p22-breed), 100% - 2 * var(--p22-rand));
	margin-inline: auto;
	padding-block: clamp(0.9rem, 2vw, 1.4rem);
}
.p22-kop__logo {
	display: block;
	width: clamp(8.5rem, 17vw, 12rem);
	line-height: 0;
}
.p22-kop__logo img {
	display: block;
	width: 100%;
	height: auto;
}
.p22-menu ul {
	display: flex;
	gap: clamp(1rem, 3vw, 2.25rem);
	margin: 0;
	padding: 0;
	list-style: none;
}
.p22-menu a {
	position: relative;
	display: inline-block;
	padding-block: 0.4rem;
	color: var(--p22-diep);
	font-weight: 700;
	font-size: 1rem;
	text-decoration: none;
}
.p22-menu a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0.1rem;
	height: 2px;
	background: var(--p22-terra);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.3s var(--p22-zacht);
}
.p22-menu a:hover::after,
.p22-menu a:focus-visible::after {
	transform: scaleX(1);
}

/* ---------- Knoppen ---------- */
.p22-knop,
.wp-element-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: 3.25rem;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s var(--p22-zacht);
}
.p22-knop {
	padding: 1rem 1.5rem;
	border-radius: 2px;
	background: var(--p22-terra-donker);
	color: var(--p22-licht);
	font-weight: 700;
	font-size: 1.0625rem;
	line-height: 1.2;
}
.p22-knop:hover {
	background: var(--p22-diep);
	color: var(--p22-licht);
}
.p22-knop:active,
.wp-element-button:active {
	transform: translateY(1px);
}
.p22-knop--lijn {
	background: transparent;
	color: var(--p22-diep);
	box-shadow: inset 0 0 0 2px currentColor;
}
.p22-knop--lijn:hover {
	background: var(--p22-diep);
	color: var(--p22-licht);
}
.p22-knop--licht .wp-element-button {
	background: var(--p22-licht);
	color: var(--p22-muur);
}
.p22-knop--licht .wp-element-button:hover {
	background: var(--p22-papier);
	color: var(--p22-diep);
}

/* ---------- Hero: tekst links, museummuur rechts ---------- */
.p22-hero {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
}
.p22-hero__tekst {
	align-self: center;
	padding: clamp(2rem, 6vw, 4rem) var(--p22-rand) clamp(2.5rem, 7vw, 4.5rem);
}
.p22-hero__tekst > * {
	max-width: 34rem;
}
.p22-hero__tekst > * + * {
	margin-block-start: 1.1rem;
}
.p22-hero__kop {
	margin: 0;
	font-weight: 480;
	font-size: clamp(2.5rem, 1.5rem + 2.9vw, 4.1rem);
	line-height: 1.02;
	letter-spacing: -0.02em;
	text-wrap: balance;
}
.p22-hero__tekst > .p22-hero__kop + * {
	margin-block-start: clamp(1.25rem, 2.5vw, 1.75rem);
}
.p22-hero__intro {
	font-size: var(--wp--preset--font-size--groot);
	line-height: 1.55;
	color: var(--p22-diep);
}
.p22-hero .wp-block-buttons {
	margin-block-start: 2rem;
}
@media (min-width: 900px) {
	.p22-hero {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
		min-height: min(86vh, 54rem);
	}
	.p22-hero__tekst {
		padding-inline-start: max(var(--p22-rand), (100vw - var(--p22-breed)) / 2);
		padding-inline-end: clamp(2rem, 4vw, 4rem);
	}
}

/* De muur: diep teal met licht van een schilderijlampje bovenin. */
.p22-muur {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
	grid-template-areas:
		"a b"
		"a c";
	column-gap: clamp(1.25rem, 3.5vw, 3rem);
	row-gap: calc(var(--p22-draad) + clamp(1.5rem, 3vw, 2.5rem));
	align-items: center;
	padding: calc(var(--p22-draad) + clamp(2.5rem, 6vw, 4.5rem)) clamp(1.25rem, 4vw, 3.5rem) clamp(2.5rem, 6vw, 4.5rem);
	background:
		radial-gradient(ellipse 70% 45% at 50% 0%, rgb(255 255 255 / 0.13), transparent 70%),
		radial-gradient(ellipse 120% 80% at 50% 110%, rgb(0 0 0 / 0.22), transparent 70%),
		var(--p22-muur);
	overflow: hidden;
}
.p22-muur__lijst--1 {
	grid-area: a;
	--scheef: -1.2deg;
}
.p22-muur__lijst--2 {
	grid-area: b;
	align-self: end;
	width: 100%;
	--scheef: 1.4deg;
}
.p22-muur__lijst--3 {
	grid-area: c;
	align-self: start;
	justify-self: end;
	width: 88%;
	--scheef: -0.8deg;
}
.p22-muur .p22-lijst {
	rotate: var(--scheef, 0deg);
	transform-origin: 50% calc(-1 * var(--p22-draad));
	transition: rotate 0.5s var(--p22-zacht), box-shadow 0.5s var(--p22-zacht);
}
.p22-muur .p22-lijst:hover,
.p22-muur .p22-lijst:focus-visible {
	rotate: 0deg;
}
/* Draadje: twee schuine lijntjes van de hoeken naar de spijker. */
.p22-muur .p22-lijst::before {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 100%;
	width: 56%;
	height: var(--p22-draad);
	translate: -50% 0;
	margin-bottom: 0.35rem;
	background:
		/* Links loopt het draadje van de linkerhoek omhoog naar de spijker, rechts omgekeerd: een omgekeerde V. */
		linear-gradient(to top left, transparent calc(50% - 0.75px), rgb(248 246 241 / 0.55) 50%, transparent calc(50% + 0.75px)) left / 50% 100% no-repeat,
		linear-gradient(to top right, transparent calc(50% - 0.75px), rgb(248 246 241 / 0.55) 50%, transparent calc(50% + 0.75px)) right / 50% 100% no-repeat;
	pointer-events: none;
}
/* Spijker */
.p22-muur .p22-lijst::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: calc(100% + var(--p22-draad));
	width: 0.55rem;
	height: 0.55rem;
	translate: -50% 50%;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 35%, #e6ddc9, #8a7d66 60%, #4b4336);
	box-shadow: 0 1px 2px rgb(0 0 0 / 0.5);
	margin-bottom: 0.35rem;
	pointer-events: none;
}
@media (min-width: 900px) {
	.p22-muur {
		align-content: center;
	}
}

/* ---------- Lijstjes ---------- */
.p22-lijst {
	--lijst-dikte: 0.8rem;
	--passe: clamp(0.6rem, 5%, 1.4rem);
	position: relative;
	display: block;
	aspect-ratio: var(--verhouding, 1);
	padding: var(--passe);
	background: var(--p22-licht);
	border: var(--lijst-dikte) solid #3e2a1d;
	box-shadow:
		inset 0 0 0 1px rgb(0 0 0 / 0.08),
		0 1.2rem 1.6rem -1rem rgb(28 20 12 / 0.55),
		0 0.25rem 0.5rem -0.2rem rgb(28 20 12 / 0.35);
	/* Rand en passe-partout vallen binnen de breedte, anders steken lijstjes met een vaste breedte uit. */
	box-sizing: border-box;
}
.p22-lijst--hout {
	border-image: linear-gradient(135deg, #7a5539, #3e2a1d 45%, #5c3f2a 70%, #2f2016) 1;
}
.p22-lijst--goud {
	--lijst-dikte: 0.65rem;
	border-image: linear-gradient(135deg, #e3c689, #9c7a3c 40%, #d4b06c 65%, #86672f) 1;
}
.p22-lijst--zwart {
	--lijst-dikte: 0.35rem;
	--passe: clamp(0.9rem, 8%, 2rem);
	border-color: #232220;
}
/* Inzet van het passe-partout: lichte schaduw rond de foto. */
.p22-lijst__foto {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	box-shadow: 0 0 0 1px rgb(0 0 0 / 0.1), inset 0 0 0.5rem rgb(0 0 0 / 0.2);
}
.p22-lijst__foto--tweede {
	position: absolute;
	inset: var(--passe);
	width: calc(100% - 2 * var(--passe));
	height: calc(100% - 2 * var(--passe));
	opacity: 0;
	transition: opacity 0.45s ease;
}
.p22-lijst--leeg {
	display: grid;
	place-items: center;
	text-align: center;
}
.p22-lijst__leeg {
	font-family: var(--p22-serif);
	font-style: italic;
	color: var(--p22-grijs);
}

/* Stempel "Verkocht" */
.p22-stempel {
	position: absolute;
	left: 50%;
	top: 50%;
	translate: -50% -50%;
	rotate: -14deg;
	padding: 0.35em 0.8em 0.3em;
	border: 3px double currentColor;
	border-radius: 4px;
	background: rgb(248 246 241 / 0.82);
	color: var(--p22-terra-donker);
	font-family: var(--p22-serif);
	font-weight: 750;
	font-size: clamp(1.1rem, 3.2vw, 1.6rem);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	line-height: 1;
	white-space: nowrap;
	mix-blend-mode: multiply;
	pointer-events: none;
}
.is-verkocht .p22-lijst__foto {
	filter: grayscale(0.55) contrast(0.95);
}

/* ---------- Secties ---------- */
.p22-sectie {
	padding-block: clamp(4rem, 9vw, 7.5rem);
}
.p22-sectie__kop {
	width: min(var(--p22-breed), 100% - 2 * var(--p22-rand));
	margin-inline: auto;
}
.p22-sectie__kop h2 {
	margin: 0;
}
.p22-sectie__kop p {
	max-width: 38rem;
	margin-block: 0.9rem 0;
	color: var(--p22-inkt);
}

/* ---------- Collectie: lijstjes hangen aan een bovenlijn, met een bordje eronder ---------- */
.p22-collectie {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 17.5rem), 1fr));
	column-gap: clamp(2rem, 4vw, 3.5rem);
	row-gap: clamp(3rem, 6vw, 5rem);
	align-items: start;
	width: min(var(--p22-breed), 100% - 2 * var(--p22-rand));
	margin: clamp(2.5rem, 5vw, 4rem) auto 0;
	padding: 0;
	list-style: none;
}
.p22-kaart {
	margin: 0;
}
.p22-kaart__link {
	display: block;
	color: inherit;
	text-decoration: none;
}
.p22-kaart__link:focus-visible {
	outline-offset: 6px;
}
.p22-kaart .p22-lijst {
	transform-origin: 50% 0;
	transition: rotate 0.45s var(--p22-zacht), translate 0.45s var(--p22-zacht), box-shadow 0.45s var(--p22-zacht);
}
@media (hover: hover) {
	.p22-kaart__link:hover .p22-lijst {
		rotate: -1.2deg;
		translate: 0 -0.3rem;
		box-shadow:
			inset 0 0 0 1px rgb(0 0 0 / 0.08),
			0 1.8rem 2.2rem -1.2rem rgb(28 20 12 / 0.6),
			0 0.4rem 0.8rem -0.3rem rgb(28 20 12 / 0.35);
	}
	.p22-kaart__link:hover .p22-lijst__foto--tweede.is-geladen {
		opacity: 1;
	}
	.p22-kaart__link:hover .p22-bordje__titel {
		text-decoration: underline;
		text-decoration-thickness: 1px;
		text-underline-offset: 0.2em;
	}
}

/* Museumbordje */
.p22-bordje {
	margin-block-start: 1.4rem;
	max-width: 24rem;
}
.p22-bordje > * {
	margin: 0;
}
.p22-bordje__nr {
	color: var(--p22-grijs);
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	font-variant-numeric: tabular-nums;
}
.p22-bordje__titel {
	margin-block-start: 0.2rem;
	font-family: var(--p22-serif);
	font-style: italic;
	font-weight: 460;
	font-size: 1.5rem;
	line-height: 1.2;
	color: var(--p22-diep);
}
.p22-bordje__soort {
	margin-block-start: 0.15rem;
	color: var(--p22-grijs);
	font-size: 0.9375rem;
}
.p22-prijs {
	margin: 0.6rem 0 0;
	color: var(--p22-diep);
	font-weight: 700;
	font-size: 1.125rem;
	font-variant-numeric: tabular-nums;
}
.p22-prijs__oud {
	color: var(--p22-grijs);
	font-weight: 400;
	text-decoration-thickness: 1px;
}
.p22-prijs__nu {
	color: var(--p22-terra-donker);
	text-decoration: none;
}
.p22-prijs__label {
	margin-inline-start: 0.35rem;
	color: var(--p22-terra-donker);
	font-family: var(--p22-serif);
	font-style: italic;
	font-weight: 500;
}
.p22-prijs--verkocht .p22-prijs__label {
	margin-inline-start: 0.2rem;
}
.p22-leeg {
	width: min(var(--p22-breed), 100% - 2 * var(--p22-rand));
	margin: 2rem auto 0;
	font-family: var(--p22-serif);
	font-style: italic;
	font-size: 1.25rem;
}

/* ---------- Zoekblok op de muur ---------- */
.p22-zoek {
	padding: clamp(4rem, 9vw, 7rem) var(--p22-rand);
	background:
		radial-gradient(ellipse 60% 70% at 15% 0%, rgb(255 255 255 / 0.1), transparent 70%),
		var(--p22-muur);
	color: var(--p22-licht);
}
.p22-zoek__binnen {
	width: min(var(--p22-breed), 100%);
	margin-inline: auto;
}
.p22-zoek__binnen > * {
	max-width: 38rem;
}
.p22-zoek h2 {
	margin: 0 0 1rem;
	color: var(--p22-licht);
}
.p22-zoek p {
	font-size: var(--wp--preset--font-size--groot);
}
.p22-zoek .wp-block-buttons {
	margin-block-start: 1.75rem;
}
.p22-zoek a:not(.wp-element-button) {
	color: var(--p22-licht);
}
.p22-zoek__adres {
	margin-block-start: 1rem;
	font-size: 1rem !important;
	opacity: 0.9;
}

/* ---------- Voet ---------- */
.p22-voet {
	margin-block-start: 0;
	padding: clamp(3rem, 6vw, 4.5rem) var(--p22-rand) 2rem;
	border-top: 1px solid rgb(77 77 77 / 0.2);
}
.p22-voet__binnen {
	display: grid;
	gap: 2rem;
	align-items: center;
	width: min(var(--p22-breed), 100%);
	margin-inline: auto;
}
.p22-voet__logo {
	width: clamp(11rem, 22vw, 15rem);
	height: auto;
}
.p22-voet__tekst p {
	max-width: 30rem;
	margin: 0 0 0.6rem;
}
.p22-footer__klein {
	width: min(var(--p22-breed), 100%);
	margin: 2.5rem auto 0;
	color: var(--p22-grijs);
	font-size: 0.875rem;
}
@media (min-width: 720px) {
	.p22-voet__binnen {
		grid-template-columns: auto 1fr;
		gap: clamp(2rem, 6vw, 5rem);
	}
}

/* ---------- Itempagina ---------- */
.p22-main--item {
	padding: clamp(1rem, 3vw, 2rem) 0 clamp(4rem, 8vw, 6rem);
}
.p22-item {
	width: min(var(--p22-breed), 100% - 2 * var(--p22-rand));
	margin-inline: auto;
}
.p22-terug {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin-block-end: clamp(1.5rem, 3vw, 2.5rem);
	color: var(--p22-diep);
	font-weight: 700;
	font-size: 0.9375rem;
	text-decoration: none;
}
.p22-terug::before {
	content: "";
	width: 0.5rem;
	height: 0.5rem;
	border-left: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	rotate: 45deg;
}
.p22-terug:hover {
	text-decoration: underline;
}
.p22-item__raster {
	display: grid;
	gap: clamp(2.5rem, 5vw, 4.5rem);
	align-items: start;
}
@media (min-width: 960px) {
	.p22-item__raster {
		grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
	}
	.p22-item__info {
		position: sticky;
		top: 2rem;
	}
}
.p22-item__info > * {
	margin: 0;
}
.p22-item__titel {
	margin-block-start: 0.25rem;
	font-style: italic;
	font-weight: 450;
	font-size: clamp(2.25rem, 1.6rem + 2.4vw, 3.5rem);
	line-height: 1.05;
	text-wrap: balance;
}
.p22-item__soort {
	margin-block-start: 0.5rem;
	color: var(--p22-grijs);
}
.p22-item__info .p22-prijs {
	margin-block-start: 1.25rem;
	font-size: 1.5rem;
}
.p22-item__tekst {
	margin-block-start: 1.5rem;
	max-width: 36rem;
}
.p22-item__tekst p {
	margin: 0 0 1rem;
}
.p22-details {
	display: grid;
	gap: 0.5rem;
	margin: 1.5rem 0 0;
	padding-block: 1rem;
	border-block: 1px solid rgb(77 77 77 / 0.2);
}
.p22-details div {
	display: grid;
	grid-template-columns: 7.5rem 1fr;
	gap: 1rem;
}
.p22-details dt {
	color: var(--p22-grijs);
}
.p22-details dd {
	margin: 0;
	color: var(--p22-diep);
	font-variant-numeric: tabular-nums;
}
.p22-item__actie {
	margin-block-start: 2rem;
}
.p22-item__actie .p22-knop {
	width: 100%;
}
@media (min-width: 600px) {
	.p22-item__actie .p22-knop {
		width: auto;
		min-width: 16rem;
	}
}
.p22-item__hulp {
	margin: 1rem 0 0;
	max-width: 32rem;
	color: var(--p22-inkt);
	font-size: 0.9375rem;
	line-height: 1.55;
}
.p22-kopieer {
	margin-inline-start: 0.25rem;
	padding: 0.2rem 0.55rem;
	border: 1px solid rgb(77 77 77 / 0.35);
	border-radius: 2px;
	background: transparent;
	color: var(--p22-diep);
	font: inherit;
	font-size: 0.875rem;
	cursor: pointer;
}
.p22-kopieer:hover {
	background: var(--p22-licht);
}

/* Viewer: foto's naast elkaar, vegen of met de miniaturen kiezen. */
.p22-viewer__lijst {
	--passe: clamp(0.75rem, 4%, 1.75rem);
	padding: var(--passe);
}
.p22-viewer__spoor {
	display: flex;
	width: 100%;
	height: 100%;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}
.p22-viewer__spoor::-webkit-scrollbar {
	display: none;
}
.p22-viewer__foto {
	flex: 0 0 100%;
	display: block;
	scroll-snap-align: center;
	cursor: zoom-in;
}
.p22-viewer__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.p22-viewer__duimen {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin: 1.75rem 0 0;
	padding: 0;
	list-style: none;
}
.p22-viewer__duim {
	display: block;
	width: 4rem;
	height: 4rem;
	padding: 0;
	border: 0;
	background: var(--p22-licht);
	cursor: pointer;
	opacity: 0.7;
	transition: opacity 0.2s ease, box-shadow 0.2s ease;
}
.p22-viewer__duim img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.p22-viewer__duim:hover {
	opacity: 1;
}
.p22-viewer__duim[aria-current="true"] {
	opacity: 1;
	box-shadow: 0 0 0 2px var(--p22-papier), 0 0 0 4px var(--p22-link);
}

/* Fotoweergave op volledig scherm */
.p22-lightbox {
	width: 100vw;
	max-width: none;
	height: 100dvh;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: rgb(24 22 20 / 0.96);
	color: var(--p22-licht);
	overflow: hidden;
}
.p22-lightbox::backdrop {
	background: rgb(24 22 20 / 0.6);
}
.p22-lightbox__spoor {
	display: flex;
	height: 100%;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}
.p22-lightbox__spoor::-webkit-scrollbar {
	display: none;
}
.p22-lightbox__foto {
	flex: 0 0 100%;
	display: grid;
	place-items: center;
	margin: 0;
	padding: 4.5rem 1rem 4rem;
	scroll-snap-align: center;
}
.p22-lightbox__foto img {
	/* Vaste maxima: een percentage werkt niet in een grid-vak met automatische hoogte. */
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: calc(100dvh - 8.5rem);
	object-fit: contain;
}
.p22-lightbox__knop {
	position: absolute;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 3rem;
	height: 3rem;
	border: 0;
	border-radius: 50%;
	background: rgb(248 246 241 / 0.92);
	color: var(--p22-diep);
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
}
.p22-lightbox__knop:hover {
	background: var(--p22-licht);
}
.p22-lightbox__knop:focus-visible {
	outline-color: var(--p22-licht);
}
.p22-lightbox__sluit {
	top: 1rem;
	right: 1rem;
}
.p22-lightbox__vorige,
.p22-lightbox__volgende {
	top: 50%;
	translate: 0 -50%;
}
.p22-lightbox__vorige {
	left: 1rem;
}
.p22-lightbox__volgende {
	right: 1rem;
}
.p22-lightbox__teller {
	position: absolute;
	left: 50%;
	bottom: 1.25rem;
	translate: -50% 0;
	margin: 0;
	font-variant-numeric: tabular-nums;
	font-weight: 700;
}
@media (max-width: 599px) {
	.p22-lightbox__vorige,
	.p22-lightbox__volgende {
		top: auto;
		bottom: 0.6rem;
		translate: none;
	}
}

/* Bekijk ook */
.p22-ook {
	width: min(var(--p22-breed), 100% - 2 * var(--p22-rand));
	margin: clamp(4.5rem, 9vw, 7rem) auto 0;
	padding-block-start: clamp(3rem, 6vw, 4rem);
	border-top: 1px solid rgb(77 77 77 / 0.2);
}
.p22-ook__kop {
	margin: 0;
}
.p22-ook .p22-collectie {
	width: 100%;
	margin-block-start: clamp(2.5rem, 5vw, 3.5rem);
}

/* Gewone pagina's */
.p22-main--pagina {
	padding-block: clamp(2.5rem, 6vw, 5rem);
}

/* ---------- Beweging (alleen als iemand geen "minder beweging" heeft ingesteld) ---------- */
@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}

	/* Van het overzicht naar een item: de foto vliegt mee (Chrome, Edge, Safari). */
	@view-transition {
		navigation: auto;
	}
	::view-transition-group(*) {
		animation-duration: 0.45s;
		animation-timing-function: cubic-bezier(0.2, 0.7, 0.2, 1);
	}

	/* De lijstjes worden bij het laden een voor een opgehangen en slingeren even na. */
	.p22-muur .p22-lijst {
		animation: p22-ophangen 1.1s var(--p22-zacht) both;
		animation-delay: calc(0.15s + var(--n, 0) * 0.14s);
	}
	.p22-muur__lijst--2 {
		--n: 1;
	}
	.p22-muur__lijst--3 {
		--n: 2;
	}

	/* Binnenschuiven van kaarten bij het scrollen (site.js zet p22-anim op html en is-zichtbaar per kaart). */
	.p22-anim .p22-reveal {
		opacity: 0;
		translate: 0 1.75rem;
		transition: opacity 0.7s var(--p22-zacht), translate 0.7s var(--p22-zacht);
		transition-delay: calc(var(--i, 0) * 70ms);
	}
	.p22-anim .p22-reveal.is-zichtbaar {
		opacity: 1;
		translate: 0 0;
	}

	/* Een beetje diepte: bij het scrollen schuiven de lijstjes elk in hun eigen tempo omhoog. */
	@supports (animation-timeline: scroll()) {
		.p22-muur .p22-lijst {
			animation: p22-ophangen 1.1s var(--p22-zacht) both, p22-zweven linear both;
			animation-delay: calc(0.15s + var(--n, 0) * 0.14s), 0s;
			animation-timeline: auto, scroll(root);
			animation-range: normal, 0 100vh;
		}
	}
}

@keyframes p22-ophangen {
	0% {
		opacity: 0;
		transform: translateY(-1.5rem) rotate(-5deg);
	}
	45% {
		opacity: 1;
		transform: translateY(0) rotate(3deg);
	}
	70% {
		transform: rotate(-1.5deg);
	}
	88% {
		transform: rotate(0.6deg);
	}
	100% {
		opacity: 1;
		transform: none;
	}
}
@keyframes p22-zweven {
	to {
		translate: 0 calc(-1.5rem - var(--n, 0) * 1.25rem);
	}
}