/* Continuous manufacturer strip. */
.brand-row {
  display: grid;
  grid-template-columns: minmax(210px, 1fr) minmax(0, 4fr);
  overflow: hidden;
}

.brand-row > .more-brands {
  height: 96px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 3px;
  padding: 0;
  border-right: 1px solid #e4e5dd;
  color: var(--ink);
  text-decoration: none;
}

.brand-row > .more-brands:hover,
.brand-row > .more-brands:focus-visible {
  color: var(--orange);
}

.more-brands strong { white-space: nowrap; }
.more-brands span { color: #7d8076; }

.brand-marquee {
  min-width: 0;
  overflow: hidden;
}

.brand-track {
  display: flex;
  width: max-content;
  animation: brand-scroll 22s linear infinite;
}

.brand-track > a {
  width: 190px;
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px 28px;
  border-right: 1px solid #e4e5dd;
  background: #fff;
  text-decoration: none;
  transition: none;
}

.brand-track > a:hover,
.brand-track > a:focus-visible { background: #fff; }

.brand-track img {
  width: 100%;
  height: 60px;
  object-fit: contain;
  filter: grayscale(1);
  opacity: .78;
  transition: filter .2s ease, opacity .2s ease, transform .2s ease;
}

.brand-track a:hover img,
.brand-track a:focus-visible img {
  filter: grayscale(0);
  opacity: 1;
  transform: scale(1.03);
}

.brand-track .brand-wordmark {
  color: #292b29;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: .06em;
  text-align: center;
}

.brand-marquee:hover .brand-track {
  animation-play-state: paused;
}

@keyframes brand-scroll {
  to { transform: translateX(-50%); }
}

@media (max-width: 760px) {
  .brand-row {
    grid-template-columns: 1fr;
  }

  .brand-row > .more-brands {
    height: 82px;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    padding: 0;
    border-right: 0;
    border-bottom: 1px solid #e4e5dd;
  }

  .more-brands strong { font-size: 26px; }
  .more-brands span { font-size: 11px; line-height: 1.35; }

  .brand-track > a {
    width: 150px;
    height: 82px;
    padding: 14px 22px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .brand-track { animation: none; }
}