/* Poppins SemiBold — uitsluitend voor het variatie-label (Figma 483:30122
   "Kleur" = Poppins SemiBold 16px). Geen lokaal Poppins-bestand aanwezig; @import
   moet bovenaan de stylesheet staan om geldig te zijn. */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@600&display=swap");

/**
 * Productpagina (single-product) — Brock-huisstijl.
 * Figma node 482:8066 (simpel) / 482:8551 (variabel).
 * Wordt automatisch ingeladen via de assets/css/pages/*.css glob.
 */

.sellabees-product {
	background: #fff;
	padding-top: 16px;   /* Figma 1920: breadcrumb/galerij omhoog (−10px) → titel-top ≈263, galerij-top ≈269 */
	padding-bottom: 0;
}

/* ---------- Breadcrumb ---------- */
/* WC' eigen `.woocommerce .woocommerce-breadcrumb` (0,2,0) kleurt 'm grijs (#767676)
   en wint van de kale themaklasse → met `.woocommerce`-prefix (0,2,1) verslaan,
   conform Figma: breadcrumb zwart (483:29672 = text-black, #000). */
.woocommerce nav.sellabees-product__breadcrumb,
.sellabees-product__breadcrumb {
	font-family: var(--sellabees-font-body);
	font-weight: 300;
	font-size: 14px;
	color: var(--sellabees-ink);
	margin: 24px 0 28px;
}
.woocommerce nav.sellabees-product__breadcrumb a,
.sellabees-product__breadcrumb a {
	color: var(--sellabees-ink);
	text-decoration: none;
}
.sellabees-product__breadcrumb a:hover { text-decoration: underline; }

/* ---------- Hoofd-layout: galerij links, samenvatting rechts ---------- */
/* Productcontent = ~1203px gecentreerd (Figma: x358–1561), niet de brede
   1458px-shopcontainer. Geldt voor hoofd-grid, onderste rij, gerelateerd
   én de shop-trust-secties binnen .sellabees-product. */
.sellabees-product .sellabees-container {
	max-width: 1251px; /* 1251 − 2×24 gutter = 1203px content */
}
.sellabees-product__main {
	display: grid;
	grid-template-columns: 500px minmax(0, 570px);
	gap: 113px;
	align-items: start;
}
/* WC' woocommerce-layout.css zet `.woocommerce div.product div.summary
   { float:right; width:48% }` (0,3,2) → versmalt mijn samenvatting-kolom.
   Hoger-specifiek herstellen naar volle kolombreedte. */
.woocommerce div.product .summary.sellabees-product__summary {
	float: none;
	width: 100%;
}
/* Idem voor de galerij-kolom (div.images float:left; width:48%). */
.woocommerce div.product .sellabees-product__gallery {
	float: none;
	width: 100%;
}

/* ---------- Galerij ---------- */
.sellabees-product__gallery { position: relative; }
.sellabees-product__gallery .woocommerce-product-gallery { width: 100% !important; margin: 0; }
.sellabees-product__gallery .woocommerce-product-gallery__image img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 0;
}
.sellabees-product__gallery .woocommerce-product-gallery .flex-control-thumbs {
	display: flex;
	gap: 12px;
	margin: 18px 0 0;
	padding: 0;
	list-style: none;
}
.sellabees-product__gallery .woocommerce-product-gallery .flex-control-thumbs li {
	width: 100px;
	margin: 0;
}
/* Elke thumbnail in een vaste vierkante box met object-fit:contain, net als de
   hoofdfoto hieronder. De bronfoto's lopen door elkaar qua beeldverhouding (1500×1500
   naast 700×318 en 250×100); zonder deze box zou een brede foto lager en breder in de
   strip staan dan de rest, of — met WooCommerce' eigen gecropte maat — ingezoomd.
   Klantmelding 2026-08-10: "kunnen die variaties gelijk als de rest weergegeven worden". */
.sellabees-product__gallery .woocommerce-product-gallery .flex-control-thumbs img {
	width: 100%;
	aspect-ratio: 1 / 1;
	height: auto;
	object-fit: contain;
	background: #fff;
	border: 1px solid var(--sellabees-border);
	opacity: 1;
}

/* Galerij-hoofdfoto in een vaste, vierkante box (klantfeedback): extreem brede/dunne
   keu-foto's lieten de flexslider-viewport inklappen (bv. 45px) en de hoogte sprong per
   slide bij gemengde beeldverhoudingen. Nu vaste verhouding + object-fit:contain → elke
   foto volledig zichtbaar én gecentreerd, met consistente hoogte. De !important overrulet
   de inline pixel-hoogte die flexslider zelf op .flex-viewport zet. Alleen desktop; mobiel
   (≤981px) houdt zijn eigen vierkante cover-weergave. */
