/* ═══════════════════════════════════════════════════════════════════════════
 * Den bakker, livechat. Vormgeving.
 *
 * Het palet en de letters komen ONGEWIJZIGD uit het thema van den-bakker.be
 * (wp-content/themes/denbakker-thema/assets/stijl.css): cream #faf6ef,
 * ink #2b2118, aubergine #5e2a66, amber #c98a3b, sage #6e8898, lijn #e8ddcc.
 * Er is hier niets bijverzonnen; de chat moet aanvoelen alsof hij er altijd al stond.
 *
 * ⛔ ALLES STAAT ONDER #dbc-wortel. Dat is met opzet: het thema en WooCommerce
 *    hebben allebei brede regels op button, input en p. Door elke regel met het
 *    id te beginnen wint deze stijl altijd, zonder ook maar één !important.
 *    Zet hier dus nooit een kale klassenaam neer.
 * ═══════════════════════════════════════════════════════════════════════════ */

#dbc-wortel{
  /* het palet van de bakkerij */
  --dbc-cream:#faf6ef;
  --dbc-cream-2:#f5eadc;
  --dbc-ink:#2b2118;
  --dbc-aubergine:#5e2a66;
  --dbc-aubergine-licht:#7a3a84;
  --dbc-amber:#c98a3b;
  --dbc-amber-licht:#d9a05a;
  --dbc-sage:#6e8898;
  --dbc-groen:#3e7a4e;
  --dbc-kaart:#fff;
  --dbc-lijn:#e8ddcc;
  --dbc-grijs:#7a6a5c;
  --dbc-rond:16px;
  --dbc-schaduw:0 18px 46px -14px rgba(43,33,24,.44);
  --dbc-onder:env(safe-area-inset-bottom, 0px);

  position:fixed; inset:0; z-index:2147483000;
  pointer-events:none;                 /* de pagina eronder blijft gewoon bruikbaar */
  font:400 15px/1.55 Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  color:var(--dbc-ink);
  -webkit-font-smoothing:antialiased;
}
#dbc-wortel *,#dbc-wortel *::before,#dbc-wortel *::after{box-sizing:border-box}
#dbc-wortel button{font:inherit;color:inherit;margin:0;border:0;background:none;cursor:pointer;
  text-align:left;letter-spacing:normal;text-transform:none}
#dbc-wortel p{margin:0}
#dbc-wortel img{display:block;max-width:100%}
#dbc-wortel :focus-visible{outline:3px solid var(--dbc-amber);outline-offset:2px;border-radius:8px}

/* ── de bubbel ────────────────────────────────────────────────────────────── */
/* ⛔ LINKSONDER, OP ELK SCHERM. Rechtsonder is van de winkel: daar staat op een
   telefoon de zwevende mandknop van de webshop (.mandknop, 58px, 16 van rechts).
   Links de chat, rechts het mandje. Zet dit dus nooit terug op `right`, en houd
   de telefoonregel onderaan dit bestand op dezelfde kant. */
#dbc-wortel .dbc-bubbel{
  pointer-events:auto;
  position:absolute; left:24px; bottom:24px;
  width:64px; height:64px; padding:0;
  border-radius:50%; overflow:visible;
  background:var(--dbc-aubergine);
  box-shadow:var(--dbc-schaduw);
  transition:transform .22s cubic-bezier(.2,.8,.3,1), box-shadow .22s ease;
}
#dbc-wortel .dbc-bubbel:hover{transform:translateY(-3px) scale(1.04)}
#dbc-wortel .dbc-bubbel:active{transform:scale(.96)}
/* ⛔ display:block hoort erbij. Dit is een <span>, en een inline element trekt
   zich niets aan van width, height of overflow. Zonder deze regel stak de
   vierkante foto onderaan uit de bubbel; gezien op een schermafdruk. */
