/* ================================================
   CARDS — COMPONENTE DE PRODUCTO
   ================================================ */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
  gap: 20px; margin-top: 40px;
}

.card {
  background: var(--clr-bg-card);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
  display: flex; flex-direction: column;
  contain: layout style paint;
}

.card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-hover);
}

.card-img-wrapper {
  overflow: hidden;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.card img {
  width: 100%; height: 240px;
  object-fit: cover; cursor: pointer;
  display: block;
  transition: transform var(--transition-slow);
}

.card:hover img { transform: scale(1.06); }

.card-content {
  padding: 18px 16px 20px;
  text-align: center;
  display: flex; flex-direction: column; flex: 1;
}

.card-content h3 {
  font-family: var(--font-serif);
  font-size: 18px; margin: 0 0 6px;
  color: var(--clr-green-mid);
}

.card-content p {
  font-size: 13px; color: var(--clr-text);
  margin: 0 0 10px; line-height: 1.4; flex: 1;
}

.price {
  color: var(--clr-gold-dark);
  font-weight: 700; font-size: 17px;
  display: block; margin-bottom: 14px;
}