/* ===== Merken-overzichtspagina (/merken/) ===== */
/* Repliceert de styling van de brands-systeempagina, die via #brandspage
   wordt aangestuurd en dus niet automatisch op deze categoriepagina laadt. */

/* Logo's: 6 per rij, zo breed mogelijk. Op /brands/ zijn de tegels groter;
   we laten de kolommen de volledige breedte vullen. */
.brands.merken-overzicht .brand,
.popular-brands .brand {
  padding: 10px;
}

.brands.merken-overzicht .brand a,
.popular-brands .brand a {
  width: 100%;
  min-height: 90px;
  background: #fff;
  border: 1px solid #ECECEC;
  border-radius: var(--borderRadius, 6px);
  padding: 15px;
}

.brands.merken-overzicht .brand a img,
.popular-brands .brand a img {
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

/* Letter-navigatie bovenin: groter en meer ruimte ertussen */
.letters {
  gap: 22px;
  margin: 30px 0 10px;
}

.letters [data-letter] {
  font-size: 20px;
  font-weight: 800;
  color: var(--dark, #29384B);
  cursor: pointer;
  transition: color .15s ease;
}

.letters [data-letter]:hover {
  color: var(--accent, #70C067);
}

/* Scheidingslijntje tussen de letter-blokken, zoals op de originele pagina */
.brands.merken-overzicht {
  border-top: 1px solid #ECECEC;
  padding-top: 20px;
  margin-top: 20px;
  position: relative;
}

/* De grote letter links naast elk blok */
.brands.merken-overzicht .letter {
  display: block;
  width: 100%;
  font-size: 24px;
  font-weight: 800;
  color: var(--dark, #29384B);
  margin-bottom: 10px;
}