/* ==========================================================================
   BENNFIETSEN — WOOCOMMERCE
   Shop-archief, productkaarten, single product, winkelwagen, checkout, account.
   Werkt zowel voor de native shop als voor Elementor WooCommerce-widgets.
   ========================================================================== */

/* --- Algemeen ------------------------------------------------------------ */
.woocommerce .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
	font-family: var(--benn-font-heading);
	font-weight: var(--benn-fw-bold);
	text-transform: uppercase;
	letter-spacing: .03em;
	border-radius: var(--benn-radius-sm);
	background: var(--benn-primary);
	color: #fff;
	padding: .85rem 1.5rem;
	border: 2px solid var(--benn-primary);
	transition: background var(--benn-transition), border-color var(--benn-transition), transform var(--benn-transition);
}
.woocommerce .button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce #respond input#submit:hover {
	background: var(--benn-primary-hover);
	border-color: var(--benn-primary-hover);
	color: #fff;
	transform: translateY(-2px);
}
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt { background: var(--benn-primary); border-color: var(--benn-primary); color: #fff; }
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover { background: var(--benn-primary-hover); border-color: var(--benn-primary-hover); color: #fff; }

/* ==========================================================================
   PRODUCT-ARCHIEF / SHOP
   ========================================================================== */

/* Resultaattelling + sorteren netjes op één lijn */
.woocommerce .woocommerce-result-count { color: var(--benn-text-muted); font-size: var(--benn-fs-sm); margin: 0; }
.woocommerce .woocommerce-ordering select {
	border: 1px solid var(--benn-border);
	border-radius: var(--benn-radius-sm);
	padding: .55rem .8rem;
	font-family: var(--benn-font-body);
	background: #fff;
}

/* Productgrid (homepage gebruikt .benn-products met 4 kolommen; archief hieronder) */
.woocommerce ul.products { gap: var(--benn-gap); margin: 0; }
.woocommerce ul.products li.product { margin: 0; }

/* --- Archief / categorie / shop / gerelateerd ----------------------------- */
/* Hello's theme.css capt 'body:not([class*=elementor-page-]) .site-main' op 1140px
   (specificiteit 0,2,1). Op archief-pagina's (geen elementor-page-class) wint die
   van een gewone .site-main-regel → hogere specificiteit + !important nodig. */
body.tax-product_cat main.site-main,
body.post-type-archive-product main.site-main,
body.woocommerce-shop main.site-main {
	max-width: var(--benn-container) !important;
	padding-inline: var(--benn-container-pad) !important;
	margin-inline: auto !important;
	width: 100% !important;
}

/* Echt CSS-grid i.p.v. WooCommerce float-kolommen, met ruime tussenruimte. */
.tax-product_cat ul.products,
.post-type-archive-product ul.products,
.woocommerce-shop ul.products,
.woocommerce .related ul.products,
.woocommerce .up-sells ul.products {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr) !important;
	gap: var(--benn-gap) !important;
	margin: 0 0 2.5rem !important;
	width: 100%;
}
/* WooCommerce-clearfix pseudo-elementen mogen geen grid-cel worden. */
.tax-product_cat ul.products::before, .tax-product_cat ul.products::after,
.post-type-archive-product ul.products::before, .post-type-archive-product ul.products::after,
.woocommerce-shop ul.products::before, .woocommerce-shop ul.products::after,
.woocommerce .related ul.products::before, .woocommerce .related ul.products::after,
.woocommerce .up-sells ul.products::before, .woocommerce .up-sells ul.products::after {
	content: none !important;
	display: none !important;
}
/* Float-breedtes van WooCommerce-core uitschakelen — grid bepaalt de breedte. */
.tax-product_cat ul.products li.product,
.post-type-archive-product ul.products li.product,
.woocommerce-shop ul.products li.product,
.woocommerce .related ul.products li.product,
.woocommerce .up-sells ul.products li.product {
	width: auto !important;
	float: none !important;
	margin: 0 !important;
}

@media (max-width: 1024px) {
	.tax-product_cat ul.products,
	.post-type-archive-product ul.products,
	.woocommerce-shop ul.products,
	.woocommerce .related ul.products,
	.woocommerce .up-sells ul.products { grid-template-columns: repeat(2, 1fr) !important; gap: var(--benn-gap) !important; }
}
@media (max-width: 560px) {
	.tax-product_cat ul.products,
	.post-type-archive-product ul.products,
	.woocommerce-shop ul.products,
	.woocommerce .related ul.products,
	.woocommerce .up-sells ul.products { grid-template-columns: 1fr !important; }
}

/* --- Productkaart --------------------------------------------------------- */
.woocommerce ul.products li.product {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--benn-bg);
	border: 1px solid var(--benn-border);
	border-radius: var(--benn-radius);
	padding: 16px 16px 18px;
	transition: box-shadow var(--benn-transition), transform var(--benn-transition), border-color var(--benn-transition);
}
.woocommerce ul.products li.product:hover {
	box-shadow: var(--benn-shadow-md);
	transform: translateY(-4px);
	border-color: transparent;
}
/* Productfoto: hele fiets op wit (studiofoto's), niet bijsnijden. */
.woocommerce ul.products li.product a img {
	border-radius: var(--benn-radius-sm);
	margin-bottom: 14px;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	background: #fff;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--benn-font-heading);
	font-size: 1.05rem;
	font-weight: var(--benn-fw-bold);
	color: var(--benn-text);
	padding: 0;
	margin: 0 0 .25rem;
	letter-spacing: 0;
}
/* Korte ondertitel via short description (één regel, zoals de referentie) */
.woocommerce ul.products li.product .benn-card-sub {
	color: var(--benn-text-muted);
	font-size: var(--benn-fs-sm);
	margin-bottom: 12px;
	padding-right: 64px; /* ruimte vrijhouden voor de ronde pijlknop rechtsonder */
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Prijs + actieprijs */
.woocommerce ul.products li.product .price { color: var(--benn-text); font-size: 1.2rem; font-weight: var(--benn-fw-bold); font-family: var(--benn-font-heading); margin: 0; }
.woocommerce ul.products li.product .price del { color: var(--benn-text-muted); font-weight: 400; font-size: .95rem; opacity: .8; margin-right: .35rem; }
.woocommerce ul.products li.product .price ins { color: var(--benn-primary); text-decoration: none; }
.woocommerce div.product p.price ins,
.woocommerce div.product span.price ins { color: var(--benn-primary); text-decoration: none; font-weight: var(--benn-fw-bold); }

/* Prijs links onderaan + ronde rode pijlknop rechtsonder (zoals de referentie) */
.woocommerce ul.products li.product > a.woocommerce-LoopProduct-link {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}
.woocommerce ul.products li.product .price { margin-top: auto; padding-right: 58px; }
.woocommerce ul.products li.product .benn-card-arrow {
	position: absolute;
	right: 16px;
	bottom: 16px;
	width: 46px;
	height: 46px;
	border-radius: var(--benn-radius-pill);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--benn-primary);
	color: #fff;
	transition: background var(--benn-transition), transform var(--benn-transition);
}
.woocommerce ul.products li.product .benn-card-arrow:hover {
	background: var(--benn-primary-hover);
	transform: translateY(-2px);
	color: #fff;
}
.woocommerce ul.products li.product .benn-card-arrow::after {
	content: "\2192";
	font-size: 20px;
	font-weight: var(--benn-fw-bold);
	line-height: 1;
}

