/* ==========================================================================
   Winkel: productpagina (pakket.php), winkelwagen (winkelwagen.php) en afrekenen (bestellen.php)
   Bouwt voort op de tokens en componenten uit style.css.
   ========================================================================== */

.phero--tight { padding-bottom: clamp(1.8rem, 3.5vw, 2.6rem); }

/* ---------- Kruimelpad ---------- */

.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: 2rem; font-size: .84rem; color: var(--muted); animation: fade-up .8s var(--ease) both; }
.crumbs a { color: var(--text-2); text-decoration: none; transition: color .2s; }
.crumbs a:hover { color: var(--text); }
.crumbs [aria-current] { color: var(--text); }

/* ---------- Productkop ---------- */

.product-hero { padding: calc(var(--nav-h) + 64px) 0 clamp(2.5rem, 5vw, 4rem); }
.product { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 400px); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.product__title { max-width: none; font-size: clamp(2.2rem, 4.6vw, 3.8rem); }
.product__lead { max-width: 34rem; }
.product__h2 { margin-bottom: 1.2rem; font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1.12; }

.keyspecs { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .75rem; margin: 2.2rem 0 0; padding: 0; list-style: none; }
.keyspec {
    display: grid; gap: .2rem;
    padding: 1.05rem 1.1rem 1rem;
    border-radius: var(--r-lg);
    animation: fade-up .9s var(--ease) both;
    animation-delay: calc(.4s + var(--i) * .07s);
}
.keyspec__icon { display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: .55rem; border-radius: 10px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--text-2); }
.keyspec__icon .icon { width: 17px; height: 17px; }
.keyspec b { font: 500 1.12rem/1.2 var(--f-display); letter-spacing: -.03em; overflow-wrap: anywhere; }
.keyspec small { font: 400 .62rem/1.4 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }

/* ---------- Bestelvak ---------- */

.buybox {
    position: sticky; top: 96px;
    padding: 1.5rem;
    border-radius: var(--r-xl);
    animation: fade-up 1s var(--ease) .25s both;
}
.buybox--featured { background: linear-gradient(180deg, rgba(216, 255, 69, .075), rgba(255, 255, 255, .03) 45%); }
.buybox--featured::before { background: linear-gradient(180deg, rgba(216, 255, 69, .55), rgba(216, 255, 69, .14) 45%, rgba(255, 255, 255, .07)); }
.buybox__head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: 1rem; }
.buybox__name { font: 400 .66rem/1.4 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); }
.buybox__price .price__amount { font-size: clamp(2.2rem, 18cqi, 3rem); }
.buybox__price .price__amount.is-long { font-size: clamp(1.9rem, 15.5cqi, 2.6rem); }
.buybox .plan__billing { margin-bottom: 1.2rem; }

.period { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin: 0 0 1rem; padding: 0; border: 0; }
.period label { position: relative; cursor: pointer; }
.period input { position: absolute; opacity: 0; }
.period span {
    display: grid; gap: .15rem;
    padding: .75rem .9rem;
    border-radius: 12px;
    background: rgba(255, 255, 255, .035);
    box-shadow: inset 0 0 0 1px var(--line-2);
    transition: background .2s, box-shadow .2s;
}
.period label > span { height: 100%; align-content: start; } /* beide keuzes even hoog, ook als het kortingslabel op een eigen regel valt */
.period b { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .35rem; font-weight: 600; font-size: .92rem; }
.period__save { padding: .2rem .4rem; border-radius: 5px; background: rgba(216, 255, 69, .14); color: var(--volt); font: 500 .6rem/1 var(--f-mono); font-style: normal; white-space: nowrap; }
.period small { font-size: .74rem; color: var(--muted); }
.period label:hover span { background: var(--surface-2); }
.period input:checked + span { background: rgba(216, 255, 69, .07); box-shadow: inset 0 0 0 1.5px var(--volt); }
.period input:focus-visible + span { outline: 2px solid var(--volt); outline-offset: 3px; }

