/* Single product (PDP)
 *
 * Two-column top (gallery + buy box), then description / spec table / video,
 * then "other capacities" (cross-sells). Accessories (upsells) are selectable
 * checkboxes inside the buy form.
 */

.bollaert-pdp {
	margin: var(--wp--preset--spacing--6) 0 var(--wp--preset--spacing--12);
}

/* --- Breadcrumbs --- */
.bollaert-pdp__crumbs {
	display: flex;
	align-items: center;
	gap: 0.4em;
	margin-bottom: var(--wp--preset--spacing--5);
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--muted);
}
.bollaert-pdp__crumbs a { color: var(--wp--preset--color--muted); text-decoration: none; }
.bollaert-pdp__crumbs a:hover { color: var(--wp--preset--color--brand); }
.bollaert-pdp__crumb-sep { display: inline-flex; opacity: 0.6; }

/* --- Top: gallery + info --- */
.bollaert-pdp__top {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	grid-template-areas:
		"gallery info"
		"rest    info";
	gap: var(--wp--preset--spacing--8) clamp(1.5rem, 4vw, 3rem);
	align-items: start;
}
/* Gallery (top-left), the rest of the left content (below it), buy box (right,
 * spans both rows and stays sticky). On mobile these reflow to
 * gallery -> buy box -> rest (see the responsive block at the bottom). */
.bollaert-pdp__gallery { grid-area: gallery; }
.bollaert-pdp__media-col { grid-area: rest; }
.bollaert-pdp__info { grid-area: info; }

/* Left column: gallery + description stacked (description fills the space
 * that would otherwise be empty under the gallery) */
.bollaert-pdp__media-col {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--8);
	min-width: 0;
}

/* Right column (buy box) is pinned and self-contained: it doesn't move with the
 * page, and if its content is tall it scrolls internally while the buy bar stays
 * glued to its bottom — so "add to cart" is always visible. */
.bollaert-pdp__info {
	position: sticky;
	top: calc(var(--bollaert-header-h, 110px) + 12px);
	align-self: start;
}
@media (max-width: 980px) {
	.bollaert-pdp__info { position: static; }
}

/* Gallery (Coolblue-style: photo slider + horizontal thumbs; video as a slide) */
.bollaert-pdp__gallery { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--3); min-width: 0; }

