/*
 * Ferloa componenten – stijl "voorstel 2" (goedgekeurd).
 * Alle klassen beginnen met .ferloa- zodat XStore-stijlen niet botsen.
 */
:root {
	--f-papier: #FAF8F4;
	--f-wit: #FFFFFF;
	--f-inkt: #2A2A2E;
	--f-donker: #1E1A22;   /* openingssectie, band, footer */
	--f-grijs: #5C5A57;
	--f-goud: #B39A63;     /* lijnen/iconen op licht */
	--f-goud-licht: #C8B07A; /* accenten en tekst op donker */
	--f-lila: #411E63;     /* exacte logokleur */
	--f-lijn: #E4DED3;
	--f-kop: "Cormorant Garamond", "Cormorant", Georgia, "Times New Roman", serif;
	--f-tekst: "Jost", "Helvetica Neue", Arial, sans-serif;
	--f-rand: 64px;
}
@media (max-width: 48rem) { :root { --f-rand: 20px; } }

/* Volle breedte binnen een gecentreerde XStore-container. */
.ferloa-vol { width: 100vw; position: relative; left: 50%; margin-left: -50vw; box-sizing: border-box; }

.ferloa-klein { font-size: .875rem; color: var(--f-grijs); }

/* Koppen met cursief accent: <h2 class="ferloa-kop">Onze <em>doekjes.</em></h2> */
.ferloa-kop, h2.ferloa-kop, .ferloa-kop h2 {
	font-family: var(--f-kop);
	font-weight: 500;
	font-size: clamp(2.4rem, 4.5vw, 3.4rem);
	line-height: 1.05;
	letter-spacing: 0;
	margin: 0;
}
.ferloa-kop em { font-style: italic; }
.ferloa-kop.is-lila { color: var(--f-lila); }

/* Knoppen: pilvorm */
.ferloa-knop {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	padding: 0 1.75em;
	border: 1px solid var(--f-inkt);
	border-radius: 999px;
	background: var(--f-inkt);
	color: var(--f-wit);
	font-family: var(--f-tekst);
	font-weight: 500;
	font-size: 1rem;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	box-sizing: border-box;
}
.ferloa-knop:hover { background: var(--f-lila); border-color: var(--f-lila); color: var(--f-wit); }
.ferloa-knop--rand { background: transparent; color: var(--f-inkt); }
.ferloa-knop--rand:hover { background: var(--f-inkt); color: var(--f-wit); }
.ferloa-knop--licht { background: var(--f-wit); border-color: var(--f-wit); color: var(--f-inkt); }
.ferloa-knop--licht:hover { background: var(--f-goud-licht); border-color: var(--f-goud-licht); color: var(--f-donker); }
.ferloa-knop--rand-licht { background: transparent; border-color: rgba(255,255,255,.7); color: var(--f-wit); }
.ferloa-knop--rand-licht:hover { background: var(--f-wit); color: var(--f-inkt); }
.ferloa-knop--goud { background: var(--f-goud-licht); border-color: var(--f-goud-licht); color: var(--f-donker); }
.ferloa-knop--goud:hover { background: var(--f-wit); border-color: var(--f-wit); color: var(--f-donker); }
.ferloa-knop:focus-visible,
.ferloa-tegel:focus-visible,
.ferloa-gelegenheid:focus-visible,
.ferloa-formulier :is(input, select, textarea):focus-visible { outline: 2px solid var(--f-goud-licht); outline-offset: 3px; }
.ferloa-knoppen { display: flex; flex-wrap: wrap; gap: 14px; }

.ferloa-label {
	display: inline-block;
	background: var(--f-lila);
	color: var(--f-wit);
	font-size: .8rem;
	padding: .3em .9em;
	border-radius: 999px;
}
.ferloa-concept { display: inline-block; margin-top: .25rem; padding: .15em .6em; border: 1px dashed var(--f-goud); font-size: .8rem; color: var(--f-grijs); }

/* Wikkel-illustratie */
.ferloa-wikkel { position: relative; width: 200px; aspect-ratio: 4 / 5; filter: drop-shadow(0 24px 40px rgba(0,0,0,.3)); }
.ferloa-wikkel svg { display: block; width: 100%; height: 100%; }
.ferloa-wikkel img { position: absolute; left: 50%; top: 44%; width: 52%; transform: translate(-50%, -50%); }
.ferloa-wikkel span { position: absolute; left: 0; right: 0; bottom: 11%; text-align: center; font-size: .72rem; letter-spacing: .06em; color: rgba(255,255,255,.72); }

