/* Model switcher: 3 packshots. Active = full colour + navy underlined label. */
/* The model strip reads QX60 / QX55 / QX50 left-to-right in the design. */
.vehicle-nav{display:flex;direction:ltr;gap:28px}

.vehicle-nav__item{
  width:164px;display:flex;flex-direction:column;align-items:center;gap:0;
}
.vehicle-nav__item img{
  width:164px;height:86px;object-fit:contain;
  filter:grayscale(1);opacity:.75;
  transition:filter .3s ease,opacity .3s ease;
}
.vehicle-nav__label{
  display:inline-block;
  font-size:16px;line-height:20.4px;font-weight:400;color:#9a9a9a;
  border-bottom:2px solid transparent;
  transition:color .3s ease,border-color .3s ease;
  white-space:nowrap;
}
.vehicle-nav__item:hover img{filter:grayscale(.4);opacity:.9}
.vehicle-nav__item.is-active img{filter:none;opacity:1}
.vehicle-nav__item.is-active .vehicle-nav__label{
  color:var(--navy);font-weight:700;border-bottom-color:var(--navy);
}

.vehicle-nav__item .only-mobile{display:none}

@media (max-width:1024px){
  /* The strip is exactly 375px wide by design (3x101 + 2x20 gap + 32 padding).
     Let the gap absorb anything narrower — 360px Androids, or a scrollbar —
     instead of overflowing; at 375px the gap still resolves to the design 20px. */
  .vehicle-nav{
    gap:clamp(6px,calc((100% - 303px) / 2 - 16px),20px);
    justify-content:center;padding:10px 16px;
  }
  .vehicle-nav__item{width:101px;flex:0 1 101px;min-width:0}
  .vehicle-nav__item img{width:100%;height:auto;aspect-ratio:101 / 57}
  .vehicle-nav__item .only-desktop{display:none}
  .vehicle-nav__item .only-mobile{display:block}
  .vehicle-nav__label{font-size:13px;line-height:20px}
}