/* =============================================================================
   Hinke. Trendstore — winkelwagen.

   1:1 met Figma "Winkelwagen" (node 2197:1365, canvas 1920), plus de
   gratis-verzending-gehaald-staat (2197:1627).

   Verticale ankers (absolute y op het canvas; header = 0…150):
     titelbalk    150…292  (1920×142, #EFC2BD)
     regel 1      thumb y=356 · rijafstand 236 · scheiding y=557
     samenvatting kop 362 · usp's 420/451 · lijn 497 · totaal 517 · note 548
                  knop 588 (425×53) · betaallogo 662
     "Verder winkelen" 818 (202×53)
     crosssell    kop 942 · pijlen 948 · kaarten 1027

   Horizontaal: het ontwerp legt de kolommen op x=299…1099 (regels, 800) en
   x=1195…1621 (samenvatting, 426). Samen 1322, dus de standaardcontainer van
   1320 wordt hier 1322 breed — anders vallen beide kolomranden 1px mis.

   De opmaak hangt op de core-markup (`.cart_item`, `.product-*`, `.quantity`,
   `a.remove`, `.sellabees-wish-btn`) zodat de AJAX van het parent-thema
   (inc/cart-ajax-qty.php) blijft werken. Selectors die het tegen de
   WooCommerce-stylesheet moeten opnemen staan met `.woocommerce`/`.woocommerce-cart`
   ervoor plús een eigen class, zodat ze niet op gelijke specificiteit uitkomen.
   ========================================================================== */

.hinke-cart {
	/* Enige kleur uit het ontwerp die geen huisstijl-token is: de "gehaald"-groen
	   van de gratis-verzending-regel (Figma 2197:1627). */
	--hinke-cart-free: #93c47d;
}

/* -----------------------------------------------------------------------------
   Titelbalk — full-bleed roze band 1920×142 op y=150
   (page.php rendert de kop al; hier krijgt hij de bandopmaak uit het ontwerp)
   -------------------------------------------------------------------------- */

.woocommerce-cart .hinke-page__head {
	/*
	 * GEEN `margin-inline: calc(50% - 50vw)` meer. Dat stond hier om de balk uit de
	 * container te breken, maar page.php zet `.hinke-page__head` al als blok op de
	 * volle breedte (de kop zelf zit daarbinnen in een eigen `.hinke-container`) —
	 * er was dus niets om uit te breken. Erger: `vw` rekent de KLASSIEKE
	 * SCROLLBALK mee. Gemeten met zichtbare scrollbalk werd de balk daardoor
	 * 1024 breed in een venster van 1009 (en 390 in 375), begon hij op x=-7,5 en
	 * kreeg de héle pagina 8px horizontale overloop — op elke breedte. Op een
	 * telefoon met een zwevende scrollbalk viel dat niet op, op een tablet met
	 * trackpad en op het bureaublad wel.
	 */
	height: 142px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: var(--hinke-pink);
}

.woocommerce-cart .hinke-page__title {
	margin: 0;
	font-family: var(--hinke-font-heading);
	font-weight: 400;
	font-size: 40px;
	line-height: normal;
	color: var(--hinke-white);
	text-align: center;
}

/* -----------------------------------------------------------------------------
   Body — container 1322 (x=299…1621) en de eerste rij op y=356
   -------------------------------------------------------------------------- */

.woocommerce-cart .hinke-page__body > .hinke-container {
	--hinke-container-max: 1322px;
}

.woocommerce-cart .hinke-page__body {
	padding-top: 64px; /* band eindigt 292 → rij 1 op 356 */
	padding-bottom: 0;
}

/* De gratis-verzending-BALK van de core staat niet in dit ontwerp; de tekstregel
   in de samenvatting neemt zijn plaats in. (De balk blijft in de DOM zodat het
   cart-fragment van de core hem kan blijven verversen.) */
.woocommerce-cart .sellabees-freeship {
	display: none;
}

/* Onzichtbaar doelwit voor de core-AJAX (`$('.cart_totals').html(...)`). */
.hinke-cart__sink {
	display: none;
}

/* -----------------------------------------------------------------------------
   Twee kolommen: regels 800 · tussenruimte 96 · samenvatting 426
   -------------------------------------------------------------------------- */

.hinke-cart__grid {
	display: grid;
	grid-template-columns: 800px 426px;
	column-gap: 96px;
	align-items: start;
}

.hinke-cart__form {
	min-width: 0;
	margin: 0;
}

/* -----------------------------------------------------------------------------
   Regels — rijafstand 236, scheiding 1px #D9D9D9 over de volle 800
   -------------------------------------------------------------------------- */

.woocommerce-cart ul.hinke-cart__items {
	margin: 0;
	padding: 0;
	list-style: none;
}

