/**
 * Le pagine istituzionali: Chi siamo, Contatti, Ispirazioni.
 *
 * Condividono la stessa testata — briciole, titolo, occhiello — e gli stessi
 * mattoni della home (`.st-section`, `.st-panel`, `.st-split`). Non hanno un
 * foglio ciascuna: sarebbero tre copie della stessa cosa, destinate a
 * divergere alla prima modifica.
 */

.st-pagina__testa {
    position: relative;
    padding-block: clamp(var(--st-space-4), 4vw, var(--st-space-6));
    background: var(--st-ivory);
    overflow: hidden;
}
.st-pagina__titolo {
    margin: 0 0 var(--st-space-3);
    font-size: var(--st-fs-h1);
    line-height: 1.1;
    letter-spacing: -.02em;
    text-wrap: balance;
}
.st-pagina__intro { max-width: 42rem; }

/* Testata con fotografia: stesso velo **scuro** della home e delle categorie.
   Era chiaro, con il testo scuro sopra, e la ragione scritta qui era buona —
   le fotografie sono luminose. Ma la home nel frattempo ha cambiato strada:
   velo scuro laterale che si spegne prima del soggetto, testo bianco. Tre
   fasce con la stessa struttura e tre colori diversi non sono tre scelte, sono
   una mancanza di scelta. */
/* Il fondo di riserva e' chiaro: la fotografia sopra e' luminosa e il testo
   e' inchiostro, quindi un inchiostro sotto darebbe un lampo nero mentre
   l'immagine carica. */
.st-pagina__testa--foto {
    background: var(--st-p-crema);
    padding-block: clamp(var(--st-space-5), 6vw, var(--st-space-7));
}
.st-pagina__sfondo { position: absolute; inset: 0; z-index: 0; }
.st-pagina__sfondo img { width: 100%; height: 100%; object-fit: cover; object-position: 74% 48%; }
.st-pagina__sfondo::after {
    content: "";
    position: absolute; inset: 0;
    /* UN PANNELLO CHIARO A SINISTRA, LA FOTOGRAFIA INTATTA A DESTRA
       Stessa taratura delle testate di catalogo e di Ispirazioni. Il velo e'
       quasi pieno dove cade il testo — cosi' regge anche sopra la fotografia
       piu' scura del gruppo — e si spegne prima della meta', dove l'immagine
       riprende per intero. Un velo scuro sopra fotografie che parlano di luce
       spegnerebbe proprio cio' che si vende. */
    background: linear-gradient(94deg,
        rgba(247, 244, 239, .96) 0%,
        rgba(247, 244, 239, .94) 26%,
        rgba(247, 244, 239, .72) 40%,
        rgba(247, 244, 239, .24) 54%,
        rgba(247, 244, 239, 0) 70%);
}
.st-pagina__testa--foto > .st-container { position: relative; z-index: 1; }

.st-pagina__testa--foto .st-pagina__titolo {
    color: var(--st-p-inchiostro);
}
.st-pagina__testa--foto .st-pagina__intro,
.st-pagina__testa--foto .st-pagina__intro p {
    /* Niente ombra: serviva a staccare il bianco dal chiaro. Sotto un testo
       scuro su fondo chiaro un'ombra scura non aggiunge contrasto, sporca. */
    color: var(--st-text);
}
.st-pagina__testa--foto .st-pagina__intro,
.st-pagina__testa--foto .st-pagina__intro p { opacity: .88; }

.st-pagina__testa--foto .st-breadcrumb,
.st-pagina__testa--foto .st-breadcrumb a { color: var(--st-muted); }
.st-pagina__testa--foto .st-breadcrumb a:hover { color: var(--st-p-inchiostro); }

/* Il testo si ferma prima della meta', dove il velo si spegne: oltre, la
   fotografia riprende piena e l'inchiostro non terrebbe. */
.st-pagina__testa--foto .st-pagina__titolo { max-width: 17ch; }
.st-pagina__testa--foto .st-pagina__intro { max-width: 42ch; }

/* --- recapiti ---------------------------------------------------------- */
.st-recapiti { list-style: none; margin: var(--st-space-4) 0 0; padding: 0; display: grid; gap: var(--st-space-3); }
.st-recapiti li { display: flex; gap: 14px; align-items: flex-start; }
.st-recapito__icona {
    flex: none; display: grid; place-items: center;
    width: 42px; height: 42px; border-radius: 50%;
    background: var(--st-white); color: var(--st-copper);
    border: 1px solid var(--st-border);
}
.st-recapiti strong { display: block; font-size: var(--st-fs-body); color: var(--st-charcoal); }
.st-recapiti strong a { color: inherit; text-decoration: none; }
.st-recapiti strong a:hover { color: var(--st-copper-text, var(--st-copper)); }
.st-recapiti span span { display: block; font-size: .88rem; color: var(--st-muted); margin-top: 2px; }

/* --- modulo ------------------------------------------------------------ */
.st-contatti__testa {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(var(--st-space-4), 4vw, var(--st-space-6));
    align-items: start;
}
.st-modulo {
    background: var(--st-white);
    border: 1px solid var(--st-border);
    border-radius: var(--st-radius-lg);
    padding: var(--st-space-5);
    box-shadow: var(--st-shadow-sm);
}
.st-modulo h2 { margin: 0 0 var(--st-space-4); font-size: var(--st-fs-h3); }
.st-modulo label { display: block; margin-bottom: var(--st-space-3); font-size: var(--st-fs-small); color: var(--st-charcoal); }
.st-modulo input, .st-modulo textarea {
    display: block; width: 100%; margin-top: 6px;
    min-height: 48px; padding: 11px 14px;
    border: 1.5px solid var(--st-border-strong);
    border-radius: var(--st-radius-sm);
    font: inherit; font-size: 1rem; background: var(--st-white);
}
.st-modulo textarea { min-height: auto; resize: vertical; }
.st-modulo input:focus, .st-modulo textarea:focus {
    border-color: var(--st-copper);
    box-shadow: 0 0 0 3px rgba(var(--st-copper-rgb), .14);
    outline: none;
}
.st-modulo__riga { display: grid; grid-template-columns: 1fr 1fr; gap: var(--st-space-3); }
.st-modulo__consenso {
    display: flex; gap: 10px; align-items: flex-start;
    font-size: .86rem; color: var(--st-muted);
}
.st-modulo__consenso input { width: auto; min-height: auto; margin-top: 3px; }
.st-modulo__esito {
    padding: 12px 14px; border-radius: var(--st-radius-sm);
    background: var(--st-copper-soft); border-left: 3px solid var(--st-copper);
    font-size: .92rem;
}

/*
 * L'errore non e' un avviso in piu': e' l'unico avviso che dice che il
 * messaggio **non** e' partito. Si distingue dal riscontro di successo con il
 * colore e con il ruolo — `role="alert"` nel markup — non solo con il testo.
 */
.st-modulo__esito--errore {
    background: #FBEDEB;
    border-left-color: var(--st-error);
    color: #6E241E;
}
.st-modulo__errore {
    display: block;
    margin-top: 6px;
    font-size: .82rem;
    font-weight: 500;
    color: var(--st-error);
}
.st-modulo input[aria-invalid="true"],
.st-modulo textarea[aria-invalid="true"] {
    border-color: var(--st-error);
}

/*
 * IL CAMPO ESCA
 *
 * Non `display: none` e non `hidden`: i moduli automatici saltano cio' che e'
 * dichiarato nascosto, ed e' esattamente il campo che devono compilare perche'
 * la trappola scatti. Si toglie dal flusso e dalla vista lasciandolo, per il
 * documento, un campo come gli altri. `aria-hidden` nel markup lo toglie ai
 * lettori di schermo, e `tabindex="-1"` alla tastiera.
 */
.st-esca {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* --- pilastri e cifre -------------------------------------------------- */
.st-pilastri {
    list-style: none; margin: var(--st-space-5) 0 0; padding: 0;
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--st-space-3);
}
.st-pilastri li { display: grid; gap: 4px; }
.st-pilastro__icona { color: var(--st-copper); margin-bottom: 4px; }
.st-pilastri strong { font-size: var(--st-fs-ui); color: var(--st-charcoal); }
.st-pilastri span:last-child { font-size: var(--st-fs-micro); color: var(--st-muted); }

.st-cifre {
    list-style: none; margin: var(--st-space-4) 0 0; padding: 0;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--st-space-4);
}
.st-cifre strong {
    display: block; font-family: var(--st-font-heading);
    font-size: var(--st-fs-h2); line-height: 1; color: #fff;
    font-variant-numeric: tabular-nums;
}
.st-cifre span { display: block; margin-top: 6px; font-size: .88rem; color: rgba(255,255,255,.72); }

/* --- elenchi con il segno di spunta ------------------------------------ */
.st-elenco-segni { list-style: none; margin: 0 0 var(--st-space-4); padding: 0; display: grid; gap: 10px; }
.st-elenco-segni li {
    position: relative; padding-left: 26px;
    font-size: .95rem; line-height: 1.55; color: var(--st-charcoal);
}
.st-elenco-segni li::before {
    content: ""; position: absolute; left: 0; top: .45em;
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--st-copper);
}

.st-cta-finale {
    display: flex; flex-wrap: wrap; align-items: center;
    justify-content: space-between; gap: var(--st-space-4);
}
.st-cta-finale p { margin: 0; color: var(--st-muted); max-width: 48ch; }
.st-cta-finale__azioni { display: flex; flex-wrap: wrap; gap: var(--st-space-3); }

