/* =========================================================
   Brock Biljartfabriek — Winkelwagen (cart)
   Figma: 482:9274 (gevuld) & 482:9042 (leeg)

   Stijlt de klassieke WooCommerce cart-markup
   (.woocommerce-cart-form, .cart_totals, .cart-empty,
   .wc-proceed-to-checkout) naar de Brock-design.
   Alle regels zijn gescoped op body.woocommerce-cart zodat ze
   alleen op de winkelwagen-pagina gelden.
   ========================================================= */

/* ---------------------------------------------------------
   Pagina-kop "WINKELWAGEN" (Impact, 40px, uppercase, zwart)
   --------------------------------------------------------- */
.woocommerce-cart .sellabees-entry__title {
	font-family: var(--sellabees-font-heading, "Impact"), sans-serif;
	font-weight: 400;
	font-size: 40px;
	line-height: 1.1;
	text-transform: uppercase;
	color: var(--sellabees-ink, #000);
	margin: 12px 0 20px;
}

/* De entry-content krijgt geen extra opmaak; layout zit in de cart-blokken. */
.woocommerce-cart .sellabees-entry__content {
	margin: 0;
}

/* ---------------------------------------------------------
   Content-container: smaller en gecentreerd (Figma 482:9274).
   Live thema-container is 1458px (content ~1410px, ~255px zijmarge);
   design = ~1201px content, gecentreerd (~360px zijmarge). Zelfde
   patroon als checkout.css (.woocommerce-checkout #site-main
   .sellabees-container { max-width: ... }): 1201 + 2×24px
   container-padding → bruikbare ~1201px content. De 2-koloms grid
   (61.9% / 27.9%) schaalt automatisch mee. Footer blijft 1458px.
   --------------------------------------------------------- */
.woocommerce-cart #site-main .sellabees-container {
	max-width: 1249px;
}

/* ---------------------------------------------------------
   Twee-koloms layout: cart-tabel links, totalen rechts.
   Figma (482:9274): inhoud x360–1561 (1201px), met links 743px,
   tussenruimte 123px en rechts 335px → 61.9% / 10.2% / 27.9%.
   Als grid-percentages uitgedrukt, zodat de verhouding 1:1 met
   het design blijft in de bredere thema-container (i.p.v. een
   vaste 335px-kolom die proportioneel te smal wordt).
   --------------------------------------------------------- */
.woocommerce-cart .woocommerce {
	display: grid;
	grid-template-columns: 61.9% 27.9%;
	column-gap: 10.2%;
	row-gap: 20px;
	align-items: start;
}

.woocommerce-cart .woocommerce-notices-wrapper {
	grid-column: 1 / -1;
}

/* Trust-checks (desktop) staan nu IN de totalen-kolom, BOVEN het totaalbedrag
   (gerenderd via woocommerce_before_cart_totals → binnen .cart_totals). Geen
   aparte full-breedte grid-regel meer nodig. */

.woocommerce-cart .woocommerce-cart-form {
	min-width: 0;
	margin: 0;
}

/* Totalen-kolom lijnt boven uit met de producten (de oude 50px-offset hoorde bij
   de trust-checks die vroeger ín deze kolom stonden; die staan nu boven de cart). */
.woocommerce-cart .cart-collaterals {
	margin-top: 0;
	max-width: 100%;
}

/* WooCommerce zet cart-collaterals soms op 48% met floats: neutraliseren. */
.woocommerce-cart .cart-collaterals,
.woocommerce-cart .cart-collaterals .cart_totals {
	float: none;
	width: 100%;
}

/* ---------------------------------------------------------
   Producten-tabel (.woocommerce-cart-form__contents)
   --------------------------------------------------------- */
.woocommerce-cart .woocommerce-cart-form__contents {
	width: 100%;
	border: 0;
	border-collapse: collapse;
	margin: 0;
	font-family: var(--sellabees-font-body, "Avenir LT Pro"), sans-serif;
}

