/* Category-only separated family links with uniform slots. Existing images,
   optical framing, carousel behavior and the approved controls stay intact. */
body#category .vs-category-header--families .vsc-families {
  --vsc-visible:5;
  --vsc-gap:12px;
  --vsc-slot:min(216px,calc((100% - (var(--vsc-visible) - 1) * var(--vsc-gap)) / var(--vsc-visible)));
  --vsc-band-media:#e3ecef;
  --vsc-band-caption:var(--vs-brand-ink,#171a1d);
  --vsc-band-light:var(--vs-brand-light,#79ddf2);
  --vsc-media-height:132px;
  --vsc-caption-height:44px;
  margin-top:20px;
}

body#category .vs-category-header--families .vsc-families .vsc-families__track,
body#category .vs-category-header--families .vsc-families:is([data-vs-subcategories-count='1'],[data-vs-subcategories-count='2']) .vsc-families__track {
  grid-auto-columns:var(--vsc-slot);
  gap:var(--vsc-gap);
  box-sizing:border-box;
  width:100%;
  max-width:calc(var(--vsc-visible) * 216px + (var(--vsc-visible) - 1) * var(--vsc-gap));
  margin:0;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  scroll-padding-inline:0;
}

body#category .vs-category-header--families .vsc-families .vsc-families__item {
  min-width:0;
  margin:0;
  padding:0;
  overflow:hidden;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
body#category .vs-category-header--families .vsc-families .vsc-families__item::after { display:none; }
body#category .vs-category-header--families .vsc-families .vsc-families__link {
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  text-decoration:none;
}
body#category .vs-category-header--families .vsc-families .vsc-families__media {
  background:var(--vsc-band-media);
}

/* Each separate category link keeps the approved anthracite caption. */
body#category .vs-category-header--families .vsc-families .vsc-families__caption {
  min-height:44px;
  padding:4px 12px;
  border:0;
  border-radius:0;
  background:var(--vsc-band-caption);
  color:#f4f7f8;
  box-shadow:none;
}
body#category .vs-category-header--families .vsc-families .vsc-families__name {
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
  font-size:14px;
  font-weight:600;
  line-height:18px;
}
body#category .vs-category-header--families .vsc-families .vsc-families__arrow {
  color:var(--vsc-band-light);
}
body#category .vs-category-header--families .vsc-families .vsc-families__link:is(:focus-visible,:active) > .vsc-families__caption {
  background:var(--vsc-band-caption);
  color:var(--vsc-band-light);
}
body#category .vs-category-header--families .vsc-families .vsc-families__link:focus-visible {
  outline:2px solid var(--vsc-band-light);
  outline-offset:-2px;
}

@media (hover:hover) and (pointer:fine) {
  body#category .vs-category-header--families .vsc-families .vsc-families__link:hover > .vsc-families__caption {
    background:var(--vsc-band-caption);
    color:var(--vsc-band-light);
  }
}
@media (min-width:768px) and (max-width:1199.98px) {
  body#category .vs-category-header--families .vsc-families { --vsc-visible:3; }
}
@media (max-width:767.98px) {
  body#category .vs-category-header--families .vsc-families {
    --vsc-visible:2;
    --vsc-gap:10px;
    --vsc-media-height:116px;
    margin-top:16px;
  }
  body#category .vs-category-header--families .vsc-families .vsc-families__caption { padding-inline:10px; }
}

/* Existing navigation behavior retained verbatim from the previous surface. */
body#category .vs-category-header--families .vsc-families__step {
  width:44px;
  height:44px;
  min-width:44px;
  min-height:44px;
  background:#20262b;
  border-color:#55777e;
  color:var(--vs-brand-light,#79ddf2);
}
body#category .vs-category-header--families .vsc-families__controls[hidden] { display:none; }
@media (max-width:767.98px) {
  body#category .vs-category-header--families .vsc-families__controls:not([hidden]) { display:flex; }
  body#category .vs-category-header--families:has(.vsc-families[data-vs-subcategories-overflow='true']) h1 { padding-inline-end:108px; }
}

/* PC: use the existing free space to reveal the next unchanged tile.
   Mobile sizing, tile dimensions, images and native rail behavior are untouched. */
@media (min-width:992px) {
  body#category .vs-category-header--families .vsc-families .vsc-families__track {
    max-width:none;
  }
}