/* Doosje "zelf samenstellen" — full-width configurator-sectie (D1-D4),
   1:1 met de live site: roze band, maatkeuze, scriptachtige kop. */

.fleur-bonbox {
	position: relative;
	/* Full-bleed over de volledige breedte; roze band ALLEEN bovenaan (achter de
	   kop + bovenrand van de kaart), daaronder de pagina-grijs (#f5f5f5) — 1:1 met
	   design 477:7292. overflow-x:clip op .site-main vangt de scrollbar-breedte op. */
	margin-inline: calc(50% - 50vw);
	padding: 48px 0 56px;
	margin-top: 8px;
	background: linear-gradient(to bottom, var(--fleur-pink-soft) 0, var(--fleur-pink-soft) 235px, transparent 235px);
}

/* D2 — maatkeuze (OPTIES: 8/9/12/16 stuks). */
.fleur-bonbox__sizes {
	display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
	margin-bottom: 22px;
}
.fleur-bonbox__sizes-label {
	font-family: var(--fleur-font-sans); font-weight: 700; font-size: 13px;
	letter-spacing: .04em; color: var(--fleur-aubergine); margin-right: 4px;
}
.fleur-bonbox__size {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 84px; padding: 10px 18px;
	font-family: var(--fleur-font-sans); font-weight: 700; font-size: 14px;
	color: var(--fleur-aubergine); text-decoration: none;
	background: #fff; border: 1px solid rgba(76, 61, 69, .25);
	border-radius: 100px; transition: all .15s ease;
}
.fleur-bonbox__size:hover { border-color: var(--fleur-aubergine); }
.fleur-bonbox__size.is-active {
	background: var(--fleur-aubergine); color: var(--fleur-cream);
	border-color: var(--fleur-aubergine);
}

/* D3 — kop + subtitel: GECENTREERD en VOLLEDIG WIT op de roze band, "favoriete"
   cursief (design 477:7292). */
.fleur-bonbox__title {
	font-family: var(--fleur-font-serif); font-weight: 400;
	font-size: clamp(28px, 3vw, 40px); line-height: 1.1;
	color: #fff; margin: 0 0 6px;
	text-align: center;
}
.fleur-bonbox__title em { font-style: italic; color: #fff; }
.fleur-bonbox__sub {
	font-family: var(--fleur-font-sans); font-size: 16px;
	color: #fff; margin: 0 0 26px;
	text-align: center;
}

/* De configurator staat DIRECT op de grijze pagina-achtergrond — GEEN witte
   kaart, geen schaduw (design 477:7292: alles op #f5f5f5). */
.fleur-bonbox .bcs-wrap {
	background: transparent;
	border-radius: 0;
	padding: 26px 0 0;
	box-shadow: none;
}
/* --- Mobile / portrait tablet (≤981px) -------------------------------------
   De configurator-band krijgt minder verticale ruimte en een LAGERE roze
   stripe (de kop/subtitel worden op mobiel kleiner, dus 235px zou te veel
   roze tonen). De .bcs-*-internals (kolommen, grid, slots, verpakking, cart,
   modal) worden door de plugin-eigen frontend.css al responsive gemaakt en
   raken we hier niet aan. Alleen .fleur-bonbox (dit bestand) wordt aangepast.
   Desktop + landscape tablet (≥982px) blijft identiek. */
@media (max-width: 981px) {
	.fleur-bonbox {
		padding: 36px 0 44px;
		/* Lagere roze stripe (was 235px) — past bij de kleinere mobiele kop. */
		background: linear-gradient(to bottom, var(--fleur-pink-soft) 0, var(--fleur-pink-soft) 170px, transparent 170px);
	}
	.fleur-bonbox__title { font-size: clamp(26px, 6vw, 32px); }
	.fleur-bonbox__sub { margin-bottom: 20px; }
}

@media (max-width: 700px) {
	.fleur-bonbox .bcs-wrap { padding: 16px 0 0; }
}

/* --- Landscape tablet (982-1219px) — configurator-band -----------------------
   De 2-koloms configurator (.bcs-cols, via de plugin-frontend.css) stapelt pas
   ≤700px en past hier dus ruim naast elkaar → geen overflow. We trimmen alleen
   de band zelf: iets minder onderruimte en een lagere roze stripe die past bij
   de (kleinere) kop op tablet. Gescoped op body.single-product .fleur-bonbox
   (die markup bestaat enkel op de bonbon-pakket-productpagina) zodat deze regels
   de bare-class desktopregels overrulen. ≤981 en ≥1220 blijven ongemoeid. */
@media (min-width: 982px) and (max-width: 1219px) {
	body.single-product .fleur-bonbox {
		padding: 44px 0 48px;
		/* Lagere roze stripe (desktop 235px) — dekt de kop + bovenrand van de
		   kolommen; kop is smaller op tablet, dus minder pin-hoogte nodig. */
		background: linear-gradient(to bottom, var(--fleur-pink-soft) 0, var(--fleur-pink-soft) 210px, transparent 210px);
	}
}