/* "Vistos recentemente" (01/10/2026): home e fim da PDP.
   A faixa reaproveita .home-brands__products / .brand-mini (ecommerce.css);
   aqui so o que e proprio da secao. */
.home-vistos {
  padding: var(--home-section-space, 56px) 0 0;
  background: var(--surface, #fff);
}

.home-vistos--pdp {
  padding: 32px 0 0;
}

.home-vistos__heading {
  margin-bottom: 14px;
}

.home-vistos__limpar {
  min-height: 36px;
  flex: 0 0 auto;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  padding: 0 14px;
  font-family: inherit;
  font-size: .85rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 160ms ease, color 160ms ease;
}

.home-vistos__limpar:hover,
.home-vistos__limpar:focus-visible {
  border-color: var(--orange);
  color: var(--orange-accessible);
}

.home-vistos__slot {
  min-width: 0;
}

.home-vistos .brand-mini__image {
  aspect-ratio: 1;
}

/* Desktop: 6 por vez (a home e larga); tablet: 4. */
@media (min-width: 1100px) {
  .home-vistos:not(.home-vistos--pdp) .home-brands__products .brand-mini-list {
    grid-auto-columns: calc((100% - 60px) / 6);
  }
}

@media (max-width: 760px) {
  .home-vistos .home-brands__products .brand-mini-list {
    grid-auto-columns: calc((100% - 12px) / 2.3);
  }

  /* No celular o titulo e o botao ficam lado a lado (o split vira bloco no tema). */
  .home-vistos .home-vistos__heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
  }

  .home-vistos__limpar {
    min-height: 44px;
  }

  /* Setas sobre a borda nao podem empurrar a pagina para o lado. */
  .home-vistos .home-brands__products-nav--prev {
    left: 0;
  }

  .home-vistos .home-brands__products-nav--next {
    right: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-vistos .brand-mini__link,
  .home-vistos__limpar {
    transition: none;
  }

  .home-vistos .brand-mini__link:hover,
  .home-vistos .brand-mini__link:focus-visible {
    transform: none;
  }
}