/**
 * Overrides visuales del filtro instantáneo (el motor vive en assets/js + inc/).
 * Este CSS solo se encola en las páginas objetivo (ver functions.php) → su alcance
 * ya está acotado: fuera de esas categorías el filtro nativo sigue intacto.
 */

/* 1) Ocultar el filtro NATIVO (drawer de Astra + su botón) donde corre el instantáneo:
      dos sistemas de filtro a la vez confunden. Reversible quitando este fichero. */
.ast-filter-wrap,
button.astra-shop-filter-button {
  display: none !important;
}

/* 2) [RETIRADA 2026-07-14] Aquí hubo una mitigación con content-visibility:auto
      para categorías grandes. Se quitó: su paint containment RECORTABA el badge
      de oferta de Astra (sobresale de la tarjeta) y antes ya desbordó el grid.
      El filtrado va en ~20 ms con 453 tarjetas sin ella; si algún día una
      categoría se siente lenta al cargar, revisitar con medición. */

/* 3) Tokens de marca (sobrescriben los --if-* del motor; misma especificidad,
      este fichero carga después). Neutro oscuro streetwear; afinar con el cliente. */
.cerraif-bar,
.cerraif-panel,
.cerraif-overlay,
.cerraif-empty {
  --if-accent: #111111;
  --if-accent-dark: #000000;
  --if-accent-soft: #ececec;
}

/* 4) Neutralizar los estilos GLOBALES de botón de Astra dentro del filtro.
      Astra pinta todo <button> con padding 20px/36px, color claro y hover/focus
      oscuros → el aspa de cerrar salía como un óvalo blanco gigante y las
      opciones se volvían ilegibles (barra negra) al pasar el ratón. */
.cerraif-close {
  padding: 0 !important;
  width: 40px !important;
  height: 40px !important;
  min-height: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent !important;
  border: 0 !important;
  color: var(--if-ink) !important;
}
.cerraif-close:hover,
.cerraif-close:focus {
  background: var(--if-soft) !important;
  color: var(--if-ink) !important;
}

.cerraif-opt,
.cerraif-more,
.cerraif-chip,
.cerraif-clear,
.cerraif-empty-clear {
  color: var(--if-ink) !important;
}
.cerraif-opt:hover,
.cerraif-opt:focus,
.cerraif-more:hover,
.cerraif-more:focus {
  background: var(--if-soft) !important;
  color: var(--if-ink) !important;
}
.cerraif-chip:hover,
.cerraif-chip:focus,
.cerraif-clear:hover,
.cerraif-clear:focus,
.cerraif-empty-clear:hover,
.cerraif-empty-clear:focus {
  background: var(--if-soft) !important;
  color: var(--if-ink) !important;
}
.cerraif-toggle:hover,
.cerraif-toggle:focus {
  background: var(--if-soft) !important;
  color: var(--if-ink) !important;
}

/* 5) Tic del checkbox en BLANCO: el motor lo dibuja en tinta oscura (pensado para
      un acento claro) y sobre nuestro acento negro era invisible. */
.cerraif-opt.is-on .cerraif-opt__box::after {
  border-color: #fff;
}