/* Overlay-badges linksboven: ACTIE / POPULAIR (rood) · NIEUW (zwart) */
.woocommerce span.onsale,
.woocommerce ul.products li.product .benn-badge {
	position: absolute;
	top: 14px; left: 14px;
	right: auto !important; /* WooCommerce-core zet right:0 op .onsale → badge rekt anders breed uit */
	width: auto !important;
	z-index: 2;
	min-height: auto; min-width: auto;
	margin: 0; padding: .42em .72em;
	font-family: var(--benn-font-heading);
	font-weight: var(--benn-fw-bold);
	font-size: var(--benn-fs-xs);
	letter-spacing: .08em;
	text-transform: uppercase;
	line-height: 1;
	border-radius: var(--benn-radius-sm);
	background: var(--benn-primary);
	color: #fff;
}
.woocommerce ul.products li.product .benn-badge--nieuw { background: #15171f; }

/* ==========================================================================
   SINGLE PRODUCT
   ========================================================================== */
.single-product div.product { margin-top: 8px; }

/* Galerij */
.single-product div.product .woocommerce-product-gallery { border-radius: var(--benn-radius); }
.single-product div.product .woocommerce-product-gallery__image img { border-radius: var(--benn-radius); }
.single-product .flex-control-thumbs li img { border-radius: var(--benn-radius-sm); }

/* Titel & prijs in de samenvatting */
.single-product div.product .product_title {
	font-size: var(--benn-fs-h1);
	text-transform: uppercase;
	margin-bottom: .4rem;
}
.single-product div.product p.price,
.single-product div.product span.price {
	color: var(--benn-text);
	font-family: var(--benn-font-heading);
	font-weight: var(--benn-fw-bold);
	font-size: 1.85rem;
}
.single-product div.product p.price del { color: var(--benn-text-muted); font-size: 1.15rem; font-weight: 400; }

/* Voorraadstatus */
.single-product .stock.in-stock { color: var(--benn-success); font-weight: var(--benn-fw-semibold); }
.single-product .stock.out-of-stock { color: var(--benn-primary); font-weight: var(--benn-fw-semibold); }

/* Hoeveelheid + koopknop */
/* Aantal-stepper op de productpagina: − [aantal] +  (tap-vriendelijk, knoppen ver uit elkaar). */
.single-product div.product form.cart .quantity {
	display: inline-flex;
	align-items: stretch;
	height: 50px;
	border: 1px solid var(--benn-border-strong);
	border-radius: var(--benn-radius-sm);
	overflow: hidden;
	background: #fff;
}
.single-product div.product form.cart .quantity .benn-qty__btn {
	flex: 0 0 50px;
	width: 50px;
	border: 0;
	background: var(--benn-bg-alt, #f4f4f4);
	color: var(--benn-text);
	font-size: 1.45rem;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background .15s, color .15s;
}
.single-product div.product form.cart .quantity .benn-qty__btn:hover { background: var(--benn-primary); color: #fff; }
.single-product div.product form.cart .quantity .qty {
	width: 58px;
	height: auto;
	margin: 0;
	padding: 0;
	border: 0;
	border-left: 1px solid var(--benn-border);
	border-right: 1px solid var(--benn-border);
	border-radius: 0;
	text-align: center;
	font-family: var(--benn-font-heading);
	font-weight: var(--benn-fw-bold);
	font-size: 1.1rem;
	color: var(--benn-text);
	background: #fff;
	-moz-appearance: textfield;
	appearance: textfield;
}
.single-product div.product form.cart .quantity .qty::-webkit-outer-spin-button,
.single-product div.product form.cart .quantity .qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
/* WooCommerce's default-CSS is gedequeued → de globale .screen-reader-text-verberging
   mist. Zonder dit neemt het (verborgen bedoelde) quantity-<label> flex-ruimte in de
   stepper in en valt die uit elkaar. Globaal verbergen (a11y-correct). */
.screen-reader-text { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; border: 0 !important; }
/* Stepper maximaal forceren (simpele selector + !important; overschrijft WC/Elementor/plugin). */
body.single-product form.cart .quantity { display: inline-flex !important; align-items: stretch !important; align-self: stretch !important; flex: 0 0 auto !important; flex-wrap: nowrap !important; height: auto !important; width: auto !important; max-width: none !important; vertical-align: middle !important; border: 1px solid var(--benn-border-strong) !important; border-radius: var(--benn-radius-sm) !important; overflow: hidden !important; background: #fff !important; }
body.single-product form.cart .quantity > label, body.single-product form.cart .quantity .screen-reader-text { position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; padding: 0 !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; border: 0 !important; }
body.single-product form.cart .quantity .benn-qty__btn { flex: 0 0 42px !important; width: 42px !important; height: auto !important; align-self: stretch !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: var(--benn-bg-alt, #f4f4f4) !important; color: var(--benn-text) !important; font-size: 1.3rem !important; line-height: 1 !important; display: flex !important; align-items: center !important; justify-content: center !important; cursor: pointer !important; }
body.single-product form.cart .quantity .benn-qty__btn:hover { background: var(--benn-primary) !important; color: #fff !important; }
body.single-product form.cart .quantity input.qty { flex: 0 0 48px !important; width: 48px !important; min-width: 0 !important; max-width: 48px !important; height: auto !important; align-self: stretch !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-left: 1px solid var(--benn-border) !important; border-right: 1px solid var(--benn-border) !important; border-radius: 0 !important; text-align: center !important; font-family: var(--benn-font-heading) !important; font-weight: 700 !important; font-size: 1.15rem !important; color: var(--benn-text) !important; background: #fff !important; box-shadow: none !important; -moz-appearance: textfield !important; appearance: textfield !important; }
.woocommerce div.product form.cart .button { padding: .95rem 2rem; font-size: 1.05rem; }
.single-product form.cart .single_add_to_cart_button { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; min-height: 48px; padding: 0 1.25rem; font-size: 1rem; }

/* Rating-sterren in merkkleur */
.woocommerce .star-rating span::before,
.woocommerce p.stars a::before { color: var(--benn-star); }

/* Meta (SKU, categorieën) */
.single-product .product_meta { font-size: var(--benn-fs-sm); color: var(--benn-text-muted); border-top: 1px solid var(--benn-border); padding-top: 16px; margin-top: 20px; }
.single-product .product_meta a { color: var(--benn-text); }

/* --- Vertrouwen/garantie-blok (geprint door woocommerce-hooks.php) -------- */
.benn-trust {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0;
	margin: 26px 0 4px;
	padding: 16px 6px;
	background: var(--benn-bg-alt);
	border-radius: var(--benn-radius);
}
.benn-trust__item { display: flex; align-items: center; gap: 10px; padding: 2px 16px; border-left: 1px solid var(--benn-border); }
.benn-trust__item:first-child { border-left: 0; }
.benn-trust__icon { flex: none; display: inline-flex; color: var(--benn-primary); }
.benn-trust__icon svg { width: 22px; height: 22px; }
.benn-trust__body { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.benn-trust__title { font-family: var(--benn-font-heading); font-size: .84rem; color: var(--benn-text); }
.benn-trust__text { font-size: .76rem; color: var(--benn-text-muted); }
@media (max-width: 1180px) {
	.benn-trust { grid-template-columns: repeat(2, 1fr); gap: 16px 0; }
	.benn-trust__item:nth-child(odd) { border-left: 0; }
}

/* --- Tabs (omschrijving / eigenschappen / reviews) ------------------------ */
.woocommerce div.product .woocommerce-tabs ul.tabs { padding: 0; margin-bottom: 0; border-bottom: 1px solid var(--benn-border); }
.woocommerce div.product .woocommerce-tabs ul.tabs::before { border-color: var(--benn-border); }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
	background: transparent;
	border: none;
	border-radius: 0;
	margin: 0 6px -1px 0;
	padding: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	font-family: var(--benn-font-heading);
	font-weight: var(--benn-fw-bold);
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--benn-text-muted);
	padding: .9rem 1.1rem;
	border-bottom: 3px solid transparent;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--benn-text); border-bottom-color: var(--benn-primary); }
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none; }
.woocommerce div.product .woocommerce-Tabs-panel { padding-top: 28px; }
.woocommerce div.product .woocommerce-Tabs-panel h2 { font-size: var(--benn-fs-h3); }

/* Specificatie-tabel (Additional information) */
.woocommerce table.shop_attributes th { background: var(--benn-bg-alt); font-family: var(--benn-font-heading); color: var(--benn-text); }
.woocommerce table.shop_attributes td,
.woocommerce table.shop_attributes th { padding: 12px 14px; border-color: var(--benn-border); }

/* --- Gerelateerde producten ---------------------------------------------- */
.woocommerce .related.products > h2,
.woocommerce .upsells.products > h2 { font-size: var(--benn-fs-h2); text-transform: uppercase; margin-bottom: 1.5rem; }

/* --- Breadcrumb ----------------------------------------------------------- */
.benn-breadcrumb,
.woocommerce .woocommerce-breadcrumb { font-size: .95rem; color: var(--benn-text-muted); margin: 8px 0 18px; line-height: 1.5; }
.woocommerce .woocommerce-breadcrumb a { color: var(--benn-text-body); font-weight: var(--benn-fw-medium); transition: color var(--benn-transition); }
.woocommerce .woocommerce-breadcrumb a:hover { color: var(--benn-primary); }
/* Strak, subtiel scheidingsteken met gelijkmatige ruimte. */
.benn-breadcrumb__sep { color: var(--benn-border-strong); margin: 0 .5rem; font-size: .8em; position: relative; top: -1px; }
.woocommerce .woocommerce-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; }

/* ==========================================================================
   NOTICES / MELDINGEN
   ========================================================================== */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error { border-top-color: var(--benn-primary); border-radius: var(--benn-radius-sm); }
.woocommerce-message::before,
.woocommerce-info::before { color: var(--benn-primary); }

/* ==========================================================================
   WINKELWAGEN
   ========================================================================== */
.woocommerce table.shop_table { border-radius: var(--benn-radius); border-color: var(--benn-border); }
.woocommerce table.shop_table th { font-family: var(--benn-font-heading); text-transform: uppercase; letter-spacing: .03em; color: var(--benn-text); }
.woocommerce .cart_totals h2 { text-transform: uppercase; }
.woocommerce-cart .cart-collaterals .cart_totals,
.woocommerce-checkout #order_review { background: var(--benn-bg-alt); border-radius: var(--benn-radius); padding: 22px; }
.woocommerce a.remove { color: var(--benn-primary) !important; border-radius: var(--benn-radius-pill); }
.woocommerce a.remove:hover { background: var(--benn-primary) !important; color: #fff !important; }

/* ==========================================================================
   CHECKOUT
   ========================================================================== */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-checkout input[type="text"],
.woocommerce-checkout input[type="email"],
.woocommerce-checkout input[type="tel"],
.select2-container--default .select2-selection--single {
	border: 1px solid var(--benn-border-strong);
	border-radius: var(--benn-radius-sm);
	padding: .8rem .9rem;
	min-height: 48px; /* fijne tap-target op mobiel */
	font-family: var(--benn-font-body);
}
.woocommerce form .form-row label { font-weight: var(--benn-fw-semibold); color: var(--benn-text); }
.woocommerce #payment { background: transparent; }
.woocommerce #payment ul.payment_methods { background: #fff; border-radius: var(--benn-radius); border: 1px solid var(--benn-border); }
.woocommerce-checkout #place_order { width: 100%; padding: 1.05rem; font-size: 1.05rem; }

/* ==========================================================================
   ACCOUNTPAGINA
   ========================================================================== */
.woocommerce-account .woocommerce-MyAccount-navigation ul { border: 1px solid var(--benn-border); border-radius: var(--benn-radius); overflow: hidden; }
.woocommerce-account .woocommerce-MyAccount-navigation li { border-bottom: 1px solid var(--benn-border); }
.woocommerce-account .woocommerce-MyAccount-navigation li a { display: block; padding: .85rem 1.1rem; font-weight: var(--benn-fw-semibold); color: var(--benn-text); }
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a { background: var(--benn-primary); color: #fff; }

/* ==========================================================================
   ELEMENTOR WOOCOMMERCE-WIDGETS — kleine afstemmingen
   ========================================================================== */
.elementor-widget-woocommerce-product-price .price { font-family: var(--benn-font-heading); }
.elementor-widget-woocommerce-product-add-to-cart .button { width: auto; }

/* ==========================================================================
   SHOP-SIDEBAR & FILTERS  (WooCommerce core-widgets in .benn-shop-sidebar)
   ========================================================================== */
.benn-shop-sidebar .elementor-widget:not(:last-child) { margin-bottom: 8px; }
.benn-shop-sidebar .widget,
.benn-shop-sidebar .elementor-widget-container > div {
	background: var(--benn-bg);
	border: 1px solid var(--benn-border);
	border-radius: var(--benn-radius);
	padding: 18px 18px 20px;
}
.benn-shop-sidebar .widgettitle,
.benn-shop-sidebar .widget-title,
.benn-shop-sidebar h2,
.benn-shop-sidebar h5 {
	font-family: var(--benn-font-heading);
	font-weight: var(--benn-fw-bold);
	text-transform: uppercase;
	letter-spacing: .04em;
	font-size: 1rem;
	color: var(--benn-text);
	margin: 0 0 14px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--benn-border);
}

/* Lijstfilters (categorieën, layered nav) */
.benn-shop-sidebar ul.product-categories,
.benn-shop-sidebar ul.woocommerce-widget-layered-nav-list { list-style: none; margin: 0; padding: 0; }
.benn-shop-sidebar ul.product-categories li,
.benn-shop-sidebar ul.woocommerce-widget-layered-nav-list li { padding: 7px 0; border-bottom: 1px solid var(--benn-bg-alt); }
.benn-shop-sidebar ul.product-categories li:last-child,
.benn-shop-sidebar ul.woocommerce-widget-layered-nav-list li:last-child { border-bottom: none; }
.benn-shop-sidebar ul li a { color: var(--benn-text-body); }
.benn-shop-sidebar ul li a:hover { color: var(--benn-primary); }
.benn-shop-sidebar ul li .count { color: var(--benn-text-muted); font-size: var(--benn-fs-sm); }
.benn-shop-sidebar .woocommerce-widget-layered-nav-list__item--chosen a::before,
.benn-shop-sidebar li.chosen a::before { color: var(--benn-primary); }

/* Prijs-slider in merkkleur */
.benn-shop-sidebar .price_slider_wrapper .ui-slider { background: var(--benn-bg-muted); border-radius: var(--benn-radius-pill); height: 6px; }
.benn-shop-sidebar .ui-slider .ui-slider-range { background: var(--benn-primary); }
.benn-shop-sidebar .ui-slider .ui-slider-handle { background: var(--benn-primary); border: 2px solid #fff; box-shadow: var(--benn-shadow-sm); width: 16px; height: 16px; top: -6px; border-radius: 50%; }
.benn-shop-sidebar .price_slider_amount .button { font-size: .8rem; padding: .55rem 1rem; }
.benn-shop-sidebar .price_label { color: var(--benn-text-muted); font-size: var(--benn-fs-sm); }

/* Actieve filters als chips */
.benn-shop-sidebar .woocommerce-widget-layered-nav-list .woocommerce-widget-layered-nav-list__item,
.benn-shop-sidebar .wc-block-active-filters li { font-size: var(--benn-fs-sm); }

/* Rating-filter sterren */
.benn-shop-sidebar .wc-layered-nav-rating .star-rating span::before { color: var(--benn-star); }

/* Sidebar stapelt boven het grid op tablet/mobiel */
@media (max-width: 1024px) {
	.benn-shop-sidebar { width: 100% !important; flex-direction: row !important; flex-wrap: wrap; gap: 16px !important; }
	.benn-shop-sidebar > .elementor-widget { flex: 1 1 240px; margin-bottom: 0 !important; }
}
@media (max-width: 560px) {
	.benn-shop-sidebar { flex-direction: column !important; }
}

/* ==========================================================================
   SHOP-FILTERS — eigen filtersidebar + resultatenkolom (inc/shop-filters.php)
   ========================================================================== */
.benn-shop-layout { display: flex; align-items: flex-start; gap: 32px; margin-bottom: 64px; }
.benn-shop-filters { flex: 0 0 290px; max-width: 290px; }
.benn-shop-results { flex: 1 1 auto; min-width: 0; }
/* Smallere resultatenkolom → 3 kolommen i.p.v. 4. */
.benn-shop-results ul.products { grid-template-columns: repeat(3, 1fr) !important; }

.benn-filters { background: #fff; border: 1px solid var(--benn-border); border-radius: var(--benn-radius); padding: 2px 20px 20px; position: sticky; top: 24px; }
.benn-filters__head { display: flex; align-items: center; justify-content: space-between; padding: 16px 0 14px; }
.benn-filters__title { font-family: var(--benn-font-heading); font-weight: var(--benn-fw-bold); text-transform: uppercase; letter-spacing: .04em; color: var(--benn-text); font-size: 1rem; }
.benn-filters__clear { color: var(--benn-primary); font-size: var(--benn-fs-sm); font-weight: var(--benn-fw-semibold); }
.benn-filters__clear:hover { text-decoration: underline; }

.benn-filtergroup { border-top: 1px solid var(--benn-border); }
/* De Elementor-kit kleurt álle <button> rood; deze koppen moeten juist licht zijn. */
.benn-filtergroup__head { width: 100%; display: flex; align-items: center; justify-content: space-between; background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; cursor: pointer; padding: 15px 0 13px !important; font-family: var(--benn-font-heading); font-weight: var(--benn-fw-bold); text-transform: uppercase; letter-spacing: .04em; font-size: .82rem; color: var(--benn-text) !important; }
.benn-filtergroup__toggle { position: relative; width: 14px; height: 14px; flex: none; }
.benn-filtergroup__toggle::before, .benn-filtergroup__toggle::after { content: ""; position: absolute; background: var(--benn-text-muted); }
.benn-filtergroup__toggle::before { left: 0; top: 6px; width: 14px; height: 2px; }
.benn-filtergroup__toggle::after { left: 6px; top: 0; width: 2px; height: 14px; opacity: 0; }
.benn-filtergroup.is-collapsed .benn-filtergroup__toggle::after { opacity: 1; }
.benn-filtergroup.is-collapsed .benn-filtergroup__body { display: none; }
.benn-filtergroup__body { padding-bottom: 14px; }

.benn-filterlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.benn-filteritem label { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.benn-filteritem a { display: flex; align-items: center; gap: 10px; color: var(--benn-text-body); width: 100%; }
.benn-filteritem__label { flex: 1 1 auto; color: var(--benn-text-body); font-size: .92rem; }
.benn-filteritem.is-active .benn-filteritem__label { color: var(--benn-primary); font-weight: var(--benn-fw-semibold); }
.benn-filteritem__count { color: var(--benn-text-muted); font-size: var(--benn-fs-sm); }
.benn-filteritem input[type="checkbox"] { position: absolute; opacity: 0; width: 0; height: 0; }
.benn-filteritem__box { flex: none; width: 18px; height: 18px; border: 1.5px solid var(--benn-border-strong); border-radius: 5px; position: relative; transition: background var(--benn-transition), border-color var(--benn-transition); }
.benn-filteritem input:checked + .benn-filteritem__box { background: var(--benn-primary); border-color: var(--benn-primary); }
.benn-filteritem input:checked + .benn-filteritem__box::after { content: ""; position: absolute; left: 5px; top: 1px; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.benn-filteritem input:focus-visible + .benn-filteritem__box { outline: 2px solid var(--benn-primary); outline-offset: 2px; }

/* Prijs-slider (twee range-inputs over één track) */
.benn-price { position: relative; height: 24px; margin: 4px 0 14px; }
.benn-price__track { position: absolute; left: 0; right: 0; top: 10px; height: 4px; background: var(--benn-bg-muted, #eee); border-radius: 2px; }
.benn-price__fill { position: absolute; top: 0; bottom: 0; background: var(--benn-primary); border-radius: 2px; }
.benn-price__range { position: absolute; left: 0; right: 0; top: 3px; width: 100%; height: 18px; margin: 0; background: none; pointer-events: none; -webkit-appearance: none; appearance: none; }
.benn-price__range::-webkit-slider-thumb { -webkit-appearance: none; pointer-events: auto; width: 18px; height: 18px; border-radius: 50%; background: var(--benn-primary); border: 3px solid #fff; box-shadow: var(--benn-shadow-sm); cursor: pointer; }
.benn-price__range::-moz-range-thumb { pointer-events: auto; width: 18px; height: 18px; border-radius: 50%; background: var(--benn-primary); border: 3px solid #fff; box-shadow: var(--benn-shadow-sm); cursor: pointer; }
/* Native track onzichtbaar maken (anders zie je de standaard grijze balk eronder). */
.benn-price__range::-webkit-slider-runnable-track { -webkit-appearance: none; background: transparent; border: none; height: 18px; }
.benn-price__range::-moz-range-track { background: transparent; border: none; height: 18px; }
.benn-price__range:focus { outline: none; }
.benn-price__fields { display: flex; align-items: center; gap: 8px; }
.benn-price__field { flex: 1 1 0; display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--benn-border); border-radius: var(--benn-radius-sm); padding: 6px 8px; font-size: .85rem; color: var(--benn-text-muted); }
.benn-price__num { width: 100%; border: 0; background: none; font: inherit; color: var(--benn-text); min-width: 0; }
.benn-price__num::-webkit-outer-spin-button, .benn-price__num::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.benn-price__sep { color: var(--benn-text-muted); }

.benn-filters__submit { width: 100%; margin-top: 18px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: #fff !important; border: 1.5px solid var(--benn-primary) !important; color: var(--benn-primary) !important; border-radius: var(--benn-radius-sm); padding: .85rem 1rem; font-family: var(--benn-font-heading); font-weight: var(--benn-fw-bold); text-transform: uppercase; letter-spacing: .03em; font-size: .85rem; cursor: pointer; transition: background var(--benn-transition), color var(--benn-transition); }
.benn-filters__submit:hover { background: var(--benn-primary) !important; color: #fff !important; }
/* AJAX: grid dimmen tijdens laden + nette paginering. */
.benn-shop-grid { transition: opacity .2s ease; }
.benn-shop-grid.is-loading { opacity: .45; pointer-events: none; }
.benn-shop-grid .woocommerce-pagination { margin-top: 28px; }
.benn-shop-grid .woocommerce-pagination ul.page-numbers { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; border: 0; }
.benn-shop-grid .woocommerce-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 10px; border: 1px solid var(--benn-border); border-radius: var(--benn-radius-sm); color: var(--benn-text); font-weight: var(--benn-fw-semibold); background: #fff; }
.benn-shop-grid .woocommerce-pagination a.page-numbers:hover { border-color: var(--benn-primary); color: var(--benn-primary); }
.benn-shop-grid .woocommerce-pagination .page-numbers.current { background: var(--benn-primary); border-color: var(--benn-primary); color: #fff; }
.benn-no-products { padding: 30px 0; color: var(--benn-text-body); }

/* ==========================================================================
   ZIJ-WINKELWAGEN (mini-cart) — woocommerce/cart/mini-cart.php + inc/cart.php
   Rendert binnen Elementor's side-cart paneel (.elementor-menu-cart__main).
   ========================================================================== */

/* Paneel — het overlay-paneel scrollt mee zodat de héle inhoud (t/m
   betaaliconen + Afrekenen) bereikbaar is, ook als de cart langer is dan
   het scherm. */
.elementor-menu-cart__main { width: 435px !important; max-width: 97vw; position: fixed !important; top: 0 !important; bottom: 0 !important; height: auto !important; max-height: none !important; display: flex !important; flex-direction: column !important; overflow: hidden !important; }
/* Sluitkruisje: klein, strak en netjes rechtsboven. Elementor tekent het kruis met
   2 pseudo-element-balkjes (::before/::after, kleur = --cart-close-button-color); de
   knop was 42px → groot (rood) kruis. Nu compact + donkere dunne balkjes. */
.elementor-menu-cart__close-button {
	position: absolute !important;
	top: 16px !important;
	right: 16px !important;
	z-index: 6 !important;
	width: 24px !important;
	height: 24px !important;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	opacity: .55 !important;
	cursor: pointer !important;
	transition: opacity .15s !important;
}
.elementor-menu-cart__close-button::before,
.elementor-menu-cart__close-button::after {
	background: var(--benn-text, #1a1a1a) !important;
	height: 2px !important;
}
.elementor-menu-cart__close-button:hover { opacity: 1 !important; }
.elementor-menu-cart__close-button:hover::before,
.elementor-menu-cart__close-button:hover::after { background: var(--benn-primary, #e30613) !important; }
/* Eén scrollbar: zolang de cart open is staat de pagina-scroll vast (JS zet de
   class benn-cart-open op <html> op basis van aria-hidden van de container).
   Alleen het paneel scrollt dan — zijn scrollbalk zit aan de rechterrand,
   precies waar je pagina-scrollbalk zat. Bij sluiten haalt JS de class weg en
   komt je normale pagina-scrollbar terug. */
html.benn-cart-open, html.benn-cart-open body { overflow: hidden !important; }
/* De inhoud-laag is de scroller: flex:1 + min-height:0 + overflow-y:auto is de
   enige combinatie die in een flex-kolom écht scrollt (zonder min-height:0
   krimpt het kind niet en wordt de overflow afgekapt i.p.v. scrollbaar). */
.elementor-menu-cart__main .widget_shopping_cart_content { flex: 1 1 auto !important; min-height: 0 !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch; height: auto !important; display: block !important; padding: 0 !important; }

.benn-minicart { padding: 0 18px 22px; color: var(--benn-text); }

/* Kop */
.benn-minicart__head { padding: 2px 0 16px; border-bottom: 1px solid var(--benn-border); }
.benn-minicart__title { display: flex; align-items: center; gap: 10px; margin: 0; font-family: var(--benn-font-heading); font-size: 1.6rem; font-weight: 800; line-height: 1; }
.benn-minicart__badge { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 6px; background: var(--benn-primary); color: #fff; border-radius: 999px; font-size: .78rem; font-weight: 700; }
.benn-minicart__sub { margin: 7px 0 0; font-size: .85rem; color: var(--benn-text-muted); }

/* Leeg — compacte melding; de info eronder (balk/trust/totalen) blijft zichtbaar */
.benn-minicart__emptynote { display: flex; flex-direction: column; align-items: center; gap: 9px; padding: 26px 10px; text-align: center; color: var(--benn-text-muted); border-bottom: 1px solid var(--benn-border); }
.benn-minicart__emptynote svg { color: var(--benn-border-strong, #c9c9c9); }
.benn-minicart__emptynote p { margin: 0; font-size: .9rem; }

/* Items */
.benn-minicart__items { list-style: none; margin: 0; padding: 0; }
.benn-minicart__item { position: relative; display: grid; grid-template-columns: 72px 1fr; gap: 14px; margin: 0; padding: 18px 28px 18px 0; border-bottom: 1px solid var(--benn-border); }
.benn-minicart__thumb img { width: 72px; height: 72px; object-fit: cover; border-radius: var(--benn-radius-sm); background: var(--benn-bg-alt); }
.benn-minicart__info { display: flex; flex-direction: column; min-width: 0; }
.benn-minicart__name { font-family: var(--benn-font-heading); font-weight: 700; font-size: .98rem; line-height: 1.2; color: var(--benn-secondary, #1a1a1a) !important; text-decoration: none; }
.benn-minicart__name:hover { color: var(--benn-primary); }
.benn-minicart__meta { margin-top: 3px; font-size: .8rem; color: var(--benn-text-muted); }
.benn-minicart__meta dl, .benn-minicart__meta p { margin: 0; }
.benn-minicart__price { margin: 2px 0 8px; color: var(--benn-primary); font-weight: 700; font-size: 1rem; }
.benn-minicart__item { align-items: start; }
.benn-minicart__info { gap: 1px; }
.benn-minicart__remove { position: absolute; top: 18px; right: 0; display: inline-flex; padding: 3px; color: var(--benn-text-muted); border-radius: 6px; transition: color .15s, background .15s; }
.benn-minicart__remove:hover { color: var(--benn-primary); background: var(--benn-bg-alt); }
.benn-minicart__item.is-removing { opacity: .5; }

/* Aantal-stepper */
.benn-qty { display: inline-flex; align-items: stretch; height: 32px; border: 1px solid var(--benn-border); border-radius: var(--benn-radius-sm); overflow: hidden; }
.benn-qty.is-loading { opacity: .55; }
.benn-qty__btn { display: flex; align-items: center; justify-content: center; width: 30px; border: 0 !important; background: var(--benn-bg-alt) !important; color: var(--benn-text-body) !important; font-size: 1rem; line-height: 1; cursor: pointer; transition: background .15s, color .15s; }
.benn-qty__btn:hover:not(:disabled) { background: var(--benn-primary) !important; color: #fff !important; }
.benn-qty__btn:disabled { background: var(--benn-bg-alt) !important; color: var(--benn-border-strong, #cfcfcf) !important; cursor: default; }
.benn-qty__val { display: flex; align-items: center; justify-content: center; min-width: 34px; padding: 0 4px; background: #fff; border-left: 1px solid var(--benn-border); border-right: 1px solid var(--benn-border); font-weight: 600; font-size: .9rem; }

/* Besparing */
.benn-cart-savings { display: flex; align-items: center; gap: 8px; margin: 14px 0; padding: 11px 12px; background: #ffeaea; color: var(--benn-primary); font-size: .85rem; border-radius: var(--benn-radius-sm); }
.benn-cart-savings svg { flex: none; }

/* Gratis-verzending balk */
.benn-cart-ship { margin: 16px 0; }
.benn-cart-ship__top { display: flex; align-items: center; gap: 8px; color: var(--benn-text); }
.benn-cart-ship__top svg { flex: none; color: var(--benn-primary); }
.benn-cart-ship__top strong { font-size: .95rem; font-weight: 700; }
.benn-cart-ship__msg { margin: 4px 0 10px 28px; font-size: .82rem; color: var(--benn-text-muted); }
.benn-cart-ship__track { display: flex; align-items: center; gap: 10px; }
.benn-cart-ship__bar { position: relative; flex: 1; height: 7px; background: var(--benn-bg-muted, #ececec); border-radius: 4px; overflow: hidden; }
.benn-cart-ship__bar span { position: absolute; inset: 0 auto 0 0; background: var(--benn-primary); border-radius: 4px; transition: width .4s ease; }
.benn-cart-ship__goal { font-size: .78rem; color: var(--benn-text-muted); white-space: nowrap; }
.benn-cart-ship.is-done .benn-cart-ship__top svg { color: var(--benn-success, #1faa59); }
.benn-cart-ship.is-done .benn-cart-ship__bar span { background: var(--benn-success, #1faa59); }

/* Trust */
.benn-cart-trust { display: grid; grid-template-columns: repeat(3, 1fr); margin: 16px 0; padding: 16px 4px; background: var(--benn-bg-alt); border-radius: var(--benn-radius); text-align: center; }
.benn-cart-trust__item { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 0 6px; border-left: 1px solid var(--benn-border); }
.benn-cart-trust__item:first-child { border-left: 0; }
.benn-cart-trust__ic { display: inline-flex; color: var(--benn-text-muted); opacity: .85; }
.benn-cart-trust__item strong { font-family: var(--benn-font-heading); font-size: .74rem; line-height: 1.2; color: var(--benn-text-body); }
.benn-cart-trust__item span { font-size: .68rem; line-height: 1.25; color: var(--benn-text-muted); }

/* Upsell "Maak je rit compleet" */
.benn-cart-upsell { margin: 14px 0; padding: 10px 12px; background: var(--benn-bg-alt); border-radius: var(--benn-radius); }
.benn-cart-upsell__head { margin: 0 0 8px; font-family: var(--benn-font-heading); font-size: .82rem; font-weight: 700; color: var(--benn-text); }
.benn-cart-upsell__product { display: grid; grid-template-columns: 64px 1fr auto; gap: 12px; align-items: center; }
.benn-cart-upsell__img img { width: 64px; height: 64px; object-fit: cover; border-radius: var(--benn-radius-sm); background: #fff; }
.benn-cart-upsell__info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.benn-cart-upsell__name { font-weight: 700; font-size: .85rem; line-height: 1.2; color: var(--benn-secondary, #1a1a1a); }
.benn-cart-upsell__price { font-size: .85rem; }
.benn-cart-upsell__price del { margin-left: 5px; color: var(--benn-text-muted); font-weight: 400; font-size: .78rem; }
.benn-cart-upsell__price ins { text-decoration: none; color: var(--benn-primary); font-weight: 700; }
.benn-cart-upsell__add { padding: 7px 13px; background: #fff; border: 1px solid var(--benn-border-strong, #cfcfcf); border-radius: var(--benn-radius-sm); font-weight: 600; font-size: .76rem; white-space: nowrap; cursor: pointer; transition: border-color .15s, color .15s; }
.benn-cart-upsell__add:hover { border-color: var(--benn-primary); color: var(--benn-primary); }
.benn-cart-upsell__add.is-loading { opacity: .55; cursor: default; }

/* Totalen */
.benn-minicart__totals { padding: 18px 0 2px; }
.benn-minicart__totrow { display: flex; justify-content: space-between; align-items: baseline; padding: 6px 0; font-size: .95rem; }
.benn-minicart__totrow span:first-child { font-weight: 600; }
.benn-minicart__totval { font-weight: 700; }
.benn-minicart__totrow--muted { color: var(--benn-text-muted); padding-bottom: 12px; margin-bottom: 4px; border-bottom: 1px solid var(--benn-border); }
.benn-minicart__totrow--muted > span:first-child { display: inline-flex; align-items: center; gap: 5px; font-weight: 400; }
.benn-minicart__info { display: inline-flex; align-items: center; color: var(--benn-text-muted); font-size: .9rem; line-height: 1; cursor: default; }
.benn-minicart__free { color: var(--benn-success, #1faa59); font-weight: 700; }
.benn-minicart__totrow--total span:first-child { font-family: var(--benn-font-heading); font-weight: 700; font-size: 1.02rem; }
.benn-minicart__totrow--total .benn-minicart__totval { color: var(--benn-primary); font-family: var(--benn-font-heading); font-weight: 800; font-size: 1.3rem; }
.benn-minicart__taxnote { display: flex; align-items: center; gap: 6px; margin: 7px 0 0; font-size: .8rem; color: var(--benn-text-muted); }
.benn-minicart__taxnote svg { flex: none; color: var(--benn-success, #1faa59); }

/* Knoppen */
.benn-minicart__buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 16px 0 2px; }
.benn-minicart__btn { display: flex; align-items: center; justify-content: center; height: 50px; padding: 0 8px; border-radius: var(--benn-radius-sm); font-family: var(--benn-font-heading); font-weight: 700; font-size: .8rem; letter-spacing: .04em; text-transform: uppercase; text-align: center; text-decoration: none; transition: background .15s, color .15s, border-color .15s; }
.benn-minicart__btn--cart { background: #fff; color: var(--benn-primary) !important; border: 2px solid var(--benn-primary); }
.benn-minicart__btn--cart:hover { background: var(--benn-primary); color: #fff !important; }
.benn-minicart__btn--checkout { background: var(--benn-primary); color: #fff !important; border: 2px solid var(--benn-primary); }
.benn-minicart__btn--checkout:hover { background: var(--benn-secondary); border-color: var(--benn-secondary); color: #fff !important; }

/* Betaaliconen */
.benn-cart-pay { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--benn-border); text-align: center; }
.benn-cart-pay__label { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 11px; font-size: .8rem; color: var(--benn-text-muted); }
.benn-cart-pay__icons { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; }
.benn-pay { display: inline-flex; align-items: center; justify-content: center; height: 32px; min-width: 48px; padding: 0 8px; background: #fff; border: 1px solid var(--benn-border); border-radius: 7px; box-shadow: 0 1px 2px rgba(0, 0, 0, .05); }
.benn-pay svg { display: block; }

/* Mini-cart op mobiel — paneel vol breed, compactere maten */
@media (max-width: 480px) {
	.elementor-menu-cart__main { width: 100vw !important; max-width: 100vw !important; }
	.benn-minicart { padding: 0 14px 18px; }
	.benn-minicart__head { padding: 2px 0 14px; }
	.benn-minicart__title { font-size: 1.4rem; }
	.benn-minicart__sub { font-size: .82rem; }
	.benn-minicart__item { grid-template-columns: 58px 1fr; gap: 12px; padding: 15px 26px 15px 0; }
	.benn-minicart__thumb img { width: 58px; height: 58px; }
	.benn-minicart__name { font-size: .92rem; }
	.benn-cart-savings, .benn-cart-ship, .benn-cart-trust, .benn-cart-upsell { margin: 12px 0; }
	.benn-cart-trust { padding: 12px 2px; }
	.benn-cart-trust__item { padding: 0 4px; }
	.benn-cart-trust__item strong { font-size: .66rem; }
	.benn-cart-trust__item span { font-size: .6rem; }
	.benn-cart-upsell__product { grid-template-columns: 54px 1fr auto; gap: 10px; }
	.benn-cart-upsell__img img { width: 54px; height: 54px; }
	.benn-cart-upsell__add { padding: 7px 11px; font-size: .74rem; }
	.benn-minicart__totals { padding: 14px 0 2px; }
	.benn-minicart__totrow--total .benn-minicart__totval { font-size: 1.2rem; }
	.benn-minicart__buttons { gap: 8px; }
	.benn-minicart__btn { height: 46px; font-size: .76rem; }
	.benn-cart-pay__icons { gap: 6px; }
	.benn-pay { min-width: 42px; height: 30px; padding: 0 6px; }
}

/* ==========================================================================
   WINKELWAGENPAGINA (klassiek) — woocommerce/cart/*.php
   ========================================================================== */
body.woocommerce-cart main.site-main { max-width: var(--benn-container) !important; margin-inline: auto; padding: 30px var(--benn-container-pad, 20px) 80px; }
body.woocommerce-cart .page-header { display: none; }
body.woocommerce-cart .page-content { max-width: 100%; margin: 0; padding: 0; }
.benn-cart { max-width: var(--benn-container); margin: 0 auto; }
.benn-cart-breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; font-size: .9rem; color: var(--benn-text-muted); }
.benn-cart-breadcrumb a { color: var(--benn-text-muted); text-decoration: none; }
.benn-cart-breadcrumb a:hover { color: var(--benn-primary); }
.benn-cart-breadcrumb__sep { color: var(--benn-border-strong, #c9c9c9); }
.benn-cart-breadcrumb__current { color: var(--benn-text); font-weight: 600; }
.benn-cart-title { margin: 0 0 26px; font-family: var(--benn-font-heading); font-size: clamp(1.9rem, 3.4vw, 2.6rem); font-weight: 800; line-height: 1.1; }
.benn-cart-emptybox { display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: 520px; margin: 30px auto 0; padding: 56px 30px; text-align: center; background: #fff; border: 1px solid var(--benn-border); border-radius: var(--benn-radius); }
.benn-cart-emptybox svg { color: var(--benn-border-strong, #cfcfcf); }
.benn-cart-emptybox h2 { margin: 0; font-family: var(--benn-font-heading); font-size: 1.5rem; font-weight: 800; text-transform: uppercase; }
.benn-cart-emptybox p { margin: 0; color: var(--benn-text-muted); }
.benn-cart-emptybox__btn { margin-top: 6px; padding: 14px 28px; background: var(--benn-primary); color: #fff !important; border-radius: var(--benn-radius-sm); font-family: var(--benn-font-heading); font-weight: 700; font-size: .85rem; text-transform: uppercase; text-decoration: none; }
.benn-cart-emptybox__btn:hover { background: var(--benn-primary-hover, #b80510); }
.benn-cart__grid { display: grid; grid-template-columns: minmax(0, 1fr) 384px; gap: 30px; align-items: start; }
.benn-cart__left { min-width: 0; }
.benn-cart__right { position: sticky; top: 100px; }

/* Producttabel */
.benn-cart-table { padding: 6px 26px 0; background: #fff; border: 1px solid var(--benn-border); border-radius: var(--benn-radius); }
.benn-cart-table__head { display: grid; grid-template-columns: 96px minmax(0, 1fr) 110px 140px 110px; column-gap: 18px; padding: 16px 0 12px; border-bottom: 1px solid var(--benn-border); }
.benn-cart-table__col { font-family: var(--benn-font-heading); font-size: .72rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--benn-text-muted); }
.benn-cart-table__col--product { grid-column: 1 / 3; }
.benn-cart-table__col--price { grid-column: 3; }
.benn-cart-table__col--qty { grid-column: 4; }
.benn-cart-table__col--total { grid-column: 5; }

.benn-cart-row { display: grid; grid-template-columns: 96px minmax(0, 1fr) 110px 140px 110px; column-gap: 18px; align-items: center; padding: 22px 0; border-bottom: 1px solid var(--benn-border); }
.benn-cart-row__media { align-self: start; }
.benn-cart-row__media img { width: 96px; height: 96px; object-fit: cover; border-radius: var(--benn-radius-sm); background: var(--benn-bg-alt); }
.benn-cart-row__info { align-self: start; min-width: 0; }
/* Productnaam — donker (bijna zwart), niet rood. De Elementor-kit kleurt links
   rood (.elementor-kit-x a); daarom hogere specificiteit + !important. */
.benn-cart .benn-cart-row__info .benn-cart-row__name { display: inline-block; font-family: var(--benn-font-heading); font-weight: 700; font-size: 1.05rem; line-height: 1.25; color: var(--benn-secondary, #1a1a1a) !important; text-decoration: none; }
.benn-cart .benn-cart-row__info .benn-cart-row__name:hover { color: var(--benn-primary) !important; }
.benn-cart-row__desc { margin: 6px 0 12px; font-size: .85rem; line-height: 1.5; color: var(--benn-text-muted); }
.benn-cart-row__specs { display: flex; flex-direction: column; gap: 7px; margin: 10px 0 0; padding: 0; list-style: none; }
.benn-cart-row__specs li { display: flex; align-items: center; gap: 9px; font-size: .85rem; color: var(--benn-text-body); }
.benn-cart-row__specs svg { flex: none; color: var(--benn-primary); }
.benn-cart-row__price { font-weight: 600; color: var(--benn-text); }
.benn-cart-row__total { font-family: var(--benn-font-heading); font-weight: 700; font-size: 1.05rem; color: var(--benn-text); }
.benn-cart-row__remove { grid-column: 4 / 6; justify-self: center; margin-top: 12px; }
/* "Verwijderen" — gedempt grijs, klein, normale dikte. WooCommerce-core stylet
   a.remove als grote rode vette ×; die override we hier weg. */
.benn-cart .benn-cart-row__remove a.benn-cart-row__removelink,
.benn-cart .benn-cart-row__remove a.benn-cart-row__removelink.remove { display: inline-flex !important; align-items: center; gap: 6px; width: auto !important; height: auto !important; padding: 0 !important; font-size: .85rem !important; font-weight: 400 !important; line-height: 1.4 !important; text-align: left !important; border-radius: 0 !important; color: var(--benn-text-muted) !important; background: transparent !important; text-decoration: none; }
.benn-cart .benn-cart-row__remove a.benn-cart-row__removelink:hover { color: var(--benn-primary) !important; background: transparent !important; }
.benn-cart .benn-cart-row__remove a.benn-cart-row__removelink::before,
.benn-cart .benn-cart-row__remove a.benn-cart-row__removelink::after { content: none !important; }

/* Aantal-stepper (cart-pagina) — compact, lichtgrijs, rood bij hover */
.benn-cart-qty.benn-qty { height: 40px; }
.benn-cart-qty .quantity { display: flex; align-items: stretch; margin: 0; }
.benn-cart-qty .quantity label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.benn-cart-qty .quantity input.qty { width: 46px; padding: 0; border: 0; border-left: 1px solid var(--benn-border); border-right: 1px solid var(--benn-border); border-radius: 0; text-align: center; font-weight: 600; font-size: .9rem; background: #fff; -moz-appearance: textfield; appearance: textfield; }
.benn-cart-qty .quantity input.qty::-webkit-outer-spin-button, .benn-cart-qty .quantity input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Trust-rij binnen de tabelkaart */
.benn-cart-table .benn-cart-trust { margin: 0; padding: 20px 0; background: transparent; border-radius: 0; }

/* Bestelsamenvatting */
.benn-summary { padding: 22px; background: #fff; border: 1px solid var(--benn-border); border-radius: var(--benn-radius); }
/* Titel — compact en sentence-case. De Elementor-kit blaast <h2> op, dus
   hogere specificiteit + !important om die te verslaan. */
.benn-summary .benn-summary__title { margin: 0 0 18px; font-family: var(--benn-font-heading); font-size: 1.3rem !important; font-weight: 800; line-height: 1.2 !important; text-transform: none !important; letter-spacing: 0 !important; color: var(--benn-secondary, #1a1a1a); }

/* Gratis-verzending balk — compacte summary-variant (los van de mini-cart) */
.benn-summary__ship { margin: 0 0 18px; }
.benn-summary__ship-msg { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: .85rem; color: var(--benn-text-body); }
.benn-summary__ship-msg svg { flex: none; color: var(--benn-primary); }
.benn-summary__ship-msg strong { font-weight: 700; }
.benn-summary__ship-bar { position: relative; height: 6px; background: var(--benn-bg-muted, #ececec); border-radius: 4px; overflow: hidden; }
.benn-summary__ship-bar span { position: absolute; inset: 0 auto 0 0; background: var(--benn-primary); border-radius: 4px; transition: width .4s ease; }
.benn-summary__ship-scale { display: flex; justify-content: space-between; margin-top: 6px; font-size: .72rem; color: var(--benn-text-muted); }
.benn-summary__ship.is-done .benn-summary__ship-msg svg { color: var(--benn-success, #1faa59); }
.benn-summary__ship.is-done .benn-summary__ship-bar span { background: var(--benn-success, #1faa59); }

.benn-summary__rows { display: flex; flex-direction: column; gap: 13px; padding: 16px 0; border-top: 1px solid var(--benn-border); }
.benn-summary__row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; font-size: .9rem; color: var(--benn-text-body); }
.benn-summary__ship-label small { display: block; margin-top: 2px; font-size: .76rem; color: var(--benn-text-muted); }
.benn-summary__val { font-weight: 600; color: var(--benn-text); text-align: right; }
.benn-summary__row--coupon .benn-summary__val { color: var(--benn-success, #1faa59); }
.benn-summary .benn-minicart__free { color: var(--benn-success, #1faa59) !important; font-weight: 700; }

/* Kortingscode */
.benn-summary__coupon { padding: 14px 0; border-top: 1px solid var(--benn-border); }
.benn-summary__coupon-head { display: flex; align-items: center; justify-content: space-between; font-weight: 600; font-size: .9rem; color: var(--benn-text); cursor: pointer; list-style: none; }
.benn-summary__coupon-head::-webkit-details-marker { display: none; }
.benn-summary__chev { color: var(--benn-text-muted); transition: transform .2s; }
.benn-summary__coupon[open] .benn-summary__chev { transform: rotate(180deg); }
.benn-summary__coupon-form { display: flex; gap: 8px; margin-top: 12px; }
.benn-summary__coupon-input { flex: 1; min-width: 0; padding: 11px 12px; border: 1px solid var(--benn-border-strong, #d8d8d8); border-radius: var(--benn-radius-sm); font-size: .9rem; }
.benn-summary__coupon-btn { flex: none; padding: 0 18px; background: var(--benn-bg-alt); border: 1px solid var(--benn-border-strong, #d8d8d8); border-radius: var(--benn-radius-sm); font-weight: 700; font-size: .85rem; cursor: pointer; transition: all .15s; }
.benn-summary__coupon-btn:hover { background: var(--benn-secondary); border-color: var(--benn-secondary); color: #fff; }

/* Totaal */
.benn-summary__total { padding: 16px 0; border-top: 1px solid var(--benn-border); }
.benn-summary__total-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.benn-summary__total-row > span:first-child { font-family: var(--benn-font-heading); font-weight: 800; font-size: 1.05rem; }
.benn-summary__total-val { font-family: var(--benn-font-heading); font-weight: 800; font-size: 1.35rem; color: var(--benn-text); }
.benn-summary__tax { margin: 4px 0 0; font-size: .8rem; color: var(--benn-text-muted); }

/* Knoppen */
.benn-summary__actions { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.benn-summary__checkout { display: flex; align-items: center; justify-content: center; gap: 9px; height: 50px; background: var(--benn-primary); color: #fff !important; border-radius: var(--benn-radius-sm); font-family: var(--benn-font-heading); font-weight: 700; font-size: 1rem; letter-spacing: .01em; text-transform: none; text-decoration: none; transition: background .15s; }
.benn-summary__checkout:hover { background: var(--benn-primary-hover, #b80510); }
.benn-summary__continue { display: flex; align-items: center; justify-content: center; height: 48px; background: #fff; color: var(--benn-text) !important; border: 1.5px solid var(--benn-border-strong, #d0d0d0); border-radius: var(--benn-radius-sm); font-family: var(--benn-font-heading); font-weight: 700; font-size: .9rem; text-decoration: none; transition: border-color .15s, color .15s; }
.benn-summary__continue:hover { border-color: var(--benn-primary); color: var(--benn-primary) !important; }

/* Veilig betalen */
.benn-summary__pay { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--benn-border); text-align: center; }
.benn-summary__pay-label { display: block; margin-bottom: 10px; font-size: .8rem; color: var(--benn-text-muted); }
.benn-summary__pay-icons { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.benn-summary__pay-safe { display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; font-weight: 600; color: var(--benn-text-body); }
.benn-summary__pay-safe svg { color: var(--benn-success, #1faa59); }

/* Maak je rit compleet */
.benn-crosssell { margin-top: 30px; }
.benn-crosssell__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
/* Titel — compact, sentence-case, donker. De Elementor-kit blaast <h2> op,
   dus hogere specificiteit + !important. */
.benn-crosssell .benn-crosssell__title { margin: 0; font-family: var(--benn-font-heading); font-size: 1.15rem !important; font-weight: 800; line-height: 1.2 !important; text-transform: none !important; letter-spacing: 0 !important; color: var(--benn-secondary, #1a1a1a); }
.benn-crosssell__nav { display: flex; gap: 8px; }
/* Pijl-knoppen — ronde outline. De kit geeft <button> een rode achtergrond;
   die overschrijven we met !important zodat ze niet rood/rechthoekig worden. */
.benn-crosssell .benn-crosssell__arrow { display: inline-flex !important; align-items: center; justify-content: center; width: 38px !important; height: 38px !important; padding: 0 !important; background: #fff !important; border: 1px solid var(--benn-border) !important; border-radius: 50% !important; color: var(--benn-text) !important; box-shadow: none !important; cursor: pointer; transition: border-color .15s, color .15s; }
.benn-crosssell .benn-crosssell__arrow:hover { border-color: var(--benn-primary) !important; color: var(--benn-primary) !important; background: #fff !important; }
.benn-crosssell__track { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(200px, 1fr); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 4px; }
.benn-crosssell__track::-webkit-scrollbar { height: 6px; }
.benn-crosssell__track::-webkit-scrollbar-thumb { background: var(--benn-border-strong, #d0d0d0); border-radius: 3px; }
.benn-crosssell__card { display: flex; flex-direction: column; gap: 6px; padding: 16px; background: #fff; border: 1px solid var(--benn-border); border-radius: var(--benn-radius); scroll-snap-align: start; }
.benn-crosssell__img img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--benn-radius-sm); background: var(--benn-bg-alt); }
.benn-crosssell__ph { display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 1 / 1; border-radius: var(--benn-radius-sm); background: var(--benn-bg-alt); color: var(--benn-border-strong, #cfcfcf); }
/* Productnaam — donker, niet rood (kit kleurt links rood → !important). */
.benn-crosssell .benn-crosssell__name { margin-top: 6px; font-weight: 700; font-size: .92rem; line-height: 1.25; color: var(--benn-secondary, #1a1a1a) !important; text-decoration: none; }
.benn-crosssell .benn-crosssell__name:hover { color: var(--benn-primary) !important; }
.benn-crosssell__price { font-size: .9rem; color: var(--benn-text-muted); }
.benn-crosssell .benn-crosssell__add { display: inline-flex; align-items: center; justify-content: center; gap: 7px; margin-top: 8px; padding: 11px 12px; background: #fff !important; border: 1.5px solid var(--benn-border-strong, #d0d0d0) !important; border-radius: var(--benn-radius-sm) !important; color: var(--benn-text) !important; font-weight: 600; font-size: .82rem; text-transform: none !important; letter-spacing: 0 !important; text-decoration: none; cursor: pointer; box-shadow: none !important; transition: border-color .15s, color .15s; }
.benn-crosssell .benn-crosssell__add:hover { border-color: var(--benn-primary) !important; color: var(--benn-primary) !important; background: #fff !important; }

/* Verborgen update/actions + laadstaat */
.benn-cart-form__hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.benn-cart-form.is-updating { opacity: .55; pointer-events: none; }

/* Responsive */
@media (max-width: 1024px) {
	.benn-cart__grid { grid-template-columns: 1fr; }
	.benn-cart__right { position: static; }
}
@media (max-width: 640px) {
	.benn-cart-table { padding: 6px 16px 0; }
	.benn-cart-table__head { display: none; }
	.benn-cart-row { grid-template-columns: 72px 1fr; grid-template-areas: "media info" "media price" "media qty" "media total" "remove remove"; column-gap: 14px; row-gap: 8px; }
	.benn-cart-row__media { grid-area: media; }
	.benn-cart-row__media img { width: 72px; height: 72px; }
	.benn-cart-row__info { grid-area: info; }
	.benn-cart-row__price { grid-area: price; }
	.benn-cart-row__qty { grid-area: qty; }
	.benn-cart-row__total { grid-area: total; }
	.benn-cart-row__remove { grid-area: remove; justify-self: start; margin-top: 8px; }
	.benn-cart-row__price::before { content: "Prijs: "; color: var(--benn-text-muted); }
	.benn-cart-row__total::before { content: "Totaal: "; color: var(--benn-text-muted); font-weight: 400; }
}
.benn-filters__submit svg { width: 16px; height: 16px; fill: currentColor; }
.benn-filters__submit:hover { background: var(--benn-primary); color: #fff; }

@media (max-width: 1024px) {
	.benn-shop-results ul.products { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 900px) {
	.benn-shop-layout { flex-direction: column; }
	.benn-shop-filters { flex: 1 1 auto; max-width: none; width: 100%; }
	.benn-filters { position: static; }
}
@media (max-width: 560px) {
	.benn-shop-results ul.products { grid-template-columns: 1fr !important; }
}

/* ==========================================================================
   SINGLE PRODUCT — verkoopaccenten (inc/single-product.php)
   ========================================================================== */
.single-product .summary .benn-sale-badge { display: inline-block; background: var(--benn-primary); color: #fff; font-family: var(--benn-font-heading); font-weight: var(--benn-fw-bold); text-transform: uppercase; letter-spacing: .06em; font-size: var(--benn-fs-xs); padding: .4em .75em; border-radius: var(--benn-radius-sm); margin-bottom: 12px; }
.single-product .summary p.price { display: inline-block; vertical-align: middle; margin-bottom: 0; }
.benn-save { display: inline-flex; align-items: center; background: #ffe5e5; color: var(--benn-primary); font-weight: var(--benn-fw-semibold); font-size: .82rem; padding: .4em .7em; border-radius: var(--benn-radius-sm); white-space: nowrap; }
/* ACTIE + besparing op één rij bovenaan; besparing rechts ("rechts boven naast Actie"). */
.benn-badge-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.benn-badge-row .benn-sale-badge { margin-bottom: 0; }
.benn-badge-row .benn-save { margin-left: auto; }
/* Mobiel: prijs op eigen regel. */
@media (max-width: 560px) {
	.single-product .summary p.price { display: block; }
}
/* Leverregel: gewone, leesbare alinea (géén flex — anders worden de losse woorden kolommen). */
.benn-delivery { color: var(--benn-text-body); font-size: .92rem; line-height: 1.5; margin: 16px 0 0; }
.benn-delivery__dot { display: inline-block; vertical-align: middle; width: 9px; height: 9px; border-radius: 50%; background: var(--benn-success, #1faa59); margin: -2px 8px 0 0; box-shadow: 0 0 0 3px rgba(31, 170, 89, .18); }
.benn-delivery strong { color: var(--benn-text); font-weight: var(--benn-fw-semibold); }
.benn-specs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px 18px; margin: 22px 0 4px; padding-top: 20px; border-top: 1px solid var(--benn-border); }
.benn-specs__item { display: flex; align-items: center; gap: 10px; }
.benn-specs__icon { flex: none; color: var(--benn-primary); }
.benn-specs__body { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.benn-specs__label { font-size: var(--benn-fs-sm); color: var(--benn-text-muted); }
.benn-specs__val { font-family: var(--benn-font-heading); font-size: .95rem; color: var(--benn-text); }
.single-product p.stock.in-stock { display: none; }
.single-product .single_add_to_cart_button::after { content: none; display: none; }
/* Single product op de volle sitebreedte (Hello capt .site-main op 1140px). */
body.single-product main.site-main { max-width: var(--benn-container) !important; padding-inline: var(--benn-container-pad) !important; margin-inline: auto !important; width: 100% !important; }
/* Koopknop-rij: hoeveelheid + lange koopknop die de rest van de rij vult. */
.single-product div.product form.cart { display: flex !important; align-items: stretch !important; flex-wrap: wrap !important; gap: 12px 10px !important; margin-bottom: 6px; }
.single-product div.product form.cart .quantity { margin: 0; }
/* Koopknop: basis 0 zodat hij naast de stepper past en de rest van rij 1 vult (volle breedte). */
.single-product div.product form.cart .single_add_to_cart_button { flex: 1 1 0 !important; min-width: 0 !important; justify-content: center !important; }
/* Secundaire acties (Vergelijken · Proefrit) op een eigen rij ONDER de koopknop. */
.single-product div.product form.cart .benn-secondary-actions { flex: 1 0 100% !important; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 22px; margin: 2px 0 0; }
.single-product div.product form.cart .benn-secondary-actions:empty { display: none; }
.single-product div.product form.cart .benn-secondary-actions .benn-compare-add,
.single-product div.product form.cart .benn-secondary-actions .benn-proefrit-add { flex: 0 0 auto; margin: 0; }
/* "Vergelijken"-link naast de koopknop. */
.benn-compare-add, .benn-proefrit-add { display: inline-flex; align-items: center; gap: 7px; color: var(--benn-text-muted); font-size: .92rem; transition: color var(--benn-transition); }
.benn-compare-add:hover, .benn-proefrit-add:hover { color: var(--benn-primary); }
.benn-compare-add svg, .benn-proefrit-add svg { flex: none; }

/* --- Proefrit-pagina ([benn_proefrit]) ----------------------------------- */
.benn-proefrit { max-width: 680px; }
.benn-proefrit__product { display: flex; align-items: center; gap: 18px; padding: 16px 18px; background: var(--benn-bg-alt); border-radius: var(--benn-radius); margin-bottom: 24px; }
.benn-proefrit__product img { width: 90px; height: auto; border-radius: var(--benn-radius-sm); }
.benn-proefrit__product-info { display: flex; flex-direction: column; }
.benn-proefrit__eyebrow { font-size: var(--benn-fs-sm); color: var(--benn-text-muted); }
.benn-proefrit__name { font-family: var(--benn-font-heading); font-size: 1.1rem; color: var(--benn-text); }
.benn-proefrit__intro h2 { margin: 0 0 .5rem; }
.benn-proefrit__intro p { color: var(--benn-text-body); line-height: 1.7; }
.benn-proefrit__contact a { color: var(--benn-primary); font-weight: var(--benn-fw-semibold); }

/* --- Vergelijkpagina ([benn_vergelijken]) -------------------------------- */
.benn-compare__scroll { overflow-x: auto; }
.benn-compare__table { width: 100%; border-collapse: collapse; min-width: 580px; }
.benn-compare__table th, .benn-compare__table td { padding: 14px 16px; text-align: left; border-bottom: 1px solid var(--benn-border); vertical-align: middle; }
.benn-compare__rowlabel { width: 140px; font-family: var(--benn-font-heading); font-weight: var(--benn-fw-bold); color: var(--benn-text); font-size: .9rem; background: var(--benn-bg-alt); }
.benn-compare__product { position: relative; vertical-align: top; text-align: center; }
.benn-compare__media img { width: 150px; height: auto; margin: 0 auto 10px; display: block; }
.benn-compare__name { display: block; font-family: var(--benn-font-heading); font-weight: var(--benn-fw-bold); color: var(--benn-text); font-size: .98rem; line-height: 1.25; }
.benn-compare__name:hover { color: var(--benn-primary); }
.benn-compare__remove { position: absolute; top: 6px; right: 10px; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--benn-bg-alt); color: var(--benn-text-muted); font-size: 18px; line-height: 1; }
.benn-compare__remove:hover { background: var(--benn-primary); color: #fff; }
.benn-compare__table td { color: var(--benn-text-body); }
.benn-compare__price { font-family: var(--benn-font-heading); font-weight: var(--benn-fw-bold); color: var(--benn-text); }
.benn-compare__price del { color: var(--benn-text-muted); font-weight: 400; font-size: .9em; margin-right: .3rem; }
.benn-compare__price ins { color: var(--benn-primary); text-decoration: none; }
.benn-compare__cart { display: inline-block; background: var(--benn-primary); color: #fff; font-family: var(--benn-font-heading); font-weight: var(--benn-fw-bold); text-transform: uppercase; letter-spacing: .03em; font-size: .78rem; padding: .6rem 1rem; border-radius: var(--benn-radius-sm); }
.benn-compare__cart:hover { background: var(--benn-primary-hover); color: #fff; }
.benn-compare__foot { margin-top: 16px; }
.benn-compare__foot a { color: var(--benn-text-muted); font-size: var(--benn-fs-sm); text-decoration: underline; }
.benn-compare__foot a:hover { color: var(--benn-primary); }
.benn-compare-empty { text-align: center; padding: 44px 20px; }
.benn-compare-empty p { color: var(--benn-text-body); margin-bottom: 20px; }
.benn-compare-empty .benn-btn { display: inline-block; background: var(--benn-primary); color: #fff; padding: .85rem 1.6rem; border-radius: var(--benn-radius-sm); font-family: var(--benn-font-heading); font-weight: var(--benn-fw-bold); text-transform: uppercase; letter-spacing: .03em; }
.benn-compare-empty .benn-btn:hover { background: var(--benn-primary-hover); color: #fff; }
@media (max-width: 560px) {
	.benn-specs { grid-template-columns: repeat(2, 1fr); }
}

/* ==========================================================================
   AFREKENPAGINA (premium checkout) — woocommerce/checkout/*.php + inc/checkout.php
   ========================================================================== */
body.woocommerce-checkout main.site-main { max-width: var(--benn-container) !important; margin-inline: auto; padding: 30px var(--benn-container-pad, 20px) 80px; }
body.woocommerce-checkout .page-header { display: none; }
body.woocommerce-checkout .page-content { max-width: 100%; margin: 0; padding: 0; }
.benn-checkout { max-width: var(--benn-container); margin: 0 auto; }
.benn-checkout .benn-cart-title { margin: 0 0 22px; }

/* Voortgangsindicator */
.benn-checkout__steps { display: flex; align-items: center; gap: 10px; margin: 0 0 28px; }
.benn-step { display: inline-flex; align-items: center; gap: 9px; }
.benn-step__num { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--benn-bg-alt); color: var(--benn-text-muted); border: 1.5px solid var(--benn-border-strong, #d6d6d6); font-family: var(--benn-font-heading); font-weight: 800; font-size: .8rem; }
.benn-step__label { font-family: var(--benn-font-heading); font-weight: 700; font-size: .9rem; color: var(--benn-text-muted); }
.benn-step__line { flex: 1; height: 2px; background: var(--benn-border); border-radius: 2px; }
.benn-step.is-active .benn-step__num { background: var(--benn-primary); color: #fff; border-color: var(--benn-primary); }
.benn-step.is-active .benn-step__label { color: var(--benn-text); }
.benn-step.is-done .benn-step__num { background: var(--benn-secondary); color: #fff; border-color: var(--benn-secondary); }
.benn-step.is-done .benn-step__label { color: var(--benn-text); }

/* Login-formulier (boven de checkout) */
.benn-checkout__login { margin: 0 0 18px; }
.benn-checkout__login .woocommerce-form-login-toggle { display: none; }
.benn-checkout__login .woocommerce-form-login { display: none; margin: 0; padding: 22px 24px; background: #fff; border: 1px solid var(--benn-border); border-radius: var(--benn-radius); box-shadow: var(--benn-shadow-sm); }
.benn-checkout__login .woocommerce-form-login .form-row { margin: 0 0 12px; }
.benn-checkout__login label { display: block; margin-bottom: 6px; font-size: .8rem; font-weight: 600; color: var(--benn-text-body); }
.benn-checkout__login input[type="text"], .benn-checkout__login input[type="password"] { width: 100%; height: 46px; padding: 0 14px; border: 1px solid var(--benn-border-strong, #d6d6d6); border-radius: var(--benn-radius-sm); font-size: .95rem; }
.benn-checkout__login button { padding: 12px 22px; background: var(--benn-secondary); color: #fff !important; border: 0; border-radius: var(--benn-radius-sm); font-family: var(--benn-font-heading); font-weight: 700; cursor: pointer; }

/* 2-koloms grid */
.benn-checkout__grid { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 30px; align-items: start; }
.benn-checkout__main { min-width: 0; }
.benn-checkout__aside { position: sticky; top: 100px; }

/* Kaarten links */
.benn-cocard { background: #fff; border: 1px solid var(--benn-border); border-radius: var(--benn-radius); box-shadow: var(--benn-shadow-sm); padding: 22px 24px; margin-bottom: 20px; }
.benn-cocard__head { display: flex; align-items: flex-start; gap: 13px; margin-bottom: 18px; }
.benn-cocard__ic { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--benn-bg-alt); color: var(--benn-secondary); }
.benn-checkout .benn-cocard__title { margin: 0; font-family: var(--benn-font-heading); font-size: 1.15rem !important; font-weight: 800; line-height: 1.2 !important; text-transform: none !important; letter-spacing: 0 !important; color: var(--benn-secondary, #1a1a1a); }
.benn-cocard__sub { margin: 3px 0 0; font-size: .85rem; color: var(--benn-text-muted); }
.benn-cocard__head .benn-login-link { margin-left: auto; align-self: center; font-size: .85rem; color: var(--benn-text-muted); text-decoration: none; white-space: nowrap; }
.benn-cocard__head .benn-login-link strong { color: var(--benn-primary); font-weight: 700; }
.benn-cocard__head .benn-login-link:hover strong { text-decoration: underline; }

/* Velden — 6-koloms grid */
.benn-fields { display: grid; grid-template-columns: repeat(6, 1fr); gap: 15px 16px; }
.benn-fields .form-row { margin: 0; padding: 0; grid-column: span 6; float: none !important; width: auto !important; overflow: visible; }
.benn-fields .form-row-first { grid-column: span 3; }
.benn-fields .form-row-last { grid-column: span 3; }
.benn-fields .benn-col-3 { grid-column: span 3; }
.benn-fields .benn-col-2 { grid-column: span 2; }
.benn-fields label { display: block; margin-bottom: 6px; font-size: .8rem; font-weight: 600; color: var(--benn-text-body); }
.benn-fields label.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.benn-fields .required { color: var(--benn-primary); border: 0; text-decoration: none; }
.benn-fields .optional { color: var(--benn-text-muted); }
.benn-fields .woocommerce-input-wrapper { display: block; width: 100%; }
.benn-fields input[type="text"], .benn-fields input[type="email"], .benn-fields input[type="tel"], .benn-fields input[type="number"], .benn-fields input[type="password"], .benn-fields select, .benn-fields textarea { width: 100%; height: 48px; padding: 0 14px; border: 1px solid var(--benn-border-strong, #d6d6d6); border-radius: var(--benn-radius-sm); font-family: var(--benn-font-body); font-size: .95rem; color: var(--benn-text); background: #fff; transition: border-color .15s, box-shadow .15s; }
.benn-fields textarea { height: auto; min-height: 92px; padding: 12px 14px; resize: vertical; }
.benn-fields input::placeholder, .benn-fields textarea::placeholder { color: #aaa; }
.benn-fields input:focus, .benn-fields select:focus, .benn-fields textarea:focus { outline: 0; border-color: var(--benn-primary); box-shadow: 0 0 0 3px var(--benn-primary-soft, #fdecec); }
.benn-fields .woocommerce-invalid input { border-color: #e02020; }
/* select2 (land) op gelijke hoogte */
.benn-fields .select2-container { width: 100% !important; }
.benn-fields .select2-container .select2-selection--single { height: 48px; border: 1px solid var(--benn-border-strong, #d6d6d6); border-radius: var(--benn-radius-sm); display: flex; align-items: center; }
.benn-fields .select2-container .select2-selection--single .select2-selection__rendered { line-height: normal; padding-left: 14px; color: var(--benn-text); }
.benn-fields .select2-container .select2-selection--single .select2-selection__arrow { height: 46px; }
.benn-fields .select2-container--focus .select2-selection--single, .benn-fields .select2-container--open .select2-selection--single { border-color: var(--benn-primary); box-shadow: 0 0 0 3px var(--benn-primary-soft, #fdecec); }

/* Verzendopties */
.benn-ship-options { display: flex; flex-direction: column; gap: 10px; }
.benn-ship-opt { display: flex; align-items: center; gap: 14px; padding: 15px 18px; border: 1.5px solid var(--benn-border); border-radius: var(--benn-radius-sm); cursor: pointer; position: relative; transition: border-color .15s, box-shadow .15s; }
.benn-ship-opt__radio { position: absolute; opacity: 0; pointer-events: none; }
.benn-ship-opt__radio-dot { flex: none; width: 20px; height: 20px; border: 2px solid var(--benn-border-strong, #cfcfcf); border-radius: 50%; position: relative; transition: border-color .15s; }
.benn-ship-opt__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.benn-ship-opt__name { font-weight: 700; font-size: .95rem; color: var(--benn-text); }
.benn-ship-opt__meta { font-size: .8rem; color: var(--benn-text-muted); }
.benn-ship-opt__price { margin-left: auto; font-weight: 700; color: var(--benn-text); white-space: nowrap; }
.benn-ship-opt__free { color: var(--benn-success, #16a34a); font-weight: 700; }
.benn-ship-opt:hover { border-color: var(--benn-border-strong, #cfcfcf); }
.benn-ship-opt.is-active, .benn-ship-opt:has(.benn-ship-opt__radio:checked) { border-color: var(--benn-primary); box-shadow: inset 0 0 0 1px var(--benn-primary); }
.benn-ship-opt.is-active .benn-ship-opt__radio-dot, .benn-ship-opt:has(.benn-ship-opt__radio:checked) .benn-ship-opt__radio-dot { border-color: var(--benn-primary); }
.benn-ship-opt.is-active .benn-ship-opt__radio-dot::after, .benn-ship-opt:has(.benn-ship-opt__radio:checked) .benn-ship-opt__radio-dot::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--benn-primary); }
.benn-ship-empty { font-size: .9rem; color: var(--benn-text-muted); }

/* Betaalmethodes */
.benn-payment__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.benn-paymethod { list-style: none; position: relative; border: 1.5px solid var(--benn-border); border-radius: var(--benn-radius-sm); transition: border-color .15s, box-shadow .15s; }
.benn-paymethod__radio { position: absolute; opacity: 0; pointer-events: none; }
.benn-paymethod__label { display: flex; align-items: center; gap: 13px; padding: 15px 18px; margin: 0; cursor: pointer; }
.benn-paymethod__dot { flex: none; width: 20px; height: 20px; border: 2px solid var(--benn-border-strong, #cfcfcf); border-radius: 50%; position: relative; transition: border-color .15s; }
.benn-paymethod__title { font-weight: 700; font-size: .95rem; color: var(--benn-text); }
.benn-paymethod__icon { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; }
.benn-paymethod:hover { border-color: var(--benn-border-strong, #cfcfcf); }
.benn-paymethod.is-active, .benn-paymethod:has(.benn-paymethod__radio:checked) { border-color: var(--benn-primary); box-shadow: inset 0 0 0 1px var(--benn-primary); }
.benn-paymethod.is-active .benn-paymethod__dot, .benn-paymethod:has(.benn-paymethod__radio:checked) .benn-paymethod__dot { border-color: var(--benn-primary); }
.benn-paymethod.is-active .benn-paymethod__dot::after, .benn-paymethod:has(.benn-paymethod__radio:checked) .benn-paymethod__dot::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--benn-primary); }
.benn-paymethod__box { padding: 0 18px 16px 51px; font-size: .85rem; color: var(--benn-text-body); }
.benn-paymethod__box p { margin: 0 0 8px; }
.benn-payment__empty .woocommerce-info, .benn-payment__nopay { font-size: .9rem; color: var(--benn-text-muted); }
.benn-pay { display: inline-flex; align-items: center; justify-content: center; height: 28px; min-width: 40px; padding: 0 6px; background: #fff; border: 1px solid var(--benn-border); border-radius: 5px; }
.benn-pay-group { display: inline-flex; gap: 6px; }
.benn-pay--bank { border-color: transparent; background: transparent; }

/* Voorwaarden */
.benn-checkout__terms { margin: 4px 0 0; }
.benn-terms { padding: 16px 4px; }
.benn-terms__row { margin: 0; }
.benn-terms__label { display: flex; align-items: flex-start; gap: 11px; cursor: pointer; font-size: .9rem; color: var(--benn-text-body); line-height: 1.5; }
.benn-terms__input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--benn-primary); cursor: pointer; }
.benn-terms__link { color: var(--benn-primary); text-decoration: underline; }
.benn-terms .required { color: var(--benn-primary); border: 0; }

/* ----- Bestelsamenvatting (rechts) ----- */
.benn-cosum { background: #fff; border: 1px solid var(--benn-border); border-radius: var(--benn-radius); box-shadow: var(--benn-shadow-sm); padding: 22px; }
.benn-cosum.is-busy { opacity: .55; pointer-events: none; }
.benn-cosum__head { margin: 0 0 16px; }
.benn-checkout .benn-cosum__title { margin: 0; font-family: var(--benn-font-heading); font-size: 1.3rem !important; font-weight: 800; line-height: 1.2 !important; text-transform: none !important; letter-spacing: 0 !important; color: var(--benn-secondary, #1a1a1a); }

.benn-cosum__items { display: flex; flex-direction: column; }
.benn-cosum__item { display: grid; grid-template-columns: 60px minmax(0, 1fr) auto; grid-template-areas: "thumb info price" "thumb actions actions"; column-gap: 13px; row-gap: 10px; align-items: start; padding: 14px 0; border-bottom: 1px solid var(--benn-border); }
.benn-cosum__thumb { grid-area: thumb; position: relative; }
.benn-cosum__thumb img { width: 60px; height: 60px; object-fit: cover; border-radius: var(--benn-radius-sm); background: var(--benn-bg-alt); }
.benn-cosum__info { grid-area: info; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.benn-cosum__name { font-weight: 700; font-size: .9rem; line-height: 1.3; color: var(--benn-secondary, #1a1a1a); }
.benn-cosum__variant { font-size: .78rem; color: var(--benn-text-muted); }
.benn-cosum__variant dl, .benn-cosum__variant p { margin: 0; }
/* "Verwijder" — platte rode tekst onder de stepper (geen knop; de Elementor-kit
   maakt elke <button> rood/gevuld, daarom hard overschrijven met !important). */
.benn-cosum__remove { display: inline-block; margin: 0; padding: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; width: auto !important; min-width: 0 !important; height: auto !important; font-family: var(--benn-font-body); font-size: .8rem; font-weight: 600; line-height: 1.2; letter-spacing: 0; text-transform: none; color: var(--benn-primary) !important; cursor: pointer; }
.benn-cosum__remove:hover { color: var(--benn-primary-hover, #c2050f) !important; text-decoration: underline; }
/* Acties-rij ONDER de productinfo: stepper + Verwijder ernaast (geen overlap meer). */
.benn-cosum__actions { grid-area: actions; display: flex; align-items: center; gap: 14px; }
.benn-cosum__price { grid-area: price; align-self: start; font-weight: 700; font-size: .9rem; color: var(--benn-text); white-space: nowrap; text-align: right; }
.benn-cosum__qty { display: inline-flex; align-items: center; height: 30px; border: 1px solid var(--benn-border); border-radius: var(--benn-radius-sm); overflow: hidden; }
.benn-cosum__qtybtn { width: 28px; height: 100%; display: inline-flex; align-items: center; justify-content: center; background: var(--benn-bg-alt) !important; border: 0 !important; color: var(--benn-text-body) !important; font-size: 1rem; line-height: 1; cursor: pointer; padding: 0; }
.benn-cosum__qtybtn:hover { background: var(--benn-primary) !important; color: #fff !important; }
.benn-cosum__qtyval { min-width: 30px; text-align: center; font-size: .85rem; font-weight: 600; }

.benn-cosum__totals { display: flex; flex-direction: column; gap: 12px; padding: 16px 0; }
.benn-cosum__row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; font-size: .9rem; color: var(--benn-text-body); }
.benn-cosum__ship-label small { display: block; margin-top: 2px; font-size: .76rem; color: var(--benn-text-muted); }
.benn-cosum__val { font-weight: 600; color: var(--benn-text); text-align: right; }
.benn-cosum__row--coupon .benn-cosum__val { color: var(--benn-success, #16a34a); }
.benn-cosum__row--tax { color: var(--benn-text-muted); }
.benn-cosum__free { color: var(--benn-success, #16a34a); font-weight: 700; }
.benn-cosum__total { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 16px 0; border-top: 1px solid var(--benn-border); }
.benn-cosum__total > span:first-child { font-family: var(--benn-font-heading); font-weight: 800; font-size: 1.05rem; }
.benn-cosum__total-val { font-family: var(--benn-font-heading); font-weight: 800; font-size: 1.45rem; color: var(--benn-text); }

/* Kortingscode */
.benn-cosum__coupon { padding: 14px 0; border-top: 1px solid var(--benn-border); }
.benn-cosum__coupon-head { display: flex; align-items: center; justify-content: space-between; font-weight: 600; font-size: .9rem; color: var(--benn-text); cursor: pointer; list-style: none; }
.benn-cosum__coupon-head::-webkit-details-marker { display: none; }
.benn-cosum__chev { color: var(--benn-text-muted); transition: transform .2s; }
.benn-cosum__coupon[open] .benn-cosum__chev { transform: rotate(180deg); }
.benn-cosum__coupon-form { display: flex; gap: 8px; margin-top: 12px; }
.benn-cosum__coupon-input { flex: 1; min-width: 0; height: 44px; padding: 0 12px; border: 1px solid var(--benn-border-strong, #d6d6d6); border-radius: var(--benn-radius-sm); font-size: .9rem; }
.benn-cosum__coupon-input:focus { outline: 0; border-color: var(--benn-primary); box-shadow: 0 0 0 3px var(--benn-primary-soft, #fdecec); }
.benn-cosum__coupon-btn { flex: none; padding: 0 18px; background: var(--benn-bg-alt); border: 1px solid var(--benn-border-strong, #d6d6d6); border-radius: var(--benn-radius-sm); font-weight: 700; font-size: .85rem; cursor: pointer; transition: all .15s; }
.benn-cosum__coupon-btn:hover { background: var(--benn-secondary); border-color: var(--benn-secondary); color: #fff; }
.benn-cosum__coupon-btn.is-loading { opacity: .6; pointer-events: none; }

/* Trust */
.benn-cotrust { list-style: none; margin: 4px 0 0; padding: 16px 0; border-top: 1px solid var(--benn-border); display: flex; flex-direction: column; gap: 14px; }
.benn-cotrust__item { display: flex; align-items: center; gap: 12px; }
.benn-cotrust__ic { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: var(--benn-bg-alt); color: var(--benn-secondary); }
.benn-cotrust__txt { display: flex; flex-direction: column; }
.benn-cotrust__txt strong { font-size: .85rem; font-weight: 700; color: var(--benn-text); }
.benn-cotrust__txt small { font-size: .78rem; color: var(--benn-text-muted); }

/* Bestelling plaatsen */
.benn-cosum__place { margin: 16px 0 0; padding: 0; }
.benn-cosum__btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: 100%; min-height: 60px; padding: 10px; background: var(--benn-primary) !important; color: #fff !important; border: 0 !important; border-radius: var(--benn-radius-sm); font-family: var(--benn-font-heading); cursor: pointer; transition: background .15s; position: relative; }
.benn-cosum__btn:hover { background: var(--benn-primary-hover, #c2050f) !important; }
/* Stond absoluut gepositioneerd met translateY(-50%); dat legde het slotje
   dwars over de ondertitel heen. De knop is nu een raster, dus het icoon
   staat gewoon in zijn eigen cel. */
.benn-cosum__btn svg { position: static; }
.benn-cosum__btn-txt { font-weight: 800; font-size: 1rem; letter-spacing: .01em; }
.benn-cosum__btn-sub { font-weight: 500; font-size: .75rem; opacity: .9; }

/* Betaallogo's onder de samenvatting */
.benn-cosum__pay { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--benn-border); }
.benn-cosum__pay-more { font-size: .82rem; color: var(--benn-text-muted); text-decoration: none; white-space: nowrap; }
.benn-cosum__pay-more:hover { color: var(--benn-primary); }

/* Mobiele sticky knop (verborgen op desktop) */
.benn-checkout-sticky { display: none; }

@media (max-width: 1024px) {
	.benn-checkout__grid { grid-template-columns: 1fr; }
	/* Geen order:-1 meer. Dat zette de bestelsamenvatting met de betaalknop
	   boven het formulier: op telefoon eerst 1291px samenvatting doorscrollen
	   voor je bij je adres kwam. Contact, factuuradres en betaalmethode staan
	   nu eerst, de samenvatting eronder -- de sticky balk houdt het totaal en
	   de knop onderin toch al in beeld. */
	.benn-checkout__aside { position: static; order: 0; }
	.benn-cosum { box-shadow: var(--benn-shadow); }
	.benn-checkout-sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--benn-z-overlay, 1100); display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid var(--benn-border); box-shadow: 0 -6px 24px rgba(20,20,20,.10); }
	.benn-checkout-sticky__total { font-family: var(--benn-font-heading); font-weight: 800; font-size: 1.2rem; color: var(--benn-text); }
	.benn-checkout-sticky__btn { display: inline-flex; align-items: center; gap: 8px; padding: 14px 22px; background: var(--benn-primary); color: #fff; border: 0; border-radius: var(--benn-radius-sm); font-family: var(--benn-font-heading); font-weight: 800; font-size: .95rem; cursor: pointer; }
	body.woocommerce-checkout main.site-main { padding-bottom: 96px; }
}

@media (max-width: 600px) {
	.benn-cocard { padding: 18px 16px; }
	.benn-cocard__head .benn-login-link { margin-left: 0; }
	.benn-cocard__head { flex-wrap: wrap; }
	.benn-fields { grid-template-columns: repeat(6, 1fr); gap: 13px 12px; }
	.benn-fields .form-row-first, .benn-fields .form-row-last, .benn-fields .benn-col-3 { grid-column: span 6; }
	.benn-fields .benn-col-2 { grid-column: span 3; }
	/* Smallere paginagutter op telefoon → de bestelkolom + witte samenvattingskaart worden breder (meer ruimte voor de tekst). */
	body.woocommerce-checkout main.site-main { padding-left: 12px; padding-right: 12px; }
	.benn-cosum { padding: 18px 16px; }
	.benn-cosum__item { column-gap: 11px; }
	.benn-checkout__steps { gap: 6px; }
	.benn-step__label { font-size: .78rem; }
}

/* ==========================================================================
   LOGIN / REGISTRATIE (My Account, uitgelogd) — myaccount/form-login.php
   ========================================================================== */
body.woocommerce-account main.site-main { max-width: var(--benn-container) !important; margin-inline: auto; padding: 30px var(--benn-container-pad, 20px) 80px; }
/* FIX: elementor.css definieert al .benn-service { background: var(--benn-primary) } voor een homepage-USP-blok.
   Onze account-service-wrapper deelt die klassenaam → rode achtergrond. Scoped neutraliseren (homepage blijft rood). */
body.woocommerce-account .benn-service { background: transparent; color: var(--benn-text); }
body.woocommerce-account { background-color: #fff; }
body.woocommerce-account .page-header { display: none; }
body.woocommerce-account .page-content { max-width: 100%; margin: 0; padding: 0; }

.benn-auth { max-width: 1320px; margin: 0 auto; }
.benn-auth__header { text-align: center; margin: 4px 0 28px; }
.benn-checkout .benn-auth__title, .benn-auth__title { margin: 0 0 8px; font-family: var(--benn-font-heading); font-size: clamp(1.9rem, 3.4vw, 2.6rem) !important; font-weight: 800; line-height: 1.1 !important; text-transform: none !important; color: var(--benn-secondary, #1a1a1a); }
.benn-auth__subtitle { margin: 0; font-size: .98rem; color: var(--benn-text-muted); }

.benn-auth__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: stretch; }

/* Linker introductiepaneel */
.benn-auth__intro { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; min-height: 560px; padding: 32px; background: linear-gradient(165deg, var(--benn-bg-alt, #f5f5f5) 0%, #fff 65%); background-size: cover; background-position: center; border: 1px solid var(--benn-border); border-radius: var(--benn-radius-lg, 14px); }
/* Met achtergrondfoto: links-zwaardere witte overlay → tekst leesbaar, foto schemert rechts door. */
.benn-auth__intro.has-photo::before { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(112deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.9) 36%, rgba(255,255,255,.58) 70%, rgba(255,255,255,.22) 100%); }
.benn-auth__intro.has-photo > * { position: relative; z-index: 1; }
.benn-auth__intro.has-photo .benn-auth__benefit-ic { background: #fff; box-shadow: 0 1px 5px rgba(20,20,20,.10); }
.benn-auth__intro.has-photo .benn-auth__trust { margin-top: 6px; padding: 16px 18px; background: rgba(255,255,255,.62); border: 1px solid rgba(20,20,20,.06); border-radius: 10px; }
.benn-auth__intro-title { margin: 0; font-family: var(--benn-font-heading); font-size: 1.6rem; font-weight: 800; color: var(--benn-secondary, #1a1a1a); }
.benn-auth__intro-sub { margin: 8px 0 22px; font-size: .92rem; color: var(--benn-text-body); max-width: 34ch; }
.benn-auth__benefits { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 18px; }
.benn-auth__benefit { display: flex; align-items: center; gap: 14px; }
.benn-auth__benefit-ic { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; background: var(--benn-primary-soft, #fdecec); color: var(--benn-primary); }
.benn-auth__benefit-txt { display: flex; flex-direction: column; }
.benn-auth__benefit-txt strong { font-size: .95rem; font-weight: 700; color: var(--benn-text); }
.benn-auth__benefit-txt small { font-size: .82rem; color: var(--benn-text-muted); }
.benn-auth__trust { display: flex; align-items: center; gap: 12px; padding-top: 20px; border-top: 1px solid var(--benn-border); }
.benn-auth__trust-ic { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: #fff; border: 1px solid var(--benn-border); color: var(--benn-secondary); }
.benn-auth__trust-txt { display: flex; flex-direction: column; }
.benn-auth__trust-txt strong { font-size: .88rem; font-weight: 700; color: var(--benn-text); }
.benn-auth__trust-txt small { font-size: .8rem; color: var(--benn-text-muted); }

/* Rechter paneel met tabs */
.benn-auth__panel { background: #fff; border: 1px solid var(--benn-border); border-radius: var(--benn-radius-lg, 14px); box-shadow: var(--benn-shadow-sm); padding: 10px 32px 32px; }
.benn-auth__tabinput { position: absolute; opacity: 0; pointer-events: none; }
.benn-auth__tabs { display: flex; gap: 8px; margin: 0 0 24px; border-bottom: 1px solid var(--benn-border); }
.benn-auth__tab { position: relative; flex: 1; padding: 18px 8px; text-align: center; font-family: var(--benn-font-heading); font-weight: 700; font-size: 1rem; color: var(--benn-text-muted); cursor: pointer; user-select: none; transition: color .15s; }
.benn-auth__tab::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: transparent; transition: background .15s; }
.benn-auth__tab:hover { color: var(--benn-text-body); }
.benn-auth__tab--login { color: var(--benn-text); }
.benn-auth__tab--login::after { background: var(--benn-primary); }
#benn-tab-register:checked ~ .benn-auth__tabs .benn-auth__tab--login { color: var(--benn-text-muted); }
#benn-tab-register:checked ~ .benn-auth__tabs .benn-auth__tab--login::after { background: transparent; }
#benn-tab-register:checked ~ .benn-auth__tabs .benn-auth__tab--register { color: var(--benn-text); }
#benn-tab-register:checked ~ .benn-auth__tabs .benn-auth__tab--register::after { background: var(--benn-primary); }

.benn-auth__form--register { display: none; }
.benn-auth__form--login { display: block; }
#benn-tab-register:checked ~ .benn-auth__forms .benn-auth__form--login { display: none; }
#benn-tab-register:checked ~ .benn-auth__forms .benn-auth__form--register { display: block; }

/* Formuliervelden */
.benn-authform__row { margin: 0 0 16px; }
.benn-authform__names { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.benn-authform label { display: block; margin-bottom: 6px; font-size: .8rem; font-weight: 600; color: var(--benn-text-body); }
.benn-authform input[type="text"], .benn-authform input[type="email"], .benn-authform input[type="password"] { width: 100%; height: 48px; padding: 0 14px; border: 1px solid var(--benn-border-strong, #d6d6d6); border-radius: var(--benn-radius-sm); font-family: var(--benn-font-body); font-size: .95rem; color: var(--benn-text); background: #fff; transition: border-color .15s, box-shadow .15s; }
.benn-authform input::placeholder { color: #aaa; }
.benn-authform input:focus { outline: 0; border-color: var(--benn-primary); box-shadow: 0 0 0 3px var(--benn-primary-soft, #fdecec); }
.benn-pw { position: relative; display: block; }
.benn-pw input { padding-right: 46px !important; }
/* Oog-toggle: de Elementor-kit kleurt elke <button> rood; we maken er bewust een
   strak rood knopje van met een WIT, gecentreerd oog (geen lege ruimte links). */
.benn-pw__toggle { position: absolute; top: 50%; right: 6px; transform: translateY(-50%); display: inline-flex !important; align-items: center; justify-content: center; width: 32px !important; min-width: 0 !important; height: 32px !important; padding: 0 !important; background: var(--benn-primary) !important; border: 0 !important; border-radius: 6px !important; box-shadow: none !important; color: #fff !important; line-height: 0; cursor: pointer; }
.benn-pw__toggle .benn-pw__ico { display: block; }
.benn-pw__toggle .benn-pw__ico--hide { display: none; }
.benn-pw__toggle.is-on .benn-pw__ico--show { display: none; }
.benn-pw__toggle.is-on .benn-pw__ico--hide { display: block; }
.benn-pw__toggle:hover { background: var(--benn-primary-hover, #c2050f) !important; }
.benn-pw__toggle.is-on { background: var(--benn-primary-dark, #a8040d) !important; color: #fff !important; }

.benn-authform__between { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 20px; }
.benn-authform__remember { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: .88rem; color: var(--benn-text-body); cursor: pointer; }
.benn-authform__remember input { width: 18px; height: 18px; margin: 0; accent-color: var(--benn-primary); }
.benn-authform__forgot { font-size: .88rem; color: var(--benn-primary); text-decoration: none; }
.benn-authform__forgot:hover { text-decoration: underline; }
.benn-authform__pwnote { margin: 0 0 18px; font-size: .85rem; color: var(--benn-text-muted); }

.benn-auth__btn { display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; height: 52px; margin-top: 4px; background: var(--benn-primary) !important; color: #fff !important; border: 0 !important; border-radius: var(--benn-radius-sm); font-family: var(--benn-font-heading); font-weight: 800; font-size: 1rem; letter-spacing: .01em; cursor: pointer; transition: background .15s; }
.benn-auth__btn:hover { background: var(--benn-primary-hover, #c2050f) !important; }

@media (max-width: 860px) {
	.benn-auth__grid { grid-template-columns: 1fr; }
	.benn-auth__intro { order: 2; min-height: 340px; }
	.benn-auth__panel { order: 1; padding: 8px 22px 26px; }
}
@media (max-width: 480px) {
	.benn-auth__intro { padding: 24px 20px; }
	.benn-auth__names { grid-template-columns: 1fr; }
	.benn-auth__tab { font-size: .92rem; padding: 16px 4px; }
}

/* ==========================================================================
   ACCOUNT-DASHBOARD (ingelogd) — myaccount/my-account.php · navigation.php · dashboard.php
   ========================================================================== */
.benn-account { max-width: var(--benn-container); margin: 0 auto; }
.benn-account .benn-cart-title { margin: 0 0 6px; }
.benn-account__sub { margin: 0 0 26px; font-size: .98rem; color: var(--benn-text-muted); }
.benn-account__grid { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 28px; align-items: start; }
/* WooCommerce-standaard float/breedte (30% / 68%) uitschakelen — die persten de
   sidebar tot ~75px (afgekapte labels) en de content te smal binnen onze grid. */
.benn-account .woocommerce-MyAccount-navigation,
.benn-account .woocommerce-MyAccount-content { float: none !important; width: auto !important; max-width: none !important; margin: 0 !important; }

/* Sidebar */
.benn-account__nav { background: transparent; border: 0; border-radius: 0; box-shadow: none; padding: 0; }
.benn-account__nav ul { list-style: none; margin: 0; padding: 0; }
.benn-account__navitem a { display: flex; align-items: center; gap: 12px; padding: 13px 14px; border-radius: var(--benn-radius-sm); color: var(--benn-text-body); text-decoration: none; font-family: var(--benn-font-heading); font-weight: 700; font-size: .92rem; transition: background .15s, color .15s; }
.benn-account__navitem a:hover { background: var(--benn-bg-alt); color: var(--benn-text); }
.benn-account__navitem.is-active a { background: var(--benn-primary-soft, #fdecec); color: var(--benn-primary); }
.benn-account__navic { display: inline-flex; flex: none; }
.benn-account__navlabel { min-width: 0; }
.benn-account__navlabel .benn-lbl-short { display: none; } /* desktop: volledige label */
.benn-account__navitem--logout { margin-top: 4px; }
.benn-account__navitem--logout a { color: var(--benn-text-muted); }
.benn-account__navitem--logout a:hover { color: var(--benn-primary); background: var(--benn-primary-soft, #fdecec); }

/* Welkomstkaart */
.benn-dash { display: flex; flex-direction: column; gap: 20px; }
.benn-dash__welcome { display: flex; align-items: center; gap: 18px; padding: 22px 24px; background: #fff; border: 1px solid var(--benn-border); border-radius: var(--benn-radius); box-shadow: var(--benn-shadow-sm); }
.benn-dash__avatar { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 62px; height: 62px; border-radius: 50%; background: var(--benn-bg-alt); color: var(--benn-secondary); font-family: var(--benn-font-heading); font-weight: 800; font-size: 1.7rem; }
.benn-dash__welcome-txt { flex: 1; min-width: 0; }
.benn-account .benn-dash__hello { margin: 0; font-family: var(--benn-font-heading); font-size: 1.4rem !important; font-weight: 800; line-height: 1.2 !important; color: var(--benn-secondary, #1a1a1a); }
.benn-dash__email { display: block; margin-top: 2px; font-size: .9rem; color: var(--benn-text-muted); }
.benn-dash__secure { display: inline-flex; align-items: center; gap: 6px; margin-top: 9px; font-size: .85rem; font-weight: 600; color: var(--benn-success, #16a34a); }
.benn-dash__editbtn { display: inline-flex; align-items: center; gap: 7px; margin-left: auto; padding: 11px 17px; background: #fff; border: 1.5px solid var(--benn-border-strong, #d6d6d6); border-radius: var(--benn-radius-sm); color: var(--benn-text); font-family: var(--benn-font-heading); font-weight: 700; font-size: .82rem; text-decoration: none; white-space: nowrap; transition: border-color .15s, color .15s; }
.benn-dash__editbtn:hover { border-color: var(--benn-primary); color: var(--benn-primary); }
.benn-dash__editbtn--sm { margin-left: 0; padding: 8px 13px; font-size: .78rem; }

/* Stat-cards */
.benn-dash__stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.benn-dash__stat { display: flex; flex-direction: column; padding: 18px; background: #fff; border: 1px solid var(--benn-border); border-radius: var(--benn-radius); box-shadow: var(--benn-shadow-sm); }
.benn-dash__stat-ic { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; margin-bottom: 10px; border-radius: 50%; background: var(--benn-primary-soft, #fdecec); color: var(--benn-primary); }
.benn-dash__stat-label { font-size: .85rem; color: var(--benn-text-muted); }
.benn-dash__stat-num { font-family: var(--benn-font-heading); font-weight: 800; font-size: 1.8rem; line-height: 1.1; color: var(--benn-secondary, #1a1a1a); }
.benn-dash__stat-link { display: inline-flex; align-items: center; gap: 5px; margin-top: 8px; font-size: .8rem; font-weight: 600; color: var(--benn-primary); text-decoration: none; }
.benn-dash__stat-link:hover { text-decoration: underline; }

/* Panelen */
.benn-dash__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.benn-dash__panel { padding: 22px; background: #fff; border: 1px solid var(--benn-border); border-radius: var(--benn-radius); box-shadow: var(--benn-shadow-sm); }
.benn-dash__panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.benn-account .benn-dash__panel-title { margin: 0; font-family: var(--benn-font-heading); font-size: 1.1rem !important; font-weight: 800; line-height: 1.2 !important; color: var(--benn-secondary, #1a1a1a); }
.benn-dash__panel-link { font-size: .82rem; font-weight: 600; color: var(--benn-primary); text-decoration: none; white-space: nowrap; }
.benn-dash__panel-link:hover { text-decoration: underline; }
.benn-dash__panel-all { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; font-size: .85rem; font-weight: 600; color: var(--benn-primary); text-decoration: none; }

/* Bestellingen-tabel */
.benn-dash__table { display: flex; flex-direction: column; }
.benn-dash__tr { display: grid; grid-template-columns: 1.3fr 1fr 1fr .9fr auto; gap: 10px; align-items: center; padding: 13px 0; border-bottom: 1px solid var(--benn-border); font-size: .85rem; color: var(--benn-text-body); }
.benn-dash__tr:last-child { border-bottom: 0; }
.benn-dash__tr--head { padding: 0 0 11px; color: var(--benn-text-muted); font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.benn-dash__ordnr { font-weight: 700; color: var(--benn-text); }
.benn-dash__status { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px; font-size: .72rem; font-weight: 700; font-style: normal; background: var(--benn-bg-alt); color: var(--benn-text-muted); }
.benn-dash__status::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.benn-dash__status--completed { background: #e6f5ec; color: var(--benn-success, #16a34a); }
.benn-dash__status--processing { background: #e7f0fb; color: #1f6fd6; }
.benn-dash__status--on-hold, .benn-dash__status--pending { background: #fdf2e3; color: #c77f12; }
.benn-dash__status--cancelled, .benn-dash__status--refunded { background: var(--benn-bg-alt); color: var(--benn-text-muted); }
.benn-dash__status--failed { background: var(--benn-primary-soft, #fdecec); color: var(--benn-primary); }
.benn-dash__ordbtn { padding: 7px 14px; border: 1px solid var(--benn-border-strong, #d6d6d6); border-radius: var(--benn-radius-sm); color: var(--benn-text); font-weight: 600; font-size: .78rem; text-decoration: none; white-space: nowrap; transition: border-color .15s, color .15s; }
.benn-dash__ordbtn:hover { border-color: var(--benn-primary); color: var(--benn-primary); }

/* Lege staat — houdt hoogte aan */
.benn-dash__empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; min-height: 230px; padding: 30px 20px; text-align: center; }
.benn-dash__empty-ic { color: var(--benn-border-strong, #cfcfcf); }
.benn-dash__empty-txt { margin: 0; color: var(--benn-text-muted); font-size: .95rem; }
.benn-dash__empty-btn { padding: 13px 24px; background: var(--benn-primary); color: #fff !important; border-radius: var(--benn-radius-sm); font-family: var(--benn-font-heading); font-weight: 700; font-size: .85rem; text-decoration: none; transition: background .15s; }
.benn-dash__empty-btn:hover { background: var(--benn-primary-hover, #c2050f); }

/* Adressen */
.benn-dash__addr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.benn-dash__addr { padding: 16px; border: 1px solid var(--benn-border); border-radius: var(--benn-radius-sm); }
.benn-dash__addr-label { display: block; margin-bottom: 8px; font-weight: 700; font-size: .9rem; color: var(--benn-text); }
.benn-dash__addr-body { font-style: normal; font-size: .85rem; line-height: 1.6; color: var(--benn-text-body); }
.benn-dash__addr-edit { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; padding: 8px 14px; border: 1px solid var(--benn-border-strong, #d6d6d6); border-radius: var(--benn-radius-sm); color: var(--benn-text); font-size: .8rem; font-weight: 600; text-decoration: none; transition: border-color .15s, color .15s; }
.benn-dash__addr-edit:hover { border-color: var(--benn-primary); color: var(--benn-primary); }

/* Accountgegevens */
.benn-dash__acclist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.benn-dash__acclist li { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: .9rem; }
.benn-dash__acckey { display: inline-flex; align-items: center; gap: 9px; color: var(--benn-text-muted); }
.benn-dash__accval { font-weight: 600; color: var(--benn-text); text-align: right; word-break: break-word; }
.benn-dash__muted { color: var(--benn-text-muted); font-style: normal; font-weight: 400; }

/* Aanbevolen */
.benn-dash__rec-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.benn-dash__rec { display: flex; flex-direction: column; gap: 5px; }
.benn-dash__rec-img img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--benn-radius-sm); background: var(--benn-bg-alt); }
.benn-dash__rec-name { margin-top: 3px; font-weight: 700; font-size: .82rem; line-height: 1.25; color: var(--benn-text); text-decoration: none; }
.benn-dash__rec-name:hover { color: var(--benn-primary); }
.benn-dash__rec-price { font-size: .82rem; color: var(--benn-text-body); }
.benn-dash__rec-link { display: inline-flex; align-items: center; gap: 5px; margin-top: 2px; font-size: .78rem; font-weight: 600; color: var(--benn-primary); text-decoration: none; }

/* Responsive */
@media (max-width: 1024px) {
	.benn-account__grid { grid-template-columns: 1fr; }
	/* Strak 2-koloms grid: elk item even breed, 8 items = 4 rijen van 2. */
	.benn-account__nav ul { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
	.benn-account__navitem { margin: 0 !important; }
	/* Labels passend op één regel naast het icoon (Accountgegevens past nu ook). */
	.benn-account__navitem a { height: 100%; gap: 8px; padding: 12px 11px; font-size: 12px; }
	.benn-account__navic svg { width: 18px; height: 18px; }
	.benn-account__navlabel { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
	.benn-account__navlabel .benn-lbl-full { display: none; }
	.benn-account__navlabel .benn-lbl-short { display: inline; } /* mobiel: "Garantie" i.p.v. "Garantie & service" */
	.benn-account__navitem--logout { border-top: 0; margin-top: 0 !important; padding-top: 0; }
	.benn-dash__cols { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
	.benn-dash__stats { grid-template-columns: repeat(2, 1fr); }
	/* Welkom-kaart: avatar + "Welkom terug" op rij 1, secure-regel eronder,
	   "Gegevens wijzigen" op een eigen regel (geen overlap meer). */
	.benn-dash__welcome { flex-wrap: wrap; align-items: center; gap: 14px 16px; }
	.benn-dash__welcome-txt { flex: 1 1 0; min-width: 0; }
	.benn-account .benn-dash__hello { font-size: 1.2rem !important; }
	.benn-dash__editbtn { flex-basis: 100%; margin-left: 0; justify-content: center; }
	.benn-dash__addr-grid { grid-template-columns: 1fr; }
	.benn-dash__rec-grid { grid-template-columns: 1fr 1fr; }
	.benn-dash__tr { grid-template-columns: 1fr auto; gap: 4px 10px; }
	.benn-dash__tr--head { display: none; }
	.benn-dash__tr > span:nth-child(2), .benn-dash__tr > span:nth-child(4) { font-size: .78rem; color: var(--benn-text-muted); }
	.benn-dash__tr .benn-dash__ordnr { grid-column: 1; }
	.benn-dash__tr > span:nth-child(5) { grid-row: 1 / 3; grid-column: 2; align-self: center; }
}

/* ==========================================================================
   FAVORIETEN / VERLANGLIJST — inc/favorites.php
   ========================================================================== */
/* Knop op de productpagina (in de rij met Vergelijken/Proefrit). Het is een
   <button>, dus de Elementor-kit-rood hard overschrijven. */
.benn-fav-add { display: inline-flex !important; align-items: center; gap: 7px; padding: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; color: var(--benn-text-muted) !important; font-family: var(--benn-font-body) !important; font-size: .92rem; font-weight: 400 !important; letter-spacing: 0 !important; text-transform: none !important; line-height: 1.2; cursor: pointer; transition: color var(--benn-transition); }
.benn-fav-add svg { flex: none; transition: fill .15s; }
.benn-fav-add:hover { color: var(--benn-primary) !important; }
.benn-fav-add.is-active { color: var(--benn-primary) !important; }
.benn-fav-add.is-active svg { fill: var(--benn-primary); }
.benn-fav-add:disabled { opacity: .6; cursor: default; }
/* Op de productpagina: favorieten als alleen-hartje, rechts in de secundaire-acties-rij. */
.benn-secondary-actions .benn-fav-add { margin-left: auto !important; padding: 4px !important; }
.benn-secondary-actions .benn-fav-add svg { width: 22px; height: 22px; }
.benn-secondary-actions .benn-fav-add__label { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Verlanglijst-pagina in het account */
.benn-favpage__title { margin: 0 0 18px; }
.benn-favgrid { display: flex; flex-direction: column; gap: 14px; }
.benn-favcard { position: relative; display: grid; grid-template-columns: 170px 1fr; gap: 22px; align-items: center; padding: 16px 20px; background: #fff; border: 1px solid var(--benn-border); border-radius: var(--benn-radius); box-shadow: var(--benn-shadow-sm); }
.benn-favcard__remove { position: absolute; top: 14px; right: 14px; z-index: 2; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0 !important; background: #fff !important; border: 1px solid var(--benn-border) !important; border-radius: 50% !important; color: var(--benn-primary) !important; box-shadow: none !important; cursor: pointer; transition: transform .12s; }
.benn-favcard__remove svg { fill: var(--benn-primary); }
.benn-favcard__remove:hover { transform: scale(1.08); }
.benn-favcard__img { display: block; }
.benn-favcard__img img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--benn-radius-sm); background: var(--benn-bg-alt); }
.benn-favcard__info { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; min-width: 0; padding-right: 44px; }
.benn-favcard__name { font-weight: 700; font-size: 1.05rem; line-height: 1.25; color: var(--benn-text); text-decoration: none; }
.benn-favcard__name:hover { color: var(--benn-primary); }
.benn-favcard__price { font-size: .95rem; color: var(--benn-text-body); }
.benn-favcard__cart { display: inline-flex; align-items: center; justify-content: center; align-self: flex-start; margin-top: 4px; padding: 11px 26px; background: var(--benn-primary) !important; color: #fff !important; border-radius: var(--benn-radius-sm); font-family: var(--benn-font-heading); font-weight: 700; font-size: .82rem; text-decoration: none; transition: background .15s; }
.benn-favcard__cart:hover { background: var(--benn-primary-hover, #c2050f) !important; }
@media (max-width: 600px) {
	.benn-favcard { grid-template-columns: 1fr; gap: 14px; }
	.benn-favcard__img img { aspect-ratio: 16 / 9; }
	.benn-favcard__info { padding-right: 0; }
}

/* ==========================================================================
   BESTELLINGEN-PAGINA (account) — myaccount/orders.php
   ========================================================================== */
.benn-orders__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-bottom: 20px; }
.benn-orders__stat { display: flex; align-items: center; gap: 16px; padding: 20px 24px; background: #fff; border: 1px solid var(--benn-border); border-radius: var(--benn-radius); box-shadow: var(--benn-shadow-sm); }
.benn-orders__stat-ic { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 54px; height: 54px; border-radius: 50%; }
.benn-orders__stat-ic--all { background: var(--benn-primary-soft, #fdecec); color: var(--benn-primary); }
.benn-orders__stat-ic--busy { background: #e7f0fb; color: #1f6fd6; }
.benn-orders__stat-ic--done { background: #e6f5ec; color: var(--benn-success, #16a34a); }
.benn-orders__stat-meta { display: flex; flex-direction: column; min-width: 0; }
.benn-orders__stat-label { font-size: .85rem; color: var(--benn-text-muted); }
.benn-orders__stat-num { font-family: var(--benn-font-heading); font-weight: 800; font-size: 1.7rem; line-height: 1.1; color: var(--benn-secondary, #1a1a1a); }
.benn-orders__stat-sub { font-size: .76rem; color: var(--benn-text-muted); }

.benn-orders__panel { padding: 18px 22px 8px; }
.benn-orders__toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 12px; }
.benn-orders__search { flex: 1 1 240px; display: flex; align-items: center; gap: 9px; height: 46px; padding: 0 14px; background: #fff; border: 1px solid var(--benn-border-strong, #d6d6d6); border-radius: var(--benn-radius-sm); color: var(--benn-text-muted); }
.benn-orders__search svg { flex: none; }
.benn-orders__searchinput { flex: 1 1 auto; width: 100%; min-width: 0; height: 100%; border: 0 !important; outline: 0; background: none !important; box-shadow: none !important; font-family: var(--benn-font-body); font-size: .92rem; color: var(--benn-text); }
/* Custom selects: native arrow uit, eigen pijltje (+ funnel bij status). !important
   verslaat kit/browser-defaults die de tekst lieten afkappen. */
.benn-orders__select { flex: 0 0 auto; appearance: none !important; -webkit-appearance: none !important; -moz-appearance: none !important; height: 46px !important; min-width: 172px; padding: 0 40px 0 16px !important; border: 1px solid var(--benn-border-strong, #d6d6d6) !important; border-radius: var(--benn-radius-sm) !important; background-color: #fff !important; background-repeat: no-repeat; background-position: right 14px center; background-size: 15px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23767676' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); font-family: var(--benn-font-body) !important; font-size: .9rem; color: var(--benn-text) !important; cursor: pointer; box-shadow: none !important; text-transform: none !important; }
.benn-orders__select:focus { outline: 0; border-color: var(--benn-primary) !important; box-shadow: 0 0 0 3px var(--benn-primary-soft, #fdecec) !important; }
.benn-orders__select--status { padding-left: 42px !important; min-width: 188px; background-position: right 14px center, left 15px center; background-size: 15px, 16px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23767676' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23767676' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 5h18l-7 8v5l-4 2v-7z'/%3E%3C/svg%3E"); }

.benn-orders__thead, .benn-orders__row { display: grid; grid-template-columns: 0.7fr 1.1fr 1fr 1.6fr auto; gap: 14px; align-items: center; }
.benn-orders__thead { padding: 14px 4px; border-bottom: 1px solid var(--benn-border); color: var(--benn-text-muted); font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.benn-orders__thead > span:last-child, .benn-orders__act { justify-self: end; }
.benn-orders__row { padding: 16px 4px; border-bottom: 1px solid var(--benn-border); font-size: .9rem; color: var(--benn-text-body); }
.benn-orders__row:last-child { border-bottom: 0; }
.benn-orders__order a { color: var(--benn-primary); font-weight: 700; text-decoration: none; }
.benn-orders__order a:hover { text-decoration: underline; }
.benn-orders__total { color: var(--benn-text); }
.benn-orders__items { color: var(--benn-text-muted); font-size: .82rem; }
.benn-orders__view { display: inline-flex; align-items: center; justify-content: center; padding: 9px 18px; background: var(--benn-primary) !important; color: #fff !important; border: 0 !important; border-radius: var(--benn-radius-sm); font-family: var(--benn-font-heading); font-weight: 700; font-size: .8rem; text-decoration: none; white-space: nowrap; transition: background .15s; }
.benn-orders__view:hover { background: var(--benn-primary-hover, #c2050f) !important; }
.benn-orders__noresults { padding: 34px 10px; text-align: center; color: var(--benn-text-muted); }

@media (max-width: 1024px) {
	.benn-orders__stats { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
	.benn-orders__toolbar { flex-wrap: wrap; }
	.benn-orders__search { flex: 1 1 100%; }
	.benn-orders__thead { display: none; }
	.benn-orders__row { grid-template-columns: 1fr auto; gap: 6px 12px; padding: 14px 2px; }
	.benn-orders__row > span { display: flex; align-items: center; gap: 8px; }
	.benn-orders__row > span::before { content: attr(data-label) ":"; color: var(--benn-text-muted); font-size: .78rem; min-width: 56px; }
	.benn-orders__order { grid-column: 1; }
	.benn-orders__act { grid-row: 1 / 4; grid-column: 2; align-self: center; }
	.benn-orders__act::before { content: none !important; }
}

/* ==========================================================================
   ACCOUNT — sidebar-wrapper + "Hulp nodig?"-kaart
   ========================================================================== */
.benn-account__side { display: flex; flex-direction: column; gap: 18px; }
.benn-account__help { padding: 20px; background: #fff; border: 1px solid var(--benn-border); border-radius: var(--benn-radius); box-shadow: var(--benn-shadow-sm); }
.benn-account__help-ic { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-bottom: 12px; border-radius: 50%; background: var(--benn-bg-alt); color: var(--benn-secondary); }
.benn-account__help-title { display: block; font-family: var(--benn-font-heading); font-size: 1rem; font-weight: 800; color: var(--benn-text); }
.benn-account__help-txt { display: block; margin: 4px 0 10px; font-size: .85rem; line-height: 1.5; color: var(--benn-text-muted); }
.benn-account__help-link { font-size: .88rem; font-weight: 700; color: var(--benn-primary); text-decoration: none; }
.benn-account__help-link:hover { text-decoration: underline; }

/* ==========================================================================
   ADRESSEN-PAGINA — myaccount/my-address.php
   ========================================================================== */
.benn-addr__head { display: flex; align-items: center; gap: 14px; padding: 20px 24px; margin-bottom: 18px; background: #fff; border: 1px solid var(--benn-border); border-radius: var(--benn-radius); box-shadow: var(--benn-shadow-sm); }
.benn-addr__head-ic { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; background: var(--benn-primary-soft, #fdecec); color: var(--benn-primary); }
.benn-addr__head-txt { flex: 1; min-width: 0; }
.benn-addr__head-txt p { margin: 3px 0 0; font-size: .88rem; color: var(--benn-text-muted); }
.benn-addr__add { display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border: 1.5px solid var(--benn-border-strong, #d6d6d6); border-radius: var(--benn-radius-sm); color: var(--benn-text); font-family: var(--benn-font-heading); font-weight: 700; font-size: .82rem; text-decoration: none; white-space: nowrap; transition: border-color .15s, color .15s; }
.benn-addr__add:hover { border-color: var(--benn-primary); color: var(--benn-primary); }
.benn-addr__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.benn-addr__card { padding: 22px; background: #fff; border: 1px solid var(--benn-border); border-radius: var(--benn-radius); box-shadow: var(--benn-shadow-sm); }
.benn-addr__card-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.benn-addr__card-ic { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--benn-primary-soft, #fdecec); color: var(--benn-primary); }
.benn-account .benn-addr__card-title { font-family: var(--benn-font-heading); font-size: 1.05rem !important; font-weight: 800; color: var(--benn-text); }
.benn-addr__badge { padding: 3px 10px; border-radius: 999px; background: var(--benn-primary-soft, #fdecec); color: var(--benn-primary); font-size: .7rem; font-weight: 700; }
.benn-addr__body { font-style: normal; font-size: .92rem; line-height: 1.7; color: var(--benn-text-body); margin: 0; }
.benn-addr__edit { display: inline-flex; align-items: center; gap: 7px; width: 100%; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--benn-border); color: var(--benn-primary); font-weight: 700; font-size: .85rem; text-decoration: none; }
.benn-addr__edit:hover { text-decoration: underline; }
@media (max-width: 680px) {
	.benn-addr__head { flex-wrap: wrap; }
	.benn-addr__add { margin-left: 62px; }
	.benn-addr__grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   ACCOUNTGEGEVENS — myaccount/form-edit-account.php
   ========================================================================== */
.benn-accform { padding: 28px 30px; background: #fff; border: 1px solid var(--benn-border); border-radius: var(--benn-radius); box-shadow: var(--benn-shadow-sm); }
.benn-account .benn-accform__legend { margin: 0 0 18px; font-family: var(--benn-font-heading); font-size: 1.2rem !important; font-weight: 800; line-height: 1.2 !important; color: var(--benn-secondary, #1a1a1a); }
.benn-accform__legend--pw { margin-top: 28px !important; padding-top: 24px; border-top: 1px solid var(--benn-border); }
.benn-accform__hint { display: block; margin-top: 6px; font-size: .8rem; color: var(--benn-text-muted); }
.benn-accform__actions { margin-top: 26px; }
.benn-accform__submit { padding: 14px 30px; background: var(--benn-primary) !important; color: #fff !important; border: 0 !important; border-radius: var(--benn-radius-sm); font-family: var(--benn-font-heading); font-weight: 800; font-size: .88rem; letter-spacing: .03em; text-transform: uppercase; cursor: pointer; box-shadow: none !important; transition: background .15s; }
.benn-accform__submit:hover { background: var(--benn-primary-hover, #c2050f) !important; }
/* Grijze (ghost) wachtwoord-oog in het account-formulier i.p.v. het rode knopje. */
.benn-pw__toggle--ghost { background: none !important; color: var(--benn-text-muted) !important; width: 34px !important; height: 34px !important; border-radius: 6px !important; }
.benn-pw__toggle--ghost:hover { background: none !important; color: var(--benn-text) !important; }
.benn-pw__toggle--ghost.is-on { background: none !important; color: var(--benn-primary) !important; }

/* ==========================================================================
   GARANTIE & SERVICE — inc/service.php (endpoint /mijn-account/garantie/)
   ========================================================================== */
.benn-service__head { margin-bottom: 18px; }
.benn-service__head p { margin: 4px 0 0; font-size: .92rem; color: var(--benn-text-muted); }
.benn-service__error { margin-bottom: 16px; padding: 13px 16px; background: var(--benn-primary-soft, #fdecec); border: 1px solid #f3c2c5; border-radius: var(--benn-radius-sm); color: var(--benn-primary); font-size: .9rem; }
/* selects in het service-formulier: native pijl uit, eigen chevron */
.benn-service__select { appearance: none !important; -webkit-appearance: none !important; -moz-appearance: none !important; padding-right: 40px !important; background-repeat: no-repeat !important; background-position: right 14px center !important; background-size: 15px !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23767676' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important; }
.benn-service textarea { min-height: 130px; }
/* bevestiging */
.benn-service__done { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; min-height: 300px; padding: 44px 24px; text-align: center; background: #fff; border: 1px solid var(--benn-border); border-radius: var(--benn-radius); box-shadow: var(--benn-shadow-sm); }
.benn-service__done-ic { display: inline-flex; align-items: center; justify-content: center; width: 74px; height: 74px; border-radius: 50%; background: #e6f5ec; color: var(--benn-success, #16a34a); }
.benn-account .benn-service__done-title { margin: 0; font-family: var(--benn-font-heading); font-size: 1.4rem !important; font-weight: 800; line-height: 1.2 !important; color: var(--benn-secondary, #1a1a1a); }
.benn-service__done-txt { margin: 0; color: var(--benn-text-muted); max-width: 440px; line-height: 1.5; }
.benn-service__done-btn { margin-top: 6px; padding: 13px 26px; background: var(--benn-primary) !important; color: #fff !important; border-radius: var(--benn-radius-sm); font-family: var(--benn-font-heading); font-weight: 700; font-size: .85rem; text-decoration: none; transition: background .15s; }
.benn-service__done-btn:hover { background: var(--benn-primary-hover, #c2050f) !important; }

/* ----- Garantie & service: rijke layout (header + kaarten + info-zijbalk) ----- */
.benn-service2__header { display: flex; align-items: center; gap: 16px; padding: 22px 24px; margin-bottom: 20px; background: #fff; border: 1px solid var(--benn-border); border-radius: var(--benn-radius); box-shadow: var(--benn-shadow-sm); }
.benn-service2__header-ic { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 50px; height: 50px; border-radius: 50%; background: var(--benn-primary-soft, #fdecec); color: var(--benn-primary); }
.benn-service2__header-txt { flex: 1; min-width: 0; }
.benn-service2__header-txt p { margin: 3px 0 0; font-size: .9rem; color: var(--benn-text-muted); }
.benn-service2__badge { flex: none; display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; background: #e6f5ec; color: var(--benn-success, #16a34a); border-radius: 999px; font-size: .82rem; font-weight: 700; white-space: nowrap; }

.benn-service2__grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 22px; align-items: stretch; }
.benn-service2__main { display: flex; flex-direction: column; gap: 18px; min-width: 0; }

.benn-service2__types { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.benn-service2__type { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 18px 16px; text-align: left; background: #fff !important; border: 1.5px solid var(--benn-border) !important; border-radius: var(--benn-radius) !important; box-shadow: none !important; color: var(--benn-text) !important; font-family: var(--benn-font-body) !important; text-transform: none !important; letter-spacing: 0 !important; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.benn-service2__type:hover { border-color: var(--benn-border-strong, #cfcfcf) !important; }
.benn-service2__type.is-active { border-color: var(--benn-primary) !important; box-shadow: inset 0 0 0 1px var(--benn-primary) !important; }
.benn-service2__type-ic { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--benn-primary-soft, #fdecec); color: var(--benn-primary); }
.benn-service2__type-name { font-family: var(--benn-font-heading); font-weight: 800; font-size: .95rem; color: var(--benn-text); }
.benn-service2__type-desc { font-size: .78rem; line-height: 1.35; font-weight: 400; color: var(--benn-text-muted); }
.benn-service2__type-check { position: absolute; top: 10px; right: 10px; display: none; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--benn-primary); color: #fff; }
.benn-service2__type.is-active .benn-service2__type-check { display: inline-flex; }

.benn-service2__form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; align-items: start; padding: 22px; background: #fff; border: 1px solid var(--benn-border); border-radius: var(--benn-radius); box-shadow: var(--benn-shadow-sm); grid-template-areas: "order type" "phone message" "file message" "submit message"; }
.benn-service2__col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.benn-service2__note { flex: 1; display: flex; flex-direction: column; padding: 18px 20px; background: var(--benn-bg-alt, #f6f7f9); border: 1px solid var(--benn-border); border-radius: var(--benn-radius); }
.benn-account .benn-service2__note-title { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-family: var(--benn-font-heading); font-size: .98rem !important; font-weight: 800; color: var(--benn-secondary, #1a1a1a); }
.benn-service2__note-title svg { flex: none; color: var(--benn-primary); }
.benn-service2__note-list { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.benn-service2__note-list li { position: relative; padding-left: 18px; font-size: .85rem; line-height: 1.4; color: var(--benn-text-body); }
.benn-service2__note-list li::before { content: ""; position: absolute; left: 2px; top: .5em; width: 6px; height: 6px; border-radius: 50%; background: var(--benn-primary); }
.benn-service2__note-foot { margin: auto 0 0; padding-top: 12px; border-top: 1px solid var(--benn-border); font-size: .82rem; line-height: 1.4; color: var(--benn-text-muted); }
.benn-service2__note-foot strong { color: var(--benn-text); white-space: nowrap; }
.benn-service2__f { margin: 0; }
.benn-service2__f--order { grid-area: order; }
.benn-service2__f--type { grid-area: type; }
.benn-service2__f--phone { grid-area: phone; }
.benn-service2__f--file { grid-area: file; }
.benn-service2__f--message { grid-area: message; display: flex; flex-direction: column; align-self: stretch; }
.benn-service2__f--submit { grid-area: submit; align-self: end; }
.benn-service2__f label { display: block; margin-bottom: 6px; font-size: .8rem; font-weight: 600; color: var(--benn-text-body); }
.benn-service2__f select, .benn-service2__f input[type="tel"] { width: 100%; height: 48px; border: 1px solid var(--benn-border-strong, #d6d6d6); border-radius: var(--benn-radius-sm); font-family: var(--benn-font-body); font-size: .95rem; color: var(--benn-text); background-color: #fff; }
.benn-service2__f input[type="tel"] { padding: 0 14px; }
.benn-service2__f select { padding-left: 14px; }
.benn-service2__f textarea { width: 100%; flex: 1; min-height: 172px; padding: 12px 14px; border: 1px solid var(--benn-border-strong, #d6d6d6); border-radius: var(--benn-radius-sm); font-family: var(--benn-font-body); font-size: .95rem; color: var(--benn-text); background: #fff; resize: vertical; }
.benn-service2__f input:focus, .benn-service2__f select:focus, .benn-service2__f textarea:focus { outline: 0; border-color: var(--benn-primary); box-shadow: 0 0 0 3px var(--benn-primary-soft, #fdecec); }

.benn-service2__drop { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1.5px dashed var(--benn-border-strong, #cfcfcf); border-radius: var(--benn-radius-sm); color: var(--benn-text-muted); cursor: pointer; transition: border-color .15s, background .15s; }
.benn-service2__drop:hover, .benn-service2__drop.is-drag { border-color: var(--benn-primary); background: var(--benn-primary-soft, #fdecec); }
.benn-service2__drop.has-file { border-style: solid; border-color: var(--benn-success, #16a34a); color: var(--benn-text); }
.benn-service2__drop svg { flex: none; }
.benn-service2__drop-txt { font-size: .85rem; line-height: 1.3; }
.benn-service2__drop-txt small { display: block; font-size: .75rem; color: var(--benn-text-muted); }
.benn-service2__submit { display: inline-flex !important; align-items: center; gap: 9px; }
.benn-service2__submit svg { flex: none; }

.benn-service2__info { display: flex; flex-direction: column; gap: 16px; }
.benn-service2__infocard { padding: 20px; background: #fff; border: 1px solid var(--benn-border); border-radius: var(--benn-radius); box-shadow: var(--benn-shadow-sm); }
.benn-account .benn-service2__infotitle { margin: 0 0 14px; font-family: var(--benn-font-heading); font-size: 1.02rem !important; font-weight: 800; color: var(--benn-secondary, #1a1a1a); }
.benn-service2__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 13px; }
.benn-service2__list--check li, .benn-service2__list--guar li { display: flex; align-items: flex-start; gap: 10px; font-size: .85rem; line-height: 1.4; color: var(--benn-text-body); }
.benn-service2__li-ic { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%; background: var(--benn-primary); color: #fff; }
.benn-service2__g-ic { flex: none; margin-top: 1px; color: var(--benn-primary); }
.benn-service2__list--contact li { display: flex; align-items: center; gap: 12px; }
.benn-service2__c-ic { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: var(--benn-primary-soft, #fdecec); color: var(--benn-primary); }
.benn-service2__list--contact li > span:last-child { display: flex; flex-direction: column; }
.benn-service2__list--contact strong { font-size: .9rem; color: var(--benn-text); }
.benn-service2__list--contact small { font-size: .78rem; color: var(--benn-text-muted); }

@media (max-width: 1100px) {
	.benn-service2__grid { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
	.benn-service2__header { flex-wrap: wrap; }
	.benn-service2__types { grid-template-columns: 1fr 1fr; }
	.benn-service2__form { grid-template-columns: 1fr; grid-template-rows: none; grid-template-areas: "order" "type" "phone" "file" "message" "submit"; }
	.benn-service2__f--message textarea { min-height: 140px; }
}
@media (max-width: 420px) {
	.benn-service2__types { grid-template-columns: 1fr; }
}

/* =========================================================================
 *  PRODUCTBESCHRIJVING — gestileerde "Beschrijving"-tab (.benn-pdesc)
 * ====================================================================== */
.benn-pdesc { color: var(--benn-text); }
.benn-pdesc__eyebrow { display: inline-block; margin-bottom: 8px; font-family: var(--benn-font-heading); font-weight: var(--benn-fw-bold); font-size: var(--benn-fs-xs, .75rem); letter-spacing: var(--benn-ls-eyebrow, .12em); text-transform: uppercase; color: var(--benn-primary); }
.benn-pdesc__heading { font-family: var(--benn-font-heading); font-weight: var(--benn-fw-bold); color: var(--benn-text); margin: 0 0 14px; line-height: var(--benn-lh-heading); }
.benn-pdesc__lead { max-width: 72ch; margin: 0 0 16px; font-size: clamp(1.02rem, 1.6vw, 1.15rem); line-height: 1.6; color: var(--benn-text); font-weight: var(--benn-fw-medium); }
/* De tab-panel-regel voor h2 is sterker (0,3,2); scoped overrulen. */
.woocommerce div.product .woocommerce-Tabs-panel .benn-pdesc__heading { font-size: clamp(1.3rem, 2.4vw, 1.7rem); }
.woocommerce div.product .woocommerce-Tabs-panel .benn-pdesc__specs-heading { font-size: clamp(1.25rem, 2.2vw, 1.55rem); }
.benn-pdesc__body { max-width: 72ch; color: var(--benn-text-muted); line-height: 1.7; }
.benn-pdesc__body p { margin: 0 0 1em; }
.benn-pdesc__body p:last-child { margin-bottom: 0; }
.benn-pdesc__body a { color: var(--benn-primary); text-decoration: underline; }

/* Uitgelichte blokken */
.benn-pdesc__features { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 6px; margin: 30px 0 0; padding: 24px; background: var(--benn-bg-muted); border-radius: var(--benn-radius-lg); }
.benn-pdesc__feature { display: flex; gap: 14px; padding: 6px 22px; align-items: flex-start; position: relative; }
.benn-pdesc__feature + .benn-pdesc__feature::before { content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 1px; background: var(--benn-border); }
.benn-pdesc__feature-ic { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: #fff; color: var(--benn-primary); box-shadow: var(--benn-shadow-sm); }
.benn-pdesc__feature-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.benn-pdesc__feature-title { font-family: var(--benn-font-heading); font-weight: var(--benn-fw-semibold); font-size: .98rem; color: var(--benn-text); }
.benn-pdesc__feature-desc { font-size: var(--benn-fs-sm); color: var(--benn-text-muted); line-height: 1.5; }

/* Specificaties-grid */
.benn-pdesc__specs-wrap { margin-top: 38px; }
.benn-pdesc__specs-heading { font-family: var(--benn-font-heading); font-weight: var(--benn-fw-bold); color: var(--benn-text); margin: 0 0 18px; }
.benn-pdesc__specs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 16px; }
.benn-pdesc__spec { display: flex; align-items: center; gap: 14px; min-width: 0; padding: 14px 18px; border: 1px solid var(--benn-border); border-radius: var(--benn-radius); background: var(--benn-bg); }
.benn-pdesc__spec-ic { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; background: var(--benn-primary-soft); color: var(--benn-primary); }
.benn-pdesc__spec-label { min-width: 0; font-family: var(--benn-font-heading); font-weight: var(--benn-fw-semibold); font-size: .92rem; color: var(--benn-text); overflow-wrap: anywhere; }
.benn-pdesc__spec-val { margin-left: auto; padding-left: 12px; min-width: 0; text-align: right; font-size: var(--benn-fs-sm); color: var(--benn-text-muted); overflow-wrap: anywhere; }

/* Contact-CTA */
.benn-pdesc__cta { display: flex; align-items: center; gap: 18px; margin-top: 36px; padding: 22px 26px; background: var(--benn-bg-muted); border-radius: var(--benn-radius-lg); }
.benn-pdesc__cta-ic { flex: none; width: 50px; height: 50px; display: grid; place-items: center; border-radius: 50%; background: #fff; color: var(--benn-primary); box-shadow: var(--benn-shadow-sm); }
.benn-pdesc__cta-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.benn-pdesc__cta-txt strong { font-family: var(--benn-font-heading); font-weight: var(--benn-fw-bold); font-size: 1.05rem; color: var(--benn-text); }
.benn-pdesc__cta-txt span { font-size: var(--benn-fs-sm); color: var(--benn-text-muted); }
.benn-pdesc a.benn-pdesc__cta-btn { margin-left: auto; flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; border: 2px solid var(--benn-primary); border-radius: var(--benn-radius-pill); color: var(--benn-primary); font-family: var(--benn-font-heading); font-weight: var(--benn-fw-bold); font-size: .9rem; letter-spacing: .02em; text-transform: uppercase; text-decoration: none; transition: background .15s ease, color .15s ease; }
.benn-pdesc a.benn-pdesc__cta-btn:hover { background: var(--benn-primary); color: var(--benn-text-invert); }

@media (max-width: 860px) {
	.benn-pdesc__features { grid-template-columns: 1fr; gap: 4px; padding: 18px; }
	.benn-pdesc__feature { padding: 12px 4px; }
	.benn-pdesc__feature + .benn-pdesc__feature::before { left: 4px; right: 4px; top: 0; bottom: auto; width: auto; height: 1px; }
	.benn-pdesc__specs { grid-template-columns: 1fr; }
	.benn-pdesc__cta { flex-wrap: wrap; }
	.benn-pdesc a.benn-pdesc__cta-btn { margin-left: 0; width: 100%; justify-content: center; }
}
@media (max-width: 480px) {
	.benn-pdesc__spec { flex-wrap: wrap; }
	.benn-pdesc__spec-val { margin-left: 54px; padding-left: 0; text-align: left; }
}

/* Retour — voorwaardenblok + toelichting-hint */
.benn-returns__terms { margin: 16px 0 22px; padding: 16px 20px; background: var(--benn-primary-soft); border: 1px solid rgba(0, 0, 0, .06); border-radius: var(--benn-radius); }
.benn-returns__terms-title { display: flex; align-items: center; gap: 8px; color: var(--benn-primary-dark, var(--benn-primary)); font-family: var(--benn-font-heading); font-weight: var(--benn-fw-bold); font-size: .98rem; margin-bottom: 10px; }
.benn-returns__terms-title svg { flex: none; }
.benn-returns__terms ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 7px; }
.benn-returns__terms li { position: relative; padding-left: 20px; font-size: var(--benn-fs-sm); color: var(--benn-text); line-height: 1.5; }
.benn-returns__terms li::before { content: ""; position: absolute; left: 3px; top: .55em; width: 6px; height: 6px; border-radius: 50%; background: var(--benn-primary); }
.benn-returns__terms li strong { font-weight: var(--benn-fw-semibold); color: var(--benn-text); }
.benn-returns__hint { display: block; margin-top: 6px; font-size: var(--benn-fs-xs, .8rem); color: var(--benn-text-muted); }


/* ==========================================================================
   BIKEPORT WHITE BACKGROUND & BENNFIETSEN EXACT DETAILS OVERRIDES
   ========================================================================== */
body.woocommerce-checkout,
body.woocommerce-cart,
.bp-checkout-wrapper,
.benn-checkout {
	background-color: #ffffff !important;
}

/* Breadcrumb styling */
.benn-cart-breadcrumb {
	font-size: 13px !important;
	color: #666666 !important;
	margin-bottom: 10px !important;
}
.benn-cart-breadcrumb a {
	color: #666666 !important;
	text-decoration: none !important;
}
.benn-cart-breadcrumb__current {
	color: #1e1e1e !important;
	font-weight: 700 !important;
}

/* Page Title 'Afrekenen' */
.benn-cart-title {
	font-family: var(--bp-font-body) !important;
	font-size: 38px !important;
	font-weight: 800 !important;
	color: #1e1e1e !important;
	margin-bottom: 30px !important;
	letter-spacing: -0.5px !important;
}

/* 3-Step Progress Bar */
.benn-checkout__steps {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	position: relative !important;
	margin-bottom: 36px !important;
	padding-bottom: 10px !important;
}

.benn-step__num {
	width: 24px !important;
	height: 24px !important;
	border-radius: 50% !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	background-color: #e5e5e5 !important;
	color: #777777 !important;
}

.benn-step.is-active .benn-step__num {
	background-color: #d93838 !important;
	color: #ffffff !important;
}

.benn-step__label {
	font-size: 14px !important;
	font-weight: 700 !important;
	color: #1e1e1e !important;
	margin-left: 8px !important;
}

.benn-step:not(.is-active) .benn-step__label {
	color: #777777 !important;
	font-weight: 600 !important;
}

.benn-step__line {
	flex: 1 !important;
	height: 1px !important;
	background-color: #e0e0e0 !important;
	margin: 0 20px !important;
}

/* Form Cards */
.benn-cocard {
	background: #ffffff !important;
	border: 1px solid #e2e2e2 !important;
	border-radius: 12px !important;
	padding: 28px 32px !important;
	margin-bottom: 24px !important;
	box-shadow: 0 2px 8px rgba(0,0,0,0.01) !important;
}

.benn-cocard__title {
	font-family: var(--bp-font-body) !important;
	font-size: 18px !important;
	font-weight: 700 !important;
	color: #1e1e1e !important;
}

.benn-cocard__sub {
	font-size: 13px !important;
	color: #666666 !important;
}

.benn-login-link.showlogin strong {
	color: #d93838 !important;
	font-weight: 700 !important;
}

/* Form Controls */
.woocommerce-checkout input[type='text'],
.woocommerce-checkout input[type='email'],
.woocommerce-checkout input[type='tel'],
.woocommerce-checkout textarea,
.woocommerce-checkout select {
	border: 1px solid #e0e0e0 !important;
	border-radius: 8px !important;
	padding: 12px 16px !important;
	font-size: 14px !important;
	background-color: #ffffff !important;
}

/* Sticky Sidebar Bestelsamenvatting */
.benn-checkout__aside,
.benn-cosum-wrap,
.benn-cosum {
	background-color: #f7f7f7 !important;
	border: 1px solid #e8e8e8 !important;
	border-radius: 14px !important;
	padding: 28px 24px !important;
}

.benn-cosum__title {
	font-family: var(--bp-font-body) !important;
	font-size: 20px !important;
	font-weight: 700 !important;
	color: #1e1e1e !important;
	margin-bottom: 20px !important;
}

.benn-cosum__remove {
	color: #d93838 !important;
	font-weight: 700 !important;
	font-size: 11px !important;
	letter-spacing: 0.5px !important;
	text-transform: uppercase !important;
}

.benn-cosum__free {
	color: #008a00 !important;
	font-weight: 700 !important;
}

.benn-cosum__total-val {
	font-size: 22px !important;
	font-weight: 800 !important;
	color: #1e1e1e !important;
}

.benn-cosum__btn {
	background-color: var(--bp-green-dark) !important;
	border-radius: 8px !important;
}

.benn-cosum__btn:hover {
	background-color: var(--bp-green-hover) !important;
}


/* ==========================================================================
   PIXEL-PERFECT RIGHT SIDEBAR CARD (BESTELSAMENVATTING) OVERRIDES
   ========================================================================== */
.benn-checkout__aside {
	background-color: #f4f4f4 !important;
	border-radius: 16px !important;
	padding: 16px !important;
	box-sizing: border-box !important;
}

.benn-cosum-wrap,
.benn-cosum {
	background-color: #ffffff !important;
	border: 1px solid #e5e5e5 !important;
	border-radius: 12px !important;
	padding: 24px 24px 28px 24px !important;
	box-shadow: 0 2px 10px rgba(0,0,0,0.02) !important;
	box-sizing: border-box !important;
}

.benn-cosum__title {
	font-family: var(--bp-font-body) !important;
	font-size: 20px !important;
	font-weight: 800 !important;
	color: #0a0a0a !important;
	margin: 0 0 24px 0 !important;
	letter-spacing: -0.3px !important;
}

/* Product Item Row */
.benn-cosum__item {
	display: grid !important;
	grid-template-columns: 64px 1fr auto !important;
	grid-template-rows: auto auto !important;
	gap: 6px 14px !important;
	align-items: start !important;
	padding-bottom: 20px !important;
	border-bottom: 1px solid #ececec !important;
	margin-bottom: 20px !important;
}

.benn-cosum__thumb {
	grid-column: 1 !important;
	grid-row: 1 / span 2 !important;
	width: 64px !important;
	height: 64px !important;
	border-radius: 6px !important;
	overflow: hidden !important;
	background: #f9f9f9 !important;
}

.benn-cosum__thumb img {
	width: 100% !important;
	height: 100% !important;
	object-fit: contain !important;
}

.benn-cosum__info {
	grid-column: 2 !important;
	grid-row: 1 !important;
}

.benn-cosum__name {
	font-family: var(--bp-font-body) !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	color: #0a0a0a !important;
	line-height: 1.35 !important;
	display: block !important;
}

.benn-cosum__price {
	grid-column: 3 !important;
	grid-row: 1 !important;
	font-family: var(--bp-font-body) !important;
	font-size: 15px !important;
	font-weight: 800 !important;
	color: #0a0a0a !important;
	text-align: right !important;
}

.benn-cosum__actions {
	grid-column: 2 / span 2 !important;
	grid-row: 2 !important;
	display: flex !important;
	align-items: center !important;
	gap: 12px !important;
	margin-top: 6px !important;
}

/* Stepper Quantity Control [- 1 +] */
.benn-cosum__qty {
	display: inline-flex !important;
	align-items: center !important;
	border: 1px solid #e0e0e0 !important;
	border-radius: 6px !important;
	overflow: hidden !important;
	background: #f8f8f8 !important;
}

.benn-cosum__qtybtn {
	width: 30px !important;
	height: 30px !important;
	background: #f2f2f2 !important;
	border: none !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	color: #333333 !important;
	cursor: pointer !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	transition: background-color 0.2s ease !important;
	padding: 0 !important;
}

.benn-cosum__qtybtn:hover {
	background-color: #e5e5e5 !important;
}

.benn-cosum__qtyval {
	width: 32px !important;
	height: 30px !important;
	background: #ffffff !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	color: #0a0a0a !important;
	border-left: 1px solid #e0e0e0 !important;
	border-right: 1px solid #e0e0e0 !important;
}

.benn-cosum__remove {
	color: #d9001b !important;
	font-family: var(--bp-font-body) !important;
	font-size: 11px !important;
	font-weight: 800 !important;
	letter-spacing: 0.6px !important;
	text-transform: uppercase !important;
	background: none !important;
	border: none !important;
	cursor: pointer !important;
	padding: 0 !important;
	margin-left: 6px !important;
}

.benn-cosum__remove:hover {
	text-decoration: underline !important;
}

/* Totals Rows */
.benn-cosum__totals {
	margin-bottom: 20px !important;
	border-bottom: 1px solid #ececec !important;
	padding-bottom: 16px !important;
}

.benn-cosum__row {
	display: flex !important;
	justify-content: space-between !important;
	align-items: flex-start !important;
	margin-bottom: 14px !important;
	font-size: 15px !important;
	color: #666666 !important;
}

.benn-cosum__row span:first-child {
	color: #666666 !important;
	font-weight: 400 !important;
}

.benn-cosum__row .benn-cosum__val {
	color: #0a0a0a !important;
	font-weight: 700 !important;
	text-align: right !important;
}

.benn-cosum__ship-label small {
	display: block !important;
	font-size: 12px !important;
	color: #888888 !important;
	margin-top: 2px !important;
}

.benn-cosum__free {
	color: #009944 !important;
	font-weight: 700 !important;
}

/* Total (incl. btw) Row */
.benn-cosum__total {
	display: flex !important;
	justify-content: space-between !important;
	align-items: center !important;
	padding: 16px 0 !important;
	border-bottom: 1px solid #ececec !important;
	margin-bottom: 18px !important;
}

.benn-cosum__total span:first-child {
	font-size: 16px !important;
	font-weight: 800 !important;
	color: #0a0a0a !important;
}

.benn-cosum__total-val {
	font-size: 22px !important;
	font-weight: 900 !important;
	color: #0a0a0a !important;
}

/* Coupon Accordion */
.benn-cosum__coupon {
	border-bottom: 1px solid #ececec !important;
	padding-bottom: 18px !important;
	margin-bottom: 22px !important;
}

.benn-cosum__coupon-head {
	display: flex !important;
	justify-content: space-between !important;
	align-items: center !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	color: #0a0a0a !important;
	cursor: pointer !important;
	list-style: none !important;
}

.benn-cosum__coupon-head::-webkit-details-marker {
	display: none !important;
}

/* Trust Badges in Circle Icons */
.benn-cotrust {
	list-style: none !important;
	margin: 0 0 24px 0 !important;
	padding: 0 !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 16px !important;
}

.benn-cotrust__item {
	display: flex !important;
	align-items: center !important;
	gap: 14px !important;
}

.benn-cotrust__ic {
	width: 38px !important;
	height: 38px !important;
	border-radius: 50% !important;
	background-color: #f2f2f2 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	color: #333333 !important;
	flex-shrink: 0 !important;
}

.benn-cotrust__ic svg {
	width: 20px !important;
	height: 20px !important;
	stroke: #333333 !important;
}

.benn-cotrust__txt strong {
	display: block !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	color: #0a0a0a !important;
	line-height: 1.25 !important;
}

.benn-cotrust__txt small {
	display: block !important;
	font-size: 12px !important;
	color: #777777 !important;
	margin-top: 2px !important;
}

/* Place Order Submit Button */
.benn-cosum__btn {
	width: 100% !important;
	background-color: var(--bp-green-dark) !important;
	color: #ffffff !important;
	border-radius: 8px !important;
	padding: 16px 20px !important;
	font-size: 16px !important;
	font-weight: 700 !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 4px !important;
	border: none !important;
	cursor: pointer !important;
	transition: background-color 0.2s ease !important;
	box-shadow: 0 4px 14px rgba(0,0,0,0.1) !important;
}

.benn-cosum__btn:hover {
	background-color: var(--bp-green-hover) !important;
}

.benn-cosum__btn-txt {
	font-size: 16px !important;
	font-weight: 700 !important;
	color: #ffffff !important;
}

.benn-cosum__btn-sub {
	font-size: 11px !important;
	font-weight: 400 !important;
	color: rgba(255,255,255,0.85) !important;
}


/* ==========================================================================
   SINGLE GREY OUTER CONTAINER & WIDER INNER CONTENT (NO DOUBLE WHITE MARGIN)
   ========================================================================== */
.benn-checkout__aside {
	background-color: #f5f5f5 !important;
	border-radius: 14px !important;
	padding: 20px !important;
	border: 1px solid #e8e8e8 !important;
	box-shadow: none !important;
	margin: 0 !important;
	box-sizing: border-box !important;
	width: 100% !important;
}

.benn-cosum-wrap,
.benn-cosum {
	background-color: #ffffff !important;
	border: 1px solid #e2e2e2 !important;
	border-radius: 12px !important;
	padding: 24px 24px 28px 24px !important;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02) !important;
	box-sizing: border-box !important;
	width: 100% !important;
	margin: 0 !important;
}

/* Wider product details */
.benn-cosum__item {
	display: grid !important;
	grid-template-columns: 68px 1fr auto !important;
	grid-template-rows: auto auto !important;
	gap: 6px 16px !important;
	align-items: center !important;
	padding-bottom: 20px !important;
	border-bottom: 1px solid #ececec !important;
	margin-bottom: 20px !important;
}

.benn-cosum__thumb {
	width: 68px !important;
	height: 68px !important;
	border-radius: 8px !important;
}


/* ==========================================================================
   REMOVE INNER WHITE CARD LAYER — GREY CONTAINER ONLY
   ========================================================================== */
.benn-checkout__aside {
	background-color: #f5f5f5 !important;
	border: 1px solid #e8e8e8 !important;
	border-radius: 16px !important;
	padding: 32px 28px !important;
	box-shadow: none !important;
	margin: 0 !important;
	box-sizing: border-box !important;
	width: 100% !important;
}

.benn-cosum-wrap,
.benn-cosum {
	background: transparent !important;
	border: none !important;
	border-radius: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	box-shadow: none !important;
	width: 100% !important;
}

/* Ensure stepper quantity controls maintain white background on grey box */
.benn-cosum__qtyval {
	background-color: #ffffff !important;
}


/* ==========================================================================
   EXACT 2-LAYER STRUCTURE: 1 GRIJS VAK + 1 WIT VAK MET INHOUD
   ========================================================================== */
body.woocommerce-checkout,
body.woocommerce-cart,
.bp-checkout-wrapper,
.benn-checkout {
	background-color: #ffffff !important;
}

/* Right Column Outer: 1 Grijs Vak */
.benn-checkout__aside {
	background-color: #f4f4f4 !important;
	border: 1px solid #eaeaea !important;
	border-radius: 16px !important;
	padding: 16px !important;
	box-shadow: none !important;
	margin: 0 !important;
	box-sizing: border-box !important;
	width: 100% !important;
}

/* Right Column Inner: 1 Wit Vak met de Inhoud */
.benn-cosum-wrap,
.benn-cosum {
	background-color: #ffffff !important;
	border: 1px solid #e2e2e2 !important;
	border-radius: 12px !important;
	padding: 24px 20px 28px 20px !important;
	box-shadow: 0 2px 8px rgba(0,0,0,0.02) !important;
	box-sizing: border-box !important;
	width: 100% !important;
	margin: 0 !important;
}

/* Product Item Row Layout inside White Card */
.benn-cosum__title {
	font-family: var(--bp-font-body) !important;
	font-size: 20px !important;
	font-weight: 800 !important;
	color: #0a0a0a !important;
	margin: 0 0 20px 0 !important;
	letter-spacing: -0.3px !important;
}

.benn-cosum__item {
	display: grid !important;
	grid-template-columns: 64px 1fr auto !important;
	grid-template-rows: auto auto !important;
	gap: 6px 12px !important;
	align-items: start !important;
	padding-bottom: 18px !important;
	border-bottom: 1px solid #ececec !important;
	margin-bottom: 18px !important;
}

.benn-cosum__thumb {
	grid-column: 1 !important;
	grid-row: 1 / span 2 !important;
	width: 64px !important;
	height: 64px !important;
	border-radius: 6px !important;
	overflow: hidden !important;
	background: #f9f9f9 !important;
}

.benn-cosum__thumb img {
	width: 100% !important;
	height: 100% !important;
	object-fit: contain !important;
}

.benn-cosum__name {
	font-family: var(--bp-font-body) !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	color: #0a0a0a !important;
	line-height: 1.35 !important;
}

.benn-cosum__price {
	font-family: var(--bp-font-body) !important;
	font-size: 15px !important;
	font-weight: 800 !important;
	color: #0a0a0a !important;
	text-align: right !important;
}

.benn-cosum__actions {
	grid-column: 2 / span 2 !important;
	grid-row: 2 !important;
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	margin-top: 4px !important;
}

/* Stepper Quantity Control [- 1 +] */
.benn-cosum__qty {
	display: inline-flex !important;
	align-items: center !important;
	border: 1px solid #e0e0e0 !important;
	border-radius: 6px !important;
	overflow: hidden !important;
	background: #f8f8f8 !important;
}

.benn-cosum__qtybtn {
	width: 28px !important;
	height: 28px !important;
	background: #f2f2f2 !important;
	border: none !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	color: #333333 !important;
	cursor: pointer !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 0 !important;
}

.benn-cosum__qtyval {
	width: 30px !important;
	height: 28px !important;
	background: #ffffff !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	color: #0a0a0a !important;
	border-left: 1px solid #e0e0e0 !important;
	border-right: 1px solid #e0e0e0 !important;
}

.benn-cosum__remove {
	color: #d9001b !important;
	font-family: var(--bp-font-body) !important;
	font-size: 11px !important;
	font-weight: 800 !important;
	letter-spacing: 0.5px !important;
	text-transform: uppercase !important;
	background: none !important;
	border: none !important;
	cursor: pointer !important;
	padding: 0 !important;
	margin-left: 6px !important;
}

/* Trust Badges in Circle Icons */
.benn-cotrust {
	list-style: none !important;
	margin: 20px 0 !important;
	padding: 0 !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 14px !important;
}

.benn-cotrust__item {
	display: flex !important;
	align-items: center !important;
	gap: 12px !important;
}

.benn-cotrust__ic {
	width: 36px !important;
	height: 36px !important;
	border-radius: 50% !important;
	background-color: #f2f2f2 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	color: #333333 !important;
	flex-shrink: 0 !important;
}

.benn-cotrust__ic svg {
	width: 18px !important;
	height: 18px !important;
	stroke: #333333 !important;
}

.benn-cotrust__txt strong {
	display: block !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	color: #0a0a0a !important;
}

.benn-cotrust__txt small {
	display: block !important;
	font-size: 12px !important;
	color: #777777 !important;
}


/* ==========================================================================
   CONTENTBREEDTE EN HUISKLEUREN VOOR DE WINKELPAGINA'S

   Dit bestand rekende overal met --benn-container, --benn-primary en zo, maar
   die variabelen waren nergens gedefinieerd. Een declaratie met een onbekende
   variabele valt weg, dus max-width kwam nooit aan: de afrekenpagina liep van
   schermrand tot schermrand terwijl header en footer netjes op 1450px zaten.

   Hieronder krijgen ze de waarden van de rest van de site. Dat werkt door op
   alle zes de plekken waar ze gebruikt worden: shop, winkelmand, afrekenen,
   productpagina en account.
   ========================================================================== */
:root {
	--benn-container: 1450px;
	--benn-container-pad: 60px;

	--benn-primary: #143525;
	--benn-primary-hover: #1d4a34;
	--benn-secondary: #143525;
	--benn-accent: #e2b774;

	/* Goud op wit haalt geen leesbaar contrast (1,9:1), dus voor tekst een
	   donkerdere tint van dezelfde kleur. */
	--benn-accent-tekst: #b8873f;

	--benn-text: #1e1e1e;
	--benn-text-zacht: #6b7280;
	--benn-border: #e6e3dc;
	--benn-vlak: #f7f5f0;

	/* Waarschuwingen blijven herkenbaar rood, maar dieper zodat ze niet uit
	   de rest van de pagina springen. */
	--benn-fout: #a3342b;
}

/* De omhullende div van de afrekenpagina zat nog buiten de contentbreedte. */
.bp-checkout-container,
.bp-cart-container {
	max-width: var(--benn-container);
	width: 100%;
	margin-inline: auto;
	padding-inline: var(--benn-container-pad);
	box-sizing: border-box;
}

/* --- Stappenbalk ---------------------------------------------------------- */
.benn-step__num {
	background-color: var(--benn-border) !important;
	color: var(--benn-text-zacht) !important;
	font-weight: 700;
}

.benn-step.is-active .benn-step__num {
	background-color: var(--benn-primary) !important;
	color: #ffffff !important;
}

.benn-step.is-done .benn-step__num,
.benn-step.is-complete .benn-step__num {
	background-color: var(--benn-accent) !important;
	color: var(--benn-primary) !important;
}

.benn-step__label {
	color: var(--benn-text-zacht) !important;
}

.benn-step.is-active .benn-step__label {
	color: var(--benn-primary) !important;
	font-weight: 700;
}

.benn-step__line {
	background-color: var(--benn-border) !important;
}

/* --- Meldingen ------------------------------------------------------------ */
.woocommerce-message,
.woocommerce-info {
	background-color: var(--benn-vlak) !important;
	border-left: 3px solid var(--benn-accent) !important;
	color: var(--benn-primary) !important;
}

.woocommerce-error {
	background-color: #fbf4f3 !important;
	border-left: 3px solid var(--benn-fout) !important;
	color: var(--benn-text) !important;
}

.woocommerce-error strong,
.woocommerce-error li strong {
	color: var(--benn-fout) !important;
}

/* --- Knoppen: reset.css kleurt elke knop en link #cc3366 --------------------
   Datzelfde roze dook eerder al op bij de hamburger en het logo. */
.woocommerce .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce-message .button,
.benn-checkout .button {
	background-color: var(--benn-primary) !important;
	border-color: var(--benn-primary) !important;
	color: #ffffff !important;
}

.woocommerce .button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce-message .button:hover,
.benn-checkout .button:hover {
	background-color: var(--benn-primary-hover) !important;
	border-color: var(--benn-primary-hover) !important;
	color: #ffffff !important;
}

/* --- Verwijderen: was fel rood, wordt ingetogen tot je erover gaat --------- */
.benn-cosum__remove,
.woocommerce a.remove,
.product-remove a {
	color: var(--benn-text-zacht) !important;
	background: none !important;
}

.benn-cosum__remove:hover,
.woocommerce a.remove:hover,
.product-remove a:hover {
	color: var(--benn-fout) !important;
	background: none !important;
}

/* --- Verplichte velden ---------------------------------------------------- */
.required,
.woocommerce form .form-row .required {
	color: var(--benn-fout) !important;
	text-decoration: none !important;
}

/* --- Invoervelden: groene rand bij focus in plaats van de browserblauw ----- */
.benn-fields input:focus,
.benn-fields select:focus,
.benn-fields textarea:focus,
.woocommerce form .form-row input:focus,
.woocommerce form .form-row select:focus,
.woocommerce form .form-row textarea:focus {
	border-color: var(--benn-primary) !important;
	outline: none;
	box-shadow: 0 0 0 3px rgba(20, 53, 37, 0.12) !important;
}

/* --- Koppen en prijzen in het huisgroen ----------------------------------- */
.benn-cart-title,
.benn-cocard__title,
.benn-cosum__title {
	color: var(--benn-primary) !important;
}

.benn-checkout a:not(.button):not(.remove) {
	color: var(--benn-primary);
}

.benn-checkout a:not(.button):not(.remove):hover {
	color: var(--benn-accent-tekst);
}

/* Zijruimte meeschalen. Op 375px bleef er met 60px aan weerszijden nog maar
   255px inhoud over, en liepen de kaarten 30 tot 46px buiten beeld -- niet
   zichtbaar, want de body clipt horizontaal, maar wel afgesneden. */
@media (max-width: 1024px) {
	:root {
		--benn-container-pad: 32px;
	}
}

@media (max-width: 767px) {
	:root {
		--benn-container-pad: 20px;
	}

	/* Het raster krimpt niet vanzelf: rastercellen staan standaard op
	   min-width:auto, dus de kolom werd zo breed als zijn inhoud (377px in
	   een container van 335px). Met min-width:0 mag hij wel kleiner worden. */
	.benn-checkout__grid {
		grid-template-columns: 1fr !important;
	}

	.benn-checkout__grid > *,
	.benn-checkout__main,
	.benn-checkout__aside {
		min-width: 0 !important;
		width: 100% !important;
		max-width: 100% !important;
	}

	/* Stappenbalk paste met 420px niet in 335px. Als flexrij bleef hij
	   overlopen: justify-content:space-between en de meegroeiende
	   verbindingslijnen bleven om dezelfde ruimte vechten. Een raster van
	   drie gelijke kolommen kan per definitie niet overlopen. */
	.benn-checkout__steps {
		display: grid !important;
		grid-template-columns: repeat(3, 1fr) !important;
		gap: 8px !important;
		justify-content: stretch !important;
	}

	.benn-step {
		min-width: 0;
		justify-content: center;
	}

	.benn-step__label {
		font-size: 12px !important;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	/* De lijnen tussen de stappen vallen weg; in drie kolommen is de volgorde
	   ook zonder streep duidelijk. */
	.benn-step__line {
		display: none !important;
	}
}

/* Ruimte onder de header. De bestaande regel hiervoor mikt op
   body.woocommerce-checkout main.site-main, maar dit sjabloon rendert
   .bp-checkout-wrapper zonder main.site-main -- de kruimelbalk begon daardoor
   op exact de onderkant van de balk, zonder een pixel ertussen. */
.bp-checkout-wrapper,
.bp-cart-wrapper {
	padding-top: 48px;
	padding-bottom: 80px;
}

@media (max-width: 1024px) {
	.bp-checkout-wrapper,
	.bp-cart-wrapper {
		padding-top: 36px;
		padding-bottom: 56px;
	}
}

@media (max-width: 767px) {
	.bp-checkout-wrapper,
	.bp-cart-wrapper {
		padding-top: 28px;
		padding-bottom: 48px;
	}
}

/* ==========================================================================
   GEKOZEN OPTIES IN DE BESTELSAMENVATTING

   wc_get_formatted_cart_item_data() geeft een <dl class="variation"> terug met
   <dt>Breedte:</dt><dd><p>200cm</p></dd> per optie. Een definitielijst stapelt
   die standaard: label op de ene regel, waarde ingesprongen op de volgende.
   Bij een samengestelde Bikeport zijn dat tien opties, dus twintig regels.

   Als raster van twee kolommen staan label en waarde naast elkaar en lijnen
   alle waarden bovendien onder elkaar uit.
   ========================================================================== */
/* Het optieblok is een eigen rasterkind en loopt over alle kolommen, zodat
   het niet meer in de middelste kolom van 114px geperst wordt. */
.benn-cosum__item > .benn-cosum__variant {
	grid-column: 1 / -1;
	min-width: 0;
	margin: 2px 0 0;
	padding-top: 8px;
	border-top: 1px solid var(--benn-border, #e6e3dc);
}

.benn-cosum__variant .variation,
.benn-cart .variation,
.woocommerce-cart-form .variation,
.benn-cosum .variation {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	column-gap: 8px;
	row-gap: 3px;
	margin: 8px 0 0;
	font-size: 12.5px;
	line-height: 1.45;
}

.benn-cosum__variant .variation dt,
.benn-cart .variation dt,
.woocommerce-cart-form .variation dt,
.benn-cosum .variation dt {
	grid-column: 1;
	margin: 0;
	padding: 0;
	font-weight: 500;
	color: var(--benn-text-zacht, #6b7280);
	white-space: nowrap;
}

.benn-cosum__variant .variation dd,
.benn-cart .variation dd,
.woocommerce-cart-form .variation dd,
.benn-cosum .variation dd {
	grid-column: 2;
	margin: 0;
	padding: 0;
	min-width: 0;
	color: var(--benn-text, #1e1e1e);
}

/* WooCommerce wikkelt elke waarde in een <p> met eigen marges. */
.benn-cosum__variant .variation dd p,
.benn-cart .variation dd p,
.woocommerce-cart-form .variation dd p,
.benn-cosum .variation dd p {
	margin: 0;
	padding: 0;
}

/* De samenvatting rendert twee geneste .woocommerce-checkout-review-order
   blokken -- .woocommerce-checkout-review-order met daarin
   .woocommerce-checkout-review-order-table -- allebei met zijpadding en een rand. Die dubbele kaartomlijsting
   kostte 84px: op telefoon bleef er van 303px nog 217px inhoud over. De
   binnenste laag krijgt hier geen eigen chrome meer. */
.woocommerce-checkout-review-order .woocommerce-checkout-review-order-table {
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: none !important;
	box-shadow: none !important;
}

/* Als de zijbalk echt smal wordt is naast elkaar niet meer te doen: dan
   stapelen we alsnog, maar zonder de inspringing van een definitielijst.
   De grens ligt op 340px en niet hoger, want met de teruggewonnen ruimte
   passen label en waarde op een telefoon van 375px prima naast elkaar. */
@media (max-width: 340px) {
	.benn-cosum__variant .variation,
	.benn-cosum .variation {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 0;
	}

	.benn-cosum__variant .variation dt,
	.benn-cosum .variation dt {
		grid-column: 1;
		margin-top: 4px;
	}

	.benn-cosum__variant .variation dd,
	.benn-cosum .variation dd {
		grid-column: 1;
	}
}

@media (max-width: 767px) {
	/* Iets minder zijpadding in de samenvatting op telefoon. */
	.benn-checkout__aside .woocommerce-checkout-review-order {
		padding-left: 14px !important;
		padding-right: 14px !important;
	}

	.benn-cosum__variant .variation {
		font-size: 12px;
		column-gap: 6px;
	}
}


/* ==========================================================================
   HAARLIJNEN TUSSEN DE GEKOZEN OPTIES

   Een raster van label/waarde leest goed, maar zonder scheiding blijft het een
   blok tekst. Hieronder krijgt elke optie een eigen regel met een haarlijn.

   De kolomtussenruimte moet daarvoor naar nul: met column-gap zou de lijn een
   gat van 8px in het midden krijgen. De ruimte tussen label en waarde komt nu
   uit de rechterpadding van het label, zodat de lijn ononderbroken doorloopt.

   De lijn is een getinte groentint in plaats van grijs -- op wit valt zuiver
   grijs harder op dan een spoor van de huiskleur.
   ========================================================================== */
.benn-cosum__variant .variation,
.benn-cart .variation,
.woocommerce-cart-form .variation,
.benn-cosum .variation {
	column-gap: 0;
	row-gap: 0;
}

.benn-cosum__variant .variation dt,
.benn-cart .variation dt,
.woocommerce-cart-form .variation dt,
.benn-cosum .variation dt {
	padding: 6px 14px 6px 0;
	border-bottom: 1px solid rgba(20, 53, 37, 0.07);
}

.benn-cosum__variant .variation dd,
.benn-cart .variation dd,
.woocommerce-cart-form .variation dd,
.benn-cosum .variation dd {
	padding: 6px 0;
	border-bottom: 1px solid rgba(20, 53, 37, 0.07);

	/* Cijfers even breed, zodat 200cm en 155cm onder elkaar uitlijnen. */
	font-variant-numeric: tabular-nums;
}

/* Geen lijn onder de laatste optie: die zou samenvallen met de rand van het
   blok eronder. */
.benn-cosum__variant .variation dt:last-of-type,
.benn-cosum__variant .variation dd:last-of-type,
.benn-cart .variation dt:last-of-type,
.benn-cart .variation dd:last-of-type,
.woocommerce-cart-form .variation dt:last-of-type,
.woocommerce-cart-form .variation dd:last-of-type,
.benn-cosum .variation dt:last-of-type,
.benn-cosum .variation dd:last-of-type {
	border-bottom: 0;
	padding-bottom: 0;
}

/* In de gestapelde noodvariant staan label en waarde in dezelfde kolom; daar
   hoort de lijn alleen onder de waarde, niet tussen label en waarde in. */
@media (max-width: 340px) {
	.benn-cosum__variant .variation dt,
	.benn-cosum .variation dt {
		padding: 6px 0 0;
		border-bottom: 0;
	}

	.benn-cosum__variant .variation dd,
	.benn-cosum .variation dd {
		padding: 0 0 6px;
	}
}

/* Regels iets strakker en de labels in een warm grijs. Het #6b7280 dat hier
   stond is een koel blauwgrijs; naast het hout en goud van de rest van de site
   valt dat op als een vreemde eend. #6f6a5e ligt in dezelfde warme familie en
   houdt contrast 5,1:1 op wit -- ruim boven de 4,5:1 die klein tekstwerk
   nodig heeft. */
.benn-cosum__variant .variation dt,
.benn-cart .variation dt,
.woocommerce-cart-form .variation dt,
.benn-cosum .variation dt {
	padding-top: 5px;
	padding-bottom: 5px;
	color: #6f6a5e;
	font-weight: 400;
	letter-spacing: 0.01em;
}

.benn-cosum__variant .variation dd,
.benn-cart .variation dd,
.woocommerce-cart-form .variation dd,
.benn-cosum .variation dd {
	padding-top: 5px;
	padding-bottom: 5px;
	font-weight: 500;
}

.benn-cosum__variant .variation dt:last-of-type,
.benn-cosum__variant .variation dd:last-of-type,
.benn-cart .variation dt:last-of-type,
.benn-cart .variation dd:last-of-type,
.woocommerce-cart-form .variation dt:last-of-type,
.woocommerce-cart-form .variation dd:last-of-type,
.benn-cosum .variation dt:last-of-type,
.benn-cosum .variation dd:last-of-type {
	padding-bottom: 0;
}

/* De scheidingsrand onder elk regelitem valt weg. Bij een samengesteld product
   sluit die direct aan op de haarlijnen van de optielijst, en dan lees je twee
   soorten strepen door elkaar. De onderlinge afstand houdt de producten
   zichtbaar uit elkaar. */
.benn-cosum__item {
	border-bottom: 0 !important;
	padding-bottom: 0 !important;
	margin-bottom: 22px !important;
}

.benn-cosum__item:last-child {
	margin-bottom: 0 !important;
}


/* ==========================================================================
   BESTELKNOP

   De knop was een kolom-flex met het slotje er absoluut overheen gelegd op
   top 23px. De ondertitel loopt van 36 tot 47, dus icoon en tekst overlapten
   elkaar. Daarbij stond de regelhoogte op 1.0 voor beide regels -- precies de
   letterhoogte, waardoor staartletters tegen de volgende regel aanliepen.

   Als raster kan het slotje naast de titel staan zonder absolute positionering,
   en krijgt de geruststellende regel een eigen rij eronder.
   ========================================================================== */
#place_order,
.benn-cosum__btn {
	display: grid !important;
	grid-template-columns: auto auto;
	grid-template-areas:
		"icoon titel"
		"sub   sub";
	justify-content: center;
	align-items: center;
	column-gap: 10px;
	row-gap: 5px;
	padding: 15px 20px !important;
	line-height: 1.25 !important;
}

#place_order > svg,
.benn-cosum__btn > svg {
	grid-area: icoon;
	position: static !important;
	flex: none;
	margin: 0 !important;
}

#place_order .benn-cosum__btn-txt,
.benn-cosum__btn .benn-cosum__btn-txt {
	grid-area: titel;
	line-height: 1.2 !important;
}

/* De ondertitel stond ook in kapitalen, net als de knoptekst zelf. Twee regels
   kapitaal boven elkaar leest als één blok; in gewone schrijfwijze en met wat
   minder nadruk valt de hiërarchie meteen op zijn plek. */
#place_order .benn-cosum__btn-sub,
.benn-cosum__btn .benn-cosum__btn-sub {
	grid-area: sub;
	justify-self: center;
	margin: 0;
	/* Een eerdere regel in dit bestand zet kleur en grootte met !important;
	   zonder dat hier ook te doen blijft die winnen. */
	color: rgba(255, 255, 255, 0.72) !important;
	font-size: 11.5px !important;
	font-weight: 400 !important;
	line-height: 1.4 !important;
	letter-spacing: 0;
	text-transform: none;
}


/* ==========================================================================
   CONFIGURATOR: OPTIEKAARTEN EN SAMENSTELLING

   1. .bp-card-title stond op 26px met white-space: nowrap in een kaart van
      269px. Titels als "Rhombusprofiel - Kleur: All black" liepen daardoor
      41px buiten hun vak -- de tekst kruiste de rand van het blokje.

   2. De samenstelling was een flexrij met space-between. Daardoor begon elke
      waarde op een andere plek (63, 60, 54 en 66px) en elke prijs ook (210,
      285, 226px). Als raster met drie kolommen staat alles op een lijn, met
      dezelfde haarlijnen als de bestelsamenvatting op de afrekenpagina.
   ========================================================================== */

/* --- Optiekaarten --------------------------------------------------------- */
.bp-card-title {
	white-space: normal !important;
	overflow-wrap: anywhere;
	hyphens: auto;
}

/* Geen overflow:hidden hier. Dat stond er om overlopende titels te stoppen,
   maar die oorzaak is hierboven al weggenomen met white-space:normal. De
   prijsbadge staat op top:-10px en steekt dus bewust over de bovenrand -- met
   overflow:hidden werd daar 8 van de 21px van afgeklemd. */
.bp-opt.bp-card-opt {
	overflow: visible;
}

/* Gescoped op .bp-opt: style.css zet .bp-card-title op 26px !important en
   laadt na dit bestand. Bij gelijke specificiteit en twee keer !important wint
   de bronvolgorde, dus een kale .bp-card-title verliest hier altijd.

   Dit gold eerst alleen onder 767px, waardoor de titel op desktop nog 26px was
   en over drie regels liep in een kaart van 280px. De ondertitel stond op 0.8em
   daarvan -- bijna 21px, vrijwel even groot als de titel zelf. */
.bp-opt .bp-card-title,
.bp-opt.bp-card-opt .bp-card-title {
	font-size: 15px !important;
	line-height: 1.3 !important;
	font-weight: 600 !important;
}

.bp-opt .bp-card-title small {
	display: block;
	margin-top: 3px;
	font-size: 12.5px !important;
	font-weight: 400 !important;
	color: #6f6a5e !important;
}

/* --- Samenstelling als raster --------------------------------------------- */
.bp-sam-list {
	display: grid !important;
	grid-template-columns: auto minmax(0, 1fr) auto;

	/* Nul tussenruimte tussen de kolommen, anders krijgt de haarlijn gaten.
	   De ademruimte komt uit de padding van de cellen zelf. */
	column-gap: 0 !important;
	row-gap: 0 !important;
}

/* De rijen verdwijnen als doos zodat hun inhoud rechtstreeks in het raster
   van de lijst valt -- alleen zo lijnen de kolommen over alle rijen uit. */
.bp-sam-row:not(.bp-sam-row-base) {
	display: contents;
}

.bp-sam-row:not(.bp-sam-row-base) > .bp-sam-label {
	display: contents;
}

/* De basisregel heeft geen label/waarde-splitsing en houdt zijn eigen vorm. */
.bp-sam-row-base {
	grid-column: 1 / -1;
}

.bp-sam-row:not(.bp-sam-row-base) > .bp-sam-label > strong {
	grid-column: 1;
	padding: 6px 12px 6px 0;
	border-bottom: 1px solid rgba(20, 53, 37, 0.07);
	font-weight: 600;
	white-space: nowrap;
}

.bp-sam-row:not(.bp-sam-row-base) > .bp-sam-label > span {
	grid-column: 2;
	min-width: 0;
	padding: 6px 12px 6px 0;
	border-bottom: 1px solid rgba(20, 53, 37, 0.07);
}

.bp-sam-row:not(.bp-sam-row-base) > .bp-sam-price {
	grid-column: 3;
	padding: 6px 0;
	border-bottom: 1px solid rgba(20, 53, 37, 0.07);
	text-align: right;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

/* Geen lijn onder de laatste regel: die valt samen met de scheiding eronder. */
.bp-sam-row:last-child > .bp-sam-label > strong,
.bp-sam-row:last-child > .bp-sam-label > span,
.bp-sam-row:last-child > .bp-sam-price {
	border-bottom: 0;
	padding-bottom: 0;
}


/* ==========================================================================
   CONFIGURATOR: RUSTIGER EN MEER IN DE HUISSTIJL

   Vier dingen maakten het onrustig:

   1. De kaarten zonder foto tonen een WordPress-emoji (🛠️ en 🚫) die als
      extern plaatje van s.w.org wordt gehaald. Zes stuks. Dat oogt goedkoop
      naast de fotokaarten, en het is een externe aanvraag per kaart.

   2. De geselecteerde kaart gebruikt #27ae60 -- een algemeen groen dat nergens
      anders op de site voorkomt. Daarbij een rand van 2px én een box-shadow van
      1px eromheen, dus feitelijk een ring van 3px met een mintgroene vulling.

   3. Prijsbadges staan in grijs op grijs.

   4. Een badge met "€0,-" voegt niets toe.
   ========================================================================== */

/* --- De kaart zelf: fijnere lijn, rustiger hoeken ------------------------- */
.bp-opt.bp-card-opt {
	border-width: 1px !important;
	border-color: #e6e3dc !important;
	border-radius: 12px !important;
	transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

.bp-opt.bp-card-opt:hover {
	border-color: #cfc9bd !important;
	box-shadow: 0 2px 10px rgba(20, 53, 37, 0.06) !important;
}

/* --- Gekozen: huisgroen, één lijn, nauwelijks vulling --------------------- */
.bp-opt.bp-card-opt.active {
	border-color: #143525 !important;
	background-color: #fbfaf7 !important;
	box-shadow: 0 0 0 1px #143525, 0 4px 14px rgba(20, 53, 37, 0.10) !important;
}

/* --- Badges --------------------------------------------------------------- */
.bp-card-badge {
	font-size: 10.5px !important;
	font-weight: 700 !important;
	letter-spacing: 0.02em;
	padding: 3px 10px !important;
	border-radius: 20px !important;
	background-color: #f2efe9 !important;
	color: #6f6a5e !important;
	box-shadow: 0 1px 3px rgba(20, 53, 37, 0.08);
}

/* De markering van de gekozen en de standaardoptie in het huisgroen.

   Twee klassen diep, want style.css zet .bp-badge-std op #27ae60 met
   !important en laadt na dit bestand. Bij gelijke specificiteit beslist dan de
   bronvolgorde, en die verliezen we altijd. */
.bp-opt .bp-badge-std,
.bp-opt.bp-card-opt .bp-badge-std,
.bp-opt.active .bp-card-badge {
	background-color: #143525 !important;
	color: #ffffff !important;
}

/* --- Beeldvlak zonder foto: geen emoji maar een fijne lijntekening -------- */
.bp-card-img.bp-img-no {
	background: linear-gradient(160deg, #f6f4ef 0%, #eeebe3 100%) !important;
	background-repeat: no-repeat !important;
	background-position: center !important;
	background-size: 30px 30px !important;
	border: 1px solid #eceae4;
}

.bp-card-img.bp-img-no img.emoji {
	display: none !important;
}

/* Doorgestreepte cirkel voor "Geen" en "Regel ik zelf" */
.bp-card-img.bp-img-no:has(img[alt="🚫"]) {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236f6a5e' stroke-width='1.3'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cline x1='5.6' y1='5.6' x2='18.4' y2='18.4'/%3E%3C/svg%3E") !important;
}

/* Gereedschap voor de montage-optie */
.bp-card-img.bp-img-no:has(img[alt="🛠️"]) {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236f6a5e' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a4 4 0 0 0 5 5l-9.4 9.4a2.1 2.1 0 0 1-3-3z'/%3E%3Cpath d='M17.5 3.5 21 7l-2 2-3.5-3.5z'/%3E%3C/svg%3E") !important;
}

/* Browsers zonder :has() krijgen tenminste een neutrale streep. */
@supports not selector(:has(*)) {
	.bp-card-img.bp-img-no {
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cline x1='6' y1='12' x2='18' y2='12' stroke='%236f6a5e' stroke-width='1.3'/%3E%3C/svg%3E") !important;
	}
}