/* Chocolaterie Fleur — Homepage (front-page).
   1:1 op Figma-frame 520:2589. Alles gescoped onder .fleur-home / body.home
   zodat niets site-wide lekt. Tokens uit fonts.css (:root). Nieuw token:
   --fleur-pink-light (#f6bddd) = het lichte roze uit het design (knoppen,
   roze banden, cursieve accenten). */

.fleur-home {
	--fleur-pink-light: #f6bddd;
	--fleur-radius-card: 5px;
	overflow-x: clip;
	background: var(--fleur-cream);   /* pagina-achtergrond grijs/cream (Figma #f5f5f5) */
}

/* Op de homepage sluit de roze workshops-band direct aan op de paarse footer
   (geen witruimte ertussen — Figma). De footer is de directe buur van <main>. */
.fleur-home + .fleur-footer { margin-top: 0; }

/* Gedeelde sectie-koptitel (DM Serif). Accentwoorden = {…} → <em>. */
.fleur-home .fleur-section-title {
	font-family: var(--fleur-font-serif);
	font-weight: 400;
	line-height: 1.1;
	margin: 0 0 32px;
}
.fleur-home .fleur-section-title em {
	font-style: italic;
	color: var(--fleur-pink-light);
}

/* Eyebrow (klein label boven een titel). */
.fleur-home .fleur-eyebrow {
	font-family: var(--fleur-font-sans);
	font-weight: 700;
	font-size: 16px;
	margin: 0 0 8px;
	color: var(--fleur-pink-light); /* Figma: eyebrows soft-pink #f6bddd */
}
.fleur-home .fleur-eyebrow--light { color: var(--fleur-pink-light); }

/* ---- Knopvarianten (bovenop .sellabees-btn uit main.css) ---- */
.fleur-home .fleur-btn--soft {
	background: var(--fleur-pink-light);
	color: var(--fleur-pink); /* Figma: label dark-rose #e06283 op de soft-pink knop */
}
.fleur-home .fleur-btn--soft:hover { color: var(--fleur-pink); }

.fleur-home .fleur-btn--ghost {
	background: transparent;
	color: var(--fleur-cream);
	border: 2px solid var(--fleur-cream);
}
.fleur-home .fleur-btn--ghost:hover { background: var(--fleur-cream); color: var(--fleur-aubergine); filter: none; }

.fleur-home .fleur-btn--dark {
	background: var(--fleur-aubergine);
	color: var(--fleur-cream);
}
.fleur-home .fleur-btn--dark:hover { color: var(--fleur-cream); }

.fleur-home .fleur-btn--pink {
	background: var(--fleur-pink-light);
	color: var(--fleur-aubergine);
}
.fleur-home .fleur-btn--pink:hover { color: var(--fleur-aubergine); }

.fleur-home .fleur-btn--pink-outline {
	background: transparent;
	color: var(--fleur-pink-light);
	border: 2px solid var(--fleur-pink-light);
}
.fleur-home .fleur-btn--pink-outline:hover { background: var(--fleur-pink-light); color: var(--fleur-aubergine); filter: none; }

/* Outline-knoppen (ghost/pink-outline) hebben een 2px border. Met box-sizing:
   border-box + auto-hoogte telt die border BOVENOP → ze werden 4px hoger dan de
   gevulde knoppen (47 vs 43px). Compenseer de border in de padding (14→12 verticaal,
   26→24 horizontaal) zodat zowel de hoogte als de tekst-inset exact gelijk zijn. */
.fleur-home .fleur-btn--ghost,
.fleur-home .fleur-btn--pink-outline {
	padding: 12px 24px;
}

/* ===================================================================
   HERO (520:2627) — full-bleed chocoladefoto + 20% donkere overlay
   =================================================================== */
