/*
 * cart.css — de winkelwagen.
 *
 * Wordt na reset.css, main.css en de onderdelen (onthullen, productkaart)
 * ingeladen, en alleen op deze template (baserules regel 8).
 *
 * De maten komen van sam-it-services.nl. Waar een opvallend getal staat — 662,
 * 417, 103, 6.1px, 87.74px, 17.5px, 43px — is dat een waarde uit die site en
 * geen keuze van dit thema. De kleuren #F6F6F6 (het totalenpaneel) en #EFF6FA
 * (het vragenblok) staan daar ook zo; de rest loopt over de tokens van
 * main.css, zodat een kleurwijziging op één plek doorwerkt.
 *
 * De productkaart in de upsell staat níet in dit bestand maar in
 * onderdelen/productkaart.css: dat is dezelfde kaart als op de
 * categoriepagina's.
 *
 * Klassenamen zijn camelCase (baserules regel 2).
 *
 * Indeling van dit bestand:
 *   1. de pagina en de kop
 *   2. de meldingen
 *   3. de twee kolommen
 *   4. de regels
 *   5. het aantalveld en de bijwerkknop
 *   6. het vragenblok
 *   7. het totalenpaneel
 *   8. de lege wagen
 *   9. de upsell
 *  10. mobiel (tot 1024px) en smal (tot 767px)
 */

/* ==================================================================
 * 1. De pagina en de kop
 * ================================================================== */

.wagenPagina {
    /*
     * De breedtes van de twee kolommen en de plek van de streep ertussen. Uit
     * de CSS van de bestaande site: .cart-holder .woocommerce-cart-form is daar
     * max-width 662px, .cart-collaterals 417px, en de streep hangt op -50px van
     * die rechterkolom.
     */
    --wagenLijst: 662px;
    --wagenPaneel: 417px;
    --wagenStreep: 50px;

    padding-bottom: var(--ruimte2xl);
}

.wagenKop {
    margin-bottom: var(--ruimteXl);
}

/* --- Het kruimelpad ------------------------------------------------ */

.wagenKruimels {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-bottom: 0.75rem;
    color: var(--kleurTekstZacht);
    font-size: var(--tekstXs);
}

.wagenKruimelHuis {
    display: inline-flex;
    align-items: center;
    color: var(--kleurBlauw);
}

.wagenKruimelHuis:hover,
.wagenKruimelHuis:focus-visible {
    color: var(--kleurOranje);
}

.wagenKruimelIcoon {
    width: 13px;
    height: 13px;
}

.wagenKruimelScheiding {
    color: var(--kleurLijn);
}

.wagenKruimelHuidig {
    color: var(--kleurTekstZacht);
}

/* --- De titel ----------------------------------------------------- */

/*
 * 35 pixels, en dat is de h1 van de bestaande site (.elementor-kit-9 h1:
 * font-size 35px, line-height 35px, weight 500) — niet de --tekstH1 van dit
 * thema, want die is 44 en hoort bij de voorpagina.
 */
.wagenTitel {
    font-size: 35px;
    font-weight: 500;
    line-height: 1;
}

.wagenAantalRegel {
    margin-top: 0.5rem;
    color: var(--kleurTekstZacht);
    font-size: var(--tekstSm);
}

.wagenIntro {
    max-width: 62ch;
    margin-top: 0.625rem;
    color: var(--kleurTekstZacht);
}

/* ==================================================================
 * 2. De meldingen
 *
 * Eigen markup, want de stylesheets van WooCommerce staan op deze template
 * niet aan (samitAssets::EIGEN_WINKEL_TEMPLATES). Drie soorten, en ze zien er
 * ook echt anders uit: een fout houdt de bezoeker tegen, een bevestiging niet.
 * ================================================================== */

/*
 * De houder staat er altijd — cart.js zet er de meldingen in na een wijziging —
 * en mag dus zelf geen ruimte innemen. Vandaar dat de onderruimte aan de laatste
 * melding hangt en niet aan de houder: een lege houder met margin-bottom is een
 * gat van 24 pixels onder de kop waar niets in staat. Met :empty was dat niet op
 * te lossen, want de witruimte uit PHP telt als inhoud.
 */
