/*
Theme Name: Bollaert IBC NL
Theme URI: https://github.com/ictbollaert/bollaert-ibc-nl
Description: Brand child theme of Twenty Twenty-Five for the Bollaert IBC NL webshop. Brand tokens + overrides via theme.json. Pilot for a future-proof child reusable across Bollaert webshops.
Template: twentytwentyfive
Version: 0.1.0
Author: Bollaert IT
License: Proprietary
Text Domain: bollaert-ibc-nl
Requires at least: 6.5
Requires PHP: 8.1
Tags: full-site-editing, block-styles, woocommerce
*/

/* Theme-wide base styles only. Component styles live under
 * /assets/css/components/, one file per component. */

/* Crisper text rendering for eye comfort (retina/macOS especially). */
html {
	-webkit-text-size-adjust: 100%;
	/* Always reserve the scrollbar gutter so the layout width — and therefore
	   the header — is identical whether or not a page scrolls. Stops the navbar
	   shifting between short and long pages. */
	scrollbar-gutter: stable;
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

/* Mobile: no sideways drift / layout deformation when swiping with a finger.
 * `overflow-x: clip` stops any stray element from causing horizontal scroll
 * WITHOUT breaking position:sticky (which overflow:hidden would), and
 * overscroll-behavior kills the horizontal rubber-band wobble. */
html,
body {
	max-width: 100%;
	overflow-x: clip;
	overscroll-behavior-x: none;
}

/* Media never overflows its container. */
img,
svg {
	max-width: 100%;
}

/* Comfortable, accessible focus ring across interactive elements. */
:where(a, button, input, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--brand);
	outline-offset: 2px;
}

/* Brand-blue scrollbars site-wide (literal colours so they resolve on the
 * scrollbar pseudo-elements regardless of where the CSS vars are defined). */
html {
	scrollbar-width: thin;
	scrollbar-color: #3399cc #eaf4fa;
}

::-webkit-scrollbar {
	width: 12px;
	height: 12px;
}

::-webkit-scrollbar-track {
	background: #eaf4fa;
}

::-webkit-scrollbar-thumb {
	background: #3399cc;
	border-radius: 999px;
	border: 3px solid #eaf4fa;
}

::-webkit-scrollbar-thumb:hover {
	background: #287a9e;
}

/* Designed pattern pages (contact, delivery) bring their own headings. */
.bollaert-no-title .wp-block-post-title { display: none; }

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
	padding: 0;
	margin: -1px;
}

/* No focus squares on mouse clicks: outlines only for keyboard navigation
 * (:focus-visible). Also kill the mobile tap-highlight flash. */
:focus:not(:focus-visible) { outline: none; }
html { -webkit-tap-highlight-color: transparent; }
/* My Account (classic [woocommerce_my_account], custom templates)
 *
 * Two layouts share this file:
 *   • logged-in  → sidebar nav (left) + content card (right) + dashboard cards
 *   • logged-out → login / register split cards
 *
 * NOTE on specificity: WooCommerce + Twenty Twenty-Five ship their own
 * .woocommerce-MyAccount-navigation / .woocommerce-* rules (two classes + a few
 * elements). To win without !important, the nav/content selectors below are
 * scoped under .bollaert-account so they carry one extra class.
 */

/* Widen the classic shortcode out of the narrow post-content (like the cart) */
body.woocommerce-account .woocommerce {
	max-width: min(1200px, 94vw);
	margin-left: auto;
	margin-right: auto;
}

/* Hide the duplicate page/endpoint title (e.g. "Accountdetails") — our own
   header below is the single source of truth. */
body.woocommerce-account .wp-block-post-title,
body.woocommerce-account h1.entry-title,
body.woocommerce-account .wp-block-post-title.bollaert-page-title { display: none; }

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

/* ------------------------------------------------------------------- Head */

.bollaert-account__head { margin-bottom: var(--wp--preset--spacing--6); }
.bollaert-account__title { margin: 0; font-size: var(--wp--preset--font-size--2xl); }
.bollaert-account__greeting {
	margin: var(--wp--preset--spacing--2) 0 0;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--md);
}
.bollaert-account__greeting strong { color: var(--wp--preset--color--text); }

/* ----------------------------------------------------------------- Layout */

.bollaert-account__layout {
	display: grid;
	grid-template-columns: 250px minmax(0, 1fr);
	gap: var(--wp--preset--spacing--6);
	align-items: start;
}

/* ---------------------------------------------------------------- Sidebar */

.bollaert-account .woocommerce-MyAccount-navigation.bollaert-account-nav {
	position: sticky;
	top: 96px;
	float: none;
	width: auto;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 16px;
	padding: var(--wp--preset--spacing--3);
	box-shadow: var(--wp--preset--shadow--subtle);
	font-size: inherit;
}
.bollaert-account .bollaert-account-nav .bollaert-account-nav__list {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.bollaert-account .bollaert-account-nav .bollaert-account-nav__item {
	margin: 0;
	padding: 0;
	border: 0;
	list-style: none;
	float: none;
	width: auto;
	text-align: left;
}
.bollaert-account .bollaert-account-nav .bollaert-account-nav__link {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--3);
	width: 100%;
	box-sizing: border-box;
	padding: 0.7em 0.9em;
	border-radius: 10px;
	color: var(--wp--preset--color--text);
	text-decoration: none;
	font-weight: 600;
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.3;
	white-space: nowrap;
	transition: background-color 0.15s ease, color 0.15s ease;
}
.bollaert-account .bollaert-account-nav__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 18px;
	width: 18px;
	height: 18px;
	color: var(--wp--preset--color--muted);
	transition: color 0.15s ease;
}
.bollaert-account .bollaert-account-nav__icon svg { width: 18px; height: 18px; display: block; }
.bollaert-account .bollaert-account-nav__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

.bollaert-account .bollaert-account-nav .bollaert-account-nav__link:hover {
	background: var(--wp--preset--color--brand-tint);
	color: var(--wp--preset--color--brand-dark);
}
.bollaert-account .bollaert-account-nav .bollaert-account-nav__link:hover .bollaert-account-nav__icon {
	color: var(--wp--preset--color--brand);
}
.bollaert-account .bollaert-account-nav .bollaert-account-nav__item.is-active .bollaert-account-nav__link {
	background: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--white);
	box-shadow: var(--wp--preset--shadow--subtle);
}
.bollaert-account .bollaert-account-nav .bollaert-account-nav__item.is-active .bollaert-account-nav__icon {
	color: var(--wp--preset--color--white);
}

/* Logout sits apart, reads as the way out */
.bollaert-account .bollaert-account-nav .woocommerce-MyAccount-navigation-link--customer-logout {
	margin-top: var(--wp--preset--spacing--2);
	padding-top: var(--wp--preset--spacing--2);
	border-top: 1px solid var(--wp--preset--color--border);
}
.bollaert-account .bollaert-account-nav .woocommerce-MyAccount-navigation-link--customer-logout .bollaert-account-nav__link:hover {
	background: #fdecec;
	color: var(--wp--preset--color--danger);
}
.bollaert-account .bollaert-account-nav .woocommerce-MyAccount-navigation-link--customer-logout .bollaert-account-nav__link:hover .bollaert-account-nav__icon {
	color: var(--wp--preset--color--danger);
}

/* ---------------------------------------------------------------- Content */

.bollaert-account .bollaert-account__content {
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 16px;
	padding: var(--wp--preset--spacing--6) var(--wp--preset--spacing--6) var(--wp--preset--spacing--7);
	box-shadow: var(--wp--preset--shadow--subtle);
	min-width: 0;
}
.bollaert-account .bollaert-account__content > h2,
.bollaert-account .bollaert-account__content > h3 { margin-top: 0; }
.bollaert-account__intro {
	margin: 0 0 var(--wp--preset--spacing--5);
	color: var(--wp--preset--color--muted);
}
.bollaert-account__intro a { font-weight: 600; }

/* ------------------------------------------------------- Dashboard cards */

.bollaert-account-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: var(--wp--preset--spacing--4);
}
.bollaert-account-card {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--4);
	padding: var(--wp--preset--spacing--4) var(--wp--preset--spacing--5);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 14px;
	background: var(--wp--preset--color--brand-bg);
	text-decoration: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.bollaert-account-card:hover {
	border-color: var(--wp--preset--color--brand);
	box-shadow: var(--wp--preset--shadow--medium);
	transform: translateY(-2px);
}
.bollaert-account-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	border-radius: 999px;
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--brand);
	border: 1px solid var(--wp--preset--color--border);
}
.bollaert-account-card__icon svg { display: block; }
.bollaert-account-card__title { display: block; font-weight: 700; color: var(--wp--preset--color--text); }
.bollaert-account-card__desc {
	display: block;
	margin-top: 2px;
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--muted);
}

/* ------------------------------------ WooCommerce default endpoint content */

/* Tables: orders / downloads */
.bollaert-account .bollaert-account__content table.shop_table,
.bollaert-account .bollaert-account__content table.woocommerce-orders-table,
.bollaert-account .bollaert-account__content table.woocommerce-MyAccount-downloads {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 12px;
	overflow: hidden;
	font-size: var(--wp--preset--font-size--sm);
	margin: 0;
}
.bollaert-account .bollaert-account__content table.shop_table th {
	background: var(--wp--preset--color--brand-bg);
	color: var(--wp--preset--color--muted);
	font-weight: 700;
	text-align: left;
	padding: var(--wp--preset--spacing--3) var(--wp--preset--spacing--4);
	border: 0;
}
.bollaert-account .bollaert-account__content table.shop_table td {
	padding: var(--wp--preset--spacing--3) var(--wp--preset--spacing--4);
	border: 0;
	border-top: 1px solid var(--wp--preset--color--border);
	color: var(--wp--preset--color--text);
	vertical-align: middle;
}

/* Address columns */
.bollaert-account .bollaert-account__content .woocommerce-Addresses,
.bollaert-account .bollaert-account__content .u-columns {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: var(--wp--preset--spacing--5);
	margin: 0;
	width: auto;
}
.bollaert-account .bollaert-account__content .woocommerce-Address {
	float: none;
	width: auto;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 12px;
	padding: var(--wp--preset--spacing--5);
	background: var(--wp--preset--color--white);
}
.bollaert-account .bollaert-account__content .woocommerce-Address-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--3);
	margin-bottom: var(--wp--preset--spacing--3);
}
.bollaert-account .bollaert-account__content address {
	font-style: normal;
	line-height: 1.7;
	color: var(--wp--preset--color--muted);
}

/* Forms (edit-account, edit-address) */
.bollaert-account .bollaert-account__content .woocommerce-form-row,
.bollaert-account .bollaert-account__content p.form-row { margin: 0 0 var(--wp--preset--spacing--4); }
.bollaert-account .bollaert-account__content label {
	display: block;
	margin-bottom: var(--wp--preset--spacing--2);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	color: var(--wp--preset--color--text);
}
.bollaert-account .bollaert-account__content .required { color: var(--wp--preset--color--danger); border: 0; text-decoration: none; }
.bollaert-account .bollaert-account__content input[type="text"],
.bollaert-account .bollaert-account__content input[type="email"],
.bollaert-account .bollaert-account__content input[type="tel"],
.bollaert-account .bollaert-account__content input[type="password"],
.bollaert-account .bollaert-account__content select,
.bollaert-account .bollaert-account__content textarea {
	width: 100%;
	box-sizing: border-box;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 10px;
	padding: 0.7em 0.9em;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--md);
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--text);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.bollaert-account .bollaert-account__content input:focus,
.bollaert-account .bollaert-account__content select:focus,
.bollaert-account .bollaert-account__content textarea:focus {
	outline: none;
	border-color: var(--wp--preset--color--brand);
	box-shadow: 0 0 0 3px var(--wp--preset--color--brand-tint);
}
/* edit-account first/last name side by side */
@media (min-width: 561px) {
	.bollaert-account .bollaert-account__content .woocommerce-EditAccountForm .form-row-first,
	.bollaert-account .bollaert-account__content .woocommerce-address-fields .form-row-first { width: calc(50% - 0.5rem); float: left; margin-right: 1rem; clear: none; }
	.bollaert-account .bollaert-account__content .woocommerce-EditAccountForm .form-row-last,
	.bollaert-account .bollaert-account__content .woocommerce-address-fields .form-row-last { width: calc(50% - 0.5rem); float: left; clear: none; }
	.bollaert-account .bollaert-account__content .clear { clear: both; }
}

/* Password-change fieldset */
.bollaert-account .bollaert-account__content fieldset {
	margin: var(--wp--preset--spacing--5) 0 0;
	padding: var(--wp--preset--spacing--5);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 12px;
}
.bollaert-account .bollaert-account__content legend {
	padding: 0 var(--wp--preset--spacing--2);
	font-weight: 700;
	color: var(--wp--preset--color--text);
}

/* WooCommerce buttons */
.bollaert-account .bollaert-account__content .button,
.bollaert-account .bollaert-account__content button.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.7em 1.4em;
	border: 1px solid transparent;
	border-radius: 999px;
	background: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--white);
	font-family: inherit;
	font-weight: 600;
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease;
}
.bollaert-account .bollaert-account__content .button:hover,
.bollaert-account .bollaert-account__content button.button:hover { background: var(--wp--preset--color--brand-dark); }
.bollaert-account .bollaert-account__content .woocommerce-orders-table .button.view {
	background: var(--wp--preset--color--white);
	border-color: var(--wp--preset--color--border);
	color: var(--wp--preset--color--brand-dark);
}
.bollaert-account .bollaert-account__content .woocommerce-orders-table .button.view:hover {
	border-color: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--brand);
}

/* ====================================================================== */
/* Logged-out: login / register split                                     */
/* ====================================================================== */

.bollaert-login {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--6);
	max-width: 520px;
	margin: var(--wp--preset--spacing--8) auto var(--wp--preset--spacing--12);
}
.bollaert-login.has-register { grid-template-columns: repeat(2, 1fr); max-width: 900px; }

.bollaert-login__card {
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 16px;
	padding: var(--wp--preset--spacing--6);
	box-shadow: var(--wp--preset--shadow--subtle);
}
.bollaert-login__card-head {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--3);
	margin-bottom: var(--wp--preset--spacing--5);
}
.bollaert-login__card-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 999px;
	background: var(--wp--preset--color--brand-tint);
	color: var(--wp--preset--color--brand);
	flex: 0 0 auto;
}
.bollaert-login__card-icon svg { display: block; }
.bollaert-login__card-title { margin: 0; font-size: var(--wp--preset--font-size--lg); }

.bollaert-login__form { display: flex; flex-direction: column; }
.bollaert-field { margin: 0 0 var(--wp--preset--spacing--4); }
.bollaert-field label {
	display: block;
	margin-bottom: var(--wp--preset--spacing--2);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	color: var(--wp--preset--color--text);
}
.bollaert-field .required { color: var(--wp--preset--color--danger); border: 0; }
.bollaert-input {
	width: 100%;
	box-sizing: border-box;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 10px;
	padding: 0.75em 0.95em;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--md);
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--text);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.bollaert-input:focus {
	outline: none;
	border-color: var(--wp--preset--color--brand);
	box-shadow: 0 0 0 3px var(--wp--preset--color--brand-tint);
}

.bollaert-login__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--3);
	margin-bottom: var(--wp--preset--spacing--5);
}
.bollaert-check {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	margin: 0;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 500;
	color: var(--wp--preset--color--muted);
	cursor: pointer;
}
.bollaert-check input { accent-color: var(--wp--preset--color--brand); }
.bollaert-login__forgot {
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	color: var(--wp--preset--color--brand);
	text-decoration: none;
	white-space: nowrap;
}
.bollaert-login__forgot:hover { color: var(--wp--preset--color--brand-dark); }
.bollaert-login__hint {
	margin: 0 0 var(--wp--preset--spacing--5);
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--muted);
}

/* Shared pill buttons */
.bollaert-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	box-sizing: border-box;
	padding: 0.85em 1.3em;
	border: 1px solid transparent;
	border-radius: 999px;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--md);
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.bollaert-btn--primary { background: var(--wp--preset--color--brand); color: var(--wp--preset--color--white); }
.bollaert-btn--primary:hover { background: var(--wp--preset--color--brand-dark); }
.bollaert-btn--ghost {
	background: var(--wp--preset--color--white);
	border-color: var(--wp--preset--color--border);
	color: var(--wp--preset--color--brand-dark);
}
.bollaert-btn--ghost:hover { border-color: var(--wp--preset--color--brand); color: var(--wp--preset--color--brand); }

/* ------------------------------------------------------------ Responsive */

/* Tablet & down: sidebar becomes a horizontal, swipeable tab bar */
@media (max-width: 980px) {
	.bollaert-account__layout { grid-template-columns: 1fr; }
	.bollaert-account .woocommerce-MyAccount-navigation.bollaert-account-nav {
		position: static;
		padding: var(--wp--preset--spacing--2);
	}
	.bollaert-account .bollaert-account-nav .bollaert-account-nav__list {
		flex-direction: row;
		flex-wrap: nowrap;
		overflow-x: auto;
		gap: var(--wp--preset--spacing--2);
		scrollbar-width: thin;
		-webkit-overflow-scrolling: touch;
	}
	.bollaert-account .bollaert-account-nav .bollaert-account-nav__item { flex: 0 0 auto; }
	.bollaert-account .bollaert-account-nav .woocommerce-MyAccount-navigation-link--customer-logout {
		margin-top: 0;
		padding-top: 0;
		border-top: 0;
		border-left: 1px solid var(--wp--preset--color--border);
		padding-left: var(--wp--preset--spacing--2);
	}
	.bollaert-login.has-register { grid-template-columns: 1fr; max-width: 520px; }
}

@media (max-width: 560px) {
	.bollaert-account .bollaert-account__content { padding: var(--wp--preset--spacing--5) var(--wp--preset--spacing--4); }

	/* Stack any WC table into label/value rows */
	.bollaert-account .bollaert-account__content table.shop_table thead { display: none; }
	.bollaert-account .bollaert-account__content table.shop_table,
	.bollaert-account .bollaert-account__content table.shop_table tbody,
	.bollaert-account .bollaert-account__content table.shop_table tr,
	.bollaert-account .bollaert-account__content table.shop_table td { display: block; width: 100%; box-sizing: border-box; }
	.bollaert-account .bollaert-account__content table.shop_table tr { border-top: 1px solid var(--wp--preset--color--border); }
	.bollaert-account .bollaert-account__content table.shop_table tr:first-child { border-top: 0; }
	.bollaert-account .bollaert-account__content table.shop_table td {
		border: 0;
		display: flex;
		justify-content: space-between;
		gap: var(--wp--preset--spacing--4);
		text-align: right;
	}
	.bollaert-account .bollaert-account__content table.shop_table td::before {
		content: attr(data-title);
		font-weight: 700;
		color: var(--wp--preset--color--muted);
		text-align: left;
	}
	/* edit-account names go full width on phones */
	.bollaert-account .bollaert-account__content .form-row-first,
	.bollaert-account .bollaert-account__content .form-row-last { width: 100%; float: none; margin-right: 0; }
}
/* Blog archive — landing/posts index
 *
 * Hero heading, category filter buttons, centered grid of post cards,
 * "load more" reveal. Filtering is client-side (assets/js/blog-filter.js).
 */

