/**
 * Groomzo v2 — homepage (Fase 1: hero + trust strip). Spec: docs/home-mvp-v2.md.
 * Scope: .gzv-home. Tokens uit tokens.css; raster via .gzv-inner (header.css).
 * Elementor-Kit (.elementor-kit-4 op body) overridet h1-kleur en button-
 * kleur/bg/radius/padding op source-order → bekende override-punten
 * gescoped + !important (zelfde les als header/footer/PDP).
 */

body.gzv-home {
	overflow-x: clip; /* safety: onverwachte 1px-overflow netjes afsnijden */
}

.gzv-home {
	font-family: var(--gz-sans);
	color: var(--gz-ink);
	/* .ast-container is op deze pagina een full-width FLEX-container
	   (ast-page-builder-template) — main is het flex-item en moet de
	   volle breedte pakken; de secties zijn dan vanzelf full-bleed. */
	width: 100%;
}

/* ---------- Hero ---------- */

.gzv-hero {
	background: var(--gz-paper);
}

.gzv-hero-inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: 28px;
	padding-block: 34px 44px;
}

.gzv-hero-eyebrow {
	margin: 0 0 14px !important;
	font: 600 12px/1 var(--gz-sans);
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--gz-moss);
}

.gzv-hero-title {
	margin: 0 0 16px !important;
	font-family: var(--gz-disp) !important;
	font-weight: 590 !important; /* Kit overridet h1-typografie op source-order */
	font-size: clamp(30px, 7.2vw, 38px) !important;
	line-height: 1.14 !important;
	letter-spacing: -0.01em !important;
	color: var(--gz-ink) !important;
}

.gzv-hero-title em {
	font-style: italic;
	color: var(--gz-pine);
}

/* .amp (tekst-& in Fraunces) staat site-breed in style.css. */

.gzv-hero-sub {
	margin: 0 0 22px !important;
	max-width: 54ch;
	font-size: 16.5px;
	line-height: 1.6;
	color: var(--gz-body);
}

.gzv-hero-proof {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 26px !important;
	font-size: 14px;
	line-height: 1.3;
	color: var(--gz-body);
}

.gzv-hero-proof img {
	width: 92px;
	height: 17px;
	flex: 0 0 auto;
}

.gzv-hero-ctas {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
}

/* Kit-proof knoppen (Kit zet color/bg/radius/padding op source-order) */
.gzv-home .gzv-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 13px 30px !important;
	border: 0;
	border-radius: 999px !important;
	background: var(--gz-pine) !important;
	color: var(--gz-ivory) !important;
	font: 600 15.5px/1.1 var(--gz-sans) !important;
	letter-spacing: .01em;
	text-align: center;
	text-decoration: none !important;
	cursor: pointer;
	transition: background-color .18s ease;
}

.gzv-home .gzv-btn:hover,
.gzv-home .gzv-btn:focus-visible {
	background: var(--gz-pine-deep) !important;
	color: var(--gz-ivory) !important;
}

.gzv-home .gzv-btn:focus-visible {
	outline: 2px solid var(--gz-amber);
	outline-offset: 2px;
}

.gzv-hero-media {
	border-radius: var(--gz-r-lg);
	overflow: hidden;
	box-shadow: var(--gz-shadow);
}

.gzv-hero-media img {
	display: block;
	width: 100%;
	height: auto;
}

/* Eén subtiele load-animatie: copy als groep, beeld 60ms later.
   Alleen opacity+transform (CLS-safe); reduced-motion = direct zichtbaar. */
@media (prefers-reduced-motion: no-preference) {
	.gzv-hero-copy,
	.gzv-hero-media {
		animation: gzv-rise .36s cubic-bezier(.22, .61, .36, 1) both;
	}

	.gzv-hero-media { animation-delay: .06s; }
}

@keyframes gzv-rise {
	from { opacity: 0; transform: translateY(8px); }
	to { opacity: 1; transform: none; }
}

@media (min-width: 1024px) {
	.gzv-hero-inner {
		grid-template-columns: 1.04fr .96fr;
		align-items: center;
		gap: 56px;
		padding-block: 76px 88px;
	}

	.gzv-hero-title {
		font-size: clamp(40px, 3.6vw, 54px) !important;
	}

	.gzv-hero-sub {
		font-size: 18px !important;
	}

	.gzv-hero-ctas {
		grid-template-columns: auto auto;
		justify-content: start;
	}
}

