/**
 * Lef B2B Shop — LAYOUT / POSITIONERING.
 *
 * Bewust alleen structuur: grid, flex, afmetingen, posities. Alle site-specifieke
 * styling (kleuren, typografie, randen, hover-states) staat in het thema
 * (style.css) met lef JSON-variabelen, zodat deze plugin herbruikbaar blijft.
 */

/* Meldingsbalk boven de hero (shop/product) — layout; kleuren in het thema.
   Full-bleed: de hook rendert binnen een container, maar de tint moet (net als
   de hero) edge-to-edge. Breakout naar viewport-breedte; de inner .container
   centreert de inhoud weer. */
.b2b-notice {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}
.b2b-notice__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	padding-top: 11px;
	padding-bottom: 11px;
}
.b2b-notice__msg { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.b2b-notice__msg .icon { flex: none; font-size: 13px; }
.b2b-notice__login {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	flex: none;
	padding: 8px 16px;
	white-space: nowrap;
}
.b2b-notice__login .icon { font-size: 12px; }

/* Losse lijst (shortcode) */
.b2b-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

/* Volle-breedte rijen binnen de archief-grid: bootstrap-gutter neutraliseren
   zodat de lijst links/rechts uitlijnt met de toolbar (sorteren). De child-
   selector `.products .post-container >` haalt de specificiteit boven de thema-
   grid-regel `.row > [class*="col-"]` (die de 15px gutter zet). Geldt ook voor
   de tussen-CTA (.shop-cta-col) zodat die meelijnt. */
.post-container:has(> .b2b-col) {
	margin-left: 0;
	margin-right: 0;
	row-gap: 0;
}
.products .post-container > .b2b-col,
.products .post-container > .shop-cta-col {
	padding-left: 0;
	padding-right: 0;
	/* Zelfde verticale tussenruimte als tussen de kaarten, zodat de CTA niet
	   aan de volgende kaart vastplakt. */
	margin-bottom: 10px;
}
/* Variabel product uitgesplitst → meerdere rijen in één kolom: onderlinge ruimte. */
.b2b-col .b2b-card + .b2b-card {
	margin-top: 10px;
}

/* ── Kaart-grid (design: 64px 1.6fr 1fr .8fr .9fr 1fr) ─────────────────────
   minmax(0, …) bij elke fr-kolom: elke regel is zijn eigen grid, en een kale
   `1fr` krijgt de inhoud als ondergrens. Een regel met minder erin (een
   variabel product heeft geen artikelnummer, geen aantal en geen regeltotaal)
   verdeelde de ruimte dan anders dan de regels eromheen, waardoor de kolommen
   van rij tot rij verschoven. */
.b2b-card {
	display: grid;
	grid-template-columns: 64px minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 0.8fr) minmax(0, 0.9fr) minmax(0, 1fr);
	grid-template-areas: "media info pricing stock qty cart";
	gap: 16px;
	align-items: center;
	padding: 14px 18px;
}

.b2b-card__media   { grid-area: media; width: 64px; height: 64px; display: block; position: relative; }
.b2b-card__media img { width: 100%; height: 100%; object-fit: contain; }

.b2b-card__info    { grid-area: info; min-width: 0; }
.b2b-card__name    { display: block; }
.b2b-card__meta    { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 6px; }

.b2b-card__pricing { grid-area: pricing; position: relative; }
.b2b-card__unit    { display: flex; align-items: baseline; gap: 5px; }
.b2b-card__tier-hint   { display: flex; align-items: center; gap: 6px; margin-top: 5px; }
.b2b-card__tier-toggle { border: none; background: none; padding: 0; cursor: pointer; line-height: 1; display: inline-flex; }

/* Popover */
.b2b-card__tier-popover { position: absolute; top: 100%; left: 0; margin-top: 8px; z-index: 40; width: 250px; padding: 14px; }
.b2b-card__tier-popover[hidden] { display: none; }
.b2b-card__tier-popover-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.b2b-card__tier-close { border: none; background: none; padding: 2px; cursor: pointer; line-height: 1; }
.b2b-card__tier-rows { display: flex; flex-direction: column; gap: 5px; }
.b2b-card__tier-row  { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 10px; }
.b2b-card__tier-note { margin: 10px 0 0; }