#dbc-wortel .dbc-bubbel__foto{
  display:block; width:100%; height:100%; border-radius:50%; overflow:hidden;
  /* de foto's komen vierkant binnen; met een vaste verhouding en cover blijft
     de bubbel rond, wat er ook aangeleverd wordt */
  aspect-ratio:1/1;
  border:2.5px solid #fff;
  background:var(--dbc-aubergine);
}
#dbc-wortel .dbc-beeld{display:block;width:100%;height:100%;border-radius:50%;overflow:hidden}
#dbc-wortel .dbc-bubbel__foto img{width:100%;height:100%;object-fit:cover;object-position:50% 28%}
#dbc-wortel .dbc-letter{
  width:100%;height:100%;display:grid;place-items:center;border-radius:50%;
  font-family:Fraunces,Georgia,serif;font-weight:700;color:#fff;
  background:var(--dbc-aubergine);
}
#dbc-wortel .dbc-bubbel .dbc-letter{font-size:26px}
#dbc-wortel .dbc-stip{
  position:absolute; right:1px; bottom:3px;
  width:15px; height:15px; border-radius:50%;
  background:var(--dbc-groen); border:2.5px solid #fff;
}
#dbc-wortel .dbc-bubbel__kruis{display:none}

/* de bubbel wordt een sluitknop zodra het venster openstaat */
#dbc-wortel.is-open .dbc-bubbel__foto,
#dbc-wortel.is-open .dbc-stip{display:none}
#dbc-wortel.is-open .dbc-bubbel__kruis{
  display:grid; place-items:center; width:100%; height:100%;
  border-radius:50%; color:#fff; background:var(--dbc-aubergine);
}
#dbc-wortel .dbc-bubbel__kruis svg{width:24px;height:24px}

/* ── het uitnodigingsballonnetje ─────────────────────────────────────────── */
#dbc-wortel .dbc-uitnodiging{
  pointer-events:auto;
  position:absolute; left:24px; bottom:104px;
  width:min(292px, calc(100vw - 48px));
  background:var(--dbc-kaart); color:var(--dbc-ink);
  border:1px solid var(--dbc-lijn); border-radius:var(--dbc-rond);
  box-shadow:var(--dbc-schaduw);
  padding:15px 40px 15px 16px;
  /* ⚠️ De oorsprong hoort in de hoek waar de bubbel staat, nu dus linksonder
     (0 100%). Met de oude 100% 100% kroop het ballonnetje vanuit de rechterkant
     omhoog terwijl de bubbel links stond: de beweging wees het scherm uit. */
  opacity:0; transform:translateY(10px) scale(.96); transform-origin:0 100%;
  transition:opacity .34s ease, transform .34s cubic-bezier(.2,.8,.3,1);
}
#dbc-wortel .dbc-uitnodiging.is-uit{opacity:1;transform:none}
/* het puntje onderaan het ballonnetje wijst naar de bubbel, dus naar links */
#dbc-wortel .dbc-uitnodiging::after{
  content:""; position:absolute; left:26px; bottom:-9px;
  width:16px; height:16px; background:var(--dbc-kaart);
  border-right:1px solid var(--dbc-lijn); border-bottom:1px solid var(--dbc-lijn);
  transform:rotate(45deg);
}
#dbc-wortel .dbc-uitnodiging__naam{
  font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--dbc-amber); font-weight:600; margin-bottom:5px;
}
#dbc-wortel .dbc-uitnodiging__tekst{font-size:.94rem;line-height:1.45}
#dbc-wortel .dbc-uitnodiging__weg{
  position:absolute; top:2px; right:2px;
  width:44px; height:44px; display:grid; place-items:center;
  color:var(--dbc-grijs); border-radius:50%;
}
#dbc-wortel .dbc-uitnodiging__weg:hover{background:var(--dbc-cream-2);color:var(--dbc-ink)}
#dbc-wortel .dbc-uitnodiging__weg svg{width:15px;height:15px}

/* ── het venster ─────────────────────────────────────────────────────────── */
/* het venster lijnt links uit, zodat het uit de bubbel lijkt te groeien */
#dbc-wortel .dbc-venster{
  pointer-events:auto;
  position:absolute; left:24px; bottom:104px;
  width:390px; max-width:calc(100vw - 32px);
  height:min(640px, calc(100vh - 148px));
  display:none; flex-direction:column;
  background:var(--dbc-cream);
  border:1px solid var(--dbc-lijn); border-radius:20px;
  box-shadow:var(--dbc-schaduw); overflow:hidden;
  /* ⚠️ Zelfde reden als bij het ballonnetje: openen en sluiten vertrekken uit de
     linkerbenedenhoek, waar de bubbel staat die u net hebt aangetikt. */
  opacity:0; transform:translateY(14px) scale(.98); transform-origin:0 100%;
  transition:opacity .26s ease, transform .26s cubic-bezier(.2,.8,.3,1);
}
#dbc-wortel.is-open .dbc-venster{display:flex}
#dbc-wortel.is-zichtbaar .dbc-venster{opacity:1;transform:none}