.woocommerce-cart li.hinke-cart__item {
	position: relative;
	display: grid;
	grid-template-columns: 130px minmax(0, 1fr);
	column-gap: 22px; /* thumb 299+130+22 → tekst op x=451 */
	align-items: start;
	min-height: 202px; /* 356 → scheidingslijn op 557…558 */
	margin: 0;
	padding: 0;
	list-style: none;
	border-bottom: 1px solid var(--hinke-line);
}

/* 557 (scheiding) + 1 + 34 = 592 = top van rij 2 → rijafstand 236. */
.woocommerce-cart li.hinke-cart__item + li.hinke-cart__item {
	margin-top: 34px;
}

/* --- Thumb 130×159 -------------------------------------------------------- */

.hinke-cart__thumb {
	width: 130px;
	height: 159px;
	line-height: 0;
}

.hinke-cart__thumb a {
	display: block;
	line-height: 0;
}

.woocommerce-cart .hinke-cart__thumb img {
	display: block;
	width: 130px;
	height: 159px;
	max-width: none;
	object-fit: cover;
	box-shadow: none;
	border-radius: 0;
}

/* --- Titel / variant / stepper ------------------------------------------- */

.hinke-cart__info {
	padding-top: 35px; /* rij 356 → titel 391 */
	min-width: 0;
}

/*
 * De ruimte rechts is er op ELKE breedte, niet alleen op mobiel.
 *
 * Het naamblok is de volle breedte van de tekstkolom en het hartje plus de
 * prullenbak liggen daar absoluut bovenop. Gemeten: op 1920 is het naamvak 648
 * breed en beginnen de acties op 1052 — dus overlap. Met de korte namen van nu
 * valt dat niet op, maar "Emma sneakers wit - 37, Wit" is al bijna zo lang, en de
 * eerste langere productnaam loopt onder de iconen door.
 *
 * 80px = 21 (hartje) + 24 (tussenruimte) + 19 (prullenbak) + 16 lucht. Dat
 * verandert bij de huidige inhoud niets zichtbaar — de namen zijn korter dan de
 * kolom — en voorkomt het probleem zodra dat niet meer zo is.
 */
.woocommerce-cart .hinke-cart__name {
	margin: 0;
	padding-right: 80px;
	font-family: var(--hinke-font-body);
	font-weight: 700;
	font-size: 16px;
	line-height: 20px;
	text-transform: none; /* bewust NIET in kapitalen (anders dan de productkaart) */
	color: var(--hinke-body);
}

.woocommerce-cart .hinke-cart__name a {
	color: inherit;
	font: inherit;
	text-decoration: none;
}

.woocommerce-cart .hinke-cart__name a:hover {
	text-decoration: underline;
}

/* Variant: "Maat: S" / "Kleur: Bruin" — max 2 regels van 18px. De min-hoogte
   houdt de stepper op y=460 ook als een product één variantregel heeft. */
.hinke-cart__meta {
	margin-top: 3px; /* titel eindigt 411 → variant 414 */
	min-height: 36px;
	font-family: var(--hinke-font-body);
	font-weight: 400;
	font-size: 14px;
	line-height: 18px;
	color: var(--hinke-body);
}

/*
 * Is er hélemaal geen variantinformatie, dan hoeft er ook geen ruimte voor
 * gereserveerd te worden: anders hangt het aantal 36px onder de titel in het
 * niets (dat is de lege plek die in de winkelwagen opvalt). WooCommerce laat de
 * regels "Maat: 37 / Kleur: Wit" namelijk weg zodra de attributen al ín de
 * variatienaam staan ("Emma sneakers wit - 37, Wit") — precies wat hier gebeurt.
 * `:not(:has(*))` = geen enkel element erin; het blok bevat dan alleen witruimte.
 */
.hinke-cart__meta:not(:has(*)) {
	min-height: 0;
}

.woocommerce-cart .hinke-cart__meta dl.variation {
	margin: 0;
	overflow: hidden;
}

.woocommerce-cart .hinke-cart__meta dl.variation dt {
	float: left;
	clear: left;
	margin: 0 4px 0 0;
	font-weight: 400;
}

.woocommerce-cart .hinke-cart__meta dl.variation dd {
	margin: 0;
	overflow: hidden;
}

.woocommerce-cart .hinke-cart__meta dl.variation p,
.woocommerce-cart .hinke-cart__meta .backorder_notification {
	margin: 0;
}

/* --- Stepper 81×35, radius 2px, interne 1px-scheidingen op x=473 en x=509 --
   Cellen (border-box): 22 / 36 / 21 = 79 = de binnenmaat van het 81px-vak. */

.woocommerce-cart .hinke-cart__qty {
	display: grid;
	grid-template-columns: 22px 36px 21px;
	align-items: stretch;
	width: 81px;
	height: 35px;
	margin-top: 10px; /* variant eindigt 450 → stepper 460 */
	border: 1px solid var(--hinke-line);
	border-radius: 2px;
	overflow: hidden;
}