/* Koprij verbergen — de design toont geen tabelkoppen. */
.woocommerce-cart .woocommerce-cart-form__contents thead {
	display: none;
}

/* WooCommerce' plugin-CSS tekent een afgeronde buitenrand om .shop_table en
   schaalt de afbeelding naar 32px — beide neutraliseren (design heeft alleen
   dunne rij-hairlines en een 131px foto). */
.woocommerce-cart table.woocommerce-cart-form__contents,
.woocommerce-cart table.shop_table {
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}

/* Productrij: dunne scheidingslijn boven en onder (Figma Line 10).
   De rij is een grid die het design 1:1 volgt (482:9274):
     foto (links, 2 rijen hoog) · titel+variatie boven, aantal eronder ·
     × rechtsboven · regeltotaal rechtsonder (op de aantal-regel).
   ┌───────┬──────────────┬──────────┐
   │       │ naam         │  ×       │
   │ foto  ├──────────────┼──────────┤
   │       │ aantal       │  prijs   │
   └───────┴──────────────┴──────────┘ */
.woocommerce-cart .woocommerce-cart-form__cart-item {
	border-bottom: 1px solid var(--sellabees-border, #e3e3e3);   /* alleen onderrand; bovenste item dus geen lijn erboven */
	display: grid;
	grid-template-columns: 131px minmax(0, 1fr) auto;
	grid-template-areas:
		"thumb name remove"
		"thumb qty  price";
	column-gap: 22px;
	row-gap: 12px;
	align-content: center;
	padding: 26px 0;
}

.woocommerce-cart .woocommerce-cart-form__cart-item td {
	border: 0 !important;   /* WC' `table.shop_table td{border-top}` (0,2,2) wint anders → halve lijnen */
	padding: 0;
	background: transparent;
}
/* Plaatsing in het grid (DOM = remove, thumb, name, price, qty, subtotal). */
.woocommerce-cart .woocommerce-cart-form__cart-item .product-thumbnail { grid-area: thumb; align-self: center; }
.woocommerce-cart .woocommerce-cart-form__cart-item .product-name      { grid-area: name; align-self: center; }
.woocommerce-cart .woocommerce-cart-form__cart-item .product-quantity  { grid-area: qty; align-self: center; justify-self: start; }
.woocommerce-cart .woocommerce-cart-form__cart-item .product-remove    { grid-area: remove; align-self: start; justify-self: end; }
.woocommerce-cart .woocommerce-cart-form__cart-item .product-subtotal  { grid-area: price; align-self: center; justify-self: end; }

/* Verwijder-knop (×) — rechts op de rij, fel rood (Figma #ff3a3a). */
.woocommerce-cart .product-remove {
	width: auto;
	padding: 0 !important;
}
/* KLANTFEEDBACK 4: kruisje gelijktrekken aan het design. De Figma-× (487:33622 /
   482:9274) is een SOLIDE, dikke X (#FF3A3A, 15×15, armbreedte ~1.5px) — geen
   dunne ×. WooCommerce rendert het "×"-teken (×); met font-weight:700 en
   iets grotere glyph benadert dit de massieve design-X 1:1. */
.woocommerce-cart .product-remove .remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 15px;          /* Figma 482:9274: × is 15px (was 20px live) */
	height: 15px;
	font-size: 18px;      /* dikker/groter zodat de glyph de 15px-box solide vult */
	line-height: 1;
	font-weight: 700;
	color: #ff3a3a !important;
	background: none !important;
	border-radius: 0;
	text-decoration: none;
}
.woocommerce-cart .product-remove .remove:hover {
	color: #e02525 !important;
	background: none !important;
}

/* Productafbeelding — 131px vierkante box (Figma 130/131px).
   KLANTFEEDBACK: met `object-fit:cover` werd elke niet-vierkante foto bijgesneden
   tot het vierkant — een brede keurekhouder liep letterlijk aan beide kanten uit
   beeld. Nu `contain` in een witte box: de foto wordt VOLLEDIG getoond en
   gecentreerd, precies zoals de productkaarten (layout.css .sellabees-card__image)
   en de checkout-thumb (checkout.css .sellabees-co-thumb) het al deden. De box
   blijft 131px, dus de rijhoogte en het grid veranderen niet.
   !important wint van WooCommerce' plugin-regel `table.cart img{width:32px}`. */