.bollaert-blog {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--6);
	margin-block: var(--wp--preset--spacing--8);
}

/* --- Head (banner image) --- */

.bollaert-blog__head {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 280px;
	padding: clamp(2rem, 5vw, 4rem);
	border-radius: 20px;
	overflow: hidden;
	background-color: var(--wp--preset--color--brand-dark);
	background-size: cover;
	background-position: center;
	color: #fff;
}

.bollaert-blog__head-inner {
	max-width: 60ch;
}

.bollaert-blog__eyebrow {
	margin: 0 0 var(--wp--preset--spacing--2);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.85);
}

.bollaert-blog__title {
	margin: 0 0 var(--wp--preset--spacing--3);
	font-size: var(--wp--preset--font-size--3xl);
	color: #fff;
}

.bollaert-blog__lead {
	margin: 0;
	font-size: var(--wp--preset--font-size--lg);
	color: rgba(255, 255, 255, 0.92);
}

/* --- Category tabs (Artikels / Veelgestelde Vragen) --- */

.bollaert-blog__tabs {
	display: inline-flex;
	flex-wrap: wrap;
	align-self: center;
	gap: 4px;
	padding: 5px;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 999px;
	box-shadow: var(--wp--preset--shadow--subtle);
}

.bollaert-blog__tab {
	padding: 0.55em 1.3em;
	border: none;
	border-radius: 999px;
	background: transparent;
	font: inherit;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	color: var(--wp--preset--color--brand-dark);
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.bollaert-blog__tab:hover {
	color: var(--wp--preset--color--brand);
}

.bollaert-blog__tab.is-active {
	background: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--white);
}

/* --- Subcategory chips (level 2) --- */

.bollaert-blog__subtabs {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--wp--preset--spacing--2);
}

.bollaert-blog__subtabs[hidden] {
	display: none;
}

.bollaert-blog__subtab {
	padding: 0.35em 0.95em;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 999px;
	background: var(--wp--preset--color--white);
	font: inherit;
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	color: var(--wp--preset--color--brand-dark);
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.bollaert-blog__subtab[hidden] {
	display: none;
}

.bollaert-blog__subtab:hover {
	border-color: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--brand);
}

.bollaert-blog__subtab.is-active {
	background: var(--wp--preset--color--brand-tint);
	border-color: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--brand);
}

/* --- Post grid --- */

.bollaert-blog__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
	gap: var(--wp--preset--spacing--6);
}

.bollaert-post-card {
	display: flex;
	flex-direction: column;
	max-width: none;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 16px;
	overflow: hidden;
	transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.bollaert-post-card.is-hidden {
	display: none;
}

.bollaert-post-card:hover {
	border-color: #d7e3ec;
	box-shadow: var(--wp--preset--shadow--elevated);
	transform: translateY(-4px);
}

.bollaert-post-card__media {
	position: relative;
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--wp--preset--color--brand-tint);
}

.bollaert-post-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
}

.bollaert-post-card:hover .bollaert-post-card__media img {
	transform: scale(1.05);
}

.bollaert-post-card__ph {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	color: var(--wp--preset--color--brand);
}

.bollaert-post-card__cat {
	position: absolute;
	top: 0.75rem;
	left: 0.75rem;
	padding: 0.3em 0.8em;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.92);
	color: var(--wp--preset--color--brand-dark);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	backdrop-filter: blur(2px);
}

.bollaert-post-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--2);
	padding: var(--wp--preset--spacing--4) var(--wp--preset--spacing--6) var(--wp--preset--spacing--6);
	flex-grow: 1;
}

.bollaert-post-card__date {
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--muted);
}

.bollaert-post-card__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--lg);
	line-height: 1.3;
}

.bollaert-post-card__title a {
	color: var(--wp--preset--color--text);
	text-decoration: none;
}

.bollaert-post-card__title a:hover {
	color: var(--wp--preset--color--brand);
}

.bollaert-post-card__excerpt {
	margin: 0;
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--muted);
	line-height: 1.55;
}

.bollaert-post-card__more {
	display: inline-flex;
	align-items: center;
	gap: 0.3em;
	margin-top: auto;
	padding-top: var(--wp--preset--spacing--2);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	color: var(--wp--preset--color--brand);
	text-decoration: none;
}

.bollaert-post-card__more svg {
	transition: transform 0.15s ease;
}

.bollaert-post-card__more:hover svg {
	transform: translateX(3px);
}

/* --- Load more --- */

.bollaert-blog__loadmore {
	display: flex;
	justify-content: center;
	margin-top: var(--wp--preset--spacing--4);
}

.bollaert-blog__loadmore-btn {
	padding: 0.8em 1.8em;
	border: 1px solid var(--wp--preset--color--brand);
	border-radius: 999px;
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--brand);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.bollaert-blog__loadmore-btn:hover {
	background: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--white);
}

.bollaert-blog__empty {
	padding: var(--wp--preset--spacing--12) 0;
	text-align: center;
	color: var(--wp--preset--color--muted);
}

/* --- Responsive --- */

@media (max-width: 1024.98px) {
	.bollaert-post-card {
		flex-basis: calc((100% - var(--wp--preset--spacing--6)) / 2);
	}
}

@media (max-width: 640px) {
	.bollaert-post-card {
		flex-basis: 100%;
		max-width: none;
	}
}
/* Cart (classic [woocommerce_cart], custom templates)
 *
 * Two columns: line items (left) + sticky order summary (right). Chosen
 * accessories render as shaded, indented sub-lines under their parent product.
 * Suggestions ("you may be interested in") span full width below.
 */

/* The classic cart renders via the [woocommerce_cart] shortcode inside the
   constrained post-content (narrow). Let the WooCommerce wrapper use the wide
   content area so the two-column layout has room. */
body.woocommerce-cart .woocommerce {
	max-width: min(1900px, 94vw); /* fill the body width, responsive */
	margin-left: auto;
	margin-right: auto;
}

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

.bollaert-cart__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 360px;
	gap: var(--wp--preset--spacing--6);
	align-items: start;
}

/* ---------------------------------------------------------------- Items */

.bollaert-cart__items {
	list-style: none;
	margin: 0;
	padding: 0;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 16px;
	overflow: hidden;
	box-shadow: var(--wp--preset--shadow--subtle);
}

.bollaert-cart__item {
	display: grid;
	grid-template-columns: 76px minmax(0, 1fr) auto auto 30px;
	grid-template-areas: "media info qty subtotal x";
	align-items: center;
	gap: var(--wp--preset--spacing--4);
	padding: var(--wp--preset--spacing--4) var(--wp--preset--spacing--5);
	border-top: 1px solid var(--wp--preset--color--border);
}
.bollaert-cart__item:first-child { border-top: 0; }

.bollaert-cart__item-media { grid-area: media; }
.bollaert-cart__item-info { grid-area: info; min-width: 0; }
.bollaert-cart__item-qty { grid-area: qty; }
.bollaert-cart__item-subtotal { grid-area: subtotal; }
.bollaert-cart__item-x { grid-area: x; }

.bollaert-cart__item-media img {
	width: 76px;
	height: 76px;
	object-fit: contain;
	border-radius: 10px;
	background: var(--wp--preset--color--brand-bg);
}

.bollaert-cart__item-name {
	display: block;
	font-weight: 600;
	line-height: 1.3;
	color: var(--wp--preset--color--text);
}
.bollaert-cart__item-name a {
	color: inherit;
	text-decoration: none;
}
.bollaert-cart__item-name a:hover { color: var(--wp--preset--color--brand); }

.bollaert-cart__item-unit {
	display: block;
	margin-top: 2px;
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--muted);
}

.bollaert-cart__item-subtotal {
	font-weight: 700;
	white-space: nowrap;
	color: var(--wp--preset--color--text);
}

/* Remove × */
.bollaert-cart__item-x {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 999px;
	font-size: 20px;
	line-height: 1;
	color: var(--wp--preset--color--muted);
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease;
}
.bollaert-cart__item-x:hover {
	background: var(--wp--preset--color--brand-tint);
	color: var(--wp--preset--color--danger);
}

/* Accessory sub-lines */
/* Accessory sub-lines + their heading — clearly indented under the parent,
   tied together with a vertical connector line. */
.bollaert-cart__item.is-accessory,
.bollaert-cart__acc-head {
	position: relative;
	background: var(--wp--preset--color--brand-bg);
	padding-left: calc(var(--wp--preset--spacing--6) + 64px);
}
.bollaert-cart__item.is-accessory {
	grid-template-columns: 48px minmax(0, 1fr) auto auto 30px;
	border-top: 1px solid var(--wp--preset--color--border);
	padding-top: var(--wp--preset--spacing--3);
	padding-bottom: var(--wp--preset--spacing--3);
}
.bollaert-cart__item.is-accessory .bollaert-cart__item-media img {
	width: 48px;
	height: 48px;
}
.bollaert-cart__item.is-accessory .bollaert-cart__item-name {
	font-weight: 500;
	font-size: var(--wp--preset--font-size--sm);
}
.bollaert-cart__acc-head::before,
.bollaert-cart__item.is-accessory::before {
	content: "";
	position: absolute;
	left: calc(var(--wp--preset--spacing--6) + 30px);
	top: 0;
	bottom: 0;
	width: 2px;
	background: var(--wp--preset--color--border);
}
.bollaert-cart__acc-head {
	list-style: none;
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--wp--preset--color--brand);
	padding-top: var(--wp--preset--spacing--3);
	padding-bottom: 2px;
	border-top: 1px dashed var(--wp--preset--color--border);
}
.bollaert-cart__plus {
	color: var(--wp--preset--color--brand);
	font-weight: 700;
}
.bollaert-cart__qty-fixed {
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	color: var(--wp--preset--color--muted);
}

/* Quantity stepper (WC .quantity + injected buttons) */
.bollaert-cart__item-qty .quantity {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 999px;
	overflow: hidden;
	background: var(--wp--preset--color--white);
}
.bollaert-cart__item-qty input.qty {
	width: 38px;
	border: 0;
	background: transparent;
	text-align: center;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	color: var(--wp--preset--color--text);
	padding: 8px 0;
	-moz-appearance: textfield;
}
.bollaert-cart__item-qty input.qty::-webkit-outer-spin-button,
.bollaert-cart__item-qty input.qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
.bollaert-qty-btn {
	width: 32px;
	height: 36px;
	border: 0;
	background: transparent;
	color: var(--wp--preset--color--brand-dark);
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}
.bollaert-qty-btn:hover {
	background: var(--wp--preset--color--brand-tint);
	color: var(--wp--preset--color--brand);
}

/* ------------------------------------------------------------- Actions */

.bollaert-cart__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--3);
	align-items: center;
	margin-top: var(--wp--preset--spacing--4);
}
.bollaert-cart__coupon {
	display: flex;
	gap: var(--wp--preset--spacing--2);
	flex: 1 1 auto;
}
.bollaert-cart__coupon-input {
	flex: 0 1 220px;
	min-width: 0;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 999px;
	padding: 0.6em 1.1em;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--sm);
	background: var(--wp--preset--color--white);
}
.bollaert-cart__coupon-input:focus {
	outline: none;
	border-color: var(--wp--preset--color--brand);
}
.bollaert-cart__update { margin-left: auto; }

/* Buttons */
.bollaert-cart__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4em;
	padding: 0.7em 1.3em;
	border: 1px solid transparent;
	border-radius: 999px;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.bollaert-cart__btn--ghost {
	background: var(--wp--preset--color--white);
	border-color: var(--wp--preset--color--border);
	color: var(--wp--preset--color--brand-dark);
}
.bollaert-cart__btn--ghost:hover {
	border-color: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--brand);
}
.bollaert-cart__btn--primary {
	background: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--white);
}
.bollaert-cart__btn--primary:hover { background: var(--wp--preset--color--brand-dark); }

/* --------------------------------------------------------- Order summary */

.bollaert-cart-totals {
	position: sticky;
	top: 96px;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 16px;
	padding: var(--wp--preset--spacing--5);
	box-shadow: var(--wp--preset--shadow--medium);
}
.bollaert-cart-totals__title {
	margin: 0 0 var(--wp--preset--spacing--4);
	font-size: var(--wp--preset--font-size--lg);
}
.bollaert-cart-totals__rows { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--3); }
.bollaert-cart-totals__row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--wp--preset--spacing--3);
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--muted);
}
.bollaert-cart-totals__row span:last-child {
	color: var(--wp--preset--color--text);
	font-weight: 600;
	text-align: right;
}
.bollaert-cart-totals__row.is-discount span:last-child { color: var(--wp--preset--color--success); }
.bollaert-cart-totals__row.is-total {
	margin-top: var(--wp--preset--spacing--2);
	padding-top: var(--wp--preset--spacing--3);
	border-top: 1px solid var(--wp--preset--color--border);
	font-size: var(--wp--preset--font-size--md);
}
.bollaert-cart-totals__row.is-total span { color: var(--wp--preset--color--text); }
.bollaert-cart-totals__row.is-total span:last-child {
	min-width: 0;
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 800;
	color: var(--wp--preset--color--brand);
	overflow-wrap: anywhere;
}
/* Keep the "(inclusief … BTW)" tax note on its own line so it can't overflow. */
.bollaert-cart-totals__row.is-total small {
	display: block;
	margin-top: 2px;
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 500;
	color: var(--wp--preset--color--muted);
}
.bollaert-cart-totals__shipping table { width: 100%; border: 0; margin: 0; font-size: var(--wp--preset--font-size--sm); }
.bollaert-cart-totals__shipping th { text-align: left; font-weight: 500; color: var(--wp--preset--color--muted); padding: 0; }
.bollaert-cart-totals__shipping td { text-align: right; padding: 0; }
.bollaert-cart-totals__shipping ul { margin: 0; padding: 0; list-style: none; }

/* Checkout CTA (WC outputs a.checkout-button) */
.bollaert-cart-totals__checkout { margin-top: var(--wp--preset--spacing--5); }
.bollaert-cart-totals__checkout .checkout-button,
.bollaert-cart-totals__checkout a.button {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	padding: 0.95em 1.2em;
	border-radius: 999px;
	background: #22c55e;             /* vivid green checkout CTA */
	color: var(--wp--preset--color--white);
	font-size: var(--wp--preset--font-size--md);
	font-weight: 700;
	text-align: center;
	white-space: normal;
	text-decoration: none;
	transition: background-color 0.15s ease;
}
.bollaert-cart-totals__checkout .checkout-button:hover,
.bollaert-cart-totals__checkout a.button:hover { background: #16a34a; }

.bollaert-cart-totals__assurances {
	margin: var(--wp--preset--spacing--4) 0 0;
	padding: var(--wp--preset--spacing--4) 0 0;
	border-top: 1px solid var(--wp--preset--color--border);
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--2);
}
.bollaert-cart-totals__assurances li {
	display: flex;
	align-items: center;
	gap: 0.5em;
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--muted);
}
.bollaert-cart-totals__assurances svg { color: var(--wp--preset--color--brand); flex-shrink: 0; }

/* Coupon, now inside the summary card */
.bollaert-cart-totals__coupon {
	margin-top: var(--wp--preset--spacing--4);
	padding-top: var(--wp--preset--spacing--4);
	border-top: 1px solid var(--wp--preset--color--border);
}
.bollaert-cart-totals__coupon-label {
	display: block;
	margin-bottom: var(--wp--preset--spacing--2);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	color: var(--wp--preset--color--text);
}
.bollaert-cart-totals__coupon-row {
	display: flex;
	gap: var(--wp--preset--spacing--2);
}
.bollaert-cart-totals__coupon-input {
	flex: 1 1 auto;
	min-width: 0;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 999px;
	padding: 0.75em 1.1em;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--sm);
	background: var(--wp--preset--color--white);
}
.bollaert-cart-totals__coupon-input:focus {
	outline: none;
	border-color: var(--wp--preset--color--brand);
}
.bollaert-cart-totals__coupon .bollaert-cart__btn { flex: 0 0 auto; }

/* Continue-shopping link in the cart actions */
.bollaert-cart__continue {
	display: inline-flex;
	align-items: center;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	color: var(--wp--preset--color--brand);
	text-decoration: none;
}
.bollaert-cart__continue:hover { color: var(--wp--preset--color--brand-dark); }

/* ----------------------------------------------------------- Suggestions */

.bollaert-cart-suggest { margin-top: var(--wp--preset--spacing--10); }
.bollaert-cart-suggest__title {
	margin: 0 0 var(--wp--preset--spacing--5);
	font-size: var(--wp--preset--font-size--xl);
}
.bollaert-cart-suggest__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
	gap: var(--wp--preset--spacing--4);
}
/* Smaller, image-filled suggestion cards (the photo fills the card top). */
.bollaert-cart-suggest .bollaert-product-card__media {
	display: block;
	aspect-ratio: 1 / 1;
	overflow: hidden;
}
.bollaert-cart-suggest .bollaert-product-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ------------------------------------------------------------- Empty cart */

.bollaert-cart-empty {
	text-align: center;
	padding: var(--wp--preset--spacing--12) var(--wp--preset--spacing--4);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--wp--preset--spacing--4);
}
.bollaert-cart-empty__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 80px;
	height: 80px;
	border-radius: 999px;
	background: var(--wp--preset--color--brand-tint);
	color: var(--wp--preset--color--brand);
}
.bollaert-cart-empty__msg { margin: 0; font-size: var(--wp--preset--font-size--lg); color: var(--wp--preset--color--muted); }

/* ------------------------------------------------------------ Responsive */

@media (max-width: 980px) {
	.bollaert-cart__layout { grid-template-columns: 1fr; }
	.bollaert-cart-totals { position: static; }
}

@media (max-width: 560px) {
	.bollaert-cart__item {
		grid-template-columns: 56px minmax(0, 1fr) auto;
		grid-template-areas:
			"media info x"
			"media qty  subtotal";
		row-gap: var(--wp--preset--spacing--2);
		column-gap: var(--wp--preset--spacing--3);
	}
	.bollaert-cart__item.is-accessory {
		grid-template-columns: 44px minmax(0, 1fr) auto;
		padding-left: var(--wp--preset--spacing--5);
	}
	.bollaert-cart__item-media { align-self: start; }
	.bollaert-cart__item-qty { justify-self: start; }
	.bollaert-cart__item-subtotal { justify-self: end; align-self: end; }
	.bollaert-cart__item-x { justify-self: end; align-self: start; }
	.bollaert-cart__update { margin-left: 0; }
	.bollaert-cart-suggest__grid { grid-template-columns: repeat(2, 1fr); gap: var(--wp--preset--spacing--4); }
}
/* Checkout (classic [woocommerce_checkout], custom 3-column template)
 *
 * Wide (~90vw) three columns: customer details · order summary (with product
 * thumbnails) · payment. Pill inputs matching the cart page. We keep every
 * WooCommerce field/markup class so the checkout AJAX keeps working untouched.
 * Order-received ("thank you") card lives at the bottom of this file.
 */

