/* assets/stijl.css */
/*
 * =============================================================================
 *  Dealbot — vormgeving van de website
 *
 *  Versie      : 4.0
 *  Reden       : Het scherm van de boodschappenlijst opgeruimd, punt voor punt
 *                langs wat er op 27-08-2026 aan mankeerde.
 *
 *                De sterretjes zijn even groot als de tekst waar ze achter
 *                staan in plaats van opgetild als een voetnoot, en het label
 *                bij "Wat wil je kopen?" is geen block meer - dat eiste de hele
 *                regel op en duwde het sterretje omlaag.
 *
 *                Het groene bolletje met de gekozen maat is weg. Het mocht niet
 *                krimpen en duwde daarmee de productnaam op een tweede regel;
 *                nu loopt "als 2 × 250 g" gewoon mee achter de naam.
 *
 *                De prijs per liter of kilo staat overal achteraan en rechts
 *                uitgelijnd, met de andere informatie ervóór. "Biologisch" en
 *                "Bekijk" staan op dezelfde regel als de prijs in plaats van
 *                elk op een eigen rij, en overal is de verticale ruimte
 *                teruggebracht - dat is op een telefoon het duurste wat er is.
 *                De prijs per kilo is meteen de link naar de winkel geworden,
 *                zodat er niets meer achter staat dat de uitlijning verstoort.
 *                En de kopregel van een boodschap is zelf de uitklapknop
 *                geworden, met het aantal winkels en de prijsreeks erop.
 *  Datum       : 27-08-2026 21:39
 *
 *  Vorige      : De verpakking die je zelf kiest is zichtbaar gemaakt: een dikke
 *                groene rand links bij de gekozen maat, gedempte regels bij de
 *                maten die het niet geworden zijn, en bovenaan de regel een
 *                groen bolletje met "als 2 × 250 g" dat de keuze ook weer
 *                loslaat. De maat in een ingeklapte groep is zelf een knop
 *                geworden en heeft daarom een stippellijntje.
 *  Datum       : 27-08-2026 23:10
 *
 *  Vorige      : De uitklapregels met uitleg zijn sterretjes geworden. Elke
 *                uitklapregel kostte zelf een hele regel op het scherm, en op
 *                een telefoon is verticale ruimte het duurste wat er is. Nu
 *                staat er een klein groen sterretje áchter de tekst die het
 *                uitlegt; klikken zet het blokje eronder open.
 *  Datum       : 27-08-2026 22:05
 *
 *  Vorige      : De tips ("maak er 1 kg van") staan onder één uitklapregel
 *                onderaan de boodschap. Die regel krijgt dezelfde vorm als de
 *                grotere verpakkingen eronder, want het is dezelfde soort knop:
 *                klein, grijs, met hetzelfde pijltje.
 *  Datum       : 27-08-2026 21:05
 *
 *  Vorige      : Alle uitleg op de boodschappenlijst zit voortaan achter een
 *                uitklapregel, zodat het scherm begint bij de lijst zelf en
 *                niet bij een alinea die je al kent. En het bedrag in het
 *                drempelveld stond een stuk lager dan de woorden ernaast: de
 *                onderrand van het label en de bovenrand van het invoerveld
 *                duwden het uit het midden.
 *  Datum       : 27-08-2026 19:10
 *
 *  Vorige      : Bij een pak dat niet uitkomt staan er nu twee uitwegen naast
 *                elkaar - het pak eronder en het pak erboven - en die moeten op
 *                een telefoon kunnen afbreken naar een tweede regel.
 *  Datum       : 27-08-2026 17:30
 *
 *  Vorige      : De grotere verpakkingen staan voortaan onder één regel die je
 *                kunt openklappen. Die regel is bewust ondergeschikt - kleiner
 *                en grijs - want het antwoord op je vraag staat erboven; het
 *                pijltje is wel hetzelfde, zodat het als dezelfde soort knop
 *                leest.
 *  Datum       : 26-08-2026 21:47
 *
 *  Vorige      : De boodschappenlijst verdeelt zichzelf over meerdere winkels.
 *                Bovenaan komt daarvoor het bedrag te staan dat een extra
 *                winkel moet opleveren, in dezelfde kaart als de winkelkeuze -
 *                het is dezelfde soort keuze: waar ga ik vandaag heen. Onder de
 *                lijst krijgt elke winkel een eigen kaartje met wat je daar
 *                meeneemt; naast elkaar als het past, want dat leest als één
 *                boodschappenrondje in plaats van als een naschrift.
 *
 *                En het uitklappijltje is van 2,4 naar 2,0 rem: groot genoeg om
 *                te zien, en het duwde de regel niet langer uit zijn verband.
 *  Datum       : 27-08-2026 15:25
 *
 *  Vorige      : Het uitklappijltje is drie keer zo groot geworden. Het was het
 *                enige teken dat er meer achter een regel zat, en op 0,8rem zag
 *                je het domweg niet staan.
 *  Datum       : 27-08-2026 00:35
 *
 *  Vorige      : De boodschappenlijst klapt in: per verpakkingsmaat één regel
 *                met de prijsreeks erachter, open te klappen naar de winkels.
 *                Die samenvatting krijgt dezelfde vijf kolommen als een gewone
 *                pakregel, zodat het oog niet hoeft te verspringen. Verder een
 *                min en een plus bij elke verpakking.
 *  Datum       : 26-08-2026 23:55
 *
 *  Vorige      : De boodschappenlijst toont niet langer één regel per winkel
 *                maar één regel per verpakking, met het aantal pakken dat voor
 *                jouw hoeveelheid nodig is. Dat vraagt een ander soort opmaak:
 *                geen rijtje losse zinnen meer maar vijf kolommen die over alle
 *                regels heen uitlijnen — pakken, winkel, bedrag, literprijs,
 *                meerprijs. Uitlijnen ís hier de functie: je vergelijkt
 *                bedragen onder elkaar en geen zinnen naast elkaar.
 *
 *                Een verpakking die de gevraagde hoeveelheid niet kan maken
 *                krijgt een rood randje en een knop die er wél een hoeveelheid
 *                van maakt die uitkomt. De knop is klein en in de accentkleur:
 *                het is een voorstel, geen waarschuwing.
 *  Datum       : 26-08-2026 13:10
 *
 *  Vorige      : Bovenaan de boodschappenlijst staat een strook met de logo's
 *                van de winkels, waarin je aanvinkt wie er meedoet. Een winkel
 *                die uit staat verbleekt en verliest zijn groene rand, zodat je
 *                in één oogopslag ziet waar je heen gaat — een vinkje alleen is
 *                op een strook met zes logo's te klein om dat te dragen.
 *  Datum       : 25-08-2026 17:25
 *
 *  Vorige      : De knop "Hele lijst wissen" viel weg voor het oog; hij is nu
 *                een echte knop met een rode rand en een prullenbakje. Verder
 *                twee nieuwe regels onder een prijs: wat een winkel nog meer in
 *                een andere bewaarvorm heeft, en een waarschuwing als hij het
 *                alleen per krat verkoopt.
 *  Datum       : 24-08-2026 23:30
 *
 *  Vorige      : De aanvinkbare eigenschappen op de boodschappenlijst werden
 *                overgelezen. Ze staan nu in een eigen omlijst vak met de
 *                accentkleur, en elk knopje heeft een vierkantje met een vinkje
 *                erin in plaats van alleen een kleurtje.
 *  Datum       : 24-08-2026 23:35
 *
 *  Vorige      : De lichtgroene tint die tot nu toe alleen op het profiel stond,
 *                geldt voortaan voor élk veld waar je zelf iets in typt. Op een
 *                scherm vol uitleg en prijzen wijst die tint aan waar je aan de
 *                slag kunt. Hij staat nu in de basisregel voor invoervelden, en
 *                niet meer als los knopje dat per veld aangezet moest worden —
 *                zo krijgt een nieuw veld hem vanzelf.
 *
 *                Verder een klein grijs versiestempel onderaan elke pagina.
 *  Datum       : 24-08-2026 22:40
 *
 *  Vorige      : Op de boodschappenlijst staan nu aanvinkbare eigenschappen bij
 *                elke regel, een prullenbak in plaats van een kruisje, en
 *                onderaan een knop waarmee de hele lijst weg kan.
 *  Datum       : 24-08-2026 15:50
 *
 *  Vorige      : Er is een boodschappenlijst bijgekomen: een invulveld met een
 *                zwevende keuzelijst, regels met per winkel het gekozen pak, en
 *                onderaan het totaal per winkel.
 *  Datum       : 23-08-2026 23:25
 *
 *  Vorige      : Op het profiel staan de twee manieren van zoeken nu als twee
 *                knoppen naast elkaar bovenaan, met eronder alleen de gekozen
 *                manier. De toelichting staat onder het invoerveld in plaats van
 *                erboven.
 *  Datum       : 07-08-2026 10:10
 *
 *  Onderdelen:
 *    basis           - kleuren, lettertype en de indeling van de pagina
 *    laatste-run     - de regel met het moment van de laatste ophaalronde
 *    groepkiezer     - onze indeling doorzoeken en aanvinken
 *    bovenbalk       - naam en navigatie, ook op een smal scherm
 *    inlogscherm     - het scherm vóór het inloggen
 *    afdelingblok    - de gevonden producten per afdeling en lade
 *    productkaart    - een product met zijn aanbiedingen
 *    standaardprijzen- de zoekbalk en de prijsregel op die pagina
 *    winkelpagina    - de logostrook en de blokken per productgroep
 *    beheerpagina    - het ophaalblok en de overzichtstabellen
 *    profiel         - de twee manieren van zoeken en de zoekvragen die je volgt
 *    winkelkeuze     - de strook logo's waarin je de winkels aanvinkt
 *    boodschappenlijst - het invulveld met suggesties, de regels en de totalen
 *    versiestempel   - de regel onderaan die zegt welke versie er draait
 * =============================================================================
 */

