/* ==========================================================================
   Catálogo: migas, cabecera, chips de subcategoría, sidebar de filtros,
   barra de resultados, grilla, tarjeta y paginación.
   Depende de tokens.css, base.css, componentes.css y secciones.css.

   Puntos de quiebre de esta vista (los del sistema de diseño):
     hasta 599px    2 productos por fila, filtros tras un botón
     600 a 1023px   3 por fila, filtros tras un botón
     1024 a 1279px  4 por fila a ancho completo, filtros tras un botón
     desde 1280px   4 por fila y sidebar permanente a la izquierda

   El corte de 1280 no es capricho: con el contenido en 1200 y el sidebar en
   260, quedan 908px para 4 tarjetas, o sea tarjetas de 210px. Eso achica la
   foto del señuelo, que es justo el dato que el pescador compara.

   Los productos por fila salen de --sf-productos-fila, que tokens.css ya mueve
   en 1023 y 599. Acá no se repite ese quiebre.

   Desde 1280 el catálogo usa --sf-catalogo-max (1280) en vez del ancho general
   del sitio (1200): con el sidebar encima las tarjetas caían a 193px y la foto
   del señuelo dejaba de distinguirse por patrón de color, que es como se
   compra. El ancho del sidebar y la opacidad del agotado también son tokens.
   ========================================================================== */

/* --- Migas ---------------------------------------------------------------- */

/* Lleva `.woocommerce` delante porque WooCommerce declara
   `.woocommerce:where(...) .woocommerce-breadcrumb{color:#767676}`: el `:where()`
   no suma especificidad, pero `.woocommerce` sí, y (0,2,0) le ganaba a (0,1,0).
   Sobre blanco #767676 pasaba con 4,54:1 y nadie lo miró; sobre el fondo oscuro
   se queda en 4,26:1. */
.woocommerce .woocommerce-breadcrumb,
.woocommerce-breadcrumb {
  margin-bottom: var(--sf-esp-4);
  font-size: var(--sf-cuerpo-s-tam);
  line-height: var(--sf-cuerpo-s-alto);
  color: var(--sf-texto-secundario);
}

.woocommerce .woocommerce-breadcrumb a,
.woocommerce-breadcrumb a {
  color: var(--sf-texto-secundario);
  text-decoration: none;
}

.woocommerce-breadcrumb a:hover { color: var(--sf-texto-marca); text-decoration: underline; }

/* En el teléfono la ruta completa no cabe y tampoco hace falta: lo que importa
   es volver un paso. Se muestran el último enlace y el separador que lo
   precede, escondiendo el resto. */
