/* Chocolaterie Fleur — pagina "Assortiment" (page-assortiment.php).
   Shop-overzicht dat de Divi-inhoud vervangt, 1:1 op de live referentie:
   aubergine hero + sfeerbanner, productsecties per categorie (zelfde
   .fleur-card-markup als het shop-archief), CTA "chocolade op maat" en het
   gedeelde reviews-blok. Alles gescoped onder .fleur-page--assortiment zodat de
   kaartstijl ook zonder body.woocommerce/body.archive werkt. Tokens uit
   fonts.css (--fleur-aubergine/-pink/-cream/-font-serif/-font-sans); soft pink
   en kaartkleuren hier lokaal gedeclareerd zodat dit bestand zelfstandig is. */

.fleur-page--assortiment {
	--fleur-pink-soft: #f6bddd;
	--fleur-card-bg: #f1eef0;
	background: var(--fleur-cream);
}

/* =========================================================
   1. Hero — aubergine band + sfeerbanner
   ========================================================= */
.fleur-page--assortiment .fleur-asrt-hero {
	background: var(--fleur-aubergine);
	/* Ruimte boven de titel + band die ~160px onder de titel doorloopt; de banner
	   valt daar met een negatieve marge half overheen (design 520:3570). */
	padding: 60px 0 160px;
}
.fleur-page--assortiment .fleur-asrt-hero__title {
	color: var(--fleur-cream);
	font-family: var(--fleur-font-serif);
	font-size: clamp(36px, 5vw, 50px);
	line-height: 1.1;
	margin: 0;
}
/* Sfeerbanner: wordt met een negatieve marge omhoog getrokken zodat hij ~44% op
   het paars en ~56% op het grijs valt (design: 163px op paars / 211px eronder).
   SCHERPE hoeken (geen border-radius). */
.fleur-page--assortiment .fleur-asrt-banner {
	margin-top: -150px;
}
.fleur-page--assortiment .fleur-asrt-banner__frame {
	position: relative;
	aspect-ratio: 1367 / 374;
	border-radius: 0;
	overflow: hidden;
	background: #2f262b;
}
.fleur-page--assortiment .fleur-asrt-banner__frame img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
/* Overlap schaalt mee met de smallere banner op kleinere schermen. */
@media (max-width: 1100px) {
	.fleur-page--assortiment .fleur-asrt-hero { padding-bottom: 128px; }
	.fleur-page--assortiment .fleur-asrt-banner { margin-top: -120px; }
}
@media (max-width: 768px) {
	.fleur-page--assortiment .fleur-asrt-hero { padding: 48px 0 96px; }
	.fleur-page--assortiment .fleur-asrt-banner { margin-top: -88px; }
}
@media (max-width: 560px) {
	.fleur-page--assortiment .fleur-asrt-hero { padding: 40px 0 66px; }
	.fleur-page--assortiment .fleur-asrt-banner { margin-top: -60px; }
}

/* =========================================================
   2. Productsecties (groepen per categorie)
   ========================================================= */
.fleur-page--assortiment .fleur-asrt-body {
	/* Kleine tussenruimte: de banner valt al met een negatieve marge in dit blok. */
	padding: 40px 0 72px;
}
.fleur-page--assortiment .fleur-asrt-group {
	margin-bottom: 64px;
}
.fleur-page--assortiment .fleur-asrt-group:last-child {
	margin-bottom: 0;
}
.fleur-page--assortiment .fleur-asrt-group__title {
	font-family: var(--fleur-font-serif);
	font-weight: 400;
	font-size: clamp(28px, 3.6vw, 36px);
	line-height: 1.2;
	color: #000;                 /* zwart zoals in het design (520:3625), niet aubergine */
	text-align: center;
	margin: 0 0 32px;
}
.fleur-page--assortiment .fleur-asrt-empty {
	text-align: center;
	color: var(--fleur-aubergine);
	font-size: 18px;
}