:root {
    --groen: #2f7d4f;
    --groen-donker: #245f3d;
    --rood: #b3261e;
    /* Er is niets stuk, er wacht werk: donker amber, leesbaar op wit. */
    --let-op: #8a5a00;
    --tekst: #1f2328;
    --grijs: #5b6470;
    --lijn: #e2e6ea;
    --achtergrond: #f5f6f8;
    --wit: #ffffff;
    /* De accentkleur van elk veld waar je zelf iets in typt. */
    --veld: #f2f8f4;
    --veldrand: #b6d4c2;
    --veldtekst: #7c8e83;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: var(--tekst);
    background: var(--achtergrond);
}

main {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px 16px 60px;
}

h1 { font-size: 1.6rem; margin: 12px 0 4px; }
h2 { font-size: 1.15rem; margin: 0 0 8px; }

.samenvatting { color: var(--grijs); margin: 0 0 16px; }

/* Wanneer de aanbiedingen voor het laatst zijn opgehaald: nuttig, maar bijzaak. */
.laatste-run { margin: -12px 0 16px; font-size: 0.85rem; color: var(--grijs); }
.laatste-run.storing { color: var(--rood); }
.uitleg { color: var(--grijs); margin: 0 0 16px; }
.bezig { color: var(--grijs); }

/* Een mededeling die je gezien moet hebben, maar waar niets mis mee is —
   bijvoorbeeld dat er nog maar van twee winkels gewone prijzen zijn. Daarom
   amber en niet rood, en geen kader: het is een terzijde, geen storing. */
.let-op {
    margin: -8px 0 16px;
    font-size: 0.9rem;
    color: var(--let-op);
}

/* Uitleg die je één keer leest en daarna nooit meer. Op de boodschappenlijst
   stond er drie alinea's toelichting boven de lijst, elke keer opnieuw. Dat
   ging eerst achter een uitklapregel — maar zo'n regel kost zélf een hele
   regel, en op een telefoon is verticale ruimte het duurste wat er is.

   Nu is het een sterretje achter de tekst die het uitlegt: het kost geen
   ruimte, het staat op de plek waar de vraag opkomt, en wie het niet nodig
   heeft leest er gewoon overheen.

   De inhoud houdt zijn eigen opmaak. Een `.let-op` binnen een uitlegblok is
   nog steeds amber, alleen leest niemand hem meer ongevraagd. */
/* Even groot als de tekst waar hij achter staat, en op dezelfde regel. Hij
   stond eerst als voetnoot opgetild en op 1,1x — dat leest als een verwijzing
   naar iets kleins onderaan de pagina, terwijl het hier juist een knop is die
   je aan moet durven raken. Op een telefoon is een opgetild sterretje van tien
   pixels domweg niet te raken. */
.uitlegster {
    margin: 0 0 0 4px;
    padding: 0 3px;
    border: 0;
    background: none;
    font: inherit;
    line-height: 1;
    color: var(--groen);
    cursor: pointer;
}

.uitlegster:hover { color: var(--groen-donker); }
.uitlegster:focus-visible { outline: 2px solid var(--groen); outline-offset: 2px; }

/* Open: het sterretje wordt donker. Zo zie je welk sterretje het blok eronder
   heeft opengezet, ook als er twee vlak bij elkaar staan. */
.uitlegster.open {
    color: var(--tekst);
}

.uitlegblok {
    margin: 4px 0 16px;
    padding: 8px 12px;
    border-left: 3px solid var(--lijn);
    font-size: 0.9rem;
    color: var(--grijs);
}

.uitlegblok > :last-child { margin-bottom: 0; }

/* De amberen mededeling schuift normaal een stukje omhoog tegen de alinea
   erboven aan. Binnen een uitlegblok staat hij vrij en hoort die trek eraf. */
.uitlegblok > .let-op { margin-top: 8px; }

/* Binnen een kaart (de winkelkeuze, het drempelveld) hoeft er onder het blok
   geen ruimte meer bij: de kaart geeft die al. */
.winkelkeuze .uitlegblok,
.drempelkeuze .uitlegblok,
.toevoegen .uitlegblok {
    margin: 8px 0 0;
}


/* -- bovenbalk ------------------------------------------------------------ */

.balk {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--groen);
    color: var(--wit);
}

.merk {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--wit);
    text-decoration: none;
}

.balk nav {
    display: flex;
    gap: 16px;
    align-items: center;
}

.balk nav a {
    color: var(--wit);
    text-decoration: none;
    padding-bottom: 2px;
}

.balk nav a.huidig { border-bottom: 2px solid var(--wit); }

.balk nav button {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.7);
    color: var(--wit);
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 0.95rem;
    cursor: pointer;
}

.balk nav button:hover { background: rgba(255, 255, 255, 0.15); }

/*
 * Op een telefoon rechtop past de rij tabbladen niet op één regel: Beheer en
 * Uitloggen vielen buiten beeld en waren dus niet meer te bereiken. De rij mag
 * daarom afbreken en krijgt de volle breedte onder de naam, zodat elk tabblad
 * zichtbaar blijft. Bewust geen schuifbalk of uitklapmenu: dan moet je eerst
 * weten dát er nog iets naast staat.
 */
@media (max-width: 640px) {
    .balk {
        gap: 8px;
        padding: 10px 12px;
    }

    .balk nav {
        flex-wrap: wrap;
        gap: 10px 14px;
        width: 100%;
        font-size: 0.95rem;
    }

    .balk nav button {
        padding: 4px 10px;
        font-size: 0.9rem;
    }
}

/* -- meldingen ------------------------------------------------------------ */

.melding {
    margin: 0 0 16px;
    padding: 10px 14px;
    border-radius: 8px;
    border-left: 4px solid var(--rood);
    background: #fdecea;
    color: var(--rood);
}

.melding.goed {
    border-left-color: var(--groen);
    background: #e8f4ec;
    color: var(--groen-donker);
}

/* -- inlogscherm ---------------------------------------------------------- */

.inlogkaart {
    max-width: 380px;
    margin: 60px auto;
    padding: 28px 24px;
    background: var(--wit);
    border-radius: 12px;
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.08);
}

.inlogkaart h1 { margin: 0; text-align: center; color: var(--groen); }
.ondertitel { margin: 4px 0 22px; text-align: center; color: var(--grijs); }

label {
    display: block;
    margin-bottom: 14px;
    font-weight: 600;
    font-size: 0.95rem;
}

input {
    display: block;
    width: 100%;
    margin-top: 5px;
    padding: 11px 12px;
    font-size: 1rem;
    font-weight: 400;
    border: 1px solid var(--lijn);
    border-radius: 8px;
    background: var(--wit);
}

/* Elk veld waar je zelf iets in typt krijgt de accentkleur: een lichte groene
   tint en een groene rand. Op een scherm vol uitleg, prijzen en knoppen is dat
   het verschil tussen "hier kun je iets doen" en "hier staat iets" — zonder dat
   het scherm gaat schreeuwen.

   De uitzonderingen staan er met opzet bij en niet andersom: een vinkje, een
   keuzerondje en een kleurkiezer tekent de browser zelf, en een tint eroverheen
   maakt die alleen maar vaag. Nieuwe soorten velden vallen zo vanzelf onder de
   accentkleur in plaats van hem stilletjes te missen. */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
select,
textarea {
    background: var(--veld);
    border-color: var(--veldrand);
}

input::placeholder,
textarea::placeholder { color: var(--veldtekst); }

input:focus,
select:focus,
textarea:focus {
    outline: 2px solid var(--groen);
    outline-offset: 1px;
    border-color: var(--groen);
}

/* Het zinnetje onder een invoerveld dat uitlegt waar dat veld op zoekt. */
label small {
    display: block;
    margin-top: 5px;
    font-weight: 400;
    font-size: 0.82rem;
    line-height: 1.35;
    color: var(--grijs);
}

button[type="submit"] {
    width: 100%;
    padding: 12px;
    font-size: 1rem;
    font-weight: 600;
    color: var(--wit);
    background: var(--groen);
    border: none;
    border-radius: 8px;
    cursor: pointer;
}

button[type="submit"]:hover:not(:disabled) { background: var(--groen-donker); }
button:disabled { opacity: 0.6; cursor: default; }

.schakelaar {
    display: block;
    width: 100%;
    margin-top: 14px;
    padding: 6px;
    background: none;
    border: none;
    color: var(--groen-donker);
    font-size: 0.95rem;
    text-decoration: underline;
    cursor: pointer;
}

/* -- afdelingblok (startpagina) ------------------------------------------- */

/* Eén afdeling uit onze eigen indeling, in te klappen. */
.afdelingblok {
    margin-bottom: 12px;
    background: var(--wit);
    border-radius: 10px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.07);
}

.afdelingblok > summary {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    font-size: 1.05rem;
    font-weight: 600;
    cursor: pointer;
}

.afdelingblok > summary:hover { background: #f2f7f4; border-radius: 10px; }

.afdelingaantal {
    padding: 2px 10px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--groen-donker);
    background: #e8f4ec;
    border-radius: 20px;
}

.afdelinginhoud { padding: 0 16px 8px; }

/* De lade binnen de afdeling: een tussenkopje, geen tweede kaart. */
.ladekop {
    display: flex;
    gap: 8px;
    align-items: baseline;
    margin: 14px 0 2px;
    padding-top: 10px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--grijs);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border-top: 1px solid var(--lijn);
}

.ladekop:first-child { margin-top: 4px; padding-top: 0; border-top: none; }

.ladeaantal { font-weight: 400; text-transform: none; letter-spacing: 0; }

/* Binnen een afdelingsblok is de productkaart al omlijst; een eigen schaduw
   eromheen zou kaart op kaart worden. */
.afdelinginhoud .product {
    margin-bottom: 0;
    padding: 12px 0;
    border-radius: 0;
    box-shadow: none;
    border-top: 1px solid var(--lijn);
}

.afdelinginhoud .ladekop + .product { border-top: none; }

/* -- productkaart --------------------------------------------------------- */

.product {
    margin-bottom: 14px;
    padding: 14px 16px;
    background: var(--wit);
    border-radius: 10px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.07);
}

