/* Meesterbakker Uljee, Rotterdam-Zuid — conceptpagina.
   Het zwart is hun eigen #212322 en het oranje staat al in hun stylesheet; het gedempte
   goud uit het logo laat ik met rust, want dat is de kleur van het bakkertje.
   De kop blijft wit: hun logo is een zwarte penseelletter met een goudkleurig figuur,
   en dat omkeren maakt van het bakkertje een blauw poppetje.

   Het handelsmerk van deze pagina is de bakkersklok. "Bestellingen voor morgen kunnen
   vandaag uiterlijk tot 16:00 uur geplaatst worden" is hun eigen regel, maar die staat nu
   onder in de voettekst van een webshop in een venster. Hier telt hij af, bovenaan. */

:root {
  --zwart:  #212322;   /* hun eigen balkkleur */
  --oranje: #FF9900;   /* staat al in hun stylesheet */
  --diep:   #A85A00;   /* hetzelfde oranje, donker genoeg voor kleine letters op wit */
  --korst:  #7A4A21;   /* de kleur van een roggekorst */
  --bloem:  #F4EFE6;   /* bloem op het werkblad */
  --wit:    #FFFFFF;
  --grijs:  #21232299;
  --lijn:   #2123221f;
  --lijn-donker: #FFFFFF26;
  --max: 1180px;
  --soepel: cubic-bezier(.22, .61, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--wit); color: var(--zwart);
  font: 400 clamp(1rem, .97rem + .18vw, 1.08rem)/1.6 Archivo, system-ui, sans-serif;
}
h1, h2, h3 {
  font-family: Vollkorn, Georgia, serif; font-weight: 700; margin: 0;
  line-height: 1.14; letter-spacing: -0.005em;
  overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto;
}
h1 { font-size: clamp(2.3rem, 1.5rem + 3vw, 3.9rem); }
h2 { font-size: clamp(1.65rem, 1.2rem + 2vw, 2.7rem); }
h3 { font-size: clamp(1.1rem, 1rem + .55vw, 1.35rem); line-height: 1.25; }
p { margin: 0 0 1rem; max-width: 62ch; }
h1 + p, h2 + p { margin-top: 1rem; }
a { color: inherit; }
/* De breedte- en hoogte-attributen op een img zijn presentatie-hints. Zet je alleen een
   aspect-ratio in css, dan blijft height="768" gewoon staan en wordt elke foto 768 pixels
   hoog uitgerekt. height:auto haalt die hint weg; de verhouding doet dan het werk. */
img { max-width: 100%; height: auto; display: block; }

.binnen { width: min(100% - 2.5rem, var(--max)); margin-inline: auto; }
.overslaan { position: absolute; left: -9999px; }
.overslaan:focus { left: 1rem; top: 1rem; z-index: 99; background: var(--oranje); color: var(--zwart); padding: .6rem 1rem; border-radius: 4px; }
:focus-visible { outline: 3px solid var(--diep); outline-offset: 3px; }
.zwart :focus-visible, .voet :focus-visible, .klokbalk :focus-visible { outline-color: var(--oranje); }

