/* =========================================================================
   SARTORI TRADE — Struttura: testata, piede, home, impaginazione generale

   REGOLA DI COLORE VERIFICATA (vedi import/verifica_tema.md)
   Su fondo blu il testo NON e' mai #fff scritto a mano: e' --sa-superficie.
   Nel tema scuro --sa-blu diventa un azzurro chiaro (#4d9fe8) e il bianco ci
   starebbe sopra a 2,8:1 — illeggibile. Con --sa-superficie il rapporto e'
   8,77:1 in chiaro e 6,30:1 in scuro, perche' la variabile si ribalta
   insieme al fondo.
   Per lo stesso motivo il testo secondario e' --sa-inchiostro-2 (7,3:1) e non
   --sa-inchiostro-3, che sul fondo pagina si ferma a 4,45:1.
   ========================================================================= */

/* -------------------------------------------------------------------------
   CORREZIONI ALLE FONDAMENTA
   Due regole scritte altrove non reggono il tema scuro. Si correggono qui,
   senza toccare i token: cambiano solo i riferimenti, non i valori.
   ------------------------------------------------------------------------- */

/* base.css mette color:#fff sui bottoni blu: nel tema scuro il blu schiarisce
   e il bianco sparisce. --sa-superficie segue il tema e regge in entrambi. */
.button,
.sa-btn,
.button:hover,
.sa-btn:hover,
input[type="submit"] {
    color: var(--sa-superficie);
}

/* Il contorno di fuoco azzurro su fondo chiaro sta a 2,79:1: sotto il minimo
   di 3:1 per un elemento grafico. Il blu di marchio arriva a 8,24:1 in chiaro
   e 5,73:1 in scuro. */
:focus-visible {
    outline-color: var(--sa-blu);
}
.sa-su-fondo-blu :focus-visible {
    outline-color: var(--sa-superficie);
}

/* Storefront colora i campi con valori fissi (#f2f2f2 di fondo, #43454b di
   testo) su un selettore lungo: nel tema scuro restano due chiazze chiare in
   mezzo al buio. Si riportano ai token, con la stessa lunghezza di selettore
   per non dover ricorrere a !important. */
input[type="text"],
input[type="number"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="password"],
input[type="search"],
textarea,
.input-text {
    background-color: var(--sa-superficie);
    color: var(--sa-inchiostro);
    border: 1px solid var(--sa-inchiostro-3);
    border-radius: var(--sa-raggio);
    box-shadow: none;
    font-family: var(--sa-font);
}
input[type="text"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
textarea:focus,
.input-text:focus {
    background-color: var(--sa-superficie);
    border-color: var(--sa-blu);
}
::placeholder { color: var(--sa-inchiostro-2); opacity: 1; }

/* I comandi nativi (tendine, selettori di data, barre di scorrimento interne)
   devono sapere in che tema stanno, altrimenti il browser li disegna chiari
   anche sul buio. */
input, select, textarea { color-scheme: light dark; }

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

.sa-sito {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.sa-contenuto {
    flex: 1 0 auto;
    padding-block: var(--sa-s5) var(--sa-s8);
}

/* Storefront dichiara .col-full con un box-sizing content-box e una larghezza
   in em: la si riporta al contenitore del tema. */
.sa-contenuto > .col-full {
    max-width: 1360px;
    box-sizing: border-box;
    margin-inline: auto;
}

/* Il tema padre lascia una barra laterale vuota su alcune viste. */
#secondary.widget-area:empty { display: none; }

/* Storefront impagina su due colonne (73,9% + barra laterale) anche quando la
   barra laterale non c'e'. Qui la barra e' tolta ovunque (inc/catalogo.php),
   quindi la colonna del contenuto prende tutta la larghezza. Sulle viste di
   catalogo #primary e' una casella della griglia .sa-catalogo: la stessa
   regola va bene, un elemento di griglia non galleggia. */
.sa-contenuto #primary,
.sa-contenuto #primary.content-area {
    width: 100%;
    float: none;
    margin-right: 0;
}

/* -------------------------------------------------------------------------
   TESTATA
   ------------------------------------------------------------------------- */

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

/* Striscia di servizio: informazione, non azione. */
.sa-testata__servizio {
    background: var(--sa-blu-scuro);
    color: var(--sa-superficie);
    font-size: var(--sa-t-xs);
}
.sa-testata__servizio-int {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--sa-s2);
    min-height: 34px;
}
.sa-testata__claim,
.sa-testata__recapito {
    margin: 0;
    max-width: none;
}
.sa-testata__recapito a {
    color: var(--sa-superficie);
    font-weight: 600;
    text-decoration: none;
    min-height: 34px;          /* la striscia e' informativa: il bersaglio
                                  pieno da 44px sta sotto, nel piede */
    padding-inline: var(--sa-s2);
}
.sa-testata__recapito a:hover { color: var(--sa-superficie-3); }

