/* =========================================================================
   SARTORI TRADE — Catalogo: griglia, scheda-card, ordinamento, impaginazione

   Il foglio arriva DOPO woocommerce.css di Storefront (l'ordine e' imposto da
   inc/catalogo.php): le regole di galleggiamento del tema padre vanno quindi
   spente esplicitamente, non basta scriverne di nuove.
   ========================================================================= */

/* -------------------------------------------------------------------------
   IMPAGINAZIONE A DUE COLONNE
   La colonna laterale e' dei filtri (altro modulo). Se nessuno la riempie,
   inc/catalogo.php marca il contenitore .sa-catalogo--pieno e la griglia
   prende tutta la larghezza.
   ------------------------------------------------------------------------- */

.sa-catalogo {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sa-s5);
    align-items: start;
}
@media (min-width: 1024px) {
    .sa-catalogo:not(.sa-catalogo--pieno) {
        grid-template-columns: minmax(220px, 260px) 1fr;
        gap: var(--sa-s6);
    }
}
.sa-catalogo__corpo { min-width: 0; }   /* senza, la griglia sfonda a destra */
.sa-catalogo__lato  { min-width: 0; }

/* -------------------------------------------------------------------------
   TESTATA DELL'ARCHIVIO
   ------------------------------------------------------------------------- */

.sa-archivio-testata { margin-bottom: var(--sa-s5); }

.sa-archivio-testata__titolo {
    margin: 0;
    font-size: var(--sa-t-xl);
    /* I nomi di categoria arrivano dal gestionale tutti in maiuscolo:
       si riportano a maiuscola iniziale senza toccare i dati. */
    text-transform: none;
}
@media (min-width: 768px) {
    .sa-archivio-testata__titolo { font-size: var(--sa-t-2xl); }
}

.sa-archivio-testata__conteggio {
    margin: var(--sa-s1) 0 0;
    max-width: none;
    color: var(--sa-inchiostro-2);
    font-size: var(--sa-t-sm);
}
.sa-archivio-testata__testo {
    margin-top: var(--sa-s3);
    color: var(--sa-inchiostro-2);
    font-size: var(--sa-t-sm);
}
.sa-archivio-testata__testo p { margin: 0 0 var(--sa-s2); }

/* --- Sottocategorie: il modo piu' rapido di restringere su due livelli --- */

/* Quando c'e' la colonna dei filtri, l'elenco delle sottocategorie e' gia'
   li' dentro: ripeterlo sopra la griglia sono venti pastiglie che allontanano
   i prodotti senza aggiungere niente. Restano solo dove la colonna non si
   vede, cioe' sotto i 1024px, dove i filtri stanno chiusi dietro un pulsante. */
.sa-sottocategorie { margin-top: var(--sa-s4); }
@media (min-width: 1024px) {
    .sa-catalogo:not(.sa-catalogo--pieno) .sa-sottocategorie { display: none; }
}
.sa-sottocategorie__lista {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sa-s2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.sa-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--sa-s2);
    min-height: var(--sa-tocco);
    padding: var(--sa-s2) var(--sa-s3);
    background: var(--sa-superficie);
    border: 1px solid var(--sa-bordo-forte);
    border-radius: var(--sa-raggio);
    color: var(--sa-inchiostro);
    font-size: var(--sa-t-sm);
    font-weight: 600;
    text-decoration: none;
    line-height: 1.2;
}
.sa-chip:hover {
    background: var(--sa-blu-tenue);
    border-color: var(--sa-blu);
    color: var(--sa-blu);
}
.sa-chip__num {
    font-size: var(--sa-t-xs);
    font-weight: 600;
    color: var(--sa-inchiostro-2);
    font-variant-numeric: tabular-nums;
}
.sa-chip:hover .sa-chip__num { color: var(--sa-blu); }

/* Variante compatta: cambia il testo e il riempimento, NON il bersaglio.
   L'altezza resta 44px — "piccolo" vuol dire che pesa meno nella pagina, non
   che si prende meno spazio sotto il dito. */