.buybox__cta { width: 100%; --h: 52px; }
.buybox__added { display: flex; gap: .7rem; align-items: flex-start; margin-top: .9rem; padding: .8rem .9rem; border-radius: 12px; background: rgba(216, 255, 69, .07); box-shadow: inset 0 0 0 1px rgba(216, 255, 69, .35); font-size: .88rem; animation: res-in .45s var(--ease) both; }
.buybox__added[hidden] { display: none; }
.buybox__added-icon { display: grid; place-items: center; width: 22px; height: 22px; flex: none; border-radius: 50%; background: var(--volt); color: var(--volt-ink); }
.buybox__added-icon .icon { width: 13px; height: 13px; stroke-width: 2.2; }
.buybox__added a { color: var(--text); text-decoration-color: var(--volt); text-underline-offset: 3px; white-space: nowrap; }
.buybox__setup { margin-top: .9rem; font-size: .84rem; color: var(--muted); }
.buybox__trust { display: grid; gap: .5rem; margin: 1.3rem 0 0; padding: 1.1rem 0 0; border-top: 1px solid var(--line); list-style: none; font-size: .85rem; color: var(--text-2); }
.buybox__trust li { display: flex; gap: .55rem; align-items: flex-start; }
.buybox__trust .icon { width: 16px; height: 16px; margin-top: .15rem; color: var(--mint); }

@media (max-width: 900px) {
    .product { grid-template-columns: minmax(0, 1fr); }
    .buybox { position: static; }
}

/* Vaste balk op mobiel zodra het bestelvak uit beeld is */
.buybar {
    position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 80;
    display: none; align-items: center; justify-content: space-between; gap: 1rem;
    padding: .6rem .6rem .6rem 1.1rem;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(20, 26, 38, .92), rgba(12, 16, 24, .92));
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    box-shadow: inset 0 0 0 1px var(--line-2), 0 20px 40px -16px rgba(0, 0, 0, .8);
    translate: 0 140%;
    transition: translate .45s var(--ease);
}
.buybar.is-on { translate: 0 0; }
.buybar__info { display: grid; min-width: 0; line-height: 1.25; }
.buybar__info b { font-weight: 600; font-size: .92rem; }
.buybar__info > span { font-size: .78rem; color: var(--muted); white-space: nowrap; }
@media (max-width: 900px) { .buybar:not([hidden]) { display: flex; } }

/* ---------- Sectienavigatie onder de kop ----------
   Een glazen pil, net zo breed en hoog als de ingeschoven hoofdnavigatie. Nadert hij bovenin de plek van die navigatie
   (.is-near), dan schuift de navigatie weg (main.js); zit hij vast (.is-docked), dan heeft hij die plek overgenomen:
   links verschijnt het merkteken (naar home), rechts de bestelknop zodra het bestelvak uit beeld is (.is-buy); na het
   toevoegen wordt dat een link naar de winkelwagen.
   Haal je de navigatie terug (flink omhoog scrollen, toetsenbord, menu), dan maakt de balk plaats. Zo staat er bovenin
   altijd één balk. */

.pnav {
    position: sticky; top: 12px; z-index: 60; /* dezelfde plek als .nav */
    pointer-events: none; /* alleen de pil zelf vangt klikken */
}
html:not(.js) .pnav { position: relative; } /* zonder JS geen overname: dan zou hij achter de hoofdnavigatie plakken */
.pnav__inner {
    display: flex; align-items: center; gap: 1rem;
    height: calc(var(--nav-h) - 6px); /* zo hoog als .nav.is-scrolled, en in beide standen gelijk: niets verspringt */
    padding: 0 7px 0 8px;
    background-color: rgba(10, 14, 22, 0);
    pointer-events: auto;
    transition: background-color .45s var(--ease), opacity .3s var(--ease), translate .45s var(--ease);
}
.pnav.is-docked .pnav__inner { background-color: rgba(12, 16, 25, .76); } /* donker glas, zo dicht als de ingeschoven hoofdnavigatie */
/* Komt de hoofdnavigatie terug terwijl de balk bovenin is, dan maakt de balk plaats: nooit twee balken over elkaar. Hoe
   zichtbaar hij is hangt af van de scrollpositie, niet van een timer: shop.js zet --pnav-o naar de afstand tot de onderkant
   van de navigatie. Vast of eronder blijft hij weg (.is-under); schuift hij er bij omhoog scrollen onder vandaan, dan komt
   hij op zijn eigen plek tevoorschijn, zonder gat en zonder plots opduiken verderop. */
