/* Loading indicator shown during infinite-scroll fetches. Hidden
 * by default; the JS toggles .is-loading on .ps-shopping-product
 * to reveal it while the next batch is being requested. */
.ps-infinite-status {
    display: none;
}

.ps-shopping-product.is-loading .ps-infinite-status {
    display: block;
}

/* Three-dot bouncing bubble spinner. Primary color pulled from the
 * theme palette with a sensible fallback so it works even if the
 * admin hasn't picked a color yet. */
.ps-infinite-spinner {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    justify-content: center;
    padding: 10px 16px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.04);
}

.ps-infinite-spinner::before,
.ps-infinite-spinner::after,
.ps-infinite-spinner > span,
.ps-infinite-spinner {
    --ps-dot-size: 8px;
    --ps-dot-color: var(--primary-color, #fcb800);
}

.ps-infinite-spinner::before,
.ps-infinite-spinner::after {
    content: '';
    display: inline-block;
    width: var(--ps-dot-size);
    height: var(--ps-dot-size);
    border-radius: 50%;
    background: var(--ps-dot-color);
    animation: ps-infinite-bounce 1.2s infinite ease-in-out both;
}

.ps-infinite-spinner::before {
    animation-delay: -0.3s;
}

.ps-infinite-spinner::after {
    animation-delay: 0.3s;
}

/* Middle dot — rendered via a nested span so the ::before/::after
 * only need to carry the outer two. */
.ps-infinite-spinner > span {
    display: inline-block;
    width: var(--ps-dot-size);
    height: var(--ps-dot-size);
    border-radius: 50%;
    background: var(--ps-dot-color);
    animation: ps-infinite-bounce 1.2s infinite ease-in-out both;
    animation-delay: 0s;
}

@keyframes ps-infinite-bounce {
    0%, 80%, 100% {
        transform: scale(0.4);
        opacity: 0.5;
    }
    40% {
        transform: scale(1);
        opacity: 1;
    }
}