/**
 * Stili globali: caratteri, tipografia, elementi comuni.
 *
 * I font sono distribuiti localmente. Nessuna chiamata a Google Fonts dal
 * browser: oltre a essere piu' veloce, evita di far arrivare a un terzo
 * l'indirizzo IP di ogni visitatore.
 */

/*
 * I caratteri sono in WOFF2 e ridotti all'alfabeto che il sito usa davvero
 * (latino esteso, punteggiatura, valuta). In TTF pesavano 1.221 KB su ogni
 * pagina — piu' dell'intera pagina — perche' il TTF non e' compresso per il
 * web e conteneva alfabeti che qui non compaiono mai: cirillico, greco,
 * vietnamita. Gli originali restano in `fonts/originali/`.
 *
 * `font-display: swap` era gia' corretto e resta: il testo si legge subito col
 * carattere di sistema e cambia quando il font arriva. Meglio un cambio di
 * forma che una pagina bianca.
 */
/* L'attributo `hidden` viene dal browser con una priorita' bassissima:
   qualunque regola scritta qui dentro che imposti `display` lo annulla, in
   silenzio. E' successo davvero — il contatore dei preferiti aveva `hidden`,
   il suo `display: grid` vinceva, e su ogni pagina compariva un pallino rame
   con dentro «0». Da qui in avanti `hidden` significa nascosto. */
[hidden] { display: none !important; }

@font-face {
    font-family: "Poppins";
    src: url("../fonts/Poppins-Regular.woff2") format("woff2");
    font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
    font-family: "Poppins";
    src: url("../fonts/Poppins-Medium.woff2") format("woff2");
    font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
    font-family: "Poppins";
    src: url("../fonts/Poppins-SemiBold.woff2") format("woff2");
    font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
    font-family: "Montserrat";
    src: url("../fonts/Montserrat.woff2") format("woff2-variations");
    font-weight: 400 800; font-style: normal; font-display: swap;
}
/* Il serif dei titoli.
   E' il carattere del lettering del marchio, non un serif qualsiasi: la stessa
   lettera che si legge nel logo si ritrova nei titoli, ed e' quello che fa
   sembrare le pagine e il marchio la stessa cosa. Prima c'era Playfair
   Display, che e' un didone — grazie squadrate, contrasto verticale netto — e
   accanto a un lettering di stampo garaldo suonava come un'altra voce.
   Un solo file variabile, sottoinsieme latino, pesi 300-700. */
@font-face {
    font-family: "Cormorant Garamond";
    src: url("../fonts/CormorantGaramond.woff2") format("woff2-variations");
    font-weight: 300 700; font-style: normal; font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122;
}

body {
    font-family: var(--st-font-body);
    font-size: var(--st-fs-body);
    line-height: 1.65;
    color: var(--st-text);
    background: var(--st-white);
    -webkit-font-smoothing: antialiased;
}

/*
 * I TITOLI SONO SERIF SU TUTTO IL SITO, NON SOLO IN HOME
 *
 * La home era stata portata al serif della tavola 2, il resto del sito no: la
 * pagina del configuratore apriva con «Configura la tua tenda» in Montserrat
 * bold, e passandoci dalla home sembrava un altro sito. Il documento di marca
 * usa il serif per **tutti** i titoli, in tutte le tavole.
 *
 * Montserrat resta dichiarato e continua a servire dove un titolo deve stare
 * stretto — etichette maiuscole, intestazioni di tabella — ma non e' piu' il
 * carattere dei titoli.
 */
/*
 * IL CAMBIO DI SERIF HA CAMBIATO LA SCALA
 *
 * Playfair Display e Cormorant Garamond hanno lo stesso corpo nominale e due
 * misure diverse dell'unica cosa che l'occhio guarda davvero, l'altezza delle
 * minuscole: 514 millesimi contro 386. Cormorant e' il 75% dell'altro. Messo
 * al posto suo con gli stessi numeri, ogni titolo del sito e' diventato di
 * colpo un quarto piu' piccolo — non «diverso», piu' piccolo, e i titoli si
 * leggevano piu' deboli del testo che introducevano.
 *
 * Il fattore non e' pero' 1,33. Pareggiare le minuscole vuol dire ingrossare
 * anche le maiuscole, e li' il divario e' molto minore (708 contro 625, cioe'
 * l'88%): compensando sull'occhio, i titoli in maiuscoletto uscirebbero
 * enormi. Si prende la media geometrica dei due rapporti — 1,23 — arrotondata
 * a 1,20, che e' il punto in cui minuscole e maiuscole sbagliano poco
 * entrambe invece che una giusta e l'altra fuori scala.
 *
 * L'interlinea scende da 1.18 a 1.12 per la stessa ragione al contrario: con
 * minuscole basse, righe distanti quanto prima lasciano in mezzo una fascia di
 * bianco che spezza il titolo in righe indipendenti.
 */