.woocommerce-cart .hinke-cart__step {
	display: flex;
	align-items: center;
	justify-content: center;
	width: auto;
	height: auto;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	font-family: var(--hinke-font-body);
	font-weight: 400;
	font-size: 10px;
	line-height: 1;
	color: var(--hinke-body);
	cursor: pointer;
	border-radius: 0;
}

.woocommerce-cart .hinke-cart__step--minus {
	border-right: 1px solid var(--hinke-line);
}

/* -----------------------------------------------------------------------------
   Vast aantal — er is niets te kiezen (min == max), dus rendert cart.php de − en
   + niet. In deze shop is dat de normale staat: inc/product.php verkoopt elk
   product per stuk. Het kader vervalt daarom mee met de knoppen — een kader met
   alleen een cijfer erin leest als een invoerveld dat niet werkt. Wat overblijft
   is een tekstregel ("Aantal: 1") in de stijl van de variantregels erboven, die
   begint waar het kader in het ontwerp begint (y=460). De rijhoogte hangt aan de
   thumb van 159px, dus de rij blijft even hoog als in het ontwerp.
   -------------------------------------------------------------------------- */

.woocommerce-cart .hinke-cart__qty--vast {
	display: block;
	width: auto;
	height: auto;
	border: 0;
	border-radius: 0;
	overflow: visible;
}

/*
 * De hoeveelheidsinvoer blijft in de DOM (daar hangt de core-AJAX aan), maar
 * WooCommerce heeft er een `type="hidden"` van gemaakt: het omhullende
 * `.quantity` toont dus niets en mag geen doos meer zijn — anders erft het de
 * flexbox en de scheidingslijn van de stepper hierboven.
 */
.woocommerce-cart .hinke-cart__qty--vast .quantity {
	display: contents;
}

/*
 * Zonder variantregels én zonder kader is er niets meer dat het aantal op zijn
 * plek houdt, dus leggen we het op de regel van de prijs (die staat vast op y=432,
 * zie .hinke-cart__price): aantal links, bedrag rechts. 3px margin van .meta + 18
 * = regelbox op 432, midden op 441 — gelijk aan het midden van de prijs.
 */
.woocommerce-cart .hinke-cart__meta:not(:has(*)) + .hinke-cart__qty--vast {
	margin-top: 18px;
}

.woocommerce-cart .hinke-cart__qty-vast {
	display: block;
	font-family: var(--hinke-font-body);
	font-weight: 400;
	font-size: 14px;
	line-height: 18px;
	color: var(--hinke-body);
}

.woocommerce-cart .hinke-cart__qty .quantity {
	display: flex;
	float: none;
	width: auto;
	margin: 0;
	padding: 0;
	border-right: 1px solid var(--hinke-line);
}

/* Slaat `.woocommerce .quantity .qty { width: 3.631em }` (0,3,0) met (0,4,0). */
.woocommerce-cart .hinke-cart__qty .quantity input.qty,
.woocommerce .hinke-cart__qty .quantity input.qty {
	width: 100%;
	height: 100%;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	font-family: var(--hinke-font-body);
	font-weight: 400;
	font-size: 12px;
	line-height: 1;
	text-align: center;
	color: var(--hinke-body);
	-moz-appearance: textfield;
	appearance: textfield;
}

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

/* --- Prijs: regelbedrag, rechts uitgelijnd op x=1080, y=432 -------------- */

.hinke-cart__price {
	position: absolute;
	top: 76px;
	right: 19px; /* kolom eindigt 1099 → 1080 */
	font-family: var(--hinke-font-body);
	font-weight: 400;
	font-size: 14px;
	line-height: 18px;
	color: var(--hinke-body);
	white-space: nowrap;
}

/* De stuksprijs blijft in de DOM (filter blijft lopen) maar staat niet in het
   ontwerp. */
.hinke-cart__unit {
	display: none;
}

/* --- Acties: hartje 21×21 op x=1031 y=377, prullenbak 19×19 op 1061 y=379 - */

.hinke-cart__actions {
	position: absolute;
	top: 21px; /* rij 356 → hartje 377 */
	right: 19px;
	display: flex;
	align-items: flex-start;
	gap: 9px; /* 1052 → 1061 */
}

.woocommerce-cart .hinke-cart__actions .sellabees-wish-btn {
	position: relative;
	display: block;
	width: 21px;
	height: 21px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--hinke-ink);
	line-height: 0;
	cursor: pointer;
}

/* Het huisstijl-hartje (icons/heart.svg, 21×21) i.p.v. de generieke core-SVG. */
.woocommerce-cart .hinke-cart__actions .sellabees-wish-btn__icon {
	display: none;
}