.b2b-card__stock { grid-area: stock; display: flex; align-items: center; gap: 6px; }
.b2b-card__stock-dot { width: 9px; height: 9px; border-radius: 50%; background: currentColor; flex: none; }
.b2b-card__stock-icon { flex: none; }

/* Aantal-stepper */
.b2b-card__qty { grid-area: qty; }
.b2b-qty { display: inline-flex; align-items: center; width: -moz-fit-content; width: fit-content; overflow: hidden; }
.b2b-qty__btn { width: 32px; height: 38px; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; }
.b2b-qty__input { width: 44px; height: 38px; text-align: center; border: none; -moz-appearance: textfield; appearance: textfield; }
.b2b-qty__input::-webkit-outer-spin-button,
.b2b-qty__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Regeltotaal + winkelwagen */
.b2b-card__cart { grid-area: cart; display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
/* order: het regeltotaal staat in de bron ná de verlanglijstknop, maar hoort er
   links van te staan. */
.b2b-card__totals { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; min-width: 76px; order: -1; }
.b2b-card__cart-btn { width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; flex: none; }
/* Alleen het icoon, dus hetzelfde vierkant als de winkelwagen- en samenstelknop
   ernaast; het label staat er als .screen-reader-text bij en verschijnt bij
   hover als ballonnetje. */
.b2b-card__notify {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	padding: 0;
	cursor: pointer;
}
/* Aantal 0: er valt niets toe te voegen, dus de knop op slot — WooCommerce leest
   aantal 0 als "niet opgegeven" en zou er stil één van maken. */
.b2b-card__cart-btn.is-empty { opacity: .45; pointer-events: none; }
.b2b-card__notify.is-loading { opacity: .55; pointer-events: none; }
.b2b-card__notify.is-subscribed { cursor: default; pointer-events: none; }
.b2b-card__configure { display: inline-flex; align-items: center; gap: 8px; }
/* Samenstellen in de popup is een bestelstap: hetzelfde vierkant als de
   winkelwagenknop op de andere regels, zodat de kolom uitlijnt. Eén klasse
   dieper dan nodig: de knop had in het thema zijruimte voor een label ernaast,
   en die moet weg ongeacht in welke volgorde de stylesheets laden. */
.b2b-card .b2b-card__configure--popup {
	width: 42px;
	height: 42px;
	padding: 0;
	gap: 0;
	flex: none;
	justify-content: center;
}

/* qty + cart-wrapper: desktop transparant (qty/cart blijven losse grid-items),
   mobiel wordt het één flex-rij. */
.b2b-card__actions { display: contents; }
/* Mobiel-only elementen (desktop verborgen): totaal IN de winkelwagen-knop +
   btw-label in de prijsregel. */
.b2b-card__cart-total { display: none; }
.b2b-card__unit-vat { display: none; }

/* Uitverkocht: geen stepper; de brede "Houd me op de hoogte"-knop mag de
   qty- én cart-kolom overspannen zodat hij niet naar links overloopt. */
.b2b-card--soldout .b2b-card__qty { display: none; }
.b2b-card--soldout .b2b-card__cart { grid-column: qty-start / cart-end; }

/* Uitgelogd (closed B2B shop): prijs/voorraad/aantal/winkelwagen verborgen —
   alleen de slot-pill + inlogknop, rechts uitgelijnd. Verhoogde specificiteit
   (.b2b-card.b2b-card--locked) zodat deze grid-areas de responsive .b2b-card-
   regels hieronder overrulen, ongeacht bronvolgorde. */
.b2b-card.b2b-card--locked {
	grid-template-columns: 64px 1fr auto;
	grid-template-areas: "media info locked";
}
.b2b-card__locked {
	grid-area: locked;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 14px;
	flex-wrap: wrap;
}
.b2b-card__locked-price { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.b2b-card__locked-price .icon { flex: none; font-size: 11px; }
.b2b-card__login { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; padding: 11px 18px; }
.b2b-card__login .icon { font-size: 12px; }

/* ── Winkelwagen-rij (child-thema cart-item-override) ───────────────────────
   Zelfde kaartgrid, met een extra smalle remove-kolom. Het aantal is hier de
   NATIVE Woo-quantity (met de thema-plus/minusknoppen) zodat het formulier
   ("Winkelmandje bijwerken") gewoon blijft werken — gestyled als de b2b-stepper. */
/* De cart-lijst staat in een smallere kolom (col-lg-8) dan de shoplijst:
   voorraad + stepper op natuurlijke breedte, iets kleinere gap. */
.b2b-card--cart {
	position: relative;
	grid-template-columns: 64px 1.5fr 1.2fr max-content max-content 1fr 22px;
	grid-template-areas: "media info pricing stock qty cart remove";
	gap: 14px;
}
.b2b-card__remove {
	grid-area: remove;
	display: flex;
	align-items: center;
	justify-content: flex-end;
}
.b2b-card__remove .remove {
	width: 26px;
	height: 26px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	flex: none;
}

/* Native Woo-quantity in b2b-stepper-vorm. */
.b2b-card--cart .quantity {
	display: inline-flex;
	align-items: center;
	width: -moz-fit-content;
	width: fit-content;
	overflow: hidden;
	position: relative;
}
.b2b-card--cart .quantity .minus,
.b2b-card--cart .quantity .plus {
	width: 32px;
	height: 38px;
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	margin: 0;
	flex: none;
}
.b2b-card--cart .quantity .qty {
	width: 44px;
	height: 38px;
	text-align: center;
	border: none;
	margin: 0;
	-moz-appearance: textfield;
	appearance: textfield;
}
.b2b-card--cart .quantity .qty::-webkit-outer-spin-button,
.b2b-card--cart .quantity .qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.b2b-card--cart .quantity .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* Uitverkocht artikel ín de winkelwagen: aantal blijft aanpasbaar (i.t.t. de
   shopkaart, die de stepper verbergt) en het regeltotaal blijft op zijn plek. */
.b2b-card--cart.b2b-card--soldout .b2b-card__qty { display: block; }
.b2b-card--cart.b2b-card--soldout .b2b-card__cart { grid-column: auto; grid-area: cart; }

/* ── Mobiel (≤991px): gestapelde kaart, 1:1 met "Shop Mobiel" ──────────────── */
@media (max-width: 991px) {
	.b2b-card {
		grid-template-columns: 72px 1fr;
		grid-template-areas:
			"media info"
			"media stock"
			"pricing pricing"
			"actions actions";
		gap: 8px 13px;
		padding: 14px;
		align-items: start;
	}
	/* Beeld 72px, spant info + voorraad zodat voorraad in het info-blok naast het
	   beeld valt (ontwerp). */
	.b2b-card__media { width: 72px; height: 72px; align-self: start; }
	.b2b-card__stock { align-self: start; margin-top: 1px; }

	/* Btw in de prijsregel (naast p/st); het losse totalen-blok verdwijnt. */
	.b2b-card__unit-vat { display: inline; }

	/* Aantal + winkelwagen: één flex-rij, qty vast + brede knop.
	   Een invoerveld heeft een eigen minimumbreedte (~240px) en die telt als
	   automatische minimumbreedte van het flex-item; zonder vaste basis plus
	   min-width: 0 pakt het aantal-blok de hele rij en houdt de knop niets over. */
	.b2b-card__actions {
		grid-area: actions;
		display: flex;
		align-items: stretch;
		gap: 10px;
		margin-top: 4px;
	}
	.b2b-card__qty { flex: 0 0 132px; min-width: 0; }
	.b2b-qty__input { min-width: 0; }
	.b2b-card__cart { flex: 1; min-width: 0; }

	/* Grotere aantal-stepper (ontwerp: 44 breed / 48 hoog). De hoogte staat op de
	   buitenkant: het thema geeft dit vlak een rand, en met de hoogte op de
	   knoppen erin werd het geheel 2px hoger dan de knoppen ernaast. */
	.b2b-qty { width: 100%; height: 48px; }
	.b2b-qty__btn { width: 44px; height: 100%; }
	.b2b-qty__input { flex: 1; width: auto; height: 100%; }

	/* Prijs IN de winkelwagen-knop; knop vult de resterende breedte naast de
	   verlanglijstknop, die net als de rest 48px hoog wordt. */
	.b2b-card__totals { display: none; }
	.b2b-card__cart-total { display: inline; }
	.b2b-card__cart-btn { flex: 1; min-width: 0; height: 48px; gap: 9px; padding: 0 16px; }

	/* Samenstellen (variabel) + "Houd me op de hoogte" (uitverkocht) vullen de
	   rest van de rij. De popup-variant blijft een vierkante icoonknop; een knop
	   over de volle breedte met alleen een icoon erin leest niet. */
	.b2b-card__configure { flex: 1; min-width: 0; justify-content: center; height: 48px; }
	.b2b-card .b2b-card__configure--popup { flex: none; width: 48px; height: 48px; }
	.b2b-card--soldout .b2b-card__qty { display: none; }
	.b2b-card__notify { flex: none; width: 48px; height: 48px; }

	/* Uitgelogd (locked) kaart. */
	.b2b-card.b2b-card--locked {
		grid-template-columns: 72px 1fr;
		grid-template-areas:
			"media info"
			"locked locked";
	}
	.b2b-card__locked { justify-content: flex-start; }
	.b2b-card__login { flex: 1; justify-content: center; }

	/* Winkelwagen-rij: zelfde stapeling als de shopkaart; verwijderen als ×
	   rechtsboven; aantal + regeltotaal samen op de actierij. */
	.b2b-card--cart {
		grid-template-columns: 72px 1fr;
		grid-template-areas:
			"media info"
			"media stock"
			"pricing pricing"
			"actions actions";
	}
	.b2b-card--cart .b2b-card__info { padding-right: 30px; }
	.b2b-card__remove {
		position: absolute;
		top: 10px;
		right: 10px;
	}

	/* Grotere stepper (zoals de kaart-stepper op mobiel), totaal rechts ernaast.
	   Het totalen-blok blijft hier zichtbaar (de kaart verbergt het t.g.v. het
	   totaal ín de winkelwagen-knop, die de cart-rij niet heeft). */
	.b2b-card--cart .quantity .minus,
	.b2b-card--cart .quantity .plus { width: 44px; height: 48px; }
	.b2b-card--cart .quantity .qty { width: 52px; height: 48px; }
	.b2b-card--cart .b2b-card__cart { align-items: center; }
	.b2b-card--cart .b2b-card__totals { display: flex; }
	/* Btw staat op mobiel al in de prijsregel (unit-vat) — niet dubbel tonen. */
	.b2b-card--cart .b2b-card__totals .b2b-card__vat { display: none; }
}

/* Aanvraagformulier voor een B2B-account ([b2b_account_aanvraag]) — alleen de
   kolomindeling. Velden, labels en de knop erven de themastyling: leflite
   stijlt `form input/select/textarea` en `.btn` al. */
.b2b-request__group {
	border: 0;
	margin: 0 0 24px;
	padding: 0;
}
.b2b-request__group legend {
	padding: 0;
	margin-bottom: 12px;
}
/* De kop zit als <h4> in de <legend> en erft daarmee de koptypografie van het
   thema; alleen de eigen marge van de kop moet eruit. */
.b2b-request__group legend h4 { margin: 0; }

.b2b-request__actions { margin-top: 24px; }
.b2b-request__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}
.b2b-request__field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0;
}
.b2b-request__field--wide { grid-column: 1 / -1; }