:root {
	--bollaert-co-radius: 16px;
	--bollaert-co-radius-sm: 12px;
}

body.woocommerce-checkout .woocommerce {
	max-width: min(1760px, 90vw);
	margin-left: auto;
	margin-right: auto;
}
body.woocommerce-checkout { background: var(--wp--preset--color--brand-bg, #f5f8fb); }

/* ----------------------------------------------------------- 3-col layout */

.bollaert-checkout__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(1rem, 1.5vw, 1.5rem);
	align-items: start;
	margin: var(--wp--preset--spacing--4) 0 var(--wp--preset--spacing--10);
}
.bollaert-checkout__col { min-width: 0; }

/* Summary + payment columns are sticky cards */
.bollaert-checkout__summary,
.bollaert-checkout__payment-col {
	position: sticky;
	top: 80px;
	background: var(--wp--preset--color--white, #fff);
	border: 1px solid var(--wp--preset--color--border, #e4ebf1);
	border-radius: var(--bollaert-co-radius);
	padding: clamp(1rem, 1.5vw, 1.4rem);
	box-shadow: 0 1px 2px rgba(16, 42, 67, 0.05), 0 16px 36px -24px rgba(16, 42, 67, 0.4);
}

.bollaert-checkout__col-title {
	display: flex;
	align-items: center;
	gap: 0.5em;
	margin: 0 0 var(--wp--preset--spacing--3);
	font-size: var(--wp--preset--font-size--lg, 1.18rem);
	font-weight: 800;
	color: var(--wp--preset--color--text, #11212f);
}
.bollaert-checkout__col-title svg { color: var(--wp--preset--color--brand, #287a9e); flex-shrink: 0; }

/* ------------------------------------------------------ Customer cards */

.bollaert-checkout .woocommerce-billing-fields,
.bollaert-checkout .woocommerce-shipping-fields,
.bollaert-checkout .woocommerce-additional-fields {
	background: var(--wp--preset--color--white, #fff);
	border: 1px solid var(--wp--preset--color--border, #e4ebf1);
	border-radius: var(--bollaert-co-radius);
	padding: clamp(1rem, 1.5vw, 1.4rem);
	box-shadow: 0 1px 2px rgba(16, 42, 67, 0.04), 0 8px 22px -18px rgba(16, 42, 67, 0.25);
	margin-bottom: var(--wp--preset--spacing--3);
}
.bollaert-checkout .woocommerce-billing-fields > h3,
.bollaert-checkout .woocommerce-additional-fields > h3,
.bollaert-checkout .woocommerce-shipping-fields .shipping_address > h3,
.bollaert-checkout #ship-to-different-address {
	position: relative;
	margin: 0 0 var(--wp--preset--spacing--3);
	padding-left: 0.7rem;
	font-size: var(--wp--preset--font-size--md, 1.02rem);
	font-weight: 700;
	line-height: 1.2;
	color: var(--wp--preset--color--text, #11212f);
}
.bollaert-checkout .woocommerce-billing-fields > h3::before,
.bollaert-checkout .woocommerce-additional-fields > h3::before,
.bollaert-checkout .woocommerce-shipping-fields .shipping_address > h3::before {
	content: "";
	position: absolute;
	left: 0; top: 0.1em; bottom: 0.1em;
	width: 4px; border-radius: 4px;
	background: var(--wp--preset--color--brand, #287a9e);
}
.bollaert-checkout #ship-to-different-address {
	display: flex; align-items: center; gap: 0.5em;
	padding-left: 0; margin-bottom: var(--wp--preset--spacing--2);
	font-size: var(--wp--preset--font-size--sm, 0.95rem);
}
.bollaert-checkout #ship-to-different-address label { margin: 0; display: inline-flex; align-items: center; gap: 0.5em; cursor: pointer; font-weight: 700; }
.bollaert-checkout #ship-to-different-address input { width: 1.1em; height: 1.1em; accent-color: var(--wp--preset--color--brand, #287a9e); cursor: pointer; }

/* Stack billing then shipping; neutralise WC core float/clearfix */
.bollaert-checkout .col2-set { display: block; }
.bollaert-checkout .col2-set .col-1,
.bollaert-checkout .col2-set .col-2 { float: none; width: auto; max-width: none; padding: 0; }
.bollaert-checkout .col2-set::before,
.bollaert-checkout .col2-set::after { content: none; display: none; }

/* ------------------------------------------------------------ Form fields */

.bollaert-checkout .woocommerce-billing-fields__field-wrapper,
.bollaert-checkout .woocommerce-shipping-fields__field-wrapper,
.bollaert-checkout .woocommerce-additional-fields__field-wrapper {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--wp--preset--spacing--2) var(--wp--preset--spacing--3);
}
.bollaert-checkout .form-row { margin: 0; padding: 0; min-width: 0; }
.bollaert-checkout #billing_address_1_field,
.bollaert-checkout #billing_address_2_field,
.bollaert-checkout #shipping_address_1_field,
.bollaert-checkout #shipping_address_2_field,
.bollaert-checkout #order_comments_field,
.bollaert-checkout .form-row.notes,
.bollaert-checkout .form-row.create-account { grid-column: 1 / -1; }

.bollaert-checkout .form-row > label {
	display: block;
	margin-bottom: 4px;
	font-size: var(--wp--preset--font-size--sm, 0.86rem);
	font-weight: 600;
	color: var(--wp--preset--color--text, #11212f);
}
.bollaert-checkout .form-row .required { color: var(--wp--preset--color--danger, #d6453d); border: 0; text-decoration: none; }
.bollaert-checkout .form-row .optional { color: var(--wp--preset--color--muted, #6a7b89); font-weight: 400; }

/* Pill inputs like the cart's coupon field. !important to beat WooCommerce /
 * plugin input styles that otherwise win on specificity (the "black inputs"). */
body.woocommerce-checkout .bollaert-checkout .input-text,
body.woocommerce-checkout .bollaert-checkout input[type="text"],
body.woocommerce-checkout .bollaert-checkout input[type="email"],
body.woocommerce-checkout .bollaert-checkout input[type="tel"],
body.woocommerce-checkout .bollaert-checkout input[type="password"],
body.woocommerce-checkout .bollaert-checkout input[type="number"],
body.woocommerce-checkout .bollaert-checkout textarea,
body.woocommerce-checkout .bollaert-checkout select {
	width: 100% !important;
	box-sizing: border-box !important;
	border: 1px solid var(--wp--preset--color--border, #e4ebf1) !important;
	border-radius: 999px !important;
	padding: 0.62em 1.1em !important;
	font-family: inherit !important;
	font-size: var(--wp--preset--font-size--sm, 0.95rem) !important;
	line-height: 1.35 !important;
	background: var(--wp--preset--color--white, #fff) !important;
	color: var(--wp--preset--color--text, #11212f) !important;
	box-shadow: none !important;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
	appearance: none;
}
body.woocommerce-checkout .bollaert-checkout textarea {
	border-radius: 16px !important;
	min-height: 76px;
	resize: vertical;
}
.bollaert-checkout .input-text::placeholder,
.bollaert-checkout textarea::placeholder { color: var(--wp--preset--color--muted, #9aabb8); }
body.woocommerce-checkout .bollaert-checkout .input-text:hover,
body.woocommerce-checkout .bollaert-checkout textarea:hover,
body.woocommerce-checkout .bollaert-checkout select:hover { border-color: var(--wp--preset--color--brand, #287a9e) !important; }
body.woocommerce-checkout .bollaert-checkout .input-text:focus,
body.woocommerce-checkout .bollaert-checkout textarea:focus,
body.woocommerce-checkout .bollaert-checkout select:focus {
	outline: none;
	border-color: var(--wp--preset--color--brand, #287a9e) !important;
	box-shadow: 0 0 0 3px var(--wp--preset--color--brand-tint, rgba(40, 122, 158, 0.18)) !important;
}
.bollaert-checkout .woocommerce-invalid .input-text { border-color: var(--wp--preset--color--danger, #d6453d) !important; }
.bollaert-checkout .woocommerce-validated .input-text { border-color: var(--wp--preset--color--success, #29a36a) !important; }

/* select2 (state, or shipping country) — pill, matching inputs */
.bollaert-checkout .select2-container--default .select2-selection--single {
	height: auto !important;
	border: 1px solid var(--wp--preset--color--border, #e4ebf1) !important;
	border-radius: 999px !important;
	padding: 0.32em 0.5em !important;
	background: var(--wp--preset--color--white, #fff) !important;
}
.bollaert-checkout .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 1.7; padding-left: 0.5em; color: var(--wp--preset--color--text, #11212f); }
.bollaert-checkout .select2-container--default .select2-selection--single .select2-selection__arrow { height: 100%; right: 8px; }

/* Locked single-country label (NL) shown as a pill */
.bollaert-checkout .form-row .woocommerce-input-wrapper > strong {
	display: inline-block;
	padding: 0.5em 1em;
	border-radius: 999px;
	background: var(--wp--preset--color--brand-bg, #eef4f8);
	font-weight: 700;
	color: var(--wp--preset--color--brand-dark, #1d5e7c);
}

/* Returning customer / coupon toggles */
.woocommerce-checkout .woocommerce-form-login-toggle,
.woocommerce-checkout .woocommerce-form-coupon-toggle { margin-bottom: var(--wp--preset--spacing--3); }
.woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info,
.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info {
	background: var(--wp--preset--color--white, #fff);
	border: 1px solid var(--wp--preset--color--border, #e4ebf1);
	border-left: 3px solid var(--wp--preset--color--brand, #287a9e);
	border-radius: var(--bollaert-co-radius-sm);
	padding: var(--wp--preset--spacing--2) var(--wp--preset--spacing--4);
	font-size: var(--wp--preset--font-size--sm, 0.88rem);
	color: var(--wp--preset--color--muted, #5a6b79);
	margin: 0;
}
.woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info a,
.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info a { color: var(--wp--preset--color--brand-dark, #1d5e7c); font-weight: 700; }
.woocommerce-checkout form.checkout_coupon,
.woocommerce-checkout form.login {
	background: var(--wp--preset--color--white, #fff);
	border: 1px solid var(--wp--preset--color--border, #e4ebf1);
	border-radius: var(--bollaert-co-radius);
	padding: var(--wp--preset--spacing--4);
	margin-bottom: var(--wp--preset--spacing--3);
}
.woocommerce-checkout form.checkout_coupon .button,
.woocommerce-checkout form.login .button {
	display: inline-flex; align-items: center; justify-content: center;
	padding: 0.7em 1.3em;
	border: 1px solid var(--wp--preset--color--brand, #287a9e);
	border-radius: 999px;
	background: var(--wp--preset--color--brand, #287a9e);
	color: #fff; font-family: inherit; font-size: var(--wp--preset--font-size--sm, 0.92rem); font-weight: 600; line-height: 1; cursor: pointer;
	transition: background-color 0.15s ease;
}
.woocommerce-checkout form.checkout_coupon .button:hover,
.woocommerce-checkout form.login .button:hover { background: var(--wp--preset--color--brand-dark, #1d5e7c); }

/* --------------------------------------------------- Order summary table */

.bollaert-checkout-table { width: 100%; border-collapse: collapse; font-size: var(--wp--preset--font-size--sm, 0.9rem); }
.bollaert-checkout-table thead th {
	text-align: left;
	font-size: var(--wp--preset--font-size--xs, 0.7rem);
	font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
	color: var(--wp--preset--color--muted, #6a7b89);
	padding-bottom: var(--wp--preset--spacing--2);
	border-bottom: 1px solid var(--wp--preset--color--border, #e4ebf1);
}
.bollaert-checkout-table thead th.product-total { text-align: right; }
.bollaert-checkout-table tbody td {
	padding: var(--wp--preset--spacing--3) 0;
	border-bottom: 1px solid var(--wp--preset--color--border, #eef2f6);
	color: var(--wp--preset--color--text, #11212f);
	vertical-align: middle;
}
.bollaert-checkout-table td.product-total { text-align: right; white-space: nowrap; font-weight: 700; vertical-align: middle; }

/* Product line with thumbnail */
.bollaert-co-line { display: flex; align-items: center; gap: 0.65rem; }
.bollaert-co-thumb { flex: 0 0 auto; }
.bollaert-co-thumb img {
	width: 46px; height: 46px; object-fit: cover;
	border-radius: 10px; border: 1px solid var(--wp--preset--color--border, #e4ebf1); display: block;
}
.bollaert-co-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.bollaert-co-pname { font-weight: 600; line-height: 1.3; }
.bollaert-checkout-table .product-quantity { color: var(--wp--preset--color--muted, #6a7b89); font-weight: 700; font-size: var(--wp--preset--font-size--xs, 0.78rem); }
.bollaert-co-info dl.variation,
.bollaert-co-info .wc-item-meta { margin: 0.15rem 0 0; font-size: var(--wp--preset--font-size--xs, 0.76rem); color: var(--wp--preset--color--muted, #6a7b89); }

.bollaert-checkout-table tfoot th,
.bollaert-checkout-table tfoot td {
	padding: 0.32rem 0;
	font-size: var(--wp--preset--font-size--sm, 0.9rem);
	color: var(--wp--preset--color--muted, #5a6b79);
	font-weight: 500; text-align: left;
}
.bollaert-checkout-table tfoot td { text-align: right; color: var(--wp--preset--color--text, #11212f); font-weight: 700; }
.bollaert-checkout-table tfoot tr:first-child th,
.bollaert-checkout-table tfoot tr:first-child td { padding-top: var(--wp--preset--spacing--3); }

/* Truck SVG on the shipping line */
.bollaert-checkout-table tfoot .woocommerce-shipping-totals th { white-space: nowrap; }
.bollaert-checkout-table tfoot .woocommerce-shipping-totals th::before {
	content: ""; display: inline-block; width: 16px; height: 16px; margin-right: 0.4em; vertical-align: -3px;
	background: no-repeat center / contain
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23287a9e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 3h15v13H1zM16 8h4l3 3v5h-7'/%3E%3Ccircle cx='5.5' cy='18.5' r='2.5'/%3E%3Ccircle cx='18.5' cy='18.5' r='2.5'/%3E%3C/svg%3E");
}
.bollaert-checkout-table tfoot .woocommerce-shipping-totals td { font-weight: 700; }
.bollaert-checkout-table tfoot .woocommerce-shipping-totals ul { margin: 0; padding: 0; list-style: none; text-align: right; }
.bollaert-checkout-table tfoot tr.cart-discount td { color: var(--wp--preset--color--success, #29a36a); }

.bollaert-checkout-table tfoot tr.order-total th,
.bollaert-checkout-table tfoot tr.order-total td {
	padding-top: var(--wp--preset--spacing--3);
	border-top: 2px solid var(--wp--preset--color--border, #e4ebf1);
	color: var(--wp--preset--color--text, #11212f);
}
.bollaert-checkout-table tfoot tr.order-total td { font-size: var(--wp--preset--font-size--xl, 1.35rem); font-weight: 800; color: var(--wp--preset--color--brand, #287a9e); }
.bollaert-checkout-table tfoot tr.order-total .includes_tax,
.bollaert-checkout-table tfoot small { font-weight: 500; font-size: var(--wp--preset--font-size--xs, 0.76rem); color: var(--wp--preset--color--muted, #6a7b89); }

/* ------------------------------------------------------- Payment column */

.bollaert-checkout__payment-col #payment,
.woocommerce-checkout #payment { background: transparent; }
.woocommerce-checkout #payment ul.payment_methods {
	list-style: none; margin: 0 0 var(--wp--preset--spacing--3); padding: 0;
	border: 1px solid var(--wp--preset--color--border, #e4ebf1);
	border-radius: var(--bollaert-co-radius-sm); overflow: hidden;
}
.woocommerce-checkout #payment ul.payment_methods li {
	padding: 0.7rem 0.85rem;
	border-top: 1px solid var(--wp--preset--color--border, #eef2f6);
	transition: background-color 0.15s ease;
}
.woocommerce-checkout #payment ul.payment_methods li:first-child { border-top: 0; }
.woocommerce-checkout #payment ul.payment_methods li:has(input:checked) { background: var(--wp--preset--color--brand-bg, #eef4f8); }
.woocommerce-checkout #payment ul.payment_methods li > label {
	display: inline-flex; align-items: center; gap: 0.5em; width: 100%;
	font-weight: 600; font-size: var(--wp--preset--font-size--sm, 0.92rem);
	color: var(--wp--preset--color--text, #11212f); cursor: pointer;
}
.woocommerce-checkout #payment ul.payment_methods li input[type="radio"] { width: 1.05em; height: 1.05em; accent-color: var(--wp--preset--color--brand, #287a9e); }
.woocommerce-checkout #payment ul.payment_methods li img { max-height: 26px; width: auto; margin-left: auto; }
.woocommerce-checkout #payment .payment_box {
	background: var(--wp--preset--color--brand-bg, #eef4f8);
	border-radius: var(--bollaert-co-radius-sm);
	padding: 0.65rem 0.85rem; margin-top: 0.5rem;
	font-size: var(--wp--preset--font-size--sm, 0.86rem); color: var(--wp--preset--color--muted, #5a6b79);
}
.woocommerce-checkout #payment .payment_box::before { display: none; }
.woocommerce-checkout #payment .woocommerce-privacy-policy-text { font-size: var(--wp--preset--font-size--xs, 0.76rem); color: var(--wp--preset--color--muted, #6a7b89); margin: var(--wp--preset--spacing--2) 0; }

.woocommerce-checkout #payment #place_order,
.woocommerce-checkout #place_order {
	display: flex; align-items: center; justify-content: center; gap: 0.5em;
	box-sizing: border-box; width: 100%; margin-top: var(--wp--preset--spacing--2);
	padding: 0.9em 1.1em; border: 0; border-radius: 999px;
	background: #22c55e; color: #fff;
	font-family: inherit; font-size: var(--wp--preset--font-size--md, 1rem); font-weight: 800; line-height: 1;
	cursor: pointer; text-align: center;
	box-shadow: 0 8px 18px -10px rgba(34, 197, 94, 0.7);
	transition: background-color 0.15s ease, transform 0.06s ease;
}
.woocommerce-checkout #place_order::before {
	content: ""; width: 15px; height: 15px;
	background: no-repeat center / contain
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E");
}
.woocommerce-checkout #place_order:hover { background: #16a34a; }
.woocommerce-checkout #place_order:active { transform: translateY(1px); }
.woocommerce-checkout #place_order:disabled { opacity: 0.6; cursor: not-allowed; box-shadow: none; }

/* Trust line in the summary column */
.bollaert-checkout__assurances {
	margin: var(--wp--preset--spacing--3) 0 0; padding: var(--wp--preset--spacing--3) 0 0;
	border-top: 1px solid var(--wp--preset--color--border, #e4ebf1);
	list-style: none; display: flex; flex-direction: column; gap: var(--wp--preset--spacing--2);
}
.bollaert-checkout__assurances li { display: flex; align-items: center; gap: 0.5em; font-size: var(--wp--preset--font-size--sm, 0.88rem); color: var(--wp--preset--color--muted, #5a6b79); font-weight: 600; }
.bollaert-checkout__assurances svg { color: var(--wp--preset--color--brand, #287a9e); flex-shrink: 0; }

/* ------------------------------------------------------------ Responsive */

@media (max-width: 1180px) {
	.bollaert-checkout__grid { grid-template-columns: 1fr 1fr; }
	.bollaert-checkout__customer { grid-column: 1 / -1; }
	.bollaert-checkout__summary,
	.bollaert-checkout__payment-col { position: static; }
}
@media (max-width: 680px) {
	.bollaert-checkout__grid { grid-template-columns: 1fr; }
	.bollaert-checkout__customer { grid-column: auto; }
	.bollaert-checkout .woocommerce-billing-fields__field-wrapper,
	.bollaert-checkout .woocommerce-shipping-fields__field-wrapper,
	.bollaert-checkout .woocommerce-additional-fields__field-wrapper { grid-template-columns: 1fr; }
	body.woocommerce-checkout .woocommerce { max-width: 94vw; }
}

/* ====================================================================== */
/* Order received (thank you)                                             */
/* ====================================================================== */

.bollaert-thankyou { max-width: 720px; margin: var(--wp--preset--spacing--8) auto var(--wp--preset--spacing--12); }
.bollaert-thankyou__head {
	text-align: center; background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--border); border-radius: 16px;
	padding: var(--wp--preset--spacing--8) var(--wp--preset--spacing--6); box-shadow: var(--wp--preset--shadow--subtle);
}
.bollaert-thankyou__icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 72px; height: 72px; border-radius: 999px; background: #e8f8ef;
	color: var(--wp--preset--color--success); margin-bottom: var(--wp--preset--spacing--4);
}
.bollaert-thankyou__head.is-failed .bollaert-thankyou__icon { background: #fdecec; color: var(--wp--preset--color--danger); }
.bollaert-thankyou__title { margin: 0 0 var(--wp--preset--spacing--2); font-size: var(--wp--preset--font-size--2xl); }
.bollaert-thankyou__lead { margin: 0; color: var(--wp--preset--color--muted); font-size: var(--wp--preset--font-size--md); }
.bollaert-thankyou__overview {
	list-style: none; margin: var(--wp--preset--spacing--6) 0 0; padding: 0;
	display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--wp--preset--spacing--4);
}
.bollaert-thankyou__overview li { background: var(--wp--preset--color--brand-bg); border: 1px solid var(--wp--preset--color--border); border-radius: 12px; padding: var(--wp--preset--spacing--4); text-align: left; }
.bollaert-thankyou__overview-label { display: block; margin-bottom: 2px; font-size: var(--wp--preset--font-size--xs); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--wp--preset--color--muted); }
.bollaert-thankyou__overview strong { color: var(--wp--preset--color--text); font-size: var(--wp--preset--font-size--md); }
.bollaert-thankyou__actions { display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--3); justify-content: center; margin-top: var(--wp--preset--spacing--5); }
.bollaert-thankyou__actions .bollaert-btn { width: auto; }
.bollaert-thankyou .woocommerce-order-details,
.bollaert-thankyou .woocommerce-customer-details { margin-top: var(--wp--preset--spacing--8); }
.bollaert-thankyou .woocommerce-order-details__title,
.bollaert-thankyou .woocommerce-column__title { font-size: var(--wp--preset--font-size--lg); margin-bottom: var(--wp--preset--spacing--4); }
.bollaert-thankyou table.shop_table {
	width: 100%; border-collapse: separate; border-spacing: 0;
	border: 1px solid var(--wp--preset--color--border); border-radius: 12px; overflow: hidden; font-size: var(--wp--preset--font-size--sm);
}
.bollaert-thankyou table.shop_table th,
.bollaert-thankyou table.shop_table td { padding: var(--wp--preset--spacing--3) var(--wp--preset--spacing--4); border-bottom: 1px solid var(--wp--preset--color--border); text-align: left; }
.bollaert-thankyou table.shop_table tfoot th { color: var(--wp--preset--color--muted); font-weight: 600; }
/* Contact page — compact two-column layout (info cards + form), designed to
 * fit in one viewport. Flex + grid, responsive. */

.bollaert-contact {
	margin: var(--wp--preset--spacing--4) auto var(--wp--preset--spacing--6);
}

.bollaert-contact__notice {
	margin: 0 0 var(--wp--preset--spacing--4);
	padding: var(--wp--preset--spacing--3) var(--wp--preset--spacing--4);
	border-radius: 10px;
	font-weight: 500;
}
.bollaert-contact__notice.is-success { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; }
.bollaert-contact__notice.is-error { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }

.bollaert-contact__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--wp--preset--spacing--5);
	align-items: start;
}

/* --- Cards --- */
.bollaert-contact__card,
.bollaert-contact__form-wrap {
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 14px;
	padding: var(--wp--preset--spacing--4);
	box-shadow: var(--wp--preset--shadow--subtle);
}
.bollaert-contact__card { margin-bottom: var(--wp--preset--spacing--3); }
.bollaert-contact__card:last-child { margin-bottom: 0; }

.bollaert-contact__subtitle { font-size: var(--wp--preset--font-size--md); font-weight: 700; margin: 0; }

/* --- Contact lines (address / phone / email + copy) --- */
.bollaert-contact__lines { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--wp--preset--spacing--3); }
.bollaert-contact__lines li { display: flex; align-items: center; gap: var(--wp--preset--spacing--3); }
.bollaert-contact__chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	flex-shrink: 0;
	border-radius: 10px;
	background: var(--wp--preset--color--brand-tint);
	color: var(--wp--preset--color--brand);
}
.bollaert-contact__val { flex: 1 1 auto; min-width: 0; color: var(--wp--preset--color--text); text-decoration: none; font-weight: 500; line-height: 1.3; }
a.bollaert-contact__val:hover { color: var(--wp--preset--color--brand); }

.bollaert-copy {
	position: relative;
	flex-shrink: 0;
	width: 32px;
	height: 32px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 8px;
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--muted);
	cursor: pointer;
	transition: color 0.15s ease, border-color 0.15s ease;
}
.bollaert-copy:hover { color: var(--wp--preset--color--brand); border-color: var(--wp--preset--color--brand); }
.bollaert-copy__done { display: none; font-size: 15px; line-height: 1; }
.bollaert-copy.is-copied { color: var(--wp--preset--color--success); border-color: var(--wp--preset--color--success); }
.bollaert-copy.is-copied svg { display: none; }
.bollaert-copy.is-copied .bollaert-copy__done { display: inline; }
.bollaert-copy.is-copied::after {
	content: attr(data-copied);
	position: absolute;
	bottom: calc(100% + 6px);
	left: 50%;
	transform: translateX(-50%);
	background: var(--wp--preset--color--text);
	color: var(--wp--preset--color--white);
	font-size: 11px;
	padding: 3px 8px;
	border-radius: 6px;
	white-space: nowrap;
	pointer-events: none;
}

/* --- Opening hours --- */
.bollaert-contact__card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--wp--preset--spacing--3); margin-bottom: var(--wp--preset--spacing--3); }
.bollaert-contact__status { display: inline-flex; align-items: center; gap: 6px; font-size: var(--wp--preset--font-size--xs); font-weight: 600; padding: 3px 10px; border-radius: 999px; background: var(--wp--preset--color--brand-bg); color: var(--wp--preset--color--muted); }
.bollaert-contact__status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--wp--preset--color--muted); }
.bollaert-contact__status.is-open { background: #ecfdf5; color: #065f46; }
.bollaert-contact__status.is-open .bollaert-contact__status-dot { background: #10b981; }
.bollaert-contact__status.is-closed { background: #fef2f2; color: #991b1b; }
.bollaert-contact__status.is-closed .bollaert-contact__status-dot { background: #ef4444; }

.bollaert-contact__hours-table { width: 100%; border-collapse: collapse; font-size: var(--wp--preset--font-size--sm); }
.bollaert-contact__hours-table tr { border-bottom: 1px solid var(--wp--preset--color--border); }
.bollaert-contact__hours-table tr:last-child { border-bottom: 0; }
.bollaert-contact__hours-table th { text-align: left; font-weight: 500; color: var(--wp--preset--color--text); text-transform: capitalize; padding: 4px 0; }
.bollaert-contact__hours-table td { text-align: right; padding: 4px 0; }
.bollaert-contact__hours-table tr.is-today th { font-weight: 800; color: var(--wp--preset--color--brand); }
.bollaert-contact__hours-table tr.is-today td { font-weight: 700; }
.bollaert-contact__hours-open { color: var(--wp--preset--color--text); font-weight: 600; }
.bollaert-contact__hours-closed { color: var(--wp--preset--color--muted); }

/* --- Map (compact) --- */
.bollaert-contact__card .bollaert-contact__subtitle + .bollaert-contact__map { margin-top: var(--wp--preset--spacing--3); }
.bollaert-contact__map { margin-top: var(--wp--preset--spacing--3); border-radius: 10px; overflow: hidden; border: 1px solid var(--wp--preset--color--border); }
.bollaert-contact__map iframe { display: block; width: 100%; height: 140px; border: 0; }

/* --- Form --- */
.bollaert-contact__intro { color: var(--wp--preset--color--muted); font-size: var(--wp--preset--font-size--sm); margin: 4px 0 var(--wp--preset--spacing--4); }
.bollaert-contact__form { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--3); }
.bollaert-contact__row { display: flex; gap: var(--wp--preset--spacing--3); }
.bollaert-contact__row .bollaert-contact__field { flex: 1 1 0; min-width: 0; }
.bollaert-contact__field { display: flex; flex-direction: column; gap: 4px; }
.bollaert-contact__field span { font-size: var(--wp--preset--font-size--xs); font-weight: 600; color: var(--wp--preset--color--text); }
.bollaert-contact__field input,
.bollaert-contact__field textarea {
	width: 100%;
	box-sizing: border-box;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 9px;
	padding: 0.6em 0.85em;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--sm);
	background: var(--wp--preset--color--brand-bg);
	color: var(--wp--preset--color--text);
}
.bollaert-contact__field textarea { resize: vertical; }
.bollaert-contact__field input:focus,
.bollaert-contact__field textarea:focus {
	outline: none;
	border-color: var(--wp--preset--color--brand);
	background: var(--wp--preset--color--white);
	box-shadow: 0 0 0 3px rgba(51, 153, 204, 0.15);
}
.bollaert-contact__submit {
	align-self: flex-start;
	margin-top: 2px;
	background: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--white);
	border: 0;
	border-radius: 999px;
	padding: 0.75em 2.2em;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--md);
	font-weight: 700;
	cursor: pointer;
	transition: background-color 0.15s ease;
}
.bollaert-contact__submit:hover { background: var(--wp--preset--color--brand-dark); }
.bollaert-contact__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

@media (max-width: 860px) {
	.bollaert-contact__grid { grid-template-columns: 1fr; gap: var(--wp--preset--spacing--4); }
	.bollaert-contact__row { flex-direction: column; }
}
/* Delivery page — hero + USPs + method/lead-time cards + FAQ accordion. */

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

/* --- Intro: first paragraph on top, full width, compact --- */
.bollaert-delivery__intro { max-width: 860px; margin: 0 auto var(--wp--preset--spacing--5); text-align: center; }
.bollaert-delivery__title { font-size: var(--wp--preset--font-size--2xl); margin: 0 0 var(--wp--preset--spacing--3); }
.bollaert-delivery__lead { font-size: var(--wp--preset--font-size--lg); color: var(--wp--preset--color--muted); line-height: 1.5; margin: 0 auto var(--wp--preset--spacing--4); max-width: 720px; }
.bollaert-delivery__usps { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--wp--preset--spacing--3); }
.bollaert-delivery__usps li {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	font-weight: 600;
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--brand-dark);
	background: var(--wp--preset--color--brand-tint);
	padding: 0.5em 1em;
	border-radius: 999px;
}
.bollaert-delivery__usps svg { color: var(--wp--preset--color--success); flex-shrink: 0; }

/* --- Banner image: show the full collage, centred (no awkward crop) --- */
.bollaert-delivery__banner { max-width: 760px; margin: 0 auto var(--wp--preset--spacing--8); border-radius: 16px; overflow: hidden; border: 1px solid var(--wp--preset--color--border); }
.bollaert-delivery__banner img { width: 100%; height: auto; display: block; }

/* --- Method / lead-time cards --- */
.bollaert-delivery__cols {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--wp--preset--spacing--6);
	margin-bottom: var(--wp--preset--spacing--10);
}
.bollaert-delivery__card {
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 16px;
	padding: var(--wp--preset--spacing--6);
	box-shadow: var(--wp--preset--shadow--subtle);
}
.bollaert-delivery__card-title { display: flex; align-items: center; gap: 0.5em; font-size: var(--wp--preset--font-size--lg); margin: 0 0 var(--wp--preset--spacing--3); }
.bollaert-delivery__card-title svg { color: var(--wp--preset--color--brand); flex-shrink: 0; }
.bollaert-delivery__card p { color: var(--wp--preset--color--text); line-height: 1.6; margin: 0 0 var(--wp--preset--spacing--3); }
.bollaert-delivery__card p:last-child { margin-bottom: 0; }
.bollaert-delivery__q { font-size: var(--wp--preset--font-size--md); margin: var(--wp--preset--spacing--3) 0 4px; color: var(--wp--preset--color--brand-dark); }

/* --- FAQ accordion --- */
.bollaert-delivery__faq { max-width: 820px; margin: 0 auto; }
.bollaert-delivery__faq-title { font-size: var(--wp--preset--font-size--xl); margin: 0 0 var(--wp--preset--spacing--5); text-align: center; }
.bollaert-delivery__faq-item {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 12px;
	margin-bottom: var(--wp--preset--spacing--3);
	background: var(--wp--preset--color--white);
	overflow: hidden;
}
.bollaert-delivery__faq-item summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--4);
	padding: var(--wp--preset--spacing--4) var(--wp--preset--spacing--5);
	cursor: pointer;
	font-weight: 600;
	color: var(--wp--preset--color--text);
	list-style: none;
}
.bollaert-delivery__faq-item summary::-webkit-details-marker { display: none; }
.bollaert-delivery__faq-item summary:hover { color: var(--wp--preset--color--brand); }
.bollaert-delivery__chev { flex-shrink: 0; color: var(--wp--preset--color--brand); transform: rotate(90deg); transition: transform 0.2s ease; }
.bollaert-delivery__faq-item[open] .bollaert-delivery__chev { transform: rotate(-90deg); }
.bollaert-delivery__faq-body { padding: 0 var(--wp--preset--spacing--5) var(--wp--preset--spacing--4); color: var(--wp--preset--color--muted); line-height: 1.6; }
.bollaert-delivery__faq-body p { margin: 0; }

@media (max-width: 860px) {
	.bollaert-delivery__cols { grid-template-columns: 1fr; gap: var(--wp--preset--spacing--5); }
	.bollaert-delivery__banner { max-width: 100%; }
}
/* Drawer (mobile) component
 *
 * Off-canvas panel sliding in from the left, with a dimmed overlay.
 * Only used under 1025px; fully hidden on desktop.
 */

.bollaert-drawer,
.bollaert-drawer-overlay {
	display: none;
}

@media (max-width: 1024.98px) {

	.bollaert-drawer-overlay {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 1990;
		background: rgba(15, 23, 42, 0.45);
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.2s ease, visibility 0.2s ease;
	}

	.bollaert-drawer {
		display: flex;
		flex-direction: column;
		gap: var(--wp--preset--spacing--4);
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		z-index: 2000;
		width: min(86vw, 360px);
		padding: var(--wp--preset--spacing--6) var(--wp--preset--spacing--6) var(--wp--preset--spacing--8);
		background: var(--wp--preset--color--white);
		box-shadow: 2px 0 24px rgba(15, 23, 42, 0.12);
		overflow-y: auto;
		transform: translateX(-105%);
		transition: transform 0.25s ease;
	}

	body.bollaert-drawer-open .bollaert-drawer {
		transform: translateX(0);
	}

	body.bollaert-drawer-open .bollaert-drawer-overlay {
		opacity: 1;
		visibility: visible;
	}

	/* lock body scroll behind the drawer */
	body.bollaert-drawer-open {
		overflow: hidden;
	}

	/* --- Head --- */

	.bollaert-drawer__head {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.bollaert-drawer__brand {
		font-size: var(--wp--preset--font-size--lg);
		font-weight: 700;
		color: var(--wp--preset--color--text);
	}

	.bollaert-drawer__close {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 38px;
		height: 38px;
		border: none;
		border-radius: 999px;
		background: var(--wp--preset--color--brand-tint);
		color: var(--wp--preset--color--brand);
		cursor: pointer;
		transition: background-color 0.15s ease, color 0.15s ease;
	}

	.bollaert-drawer__close:hover {
		background: var(--wp--preset--color--brand);
		color: var(--wp--preset--color--white);
	}

	/* --- "Onze producten" toggle --- */

	/* Label = grid icon + text (same icon as the desktop mega button) */
	.bollaert-drawer__mega-label {
		display: inline-flex;
		align-items: center;
		gap: 0.55em;
	}
	.bollaert-drawer__mega-icon { flex-shrink: 0; }


	.bollaert-drawer__mega-toggle {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		padding: 0.8em 1.2em;
		border: none;
		border-radius: 10px;
		background: var(--wp--preset--color--brand);
		color: var(--wp--preset--color--white);
		font: inherit;
		font-weight: 600;
		cursor: pointer;
		transition: background-color 0.15s ease;
	}

	.bollaert-drawer__mega-toggle:hover {
		background: var(--wp--preset--color--brand-dark);
	}

	.bollaert-drawer__chev {
		transform: rotate(90deg);
		transition: transform 0.2s ease;
	}

	.bollaert-drawer__mega-toggle[aria-expanded="true"] .bollaert-drawer__chev,
	.bollaert-drawer__subtoggle[aria-expanded="true"] .bollaert-drawer__chev {
		transform: rotate(-90deg);
	}

	/* --- Categories --- */

	/* Hidden until "Onze producten" is tapped (drawer.js toggles [hidden]).
	   The :not([hidden]) guard lets the hidden attribute win. */
	.bollaert-drawer__mega:not([hidden]) {
		display: flex;
		flex-direction: column;
		margin-top: var(--wp--preset--spacing--2);
	}

	.bollaert-drawer__cat-top {
		display: flex;
		align-items: center;
		gap: var(--wp--preset--spacing--2);
		border-bottom: 1px solid var(--wp--preset--color--border);
	}

	.bollaert-drawer__cat-link {
		display: flex;
		align-items: center;
		gap: var(--wp--preset--spacing--3);
		flex: 1 1 auto;
		min-width: 0;
		padding: 0.5em 0.4em;
		color: var(--wp--preset--color--text);
		font-weight: 500;
		text-decoration: none;
	}

	/* Category photo (from the category's best-selling product, see catalog.php) */
	.bollaert-drawer__cat-thumb {
		flex: 0 0 auto;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 46px;
		height: 46px;
		border-radius: 8px;
		overflow: hidden;
		background: var(--wp--preset--color--brand-bg, #f3f8fc);
		color: var(--wp--preset--color--brand);
	}
	.bollaert-drawer__cat-thumb img { width: 100%; height: 100%; object-fit: contain; }
	.bollaert-drawer__cat-name { min-width: 0; }

	.bollaert-drawer__cat-link:hover { color: var(--wp--preset--color--brand); }
	.bollaert-drawer__cat-link:hover .bollaert-drawer__cat-name { text-decoration: underline; text-underline-offset: 2px; }

	.bollaert-drawer__subtoggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 34px;
		height: 34px;
		flex-shrink: 0;
		border: none;
		background: transparent;
		color: var(--wp--preset--color--muted);
		cursor: pointer;
	}

	.bollaert-drawer__sub {
		list-style: none;
		margin: 0;
		padding: 0.3em 0 0.6em var(--wp--preset--spacing--4);
	}

	.bollaert-drawer__sub a {
		display: block;
		padding: 0.4em 0;
		font-size: var(--wp--preset--font-size--sm);
		color: var(--wp--preset--color--muted);
		text-decoration: none;
	}

	.bollaert-drawer__sub a:hover {
		color: var(--wp--preset--color--brand);
	}

	/* --- Main menu --- */

	.bollaert-drawer__menu {
		list-style: none;
		margin: 0;
		padding: var(--wp--preset--spacing--2) 0 0;
		border-top: 1px solid var(--wp--preset--color--border);
	}

	.bollaert-drawer__menu a {
		display: flex;
		align-items: center;
		gap: 0.8em;
		padding: 0.7em 0.6em;
		border-radius: 8px;
		color: var(--wp--preset--color--text);
		font-weight: 500;
		text-decoration: none;
		transition: background-color 0.15s ease, color 0.15s ease;
	}

	.bollaert-drawer__menu a:hover {
		background: var(--wp--preset--color--brand-tint);
		color: var(--wp--preset--color--brand);
	}

	.bollaert-drawer__ic {
		flex-shrink: 0;
		color: var(--wp--preset--color--brand);
	}

	/* --- Contact --- */

	.bollaert-drawer__contact {
		margin-top: auto;
		padding-top: var(--wp--preset--spacing--4);
		border-top: 1px solid var(--wp--preset--color--border);
		display: flex;
		flex-direction: column;
		gap: var(--wp--preset--spacing--2);
	}

	.bollaert-drawer__contact-row {
		display: flex;
		align-items: center;
		gap: var(--wp--preset--spacing--2);
	}

	.bollaert-drawer__contact-link {
		display: inline-flex;
		align-items: center;
		gap: 0.6em;
		flex: 1 1 auto;
		color: var(--wp--preset--color--brand-dark);
		font-weight: 500;
		text-decoration: none;
	}

	.bollaert-drawer__contact-link:hover {
		color: var(--wp--preset--color--brand);
	}

	.bollaert-drawer__copy {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 34px;
		height: 34px;
		flex-shrink: 0;
		border: 1px solid var(--wp--preset--color--border);
		border-radius: 8px;
		background: var(--wp--preset--color--white);
		color: var(--wp--preset--color--muted);
		cursor: pointer;
		transition: color 0.15s ease, border-color 0.15s ease;
	}

	.bollaert-drawer__copy:hover {
		color: var(--wp--preset--color--brand);
		border-color: var(--wp--preset--color--brand);
	}

	.bollaert-drawer__copy-ok {
		display: none;
		color: var(--wp--preset--color--success);
	}

	.bollaert-drawer__copy.is-copied .bollaert-drawer__copy-ic {
		display: none;
	}

	.bollaert-drawer__copy.is-copied .bollaert-drawer__copy-ok {
		display: inline-block;
	}
}
/* Footer — Columns component (4 columns), dark slate / blue text */

.bollaert-footer-columns {
	display: grid;
	grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
	gap: var(--wp--preset--spacing--8);
}

.bollaert-footer-columns__col p {
	color: #8ba6c0;
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.6;
	margin: 0;
}

.bollaert-footer-columns__col--brand p {
	margin-top: var(--wp--preset--spacing--3);
	max-width: 34ch;
}

.bollaert-footer-columns__logo {
	height: 42px;
	width: auto;
	display: block;
}

.bollaert-footer-columns__title {
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #5bb8e0; /* bright blue headings */
	margin: 0 0 var(--wp--preset--spacing--3);
}

.bollaert-footer-columns__col ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--2);
}

.bollaert-footer-columns__col a {
	color: #b6d2e6;
	text-decoration: none;
	font-size: var(--wp--preset--font-size--sm);
	transition: color 0.15s ease;
}

.bollaert-footer-columns__col a:hover {
	color: #ffffff;
}

.bollaert-footer-columns__contact li {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--2);
}

.bollaert-footer-columns__icon {
	color: #5bb8e0;
	flex-shrink: 0;
}

/* Mobile: 2 columns, brand column full width on top */
@media (max-width: 781.98px) {
	.bollaert-footer-columns {
		grid-template-columns: 1fr 1fr;
		gap: var(--wp--preset--spacing--6) var(--wp--preset--spacing--5);
	}
	.bollaert-footer-columns__col--brand {
		grid-column: 1 / -1;
	}
}

@media (max-width: 480px) {
	.bollaert-footer-columns { grid-template-columns: 1fr; }
}
/* Footer — Legal component (bottom bar), dark slate / blue text */

.bollaert-footer-legal {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--4);
	padding-top: var(--wp--preset--spacing--5);
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	font-size: var(--wp--preset--font-size--sm);
	color: #7e9ab4;
}

.bollaert-footer-legal__copy {
	margin: 0;
}

.bollaert-footer-legal__payments {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--3);
}

.bollaert-footer-legal__payments-label {
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	color: #b6d2e6;
}

.bollaert-footer-legal__payments ul {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.bollaert-footer-legal__payments img {
	display: block;
	height: 28px;
	width: auto;
	border-radius: 4px;
	background: #fff;
	padding: 2px 4px;
}
/* Footer — composer
 *
 * Full-width dark slate-950 band with blue text. Content is centred on desktop
 * and spans the full width (minimal padding) on mobile.
 */

/* Sticky footer: make the page wrapper fill at least the viewport so the dark
 * footer band is always flush with the bottom and never leaves a white gap
 * beneath it on short pages (e.g. a search with few/no results, an empty
 * category, or 404). Stacking header → main → footer as a flex column lets the
 * main content area grow to absorb the slack. The sticky header keeps working
 * (sticky elements are valid flex items). */
.wp-site-blocks {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100dvh;
}
.wp-site-blocks > main {
	flex: 1 0 auto;
}

.bollaert-footer {
	margin-top: var(--wp--preset--spacing--16);
	background: #020617; /* slate-950 */
	color: #93b1cc;       /* soft blue body text */
	border-top: 3px solid var(--wp--preset--color--brand);
}

.bollaert-footer__inner {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--8);
	max-width: min(92vw, 1200px);
	margin-inline: auto;
	padding-block: var(--wp--preset--spacing--12) var(--wp--preset--spacing--6);
}

/* Mobile: footer spans the full width, edge to edge (no side padding/margin).
 * The band picks up WordPress's root padding (~24px) via useRootPaddingAware-
 * Alignments, so zero it out here too. */
@media (max-width: 781.98px) {
	.bollaert-footer {
		margin-top: var(--wp--preset--spacing--10);
		padding-inline: 0 !important;
	}
	.bollaert-footer__inner {
		max-width: 100%;
		margin-inline: 0;
		padding-inline: 0;
	}
	/* On the product page the footer sits in the left column as a rounded card;
	 * on mobile make it full-bleed too. */
	.bollaert-pdp__media-col > .wp-block-template-part .bollaert-footer { border-radius: 0; }
}
/* Header — Utility bar
 *
 * Slim strip at the top of the header: delivery USPs (left) + payment
 * icons & phone (right). Brand-tinted, compact.
 */

.bollaert-headerbar {
	background: var(--wp--preset--color--brand-bg);
	font-size: var(--wp--preset--font-size--xs);
}

.bollaert-headerbar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--4);
	width: 90vw;
	max-width: 90vw;
	margin-inline: auto;
	padding: 6px 0;
}

.bollaert-headerbar__usps {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 0.4rem 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
	min-width: 0;
}

.bollaert-headerbar__usp {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	color: var(--wp--preset--color--text);
	font-weight: 500;
	white-space: nowrap;
}

.bollaert-headerbar__check {
	color: var(--wp--preset--color--success);
	flex-shrink: 0;
}

.bollaert-headerbar__right {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--4);
	flex-shrink: 0;
}

/* Contact (e-mail + phone), each with a compact copy button */
.bollaert-headerbar__contact {
	display: inline-flex;
	align-items: center;
	gap: 0.2em;
}

.bollaert-headerbar__mail {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	color: var(--wp--preset--color--brand-dark);
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.bollaert-headerbar__mail svg { color: var(--wp--preset--color--brand); }
.bollaert-headerbar__mail:hover { color: var(--wp--preset--color--brand); }

.bollaert-headerbar__copy {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	padding: 0;
	border: none;
	border-radius: 6px;
	background: transparent;
	color: var(--wp--preset--color--muted);
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.bollaert-headerbar__copy svg { display: block; width: 13px; height: 13px; }
.bollaert-headerbar__copy:hover { background: rgba(0, 0, 0, 0.06); color: var(--wp--preset--color--brand); }
.bollaert-headerbar__copy.is-copied { color: var(--wp--preset--color--success); }

.bollaert-headerbar__phone {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	color: var(--wp--preset--color--brand-dark);
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.bollaert-headerbar__phone svg {
	color: var(--wp--preset--color--brand);
}

.bollaert-headerbar__phone:hover {
	color: var(--wp--preset--color--brand);
}

/* --- Responsive: trim on small screens to keep it one line --- */

@media (max-width: 920px) {
	.bollaert-headerbar__usp--extra {
		display: none;
	}
}

@media (max-width: 680px) {
	/* keep just the phone (with its copy button); drop the e-mail to stay on one line */
	.bollaert-headerbar__contact:first-child {
		display: none;
	}
}

@media (max-width: 480px) {
	/* keep only the first USP + phone */
	.bollaert-headerbar__usp:nth-child(n+2) {
		display: none;
	}
}
/* Header — single row, three zones, ROCK SOLID across pages.
 *
 * Desktop: a 1fr | auto | 1fr grid. The equal 1fr side columns guarantee the
 * centre cluster (Onze producten · search · cart) sits at the TRUE centre of
 * the bar, whatever the logo or tabs width. The search has a FIXED pixel width
 * (no vw, no flex-grow) so it never resizes with the viewport, and combined
 * with `scrollbar-gutter: stable` (style.css) the layout width is identical
 * whether or not a page scrolls — so the header never shifts between pages.
 *   [ logo ]            [ Onze producten · search · cart ]            [ tabs ]
 * Mobile (<1025px): burger + logo on row 1, the center group full-width on
 * row 2; mega + tabs hidden (drawer takes over).
 */

.bollaert-header-row {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--4);
	flex-wrap: nowrap;
	min-height: 58px;
}

/* --- Zone 1: logo — brand mark badge (icon only) --- */
.bollaert-logo-link {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	flex: 1 1 0; /* left zone (~25%) — logo stays left */
	min-width: 0;
}
/* Horizontal wordmark logo; fixed height beats the WooCommerce content img rule. */
.bollaert-header-row .bollaert-logo {
	height: 44px !important;
	width: auto !important;
	max-width: 100%;
	flex-shrink: 0;
	object-fit: contain;
}

/* --- Zone 2 (grid col 2): Onze producten · search · cart — true centre --- */
.bollaert-header-row__center {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--4);
	justify-content: space-between; /* mega left · search · cart right */
	flex: 0 0 50%;                  /* block 2 = half the bar */
	min-width: 0;
}
.bollaert-header-row__center .bollaert-nav__mega-parent { flex: 0 0 auto; }
/* Search = 60% of the central block, so it's nice and wide. */
.bollaert-header-row__center .bollaert-search {
	flex: 0 1 60%;
	min-width: 0;
}

/* Taller controls fill the taller navbar row */
.bollaert-header-row__center .bollaert-search .wp-block-search__input,
.bollaert-header-row__center .bollaert-search input[type="search"] {
	min-height: 44px;
}
.bollaert-header-row .bollaert-nav__mega-btn {
	padding-top: 0.85em;
	padding-bottom: 0.85em;
	transition: transform 0.18s ease, background-color 0.15s ease, color 0.15s ease;
}
/* "Onze producten": keep its blue background, just add the size transition */
.bollaert-header-row .bollaert-nav__mega-btn:hover,
.bollaert-header-row .bollaert-nav__mega-parent:focus-within .bollaert-nav__mega-btn {
	transform: scale(1.05);
}

/* --- Cart (icon over small label, like the tabs) --- */
.bollaert-cart {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	flex: 0 0 auto;
	padding: 0.2em 0.5em;
	border-radius: 10px;
	color: var(--wp--preset--color--brand-dark);
	text-decoration: none;
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 500;
	line-height: 1.1;
	transition: background-color 0.15s ease, color 0.15s ease, transform 0.18s ease;
}
/* Cart: no background box on hover — just grow a touch (like the tabs) */
.bollaert-cart:hover,
.bollaert-cart:focus-visible {
	background: transparent;
	color: var(--wp--preset--color--brand-dark);
	transform: scale(1.08);
	outline: none;
}
.bollaert-cart svg { display: block; width: 24px; height: 24px; }
.bollaert-cart__label { display: block; white-space: nowrap; }

/* Red count bubble on the cart icon */
.bollaert-cart__icon-wrap {
	position: relative;
	display: inline-flex;
	line-height: 0;
}
.bollaert-cart__count {
	position: absolute;
	top: -7px;
	right: -9px;
	min-width: 17px;
	height: 17px;
	padding: 0 4px;
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	background: var(--wp--preset--color--danger);
	color: var(--wp--preset--color--white);
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	box-shadow: 0 0 0 2px var(--wp--preset--color--white);
}
.bollaert-cart__count.is-empty { display: none; }

/* --- Zone 3: tabs (icon over small label) — right zone (~25%) --- */
.bollaert-header-row .bollaert-nav__secondary {
	flex: 1 1 0;
	justify-content: flex-end;
	gap: var(--wp--preset--spacing--2);
}
.bollaert-header-row .bollaert-nav__secondary a {
	flex-direction: column;
	gap: 2px;
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 500;
	line-height: 1.1;
	padding: 0.2em 0.5em;
}
.bollaert-header-row .bollaert-nav__tab-icon { width: 20px; height: 20px; }

/* Bigger, clearer navbar icons — all kept vertically centred, so the layout
   and alignment don't shift. */
.bollaert-header-row .bollaert-nav__mega-icon { width: 22px; height: 22px; }
.bollaert-header-row .bollaert-search__icon { width: 22px; height: 22px; }

/* Active tab: NO solid fill (that blue pill was too heavy) — just a darker,
   bold, slightly enlarged label + icon, with a smooth size/colour transition.
   scale() is a transform (no reflow), so the fixed header never shifts. */
.bollaert-header-row .bollaert-nav__secondary a {
	transition: transform 0.18s ease, color 0.15s ease, background-color 0.15s ease;
}
/* Tabs: no background highlight on hover — only a size bump (the active tab is
   the one that stays bold + enlarged). */
.bollaert-header-row .bollaert-nav__secondary a:hover { background: transparent; color: var(--wp--preset--color--brand-dark); transform: scale(1.08); }
.bollaert-header-row .bollaert-nav__secondary a:hover .bollaert-nav__tab-icon { color: var(--wp--preset--color--brand); }
.bollaert-header-row .bollaert-nav__secondary a.is-active {
	background: transparent;
	color: #1f5f7a;
	font-weight: 700;
	transform: scale(1.12);
}
.bollaert-header-row .bollaert-nav__secondary a.is-active .bollaert-nav__tab-icon { color: #1f5f7a; }
.bollaert-header-row .bollaert-nav__secondary a.is-active:hover {
	background: transparent;
	color: #14455c;
	transform: scale(1.15);
}

/* No blue focus rectangle anywhere in the utility bar, header, mega menu or
   drawer — that outline broke the design. Tap highlight is killed too. */
.bollaert-headerbar a, .bollaert-headerbar button,
.bollaert-header a, .bollaert-header button,
.bollaert-drawer a, .bollaert-drawer button { -webkit-tap-highlight-color: transparent; }
.bollaert-headerbar :focus, .bollaert-headerbar :focus-visible,
.bollaert-header :focus, .bollaert-header :focus-visible,
.bollaert-drawer :focus, .bollaert-drawer :focus-visible { outline: none; }

/* --- Hamburger (mobile only) --- */
.bollaert-burger {
	display: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	flex-shrink: 0;
	padding: 0;
	border: none;
	border-radius: 8px;
	background: transparent;
	color: var(--wp--preset--color--brand-dark);
	cursor: pointer;
	transition: background-color 0.15s ease;
}
.bollaert-burger:hover { background: var(--wp--preset--color--brand-tint); }

/* --- Mobile (<1025px) --- */
@media (max-width: 1024.98px) {
	.bollaert-burger { display: inline-flex; }

	/* Back to flex for the wrapping two-row mobile header. */
	.bollaert-header-row { display: flex; flex-wrap: wrap; row-gap: var(--wp--preset--spacing--3); }

	.bollaert-header-row__center .bollaert-nav__mega-parent,
	.bollaert-header-row .bollaert-nav__secondary {
		display: none;
	}

	/* Row 1: burger | logo (centred) | cart. Row 2: full-width search.
	   `display: contents` dissolves the center wrapper so the cart and search
	   become direct items of the header row and can be ordered / wrapped. */
	.bollaert-burger { order: 0; }
	.bollaert-logo-link { order: 1; flex: 1 1 auto; justify-content: center; }
	.bollaert-header-row__center { display: contents; }
	.bollaert-header-row__center .bollaert-cart { order: 2; }
	.bollaert-header-row__center .bollaert-search {
		order: 3;
		flex: 1 1 100%;
		max-width: none;
	}

	.bollaert-cart { padding: 0.4em; }
	.bollaert-cart__label {
		position: absolute;
		width: 1px; height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}
}
/* Header — Search component
 *
 * In the desktop row, this is the central element that grows to fill the
 * available space between the logo and the actions cluster.
 */

.bollaert-search {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	align-items: stretch;
	position: relative;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 999px;
	box-shadow: var(--wp--preset--shadow--subtle);
	padding: 4px;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.bollaert-search:hover {
	border-color: var(--wp--preset--color--brand);
}

.bollaert-search:focus-within {
	border-color: var(--wp--preset--color--brand);
	box-shadow: 0 0 0 3px rgba(51, 153, 204, 0.15);
}

.bollaert-search input[type="search"] {
	flex: 1 1 auto;
	min-width: 0;
	min-height: 44px;
	border: 0;
	background: transparent;
	padding: 0 0.5em 0 1.2em;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--md);
	color: var(--wp--preset--color--text);
	border-radius: 999px;
}

.bollaert-search input[type="search"]:focus {
	outline: none;
}

.bollaert-search input[type="search"]::placeholder {
	color: var(--wp--preset--color--muted);
}

/* Solid brand submit pill, inset on the right */
.bollaert-search__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.45em;
	flex-shrink: 0;
	background: var(--wp--preset--color--brand);
	border: 0;
	color: var(--wp--preset--color--white);
	cursor: pointer;
	padding: 0 1.3em;
	border-radius: 999px;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	line-height: 1;
	transition: background-color 0.15s ease;
}

.bollaert-search__submit:hover,
.bollaert-search__submit:focus-visible {
	background: var(--wp--preset--color--brand-dark);
	outline: none;
}

.bollaert-search__icon {
	display: block;
	flex-shrink: 0;
}

.bollaert-search__submit-label {
	white-space: nowrap;
}

/* Compact submit (icon only) when the bar gets narrow */
@media (max-width: 600px) {
	.bollaert-search__submit {
		padding: 0 0.9em;
	}
	.bollaert-search__submit-label {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}
}
/* Header — wrapper
 * White band holding the top row + nav row.
 *
 * Sticky must sit on the template-part wrapper (<header>), not the inner
 * band: the inner band's parent is only as tall as the header, so sticking
 * there would release immediately. The <header> wrapper's parent is the
 * full-height .wp-site-blocks, so it stays pinned while the body scrolls.
 */

header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 1000;
	border-bottom: 1px solid var(--wp--preset--color--brand);
	background: var(--wp--preset--color--white);
}

.bollaert-header {
	position: relative;
}
/* Home — Category grid
 *
 * All main categories as equal-size cards (same photo size + height: image +
 * name). Main categories only — no subcategories. Clean light section.
 */

.bollaert-cats {
	/* The hero's 14px margin-bottom is the whole gap, so the cards peek above
	 * the fold without scrolling: cancel the .bollaert-home flex gap (the
	 * spacing--16 section rhythm) for this one hero→categories pair. */
	margin: calc(-1 * var(--wp--preset--spacing--16)) 0 var(--wp--preset--spacing--12);
	scroll-margin-top: calc(var(--bollaert-header-h, 110px) + 16px);
}

.bollaert-cats__head { margin-bottom: var(--wp--preset--spacing--4); }
.bollaert-cats__title {
	margin: 0 0 0.3em;
	font-size: clamp(1.6rem, 3vw, 2.2rem);
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--text);
}
.bollaert-cats__sub {
	margin: 0;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--md);
}

/* Equal-size cards: same photo size + same height for every category */
.bollaert-cats__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	grid-auto-rows: 1fr;
	gap: var(--wp--preset--spacing--5);
}

/* Desktop: ALL categories on a single row — small equal-width cards instead of
 * a multi-row grid, so the whole offer is scannable at a glance. */
@media (min-width: 981px) {
	.bollaert-cats__grid {
		display: flex;
		flex-wrap: nowrap;
		gap: 10px;
	}
	.bollaert-cats__grid > .bollaert-cat-card { flex: 1 1 0; min-width: 0; }
	.bollaert-cat-card { border-radius: 12px; }
	.bollaert-cat-card__title {
		justify-content: center;
		padding: 8px 6px;
		font-size: clamp(0.72rem, 0.95vw, 0.88rem);
		text-align: center;
	}
}

.bollaert-cat-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 16px;
	overflow: hidden;
	background: var(--wp--preset--color--white);
	box-shadow: var(--wp--preset--shadow--subtle);
	transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}
.bollaert-cat-card:hover {
	transform: translateY(-3px);
	border-color: var(--wp--preset--color--brand);
	box-shadow: var(--wp--preset--shadow--medium);
}

.bollaert-cat-card__media {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 4 / 3;
	background: #f7f9fb;
	overflow: hidden;
}
.bollaert-cat-card__media img { width: 100%; height: 100%; object-fit: cover; }
.bollaert-cat-card__ph { color: var(--wp--preset--color--brand); opacity: 0.4; }

.bollaert-cat-card__title {
	display: flex;
	align-items: center;
	flex: 1 1 auto;
	margin: 0;
	padding: var(--wp--preset--spacing--4);
	font-size: var(--wp--preset--font-size--md);
	line-height: 1.25;
}
.bollaert-cat-card__title a { color: var(--wp--preset--color--text); text-decoration: none; }
.bollaert-cat-card__title a:hover { color: var(--wp--preset--color--brand); }

@media (max-width: 600px) {
	.bollaert-cats__grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--wp--preset--spacing--4); }
}
/* Home — CTA band component
 *
 * Closing brand-gradient band: copy on the left, actions on the right.
 */

.bollaert-home-cta {
	border-radius: 20px;
	background:
		radial-gradient(900px 300px at 90% 120%, rgba(255, 255, 255, 0.16), transparent 60%),
		linear-gradient(135deg, var(--wp--preset--color--brand-dark) 0%, var(--wp--preset--color--brand) 100%);
	color: var(--wp--preset--color--white);
	padding: clamp(1.75rem, 5vw, 3rem) clamp(1.5rem, 5vw, 3.5rem);
}

.bollaert-home-cta__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--6);
}

.bollaert-home-cta__copy {
	max-width: 52ch;
}

.bollaert-home-cta__title {
	margin: 0 0 var(--wp--preset--spacing--2);
	font-size: var(--wp--preset--font-size--2xl);
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--white);
}

.bollaert-home-cta__text {
	margin: 0;
	font-size: var(--wp--preset--font-size--md);
	color: rgba(255, 255, 255, 0.9);
}

.bollaert-home-cta__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--3);
}

.bollaert-home-cta__btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	padding: 0.8em 1.6em;
	border-radius: 999px;
	font-weight: 600;
	text-decoration: none;
	transition: transform 0.15s ease, background-color 0.15s ease;
}

.bollaert-home-cta__btn:hover {
	transform: translateY(-1px);
}

.bollaert-home-cta__btn--primary {
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--brand-dark);
	box-shadow: var(--wp--preset--shadow--medium);
}

.bollaert-home-cta__btn--phone {
	background: rgba(255, 255, 255, 0.12);
	color: var(--wp--preset--color--white);
	border: 1px solid rgba(255, 255, 255, 0.5);
}

.bollaert-home-cta__btn--phone:hover {
	background: rgba(255, 255, 255, 0.22);
}

@media (max-width: 700px) {
	.bollaert-home-cta__actions {
		width: 100%;
	}

	.bollaert-home-cta__btn {
		flex: 1 1 auto;
		justify-content: center;
	}
}
/* Home — Features band
 *
 * Four reassurance cards (icon + title + text) under the hero.
 */

.bollaert-features {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--wp--preset--spacing--4);
	margin: 0 0 var(--wp--preset--spacing--12);
}

.bollaert-features__card {
	display: flex;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--3);
	padding: var(--wp--preset--spacing--5);
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 16px;
	box-shadow: var(--wp--preset--shadow--subtle);
}

.bollaert-features__icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: 12px;
	background: var(--wp--preset--color--brand-tint);
	color: var(--wp--preset--color--brand);
}

.bollaert-features__title {
	margin: 0 0 0.2em;
	font-size: var(--wp--preset--font-size--md);
	font-weight: 700;
	color: var(--wp--preset--color--text);
}

.bollaert-features__text {
	margin: 0;
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.5;
	color: var(--wp--preset--color--muted);
}

@media (max-width: 980px) {
	.bollaert-features {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 520px) {
	.bollaert-features {
		grid-template-columns: 1fr;
		gap: var(--wp--preset--spacing--3);
	}

	.bollaert-features__card {
		padding: var(--wp--preset--spacing--4);
	}
}
/* Home — Welcome hero
 *
 * Full-bleed banner flush against the navbar (no rounded corners, no outer
 * inset): the blog photo as background, with a light white → blue gradient
 * wash so it reads as "white and blue". Dark text on the bright left side,
 * the photo showing through on the right. Content aligns with the page width.
 */

.bollaert-hero {
	position: relative;
	/* full-bleed: span the whole viewport width from inside the constrained main */
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-top: 0;
	/* Minimal gap to the category grid below: the cards must peek above the
	 * fold so visitors see them without scrolling. */
	margin-bottom: 14px;
	/* photo + light white/blue wash (overlay first, image second) */
	background-image:
		linear-gradient(100deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.86) 38%, rgba(91, 184, 224, 0.45) 78%, rgba(51, 153, 204, 0.5) 100%),
		var(--hero-image, none);
	background-size: cover;
	background-position: center;
	background-color: var(--wp--preset--color--brand-bg, #f3f8fc);
}
/* Flush the home content (and thus the hero) right under the navbar: drop the
 * root block-gap margin WordPress puts on <main>, plus the wrapper/hero margins
 * and any leftover header border. */
.home main.wp-block-group { margin-top: 0; padding-top: 0; }
.bollaert-home { margin-top: 0; }
.bollaert-home > .bollaert-hero:first-child { margin-top: 0; }
.bollaert-header { border-bottom: 0; }

/* Content aligned to the page's left edge (the wide container starts at 5vw),
 * capped width, with vertical breathing room for the band height. */
.bollaert-hero__inner {
	position: relative;
	z-index: 1;
	box-sizing: border-box;
	max-width: 700px;
	margin-left: 5vw;
	margin-right: 5vw;
	/* Compact band: keep the whole hero short enough that the category grid
	 * below is visible without scrolling on a regular laptop screen. */
	padding-block: clamp(1.4rem, 3vw, 2.1rem);
}

.bollaert-hero__eyebrow {
	margin: 0 0 0.7em;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--brand);
}

.bollaert-hero__title {
	margin: 0 0 0.3em;
	font-size: clamp(1.9rem, 4.2vw, 2.7rem);
	line-height: 1.04;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--text);
}

.bollaert-hero__text {
	margin: 0 0 0.9em;
	font-size: clamp(1rem, 1.4vw, 1.12rem);
	line-height: 1.5;
	color: var(--wp--preset--color--muted);
}

.bollaert-hero__delivery {
	display: inline-flex;
	align-items: center;
	gap: 0.55em;
	margin: 0 0 0.8em;
	padding: 0.5em 1em;
	border-radius: 999px;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--border);
	color: var(--wp--preset--color--brand-dark);
	font-size: var(--wp--preset--font-size--md);
	box-shadow: 0 8px 20px -12px rgba(20, 56, 74, 0.4);
}
.bollaert-hero__delivery svg { color: var(--wp--preset--color--brand); flex-shrink: 0; }
.bollaert-hero__delivery strong { color: var(--wp--preset--color--brand-dark); }

.bollaert-hero__usps {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4em 1.4em;
	margin: 0 0 1em;
	padding: 0;
	list-style: none;
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--text);
}
.bollaert-hero__usps li { display: inline-flex; align-items: center; gap: 0.5em; }
.bollaert-hero__usps svg { color: var(--wp--preset--color--success, #2e9b5b); flex-shrink: 0; }

.bollaert-hero__cats {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--2);
	margin: 0 0 1.2em;
}
.bollaert-hero__chip {
	display: inline-flex;
	align-items: center;
	padding: 0.5em 1em;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.9);
	border: 1px solid var(--wp--preset--color--border);
	color: var(--wp--preset--color--brand-dark);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	text-decoration: none;
	transition: border-color 0.15s ease, color 0.15s ease, transform 0.15s ease, background-color 0.15s ease;
}
.bollaert-hero__chip:hover {
	background: var(--wp--preset--color--brand);
	border-color: var(--wp--preset--color--brand);
	color: #fff;
	transform: translateY(-1px);
}

.bollaert-hero__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.9em 1.9em;
	border-radius: 12px;
	background: var(--wp--preset--color--brand);
	color: #fff;
	font-weight: 700;
	font-size: var(--wp--preset--font-size--md);
	text-decoration: none;
	box-shadow: 0 14px 30px -16px rgba(51, 153, 204, 0.9);
	transition: transform 0.15s ease, filter 0.15s ease;
}
.bollaert-hero__cta:hover { transform: translateY(-1px); filter: brightness(0.95); }

@media (max-width: 781px) {
	/* On phones the bright wash should cover the whole width for readability */
	.bollaert-hero {
		background-image:
			linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.82) 55%, rgba(51, 153, 204, 0.45) 100%),
			var(--hero-image, none);
	}
	.bollaert-hero__inner { max-width: none; width: 90vw; }
}
/* Home — composer
 *
 * Vertical rhythm between the stacked home sections.
 */

.bollaert-home {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--16);
	margin-block: var(--wp--preset--spacing--8);
	min-width: 0;
}
/* Nav (desktop) component
 *
 * Row below the header bar. "Onze producten" mega-menu on the left,
 * secondary links on the right. Mega opens on hover/focus (CSS only).
 * Hidden under 1025px — the mobile drawer takes over there.
 */

.bollaert-nav {
	position: relative;
	margin-top: var(--wp--preset--spacing--4);
}

.bollaert-nav__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--6);
}

.bollaert-nav__primary,
.bollaert-nav__secondary {
	display: flex;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bollaert-nav__secondary {
	gap: var(--wp--preset--spacing--6);
}

.bollaert-nav__secondary a {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	padding: 0.45em 0.9em;
	border-radius: 999px;
	color: var(--wp--preset--color--brand-dark);
	font-size: var(--wp--preset--font-size--md);
	font-weight: 500;
	text-decoration: none;
	transition: color 0.15s ease, background-color 0.15s ease;
}

/* Hover: light blue highlight */
.bollaert-nav__secondary a:hover {
	background: var(--wp--preset--color--brand-tint);
	color: var(--wp--preset--color--brand);
}

/* Active tab: solid brand-blue highlight (clearly visible) */
.bollaert-nav__secondary a.is-active {
	background: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--white);
}

.bollaert-nav__secondary a.is-active .bollaert-nav__tab-icon {
	color: var(--wp--preset--color--white);
}

/* Hovering the active tab keeps it solid (don't fall back to the light hover) */
.bollaert-nav__secondary a.is-active:hover {
	background: var(--wp--preset--color--brand-dark);
	color: var(--wp--preset--color--white);
}

.bollaert-nav__tab-icon {
	flex-shrink: 0;
	color: var(--wp--preset--color--brand);
	transition: color 0.15s ease;
}

.bollaert-nav__secondary a:hover .bollaert-nav__tab-icon {
	color: var(--wp--preset--color--brand-dark);
}

/* --- Mega button --- */

.bollaert-nav__mega-parent {
	position: static; /* so the panel can span the full nav width */
}

.bollaert-nav__mega-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	padding: 0.62em 1em;
	border: none;
	border-radius: 10px;
	background: var(--wp--preset--color--brand-tint);
	color: var(--wp--preset--color--brand-dark);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 700;
	letter-spacing: 0.01em;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.bollaert-nav__mega-btn:hover,
.bollaert-nav__mega-parent:focus-within .bollaert-nav__mega-btn {
	background: var(--wp--preset--color--brand-tint);
	color: var(--wp--preset--color--brand);
	border-color: var(--wp--preset--color--brand);
}

.bollaert-nav__mega-icon {
	flex-shrink: 0;
	margin-right: 0.3em;
	color: var(--wp--preset--color--brand);
}

.bollaert-nav__chev {
	transition: transform 0.2s ease;
	transform: rotate(90deg);
}

.bollaert-nav__mega-parent:hover .bollaert-nav__chev,
.bollaert-nav__mega-parent:focus-within .bollaert-nav__chev {
	transform: rotate(-90deg);
}

/* --- Mega panel --- */

.bollaert-nav__mega {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	z-index: 2200;
	visibility: hidden;
	opacity: 0;
	transform: translateY(6px);
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 14px;
	box-shadow: var(--wp--preset--shadow--elevated);
	padding: var(--wp--preset--spacing--6);
	margin-top: var(--wp--preset--spacing--2);
	transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
}

.bollaert-nav__mega-parent:hover .bollaert-nav__mega,
.bollaert-nav__mega-parent:focus-within .bollaert-nav__mega {
	visibility: visible;
	opacity: 1;
	transform: translateY(0);
}

.bollaert-nav__mega-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--wp--preset--spacing--4);
}

.bollaert-nav__mega-item {
	padding: var(--wp--preset--spacing--3);
	border-radius: 10px;
	border: 1px solid transparent;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.bollaert-nav__mega-item:hover {
	border-color: var(--wp--preset--color--border);
	background: var(--wp--preset--color--brand-bg);
}

.bollaert-nav__mega-main {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--3);
	text-decoration: none;
	margin-bottom: var(--wp--preset--spacing--2);
}

.bollaert-nav__mega-thumb {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	flex-shrink: 0;
	border-radius: 10px;
	overflow: hidden;
	background: var(--wp--preset--color--brand-tint);
	color: var(--wp--preset--color--brand);
}

.bollaert-nav__mega-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.bollaert-nav__mega-name {
	font-weight: 600;
	color: var(--wp--preset--color--text);
	line-height: 1.25;
}

/* Collapsible subcategories (hidden until the arrow is clicked) */
.bollaert-nav__mega-sub-wrap {
	margin-top: var(--wp--preset--spacing--2);
}

.bollaert-nav__mega-sub-wrap > summary {
	list-style: none;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	padding: 2px 0;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	color: var(--wp--preset--color--brand);
}

.bollaert-nav__mega-sub-wrap > summary::-webkit-details-marker {
	display: none;
}

.bollaert-nav__sub-chev {
	flex-shrink: 0;
	transform: rotate(90deg);
	transition: transform 0.2s ease;
}

.bollaert-nav__mega-sub-wrap[open] > summary .bollaert-nav__sub-chev {
	transform: rotate(-90deg);
}

.bollaert-nav__mega-sub {
	margin: var(--wp--preset--spacing--2) 0 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.bollaert-nav__mega-sub a {
	display: block;
	padding: 4px 0;
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--muted);
	text-decoration: none;
	transition: color 0.15s ease;
}

.bollaert-nav__mega-sub a:hover {
	color: var(--wp--preset--color--brand);
}

/* --- Hide whole desktop nav on tablet/mobile --- */

@media (max-width: 1024.98px) {
	.bollaert-nav {
		display: none;
	}
}
/* PDP description layout fixes — general (any product). The description sits in a
   ~half-width column, so side-by-side block columns get cramped (text squeezed to
   one word per line). Stack them one per row, full width. */

.bollaert-pdp__desc-body .wp-block-columns {
	flex-direction: column !important;
	gap: var(--wp--preset--spacing--6) !important;
}
.bollaert-pdp__desc-body .wp-block-columns > .wp-block-column {
	flex: 1 1 100% !important;
	width: 100% !important;
	min-width: 0;
}

/* Feature cards (media-text): image on the left, text on the right.
   Stacks (image on top) on narrow screens. */
.bollaert-pdp__desc-body .wp-block-media-text {
	display: grid !important;
	grid-template-columns: minmax(150px, 34%) 1fr !important;
	gap: var(--wp--preset--spacing--5);
	align-items: center;
}
.bollaert-pdp__desc-body .wp-block-media-text .wp-block-media-text__content { padding: 0; }
@media (max-width: 640px) {
	.bollaert-pdp__desc-body .wp-block-media-text { grid-template-columns: 1fr !important; }
}

/* BI-tube / MONO-tube install instructions: clean stacked cards */
.bollaert-pdp__desc-body .bollaert-install-tubes > .wp-block-column {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 12px;
	padding: var(--wp--preset--spacing--5);
	background: var(--wp--preset--color--brand-bg);
}
.bollaert-pdp__desc-body .bollaert-install-tubes .wp-block-image img { max-width: 100%; height: auto; }
.bollaert-pdp__desc-body .bollaert-install-tubes a { font-weight: 600; }
/* Product card (shared component)
 *
 * Used by the shop / category / search grid, the PDP "Andere capaciteiten"
 * slider and the cart suggestions. The base card is a vertical slider card
 * (fixed basis); the shop grid and other contexts override flex/max-width.
 */

.bollaert-product-card {
	scroll-snap-align: start;
	flex: 0 0 280px;
	max-width: 85vw;
	display: flex;
	flex-direction: column;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 16px;
	overflow: hidden;
	box-shadow: var(--wp--preset--shadow--subtle);
	transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.bollaert-product-card:hover {
	border-color: #d7e3ec;
	box-shadow: var(--wp--preset--shadow--elevated, var(--wp--preset--shadow--medium));
	transform: translateY(-4px);
}

.bollaert-product-card__media {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 4 / 3;
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--brand);
	overflow: hidden;
}

.bollaert-product-card__media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: var(--wp--preset--spacing--3);
	transition: transform 0.3s ease;
}

.bollaert-product-card:hover .bollaert-product-card__media img {
	transform: scale(1.04);
}

.bollaert-product-card__badge {
	position: absolute;
	top: 0.6rem;
	left: 0.6rem;
	background: var(--wp--preset--color--brand-dark);
	color: var(--wp--preset--color--white);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	padding: 0.25em 0.6em;
	border-radius: 999px;
}

.bollaert-product-card__body {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	padding: var(--wp--preset--spacing--3) var(--wp--preset--spacing--4) var(--wp--preset--spacing--4);
	flex-grow: 1;
}

.bollaert-product-card__rating {
	display: inline-flex;
	align-items: center;
	gap: 0.3em;
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	color: var(--wp--preset--color--muted);
}

.bollaert-product-card__rating svg {
	color: #f5a623;
}

.bollaert-product-card__name {
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 500;
	line-height: 1.35;
	color: var(--wp--preset--color--text);
	text-decoration: none;
}

.bollaert-product-card__name:hover {
	color: var(--wp--preset--color--brand);
}

.bollaert-product-card__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--2);
	margin-top: auto;
	padding-top: var(--wp--preset--spacing--2);
}

.bollaert-product-card__price {
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 700;
	color: var(--wp--preset--color--text);
}

.bollaert-product-card__price del {
	margin-left: 0.35em;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 400;
	color: var(--wp--preset--color--muted);
}

/* WooCommerce price_html wraps the sale price in <ins> (underlined by
 * default) and may add a tax suffix — normalise to match the card. */
.bollaert-product-card__price ins {
	text-decoration: none;
	background: none;
}

.bollaert-product-card__price .woocommerce-Price-amount {
	white-space: nowrap;
}

.bollaert-product-card__price small {
	display: none;
}

.bollaert-product-card__add {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	flex-shrink: 0;
	border: none;
	border-radius: 10px;
	background: var(--wp--preset--color--success, #2e9b5b);
	color: var(--wp--preset--color--white);
	cursor: pointer;
	transition: filter 0.15s ease;
}

.bollaert-product-card__add:hover {
	filter: brightness(0.92);
}
/* Sale % badge (red) — general: shown automatically on ANY on-sale product.
   Product cards (grid + home sliders) + single product (gallery flag + price). */

.bollaert-product-card__media { position: relative; }

.bollaert-product-card__sale {
	position: absolute !important;
	top: 8px;
	left: 8px;
	z-index: 3;
	background: var(--wp--preset--color--danger) !important;
	color: #fff !important;
	text-decoration: none !important;
	font-weight: 700;
	font-size: .8rem;
	line-height: 1;
	padding: .35rem .5rem;
	border-radius: 8px;
	box-shadow: 0 2px 6px rgba(16, 24, 40, .18);
}

/* Gallery flag: already positioned by single-product.css — recolor to red + show the % */
.bollaert-pdp__flag {
	background: var(--wp--preset--color--danger) !important;
	color: #fff;
	font-weight: 700;
	font-size: .9rem;
	padding: .35rem .6rem;
	border-radius: 8px;
}

/* Discount badge beside the price in the buy box */
.bollaert-pdp__save {
	display: inline-block;
	background: var(--wp--preset--color--danger);
	color: #fff;
	font-weight: 700;
	font-size: .85rem;
	padding: .2rem .5rem;
	border-radius: 7px;
	margin-left: .4rem;
	vertical-align: middle;
}

/* Red discount badge ABOVE the price in the buy box — same style as the photo-corner badge */
.bollaert-pdp__promo {
	display: inline-block;
	background: var(--wp--preset--color--danger);
	color: #fff;
	font-weight: 700;
	font-size: .8rem;
	line-height: 1;
	padding: .3rem .55rem;
	border-radius: 8px;
	margin: 0 0 .45rem;
}
/* Search suggestions dropdown
 *
 * Rendered by assets/js/search.js under the header + drawer search fields.
 * Each row: product thumbnail + name + price, plus a "see all results" foot.
 */

.bollaert-suggest {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	right: 0;
	z-index: 3000;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 14px;
	box-shadow: var(--wp--preset--shadow--elevated);
	overflow: hidden auto;
	max-height: min(70vh, 460px);
	/* Brand-coloured scrollbar (Firefox) */
	scrollbar-width: thin;
	scrollbar-color: var(--wp--preset--color--brand) var(--wp--preset--color--brand-tint);
}

/* Brand-coloured scrollbar (WebKit/Blink) */
.bollaert-suggest::-webkit-scrollbar {
	width: 10px;
}

.bollaert-suggest::-webkit-scrollbar-track {
	background: var(--wp--preset--color--brand-tint);
	border-radius: 0 14px 14px 0;
}

.bollaert-suggest::-webkit-scrollbar-thumb {
	background: var(--wp--preset--color--brand);
	border-radius: 999px;
	border: 2px solid var(--wp--preset--color--brand-tint);
}

.bollaert-suggest::-webkit-scrollbar-thumb:hover {
	background: var(--wp--preset--color--brand-dark);
}

.bollaert-suggest[hidden] {
	display: none;
}

.bollaert-suggest__item {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--3);
	padding: var(--wp--preset--spacing--3) var(--wp--preset--spacing--4);
	text-decoration: none;
	color: var(--wp--preset--color--text);
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.bollaert-suggest__item:last-of-type {
	border-bottom: 0;
}

.bollaert-suggest__item:hover,
.bollaert-suggest__item.is-active {
	background: var(--wp--preset--color--brand-tint);
}

.bollaert-suggest__media {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	flex-shrink: 0;
	border-radius: 8px;
	overflow: hidden;
	background: var(--wp--preset--color--brand-bg);
}

.bollaert-suggest__media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.bollaert-suggest__info {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.bollaert-suggest__name {
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 500;
	line-height: 1.3;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.bollaert-suggest__price {
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 700;
	color: var(--wp--preset--color--text);
}

.bollaert-suggest__price del {
	margin-left: 0.35em;
	font-weight: 400;
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--muted);
}

.bollaert-suggest__price ins {
	text-decoration: none;
	background: none;
}

.bollaert-suggest__price small {
	display: none;
}

.bollaert-suggest__all {
	display: block;
	padding: var(--wp--preset--spacing--3) var(--wp--preset--spacing--4);
	text-align: center;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	color: var(--wp--preset--color--brand);
	text-decoration: none;
	background: var(--wp--preset--color--brand-bg);
	border-top: 1px solid var(--wp--preset--color--border);
}

.bollaert-suggest__all:hover,
.bollaert-suggest__all.is-active {
	background: var(--wp--preset--color--brand-tint);
}

.bollaert-suggest__empty,
.bollaert-suggest__loading {
	padding: var(--wp--preset--spacing--4);
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--muted);
}
/* Shipping-cost calculator (Octolize "Shipping Cost on Product Page")
 *
 * Surfaced on the custom PDP via woocommerce_after_add_to_cart_form (see
 * patterns/single-product.php) and restyled to the Bollaert blue/white theme.
 * Octolize ships the container with an inline display:none meant for the
 * standard WooCommerce product template and relies on form.cart for the product
 * id; the PDP fires the hook itself, injects the product id, and we force the
 * calculator visible + on-brand here. Everything is scoped to
 * .bollaert-pdp__shipping so the plugin's own markup is never touched. */

.bollaert-pdp__shipping {
	margin-top: 1.25rem;
}

/* The card. `display:block !important` overrides Octolize's inline display:none
 * (an inline rule with no !important, so a stylesheet !important wins). */
.bollaert-pdp__shipping .scpp-shipping-calculator-container {
	display: block !important;
	margin: 0 !important;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 14px;
	background: var(--wp--preset--color--white);
	padding: 1rem 1.15rem;
}

/* Toggle: "Calculer les frais d'expédition" — a clear brand link with a truck */
.bollaert-pdp__shipping .scpp-calculator-open-button {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	margin: 0 !important;
	padding: 0 !important;
	color: var(--wp--preset--color--brand-dark) !important;
	font-size: 1rem !important;
	font-weight: 700;
	line-height: 1.3 !important;
	text-decoration: none !important;
	cursor: pointer;
}
.bollaert-pdp__shipping .scpp-calculator-open-button:hover {
	color: var(--wp--preset--color--brand) !important;
}
.bollaert-pdp__shipping .scpp-calculator-open-button::before {
	content: "";
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	background: no-repeat center / contain
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23287a9e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 3h15v13H1zM16 8h4l3 3v5h-7'/%3E%3Ccircle cx='5.5' cy='18.5' r='2.5'/%3E%3Ccircle cx='18.5' cy='18.5' r='2.5'/%3E%3C/svg%3E");
}

/* The form (revealed when the toggle adds .active) */
.bollaert-pdp__shipping .scpp-calculator-container {
	margin-top: 0.85rem !important;
	max-width: none !important;
	gap: 0.6rem;
}
.bollaert-pdp__shipping .scpp-calculator-container > p {
	margin: 0 0 0.4rem !important;
	color: var(--wp--preset--color--muted) !important;
	font-style: normal !important;
	font-size: 0.9rem !important;
}

/* Postcode field + fr-fix commune <select> */
.bollaert-pdp__shipping input[name="calc_shipping_postcode"],
.bollaert-pdp__shipping .bollaert-city-choice {
	width: 100% !important;
	max-width: 320px !important;
	box-sizing: border-box !important;
	border: 1px solid var(--wp--preset--color--border) !important;
	border-radius: 10px !important;
	padding: 0.6em 0.85em !important;
	font-size: 0.95rem !important;
	line-height: 1.4 !important;
	color: var(--wp--preset--color--text) !important;
	background: var(--wp--preset--color--white) !important;
}
.bollaert-pdp__shipping input[name="calc_shipping_postcode"]:focus,
.bollaert-pdp__shipping .bollaert-city-choice:focus {
	border-color: var(--wp--preset--color--brand) !important;
	box-shadow: 0 0 0 3px var(--wp--preset--color--brand-tint) !important;
	outline: none !important;
}

/* fr-fix feedback line (✓ commune — département / errors) */
.bollaert-pdp__shipping .bollaert-postcode-feedback {
	font-size: 0.88rem;
	margin-top: 0.35rem;
}
.bollaert-pdp__shipping .bollaert-postcode-feedback.is-info {
	color: var(--wp--preset--color--brand-dark);
}
.bollaert-pdp__shipping .bollaert-postcode-feedback.is-error {
	color: var(--wp--preset--color--danger);
}
.bollaert-pdp__shipping .bollaert-city-choice-wrap label {
	font-size: 0.88rem;
	font-weight: 600;
	color: var(--wp--preset--color--text);
}

/* "Calculer" button — filled brand pill */
.bollaert-pdp__shipping .scpp-calculate-button {
	display: inline-block;
	margin: 0.5rem 0 0 !important;
	padding: 0.6em 1.5em !important;
	border-radius: 999px !important;
	background: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--white) !important;
	font-weight: 700;
	font-size: 0.95rem !important;
	line-height: 1.2 !important;
	text-decoration: none !important;
	transition: background-color 0.15s ease;
}
.bollaert-pdp__shipping .scpp-calculate-button:hover {
	background: var(--wp--preset--color--brand-dark);
}

/* Results panel: the computed shipping cost */
.bollaert-pdp__shipping .scpp-results-container {
	margin-top: 0.85rem;
	padding: 0.8rem 1rem !important;
	border-radius: 12px;
	background: var(--wp--preset--color--brand-tint) !important;
	border: 1px solid var(--wp--preset--color--border);
	font-size: 0.95rem !important;
	color: var(--wp--preset--color--text);
}
.bollaert-pdp__shipping .scpp-results-container p { margin: 0 !important; }
.bollaert-pdp__shipping .scpp-results-container ul {
	margin: 0.4rem 0 0 !important;
	padding-left: 1.1rem;
}
.bollaert-pdp__shipping .scpp-results-container li {
	color: var(--wp--preset--color--brand-dark) !important;
	font-weight: 700;
}
.bollaert-pdp__shipping .scpp-calculator-errors-container p {
	color: var(--wp--preset--color--danger) !important;
}

/* "Saisir une autre adresse" link under the result */
.bollaert-pdp__shipping .js--scpp-different-address-container {
	margin-top: 0.5rem;
}
.bollaert-pdp__shipping .js--scpp-different-address-container a {
	color: var(--wp--preset--color--brand-dark) !important;
	font-size: 0.88rem;
	font-weight: 600;
	text-decoration: underline !important;
}
/* Shop / Category archive
 *
 * Title + count, a sticky horizontal toolbar (Category + Price filter
 * dropdowns on the left, Sort on the right), then a centered full-width
 * product grid + pagination. Cards reuse .bollaert-product-card.
 */

.bollaert-shop {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--4);
	margin-block: var(--wp--preset--spacing--8);
}

/* --- Head --- */

.bollaert-shop__head {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--3);
}

.bollaert-shop__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--2xl);
	color: var(--wp--preset--color--text);
}

.bollaert-shop__count {
	margin: 0;
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--muted);
}

.bollaert-shop__intro {
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--muted);
	max-width: 90ch;
}

.bollaert-shop__intro p {
	margin: 0 0 0.5em;
}

/* --- Sticky toolbar (filters + sort) --- */

.bollaert-shop__toolbar {
	position: static;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--3);
	padding: var(--wp--preset--spacing--4) 0;
	background: transparent;
}

.bollaert-shop__toolbar-filters {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--2);
}

.bollaert-shop__clear {
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--muted);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.bollaert-shop__clear:hover {
	color: var(--wp--preset--color--brand);
}

/* --- Filter dropdowns --- */

.bollaert-dropdown {
	position: relative;
}

.bollaert-dropdown__btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	padding: 0.72em 1.25em;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 12px;
	background: var(--wp--preset--color--white);
	font: inherit;
	font-size: var(--wp--preset--font-size--md);
	font-weight: 600;
	color: var(--wp--preset--color--brand);
	cursor: pointer;
	box-shadow: var(--wp--preset--shadow--subtle);
	transition: border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

/* Leading icon on the filter / sort buttons (blue, like the label) */
.bollaert-toolbar__lead { flex-shrink: 0; }

.bollaert-dropdown__btn:hover,
.bollaert-dropdown__btn[aria-expanded="true"],
.bollaert-dropdown__btn.is-active {
	border-color: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--brand);
}

.bollaert-dropdown__chev {
	flex-shrink: 0;
	transform: rotate(90deg);
	transition: transform 0.2s ease;
}

.bollaert-dropdown__btn[aria-expanded="true"] .bollaert-dropdown__chev {
	transform: rotate(-90deg);
}

.bollaert-dropdown__panel {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	z-index: 1500;
	min-width: 260px;
	max-height: 60vh;
	overflow-y: auto;
	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--elevated);
}