/* ---------- Trust strip ---------- */

.gzv-trust {
	background: var(--gz-pine);
	color: var(--gz-ivory);
}

.gzv-trust-list {
	list-style: none;
	margin: 0 !important;
	padding: 0 !important;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px 18px;
	padding-block: 18px !important;
}

.gzv-trust-list li {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: 13px;
	line-height: 1.35;
}

.gzv-trust-list svg {
	width: 17px;
	height: 17px;
	flex: 0 0 auto;
	color: var(--gz-amber);
}

.gzv-trust-tp img {
	width: 86px;
	height: 16px;
	flex: 0 0 auto;
}

@media (min-width: 1024px) {
	.gzv-trust-list {
		grid-template-columns: repeat(4, auto);
		justify-content: space-between;
		gap: 18px;
		padding-block: 20px !important;
	}

	.gzv-trust-list li {
		font-size: 14px;
	}
}

/* ---------- Gedeelde sectie-koppen (Fase 2) ---------- */

.gzv-sectie-titel {
	margin: 0 0 10px !important;
	font-family: var(--gz-disp) !important;
	font-weight: 590 !important;
	font-size: clamp(26px, 3.2vw, 38px) !important;
	line-height: 1.16 !important;
	color: var(--gz-ink) !important;
}

.gzv-sectie-sub {
	margin: 0 0 34px !important;
	max-width: 60ch;
	font-size: 15.5px;
	line-height: 1.55;
	color: var(--gz-body);
}

/* Selectief compositiedetail (alléén Favorieten): titel + "Bekijk alles" op
   één hairline-rij; de sub staat onder de regel. */
.gzv-sectie-kop {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px 18px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--gz-line);
}

.gzv-sectie-kop .gzv-sectie-titel { margin: 0 !important; }

.gzv-sectie-kop + .gzv-sectie-sub { margin-top: 18px; }

.gzv-sectie-link {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font: 600 14px/1.1 var(--gz-sans);
	color: var(--gz-pine) !important; /* Kit kleurt links blauw op source-order */
	text-decoration: none !important;
	padding-bottom: 3px;
	border-bottom: 1.5px solid transparent;
	transition: border-color .18s ease;
}

.gzv-sectie-link:hover { color: var(--gz-pine-deep) !important; }

.gzv-sectie-link:focus-visible {
	outline: 2px solid var(--gz-amber);
	outline-offset: 3px;
}

.gzv-sectie-link:hover { border-bottom-color: var(--gz-moss); }
.gzv-sectie-link svg { transition: transform .18s ease; }
.gzv-sectie-link:hover svg { transform: translateX(3px); }

/* Paper-grain: fractalNoise op 2% — het ivoor voelt minder digitaal-plat.
   Alléén op de grote paper-secties; geen gradients, geen zichtbaar patroon. */
.gzv-hero,
.gzv-needs,
.gzv-favorieten {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='0.02'/%3E%3C/svg%3E");
}

/* ---------- Behoeften (§2.3) — full-bleed beeldkaarten ---------- */

.gzv-needs {
	background: var(--gz-paper);
	padding-block: 52px 56px;
}

.gzv-need-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
}

.gzv-need-card {
	position: relative;
	display: block;
	height: 205px;
	border-radius: var(--gz-r-md);
	overflow: hidden;
	background: var(--gz-pine);
	text-decoration: none !important;
}

.gzv-need-card > img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .5s cubic-bezier(.22, .61, .36, 1);
}

.gzv-need-card:hover > img { transform: scale(1.03); }

.gzv-need-card:focus-visible {
	outline: 3px solid var(--gz-amber);
	outline-offset: -3px;
}

.gzv-need-bar {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding: 12px 16px 13px;
	background: var(--gz-pine);
}

.gzv-home .gzv-need-card h3 {
	margin: 0 !important;
	font-family: var(--gz-disp) !important;
	font-weight: 600 !important;
	font-size: 19px !important;
	line-height: 1.2 !important;
	color: var(--gz-ivory) !important;
}

.gzv-need-meer {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font: 500 12px/1 var(--gz-sans);
	letter-spacing: .02em;
	color: var(--gz-muted-dark);
}

