/**
 * Altus — Winkelwagenpagina, herbouw van de Claude Design-handoff
 * "Altus winkelwagen ontwerp" (enkel het winkelwagen-scherm "2a", niet de
 * afrekenpagina "3a" — dat blijft de bestaande checkout). Kleuren via de
 * bestaande site-variabelen i.p.v. de placeholder-kleuren uit het ontwerp.
 * Zie altus-cart-page.php.
 */

/* Sinds v2 is de pagina zelf een echt Bricks-sjabloon (zie
   altus-cart-page.php): breedte/padding van het hoofdblok stelt Sylvie nu
   rechtstreeks in de Bricks-editor in (op de container rond de shortcodes),
   niet meer hier vastgezet. Navy blijft wél hier de standaardkleur voor alle
   tekst op deze pagina — vroeger via 1 gezamenlijke ".altus-cartpagina"
   omwikkel-div, nu op body-niveau, want de shortcodes staan los naast elkaar
   als aparte Bricks-elementen zonder gezamenlijke ouder. */
body.woocommerce-cart {
	color: var(--altus-navy, #223a80);
}

/* Alle andere containers/onderdelen tonen niets tijdens een lege
   winkelwagen — elke shortcode geeft dan al '' terug (zie PHP), dit is enkel
   voor de Bricks-container eromheen, die anders als leeg blok met wat
   padding/gap zou blijven staan. */
body.altus-winkelwagen-leeg .altus-cartpagina-hoofdblok {
	display: none;
}


.altus-cartpagina__titel {
	margin: 0 0 24px;
	font-size: 34px;
	font-weight: 800;
	letter-spacing: -0.01em;
	color: var(--altus-navy, #223a80);
}

/* ------------------------------------------------------- stappenbalk -- */
.altus-cartpagina__stappenbalk {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
	margin: 0 0 28px;
}

.altus-cartpagina__stappenbalk > * {
	display: flex;
	align-items: baseline;
	gap: 10px;
	padding-top: 12px;
	font-weight: 700;
	font-size: 15px;
	text-decoration: none;
}

.altus-cartpagina__stap-actief {
	border-top: 4px solid var(--altus-navy, #223a80);
	color: var(--altus-navy, #223a80);
}

.altus-cartpagina__stap-actief span {
	color: var(--altus-navy, #223a80);
}

.altus-cartpagina__stap-volgend {
	border-top: 2px solid #e2e6ec;
	color: #6b7788;
}

.altus-cartpagina__stap-volgend:hover {
	color: var(--altus-navy, #223a80);
}

/* ---------------------------------------------------------- lege wagen -- */
.altus-cartpagina--leeg {
	max-width: 720px;
	margin: 48px auto;
	padding: 48px;
	background: var(--altus-grijs, #f2f4f8);
	border-radius: 8px;
	text-align: left;
}

.altus-cartpagina--leeg .altus-cartpagina__titel {
	font-size: 32px;
}

.altus-cartpagina__leeg-tekst {
	margin: 0 0 20px;
	font-size: 16px;
	color: #4c5a70;
}

.altus-cartpagina__leeg-knop {
	display: inline-block;
	padding: 12px 20px;
	background: var(--altus-oranje, #ff6a00);
	color: #fff;
	font-weight: 700;
	font-size: 15px;
	text-decoration: none;
	border-radius: 6px;
}

.altus-cartpagina__leeg-knop:hover {
	background: var(--altus-navy, #223a80);
	color: #fff;
}

/* --------------------------------------------------------------- lay-out --
   De rij (producten | overzicht) en de vaste breedte van de overzicht-kolom
   staan sinds v2 als echte Bricks-instellingen op de container zelf (zie
   altus-cart-page.php) — hier enkel nog de mobiele terugval: onder elkaar
   i.p.v. naast elkaar, vaste kolombreedte los. */
@media (max-width: 960px) {
	.altus-cartpagina-grid {
		flex-wrap: wrap;
	}

	.altus-cartpagina-totalenkolom {
		width: 100% !important;
		min-width: 0 !important;
		max-width: 100% !important;
		margin-left: 0 !important;
		margin-top: 32px;
	}
}

/* De links/rechts-padding van het hoofdblok (100px) is, net als de rij en de
   kolombreedte hierboven, rechtstreeks door Sylvie in Bricks ingesteld voor
   desktop, zonder mobiele instelling — samen 200px op een schermbreedte van
   375px, waardoor de hele winkelwagen-inhoud (foto's, stapper, verwijder-
   knop …) van het scherm afliep (gevonden tijdens de mobiele controle van de
   hele site, 29/09/2026). */
@media (max-width: 700px) {
	.altus-cartpagina-hoofdblok {
		padding-left: 20px !important;
		padding-right: 20px !important;
	}
}

@media (max-width: 478px) {
	.altus-cartpagina-hoofdblok {
		padding-left: 16px !important;
		padding-right: 16px !important;
	}
}

/* Nóg een laag hoger zit dezelfde vaste 160px-padding als op de
   categoriepagina's (zie altus-categorie.css) — hier op de naamloze Bricks-
   sectie rond het hele winkelwagen/afrekenblok. Geen gedeelde CSS-klasse
   beschikbaar (Sylvie gaf deze sectie er nooit één), dus rechtstreeks op de
   twee bekende Bricks-ID's: winkelwagen (8a8fd5) en afrekenen (b2b72d) —
   beide sjablonen gebruiken dit bestand. */
@media (max-width: 700px) {
	#brxe-8a8fd5, #brxe-b2b72d {
		padding-left: 20px !important;
		padding-right: 20px !important;
	}
}

@media (max-width: 478px) {
	#brxe-8a8fd5, #brxe-b2b72d {
		padding-left: 16px !important;
		padding-right: 16px !important;
	}
}

/* -------------------------------------------------------------- stappen -- */
.altus-cartpagina__stap-kop {
	display: flex;
	align-items: baseline;
	gap: 14px;
	margin: 32px 0 16px;
	padding-top: 20px;
	border-top: 2px solid #e2e6ec;
}

.altus-cartpagina__stap-kop:first-child {
	margin-top: 0;
}

.altus-cartpagina__stap-nr {
	font-size: 34px;
	font-weight: 800;
	line-height: 1;
	color: var(--altus-navy, #223a80);
}

.altus-cartpagina__stap-titel {
	font-size: 21px;
	font-weight: 800;
}

.altus-cartpagina__stap-meta {
	color: #6b7788;
	font-size: 14px;
}

/* ------------------------------------------------------- productenlijst -- */
.altus-cartpagina__lijst-kop {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 130px 110px;
	gap: 16px;
	padding: 0 0 8px;
	border-bottom: 2px solid #e2e6ec;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #6b7788;
}

@media (max-width: 700px) {
	.altus-cartpagina__lijst-kop {
		display: none;
	}
}

.altus-cartpagina__item {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 130px 110px;
	gap: 16px;
	align-items: start;
	padding: 18px 0;
	border-bottom: 1px solid #e2e6ec;
	transition: opacity 0.15s ease;
}

.altus-cartpagina__item.is-bezig {
	opacity: 0.45;
	pointer-events: none;
}

@media (max-width: 700px) {
	.altus-cartpagina__item {
		grid-template-columns: 1fr;
		gap: 10px;
	}
}

.altus-cartpagina__item-hoofd {
	display: flex;
	gap: 14px;
	min-width: 0;
}

.altus-cartpagina__item-foto {
	flex: none;
	width: 88px;
	height: 88px;
	border-radius: 6px;
	overflow: hidden;
	background: var(--altus-grijs, #f2f4f8);
}

.altus-cartpagina__item-foto img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.altus-cartpagina__item-info {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.altus-cartpagina__item-naam {
	margin: 0;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
}

.altus-cartpagina__item-naam a {
	color: var(--altus-navy, #223a80);
	text-decoration: none;
}

.altus-cartpagina__item-naam a:hover {
	color: var(--altus-navy, #223a80);
}

.altus-cartpagina__item-sku {
	font-size: 12px;
	color: #6b7788;
}

/* Onderdelen van een samengesteld product (WPC Composite) — WooCommerce's
   eigen wc_get_formatted_cart_item_data() geeft een <dl class="variation">
   terug; hier enkel platte, kleine tekst van maken (geen prijs, geen
   invoervelden — dat levert de plugin zelf al niet mee, zie
   altus_cart_item_rij_html()). */
.altus-cartpagina__item-onderdelen dl.variation {
	margin: 2px 0 0;
	font-size: 12px;
	color: #6b7788;
}

.altus-cartpagina__item-onderdelen dl.variation dt {
	display: none;
}

.altus-cartpagina__item-onderdelen dl.variation dd {
	margin: 0;
}

.altus-cartpagina__item-onderdelen dl.variation p {
	margin: 0;
}

.altus-cartpagina__item-onderdelen dl.variation ul {
	margin: 2px 0 0;
	padding-left: 16px;
}

.altus-cartpagina__item-verwijder {
	align-self: flex-start;
	margin-top: 2px;
	border: 0;
	background: none;
	padding: 0;
	font-size: 13px;
	color: var(--altus-navy, #223a80);
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.altus-cartpagina__item-verwijder:hover {
	color: var(--altus-oranje, #ff6a00);
}

.altus-cartpagina__item-subtotaal {
	font-weight: 800;
	font-size: 16px;
}

@media (min-width: 701px) {
	.altus-cartpagina__item-subtotaal {
		text-align: right;
	}
}

@media (max-width: 700px) {
	.altus-cartpagina__item-subtotaal {
		display: flex;
		justify-content: space-between;
		font-weight: 600;
	}

	.altus-cartpagina__item-subtotaal::before {
		content: "Subtotaal";
		color: #6b7788;
		font-weight: 600;
	}
}

.altus-cartpagina__stepper {
	display: inline-flex;
	height: 40px;
	width: 116px;
	border: 1px solid #dde;
	border-radius: 6px;
	overflow: hidden;
}

.altus-cartpagina__stepper-knop {
	width: 38px;
	border: 0;
	background: none;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: var(--altus-navy, #223a80);
	font-size: 18px;
	line-height: 1;
}

.altus-cartpagina__stepper-knop:hover {
	background: var(--altus-grijs, #f2f4f8);
}

.altus-cartpagina__stepper-getal {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 800;
	border-left: 1px solid #dde;
	border-right: 1px solid #dde;
}

/* Gratis meegeleverd product (altus-gratis-product.php): het aantal volgt
   automatisch het hoofdproduct, dus geen +/- meer — enkel het aantal zelf,
   gecentreerd in hetzelfde kader zodat de rijen mooi uitlijnen. */
.altus-cartpagina__stepper--vast {
	justify-content: center;
}

.altus-cartpagina__stepper--vast .altus-cartpagina__stepper-getal {
	flex: 0 0 auto;
	border: 0;
}

.altus-cartpagina__acties {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	padding-top: 16px;
	font-size: 14px;
	flex-wrap: wrap;
}

.altus-cartpagina__verder {
	font-weight: 600;
	color: var(--altus-navy, #223a80);
	text-decoration: none;
}

.altus-cartpagina__verder:hover {
	color: var(--altus-oranje, #ff6a00);
}

.altus-cartpagina__leegmaken {
	border: 0;
	background: none;
	padding: 0;
	font-size: 14px;
	color: var(--altus-navy, #223a80);
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.altus-cartpagina__leegmaken:hover {
	color: var(--altus-oranje, #ff6a00);
}

/* ---------------------------------------------------------- levertegels -- */
.altus-cartpagina__levertegels {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

@media (max-width: 560px) {
	.altus-cartpagina__levertegels {
		grid-template-columns: 1fr;
	}
}

.altus-cartpagina__levertegel {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 18px;
	background: var(--altus-grijs, #f2f4f8);
	border-radius: 8px;
}

.altus-cartpagina__levertegel-titel {
	font-weight: 800;
	font-size: 16px;
}

.altus-cartpagina__levertegel-prijs {
	font-weight: 700;
	font-size: 14px;
	color: var(--altus-navy, #223a80);
}

.altus-cartpagina__levertegel-tekst {
	font-size: 13px;
	color: #4c5a70;
}

.altus-cartpagina__levernota {
	margin-top: 10px;
	font-size: 12px;
	color: #6b7788;
}

/* ------------------------------------------------------------ samen-gekocht -- */
.altus-cartpagina__samengekocht {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
}

@media (max-width: 700px) {
	.altus-cartpagina__samengekocht {
		grid-template-columns: 1fr 1fr;
	}
}

.altus-cartpagina__cross-kaart {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.altus-cartpagina__cross-foto {
	aspect-ratio: 1 / 1;
	border-radius: 6px;
	overflow: hidden;
	background: #fff;
}

.altus-cartpagina__cross-foto img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.altus-cartpagina__cross-naam {
	font-size: 13px;
	font-weight: 600;
	line-height: 1.35;
	min-height: 36px;
	color: var(--altus-navy, #223a80);
	text-decoration: none;
}

.altus-cartpagina__cross-naam:hover {
	color: var(--altus-navy, #223a80);
}

.altus-cartpagina__cross-prijs {
	font-size: 14px;
	font-weight: 700;
}

/* Knoprij onderaan vastzetten (CSS Grid rekt kaarten in dezelfde rij al even
   hoog — margin-top: auto duwt de knoprij dan naar de onderkant, ongeacht
   een langere titel/prijs erboven), zelfde principe als de knoprij op de
   gewone categoriepagina's. De koopknop zelf (.altus-steiger-koop__rij e.a.)
   hergebruikt de bestaande, al-responsieve stijl uit altus-categorie.css. */
.altus-cartpagina__cross-knoprij {
	margin-top: auto;
}

/* De info-knop ("Bekijk dit product") is op de categoriepagina een knop met vaste opvulling en breedte "auto" (altus-categorie.css):
   in een kaart van het winkelwagentje (4 per rij) werd ze breder dan de kaart en overlapte ze de buurkaart (Sylvie, 08/10/2026).
   Hier vult ze precies de breedte van de kaart en mag ze krimpen. */
.altus-cartpagina__cross-knoprij .altus-icoon-knop--info {
	box-sizing: border-box;
	height: auto;
	line-height: 1.2;
	max-width: 100%;
	min-width: 0;
	padding: 6px 8px;
	text-align: center;
	white-space: normal;
	width: 100%;
}

/* ---------------------------------------------------------------- totalen -- */
#altus-cart-totals {
	background: var(--altus-grijs, #f2f4f8);
	border-radius: 8px;
	overflow: hidden;
}

.altus-cartpagina__totalen-kop {
	padding: 22px 22px 14px;
	border-bottom: 2px solid #e2e6ec;
	display: flex;
	align-items: baseline;
	gap: 14px;
}

.altus-cartpagina__totalen-kop .altus-cartpagina__stap-nr {
	font-size: 34px;
}

.altus-cartpagina__totalen-kop .altus-cartpagina__stap-titel {
	font-size: 20px;
}

.altus-cartpagina__totalen-lijst {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 18px 22px;
	font-size: 15px;
}

.altus-cartpagina__totalen-regel {
	display: flex;
	justify-content: space-between;
	gap: 12px;
}

.altus-cartpagina__totalen-regel--totaal {
	align-items: baseline;
	padding-top: 12px;
	margin-top: 4px;
	border-top: 2px solid #e2e6ec;
}

.altus-cartpagina__totalen-regel--totaal span:first-child {
	font-weight: 800;
	font-size: 19px;
}

.altus-cartpagina__totalen-regel--totaal span:last-child {
	font-weight: 800;
	font-size: 26px;
	color: var(--altus-navy, #223a80);
}

.altus-cartpagina__afronden {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-top: 6px;
	padding: 15px 18px;
	background: var(--altus-groen, #5ac061);
	color: #fff;
	font-weight: 800;
	font-size: 16px;
	text-decoration: none;
	border-radius: 6px;
	border: 0;
	cursor: pointer;
}

.altus-cartpagina__afronden:hover {
	background: #489a4c;
	color: #fff;
}

.altus-cartpagina__alma {
	font-size: 12px;
	color: #6b7788;
}

.altus-cartpagina__vertrouwen {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 18px 22px 22px;
	border-top: 1px solid #dde;
}

.altus-cartpagina__betaalpictos {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.altus-cartpagina__betaalpicto {
	font-size: 11px;
	font-weight: 600;
	padding: 4px 8px;
	border: 1px solid #dde;
	background: #fff;
	border-radius: 6px;
	color: #4c5a70;
}

.altus-cartpagina__vertrouwen-lijst {
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: 13px;
	color: #4c5a70;
}

.altus-cartpagina__vertrouwen-lijst span {
	display: flex;
	gap: 8px;
	align-items: center;
}

.altus-cartpagina__vertrouwen-lijst i {
	color: var(--altus-groen, #5ac061);
}

/* ------------------------------------------------------------- kortingscode -- */
.altus-cartpagina__coupon {
	margin-top: 4px;
}

.altus-cartpagina__coupon summary {
	cursor: pointer;
	font-size: 13px;
	font-weight: 600;
	color: var(--altus-navy, #223a80);
	list-style: none;
}

.altus-cartpagina__coupon summary::-webkit-details-marker {
	display: none;
}

.altus-cartpagina__coupon[open] summary {
	margin-bottom: 8px;
}

.altus-cartpagina__coupon-form {
	display: flex;
	gap: 8px;
}

.altus-cartpagina__coupon-form input {
	flex: 1;
	height: 40px;
	padding: 0 12px;
	border: 1px solid #dde;
	border-radius: 6px;
	font-size: 14px;
}

.altus-cartpagina__coupon-form button {
	height: 40px;
	padding: 0 16px;
	border: 0;
	background: var(--altus-navy, #223a80);
	color: #fff;
	font-weight: 700;
	font-size: 13px;
	border-radius: 6px;
	cursor: pointer;
}