/* ==========================================================================
   REKO Raalte — winkelwagen
   --------------------------------------------------------------------------
   Markup: woocommerce/cart/cart.php (flexregels i.p.v. een tabel),
   cart/cart-totals.php (drie totaalregels) en cart/cart-empty.php.
   Het aantal-veld wordt door de CORE via AJAX bijgewerkt
   (inc/cart-ajax-qty.php); de stepper-knoppen sturen alleen een change-event.
   ========================================================================== */

.woocommerce-cart {
	--reko-cart-line: var(--reko-line);   /* #e5e5e5 haarlijn tussen regels */
	--reko-cart-stepper: #cccccc;         /* rand om de stepper            */
	--reko-cart-hover: #f5f5f5;           /* hover op een stepper-knop      */
	--reko-cart-name-hover: #5c4a3d;      /* hover op de productnaam        */
	--reko-cart-remove: #d64545;          /* verwijderkruis                 */
	--reko-cart-total: #333333;           /* regeltotaal                    */
	--reko-cart-unit: #777777;            /* eenheid-regel                  */
}

/* ==========================================================================
   1. Paginakop
   page.php zet de paginatitel neer (de winkelwagenpagina heeft geen eigen h1
   in de inhoud). Bij een lege winkelwagen valt die kop weg: de lege staat
   heeft zijn eigen kop, zoals op de bestaande site.
   ========================================================================== */

.woocommerce-cart .reko-entry__title {
	padding-bottom: 30px;
	font-family: var(--reko-font-heading);
	font-size: 40px;
	line-height: 1;
	text-transform: uppercase;
}

/*
 * GEEN kleinere paginakop op tablet of telefoon. De gevulde winkelwagen is niet
 * headless te meten (een verse sessie is leeg), dus het ontwerp is hier de bron:
 * Figma "Winkelwagen" staat op 40px Bebas op BEIDE canvassen —
 * Liggende tablet 1024px (node 819:29748) en Mobiel 393px (node 966:13738),
 * beide `text-[40px]` met een tekstblok van 177x48px, precies dezelfde maat als
 * desktop. De 25px die hier stond kwam uit geen van beide bronnen.
 *
 * Dat de maat gelijk blijft, is bovendien wat de LEGE winkelwagen live wél laat
 * zien: die kop meet op 767px 40px (zie punt 5 onderaan).
 */

body.reko-cart-is-empty .reko-entry__title { display: none; }

/* ==========================================================================
   1b. USP-lijst: rechts boven de totalen, gestapeld boven de producten
   --------------------------------------------------------------------------
   De lijst zelf is een component in main.css (hij staat ook in de zijkolom van
   de afrekenpagina); hier alleen de plaatsing en de ruimte eromheen. De lijst is
   een kind van .reko-cartpage (zie woocommerce/cart/cart.php) en wisselt met
   grid-placement van plek:

     >= 981px   kolom 2, rij 1 — boven de totalen, zoals live
     <= 980px   een kolom, eerste rij — boven de producten, zoals live

   Gemeten op live (https://reko-raalte.sphdev.nl/winkelwagen/, een product in de
   wagen). Live houdt twee lijsten in de opmaak en zet er steeds een op
   display:none:

     1512px   zijkolom x1002 y329..496, 359 breed; daaronder "Subtotaal" op y529
     1200px   zijkolom x795  y308, 285 breed
      981px   zijkolom x650  y283, 233 breed
      980px   boven    x98   y245, 784 breed
      594px   boven    x59   y209, 475 breed

   Gemeten op https://reko-raalte.sphdev.nl/winkelwagen/ met één product in de
   wagen, aan de lijst die daar op deze plek staat (dsm_icon_list_0, zichtbaar
   op 980 en 390px):

               boven de lijst   onder de lijst
     980px     30px             30px   (lijst y245-392, product y422)
     390px     30px             30px   (lijst y201-352, product y382)

   Die 30px staat er op live BOVENOP de 10px onderruimte van de <h1>, dus vanaf
   de tekst van de kop is het 40px. De kop heeft hier 30px onderruimte (zie
   punt 1 hierboven), dus blijft er 10px als eigen bovenmarge over — anders werd
   het gat 60px.

   Op 1512px heeft live voor DEZE plek geen waarde: daar is de lijst in de
   linkerkolom verborgen en staat alleen die in de zijkolom. Eén maat op alle
   breedtes dus, en dat is ook wat live met `margin: 30px 0` doet — die is daar
   niet per breekpunt anders.
   ========================================================================== */

