/* Chocolaterie Fleur — single product QA-overrides.
   1:1 met Figma "Onze favoriete smaken in één doosje" (node 520:3040).

   Corrigeert t.o.v. product.css:
     - Alle samenvattings-tekst ZWART (design = text-black, niet aubergine).
     - Korte omschrijving volledig zichtbaar (geen clamp/afkapping).
     - "Opties:" + 4 maatknoppen (8/9/12/16 stuks) 1:1 met design.
     - USP-lijst met labels + juiste iconen (5 items), zwarte tekst.
     - Hoeveelheid-stepper + "Toevoegen aan winkelwagen"-knop (blijft aubergine).
     - Accordion Smaken/Allergieën/Bewaaradvies: zwart, ▼-pijl rechts, lijnen.
     - "Bekijk ook onze andere lekkernijen": roze band + 4 HOGE tegels
       (299/423) in de homepage-collectie-stijl, cream kop + labels.

   Laadt ná product.css (alfabetisch: p < q) → wint bij gelijke specificiteit.
   Volledig gescopet onder body.single-product. */

/* Design-zwart voor de producttekst. */
body.single-product { --fleur-prod-ink: #000; }

/* ============ Breadcrumb (design: donker/zwart) ============ */
body.single-product .sellabees-breadcrumb,
body.single-product .woocommerce-breadcrumb,
body.single-product .woocommerce-breadcrumb a {
	color: var(--fleur-prod-ink);
}

/* ============ Titel / omschrijving / prijs → ZWART ============ */
body.single-product .fleur-product__title {
	color: var(--fleur-prod-ink);
	font-size: 36px;
}
body.single-product .fleur-product__excerpt,
body.single-product .fleur-product__excerpt p {
	color: var(--fleur-prod-ink);
	/* Geen afkapping: volledige tekst zichtbaar (Figma node 520:3120). */
	display: block;
	-webkit-line-clamp: none;
	max-height: none;
	overflow: visible;
	text-overflow: clip;
}

/* Prijs zwart (huidige prijs). Doorgestreepte oude prijs blijft grijs. */
body.single-product .fleur-product__price.price,
body.single-product .fleur-product__price.price .woocommerce-Price-amount,
body.single-product .fleur-product__price.price .woocommerce-Price-amount bdi,
body.single-product .fleur-product__price.price .woocommerce-Price-currencySymbol,
body.single-product .fleur-product__price.price ins .woocommerce-Price-amount {
	color: var(--fleur-prod-ink);
}
body.single-product .fleur-product__price.price del,
body.single-product .fleur-product__price.price del .woocommerce-Price-amount { color: #acacac; opacity: 1; }

/* ============ Opties: label + 4 maatknoppen (8/9/12/16) ============ */
body.single-product .fleur-product__opties-label {
	font-family: var(--fleur-font-sans);
	font-weight: 900;
	font-size: 16px;
	text-transform: uppercase;
	color: var(--fleur-prod-ink);
	margin: 0 0 12px;
}
/* 4 knoppen op één rij (design y572). */
body.single-product .fleur-product__opties-btns {
	gap: 16px;
	flex-wrap: nowrap;
}
body.single-product .fleur-size-btn {
	flex: 0 1 106px;
	min-width: 0;
	width: 106px;
	height: 46px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 8px;
	border: 1px solid #d4d4d4;
	border-radius: 6px;
	background: #fff;
	font-family: var(--fleur-font-sans);
	font-size: 16px;
	line-height: 1;
	white-space: nowrap;
	color: var(--fleur-prod-ink);
}
body.single-product .fleur-size-btn:hover { border-color: var(--fleur-aubergine); }
body.single-product .fleur-size-btn--active {
	border-color: var(--fleur-aubergine);
	border-width: 1.5px;
	font-weight: 400; /* Figma: actieve maatknop DM Sans Regular */
}

/* ============ USP-lijst met labels (5 items) → zwart ============ */
/* Compacter: design 477:8600/6964 heeft ~30px regelafstand (was 32px + 6px gap
   = te veel witruimte tussen de USP's). */
body.single-product .fleur-product__usps { gap: 0; }
body.single-product .fleur-product__usp,
body.single-product .fleur-product__usp-txt {
	color: var(--fleur-prod-ink);
	font-size: 16px;
	line-height: 30px;
}
body.single-product .fleur-product__usp-ico { color: var(--fleur-prod-ink); }
/* "Op voorraad": vinkje groen (design), tekst zwart. */
body.single-product .fleur-product__usp--stock .fleur-product__usp-ico { color: #34a853; }
body.single-product .fleur-product__usp--stock { margin-top: 6px; }
/* Het groene vinkje mag iets groter dan de overige USP-iconen (design 477:7273). */
body.single-product .fleur-product__usp--stock .fleur-product__usp-ico { width: 20px; flex: 0 0 20px; }
body.single-product .fleur-product__usp--stock .fleur-product__usp-ico .fleur-ico--check { width: 20px; height: 20px; }
/* Samenstellen-link zwart. */
body.single-product .fleur-product__usp-link { color: var(--fleur-prod-ink); }
/* Uitverkocht-variant: rood kruisje/tekst i.p.v. groen vinkje. */
body.single-product .fleur-product__usp--oos .fleur-product__usp-ico { color: #c0392b; }

/* ============ Hoeveelheid-stepper + add-to-cart ============ */
/* Native spinner verborgen; eigen −/+ stepperknoppen (uniform met de
   bonbon-configurator) komen uit theme.js + product.css. Aantal-tekst zwart. */
body.single-product .fleur-product__summary form.cart .quantity .qty {
	-moz-appearance: textfield;
	appearance: textfield;
	color: #000;
}
/* Knoptekst zwart? Nee — knop blijft aubergine met cream tekst (design 520:3059). */

/* ============ Accordion → zwart + ▼-pijl rechts + lijnen ============ */
body.single-product .fleur-acc__title {
	color: var(--fleur-prod-ink);
	font-size: 18px;
}
body.single-product .fleur-acc__ico { color: var(--fleur-prod-ink); transition: transform .2s ease; }
/* Open accordion: pijl wijst naar BOVEN (je kunt hem dan weer dichtklikken). */
body.single-product .fleur-acc[open] .fleur-acc__ico { transform: rotate(180deg); }
body.single-product .fleur-acc__body,
body.single-product .fleur-acc__body p {
	color: var(--fleur-prod-ink);
	font-size: 16px;
	line-height: 32px;
}
/* Design (nodes 520:3169/3170/3171): scheidingslijn ONDER elke sectie, GEEN
   lijn boven "Smaken". */
body.single-product .fleur-acc {
	border-top: none;
	border-bottom: 1px solid #d9d9d9;
}

/* =========================================================
   "Bekijk ook onze andere lekkernijen" — roze band + 4 HOGE tegels
   (Figma 520:3041 band + 520:3191-3194 tegels 299×423 + kop 520:3184)
   Overschrijft de landscape-tegels uit live-sections.css.
   ========================================================= */
body.single-product .fleur-lekkernijen {
	position: relative;
	padding-top: 56px;
	padding-bottom: 96px;
	background: transparent;
	/* Volle breedte binnen de shop-container. */
	margin-top: 24px;
}
/* Roze band achter de kop + bovenkant van de tegels (design y1182–1498). */
body.single-product .fleur-lekkernijen::before {
	content: "";
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	width: 100vw;
	top: 0;
	height: 62%;
	background: var(--fleur-pink-soft);
	z-index: 0;
}
body.single-product .fleur-lekkernijen > .sellabees-container { position: relative; z-index: 1; }

/* Kop: DM Serif 36px, cream, "lekkernijen" cursief (node 520:3184). */
body.single-product .fleur-lekkernijen__title {
	font-family: var(--fleur-font-serif);
	font-weight: 400;
	font-size: clamp(28px, 3vw, 36px);
	line-height: 1.15;
	color: var(--fleur-cream);
	margin: 0 0 30px;
}
body.single-product .fleur-lekkernijen__title em { font-style: italic; }

/* 4 hoge tegels 299/423. */
body.single-product .fleur-lekkernijen__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}
/* Pijlnavigatie standaard verborgen: op desktop is dit een statisch 4-koloms
   raster (geen slider). Alleen ≤981px (slider) worden de pijlen getoond. */
body.single-product .fleur-lekkernijen__nav { display: none; }
body.single-product .fleur-lekkernijen__tile {
	position: relative;
	display: block;
	aspect-ratio: 299 / 423;
	border-radius: 5px;
	overflow: hidden;
	background: var(--fleur-aubergine);
}
body.single-product .fleur-lekkernijen__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .3s ease;
}
body.single-product .fleur-lekkernijen__tile:hover .fleur-lekkernijen__img { transform: scale(1.03); }
body.single-product .fleur-lekkernijen__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, rgba(0,0,0,0) 45%, rgba(0,0,0,.58) 100%);
}
body.single-product .fleur-lekkernijen__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);
}

