/* =========================================================
   woocommerce.css — Mascotas Ayacucho (producción)
   Compat.: WP 6.8.x · WC 10.x · Blocksy 2.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; margin:0; padding:0;
}
:where(.woocommerce, .woocommerce-page) :where(ul.products)::before,
:where(.woocommerce, .woocommerce-page) :where(ul.products)::after{
  content:none;
}

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

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

/* --------- Foco visible (accesibilidad) --------- */
:where(.woocommerce) :is(a, button, .button, input[type="submit"]):focus-visible{
  outline:2px solid var(--accent, #FFB600);
  outline-offset:2px;
  box-shadow:0 0 0 4px color-mix(in srgb, var(--accent, #FFB600) 25%, #fff);
  border-radius:.4rem;
}

/* --------- Card base “ligera” (no pisa el grid) --------- */
.ra-card-product{
  background:var(--surface, #fff);
  border:1px solid var(--border, #e5e7eb);
  border-radius:var(--radius, 16px);
  padding:12px;
  text-align:center;
  transition:box-shadow .2s ease, transform .2s ease;
}
@media (hover:hover){
  .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; object-fit:cover;
  border-radius:8px; background:#f8fafc; margin:0;
  transition:transform .25s ease;
}
@media (hover:hover){
  :where(.woocommerce) ul.products li.product:hover img{ transform:scale(1.02); }
}

/* CLS opt-in (si tu theme imprime <img> sin dimensiones) */
/* .ra-img-square img{ aspect-ratio:1/1; }  */

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  :where(.woocommerce) ul.products li.product img{ transition:none; }
  .ra-card-product{ transition:none; }
}

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

/* Título base (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 estados --------- */
:where(.woocommerce) ul.products li.product .price{
  color:var(--brand, #FF0000);
  font-weight:800; display:block;
  font-variant-numeric: tabular-nums; /* evita micro-movimientos */
}
:where(.woocommerce) ul.products li.product .price del{
  color:#6b7280; font-weight:600;
}
:where(.woocommerce) ul.products li.product .price ins{
  text-decoration:none;
}

/* --------- Botones en el loop --------- */
:where(.woocommerce) ul.products li.product :is(.button, a.button, .added_to_cart){
  display:inline-block; margin:10px auto; border-radius:10px;
  font-weight:700; text-align:center; border:0;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  background: var(--brand, #FF0000); color:#fff;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
}
@media (hover:hover){
  @supports (color: color-mix(in srgb, black 10%, white)){
    :where(.woocommerce) ul.products li.product :is(.button, a.button, .added_to_cart):hover{
      background: var(--brand-600, color-mix(in srgb, var(--brand, #FF0000) 78%, #000));
    }
  }
  @supports not (color: color-mix(in srgb, black 10%, white)){
    :where(.woocommerce) ul.products li.product :is(.button, a.button, .added_to_cart):hover{
      background: var(--brand-600-fallback, #CC0000);
    }
  }
  :where(.woocommerce) ul.products li.product :is(.button, a.button, .added_to_cart):hover{
    transform:translateY(-1px); box-shadow:0 6px 10px rgba(0,0,0,.08);
  }
}

/* Estados especiales */
:where(.woocommerce) a.added_to_cart{
  background: var(--support, #0AC5CA); color:#fff;
}
@media (hover:hover){
  @supports (color: color-mix(in srgb, black 10%, white)){
    :where(.woocommerce) a.added_to_cart:hover{ background: var(--support-600, color-mix(in srgb, var(--support,#0AC5CA) 68%, #000)); }
  }
  @supports not (color: color-mix(in srgb, black 10%, white)){
    :where(.woocommerce) a.added_to_cart:hover{ background: var(--support-600-fallback, #089EA2); }
  }
}

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

/* --------- Badge oferta y stock (posicionamiento fiable) --------- */
:where(.woocommerce) :is(span.onsale, ul.products li.product .onsale){
  background:var(--accent, #FFB600);
  color:var(--accent-contrast, #111);
  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;
}
:where(.woocommerce) ul.products li.product .outofstock-badge{
  position:absolute; top:10px; right:10px; z-index:2;
  background:#111827; color:#fff; border-radius:999px;
  padding:4px 8px; font-weight:800; font-size:.8rem; letter-spacing:.02em;
}

/* --------- Paginación Woo --------- */
:where(.woocommerce) nav.woocommerce-pagination ul{
  border:0; margin:18px 0 6px; gap:6px; display:flex; justify-content:center;
}
:where(.woocommerce) nav.woocommerce-pagination ul li{ border:0; margin:0; padding:0; }
:where(.woocommerce) nav.woocommerce-pagination ul li a,
:where(.woocommerce) nav.woocommerce-pagination ul li span{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:36px; height:36px; padding:0 .5rem;
  border:1px solid var(--border, #e5e7eb);
  border-radius:10px; text-decoration:none;
  transition:background .15s ease, border-color .15s ease;
}
@media (hover:hover){
  :where(.woocommerce) nav.woocommerce-pagination ul li a:hover{
    background:var(--surface-muted, #f8fafc);
  }
}
:where(.woocommerce) nav.woocommerce-pagination ul li .page-numbers.current{
  background:var(--brand, #FF0000); color:#fff; border-color:var(--brand, #FF0000);
}

/* --------- Avisos Woo (mensaje/info/error) --------- */
:where(.woocommerce) :is(.woocommerce-message, .woocommerce-info, .woocommerce-error){
  border-radius:12px; border:1px solid var(--border, #e5e7eb);
  padding:12px 14px; box-shadow:0 2px 6px rgba(0,0,0,.04);
}
:where(.woocommerce) .woocommerce-message{
  background: color-mix(in srgb, var(--support, #0AC5CA) 10%, #fff);
  border-color: color-mix(in srgb, var(--support, #0AC5CA) 30%, #fff);
}
:where(.woocommerce) .woocommerce-info{
  background:#fffbea; border-color:#fde68a;
}
:where(.woocommerce) .woocommerce-error{
  background:#ffeded; border-color:#ffc9c9;
}

/* Botones dentro de avisos (turquesa consistente) */
:where(.woocommerce) :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) a.button{
  background: var(--support, #0AC5CA);
  color:#fff; border:0; border-radius:10px; font-weight:700;
}
@media (hover:hover){
  @supports (color: color-mix(in srgb, black 10%, white)){
    :where(.woocommerce) :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) a.button:hover{
      background: var(--support-600, color-mix(in srgb, var(--support, #0AC5CA) 68%, #000));
    }
  }
  @supports not (color: color-mix(in srgb, black 10%, white)){
    :where(.woocommerce) :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) a.button:hover{
      background: var(--support-600-fallback, #089EA2);
    }
  }
}

/* --------- Quantity + Add to cart (producto single) --------- */
:where(.woocommerce) div.product form.cart{
  display:flex; gap:10px; align-items:center; flex-wrap:wrap;
}
:where(.woocommerce) .quantity .qty{
  min-width:72px; text-align:center;
  padding:.5rem .6rem; border:1px solid var(--border, #e5e7eb);
  border-radius:8px; background:#fff;
}

/* Botón primario en producto */
:where(.woocommerce) div.product form.cart :is(.single_add_to_cart_button, .button){
  background:var(--brand, #FF0000); color:#fff; border:0; border-radius:10px; font-weight:700;
  padding:.65rem 1.1rem; transition:background .15s ease, transform .15s ease;
}
@media (hover:hover){
  @supports (color: color-mix(in srgb, black 10%, white)){
    :where(.woocommerce) div.product form.cart :is(.single_add_to_cart_button, .button):hover{
      background: var(--brand-600, color-mix(in srgb, var(--brand, #FF0000) 78%, #000));
    }
  }
  @supports not (color: color-mix(in srgb, black 10%, white)){
    :where(.woocommerce) div.product form.cart :is(.single_add_to_cart_button, .button):hover{
      background: var(--brand-600-fallback, #CC0000);
    }
  }
}
:where(.woocommerce) div.product form.cart :is(.single_add_to_cart_button, .button):active{
  transform: translateY(1px);
}

/* Loading state (Woo añade spinner con :after). No tocamos el pseudo. */
:where(.woocommerce) :is(.button, .single_add_to_cart_button).loading{
  opacity:.85; cursor:progress;
}

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

/* --------- Excerpt compacto en loop (máx. 2 líneas) --------- */
.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; -webkit-box-orient:vertical;
  overflow:hidden; text-overflow:ellipsis;
}
@media (max-width:480px){
  .rg-loop-excerpt{ font-size:.88rem; }
}