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

.sellabees-product {
	background: #fff;
	padding-top: 26px;   /* ontwerp: menu eindigt y180, breadcrumb y230 → ~50px (26 + 24px breadcrumb-margin) */
	padding-bottom: 0;
}

/* ---------- Breadcrumb ---------- */
.sellabees-product__breadcrumb {
	font-family: var(--sellabees-font-body);
	font-weight: 300;
	font-size: 14px;
	color: var(--sellabees-black);
	margin: 24px 0 28px;
}
.sellabees-product__breadcrumb a {
	color: var(--sellabees-black);
	text-decoration: none;
}
.sellabees-product__breadcrumb a:hover { text-decoration: underline; }

/* ---------- Hoofd-layout: galerij links, samenvatting rechts ---------- */
/* Productcontent = ~1203px gecentreerd (ontwerp: 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;
}
.sellabees-product__gallery .woocommerce-product-gallery .flex-control-thumbs img {
	border: 1px solid var(--sellabees-border);
	opacity: 1;
}

/* ---------- 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-black);
	margin: 0 0 6px;
	text-transform: none;
}

.sellabees-product__price,
.sellabees-product__price .woocommerce-Price-amount,
.sellabees-product__price ins,
.sellabees-product__price del {
	font-family: var(--sellabees-font-heading);
	font-weight: 400;
	font-size: 20px;
	color: var(--sellabees-black);
}
.sellabees-product__price { margin: 0 0 14px; }
.sellabees-product__price del { opacity: .5; margin-right: 8px; }
.sellabees-product__price ins { text-decoration: none; }

.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-black);
	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-black);
}
.sellabees-product__check { color: #12b347; flex: 0 0 auto; }   /* ontwerp 482:8309: kale check #12B347 */

/* ---------- Voorraad-badge (boven USP-checklijst, ontwerp 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;
}

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

/* Levertijd-regel onder add-to-cart (ontwerp 482:8291-8293) */
.sellabees-product__delivery {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--sellabees-font-body);
	font-weight: 300;
	font-size: 12px;
	color: #212121;
	margin: 14px 0 0;
}

/* ---------- 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 (ontwerp 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;
}
.sellabees-product__summary .variations .label label {
	font-family: var(--sellabees-font-body);
	font-weight: 400;
	font-size: 13px;
	color: #8a8a8a;
	text-transform: lowercase;
	margin: 0 0 7px;
}
.sellabees-product__summary .variations .value { margin: 0 0 14px; }
.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-black);
	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;
}

/* ---------- Variatie-swatches (kleur/maat als knoppen, zoals live) ----------
   Het core-script (initVariationSwatches) bouwt knoppen vóór elke <select> en
   verbergt de oorspronkelijke select; die blijft de WooCommerce-variatieform
   aansturen (jQuery .val()/change werken op een display:none select) en wordt
   meegestuurd bij submit. display:none i.p.v. visueel-verbergen, omdat WC' core
   `min-width:75%` (hogere specificiteit) een absoluut-gepositioneerde select
   anders tot ~75% van een brede ancestor oprekt → horizontale overflow. */
