/* ==========================================================================
   VDM testshop – eigen stijl van Daan
   Dit bestand komt NA de EasyFlor-stijl, dus wat hier staat wint.
   Opslaan + pagina verversen = meteen zichtbaar (geen cache).
   Lukt iets niet? Zet er !important achter.
   Tip: rechtsklik op iets in de shop > "Inspecteren" om de naam (class) te vinden.
   ========================================================================== */

/* --- Kaartmaat (17-10, zoals Heyl; 18-10 12px kleiner) -----------------------------------------
   EasyFlor: kaart 245 breed, foto 245x164 (3:2).
   Nu: kaart 233 breed (231 + rand), foto 231x231 vierkant, foto vult het vak precies
   (eigen.js vraagt de foto vierkant op, bij voorkeur het origineel).
   Andere maat? Pas 231 / 233 / 235 / 241 (en hoogtes 423/409/393/379) hieronder overal gelijk aan.    */
/* Meerekken (18-10, Daan: "EasyFlor vult de rij altijd netjes op"): EasyFlor rekent kolommen =
   breedte ÷ proefkaartje (.layout-full > .item, vast 241) en laat de echte kaarten groeien (flex-grow).
   De kaart zelf blijft 233 breed in het midden van zijn vak; alleen de ruimte ertussen groeit mee. */
.layout-full > .item { width: 236px !important; height: 412px !important; margin: 0 !important; flex: 0 0 auto !important; }
.layout-full .page-container > .item { width: 236px !important; height: 412px !important; margin: 0 !important; flex: 1 0 236px !important; }
/* Bloemen-lijst (lijstgroep 1153): zonder dubbele Lengte max 4 kenmerken -> kaart een regel (14px) lager.
   Planten hebben er 5 (Hoogte, Potmaat, Rijpheid...) -> blijft hoog. Herkenning via het kenmerk op het
   productblok (geen script: EasyFlor meet de kaartmaat al bij het opbouwen, met een proefkaartje > .item). */
.element-product.layout-full[data-listgroupid="ListPreOrderGroups/1153"] > .item,
.element-product.layout-full[data-listgroupid="ListPreOrderGroups/1153"] .page-container > .item { height: 398px !important; }
.element-product.layout-full[data-listgroupid="ListPreOrderGroups/1153"] .product { height: 368px !important; }
/* De tussenruimte (8px) zit IN de kaartmaat (241 x 423), niet als gap: EasyFlor rekent de positie van
   elk blok van 25 kaarten uit met de kaartmaat; een losse gap telt het niet mee -> rijen over elkaar. */
.layout-full .group-empty { width: 222px !important; margin: 0 auto !important; }
.layout-full .product { width: 220px !important; height: 382px !important;  /* tekstruimte 112px = hoogste kaart (5 kenmerken + omschrijving), gemeten 17-10 */ margin: 0 auto 4px auto !important; }
.layout-full .product .image { height: 224px !important; }
.layout-full .product .image .image-spacer,
.layout-full .product .image .image-spacer-2 {
  height: 220px !important; width: 220px !important; background: #fff !important; overflow: hidden !important;
}
.layout-full .product .image .image-spacer img,
.layout-full .product .image .image-spacer-2 img {
  height: 220px !important; width: 220px !important; max-height: 220px !important; max-width: 220px !important; object-fit: cover;
}
.layout-full .product .history  { height: 220px !important; }
/* (3-11, Daan) hartje rechts ONDER HET VLAGGETJE (eerst in de blauwe groepsband): alleen dunne rand, aangeklikt (data-is-favorite=True) gevuld rood.
   Eigen SVG via mask i.p.v. EasyFlor's favorite_outlined.svg (die is rood + wit vakje). Eerder geprobeerd en afgekeurd: naast de naam, in de foto-hoek, klein onder de vlag. */
.layout-full .product { overflow: visible !important; }
.layout-full .product .favorite { top: 226px !important; right: 2px !important; left: auto !important; width: 18px !important; height: 18px !important;  /* (3-11 definitief, Daan) op de oorspronkelijke plek naast de naam (EasyFlor: top 224, 28 px), maar kleiner (18) en subtieler; geprobeerd en afgekeurd: foto-hoek linksboven, groepsband, onder de vlag, foto-hoek rechtsonder */
  margin: 0 !important; padding: 0 !important; background: none !important; box-shadow: none !important; border: 0 !important; z-index: 5; cursor: pointer; }
.layout-full .product .favorite i { display: block; width: 18px !important; height: 18px !important; margin: 0 !important; background: none !important; background-image: none !important;
  color: transparent !important; font-size: 0 !important; filter: none !important;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='none' stroke='black' stroke-width='1.5' stroke-linejoin='round' d='M12 20.5l-1.3-1.2C5.6 14.7 2.5 11.9 2.5 8.5 2.5 5.7 4.7 3.5 7.5 3.5c1.6 0 3.1.7 4.5 2.1 1.4-1.4 2.9-2.1 4.5-2.1 2.8 0 5 2.2 5 5 0 3.4-3.1 6.2-8.2 10.8z'/></svg>") center / contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='none' stroke='black' stroke-width='1.5' stroke-linejoin='round' d='M12 20.5l-1.3-1.2C5.6 14.7 2.5 11.9 2.5 8.5 2.5 5.7 4.7 3.5 7.5 3.5c1.6 0 3.1.7 4.5 2.1 1.4-1.4 2.9-2.1 4.5-2.1 2.8 0 5 2.2 5 5 0 3.4-3.1 6.2-8.2 10.8z'/></svg>") center / contain no-repeat;
  background-color: #c42530 !important; }  /* dunne rode rand (Daan 3-11: "mag wel rood"), gevuld rood als favoriet */
