/* ===========================================================================
   Paracas: catálogo

   Se encola sola en /productos/ y en los archivos de taxonomía de producto —
   inc/enqueue.php la busca por el nombre de la vista— y va DESPUÉS de
   components.css, así que puede afinar sin pelearse por especificidad.
   ======================================================================== */

.paracas-catalogo {
  display: grid;
  gap: var(--space-6);
}

/* La rejilla necesita poder encogerse por debajo del ancho de su contenido, o
   el `1fr` se planta en el tamaño de las cards y el rail no cabe. */
.paracas-catalogo__grid {
  min-inline-size: 0;
}

/* ---------------------------------------------------------------------------
   El rail
   ------------------------------------------------------------------------ */
.paracas-filtros--rail {
  display: grid;
  gap: var(--space-4);
  align-content: start;
  min-inline-size: 0;
  /* La regla base de .paracas-filtros deja 40 px por debajo, que era el aire
     entre la barra y la rejilla. En un rail sobra. */
  margin-block-end: 0;
}

.paracas-filtros--rail .paracas-filtros__form {
  display: grid;
  gap: var(--space-5);
}

/* La etiqueta deja de ir en línea con los chips: en 280 px de ancho, un
   `flex` en fila dejaba el grupo en una columna de un chip. */
.paracas-filtros--rail .paracas-filtros__grupo {
  display: grid;
  gap: var(--space-2);
  justify-items: start;
}

.paracas-filtros--rail .paracas-filtros__chips {
  gap: var(--space-2);
}

/* Los chips del rail se angostan: 44 px de alto se conservan —el target
   trabaja con guantes— pero el relleno lateral baja para que quepan dos por
   fila en una columna de 280 px.

   Aquí ponía que era «para que Nitrocelulosa quepa sin partirse». Ya no: al
   retirar Química del rail, el chip más largo pasó de 13 caracteres a 9
   («Brillante»). La regla se queda porque la columna sigue siendo estrecha y
   los chips compactos son mejores ahí, pero el motivo era otro y un comentario
   que da una razón falsa estorba más que no tener ninguno. */
.paracas-filtros--rail .paracas-chip {
  padding-inline: var(--space-4);
  font-size: var(--t-small);
}

.paracas-filtros__resumen {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  justify-content: space-between;
  min-block-size: var(--tactil);
  padding-inline: var(--space-5);
  border: 2px solid var(--color-borde-fuerte);
  border-radius: var(--radio-pill);
  color: var(--color-enlace);
  font-size: 0.9375rem;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

/* Safari pinta su propio triángulo si no se le quita el marcador. */
.paracas-filtros__resumen::-webkit-details-marker { display: none; }

.paracas-filtros__resumen .paracas-icono {
  transition: rotate var(--duracion) var(--curva);
  rotate: 90deg;
}

.paracas-filtros__caja[open] .paracas-filtros__resumen .paracas-icono {
  rotate: -90deg;
}

/* Los activos, arriba y siempre visibles: van fuera del <details> a propósito.
   La regla base les pone un filete SUPERIOR, que ahí arriba no pinta nada. */
.paracas-filtros--rail .paracas-filtros__activos {
  padding-block: 0 var(--space-4);
  border-block: 0;
  border-block-end: 1px solid var(--color-borde);
}

/* ---------------------------------------------------------------------------
   Dos columnas desde 901 px

   Por debajo, el rail es un bloque plegable sobre la rejilla; filtros.js le
   quita el `open`. Sin JavaScript se queda abierto, que es como estaba.

   901 y no 900: el resto del tema corta el móvil en `max-width: 900`, así que
   con 900 aquí, a 900 px exactos aplicaban las DOS ramas y el catálogo se
   partía en columnas mientras la cabecera seguía en modo móvil.
   ------------------------------------------------------------------------ */
@media (min-width: 901px) {
  .paracas-catalogo {
    gap: var(--space-8);
    grid-template-columns: 280px minmax(0, 1fr);
    align-items: start;
  }

  .paracas-filtros--rail {
    position: sticky;
    /* La cabecera de este tema NO es pegajosa, así que el rail no tiene nada
       encima de lo que apartarse: se para directamente contra el borde. */
    inset-block-start: var(--space-5);
    /* Con muchos atributos el rail podría pasarse de alto de ventana, y un
       pegajoso más alto que la ventana deja de pegarse. Con scroll propio no. */
    max-block-size: calc(100vh - var(--space-8));
    overflow-y: auto;
  }

  /* En escritorio no hay nada que plegar: el resumen sobra y el panel se
     comporta como un bloque cualquiera. */
  .paracas-filtros__resumen {
    display: none;
  }
}

/* La rejilla no necesita reglas nuevas: components.css ya la baja a dos
   columnas por debajo de 1200 px y a una por debajo de 640, que con el rail
   puesto sigue siendo el reparto correcto. */