/* Het mandje: eigen markup uit inc/cart.php, gekleed met de tokens. De
   aantal-knoppen komen uit .hn-qty en de totalenkaart uit .hn-summary
   (commerce.css); hier staat de indeling. */

/* ---- De lege staat: een kaart met icoon, kop, één zin en de knop ---- */
.hn-cart__leeg{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--hn-s3);padding:var(--hn-s8) var(--hn-s5);background:var(--surface-card);border-radius:var(--hn-radius);box-shadow:var(--hn-shadow)}
.hn-cart__leegicoon{display:inline-flex;align-items:center;justify-content:center;width:64px;height:64px;border-radius:50%;background:var(--hn-surface);color:var(--text-muted);margin-bottom:var(--hn-s2)}
.hn-cart__leeg h2{font-size:var(--hn-h3);margin:0}
.hn-cart__leeg p{max-width:32rem;margin:0 0 var(--hn-s3);color:var(--text-muted)}

/* ---- Regels links, totalen rechts ---- */
.hn-cart__grid{display:grid;gap:var(--hn-s6);align-items:start}
@media (width >= 900px){
.hn-cart__grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
/* Meeschuiven doet de kaart. Een sticky grid-item wordt begrensd door de hele
   grid-container, dus de kolom zelf vullen (align-self) en de kaart erbinnen
   sticky maken houdt hem netjes in zijn rij. */
.hn-cart__totalen{position:sticky;top:calc(var(--hn-kop) + var(--hn-s5))}
}

/* De regels als kaart. Elke regel: beeld links, naam boven met het
   prullenbakje in de hoek, aantal en regeltotaal op de onderste regel — op
   elke schermbreedte dezelfde vorm, alleen het beeld en de lucht verschillen. */
.hn-cart__regels{list-style:none;margin:0;padding:0;max-width:none;background:var(--surface-card);border-radius:var(--hn-radius);box-shadow:var(--hn-shadow)}
.hn-cart__regel{
	display:grid;
	grid-template-columns:112px minmax(0,1fr) auto;
	grid-template-areas:
		"beeld product   weg"
		"beeld aantal    stukprijs"
		"beeld aantal    totaal";
	align-items:start;
	column-gap:var(--hn-s5);row-gap:var(--hn-s2);
	margin:0;
	padding:var(--hn-s5);
	border-bottom:var(--hn-border)
}
.hn-cart__regel:last-child{border-bottom:0}
.hn-cart__beeld{grid-area:beeld;display:block}
.hn-cart__beeld img{width:112px;height:auto;border-radius:var(--hn-radius-sm);display:block}
.hn-cart__product{grid-area:product;min-width:0}
/* Twee regels: de naam, en daaronder merk en functie in één grijze regel.
   Drie losse regels (merk in kapitalen, naam in serif, functie) op dezelfde
   maat lazen als drie stijlen zonder rangorde (Ruud, 2026-09-11). */