/* =========================================================
   Layout-breedte (design 520:3040): afbeelding 616 + kolom 590 = 1262px.
   WooCommerce's plugin-CSS zet .summary { float:right; width:48% }, waardoor de
   samenvatting inklapt tot ~48% van de grid-cel (≈276px) en de rechterhelft leeg
   blijft. Forceer de samenvatting om haar volledige grid-kolom te vullen.
   ========================================================= */
body.single-product .fleur-product .fleur-product__main .fleur-product__summary {
	float: none;
	width: auto;
	max-width: none;
}

/* =========================================================
   Geen horizontale scroll: de full-bleed "lekkernijen"-band gebruikt width:100vw
   (incl. scrollbar-breedte) en steekt daardoor iets buiten de pagina. overflow-x:
   clip knipt die overschrijding weg ZONDER een scroll-container te maken (dus
   position:sticky/z-index blijven werken).
   ========================================================= */
body.single-product .site-main { overflow-x: clip; }

/* =========================================================
   Accordion soepel open/dicht: het JS (theme.js) animeert de <details>-hoogte
   via de Web Animations API; hier alleen overflow zodat de inhoud netjes clipt.
   ========================================================= */
body.single-product .fleur-acc__body { overflow: hidden; }

/* =========================================================
   "Kies je smaken"-knop (zelf-samenstellen samenvatting) — aubergine pill,
   anchor naar het configurator-blok. Vloeiend scrollen + offset onder de header.
   ========================================================= */
