/* =================================================================
   JRI Core — grilla de productos con filtros
   Reutiliza las clases de tarjeta y filtros del diseño estático.
   ================================================================= */

/* =================================================================
   CARRUSEL DE PRODUCTOS  (portada: «Promociones»)
   Una sola fila que se desplaza a lo ancho. El desplazamiento es de
   CSS: con el dedo o el trackpad funciona sin JavaScript. Las flechas
   son un añadido para el ratón y `carrusel.js` las revela.
   ================================================================= */
.jri-carrusel { position: relative; }

.jri-carrusel-carril {
  display: flex;
  gap: var(--space-6);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  /* Aire para la sombra al pasar el ratón, que si no la recorta el scroll. */
  padding: var(--space-2) 2px var(--space-4);
}
@media (prefers-reduced-motion: reduce) {
  .jri-carrusel-carril { scroll-behavior: auto; }
}

.jri-carrusel-carril:focus-visible {
  outline: 2px solid var(--brand-gold);
  outline-offset: 2px;
}

/* Ancho fijo, no en porcentaje: en el contenedor de 1400 entran cuatro
   tarjetas del tamaño de la rejilla y **asoma la quinta**, que es la única
   pista de que la fila sigue. `flex: none` para que no se repartan el hueco. */
.jri-carrusel-carril .jri-product-card {
  flex: none;
  width: 300px;
  scroll-snap-align: start;
}

.jri-carrusel-nav {
  position: absolute;
  top: 40%;
  z-index: 2;
  display: none;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--gray-150);
  border-radius: 50%;
  background: var(--white);
  color: var(--near-black);
  box-shadow: var(--shadow-card);
  cursor: pointer;
  transition: background .2s, color .2s, opacity .2s;
}
/* Solo se enseñan cuando el guion ha enganchado **y** el carril desborda:
   con pocos productos no hay nada que desplazar. */
.jri-carrusel--listo .jri-carrusel-nav { display: grid; }
.jri-carrusel-nav--prev { left: calc(var(--space-5) * -1); }
.jri-carrusel-nav--next { right: calc(var(--space-5) * -1); }
.jri-carrusel-nav:hover { background: var(--brand-yellow); }
.jri-carrusel-nav:disabled { opacity: .35; cursor: default; }
.jri-carrusel-nav:disabled:hover { background: var(--white); }

@media (max-width: 1500px) {
  /* Pegadas al borde interior: fuera del contenedor ya no hay sitio. */
  .jri-carrusel-nav--prev { left: var(--space-1); }
  .jri-carrusel-nav--next { right: var(--space-1); }
}

@media (max-width: 767px) {
  .jri-carrusel-carril { gap: var(--space-4); }
  .jri-carrusel-carril .jri-product-card { width: 74%; }
  /* Con el dedo las flechas sobran y taparían media tarjeta. */
  .jri-carrusel--listo .jri-carrusel-nav { display: none; }
}

.jri-grid-layout {
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: var(--space-7);
  align-items: start;
}

/* Sin panel de filtros no hay dos columnas: si no, la grilla heredaría los
   250 px de la primera y saldría estrujada. */
.jri-grid-layout:not(:has(.jri-grid-filtros)) { grid-template-columns: 1fr; }

.jri-grid-main { min-width: 0; }

/* ---------------- Panel de filtros ----------------
   En el Figma es una tarjeta gris con esquinas redondeadas, un rótulo
   «Filtrar por:» arriba y cada grupo con su título y una línea fina debajo.
   El chevrón se mantiene aunque el diseño no lo enseñe: es la única pista de
   que los grupos se pliegan, y en móvil hace falta. */
.jri-grid-filtros {
  /* **Sin `position: sticky`.** El panel es más alto que la ventana en cuanto
     la categoría tiene varios atributos —calzado saca doce grupos—, y fijado
     no hay scroll que llegue a su parte de abajo: se queda anclado y el final
     de la lista es inalcanzable. Suelto se recorre con la página. */
  background: var(--gray-100);
  border-radius: var(--radius-2xl);
  padding: var(--space-5);
  align-self: start;
}

.jri-filtros-titulo {
  margin: 0 0 var(--space-2);
  font-size: 15px;
  font-weight: 700;
  color: var(--near-black);
}

/* La línea va bajo el título del grupo, no bajo el grupo entero. */
.jri-filter-bar { border-bottom: 0; }
.jri-filter-bar summary { border-bottom: 1px solid var(--gray-150); }

.jri-filter-bar summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-4) 0 var(--space-2);
  font-size: 15px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .4px;
}

