/* Home-page brands banner: transparent logos and the stores count move in one marquee. */
.brands-banner {
  --brand-size: 128px;
  --brand-gap: 32px;
  overflow: hidden;
  background: #f5f5f7;
  text-align: center;
  padding: 0 0 64px;
}
.brands-marquee {
  padding-block: 8px;
  min-height: calc(var(--brand-size) + 16px);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}
.brands-marquee__track {
  display: flex;
  width: max-content;
  /* 4s per tile keeps the speed at 40px/s (tile stride 160px). It never pauses. */
  animation: brands-scroll calc(var(--tile-count, 28) * 4s) linear infinite;
}
.brands-marquee__group { display: flex; flex: none; }
.brands-marquee__tile {
  flex: none;
  width: var(--brand-size);
  height: var(--brand-size);
  margin-right: var(--brand-gap);
}
.brands-marquee__tile img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 220ms ease-out;
}
@media (hover: hover) {
  .brands-marquee__tile:hover img { transform: scale(1.04); }
}

/* "+400 Stores" travels in the same repeating group as the logos. */
.brands-marquee__stores { display: flex; align-items: center; justify-content: center; }
.brands-marquee__stores > [aria-hidden] { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.brands-banner__value { display: flex; align-items: baseline; }
.brands-banner__number {
  display: inline-block;
  width: 3ch;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.brands-banner__sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

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

@media (max-width: 759px) {
  .brands-banner { --brand-size: 96px; --brand-gap: 20px; padding-bottom: 48px; }
  /* Tile stride 116px, so 2.9s per tile keeps the same 40px/s. */
  .brands-marquee__track { animation-duration: calc(var(--tile-count, 28) * 2.9s); }
}
@media (prefers-reduced-motion: reduce) {
  .brands-marquee { -webkit-mask-image: none; mask-image: none; padding-inline: 24px; }
  .brands-marquee__track { animation: none; width: 100%; }
  .brands-marquee__group { width: 100%; flex-wrap: wrap; justify-content: center; gap: var(--brand-gap); }
  .brands-marquee [aria-hidden="true"] { display: none; }
  .brands-marquee .brands-marquee__stores > [aria-hidden] { display: flex; }
  .brands-marquee__tile { margin: 0; }
  .brands-marquee__tile img { transition: none; }
  .brands-marquee__tile:hover img { transform: none; }
}

.brands-marquee__stores > [aria-hidden] { gap:4px; }
.brands-banner__prefix { font-size:16px; line-height:1; letter-spacing:0; }