.sa-chip--piccolo {
    padding: var(--sa-s1) var(--sa-s3);
    font-size: var(--sa-t-xs);
    font-weight: 600;
}

/* -------------------------------------------------------------------------
   BARRA DEGLI STRUMENTI
   ------------------------------------------------------------------------- */

.sa-barra-catalogo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--sa-s3);
    padding: var(--sa-s3) var(--sa-s4);
    margin-bottom: var(--sa-s4);
    background: var(--sa-superficie);
    border: 1px solid var(--sa-bordo);
    border-radius: var(--sa-raggio);
}

.sa-barra-catalogo__conteggio { flex: 1 1 auto; min-width: 0; }
.woocommerce-result-count.sa-conteggio {
    margin: 0;
    max-width: none;
    font-size: var(--sa-t-sm);
    color: var(--sa-inchiostro-2);
}
.sa-conteggio .sa-num { color: var(--sa-inchiostro); }

.sa-barra-catalogo__ordina {
    display: flex;
    align-items: center;
    gap: var(--sa-s2);
    flex: 0 0 auto;
}
.sa-barra-catalogo__icona { display: inline-flex; color: var(--sa-inchiostro-2); }

.woocommerce-ordering.sa-ordina {
    display: flex;
    align-items: center;
    gap: var(--sa-s2);
    margin: 0;
    float: none;   /* Storefront lo fa galleggiare a destra */
}
.sa-ordina__etichetta {
    font-size: var(--sa-t-sm);
    color: var(--sa-inchiostro-2);
    white-space: nowrap;
}
.sa-ordina__campo {
    min-height: var(--sa-tocco);
    max-width: 100%;
    padding: var(--sa-s2) var(--sa-s3);
    background: var(--sa-superficie);
    border: 1px solid var(--sa-inchiostro-3);   /* bordo che si vede: 4,74:1 */
    border-radius: var(--sa-raggio);
    color: var(--sa-inchiostro);
    font-family: var(--sa-font);
    font-size: var(--sa-t-sm);
    font-weight: 600;
    cursor: pointer;
}
.sa-ordina__campo:hover { border-color: var(--sa-blu); }

@media (max-width: 599px) {
    /* Sul telefono l'etichetta scritta ruberebbe mezza riga alla tendina. */
    .sa-ordina__etichetta { position: absolute; left: -9999px; }
    .sa-barra-catalogo { padding: var(--sa-s3); }
    .sa-barra-catalogo__ordina { flex: 1 1 100%; }
    .woocommerce-ordering.sa-ordina { flex: 1 1 auto; }
    .sa-ordina__campo { flex: 1 1 auto; width: 100%; }
}

/* -------------------------------------------------------------------------
   GRIGLIA
   Quattro colonne su desktop, come dichiarato in functions.php. Storefront
   usa percentuali e float: si spengono tutte e si passa a griglia vera.
   ------------------------------------------------------------------------- */

.sa-catalogo ul.products,
.woocommerce ul.products {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sa-s4);
    margin: 0;
    padding: 0;
    list-style: none;
}
.sa-catalogo ul.products::before,
.sa-catalogo ul.products::after { content: none; }

.sa-catalogo ul.products li.product,
.woocommerce ul.products li.product,
.site-main ul.products li.product,
.site-main ul.products.columns-4 li.product,
.site-main ul.products.columns-3 li.product {
    width: auto;
    float: none;
    clear: none;
    margin: 0;
    padding: 0;
    font-size: var(--sa-t-base);
    text-align: start;
}