.jri-filter-bar summary::-webkit-details-marker { display: none; }

/* Chevrón dibujado con bordes en vez del carácter «⌄», que cada tipografía
   pinta a una altura distinta y se veía torcido. */
.jri-filter-bar summary::after {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  margin-right: 2px;
  border-right: 2px solid var(--near-black);
  border-bottom: 2px solid var(--near-black);
  transform: translateY(-2px) rotate(45deg);
  transition: transform .2s;
}

.jri-filter-bar[open] summary::after { transform: translateY(2px) rotate(-135deg); }

.jri-filter-options {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-bottom: var(--space-5);
  max-height: 260px;
  overflow-y: auto;
}

.jri-filter-options label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted-2);
  cursor: pointer;
}

.jri-filter-options input { accent-color: var(--brand-gold); flex: none; }

.jri-filter-precio { flex-direction: row; gap: var(--space-3); }

.jri-filter-precio input {
  width: 100%;
  font-family: inherit;
  font-size: 13px;
  padding: 8px 10px;
  border: 1px solid var(--gray-150);
  border-radius: var(--radius-md);
}

.jri-filter-stock { padding-block: var(--space-4); font-size: 13px; }

/* El envoltorio es una columna flex para poder reordenar sus bloques por
   ancho: el banner va sobre el título en escritorio y entre el título y las
   pastillas en móvil. */
.jri-grid-wrap { display: flex; flex-direction: column; }

/* Escritorio: el banner sube por encima de la cabecera.
   El selector es de hijo directo: el banner tiene que salir de `grilla.php`
   como hermano de la cabecera, no dentro de ella. */
.jri-grid-wrap > .jri-term-banner { order: -1; }

/* El banner es una sección que también sirve suelta, así que trae su propio
   `.jri-container`. Aquí ya viene dentro del de la sección, y un contenedor
   dentro de otro se queda al 95 % —y al doble de relleno en móvil—, así que
   el banner salía más estrecho que la rejilla de debajo. */
.jri-grid-wrap > .jri-term-banner > .jri-container {
  width: 100%;
  max-width: none;
  padding-inline: 0;
}

/* Los interruptores de los paneles no ocupan sitio. */
.jri-panel-toggle,
.jri-panel-fondo,
.jri-panel-cerrar,
.jri-mobile-acciones { display: none; }

/* ---------------- Cabecera de la categoría ----------------
   Nombre y recuento a la izquierda, accesos a las subcategorías a la derecha.
   La columna izquierda mide lo mismo que el panel de filtros de abajo, así las
   dos quedan alineadas en el mismo eje. */
.jri-cat-header {
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: var(--space-6);
  align-items: center;
  margin-bottom: var(--space-6);
}

/* Sin subcategorías el título se queda con la fila entera. */
.jri-cat-header--solo { grid-template-columns: 1fr; }

.jri-cat-title {
  margin: 0;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.25;
  text-transform: uppercase;
  letter-spacing: .3px;
  color: var(--near-black);
}

.jri-cat-count {
  margin: var(--space-2) 0 0;
  font-style: italic;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-muted-2);
}

/* Dentro de la cabecera las pastillas ya no separan por abajo: lo hace la
   propia cabecera. */
.jri-cat-header .jri-subcats { margin-bottom: 0; }

/* ---------------- Barra de orden ---------------- */
.jri-cat-toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-6);
  background: var(--gray-100);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-5);
}

.jri-toolbar-rotulo { font-size: 14px; font-weight: 700; color: var(--near-black); }

/* Opciones de texto, no un desplegable. La activa se marca en negro y con
   subrayado; el resto en gris. */
.jri-orden-opts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  align-items: center;
}

.jri-orden-opt {
  border: 0;
  background: none;
  padding: 0;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-muted-2);
  cursor: pointer;
  transition: color .15s;
}
.jri-orden-opt:hover { color: var(--near-black); }

.jri-orden-opt.is-activa {
  color: var(--near-black);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.jri-orden-opt:focus-visible {
  outline: 2px solid var(--brand-gold);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* Queda de la versión con desplegable: aún la usa la búsqueda si alguien fija
   el campo a mano. */
.jri-ordering {
  font-family: inherit;
  font-size: 14px;
  padding: 10px 14px;
  border: 1px solid var(--gray-150);
  border-radius: var(--radius-md);
  background: var(--white);
}

@media (max-width: 1100px) { .jri-products-grid { grid-template-columns: repeat(3, 1fr); } }

/* Por debajo de 980 el título deja de compartir fila con las pastillas. */
@media (max-width: 980px) { .jri-cat-header { grid-template-columns: 1fr; } }

@media (max-width: 980px) {
  .jri-grid-layout { grid-template-columns: 1fr; }

  .jri-filter-options { max-height: none; }

}

@media (max-width: 767px) { .jri-products-grid { grid-template-columns: repeat(2, 1fr); } }

@media (max-width: 500px) { .jri-products-grid { grid-template-columns: 1fr; } }

/* ---- Filtro jerárquico ---- */
.jri-filter-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted-2);
  cursor: pointer;
  line-height: 1.4;
}