/* Tinten voor beeldvlakken */
.ferloa-tint--lila { background: #EEE7F2; }
.ferloa-tint--zand { background: #F1ECE4; }
.ferloa-tint--warm { background: linear-gradient(135deg, #5A3E2B, #2B1F1A); }
.ferloa-tint--koel { background: linear-gradient(135deg, #3A4148, #1E2226); }
.ferloa-gelegenheid.ferloa-tint--lila { background: linear-gradient(135deg, #4A2A66, #221A2C); }

/* USP-balk */
.ferloa-usp {
	display: flex; justify-content: center; flex-wrap: wrap; gap: .5rem 3.5rem;
	background: var(--f-lila); color: var(--f-wit);
	font-family: var(--f-tekst); font-size: .875rem; padding: .6rem var(--f-rand);
}
.ferloa-usp { position: relative; align-items: center; }
.ferloa-usp__punten { display: flex; justify-content: center; flex-wrap: wrap; gap: .5rem 3.5rem; }
.ferloa-usp__punten span { display: inline-flex; align-items: center; gap: .6rem; }
.ferloa-usp svg { color: var(--f-goud-licht); }
.ferloa-usp__keuzes { position: absolute; right: var(--f-rand); top: 50%; transform: translateY(-50%); display: flex; gap: .6rem; align-items: center; }
@media (max-width: 64rem) {
	.ferloa-usp { justify-content: space-between; gap: .5rem 1rem; }
	.ferloa-usp__punten span:not(:first-child) { display: none; }
	.ferloa-usp__keuzes { position: static; transform: none; }
}

/* Btw-schakelaar en dubbele prijzen (incl./excl.) */
.ferloa-btw-keuze { display: inline-flex; padding: 2px; border: 1px solid rgba(255,255,255,.35); border-radius: 999px; font-family: var(--f-tekst); font-size: .75rem; line-height: 1; }
.ferloa-btw-keuze button { appearance: none; border: 0; margin: 0; padding: .4em .85em; border-radius: 999px; background: transparent; color: inherit; font: inherit; cursor: pointer; min-height: 28px; }
.ferloa-btw-keuze button[aria-pressed="true"] { background: var(--f-goud-licht); color: var(--f-donker); }
.ferloa-btw-keuze button:focus-visible { outline: 2px solid var(--f-goud-licht); outline-offset: 2px; }
.ferloa-btw-keuze.is-los { color: var(--f-inkt); border-color: var(--f-lijn); background: var(--f-wit); }
.ferloa-btw-keuze.is-los button[aria-pressed="true"] { background: var(--f-inkt); color: var(--f-wit); }
.ferloa-p__label { font-family: var(--f-tekst); font-size: .8em; color: inherit; opacity: .8; }
.ferloa-p--excl { display: none; }
html.ferloa-excl .ferloa-p--incl { display: none; }
html.ferloa-excl .ferloa-p--excl { display: inline; }

/* Openingssectie */
.ferloa-hero {
	background: radial-gradient(ellipse 60% 70% at 72% 55%, #4A2A66 0%, #2B1F35 45%, var(--f-donker) 80%);
	color: var(--f-wit);
	overflow: hidden;
}
.ferloa-hero__binnen {
	max-width: 1440px; margin: 0 auto; padding: clamp(3rem, 8vw, 7rem) var(--f-rand);
	display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 3rem; align-items: center;
	min-height: 560px; box-sizing: border-box;
}
.ferloa-hero--pagina .ferloa-hero__binnen { min-height: 380px; padding-bottom: 7rem; }
.ferloa-hero__tekst { display: flex; flex-direction: column; gap: 1.6rem; }
.ferloa-hero__titel {
	font-family: var(--f-kop); font-weight: 500; color: var(--f-wit);
	font-size: clamp(3.2rem, 7vw, 5.8rem); line-height: .98; letter-spacing: -.01em; margin: 0;
}
.ferloa-hero__titel em { font-style: italic; color: var(--f-goud-licht); }
.ferloa-hero__tekst p { margin: 0; max-width: 30rem; font-size: 1.15rem; color: rgba(255,255,255,.8); }
.ferloa-hero__kruimels { display: block; margin: 0 0 1.25rem; }
.ferloa-hero__kruimel { font-size: .875rem; color: rgba(255,255,255,.6); text-decoration: none; }
.ferloa-hero__beeld { position: relative; height: 480px; }
.ferloa-hero--pagina .ferloa-hero__beeld { height: 320px; }
.ferloa-hero__foto { width: 100%; height: 100%; object-fit: cover; border-radius: 4px; }
.ferloa-hero__beeld .ferloa-wikkel { position: absolute; }
.ferloa-hero__beeld .is-1 { width: 42%; left: 4%; top: 28%; transform: rotate(-14deg); }
.ferloa-hero__beeld .is-2 { width: 46%; left: 44%; top: 2%; transform: rotate(6deg); z-index: 2; }
.ferloa-hero__beeld .is-3 { width: 38%; left: 36%; top: 48%; transform: rotate(18deg); z-index: 3; }
.ferloa-hero--pagina .ferloa-hero__beeld .is-1 { top: 18%; left: 10%; }
.ferloa-hero--pagina .ferloa-hero__beeld .is-2 { left: 48%; }
@media (max-width: 48rem) {
	.ferloa-hero__binnen { grid-template-columns: 1fr; min-height: 0; padding-top: 1.5rem; gap: 1.5rem; }
	.ferloa-hero__beeld { order: -1; height: 300px; }
	.ferloa-hero--pagina .ferloa-hero__beeld { display: none; }
	.ferloa-hero .ferloa-knoppen { flex-direction: column; }
}

/* Sectiekop met knop rechts */
.ferloa-sectiekop { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem 3rem; flex-wrap: wrap; margin-bottom: 3rem; }
.ferloa-sectiekop p { margin: .9rem 0 0; max-width: 34rem; color: var(--f-grijs); }

/* Productraster */
.ferloa-raster { display: grid; gap: 1.5rem; grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 64rem) { .ferloa-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem .9rem; } }
.ferloa-tegel { display: flex; flex-direction: column; gap: .15rem; color: var(--f-inkt); text-decoration: none; }
.ferloa-tegel__beeld { position: relative; aspect-ratio: 4 / 5; border-radius: 4px; overflow: hidden; display: grid; place-items: center; margin-bottom: .9rem; }
.ferloa-tegel__beeld .ferloa-wikkel { width: 52%; transform: rotate(-8deg); transition: transform .4s ease; }
.ferloa-tegel:hover .ferloa-wikkel { transform: rotate(-3deg) scale(1.04); }
.ferloa-tegel__beeld .ferloa-label { position: absolute; left: 1rem; top: 1rem; z-index: 2; }
.ferloa-tegel__foto { width: 100%; height: 100%; object-fit: cover; }
.ferloa-tegel__titel { font-weight: 500; }
.ferloa-tegel__sub { font-size: .875rem; color: var(--f-grijs); }
.ferloa-tegel__prijs { margin-top: .35rem; }

/* Donkere abonnementenband */
.ferloa-band { background: var(--f-donker); color: var(--f-wit); }
.ferloa-band__binnen { max-width: 1440px; margin: 0 auto; padding: clamp(4rem, 8vw, 7rem) var(--f-rand); box-sizing: border-box; }
.ferloa-band .ferloa-kop { color: var(--f-wit); }
.ferloa-band .ferloa-sectiekop p { color: rgba(255,255,255,.75); }
.ferloa-band__plannen { display: grid; gap: 1.5rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 56rem) { .ferloa-band__plannen { grid-template-columns: 1fr; } }
.ferloa-bandplan { padding: 2.2rem 2rem; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.14); border-radius: 4px; display: flex; flex-direction: column; gap: .5rem; }
.ferloa-bandplan.is-uitgelicht { border-color: var(--f-goud-licht); }
.ferloa-bandplan__kop { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; font-size: .875rem; color: rgba(255,255,255,.7); }
.ferloa-bandplan__naam { font-family: var(--f-kop); font-size: 2.75rem; line-height: 1; color: var(--f-wit); }
.ferloa-bandplan__regel { display: flex; align-items: baseline; gap: .6rem; margin-top: .6rem; color: rgba(255,255,255,.85); }
.ferloa-bandplan__getal { font-family: var(--f-kop); font-size: 2.25rem; line-height: 1; color: var(--f-wit); }
.ferloa-bandplan__getal.is-goud { font-size: 3.75rem; color: var(--f-goud-licht); }
.ferloa-bandplan p { margin: 0; font-size: .95rem; color: rgba(255,255,255,.72); }
.ferloa-bandplan .woocommerce-Price-amount { color: inherit; }

/* Gelegenheden */
.ferloa-gelegenheden { display: grid; gap: 1.5rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 56rem) { .ferloa-gelegenheden { grid-template-columns: 1fr; } }
.ferloa-gelegenheid {
	position: relative; min-height: 460px; border-radius: 4px; overflow: hidden; isolation: isolate;
	display: flex; flex-direction: column; justify-content: flex-end; padding: 1.75rem;
	color: var(--f-wit); text-decoration: none;
}
@media (max-width: 56rem) { .ferloa-gelegenheid { min-height: 260px; } }
.ferloa-gelegenheid::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(20,16,24,0) 35%, rgba(20,16,24,.85) 100%); }
.ferloa-gelegenheid__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .6s ease; }
.ferloa-gelegenheid:hover .ferloa-gelegenheid__foto { transform: scale(1.04); }
.ferloa-gelegenheid__hint { position: absolute; top: 1.25rem; left: 1.75rem; font-size: .8rem; color: rgba(255,255,255,.6); }
.ferloa-gelegenheid__titel { font-family: var(--f-kop); font-size: 2.1rem; line-height: 1.1; }
.ferloa-gelegenheid__sub { margin-top: .25rem; font-size: .95rem; color: rgba(255,255,255,.8); }

/* Vertrouwenspunten: band over de volle breedte met een gecentreerde container. */
.ferloa-vertrouwen-band { background: var(--f-wit); border-top: 1px solid var(--f-lijn); border-bottom: 1px solid var(--f-lijn); padding: 2.5rem var(--f-rand); margin-top: 0; }
.ferloa-vertrouwen-band .ferloa-vertrouwen {
	list-style: none !important; margin: 0 auto !important; padding: 0 !important; max-width: 1312px;
	display: grid; gap: 2rem 2.5rem; grid-template-columns: repeat(4, minmax(0, 1fr));
}
.ferloa-vertrouwen li { display: flex; gap: .9rem; align-items: flex-start; margin: 0 !important; max-width: none; list-style: none; }
.ferloa-vertrouwen li::before, .ferloa-vertrouwen li::marker { content: none; }
.ferloa-vertrouwen svg { flex-shrink: 0; color: var(--f-goud); margin-top: 2px; }
.ferloa-vertrouwen strong { display: block; font-weight: 500; line-height: 1.35; }
.ferloa-vertrouwen span { display: block; margin-top: .2rem; font-size: .875rem; line-height: 1.45; color: var(--f-grijs); }
@media (max-width: 64rem) { .ferloa-vertrouwen-band .ferloa-vertrouwen { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem 2rem; } }
@media (max-width: 30rem) { .ferloa-vertrouwen-band { padding: 2rem var(--f-rand); } .ferloa-vertrouwen-band .ferloa-vertrouwen { grid-template-columns: 1fr; gap: 1.25rem; } }

/* Abonnementenpagina: kaarten liggen deels over de openingssectie */
.ferloa-plannen.is-overlap { margin-top: -5rem; position: relative; z-index: 2; }
.ferloa-plannen { display: grid; gap: 1.5rem; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
@media (max-width: 56rem) { .ferloa-plannen { grid-template-columns: 1fr; } }
.ferloa-plan { background: var(--f-wit); border: 1px solid var(--f-lijn); border-radius: 4px; padding: 2rem 2rem .6rem; display: flex; flex-direction: column; }
.ferloa-plan.is-uitgelicht { border-color: var(--f-goud-licht); box-shadow: 0 24px 48px rgba(65,30,99,.12); }
.ferloa-plan .ferloa-label { align-self: flex-start; margin-bottom: .6rem; }
.ferloa-plan__naam { font-family: var(--f-kop); font-weight: 500; font-size: 3.25rem; line-height: 1; margin: 0; }
.ferloa-plan__omdozen { margin: .4rem 0 .9rem; color: var(--f-grijs); }
.ferloa-plan__regel { padding: 1.4rem 0; border-top: 1px solid var(--f-lijn); scroll-margin-top: 7rem; }
.ferloa-plan__variant { display: flex; justify-content: space-between; gap: 1rem; margin: 0; font-weight: 500; }
.ferloa-plan__variant span:last-child { font-weight: 400; font-size: .875rem; color: var(--f-grijs); }
.ferloa-plan__prijs { margin: .3rem 0 0; font-family: var(--f-kop); font-size: 2.5rem; line-height: 1.1; }
.ferloa-plan__prijs span { font: inherit; color: inherit; }
.ferloa-plan__prijs .ferloa-p__eenheid { font-family: var(--f-tekst); font-size: .95rem; color: var(--f-grijs); }
.ferloa-plan__detail { margin: .2rem 0 .9rem; font-size: .875rem; color: var(--f-grijs); }
.ferloa-voetnoot { margin-top: 1.25rem; font-size: .95rem; color: var(--f-grijs); }

/* Binnenkort */
.ferloa-binnenkort { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 4rem; align-items: center; }
@media (max-width: 48rem) { .ferloa-binnenkort { grid-template-columns: 1fr; } }
.ferloa-binnenkort p { margin: 1rem 0 0; color: var(--f-grijs); max-width: 30rem; }
.ferloa-binnenkort__vlak {
	min-height: 220px; border-radius: 4px; background: linear-gradient(120deg, #EEE7F2, #F6F1E8);
	display: grid; place-items: center; text-align: center; padding: 1rem;
	font-family: var(--f-kop); font-style: italic; font-size: clamp(1.8rem, 3vw, 2.5rem); color: var(--f-lila);
}

/* Productkaart en keuzeblok (productpagina's, [ferloa_producten]) */
.ferloa-producten { display: grid; gap: clamp(1.5rem, 4vw, 3rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr)); }
.ferloa-product__beeld { margin-bottom: 1.25rem; }
.ferloa-product__foto { width: 100%; height: auto; display: block; border-radius: 4px; }
.ferloa-beeldvak { aspect-ratio: 4 / 3; display: grid; place-items: center; border-radius: 4px; }
.ferloa-beeldvak .ferloa-wikkel { width: 34%; transform: rotate(-8deg); }
.ferloa-product__naam { font-family: var(--f-kop); font-weight: 500; font-size: clamp(1.8rem, 3vw, 2.25rem); margin: 0 0 .25rem; color: var(--f-inkt); }
.ferloa-product__maat { margin: 0 0 1.25rem; color: var(--f-grijs); }
.ferloa-keuze { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--f-inkt); }
.ferloa-keuze__optie { padding: 1.25rem 1.25rem 1.5rem 0; }
.ferloa-keuze__optie--abo { padding-left: 1.25rem; border-left: 1px solid var(--f-lijn); }
.ferloa-keuze__soort { margin: 0; font-size: .9rem; color: var(--f-grijs); }
.ferloa-keuze__aantal { margin: .1rem 0 0; font-family: var(--f-kop); font-weight: 500; font-size: clamp(2.8rem, 6vw, 3.6rem); line-height: 1; color: var(--f-inkt); }
.ferloa-keuze__eenheid { margin: .25rem 0 .75rem; }
.ferloa-keuze__prijs { margin: 0 0 1rem; }
@media (max-width: 30rem) {
	.ferloa-keuze { grid-template-columns: 1fr; }
	.ferloa-keuze__optie--abo { padding-left: 0; border-left: 0; border-top: 1px solid var(--f-lijn); }
}

/* Voordelen (alleen bevestigde claims) */
.ferloa-voordelen { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); }
.ferloa-voordelen li { border-top: 1px solid var(--f-goud); padding-top: 1rem; }
.ferloa-icoon { color: var(--f-goud); }
.ferloa-voordelen__titel { margin: .5rem 0 .25rem; font-weight: 500; }
.ferloa-voordelen p:last-child { margin: 0; color: var(--f-grijs); font-size: .95rem; }

/* Uitleg abonnement in winkelwagen/checkout/product */
.ferloa-uitleg { background: var(--f-wit); border: 1px solid var(--f-lijn); border-top: 3px solid var(--f-lila); border-radius: 4px; padding: 1rem 1.25rem; margin: 0 0 1.5rem; }
.ferloa-uitleg__kop { font-weight: 500; margin: 0 0 .5rem; }
.ferloa-uitleg ul { margin: 0; padding-left: 1.1rem; }
.ferloa-uitleg li { margin-bottom: .3rem; }
.ferloa-doorverwijzing { margin: 1rem 0; padding: .75rem 0; border-top: 1px solid var(--f-lijn); border-bottom: 1px solid var(--f-lijn); }

/* Formulieren */
.ferloa-formulier { max-width: 36rem; }
.ferloa-veld { margin: 0 0 1rem; }
.ferloa-veld label { display: block; margin-bottom: .3rem; font-weight: 500; }
.ferloa-formulier :is(input, select, textarea) { width: 100%; padding: .75em .9em; border: 1px solid #B9B2A6; border-radius: 4px; background: var(--f-wit); font: inherit; color: var(--f-inkt); box-sizing: border-box; }
.ferloa-hint { display: block; margin-top: .25rem; font-size: .85rem; color: var(--f-grijs); }
.ferloa-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ferloa-melding { max-width: 36rem; padding: .8rem 1rem; margin-bottom: 1.25rem; border: 1px solid; border-radius: 4px; }
.ferloa-melding.is-ok { border-color: #5E7F5A; background: #F1F5EF; }
.ferloa-melding.is-fout { border-color: #9B3B32; background: #FBF0EE; }

@media (prefers-reduced-motion: reduce) {
	.ferloa-tegel__beeld .ferloa-wikkel, .ferloa-gelegenheid__foto { transition: none; }
	.ferloa-tegel:hover .ferloa-wikkel { transform: rotate(-8deg); }
}

/* Paginasecties (Gutenberg-groepen met deze klassen) */
.ferloa-sectie { max-width: 1440px; margin-left: auto; margin-right: auto; padding: clamp(4rem, 8vw, 7rem) var(--f-rand); box-sizing: border-box; }
.ferloa-sectie.is-kort-boven { padding-top: 0; }
.ferloa-sectie > * + * { margin-top: 0; }
.ferloa-sectiekop > .wp-block-group { margin: 0; }
.ferloa-kolommen { gap: 3rem; }
.ferloa-kolommen .wp-block-column { border-top: 1px solid var(--f-goud); padding-top: 1.5rem; }
.ferloa-kolommen h3 { font-family: var(--f-kop); font-weight: 500; font-size: 1.9rem; margin: 0 0 .6rem; }
.ferloa-kolommen p { color: var(--f-grijs); margin: 0; }

/* Klassieke thema's (XStore) wikkelen groepsblokken in een extra container; laat die meedoen in de opmaak. */
:is(.ferloa-sectie, .ferloa-sectiekop, .ferloa-sectiekop__tekst) > .wp-block-group__inner-container { display: contents; }

/* Vijf gelegenheden (flyer): desktop 5 naast elkaar, tablet 3, mobiel veegbaar. */
.ferloa-gelegenheden.is-vijf { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; }
.ferloa-gelegenheden.is-vijf .ferloa-gelegenheid { min-height: 380px; padding: 1.25rem; }
.ferloa-gelegenheden.is-vijf .ferloa-gelegenheid__titel { font-size: 1.6rem; }
.ferloa-gelegenheden.is-vijf .ferloa-gelegenheid__sub { font-size: .85rem; }
@media (max-width: 72rem) { .ferloa-gelegenheden.is-vijf { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 48rem) {
	.ferloa-gelegenheden.is-vijf { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: .75rem; padding-bottom: .5rem; margin-right: calc(-1 * var(--f-rand)); padding-right: var(--f-rand); }
	.ferloa-gelegenheden.is-vijf .ferloa-gelegenheid { flex: 0 0 72%; min-height: 320px; scroll-snap-align: start; }
}

/* Noot onder de abonnementenband. */
.ferloa-band__noot { margin: 1.75rem 0 0; font-size: .85rem; color: rgba(255,255,255,.65); max-width: none; }
.ferloa-band__noot a { color: var(--f-goud-licht); }

/* Over Ferloa + Binnenkort (flyer). */
.ferloa-over-binnenkort { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2.5rem 4rem; align-items: center; }
@media (max-width: 48rem) { .ferloa-over-binnenkort { grid-template-columns: 1fr; } }
.ferloa-over p { margin: 1rem 0 0; color: var(--f-grijs); max-width: 32rem; }
.ferloa-over .ferloa-over__eco { color: var(--f-lila); }
.ferloa-over-binnenkort .ferloa-binnenkort { display: block; padding: 2.25rem 2.5rem; border-radius: 4px; background: linear-gradient(120deg, #EEE7F2, #F6F1E8); }
.ferloa-over-binnenkort .ferloa-binnenkort p { margin: 0; max-width: none; }
.ferloa-binnenkort__label { font-family: var(--f-kop); font-size: 1.35rem; color: var(--f-lila) !important; }
.ferloa-binnenkort__titel { margin-top: .9rem !important; font-family: var(--f-kop); font-size: clamp(1.7rem, 3vw, 2.3rem); line-height: 1.12; color: var(--f-lila) !important; }
.ferloa-binnenkort__sub { margin-top: 1.1rem !important; font-size: .9rem; }

/* Uitleg abonnement, akkoordvak en verzendhint. */
.ferloa-uitleg { border: 1px solid var(--f-lijn); background: var(--f-wit); padding: 1.1rem 1.4rem; margin: 0 0 1.5rem; border-radius: 4px; }
.ferloa-uitleg__kop { font-weight: 500; margin: 0 0 .5rem; }
.ferloa-uitleg ul { margin: 0; padding-left: 1.1rem; }
.ferloa-uitleg li { margin: .25rem 0; font-size: .95rem; }
.ferloa-akkoord { margin: 0 0 1rem !important; padding: .9rem 1rem; background: #FFFBEF; border: 1px solid #E8DCC0; border-radius: 4px; }
.ferloa-verzendhint { font-size: .9rem; color: var(--f-grijs); }

/* Mijn account → Abonnementen. */
.ferloa-mijn-abo { border: 1px solid var(--f-lijn); border-radius: 4px; padding: 1.25rem 1.5rem; margin-bottom: 1.5rem; background: var(--f-wit); }
.ferloa-mijn-abo dl { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1.25rem; margin: 0 0 1rem; }
.ferloa-mijn-abo dt { color: var(--f-grijs); }
.ferloa-mijn-abo dd { margin: 0; }

/* Hero met foto: foto vult de rechterkant tot de rand en loopt links zacht over in het donker. */
.ferloa-hero:has(.ferloa-hero__foto) { position: relative; overflow: hidden; }
.ferloa-hero:has(.ferloa-hero__foto) .ferloa-hero__beeld { position: absolute; top: 0; right: 0; bottom: 0; width: 58%; height: auto; }
.ferloa-hero__foto { width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; border-radius: 0;
	-webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.55) 22%, #000 48%); mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.55) 22%, #000 48%); }
.ferloa-hero:has(.ferloa-hero__foto) .ferloa-hero__tekst { position: relative; z-index: 2; }
@media (max-width: 48rem) {
	.ferloa-hero:has(.ferloa-hero__foto) .ferloa-hero__beeld { position: relative; width: auto; height: 260px; margin: 0 calc(-1 * var(--f-rand)); order: -1; }
	.ferloa-hero__foto { -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent 100%); mask-image: linear-gradient(180deg, #000 60%, transparent 100%); }
}

/* Vaste kop: lila balk + header blijven samen bovenaan staan bij scrollen.
   De hoogte van de balk meet een klein script (--ferloa-usp-h); de beheerbalk van WordPress telt mee. */
:root { --ferloa-ab: 0px; --ferloa-usp-h: 34px; }
body.admin-bar { --ferloa-ab: 32px; }
@media (max-width: 782px) { body.admin-bar { --ferloa-ab: 46px; } }
@media (max-width: 600px) { body.admin-bar { --ferloa-ab: 0px; } } /* daar scrolt de beheerbalk mee */
.template-container { overflow: visible !important; overflow-x: clip !important; }
.ferloa-usp { position: sticky; top: var(--ferloa-ab); z-index: 1001; }
#header.site-header { position: sticky !important; top: calc(var(--ferloa-ab) + var(--ferloa-usp-h)); z-index: 1000; }
#header.site-header .header-main { box-shadow: 0 1px 0 rgba(255,255,255,.06); }

/* Losse foto in een pagina (Zakelijk, Over Ferloa, Contact). */
.ferloa-beeld { margin: 0; border-radius: 4px; overflow: hidden; }
.ferloa-beeld img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ferloa-tekst-beeld { align-items: center !important; gap: 3rem !important; margin-bottom: 2rem; }
.ferloa-tekst-beeld > .wp-block-column:last-child { max-width: 460px; }
@media (max-width: 48rem) { .ferloa-tekst-beeld > .wp-block-column:last-child { max-width: none; } }

/* Taalkeuze NL | EN, zelfde vorm als de btw-schakelaar. */
.ferloa-taal-keuze { display: inline-flex; padding: 2px; border: 1px solid rgba(255,255,255,.35); border-radius: 999px; font-family: var(--f-tekst); font-size: .75rem; line-height: 1; }
.ferloa-taal-keuze a { padding: .4em .7em; border-radius: 999px; color: inherit; text-decoration: none; min-height: 28px; display: inline-flex; align-items: center; }
.ferloa-taal-keuze a[aria-current] { background: var(--f-wit); color: var(--f-donker); }
.ferloa-taal-keuze a:focus-visible { outline: 2px solid var(--f-goud-licht); outline-offset: 2px; }
@media (max-width: 30rem) { .ferloa-usp { flex-wrap: wrap; } .ferloa-usp__keuzes { gap: .4rem; } }

/* Keuzelijsten: XStore geeft select een vaste hoogte, waardoor tekst half wegvalt. Overal gelijk aan de tekstvelden,
   met een eigen pijltje (XStore zet appearance: none zonder pijl). */
body select:not([multiple]):not([size]) {
	height: auto !important; min-height: 3rem; line-height: 1.4 !important; padding: .7rem 2.6rem .7rem 1rem !important;
	-webkit-appearance: none; appearance: none; box-sizing: border-box; text-overflow: ellipsis;
	background-color: #fff;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%232B2630' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important; background-position: right 1rem center !important; background-size: 12px 8px !important;
}
body select::-ms-expand { display: none; }
/* Sorteren in de winkel: compacter. */
body .woocommerce-ordering select { min-height: 2.6rem; padding-top: .45rem !important; padding-bottom: .45rem !important; }
/* Select2 (land bij afrekenen) dezelfde hoogte. */
body .select2-container .select2-selection--single { height: auto !important; min-height: 3rem; display: flex; align-items: center; }
body .select2-container .select2-selection--single .select2-selection__rendered { line-height: 1.4 !important; padding: .7rem 2.6rem .7rem 1rem !important; }
body .select2-container .select2-selection--single .select2-selection__arrow { height: 100% !important; right: .6rem; }
/* Tekstvelden in formulieren even hoog als de keuzelijsten (XStore: vaste hoogte, te krap voor de tekst). */
:is(form.ferloa-formulier, form.checkout, form.woocommerce-form, form.woocommerce-EditAccountForm, form.lost_reset_password, .woocommerce-address-fields, form.woocommerce-cart-form .coupon, .checkout_coupon)
	input:is([type=text], [type=email], [type=tel], [type=password], [type=number]:not(.qty), [type=url], [type=search], :not([type])) {
	height: auto !important; min-height: 3rem; line-height: 1.4 !important; padding: .7rem 1rem !important; box-sizing: border-box;
}

/* Cookiebalk */
.ferloa-cookies { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 100000; display: flex; justify-content: center; pointer-events: none; }
.ferloa-cookies[hidden] { display: none; }
.ferloa-cookies__binnen { pointer-events: auto; width: 100%; max-width: 46rem; background: var(--f-wit, #fff); color: var(--f-inkt, #2B2630); border: 1px solid var(--f-lijn, #E6E0D6); border-radius: 14px; box-shadow: 0 12px 40px rgba(20, 16, 24, .18); padding: 1.25rem 1.4rem; font-size: 1rem; line-height: 1.5; max-height: calc(100vh - 32px); overflow-y: auto; }
.ferloa-cookies__kop { font-family: var(--f-kop, inherit); font-size: 1.25rem; margin: 0 0 .4rem; }
.ferloa-cookies__tekst { margin: 0 0 1rem; }
.ferloa-cookies__tekst a { color: inherit; text-decoration: underline; }
.ferloa-cookies__keuzes { display: grid; gap: .6rem; margin: 0 0 1rem; }
.ferloa-cookies__keuzes[hidden] { display: none; }
.ferloa-cookies__optie { display: flex; gap: .7rem; align-items: flex-start; padding: .7rem .8rem; border: 1px solid var(--f-lijn, #E6E0D6); border-radius: 10px; cursor: pointer; }
.ferloa-cookies__optie input { margin-top: .3rem; width: 1.1rem; height: 1.1rem; flex: none; accent-color: var(--f-donker, #1E1A22); }
.ferloa-cookies__optie strong { display: block; }
.ferloa-cookies__knoppen { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: flex-end; }
.ferloa-cookies__knop { appearance: none; border: 1px solid var(--f-donker, #1E1A22); background: var(--f-donker, #1E1A22); color: #fff; border-radius: 999px; padding: .7rem 1.3rem; font: inherit; font-size: .95rem; font-weight: 500; cursor: pointer; text-transform: none; letter-spacing: 0; min-height: 44px; }
.ferloa-cookies__knop.is-licht { background: transparent; color: var(--f-donker, #1E1A22); }
.ferloa-cookies__knop[hidden] { display: none; }
.ferloa-cookies__knop:focus-visible { outline: 2px solid var(--f-goud-licht, #C9A961); outline-offset: 2px; }
@media (max-width: 30rem) {
	.ferloa-cookies { left: 8px; right: 8px; bottom: 8px; }
	.ferloa-cookies__binnen { padding: 1rem; }
	.ferloa-cookies__knoppen { flex-direction: column-reverse; }
	.ferloa-cookies__knop { width: 100%; }
}
.ferloa-footer__regel a { color: inherit; text-decoration: underline; margin-left: .5rem; }

/* Suggesties bij het afrekenen */
.ferloa-suggestie-rij td { padding-top: 1rem !important; border-top: 1px solid var(--f-lijn); }
.ferloa-suggestie__kop { font-weight: 500; margin: 0 0 .6rem; }
.ferloa-suggestie { display: flex; align-items: center; gap: .8rem; padding: .5rem 0; }
.ferloa-suggestie img { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; flex: none; }
.ferloa-suggestie__naam { flex: 1; font-size: .95rem; line-height: 1.35; }
.ferloa-suggestie__prijs { display: block; color: var(--f-grijs); font-size: .9rem; }
.ferloa-suggestie__knop { flex: none; border: 1px solid var(--f-donker); border-radius: 999px; padding: .5rem .9rem; font-size: .9rem; color: var(--f-donker); text-decoration: none; white-space: nowrap; min-height: 40px; display: inline-flex; align-items: center; }
.ferloa-suggestie__knop:hover { background: var(--f-donker); color: #fff; }
.ferloa-suggestie__knop.loading { opacity: .6; pointer-events: none; }
.ferloa-suggestie .added_to_cart { display: none; }
.ferloa-betaaluitleg { background: var(--f-papier); border: 1px solid var(--f-lijn); border-radius: 10px; padding: .9rem 1rem; margin: 0 0 1rem; font-size: .95rem; line-height: 1.5; }
.woocommerce-checkout-review-order-table input.qty, .et-mini-cart input.qty, .woocommerce-mini-cart input.qty { line-height: 1.2 !important; padding-top: 0 !important; padding-bottom: 0 !important; }

/* Vertrouwensbalk: punten gecentreerd in hun kolom (en de balk als geheel in het midden). */
.ferloa-vertrouwen-band .ferloa-vertrouwen { justify-items: center; }
.ferloa-vertrouwen-band .ferloa-vertrouwen li { width: max-content; max-width: 100%; text-align: left; }
.ferloa-vertrouwen-band .ferloa-vertrouwen span { color: var(--f-grijs) !important; }
@media (max-width: 30rem) {
	.ferloa-vertrouwen-band .ferloa-vertrouwen { justify-items: stretch; width: max-content; max-width: 100%; margin-inline: auto; }
	.ferloa-vertrouwen-band .ferloa-vertrouwen li { width: auto; }
}

/* Basis zonder gerolde doekjes */
.ferloa-bandplan__alleen { margin-top: 1.4rem; font-size: .9rem; opacity: .7; font-style: italic; }
.ferloa-plan__regel--leeg .ferloa-plan__detail { font-style: italic; }
/* Desktop: de vier punten als groep exact in het midden. */
@media (min-width: 64.01rem) {
	.ferloa-vertrouwen-band .ferloa-vertrouwen { display: flex; flex-wrap: wrap; justify-content: center; column-gap: clamp(2.5rem, 5vw, 6rem); }
}

/* Meldingen als pop-up met tijdbalk */
.ferloa-melding-verborgen { display: none !important; }
.ferloa-toasts { position: fixed; z-index: 100001; top: calc(var(--ferloa-ab, 0px) + var(--ferloa-usp-h, 34px) + 88px); right: 20px; width: min(420px, calc(100vw - 32px)); display: flex; flex-direction: column; gap: 12px; pointer-events: none; }
.ferloa-toast { pointer-events: auto; position: relative; overflow: hidden; display: grid; grid-template-columns: auto 1fr auto; gap: .85rem; align-items: start; background: var(--f-wit); color: var(--f-inkt); border: 1px solid var(--f-lijn); border-radius: 14px; box-shadow: 0 18px 48px rgba(20, 16, 24, .18), 0 2px 6px rgba(20, 16, 24, .06); padding: 1rem 1rem 1.15rem 1.1rem; font-size: .95rem; line-height: 1.5; opacity: 0; transform: translateX(24px) scale(.98); transition: opacity .3s ease, transform .35s cubic-bezier(.2, .8, .2, 1); }
.ferloa-toast.is-zichtbaar { opacity: 1; transform: none; }
.ferloa-toast.is-weg { opacity: 0; transform: translateX(24px); }
.ferloa-toast__icoon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; }
.ferloa-toast.is-fout .ferloa-toast__icoon { background: #FBEAEA; color: #A3261E; }
.ferloa-toast.is-gelukt .ferloa-toast__icoon { background: #F3EEE2; color: #8A7340; }
.ferloa-toast.is-info .ferloa-toast__icoon { background: #EFE9F5; color: var(--f-lila); }
.ferloa-toast__kop { margin: .1rem 0 .15rem; font-weight: 600; font-size: .95rem; }
.ferloa-toast__tekst { color: var(--f-grijs); }
.ferloa-toast__tekst a, .ferloa-toast__link { color: var(--f-inkt); text-decoration: underline; text-underline-offset: 2px; font-weight: 500; }
.ferloa-toast__link { display: inline-block; margin-left: .25rem; }
.ferloa-toast__sluit { appearance: none; background: transparent; border: 0; color: var(--f-grijs); font-size: 1.4rem; line-height: 1; width: 32px; height: 32px; border-radius: 50%; cursor: pointer; padding: 0; margin: -.2rem -.3rem 0 0; }
.ferloa-toast__sluit:hover { background: var(--f-papier); color: var(--f-inkt); }
.ferloa-toast__sluit:focus-visible { outline: 2px solid var(--f-goud-licht); }
.ferloa-toast__balk { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(0, 0, 0, .06); }
.ferloa-toast__balk span { display: block; height: 100%; transform-origin: left center; }
.ferloa-toast.is-fout .ferloa-toast__balk span { background: #A3261E; }
.ferloa-toast.is-gelukt .ferloa-toast__balk span { background: var(--f-goud); }
.ferloa-toast.is-info .ferloa-toast__balk span { background: var(--f-lila); }
/* XStore's eigen kleine melding niet meer tonen. */
.et-notify { display: none !important; }
@media (max-width: 48rem) {
	.ferloa-toasts { top: auto; bottom: 16px; right: 16px; left: 16px; width: auto; }
	.ferloa-toast { transform: translateY(16px); }
	.ferloa-toast.is-weg { transform: translateY(16px); }
}
@media (prefers-reduced-motion: reduce) { .ferloa-toast { transition: opacity .2s; transform: none; } }