/* =========================================================================
   SARTORI TRADE — Navigazione a faccette
   Colonna dei filtri su schermo largo, pannello richiamabile su schermo
   stretto. Un solo blocco di markup (vedi inc/filtri.php): qui cambia solo
   come si presenta.
   Nessun colore scritto a mano: tutto arriva da tokens.css.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. LA COLONNA
   ------------------------------------------------------------------------- */

.sa-colonna-filtri {
    /* La colonna e' un elenco lungo: senza un limite di larghezza le etichette
       si stirano e diventano faticose da scorrere con l'occhio. */
    max-width: 22rem;
}

.sa-filtri {
    background: var(--sa-superficie);
    border: 1px solid var(--sa-bordo);
    border-radius: var(--sa-raggio-lg);
    padding: var(--sa-s4);
    /* Serve al pannello su schermo stretto per posizionare la testa in alto. */
    display: flex;
    flex-direction: column;
    gap: var(--sa-s1);
}

/* Il pannello e' focalizzabile via script per portarci dentro il fuoco: quel
   contorno non deve comparire quando lo si apre con il dito. */
.sa-filtri:focus { outline: none; }
.sa-filtri:focus-visible {
    outline: 2px solid var(--sa-blu);
    outline-offset: 2px;
}

.sa-filtri__testa {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sa-s3);
}

.sa-filtri__titolo {
    margin: 0;
    font-size: var(--sa-t-md);
    line-height: var(--sa-riga-stretta);
    color: var(--sa-inchiostro);
    letter-spacing: -0.01em;
}

.sa-filtri__risultati {
    margin: 0 0 var(--sa-s3);
    padding-bottom: var(--sa-s3);
    border-bottom: 1px solid var(--sa-bordo);
    font-size: var(--sa-t-sm);
    color: var(--sa-inchiostro-2);
}

.sa-filtri__risultati strong {
    color: var(--sa-inchiostro);
    font-variant-numeric: tabular-nums;
}

/* -------------------------------------------------------------------------
   2. UNA FACCETTA
   E' un <details>: si apre e si chiude da tastiera senza una riga di script.
   ------------------------------------------------------------------------- */

.sa-faccetta {
    border-bottom: 1px solid var(--sa-bordo);
}

.sa-faccetta:last-child { border-bottom: 0; }

.sa-faccetta__titolo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sa-s2);
    /* Bersaglio del dito: la riga del titolo e' cliccabile per intero. */
    min-height: var(--sa-tocco);
    padding: var(--sa-s2) 0;
    margin: 0;
    font-size: var(--sa-t-sm);
    font-weight: 600;
    line-height: var(--sa-riga-stretta);
    color: var(--sa-inchiostro);
    cursor: pointer;
    list-style: none;
    transition: color var(--sa-durata) var(--sa-curva);
}

/* Il triangolino predefinito di <summary> va tolto in tutti i motori. */
.sa-faccetta__titolo::-webkit-details-marker { display: none; }
.sa-faccetta__titolo::marker { content: ''; }

.sa-faccetta__titolo:hover { color: var(--sa-blu); }

.sa-faccetta__titolo:focus-visible {
    outline: 2px solid var(--sa-blu);
    outline-offset: -2px;
    border-radius: var(--sa-raggio);
}

/* Lo schiacciamento e' una trasformazione, non un cambio di dimensioni: non
   fa muovere nulla intorno. */
.sa-faccetta__titolo:active { transform: scale(0.99); }

/* Titolo dei «Filtri attivi»: non e' un <summary>, non si apre e non si chiude. */
.sa-faccetta__titolo--statico {
    cursor: default;
    min-height: 0;
    padding-top: 0;
}

.sa-faccetta__titolo--statico:hover { color: var(--sa-inchiostro); }

.sa-faccetta .sa-icona--freccia {
    flex: none;
    color: var(--sa-inchiostro-3);
    transition: transform var(--sa-durata) var(--sa-curva);
}