body.single-product .fleur-product__kies-smaken {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 228px; /* Figma: 'Kies je smaken' 228px breed */
	height: 53px;
	margin-top: 4px;
	padding: 0 28px;
	border-radius: 100px;
	background: var(--fleur-aubergine);
	color: var(--fleur-cream);
	font-family: var(--fleur-font-sans);
	font-weight: 900; /* Figma: DM Sans Black */
	font-size: 14px;
	letter-spacing: .02em;
	text-transform: uppercase;
	text-decoration: none;
}
/* Hover = lift (knop komt omhoog + zachte schaduw), gedefinieerd in de gedeelde
   .button:hover-regel (main.css) zodat alle knoppen op de site zich gelijk gedragen.
   Hier houden we alleen de ACHTERGROND + tekstkleur vast:
   KRITISCH: WooCommerce's default `.woocommerce a.button:hover` zet
   background-color:#dcd7e2 (lichtgrijs-paars) + color:#515151 (grijs). Omdat onze
   knop een <a class="button"> op een .woocommerce-pagina is, sloeg die regel toe
   en verkleurde de knop bij hover naar lichtgrijs — dát was de "gekke animatie".
   Met .button erbij (specificiteit 0,4,1 > WC's 0,3,1) wint deze regel altijd. */
body.single-product .fleur-product__kies-smaken.button:hover {
	background: var(--fleur-aubergine);
	color: #fff;
	/* Lift expliciet hier: WooCommerce's a.button-basisregel zet box-shadow met
	   hogere specificiteit dan de gedeelde .button:hover, dus die moeten we op
	   deze specifieke selector overrulen. */
	transform: translateY(-3px);
	box-shadow: 0 8px 20px rgba(76, 61, 69, .22);
}
body.single-product #selecteer-je-smaken { scroll-margin-top: 110px; }
html:has(body.single-product) { scroll-behavior: smooth; }