/* Sotto i 768px la striscia toglie il claim e lascia il numero di telefono:
   e' l'unica cosa che si tocca davvero da un cantiere. */
@media (max-width: 767px) {
    .sa-testata__claim { display: none; }
    .sa-testata__servizio-int { justify-content: center; }
}

/* --- Riga principale: marchio, ricerca, azioni --- */

.sa-testata__principale { padding-block: var(--sa-s3); }

.sa-testata__riga {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
        "marchio azioni"
        "cerca   cerca";
    align-items: center;
    gap: var(--sa-s3) var(--sa-s4);
}
@media (min-width: 1024px) {
    .sa-testata__riga {
        grid-template-columns: auto minmax(280px, 1fr) auto;
        grid-template-areas: "marchio cerca azioni";
        gap: var(--sa-s5);
    }
}

/* --- Marchio ---
   Il logo e le sue misure stanno in marchio.css (modulo a parte, classi
   .sa-logo / .sa-branding). Qui c'e' solo la casella che lo ospita: le due
   cose sono separate apposta, cosi' cambiare il marchio non tocca la testata
   e viceversa. */

.sa-testata__marchio {
    grid-area: marchio;
    display: flex;
    align-items: center;
    min-height: var(--sa-tocco);
}
/* Lo spazio di rispetto verticale del modulo marchio (mezza altezza sopra e
   sotto) nella testata diventerebbe un buco: qui la casella lo regola gia'. */
.sa-testata__marchio .sa-branding__logo { padding-block: 0; }
.sa-testata__marchio .sa-branding__logo:active { transform: scale(.98); }

/* Ripiego testuale, se il modulo marchio non e' caricato. */
.sa-marchio-testo {
    display: inline-flex;
    align-items: center;
    min-height: var(--sa-tocco);
    font-size: var(--sa-t-lg);
    font-weight: 700;
    letter-spacing: .01em;
    color: var(--sa-blu);
    text-decoration: none;
}

/* --- Ricerca: la funzione principale del sito --- */

.sa-cerca {
    grid-area: cerca;
    position: relative;
}
.sa-cerca__form {
    display: flex;
    align-items: stretch;
    background: var(--sa-superficie);
    border: 1px solid var(--sa-inchiostro-3);   /* 4,74:1: un bordo che si vede */
    border-radius: var(--sa-raggio);
    overflow: hidden;
}
.sa-cerca__form:focus-within {
    border-color: var(--sa-blu);
    box-shadow: 0 0 0 2px var(--sa-blu-tenue);
}
.sa-cerca__icona {
    display: flex;
    align-items: center;
    padding-left: var(--sa-s3);
    color: var(--sa-inchiostro-2);
    flex: none;
}
.sa-cerca__form .sa-cerca__campo,
input[type="search"].sa-cerca__campo {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 46px;
    border: 0;
    border-radius: 0;
    background: transparent;   /* il fondo e il bordo li porta il contenitore */
    box-shadow: none;
    padding: var(--sa-s2) var(--sa-s3);
    font-family: var(--sa-font);
    font-size: var(--sa-t-base);   /* mai sotto 16px: sotto, iOS zooma da solo */
    color: var(--sa-inchiostro);
}
.sa-cerca__campo::placeholder { color: var(--sa-inchiostro-2); opacity: 1; }
.sa-cerca__campo:focus { outline: none; }   /* il fuoco lo mostra il contenitore */
.sa-cerca__campo::-webkit-search-cancel-button { cursor: pointer; }