@media (max-width: 599px) {
  .woocommerce-breadcrumb { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* --- Cabecera de categoría ------------------------------------------------ */

/* Sin el tope de 720px: capaba el bloque dentro de un contenedor de 1216 y
   dejaba 496px de ancho muerto a la derecha. En el artefacto las migas, el
   título y la bajada van a ancho completo. El tope de lectura se mantiene, pero
   en la bajada, que es donde corresponde. */
.sf-catalogo__cabecera { margin-bottom: var(--sf-esp-6); }

/* Título a la izquierda, subcategorías al otro extremo de la misma línea.
   `flex-end` las alinea con la base del bloque de texto y no con su centro: con
   el título en 34px y las píldoras en 30, centrarlas las dejaba flotando. */
.sf-catalogo__cabecera-fila {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sf-esp-4) var(--sf-esp-8);
  flex-wrap: wrap;
}

.sf-catalogo__titulos { min-width: 0; }

/* Sin subcategorías el bloque de texto se queda con todo el ancho, y la bajada
   recupera su medida de lectura por su cuenta. */
.sf-catalogo__cabecera-fila--sola .sf-catalogo__titulos { flex: 1; }

@media (max-width: 899px) {
  .sf-catalogo__cabecera-fila { align-items: flex-start; }
}

/* El titulo del catalogo NO es el H1 de 44px de la portada. En el artefacto
   (`.ct__t`) mide 25,6 sobre el lienzo de 1024, que son 32 a 1280: es una
   etiqueta de donde estas parado, no el titular de una pagina. A 44 ocupaba una
   linea entera con el resto de la franja vacio, que es el espacio en blanco que
   se veia arriba de la grilla. Medido el 01-09-2026. */
.sf-catalogo__titulo {
  font-size: var(--sf-h2);
  line-height: var(--sf-h2-alto);
}

/* Las migas del catálogo van sobre el título y bien pegadas, no como un bloque
   aparte: ese apilado era justo lo que se quería evitar al desengancharlas de
   su sitio por defecto. */
.sf-catalogo__migas { margin-bottom: var(--sf-esp-1); }

.sf-catalogo__titulo {
  display: flex;
  align-items: baseline;
  gap: var(--sf-esp-3);
  flex-wrap: wrap;
  margin: 0;
  font-family: var(--sf-fuente-marca);
  font-weight: var(--sf-marca-wght);
  font-variation-settings: 'wdth' var(--sf-marca-wdth);
  text-transform: uppercase;
  letter-spacing: var(--sf-titulo-mayus-tracking);
  color: var(--sf-texto-principal);
}

/* El contador va junto al h1 y cuenta la categoría completa, no lo filtrado:
   ese número está en la barra de la grilla. */
.sf-catalogo__total {
  font-family: var(--sf-fuente-ui);
  font-size: var(--sf-cuerpo-m-tam);
  font-weight: 600;
  font-variation-settings: normal;
  letter-spacing: normal;
  color: var(--sf-texto-secundario);
}

.sf-catalogo__bajada {
  margin-top: var(--sf-esp-1);
  max-width: 68ch;
  color: var(--sf-texto-secundario);
}

/* El último párrafo no lleva margen: la separación con lo que viene después la
   pone la cabecera, y sumadas daban una línea en blanco de más. */
.sf-catalogo__bajada p { margin: 0 0 var(--sf-esp-2); }
.sf-catalogo__bajada p:last-child { margin-bottom: 0; }

/* Tres líneas en escritorio y dos en el teléfono. Hoy ninguna de las 32
   categorías tiene descripción cargada, así que en la práctica no se ve. */
.sf-catalogo__bajada {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

@media (max-width: 599px) {
  .sf-catalogo__bajada { -webkit-line-clamp: 2; }
}

/* --- Chips de subcategoría ------------------------------------------------
   Navegación lateral en un toque, sin abrir el sidebar. Señuelos tiene 6 hijas
   y Accesorios 7, así que en el teléfono se desplazan de lado.
   -------------------------------------------------------------------------- */

/* Ya no es una fila propia: vive en la cabecera, al lado del título. Se queda
   sin margen inferior y se alinea a la derecha cuando sobra ancho. */
.sf-subcategorias { margin-bottom: 0; }
.sf-subcategorias ul { justify-content: flex-end; }

@media (max-width: 899px) {
  .sf-subcategorias ul { justify-content: flex-start; }
}

.sf-subcategorias ul {
  display: flex;
  gap: var(--sf-esp-2);
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}

.sf-subcategoria {
  display: inline-flex;
  align-items: center;
  gap: var(--sf-esp-2);
  min-height: var(--sf-boton-s);
  padding: 0 var(--sf-esp-4);
  border: 1px solid var(--sf-borde-medio);
  border-radius: var(--sf-radio-redondo);
  background: var(--sf-superficie-base);
  color: var(--sf-texto-principal);
  font-size: var(--sf-cuerpo-s-tam);
  line-height: var(--sf-cuerpo-s-alto);
  text-decoration: none;
  white-space: nowrap;
}

.sf-subcategoria:hover {
  border-color: var(--sf-accion-primaria);
  color: var(--sf-accion-primaria);
}

.sf-subcategoria__total {
  font-size: var(--sf-etiqueta-tam);
  color: var(--sf-texto-secundario);
  font-variant-numeric: tabular-nums;
}

.sf-subcategoria--actual,
.sf-subcategoria--actual:hover {
  background: var(--sf-accion-primaria);
  border-color: var(--sf-accion-primaria);
  color: var(--sf-accion-inversa);
}

.sf-subcategoria--actual .sf-subcategoria__total { color: var(--sf-texto-inverso-suave); }

@media (max-width: 599px) {
  .sf-subcategorias ul {
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    padding-bottom: var(--sf-esp-2);
  }
}

/* --- Estructura ----------------------------------------------------------- */

.sf-catalogo {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sf-esp-8);
  align-items: start;
}

@media (min-width: 1280px) {
  /* El catálogo usa su propio ancho: con el general de 1200 y el sidebar
     encima, las tarjetas caían a 193px y la foto del señuelo dejaba de
     distinguirse por patrón de color. Ver la nota en tokens.css. */
  body.tax-product_cat .sf-contenido,
  body.post-type-archive-product .sf-contenido { max-width: var(--sf-catalogo-max); }

  .sf-catalogo { grid-template-columns: var(--sf-catalogo-sidebar) 1fr; }
}

/* --- Sidebar de filtros --------------------------------------------------- */

.sf-catalogo__filtros { min-width: 0; }

.sf-catalogo__filtros-cabecera,
.sf-catalogo__abrir-filtros { display: none; }

@media (min-width: 1280px) {
  /* Se queda a la vista al bajar: cambiar un filtro no obliga a subir hasta
     arriba. El desplazamiento deja pasar la barra fija del encabezado.

     Y va en su propia caja blanca con relleno, como las tarjetas de producto:
     antes flotaba sobre el gris de la página sin fondo, sin borde y sin
     relleno, y no se leía como un bloque. Pedido de Daniel del 02-09-2026.
     Mismo blanco y mismo borde que `.sf-producto`, para que la columna
     izquierda y la grilla se lean como la misma familia. */
  .sf-catalogo__filtros {
    position: sticky;
    top: calc(var(--sf-header-fijo-alto) + var(--sf-esp-4));
    max-height: calc(100vh - var(--sf-header-fijo-alto) - var(--sf-esp-8));
    display: flex;
    flex-direction: column;
    padding: var(--sf-esp-4);
    background: var(--sf-superficie-base);
    border: 1px solid var(--sf-borde-medio);
    border-radius: var(--sf-radio);
  }

  /* Una sola caja con líneas finas dentro, no una cajita por filtro: es lo
     aprobado en la propuesta. La fila de opción baja a 28px porque acá el
     puntero es un ratón; bajo 1280 el filtro es un cajón que se abre con el
     dedo y conserva los 44 del objetivo táctil. */
  .sf-catalogo__filtros .sf-filtro__opcion { min-height: 28px; }

  .sf-catalogo__filtros-cuerpo { overflow-y: auto; }

  .sf-catalogo__filtros-pie {
    padding-top: var(--sf-esp-4);
    border-top: 1px solid var(--sf-borde-sutil);
  }
}

.sf-catalogo__filtros-pie {
  display: flex;
  gap: var(--sf-esp-2);
  margin-top: var(--sf-esp-4);
}

.sf-catalogo__filtros-pie .sf-boton { flex: 1; }

/* --- Un grupo de filtro --------------------------------------------------- */

/* La separación entre bloques la pone UNA cosa: el relleno vertical, con la
   línea en medio. Antes había `margin-bottom: 24` y `padding-bottom: 24`, que
   se sumaban a 48px donde el artefacto deja 22. Es la cuarta vez que aparece
   este patrón en el proyecto; está anotado en el estado del desarrollo. */
.sf-filtro {
  margin: 0;
  padding: var(--sf-esp-3) 0;
  border: 0;
  border-bottom: 1px solid var(--sf-borde-sutil);
}

.sf-catalogo__filtros-cuerpo > .sf-filtro:first-child { padding-top: 0; }

/* `:last-child` y no `:last-of-type`: el grupo de disponibilidad es un div y
   los demás son fieldset, así que por tipo cada uno sería «el último» y todos
   perderían su separador. */
.sf-catalogo__filtros-cuerpo > .sf-filtro:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.sf-filtro__titulo {
  display: block;
  width: 100%;
  margin: 0 0 var(--sf-esp-2);
  padding: 0;
  font-size: var(--sf-etiqueta-tam);
  line-height: var(--sf-etiqueta-alto);
  font-weight: 600;
  letter-spacing: var(--sf-etiqueta-tracking);
  text-transform: uppercase;
  color: var(--sf-texto-principal);
}

.sf-filtro__ayuda {
  margin: var(--sf-esp-2) 0 0;
  font-size: var(--sf-cuerpo-s-tam);
  line-height: var(--sf-cuerpo-s-alto);
  color: var(--sf-texto-secundario);
}

.sf-filtro__lista {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sf-filtro__opcion {
  display: flex;
  align-items: center;
  gap: var(--sf-esp-2);
  min-height: var(--sf-alto-tactil);
  font-size: var(--sf-cuerpo-s-tam);
  line-height: var(--sf-cuerpo-s-alto);
  color: var(--sf-texto-principal);
  cursor: pointer;
}

.sf-filtro__opcion input[type="checkbox"] {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--sf-accion-primaria);
  cursor: pointer;
}

.sf-filtro__nombre {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}

.sf-filtro__conteo {
  flex: none;
  font-size: var(--sf-etiqueta-tam);
  color: var(--sf-texto-secundario);
  font-variant-numeric: tabular-nums;
}

/* La cola de opciones vive en un desplegable nativo: funciona sin JavaScript y
   el lector de pantalla lo anuncia solo. Es lo que hace que la marca no liste
   46 casillas ni el número 101 valores. */
.sf-filtro__mas > summary {
  min-height: var(--sf-alto-tactil);
  display: flex;
  align-items: center;
  font-size: var(--sf-cuerpo-s-tam);
  font-weight: 600;
  color: var(--sf-accion-primaria);
  cursor: pointer;
}

.sf-filtro__mas > summary:hover { color: var(--sf-accion-primaria-hover); }

/* --- Interruptor «Solo con stock» ----------------------------------------- */

.sf-interruptor {
  display: flex;
  align-items: center;
  gap: var(--sf-esp-3);
  min-height: var(--sf-alto-tactil);
  font-size: var(--sf-cuerpo-m-tam);
  font-weight: 600;
  color: var(--sf-texto-principal);
  cursor: pointer;
}

.sf-interruptor input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.sf-interruptor__pista {
  position: relative;
  flex: none;
  width: 44px;
  height: 24px;
  border-radius: var(--sf-radio-redondo);
  background: var(--sf-accion-desactivada);
  transition: background .15s ease;
}

.sf-interruptor__pista::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: var(--sf-radio-redondo);
  background: var(--sf-superficie-base);
  box-shadow: var(--sf-sombra-1);
  transition: transform .15s ease;
}

