/* =========================================================
   WooCommerce — Base global (no rompe el grid) · PRODUCCIÓN
   Compat.: WP 6.8.x · WC 10.x · Blocksy 2.1.x
   Cargar ANTES de products-grid.css y productos-nuevos.css
   ========================================================= */

/* ====== Mapeo de tokens a tu paleta (fallbacks seguros) ====== */
:root{
  --brand:        var(--color-primario, #e91e63);
  --brand-600:    #c2185b;
  --accent:       var(--color-secundario, #00bcd4);
  --accent-100:   #E8FBFD; /* cian muy claro para halo de foco */
  --danger:       var(--color-error, #f44336);
  --muted:        #555; /* texto secundario legible */
  --card:         var(--color-fondo, #ffffff);
}

/* --------- Resets seguros del listado --------- */
:where(.woocommerce, .woocommerce-page) :where(ul.products){
  list-style:none!important;
  margin:0!important;
  padding:0!important;
}
:where(.woocommerce, .woocommerce-page) :where(ul.products)::before,
:where(.woocommerce, .woocommerce-page) :where(ul.products)::after{
  content:none!important;
}

/* Evita floats/anchos heredados que rompen el grid del loop */
:where(.woocommerce, .woocommerce-page) :where(ul.products li.product){
  float:none!important;
  width:auto!important;
  margin:0!important;
  max-width:100%!important;
  list-style:none!important;
  position:relative; /* para posicionar badges, etc. */
}

/* --------- Enlaces: heredan color del tema --------- */
:where(.woocommerce) ul.products li.product a{
  color:inherit;
  text-decoration:none;
}
:where(.woocommerce) ul.products li.product a.woocommerce-LoopProduct-link{
  display:block; /* área clicable consistente */
}
:where(.woocommerce) ul.products li.product a:hover{ text-decoration:none; }

/* --------- Foco visible (accesibilidad) --------- */
:where(.woocommerce) a:focus,
:where(.woocommerce) button:focus,
:where(.woocommerce) .button:focus,
:where(.woocommerce) input[type="submit"]:focus{
  outline:2px solid var(--accent);
  outline-offset:2px;
  box-shadow:0 0 0 4px var(--accent-100);
}
:where(.woocommerce) a:focus-visible,
:where(.woocommerce) button:focus-visible,
:where(.woocommerce) .button:focus-visible,
:where(.woocommerce) input[type="submit"]:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
  box-shadow:0 0 0 4px var(--accent-100);
}

/* --------- Card base “ligera” (no pisa el grid) --------- */
.ra-card-product{
  background:var(--card);
  border:1px solid rgba(0,0,0,.06);
  border-radius:var(--radius, 16px);
  padding:12px;
  text-align:center;
  transition:box-shadow .2s ease, transform .2s ease;
}
.ra-card-product:hover{
  box-shadow:0 10px 15px rgba(0,0,0,.08);
  transform:translateY(-2px);
}

/* --------- Imagen del producto --------- */
:where(.woocommerce) ul.products li.product img{
  display:block;
  width:100%;
  height:auto;
  border-radius:8px;
  background:#f8fafc; /* placeholder neutro */
  margin:0!important;
  transition:transform .25s ease;
  object-fit:cover;
}
:where(.woocommerce) ul.products li.product:hover img{ transform:scale(1.02); }

@media (prefers-reduced-motion: reduce){
  :where(.woocommerce) ul.products li.product img{ transition:none; }
  .ra-card-product,
  .ra-card-product:hover{ transition:none; transform:none; box-shadow:none; }
}

/* --------- Texto centrado en el loop --------- */
:where(.woocommerce) ul.products li.product .woocommerce-loop-product__title,
:where(.woocommerce) ul.products li.product .price,
:where(.woocommerce) ul.products li.product .woocommerce-product-details__short-description{
  text-align:center;
  margin-left:auto;
  margin-right:auto;
}

/* Título base (el tamaño final lo define tu grid) */
:where(.woocommerce) ul.products li.product .woocommerce-loop-product__title{
  font-weight:700;
  line-height:1.25;
  margin-top:.5rem;
}

/* Rating centrado (por si el tema lo flota) */
:where(.woocommerce) ul.products li.product .star-rating{
  margin:2px auto 6px;
  float:none;
}

/* --------- Precio y botones --------- */
:where(.woocommerce) ul.products li.product .price{
  color:var(--brand);
  font-weight:700;
  display:block;
  font-variant-numeric: tabular-nums; /* menos “bailes” de dígitos */
}

:where(.woocommerce) ul.products li.product .button,
:where(.woocommerce) ul.products li.product a.button,
:where(.woocommerce) ul.products li.product .added_to_cart{
  display:inline-block;
  margin:10px auto;
  border-radius:10px;
  font-weight:700;
  text-align:center;
  transition:transform .2s ease, box-shadow .2s ease;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
:where(.woocommerce) ul.products li.product .button:hover,
:where(.woocommerce) ul.products li.product a.button:hover,
:where(.woocommerce) ul.products li.product .added_to_cart:hover{
  transform:translateY(-1px);
  box-shadow:0 6px 10px rgba(0,0,0,.08);
}

/* Botón ancho (opt-in en móviles estrechos) */
@media (max-width:480px){
  :where(.woocommerce) ul.products li.product .button.is-full-mobile,
  :where(.woocommerce) ul.products li.product a.button.is-full-mobile{
    width:calc(100% - 20px);
  }
}

/* --------- Badge oferta (posicionamiento fiable) --------- */
:where(.woocommerce) span.onsale,
:where(.woocommerce) ul.products li.product .onsale{
  background:var(--danger);
  color:#fff;
  border-radius:999px;
  padding:4px 8px;
  font-weight:700;
  position:absolute;
  top:10px;
  left:10px;
  z-index:2;
  min-width:56px;
  line-height:1;
  text-align:center;
}

/* --------- Countdown (versión roja) --------- */
.regalos-countdown{
  display:flex;
  gap:.5rem;
  align-items:center;
  flex-wrap:wrap;
  background:rgba(241, 18, 2, 0.05);   /* rojo muy suave de fondo */
  border:1px solid rgba(170, 15, 4, 0.15);
  border-radius:.75rem;
  padding:.35rem .5rem;
}
.regalos-countdown[hidden]{ display:none!important; }

.regalos-countdown .pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:.25rem;
  padding:.45rem .65rem;
  border-radius:.75rem;
  background: var(--color-error, #f44336); /* rojo principal */
  color:#fff;
  font-weight:700;
  box-shadow:0 2px 6px rgba(244,67,54,.25);
  min-width:54px;
  text-align:center;
  line-height:1.1;
}
.regalos-countdown .pill .label{
  font-size:.75rem;
  opacity:.9;
  color:#fff; /* texto claro sobre fondo rojo */
}

.regalos-countdown .days,
.regalos-countdown .hours,
.regalos-countdown .minutes,
.regalos-countdown .seconds,
.regalos-countdown .d,
.regalos-countdown .h,
.regalos-countdown .m,
.regalos-countdown .s{
  font-variant-numeric:tabular-nums;
  min-width:2ch;
  text-align:center;
}

.regalos-countdown.expired{ opacity:.6; }

/* --------- RTL compatible --------- */
:where(html[dir="rtl"]) :where(.woocommerce) ul.products li.product .price{
  text-align:center;
}
:where(html[dir="rtl"]) :where(.woocommerce) .onsale{
  left:auto;
  right:10px;
}

/* --------- (Opcional) Dark mode suave --------- */
@media (prefers-color-scheme: dark){
  .ra-card-product{
    background:var(--card-dark, #0f172a);
    border-color:rgba(255,255,255,.06);
  }
  :where(.woocommerce) ul.products li.product img{
    background:#0b1220;
  }
}

/* === Ajustes de compatibilidad fina === */

/* Solo deja visible la PRIMERA imagen por tarjeta (evita duplicados de plugins) */
:where(.woocommerce) ul.products li.product img + img{
  display:none!important;
}

/* Evita que un <noscript><img> (p.ej. lazy-load) se muestre en el loop */
:where(.woocommerce) ul.products li.product noscript{
  display:none!important;
}

/* IMPORTANTE: No ocultamos .onsale globalmente para no interferir con "Productos Nuevos".
   Si usas un badge propio, oculta el nativo SOLO en ese contexto, por ejemplo:
   .mis-cards .onsale { display:none!important; } */