/*
 * Catálogo: la grilla de productos y su card.
 *
 * Se encola en las páginas de WooCommerce y **también en la home**, que muestra
 * los últimos ingresos con estas mismas cards (ver inc/enqueue.php). Lo propio
 * de la ficha vive aparte, en producto.css, para que la landing no baje estilos
 * que no usa. Reusa `.card`, `.boton`, `.badge`, `.filtros` y `.prosa` de
 * components.css; acá queda únicamente lo que es propio del petshop.
 */

/* `auto-fill` y no `auto-fit`, al revés que la galería de pacientes: ahí una
   fila a medio llenar se centra, y acá tiene que quedar alineada con las de
   arriba para que la grilla se lea como una góndola. La sección de la home hace
   lo contrario y por eso pisa esta regla: ver `.ultimos-ingresos__grilla`. */
.productos__grilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(16rem, 100%), 1fr));
  gap: 1.75rem;
}

.producto {
  padding: 0;
  overflow: hidden;
}

/* Cuadrado, igual que la galería de pacientes y que el recorte que hace
   WooCommerce (`woocommerce_thumbnail_cropping` en 1:1). El fondo se ve cuando
   el producto todavía no tiene foto y Woo cae en su placeholder, que es
   transparente y más chico que la caja. */
.producto__figura {
  aspect-ratio: 1 / 1;
  background-color: var(--c-suave);
  overflow: hidden;
}

.producto__figura img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--c-trans-lenta);
}

.producto:hover .producto__figura img {
  transform: scale(1.05);
}

.producto__cuerpo {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  padding: 1.5rem;
}

.producto__meta {
  margin-bottom: 0.9rem;
}

.producto__titulo {
  margin-bottom: 0.6rem;
  font-size: var(--c-txt-xl);
}

/* Tres renglones y corta. Los resúmenes los escribe Yani y van a tener largos
   distintos; sin el tope, una card con dos frases más estira toda la fila. */
.producto__resumen {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  color: var(--c-apagado);
  font-size: var(--c-txt-base);
}

.producto__precio {
  margin-top: 0.75rem;
  color: var(--c-naranja);
  font-size: var(--c-txt-xl);
  font-weight: 800;
}

/* El auto lo empuja al pie aunque los resúmenes tengan distinto largo. */
.producto__cuerpo .enlace-flecha {
  margin-top: auto;
  padding-top: 1.25rem;
}

/* Aclaración al pie del listado: el catálogo no es una lista de precios. */
.catalogo__aviso {
  margin-top: 2.5rem;
  color: var(--c-apagado);
  font-size: var(--c-txt-sm);
  text-align: center;
}