.woocommerce-cart .hinke-cart__actions .sellabees-wish-btn::before {
	content: '';
	display: block;
	width: 21px;
	height: 21px;
	background: currentColor;
	-webkit-mask: url('../../img/icons/heart.svg') no-repeat center / contain;
	mask: url('../../img/icons/heart.svg') no-repeat center / contain;
}

.woocommerce-cart .hinke-cart__actions .sellabees-wish-btn.is-active {
	color: var(--hinke-sale);
}

.hinke-cart__remove {
	margin-top: 2px; /* hartje 377, prullenbak 379 */
	line-height: 0;
}

/* WooCommerce zet op `a.remove`: 1.5em ×-glyph, 1em×1em, border-radius 100% en
   `color: red !important` (+ rode hover-vulling). Het ontwerp wil een prullenbak
   zonder tekst: de glyph gaat op font-size 0 (dan doet die !important-kleur niet
   meer mee) en het icoon komt uit een mask. */
.woocommerce .hinke-cart__remove a.remove,
.woocommerce-cart .hinke-cart__remove a.remove {
	display: block;
	width: 19px;
	height: 19px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	font-size: 0;
	line-height: 0;
	text-align: left;
	text-decoration: none;
}

.woocommerce .hinke-cart__remove a.remove:hover,
.woocommerce-cart .hinke-cart__remove a.remove:hover {
	background: none;
	opacity: .6;
}

.woocommerce .hinke-cart__remove a.remove::before,
.woocommerce-cart .hinke-cart__remove a.remove::before {
	content: '';
	display: block;
	width: 19px;
	height: 19px;
	background: var(--hinke-body);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 19 19' fill='none' stroke='%23000' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.6 5.1h13.8'/%3E%3Cpath d='M7.3 5.1V3.4a1.1 1.1 0 0 1 1.1-1.1h2.2a1.1 1.1 0 0 1 1.1 1.1v1.7'/%3E%3Cpath d='M4.6 5.1l.75 10.4a1.4 1.4 0 0 0 1.4 1.3h5.5a1.4 1.4 0 0 0 1.4-1.3l.75-10.4'/%3E%3Cpath d='M7.9 8.1v5.6'/%3E%3Cpath d='M11.1 8.1v5.6'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 19 19' fill='none' stroke='%23000' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.6 5.1h13.8'/%3E%3Cpath d='M7.3 5.1V3.4a1.1 1.1 0 0 1 1.1-1.1h2.2a1.1 1.1 0 0 1 1.1 1.1v1.7'/%3E%3Cpath d='M4.6 5.1l.75 10.4a1.4 1.4 0 0 0 1.4 1.3h5.5a1.4 1.4 0 0 0 1.4-1.3l.75-10.4'/%3E%3Cpath d='M7.9 8.1v5.6'/%3E%3Cpath d='M11.1 8.1v5.6'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* -----------------------------------------------------------------------------
   "Verder winkelen" — 202×53 goud op x=299 y=818
   -------------------------------------------------------------------------- */

.woocommerce-cart a.hinke-cart__continue {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 202px;
	height: 53px;
	margin: 24px 0 0; /* lijst eindigt 794 → knop 818 */
	padding: 0;
	border: 0;
	border-radius: 0;
	background: var(--hinke-gold);
	font-family: var(--hinke-font-body);
	font-weight: 800;
	font-size: 14px;
	line-height: 1;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--hinke-white);
}

.woocommerce-cart a.hinke-cart__continue:hover {
	background: var(--hinke-ink);
	color: var(--hinke-white);
}

/* -----------------------------------------------------------------------------
   Samenvatting — x=1195 w=426, geen vulling en geen rand
   -------------------------------------------------------------------------- */

.hinke-cart__summary {
	padding-top: 6px; /* rij 356 → kop 362 */
}

.woocommerce-cart .hinke-cart__summary-title {
	margin: 0 0 0 1px; /* ontwerp: 1196 */
	font-family: var(--hinke-font-body);
	font-weight: 700;
	font-size: 25px;
	line-height: 31px;
	text-transform: uppercase;
	color: var(--hinke-body);
}

.woocommerce-cart ul.hinke-cart__usps {
	margin: 27px 0 0; /* kop eindigt 393 → usp 1 op 420 */
	padding: 0;
	list-style: none;
}

.woocommerce-cart li.hinke-cart__usp {
	display: flex;
	align-items: flex-start;
	gap: 7px; /* icoon 1195+15+7 → tekst op x=1217 */
	margin: 0;
	padding: 0;
	list-style: none;
}

.woocommerce-cart li.hinke-cart__usp + li.hinke-cart__usp {
	margin-top: 13px; /* 438 → 451 */
}

.woocommerce-cart .hinke-cart__usp-icon {
	flex: 0 0 auto;
	display: block;
	width: 15px;
	height: 15px;
	margin-top: 2px; /* tekst 420, icoon 422 */
	max-width: none;
}