.bollaert-dropdown__panel[hidden] {
	display: none;
}

/* Category list inside the dropdown */
.bollaert-shop__cats,
.bollaert-shop__subcats {
	list-style: none;
	margin: 0;
	padding: 0;
}

.bollaert-shop__cats a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--2);
	padding: 0.4em 0;
	color: var(--wp--preset--color--text);
	text-decoration: none;
	font-size: var(--wp--preset--font-size--sm);
}

.bollaert-shop__cats a span {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--xs);
}

.bollaert-shop__cats a:hover,
.bollaert-shop__cats a.is-active {
	color: var(--wp--preset--color--brand);
	font-weight: 600;
}

.bollaert-shop__subcats {
	margin: 2px 0 var(--wp--preset--spacing--2) var(--wp--preset--spacing--3);
	padding-left: var(--wp--preset--spacing--3);
	border-left: 2px solid var(--wp--preset--color--border);
}

/* Price form inside the dropdown */
.bollaert-shop__price-row {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--2);
	margin-bottom: var(--wp--preset--spacing--3);
}

.bollaert-shop__price input {
	width: 100%;
	min-width: 0;
	padding: 0.5em 0.6em;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 8px;
	font: inherit;
	font-size: var(--wp--preset--font-size--sm);
}

.bollaert-shop__price button {
	width: 100%;
	padding: 0.55em 1em;
	border: none;
	border-radius: 999px;
	background: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--white);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.bollaert-shop__price button:hover {
	background: var(--wp--preset--color--brand-dark);
}