/* Honeypot: uit beeld voor mensen, wél invulbaar voor bots. */
.b2b-request__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

@media (max-width: 767px) {
	.b2b-request__grid { grid-template-columns: minmax(0, 1fr); }
}

/* Verlanglijstknop op de kaart. De knop zelf is het themacomponent
   (.modify-to-wishlist-button); hier alleen de plaats en het formaat — even
   groot als de winkelwagenknop ernaast. Kleuren staan in het thema. */
.b2b-card__cart .modify-to-wishlist-button {
	flex: none;
	margin: 0;
	padding: 0;
	width: 42px;
	min-width: 0;
	height: 42px;
	min-height: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}
/* Mobiel is de hele actierij 48 hoog. Deze media-regel staat hier en niet in het
   mobiele blok hierboven: dat komt eerder in dit bestand en zou het bij gelijke
   specificiteit verliezen van de regel hierboven. */
@media (max-width: 991px) {
	.b2b-card__cart .modify-to-wishlist-button { width: 48px; height: 48px; }
}

/* ── B2B-gegevens op de themakaart (kaartweergave) ──────────────────────────
   Alleen de plaatsing; de kaart en het aantal-veld zijn die van het thema. */
.b2b-cardview__data { display: none; }
.b2b-cardview__unit { display: inline-flex; align-items: baseline; gap: 5px; margin-left: 6px; }
.b2b-cardview__total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	width: 100%;
	margin-bottom: 10px;
}
/* De knoppenrij van de themakaart is één flexrij zonder omslag; het totaal
   hoort op een eigen regel boven het aantal en de knop. Alleen omslaan waar wij
   iets hebben toegevoegd, zodat een gewone kaart zijn indeling houdt. */
