/**
 * Estados visuales del filtro AJAX y del scroll infinito.
 * El color del spinner viene de la variable --wc-ajax-spinner,
 * que el JS inyecta desde la config del panel (color manual o
 * detectado del theme). Fallback: gris oscuro.
 */

:root {
    --wc-ajax-spinner: #1b1b1b;
}

/* ----- Estado "cargando" al cambiar de categoría ----- */
.wc-ajax-loading {
    opacity: 0.4;
    transition: opacity 0.15s ease;
    pointer-events: none;
}

/* El min-height evita que la grilla se desplome a cero mientras se
   reemplaza el contenido, que hace saltar la página entera. */
.products.wc-ajax-loading {
    position: relative;
    min-height: 200px;
}

/* ----- Indicador "Cargando…" del scroll infinito ----- */
.wc-ajax-loadmore {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 24px 0;
    font-size: 14px;
    color: var(--wc-ajax-spinner);
    opacity: 0.85;
}

/* Este NO es configurable, a propósito: es el "Cargando…" discreto del pie
   de la grilla, que acompaña a un texto y tiene que seguir siendo chico y
   callado. Lo que se configura es el otro, el del medio de la pantalla. */
.wc-ajax-loadmore-spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid #ddd;
    border-top-color: var(--wc-ajax-spinner);
    border-radius: 50%;
    animation: wc-ajax-spin 0.7s linear infinite;
    flex: 0 0 auto;
}

.wc-ajax-loadmore-txt {
    font-weight: 500;
}

/* Sentinel invisible que dispara la carga al hacer scroll */
.wc-ajax-sentinel {
    width: 100%;
    height: 1px;
}

/* ============================================================
   El spinner del medio (Happy Plus › Tienda › Filtro)
   ------------------------------------------------------------
   Lo dibuja el JS como una capa propia pegada al <body>, y NO
   como un ::after de la grilla, que es donde vivía antes.

   El motivo es el efecto gris: lo hace un `opacity: .4` sobre
   la grilla, y un pseudo-elemento es hijo de ese contenedor,
   así que se llevaba el 40% puesto. Un aro oscuro lo aguanta;
   un logo a 40% sobre fondo blanco no se ve, que es justo lo
   que pasó al configurar una imagen.

   La capa cubre la pantalla solo para poder centrar. No pinta
   nada ni intercepta clics: el gris sigue saliendo de la
   grilla.

   El "Cargando…" del pie no tiene nada que ver con esto y no
   se configura: es un indicador chico al lado de un texto.
   ============================================================ */
.wc-ajax-spinner {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 9999;
}

/* El alto y el ancho los pone el JS en línea, con el tamaño configurado. */
.wc-ajax-spinner__pieza {
    display: block;
    object-fit: contain;
}

/* Sin imagen cargada, el aro de siempre. */
.wc-ajax-spinner__aro {
    box-sizing: border-box;
    border: 3px solid #ddd;
    border-top-color: var(--wc-ajax-spinner);
    border-radius: 50%;
}

/* El movimiento. Ahora el centrado lo hace el flex de la capa, así que
   los keyframes son limpios: no tienen que arrastrar ningún translate
   como cuando esto era un elemento posicionado a mano. */
.wc-ajax-spinner--girar     { animation: wc-ajax-spin 0.7s linear infinite; }
.wc-ajax-spinner--latir     { animation: wc-ajax-latir 1s ease-in-out infinite; }
.wc-ajax-spinner--rebotar   { animation: wc-ajax-rebotar 0.8s ease-in-out infinite; }
.wc-ajax-spinner--destellar { animation: wc-ajax-destellar 1.1s ease-in-out infinite; }
.wc-ajax-spinner--ninguno   { animation: none; }

@keyframes wc-ajax-spin {
    to { transform: rotate(360deg); }
}

@keyframes wc-ajax-latir {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.18); }
}

@keyframes wc-ajax-rebotar {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-22%); }
}

@keyframes wc-ajax-destellar {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.3; }
}

/* Quien pidió menos movimiento en su sistema no quiere un logo rebotando
   mientras espera. Se deja el destello, que es el único que no mueve nada,
   para que siga habiendo señal de "está cargando" en vez de una imagen
   quieta que parece parte de la página. */
@media (prefers-reduced-motion: reduce) {
    .wc-ajax-spinner__pieza {
        animation: wc-ajax-destellar 1.4s ease-in-out infinite !important;
    }
}

/* ============================================================
   Consistencia de tarjetas de producto en scroll infinito
   ------------------------------------------------------------
   Los productos cargados por AJAX traen el markup "crudo" de
   WooCommerce (sin los wrappers .astra-shop-summary-wrap que
   Astra inyecta solo en el query principal de la tienda). Sin
   esto, el título, precio y botón pierden el centrado respecto
   a los productos iniciales. Estas reglas centran ambos casos
   por igual, para que el plugin sea autocontenido y no dependa
   de CSS externo del theme/customizer.
   ============================================================ */

/* Centra todo el contenido de la tarjeta (cubre ambos markups
   y cualquier theme, porque usa clases estándar de WooCommerce) */
ul.products li.product {
    text-align: center;
}

/* Título */
ul.products li.product .woocommerce-loop-product__title {
    text-align: center;
}

/* Precio (a veces es flex, por eso el justify-content) */
ul.products li.product .price {
    display: block;
    justify-content: center;
    text-align: center;
}

/* Botón "Añadir al carrito" */
ul.products li.product a.button.add_to_cart_button {
    width: 100%;
    text-align: center;
    /* Los controles de formulario no heredan la fuente del sitio. */
    font-family: inherit;
}


/* Botón de "Ver más productos": solo aparece si una tanda del scroll
   infinito falló. Hereda el color de marca del filtro para no inventarle
   un estilo propio a algo que casi nunca se ve. */
.wc-ajax-reintentar {
	display: block;
	margin: 24px auto;
	padding: 10px 22px;
	border: 1px solid var(--wc-cat-borde, #dcdad3);
	border-radius: 999px;
	background: #fff;
	color: var(--wc-cat-texto, #1f1f1f);
	font: inherit;
	font-size: 14px;
	cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease;
}

.wc-ajax-reintentar:hover,
.wc-ajax-reintentar:focus-visible {
	background: var(--wc-cat-hover, #f4f2ed);
	border-color: var(--wc-cat-activo, #616630);
}