@media (min-width: 600px)  { .sa-catalogo ul.products { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .sa-catalogo ul.products { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1280px) { .sa-catalogo ul.products { grid-template-columns: repeat(4, 1fr); } }

/* Senza colonna filtri c'e' posto per quattro schede gia' a 1024px. */
.sa-catalogo--pieno ul.products { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 900px)  { .sa-catalogo--pieno ul.products { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .sa-catalogo--pieno ul.products { grid-template-columns: repeat(4, 1fr); } }

/* -------------------------------------------------------------------------
   SCHEDA-CARD
   ------------------------------------------------------------------------- */

.sa-catalogo ul.products li.sa-scheda {
    display: flex;
    flex-direction: column;
    background: var(--sa-superficie);
    border: 1px solid var(--sa-bordo);
    border-radius: var(--sa-raggio);
    overflow: hidden;
    position: relative;
    transition: border-color var(--sa-durata) var(--sa-curva),
                box-shadow var(--sa-durata) var(--sa-curva);
}
.sa-catalogo ul.products li.sa-scheda:hover {
    border-color: var(--sa-bordo-forte);
    box-shadow: var(--sa-ombra);
}

.sa-scheda__link {
    display: block;
    text-decoration: none;
    color: inherit;
    padding: var(--sa-s3);
}
.sa-scheda__link:hover { color: inherit; }
.sa-scheda__link:active { transform: scale(.995); }

/* --- Figura: rapporto fisso, cosi' le righe della griglia non ballano --- */

.sa-scheda__figura {
    position: relative;
    aspect-ratio: 1 / 1;
    background: var(--sa-superficie-2);
    border-radius: var(--sa-raggio);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sa-catalogo ul.products li.product .sa-scheda__figura img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    margin: 0;              /* Storefront mette margin: 0 auto 1.618em */
}

/* Segnaposto per i 1.863 articoli senza fotografia. Non un buco: un riquadro
   con l'icona e il codice, che e' comunque un'informazione. */
.sa-segnaposto {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--sa-s2);
    width: 100%;
    height: 100%;
    color: var(--sa-inchiostro-3);
    background:
        repeating-linear-gradient(
            135deg,
            var(--sa-superficie-2) 0 10px,
            var(--sa-superficie-3) 10px 20px
        );
}
.sa-segnaposto__codice {
    font-size: var(--sa-t-xs);
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--sa-inchiostro-2);
    background: var(--sa-superficie);
    border-radius: var(--sa-raggio);
    padding: 2px var(--sa-s2);
    font-variant-numeric: tabular-nums;
}

.sa-bollino {
    position: absolute;
    top: var(--sa-s2);
    inset-inline-start: var(--sa-s2);
    z-index: var(--sa-z-base);
    padding: 2px var(--sa-s2);
    border-radius: var(--sa-raggio);
    font-size: var(--sa-t-xs);
    font-weight: 700;
    letter-spacing: .02em;
}
.sa-bollino--offerta {
    background: var(--sa-blu);
    color: var(--sa-superficie);
}

/* --- Testa: prima il codice, poi il nome --- */

.sa-scheda__testa { margin-top: var(--sa-s3); }

.sa-scheda__sku {
    display: block;
    font-size: var(--sa-t-xs);
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--sa-blu);
    font-variant-numeric: tabular-nums;
    margin-bottom: 2px;
}

