/* Thema naamkado.nl. Kleuren en maten staan in theme.json; hier staat wat theme.json niet kan. */

:root {
	/* Grijs voor bijzaken (onderschriften, "incl. btw"), uit het ontwerpvoorstel; contrast 7:1 op wit. */
	--naamkado-grijs: #5C5852;
	--naamkado-rand: 16px;
}

@media (min-width: 900px) {
	:root {
		--naamkado-rand: 32px;
	}
}

body {
	-webkit-text-size-adjust: 100%;
}

.wp-block-post-content > p,
.wp-block-post-content > ul,
.wp-block-post-content > ol,
.wp-block-term-description p,
.naamkado-below p {
	max-width: 70ch;
}

a {
	text-underline-offset: 3px;
}

:where(a, button, input, select, textarea, summary):focus-visible {
	outline: 3px solid var(--wp--preset--color--tekst);
	outline-offset: 2px;
}

/* Knoppen: minstens 48 pixels hoog, als pil. Alleen de hoofdactie is groen, met witte tekst (4,6:1). */
.wp-element-button,
.wp-block-button__link,
.single_add_to_cart_button,
.wc-block-components-button,
.wp-block-search__button {
	min-height: 48px;
}

.wp-block-button__link,
.single_add_to_cart_button {
	align-items: center;
	display: inline-flex;
	justify-content: center;
	min-height: 52px;
}

.wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent;
	border: 0;
	box-shadow: inset 0 0 0 1.5px var(--wp--preset--color--tekst);
	color: var(--wp--preset--color--tekst);
}

.wp-block-button__link:hover,
.single_add_to_cart_button:hover {
	background-color: #006E31;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: var(--wp--preset--color--vlak);
}

@media (max-width: 781px) {
	form.cart .single_add_to_cart_button,
	.wc-block-cart__submit-button,
	.wc-block-components-checkout-place-order-button {
		width: 100%;
	}
}

/* Blokstijl "Tekstlink": een knopblok dat eruitziet als een gewone link, voor telefoon, WhatsApp en e-mail.
   Het blijft een los aan te tikken vlak van 48 pixels; links in lopende tekst houden hun gewone hoogte. */
.wp-block-button.is-style-tekstlink .wp-block-button__link {
	align-items: center;
	background: none;
	border: 0;
	border-radius: 0;
	color: inherit;
	display: inline-flex;
	font-weight: 400;
	min-height: 48px;
	padding: 0;
	text-decoration: underline;
}

.price,
.wc-block-components-product-price {
	color: var(--wp--preset--color--tekst);
	font-weight: 800;
}

.woocommerce-price-suffix,
.wc-block-components-product-price__suffix {
	color: var(--naamkado-grijs);
	font-size: 0.8125rem;
	font-weight: 400;
}

.naamkado-service {
	background: var(--wp--preset--color--vlak);
	padding: 12px 16px;
}

/* Header. Mobiel: logo, winkelwagen en menuknop op één regel, het zoekveld eronder over de volle breedte.
   Vanaf 1100 px: logo, menu, zoeken en winkelwagen op één regel. Uitklappers delen een name, dus er is er één tegelijk open. */
/* De balk boven de header met de drie punten van de eigenaar (2026-10-27). Zwart, zodat hij loskomt van het oranje.
   alignfull geeft hem de volle breedte binnen de constrained header. Onder 600 px valt de levertijd weg,
   die staat daar al bij het product; anders wordt de balk drie regels hoog. */
.naamkado-topbar {
	background: var(--wp--preset--color--tekst);
	color: var(--wp--preset--color--achtergrond);
	display: flex;
	flex-wrap: wrap;
	font-size: 0.8125rem;
	gap: 2px 28px;
	justify-content: center;
	list-style: none;
	margin-block: 0;
	padding: 7px 16px;
	text-align: center;
}

.naamkado-topbar li {
	margin: 0;
}

@media (max-width: 599px) {
	.naamkado-topbar {
		font-size: 0.75rem;
	}

	.naamkado-topbar li:last-child {
		display: none;
	}
}

.naamkado-header {
	/* Oranje zoals op de oude site; zwarte tekst haalt daarop ruim 10:1. */
	background: var(--wp--preset--color--oranje);
	border-bottom: 1px solid var(--wp--preset--color--tekst);
	position: relative;
	z-index: 20;
}

.naamkado-header__bar {
	align-items: center;
	display: grid;
	gap: 12px 8px;
	grid-template-columns: auto 1fr auto auto;
	padding-block: 12px;
}

.naamkado-header__bar > * {
	margin: 0;
}

.naamkado-logo {
	grid-column: 1;
}

.naamkado-logo img {
	display: block;
	height: auto;
	width: 112px;
}

.naamkado-header__nav {
	display: none;
}

.naamkado-header .wp-block-woocommerce-mini-cart {
	grid-column: 3;
	grid-row: 1;
}

.naamkado-menu {
	grid-column: 4;
	grid-row: 1;
}

