/* Chocolaterie Fleur — Bonbons-pagina QA-fixes.
   Alles gescoped onder .fleur-page--bonbons; laadt na bonbons-page.css. */

.fleur-page--bonbons {
	--fleur-pink-soft: #f6bddd;
	/* Ontwerp: de hele Bonbons-pagina staat op lichtgrijs (#F5F5F5) — óók de
	   ruimte onder "Onze smaken" tot aan de footer (was wit). */
	background: #f5f5f5;
	/* Geen horizontale scroll door de full-bleed roze band ("Onze favoriete
	   smaken", width:100vw incl. scrollbar). clip knipt de overschrijding weg
	   zonder een scroll-container te maken. */
	overflow-x: clip;
}

/* =========================================================================
   HERO — rechthoekige, ingekaderde box; foto flush tegen de rechterrand.
   (background-clip: content-box houdt de aubergine binnen de container-padding,
    zodat er géén aubergine-strook meer rechts van de foto staat.)
   ========================================================================= */
.fleur-page--bonbons .fleur-bon-hero {
	background: transparent;
	padding: 40px 0 24px;
}
.fleur-page--bonbons .fleur-bon-hero__inner {
	background: var(--fleur-aubergine);
	background-clip: content-box;
	border-radius: 0;                /* ontwerp: rechthoekig, geen rondingen */
	overflow: hidden;
	gap: 0;
	align-items: stretch;
	grid-template-columns: 1fr 1fr;
	min-height: 0;
}
.fleur-page--bonbons .fleur-bon-hero__text {
	padding: 56px 48px 56px 56px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.fleur-page--bonbons .fleur-bon-hero__title { font-size: 40px; margin: 0 0 28px; }
.fleur-page--bonbons .fleur-bon-hero__usps { gap: 16px; }
.fleur-page--bonbons .fleur-bon-hero__media {
	aspect-ratio: auto;
	border-radius: 0;
	height: 100%;
	min-height: 300px;
}
.fleur-page--bonbons .fleur-bon-hero__img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* =========================================================================
   SECTIEKOPPEN — gecentreerd + zwart (ontwerp toont zwart, niet aubergine).
   ========================================================================= */
.fleur-page--bonbons .fleur-bon-section-title { text-align: center; color: #000; }
.fleur-page--bonbons .fleur-bon-section-title em { color: #000; font-style: italic; }

/* =========================================================================
   PRODUCTKAARTEN ("Kies zelf je smaken" + favorieten) — titel/prijs zwart,
   vierkante roze koopknop netjes uitgelijnd naast titel/prijs.
   ========================================================================= */
.fleur-page--bonbons .fleur-card__body {
	display: flex;
	align-items: center;             /* knop verticaal gelijk met titel/prijs */
	justify-content: space-between;
	gap: 12px;
	margin-top: 12px;
}
.fleur-page--bonbons .fleur-card__info { min-width: 0; flex: 1 1 auto; }
.fleur-page--bonbons .fleur-card .woocommerce-loop-product__title,
.fleur-page--bonbons .fleur-bon-favorieten__name {
	font-family: var(--fleur-font-serif);
	font-weight: 400;
	font-size: 16px;
	line-height: 1.25;
	color: #000;
	margin: 0 0 4px;
	padding: 0;
}
.fleur-page--bonbons .fleur-card .price {
	font-family: var(--fleur-font-sans);
	font-weight: 400;
	font-size: 14px;
	line-height: 1.3;
	color: #000;
	margin: 0;
}
.fleur-page--bonbons .fleur-card__add {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 41px;
	padding: 0;
	border-radius: 5px;
	background: var(--fleur-pink-soft);
	color: var(--fleur-aubergine);
	border: 0;
	margin: 0;
	transition: background .15s ease, transform .15s ease, filter .15s ease;
}
.fleur-page--bonbons .fleur-card__add:hover { background: var(--fleur-pink); color: #fff; transform: translateY(-1px); }
.fleur-page--bonbons .fleur-card__add .fleur-card__icon { width: 19px; height: 16px; display: block; }
.fleur-page--bonbons .fleur-card .added_to_cart { flex-basis: 100%; font-size: 12px; margin-top: 6px; color: var(--fleur-pink); }

/* Zelf-samenstellen: GEEN koopknop — je stelt het doosje eerst op de
   productpagina samen (kaart-afbeelding/titel linken al naar het product). */
.fleur-page--bonbons .fleur-bon-samenstellen .fleur-card__add,
.fleur-page--bonbons .fleur-bon-samenstellen .add_to_cart_button,
.fleur-page--bonbons .fleur-bon-samenstellen .added_to_cart { display: none !important; }

/* "Kies zelf je smaken" hergebruikt content-product.php, maar de vaste
   kaart-verhouding uit shop.css is op body.woocommerce/.archive gescoped en die
   klassen ontbreken op deze (gewone) pagina. Zonder verhouding renderen de
   doosjesfoto's op hun natuurlijke formaat → ongelijke kaarthoogtes (rommelig,
   vooral als slider op tablet/mobiel). Gelijktrekken met de favorieten-slider:
   299/325, foto object-fit: cover. */
.fleur-page--bonbons .fleur-bon-grid .fleur-card__media {
	position: relative;
	display: block;
	aspect-ratio: 299 / 325;
	border-radius: 5px;
	overflow: hidden;
	background: #f2e4ee;
	margin: 0;
}
.fleur-page--bonbons .fleur-bon-grid .fleur-card__media a {
	display: block;
	width: 100%;
	height: 100%;
}
.fleur-page--bonbons .fleur-bon-grid .fleur-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .4s ease;
}
.fleur-page--bonbons .fleur-bon-grid .fleur-card:hover .fleur-card__media img { transform: scale(1.04); }

/* =========================================================================
   REVIEW-SLIDER KOP — overige tekst zwart, accent "chocoladeliefhebbers"
   in #F6BDDD (ontwerp).
   ========================================================================= */
.fleur-page--bonbons .fleur-rv__title { color: #000; }
.fleur-page--bonbons .fleur-rv__title em { color: #F6BDDD; }

/* =========================================================================
   "ONZE FAVORIETE SMAKEN IN ÉÉN DOOSJE" — roze band alleen op de bovenhelft,
   wit eronder (ontwerp). Titel wit op roze, kaart-titels/prijzen zwart op wit.
   ========================================================================= */
.fleur-page--bonbons .fleur-bon-favorieten {
	position: relative;
	background: transparent;
	padding: 56px 0 48px;
	margin: 0;
}
.fleur-page--bonbons .fleur-bon-favorieten::before {
	content: "";
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	top: 0;
	width: 100vw;
	height: 58%;                      /* roze tot ~midden van de kaartfoto's */
	background: var(--fleur-pink-soft);
	z-index: 0;
}
.fleur-page--bonbons .fleur-bon-favorieten > .sellabees-container { position: relative; z-index: 1; }
.fleur-page--bonbons .fleur-bon-favorieten__title,
.fleur-page--bonbons .fleur-bon-favorieten__title em { color: #fff; }
.fleur-page--bonbons .fleur-bon-favorieten__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 22px;
}
.fleur-page--bonbons .fleur-bon-favorieten__card { list-style: none; margin: 0; background: transparent; }
/* Klikbare productafbeelding (→ productpagina). */
.fleur-page--bonbons .fleur-bon-favorieten__link {
	display: block;
	text-decoration: none;
	color: inherit;
}
.fleur-page--bonbons .fleur-bon-favorieten__card .fleur-card__media {
	position: relative;
	aspect-ratio: 299 / 325;
	border-radius: 5px;
	overflow: hidden;
	background: #f2e4ee;
}
.fleur-page--bonbons .fleur-bon-favorieten__img { transition: transform .4s ease; }
.fleur-page--bonbons .fleur-bon-favorieten__link:hover .fleur-bon-favorieten__img { transform: scale(1.04); }
.fleur-page--bonbons .fleur-bon-favorieten__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fleur-page--bonbons .fleur-bon-favorieten__card .fleur-bon-tile__ph { display: block; width: 100%; height: 100%; }
.fleur-page--bonbons .fleur-bon-favorieten .price { color: #000; }
/* Winkelwagen-icoon in de roze koopknop is WIT (design 477:6697: #f5f5f5 op #f6bddd). */
.fleur-page--bonbons .fleur-bon-favorieten__card .fleur-card__add { color: #fff; }
.fleur-page--bonbons .fleur-bon-favorieten__card .fleur-card__add:hover { color: #fff; }

/* =========================================================================
   "ONZE SMAKEN" — 4×4 raster; géén witruimte onder het blok (design gaat
   direct van het grijs naar de footer).
   ========================================================================= */
.fleur-page--bonbons .fleur-bon-smaken__grid { grid-template-columns: repeat(4, 1fr); gap: 22px 22px; }
.fleur-page--bonbons .fleur-bon-tile__title { text-align: left; color: #000; }
/* Grijze marge onder de smaaktegels tot aan de footer (ontwerp ~60px op #F5F5F5).
   De footer heeft standaard margin-top:64px die op deze pagina wit oogde; we
   zetten die op 0 en regelen de (grijze) tussenruimte via de sectie-padding,
   zodat de ruimte tot de footer #F5F5F5 is i.p.v. wit. */
.fleur-page--bonbons .fleur-bon-smaken { padding-bottom: 60px; }
.fleur-page--bonbons + .fleur-footer { margin-top: 0; }

/* =========================================================================
   Responsive
   ========================================================================= */
@media (max-width: 1024px) {
	.fleur-page--bonbons .fleur-bon-favorieten__grid,
	.fleur-page--bonbons .fleur-bon-smaken__grid { grid-template-columns: repeat(2, 1fr); }
	.fleur-page--bonbons .fleur-bon-favorieten::before { height: 42%; }
}

/* ============================ Mobiel (≤981px) ===========================
   Eén nette mobiele laag t/m 981px (982px = grens desktop/liggende tablet).
   De ingekaderde hero stapelt (foto boven de tekst), favorieten-grid → 2
   kolommen. Consolideert de oude ≤860px-hero-regel. Raakt NIETS ≥982px. */
@media (max-width: 981px) {
	/* Hero-box stapelt: foto bovenaan, aubergine tekstblok eronder — en breekt
	   uit de container zodat de box VOLLEDIGE BREEDTE (edge-to-edge) is en flush
	   onder de header valt. padding-inline:0 + max-width:none heffen de
	   .sellabees-container-marges op; background-clip:content-box vult de
	   aubergine dan meteen de volle breedte. */
	.fleur-page--bonbons .fleur-bon-hero { padding: 0 0 16px; }
	.fleur-page--bonbons .fleur-bon-hero__inner {
		grid-template-columns: 1fr;
		max-width: none;
		padding-inline: 0;
	}
	.fleur-page--bonbons .fleur-bon-hero__media {
		order: -1;
		min-height: 220px;
		aspect-ratio: 16 / 10;
	}
	.fleur-page--bonbons .fleur-bon-hero__text { padding: 36px 28px; }
	.fleur-page--bonbons .fleur-bon-hero__title { font-size: clamp(28px, 6.5vw, 36px); }

	/* Favorieten-band → toppers-stijl auto-slider (2 per view, dots, swipe).
	   theme.js wrapt/kloont/animeert; wij leveren alleen de flex-rij. */
	.fleur-page--bonbons .fleur-bon-favorieten__grid {
		display: flex;
		grid-template-columns: none;
		flex-wrap: nowrap;
		gap: 16px;
		will-change: transform;
	}
	.fleur-page--bonbons .fleur-bon-favorieten__grid > .fleur-bon-favorieten__card {
		flex: 0 0 calc((100% - 16px) / 2);
		min-width: 0;
		max-width: none;
	}
	.fleur-page--bonbons .fleur-bon-favorieten { padding: 44px 0 40px; }
	.fleur-page--bonbons .fleur-bon-favorieten::before { height: 40%; }

	/* "Onze smaken"-slider (flex uit bonbons-page.css) — geen 4-koloms grid meer. */
	.fleur-page--bonbons .fleur-bon-smaken__grid { grid-template-columns: repeat(2, 1fr); }

	/* Review-slider staat globaal op 14px onder-padding (live-sections.css, bewust
	   krap op mobiel). Op deze pagina volgt direct de roze favorieten-band, waardoor
	   die te dicht onder de laatste reviewkaart plakt. Extra ademruimte eronder. */
	.fleur-page--bonbons .fleur-rv { padding-bottom: 44px; }
}

@media (max-width: 560px) {
	/* Favorieten- en smaken-grids blijven de 2-per-view flex-slider (≤981px);
	   hier NIET terug naar grid zetten. */
	.fleur-page--bonbons .fleur-bon-hero__text { padding: 28px 22px; }
}

/* ============================ Liggende tablet (982–1219px) =============
   Desktop-layout, compacter. Alle regels binnen deze breakpoint en gescoped
   op .fleur-page--bonbons. Staat source-laatst → wint van de ≤1024-regels
   hierboven in de overlap 982–1024 (én van de basis in bonbons-page.css, dat
   vóór dit bestand laadt). Kolomkeuzes op itemaantal: pakketten 3 boxen →
   3-koloms, favorieten 4 kaarten → 4-koloms (één rij), smaken 16 tegels →
   4×4. Raakt NIETS ≤981 of ≥1220. */
@media (min-width: 982px) and (max-width: 1219px) {
	/* Hero-box blijft 2-koloms; typografie/padding compacter, foto vult de
	   kolomhoogte (inner staat al op align-items: stretch). */
	.fleur-page--bonbons .fleur-bon-hero__text { padding: 40px 36px; }
	.fleur-page--bonbons .fleur-bon-hero__title { font-size: 34px; margin-bottom: 22px; }
	.fleur-page--bonbons .fleur-bon-hero__usps { gap: 14px; }
	.fleur-page--bonbons .fleur-bon-hero__media { min-height: 280px; }

	/* "Kies zelf je smaken" — 3 boxen → 3 kolommen (vult de rij netjes). */
	.fleur-page--bonbons .fleur-bon-grid {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 20px;
	}
	.fleur-page--bonbons .fleur-bon-samenstellen { padding: 48px 0 24px; }

	/* Kaart-knop bovenaan uitlijnen: op de smallere kolom wrapt de titel naar
	   2 regels, waardoor een verticaal-gecentreerde koopknop naar het midden
	   zakt. Bovenaan pinnen oogt netter (zie favorieten-kaarten). */
	.fleur-page--bonbons .fleur-card__body { align-items: flex-start; }

	/* Favorieten — 4 kaarten in één rij (4 kolommen); roze band dekt de kop +
	   bovenhelft van de kaarten (één-rij-layout). */
	.fleur-page--bonbons .fleur-bon-favorieten__grid {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 20px;
	}
	.fleur-page--bonbons .fleur-bon-favorieten { padding: 48px 0 40px; }
	.fleur-page--bonbons .fleur-bon-favorieten::before { height: 56%; }

	/* "Onze smaken" — 16 tegels → 4×4 (nette vierkant-verdeling). */
	.fleur-page--bonbons .fleur-bon-smaken__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 20px;
	}
	.fleur-page--bonbons .fleur-bon-smaken { padding: 40px 0 56px; }
}