.fleur-home .fleur-hero {
	position: relative;
	background: #2c2024 center/cover no-repeat;
	color: var(--fleur-cream);
	min-height: 521px;
	display: flex;
	align-items: center;
}
.fleur-home .fleur-hero__overlay {
	position: absolute; inset: 0;
	background: rgba(0, 0, 0, .2);
	pointer-events: none;
}
.fleur-home .fleur-hero__inner {
	position: relative;
	width: 100%;
	padding-top: 88px;
	padding-bottom: 88px;
}
.fleur-home .fleur-hero__title {
	font-family: var(--fleur-font-serif);
	font-weight: 400;
	color: var(--fleur-cream);
	font-size: clamp(40px, 4.4vw, 65px);
	line-height: 1.15;
	margin: 0 0 18px;
	max-width: 900px;
}
.fleur-home .fleur-hero__title em { font-style: italic; }
.fleur-home .fleur-hero__sub {
	font-size: 16px;
	margin: 0 0 28px;
	color: var(--fleur-cream);
}
.fleur-home .fleur-hero__actions { display: flex; flex-wrap: wrap; gap: 16px; }
.fleur-home .fleur-hero__actions .sellabees-btn { padding: 18px 30px; font-size: 15px; }

/* ===================================================================
   USP-balk (520:2591) — aubergine band, 3 USP's met check
   =================================================================== */
.fleur-home .fleur-usps {
	background: var(--fleur-aubergine);
	color: var(--fleur-cream);
}
.fleur-home .fleur-usps__inner {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;        /* links groeperen zoals het design (niet space-between) */
	gap: 20px clamp(48px, 7vw, 104px);
	padding-top: 13px;
	padding-bottom: 13px;
}
.fleur-home .fleur-usps__item {
	display: flex;
	align-items: center;
	gap: 10px;
}
.fleur-home .fleur-usps__check {
	display: inline-flex;
	width: 22px; height: 22px;
	flex: 0 0 22px;
	color: var(--fleur-cream);
}
.fleur-home .fleur-usps__check svg { width: 100%; height: 100%; fill: currentColor; }
.fleur-home .fleur-usps__text {
	font-family: var(--fleur-font-sans);
	font-weight: 900;
	font-size: 14px;
	color: var(--fleur-cream);
}

/* ===================================================================
   TOPPERS (520:2634) — 4 productkaarten op wit/cream
   =================================================================== */
.fleur-home .fleur-toppers {
	background: var(--fleur-cream);
	padding-top: 96px;
	padding-bottom: 64px;
}
.fleur-home .fleur-toppers__title { font-size: clamp(30px, 3vw, 36px); color: #000; }
.fleur-home .fleur-toppers__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}
.fleur-home .fleur-card { display: flex; flex-direction: column; }
.fleur-home .fleur-card__media {
	display: block;
	aspect-ratio: 299 / 287;
	border-radius: var(--fleur-radius-card);
	overflow: hidden;
	background: var(--fleur-cream);
}
.fleur-home .fleur-card__media img { width: 100%; height: 100%; object-fit: cover; }
.fleur-home .fleur-card__body {
	display: flex;
	align-items: flex-start;   /* winkelwagen-knopje vast bovenaan (bij de titel), niet gecentreerd/onderaan */
	justify-content: space-between;
	gap: 12px;
	padding-top: 12px;
}
.fleur-home .fleur-card__title {
	font-family: var(--fleur-font-serif);
	font-weight: 400;
	font-size: 16px;
	line-height: 1.2;
	color: #000;
	margin: 0 0 4px;
}
.fleur-home .fleur-card__title a { color: inherit; }
.fleur-home .fleur-card__title a:hover { color: var(--fleur-pink); }
.fleur-home .fleur-card__price {
	font-family: var(--fleur-font-sans);
	font-weight: 400;
	font-size: 14px;
	color: #000;
	margin: 0;
}
.fleur-home .fleur-card__add {
	flex: 0 0 42px;
	width: 42px; height: 41px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 8px;
	background: var(--fleur-pink-light);
	color: var(--fleur-cream);
	transition: filter .15s ease;
}
.fleur-home .fleur-card__add:hover { filter: brightness(.94); color: var(--fleur-cream); }
.fleur-home .fleur-card__add svg { width: 20px; height: 17px; fill: currentColor; }

/* ===================================================================
   COLLECTIE (520:2590) — roze band met 4 hoge categorie-tegels
   =================================================================== */
/* Achtergrond: roze band bovenaan, grijs/cream onderaan (Figma 520:2590 —
   de roze band stopt ~62% en de tegels vallen door op het grijs). */
.fleur-home .fleur-collectie {
	position: relative;
	background: transparent;
	padding-top: 56px;
	padding-bottom: 96px;
}
.fleur-home .fleur-collectie::before {
	content: "";
	position: absolute;
	left: 0; right: 0; top: 0;
	height: 62%;
	background: var(--fleur-pink-light);
	z-index: 0;
}
.fleur-home .fleur-collectie > .sellabees-container { position: relative; z-index: 1; }