.card-product .loop-item-actions-wrapper:has(.b2b-cardview__total) { flex-wrap: wrap; }
/* Aantal, bestelknop en hartje delen één regel in een smalle kaartkolom. Het
   aantal krijgt daarom minder breedte dan het thema het geeft, en de knop mag
   niet over twee regels afbreken. */
/* .quantity erbij: het thema zet breedte én min-breedte op .quantity.qty-lef-
   wrapper, even diep als een selector met twee klassen — zonder die derde
   klasse hield het aantal-veld zijn 115px en werd de knop naar de volgende
   regel geduwd. */
/* Aantal-veld, bestelknop en hartje even hoog: de kaart heeft daar één maat
   voor (--product-action-height). Het aantal-veld van het thema is hoger,
   want dat rekent met de binnenruimte van zijn plus- en minusknoppen. */
.card-product .quantity.b2b-cardview__qty {
	flex: none;
	width: 96px;
	min-width: 0;
	height: var(--product-action-height);
}
.card-product .quantity.b2b-cardview__qty button {
	width: 30px;
	height: 100%;
	padding: 0;
}
.card-product .quantity.b2b-cardview__qty .qty {
	width: calc(100% - 60px);
	height: 100%;
}
/* Het thema geeft deze knop `width: 100%` — met flex-basis auto claimde hij
   daarmee altijd een hele regel en werd het aantal-veld eroverheen geduwd. Met
   basis 0 vult hij precies de ruimte die naast het aantal overblijft. Eén
   klasse dieper dan de themaregel, zodat het niet van de laadvolgorde afhangt. */