.gzv-need-card:hover .gzv-need-meer { color: var(--gz-ivory); }
.gzv-need-meer svg { transition: transform .18s ease; }
.gzv-need-card:hover .gzv-need-meer svg { transform: translateX(3px); }

/* ---------- Favorieten (§2.4) — kaartvormen staan in product-card.css
   (gedeelde bron met het shop-archief); hier alléén de home-layout:
   1 rij bestsellers, horizontaal schuifbaar (mobiel snap + peek; op
   desktop passen 3 kaarten exact → geen scroll). ---------- */

.gzv-favorieten {
	background: var(--gz-paper-deep);
	padding-block: 52px 68px;
}

.gzv-prod-grid {
	list-style: none;
	margin: 0 !important;
	padding: 0 0 6px !important;
	display: flex;
	gap: 16px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.gzv-prod-grid::-webkit-scrollbar { display: none; }

.gzv-prod-card {
	flex: 0 0 min(76vw, 330px);
	scroll-snap-align: start;
}

@media (min-width: 560px) {
	.gzv-prod-card { flex-basis: calc((100% - 20px) / 2.35); } /* 2 vol + peek */
	.gzv-prod-grid { gap: 20px; }
	.gzv-need-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; }
}

@media (min-width: 1024px) {
	.gzv-needs { padding-block: 72px 76px; }
	.gzv-favorieten { padding-block: 72px 88px; }
	.gzv-need-card { height: 250px; }
	.gzv-prod-grid { gap: 24px; }
	.gzv-prod-card { flex-basis: calc((100% - 48px) / 3); } /* exact 3 zichtbaar */
}
/* ---------- Waarom Groomzo (§2.5) — 3 principes, editoriaal ---------- */

.gzv-why {
	background: var(--gz-paper);
	padding-block: 38px 42px;
}

.gzv-why-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
	margin-top: 18px;
}

.gzv-why-item {
	padding-top: 14px;
	border-top: 1px solid var(--gz-line);
}

.gzv-why-nr {
	display: block;
	margin-bottom: 8px;
	font: 600 22px/1 var(--gz-disp);
	color: var(--gz-amber);
}

.gzv-home .gzv-why-item h3 {
	margin: 0 0 6px !important;
	font-family: var(--gz-disp) !important;
	font-weight: 600 !important;
	font-size: 20px !important;
	line-height: 1.25 !important;
	color: var(--gz-ink) !important;
}

.gzv-why-item p {
	margin: 0 !important;
	font-size: 14.5px;
	line-height: 1.55;
	color: var(--gz-body);
}

@media (min-width: 560px) {
	.gzv-why-grid { grid-template-columns: repeat(3, 1fr); gap: 24px; }
}

@media (min-width: 1024px) {
	.gzv-why { padding-block: 48px 52px; }
	.gzv-why-grid { margin-top: 22px; }
}

/* ---------- Featured bestseller (§2.6) — spotlight RVS-tondeuse ---------- */

.gzv-featured {
	background: var(--gz-paper-deep);
	padding-block: 52px 60px;
}

.gzv-featured-inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: 30px;
	align-items: center;
}

.gzv-featured-media {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* Landschapsvideo (16:9, zelfde presentatie als PDP-galerij): breedte volgt
   de kolom, poster + video delen dezelfde ratio → geen flip bij afspelen.
   preload=none → geen byte vóór de klik. */
.gzv-featured-media video {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--gz-r-lg);
	background: var(--gz-pine-deep);
	box-shadow: var(--gz-shadow);
}

.gzv-featured-eyebrow {
	margin: 0 0 12px !important;
	font: 600 12px/1 var(--gz-sans);
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--gz-moss);
}

.gzv-featured-lijst {
	list-style: none;
	margin: 18px 0 26px !important;
	padding: 0 !important;
	display: grid;
	gap: 11px;
}

.gzv-featured-lijst li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 15.5px;
	line-height: 1.5;
	color: var(--gz-body);
}

.gzv-featured-lijst svg {
	width: 15px;
	height: 15px;
	flex: 0 0 auto;
	margin-top: 4px;
	color: var(--gz-moss);
}

.gzv-featured-cta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 14px;
}

