.grm-bk,.grm-bk *,.grm-bk-raster,.grm-bk-lijst{box-sizing:border-box}
.grm-bk{
  --bk-c:#103A63;
  position:relative;
  display:grid;
  background:var(--gm-bg,#fff);
  border:1px solid var(--gm-border,#D7DEE7);
  border-radius:var(--gm-radius,12px);
  overflow:hidden;
  transition:border-color .16s,box-shadow .16s,transform .16s;
}
.grm-bk:hover{
  border-color:var(--gm-primary,#103A63);
  box-shadow:0 8px 24px rgba(4,30,66,.09);
  transform:translateY(-1px);
}
.grm-bk::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:3px;
  background:var(--bk-c);
  opacity:0;
  transition:opacity .16s;
}
.grm-bk.is-geverifieerd::before{opacity:1}

.grm-bk__beeld{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--gm-bg-subtle,#F5F7FA);
  overflow:hidden;
  text-decoration:none;
}
.grm-bk__beeld,
.grm-bk__beeld:hover,
.grm-bk__beeld:focus{text-decoration:none;border-bottom:0}
/* Wit achter elk beeld: een doorzichtige afbeelding valt anders weg tegen
   de gekleurde band. Het logo past altijd in zijn vak (contain); een logo
   dat het vak moet vullen wordt uitgerekt of afgesneden, en dat is wat er
   overal kapot uitzag. De bedrijfsfoto mag wel vullen: die snijdt bij,
   maar vervormt niet. */
.grm-bk__beeld{background:#fff}
.grm-bk__beeld img{width:100%;height:100%;object-fit:cover;display:block;background:#fff}
.grm-bk__beeld img.grm-bk__img-logo{object-fit:contain;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.

   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.

   De grondvorm is de lijstweergave. Daar is het vak groot en staat er een
   bedrijfsfoto of een productfoto, nooit de profielfoto; een logo dat naar
   kaartformaat wordt opgerekt is wat er overal kapot uitzag. Heeft een bedrijf
   alleen een profielfoto, dan staat er de letter. */
.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}

/* De rasterweergave draait het om: daar is het beeld een rondje van
   tweeenzeventig pixels naast de naam. De profielfoto is daar het
   herkenningspunt, en een brede bedrijfsfoto wordt in dat rondje onherkenbaar
   bijgesneden. */
.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}
.grm-bk__initiaal{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
  background:linear-gradient(135deg,color-mix(in srgb,var(--bk-c) 75%,#041E42),#041E42);
  color:rgba(255,255,255,.94);
  font-family:var(--gm-font-display,'Inter Tight',sans-serif);
  font-weight:800;
  letter-spacing:-.02em;
}

.grm-bk__body{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:16px 18px 18px;
  min-width:0;
}

.grm-bk__kop{
  display:flex;
  align-items:flex-start;
  gap:10px;
  flex-wrap:wrap;
}
.grm-bk__naam{
  margin:0;
  font-family:var(--gm-font-display,'Inter Tight',sans-serif);
  font-size:18px;
  font-weight:700;
  line-height:1.25;
  letter-spacing:-.01em;
  min-width:0;
}
.grm-bk__naam a{color:var(--gm-text,var(--grm-ink,#041e42));text-decoration:none}
.grm-bk__naam a:hover{color:var(--gm-primary,#103A63)}

.grm-bk__keur{
  display:inline-flex;
  align-items:center;
  gap:4px;
  flex-shrink:0;
  padding:3px 9px 3px 6px;
  border-radius:999px;
  background:var(--gm-primary-50,#EDF2F8);
  color:var(--gm-primary,#103A63);
  font-size:11.5px;
  font-weight:800;
  letter-spacing:.02em;
}
.grm-bk__keur .material-symbols-rounded{font-size:15px;font-variation-settings:'FILL' 1}

.grm-bk__plaats{
  display:flex;
  align-items:center;
  gap:5px;
  margin:0;
  color:var(--gm-text-secondary,#55636E);
  font-size:14px;
}
.grm-bk__plaats .material-symbols-rounded{font-size:16px;flex-shrink:0}
.grm-bk__afstand{
  margin-left:2px;
  padding-left:8px;
  border-left:1px solid var(--gm-border,#D7DEE7);
  color:var(--gm-primary,#103A63);
  font-weight:700;
}

.grm-bk__typen{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin:2px 0 0;
  padding:0;
  list-style:none;
}
.grm-bk__typen li{
  padding:3px 10px;
  border:1px solid var(--gm-border,#D7DEE7);
  border-radius:999px;
  font-size:11.5px;
  font-weight:700;
  color:var(--gm-text-secondary,#55636E);
  text-transform:uppercase;
  letter-spacing:.05em;
}

.grm-bk__tekst{
  margin:2px 0 0;
  color:var(--gm-text-secondary,#55636E);
  font-size:14.5px;
  line-height:1.55;
}

.grm-bk__feiten,
.grm-bk__kenmerken{
  display:flex;
  flex-wrap:wrap;
  gap:6px 16px;
  margin:2px 0 0;
  padding:0;
  list-style:none;
  font-size:13.5px;
}
.grm-bk__feiten li,
.grm-bk__kenmerken li{
  display:flex;
  align-items:center;
  gap:5px;
  color:var(--gm-text-secondary,#55636E);
}
.grm-bk__feiten .material-symbols-rounded{font-size:16px;color:var(--gm-text-tertiary,var(--grm-ink-400,#7A8794))}
.grm-bk__kenmerken li{color:var(--gm-primary,#103A63);font-weight:600}
.grm-bk__kenmerken .material-symbols-rounded{font-size:15px}

.grm-bk__producten{margin:4px 0 0}
.grm-bk__producten-kop{
  margin:0 0 6px;
  color:var(--gm-text-tertiary,var(--grm-ink-400,#7A8794));
  font-size:11px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.06em;
}
.grm-bk__producten-strook{
  display:flex;
  gap:8px;
  margin:0;
  padding:0;
  list-style:none;
  overflow-x:auto;
  scrollbar-width:none;
}
.grm-bk__producten-strook::-webkit-scrollbar{display:none}
.grm-bk__product{
  flex:0 0 76px;
  width:76px;
}
.grm-bk__product-beeld{
  display:flex;
  align-items:center;
  justify-content:center;
  width:76px;
  height:76px;
  border:1px solid var(--gm-border,#D7DEE7);
  border-radius:10px;
  background:var(--gm-bg-subtle,#F5F7FA);
  overflow:hidden;
}
.grm-bk__product-beeld img{width:100%;height:100%;object-fit:cover;display:block}
.grm-bk__product-beeld .material-symbols-rounded{font-size:26px;color:var(--gm-text-tertiary,var(--grm-ink-400,#7A8794))}
.grm-bk__product-naam{
  display:block;
  margin-top:5px;
  color:var(--gm-text-secondary,#55636E);
  font-size:11.5px;
  line-height:1.3;
}

.grm-bk__branche{
  margin:0;
  color:var(--bk-c);
  font-size:11.5px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.06em;
}

.grm-bk__acties{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:auto;
  padding-top:12px;
}
.grm-bk__fav{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:38px;
  height:38px;
  margin-left:auto;
  padding:0;
  border:1px solid var(--gm-border,#D7DEE7);
  border-radius:10px;
  background:var(--gm-bg,#fff);
  color:var(--gm-text-tertiary,var(--grm-ink-400,#7A8794));
  cursor:pointer;
  transition:color .14s,border-color .14s,background .14s;
}
.grm-bk__fav:hover{color:var(--gm-danger,var(--grm-danger,#dc2626));border-color:var(--gm-danger,var(--grm-danger,#dc2626))}
.grm-bk__fav[aria-pressed="true"]{color:var(--gm-danger,var(--grm-danger,#dc2626));border-color:var(--gm-danger,var(--grm-danger,#dc2626));background:var(--grm-canvas,#f5f7fa)}
.grm-bk__fav[aria-pressed="true"] .material-symbols-rounded{font-variation-settings:'FILL' 1}
.grm-bk__fav .material-symbols-rounded{font-size:20px}

.grm-bk--lijst{grid-template-columns:190px 1fr}
.grm-bk--lijst .grm-bk__beeld{aspect-ratio:auto}
.grm-bk--lijst .grm-bk__initiaal{font-size:56px}

.grm-bk--raster{grid-template-columns:1fr}
.grm-bk--raster .grm-bk__beeld{aspect-ratio:16/10}
.grm-bk--raster .grm-bk__initiaal{font-size:48px}
.grm-bk--raster .grm-bk__naam{font-size:16.5px}
.grm-bk--raster .grm-bk__tekst{font-size:14px}

.grm-bk--smal{grid-template-columns:82px 1fr}
.grm-bk--smal .grm-bk__body{gap:6px;padding:12px 14px}
.grm-bk--smal .grm-bk__naam{font-size:15px}
.grm-bk--smal .grm-bk__initiaal{font-size:30px}
.grm-bk--smal .grm-bk__acties{padding-top:8px}

.grm-bk-lijst{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.grm-bk-raster{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,348px),1fr));
  gap:16px;
}

@media (max-width:720px){
  .grm-bk--lijst{grid-template-columns:112px 1fr}
  .grm-bk--lijst .grm-bk__initiaal{font-size:36px}
  .grm-bk__body{padding:14px 14px 16px}
  .grm-bk__naam{font-size:16px}
  .grm-bk__acties{flex-wrap:wrap}
  .grm-bk__fav{margin-left:0}
}
@media(max-width:640px){
  .grm-bk--lijst{grid-template-columns:1fr}
  .grm-bk--lijst .grm-bk__beeld{display:none}
  .grm-bk__acties{flex-wrap:wrap}
  .grm-bk__acties .gm-btn{flex:1 1 auto;justify-content:center}
}
.grm-bk__producten-kop{display:flex;align-items:center;justify-content:space-between;gap:10px}
.grm-bk__producten-kop a{font-size:11.5px;font-weight:700;color:var(--gm-primary,#103A63);text-transform:none;letter-spacing:0;text-decoration:none;white-space:nowrap}
.grm-bk__producten-kop a:hover{text-decoration:underline}
.grm-bk__product{flex:0 0 132px;width:132px}
.grm-bk__product>a{display:block;text-decoration:none;border-radius:10px;padding:4px;transition:background .14s}
.grm-bk__product>a:hover{background:var(--gm-primary-50,#EDF2F8)}
.grm-bk__product-beeld{width:100%;height:112px;border-radius:8px}
.grm-bk__product-naam{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:var(--gm-text,var(--grm-ink,#041e42));font-weight:600;font-size:12px;min-height:31px}
.grm-bk__product-prijs{display:block;margin-top:2px;font-size:12px;font-weight:800;color:var(--gm-primary,#103A63);font-family:var(--grm-font-display,'Inter Tight',sans-serif)}
@media(max-width:640px){.grm-bk__product{flex-basis:118px;width:118px}.grm-bk__product-beeld{height:98px}}