.card-product .loop-item-actions-wrapper .b2b-cardview__qty + .add_to_cart_button {
	flex: 1 1 0;
	width: auto;
	min-width: 0;
	padding: 0 10px;
	white-space: nowrap;
}

/* Het hartje naar de hoek van het beeld: in de knoppenrij is geen plek voor een
   derde element naast het aantal en de bestelknop, en boven het beeld staat het
   ook los van de bestelhandeling. */
.card-product:has(.b2b-cardview__data.is-b2b) .modify-to-wishlist-button {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 3;
}

/* ── Productpopup ───────────────────────────────────────────────────────────
   Het venster zelf komt uit het thema (components/popups); hier alleen de
   indeling van de inhoud. De extra klasse in de selector houdt het boven de
   maten die het thema aan elk popupvenster geeft. */
.lef-popup.b2b-popup.popup-opened .popup-inner {
	width: 1100px;
	max-width: calc(100vw - 40px);
	/* Niet meegroeien met een hoog scherm: een venster van een meter hoog leest
	   als een pagina. De inhoud scrollt hierbinnen. */
	max-height: min(820px, calc(100vh - 80px));
}

/* Laat het venster zelf scrollen in plaats van de inhoud: dan valt de scrollbalk
   buiten de binnenmarge, en kan een blok met een eigen achtergrond (de
   omschrijving) tot de rand doorlopen. */
.lef-popup.b2b-popup.popup-opened .popup-inner .popup-content {
	height: auto;
	overflow: visible;
}

/* De binnenruimte staat in een variabele zodat het thema hem kan bijstellen én
   een blok dat tot de rand moet doorlopen ermee kan rekenen. */
.lef-popup.b2b-popup.popup-opened .popup-inner {
	padding: var(--b2b-popup-padding, var(--general-padding, 20px));
}

/* De inhoud is de productsamenvatting van het thema (.product-summary-inner);
   die brengt zijn eigen opmaak mee. Hier alleen de twee kolommen eromheen —
   half om half, net als de productpagina. */