/* Casilla propia: cuadrada, borde gris y marca amarilla sobre negro, como en
   el Figma. La nativa salía con el azul del sistema. `appearance: none` no
   afecta a `catalogo.js`, que sigue leyendo `.checked`. */
.jri-filter-opt input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  width: 18px;
  height: 18px;
  margin: 0;
  border: 1px solid var(--gray-150);
  border-radius: var(--radius-sm);
  background: var(--white);
  cursor: pointer;
  transition: background .15s, border-color .15s;
}

.jri-filter-opt input[type="checkbox"]:hover { border-color: var(--dark-2); }

.jri-filter-opt input[type="checkbox"]:checked {
  background: var(--near-black);
  border-color: var(--near-black);
}

.jri-filter-opt input[type="checkbox"]:checked::after {
  content: "";
  display: block;
  width: 4px;
  height: 8px;
  margin: 2px auto 0;
  border-right: 2px solid var(--brand-yellow);
  border-bottom: 2px solid var(--brand-yellow);
  transform: rotate(45deg);
}

.jri-filter-opt input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--brand-gold);
  outline-offset: 2px;
}

.jri-filter-opt--padre { font-weight: 700; color: var(--near-black); }

.jri-filter-opt--n1 { padding-left: 18px; }

.jri-filter-opt--n2 { padding-left: 34px; }

.jri-filter-opt--n3 { padding-left: 50px; }

.jri-filter-opt--n1::before,
.jri-filter-opt--n2::before,
.jri-filter-opt--n3::before {
  content: "";
  position: absolute;
  margin-left: -12px;
  width: 6px;
  height: 1px;
  background: var(--gray-150);
}


/* =================================================================
   Accesos a las subcategorías
   Fila de pastillas blancas sobre el fondo de la página. Solo se pinta
   en el archivo de una categoría con hijas.
   ================================================================= */
.jri-subcats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.jri-subcat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  min-height: 118px;
  padding: var(--space-4);
  background: var(--white);
  border: 1px solid var(--gray-150);
  border-radius: var(--radius-lg);
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  color: var(--near-black);
  transition: transform .2s, box-shadow .2s;
}
.jri-subcat:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card);
  border-color: var(--brand-yellow);
}

.jri-subcat-ico { display: block; line-height: 0; }
.jri-subcat-ico img { width: 52px; height: 52px; object-fit: contain; }

/* Sin miniatura la pastilla se queda con el nombre solo. Hoy es el caso de
   las 37 subcategorías: el campo «Miniatura» del término está vacío. */
.jri-subcat--sin-icono { min-height: 86px; }

@media (max-width: 767px) {
  /* En móvil la fila se arrastra, igual que los relacionados de la ficha. */
  .jri-subcats {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    padding-bottom: var(--space-2);
  }
  .jri-subcat { flex: 0 0 46%; scroll-snap-align: start; }
}


/* =================================================================
   Paginación
   No existía **ninguna** regla: los números salían como botones del
   navegador. Se mantiene la paginación en vez del «cargar más» del
   diseño porque el cargar más deja sin URL a la página 3 y con ella
   al rastreo de las 1.353 URLs indexadas.
   ================================================================= */
.jri-paginacion-bloque {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-7);
}

.jri-mostrando {
  margin: 0;
  font-size: 13px;
  color: var(--text-muted-2);
}

.jri-pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
}

.jri-page {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 10px;
  border: 1px solid var(--gray-150);
  border-radius: var(--radius-md);
  background: var(--white);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--near-black);
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.jri-page:hover { border-color: var(--near-black); }

.jri-page--current {
  background: var(--near-black);
  border-color: var(--near-black);
  color: var(--brand-yellow);
  cursor: default;
}

.jri-page:focus-visible {
  outline: 2px solid var(--brand-gold);
  outline-offset: 2px;
}

/* =================================================================
   Otras categorías
   Panel gris con la tira de accesos. Reutiliza `.jri-subcat`, que ya
   define la pastilla: aquí solo cambia el envoltorio.
   ================================================================= */