.sa-faccetta[open] > .sa-faccetta__titolo .sa-icona--freccia {
    transform: rotate(180deg);
}

.sa-faccetta__corpo {
    padding-bottom: var(--sa-s3);
}

/* -------------------------------------------------------------------------
   3. LE VOCI
   Il widget nativo di WooCommerce stampa <ul class="woocommerce-widget-layered-nav-list">
   con <li class="wc-layered-nav-term"><a>Etichetta</a><span class="count">(n)</span>.
   Le nostre faccette usano classi proprie: le due famiglie condividono lo stile.
   ------------------------------------------------------------------------- */

.sa-faccetta__elenco,
.sa-filtri .woocommerce-widget-layered-nav-list,
.sa-faccetta--attivi ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.sa-faccetta__voce,
.sa-filtri .wc-layered-nav-term {
    margin: 0;
    padding: 0;
    border: 0;
}

.sa-faccetta__link,
.sa-filtri .wc-layered-nav-term > a,
.sa-filtri .wc-layered-nav-term > span {
    display: flex;
    align-items: center;
    gap: var(--sa-s2);
    /* 44px pieni: e' la misura di un dito, non del testo. */
    min-height: var(--sa-tocco);
    padding: var(--sa-s2) var(--sa-s2);
    margin: 0 calc(var(--sa-s2) * -1);
    border-radius: var(--sa-raggio);
    font-size: var(--sa-t-sm);
    line-height: var(--sa-riga);
    color: var(--sa-inchiostro-2);
    text-decoration: none;
    transition:
        background-color var(--sa-durata) var(--sa-curva),
        color var(--sa-durata) var(--sa-curva),
        transform var(--sa-durata-uscita) var(--sa-curva);
}

.sa-faccetta__link:hover,
.sa-filtri .wc-layered-nav-term > a:hover {
    background: var(--sa-superficie-2);
    color: var(--sa-inchiostro);
    text-decoration: none;
}

.sa-faccetta__link:focus-visible,
.sa-filtri .wc-layered-nav-term > a:focus-visible {
    outline: 2px solid var(--sa-blu);
    outline-offset: -2px;
    color: var(--sa-inchiostro);
}

.sa-faccetta__link:active,
.sa-filtri .wc-layered-nav-term > a:active {
    transform: scale(0.985);
    background: var(--sa-superficie-3);
}

/* Valore senza risultati: il widget nativo lo stampa come <span>, non come
   collegamento. Va detto anche a occhio che non e' cliccabile. */
.sa-filtri .wc-layered-nav-term > span {
    color: var(--sa-inchiostro-3);
    cursor: default;
}

.sa-faccetta__etichetta {
    flex: 1 1 auto;
    min-width: 0;
}

/* Il conteggio: allineato a destra, cifre a passo fisso perche' incolonnate
   si leggono a colpo d'occhio. */
.sa-faccetta__link .count,
.sa-filtri .wc-layered-nav-term .count {
    flex: none;
    font-size: var(--sa-t-xs);
    font-variant-numeric: tabular-nums;
    color: var(--sa-inchiostro-3);
    background: var(--sa-superficie-2);
    border-radius: 999px;
    padding: 2px var(--sa-s2);
    min-width: 2.25em;
    text-align: center;
}

/* Il widget nativo mette il conteggio fuori dal collegamento: va riportato
   dentro la riga, allineato come gli altri. */
.sa-filtri .wc-layered-nav-term {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sa-s2);
}

.sa-filtri .wc-layered-nav-term > a,
.sa-filtri .wc-layered-nav-term > span {
    flex: 1 1 auto;
    min-width: 0;
}

/* Valore scelto */
.sa-faccetta__voce--scelta .sa-faccetta__link,
.sa-filtri .woocommerce-widget-layered-nav-list__item--chosen > a {
    color: var(--sa-blu);
    font-weight: 600;
    background: var(--sa-blu-tenue);
}