/* kop van het venster */
#dbc-wortel .dbc-kop{
  display:flex; align-items:center; gap:12px;
  padding:14px 16px; background:var(--dbc-aubergine); color:#fff; flex:0 0 auto;
}
#dbc-wortel .dbc-kop__foto{
  width:44px;height:44px;flex:0 0 44px;border-radius:50%;overflow:hidden;
  aspect-ratio:1/1;border:2px solid rgba(255,255,255,.85);position:relative;
}
#dbc-wortel .dbc-kop__foto img{width:100%;height:100%;object-fit:cover;object-position:50% 28%}
#dbc-wortel .dbc-kop__foto .dbc-letter{
  background:var(--dbc-cream); color:var(--dbc-aubergine); font-size:19px;
}
#dbc-wortel .dbc-kop__wie{min-width:0;flex:1}
#dbc-wortel .dbc-kop__naam{
  font-family:Fraunces,Georgia,serif;font-weight:700;font-size:1.06rem;line-height:1.2;
  letter-spacing:-.01em;
}
#dbc-wortel .dbc-kop__staat{
  display:flex;align-items:center;gap:6px;font-size:.79rem;color:rgba(255,255,255,.82);margin-top:2px;
}
#dbc-wortel .dbc-kop__staat i{
  width:8px;height:8px;border-radius:50%;background:#5cd07a;flex:0 0 8px;
  box-shadow:0 0 0 0 rgba(92,208,122,.7); animation:dbc-pols 2.4s infinite;
}
@keyframes dbc-pols{
  0%{box-shadow:0 0 0 0 rgba(92,208,122,.65)}
  70%{box-shadow:0 0 0 7px rgba(92,208,122,0)}
  100%{box-shadow:0 0 0 0 rgba(92,208,122,0)}
}
#dbc-wortel .dbc-kop__sluit{
  width:44px;height:44px;flex:0 0 44px;display:grid;place-items:center;
  border-radius:50%;color:#fff;
}
#dbc-wortel .dbc-kop__sluit:hover{background:rgba(255,255,255,.16)}
#dbc-wortel .dbc-kop__sluit svg{width:19px;height:19px}

/* ── de berichten ────────────────────────────────────────────────────────── */
#dbc-wortel .dbc-loop{
  flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  padding:18px 16px 6px; display:flex; flex-direction:column; gap:12px;
}
#dbc-wortel .dbc-loop::-webkit-scrollbar{width:8px}
#dbc-wortel .dbc-loop::-webkit-scrollbar-thumb{background:var(--dbc-lijn);border-radius:8px}

#dbc-wortel .dbc-rij{display:flex;flex-direction:column;gap:8px;max-width:100%}
#dbc-wortel .dbc-bericht{
  max-width:84%; padding:11px 14px; border-radius:16px; font-size:.95rem;
  animation:dbc-op .3s cubic-bezier(.2,.8,.3,1) both;
  overflow-wrap:anywhere;
}
@keyframes dbc-op{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
#dbc-wortel .dbc-rij--zij .dbc-bericht{
  align-self:flex-start; background:var(--dbc-kaart); border:1px solid var(--dbc-lijn);
  border-bottom-left-radius:5px;
}
#dbc-wortel .dbc-rij--u{align-items:flex-end}
#dbc-wortel .dbc-rij--u .dbc-bericht{
  align-self:flex-end; background:var(--dbc-aubergine); color:#fff;
  border-bottom-right-radius:5px;
}

/* aan het typen */
#dbc-wortel .dbc-typt{
  align-self:flex-start; display:flex; align-items:center; gap:9px;
  font-size:.84rem; color:var(--dbc-grijs);
  background:var(--dbc-kaart); border:1px solid var(--dbc-lijn);
  border-radius:16px; border-bottom-left-radius:5px; padding:10px 14px;
  animation:dbc-op .3s ease both;
}
#dbc-wortel .dbc-punten{display:inline-flex;gap:4px;align-items:center}
#dbc-wortel .dbc-punten i{
  width:6px;height:6px;border-radius:50%;background:var(--dbc-amber);
  animation:dbc-wip 1.25s infinite ease-in-out;
}
#dbc-wortel .dbc-punten i:nth-child(2){animation-delay:.16s}
#dbc-wortel .dbc-punten i:nth-child(3){animation-delay:.32s}
@keyframes dbc-wip{0%,60%,100%{transform:translateY(0);opacity:.45}30%{transform:translateY(-5px);opacity:1}}