.producttop {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-bottom: 10px;
}

.producttop img {
    width: 56px;
    height: 56px;
    object-fit: contain;
    flex-shrink: 0;
}

.producttekst h2 { margin: 0; }
.aantal { margin: 2px 0 0; font-size: 0.85rem; color: var(--grijs); }

.aanbiedingen {
    list-style: none;
    margin: 0;
    padding: 0;
}

.regel {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
    align-items: baseline;
    padding: 8px 0;
    border-top: 1px solid var(--lijn);
}

.winkel {
    min-width: 110px;
    font-weight: 600;
}

.prijzen { display: inline-flex; gap: 8px; align-items: baseline; }
.prijs { font-size: 1.15rem; color: var(--groen-donker); }
.oude-prijs { color: var(--grijs); }

.actie {
    padding: 2px 8px;
    font-size: 0.85rem;
    color: var(--groen-donker);
    background: #e8f4ec;
    border-radius: 20px;
}

.kiloprijs { color: var(--grijs); font-size: 0.9rem; }

.kanttekening {
    margin: 10px 0 0;
    font-size: 0.85rem;
    font-style: italic;
    color: var(--grijs);
}

.kiloprijs.onbekend { font-style: italic; }
.geldig { color: var(--grijs); font-size: 0.85rem; }

.label {
    padding: 2px 8px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--wit);
    background: var(--groen);
    border-radius: 20px;
}

/* -- lege lijst en knoppen ------------------------------------------------ */

.leeg {
    padding: 30px 24px;
    text-align: center;
    background: var(--wit);
    border-radius: 10px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.07);
}

.leeg p { color: var(--grijs); max-width: 460px; margin: 8px auto 20px; }

.knoppen {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

.knop {
    display: inline-block;
    padding: 11px 18px;
    font-weight: 600;
    color: var(--wit);
    background: var(--groen);
    border-radius: 8px;
    text-decoration: none;
}

.knop:hover { background: var(--groen-donker); }

.knop.tweede {
    color: var(--groen-donker);
    background: var(--wit);
    border: 1px solid var(--groen);
}

.knop.tweede:hover { background: #e8f4ec; }

/* -- handmatige 07.00-run (TIJDELIJK, tijdens het testen) ----------------- */

/* =============================================================================
 *  Standaardprijzen — de zoekbalk en de kaart met één vaste prijs
 * ========================================================================== */

/* Twee velden naast elkaar op een groot scherm, onder elkaar op een telefoon. */
.zoekbalk {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 18px;
    margin-bottom: 20px;
    padding: 16px;
    background: var(--wit);
    border-radius: 10px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.07);
}

@media (max-width: 620px) {
    .zoekbalk { grid-template-columns: 1fr; }
}

.zoekbalk label { margin-bottom: 0; }

/* De keuzelijst hetzelfde laten ogen als een invoerveld. De kleur en de rand
   staan er met opzet niet bij: die komen van de basisregel voor invoervelden,
   zodat deze keuzelijst dezelfde accentkleur krijgt als al het andere waar je
   zelf iets invult. */
.zoekbalk select {
    display: block;
    width: 100%;
    margin-top: 5px;
    padding: 11px 12px;
    font-size: 1rem;
    font-family: inherit;
    color: var(--tekst);
    border-radius: 8px;
}

.zoekbalk select:disabled { opacity: 0.6; }

/* De winkelindeling onder de productnaam, zodat duidelijk is waar iets bij hoort. */
.groep {
    margin: 2px 0 0;
    font-size: 0.8rem;
    color: var(--grijs);
}

/* -- verfijnen binnen een lade -------------------------------------------- */

/* Een rij knopjes met de kenmerken die in de gekozen lade voorkomen. Onze lade
   Toiletpapier bevat het droge en het vochtige door elkaar — terecht, het is
   allemaal toiletpapier — maar wie gericht zoekt wil ze alsnog uit elkaar
   kunnen halen. Het knopje heet "vochtig" en niet "Toiletpapier Vochtig": het
   staat in onze eigen woorden en dekt daarmee alle winkels tegelijk. */
.verfijning {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 16px;
}

.chip {
    display: inline-flex;
    gap: 6px;
    align-items: baseline;
    padding: 6px 12px;
    font-size: 0.85rem;
    font-family: inherit;
    color: var(--tekst);
    background: var(--wit);
    border: 1px solid var(--lijn);
    border-radius: 999px;
    cursor: pointer;
}

.chip:hover { border-color: var(--groen); }

.chip:focus-visible {
    outline: 2px solid var(--groen);
    outline-offset: 1px;
}

/* Het gekozen knopje is niet alleen aan de kleur te herkennen: de rand wordt
   ook dikker, zodat het ook zichtbaar blijft als kleuren wegvallen. */
.chip.actief {
    color: var(--wit);
    background: var(--groen);
    border-color: var(--groen-donker);
    font-weight: 600;
}

.chipaantal { font-size: 0.8rem; opacity: 0.75; }

/* Eén regel met de vaste prijs; geen rijtje aanbiedingen zoals op de startpagina. */
.prijsregel {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    align-items: baseline;
    padding-top: 10px;
    border-top: 1px solid var(--lijn);
}

.winkellink {
    margin-left: auto;
    font-size: 0.85rem;
    color: var(--groen-donker);
}

/* =============================================================================
 *  Winkelpagina — de logostrook en de blokken per productgroep
 * ========================================================================== */

.winkelkiezer {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
}

/* Een winkel kies je door op zijn logo te klikken; de knop eromheen is verder
   zo onopvallend mogelijk, zodat het logo het werk doet. */
.winkeltegel {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: center;
    width: 104px;
    padding: 10px 8px;
    font-family: inherit;
    background: var(--wit);
    border: 2px solid transparent;
    border-radius: 10px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.07);
    cursor: pointer;
}

.winkeltegel:hover { border-color: var(--lijn); }

.winkeltegel.gekozen {
    border-color: var(--groen);
    box-shadow: 0 2px 8px rgba(47, 125, 79, 0.25);
}

.winkeltegel img {
    width: 56px;
    height: 56px;
    object-fit: contain;
    border-radius: 8px;
}

/* Zonder logo: de naam van de winkel in het vlak waar het logo hoort. */
.winkelnaam {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1.1;
    text-align: center;
    color: var(--groen-donker);
    background: #e8f4ec;
    border-radius: 8px;
}

.winkelaantal {
    font-size: 0.75rem;
    line-height: 1.2;
    text-align: center;
    color: var(--grijs);
}

/* Een winkel zonder aanbiedingen blijft te kiezen, maar vraagt geen aandacht. */
.winkeltegel.leegwinkel img,
.winkeltegel.leegwinkel .winkelnaam { opacity: 0.45; }

.groepknoppen { justify-content: flex-start; margin-bottom: 16px; }
.groepknoppen .knop { border: 1px solid var(--groen); font-family: inherit; font-size: 0.9rem; padding: 8px 14px; cursor: pointer; }

/* Eén productgroep, in te klappen. */
.groepblok {
    margin-bottom: 10px;
    background: var(--wit);
    border-radius: 10px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.07);
}

.groepblok > summary {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    font-weight: 600;
    cursor: pointer;
}

.groepblok > summary:hover { background: #f2f7f4; border-radius: 10px; }

.groepaantal {
    padding: 2px 10px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--groen-donker);
    background: #e8f4ec;
    border-radius: 20px;
}

.winkelregels {
    list-style: none;
    margin: 0;
    padding: 0 16px 8px;
}

.winkelregel {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 10px 0;
    border-top: 1px solid var(--lijn);
}

.winkelregel img {
    width: 44px;
    height: 44px;
    object-fit: contain;
    flex-shrink: 0;
}

.regeltekst { min-width: 0; }
.regelnaam { font-weight: 600; color: var(--tekst); }
a.regelnaam { text-decoration: none; }
a.regelnaam:hover { text-decoration: underline; }

.regeldetails {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    align-items: baseline;
    margin-top: 2px;
}

.regeldetails .prijs { font-size: 1.05rem; }

/* =============================================================================
 *  Beheerpagina
 * ========================================================================== */

.runblok .knoppen { justify-content: flex-start; margin-bottom: 18px; }

/* De knoppen in dit blok zijn echte knoppen en erven het lettertype niet vanzelf. */
.runblok button.knop {
    font-family: inherit;
    font-size: 1rem;
    cursor: pointer;
}

/* Hoe het laatste startsein is aangekomen: een terzijde boven de tabel. */
.startsein {
    margin: -6px 0 16px;
    font-size: 0.9rem;
    color: var(--grijs);
}

/* Overzichtstabel: rustig, met de getallen rechts zodat ze te vergelijken zijn. */
.beheertabel {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92rem;
}

.beheertabel th {
    text-align: left;
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--grijs);
    padding: 0 8px 6px 0;
    border-bottom: 1px solid var(--lijn);
}

.beheertabel td {
    padding: 9px 8px 9px 0;
    border-bottom: 1px solid var(--lijn);
    vertical-align: top;
}

.beheertabel tr:last-child td { border-bottom: none; }
.beheertabel .getal { text-align: right; white-space: nowrap; }
.beheertabel th:not(:first-child) { text-align: right; }

/* Een winkel die uitstaat of niets levert: blijft zichtbaar, vraagt geen aandacht. */
.beheertabel tr.uit td { color: var(--grijs); }

/*
 * Een getal waar iets op te doen valt — onvertaalde groepsnamen. Bewust niet
 * rood: er is niets stuk, er wacht alleen werk. Ook een grijze regel houdt deze
 * kleur, want juist bij een winkel die nog niets levert is dit het antwoord op
 * de vraag waarom.
 */
.beheertabel .aandacht,
.beheertabel tr.uit td.aandacht { color: var(--let-op); font-weight: 600; }

/* Het zinnetje onder een tabel dat zegt wat de cijfers betekenen. */
.tabeluitleg {
    margin: 10px 0 0;
    font-size: 0.85rem;
    color: var(--grijs);
}