.sa-cerca__invio {
    flex: none;
    border: 0;
    border-radius: 0;
    background: var(--sa-blu);
    color: var(--sa-superficie);
    min-width: var(--sa-tocco);
    min-height: var(--sa-tocco);
    padding-inline: var(--sa-s3);
    font-weight: 600;
    font-size: var(--sa-t-sm);
    cursor: pointer;
}
.sa-cerca__invio:hover { background: var(--sa-blu-scuro); }
.sa-cerca__invio:active { transform: scale(.97); }
.sa-cerca__invio-testo { display: none; }
@media (min-width: 640px) {
    .sa-cerca__invio-icona { display: none; }
    .sa-cerca__invio-testo { display: inline; padding-inline: var(--sa-s2); }
}

/* Suggerimenti: pannello sotto il campo, mai piu' alto di mezza pagina. */
.sa-cerca__suggerimenti {
    position: absolute;
    inset-inline: 0;
    top: calc(100% + 4px);
    z-index: var(--sa-z-testata);
    background: var(--sa-superficie);
    border: 1px solid var(--sa-bordo-forte);
    border-radius: var(--sa-raggio);
    box-shadow: var(--sa-ombra-alta);
    max-height: min(60vh, 460px);
    overflow-y: auto;
    overscroll-behavior: contain;
}
.sa-cerca__suggerimenti[hidden] { display: none; }

.sa-sugg {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 2px var(--sa-s3);
    align-items: baseline;
    padding: var(--sa-s2) var(--sa-s3);
    min-height: var(--sa-tocco);
    text-decoration: none;
    color: var(--sa-inchiostro);
    border-bottom: 1px solid var(--sa-bordo);
}
.sa-sugg:last-child { border-bottom: 0; }
.sa-sugg:hover,
.sa-sugg[aria-selected="true"] { background: var(--sa-blu-tenue); }
.sa-sugg:active { background: var(--sa-superficie-3); }
.sa-sugg__codice {
    grid-column: 1;
    font-size: var(--sa-t-xs);
    font-weight: 700;
    color: var(--sa-blu);
    letter-spacing: .02em;
}
.sa-sugg__prezzo {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
    font-size: var(--sa-t-sm);
    font-weight: 700;
    white-space: nowrap;
}
.sa-sugg__nome {
    grid-column: 1;
    font-size: var(--sa-t-sm);
    color: var(--sa-inchiostro-2);
    line-height: 1.35;
}
/* Avviso di indisponibilita' dentro un suggerimento: parola, non pallino. */
.sa-sugg__esaurito {
    display: inline-block;
    font-size: var(--sa-t-xs);
    font-weight: 700;
    color: var(--sa-errore);
    background: var(--sa-errore-tenue);
    border-radius: var(--sa-raggio);
    padding: 0 var(--sa-s1);
    white-space: nowrap;
}

.sa-sugg--tutti {
    display: flex;
    justify-content: center;
    font-weight: 600;
    color: var(--sa-blu);
    background: var(--sa-superficie-2);
}
.sa-cerca__vuoto {
    padding: var(--sa-s4);
    margin: 0;
    color: var(--sa-inchiostro-2);
    font-size: var(--sa-t-sm);
}

/* --- Azioni: account, carrello, apri-menu --- */

.sa-azioni-testata {
    grid-area: azioni;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--sa-s1);
}

.sa-azione {
    display: inline-flex;
    align-items: center;
    gap: var(--sa-s2);
    min-height: var(--sa-tocco);
    min-width: var(--sa-tocco);
    padding-inline: var(--sa-s2);
    border-radius: var(--sa-raggio);
    text-decoration: none;
    color: var(--sa-inchiostro);
}
.sa-azione:hover { background: var(--sa-superficie-3); color: var(--sa-blu); }
.sa-azione:active { transform: scale(.97); }
.sa-azione__testo { display: none; }
.sa-azione__etichetta { display: block; font-size: var(--sa-t-sm); font-weight: 600; line-height: 1.2; }
.sa-azione__nota { display: block; font-size: var(--sa-t-xs); color: var(--sa-inchiostro-2); line-height: 1.2; }
@media (min-width: 1024px) {
    .sa-azione__testo { display: block; }
    .sa-azione { padding-inline: var(--sa-s3); }
}