.sellabees-product__summary .variations select[data-swatched] {
	display: none !important;
}
.sellabees-swatches {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.sellabees-swatch {
	min-width: 44px;
	height: 38px;
	padding: 0 14px;
	box-sizing: border-box;
	border: 1px solid #d9d9d9;
	border-radius: 2px;
	background: #fff;
	font-family: var(--sellabees-font-body);
	font-weight: 400;
	font-size: 14px;
	line-height: 1;
	text-transform: none;   /* termen tonen zoals ingevoerd ("Karanda Red"), niet de globale uppercase-knopregel */
	letter-spacing: normal;
	color: var(--sellabees-black);
	cursor: pointer;
	transition: border-color .12s ease, color .12s ease, box-shadow .12s ease;
}
.sellabees-swatch:hover { border-color: var(--sellabees-green); }
.sellabees-swatch.is-active {
	border-color: var(--sellabees-green);
	color: var(--sellabees-green);
	box-shadow: inset 0 0 0 1px var(--sellabees-green);
}
.sellabees-swatch.is-disabled {
	opacity: .4;
	cursor: not-allowed;
	text-decoration: line-through;
}
.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 */
.sellabees-product__summary .quantity {
	display: inline-flex;
	align-items: center;
	border: 1px solid #d9d9d9;
	border-radius: 2px;
	height: 53px;
	width: 53px;
	justify-content: center;
}
.sellabees-product__summary .quantity .qty {
	width: 53px;
	height: 51px;
	border: 0;
	text-align: center;
	font-family: var(--sellabees-font-body);
	font-weight: 300;
	font-size: 16px;
	color: var(--sellabees-black);
	-moz-appearance: textfield;
	background: transparent;
}
.sellabees-product__summary .quantity .qty::-webkit-outer-spin-button,
.sellabees-product__summary .quantity .qty::-webkit-inner-spin-button { opacity: 1; }

/* Toevoegen-aan-winkelwagen-knop — goud zoals de live Brini-productpagina. */
.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-gold) !important;
	color: #fff !important;
	font-family: var(--sellabees-font-ui);   /* Montserrat: steviger/leesbaarder op goud dan de dunne Cormorant-caps */
	font-weight: 600;
	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='M11 5h2v6h6v2h-6v6h-2v-6H5v-2h6z'/%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='M11 5h2v6h6v2h-6v6h-2v-6H5v-2h6z'/%3E%3C/svg%3E") no-repeat center / contain;
	flex: 0 0 auto;
}
.sellabees-product .sellabees-product__summary .single_add_to_cart_button:hover,
.sellabees-product .sellabees-product__summary button.single_add_to_cart_button:hover { background: #eab81f !important; }
.sellabees-product__summary .single_add_to_cart_button.disabled,
.sellabees-product__summary .single_add_to_cart_button:disabled { opacity: .55; cursor: not-allowed; }

/* ---------- 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: 300;
	font-size: 14px;
	line-height: 24px;
	color: var(--sellabees-black);
}
.sellabees-product__info-body p { margin: 0 0 12px; }
.sellabees-product__info-body strong,
.sellabees-product__info-body b { font-weight: 800; }

/* Specificatietabel */
.sellabees-product__specs {
	width: 100%;
	border-collapse: collapse;
	margin-top: 22px;
	font-family: var(--sellabees-font-body);
	font-size: 14px;
}
.sellabees-product__specs th,
.sellabees-product__specs td {
	text-align: left;
	padding: 10px 14px;
	border: 1px solid var(--sellabees-border);
}
.sellabees-product__specs th { font-weight: 800; width: 30%; background: var(--sellabees-search-bg); }

/* Attributen als NL-opsomming (Kleuren / Maten) met groene bolletjes i.p.v. tabel. */
.sellabees-product__attrs {
	list-style: none;
	margin: 22px 0 0;
	padding: 0;
}
.sellabees-product__attrs li {
	position: relative;
	padding-left: 22px;
	margin: 0 0 10px;
	font-family: var(--sellabees-font-body);
	font-weight: 300;
	font-size: 14px;
	line-height: 1.5;
	color: var(--sellabees-black);
}
.sellabees-product__attrs li:last-child { margin-bottom: 0; }
.sellabees-product__attrs li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .5em;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--sellabees-green);
}
.sellabees-product__attrs strong {
	font-weight: 700;
	color: var(--sellabees-black);
	margin-right: 4px;
}

/* 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 (ontwerp 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;
	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-black);
	margin: 0 0 26px;
}
.sellabees-product__question-actions { display: flex; gap: 19px; }
.sellabees-product__btn {
	flex: 1 1 0;
	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; }
	.sellabees-product__lower { grid-template-columns: 1fr; gap: 40px; }
	.sellabees-product__related-title { font-size: 34px; }
}

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

	/* 49px zijmarges (ontwerp: content x49–344 = 295px) i.p.v. de 24px shop-gutter. */
	.sellabees-product .sellabees-container { padding-inline: 49px; }

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

	/* Galerij: vierkante hoofdfoto 295×295 (ontwerp 483:29673), thumbnails 100×100. */
	.sellabees-product__gallery { margin: 0 0 30px; }
	.sellabees-product__gallery .woocommerce-product-gallery__image img { aspect-ratio: 1 / 1; object-fit: cover; }
	.sellabees-product__gallery .woocommerce-product-gallery .flex-control-thumbs li { width: 100px; }

	/* Samenvatting (ontwerp 483:29675 e.v.). Titel blijft Impact 30px. */
	.sellabees-product__title { font-size: 30px; margin: 0 0 8px; }
	.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 (ontwerp 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 (ontwerp 483:29721 295×42). Geldt al; herbevestigen. */
	.sellabees-product__summary .variations select { width: 100%; }

	/* Onderste blokken één kolom; ruim genoeg voor de teamfoto-cirkel die boven
	   het vraag-blok uitsteekt (ontwerp 483:29768 163×163 @ y1667, blok y1749). */
	.sellabees-product__lower { grid-template-columns: 1fr; gap: 34px; 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 (ontwerp: 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 onder elkaar (ontwerp 483:29746/29747: 167×53 gestapeld, 14px gat). */
	.sellabees-product__question-actions { flex-direction: column; gap: 14px; align-items: stretch; }
	.sellabees-product__btn { flex: 0 0 53px; width: 100%; }

	/* Gerelateerde producten: titel 30px (ontwerp 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; }
}