/* Chocolaterie Fleur — single product page.
   1:1 uit Figma "Productpagina" (node 520:3798). Volledig gescoped onder
   body.single-product / .fleur-product / .fleur-related — geen globale
   selectors die buiten de productpagina lekken. Tokens uit fonts.css :root;
   alleen pagina-eigen waarden hieronder. */

body.single-product {
	/* Pagina-achtergrond cream zoals het ontwerp (frame-fill #f5f5f5). */
	background: var(--fleur-cream);
	/* Hulpvariabelen (Figma-maten). */
	--fleur-prod-radius: 5px;
	--fleur-line-soft: #e4dfe1;
	--fleur-qty-border: #d9d9d9;
}

/* De WC-content (main) op cream + wat lucht onder de breadcrumb. */
body.single-product .site-main.sellabees-shop {
	background: var(--fleur-cream);
	padding-bottom: 0;
}
body.single-product .sellabees-breadcrumb,
body.single-product .woocommerce-breadcrumb {
	font-family: var(--fleur-font-sans);
	font-size: 14px;
	color: var(--fleur-aubergine);
	margin: 8px 0 18px;
}

/* =========================================================
   1. Hoofdlayout: galerij links, samenvatting rechts
   ========================================================= */
body.single-product .fleur-product {
	display: block;
}
body.single-product .fleur-product__main {
	display: grid;
	grid-template-columns: minmax(0, 616fr) minmax(0, 590fr);
	column-gap: 56px;
	align-items: start;
	margin: 4px 0 56px;
}

/* =========================================================
   2. Galerij (Figma 520:3868 hoofd 616×616 + thumbs 115×115)
   ========================================================= */
body.single-product .fleur-gallery { margin: 0; }
body.single-product .fleur-gallery__main {
	position: relative;
	margin: 0;
	border-radius: var(--fleur-prod-radius);
	overflow: hidden;
	background: #fff;
	aspect-ratio: 1 / 1;
}
body.single-product .fleur-gallery__main-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	display: block;
	border-radius: var(--fleur-prod-radius);
}
body.single-product .fleur-gallery__thumbs {
	list-style: none;
	margin: 14px 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 13px;
}
body.single-product .fleur-gallery__thumb {
	width: 115px;
	max-width: calc((100% - 26px) / 3);
}
body.single-product .fleur-gallery__thumb-btn {
	display: block;
	width: 100%;
	padding: 0;
	border: 2px solid transparent;
	border-radius: var(--fleur-prod-radius);
	background: #fff;
	cursor: pointer;
	overflow: hidden;
	aspect-ratio: 1 / 1;
	transition: border-color .15s ease;
}
body.single-product .fleur-gallery__thumb-btn img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: 3px;
}
body.single-product .fleur-gallery__thumb.is-active .fleur-gallery__thumb-btn,
body.single-product .fleur-gallery__thumb-btn:hover { border-color: var(--fleur-pink); }

/* =========================================================
   3. Samenvatting rechts
   ========================================================= */
body.single-product .fleur-product__summary {
	float: none;
	width: auto;
	margin: 0;
	max-width: 590px;
}

/* Titel (Figma 520:3874): DM Serif 36px. */
body.single-product .fleur-product__title {
	font-family: var(--fleur-font-serif);
	font-weight: 400;
	font-size: 36px;
	line-height: 1.15;
	color: var(--fleur-aubergine);
	margin: 0 0 14px;
}

/* Korte omschrijving (Figma 520:3875): 16px / 32px, aubergine. */
body.single-product .fleur-product__excerpt {
	font-size: 16px;
	line-height: 32px;
	color: var(--fleur-aubergine);
	max-width: 590px;
	margin: 0 0 18px;
}
body.single-product .fleur-product__excerpt p { margin: 0 0 .5em; }
body.single-product .fleur-product__excerpt p:last-child { margin-bottom: 0; }

/* Prijs (Figma 520:3873): DM Sans 25px, aubergine (ontwerp = bijna-zwart). */
body.single-product .fleur-product__price.price {
	font-family: var(--fleur-font-sans);
	font-weight: 400;
	font-size: 25px;
	line-height: 1.2;
	color: var(--fleur-aubergine);
	margin: 0 0 18px;
}
/* Forceer aubergine ook op de WC-prijsspans (anders lekt het thema-accent (roze) door). */
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-aubergine);
}
body.single-product .fleur-product__price.price del,
body.single-product .fleur-product__price.price del .woocommerce-Price-amount { opacity: .5; font-weight: 400; margin-right: 8px; }
body.single-product .fleur-product__price.price ins { text-decoration: none; }