.naamkado-header .naamkado-search {
	grid-column: 1 / -1;
}

/* Zoeken als pil met een zwarte knop. */
.naamkado-search .wp-block-search__inside-wrapper {
	background: var(--wp--preset--color--achtergrond);
	border: 1.5px solid var(--wp--preset--color--tekst);
	border-radius: 999px;
	height: 48px;
	overflow: hidden;
	padding: 0;
}

.naamkado-search .wp-block-search__inside-wrapper:focus-within {
	outline: 3px solid var(--wp--preset--color--tekst);
	outline-offset: 2px;
}

.naamkado-search .wp-block-search__input {
	background: transparent;
	border: 0;
	font: inherit;
	min-width: 0;
	padding: 0 18px;
}

.naamkado-search .wp-block-search__input:focus {
	outline: none;
}

.naamkado-search .wp-block-search__button {
	background: var(--wp--preset--color--tekst);
	border: 0;
	border-radius: 0;
	color: var(--wp--preset--color--achtergrond);
	font-size: 1rem;
	font-weight: 600;
	margin: 0;
	padding: 0 20px;
}

/* Winkelwagen: icoon met het aantal in een zwart bolletje, een vlak van 48 bij 48. */
.naamkado-header .wc-block-mini-cart__button {
	align-items: center;
	border-radius: 8px;
	display: inline-flex;
	justify-content: center;
	min-height: 48px;
	min-width: 48px;
	padding: 0 10px;
}

.naamkado-header .wc-block-mini-cart__button:hover,
.naamkado-menu > summary:hover,
.naamkado-header__nav summary:hover,
.naamkado-header__link a:hover {
	background: var(--wp--preset--color--vlak);
}

/* Het script van de winkelwagen zet de kleuren inline; vandaar !important. */
.naamkado-header .wc-block-mini-cart__badge {
	background-color: var(--wp--preset--color--tekst) !important;
	border: 0;
	border-radius: 10px;
	color: var(--wp--preset--color--achtergrond) !important;
	font-size: 0.75rem;
	font-weight: 600;
	height: 20px;
	margin-left: 6px;
	min-width: 20px;
	position: static;
	transform: none;
}

.naamkado-header .wc-block-mini-cart__quantity-badge {
	align-items: center;
	display: inline-flex;
}

/* De menuknop toont alleen het icoon; de tekst "Menu" blijft de naam voor schermlezers. */
.naamkado-menu > summary {
	align-items: center;
	border-radius: 8px;
	cursor: pointer;
	display: flex;
	font-size: 0;
	justify-content: center;
	list-style: none;
	min-height: 48px;
	min-width: 48px;
}

.naamkado-menu > summary::-webkit-details-marker,
.naamkado-header__nav summary::-webkit-details-marker {
	display: none;
}

.naamkado-menu > summary::before {
	background: currentColor;
	content: "";
	height: 24px;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M4 7h16M4 12h16M4 17h16'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M4 7h16M4 12h16M4 17h16'/%3E%3C/svg%3E") center / contain no-repeat;
	width: 24px;
}

.naamkado-menu[open] > summary::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");
}

/* Het open menu ligt over de pagina, over de volle breedte onder de header. */
.naamkado-menu__panel {
	background: var(--wp--preset--color--achtergrond);
	border-bottom: 1px solid var(--wp--preset--color--lijn);
	left: 0;
	margin: 0;
	max-height: calc(100vh - 140px);
	overflow-y: auto;
	padding: 8px var(--naamkado-rand) 16px;
	position: absolute;
	right: 0;
	top: 100%;
}

/* Soort cadeau en Gelegenheid staan dicht als het menu opent; één groep tegelijk open (zelfde name). */
.naamkado-menu__group {
	border-bottom: 1px solid var(--wp--preset--color--lijn);
	margin: 0;
}

.naamkado-menu__group > summary {
	align-items: center;
	cursor: pointer;
	display: flex;
	font-weight: 600;
	justify-content: space-between;
	list-style: none;
	min-height: 52px;
}

.naamkado-menu__group > summary::-webkit-details-marker {
	display: none;
}

.naamkado-menu__group > summary::after {
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	content: "";
	height: 9px;
	margin-right: 6px;
	transform: rotate(45deg);
	transition: transform 0.15s;
	width: 9px;
}

.naamkado-menu__group[open] > summary::after {
	transform: rotate(-135deg);
}

.naamkado-menu__group .naamkado-category-links {
	padding: 0 0 8px 12px;
}

.naamkado-category-links {
	list-style: none;
	margin: 0;
	padding: 0;
}

.naamkado-category-links a,
.naamkado-menu__service a {
	align-items: center;
	display: inline-flex;
	min-height: 48px;
}

.naamkado-menu__service a + a {
	margin-left: 16px;
}

/* Vanaf 1100 px past het menu met Blog en Contact naast een zoekveld van 300 px; daaronder is het zoekveld
   te smal en blijft de mobiele header staan, met het menu achter de knop. */