.hinke-cart__usp-text {
	font-family: var(--hinke-font-body);
	font-weight: 400;
	font-size: 14px;
	line-height: 18px;
	color: var(--hinke-body);
}

.woocommerce-cart hr.hinke-cart__rule {
	height: 0;
	margin: 28px 0 0; /* usp 2 eindigt 469 → lijn 497 */
	padding: 0;
	border: 0;
	border-top: 1px solid var(--hinke-line);
	background: none;
}

.hinke-cart__total {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	margin-top: 19px; /* lijn eindigt 498 → totaal 517 */
}

.hinke-cart__total-label {
	font-family: var(--hinke-font-body);
	font-weight: 700;
	font-size: 14px;
	line-height: 18px;
	color: var(--hinke-body);
}

.woocommerce-cart .hinke-cart__total-value {
	font-family: var(--hinke-font-body);
	font-weight: 400;
	font-size: 14px;
	line-height: 18px;
	text-align: right;
	color: var(--hinke-body);
	white-space: nowrap;
}

.woocommerce-cart .hinke-cart__total-value .woocommerce-Price-amount,
.woocommerce-cart .hinke-cart__total-value strong,
.woocommerce-cart .hinke-cart__ship .woocommerce-Price-amount {
	font-weight: inherit;
	font-size: inherit;
}

/* De btw-toelichting van WooCommerce ("incl. btw") staat niet in het ontwerp. */
.woocommerce-cart .hinke-cart__total-value .includes_tax,
.woocommerce-cart .hinke-cart__total-value small {
	display: none;
}

.woocommerce-cart p.hinke-cart__ship {
	margin: 13px 0 0; /* totaal eindigt 535 → note 548 */
	font-family: var(--hinke-font-body);
	font-weight: 400;
	font-size: 14px;
	line-height: 18px;
	color: var(--hinke-body);
}

/* Gratis-verzending-gehaald (Figma 2197:1627). */
.woocommerce-cart p.hinke-cart__ship--reached {
	color: var(--hinke-cart-free);
}

/* --- Afrekenknop 425×53 goud op x=1196 y=588 ----------------------------- */

/* WooCommerce zet `padding: 1em 0` + clearfix-pseudo's op `.wc-proceed-to-checkout`. */
.woocommerce-cart .wc-proceed-to-checkout.hinke-cart__checkout-wrap {
	margin-top: 22px; /* note eindigt 566 → knop 588 */
	padding: 0;
}

.woocommerce-cart .wc-proceed-to-checkout.hinke-cart__checkout-wrap::before,
.woocommerce-cart .wc-proceed-to-checkout.hinke-cart__checkout-wrap::after {
	display: none;
}

/* Slaat `.woocommerce-cart .wc-proceed-to-checkout a.checkout-button` (0,3,1)
   met (0,4,1), en de generieke `a.button`-opmaak (radius 3px, paars). */
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button.hinke-cart__checkout,
.woocommerce .wc-proceed-to-checkout a.checkout-button.hinke-cart__checkout {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 425px;
	height: 53px;
	margin: 0 0 0 1px; /* ontwerp: 1196 */
	padding: 0;
	border: 0;
	border-radius: 0;
	background: var(--hinke-gold);
	background-color: var(--hinke-gold);
	background-image: none;
	box-shadow: none;
	font-family: var(--hinke-font-body);
	font-weight: 800;
	font-size: 14px;
	line-height: 1;
	text-align: center;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--hinke-white);
}

.woocommerce-cart .wc-proceed-to-checkout a.checkout-button.hinke-cart__checkout:hover,
.woocommerce .wc-proceed-to-checkout a.checkout-button.hinke-cart__checkout:hover {
	background-color: var(--hinke-ink);
	color: var(--hinke-white);
}

/* --- Betaallogo 55.7×21.2, gecentreerd (x=1380) op y=662 ---------------- */

.woocommerce-cart img.hinke-cart__pay {
	display: block;
	width: 55.7px;
	height: 21.2px;
	max-width: none;
	margin: 21px auto 0; /* knop eindigt 641 → logo 662 */
}

/* -----------------------------------------------------------------------------
   Crosssell "Style it up" — kop 942, pijlen 948, kaarten 1027
   Kaartopmaak zelf komt uit layout.css (.hinke-card*); alleen de carrousel-chroom
   staat hier, omdat pages/home.css op de winkelwagen niet laadt.
   -------------------------------------------------------------------------- */

.hinke-carousel--cart {
	margin-top: 71px; /* kolom 1 eindigt 871 → kop 942 */
}

.hinke-carousel__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 24px;
}

.woocommerce-cart .hinke-carousel__title {
	margin: 0;
	font-family: var(--hinke-font-heading);
	font-weight: 400;
	font-size: 40px;
	line-height: normal;
	color: var(--hinke-pink);
}