.sf-interruptor input:checked + .sf-interruptor__pista { background: var(--sf-accion-primaria); }
.sf-interruptor input:checked + .sf-interruptor__pista::after { transform: translateX(20px); }

.sf-interruptor input:focus-visible + .sf-interruptor__pista {
  outline: 2px solid var(--sf-foco);
  outline-offset: 2px;
}

/* --- Filtro de precio -----------------------------------------------------
   Dos campos y cuatro tramos, nunca un deslizador: el catálogo va de $1.600 a
   $1.100.000 y con esa escala el dedo no acierta un tramo útil.
   -------------------------------------------------------------------------- */

.sf-precio-campos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sf-esp-2);
}

.sf-precio-campo {
  display: flex;
  flex-direction: column;
  gap: var(--sf-esp-1);
  font-size: var(--sf-etiqueta-tam);
  color: var(--sf-texto-secundario);
}

.sf-precio-campo input {
  width: 100%;
  min-height: var(--sf-campo-alto);
  padding: 0 var(--sf-esp-3);
  border: 1px solid var(--sf-borde-campo);
  border-radius: var(--sf-radio);
  background: var(--sf-superficie-base);
  font-family: var(--sf-fuente-ui);
  font-size: var(--sf-cuerpo-s-tam);
  color: var(--sf-texto-principal);
}

