/* =========================================================
   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
   ========================================================= */

/* --------- 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;
}

/* --------- Enlaces: heredan color del tema --------- */
:where(.woocommerce) ul.products li.product a{
  color:inherit;
  text-decoration:none;
}
/* INSERCIÓN SEGURA: el enlace del producto como bloque mejora el área clicable y ayuda a layouts consistentes */
:where(.woocommerce) ul.products li.product a.woocommerce-LoopProduct-link{
  display:block;
}
: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, #22CCD3);
  outline-offset:2px;
  box-shadow:0 0 0 4px var(--accent-100, #E8FBFD);
}
/* INSERCIÓN SEGURA: foco sólo cuando navegas con teclado, no molesta con mouse */
: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, #22CCD3);
  outline-offset:2px;
  box-shadow:0 0 0 4px var(--accent-100, #E8FBFD);
}

/* --------- Card base “ligera” (no pisa el grid) --------- */
.ra-card-product{
  background:var(--card, #fff);
  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; /* por si el tema agrega márgenes */
  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, #F62A5B);
  font-weight:700;
  display:block;
  /* INSERCIÓN SEGURA: evita micro‑movimientos al cambiar dígitos (tabular) */
  font-variant-numeric: tabular-nums;
}

: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;
  /* INSERCIÓN SEGURA: mejor respuesta táctil sin side‑effects */
  -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) ul.products li.product{
  position:relative; /* asegura que el badge se posicione en la card */
}
:where(.woocommerce) span.onsale,
:where(.woocommerce) ul.products li.product .onsale{
  background:var(--danger, #E53935);
  color:#fff;
  border-radius:999px;
  padding:4px 8px;
  font-weight:700;
  position:absolute;
  top:10px;
  left:10px;
  z-index:2;
  /* INSERCIÓN SEGURA: ancho mínimo para evitar jitter del badge */
  min-width:56px;
  line-height:1;
  text-align:center;
}

/* --------- Countdown --------- */
.regalos-countdown{
  display:flex;
  gap:.5rem;
  align-items:center;
  flex-wrap:wrap;
}
.regalos-countdown[hidden]{ display:none!important; }
.regalos-countdown .pill{
  display:inline-flex;
  align-items:center;
  gap:.25rem;
  padding:.35rem .5rem;
  border-radius:.75rem;
  box-shadow:0 2px 6px rgba(0,0,0,.06);
}
.regalos-countdown .pill .label{ font-size:.75rem; opacity:.8; }
.regalos-countdown .days,
.regalos-countdown .hours,
.regalos-countdown .minutes,
.regalos-countdown .seconds{
  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; /* mantenemos centro en RTL */
}
: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 para contador + excerpt del loop (match con nuestro PHP/JS) === */

/* 1) Soporte a spans .d .h .m .s (tu CSS actual solo estilaba .days/.hours/.minutes/.seconds) */
.regalos-countdown .d,
.regalos-countdown .h,
.regalos-countdown .m,
.regalos-countdown .s {
  font-variant-numeric: tabular-nums;
  min-width: 2ch;
  text-align: center;
}

/* 2) Descripción corta del loop (2 líneas, legible y compacta) */
.rg-loop-excerpt {
  margin: 6px auto 8px;
  font-size: .92rem;
  line-height: 1.35;
  color: var(--muted, #555);
  display: -webkit-box;
  -webkit-line-clamp: 2;          /* máximo 2 líneas */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 3) Ligeramente más compacto en móviles muy pequeños */
@media (max-width: 480px) {
  .regalos-countdown { gap: 6px; }
  .regalos-countdown .pill { min-width: 48px; padding: .30rem .45rem; }
  .rg-loop-excerpt { font-size: .88rem; }
}