/* Den bakker — de brug tussen WooCommerce en de goedgekeurde vormgeving.
 *
 * ⛔ HIER STAAT ALLEEN WAT WOOCOMMERCE ZELF UITSPUWT. De vormgeving van de site staat in
 *    stijl.css; dat bestand is de demo en blijft ongewijzigd. Alles wat hieronder staat
 *    bestaat omdat WooCommerce HTML maakt die de demo niet kende: het bestelformulier,
 *    de meldingen, het mandje, het afrekenen en Mijn account.
 *
 * ⚠️ Wie hier iets bijzet: controleer eerst of het niet in stijl.css thuishoort. Twee
 *    bestanden die dezelfde knop opmaken, is precies hoe de vorige poging spaak liep.
 */

/* ══ MELDINGEN ═════════════════════════════════════════════════════════════
   "Product is toegevoegd", "Kies eerst een dag". WooCommerce zet die in kale lijsten. */
.woocommerce-notices-wrapper:empty { display: none; }

.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.wc-block-components-notice-banner {
  list-style: none;
  margin: 0 0 22px;
  padding: 14px 18px;
  border-radius: 12px;
  border: 1px solid var(--lijn, rgba(46, 26, 20, .12));
  background: var(--cream-2, #f4ece0);
  color: var(--ink, #2e1a14);
  font-size: .96rem;
  line-height: 1.55;
}
.woocommerce-error { border-color: rgba(168, 42, 42, .35); background: #fdf0ee; }
.woocommerce-message { border-color: rgba(94, 42, 102, .28); }
.woocommerce-message .button,
.woocommerce-error .button,
.woocommerce-info .button { float: right; margin-left: 14px; }

/* ══ HET BESTELFORMULIER OP DE PRODUCTPAGINA ═══════════════════════════════
   WooCommerce geeft `form.cart` met een `input.qty` en een `button.single_add_to_cart_button`.
   De demo had daar `.hoeveel` en `.knop--amber`; hieronder krijgen ze diezelfde vorm. */
.product__info form.cart {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 22px 0 6px;
}
.product__info .quantity {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--lijn, rgba(46, 26, 20, .16));
  border-radius: 999px;
  background: #fff;
  overflow: hidden;
}
.product__info .quantity input.qty {
  width: 62px;
  height: 48px;
  border: 0;
  background: transparent;
  text-align: center;
  font: inherit;
  font-weight: 600;
  color: inherit;
  /* ⚠️ De pijltjes van de browser weg: ze zijn 8 pixels breed en op een telefoon niet
     te raken. De min- en plusknop van het script nemen het over. */
  -moz-appearance: textfield;
  appearance: textfield;
}
.product__info .quantity input.qty::-webkit-outer-spin-button,
.product__info .quantity input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.product__info .quantity input.qty:focus-visible { outline: 2px solid var(--aubergine, #5e2a66); outline-offset: -2px; }

.hoeveel__knop {
  width: 44px;
  height: 48px;
  border: 0;
  background: transparent;
  font-size: 1.25rem;
  line-height: 1;
  color: inherit;
  cursor: pointer;
}
.hoeveel__knop:hover { background: var(--cream-2, #f4ece0); }

.woocommerce .product__info button.single_add_to_cart_button,
.product__info button.single_add_to_cart_button {
  min-height: 48px;
  padding: 0 30px;
  border: 0;
  border-radius: 999px;
  background: var(--amber, #c8791f);
  color: #fff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}
/* ⛔ DE SELECTIE MOET DRIE KLASSEN DIEP. WooCommerce zet zijn eigen paars (#7f54b3) via
   `.woocommerce button.button.alt`, en dat weegt zwaarder dan `.product__info button…`.
   Daardoor stond deze knop paars terwijl de demo hem amber heeft. Niet vereenvoudigen:
   meet de kleur na elke wijziging. */
.woocommerce .product__info button.single_add_to_cart_button:hover,
.product__info button.single_add_to_cart_button:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(200, 121, 31, .28);
}
.product__info button.single_add_to_cart_button:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }
.product__info .stock.out-of-stock { color: #a82a2a; font-weight: 600; }

/* De plusknop op een kaart is bezig zolang WooCommerce nog antwoordt. */
.plus.loading { opacity: .55; pointer-events: none; }
.plus.added::after { content: none; }

/* ══ DE LADE ═══════════════════════════════════════════════════════════════
   De demo tekende haar regels met JavaScript; hier komen ze van de server. Dezelfde
   vorm, maar met de klassen die WooCommerce-inhoud meebrengt. */
/**
 * ⛔ HET MIDDENSTUK VAN DE LADE SCROLT ALS ÉÉN GEHEEL.
 *
 *    Hier stond `display: contents`, waardoor de voortgangsbalk, de artikelen, de
 *    suggesties en het subtotaal allemaal LOSSE vakken in de lade werden die met elkaar om
 *    ruimte vochten. Dat ging mis op de manier die je verwacht: de suggesties gaven niets
 *    af, de artikelen kregen wat overbleef, en dat was op een telefoon 69 pixels van de
 *    844. Er was geen enkel artikel volledig te zien. Zodra de suggesties wel meekrompen
 *    werden die op hun beurt afgeknipt.
 *
 *    Zolang deze vakken om dezelfde hoogte moeten vechten, wint er altijd iemand ten koste
 *    van de rest. Nu vechten ze niet meer: kop en voet staan vast, en alles daartussen is
 *    één kolom die gewoon scrolt. Elk onderdeel krijgt de hoogte die het nodig heeft, en
 *    wie meer wil zien, scrolt. Dat is ook wat iedereen van een winkelmandje verwacht.
 *
 * ⚠️ `min-height: 0` is geen versiering. Een flexvak weigert standaard kleiner te worden
 *    dan zijn inhoud, en dan scrolt er niets maar wordt de voet van het scherm geduwd.
 */
.lade__binnen {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.lade__leeg { margin: 28px 22px; color: var(--ink-zacht, #6b5347); }
.telpil--leeg { display: none; }

/* ⚠️ Terwijl het mandje bijwerkt: doorzichtig maar NIET verspringend. Een lade die
   inklapt en weer uitklapt bij elke plus-klik voelt kapot. */
.lade.bezig .lade__binnen { opacity: .5; transition: opacity .15s ease; }

/* ══ MANDJE, AFREKENEN EN MIJN ACCOUNT ═════════════════════════════════════
   Die drie zijn blokken van WooCommerce. Hun eigen stijl blijft geladen (zie
   functions.php); hier wordt alleen het palet en de letter gelijkgetrokken. */
.woocommerce-cart .inhoud,
.woocommerce-checkout .inhoud,
.woocommerce-account .inhoud { --wp--preset--color--contrast: var(--ink, #2e1a14); }

/* ⛔ `color` MOET HIER MEE. Een aantal van deze knoppen is in werkelijkheid een `<a>`
   (bijvoorbeeld "Doorgaan naar afrekenen"), en de regel voor schakels in de inhoud gaf
   die de aubergine tekstkleur op een aubergine achtergrond: een knop zonder zichtbare
   tekst. Precies dat gebeurde op de mandjepagina. Niet weghalen. */
.wc-block-components-button:not(.is-link),
.woocommerce-cart .wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
  background: var(--aubergine, #5e2a66) !important;
  color: #fff !important;
  border-radius: 999px !important;
  min-height: 50px;
  font-weight: 600;
}
.wc-block-components-button:not(.is-link) .wc-block-components-button__text { color: #fff; }
.wc-block-components-button:not(.is-link):hover { background: #4a2151 !important; }

.wc-block-components-title,
.wc-block-cart__totals-title,
.wc-block-components-checkout-step__title {
  font-family: Fraunces, Georgia, serif;
  color: var(--ink, #2e1a14);
}

.wc-block-components-text-input input,
.wc-block-components-select select,
.wc-block-components-textarea {
  border-radius: 10px !important;
  font-family: Inter, system-ui, sans-serif;
}
.wc-block-components-text-input input:focus,
.wc-block-components-select select:focus {
  outline: 2px solid var(--aubergine, #5e2a66);
  outline-offset: 1px;
}

/* Het dagveld van onze eigen plug-in springt eruit: het is de enige keuze op de
   afrekenpagina die de klant echt moet maken. */
.wc-block-components-address-form .wc-block-components-select:has(select[name*="bestel-dag"]),
#dlb_dag_field {
  padding: 14px 16px;
  border: 1px solid var(--aubergine, #5e2a66);
  border-radius: 12px;
  background: var(--cream-2, #f4ece0);
}

/* ══ PAGINA-INHOUD ═════════════════════════════════════════════════════════
   Wat de bakker zelf in de bewerker typt (Over ons, Contact) moet dezelfde maten
   krijgen als de rest van de site. */
/**
 * ⚠️ 76 tekens breed is de LEESBREEDTE, en die is er voor lopende tekst: Over ons,
 *    Openingsuren, Contact. Wie langere regels leest, raakt de volgende regel kwijt.
 *    Dat blijft dus zo voor gewone pagina's.
 */
.inhoud { max-width: 76ch; }
.inhoud > * + * { margin-top: 1.1em; }
.inhoud h2 { font-family: Fraunces, Georgia, serif; font-size: clamp(1.5rem, 3vw, 2rem); margin-top: 1.8em; }
.inhoud h3 { font-family: Fraunces, Georgia, serif; font-size: 1.2rem; margin-top: 1.5em; }
.inhoud ul, .inhoud ol { padding-left: 1.3em; }
.inhoud li + li { margin-top: .4em; }
/* ⚠️ `:not(...)` erbij: knoppen zijn ook schakels, en die hebben hun eigen kleur. */
.inhoud a:not(.wp-element-button):not(.wc-block-components-button):not(.knop) {
  color: var(--aubergine, #5e2a66);
  text-underline-offset: 2px;
}
.inhoud .wp-block-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 28px; }
.inhoud .wp-block-column > * + * { margin-top: .8em; }
.inhoud iframe { max-width: 100%; border-radius: 14px; }
.inhoud .wp-block-button__link {
  display: inline-block;
  background: var(--aubergine, #5e2a66);
  color: #fff;
  border-radius: 999px;
  padding: 14px 28px;
  font-weight: 600;
  text-decoration: none;
}

.product__prijs--groot { font-size: 1.6rem; }
.briefvorm__uitleg { margin: 0 0 12px; }

/* ══ TELEFOON ══════════════════════════════════════════════════════════════ */
@media (max-width: 760px) {
  .product__info form.cart { gap: 10px; }
  .woocommerce .product__info button.single_add_to_cart_button,
.product__info button.single_add_to_cart_button { flex: 1 1 auto; }
  /* ⚠️ 48 pixels is de ondergrens om te raken met een duim. Niet verkleinen. */
  .hoeveel__knop, .product__info .quantity input.qty { height: 48px; }
}

/* De prijs en de prullenbak naast elkaar, rechts in de regel.
   In de demo stond dat als losse stijl in het HTML-attribuut; hier hoort het in het
   stijlbestand, want deze regel wordt op drie plaatsen getekend. */
.regel__rechts { display: flex; gap: 8px; align-items: flex-start; }

/* ⚠️ Het subtotaal zit in `.lade__binnen`, want het moet mee verversen zodra er iets
   bij komt. Daardoor valt het BUITEN `.lade__voet` en dus buiten diens ruimte; zonder
   deze regel plakt het bedrag tegen de rechterrand. */
.lade .lade__binnen > .subtotaal {
  padding: 16px 24px 0;
  margin-bottom: 0;
}

/* ⛔ WOOCOMMERCE HANGT NA ELKE TOEVOEGING EEN "WINKELWAGEN BEKIJKEN" ONDER DE KNOP.
   In dit ontwerp is die knop een rond plusje van 44 pixels binnen de kaart; die schakel
   duwt de kaart uit elkaar en de lade schuift toch al open. Weg ermee, ook in CSS en
   niet alleen in het script: dan is hij nooit even zichtbaar. */
.rooster a.added_to_cart,
.kaart a.added_to_cart { display: none !important; }

/* ⛔ DE TOAST SCHUIFT WEG OVER ZIJN EIGEN HOOGTE (translateY 160%). Zolang er geen tekst
   in staat, is die hoogte alleen de padding, en dan schuift hij te weinig weg en piept
   er een zwart randje rechtsonder uit. Op de telefoon viel dat meteen op. Leeg dus
   helemaal niet tonen; zodra er tekst in staat, doet de animatie uit stijl.css zijn werk. */
.mandje:empty { display: none; }


/* ══ MANDJE EN AFREKENEN OP EEN GROOT SCHERM ═══════════════════════════════
 * ⛔ HIER STOND HET AFREKENEN OP 836 PIXELS IN EEN VENSTER VAN 1440. Dat kwam door de
 *    leesbreedte van 76 tekens hierboven: die is bedoeld voor lopende tekst en werd ook
 *    op het afrekenformulier losgelaten. Het gevolg was een formulier dat er klein en
 *    verloren uitzag op een laptop, met velden van 506 pixels en een besteloverzicht van
 *    293. Nagemeten op 1440 en op 1920: allebei 836, want de cap keek niet naar het
 *    scherm.
 *
 * ⛔ WOOCOMMERCE SCHAKELT OP CONTAINERBREEDTE, NIET OP SCHERMBREEDTE. Zijn afrekenblok
 *    gebruikt `@container (min-width: 700px)` om naar twee kolommen te gaan. Alles wat
 *    hieronder de breedte van dat blok bepaalt, bepaalt dus ook of de klant één of twee
 *    kolommen ziet. Wie hier iets versmalt tot onder 700: dan klapt het op een laptop
 *    terug naar één kolom. Meet het na, kijk er niet naar.
 */
.woocommerce-cart .inhoud,
.woocommerce-checkout .inhoud,
.woocommerce-account .inhoud {
  max-width: none;
}

/* Meer van het scherm gebruiken dan de 1280 van de leespagina's, maar niet eindeloos:
   een adresveld van duizend pixels leest niet beter, het ziet er alleen leeg uit. */
.woocommerce-cart .sectie > .wikkel,
.woocommerce-checkout .sectie > .wikkel,
.woocommerce-account .sectie > .wikkel {
  max-width: 1460px;
}

@media (min-width: 1000px) {
  /* Het formulier krijgt de ruimte, het overzicht blijft leesbaar smal en schuift mee. */
  .woocommerce-checkout .wc-block-checkout__main { flex: 1 1 auto; }
  .woocommerce-checkout .wc-block-checkout__sidebar { flex: 0 0 400px; max-width: 400px; }

  /**
   * ⛔ GEEN BOVENGRENS OP DE VELDEN. Even stonden ze op 780 pixels terwijl de kolom
   *    ernaast 992 breed was. Dat gaf een zichtbaar gat: de adresvelden stopten
   *    halverwege, de keuzevakken voor verzenden en betalen liepen wél door tot het
   *    einde, en dan lijkt de pagina scheefgezakt in plaats van ruim.
   *
   *    Alles vult nu dezelfde kolom en lijnt links en rechts uit. Twee velden naast
   *    elkaar worden dan ongeveer 485 breed; dat is royaal voor een voornaam, maar een
   *    rechte kantlijn weegt zwaarder dan een veld dat precies past.
   */
}

/* ⛔ ONDER 1000 NIETS AANRAKEN. Daar doet WooCommerce zelf het werk met zijn
   containervragen: onder de 700 pixels containerbreedte klapt alles netjes onder elkaar
   en komt het besteloverzicht bovenaan als uitklapbaar blok. Dat is precies goed op een
   telefoon en het mag niet overschreven worden. */

/* ══ HET PRODUCT VLIEGT NAAR HET MANDJE ═══════════════════════════════════════
 * ⚠️ `position:fixed` en een hoge z-index: de kopie moet los van de pagina over alles
 *    heen kunnen bewegen, ook over de kopbalk. `pointer-events:none` want hij mag
 *    onderweg nooit een klik opvangen.
 */
.vliegt {
  position: fixed;
  z-index: 200;
  border-radius: 12px;
  object-fit: cover;
  pointer-events: none;
  opacity: .95;
  box-shadow: 0 12px 30px -8px rgba(43, 33, 24, .45);
  transition: transform .62s cubic-bezier(.5, -0.2, .3, 1), opacity .62s ease-in;
  will-change: transform, opacity;
}

/* het mandje geeft een tikje terug zodra het plaatje aankomt */
.mand--tik { animation: mandtik .42s cubic-bezier(.3, 1.4, .5, 1); }
@keyframes mandtik {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.28); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .vliegt { display: none; }
  .mand--tik { animation: none; }
}

/* ══ HET AANTAL IN DE KOP VAN DE LADE ════════════════════════════════════════ */
.lade__tel {
  font-size: .86rem;
  color: var(--grijs, #6b5347);
  background: var(--cream-2, #f4ece0);
  padding: 4px 12px;
  border-radius: 999px;
  white-space: nowrap;
}
.lade__tel--leeg { display: none; }

/* ══ SUGGESTIES IN DE LADE ═══════════════════════════════════════════════════
 * ⛔ DIT VULT DE LEGE RUIMTE DIE DE PARTNER AANWEES. Met één artikel in het mandje
 *    stond er een half scherm wit; nu staat daar waar een bakker het meeste aan
 *    verdient. Een baan die zijwaarts schuift en niet een rooster: op een telefoon
 *    past er anders maar één ding onder elkaar en moet de klant scrollen langs iets
 *    wat hij niet gevraagd heeft.
 */
.upsells { padding: 12px 0 2px; border-top: 1px solid var(--lijn, rgba(46, 26, 20, .12)); }
.upsells:empty { display: none; }
.upsells h3 {
  font-family: Fraunces, Georgia, serif;
  font-size: .95rem; font-weight: 600;
  margin: 0 0 8px; padding: 0 24px;
}
.upsellbaan {
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none; -ms-overflow-style: none;
  /* ⚠️ dezelfde insprong als de lade zelf, anders begint de eerste tegel tegen de rand */
  scroll-padding-inline: 24px;
  padding-bottom: 4px;
}
.upsellbaan::-webkit-scrollbar { display: none; }
.upsellrij { display: flex; gap: 12px; margin: 0; padding: 0 24px; list-style: none; }
/* ⚠️ De rechterpadding van een flexbaan telt niet mee in scrollWidth; zonder dit
   blokje kan de laatste tegel niet volledig in beeld geschoven worden. */
.upsellrij::after { content: ""; flex: 0 0 1px; }

.upsellkaart {
  /* ⚠️ 132 naar 112 pixels. De suggesties zijn een bijzaak in deze lade; ze mogen niet
     breder zijn dan nodig om het product te herkennen. Dit scheelt samen met de kleinere
     tekst zo'n 45 pixels hoogte, en die gaan naar de artikelen. */
  position: relative; flex: 0 0 112px; scroll-snap-align: start;
  background: #fff; border: 1px solid var(--lijn, rgba(46, 26, 20, .12));
  border-radius: 12px; overflow: hidden;
}
.upsellkaart__link { display: block; text-decoration: none; color: inherit; }
/* ⚠️ `height:auto` staat er met opzet bij. Zonder die regel wint elke geërfde
   `height`-waarde van de verhouding, en dan wordt het vierkant een streepje. Precies
   wat er gebeurde toen deze kaarten nog `.samenrij` heetten. */
.upsellkaart img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
.upsellkaart b {
  display: block; padding: 6px 9px 0; font-size: .78rem; font-weight: 600; line-height: 1.25;
  /* ⚠️ ÉÉN regel in plaats van twee. Twee regels maakten elke tegel 16 pixels hoger, ook
     de tegels met een korte naam, want ze staan naast elkaar en worden even hoog. Wie de
     volledige naam wil, tikt de tegel aan. */
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}
.upsellkaart small { display: block; padding: 1px 9px 8px; font-size: .8rem; font-weight: 600; }
.upsellkaart .plus--klein {
  position: absolute; right: 6px; top: 6px;
  width: 32px; height: 32px; min-height: 32px; padding: 0;
}
.upsellkaart .plus--klein svg { width: 15px; height: 15px; }

/* ⛔ 32px IS TE KLEIN VOOR EEN DUIM, MAAR DE KNOP MAG NIET GROTER WORDEN. De tegel is maar
   130px breed; een knop van 44px vreet daar een kwart van op en gaat over de foto staan.
   Daarom blijft de knop 32px op het OOG en wordt alleen het RAAKVLAK 44px, met een
   onzichtbaar vlak eromheen. Nagemeten met de duimtest op 390px: raak op de eerste poging.

   ⚠️ Het vlak mag niet groter dan de rand van de tegel, anders raakt de bezoeker de
      plusknop van de tegel ernaast. Vandaar -6px, precies de afstand tot de rand. */
.upsellkaart .plus--klein::after {
  content: ""; position: absolute; inset: -6px; border-radius: 50%;
}

/* ══ DE VARIANTEN OP EEN PRODUCTPAGINA ═══════════════════════════════════════
 * ⛔ WOOCOMMERCE LEVERT HIER EEN KALE `<select>` ZONDER ENIGE OPMAAK. Nagemeten op een
 *    telefoon: 17 pixels hoog. Dat is niet klein, dat is onaanraakbaar, en het is de enige
 *    manier om een afstand voor de loop te kiezen op de productpagina.
 *
 * ⚠️ 16px lettergrootte is geen smaak maar techniek: onder 16px zoomt Safari op een iPhone
 *    bij het aantikken van een keuzelijst in, en dan staat de bezoeker met een half scherm
 *    naar het formulier te kijken.
 */
.product__info .variations { width: 100%; border: 0; margin: 0 0 18px; }
.product__info .variations th,
.product__info .variations td { display: block; padding: 0; text-align: left; }
.product__info .variations th label { font-size: .88rem; font-weight: 600; margin-bottom: 6px; display: block; }
.product__info .variations select {
  width: 100%; min-height: 48px; padding: 12px 14px;
  border: 1px solid rgba(0, 0, 0, .18); border-radius: 12px;
  font: inherit; font-size: 1rem; background: #fff; color: inherit;
}
.product__info .variations select:focus-visible {
  outline: 2px solid var(--aubergine, #5e2a66); outline-offset: 1px;
}
.product__info .variations .reset_variations {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: .88rem; text-decoration: underline;
}
.product__info .woocommerce-variation-price { margin: 0 0 14px; font-size: 1.3rem; font-weight: 700; }

/* ══ DE VOET VAN DE LADE ═════════════════════════════════════════════════════ */
.lade__voet .knop--breed { margin-bottom: 12px; }
/**
 * Het merkteken van Bancontact.
 *
 * ⛔ `.troost img.troost__betaal` EN NIET `.troost__betaal`. WooCommerce zet
 *    `.woocommerce img { height: auto }` neer, en dat weegt zwaarder (0,1,1) dan een kale
 *    klasse (0,1,0). Met alleen de klasse bleef het merkteken op zijn volle 101 bij 42
 *    staan: het lag dwars over "Vers gebakken" heen en duwde "Zondag aan huis" van het
 *    scherm. Gemeten in de browser: berekende hoogte 42px terwijl de regel 13px vroeg.
 *
 * ⚠️ Op de hoogte instellen en de breedte laten volgen, anders wordt het merk uitgerekt.
 */
.troost img.troost__betaal { height: 13px; width: auto; display: block; flex: 0 0 auto; }

/* de Google-regel onder de knop */
.googlebalk {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 10px; padding: 8px 10px;
  border: 1px solid var(--lijn, rgba(46, 26, 20, .12)); border-radius: 10px;
  text-decoration: none; color: inherit; font-size: .84rem;
}
.googlebalk__g svg { width: 15px; height: 15px; display: block; }
.googlebalk .sterren { display: inline-flex; gap: 1px; color: #e8a020; }
.googlebalk .sterren svg { width: 13px; height: 13px; }
.googlebalk .ster--leeg { color: rgba(43, 33, 24, .2); }
.googlebalk__tekst { opacity: .8; }
.googlebalk__tekst b { opacity: 1; }

/* ⛔ HET WITTE GAT UIT DE FEEDBACK. De lijst met artikelen stond op `flex:1` en pakte
   dus ALLE overgebleven hoogte: met één broodje in het mandje bleef er een half scherm
   leeg tussen het artikel en de suggesties. Nu krimpt de lijst tot haar inhoud, staan de
   suggesties er meteen onder, en zakt alleen het subtotaal naar beneden.

   ⚠️ `flex:0 1 auto` en niet `flex:none`: met veel artikelen moet de lijst nog altijd
   kunnen krimpen en zelf scrollen, anders duwt ze de afrekenknop van het scherm. */
/**
 * ⚠️ Geen eigen scrollvak meer voor de artikelen: het middenstuk scrolt nu als geheel.
 *    Twee scrollvakken in elkaar is op een telefoon een gok welke er meebeweegt.
 */
.lade .lade__lijst { flex: 0 0 auto; overflow: visible; }

/**
 * ⛔ DE SUGGESTIES MOETEN ALS EERSTE RUIMTE INLEVEREN, NIET DE ARTIKELEN.
 *
 *    Hier stond `flex: 0 0 auto`, dus de suggesties gaven NIETS af en al het krimpen kwam
 *    bij de lijst met artikelen terecht. Nagemeten met drie artikelen in het mandje op een
 *    telefoon: de suggesties namen 253 pixels, de artikelen 69, en er was geen enkel
 *    artikel volledig te zien. Precies omgekeerd aan waar deze lade voor dient.
 *
 *    Met een krimpgewicht van 8 tegen 1 leveren de suggesties acht keer sneller in dan de
 *    artikelen. Ze verdwijnen nooit helemaal: `min-height` houdt er altijd een strook van
 *    over, en `overflow:hidden` zorgt dat een half afgesneden tegel netjes wegvalt in
 *    plaats van over de rand te hangen.
 *
 * ⚠️ De lijst blijft op `0 1 auto` staan en niet op `1 1 auto`. Dat is de oude fix tegen
 *    het witte gat: met één broodje in het mandje mag de lijst niet uitrekken tot een half
 *    leeg scherm. Zie de opmerking hierboven.
 */
.lade .upsells { flex: 0 0 auto; }
/* ⚠️ GEEN `margin-top:auto` meer. Dat duwde het subtotaal naar de onderkant van de lade,
   wat klopte toen alles een los vak was. In een scrollende kolom zou het een leeg gat
   maken tussen de suggesties en het bedrag. Het staat nu gewoon onder de rest. */
.lade .lade__binnen > .subtotaal {
  margin-top: 0;
  /**
   * ⛔ HET BEDRAG MOET ALTIJD IN BEELD BLIJVEN. Sinds het middenstuk als geheel scrolt,
   *    zakte het subtotaal onder de suggesties weg en zag de klant nergens meer wat hij
   *    ging betalen voor hij op "Bestelling afronden" drukte. Met `sticky` blijft het aan
   *    de onderrand van het scrollvak plakken, net boven de knop.
   *
   * ⚠️ Met een eigen achtergrond en een lijn erboven, anders scrollen de suggesties er
   *    doorheen en wordt het onleesbaar.
   */
  position: sticky;
  bottom: 0;
  /* ⚠️ Een stapelnummer is hier nodig, geen luxe. De plusknoppen op de suggestietegels
     staan absoluut gepositioneerd en tekenden zich dwars DOOR het plakkende subtotaal
     heen; op een schermafdruk stond er "Subtotaal (+) € 25,6(+)". */
  z-index: 3;
  background: var(--cream, #faf5ee);
  border-top: 1px solid var(--lijn, rgba(46, 26, 20, .12));
  padding: 12px 24px;
}

/* ══ DE GOOGLE-STROOK OP HET AFREKENEN ═══════════════════════════════════════ */
.afreken-gerust {
  max-width: 620px;
  margin: 28px 0 0;
  padding-top: 22px;
  border-top: 1px solid var(--lijn, rgba(46, 26, 20, .12));
}
.afreken-gerust .googlebalk { display: inline-flex; }
.kortrevs { display: grid; gap: 12px; margin-top: 14px; }
.kortrev { margin: 0; }
.kortrev blockquote {
  margin: 0; font-size: .94rem; line-height: 1.55; color: var(--ink, #2e1a14);
}
/* ⚠️ De tekens zelf en geen CSS-escape. Met een backslash erin schreef het bestand
   `\\201C` weg en zette de browser dat letterlijk op het scherm: de klant las
   \201CPROEF een zin... Nagemeten op de afrekenpagina. */
.kortrev blockquote::before { content: "“"; }
.kortrev blockquote::after { content: "”"; }
.kortrev figcaption { font-size: .84rem; opacity: .6; margin-top: 3px; }

/* ══ DE TWEE KOLOMMEN VAN HET WINKELMANDJE ══════════════════════════════════
 * ⛔ NIET EVEN HOOG REKKEN. WooCommerce legt het mandje neer als een flexrij, en die
 *    rekt standaard beide kolommen tot de hoogte van de langste. Met één product in
 *    het mandje is de rechterkolom (totaal, uitleg, knop) ruim twee keer zo hoog als
 *    de productlijst, en dan staat er links een leeg vlak van zo'n 240 pixels onder
 *    dat ene broodje. Zo is het gemeld: "deze ziet er niet uit en is gebugged".
 *    Nagemeten: lijst 188px hoog in een kolom van 427px.
 *
 * ⚠️ ALLEEN OP EEN BREED SCHERM. Op een telefoon staan die kolommen ONDER elkaar, en
 *    dan betekent flex-start dat ze allebei naar hun inhoud krimpen in plaats van de
 *    volle breedte te nemen. Het mandje wordt dan een smal kolommetje. De grens van
 *    782px is dezelfde die WooCommerce zelf gebruikt om over te schakelen.
 */
@media ( min-width: 782px ) {
	.wp-block-woocommerce-cart .wc-block-components-sidebar-layout {
		align-items: flex-start;
	}
}