/* Grid — vier kaarten per rij, identiek aan het shop-archief. */
.fleur-page--assortiment ul.products.fleur-asrt-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 30px 22px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.fleur-page--assortiment ul.products.fleur-asrt-grid::before,
.fleur-page--assortiment ul.products.fleur-asrt-grid::after {
	content: none;
	display: none;
}

/* =========================================================
   3. Productkaart (content-product.php → .fleur-card)
      Her-gescopet onder de pagina zodat de kaart er hetzelfde uitziet als in
      shop.css, ook zonder body.woocommerce/body.archive.
   ========================================================= */
.fleur-page--assortiment li.product.fleur-card {
	width: auto !important;
	margin: 0 !important;
	float: none !important;
	display: flex;
	flex-direction: column;
	text-align: left;
}
.fleur-page--assortiment .fleur-card__media {
	position: relative;
	display: block;
	border-radius: 5px;
	overflow: hidden;
	background: var(--fleur-card-bg);
	aspect-ratio: 299 / 325;
	margin-bottom: 12px;
}
.fleur-page--assortiment .fleur-card__media a {
	display: block;
	width: 100%;
	height: 100%;
}
.fleur-page--assortiment .fleur-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .35s ease;
}
.fleur-page--assortiment .fleur-card:hover .fleur-card__media img {
	transform: scale(1.04);
}
.fleur-page--assortiment .fleur-card__media .onsale {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 2; /* boven de hover-zoom van de afbeelding (transform → stacking context) */
	margin: 0;
	min-height: 0;
	min-width: 0;
	padding: 4px 12px;
	border-radius: 100px;
	background: var(--fleur-pink);
	color: #fff;
	font-family: var(--fleur-font-sans);
	font-weight: 700;
	font-size: 12px;
	line-height: 1.4;
}

.fleur-page--assortiment .fleur-card__body {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
}
.fleur-page--assortiment .fleur-card__info {
	min-width: 0;
	flex: 1 1 auto;
}
.fleur-page--assortiment .fleur-card .woocommerce-loop-product__title {
	font-family: var(--fleur-font-serif);
	font-weight: 400;
	font-size: 16px;
	line-height: 1.25;
	color: var(--fleur-aubergine);
	margin: 0 0 4px;
	padding: 0;
}
.fleur-page--assortiment .fleur-card .price {
	font-family: var(--fleur-font-sans);
	font-weight: 400;
	font-size: 14px;
	line-height: 1.3;
	color: var(--fleur-aubergine);
	margin: 0;
}
.fleur-page--assortiment .fleur-card .price del { opacity: .5; margin-right: 6px; font-weight: 400; }
.fleur-page--assortiment .fleur-card .price ins { text-decoration: none; font-weight: 600; }

.fleur-page--assortiment .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: #fff;                 /* wit mandje-icoon op de zachtroze knop (design 520:3570) */
	border: 0;
	margin-top: 2px;
	transition: background-color .2s ease, color .2s ease, transform .2s ease, filter .2s ease;
}
.fleur-page--assortiment .fleur-card__add:hover {
	background: var(--fleur-pink);
	color: #fff;
	filter: none;
	transform: translateY(-1px);
}
.fleur-page--assortiment .fleur-card__add .fleur-card__icon {
	width: 19px;
	height: 16px;
	display: block;
}
.fleur-page--assortiment .fleur-card .added_to_cart {
	display: block;
	font-size: 12px;
	margin-top: 6px;
	color: var(--fleur-pink);
}
.fleur-page--assortiment .fleur-card__add.loading { opacity: .6; }

/* =========================================================
   4. CTA — "Wil jij ook chocolade op maat?"
      Grote foto links, aubergine tekstpaneel rechts (overlap zoals live).
   ========================================================= */