body:has(.nav:not(.is-hidden)) .pnav.is-near .pnav__inner { opacity: var(--pnav-o, 0); }
body:has(.nav:not(.is-hidden)) .pnav.is-near:not(.is-docked) .pnav__inner { transition-duration: .45s, .12s, .45s; } /* volgt het scrollen */
body:has(.nav:not(.is-hidden)) .pnav.is-docked .pnav__inner { translate: 0 -10px; }
body:has(.nav:not(.is-hidden)) .pnav.is-under .pnav__inner { pointer-events: none; }
/* Focus in de balk mag de pagina niet verschuiven: de balk staat binnen de scroll-padding-top (100px) van html, en de
   browser zou anders gaan scrollen om de focus "in beeld" te halen. De negatieve marge heft die ruimte op. Chromium
   rekent dat alleen goed uit voor een element dat zelf een schuifvak is of in een schuifvak staat (de links, het
   merkteken); daarom overflow: hidden op de knop. */
.pnav :is(a, button) { scroll-margin-top: -100px; }
.pnav__buy .btn { overflow: hidden; }

/* Merkteken: in de pagina ingeklapt (en inert), schuift open zodra de balk bovenin staat. */
.pnav__home {
    display: flex; align-items: center; flex: none;
    width: 0; height: 40px; margin-right: -1rem; /* ingeklapt telt de gap ook niet mee */
    border-radius: 999px;
    overflow: hidden;
    color: var(--text);
    opacity: 0;
    transition: width .55s var(--ease), margin .55s var(--ease), opacity .3s var(--ease);
}
.pnav__home svg { flex: none; width: 33px; height: auto; margin-left: 12px; overflow: visible; translate: -10px 0; transition: translate .55s var(--ease); }
.pnav.is-docked .pnav__home { width: 54px; margin-right: -.35rem; opacity: 1; }
.pnav.is-docked .pnav__home svg { translate: 0 0; }
.pnav__home:hover .logo-dot { animation: logo-hop .6s var(--ease); }

.pnav__links { position: relative; display: flex; gap: .15rem; min-width: 0; margin-right: auto; overflow-x: auto; scrollbar-width: none; transition: --fade-l .3s var(--ease), --fade-r .3s var(--ease); }
.pnav__links::-webkit-scrollbar { display: none; }
.pnav__links a {
    flex: none;
    padding: .5rem .9rem;
    border-radius: 999px;
    font-size: .9rem;
    color: var(--text-2);
    text-decoration: none;
    white-space: nowrap;
    transition: color .25s, background .25s;
}
.pnav__links a:hover { color: var(--text); background: var(--surface); }
.pnav__links a:focus-visible { outline-offset: -2px; } /* binnen de pil: de schuifstrook knipt alles erbuiten af */
.pnav__links a[aria-current="true"] { color: var(--text); }
/* Schuiven de links (smal scherm), dan vervaagt alleen de kant waar nog meer staat (shop.js zet .is-more-l / .is-more-r). */
@property --fade-l { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --fade-r { syntax: "<length>"; inherits: false; initial-value: 0px; }
.pnav__links.is-more-l { --fade-l: 2.5rem; }
.pnav__links.is-more-r { --fade-r: 2.5rem; }
.pnav__links:is(.is-more-l, .is-more-r) {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent);
}
/* De actieve sectie: één pil die naar de juiste link schuift (shop.js zet --pnav-x en --pnav-w). */
.pnav__links::before {
    content: ""; position: absolute; top: 0; bottom: 0; left: 0; z-index: -1;
    width: var(--pnav-w, 0px);
    border-radius: 999px;
    background: var(--surface-2);
    box-shadow: inset 0 0 0 1px var(--line);
    translate: var(--pnav-x, 0px) 0;
    opacity: 0;
    transition: translate .5s var(--ease), width .5s var(--ease), opacity .3s var(--ease);
}
.pnav__links.has-current::before { opacity: 1; }