.woocommerce-cart .reko-usps--cart {
	margin: 10px 0 30px;
}

/*
 * Gestapeld komt de onderruimte uit de rijruimte van het raster (30px) en niet
 * uit een eigen marge: de lijst is nu een rasteritem, dus die twee zouden bij
 * elkaar opgeteld worden. Gemeten op live @980: lijst tot product 30px, met de
 * 30px eigen marge erbij werd dat 60.
 */
@media (max-width: 980px) {
	.reko-cartpage > .reko-usps--cart { margin-bottom: 0; }
}

/*
 * Twee kolommen: de lijst bovenin de rechterkolom, de regels links ernaast over
 * beide rijen. Zonder die span zou de linkerkolom op de hoogte van de totalen
 * beginnen in plaats van bovenaan.
 *
 * De 33px onderruimte is de gemeten afstand van de onderkant van de lijst tot de
 * regel "Subtotaal" op live (y496 -> y529).
 */
@media (min-width: 981px) {
	.reko-cartpage > .reko-usps--cart {
		grid-column: 2;
		grid-row: 1;
		margin: 0 0 33px;
	}

	.reko-cartpage__items {
		grid-column: 1;
		grid-row: 1 / span 2;
	}

	.reko-cartpage__aside {
		grid-column: 2;
		grid-row: 2;
	}
}

/* ==========================================================================
   2. Twee kolommen: regels 2/3, totalen 1/3
   ========================================================================== */

.reko-cartpage {
	display: grid;
	grid-template-columns: 65.75% 30.75%;
	column-gap: 3.5%;
	align-items: start;
}

@media (max-width: 980px) {
	.reko-cartpage {
		grid-template-columns: 1fr;
		row-gap: 30px;
	}
}

.woocommerce .reko-cartpage form.woocommerce-cart-form { margin: 0; }

/* ==========================================================================
   3. Productregel
   ========================================================================== */

/*
 * Een raster en niet langer een flexregel. Op live staat het verwijderkruis
 * RECHTSBOVEN, op de hoogte van de productnaam, en het regeltotaal
 * rechtsonder naast de laatste optieregel. In een flexregel met
 * align-items:center staan die twee naast elkaar op dezelfde hoogte, en dat
 * was het verschil met het ontwerp.
 *
 * De markup blijft ongemoeid: de gebieden hieronder zetten de bestaande
 * blokken op hun plek, dus cart.php houdt de classes waar WooCommerce en de
 * core-JS op mikken.
 */
.reko-cartpage__row {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	grid-template-areas:
		"thumb info remove"
		"thumb info total";
	column-gap: 25px;
	align-items: start;
	padding: 30px 0;
	border-bottom: 1px solid var(--reko-cart-line);
}

.reko-cartpage__thumb  { grid-area: thumb; }
.reko-cartpage__info   { grid-area: info; }
.reko-cartpage__remove { grid-area: remove; justify-self: end; }

.reko-cartpage__total {
	grid-area: total;
	justify-self: end;
	align-self: end;
}

/*
 * Aantal-stepper alleen bij producten die per kuub gaan.
 *
 * Hier stond "live staat hij er niet", maar dat gold alleen voor de container
 * waarop het ontwerp gebaseerd was. Op sphdev /winkelwagen/ staat bij
 * Brekerzand "- 1 +" direct onder de productnaam, en bij een container niets
 * (nagekeken 2026-09-25). Zonder stepper kon een klant geen kuubs meer
 * bijbestellen.
 *
 * Het veld staat bij elk product in de opmaak en blijft standaard verborgen,
 * zodat `cart[key][qty]` blijft meegaan en de AJAX-laag van de core
 * (inc/cart-ajax-qty.php, die op input.qty mikt) niet op een ontbrekend element
 * stuit. cart.php zet --kuub op de producten waar reko_is_bulk_product() waar is.
 */
.woocommerce-cart .reko-cartpage__qty { display: none; }

.woocommerce-cart .reko-cartpage__qty.reko-cartpage__qty--kuub {
	display: block;
	margin: 10px 0 0;
}

.reko-cartpage__row:first-child { padding-top: 0; }

.reko-cartpage__row:last-child {
	border-bottom: 0;
}

.reko-cartpage__thumb {
	flex: 0 0 120px;
	width: 120px;
}