.layout-full .product .favorite.active i {  /* EasyFlor zet klasse active na de klik (Site.js), niet het attribuut */
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M12 21.3l-1.3-1.2C5.6 15.5 2.5 12.7 2.5 9.3 2.5 6.5 4.7 4.3 7.5 4.3c1.6 0 3.1.7 4.5 2.1 1.4-1.4 2.9-2.1 4.5-2.1 2.8 0 5 2.2 5 5 0 3.4-3.1 6.2-8.2 10.8z'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M12 21.3l-1.3-1.2C5.6 15.5 2.5 12.7 2.5 9.3 2.5 6.5 4.7 4.3 7.5 4.3c1.6 0 3.1.7 4.5 2.1 1.4-1.4 2.9-2.1 4.5-2.1 2.8 0 5 2.2 5 5 0 3.4-3.1 6.2-8.2 10.8z'/></svg>");
  background-color: #c42530 !important; }

/* (20-10, tussenmaat Daan) kaart 222 breed, foto 220x220, 14 px lucht in de kaartmaat (236); Heyl = 210/224. Backup eigen.css.bak-20261020-heylmaat.
   (20-10 later) VAL: EasyFlor zet vóór elk blok van 25 kaarten een `spacer start` van n×224 px MET flex-grow n.
   Kaarten vast (flex 0 0) + spacer groeit = blok 2 schuift opzij (Amaryllis-verschuiving). Dus óf alles vast
   (dan ook `.spacer { flex-grow: 0 }`), óf alles evenredig groeien (gekozen: kaarten flex 1 0 236px, kaart 210
   gecentreerd, lucht groeit mee). De rest-witruimte wordt klein gehouden door het filtervak (aside, zie onder). */
/* --- Minder ruimte tussen de vakken ---------------------------------------
   EasyFlor laat de kaarten uitrekken om de rij te vullen (flex 1 1 auto). */
.element-product .page .page-container { gap: 0 !important; justify-content: flex-start !important; }
/* Hulpblokje aan begin/eind van een blok = n kaarten breed, maar EasyFlor laat het ook meegroeien
   (flex-grow n, voor uitgerekte kaarten). Met vaste kaarten schoof dat kaarten opzij -> uit. */
/* (18-10) spacer groeit weer mee (EasyFlor: flex-grow n) nu de kaarten ook groeien -> laatste rij lijnt uit. */

/* --- Kop artikelgroep: blauw vak boven de kaart, naam in het midden, fijn
   geschreven; nieuwe groep NIET rood (zelfde blauw) ----------------------- */
.layout-full .group,
.item .group.group-new {
  background: #0157a4 !important; color: #fff !important;
  height: 22px !important; line-height: 22px !important;
  font-size: 13px !important; font-weight: 500 !important; letter-spacing: .04em;
  text-align: center !important; padding: 0 !important; border: 0 !important;
  border-radius: 5px 5px 0 0 !important; width: 222px !important; box-sizing: border-box !important; margin: 0 auto !important;  /* EasyFlor: margin-bottom -5px = kaart over het vak */
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.layout-full .group-empty { height: 22px !important; }
/* foto bovenaan recht (EasyFlor: 10px afgerond -> hoekjes onder het blauwe vak) */
.layout-full .product .image,
.layout-full .product .image .image-spacer,
.layout-full .product .image .image-spacer img,
.layout-full .product .image .status {
  border-top-left-radius: 0 !important; border-top-right-radius: 0 !important;
  width: 220px !important; height: 220px !important; max-width: none !important; max-height: none !important;  /* (3-11, Daan) groene laag over de HELE vierkante foto (EasyFlor rekent met 245x164) */
}
/* kaart sluit naadloos aan op het blauwe vak: geen bovenrand, rechte bovenhoeken */
.layout-full .item .group + .product,
.layout-full .item .group-empty + .product {
  border-top: 0 !important; border-top-left-radius: 0 !important; border-top-right-radius: 0 !important;
}

/* --- Tekst op de kaart iets kleiner -------------------------------------- */
.layout-full .product .content { padding: 4px 5px !important; }
.layout-full .product .content .description h2 { font-size: .88em !important; line-height: 1.3em !important; padding-right: 11px !important; box-sizing: border-box; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }  /* (3-11) ruimte voor het hartje in de hoek: naam stopt met … en loopt er niet doorheen */
.layout-full .product .content .description p  { font-size: .68em !important; line-height: 1.3em !important; }
.layout-full .product .content .features dl    { font-size: .68em !important; display: grid !important; grid-template-columns: auto 1fr; column-gap: 6px; }
/* naamkolom zo breed als de langste naam op de kaart (EasyFlor: vast 30% -> "Herkoms") */
/* naam (Kweker, Lengte...) grijs en onopvallend; waarde erachter donker en iets dikker */
.layout-full .product .content .features dl dt { flex: none !important; white-space: nowrap; color: #999 !important; font-weight: 400 !important; font-style: normal !important; }
.layout-full .product .content .features dl dd { flex: none !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0; color: #000 !important; font-weight: 400 !important; }  /* = stijl omschrijving */
.layout-full .product .content .features dl dt,
.layout-full .product .content .features dl dd { line-height: 1.3em !important; }
.layout-full .product .footer .multiple-prices > div .price .prefix,
.layout-full .product .footer .multiple-prices > div .price .decimals { font-size: 1.3em !important; }
.layout-full .product .footer .multiple-prices > div .price { white-space: nowrap !important; }
.layout-full .product .footer .multiple-prices > div .quantity { font-size: .85em !important; }

/* --- Bestelvakje: alles op één lijn, verticaal gecentreerd ---------------
   links: invulveld + "x 20" + plusknop; rechts: prijs + pijltje.
   (EasyFlor: elk onderdeel op een eigen hoogte, spatie na de komma)       */
.layout-full .product .footer { padding: 6px 0 !important; }
.layout-full .product .footer .multiple-prices {
  display: flex !important; align-items: center !important; justify-content: flex-start !important;  /* (3-11) was space-between; prijs nu op vaste afstand van het bestelvak */
  padding: 0 6px !important; height: 34px !important;
}
.layout-full .product .footer .multiple-prices > div { display: flex !important; align-items: center !important; }
.layout-full .product .footer .multiple-prices > div .quantity-picker,
.layout-full .product .footer .multiple-prices > div .quantity-picker-number {
  margin: 0 !important; display: flex !important; align-items: center !important; gap: 5px; height: 34px;
}
.layout-full .quantity-picker-number .element { display: flex !important; align-items: center !important; gap: 5px; height: 34px; }
.layout-full .quantity-picker-number .element .input { display: flex; align-items: center; }
.layout-full .quantity-picker-number .element .input input { width: 46px !important; height: 30px !important; margin: 0 !important; box-sizing: border-box; font-size: 15px !important; }
.layout-full .product .footer .multiple-prices > div .quantity,
.layout-full .quantity-picker-number .element .quantity {
  width: auto !important; line-height: 30px !important; font-size: 14px !important; white-space: nowrap;
}
.layout-full .quantity-picker-number .add,
.layout-full .quantity-picker-number .add i { width: 30px !important; height: 30px !important; font-size: 30px !important; line-height: 30px !important; margin: 0 !important; }
.layout-full .product .footer .multiple-prices > div .price {
  display: flex !important; align-items: center !important; height: 34px; white-space: nowrap !important; padding-right: 0 !important; margin-left: 14px !important;  /* (3-11, Daan: "niet overal gelijk") vaste afstand achter de plus i.p.v. tegen de rechterrand */
}
.layout-full .product .footer .multiple-prices > div .price .prefix,
.layout-full .product .footer .multiple-prices > div .price .decimals { line-height: 34px !important; vertical-align: baseline !important; }
.layout-full .product .footer .price::before { order: 3; float: none !important; margin-left: 2px; line-height: 34px; }

/* Voorbeeld: ander lettertype voor de hele shop
body { font-family: "Helvetica Neue", Arial, sans-serif !important; }
*/

/* --- Linkerkolom smaller (17-10): 300 -> 220 px ------------------------- */
@media (min-width: 769px) {   /* telefoon: aside is een uitschuifpaneel van EasyFlor (fixed, 300 breed, rand = filterknop) */
  /* (20-10) filtervak 200..320 breed, per kolommen-band zo dat het hoofdvlak ~ kolommen x 236 is en de witruimte
     rechts klein blijft; de rest gaat als lucht tussen de kaarten. Band begint waar met aside 200 een kolom erbij
     past (vw >= 200 + kol x 236). Op de bandgrens: aside 200 -> hoofdvlak precies kol x 236. */
  :root { --vdm-aside: clamp(200px, calc(100vw - 708px - 16px), 320px); --vdm-kol: 3; }  /* 3 kolommen */
  aside.left { width: var(--vdm-aside) !important; min-width: 200px !important; max-width: 320px !important; }
  @media (min-width: 1144px) { :root { --vdm-aside: clamp(200px, calc(100vw - 944px - 16px), 320px); --vdm-kol: 4; } }   /* 4 */
  @media (min-width: 1380px) { :root { --vdm-aside: clamp(200px, calc(100vw - 1180px - 16px), 320px); --vdm-kol: 5; } }  /* 5 */
  @media (min-width: 1616px) { :root { --vdm-aside: clamp(200px, calc(100vw - 1416px - 16px), 320px); --vdm-kol: 6; } }  /* 6 */
  @media (min-width: 1852px) { :root { --vdm-aside: clamp(200px, calc(100vw - 1652px - 16px), 320px); --vdm-kol: 7; } }  /* 7 */
  @media (min-width: 2088px) { :root { --vdm-aside: clamp(200px, calc(100vw - 1888px - 16px), 320px); --vdm-kol: 8; } }  /* 8 */


  /* (20-10) Laatste pagina/zoekresultaat: EasyFlor zet daar GEEN opvulblok achter de laatste rij -> de paar kaarten
     groeiden uit over de hele rij (Red Naomi-les). Maximum vakbreedte = normale vakbreedte (hoofdvlak / kolommen). */
  .layout-full .page-container > .item { max-width: calc((100vw - var(--vdm-aside) - 15px) / var(--vdm-kol)) !important; }
  /* (20-10) Inklappen: EasyFlor's eigen knop <i class="element-hide"> (klik = aside.hide + site.resize -> kolom erbij).
     Stond vast op left:274px (voor een kolom van 300) en onze !important-breedte hield .hide tegen. Nu: pijl op de
     rechterrand van de kolom, duidelijk blauw rondje; ingeklapt: kolom echt 0 breed en pijl ("filter" + >) aan de linkerrand. */
  /* (3-11, Daan: "originele beter") knop weer in EasyFlor-stijl, rechts ín de witte kolom (zoals hun 274 van 300) */
  #site aside.left > i.element-hide { left: calc(var(--vdm-aside) - 26px) !important; }
  #site aside.left.hide { width: 0 !important; min-width: 0 !important; max-width: 0 !important; padding: 0 !important; overflow: hidden !important; }
  /* (4-11, Daan) ingeklapt wél het blauwe filter-lipje linksboven, anders onvindbaar achter de gele balk */
  #site aside.left.hide > i.element-hide { left: 0 !important; width: 26px; height: 44px; line-height: 44px !important;
    font-size: 18px !important; text-align: center; text-indent: 0; background: #0157a4; color: #fff !important;
    border-radius: 0 22px 22px 0; box-shadow: 2px 2px 6px rgba(0,0,0,.2); z-index: 150 !important; }
  #site aside.left.hide > i.element-hide:hover { background: #013f78; }
  #site aside.left.hide > i.element-hide::after { content: "filter_alt" !important; }
}

/* --- Subgroepen inklapbaar (eigen.js zet .vdm-klap / .vdm-open) ----------- */
[data-filter="ArticleGroups"] li.vdm-klap { position: relative; }
[data-filter="ArticleGroups"] li.vdm-klap > ul { display: none !important; }
[data-filter="ArticleGroups"] li.vdm-klap.vdm-open > ul { display: block !important; }
[data-filter="ArticleGroups"] .vdm-pijl {   /* (3-11, Daan) weer het kleine pijltje van eerst, strak tegen de groep aan */
  position: absolute; left: -12px; top: 0; width: 12px; height: 24px; cursor: pointer;
  display: flex; align-items: center; justify-content: flex-end; color: #0157a4; font-size: 11px; line-height: 1;
}
[data-filter="ArticleGroups"] .vdm-pijl::before { content: "\25B8"; }                 /* ▸ dicht */
[data-filter="ArticleGroups"] li.vdm-open > .vdm-pijl::before { content: "\25BE"; }   /* ▾ open */
/* hoofdgroepen (Bloemen, Decoratie...): groot EasyFlor-pijltje rechts op de regel (Daan 3-11) */
[data-filter="ArticleGroups"] .container > ul > li.vdm-klap > .vdm-pijl { left: auto; right: 0; width: 24px; justify-content: center; color: #000;
  font-family: "Material Symbols Outlined"; font-size: 24px; font-weight: 400; }
[data-filter="ArticleGroups"] .container > ul > li.vdm-klap > .vdm-pijl:hover { color: #0157a4; }
[data-filter="ArticleGroups"] .container > ul > li.vdm-klap > .vdm-pijl::before { content: "keyboard_arrow_down"; }
[data-filter="ArticleGroups"] .container > ul > li.vdm-klap.vdm-open > .vdm-pijl::before { content: "keyboard_arrow_up"; }
[data-filter="ArticleGroups"] .container > ul > li.vdm-klap > a { padding-right: 28px !important; }
[data-filter="ArticleGroups"] .container > .element-button:not(.reset) { display: none !important; }  /* eigen.js klapt alles uit (3-11) */

/* namen in de linkerkolom op één regel; te lang = puntjes (kolom is smaller) */
aside.left .element-filter-checkitem { white-space: nowrap !important; overflow: hidden; text-overflow: ellipsis; display: block; }
aside.left .element-filter-checkitem .title { white-space: nowrap !important; }
[data-filter="ArticleGroups"] li > ul > li > ul { padding-left: 12px !important; margin-left: 0 !important; }


/* ==========================================================================
   TELEFOON (17-10): EasyFlor toont op <= 768 px rijen (.layout-small) i.p.v. kaarten.
   Zelfde stijl als het bureaublad, maar zonder vaste breedtes (telefoons 360-430 px).
   ========================================================================== */
@media (max-width: 768px) {
  /* blauw groepsvak boven de rij, zoals boven de kaart */
  /* alleen boven de eerste rij van een nieuwe groep (zuinig met ruimte, Daan 14-10) */
  .layout-small .item .group { display: none !important; }
  .layout-small .item .group.group-new {
    display: block !important; width: auto !important; height: 20px !important; line-height: 20px !important;
    background: #0157a4 !important; color: #fff !important; font-size: 12px !important; font-weight: 500 !important;
    letter-spacing: .04em; text-align: center !important; padding: 0 !important; border: 0 !important;
    border-radius: 5px 5px 0 0 !important; margin: 6px 10px 0 10px !important;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .layout-small .item .group:empty { display: none !important; }
  .layout-small .item .group.group-new + .product { border-top-left-radius: 0 !important; border-top-right-radius: 0 !important; }

  /* foto vierkant, vult het vak */
  .layout-small .product .image,
  .layout-small .product .image .image-spacer { width: 84px !important; min-width: 84px !important; height: 84px !important; }
  .layout-small .product .image .image-spacer img { width: 84px !important; height: 84px !important; object-fit: cover !important; }
  .layout-small .product .image .status,
  .layout-small .product .image .history { width: 84px !important; height: 84px !important; }

  /* tekst zoals op de kaart */
  .layout-small .product .content .description h2 { font-size: .9em !important; line-height: 1.25em !important; }
  .layout-small .product .content .description p  { font-size: .72em !important; line-height: 1.3em !important; }
  .layout-small .product .content .features dl {
    font-size: .68em !important; display: grid !important; grid-template-columns: auto 1fr; column-gap: 6px;
  }
  .layout-small .product .content .features dl dt { flex: none !important; white-space: nowrap; color: #999 !important; font-weight: 400 !important; font-style: normal !important; width: auto !important; }
  .layout-small .product .content .features dl dd { flex: none !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0; color: #000 !important; font-weight: 400 !important; width: auto !important; }

  /* bestelvak op één lijn, groot genoeg voor de duim; 16 px tekst = geen inzoom op iPhone */
  .layout-small .product .footer .multiple-prices { display: flex !important; align-items: center !important; justify-content: space-between !important; }
  .layout-small .product .footer .multiple-prices > div { display: flex !important; align-items: center !important; }
  .layout-small .quantity-picker-number,
  .layout-small .quantity-picker-number .element { display: flex !important; align-items: center !important; gap: 5px; }
  .layout-small .quantity-picker-number .element .input input { width: 46px !important; height: 30px !important; font-size: 16px !important; box-sizing: border-box; margin: 0 !important; }
  .layout-small .quantity-picker-number .element .quantity { line-height: 30px !important; font-size: 14px !important; white-space: nowrap; width: auto !important; }
  .layout-small .quantity-picker-number .add,
  .layout-small .quantity-picker-number .add i { width: 30px !important; height: 30px !important; font-size: 30px !important; line-height: 30px !important; }
  .layout-small .product .footer .price { white-space: nowrap !important; }
  .layout-small .product .footer .price .prefix,
  .layout-small .product .footer .price .decimals { font-size: 1.2em !important; vertical-align: baseline !important; }
  /* (18-10) EasyFlor zet "€ " en de komma alleen op de computer; zonder las "1,04" hier als "104" */
  .layout-small .product .footer .price .prefix::before { content: "€ "; }
  .layout-small .product .footer .price .prefix::after { content: ","; }
  /* flex zoals op de computer: geen spatie tussen "1," en "04"; pijltje achteraan */
  .layout-small .product .footer .multiple-prices > div:nth-child(2) { flex: 1 1 auto !important; }
  .layout-small .product .footer .price { display: flex !important; align-items: baseline !important; justify-content: flex-end !important; padding-left: 8px; }
  .layout-small .product .footer .price::before { order: 3; float: none !important; margin-left: 2px; align-self: center; }
}

/* --- "Alle Antonovs ansehen" + "Zurück zum Einkauf" (17-10) --------------------------------- */
.vdm-meer-kaart { display: flex; flex-direction: column; text-decoration: none !important; color: #0157a4 !important;
  border: 2px solid #0157a4; border-radius: 10px; background: #fff; overflow: hidden; box-sizing: border-box; }
.vdm-meer-fotos { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: #fff; }
.vdm-meer-fotos img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; }
.vdm-meer-tekst { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center; padding: 10px 8px; }
.vdm-meer-tekst em { font-style: normal; font-weight: 700; font-size: .95em; color: #0157a4; }
.vdm-meer-tekst span { font-size: .8em; color: #333; line-height: 1.3; }
.vdm-meer-knop { display: inline-block; background: #0157a4; color: #fff; font-size: .85em; font-weight: 700;
  padding: 7px 12px; border-radius: 4px; margin-top: 2px; }
.vdm-meer-kaart:hover .vdm-meer-knop { background: #013f78; }
/* bureaublad: zelfde vak als een productkaart (kaartmaat komt van .item) */
/* blauwe groepsband bovenin (zelfde als de andere kaarten) -> tegel net zo hoog; kaart sluit er naadloos op aan */
.layout-full .item.vdm-meer { display: flex; flex-direction: column; justify-content: flex-start; padding-top: 0; box-sizing: border-box; }
.layout-full .item.vdm-meer .vdm-meer-band { flex: 0 0 22px; }
.layout-full .item.vdm-meer .vdm-meer-kaart { width: 222px; box-sizing: border-box; height: calc(100% - 26px); margin: 0 auto;
  border-top: 0 !important; border-top-left-radius: 0 !important; border-top-right-radius: 0 !important; }
/* tekst bovenin het tekstvak, knop netjes tegen de onderkant */
.layout-full .item.vdm-meer .vdm-meer-tekst { flex: 1; padding: 8px 8px 10px; gap: 5px; justify-content: flex-start; }
.layout-full .item.vdm-meer .vdm-meer-knop { margin-top: auto; align-self: stretch; }
/* 3x3 = 9 vierkante fotootjes: fotovak even groot als de productfoto (vierkant) */
.layout-full .item.vdm-meer .vdm-meer-fotos { grid-template-columns: repeat(3, 1fr); flex: 0 0 auto; }
.layout-full .item.vdm-meer .vdm-meer-fotos img { aspect-ratio: 1 / 1; }
.layout-full .item.vdm-meer .vdm-meer-tekst span { font-size: .78em; }
/* telefoon: een rij zoals de andere rijen */
@media (max-width: 768px) {
  .layout-small .item.vdm-meer { padding: 6px 10px; box-sizing: border-box; }
  .layout-small .item.vdm-meer .vdm-meer-kaart { flex-direction: row; align-items: center; min-height: 86px; }
  .layout-small .item.vdm-meer .vdm-meer-fotos { width: 84px; flex: 0 0 84px; grid-template-columns: repeat(3, 1fr); gap: 1px; }
  .layout-small .item.vdm-meer .vdm-meer-band { display: none !important; }
  .layout-small .item.vdm-meer .vdm-meer-tekst { flex: 1; align-items: flex-start; text-align: left; }
}
/* terugknop in het gele vak (.filters-top, sticky): computer links in het vak, telefoon als eigen rij bovenin */
#vdm-terug { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); z-index: 5;
  background: #0157a4; color: #fff !important; text-decoration: none !important; font-weight: 700; font-size: 15px;
  padding: 11px 18px; border-radius: 4px; box-shadow: 0 2px 6px rgba(0,0,0,.25); white-space: nowrap; }
#vdm-terug:hover { background: #013f78; }
@media (max-width: 768px) {
  #vdm-terug { position: static; transform: none; display: block; text-align: center; margin: 8px 12px 2px; padding: 10px 14px; }
}

/* --- Invulvakje met − en + (Daan 18-10) ------------------------------------
   eigen.js zet een − links en een + rechts in .input (.vdm-stepper); de grote blauwe plus blijft. */
.quantity-picker-number .element .input.vdm-stepper {
  display: flex !important; align-items: center !important; height: 30px !important;
  border: 1px solid #444; border-radius: 4px; background: #fff; overflow: hidden; box-sizing: border-box;
}
.quantity-picker-number .element .input.vdm-stepper input {
  width: 26px !important; height: 28px !important; border: 0 !important; padding: 0 !important; margin: 0 !important;
  text-align: center; -moz-appearance: textfield; appearance: textfield; background: transparent;
}
.quantity-picker-number .element .input.vdm-stepper input::-webkit-outer-spin-button,
.quantity-picker-number .element .input.vdm-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.quantity-picker-number .element .input.vdm-stepper button {
  width: 18px !important; height: 28px !important; padding: 0 !important; margin: 0 !important; border: 0 !important;
  background: #f2f6fb !important; color: #0157a4 !important; font-family: Arial, sans-serif !important; font-weight: 700 !important;
  font-size: 18px !important; line-height: 28px !important; cursor: pointer; flex: none; -webkit-appearance: none; appearance: none;
}
.quantity-picker-number .element .input.vdm-stepper button:hover { background: #dce8f5; }
.layout-small .quantity-picker-number .element .input.vdm-stepper input { font-size: 16px !important; }  /* geen iPhone-inzoom */
/* rij past weer in de kaart (231): kleinere tussenruimtes/marge en "x 20" iets kleiner; prijs en grote plus blijven */
.layout-full .product .footer .multiple-prices { padding: 0 4px !important; }
.layout-full .product .footer .multiple-prices > div .quantity-picker-number,
.layout-full .quantity-picker-number .element { gap: 3px !important; }
.layout-full .quantity-picker-number .element .quantity { font-size: 13px !important; }

/* --- Knop terug naar het tegelscherm (klant-app, 18-10) --------------------- */
#vdm-start { position: fixed; left: 14px; bottom: calc(14px + env(safe-area-inset-bottom)); z-index: 1000;
  display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-radius: 999px;
  background: #0157a4; color: #fff !important; font-weight: 600; font-size: 14px; text-decoration: none !important;
  box-shadow: 0 4px 14px rgba(1,87,164,.35); }
#vdm-start:hover { background: #013f78; }

/* --- Plus kleiner, invulvak groter (Daan 19-10) ------------------------------
   grote blauwe plus 30 → 22 px, getalvak 26 → 34 px: rij blijft even breed. */
.quantity-picker-number .element .input.vdm-stepper input { width: 34px !important; }
.layout-full .quantity-picker-number .add,
.layout-full .quantity-picker-number .add i,
.layout-small .quantity-picker-number .add,
.layout-small .quantity-picker-number .add i { width: 22px !important; height: 22px !important; font-size: 22px !important; line-height: 22px !important; }

/* --- (20-10, Heyl-maat) bestelregel past in kaart van 208: getalvak 30, prijs iets kleiner, krappere marges --- */
.layout-full .quantity-picker-number .element .input.vdm-stepper { margin: 3px 2px 0 0 !important; }
.layout-full .quantity-picker-number .element .input.vdm-stepper input { width: 30px !important; }
.layout-line .quantity-picker-number .element .input.vdm-stepper input { width: 22px !important; }  /* regelweergave: vak is 60 breed incl. rand, 18+22+18 past (20-10) */
.layout-full .quantity-picker-number .element .quantity { margin-right: 2px !important; font-size: 12px !important; }
.layout-full .quantity-picker-number .element,
.layout-full .product .footer .multiple-prices > div .quantity-picker-number { gap: 2px !important; }
.layout-full .product .footer .multiple-prices > div .price .prefix,
.layout-full .product .footer .multiple-prices > div .price .decimals { font-size: 1.1875em !important; }  /* 3-11: 19 px (20 was een tik te groot), één maat voor alle prijzen (Daan: geen ongelijke maten); past binnen de 34-px regel. Was 1.125em */

/* --- (20-10) Twee verkoopeenheden (bos én fust, bv. Red Naomi) --------------------------------------------
   EasyFlor toont 2 invulvakken (bos / fust) en rekent de fustprijs vanzelf zodra het aantal de fustgrens haalt.
   Daan: één invulvak (bos), en klein erboven de staffel ("Ab 60 Stück € 0,81"). Tweede vak verborgen, regel uit eigen.js. */
.layout-full .product .footer .multiple-prices > div:nth-child(3),
.layout-full .product .footer .multiple-prices > div:nth-child(4) { display: none !important; }  /* vak + prijs van de 2e eenheid */
.layout-full .product .footer .vdm-staffel { position: absolute; left: 6px; right: 6px; top: -13px; font-size: 10.5px; line-height: 12px;
  color: #555; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.layout-full .product .footer .vdm-staffel b { color: #0157a4; font-weight: 600; }
.layout-full .product .footer { position: relative; }

/* --- (20-10) Staffel rechts boven de prijs; "Verkrijgbaar 600" (EasyFlor's hover-blok, footer > dl) subtiel:
   klein grijs tekstje links boven de bestelregel i.p.v. een grijs vlak over de hele regel. --- */
.layout-full .product .footer .vdm-staffel { left: auto !important; right: 8px !important; text-align: right !important; max-width: 56%; }
.layout-full .product .footer > dl { position: absolute !important; left: 8px !important; right: auto !important; top: -13px !important; bottom: auto !important;
  margin: 0 !important; padding: 0 !important; background: none !important; box-shadow: none !important; border: 0 !important;
  font-size: 10.5px !important; line-height: 12px !important; color: #888 !important; width: auto !important; max-width: 42%; white-space: nowrap !important; overflow: hidden; text-overflow: ellipsis; }
/* tonen/verbergen laat ik aan EasyFlor (verschijnt bij het invulvak) */
.layout-full .product .footer > dl dt, .layout-full .product .footer > dl dd { display: inline !important; margin: 0 !important; padding: 0 !important;
  font-size: 10.5px !important; line-height: 12px !important; font-style: normal !important; width: auto !important; flex: none !important; }
.layout-full .product .footer > dl dt { color: #888 !important; }
.layout-full .product .footer > dl dd { color: #333 !important; font-weight: 600; margin-left: 3px !important; }

/* --- (20-10) Herkomst als vlaggetje (eigen.js, zoals Heyl): staat ÍN de kwekerwaarde (dd.vdm-naast-vlag), anders los in .features --- */
/* basis voor alle weergaven: klein vlaggetje achter de tekst (lijst/regel) */
.product .content .features .vdm-vlag { display: inline-block; width: 16px; height: 11px; margin-left: 6px; vertical-align: middle;
  object-fit: cover; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,.15); }
/* kaart + middel: rechts in het blok; alleen de kwekerwaarde stopt met … vóór de vlag, andere regels lopen eronderdoor */
.layout-full .product .content .features,
.layout-medium .product .content .features { position: relative; }
.layout-full .product .content .features dd.vdm-naast-vlag,
.layout-medium .product .content .features dd.vdm-naast-vlag { position: relative; box-sizing: border-box; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
.layout-full .product .content .features dd.vdm-naast-vlag { padding-right: 26px !important; }
.layout-medium .product .content .features dd.vdm-naast-vlag { padding-right: 20px !important; }
.layout-full .product .content .features .vdm-vlag,
.layout-medium .product .content .features .vdm-vlag { position: absolute; right: 2px; top: 1px; margin: 0; }
.layout-full .product .content .features .vdm-vlag { width: 20px; height: 14px; }

/* --- (20-10) Weergave-knoppen (middel/lijst/regel): uitzoom-schaal van de foto (eigen.js) niet over de kaartrand laten lopen,
   en in de regelweergave (75x50) de vierkante foto bijsnijden i.p.v. platdrukken --- */
.product .image .image-spacer, .product .image .image-spacer-2 { overflow: hidden !important; }
.layout-line .product .image .image-spacer img { object-fit: cover !important; }
/* prijs >= 10 euro: 18 px (eigen.js zet .vdm-prijs-breed), 3 cijfers 16 px, 4+ 14 px — 3-11 */
.layout-full .product .footer .multiple-prices > div .price.vdm-prijs-breed .prefix,
.layout-full .product .footer .multiple-prices > div .price.vdm-prijs-breed .decimals { font-size: 1.1875em !important; }  /* 3-11: zelfde maat, geen trap meer */
.layout-full .product .footer .multiple-prices > div .price.vdm-prijs-extrabreed .prefix,
.layout-full .product .footer .multiple-prices > div .price.vdm-prijs-extrabreed .decimals { font-size: 1.1875em !important; }  /* 3-11: zelfde maat */
/* prijs >= 1000 euro: 14 px; en een prijs breekt NOOIT over twee regels (EasyFlor doet dat wel) */
.layout-full .product .footer .multiple-prices > div .price.vdm-prijs-superbreed .prefix,
.layout-full .product .footer .multiple-prices > div .price.vdm-prijs-superbreed .decimals { font-size: .875em !important; }
.layout-full .product .footer .multiple-prices > div .price { white-space: nowrap !important; flex-wrap: nowrap !important; overflow: visible; }

/* --- (20-10) Vliegt naar de winkelwagen (eigen.js) --- */
.vdm-vlieg { position: fixed; z-index: 3000; border-radius: 50%; object-fit: cover; pointer-events: none;
  box-shadow: 0 4px 14px rgba(0,0,0,.3); border: 2px solid #fff; will-change: transform, opacity; }
@keyframes vdm-bump { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } }
header i.vdm-bump, .header i.vdm-bump { animation: vdm-bump .4s ease-out; display: inline-block; color: #0157a4 !important; }

/* --- (20-10) "✕ Reset" in het filtervak: EasyFlor's grijze blok -> klein blauw pilletje direct achter de titel
   (eigen.js zet left/top), alleen zichtbaar bij een echt aangevinkt filter (.vdm-leeg = weg). Blijft sibling van de h2. --- */
aside.left .element-filter-array .element-filter-default > .element-button.reset,
aside.left .element-filter-single .element-filter-default > .element-button.reset {
  position: absolute !important; right: auto !important; display: inline-flex; align-items: center; gap: 3px; z-index: 2;
  background: #fff !important; color: #0157a4 !important; border: 1px solid #0157a4; border-radius: 999px; height: 18px; box-sizing: border-box;
  font-size: 11px !important; line-height: 16px !important; padding: 0 8px 0 6px !important; font-weight: 600; letter-spacing: .02em; }
aside.left .element-filter-default > .element-button.reset:hover { background: #0157a4 !important; color: #fff !important; }
aside.left .element-filter-default > .element-button.reset i { float: none !important; font-size: 12px !important; line-height: 16px !important; order: -1; }
aside.left .element-filter-default > .element-button.reset span { font-size: 11px; font-family: inherit; }
aside.left .element-filter-default .element-button.reset.hidden,
aside.left .element-filter-default .element-button.reset.vdm-leeg { display: none !important; }
aside.left .element-filter-default { position: relative; }

/* --- (20-10) Kleurenfilter: alleen bolletjes, naam als tooltip (eigen.js zet title), aantal weg --- */
aside.left [data-filter="BaseColors"] .container > ul { display: flex !important; flex-wrap: wrap; gap: 8px 9px; padding: 4px 0 2px !important; margin: 0 !important; }
aside.left [data-filter="BaseColors"] .container > ul > li { display: block !important; margin: 0 !important; padding: 0 !important; }
aside.left [data-filter="BaseColors"] .container > ul > li > ul { display: none !important; }
aside.left [data-filter="BaseColors"] .element-filter-checkitem { display: block !important; padding: 0 !important; border: 0 !important; background: none !important; margin: 0 !important; }
aside.left [data-filter="BaseColors"] .colorItemContainer { display: block !important; padding: 0 !important; }
aside.left [data-filter="BaseColors"] .colorItemContainer .title,
aside.left [data-filter="BaseColors"] .colorItemContainer .count { display: none !important; }
aside.left [data-filter="BaseColors"] .colorContainer { display: block !important; width: 24px !important; height: 24px !important; border-radius: 50% !important;
  margin: 0 !important; box-shadow: inset 0 0 0 1px rgba(0,0,0,.18); cursor: pointer; transition: transform .12s; }
aside.left [data-filter="BaseColors"] .element-filter-checkitem:hover .colorContainer { transform: scale(1.12); }
aside.left [data-filter="BaseColors"] .element-filter-checkitem.active .colorContainer { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #0157a4; }
/* (20-10, Daan) geen aantallen achter tags, artikelgroepen en kleuren */
aside.left .element-filter-checkitem .count { display: none !important; }
/* actieve kleur: EasyFlor vult het pilletje en zet een vinkje; wij: alleen het bolletje met een blauwe ring */
aside.left [data-filter="BaseColors"] .element-filter-default .container ul li .element-filter-checkitem .colorItemContainer { border: 0 !important; width: auto !important; height: auto !important; border-radius: 0 !important; }
aside.left [data-filter="BaseColors"] .element-filter-default .container ul li .element-filter-checkitem.active .colorItemContainer { background: none !important; }
aside.left [data-filter="BaseColors"] .element-filter-default .container ul li .element-filter-checkitem.active .colorItemContainer::before { content: none !important; display: none !important; }
aside.left [data-filter="BaseColors"] .element-filter-default .container ul li .element-filter-checkitem.active .colorItemContainer .colorContainer { display: block !important; }
aside.left [data-filter="BaseColors"] .element-filter-default .container ul li { margin: 0 !important; }
/* (20-10, Daan) geen randje om de bolletjes; alleen wit een heel licht lijntje; keuze-ring rond */
aside.left [data-filter="BaseColors"] .element-filter-default .container ul li .element-filter-checkitem .colorItemContainer .colorContainer { border: 0 !important; outline: 0 !important; box-shadow: none !important; }
aside.left [data-filter="BaseColors"] li[data-value="white"] .colorContainer { box-shadow: inset 0 0 0 1px rgba(0,0,0,.12) !important; }
aside.left [data-filter="BaseColors"] .element-filter-checkitem, aside.left [data-filter="BaseColors"] .element-filter-checkitem.active,
aside.left [data-filter="BaseColors"] .colorItemContainer { outline: 0 !important; box-shadow: none !important; border: 0 !important; background: none !important; }
aside.left [data-filter="BaseColors"] .element-filter-default .container ul li .element-filter-checkitem.active .colorItemContainer .colorContainer { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #0157a4 !important; border-radius: 50% !important; }
aside.left [data-filter="BaseColors"] .element-filter-checkitem:focus, aside.left [data-filter="BaseColors"] .element-filter-checkitem:focus-visible,
aside.left [data-filter="BaseColors"] li:focus-within, aside.left [data-filter="BaseColors"] .colorItemContainer:focus { outline: 0 !important; box-shadow: none !important; }
aside.left [data-filter="BaseColors"] .element-filter-checkitem::before, aside.left [data-filter="BaseColors"] .element-filter-checkitem::after { display: none !important; content: none !important; }  /* EasyFlor's "check_box"-icoon */
/* keuze-ring aan de binnenkant van het bolletje (buitenkant werd afgesneden door het 24px-vakje) */
aside.left [data-filter="BaseColors"] .element-filter-default .container ul li .element-filter-checkitem.active .colorItemContainer .colorContainer { box-shadow: inset 0 0 0 2px #0157a4, inset 0 0 0 4px #fff !important; }

/* (20-10, Daan) omschrijving onder de naam (lengte, gram) één stap groter: .68em -> .76em */
.layout-full .product .content .description p { font-size: .76em !important; }

/* =====================================================================================================
   (20-10) Lijst- en regelweergave op de computer netjes (Daan: "ziet er gewoon niet netjes uit").
   Eén rij: foto | naam + omschrijving | kenmerken | [verkrijgbaar/staffel] [− n +] x 10 (+) € 0,95 ⌄
   Rijhoogte blijft die van EasyFlor (86 lijst / 50 regel): daar rekent EasyFlor de blokken mee uit.
   Telefoon (≤768) heeft zijn eigen rij-opmaak hierboven en blijft ongemoeid.
   ===================================================================================================== */
@media (min-width: 769px) {
  .layout-small .item, .layout-line .item { padding: 0 !important; background: none !important; box-sizing: border-box; }
  .layout-small .product, .layout-line .product {
    display: flex !important; flex-direction: row !important; align-items: center !important; gap: 14px;
    height: calc(100% - 6px) !important; margin: 3px 0 !important; padding: 0 10px 0 4px !important; box-sizing: border-box !important;
    border: 1px solid #d3deea !important; border-radius: 8px !important; background: #fff !important; overflow: hidden; }
  .layout-small .product:hover, .layout-line .product:hover { border-color: #0157a4 !important; }

  /* foto: vierkant, klein, afgerond */
  .layout-small .product .image, .layout-small .product .image .image-spacer,
  .layout-small .product .image .status, .layout-small .product .image .history { width: 70px !important; height: 70px !important; min-width: 70px; }
  .layout-line .product .image, .layout-line .product .image .image-spacer,
  .layout-line .product .image .status, .layout-line .product .image .history { width: 38px !important; height: 38px !important; min-width: 38px; }
  .layout-small .product .image, .layout-line .product .image { flex: none !important; border: 0 !important; background: #fff !important; }
  .layout-small .product .image .image-spacer, .layout-line .product .image .image-spacer { border-radius: 5px; background: #fff !important; }
  .layout-small .product .image .image-spacer img, .layout-line .product .image .image-spacer img {
    width: 100% !important; height: 100% !important; object-fit: cover !important; }

  /* naam + omschrijving | kenmerken */
  .layout-small .product .content, .layout-line .product .content {
    flex: 1 1 auto !important; min-width: 0; display: flex !important; align-items: center !important; gap: 16px;
    height: auto !important; padding: 0 !important; border: 0 !important; background: none !important; }
  .layout-small .product .content .description, .layout-line .product .content .description { flex: 0 0 clamp(250px, 38%, 420px) !important; min-width: 0; width: auto !important; padding: 0 !important; }
  .layout-small .product .content .description h2, .layout-line .product .content .description h2 {
    font-size: 14px !important; line-height: 18px !important; margin: 0 !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .layout-small .product .content .description p, .layout-line .product .content .description p {
    font-size: 12px !important; line-height: 16px !important; margin: 0 !important; color: #333 !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .layout-small .product .content .features, .layout-line .product .content .features { flex: 1 1 auto !important; min-width: 0; width: auto !important; padding: 0 !important; }
  .layout-small .product .content .features dl {
    display: grid !important; grid-template-columns: auto 1fr; column-gap: 10px; margin: 0 !important; font-size: 12px !important; line-height: 16px !important; }
  .layout-small .product .content .features dl dt, .layout-line .product .content .features dl dt {
    width: auto !important; flex: none !important; margin: 0 !important; color: #999 !important; font-style: normal !important; font-weight: 400 !important; white-space: nowrap; }
  .layout-small .product .content .features dl dd, .layout-line .product .content .features dl dd {
    width: auto !important; flex: none !important; margin: 0 !important; color: #000 !important; font-weight: 400 !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* regel: elk kenmerk een kolommetje, label boven / waarde onder (Kweker | Gewicht), naast elkaar */
  .layout-line .product .content .features dl {
    display: grid !important; grid-template-rows: 15px 16px; grid-auto-flow: column; grid-auto-columns: max-content; column-gap: 18px;
    align-items: center; margin: 0 !important; font-size: 12px !important; line-height: 15px !important; overflow: hidden; }
  .layout-line .product .content .features dl dt { font-size: 11px !important; }
  .layout-line .product .content .features dl dd { max-width: 190px; }

  /* bestelblok rechts: links ervan een smal tekstkolommetje (verkrijgbaar boven, staffel onder) */
  .layout-small .product .footer, .layout-line .product .footer {
    flex: none !important; position: relative !important; display: grid !important; grid-template-columns: 150px auto; grid-template-rows: 1fr 1fr;
    align-items: center; column-gap: 10px; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important;
    border: 0 !important; background: none !important; }
  .layout-small .product .footer .multiple-prices, .layout-line .product .footer .multiple-prices {
    grid-column: 2; grid-row: 1 / span 2; display: flex !important; align-items: center !important; gap: 10px; width: auto !important;
    height: 34px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; }
  .layout-small .product .footer .multiple-prices > div, .layout-line .product .footer .multiple-prices > div {
    display: flex !important; align-items: center !important; width: auto !important; flex: none !important; margin: 0 !important; padding: 0 !important; }
  .layout-small .product .footer .multiple-prices > div:nth-child(3),
  .layout-small .product .footer .multiple-prices > div:nth-child(4),
  .layout-line .product .footer .multiple-prices > div:nth-child(3),
  .layout-line .product .footer .multiple-prices > div:nth-child(4) { display: none !important; }   /* 2e eenheid: staffelregel i.p.v. 2e vak (zoals de kaart) */
  .layout-small .quantity-picker-number, .layout-line .quantity-picker-number,
  .layout-small .quantity-picker-number .element, .layout-line .quantity-picker-number .element {
    display: flex !important; align-items: center !important; gap: 6px !important; height: 34px !important; margin: 0 !important; width: auto !important; }
  .layout-small .quantity-picker-number .element .input.vdm-stepper,
  .layout-line .quantity-picker-number .element .input.vdm-stepper { width: auto !important; margin: 0 !important; height: 30px !important; }
  .layout-small .quantity-picker-number .element .input.vdm-stepper input,
  .layout-line .quantity-picker-number .element .input.vdm-stepper input { width: 34px !important; font-size: 15px !important; }
  .layout-small .quantity-picker-number .element .quantity, .layout-line .quantity-picker-number .element .quantity {
    width: auto !important; min-width: 38px; font-size: 13px !important; line-height: 30px !important; white-space: nowrap; margin: 0 !important; }
  .layout-small .quantity-picker-number .add, .layout-small .quantity-picker-number .add i,
  .layout-line .quantity-picker-number .add, .layout-line .quantity-picker-number .add i {
    width: 24px !important; height: 24px !important; font-size: 24px !important; line-height: 24px !important; margin: 0 !important; }
  /* prijs: € 0,95 op één lijn, vaste breedte zodat de prijzen onder elkaar uitlijnen */
  .layout-small .product .footer .multiple-prices > div .price, .layout-line .product .footer .multiple-prices > div .price {
    display: flex !important; align-items: center !important; justify-content: flex-end; min-width: 92px; width: auto !important; height: 34px !important;
    margin: 0 !important; padding: 0 !important; white-space: nowrap !important; position: relative !important; }
  .layout-small .product .footer .price .prefix, .layout-small .product .footer .price .decimals,
  .layout-line .product .footer .price .prefix, .layout-line .product .footer .price .decimals {
    font-size: 17px !important; line-height: 34px !important; vertical-align: baseline !important; font-weight: 700; position: static !important; top: auto !important; }
  .layout-small .product .footer .price .prefix::before, .layout-line .product .footer .price .prefix::before { content: "€ "; }
  .layout-small .product .footer .price .prefix::after, .layout-line .product .footer .price .prefix::after { content: ","; }
  .layout-small .product .footer .price::before, .layout-line .product .footer .price::before {
    order: 3; float: none !important; margin-left: 4px; position: static !important; align-self: center; }

  /* verkrijgbaar (EasyFlor toont/verbergt hem zelf) + staffel: klein grijs, rechts uitgelijnd tegen het invulvak */
  .layout-small .product .footer > dl, .layout-line .product .footer > dl {
    grid-column: 1; grid-row: 1; align-self: end; position: static !important; margin: 0 !important; padding: 0 !important;
    background: none !important; box-shadow: none !important; border: 0 !important; width: auto !important; text-align: right;
    font-size: 11px !important; line-height: 13px !important; color: #888 !important; white-space: nowrap !important; overflow: hidden; text-overflow: ellipsis; }
  .layout-small .product .footer > dl dt, .layout-small .product .footer > dl dd,
  .layout-line .product .footer > dl dt, .layout-line .product .footer > dl dd {
    display: inline !important; margin: 0 0 0 3px !important; padding: 0 !important; font-size: 11px !important; line-height: 13px !important;
    font-style: normal !important; font-weight: 400 !important; width: auto !important; flex: none !important; color: #888 !important; }
  .layout-small .product .footer > dl dd, .layout-line .product .footer > dl dd { color: #333 !important; font-weight: 600 !important; }
  .layout-small .product .footer .vdm-staffel, .layout-line .product .footer .vdm-staffel {
    grid-column: 1; grid-row: 2; align-self: start; position: static !important; text-align: right; font-size: 11px; line-height: 13px; color: #555;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .layout-small .product .footer .vdm-staffel b, .layout-line .product .footer .vdm-staffel b { color: #0157a4; font-weight: 600; }
}

/* =====================================================================================================
   (20-10) Compacte lijst (layout-line) = prijslijst/tabel (Daan: "line nog niet zo top"):
   doorlopende rijen 40 hoog, zebra, alles op één regel, geen labels. Proefkaartje mee (EasyFlor rekent blokken ermee).
   ===================================================================================================== */
@media (min-width: 769px) {
  .layout-line > .item, .layout-line .page-container > .item { height: 40px !important; }
  .layout-line .product { height: 100% !important; margin: 0 !important; border: 0 !important; border-bottom: 1px solid #e3e9f0 !important;
    border-radius: 0 !important; padding: 0 18px 0 6px !important; gap: 12px; }
  .layout-line .page-container > .item:nth-child(even) .product { background: #f6f9fc !important; }
  .layout-line .product:hover { background: #eaf2fb !important; }
  .layout-line .product .image, .layout-line .product .image .image-spacer,
  .layout-line .product .image .status, .layout-line .product .image .history { width: 32px !important; height: 32px !important; min-width: 32px; }
  .layout-line .product .image .image-spacer { border-radius: 4px; }
  /* naam + omschrijving naast elkaar */
  .layout-line .product .content .description { display: flex !important; align-items: baseline; gap: 8px; }
  .layout-line .product .content .description h2 { flex: 0 1 auto; min-width: 0; font-size: 13.5px !important; }
  .layout-line .product .content .description p { flex: 0 0 auto; font-size: 12px !important; color: #666 !important; }
  /* kenmerken: alleen de waarden achter elkaar, geen labels */
  .layout-line .product .content .features dl { display: flex !important; align-items: center; gap: 0 16px; grid-template-rows: none; max-height: 18px; }
  .layout-line .product .content .features dl dt { display: none !important; }
  .layout-line .product .content .features dl dd { font-size: 12px !important; line-height: 18px !important; color: #333 !important; max-width: 200px; }
  /* bestelblok iets lager (rij 40) */
  .layout-line .product .footer .multiple-prices,
  .layout-line .quantity-picker-number, .layout-line .quantity-picker-number .element,
  .layout-line .product .footer .multiple-prices > div .price { height: 30px !important; }
  .layout-line .quantity-picker-number .element .input.vdm-stepper { height: 26px !important; }
  .layout-line .quantity-picker-number .element .input.vdm-stepper input,
  .layout-line .quantity-picker-number .element .input.vdm-stepper button { height: 24px !important; line-height: 24px !important; }
  .layout-line .product .footer .price .prefix, .layout-line .product .footer .price .decimals { font-size: 15px !important; line-height: 30px !important; }
  /* verkrijgbaar + staffel naast elkaar op één regel vóór het invulvak */
  .layout-line .product .footer { grid-template-columns: auto auto !important; grid-template-rows: auto !important; }
  .layout-line .product .footer > dl { grid-row: 1; grid-column: 1; align-self: center; }
  .layout-line .product .footer .vdm-staffel { grid-row: 1; grid-column: 1; align-self: center; }
  .layout-line .product .footer > dl[style*="block"] ~ .vdm-staffel { display: none; }
}

/* --- (20-10) Foto vergroten bij muis erop (Daan): lijst, compacte lijst, kleine kaarten. eigen.js zet #vdm-zoom. --- */
#vdm-zoom { position: fixed; z-index: 3000; width: 220px; height: 220px; padding: 4px; background: #fff; border-radius: 8px;
  box-shadow: 0 8px 28px rgba(0,0,0,.28); pointer-events: none; opacity: 0; transform: scale(.92); transition: opacity .12s, transform .12s; }
#vdm-zoom.aan { opacity: 1; transform: scale(1); }
#vdm-zoom img { width: 100%; height: 100%; object-fit: cover; border-radius: 5px; display: block; }
@media (max-width: 768px), (hover: none) { #vdm-zoom { display: none !important; } }

/* =====================================================================================================
   (20-10) TELEFOON (≤768 px) alle vier weergaven + gele balk (Daan: "maak maar, mooist en overzichtelijkst").
   Kaartmaten in vw (telefoons 360–430); proefkaartje (> .item) altijd mee, anders rekent EasyFlor blokken fout.
   ===================================================================================================== */
@media (max-width: 768px) {
  /* --- gele balk: 2 compacte rijen (weergaven | zoeken + sorteren), scrolt mee weg i.p.v. 160 px vast --- */
  .filters-top { position: static !important; flex-wrap: wrap !important; align-items: center !important; justify-content: flex-start !important;
    height: auto !important; min-height: 0 !important; padding: 8px 10px !important; gap: 6px 0 !important; }
  .filters-top .layouts { flex: 0 0 100% !important; display: flex !important; justify-content: flex-start; gap: 4px; margin: 0 !important; padding-right: 46px; box-sizing: border-box; }
  .filters-top .layouts a { display: inline-flex !important; }
  .filters-top .layouts a i { font-size: 30px !important; line-height: 30px !important; height: 30px !important; }
  .filters-top .filters { position: static !important; flex: 0 0 100% !important; width: 100% !important; margin: 0 !important; padding: 0 !important; top: auto !important; }
  .filters-top .filters .scroller { display: flex !important; flex-wrap: nowrap !important; gap: 6px !important; padding: 0 !important; margin: 0 !important; align-items: center; }
  .filters-top .filters .scroller > .element-filter-single { margin: 0 !important; }
  .filters-top .filters .scroller > .element-filter-single:first-child { flex: 1 1 auto !important; min-width: 0; }
  .filters-top .filters .scroller > .element-filter-single:first-child .element-filter-input { width: 100% !important; }
  .filters-top .filters .scroller > .element-filter-single:last-child { flex: 0 0 auto !important; }

  /* prijs overal "€ 0,95" (EasyFlor zet € en komma alleen op de computer) */
  .layout-medium .product .footer .price .prefix::before, .layout-line .product .footer .price .prefix::before,
  .layout-full .product .footer .price .prefix::before { content: "€ "; }
  .layout-medium .product .footer .price .prefix::after, .layout-line .product .footer .price .prefix::after,
  .layout-full .product .footer .price .prefix::after { content: ","; }

  /* --- KAARTEN: één grote kaart over de volle breedte, foto vierkant (S = 100vw − 26) --- */
  .element-product.layout-full > .item, .element-product.layout-full .page-container > .item,
  .element-product.layout-full[data-listgroupid] > .item, .element-product.layout-full[data-listgroupid] .page-container > .item {
    width: calc(100vw - 1px) !important; flex: 1 0 calc(100vw - 1px) !important; height: calc(100vw + 172px) !important; }
  .element-product.layout-full .group, .element-product.layout-full .group-empty { width: calc(100vw - 24px) !important; }
  .element-product.layout-full .product, .element-product.layout-full[data-listgroupid] .product {
    width: calc(100vw - 24px) !important; height: calc(100vw + 142px) !important; }
  .element-product.layout-full .product .image { height: calc(100vw - 22px) !important; }
  .element-product.layout-full .product .image .image-spacer, .element-product.layout-full .product .image .image-spacer img,
  .element-product.layout-full .product .image .status,
  .element-product.layout-full .product .history {
    width: calc(100vw - 26px) !important; height: calc(100vw - 26px) !important; max-width: none !important; max-height: none !important; }
  .element-product.layout-full .product .favorite { top: 8px !important; left: 8px !important; right: auto !important; }  /* (3-11) hartje linksboven in de foto, zie computer */
  .element-product.layout-full .product .content { padding: 6px 10px !important; }
  .element-product.layout-full .product .content .description h2 { font-size: 16px !important; }
  .element-product.layout-full .product .content .description p,
  .element-product.layout-full .product .content .features dl { font-size: 13px !important; }
  .element-product.layout-full .product .footer .multiple-prices { padding: 0 10px !important; }
  .element-product.layout-full .quantity-picker-number .element .input.vdm-stepper input { width: 44px !important; font-size: 16px !important; }
  .element-product.layout-full .quantity-picker-number .element .input.vdm-stepper button { width: 30px !important; }
  .element-product.layout-full .quantity-picker-number .add, .element-product.layout-full .quantity-picker-number .add i {
    width: 30px !important; height: 30px !important; font-size: 30px !important; line-height: 30px !important; }
  .element-product.layout-full .quantity-picker-number .element .quantity { font-size: 14px !important; }
  .element-product.layout-full .product .footer .multiple-prices > div .price .prefix,
  .element-product.layout-full .product .footer .multiple-prices > div .price .decimals { font-size: 20px !important; }
  .element-product.layout-full .product .footer .vdm-staffel, .element-product.layout-full .product .footer > dl { font-size: 12px !important; }

  /* --- KLEINE KAARTEN: 2 naast elkaar die het scherm vullen (foto S = 50vw − 14) --- */
  .layout-medium > .item, .layout-medium .page-container > .item {
    width: calc(50vw - 1px) !important; flex: 1 0 calc(50vw - 1px) !important; height: calc(50vw + 98px) !important; margin: 0 !important; }
  .layout-medium .product { width: auto !important; height: calc(100% - 8px) !important; margin: 4px 4px 4px 6px !important; box-sizing: border-box !important;
    display: flex !important; flex-direction: column !important; overflow: hidden; border-radius: 8px !important; }
  .layout-medium .page-container > .item:nth-child(even) .product { margin: 4px 6px 4px 4px !important; }
  .layout-medium .product .image, .layout-medium .product .image .image-spacer, .layout-medium .product .image .status {
    width: 100% !important; height: calc(50vw - 14px) !important; flex: none !important; }
  .layout-medium .product .image .image-spacer img { width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important; object-fit: cover !important; }
  .layout-medium .product .content { width: auto !important; height: auto !important; flex: 1 1 auto; padding: 4px 7px 0 !important; overflow: hidden; }
  .layout-medium .product .content .description h2 { font-size: 13px !important; line-height: 17px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0 !important; }
  .layout-medium .product .content .description p { font-size: 11.5px !important; line-height: 15px !important; margin: 0 !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .layout-medium .product .content .features dl { display: grid !important; grid-template-columns: auto 1fr; column-gap: 6px; font-size: 11px !important; line-height: 14px !important; margin: 2px 0 0 !important; }
  .layout-medium .product .content .features dl dt { width: auto !important; color: #999 !important; font-style: normal !important; }
  .layout-medium .product .content .features dl dd { width: auto !important; margin: 0 !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .layout-medium .product .footer { width: auto !important; height: 30px !important; flex: none; padding: 0 7px 4px !important; }
  .layout-medium .product .footer .multiple-prices, .layout-medium .product .footer .multiple-prices > div { width: auto !important; }
  .layout-medium .product .footer .price { display: flex !important; align-items: baseline; justify-content: flex-start !important; white-space: nowrap !important; }
  .layout-medium .product .footer .price .prefix, .layout-medium .product .footer .price .decimals { font-size: 16px !important; font-weight: 700; vertical-align: baseline !important; position: static !important; }
  .layout-medium .product .footer .price::before { order: 3; margin-left: auto; float: none !important; position: static !important; align-self: center; }

  /* --- COMPACTE LIJST: 2 regels per rij (64 hoog) ---
       [foto] NAAM ……………………………… € 0,95 ⌄
       [foto] 75 cm · Kweker 🇳🇱   [− n +] x10 ⊕         */
  .layout-line > .item, .layout-line .page-container > .item { height: 64px !important; }
  .layout-line .item { padding: 0 !important; }
  .layout-line .product { display: grid !important; grid-template-columns: 48px minmax(0, max-content) minmax(0, 1fr) 146px; grid-template-rows: 26px 30px;
    column-gap: 8px; align-items: center; height: 100% !important; margin: 0 !important; padding: 4px 8px !important; box-sizing: border-box !important;
    border: 0 !important; border-bottom: 1px solid #e3e9f0 !important; border-radius: 0 !important; background: #fff !important; }
  .layout-line .page-container > .item:nth-child(even) .product { background: #f6f9fc !important; }
  .layout-line .product .image { grid-column: 1; grid-row: 1 / span 2; width: 48px !important; height: 48px !important; }
  .layout-line .product .image .image-spacer, .layout-line .product .image .status { width: 48px !important; height: 48px !important; border-radius: 5px; overflow: hidden; }
  .layout-line .product .image .image-spacer img { width: 48px !important; height: 48px !important; object-fit: cover !important; }
  .layout-line .product .content, .layout-line .product .content .description,
  .layout-line .product .footer, .layout-line .product .footer .multiple-prices { display: contents !important; }
  .layout-line .product .content .description h2 { grid-column: 2 / span 2; grid-row: 1; margin: 0 !important; font-size: 13.5px !important; line-height: 18px !important;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .layout-line .product .content .description p { grid-column: 2; grid-row: 2; margin: 0 !important; font-size: 12px !important; color: #555 !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 110px; min-width: 0; }
  .layout-line .product .content .features { grid-column: 3; grid-row: 2; min-width: 0; width: auto !important; padding: 0 !important; overflow: hidden; }
  .layout-line .product .content .features dl { display: flex !important; align-items: center; gap: 0 10px; margin: 0 !important; font-size: 12px !important; line-height: 16px !important; max-height: 16px; overflow: hidden; }
  .layout-line .product .content .features dl dt { display: none !important; }
  .layout-line .product .content .features dl dd { width: auto !important; margin: 0 !important; color: #333 !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .layout-line .product .footer .multiple-prices > div:nth-child(1) { grid-column: 4; grid-row: 2; justify-self: end; display: flex !important; align-items: center; justify-content: flex-end; width: auto !important; }
  .layout-line .product .footer .multiple-prices > div:nth-child(2) { grid-column: 4; grid-row: 1; justify-self: end; display: flex !important; justify-content: flex-end; width: auto !important; }
  .layout-line .product .footer .multiple-prices > div:nth-child(3), .layout-line .product .footer .multiple-prices > div:nth-child(4),
  .layout-line .product .footer > dl, .layout-line .product .footer .vdm-staffel { display: none !important; }
  .layout-line .quantity-picker-number, .layout-line .quantity-picker-number .element { display: flex !important; align-items: center !important; gap: 4px !important; height: 30px !important; margin: 0 !important; width: auto !important; flex: none !important; }
  .layout-line .quantity-picker-number .element .input.vdm-stepper { height: 28px !important; width: auto !important; min-width: 74px !important; flex: none !important; }
  .layout-line .quantity-picker-number .element .input.vdm-stepper input { width: 28px !important; height: 26px !important; font-size: 16px !important; }
  .layout-line .quantity-picker-number .element .input.vdm-stepper button { width: 22px !important; height: 26px !important; line-height: 26px !important; }
  .layout-line .quantity-picker-number .element .quantity { font-size: 12px !important; line-height: 28px !important; width: auto !important; }
  .layout-line .quantity-picker-number .add, .layout-line .quantity-picker-number .add i { width: 26px !important; height: 26px !important; font-size: 26px !important; line-height: 26px !important; margin: 0 !important; }
  .layout-line .product .footer .price { display: flex !important; align-items: center; white-space: nowrap !important; height: 26px !important; margin: 0 !important; padding: 0 !important; }
  .layout-line .product .footer .price .prefix, .layout-line .product .footer .price .decimals { font-size: 15px !important; font-weight: 700; line-height: 26px !important; position: static !important; vertical-align: baseline !important; }
  .layout-line .product .footer .price::before { order: 3; float: none !important; position: static !important; margin-left: 2px; }

  /* lijst: "Verkrijgbaar 1000" klein grijs boven de prijs i.p.v. grijs vlak over de omschrijving */
  .layout-small .product .footer { position: relative !important; }
  .layout-small .product .footer > dl { position: absolute !important; right: 10px !important; left: auto !important; top: -15px !important; bottom: auto !important;
    margin: 0 !important; padding: 0 !important; background: none !important; box-shadow: none !important; border: 0 !important; width: auto !important;
    font-size: 11px !important; line-height: 13px !important; white-space: nowrap !important; }
  .layout-small .product .footer > dl dt, .layout-small .product .footer > dl dd { display: inline !important; margin: 0 0 0 3px !important; padding: 0 !important;
    font-size: 11px !important; line-height: 13px !important; font-style: normal !important; font-weight: 400 !important; color: #888 !important; width: auto !important; }
  .layout-small .product .footer > dl dd { color: #333 !important; font-weight: 600 !important; }
  /* rode annuleer-tekst in de gele balk kleiner */
  p.filters-info { font-size: 13px !important; line-height: 17px !important; margin: 4px 12px 6px !important; padding: 0 !important; }
}

/* PROEF verpakkings-switch (Daan 20-10), zie eigen.js — wisselknop "⇄ Karton x 30 € 0,63", tekst alleen erachter */
.layout-full .product .footer .vdm-vp { position: absolute; right: 8px; top: -19px; z-index: 3; }
.vdm-vp { display: flex; align-items: center; gap: 5px; font-size: 10.5px; line-height: 14px; white-space: nowrap; user-select: none; cursor: pointer; }
.vdm-vp a { color: #0157a4; text-decoration: none; }
.vdm-vp:hover a { text-decoration: underline; }
.vdm-sw { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; background: #0157a4; color: #fff; flex: none; }
.vdm-vp:hover .vdm-sw { background: #013f78; }
.vdm-sw.draai svg { animation: vdmDraai .35s ease; }
@keyframes vdmDraai { from { transform: rotate(0); } to { transform: rotate(180deg); } }
.layout-full .product .image-spacer img { transition: opacity .2s; }
.product.vdm-wissel .image-spacer img { opacity: 0 !important; }
@keyframes vdmFlits { 0% { background: #ffe680; } 100% { background: transparent; } }
.product.vdm-flits .footer .price, .product.vdm-flits .footer .quantity { animation: vdmFlits .9s ease-out; border-radius: 4px; }
.vdm-proefmelding { position: absolute; left: 6px; right: 6px; bottom: 44px; background: #333; color: #fff; font-size: 11px; text-align: center; border-radius: 6px; padding: 4px; opacity: 0; pointer-events: none; z-index: 4; }
.vdm-proefmelding.aan { animation: vdmMeld 2.2s ease; }
@keyframes vdmMeld { 0%,80% { opacity: .92; } 100% { opacity: 0; } }
@media (max-width: 768px) {
  .layout-full .product .footer .vdm-vp { top: -26px; font-size: 13px; line-height: 20px; gap: 7px; }
  .vdm-sw { width: 22px; height: 22px; }
  .vdm-sw svg { width: 13px; height: 13px; }
}

/* --- (20-10) Telefoon: één invulvak + staffelregel, net als op de computer (Daan: "2 invulvelden i.p.v. ab x € x").
   De verberg-regel stond alleen in het blok voor ≥769 px; op de telefoon toonde EasyFlor nog bos- én fustvak. */
@media (max-width: 768px) {
  .layout-small .product .footer .multiple-prices > div:nth-child(3),
  .layout-small .product .footer .multiple-prices > div:nth-child(4) { display: none !important; }
  .layout-small .product .footer { position: relative; }
  .layout-small .product .footer .vdm-staffel { position: absolute !important; right: 8px; bottom: 100%; margin-bottom: 2px; max-width: 70%;
    text-align: right; font-size: 11px; line-height: 13px; color: #555; background: #fff; padding-left: 4px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .layout-small .product .footer .vdm-staffel b { color: #0157a4; font-weight: 600; }
  /* invulvak onderkant gelijk met de onderkant van de foto (stak 2 px uit, Daan 20-10) */
  .layout-small .product .footer { top: -2px; }
  /* fotohoeken volgen de kaart (Daan 20-10: "waarom is links onder dat hoekje open?"): EasyFlor rondt de foto boven af
     en onder niet, onze kaart andersom -> de rechte witte fotohoek lag over de ronde kaarthoek */
  .layout-small .product .image, .layout-small .product .image .image-spacer, .layout-small .product .image img {
    border-radius: 9px 0 0 9px !important; }
  .layout-small .item .group.group-new + .product .image,
  .layout-small .item .group.group-new + .product .image .image-spacer,
  .layout-small .item .group.group-new + .product .image img { border-top-left-radius: 0 !important; }
}

/* --- Info-popup bij binnenkomst (22-10, Daan) — tekst/versie bovenin het blok in eigen.js ------------------- */
.vdm-pop-achter { position: fixed; inset: 0; z-index: 10000; background: rgba(10,30,60,.45); display: flex; align-items: center; justify-content: center;
  padding: 16px; opacity: 0; transition: opacity .2s; }
.vdm-pop-achter.aan { opacity: 1; }
.vdm-pop { background: #fff; border-radius: 10px; max-width: 440px; width: 100%; overflow: hidden; box-shadow: 0 12px 40px rgba(0,0,0,.25);
  transform: translateY(10px); transition: transform .2s; }
.vdm-pop-achter.aan .vdm-pop { transform: none; }
.vdm-pop-kop { background: #0157a4; color: #fff; font-weight: 700; font-size: 1.1em; padding: 14px 20px; }
.vdm-pop-tekst { padding: 18px 20px 6px; color: #333; font-size: .95em; line-height: 1.5; }
.vdm-pop-tekst p { margin: 0 0 10px; }
.vdm-pop-knop { display: block; margin: 8px 20px 20px auto; background: #0157a4; color: #fff; border: 0; border-radius: 5px;
  font-weight: 700; font-size: 1em; padding: 10px 22px; cursor: pointer; }
.vdm-pop-knop:hover { background: #013f78; }

/* --- Foto-schakelaar Heyl-origineel <-> Shop nu (Daan 3-11, om het verschil te laten zien) --- */
#vdm-fotoknop { position: fixed; left: 12px; bottom: 12px; z-index: 400; display: flex; padding: 3px; gap: 2px;
  border: 1px solid #0157a4; border-radius: 18px; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.2); cursor: pointer;
  font: 600 12px/1 inherit; }
#vdm-fotoknop span { padding: 7px 11px; border-radius: 14px; color: #0157a4; }
#vdm-fotoknop span.aan { background: #0157a4; color: #fff; }
@media (max-width: 768px) { #vdm-fotoknop { bottom: 70px; } }

/* --- Lettersrij (A-Z) op dezelfde hoogte als zoekveld/weergaveknoppen (Daan 3-11) ------------
   .filters-top is flex+wrap, rechts uitgelijnd; de lettersrij (.no-mobile) stond op een eigen regel (100% breed).
   Nu: eerst in de rij, vult de ruimte links. Alleen vanaf 1360 px: daaronder past hij er niet naast en zou het zoekveld
   naar regel 2 zakken (gemeten 3-11 op 1280/1100) -> dan gewoon de EasyFlor-opbouw. */
@media (min-width: 1360px) {
  .filters-top { align-items: center !important; }
  .filters-top > .no-mobile { order: -1; flex: 1 1 500px !important; width: auto !important; min-width: 0; margin-right: 12px !important; }
  .filters-top > .no-mobile ul { white-space: nowrap; }
  .filters-top > .no-mobile li { width: 20px !important; min-width: 0 !important; }
  .filters-top > .no-mobile li a { padding-left: 0 !important; padding-right: 0 !important; text-align: center; }
}

/* --- Annuleringstekst (p.filters-info) op één regel, kortere tekst via eigen.js (Daan 3-11) --- */
.filters-info { font-size: 15px !important; margin-left: 0 !important; width: auto !important; }   /* korte tekst = één regel; op smal scherm mag hij doorlopen (nooit afkappen) */

/* --- (3-11, Daan) Pijltje naast de prijs weg: EasyFlor's vaste icoontje (.price::before "keyboard_arrow_down") was alleen een hint
   voor het hover-blok "Verkrijgbaar"; geen klik-actie, zinloos op de telefoon, en het aantal staat al naast het invulvak. Hover-blok blijft werken. --- */
.product .footer .price::before { display: none !important; content: none !important; }

/* --- (3-11, Daan) "1 x 10 besteld" linksboven op de foto zodra de kaart in de winkelwagen zit (eigen.js, uit /Cart/Get).
   EasyFlor's eigen grijze .history-blokje ("1 x 20", alleen na herladen) gaat uit; ons label doet het meteen. --- */
.product .image .history { display: none !important; }
.product .image .vdm-besteld { position: absolute; left: 6px; top: 6px; z-index: 4; pointer-events: none;
  background: #1a8f3c; color: #fff; font-size: 11px; line-height: 16px; font-weight: 600; padding: 1px 7px; border-radius: 9px;
  box-shadow: 0 1px 2px rgba(0,0,0,.25); white-space: nowrap; }
.product .image { position: relative; }