.gzv-featured-cta .gzv-btn { min-width: 240px; }

.gzv-featured-prijs {
	font: 500 16px/1.2 var(--gz-sans);
	color: var(--gz-ink);
}

.gzv-featured-prijs del {
	color: var(--gz-muted);
	font-weight: 400;
	font-size: 13px;
	margin-right: 6px;
}

.gzv-featured-prijs ins {
	text-decoration: none;
	font-weight: 600;
	color: var(--gz-pine);
}

.gzv-featured-proof {
	margin: 14px 0 0 !important;
	font-size: 12.5px;
	color: var(--gz-muted);
}

@media (min-width: 1024px) {
	.gzv-featured { padding-block: 76px 88px; }
	.gzv-featured-inner {
		grid-template-columns: .92fr 1.08fr;
		gap: 64px;
	}
}

/* ---------- Hoe thuis verzorgen werkt (§2.7) — 3 image-cards ---------- */

.gzv-stappen {
	background: var(--gz-paper);
	padding-block: 52px 60px;
}

.gzv-stappen-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 26px;
	margin-top: 24px;
}

.gzv-stap-img {
	display: block;
	aspect-ratio: 4 / 3;
	border-radius: var(--gz-r-md);
	overflow: hidden;
	background: var(--gz-soft);
}

.gzv-stap-img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Placeholder (user 31 aug): toont WAT voor beeld hier moet komen. */
.gzv-stap-img-ph {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 7px;
	text-align: center;
	background: var(--gz-paper-deep);
	border: 1px dashed var(--gz-line-hover);
	padding: 16px;
}

.gzv-stap-ph-tag {
	font: 600 11px/1 var(--gz-sans);
	letter-spacing: .15em;
	text-transform: uppercase;
	color: var(--gz-amber);
}

.gzv-stap-ph-hint {
	font: 400 12.5px/1.45 var(--gz-sans);
	color: var(--gz-muted);
	max-width: 30ch;
}

.gzv-stap-nr {
	display: block;
	margin: 15px 0 7px;
	font: 600 13px/1 var(--gz-sans);
	letter-spacing: .14em;
	color: var(--gz-amber);
}

.gzv-home .gzv-stap h3 {
	margin: 0 0 6px !important;
	font-family: var(--gz-disp) !important;
	font-weight: 600 !important;
	font-size: 19px !important;
	line-height: 1.25 !important;
	color: var(--gz-ink) !important;
}

.gzv-stap p {
	margin: 0 !important;
	font-size: 14.5px;
	line-height: 1.55;
	color: var(--gz-body);
}

@media (min-width: 560px) {
	.gzv-stappen-grid { grid-template-columns: repeat(3, 1fr); gap: 26px; }
}

@media (min-width: 1024px) {
	.gzv-stappen { padding-block: 72px 78px; }
	.gzv-stappen-grid { margin-top: 28px; }
}

/* ---------- CTA na social proof (audit 2 sep) — rustige afsluiting ---------- */

.gzv-ctaproof {
	background: var(--gz-pine);
	padding-block: 46px 50px;
}

.gzv-ctaproof-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 18px;
	text-align: center;
}

.gzv-ctaproof-titel {
	margin: 0 !important;
	font-family: var(--gz-disp) !important;
	font-weight: 590 !important;
	font-size: clamp(24px, 3vw, 34px) !important;
	line-height: 1.18 !important;
	color: var(--gz-ivory) !important;
}

.gzv-home .gzv-btn-ivory {
	background: var(--gz-ivory) !important;
	color: var(--gz-pine-deep) !important;
	min-width: 230px;
}

.gzv-home .gzv-btn-ivory:hover,
.gzv-home .gzv-btn-ivory:focus-visible {
	background: #FFFFFF !important;
	color: var(--gz-pine-deep) !important;
}

@media (min-width: 1024px) {
	.gzv-ctaproof { padding-block: 58px 62px; }
}

/* ---------- Advies & inspiratie (§2.10) — 3 blogkaarten, randloos ---------- */

.gzv-advies {
	background: var(--gz-paper-deep);
	padding-block: 52px 60px;
}

.gzv-advies-grid {
	list-style: none;
	margin: 26px 0 0 !important;
	padding: 0 !important;
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
}