/* ---------- de bakkersklok: het handelsmerk ---------- */
.klokbalk { background: var(--zwart); color: var(--wit); }
.klokbalk .binnen { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .9rem; padding: .7rem 0; font-size: .95rem; }
.klokbalk .tijd {
  font-family: Archivo, sans-serif; font-weight: 700; font-variant-numeric: tabular-nums;
  font-size: 1.25rem; color: var(--oranje); letter-spacing: .01em;
}
.klokbalk .erna { color: #FFFFFFb0; }
.klokbalk a { color: var(--oranje); }

/* ---------- kop ---------- */
.balk { background: var(--wit); position: sticky; top: 0; z-index: 20; border-bottom: 1px solid var(--lijn); }
.balk .bovenrij { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.3rem; padding: .75rem 0; }
.merk { display: block; line-height: 0; }
.merk img { width: clamp(132px, 12vw, 176px); height: auto; }
.balk .knoppenrij { margin-left: auto; display: flex; align-items: center; gap: .5rem; flex: none; }
.menu { display: flex; flex-wrap: wrap; gap: .2rem 1.05rem; flex: 1 1 auto; }
.menu a {
  color: var(--zwart); text-decoration: none; font-size: .92rem; font-weight: 600; white-space: nowrap;
  padding: .25rem 0; border-bottom: 2px solid transparent; transition: color .2s, border-color .2s;
}
.menu a:hover, .menu a[aria-current="page"] { color: var(--diep); border-bottom-color: var(--oranje); }

/* account en winkelwagen: de twee dingen die je op een webshop echt doet */
.rondje {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  border: 1.5px solid var(--lijn); color: var(--zwart); position: relative;
  transition: background .2s, border-color .2s, transform .2s var(--soepel);
}
.rondje:hover { background: var(--bloem); border-color: var(--diep); transform: translateY(-2px); }
.mandje .teller {
  position: absolute; top: -5px; right: -5px; min-width: 20px; height: 20px; padding: 0 5px;
  background: var(--oranje); color: var(--zwart); border-radius: 999px;
  font-size: .74rem; font-weight: 700; display: grid; place-items: center;
  font-variant-numeric: tabular-nums;
}
.inmandje {
  display: inline-flex; align-items: center; gap: .3rem; cursor: pointer; white-space: nowrap;
  background: var(--wit); color: var(--zwart); border: 1.5px solid var(--lijn); border-radius: 999px;
  font: inherit; font-size: .84rem; font-weight: 600; padding: .3rem .75rem .3rem .55rem;
  transition: background .2s, color .2s, border-color .2s, transform .2s var(--soepel);
}
.inmandje .teken { font-size: 1.05em; line-height: 1; color: var(--diep); transition: color .2s; }
.inmandje:hover { background: var(--zwart); color: var(--wit); border-color: var(--zwart); transform: translateY(-1px); }
.inmandje:hover .teken { color: var(--oranje); }
.inmandje.gelukt { background: #2F8F4E; border-color: #2F8F4E; color: #fff; }
.inmandje.gelukt .teken { color: #fff; }
.inmandje.klein { padding: .22rem .5rem; font-size: .8rem; }
.matenlijst li { align-items: center; }

.knop {
  display: inline-block; background: var(--oranje); color: var(--zwart); text-decoration: none;
  font-family: Archivo, sans-serif; font-weight: 700; font-size: .97rem;
  padding: .6rem 1.2rem; border: 2px solid var(--oranje); border-radius: 3px;
  transition: background .22s var(--soepel), color .22s var(--soepel), transform .22s var(--soepel);
}
.knop:hover { background: var(--zwart); border-color: var(--zwart); color: var(--wit); transform: translateY(-2px); }
.knop.leeg { background: transparent; border-color: var(--zwart); color: var(--zwart); }
.knop.leeg:hover { background: var(--zwart); color: var(--wit); }
.zwart .knop.leeg, .voet .knop.leeg { border-color: var(--wit); color: var(--wit); }
.zwart .knop.leeg:hover, .voet .knop.leeg:hover { background: var(--wit); color: var(--zwart); }
.knoppen { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.4rem; }

/* Een vaste ondergrens in minmax() is groter dan het scherm zodra de telefoon smal genoeg
   is; dan duwt de kolom de hele pagina breder. min(...,100%) haalt die bodem weg. */

/* ---------- vlakken ---------- */
.vlak { padding: clamp(2.4rem, 1.8rem + 3vw, 4.2rem) 0; }
.vlak.zwart { background: var(--zwart); color: var(--wit); }
.vlak.zwart p { color: #FFFFFFcc; }
.vlak.zwart h2, .vlak.zwart h3 { color: var(--wit); }
.vlak.bloem { background: var(--bloem); }
.vlak + .vlak:not(.zwart):not(.bloem) { border-top: 1px solid var(--lijn); }
.kop { font-family: Archivo, sans-serif; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; font-size: .76rem; color: var(--diep); margin: 0 0 .7rem; }
.zwart .kop, .voet .kop { color: var(--oranje); }
.paar { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr)); gap: clamp(1.6rem, 1rem + 3vw, 3rem); align-items: start; }
.paar > * { min-width: 0; }
.paar img { border-radius: 4px; }
.paar .beeldzuil img { max-height: 26rem; object-fit: cover; width: 100%; }
/* Staat er naast een korte tekst een hoge foto, dan hangt de witruimte onderaan.
   Midden uitlijnen verdeelt hem over boven en onder, en dat oogt rustiger. */
.paar.gelijk { align-items: center; }

/* ---------- winkelstrook ---------- */
.winkelstrook { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: .1rem 1.8rem; margin-top: 1.4rem; }
.winkelregel { display: flex; align-items: baseline; gap: .5rem; padding: .5rem 0; border-bottom: 1px solid var(--lijn-donker); font-size: .95rem; }
.stip { width: 9px; height: 9px; border-radius: 50%; background: #7d7d7d; flex: none; align-self: center; }
.stip.open { background: #35B45B; }
.winkelregel .waar { font-weight: 600; }
.winkelregel .stand { margin-left: auto; color: #FFFFFFa8; font-size: .87rem; text-align: right; }
.vlak:not(.zwart) .winkelregel { border-color: var(--lijn); }
.vlak:not(.zwart) .winkelregel .stand { color: var(--grijs); }

/* ---------- producten ---------- */
.raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(214px, 100%), 1fr)); gap: 1.3rem; margin-top: 1.6rem; }
.kaart {
  border: 1px solid var(--lijn); border-radius: 4px; overflow: hidden; background: var(--wit);
  display: flex; flex-direction: column; transition: transform .28s var(--soepel), border-color .28s var(--soepel);
}
.kaart:hover { transform: translateY(-4px); border-color: var(--diep); }
.kaart .beeld { aspect-ratio: 4/3; background: var(--bloem); position: relative; }
.kaart .beeld img { width: 100%; height: 100%; object-fit: cover; }
.kaart .geenbeeld {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .35rem;
  height: 100%; color: var(--korst); background: repeating-linear-gradient(-45deg, #F4EFE6, #F4EFE6 9px, #EFE8DB 9px, #EFE8DB 18px);
}
.kaart .geenbeeld svg { width: 30px; height: 30px; opacity: .55; }
.kaart .geenbeeld span { font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; opacity: .6; }
.kaart .tekstvak { padding: .85rem .95rem 1rem; display: flex; flex-direction: column; gap: .4rem; flex: 1; }
/* Productnamen komen uit hun bestand, dus daar kan ik geen afbreekteken in zetten.
   Iets kleiner in de kaart scheelt: "Aardbeientaartje" past dan wel op een telefoon. */
.kaart h3 { font-size: clamp(.94rem, .88rem + .3vw, 1.06rem); line-height: 1.22; }
.kaart .zin { font-size: .87rem; color: var(--grijs); line-height: 1.45; margin: 0; }
.kaart .zin.soort { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--korst); opacity: .7; }
/* Prijs links, knop rechts, allebei op één regel. Eerder botsten een oranje prijskaartje
   en een zwarte knop met elkaar, brak "In mandje" over twee regels en stond er ook nog een
   productnummer tussen. Eén luid element per kaart is genoeg: dat is de prijs. */
.kaart .onder {
  margin-top: auto; padding-top: .7rem; display: flex; align-items: center;
  justify-content: space-between; gap: .5rem; flex-wrap: nowrap;
}
/* het toonbankkaartje: prijs in een strookje, zoals de kaartjes in hun vitrine */
.prijs {
  font-family: Archivo, sans-serif; font-weight: 700; font-variant-numeric: tabular-nums;
  background: var(--oranje); color: var(--zwart); padding: .22rem .55rem; border-radius: 2px;
  font-size: 1rem; white-space: nowrap;
}
.prijs .eur { font-weight: 400; margin-right: .12em; }
.vanaf { font-size: .8rem; color: var(--grijs); }
.nummer { font-size: .76rem; color: var(--grijs); font-variant-numeric: tabular-nums; }

.filters { display: flex; flex-wrap: wrap; gap: .45rem; margin: 1.2rem 0 .4rem; }
.filters input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.filters label { cursor: pointer; }
.filters span {
  display: inline-block; font-size: .88rem; font-weight: 600; padding: .32rem .8rem;
  border: 1.5px solid var(--zwart); border-radius: 999px; transition: background .18s, color .18s, transform .18s var(--soepel);
}
.filters label:hover span { transform: translateY(-2px); }
.filters input:checked + span { background: var(--zwart); color: var(--wit); }
.filters input:focus-visible + span { outline: 3px solid var(--diep); outline-offset: 2px; }
.zoekrij { display: block; margin: .8rem 0 0; }
.zoekrij input { font: inherit; padding: .5rem .9rem; border: 1.5px solid var(--zwart); border-radius: 999px; width: min(100%, 22rem); }
.telling { color: var(--grijs); font-size: .92rem; margin: .9rem 0 0; }

/* maten van de taarten */
details.maten { margin-top: .55rem; border-top: 1px solid var(--lijn); padding-top: .5rem; }
details.maten summary {
  cursor: pointer; font-size: .84rem; color: var(--diep); font-weight: 600;
  list-style: none; display: flex; align-items: center; gap: .35rem;
}
details.maten summary::-webkit-details-marker { display: none; }
details.maten summary::before { content: "+"; font-weight: 700; width: 1em; }
details.maten[open] summary::before { content: "‘2"; }
details.maten summary:hover { text-decoration: underline; }
.matenlijst { list-style: none; margin: .5rem 0 0; padding: 0; }
.matenlijst li { display: flex; justify-content: space-between; gap: 1rem; padding: .35rem 0; border-bottom: 1px solid var(--lijn); font-size: .92rem; }
.matenlijst li span:last-child { font-variant-numeric: tabular-nums; font-weight: 600; }

.lijstje { list-style: none; margin: 0; padding: 0; }
.lijstje li { padding: .5rem 0; border-bottom: 1px solid var(--lijn); }
.vlak.zwart .lijstje li { border-color: var(--lijn-donker); }
.tabel { width: 100%; border-collapse: collapse; margin-top: 1.2rem; font-size: .95rem; }
.tabel th, .tabel td { text-align: left; padding: .6rem .5rem; border-bottom: 1px solid var(--lijn); vertical-align: top; }
.tabel th { font-family: Archivo, sans-serif; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--grijs); }
.tabel .datum { white-space: nowrap; color: var(--grijs); font-variant-numeric: tabular-nums; }
/* Vier kolommen passen niet op een telefoon. Onder de 620 wordt elke vacature een blokje
   met de kolomnaam ervoor, zodat je niet zijwaarts hoeft te schuiven. */
@media (max-width: 620px) {
  .tabel, .tabel tbody, .tabel tr, .tabel td { display: block; width: 100%; }
  .tabel thead { position: absolute; left: -9999px; }
  .tabel tr { padding: .9rem 0; border-bottom: 1px solid var(--lijn); }
  .tabel td { border: 0; padding: .12rem 0; }
  .tabel td::before { content: attr(data-kop) ": "; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--grijs); }
  .tabel td.datum::before { content: "Sinds: "; }
}