/* --- Mobile / portrait tablet (≤981px) — QA-laag boven product.css ---------
   De 4 maatknoppen (8/9/12/16 stuks) staan op desktop op één rij met
   flex-wrap:nowrap en vaste breedte 106px → op smalle schermen zou dat buiten
   de pagina lopen. Op mobiel laten we ze wrappen en meebuigen. Ook de
   "kies je smaken"-knop en het lekkernijen-blok krijgen mobiele maatvoering.
   Desktop + landscape tablet (≥982px) blijft identiek. */
@media (max-width: 981px) {
	/* Maatknoppen mogen wrappen + flexibel breed worden (geen overflow). */
	body.single-product .fleur-product__opties-btns {
		flex-wrap: wrap;
		gap: 10px;
	}
	body.single-product .fleur-size-btn {
		flex: 1 1 auto;
		width: auto;
		min-width: 84px;
	}

	/* "Kies je smaken"-knop over de volledige breedte. */
	body.single-product .fleur-product__kies-smaken { min-width: 0; width: 100%; }

	/* Titel gelijk trekken met product.css-mobiel. */
	body.single-product .fleur-product__title { font-size: clamp(28px, 6vw, 34px); }

	/* Lekkernijen-band: minder verticale ruimte op mobiel + strakker tegen de
	   accordion erboven (minder witruimte onder de accordion). */
	body.single-product .fleur-lekkernijen {
		margin-top: 8px;
		padding-top: 36px;
		padding-bottom: 28px;
		/* Full-bleed: breek uit de smalle product-kolom (342px) naar de VOLLE
		   schermbreedte, zodat (a) de roze band edge-to-edge loopt en (b) de tegels
		   net zo breed worden als de collectie-slider (2× ~164px i.p.v. 140px). */
		width: 100vw;
		margin-left: calc(50% - 50vw);
		margin-right: calc(50% - 50vw);
		/* ROZE BAND via GRADIENT i.p.v. een ::before. Een absolute ::before met
		   height:% faalt hier: de sectie heeft AUTO-hoogte, dus % → auto → de band
		   klapte in tot ~88px en stopte BÓVEN de afbeeldingen (dat zag de gebruiker).
		   Een gradient-achtergrond gebruikt de ECHTE (auto) sectiehoogte, dus de roze
		   rand stopt betrouwbaar rond het MIDDEN van de afbeeldingen (~66% van de
		   sectie); de onderhelft valt op het grijs. */
		background: linear-gradient(to bottom,
			var(--fleur-pink-soft) 0,
			var(--fleur-pink-soft) 66%,
			transparent 66%);
	}
	/* Head: titel links, pijlknoppen rechts — verticaal GECENTREERD t.o.v. de
	   (meerregelige) titel, zoals de collectie-head. */
	body.single-product .fleur-lekkernijen__head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 16px;
		margin-bottom: 18px;
	}
	body.single-product .fleur-lekkernijen__title { margin-bottom: 0; }
	body.single-product .fleur-lekkernijen__nav { display: flex; gap: 10px; flex: none; }
	body.single-product .fleur-lekkernijen__arrow {
		width: 42px; height: 42px;
		display: inline-flex; align-items: center; justify-content: center;
		padding: 0; border: 0; 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;
	}
	body.single-product .fleur-lekkernijen__arrow:hover { filter: brightness(.96); transform: translateY(-1px); }
	body.single-product .fleur-lekkernijen__arrow svg { width: 20px; height: 20px; }

	/* "Bekijk ook onze andere lekkernijen" → toppers-stijl 2-up slider op mobiel.
	   theme.js pakt de [data-fleur-slider]-hook op de grid al op; deze regels
	   winnen van de single-product grid-regels (hogere specificiteit + later
	   geladen) zodat het écht een flex-slider wordt i.p.v. een gestapeld raster.
	   grid-template-columns wordt onder display:flex genegeerd, dus de ≤1024/≤560
	   kolomregels hieronder verstoren dit niet (en ≥982 blijft een net raster). */
	body.single-product .fleur-lekkernijen__grid {
		display: flex;
		grid-template-columns: none;
		flex-wrap: nowrap;
		gap: 14px;   /* zelfde tegel-gap als de collectie-slider */
		will-change: transform;
	}
	body.single-product .fleur-lekkernijen__grid > .fleur-lekkernijen__tile {
		flex: 0 0 calc((100% - 14px) / 2);
		min-width: 0;
		max-width: none;
		/* Collectie-stijl: HOGE tegel, afbeelding vult 'm, met het WITTE label als
		   overlay linksonder (dat is de basis-opmaak — geen "label eronder" meer). */
	}
	/* Lang overlay-label ("Breekchocolade") mag afbreken i.p.v. afgekapt worden:
	   rechterrand begrenzen + normaal wrappen binnen de smalle tegel. */
	/* Label exact als de collectie-tegels: DM Sans Black 20px, crème, linksonder.
	   right + overflow-wrap zodat een lang, spatieloos woord ("Breekchocolade")
	   binnen de smalle tegel blijft i.p.v. te worden afgekapt. */
	body.single-product .fleur-lekkernijen__grid > .fleur-lekkernijen__tile .fleur-lekkernijen__label {
		left: 15px;
		right: auto;   /* geen rechter-bound (zoals de collectie) → korte labels op één regel */
		bottom: 14px;
		font-family: var(--fleur-font-sans);
		font-weight: 900;
		font-size: 20px;
		line-height: 1.1;
		color: var(--fleur-cream);
		white-space: normal;
		/* De zachte afbreekstreep (&shy;) in "Breek&shy;chocolade" is een geldige
		   afbreekkans die de regelafbreker vóór de anywhere-fallback gebruikt →
		   nette splitsing "Breek-/chocolade" i.p.v. midden in het woord.
		   hyphens:manual (default) expliciet, tegen een geërfde hyphens:none. */
		hyphens: manual;
		-webkit-hyphens: manual;
		overflow-wrap: anywhere;
	}
	/* De ::before-band UIT op mobiel: op auto-hoogte faalt height:% (band te klein).
	   De gradient-achtergrond hierboven neemt de rol van de roze band over. */
	body.single-product .fleur-lekkernijen::before { display: none; }
}