.sf-precio-campo input:focus-visible {
  outline: 2px solid var(--sf-foco);
  outline-offset: 1px;
}

.sf-filtro__tramos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sf-esp-2);
  list-style: none;
  margin: var(--sf-esp-3) 0 0;
  padding: 0;
}

.sf-tramo {
  display: inline-flex;
  align-items: center;
  min-height: var(--sf-boton-s);
  padding: 0 var(--sf-esp-3);
  border: 1px solid var(--sf-borde-medio);
  border-radius: var(--sf-radio-redondo);
  font-size: var(--sf-cuerpo-s-tam);
  color: var(--sf-texto-principal);
  text-decoration: none;
  white-space: nowrap;
}

.sf-tramo:hover { border-color: var(--sf-accion-primaria); color: var(--sf-accion-primaria); }

.sf-tramo--activo,
.sf-tramo--activo:hover {
  background: var(--sf-accion-primaria);
  border-color: var(--sf-accion-primaria);
  color: var(--sf-accion-inversa);
}

/* --- Barra de resultados -------------------------------------------------- */

.sf-catalogo__resultados { min-width: 0; }

.sf-catalogo__barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sf-esp-4);
  flex-wrap: wrap;
  margin-bottom: var(--sf-esp-4);
  padding-bottom: var(--sf-esp-4);
  border-bottom: 1px solid var(--sf-borde-sutil);
}