.pnav__buy {
    display: flex; align-items: center; gap: 1rem; flex: none;
    opacity: 0; visibility: hidden; translate: 0 6px;
    transition: opacity .3s var(--ease), translate .4s var(--ease), visibility 0s .3s;
}
.pnav.is-buy .pnav__buy { opacity: 1; visibility: visible; translate: 0 0; transition: opacity .3s var(--ease), translate .4s var(--ease); }
.pnav__cart { animation: res-in .45s var(--ease) backwards; } /* na het toevoegen neemt deze link de plek van de knop in */
.pnav__name { font-weight: 600; font-size: .9rem; white-space: nowrap; }
/* Flex met gap: een spatie tussen bedrag en "per maand" valt in de display-letter (negatieve spatiëring) te krap uit. */
.pnav__price { display: inline-flex; align-items: baseline; gap: .45em; font: 500 1rem var(--f-display); letter-spacing: -.03em; white-space: nowrap; }
@media (max-width: 1100px) { .pnav__name { display: none; } }
/* Krap: eerst gaat "per maand" weg, en het vinkje van de winkelwagenlink. De knop houdt zijn tekst; als los icoon leek hij op
   "naar de winkelwagen". */
@media (max-width: 1000px) { .pnav__price .per, .pnav__cart .icon { display: none; } }
@media (max-width: 900px) {
    .pnav__buy { display: none; } /* de vaste bestelbalk onderin neemt het hier over */
    .pnav__inner { gap: .6rem; padding-inline: 6px; }
    .pnav__links { margin-right: 0; }
    .pnav__links a { padding: .45rem .75rem; font-size: .86rem; }
    .pnav.is-docked .pnav__home { width: 48px; margin-right: -.15rem; }
    .pnav__home svg { width: 30px; margin-left: 10px; }
}
@media (max-width: 520px) { .pnav { top: 8px; } } /* als .nav */

/* Ankerlinks: de sectie begint precies waar de balk ophoudt. html heeft al scroll-padding-top: 100px; de balk eindigt
   op zijn top (12px, smal 8px) plus zijn hoogte, dus de marge is dat min 100px. */
.page-pakket .psec { scroll-margin-top: calc(12px + var(--nav-h) - 6px - 100px); }
@media (max-width: 520px) { .page-pakket .psec { scroll-margin-top: calc(8px + var(--nav-h) - 6px - 100px); } }

/* ---------- Overzicht ---------- */

.overview { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.overview__main h2 { margin-bottom: 1.1rem; font-size: clamp(1.6rem, 2.8vw, 2.3rem); line-height: 1.12; }
.overview__text { max-width: 62ch; color: var(--text-2); line-height: 1.75; }
.overview__text p { margin: 0 0 1rem; }
.overview__text h2 { margin: 1.6rem 0 .6rem; font-size: 1.2rem; color: var(--text); }
.overview__text ul { margin: 0 0 1rem; padding-left: 1.2rem; }
.overview__text strong { color: var(--text); }
.overview__text a { color: var(--text); text-decoration-color: var(--volt); }
.overview__h3 { margin: 2rem 0 1rem; font-size: 1.05rem; }
.overview__advice { font-size: .92rem; color: var(--text-2); }
.overview__advice a { color: var(--text); text-decoration-color: var(--volt); text-underline-offset: 3px; }

.summary-card { position: sticky; top: 100px; padding: 1.4rem 1.5rem 1.5rem; border-radius: var(--r-xl); } /* net onder de balk bovenin (die eindigt op 68px) */
.summary-card h3 { margin-bottom: .9rem; font: 400 .66rem var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.summary-card dl { display: grid; margin: 0 0 1.1rem; }
.summary-card dl div { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .62rem 0; border-bottom: 1px solid var(--line); font-size: .92rem; }
.summary-card dl div:last-child { border-bottom: 0; }
.summary-card dt { color: var(--muted); }
.summary-card dd { margin: 0; font-weight: 600; text-align: right; }
.summary-card dd s { margin-right: .3rem; font-weight: 400; color: var(--muted); text-decoration-thickness: 1px; } /* gewone prijs bij korting */
@media (max-width: 900px) {
    .overview { grid-template-columns: minmax(0, 1fr); }
    .summary-card { position: static; }
}

.fit { display: grid; gap: .75rem; margin: 0 0 1.3rem; padding: 0; list-style: none; }
.fit li { display: flex; gap: .75rem; align-items: flex-start; font-size: 1rem; }
.fit .icon { width: 20px; height: 20px; margin-top: .1rem; color: var(--volt); }

/* ---------- Specificatieblad ---------- */

.sheet { padding: clamp(1.2rem, 3vw, 2rem) clamp(1.2rem, 3.5vw, 2.4rem); border-radius: var(--r-xl); }
.sheet__group { margin: 0; padding: 1.4rem 0 .8rem; font: 400 .66rem var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--line-2); }
.sheet__group:first-child { padding-top: .2rem; }
.sheet__rows { margin: 0 0 .6rem; }
.sheet__row { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; gap: .4rem 1.2rem; align-items: start; padding: 1.15rem 0; border-bottom: 1px solid var(--line); }
.sheet__row:last-child { border-bottom: 0; }
.sheet__row dt { padding-top: .5rem; font-weight: 600; font-size: 1rem; }
.sheet__row dt small { display: block; max-width: 60ch; margin-top: .3rem; font-weight: 400; font-size: .9rem; line-height: 1.55; color: var(--text-2); }
.sheet__row dd { margin: 0; padding-top: .42rem; font: 500 1.12rem/1.3 var(--f-display); letter-spacing: -.03em; text-align: right; }
.sheet__yes .icon { width: 22px; height: 22px; color: var(--mint); }
.spec__icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--text); }
.spec__icon .icon { width: 19px; height: 19px; }
@media (max-width: 560px) {
    .sheet__row { grid-template-columns: 36px minmax(0, 1fr); }
    .spec__icon { width: 36px; height: 36px; }
    .sheet__row dd { grid-column: 2; grid-row: 1; padding-top: 0; text-align: left; font-size: 1.02rem; }
    .sheet__row dt { grid-column: 2; padding-top: 0; }
    .sheet__row .spec__icon { grid-row: 1 / span 2; }
}