.sa-catalogo ul.products li.product .woocommerce-loop-product__title {
    margin: 0;
    padding: 0;
    font-size: var(--sa-t-sm);
    font-weight: 600;
    line-height: 1.35;
    color: var(--sa-inchiostro);
    /* Tre righe: oltre, i nomi tecnici lunghi sfondano la scheda e le righe
       della griglia non tornano piu' allineate. Il nome intero resta nel
       titolo del collegamento e nella scheda prodotto. */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.sa-scheda__link:hover .woocommerce-loop-product__title { color: var(--sa-blu); }

/* --- Dati: prezzo e disponibilita' --- */

.sa-scheda__dati {
    padding: 0 var(--sa-s3) var(--sa-s3);
    margin-top: auto;   /* incolla il blocco in basso: i prezzi si allineano */
}

.sa-catalogo ul.products li.product .price {
    display: block;
    margin: 0 0 var(--sa-s2);
    color: var(--sa-inchiostro);
    font-size: var(--sa-t-md);
    font-weight: 700;
    line-height: 1.2;
}
.sa-catalogo ul.products li.product .price del {
    font-size: var(--sa-t-sm);
    font-weight: 400;
    color: var(--sa-inchiostro-2);
    margin-inline-end: var(--sa-s2);
}
.sa-catalogo ul.products li.product .price ins {
    text-decoration: none;
    background: transparent;
    margin: 0;
}

/* "+ IVA": e' una nota, non un prezzo. Non deve competere con la cifra ma
   deve restare leggibile — 7,3:1 sul fondo della scheda. */
.sa-iva {
    font-size: var(--sa-t-xs);
    font-weight: 600;
    color: var(--sa-inchiostro-2);
    letter-spacing: .01em;
    white-space: nowrap;
}

.sa-scheda__stato { min-height: 22px; }

/* --- Azioni --- */

.sa-scheda__azioni { padding: 0 var(--sa-s3) var(--sa-s3); }
.sa-catalogo ul.products li.product .sa-scheda__azioni .button {
    display: inline-flex;
    width: 100%;
    min-height: var(--sa-tocco);
    margin: 0;
    padding: var(--sa-s2) var(--sa-s3);
    font-size: var(--sa-t-sm);
    font-weight: 600;
    text-align: center;
    background: var(--sa-superficie);
    color: var(--sa-blu);
    border: 1px solid var(--sa-bordo-forte);
    border-radius: var(--sa-raggio);
}
/* Nella griglia il pulsante e' secondario finche' non lo si punta: 36 rettangoli
   arancioni tutti insieme non sarebbero un invito, sarebbero rumore. Al
   passaggio e alla pressione prende il colore dell'azione, con il testo scuro
   che ci sta sopra a 8,85:1. */
.sa-catalogo ul.products li.product .sa-scheda__azioni .button:hover,
.sa-catalogo ul.products li.product .sa-scheda__azioni .button:focus-visible {
    background: var(--sa-azione);
    color: var(--sa-su-azione);
    border-color: var(--sa-azione-scuro);
}
.sa-catalogo ul.products li.product .sa-scheda__azioni .button:active {
    background: var(--sa-azione-scuro);
    color: var(--sa-su-azione);
}
.sa-catalogo ul.products li.product .sa-scheda__azioni .added_to_cart {
    display: inline-flex;
    align-items: center;
    min-height: var(--sa-tocco);
    margin-top: var(--sa-s1);
    font-size: var(--sa-t-xs);
    font-weight: 600;
    color: var(--sa-ok);
}

/* --- Sotto i 600px la scheda diventa una riga: immagine a sinistra, dati a
       destra. Piu' densa di una colonna sola e piu' leggibile di due colonne
       strette, dove il codice articolo andrebbe a capo. --- */

@media (max-width: 599px) {
    .sa-scheda__link {
        display: grid;
        grid-template-columns: 84px 1fr;
        gap: var(--sa-s3);
        align-items: start;
    }
    .sa-scheda__figura { border-radius: var(--sa-raggio); }
    .sa-scheda__testa { margin-top: 0; }
    .sa-catalogo ul.products li.product .woocommerce-loop-product__title {
        -webkit-line-clamp: 4;
        line-clamp: 4;
    }
    .sa-scheda__dati {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--sa-s2) var(--sa-s3);
    }
    .sa-catalogo ul.products li.product .price { margin: 0; }
}

/* -------------------------------------------------------------------------
   IMPAGINAZIONE
   ------------------------------------------------------------------------- */

.woocommerce-pagination.sa-pagine {
    margin-top: var(--sa-s6);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sa-s3);
}
.sa-pagine__posizione {
    margin: 0;
    max-width: none;
    font-size: var(--sa-t-sm);
    color: var(--sa-inchiostro-2);
}