.sf-catalogo__contador {
  margin: 0;
  font-size: var(--sf-cuerpo-s-tam);
  color: var(--sf-texto-secundario);
  font-variant-numeric: tabular-nums;
}

/* En el catálogo la barra manda el layout: se anulan los floats heredados. */
.sf-catalogo__barra .woocommerce-ordering { float: none; margin: 0; }

.sf-catalogo__barra .woocommerce-ordering select {
  min-height: var(--sf-boton-s);
  padding: 0 var(--sf-esp-3);
  border: 1px solid var(--sf-borde-campo);
  border-radius: var(--sf-radio);
  background: var(--sf-superficie-base);
  font-family: var(--sf-fuente-ui);
  font-size: var(--sf-cuerpo-s-tam);
  color: var(--sf-texto-principal);
}

/* --- Chips de filtros activos --------------------------------------------- */

.sf-chips {
  display: flex;
  align-items: center;
  gap: var(--sf-esp-2);
  flex-wrap: wrap;
  margin-bottom: var(--sf-esp-6);
}

.sf-chips .sf-etiqueta { margin-right: var(--sf-esp-2); }

.sf-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sf-esp-2);
  min-height: var(--sf-boton-s);
  padding: 0 var(--sf-esp-3);
  border: 1px solid var(--sf-borde-medio);
  border-radius: var(--sf-radio-redondo);
  background: var(--sf-superficie-hundida);
  color: var(--sf-texto-principal);
  font-size: var(--sf-cuerpo-s-tam);
  text-decoration: none;
}

.sf-chip:hover {
  border-color: var(--sf-accion-primaria);
  background: var(--sf-superficie-base);
  color: var(--sf-accion-primaria);
}

.sf-chips__limpiar { font-size: var(--sf-cuerpo-s-tam); color: var(--sf-texto-secundario); }

/* --- Grilla ---------------------------------------------------------------
   Las columnas salen del token: tokens.css lo baja a 3 en 1023 y a 2 en 599.
   El selector repite clase para ganarle a `ul.products.columns-4` de
   secciones.css sin usar !important.
   -------------------------------------------------------------------------- */

.sf-catalogo .sf-catalogo__resultados ul.products {
  grid-template-columns: repeat(var(--sf-productos-fila), minmax(0, 1fr));
  gap: var(--sf-esp-3);
}

@media (min-width: 600px) {
  .sf-catalogo .sf-catalogo__resultados ul.products { gap: var(--sf-esp-6); }
}

/* --- Tarjeta de producto --------------------------------------------------
   Estas reglas no se limitan al catálogo a propósito: es la misma tarjeta de
   los rieles de la portada, de los relacionados y de la búsqueda. Una tarjeta,
   un comportamiento.
   -------------------------------------------------------------------------- */

