/* =========================
   GRID DE PRODUCTOS (Shop)
   Regalos Agency — estable, sin dependencias de tema
   Usa variables globales: --color-primario, --color-secundario, --color-error,
   --color-fondo, --radio-md, --sombra-md, etc.
   ========================= */

/* ===== Tokens locales con fallbacks seguros ===== */
.rg-grid{
  --rg-cols-sm: 2;                 /* móvil */
  --rg-cols-md: 3;                 /* laptop */
  --rg-cols-lg: 4;                 /* desktop */
  --rg-gap: 12px;

  --rg-card-bg:   var(--color-fondo, #fff);
  --rg-card-br:   var(--radio-md, 14px);
  --rg-card-bc:   rgba(0,0,0,.06);
  --rg-card-sh:   var(--sombra-md, 0 8px 20px rgba(0,0,0,.06));
  --rg-card-shh:  0 12px 24px rgba(0,0,0,.10);

  --rg-ink:       var(--color-texto, #232323);
  --rg-muted:     #666;
  --rg-brand:     var(--color-primario, #e91e63);
  --rg-accent:    var(--color-secundario, #00bcd4);
  --rg-danger:    var(--color-error, #f44336);
}

/* ===== Grid: 2 (móvil) / 3 (laptop) / 4 (desktop) ===== */
.rg-grid,
:where(.woocommerce) :where(ul.products.rg-grid){
  display:grid;
  grid-template-columns:repeat(var(--rg-cols-sm), minmax(0, 1fr));
  gap:var(--rg-gap);
  margin:0;
  padding:0;
  list-style:none;
}
@media (min-width: 992px){
  .rg-grid,
  :where(.woocommerce) :where(ul.products.rg-grid){
    grid-template-columns:repeat(var(--rg-cols-md), minmax(0, 1fr));
  }
}
@media (min-width: 1280px){
  .rg-grid,
  :where(.woocommerce) :where(ul.products.rg-grid){
    grid-template-columns:repeat(var(--rg-cols-lg), minmax(0, 1fr));
  }
}

/* Anular defaults de Woo en los items del grid */
:where(.woocommerce) :where(ul.products.rg-grid li.product){
  width:auto !important;
  float:none !important;
  clear:none !important;
}

/* ===== Card base ===== */
.rg-card,
:where(.woocommerce) :where(ul.products.rg-grid li.product){
  position:relative;
  background:var(--rg-card-bg);
  border:1px solid var(--rg-card-bc);
  border-radius:var(--rg-card-br);
  overflow:hidden;
  display:flex;
  flex-direction:column;     /* empuja el footer al fondo */
  text-align:center;
  box-shadow:var(--rg-card-sh);
  transition:transform .2s ease, box-shadow .2s ease;
  min-height:100%;
  color:var(--rg-ink);
}
.rg-card:hover,
:where(.woocommerce) :where(ul.products.rg-grid li.product:hover){
  transform:translateY(-3px);
  box-shadow:var(--rg-card-shh);
}

/* ===== Media: altura estable ===== */
.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,
:where(.woocommerce) :where(ul.products.rg-grid li.product img){
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  margin:0 !important;
  transition:transform .25s ease;
}
:where(.woocommerce) :where(ul.products.rg-grid li.product:hover img){ transform:scale(1.02); }

/* ===== Badge OFERTA redondo y estable ===== */
.rg-badge{
  position:absolute; top:10px; left:10px;
  background:var(--rg-danger);
  color:#fff;
  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(--rg-danger); }

/* ===== Body (título, cats, rating, precio) ===== */
.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;        /* 2 líneas máx */
  -webkit-box-orient:vertical;
  overflow:hidden;
  min-height:2.6em;            /* altura visual estable */
  color:var(--rg-ink);
}

.rg-card__cats{ font-size:.85rem; color:var(--rg-muted); }

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

/* Precio protagonista y estable (evita “bailes”) */
.rg-card__price{
  margin:4px 0 0;
  color:var(--rg-brand);
  font-weight:800;
  font-variant-numeric:tabular-nums;
}

/* ===== Countdown (opcional, debajo del precio) ===== */
.regalos-countdown{
  margin:6px auto 8px;
  padding:6px 8px;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:center;
  background:color-mix(in oklab, var(--rg-accent) 8%, transparent);
  border:1px solid rgba(0,0,0,.06);
  border-radius:12px;
}
.regalos-countdown .pill{
  background:var(--rg-accent);
  color:var(--rg-brand);
  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);
}
.regalos-countdown .label{
  display:block;
  font-size:11px;
  color:#ffffffcc;
  margin-top:3px;
}

/* ===== Footer: botón anclado al fondo ===== */
.rg-card__footer{ margin-top:auto; padding:10px 12px 14px; }
.rg-card__footer .button,
.rg-btn{
  display:inline-block;
  width:100%;
  padding:10px 14px;
  background:var(--rg-accent);
  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, box-shadow .2s ease;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
.rg-card__footer .button:hover,
.rg-btn:hover{
  filter:brightness(1.06);
  transform:translateY(-1px);
  box-shadow:0 10px 16px rgba(0,0,0,.12);
}

/* ===== Secciones ===== */
.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: foco visible ===== */
.rg-card__link:focus-visible,
.rg-btn:focus-visible{
  outline:2px solid var(--color-secundario, #00bcd4);
  outline-offset:2px;
  box-shadow:0 0 0 4px #E8FBFD;
  border-radius:12px;
}

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

/* ===== Compat Woo extra: si tu UL ya es .products, este bloque asegura grid ===== */
:where(.woocommerce) :where(.rg-grid.products){
  display:grid !important;
  grid-template-columns:repeat(var(--rg-cols-lg), minmax(0, 1fr));
  gap:var(--rg-gap);
}
@media (max-width: 1024px){
  :where(.woocommerce) :where(.rg-grid.products){
    grid-template-columns:repeat(var(--rg-cols-md), minmax(0, 1fr));
  }
}
@media (max-width: 640px){
  :where(.woocommerce) :where(.rg-grid.products){
    grid-template-columns:repeat(var(--rg-cols-sm), minmax(0, 1fr));
  }
}