@media (max-width: 900px) {
    .st-contatti__testa, .st-modulo__riga { grid-template-columns: 1fr; }
    .st-pilastri { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
    .st-pilastri { grid-template-columns: 1fr; }
}

/* --- guide ------------------------------------------------------------- */
.st-guide { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--st-space-3); }
.st-guide a {
    display: flex; align-items: center; gap: 14px;
    padding: var(--st-space-3) var(--st-space-4);
    background: var(--st-white);
    border: 1px solid var(--st-border);
    border-radius: var(--st-radius);
    text-decoration: none;
    transition: border-color var(--st-dur, 220ms) var(--st-ease, ease),
                transform var(--st-dur, 220ms) var(--st-ease, ease);
}
.st-guide a:hover { border-color: var(--st-copper); transform: translateX(3px); }
.st-guida__icona { flex: none; color: var(--st-copper); display: inline-flex; }
.st-guide strong { display: block; color: var(--st-charcoal); font-size: 1rem; }
.st-guide span span { display: block; margin-top: 3px; font-size: .88rem; color: var(--st-muted); line-height: 1.5; }
/* La freccia sta in fondo e non si comprime. */
.st-guide a > .st-icon:last-child { margin-left: auto; flex: none; color: var(--st-border-strong); }

/* --- configuratore: scelta del modello --------------------------------- */
.st-configuratore-intro .st-pagina__titolo em {
    display: block; font-style: normal; color: var(--st-copper-text, var(--st-copper));
}

.st-modelli {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--st-space-4); margin-top: var(--st-space-5);
}
.st-modello {
    display: flex; flex-direction: column;
    background: var(--st-white);
    border: 1px solid var(--st-border);
    border-radius: var(--st-radius);
    overflow: hidden; text-decoration: none;
    transition: border-color var(--st-dur, 220ms) var(--st-ease, ease),
                transform var(--st-dur, 220ms) var(--st-ease, ease),
                box-shadow var(--st-dur, 220ms) var(--st-ease, ease);
}
.st-modello:hover {
    border-color: var(--st-copper); transform: translateY(-3px); box-shadow: var(--st-shadow);
}
.st-modello__media { aspect-ratio: 4 / 3; background: var(--st-sand); overflow: hidden; }
.st-modello__media img { width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform var(--st-dur-slow, 300ms) var(--st-ease, ease); }
.st-modello:hover .st-modello__media img { transform: scale(1.04); }
.st-modello__corpo { padding: var(--st-space-4); display: flex; flex-direction: column; flex: 1; }
.st-modello__titolo { margin: 0 0 6px; font-size: 1.08rem; color: var(--st-charcoal); }
.st-modello__testo { margin: 0 0 var(--st-space-3); font-size: .9rem; color: var(--st-muted); line-height: 1.55; }
.st-modello__prezzo {
    margin: auto 0 var(--st-space-3); font-size: .95rem; color: var(--st-charcoal);
    font-variant-numeric: tabular-nums;
}
.st-modello__prezzo .amount { font-weight: 600; }

/* --- i cinque passi ---------------------------------------------------- */
.st-passi {
    list-style: none; margin: var(--st-space-5) 0 0; padding: 0;
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--st-space-3);
    counter-reset: none;
}
.st-passo {
    position: relative; padding: var(--st-space-4) var(--st-space-3);
    background: var(--st-white); border: 1px solid var(--st-border);
    border-radius: var(--st-radius); display: grid; gap: 6px; align-content: start;
}
.st-passo__n {
    position: absolute; top: -11px; left: var(--st-space-3);
    display: grid; place-items: center; width: 24px; height: 24px;
    border-radius: 50%; background: var(--st-copper); color: #fff;
    font-size: .78rem; font-weight: 700; line-height: 1;
}
.st-passo__icona { color: var(--st-copper); margin-bottom: 2px; }
.st-passo strong { font-size: .96rem; color: var(--st-charcoal); }
.st-passo > span:last-child { font-size: .84rem; color: var(--st-muted); line-height: 1.5; }

@media (max-width: 1000px) { .st-passi { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .st-passi { grid-template-columns: 1fr; } }
/* «Su preventivo» non e' un prezzo mancante: e' un modo di comprare diverso,
   e va scritto come tale invece di lasciare la riga vuota. */
.st-modello__preventivo { color: var(--st-muted); font-style: italic; }

/* ================================================== guida alle misure */

/* La tabella delle misure realizzabili.
   Su schermo stretto una tabella a quattro colonne non si legge: scorre nel
   suo contenitore invece di allargare la pagina, e l'intestazione di riga
   resta ferma perche' senza il nome della categoria i numeri non dicono
   niente. */
.st-tabella-misure {
    overflow-x: auto;
    margin-top: var(--st-space-4);
    border: 1px solid var(--st-border);
    border-radius: var(--st-radius);
    background: #fff;
}

.st-tabella-misure table {
    width: 100%;
    border-collapse: collapse;
    min-width: 560px;
}

.st-tabella-misure th,
.st-tabella-misure td {
    padding: 14px 18px;
    text-align: left;
    border-bottom: 1px solid var(--st-border);
}

.st-tabella-misure thead th {
    font-size: var(--st-fs-micro);   /* 12 px: il minimo dichiarato nei token. A 0,74rem faceva 11,84 e finiva sotto la soglia che il resto del sito rispetta — un valore scelto a occhio invece che dalla scala. */
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--st-muted);
    background: var(--st-ivory);
}

/* La colonna del nome si prende quasi meta' tabella: «Tende a Rullo
   Filtranti» in una colonna stretta andava a capo tre volte, e una tabella in
   cui la prima colonna e' alta tre righe e le altre una sembra sbilenca. */
.st-tabella-misure tbody th {
    font-weight: 600;
    width: 44%;
}

.st-tabella-misure tbody th span {
    display: block;
    margin-top: 2px;
    font-size: 0.82rem;
    font-weight: 400;
    color: var(--st-muted);
}

.st-tabella-misure td {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.st-tabella-misure tr:last-child th,
.st-tabella-misure tr:last-child td {
    border-bottom: 0;
}

.st-tabella-misure__vuoto {
    color: var(--st-border-strong);
}

/*
 * IL SELETTORE DOVEVA ESSERE PIU' PRECISO DI QUELLO CHE CORREGGE
 *
 * Sopra c'e' `.st-tabella-misure td { white-space: nowrap }` — giusto: gli
 * intervalli «30–400 cm» non devono spezzarsi a meta'. Questa regola serve a
 * fare l'eccezione per la cella lunga, quella che spiega perche' certi limiti
 * si confermano in preventivo.
 *
 * Non la faceva. `.st-tabella-misure td` vale una classe **e un elemento**;
 * `.st-tabella-misure__preventivo` vale una classe sola, quindi perdeva, e la
 * frase restava su una riga unica: la tabella diventava piu' larga della
 * pagina e la riga finiva tagliata a meta' parola — «non sono scritti nella
 * scheda tecnic…».
 *
 * Il caso e' quello classico: una regola generale scritta con `elemento` e
 * un'eccezione scritta con `.classe`. Sembrano allo stesso livello e non lo
 * sono. L'eccezione va scritta almeno precisa quanto la regola.
 */
.st-tabella-misure td.st-tabella-misure__preventivo {
    white-space: normal;
    font-size: var(--st-fs-small);
    color: var(--st-muted);
}

/* Le formule di conversione: sono testo tecnico, e si vede che lo sono. */
.st-formula {
    margin: var(--st-space-3) 0 0;
}

.st-formula code {
    display: block;
    padding: 10px 14px;
    border-left: 3px solid var(--st-copper);
    border-radius: var(--st-radius-sm);
    background: var(--st-ivory);
    font-size: 0.86rem;
    line-height: 1.6;
    color: var(--st-charcoal);
}

/* Quale delle due convenzioni: sta sopra la formula, piccolo e in rame. */
.st-formula__quale {
    display: block;
    margin-bottom: 5px;
    font-size: var(--st-fs-micro);
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--st-p-rame-testo, #AE4C0B);
}

.st-nota {
    margin-top: var(--st-space-3);
    font-size: var(--st-fs-small);
    color: var(--st-muted);
    max-width: 72ch;
}

.st-guida .st-split .st-panel h3 {
    margin: 0 0 8px;
    font-size: 1.05rem;
}

/* ====================================================================
 * GUIDA ALLE MISURE — i pezzi nuovi
 *
 * La pagina era tutta prosa: quattro sezioni di paragrafi, una tabella e due
 * riquadri. Diceva le cose giuste e le diceva **tutte allo stesso modo**, e su
 * una pagina che deve spiegare una procedura questo e' il difetto: chi legge
 * non riesce a distinguere «cosa devo fare» da «cosa e' bene sapere».
 *
 * Qui sotto ci sono quattro forme, e ognuna corrisponde a un tipo di
 * informazione diverso: i passi numerati (cosa fare), la figura con il testo
 * accanto (cosa vuol dire), la regola pratica (cosa rispondere nel dubbio), la
 * tendina (cosa c'e' sotto, per chi vuole controllare).
 * ==================================================================== */

/* --- i tre passi ------------------------------------------------------ *
 * Numerati con un `<ol>` vero: la numerazione e' l'informazione, non la
 * decorazione, e in un `<ul>` con i numeri disegnati chi legge con la voce
 * sentirebbe tre voci senza ordine.
 */
.st-passi3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin: 26px 0 0;
    padding: 0;
    list-style: none;
    counter-reset: none;
}