/* ── keuzeknoppen ────────────────────────────────────────────────────────── */
#dbc-wortel .dbc-keuzes{display:flex;flex-wrap:wrap;gap:8px;padding-top:2px}
#dbc-wortel .dbc-keuze{
  min-height:44px; padding:10px 16px; border-radius:999px;
  border:1.5px solid var(--dbc-aubergine); color:var(--dbc-aubergine);
  background:var(--dbc-kaart); font-size:.9rem; font-weight:600;
  display:inline-flex; align-items:center; transition:.16s;
}
#dbc-wortel .dbc-keuze:hover{background:var(--dbc-aubergine);color:#fff}
#dbc-wortel .dbc-keuze--vrij{border-style:dashed;border-color:var(--dbc-grijs);color:var(--dbc-grijs)}
#dbc-wortel .dbc-keuze--vrij:hover{background:var(--dbc-cream-2);color:var(--dbc-ink);border-color:var(--dbc-ink)}

/* ── productkaarten ──────────────────────────────────────────────────────── */
#dbc-wortel .dbc-kaarten{display:flex;flex-direction:column;gap:9px;padding-top:2px}
#dbc-wortel .dbc-kaart{
  background:var(--dbc-kaart); border:1px solid var(--dbc-lijn); border-radius:14px;
  padding:12px 13px; display:flex; flex-direction:column; gap:9px;
  animation:dbc-op .34s cubic-bezier(.2,.8,.3,1) both;
}
#dbc-wortel .dbc-kaart__top{display:flex;gap:10px;align-items:baseline}
#dbc-wortel .dbc-kaart__naam{
  font-weight:600; font-size:.94rem; line-height:1.3; flex:1; min-width:0;
}
#dbc-wortel .dbc-kaart__prijs{
  font-family:Fraunces,Georgia,serif; font-weight:700; font-size:.98rem;
  color:var(--dbc-aubergine); white-space:nowrap;
}
#dbc-wortel .dbc-kaart__waarom{
  font-size:.83rem; color:var(--dbc-grijs); line-height:1.45;
  border-left:2px solid var(--dbc-amber); padding-left:9px;
}
#dbc-wortel .dbc-kaart__voet{display:flex;align-items:center;gap:10px}
#dbc-wortel .dbc-kaart__som{font-size:.82rem;color:var(--dbc-grijs);margin-left:auto;white-space:nowrap}

#dbc-wortel .dbc-leg{
  min-height:44px; flex:1; padding:11px 14px; border-radius:999px;
  background:var(--dbc-amber); color:#fff; font-weight:600; font-size:.9rem;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  transition:.16s;
}
#dbc-wortel .dbc-leg:hover{background:var(--dbc-amber-licht)}
#dbc-wortel .dbc-leg svg{width:17px;height:17px;flex:0 0 17px}
/* het voorgestelde aantal in een pil. Dat is het hele punt van de kaart:
   wie twaalf pistolets wil, tikt één keer en heeft er twaalf. */
#dbc-wortel .dbc-leg__pil{
  /* wit, niet doorschijnend. Doorschijnend wit op amber werd een vale
     beige vlek waarin het cijfer nauwelijks opviel; gezien op een schermafdruk. */
  background:#fff; color:var(--dbc-ink); border-radius:999px;
  padding:2px 9px; font-weight:700; font-variant-numeric:tabular-nums;
  min-width:26px; text-align:center;
}

/* de teller die in de plaats van de knop komt */
#dbc-wortel .dbc-teller{
  display:none; align-items:center; gap:2px; flex:1;
  border:1.5px solid var(--dbc-lijn); border-radius:999px; padding:2px; background:var(--dbc-cream);
}
#dbc-wortel .dbc-kaart.is-in .dbc-leg{display:none}
#dbc-wortel .dbc-kaart.is-in .dbc-teller{display:flex}
#dbc-wortel .dbc-teller button{
  width:44px; height:44px; flex:0 0 44px; border-radius:50%;
  display:grid; place-items:center; color:var(--dbc-aubergine); background:var(--dbc-kaart);
  border:1px solid var(--dbc-lijn); transition:.14s;
}
#dbc-wortel .dbc-teller button:hover{background:var(--dbc-aubergine);color:#fff;border-color:var(--dbc-aubergine)}
#dbc-wortel .dbc-teller button svg{width:15px;height:15px}
#dbc-wortel .dbc-teller__aantal{
  flex:1; text-align:center; font-weight:700; font-size:1rem;
  font-variant-numeric:tabular-nums;
}
#dbc-wortel .dbc-teller__aantal small{display:block;font-size:.68rem;font-weight:500;color:var(--dbc-grijs)}