/* Toda la tarjeta es un enlace y no hay botón: con 76% del catálogo variable,
   el botón que más aparecería es el que no compra nada. */
.sf-producto__enlace {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

.sf-producto {
  border: 1px solid var(--sf-borde-medio);
  border-radius: var(--sf-radio);
  background: var(--sf-superficie-base);
  overflow: hidden;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

/* La foto es cuadrada y ocupa el ancho completo: es el dato que se compara.
   `min-height: 0` no es adorno: la tarjeta es un contenedor flex y sin eso el
   alto mínimo automático del ítem lo estira al alto de la imagen y la
   proporción 1:1 no se cumple. */
.sf-producto__foto {
  flex: none;
  min-height: 0;
  aspect-ratio: 1 / 1;
  padding: var(--sf-esp-3);
}

/* Los dos selectores siguientes dicen lo mismo. El largo existe para ganarle a
   `.woocommerce ul.products li.product a img`, que le pone alto automático y un
   margen inferior de 1em a toda imagen de la grilla. El corto es para donde esa
   regla no llega: los rieles de la portada y los relacionados. */
.sf-producto__foto img,
.woocommerce ul.products li.product .sf-producto__foto img {
  width: 100%;
  height: 100%;
  margin: 0;
  object-fit: contain;
}

/* --- Producto sin foto ---------------------------------------------------- */

/* 37 productos publicados no tienen imagen destacada. Donde WooCommerce ponía su
   ícono de imagen rota va este marco, que pide la sección 7.4 de la dirección de
   diseño: superficie hundida y el logotipo al 30%.

   El logo todavía es texto, y ese texto trae tamaños fijos desde componentes.css
   (46px y 11px), que en una miniatura de 72px no caben. Por eso el marco es un
   contenedor de consulta y el logo se mide en `cqw`: un factor relativo al ancho
   del marco, no un tamaño nuevo. Así el mismo marcado sirve en la miniatura del
   carro, en la tarjeta de la grilla y en la ficha, sin una variante por sitio. */
.sf-sinfoto {
  container-type: inline-size;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  border-radius: var(--sf-radio);
  background: var(--sf-superficie-hundida);
  overflow: hidden;
}

/* El marco casi siempre cuelga del enlace al producto. Un `text-decoration` en
   el propio marco no sirve: el subrayado lo dibuja el enlace y se propaga hacia
   adentro, así que hay que apagarlo en el enlace. Sin esto, una raya cruza el
   logotipo de lado a lado. */
a:has(.sf-sinfoto) { text-decoration: none; }

.sf-sinfoto .sf-marca { opacity: var(--sf-sinfoto-opacidad); }

/* El sello del cliente cuando está cargado. Mismo peso visual que el logotipo
   de texto: se ve que hay algo, no compite con las fotos de al lado. */
.sf-sinfoto__logo {
  width: 63cqw;
  max-width: 63%;
  height: auto;
  opacity: var(--sf-sinfoto-opacidad);
}

/* Los tres valores guardan la proporción del logotipo del encabezado (46px de
   sigla, 11px de bajada, 3px de separación) y dejan la palabra en un 63% del
   ancho del marco, con aire a los lados. */
.sf-sinfoto .sf-marca__sigla {
  font-size: 11.5cqw;
  line-height: .95;
}

.sf-sinfoto .sf-marca__bajada {
  font-size: 2.75cqw;
  margin-top: .75cqw;
}

/* Bajo 88px de marco la bajada queda ilegible y solo ensucia: se muestra la
   sigla sola, y como queda sitio libre se la sube un punto. */
@container (max-width: 88px) {
  .sf-sinfoto .sf-marca__bajada { display: none; }
  .sf-sinfoto .sf-marca__sigla { font-size: 15cqw; }
}

.sf-producto__cuerpo {
  gap: var(--sf-esp-1);
  padding: var(--sf-esp-3);
  border-top: 0;
}

/* Mismo caso: WooCommerce fuerza `font-size: 1em` y relleno vertical a
   cualquier h3 dentro de la grilla. */
.sf-producto__nombre,
.woocommerce ul.products li.product .sf-producto__nombre {
  margin: 0;
  padding: 0;
  font-size: var(--sf-cuerpo-s-tam);
  /* El nombre de un producto no es prosa: va con el interlineado de componente.
     Con `--sf-cuerpo-s-alto` (1,55) la reserva de dos líneas medía 43px por
     tarjeta, contra los 16px del mockup, y hay 24 tarjetas por página. */
  line-height: var(--sf-alto-compacto);
  font-weight: 500;
  /* Dos líneas siempre, ocupadas o no: si no, las tarjetas de una misma fila
     quedan con el precio a distinta altura. */
  min-height: calc(var(--sf-cuerpo-s-tam) * var(--sf-alto-compacto) * 2);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* El precio va con el interlineado de cifra: son números, no tienen
   descendentes, y con el de prosa se ven más sueltos que las palabras de al lado. */
.sf-producto__precio {
  /* Sin `margin-top`: se sumaba al `gap` del cuerpo y dejaba 8px entre el
     nombre y el precio, contra los 4,6 del artefacto. */
  font-size: var(--sf-cuerpo-m-tam);
  line-height: var(--sf-alto-cifra);
  font-weight: 700;
}

/* El rango («$200.000 a $400.000») baja un punto: es una cadena larga y a
   tamaño de precio único desarma la fila. Son 89 productos, el 36%. */
.sf-producto--rango .sf-producto__precio {
  font-size: var(--sf-cuerpo-s-tam);
  font-weight: 600;
}

/* Línea de variaciones y stock. Reserva su alto siempre, aunque el producto no
   la tenga, para que las tarjetas de la fila terminen parejas. */
.sf-producto__variaciones {
  display: block;
  min-height: calc(var(--sf-cuerpo-s-tam) * var(--sf-alto-compacto));
  /* Sin `margin-top`: el `gap` del cuerpo ya separa. Ver la nota en
     secciones.css, junto a `.sf-producto__accion`. */
  font-size: var(--sf-cuerpo-s-tam);
  line-height: var(--sf-alto-compacto);
  color: var(--sf-texto-secundario);
}

/* «6 colores · 4 disponibles». El punto es decorativo: separa sin dibujar una
   línea y sin gastar una palabra. */
.sf-producto__disponibles { color: var(--sf-stock-disponible); font-weight: 600; }
.sf-producto__disponibles::before { content: " · "; color: var(--sf-texto-secundario); font-weight: 400; }

.sf-producto__pocas { color: var(--sf-aviso); font-weight: 600; }

/* La línea de estado cuando el producto está agotado. Antes era
   `.sf-producto__stock--agotado`, de cuando eran dos líneas. */
.sf-producto__variaciones--agotado { color: var(--sf-stock-agotado); }

/* WooCommerce mete la suya en un `<p>` con margen propio. */
.sf-producto__variaciones p { margin: 0; display: inline; }

/* Agotado: el 55% de opacidad y el precio tachado son las dos señales, sin
   esconder el producto. Solo entran acá los 40 productos con todo agotado y
   los simples sin stock; el stock mixto (128 productos) no se opaca. */
.sf-producto--agotado .sf-producto__foto img { opacity: var(--sf-agotado-opacidad); }

.sf-producto--agotado .sf-producto__precio {
  color: var(--sf-precio-tachado);
  text-decoration: line-through;
}

@media (hover: hover) {
  .sf-producto:hover {
    transform: translateY(-2px);
    border-color: var(--sf-borde-campo);
    box-shadow: var(--sf-sombra-2);
  }
}

/* En el teléfono no hay cursor y la tarjeta se queda quieta. El borde se
   mantiene: con dos por fila y fondos claros, sin borde no se distingue dónde
   termina una y empieza la otra. */
@media (max-width: 599px) {
  .sf-producto__cuerpo { padding: var(--sf-esp-2); }
  .sf-producto__foto { padding: var(--sf-esp-2); }
}

/* --- Paginación ----------------------------------------------------------- */

.woocommerce-pagination { margin-top: var(--sf-esp-8); }

.woocommerce-pagination ul {
  display: flex;
  gap: var(--sf-esp-2);
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}

.woocommerce-pagination a,
.woocommerce-pagination span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: var(--sf-boton-m);
  height: var(--sf-boton-m);
  padding: 0 var(--sf-esp-2);
  border: 1px solid var(--sf-borde-medio);
  border-radius: var(--sf-radio);
  color: var(--sf-texto-principal);
  font-size: var(--sf-cuerpo-s-tam);
  text-decoration: none;
}

.woocommerce-pagination a:hover { border-color: var(--sf-accion-primaria); color: var(--sf-accion-primaria); }

.woocommerce-pagination .current {
  background: var(--sf-accion-primaria);
  border-color: var(--sf-accion-primaria);
  color: var(--sf-accion-inversa);
  font-weight: 600;
}

/* --- Catálogo vacío ------------------------------------------------------- */

.sf-catalogo__vacio {
  padding: var(--sf-esp-12) 0;
  max-width: 560px;
}

.sf-catalogo__vacio h2 { margin: 0 0 var(--sf-esp-3); }
.sf-catalogo__vacio p { color: var(--sf-texto-secundario); }
.sf-catalogo__vacio strong { color: var(--sf-texto-principal); }

.sf-catalogo__vacio-acciones {
  display: flex;
  gap: var(--sf-esp-3);
  flex-wrap: wrap;
  margin-top: var(--sf-esp-6);
}

.sf-vacio__pistas { margin-top: var(--sf-esp-8); }

.sf-vacio__pistas ul {
  display: flex;
  gap: var(--sf-esp-2);
  flex-wrap: wrap;
  list-style: none;
  margin: var(--sf-esp-3) 0 0;
  padding: 0;
}

/* --- Filtros bajo 1280: panel deslizante ---------------------------------
   Entre 1024 y 1279 la grilla usa todo el ancho y los filtros viven tras el
   botón «Filtrar». El sidebar permanente solo aparece cuando cabe sin comerse
   la foto.
   -------------------------------------------------------------------------- */

@media (max-width: 1279px) {
  /* La barra de filtros queda fija al bajar: no hay que subir hasta arriba
     para cambiar algo. */
  .sf-catalogo__abrir-filtros {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sf-esp-2);
    width: 100%;
    min-height: var(--sf-alto-tactil);
    border: 1px solid var(--sf-accion-primaria);
    border-radius: var(--sf-radio);
    background: var(--sf-superficie-base);
    color: var(--sf-accion-primaria);
    font-family: var(--sf-fuente-ui);
    font-size: var(--sf-cuerpo-s-tam);
    font-weight: 600;
    box-shadow: var(--sf-sombra-1);
    cursor: pointer;
  }

  .sf-catalogo__abrir-total {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 var(--sf-esp-1);
    border-radius: var(--sf-radio-redondo);
    background: var(--sf-accion-acento);
    color: var(--sf-accion-inversa);
    font-size: var(--sf-etiqueta-tam);
  }

  .sf-catalogo__filtros {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    flex-direction: column;
    background: var(--sf-superficie-base);
    transform: translateX(-100%);
    transition: transform .2s ease;
    visibility: hidden;
  }

  .sf-catalogo__filtros--abierto { transform: translateX(0); visibility: visible; }

  .sf-catalogo__filtros-cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sf-esp-4);
    padding: var(--sf-esp-3) var(--sf-esp-4);
    border-bottom: 1px solid var(--sf-borde-sutil);
  }

  .sf-catalogo__cerrar-filtros {
    width: var(--sf-alto-tactil);
    height: var(--sf-alto-tactil);
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 0;
    color: var(--sf-texto-marca);
    cursor: pointer;
  }

  .sf-catalogo__filtros-cuerpo {
    flex: 1;
    overflow-y: auto;
    padding: var(--sf-esp-4);
  }

  /* Los botones de abajo quedan siempre a la vista. */
  .sf-catalogo__filtros-pie {
    margin-top: 0;
    padding: var(--sf-esp-4);
    border-top: 1px solid var(--sf-borde-sutil);
    background: var(--sf-superficie-calida);
  }
}