html{scroll-behavior:smooth;scroll-padding-top:96px}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

.grm-anim,
.grm-anim--fade-up,
.grm-anim--fade-in,
.grm-anim--rise{opacity:0;transform:translateY(20px);transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1);will-change:opacity,transform}
.grm-anim--fade-in{transform:none}
.grm-anim--rise{transform:translateY(40px) scale(.97)}

.grm-anim.is-visible,
.grm-anim--fade-up.is-visible,
.grm-anim--fade-in.is-visible,
.grm-anim--rise.is-visible{opacity:1;transform:none}

.grm-stagger > *{opacity:0;transform:translateY(16px);transition:opacity .55s cubic-bezier(.22,1,.36,1),transform .55s cubic-bezier(.22,1,.36,1)}
.grm-stagger.is-visible > *:nth-child(1){opacity:1;transform:none;transition-delay:.05s}
.grm-stagger.is-visible > *:nth-child(2){opacity:1;transform:none;transition-delay:.12s}
.grm-stagger.is-visible > *:nth-child(3){opacity:1;transform:none;transition-delay:.20s}
.grm-stagger.is-visible > *:nth-child(4){opacity:1;transform:none;transition-delay:.28s}
.grm-stagger.is-visible > *:nth-child(5){opacity:1;transform:none;transition-delay:.36s}
.grm-stagger.is-visible > *:nth-child(6){opacity:1;transform:none;transition-delay:.44s}
.grm-stagger.is-visible > *:nth-child(n+7){opacity:1;transform:none;transition-delay:.5s}

@media(prefers-reduced-motion:reduce){
  .grm-anim,
  .grm-anim--fade-up,
  .grm-anim--fade-in,
  .grm-anim--rise,
  .grm-stagger > *{opacity:1 !important;transform:none !important;transition:none !important}
}

.grm-counter{font-variant-numeric:tabular-nums}
.grm-counter.is-animating{color:inherit}

