/* ==========================================================
   BOERDICHTBIJ — app-stijl
   ==========================================================
   Zelfde palet en letters als de landingspagina, zodat de app
   niet voelt als een andere website. Warm, rustig, veel ruimte.
   Telefoon eerst — de meeste mensen bestellen op de bank.
   ========================================================== */

:root{
  --papier:      #FBF7EF;
  --zand:        #F3EDE0;
  --inkt:        #1F2A19;
  --inkt-zacht:  #4E5A46;
  --weide:       #3E5C34;
  --weide-diep:  #2C4325;
  --weide-licht: #6E8C5A;
  --gras:        #86A96C;
  --koolzaad:    #E4A72B;
  --koolzaad-l:  #F5D68A;
  --aarde:       #8A6A4B;
  --lijn:        #E2D9C6;
  --rood:        #A3402F;

  --straal: 16px;
  --straal-klein: 10px;
  --marge:  clamp(20px, 5vw, 40px);
  --breed:  1120px;
  --smal:   680px;

  --schaduw: 0 1px 2px rgba(31,42,25,.05), 0 12px 30px -12px rgba(31,42,25,.16);
  --schaduw-hoog: 0 2px 4px rgba(31,42,25,.06), 0 22px 44px -16px rgba(31,42,25,.26);
}

*,*::before,*::after{ box-sizing:border-box; }