/* Carrello: il pallino e' un rinforzo, il conteggio e' anche scritto. */
.sa-carrello__icona { position: relative; display: inline-flex; }
.sa-carrello__pallino {
    position: absolute;
    top: -6px;
    inset-inline-end: -8px;
    min-width: 18px;
    height: 18px;
    padding-inline: 4px;
    border-radius: 999px;
    background: var(--sa-blu);
    color: var(--sa-superficie);
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}

.sa-apri-menu {
    display: inline-flex;
    align-items: center;
    gap: var(--sa-s2);
    min-height: var(--sa-tocco);
    min-width: var(--sa-tocco);
    padding-inline: var(--sa-s2);
    background: transparent;
    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;
    cursor: pointer;
}
.sa-apri-menu:hover { background: var(--sa-superficie-3); }
.sa-apri-menu:active { transform: scale(.97); }
.sa-apri-menu__testo { display: none; }
@media (min-width: 480px) { .sa-apri-menu__testo { display: inline; } }
@media (min-width: 1024px) { .sa-apri-menu { display: none; } }

/* --- Fascia del menu ---
   Il CONTENUTO (quali voci, in che ordine) lo decide il modulo menu. Qui c'e'
   solo il guscio: la fascia e una impaginazione di riserva per la lista che
   WordPress stampa.
   La riserva serve davvero: un menu di 88 voci senza regole diventa un elenco
   puntato alto milletrecento pixel che si mangia la pagina prima ancora che si
   veda un prodotto. Sono regole a bassa specificita' apposta — se il modulo
   menu ne porta di sue, vincono le sue. */

.sa-nav-fascia {
    position: relative;
    background: var(--sa-superficie-3);
    border-top: 1px solid var(--sa-bordo);
}
.sa-nav-fascia:has(.sa-nav:empty) { display: none; }
.sa-nav:empty { display: none; }

.sa-nav ul {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}
.sa-nav li { position: relative; }
.sa-nav a {
    display: inline-flex;
    align-items: center;
    min-height: var(--sa-tocco);
    padding: var(--sa-s2) var(--sa-s3);
    color: var(--sa-inchiostro);
    font-size: var(--sa-t-sm);
    font-weight: 600;
    text-decoration: none;
    line-height: 1.25;
}
.sa-nav a:hover,
.sa-nav li:hover > a { background: var(--sa-superficie); color: var(--sa-blu); }
.sa-nav a:active { transform: scale(.98); }
.sa-nav .current-menu-item > a,
.sa-nav .current-menu-parent > a,
.sa-nav .current-menu-ancestor > a {
    color: var(--sa-blu);
    box-shadow: inset 0 -3px 0 var(--sa-blu);
}

/* Secondo livello: pannello sotto la voce. Si apre col puntatore e col
   fuoco da tastiera, cosi' non serve un clic per raggiungerlo. */
.sa-nav .sub-menu {
    display: none;
    position: absolute;
    top: 100%;
    inset-inline-start: 0;
    z-index: var(--sa-z-testata);
    flex-direction: column;
    flex-wrap: nowrap;
    min-width: 240px;
    max-width: 90vw;
    max-height: 70vh;
    overflow-y: auto;
    padding: var(--sa-s2) 0;
    background: var(--sa-superficie);
    border: 1px solid var(--sa-bordo-forte);
    border-radius: 0 0 var(--sa-raggio) var(--sa-raggio);
    box-shadow: var(--sa-ombra-alta);
}
.sa-nav li:hover > .sub-menu,
.sa-nav li:focus-within > .sub-menu { display: flex; }
.sa-nav .sub-menu a {
    width: 100%;
    font-weight: 500;
    padding-inline: var(--sa-s4);
}

