/*
 * WooCommerce Archives - Layout
 *
 * Split from legacy /woo/archive/archive.css to support the “block schema”
 * for archives + categories, without changing the frontend output.
 */

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
~                     PAGE TOKENS (ARCHIVE CONTEXT)            ~
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

body.archive,
body.tax-product_cat {
    /*
     * [Audit v5.0.7] Rimossi override di token globali (--bspc-border-light,
     * --bspc-ease-apple, --bspc-text-secondary ecc.) che causavano
     * incoerenze visive tra le pagine archivio e il resto del sito.
     * I token globali definiti in global.css sono ora la SSOT.
     */

    /* Canvas colore pagina archivio */
    --bspc-bg-page: var(--bspc-bg-light);

    /* Alias di contesto archivio (solo token locali non globali) */
    --bspc-border-subtle: var(--bspc-border-light);
    --bspc-radius-card: var(--bspc-radius-large);

    /* [Audit v5.0.8] Alias ombre usati da hero.css e faults-accordion.css.
     * Mappati ai token globali per coerenza (prima erano valori hardcoded). */
    --bspc-shadow-sm: var(--bspc-shadow-light);
    --bspc-shadow-md: var(--bspc-shadow-medium);
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
~                     CANVAS + CONTAINERS                       ~
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

body.tax-product_cat,
body.archive {
    background-color: var(--bspc-bg-page) !important;
    font-family: var(--bspc-font-family);
    color: var(--bspc-text-primary);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

/* Categories: make the theme wrappers transparent to show the page canvas. */
body.tax-product_cat #primary,
body.tax-product_cat #main,
body.tax-product_cat .entry-content {
    background-color: transparent !important;
}

/* Un solo proprietario del gutter: il wrapper esterno dell'archivio. */
body.archive .bspc-archive-wrapper.bpc-section,
body.tax-product_cat .bspc-archive-wrapper.bpc-section,
body.tax-product_brand .bspc-archive-wrapper.bpc-section {
    max-width: 1200px;
    margin: 0 auto 60px;
    padding: 0 20px;
}

@media (max-width: 767.98px) {
    body.archive .bspc-archive-wrapper.bpc-section,
    body.tax-product_cat .bspc-archive-wrapper.bpc-section,
    body.tax-product_brand .bspc-archive-wrapper.bpc-section {
        margin-bottom: 40px;
        padding-inline: var(--bspc-page-gutter, 16px);
    }
}

body.archive .section-title,
body.tax-product_cat .section-title {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 30px;
    color: var(--bspc-text-primary);
    letter-spacing: -0.01em;
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
~                     MOBILE PADDING FIX                         ~
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

@media (max-width: 980px) {
    body.tax-product_cat #primary,
    body.archive #primary {
        padding-top: 0 !important;
    }
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
~                     RICH TEXT HELPER                          ~
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

body.archive .bpc-rich-text,
body.tax-product_cat .bpc-rich-text {
    font-size: var(--bspc-font-md);
    line-height: 1.7;
    color: var(--bspc-text-primary);
}

body.archive .bpc-rich-text p,
body.tax-product_cat .bpc-rich-text p {
    margin: 0 0 12px;
}

body.archive .bpc-rich-text p:last-child,
body.tax-product_cat .bpc-rich-text p:last-child {
    margin-bottom: 0;
}

body.archive .bpc-rich-text ul,
body.archive .bpc-rich-text ol,
body.tax-product_cat .bpc-rich-text ul,
body.tax-product_cat .bpc-rich-text ol {
    margin: 0 0 12px;
    padding-left: 18px;
}

/* ------------------------------------------------------------------
 * Migliora la leggibilità e l'usabilità delle pagine categoria
 *
 * - .category-bottom-content: delimita la larghezza del testo SEO e ne
 *   aumenta la spaziatura per una lettura confortevole su desktop.
 * - .bspc-empty-category-cta: definisce lo stato “vuoto” con un layout
 *   coerente e centrato, mostrando un'icona e una call to action.
 */
.category-bottom-content {
    max-width: 800px;
    margin: 0 auto 40px;
    font-size: 1.05rem;
    line-height: 1.75;
    color: var(--bspc-text-secondary);
}

.bspc-empty-category-cta {
    text-align: center;
    padding: 60px 20px;
    color: var(--bspc-text-secondary);
}
.bspc-empty-category-cta::before {
    content: '';
    display: block;
    width: 48px;
    height: 48px;
    margin: 0 auto 16px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="%2386868b" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
.bspc-empty-category-cta p {
    margin-bottom: 16px;
    font-size: 1rem;
    line-height: 1.6;
}
.bspc-empty-category-cta .btn,
.bspc-empty-category-cta .btn--primary {
    display: inline-block;
    margin-top: 10px;
    padding: 12px 20px;
    border-radius: var(--bspc-radius-medium);
    background-color: var(--bspc-blue-primary);
    color: var(--bspc-bg-white);
    text-decoration: none;
    font-weight: 600;
    transition: background-color 0.2s ease;
}
.bspc-empty-category-cta .btn:hover,
.bspc-empty-category-cta .btn:focus,
.bspc-empty-category-cta .btn--primary:hover,
.bspc-empty-category-cta .btn--primary:focus {
    background-color: var(--bspc-blue-hover);
    color: var(--bspc-bg-white);
}