.fleur-page--assortiment .fleur-asrt-cta {
	position: relative;
	display: grid;
	/* Beeld links ± 49% breed, tekst rechts — design 520:3774 (949 van 1920px). */
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	/* stretch: de foto vult altijd de volledige kolomhoogte (geen crème-randen
	   eromheen), net als in het design; de tekst centreren we los verticaal. */
	align-items: stretch;
	background: var(--fleur-cream);
}
.fleur-page--assortiment .fleur-asrt-cta__media {
	position: relative;
	/* Design-verhouding 949×574 (breder/lager dan voorheen), zodat de foto niet te
	   groot/hoog wordt. */
	aspect-ratio: 949 / 574;
	overflow: hidden;
}
.fleur-page--assortiment .fleur-asrt-cta__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.fleur-page--assortiment .fleur-asrt-cta__panel {
	display: flex;
	justify-content: flex-start;
	align-items: center;   /* tekst verticaal gecentreerd naast de foto (design) */
	padding: 44px clamp(24px, 8vw, 120px) 44px clamp(32px, 6vw, 80px);
}
.fleur-page--assortiment .fleur-asrt-cta__text {
	/* Breed genoeg zodat de 55px-titel op 2 regels past, zoals in het design (~571px). */
	max-width: 580px;
}
.fleur-page--assortiment .fleur-asrt-cta__title {
	font-family: var(--fleur-font-serif);
	font-weight: 400;
	font-size: clamp(34px, 4.2vw, 55px);   /* design 520:3777 = 55px */
	line-height: 1.1;
	color: #000;                            /* zwart zoals in het design, niet aubergine */
	margin: 0 0 22px;
}
.fleur-page--assortiment .fleur-asrt-cta__body {
	font-family: var(--fleur-font-sans);
	font-size: 16px;
	line-height: 1.9;
	color: var(--fleur-aubergine);
	margin: 0 0 28px;
}
.fleur-page--assortiment .fleur-asrt-cta__btn {
	background: var(--fleur-aubergine);
	color: var(--fleur-cream);
	/* Design 520:3776: DM Sans Black 14px, ruime zijpadding zodat de tekst de knop
	   NIET helemaal vult (knop ± 270×53). */
	font-size: 14px;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: .02em;
	padding: 0 56px;
	height: 53px;
}
.fleur-page--assortiment .fleur-asrt-cta__btn:hover {
	background: #3b2f35;
	color: var(--fleur-cream);
	filter: none;
}

/* =========================================================
   5. Responsive
   ========================================================= */
@media (max-width: 1100px) {
	.fleur-page--assortiment ul.products.fleur-asrt-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}
@media (max-width: 860px) {
	.fleur-page--assortiment .fleur-asrt-body { padding: 40px 0 56px; }
	.fleur-page--assortiment .fleur-asrt-cta {
		grid-template-columns: 1fr;
	}
	.fleur-page--assortiment .fleur-asrt-cta__panel {
		padding: 44px 24px 56px;
		justify-content: center;
		text-align: center;
	}
	.fleur-page--assortiment .fleur-asrt-cta__text { margin-inline: auto; }
}
@media (max-width: 560px) {
	.fleur-page--assortiment ul.products.fleur-asrt-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 22px 14px;
	}
}

/* =========================================================
   6. Mobiel (≤981px) — portret-tablet + telefoon.
      Eén nette mobiele laag zodat de pagina op smalle schermen niet
      horizontaal scrollt en de secties netjes stapelen. Raakt NIETS ≥982px.
   ========================================================= */