/* Kortingsprijs 1:1 op Figma: oude prijs doorgehaald grijs (#acacac), sale-prijs
   dark-rose (#e06283) bold. */
body.single-product .fleur-product__price.price del,
body.single-product .fleur-product__price.price del .woocommerce-Price-amount { color: #acacac; opacity: 1; }
body.single-product .fleur-product__price.price ins,
body.single-product .fleur-product__price.price ins .woocommerce-Price-amount,
body.single-product .fleur-product__price.price ins .woocommerce-Price-amount bdi,
body.single-product .fleur-product__price.price ins .woocommerce-Price-currencySymbol { color: #e06283; font-weight: 700; }

/* Breadcrumb (Figma 520:3798): boven de productlayout, DM Sans 14px zwart. */
body.single-product .woocommerce-breadcrumb {
	font-family: var(--fleur-font-sans);
	font-size: 14px;
	color: #000;
	margin: 0 0 20px;
}
body.single-product .woocommerce-breadcrumb a { color: #000; text-decoration: none; }
body.single-product .woocommerce-breadcrumb a:hover { color: var(--fleur-pink); }

/* SALE-badge in de huisstijl (dark-rose pill met cream tekst) i.p.v. WooCommerce's
   olijfgroene default-cirkel. Hogere specificiteit dan WC-core `.woocommerce span.onsale`. */
body.single-product .fleur-product__gallery { position: relative; }
body.single-product .fleur-product .onsale {
	position: absolute;
	top: 16px;
	left: 16px;
	z-index: 2;
	margin: 0;
	min-width: 0;
	min-height: 0;
	width: auto;
	height: auto;
	padding: 7px 16px;
	border-radius: 100px;
	background: var(--fleur-pink);
	color: var(--fleur-cream);
	font-family: var(--fleur-font-sans);
	font-weight: 900;
	font-size: 13px;
	letter-spacing: .04em;
	text-transform: uppercase;
	line-height: 1;
}

/* USP-badges (Figma 520:3876-3878 + iconen). */
body.single-product .fleur-product__usps {
	list-style: none;
	margin: 0 0 22px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
body.single-product .fleur-product__usp {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 16px;
	line-height: 32px;
	color: var(--fleur-aubergine);
}
body.single-product .fleur-product__usp-ico {
	display: inline-flex;
	width: 18px;
	flex: 0 0 18px;
	color: var(--fleur-aubergine);
}
body.single-product .fleur-product__usp-ico .fleur-ico { width: 16px; height: 16px; }

/* G5: simpele producten tonen de USP-badges ICOON-ONLY (zonder tekstlabel),
   gestapeld onder elkaar — 1:1 met live. Het label blijft als .screen-reader-text
   aanwezig voor toegankelijkheid. */
body.single-product .fleur-product__usps--icons {
	gap: 4px;
}
body.single-product .fleur-product__usps--icons .fleur-product__usp {
	gap: 0;
}

/* PR1/PR2: USP-link "Wil jij je eigen doosje samenstellen, dat kan hier!". Live
   toont het eerste woord ("Wil") onderstreept/geaccentueerd; we maken de hele
   regel een link in de aubergine huisstijlkleur. */
body.single-product .fleur-product__usp-link {
	color: var(--fleur-aubergine);
	text-decoration: underline;
	text-underline-offset: 2px;
}
body.single-product .fleur-product__usp-link:hover { text-decoration: none; }

/* PR1/PR2: "Op voorraad"-indicator (groen vinkje). */
body.single-product .fleur-product__usp--stock { margin-top: 8px; }
body.single-product .fleur-product__usp--stock .fleur-product__usp-ico { color: #34a853; }

/* =========================================================
   3b. PR1/PR2: "OPTIES: 8 stuks / 10 stuks"-selector (favourites)
   ========================================================= */
body.single-product .fleur-product__opties {
	margin: 0 0 20px;
}
body.single-product .fleur-product__opties-label {
	margin: 0 0 10px;
	font-family: var(--fleur-font-sans);
	font-weight: 700;
	font-size: 14px;
	letter-spacing: .02em;
	color: var(--fleur-aubergine);
}
body.single-product .fleur-product__opties-btns {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
body.single-product .fleur-size-btn {
	display: inline-block;
	padding: 8px 18px;
	border: 1px solid transparent;
	border-radius: 4px;
	background: #fff;
	font-family: var(--fleur-font-sans);
	font-size: 14px;
	font-weight: 400;
	color: var(--fleur-aubergine);
	text-decoration: none;
	transition: border-color .15s ease;
}
body.single-product .fleur-size-btn:hover { border-color: #333; }
body.single-product .fleur-size-btn--active {
	border-color: #333;
	pointer-events: none;
	cursor: default;
}

/* Chocoladekeuze-knoppen (melk/wit/puur) op breekchocolade — <button> i.p.v. <a>,
   dus reset de browser-stijl; actief = gevuld aubergine en blijft klikbaar (wisselen). */
body.single-product .fleur-breek-choc__btn {
	font-family: var(--fleur-font-sans);
	font-size: 14px;
	line-height: 1.4;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
}
body.single-product .fleur-breek-choc__btn.fleur-size-btn--active {
	pointer-events: auto;
	cursor: pointer;
	border-color: var(--fleur-aubergine);
	background: var(--fleur-aubergine);
	color: #fff;
}

/* =========================================================
   4. Hoeveelheid + toevoegen aan winkelwagen (simpele producten)
   Figma: qty-box 53×45 (rand #d9d9d9, 2px radius) + knop aubergine pill.
   LET OP: de bonbon-selector (.bcs-wrap) heeft eigen styling en blijft intact.
   ========================================================= */
body.single-product .fleur-product__summary form.cart {
	display: flex;
	align-items: stretch;
	gap: 16px;
	margin: 4px 0 0;
}
/* Aantal-stepper — uniform met de bonbon-configurator (het "samenstellen van een
   box", .bcs-qty) en de winkelwagen: een horizontale [ − aantal + ]-box met een
   lichte rand, afgeronde hoeken en scheidingslijntjes rond het getal. De −/+
   knoppen (.fleur-qty-btn) worden door theme.js geïnjecteerd. De wrapper rekt via
   align-items:stretch (form.cart) mee met de hoogte van de add-to-cart-knop. */
body.single-product .fleur-product__summary form.cart .quantity {
	margin: 0;
	flex: 0 0 auto;
	display: inline-flex;
	flex-direction: row;
	align-items: stretch;
	width: auto;
	border: 1px solid var(--fleur-qty-border);
	border-radius: 6px;
	background: #fff;
	overflow: hidden;
}
body.single-product .fleur-product__summary form.cart .quantity .qty {
	flex: 0 0 auto;
	width: 46px;
	min-width: 0;
	height: auto;
	padding: 0;
	border: 0;
	border-left: 1px solid var(--fleur-qty-border);
	border-right: 1px solid var(--fleur-qty-border);
	background: #fff;
	font-family: var(--fleur-font-sans);
	font-size: 15px;
	font-weight: 600;
	text-align: center;
	color: #000;
	-moz-appearance: textfield;
	appearance: textfield;
}
body.single-product .fleur-product__summary form.cart .quantity .qty::-webkit-outer-spin-button,
body.single-product .fleur-product__summary form.cart .quantity .qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
/* − / + knoppen (theme.js) — zelfde look als de configurator: wit vlak,
   aubergine glyph, geen rand. */
body.single-product .fleur-product__summary form.cart .quantity .fleur-qty-btn {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	padding: 0;
	margin: 0;
	border: 0;
	background: #fff;
	color: var(--fleur-aubergine);
	font-family: var(--fleur-font-sans);
	font-size: 18px;
	font-weight: 400;
	line-height: 1;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: color .15s ease, background .15s ease;
}
body.single-product .fleur-product__summary form.cart .quantity .fleur-qty-btn:hover { background: #f5f5f5; }

/* Add-to-cart-knop: aubergine pill (overschrijft de globale roze .button). */
body.single-product .fleur-product__summary form.cart .single_add_to_cart_button,
body.single-product .fleur-product__summary .bcs-wrap .single_add_to_cart_button {
	/* inline-flex zodat het winkelwagen-icoon (::before) daadwerkelijk breedte
	   krijgt en naast de tekst verschijnt (design 477:8681). */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 329px;
	height: 53px;
	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;
}
body.single-product .fleur-product__summary form.cart .single_add_to_cart_button::before {
	content: "";
	width: 21px; height: 21px;
	margin-right: 10px;
	background: currentColor;
	-webkit-mask: var(--fleur-cart-ico) center/contain no-repeat;
	        mask: var(--fleur-cart-ico) center/contain no-repeat;
}
body.single-product .fleur-product__summary form.cart .single_add_to_cart_button:hover,
body.single-product .fleur-product__summary .bcs-wrap .single_add_to_cart_button:hover {
	background: var(--fleur-aubergine);
	color: #fff;
	/* Lift (omhoog + zachte schaduw), consistent met alle knoppen. Expliciet hier
	   omdat WooCommerce's a.button box-shadow met hogere specificiteit zet. */
	transform: translateY(-3px);
	box-shadow: 0 8px 20px rgba(76, 61, 69, .22);
}

/* Winkelwagen-icoon 1:1 uit het ontwerp (node 477:8681) als data-URI-mask. */
body.single-product {
	--fleur-cart-ico: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 21 21" fill="white"><path d="M20.7516 3.69747C20.8786 3.14899 20.4621 2.625 19.8992 2.625H3.71175L3.675 2.31787C3.59979 1.67949 3.29296 1.09089 2.81268 0.663668C2.3324 0.236445 1.71205 0.000299066 1.06925 0H0V1.75H1.06925C1.28356 1.75003 1.49042 1.82872 1.65057 1.97113C1.81073 2.11354 1.91305 2.30978 1.93812 2.52262L3.325 14.3071C3.40021 14.9455 3.70704 15.5341 4.18732 15.9613C4.6676 16.3886 5.28795 16.6247 5.93075 16.625H16.625C17.1083 16.625 17.5 16.2333 17.5 15.75C17.5 15.2667 17.1083 14.875 16.625 14.875H5.93075C5.7163 14.8749 5.50933 14.7962 5.34916 14.6535C5.18899 14.5109 5.08675 14.3145 5.06187 14.1015L4.84466 12.3913H18.0421C18.4492 12.3913 18.8026 12.1104 18.8945 11.7138L20.7516 3.69747ZM17.602 10.677H4.5775L3.91825 4.375H18.9061L17.602 10.677Z"/><path d="M8.75 21.0005C9.71653 21.0005 10.5 20.217 10.5 19.2505C10.5 18.2841 9.71653 17.5005 8.75 17.5005C7.7835 17.5005 7 18.2841 7 19.2505C7 20.217 7.7835 21.0005 8.75 21.0005Z"/><path d="M14 21.0005C14.9665 21.0005 15.75 20.217 15.75 19.2505C15.75 18.2841 14.9665 17.5005 14 17.5005C13.0335 17.5005 12.25 18.2841 12.25 19.2505C12.25 20.217 13.0335 21.0005 14 21.0005Z"/></svg>');
}

/* Voorraad-melding netjes boven het formulier. */
body.single-product .fleur-product__summary .stock {
	margin: 0 0 10px;
	font-size: 14px;
}

/* =========================================================
   5. Accordions Smaken / Allergieën / Bewaaradvies (Figma 520:3912-3926)
   ========================================================= */
body.single-product .fleur-product__accordions {
	margin: 30px 0 0;
	max-width: 553px;
}
body.single-product .fleur-acc {
	border-top: 1px solid var(--fleur-line-soft);
}
body.single-product .fleur-acc:last-child { border-bottom: 1px solid var(--fleur-line-soft); }
body.single-product .fleur-acc__head {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 16px 0;
}
body.single-product .fleur-acc__head::-webkit-details-marker { display: none; }
body.single-product .fleur-acc__title {
	font-family: var(--fleur-font-serif);
	font-weight: 400;
	font-size: 18px;
	color: var(--fleur-aubergine);
}
body.single-product .fleur-acc__ico {
	display: inline-flex;
	color: var(--fleur-aubergine);
	transition: transform .2s ease;
}
body.single-product .fleur-acc[open] .fleur-acc__ico { transform: rotate(180deg); }
body.single-product .fleur-acc__body {
	padding: 0 0 18px;
	font-size: 16px;
	line-height: 32px;
	color: var(--fleur-aubergine);
	max-width: 560px;
}
body.single-product .fleur-acc__body p { margin: 0 0 .4em; }
body.single-product .fleur-acc__body p:last-child { margin-bottom: 0; }

/* =========================================================
   6. Gerelateerde producten (Figma 520:3928 band + tegels)
   ========================================================= */
body.single-product .fleur-related {
	/* Full-bleed roze band binnen de container-context. */
	background: #f6bddd;
	margin: 0;
	padding: 60px 0 64px;
	/* Breekt uit de .sellabees-container (max 1280 + 24px padding). */
	margin-inline: calc(50% - 50vw);
}
body.single-product .fleur-related__inner { width: 100%; }
body.single-product .fleur-related__heading {
	font-family: var(--fleur-font-serif);
	font-weight: 400;
	font-size: clamp(28px, 3.4vw, 36px);
	line-height: 1.25;
	color: var(--fleur-cream);
	margin: 0 0 36px;
	max-width: 900px;
}
body.single-product .fleur-related__heading em { font-style: italic; }

body.single-product .fleur-related__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 22px;
}
body.single-product .fleur-related__item { margin: 0; }
body.single-product .fleur-related__card {
	display: block;
	position: relative;
	border-radius: var(--fleur-prod-radius);
	overflow: hidden;
	aspect-ratio: 299 / 423;
	color: var(--fleur-cream);
}
body.single-product .fleur-related__media {
	position: absolute;
	inset: 0;
	display: block;
}
body.single-product .fleur-related__media img,
body.single-product .fleur-related__media .fleur-related__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .4s ease;
}
body.single-product .fleur-related__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0,0,0,.05) 0%, rgba(0,0,0,.18) 55%, rgba(0,0,0,.42) 100%);
}
body.single-product .fleur-related__card:hover .fleur-related__media img { transform: scale(1.05); }
body.single-product .fleur-related__title {
	position: absolute;
	left: 16px;
	right: 16px;
	bottom: 18px;
	font-family: var(--fleur-font-sans);
	font-weight: 900;
	font-size: 20px;
	line-height: 1.2;
	color: var(--fleur-cream);
}

/* =========================================================
   7. WC-tabs (volledige beschrijving) — ingetogen onder de samenvatting
   ========================================================= */
body.single-product .woocommerce-tabs.wc-tabs-wrapper {
	max-width: 1280px;
	margin: 56px auto 0;
	padding: 0 24px;
}
body.single-product .woocommerce-tabs .tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	list-style: none;
	margin: 0 0 22px;
	padding: 0 0 8px;
	border-bottom: 1px solid var(--fleur-line-soft);
}
body.single-product .woocommerce-tabs .tabs li a {
	font-family: var(--fleur-font-sans);
	font-weight: 600;
	font-size: 15px;
	color: var(--fleur-aubergine);
}
body.single-product .woocommerce-tabs .tabs li.active a { color: var(--fleur-pink); }
body.single-product .woocommerce-tabs .panel h2 { font-family: var(--fleur-font-serif); font-size: 24px; }

/* =========================================================
   8. Responsief
   ========================================================= */
/* --- Mobile / portrait tablet (≤981px) — matches homepage patterns ---------
   Galerij boven, samenvatting eronder (1 kolom). Gerelateerde tegels 2 kolommen.
   Add-to-cart-knop vult de breedte. Secties krijgen minder verticale ruimte.
   Consolidatie van het oude 900px-blok (breakpoint → 981). Desktop + landscape
   tablet (≥982px) blijft identiek. */
@media (max-width: 981px) {
	/* Galerij + samenvatting stapelen: afbeelding boven, tekst eronder. */
	body.single-product .fleur-product__main {
		grid-template-columns: 1fr;
		row-gap: 28px;
		/* Minder witruimte ónder de accordion vóór de "lekkernijen"-band (mobiel). */
		margin: 4px 0 16px;
	}
	body.single-product .fleur-product__summary { max-width: none; }

	/* De accordion-groep sluit strak af: geen extra ondermarge, iets minder
	   top-lucht op mobiel zodat de sectie compacter oogt. */
	body.single-product .fleur-product__accordions { margin: 22px 0 0; }

	/* Titel iets kleiner op mobiel. */
	body.single-product .fleur-product__title { font-size: clamp(28px, 6vw, 34px); }

	/* Add-to-cart op mobiel: stepper + knop NAAST elkaar op één rij (design-wens),
	   op één regel — dus geen afbreken. De knoptekst "Toevoegen aan winkelwagen" is
	   lang, dus we winnen ruimte terug: compacte [ − n + ]-stepper, kleiner
	   knoplettertype zonder letter-spacing en zónder winkelwagen-icoontje (dat past
	   er niet meer bij op smalle telefoons). De knop groeit mee en vult de rest. */
	body.single-product .fleur-product__summary form.cart {
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: stretch;
		gap: 8px;
	}
	body.single-product .fleur-product__summary form.cart .quantity {
		flex: 0 0 auto;
	}
	body.single-product .fleur-product__summary form.cart .quantity .fleur-qty-btn { width: 28px; }
	body.single-product .fleur-product__summary form.cart .quantity .qty { width: 30px; font-size: 14px; }
	body.single-product .fleur-product__summary form.cart .single_add_to_cart_button {
		flex: 1 1 auto;
		min-width: 0;
		/* geen height-override → houdt de knop z'n normale 53px-hoogte; de stepper
		   rekt via align-items:stretch mee. */
		padding: 0 10px;
		font-size: 12px;
		letter-spacing: 0;
		white-space: nowrap;
		line-height: 1.2;
	}
	/* Winkelwagen-icoontje weg op mobiel: met icoon past de lange tekst niet op
	   één regel naast de stepper (dan brak 'ie in tweeën). */
	body.single-product .fleur-product__summary form.cart .single_add_to_cart_button::before {
		display: none;
	}

	/* Accordions mogen de volle breedte gebruiken. */
	body.single-product .fleur-product__accordions { max-width: none; }

	/* Gerelateerde producten: 2 kolommen + iets minder bandhoogte. */
	body.single-product .fleur-related { padding: 44px 0 48px; }
	body.single-product .fleur-related__heading { margin-bottom: 26px; }
	body.single-product .fleur-related__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	/* WC-tabs onder de samenvatting: gutter gelijk aan de container (24px). */
	body.single-product .woocommerce-tabs.wc-tabs-wrapper { margin-top: 40px; }
}

/* --- Kleine telefoons (≤600px) -------------------------------------------- */
@media (max-width: 600px) {
	body.single-product .fleur-product__title { font-size: 28px; }
	/* Gerelateerde tegels naar 1 kolom (kaarten zijn hoog/smal). */
	body.single-product .fleur-related__grid { grid-template-columns: 1fr; }

	/* Op kleine telefoons de rij zo krap mogelijk houden zodat de knoptekst op één
	   regel naast de stepper blijft: minimale gap. */
	body.single-product .fleur-product__summary form.cart { gap: 6px; }
}

/* --- Landscape tablet (982-1219px) — 2-koloms productlayout narrowt ---------
   Galerij + samenvatting blijven naast elkaar (geen stapeling zoals ≤981); we
   trimmen alleen de kolom-gap en de grote verticale marges zodat de kolommen op
   de smalle breedte iets meer lucht krijgen en er geen leegte tussen de secties
   ontstaat. De OPTIES-maatknoppen (max 4) krimpen met flex-shrink netjes binnen
   de samenvatting (~429px+ breed hier) — geen overflow, dus onaangeroerd.
   ≤981 (gestapeld) en ≥1220 (desktop) blijven ongemoeid. */
@media (min-width: 982px) and (max-width: 1219px) {
	body.single-product .fleur-product__main {
		column-gap: 40px;
		margin: 4px 0 48px;
	}
	/* Add-to-cart op liggende tablet: stepper + knop NAAST elkaar op één rij, op
	   één regel. De samenvattingskolom is hier breder dan op de telefoon, dus het
	   icoontje mag blijven en het lettertype hoeft niet te krimpen; enkel de knop-
	   min-breedte (329px) los + wat compactere padding zodat de rij netjes past. */
	body.single-product .fleur-product__summary form.cart {
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: stretch;
		gap: 10px;
	}
	body.single-product .fleur-product__summary form.cart .quantity { flex: 0 0 auto; }
	body.single-product .fleur-product__summary form.cart .single_add_to_cart_button {
		flex: 1 1 auto;
		min-width: 0;
		padding: 0 16px;
		white-space: nowrap;
	}
	/* WC-tabs onder de samenvatting: minder top-lucht (gelijk aan mobiel). */
	body.single-product .woocommerce-tabs.wc-tabs-wrapper { margin-top: 40px; }
}