/* Kop: titel links, pijl-knoppen rechts. */
.fleur-home .fleur-collectie__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin: 0 0 28px;
}
.fleur-home .fleur-collectie__title { font-size: clamp(28px, 2.6vw, 32px); color: var(--fleur-cream); margin: 0; }
.fleur-home .fleur-collectie__nav { display: flex; gap: 12px; flex: none; }
.fleur-home .fleur-collectie__arrow {
	width: 42px; height: 42px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: none;
	border-radius: 8px;
	background: var(--fleur-cream);
	color: var(--fleur-pink);
	cursor: pointer;
	box-shadow: 0 2px 8px rgba(76, 61, 69, .12);
	transition: filter .15s ease, transform .15s ease;
}
.fleur-home .fleur-collectie__arrow:hover { filter: brightness(.96); transform: translateY(-1px); }
.fleur-home .fleur-collectie__arrow svg { width: 20px; height: 20px; }

/* Slider: 4 tegels zichtbaar, oneindig doordraaiend (JS). */
.fleur-home .fleur-collectie__slider { overflow: hidden; }
.fleur-home .fleur-collectie__track {
	display: flex;
	gap: 24px;
	will-change: transform;
}
.fleur-home .fleur-collectie__track .fleur-tile { flex: 0 0 calc((100% - 72px) / 4); }
.fleur-home .fleur-tile {
	position: relative;
	display: block;
	aspect-ratio: 299 / 423;
	border-radius: var(--fleur-radius-card);
	overflow: hidden;
	background: var(--fleur-aubergine);
}
.fleur-home .fleur-tile__img {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
}
.fleur-home .fleur-tile__overlay {
	position: absolute; inset: 0;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, .58) 100%);
}
.fleur-home .fleur-tile__label {
	position: absolute;
	left: 15px; bottom: 14px;
	z-index: 1;
	font-family: var(--fleur-font-sans);
	font-weight: 900;
	font-size: 20px;
	color: var(--fleur-cream);
}
.fleur-home .fleur-tile:hover .fleur-tile__img { transform: scale(1.03); }
.fleur-home .fleur-tile__img { transition: transform .3s ease; }

/* ===================================================================
   BOX SAMENSTELLEN (520:2673) — foto links, tekst + 2 knoppen rechts
   =================================================================== */
