/**
 * QA-fixes voor de pagina "Assortiment" (Chocolaterie Fleur).
 *
 * Alle regels zijn gescopet met .fleur-page--assortiment zodat niets buiten deze
 * pagina wordt geraakt. Nieuwe CSS uitsluitend hier (geen bestaande stylesheets
 * aanraken). Verwijst naar de huisstijl-tokens uit fonts.css :root:
 *   --fleur-aubergine #4c3d45 · --fleur-cream #f5f5f5 · --fleur-pink #e06283
 * Roze band uit het design = #f6bddd, check-icoon/tekst = #e06283.
 *
 * Fixes:
 *   1. USP-balk (roze band #f6bddd, 3 USP's met rond rose check + rose tekst).
 *   2. Sectiekoppen met een hoofdletter (WooCommerce-categorienamen kunnen
 *      lowercase zijn → text-transform: capitalize, gescopet).
 *   3. Product-thumbnails compact houden (aspect 299/325 hard afdwingen).
 *   4. Rijen met 1–3 producten links uitlijnen i.p.v. uitrekken.
 *
 * @package FleurChild
 */

/* =========================================================
   1. USP-balk — roze band met drie USP's (Figma 477:7828)
      Volle-breedte roze band; inhoud gecentreerd binnen de container.
   ========================================================= */