/* ── het mandje onderin ──────────────────────────────────────────────────── */
#dbc-wortel .dbc-mandje{
  flex:0 0 auto; display:none; align-items:center; gap:10px;
  padding:10px 12px 10px 14px;
  background:var(--dbc-cream-2); border-top:1px solid var(--dbc-lijn);
}
#dbc-wortel .dbc-mandje.is-aan{display:flex;animation:dbc-op .3s ease both}
#dbc-wortel .dbc-mandje__tekst{font-size:.88rem;font-weight:600;flex:1;min-width:0}
#dbc-wortel .dbc-mandje__tekst small{display:block;font-weight:400;color:var(--dbc-grijs);font-size:.76rem}
#dbc-wortel .dbc-mandje__knop{
  min-height:44px; padding:10px 16px; border-radius:999px;
  background:var(--dbc-aubergine); color:#fff; font-weight:600; font-size:.86rem;
  display:inline-flex; align-items:center; white-space:nowrap; transition:.16s;
}
#dbc-wortel .dbc-mandje__knop:hover{background:var(--dbc-aubergine-licht)}

/* ── het invoerveld ──────────────────────────────────────────────────────── */
#dbc-wortel .dbc-voet{flex:0 0 auto;background:var(--dbc-cream);border-top:1px solid var(--dbc-lijn)}
#dbc-wortel .dbc-invoer{display:flex;align-items:flex-end;gap:8px;padding:10px 10px 8px 14px}
/* ⚠️ Geen outline:none op het veld: wie met Tab tot hier komt zag niets. */
#dbc-wortel .dbc-invoer textarea:focus-visible{outline:3px solid #d0a343;outline-offset:2px}
#dbc-wortel .dbc-invoer textarea{
  flex:1; min-width:0; resize:none; border:0; background:none; outline:none;
  font:inherit; font-size:.95rem; line-height:1.45; color:var(--dbc-ink);
  max-height:104px; padding:11px 0; min-height:44px;
}
#dbc-wortel .dbc-invoer textarea::placeholder{color:var(--dbc-grijs);opacity:1}
#dbc-wortel .dbc-stuur{
  width:44px;height:44px;flex:0 0 44px;border-radius:50%;display:grid;place-items:center;
  background:var(--dbc-aubergine);color:#fff;transition:.16s;
}
#dbc-wortel .dbc-stuur:hover{background:var(--dbc-aubergine-licht)}
#dbc-wortel .dbc-stuur[disabled]{background:var(--dbc-lijn);color:var(--dbc-grijs);cursor:default}
#dbc-wortel .dbc-stuur svg{width:18px;height:18px}

/* de wettelijk verplichte regel, klein en grijs */
#dbc-wortel .dbc-openheid{
  padding:0 14px 10px; font-size:.72rem; color:var(--dbc-grijs); text-align:center;
}

/* ── de nette melding ────────────────────────────────────────────────────── */
/* ⚠️ GEEN 999px HIER. Op een telefoon wordt deze melding 195 breed en 177 hoog, en
   dan snijden de hoeken de eerste en de laatste regel af en steekt de tekst links en
   rechts buiten de vorm. Op een bureau viel dat niet op omdat hij daar plat is. */
#dbc-wortel .dbc-toost{
  pointer-events:none;
  position:absolute; left:50%; bottom:24px; transform:translate(-50%, 14px);
  max-width:min(420px, calc(100vw - 32px));
  background:var(--dbc-ink); color:var(--dbc-cream);
  padding:12px 20px; border-radius:16px; font-size:.88rem; font-weight:500;
  box-shadow:var(--dbc-schaduw); opacity:0;
  transition:opacity .24s ease, transform .24s cubic-bezier(.2,.8,.3,1);
  text-align:center;
}
#dbc-wortel .dbc-toost.is-aan{opacity:1;transform:translate(-50%,0)}