.st-passo3 {
    position: relative;
    padding: 22px 20px 20px;
    background: #fff;
    border: 1px solid var(--st-p-riga, #EAE4DC);
    border-radius: var(--st-r-grande, 12px);
}

.st-section--ivory .st-passo3 { background: #fff; }

.st-passo3__n {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    margin-bottom: 12px;
    border-radius: 50%;
    background: var(--st-p-rame-tenue, #FBF1E8);
    color: var(--st-p-rame-testo, #AE4C0B);
    font-size: .9375rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.st-guida .st-passo3 h3 {
    margin: 0 0 6px;
    font-family: var(--st-font-body, inherit);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--st-p-inchiostro, #23201D);
}

.st-guida .st-passo3 p {
    margin: 0;
    max-width: none;
    font-size: var(--st-fs-small);
    line-height: 1.6;
    color: var(--st-p-grigio, #6F6A64);
}

/* --- figura accanto al testo ------------------------------------------ */

.st-figspiega {
    display: grid;
    grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
    align-items: center;
    gap: 32px;
    margin-top: 24px;
}

.st-figspiega__fig {
    margin: 0;
    padding: 18px;
    background: #fff;
    border: 1px solid var(--st-p-riga, #EAE4DC);
    border-radius: var(--st-r-grande, 12px);
}

.st-guida .st-figspiega__testo p { max-width: none; }
.st-guida .st-figspiega__testo > p:first-child { margin-top: 0; }

/* --- i disegni -------------------------------------------------------- *
 *
 * Un solo posto per i colori delle figure. Gli SVG portano solo la geometria:
 * cosi' lo stesso disegno segue la tavolozza se cambia, e nessuno deve
 * ricordarsi di ritoccare sei attributi `stroke` sparsi nel PHP.
 *
 * `vector-effect: non-scaling-stroke` tiene il tratto dello stesso spessore a
 * qualunque dimensione: senza, la figura rimpicciolita su telefono diventa un
 * disegno a matita e quella grande un disegno a pennarello.
 */
.st-fig {
    display: block;
    width: 100%;
    height: auto;
}

.st-fig [class^="st-fig__"] {
    vector-effect: non-scaling-stroke;
}

.st-fig__muro {
    fill: var(--st-p-crema, #FAF6F1);
    stroke: none;
}

.st-fig__telaio {
    fill: var(--st-p-sabbia, #F4F0EB);
    stroke: var(--st-p-inchiostro, #23201D);
    stroke-width: 2;
}

.st-fig__telaio-sottile {
    stroke: var(--st-p-inchiostro, #23201D);
    stroke-width: 1.4;
}

.st-fig__vetro {
    fill: #fff;
    stroke: var(--st-p-inchiostro, #23201D);
    stroke-width: 1.4;
}

/* Nel disegno della misura «finita» il vano resta come riferimento, non come
   protagonista: tratteggiato, perche' non e' quello che si sta misurando. */
.st-fig__vano-tratteggio {
    fill: #fff;
    stroke: var(--st-p-decor, #9A948C);
    stroke-width: 1.4;
    stroke-dasharray: 5 4;
}

.st-fig__tenda {
    fill: var(--st-p-rame-tenue, #FBF1E8);
    stroke: var(--st-p-rame, #B45A17);
    stroke-width: 2;
}

.st-fig__tenda-righe {
    stroke: var(--st-p-rame, #B45A17);
    stroke-width: 1;
    opacity: .35;
}

/* La quota e' l'unica cosa in rame pieno: e' la misura, cioe' il soggetto. */
.st-fig__quota {
    stroke: var(--st-p-rame, #B45A17);
    stroke-width: 2;
    fill: none;
    stroke-linecap: round;
}

.st-fig__testo {
    fill: var(--st-p-debole, #726C64);
    font-family: var(--st-font-body, inherit);
    font-size: 13px;
    font-weight: 500;
}

.st-fig__testo--forte {
    fill: var(--st-p-rame-testo, #AE4C0B);
    font-weight: 600;
}

/* --- elenco a due livelli --------------------------------------------- */

.st-elenco-punti {
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 10px;
}

.st-elenco-punti li {
    padding-left: 16px;
    border-left: 2px solid var(--st-p-rame-tenue, #FBF1E8);
    font-size: .95rem;
    line-height: 1.55;
    color: var(--st-p-grigio, #6F6A64);
}

.st-elenco-punti strong {
    color: var(--st-p-inchiostro, #23201D);
    font-weight: 600;
}

.st-elenco-punti strong::after { content: ' — '; font-weight: 400; }

/* --- i due modi di misurare ------------------------------------------- */

.st-duemodi {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    margin-top: 26px;
}

.st-modo {
    padding: 18px 18px 20px;
    background: #fff;
    border: 1px solid var(--st-p-riga, #EAE4DC);
    border-radius: var(--st-r-grande, 12px);
}

.st-modo .st-fig {
    margin-bottom: 14px;
    border-radius: 8px;
    overflow: hidden;
}

.st-guida .st-modo h3 {
    margin: 0 0 8px;
    font-family: var(--st-font-body, inherit);
    font-size: 1rem;
    font-weight: 600;
    color: var(--st-p-inchiostro, #23201D);
}

.st-guida .st-modo p {
    margin: 0;
    max-width: none;
    font-size: var(--st-fs-small);
    line-height: 1.6;
    color: var(--st-p-grigio, #6F6A64);
}

/* --- la regola pratica ------------------------------------------------ *
 * Una riga sola, staccata da tutto: e' la risposta che serve a chi non ha
 * voglia di capire la differenza e vuole solo sapere cosa premere.
 */
.st-guida .st-regola {
    max-width: none;
    margin: 22px 0 0;
    padding: 16px 18px;
    background: var(--st-p-rame-tenue, #FBF1E8);
    border-left: 3px solid var(--st-p-rame, #B45A17);
    border-radius: var(--st-r-campo, 8px);
    font-size: .95rem;
    line-height: 1.6;
    color: var(--st-p-inchiostro, #23201D);
}

.st-guida .st-regola strong { font-weight: 600; }

/* --- la tendina dei conti --------------------------------------------- */

.st-dettagli {
    margin-top: 22px;
    border: 1px solid var(--st-p-riga, #EAE4DC);
    border-radius: var(--st-r-campo, 8px);
    background: #fff;
}

.st-dettagli > summary {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 16px;
    cursor: pointer;
    list-style: none;
    font-size: .9375rem;
    font-weight: 600;
    color: var(--st-p-inchiostro, #23201D);
}

.st-dettagli > summary::-webkit-details-marker { display: none; }

/* Il segno «piu'» disegnato con due sfumature: diventa un «meno» quando la
   tendina e' aperta. Un carattere tipografico cambierebbe forma da un sistema
   all'altro; due gradienti no. */
.st-dettagli > summary::before {
    content: '';
    flex: none;
    width: 14px;
    height: 14px;
    background:
        linear-gradient(var(--st-p-rame, #B45A17), var(--st-p-rame, #B45A17)) center/14px 2px no-repeat,
        linear-gradient(var(--st-p-rame, #B45A17), var(--st-p-rame, #B45A17)) center/2px 14px no-repeat;
    transition: transform .18s ease;
}

.st-dettagli[open] > summary::before {
    background:
        linear-gradient(var(--st-p-rame, #B45A17), var(--st-p-rame, #B45A17)) center/14px 2px no-repeat;
}

.st-dettagli > summary:focus-visible {
    outline: 2px solid var(--st-p-rame, #B45A17);
    outline-offset: -2px;
    border-radius: var(--st-r-campo, 8px);
}

.st-dettagli__corpo {
    padding: 0 16px 16px;
    border-top: 1px solid var(--st-p-riga-chiara, #F2EDE6);
}

.st-guida .st-dettagli__corpo p { max-width: none; }
.st-guida .st-dettagli__corpo > p:first-child {
    margin: 14px 0 0;
    font-size: var(--st-fs-small);
    color: var(--st-p-grigio, #6F6A64);
}

/* --- su schermi stretti ----------------------------------------------- *
 * Tre passi in fila su un telefono sono tre colonne larghe cento pixel: si
 * incolonnano. La figura passa **sopra** il testo e non accanto, perche' a
 * quella larghezza affiancare due cose vuol dire dimezzarle entrambe.
 */
@media (max-width: 900px) {
    .st-passi3 { grid-template-columns: 1fr; gap: 14px; }

    .st-figspiega {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .st-figspiega__fig { max-width: 340px; }

    .st-duemodi { grid-template-columns: 1fr; }
}

/* ====================================================================
 * LA TABELLA SU TELEFONO SI SMONTA IN SCHEDE
 *
 * Tre colonne dentro 350 px non sono una tabella: sono una tabella larga 560
 * dentro una finestra da 350, cioe' una barra di scorrimento orizzontale in
 * mezzo alla pagina. Chi legge su telefono vede il nome del prodotto e meta'
 * della larghezza, e per vedere l'altezza deve trascinare — ammesso che si
 * accorga di poterlo fare, perche' niente glielo dice.
 *
 * Sotto i 700 px ogni riga diventa una scheda: il nome in cima, sotto le
 * misure una per riga con la propria etichetta a sinistra. Nessuno scorrimento
 * e nessun numero senza nome.
 *
 * La tabella resta una tabella nel documento — `display: block` cambia come si
 * disegna, non cosa e'. Le intestazioni continuano a essere `<th scope>` e chi
 * naviga con la voce sente ancora «Larghezza, 30–400 cm».
 * ==================================================================== */

@media (max-width: 700px) {
    .st-tabella-misure { overflow-x: visible; }

    .st-tabella-misure table { min-width: 0; }

    .st-tabella-misure thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .st-tabella-misure table,
    .st-tabella-misure tbody,
    .st-tabella-misure tr,
    .st-tabella-misure tbody th,
    .st-tabella-misure td {
        display: block;
        width: auto;
    }

    .st-tabella-misure tr {
        padding: 14px 16px;
        border-bottom: 1px solid var(--st-border);
    }

    .st-tabella-misure tr:last-child { border-bottom: 0; }

    /* I fili verticali fra le colonne arrivano dal tema sotto, e su una tabella
       smontata in schede non separano piu' due colonne: disegnano un rettangolo
       attorno a ogni riga, dentro il rettangolo della scheda.
       Il selettore porta `.st-guida` davanti perche' la prima versione, senza,
       perdeva contro la regola del tema padre e i rettangoli restavano li'. */
    .st-guida .st-tabella-misure table { border: 0; }

    .st-guida .st-tabella-misure tbody th,
    .st-guida .st-tabella-misure tbody td {
        padding: 0;
        border-bottom: 0;
        border-left: 0;
        border-right: 0;
        border-top: 0;
    }

    .st-tabella-misure tbody th { margin-bottom: 8px; }

    /* Etichetta a sinistra, valore a destra: due colonne dentro la scheda,
       cosi' i valori restano incolonnati anche fra righe diverse. */
    .st-guida .st-tabella-misure td[data-eti] {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 12px;
        padding: 5px 0;
        border-top: 1px solid var(--st-p-riga-chiara, #F2EDE6);
    }

    .st-tabella-misure td[data-eti]::before {
        content: attr(data-eti);
        font-size: .82rem;
        font-weight: 500;
        color: var(--st-muted);
    }

    .st-guida .st-tabella-misure td.st-tabella-misure__preventivo {
        padding-top: 8px;
        border-top: 1px solid var(--st-p-riga-chiara, #F2EDE6);
    }
}

/* ================================================== domande frequenti */

.st-domande {
    list-style: none;
    margin: var(--st-space-4) 0 0;
    padding: 0;
    max-width: 82ch;
}

.st-domande li + li {
    margin-top: 10px;
}

.st-domande details {
    border: 1px solid var(--st-border);
    border-radius: var(--st-radius);
    background: #fff;
}

.st-domande summary {
    padding: 16px 20px;
    font-weight: 600;
    font-size: 1.02rem;
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.st-domande summary::-webkit-details-marker { display: none; }

/* Il segno di apertura lo disegna il CSS: il triangolino predefinito cambia
   forma da un browser all'altro e non si puo' colorare. */
.st-domande summary::after {
    content: '';
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    border-right: 2px solid var(--st-copper);
    border-bottom: 2px solid var(--st-copper);
    transform: rotate(45deg) translateY(-2px);
    transition: transform var(--st-transition);
}

.st-domande details[open] summary::after {
    transform: rotate(-135deg) translateY(-2px);
}

.st-domande summary:hover { color: var(--st-copper-text); }

.st-domanda__risposta {
    padding: 0 20px 18px;
    max-width: 74ch;
}

.st-domanda__risposta p {
    margin: 0 0 10px;
    color: var(--st-muted);
    line-height: 1.65;
}

/* =======================================================================
   INGRESSO DEL CONFIGURATORE — tavola 10
   =======================================================================
   Una pagina che deve far cominciare: fotografia grande, le famiglie fra cui
   scegliere che escono dalla fotografia, i cinque passaggi che spiegano che
   non e' complicato, e un invito in fondo.
   ======================================================================= */

.st-cfgintro { background: var(--st-white); }

/* --- hero -------------------------------------------------------------- */
.st-cfgintro__hero {
    position: relative;
    min-height: 460px;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: var(--st-ivory);
}
.st-cfgintro__sfondo { position: absolute; inset: 0; z-index: 0; }
.st-cfgintro__sfondo img {
    width: 100%; height: 100%;
    object-fit: cover; object-position: 66% 46%;
    display: block;
    transform: scale(1.15); transform-origin: 74% 44%;
}
/* Stesso velo chiaro e locale della home: il testo e' scuro, quindi si alza la
   luminanza dietro il copy invece di scurire la fotografia. */
.st-cfgintro__velo {
    position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(
        100deg,
        rgba(255, 255, 255, .93) 0%,
        rgba(255, 255, 255, .86) 26%,
        rgba(255, 255, 255, .48) 44%,
        rgba(255, 255, 255, 0) 60%
    );
    pointer-events: none;
}
.st-cfgintro__hero-inner {
    position: relative; z-index: 2;
    padding-block: 48px 96px;   /* lo spazio in basso e' per le schede che sporgono */
}
.st-cfgintro__briciole {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 20px;
    font-size: var(--st-fs-micro, 13px); color: var(--st-muted);
}
.st-cfgintro__briciole a { color: var(--st-muted); text-decoration: none; }
.st-cfgintro__briciole a:hover { color: var(--st-copper-text); text-decoration: underline; }
.st-cfgintro__briciole [aria-current] { color: var(--st-charcoal); font-weight: 600; }

.st-cfgintro__titolo {
    position: relative;
    max-width: 15ch;
    margin: 0 0 26px;
    padding-bottom: 22px;
    font-family: var(--st-font-display);
    font-size: var(--st-fs-h1);
    font-weight: 600; line-height: 1.06;
    letter-spacing: -.015em;
    color: var(--st-charcoal);
}
/* «su misura» in rame: e' la promessa del sito, e in un titolo di quattro
   parole vale quanto le altre tre messe insieme. */
.st-cfgintro__titolo em { font-style: normal; color: var(--st-copper-text, var(--st-copper)); }
.st-cfgintro__titolo::after {
    content: "";
    position: absolute; left: 0; bottom: 0;
    width: 68px; height: 3px; border-radius: 2px;
    background: var(--st-copper);
}
.st-cfgintro__intro {
    max-width: 46ch; margin: 0;
    font-size: var(--st-fs-lead, 18px); line-height: 1.65;
    color: #3D4045;
}

/* --- le famiglie, che sporgono dalla fotografia ------------------------ */
.st-cfgintro__modelli { margin-top: -64px; position: relative; z-index: 3; }
.st-cfgmodelli {
    display: grid;
    grid-template-columns: repeat(var(--st-mod-n, 4), minmax(0, 1fr));
    gap: 16px;
    margin: 0; padding: 0; list-style: none;
}
.st-cfgmodelli > li { display: flex; }
.st-cfgmodello {
    display: flex; align-items: stretch; gap: 0;
    width: 100%;
    background: var(--st-white);
    border: 1px solid var(--st-border-soft, #E9E5DF);
    border-radius: 10px;
    overflow: hidden;
    text-decoration: none;
    box-shadow: 0 6px 22px rgba(47, 50, 54, .07);
    transition: border-color var(--st-transition), box-shadow var(--st-transition), transform var(--st-transition);
}
.st-cfgmodello:hover {
    border-color: var(--st-copper);
    box-shadow: 0 12px 28px rgba(47, 50, 54, .12);
    transform: translateY(-3px);
}
.st-cfgmodello__media {
    position: relative;
    flex: 0 0 38%;
    background: var(--st-sand);
    overflow: hidden;
}
.st-cfgmodello__media img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover; display: block;
}
.st-cfgmodello__corpo {
    display: flex; flex-direction: column; gap: 6px;
    padding: 18px 18px 16px;
    min-width: 0;
}
.st-cfgmodello__nome {
    font-family: var(--st-font-display);
    font-size: var(--st-fs-lead); font-weight: 600; line-height: 1.25;
    color: var(--st-charcoal);
}
.st-cfgmodello__testo {
    font-size: var(--st-fs-micro, 13px); line-height: 1.5; color: var(--st-muted);
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.st-cfgmodello__da { font-size: var(--st-fs-small, 14px); font-weight: 700; color: var(--st-charcoal); }
.st-cfgmodello__da .amount, .st-cfgmodello__da bdi { font-weight: 700; }
.st-cfgmodello__cta {
    display: inline-flex; align-items: center; gap: 8px;
    margin-top: auto; padding-top: 10px;
    font-size: var(--st-fs-micro, 13px); font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase;
    color: var(--st-copper-text, var(--st-copper));
}
.st-cfgmodello:hover .st-cfgmodello__cta .st-icon { transform: translateX(4px); }
.st-cfgmodello__cta .st-icon { transition: transform var(--st-transition); }

/* --- i cinque passaggi -------------------------------------------------- */
.st-cfgintro__passi { padding-block: 64px 8px; }
.st-cfgintro__h2 {
    margin: 0 0 28px;
    font-family: var(--st-font-display);
    font-size: var(--st-fs-h2);
    font-weight: 600; text-align: center;
    color: var(--st-charcoal);
}
.st-cfgpassi {
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
    margin: 0; padding: 28px 20px; list-style: none;
    background: var(--st-ivory);
    border-radius: 12px;
}
.st-cfgpasso {
    position: relative;
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    padding: 0 14px;
    text-align: center;
}
/* La linea tratteggiata fra un passo e il successivo: dice che sono una
   sequenza e non cinque cose separate. Non c'e' dopo l'ultimo. */
.st-cfgpasso:not(:last-child)::after {
    content: "";
    position: absolute; top: 30px; right: -4px;
    width: calc(100% - 62px); height: 0;
    border-top: 1px dashed var(--st-border-strong, #9D8B73);
    opacity: .5;
    transform: translateX(50%);
}
.st-cfgpasso__n {
    display: grid; place-items: center;
    width: 26px; height: 26px;
    font-size: 12px; font-weight: 700; line-height: 1;
    color: var(--st-white); background: var(--st-copper);
    border-radius: 50%;
}
.st-cfgpasso__icona {
    position: relative; z-index: 1;
    display: grid; place-items: center;
    width: 56px; height: 56px;
    color: var(--st-copper);
    background: var(--st-white);
    border: 1px solid var(--st-border-soft, #E9E5DF);
    border-radius: 50%;
}
.st-cfgpasso strong { font-size: var(--st-fs-small, 14px); font-weight: 700; color: var(--st-charcoal); }
.st-cfgpasso > span:last-child { font-size: var(--st-fs-micro, 13px); line-height: 1.45; color: var(--st-muted); }

/* --- garanzie ----------------------------------------------------------- */
.st-cfgintro__garanzie { padding-block: 32px 0; }
.st-cfggaranzie {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    margin: 0; padding: 22px 10px; list-style: none;
    background: var(--st-white);
    border: 1px solid var(--st-border-soft, #E9E5DF);
    border-radius: 10px;
}
.st-cfggaranzie li {
    display: flex; align-items: center; justify-content: center; gap: 14px;
    padding: 0 16px;
}
.st-cfggaranzie li + li { border-left: 1px solid var(--st-border-soft, #E9E5DF); }
.st-cfggaranzie__icona {
    display: grid; place-items: center;
    flex: 0 0 auto; width: 46px; height: 46px;
    color: var(--st-copper);
    background: var(--st-copper-soft, #F9F2EC);
    border-radius: 50%;
}
.st-cfggaranzie li > span:last-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.st-cfggaranzie strong { font-size: var(--st-fs-ui, 15px); font-weight: 600; color: var(--st-charcoal); }
.st-cfggaranzie li span span { font-size: var(--st-fs-micro, 13px); color: var(--st-muted); }

/* --- invito finale ------------------------------------------------------ */
.st-cfgintro__chiusura { padding-block: 48px 72px; text-align: center; }
.st-cfgintro__cta {
    min-height: 62px !important;
    padding: 0 46px !important;
    font-size: var(--st-fs-lead);
}
.st-cfgintro__nota {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    margin: 16px 0 0;
    font-size: var(--st-fs-micro, 13px); color: var(--st-muted);
}
.st-cfgintro__alt { margin: 10px 0 0; font-size: var(--st-fs-small, 14px); }
.st-cfgintro__alt a { color: var(--st-muted); text-underline-offset: 3px; }
.st-cfgintro__alt a:hover { color: var(--st-copper-text); }

/* --- tablet e telefono -------------------------------------------------- */
@media (max-width: 1140px) {
    .st-cfgmodelli { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .st-cfgpassi { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px 8px; }
    .st-cfgpasso:not(:last-child)::after { display: none; }
    .st-cfggaranzie { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 0; }
    .st-cfggaranzie li:nth-child(odd) { border-left: 0; }
    .st-cfggaranzie li:nth-child(3) { border-left: 0; }
}

@media (max-width: 700px) {
    .st-cfgintro__hero { min-height: 0; }
    .st-cfgintro__hero-inner { padding-block: 32px 80px; }
    .st-cfgintro__titolo { max-width: none; }
    .st-cfgmodelli { grid-template-columns: minmax(0, 1fr); }
    .st-cfgmodello__media { flex-basis: 34%; }
    .st-cfgpassi { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 22px 12px; }
    .st-cfggaranzie { grid-template-columns: minmax(0, 1fr); }
    .st-cfggaranzie li + li { border-left: 0; }
    .st-cfggaranzie li { justify-content: flex-start; }
    .st-cfgintro__chiusura { padding-block: 36px 52px; }
    .st-cfgintro__cta { width: 100%; padding: 0 20px !important; }
}

/* ====================================================================
 * LE PAGINE DI TESTO STANNO AL CENTRO
 *
 * Guida alle misure e domande frequenti usavano il contenitore del sito, largo
 * 1336 px, con dentro paragrafi da 650. Il testo restava incollato al margine
 * sinistro e sulla destra avanzavano quasi settecento pixel vuoti — su ogni
 * sezione, per tutta la pagina.
 *
 * La larghezza del testo non era sbagliata: sessantacinque battute per riga
 * sono la misura giusta per leggere, e allargarla peggiorerebbe le cose. Era
 * sbagliato **dove** stava quella colonna. Un blocco stretto appoggiato a
 * sinistra dentro un contenitore largo non si legge come una scelta: si legge
 * come una pagina a cui manca qualcosa a destra.
 *
 * Portata al centro, la stessa colonna diventa una pagina editoriale. Non
 * cambia una riga di testo e cambia tutta l'impressione.
 *
 * La tabella delle misure resta piu' larga della prosa: e' un dato da
 * confrontare per righe, non da leggere per frasi, e stringerla a misura di
 * lettura la costringerebbe a spezzare le colonne.
 * ==================================================================== */

.st-guida .st-section > .st-container,
.st-faq .st-section > .st-container,
.st-guida .st-pagina__testa > .st-container,
.st-faq .st-pagina__testa > .st-container {
  max-width: 940px;
  margin-inline: auto;
}

/* La prosa si ferma prima: una riga lunga novecento pixel si legge male anche
   se e' centrata — l'occhio perde il capo della riga successiva. */
.st-guida .st-section p,
.st-faq .st-section p,
.st-guida .st-pagina__testa p,
.st-faq .st-pagina__testa p {
  max-width: 68ch;
}

/*
 * La tabella sta dentro la colonna, e la nota sopra era sbagliata.
 *
 * Avevo scritto «e' un dato, non un discorso: le serve larghezza» e le avevo
 * tolto ogni limite. Il risultato: restava larga 1336 dentro un contenitore da
 * 940, e le due righe lunghe finivano tagliate a meta' parola — «non sono
 * dichiarati nella scheda te…». Un dato tagliato non e' un dato.
 *
 * Quattro colonne in 940 pixel ci stanno comode. Se un giorno le colonne
 * diventassero sei, la risposta non sara' allargare la tabella oltre la
 * pagina: sara' farla scorrere per conto suo.
 */
.st-guida .st-tabella-misure {
  width: 100%;
  max-width: 100%;
}

/* Se il contenuto crescesse oltre la colonna, scorre la tabella — non la
   pagina, e non si taglia niente. */
.st-guida .st-tabella-misure__wrap,
.st-guida .st-tabella-misure {
  overflow-x: auto;
}

/* ------------------------------------------------ il ritmo delle sezioni
 * Le fasce alternate crema e bianco davano il passo, ma dentro ognuna il
 * respiro sopra e sotto era diverso. Un valore solo, come in home.
 */
.st-guida .st-section,
.st-faq .st-section {
  padding-block: 72px;
}

.st-guida .st-pagina__testa,
.st-faq .st-pagina__testa {
  padding-block: 56px 64px;
}

/* Fra l'occhiello di sezione, il titolo e il testo che li segue: tre stacchi
   che erano tre valori diversi. */
.st-guida .st-section__eyebrow,
.st-faq .st-section__eyebrow { margin-bottom: 10px; }

.st-guida .st-section h2,
.st-faq .st-section h2 { margin: 0 0 18px; }

/* ====================================================================
 * LE PAGINE PER AMBIENTE
 *
 * Ereditano la colonna editoriale centrata delle altre pagine di testo. Qui
 * sotto solo cio' che hanno di proprio: i punti che contano nella stanza e i
 * due rimandi al catalogo, che non sono pastiglie ma consigli — hanno il nome
 * della categoria e la ragione per cui ci si va.
 * ==================================================================== */

.page .st-stanza__sommario {
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--st-p-grigio, #6F6A64);
}

.page .st-stanza__punti {
  display: grid;
  gap: 22px;
  margin: 0 0 8px;
}

.page .st-stanza__punto h3 {
  margin: 0 0 6px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--st-p-inchiostro, #23201D);
}

.page .st-stanza__punto p {
  margin: 0;
  color: var(--st-p-grigio, #6F6A64);
}

/* Il filetto di rame a sinistra tiene insieme i punti come un elenco senza
   pallini: sono affermazioni, non passaggi da eseguire in ordine. */
.page .st-stanza__punto {
  padding-left: 16px;
  border-left: 2px solid var(--st-p-riga, #EAE4DC);
}

.page .st-stanza__punto:first-child {
  border-left-color: var(--st-p-rame, #B45A17);
}

.page .st-stanza__categorie {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  margin: 0 0 8px;
}

.page .st-stanza__categoria {
  display: block;
  padding: 18px 20px;
  border: 1px solid var(--st-p-riga, #EAE4DC);
  border-radius: 10px;
  background: #fff;
  text-decoration: none;
  transition: border-color .16s ease, background .16s ease;
}

.page .st-stanza__categoria:hover,
.page .st-stanza__categoria:focus-visible {
  border-color: var(--st-p-rame, #B45A17);
  background: var(--st-p-rame-tenue, #FBF1E8);
}

.page .st-stanza__categoria strong {
  display: block;
  margin-bottom: 4px;
  font-size: 1rem;
  color: var(--st-p-rame-testo, #AE4C0B);
}

.page .st-stanza__categoria span {
  display: block;
  font-size: .875rem;
  line-height: 1.5;
  color: var(--st-p-grigio, #6F6A64);
}

.page .st-stanza__chiusa {
  margin-top: 40px;
  padding: 28px 30px;
  border-radius: 12px;
  background: var(--st-p-crema, #FAF6F1);
}

.page .st-stanza__chiusa h2 { margin-top: 0; }
.page .st-stanza__chiusa p:last-child { margin-bottom: 0; }

/*
 * CONTATTI: LA COLONNA SINISTRA NON SI ALLUNGA A VUOTO
 *
 * A sinistra ci sono quattro recapiti, a destra il modulo: il modulo e' alto
 * il doppio, e la colonna sinistra veniva stirata per pareggiarlo. Sotto
 * «Orari» restavano trecentocinquanta pixel di niente prima della sezione
 * successiva — un buco che si legge come un pezzo di pagina che non ha
 * caricato.
 *
 * Le due colonne non devono avere la stessa altezza: devono cominciare
 * insieme. `align-items: start` dice questo, ed e' tutto cio' che serviva.
 */
.st-contatti .st-contatti__griglia,
.page .st-contatti-grid,
.st-contatti [class*="griglia"] {
  align-items: start;
}

/* ====================================================================
 * LE PAGINE PER AMBIENTE: UN SOLO BORDO SINISTRO
 *
 * Il titolo cominciava a 345 px e il testo sotto a 377: trentadue pixel di
 * differenza fra il titolo e cio' che racconta. A occhio non si misura, ma si
 * vede — la pagina sembra montata da due pezzi diversi, ed e' la stessa
 * impressione che da' un volantino stampato male.
 *
 * La causa e' che il titolo esce dal contenitore che il tema da' al contenuto,
 * mentre i paragrafi ci stanno dentro. Qui si riportano tutti sulla stessa
 * colonna: una sola misura, un solo bordo.
 *
 * E si aggiunge il respiro che mancava sotto la testata. Un titolo appoggiato
 * al bordo inferiore del menu non e' un inizio di pagina: sembra la
 * continuazione di quello che c'era prima.
 *
 * `:has()` riconosce queste pagine dal loro contenuto invece che da una classe
 * sul corpo: le pagine sono create dal plugin e non portano classi proprie, e
 * chiedere «contiene un sommario di ambiente?» e' piu' robusto che tenere
 * allineato a mano un elenco di slug.
 * ==================================================================== */

/*
 * LA MISURA DI LETTURA STA SUL CONTENITORE, NON SUI SINGOLI ELEMENTI
 *
 * Avevo messo `max-width: 62ch` sul sommario e `68ch` sui punti, per tenere le
 * righe leggibili. Giusto come intenzione, sbagliato come posto: ogni elemento
 * si dava una larghezza diversa, e il titolo — che di limite non ne aveva —
 * partiva settanta pixel piu' a sinistra di tutto il resto.
 *
 * Un limite per elemento produce tanti bordi sinistri quanti sono i tipi di
 * elemento. Il limite va messo una volta, dove sta il testo: il contenitore.
 */
.page:has(.st-stanza__sommario) .entry-content,
.page:has(.st-stanza__sommario) .st-pagina__corpo,
.page:has(.st-stanza__sommario) article {
  max-width: 760px;
  margin-inline: auto;
}

/*
 * IL DISALLINEAMENTO ERA DI WORDPRESS, NON MIO
 *
 * Il titolo stava a 310 e il testo a 379. Non era un margine dimenticato: la
 * disposizione a blocchi (`is-layout-constrained`) da' ai figli del contenuto
 * una larghezza piu' stretta di quella del contenitore — 682 dentro 820 — e il
 * titolo, che quella regola non la prende, restava largo quanto il
 * contenitore.
 *
 * Si riportano i figli alla larghezza del loro contenitore. Non si allarga il
 * contenitore e non si stringe il titolo: si toglie la differenza, che e'
 * l'unica cosa che si vedeva.
 */
.page:has(.st-stanza__sommario) .entry-content > * {
  max-width: 100%;
  margin-inline: 0;
}

.page:has(.st-stanza__sommario) .entry-content > h1 {
  padding-top: 48px;
  margin-bottom: 18px;
  font-size: clamp(2.1rem, 3.2vw, 2.75rem);
  line-height: 1.12;
}

/* Il sommario e' il sottotitolo del titolo, non il primo paragrafo del testo:
   piu' grande del corpo, piu' chiaro dell'inchiostro, e attaccato al titolo. */
.page:has(.st-stanza__sommario) .st-stanza__sommario {
  margin: 0 0 42px;
  padding: 0;
  font-size: 1.125rem;
  line-height: 1.6;
}

/*
 * `> h2` e non `h2`: la prima versione colpiva **tutti** i titoli di secondo
 * livello della pagina, piede compreso — «Informazioni» e «Assistenza» sono
 * diventati enormi e andavano a capo a meta' parola. Un selettore senza
 * confine non e' un selettore generoso: e' un selettore che non sa dove
 * finisce cio' di cui parla.
 */
.page:has(.st-stanza__sommario) .entry-content > h2 {
  margin: 46px 0 20px;
  font-size: clamp(1.5rem, 2vw, 1.8rem);
}

/* Fra un punto e l'altro: erano ventidue, e con tre punti di due righe
   ciascuno la sezione si leggeva come un blocco unico. */
.page:has(.st-stanza__sommario) .st-stanza__punti { gap: 26px; }

.page:has(.st-stanza__sommario) .st-stanza__chiusa {
  margin-top: 52px;
  margin-bottom: 8px;
}

/* ====================================================================
 * LE DOMANDE FREQUENTI: LINGUETTE E FISARMONICA
 *
 * Il disegno viene da un componente React che il committente ha proposto:
 * linguette per categoria, risposte a fisarmonica, il «piu'» che ruota
 * aprendo. La resa e' quella; la tecnica no.
 *
 * Il componente originale costruiva le risposte con `motion.div` e un bottone.
 * Qui restano `<details>` e `<summary>`, che il browser sa gia' aprire senza
 * copione, che un lettore di schermo annuncia da solo, e il cui testo la
 * ricerca della pagina trova anche a risposta chiusa. Sono tre cose che la
 * versione a componenti perde, e nessuna delle tre si vede in una schermata —
 * si vedono il giorno che qualcuno ne ha bisogno.
 * ==================================================================== */

.st-domande__filtri {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 28px;
}

.st-domande__tab {
  position: relative;
  overflow: hidden;
  /* Undici e non otto: a otto la pastiglia si fermava a quarantuno pixel,
     tre sotto la soglia del bersaglio. Sono i filtri di una pagina che si usa
     col pollice cercando una risposta, e mancarli significa aprire la
     categoria sbagliata. */
  padding: 11px 16px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--st-p-riga, #DED8D0);
  border-radius: 7px;
  background: transparent;
  font-size: .875rem;
  font-weight: 500;
  color: var(--st-p-grigio, #6F6A64);
  cursor: pointer;
  transition: color .2s ease, border-color .2s ease;
}

.st-domande__tab span { position: relative; z-index: 1; }

/*
 * Il fondo che sale dal basso, come nel componente proposto — ma con una
 * trasformazione invece che con una libreria di animazione: sono tre righe di
 * foglio contro trentacinque chilobyte di codice.
 */
.st-domande__tab::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--st-p-rame, #B45A17);
  transform: translateY(100%);
  transition: transform .32s cubic-bezier(.16, 1, .3, 1);
}

.st-domande__tab.is-attiva {
  border-color: var(--st-p-rame, #B45A17);
  color: #fff;
}

.st-domande__tab.is-attiva::before { transform: translateY(0); }

.st-domande__tab:hover:not(.is-attiva) {
  border-color: var(--st-p-rame, #B45A17);
  color: var(--st-p-inchiostro, #23201D);
}

@media (prefers-reduced-motion: reduce) {
  .st-domande__tab::before { transition: none; }
}

/* ------------------------------------------------------ la fisarmonica */

.st-faq .st-domande { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }

.st-faq .st-domande > li { margin: 0; }

.st-faq .st-domande details {
  border: 1px solid var(--st-p-riga, #DED8D0);
  border-radius: 12px;
  background: #fff;
  transition: background .18s ease, border-color .18s ease;
}

.st-faq .st-domande details[open] {
  background: var(--st-p-crema, #FAF6F1);
  border-color: var(--st-p-riga, #DED8D0);
}

.st-faq .st-domande summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  font-size: var(--st-fs-lead);
  font-weight: 500;
  color: var(--st-p-grigio, #6F6A64);
  cursor: pointer;
  list-style: none;
}

.st-faq .st-domande summary::-webkit-details-marker { display: none; }
.st-faq .st-domande details[open] summary { color: var(--st-p-inchiostro, #23201D); }

/*
 * Il «piu'» che diventa «per»: due tratti disegnati nel foglio, ruotati di
 * quarantacinque gradi all'apertura. Non e' un'icona in piu' da scaricare, ed
 * e' l'unica animazione della pagina — dice che qualcosa si e' aperto, che e'
 * l'unica cosa che serve dire.
 */
.st-faq .st-domande summary::after {
  content: "";
  position: relative;
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  /*
   * `border: 0` e non e' pignoleria: il segno precedente era un chevron
   * disegnato con due bordi, e il mio e' un piu' disegnato con due sfondi.
   * Sostituendo solo lo sfondo si sommavano — bordi e sfondi convivono senza
   * protestare — e usciva una forma che non era ne' un chevron ne' un piu'.
   *
   * Quando si ridisegna un segno fatto con una tecnica diversa, la tecnica
   * vecchia va spenta esplicitamente: non se ne va da sola perche' quella
   * nuova le assomiglia.
   */
  border: 0;
  transform: none;
  background:
    linear-gradient(var(--st-p-rame, #B45A17), var(--st-p-rame, #B45A17)) center / 100% 2px no-repeat,
    linear-gradient(var(--st-p-rame, #B45A17), var(--st-p-rame, #B45A17)) center / 2px 100% no-repeat;
  transition: transform .22s ease;
}

.st-faq .st-domande details[open] summary::after { transform: rotate(45deg); }

@media (prefers-reduced-motion: reduce) {
  .st-faq .st-domande summary::after { transition: none; }
}

.st-faq .st-domanda__risposta {
  padding: 0 20px 20px;
  max-width: 66ch;
}

.st-faq .st-domanda__risposta p {
  margin: 0 0 12px;
  line-height: 1.65;
  color: var(--st-p-grigio, #6F6A64);
}

.st-faq .st-domanda__risposta p:last-child { margin-bottom: 0; }

/* ====================================================================
 * LE PAGINE DI TESTO STANNO AL CENTRO — ANCHE LE ALTRE
 *
 * Guida e domande frequenti erano state centrate; chi siamo, spedizioni e
 * resi, assistenza e i documenti legali erano rimasti indietro. Su tutte lo
 * stesso difetto: paragrafi larghi 672 px appoggiati al bordo sinistro di un
 * contenitore da 1336, con seicentosessanta pixel vuoti a destra per tutta la
 * pagina.
 *
 * La larghezza del testo era giusta — sessantacinque battute per riga sono la
 * misura per leggere, allargarla peggiorerebbe. Era sbagliato **dove** stava
 * quella colonna: un blocco stretto appoggiato a sinistra dentro un
 * contenitore largo non si legge come una scelta, si legge come una pagina a
 * cui manca qualcosa.
 *
 * Si applica per pagina e non a tutte in blocco: contatti ha due colonne,
 * il carrello e la cassa hanno una tabella e un riepilogo, e centrare la loro
 * colonna li romperebbe. Una regola larga qui farebbe piu' danni di quanti ne
 * ripara.
 * ==================================================================== */

.st-chi-siamo .st-section > .st-container,
.st-chi-siamo .st-pagina__testa > .st-container,
.st-legale .st-section > .st-container,
.st-legale .st-pagina__testa > .st-container,
.st-assistenza .st-section > .st-container,
.st-assistenza .st-pagina__testa > .st-container {
  max-width: 940px;
  margin-inline: auto;
}

.st-chi-siamo .st-section p,
.st-legale .st-section p,
.st-assistenza .st-section p {
  max-width: 68ch;
}

/* Lo stesso ritmo delle altre pagine di testo: 72 fra le fasce, 56/64 sulla
   testata. Erano tre valori diversi per tre pagine che si assomigliano. */
.st-chi-siamo .st-section,
.st-legale .st-section,
.st-assistenza .st-section {
  padding-block: 72px;
}

/*
 * I DOCUMENTI LEGALI
 *
 * Termini, privacy e cookie arrivano dal contenuto della pagina e li impagina
 * la disposizione a blocchi di WordPress: titolo a 345 e testo a 367, i soliti
 * ventidue pixel di scarto fra il titolo e cio' che racconta.
 *
 * E' lo stesso difetto delle pagine per ambiente, e si chiude allo stesso
 * modo: la misura di lettura sul contenitore, i figli larghi quanto lui.
 * Su un documento che qualcuno legge per capire cosa sta accettando, la
 * chiarezza di impaginazione non e' un vezzo.
 */
/*
 * CORREZIONE A ME STESSO, NELLO STESSO GIRO
 *
 * La prima versione toglieva il limite ai figli senza darne uno al
 * contenitore: le righe sono passate da 710 pixel a 1256, cioe' da leggibili a
 * illeggibili. Su un documento che qualcuno legge per capire cosa sta
 * accettando e' il peggior modo di «allineare».
 *
 * Il limite va messo una volta, sul contenitore; i figli lo riempiono. E'
 * esattamente la stessa correzione fatta ieri sulle pagine per ambiente — la
 * ripeto qui perche' l'errore l'ho ripetuto io.
 */
/*
 * La misura si da' ai figli, perche' il contenitore non e' nostro.
 *
 * `.entry-content` sta dentro un contenitore a tutta larghezza del tema base,
 * che gli impone `max-width: none` con piu' forza di quanta ne abbia una
 * regola scritta qui. Combatterla richiederebbe un selettore sempre piu' lungo
 * — e il prossimo aggiornamento del tema lo rimetterebbe in discussione.
 *
 * I figli invece sono liberi: e' lo stesso meccanismo che WordPress usa per la
 * sua disposizione a blocchi, con la nostra misura al posto della sua. Tutti
 * larghi uguale e centrati significa anche un bordo sinistro solo, che era
 * l'altro difetto di queste pagine.
 *
 * `alignwide` e `alignfull` restano fuori: sono le due larghezze che un
 * redattore chiede apposta, e ignorarle vorrebbe dire togliergli l'unico
 * controllo che ha sull'impaginazione.
 */
.page .entry-content > *:not(.alignwide):not(.alignfull) {
  max-width: 820px;
  margin-inline: auto;
}

/* ======================================================================
 * IL RIQUADRO CHE FA SCORRERE LE TABELLE
 *
 * Lo mette `inc/tabelle.php` intorno a ogni tabella del contenuto. Qui gli si
 * dice come comportarsi, e si aggiunge il segno che dice che c'e' altro a
 * destra: un'ombra interna sul bordo, che sparisce quando si arriva in fondo.
 * Senza un segno, una tabella tagliata e una tabella scorrevole si somigliano
 * troppo — e chi non sa che puo' scorrere non scorre.
 * ====================================================================== */
.st-tabella-scorre {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(182, 85, 50, .4) transparent;
    /* Le due sfumature ferme ai bordi restano; le due mobili si spostano con
       il contenuto e coprono le prime quando non c'e' piu' niente oltre. */
    background:
        linear-gradient(to right, var(--st-white) 30%, rgba(255, 255, 255, 0)) left / 40px 100% no-repeat,
        linear-gradient(to left,  var(--st-white) 30%, rgba(255, 255, 255, 0)) right / 40px 100% no-repeat,
        radial-gradient(farthest-side at 0 50%, rgba(21, 24, 27, .22), transparent) left / 20px 100% no-repeat,
        radial-gradient(farthest-side at 100% 50%, rgba(21, 24, 27, .22), transparent) right / 20px 100% no-repeat;
    background-attachment: local, local, scroll, scroll;
}

.st-tabella-scorre:focus-visible {
    outline: 2px solid var(--st-p-rame);
    outline-offset: 3px;
    border-radius: var(--st-r-campo, 12px);
}

.st-tabella-scorre table { min-width: 34rem; }

.st-tabella-scorre::-webkit-scrollbar { height: 6px; }
.st-tabella-scorre::-webkit-scrollbar-track { background: transparent; }
.st-tabella-scorre::-webkit-scrollbar-thumb {
    background: rgba(182, 85, 50, .35);
    border-radius: 999px;
}

/* =======================================================================
 * ISPIRAZIONI
 *
 * La pagina piu' fotografica del sito. Vale la stessa regola della hero e
 * delle testate di catalogo: le fotografie sono chiare, quindi il testo e'
 * inchiostro e il velo schiarisce invece di scurire.
 * ===================================================================== */

.st-isp { --st-stacco: clamp(52px, 6.5vw, 88px); }
.st-isp > .st-sez { margin-top: var(--st-stacco); }
.st-isp .st-sez__titolo {
    margin: 0 0 18px;
    font-family: var(--st-font-display);
    font-size: var(--st-fs-h2);
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: -.012em;
    color: var(--st-p-inchiostro);
}
.st-isp__occhiello {
    margin: 0 0 12px;
    font-size: var(--st-fs-micro); font-weight: 600; letter-spacing: .14em;
    text-transform: uppercase; color: var(--st-copper-text);
}

/* --- testata --- */
.st-isp__testa { position: relative; padding-block: clamp(44px, 6vw, 84px); background: var(--st-p-crema); }
.st-isp__testa--foto { min-height: clamp(320px, 34vw, 440px); display: flex; align-items: center; }
.st-isp__sfondo { position: absolute; inset: 0; overflow: hidden; z-index: 0; }
.st-isp__sfondo img { width: 100%; height: 100%; object-fit: cover; object-position: center 42%; display: block; }
/* Stessa taratura delle testate di catalogo: quasi pieno dove sta il testo,
   spento prima della meta' dove la fotografia riprende intera. */
.st-isp__sfondo::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(94deg,
        rgba(247, 244, 239, .96) 0%,
        rgba(247, 244, 239, .94) 26%,
        rgba(247, 244, 239, .72) 40%,
        rgba(247, 244, 239, .24) 54%,
        rgba(247, 244, 239, 0) 70%);
}
.st-isp__testa-inner { position: relative; z-index: 1; }
.st-isp__testa-inner .st-pagina__titolo {
    max-width: 16ch;
    margin: 0 0 14px;
    color: var(--st-p-inchiostro);
}
.st-isp__testa-inner .st-lead { max-width: 34ch; margin: 0 0 24px; color: var(--st-text); opacity: .86; }

/* --- due colonne --- */
.st-isp__doppia {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
    gap: clamp(26px, 3.4vw, 56px);
    align-items: start;
}
.st-isp__doppia--rovescia { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
.st-sez--crema { padding-block: clamp(36px, 4.4vw, 64px); background: var(--st-p-crema); }

/* --- riquadro fotografico riusabile --- */
.st-ispcard { display: block; border-radius: var(--st-r-scheda, 20px); overflow: hidden; background: #fff; text-decoration: none; }
.st-ispcard__media { display: block; aspect-ratio: 4 / 3; overflow: hidden; }
.st-ispcard--alta .st-ispcard__media { aspect-ratio: 3 / 4; }
.st-ispcard__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s cubic-bezier(.2,.7,.3,1); }
.st-ispcard:hover .st-ispcard__media img { transform: scale(1.05); }
.st-ispcard__testo { display: block; padding: 12px 14px 15px; }
.st-ispcard__titolo { display: block; font-size: var(--st-fs-small); font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--st-p-inchiostro); }
.st-ispcard__nota { display: block; margin-top: 5px; font-size: var(--st-fs-micro); line-height: 1.45; color: var(--st-muted); }

/* --- editoriale --- */
.st-editoriale { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border-radius: var(--st-r-scheda, 20px); overflow: hidden; background: var(--st-p-crema); }
.st-editoriale__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.st-editoriale__testo { padding: clamp(20px, 2.4vw, 32px); display: flex; flex-direction: column; justify-content: center; }
.st-editoriale__testo p { margin: 0 0 16px; font-size: 14px; line-height: 1.6; color: var(--st-muted); }

/* --- consigli --- */
.st-consigli__lista { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.st-consigli__lista > li { background: none; border: 0; }

/* --- collezioni in evidenza --- */
.st-collinevidenza__lista { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.st-collinevidenza__lista > li { background: none; border: 0; }

/* --- prima e dopo --- */
.st-primadopo__coppia { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.st-primadopo__coppia figure { margin: 0; }
.st-primadopo__coppia img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; border-radius: var(--st-r-campo, 12px); }
.st-primadopo__coppia figcaption { margin-top: 8px; font-size: 12px; color: var(--st-muted); line-height: 1.4; }
.st-primadopo__coppia figcaption strong { display: block; font-size: 11px; letter-spacing: .09em; text-transform: uppercase; color: var(--st-p-inchiostro); }

/* --- le quattro esigenze --- */
.st-esigenze { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.st-esigenze > li { background: none; border: 0; padding: 0; }
.st-esigenza {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 92px);
    align-items: stretch;
    border: 1px solid var(--st-border, #E4DDD2);
    border-radius: var(--st-r-scheda, 20px);
    overflow: hidden;
    background: #fff;
    text-decoration: none;
    min-height: 118px;
}
.st-esigenza__testo { display: flex; flex-direction: column; gap: 4px; padding: 16px 14px 16px 18px; }
.st-esigenza__icona { color: var(--st-p-inchiostro); opacity: .72; display: flex; margin-bottom: 4px; }
.st-esigenza__nome { font-family: var(--st-font-display); font-size: var(--st-fs-body); font-weight: 500; line-height: 1.2; color: var(--st-p-inchiostro); }
.st-esigenza__nota { font-size: var(--st-fs-micro); line-height: 1.4; color: var(--st-muted); }
.st-esigenza__vai { margin-top: auto; color: var(--st-copper-text); display: flex; }
.st-esigenza__media { overflow: hidden; }
.st-esigenza__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (max-width: 1140px) {
    .st-isp__doppia, .st-isp__doppia--rovescia { grid-template-columns: minmax(0, 1fr); }
    .st-esigenze { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
    .st-isp__testa--foto { min-height: 0; }
    .st-isp__sfondo::after {
        background: linear-gradient(to top,
            rgba(247, 244, 239, .94) 0%,
            rgba(247, 244, 239, .78) 34%,
            rgba(247, 244, 239, .42) 62%,
            rgba(247, 244, 239, .22) 100%);
    }
    .st-consigli__lista, .st-esigenze { grid-template-columns: minmax(0, 1fr); }
    .st-collinevidenza__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .st-editoriale { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
    .st-ispcard__media img { transition: none; }
    .st-ispcard:hover .st-ispcard__media img { transform: none; }
}

/* Le pagine senza template proprio: il corpo e' una colonna sola, larga
   quanto si legge bene. Il contenuto arriva dall'editor e non ha classi
   nostre, quindi la misura si impone qui. */
.st-pagina--semplice .st-pagina__corpo {
    max-width: 68ch;
    padding-block: clamp(32px, 4vw, 56px);
}
.st-pagina--semplice .st-pagina__corpo > * + * { margin-top: 1.1em; }
.st-pagina--semplice .st-pagina__corpo h2 {
    font-family: var(--st-font-display, Georgia, serif);
    font-size: var(--st-fs-h3);
    font-weight: 500;
    line-height: 1.18;
    margin-top: 1.9em;
    color: var(--st-p-inchiostro, #15181B);
}
.st-pagina--semplice .st-pagina__corpo h3 {
    font-family: var(--st-font-display, Georgia, serif);
    font-size: 1.12rem;
    font-weight: 500;
    margin-top: 1.5em;
    color: var(--st-p-inchiostro, #15181B);
}

/* =======================================================================
 * PREFERITI VUOTI: MENO ARIA, NON PIU'
 *
 * La fascia usa i 96px di ritmo standard sopra e sotto. Vanno bene quando
 * separano due blocchi di contenuto; qui sopra e sotto c'e' gia' il vuoto, e
 * sommandosi diventava una pagina fatta quasi solo di spazio.
 *
 * La riduzione vale solo quando la lista e' vuota: con i preferiti dentro, il
 * ritmo torna quello di tutte le altre fasce.
 * ===================================================================== */
.st-preferiti .st-section:has(.st-wishlist__empty:not([hidden])) {
    padding-block: clamp(36px, 4.5vw, 60px);
}

/* «Dove operiamo» dentro la colonna dei recapiti: non e' piu' un pannello con
   la sua cornice, e' la coda di un elenco. Un filetto lo stacca dai recapiti
   senza costruirgli una scatola attorno. */
.st-contatti__dove {
    margin-top: clamp(24px, 3vw, 34px);
    padding-top: clamp(24px, 3vw, 34px);
    border-top: 1px solid var(--st-border, #E4DDD2);
}
.st-contatti__dove .st-section__title {
    margin: 0 0 10px;
    font-size: var(--st-fs-h3);
}
.st-contatti__dove p { margin: 0 0 12px; font-size: .95rem; color: var(--st-muted); }
.st-contatti__dove .st-elenco-segni { margin: 0 0 12px; }

/* LA CASELLA DI CONSENSO
 *
 * Va scritta con `.st-modulo` davanti, altrimenti non vince: nel foglio c'e'
 * `.st-modulo label { display: block }` e `.st-modulo input { width: 100%;
 * min-height: 48px; padding: 11px 14px }`, che sono due classi-piu-elemento
 * mentre `.st-modulo__consenso` da solo e' una classe sola. Senza il prefisso
 * l'etichetta restava un blocco — testo sotto la casella invece che accanto —
 * e la casella prendeva le misure di un campo di testo.
 *
 * E vanno azzerate **tutte** le proprieta' che quelle regole toccano, non solo
 * quelle che danno fastidio a occhio: cambiarne una e fidarsi delle altre
 * significa ereditare decisioni prese per un elemento diverso. */
.st-modulo .st-modulo__consenso {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: var(--st-space-4, 20px);
    line-height: 1.5;
}
.st-modulo .st-modulo__consenso input[type="checkbox"] {
    display: inline-block;
    width: 18px;
    height: 18px;
    min-height: 0;
    padding: 0;
    box-sizing: border-box;
    flex: 0 0 auto;
    appearance: none;
    -webkit-appearance: none;
    margin: 2px 0 0;
    border: 1.5px solid var(--st-border-strong, #CBBFAE);
    border-radius: 4px;
    background: #fff;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}
.st-modulo .st-modulo__consenso input[type="checkbox"]:hover { border-color: var(--st-copper, #B65532); }
.st-modulo .st-modulo__consenso input[type="checkbox"]:checked {
    background: var(--st-copper, #B65532);
    border-color: var(--st-copper, #B65532);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-6'/%3E%3C/svg%3E");
    background-size: 12px; background-position: center; background-repeat: no-repeat;
}
.st-modulo .st-modulo__consenso input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--st-copper, #B65532);
    outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
    .st-modulo .st-modulo__consenso input[type="checkbox"] { transition: none; }
}

/* =======================================================================
 * LE FAQ SU DUE COLONNE
 *
 * La colonna di lettura da 940px va bene per la prosa della guida, ma qui il
 * contenuto sono domande chiuse e sette filtri: i filtri andavano a capo con
 * «Assistenza» da sola su una seconda riga, e a destra restavano quattrocento
 * pixel vuoti per tutta l'altezza della pagina.
 *
 * In colonna i filtri si leggono come un indice — che e' quello che sono — e
 * restano in vista mentre si scorre. Le domande si tengono la loro misura di
 * lettura: la colonna e' piu' larga, il testo dentro no.
 *
 * Solo CSS: i pulsanti restano gli stessi e il filtro in JavaScript non sa
 * nemmeno che si sono spostati.
 * ===================================================================== */

@media (min-width: 1000px) {
    .st-faq .st-section > .st-container {
        display: grid;
        grid-template-columns: minmax(0, 14rem) minmax(0, 1fr);
        gap: clamp(28px, 3.5vw, 56px);
        align-items: start;
        max-width: 1180px;
    }
    /* La testata segue il corpo: restando a 940 partiva centoventi pixel piu'
       a destra delle domande, e il titolo non era sulla stessa colonna di
       niente. */
    .st-faq .st-pagina__testa > .st-container { max-width: 1180px; }
    /* La fascia finale «La tua domanda non e' qui» resta a una colonna. */
    .st-faq .st-section--ivory > .st-container { display: block; }

    .st-faq .st-domande__filtri {
        display: flex;
        flex-direction: column;
        gap: 2px;
        position: sticky;
        top: calc(var(--st-header-h, 76px) + 24px);
    }
    .st-faq .st-domande__tab {
        width: 100%;
        justify-content: flex-start;
        text-align: left;
    }
    .st-faq .st-domande { margin-top: 0; }
    /* La misura di lettura vale per la risposta, non per la colonna. */
    .st-faq .st-domande p { max-width: 68ch; }
}

/* =======================================================================
 * I QUATTRO PILASTRI DI «CHI SIAMO»
 *
 * Stanno dentro `.st-pagina__intro`, che sulle testate fotografiche e' capato
 * a 42ch — regola mia, per tenere il testo dentro il pannello chiaro dove il
 * contrasto e' garantito. Ma li' dentro ci sono anche questi quattro, e su
 * quattro colonne restavano 93 pixel l'una: «Prezzo chiaro» andava a capo in
 * mezzo e «calcolato prima di ordinare» occupava tre righe.
 *
 * Due per due invece di quattro in fila: duecento pixel a testa, che bastano.
 * Allargarli oltre il pannello non si puo' — dal 54% della larghezza il velo
 * si spegne e l'inchiostro non tiene piu' sulla fotografia.
 * ===================================================================== */
.st-pagina__testa--foto .st-pilastri {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 20px;
}
@media (max-width: 560px) {
    .st-pagina__testa--foto .st-pilastri { grid-template-columns: minmax(0, 1fr); }
}

/*
 * L'INSTALLAZIONE A DOMICILIO, NEL RIEPILOGO DELLA CASSA
 *
 * Sta fra le righe del totale perche' e' una decisione di spesa, e le
 * decisioni di spesa si prendono guardando la cifra.
 */
.st-installazione__scelta {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 10px;
  align-items: start;
  cursor: pointer;
  padding: 4px 0;
}

.st-installazione__scelta input[type="checkbox"] {
  width: 18px;
  height: 18px;
  min-height: 0;
  margin: 3px 0 0;
  accent-color: var(--st-terracotta, #B65532);
  cursor: pointer;
}

.st-installazione__scelta strong { font-weight: 600; margin-right: 6px; }

.st-installazione__scelta em {
  display: block;
  margin-top: 3px;
  font-style: normal;
  font-size: 13px;
  color: var(--st-neutro, #6E6862);
  line-height: 1.45;
}

.st-installazione--nota td { background: var(--st-crema, #FAF6F1); }
.st-installazione--nota code { font-size: 12px; }