/* Pijlen 44×44 met 9px ertussen, rechts op 1621 → x=1524 en 1577. */
.hinke-carousel__nav {
	flex: 0 0 auto;
	display: flex;
	gap: 9px;
	margin-top: 6px;
}

.woocommerce-cart .hinke-carousel__arrow {
	position: relative;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: var(--hinke-pink);
	cursor: pointer;
}

.woocommerce-cart .hinke-carousel__arrow:hover {
	background: var(--hinke-gold);
}

.woocommerce-cart .hinke-carousel__arrow[disabled] {
	opacity: .35;
	cursor: default;
}

.hinke-carousel__arrow::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 19px;
	height: 10.83px;
	background: var(--hinke-white);
	-webkit-mask: url('../../img/icons/chevron.svg') no-repeat center / contain;
	mask: url('../../img/icons/chevron.svg') no-repeat center / contain;
}

.hinke-carousel__arrow--next::before {
	transform: translate(-50%, -50%) rotate(-90deg);
}

.hinke-carousel__arrow--prev::before {
	transform: translate(-50%, -50%) rotate(90deg);
}

/* Spoor: 4 kaarten van 314 met 22 ertussen (4×314 + 3×22 = 1322). */
.woocommerce-cart ul.hinke-carousel__track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 314px;
	gap: 22px;
	margin: 31px 0 0; /* kop 942 + 54 (DM Serif 40/normal) → kaarten 1027 */
	padding: 0;
	list-style: none;
	overflow-x: auto;
	scroll-behavior: smooth;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.woocommerce-cart ul.hinke-carousel__track::-webkit-scrollbar {
	display: none;
}

.woocommerce-cart li.hinke-card {
	margin: 0;
	padding: 0;
	list-style: none;
	scroll-snap-align: start;
}

/* -----------------------------------------------------------------------------
   Lege winkelwagen
   -------------------------------------------------------------------------- */

.hinke-cart--empty {
	padding-bottom: 40px;
}

.woocommerce-cart .hinke-cart--empty .cart-empty {
	margin: 0;
	font-family: var(--hinke-font-body);
	font-weight: 400;
	font-size: 16px;
	line-height: 24px;
	color: var(--hinke-body);
}

.woocommerce-cart .hinke-cart--empty a.hinke-cart__continue {
	margin-top: 24px;
}

/* -----------------------------------------------------------------------------
   Meldingen van WooCommerce — in de huisstijl, niet in het paars van de plugin
   -------------------------------------------------------------------------- */

.woocommerce-cart .hinke-page__body .woocommerce-message,
.woocommerce-cart .hinke-page__body .woocommerce-info,
.woocommerce-cart .hinke-page__body .woocommerce-error {
	margin: 0 0 24px;
	padding: 14px 18px;
	border-top: 0;
	border-radius: 0;
	background: var(--hinke-band);
	font-family: var(--hinke-font-body);
	font-size: 14px;
	line-height: 20px;
	color: var(--hinke-body);
	list-style: none;
}

.woocommerce-cart .hinke-page__body .woocommerce-message::before,
.woocommerce-cart .hinke-page__body .woocommerce-info::before,
.woocommerce-cart .hinke-page__body .woocommerce-error::before {
	display: none;
}

/* =============================================================================
   RESPONSIVE

   Het ontwerp bestaat ALLEEN op 1920 (Figma-pagina "V1" heeft geen mobiel frame;
   de winkelwagen staat er als 2197:1365 en 2197:1627, beide 1920 breed). Alles
   hieronder is dus een vertaling, geen overname — de maten die niet uit het
   ontwerp komen staan met een reden erbij. Wat uit het ontwerp blijft: de
   verhouding van de thumb (130:159), de kleuren, de typografie, de gouden knop
   en de opbouw van de regel (beeld links, gegevens rechts, regelbedrag rechts).

   Gemeten in echte tijd (headless Chrome, eigen profiel) op 360, 390, 414, 768 en
   1024, met 1 regel, 3 regels en leeg.
   ========================================================================== */

@media (max-width: 1400px) {
	.hinke-cart__grid {
		grid-template-columns: minmax(0, 1fr) 426px;
		column-gap: 48px;
	}

	.hinke-cart__price {
		right: 0;
	}

	.hinke-cart__actions {
		right: 0;
	}
}