@media (max-width: 981px) {
	/* Geen horizontale overloop door de full-bleed banner/USP-band. */
	.fleur-page--assortiment { overflow-x: clip; }

	/* ---------------------------------------------------------------
	   HERO (mobiel) — nieuwe, rustigere opzet: titel gecentreerd op de
	   aubergine band, de sfeerbanner valt er NIET meer half overheen maar
	   staat als een nette, afgeronde full-width foto direct onder de band.
	   Geen negatieve overlap meer op mobiel (dat oogde rommelig).
	   Alle waarden overschrijven de bestaande ≤1100/≤768/≤560-regels
	   uitsluitend binnen ≤981px; desktop (≥982) blijft ongemoeid.
	   --------------------------------------------------------------- */
	/* Hero zoals de FAQ-hero (gebruiker-referentie afbeelding): aubergine band met
	   LINKS uitgelijnde titel + een brede (16/10) afgeronde sfeerbanner die met een
	   negatieve marge onder de band uitsteekt — bovenhelft op het paars, onderhelft
	   op het grijs. Zelfde gevoel als .fleur-faq-hero op mobiel. */
	.fleur-page--assortiment .fleur-asrt-hero {
		padding: 40px 0 130px;   /* diepe aubergine onder de titel zodat de banner erin overlapt */
		text-align: left;
	}
	.fleur-page--assortiment .fleur-asrt-hero__title {
		font-size: clamp(30px, 6.4vw, 42px);
		text-align: left;
		max-width: none;
		margin: 0 0 16px;   /* beetje witruimte onder de paginatitel vóór de banner */
	}
	.fleur-page--assortiment .fleur-asrt-banner {
		position: relative;
		z-index: 1;
		margin-top: -128px;   /* trek de banner omhoog: ± bovenhelft op de aubergine band */
	}
	.fleur-page--assortiment .fleur-asrt-banner__frame {
		aspect-ratio: 16 / 10;
		border-radius: 6px;
	}

	/* Productgrid → 2 kolommen (fallback vóór JS de slider bouwt). */
	.fleur-page--assortiment ul.products.fleur-asrt-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 26px 16px;
	}
	/* Toppers-stijl slider: elke categorie-grid wordt een 2-per-view flexrij
	   (theme.js wrapt/kloont/animeert via [data-fleur-slider]). Vervangt de
	   grid-regel hierboven binnen dezelfde breakpoint. */
	.fleur-page--assortiment ul.products.fleur-asrt-grid {
		display: flex;
		grid-template-columns: none;
		flex-wrap: nowrap;
		gap: 16px;
		will-change: transform;
	}
	.fleur-page--assortiment ul.products.fleur-asrt-grid > li.product.fleur-card {
		flex: 0 0 calc((100% - 16px) / 2);
		min-width: 0;
		max-width: none;
	}
	.fleur-page--assortiment .fleur-asrt-group { margin-bottom: 48px; }
	.fleur-page--assortiment .fleur-asrt-group__title {
		font-size: clamp(24px, 5.5vw, 30px);
		margin-bottom: 24px;
	}

	/* USP-balk: vóór JS (of zonder marquee) de drie USP's onder elkaar,
	   gecentreerd, met kleinere verticale padding. Zodra theme.js .is-marquee
	   zet, neemt de marquee-opzet in qa-assortiment.css het over (doorlopende
	   rij). De :not(.is-marquee)-guard voorkomt dat deze kolomregel de marquee
	   platlegt. */
	.fleur-page--assortiment .fleur-asrt-usps:not(.is-marquee) .fleur-asrt-usps__inner {
		flex-direction: column;
		align-items: center;
		gap: 14px;
		padding-top: 26px;
		padding-bottom: 26px;
	}

	/* CTA "chocolade op maat": foto boven, tekst eronder (stapelen). */
	.fleur-page--assortiment .fleur-asrt-cta {
		grid-template-columns: 1fr;
	}
	.fleur-page--assortiment .fleur-asrt-cta__panel {
		padding: 40px 24px 48px;
		justify-content: center;
		text-align: center;
	}
	.fleur-page--assortiment .fleur-asrt-cta__text { margin-inline: auto; }
	.fleur-page--assortiment .fleur-asrt-cta__title {
		font-size: clamp(28px, 6.5vw, 40px);
	}
	.fleur-page--assortiment .fleur-asrt-cta__btn {
		width: 100%;
		padding: 0 24px;
	}
}

/* Zeer smalle telefoons: kleinere afstanden + tekst. */
@media (max-width: 600px) {
	.fleur-page--assortiment .fleur-asrt-usps__text { font-size: 14px; }
	.fleur-page--assortiment .fleur-asrt-cta__body {
		font-size: 15px;
		line-height: 1.7;
	}
}