/* ── telefoon ────────────────────────────────────────────────────────────── */
@media (max-width:860px){
  /* ⛔ DE MANDKNOP VAN DE WINKEL staat op een telefoon vast RECHTSonder (58px hoog,
     16 van rechts, 20 van onder, z-index 60). De chat staat LINKSonder, dus de twee
     zitten naast elkaar en raken elkaar niet meer. Daarom mag de bubbel hier weer
     op dezelfde hoogte als de mandknop staan; hij hoefde er alleen boven toen ze
     nog dezelfde hoek deelden. */
  #dbc-wortel .dbc-bubbel{
    left:16px; bottom:calc(20px + var(--dbc-onder));
    width:58px; height:58px;
  }
  #dbc-wortel .dbc-bubbel .dbc-letter{font-size:23px}
  /* het ballonnetje loopt van rand tot rand, maar het puntje blijft boven de
     bubbel hangen: 22 van links, want daar staat ze nu.
     90px = 20 (de bubbel van onder) + 58 (haar hoogte) + 12 lucht. */
  #dbc-wortel .dbc-uitnodiging{
    right:16px; left:16px; width:auto;
    bottom:calc(90px + var(--dbc-onder));
  }
  #dbc-wortel .dbc-uitnodiging::after{left:22px}

  /* het venster neemt het scherm bijna volledig in */
  #dbc-wortel .dbc-venster{
    right:0; left:0; bottom:0; top:0;
    width:auto; max-width:none;
    /* dvh volgt de balk van de browser; de vh eronder is de terugval */
    height:100vh; height:100dvh;
    border:0; border-radius:0;
    transform:translateY(18px);
  }
  #dbc-wortel.is-open .dbc-bubbel{display:none}   /* sluiten doet u met de knop in de kop */
  #dbc-wortel .dbc-kop{padding:12px 12px 12px 14px;padding-top:calc(12px + env(safe-area-inset-top, 0px))}
  #dbc-wortel .dbc-bericht{max-width:88%}
  #dbc-wortel .dbc-voet{padding-bottom:var(--dbc-onder)}
  #dbc-wortel .dbc-toost{bottom:auto;top:calc(78px + env(safe-area-inset-top, 0px))}
}

/* ── wie liever geen beweging ziet ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  #dbc-wortel *,#dbc-wortel *::before,#dbc-wortel *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  #dbc-wortel .dbc-punten i{animation:none;opacity:.75}
  #dbc-wortel .dbc-kop__staat i{animation:none}
}

/* ── de foto op een productkaart ────────────────────────────────────────────
 *
 * ⛔ BROOD KOOP JE MET JE OGEN. Dezelfde vierkante uitsnede als op de
 *    winkelpagina, zodat de klant herkent wat zij voorstelt.
 *
 * ⚠️ De foto krijgt een VASTE hoogte en breedte. Zonder dat springt de hele
 *    lijst op het moment dat de plaatjes binnenkomen, precies wanneer de vinger
 *    al onderweg is naar "In mijn mandje".
 */
/* ⚠️ flex-direction MOET hier terug op row. .dbc-kaart staat op column, en dat
 *    blijft anders gewoon staan: dan komt de foto boven de tekst in plaats van
 *    ernaast. De rest van de kaart neemt de kolom over in __lijf. */
#dbc-wortel .dbc-kaart--beeld{display:flex;flex-direction:row;gap:11px;align-items:flex-start}
#dbc-wortel .dbc-kaart__lijf{flex:1;min-width:0;display:flex;flex-direction:column;gap:9px}
#dbc-wortel .dbc-kaart__beeld{
	flex:0 0 auto;width:58px;height:58px;border-radius:10px;overflow:hidden;
	background:var(--dbc-zacht,#f4efe8);
}
#dbc-wortel .dbc-kaart__beeld img{width:100%;height:100%;object-fit:cover;display:block}
/* ⚠️ De naam mag afbreken nu er minder plaats is; anders duwt één lange
 *    productnaam de prijs van de kaart af. */
#dbc-wortel .dbc-kaart--beeld .dbc-kaart__top{flex-wrap:wrap}
/* Een verwijzing in een bericht van haar. Onderstreept, want een link die er niet
   uitziet als een link, wordt niet aangeklikt. */
#dbc-wortel .dbc-link{color:inherit;text-decoration:underline;text-underline-offset:2px;word-break:break-word}
#dbc-wortel .dbc-link:hover{text-decoration-thickness:2px}