@media (min-width: 982px) {
	/* De viewport krijgt een vaste vierkante verhouding: aspect-ratio levert een echte
	   hoogte op, óók met flexslider's gefloate slides → de galerij klapt niet meer in.
	   De <a> rond de foto wordt óók een vierkante box, zodat de <img> daarbinnen een
	   definitieve hoogte heeft om te vullen (height:100% lost direct op tegen de
	   aspect-ratio van de <a>, net als bij de productkaarten). object-fit:contain toont
	   de foto volledig en gecentreerd. */
	.sellabees-product__gallery .flex-viewport { height: auto !important; aspect-ratio: 1 / 1; }
	.sellabees-product__gallery .woocommerce-product-gallery__image > a { display: block; width: 100%; aspect-ratio: 1 / 1; }
	/* Specificiteit (0,4,2) — verslaat WooCommerce' eigen `.woocommerce div.product div.images img`
	   (0,3,3) die anders height:auto forceert (dunne foto bleef 45px). */
	.woocommerce div.product .sellabees-product__gallery .woocommerce-product-gallery__image img {
		width: 100%;
		height: 100%;
		object-fit: contain;
		object-position: center;
	}
}

/* ---------- Samenvatting ---------- */
.sellabees-product__summary { font-family: var(--sellabees-font-body); }

.sellabees-product__title {
	font-family: var(--sellabees-font-heading);
	font-weight: 400;
	font-size: 30px;
	line-height: 1.1;
	color: var(--sellabees-ink);
	margin: 0 0 6px;
	text-transform: none;
}
/* WC' `.woocommerce div.product .product_title` (0,3,0) zet eigen margin → mijn
   kale klasse verliest. Met de .woocommerce-keten de titel −6px omhoog t.o.v. de
   galerij trekken (Figma 1920: titel-top ≈263, galerij-top ≈269). */
.woocommerce div.product .sellabees-product__title {
	margin-top: -6px;
}

/* WC' `.woocommerce div.product p.price` (0,3,2 — kleur #958e09) lekt door op de
   prijs <p> en de variatie-prijs → met `.woocommerce div.product`-prefix (0,4,2+)
   forceren we zwart conform Figma (483:29678 = text-black). */
.woocommerce div.product p.price.sellabees-product__price,
.woocommerce div.product p.price.sellabees-product__price .woocommerce-Price-amount,
.woocommerce div.product p.price.sellabees-product__price .woocommerce-Price-amount bdi,
.woocommerce div.product p.price.sellabees-product__price .woocommerce-Price-currencySymbol,
.sellabees-product__price,
.sellabees-product__price .woocommerce-Price-amount,
.sellabees-product__price ins,
.sellabees-product__price del,
.sellabees-product__summary .woocommerce-variation-price .price,
.sellabees-product__summary .woocommerce-variation-price .price .woocommerce-Price-amount {
	font-family: var(--sellabees-font-heading);
	font-weight: 400;
	font-size: 20px;
	color: var(--sellabees-ink);
}
.sellabees-product__price { margin: 0 0 14px; }
.sellabees-product__price del { opacity: .5; margin-right: 8px; }
.sellabees-product__price ins { text-decoration: none; }

/* WC stopt bij een variabel product een zichtbare/leesbare "Prijsklasse: € … tot
   € …"-span (.screen-reader-text) ín de prijs <p>; die mag niet getoond worden
   (Figma toont alleen de range). Hard verbergen — voorkomt dubbele prijsregel. */
.sellabees-product__price .screen-reader-text {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	margin: -1px !important;
	padding: 0 !important;
	border: 0 !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	clip-path: inset(50%) !important;
	white-space: nowrap !important;
}

.sellabees-product__brand {
	font-family: var(--sellabees-font-body);
	font-weight: 300;
	font-size: 14px;
	margin: 0 0 14px;
}
.sellabees-product__brand a {
	color: var(--sellabees-red);
	text-decoration: underline;
}

.sellabees-product__short {
	font-family: var(--sellabees-font-body);
	font-weight: 300;
	font-size: 14px;
	line-height: 21px;
	color: var(--sellabees-ink);
	margin: 0 0 22px;
}
.sellabees-product__short p { margin: 0 0 4px; }