/* ---------- Vergelijken: kolom van dit pakket ---------- */

.compare__tag { display: block; width: max-content; margin: 0 auto .45rem; padding: .25rem .45rem; border-radius: 5px; background: rgba(216, 255, 69, .12); color: var(--volt); font: 500 .56rem/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; }
.compare th.is-current { color: var(--text); }
.compare__here { display: inline-block; padding: .55rem 0; font-size: .82rem; color: var(--muted); }

/* ---------- Goed om te weten ---------- */

.know { padding: clamp(1.3rem, 3vw, 2rem); border-radius: var(--r-xl); }
.know h3 { margin-bottom: 1rem; font-size: 1.05rem; }
.know ul { display: grid; margin: 0 0 1.4rem; padding: 0; list-style: none; }
.know li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: .9rem; padding: .95rem 0; border-top: 1px solid var(--line); }
.know li:first-child { border-top: 0; padding-top: .2rem; }
.know li > .icon { width: 20px; height: 20px; margin-top: .1rem; color: var(--mint); }
.know li b { display: block; margin-bottom: .2rem; font-weight: 600; }
.know li span { font-size: .9rem; color: var(--text-2); }
.know__cta { width: 100%; }

/* ---------- Winkelwagen ---------- */

.cartwrap { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, .6fr); gap: 1rem; align-items: start; }
.cart { display: grid; gap: .8rem; min-width: 0; }
.cartline { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 1.1rem; align-items: start; padding: 1.3rem; border-radius: var(--r-xl); animation: res-in .45s var(--ease) both; }
.cartline__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--text); }
.cartline__icon .icon { width: 20px; height: 20px; }
.cartline__title { display: inline-block; font: 500 1.08rem/1.25 var(--f-display); letter-spacing: -.03em; color: var(--text); text-decoration: none; overflow-wrap: anywhere; }
a.cartline__title:hover { color: var(--volt); }
.cartline__sub { margin: .35rem 0 .85rem; font-size: .88rem; color: var(--muted); }
.cartline__period { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.js .cartline__period.is-auto .cartline__apply { display: none; }
.cartline__side { display: grid; justify-items: end; gap: .7rem; }
.cartline__price { display: grid; justify-items: end; gap: .1rem; text-align: right; }
.cartline__price b { font: 500 1.2rem var(--f-display); letter-spacing: -.03em; }
.cartline__price small { font-size: .76rem; color: var(--muted); white-space: nowrap; }
.cartline__was { font-size: .82rem; color: var(--muted); text-decoration-thickness: 1px; }
.cartline__remove button { display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer; transition: background .2s, color .2s; }
.cartline__remove button:hover { background: rgba(255, 107, 125, .1); color: var(--bad); }
.cartline__remove .icon { width: 16px; height: 16px; }

.qty { display: inline-flex; align-items: center; height: 36px; border-radius: 999px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-2); }
.qty button { display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 50%; background: none; color: var(--text-2); cursor: pointer; }
.qty button:hover:not([disabled]) { color: var(--text); background: var(--surface-2); }
.qty button[disabled] { opacity: .35; cursor: default; }
.qty .icon { width: 14px; height: 14px; }
.qty > span { min-width: 1.6rem; text-align: center; font-weight: 600; font-size: .9rem; }

