/* =================================================================
   TARJETA DE PRODUCTO Y REJILLA — Savi Safety
   Compartida por la rejilla del catálogo, los carruseles de la portada y los
   relacionados de la ficha (por eso no vive en `grilla.css`, que la ficha no
   encola).

   SUSTITUIDA el 11/09/2026 por la tarjeta de `savisafety-design-v3-3`
   (`.producto`), medida sobre el sitio: imagen 4:5 sobre blanco, logo de marca
   arriba a la izquierda a 7 px, etiquetas de 25 px apiladas en la esquina
   derecha, título 14/18 peso 500 `#333` SIN mayúsculas forzadas, y el precio
   actual a la izquierda con el tachado a su derecha.

   Diferencias con v2 que v3 corrige: sin sangrado lateral en el texto, título
   sin recorte a dos líneas, «ENVÍO EXPRESS» sin icono y «AGOTADO» sobre gris.

   EL VELO GRIS SE QUEDA, aunque v3 lo quitó: medido en el sitio el 11/09/2026
   (`.product-element-top::before`, rgba(137,155,172,.1)) en las tarjetas de
   relacionados de la ficha, igual que el 06/09 en la portada. v3 midió el fondo de
   la zona —blanco— y no vio el pseudoelemento encima.

   Cambio pedido por el usuario (11/09): el logo de marca, más grande que en el
   sitio (v3: tope de 56×56). Hay ficheros apaisados (500×250) y cuadrados con
   aire (deltaplus.jpg): con 80×50 los cuadrados salían incluso más pequeños que en
   el sitio. Tope de 96×64.

   El gemelo en JavaScript es `renderCard()` en `assets/js/catalogo.js`.
   ================================================================= */

/* ---------------- Rejilla ----------------
   La del archivo de categoría. Se revisa con la tanda de facetados (T3). */
.jri-products-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 20px;
}

.jri-grid-vacio {
  grid-column: 1 / -1;
  text-align: center;
  padding-block: 80px;
  color: var(--c-mute);
  font-weight: 600;
}

/* ---------------- Tarjeta ----------------
   Blanca: se ve sobre el amarillo de «Línea económica», el único sitio donde
   las tarjetas van sobre color. Sin marco, sin sombra y sin movimiento: la
   única animación es el cambio a la segunda imagen. */
.jri-product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--c-blanco);
}

.jri-product-card--agotado .jri-product-img { opacity: .85; }

/* ---------------- Zona de imagen: 4:5 (257×322 a 1502 px) ---------------- */
.jri-product-thumb {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--c-blanco);
}

/* El velo, ENCIMA de la foto (un fondo debajo no sirve: las fotos con fondo blanco lo
   taparían). `z-index: 1`, por debajo del logo y las etiquetas; sin comerse el clic. */
.jri-product-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgb(137 155 172 / 10%);
  pointer-events: none;
}

/* `contain`: son fotos recortadas sobre fondo claro que ya traen su aire. */
.jri-product-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 0;
  transition: opacity .25s ease;
}

/* Segunda imagen, por opacidad y no cambiando el `src`: cambiarlo deja un salto
   en blanco mientras carga. */
.jri-product-img--hover { opacity: 0; }
.jri-product-card:hover .jri-product-img--hover,
.jri-product-card:focus-within .jri-product-img--hover { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .jri-product-img { transition: none; }
}

/* Logo de marca, absoluto a 7/7 px, sin fondo.
   `multiply` porque los logos son JPG/PNG con el fondo blanco horneado: sobre el velo gris
   de la zona de imagen se recortaban como un rectángulo blanco. Multiplicar deja el blanco
   neutro (deja ver el velo) y no altera el resto del logo. Mismo tratamiento que
   `.jri-brand-card img` en `catalogo.css`. Va por encima del velo (`z-index: 3`), así que
   el backdrop con el que mezcla es el velo, que es justo lo que se quiere. */
.jri-product-brand {
  position: absolute;
  top: 7px;
  left: 7px;
  z-index: 3;
  width: auto;
  height: auto;
  max-width: 96px;
  max-height: 64px;
  object-fit: contain;
  mix-blend-mode: multiply;
}

/* ---------------- Etiquetas ----------------
   Contenedor pegado arriba, en columna y alineado a la derecha: «-N %»,
   «AGOTADO» y «ENVÍO EXPRESS» van juntas en esa esquina, sin hueco entre ellas. */
.jri-labels {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  pointer-events: none;
}

.jri-label {
  height: 25px;
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .5px;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}
.jri-label--desc { background: #FD000D; color: #FFFFFF; }
.jri-label--express { background: #FEED00; color: #242424; }
.jri-label--agotado { background: #F1F3F5; color: #242424; }

/* ---------------- Texto ---------------- */
.jri-product-card .jri-product-title { margin: 12px 0 0; }
.jri-product-card .jri-product-price { margin: 6px 0 0; }

/* Las mayúsculas de algunos títulos están en el contenido, no aquí: forzarlas
   con `text-transform` falsearía los que el cliente escribió en minúscula. */
.jri-product-title {
  font-size: 14px;
  line-height: 18px;
  font-weight: 500;
  letter-spacing: .5px;
  text-transform: none;
}
.jri-product-title a { color: #333333; text-decoration: none; transition: color .25s ease; }
.jri-product-title a:hover { color: #777777; }

/* El actual a la izquierda (14 / 600, #111110) y el anterior tachado a su
   derecha (12,6 / 400, #BBBBBB). */
.jri-product-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  font-size: 14px;
  line-height: 18.2px;
}
.jri-price-now {
  font-weight: 600;
  letter-spacing: .5px;
  color: #111110;
}
.jri-price-old {
  font-size: 12.6px;
  font-weight: 400;
  color: #BBBBBB;
  text-decoration: line-through;
}

/* Productos sin precio. */
.jri-price-consultar { font-size: 14px; font-weight: 600; color: #777777; }

/* ---------------- Responsive ---------------- */
@media (max-width: 1200px) { .jri-products-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 980px)  { .jri-products-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px)  {
  .jri-products-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .jri-product-brand { max-width: 72px; max-height: 48px; }

  /* A 390 px el sitio baja el texto de la tarjeta al 90 %: título y precio a 12,6/18
     (medido el 11/09/2026). El tachado se queda como está. */
  .jri-product-title { font-size: 12.6px; }
  .jri-product-price { font-size: 12.6px; line-height: 16.4px; }
}