.bollaert-pdp__slider { position: relative; }
.bollaert-pdp__slides {
	display: flex;
	margin: 0; padding: 0; list-style: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 18px;
	background: var(--wp--preset--color--white);
	box-shadow: var(--wp--preset--shadow--subtle);
}
.bollaert-pdp__slides::-webkit-scrollbar { display: none; }
.bollaert-pdp__slide {
	position: relative;
	flex: 0 0 100%;
	scroll-snap-align: center;
	scroll-snap-stop: always;
	aspect-ratio: 5 / 3;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	min-width: 0;
}
.bollaert-pdp__slide img { width: 100%; height: 100%; object-fit: contain; object-position: top center; padding: 0; }
.bollaert-pdp__slide--video { background: #000; }
/* Watersilo fiche slide/thumb: white backdrop so the technical drawing letterboxes
 * cleanly (the SVG is filled by assets/js/single-product.js from the configurator). */
.bollaert-pdp__slide--fiche, .bollaert-pdp__thumb--fiche { background: #fff; }
.bollaert-pdp__slide--fiche img { object-position: center; }
.bollaert-pdp__slide--video img { object-fit: cover; padding: 0; }
.bollaert-pdp__slide--video iframe { width: 100%; height: 100%; border: 0; }
.bollaert-pdp__slide-play {
	position: absolute; inset: 0;
	display: flex; align-items: center; justify-content: center;
	border: none; background: transparent; cursor: pointer; color: #fff;
}
.bollaert-pdp__slide-play::before { content: ""; position: absolute; width: 66px; height: 66px; border-radius: 50%; background: rgba(20, 30, 40, 0.6); transition: background-color 0.15s ease; }
.bollaert-pdp__slide-play:hover::before { background: var(--wp--preset--color--brand); }
.bollaert-pdp__slide-play svg { position: relative; width: 28px; height: 28px; }
.bollaert-pdp__stage-ph { color: var(--wp--preset--color--brand); opacity: 0.4; }

.bollaert-pdp__nav {
	position: absolute; top: 50%; transform: translateY(-50%);
	z-index: 3;
	display: inline-flex; align-items: center; justify-content: center;
	width: 42px; height: 42px;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.92);
	color: var(--wp--preset--color--brand-dark);
	cursor: pointer;
	box-shadow: var(--wp--preset--shadow--medium);
	transition: background-color 0.15s ease, color 0.15s ease;
}
.bollaert-pdp__nav:hover { background: var(--wp--preset--color--brand); color: #fff; }
.bollaert-pdp__nav[hidden] { display: none; }
.bollaert-pdp__nav--prev { left: 10px; }
.bollaert-pdp__nav--prev svg { transform: scaleX(-1); }
.bollaert-pdp__nav--next { right: 10px; }

/* On mobile the slider swipes natively; make the arrows clearly visible too —
 * a white circle is invisible on white product photos, so use a dark, solid,
 * high-contrast disc with a white chevron. */
@media (max-width: 980px) {
	.bollaert-pdp__nav {
		width: 48px;
		height: 48px;
		background: rgba(20, 30, 40, 0.62);
		color: #fff;
		border-color: rgba(255, 255, 255, 0.55);
	}
	.bollaert-pdp__nav:hover { background: var(--wp--preset--color--brand); color: #fff; }
}

.bollaert-pdp__flag {
	position: absolute;
	top: 1rem; left: 1rem;
	z-index: 4;
	padding: 0.3em 0.8em;
	border-radius: 999px;
	background: var(--wp--preset--color--danger, #e0584f);
	color: #fff;
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
}

/* Horizontal thumbnail strip */
.bollaert-pdp__thumbs {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--2);
	margin: 0; padding: 0;
	list-style: none;
}
.bollaert-pdp__thumbs::-webkit-scrollbar { display: none; }
.bollaert-pdp__thumb {
	position: relative;
	flex: 0 0 auto;
	width: 78px; height: 78px;
	padding: 4px;
	border: none;
	border-radius: 10px;
	background: var(--wp--preset--color--white);
	cursor: pointer;
	overflow: hidden;
	opacity: 0.5;
	transition: opacity 0.15s ease;
}
.bollaert-pdp__thumb img { width: 100%; height: 100%; object-fit: contain; }
.bollaert-pdp__thumb--video img { object-fit: cover; }
.bollaert-pdp__thumb:hover { opacity: 0.85; }
.bollaert-pdp__thumb.is-active { opacity: 1; }
.bollaert-pdp__thumb-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; }
.bollaert-pdp__thumb-play::before { content: ""; position: absolute; width: 30px; height: 30px; border-radius: 50%; background: rgba(20, 30, 40, 0.55); }
.bollaert-pdp__thumb-play svg { position: relative; }

/* Info / buy box — kept compact so the buy button needs as little scrolling
 * as possible (it is also sticky-bottom, see .bollaert-pdp__buybar). */
.bollaert-pdp__title {
	margin: 0 0 var(--wp--preset--spacing--2);
	font-size: clamp(1.4rem, 2.4vw, 1.8rem);
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--text);
}
.bollaert-pdp__rating {
	display: flex; align-items: center; gap: 0.5em;
	margin-bottom: var(--wp--preset--spacing--3);
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--muted);
}
.bollaert-pdp__stars { position: relative; display: inline-block; line-height: 1; font-size: 1.05rem; }
.bollaert-pdp__stars::before { content: "★★★★★"; color: #d9e1e8; letter-spacing: 2px; }
.bollaert-pdp__stars::after { content: "★★★★★"; color: #f5a623; letter-spacing: 2px; position: absolute; left: 0; top: 0; width: var(--rate, 0%); overflow: hidden; white-space: nowrap; }
.bollaert-pdp__short {
	margin-bottom: var(--wp--preset--spacing--3);
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.5;
}
.bollaert-pdp__short p { margin: 0 0 0.5em; }

.bollaert-pdp__price {
	display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.5em;
	margin-bottom: var(--wp--preset--spacing--3);
	font-size: 1.55rem;
	font-weight: 800;
	color: var(--wp--preset--color--text);
}
.bollaert-pdp__price del { font-size: 1.1rem; font-weight: 400; color: var(--wp--preset--color--muted); }
.bollaert-pdp__price ins { text-decoration: none; background: none; color: var(--wp--preset--color--brand-dark); }
.bollaert-pdp__price .woocommerce-Price-amount { white-space: nowrap; }
.bollaert-pdp__vat { font-size: var(--wp--preset--font-size--sm); font-weight: 500; color: var(--wp--preset--color--muted); }

/* Configurator: accessory groups side by side (in the right column) + buy bar */
.bollaert-pdp__buy { margin: var(--wp--preset--spacing--3) 0 0; }
.bollaert-pdp__addons {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--3);
	margin: 0; padding: 0; border: 0;
}
.bollaert-pdp__group { flex: 1 1 190px; min-width: 0; margin: 0; padding: 0; border: 0; }
.bollaert-pdp__group-title {
	float: none;
	width: 100%;
	padding: 0;
	margin: 0 0 var(--wp--preset--spacing--2);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 700;
	color: var(--wp--preset--color--text);
}
.bollaert-pdp__req { color: var(--wp--preset--color--danger, #e0584f); }

/* Options as a bordered table (clear row separators) within each group */
.bollaert-pdp__options {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 12px;
	overflow: hidden;
	background: var(--wp--preset--color--white);
}
.bollaert-pdp__addon {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--3);
	padding: var(--wp--preset--spacing--3);
	transition: background-color 0.15s ease;
}
/* Accessory name + thumb is a link to the accessory's product page */
.bollaert-pdp__addon-body {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--3);
	flex: 1 1 auto;
	min-width: 0;
	text-decoration: none;
	color: inherit;
}
.bollaert-pdp__addon-body:hover .bollaert-pdp__addon-name { color: var(--wp--preset--color--brand); text-decoration: underline; text-underline-offset: 2px; }
.bollaert-pdp__addon + .bollaert-pdp__addon { border-top: 1px solid var(--wp--preset--color--border); }
.bollaert-pdp__addon:hover { background: #f3f8fc; }
.bollaert-pdp__addon.is-checked { background: var(--wp--preset--color--brand-tint); box-shadow: inset 4px 0 0 var(--wp--preset--color--brand); }
.bollaert-pdp__opt { flex: 0 0 auto; width: 18px; height: 18px; accent-color: var(--wp--preset--color--brand); cursor: pointer; margin: 0; }
.bollaert-pdp__addon-thumb { flex: 0 0 auto; width: 76px; height: 76px; border-radius: 8px; overflow: hidden; background: #f7f9fb; }
.bollaert-pdp__addon-thumb img { width: 100%; height: 100%; object-fit: contain; }
.bollaert-pdp__addon-name { flex: 1 1 auto; font-size: var(--wp--preset--font-size--sm); line-height: 1.3; color: var(--wp--preset--color--text); }
.bollaert-pdp__addon-price { flex: 0 0 auto; font-size: var(--wp--preset--font-size--sm); font-weight: 700; color: var(--wp--preset--color--brand-dark); white-space: nowrap; }

/* Accessory options côte à côte (2-column grid) — each is a COMPACT HORIZONTAL
 * card: a small photo BESIDE the name + price (not stacked on top), so they sit
 * side by side and the buy box stays short. */
.bollaert-pdp__options {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--2);
	border: 0;
	border-radius: 0;
	overflow: visible;
	background: transparent;
}
.bollaert-pdp__addon {
	gap: var(--wp--preset--spacing--2);
	padding: 4px 6px;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 10px;
	background: var(--wp--preset--color--white);
}
.bollaert-pdp__addon + .bollaert-pdp__addon { border-top: 1px solid var(--wp--preset--color--border); }
.bollaert-pdp__addon-thumb { width: 40px; height: 40px; }
.bollaert-pdp__addon-name {
	font-size: var(--wp--preset--font-size--xs);
	line-height: 1.25;
	/* Compact: long product names clamp to 2 lines (full name in title attr
	 * and readable via the hover photo zoom). */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.bollaert-pdp__addon-price { font-size: var(--wp--preset--font-size--xs); }

/* Single accessory group fills the width; its options grid then has 2 columns */
.bollaert-pdp__group { flex: 1 1 100%; }
/* Compact groups (dropdown, or <=3 tiles) sit side by side — even when they
 * are different accessory types — so the list stays short and the add-to-cart
 * button keeps in view. */
.bollaert-pdp__group--half { flex: 1 1 calc(50% - var(--wp--preset--spacing--3)); }
.bollaert-pdp__group--half .bollaert-pdp__options { grid-template-columns: 1fr; }

/* Etat coche limpide: bordure + fond aux couleurs de la marque. */
.bollaert-pdp__addon.is-checked {
	border-color: var(--wp--preset--color--brand);
	background: var(--wp--preset--color--brand-tint);
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--brand);
}

/* Hover (souris uniquement): un panneau se deplie sous la tuile avec la photo
 * en grand. Le contour complet (tuile + panneau) est dessine d'UNE seule piece
 * par le ::after — aucun raccord possible. La petite vignette reste a sa place
 * (pas de cadre vide), la photo du panneau est le background du ::after, le
 * texte n'est jamais recouvert et la case a cocher grossit. */
@media (hover: hover) and (pointer: fine) {
	.bollaert-pdp__addon { position: relative; }
	.bollaert-pdp__addon:hover {
		z-index: 45;
		border-color: transparent;
		background: transparent;
	}
	.bollaert-pdp__addon:hover::after {
		content: '';
		position: absolute;
		top: -1px;
		left: -1px;
		right: -1px;
		height: calc(100% + 174px);
		background: var(--wp--preset--color--white) var(--acc-img, none) no-repeat center bottom 12px / auto 150px;
		border: 1px solid var(--wp--preset--color--brand);
		border-radius: 12px;
		box-shadow: 0 18px 42px -12px rgba(2, 6, 23, 0.35);
		z-index: 1;
	}
	/* Pas d'image ? Pas de panneau vide: simple surlignage de la tuile. */
	.bollaert-pdp__addon:not([style*='--acc-img']):hover::after { height: calc(100% + 2px); }
	.bollaert-pdp__addon:hover > * { position: relative; z-index: 2; }
	/* Coche + survol: le fond teinte reste visible dans le panneau */
	.bollaert-pdp__addon.is-checked:hover::after {
		background-color: var(--wp--preset--color--brand-tint);
		box-shadow: 0 18px 42px -12px rgba(2, 6, 23, 0.35), inset 0 0 0 1px var(--wp--preset--color--brand);
	}
	/* Case a cocher nettement plus grosse au survol */
	.bollaert-pdp__addon:hover .bollaert-pdp__opt {
		width: 26px;
		height: 26px;
	}
}

/* Big single-choice groups (e.g. the 7 hose lengths) render as a designed
 * dropdown WITH photos and prices — one compact row closed, a rich listbox
 * open. The open panel may overlap the sticky buy bar (z-index above it);
 * that is intended. */
.bollaert-pdp__dd { position: relative; }
.bollaert-pdp__dd-toggle {
	width: 100%;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 5px 14px 5px 8px;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 10px;
	background: var(--wp--preset--color--white);
	font: inherit;
	text-align: left;
	cursor: pointer;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.bollaert-pdp__dd-toggle:hover,
.bollaert-pdp__dd.is-open .bollaert-pdp__dd-toggle {
	border-color: var(--wp--preset--color--brand);
	box-shadow: 0 0 0 3px rgba(51, 153, 204, 0.15);
}
.bollaert-pdp__dd-current {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 1 1 auto;
	min-width: 0;
}
.bollaert-pdp__dd-current .bollaert-pdp__addon-thumb { width: 44px; height: 44px; }
.bollaert-pdp__dd-arrow {
	flex: 0 0 auto;
	width: 9px;
	height: 9px;
	margin-top: -4px;
	border-right: 2px solid var(--wp--preset--color--muted);
	border-bottom: 2px solid var(--wp--preset--color--muted);
	transform: rotate(45deg);
	transition: transform 0.15s ease;
}
.bollaert-pdp__dd.is-open .bollaert-pdp__dd-arrow { transform: rotate(225deg); margin-top: 4px; }
.bollaert-pdp__dd-list {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	right: 0;
	z-index: 40; /* above the sticky buy bar (z 5) — may cover it while open */
	margin: 0;
	padding: 6px;
	list-style: none;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 14px;
	box-shadow: 0 24px 60px -18px rgba(2, 6, 23, 0.45);
	max-height: 340px;
	overflow: auto;
	overscroll-behavior: contain;
}
.bollaert-pdp__dd-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 7px 10px;
	border-radius: 10px;
	cursor: pointer;
	transition: background-color 0.12s ease;
}
.bollaert-pdp__dd-item .bollaert-pdp__addon-thumb { width: 60px; height: 60px; }
.bollaert-pdp__dd-item:hover { background: #f3f8fc; }
.bollaert-pdp__dd-item.is-selected {
	background: var(--wp--preset--color--brand-tint);
	box-shadow: inset 3px 0 0 var(--wp--preset--color--brand);
}
/* No photo for an option (e.g. "sans pompe")? Don't show an empty grey square. */
.bollaert-pdp__addon-thumb:empty { display: none; }

/* On phones: one accessory per row and the price on its OWN line below the
 * name, so nothing overlaps and every detail stays readable. */
@media (max-width: 600px) {
	.bollaert-pdp__options { grid-template-columns: 1fr; }
	/* Compact rows on phones too: the option list must not push the (sticky)
	 * buy bar pages away. Photo stays beside the name. */
	.bollaert-pdp__addon-thumb { width: 48px; height: 48px; }
}

/* Buy bar: total on the left, qty + add-to-cart on the right */
.bollaert-pdp__buybar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--3);
	margin-top: var(--wp--preset--spacing--4);
	padding: var(--wp--preset--spacing--3) var(--wp--preset--spacing--4);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 16px;
	background: var(--wp--preset--color--white);
	/* Always-visible add-to-cart: the bar sticks to the BOTTOM of the viewport
	 * while the (possibly long) option list scrolls by, in both the desktop
	 * sticky column and the single-column mobile layout. The opaque background
	 * + lifted shadow keep it readable over the options it floats above. */
	position: sticky;
	bottom: 10px;
	z-index: 5;
	/* Discrete lift: the heavy upward shadow hid the accessory right above the
	 * bar — the opaque background + border already separate it visually. */
	box-shadow: 0 -2px 10px -8px rgba(15, 23, 42, 0.22);
}
.bollaert-pdp__buybar .bollaert-pdp__total { margin: 0; }

/* Quantity + add */
.bollaert-pdp__buyrow {
	display: flex;
	gap: var(--wp--preset--spacing--3);
	align-items: stretch;
}
.bollaert-pdp__qty {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 12px;
	overflow: hidden;
	background: var(--wp--preset--color--white);
}
.bollaert-pdp__qty-btn {
	width: 44px; height: 100%;
	min-height: 52px;
	border: none; background: transparent;
	font-size: 1.3rem; line-height: 1;
	color: var(--wp--preset--color--brand-dark);
	cursor: pointer;
}
.bollaert-pdp__qty-btn:hover { background: var(--wp--preset--color--brand-tint); }
.bollaert-pdp__qty-input {
	width: 48px; text-align: center;
	border: none; background: transparent;
	font: inherit; font-weight: 700;
	-moz-appearance: textfield;
}
.bollaert-pdp__qty-input::-webkit-outer-spin-button,
.bollaert-pdp__qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.bollaert-pdp__add {
	flex: 1 1 auto;
	display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
	min-height: 52px;
	padding: 0 1.6em;
	border: none; border-radius: 12px;
	background: var(--wp--preset--color--success, #2e9b5b);
	color: #fff;
	font: inherit; font-weight: 700; font-size: var(--wp--preset--font-size--md);
	cursor: pointer;
	box-shadow: 0 10px 22px -12px rgba(46, 155, 91, 0.8);
	transition: background-color 0.15s ease, transform 0.15s ease, filter 0.15s ease;
}
.bollaert-pdp__add:hover { filter: brightness(0.92); transform: translateY(-1px); }
.bollaert-pdp__add[disabled] { background: var(--wp--preset--color--muted); cursor: not-allowed; box-shadow: none; transform: none; }
.bollaert-pdp__add.is-loading { opacity: 0.7; pointer-events: none; }

.bollaert-pdp__total {
	margin: var(--wp--preset--spacing--3) 0 0;
	font-size: var(--wp--preset--font-size--md);
	color: var(--wp--preset--color--muted);
}
.bollaert-pdp__total-val { font-size: 1.25rem; color: var(--wp--preset--color--text); }

.bollaert-pdp__usps {
	margin: 0 0 var(--wp--preset--spacing--4);
	padding: 0;
	list-style: none;
	display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--wp--preset--spacing--2) var(--wp--preset--spacing--4);
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--text);
}
.bollaert-pdp__usps li { display: flex; align-items: center; gap: 0.6em; }
.bollaert-pdp__usps svg { color: var(--wp--preset--color--success, #2e9b5b); flex-shrink: 0; }
.bollaert-pdp__usp--gift svg { color: var(--wp--preset--color--brand); }
.bollaert-pdp__usp--gift strong { color: var(--wp--preset--color--brand-dark); }

/* --- Details: description | specs (side by side when specs exist, divider) --- */
.bollaert-pdp__details {
	margin-top: var(--wp--preset--spacing--6);
}
.bollaert-pdp__details.has-side {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
	gap: clamp(1.5rem, 4vw, 3rem);
	align-items: start;
}
.bollaert-pdp__details-side {
	border-left: 1px solid var(--wp--preset--color--border);
	padding-left: clamp(1.5rem, 4vw, 3rem);
}
.bollaert-pdp__section + .bollaert-pdp__section { margin-top: var(--wp--preset--spacing--8); }
.bollaert-pdp__section-title {
	margin: 0 0 var(--wp--preset--spacing--4);
	font-size: var(--wp--preset--font-size--xl);
	letter-spacing: -0.01em;
}
.bollaert-pdp__desc-body { font-size: var(--wp--preset--font-size--sm); line-height: 1.7; color: #2a3138; }
.bollaert-pdp__desc-body p { margin: 0 0 1em; }
.bollaert-pdp__desc-body h2, .bollaert-pdp__desc-body h3 { margin: 1.4em 0 0.5em; color: var(--wp--preset--color--text); }
.bollaert-pdp__desc-body ul, .bollaert-pdp__desc-body ol { margin: 0 0 1em; padding-left: 1.3em; }
.bollaert-pdp__desc-body li { margin-bottom: 0.4em; }
.bollaert-pdp__desc-body img { max-width: 100%; height: auto; border-radius: 10px; }

.bollaert-pdp__spec-table { width: 100%; border-collapse: collapse; font-size: var(--wp--preset--font-size--sm); }
.bollaert-pdp__spec-table th,
.bollaert-pdp__spec-table td { padding: 0.7em 0.85em; text-align: left; vertical-align: top; border-bottom: 1px solid var(--wp--preset--color--border); }
.bollaert-pdp__spec-table th { width: 45%; font-weight: 600; color: var(--wp--preset--color--muted); }
.bollaert-pdp__spec-table td { font-weight: 600; color: var(--wp--preset--color--text); }
.bollaert-pdp__spec-table tr:first-child th,
.bollaert-pdp__spec-table tr:first-child td { border-top: 1px solid var(--wp--preset--color--border); }
.bollaert-pdp__specs { margin-top: 0; }
.bollaert-pdp__specs .bollaert-pdp__section-title { font-size: var(--wp--preset--font-size--lg); }

/* === Imported Gutenberg description (Voordelen / Specificaties / Kenmerken) === */
.bollaert-pdp__desc-body .wp-block-columns {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(1.25rem, 3.5vw, 2.75rem);
	align-items: flex-start;
	margin: 0 0 1.5em;
}
.bollaert-pdp__desc-body .wp-block-column { flex: 1 1 280px; min-width: 0; }

/* Voordelen / Specificaties one BELOW the other (not side by side) */
.bollaert-pdp__desc-body .bollaert-description { flex-direction: column; gap: var(--wp--preset--spacing--6); }
.bollaert-pdp__desc-body .bollaert-description > .wp-block-column { flex: 1 1 100%; }

/* Drop the empty filler columns the import leaves behind (dead vertical gaps) */
.bollaert-pdp__desc-body .wp-block-column:empty { display: none; }
.bollaert-pdp__desc-body .wp-block-columns:not(:has(> .wp-block-column:not(:empty))) { display: none; margin: 0; }
.bollaert-pdp__desc-body h2 { font-size: var(--wp--preset--font-size--xl); margin: 0 0 0.6em; letter-spacing: -0.01em; color: var(--wp--preset--color--text); }
.bollaert-pdp__desc-body h4 { font-size: var(--wp--preset--font-size--lg); margin: 1.2em 0 0.4em; color: var(--wp--preset--color--text); }
.bollaert-pdp__desc-body h5 { font-size: var(--wp--preset--font-size--md); margin: 0.8em 0 0.4em; font-weight: 600; color: var(--wp--preset--color--muted); }
.bollaert-pdp__desc-body h6 { font-size: var(--wp--preset--font-size--md); margin: 0 0 0.3em; color: var(--wp--preset--color--text); }

/* Voordelen: highlighted card with check bullets */
.bollaert-pdp__desc-body .voordelen {
	padding: 0;
}
.bollaert-pdp__desc-body .voordelen h2 { color: var(--wp--preset--color--brand-dark); }
.bollaert-pdp__desc-body .voordelen ul { list-style: none; margin: 0; padding: 0; }
.bollaert-pdp__desc-body .voordelen li { position: relative; padding-left: 1.9em; margin-bottom: 0.55em; }
.bollaert-pdp__desc-body .voordelen li::before {
	content: "✓";
	position: absolute; left: 0; top: 0.05em;
	display: inline-flex; align-items: center; justify-content: center;
	width: 1.3em; height: 1.3em;
	font-size: 0.78em; font-weight: 700;
	color: #fff; background: var(--wp--preset--color--brand);
	border-radius: 50%;
}

/* Specificaties heading inside the description right column */
.bollaert-pdp__desc-body .bollaert-pdp__spec-table { margin-top: 0.3em; }

/* Kenmerken feature cards (image + text) */
.bollaert-pdp__desc-body .wp-block-media-text {
	display: grid;
	grid-template-columns: 156px 1fr;
	gap: var(--wp--preset--spacing--4);
	align-items: start;
	margin: 0 0 var(--wp--preset--spacing--4);
	padding: var(--wp--preset--spacing--4);
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 12px;
	box-shadow: var(--wp--preset--shadow--subtle);
}
.bollaert-pdp__desc-body .wp-block-media-text__media { margin: 0; }
.bollaert-pdp__desc-body .wp-block-media-text__media img { width: 100%; height: auto; border-radius: 8px; }
.bollaert-pdp__desc-body .wp-block-media-text__content { padding: 0; }
.bollaert-pdp__desc-body .wp-block-media-text__content p { margin: 0 0 0.4em; font-size: var(--wp--preset--font-size--sm); color: var(--wp--preset--color--muted); }
.bollaert-pdp__desc-body .wp-block-media-text__content ul { font-size: var(--wp--preset--font-size--sm); color: var(--wp--preset--color--muted); }

/* Embedded video */
.bollaert-pdp__desc-body .wp-block-embed { margin: 1.5em 0; max-width: 720px; }
.bollaert-pdp__desc-body .wp-block-embed__wrapper { position: relative; }
.bollaert-pdp__desc-body .wp-block-embed iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; border-radius: 12px; }

/* Centered notes / PDF link */
.bollaert-pdp__desc-body .has-text-align-center { text-align: center; }
.bollaert-pdp__desc-body a { color: var(--wp--preset--color--brand-dark); text-decoration: underline; text-underline-offset: 2px; }
.bollaert-pdp__desc-body a:hover { color: var(--wp--preset--color--brand); }

/* Technical documentation: turn the plain ".pdf" link into a clear button with
 * a PDF icon (instead of the bare underlined text it imported as). */
.bollaert-pdp__desc-body a[href$=".pdf"],
.bollaert-pdp__desc-body a[href$=".PDF"] {
	display: inline-flex;
	align-items: center;
	gap: 0.65em;
	margin: 0.3em 0;
	padding: 0.75em 1.25em;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 12px;
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--brand-dark);
	font-weight: 700;
	text-decoration: none;
	box-shadow: var(--wp--preset--shadow--subtle);
	transition: border-color 0.15s ease, color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.bollaert-pdp__desc-body a[href$=".pdf"]::before,
.bollaert-pdp__desc-body a[href$=".PDF"]::before {
	content: "";
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	background: center / contain no-repeat url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%3E%3Crect%20x='3.5'%20y='2'%20width='17'%20height='20'%20rx='2.5'%20fill='%23E0584F'/%3E%3Ctext%20x='12'%20y='16.5'%20font-family='Arial,sans-serif'%20font-size='6.6'%20font-weight='bold'%20fill='%23ffffff'%20text-anchor='middle'%3EPDF%3C/text%3E%3C/svg%3E");
}
.bollaert-pdp__desc-body a[href$=".pdf"]:hover,
.bollaert-pdp__desc-body a[href$=".PDF"]:hover {
	border-color: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--brand);
	transform: translateY(-1px);
	box-shadow: var(--wp--preset--shadow--medium);
}

/* Product FAQ: the imported "Veelgestelde vragen" heading (h4) + its link list,
 * restyled as a tidy card list with chevrons. */
.bollaert-pdp__desc-body h4 {
	margin: 1.8em 0 0;
	padding-bottom: 0.5em;
	border-bottom: 2px solid var(--wp--preset--color--brand);
	font-size: var(--wp--preset--font-size--lg);
	color: var(--wp--preset--color--text);
}
.bollaert-pdp__desc-body h4 + ul {
	list-style: none;
	margin: var(--wp--preset--spacing--3) 0 0;
	padding: 0;
	display: grid;
	gap: var(--wp--preset--spacing--2);
}
.bollaert-pdp__desc-body h4 + ul li { margin: 0; }
.bollaert-pdp__desc-body h4 + ul li a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.8em;
	padding: 0.85em 1.1em;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 10px;
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--text);
	font-weight: 600;
	text-decoration: none;
	transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}