@media (max-width: 1023px) {
    /* Sul telefono la navigazione parte chiusa: la testata non deve mangiarsi
       lo schermo prima ancora che si veda un prodotto. */
    .sa-nav-fascia { display: none; }
    .sa-nav-fascia.e-aperta {
        display: block;
        max-height: 70vh;
        overflow-y: auto;
        overscroll-behavior: contain;
    }
    /* Aperta, e' un elenco verticale: i pannelli a comparsa non hanno senso
       senza puntatore. Il secondo livello resta rientrato e sempre visibile. */
    .sa-nav ul { flex-direction: column; flex-wrap: nowrap; }
    .sa-nav .sub-menu {
        display: flex;
        position: static;
        border: 0;
        box-shadow: none;
        background: transparent;
        max-height: none;
        padding: 0;
        min-width: 0;
    }
    .sa-nav .sub-menu a {
        padding-inline-start: var(--sa-s6);
        font-size: var(--sa-t-sm);
        color: var(--sa-inchiostro-2);
    }
    .sa-nav > ul > li { border-bottom: 1px solid var(--sa-bordo); }
}

/* -------------------------------------------------------------------------
   BRICIOLE
   ------------------------------------------------------------------------- */

.sa-briciole-fascia {
    background: var(--sa-superficie);
    border-bottom: 1px solid var(--sa-bordo);
    padding-block: var(--sa-s2);
}
.sa-briciole__lista {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 var(--sa-s1);
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--sa-t-sm);
}
.sa-briciole__voce {
    display: inline-flex;
    align-items: center;
    gap: var(--sa-s1);
    color: var(--sa-inchiostro-2);
}
.sa-briciole__voce a {
    color: var(--sa-blu);
    text-decoration: none;
    padding-block: var(--sa-s2);      /* alza il bersaglio senza aprire buchi */
}
.sa-briciole__voce a:hover { text-decoration: underline; }
.sa-briciole__voce [aria-current="page"] { color: var(--sa-inchiostro); font-weight: 600; }
.sa-briciole__sep { display: inline-flex; color: var(--sa-inchiostro-3); }

/* -------------------------------------------------------------------------
   PIEDE
   ------------------------------------------------------------------------- */

.sa-piede {
    flex: none;
    background: var(--sa-blu-scuro);
    color: var(--sa-superficie);
    margin-top: var(--sa-s7);
}
.sa-piede__griglia {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sa-s6) var(--sa-s5);
    padding-block: var(--sa-s7);
}
@media (min-width: 600px)  { .sa-piede__griglia { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .sa-piede__griglia { grid-template-columns: 1.3fr 1fr 1fr 1.1fr; } }

.sa-piede__titolo {
    font-size: var(--sa-t-md);
    font-weight: 650;
    color: var(--sa-superficie);
    margin: 0 0 var(--sa-s3);
}
.sa-piede__indirizzo {
    font-style: normal;
    font-size: var(--sa-t-sm);
    color: var(--sa-superficie-3);       /* 11,37:1 in chiaro, 6,82:1 in scuro */
    line-height: var(--sa-riga);
    margin-bottom: var(--sa-s3);
}
.sa-piede__recapiti,
.sa-piede__lista {
    list-style: none;
    margin: 0;
    padding: 0;
}
.sa-piede a {
    color: var(--sa-superficie);
    text-decoration: none;
}
.sa-piede a:hover { text-decoration: underline; color: var(--sa-superficie); }
.sa-piede__recapiti a,
.sa-piede__lista a {
    display: inline-flex;
    align-items: center;
    gap: var(--sa-s2);
    min-height: var(--sa-tocco);
    font-size: var(--sa-t-sm);
    justify-content: flex-start;
}
.sa-piede__conteggio { color: var(--sa-superficie-3); font-size: var(--sa-t-xs); }
.sa-piede__nota {
    font-size: var(--sa-t-xs);
    color: var(--sa-superficie-3);
    margin: var(--sa-s3) 0 0;
    max-width: 34ch;
}

/* Metodi di pagamento: logo + nome scritto. Il logo da solo non basta —
   i marchi si somigliano tutti e in bianco e nero non si distinguono. */
.sa-pagamenti {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--sa-s2);
}
.sa-pagamenti__voce {
    display: flex;
    align-items: center;
    gap: var(--sa-s2);
    background: var(--sa-superficie);
    border-radius: var(--sa-raggio);
    padding: var(--sa-s1) var(--sa-s2);
    min-height: 34px;
}
.sa-pagamenti__logo {
    display: block;
    width: auto;
    height: 22px;
    max-width: 44px;
    object-fit: contain;
}
.sa-pagamenti__nome {
    font-size: var(--sa-t-xs);
    font-weight: 600;
    color: var(--sa-inchiostro);       /* sul riquadro bianco, 17,79:1 */
    white-space: nowrap;
}

