.grm-listing,
.grm-listing *{box-sizing:border-box}

.grm-listing{
  display:grid;
  grid-template-columns:280px 1fr;
  gap:28px;
  max-width:var(--grm-w,1424px);
  margin:0 auto;
  padding:24px 20px 64px;
  align-items:start;
}

.grm-listing__zijbalk{position:sticky;top:84px}
.grm-listing__filterknop{display:none}
.grm-listing__resultaat{min-width:0}

.grm-filters{
  background:var(--gm-bg,#fff);
  border:1px solid var(--gm-border,#D7DEE7);
  border-radius:var(--gm-radius,12px);
  overflow:hidden;
}
.grm-filters__kop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 16px;
  border-bottom:1px solid var(--gm-border,#D7DEE7);
}
.grm-filters__titel{
  margin:0;
  font-family:var(--gm-font-display,'Inter Tight',sans-serif);
  font-size:16px;
  font-weight:700;
  display:flex;
  align-items:center;
  gap:8px;
}
.grm-filters__titel svg{flex:0 0 auto;display:block}
.grm-filters__wissen{
  padding:0;
  border:0;
  background:none;
  color:var(--gm-primary,#103A63);
  font-size:13px;
  font-weight:700;
  cursor:pointer;
}
.grm-filters__wissen:hover{text-decoration:underline}

.grm-filters__sectie{border-bottom:1px solid var(--gm-border,#D7DEE7)}
.grm-filters__sectie:last-child{border-bottom:0}
.grm-filters__sectie>summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:13px 16px;
  font-size:14px;
  font-weight:700;
  color:var(--gm-text,var(--grm-ink,#041e42));
  cursor:pointer;
  list-style:none;
}
.grm-filters__sectie>summary::-webkit-details-marker{display:none}
.grm-filters__sectie>summary .material-symbols-rounded{
  font-size:20px;
  color:var(--gm-text-tertiary,var(--grm-ink-400,#7A8794));
  transition:transform .18s;
}
.grm-filters__sectie[open]>summary .material-symbols-rounded{transform:rotate(180deg)}
.grm-filters__inhoud{
  display:flex;
  flex-direction:column;
  gap:2px;
  padding:2px 16px 14px;
  max-height:280px;
  overflow-y:auto;
}

.grm-filters__optie{
  display:flex;
  align-items:center;
  gap:9px;
  padding:6px 0;
  font-size:14px;
  color:var(--gm-text-secondary,#55636E);
  cursor:pointer;
}
.grm-filters__optie input{
  width:17px;
  height:17px;
  accent-color:var(--gm-primary,#103A63);
  flex-shrink:0;
  cursor:pointer;
}
.grm-filters__optie:hover{color:var(--gm-text,var(--grm-ink,#041e42))}
.grm-filters__dot{
  width:9px;
  height:9px;
  border-radius:50%;
  flex-shrink:0;
}

.grm-filters__afstand{display:block;padding:6px 0 2px}
.grm-filters__afstand-lbl{
  display:block;
  margin-bottom:8px;
  font-size:14px;
  color:var(--gm-text-secondary,#55636E);
}
.grm-filters__afstand-lbl output{color:var(--gm-primary,#103A63);font-weight:700}
.grm-filters__afstand input[type=range]{width:100%;accent-color:var(--gm-primary,#103A63)}
.grm-filters__locatie{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-top:10px;
  padding:8px 12px;
  border:1px solid var(--gm-border,#D7DEE7);
  border-radius:8px;
  background:var(--gm-bg,#fff);
  color:var(--gm-primary,#103A63);
  font-size:13px;
  font-weight:600;
  cursor:pointer;
}
.grm-filters__locatie:hover{background:var(--gm-primary-50,#EDF2F8)}
.grm-filters__locatie .material-symbols-rounded{font-size:18px}
.grm-filters__locatie.is-actief{background:var(--gm-primary,#103A63);color:#fff;border-color:var(--gm-primary,#103A63)}

.grm-listing__bar{
  display:flex;
  align-items:center;
  gap:16px;
  margin-bottom:18px;
  flex-wrap:wrap;
}
.grm-listing__count{font-size:15px;color:var(--gm-text-secondary,#55636E);flex-shrink:0}
.grm-listing__count strong{color:var(--gm-text,var(--grm-ink,#041e42));font-size:17px}
.grm-listing__zoekmini{
  display:flex;
  align-items:center;
  gap:8px;
  flex:1 1 220px;
  min-width:180px;
  padding:8px 12px;
  border:1px solid var(--gm-border,#D7DEE7);
  border-radius:8px;
  background:var(--gm-bg,#fff);
}
.grm-listing__zoekmini .material-symbols-rounded{font-size:18px;color:var(--gm-text-tertiary,var(--grm-ink-400,#7A8794))}
.grm-listing__zoekmini input{
  flex:1;
  min-width:0;
  border:0;
  outline:0;
  background:none;
  font-size:14px;
  font-family:inherit;
  color:var(--gm-text,var(--grm-ink,#041e42));
}
.grm-listing__sort{margin-left:auto}
.grm-listing__sort{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:14px;
  color:var(--gm-text-secondary,#55636E);
}
.grm-listing__sort select{
  padding:8px 12px;
  border:1px solid var(--gm-border,#D7DEE7);
  border-radius:8px;
  background:var(--gm-bg,#fff);
  font-size:14px;
  font-family:inherit;
  color:var(--gm-text,var(--grm-ink,#041e42));
  cursor:pointer;
}

.grm-listing__leeg{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  padding:64px 20px;
  text-align:center;
  color:var(--gm-text-secondary,#55636E);
}
.grm-listing__leeg .material-symbols-rounded{font-size:48px;color:var(--gm-text-tertiary,var(--grm-ink-400,#7A8794))}
.grm-listing__leeg h3{margin:8px 0 0;font-family:var(--gm-font-display,'Inter Tight',sans-serif);color:var(--gm-text,var(--grm-ink,#041e42))}
.grm-listing__leeg p{margin:0}
.grm-listing__leeg .gm-btn{margin-top:6px}

.grm-listing__breder{
  margin:28px 0 0;
  padding:16px 18px;
  border:1px solid var(--grm-line,#D7DEE7);
  border-radius:12px;
  background:var(--grm-vlak,var(--grm-canvas,#f5f7fa));
  font-size:15px;
  line-height:1.6;
  color:var(--gm-text-secondary,#55636E);
}
.grm-listing__breder a{color:var(--grm-accent,#1668C7);font-weight:600;text-decoration:underline}
.grm-listing__breder a:hover{color:var(--grm-marine,#103A63)}

.grm-bk.is-verborgen{display:none}

.grm-listing__zijbalk .grm-branche__other{margin-top:20px}

.grm-listing__pager{
  display:flex;
  justify-content:center;
  gap:6px;
  margin-top:32px;
}
.grm-listing__pager .page-numbers{
  display:inline-flex;
  align-items:center;
  gap:4px;
  min-width:40px;
  height:40px;
  padding:0 12px;
  justify-content:center;
  border:1px solid var(--gm-border,#D7DEE7);
  border-radius:8px;
  background:var(--gm-bg,#fff);
  color:var(--gm-text,var(--grm-ink,#041e42));
  text-decoration:none;
  font-weight:600;
}
.grm-listing__pager .page-numbers.current{background:var(--gm-primary,#103A63);color:#fff;border-color:var(--gm-primary,#103A63)}
.grm-listing__pager .page-numbers:hover:not(.current){border-color:var(--gm-primary,#103A63);color:var(--gm-primary,#103A63)}

@media (max-width:900px){
  /* Op een telefoon is elke zijrand er een te veel: de kaarten zijn de
     pagina, en 14px canvas links en rechts maakt ze alleen maar smaller. De
     lijst trekt zich met een negatieve marge uit de paginarand en de kaarten
     verliezen hun zijranden en hoeken, zodat rand-tot-rand er gekozen uitziet
     in plaats van afgesneden. De bedieningsstukjes erin (chips, filterknop,
     tabstrook) houden hun eigen inspringing, want een knop die tegen het glas
     plakt leest als een fout.

     Deze regels stonden in grootmarkt-polish.css en deden daar niets: dit
     bestand laadt later en zet hierboven margin:0 auto op dezelfde klasse. */
  .grm-listing{grid-template-columns:1fr;gap:0;padding-top:16px;
    margin-left:-14px;margin-right:-14px;padding-left:0;padding-right:0}
  .grm-listing .grm-bk{border-left:0;border-right:0;border-radius:0}
  .grm-listing .grm-filterchips,
  .grm-listing .grm-listing__zijbalk,
  .grm-listing .grm-tabs{padding-left:14px;padding-right:14px}
  .grm-listing__zijbalk{position:static}
  .grm-listing__filterknop{
    display:inline-flex;
    align-items:center;
    gap:8px;
    width:100%;
    justify-content:center;
    padding:12px;
    margin-bottom:16px;
    border:1px solid var(--gm-border,#D7DEE7);
    border-radius:10px;
    background:var(--gm-bg,#fff);
    color:var(--gm-text,var(--grm-ink,#041e42));
    font-size:15px;
    font-weight:700;
    cursor:pointer;
  }
  .grm-filters{
    position:fixed;
    top:0;
    bottom:0;
    left:0;
    right:auto;
    width:min(420px,100vw);
    z-index:2000;
    border-radius:0;
    overflow-y:auto;
    overscroll-behavior:contain;
    transform:translateX(-100%);
    transition:transform .24s var(--gm-ease,ease);
  }
  .grm-filters.is-open{transform:none}
  .grm-filters__kop{position:sticky;top:0;background:var(--gm-bg,#fff);z-index:1}
}

@media (max-width:600px){
  .grm-listing__bar{
    flex-direction:column;
    align-items:stretch;
    gap:10px;
  }
  .grm-listing__zoekmini{flex:1 1 auto;width:100%}
  .grm-listing__sort{margin-left:0;display:flex;align-items:center;gap:8px;justify-content:space-between}
  .grm-listing__sort select{flex:1;min-width:0;max-width:60%}
}
.grm-shop__crumbs{display:flex;align-items:center;gap:6px;font-size:13px;color:#55636E;margin-bottom:16px}
.grm-shop__crumbs a{color:#55636E;text-decoration:none;transition:color .12s}
.grm-shop__crumbs a:hover{color:#103A63}
.grm-shop__crumbs .material-symbols-rounded{font-size:14px;opacity:.55}
.grm-shop__crumb-now{color:#041E42;font-weight:700}

/*
  De kruimelbalk.

  De kruimels stonden los in de tekst: in de donkere hero halfdoorzichtig wit
  boven de kop, en op de overige pagina's als een kale regel tegen de
  paginakleur. Op geen van beide plekken zag het eruit als een onderdeel van de
  site, en tussen de sitekop en de kruimels zat niets dat de twee verbond.

  Nu een eigen strook over de volle breedte, wit en met een lijn eronder, direct
  onder de kop. Die lijn is wat de kop en de pagina aan elkaar knoopt: de kop
  eindigt, de strook loopt door in dezelfde kleur, en de scheiding zit op de
  onderrand in plaats van tussen de twee in.

  De strook staat altijd op wit, ook boven een donkere hero, want een kruimelpad
  dat per pagina van kleur wisselt leest niet als hetzelfde element.
*/
  margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);width:100vw;max-width:100vw;
  background:var(--grm-paper,#fff);
  border-bottom:1px solid var(--grm-line,#D7DEE7);
}
  max-width:var(--grm-w,1424px);margin:0 auto;padding:0 22px;
  display:flex;align-items:center;min-height:46px;
}
/* Een lang pad mag de strook niet oprekken; op een telefoon schuift het onder
   de vinger door. De schuifbalk zelf is weg, die hoort niet in een balk van
   zesenveertig pixels. */
  margin:0;padding:0;min-width:0;flex:1 1 auto;
  flex-wrap:nowrap;white-space:nowrap;
  overflow-x:auto;overflow-y:hidden;
  scrollbar-width:none;-ms-overflow-style:none;
}
@media(max-width:640px){
}
@media(max-width:640px){
  .grm-listing__bar{flex-wrap:wrap;gap:10px}
  .grm-listing__sort{margin-left:0}
  .grm-shop__search{max-width:100%}
}
body:has(.grm-filters.is-open) .grm-h{display:none}
.grm-filters__groep{border-bottom:1px solid var(--gm-border,#EAEFF5)}
.grm-filters__groep:last-child{border-bottom:0}
.grm-filters__groep-kop{display:flex;align-items:center;gap:9px;padding:10px 2px;font-size:14px;font-weight:700;color:var(--gm-text,var(--grm-ink,#041e42));cursor:pointer;list-style:none;min-height:42px}
.grm-filters__groep-kop::-webkit-details-marker{display:none}
.grm-filters__groep-kop:hover{color:var(--gm-primary,#103A63)}
.grm-filters__groep-naam{flex:1;min-width:0}
.grm-filters__groep-tel{font-size:11px;font-weight:700;color:var(--gm-primary,#103A63);background:var(--gm-primary-50,#EDF2F8);border-radius:999px;padding:1px 8px}
.grm-filters__groep-kop .material-symbols-rounded{font-size:19px;color:var(--gm-text-tertiary,var(--grm-ink-400,#7A8794));transition:transform .18s}
.grm-filters__groep[open] .grm-filters__groep-kop .material-symbols-rounded{transform:rotate(180deg)}
.grm-filters__groep-subs{display:flex;flex-direction:column;gap:1px;padding:2px 0 10px 18px;border-left:2px solid var(--gm-primary-50,#EDF2F8);margin-left:5px}
.grm-filters__optie--sub{font-size:13.5px;padding:5px 0}
.grm-weergave{display:inline-flex;gap:2px;padding:3px;border:1px solid var(--gm-border,#D7DEE7);border-radius:10px;background:#fff}
.grm-weergave__knop{display:inline-flex;align-items:center;justify-content:center;width:36px;height:34px;border:0;border-radius:7px;background:none;color:var(--gm-text-secondary,#55636E);cursor:pointer;transition:background .14s,color .14s}
.grm-weergave__knop:hover{background:var(--gm-primary-50,#EDF2F8);color:var(--gm-primary,#103A63)}
.grm-weergave__knop.is-actief{background:var(--gm-primary,#103A63);color:#fff}
.grm-weergave__knop .material-symbols-rounded{font-size:19px}
@media(max-width:600px){.grm-weergave{display:none}}

.grm-filters__verwant{padding:0 0 16px;margin:0 0 16px;border-bottom:1px solid var(--grm-line-soft,#eaeff5)}
.grm-filters__verwant-ouder{display:flex;align-items:center;gap:8px;padding:9px 11px;margin-bottom:8px;border-radius:9px;background:#EDF2F8;color:#103A63;font-weight:800;font-size:14px;text-decoration:none}
.grm-filters__verwant-ouder:hover{background:var(--grm-brand-100,#d3e0ef)}
.grm-filters__verwant-ouder .material-symbols-rounded{font-size:18px}
.grm-filters__verwant-lijst{list-style:none;margin:0;padding:0}
.grm-filters__verwant-lijst li{border-bottom:1px solid var(--grm-sky-50,#edf2f8)}
.grm-filters__verwant-lijst li:last-child{border-bottom:0}
.grm-filters__verwant-lijst a{display:block;padding:8px 11px;color:var(--grm-ink-700,#33424f);font-size:13.5px;text-decoration:none;border-radius:7px}
.grm-filters__verwant-lijst a:hover{background:var(--grm-canvas,#f5f7fa);color:#103A63}
.grm-filters__verwant-lijst a[aria-current=page]{background:#103A63;color:#fff;font-weight:700}

.grm-filters__gekozen{display:flex;align-items:center;gap:8px;margin:0 0 12px;padding:7px 11px;border-radius:8px;background:#EDF2F8;color:#103A63;font-size:12.5px;font-weight:700}
.grm-filters__tel{margin-left:auto;padding-left:8px;color:var(--grm-ink-400,#7A8794);font-size:12px;font-weight:600;font-variant-numeric:tabular-nums}
.grm-filters__optie{display:flex;align-items:center;gap:9px}
.grm-filters__optie.is-leeg{opacity:.42}
.grm-filters__optie.is-leeg .grm-filters__tel{color:#A8B4BC}

.grm-listing__filterbadge{display:inline-flex;align-items:center;justify-content:center;min-width:19px;height:19px;margin-left:7px;padding:0 5px;border-radius:10px;background:var(--grm-danger,#dc2626);color:#fff;font-size:11px;font-weight:800;line-height:1}

.grm-bk-promo{display:flex;flex-direction:column;justify-content:flex-end;gap:8px;padding:22px;border-radius:14px;background:linear-gradient(135deg,#103A63,#1668C7);color:#fff;text-decoration:none;min-height:220px;min-width:0}
.grm-bk-promo__label{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;opacity:.8}
.grm-bk-promo h3{margin:0;font-family:"Inter Tight",sans-serif;font-size:21px;font-weight:800;line-height:1.15}
.grm-bk-promo p{margin:0;font-size:13.5px;line-height:1.5;opacity:.9}
.grm-bk-promo__cta{display:inline-flex;align-items:center;gap:6px;margin-top:6px;font-weight:700;font-size:14px}
.grm-bk-promo:hover .grm-bk-promo__cta{gap:10px}
.grm-bk-promo__cta .material-symbols-rounded{font-size:18px;transition:transform .16s}

/* De terug-omhoogknop staat in dezelfde hoek als de hulpknop, in een nette
   stapel erboven: zelfde middellijn, een vaste ruimte ertussen. De maten
   volgen de hulpknop (60 breed op right:24, 56 breed op right:20), anders
   staan de twee rondjes net niet boven elkaar en op een telefoon met de
   tabbalk zelfs over elkaar heen. */
.grm-naarboven{position:fixed;right:32px;bottom:96px;z-index:900;width:44px;height:44px;border-radius:50%;border:1px solid #D7DEE7;background:#fff;color:#103A63;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 6px 18px rgba(4,30,66,.16);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}
.grm-naarboven.is-zichtbaar{opacity:1;pointer-events:auto}
.grm-naarboven:hover{transform:translateY(-2px)}
@media (max-width:840px){.grm-naarboven{right:28px;bottom:86px;width:40px;height:40px}}
@media (max-width:900px){body.grm-has-tabbar .grm-naarboven{bottom:148px}}

.grm-shop__groepen{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px;min-width:0}
.grm-shop__groep{display:inline-flex;align-items:center;gap:8px;padding:8px 13px;border-radius:999px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.24);color:#fff;font-size:13.5px;font-weight:600;text-decoration:none;transition:background .15s,border-color .15s}
.grm-shop__groep:hover{background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.45)}
.grm-shop__groep>.material-symbols-rounded{font-size:18px}
.grm-shop__groep .grm-tel{margin-left:0;background:rgba(255,255,255,.2);color:#fff}
@media (max-width:640px){
  .grm-shop__groepen{gap:6px;margin-top:14px}
  .grm-shop__groep{padding:7px 11px;font-size:12.5px;gap:6px}
}

/* De groepschips staan onder de zoekbalk in een hero zonder eigen donkere
   achtergrond, dus wit viel weg tegen de pagina. */
.grm-shop__groep{background:#fff;border:1px solid #D7DEE7;color:#103A63}
.grm-shop__groep:hover{background:#EDF2F8;border-color:#1668C7;color:#0B2A49}
.grm-shop__groep>.material-symbols-rounded{color:#1668C7}
.grm-shop__groep .grm-tel{background:#EDF2F8;color:#55636E}

.grm-filters__optie--groep{font-size:13.5px;font-weight:700;padding:6px 0 7px;margin-bottom:3px;color:var(--gm-primary,#103A63);border-bottom:1px solid var(--gm-primary-50,#EDF2F8)}
.grm-listing__alles{margin-left:auto;font-size:13px;font-weight:700;color:var(--gm-primary,#103A63);text-decoration:none}
.grm-listing__alles:hover{text-decoration:underline}

.grm-listing__filterbadge[hidden]{display:none}

.grm-filterchips__kop{font-family:var(--grm-font-display,'Inter Tight',sans-serif);font-size:13px;font-weight:800;letter-spacing:.02em;color:var(--grm-ink-500,#55636E)}

@media (min-width:901px){
  .grm-listing.heeft-filterchips{grid-template-rows:auto 1fr}
  .grm-listing.heeft-filterchips .grm-filterchips{grid-column:2;grid-row:1;margin:0}
  .grm-listing.heeft-filterchips .grm-listing__zijbalk{grid-column:1;grid-row:1 / span 2}
  .grm-listing.heeft-filterchips .grm-listing__resultaat{grid-column:2;grid-row:2}
}

@media (max-width:900px){
  .grm-listing.heeft-filterchips .grm-filterchips{
    display:flex;
    order:-1;
    margin:0 0 16px;
    padding:12px 14px;
    background:#fff;
    border:1px solid var(--grm-line,#D7DEE7);
    border-radius:var(--grm-r-md,12px);
    box-shadow:var(--grm-shadow-sm,0 2px 6px rgba(4,30,66,.06));
  }
  .grm-filterchips__kop{width:100%;margin-bottom:2px}
}

/* Waar: de plaatskeuze met de straal eronder. De straal hangt aan het
   middelpunt en blijft weg tot dat er is; binnen 25 km zonder te zeggen
   waarvan is geen filter maar een getal. */
.grm-filters__waar{display:flex;flex-direction:column;gap:10px}
.grm-filters__waar-veld{display:flex;flex-direction:column;gap:5px;font-size:12.5px;font-weight:700;color:var(--grm-ink,#041E42)}
.grm-filters__waar-veld input{
  width:100%;box-sizing:border-box;padding:10px 12px;
  font:inherit;font-size:13.5px;font-weight:400;
  border:1px solid var(--grm-line,#D7DEE7);border-radius:10px;
  background:#fff;color:var(--grm-ink,#041E42);
}
.grm-filters__waar-veld input:focus{
  outline:none;border-color:var(--grm-accent,#1668C7);box-shadow:0 0 0 3px rgba(22,104,199,.12);
}
/* De plaatszoeker hangt zijn lijst onder het veld; die moet boven de
   filtersecties eronder komen te liggen. */
.grm-filters__waar .grm-plaatszoek{position:relative;z-index:5}
.grm-filters__straal[hidden]{display:none}
.grm-filters__straal{
  padding:12px;border-radius:11px;
  background:var(--grm-rij-zacht,#F5F7FA);border:1px solid var(--grm-line,#D7DEE7);
}
.grm-filters__straal-om{
  display:flex;align-items:center;gap:6px;margin:0 0 8px;
  font-size:12.5px;color:var(--grm-ink-500,#55636E);
}
.grm-filters__straal-om .material-symbols-rounded{font-size:16px;color:var(--grm-accent,#1668C7)}
.grm-filters__straal-om strong{color:var(--grm-ink,#041E42)}
.grm-filters__straal-fijn{margin:6px 0 0;font-size:11.5px;color:var(--grm-ink-400,#7A8794)}

.grm-filters__prodgroep{display:flex;flex-direction:column;gap:2px;margin:0 0 10px}
.grm-filters__prodgroep[hidden]{display:none}
.grm-filters__prodkop{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.07em;color:var(--grm-ink-400,#7A8794);margin:2px 0 4px}
.grm-filters__prodleeg{margin:0;font-size:13px;line-height:1.55;color:var(--grm-ink-500,#55636E)}
.grm-filters__prodleeg[hidden]{display:none}