/* --- Sort --- */

.bollaert-shop__sort {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--2);
}

.bollaert-shop__sort-label {
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--muted);
}

.bollaert-select {
	position: relative;
}

.bollaert-select__btn {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.6em;
	min-width: 210px;
	padding: 0.72em 1.25em;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 12px;
	background: var(--wp--preset--color--white);
	font: inherit;
	font-size: var(--wp--preset--font-size--md);
	color: var(--wp--preset--color--brand);
	cursor: pointer;
	box-shadow: var(--wp--preset--shadow--subtle);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.bollaert-select__btn:hover,
.bollaert-select__btn[aria-expanded="true"] {
	border-color: var(--wp--preset--color--brand);
}

.bollaert-select__chev {
	flex-shrink: 0;
	transform: rotate(90deg);
	transition: transform 0.2s ease;
}

.bollaert-select__btn[aria-expanded="true"] .bollaert-select__chev {
	transform: rotate(-90deg);
}

.bollaert-select__list {
	position: absolute;
	top: calc(100% + 6px);
	right: 0;
	left: 0;
	z-index: 1500;
	margin: 0;
	padding: 6px;
	list-style: none;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 12px;
	box-shadow: var(--wp--preset--shadow--elevated);
}

.bollaert-select__list[hidden] {
	display: none;
}

.bollaert-select__list li {
	padding: 0.5em 0.7em;
	border-radius: 8px;
	font-size: var(--wp--preset--font-size--sm);
	white-space: nowrap;
	cursor: pointer;
}

.bollaert-select__list li:hover {
	background: var(--wp--preset--color--brand-tint);
	color: var(--wp--preset--color--brand);
}

.bollaert-select__list li.is-selected {
	background: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--white);
	font-weight: 600;
}