/* I marchi di pagamento sono PNG trasparenti con disegno a colore fisso: il
   blu di Visa su fondo scuro sparisce. La targhetta deve quindi restare
   CHIARA anche nel tema scuro. Nessun colore nuovo: si scambiano i ruoli di
   due variabili che nel tema scuro valgono l'una il chiaro dell'altra
   (--sa-inchiostro = #e9edf2, --sa-superficie = #14181f). Il contrasto del
   nome resta 15:1.
   Da rifare con una variabile dedicata, se un giorno nasce. */
@media (prefers-color-scheme: dark) {
    :root:not([data-tema="chiaro"]) .sa-pagamenti__voce { background: var(--sa-inchiostro); }
    :root:not([data-tema="chiaro"]) .sa-pagamenti__nome { color: var(--sa-superficie); }
}
/* I due metodi con nome lungo vanno a capo da soli, non si tagliano. */
.sa-pagamenti__voce:nth-child(n + 4) { flex-basis: 100%; }
.sa-pagamenti__voce:nth-child(n + 4) .sa-pagamenti__nome { white-space: normal; }

/* --- Blocchi che gli altri moduli appendono al piede ---
   Le colonne di link (inc/menu.php) e il blocco societario (inc/legale.php)
   arrivano da moduli che non hanno un foglio di stile proprio. La grafica del
   piede e' di questo foglio: se non li si veste, restano elenchi puntati su
   fondo blu. --- */

.sa-piede__moduli { padding-bottom: var(--sa-s6); }

.sartori-footer-nav {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sa-s5);
}
@media (min-width: 600px)  { .sartori-footer-nav { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .sartori-footer-nav { grid-template-columns: repeat(3, 1fr); } }

.sartori-footer-title {
    margin: 0 0 var(--sa-s3);
    max-width: none;
    font-size: var(--sa-t-sm);
    font-weight: 650;
    letter-spacing: .04em;
    color: var(--sa-superficie);
}
.sartori-footer-menu {
    list-style: none;
    margin: 0;
    padding: 0;
}
.sartori-footer-menu a {
    display: inline-flex;
    align-items: center;
    min-height: var(--sa-tocco);
    font-size: var(--sa-t-sm);
    color: var(--sa-superficie-3);
}
.sartori-footer-menu a:hover { color: var(--sa-superficie); }

/* Blocco societario: ragione sociale, sede, dati fiscali. Testo piccolo ma
   sopra i 4,5:1 — sono le informazioni che per legge devono restare leggibili. */
.sa-footer-legale {
    margin-top: var(--sa-s5);
    padding-top: var(--sa-s4);
    border-top: 1px solid rgba(255, 255, 255, .18);
    text-align: center;
}
.sa-footer-legale p {
    margin: 0 0 var(--sa-s1);
    max-width: none;
    font-size: var(--sa-t-xs);
    color: var(--sa-superficie-3);      /* 11,37:1 in chiaro, 6,82:1 in scuro */
    line-height: var(--sa-riga);
}
.sa-footer-legale__societa { font-weight: 650; color: var(--sa-superficie) !important; font-size: var(--sa-t-sm) !important; }
.sa-footer-legale__link {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0 var(--sa-s3);
    margin-top: var(--sa-s2);
}
.sa-footer-legale__link a {
    font-size: var(--sa-t-xs);
    min-height: var(--sa-tocco);
    display: inline-flex;
    align-items: center;
}

.sa-piede__coda {
    border-top: 1px solid rgba(255, 255, 255, .18);
    padding-block: var(--sa-s3);
}
.sa-piede__coda-int {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--sa-s3);
}
.sa-piede__legale {
    margin: 0;
    max-width: none;
    font-size: var(--sa-t-xs);
    color: var(--sa-superficie-3);
}
.sa-piede__su { margin: 0; }
.sa-piede__su-link {
    font-size: var(--sa-t-sm);
    font-weight: 600;
    padding-inline: var(--sa-s3);
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: var(--sa-raggio);
}
.sa-piede__su-link:active { transform: scale(.97); }

