/* Alpha Marcas - bloque de columna con el listado de marcas.
   La hoja NO se registra: la pide el <link> que imprime la plantilla del
   bloque, asi que solo se descarga en las paginas de marca. */

/* El margen de arriba lo separa del bloque que tenga encima en la columna
   (los filtros, el arbol de categorias...). Va en 20px y no en un token
   porque la escala Alpha salta de 16 a 24. */
.alpha-marcas {
  margin-top: 20px;
  margin-bottom: var(--alpha-ui-space-lg, 1.5rem);
}

.alpha-marcas__titulo {
  color: var(--alpha-ui-color-black, #111318);
}

/* ===== BUSCADOR ===== */

.alpha-marcas__buscador {
  width: 100%;
  margin-bottom: var(--alpha-ui-space-md, 1rem);
  padding: var(--alpha-ui-space-xs, 0.5rem) var(--alpha-ui-space-sm, 0.75rem);
  border: var(--alpha-ui-border-width-thin, 1px) solid var(--alpha-ui-color-border, #e3e7ec);
  border-radius: var(--alpha-ui-radius-xs, 6px);
  background: var(--alpha-ui-color-white, #ffffff);
  color: var(--alpha-ui-color-text, #161616);
  font-size: var(--alpha-ui-font-size-md, 0.875rem);
}

.alpha-marcas__buscador:focus {
  border-color: var(--alpha-ui-color-black, #111318);
  outline: none;
}

.alpha-marcas__vacio {
  margin: var(--alpha-ui-space-sm, 0.75rem) 0;
  color: var(--alpha-ui-color-text-muted, #7b8491);
  font-size: var(--alpha-ui-font-size-md, 0.875rem);
}

/* ===== LISTA ===== */

/* overscroll-behavior: contain evita el "scroll chaining": al llegar al final
   de la lista, la rueda del raton deja de arrastrar la pagina entera detras.
   Sin eso, en una lista con scroll propio el visitante acaba perdido. */
.alpha-marcas__lista {
  overflow-y: auto;
  overscroll-behavior: contain;
  margin: 0;
  /* El hueco de la derecha separa el texto de la barra de scroll: la barra se
     pinta fuera del padding, asi que sin el las cifras quedan pegadas a ella.
     Solo a la derecha, para que los nombres sigan alineados con el titulo. */
  padding: 0 var(--alpha-ui-space-sm, 0.75rem) 0 0;
  list-style: none;
}

/* Barra de scroll fina y discreta: la de serie en Windows se come 17px de un
   bloque de columna que ya es estrecho. */
.alpha-marcas__lista {
  scrollbar-width: thin;
  scrollbar-color: var(--alpha-ui-color-border-strong, #dbdbdb) transparent;
}

.alpha-marcas__lista::-webkit-scrollbar {
  width: 6px;
}

.alpha-marcas__lista::-webkit-scrollbar-thumb {
  border-radius: 3px;
  background: var(--alpha-ui-color-border-strong, #dbdbdb);
}

.alpha-marcas__item[hidden] {
  display: none;
}

.alpha-marcas__enlace {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--alpha-ui-space-xs, 0.5rem);
  padding: var(--alpha-ui-space-2xs, 0.25rem) 0;
  color: var(--alpha-ui-color-text, #161616);
  font-size: var(--alpha-ui-font-size-md, 0.875rem);
  line-height: var(--alpha-ui-line-height-snug, 1.25);
  text-decoration: none;
}

.alpha-marcas__enlace:hover,
.alpha-marcas__enlace:focus {
  color: var(--alpha-ui-color-primary, #e10613);
  text-decoration: none;
}

/* overflow-wrap y no text-overflow: un nombre largo se parte en dos lineas en
   vez de quedarse cortado con puntos suspensivos. En una lista para elegir,
   media palabra no sirve de nada. */
.alpha-marcas__nombre {
  min-width: 0;
  overflow-wrap: anywhere;
}

.alpha-marcas__cuenta {
  flex: 0 0 auto;
  color: var(--alpha-ui-color-text-muted, #7b8491);
  font-size: var(--alpha-ui-font-size-sm, 0.8125rem);
  font-variant-numeric: tabular-nums;
}

/* La marca que se esta viendo. Sin enlace de color: ya estas ahi. */
.alpha-marcas__item.is-activa .alpha-marcas__enlace {
  color: var(--alpha-ui-color-black, #111318);
  font-weight: var(--alpha-ui-font-weight-bold, 700);
  cursor: default;
}

.alpha-marcas__todas {
  display: inline-block;
  margin-top: var(--alpha-ui-space-sm, 0.75rem);
  color: var(--alpha-ui-color-black, #111318);
  font-size: var(--alpha-ui-font-size-md, 0.875rem);
  font-weight: var(--alpha-ui-font-weight-semibold, 600);
  text-decoration: underline;
}

.alpha-marcas__todas:hover,
.alpha-marcas__todas:focus {
  color: var(--alpha-ui-color-primary, #e10613);
}

/* En movil la columna no esta al lado sino encima o dentro del cajon de
   alphamobilebar: ahi una lista de 420px de alto es un muro. Se recorta a la
   mitad y el buscador pasa a ser lo principal. */
@media (max-width: 767.98px) {
  .alpha-marcas__lista {
    max-height: 240px !important;
  }
}