/* =========================================================================
   SARTORI TRADE — Base: tipografia, risposta al tocco, bersagli, fuoco
   ========================================================================= */

html { -webkit-text-size-adjust: 100%; }

body {
    font-family: var(--sa-font);
    font-size: var(--sa-t-base);
    line-height: var(--sa-riga);
    color: var(--sa-inchiostro);
    /* Fondo bianco in tutto il sito. Le foto degli articoli sono su fondo
       chiaro e il grigio faceva sembrare sporche le schede; le sezioni che
       devono staccarsi usano --sa-superficie-2 esplicitamente. */
    background: var(--sa-superficie);
    -webkit-font-smoothing: antialiased;
    /* Toglie il ritardo di 300ms al tocco senza disabilitare lo zoom. */
    touch-action: manipulation;
}

h1, h2, h3, h4, h5, h6 {
    line-height: var(--sa-riga-stretta);
    color: var(--sa-inchiostro);
    font-weight: 650;
    letter-spacing: -.01em;
}
h1 { font-size: var(--sa-t-2xl); }
h2 { font-size: var(--sa-t-xl); }
h3 { font-size: var(--sa-t-lg); }
h4 { font-size: var(--sa-t-md); }

p { max-width: 68ch; }          /* misura leggibile, non a tutta pagina */
.sa-largo p { max-width: none; }

a { color: var(--sa-blu); text-underline-offset: .18em; }
a:hover { color: var(--sa-blu-scuro); }

/* Numeri incolonnati: prezzi, codici e quantita' non devono ballare
   quando cambia una cifra. */
.price, .woocommerce-Price-amount, .sa-num, td.sa-num,
.sa-scheda-tecnica td, .quantity input {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

/* =========================================================================
   RISPOSTA AL TOCCO
   Sul telefono :hover non esiste: senza :active il dito preme e non succede
   niente. Entrata rapida, ritorno lasciato alla transizione dell'elemento.
   Lo schiacciamento e' su transform, che non ridisegna il layout.
   ========================================================================= */

a, button, .button, input[type="submit"], .sa-scheda, .sa-chip,
.woocommerce-LoopProduct-link, .page-numbers {
    transition: background-color var(--sa-durata) var(--sa-curva),
                border-color var(--sa-durata) var(--sa-curva),
                color var(--sa-durata) var(--sa-curva),
                box-shadow var(--sa-durata) var(--sa-curva),
                transform var(--sa-durata-uscita) var(--sa-curva);
}

button:active, .button:active, input[type="submit"]:active,
.sa-chip:active, .page-numbers:active {
    transform: scale(.97);
    transition-duration: 90ms;
}

/* Le schede prodotto si abbassano appena: sono grandi, uno scale forte
   sembrerebbe un errore. */
.sa-scheda:active { transform: scale(.99); }

/* ATTENZIONE: se un elemento e' posizionato con un transform proprio
   (es. translateY(-50%)), quel transform va RIPETUTO dentro :active,
   altrimenti scatta fuori posto. */
.sa-carosello__nav:active { transform: translateY(-50%) scale(.94); }

/* =========================================================================
   BERSAGLI DEL DITO — mai sotto 44px
   Lo spazio si prende DENTRO l'elemento, non con i margini: fra un link e
   l'altro resterebbe una fessura morta che non risponde.
   ========================================================================= */

a.sa-tocco, button, .button, input[type="submit"],
.sa-menu a, .sa-piede a, .page-numbers, .sa-chip {
    min-height: var(--sa-tocco);
    min-width: var(--sa-tocco);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sa-s2);
}

/* I link dentro un paragrafo restano in linea: allargarli spezzerebbe il testo. */
p a, li a, .sa-testo a { min-height: 0; min-width: 0; display: inline; }

/* Fra due bersagli vicini servono almeno 8px. */
.sa-azioni { display: flex; flex-wrap: wrap; gap: var(--sa-s2); }

/* =========================================================================
   FUOCO — visibile davvero, anche sul blu
   ========================================================================= */

:focus-visible {
    outline: 3px solid var(--sa-blu-chiaro);
    outline-offset: 2px;
    border-radius: 3px;
}
.sa-su-fondo-blu :focus-visible { outline-color: #ffffff; }

/* Salto al contenuto: invisibile finche' non lo si raggiunge da tastiera. */
.sa-salta {
    position: absolute; left: -9999px; top: 0;
    z-index: var(--sa-z-modale);
    padding: var(--sa-s3) var(--sa-s4);
    background: var(--sa-blu); color: #fff; border-radius: 0 0 var(--sa-raggio) 0;
}
.sa-salta:focus { left: 0; }

/* =========================================================================
   COMPONENTI DI BASE
   ========================================================================= */

.sa-contenitore {
    width: 100%;
    max-width: 1360px;
    margin-inline: auto;
    padding-inline: var(--sa-s4);
}
@media (min-width: 768px)  { .sa-contenitore { padding-inline: var(--sa-s5); } }
@media (min-width: 1280px) { .sa-contenitore { padding-inline: var(--sa-s6); } }

.button, .sa-btn {
    background: var(--sa-blu);
    color: #fff;
    border: 1px solid transparent;
    border-radius: var(--sa-raggio);
    padding: var(--sa-s3) var(--sa-s5);
    font-size: var(--sa-t-base);
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
}
.button:hover, .sa-btn:hover { background: var(--sa-blu-scuro); color: #fff; }

.sa-btn--secondario {
    background: var(--sa-superficie);
    color: var(--sa-blu);
    border-color: var(--sa-bordo-forte);
}
.sa-btn--secondario:hover { background: var(--sa-blu-tenue); color: var(--sa-blu-scuro); }

/* Disabilitato: si vede, e non risponde al tocco. */
.button[disabled], .sa-btn[disabled], button[disabled] {
    opacity: .45;
    cursor: not-allowed;
    pointer-events: none;
}

/* Etichette di stato: mai il solo colore a portare il significato —
   ognuna ha anche un segno grafico e un testo. */
.sa-stato {
    display: inline-flex; align-items: center; gap: var(--sa-s1);
    font-size: var(--sa-t-xs); font-weight: 600;
    padding: 2px var(--sa-s2);
    border-radius: 999px;
    border: 1px solid currentColor;
}
.sa-stato--ok         { color: var(--sa-ok);         background: var(--sa-ok-tenue); }
.sa-stato--attenzione { color: var(--sa-attenzione); background: var(--sa-attenzione-tenue); }
.sa-stato--errore     { color: var(--sa-errore);     background: var(--sa-errore-tenue); }

/* Le immagini non devono far saltare il layout mentre arrivano. */
img { max-width: 100%; height: auto; }
.sa-scheda__figura { aspect-ratio: 1 / 1; }

/* Niente scorrimento orizzontale, mai. Le tabelle larghe scorrono da sole. */
body { overflow-x: hidden; }
.sa-tabella-scorrevole { overflow-x: auto; -webkit-overflow-scrolling: touch; }