.gzv-advies-link {
	display: flex;
	flex-direction: column;
	height: 100%;
	text-decoration: none !important;
	/* Kit-val idem search-link: pine op de link zelf (+ :visited). */
	color: var(--gz-pine) !important;
}

.gzv-advies-link:visited {
	color: var(--gz-pine) !important;
}

.gzv-advies-link:focus-visible {
	outline: 2px solid var(--gz-pine);
	outline-offset: 3px;
	border-radius: var(--gz-r-md);
}

.gzv-advies-img {
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: var(--gz-r-md);
	background: var(--gz-soft);
}

.gzv-advies-img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .25s ease;
}

.gzv-advies-card:hover .gzv-advies-img img { transform: scale(1.03); }

.gzv-advies-body {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 13px 2px 0;
}

.gzv-home .gzv-advies-body h3 {
	margin: 0 !important;
	font-family: var(--gz-disp) !important;
	font-weight: 600 !important;
	font-size: 17.5px !important;
	line-height: 1.3 !important;
	color: var(--gz-ink) !important;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 46px;
}

.gzv-advies-link:hover h3 { color: var(--gz-pine) !important; }

.gzv-advies-meer {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font: 500 12.5px/1 var(--gz-sans);
	color: var(--gz-muted);
}

.gzv-advies-meer svg { transition: transform .18s ease; }
.gzv-advies-link:hover .gzv-advies-meer { color: var(--gz-moss); }
.gzv-advies-link:hover .gzv-advies-meer svg { transform: translateX(3px); }

@media (min-width: 560px) {
	.gzv-advies-grid { grid-template-columns: repeat(3, 1fr); gap: 22px; }
}

@media (min-width: 1024px) {
	.gzv-advies { padding-block: 72px 78px; }
	.gzv-advies-grid { gap: 26px; }
}

/* ---------- UGC + social proof (§2.8) — 9:16 facade, click-to-play ---------- */

.gzv-ugc {
	background: var(--gz-paper-deep);
	padding-block: 52px 60px;
}

.gzv-ugc-sub {
	margin: 0 0 8px !important;
	font-size: 15.5px;
	line-height: 1.5;
	color: var(--gz-body);
}

.gzv-ugc-trust {
	margin: 0 0 22px !important;
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: 13px;
	color: var(--gz-muted);
}

.gzv-ugc-trust img {
	width: 86px;
	height: 16px;
	flex: 0 0 auto;
}

.gzv-ugc-track {
	display: flex;
	gap: 12px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.gzv-ugc-track::-webkit-scrollbar { display: none; }

.gzv-ugc-card {
	flex: 0 0 min(72vw, 300px);
	aspect-ratio: 9 / 16;
	scroll-snap-align: start;
	border-radius: var(--gz-r-md);
	overflow: hidden;
	background: var(--gz-pine-deep);
	position: relative;
}

.gzv-ugc-media {
	display: block;
	width: 100%;
	height: 100%;
	padding: 0 !important;
	margin: 0;
	border: 0 !important;
	/* Kit-proof: .elementor-kit-4 stampt button-bg/radius op source-order. */
	background: transparent !important;
	border-radius: 0 !important;
	color: inherit !important;
	cursor: pointer;
	position: relative;
	-webkit-tap-highlight-color: transparent;
}

.gzv-ugc-media:focus-visible {
	outline: 2px solid var(--gz-ivory);
	outline-offset: -4px;
}

.gzv-ugc-play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: rgba(239, 235, 221, .92);
	color: var(--gz-pine-deep);
	box-shadow: var(--gz-shadow);
	transition: transform .18s ease;
}

.gzv-ugc-media:hover .gzv-ugc-play { transform: translate(-50%, -50%) scale(1.06); }

.gzv-ugc-media svg { margin-left: 3px; }

.gzv-ugc-label {
	position: absolute;
	left: 12px;
	bottom: 11px;
	font: 500 12.5px/1 var(--gz-sans);
	color: rgba(239, 235, 221, .85);
}

.gzv-ugc-media video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Hybride optie C (9 okt): poster-frames op alle kaarten + subtiele
   onder-gradient zodat play-knop/label ook op lichte posters leesbaar
   blijven. Poster/gradient verdwijnen zodra de video speelt. */