.tabeluitleg.aandacht { color: var(--let-op); }

.fout-tekst { color: var(--rood); font-weight: 600; }

/* De storingsmelding hoort bij de regel erboven en krijgt daarom geen eigen lijn. */
.beheertabel tr.meldingregel td {
    padding-top: 0;
    border-bottom: 1px solid var(--lijn);
}

.storingtekst {
    color: var(--rood);
    font-size: 0.85rem;
    word-break: break-word;
}

/* De knoppen in een regel van het gebruikersoverzicht. */
.beheertabel .acties { text-align: right; }

.rijknoppen {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: flex-end;
}

.actieknop {
    padding: 5px 11px;
    font-family: inherit;
    font-size: 0.85rem;
    background: var(--wit);
    border-radius: 6px;
    cursor: pointer;
}

.actieknop.zacht { border: 1px solid var(--groen); color: var(--groen-donker); }
.actieknop.zacht:hover:not(:disabled) { background: #e8f4ec; }
.actieknop.gevaar { border: 1px solid var(--rood); color: var(--rood); }
.actieknop.gevaar:hover:not(:disabled) { background: #fbeceb; }

.aantekening { color: var(--grijs); font-size: 0.85rem; }

/* De staat van een account: op slot of actief, met de aantekening eronder. */
.staat {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Het venster dat vraagt of een account echt weg mag. Onopgesmukt: hier hoort
   even niets anders te kunnen dan lezen en kiezen. */
.vraagscherm {
    max-width: 420px;
    padding: 20px 22px;
    border: none;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.vraagscherm::backdrop { background: rgba(0, 0, 0, 0.35); }

.vraagscherm h2 { margin: 0 0 10px; font-size: 1.1rem; }
.vraagscherm p { margin: 0 0 14px; }

/* Het vinkje naast zijn tekst, niet erboven; de tekst mag doorlopen. */
.keuzeregel {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    margin-bottom: 18px;
    font-size: 0.9rem;
    cursor: pointer;
}

.keuzeregel input { margin-top: 3px; flex: none; }

.vraagscherm .knoppen {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

/* Het formulier om een e-mailadres te weren: op één regel als het past. */
.weerform {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-end;
    margin-bottom: 16px;
}

.weerform label { margin-bottom: 0; flex: 1 1 200px; }
.weerform input { margin-top: 4px; }

.weerform button {
    font-family: inherit;
    font-size: 0.95rem;
    border: none;
    cursor: pointer;
}

/* -- pincode vergeten ----------------------------------------------------- */

/* Onder de aanmeldknop, maar rustiger: dit is de uitzondering, niet de weg. */
.schakelaar.zacht {
    margin-top: 2px;
    font-size: 0.85rem;
    color: var(--grijs);
}

/* -- profiel -------------------------------------------------------------- */

.blok {
    margin-bottom: 20px;
    padding: 18px 20px;
    background: var(--wit);
    border-radius: 10px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.07);
}

/* De twee manieren van zoeken, naast elkaar bovenaan het profiel. Ze zijn even
   breed: geen van beide is de "gewone" manier, het hangt ervan af wat je zoekt.
   Ze staan er als knoppen bij en niet als kale tekst, zodat meteen duidelijk is
   dat je er iets mee kunt. */
.manieren {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}

.manier {
    flex: 1 1 0;
    padding: 10px 12px;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--groen-donker);
    background: var(--wit);
    border: 1px solid var(--groen);
    border-radius: 8px;
    cursor: pointer;
}

.manier:hover:not(.actief) { background: #e8f4ec; }

/* De gekozen manier is niet alleen aan de kleur te zien: hij staat ook vol,
   zodat het onderscheid blijft als kleuren wegvallen. */
.manier.actief {
    color: var(--wit);
    background: var(--groen);
    border-color: var(--groen-donker);
}

.manier:focus-visible {
    outline: 2px solid var(--groen);
    outline-offset: 2px;
}

/* De toelichting hoort ónder het veld waar hij over gaat: eerst zie je wat je
   kunt doen, daarna pas de uitleg erbij. */
.uitleg.onderveld {
    margin: 8px 0 14px;
    font-size: 0.9rem;
}

.zoekvraagformulier .onderveld { grid-column: 1 / -1; }

/* Hoeveel zoekvragen er nu staan, achter het kopje. */
.telling { font-size: 0.9rem; font-weight: 400; color: var(--grijs); }

.zoekvraaglijst {
    list-style: none;
    margin: 0;
    padding: 0;
}

.zoekvraag {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    border-top: 1px solid var(--lijn);
}

.zoekvraag:first-child { border-top: none; }
.omschrijving { font-weight: 600; }
.leeg-regel { color: var(--grijs); padding: 6px 0; }

.verwijder {
    padding: 7px 14px;
    font-size: 0.9rem;
    color: var(--rood);
    background: var(--wit);
    border: 1px solid var(--rood);
    border-radius: 6px;
    cursor: pointer;
}

.verwijder:hover:not(:disabled) { background: #fdecea; }

.zoekvraagformulier button[type="submit"] { width: auto; padding: 12px 22px; }

@media (min-width: 620px) {
    .zoekvraagformulier {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0 14px;
        /* Boven uitlijnen: de uitleg onder de velden is niet overal even lang,
           dus de invoervelden zelf moeten op één lijn staan, niet de onderkant. */
        align-items: start;
    }
    .zoekvraagformulier button[type="submit"] { grid-column: 1 / -1; justify-self: start; }
}

/* -- onze indeling doorzoeken en aanvinken -------------------------------- */

.groepkiezer input[type="search"] { margin-bottom: 12px; }

.zoekhulp { margin: 0 0 8px; font-size: 0.85rem; color: var(--grijs); }

/* De aangevinkte groepen, zodat ze in beeld blijven als je opnieuw zoekt. */
.gekozen {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    margin: 0 0 12px;
    padding: 0;
}

.gekozen-groep {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    padding: 5px 8px 5px 12px;
    font-size: 0.9rem;
    color: var(--groen-donker);
    background: #e8f4ec;
    border-radius: 20px;
}

.gekozen-groep .weg {
    padding: 0 4px;
    font-size: 1.1rem;
    line-height: 1;
    color: var(--groen-donker);
    background: none;
    border: none;
    cursor: pointer;
}

.gekozen-groep .weg:hover { color: var(--rood); }

/* Onze indeling. Een vaste hoogte met eigen schuifbalk: achtentwintig
   afdelingen zijn te veel om de opslaanknop van het scherm af te duwen. */
.indeling {
    margin: 0 0 14px;
    max-height: 420px;
    overflow-y: auto;
}

.indeling:not(:empty) {
    border: 1px solid var(--lijn);
    border-radius: 8px;
}

.afdeling { border-top: 1px solid var(--lijn); }
.afdeling:first-child { border-top: none; }

.afdeling > summary {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    padding: 11px 12px;
    font-weight: 600;
    cursor: pointer;
}

.afdeling > summary:hover { background: #f2f7f4; }
.afdeling[open] > summary { background: #f2f7f4; }

.keuzes {
    list-style: none;
    margin: 0;
    padding: 0 0 6px;
}

.keuze label {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    align-items: baseline;
    margin: 0;
    /* Inspringen, zodat je ziet dat een groep onder de afdeling hangt. */
    padding: 8px 12px 8px 30px;
    font-weight: 400;
    cursor: pointer;
}

.keuze label:hover { background: #f7f9f8; }

/* De regel "Alles uit deze afdeling" is een bredere keuze dan de groepen
   eronder, en hoort er dus ook anders uit te zien. */
.keuze.afdelingbreed label { font-weight: 600; }

.keuze input[type="checkbox"] {
    display: inline;
    width: auto;
    margin: 0;
    padding: 0;
    /* Groot genoeg om met een duim te raken. */
    min-width: 20px;
    min-height: 20px;
}

.keuze input[type="checkbox"]:disabled { cursor: default; }
.keuze input[type="checkbox"]:disabled + .keuzenaam { color: var(--grijs); }

.keuzenaam { flex: 1 1 auto; }
.keuzeaantal { margin-left: auto; font-size: 0.85rem; font-weight: 400; color: var(--grijs); }
.keuzeaantal.gevolgd { color: var(--groen-donker); font-style: italic; }

/* De kenmerken onder een lade: de derde laag. Ze springen verder in dan de lade
   zelf, zodat je ziet dat ze eronder hangen en niet ernaast staan. Kleiner dan
   de knopjes op de prijzenpagina, want hier staan ze midden in een lijst. */
.kenmerken {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    list-style: none;
    margin: 0;
    padding: 0 12px 10px 52px;
}

.kenmerk {
    display: inline-flex;
    gap: 5px;
    align-items: baseline;
    padding: 4px 10px;
    font-size: 0.8rem;
    font-family: inherit;
    color: var(--tekst);
    background: var(--wit);
    border: 1px solid var(--lijn);
    border-radius: 999px;
    cursor: pointer;
}

.kenmerk:hover:not(:disabled) { border-color: var(--groen); }

.kenmerk:focus-visible {
    outline: 2px solid var(--groen);
    outline-offset: 1px;
}

/* Gekozen is niet alleen aan de kleur te zien maar ook aan het dikkere schrift,
   zodat het knopje herkenbaar blijft als kleuren wegvallen. */
.kenmerk.actief {
    color: var(--wit);
    background: var(--groen);
    border-color: var(--groen-donker);
    font-weight: 600;
}

/* Uit, omdat de hele lade al gevolgd wordt: het knopje blijft staan zodat je
   ziet wat er te kiezen valt, maar het valt niets meer toe te voegen. */
.kenmerk:disabled {
    opacity: 0.5;
    cursor: default;
}

.kenmerknaam { white-space: nowrap; }
.kenmerkaantal { font-size: 0.75rem; opacity: 0.75; }

.groepkiezer .knop { border: none; font-family: inherit; font-size: 1rem; cursor: pointer; }
.groepkiezer .knop:disabled { opacity: 0.6; cursor: default; }

/* -- boodschappenlijst ---------------------------------------------------- */

/* De strook waarin je aanvinkt welke winkels meedoen.

   Hij staat bovenaan, want het is een keuze die je vóór het vergelijken maakt.
   Dezelfde logo's als op de winkelpagina, zodat je een winkel herkent zonder de
   naam te lezen. */
.winkelkeuze {
    margin: 0 0 20px;
    padding: 14px 16px 12px;
    background: var(--wit);
    border-radius: 10px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.07);
}

.winkelstrook {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 4px;
}

/* Eén winkel: het logo met de naam eronder, en linksboven het vinkje. Het hele
   vak is aanklikbaar — op een telefoon is een los vinkje van 14 pixels geen
   doel dat je raakt. */
.winkelvink {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: center;
    width: 92px;
    padding: 10px 6px 8px;
    background: var(--wit);
    border: 2px solid var(--groen);
    border-radius: 10px;
    cursor: pointer;
}

.winkelvink input {
    position: absolute;
    top: 6px;
    left: 6px;
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--groen);
    cursor: pointer;
}

.winkelvink img {
    width: 48px;
    height: 48px;
    object-fit: contain;
    border-radius: 8px;
}

/* Zonder logo: de naam in het vlak waar het logo hoort — dezelfde maat als op
   de winkelpagina, alleen wat kleiner omdat deze tegels dat ook zijn. */
.winkelvink .winkelnaam { width: 48px; height: 48px; font-size: 0.72rem; }

.winkelvinknaam {
    font-size: 0.78rem;
    line-height: 1.15;
    text-align: center;
    color: var(--grijs);
}

/* Uitgezet is bleek én zonder groene rand. Twee signalen in plaats van één,
   want op een strook van zes tegels moet je in één oogopslag zien welke
   winkels er nog meedoen. */
.winkelvink.uit {
    border-color: var(--lijn);
    background: var(--achtergrond);
}

.winkelvink.uit img,
.winkelvink.uit .winkelnaam { opacity: 0.35; }
/* "(alleen aanbiedingen)" onder het logo van Lidl. Kleiner dan de winkelnaam
   eronder, want het is een voetnoot bij die naam en geen tweede naam. Het mag
   het vakje niet breder maken, dus het breekt af in plaats van uit te rekken. */
.winkelvinkbijzin {
    max-width: 7em;
    font-size: 0.62rem;
    line-height: 1.1;
    text-align: center;
    color: var(--grijs);
}

.winkelvink.uit .winkelvinknaam,
.winkelvink.uit .winkelvinkbijzin { opacity: 0.6; }

.winkelvink:hover { border-color: var(--groen-donker); }
.winkelvink:focus-within { outline: 2px solid var(--groen); outline-offset: 2px; }

/* Alleen te zien wanneer je de laatste winkel probeert uit te zetten. */
.winkelhint {
    margin: 10px 0 0;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--let-op);
}

/* Vanaf welke besparing een extra winkel meetelt. Dezelfde kaart als de
   winkelkeuze, want het is dezelfde soort keuze: waar ga ik vandaag heen. */
.drempelkeuze {
    margin: 0 0 20px;
    padding: 14px 16px 12px;
    background: var(--wit);
    border-radius: 10px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.07);
}

.drempelrij {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    font-weight: 600;
}

/* Een label staat overal elders boven zijn veld en heeft daarom onderruimte.
   Hier staat het ernaast, en die onderruimte telt mee bij het uitmiddelen:
   de zin kwam een halve regel omhoog en het bedrag leek te zakken. */
.drempelrij label { margin-bottom: 0; }

/* Het euroteken staat in het veld en niet ervoor: anders lijkt het een los
   woord en typ je hem er zelf nog een keer bij. */
.drempelbedrag {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px 8px;
    background: var(--wit);
    border: 1px solid var(--lijn);
    border-radius: 6px;
}

.drempelbedrag:focus-within { border-color: var(--groen); }
.euroteken { color: var(--grijs); }

.drempelbedrag input {
    width: 3.5rem;
    margin-top: 0;
    padding: 4px 0;
    font: inherit;
    font-weight: 700;
    color: inherit;
    text-align: right;
    background: none;
    border: none;
}

.drempelbedrag input:focus { outline: none; }


/* Het invulveld met de keuzelijst eronder. De keuzelijst zweeft over de lijst
   heen in plaats van hem opzij te duwen: anders springt de hele pagina bij elke
   letter die je typt. */
.toevoegen {
    margin: 0 0 12px;
    padding: 12px;
    background: var(--wit);
    border-radius: 10px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.07);
}

/* Inline-block en geen block. Een block-label eist de hele regel op, en dan
   wordt het sterretje erachter een regel omlaag geduwd — precies het tegendeel
   van "achter de tekst waar de vraag opkomt". Inline-block laat het sterretje
   ernaast staan en houdt tegelijk de witruimte eronder overeind, die een
   inline-label zou laten vallen. */
.toevoegen label { display: inline-block; font-weight: 600; margin-bottom: 6px; }
.toevoegen small { display: block; margin-top: 6px; color: var(--grijs); }

.invulhulp { position: relative; }

.invulhulp input {
    width: 100%;
    padding: 10px 12px;
    font-family: inherit;
    font-size: 1rem;
    color: var(--tekst);
    border-radius: 8px;
}

.invulhulp input:focus {
    outline: none;
    border-color: var(--groen);
    box-shadow: 0 0 0 3px rgba(47, 125, 79, 0.15);
}

.suggesties {
    position: absolute;
    z-index: 20;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    max-height: 320px;
    overflow-y: auto;
    list-style: none;
    margin: 0;
    padding: 4px;
    background: var(--wit);
    border: 1px solid var(--lijn);
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}

.suggestie {
    display: flex;
    gap: 12px;
    align-items: baseline;
    justify-content: space-between;
    padding: 8px 10px;
    border-radius: 6px;
    cursor: pointer;
}

/* Aangewezen met de muis of met de pijltjestoetsen; dat is hetzelfde. */
.suggestie.aangewezen { background: #e8f4ec; }
.suggestienaam { font-weight: 500; }

.suggestiewinkels {
    flex-shrink: 0;
    font-size: 0.85rem;
    color: var(--groen-donker);
    white-space: nowrap;
}

/* Bij één winkel valt er niets te vergelijken. Dat mag je zien vóórdat je het
   op je lijst zet, dus staat het er grijs bij in plaats van groen. */
.suggestiewinkels.alleen { color: var(--grijs); }

/* -- de trechter ---------------------------------------------------------- */

/* De vier vragen onder het zoekveld: welke soort, welk merk, welke uitvoering,
   welke maat. Dit is een blok in de pagina en geen zwevend lijstje zoals de
   suggesties, en dat is met opzet: je bent hier aan het kiezen en niet aan het
   grijpen. Een zwevende laag zou bij elke klik weer over de rest van de pagina
   heen springen, en op een telefoon zou hij het halve scherm afdekken. */
.trechter {
    margin-top: 10px;
    padding: 10px 12px 4px;
    background: var(--veld);
    border: 1px solid var(--veldrand);
    border-radius: 8px;
}

.trechterkop {
    display: flex;
    gap: 12px;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 8px;
}

.trechtertelling {
    font-size: 0.85rem;
    color: var(--groen-donker);
}

/* Geen knop maar een link-achtig woord. "Begin opnieuw" is de uitweg en niet
   de bedoeling; als knop zou hij net zo hard om aandacht vragen als de keuzes
   zelf. */
.trechterterug {
    padding: 0;
    font-family: inherit;
    font-size: 0.85rem;
    color: var(--grijs);
    text-decoration: underline;
    background: none;
    border: none;
    cursor: pointer;
}

.trechterterug:hover { color: var(--tekst); }

/* Wat je koos, op één regel, elk apart weg te klikken. Klein en afgekort: het
   is de weg terug en niet de hoofdzaak, en het moet op een telefoon op één
   regel passen. Breekt af naar een tweede regel als het echt niet past — liever
   twee regels dan een knopje dat je niet meer kunt raken. */
.trechtergekozen {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--veldrand);
}

.trechtergekozenkop {
    font-size: 0.72rem;
    color: var(--grijs);
}

.trechterterugknop {
    display: inline-flex;
    gap: 4px;
    align-items: center;
    padding: 2px 6px;
    font-family: inherit;
    font-size: 0.72rem;
    color: var(--wit);
    background: var(--groen);
    border: none;
    border-radius: 999px;
    cursor: pointer;
}

.trechterterugknop:hover { background: var(--rood); }

.trechterkruis {
    font-size: 0.85rem;
    line-height: 1;
    opacity: 0.75;
}

.trechterstap { margin-bottom: 8px; }

.trechtervraag {
    display: block;
    margin-bottom: 4px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--tekst);
}

.trechterkeuzes {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.trechterkeuze {
    display: inline-flex;
    gap: 6px;
    align-items: baseline;
    padding: 5px 10px;
    font-family: inherit;
    font-size: 0.9rem;
    color: var(--tekst);
    background: var(--wit);
    border: 1px solid var(--veldrand);
    border-radius: 999px;
    cursor: pointer;
}

.trechterkeuze:hover { border-color: var(--groen); }

/* Aangeklikt. Vol groen en niet alleen een randje: je moet in één blik kunnen
   zien welke keuzes er nu aan staan, ook als er twintig knopjes naast elkaar
   staan. */
.trechterkeuze.aan {
    color: var(--wit);
    background: var(--groen);
    border-color: var(--groen);
}

/* Hoeveel er achter deze keuze zit. Kleiner en lichter dan het woord ervoor:
   het woord is de keuze, het getal is de reden om hem wel of niet te maken. */
.keuzeaantal {
    font-size: 0.8rem;
    color: var(--grijs);
}

.trechterkeuze.aan .keuzeaantal { color: rgba(255, 255, 255, 0.8); }

/* De kaarten die overblijven staan ín het blok en zweven dus niet. De opmaak
   van een regel blijft gelijk aan die van de suggestielijst — het zijn dezelfde
   regels, alleen op een andere plek. */
.trechterlijst {
    position: static;
    max-height: 260px;
    margin-top: 4px;
    border-color: var(--veldrand);
    box-shadow: none;
}

/* De winkellogo's op een suggestieregel: klein, en ze mogen de productnaam niet
   wegdrukken. Krimpen dus niet mee als de naam lang is. */
.trechterlijst .suggestiewinkels {
    display: flex;
    flex-shrink: 0;
    gap: 2px;
    align-items: center;
}

.trechterlijst .suggestiewinkels img { height: 16px; width: auto; }

.trechterleeg {
    margin: 4px 0 8px;
    font-size: 0.9rem;
    color: var(--let-op);
}


.lijstregel {
    margin-bottom: 8px;
    padding: 10px 12px;
    background: var(--wit);
    border-radius: 10px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.07);
}

/* De kopregel van een boodschap, en meteen de knop die alles eronder openklapt:

     - 1 liter +   Melk halfvol (huismerk)  (4)   EUR 0,85 - 0,89   v   [x]

   Alles op één regel, want dit is wat je leest als je je lijst naloopt. Wélke
   winkels dat zijn en in welke verpakking staat eronder zodra je uitklapt. */
.lijstkop {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 0;
    cursor: pointer;
    list-style: none;
}

.lijstkop::-webkit-details-marker { display: none; }

.lijstkop h2 { flex: 1; margin: 0; min-width: 0; }

/* Waar het te krijgen is, als kleine logo's achter de naam. Een logo van
   achttien pixels kost minder ruimte dan het woord "Albert Heijn" en zegt meer:
   je herkent een winkel aan zijn kleur voordat je hem gelezen hebt.

   Ze mogen nooit de naam wegdrukken, vandaar flex-shrink: 0 op de rij zelf en
   een vaste hoogte op de plaatjes - een logo dat meekrimpt wordt een vlekje. */
.winkellogos {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    gap: 3px;
}

.winkellogos img {
    height: 18px;
    width: auto;
    max-width: 34px;
    object-fit: contain;
    border-radius: 3px;
}

/* Waar het juist niet ligt: dezelfde logo's, en met opzet gewoon in kleur.

   Ze waren eerst grijs en halfdoorzichtig, zodat het tweede rijtje minder hard
   om aandacht zou vragen dan het eerste. Maar op achttien pixels is kleur juist
   het enige waaraan je een winkel herkent; grijs maakte er vlekjes van die je
   moest aanwijzen om te weten welke winkel het was. Het woord "niet bij:"
   ervoor zegt al genoeg over het verschil. */
.winkellogos.dof img {
    height: 16px;
    max-width: 30px;
}

/* Laadt een logo niet, dan de naam. Liever een woord te veel dan een winkel die
   van het scherm verdwijnt. */
.winkelkort {
    font-size: 0.8rem;
    color: var(--grijs);
    white-space: nowrap;
}

.lijstkop .prijs {
    flex-shrink: 0;
    font-size: 1rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Hetzelfde driehoekje als overal, tussen de prijs en de prullenbak. Het staat
   er als laatste aanwijzing dat hier meer achter zit; zonder pijltje ziet
   niemand dat een kopregel open kan. */
.lijstkop::after {
    content: '▾';
    flex-shrink: 0;
    order: 98;
    font-size: 1.5rem;
    line-height: 0.5;
    color: var(--grijs);
}

.boodschap[open] > .lijstkop::after { content: '▴'; }
.lijstkop .wegknop { order: 99; }
.lijstkop:hover { color: var(--groen-donker); }
.lijstkop:focus-visible { outline: 2px solid var(--groen); outline-offset: 2px; }

/* De aanvinkbare eigenschappen zitten binnen de uitklapper en niet erboven: ze
   horen bij het uitzoeken, en zolang je alleen je lijst naloopt kosten ze een
   regel die niets zegt. */
.boodschap > .eisen { margin-top: 6px; }

.aantalkiezer {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    border: 1px solid var(--lijn);
    border-radius: 8px;
    overflow: hidden;
}

.aantalknop {
    width: 32px;
    height: 32px;
    font-family: inherit;
    font-size: 1.1rem;
    line-height: 1;
    color: var(--tekst);
    background: var(--wit);
    border: none;
    cursor: pointer;
}

.aantalknop:hover:not(:disabled) { background: #e8f4ec; }
.aantalknop:disabled { opacity: 0.35; cursor: default; }
.aantalknop:focus-visible { outline: 2px solid var(--groen); outline-offset: -2px; }

.aantalgetal {
    min-width: 26px;
    text-align: center;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* Een prullenbak en geen kruisje. Een kruisje betekent overal elders
   "wegklikken"; deze knop gooit de regel echt weg, en dat hoort de tekening te
   zeggen voordat je hem indrukt. */
.wegknop {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    color: var(--grijs);
    background: none;
    border: none;
    border-radius: 6px;
    cursor: pointer;
}

.wegknop svg { width: 17px; height: 17px; fill: currentColor; }

.wegknop:hover { color: var(--rood); background: #fdeceb; }
.wegknop:focus-visible { outline: 2px solid var(--rood); outline-offset: 1px; }

/* Wat een pak moet zijn wil het voor deze regel meetellen. Staat boven de
   prijzen en niet eronder, want het is een keuze die je vóór het vergelijken
   maakt — niet iets wat je achteraf ontdekt.

   Het staat in een eigen omlijst vak met de accentkleur, en dat is een
   reparatie: als losse grijze knopjes tussen de prijzen las iedereen er
   overheen. Een vak met een rand eromheen zegt "hier valt iets te kiezen",
   waar een rijtje bleke tekst dat niet doet. */
.eisen {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin: 8px 0 10px;
    padding: 10px 12px;
    background: var(--veld);
    border: 1px solid var(--veldrand);
    border-radius: 8px;
}

.eisenkop {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--tekst);
}

.eis {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 13px 5px 10px;
    font-family: inherit;
    font-size: 0.88rem;
    color: var(--groen-donker);
    background: var(--wit);
    border: 1.5px solid var(--veldrand);
    border-radius: 20px;
    cursor: pointer;
}

/* Een vierkantje vóór het woord, zoals bij elk vinkje. Zonder dat leest een
   knopje als een etiket dat er nu eenmaal staat, en niet als iets waar je op
   kunt drukken. */
.eis::before {
    content: "";
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    background: var(--wit);
    border: 1.5px solid var(--veldrand);
    border-radius: 4px;
}

.eis:hover {
    border-color: var(--let-op);
    color: var(--let-op);
    background: #fdf6e6;
}

.eis:hover::before { border-color: var(--let-op); }
.eis:focus-visible { outline: 2px solid var(--groen); outline-offset: 2px; }

/* Aangevinkt is gevuld en niet alleen gekleurd: op een lijst met tien regels
   moet je in één oogopslag zien wáár je een eis hebt staan. */
.eis.aangevinkt {
    color: var(--wit);
    background: var(--let-op);
    border-color: var(--let-op);
    font-weight: 600;
}

/* Het vinkje zelf, als tekening en niet als letter: een haakje uit een
   lettertype valt per apparaat anders uit en op een telefoon soms helemaal weg.

   De kleur staat hier als getal en niet als naam, want een tekening kan niet bij
   de kleuren bovenaan dit bestand. Het is dezelfde amberkleur als --let-op. */
.eis.aangevinkt::before {
    background-color: var(--wit);
    border-color: var(--wit);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.5 3.5L13 4.5' fill='none' stroke='%238a5a00' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-size: 11px 11px;
    background-position: center;
    background-repeat: no-repeat;
}

/* De wisknop boven aan de boodschappenlijst.
   
   Hij was bescheiden, en dat bleek te bescheiden: hij viel weg voor het oog.
   Nu is hij een echte knop met een rode rand en een prullenbakje ervoor — te
   vinden zonder te zoeken, maar niet groen en niet gevuld, want de tweede druk
   is pas de onherroepelijke. */
.wisbalk {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin: 0 0 18px;
}

.wisknop {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--rood);
    background: var(--wit);
    border: 1.5px solid var(--rood);
    border-radius: 8px;
    cursor: pointer;
}

/* Een prullenbakje vóór het woord. Dezelfde tekening als op de regels, zodat
   "weggooien" er overal hetzelfde uitziet. */
.wisknop svg { width: 16px; height: 16px; fill: currentColor; }

.wisknop:hover { color: var(--wit); background: var(--rood); border-color: var(--rood); }
.wisknop:focus-visible { outline: 2px solid var(--rood); outline-offset: 1px; }

.wisknop.bevestig {
    color: var(--wit);
    background: var(--rood);
    border-color: var(--rood);
    font-weight: 600;
}

.wisknop.bevestig:hover { color: var(--wit); opacity: 0.9; }

.wisvraag { flex-basis: 100%; font-size: 0.9rem; color: var(--rood); }

/* -- de manieren om één regel te kopen ------------------------------------ */

/* Vijf kolommen die over alle regels heen uitlijnen: hoeveel pakken, welke
   winkel, wat het kost, wat dat per liter is, en hoeveel duurder dat is dan de
   voordeligste keuze. Uitlijnen is hier de hele functie van het scherm — je
   vergelijkt bedragen onder elkaar en niet zinnen naast elkaar.

   De laatste kolom is breed genoeg voor de knop "maak er 3 liter van", zodat
   een rode regel de rest niet verschuift. */
.mogelijkheden { margin-top: 2px; }

/* Vijf kolommen, met de prijs per liter of kilo als laatste en rechts
   uitgelijnd. Dat is de kolom waar het oog langsgaat als je winkels vergelijkt,
   en die hoort dus aan één kant te staan met alle andere informatie ervóór -
   hij stond op plek vier van vijf met de meerprijs erachter, en dan lees je hem
   elke regel opnieuw op een andere plek.

   Er stond eerst nog een zesde kolom achter met het woordje "Bekijk". Dat werkte
   niet: een winkel die geen link meelevert liet die kolom leeg, en dan schoof de
   prijs per kilo alsnog van regel tot regel. Nu is dat bedrag zélf de link. */
.mogelijkheid {
    display: grid;
    grid-template-columns: minmax(140px, auto) minmax(100px, 1fr) auto auto minmax(88px, auto);
    gap: 0 10px;
    align-items: baseline;
    padding: 5px 8px 5px 10px;
    border-top: 1px solid var(--lijn);
    border-left: 3px solid transparent;
}

/* Wat er echt niet bij past — het aanbiedingsblokje met de tekst van de winkel,
   de geldigheid, de regeltjes met "ook bij" — gaat op een eigen rij eronder en
   loopt over de volle breedte. */
.mogelijkheid > .aanbiedingmerk,
.mogelijkheid > .geldigheid,
.mogelijkheid > .ookvorm { grid-column: 1 / -1; justify-self: start; }

.mogelijkheid > .pereenheid { justify-self: end; }

/* Eén verpakkingsmaat, ingeklapt: "3 x 1 liter - 2 winkels - EUR 2,85 - 3,57".
   Dicht is dit één regel; open staan de winkels eronder. Dezelfde kolommen als
   een gewone pakregel, zodat het oog niet hoeft te verspringen. */
.maatgroep {
    border-top: 1px solid var(--lijn);
}

.maatgroep .mogelijkheid:first-of-type { border-top: 1px solid var(--lijn); }

.maatkop {
    display: grid;
    grid-template-columns: minmax(140px, auto) minmax(100px, 1fr) auto auto minmax(88px, auto);
    gap: 0 10px;
    align-items: baseline;
    padding: 5px 8px 5px 10px;
    border-left: 3px solid transparent;
    cursor: pointer;
    list-style: none;
}

/* Het driehoekje van de browser weg; er komt een eigen pijltje voor terug dat
   in beide richtingen even duidelijk is. */
.maatkop::-webkit-details-marker { display: none; }

/* Het pijltje is met opzet groot: het is de enige aanwijzing dat hier meer
   achter zit, en klein grijs pijltje van 0,8rem zag je domweg niet. De krappe
   regelhoogte houdt de regel even hoog als een gewone pakregel. */
.maatkop::after {
    content: '▾';
    grid-column: 5;
    justify-self: end;
    align-self: center;
    font-size: 2rem;
    line-height: 0.5;
    color: var(--grijs);
}

.maatgroep[open] > .maatkop::after { content: '▴'; }
.maatkop:hover { background: #f4f7f5; }
.maatkop:focus-visible { outline: 2px solid var(--groen); outline-offset: -2px; }

/* Openklappen laat de winkels zien; dan hoort de samenvatting een kop te zijn
   en geen keuze meer. */
.maatgroep[open] > .maatkop {
    background: #f4f7f5;
    font-weight: 600;
}

.maatkop .pakken { font-weight: inherit; }

/* Alles wat geen antwoord is op je vraag: andere maten, grotere verpakkingen,
   setjes, en de hoeveelheden waarop die wél zouden uitkomen. Bewust
   ondergeschikt aan de gewone regels — kleiner, grijs en zonder eigen randje —
   want het antwoord op je vraag staat erboven. Maar wél vindbaar: per liter is
   een groot pak soms echt voordeliger, en een misklik op een gekozen maat moet
   in één tik terug te draaien zijn. */
.anders,
.tips {
    border-top: 1px solid var(--lijn);
}

.anderssamenvatting,
.tipsamenvatting {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 5px 8px 5px 13px;
    cursor: pointer;
    list-style: none;
    font-size: 0.88rem;
    color: var(--grijs);
}

.anderssamenvatting::-webkit-details-marker,
.tipsamenvatting::-webkit-details-marker { display: none; }

/* Hetzelfde pijltje als bij een maatgroep, zodat het als dezelfde soort knop
   leest — alleen kleiner, want dit is de bijzaak. */
.anderssamenvatting::after,
.tipsamenvatting::after {
    content: '▾';
    margin-left: auto;
    font-size: 1.5rem;
    line-height: 0.5;
    color: var(--grijs);
}

.anders[open] > .anderssamenvatting::after,
.tips[open] > .tipsamenvatting::after { content: '▴'; }
.anderssamenvatting:hover,
.tipsamenvatting:hover { background: #f4f7f5; }
.anderssamenvatting:focus-visible,
.tipsamenvatting:focus-visible { outline: 2px solid var(--groen); outline-offset: -2px; }

.anders[open] > .anderssamenvatting,
.tips[open] > .tipsamenvatting {
    background: #f4f7f5;
    font-weight: 600;
}

/* De laagste literprijs onder wat wegvalt. Die staat erbij zodat je aan de
   samenvatting al ziet of uitklappen de moeite waard is. */
.anderssamenvatting .pereenheid,
.tipsamenvatting .pereenheid {
    font-variant-numeric: tabular-nums;
}

/* De knoppen zelf, uitgeklapt. Links uitgelijnd en niet rechts zoals vroeger:
   ze staan nu niet meer in de kolom achter een prijs maar op een eigen regel,
   en dan hoort de eerste knop onder het woord te beginnen. */
.tips .maakerkeuze {
    padding: 2px 8px 8px 13px;
    justify-content: flex-start;
}

/* De goedkoopste manier om deze regel bij één winkel te kopen. Niet alleen
   kleur: het groene randje links en het dikkere bedrag maken het ook zichtbaar
   zonder kleuren. */
.mogelijkheid.beste {
    background: #f2f9f4;
    border-left-color: var(--groen);
}

.mogelijkheid.beste .prijs { font-weight: 700; }

/* Deze verpakking kan de gevraagde hoeveelheid niet maken: twee liter uit
   pakken van anderhalve liter gaat niet.

   Gedempt, en met opzet níet rood. Dat een pak van zes liter geen antwoord is
   op een vraag van één liter is geen fout maar vanzelfsprekend, en een rode
   regel tussen de prijzen leest als een storing van Dealbot. Het is een aanbod:
   dit ligt er ook, en één tik erop maakt er de bijbehorende hoeveelheid van. */
.mogelijkheid.komtnietuit {
    border-left-color: var(--lijn);
    background: var(--achtergrond);
}

.mogelijkheid.komtnietuit .pakken,
.mogelijkheid.komtnietuit .winkel,
.mogelijkheid.komtnietuit .pereenheid { color: var(--grijs); }

/* -- de gekozen verpakking ------------------------------------------------ */

/* Elke pakregel is een keuze: klik erop en je zegt "dít pak neem ik mee". Het
   handje is de enige aanwijzing die daarvoor nodig is — een knop erbij zou een
   kolom kosten, en ruimte is op een telefoon het duurste wat er is. */
.mogelijkheid.kiesbaar { cursor: pointer; }
.mogelijkheid.kiesbaar:hover { background: #f4f7f5; }
.mogelijkheid.kiesbaar:focus-visible { outline: 2px solid var(--groen); outline-offset: -2px; }

/* De maat die je zelf hebt aangewezen. Een dikke groene rand links, want dit is
   een sterkere uitspraak dan "dit is de goedkoopste": jij hebt het gekozen. */
.mogelijkheid.gekozen,
.maatgroep.gekozen > .maatkop {
    background: #eef7f1;
    border-left-color: var(--groen);
    border-left-width: 5px;
}

/* Een maat die het niet geworden is. Hij blijft staan zodat je van gedachten
   kunt veranderen — een misklik op een telefoon mag nooit een doodlopende weg
   zijn — maar hij telt niet mee, en zo hoort hij er ook uit te zien. */
.mogelijkheid.buitenkeuze,
.maatgroep.buitenkeuze > .maatkop {
    opacity: 0.55;
}

/* De maat in een ingeklapte regel is zélf de knop waarmee je hem kiest. Hij
   moet er dus uitzien als tekst en tegelijk als iets waar je op kunt drukken:
   een stippellijn eronder, verder niets. */
.kiesknop {
    padding: 0;
    border: 0;
    border-bottom: 1px dotted var(--grijs);
    background: none;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.kiesknop:hover { border-bottom-color: var(--groen); color: var(--groen-donker); }
.kiesknop:focus-visible { outline: 2px solid var(--groen); outline-offset: 2px; }
.kiesknop.gekozen { border-bottom: 2px solid var(--groen); font-weight: 600; }

/* Wat je gekozen hebt, achter de naam van de boodschap: "Rundergehakt als
   2 × 250 g". Gewone tekst in hetzelfde lettertype als de naam — geen bolletje
   ernaast. Dat bolletje mocht niet krimpen en duwde de naam daardoor op een
   tweede regel; nu loopt het gewoon mee en past de kop weer op één regel.

   Het blijft de knop die de keuze loslaat, dus een stippellijn eronder: genoeg
   om te laten zien dat je erop kunt drukken, te weinig om ruimte te kosten. */
.gekozenmaat {
    padding: 0;
    border: 0;
    border-bottom: 1px dotted var(--groen);
    background: none;
    font: inherit;
    font-weight: 400;
    color: var(--groen-donker);
    cursor: pointer;
}

.gekozenmaat:hover { color: var(--groen); border-bottom-color: var(--groen-donker); }
.gekozenmaat:focus-visible { outline: 2px solid var(--groen); outline-offset: 2px; }

/* Hoeveel pakken je meeneemt en hoe groot die zijn: "2 x 1 liter", met een min
   en een plus eromheen waarmee je er een pak bij of af doet. Cijfers van
   gelijke breedte, anders dansen de maal-tekens onder elkaar. */
.pakken {
    display: flex;
    align-items: baseline;
    gap: 4px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Kleiner dan de teller bovenaan de regel: dit is een bijstelling binnen een
   keuze, geen hoofdknop. */
.pakknop {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    font-family: inherit;
    font-size: 1rem;
    line-height: 1;
    color: var(--tekst);
    background: var(--wit);
    border: 1px solid var(--lijn);
    border-radius: 6px;
    cursor: pointer;
}

.pakknop:hover:not(:disabled) { background: #e8f4ec; }
.pakknop:disabled { opacity: 0.3; cursor: default; }
.pakknop:focus-visible { outline: 2px solid var(--groen); outline-offset: -2px; }

.pakkental { min-width: 74px; text-align: center; }

/* Wat je meer krijgt dan je vroeg: "+50 gram" bij een pak van 300 als je om
   250 gram vroeg. Het pak doet gewoon mee, maar dit hoor je te zien. */
.pakken .extra {
    font-size: 0.85rem;
    color: var(--grijs);
}

.mogelijkheid .prijs { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Wat één zo'n pak kost, bij een verpakking die niet op jouw hoeveelheid
   uitkomt. Grijs en niet rood: dat een pak van zes liter niet op één liter
   uitkomt is geen storing maar vanzelfsprekend, en het staat er als aanbod —
   één tik erop maakt er de bijbehorende hoeveelheid van. */
.perpak {
    font-size: 0.9rem;
    color: var(--grijs);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* De naam van de winkel met het merk erachter, en daarachter waar dit pak niet
   vervangbaar door is. Ze staan in één cel zodat het bij elkaar hoort en toch
   op de prijsregel blijft; op een smal scherm mag het blokje eronder vallen. */
.mogelijkheid > .winkel {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 6px;
    min-width: 0;
}

/* De literprijs. Dit is de kolom waar het oog langs gaat, dus tabulaire cijfers
   en rechts uitgelijnd. */
.pereenheid {
    font-size: 0.9rem;
    color: var(--grijs);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.pereenheid.onbekend { font-style: italic; }

/* Datzelfde bedrag is de link naar het product bij de winkel. Een stippellijn
   eronder en verder niets: het moet als bedrag blijven lezen in een kolom vol
   bedragen, en tegelijk laten zien dat er iets achter zit. */
a.naarwinkel {
    color: var(--grijs);
    text-decoration: none;
    border-bottom: 1px dotted var(--grijs);
}

a.naarwinkel:hover { color: var(--groen-donker); border-bottom-color: var(--groen); }
a.naarwinkel:focus-visible { outline: 2px solid var(--groen); outline-offset: 2px; }

/* Hoeveel duurder per liter dan de voordeligste keuze van deze regel. Amber en
   niet rood: het is geen fout, het is wat het je kost om hier te kopen. */
.meerprijs {
    font-size: 0.9rem;
    color: var(--let-op);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* De knop die de hoeveelheid van de hele regel omzet naar iets wat hier wél
   uitkomt. Klein en in de accentkleur: het is een voorstel, geen waarschuwing.
   De app stelt voor, de gebruiker beslist. */
.maakerknop {
    padding: 2px 10px;
    font-family: inherit;
    font-size: 0.85rem;
    color: var(--groen-donker);
    background: var(--wit);
    border: 1px solid var(--groen);
    border-radius: 20px;
    cursor: pointer;
    white-space: nowrap;
}

/* Twee uitwegen naast elkaar: het pak eronder en het pak erboven. Ze mogen
   afbreken naar een tweede regel — op een telefoon passen "maak er 1,5 liter
   van" en "maak er 3 liter van" niet naast elkaar. */
.maakerkeuze {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: flex-end;
}

.maakerknop:hover { background: #e8f4ec; }
.maakerknop:focus-visible { outline: 2px solid var(--groen); outline-offset: 1px; }

.ontbreekt { color: var(--grijs); font-style: italic; font-size: 0.9rem; }

/* De winkels die deze regel niet kunnen leveren, in één zin eronder. Vroeger
   kreeg elke winkel zijn eigen regel; nu gaan de regels over verpakkingen, dus
   past dit er niet meer tussen — maar wég mag het niet, want een ontbrekende
   winkel is precies wat je wilt weten. */
.nietbij {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 2px 0 0;
    padding-left: 10px;
    font-size: 0.85rem;
    color: var(--grijs);
}

/* De uitklapregel met de andere verpakkingen hangt onder de boodschap en niet
   erin, dus hij heeft zijn eigen streepje boven nodig noch een inspringing. */
.lijstregel > .anders { border-top: 0; }

/* Waar dit pak niet vervangbaar door is: "lang houdbaar", "diepvries",
   "glutenvrij". Het krijgt een eigen omlijnd blokje en geen grijze bijzin,
   want dit is geen extra informatie maar een reden om een pak te laten staan. */
.mogelijkheid .eigenschappen {
    padding: 1px 8px;
    font-size: 0.8rem;
    color: var(--let-op);
    border: 1px solid var(--let-op);
    border-radius: 20px;
}

/* Wat er bij diezelfde winkel in dezelfde maat nog meer ligt: "De Zaanse Hoeve"
   naast "AH". Een eigen regeltje onder de prijs, ingesprongen, zodat te zien is
   dat het bij de regel erboven hoort. */
.ookvorm {
    margin-left: 2px;
    font-size: 0.85rem;
    color: var(--grijs);
}

a.ookvorm { text-decoration: underline; }

/* Iets klopt wel maar vraagt om oplettendheid: een aanbieding waarvoor je twee
   pakken moet meenemen. Een driehoekje ervoor, de amberkleur en een lichte
   achtergrond, zodat het niet wegvalt tussen de bedragen. */
.waarschuwing {
    flex-basis: 100%;
    padding: 3px 9px 3px 8px;
    font-size: 0.85rem;
    color: var(--let-op);
    background: #fdf6e6;
    border-left: 3px solid var(--let-op);
    border-radius: 0 4px 4px 0;
}

.waarschuwing::before { content: "⚠ "; }

/* Dit pak is deze week in de aanbieding. Een gevuld blokje in de accentkleur en
   niet alleen een omlijnd randje zoals bij de eigenschappen: dit is geen kenmerk
   van het product maar een reden om juist déze week juist naar déze winkel te
   gaan, en dat mag opvallen. De tekst van de winkel zelf staat erin, want
   "1+1 gratis" zegt meer dan "aanbieding". */
.aanbiedingmerk {
    padding: 1px 8px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--wit);
    background: var(--groen);
    border-radius: 20px;
}

/* Tot wanneer de aanbieding loopt. */
.geldigheid { font-size: 0.8rem; color: var(--grijs); }

/* Wat je bij deze winkel precies in je mandje legt. Het bedrag alleen zegt niet
   genoeg: drie liter melk kan hier drie pakken zijn en daar twee. */
.mandje { flex-basis: 100%; font-size: 0.85rem; color: var(--grijs); }

/* Waar haal je wat: de lijst verdeeld over de winkels. Staat bóven het rijtje
   met wat elke winkel apart zou kosten, want dit is het antwoord op de vraag
   waar je vandaag heen gaat; dat rijtje is de onderbouwing. */
.splitskop {
    margin: 0 0 12px;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--groen-donker);
}

.splitswinkels {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 8px;
}

/* Elke winkel een eigen kaartje. Naast elkaar als het past, want twee winkels
   naast elkaar lezen als één boodschappenrondje; onder elkaar zou het lijken
   alsof de tweede een naschrift is. */
.splitswinkel {
    flex: 1 1 260px;
    padding: 12px 16px;
    background: var(--wit);
    border-radius: 10px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.07);
    border-left: 3px solid var(--groen);
}

.splitswinkelkop {
    display: flex;
    gap: 12px;
    align-items: baseline;
    justify-content: space-between;
}

.splitswinkelkop .winkel { font-weight: 700; }
.splitswinkelkop .prijs { font-size: 1.05rem; }

/* Wat deze rit oplevert. Alleen bij de winkels ná de eerste: daar is het een
   winkel erbij, en die moet zichzelf terugverdienen. */
.opbrengst {
    display: block;
    margin-top: 2px;
    font-size: 0.85rem;
    color: var(--groen-donker);
}

.splitsregels {
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
}

.splitsregels li {
    display: flex;
    gap: 12px;
    justify-content: space-between;
    padding: 3px 0;
    font-size: 0.9rem;
    border-top: 1px solid var(--lijn);
}

.splitsregels li:first-child { border-top: none; }
.splitsregels .wat { color: var(--grijs); }
.splitsregels .prijs { white-space: nowrap; }

.splitswinkel .waarschuwing { margin-top: 8px; }

.totalen {
    margin-bottom: 8px;
    background: var(--wit);
    border-radius: 10px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.07);
    overflow: hidden;
}

.totaalregel {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    align-items: baseline;
    padding: 12px 16px;
    border-top: 1px solid var(--lijn);
    border-left: 3px solid transparent;
}

.totaalregel:first-child { border-top: none; }

.totaalregel.beste {
    background: #f2f9f4;
    border-left-color: var(--groen);
}

.totaalregel.beste .prijs { font-weight: 700; }

/* Een winkel die iets mist is per definitie goedkoper, want hij verkoopt je
   minder. Het bedrag blijft staan maar wordt gedempt, zodat het niet als
   winnaar leest. */
.totaalregel.incompleet .prijs { color: var(--grijs); }

.dekking { flex-basis: 100%; font-size: 0.85rem; color: var(--grijs); }
.totaalregel.beste .dekking { color: var(--groen-donker); }

/* Op een telefoon passen vijf kolommen niet naast elkaar. Dan wordt het twee
   rijen: pakken en winkel bovenaan, de drie bedragen eronder — en die blijven
   onderling wél uitlijnen, want dat is waar de kolommen voor waren. */
@media (max-width: 620px) {
    .mogelijkheid {
        grid-template-columns: auto 1fr auto;
    }
    .mogelijkheid > .pakken { grid-column: 1 / -1; }
    .totaalregel .winkel { min-width: 90px; }
}


/* -- het versiestempel onderaan elke pagina ------------------------------- */

/* Klein, grijs en helemaal onderaan: je hoeft het nooit te lezen, behalve als
   iets nét gebouwd is en er niet lijkt te staan. Dan zegt deze regel of je
   browser de nieuwe bestanden al heeft. */
.versiestempel {
    margin: 32px 0 16px;
    padding: 0 20px;
    font-size: 0.75rem;
    color: var(--grijs);
    text-align: center;
}