/* =========================
   products-grid.css — Mascotas Ayacucho (producción)
   Grid: 2 (móvil) / 3 (laptop) / 4 (desktop)
   Sin dependencias del tema. Compat: WP 6.8 · WC 10.x
   ========================= */

/* ===== Grid base (listas personalizadas o Woo con clase extra) ===== */
.rg-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr)); /* móvil: 2 */
  gap:12px;
  margin:0;
  padding:0;
  list-style:none;
}
@media (min-width: 992px){
  .rg-grid{ grid-template-columns:repeat(3, minmax(0,1fr)); } /* laptop: 3 */
}
@media (min-width: 1280px){
  .rg-grid{ grid-template-columns:repeat(4, minmax(0,1fr)); } /* desktop: 4 */
}

/* ===== Compat Woo: <ul class="products rg-grid"> ===== */
.rg-grid.products{
  display:grid !important;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:12px;
  margin:0; padding:0; list-style:none;
}
.rg-grid.products li.product{
  width:auto !important;
  float:none !important;
  clear:none !important;
}
@media (max-width:1024px){
  .rg-grid.products{ grid-template-columns:repeat(3, minmax(0,1fr)); }
}
@media (max-width:640px){
  .rg-grid.products{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}

/* ===== Card base ===== */
.rg-card{
  position:relative;
  background:var(--surface, #fff);
  border:1px solid var(--border, #e5e7eb);
  border-radius:14px;
  overflow:hidden;
  display:flex;
  flex-direction:column;           /* botón al fondo */
  text-align:center;
  box-shadow:0 8px 20px rgba(0,0,0,.06);
  transition:transform .2s ease, box-shadow .2s ease;
  min-height:100%;
}
.rg-card:hover{
  transform:translateY(-3px);
  box-shadow:0 12px 24px rgba(0,0,0,.10);
}

/* ===== Media: altura estable (evita “bailes”) ===== */
.rg-card__link{ display:block; color:inherit; text-decoration:none; }
.rg-card__media{ display:block; }
.rg-card__thumb{
  position:relative; width:100%;
  aspect-ratio:4/5;                 /* ajusta si tu catálogo usa otra relación */
  background:#f8fafc;
  overflow:hidden; display:grid; place-items:center;
}
.rg-card__img{
  width:100%; height:100%;
  object-fit:cover; display:block;
}

/* ===== Badge OFERTA / etiquetas ===== */
.rg-badge{
  position:absolute; top:10px; left:10px;
  background:var(--accent, #FFB600);
  color:var(--accent-contrast, #111);
  font-weight:800;
  padding:6px 10px;
  border-radius:999px;
  min-width:56px; text-align:center; line-height:1;
  z-index:2;
}
.rg-badge--sale{ background:var(--brand, #FF0000); color:#fff; }

/* ===== Body ===== */
.rg-card__body{
  display:flex; flex-direction:column; gap:6px;
  padding:10px 12px 0 12px;
}

.rg-card__title{
  margin:6px 6px 0;
  font-size:1rem; font-weight:700; line-height:1.25;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden;
  min-height:2.6em;                 /* altura visual estable */
  color:var(--text, #111827);
}

.rg-card__cats{ font-size:.85rem; color:#666; }

.rg-card__rating{ margin-top:2px; }

/* Precio protagonista y estable */
.rg-card__price{
  margin:4px 0 0;
  color:var(--brand, #FF0000);
  font-weight:800;
  font-variant-numeric:tabular-nums; /* evita micro-movimientos */
}

/* ===== Countdown (opcional) ===== */
.ma-countdown{
  margin:6px auto 8px; padding:6px 8px;
  display:flex; gap:8px; flex-wrap:wrap; justify-content:center;
  background: color-mix(in srgb, var(--support, #0AC5CA) 6%, transparent);
  border:1px solid rgba(0,0,0,.06);
  border-radius:12px;
}
.ma-countdown .pill{
  background:var(--support, #0AC5CA);
  color:var(--brand-contrast, #fff);
  border:1px solid rgba(0,0,0,.06);
  padding:6px 10px; border-radius:10px;
  font-weight:800; min-width:54px; text-align:center; line-height:1.1;
  box-shadow:0 2px 6px rgba(0,0,0,.08);
}
.ma-countdown .label{
  display:block; font-size:11px; color:#ffffffcc; margin-top:3px;
}

/* ===== Footer: botón al fondo (columnas alineadas) ===== */
.rg-card__footer{ margin-top:auto; padding:10px 12px 14px; }

.rg-card__footer .button,
.rg-btn,
:where(.woocommerce) .products .product .button{
  display:inline-block; width:100%;
  padding:10px 14px;
  background: linear-gradient(135deg,
              var(--support, #0AC5CA),
              color-mix(in srgb, var(--support, #0AC5CA) 80%, #000));
  color:#fff; border:0; border-radius:12px; font-weight:700;
  box-shadow:0 6px 12px rgba(0,0,0,.12);
  transition:filter .2s ease, transform .2s ease;
  text-decoration:none; cursor:pointer;
}
.rg-card__footer .button:hover,
.rg-btn:hover,
:where(.woocommerce) .products .product .button:hover{
  filter:brightness(1.06); transform:translateY(-1px);
}

/* ===== Títulos de sección ===== */
.rg-section{ margin-bottom:28px; }
.rg-section__title{
  font-size:1.25rem; font-weight:800; text-align:center; margin:8px 0 14px;
}
.rg-section__header--sr{ position:absolute; left:-9999px; }

/* ===== Accesibilidad / Motion ===== */
@media (prefers-reduced-motion: reduce){
  .rg-card, .rg-card:hover{ transition:none; transform:none; box-shadow:none; }
}

/* ===== Notas =====
1) Usa <ul class="products rg-grid"> en el catálogo
   y <li class="product rg-card"> en cada item del loop.
2) Si tu catálogo usa otra relación de imagen, cambia aspect-ratio en .rg-card__thumb.
*/