h1, h2, h3, h4, .st-heading {
    font-family: var(--st-font-display);
    font-weight: 600;
    line-height: 1.12;
    color: var(--st-charcoal);
    letter-spacing: -.012em;
}
h1 { font-size: var(--st-fs-h1); }
h2 { font-size: var(--st-fs-h2); }
h3 { font-size: var(--st-fs-h3); }

/* Il rame del testo, non quello delle superfici.
   Un collegamento nel corpo del testo e' testo piccolo — 16 px, sotto i 24
   che fanno «testo grande» — quindi gli serve 4,50:1. `--st-copper` (#B45A17)
   su avorio ne fa **4,34**: e' il rame dei pulsanti e dei bordi, dove il
   contrasto lo regge la superficie piena, non la lettera. `--st-copper-text`
   (#AE4C0B) fa 4,99 su avorio e 5,47 su bianco.
   I collegamenti su fondo scuro hanno regole proprie con `--st-copper-light`
   e non passano di qui. */
a { color: var(--st-copper-text, var(--st-copper)); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--st-copper-dark); }

.st-container {
    width: min(100% - 2 * var(--st-container-margine), var(--st-container));
    margin-inline: auto;
}

.st-section { padding-block: var(--st-space-7); }
.st-section--tight { padding-block: var(--st-space-6); }
.st-section--ivory { background: var(--st-ivory); }
.st-section--sand  { background: var(--st-sand); }

.st-eyebrow {
    display: block;
    margin-bottom: var(--st-space-2);
    font-size: var(--st-fs-micro);
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    /* 0,75rem = 12 px: il testo piu' piccolo della pagina, e proprio quello
       che non puo' permettersi il rame delle superfici. */
    color: var(--st-copper-text, var(--st-copper));
}
.st-lead { font-size: var(--st-fs-lead); color: var(--st-muted); max-width: 62ch; }

/*
 * `.st-button` ERA RIMASTA FUORI DALL'UNIFICAZIONE
 *
 * I token dicono che le tre classi — `.st-btn`, `.st-button`, `.c-btn` —
 * leggono da li' la propria geometria. Due lo facevano; `.st-button` no: non
 * aveva **nessuna** regola base. Misurato sulla pagina 404: `min-height: auto`,
 * `padding: 0`, e il pulsante alto ventisei pixel invece di quarantotto.
 *
 * Si vedeva poco perche' la classe e' usata in pochi punti — la 404, la
 * ricerca senza risultati, gli stati vuoti — cioe' proprio le pagine dove
 * qualcuno e' gia' in difficolta' e il pulsante e' l'unica via d'uscita.
 *
 * Basta aggiungerla qui: da adesso legge gli stessi numeri delle altre due.
 */