/* ---------- USP-checklijst ---------- */
.sellabees-product__usps {
	list-style: none;
	margin: 0;
	padding: 18px 0;
	border-top: 1px solid var(--sellabees-border);
	border-bottom: 1px solid var(--sellabees-border);
}
.sellabees-product__usps li {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 6px;
}
.sellabees-product__usps li:last-child { margin-bottom: 0; }
.sellabees-product__usps span {
	font-family: var(--sellabees-font-body);
	font-weight: 800;
	font-size: 14px;
	color: var(--sellabees-ink);
}
.sellabees-product__check { color: #12b347; flex: 0 0 auto; }   /* Figma 482:8309: kale check #12B347 */

/* ---------- Voorraad-badge (boven USP-checklijst, Figma 482:8316/8319) ---------- */
.sellabees-product__stock {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 104px;
	height: 30px;
	box-sizing: border-box;
	font-family: var(--sellabees-font-body);
	font-weight: 800;
	font-size: 14px;
	color: #12b347;
	border: 1px solid #12b347;
	border-radius: 2px;
	margin: 0 0 18px;
}
/* Voorraad-staten (klantfeedback): beperkt = oranje, niet op voorraad = rood. */
.sellabees-product__stock--low {
	color: #ef7d00;
	border-color: #ef7d00;
}
.sellabees-product__stock--out {
	color: #e30613;
	border-color: #e30613;
	width: auto;             /* "Niet op voorraad" is breder dan de vaste 104px-badge */
	padding: 0 14px;
}

/* Lage voorraad (klantfeedback): "Nog X op voorraad" onder de badge — oranje, past
   bij de oranje "beperkt op voorraad"-staat. */
.sellabees-product__low-stock {
	font-family: var(--sellabees-font-body);
	font-weight: 800;
	font-size: 14px;
	color: #ef7d00;
	margin: -10px 0 18px;
}

/* WC' eigen numerieke voorraadtekst ("54 op voorraad") verbergen — het design
   toont alleen de groene "Op voorraad"-badge hierboven (Figma 482:8316/8319). */
.sellabees-product__summary p.stock {
	display: none;
}

/* Variabel product: de gekozen variatieprijs wordt BOVENAAN getoond
   (.sellabees-product__price, bijgewerkt via JS) → het standaard WooCommerce-prijsblok
   ónder het formulier verbergen om een dubbele prijs te voorkomen. Alleen wanneer de JS
   actief is (klasse .brock-varprice-js op de summary), anders blijft 'ie zichtbaar. */
.brock-varprice-js .woocommerce-variation-price {
	display: none;
}

/* Levertijd-regel onder add-to-cart (Figma 482:8291-8293 desktop / 483:29729-29731
   mobiel). Icoon = groene cirkel Ø15 met witte check (482:8291 ellipse + 482:8292
   vector), 8px gat tot de tekst (icoon eindigt x986, tekst start x994). Tekst =
   Avenir LT Pro Book 12px #212121 (482:8293). Beide identiek desktop/mobiel. */
.sellabees-product__delivery {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--sellabees-font-body);
	font-weight: 300;
	font-size: 12px;
	line-height: 14px;
	color: #212121;
	margin: 14px 0 0;
}
.sellabees-product__delivery-icon {
	flex: 0 0 15px;
	width: 15px;
	height: 15px;
	display: block;
}

/* ---------- WooCommerce add-to-cart (variaties, aantal, knop) ---------- */
/* :not(.variations_form) — bij een variabel product is .cart de hele
   variaties-form; die moet BLOK blijven (dropdowns vol breed), anders klappen
   de selects samen. De aantal+knop-flexrij zit daar in .woocommerce-variation-add-to-cart. */
.sellabees-product__summary .cart:not(.variations_form) {
	margin: 22px 0 0;
	display: flex;
	flex-wrap: nowrap;        /* aantal + knop op één regel (Figma 482:8283/8295, beide y706) */
	align-items: center;
	gap: 9px;                 /* aantal eindigt x1024, knop start x1033 = 9px */
}
/* WC' clearfix `.woocommerce div.product form.cart::before/::after` (spec 0,3,2)
   wordt in de flex-rij een leeg flex-item → mét de gap een spookruimte vóór het
   aantal-veld. Met exact WC's specificiteit (laadt later → wint) uitschakelen. */
.woocommerce div.product form.cart::before,
.woocommerce div.product form.cart::after {
	content: none;
	display: none;
}
/* Knop naast het 53×53 aantal-vak: vaste breedte, niet meegroeien/krimpen. */
.sellabees-product .sellabees-product__summary .cart .single_add_to_cart_button {
	flex: 0 0 260px;
}
.sellabees-product__summary .cart .quantity { flex: 0 0 53px; }

/* Variatie-tabel (variabel product, node 482:8551) */
.sellabees-product__summary .variations {
	width: 100%;
	margin: 0 0 18px;
	border: 0;
}
.sellabees-product__summary .variations td,
.sellabees-product__summary .variations th {
	display: block;
	padding: 0;
	border: 0;
	text-align: left;
}
/* Label BOVEN het veld (block-th, niet links in een tabelkolom), Poppins
   SemiBold 16px (Figma 483:30122). WC' eigen `.variations label` zet 700/andere
   stijl → met de .woocommerce-keten (hogere specificiteit) verslaan. */
