/* ---------- 14. Transiciones suaves entre páginas ---------- */
/* Estado inicial: casi invisible, nunca 100% oculto por completo, así
   si algún script tarda la página igual es utilizable.
   Nota: NO usamos "transform" en <body> aquí a propósito. Un transform
   en el body convierte a body en el "marco de referencia" de todo lo
   que tenga position:fixed dentro (el carrito, el botón de WhatsApp),
   así que en vez de flotar sobre toda la pantalla, quedan atrapados
   dentro del body y se ven "desparramados" en el flujo de la página. */
/* El estado opacity/transition de html.dx-page-ready / dx-instant /
   dx-page-leaving ahora se imprime inline en el <head> (ver
   inc/page-transitions.php, id="dx-critical-fade"), no aquí. Así no hay
   ventana entre el primer pintado y la llegada de este archivo CSS —
   eso era el "destello blanco" al navegar entre páginas. Esta hoja se
   deja sin esa regla a propósito, para no tener dos fuentes de verdad. */

/* Rendimiento: las secciones fuera de pantalla no se calculan ni pintan
   hasta que se acercan al viewport, así la carga inicial es más liviana.
   IMPORTANTE: contain-intrinsic-size debe acercarse a la altura REAL de
   la tarjeta (imagen cuadrada + título + precio + botones). Un valor
   muy alejado del real hace que el navegador tenga que recalcular todo
   el layout de golpe al hacer scroll (se siente como lag/tirones), y en
   conexiones lentas puede verse un instante como espacio vacío antes de
   "revelarse" la tarjeta (parece que la imagen no cargó). */
ul.products li.product {
  content-visibility: auto;
  contain-intrinsic-size: 280px 420px;
}
.dx-cats a.dx-cat {
  content-visibility: auto;
  contain-intrinsic-size: 280px 190px;
}

/* Animación del ícono del carrito al añadir un producto: confirma la
   acción sin necesidad de texto ni recarga de página */
.dx-cart-bump { animation: dx-bump .5s ease; }
@keyframes dx-bump {
  0% { transform: scale(1); }
  30% { transform: scale(1.3); }
  100% { transform: scale(1); }
}
.dx-cart-count { transition: transform .2s ease; }
.dx-cart-bump .dx-cart-count { transform: scale(1.25); }

@media (prefers-reduced-motion: reduce) {
  .dx-cart-bump { animation: none; }
}

/* Botón "agregar al carrito" en producto individual: estado de cargando
   mientras se procesa por AJAX, para que el usuario sepa que está pasando algo */
.single_add_to_cart_button.dx-loading {
  opacity: .7;
  pointer-events: none;
  position: relative;
}