/* Diseño de tarjetas «Grilla de 2 columnas» (TemaCarta.diseno_tarjetas = grilla).
   Se carga después de styles.css y antes del tema, así que la skin la puede retocar. */

.product-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
/* Mensajes de "sin productos" ocupan las dos columnas */
.product-list > :not(.product-card) { grid-column: 1 / -1; }

.product-card {
  flex-direction: column;
  gap: 8px;
  padding: 8px;
  border-radius: calc(20px * var(--r));
}
.product-img-wrapper {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  border-radius: calc(14px * var(--r));
}
.product-info { padding: 0 4px 4px; }
.product-name { font-size: calc(14px * var(--fs)); }
.product-desc { font-size: calc(10.5px * var(--fs)); }
.product-footer { margin-top: 6px; }
.product-price { padding: 3px 8px; }
.product-ver { display: none; }
.promo-list-img { font-size: calc(17px * var(--fs)); padding: 24px 10px 10px; }