/* -------------------------------------------------------------------------
   HOME
   Il contenuto della home arriva dalla migrazione da Magento e porta con se'
   i nomi di classe di quel sito (container, row, col-md-*, bloccotb...).
   Non si riscrive la pagina: si veste quello che c'e', tenendo le regole
   dentro .home cosi' non toccano nient'altro.
   ------------------------------------------------------------------------- */

.home .sa-contenuto { padding-top: 0; }
.home .entry-content > p:empty { display: none; }

.home .container {
    width: 100%;
    max-width: 1360px;
    margin-inline: auto;
    padding-inline: var(--sa-s4);
    box-sizing: border-box;
}
.home .row {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sa-s5);
}
@media (min-width: 768px) {
    .home .row { grid-template-columns: repeat(12, 1fr); }
    .home .col-12  { grid-column: span 12; }
    .home .col-md-12 { grid-column: span 12; }
    .home .col-md-6  { grid-column: span 6; }
    .home .col-md-4  { grid-column: span 4; }
}

/* --- Fascia delle immagini in alto ---
   Erano un carosello con una libreria che non c'e' piu'. Diventano una
   striscia che si trascina, con l'aggancio: nessuna animazione automatica,
   nessuna dipendenza. */
.home .topslider_home {
    display: flex;
    gap: var(--sa-s2);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
    margin: 0;
    padding-bottom: var(--sa-s2);
}
.home .topslider_home > .row-full {
    flex: 0 0 100%;
    scroll-snap-align: start;
    position: relative;
    border-radius: var(--sa-raggio-lg);
    overflow: hidden;
    background: var(--sa-superficie-3);
}
.home .topslider_home img {
    display: block;
    width: 100%;
    /* Rapporto dichiarato: senza, la pagina sobbalza quando arriva la foto. */
    aspect-ratio: 1920 / 640;
    object-fit: cover;
}
.home .topslider_home .abs_container {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    /* Velo scuro sotto il testo: senza, il bianco finisce su una foto chiara. */
    background: linear-gradient(180deg, rgba(0, 20, 45, 0) 45%, rgba(0, 20, 45, .78) 100%);
}
.home .testo_topslider p {
    margin: 0;
    padding: var(--sa-s4);
    color: #fff;                  /* sopra un velo scuro fisso, non un token */
    font-size: var(--sa-t-md);
    font-weight: 650;
    line-height: var(--sa-riga-stretta);
    max-width: 40ch;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
}
@media (min-width: 768px) {
    .home .testo_topslider p { font-size: var(--sa-t-xl); padding: var(--sa-s6); }
}

/* --- Tre promesse --- */
.home .margin-nega { margin-top: var(--sa-s6); }
.home .bloccotb {
    height: 100%;
    background: var(--sa-superficie);
    border: 1px solid var(--sa-bordo);
    border-radius: var(--sa-raggio-lg);
    padding: var(--sa-s5);
    box-shadow: var(--sa-ombra);
}
.home .bloccotb img {
    width: 44px;
    height: 44px;
    object-fit: contain;
    margin-bottom: var(--sa-s3);
}
.home .titolo_bt {
    margin: 0 0 var(--sa-s2);
    font-size: var(--sa-t-md);
    font-weight: 650;
    color: var(--sa-blu);
    max-width: none;
}
.home .test_bt {
    margin: 0;
    font-size: var(--sa-t-sm);
    color: var(--sa-inchiostro-2);
    max-width: none;
}