.sa-faccetta__voce--scelta .count,
.sa-filtri .woocommerce-widget-layered-nav-list__item--chosen .count {
    color: var(--sa-blu);
    background: var(--sa-superficie);
}

/* -------------------------------------------------------------------------
   4. FILTRI ATTIVI
   Il widget nativo stampa un <li class="chosen"><a>Etichetta</a>: ogni voce e'
   un comando che toglie quel filtro. Diventano gettoni con la croce.
   ------------------------------------------------------------------------- */

.sa-faccetta--attivi { border-bottom: 1px solid var(--sa-bordo); }

.sa-faccetta--attivi ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sa-s2);
    padding-bottom: var(--sa-s3);
}

.sa-faccetta--attivi li { margin: 0; }

.sa-faccetta--attivi li > a {
    display: inline-flex;
    align-items: center;
    gap: var(--sa-s2);
    min-height: var(--sa-tocco);
    padding: var(--sa-s1) var(--sa-s3);
    border: 1px solid var(--sa-blu);
    border-radius: 999px;
    background: var(--sa-blu-tenue);
    color: var(--sa-blu);
    font-size: var(--sa-t-xs);
    font-weight: 600;
    line-height: var(--sa-riga-stretta);
    text-decoration: none;
    transition:
        background-color var(--sa-durata) var(--sa-curva),
        transform var(--sa-durata-uscita) var(--sa-curva);
}

/* La croce e' disegnata, non e' un carattere: cosi' non dipende dal font e non
   viene letta come testo. */
.sa-faccetta--attivi li > a::after {
    content: '';
    flex: none;
    width: 12px;
    height: 12px;
    background-color: currentColor;
    -webkit-mask: var(--sa-croce) center / 12px 12px no-repeat;
            mask: var(--sa-croce) center / 12px 12px no-repeat;
}

:root {
    --sa-croce: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'%3E%3Cline x1='5' y1='5' x2='19' y2='19'/%3E%3Cline x1='19' y1='5' x2='5' y2='19'/%3E%3C/svg%3E");
}

.sa-faccetta--attivi li > a:hover {
    background: var(--sa-superficie);
    text-decoration: none;
}

.sa-faccetta--attivi li > a:focus-visible {
    outline: 2px solid var(--sa-blu);
    outline-offset: 2px;
}

.sa-faccetta--attivi li > a:active { transform: scale(0.96); }

/* -------------------------------------------------------------------------
   5. FILTRO PREZZO
   Markup nativo di WooCommerce (content-widget-price-filter.php). Il cursore a
   trascinamento e' disattivato da PHP: restano i due campi, che su un listino
   B2B sono piu' precisi e non richiedono un puntatore fine.
   ------------------------------------------------------------------------- */

.sa-filtri .price_slider,
.sa-filtri .price_label,
.sa-filtri .clear { display: none !important; }

.sa-filtri .price_slider_amount {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--sa-s2);
}

/* Il trattino fra i due campi: e' solo un segno, non va letto. */
.sa-filtri .price_slider_amount::before {
    content: '—';
    grid-column: 2;
    grid-row: 1;
    color: var(--sa-inchiostro-3);
}

.sa-filtri #min_price { grid-column: 1; grid-row: 1; }
.sa-filtri #max_price { grid-column: 3; grid-row: 1; }

.sa-filtri .price_slider_amount .button {
    grid-column: 1 / -1;
    grid-row: 2;
}

.sa-filtri .price_slider_amount input[type="text"] {
    width: 100%;
    min-height: var(--sa-tocco);
    padding: var(--sa-s2) var(--sa-s3);
    border: 1px solid var(--sa-bordo-forte);
    border-radius: var(--sa-raggio);
    background: var(--sa-superficie);
    color: var(--sa-inchiostro);
    font-family: var(--sa-font-num);
    font-size: var(--sa-t-sm);
    font-variant-numeric: tabular-nums;
    transition: border-color var(--sa-durata) var(--sa-curva);
}

