#moderncart-slide-out {
            --pc-card: #ffffff;
            --pc-ground: #f5f7fa;
            --pc-tegel: #f4f6f9;
            --pc-line: #e3e8ef;
            --pc-ink: #16273f;
            --pc-body: #3f5168;
            --pc-muted: #8a97a8;
            --pc-navy: #10305a;
            --pc-green: #1a7f5a;
            --pc-green-bg: #e6f4ed;
            --pc-blue-bg: #e8effc;
            --pc-blue-ink: #2b5cab;

            --pc-kop: 'PeptideFont', Arial, sans-serif;
            --pc-tekst: 'Roboto Condensed', sans-serif;
        }

        #moderncart-slide-out,
        #moderncart-slide-out button,
        #moderncart-slide-out input {
            font-family: var(--pc-tekst);
        }

        #moderncart-slide-out .moderncart-slide-out-header-title,
        #moderncart-slide-out .moderncart-cart-item-product-name,
        #moderncart-slide-out .pc-item-name,
        #moderncart-slide-out .moderncart-cart-line-items__total {
            font-family: var(--pc-kop);
        }

        #moderncart-slide-out .pc-item-variant {
            font-family: var(--pc-tekst);
        }

        /* "Details bekijken" is overal ruis */
        #moderncart-slide-out .moderncart-collapse-btn-link {
            display: none;
        }

        /* ===================== BREEDTE =====================
           Je wagentje was 450px. Gemeten: bij 450, 480 en 500 valt
           "Insuline naalden (Insulinespuiten)" altijd over twee regels en de
           variant ook. Pas vanaf 520px past allebei op één regel, precies
           zoals in de mockup.

           De breedte zit niet op het paneel maar op #moderncart-slide-out, via
           een eigen instelling van de plugin. Die zetten we, in plaats van er
           met specificiteit tegenin te vechten. Dit kan trouwens ook gewoon in
           de Modern Cart-instellingen zelf. Terug naar smal? Zet 450px. */

        #moderncart-slide-out-modal {
            --moderncart-slide-out-desktop-width: 520px;
        }

        /* De plugin duwt kop, lijst en voet uit elkaar met space-between.
           Daardoor stond er een gat van 155px onder de laatste kaart. */
        #moderncart-slide-out .moderncart-panel {
            justify-content: flex-start;
            background: var(--pc-ground);
        }

        /* ===================== KOP ===================== */

        #moderncart-slide-out .moderncart-slide-out-header {
            background: var(--pc-ground);
        }

        /* De titel is een blok over de volle breedte. Daarom staan de twee
           knoppen los en centreert alleen titel + telpil. */
        #moderncart-slide-out .moderncart-slide-out-header-heading {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            padding: 14px 16px 10px;
            border-bottom: 0;
        }

        #moderncart-slide-out .moderncart-slide-out-header-close {
            position: absolute;
            left: 16px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--pc-ink);
        }

        #moderncart-slide-out .moderncart-slide-out-header-title {
            flex: 0 0 auto;
            width: auto;
            margin: 0;
            padding: 0;
            color: var(--pc-ink);
            font-size: 19px;
            font-weight: 700;
            text-align: center;
        }

        #moderncart-slide-out .moderncart-slide-out-header-quantity {
            position: static;
            margin: 0;
            transform: none;
            padding: 2px 10px;
            border-radius: 999px;
            background: var(--pc-tegel);
            color: var(--pc-ink);
            font-size: 13px;
            font-weight: 700;
        }

        #moderncart-slide-out .pc-cart-x {
            position: absolute;
            right: 16px;
            top: 50%;
            transform: translateY(-50%);
            width: 30px;
            height: 30px;
            margin: 0;
            padding: 0;
            border: 0;
            background-color: var(--pc-ink);
            cursor: pointer;
            -webkit-mask: var(--pc-x) center / 20px 20px no-repeat;
            mask: var(--pc-x) center / 20px 20px no-repeat;
        }

        #moderncart-slide-out {
            --pc-x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");
            --pc-trash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18M8 6V4.5A1.5 1.5 0 0 1 9.5 3h5A1.5 1.5 0 0 1 16 4.5V6M6.5 6l.9 13.1A2 2 0 0 0 9.4 21h5.2a2 2 0 0 0 2-1.9L17.5 6M10 10.5v6M14 10.5v6'/%3E%3C/svg%3E");
        }

        /* ============ GRATIS VERZENDING ============
           Bewust NIET opgemaakt. Wilma wil hier de eigen weergave van Modern
           Cart, dus alles wat hier stond is verwijderd (21 juli). Wil je dit
           anders, doe het dan in de Modern Cart-instellingen. */
        /* ===================== KAARTEN ===================== */

        #moderncart-slide-out .moderncart-slide-out-cart {
            background: var(--pc-ground);
            /* Dit stond eerder op height:auto. Gevolg: de lijst groeide niet
               mee, dus de voet bleef halverwege hangen en er zat 126px lege
               ruimte onder de afrekenknop (gemeten, paneel 720px, voet stopte
               op 594). Nu vult de lijst de ruimte en staat de voet onderaan.
               min-height:0 is nodig, anders wil een flexvak niet krimpen en
               verdwijnt het scrollen bij een volle winkelwagen. */
            flex: 1 1 auto;
            min-height: 0;
            overflow-y: auto;
        }

        #moderncart-slide-out .moderncart-slide-out-cart-inner {
            display: flex;
            flex-direction: column;
            gap: 10px;
            padding: 0 14px 12px;
        }

        #moderncart-slide-out .moderncart-cart-item {
            position: relative;
            padding: 12px;
            border: 1px solid var(--pc-line);
            border-radius: 12px;
            background: var(--pc-card);
            align-items: center;
            gap: 0;
        }

        /* Dit was de lege ruimte: 20px boven en onder, binnen elke kaart.
           position:static is nodig omdat de prullenbak zich anders op deze
           container richt in plaats van op de kaart, en dan links van de
           teller landt. */
        #moderncart-slide-out .moderncart-cart-item-container {
            position: static;
            padding: 0;
            gap: 13px;
            align-items: center;
            flex: 1;
            min-width: 0;
        }

        #moderncart-slide-out .moderncart-cart-item-image {
            width: 56px;
            height: 56px;
            min-width: 56px;
            display: grid;
            place-items: center;
            padding: 4px;
            border-radius: 9px;
            background: var(--pc-tegel);
            overflow: hidden;
        }

        #moderncart-slide-out .moderncart-cart-item-image img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }

        #moderncart-slide-out .moderncart-cart-item-product {
            min-width: 0;
        }

        #moderncart-slide-out .moderncart-cart-item-product-name {
            color: var(--pc-ink);
            font-size: 15px;
            line-height: 1.25;
            font-weight: 700;
        }

        #moderncart-slide-out .moderncart-cart-item-actions--pricing {
            margin-top: 5px;
            color: var(--pc-ink);
            font-size: 16px;
            line-height: 1.2;
            font-weight: 700;
        }

        #moderncart-slide-out .pc-unit-price {
            display: block;
            margin-top: 2px;
            color: var(--pc-muted);
            font-size: 12.5px;
            font-weight: 400;
        }

        #moderncart-slide-out .pc-unit-price .woocommerce-Price-amount {
            color: inherit;
            font-weight: 400;
        }

        /* De korte naam staat altijd in de pagina maar toont alleen op mobiel */
        #moderncart-slide-out .pc-item-kort {
            display: none;
        }

        /* De titel is een link, maar mag er niet uitzien als een blauwe link */
        #moderncart-slide-out .pc-item-link {
            display: block;
            color: inherit;
            text-decoration: none;
        }

        #moderncart-slide-out .pc-item-link:hover .pc-item-name {
            text-decoration: underline;
        }

        #moderncart-slide-out .pc-item-name {
            display: block;
            color: var(--pc-ink);
            font-size: 15px;
            line-height: 1.25;
            font-weight: 700;
        }

        #moderncart-slide-out .pc-item-variant {
            display: block;
            margin-top: 3px;
            color: var(--pc-muted);
            font-size: 12.5px;
            line-height: 1.3;
            font-weight: 400;
        }

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

        #moderncart-slide-out-modal[class*="moderncart-cart-theme-"] .moderncart-cart-item-quantity,
        #moderncart-slide-out .moderncart-cart-item-quantity {
            width: auto;
            height: 40px;
            grid-auto-flow: column;
            grid-template-columns: 34px 30px 34px;
            align-items: center;
            border: 1px solid var(--pc-line);
            border-radius: 10px;
            overflow: hidden;
            background: var(--pc-card);
        }

        #moderncart-slide-out .moderncart-cart-item-actions {
            margin-right: 40px;
        }

        #moderncart-slide-out .moderncart-cart-item-quantity button {
            height: 40px;
            display: grid;
            place-items: center;
            background: transparent;
        }

        /* De plugin zet de plus vóór de min; liggend hoort het − 1 + te zijn. */
        #moderncart-slide-out .moderncart-cart-item-quantity .quantity__button--down { order: 1; }
        #moderncart-slide-out .moderncart-cart-item-quantity .moderncart-quantity__input { order: 2; }
        #moderncart-slide-out .moderncart-cart-item-quantity .quantity__button--up { order: 3; }

        #moderncart-slide-out .moderncart-cart-item-quantity .moderncart-icon {
            width: 12px;
            height: 12px;
        }

        #moderncart-slide-out .moderncart-quantity__input {
            height: 40px;
            border: 0;
            text-align: center;
            color: var(--pc-ink);
            font-size: 15px;
            font-weight: 700;
            background: transparent;
        }

        /* ---- Prullenbak ---- */

        /* De plugin dwingt een doorzichtige achtergrond af op deze knop,
           waardoor een masker erop onzichtbaar blijft. Daarom staat het
           icoontje in een ::before erbinnen. */
        #moderncart-slide-out .moderncart-cart-item-actions-remove {
            position: absolute;
            right: 14px;
            top: 50%;
            transform: translateY(-50%);
            width: 26px;
            height: 26px;
            display: grid;
            place-items: center;
            font-size: 0;
            text-decoration: none;
            color: var(--pc-muted);
            cursor: pointer;
        }

        #moderncart-slide-out .moderncart-cart-item-actions-remove::before {
            content: "";
            width: 21px;
            height: 21px;
            background-color: currentColor;
            -webkit-mask: var(--pc-trash) center / 21px 21px no-repeat;
            mask: var(--pc-trash) center / 21px 21px no-repeat;
        }

        #moderncart-slide-out .moderncart-cart-item-actions-remove:hover {
            color: #b42318;
        }

        /* ===================== TOTALEN ===================== */

        #moderncart-slide-out .moderncart-slide-out-footer {
            padding: 0 14px 14px;
            background: var(--pc-ground);
        }

        #moderncart-slide-out .moderncart-cart-line-items {
            padding: 2px 0;
            border: 1px solid var(--pc-line);
            border-radius: 12px;
            background: var(--pc-card);
        }

        /* Alleen het totaal tonen. Subtotaal en verzending zeggen hier nog
           niets: er is nog geen adres, dus verzendkosten kunnen op dit moment
           niet kloppend berekend worden. (Wilma, 21 juli.)
           De .moderncart-cart-total erin is nodig: zonder dat is de regel van
           de plugin dieper en wint die. Gemeten - met alleen twee niveaus bleef
           subtotaal en verzending gewoon staan. */
        #moderncart-slide-out .moderncart-slide-out-footer .moderncart-cart-total .moderncart-cart-line-items__subtotal,
        #moderncart-slide-out .moderncart-slide-out-footer .moderncart-cart-total .moderncart-cart-line-items__tax {
            display: none;
        }

        /* Verzending staat er sinds 22 juli weer bij. Dat kan nu, want het land
           van de bezoeker is bekend via het instellingenvenster in de header -
           dus het bedrag klopt echt en is geen slag in de lucht meer.
           Bewust klein gehouden: één dunne regel boven het totaal. */
        #moderncart-slide-out .moderncart-slide-out-footer .moderncart-cart-total .moderncart-cart-line-items__shipping {
            padding: 3px 16px 7px;
            font-size: 12.5px;
        }

        #moderncart-slide-out .moderncart-cart-line-items__shipping .moderncart-cart-line-items-label {
            color: var(--pc-muted);
        }

        #moderncart-slide-out .moderncart-cart-line-items__shipping-value {
            color: var(--pc-body);
            font-weight: 600;
        }

        #moderncart-slide-out .moderncart-cart-line-items-item {
            padding: 5px 16px;
            font-size: 14px;
            color: var(--pc-body);
        }

        #moderncart-slide-out .moderncart-cart-line-items-value {
            color: var(--pc-ink);
            font-variant-numeric: tabular-nums;
        }

        #moderncart-slide-out .moderncart-cart-line-items__discount .moderncart-cart-line-items-label {
            color: var(--pc-green);
        }

        #moderncart-slide-out .moderncart-cart-line-items__discount-value {
            padding: 2px 9px;
            border-radius: 7px;
            background: var(--pc-green-bg);
            color: var(--pc-green);
            font-weight: 700;
        }

        /* Dunne scheiding tussen de verzendregel en het totaal. */
        #moderncart-slide-out .moderncart-cart-line-items__total {
            position: relative;
            margin-top: 0;
            padding: 11px 16px 30px;
            border-top: 1px solid var(--pc-line);
            color: var(--pc-ink);
            font-size: 19px;
            font-weight: 700;
        }

        #moderncart-slide-out .moderncart-cart-line-items__total .includes_tax {
            position: absolute;
            left: 16px;
            bottom: 10px;
            color: var(--pc-muted);
            font-size: 12.5px;
            font-weight: 400;
        }

        /* ================ AFREKENKNOP ================ */

        #moderncart-slide-out .moderncart-slide-out-footer .moderncart-cart-total a.checkout-button {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
            padding: 17px;
            border-radius: 11px;
            background: var(--pc-navy);
            color: #fff;
            font-family: var(--pc-kop);
            font-size: 17px;
            /* PeptideFont heeft de gewichten 100, 400, 500, 700 en 800.
               800 is het zwaarste dat bestaat - hoger vragen levert niets op. */
            font-weight: 800;
        }

        #moderncart-slide-out .moderncart-slide-out-footer .moderncart-cart-total a.checkout-button::after {
            content: "→";
            font-size: 18px;
            line-height: 1;
        }

        /* ===================== MOBIEL =====================
           Bij 375px is het paneel 345px breed en de kaart 317px. Daar moeten
           vier dingen naast elkaar: plaatje, tekst, teller en prullenbak.

           Eerdere poging liet de teller naar een eigen regel zakken. Dat werkte,
           maar maakte elke kaart een rij hoger (150 en 170px) - precies wat
           Wilma niet wilde. Nu blijft alles op een regel en is in plaats daarvan
           alles wat kleiner. Gemeten resultaat: 90 en 120px, zonder overlap.

           De flex-regels hieronder zijn nodig omdat de tekstkolom anders niet
           meekrimpt: hij bleef op 224px staan terwijl er 166px was, en liep dan
           dwars over de teller heen.

           De afbeeldingen worden hier niet met CSS teruggehaald; dat regelt het
           filter bij punt 3b hierboven. */

        #moderncart-slide-out-modal {
            --moderncart-slide-out-mobile-width: 92%;
        }

        @media (max-width: 600px) {
            /* De plusknop deed op mobiel niets bij het hoofdproduct. Oorzaak:
               de kaartinhoud werd breder dan het wagentje. Gemeten bij een
               scherm van 375px: wagentje 345 breed, prullenbak op 333..353 -
               dus 8px eroverheen. Alles schoof mee naar rechts, waardoor de
               plusknop deels buiten beeld viel, precies waar je hem aantikt.

               De krimp-regels (min-width:0) stonden er al, maar zonder een
               harde begrenzing puilt het alsnog naar buiten. Vandaar deze twee. */
            #moderncart-slide-out .moderncart-slide-out-cart-inner {
                overflow-x: hidden;
            }

            #moderncart-slide-out .moderncart-cart-item {
                padding: 10px;
                flex-wrap: nowrap;
                overflow: hidden;
            }

            /* De teller mag niet meegroeien of ingedrukt worden; hij houdt
               precies zijn eigen maat, de tekst ernaast geeft mee. */
            #moderncart-slide-out .moderncart-cart-item-actions {
                flex: none;
            }

            /* Op mobiel de korte naam: "Insuline naalden · 0,5ml" op één regel,
               in plaats van twee regels met de volledige variant eronder. */
            #moderncart-slide-out .pc-item-name,
            #moderncart-slide-out .pc-item-variant {
                display: none;
            }

            #moderncart-slide-out .pc-item-kort {
                display: block;
                color: var(--pc-ink);
                font-size: 13px;
                line-height: 1.3;
                font-weight: 700;
            }

            #moderncart-slide-out .pc-item-link:hover .pc-item-kort {
                text-decoration: underline;
            }

            #moderncart-slide-out .moderncart-cart-item-container {
                gap: 9px;
                flex: 1 1 auto;
                min-width: 0;
            }

            #moderncart-slide-out .moderncart-cart-item-product {
                flex: 1 1 auto;
                min-width: 0;
            }

            #moderncart-slide-out .moderncart-cart-item-image {
                width: 44px;
                height: 44px;
                min-width: 44px;
            }

            #moderncart-slide-out .moderncart-cart-item-product-name {
                font-size: 13px;
            }

            #moderncart-slide-out .pc-unit-price {
                font-size: 11px;
            }

            #moderncart-slide-out .moderncart-cart-item-actions--pricing {
                font-size: 14px;
            }

            /* Lange productnamen afkappen, anders bepaalt de naam de hoogte.
               Scheelde 140 -> 120px bij de naalden. */
            #moderncart-slide-out .moderncart-cart-item-product-name {
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                overflow: hidden;
            }

            #moderncart-slide-out-modal[class*="moderncart-cart-theme-"] .moderncart-cart-item-quantity,
            #moderncart-slide-out .moderncart-cart-item-quantity {
                height: 32px;
                grid-template-columns: 24px 22px 24px;
            }

            #moderncart-slide-out .moderncart-cart-item-quantity button,
            #moderncart-slide-out .moderncart-quantity__input {
                height: 32px;
            }

            #moderncart-slide-out .moderncart-quantity__input {
                font-size: 13px;
            }

            #moderncart-slide-out .moderncart-cart-item-actions {
                margin-right: 26px;
            }

            #moderncart-slide-out .moderncart-cart-item-actions-remove {
                right: 7px;
                width: 20px;
                height: 20px;
                -webkit-mask-size: 17px 17px;
                mask-size: 17px 17px;
            }
        }