/* =================================================================
   JRI Core — tarjeta de producto y rejilla
   Compartido por la grilla del catálogo y por los productos relacionados
   de la ficha. Si viviera solo en grilla.css, los relacionados saldrían
   sin estilo porque esa hoja no se encola en la ficha de producto.
   ================================================================= */

.jri-products-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
}

.jri-product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
  background: var(--white);
  border: 1px solid var(--gray-150);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-card);
  transition: transform .2s, box-shadow .2s;
}

.jri-product-card:hover { transform: translateY(-4px); box-shadow: 0 8px 20px rgba(0,0,0,.12); }

.jri-product-card--agotado { opacity: .72; }

.jri-product-brand {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  max-width: 60px;
  max-height: 30px;
  width: auto;
  object-fit: contain;
}

.jri-product-thumb img { width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; }

/* Reserva dos líneas para que las tarjetas de una fila queden a la misma
   altura, y corta con «…» a la tercera: hay nombres de producto muy largos
   —«GUANTES RESISTENTE AL CALOR 180°C ALPHATEC 09-430»— que en dos columnas
   estiraban una tarjeta el doble que su vecina. */
.jri-product-title {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  min-height: 2.8em;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.jri-product-title a:hover { color: var(--brand-gold); }

.jri-product-price { margin: 0; }

.jri-price-now { font-size: 17px; font-weight: 700; }

.jri-price-old { color: var(--text-muted); text-decoration: line-through; font-size: 13px; margin-right: 6px; }

/* ---------------- Botón de la tarjeta ----------------
   Negro con el texto en amarillo y en caja normal —solo la primera
   mayúscula—, como en el Figma y como el de la ficha de producto.

   `.jri-btn-quote` **no tenía regla base**: en `base.css` solo existía su
   `:hover`, así que el botón salía sin fondo y solo se pintaba al pasar el
   ratón por encima. */
.jri-product-card .jri-btn-quote {
  margin-top: auto;
  text-align: center;
  background: var(--near-black);
  color: var(--brand-yellow);
  text-transform: none;
  letter-spacing: 0;
  border-radius: 5px;
  padding: 11px 14px;
  font-size: 13px;
  font-weight: 600;
}
.jri-product-card .jri-btn-quote:hover {
  background: var(--brand-yellow);
  color: var(--near-black);
}
.jri-product-card .jri-btn-quote:disabled {
  background: var(--gray-150);
  color: var(--text-muted);
  opacity: 1;
}

/* Confirmación tras añadir. Va después de `:disabled` porque el botón sigue
   deshabilitado mientras se muestra: si fuese antes, ganaría el gris. */
.jri-product-card .jri-btn-quote--anadido,
.jri-product-card .jri-btn-quote--anadido:disabled {
  background: var(--brand-yellow);
  color: var(--near-black);
}

.jri-grid-vacio {
  grid-column: 1 / -1;
  text-align: center;
  padding-block: var(--space-9);
  color: var(--text-muted-2);
  font-weight: 600;
}

/* ---- Precio a consultar (productos sin precio: 29 de 711) ---- */
.jri-price-consultar {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-muted-2);
}

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

/* ---------------- Oferta ----------------
   La etiqueta va posicionada sobre la tarjeta, así que `.jri-product-card`
   tiene que ser `position: relative` (lo es, más arriba). */
.jri-badge-sale {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  background: var(--brand-yellow);
  color: var(--near-black);
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  z-index: 2;
}

.jri-price-old {
  color: var(--text-muted);
  text-decoration: line-through;
  font-size: 13px;
  margin-right: 6px;
}