.jri-otras-cats {
  margin-top: var(--space-8);
  padding: var(--space-5);
  background: var(--gray-100);
  border-radius: var(--radius-2xl);
}

.jri-otras-cats-titulo {
  margin: 0 0 var(--space-4);
  font-size: 15px;
  font-weight: 700;
  color: var(--near-black);
}

/* Tira que se arrastra: son 24 categorías y en rejilla ocuparían media
   pantalla. `scroll-snap` y sin JavaScript, igual que los relacionados
   de la ficha de producto. */
.jri-subcats--tira {
  display: flex;
  gap: var(--space-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  padding-bottom: var(--space-3);
  margin-bottom: 0;
}
.jri-subcats--tira .jri-subcat {
  flex: 0 0 168px;
  scroll-snap-align: start;
  font-size: 13px;
}

/* =================================================================
   Productos relacionados de la categoría
   ================================================================= */
.jri-cat-related { margin-top: var(--space-8); }

.jri-cat-related-titulo {
  margin: 0 0 var(--space-4);
  font-size: 15px;
  font-weight: 700;
  color: var(--near-black);
}

/* Seis por fila en el diseño; en pantallas menores caben menos. */
.jri-products-grid--tira { grid-template-columns: repeat(6, 1fr); }

@media (max-width: 1400px) { .jri-products-grid--tira { grid-template-columns: repeat(5, 1fr); } }
@media (max-width: 1100px) { .jri-products-grid--tira { grid-template-columns: repeat(4, 1fr); } }

@media (max-width: 767px) {
  /* En móvil pasa a tira, como los relacionados de la ficha. */
  .jri-products-grid--tira {
    display: flex;
    gap: var(--space-4);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    padding-bottom: var(--space-3);
  }
  .jri-products-grid--tira .jri-product-card {
    flex: 0 0 62%;
    scroll-snap-align: start;
  }

  .jri-subcats--tira .jri-subcat { flex: 0 0 46%; }
}


/* =================================================================
   Móvil — orden vertical y paneles laterales
   ================================================================= */
@media (max-width: 980px) {
  /* `display: contents` disuelve la cabecera para que su título y sus
     pastillas se ordenen como hermanos del banner. Sin esto no había forma
     de meter el banner ENTRE los dos. */
  .jri-cat-header { display: contents; }

  .jri-cat-header-info      { order: 1; margin-bottom: var(--space-4); }
  .jri-grid-wrap > .jri-term-banner { order: 2; }
  .jri-cat-header .jri-subcats { order: 3; margin-bottom: var(--space-5); }
  .jri-mobile-acciones      { order: 4; }
  .jri-grid-layout          { order: 5; }

  /* Estos dos **necesitan** su `order` explícito: en un contenedor flex, lo que
     no lo lleva vale 0 y se coloca ANTES de todo lo numerado. Sin esto, «otras
     categorías» y los relacionados saltaban al principio de la página. */
  .jri-otras-cats  { order: 6; }
  .jri-cat-related { order: 7; }

  /* ---- Barra de acciones ---- */
  .jri-mobile-acciones {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
    margin-bottom: var(--space-5);
  }

  .jri-accion-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    height: 46px;
    border: 1px solid var(--gray-150);
    border-radius: var(--radius-md);
    background: var(--white);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .3px;
    color: var(--near-black);
    cursor: pointer;
    user-select: none;
  }
  .jri-accion-btn:active { background: var(--gray-100); }

  /* ---- Los dos paneles ---- */
  .jri-grid-filtros,
  .jri-cat-toolbar {
    position: fixed;
    top: 0;
    bottom: 0;
    z-index: 1000;
    width: min(86vw, 340px);
    margin: 0;
    border-radius: 0;
    /* `100dvh` y no `100vh`: en el móvil la barra del navegador aparece y
       desaparece, y con `100vh` el panel se pasa de alto y su parte de abajo
       queda fuera de la pantalla sin forma de alcanzarla. */
    height: 100vh;
    height: 100dvh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
    transition: transform .25s ease;
  }

  /* -----------------------------------------------------------------
     Bloquear el desplazamiento de la página mientras hay un panel abierto.

     Sin esto el gesto se lo lleva la página de detrás: el panel está fijo,
     así que no se mueve, y parece que el desplazamiento no funciona cuando
     lo que pasa es que se está moviendo otra cosa. Con la página quieta, el
     gesto va al panel, que es el único que puede desplazarse.
     ----------------------------------------------------------------- */
  html:has( .jri-panel-toggle:checked ),
  body:has( .jri-panel-toggle:checked ) {
    overflow: hidden;
  }

  .jri-grid-filtros { left: 0;  transform: translateX(-100%); }
  .jri-cat-toolbar  { right: 0; transform: translateX(100%); background: var(--gray-100); }

  #jri-panel-filtros:checked ~ .jri-grid-layout .jri-grid-filtros,
  #jri-panel-orden:checked   ~ .jri-grid-layout .jri-cat-toolbar { transform: none; }

  /* El fondo oscuro también cierra al tocarlo. */
  .jri-panel-fondo {
    position: fixed;
    inset: 0;
    z-index: 999;
    background: rgba(10, 10, 10, .45);
  }
  #jri-panel-filtros:checked ~ .jri-panel-fondo--filtros,
  #jri-panel-orden:checked   ~ .jri-panel-fondo--orden { display: block; }

  .jri-panel-cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
  }

  /* ---- Aspecto del panel de filtros en móvil ----
     El Figma lo pinta sobre blanco y con cada grupo en su tarjeta: gris
     cuando está plegado, blanco con borde cuando está abierto. Es otro
     tratamiento que el de la columna de escritorio, y así viene en el
     diseño. */
  .jri-grid-filtros {
    background: var(--white);
    padding: var(--space-5) var(--space-4) var(--space-8);
    box-shadow: 0 0 40px rgba(10, 10, 10, .18);
  }

  .jri-grid-filtros .jri-filtros-titulo {
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: .5px;
  }

  .jri-panel-cabecera { margin-bottom: var(--space-5); }

  .jri-grid-filtros .jri-filter-bar {
    margin-bottom: var(--space-3);
    border: 1px solid transparent;
    border-radius: var(--radius-lg);
    background: var(--gray-100);
    transition: background .15s, border-color .15s;
  }

  .jri-grid-filtros .jri-filter-bar[open] {
    background: var(--white);
    border-color: var(--gray-150);
  }

  .jri-grid-filtros .jri-filter-bar summary {
    border-bottom: 0;
    padding: var(--space-4);
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--near-black);
  }

  .jri-grid-filtros .jri-filter-options {
    gap: var(--space-3);
    padding: 0 var(--space-4) var(--space-4);
    max-height: none;
  }

  .jri-grid-filtros .jri-filter-opt { font-size: 14px; color: var(--dark-2); }

  .jri-grid-filtros .jri-filter-stock {
    margin-top: var(--space-4);
    padding: 0 var(--space-4);
  }

  /* El de orden hereda el mismo aire. */
  .jri-cat-toolbar {
    background: var(--white);
    padding: var(--space-5) var(--space-4);
    box-shadow: 0 0 40px rgba(10, 10, 10, .18);
  }

  .jri-cat-toolbar .jri-toolbar-rotulo {
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: .5px;
  }

  .jri-panel-cerrar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex: none;
    border-radius: var(--radius-sm);
    background: var(--white);
    font-size: 22px;
    line-height: 1;
    color: var(--near-black);
    cursor: pointer;
  }

  /* Dentro del panel las opciones de orden se apilan. */
  .jri-cat-toolbar { flex-direction: column; align-items: stretch; }
  .jri-orden-opts  { flex-direction: column; align-items: flex-start; gap: var(--space-4); }

  /* La rejilla deja de reservar la columna del panel. */
  .jri-grid-layout { grid-template-columns: 1fr; }

  /* Pastillas de subcategoría: icono a la izquierda y texto al lado, que es
     como están en el diseño móvil. */
  .jri-cat-header .jri-subcat {
    flex: 0 0 62%;
    flex-direction: row;
    justify-content: flex-start;
    text-align: left;
    min-height: 74px;
    gap: var(--space-3);
  }
  .jri-cat-header .jri-subcat-ico img { width: 38px; height: 38px; }
}

/* Dos columnas de producto hasta el móvil más estrecho: el diseño las mantiene
   y a una sola columna las tarjetas salen enormes. */
@media (max-width: 500px) {
  .jri-products-grid--cat { grid-template-columns: repeat(2, 1fr); }
  .jri-mobile-acciones { gap: var(--space-3); }
}

/* Con dos columnas en 340 px, los 27 px de hueco se comen el ancho útil de las
   tarjetas. Se aprieta el lateral y se deja el vertical, que sí hace falta para
   separar filas. */
@media (max-width: 767px) {
  .jri-products-grid--cat {
    column-gap: var(--space-3);
    row-gap: var(--space-5);
  }
}