.woocommerce div.product .sellabees-product__summary .variations .label label,
.sellabees-product__summary .variations .label label {
	display: block;
	font-family: "Poppins", var(--sellabees-font-body);
	font-weight: 600;
	font-size: 16px;
	color: var(--sellabees-ink);
	margin: 0 0 8px;
}
.sellabees-product__summary .variations .value { margin: 0 0 10px; }
.sellabees-product__summary .variations select {
	width: 100%;
	min-width: 0;          /* WC zet min-width:75% → forceer volle kolombreedte */
	display: block;
	height: 42px;
	border: 1px solid #d9d9d9;
	border-radius: 2px;
	padding: 0 14px;
	font-family: var(--sellabees-font-body);
	font-weight: 300;
	font-size: 14px;
	color: var(--sellabees-ink);   /* gekozen waarde = #000 (Figma); placeholder grijs via :has() hieronder */
	background: #fff;
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23231f20' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
}
/* Attribuut met maar ÉÉN keuze: die is automatisch gekozen (theme.js
   initSingleOptionVariations), dus valt er niets te kiezen. Geen pijltje en niet
   uitklapbaar — het veld toont enkel de vaste waarde (klantwens 2026-08-13).
   ⚠️ Bewust GEEN `disabled` op de select: een uitgeschakeld veld stuurt de browser
   niet mee bij "toevoegen aan winkelwagen", waardoor het attribuut zou wegvallen.
   `pointer-events` blokkeert het uitklappen; theme.js zet ook tabindex="-1".
   ⚠️ De selector moet mee met WooCommerce' eigen
   `.woocommerce div.product form.cart .variations select` (0,4,3) — die zet het
   pijltje, `cursor:pointer` en `padding-right:3em` en verslaat een kale
   thema-selector (0,3,1). Het zichtbare pijltje kwam dus van WooCommerce, niet van
   de themaregel hierboven. */
.woocommerce div.product form.cart .variations select.sellabees-variation--vast,
.sellabees-product__summary .variations select.sellabees-variation--vast {
	background-image: none;
	padding-right: 14px;
	pointer-events: none;
	cursor: default;
}

/* Placeholder grijs: zolang de lege "Selecteer een kleur"-optie geselecteerd is
   (value=""), toon de selecttekst in #a19ea1 (Figma). Bij een echte keuze wint
   de selectregel hierboven weer → terug naar #000/zwart. */
.variations select:has(option[value=""]:checked) {
	color: var(--sellabees-placeholder);
}
.sellabees-product__summary .woocommerce-variation-add-to-cart {
	width: 100%;
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 9px;
}
.sellabees-product__summary .woocommerce-variation-price .price,
.sellabees-product__summary .woocommerce-variation-price .price .woocommerce-Price-amount {
	font-family: var(--sellabees-font-heading);
	font-size: 20px;
	color: var(--sellabees-black);
}
.sellabees-product__summary .reset_variations {
	font-family: var(--sellabees-font-body);
	font-size: 13px;
	color: var(--sellabees-red);
}

/* ---------- Aantal-stepper (Figma 482:8283 desktop / 483:29722 mobiel) ----------
   Het 53×53 aantal-vak (border 1px #d9d9d9, radius 2px). Een andere agent heeft de
   native spinner vervangen door echte knoppen (.sellabees-qty met
   .sellabees-qty__minus/plus rond de <input.qty>). Figma toont het getal in een
   53×53 vak met de twee kleine pijl-knoppen rechts gestapeld; we leggen het getal
   centraal en pinnen −/+ als smalle spinnerkolom rechts in het vak. */
.sellabees-product__summary .quantity,
.sellabees-product__summary .sellabees-qty {
	position: relative;
	display: inline-flex;
	align-items: center;
	box-sizing: border-box;
	border: 1px solid #d9d9d9;
	border-radius: 2px;
	height: 53px;
	width: 53px;
	padding: 0;
	background: #fff;
	overflow: hidden;
}
/* Getal: vult het vak, gecentreerd; laat 16px ruimte rechts vrij voor de
   −/+ spinnerkolom zodat het cijfer niet onder de knoppen valt. */
