/*
 * Listados (B27): categorías, marcas, búsqueda, ofertas, novedades, más vendidos y el listado de llantas. Guía de estilo,
 * «Espaciados, rejilla y formas» y «Comportamiento en móvil», y maquetas Listado y Movil-Listado. La tarjeta es de
 * nb-componentes.css (sale también en la portada y en los relacionados). Sin colores: solo los roles de nb-tokens.css.
 */

/* Rejilla: 3 columnas al lado de los filtros, 2 en tableta y 2 en móvil. */
#products .products {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--nb-sep-tarjetas);
  margin: 0;
}

#products .products > .product-miniature {
  width: auto;
  max-width: none;
  padding: 0;
  margin: 0;
}

/* Columna de filtros de la maqueta (260 px). */
@media (min-width: 961px) {
  #left-column {
    flex: 0 0 var(--nb-ancho-filtros);
    max-width: var(--nb-ancho-filtros);
  }
}

@media (max-width: 960px) {
  #products .products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--nb-sep-interno);
  }
}

@media (max-width: 560px) {
  #products .products {
    gap: var(--nb-sep-tarjetas-movil);
  }
}

/* Lista de marcas (/marcas y /rc/marcas): sin logos, el nombre en una rejilla de texto. */
.nb-marcas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--nb-sep-interno);
  padding: 0;
  list-style: none;
}

.nb-marcas .brand {
  min-height: var(--nb-alto-boton-icono);
  border: var(--nb-borde-fino) solid var(--nb-c-borde);
  background-color: var(--nb-c-superficie);
}

.nb-marcas .brand__infos {
  padding: var(--nb-esp-3) var(--nb-esp-4);
}

.nb-marcas .brand__title {
  color: var(--nb-c-enlace);
  font-weight: var(--nb-peso-medio);
}

.nb-marcas .brand__title:hover {
  color: var(--nb-c-enlace-hover);
}