.wagenMeldingen {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.wagenMelding:last-child {
    margin-bottom: var(--ruimteLg);
}

.wagenMelding {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    padding: 0.75rem 1rem;
    border-left: 3px solid currentcolor;
    border-radius: var(--randSm);
    font-size: var(--tekstSm);
}

.wagenMeldingIcoon {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    margin-top: 0.125rem;
}

.wagenMeldingTekst {
    color: var(--kleurTekst);
}

.wagenMeldingTekst a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.wagenMeldingGoed {
    background-color: #f1faf1;
    color: var(--kleurGroen);
}

.wagenMeldingLet {
    background-color: #fff7ec;
    color: var(--kleurOranjeDonker);
}

.wagenMeldingFout {
    background-color: #fdf0f1;
    color: #c8102e;
}

/* ==================================================================
 * 3. De twee kolommen
 * ================================================================== */

/*
 * space-between met een max-width per kind, en niet een grid met twee
 * kolommen. Dat is precies wat .cart-holder op de bestaande site doet: beide
 * kinderen krijgen `width: 100%` en worden door hun eigen max-width
 * teruggeknepen, waardoor de ruimte die overblijft ertussen valt. Op 1180
 * pixels inhoudsbreedte is dat 101 pixels, en daar staat de streep midden in.
 */
.wagenRomp {
    display: flex;
    justify-content: space-between;
    column-gap: var(--ruimteMd);
    row-gap: var(--ruimteXl);
}

.wagenLijstKolom {
    width: 100%;
    max-width: var(--wagenLijst);
}

.wagenTotalenKolom {
    position: relative;
    width: 100%;
    max-width: var(--wagenPaneel);
}

/*
 * De streep tussen de twee kolommen. Een pseudo-element op de rechterkolom en
 * geen border-left: een rand zou over de volle hoogte van die kolom lopen, en
 * op de bestaande site is de streep 450 pixels lang en begint hij bovenaan.
 */
.wagenTotalenKolom::before {
    position: absolute;
    top: 0;
    left: calc(var(--wagenStreep) * -1);
    width: 1px;
    height: 450px;
    max-height: 100%;
    background-color: var(--kleurLijn);
    content: "";
}

/* ==================================================================
 * 4. De regels
 * ================================================================== */

.wagenRegels {
    display: flex;
    flex-direction: column;
    gap: 1.5625rem;
}

.wagenRegel {
    position: relative;
    display: flex;
    align-items: center;
    column-gap: 1.25rem;
    padding: 0.9375rem;
    border: 1px solid var(--kleurLijn);
    border-radius: var(--randMd);
    background-color: var(--kleurWit);
    transition:
        border-color var(--duurMd) ease,
        box-shadow var(--duurMd) ease;
}

.wagenRegel:hover,
.wagenRegel:focus-within {
    border-color: color-mix(in srgb, var(--kleurBlauw) 45%, white);
    box-shadow: var(--schaduwZacht);
}

/* --- Het fotokader ------------------------------------------------ */

.wagenRegelFoto {
    display: grid;
    width: 103px;
    height: 103px;
    flex: 0 0 103px;
    padding: 12px 13px;
    border: 1px solid var(--kleurLijn);
    border-radius: var(--randSm);
    place-items: center;
}

.wagenRegelBeeld {
    max-width: 100%;
    max-height: 75px;
    object-fit: contain;
}

.wagenRegelGeenBeeld {
    display: grid;
    width: 100%;
    height: 100%;
    place-items: center;
    color: var(--kleurLijn);
}

.wagenRegelGeenBeeldIcoon {
    width: 30px;
    height: 30px;
}

/* --- De naam en wat eronder staat --------------------------------- */

/*
 * 6.1 pixels tussen de regels. Dat is geen typo en geen afronding van 6: het is
 * de row-gap van .product-content op de bestaande site.
 */
.wagenRegelInhoud {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    flex-direction: column;
    row-gap: 6.1px;
}

.wagenRegelNaam {
    font-size: var(--tekstBasis);
    font-weight: 500;
    line-height: 1.2;
}

.wagenRegelLink {
    color: var(--kleurTekst);
    text-decoration: none;
}

.wagenRegelLink:hover,
.wagenRegelLink:focus-visible {
    color: var(--kleurBlauw);
}

/*
 * De hele regel aanklikbaar, met één link in de tabvolgorde. Op de bestaande
 * site zijn de foto en de naam losse links naar dezelfde pagina, waardoor elk
 * product twee keer in de tabvolgorde staat.
 *
 * De z-index houdt hem onder het aantalveld en de verwijderlink: die twee
 * moeten wél bereikbaar blijven.
 */
.wagenRegelLink::after {
    position: absolute;
    inset: 0;
    z-index: 0;
    content: "";
}

.wagenRegelKenmerken {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.wagenRegelKenmerk {
    padding: 0.0625rem 0.375rem;
    border-radius: var(--randSm);
    background-color: var(--kleurVlakKoel);
    color: var(--kleurBlauwDonker);
    font-size: 0.6875rem;
    line-height: 1.5;
}

.wagenRegelUsps {
    display: flex;
    flex-wrap: wrap;
    column-gap: 1.25rem;
    row-gap: 0.25rem;
}

.wagenRegelUsp {
    display: flex;
    align-items: center;
    gap: 8.6px;
    color: var(--kleurTekstBalk);
    font-size: 12px;
    line-height: 1;
}

.wagenRegelUspIcoon {
    width: 9px;
    height: 7px;
    flex: 0 0 auto;
}

/* --- De verwijderlink --------------------------------------------- */

/*
 * Klein en bijna doorzichtig, en pas bij hover rood. Zo op de bestaande site,
 * en het is de juiste kant op: dit is de enige knop op de pagina die iets
 * weghaalt, dus hoort hij niet om aandacht te vragen.
 *
 * De z-index en de position zetten hem bóven de ::after van de titel — anders
 * is hij niet aan te klikken.
 */
.wagenRegelWeg {
    margin-top: 0.125rem;
}

.wagenRegelWegLink {
    position: relative;
    z-index: 1;
    color: var(--kleurTekstBalk);
    font-size: 10px;
    line-height: 1.1;
    opacity: 0.3;
    text-decoration: underline;
    text-underline-offset: 2px;
    transition:
        color var(--duurSnel) ease,
        opacity var(--duurSnel) ease;
}

.wagenRegelWegLink:hover,
.wagenRegelWegLink:focus-visible {
    color: #eb001b;
    opacity: 1;
}

/* --- De prijs ----------------------------------------------------- */

.wagenRegelPrijs {
    margin-left: auto;
    text-align: right;
}

.wagenRegelBedrag {
    color: var(--kleurBlauw);
    font-size: 18px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
    white-space: nowrap;
}

.wagenRegelBedrag del {
    margin-right: 0.25rem;
    color: var(--kleurTekstZacht);
    font-size: var(--tekstSm);
    font-weight: 400;
}

.wagenRegelBedrag ins {
    text-decoration: none;
}

.wagenRegelSamen {
    margin-top: 0.125rem;
    color: var(--kleurTekstZacht);
    font-size: 11px;
    line-height: 1.3;
    white-space: nowrap;
}

/* ==================================================================
 * 5. Het aantalveld en de bijwerkknop
 * ================================================================== */

.wagenRegelAantal {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 0.25rem;
}

.wagenAantalVeld {
    width: 52px;
    padding: 2px;
    border: 1px solid var(--kleurLijn);
    border-radius: var(--randSm);
    background-color: var(--kleurWit);
    color: var(--kleurTekst);
    font-family: inherit;
    font-size: 13px;
    line-height: 1.6;
    text-align: center;
}

.wagenAantalVeld:focus-visible {
    border-color: var(--kleurBlauw);
    outline: 2px solid color-mix(in srgb, var(--kleurBlauw) 35%, white);
    outline-offset: 1px;
}

/*
 * Staat de eigen stapper er, dan gaat het spinnetje van de browser eruit: twee
 * paar pijltjes naast elkaar voor hetzelfde getal. De klasse komt van cart.js en
 * staat er dus alleen als die knoppen er werkelijk zijn — zonder script blijft
 * het spinnetje het enige dat er is, en dan moet het blijven staan.
 */
.wagenRegelAantalStapper .wagenAantalVeld {
    appearance: textfield;
}

.wagenRegelAantalStapper .wagenAantalVeld::-webkit-outer-spin-button,
.wagenRegelAantalStapper .wagenAantalVeld::-webkit-inner-spin-button {
    margin: 0;
    appearance: none;
}

/*
 * De min- en plusknop. Ze komen uit een <template> en staan er dus alleen als
 * cart.js draait; zonder script is het aantalveld het spinnetje van de browser
 * zelf. Vandaar dat het veld hierboven ook zonder deze knoppen klopt.
 */
.wagenStapper {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.wagenStapperKnop {
    display: grid;
    width: 22px;
    height: 22px;
    border: 1px solid var(--kleurLijn);
    border-radius: var(--randSm);
    background-color: var(--kleurWit);
    color: var(--kleurBlauwDonker);
    cursor: pointer;
    font-size: 13px;
    line-height: 1;
    place-items: center;
    transition:
        border-color var(--duurSnel) ease,
        background-color var(--duurSnel) ease;
}

.wagenStapperKnop:hover:not(:disabled) {
    border-color: var(--kleurBlauw);
    background-color: var(--kleurVlak);
}

.wagenStapperKnop:disabled {
    color: var(--kleurTekstZacht);
    cursor: default;
    opacity: 0.45;
}

/* --- De bijwerkknop ----------------------------------------------- */

/*
 * Grijs en niet blauw: dit is niet de knop waar de bezoeker heen moet. Hij
 * staat er alleen voor wie geen JavaScript heeft — cart.js haalt hem weg zodra
 * een gewijzigd aantal meteen doorgaat.
 */
.wagenActies {
    margin-top: 1.5625rem;
}

.wagenBijwerken {
    padding: 10px 25px;
    border: 1px solid var(--kleurLijn);
    border-radius: var(--randSm);
    background-color: var(--kleurWit);
    color: var(--kleurTekstBalk);
    cursor: pointer;
    font-family: inherit;
    font-size: var(--tekstBasis);
    font-weight: 600;
    line-height: 1;
    transition:
        border-color var(--duurSnel) ease,
        background-color var(--duurSnel) ease,
        color var(--duurSnel) ease;
}

.wagenBijwerken:hover {
    border-color: var(--kleurBlauw);
    background-color: var(--kleurVlak);
    color: var(--kleurBlauwDonker);
}

/* ==================================================================
 * 6. Het vragenblok
 * ================================================================== */

.wagenVragen {
    position: relative;
    display: flex;
    max-width: 425px;
    column-gap: 12px;
    margin-top: 1.5625rem;
    padding: 21px 22px;
    /* #EFF6FA van de bestaande site, en dat is niet --kleurVlak (#EEF5F9): het
     * blok staat daar een tint lichter dan de vlakken elders. */
    border-radius: var(--randMd);
    background-color: #eff6fa;
}

.wagenVragenIcoon {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
    margin-top: 1px;
    color: var(--kleurTekst);
}

.wagenVragenTekst {
    /* Ruimte voor de foto rechtsboven, zodat een lange regel er niet onder
     * doorloopt. */
    padding-right: 74px;
}

.wagenVragenKop {
    margin-bottom: 10px;
    font-size: var(--tekstBasis);
    font-weight: 600;
    line-height: 1;
}

/*
 * Het bolletje van 4 pixels voor de regel met het nummer. Staat er op de
 * bestaande site ook, en het is het enige dat die regel van de kop
 * onderscheidt.
 */
.wagenVragenRegel {
    position: relative;
    padding-left: 14px;
    font-size: var(--tekstBasis);
    line-height: 1.4;
}

.wagenVragenRegel::before {
    position: absolute;
    top: 0.55em;
    left: 0;
    width: 4px;
    height: 4px;
    border-radius: var(--randRond);
    background-color: var(--kleurTekst);
    content: "";
}

.wagenVragenRegel strong {
    color: var(--kleurBlauw);
    font-weight: 600;
}

.wagenVragenNummer {
    color: var(--kleurTekst);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.wagenVragenNummer:hover,
.wagenVragenNummer:focus-visible {
    color: var(--kleurBlauw);
}

.wagenVragenFoto {
    position: absolute;
    top: 0;
    right: 0;
    width: 87.74px;
    height: 83px;
    object-fit: contain;
    object-position: right top;
}

/* ==================================================================
 * 7. Het totalenpaneel
 * ================================================================== */

.wagenTotalen {
    padding: 43px 25px 25px;
    border-radius: var(--randMd);
    /* #F6F6F6 van de bestaande site: een neutraal grijs en niet het vlakblauw
     * van de rest van de site. Op dat blauw zou de groene knop erin gaan
     * trillen. */
    background-color: #f6f6f6;
}

.wagenTotaalRegels {
    display: flex;
    flex-direction: column;
    row-gap: 1.75rem;
    padding: 0 17px;
}

.wagenTotaalRegel {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--ruimteMd);
}

.wagenTotaalLabel {
    font-weight: 500;
}

.wagenTotaalWaarde {
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.wagenTotaalKorting .wagenTotaalWaarde,
.wagenTotaalVerzending .wagenTotaalWaarde {
    color: var(--kleurGroen);
    font-weight: 500;
}

/* Staat er niets te kiezen, dan is de verzending geen bedrag maar een
 * mededeling — en die hoort niet in het groen van "gratis". */
.wagenTotaalVerzendingOpen .wagenTotaalWaarde {
    color: var(--kleurTekstZacht);
    font-weight: 400;
    font-size: var(--tekstSm);
}

/* --- Het eindbedrag ----------------------------------------------- */

.wagenEindtotaal {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0 var(--ruimteMd);
    margin-top: 1.75rem;
    padding: 1.5rem 17px 0;
    border-top: 1px solid var(--kleurLijn);
}

.wagenEindLabel {
    font-size: var(--tekstMd);
    font-weight: 600;
}

.wagenEindBedrag {
    color: var(--kleurBlauwDonker);
    font-size: var(--tekstH3);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}

.wagenEindNoot {
    width: 100%;
    margin-top: 0.25rem;
    color: var(--kleurTekstZacht);
    font-size: 11px;
    text-align: right;
}

/* --- De afrekenknop ----------------------------------------------- */

/*
 * Groen, en bij hover oranje. Dat is de knop van de bestaande site: groen omdat
 * hij vooruit gaat, oranje bij hover omdat oranje op deze site de signaalkleur
 * is. 17,5 pixels padding maakt hem 50 hoog, net als daar.
 */
.wagenAfrekenen {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1.75rem;
    padding: 17.5px;
    border-radius: var(--randMd);
    background-color: var(--kleurGroen);
    color: var(--kleurWit);
    font-size: var(--tekstBasis);
    font-weight: 600;
    line-height: 1;
    text-align: center;
    text-decoration: none;
    transition: background-color var(--duurSnel) ease;
}

.wagenAfrekenen:hover,
.wagenAfrekenen:focus-visible {
    background-color: var(--kleurOranje);
    color: var(--kleurWit);
}

.wagenAfrekenenPijl {
    width: 15px;
    height: 10px;
    flex: 0 0 auto;
    transition: transform var(--duurMd) var(--versnelling);
}

.wagenAfrekenen:hover .wagenAfrekenenPijl {
    transform: translateX(3px);
}

/* --- De regels onder de knop -------------------------------------- */

.wagenTotaalUsps {
    display: flex;
    flex-direction: column;
    gap: 0.4375rem;
    margin-top: 1.25rem;
    padding: 0 17px;
}

.wagenTotaalUsp {
    display: flex;
    align-items: center;
    gap: 8.6px;
    color: var(--kleurTekstBalk);
    font-size: 12px;
    line-height: 1.3;
}

.wagenTotaalUspIcoon {
    width: 9px;
    height: 7px;
    flex: 0 0 auto;
}

/* ==================================================================
 * 8. De lege wagen
 * ================================================================== */

.wagenLeeg {
    display: flex;
    max-width: 560px;
    flex-direction: column;
    align-items: center;
    margin-inline: auto;
    padding: var(--ruimteXl) var(--ruimteLg);
    border: 1px solid var(--kleurLijn);
    border-radius: var(--randLg);
    background: linear-gradient(180deg, #fff 0%, var(--kleurVlak) 100%);
    text-align: center;
}

.wagenLeegIcoon {
    display: grid;
    width: 56px;
    height: 56px;
    margin-bottom: var(--ruimteMd);
    border-radius: var(--randRond);
    background-color: var(--kleurWit);
    color: var(--kleurBlauw);
    box-shadow: var(--schaduwZacht);
    place-items: center;
}

.wagenLeegIcoonSvg {
    width: 24px;
    height: 24px;
}

.wagenLeegKop {
    font-size: var(--tekstH3);
    font-weight: 500;
    line-height: 1.25;
}

.wagenLeegTekst {
    max-width: 44ch;
    margin-top: 0.625rem;
    color: var(--kleurTekstZacht);
}

a.wagenLeegKnop {
    margin-top: var(--ruimteLg);
}

.wagenLeegKnopPijl {
    width: 15px;
    height: 10px;
    transition: transform var(--duurMd) var(--versnelling);
}

a.wagenLeegKnop:hover .wagenLeegKnopPijl {
    transform: translateX(3px);
}

/* ==================================================================
 * 9. De upsell
 *
 * De kaart komt uit onderdelen/productkaart.css. Wat hier staat is de sectie
 * eromheen: het vlak, de kop en het aantal kolommen.
 * ================================================================== */

.wagenUpsell {
    margin-top: var(--ruimte2xl);
    padding-block: var(--ruimteXl);
    border-top: 1px solid var(--kleurLijn);
    background-color: color-mix(in srgb, var(--kleurVlak) 55%, white);
}

.wagenUpsellKopRij {
    margin-bottom: var(--ruimteLg);
}

.wagenUpsellKop {
    font-size: var(--tekstH2);
    font-weight: 500;
    line-height: 1.2;
}

.wagenUpsellIntro {
    max-width: 62ch;
    margin-top: 0.5rem;
    color: var(--kleurTekstZacht);
}

/*
 * Vier kolommen en niet de drie van de categoriepagina: daar staat het raster
 * naast een zijbalk van 288 pixels en hier over de volle breedte.
 *
 * Alleen boven 1024 pixels, en dat is de kern van deze regel. Onder die breedte
 * hoort onderdelen/productkaart.css het over te nemen met twee kolommen en onder
 * 480 met één — maar dat onderdeel wordt vóór dit bestand ingeladen én zet zijn
 * waarde op `.winkelRaster`, dus verliest het van deze selector hoe laat de
 * mediaquery daar ook staat. Met de grens hier geldt de waarde alleen waar hij
 * hoort en staan de twee breekpunten nog steeds op één plek.
 */
@media (width > 1024px) {
    .wagenUpsellRaster {
        --rasterKolommen: 4;
    }
}

/* ==================================================================
 * 10. Mobiel (tot 1024px) en smal (tot 767px)
 *
 * Gelijk aan samitApparaat::BREEKPUNT en ::BREEKPUNT_SMAL.
 * ================================================================== */

@media (width <= 1024px) {
    /*
     * De twee kolommen onder elkaar, en het totalenpaneel bovenaan. Dat is een
     * omgekeerde volgorde ten opzichte van de HTML, en dat is met opzet: op een
     * smal scherm is "wat kost het samen" de vraag waarmee iemand deze pagina
     * opent, en anders staat dat antwoord achter drie schermen scrollen. Er
     * wordt niets weggelaten en niets verborgen — het ligt anders neer, en dan
     * is CSS het juiste gereedschap (baserules regel 16 gaat over structuur).
     */
    .wagenRomp {
        flex-direction: column;
    }

    .wagenLijstKolom,
    .wagenTotalenKolom {
        max-width: none;
    }

    .wagenTotalenKolom {
        order: -1;
    }

    /* Er is geen kolom meer om van te scheiden. */
    .wagenTotalenKolom::before {
        display: none;
    }

    .wagenVragen {
        max-width: none;
    }
}

@media (width <= 767px) {
    .wagenTitel {
        font-size: var(--tekstH2);
    }

    /*
     * De regel wordt een raster van twee rijen: het fotokader met de naam
     * ernaast, en daaronder de prijs links met het aantal rechts. Bij vier
     * kolommen naast elkaar is de naam op 390 pixels vijf woorden per regel.
     *
     * Een raster en geen `flex-wrap`. Met flex hangt het van de lengte van de
     * prijs af waar de rij afbreekt: bij een regeltotaal eronder gaat de prijs
     * naar de tweede regel en bij één stuk blijft hij naast de naam staan —
     * twee producten in dezelfde wagen zien er dan anders uit. In een raster
     * staat elk deel op zijn plek, ongeacht wat erin staat.
     */
    .wagenRegel {
        display: grid;
        align-items: start;
        column-gap: 0.75rem;
        row-gap: 0.75rem;
        grid-template-areas:
            "foto naam naam"
            "prijs prijs aantal";
        grid-template-columns: 76px minmax(0, 1fr) auto;
    }

    .wagenRegelFoto {
        width: 76px;
        height: 76px;
        padding: 8px;
        grid-area: foto;
    }

    .wagenRegelBeeld {
        max-height: 58px;
    }

    .wagenRegelInhoud {
        grid-area: naam;
    }

    .wagenRegelUsps {
        column-gap: 0.75rem;
    }

    .wagenRegelPrijs {
        align-self: center;
        margin-left: 0;
        text-align: left;
        grid-area: prijs;
    }

    .wagenRegelAantal {
        align-self: center;
        grid-area: aantal;
    }

    .wagenTotalen {
        padding: var(--ruimteLg) var(--ruimteMd) var(--ruimteMd);
    }

    .wagenTotaalRegels,
    .wagenTotaalUsps {
        padding-inline: 0;
    }

    .wagenTotaalRegels {
        row-gap: 1rem;
    }

    .wagenEindtotaal {
        padding-inline: 0;
    }

    .wagenVragen {
        padding: var(--ruimteMd);
    }

    /*
     * De foto van Sam gaat eruit. Op de bestaande site gebeurt hetzelfde
     * (.vragen-blok:after krijgt daar `display: none` onder 767 pixels): op 390
     * pixels neemt hij een derde van het blokje en duwt hij de tekst naar vier
     * regels.
     */
    .wagenVragenFoto {
        display: none;
    }

    .wagenVragenTekst {
        padding-right: 0;
    }

    .wagenUpsellKop {
        font-size: var(--tekstH3);
    }
}

/* ==================================================================
 * Afdrukken
 *
 * Een winkelwagen wordt zelden afgedrukt, maar als het gebeurt is het om de
 * bestelling te bewaren. Dan hoort de rij "vaak samen gekocht" er niet op, en
 * ook de knoppen niet: op papier doet niets van dat alles iets.
 * ================================================================== */

@media print {
    .wagenUpsell,
    .wagenActies,
    .wagenRegelWeg,
    .wagenAfrekenen,
    .wagenStapper {
        display: none;
    }

    .wagenRomp {
        display: block;
    }

    .wagenTotalenKolom::before {
        display: none;
    }

    .wagenTotalen {
        border: 1px solid var(--kleurLijn);
        background-color: transparent;
    }
}