.reko-cartpage__thumb img {
	width: 120px;
	height: 120px;
	object-fit: contain;
	border-radius: 0;
}

.reko-cartpage__info {
	flex: 1 1 auto;
	min-width: 0;
}

.woocommerce .reko-cartpage__name {
	display: inline-block;
	font-family: var(--reko-font-heading);
	font-size: 18px;
	font-weight: 400;
	line-height: 1.2;
	text-transform: uppercase;
	color: var(--reko-black);
}

.woocommerce a.reko-cartpage__name:hover,
.woocommerce a.reko-cartpage__name:focus {
	color: var(--reko-cart-name-hover);
	text-decoration: none;
}

/*
 * De regels onder de productnaam (eenheid en de gekozen opties) hebben een
 * ladder van drie treden. Een GEVULDE winkelwagen is niet te meten — hij is in
 * een verse sessie leeg, live en lokaal — dus het ontwerp is hier de enige bron.
 * De optieregels ("Zand/grond meeleveren: Ja" enz.) staan in alle drie de
 * canvassen als één tekstlaag:
 *
 *   Desktop 1920px          node 451:25025  ->  text-[16px]
 *   Liggende tablet 1024px  node 819:29767  ->  text-[14px]
 *   Mobiel 393px            node 966:13764  ->  text-[10px]
 *
 * Hier stond 12px zonder mediaquery: dat is geen van de drie. De 16px is dus
 * ook op desktop een correctie, want een tabletwaarde van 14px onder een basis
 * van 12px zou de tekst op tablet GROTER maken dan op desktop.
 *
 * De canvasbreedtes worden op de breekpunten van dit thema gelegd zoals de rest
 * van het project dat doet: het tabletcanvas (1024) hoort bij <=980 en het
 * mobiele canvas (393) bij <=767.
 */
.reko-cartpage__unit {
	margin: 4px 0 0;
	padding: 0;
	font-family: var(--reko-font-body);
	font-size: 16px;
	line-height: 1.4;
	color: var(--reko-cart-unit);
}

.reko-cartpage__info .variation,
.reko-cartpage__info dl.variation {
	margin: 4px 0 0;
	font-size: 16px;
	color: var(--reko-cart-unit);
}

/*
 * Label en waarde op EEN regel: "Zand/grond bijbestellen: Ja".
 *
 * wc_get_formatted_cart_item_data() geeft een <dl> met <dt> en <dd>, en die
 * zijn van zichzelf blokken — plus WooCommerce zet 40px marge links op de <dd>.
 * Daardoor stond elke optie over twee regels met de waarde ingesprongen. De
 * <dd> krijgt hier een regeleinde in een ::after in plaats van display:block,
 * want de waarde moet direct achter zijn eigen label staan; met een raster
 * zouden alle waarden in een kolom worden uitgelijnd en dat doet live niet.
 *
 * Bewust GEEN eigen markup in cart.php: die functie draait de filters waarmee
 * plugins hun eigen regels aan een winkelwagenitem hangen.
 */
.reko-cartpage__info dl.variation dt,
.reko-cartpage__info dl.variation dd,
.reko-cartpage__info dl.variation dd p {
	display: inline;
	margin: 0;
	padding: 0;
}

.reko-cartpage__info dl.variation dt {
	font-weight: 700;
	color: var(--reko-black);
}

.reko-cartpage__info dl.variation dd { color: var(--reko-black); }

/* Een echt regeleinde na elke waarde; \A werkt alleen met white-space:pre. */
.reko-cartpage__info dl.variation dd::after {
	content: "\A";
	white-space: pre;
}

/* Ruimte tussen het label en de waarde, zonder een spatie in de HTML. */
.reko-cartpage__info dl.variation dt::after { content: " "; }

@media (max-width: 980px) {
	.reko-cartpage__unit,
	.reko-cartpage__info .variation,
	.reko-cartpage__info dl.variation { font-size: 14px; }
}

@media (max-width: 767px) {
	/* Productnaam: desktop en tablet staan in het ontwerp gelijk op 18px
	   (node 451:25023 en 819:29766, beide een blok van 387x19px), het mobiele
	   canvas zet hem op 16px (node 966:13763, `text-[16px]`). Vandaar alleen
	   hier een trede en geen tabletwaarde. */
	.woocommerce .reko-cartpage__name { font-size: 16px; }

	.reko-cartpage__unit,
	.reko-cartpage__info .variation,
	.reko-cartpage__info dl.variation { font-size: 10px; }
}