.week { list-style: none; margin: 0; padding: 0; }
.week li { display: flex; justify-content: space-between; gap: 1rem; padding: .42rem 0; border-bottom: 1px solid var(--lijn); font-size: .95rem; }
.week li.dicht { color: var(--grijs); }
.week li.vandaag { font-weight: 700; color: var(--diep); }
.week .dag { font-weight: 600; }

.citaat { border-left: 3px solid var(--oranje); padding-left: 1.2rem; margin: 1.6rem 0; }
.citaat p { font-family: Vollkorn, Georgia, serif; font-size: clamp(1.15rem, 1rem + .9vw, 1.6rem); line-height: 1.35; margin: 0; }
.jaartal { font-family: Vollkorn, Georgia, serif; font-weight: 700; font-size: 2.6rem; color: var(--oranje); line-height: 1; }
.tijdlijn { list-style: none; margin: 1.6rem 0 0; padding: 0; display: grid; gap: 1.4rem; }
/* De tijdlijn over de volle breedte in kolommen: naast een lange lap tekst eindigde hij
   veel te vroeg en bleef er een gat van meer dan duizend pixels onderaan staan. */
.tijdlijn-breed { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 1.6rem 2.4rem; }
.tijdlijn-breed li { border-top: 2px solid var(--diep); padding-top: .7rem; grid-template-columns: 1fr; gap: .25rem; }
.tijdlijn li { display: grid; grid-template-columns: 7.2rem 1fr; gap: 1.2rem; align-items: baseline; }
.tijdlijn b { font-family: Vollkorn, Georgia, serif; font-size: 1.4rem; color: var(--diep); white-space: nowrap; }
.vlak.zwart .tijdlijn b { color: var(--oranje); }