.b2b-popup__header {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 30px;
	align-items: start;
}
.b2b-popup__media { display: flex; flex-direction: column; min-width: 0; }
.b2b-popup__media .woocommerce-product-gallery__image { display: block; }
.b2b-popup__media img { width: 100%; height: auto; object-fit: contain; }
/* Miniatuurstrook: dezelfde opbouw als de gallerij van de productpagina, dus de
   opmaak komt uit het thema; hier alleen dat het een klikbare rij is. */
.b2b-popup__thumbs { display: flex; flex-wrap: wrap; list-style: none; }
.b2b-popup__thumbs img { cursor: pointer; }
.b2b-popup__body { min-width: 0; }
/* Ruimte voor het sluitkruisje van het thema, dat rechtsboven zweeft. */
.b2b-popup .product_title { padding-right: 52px; }
.b2b-popup__submit { display: inline-flex; align-items: center; gap: 9px; }
.b2b-popup__submit .icon { margin: 0; }
/* Bezig met toevoegen: de knop op slot, zodat er niet twee keer geklikt wordt.
   Het label vertelt in de JS wat er gebeurt. */
.b2b-popup__submit.loading { opacity: .6; pointer-events: none; }
/* Ruimte tussen de voorraadregel erboven en het raster. */
.b2b-popup__matrix { margin: 22px 0 16px; }
.b2b-popup__permalink { display: inline-flex; align-items: center; gap: 8px; }
.b2b-popup .b2b-matrix { margin-top: 0; }

/* De keuzevelden staan op de productpagina 30px van de prijs af; in een venster
   dat je in één blik wilt overzien is dat te veel — de rij eronder (aantal,
   knop) houdt zijn eigen ruimte al. Even diep als de themaregel plus .b2b-popup,
   zodat dit alleen in het venster geldt. */
.b2b-popup .single-main-product .block-product-header .variations {
	margin-bottom: 0;
}

/* Wachten op de inhoud: alleen de verduistering met een draaiende ring erin.
   Het venster zelf blijft leeg en doorzichtig tot het product er is — een wit
   vlak met een spinner erin leest als een venster dat nog niet af is. */
.lef-popup.b2b-popup.popup-opened.is-loading .popup-inner {
	width: auto;
	min-width: 0;
	max-height: none;
	padding: 0;
	background: none;
	box-shadow: none;
	overflow: visible;
}
/* Zelfde selectordiepte als het thema aan zijn sluitkruisje geeft, anders
   blijft dat tijdens het laden los over de verduistering zweven. */
.lef-popup.b2b-popup.popup-opened.is-loading .popup-inner .popup-close {
	display: none;
}

.b2b-popup__loading {
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Zelfde ring als op de andere lef-sites. */
.lef-loader {
	display: inline-block;
	box-sizing: border-box;
	width: 48px;
	height: 48px;
	border: 5px solid #fff;
	border-bottom-color: transparent;
	border-radius: 50%;
	animation: lef-spin 1.5s linear infinite;
}
@keyframes lef-spin {
	to { transform: rotate(360deg); }
}

/* Teller en knop onder het raster: de teller links, de knop rechts, en op een
   smal scherm de knop over de volle breedte eronder. */
.b2b-popup__actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	flex-wrap: wrap;
	gap: 12px 20px;
}
.b2b-popup__summary { margin: 0 auto 0 0; }
.b2b-popup__actions .b2b-popup__submit { margin: 0; }

/* Een raster heeft meer breedte nodig dan de helft van het venster, dus krijgt
   het beeld een vaste smalle kolom in plaats van de helft. */
.b2b-popup:has(.b2b-matrix) .b2b-popup__header {
	grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
}

/* Past het raster in de kolom, dan hoeven de kolommen niet uitgerekt te worden
   tot de volle breedte; past het niet, dan scrollt het blok eromheen. */
.b2b-popup .b2b-matrix__table {
	width: auto;
	min-width: 100%;
}

/* 991px en niet 767px: dat is het breekpunt waarop het thema de productpagina
   naar één kolom zet. Bleef het venster daar tweekolommig, dan werd de
   samenvatting smaller dan het bestelblok van het thema aankan. */