/* --- Aantal-stepper ----------------------------------------------------- */

.woocommerce-cart .reko-cartpage__qty { flex: 0 0 auto; }

.woocommerce-cart .reko-cartpage__qty .quantity {
	display: inline-flex;
	align-items: stretch;
	margin: 0;
	border: 1px solid var(--reko-cart-stepper);
	background: var(--reko-white);
}

/* De stepper-wrapper verdwijnt uit de boom, zodat de twee knoppen zelf
   flex-items van .quantity worden: − links van het veld, + rechts. */
.woocommerce-cart .reko-cartpage__qty .reko-qty-steps { display: contents; }

.woocommerce-cart .reko-cartpage__qty .qty-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 34px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: var(--reko-white);
	font-family: var(--reko-font-body);
	font-size: 16px;
	line-height: 1;
	color: var(--reko-black);
	cursor: pointer;
}

.woocommerce-cart .reko-cartpage__qty .qty-btn:hover { background: var(--reko-cart-hover); }

.woocommerce-cart .reko-cartpage__qty .qty-btn--down { order: 1; }
.woocommerce-cart .reko-cartpage__qty input.qty { order: 2; }
.woocommerce-cart .reko-cartpage__qty .qty-btn--up { order: 3; }

.woocommerce-cart .reko-cartpage__qty input.qty {
	width: 40px;
	height: 34px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: var(--reko-white);
	font-family: var(--reko-font-body);
	font-size: 14px;
	text-align: center;
	color: var(--reko-black);
	appearance: textfield;
	-moz-appearance: textfield;
}

.woocommerce-cart .reko-cartpage__qty input.qty::-webkit-outer-spin-button,
.woocommerce-cart .reko-cartpage__qty input.qty::-webkit-inner-spin-button {
	margin: 0;
	appearance: none;
	-webkit-appearance: none;
}

/* --- Regeltotaal + verwijderen ------------------------------------------ */

.reko-cartpage__total {
	flex: 0 0 auto;
	min-width: 90px;
	font-family: var(--reko-font-body);
	font-size: 16px;
	text-align: right;
	color: var(--reko-cart-total);
}

.reko-cartpage__total .amount { font-weight: 400; }

.reko-cartpage__remove { flex: 0 0 auto; }

.woocommerce .reko-cartpage__remove a.remove {
	display: block;
	width: auto;
	height: auto;
	border-radius: 0;
	background: none;
	font-size: 22px;
	line-height: 1;
	text-align: center;
	color: var(--reko-cart-remove) !important;
}

.woocommerce .reko-cartpage__remove a.remove:hover {
	background: none;
	color: var(--reko-black) !important;
}

/*
 * Telefoon: twee kolommen in plaats van drie.
 *
 * Met de desktopindeling hield de tekstkolom op 390px maar 131px over — de
 * optieregels vielen dan over vier of vijf regels. Het verwijderkruis krijgt
 * daarom geen eigen kolom meer maar staat rechtsboven IN de tekstkolom (twee
 * items in hetzelfde rastergebied liggen over elkaar heen), en het regeltotaal
 * schuift naar een eigen regel onder de tekst. Zo houdt de tekst ~255px.
 */
@media (max-width: 600px) {
	.reko-cartpage__row {
		grid-template-columns: 80px minmax(0, 1fr);
		grid-template-areas:
			"thumb info"
			"thumb total";
		column-gap: 15px;
		row-gap: 10px;
	}

	.reko-cartpage__thumb,
	.reko-cartpage__thumb img {
		width: 80px;
		height: 80px;
	}

	.reko-cartpage__thumb { flex-basis: 80px; }

	/* Ruimte vrijhouden waar het kruis over de tekst heen komt te staan. */
	.reko-cartpage__info { padding-right: 24px; }

	.reko-cartpage__remove {
		grid-area: info;
		justify-self: end;
		align-self: start;
	}

	.reko-cartpage__total {
		justify-self: start;
		align-self: center;
		min-width: 0;
	}
}

/* ==========================================================================
   4. Totalenkolom
   LET OP: de AJAX-laag van de core doet $('.cart_totals').html(nieuwe html) en
   die nieuwe html bevat zelf ook een .cart_totals-div. Daarom hangt er geen
   opmaak aan .cart_totals zelf en werkt niets met directe-kind-selectors.
   ========================================================================== */