.sellabees-product__summary .sellabees-qty .qty,
.sellabees-product__summary .quantity .qty {
	width: 100%;
	height: 51px;
	border: 0;
	margin: 0;
	padding: 0 16px 0 0;
	text-align: center;
	font-family: var(--sellabees-font-body);
	font-weight: 300;
	font-size: 16px;
	line-height: 51px;
	color: var(--sellabees-black);
	-moz-appearance: textfield;
	appearance: textfield;
	background: transparent;
	box-shadow: none;
}
/* Native spinner verbergen (we hebben eigen knoppen). */
.sellabees-product__summary .sellabees-qty .qty::-webkit-outer-spin-button,
.sellabees-product__summary .sellabees-qty .qty::-webkit-inner-spin-button,
.sellabees-product__summary .quantity .qty::-webkit-outer-spin-button,
.sellabees-product__summary .quantity .qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	appearance: none;
	margin: 0;
}
/* −/+ knoppen: smalle gestapelde spinnerkolom rechts (16px breed, elk halve hoogte),
   gescheiden door een dunne lijn — zoals de twee pijlen in Figma. */
.sellabees-product__summary .sellabees-qty__btn {
	position: absolute;
	right: 0;
	width: 16px;
	height: 25px;
	margin: 0;
	padding: 0;
	border: 0;
	border-left: 1px solid #d9d9d9;
	background: #fff;
	color: var(--sellabees-ink);
	font-family: var(--sellabees-font-body);
	font-size: 14px;
	line-height: 1;
	font-weight: 400;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	-webkit-appearance: none;
	appearance: none;
	transition: background .12s ease, color .12s ease;
}
.sellabees-product__summary .sellabees-qty__plus {
	top: 0;
	border-bottom: 1px solid #d9d9d9;
}
.sellabees-product__summary .sellabees-qty__minus {
	bottom: 0;
}
.sellabees-product__summary .sellabees-qty__btn:hover {
	background: var(--sellabees-search-bg, #f4f4f4);
}
.sellabees-product__summary .sellabees-qty__btn:active {
	color: var(--sellabees-red);
}
/* Design (Figma 482:8284/8287): gevulde driehoekjes i.p.v. +/− — boven = omhoog
   (meer), onder = omlaag (minder). De +/− tekst verbergen (font-size:0) en een
   massieve driehoek tekenen via ::before (border-truc). */
.sellabees-product__summary .sellabees-qty__btn {
	font-size: 0;
}
.sellabees-product__summary .sellabees-qty__btn::before {
	content: "";
	display: block;
	width: 0;
	height: 0;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
}
.sellabees-product__summary .sellabees-qty__plus::before {
	border-bottom: 7px solid currentColor;   /* gevulde driehoek omhoog ▲ */
}
.sellabees-product__summary .sellabees-qty__minus::before {
	border-top: 7px solid currentColor;      /* gevulde driehoek omlaag ▼ */
}

/* Toevoegen-aan-winkelwagen-knop */
.sellabees-product .sellabees-product__summary .single_add_to_cart_button,
.sellabees-product .sellabees-product__summary button.single_add_to_cart_button {
	min-width: 260px;
	height: 53px;
	border: 0;
	border-radius: 0;
	background: var(--sellabees-red) !important;
	color: #fff !important;
	font-family: var(--sellabees-font-heading);
	font-weight: 400;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: .3px;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	transition: background .15s ease;
	padding: 0 22px;
}
.sellabees-product__summary .single_add_to_cart_button::before {
	content: "";
	width: 21px;
	height: 21px;
	background: #fff;
	-webkit-mask: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 18a2 2 0 102 2 2 2 0 00-2-2zm10 0a2 2 0 102 2 2 2 0 00-2-2zM7.2 14h9.5a2 2 0 001.9-1.4l2.3-7.6H6.2L5.3 2H2v2h2l3.6 7.6-1.4 2.5A2 2 0 007.2 16H19v-2H7.2z'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 18a2 2 0 102 2 2 2 0 00-2-2zm10 0a2 2 0 102 2 2 2 0 00-2-2zM7.2 14h9.5a2 2 0 001.9-1.4l2.3-7.6H6.2L5.3 2H2v2h2l3.6 7.6-1.4 2.5A2 2 0 007.2 16H19v-2H7.2z'/%3E%3C/svg%3E") no-repeat center / contain;
	flex: 0 0 auto;
}
.sellabees-product__summary .single_add_to_cart_button:hover { background: var(--sellabees-red-dark); }

/* ---------------------------------------------------------
   NIET-BESTELBAAR duidelijk anders dan bestelbaar
   (klantfeedback 2026-07-29: "het verschil is erg klein/onduidelijk").

   Hier stond alleen `opacity: .55; cursor: not-allowed`, maar dat kwam er niet
   door: WooCommerce' eigen `.woocommerce button.button.disabled` is specifieker
   en zette opacity op .5 én de cursor terug op pointer. Netto zag je alleen een
   iets lichter rood — wat je makkelijk voor een hover-effect aanziet.

   Nu een grijze knop i.p.v. een bleke rode: onmiskenbaar uit, en de rode knop
   blijft exclusief de échte actie. `!important` is nodig omdat de basisregel
   hierboven background/color ook met `!important` zet.

   Drie situaties, allemaal dezelfde weergave:
     .disabled / :disabled            → algemeen niet bestelbaar
     .wc-variation-selection-needed   → nog geen variatie gekozen
     .wc-variation-is-unavailable     → gekozen variatie niet leverbaar
   --------------------------------------------------------- */
/* LET OP de specificiteit: de basisregel hierboven is
   `.sellabees-product .sellabees-product__summary button.single_add_to_cart_button`
   (3 klassen + element) MÉT !important. Een regel met 3 klassen verliest daarvan,
   ook met !important — vandaar `.sellabees-product` erbij plus `:is(…)`, wat op
   4 klassen uitkomt. Klassen wegen zwaarder dan elementen, dus deze wint. */
.sellabees-product .sellabees-product__summary .single_add_to_cart_button:is(.disabled, :disabled, .wc-variation-selection-needed, .wc-variation-is-unavailable),
.sellabees-product .sellabees-product__summary .single_add_to_cart_button:is(.disabled, :disabled, .wc-variation-selection-needed, .wc-variation-is-unavailable):hover {
	background: var(--sellabees-search-bg) !important;   /* #ebebeb */
	color: var(--sellabees-muted) !important;            /* #6b6b6b — leesbaar, duidelijk uit */
	border: 1px solid var(--sellabees-border) !important;
	opacity: 1 !important;                               /* geen bleke rode knop meer */
	cursor: not-allowed !important;
	box-shadow: none !important;
}
/* Het winkelwagen-icoontje (::before-mask) mee vergrijzen. */
.sellabees-product .sellabees-product__summary .single_add_to_cart_button:is(.disabled, :disabled, .wc-variation-selection-needed, .wc-variation-is-unavailable)::before {
	background: var(--sellabees-muted);
}

/* ---------- Onderste rij: product informatie + vraag-blok ---------- */
.sellabees-product__lower {
	grid-column: 1 / -1; /* span volledige breedte van het product-grid */
	display: grid;
	grid-template-columns: minmax(0, 1fr) 437px;
	gap: 70px;
	align-items: start;
	margin: 40px 0 80px;
}

.sellabees-product__info-title,
.sellabees-product__question-title {
	font-family: var(--sellabees-font-heading);
	font-weight: 400;
	font-size: 30px;
	color: #212121;
	margin: 0 0 18px;
	text-transform: none;
}
.sellabees-product__info-body {
	font-family: var(--sellabees-font-body);
	font-weight: 400;
	font-size: 14px;
	line-height: 24px;
	color: var(--sellabees-ink);
}
.sellabees-product__info-body p { margin: 0 0 12px; }
/* Klantfeedback ("vette/afwijkende letters bij één product"): op productniveau
   OVERAL hetzelfde lettertype (Avenir body) ÉN dezelfde basisdikte afdwingen — ook
   bij tekst die uit een andere bron geplakt is en eigen inline-stijl meebrengt. De
   PIM dumpt op elke <p>/<ul> inline-styling met o.a. font-weight:500 en een
   verminkte font-family → tekst oogt anders/vetter. We normaliseren de FAMILIE en de
   BASISDIKTE (400); lettergrootte blijft vrij en vet/cursief blijft mogelijk via
   <strong>/<b>/<em>/<i> (de editor-knoppen), die we hieronder expliciet behouden. */
.sellabees-product__info-body,
.sellabees-product__info-body * {
	font-family: var(--sellabees-font-body) !important;
}
.sellabees-product__info-body,
.sellabees-product__info-body p,
.sellabees-product__info-body ul,
.sellabees-product__info-body ol,
.sellabees-product__info-body li,
.sellabees-product__info-body span,
.sellabees-product__info-body div,
.sellabees-product__info-body a,
.sellabees-product__info-body dl,
.sellabees-product__info-body dt,
.sellabees-product__info-body dd,
.sellabees-product__info-body td,
.sellabees-product__info-body th {
	font-weight: 400 !important;
}
/* Nadruk behouden (editor-knoppen + design): vet = 800, cursief = italic. */
.sellabees-product__info-body strong,
.sellabees-product__info-body b { font-weight: 800 !important; }
.sellabees-product__info-body em,
.sellabees-product__info-body i { font-style: italic !important; }
/* Links in de omschrijving zichtbaar maken (klantwens): huisstijlrood + onderstreept
   (met !important over eventuele inline-kleur uit de PIM-content heen). */
.sellabees-product__info-body a,
.sellabees-product__short a {
	color: var(--sellabees-red) !important;
	text-decoration: underline;
}
.sellabees-product__info-body a:hover,
.sellabees-product__short a:hover { color: var(--sellabees-red-dark, #b3040f) !important; }

/* Vraag-blok (grijs) */
.sellabees-product__question {
	background: var(--sellabees-search-bg);
	padding: 36px 36px 40px;
	position: relative;
}
/* Ronde teamfoto die rechtsboven uit het vraag-blok steekt (Figma 482:8549,
   163×163; cirkel y858 t.o.v. blok y936 = 78px erboven, 16px voorbij rechts). */
.sellabees-product__question-photo {
	position: absolute;
	top: -78px;
	right: -16px;
	width: 163px;
	height: 163px;
	/* aspect-ratio dwingt een vierkant (= ronde) uitsnede af, óók als een globale
	   img{height:auto} de vaste hoogte overrulet. Een liggende foto wordt zo
	   links/rechts bijgesneden i.p.v. tot een platte strip te krimpen. */
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	object-fit: cover;
}
.sellabees-product__question-text {
	font-family: var(--sellabees-font-body);
	font-weight: 300;
	font-size: 14px;
	line-height: 24px;
	color: var(--sellabees-ink);
	margin: 0 0 26px;
}
.sellabees-product__question-actions { display: flex; gap: 19px; }
.sellabees-product__btn {
	flex: 0 0 auto;   /* Figma 1920: vaste knopbreedte 167px i.p.v. kolomvullend */
	width: 167px;
	height: 53px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	font-family: "Libre Franklin", var(--sellabees-font-body);
	font-weight: 700;
	font-size: 16px;
	color: #fff;
	text-decoration: none;
	border-radius: 0;
}
.sellabees-product__btn svg { fill: #fff; }
.sellabees-product__btn--call { background: var(--sellabees-red); }
.sellabees-product__btn--call:hover { background: var(--sellabees-red-dark); }
.sellabees-product__btn--mail { background: var(--sellabees-ink); }
.sellabees-product__btn--mail:hover { background: #333; }

/* ---------- Gerelateerde producten ---------- */
.sellabees-product__related {
	background: #fff;
	padding: 48px 0 56px;
}
.sellabees-product__related-title {
	font-family: var(--sellabees-font-heading);
	font-weight: 400;
	font-size: 48px;
	line-height: 1;
	color: #010101;
	text-transform: uppercase;
	margin: 0;
}
/* Slider: hergebruikt het generieke [data-slider]-patroon (track-flex, viewport,
   rode pijl-knoppen, dots) uit home.css (laadt ook op de productpagina). Hier
   alleen de related-specifieke koprij. De .sellabees-home-section__head plaatst
   de titel links en de rode vierkante pijl-knoppen rechtsboven. */
.sellabees-product__related .sellabees-home-section__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 32px;
}

/* Reviews-slider + USP-strip: gestyled via de gedeelde shop-secties in home.css
   (template-parts/shop-trust.php). Hier bewust geen dubbele/conflicterende regels. */

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
	.sellabees-product__main { grid-template-columns: 1fr; gap: 40px; }
	/* Eén kolom: het vraag-blok komt ONDER de productinformatie. De teamfoto steekt
	   ~78–82px boven het grijze blok uit, dus de rij-tussenruimte moet groter zijn
	   dan die overhang (Figma-mobiel: 106px tussen info-onderkant y1643 en blok y1749,
	   foto 24px ónder de info) — anders valt de foto over de productinformatie. */
	.sellabees-product__lower { grid-template-columns: 1fr; gap: 106px; }
	.sellabees-product__related-title { font-size: 34px; }
}

/* ==========================================================================
   MOBIEL — 1:1 met Figma mobiel frame 483:29195 (393px breed, 49px marges
   → 295px content). Desktop is af; dit blok voegt ALLEEN de mobiele layout toe.
   ========================================================================== */
@media (max-width: 981px) {

	/* Zelfde mobiele gutter als de rest van de webshop (klantwens: breder op mobiel)
	   i.p.v. de oude 49px Figma-marge — anders is de productpagina smaller dan de
	   overige pagina's. Matcht .sellabees-container in layout.css (@max-width:981). */
	.sellabees-product .sellabees-container { padding-inline: clamp(14px, 5vw, 22px); }

	/* Hoofd-layout = één kolom, ruimere verticale ritme (Figma: galerij y155,
	   titel y600 → ~45px tussen galerij-onderkant en titel). */
	.sellabees-product__main { grid-template-columns: 1fr; gap: 0; }

	/* Galerij: vierkante hoofdfoto 295×295 (Figma 483:29673), thumbnails 100×100.
	   `contain` i.p.v. `cover` (net als desktop, zie boven): een brede keu- of
	   keurekfoto werd anders tot vierkant bijgesneden en liep uit beeld. Vierkante
	   box blijft, foto wordt volledig getoond en gecentreerd op wit. */
	.sellabees-product__gallery { margin: 0 0 30px; }
	.sellabees-product__gallery .woocommerce-product-gallery__image img {
		aspect-ratio: 1 / 1;
		object-fit: contain;
		object-position: center;
		background: #fff;
	}
	.sellabees-product__gallery .woocommerce-product-gallery .flex-control-thumbs li { width: 100px; }

	/* Samenvatting (Figma 483:29675 e.v.). Titel Impact 30px, kleur #000
	   (Figma-mobiel = text-black, niet #231f20). */
	.sellabees-product__title { font-size: 30px; margin: 0 0 8px; color: var(--sellabees-ink); }
	.sellabees-product__price { margin: 0 0 12px; }
	.sellabees-product__short { margin: 0 0 18px; }
	.sellabees-product__stock { margin: 0 0 16px; }

	/* Aantal + knop blijven op één rij (Figma 483:29722 53×53 + 483:29733 233×53,
	   gap 9). Overschrijf de eerdere ≤640 full-width-knop bewust. */
	.sellabees-product .sellabees-product__summary .cart .single_add_to_cart_button,
	.sellabees-product .sellabees-product__summary .single_add_to_cart_button,
	.sellabees-product .sellabees-product__summary button.single_add_to_cart_button {
		flex: 1 1 auto;
		min-width: 0;
		width: auto;
	}
	.sellabees-product__summary .cart:not(.variations_form),
	.sellabees-product__summary .woocommerce-variation-add-to-cart { gap: 9px; }

	/* Variatie-selects vol breed (Figma 483:29721 295×42). Geldt al; herbevestigen. */
	.sellabees-product__summary .variations select { width: 100%; }

	/* Onderste blokken één kolom; tussenruimte 106px = Figma-mobiel (info-onderkant
	   y1643 → blok-bovenkant y1749), zodat de teamfoto-cirkel (483:29768, top:-82px)
	   24px ONDER de productinformatie valt i.p.v. eroverheen. */
	.sellabees-product__lower { grid-template-columns: 1fr; gap: 106px; margin: 36px 0 64px; }
	.sellabees-product__info-title,
	.sellabees-product__question-title { font-size: 30px; margin: 0 0 16px; }

	/* Vraag-blok: extra ruimte bovenin zodat de titel ONDER de uitstekende
	   teamfoto valt (Figma: foto-onderkant y1830, titel y1834). */
	.sellabees-product__question { padding: 92px 23px 32px; }
	.sellabees-product__question-photo { top: -82px; right: -12px; }
	.sellabees-product__question-text { margin: 0 0 22px; }
	/* Knoppen: 167px breed, NIET full-width (Figma 483:29746/29747: 167×53,
	   gestapeld met 14px gat, links uitgelijnd binnen het 23px-ingesprongen blok). */
	.sellabees-product__question-actions { flex-direction: column; gap: 14px; align-items: flex-start; }
	.sellabees-product__btn { flex: 0 0 auto; width: 167px; height: 53px; }

	/* Gerelateerde producten: titel 30px (Figma 483:29770). De slider toont 1
	   kaart per view met pijlen + dots (card-per-view komt uit de gedeelde
	   home.css ≤900-regel: flex 0 0 100%). Koprij blijft titel links + pijlen
	   rechts (zoals de home-sliders op mobiel). */
	.sellabees-product__related { padding: 36px 0 44px; }
	.sellabees-product__related-title { font-size: 30px; margin: 0; }
	.sellabees-product__related .sellabees-home-section__head { margin-bottom: 22px; }
}

/* Product-eigenschappen (Maat/Kleur e.d.) boven de add-to-cart bij enkelvoudige
   producten — klantfeedback IB22.1. Eén regel per attribuut: label vet, waarde licht. */
.sellabees-product__specs {
	list-style: none;
	margin: 12px 0 26px;   /* iets meer ruimte boven/onder (klantwens 2026-08-12) */
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;             /* meer ruimte tussen kleur en maat */
}
.sellabees-product__spec {
	display: flex;
	gap: 8px;
	font-family: var(--sellabees-font-body);
	font-size: 16px;       /* groter (was 14px) */
	line-height: 1.4;
	color: var(--sellabees-ink);
}
.sellabees-product__spec-label { font-weight: 700; }
.sellabees-product__spec-label::after { content: ":"; }
.sellabees-product__spec-value { font-weight: 300; }