@media (max-width: 991px) {
	.b2b-popup__header { grid-template-columns: minmax(0, 1fr); gap: 18px; }
	/* Op een klein scherm hoeft de hele gallerij niet; het hoofdbeeld volstaat. */
	.b2b-popup__thumbs { display: none; }
}

/* Weergaveschakelaar (lijst / kaarten). Staat in de balk boven de lijst, naast
   het sorteerveld; opmaak in het thema. */
.b2b-viewswitch {
	display: flex;
	align-items: center;
	gap: 10px;
}
.b2b-viewswitch__options { display: inline-flex; }
.b2b-viewswitch__option {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	text-decoration: none;
	white-space: nowrap;
	-webkit-tap-highlight-color: transparent;
}
.b2b-viewswitch__option:focus:not(:focus-visible) { outline: none; }

/* ── Variatieraster in de productpopup ──────────────────────────────────────
   Eén vak per variant, met de prijs erboven en het aantal-veld eronder. Het
   veld vult zijn cel volledig: de tabel levert de randen, zodat het raster één
   vlak is in plaats van een verzameling losse invoervakjes. */
.b2b-matrix { width: 100%; }
/* Brede rasters mogen zelf scrollen; de popup niet. */
.b2b-matrix__scroll { overflow-x: auto; }
.b2b-matrix__table { width: 100%; border-collapse: collapse; }
.b2b-matrix__table th {
	padding: 8px 10px;
	text-align: center;
	white-space: nowrap;
}
.b2b-matrix__table th[scope="row"],
.b2b-matrix__corner {
	text-align: left;
	/* De eerste kolom blijft staan bij horizontaal scrollen; zonder de naam van
	   de variant zeggen de vakjes rechts niets meer. */
	position: sticky;
	left: 0;
	z-index: 1;
}
.b2b-matrix__corner span { display: block; }
.b2b-matrix__corner small { display: block; font-weight: 400; }

/* De cel is het invulvak: geen eigen padding, alles zit in het blokje erin. */
.b2b-matrix__cell { padding: 0; }
.b2b-matrix__cell .b2b-matrix__price {
	display: block;
	padding: 6px 8px 0;
	text-align: center;
	white-space: nowrap;
}
.b2b-matrix__cell .b2b-matrix__qty {
	display: block;
	width: 100%;
	min-width: 64px;
	height: 34px;
	margin: 0;
	padding: 0 6px 6px;
	border: none;
	background: none;
	text-align: center;
	-moz-appearance: textfield;
	appearance: textfield;
}
.b2b-matrix__qty::-webkit-outer-spin-button,
.b2b-matrix__qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.b2b-matrix__cell.is-empty,
.b2b-matrix__cell.is-soldout {
	padding: 10px 8px;
	text-align: center;
}

/* Lijstvariant (1 of 3+ attributen): één regel per variatie. */
.b2b-matrix__list { list-style: none; margin: 0; padding: 0; }
.b2b-matrix__row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto auto 90px;
	align-items: center;
	gap: 10px;
	padding: 7px 0;
}
.b2b-matrix__name { min-width: 0; }
.b2b-matrix__name small { display: block; }
.b2b-matrix__row.is-soldout { opacity: .6; }
.b2b-matrix__row .b2b-matrix__qty {
	width: 100%;
	height: 38px;
	text-align: center;
	-moz-appearance: textfield;
	appearance: textfield;
}

@media (max-width: 767px) {
	.b2b-matrix__row {
		grid-template-columns: minmax(0, 1fr) 90px;
		grid-template-areas:
			"name qty"
			"meta qty";
	}
	.b2b-matrix__name  { grid-area: name; }
	.b2b-matrix__price { grid-area: meta; }
	.b2b-matrix__stock { display: none; }
	.b2b-matrix__row .b2b-matrix__qty { grid-area: qty; }
}

/* ── Ballonnetje bij de knoppen ─────────────────────────────────────────────
   Opmaak komt van .wishlist-toast uit het thema; alleen de afstand tot de knop
   is hier kleiner. De ballon van het thema zweeft een volle balhoogte boven de
   verlanglijstknop, en dat is bij een rij knoppen naast elkaar te veel lucht. */
.wishlist-toast.b2b-toast.is-visible {
	transform: translate(-50%, -95%) scale(1);
}