@media (min-width: 1100px) {
	.naamkado-header__bar {
		gap: 12px 20px;
		grid-template-columns: auto auto 1fr auto;
	}

	.naamkado-header__nav {
		align-items: center;
		display: flex;
		gap: 4px;
	}

	.naamkado-header__nav > * {
		margin: 0;
	}

	.naamkado-header .naamkado-search {
		grid-column: auto;
		justify-self: center;
		max-width: 440px;
		min-width: 0;
		width: 100%;
	}

	.naamkado-header .wp-block-woocommerce-mini-cart {
		grid-column: auto;
		grid-row: auto;
	}

	.naamkado-menu {
		display: none;
	}

	.naamkado-header__drop {
		position: relative;
	}

	.naamkado-header__nav summary,
	.naamkado-header__link a {
		align-items: center;
		border-radius: 8px;
		cursor: pointer;
		display: inline-flex;
		font-weight: 600;
		list-style: none;
		min-height: 48px;
		padding: 0 12px;
		text-decoration: none;
		white-space: nowrap;
	}

	.naamkado-header__drop[open] > summary {
		background: var(--wp--preset--color--achtergrond);
	}

	.naamkado-header__drop > :not(summary) {
		background: var(--wp--preset--color--achtergrond);
		border: 1px solid var(--wp--preset--color--lijn);
		border-radius: 14px;
		left: 0;
		min-width: 240px;
		padding: 8px 20px;
		position: absolute;
		top: calc(100% + 8px);
	}

	.naamkado-header__drop--wide > :not(summary) {
		column-gap: 32px;
		columns: 2;
		min-width: 440px;
	}
}

/* Footer: vier kolommen op desktop (Contact, Klantenservice, Cadeaus, Verzenden en betalen), een kleine regel eronder.
   Onder 782 px twee kolommen naast elkaar. Staat er geen betaalmethode aan, dan valt de kop Betalen met de logo's weg
   en blijft Verzenden staan. Links zijn 32 px hoog: genoeg om aan te tikken (WCAG 2.5.8 vraagt 24) en veel lager dan 48. */
.naamkado-footer {
	border-top: 1px solid var(--wp--preset--color--lijn);
	font-size: 0.9375rem;
	margin-top: 0;
	padding-block: 32px 20px;
}

.naamkado-footer h2 {
	font-size: 1rem !important;
	font-weight: 700;
	letter-spacing: 0;
	margin: 0 0 4px;
}

.naamkado-footer p {
	margin: 0 0 8px;
}

.naamkado-footer__columns {
	gap: 28px;
	margin-bottom: 0;
}

.naamkado-footer__betalen {
	margin-top: 16px;
}

.naamkado-footer__betalen:not(:has(.naamkado-payment-logos)) {
	display: none;
}

.naamkado-footer .wp-block-buttons {
	gap: 0;
	margin-block: 0 4px;
}

.naamkado-footer .wp-block-button.is-style-tekstlink .wp-block-button__link {
	align-items: center;
	display: inline-flex;
	min-height: 32px;
}

.naamkado-footer__all a {
	align-items: center;
	display: inline-flex;
	min-height: 32px;
}

.naamkado-footer__links {
	list-style: none;
	margin: 0;
	padding: 0;
}

.naamkado-footer__links a {
	align-items: center;
	display: inline-flex;
	min-height: 32px;
}

.naamkado-footer .naamkado-category-links a {
	align-items: center;
	display: inline-flex;
	min-height: 32px;
}

.naamkado-footer .naamkado-category-links li {
	break-inside: avoid;
}

.naamkado-footer__company {
	border-top: 1px solid var(--wp--preset--color--lijn);
	color: var(--naamkado-grijs);
	font-size: 0.8125rem;
	gap: 4px 16px;
	margin-top: 16px;
	padding-top: 12px;
}

.naamkado-footer__company p {
	margin: 0;
}

.naamkado-footer__reviews {
	margin-top: 4px;
}