/* -----------------------------------------------------------------------------
   ≤ 1024 — AANRAAKDOELEN (WCAG 2.5.5/2.5.8)

   Vanaf hier is een aanwijzer een vinger: 768 en 1024 zijn tablet-breedtes, geen
   muis-breedtes. De drie doelen in een regel zijn met een muis prima maar met een
   vinger te klein: gemeten waren − 22×34, + 22×34, het hartje 22×22 en de
   prullenbak 20×20. Alles wordt hier minstens 44×44 effectief; het BEELD blijft
   waar het ontwerp het zet (het hartje en de prullenbak groeien met een
   onzichtbaar ::after-vlak, niet met een grotere doos).
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {

	/* --- Stepper: vak 81×35 met cellen 22/36/21 wordt 134×46 met 44/44/44 ----
	   Zelfde component (kader, radius, interne scheidingen), alleen op vingermaat.
	   134 = 3×44 + 2px rand, 46 = 44 + 2px rand (border-box). */
	/* `:not(--vast)`: staat er niets te kiezen (min == max), dan is er geen kader
	   en geen knop, alleen de tekstregel "Aantal: 1" — die mag geen doos van
	   134×46 krijgen. */
	.woocommerce-cart .hinke-cart__qty:not(.hinke-cart__qty--vast) {
		grid-template-columns: 44px minmax(0, 1fr) 44px;
		width: 134px;
		height: 46px;
	}

	/* De − en + stonden op 10px: op een knop van 44px is dat een speldenprik. */
	.woocommerce-cart .hinke-cart__step {
		font-size: 16px;
	}

	/*
	 * 16px is hier geen smaak maar techniek: iOS Safari zoomt de pagina in zodra
	 * je een invoerveld met een kleinere letter aanraakt, en die zoom draait niet
	 * terug. Het veld is 44 hoog, dus 16px past ruim.
	 */
	.woocommerce-cart .hinke-cart__qty .quantity input.qty,
	.woocommerce .hinke-cart__qty .quantity input.qty {
		font-size: 16px;
	}

	/*
	 * Hartje en prullenbak: 24px ertussen in plaats van 9. Met een aanraakvlak van
	 * 44 breed om iconen van 21 en 19 zouden die vlakken elkaar bij 9px voor 15px
	 * OVERLAPPEN — dan verwijder je iets terwijl je het wilde bewaren. 24 zet de
	 * middens exact 44 apart: de vlakken raken elkaar en overlappen niet.
	 */
	.hinke-cart__actions {
		gap: 24px;
	}

	.woocommerce-cart .hinke-cart__actions .sellabees-wish-btn::after,
	.woocommerce .hinke-cart__remove a.remove::after,
	.woocommerce-cart .hinke-cart__remove a.remove::after {
		content: '';
		position: absolute;
		top: 50%;
		left: 50%;
		width: 44px;
		height: 44px;
		transform: translate(-50%, -50%);
	}

	/* Het vlak hangt aan het element, dus dat moet een positie-anker zijn. */
	.woocommerce .hinke-cart__remove a.remove,
	.woocommerce-cart .hinke-cart__remove a.remove {
		position: relative;
	}

	/* De ruimte rechts van de naam staat nu bij de basisregel, dus voor élke
	   breedte — zie de toelichting daar. Hier stond hem alleen voor ≤1024. */

	/* Vangnet: één onafgebroken lang woord (een naam zonder spaties) mag de
	   kolom niet openbreken en zo de pagina breder maken dan het scherm. */
	.woocommerce-cart .hinke-cart__name,
	.hinke-cart__meta {
		overflow-wrap: anywhere;
	}
}

/* -----------------------------------------------------------------------------
   ≤ 900 — twee kolommen worden één, en de samenvatting schuift naar boven

   KEUZE: op één kolom komt de samenvatting DIRECT onder de regels, en "Verder
   winkelen" daar weer onder. In de bron staat "Verder winkelen" nog binnen het
   formulier tussen de regels en de samenvatting; dat duwde de knop "Ga door naar
   afrekenen" 77px verder naar beneden. Reden: de klant die klaar is met kijken
   wil afrekenen — de primaire knop hoort tegen de regels aan te staan die hij
   net heeft gecontroleerd, en de secundaire actie ("nog even doorkijken") hoort
   daar ná te komen. De samenvatting BOVEN de regels zetten zou het totaal tonen
   vóór de regels waar het de som van is, en de knop vóór de controle plaatsen.

   `display: contents` op het formulier laat de lijst en de knop meedoen als
   rasterkinderen, zodat `order` ze kan verdelen. Het formulier zelf heeft geen
   eigen opmaak nodig (er zit geen verzendknop in — aantallen gaan via AJAX) en
   blijft als element bestaan, dus de POST-doelwit-rol verandert niet.
   Prijs: de tabvolgorde blijft de bronvolgorde (regels → Verder winkelen →
   afrekenen); dat is dezelfde volgorde als op het bureaublad en blijft logisch.
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
	.hinke-cart__grid {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 32px;
	}

	.hinke-cart__form {
		display: contents;
	}

	.woocommerce-cart ul.hinke-cart__items {
		order: 1;
	}

	.hinke-cart__summary {
		order: 2;
		padding-top: 0;
	}

	.woocommerce-cart a.hinke-cart__continue {
		order: 3;
		margin-top: 0; /* de rij-afstand van het raster doet dit al */
	}

	.woocommerce-cart .wc-proceed-to-checkout a.checkout-button.hinke-cart__checkout,
	.woocommerce .wc-proceed-to-checkout a.checkout-button.hinke-cart__checkout {
		width: 100%;
		margin-left: 0;
	}
}