/* Zes uitgelichte producten in drie kolommen: vijf naast elkaar met een eenzame zesde
   eronder oogde als een fout. Grotere kaarten laten de foto's ook beter tot hun recht komen. */
#uitgelicht { grid-template-columns: repeat(auto-fill, minmax(min(310px, 100%), 1fr)); }
@media (max-width: 560px) { #uitgelicht { grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr)); } }

.fotorij { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); gap: 1rem; margin-top: 1.6rem; }
.fotorij img { aspect-ratio: 4/3; object-fit: cover; border-radius: 4px; }

/* Een zwart vlak dat direct overgaat in de zwarte voet werd één groot donker blok.
   Een haarlijn zet er een grens tussen. */
.voet { background: var(--zwart); color: var(--wit); padding: 2.6rem 0 2rem; font-size: .93rem; border-top: 1px solid var(--lijn-donker); }
.voet a { color: var(--oranje); }
.voetgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); gap: 1.8rem; margin-bottom: 1.6rem; }
.voet .klein { color: #FFFFFF99; font-size: .82rem; max-width: 82ch; }
.voet .merk img { width: 176px; margin-bottom: .9rem; background: var(--wit); padding: .5rem .7rem; border-radius: 3px; }

.pagina-kop { padding: clamp(2.2rem, 1.8rem + 2.4vw, 3.4rem) 0 1.2rem; }
.pagina-kop p { color: var(--grijs); max-width: 60ch; }

/* ---------- beweging ---------- */
@media (prefers-reduced-motion: no-preference) {
  .onthul { opacity: 0; transform: translateY(20px); }
  .onthul.zichtbaar {
    opacity: 1; transform: none;
    transition: opacity .7s var(--soepel), transform .7s var(--soepel);
    transition-delay: var(--wacht, 0ms);
  }
}

@media (max-width: 880px) {
  .balk { position: static; }
  .balk .bovenrij { padding: .7rem 0; }
  .merk img { width: 138px; }
  .balk .knoppenrij { gap: .5rem; }
  .menu .binnen { gap: .1rem 1.1rem; padding: .5rem 0; }
  .menu a { font-size: .84rem; }
  .klokbalk .binnen { font-size: .9rem; }
}
@media (max-width: 560px) {
  .raster { grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr)); gap: .9rem; }
  .kaart .tekstvak { padding: .7rem .75rem .8rem; }
  .tijdlijn li { grid-template-columns: 1fr; gap: .2rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .001ms !important; animation-duration: .001ms !important; }
}
@media print {
  .balk, .menu, .klokbalk, .filters, .zoekrij, .knoppen { display: none !important; }
  .onthul { opacity: 1 !important; transform: none !important; }
  .vlak.zwart, .voet { background: #fff !important; color: #000 !important; }
  .vlak.zwart p, .voet p { color: #222 !important; }
  .prijs { background: none !important; border: 1px solid #999; }
  .kaart { break-inside: avoid; }
}

/* ---------- bovenbalk, sociale kanalen en de nieuwe blokken ---------- */

.sociaal { display: flex; gap: .5rem; margin-top: 1rem; }
.sociaal a {
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--lijn-donker); color: var(--wit);
  transition: background .2s, color .2s, transform .2s var(--soepel);
}
.sociaal a:hover { background: var(--oranje); color: var(--zwart); border-color: var(--oranje); transform: translateY(-2px); }

.berichten li { display: grid; grid-template-columns: 7rem 1fr; gap: 1.2rem; align-items: baseline; padding: .9rem 0; }
.berichten .datum { color: var(--diep); font-variant-numeric: tabular-nums; font-weight: 600; font-size: .9rem; }
@media (max-width: 560px) { .berichten li { grid-template-columns: 1fr; gap: .2rem; } }

.brooddagje {
  font-size: .84rem; font-weight: 600; color: var(--zwart); background: var(--bloem);
  border-left: 3px solid var(--oranje); padding: .4rem .6rem; margin: .2rem 0 .4rem;
}

details.vraag { border-top: 1px solid var(--lijn); padding: .9rem 0; }
details.vraag summary {
  cursor: pointer; font-family: Vollkorn, Georgia, serif; font-weight: 700; font-size: 1.08rem;
  list-style: none; display: flex; gap: .6rem; align-items: baseline;
}
details.vraag summary::-webkit-details-marker { display: none; }
details.vraag summary::before { content: "+"; color: var(--diep); font-family: Archivo, sans-serif; }
details.vraag[open] summary::before { content: "‘2"; }
details.vraag p { margin: .6rem 0 0; color: var(--grijs); }

/* ---------- winkelwagen en account ---------- */
.afreken { border: 1px solid var(--lijn); border-radius: 4px; padding: 1.2rem; background: var(--bloem); }
.veld { display: block; margin: .9rem 0; }
.veld span { display: block; font-size: .84rem; font-weight: 600; margin-bottom: .3rem; }
.veld input, .veld select {
  font: inherit; width: 100%; padding: .55rem .7rem; border: 1.5px solid var(--lijn);
  border-radius: 3px; background: var(--wit);
}
.veld input:focus-visible, .veld select:focus-visible { border-color: var(--diep); }
.totaalregel {
  display: flex; justify-content: space-between; align-items: baseline;
  border-top: 2px solid var(--zwart); margin-top: 1.1rem; padding-top: .7rem;
  font-family: Vollkorn, Georgia, serif; font-weight: 700; font-size: 1.35rem;
  font-variant-numeric: tabular-nums;
}
.mandregel {
  display: grid; grid-template-columns: 78px 1fr auto auto; gap: 1rem; align-items: center;
  padding: .9rem 0; border-bottom: 1px solid var(--lijn);
}
.mandbeeld { aspect-ratio: 4/3; background: var(--bloem); border-radius: 3px; overflow: hidden; }
.mandbeeld img { width: 100%; height: 100%; object-fit: cover; }
.mandtekst { display: flex; flex-direction: column; gap: .12rem; min-width: 0; }
.mandprijs { font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; }
.aantalknoppen { display: flex; align-items: center; gap: .1rem; border: 1.5px solid var(--lijn); border-radius: 999px; }
.aantalknoppen button {
  width: 30px; height: 30px; border: 0; background: none; cursor: pointer; font: inherit;
  font-size: 1.05rem; line-height: 1; border-radius: 50%; color: var(--zwart);
}
.aantalknoppen button:hover { background: var(--oranje); }
.aantalknoppen span { min-width: 1.6rem; text-align: center; font-variant-numeric: tabular-nums; font-weight: 600; }
@media (max-width: 560px) {
  .mandregel { grid-template-columns: 56px 1fr auto; column-gap: .7rem; row-gap: .5rem; }
  .mandprijs { grid-column: 3; grid-row: 1; }
  .aantalknoppen { grid-column: 2 / -1; justify-self: start; }
}
/* op een heel smal scherm past zelfs dat niet meer naast elkaar */
@media (max-width: 380px) {
  .mandregel { grid-template-columns: 1fr auto; }
  .mandbeeld { display: none; }
  .aantalknoppen button { width: 28px; height: 28px; }
}

/* Twee vaste kolommen in een inline stijl slaan op een telefoon de pagina uit elkaar.
   Boven de 860 naast elkaar, daaronder gewoon onder elkaar. */
.paar.mandraster { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 861px) { .paar.mandraster { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); } }