.naamkado-payment-logos {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 16px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.naamkado-payment-logos img {
	height: 24px;
	width: auto;
}

/* Dubbele klasse: "body .is-layout-flex" uit de globale stijlen wint anders van één klasse. */
@media (max-width: 781px) {
	.wp-block-columns.naamkado-footer__columns {
		display: grid;
		gap: 24px 16px;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Op brede schermen staan de soorten in twee smalle kolommen; dat scheelt de helft van de hoogte. */
@media (min-width: 1024px) {
	.naamkado-footer .naamkado-category-links {
		column-gap: 16px;
		columns: 2;
	}
}

/* Productraster: twee kolommen op mobiel, vier vanaf 700 px, vierkante foto's met ronde hoeken.
   Voor winkel, categorie, zoekresultaten en de homepage. */
.naamkado-catalog .wc-block-product-template {
	gap: 24px 12px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.naamkado-catalog .wc-block-product {
	margin: 0;
	text-align: left;
}

.naamkado-catalog .wc-block-components-product-image {
	margin: 0;
}

.naamkado-catalog .wc-block-components-product-image img,
.naamkado-cross-sells img {
	aspect-ratio: 1;
	background: var(--wp--preset--color--vlak);
	border-radius: 14px;
	height: auto;
	object-fit: cover;
	width: 100%;
}

.naamkado-catalog .wp-block-post-title {
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1.3;
	margin-block: 10px 4px;
}

.naamkado-catalog .wp-block-post-title a,
.naamkado-cross-sells a {
	text-decoration: none;
}

.naamkado-catalog .wc-block-product:hover .wp-block-post-title a,
.naamkado-cross-sells li:hover .naamkado-cross-sells__name {
	text-decoration: underline;
}

.naamkado-catalog .wc-block-components-product-price {
	font-size: 1rem;
	margin: 0;
	text-align: left;
}

@media (min-width: 700px) {
	.naamkado-catalog .wc-block-product-template {
		gap: 32px 20px;
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* Homepage: hetzelfde raster als gewone HTML (naamkado/product-list), de rest onder "Toon alle". */
.naamkado-product-list {
	display: grid;
	gap: 24px 12px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

.naamkado-card__link {
	color: inherit;
	display: block;
	text-decoration: none;
}

.naamkado-card img {
	aspect-ratio: 1;
	background: var(--wp--preset--color--vlak);
	border-radius: 14px;
	display: block;
	height: auto;
	object-fit: cover;
	width: 100%;
}

.naamkado-card__name {
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1.3;
	margin-block: 10px 4px;
}

.naamkado-card__link:hover .naamkado-card__name {
	text-decoration: underline;
}

.naamkado-card__price {
	margin: 0;
}

.naamkado-product-list__more {
	margin-top: 24px;
}

.naamkado-product-list__more > summary {
	border: 1.5px solid currentColor;
	border-radius: 999px;
	cursor: pointer;
	display: inline-flex;
	font-weight: 600;
	list-style: none;
	min-height: 48px;
	align-items: center;
	padding: 0 26px;
}

.naamkado-product-list__more > summary::-webkit-details-marker {
	display: none;
}

.naamkado-product-list__more[open] > summary {
	display: none;
}

@media (min-width: 700px) {
	.naamkado-product-list {
		gap: 32px 20px;
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* Winkel, categorie en zoekresultaten: dezelfde kopmaat als de productpagina, sorteren als pil. */
.wp-block-query-title {
	margin-block: 8px 12px;
}

.wp-block-term-description {
	color: var(--naamkado-grijs);
	margin-block: 0 8px;
}

.wc-block-catalog-sorting,
.woocommerce-ordering {
	margin-block: 8px 24px;
}

.woocommerce-ordering label {
	font-weight: 600;
	margin-right: 8px;
}

.woocommerce-ordering select.orderby {
	appearance: none;
	background: var(--wp--preset--color--achtergrond) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A1A1A' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 14px center / 18px no-repeat;
	border: 1.5px solid var(--wp--preset--color--lijn);
	border-radius: 999px;
	color: var(--wp--preset--color--tekst);
	font: inherit;
	min-height: 48px;
	padding: 0 44px 0 18px;
}

.wp-block-query-pagination {
	margin-top: 40px;
}

/* Homepage. Elk deel is hoogstens 1200 px breed met de rand van de pagina erbinnen; belofte en het blok over
   de makers lopen over de volle breedte. */
.naamkado-home .wp-block-post-content > * {
	box-sizing: border-box;
	margin-block: 0;
	margin-inline: auto;
	max-width: calc(1200px + 2 * var(--naamkado-rand));
	padding-inline: var(--naamkado-rand);
}

.naamkado-home .wp-block-post-content > .naamkado-promise-row,
.naamkado-home .wp-block-post-content > .naamkado-about {
	max-width: none;
}

.naamkado-promise-row > *,
.naamkado-about > * {
	margin-inline: auto;
	max-width: 1200px;
}

.naamkado-hero {
	display: grid;
	gap: 28px;
	padding-block: 28px 40px;
}

.naamkado-hero__text > * {
	margin-block: 0;
}

.naamkado-hero h1 {
	font-size: clamp(2.125rem, 7.5vw, 3.75rem);
	max-width: 13ch;
}

.naamkado-hero__sub {
	color: var(--naamkado-grijs);
	margin-top: 14px !important;
	max-width: 44ch;
}

.naamkado-hero .naamkado-name-preview {
	margin-top: 24px;
}

/* Bestsellers in de hero (naamkado/product-picks): twee naast elkaar, ook op desktop. */
.naamkado-hero .naamkado-picks {
	gap: 16px 12px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin-top: 24px;
}

/* Rechts in de hero: de bijl met de knoppen eronder. */
.naamkado-hero__aside > * {
	margin-block: 0;
}

.naamkado-hero__buttons {
	gap: 10px;
	justify-content: center;
	margin-top: 20px !important;
}

/* Foto en onderschrift in één rastercel: het onderschrift is niet zelf gepositioneerd, zodat de link
   eronder (::after) de hele figure bedekt en een klik op de foto naar het product gaat. */
.naamkado-hero-product {
	display: grid;
	grid-template: 1fr / 1fr;
	margin: 0;
	position: relative;
}

.naamkado-hero-product > * {
	grid-area: 1 / 1;
}

.naamkado-hero-product img {
	aspect-ratio: 4 / 3;
	border-radius: 18px;
	display: block;
	height: auto;
	object-fit: cover;
	width: 100%;
}

.naamkado-hero-product figcaption {
	align-self: end;
	background: rgba(255, 255, 255, 0.94);
	border-radius: 12px;
	display: flex;
	font-size: 0.9375rem;
	gap: 10px;
	justify-content: space-between;
	margin: 12px;
	padding: 10px 14px;
	z-index: 1;
}

.naamkado-hero-product figcaption a {
	font-weight: 600;
	text-decoration: none;
}

/* De hele foto is de link naar het product. */
.naamkado-hero-product figcaption a::after {
	content: "";
	inset: 0;
	position: absolute;
}

.naamkado-hero-product:hover figcaption a {
	text-decoration: underline;
}

.naamkado-hero-product__price {
	font-weight: 800;
	white-space: nowrap;
}

.naamkado-hero-product__price .woocommerce-price-suffix {
	display: none;
}

@media (min-width: 900px) {
	/* De tekstgroep valt weg uit het raster, zodat de bestsellers en de bijl in één rij staan:
	   de bovenkant van de foto lijnt uit met de eerste kaarten, de knoppen met de onderkant. */
	.naamkado-hero {
		column-gap: 56px;
		grid-template-columns: 1.15fr 0.85fr;
		padding-block: 56px 64px;
		row-gap: 0;
	}

	.naamkado-hero__text {
		display: contents;
	}

	.naamkado-hero__text > * {
		grid-column: 1;
	}

	.naamkado-hero .naamkado-picks {
		grid-row: 3;
	}

	.naamkado-hero__aside {
		display: flex;
		flex-direction: column;
		grid-column: 2;
		grid-row: 3;
		margin-top: 24px !important;
	}

	.naamkado-hero__aside .naamkado-hero-product {
		flex: 1 1 0;
		min-height: 320px;
	}

	.naamkado-hero__aside .naamkado-hero-product img {
		aspect-ratio: auto;
		height: 100%;
		inset: 0;
		position: absolute;
	}
}

.naamkado-promise-row {
	border-block: 1px solid var(--wp--preset--color--lijn);
}

.naamkado-promise {
	font-size: 0.9375rem;
	padding-block: 14px;
	text-align: center;
}

.naamkado-section {
	padding-block: 44px 0;
}

.naamkado-section + .naamkado-section {
	padding-top: 44px;
}

.naamkado-section > * {
	margin-block: 0;
}

.naamkado-section h2,
.naamkado-about h2 {
	font-size: clamp(1.5rem, 4vw, 2rem);
	margin-bottom: 20px;
}

.naamkado-section__head {
	align-items: baseline;
	display: flex;
	gap: 16px;
	justify-content: space-between;
	margin-bottom: 20px;
}

.naamkado-section__head h2 {
	margin: 0;
}

.naamkado-all-link {
	align-items: center;
	display: inline-flex;
	font-weight: 600;
	min-height: 48px;
	white-space: nowrap;
}

/* Soorten met foto: twee per rij op mobiel, vijf op desktop. */
.naamkado-category-tiles {
	display: grid;
	gap: 20px 12px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

.naamkado-category-tiles a {
	display: block;
	text-decoration: none;
}

.naamkado-category-tiles img {
	aspect-ratio: 1;
	background: var(--wp--preset--color--vlak);
	border-radius: 14px;
	display: block;
	height: auto;
	object-fit: cover;
	width: 100%;
}

.naamkado-category-tiles span {
	display: block;
	font-weight: 600;
	margin-top: 8px;
}

.naamkado-category-tiles a:hover span {
	text-decoration: underline;
}

@media (min-width: 700px) {
	.naamkado-category-tiles {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}
}

/* Gelegenheden als pillen. */
.naamkado-pills .naamkado-category-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.naamkado-pills .naamkado-category-links a {
	background: var(--wp--preset--color--achtergrond);
	border: 1.5px solid var(--wp--preset--color--lijn);
	border-radius: 999px;
	font-weight: 600;
	padding: 0 18px;
	text-decoration: none;
}

.naamkado-pills .naamkado-category-links a:hover {
	border-color: var(--wp--preset--color--tekst);
}

.naamkado-home .wp-block-post-content > .naamkado-section:last-of-type {
	padding-bottom: 48px;
}

/* Over de makers, op het vlak. Zonder foto (V37) staat de tekst alleen. */
.naamkado-about {
	margin-top: 48px !important;
	padding-block: 48px;
}

.naamkado-about .wp-block-media-text {
	gap: 28px;
}

.naamkado-about .wp-block-media-text.naamkado-no-media {
	display: block;
}

.naamkado-about .wp-block-media-text__content {
	padding: 0;
}

.naamkado-about .wp-block-media-text__content > * {
	margin-block: 0 16px;
}

.naamkado-about p {
	max-width: 58ch;
}

.naamkado-about .wp-block-media-text__media img {
	aspect-ratio: 4 / 3;
	border-radius: 18px;
	object-fit: cover;
}

/* Productpagina. Mobiel onder elkaar; vanaf 900 px de foto's links en de koopkolom rechts, die blijft staan
   tijdens het scrollen zolang de foto's ernaast staan. */
.woocommerce-breadcrumb,
.wc-block-breadcrumbs {
	color: var(--naamkado-grijs);
	font-size: 0.875rem;
	padding-block: 14px;
}

.wc-block-breadcrumbs a,
.woocommerce-breadcrumb a {
	color: var(--naamkado-grijs);
}

.naamkado-product {
	display: grid;
	gap: 28px;
	padding-bottom: 40px;
}

.naamkado-product > *,
.naamkado-product__buy > * {
	margin-block: 0;
}

.naamkado-product__buy h1 {
	font-size: clamp(1.75rem, 4.4vw, 2.5rem);
}

.naamkado-product__buy .wc-block-components-product-price,
.naamkado-product__buy .wp-block-woocommerce-product-price {
	font-size: 1.625rem !important;
	margin-top: 10px;
}

.naamkado-product__buy .woocommerce-price-suffix {
	font-size: 0.875rem;
}

.naamkado-product__short {
	color: var(--naamkado-grijs);
	margin-top: 10px !important;
}

.naamkado-product__short p {
	margin: 0;
}

.naamkado-product__buy .naamkado-name-preview {
	margin-top: 22px;
}

/* Aantal en knop naast elkaar; regels uit het formulier zelf over de volle breedte. Het extra .cart wint
   van het grid dat het blok Add to cart form zelf inline zet (zelfde specificiteit, later geladen). */
.naamkado-product__buy form.cart.cart {
	align-items: stretch;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 16px;
}

.naamkado-product__buy form.cart > :not(.quantity, .single_add_to_cart_button) {
	flex-basis: 100%;
	margin: 0;
}

.naamkado-product__buy form.cart .quantity {
	flex: 0 0 96px;
	margin: 0;
}

.naamkado-product__buy form.cart .qty {
	border: 1.5px solid var(--wp--preset--color--lijn);
	border-radius: 999px;
	box-sizing: border-box;
	font: 600 1.0625rem var(--wp--preset--font-family--figtree);
	height: 52px;
	text-align: center;
	width: 100%;
}

.naamkado-product__buy form.cart .single_add_to_cart_button {
	flex: 1;
	margin: 0;
	width: auto;
}

.naamkado-facts {
	border-top: 1px solid var(--wp--preset--color--lijn);
	list-style: none;
	margin: 18px 0 0;
	padding: 0;
}

.naamkado-facts li {
	border-bottom: 1px solid var(--wp--preset--color--lijn);
	display: flex;
	font-size: 0.9375rem;
	gap: 12px;
	padding: 12px 0;
}

.naamkado-facts p {
	margin: 0;
}

.naamkado-design a {
	align-items: center;
	display: inline-flex;
	font-weight: 600;
	min-height: 48px;
}

.naamkado-design {
	margin: 6px 0 0;
}

.naamkado-ask,
.naamkado-design {
	font-size: var(--wp--preset--font-size--klein);
}

.naamkado-rating a {
	color: inherit;
}

/* Galerij: een grote vierkante foto met de teller, daaronder een rij duimen. */
.naamkado-gallery__stage {
	position: relative;
}

.naamkado-gallery__track {
	border-radius: 18px;
	display: flex;
	list-style: none;
	margin: 0;
	overflow-x: auto;
	padding: 0;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.naamkado-gallery__track::-webkit-scrollbar {
	display: none;
}

.naamkado-gallery__track > li {
	flex: 0 0 100%;
	scroll-snap-align: start;
}

.naamkado-gallery__track img {
	aspect-ratio: 1;
	display: block;
	height: auto;
	object-fit: cover;
	width: 100%;
}

.naamkado-gallery__counter {
	background: rgba(255, 255, 255, 0.94);
	border-radius: 999px;
	bottom: 12px;
	font-size: 0.875rem;
	font-weight: 600;
	margin: 0;
	padding: 4px 12px;
	position: absolute;
	right: 12px;
}

.naamkado-gallery__thumbs {
	display: grid;
	gap: 8px;
	grid-auto-columns: calc((100% - 32px) / 5);
	grid-auto-flow: column;
	margin-top: 8px;
	overflow-x: auto;
	scrollbar-width: thin;
}

.naamkado-gallery__thumb {
	border: 2px solid transparent;
	border-radius: 10px;
	display: block;
	overflow: hidden;
}

.naamkado-gallery__thumb[aria-current="true"] {
	border-color: var(--wp--preset--color--tekst);
}

.naamkado-gallery__thumb img {
	aspect-ratio: 1;
	display: block;
	height: auto;
	object-fit: cover;
	width: 100%;
}

@media (min-width: 900px) {
	.naamkado-product {
		align-items: start;
		gap: 56px;
		grid-template-columns: 1.1fr 0.9fr;
	}

	.naamkado-product__buy {
		position: sticky;
		top: 24px;
	}
}

/* De galerij blijft staan zolang de kolom ernaast doorloopt. Alleen als hij helemaal in beeld past
   (tot 757 px hoog bij 1200 px breed), anders vallen de duimen onder de rand. De header loopt mee weg. */
@media (min-width: 900px) and (min-height: 800px) {
	.naamkado-product__media {
		position: sticky;
		top: 24px;
	}
}

/* Over dit product en Vragen naast elkaar op desktop. */
.naamkado-product-info {
	border-top: 1px solid var(--wp--preset--color--lijn);
	display: grid;
	gap: 32px;
	padding-block: 40px;
}

.naamkado-product-info > * {
	margin-block: 0;
	min-width: 0;
}

.naamkado-product-info h2 {
	font-size: 1.5rem;
	margin: 0 0 12px;
}

.naamkado-product-text .wp-block-post-content > * {
	max-width: 64ch;
}

.naamkado-product-text .wp-block-post-content h2 {
	font-size: 1.25rem;
	margin-top: 28px;
}

.naamkado-faq {
	padding: 0;
}

.naamkado-faq > * {
	max-width: none !important;
}

.naamkado-faq details,
.naamkado-more {
	border-bottom: 1px solid var(--wp--preset--color--lijn);
	margin: 0;
}

.naamkado-more {
	border-top: 1px solid var(--wp--preset--color--lijn);
	margin-top: 16px;
}

.naamkado-faq summary,
.naamkado-more > summary {
	align-items: center;
	cursor: pointer;
	display: flex;
	font-weight: 600;
	gap: 12px;
	justify-content: space-between;
	list-style: none;
	min-height: 52px;
}

.naamkado-faq summary::-webkit-details-marker,
.naamkado-more > summary::-webkit-details-marker {
	display: none;
}

.naamkado-faq summary::after,
.naamkado-more > summary::after {
	content: "+";
	font-size: 1.375rem;
	font-weight: 400;
}

.naamkado-faq details[open] summary::after,
.naamkado-more[open] > summary::after {
	content: "\2013";
}

.naamkado-faq details p {
	margin: 0 0 16px;
}

@media (min-width: 900px) {
	.naamkado-product-info {
		gap: 56px;
		grid-template-columns: 1.1fr 0.9fr;
	}
}

.naamkado-specs {
	margin-block: 0 24px;
}

.naamkado-specs h2 {
	font-size: 1.125rem !important;
}

.naamkado-specs table {
	border-collapse: collapse;
	font-size: 0.9375rem;
	width: 100%;
}

.naamkado-specs th,
.naamkado-specs td {
	border-bottom: 1px solid var(--wp--preset--color--lijn);
	padding: 10px 0;
	text-align: left;
	vertical-align: top;
}

.naamkado-specs th {
	font-weight: 600;
	padding-right: 16px;
	width: 40%;
}

/* Past hier ook bij: hetzelfde raster als de winkel. */
.naamkado-cross-sells,
.naamkado-reviews {
	border-top: 1px solid var(--wp--preset--color--lijn);
	padding-block: 44px;
}

/* Nog geen reviews: een kop en één regel. */
.naamkado-reviews--leeg {
	padding-block: 24px;
}

.naamkado-reviews--leeg h2 {
	font-size: 1.5rem;
	margin: 0 0 6px;
}

.naamkado-reviews--leeg p {
	color: var(--naamkado-grijs);
	margin: 0;
}

.naamkado-cross-sells h2 {
	font-size: clamp(1.5rem, 4vw, 2rem);
	margin: 0 0 20px;
}

.naamkado-cross-sells ul {
	display: grid;
	gap: 24px 12px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

.naamkado-cross-sells a {
	color: inherit;
	display: block;
}

.naamkado-cross-sells__name {
	display: block;
	font-weight: 600;
	line-height: 1.3;
	margin-top: 10px;
}

.naamkado-cross-sells__price {
	display: block;
	font-weight: 800;
	margin-top: 4px;
}

@media (min-width: 700px) {
	.naamkado-cross-sells ul {
		gap: 32px 20px;
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* Voorbeeld van de tekst op de foto (Task 13). */
.naamkado-preview {
	margin: 16px 0;
}

.naamkado-preview__stage {
	overflow: hidden;
	position: relative;
}

.naamkado-preview__stage img {
	display: block;
	height: auto;
	width: 100%;
}

.naamkado-preview__text {
	color: var(--wp--preset--color--tekst);
	line-height: 1.1;
	margin: 0;
	overflow: hidden;
	pointer-events: none;
	position: absolute;
	text-align: center;
	white-space: nowrap;
}

.naamkado-preview figcaption {
	font-size: var(--wp--preset--font-size--klein);
	margin-top: 4px;
}

/* WooCommerce zet de titel van winkelwagen en afrekenen op 1000 px; dan staat hij niet boven de inhoud. */
.wp-block-post-title[data-block-name="woocommerce/page-content-wrapper"] {
	max-width: 1200px;
}

/* Winkelwagen en checkout (Task 14). Producttitels en foto's zoals in het raster. */
.wc-block-product .wp-block-post-title {
	font-size: 1rem !important;
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1.3;
}

.wc-block-product .wc-block-components-product-image img,
.wc-block-cart-item__image img {
	border-radius: 12px;
}

.wc-block-cart .wc-block-components-product-name {
	font-weight: 600;
	text-decoration: none;
}

.naamkado-cart-after {
	margin-top: 16px;
}

.naamkado-cart-after p {
	margin: 4px 0;
}

.naamkado-continue a {
	align-items: center;
	display: inline-flex;
	min-height: 48px;
}

.wc-block-components-checkout-place-order-button,
.wc-block-cart__submit-button {
	min-height: 48px;
}

/* Blog en pagina's (Task 15). */
.wp-block-post-navigation-link {
	align-items: center;
	display: flex;
	min-height: 48px;
}

.wp-block-query-pagination a,
.wp-block-query-pagination .page-numbers {
	align-items: center;
	display: inline-flex;
	min-height: 48px;
	min-width: 48px;
}

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

/* Voorbeeld van de gravure: een vlak met het veld en de naam in elk graveerlettertype. De tegels hebben een vaste
   hoogte, zodat er niets verspringt als een font binnenkomt. Bruin #6B4226 staat alleen hier en in de lettertypetegels. */
.naamkado-name-preview {
	background: var(--wp--preset--color--vlak);
	border-radius: 18px;
	padding: 18px;
}

.naamkado-name-preview__label {
	display: block;
	font-weight: 600;
	margin-bottom: 8px;
}

.naamkado-name-preview__input {
	background: var(--wp--preset--color--achtergrond);
	border: 1.5px solid var(--wp--preset--color--lijn);
	border-radius: 12px;
	box-sizing: border-box;
	color: var(--wp--preset--color--tekst);
	font: 500 1.1875rem/1 var(--wp--preset--font-family--figtree);
	height: 52px;
	padding: 0 16px;
	width: 100%;
}

.naamkado-name-preview__input:focus {
	border-color: var(--wp--preset--color--tekst);
}

.naamkado-name-preview__tiles {
	display: grid;
	gap: 8px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	list-style: none;
	margin: 12px 0 0;
	padding: 0;
}

.naamkado-name-preview__tile {
	background: var(--wp--preset--color--achtergrond);
	border: 1px solid var(--wp--preset--color--lijn);
	border-radius: 12px;
	display: flex;
	flex-direction: column;
	font-size: 1.75rem;
	justify-content: space-between;
	min-height: 92px;
	padding: 14px 10px 10px;
	text-align: center;
}

.naamkado-name-preview__tile:last-child {
	grid-column: 1 / -1;
}

/* De naam in em van de tegel, zodat de correctie per font hieronder overal geldt. */
.naamkado-name-preview__text {
	color: var(--wp--preset--color--gravure);
	display: block;
	font-size: 1em;
	height: 1.3em;
	line-height: 1.3;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Sacramento is van zichzelf klein, Bungee Shade groot; zo lijken ze even groot. */
.naamkado-name-preview__text.naamkado-font-sacramento {
	font-size: 1.35em;
	height: 0.96em;
	line-height: 0.96;
}

.naamkado-name-preview__text.naamkado-font-bungee-shade {
	font-size: 0.72em;
	height: 1.8em;
	line-height: 1.8;
}

.naamkado-name-preview__font {
	color: var(--naamkado-grijs);
	font-size: 0.8125rem;
	margin-top: 6px;
}

.naamkado-name-preview__note {
	color: var(--naamkado-grijs);
	font-size: 0.8125rem;
	margin: 12px 0 0;
}

@media (min-width: 700px) {
	.naamkado-name-preview__tiles {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}

	.naamkado-name-preview__tile:last-child {
		grid-column: auto;
	}

	.naamkado-name-preview__tile {
		font-size: 1.625rem;
	}
}

/* Op de productpagina is de kolom smaller: drie per rij, de laatste over de volle breedte op mobiel. */
@media (min-width: 700px) {
	.naamkado-name-preview--product .naamkado-name-preview__tiles {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.naamkado-name-preview--product .naamkado-name-preview__tile {
		font-size: 1.5rem;
	}
}

/* Ruimte tussen de inhoud en de footer; de homepage eindigt met het vlak over de makers en heeft die niet nodig. */
main.wp-block-group:not(.naamkado-home) {
	padding-bottom: 56px;
}

main .naamkado-search + .naamkado-pills {
	margin-top: 24px;
}

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