/* --- Product grid (centered, 4-up) --- */

.bollaert-shop__grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	gap: var(--wp--preset--spacing--4);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* 4 per full row; cards GROW to fill the row — including the last row — so no
 * dead space is left at the end of a listing. */
.bollaert-shop__grid .bollaert-product-card {
	flex: 1 1 calc((100% - 4 * var(--wp--preset--spacing--4)) / 5);
	max-width: 340px;
	scroll-snap-align: none;
}

/* --- Pagination --- */

.bollaert-shop__pagination {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--2);
	justify-content: center;
	margin-top: var(--wp--preset--spacing--8);
}

.bollaert-shop__pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding: 0 0.6em;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 10px;
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--text);
	text-decoration: none;
	font-weight: 600;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.bollaert-shop__pagination a.page-numbers:hover {
	border-color: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--brand);
}

.bollaert-shop__pagination .page-numbers.current {
	background: var(--wp--preset--color--brand);
	border-color: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--white);
}

.bollaert-shop__pagination .page-numbers.dots {
	border-color: transparent;
	background: transparent;
}

.bollaert-shop__empty {
	padding: var(--wp--preset--spacing--12) 0;
	text-align: center;
	color: var(--wp--preset--color--muted);
}

/* --- Responsive: card basis per breakpoint --- */