/* woocommerce.css laat de totalen-box zweven op 48% breedte
   (`.woocommerce .cart-collaterals .cart_totals{float:right;width:48%}`); de
   gridkolom is hier al 1/3, dus die float moet eruit. Selectors met dezelfde
   opbouw, zodat de specificiteit klopt. */
.woocommerce .cart-collaterals,
.woocommerce-page .cart-collaterals,
.woocommerce .cart-collaterals .cart_totals,
.woocommerce-page .cart-collaterals .cart_totals {
	float: none;
	width: 100%;
	text-align: left;
}

.reko-totals { margin: 0; }

.reko-totals__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	margin: 0 0 10px;
	padding: 0 0 5px;
	font-family: var(--reko-font-body);
	font-size: 16px;
	line-height: 1.7;
	color: var(--reko-black);
}

.reko-totals__row--rule { border-bottom: 1px solid var(--reko-black); }

.reko-totals__row--total {
	margin-bottom: 20px;
	padding-bottom: 0;
	border-bottom: 0;
}

.reko-totals__row strong { font-weight: 700; }

/*
 * Alleen het LABEL is vet, ook op de totaalregel. wc_cart_totals_order_total_html()
 * verpakt het bedrag zelf in een <strong>, waardoor "Totaalbedrag" en het bedrag
 * samen zwaarder uitkwamen dan de twee regels erboven; live staat het bedrag daar
 * in dezelfde dikte als de rest.
 */
.reko-totals__row--total .reko-totals__value strong { font-weight: 400; }

.reko-totals__value .amount,
.reko-totals__value { white-space: nowrap; }

/*
 * "(inclusief € x btw)" wordt NIET getoond. Het btw-bedrag staat al als eigen
 * regel boven het totaal, dus die herhaling stond er dubbel; live laat hem weg.
 *
 * Verborgen en niet uit cart-totals.php gehaald: het regeltje komt uit
 * wc_cart_totals_order_total_html(), en die functie draait de filters waarmee
 * WooCommerce en plugins aan het totaal hangen. Drie classes plus een element,
 * want woocommerce.css mikt met `.woocommerce-cart .cart-collaterals
 * .cart_totals p small` op hetzelfde.
 */
.woocommerce-cart .cart-collaterals .cart_totals p.reko-totals__row small,
.reko-totals small {
	display: none;
}

.woocommerce .reko-cartpage__aside .wc-proceed-to-checkout {
	margin: 0;
	padding: 0;
}

/* main.css stylet wel `button.button.alt` maar niet `a.button.alt`; zonder de
   achtergrond hieronder wint WooCommerce' paarse `.woocommerce a.button.alt`. */
.woocommerce .reko-cartpage__aside a.checkout-button,
.woocommerce a.button.alt.checkout-button {
	display: block;
	width: 100%;
	margin: 0 0 50px;
	padding: 12px 1em;
	border-radius: 0;
	background: var(--reko-green);
	color: var(--reko-white);
	font-family: var(--reko-font-heading);
	font-size: 24px;
	font-weight: 400;
	line-height: 1.2;
	text-transform: uppercase;
	text-align: center;
}

.woocommerce .reko-cartpage__aside a.checkout-button:hover,
.woocommerce a.button.alt.checkout-button:hover {
	background: var(--reko-green-hover);
	color: var(--reko-white);
	text-decoration: none;
}

/* De selector heeft bewust een element-deel: woocommerce.css zet
   `.woocommerce img{height:auto}` en dat verslaat een enkele class. */
.reko-totals__payment,
.woocommerce img.reko-totals__payment {
	display: block;
	width: auto;
	height: 30px;
	margin: -20px auto 0;
}

/* Kruisverkoop staat op deze shop niet in de opmaak. */
.reko-cartpage__aside .cross-sells { display: none; }

/* Gratis-verzendbalk van de core (hook woocommerce_before_cart). */
.woocommerce-cart .sellabees-freeship { margin: 0 0 20px; }

.woocommerce-cart .sellabees-freeship__bar {
	height: 6px;
	background: var(--reko-surface-2);
}

.woocommerce-cart .sellabees-freeship__fill {
	display: block;
	height: 100%;
	background: var(--reko-green);
}

/* ==========================================================================
   5. Lege winkelwagen
   ========================================================================== */

.reko-cart-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 50vh;
	padding: 80px 20px;
	text-align: center;
}