/* -----------------------------------------------------------------------------
   ≤ 640 — de regel opnieuw ingedeeld

   Op 360 is de tekstkolom naast een thumb van 96 nog 200px. Daar passen geen
   naam én twee aanraakdoelen van 44 naast elkaar (44 + 8 + 44 = 96, dan blijft
   er ~104px naam over: "Emma sneakers wit - 37, Wit" wordt dan drie regels).
   Daarom verhuizen het hartje en de prullenbak naar de vrije ruimte ONDER de
   thumb — precies zo breed als de thumb (44 + 8 + 44 = 96) — en gaat het
   regelbedrag rechts op diezelfde regel staan. De regel leest dan als:
   beeld + productgegevens boven, acties + regelbedrag onder.

   Dat is ook de plek waar het bedrag hoort: in de bron valt `.product-subtotal`
   op mobiel als rasterkind in de EERSTE kolom (gemeten x=24, onder de thumb),
   dus links onder het beeld in plaats van bij de prijsregel.
   -------------------------------------------------------------------------- */

@media (max-width: 640px) {
	.woocommerce-cart .hinke-page__title {
		font-size: 28px;
	}

	.woocommerce-cart li.hinke-cart__item {
		/* Kolom 1 = thumbbreedte = de twee aanraakdoelen eronder (44+8+44). */
		grid-template-columns: 96px minmax(0, 1fr);
		column-gap: 16px;
		row-gap: 10px;
		min-height: 0;
		padding-bottom: 12px;
	}

	/* 96×118 houdt de verhouding van de 130×159 uit het ontwerp aan (0,81). */
	.hinke-cart__thumb,
	.woocommerce-cart .hinke-cart__thumb img {
		width: 96px;
		height: 118px;
	}

	.hinke-cart__info {
		padding-top: 0;
		padding-right: 0; /* de acties staan niet meer rechtsboven */
	}

	.woocommerce-cart .hinke-cart__name {
		padding-right: 0;
	}

	.hinke-cart__meta {
		min-height: 0;
	}

	.woocommerce-cart .hinke-cart__qty:not(.hinke-cart__qty--vast) {
		margin-top: 12px;
	}

	/* --- Acties: onder de thumb, twee doelen van 44×44 met 8 ertussen -------
	   8px tussenruimte bij doelen van 44 breed houdt de middens 52 apart; dat is
	   de ondergrens die ook Material aanhoudt en ruim binnen WCAG 2.5.8. */
	.hinke-cart__actions {
		position: static;
		grid-column: 1;
		grid-row: 2;
		align-items: center;
		gap: 8px;
	}

	.woocommerce-cart .hinke-cart__actions .sellabees-wish-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
	}

	.hinke-cart__remove {
		margin-top: 0; /* beide doelen zijn nu 44 hoog en staan gelijk */
	}

	.woocommerce .hinke-cart__remove a.remove,
	.woocommerce-cart .hinke-cart__remove a.remove {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
	}

	/* --- Regelbedrag: rechts op de actie-regel, op ooghoogte van de knoppen -- */
	.hinke-cart__price {
		position: static;
		grid-column: 2;
		grid-row: 2;
		align-self: center;
		display: block;
		margin-top: 0;
		text-align: right;
	}

	/* Minder lucht tussen de regels: de regel is nu hoger (twee rijen), dus 34px
	   ertussen maakt de lijst onnodig lang. De scheidingslijn blijft de grens. */
	.woocommerce-cart li.hinke-cart__item + li.hinke-cart__item {
		margin-top: 20px;
	}

	/* --- Carrousel: een kaart van 314 past niet in een spoor van 312 ---------
	   Op 360 was de kaart BREDER dan het spoor (314 > 312), dus je kreeg nooit
	   een hele kaart te zien. 78% laat de volgende kaart een stuk meekijken —
	   dat is op touch het enige signaal dat er te vegen valt. */
	.woocommerce-cart ul.hinke-carousel__track {
		grid-auto-columns: min(78%, 314px);
		gap: 16px;
	}

	/* Betaallogo's: het bestand is 213×81, dus op 80 breed nog steeds scherp.
	   Op 55,7 (de ontwerpmaat op een canvas van 1920) zijn twee merken op een
	   telefoon niet meer te onderscheiden. */
	.woocommerce-cart img.hinke-cart__pay {
		width: 80px;
		height: 30.4px;
	}
}