.woocommerce-cart .product-thumbnail {
	width: 131px;
	flex: 0 0 131px;
	padding: 0 !important;
}
.woocommerce-cart .product-thumbnail img {
	width: 131px !important;
	height: 131px !important;
	object-fit: contain;
	object-position: center;
	background: #fff;   /* nette, consistente witruimte rond liggende/staande foto's */
	border-radius: 0;
}

/* Productnaam — Avenir Book 14px zwart, links uitgelijnd (Figma x=512). */
.woocommerce-cart .product-name {
	font-size: 14px;
	font-weight: 300;
	color: var(--sellabees-ink, #000);
	text-align: left;
}
.woocommerce-cart .product-name a {
	color: var(--sellabees-ink, #000);
	text-decoration: none;
	font-weight: 300;
}
.woocommerce-cart .product-name a:hover {
	color: var(--sellabees-red, #dd2532);
}

/* Variatie-/meta-regel onder de naam (bv. "Kleur: Platinum")
   — Avenir Roman italic 12px. */
.woocommerce-cart .product-name .variation,
.woocommerce-cart .product-name dl.variation {
	margin: 4px 0 0;
	font-size: 12px;
	font-style: italic;
	font-weight: 400;
	color: var(--sellabees-ink, #000);
}
.woocommerce-cart .product-name .variation dt,
.woocommerce-cart .product-name .variation dd {
	display: inline;
	margin: 0;
	font-weight: inherit;
}
.woocommerce-cart .product-name .variation dd { margin-right: 8px; }

/* Prijs- en subtotaal-cellen — Avenir Book 14px, rechts uitgelijnd. */
.woocommerce-cart .product-price,
.woocommerce-cart .product-subtotal {
	font-size: 14px;
	font-weight: 300;
	color: var(--sellabees-ink, #000);
	text-align: right;
	white-space: nowrap;
}
.woocommerce-cart .product-price .amount,
.woocommerce-cart .product-subtotal .amount {
	font-weight: 300;
}

/* Figma toont per rij één bedrag (het regeltotaal), rechts uitgelijnd.
   De aparte stukprijs-kolom van WooCommerce wordt verborgen zodat de subtotaal
   (regeltotaal) het enige bedrag op de rij is — exact zoals de design. */
.woocommerce-cart .woocommerce-cart-form__contents td.product-price {
	display: none;
}

/* ---------------------------------------------------------
   Aantal-veld — de stepper (− / waarde / +) komt uit de basis
   .sellabees-qty in layout.css (81×35). Hier alleen uitlijning.
   --------------------------------------------------------- */
.woocommerce-cart .product-quantity {
	flex: 0 0 81px;
	text-align: center;
}
/* Figma 482:9485: aantalwaarde Avenir Book 10px gecentreerd (cart-specifiek;
   de productpagina-stepper houdt zijn eigen grotere waarde). */
.woocommerce-cart .sellabees-qty input.qty {
	font-size: 10px;
}

/* ---------------------------------------------------------
   Acties-rij — het design toont GEEN coupon-veld en GEEN
   "Update winkelwagen"-knop. Coupon volledig verbergen; de
   update-knop blijft in de DOM (de stepper-JS klikt 'm) maar
   wordt visueel verborgen.
   --------------------------------------------------------- */
.woocommerce-cart .woocommerce-cart-form__contents td.actions {
	border: 0;
	padding: 0;
}
.woocommerce-cart td.actions .coupon {
	display: none;
}
.woocommerce-cart td.actions button[name="update_cart"] {
	position: absolute;
	left: 0;             /* anker links → de 1px-box kan nooit rechts buiten beeld vallen */
	width: 1px !important;
	min-width: 0 !important;   /* WC' .button-min-breedte klampt de 1px anders terug → 32px-box = 7px overflow */
	height: 1px !important;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* ---------------------------------------------------------
   Totalen-blok (.cart_totals) rechts
   --------------------------------------------------------- */
.woocommerce-cart .cart_totals {
	font-family: var(--sellabees-font-body, "Avenir LT Pro"), sans-serif;
}

/* "Cart totals"-kop verbergen — design toont alleen "Totaalbedrag". */
.woocommerce-cart .cart_totals > h2 {
	display: none;
}

.woocommerce-cart .cart_totals table {
	width: 100%;
	border: 0;
	border-collapse: collapse;
	margin: 0;
}
.woocommerce-cart .cart_totals table th,
.woocommerce-cart .cart_totals table td {
	border: 0;
	padding: 6px 0;
	background: transparent;
	font-size: 14px;
	color: var(--sellabees-ink, #000);
}
.woocommerce-cart .cart_totals table th {
	font-weight: 300;
	text-align: left;
}
.woocommerce-cart .cart_totals table td {
	text-align: right;
	font-weight: 300;
}

/* Verzending NIET op de cart verwerken (pas op de checkout na adresinvoer; WC-optie
   woocommerce_shipping_cost_requires_address=yes → cart-totaal = productprijs).
   Subtotaal/verzending/fee verbergen, zodat alleen het Totaalbedrag toont.
   De BTW-regel (.tax-total) laten we WÉL staan: zodra er BTW is, verschijnt die
   vanzelf boven het totaal. Nu staat WC-belasting uit, dus die regel bestaat niet. */
.woocommerce-cart .cart_totals .cart-subtotal,
.woocommerce-cart .cart_totals .shipping,
.woocommerce-cart .cart_totals .woocommerce-shipping-totals,
.woocommerce-cart .cart_totals .fee {
	display: none;
}

/* Eindtotaal "Totaalbedrag" (Figma 482:9507/9508): label links (Avenir 85 Heavy),
   bedrag rechts op DEZELFDE regel. De rij als flex zodat th/td netjes op één
   baseline uitlijnen; WC' td/th-rand (border-top) wordt geforceerd weggehaald
   (anders een streep door de regel). */
.woocommerce-cart .cart_totals .order-total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	border: 0 !important;
	padding-top: 4px;
}
.woocommerce-cart .cart_totals .order-total th,
.woocommerce-cart .cart_totals .order-total td {
	border: 0 !important;
	padding: 0;
}
.woocommerce-cart .cart_totals .order-total th {
	font-weight: 800;
	color: var(--sellabees-ink, #000);
	font-size: 0;
}
.woocommerce-cart .cart_totals .order-total th::after {
	content: "Totaalbedrag";
	font-size: 14px;
}
.woocommerce-cart .cart_totals .order-total td,
.woocommerce-cart .cart_totals .order-total .amount {
	font-weight: 300;
	white-space: nowrap;
}

/* ---------------------------------------------------------
   "Ga verder met bestellen"-knop (.wc-proceed-to-checkout)
   — rood, 100% van de totalen-kolom, 40px, Impact uppercase.
   --------------------------------------------------------- */
.woocommerce-cart .wc-proceed-to-checkout {
	margin: 38px 0 0;
	padding: 0;
}
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button.button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 40px;
	padding: 0 16px;
	border: 0;
	border-radius: 0;
	background-color: var(--sellabees-red, #dd2532);
	background-image: none;
	color: #fff;
	font-family: var(--sellabees-font-heading, "Impact"), sans-serif;
	font-weight: 400;
	font-size: 14px;
	letter-spacing: .02em;
	text-transform: uppercase;
	text-align: center;
	text-decoration: none;
	transition: background-color .15s ease;
}
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button.button:hover {
	background-color: var(--sellabees-red-dark, #c01f2b);
	color: #fff;
}

/* De knoptekst "Ga verder met bestellen" komt nu uit de gettext-filter
   (functions.php) i.p.v. een CSS-::after-hack. */

/* Trust-checkmarks boven het totaal (Figma: groene checks #12b347). */
.woocommerce-cart .sellabees-cart-trust {
	list-style: none;
	margin: 0 0 16px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

/* Twee kopieën staan in de DOM (functions.php): desktop in de totalen-kolom,
   mobiel bovenaan de cart-form. Desktop toont alleen de desktop-kopie. */
.woocommerce-cart .sellabees-cart-trust--mobile {
	display: none;
}
/* KLANTFEEDBACK 3: USP's/trust-checks vetgedrukt — Figma 487:33318 gebruikt daar
   Avenir LT Pro 85 Heavy. (De design toonde in deze strip ook "Betaal gemakkelijk
   achteraf"; die regel is op klantverzoek vervallen omdat achteraf betalen niet
   wordt aangeboden. De vet-stijl blijft voor de overige trust-regels.) */
.woocommerce-cart .sellabees-cart-trust li {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: var(--sellabees-font-body, "Avenir LT Pro"), sans-serif;
	font-size: 14px;
	font-weight: 800;
	color: var(--sellabees-ink, #000);
}
.woocommerce-cart .sellabees-cart-trust__check {
	color: #12b347;
	flex: 0 0 auto;
}

/* Betaallogo's onder de checkout-knop. */
.woocommerce-cart .sellabees-cart-payments {
	list-style: none;
	margin: 16px 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	justify-content: center;
}
.woocommerce-cart .sellabees-cart-payments img {
	height: 24px;
	width: auto;
	display: block;
}
/* Gateways zonder eigen logo (bv. Bankoverschrijving, Contant) → nette tekst-badge. */
.woocommerce-cart .sellabees-cart-payments .sellabees-payment__label {
	display: inline-block;
	padding: 6px 12px;
	border: 1px solid #dcdcdc;
	border-radius: 6px;
	background: #fff;
	font-size: 13px;
	line-height: 1.2;
	color: #333;
	white-space: nowrap;
}

/* ---------------------------------------------------------
   Lege winkelwagen (.cart-empty / eigen template-override)
   Figma 482:9042 — gecentreerd, kop Impact 40px, subtekst,
   rode "Verder winkelen"-knop (240px).
   --------------------------------------------------------- */

/* Verberg de standaard WP-paginakop "Winkelwagen" boven de lege staat;
   de override toont zijn eigen gecentreerde kop. */
.woocommerce-cart.woocommerce-page .sellabees-entry__content
	.woocommerce:has(.sellabees-cart-empty) {
	display: block;
}

/* Standaard WooCommerce-melding "Your cart is currently empty" verbergen. */
.woocommerce-cart .wc-empty-cart-message,
.woocommerce-cart .cart-empty {
	display: none;
}

.woocommerce-cart .sellabees-cart-empty {
	text-align: center;
	padding: 40px 0 64px;
	font-family: var(--sellabees-font-body, "Avenir LT Pro"), sans-serif;
}
.woocommerce-cart .sellabees-cart-empty__title {
	margin: 0 0 12px;
	font-family: var(--sellabees-font-heading, "Impact"), sans-serif;
	font-weight: 400;
	font-size: 40px;
	line-height: 1.1;
	text-transform: uppercase;
	color: var(--sellabees-ink, #000);
}
.woocommerce-cart .sellabees-cart-empty__text {
	margin: 0 0 28px;
	font-size: 14px;
	font-weight: 300;
	color: var(--sellabees-ink, #000);
}
.woocommerce-cart .sellabees-cart-empty__action {
	margin: 0;
}
.woocommerce-cart a.sellabees-cart-empty__button.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 240px;
	height: 40px;
	padding: 0 16px;
	border: 0;
	border-radius: 0;
	background-color: var(--sellabees-red, #dd2532);
	background-image: none;
	color: #fff;
	font-family: var(--sellabees-font-heading, "Impact"), sans-serif;
	font-weight: 400;
	font-size: 14px;
	letter-spacing: .02em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color .15s ease;
}
.woocommerce-cart a.sellabees-cart-empty__button.button:hover {
	background-color: var(--sellabees-red-dark, #c01f2b);
	color: #fff;
}

/* Op de lege staat staat de paginakop "Winkelwagen" niet in de design;
   verbergen wanneer de eigen lege-kop aanwezig is. */
.woocommerce-cart .sellabees-entry:has(.sellabees-cart-empty)
	.sellabees-entry__title {
	display: none;
}

/* ---------------------------------------------------------
   Responsive — tablet: stapel de twee kolommen onder elkaar.
   --------------------------------------------------------- */
@media (max-width: 980px) {
	.woocommerce-cart .woocommerce {
		grid-template-columns: minmax(0, 1fr);   /* min 0 → track mag krimpen, geen horizontale overflow */
		column-gap: 0;
		row-gap: 0px;
	}
	.woocommerce-cart .cart-collaterals {
		margin-top: 0;
	}
	.woocommerce-cart .woocommerce-cart-form,
	.woocommerce-cart .cart-collaterals {
		width: 100%;
	}
}

/* =========================================================
   MOBIEL (≤900px) — Figma 487:33318 (gevuld) / 487:32670 (leeg).
   393px breed, content-marge 49px → ±295px. Eén kolom: titel →
   trust-checks → producten → totaal → knop → betaallogo's.
   De productrij behoudt de desktop-grid (foto · naam/aantal ·
   ×/regeltotaal), met een kleinere foto (83px, Figma 487:33601).
   ========================================================= */
@media (max-width: 981px) {
	/* Paginakop "WINKELWAGEN" — Impact 35px (Figma 487:33603). */
	.woocommerce-cart .sellabees-entry__title,
	.woocommerce-cart .sellabees-cart-empty__title {
		font-size: 35px;
		margin: 4px 0 18px;
	}

	/* Eén kolom; productlijst boven, totalen/knop eronder. */
	.woocommerce-cart .woocommerce {
		grid-template-columns: minmax(0, 1fr);   /* min 0 → track mag krimpen, geen horizontale overflow */
		column-gap: 0;
		row-gap: 22px;
	}
	.woocommerce-cart .cart-collaterals {
		margin-top: 0;
	}

	/* Trust-checks bovenaan (Figma 487:33318, y166–222 → boven de producten).
	   De desktop-kopie in de totalen-kolom verbergen, de mobiele kopie (bovenaan
	   de cart-form, vóór de productentabel) tonen. */
	.woocommerce-cart .sellabees-cart-trust--desktop {
		display: none;
	}
	.woocommerce-cart .sellabees-cart-trust--mobile {
		display: flex;
		margin: 0 0 24px;
	}

	/* WooCommerce' woocommerce-smallscreen.css (≤768px) zet de cart-tabel om
	   naar block-rijen met "Label:"-prefixes en verbergt de thead. Dat moet hier
	   wijken voor de Figma-grid-rij. Specificiteit verhoogd met table.shop_table. */
	.woocommerce-cart table.shop_table_responsive tr.woocommerce-cart-form__cart-item,
	.woocommerce-cart .woocommerce-cart-form__cart-item {
		display: grid;
		grid-template-columns: 84px minmax(0, 1fr) auto;
		/* Vaste 2-rijen-grid (Figma 487:33318): rij 1 = naam/×, rij 2 = stepper/regeltotaal.
		   Expliciet zodat een eventueel niet-verborgen cel GEEN derde implicietse rij maakt. */
		grid-template-areas:
			"thumb name name"
			"thumb qty  price";
		grid-template-rows: auto auto;
		grid-auto-rows: 0;        /* implicietse rijen (bv. stukprijs) krijgen 0 hoogte */
		column-gap: 18px;
		row-gap: 8px;
		align-content: start;     /* foto + naam boven uitgelijnd (Figma: naam-top = foto-top) */
		padding: 18px 0;
		position: relative;       /* anker voor de absolute × rechtsboven */
	}
	/* td's terug naar hun grid-areas (smallscreen zet ze op display:block met
	   text-align:right + ::before-labels).
	   KLANTFEEDBACK 1: WooCommerce' smallscreen.css zet op even rijen
	   `tr:nth-child(2n) td { background-color: rgba(0,0,0,.025) }` → een beige
	   vakje achter het bedrag/de subtotaal. Design (487:33318) heeft geen vakje;
	   achtergrond transparant forceren. */
	.woocommerce-cart table.shop_table_responsive tr.woocommerce-cart-form__cart-item td {
		display: block;
		text-align: inherit;
		margin: 0;
		background: transparent !important;
	}
	.woocommerce-cart table.shop_table_responsive
		tr.woocommerce-cart-form__cart-item td::before {
		content: none !important;   /* "Product:/Aantal:/Subtotaal:"-labels weg */
	}
	/* Herstel de grid-area-plaatsing (smallscreen-override kan ze resetten). */
	.woocommerce-cart .woocommerce-cart-form__cart-item .product-thumbnail { display: block; grid-area: thumb; align-self: start; }
	/* KLANTFEEDBACK 2: productnaam links uitlijnen. Smallscreen.css forceert
	   `td { text-align: right !important }`; daarom hier ook !important op de td
	   én de link, anders erft de inline <a> de rechtse uitlijning. */
	.woocommerce-cart .woocommerce-cart-form__cart-item .product-name      { display: block; grid-area: name; align-self: start; text-align: left !important; padding: 0 24px 0 0; }
	.woocommerce-cart .woocommerce-cart-form__cart-item .product-name,
	.woocommerce-cart .woocommerce-cart-form__cart-item .product-name a { text-align: left !important; }
	/* WooCommerce' woocommerce-smallscreen.css (≤768px) forceert `td { text-align:
	   right !important }` én WC' `table.shop_table td { padding: 9px 12px }` houdt 12px
	   zijpadding op de cel → de inline-flex stepper kreeg 12px gat links (uit lijn met
	   de productnaam) én 12px ruimte rechts. Hier: text-align links (!important wint) +
	   zijpadding nullen (!important verslaat de smallscreen-td-padding) zodat de stepper
	   flush onder de naam uitlijnt en de cel exact tot het aantal-veld krimpt — geen
	   lege ruimte rechts meer. */
	.woocommerce-cart .woocommerce-cart-form__cart-item .product-quantity  {
		display: block; grid-area: qty; align-self: center; justify-self: start;
		width: max-content; max-width: 100%;
		padding-left: 0 !important; padding-right: 0 !important;
		text-align: left !important;
		flex: 0 0 auto;
	}
	/* × als losse markering rechtsboven (Figma 487:33622) — uit de grid-flow
	   gehaald zodat de naam de volle breedte tot de rechterrand mag gebruiken. */
	.woocommerce-cart .woocommerce-cart-form__cart-item .product-remove    { display: block; position: absolute; top: 18px; right: 0; width: auto; }
	.woocommerce-cart .woocommerce-cart-form__cart-item .product-subtotal  { display: block; grid-area: price; align-self: center; justify-self: end; text-align: right; }
	/* WooCommerce' smallscreen.css forceert de stukprijs-cel terug naar display:block;
	   met !important verbergen zodat alleen het regeltotaal zichtbaar is (Figma). */
	.woocommerce-cart table.shop_table_responsive tr.woocommerce-cart-form__cart-item td.product-price,
	.woocommerce-cart .woocommerce-cart-form__contents td.product-price { display: none !important; }
	.woocommerce-cart .product-thumbnail {
		width: 84px;
		flex: 0 0 84px;
	}
	.woocommerce-cart .product-thumbnail img {
		width: 84px !important;
		height: 84px !important;
	}

	/* Productnaam Avenir ±14px (Figma 487:33606/33634). */
	.woocommerce-cart .product-name {
		font-size: 14px;
		line-height: 1.3;
	}
	.woocommerce-cart .product-name .variation,
	.woocommerce-cart .product-name dl.variation {
		font-size: 12px;
	}

	/* × rechtsboven (Figma 487:33622, 15px solide X). */
	.woocommerce-cart .product-remove .remove {
		width: 15px;
		height: 15px;
		font-size: 18px;
		font-weight: 700;
	}

	/* Regeltotaal rechts, op de naam-regel uitgelijnd. */
	.woocommerce-cart .product-subtotal {
		font-size: 14px;
	}

	/* Aantal-stepper: 81×35 onder de naam (Figma 487:33616). */
	.woocommerce-cart .product-quantity {
		justify-self: start;
	}

	/* Totaalbedrag-regel: label links + bedrag rechts (Figma 482:20603/20604). */
	.woocommerce-cart .cart_totals .order-total th::after,
	.woocommerce-cart .cart_totals .order-total td,
	.woocommerce-cart .cart_totals .order-total .amount {
		font-size: 14px;
	}
	/* WC' woocommerce-smallscreen.css (≤768px) verbergt de th (waardoor onze
	   "Totaalbedrag"-::after wegvalt) en plakt op de td een data-title-label
	   "Totaal: ". Terugdraaien: th weer tonen zodat "Totaalbedrag" verschijnt,
	   en WC's "Totaal:"-label weg. */
	.woocommerce-cart .cart_totals .order-total th {
		display: block !important;
	}
	.woocommerce-cart .cart_totals .order-total td::before {
		content: none !important;
	}
	/* KLANTFEEDBACK 1: ook de totalen-tabel is een shop_table_responsive, dus de
	   even-rij-striping (rgba(0,0,0,.025)) zet een beige vakje achter het
	   Totaalbedrag (+ de eventuele BTW-regel). Achtergrond transparant forceren. */
	.woocommerce-cart .cart_totals table tr td,
	.woocommerce-cart .cart_totals .order-total td,
	.woocommerce-cart .cart_totals .tax-total td {
		background: transparent !important;
	}

	/* Knop "Ga verder met bestellen" — volle breedte, 40px (Figma 482:20605). */
	.woocommerce-cart .wc-proceed-to-checkout {
		margin-top: 20px;
	}

	/* Betaallogo's gecentreerd onder de knop (Figma 482:20607 e.v.). */
	.woocommerce-cart .sellabees-cart-payments {
		margin-top: 18px;
		gap: 12px;
	}
	.woocommerce-cart .sellabees-cart-payments img {
		height: 27px;
	}

	/* Lege winkelwagen (Figma 487:32670): gecentreerd, knop 240px. */
	.woocommerce-cart .sellabees-cart-empty {
		padding: 48px 0 56px;
	}
	.woocommerce-cart .sellabees-cart-empty__text {
		max-width: 280px;
		margin-left: auto;
		margin-right: auto;
	}
}

/* =========================================================
   Cart-/checkout-loader (logo i.p.v. WC-spinner) is VERHUISD naar de core-stylesheet
   (sellabees-shops-core/assets/css/sellabees-shops-core.css) zodat 'ie GLOBAAL werkt —
   ook op de checkout/besteloverzicht. Stond eerder hier in de page-specifieke cart.css,
   waardoor op checkout de standaard WooCommerce-spinner door het logo heen schemerde
   (dubbel laad-icoon). De .woocommerce-cart-specifieke override (klein rondje in het
   aantal-vakje) staat in inc/cart-ajax-qty.php.
   --------------------------------------------------------- */

/* De winkelwagen-aantal partiële-AJAX-spinner (klein rond spinnertje ín het
   aantal-vakje) + het onderdrukken van het grote logo-overlay op .woocommerce-cart
   is verhuisd naar de core (sellabees-shops-core/inc/cart-ajax-qty.php → inline-style
   op de core-stylesheet), zodat elke shop het krijgt. Accent = --sellabees-red. */