@media (max-width: 1024px) {
	body.single-product .fleur-lekkernijen__grid { grid-template-columns: repeat(2, 1fr); }
	body.single-product .fleur-lekkernijen::before { height: 40%; }
}
@media (max-width: 560px) {
	body.single-product .fleur-lekkernijen__grid { grid-template-columns: 1fr; }
	body.single-product .fleur-lekkernijen::before { height: 22%; }
}

/* --- Landscape tablet (982-1219px) — "lekkernijen"-band consistent maken -----
   Overschrijft de @media(max-width:1024) regels hierboven: die zetten 982-1024
   op 2 kolommen + ::before 40%, terwijl 1025-1219 op 4 kolommen + 62% bleef →
   een sprong midden in de tier. We maken het raster over de HÉLE tier 4 kolommen
   (1 nette rij, mirror desktop; er zijn 4 vaste tegels) en trekken de roze band +
   grote verticale padding proportioneel gelijk. Dit blok staat ná het
   max-width:1024-blok, zelfde specificiteit → wint in de 982-1024 overlap.
   ≤981 (slider) en ≥1220 (desktop) blijven ongemoeid. */
@media (min-width: 982px) and (max-width: 1219px) {
	/* Tegelraster: 4 kolommen over de hele tier. */
	body.single-product .fleur-lekkernijen__grid {
		grid-template-columns: repeat(4, 1fr);
	}
	/* Minder verticale ruimte in de band (desktop 56/96 → getrimd). */
	body.single-product .fleur-lekkernijen {
		padding-top: 44px;
		padding-bottom: 56px;
	}
	body.single-product .fleur-lekkernijen__title { margin-bottom: 24px; }
	/* Roze ::before-band consistent over de tier (was 62% base / 40% ≤1024). */
	body.single-product .fleur-lekkernijen::before { height: 60%; }
}