/*
 * WooCommerce Archives - Progressive Pagination / Infinite Scroll
 *
 * Split from legacy /woo/archive/archive.css.
 */

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
~                     OUTLINE BUTTON HOVER FIX                 ~
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

body.archive .btn--outline:hover,
body.tax-product_cat .btn--outline:hover {
    border-color: var(--bspc-blue-primary);
    background: #f5f9ff;
    color: var(--bspc-text-primary);
}

/* [7.12.0] Dark: l'hover sopra (#f5f9ff hardcoded) andava bianco-su-bianco
   perché --bspc-text-primary in dark diventa quasi bianco; su mobile l'hover
   "resta" dopo il tap → pillola bianca illeggibile. Controparte scura. */
[data-theme="dark"] body.archive .btn--outline:hover,
[data-theme="dark"] body.tax-product_cat .btn--outline:hover {
    background: rgba(41, 151, 255, 0.16);
    border-color: var(--bspc-blue-primary);
    color: var(--bspc-text-primary);
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) body.archive .btn--outline:hover,
    :root:not([data-theme="light"]) body.tax-product_cat .btn--outline:hover {
        background: rgba(41, 151, 255, 0.16);
        border-color: var(--bspc-blue-primary);
        color: var(--bspc-text-primary);
    }
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
~                     LOAD MORE BUTTON (APPLE)                  ~
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

.apple-load-more {
    display: block;
    margin: 40px auto;
    padding: 14px 36px;
    background: var(--bspc-bg-white);
    border: 1px solid var(--bspc-border-light);
    border-radius: 30px;
    color: var(--bspc-text-primary);
    font-weight: 600;
    cursor: pointer;
    /* Evita transition: all che causa costi extra di layout; specifica solo le
       proprietà animate (background, border, transform e colore) */
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease, color 0.2s ease;
}

/* The HTML hidden attribute always wins over the presentation class. */
.apple-load-more[hidden],
.bspc-load-more-btn[hidden] {
    display: none !important;
}

.apple-load-more:hover {
    border-color: var(--bspc-text-primary);
    background: var(--bspc-bg-light);
    transform: scale(1.02);
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
~                     INFINITE SCROLL HELPERS                   ~
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

.bpc-infinite-status {
    margin: 12px auto 0;
    text-align: center;
    font-size: 0.95rem;
    line-height: 1.4;
    color: var(--bspc-text-secondary);
}

.bpc-infinite-sentinel {
    width: 100%;
    height: 0;
}

/* When JS infinite scroll is active we hide the classic pagination UI
   (links remain in the DOM for no-JS and for crawlers). */
body.bpc-infinite-enabled nav.woocommerce-pagination {
    display: none;
}

button.bspc-load-more-btn.is-loading {
    opacity: 0.7;
    cursor: progress;
}

/* ==========================================================
   v6.4.x Sprint 7 - Skeleton cards inside product grids
   Inherits base .bpc-skeleton shimmer from core.css.
   ========================================================== */
.woocommerce ul.products .bpc-skeleton--card,
[data-bpc-infinite-grid] .bpc-skeleton--card {
    min-height: 260px;
}

.bpc-skeleton__line--wide { width: 80%; }
.bpc-skeleton__line--short { width: 55%; }