.sa-pagine ul.page-numbers {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--sa-s1);
    margin: 0;
    padding: 0;
    list-style: none;
    border: 0;
}
.sa-pagine ul.page-numbers li { border: 0; margin: 0; }

.sa-pagine .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sa-s1);
    min-width: var(--sa-tocco);
    min-height: var(--sa-tocco);
    padding-inline: var(--sa-s3);
    background: var(--sa-superficie);
    border: 1px solid var(--sa-bordo-forte);
    border-radius: var(--sa-raggio);
    color: var(--sa-inchiostro);
    font-size: var(--sa-t-sm);
    font-weight: 600;
    text-decoration: none;
    font-variant-numeric: tabular-nums;
}
.sa-pagine .page-numbers:hover {
    background: var(--sa-blu-tenue);
    border-color: var(--sa-blu);
    color: var(--sa-blu);
}
.sa-pagine .page-numbers.current {
    background: var(--sa-blu);
    border-color: var(--sa-blu);
    color: var(--sa-superficie);
}
.sa-pagine .page-numbers.dots {
    border-color: transparent;
    background: transparent;
    color: var(--sa-inchiostro-2);
    min-width: 24px;
    padding-inline: 0;
}
.sa-pagine__freccia { display: inline-flex; }
.sa-pagine__freccia--indietro { transform: rotate(180deg); }

@media (max-width: 599px) {
    /* Su schermo stretto le parole "Precedente/Successiva" farebbero andare a
       capo tutta la riga: restano le frecce, con il nome per chi ascolta. */
    .sa-pagine__parola { position: absolute; left: -9999px; }
    .sa-pagine .page-numbers { padding-inline: var(--sa-s2); }
}

/* -------------------------------------------------------------------------
   NESSUN RISULTATO
   ------------------------------------------------------------------------- */

.woocommerce-info,
.woocommerce-message,
.woocommerce-error,
.woocommerce-no-products-found .woocommerce-info {
    background: var(--sa-superficie);
    border: 1px solid var(--sa-bordo-forte);
    border-inline-start: 4px solid var(--sa-blu);
    border-radius: var(--sa-raggio);
    color: var(--sa-inchiostro);
    padding: var(--sa-s4);
    font-size: var(--sa-t-sm);
    line-height: var(--sa-riga);
}
.woocommerce-error { border-inline-start-color: var(--sa-errore); }
.woocommerce-message { border-inline-start-color: var(--sa-ok); }

.sa-vuoto-catalogo {
    background: var(--sa-superficie);
    border: 1px solid var(--sa-bordo);
    border-radius: var(--sa-raggio);
    padding: var(--sa-s5);
}
.sa-vuoto-catalogo__titolo {
    display: flex;
    align-items: center;
    gap: var(--sa-s2);
    margin: 0 0 var(--sa-s3);
    max-width: none;
    font-size: var(--sa-t-lg);
    font-weight: 650;
    color: var(--sa-inchiostro);
}
.sa-vuoto-catalogo__titolo .sa-icona { flex: none; color: var(--sa-inchiostro-2); }
.sa-vuoto-catalogo__idee {
    margin: 0;
    padding-inline-start: var(--sa-s5);
    color: var(--sa-inchiostro-2);
    font-size: var(--sa-t-sm);
    line-height: var(--sa-riga);
}
.sa-vuoto-catalogo__idee li { margin-bottom: var(--sa-s2); }
.sa-vuoto-catalogo__idee a { color: var(--sa-blu); }

/* -------------------------------------------------------------------------
   ETICHETTE DI STATO — rifinitura
   Il segno grafico e la parola stanno sempre insieme (base.css): qui si
   sistemano solo allineamento e respiro.
   ------------------------------------------------------------------------- */

.sa-stato {
    line-height: 1.3;
    padding-block: 3px;
    max-width: 100%;
}
.sa-stato .sa-icona { flex: none; }
.sa-stato > span { min-width: 0; }