.hn-cart__naam{display:block;font-size:var(--hn-text);font-weight:var(--hn-weight-semibold);color:var(--text-heading);text-decoration:none}
.hn-cart__naam:hover{color:var(--action-primary);text-decoration:underline}
.hn-cart__meta{display:block;font-size:var(--hn-ui);color:var(--text-muted);margin-top:2px}
/* De onderste regel: aantal links, bedrag rechts; de stukprijs klein erboven. */
.hn-cart__aantal{grid-area:aantal;align-self:end;justify-self:start}
.hn-cart__aantal input{-moz-appearance:textfield;appearance:textfield}
.hn-cart__aantal input::-webkit-outer-spin-button,.hn-cart__aantal input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.hn-cart__stukprijs{grid-area:stukprijs;align-self:end;text-align:right;font-size:var(--hn-label);color:var(--text-muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.hn-cart__regeltotaal{grid-area:totaal;align-self:end;text-align:right;font-size:var(--hn-text);font-weight:var(--hn-weight-bold);color:var(--text-heading);font-variant-numeric:tabular-nums;white-space:nowrap;line-height:1}
/* Het prullenbakje: 44 pixels om te raken, in de hoek van zijn eigen product. */
.hn-cart__weg{grid-area:weg;justify-self:end;display:inline-flex;align-items:center;justify-content:center;width:var(--hn-tap);height:var(--hn-tap);margin:calc(var(--hn-s2) * -1) calc(var(--hn-s2) * -1) 0 0;border-radius:50%;color:var(--hn-muted);text-decoration:none}
.hn-cart__weg:hover,.hn-cart__weg:focus-visible{background:var(--hn-danger-tint);color:var(--hn-danger)}
/* Eén stuk: de stukprijs en het regeltotaal zijn hetzelfde bedrag; dan blijft
   alleen het totaal staan. De klasse zet inc/cart.php, en cart.js werkt hem bij. */
.hn-cart__regel--enkel .hn-cart__stukprijs{display:none}

/* Verder winkelen, de kortingsbon en bijwerken onder de regels */
.hn-cart__acties{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--hn-s3) var(--hn-s5);margin-top:var(--hn-s4);padding:0 var(--hn-s2)}
.hn-cart__verder{display:inline-flex;align-items:center;gap:var(--hn-s2);min-height:var(--hn-tap);font-size:var(--hn-ui);font-weight:var(--hn-weight-semibold);color:var(--action-primary);text-decoration:none}
.hn-cart__verder:hover{text-decoration:underline}
/* De bon zit achter één regel; open klapt het formulier eronder uit. */
.hn-cart__coupon{flex:1 1 280px;max-width:420px;margin-left:auto;text-align:right}
.hn-cart__couponform{text-align:left}
.hn-cart__coupon summary{display:inline-flex;align-items:center;min-height:var(--hn-tap);font-size:var(--hn-ui);color:var(--text-muted);cursor:pointer;list-style:none}
.hn-cart__coupon summary::-webkit-details-marker{display:none}
.hn-cart__coupon summary:hover{color:var(--action-primary);text-decoration:underline}
.hn-cart__couponform{display:flex;gap:var(--hn-s3);margin-top:var(--hn-s2)}
.hn-cart__couponform .hn-input{flex:1;min-width:0}
/* Met JavaScript werkt elke wijziging direct door; de knop is dan overbodig. */
.hn-cart.hn-js .hn-cart__update{display:none}

/* De totalenkaart: één maat voor alles wat geen totaal is (rijen, Afterpay,
   knoppen), het totaalbedrag groter, bijschriften in de labelmaat. */
/* De kop en het woord "Total" in dezelfde stijl: Karla vet op tekstmaat —
   de twee ankers van de kaart. Geen kapitalen; die gebruiken we alleen voor
   labels (Ruud, 2026-09-11). */
.hn-summary__kop,.hn-cart__totalen .hn-summary__row--total > span{font-family:var(--font-body);font-size:var(--hn-text);font-weight:var(--hn-weight-bold);letter-spacing:0;color:var(--text-heading)}
/* "incl. GST" achter Total: klein en grijs, het bedrag blijft de blikvanger. */
.hn-summary__belasting{font-size:var(--hn-label);font-weight:var(--hn-weight-regular);color:var(--text-muted)}
.hn-summary__kop{margin-bottom:var(--hn-s3)}
.hn-cart__totalen .hn-extern{font-size:var(--hn-ui)}
.hn-cart__couponweg{color:var(--hn-muted);text-decoration:none;font-size:var(--hn-ui);line-height:1;padding:0 var(--hn-s2)}
.hn-cart__couponweg:hover{color:var(--hn-danger)}
.hn-cart__verzendkeuze{border:0;margin:0;padding:0;min-width:0}
.hn-cart__verzendkeuze legend{display:block;width:100%;padding:0}
.hn-cart__verzendkeuze .hn-check{font-size:var(--hn-ui);min-height:0;padding:var(--hn-s1) 0}
.hn-cart__afrekenen{margin-top:var(--hn-s4)}
.hn-cart__expres{margin:var(--hn-s4) 0 var(--hn-s2);font-size:var(--hn-label);letter-spacing:var(--hn-tracking);text-transform:uppercase;color:var(--text-muted)}
/* Een hek onder het totaal of de knop (Afterpay, expresknoppen) krijgt lucht. */
.hn-cart__totalen .hn-extern{margin-top:0}
/* De expresknoppen: drie gelijke tegels op één rij. Apple Pay en Google Pay
   (Square) en Afterpay Express halen het adres uit het account van de klant en
   slaan het afrekenen over (Ruud, 2026-09-21). De Afterpay-knop komt uit de
   plugin: we pakken hem structureel (de enige losse knop in dit hek), niet op
   zijn klasse, en laten alleen het logo staan, zoals bij Apple en Google. */
.hn-cart__expresknoppen{display:flex;gap:var(--hn-s3);align-items:stretch}
.hn-cart__expresknoppen > *{flex:1;min-width:0}
.hn-cart__expresknoppen > button{display:flex;align-items:center;justify-content:center;height:var(--hn-tap);padding:0 var(--hn-s3);border:1px solid transparent;border-radius:var(--hn-radius);font-size:0;line-height:0}
.hn-cart__expresknoppen > button img{display:block;width:100%;height:20px;object-fit:contain}
/* Nog zoveel tot gratis verzending — of gehaald, dan in groen. */
.hn-cart__gratis{margin:0;padding:var(--hn-s1) 0 var(--hn-s2);font-size:var(--hn-ui);color:var(--text-body);max-width:none}
.hn-cart__gratis .hn-icon{display:inline-block;vertical-align:-3px;margin-right:var(--hn-s2)}
.hn-cart__gratis--gehaald{color:var(--hn-ok);font-weight:var(--hn-weight-semibold)}
/* De zekerheden onder de knop: drie korte regels met een icoon. */
.hn-cart__zekerheden{list-style:none;margin:var(--hn-s4) 0 0;padding:var(--hn-s4) 0 0;border-top:var(--hn-border);max-width:none}
.hn-cart__zekerheden li{display:flex;align-items:center;gap:var(--hn-s3);margin:0;padding:var(--hn-s1) 0;font-size:var(--hn-ui);color:var(--text-muted)}
.hn-cart__zekerheden .hn-icon{flex:none;color:var(--hn-brand)}

/* Tijdens het bijwerken: gedempt, maar niet aanklikbaar — anders stapelen de
   tikken zich op boven op een lijst die zo meteen verandert. */
.hn-cart[data-bezig] .hn-cart__grid{opacity:.6;pointer-events:none;transition:opacity .12s ease}

/* ---- De productband onder het mandje ---- */
.hn-cart__band{margin:var(--hn-s7) 0 0}
.hn-cart__band .hn-sectionhead{margin-bottom:var(--hn-s5)}
/* Op een telefoon twee naast elkaar in plaats van vier onder elkaar — dezelfde
   twee kolommen als de winkel daar toont. */
@media (width < 560px){
.hn-cart__band .hn-grid--4{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--hn-s4)}
}