@media (max-width: 1024.98px) {
	.bollaert-shop__grid .bollaert-product-card {
		flex-basis: calc((100% - 2 * var(--wp--preset--spacing--4)) / 3);
	}
}

@media (max-width: 700px) {
	/* Keep 2 products per row on phones (standard for shop grids) */
	.bollaert-shop__grid .bollaert-product-card {
		flex-basis: calc((100% - var(--wp--preset--spacing--4)) / 2);
		max-width: none;
	}

	.bollaert-shop__sort-label {
		display: none;
	}

	.bollaert-select__btn {
		min-width: 140px;
	}

	.bollaert-shop__toolbar {
		gap: var(--wp--preset--spacing--2);
	}

	/* Filter dropdown panels: anchor to the filter bar and let them span its
	   width instead of overflowing the right edge of the screen. The 260px
	   absolute panel (left: 0) ran off-screen when the "Prijs/Prix" button sat
	   mid-row — clipping the Max € field and the Apply button on phones. */
	.bollaert-shop__toolbar-filters {
		position: relative;
	}

	.bollaert-shop__toolbar-filters .bollaert-dropdown {
		position: static;
	}

	.bollaert-shop__toolbar-filters .bollaert-dropdown__panel {
		left: 0;
		right: 0;
		min-width: 0;
		width: auto;
		max-width: 100%;
	}
}
/* Single post — articles (editorial) & FAQ (Q&A)
 *
 * Two layouts share one reading column width and a set of common content
 * styles (links, lists, tables, quotes, figures). Articles use a serif
 * body with a lead paragraph and drop cap; FAQ uses a clean sans-serif
 * answer plus an accordion of related questions.
 */