.bollaert-pdp__desc-body h4 + ul li a::after {
	content: "\203A"; /* › */
	flex: 0 0 auto;
	font-size: 1.45em;
	line-height: 1;
	color: var(--wp--preset--color--brand);
}
.bollaert-pdp__desc-body h4 + ul li a:hover {
	border-color: var(--wp--preset--color--brand);
	background: var(--wp--preset--color--brand-tint);
	color: var(--wp--preset--color--brand-dark);
}

/* Tame leftover genesis spacers/dividers from the import */
.bollaert-pdp__desc-body .wp-block-genesis-blocks-gb-spacer { color: var(--wp--preset--color--border) !important; }
.bollaert-pdp__desc-body .wp-block-genesis-blocks-gb-spacer hr { height: 0 !important; border: 0; border-top: 1px solid var(--wp--preset--color--border); margin: 0; }

@media (max-width: 600px) {
	.bollaert-pdp__desc-body .wp-block-media-text { grid-template-columns: 108px 1fr; gap: var(--wp--preset--spacing--3); }
}

.bollaert-pdp__video { max-width: 600px; margin-top: var(--wp--preset--spacing--10); }
.bollaert-pdp__video-frame { position: relative; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; }
.bollaert-pdp__video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* --- Other capacities (cross-sells) = slider, max ~4 cards visible --- */
.bollaert-pdp__others { margin-top: var(--wp--preset--spacing--10); }
.bollaert-pdp__others-slider { --others-gap: 14px; position: relative; }
.bollaert-pdp__others-grid {
	display: flex;
	gap: var(--others-gap);
	margin: 0; padding: 0 0 var(--wp--preset--spacing--2); list-style: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
}
.bollaert-pdp__others-grid::-webkit-scrollbar { display: none; }
.bollaert-pdp__others-grid .bollaert-product-card {
	flex: 0 0 calc((100% - 3 * var(--others-gap)) / 4);
	min-width: 150px;
	max-width: 260px;
	scroll-snap-align: start;
}
/* slider arrows (sit just outside the row, vertically centred on the thumbnails) */
.bollaert-pdp__others-nav {
	position: absolute;
	top: 40%;
	transform: translateY(-50%);
	z-index: 3;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.96);
	color: var(--wp--preset--color--brand-dark);
	cursor: pointer;
	box-shadow: var(--wp--preset--shadow--medium);
	transition: background-color 0.15s ease, color 0.15s ease;
}
.bollaert-pdp__others-nav:hover { background: var(--wp--preset--color--brand); color: #fff; }
.bollaert-pdp__others-nav[hidden] { display: none; }
.bollaert-pdp__others-nav--prev { left: -10px; }
.bollaert-pdp__others-nav--prev svg { transform: scaleX(-1); }
.bollaert-pdp__others-nav--next { right: -10px; }
@media (max-width: 600px) {
	.bollaert-pdp__others-grid .bollaert-product-card { flex-basis: calc((100% - var(--others-gap)) / 2); }
}

/* --- Footer below the PDP ---
 * Rendered after the product grid (see patterns/single-product.php) as a
 * full-width band (align:full), so it spans the page edge to edge and is not
 * rounded. Just add breathing room above it. */
.bollaert-pdp + .wp-block-template-part {
	margin-top: var(--wp--preset--spacing--12);
}

/* Watersilo: the per-silo spec table is mirrored into the LEFT column
 * (.bollaert-pdp__specs--watersilo, kept in sync by configurator.js via the
 * [data-bw] cells), so hide the configurator's own spec block in the right
 * column to avoid showing the specifications twice. */
.bollaert-pdp__configurator .bw-specs {
	display: none;
}

/* Watersilo: compact accessory tiles. The plugin renders large 104px circular
 * thumbnails with generous padding; in our sticky right column that makes the
 * configurator taller than the viewport, pushing the "Ajouter au panier" button
 * below the fold (only half visible). Shrink the tiles (and tighten the total)
 * so the whole configurator — button included — fits on screen. Scoped to the
 * PDP and !important to override the plugin's own !important rules. */
.bollaert-pdp__configurator .bw-acc-list { gap: 0.2rem !important; margin-top: 0.3rem !important; }
.bollaert-pdp__configurator .bw-acc { padding: 4px 10px !important; gap: 10px !important; font-size: 14px !important; }
.bollaert-pdp__configurator .bw-acc-img-wrap { width: 34px !important; height: 34px !important; border-width: 2px !important; }
.bollaert-pdp__configurator .bw-acc input[type="checkbox"] { width: 18px !important; height: 18px !important; }
.bollaert-pdp__configurator .bw-acc-name { font-size: 14px !important; line-height: 1.25 !important; }
.bollaert-pdp__configurator .bw-acc-price { font-size: 14px !important; }
.bollaert-pdp__configurator .bw-total { padding: 0.35rem 0 !important; margin: 0.35rem 0 0.25rem !important; }
/* …and the rest of the configurator chrome, so the "Ajouter au panier" button
 * is on screen as soon as the sticky column docks (no scrolling needed):
 * smaller intro subtitle, tighter section headings, slimmer totals. */
.bollaert-pdp__configurator .bw-subtitle { font-size: 13px !important; line-height: 1.35 !important; margin: 0 0 0.5rem !important; }
.bollaert-pdp__configurator h3 { margin: 0.6rem 0 0.4rem !important; font-size: 15px !important; }
.bollaert-pdp__configurator .bw-summary { padding: 6px 10px !important; font-size: 13px !important; }
.bollaert-pdp__configurator .bw-total-excl { font-size: 13px !important; line-height: 1.3 !important; }
.bollaert-pdp__configurator .bw-total-incl { font-size: 20px !important; line-height: 1.3 !important; }

/* --- Responsive --- */
@media (max-width: 980px) {
	/* Mobile order: gallery first, then the buy box (right column), then the
	 * rest of the left content (description, specs, video, suggestions, footer). */
	.bollaert-pdp__top {
		grid-template-columns: 1fr;
		grid-template-areas:
			"gallery"
			"info"
			"rest";
	}
	.bollaert-pdp__details.has-side { grid-template-columns: 1fr; }
	.bollaert-pdp__details-side { border-left: 0; padding-left: 0; border-top: 1px solid var(--wp--preset--color--border); padding-top: var(--wp--preset--spacing--6); margin-top: var(--wp--preset--spacing--6); }
}
@media (max-width: 781.98px) {
	/* Mobile: stack the buy bar so the add-to-cart button spans the full width. */
	.bollaert-pdp__buybar { flex-direction: column; align-items: stretch; }
	.bollaert-pdp__buyrow { flex-wrap: wrap; width: 100%; }
	.bollaert-pdp__add { width: 100%; flex: 1 1 100%; }
	/* Watersilo configurator's own add-to-cart button: full width too. */
	.bollaert-pdp__configurator .bw-add { width: 100%; box-sizing: border-box; display: block; text-align: center; }
	/* Keep the configurator within the column on mobile — its size grid otherwise
	 * forces a ~433px column that overflows / clips on small screens. */
	.bollaert-pdp__info { min-width: 0; }
	.bollaert-pdp__configurator { min-width: 0; max-width: 100%; }
	.bollaert-pdp__configurator .bw-dd-grid { grid-template-columns: 1fr; }
	.bollaert-pdp__configurator .bw-dd,
	.bollaert-pdp__configurator .bw-dd-btn { min-width: 0; max-width: 100%; }
}

/* --- Lightbox (click a photo to view it large) --- */
.bollaert-lightbox {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 4vmin;
	background: rgba(12, 18, 24, 0.92);
}
.bollaert-lightbox[hidden] { display: none; }
.bollaert-lightbox__img {
	max-width: 92vw;
	max-height: 90vh;
	object-fit: contain;
	border-radius: 8px;
	background: #fff;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.bollaert-lightbox__img[hidden] { display: none; }
/* Video shown large in the lightbox (gallery video) */
.bollaert-lightbox__video {
	position: relative;
	width: min(92vw, 1100px);
	max-height: 90vh;
	aspect-ratio: 16 / 9;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.bollaert-lightbox__video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.bollaert-lightbox__close,
.bollaert-lightbox__nav {
	position: absolute;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: none;
	cursor: pointer;
	background: rgba(255, 255, 255, 0.14);
	color: #fff;
	border-radius: 999px;
	line-height: 1;
	transition: background-color 0.15s ease;
}
.bollaert-lightbox__close:hover,
.bollaert-lightbox__nav:hover { background: rgba(255, 255, 255, 0.3); }
.bollaert-lightbox__close { top: 18px; right: 22px; width: 46px; height: 46px; font-size: 1.8rem; }
.bollaert-lightbox__nav { top: 50%; transform: translateY(-50%); width: 52px; height: 52px; font-size: 2.2rem; }
.bollaert-lightbox__nav--prev { left: 2vw; }
.bollaert-lightbox__nav--next { right: 2vw; }
@media (max-width: 600px) {
	.bollaert-lightbox__nav { width: 40px; height: 40px; font-size: 1.6rem; }
	.bollaert-lightbox__nav--prev { left: 4px; }
	.bollaert-lightbox__nav--next { right: 4px; }
}