.grm-skel{position:relative;overflow:hidden;background:linear-gradient(110deg,var(--grm-sky-50,#edf2f8) 8%,var(--grm-canvas,#f5f7fa) 18%,var(--grm-sky-50,#edf2f8) 33%);background-size:200% 100%;animation:grmSkelShimmer 1.6s linear infinite;border-radius:8px;color:transparent;pointer-events:none;user-select:none}
.grm-skel--text{height:14px;margin:6px 0}
.grm-skel--title{height:22px;margin:0 0 10px;width:60%}
.grm-skel--card{aspect-ratio:16/10;width:100%;border-radius:14px;margin-bottom:14px}
.grm-skel--avatar{width:48px;height:48px;border-radius:50%}
.grm-skel--btn{height:38px;width:120px;border-radius:10px}

@keyframes grmSkelShimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
@media(prefers-reduced-motion:reduce){.grm-skel{animation:none;background:var(--grm-sky-50,#edf2f8)}}

.gm-btn,
.grm-h__btn,
.grm-biz__tier-btn,
.grm-branche__filter-apply,
.grm-auth__submit{transition:background .14s,color .14s,transform .12s cubic-bezier(.22,1,.36,1),box-shadow .14s}
.gm-btn:active,
.grm-h__btn:active,
.grm-biz__tier-btn:active,
.grm-branche__filter-apply:active,
.grm-auth__submit:active{transform:translateY(1px) scale(.98)}

.grm-img-fade{opacity:0;transition:opacity .5s ease-out}
.grm-img-fade.is-loaded{opacity:1}.grm-home__cat:focus-visible,
.grm-home__usp:focus-visible,
.grm-biz__tier:focus-visible,
.grm-biz__usp:focus-visible,
.grm-branche__sheet-open:focus-visible,
.grm-branche__sheet-close:focus-visible,
.grm-shop__chip:focus-visible,
.grm-prof__hero-cta:focus-visible,
.grm-prof__cta-block:focus-visible,
.grm-dash__navbtn:focus-visible,
.grm-dash__current:focus-visible{
  outline:3px solid #1668C7 !important;
  outline-offset:2px;
  border-radius:10px;
}

::selection{background:rgba(22,104,199,.25);color:#041E42}
::-moz-selection{background:rgba(22,104,199,.25);color:#041E42}

body.grm-chrome-active{scrollbar-width:thin;scrollbar-color:#A8B4BC #F5F7FA}
body.grm-chrome-active ::-webkit-scrollbar{width:10px;height:10px}
body.grm-chrome-active ::-webkit-scrollbar-track{background:#F5F7FA}
body.grm-chrome-active ::-webkit-scrollbar-thumb{background:#A8B4BC;border-radius:99px;border:2px solid #F5F7FA}
body.grm-chrome-active ::-webkit-scrollbar-thumb:hover{background:#55636E}

@media print{
  .grm-topstrip,.grm-h,.grm-h-drawer,.grm-h-drawer-backdrop,.grm-tabbar,
  .grm-branche__sheet-open,.grm-branche__sheet-backdrop,
  .grm-h__btn--cta,.gm-btn--cta,.grm-prof__hero-cta,
  .grm-biz__final{display:none !important}
  body{background:#fff !important;color:#000 !important}
  a{color:#103A63 !important;text-decoration:underline}
}

@media(prefers-color-scheme:dark){
  body.grm-chrome-active.grm-dark-opt{
    --grm-canvas: #041E42;
    --grm-paper: #0B2A49;
    --grm-line: #33424F;
    --grm-line-soft: #103A63;
    --grm-ink: #F5F7FA;
    --grm-ink-700: #EDF2F8;
    --grm-ink-500: #A8B4BC;
    --grm-ink-300: #55636E;
    --grm-brand-50: rgba(22,104,199,.16);
    background:var(--grm-canvas);
    color:var(--grm-ink);
  }
}

img[loading="lazy"]:not([src*=".svg"]){background:linear-gradient(135deg,#F5F7FA 0%,#D7DEE7 100%)}

@media(max-width:680px){
  .grm-carrousel{padding:0 16px}
  .grm-carrousel__spoor:has(> .grm-bk){
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;
    overflow-x:visible;scroll-snap-type:none;padding:2px 0 6px;
  }
  .grm-carrousel__spoor:has(> .grm-bk) > .grm-bk{
    flex:initial;width:auto;max-width:none;min-width:0;
    grid-template-columns:1fr;scroll-snap-align:none;
  }
  .grm-carrousel__spoor:has(> .grm-bk) .grm-bk__beeld{height:92px;width:100%}
  .grm-carrousel__spoor:has(> .grm-bk) .grm-bk__body{padding:9px 10px 11px;gap:3px}
  .grm-carrousel__spoor:has(> .grm-bk) .grm-bk__kop{display:block}
  .grm-carrousel__spoor:has(> .grm-bk) .grm-bk__naam{
    margin:0;font-size:13px;line-height:1.28;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  }
  .grm-carrousel__spoor:has(> .grm-bk) .grm-bk__plaats{margin:0;padding:0;border:0;min-height:0;gap:3px;font-size:11.5px}
  .grm-carrousel__spoor:has(> .grm-bk) .grm-bk__plaats .material-symbols-rounded{font-size:13px}
  .grm-carrousel__spoor:has(> .grm-bk) .grm-bk__keur{
    position:absolute;top:6px;right:6px;z-index:2;margin:0;padding:0;
    width:22px;height:22px;border-radius:50%;justify-content:center;
    font-size:0;line-height:0;box-shadow:0 2px 6px rgba(4,30,66,.25);
  }
  .grm-carrousel__spoor:has(> .grm-bk) .grm-bk__keur .material-symbols-rounded{font-size:14px;line-height:1}
  .grm-carrousel__spoor:has(> .grm-bk) .grm-bk__tekst,
  .grm-carrousel__spoor:has(> .grm-bk) .grm-bk__feiten,
  .grm-carrousel__spoor:has(> .grm-bk) .grm-bk__kenmerken,
  .grm-carrousel__spoor:has(> .grm-bk) .grm-bk__branche,
  .grm-carrousel__spoor:has(> .grm-bk) .grm-bk__typen,
  .grm-carrousel__spoor:has(> .grm-bk) .grm-bk__afstand,
  .grm-carrousel__spoor:has(> .grm-bk) .grm-bk__producten,
  .grm-carrousel__spoor:has(> .grm-bk) .grm-bk__voet,
  .grm-carrousel__spoor:has(> .grm-bk) .grm-bk__acties{display:none}
}

.grm-shop{width:100%;padding-left:22px;padding-right:22px}
.grm-shop > .grm-listing{max-width:none;padding-left:0;padding-right:0}

/* De eerste sectie onder een paginakop stond op 24 pixels: dat werkte toen
   er een kop met tekst boven de tegels stond en die de ruimte zelf droeg.
   Zonder die kop plakken de tegels tegen de donkere kop aan. 48 pixels is
   dichter dan de gewone 80, maar niet meer tegen elkaar aan. */
.grm-pagehero + .grm-section{padding-top:var(--grm-s-12,48px)}

.grm-prof{background:transparent;padding-left:22px;padding-right:22px}
.grm-prof > .grm-prof__hero,
.grm-prof > .grm-prof__strook,
.grm-prof > .grm-prof__body{max-width:none;padding-left:0;padding-right:0}
/* De kruimels en de kop droegen nog hun eigen middenmaat met eigen
   zijruimte, terwijl de body hierboven al op de volle breedte staat. Twee
   maten boven elkaar leest als een pagina die scheef in elkaar zit. */
.grm-prof > .grm-prof__crumbs,
.grm-prof > .grm-prof__kop{max-width:none;padding-left:0;padding-right:0}
/* De ankerbalk als kaartje, net als de blokken eronder. Hij hing als kale
   strook met alleen een boven- en onderlijn tussen kaartjes met een rand en
   een ronding. */
.grm-prof > .grm-prof__ankers{border:1px solid var(--grm-line,#D7DEE7);border-radius:16px;background:#fff;box-shadow:0 2px 8px rgba(4,30,66,.04);overflow:hidden}
.grm-prof > .grm-prof__ankers .grm-prof__ankers-in{max-width:none;padding:0 10px}
.grm-prof__hero{background-image:none}

.grm-hublijst{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:stretch}
.grm-hublijst__groep{display:flex;flex-direction:column}
.grm-hublijst__subs{flex:1 1 auto}
.grm-hublijst__kop{align-items:center;gap:12px;padding:14px 16px;font-size:17px}
.grm-hublijst__ic{width:44px;height:44px;border-radius:11px}
.grm-hublijst__ic .material-symbols-rounded{font-size:24px}
.grm-hublijst__kop-txt{flex:1 1 auto;display:flex;flex-direction:column;justify-content:center;gap:2px;min-width:0;height:44px;font-size:17px;line-height:1.2}
.grm-hublijst__kop-txt small{display:block;margin:0;font-size:13px;line-height:1.2;font-weight:500;color:var(--grm-ink-400,#7A8794);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:900px){.grm-hublijst{grid-template-columns:1fr}}

.grm-home__hero{
  background-image:
    linear-gradient(180deg, rgba(4,30,66,.86) 0%, rgba(4,30,66,.78) 45%, rgba(16,58,99,.90) 100%),
    var(--grm-fp-bg, var(--grm-hero-foto, none));
  background-size:cover;
  background-position:center 42%;
  background-repeat:no-repeat;
}
.grm-home__hero::before{opacity:.35}
.grm-home__hero h1,
.grm-home__hero p,
.grm-home__hero .grm-home__eyebrow{color:#fff}
.grm-home__hero .grm-home__h1-acc{color:var(--grm-accent-200,#9CC4EE)}
:root{--grm-hero-foto:url("../img/hero-magazijn.jpg")}

.grm-shop__hero{
  /* Geen overflow:hidden: de plaatszoeker in de zoekbalk klapt een lijst uit
     die onder de herorand doorloopt. De achtergrond is een background-image op
     de bg-laag en kan toch niet uitbreken. */
  position:relative;color:#fff;
  padding:40px 0 34px;
  /* Uit de container breken naar de vensterranden. Eerst stond hier een marge
     van precies de zijpadding van .grm-shop, maar die doos heeft max-width
     1424px: op een breed scherm hield de hero daar op en bleef er wit naast
     staan. De body knipt horizontaal af, dus 100vw levert hier geen schuifbalk. */
  margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);width:100vw;max-width:100vw;
  background:linear-gradient(135deg,var(--grm-fp-b1,#041E42) 0%,var(--grm-fp-b2,#103A63) 62%,var(--grm-fp-b3,var(--grm-success,#103a63)) 100%);
}
.grm-shop__hero-bg{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(60rem 30rem at 100% 0%, rgba(255,255,255,.10), transparent 60%),
    radial-gradient(40rem 25rem at 0% 100%, rgba(0,0,0,.14), transparent 65%),
    var(--grm-fp-bg, none);
  background-size:auto,auto,cover;
  background-position:center,center,center 45%;
  background-repeat:no-repeat;
  opacity:1;
}
.grm-shop__hero-in{position:relative;z-index:2;max-width:var(--grm-w,1424px);margin:0 auto;padding:0 22px}
.grm-shop__hero h1{margin:0 0 10px;font-family:var(--grm-font-display,"Inter Tight",sans-serif);font-size:clamp(26px,3.2vw,40px);font-weight:800;line-height:1.14;color:#fff}
.grm-shop__hero-sub{margin:0 0 22px;max-width:64ch;font-size:15.5px;line-height:1.6;color:rgba(255,255,255,.88)}

.grm-shop__soorten{display:flex;flex-wrap:wrap;align-items:center;gap:8px;max-width:760px;margin:14px 0 0}
.grm-shop__soorten-kop{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:rgba(255,255,255,.72);margin-right:2px}
.grm-shop__soort{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:999px;border:1px solid rgba(255,255,255,.34);background:rgba(255,255,255,.12);color:#fff;font-size:13.5px;font-weight:600;line-height:1.2;text-decoration:none}
.grm-shop__soort:hover,.grm-shop__soort:focus-visible{background:#fff;border-color:#fff;color:var(--grm-ink,#041E42)}
.grm-shop__soort.is-actief{background:#fff;border-color:#fff;color:var(--grm-ink,#041E42)}
.grm-shop__soort-tel{font-size:11.5px;font-weight:700;padding:1px 7px;border-radius:999px;background:rgba(255,255,255,.22);color:inherit}
.grm-shop__soort:hover .grm-shop__soort-tel,.grm-shop__soort.is-actief .grm-shop__soort-tel{background:var(--grm-sky-50,#EDF2F8)}
.grm-shop__soort--alles{border-style:dashed}
@media(max-width:600px){.grm-shop__soorten{gap:6px}.grm-shop__soort{font-size:13px;padding:6px 11px}}

.grm-shop__zoek{display:flex;align-items:center;gap:10px;max-width:660px;padding:5px 5px 5px 14px;border-radius:14px;background:rgba(255,255,255,.97);box-shadow:0 8px 26px rgba(4,30,66,.28)}
.grm-shop__zoek>.material-symbols-rounded{font-size:22px;color:#55636E;flex:0 0 auto}
.grm-shop__zoek-lbl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.grm-shop__zoek input{flex:1 1 auto;min-width:0;border:0;outline:0;background:transparent;font:inherit;font-size:15.5px;color:var(--grm-ink,#041e42);padding:12px 0}
.grm-shop__zoek input::placeholder{color:var(--grm-ink-400,#7A8794)}
.grm-shop__zoek-knop{flex:0 0 auto;border:0;padding:12px 22px;background:var(--gm-primary,#103A63);color:#fff;font:inherit;font-size:14.5px;font-weight:700;cursor:pointer;transition:background .14s}
.grm-shop__zoek-knop:hover{background:var(--grm-success-text,#0b2a49)}

.grm-shop__hero .grm-shop__groepen{display:flex;flex-wrap:wrap;gap:9px;margin-top:22px}

@media(max-width:760px){
  .grm-shop__hero{padding:28px 0 26px}
  .grm-shop__hero-in{padding:0 16px}
  .grm-shop__zoek{padding-left:13px;gap:8px}
  .grm-shop__zoek-knop{padding:11px 15px;font-size:13.5px}
  .grm-shop__hero-sub{font-size:14.5px;margin-bottom:18px}
}

/* Twee regels in plaats van één. Op een smal scherm paste er zo weinig op die
   ene regel dat bijna alle categorieen achter de knop verdwenen; met een tweede
   regel blijft het overgrote deel gewoon staan, en hoe breder het scherm hoe
   meer erop past. */
.grm-h__bar-in{position:relative;flex-wrap:wrap;row-gap:4px;overflow:hidden;max-height:46px;padding-right:150px;transition:max-height .18s ease}
.grm-h__bar-in.is-open{max-height:none}
/* Geen aparte knop maar dezelfde regel als de categorielinks ernaast: alleen de
   pijl en een iets rustiger kleur verraden dat het geen categorie is. Een
   omkaderde knop trok alle aandacht naar zich toe in een balk die juist over de
   categorieen moet gaan. */
.grm-h__bar-meer{position:absolute;right:22px;top:0;height:44px;gap:4px;border:0;background:transparent;color:var(--grm-ink-500,#55636E);cursor:pointer;white-space:nowrap;font-weight:700}
.grm-h__bar-meer:hover{background:var(--grm-brand-50,#EDF2F8);color:var(--grm-brand,#103A63)}
.grm-h__bar-meer .material-symbols-rounded{font-size:18px;transition:transform .18s}
.grm-h__bar-in.is-open .grm-h__bar-meer .material-symbols-rounded{transform:rotate(180deg)}
/* Smaller scherm, compactere linkjes: elke bespaarde pixel is een categorie die
   nog wél in beeld blijft in plaats van achter de knop te verdwijnen. */
@media(max-width:900px){
  .grm-h__barlink{height:40px;padding:0 10px;font-size:13.5px}
  .grm-h__bar-alles{height:40px;padding:0 11px;font-size:13.5px}
  .grm-h__bar-in{max-height:42px}
  .grm-h__bar-meer{height:40px}
}
@media(max-width:640px){
  .grm-h__bar-in{padding-right:120px}
  .grm-h__bar-meer{right:16px;padding:0 10px;font-size:12.5px}
}
@media(max-width:520px){
  .grm-h__barlink{padding:0 9px;font-size:13px}
  .grm-h__barlink .grm-tel{display:none}
  .grm-h__bar-in{padding-right:96px}
  .grm-h__bar-meer-txt{display:none}
  .grm-h__bar-meer{padding:0 9px}
}

.grm-home__hero-inner{max-width:1040px}
.grm-home__featured,.grm-home__cats{padding-left:22px;padding-right:22px}
.grm-home__featured > .grm-carrousel,
.grm-home__featured > .grm-home__raster,
.grm-home__cats > .grm-home__mozaiek{max-width:none;padding-left:0;padding-right:0}

.grm-branche__hero-head{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:16px;row-gap:12px}
.grm-branche__hero-txt{display:contents}
.grm-branche__hero-head > .grm-branche__hero-ic{grid-column:1;grid-row:1}
.grm-branche__hero-txt > h1{grid-column:2;grid-row:1;margin:0}
.grm-branche__hero-txt > .grm-branche__hero-sub{grid-column:1 / -1;grid-row:2}
.grm-branche__hero-ic{width:56px;height:56px;border-radius:14px}
.grm-branche__hero-ic .material-symbols-rounded{font-size:30px}
@media(max-width:640px){
  .grm-branche__hero-head{column-gap:12px}
  .grm-branche__hero-ic{width:46px;height:46px;border-radius:12px}
  .grm-branche__hero-ic .material-symbols-rounded{font-size:25px}
}

.container:has(> .row > .grm-shop),
.container:has(> .grm-shop){padding-left:0;padding-right:0}
.container > .row > .grm-shop,
.container > .grm-shop{margin-left:auto;margin-right:auto;width:100%}
.grm-shop__hero{border-radius:0}
.grm-shop__hero .grm-shop__hero-sub{color:rgba(255,255,255,.88);max-width:64ch}
.grm-shop .grm-shop__zoek .grm-shop__zoek-knop{border-radius:10px !important}

body.grm-kaal .grm-h,
body.grm-kaal .grm-topstrip,
body.grm-kaal .grm-f,
body.grm-kaal .grm-naarboven,
body.grm-kaal .grm-tabbar{display:none}
body.grm-kaal .grm-onboard{padding-top:24px}

/* De fotoplekken, voor elke bezoeker.
   Deze regels stonden in grootmarkt-fotoplek.css, maar dat bestand laadt
   alleen voor wie mag bewerken. Een gewone bezoeker kreeg dus een inline
   afbeelding op eigen formaat die de plek maar half vulde. Hier geldt voor
   iedereen: het vlak houdt de verhouding die de plek meekrijgt en de foto
   dekt hem volledig af. */
.grm-fotoplek{position:relative;overflow:hidden;border-radius:var(--grm-r-md,16px);background:var(--grm-brand-50,#EDF2F8);aspect-ratio:var(--grm-fp-ratio,4/3)}
/* Met de plek in de selector, niet omdat het mooi is: het thema zet
   .main-content img op height:auto, en dat is met klasse plus element net
   zwaarder dan een kale klasse. Dan rendert de foto op eigen formaat en
   blijft er een strook merkvlak onder over. Deze selector wint daar altijd
   van, ook nu het themabestand ná dat van ons laadt. */
.grm-fotoplek img.grm-fotoplek__img{display:block;width:100%;height:100%;object-fit:cover}
.grm-fotoplek--leeg{
  background:linear-gradient(135deg,var(--grm-success-text,#0b2a49) 0%,#103A63 55%,var(--grm-success,#103a63) 100%);
}
.grm-fotoplek--leeg::after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(28rem 16rem at 100% 0%, rgba(255,255,255,.10), transparent 62%),
    radial-gradient(22rem 14rem at 0% 100%, rgba(0,0,0,.18), transparent 66%);
}

/* De accountomgeving: tweede menubalk en voettekst weg. Uitgelogd (het
   inlogscherm) blijft de sitekop staan; ingelogd is het account het hele
   scherm en gaat de kop ook weg. De weg terug zit dan in de zijbalk. */
body.grm-portaalpagina .grm-h__bar,
body.grm-portaalpagina .grm-f{display:none}
body.grm-portaal-in .grm-h,
body.grm-portaal-in .grm-topstrip{display:none}

/* Het werkscherm loopt van rand tot rand.
   Het themaraamwerk zet er een kolom van twintig pixels aan weerszijden
   omheen. Dat klopt voor een tekstpagina, maar een zijbalk die tegen de
   rand hoort te staan komt dan twintig pixels van de rand af te zweven en
   het werkvlak is aan de andere kant net zoveel te smal. Gemeten met deze
   drie regels: inhoud begint op nul, breedte gelijk aan het document, en
   scrollWidth gelijk aan clientWidth, dus geen liggende schuifbalk. */
body.grm-portaalpagina .container.main-content{max-width:100%;width:100%;padding-left:0;padding-right:0}
body.grm-portaalpagina .container.main-content > .row{margin-left:0;margin-right:0;padding-left:0;padding-right:0;width:100%;max-width:none}

/* Op een bedrijfsprofiel gaat het over dat ene bedrijf. De zoekbalk in de kop
   zoekt iets heel anders dan waar je naar kijkt en trekt je van de
   aanvraagknop weg. */
body.grm-profielpagina .grm-h__zoek{display:none}
body.grm-profielpagina .grm-h__bar,
body.grm-profielpagina .grm-f__branches,
body.grm-profielpagina .grm-f__regio,
body.grm-profielpagina .grm-f__bottom{display:none}
body.grm-profielpagina .grm-f__wettelijk{
  display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;
  padding:16px 0 4px;border-top:1px solid rgba(255,255,255,.12);
  font-size:12px;color:var(--grm-ink-300,#a8b4bc);
}
body.grm-profielpagina .grm-f__wettelijk a{color:var(--grm-line,#d7dee7);text-decoration:none}
body.grm-profielpagina .grm-f__wettelijk a:hover{text-decoration:underline}

/* min() en niet de kale variabele: dit blad laadt NA profile.css, dus deze
   regel wint van de kap die daar staat. Met alleen var(--grm-w) werd het
   profiel op een telefoon 495 pixels breed in een scherm van 402, en stak
   alles rechts uit beeld. Gemeten op het profiel van Sligro: met min() is
   het exact de schermbreedte. */
.grm-prof{max-width:min(var(--grm-w,1424px),100%);margin-left:auto;margin-right:auto}
.grm-prof > .grm-prof__topbar-wrap{max-width:none;padding-left:0;padding-right:0}
.grm-prof__topbar{max-width:none;padding-left:0;padding-right:0}

.container:has(> .row > .grm-page),
.container:has(> .grm-page){padding-left:0;padding-right:0}
.grm-page{padding-left:22px;padding-right:22px}

body.grm-gidspagina .grm-h__zoek,
body.grm-gidspagina .grm-h__bar{display:none}

.container:has(> .row > .grm-fullwrap),
.container:has(> .grm-fullwrap){padding-left:0;padding-right:0;max-width:none}
.grm-container,
.grm-f__in{padding-left:22px;padding-right:22px}

.grm-home__cta{padding-top:8px}
.grm-home__cta-acties{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:22px}
@media(max-width:520px){
  .grm-home__cta-acties{flex-direction:column}
  .grm-home__cta-acties .gm-btn{width:100%;justify-content:center}
}
.grm-home__cta-inner .gm-btn--ghost-op-donker{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.34)}
.grm-home__cta-inner .gm-btn--ghost-op-donker:hover{background:rgba(255,255,255,.10);color:#fff;border-color:rgba(255,255,255,.5)}

.grm-filters__backdrop{display:none}
.grm-filters__sluit{display:none}
@media(max-width:980px){
  .grm-listing__filterknop,
  .grm-branche__sheet-open{display:flex !important;width:100%;justify-content:center;margin-bottom:14px}
  .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 cubic-bezier(.4,0,.2,1);max-width:none;box-shadow:0 0 40px rgba(4,30,66,.3);padding-bottom:16px}
  .grm-filters.is-open{transform:none}
  .grm-filters__backdrop{display:block;position:fixed;inset:0;z-index:1990;background:rgba(4,30,66,.5)}
  .grm-filters__backdrop[hidden]{display:none}
  .grm-filters__kop{position:sticky;top:0;z-index:2;background:#fff;padding-right:52px}
  .grm-filters__sluit{display:inline-flex;position:absolute;top:10px;right:12px;width:38px;height:38px;align-items:center;justify-content:center;border:1px solid var(--grm-line,#D7DEE7);border-radius:10px;background:#fff;color:var(--grm-ink,#041E42);cursor:pointer}
  .grm-filters__sluit .material-symbols-rounded{font-size:22px}
  html.wp-toolbar .grm-filters{top:32px}
  body.grm-filters-open{overflow:hidden}
  html.grm-filters-open{overflow:hidden !important}
  body.grm-filters-open .grm-h,
  body.grm-filters-open .grm-tabbar{display:none !important}
}
@media(max-width:782px){
  html.wp-toolbar .grm-filters{top:46px}
}

.grm-home__raster{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;
  align-items:stretch;
}
.grm-home__raster > *{height:100%}
/*
  Elk kaartje even hoog.

  De tegel is een grid zonder rijopgave, dus de twee rijen (kop en romp) namen
  precies de hoogte van hun inhoud. Een bedrijf met een naam van twee regels of
  zonder plaatsnaam werd daardoor korter dan zijn buurman, en in een rij van
  drie zag je drie verschillende hoogtes.
  Met "auto 1fr" krijgt de romp de rest van de hoogte, en omdat de knoppenrij
  al op margin-top:auto staat zakt die netjes naar de onderkant. De kaartjes
  eindigen zo op dezelfde lijn, wat er ook in staat.
*/
.grm-home__raster .grm-bk{grid-template-rows:auto 1fr;height:100%}
.grm-home__raster .grm-bk__body{height:100%}
@media(max-width:1000px){.grm-home__raster{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}}
@media(max-width:560px){.grm-home__raster{gap:12px}}

.container:has(> .row > .grm-branche),
.container:has(> .grm-branche){padding-left:0;padding-right:0;max-width:none}
.grm-branche__body{max-width:var(--grm-w,1424px);margin-left:auto;margin-right:auto;padding-left:24px;padding-right:24px}
body.grm-chrome-active .container-wrap{padding-bottom:0}

.container:has(> .row > .grm-ob-topbar),
.container:has(> .row > .grm-onboard),
.container:has(> .grm-ob-topbar),
.container:has(> .grm-onboard){padding-left:0;padding-right:0}
.grm-ob-topbar{padding-left:22px;padding-right:22px}

/* Elke hero met een eigen achtergrond loopt van rand tot rand. De achtergrond
   stopte eerder bij de containerbreedte, waardoor er een strook paginakleur
   naast bleef staan; .grm-page__hero en .grm-help__hero waren zelfs afgeronde
   kaarten. De inhoud blijft binnen dezelfde gutter van 22px als de header. */
.grm-probleem__hero,
.grm-pagehero,
.grm-page__hero,
.grm-help__hero,
.grm-home__hero{
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  width:100vw;
  max-width:100vw;
  border-radius:0;
}
.grm-probleem__hero-in,
.grm-page__hero,
.grm-help__hero{padding-left:22px;padding-right:22px}

/* Een schermbrede hero hoort tegen de sitekop aan te sluiten. Er zat 26px
   tussen: 8px bovenpadding van .grm-page en 18px bovenmarge van de hero zelf,
   samen een strook paginakleur onder de kop. Allebei weg, maar de marge
   alleen als de hero werkelijk bovenaan staat; een hero verderop de pagina
   heeft zijn ruimte naar het blok ervoor wel nodig. */
.grm-page{padding-top:0}
.grm-page > .grm-page__hero:first-child,
.grm-page > .grm-help__hero:first-child{margin-top:0}

/* Deze regel moet minstens even zwaar wegen als
   `.grm-branche__hero.has-foto .grm-branche__hero-bg` in branche.css. Die zet
   `background` op alleen een verloop, en overschreef daarmee de gekozen foto:
   de variabele stond keurig op het element, maar de laag die hem tekende werd
   weggevaagd. Gelijke specificiteit, en polish.css laadt als laatste. */
.grm-branche__hero.has-eigenfoto .grm-branche__hero-bg{
  background:
    linear-gradient(180deg, var(--grm-fp-t1,rgba(4,30,66,.86)) 0%, var(--grm-fp-t3,rgba(4,30,66,.78)) 45%, var(--grm-fp-t2,rgba(16,58,99,.90)) 100%),
    var(--grm-fp-bg, none);
  background-size:auto,cover;
  background-position:center,center 42%;
  background-repeat:no-repeat;
  z-index:1;
}
.grm-branche__hero.has-eigenfoto .grm-branche__hero-in{position:relative;z-index:2}

.grm-shop__hero.has-foto .grm-shop__hero-bg{
  background:
    linear-gradient(180deg, var(--grm-fp-t1,rgba(4,30,66,.86)) 0%, var(--grm-fp-t3,rgba(4,30,66,.78)) 45%, var(--grm-fp-t2,rgba(16,58,99,.90)) 100%),
    var(--grm-fp-bg, none);
  background-size:auto,cover;
  background-position:center,center 42%;
  background-repeat:no-repeat;
}

/* Als element+klasse geschreven (0,1,1) zodat hij zwaarder weegt dan
   `.grm-pagehero` in pages.css. Welke van die twee stylesheets als laatste
   binnenkomt ligt niet vast, dat was eerder al de oorzaak van de kapotte
   feitkaartjes, en met deze schrijfwijze maakt de volgorde niet meer uit. */
section.grm-pagehero{
  position:relative;overflow:hidden;color:#fff;text-align:center;
  margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);width:100vw;max-width:100vw;
  padding:76px 22px 68px;
  background:linear-gradient(135deg,var(--grm-fp-b1,#041E42) 0%,var(--grm-fp-b2,#103A63) 60%,var(--grm-fp-b3,var(--grm-success,#103a63)) 100%);
}
.grm-pagehero__bg{
  position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(180deg, var(--grm-fp-t1,rgba(4,30,66,.86)) 0%, var(--grm-fp-t3,rgba(4,30,66,.78)) 45%, var(--grm-fp-t2,rgba(16,58,99,.90)) 100%),
    var(--grm-fp-bg, none);
  background-size:auto,cover;
  background-position:center,center 42%;
  background-repeat:no-repeat;
}
section.grm-pagehero > .grm-container{position:relative;z-index:2;max-width:880px}
section.grm-pagehero h1{color:#fff;max-width:820px;margin:0 auto var(--grm-s-3,12px)}
section.grm-pagehero .grm-pagehero__sub{color:rgba(255,255,255,.9);max-width:640px;margin:0 auto var(--grm-s-6,24px)}
.grm-pagehero__acc{color:var(--grm-accent-200,var(--grm-accent-200,#9CC4EE))}

.grm-pagehero__zoek{
  position:relative;z-index:2;
  display:flex;align-items:center;gap:8px;
  max-width:620px;margin:0 auto;
  background:#fff;border-radius:999px;padding:6px 6px 6px 16px;
  box-shadow:0 18px 44px -18px rgba(0,0,0,.55);
}
.grm-pagehero__zoek > .material-symbols-rounded{font-size:21px;color:var(--grm-brand,#103A63);flex:0 0 auto}
.grm-pagehero__zoek input{
  flex:1 1 auto;min-width:0;border:0;outline:0;background:none;
  font-family:inherit;font-size:15px;color:var(--grm-ink,#041E42);padding:10px 0;
}
.grm-pagehero__zoek button{
  flex:0 0 auto;border:0;cursor:pointer;border-radius:999px;
  background:var(--grm-brand,#103A63);color:#fff;
  font-family:inherit;font-size:14px;font-weight:700;padding:11px 20px;
  transition:background .14s;
}
.grm-pagehero__zoek button:hover{background:var(--grm-success-text,#0b2a49)}

@media(max-width:640px){
  .grm-pagehero{padding:52px 18px 48px}
  .grm-pagehero__zoek{padding:5px 5px 5px 13px}
  .grm-pagehero__zoek button{padding:10px 14px;font-size:13px}
}

@media(max-width:640px){
  .grm-pagehero__zoek{flex-wrap:wrap;border-radius:16px;padding:10px}
  .grm-pagehero__zoek button{flex:1 0 100%;justify-content:center}
}

.grm-bk{position:relative;display:flex;flex-direction:column;overflow:hidden;background:#fff;border:1px solid var(--grm-sky-50,#edf2f8);border-radius:20px;box-shadow:0 4px 14px -8px rgba(15,23,42,.10),0 1px 3px rgba(15,23,42,.04);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.grm-bk:hover{transform:translateY(-2px);border-color:var(--grm-brand-100,#d3e0ef);box-shadow:0 12px 28px -10px rgba(15,23,42,.14),0 2px 6px rgba(15,23,42,.05)}

.grm-bk__head{display:flex;align-items:center;gap:13px;text-align:left;padding:18px 20px 15px;background:linear-gradient(135deg,var(--grm-sky-50,#edf2f8) 0%,var(--grm-line-soft,#eaeff5) 100%);border-bottom:1px solid rgba(16,58,99,.10)}
.grm-bk__head-txt{flex:1 1 auto;min-width:0}
.grm-bk__head .grm-bk__beeld{flex:0 0 36%;max-width:128px;aspect-ratio:1/1;height:auto;width:auto;border-radius:50%;overflow:hidden;border:3px solid #fff;box-shadow:0 2px 10px rgba(15,23,42,.14);background:var(--grm-rij-zacht)}
.grm-bk__head .grm-bk__beeld img{width:100%;height:100%;object-fit:cover;display:block}
.grm-bk__head .grm-bk__kop{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin:0}
.grm-bk__head .grm-bk__naam{margin:0 0 2px;font-size:19px;font-weight:800;line-height:1.25;letter-spacing:-.2px;color:var(--grm-ink,#041e42);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.grm-bk__head .grm-bk__naam a{color:inherit;text-decoration:none}
.grm-bk__head .grm-bk__naam a:hover{color:#1668C7}
.grm-bk__head .grm-bk__plaats{margin:0;font-size:12.5px;font-weight:600;color:var(--grm-ink-500,#55636e);display:flex;align-items:center;gap:4px}
.grm-bk__head .grm-bk__plaats .material-symbols-rounded{font-size:15px}
.grm-bk__head-branche{display:inline-block;margin-top:6px;padding:3px 9px;border-radius:99px;background:rgba(16,58,99,.10);color:#103A63;font-size:11px;font-weight:800;letter-spacing:.1px}
/* Alleen het vinkje; de tekst verschijnt bij aanraken of aanklikken. Een
   button omdat tikken op een telefoon focus geeft, en focus is wat de tekst
   toont. */
.grm-bk__keur{position:relative;display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;padding:0;border:0;border-radius:50%;background:none;color:var(--grm-brand,#103A63);cursor:pointer;flex:0 0 auto}
.grm-bk__keur-txt{position:absolute;top:calc(100% + 6px);left:50%;transform:translateX(-50%);z-index:5;display:none;padding:4px 10px;border-radius:8px;background:var(--grm-ink,#041E42);color:#fff;font-size:12px;font-weight:600;white-space:nowrap;box-shadow:0 6px 18px rgba(4,30,66,.25)}
.grm-bk__keur:hover .grm-bk__keur-txt,.grm-bk__keur:focus .grm-bk__keur-txt{display:block}
.grm-bk__keur .material-symbols-rounded{font-size:18px}
/* De plaatsrij: plaats links, hartje rechts, op een regel. */
.grm-bk__plaatsrij{display:flex;align-items:center;gap:8px}
.grm-bk__plaatsrij .grm-bk__plaats{flex:1 1 auto;min-width:0;margin:0}
.grm-bk__plaatsrij .grm-bk__fav{margin-left:auto;width:34px;height:34px;flex:0 0 auto}

.grm-bk__body{display:flex;flex-direction:column;gap:11px;padding:16px 20px 18px;flex:1 1 auto}
.grm-bk__acties{margin-top:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap}

/* Rasterweergave: profielfoto naast de naam in een gekleurde kopband, de
   details daaronder. Een ander model dan de lijstweergave, die de foto juist
   links over de volle hoogte zet. */
.grm-bk-raster .grm-bk__head,
.grm-home__raster .grm-bk__head{
  display:flex;flex-direction:row;align-items:center;gap:11px;
  padding:15px 16px 13px;text-align:left;
  background:linear-gradient(135deg,var(--grm-sky-50,#edf2f8) 0%,var(--grm-line-soft,#eaeff5) 100%);
  border-bottom:1px solid rgba(16,58,99,.10);
}
.grm-bk-raster .grm-bk__head .grm-bk__beeld,
.grm-home__raster .grm-bk__head .grm-bk__beeld{
  flex:0 0 auto;width:60px;height:60px;max-width:60px;
  aspect-ratio:1/1;border-radius:50%;overflow:hidden;
  border:3px solid #fff;box-shadow:0 2px 10px rgba(15,23,42,.14);
}
.grm-bk-raster .grm-bk__head-txt,
.grm-home__raster .grm-bk__head-txt{flex:1 1 auto;min-width:0;padding:0}
.grm-bk-raster .grm-bk__naam,
.grm-home__raster .grm-bk__naam{
  font-size:15.5px;white-space:normal;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.grm-bk-raster .grm-bk__body,
.grm-home__raster .grm-bk__body{padding:13px 16px 15px;gap:9px}
.grm-bk-raster .grm-bk__tekst,
.grm-bk-raster .grm-bk__producten,
.grm-home__raster .grm-bk__tekst,
.grm-home__raster .grm-bk__producten{display:none}

.grm-bk--smal .grm-bk__head{padding:13px 14px 11px}
.grm-bk--smal .grm-bk__head .grm-bk__beeld{max-width:72px}
.grm-bk--smal .grm-bk__head .grm-bk__naam{font-size:16px}
.grm-bk--smal .grm-bk__body{padding:11px 14px 13px}

@media(max-width:560px){
  .grm-bk__head{padding:14px 15px 12px;gap:11px}
  .grm-bk__head .grm-bk__beeld{max-width:84px}
  .grm-bk__head .grm-bk__naam{font-size:17px}
  .grm-bk__body{padding:13px 15px 15px}
}

@media(max-width:680px){
  .grm-carrousel__spoor:has(> .grm-bk) .grm-bk__head{flex-direction:column;align-items:stretch;gap:0;padding:0;background:none;border-bottom:0}
  .grm-carrousel__spoor:has(> .grm-bk) .grm-bk__head .grm-bk__beeld{flex:0 0 auto;max-width:none;width:100%;height:92px;aspect-ratio:auto;border-radius:0;border:0;box-shadow:none}
  .grm-carrousel__spoor:has(> .grm-bk) .grm-bk__head-txt{padding:9px 10px 0}
  .grm-carrousel__spoor:has(> .grm-bk) .grm-bk__head-branche{display:none}
}

.grm-merknaam{display:inline;white-space:nowrap;letter-spacing:inherit}
.grm-merknaam b{font-weight:inherit}

/* Lijstweergave terug naar de oude opzet: foto links, gegevens rechts, over de
   volle breedte. De kop en de body zijn twee losse blokken in de opmaak, dus
   `display:contents` op de kop laat de foto en de tekst rechtstreeks in het
   raster van de kaart vallen. Zonder dat kon de foto nooit naast de body staan.
   De rasterweergave blijft zoals hij is. */
/* De kolom was 210 breed terwijl een kaart ruim 300 hoog is. Een vierkant van
   210 laat dan honderd pixels over en oogt als een foto die half in de kaart
   hangt. Op 300 sluit het vierkant vrijwel aan op de kaarthoogte: gemeten over
   de tien kaarten van de bedrijvenlijst blijft er acht tot zeventien pixels
   over, en dat is het zachte vlak van het beeldvak zelf. */
.grm-bk-lijst .grm-bk{display:grid;grid-template-columns:300px minmax(0,1fr);align-items:stretch}
.grm-bk-lijst .grm-bk__head{display:contents}
/* Het beeld liep over allebei de rasterrijen met height:100%, dus het rekte
   mee met de hoogte van de tekst ernaast: een staande balk van 210 bij 308.
   Daarna stond de foto wel vierkant, maar bovenin de kolom met een lege strook
   van bijna honderd pixels eronder, en dan hangt hij half in de kaart.

   Nu allebei opgelost door het onderscheid te leggen waar het hoort: het vak
   vult de hele kolom en draagt het zachte vlak, de foto erin is het vierkant.
   Geen lege witte strook meer, en de foto wordt nooit uitgerekt. */
.grm-bk-lijst .grm-bk__beeld{
  grid-column:1;grid-row:1 / span 2;
  width:100%;height:100%;max-width:none;flex:none;align-self:stretch;
  aspect-ratio:auto;border-radius:0;border:0;box-shadow:none;
  display:block;overflow:hidden;
}
/* De foto is het vierkant; wat eronder overblijft is het zachte vlak van het
   vak zelf, dezelfde kleur, dus er valt geen witte strook. */
/* De foto vult het hele beeldvak. Met de vierkante verhouding vulde hij
   maar een deel van de kolom en sneed hij breed beeld hard bij; de rest van
   het vak bleef leeg staan. Cover over het volledige vak: vult altijd, rekt
   nooit uit. */
.grm-bk-lijst .grm-bk__beeld img{
  width:100%;height:100%;aspect-ratio:auto;object-fit:cover;display:block;
}
/* De letter is geen foto maar een vulling. Die vierkant maken levert juist wel
   een naad op, want hij draagt een eigen verloop dat donkerder is dan het vak
   eronder. Hij vult daarom de hele kolom. */
.grm-bk-lijst .grm-bk__beeld .grm-bk__initiaal{
  width:100%;height:100%;aspect-ratio:auto;display:flex;
}
/* De tekst stond met twintig pixels tegen de foto aan. Bij een lijst waar het
   oog van de foto naar de naam springt is dat te krap. */
.grm-bk-lijst .grm-bk__head-txt{grid-column:2;grid-row:1;padding:16px 20px 0 28px;min-width:0}
.grm-bk-lijst .grm-bk__body{grid-column:2;grid-row:2;padding:10px 20px 18px 28px}
.grm-bk-lijst .grm-bk__naam{white-space:normal}

@media(max-width:720px){
  .grm-bk-lijst .grm-bk{grid-template-columns:132px minmax(0,1fr)}
  .grm-bk-lijst .grm-bk__head-txt{padding:13px 15px 0}
  .grm-bk-lijst .grm-bk__body{padding:9px 15px 15px}
}
@media(max-width:560px){
  .grm-bk-lijst .grm-bk{grid-template-columns:1fr}
  .grm-bk-lijst .grm-bk__beeld{grid-column:1;grid-row:1;aspect-ratio:16/10;height:auto}
  /* Op een telefoon staat het beeld boven de tekst en is het vak zelf 16/10.
     Het vierkant van de laptop hoort daar niet: dat zou hoger zijn dan het vak
     en door de overflow half worden afgeknipt. */
  .grm-bk-lijst .grm-bk__beeld img{aspect-ratio:auto;height:100%}
  .grm-bk-lijst .grm-bk__head-txt{grid-column:1;grid-row:2}
  .grm-bk-lijst .grm-bk__body{grid-column:1;grid-row:3}
}

/* De kop draagt nu nog twee regels: naam en plaats. Daar hoort een foto bij die
   ongeveer even hoog is als die twee regels samen, anders zweeft er een klein
   rondje naast een blok tekst. Vandaar 62px en een gelijke padding rondom. */
.grm-bk-raster .grm-bk__head,
.grm-home__raster .grm-bk__head{padding:16px;gap:13px;align-items:center}
.grm-bk-raster .grm-bk__head .grm-bk__beeld,
.grm-home__raster .grm-bk__head .grm-bk__beeld{width:72px;height:72px;max-width:72px}
.grm-bk-raster .grm-bk__naam,
.grm-home__raster .grm-bk__naam{font-size:17px;line-height:1.3;margin:0 0 3px}
.grm-bk-raster .grm-bk__kop,
.grm-home__raster .grm-bk__kop{gap:6px}
.grm-bk-raster .grm-bk__plaats,
.grm-home__raster .grm-bk__plaats{font-size:13px}

.grm-bk__head-branche{align-self:flex-start;margin:0}
.grm-bk-lijst .grm-bk__head-branche{margin-bottom:2px}

/* De knop blijft op de eerste regel staan, ook als de balk openklapt. Zou hij
   naar de onderste regel springen, dan verschuift hij onder je muis weg op het
   moment dat je hem net hebt aangeklikt. */
@media(max-width:900px){.grm-h__bar-meer{height:40px}}

body.grm-mandpagina .grm-f{display:none}
@media(max-width:900px){
  body.grm-mandpagina .grm-h__zoek{display:none}
  body.grm-lijstpagina .grm-h__zoek{display:none}
}

/* 1. Op mobiel stond hier 24px zijpadding terwijl de rest van de pagina er 14
   heeft; de listing sprong daardoor smaller in dan alles eromheen. */
@media(max-width:640px){
  .grm-branche__body{padding:0 14px;margin-top:20px}
}

/* 2. De categorietegels als horizontale veeg op mobiel. Een raster van vijf
   kaartjes onder elkaar duwt de listing ver naar beneden; zo blijft het één
   rij die je opzij schuift. */
@media(max-width:640px){
  .grm-cattegels__rij{
    display:flex;flex-wrap:nowrap;gap:9px;
    overflow-x:auto;scroll-snap-type:x proximity;
    padding:2px 14px 8px;margin:0 -14px;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
  }
  .grm-cattegels__rij::-webkit-scrollbar{display:none}
  .grm-cattegels__rij > .grm-cattegel{flex:0 0 112px;scroll-snap-align:start}
}

/* 6. De suggestielijst kreeg de breedte van zijn invoerveld, en in een smalle
   flexkolom werd dat een strookje waarin niets meer leesbaar was. Nu een eigen
   ondergrens, en hij mag naar links uitlopen als hij anders het scherm uit valt.
   De hero's knipten hem bovendien af: `overflow:hidden` klipt ongeacht z-index,
   dus die staat daar niet meer. De achtergrondlagen zitten op `inset:0` en
   kunnen dus toch niet buiten hun sectie komen. */
.grm-plaatszoek__lijst{
  min-width:min(340px,90vw);
  max-width:min(460px,92vw);
  width:max-content;
  right:auto;
  z-index:99999;
}
@media(max-width:640px){
  .grm-plaatszoek__lijst{min-width:min(300px,88vw);left:0}
}
section.grm-pagehero,
.grm-home__hero{overflow:visible}
.grm-pagehero__bg{border-radius:inherit}

/* 7. De pil had een volledig ronde rand terwijl de knop erin vierkanter is; die
   stak daardoor aan de rechterkant uit de vorm. */
.grm-pagehero__zoek{border-radius:14px;padding:7px 7px 7px 16px}
.grm-pagehero__zoek button{border-radius:9px}
@media(max-width:640px){
  .grm-pagehero__zoek{border-radius:14px}
}

/* De zoekbalk in de homepage-hero had zelf overflow:hidden; elke suggestielijst
   die eruit steekt werd daar afgeknipt, ongeacht z-index. */
.grm-zoekbalk{overflow:visible}
.grm-zoekbalk > .grm-zoekbalk__veld:first-child input{border-radius:12px 0 0 12px}
.grm-shop__hero{overflow:visible}
.grm-shop__hero .grm-shop__hero-bg{border-radius:0}

/* Suggestielijsten: z-index alleen wint binnen dezelfde stapelcontext. De rows
   ONDER de hero zaten in een latere context en schoven er dus overheen, hoe
   hoog de lijst zelf ook stond. De hero's krijgen daarom zelf een laag boven de
   gewone rows (de header staat op 1000, daar blijven we onder), en het veld dat
   de focus heeft tilt zijn eigen tak nog eens op. */
.grm-shop__hero,
.grm-home__hero,
section.grm-pagehero,
.grm-branche__hero{z-index:40}
.grm-branche__hero{overflow:visible}
.grm-shop__zoek,
.grm-pagehero__zoek,
.grm-zoekbalk{position:relative}
.grm-shop__zoek:focus-within,
.grm-pagehero__zoek:focus-within,
.grm-zoekbalk:focus-within,
.grm-plaatszoek:focus-within{z-index:900}

/* Het tekstveld neemt alle ruimte die de knop overlaat. Hier stond een verdeling
   van tweederde om een derde, voor de tijd dat er een plaatsveld naast stond. */
.grm-shop__zoek input[name="q"],
.grm-shop__zoek input[type="search"]{flex:1 1 auto;min-width:0}
.grm-pagehero__zoek input[name="q"]{flex:1 1 auto;min-width:0}
.grm-zoekbalk__veld--wat{flex:1 1 auto;min-width:0}

@media (max-width:760px){
  .grm-zoekbalk__veld--wat{flex:1 1 100%}
  .grm-zoekbalk__knop{flex:1 1 100%}
  /* Het vergrootglas staat hier als los kind naast het veld en niet erin.
     Zodra het veld de volle breedte pakt blijft dat icoontje alleen op een
     eigen regel achter. Het is decoratief en aria-hidden, dus weg ermee.
     Voor .grm-shop__zoek is dat verderop in dit bestand al geregeld. */
  .grm-pagehero__zoek > .material-symbols-rounded{display:none}
}

/* De hero-zoekbalk op branche- en categoriepagina's staat los onder de stats. */
.grm-branche__hero .grm-shop__zoek{margin-top:18px;max-width:720px}
@media(max-width:640px){
  .grm-branche__hero .grm-shop__zoek{flex-wrap:wrap;border-radius:14px;padding:8px}
  .grm-branche__hero .grm-shop__zoek input[name="q"],
  .grm-branche__hero .grm-shop__zoek .grm-shop__zoek-knop{flex:1 0 100%}
}

.grm-shop__zoek,.grm-pagehero__zoek,.grm-zoekbalk__veld{position:relative}

/* Chrome tekent een pijltje in elk veld met een list-attribuut, alsof er een
   keuzelijst achter zit die je kunt uitklappen. Dit is een zoekveld: je typt en
   de suggesties komen vanzelf. Dat pijltje beloofde dus een lijst die nooit
   opengaat. De suggesties zelf blijven; alleen het icoon gaat weg. */
.grm-shop__zoek input[list]::-webkit-calendar-picker-indicator{display:none}

.grm-filterchips{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 14px}
.grm-filterchips__chip{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border:1px solid var(--grm-line,#D7DEE7);border-radius:999px;background:#fff;color:var(--grm-ink,#041E42);font-size:13px;font-weight:600;cursor:pointer;transition:border-color .12s,color .12s}
.grm-filterchips__chip:hover{border-color:var(--grm-danger,#dc2626);color:var(--grm-danger,#dc2626)}
.grm-filterchips__chip .material-symbols-rounded{font-size:15px}
.grm-filterchips__wis{border:0;background:none;color:var(--grm-accent,#1668C7);font-size:13px;font-weight:700;cursor:pointer;text-decoration:underline}
/* De chips van de zijbalkfilters gaan op een smal scherm weg: daar is de teller
   op de filterknop het signaal. De chips die uit de URL komen, de zoekterm en de
   plaats, blijven juist staan. Wie op een telefoon zoekt heeft geen zijbalk in
   beeld en zou anders nergens zien waarop hij zoekt. */
/* Stond hier op display:none. Zie grootmarkt-listing.css: het blok staat nu
   ook op een telefoon in beeld, alleen op een andere plek in het rooster. */
.grm-filterchips--url{display:flex}
@media(max-width:980px){.grm-filterchips--url{display:flex}}
.grm-filterchips--url .grm-filterchips__chip{text-decoration:none}
.grm-filterchips--url .grm-filterchips__wis{text-decoration:underline}

/* De hero sluit op deze pagina's direct op de tegelrij aan, dus de donkere
   onderrand mag korter: 34px dark plus de ruimte eronder las als een naad die
   niet uitkomt. */
.grm-branche .grm-shop__hero{padding-bottom:24px}
.grm-groep__tegels{position:relative}
.grm-groep__tegels h2{padding-right:96px}
.grm-groep__raster{display:flex;overflow-x:auto;gap:14px;padding:2px 2px 10px;scroll-snap-type:x proximity;scrollbar-width:thin}
.grm-groep__raster > *{flex:0 0 168px;scroll-snap-align:start}
@media(max-width:640px){.grm-groep__raster > *{flex-basis:132px}}
.grm-rijnav{position:absolute;top:-4px;right:0;display:flex;gap:8px}
.grm-rijnav__knop{width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--grm-line,#D7DEE7);border-radius:10px;background:#fff;color:var(--grm-ink,#041E42);cursor:pointer;transition:border-color .12s,box-shadow .12s}
.grm-rijnav__knop:hover:not(:disabled){border-color:var(--grm-accent,#1668C7);box-shadow:0 2px 8px rgba(4,30,66,.10)}
.grm-rijnav__knop:disabled{opacity:.35;cursor:default}
.grm-rijnav__knop .material-symbols-rounded{font-size:20px}
@media(max-width:640px){.grm-rijnav{display:none}}

/* De donkere band "Recent geverifieerde groothandels" is opgegaan in de
   kaartsectie .grm-samen: twee secties met dezelfde boodschap is er een te
   veel. De rasterklasse .grm-home__raster leeft daar verder. */

/* De ruimte boven de tegelrij zat als MARGE op de sectie zelf: die valt
   buiten het blok en leest daardoor als een los zwevend gat tussen de donkere
   hero en de rij. Nu padding binnen de sectie, zodat het blok tegen de hero
   aansluit en de ruimte bij de rij hoort in plaats van ertussen te hangen. */
.grm-groep__tegels{max-width:var(--grm-w,1424px);margin:0 auto;padding:24px 20px 26px}

@media(max-width:900px){
  .grm-shop{padding-left:14px;padding-right:14px}

  /* De rand-tot-randregels voor de lijst staan in grootmarkt-listing.css.
     Ze stonden hier, maar dat bestand laadt later en zet .grm-listing op
     margin:0 auto; bij gelijke gewichten wint de laatste, dus deze regels
     deden niets. Bij hetzelfde blok gezet waar die marge vandaan komt. */

  .grm-groep__tegels{padding:18px 14px 20px}
}

@media(max-width:760px){
  .grm-shop__zoek{flex-wrap:wrap;gap:8px;padding:10px;max-width:none}
  .grm-shop__zoek>.material-symbols-rounded{display:none}
  .grm-shop__zoek input[name="q"]{flex:1 1 100%;width:100%;padding:11px 12px;border:1px solid var(--grm-line,#D7DEE7);border-radius:10px}
  .grm-shop__zoek-knop{flex:1 1 100%;width:100%;padding:13px;border-radius:10px}
}

.grm-help__telling{margin:10px 0 0;font-size:14px;font-weight:600;color:rgba(255,255,255,.92)}

.grm-filters__actief{margin:12px 16px 4px;padding:10px 12px;border:1px solid var(--grm-line,#D7DEE7);border-radius:10px;background:var(--grm-canvas,#f5f7fa)}
.grm-filters__actief-kop{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:13px;font-weight:700;color:#33424F}
.grm-filters__actief-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.grm-filters__actief-chips .grm-filterchips__chip{padding:5px 10px;font-size:12.5px}

.grm-help{padding-top:0}
.grm-help__hero{width:100vw;max-width:100vw;margin:0 calc(50% - 50vw) 36px;border-radius:0;box-shadow:none;padding-top:56px}

.grm-sitemap__intro{max-width:820px;margin:0 auto 34px;padding:0 4px}
.grm-sitemap__intro h2{margin:26px 0 10px;font-size:22px}
.grm-sitemap__intro h3{margin:22px 0 8px;font-size:18px}
.grm-sitemap__intro p{margin:0 0 12px;line-height:1.65;color:var(--grm-ink-700,#33424F)}

@media(max-width:760px){
  .grm-swipe{
    display:flex !important;
    grid-template-columns:none !important;
    overflow-x:auto;
    gap:12px;
    padding:2px 2px 10px;
    /*
      Vergrendelen en niet benaderen. Met proximity besliste de browser zelf of
      een kaartje het waard was om op te vallen, en bij een vlugge veeg deed hij
      dat niet: je bleef achter met twee halve kaartjes en geen van beide goed
      te lezen. Met mandatory komt de rij altijd op een kaartrand tot stilstand.
      Dat kan alleen omdat een kaartje hier nooit breder is dan de rij; anders
      zou de browser er niet meer voorbij kunnen scrollen.
    */
    scroll-snap-type:x mandatory;
    overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:thin;
  }
  .grm-swipe > *{
    flex:0 0 78%;
    max-width:340px;
    min-width:0;
    scroll-snap-align:start;
    /*
      In een schuifrij is de rij een flexbox zonder eigen hoogte. Een kaartje
      met height:100% rekent dan tegen "auto" aan en houdt gewoon zijn eigen
      hoogte, dus stond elk profiel op een andere maat. Met auto plus stretch
      trekt de flexbox ze alle drie op de hoogte van de langste.
    */
    height:auto;
    align-self:stretch;
  }
  .grm-swipe.grm-shopgrid__grid > *,
  .grm-swipe.grm-cattegels__rij > *,
  .grm-swipe.grm-home__cat-grid > *{flex-basis:52%}
  .grm-swipe.grm-home__mozaiek > *{flex-basis:86%}

  /* Het omhulsel dat het script om elke swiperij zet. De pijlen hangen hieraan
     en niet meer aan de omliggende sectie, zodat ze bij hun eigen rij blijven
     staan in plaats van bovenaan het blok te verschijnen. De ruimte erboven is
     voor de pijlen zelf: die staan buiten de rij en zouden er anders overheen
     vallen of achter de kop verdwijnen. */
  .grm-swipehoes.heeft-nav{padding-top:52px}
}
@media(min-width:761px){
  /*
    De pijlen horen bij het schuiven en dus bij de telefoon. De categoriekiezer
    ernaast hoort overal, want die filtert de rij en dat is op een laptop net zo
    nuttig. Daarom verdwijnen alleen de knoppen en blijft de balk staan.
  */
  .grm-rijnav--swipe .grm-rijnav__knoppen{display:none}
}

/*
  De balk boven een schuifrij: links de categoriekiezer, rechts de pijlen.
  De hoes staat altijd relatief en maakt ruimte zodra er een balk in hangt;
  dat hangt aan het BESTAAN van de balk en niet aan het schuiven, want de
  kiezer staat er ook op een breed scherm waar niets schuift.
*/
.grm-swipehoes{position:relative}
.grm-swipehoes.heeft-balk{padding-top:52px}
/*
  De naam van het kaartje dat in beeld staat, links van de pijlen. Hij mag de
  balk niet uit elkaar duwen: bij een lange naam knipt hij af in plaats van de
  pijlen van het scherm te drukken. Vandaar min-width:0, want een flexitem
  krimpt zonder dat niet onder zijn inhoud.
*/
.grm-rijnav__titel{
  flex:1 1 auto;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-family:var(--grm-font-display,"Inter Tight",sans-serif);
  font-size:17px;font-weight:800;letter-spacing:-.01em;
  color:var(--grm-ink,#041E42);
}
.grm-rijnav__titel[hidden]{display:none}
.grm-rijfilter + .grm-rijnav__titel{padding-left:10px}
.grm-rijnav__knoppen{display:flex;gap:8px;margin-left:auto;flex:0 0 auto}
.grm-rijnav--swipe{
  position:absolute;top:2px;left:0;right:0;z-index:2;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
}
.grm-rijnav--swipe[hidden]{display:none}

/*
  De kiezer zelf. Geen kale systeem-select maar een pil in de huisstijl, met
  het eigen pijltje van de browser weg en een eigen chevron ernaast, zodat hij
  op alle browsers hetzelfde staat.
*/
.grm-rijfilter{position:relative;display:inline-flex;align-items:center;flex:0 1 auto;min-width:0;max-width:48%}
.grm-rijfilter select{
  appearance:none;-webkit-appearance:none;
  padding:9px 34px 9px 14px;
  border:1px solid var(--grm-line,#D7DEE7);
  border-radius:99px;
  background:var(--grm-paper,#fff);
  color:var(--grm-brand,#103A63);
  font-family:inherit;font-size:14px;font-weight:700;line-height:1.2;
  cursor:pointer;
  max-width:min(62vw,300px);
  text-overflow:ellipsis;
  transition:border-color .14s,background .14s;
}
.grm-rijfilter select:hover{border-color:var(--grm-accent,#1668C7)}
.grm-rijfilter select:focus-visible{outline:2px solid var(--grm-accent,#1668C7);outline-offset:2px}
.grm-rijfilter option:disabled{color:var(--grm-ink-400,#7A8794)}
.grm-rijfilter .material-symbols-rounded{
  position:absolute;right:11px;pointer-events:none;
  font-size:19px;color:var(--grm-ink-500,#55636E);
}
.grm-rijfilter__leeg{
  margin:8px 2px 0;padding:14px 16px;border-radius:12px;
  background:var(--grm-bg,#F5F7FA);border:1px solid var(--grm-line,#D7DEE7);
  color:var(--grm-ink-500,#55636E);font-size:14px;line-height:1.55;
}

/*
  De carrousel rechts in de hero.

  Subtiel, want de hero moet nog steeds over de kop en de zoekbalk gaan. Geen
  volle productkaarten dus, maar smalle tegels met een doorschijnend vlak: ze
  laten zien wat er ligt zonder de aandacht van de zoekbalk weg te trekken.

  Hij schuift vanzelf, langzaam, en staat stil zodra je hem aanraakt of er met
  de muis overheen gaat. Wie zelf sleept neemt het over; de rij loopt daarna
  gewoon door waar hij stond.
*/
.grm-shop__hero-in.heeft-carrousel{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:34px;align-items:center}
.grm-shop__hero-tekst{min-width:0}

.grm-shop__carrousel{min-width:0;display:flex;flex-direction:column;gap:10px}
.grm-shop__carrousel-kop{font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.09em;color:rgba(255,255,255,.72)}
.grm-shop__carrousel-spoor{display:flex;gap:10px;overflow-x:auto;scroll-behavior:smooth;padding:2px 2px 8px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.grm-shop__carrousel-spoor::-webkit-scrollbar{display:none}

.grm-shop__pk{flex:0 0 auto;width:150px;display:flex;flex-direction:column;gap:8px;padding:10px;border-radius:14px;border:1px solid rgba(255,255,255,.24);background:rgba(255,255,255,.12);text-decoration:none;transition:background .18s ease,border-color .18s ease,transform .18s ease}
.grm-shop__pk:hover{background:#fff;border-color:#fff;transform:translateY(-2px);text-decoration:none}
.grm-shop__pk-beeld{display:block;border-radius:10px;overflow:hidden;background:rgba(255,255,255,.9);aspect-ratio:1/1}
.grm-shop__pk-beeld img{display:block;width:100%;height:100%;object-fit:cover}
.grm-shop__pk-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.grm-shop__pk-naam{font-size:12.5px;font-weight:700;line-height:1.3;color:#fff;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.grm-shop__pk-sub{font-size:11px;font-weight:600;color:rgba(255,255,255,.7);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.grm-shop__pk:hover .grm-shop__pk-naam{color:var(--grm-ink,#041E42)}
.grm-shop__pk:hover .grm-shop__pk-sub{color:var(--grm-ink-500,#55636E)}

@media(max-width:900px){
  .grm-shop__hero-in.heeft-carrousel{grid-template-columns:minmax(0,1fr);gap:22px}
  .grm-shop__pk{width:132px}
}

/*
  Het bedrijfsprofiel krijgt zijn eigen kop.

  De voettekst gaat hier helemaal weg: op een profiel hoort de aandacht bij de
  leverancier en zijn aanvraagknop te blijven, en de linkblokken onderin sturen
  de bezoeker juist weg naar branches en regio's. De eerdere regels verborgen
  al een deel; wat overbleef was een halve voettekst, en dat leest als iets dat
  stuk is.

  De zoekbalk in de kop blijft alleen op een telefoon staan. Daar is hij de
  enige manier om verder te zoeken; op een breed scherm neemt hij de plek in
  van de terugknop en concurreert hij met de zoekbalk op de pagina zelf.
*/
body.grm-profielpagina .grm-f{display:none}
@media(min-width:761px){
  body.grm-profielpagina .grm-h__zoek{display:none}
}

.grm-h__terug{
  display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;
  margin-right:4px;padding:8px 12px 8px 9px;border-radius:10px;
  border:1px solid var(--grm-line,#D7DEE7);background:#fff;
  font-size:14px;font-weight:700;color:var(--grm-ink-700,#33424F);
  text-decoration:none;white-space:nowrap;
  transition:background .16s ease,color .16s ease,border-color .16s ease;
}
.grm-h__terug:hover{background:var(--grm-brand-50,#EDF2F8);border-color:var(--grm-brand-100,#D3E0EF);color:var(--grm-brand,#103A63);text-decoration:none}
.grm-h__terug .material-symbols-rounded{font-size:20px}
@media(max-width:600px){
  .grm-h__terug{padding:8px;border-radius:50%}
  .grm-h__terug-txt{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}

/* Beeldregels die van iedereen moeten winnen. Dit bestand laadt als laatste
   van de sitebladen, en eerdere regels hierboven zetten cover op dezelfde
   afbeeldingen; een regel in bedrijfskaart.css verliest dat gevecht op
   laadvolgorde. Vandaar hier nogmaals, als de winnende versie.

   De regel zelf: een logo wordt nooit opgerekt of afgesneden (contain, op
   wit); een bedrijfsfoto mag bijsnijden maar vervormt niet. In het raster
   toont de kaart het logo, in de lijstweergave wint de bedrijfsfoto als die
   er is. */
.grm-bk__beeld{background:#fff}
.grm-bk__beeld img.grm-bk__img-logo{object-fit:contain;background:#fff;padding:6px;box-sizing:border-box}
.grm-bk__beeld img.grm-bk__img-foto{display:block;object-fit:cover;width:100%;height:100%;padding:0}

/* Welk beeld er staat, per weergave. Dezelfde regels als in
   grootmarkt-bedrijfskaart.css, hier als winnende versie vanwege de
   laadvolgorde.

   De weergavewissel verandert alleen de klasse van de LIJST en niet die van de
   kaartjes, dus dezelfde kaart dient allebei de weergaven. Ze draagt daarom
   allebei de beelden mee en data-beeld zegt wat er beschikbaar is: beide, logo,
   foto of geen. In de lijstweergave is het vak groot en staat er een
   bedrijfsfoto of een productfoto, nooit de profielfoto; in de rasterweergave
   is het een rondje van tweeenzeventig pixels naast de naam en staat de
   profielfoto er juist wel. */
.grm-bk__beeld[data-beeld="beide"] .grm-bk__img-logo{display:none}
.grm-bk__beeld[data-beeld="beide"] .grm-bk__initiaal{display:none}
.grm-bk__beeld[data-beeld="foto"] .grm-bk__initiaal{display:none}
.grm-bk__beeld[data-beeld="logo"] .grm-bk__img-logo{display:none}
.grm-bk-raster .grm-bk__beeld[data-beeld="beide"] .grm-bk__img-logo,
.grm-home__raster .grm-bk__beeld[data-beeld="beide"] .grm-bk__img-logo,
.grm-bk--raster .grm-bk__beeld[data-beeld="beide"] .grm-bk__img-logo,
.grm-bk--smal .grm-bk__beeld[data-beeld="beide"] .grm-bk__img-logo{display:block}
.grm-bk-raster .grm-bk__beeld[data-beeld="beide"] .grm-bk__img-foto,
.grm-home__raster .grm-bk__beeld[data-beeld="beide"] .grm-bk__img-foto,
.grm-bk--raster .grm-bk__beeld[data-beeld="beide"] .grm-bk__img-foto,
.grm-bk--smal .grm-bk__beeld[data-beeld="beide"] .grm-bk__img-foto{display:none}
.grm-bk-raster .grm-bk__beeld[data-beeld="logo"] .grm-bk__img-logo,
.grm-home__raster .grm-bk__beeld[data-beeld="logo"] .grm-bk__img-logo,
.grm-bk--raster .grm-bk__beeld[data-beeld="logo"] .grm-bk__img-logo,
.grm-bk--smal .grm-bk__beeld[data-beeld="logo"] .grm-bk__img-logo{display:block}
.grm-bk-raster .grm-bk__beeld[data-beeld="logo"] .grm-bk__initiaal,
.grm-home__raster .grm-bk__beeld[data-beeld="logo"] .grm-bk__initiaal,
.grm-bk--raster .grm-bk__beeld[data-beeld="logo"] .grm-bk__initiaal,
.grm-bk--smal .grm-bk__beeld[data-beeld="logo"] .grm-bk__initiaal{display:none}

/* ── De bedrijfskaart op maat van de kaart zelf ──────────────────────────────
   In de lijstweergave is een kaart ruim negenhonderd pixels breed. Een naam van
   negentien pixels en een knop van veertien verdrinken daarin: er is geen kop
   die de rij aanvoert en geen actie die opvalt. Op een kaartje van driehonderd
   pixels klopt diezelfde maat wel, dus de maat hoort bij de weergave en niet
   bij het element. */
.grm-bk-lijst .grm-bk__naam{font-size:26px;line-height:1.2;letter-spacing:-.015em;margin:0 0 6px}
.grm-bk-lijst .grm-bk__plaats{font-size:14px}
.grm-bk-lijst .grm-bk__plaats .material-symbols-rounded{font-size:18px}
.grm-bk-lijst .grm-bk__tekst{font-size:15px;line-height:1.62}
.grm-bk-lijst .grm-bk__keur .material-symbols-rounded{font-size:21px}
.grm-bk-lijst .grm-bk__keur{width:26px;height:26px}
/* Het hartje ligt in de lijstweergave rechtsboven op de foto. Het stond naast
   de plaatsnaam, midden in de tekstkolom, en las daar als een derde regel
   tekst in plaats van als een knop. Op de foto is het meteen te vinden en kost
   het geen regel.

   Het blijft in de opmaak staan waar het stond en wordt hier alleen verplaatst.
   Het beeldvak is namelijk zelf een link, en een knop in een link is geen
   geldige opmaak. De kaart is het referentiepunt (die staat al op relative), en
   de rechterkant volgt uit de fotokolom: driehonderd pixels breed, twaalf
   pixels marge, dus right:calc(100% - 288px). Die maat staat hieronder in
   dezelfde media-query als de kolombreedte zelf, zodat ze niet uit elkaar
   kunnen lopen. */
.grm-bk-lijst .grm-bk__plaatsrij .grm-bk__fav{
  position:absolute;top:12px;left:auto;right:calc(100% - 288px);z-index:2;
  width:40px;height:40px;margin:0;
  background:rgba(255,255,255,.94);
  border-color:rgba(255,255,255,.85);
  box-shadow:0 2px 8px rgba(4,30,66,.22);
}
.grm-bk-lijst .grm-bk__plaatsrij .grm-bk__fav .material-symbols-rounded{font-size:22px}
@media(max-width:720px){
  /* De fotokolom is hier 132 breed. */
  .grm-bk-lijst .grm-bk__plaatsrij .grm-bk__fav{top:9px;right:calc(100% - 123px);width:34px;height:34px}
  .grm-bk-lijst .grm-bk__plaatsrij .grm-bk__fav .material-symbols-rounded{font-size:19px}
}
@media(max-width:560px){
  /* De foto staat dan boven de tekst en vult de kaart, dus rechtsboven op de
     foto is gewoon rechtsboven in de kaart. */
  .grm-bk-lijst .grm-bk__plaatsrij .grm-bk__fav{top:12px;right:12px;width:38px;height:38px}
}

/* De knop is de reden dat de kaart er staat. Hij hoort dus ook de zwaarste
   vorm te hebben: hoger, breder en met een pijl die zegt waar hij heen gaat. */
.grm-bk-lijst .grm-bk__acties .gm-btn{
  height:50px;padding:0 26px;font-size:15.5px;font-weight:800;border-radius:12px;
}
.grm-bk-lijst .grm-bk__acties{gap:12px;padding-top:14px}

/* Het rasterkaartje: dezelfde gedachte, een maat kleiner. De knop vult de
   breedte, want naast hem staat toch niets meer. */
.grm-bk-raster .grm-bk__naam,
.grm-home__raster .grm-bk__naam{font-size:20px;line-height:1.25;margin:0 0 4px}
.grm-bk-raster .grm-bk__plaats{font-size:13.5px}
.grm-bk-raster .grm-bk__acties{padding-top:12px}
.grm-bk-raster .grm-bk__acties .gm-btn{
  flex:1 1 auto;height:46px;font-size:15px;font-weight:800;border-radius:11px;
}

@media(max-width:900px){
  .grm-bk-lijst .grm-bk__naam{font-size:22px}
  .grm-bk-lijst .grm-bk__acties .gm-btn{height:46px;font-size:15px;padding:0 20px}
}
@media(max-width:560px){
  /* Op een telefoon staat de kaart onder elkaar; de knop vult dan de breedte,
     want een knop van tweehonderd pixels naast een lege rechterhelft leest als
     een half afgemaakte kaart. */
  .grm-bk-lijst .grm-bk__naam{font-size:20px}
  .grm-bk-lijst .grm-bk__acties .gm-btn,
  .grm-bk-raster .grm-bk__acties .gm-btn{width:100%;flex:1 1 100%}
}

/* De hub toont eerst zijn branches en daaronder de bedrijven zelf. Zonder kop
   plakken die twee aan elkaar en lijkt de lijst bij de laatste groep te horen. */
.grm-hublijst__lijstkop{font-family:var(--grm-font-display);font-size:var(--grm-h3);color:var(--grm-ink);margin:8px 0 16px}

/* Op een branchepagina staan de hero, het overzicht en de resultatenlijst
   onder elkaar. Ze hingen op 24, 24 en 20 pixels, en dat verschil van vier zie
   je als een knik in de linkerrand zodra ze elkaar raken. */
.grm-branche > .grm-listing{padding-left:24px;padding-right:24px}

/* Het slot van het helpcentrum. Zonder eigen regel plakt het tegen de laatste
   uitklapvraag aan en leest het als een antwoord in plaats van als een afsluiting. */
.grm-help__slot{margin-top:44px;padding-top:30px;border-top:1px solid var(--grm-line,#D7DEE7)}
.grm-help__slot h2{font-family:var(--grm-font-display);font-size:var(--grm-h3);color:var(--grm-ink,#041E42);margin:0 0 12px}
.grm-help__slot p{line-height:1.75;color:var(--grm-ink-500,#55636E);margin:0 0 14px}
.grm-help__slot .grm-branche__seo-list{margin-bottom:14px}

/* De afslag naar een categorie, boven de filters. Hij moet opvallen zonder te
   schreeuwen: het is een aanbod en geen waarschuwing, dus de merkkleur zacht in
   het vlak en de tekst gewoon leesbaar donker. */
.grm-filters__suggestie{
  display:flex;align-items:center;gap:10px;margin:12px 16px 0;padding:11px 12px;
  border:1px solid var(--grm-brand-100,#D3E0EF);border-radius:12px;
  background:var(--grm-brand-50,#EDF2F8);color:var(--grm-ink,#041E42);
  text-decoration:none;transition:background .14s,border-color .14s;
}
.grm-filters__suggestie:hover{background:var(--grm-brand-100,#D3E0EF);border-color:var(--grm-accent,#1668C7)}
.grm-filters__suggestie > .material-symbols-rounded{font-size:20px;color:var(--grm-accent,#1668C7);flex:0 0 auto}
.grm-filters__suggestie-txt{display:flex;flex-direction:column;gap:2px;font-size:13px;font-weight:700;line-height:1.35;min-width:0}
.grm-filters__suggestie-txt small{font-size:11.5px;font-weight:500;color:var(--grm-ink-500,#55636E)}
.grm-filters__suggestie-pijl{margin-left:auto;font-size:18px;color:var(--grm-ink-500,#55636E);flex:0 0 auto}

/* De voet van de kaart: de knop links, de feiten en kenmerken ernaast.

   Ze stonden onder elkaar: twee lijstjes en de knop eronder. Op een lijstkaart
   van bijna negenhonderd pixels breed gaf dat een hoge kaart met een lege
   rechterhelft, en stond de knop het verst van je oog af terwijl dat de actie
   is waar de kaart voor staat.

   De grondvorm is de smalle: onder elkaar, met de knop onderaan. De brede
   lijstkaart zet hem daarna naast de lijstjes. De weergavewissel verandert
   alleen de klasse van de lijst en niet die van de kaartjes, dus een kaart met
   grm-bk--lijst kan in de rasterweergave staan; die uitzondering staat er
   apart onder. */
.grm-bk__voet{display:flex;flex-direction:column;align-items:stretch;gap:9px;margin-top:auto;padding-top:14px}
.grm-bk__voet > .grm-bk__acties{order:2;margin-top:0;padding-top:2px}
.grm-bk__voet > .grm-bk__info{order:1;min-width:0;display:flex;flex-direction:column;gap:7px}
.grm-bk__info > .grm-bk__feiten,
.grm-bk__info > .grm-bk__kenmerken{margin:0}

.grm-bk--lijst .grm-bk__voet{flex-direction:row;align-items:center;gap:20px}
.grm-bk--lijst .grm-bk__voet > .grm-bk__acties{order:0;flex:0 0 auto;padding-top:0}
.grm-bk--lijst .grm-bk__voet > .grm-bk__info{order:0;flex:1 1 auto}

/* Dezelfde kaart in de rasterweergave is een derde zo breed. Daar past de knop
   niet naast twee lijstjes, maar de branchepil en die lijstjes wel: dat is een
   label met de feiten erachter, en samen op een rij vullen ze de regel die ze
   anders allebei half leeg lieten. De knop gaat eronder, over de volle breedte.

   De pil staat in de body en de lijstjes in de voet, dus het zijn geen
   broertjes en opmaak kan ze niet verplaatsen. display:contents haalt het vak
   van de voet weg; de knop en het infoblok vallen dan rechtstreeks in de body
   en staan naast de pil in dezelfde rij. */
.grm-bk-raster .grm-bk__body,
.grm-home__raster .grm-bk__body{flex-direction:row;flex-wrap:wrap;align-items:flex-start;column-gap:10px}
.grm-bk-raster .grm-bk__body > *,
.grm-home__raster .grm-bk__body > *{flex:1 1 100%;min-width:0}
.grm-bk-raster .grm-bk__voet,
.grm-home__raster .grm-bk__voet{display:contents}
.grm-bk-raster .grm-bk__body > .grm-bk__head-branche,
.grm-home__raster .grm-bk__body > .grm-bk__head-branche{order:2;flex:0 0 auto;align-self:center;margin:0}
.grm-bk-raster .grm-bk__body .grm-bk__voet > .grm-bk__info,
.grm-home__raster .grm-bk__body .grm-bk__voet > .grm-bk__info{order:2;flex:1 1 auto;min-width:0;align-self:center}
.grm-bk-raster .grm-bk__body .grm-bk__voet > .grm-bk__acties,
.grm-home__raster .grm-bk__body .grm-bk__voet > .grm-bk__acties{order:3;flex:1 1 100%;padding-top:4px}

@media(max-width:640px){
  /* Op een telefoon is elke kaart een kolom breed en past er niets naast
     elkaar. Dezelfde behandeling als in het raster. */
  .grm-bk--lijst .grm-bk__voet{flex-direction:column;align-items:stretch;gap:9px}
  .grm-bk--lijst .grm-bk__voet > .grm-bk__acties{order:2;padding-top:2px}
  .grm-bk--lijst .grm-bk__voet > .grm-bk__info{order:1}
  .grm-bk__voet > .grm-bk__acties .gm-btn{width:100%;flex:1 1 100%;justify-content:center}
}