.st-btn,
.st-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--st-btn-gap);
    min-height: var(--st-btn-h);
    padding: var(--st-btn-pad-y) var(--st-btn-pad-x);
    border: var(--st-btn-bordo) solid transparent;
    border-radius: var(--st-btn-radius);
    font-family: var(--st-font-body);
    font-size: var(--st-btn-size);
    font-weight: var(--st-btn-peso);
    text-decoration: none;
    cursor: pointer;
    
}
.st-btn--primary { background: var(--st-copper); color: #fff; }
.st-btn--primary:hover { background: var(--st-copper-dark); color: #fff; }
.st-btn--outline { border-color: var(--st-charcoal); color: var(--st-charcoal); background: transparent; }
.st-btn--outline:hover { background: var(--st-charcoal); color: #fff; }
.st-btn--light { background: #fff; color: var(--st-charcoal); }

/* Segnaposto amministrativo: deve essere impossibile scambiarlo per contenuto
   definitivo. Compare solo agli amministratori. */
.st-placeholder {
    position: relative;
    border: 1.5px dashed var(--st-copper);
    background: repeating-linear-gradient(45deg,
        rgba(var(--st-copper-rgb), .045) 0 10px, transparent 10px 20px);
    padding: var(--st-space-3);
    border-radius: var(--st-radius-sm);
}
.st-placeholder::before {
    content: "DA CONFERMARE";
    position: absolute;
    top: -9px; left: 12px;
    padding: 1px 8px;
    background: var(--st-copper);
    color: #fff;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .08em;
    border-radius: 3px;
}

.st-skip {
    position: absolute; left: -9999px;
}
.st-skip:focus {
    left: 12px; top: 12px; z-index: 999;
     background: var(--st-charcoal); color: #fff;
    border-radius: var(--st-radius-sm);
}

/* Documento legale non ancora validato: l'avviso e' per tutti, non solo per
   chi amministra. Se la pagina viene raggiunta per errore, chi la legge deve
   sapere che non fa fede. */
.st-legal-draft {
    margin: 0 0 var(--st-space-4);
    padding: 14px 18px;
    border-left: 4px solid var(--st-copper);
    background: var(--st-copper-soft);
    border-radius: var(--st-radius-sm);
}
.st-legal-draft p { margin: 0; font-size: var(--st-fs-ui); line-height: 1.6; }

/* I buchi lasciati apposta nei documenti legali. Devono dare fastidio: sono
   dati che mancano, non decorazioni. */
.entry-content mark {
    background: #FFF3CD;
    color: #5C4600;
    padding: 1px 5px;
    border-radius: 3px;
    font-weight: 600;
}

/* ==========================================================================
   Accessibilita': quello che la misurazione ha trovato ancora sotto soglia.

   La verifica automatica contava 116 aree di tocco sotto i 24 px e 37 testi
   sotto i 12. Guardandole una per una si e' visto che sono tre cose sole,
   ripetute su ogni scheda del catalogo: i collegamenti di categoria sotto il
   nome del prodotto, il badge «su preventivo» e i metodi di pagamento nel
   footer.

   Nessuna e' un dettaglio: i collegamenti di categoria si toccano con il dito
   su un telefono, e il badge dice se un prodotto si compra o si preventiva.
   ========================================================================== */

/* I collegamenti dentro un elenco: footer, categorie sotto il nome del
   prodotto, briciole di pane. Erano alti 20 px — su un telefono si sbaglia
   bersaglio e si finisce sulla voce accanto.

   La misurazione li aveva contati come «a.» senza classe: erano i collegamenti
   del footer, e nessuno dei selettori che avevo scritto per le schede prodotto
   li toccava. Cercare la classe sbagliata non da' errore, non cambia niente, e
   fa credere di aver risolto. */
.st-footer__list a,
.st-nav__list a,
.woocommerce ul.products li.product .posted_in a,
.woocommerce ul.products li.product [class*="ct-term-"],
.ct-product-categories a {
    
    align-items: center;
    min-height: 24px;
    
}

/* Su schermo tattile lo spazio serve davvero: 44 px e' la misura che una
   persona centra senza guardare. */
@media (pointer: coarse) {
    .st-footer__list a,
    .woocommerce ul.products li.product .posted_in a,
    .woocommerce ul.products li.product [class*="ct-term-"],
    .ct-product-categories a {
        min-height: 44px;
        padding: 10px 0;
    }
}

/* Il badge «su preventivo» era a 11 px. Dice al cliente se quel prodotto si
   compra subito o richiede una risposta: e' fra le informazioni piu' utili
   della scheda, non una nota a pie' di pagina. */
.st-badge--quote {
       /* 12.5 px */
    line-height: 1.4;
}

/* I metodi di pagamento nel footer. */
.st-footer__payment {  }

/* ==========================================================================
   TESTO PER CHI ASCOLTA

   `.st-visually-hidden` era usata in cinque punti — l'etichetta della ricerca,
   la sua area di stato, l'etichetta della newsletter — e **non era definita in
   nessun foglio**. Una classe che non esiste non nasconde niente: «Cerca nel
   catalogo» compariva come riga di testo dentro il modulo ogni volta che si
   apriva la ricerca a tutto schermo, e l'area `aria-live` avrebbe stampato in
   pagina i suoi annunci per chi non ne aveva bisogno.

   E' il tipo di difetto che non si trova leggendo il markup — li' l'intenzione
   e' scritta e sembra soddisfatta — ma solo cercando la definizione della
   classe e non trovandola.

   Si toglie dal flusso invece di usare `display: none`: quel che e' `none` non
   viene letto da nessuno, e queste sono proprio le parole che devono essere
   lette.
   ========================================================================== */

.st-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* Il collegamento «vai al contenuto» resta nascosto finche' non lo si
   raggiunge con il tabulatore — ma quando compare deve essere premibile. */
.skip-link:focus,
.screen-reader-text:focus {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: 10px 18px;
}

/* I collegamenti di categoria che Blocksy stampa sulle schede del catalogo
   vivono fuori dal contenitore del prodotto, e i selettori piu' precisi non li
   raggiungevano. Qui si prende la classe per quello che e', ovunque stia. */
[class*="ct-term-"],
.woocommerce ul.products li.product a[rel="tag"] {
    display: inline-flex !important;
    align-items: center;
    min-height: 24px;
}
@media (pointer: coarse) {
    [class*="ct-term-"],
    .woocommerce ul.products li.product a[rel="tag"] { min-height: 44px; }
}

/* Il badge dei prodotti su preventivo: 11 px erano troppo pochi per la sola
   informazione che dice se un prodotto si compra o si chiede. */
span.st-badge--quote, .st-badge--quote { font-size: 12.5px !important; }

/* ---------------------------------------------------------------- errore 404 */

.st-404 { padding: var(--st-space-6) 0 var(--st-space-7); }
.st-empty--404 { max-width: 42rem; }
.st-404__code {
    font-size: var(--st-fs-micro); letter-spacing: .12em; text-transform: uppercase;
    color: var(--st-copper); margin: 0 0 var(--st-space-3);
}
.st-404__actions {
    display: flex; flex-wrap: wrap; gap: var(--st-space-3);
    justify-content: center; margin-bottom: var(--st-xxl);
}
.st-404__actions .st-button {
    /* La regola alzava il bersaglio a 44 px quando `.st-button` era un
       collegamento senza altezza propria e si schiacciava a 23. Da quando la
       classe prende la geometria dai token — 48 px — questa riga non alza
       piu' niente: **abbassa**, ed era l'unico punto del sito in cui un
       pulsante era piu' piccolo del canonico. Resta l'allineamento, che il
       contesto richiede davvero. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.st-404__search { max-width: 26rem; margin: 0 auto var(--st-xxl); }
.st-404__search input[type="search"] { width: 100%; }
.st-404__hint { color: var(--st-muted); margin: 0 0 var(--st-space-3); }
.st-404__cats {
    display: flex; flex-wrap: wrap; gap: var(--st-space-2);
    justify-content: center; list-style: none; margin: 0; padding: 0;
}
.st-404__cats a {
    display: inline-flex; align-items: center; min-height: 40px;
    padding: 0 var(--st-space-4);
    border: 1px solid var(--st-border); border-radius: 999px;
    color: var(--st-charcoal); text-decoration: none;
}
.st-404__cats a:hover { border-color: var(--st-copper); color: var(--st-copper); }

/*
 * Il pulsante «mostra password» nasce 14×14: un bersaglio da centrare col dito
 * su un vetro. L'area cliccabile sale a 44px senza che l'icona cresca — si
 * allarga lo spazio attorno, non il disegno. Sta in `global.css` e non nel
 * foglio del negozio perche' compare anche fuori da WooCommerce, e la regola
 * scritta la' non arrivava fin qui.
 */
/* Specificita' alzata apposta: la regola di WooCommerce e' `.woocommerce form
   .show-password-input` e vince su un selettore piu' semplice, per quanto
   caricato dopo. Si aggiunge `body` per superarla di un punto — non
   `!important`, che spegnerebbe anche cio' che verra' dopo. */
body.woocommerce-page form .show-password-input,
body .woocommerce form .show-password-input,
body button.show-password-input {
    /* `min-*` oltre a `width`/`height`: qualcosa piu' a valle continuava a
       rimpicciolire il riquadro, e il minimo e' comunque il vincolo che qui
       conta davvero — sotto i 44px il bersaglio non e' toccabile. */
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    background-position: center;
}

/* L'ultima voce del percorso e' la pagina in cui si e' gia'.
   Su una scheda prodotto quel nome e' lungo ottanta caratteri e occupava una
   riga intera sopra il titolo, che lo ripete due centimetri piu' sotto. Si
   accorcia con i puntini: resta leggibile, smette di competere. */
.st-breadcrumb > span:last-child,
.woocommerce-breadcrumb > span:last-child {
    display: inline-block;
    max-width: 42ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}