:root {
	--bollaert-read: 864px;     /* reading column */
}

/* =========================================================================
 * ARTICLE (editorial / magazine)
 * ===================================================================== */

.bollaert-article {
	--serif: Georgia, "Iowan Old Style", "Times New Roman", Times, serif;
	max-width: var(--bollaert-read);
	margin: var(--wp--preset--spacing--8) auto var(--wp--preset--spacing--12);
}

/* --- Back link (shared by article + FAQ) --- */

.bollaert-article__back {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	color: var(--wp--preset--color--muted);
	text-decoration: none;
}

.bollaert-article__back:hover {
	color: var(--wp--preset--color--brand);
}

.bollaert-article__back-chev {
	display: inline-flex;
	transform: rotate(180deg);
}

/* --- Head --- */

.bollaert-article__cat {
	display: inline-block;
	margin: var(--wp--preset--spacing--6) 0 var(--wp--preset--spacing--3);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--brand);
	text-decoration: none;
}

.bollaert-article__cat:hover {
	color: var(--wp--preset--color--brand-dark);
}

.bollaert-article__title {
	margin: 0 0 var(--wp--preset--spacing--4);
	font-family: var(--serif);
	font-size: clamp(1.9rem, 3.6vw, 2.7rem);
	line-height: 1.14;
	letter-spacing: -0.015em;
	font-weight: 700;
	color: var(--wp--preset--color--text);
}

.bollaert-article__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5em;
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--muted);
}

.bollaert-article__byline {
	font-weight: 600;
	color: var(--wp--preset--color--brand-dark);
}

.bollaert-article__dot {
	opacity: 0.5;
}

/* --- Hero image --- */

.bollaert-article__hero {
	margin: var(--wp--preset--spacing--8) 0;
	border-radius: 16px;
	overflow: hidden;
}

.bollaert-article__hero img {
	display: block;
	width: 100%;
	height: auto;
}

/* --- Body (editorial typography) --- */

.bollaert-article__body {
	font-family: var(--serif);
	font-size: 1.125rem;
	line-height: 1.78;
	color: #232a31;
}

.bollaert-article__body > p {
	margin: 0 0 1.4em;
}

/* Lead: the opening paragraph reads a touch larger. */
.bollaert-article__body > p:first-of-type {
	font-size: 1.24rem;
	line-height: 1.7;
	color: #1f262d;
}

/* Drop cap on the first paragraph */
.bollaert-article__body > p:first-of-type::first-letter {
	float: left;
	font-size: 3.4em;
	line-height: 0.74;
	font-weight: 700;
	margin: 0.06em 0.1em 0 0;
	color: var(--wp--preset--color--brand-dark);
}

/* =========================================================================
 * SHARED CONTENT STYLES (article body, FAQ answer, accordion answer)
 * ===================================================================== */

.bollaert-article__body h2,
.bollaert-article__body h3,
.bollaert-article__body h4 {
	font-family: var(--serif);
	color: var(--wp--preset--color--text);
	line-height: 1.25;
	letter-spacing: -0.01em;
}

.bollaert-article__body h2 { margin: 1.7em 0 0.55em; font-size: 1.6rem; }
.bollaert-article__body h3 { margin: 1.45em 0 0.45em; font-size: 1.3rem; }

.bollaert-article__body a,
.bollaert-faq__a a,
.bollaert-faq-acc__a a {
	color: var(--wp--preset--color--brand-dark);
	text-decoration: underline;
	text-underline-offset: 2px;
	text-decoration-thickness: 1px;
}

.bollaert-article__body a:hover,
.bollaert-faq__a a:hover,
.bollaert-faq-acc__a a:hover {
	color: var(--wp--preset--color--brand);
}

.bollaert-article__body strong,
.bollaert-faq__a strong,
.bollaert-faq-acc__a strong {
	font-weight: 700;
	color: var(--wp--preset--color--text);
}

.bollaert-article__body ul,
.bollaert-article__body ol,
.bollaert-faq__a ul,
.bollaert-faq__a ol,
.bollaert-faq-acc__a ul,
.bollaert-faq-acc__a ol {
	margin: 0 0 1.3em;
	padding-left: 1.3em;
}

.bollaert-article__body li,
.bollaert-faq__a li,
.bollaert-faq-acc__a li {
	margin-bottom: 0.45em;
}

.bollaert-article__body blockquote {
	margin: 1.6em 0;
	padding: 0.2em 0 0.2em 1.2em;
	border-left: 3px solid var(--wp--preset--color--brand);
	font-style: italic;
	font-size: 1.28rem;
	line-height: 1.6;
	color: var(--wp--preset--color--brand-dark);
}

.bollaert-article__body img,
.bollaert-faq__a img,
.bollaert-faq-acc__a img {
	height: auto;
	max-width: 100%;
	border-radius: 12px;
}

.bollaert-article__body figure { margin: 1.6em 0; }

.bollaert-article__body figcaption {
	margin-top: 0.5em;
	font-family: var(--wp--preset--font-family, inherit);
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--muted);
	text-align: center;
}

/* Tables (key-spec tables from imported content) */
.bollaert-article__body table,
.bollaert-faq__a table,
.bollaert-faq-acc__a table {
	display: block;
	width: 100%;
	max-width: 100%;
	overflow-x: auto;
	border-collapse: collapse;
	margin: 1.6em 0;
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.5;
}

.bollaert-article__body th,
.bollaert-article__body td,
.bollaert-faq__a th,
.bollaert-faq__a td,
.bollaert-faq-acc__a th,
.bollaert-faq-acc__a td {
	border: 1px solid var(--wp--preset--color--border);
	padding: 0.6em 0.85em;
	text-align: left;
	vertical-align: top;
}

.bollaert-article__body thead th,
.bollaert-article__body tr > th,
.bollaert-faq__a thead th,
.bollaert-faq__a tr > th,
.bollaert-faq-acc__a thead th,
.bollaert-faq-acc__a tr > th {
	background: var(--wp--preset--color--brand-tint);
	color: var(--wp--preset--color--brand-dark);
	font-weight: 700;
}

.bollaert-article__body tbody tr:nth-child(even),
.bollaert-faq__a tbody tr:nth-child(even),
.bollaert-faq-acc__a tbody tr:nth-child(even) {
	background: #f7f9fb;
}

.bollaert-article__body table p,
.bollaert-faq__a table p,
.bollaert-faq-acc__a table p { margin: 0; }

/* --- Article foot + related --- */

.bollaert-article__foot {
	margin-top: var(--wp--preset--spacing--8);
	padding-top: var(--wp--preset--spacing--4);
	border-top: 1px solid var(--wp--preset--color--border);
}

.bollaert-article-related {
	max-width: 980px;
	margin: var(--wp--preset--spacing--12) auto 0;
	padding-top: var(--wp--preset--spacing--8);
	border-top: 1px solid var(--wp--preset--color--border);
}

.bollaert-article-related__title {
	margin: 0 0 var(--wp--preset--spacing--6);
	font-size: var(--wp--preset--font-size--xl);
	text-align: center;
}

.bollaert-article-related__grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--wp--preset--spacing--6);
}

.bollaert-article-related__grid .bollaert-post-card {
	flex: 0 1 calc((100% - 2 * var(--wp--preset--spacing--6)) / 3);
	max-width: 380px;
}

/* =========================================================================
 * FAQ (Q&A)
 * ===================================================================== */

.bollaert-faq {
	max-width: var(--bollaert-read);
	margin: var(--wp--preset--spacing--8) auto var(--wp--preset--spacing--10);
}

.bollaert-faq__head {
	margin-top: var(--wp--preset--spacing--6);
}

.bollaert-faq__eyebrow {
	display: inline-block;
	margin-bottom: var(--wp--preset--spacing--4);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--brand);
	text-decoration: none;
}

.bollaert-faq__eyebrow:hover { color: var(--wp--preset--color--brand-dark); }

.bollaert-faq__qrow {
	display: flex;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--4);
}

.bollaert-faq__badge {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	margin-top: 0.15em;
	border-radius: 50%;
	background: var(--wp--preset--color--brand-tint);
	color: var(--wp--preset--color--brand);
}

.bollaert-faq__q {
	margin: 0;
	font-size: clamp(1.55rem, 3vw, 2.2rem);
	line-height: 1.22;
	letter-spacing: -0.01em;
	font-weight: 700;
	color: var(--wp--preset--color--text);
}

/* Answer — clean sans-serif, set inside a soft panel */
.bollaert-faq__a {
	margin-top: var(--wp--preset--spacing--6);
	padding: var(--wp--preset--spacing--6) var(--wp--preset--spacing--7);
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 14px;
	font-size: 1.05rem;
	line-height: 1.72;
	color: #2a3138;
}

.bollaert-faq__a > p { margin: 0 0 1.1em; }
.bollaert-faq__a > p:last-child { margin-bottom: 0; }

.bollaert-faq__a h2 { margin: 1.4em 0 0.5em; font-size: 1.35rem; color: var(--wp--preset--color--text); }
.bollaert-faq__a h3 { margin: 1.2em 0 0.4em; font-size: 1.15rem; color: var(--wp--preset--color--text); }

/* CTA: didn't find your question? */
.bollaert-faq__cta {
	margin-top: var(--wp--preset--spacing--7);
	padding: var(--wp--preset--spacing--6) var(--wp--preset--spacing--7);
	border-radius: 14px;
	background: var(--wp--preset--color--brand-tint);
	text-align: center;
}

.bollaert-faq__cta-title {
	margin: 0 0 0.25em;
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 700;
	color: var(--wp--preset--color--brand-dark);
}

.bollaert-faq__cta-text {
	margin: 0 0 var(--wp--preset--spacing--4);
	color: var(--wp--preset--color--muted);
}

.bollaert-faq__cta-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--wp--preset--spacing--3);
}

.bollaert-faq__cta-btn {
	display: inline-flex;
	align-items: center;
	padding: 0.7em 1.5em;
	border-radius: 999px;
	background: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--white);
	font-weight: 700;
	text-decoration: none;
	transition: background-color 0.15s ease, transform 0.15s ease;
}

.bollaert-faq__cta-btn:hover { background: var(--wp--preset--color--brand-dark); transform: translateY(-1px); }

.bollaert-faq__cta-btn.is-ghost {
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--brand-dark);
	border: 1px solid var(--wp--preset--color--brand);
}

.bollaert-faq__cta-btn.is-ghost:hover { background: #fff; color: var(--wp--preset--color--brand); }

/* --- Other questions (accordion) --- */

.bollaert-faq-related {
	max-width: var(--bollaert-read);
	margin: var(--wp--preset--spacing--12) auto 0;
	padding-top: var(--wp--preset--spacing--8);
	border-top: 1px solid var(--wp--preset--color--border);
}

.bollaert-faq-related__title {
	margin: 0 0 var(--wp--preset--spacing--5);
	font-size: var(--wp--preset--font-size--xl);
}

.bollaert-faq-acc {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 14px;
	overflow: hidden;
	background: var(--wp--preset--color--white);
}

.bollaert-faq-acc__item + .bollaert-faq-acc__item {
	border-top: 1px solid var(--wp--preset--color--border);
}

.bollaert-faq-acc__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--4);
	padding: var(--wp--preset--spacing--5) var(--wp--preset--spacing--6);
	font-size: var(--wp--preset--font-size--md);
	font-weight: 600;
	color: var(--wp--preset--color--text);
	cursor: pointer;
	list-style: none;
	transition: color 0.15s ease, background-color 0.15s ease;
}

.bollaert-faq-acc__q::-webkit-details-marker { display: none; }
.bollaert-faq-acc__q:hover { color: var(--wp--preset--color--brand); background: #fafcfe; }

.bollaert-faq-acc__chev {
	flex: 0 0 auto;
	display: inline-flex;
	color: var(--wp--preset--color--brand);
	transform: rotate(90deg);
	transition: transform 0.2s ease;
}

.bollaert-faq-acc__item[open] .bollaert-faq-acc__chev { transform: rotate(-90deg); }
.bollaert-faq-acc__item[open] > .bollaert-faq-acc__q { color: var(--wp--preset--color--brand-dark); }

.bollaert-faq-acc__a {
	padding: 0 var(--wp--preset--spacing--6) var(--wp--preset--spacing--6);
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.7;
	color: #2a3138;
}

.bollaert-faq-acc__a > p:first-child { margin-top: 0; }

.bollaert-faq-acc__more {
	display: inline-flex;
	align-items: center;
	gap: 0.3em;
	margin-top: var(--wp--preset--spacing--2);
	font-weight: 600;
	color: var(--wp--preset--color--brand);
	text-decoration: none;
}

.bollaert-faq-acc__more:hover { color: var(--wp--preset--color--brand-dark); }

.bollaert-faq-related__all {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	margin-top: var(--wp--preset--spacing--5);
	font-weight: 600;
	color: var(--wp--preset--color--brand);
	text-decoration: none;
}

.bollaert-faq-related__all:hover { color: var(--wp--preset--color--brand-dark); }

/* =========================================================================
 * RESPONSIVE
 * ===================================================================== */

@media (max-width: 860px) {
	.bollaert-article-related__grid .bollaert-post-card {
		flex-basis: calc((100% - var(--wp--preset--spacing--6)) / 2);
	}
}

@media (max-width: 560px) {
	.bollaert-article-related__grid .bollaert-post-card {
		flex-basis: 100%;
		max-width: none;
	}

	.bollaert-article__body { font-size: 1.0625rem; }
	.bollaert-article__body > p:first-of-type { font-size: 1.15rem; }

	.bollaert-faq__badge { width: 38px; height: 38px; }
	.bollaert-faq__a { padding: var(--wp--preset--spacing--5); }
}
/* 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; }
}