.fleur-home .fleur-box {
	display: grid;
	grid-template-columns: minmax(0, 949fr) minmax(0, 971fr);
	background: var(--fleur-cream);
	margin-bottom: 96px;   /* grijze witruimte vóór de beleving-band (Figma) */
}
.fleur-home .fleur-box__media {
	position: relative;
	aspect-ratio: 949 / 738;   /* design-foto 1:1 → markers vallen op de bonbons */
	background: #2c2024 center/cover no-repeat;
}
/* Bonbon-markers: ring; bij hover/focus gevuld + label-veld erboven. */
.fleur-home .fleur-box__marker {
	position: absolute;
	width: 24px; height: 24px;
	border-radius: 50%;
	background: rgba(245, 245, 245, .55);
	border: 3px solid var(--fleur-cream);
	box-shadow: 0 0 0 6px rgba(245, 245, 245, .18);   /* zachte halo, als design-ring */
	transform: translate(-50%, -50%);
	cursor: pointer;
	z-index: 2;
	transition: background .15s ease, transform .15s ease;
}
/* Pulserende ring rond elke marker (zoals de live site: dsm_image_hotspot_pulse). */
.fleur-home .fleur-box__marker::before {
	content: "";
	position: absolute;
	inset: -3px;
	border-radius: 50%;
	background: var(--fleur-cream);
	z-index: -1;
	animation: fleur-box-pulse 2s ease-out infinite;
}
@keyframes fleur-box-pulse {
	0%   { transform: scale(1);   opacity: .65; }
	70%  { transform: scale(2.6); opacity: 0; }
	100% { transform: scale(2.6); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
	.fleur-home .fleur-box__marker::before { animation: none; }
}
.fleur-home .fleur-box__marker:hover,
.fleur-home .fleur-box__marker:focus-visible {
	background: var(--fleur-pink-light);
	transform: translate(-50%, -50%) scale(1.2);
	outline: none;
}
.fleur-home .fleur-box__marker-tip {
	position: absolute;
	left: 50%; bottom: calc(100% + 12px);
	transform: translateX(-50%) translateY(4px);
	background: var(--fleur-pink-soft);
	color: var(--fleur-cream);
	font-family: var(--fleur-font-serif);
	font-weight: 400;
	font-size: 16px;
	line-height: 1.2;
	white-space: nowrap;
	padding: 8px 16px;
	border-radius: 5px;
	box-shadow: 0 6px 16px rgba(0, 0, 0, .25);
	opacity: 0; visibility: hidden;
	transition: opacity .15s ease, transform .15s ease;
	pointer-events: none;
	z-index: 3;
}
.fleur-home .fleur-box__marker-tip::after {
	content: "";
	position: absolute;
	top: 100%; left: 50%;
	transform: translateX(-50%);
	border: 7px solid transparent;
	border-top-color: var(--fleur-pink-soft);
}
.fleur-home .fleur-box__marker:hover .fleur-box__marker-tip,
.fleur-home .fleur-box__marker:focus-visible .fleur-box__marker-tip {
	opacity: 1; visibility: visible;
	transform: translateX(-50%) translateY(0);
}
.fleur-home .fleur-box__content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 80px clamp(24px, 5vw, 96px);
	max-width: 760px;
}
.fleur-home .fleur-box__title {
	font-family: var(--fleur-font-serif);
	font-weight: 400;
	color: #000;
	font-size: clamp(34px, 4vw, 55px);
	line-height: 1.1;
	margin: 0 0 22px;
}
.fleur-home .fleur-box__title em { font-style: italic; color: var(--fleur-pink-light); }
.fleur-home .fleur-box__text {
	font-size: 16px;
	line-height: 2;
	color: #000;
	margin: 0 0 28px;
	max-width: 562px;
}
.fleur-home .fleur-box__actions { display: flex; flex-flow: row wrap; align-items: flex-start; gap: 16px; }
.fleur-home .fleur-box__action { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.fleur-home .fleur-box__note {
	font-size: 11px;
	line-height: 1.3;
	color: var(--fleur-pink);
	max-width: 200px;
}

/* ===================================================================
   BELEVING (520:2693) — aubergine band: tekst links, afbeelding rechts
   =================================================================== */
.fleur-home .fleur-beleving { background: var(--fleur-aubergine); }
.fleur-home .fleur-beleving__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 64px;
	align-items: center;
	padding-top: 90px;
	padding-bottom: 90px;
}
.fleur-home .fleur-beleving__title {
	font-family: var(--fleur-font-serif);
	font-weight: 400;
	color: var(--fleur-cream);
	font-size: clamp(34px, 4vw, 55px);
	line-height: 1.1;
	margin: 0 0 22px;
}
.fleur-home .fleur-beleving__title em { font-style: italic; }
.fleur-home .fleur-beleving__text {
	font-size: 16px;
	line-height: 1.9;
	color: var(--fleur-cream);
	margin: 0 0 30px;
	max-width: 643px;
}
.fleur-home .fleur-beleving__media {
	aspect-ratio: 572 / 484;   /* design-foto-uitsnede (landschap) */
	border-radius: 8px;
	background: #2c2024 center/cover no-repeat;
}

/* ===================================================================
   REVIEWS (520:2741) — titel + Google-rating + 4 witte kaarten
   =================================================================== */