.sa-filtri .price_slider_amount input[type="text"]:hover {
    border-color: var(--sa-inchiostro-3);
}

.sa-filtri .price_slider_amount input[type="text"]:focus {
    outline: 2px solid var(--sa-blu);
    outline-offset: 1px;
    border-color: var(--sa-blu);
}

.sa-filtri .price_slider_amount .button {
    /* Storefront colora i .button a modo suo: qui il colore va dichiarato,
       perche' un <button> non eredita `color` e resterebbe nero. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: var(--sa-tocco);
    padding: var(--sa-s2) var(--sa-s4);
    border: 1px solid var(--sa-blu);
    border-radius: var(--sa-raggio);
    background: var(--sa-blu);
    color: var(--sa-superficie);
    font-family: var(--sa-font);
    font-size: var(--sa-t-sm);
    font-weight: 600;
    line-height: var(--sa-riga-stretta);
    text-shadow: none;
    cursor: pointer;
    transition:
        background-color var(--sa-durata) var(--sa-curva),
        transform var(--sa-durata-uscita) var(--sa-curva);
}

.sa-filtri .price_slider_amount .button:hover {
    background: var(--sa-blu-scuro);
    border-color: var(--sa-blu-scuro);
    color: var(--sa-superficie);
}

.sa-filtri .price_slider_amount .button:focus-visible {
    outline: 2px solid var(--sa-inchiostro);
    outline-offset: 2px;
}

.sa-filtri .price_slider_amount .button:active { transform: scale(0.98); }

/* -------------------------------------------------------------------------
   6. IL PULSANTE CHE APRE IL PANNELLO
   Esiste solo sotto il punto di rottura: sopra, i filtri sono gia' in colonna.
   ------------------------------------------------------------------------- */

.sa-filtri-apri {
    display: none; /* acceso nella media query in fondo */
    align-items: center;
    gap: var(--sa-s2);
    min-height: var(--sa-tocco);
    padding: var(--sa-s2) var(--sa-s4);
    border: 1px solid var(--sa-bordo-forte);
    border-radius: var(--sa-raggio);
    background: var(--sa-superficie);
    color: var(--sa-inchiostro);
    font-family: var(--sa-font);
    font-size: var(--sa-t-sm);
    font-weight: 600;
    line-height: var(--sa-riga-stretta);
    cursor: pointer;
    transition:
        background-color var(--sa-durata) var(--sa-curva),
        border-color var(--sa-durata) var(--sa-curva),
        transform var(--sa-durata-uscita) var(--sa-curva);
}

.sa-filtri-apri:hover {
    background: var(--sa-superficie-2);
    border-color: var(--sa-inchiostro-3);
}

.sa-filtri-apri:focus-visible {
    outline: 2px solid var(--sa-blu);
    outline-offset: 2px;
}

.sa-filtri-apri:active { transform: scale(0.98); }

.sa-filtri-apri[aria-expanded="true"] {
    border-color: var(--sa-blu);
    color: var(--sa-blu);
}

.sa-filtri-apri__numero {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    height: 1.5rem;
    padding: 0 var(--sa-s1);
    border-radius: 999px;
    background: var(--sa-blu);
    color: var(--sa-superficie);
    font-size: var(--sa-t-xs);
    font-variant-numeric: tabular-nums;
}

/* -------------------------------------------------------------------------
   7. IL PULSANTE DI CHIUSURA DEL PANNELLO
   ------------------------------------------------------------------------- */

.sa-filtri__chiudi {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Quadrato pieno da 44px: sul bordo dello schermo si sbaglia facilmente. */
    width: var(--sa-tocco);
    height: var(--sa-tocco);
    margin: calc(var(--sa-s2) * -1) calc(var(--sa-s2) * -1) calc(var(--sa-s2) * -1) 0;
    border: 0;
    border-radius: var(--sa-raggio);
    background: transparent;
    color: var(--sa-inchiostro-2);
    cursor: pointer;
    transition:
        background-color var(--sa-durata) var(--sa-curva),
        transform var(--sa-durata-uscita) var(--sa-curva);
}

.sa-filtri__chiudi:hover {
    background: var(--sa-superficie-2);
    color: var(--sa-inchiostro);
}

.sa-filtri__chiudi:focus-visible {
    outline: 2px solid var(--sa-blu);
    outline-offset: -2px;
}

.sa-filtri__chiudi:active { transform: scale(0.92); }

.sa-filtri__chiudi[hidden] { display: none; }

/* -------------------------------------------------------------------------
   8. SCHERMO STRETTO: IL PANNELLO
   Un foglio che entra da sinistra. Non e' una finestra modale: sotto non c'e'
   nessun velo, la pagina resta leggibile e si continua a scorrerla. Dentro il
   pannello lo scorrimento e' suo (`overscroll-behavior: contain`), cosi' non
   trascina la pagina quando si arriva in fondo all'elenco.
   ------------------------------------------------------------------------- */

@media (max-width: 991px) {

    .sa-filtri-apri { display: inline-flex; }

    /* La colonna smette di essere una colonna. */
    .sa-colonna-filtri {
        max-width: none;
        width: auto;
        float: none;
        margin: 0;
    }

    /* Il contenitore della colonna appartiene al modulo catalogo. Qui serve
       solo che non nasconda il pannello: il pannello e' `fixed`, quindi non
       occupa spazio e non sposta niente. `:has` limita la regola al caso in cui
       il pannello sia davvero dentro, per non interferire altrove. */
    .sa-catalogo__lato:has(> .sa-filtri) {
        display: block;
        width: auto;
        margin: 0;
        padding: 0;
        border: 0;
        background: none;
    }

    .sa-filtri {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        z-index: var(--sa-z-modale);

        width: min(22rem, 88vw);
        max-height: 100%;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;

        border-radius: 0;
        border-width: 0 1px 0 0;
        box-shadow: var(--sa-ombra-alta);

        /* Chiuso: fuori campo e fuori dal giro di tabulazione. `visibility`
           fa il lavoro vero — un elemento nascosto cosi' non e' raggiungibile
           da tastiera nemmeno se lo script non e' arrivato. */
        transform: translateX(-100%);
        visibility: hidden;
        transition:
            transform var(--sa-durata) var(--sa-curva),
            visibility 0s linear var(--sa-durata);
    }

    .sa-filtri.sa-filtri--aperto {
        transform: translateX(0);
        visibility: visible;
        transition:
            transform var(--sa-durata) var(--sa-curva),
            visibility 0s;
    }

    .sa-filtri__testa {
        position: sticky;
        top: calc(var(--sa-s4) * -1);
        z-index: 1;
        margin: calc(var(--sa-s4) * -1) calc(var(--sa-s4) * -1) 0;
        padding: var(--sa-s4);
        background: var(--sa-superficie);
        border-bottom: 1px solid var(--sa-bordo);
    }

    .sa-filtri__risultati { padding-top: var(--sa-s3); }
}

/* Chi ha chiesto meno movimento non deve vedere il foglio scorrere: appare e
   basta. La regola globale in tokens.css azzera le durate, qui va tolto anche
   il ritardo sulla visibilita', che altrimenti resterebbe. */
@media (prefers-reduced-motion: reduce) {
    .sa-filtri { transition-delay: 0s !important; }
}

/* -------------------------------------------------------------------------
   9. STAMPA
   Un elenco di filtri su carta non serve a nessuno.
   ------------------------------------------------------------------------- */

@media print {
    .sa-filtri,
    .sa-filtri-apri { display: none !important; }
}