.gzv-ugc-poster {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.gzv-ugc-media::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 34%;
	background: linear-gradient(to top, rgba(13, 24, 17, .55), rgba(13, 24, 17, 0));
	pointer-events: none;
}

.gzv-ugc-media.is-playing::after { opacity: 0; }

.gzv-ugc-media.is-playing { cursor: default; }

.gzv-ugc-media.is-playing .gzv-ugc-play,
.gzv-ugc-media.is-playing .gzv-ugc-label,
.gzv-ugc-media.is-playing .gzv-ugc-poster { display: none; }

/* Slider (r2, owner 9 okt): desktop = carrousel in één rij — 3 volle
   kaarten + peek, grotere statement-kaarten, ‹ ›-pijltjes (home.js
   verbergt ze aan de uiteinden/niet-scrollbaar). Mobiel = swipe-strip
   (bestaande flex-regels), pijltjes uit. */
.gzv-ugc-wrap { position: relative; }

.gzv-ugc-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1px solid var(--gz-line, #EAE4D3);
	background: var(--gz-card, #FCFAF5);
	color: var(--gz-pine, #22392C);
	box-shadow: 0 2px 10px rgba(23, 33, 27, .14);
	cursor: pointer;
	padding: 0;
	transition: background .16s ease;
}

.gzv-ugc-arrow:hover { background: var(--gz-pine, #22392C); color: var(--gz-ivory, #EFEBDD); }
.gzv-ugc-arrow:focus-visible { outline: 2.5px solid var(--gz-amber, #C08A34); outline-offset: 3px; }
.gzv-ugc-arrow[hidden] { display: none; }
.gzv-ugc-arrow svg { width: 16px; height: 16px; display: block; }
.gzv-ugc-prev { left: -14px; }
.gzv-ugc-next { right: -14px; }

@media (max-width: 1023px) {
	.gzv-ugc-arrow { display: none !important; }
}

@media (min-width: 1024px) {
	.gzv-ugc { padding-block: 76px 84px; }
	.gzv-ugc-track {
		display: flex;
		gap: 14px;
		overflow-x: auto;
		/* 3 volle kaarten + peek (.4) binnen de 1224px-inner. */
	}
	.gzv-ugc-card { flex: 0 0 calc((100% - 42px) / 3.4); }
}

/* ---------- Brand story (§2.9) — 45/55 beeld + tekst ---------- */

.gzv-story {
	background: var(--gz-paper);
	padding-block: 52px 60px;
}

.gzv-story-media {
	margin: 0 !important;
	border-radius: var(--gz-r-lg);
	overflow: hidden;
	/* 8 okt: echte owner-foto geplaatst (why-groomzo-exists.webp, 900x794)
	   — native verhouding i.p.v. de oude placeholder-verhoudingen. */
	aspect-ratio: 900 / 794;
	background: var(--gz-soft);
}

.gzv-story-media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.gzv-story-eyebrow {
	margin: 0 0 10px !important;
	font: 600 12px/1 var(--gz-sans);
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--gz-moss);
}

.gzv-story-body { margin-top: 20px; }

.gzv-story-tekst {
	margin-top: 12px;
	max-width: 58ch;
}

.gzv-story-tekst p {
	margin: 0 !important;
	font-size: 16px;
	line-height: 1.65;
	color: var(--gz-body);
}

.gzv-story-tekst p + p { margin-top: 12px !important; }

.gzv-story-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 16px !important;
	font: 500 13px/1 var(--gz-sans);
	color: var(--gz-pine) !important;
	text-decoration: none !important;
	border-bottom: 1px solid var(--gz-line-hover);
	padding-bottom: 3px;
}

.gzv-story-link svg { transition: transform .18s ease; }
.gzv-story-link:hover { color: var(--gz-pine-deep) !important; border-bottom-color: var(--gz-pine); }
.gzv-story-link:hover svg { transform: translateX(3px); }
.gzv-story-link:focus-visible {
	outline: 2px solid var(--gz-pine);
	outline-offset: 2px;
}

@media (min-width: 1024px) {
	.gzv-story { padding-block: 72px 78px; }
	.gzv-story-inner {
		display: grid;
		grid-template-columns: 45fr 55fr;
		gap: 56px;
		align-items: center;
	}
	.gzv-story-body { margin-top: 0; }
}