/* ============================================================
   DP Bestelsysteem — front-end.
   Leunt op de tokens van het thema (--papier, --brons, --inkt …).
   Staat het thema er niet, dan vallen de tokens terug op eigen waarden,
   zodat de bestelpagina ook in een kaal thema leesbaar blijft.
   ============================================================ */
.dpb-drop{
  --dpb-papier:var(--papier,#F5EFE2);
  --dpb-wit:var(--wit,#FBF8F1);
  --dpb-inkt:var(--inkt,#3E2717);
  --dpb-inkt2:var(--inkt-2,#6B513C);
  --dpb-brons:var(--brons,#A9793C);
  --dpb-bronstekst:var(--brons-tekst,#875C26);
  --dpb-lijn:var(--brons-flauw,rgba(169,121,60,.26));
  --dpb-groen:var(--pistache,#8FA368);
  --dpb-framboos:var(--framboos,#BE5E78);
}

/* ---------- statusband ----------
   Deze staat in de kop, op de DONKERE band. Daar horen lichte kleuren: op
   #2B1B10 haalde de bruine tekst 2,3:1 (gemeten 13-08) — onleesbaar.
   En hij moet kunnen afbreken: op 390px duwde de regel 50px buiten het scherm. */
.dpb-status{display:inline-flex;align-items:center;gap:.5rem;font-size:.86rem;
  color:var(--inkt-2,#6B513C);flex-wrap:wrap;white-space:normal;min-width:0}
.dpb-stip{width:9px;height:9px;border-radius:50%;background:var(--brons,#A9793C);flex:0 0 auto}
.dpb-status--open .dpb-stip{background:#A8BC80;box-shadow:0 0 0 4px rgba(168,188,128,.22)}
.dpb-status--bakken .dpb-stip{background:#D3AC74}
.dpb-status--afhalen .dpb-stip{background:#E08CA0}
.dpb-klok{font-variant-numeric:tabular-nums;font-weight:700;color:var(--brons-tekst,#875C26)}

/* in de donkere kopband: licht op donker */
.band-usp .dpb-status{color:#E9DCC6;display:inline-flex}
/* Flex-items krimpen standaard niet onder hun min-content. Op 360px stak de
   statuszin daardoor 3 pixels buiten de rand — te weinig om te zien, genoeg om
   de mobiel-gate rood te zetten. min-width:0 laat ze wél krimpen. */
.band-usp span,.band-usp .dpb-status,.band-usp .dpb-status>span{min-width:0;overflow-wrap:anywhere}
.band-usp .maat{max-width:100%}
.band-usp .dpb-klok{color:#D3AC74}
.band-usp span:has(.dpb-status){white-space:normal;min-width:0;flex:0 1 auto}
/* Het thema zet white-space:nowrap op élk item van de band. Voor de twee korte
   feiten klopt dat; de statuszin is langer en duwde op 390px 50 pixels buiten
   het scherm (gemeten 13-08). Onder 900px mag de band dus gewoon afbreken. */
@media (max-width:900px){
  .band-usp span{white-space:normal}
}
@media (max-width:620px){
  /* de afteller mag weg als de ruimte krap is — de zin zelf blijft staan */
  .band-usp .dpb-klok{display:none}
}
/* Onder 560px past er maar één ding fatsoenlijk in de band. Dan wint de LEVENDE
   stand van de week: die verandert en is dus het nuttigst. De twee vaste feiten
   staan verderop op de pagina toch al.
   (Meteen ook het einde van een hardnekkige 3px-overflow: die kwam en ging met
   het laden van de letters — met de webfont paste de regel net wél, met de
   terugvalletter net niet. Minder in de band is hier de echte oplossing.) */
@media (max-width:560px){
  .band-usp .maat > span:not(:has(.dpb-status)){display:none}
  .band-usp .maat{justify-content:center}
}

/* ---------- de weekbalk ---------- */
.dpb-weekbalk{display:grid;grid-template-columns:repeat(4,1fr);gap:.6rem;list-style:none;margin:0 0 2rem;padding:0;counter-reset:s}
.dpb-stap{position:relative;padding:.85rem 1rem;background:var(--dpb-wit);border:1px solid var(--dpb-lijn);border-radius:12px;text-align:center}
.dpb-stap .dpb-dag{display:block;font-family:'Kop',Georgia,serif;font-weight:700;font-size:1.02rem;color:var(--dpb-inkt);line-height:1.2}
.dpb-stap .dpb-wat{display:block;font-size:.79rem;color:var(--dpb-inkt2);margin-top:.15rem}
/* Een afgelopen stap NIET met opacity dimmen: op .55 haalt de daglijn 3,2:1 en
   de onderregel 2,4:1 (gemeten 13-08) — allebei onvoldoende. Een streepjeslijn
   plus de zachtere inktkleur leest net zo goed als "gehad" en blijft leesbaar. */
.dpb-stap.is-gehad{background:transparent;border-style:dashed}
.dpb-stap.is-gehad .dpb-dag,.dpb-stap.is-gehad .dpb-wat{color:var(--dpb-inkt2)}
.dpb-stap.is-nu{background:var(--dpb-inkt);border-color:var(--dpb-inkt)}
.dpb-stap.is-nu .dpb-dag{color:var(--dpb-papier)}
.dpb-stap.is-nu .dpb-wat{color:#D8C9AF}

/* ---------- bericht ---------- */
.dpb-bericht{margin:0 0 2.2rem;max-width:62ch}
.dpb-bericht h2{font-family:'Kop',Georgia,serif;font-size:clamp(1.8rem,3.4vw,2.7rem);line-height:1.08;margin:0 0 .7rem;color:var(--dpb-inkt)}
.dpb-bericht h2 em{font-style:italic;color:var(--dpb-brons)}
.dpb-bericht p{color:var(--dpb-inkt2);margin:0 0 .6rem}
.dpb-aftellen{font-family:'Kop',Georgia,serif;font-size:1.25rem;color:var(--dpb-bronstekst);font-variant-numeric:tabular-nums}

/* ---------- productkaarten ---------- */
.dpb-waren{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:clamp(1rem,1.8vw,1.6rem)}
.dpb-waar{display:flex;flex-direction:column;background:var(--dpb-wit);border:1px solid var(--dpb-lijn);
  border-radius:18px;overflow:hidden;box-shadow:0 10px 28px -18px rgba(62,39,23,.34)}
.dpb-waar-beeld{position:relative;aspect-ratio:4/3;background:var(--papier-3,#E7DBC4);overflow:hidden}
.dpb-waar-beeld img{width:100%;height:100%;object-fit:cover;display:block}
.dpb-waar.is-uitverkocht .dpb-waar-beeld img{filter:grayscale(.5);opacity:.62}
.dpb-op,.dpb-bijna{position:absolute;top:.65rem;left:.65rem;padding:.22rem .68rem;border-radius:999px;
  font-size:.72rem;font-weight:700;letter-spacing:.04em;color:#fff}
.dpb-op{background:var(--dpb-inkt)}
.dpb-bijna{background:#A8324F}
.dpb-waar-tekst{padding:1rem 1.15rem 1.2rem;display:flex;flex-direction:column;flex:1}
.dpb-waar-tekst h3{font-family:'Kop',Georgia,serif;font-size:1.18rem;line-height:1.16;margin:0 0 .3rem;color:var(--dpb-inkt)}
.dpb-waar-tekst p{font-size:.92rem;color:var(--dpb-inkt2);margin:0 0 .5rem}
.dpb-prijs{font-weight:700;color:var(--dpb-bronstekst) !important;font-size:1.02rem}
.dpb-prijs .woocommerce-Price-amount{color:inherit}

.dpb-bestel{display:flex;gap:.55rem;align-items:center;margin-top:auto}
.dpb-aantal input{width:4.4rem;height:2.7rem;text-align:center;border:1.5px solid var(--dpb-lijn);
  border-radius:999px;background:var(--dpb-papier);font-weight:700;color:var(--dpb-inkt);font-size:1rem}
.dpb-aantal input:focus{outline:2px solid var(--dpb-brons);outline-offset:2px}
.dpb-bestel .knop{flex:1}
.dpb-rest{margin:.6rem 0 0 !important;font-size:.78rem;color:var(--dpb-inkt2);opacity:.85}
.dpb-leeg{color:var(--dpb-inkt2);font-style:italic}

/* ---------- afhaalmelding bij afrekenen ---------- */
.dpb-afhaalmelding{display:flex;flex-wrap:wrap;gap:.2rem 1rem;align-items:baseline;
  background:var(--wit,#FBF8F1);border:1px solid var(--brons-flauw,rgba(169,121,60,.26));
  border-left:4px solid var(--brons,#A9793C);border-radius:14px;padding:1rem 1.2rem;margin:0 0 1.6rem}
.dpb-afhaalmelding strong{color:var(--inkt,#3E2717)}
.dpb-afhaalmelding span{color:var(--inkt-2,#6B513C);font-size:.94rem}
.dpb-afhaalregel{margin-top:1rem}

@media (max-width:700px){
  .dpb-weekbalk{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:420px){
  .dpb-waren{grid-template-columns:1fr}
}

/* ---------- compacte assortimentslijst ----------
   Deze lijst laat zien wat er nu in het bestelsysteem staat; de sfeerfoto's
   staan er hierboven al. Kleiner raster, kleinere foto's, minder decodeerwerk. */
/* Bewust twee kolommen op een telefoon: bij één kolom wordt het vak 346 px en
   is de 300px-thumbnail te klein (uitgerekt beeld). Twee kolommen geeft ~168 px
   per vak, precies waar deze foto's voor bedoeld zijn. */
.waren:has(.waar-klein){grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.waar-klein img{aspect-ratio:1/1}
.waar-klein .waar-tekst{padding:.85rem .95rem 1rem}
.waar-klein .waar-tekst h3{font-size:1.02rem}
.waar-klein .waar-tekst p{font-size:.86rem}

/* ============================================================
   CATEGORIEKAARTEN — het assortiment zoals Deborah het in wp-admin invoert
   ============================================================ */
.dpb-cats{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:clamp(1rem,1.8vw,1.7rem)}
.dpb-cats--groot{grid-template-columns:repeat(auto-fill,minmax(330px,1fr))}
.dpb-cat{display:flex;flex-direction:column;text-decoration:none;border-radius:18px;overflow:hidden;
  background:var(--wit,#FBF8F1);border:1px solid var(--brons-flauw,rgba(169,121,60,.26));
  box-shadow:0 10px 28px -18px rgba(62,39,23,.34);transition:transform .3s ease,box-shadow .3s ease}
.dpb-cat:hover{transform:translateY(-5px);box-shadow:0 18px 44px -22px rgba(62,39,23,.42)}
.dpb-cat-beeld{display:block;position:relative;aspect-ratio:3/2;overflow:hidden;background:var(--papier-3,#E7DBC4)}
.dpb-cat-beeld img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.22,.8,.28,1)}
.dpb-cat:hover .dpb-cat-beeld img{transform:scale(1.045)}
.dpb-cat-geenfoto{display:block;width:100%;height:100%;background:var(--papier-2,#EFE6D5)}
.dpb-cat-tekst{display:flex;flex-direction:column;flex:1;padding:1.15rem 1.3rem 1.35rem}
.dpb-cat-tekst h3{font-family:'Kop',Georgia,serif;font-size:1.36rem;line-height:1.14;margin:0 0 .35rem;color:var(--inkt,#3E2717)}
.dpb-cats--groot .dpb-cat-tekst h3{font-size:1.6rem}
.dpb-cat-tekst p{font-size:.94rem;color:var(--inkt-2,#6B513C);margin:0}
/* margin-top:auto duwt de link naar de onderkant van de kaart, zodat de drie
   "N soorten bekijken" op dezelfde hoogte staan ook als de teksten verschillen */
.dpb-cat .plaat-smaken{margin-top:auto;padding-top:.85rem}
.dpb-cat-lees{margin-top:1rem;font-size:.83rem;font-weight:700;letter-spacing:.06em;
  color:var(--brons-tekst,#875C26);display:inline-flex;gap:.35rem;align-items:center}
.dpb-cat-lees span{transition:transform .25s ease}
.dpb-cat:hover .dpb-cat-lees span{transform:translateX(3px)}

/* ============================================================
   REVIEWS — echte berichten van klanten
   ============================================================ */
.dpb-reviews{columns:3 300px;column-gap:clamp(1rem,1.8vw,1.7rem)}
.dpb-review{break-inside:avoid;margin:0 0 clamp(1rem,1.8vw,1.7rem);position:relative;
  background:var(--wit,#FBF8F1);border:1px solid var(--brons-flauw,rgba(169,121,60,.26));
  border-radius:18px;padding:1.5rem 1.4rem 1.25rem;box-shadow:0 10px 28px -18px rgba(62,39,23,.34)}
.dpb-aanhaling{position:absolute;top:.1rem;left:1.15rem;font-family:'Kop',Georgia,serif;
  font-size:3.4rem;line-height:1;color:var(--brons,#A9793C);opacity:.3}
.dpb-review blockquote{margin:0;padding:0}
.dpb-review blockquote p{margin:0;font-family:'Kop',Georgia,serif;font-size:1.08rem;line-height:1.42;
  color:var(--inkt,#3E2717)}
.dpb-over{margin:0 0 .7rem;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--brons-tekst,#875C26);font-family:'Tekst',system-ui,sans-serif;font-weight:700}
.blok-diep .dpb-over{color:var(--brons-licht,#C89B5D)}
.dpb-review figcaption{margin-top:.9rem;font-size:.84rem;color:var(--inkt-2,#6B513C);
  display:flex;flex-wrap:wrap;gap:.35rem;align-items:baseline}
.dpb-review figcaption b{color:var(--brons-tekst,#875C26);font-weight:700}
.blok-diep .dpb-review{background:rgba(245,239,226,.06);border-color:rgba(200,155,93,.28)}
.blok-diep .dpb-review blockquote p{color:#F2E7D3}
.blok-diep .dpb-review figcaption{color:#CDBB9D}
.blok-diep .dpb-review figcaption b{color:var(--brons-licht,#C89B5D)}
.blok-diep .dpb-aanhaling{color:var(--brons-licht,#C89B5D);opacity:.45}

/* ============================================================
   PORTRET-PLACEHOLDER — tot Deborah haar foto stuurt
   ============================================================ */
.dpb-portret{position:relative}
.dpb-portret img{width:100%;border-radius:18px;box-shadow:0 18px 44px -22px rgba(62,39,23,.42)}
.dpb-portret figcaption{margin-top:.8rem;font-size:.84rem;color:var(--inkt-3,#755B43);
  display:flex;gap:.45rem;align-items:flex-start;font-style:italic}

@media (max-width:700px){
  .dpb-reviews{columns:1}
}

/* De afteller in de bovenbalk hoort niet bij de zin ervoor: eigen ruimte en een
   iets rustiger kleur, zodat je ziet dat het een losse mededeling is. */
.dpb-status .dpb-klok{margin-left:.6rem;opacity:.85}