/* ---- De vaste afrekenbalk op een telefoon ----
   Het mandje stapelt op een klein scherm, dus de knop in de totalenkaart zakt
   met elk product verder weg. Deze balk houdt afrekenen op één tik; cart.js
   schuift hem weg zodra de echte knop in beeld komt. */
.hn-cart__balk{display:none}
@media (width < 900px){
.hn-cart__balk{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;align-items:center;gap:var(--hn-s4);padding:var(--hn-s3) var(--hn-s4);background:var(--hn-white);border-top:var(--hn-border);box-shadow:0 -2px 16px rgba(18,36,43,.12);transform:translateY(110%);transition:transform .2s ease}
.hn-cart__balk[data-zichtbaar]{transform:none}
.hn-cart__balktotaal{display:flex;flex-direction:column;line-height:1.2}
.hn-cart__balktotaal span{font-size:var(--hn-label);letter-spacing:var(--hn-tracking);text-transform:uppercase;color:var(--text-muted)}
.hn-cart__balktotaal strong{font-size:var(--hn-text);color:var(--text-heading);font-variant-numeric:tabular-nums}
.hn-cart__balk .hn-btn{flex:1}
/* Ruimte onder de pagina, zodat de balk de voettekst niet afdekt. */
.hn-cart:has(.hn-cart__balk){padding-bottom:76px}
}

/* ---- Mandje op klein scherm: dezelfde vorm, kleiner beeld, minder lucht ---- */
@media (width < 768px){
.hn-cart__regel{
	grid-template-columns:72px minmax(0,1fr) auto;
	grid-template-areas:
		"beeld product   weg"
		"beeld stukprijs stukprijs"
		"beeld aantal    totaal";
	column-gap:var(--hn-s4);padding:var(--hn-s4)
}
.hn-cart__beeld img{width:72px}
/* De stukprijs past niet meer naast de knoppen; hij krijgt een eigen regel onder de naam. */
.hn-cart__stukprijs{text-align:left;align-self:start}
/* Naast de knoppen is er op 390px geen ruimte voor een groot bedrag. */
.hn-cart__regeltotaal{font-size:var(--hn-ui)}
/* De functieregel onder de naam maakt de kaart hoger dan hij hoeft te zijn;
   merk en naam zeggen op deze breedte genoeg. */
.hn-cart__meta{display:none}
.hn-cart__coupon{max-width:none;margin-left:0;text-align:left}
}