/*
 * Landingspagina's (inc/landing.php): /cadeau-voor-wijnliefhebbers/, /fles-wijn-cadeau-geven/, /over-ons/.
 * Bouwt op homepage.css + zakelijk.css (hero, knoppen, puntenlijst, fotokaarten).
 */

.boozt-lhero *,
.boozt-lsectie--product *,
.boozt-lsectie--hoofdstukken *,
.boozt-lsectie--verwijzingen *,
.boozt-lsectie--vragen *,
.boozt-lsectie--verhaal *,
.boozt-lsectie--team *,
.boozt-lsectie--contact *,
.boozt-lcta * {
	box-sizing: border-box;
}

/* Knoppen, ankers en #tips/#cadeau niet onder de plakkende balk. */
.boozt-z[id] {
	scroll-margin-top: calc(var(--vino2-bar-h, 4.5rem) + 1rem);
}

/* ------------------------------------------------------------------- hero */

.boozt-kruimel {
	position: relative;
	z-index: 3;
	text-align: center; /* gelijk met de gecentreerde kop (17-09, Victor) */
	text-wrap: balance;
	margin: calc(clamp(4rem, 9vw, 7.5rem) * -0.55) auto clamp(1.5rem, 3vw, 2.5rem);
	font-size: 0.8125rem;
	color: color-mix(in srgb, var(--wp--preset--color--cream, #ebe0d6) 70%, transparent);
}

.boozt-kruimel a {
	color: inherit;
	text-decoration: none;
}

.boozt-kruimel a:hover,
.boozt-kruimel a:focus-visible {
	color: var(--wp--preset--color--cream, #ebe0d6);
	text-decoration: underline;
}

.boozt-kruimel [aria-current] {
	color: var(--wp--preset--color--cream, #ebe0d6);
}

/* H1-grootte per pagina: --zhero-deler = breedte van de langste regel in em (inc/landing.php). */
.boozt-zhero.boozt-lhero .boozt-zhero__h1 {
	font-size: min(7rem, calc(min(100vw - 3rem, 72rem) / var(--zhero-deler, 12)));
}

/* Eerste sectie na de hero: ruimte voor de foto's die erin steken. */
.boozt-lhero + .boozt-sectie {
	padding-top: calc(var(--wp--preset--spacing--60) + var(--zhero-overlap) + 2rem);
}

/* Hero zonder foto's (contact): eigen ruimte onderaan, en geen ruimte vrijhouden voor foto's die de volgende sectie in steken. */
.boozt-zhero.boozt-lhero.zonder-fotos {
	padding-bottom: clamp(3.5rem, 7vw, 6rem);
}

.boozt-lhero.zonder-fotos + .boozt-sectie {
	padding-top: var(--wp--preset--spacing--60);
}

/* ---------------------------------------------------------------- product */

.boozt-lproduct {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	gap: clamp(2.5rem, 6vw, 6rem);
	align-items: center;
}

.boozt-lproduct__foto {
	display: block;
	border-radius: 1.25rem;
	overflow: hidden;
	background-color: var(--wp--preset--color--cream, #ebe0d6);
}

.boozt-lproduct__foto img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	transition: transform 0.6s cubic-bezier(0.38, 0.005, 0.215, 1);
}

.boozt-lproduct__foto:hover img {
	transform: scale(1.03);
}

.boozt-lproduct__kaart {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.35rem 1rem;
	margin: 1.75rem 0 0.5rem;
}

.boozt-lproduct__naam {
	flex: 1 0 100%;
	margin: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--xl);
	line-height: 1.15;
}

.boozt-lproduct__naam a {
	color: var(--wp--preset--color--ink, #1b0b09);
	text-decoration: none;
}

.boozt-lproduct__naam a:hover {
	color: var(--wp--preset--color--wine, #70041c);
}

.boozt-lproduct__prijs {
	margin: 0;
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 700;
	color: var(--wp--preset--color--ink, #1b0b09);
}

.boozt-lproduct__prijs ins {
	text-decoration: none;
}

.boozt-lproduct__prijs del {
	margin-right: 0.4em;
	font-weight: 400;
	color: var(--wp--preset--color--ink-muted, #6b5a52);
}

.boozt-lproduct__sterren {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.875rem;
	color: var(--wp--preset--color--ink-muted, #6b5a52);
	text-decoration: none;
}

.boozt-sterweergave {
	position: relative;
	display: inline-flex;
	line-height: 0;
}

.boozt-sterweergave__leeg,
.boozt-sterweergave__vol {
	display: inline-flex;
	gap: 0.1rem;
	white-space: nowrap;
}

.boozt-sterweergave__vol {
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
}

.boozt-sterweergave svg {
	flex: none;
	width: 1rem;
	height: 1rem;
}

.boozt-sterweergave__leeg svg {
	fill: var(--wp--preset--color--line, #dccbba);
}

.boozt-sterweergave__vol svg {
	fill: var(--wp--preset--color--wine, #70041c);
}

.boozt-lproduct__punten {
	margin-top: 1rem;
}

.boozt-lproduct__knoppen {
	align-items: center;
	gap: 0.75rem 1.5rem;
}

/* Koopknop: bordeaux, hover nacht — gelijk aan de productpagina. */
.boozt-lproduct__koop {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 3.25rem;
	padding: 0.85em 1.75em;
	border: 1px solid var(--wp--preset--color--wine, #70041c);
	border-radius: 2.5em;
	background-color: var(--wp--preset--color--wine, #70041c);
	color: var(--wp--preset--color--cream, #ebe0d6);
	font-weight: 700;
	text-decoration: none;
	transition: background-color 0.25s ease, border-color 0.25s ease;
}

.boozt-lproduct__koop:hover,
.boozt-lproduct__koop:focus-visible {
	background-color: var(--wp--preset--color--ink, #1b0b09);
	border-color: var(--wp--preset--color--ink, #1b0b09);
	color: var(--wp--preset--color--cream, #ebe0d6);
}

.boozt-lproduct__koop.loading {
	opacity: 0.6;
}

.boozt-lproduct__knoppen .added_to_cart,
.boozt-lproduct__meer {
	font-weight: 600;
	color: var(--wp--preset--color--wine, #70041c);
}

/* -------------------------------------------------------------- kaarten */

.boozt-lkaarten {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* ---------------------------------------------------------- hoofdstukken */

.boozt-lstukken {
	display: grid;
}

.boozt-lstuk {
	display: grid;
	grid-template-columns: minmax(0, 44rem);
	gap: clamp(2rem, 5vw, 5rem);
	align-items: center;
	padding-block: clamp(2rem, 4vw, 3rem);
	border-top: 1px solid var(--wp--preset--color--line, #dccbba);
}

.boozt-lstuk:first-child {
	padding-top: 0;
	border-top: 0;
}

.boozt-lstuk.heeft-foto {
	grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
}

.boozt-lstuk__kop {
	font-size: var(--wp--preset--font-size--xxl);
	margin: 0 0 0.5em;
}

h3.boozt-lstuk__kop {
	font-size: var(--wp--preset--font-size--xl);
}

.boozt-lstuk__tekst p {
	font-size: var(--wp--preset--font-size--lg);
	line-height: 1.65;
	color: var(--wp--preset--color--ink-muted, #6b5a52);
	margin: 0 0 1em;
}

.boozt-lstuk__tekst p:last-child {
	margin-bottom: 0;
}

.boozt-lstuk__foto {
	margin: 0;
}

.boozt-lstuk__foto img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 1.25rem;
}

/* ---------------------------------------------------------- verwijzingen */

.boozt-lverwijzingen {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
}

.boozt-lverwijzing {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.75rem;
	padding: clamp(1.75rem, 4vw, 3rem);
	border-radius: 1.25rem;
	background-color: var(--wp--preset--color--cream, #ebe0d6);
}

.boozt-lverwijzing__titel {
	font-size: var(--wp--preset--font-size--xl);
	margin: 0;
}

.boozt-lverwijzing__tekst {
	margin: 0 0 0.75rem;
	color: var(--wp--preset--color--ink-muted, #6b5a52);
}

.boozt-lverwijzing .button-029 {
	margin-top: auto;
}

/* ---------------------------------------------------------------- vragen */

.boozt-lvragen {
	display: grid;
	grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
	gap: clamp(2rem, 6vw, 6rem);
	align-items: start;
}

.boozt-lvragen__kop {
	margin: 0;
}

.boozt-lvragen__lijst {
	border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--ink, #1b0b09) 18%, transparent);
}

.boozt-lvraag {
	border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--ink, #1b0b09) 18%, transparent);
}

.boozt-lvraag summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	padding-block: 1.35rem;
	cursor: pointer;
	list-style: none;
}

.boozt-lvraag summary::-webkit-details-marker {
	display: none;
}

.boozt-lvraag__vraag {
	margin: 0;
	font-size: var(--wp--preset--font-size--lg);
	line-height: 1.3;
}

.boozt-lvraag summary:hover .boozt-lvraag__vraag {
	color: var(--wp--preset--color--wine, #70041c);
}

.boozt-lvraag summary:focus-visible {
	outline: 2px solid var(--wp--preset--color--wine, #70041c);
	outline-offset: 4px;
	border-radius: 0.25rem;
}

/* Plus dat een min wordt. */
.boozt-lvraag__icoon {
	position: relative;
	flex: none;
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	background-color: var(--wp--preset--color--base, #f8f5f1);
}

.boozt-lvraag__icoon::before,
.boozt-lvraag__icoon::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0.8rem;
	height: 1.5px;
	background-color: var(--wp--preset--color--ink, #1b0b09);
	transform: translate(-50%, -50%);
	transition: transform 0.25s ease;
}

.boozt-lvraag__icoon::after {
	transform: translate(-50%, -50%) rotate(90deg);
}

.boozt-lvraag[open] .boozt-lvraag__icoon::after {
	transform: translate(-50%, -50%) rotate(0deg);
}

.boozt-lvraag__antwoord {
	padding: 0 3.5rem 1.5rem 0;
}

.boozt-lvraag__antwoord p {
	margin: 0 0 0.75em;
	color: var(--wp--preset--color--ink-muted, #6b5a52);
	line-height: 1.6;
}

.boozt-lvraag__antwoord p:last-child {
	margin-bottom: 0;
}

/* ------------------------------------------------------------ afsluiter */

.boozt-lcta__binnen {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.boozt-lcta__kop {
	font-size: min(7rem, calc(min(100vw - 3rem, 72rem) / 9.5));
	line-height: 0.9;
	margin: 0 0 0.4em;
	color: inherit;
	text-wrap: balance;
}

.boozt-lcta .boozt-hero__lead {
	margin-inline: auto;
}

.boozt-lcta .boozt-z__knoppen {
	justify-content: center;
}

/* ------------------------------------------------------ verhaal (over ons) */

.boozt-lverhaal {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: clamp(2.5rem, 6vw, 6rem);
	align-items: start;
}

/* Kolom rekt mee met de tekst, zodat het citaat erin kan plakken. */
.boozt-lverhaal__links {
	align-self: stretch;
	container-type: inline-size;
}

.boozt-lverhaal__citaat {
	position: sticky;
	top: calc(var(--vino2-bar-h, 4.5rem) + 2rem);
	margin: 0;
	padding: 0;
	border: 0;
}

/* Grootte volgt uit de langste regel (--citaat-deler, inc/landing.php) en de kolombreedte. */
.boozt-lverhaal__citaat p {
	margin: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 900;
	font-size: clamp(2.25rem, 100cqi / var(--citaat-deler, 6), 6rem);
	line-height: 0.9;
	letter-spacing: -0.01em;
	text-transform: uppercase;
	color: var(--wp--preset--color--wine, #70041c);
}

.boozt-lverhaal__citaat cite {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-top: 1.25rem;
	font-style: normal;
	font-size: 0.9375rem;
	color: var(--wp--preset--color--ink-muted, #6b5a52);
}

.boozt-lverhaal__citaat cite::before {
	content: "";
	width: 2rem;
	height: 1px;
	background: currentColor;
}

.boozt-lverhaal__foto {
	margin: 2rem 0 0;
	border-radius: 1.25rem;
	overflow: hidden;
	transform: rotate(-2deg);
}

.boozt-lverhaal__foto img {
	display: block;
	width: 100%;
}

.boozt-lverhaal__tekst p {
	font-size: var(--wp--preset--font-size--lg);
	line-height: 1.65;
	margin: 0 0 1.25em;
	max-width: 38rem;
}

.boozt-lverhaal__groet {
	margin-top: 2rem;
}

.boozt-lverhaal__groet span {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 900;
	font-size: 1.75rem;
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--wp--preset--color--wine, #70041c);
}

/* ---------------------------------------------------------- team (over ons) */

.boozt-lteam__kop {
	margin-bottom: var(--wp--preset--spacing--50, 3.5rem);
}

.boozt-lteam__kop .boozt-z__kop {
	margin-bottom: 0.3em;
}

.boozt-lteam {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1.5rem, 3vw, 2.5rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.boozt-lteam__lid {
	margin: 0;
}

/* Kaart zonder foto: grote beginletter die onderaan uit het vlak loopt. */
.boozt-lteam__beeld {
	position: relative;
	aspect-ratio: 4 / 5;
	border-radius: 1.25rem;
	overflow: hidden;
	container-type: inline-size;
	transform: rotate(var(--kanteling, 0deg));
	transition: transform 0.5s cubic-bezier(0.34, 1.4, 0.64, 1);
}

.boozt-lteam__lid:nth-child(3n + 1) .boozt-lteam__beeld { --kanteling: -2deg; }
.boozt-lteam__lid:nth-child(3n + 2) .boozt-lteam__beeld { --kanteling: 1.5deg; }
.boozt-lteam__lid:nth-child(3n + 3) .boozt-lteam__beeld { --kanteling: -1deg; }

.boozt-lteam__lid:hover .boozt-lteam__beeld,
.boozt-lteam-solo .boozt-lteam__beeld:hover {
	transform: rotate(0deg) scale(1.02);
}

.boozt-lteam__beeld span {
	position: absolute;
	left: 0.06em;
	bottom: -0.26em;
	z-index: 1;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 900;
	font-size: 100cqi;
	line-height: 1;
	transition: transform 0.6s cubic-bezier(0.34, 1.4, 0.64, 1);
}

.boozt-lteam__lid:hover .boozt-lteam__beeld span,
.boozt-lteam-solo .boozt-lteam__beeld:hover span {
	transform: translateY(-0.06em);
}

.boozt-lteam__beeld.is--bordeaux {
	background: var(--wp--preset--color--wine, #70041c);
	color: var(--wp--preset--color--cream, #ebe0d6);
}

.boozt-lteam__beeld.is--nacht {
	background: var(--wp--preset--color--ink, #1b0b09);
	color: var(--wp--preset--color--wine, #70041c);
}

.boozt-lteam__beeld.is--linnen {
	background: var(--wp--preset--color--base, #f8f5f1);
	color: var(--wp--preset--color--ink, #1b0b09);
}

/* Eén persoon: kaart links over twee rijen, kop en tekst rechts verticaal gecentreerd. */
.boozt-lteam-solo {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	grid-template-rows: 1fr auto auto 1fr;
	grid-template-areas:
		"beeld ."
		"beeld kop"
		"beeld over"
		"beeld .";
	column-gap: clamp(2.5rem, 6vw, 6rem);
}

.boozt-lteam-solo .boozt-lteam__kop {
	grid-area: kop;
	margin-bottom: 0;
}

.boozt-lteam-solo .boozt-lteam__beeld {
	grid-area: beeld;
	--kanteling: -2deg;
}

/* Hele letter in beeld, alleen onderaan afgesneden (M is ±0,95em breed). */
.boozt-lteam-solo .boozt-lteam__beeld span {
	font-size: 88cqi;
}

.boozt-lteam-solo__over {
	grid-area: over;
	max-width: 34rem;
}

.boozt-lteam-solo .boozt-lteam__rol {
	margin-top: 0;
	font-size: var(--wp--preset--font-size--lg);
}

.boozt-lteam-solo .boozt-lteam__naam {
	margin-top: 0.5rem;
	font-size: var(--wp--preset--font-size--xxl, 2.25rem);
}

.boozt-lteam-solo .boozt-lteam__tekst {
	font-size: var(--wp--preset--font-size--lg);
}

.boozt-lteam__beeld.heeft-foto img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.boozt-lteam__naam {
	margin: 1.5rem 0 0;
	font-size: var(--wp--preset--font-size--xl, 1.75rem);
	text-transform: uppercase;
}

.boozt-lteam__rol {
	margin: 0.25rem 0 0;
	font-weight: 600;
	color: var(--wp--preset--color--wine, #70041c);
}

.boozt-lteam__tekst {
	margin: 0.75rem 0 0;
	line-height: 1.6;
	color: var(--wp--preset--color--ink-muted, #6b5a52);
}

/* -------------------------------------------------------------- contact */

.boozt-lcontact {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1rem, 2vw, 1.5rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.boozt-lcontact__kaart {
	margin: 0;
	padding: clamp(1.5rem, 3vw, 2.25rem);
	border-radius: 1.25rem;
	background: var(--wp--preset--color--cream, #ebe0d6);
}

/* Icoonrondje is zand, net als de kaart: hier linnen. */
.boozt-lcontact__kaart .boozt-z__icoon {
	background-color: var(--wp--preset--color--base, #f8f5f1);
}

.boozt-lcontact__kop {
	margin: 1.25rem 0 0.35rem;
	font-size: var(--wp--preset--font-size--base);
	font-weight: 600;
	color: var(--wp--preset--color--ink-muted, #6b5a52);
}

.boozt-lcontact__waarde {
	margin: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--lg);
	line-height: 1.35;
	overflow-wrap: anywhere;
}

.boozt-lcontact__waarde a {
	color: inherit;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

.boozt-lcontact__waarde a:hover,
.boozt-lcontact__waarde a:focus-visible {
	color: var(--wp--preset--color--wine, #70041c);
	text-decoration-thickness: 2px;
}

.boozt-lcontact__extra {
	margin: 0.75rem 0 0;
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--ink-muted, #6b5a52);
}

.boozt-lcontact__bedrijf {
	margin: 1.5rem 0 0;
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--ink-muted, #6b5a52);
}

/* Contact gevolgd door verwijzingen: niet twee keer volle sectieruimte. */
.boozt-lsectie--contact + .boozt-lsectie--verwijzingen {
	padding-top: 0;
}

/* Drie verwijzingen: naast elkaar in plaats van twee plus een wees. */
@media (min-width: 1024px) {
	.boozt-lverwijzingen:has(> li:nth-child(3)) {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* ---------------------------------------------------------------- mobiel */

@media (max-width: 1023px) {
	.boozt-lkaarten {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 781px) {
	.boozt-zhero.boozt-lhero .boozt-zhero__h1 {
		font-size: clamp(2rem, calc((100vw - 3rem) / var(--zhero-deler-m, 7.3)), 3.25rem); /* rustiger dan 3.75: korte koppen gingen anders op 4–5 regels van 60px */
	}

	.boozt-kruimel {
		margin-top: -1.25rem;
	}

	.boozt-lproduct,
	.boozt-lstuk.heeft-foto,
	.boozt-lverwijzingen,
	.boozt-lvragen {
		grid-template-columns: minmax(0, 1fr);
	}

	.boozt-lkaarten {
		grid-template-columns: minmax(0, 1fr);
	}

	.boozt-lverhaal,
	.boozt-lteam,
	.boozt-lcontact {
		grid-template-columns: minmax(0, 1fr);
	}

	.boozt-lverhaal__citaat {
		position: static;
	}

	/* Onder elkaar: niet schermhoog, twee kaarten zichtbaar per scroll. */
	.boozt-lteam .boozt-lteam__beeld {
		aspect-ratio: 5 / 4;
	}

	.boozt-lteam .boozt-lteam__beeld span {
		font-size: 78cqi;
		bottom: -0.24em;
	}

	/* Eén persoon op mobiel: kop, kaart, tekst. */
	.boozt-lteam-solo {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: none;
		grid-template-areas: "kop" "beeld" "over";
	}

	.boozt-lteam-solo .boozt-lteam__kop {
		margin-bottom: 2rem;
	}

	.boozt-lteam-solo .boozt-lteam__beeld {
		width: min(100%, 22rem);
	}

	.boozt-lteam-solo .boozt-lteam__naam {
		margin-top: 1.75rem;
	}

	.boozt-lvraag__antwoord {
		padding-right: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.boozt-lteam__beeld,
	.boozt-lteam__beeld span,
	.boozt-lproduct__foto img,
	.boozt-lvraag__icoon::before,
	.boozt-lvraag__icoon::after {
		transition: none;
	}
}

/* ------------------------------------------------- de naam (Over ons, 23-09-2026) */

.boozt-lnaam {
	text-align: center;
}

.boozt-lnaam__kop {
	font-size: min(7rem, calc(min(100vw - 3rem, 72rem) / var(--naam-deler, 9.5)));
	line-height: 0.9;
	margin: 0 0 0.5em;
	color: inherit;
}

.boozt-lnaam__tekst {
	max-width: 42rem;
	margin-inline: auto;
	font-size: var(--wp--preset--font-size--lg);
	line-height: 1.6;
}