.seg--sm { margin-top: 0; }
.seg--sm span { padding: .45rem .8rem; font-size: .82rem; }

.cart-add { padding: 1.3rem; border-radius: var(--r-xl); scroll-margin-top: 110px; }
.cart-add__head { display: flex; gap: 1.1rem; align-items: center; margin-bottom: 1rem; }
.cart-add__head h2 { font: 600 1rem/1.3 var(--f-body); letter-spacing: -.01em; }
.cart-add__head p { font-size: .86rem; color: var(--muted); }
.cart-add__row { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.cart-add__row .input { flex: 1 1 220px; width: auto; min-height: 46px; }
.cart-add .hint a { color: var(--text-2); }

.cart-empty { display: grid; justify-items: center; gap: .8rem; padding: clamp(2.5rem, 6vw, 4rem) 1.5rem; border-radius: var(--r-xl); text-align: center; }
.cart-empty__icon { display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: .4rem; border-radius: 50%; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--text-2); }
.cart-empty__icon .icon { width: 26px; height: 26px; }
.cart-empty h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); }
.cart-empty p { color: var(--text-2); }
.cart-empty__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin-top: .6rem; }

.alert--ok { background: rgba(93, 242, 164, .07); box-shadow: inset 0 0 0 1px rgba(93, 242, 164, .3); }
.alert--ok .icon { color: var(--ok); }

@media (max-width: 980px) { .cartwrap { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) {
    .cartline { grid-template-columns: 40px minmax(0, 1fr); padding: 1.1rem; }
    .cartline__icon { width: 40px; height: 40px; }
    .cartline__side { grid-column: 1 / -1; display: flex; align-items: center; gap: .6rem; padding-top: .9rem; border-top: 1px solid var(--line); }
    .cartline__price { margin-left: auto; }
}

/* ---------- Afrekenen ---------- */

.checkout-steps { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; margin: 0 0 1.4rem; padding: 0; list-style: none; font-size: .84rem; color: var(--muted); animation: fade-up .8s var(--ease) both; }
.checkout-steps li { display: flex; align-items: center; gap: .55rem; }
.checkout-steps a { display: inline-flex; align-items: center; gap: .55rem; color: var(--text-2); text-decoration: none; }
.checkout-steps span { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line-2); font: 500 .62rem var(--f-mono); }
.checkout-steps .is-done span { background: var(--surface-2); color: var(--text); }
.checkout-steps .is-current { color: var(--text); }
.checkout-steps .is-current span { background: var(--volt); color: var(--volt-ink); box-shadow: none; }

.checkout-steps em { font-style: normal; }
@media (max-width: 480px) {
    .checkout-steps { flex-wrap: nowrap; gap: .4rem .9rem; }
    .checkout-steps li:not(.is-current) em { display: none; }
}
.cart--solo { margin-top: .8rem; }

/* Op mobiel staat de vaste bestelbalk onderin; houd de onderste regel van de footer vrij. */
@media (max-width: 900px) { .page-pakket .footer { padding-bottom: calc(88px + env(safe-area-inset-bottom)); } }

.summary__headrow { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1.1rem; }
.summary__headrow h2 { margin: 0; }
.summary__headrow a { font-size: .84rem; color: var(--text-2); text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.summary__headrow > span { font: 400 .64rem var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.summary__row span small { display: block; font-size: .78rem; color: var(--muted); }
/* Doorgestreepte gewone prijs onder het bedrag (bewust anders dan boven, zoals in de winkelwagen): zo staat elk
   bedrag op de regel van de naam, met of zonder korting, en houdt de omschrijving de ruimte. Ernaast zetten
   knijpt de naam op 390px te veel af. Voorlezen blijft "Normaal €x, €y". */
.summary__row b { display: grid; align-content: start; justify-items: end; gap: .1rem; }
.summary__was { display: block; order: 1; font-size: .78rem; font-weight: 400; color: var(--muted); text-decoration-thickness: 1px; }