.fleur-page--assortiment .fleur-asrt-usps {
	background: #f6bddd;
	width: 100%;
	margin: 40px 0 44px;   /* full-bleed band tussen Reep chocolade en Hol figuren (design) */
}
.fleur-page--assortiment .fleur-asrt-usps__inner {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;              /* drie USP's gecentreerd, zoals het design */
	align-items: center;
	gap: 20px clamp(48px, 7vw, 120px);
	padding-top: 22px;
	padding-bottom: 22px;
}
.fleur-page--assortiment .fleur-asrt-usps__item {
	display: flex;
	align-items: center;
	gap: 12px;
}
.fleur-page--assortiment .fleur-asrt-usps__check {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	flex: 0 0 26px;
	border-radius: 50%;
	background: var(--fleur-pink, #e06283);  /* rose gevulde cirkel uit het design */
	color: #f6bddd;                          /* vinkje in de bandkleur (uitgespaard) */
}
.fleur-page--assortiment .fleur-asrt-usps__check svg {
	width: 16px;
	height: 16px;
	fill: currentColor;
	display: block;
}
.fleur-page--assortiment .fleur-asrt-usps__text {
	font-family: var(--fleur-font-sans);
	font-weight: 800;
	font-size: 15px;
	line-height: 1.3;
	color: var(--fleur-pink, #e06283);       /* rose vette tekst uit het design */
}

/* =========================================================
   2. Sectiekoppen — sentence-case zoals in het design
      De assortiment-categorieën heten nu netjes ("Breekchocolade",
      "Dubai chocolade", "Reep chocolade", "Hol figuren"); capitalize zou er
      "Dubai Chocolade" van maken, dus die zetten we uit.
   ========================================================= */
.fleur-page--assortiment .fleur-asrt-group__title {
	text-transform: none;
}

/* =========================================================
   3. Product-thumbnails compact — aspect 299/325 hard afdwingen
      Sommige rijen tonen portretfoto's; forceer overal dezelfde compacte
      verhouding als in het design zodat de kaarten niet vertikaal uitrekken.
   ========================================================= */
.fleur-page--assortiment .fleur-card__media {
	aspect-ratio: 299 / 325;
	height: auto;
	min-height: 0;
	max-height: none;
	overflow: hidden;
}
.fleur-page--assortiment .fleur-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

/* =========================================================
   4. Rijen met weinig producten links uitlijnen
      Het grid is 4 koloms; een categorie met 1–3 producten mag de kaarten NIET
      uitrekken. auto-columns + justify-content zorgen dat sparse rijen links
      groeperen met kaarten op normale kolombreedte i.p.v. de volle rij.
      (Welke categorieën/producten verschijnen is LIVE WooCommerce-data — dit is
       alleen een layout-fix, geen contentwijziging.)
   ========================================================= */
.fleur-page--assortiment ul.products.fleur-asrt-grid {
	grid-template-columns: repeat(4, minmax(0, 1fr));
	justify-content: start;
}
/* Kaartbreedte gelijk houden aan een normale kolom, ook als de rij niet vol is,
   zodat een enkel product niet over de hele rij wordt uitgerekt. Kolombreedte =
   (containerbreedte 1280 − 3 × gap 22) / 4 ≈ 299px, gelijk aan de designkaart. */
.fleur-page--assortiment ul.products.fleur-asrt-grid > li.product.fleur-card {
	max-width: 299px;
}

/* =========================================================
   Responsive
   Mobiel (≤981px): consolideert de oude ≤900px-regel op de mobiele
   breakpoint (982px = grens desktop/liggende tablet). USP-balk stapelt
   gecentreerd (in lijn met assortiment.css), kaarten mogen de volle
   kolombreedte gebruiken. Raakt NIETS ≥982px.
   ========================================================= */
@media (max-width: 981px) {
	.fleur-page--assortiment .fleur-asrt-usps {
		margin: 32px 0 40px;
	}
	.fleur-page--assortiment ul.products.fleur-asrt-grid > li.product.fleur-card {
		max-width: none;
	}

	/* ------------------------------------------------------------------
	   USP INFINITY-SLIDER (marquee) — op mobiel loopt de roze USP-balk als
	   een doorlopende band (theme.js kloont de items en zet .is-marquee op
	   de sectie via [data-fleur-marquee]/[data-marquee-inner]). Vervangt de
	   eerdere "stapel de 3 USP's onder elkaar"-opzet op ≤981px.
	   ------------------------------------------------------------------ */
	.fleur-page--assortiment .fleur-asrt-usps { overflow: hidden; }
	.fleur-page--assortiment .fleur-asrt-usps.is-marquee .fleur-asrt-usps__inner {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		width: max-content;
		max-width: none;
		align-items: center;
		justify-content: flex-start;
		gap: 0;
		animation: fleur-asrt-usps-marquee 22s linear infinite;
	}
	.fleur-page--assortiment .fleur-asrt-usps.is-marquee .fleur-asrt-usps__item {
		flex: 0 0 auto;
		padding-inline: 22px;
	}
	.fleur-page--assortiment .fleur-asrt-usps.is-marquee:hover .fleur-asrt-usps__inner {
		animation-play-state: paused;
	}
	@keyframes fleur-asrt-usps-marquee {
		from { transform: translateX(0); }
		to   { transform: translateX(-50%); }
	}

	/* Vóór JS (of als er <2 items zijn, geen marquee): stapel de USP's netjes
	   gecentreerd onder elkaar i.p.v. de brede desktop-rij. */
	.fleur-page--assortiment .fleur-asrt-usps:not(.is-marquee) .fleur-asrt-usps__inner {
		flex-direction: column;
		align-items: center;
		gap: 14px;
	}
}

/* =========================================================
   5. Reviews-kop — accent in ZACHT roze (#f6bddd), overige tekst zwart
      Zonder override valt "chocoladeliefhebbers" terug op --fleur-pink
      (donkerroze #e06283); het design (520:3797) gebruikt #f6bddd.
   ========================================================= */
.fleur-page--assortiment .fleur-rv__title { color: #000; }
.fleur-page--assortiment .fleur-rv__title em { color: #f6bddd; }

/* =========================================================
   6. Liggende tablet (982–1219px) — desktop-layout, compacter.
      Alles binnen deze breakpoint + gescoped op .fleur-page--assortiment.
      Dit bestand laadt ná assortiment.css, dus deze regels winnen (o.a. van de
      ≤1100 3-koloms en de desktop 4-koloms). Raakt NIETS ≤981 of ≥1220.
   ========================================================= */
@media (min-width: 982px) and (max-width: 1219px) {
	/* Productrasters: 4 kolommen (net als desktop). De pagina is full-width (geen
	   filter-sidebar), dus 3 kolommen maakte de kaarten fors groter dan de designkaart
	   (±369px @1194) én liet "Hol figuren" (4 producten) als 3+1 vallen. 4 kolommen
	   houdt de kaarten op ±230-283px (≤ de 299px-designkaart) en sluit naadloos aan op
	   de 4-koloms desktop bij 1220. Overschrijft de basis `max-width:1100px → 3 kolommen`.
	   De kaarten vullen hun kolom (cap uit) zodat er geen rechter-gaten ontstaan. */
	.fleur-page--assortiment ul.products.fleur-asrt-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 26px 20px;
	}
	.fleur-page--assortiment ul.products.fleur-asrt-grid > li.product.fleur-card {
		max-width: none;
	}

	/* Verticale ruimtes intomen t.o.v. desktop (geen grote leegtes op tablet). */
	.fleur-page--assortiment .fleur-asrt-body { padding: 40px 0 56px; }
	.fleur-page--assortiment .fleur-asrt-group { margin-bottom: 48px; }
	.fleur-page--assortiment .fleur-asrt-group__title { margin-bottom: 24px; }

	/* CTA "chocolade op maat": op de smallere kolom kan de tekst hoger worden dan
	   de vaste foto-verhouding (949/574) → grijze rand onder de foto. Foto de
	   volledige kolomhoogte laten vullen (aspect-ratio: auto is verplicht, anders
	   berekent height:100% een enorme breedte die overloopt). object-fit: cover op
	   de <img> staat al in assortiment.css. Tekst blijft verticaal gecentreerd
	   (paneel heeft al align-items: center). */
	.fleur-page--assortiment .fleur-asrt-cta { align-items: stretch; }
	.fleur-page--assortiment .fleur-asrt-cta__media {
		height: 100%;
		aspect-ratio: auto;
	}
	/* Alleen de royale zijpadding van het tekstpaneel intomen zodat titel/tekst
	   meer ademruimte krijgen op de smallere kolom. */
	.fleur-page--assortiment .fleur-asrt-cta__panel {
		padding: 40px clamp(24px, 4vw, 56px);
	}
}