/**
 * 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 spinner centrado solo tiene sentido en contenedores grandes
   (la grilla de productos), no en el título o el result-count,
   que son una sola línea de texto */
.products.wc-ajax-loading {
    position: relative;
    min-height: 200px;
}

.products.wc-ajax-loading::after {
    content: "";
    position: absolute;
    top: 40px;
    left: 50%;
    width: 36px;
    height: 36px;
    margin-left: -18px;
    border: 3px solid #ddd;
    border-top-color: var(--wc-ajax-spinner);
    border-radius: 50%;
    animation: wc-ajax-spin 0.7s linear infinite;
}

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

.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;
}

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

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