.fleur-home .fleur-reviews {
	background: var(--fleur-cream);
	padding-top: 80px;
	padding-bottom: 80px;
}
.fleur-home .fleur-reviews__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px 32px;
	margin-bottom: 18px;
}
.fleur-home .fleur-reviews__title { font-size: clamp(26px, 2.6vw, 32px); margin: 0; color: #000; }
.fleur-home .fleur-reviews__cta {
	display: inline-flex;
	align-items: center;
	font-family: var(--fleur-font-sans);
	font-weight: 900;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: .02em;
	color: var(--fleur-cream);
	background: var(--fleur-pink-light);
	border-radius: 100px;
	padding: 12px 26px;
	transition: filter .15s ease;
}
.fleur-home .fleur-reviews__cta:hover { color: var(--fleur-cream); filter: brightness(.96); }

.fleur-home .fleur-reviews__rating {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 32px;
}
.fleur-home .fleur-reviews__google { display: inline-flex; width: 22px; height: 22px; }
.fleur-home .fleur-reviews__google svg { width: 100%; height: 100%; }
.fleur-home .fleur-reviews__score { font-family: var(--fleur-font-sans); font-weight: 700; font-size: 14px; color: #000; }
.fleur-home .fleur-reviews__count { font-family: var(--fleur-font-sans); font-weight: 700; font-size: 14px; color: #000; }

.fleur-home .fleur-stars { display: inline-flex; gap: 2px; }
.fleur-home .fleur-stars svg { width: 16px; height: 16px; fill: #f5a623; }

.fleur-home .fleur-reviews__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}
.fleur-home .fleur-review {
	background: #fff;
	border: 1px solid #ececec;
	border-radius: 10px;
	padding: 22px;
	box-shadow: 0 2px 14px rgba(76, 61, 69, .06);
}
.fleur-home .fleur-review__head {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 12px;
	margin-bottom: 12px;
}
.fleur-home .fleur-review__avatar {
	width: 44px; height: 44px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--fleur-aubergine);
	color: var(--fleur-cream);
	font-family: var(--fleur-font-sans);
	font-weight: 600;
	font-size: 20px;
}
.fleur-home .fleur-review__name {
	font-family: var(--fleur-font-sans);
	font-weight: 600;
	font-size: 18px;
	color: #000;
	line-height: 1.2;
}
.fleur-home .fleur-review__badge { display: inline-flex; width: 24px; height: 24px; }
.fleur-home .fleur-review__badge svg { width: 100%; height: 100%; }
.fleur-home .fleur-review__text {
	font-size: 14px;
	line-height: 1.65;
	color: #000;
	margin: 12px 0 0;
}

/* ===================================================================
   WORKSHOPS (520:2694) — tekst links, afbeelding rechts (roze band onder)
   =================================================================== */
.fleur-home .fleur-workshops {
	position: relative;
	background: var(--fleur-cream);   /* grijze/cream top (Figma #f5f5f5) */
	padding-top: 90px;
	padding-bottom: 90px;
}
.fleur-home .fleur-workshops::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: 0; top: 52%;   /* roze band als achtergrond; foto valt eroverheen */
	background: var(--fleur-pink-light);
	z-index: 0;
}
.fleur-home .fleur-workshops__inner {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	align-items: center;
}
.fleur-home .fleur-workshops__title {
	font-family: var(--fleur-font-serif);
	font-weight: 400;
	color: #000;
	font-size: clamp(32px, 3.7vw, 52px);   /* iets kleiner zodat "Van chocolade liefhebber" op één regel past (design-breuk) */
	line-height: 1.1;
	margin: 0 0 22px;
}
.fleur-home .fleur-workshops__title em { font-style: italic; color: var(--fleur-pink-light); }
.fleur-home .fleur-workshops__text {
	font-size: 16px;
	line-height: 1.9;
	color: #000;
	margin: 0 0 30px;
	max-width: 670px;
}
.fleur-home .fleur-workshops__media {
	aspect-ratio: 698 / 599;   /* design-foto (520:2695), valt over de roze band */
	align-self: center;
	border-radius: 8px;
	background: #2c2024 center/cover no-repeat;
}

/* ===================================================================
   RESPONSIVE — Sjon-breakpoints: 982-1219 = liggende tablet,
   <=981 = mobiel/staande tablet (één kolom op de 24px-gutter).
   =================================================================== */

/* — Liggende tablet / kleine laptop (982-1219px). — */
@media (min-width: 982px) and (max-width: 1219px) {
	/* Toppers: net als desktop één nette rij van 4. Was 3 kolommen → de 4e topper
	   viel dan los op een eigen regel (3+1) én er ontstond een sprong naar de
	   4-koloms desktop bij 1220. 4 kolommen past ruim (±215px bij 982). */
	.fleur-home .fleur-toppers__grid { grid-template-columns: repeat(4, 1fr); }
	/* Collectie-slider: 3 tegels per weergave (iets ruimer dan de ±4 op desktop);
	   een slider heeft geen losse-kaart-probleem. */
	.fleur-home .fleur-collectie__track .fleur-tile { flex: 0 0 calc((100% - 48px) / 3); }

	/* Minder grijze witruimte boven "Onze lekkerste toppers" (96px → 56px). */
	.fleur-home .fleur-toppers { padding-top: 56px; }

	/* "Stel een eigen box samen": op smallere kolommen is de foto (vaste
	   verhouding 949/738) lager dan de tekstkolom, waardoor de foto bovenaan bleef
	   staan met grijs eronder en de tekst niet meer op de foto gecentreerd oogde.
	   De foto de volledige rijhoogte laten vullen → foto en tekst even hoog, tekst
	   (justify-content:center) staat weer verticaal gecentreerd t.o.v. de foto.
	   `aspect-ratio:auto` MOET erbij: met de vaste 949/738 zou de foto haar breedte
	   uit de (nu grote) hoogte afleiden en over de tekstkolom heen vallen (de tekst
	   verdween achter de foto). Zonder ratio bepaalt de grid-kolom de breedte. */
	.fleur-home .fleur-box__media { height: 100%; aspect-ratio: auto; }
	/* Minder grijze witruimte onder het box-blok, vóór de beleving-band (96 → 48). */
	.fleur-home .fleur-box { margin-bottom: 48px; }

	/* Minder witruimte onder de reviews vóór het workshops-blok. De zichtbare kloof
	   was reviews-onder (64) + workshops-boven (90) = 154px; nu 24 + 48 = 72px.
	   .fleur-home ervoor zodat de gedeelde .fleur-rv op andere pagina's ongemoeid blijft. */
	.fleur-home .fleur-rv { padding-bottom: 24px; }
	.fleur-home .fleur-workshops { padding-top: 48px; }
}

/* — Mobiel + staande tablet (<=981px): alles één kolom, knoppen vol. — */
@media (max-width: 981px) {
	/* Hero: compacter; de vaste desktop-afbreking niet forceren + gebalanceerde
	   wrap (voorkomt een losse "ander" op een eigen regel). */
	.fleur-home .fleur-hero { min-height: 420px; }
	.fleur-home .fleur-hero__inner { padding-top: 56px; padding-bottom: 56px; }
	.fleur-home .fleur-hero__title {
		font-size: clamp(28px, 7.4vw, 38px);
		text-wrap: balance;
	}
	.fleur-home .fleur-hero__title br { display: none; }
	.fleur-home .fleur-hero__actions { flex-direction: column; align-items: stretch; }
	/* Knoppen full-width maar iets kleiner (minder hoog + kleinere tekst). */
	.fleur-home .fleur-hero__actions .sellabees-btn { width: 100%; padding: 13px 24px; font-size: 13px; }

	/* USP-balk: doorlopende (infinity) marquee. theme.js dupliceert de items één
	   keer en zet .fleur-usps--marquee; de baan animeert -50% = exact één set →
	   naadloze lus. Zonder JS valt het terug op de basis-wrap-rij. */
	.fleur-home .fleur-usps { overflow: hidden; }
	.fleur-usps--marquee .fleur-usps__inner {
		display: flex;
		flex-wrap: nowrap;
		width: max-content;
		max-width: none;
		justify-content: flex-start;
		gap: 0;
		padding-inline: 0;
		animation: fleur-usps-marquee 22s linear infinite;
	}
	.fleur-usps--marquee .fleur-usps__item { flex: 0 0 auto; padding-inline: 22px; }
	.fleur-usps--marquee:hover .fleur-usps__inner { animation-play-state: paused; }
	@keyframes fleur-usps-marquee {
		from { transform: translateX(0); }
		to   { transform: translateX(-50%); }
	}

	/* Toppers: oneindige (infinity) slider, 2 producten per weergave. theme.js wrapt
	   het raster in een viewport, kloont de set en animeert 'm door; de dots blijven
	   (pijlen weg). Baan = flexrij die getransformeerd wordt. */
	.fleur-home .fleur-toppers { padding-top: 56px; padding-bottom: 40px; }
	.fleur-home .fleur-toppers__grid {
		display: flex;
		grid-template-columns: none;
		flex-wrap: nowrap;
		gap: 16px;
		will-change: transform;
	}
	.fleur-home .fleur-toppers__grid > .fleur-card {
		flex: 0 0 calc((100% - 16px) / 2);
		min-width: 0;
	}

	/* Collectie: 2 tegels zichtbaar in de slider. */
	.fleur-home .fleur-collectie { padding-top: 40px; padding-bottom: 56px; }
	.fleur-home .fleur-collectie__track { gap: 14px; }
	.fleur-home .fleur-collectie__track .fleur-tile { flex: 0 0 calc((100% - 14px) / 2); }

	/* Box samenstellen: foto boven, tekst eronder; knoppen vol; minder witruimte onder. */
	.fleur-home .fleur-box { grid-template-columns: 1fr; margin-bottom: 36px; }
	.fleur-home .fleur-box__content { padding: 40px 24px 22px; max-width: none; }
	.fleur-home .fleur-box__title { font-size: clamp(28px, 7vw, 34px); }
	.fleur-home .fleur-box__actions { flex-direction: column; align-items: stretch; }
	.fleur-home .fleur-box__action { align-items: stretch; }
	.fleur-home .fleur-box__action .sellabees-btn { width: 100%; }
	.fleur-home .fleur-box__note { max-width: none; text-align: center; }

	/* Box-markers bij de linker-/rechterrand: tooltip binnen beeld houden
	   (theme.js zet --edge-left/--edge-right o.b.v. de marker-x%). */
	.fleur-home .fleur-box__marker--edge-left .fleur-box__marker-tip {
		left: 0;
		transform: translateX(0) translateY(4px);
	}
	.fleur-home .fleur-box__marker--edge-left:hover .fleur-box__marker-tip,
	.fleur-home .fleur-box__marker--edge-left:focus-visible .fleur-box__marker-tip {
		transform: translateX(0) translateY(0);
	}
	.fleur-home .fleur-box__marker--edge-left .fleur-box__marker-tip::after { left: 14px; }
	.fleur-home .fleur-box__marker--edge-right .fleur-box__marker-tip {
		left: auto;
		right: 0;
		transform: translateX(0) translateY(4px);
	}
	.fleur-home .fleur-box__marker--edge-right:hover .fleur-box__marker-tip,
	.fleur-home .fleur-box__marker--edge-right:focus-visible .fleur-box__marker-tip {
		transform: translateX(0) translateY(0);
	}
	.fleur-home .fleur-box__marker--edge-right .fleur-box__marker-tip::after { left: auto; right: 14px; }

	/* Beleving: tekst boven, foto eronder. */
	.fleur-home .fleur-beleving__inner { grid-template-columns: 1fr; gap: 32px; padding-top: 56px; padding-bottom: 56px; }
	.fleur-home .fleur-beleving__title { font-size: clamp(28px, 7vw, 34px); }
	.fleur-home .fleur-beleving__content .sellabees-btn { width: 100%; }

	/* Reviews (legacy .fleur-reviews — home gebruikt .fleur-rv, zie live-sections.css). */
	.fleur-home .fleur-reviews { padding-top: 56px; padding-bottom: 56px; }
	.fleur-home .fleur-reviews__head { flex-direction: column; align-items: flex-start; }
	.fleur-home .fleur-reviews__grid { grid-template-columns: 1fr; }

	/* Meer lucht boven het reviews-blok op de homepage: de globale ≤981-regel
	   (.fleur-rv{padding:14px 0 14px}) is te krap onder de donkere beleving-band
	   (gebruiker-feedback: "te weinig witruimte boven de review slider"). Alleen
	   home ophogen; andere pagina's houden hun eigen krappere waarde. */
	.fleur-home .fleur-rv { padding-top: 40px; }

	/* Workshops: tekst boven, foto eronder; roze band tot ~midden van de tekst. */
	.fleur-home .fleur-workshops { padding-top: 56px; padding-bottom: 56px; }
	.fleur-home .fleur-workshops__inner { grid-template-columns: 1fr; gap: 32px; }
	.fleur-home .fleur-workshops__title { font-size: clamp(28px, 7vw, 34px); }
	.fleur-home .fleur-workshops__content .sellabees-btn { width: 100%; }
	/* Roze band tot precies het midden van de platte tekst (px door theme.js gemeten). */
	.fleur-home .fleur-workshops::after { top: var(--fleur-work-band, 34%); }
}

/* Marquee uit bij voorkeur voor minder beweging: nette gecentreerde rij. */
@media (max-width: 981px) and (prefers-reduced-motion: reduce) {
	.fleur-usps--marquee .fleur-usps__inner {
		animation: none;
		width: auto;
		flex-wrap: wrap;
		justify-content: center;
		gap: 12px 28px;
	}
}