/* --- Fascia azzurra con le famiglie di prodotto --- */
.home .bg_bluchiaro {
    background: var(--sa-superficie-3);
    border-block: 1px solid var(--sa-bordo);
    margin-top: var(--sa-s7);
    padding-block: var(--sa-s7);
}
.home .tit_carousel {
    margin: 0 0 var(--sa-s5);
    text-align: center;
    font-size: var(--sa-t-xl);
    font-weight: 650;
    color: var(--sa-inchiostro);
    max-width: none;
}
.home .sliderhome {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sa-s3);
}
@media (min-width: 600px)  { .home .sliderhome { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .home .sliderhome { grid-template-columns: repeat(7, 1fr); } }
.home .item_link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sa-s2);
    height: 100%;
    padding: var(--sa-s4) var(--sa-s2);
    background: var(--sa-superficie);
    border: 1px solid var(--sa-bordo);
    border-radius: var(--sa-raggio);
    text-align: center;
}
.home .item_link img {
    width: 48px;
    height: 48px;
    object-fit: contain;
}
.home .item_link .texto p {
    margin: 0;
    font-size: var(--sa-t-xs);
    font-weight: 650;
    color: var(--sa-inchiostro);
    line-height: 1.3;
    max-width: none;
}
.home .btn-catalogo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--sa-tocco);
    margin-top: var(--sa-s5);
    padding: var(--sa-s3) var(--sa-s6);
    background: var(--sa-blu);
    color: var(--sa-superficie);
    border-radius: var(--sa-raggio);
    font-weight: 650;
    text-decoration: none;
}
.home .btn-catalogo:hover { background: var(--sa-blu-scuro); color: var(--sa-superficie); }
.home .btn-catalogo:active { transform: scale(.97); }

/* --- Due riquadri e testo di presentazione --- */
.home .colored_box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 120px;
    height: 100%;
    padding: var(--sa-s5);
    border-radius: var(--sa-raggio-lg);
    background: var(--sa-blu);
    color: var(--sa-superficie);
}
.home .colored_box.n2 { background: var(--sa-blu-scuro); }
.home .colored_box p {
    margin: 0;
    max-width: none;
    font-size: var(--sa-t-lg);
    font-weight: 650;
    line-height: var(--sa-riga-stretta);
}
.home .test_prefoo { margin-top: var(--sa-s6); }
.home .tit_txt_pref {
    font-size: var(--sa-t-xl);
    margin: 0 0 var(--sa-s3);
}
.home .test_prefoo p {
    color: var(--sa-inchiostro-2);
    max-width: 72ch;
}
.home .bestsellers_row:empty { display: none; }

/* -------------------------------------------------------------------------
   PAGINE INFORMATIVE
   ------------------------------------------------------------------------- */

/* Colonna di lettura stretta: sulle condizioni di vendita si legge davvero.
   La home e' esclusa — li' il contenuto e' a blocchi larghi, non un testo.
   Il selettore parte da body apposta: la classe "page" e' anche sull'<article>
   del contenuto, e li' dentro non c'e' nessuna classe "home" che la escluda —
   .page:not(.home) da sola aggancerebbe comunque anche la home. */
body.page:not(.home) .entry-content,
body.page:not(.home) .entry-header { max-width: 74ch; }
body.page:not(.home) .entry-content h2,
body.page:not(.home) .entry-content h3 { margin-top: var(--sa-s6); }
body.page:not(.home) .entry-content p { color: var(--sa-inchiostro-2); }
body.page .entry-content a { color: var(--sa-blu); }

.page-title,
.entry-title { color: var(--sa-inchiostro); }

/* -------------------------------------------------------------------------
   NIENTE SCORRIMENTO ORIZZONTALE
   base.css mette overflow-x:hidden sul body; questa e' la rete che impedisce
   a un'immagine o a una tabella di spingere comunque la pagina.
   ------------------------------------------------------------------------- */

.sa-sito { overflow-x: clip; }
.sa-contenuto img,
.sa-piede img { max-width: 100%; }