/*
 * Meldingen in de winkelwagen in de huiskleuren.
 *
 * "“Bouw- en sloopafval - 6m³ container” verwijderd. Ongedaan maken?" (en het
 * "teruggeplaatst" na ongedaan maken) is een `.woocommerce-message`, en daar
 * had het thema hier geen opmaak voor. Hij viel dus terug op WooCommerce:
 * gemeten een rand van 3px in rgb(143, 174, 27) -- WooCommerce' olijfgroen
 * #8fae1b, niet het REKO-groen -- met het vinkje in dezelfde kleur, een
 * lichtpaarse achtergrond rgb(246, 245, 248) en grijze tekst rgb(81, 81, 81).
 *
 * Dezelfde kleuren als de meldingen op de accountpagina (pages/account.css):
 * rand en vinkje --reko-green, achtergrond --reko-surface-3, tekst zwart. Alleen
 * de kleuren; de padding blijft van WooCommerce, want die houdt links ruimte vrij
 * voor het vinkje.
 */
.woocommerce-cart .woocommerce-message {
	border-top-color: var(--reko-green);
	background: var(--reko-surface-3);
	color: var(--reko-black);
}

.woocommerce-cart .woocommerce-message::before {
	color: var(--reko-green);
}

/* WooCommerce' eigen "winkelwagen is leeg"-melding: de eigen kop zegt het al. */
.reko-cart-empty .cart-empty,
.reko-cart-empty .woocommerce-info,
.reko-cart-empty .return-to-shop { display: none; }

/* Gemeten op live /winkelwagen/ met een LEGE winkelwagen (1512px):
   "Je winkelwagen is leeg" is een <p> van 40px Bebas op regelhoogte 48px, ZONDER
   hoofdletters, hoogte 48px en 20px ondermarge. Hier stond regelhoogte 1 met
   uppercase en 10px padding; dat gaf 50px en HOOFDLETTERS. */
.reko-cart-empty__title {
	margin: 0 0 20px;
	padding: 0;
	font-family: var(--reko-font-heading);
	font-size: 40px;
	line-height: 48px;
	text-transform: none;
	color: var(--reko-black);
}

/* De regel eronder is op live 12px Inter (de UI-letter) met 30px ondermarge —
   niet 14px DM Sans. Gemeten breedte 296px tegen 337px hier. */
.reko-cart-empty__text {
	margin: 0 0 30px;
	padding: 0;
	font-family: var(--reko-font-ui);
	font-size: 12px;
}

.reko-cart-empty__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 30px;
}

/* De twee knoppen onder de lege winkelwagen zijn 280x48px met padding
   12px 60px en regelhoogte 23,8px (gemeten op live). Met de 3px/1.7 van de
   sitebrede knop werden ze 44px hoog. */
.woocommerce a.reko-cart-empty__btn {
	width: 280px;
	max-width: 100%;
	padding: 12px 60px;
	font-family: var(--reko-font-heading);
	font-size: 24px;
	line-height: 23.8px;
	text-transform: uppercase;
	text-align: center;
	/* "CONTAINER BESTELLEN" is op 24px Bebas ~227px breed en past niet in de
	   160px die de knop van 280px met 60px zijruimte overhoudt. Live laat het
	   woord dan buiten de padding lopen (knop blijft 48px hoog en één regel);
	   zonder nowrap brak de tekst hier over twee regels en werd de knop 72px. */
	white-space: nowrap;
}

/*
 * Geen eigen telefoonwaarden voor de lege winkelwagen: live houdt op 767px
 * exact de desktopmaten aan. Gemeten op live /winkelwagen/ bij 767px
 * (.custom-cart-empty en .empty-cart-buttons):
 *
 *   .custom-cart-empty   padding 80px 20px   (hier stond 40px 20px)
 *   h "Je winkelwagen is leeg"  40px         (hier stond 25px)
 *   .empty-cart-buttons  gap 30px            (hier stond 15px)
 *   de twee knoppen      280x48, padding 12px 60px, 24px Bebas/23,8px
 *
 * De knoppen staan live op 767px ONDER elkaar (beide op x=244). Dat komt niet
 * van een kleinere gap maar van de rijbreedte: live zet de winkelwagen in een
 * kolom van 614px (10% marge links en rechts) en dan is 2x280 + 30 = 590 te
 * breed, dus de flexregel breekt. Zie de opmerking bij punt 5.
 */