body{
  margin:0;
  background:var(--papier);
  color:var(--inkt);
  font-family:'Karla','Segoe UI',system-ui,sans-serif;
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{
  font-family:'Fraunces',Georgia,serif;
  font-weight:600;
  line-height:1.2;
  margin:0 0 .5em;
}
h1{ font-size:clamp(28px,6vw,40px); }
h2{ font-size:clamp(22px,4vw,28px); }

/* --- Indeling --- */

.omhulsel{
  max-width:var(--smal);
  margin:0 auto;
  padding:var(--marge);
}

.balk{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px var(--marge);
  background:var(--papier);
  border-bottom:1px solid var(--lijn);
  position:sticky;
  top:0;
  z-index:10;
}
.balk__merk{
  display:flex;
  align-items:center;
  gap:10px;
  font-family:'Fraunces',Georgia,serif;
  font-size:19px;
  font-weight:600;
  color:var(--inkt);
  text-decoration:none;
}
/* Het logo mag stevig staan: het is een schuur met een zon, en op 32 pixels
   zie je daar niets meer van. De hoogte van de balk groeit mee. */
.balk__merk img{ width:68px; height:68px; display:block; }
.balk__merk{ font-size:23px; }

@media (max-width:479px){
  .balk__merk img{ width:56px; height:56px; }
  .balk__merk{ font-size:20px; }
}

/* --- Kaart --- */

.kaart{
  background:#fff;
  border:1px solid var(--lijn);
  border-radius:var(--straal);
  padding:clamp(20px,4vw,28px);
  box-shadow:var(--schaduw);
  margin-bottom:20px;
}

/* --- Knoppen — royaal, want ze moeten met een duim raak te tikken zijn --- */

.knop{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:52px;
  padding:14px 26px;
  border:none;
  border-radius:var(--straal-klein);
  background:var(--weide);
  color:var(--papier);
  font:inherit;
  font-weight:700;
  cursor:pointer;
  text-decoration:none;
  transition:background .15s ease, transform .05s ease;
}
.knop:hover{ background:var(--weide-diep); }
.knop:active{ transform:translateY(1px); }
.knop:focus-visible{ outline:3px solid var(--koolzaad); outline-offset:2px; }
.knop--zacht{ background:var(--zand); color:var(--inkt); }
.knop--zacht:hover{ background:var(--lijn); }

/* --- Statusregel: laat zien of de app de database bereikt --- */

.status{
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:16px 18px;
  border-radius:var(--straal-klein);
  background:var(--zand);
  border:1px solid var(--lijn);
  margin-bottom:16px;
}
.status__stip{
  width:12px; height:12px;
  border-radius:50%;
  background:var(--koolzaad);
  flex:none;
  margin-top:7px;
}
.status--goed .status__stip{ background:var(--gras); }
.status--fout .status__stip{ background:var(--rood); }
.status--fout{ background:#F7EAE7; border-color:#E5C9C3; }
.status__tekst{ margin:0; }
.status__tekst strong{ display:block; }
.status__tekst small{ color:var(--inkt-zacht); }

.stil{ color:var(--inkt-zacht); font-size:15px; }

.lijst{ margin:0; padding-left:1.2em; }
.lijst li{ margin-bottom:.4em; }

code{
  font-family:ui-monospace,'Cascadia Mono',Consolas,monospace;
  font-size:.9em;
  background:var(--zand);
  padding:2px 6px;
  border-radius:6px;
}

.voet{
  padding:24px var(--marge) 40px;
  text-align:center;
  color:var(--inkt-zacht);
  font-size:14px;
}

/* ==========================================================
   Formulieren
   ==========================================================
   Grote velden en grote knoppen. Een oma van 70 moet dit op
   haar telefoon kunnen invullen zonder te missen.
   ========================================================== */

.veld{ display:block; margin-bottom:20px; }

.veld__naam{
  display:block;
  margin-bottom:7px;
  font-weight:700;
  font-size:16px;
}
.veld__erbij{ font-weight:400; color:var(--inkt-zacht); }

.veld input{
  display:block;
  width:100%;
  min-height:52px;
  padding:13px 16px;
  border:1.5px solid var(--lijn);
  border-radius:var(--straal-klein);
  background:var(--papier);
  color:var(--inkt);
  font:inherit;
  /* 17px of groter, anders zoomt iPhone in bij het aantikken. */
  font-size:17px;
}
.veld input:focus{
  outline:none;
  border-color:var(--weide-licht);
  box-shadow:0 0 0 3px rgba(110,140,90,.22);
}
.veld input::placeholder{ color:#A8A192; }

form .knop{ width:100%; }

/* --- Tekstknop: ziet eruit als een link, is een knop --- */

.tekstknop{
  border:none;
  background:none;
  padding:6px 4px;
  font:inherit;
  font-weight:700;
  color:var(--weide);
  text-decoration:underline;
  text-underline-offset:3px;
  cursor:pointer;
}
.tekstknop:hover{ color:var(--weide-diep); }
.tekstknop:focus-visible{ outline:3px solid var(--koolzaad); outline-offset:2px; border-radius:4px; }

.midden{ text-align:center; }

/* --- Meldingen --- */

.melding{
  padding:14px 18px;
  border-radius:var(--straal-klein);
  border:1px solid var(--lijn);
  background:var(--zand);
  margin:0 0 20px;
}
.melding--fout{ background:#F7EAE7; border-color:#E5C9C3; color:#7A2E20; }
.melding--goed{ background:#EDF3E7; border-color:#CFE0C1; color:#31501F; }

/* --- Gegevenslijstje --- */

.gegevens{ margin:0; }
.gegevens dt{
  font-size:15px;
  color:var(--inkt-zacht);
  margin-top:14px;
}
.gegevens dt:first-child{ margin-top:0; }
.gegevens dd{ margin:2px 0 0; font-weight:700; }

[hidden]{ display:none !important; }

/* ==========================================================
   Meer formulier-onderdelen
   ========================================================== */

.veld textarea,
.veld select{
  display:block;
  width:100%;
  padding:13px 16px;
  border:1.5px solid var(--lijn);
  border-radius:var(--straal-klein);
  background:var(--papier);
  color:var(--inkt);
  font:inherit;
  font-size:17px;
}
.veld textarea{ min-height:110px; resize:vertical; line-height:1.5; }
.veld select{ min-height:52px; }
.veld textarea:focus,
.veld select:focus{
  outline:none;
  border-color:var(--weide-licht);
  box-shadow:0 0 0 3px rgba(110,140,90,.22);
}

.veld input[type=file]{
  padding:12px;
  background:var(--zand);
  border-style:dashed;
  font-size:15px;
}

/* Twee velden naast elkaar, maar op een telefoon onder elkaar. */
.veldpaar{ display:flex; gap:14px; flex-wrap:wrap; }
.veldpaar .veld{ flex:1 1 100%; }
@media (min-width:520px){
  .veldpaar .veld{ flex:1 1 0; }
  .veldpaar .veld--smal{ flex:0 1 150px; }
}

.fotovoorbeeld{ margin-top:12px; }
.fotovoorbeeld img{
  display:block;
  width:100%;
  max-height:220px;
  object-fit:cover;
  border-radius:var(--straal-klein);
  border:1px solid var(--lijn);
}

/* --- Aanvinkvakje: groot genoeg voor een duim --- */

.aanvink{
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:12px 0;
  margin-bottom:8px;
  cursor:pointer;
  line-height:1.4;
}
.aanvink input{
  width:24px; height:24px;
  flex:none;
  margin:0;
  accent-color:var(--weide);
  cursor:pointer;
}

/* --- Schakelaar voor winkel open/dicht --- */

.schakelaar{
  display:flex;
  align-items:center;
  gap:14px;
  cursor:pointer;
  margin-bottom:14px;
}
.schakelaar input{ position:absolute; opacity:0; width:0; height:0; }
.schakelaar__vorm{
  position:relative;
  width:56px; height:32px;
  flex:none;
  border-radius:999px;
  background:var(--lijn);
  transition:background .18s ease;
}
.schakelaar__vorm::after{
  content:'';
  position:absolute;
  top:4px; left:4px;
  width:24px; height:24px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 1px 3px rgba(31,42,25,.3);
  transition:transform .18s ease;
}
.schakelaar input:checked + .schakelaar__vorm{ background:var(--gras); }
.schakelaar input:checked + .schakelaar__vorm::after{ transform:translateX(24px); }
.schakelaar input:focus-visible + .schakelaar__vorm{ outline:3px solid var(--koolzaad); outline-offset:2px; }
.schakelaar__tekst{ font-weight:700; }

/* ==========================================================
   Productenlijst
   ========================================================== */

.product{
  display:flex;
  gap:16px;
  align-items:flex-start;
  background:#fff;
  border:1px solid var(--lijn);
  border-radius:var(--straal);
  padding:16px;
  margin-bottom:14px;
  box-shadow:var(--schaduw);
}
.product--uit{ opacity:.62; }

.product__foto{
  width:88px; height:88px;
  flex:none;
  border-radius:var(--straal-klein);
  overflow:hidden;
  background:var(--zand);
  display:flex;
  align-items:center;
  justify-content:center;
}
.product__foto img{ width:100%; height:100%; object-fit:cover; display:block; }
.product__geenfoto{ font-size:12px; color:var(--inkt-zacht); text-align:center; }

.product__tekst{ flex:1 1 auto; min-width:0; }
.product__tekst h3{ margin:0 0 4px; font-size:19px; }
.product__tekst p{ margin:0 0 3px; }
.product__prijs{ font-weight:700; }

.product__knoppen{
  display:flex;
  flex-direction:column;
  gap:8px;
  align-items:flex-end;
  flex:none;
}

.knop--klein{ min-height:40px; padding:8px 16px; font-size:15px; }

.tekstknop--waarschuwing{ color:var(--rood); font-weight:400; font-size:14px; }
.tekstknop--waarschuwing:hover{ color:#7A2E20; }

/* Op een smalle telefoon de knoppen onder de tekst. */
@media (max-width:479px){
  .product{ flex-wrap:wrap; }
  .product__knoppen{
    flex-direction:row;
    width:100%;
    justify-content:space-between;
    align-items:center;
    border-top:1px solid var(--lijn);
    padding-top:12px;
  }
}

/* Uitleg onder een veld: geruststellend, niet in de weg. */
.veld__hint{
  margin:8px 0 0;
  font-size:14px;
  line-height:1.45;
  color:var(--inkt-zacht);
}
.veld__hint strong{ color:var(--inkt); font-weight:700; }

/* ==========================================================
   Wat de boer overhoudt
   ==========================================================
   Eerlijk en rustig in beeld, niet als waarschuwing. Een boer
   die dit vooraf ziet, valt straks niet van zijn stoel bij de
   eerste uitbetaling.
   ========================================================== */

.afdracht{
  background:var(--zand);
  border:1px solid var(--lijn);
  border-radius:var(--straal-klein);
  padding:16px 18px;
  margin:0 0 20px;
}
.afdracht h3{
  margin:0 0 12px;
  font-size:17px;
  font-family:'Karla','Segoe UI',system-ui,sans-serif;
  font-weight:700;
}

.afdracht__lijst{
  display:grid;
  grid-template-columns:1fr auto;
  gap:5px 16px;
  margin:0 0 12px;
  font-variant-numeric:tabular-nums;
}
.afdracht__lijst dt{ margin:0; }
.afdracht__lijst dd{ margin:0; text-align:right; font-weight:500; }

.afdracht__af{ color:var(--aarde); }

.afdracht__uitleg{
  font-size:14px;
  color:var(--inkt-zacht);
  padding-left:14px;
}

.afdracht__totaal{
  font-weight:700;
  font-size:19px;
  padding-top:10px;
  border-top:1px solid var(--lijn);
  margin-top:5px !important;
}

.afdracht__klein{
  margin:0 0 8px;
  font-size:14px;
  line-height:1.5;
  color:var(--inkt-zacht);
}
.afdracht__klein:last-child{ margin-bottom:0; }
.afdracht__klein strong{ color:var(--inkt); }

.product__opbrengst{
  font-size:14px;
  color:var(--weide);
  font-weight:700;
}
.product__opbrengst .stil{ font-weight:400; }

/* ==========================================================
   Keuzeknopjes
   ==========================================================
   In plaats van een uitklaplijst. Sneller op een telefoon, en
   je ziet in één oogopslag wat er te kiezen valt.
   ========================================================== */

.keuzes{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:10px;
}

.keuze{
  padding:9px 15px;
  border:1.5px solid var(--lijn);
  border-radius:999px;
  background:var(--papier);
  color:var(--inkt-zacht);
  font:inherit;
  font-size:15px;
  cursor:pointer;
  transition:background .12s ease, border-color .12s ease, color .12s ease;
}
.keuze:hover{ border-color:var(--weide-licht); color:var(--inkt); }
.keuze:focus-visible{ outline:3px solid var(--koolzaad); outline-offset:2px; }

.keuze--aan{
  background:var(--weide);
  border-color:var(--weide);
  color:var(--papier);
  font-weight:700;
}
.keuze--aan:hover{ background:var(--weide-diep); border-color:var(--weide-diep); color:var(--papier); }

/* ==========================================================
   De winkel — boeren in de buurt
   ========================================================== */

.boer{
  display:flex;
  gap:16px;
  align-items:stretch;
  background:#fff;
  border:1px solid var(--lijn);
  border-radius:var(--straal);
  overflow:hidden;
  margin-bottom:14px;
  box-shadow:var(--schaduw);
  cursor:pointer;
  transition:box-shadow .15s ease, transform .05s ease;
}
.boer:hover{ box-shadow:var(--schaduw-hoog); }
.boer:active{ transform:translateY(1px); }
.boer:focus-visible{ outline:3px solid var(--koolzaad); outline-offset:2px; }

.boer__foto{
  width:112px;
  flex:none;
  background:var(--zand);
  display:flex;
  align-items:center;
  justify-content:center;
}
.boer__foto img{ width:100%; height:100%; object-fit:cover; display:block; }
.boer__geenfoto{ font-size:12px; color:var(--inkt-zacht); text-align:center; padding:8px; }

.boer__tekst{ flex:1 1 auto; min-width:0; padding:16px 18px 16px 0; }
.boer__tekst h3{ margin:0 0 5px; font-size:20px; }

.boer__regels{ margin:0 0 8px; font-size:15px; color:var(--inkt-zacht); }
.boer__regels strong{ color:var(--weide); font-size:16px; }
.boer__punt{ opacity:.45; }

.boer__verhaal{
  margin:0;
  font-size:15px;
  line-height:1.5;
  color:var(--inkt-zacht);
}

@media (max-width:479px){
  .boer{ flex-direction:column; }
  .boer__foto{ width:100%; height:150px; }
  .boer__tekst{ padding:16px 18px; }
}

/* ==========================================================
   De pagina van één boerderij
   ========================================================== */

.bp-foto{ margin:0 0 20px; }
.bp-foto img{
  display:block;
  width:100%;
  max-height:260px;
  object-fit:cover;
  border-radius:var(--straal);
  border:1px solid var(--lijn);
}

.bp-afstand{
  margin:0 0 6px;
  font-weight:700;
  color:var(--weide);
}

.bp-verhaal{
  margin:20px 0 28px;
  font-size:18px;
  line-height:1.65;
  white-space:pre-line;
}

#bp-contact a{ color:var(--weide); font-weight:700; }

/* --- Eén product in de winkel --- */

.aanbod{
  display:flex;
  gap:16px;
  align-items:flex-start;
  background:#fff;
  border:1px solid var(--lijn);
  border-radius:var(--straal);
  padding:16px;
  margin-bottom:14px;
  box-shadow:var(--schaduw);
}

.aanbod__foto{
  width:96px; height:96px;
  flex:none;
  border-radius:var(--straal-klein);
  overflow:hidden;
  background:var(--zand);
  display:flex;
  align-items:center;
  justify-content:center;
}
.aanbod__foto img{ width:100%; height:100%; object-fit:cover; display:block; }
.aanbod__geenfoto{ font-size:12px; color:var(--inkt-zacht); text-align:center; }

.aanbod__tekst{ flex:1 1 auto; min-width:0; }
.aanbod__tekst h3{ margin:0 0 4px; font-size:19px; }
.aanbod__tekst p{ margin:0 0 5px; }

.aanbod__prijs{ font-weight:700; font-size:18px; }

.aanbod__laatste{
  font-size:14px;
  color:var(--aarde);
  font-weight:700;
}

.aanbod__alternatief{
  font-size:14px;
  color:var(--inkt-zacht);
  font-style:italic;
}

/* ==========================================================
   De uitgelichte kaart op het welkomscherm
   ==========================================================
   Iets warmer dan de rest, zodat het oog daar als eerste
   landt. Geen felle kleur — dat past niet bij het merk.
   ========================================================== */

.kaart--uitgelicht{
  background:linear-gradient(180deg, #FFFDF8 0%, var(--zand) 100%);
  border-color:var(--koolzaad-l);
  box-shadow:var(--schaduw-hoog);
}
.kaart--uitgelicht h2{ font-size:clamp(24px,5vw,30px); }

.knop--groot{
  width:100%;
  min-height:60px;
  font-size:19px;
  padding:16px 28px;
}

/* Knop en tekstknop netjes onder elkaar in een kaart. */
.kaart > .knop{ margin-top:4px; }
.kaart > .knop--zacht{ width:100%; }
.kaart > .knop--zacht + .midden{ margin-bottom:0; }

/* ==========================================================
   Openingstijden instellen
   ========================================================== */

.dag{
  background:#fff;
  border:1px solid var(--lijn);
  border-radius:var(--straal);
  padding:14px 16px;
  margin-bottom:12px;
}
.dag--open{ border-color:var(--gras); }

.dag__kop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.dag__kop h3{
  margin:0;
  font-size:18px;
  font-family:'Karla','Segoe UI',system-ui,sans-serif;
}

.dag__dicht{
  margin:6px 0 0;
  color:var(--inkt-zacht);
  font-size:15px;
}

.blok{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:12px;
  flex-wrap:wrap;
}
.blok__tijd{
  display:flex;
  align-items:center;
  gap:7px;
  font-size:15px;
  color:var(--inkt-zacht);
}
.blok__tijd input{
  min-height:46px;
  padding:8px 12px;
  border:1.5px solid var(--lijn);
  border-radius:var(--straal-klein);
  background:var(--papier);
  color:var(--inkt);
  font:inherit;
  font-size:17px;
}
.blok__tijd input:focus{
  outline:none;
  border-color:var(--weide-licht);
  box-shadow:0 0 0 3px rgba(110,140,90,.22);
}

.blok__weg{
  width:38px; height:38px;
  flex:none;
  border:none;
  border-radius:50%;
  background:var(--zand);
  color:var(--inkt-zacht);
  font-size:22px;
  line-height:1;
  cursor:pointer;
}
.blok__weg:hover{ background:#F7EAE7; color:var(--rood); }
.blok__weg--leeg{ background:none; cursor:default; }

/* --- Openingstijden zoals de klant ze ziet --- */

.tijden{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:6px 20px;
  margin:0 0 20px;
  background:#fff;
  border:1px solid var(--lijn);
  border-radius:var(--straal);
  padding:16px 18px;
}
.tijden dt{ margin:0; font-weight:700; }
.tijden dd{ margin:0; font-variant-numeric:tabular-nums; }
.tijden--dicht{ color:var(--inkt-zacht); font-weight:400; }

/* Uitleg naast een aanvinkvakje. */
.aanvink__erbij{
  display:block;
  font-size:14px;
  color:var(--inkt-zacht);
  font-weight:400;
}

/* Knop die laat zien dat het gelukt is. */
.knop--gelukt,
.knop--gelukt:hover{
  background:var(--gras);
  color:var(--inkt);
}

/* ==========================================================
   Winkelmand
   ========================================================== */

.aanbod__mand{ margin-top:10px; }

.teller{
  display:inline-flex;
  align-items:center;
  gap:4px;
  border:1.5px solid var(--weide);
  border-radius:999px;
  padding:3px;
}
.teller__knop{
  width:38px; height:38px;
  border:none;
  border-radius:50%;
  background:var(--weide);
  color:var(--papier);
  font-size:20px;
  line-height:1;
  cursor:pointer;
}
.teller__knop:hover:not(:disabled){ background:var(--weide-diep); }
.teller__knop:disabled{ background:var(--lijn); color:var(--inkt-zacht); cursor:default; }
.teller__aantal{
  min-width:38px;
  text-align:center;
  font-weight:700;
  font-size:17px;
  font-variant-numeric:tabular-nums;
}

/* De balk die meeloopt onderaan het scherm. */
.mandbalk{
  position:fixed;
  left:0; right:0; bottom:0;
  z-index:20;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:12px clamp(16px,4vw,28px);
  padding-bottom:calc(12px + env(safe-area-inset-bottom));
  background:var(--papier);
  border-top:1px solid var(--lijn);
  box-shadow:0 -6px 24px -12px rgba(31,42,25,.3);
}
.mandbalk__tekst{ margin:0; font-size:16px; }
.mandbalk__prijs{ font-weight:700; }
.mandbalk__klein{ font-size:13px; color:var(--inkt-zacht); }
.mandbalk .knop{ flex:none; }

/* Ruimte onderaan zodat de balk niets afdekt. */
body:has(.mandbalk:not([hidden])) .omhulsel{ padding-bottom:110px; }

/* --- Regels in het bestelscherm --- */

.mandregel{
  display:flex;
  align-items:center;
  gap:14px;
  padding:12px 0;
  border-bottom:1px solid var(--lijn);
}
.mandregel:last-child{ border-bottom:none; }
.mandregel__tekst{ flex:1 1 auto; min-width:0; }
.mandregel__tekst strong{ display:block; }
.mandregel__tekst .stil{ font-size:14px; }
.mandregel__prijs{ font-weight:700; font-variant-numeric:tabular-nums; }
.mandregel__prijs--open{ color:var(--aarde); }
.mandregel__weg{
  width:34px; height:34px;
  flex:none;
  border:none;
  border-radius:50%;
  background:var(--zand);
  color:var(--inkt-zacht);
  font-size:20px;
  line-height:1;
  cursor:pointer;
}
.mandregel__weg:hover{ background:#F7EAE7; color:var(--rood); }

.bestel-gekozen{
  margin:14px 0 0;
  font-weight:700;
  color:var(--weide);
}

/* ==========================================================
   Bestellingen
   ========================================================== */

.bestelling{
  display:block;
  width:100%;
  text-align:left;
  background:#fff;
  border:1px solid var(--lijn);
  border-radius:var(--straal);
  padding:16px 18px;
  margin-bottom:14px;
  box-shadow:var(--schaduw);
  cursor:pointer;
}
.bestelling:hover{ box-shadow:var(--schaduw-hoog); }
.bestelling:focus-visible{ outline:3px solid var(--koolzaad); outline-offset:2px; }

.bestelling__kop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:6px;
}
.bestelling__kop strong{ font-size:18px; }
.bestelling__regels{ margin:0 0 4px; font-size:15px; }

/* --- Statusvlaggetje --- */

.vlag{
  display:inline-block;
  padding:4px 12px;
  border-radius:999px;
  font-size:13px;
  font-weight:700;
  white-space:nowrap;
}
.vlag--wacht{  background:var(--koolzaad-l); color:#6B4E0C; }
.vlag--let-op{ background:#DCE9CF;           color:#31501F; }
.vlag--goed{   background:var(--gras);       color:#1F2A19; }
.vlag--af{     background:var(--zand);       color:var(--inkt-zacht); }
.vlag--fout{   background:#F1D9D4;           color:#7A2E20; }

.detail-kop{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  margin-bottom:6px;
}
.detail-kop h1{ margin:0; }

/* --- Regels in een bestelling --- */

.detailregel{
  display:flex;
  align-items:center;
  gap:14px;
  padding:12px 0;
  border-bottom:1px solid var(--lijn);
}
.detailregel:last-child{ border-bottom:none; }
.detailregel--wens{ background:#FFFCF4; margin:0 -8px; padding-left:8px; padding-right:8px; }
.detailregel__tekst{ flex:1 1 auto; min-width:0; }
.detailregel__tekst strong{ display:block; }
.detailregel__tekst .stil{ font-size:14px; }
.detailregel__bedrag{ font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap; }
.detailregel__bedrag--open{ color:var(--aarde); font-weight:400; font-size:14px; }

.detailregel__invul{
  display:flex;
  align-items:center;
  gap:6px;
  flex:none;
}
.detailregel__prijs{
  width:92px;
  min-height:46px;
  padding:8px 12px;
  border:1.5px solid var(--koolzaad);
  border-radius:var(--straal-klein);
  background:#fff;
  font:inherit;
  font-size:17px;
  text-align:right;
}
.detailregel__prijs:focus{
  outline:none;
  border-color:var(--weide-licht);
  box-shadow:0 0 0 3px rgba(110,140,90,.22);
}

/* ==========================================================
   Een veld dat nog niet klopt
   ==========================================================
   Rood is duidelijk maar niet schreeuwerig. Het gaat weg zodra
   er iets wordt getypt.
   ========================================================== */

.veld input.veld--fout,
.veld textarea.veld--fout,
.veld select.veld--fout,
input.veld--fout,
textarea.veld--fout,
select.veld--fout{
  border-color:var(--rood);
  background:#FDF7F6;
}
.veld input.veld--fout:focus,
.veld textarea.veld--fout:focus,
.veld select.veld--fout:focus,
input.veld--fout:focus,
textarea.veld--fout:focus{
  box-shadow:0 0 0 3px rgba(163,64,47,.2);
  border-color:var(--rood);
}

.groep--fout{
  border:1.5px solid var(--rood);
  background:#FDF7F6;
  border-radius:var(--straal-klein);
  padding:12px 14px;
  margin:0 -14px 8px;
}

/* ==========================================================
   Beheer
   ========================================================== */

.beheerboer{
  background:#fff;
  border:1px solid var(--lijn);
  border-radius:var(--straal);
  padding:16px 18px;
  margin-bottom:14px;
  box-shadow:var(--schaduw);
}

.beheerboer__cijfers{
  margin:12px 0;
  padding:12px 0;
  border-top:1px solid var(--lijn);
  border-bottom:1px solid var(--lijn);
  font-size:15px;
}

.beheerboer__tarieven{
  display:flex;
  align-items:flex-end;
  gap:12px;
  flex-wrap:wrap;
}
.beheerboer__tarieven .veld{ margin-bottom:0; flex:0 1 120px; }
.beheerboer__tarieven .knop{ flex:none; }

/* Afrondknoppen onder een bestelling. */
#detail-afronden{ margin-top:20px; }
#detail-afronden .knop{ width:100%; margin-bottom:10px; }

/* Een keuze die er wel is maar nog niet werkt. */
.aanvink--binnenkort{ opacity:.85; }
.binnenkort{
  display:inline-block;
  margin-left:6px;
  padding:2px 9px;
  border-radius:999px;
  background:var(--koolzaad-l);
  color:#6B4E0C;
  font-size:12px;
  font-weight:700;
  vertical-align:middle;
}

/* Een kaart die eruit springt omdat het een beheerdershandeling is —
   niet iets wat er bij het gewone gebruik hoort. */
.kaart--beheer{
  border-color:var(--koolzaad);
  background:#FFFCF4;
}

/* ==========================================================
   Nieuwe versie beschikbaar
   ==========================================================
   Onderin, duidelijk maar niet in de weg. Gaat boven de
   mandbalk staan als die er ook is.
   ========================================================== */

.updatebalk{
  position:fixed;
  left:0; right:0; bottom:0;
  z-index:40;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:14px clamp(16px,4vw,28px);
  padding-bottom:calc(14px + env(safe-area-inset-bottom));
  background:var(--weide-diep);
  color:var(--papier);
  box-shadow:0 -6px 24px -10px rgba(31,42,25,.5);
}
.updatebalk__tekst{
  margin:0;
  font-size:15px;
  font-weight:700;
}
.updatebalk .knop{
  flex:none;
  background:var(--koolzaad);
  color:var(--inkt);
}
.updatebalk .knop:hover{ background:var(--koolzaad-l); }

/* Staat de updatebalk er, dan schuift de mandbalk erboven. */
body.heeft-update .mandbalk{ bottom:64px; }
body.heeft-update .omhulsel{ padding-bottom:150px; }

/* ==========================================================
   Kaarten
   ==========================================================
   Een vaste hoogte is nodig: Leaflet rekent zijn afmetingen uit
   bij het maken, en zonder hoogte krijg je een leeg vlak.
   ========================================================== */

.kaartvak{
  height:420px;
  border-radius:var(--straal);
  border:1px solid var(--lijn);
  overflow:hidden;
  margin-bottom:20px;
  background:var(--zand);
}
.kaartvak--klein{ height:240px; }

@media (max-width:479px){
  .kaartvak{ height:340px; }
  .kaartvak--klein{ height:200px; }
}

/* Zelfgetekende speldjes, zodat er geen plaatjes van elders bij hoeven. */
.speldje{ background:none; border:none; }
.speldje__vorm{
  width:26px; height:26px;
  border-radius:50% 50% 50% 0;
  transform:rotate(-45deg);
  border:2px solid var(--papier);
  box-shadow:0 2px 6px rgba(31,42,25,.4);
}

/* Leaflet zet zijn popups standaard in Times New Roman. */
.leaflet-popup-content{
  font-family:'Karla','Segoe UI',system-ui,sans-serif;
  font-size:15px;
  line-height:1.5;
  margin:12px 14px;
}
.leaflet-popup-content-wrapper{ border-radius:var(--straal-klein); }

.kaart__knop{
  margin-top:8px;
  padding:7px 14px;
  border:none;
  border-radius:999px;
  background:var(--weide);
  color:var(--papier);
  font:inherit;
  font-size:14px;
  font-weight:700;
  cursor:pointer;
}
.kaart__knop:hover{ background:var(--weide-diep); }

#bp-route{ display:inline-block; margin-top:4px; }

/* ==========================================================
   Het kaartje bij een speldje
   ==========================================================
   Een naam en een afstand zeggen weinig. Drie producten met
   een prijs erbij zeggen meteen of het de moeite waard is.
   ========================================================== */

.kaartkaartje__naam{
  display:block;
  font-family:'Fraunces',Georgia,serif;
  font-size:18px;
  line-height:1.25;
  margin-bottom:2px;
}

.kaartkaartje__waar{
  margin:0 0 10px;
  font-size:14px;
  color:var(--inkt-zacht);
}
.kaartkaartje__waar strong{ color:var(--weide); }

.kaartkaartje__aanbod{
  margin-bottom:12px;
  padding-top:10px;
  border-top:1px solid var(--lijn);
}

.kaartkaartje__regel{
  display:flex;
  justify-content:space-between;
  gap:12px;
  font-size:14px;
  line-height:1.7;
}
.kaartkaartje__wat{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.kaartkaartje__prijs{
  flex:none;
  font-weight:700;
  font-variant-numeric:tabular-nums;
}

.kaart__knop{ width:100%; }

/* Het labeltje dat verschijnt als je een speldje aanwijst. */
.leaflet-tooltip{
  font-family:'Karla','Segoe UI',system-ui,sans-serif;
  font-size:14px;
  font-weight:700;
  padding:7px 12px;
  border:1px solid var(--lijn);
  border-radius:var(--straal-klein);
  background:var(--papier);
  color:var(--inkt);
  box-shadow:var(--schaduw);
}
.leaflet-tooltip-top::before{ border-top-color:var(--lijn); }

/* Links in de voettekst van de app. */
.voet a{ color:var(--weide); font-weight:700; }
.voet br{ margin-bottom:6px; }

/* Nog niets gekozen: dan is dit geen mededeling maar iets dat je moet doen. */
.bestel-gekozen--mist{
  color:var(--aarde);
  font-weight:400;
}

/* Een hele kaart aanwijzen, niet alleen een veld. */
.kaart.groep--fout{
  border:1.5px solid var(--rood);
  background:#FDF7F6;
  margin:0 0 20px;
  padding:clamp(20px,4vw,28px);
}

/* Meldingen mogen regeleinden bevatten — bij een technische reden staat die
   op een eigen regel. */
.melding{ white-space:pre-line; }

/* ==========================================================
   Een knop die om aandacht vraagt
   ==========================================================
   Voor als er echt iets op je wacht — een betaling die kan
   verlopen, of iets dat klaarstaat om op te halen.

   Rustig ademen, niet knipperen. Knipperen leest als een
   waarschuwing en is voor sommige mensen ronduit vervelend.
   ========================================================== */

.knop--wacht{
  background:var(--koolzaad);
  color:var(--inkt);
  animation:ademen 2.6s ease-in-out infinite;
}
.knop--wacht:hover{
  background:var(--koolzaad-l);
  animation:none;
}

@keyframes ademen{
  0%, 100% { box-shadow:0 0 0 0 rgba(228,167,43,.55); }
  50%      { box-shadow:0 0 0 10px rgba(228,167,43,0); }
}

/* Wie liever geen bewegende dingen ziet, krijgt ze niet. Dat is een
   instelling in het besturingssysteem en daar houden we ons aan. */
@media (prefers-reduced-motion: reduce){
  .knop--wacht{ animation:none; box-shadow:0 0 0 3px rgba(228,167,43,.5); }
}

/* ==========================================================
   Wachtscherm — de pikkende kip
   ==========================================================
   Voor het enkele moment dat echt even duurt. Een leeg scherm
   van drie seconden voelt als kapot; een kip die staat te
   pikken voelt als wachten.
   ========================================================== */

.wachtscherm{
  position:fixed;
  inset:0;
  z-index:60;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:rgba(251,247,239,.94);
  backdrop-filter:blur(3px);
}

.wachtscherm__kaart{
  text-align:center;
  max-width:340px;
}

.wachtscherm__tekst{
  margin:18px 0 6px;
  font-family:'Fraunces',Georgia,serif;
  font-size:22px;
  font-weight:600;
  color:var(--inkt);
}

.wachtscherm__klein{
  margin:0;
  font-size:15px;
  color:var(--inkt-zacht);
  min-height:1.5em;
}

/* --- De kip --- */

.kip{ width:190px; height:auto; }

.kip__grond{ fill:var(--lijn); opacity:.6; }

.kip__romp{ fill:var(--papier); stroke:var(--inkt); stroke-width:2.5; }
.kip__hoofd{ fill:var(--papier); stroke:var(--inkt); stroke-width:2.5; }
.kip__vleugel{ fill:var(--zand); stroke:var(--inkt); stroke-width:2.2; stroke-linejoin:round; }
.kip__staart{ fill:var(--zand); stroke:var(--inkt); stroke-width:2.2; stroke-linejoin:round; }

.kip__kam{ fill:none; stroke:var(--rood); stroke-width:3; stroke-linecap:round; }
.kip__lel{ fill:var(--rood); }
.kip__snavel{ fill:var(--koolzaad); }
.kip__oog{ fill:var(--inkt); }

.kip__poot{
  fill:none;
  stroke:var(--koolzaad);
  stroke-width:2.6;
  stroke-linecap:round;
}

/* Het lijf wipt mee als ze pikt. */
.kip__lijf{
  transform-origin:70px 80px;
  animation:kip-wippen 1.4s ease-in-out infinite;
}

/* De kop draait naar de grond en weer omhoog. */
.kip__kop{
  transform-origin:64px 56px;
  animation:kip-pikken 1.4s ease-in-out infinite;
}

@keyframes kip-pikken{
  0%, 45%   { transform:rotate(0deg); }
  60%, 70%  { transform:rotate(26deg); }
  85%, 100% { transform:rotate(0deg); }
}

@keyframes kip-wippen{
  0%, 45%   { transform:translateY(0); }
  62%       { transform:translateY(3px); }
  85%, 100% { transform:translateY(0); }
}

/* De korrels verdwijnen één voor één, alsof ze opgepikt worden. */
.korrel{ fill:var(--aarde); }
.korrel--1{ animation:korrel-weg 4.2s ease-in-out infinite; }
.korrel--2{ animation:korrel-weg 4.2s ease-in-out infinite 1.4s; }
.korrel--3{ animation:korrel-weg 4.2s ease-in-out infinite 2.8s; }

@keyframes korrel-weg{
  0%, 25%  { opacity:1; transform:scale(1); }
  35%      { opacity:0; transform:scale(.3); }
  95%      { opacity:0; }
  100%     { opacity:1; transform:scale(1); }
}

/* Wie geen bewegende dingen wil, krijgt een stilstaande kip. */
@media (prefers-reduced-motion: reduce){
  .kip__lijf, .kip__kop, .korrel{ animation:none; }
}

/* ==========================================================
   Toegankelijkheid
   ==========================================================
   Een oma van 70 moet een doos aardbeien kunnen bestellen —
   en dat geldt net zo goed voor iemand die niet kan klikken,
   of die de app laat voorlezen.
   ========================================================== */

/* Naar de inhoud springen. Onzichtbaar tot je met tab door de pagina gaat;
   dan hoef je niet elke keer door de kopbalk heen. */
.overslaan{
  position:absolute;
  left:-9999px;
  top:0;
  z-index:100;
  padding:12px 20px;
  background:var(--weide-diep);
  color:var(--papier);
  font-weight:700;
  border-radius:0 0 var(--straal-klein) 0;
}
.overslaan:focus{ left:0; }

/* Het hoofdgedeelte krijgt de aandacht na het overslaan, maar mag daar
   geen rand van krijgen — dat is verwarrend. */
#hoofd:focus{ outline:none; }

/* ==========================================================
   Op je beginscherm zetten
   ========================================================== */

.installeerkaart{
  border-color:var(--gras);
  background:linear-gradient(180deg, #FFFDF8 0%, var(--zand) 100%);
}
.installeerkaart .knop{ width:100%; }
.installeerkaart strong{ color:var(--inkt); }