/*
 * Stile del negozio Bookness.
 *
 * Colori, tipografia e logo sono quelli di bookness.it: il negozio deve
 * sembrare parte dello stesso sito, non un'applicazione a parte.
 *
 * Palette presa dal tema del sito (Elementor) e dal logo:
 *   #213343  blu notte, titoli e sfondi scuri   (colore primario del tema)
 *   #F59331  arancione dei pulsanti e degli accenti   (colore accento)
 *   #4D626F  blu-grigio dei testi secondari
 *   #C4CED6  grigio chiaro dei bordi
 *   #555555  grigio del testo corrente
 *   #FAFAFA  grigio chiarissimo degli sfondi
 *   #F7E49C  giallo tenue, usato negli avvisi
 *
 * Tipografia: il sito usa Roboto (testo) e Georama (titoli), entrambi
 * Google Fonts. Qui NON si caricano font esterni: nessuna chiamata fuori dal
 * nostro dominio. Roboto è nominato nella pila dei caratteri perché su Android
 * e su molte macchine è già installato, e in quel caso il negozio usa lo
 * stesso carattere del sito senza scaricare nulla; altrimenti si scende sul
 * carattere di sistema. Ai titoli si dà peso 700 e spaziatura stretta, che è
 * l'aspetto che Georama ha sul sito.
 *
 * Scritto a mano, mobile-first, nessun framework e nessun build.
 */

:root {
    --font-testo: "Roboto", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;

    --inchiostro: #213343;
    --inchiostro-tenue: #4D626F;
    --testo: #555555;
    --carta: #FAFAFA;
    --carta-alta: #FFFFFF;
    --bordo: #C4CED6;
    --bordo-tenue: #E3E9ED;
    --accento: #F59331;
    --accento-scuro: #DB7C1B;

    /*
     * L'arancione di Bookness è nato per le superfici, non per le parole: su
     * fondo bianco arriva a 3,04 di contrasto, sotto il 4,5 che serve perché
     * un testo si legga anche con poca vista o in pieno sole.
     * Questo è lo stesso arancione portato a 5,35, e si usa SOLO quando
     * l'arancione deve essere testo.
     */
    --accento-testo: #A3570B;
    --allarme: #9A2F2F;
    --attenzione: #F7E49C;
    --raggio: 8px;
    --ombra: 0 1px 2px rgba(33, 51, 67, .06), 0 4px 14px rgba(33, 51, 67, .06);
    --colonna: 68rem;
}

*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--carta);
    color: var(--testo);
    font-family: var(--font-testo);
    font-size: 1rem;
    line-height: 1.6;
    -webkit-text-size-adjust: 100%;

    /* Su una pagina corta — il carrello vuoto, un errore — il piè di pagina
       galleggiava a metà schermo con il vuoto sotto. Ora resta in fondo. */
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

main {
    flex: 1;
}

/* Titoli come sul sito: blu notte, pesanti, spaziatura stretta. */
h1, h2, h3 {
    color: var(--inchiostro);
    line-height: 1.15;
    margin: 0 0 .5em;
    font-weight: 700;
    letter-spacing: -.02em;
}

/*
 * Tre livelli che si distinguono a colpo d'occhio. Prima il titolo della
 * pagina e quello di sezione erano quasi uguali (1,7 contro 1,3 rem) e la
 * pagina sembrava un elenco di blocchi tutti uguali.
 *
 * clamp() li fa crescere con la finestra senza superare una misura sensata:
 * su un monitor largo un titolo fermo a 1,7rem sembra perso.
 */
h1 { font-size: clamp(1.75rem, 1.35rem + 1.6vw, 2.4rem); }
h2 { font-size: clamp(1.25rem, 1.1rem + .55vw, 1.5rem); }
h3 { font-size: 1.05rem; }
p { margin: 0 0 1em; }
img { max-width: 100%; height: auto; display: block; }

a { color: var(--inchiostro); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--accento-testo); }

.contenitore {
    width: 100%;
    max-width: var(--colonna);
    margin-inline: auto;
    padding-inline: 1rem;
}

/* Intestazione ------------------------------------------------------ */

.testata {
    background: var(--carta-alta);
    border-bottom: 1px solid var(--bordo);
    position: sticky;
    top: 0;
    z-index: 10;
}

/* Resta appiccicata in alto solo se le rimane spazio: su uno schermo basso,
   in orizzontale, una testata fissa si mangia la pagina. */
@media (max-height: 34rem) {
    .testata { position: static; }
}

.testata__riga {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* Senza wrap la ricerca non va mai a capo sugli schermi stretti, e a
       farne le spese è il logo: resta l'unico elemento comprimibile. */
    flex-wrap: wrap;
    gap: .75rem 1rem;
    padding-block: .85rem;
}

.marchio {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    /* Il logo non si comprime: prima va a capo tutto il resto. */
    flex: 0 0 auto;
    max-width: 60vw;
}

/*
 * L'altezza comanda, la larghezza segue: i loghi hanno proporzioni diverse
 * fra loro (quello Bookness è largo più del doppio dell'altezza, quelli delle
 * vetrine no) e nessuno dei due va forzato nel rapporto dell'altro.
 *
 * object-fit e flex-shrink servono da rete: se un giorno il contenitore
 * stringesse comunque, l'immagine si rimpicciolisce invece di schiacciarsi.
 */
.marchio img {
    height: 2.75rem;
    width: auto;
    max-width: 100%;
    flex-shrink: 0;
    object-fit: contain;
}

.menu {
    display: flex;
    flex-wrap: wrap;
    /* Con le categorie di oggi le voci stavano su due righe per una trentina
       di pixel, e l'ultima restava orfana. Un filo più stretto e ci stanno
       tutte; se un domani i nomi si allungano, tornano a capo — che è il
       comportamento giusto, non un guasto. */
    gap: .1rem .9rem;
    margin: 0;
    padding: 0 0 .7rem;
    list-style: none;
    font-size: .9rem;
}

.menu { font-weight: 500; }

.menu a {
    color: var(--inchiostro);
    text-decoration: none;
    display: inline-block;
    /* Area toccabile decente sul telefono, senza allargare la riga. */
    padding-block: .35rem;
}

.menu a:hover { color: var(--accento-testo); text-decoration: underline; }

/*
 * Sul telefono le categorie occupavano tre righe: metà schermo consumato
 * prima ancora di vedere il negozio. Diventano una riga sola che scorre di
 * lato, con la sfumatura a destra che dice che continua.
 */
@media (max-width: 47.99rem) {
    .menu {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        gap: 1.1rem;
        padding-bottom: .5rem;
        /* Sfuma l'ultima voce invece di tagliarla di netto. */
        mask-image: linear-gradient(to right, #000 calc(100% - 2rem), transparent);
    }

    .menu::-webkit-scrollbar { display: none; }
    .menu li { flex: 0 0 auto; }
}

.carrello-link {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    white-space: nowrap;
    text-decoration: none;
    color: var(--inchiostro);
    font-weight: 550;
}

.pallino {
    display: inline-grid;
    place-items: center;
    min-width: 1.5rem;
    height: 1.5rem;
    padding-inline: .35rem;
    border-radius: 999px;
    background: var(--accento);
    color: #fff;
    font-size: .8rem;
    font-weight: 700;
}

/* Contenuto --------------------------------------------------------- */

main { padding-block: 1.75rem 3rem; }
.sezione + .sezione { margin-top: 2.5rem; }
.sezione__testa { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }

.sezione__testa h2 { position: relative; padding-bottom: .45rem; }

.sezione__testa h2::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 2.5rem;
    height: 3px;
    background: var(--accento);
}

.briciole { font-size: .875rem; color: var(--inchiostro-tenue); margin-bottom: 1rem; }
.briciole a { color: inherit; }

/* Griglia dei prodotti ---------------------------------------------- */

.griglia {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
}

.scheda {
    background: var(--carta-alta);
    border: 1px solid var(--bordo);
    border-radius: var(--raggio);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: var(--ombra);
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

/* Una scheda che si solleva al passaggio del mouse dice «sono cliccabile»
   senza bisogno di scriverlo. Chi ha chiesto di ridurre le animazioni non la
   vede muoversi, ma vede comunque cambiare bordo e ombra. */
.scheda:hover {
    transform: translateY(-2px);
    border-color: var(--accento);
    box-shadow: 0 2px 6px rgba(33, 51, 67, .07), 0 10px 24px rgba(33, 51, 67, .09);
}

@media (prefers-reduced-motion: reduce) {
    .scheda { transition: border-color .15s ease, box-shadow .15s ease; }
    .scheda:hover { transform: none; }
}

.scheda__figura {
    aspect-ratio: 3 / 4;
    background: linear-gradient(160deg, #F2F5F7 0%, #E6EBEF 100%);
    display: grid;
    place-items: center;
    color: #9AAAB6;
    font-size: .8rem;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.scheda__figura { text-decoration: none; }
.scheda__figura img { width: 100%; height: 100%; object-fit: cover; }
/* align-items: flex-start, altrimenti l'etichetta si allarga a tutta la scheda. */
.scheda__corpo { padding: .85rem 1rem 1rem; display: flex; flex-direction: column; align-items: flex-start; gap: .35rem; flex: 1; }
.scheda__titolo {
    font-size: 1rem;
    margin: 0;
    /* Due righe al massimo: senza, un titolo lungo alza tutta la fila e la
       griglia perde il ritmo. */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}
.scheda__titolo a { color: inherit; text-decoration: none; }
.scheda__titolo a:hover { text-decoration: underline; }
.scheda__autore {
    margin: 0;
    width: 100%;
    font-size: .875rem;
    color: var(--inchiostro-tenue);
    /* Una riga sola: l'autore non deve spostare il prezzo e sfasare la fila. */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    overflow: hidden;
}
.scheda__prezzo {
    margin-top: auto;
    margin-bottom: 0;
    font-weight: 700;
    font-size: 1.0625rem;
    color: var(--inchiostro);
    padding-top: .15rem;
}
.scheda__titolo { width: 100%; }

/* Etichette --------------------------------------------------------- */

.etichetta {
    display: inline-block;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: .15rem .55rem;
    border-radius: 999px;
    background: var(--carta);
    color: var(--inchiostro-tenue);
    border: 1px solid var(--bordo);
}

.etichetta--fisico { background: #EAF0F4; color: #213343; border-color: #C4CED6; }
.etichetta--digitale { background: #EDF1F3; color: #4D626F; border-color: #C4CED6; }
.etichetta--servizio { background: #FDF0E1; color: #A45D10; border-color: #F3D7B4; }

.iva { font-size: .8rem; color: var(--inchiostro-tenue); font-weight: 400; }

/* Scheda prodotto --------------------------------------------------- */

.prodotto { display: grid; gap: 1.5rem; }
.prodotto__figura { background: #EDF1F3; border-radius: var(--raggio); overflow: hidden; aspect-ratio: 3 / 4; display: grid; place-items: center; color: var(--inchiostro-tenue); }
.prodotto__figura img { width: 100%; height: 100%; object-fit: cover; }
.prodotto__autore { font-size: 1.05rem; color: var(--inchiostro-tenue); margin-block: .35rem 0; }
.prodotto__prezzo { font-size: 1.6rem; font-weight: 700; color: var(--inchiostro); margin-block: .25rem .75rem; letter-spacing: -.02em; }
/* Descrizione scritta con l'editor: qui si decide come si vede in pagina,
   qualunque cosa l'operatore combini con i pulsanti della barra. */
/* Testo scritto con l'editor del pannello: la descrizione del prodotto e le
   recensioni si impaginano allo stesso modo, perché sono la stessa cosa. */
.prodotto__testo { margin-block: .75rem 1.25rem; }
.prodotto__testo > :first-child, .recensione__testo > :first-child { margin-top: 0; }
.prodotto__testo > :last-child, .recensione__testo > :last-child { margin-bottom: 0; }
.prodotto__testo p, .recensione__testo p { margin-block: .75rem; }
.prodotto__testo h3, .recensione__testo h3 { font-size: 1.15rem; margin-block: 1.25rem .5rem; }
.prodotto__testo ul, .prodotto__testo ol,
.recensione__testo ul, .recensione__testo ol { margin-block: .75rem; padding-left: 1.35rem; }
.prodotto__testo li, .recensione__testo li { margin-block: .3rem; }
.prodotto__testo blockquote, .recensione__testo blockquote {
    margin: 1rem 0;
    padding: .25rem 0 .25rem 1rem;
    border-left: 3px solid var(--bordo);
    color: var(--inchiostro-tenue);
}
.prodotto__testo a, .recensione__testo a { color: var(--accento-testo); }

/* «Compra ora» è la strada principale; il carrello resta a fianco, in tono
   minore, per chi ne prende più d'uno. */
.prodotto__azioni { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .5rem; }
.prodotto__spedizione { display: flex; align-items: flex-start; gap: .4rem; margin: .75rem 0 0; font-size: .925rem; color: var(--inchiostro-tenue); }
.prodotto__spedizione .icona { flex: none; margin-top: .15rem; }

.prodotto__dati { border-top: 1px solid var(--bordo); margin-top: 1.5rem; padding-top: 1rem; }
.prodotto__dati dl { display: grid; grid-template-columns: auto 1fr; gap: .35rem 1rem; margin: 0; font-size: .925rem; }
.prodotto__dati dt { color: var(--inchiostro-tenue); }
.prodotto__dati dd { margin: 0; }

/* Giudizio in cima alla scheda: la media, e quante voci la compongono. */
.prodotto__giudizio { display: flex; align-items: center; gap: .5rem; margin-block: -.35rem 1rem; font-size: .95rem; }
.prodotto__media { font-weight: 700; color: var(--inchiostro); }

.stelle__segni { color: var(--accento-testo); letter-spacing: .1em; }

/* Recensioni --------------------------------------------------------- */

.recensioni { margin-top: 3rem; border-top: 1px solid var(--bordo); padding-top: 1.5rem; }
.recensioni__elenco { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }

.recensione {
    border: 1px solid var(--bordo-tenue);
    border-radius: var(--raggio);
    background: var(--carta-alta);
    padding: 1.15rem 1.25rem;
    /* Le colonne restano allineate anche se una recensione è lunga e
       l'altra è una riga sola. */
    display: flex;
    flex-direction: column;
    gap: .1rem;
}
.recensione__voto { margin: 0 0 .35rem; }
.recensione__titolo { font-size: 1.1rem; color: var(--inchiostro); margin-block: 0 .35rem; }
.recensione__testo { color: var(--testo); }

.recensione__immagine, .recensione__video {
    width: 100%;
    margin-top: .9rem;
    border-radius: 6px;
    /* Un filmato verticale ripreso col telefono, lasciato libero, occuperebbe
       tre schermate: qui si ferma prima e resta guardabile. */
    max-height: 26rem;
    object-fit: cover;
}
.recensione__video { background: #000; max-height: none; aspect-ratio: 16 / 9; }

.recensione__firma {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .25rem .6rem;
    margin-top: auto;
    padding-top: .9rem;
    font-size: .875rem;
    color: var(--inchiostro-tenue);
}
.recensione__autore { font-weight: 600; color: var(--inchiostro); }

/* Moduli ------------------------------------------------------------ */

.campo { margin-bottom: 1rem; }
.campo label { display: block; font-size: .9rem; font-weight: 550; margin-bottom: .3rem; }
.campo__aiuto { font-size: .82rem; color: var(--inchiostro-tenue); margin-top: .25rem; }
.campo__errore { font-size: .85rem; color: var(--allarme); margin-top: .25rem; }

input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="password"], input[type="url"], input[type="file"], select, textarea {
    width: 100%;
    padding: .6rem .7rem;
    border: 1px solid var(--bordo);
    border-radius: 8px;
    background: var(--carta-alta);
    color: inherit;
    font: inherit;
}

input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible, a:focus-visible {
    outline: 2px solid var(--accento);
    outline-offset: 2px;
}

input[aria-invalid="true"] { border-color: var(--allarme); }
textarea { min-height: 6rem; resize: vertical; }
/*
 * I riquadri del checkout erano fieldset con l'etichetta incastonata nel
 * bordo: si legge peggio e stona con le schede del resto del negozio. Il
 * fieldset resta — serve a chi naviga con la tastiera o con uno screen
 * reader — ma si veste da scheda, con il titolo sopra.
 */
fieldset {
    border: 1px solid var(--bordo);
    border-radius: var(--raggio);
    padding: 1.25rem;
    margin: 0 0 1.25rem;
    background: var(--carta-alta);
    box-shadow: var(--ombra);
}

legend {
    font-weight: 650;
    color: var(--inchiostro);
    font-size: 1.05rem;
    padding: 0;
    margin-bottom: .35rem;
    /* float + width fanno stare la legend sopra il riquadro come un titolo
       normale, senza toglierla dal fieldset. */
    float: left;
    width: 100%;
}

legend + * { clear: both; }

.scelta { display: flex; gap: .5rem; align-items: flex-start; margin-bottom: .5rem; }
.scelta input { margin-top: .35rem; }
.scelta label { font-weight: 400; margin: 0; }

.pulsante {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    padding: .75rem 1.4rem;
    border: 1px solid transparent;
    border-radius: 6px;
    background: var(--accento);
    /*
     * Bianco su questo arancione dà 2,31 di contrasto: sotto la soglia, e si
     * vede male sul telefono all'aperto. Il blu notte del marchio dà 5,62 e
     * non porta in casa nessun colore nuovo. Il pulsante che porta i soldi è
     * l'ultimo posto dove permettersi un testo poco leggibile.
     */
    color: var(--inchiostro);
    font: inherit;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    font-size: .9rem;
    text-decoration: none;
    cursor: pointer;
}

.pulsante:hover { background: var(--accento-scuro); color: var(--inchiostro); }
.pulsante--largo { width: 100%; }
.pulsante--tenue { background: transparent; color: var(--inchiostro); border-color: var(--bordo); }
.pulsante--tenue:hover { background: var(--carta); color: var(--inchiostro); border-color: var(--inchiostro-tenue); }
/* I comandi di servizio non urlano: il maiuscolo resta ai richiami principali. */
.pulsante--minuto {
    padding: .4rem .7rem;
    font-size: .85rem;
    font-weight: 600;
    text-transform: none;
    letter-spacing: normal;
}

/* Avvisi ------------------------------------------------------------ */

.avviso {
    border: 1px solid var(--bordo);
    border-left: 4px solid var(--accento);
    background: var(--carta-alta);
    border-radius: var(--raggio);
    padding: .85rem 1rem;
    margin-bottom: 1.25rem;
}

.avviso--attenzione { border-left-color: var(--accento); background: #FFFBF0; }
.avviso--errore { border-left-color: var(--allarme); }
.avviso ul { margin: .5rem 0 0; padding-left: 1.1rem; }

/* Carrello ---------------------------------------------------------- */

.righe { list-style: none; margin: 0 0 1.5rem; padding: 0; }

.riga {
    display: grid;
    grid-template-columns: 4.5rem 1fr;
    gap: .75rem 1rem;
    padding: 1rem 0;
    border-bottom: 1px solid var(--bordo);
}

.riga__figura { border-radius: 6px; overflow: hidden; background: #EDF1F3; aspect-ratio: 3 / 4; }
.riga__figura img { width: 100%; height: 100%; object-fit: cover; }
.riga__nome { font-weight: 600; }
.riga__nome a { color: inherit; text-decoration: none; }
.riga__meta { font-size: .875rem; color: var(--inchiostro-tenue); }
.riga__azioni { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin-top: .5rem; }
.riga__azioni form { display: flex; align-items: center; gap: .4rem; margin: 0; }
.riga__azioni input[type="number"] { width: 4.5rem; }
.riga__totale { font-weight: 700; white-space: nowrap; }

/* Quantità: − campo + , un gruppo solo che si legge come un pezzo unico. */
.quantita { display: inline-flex; align-items: stretch; border: 1px solid var(--bordo); border-radius: 8px; overflow: hidden; background: var(--carta-alta); }
.quantita input[type="number"] {
    width: 3.25rem;
    border: 0;
    border-radius: 0;
    text-align: center;
    background: transparent;
    /* Le frecce del browser qui sono di troppo: i pulsanti sono già due. */
    -moz-appearance: textfield;
    appearance: textfield;
}
.quantita input[type="number"]::-webkit-outer-spin-button,
.quantita input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.quantita__passo {
    border: 0;
    background: transparent;
    color: var(--inchiostro);
    font-size: 1.15rem;
    line-height: 1;
    /* Comodo da centrare col pollice: 2.5rem è la misura minima sensata. */
    min-width: 2.5rem;
    cursor: pointer;
}
.quantita__passo:hover { background: var(--carta); }
.quantita__passo:focus-visible { outline: 2px solid var(--accento); outline-offset: -2px; }

/* Senza JavaScript il pulsante «Aggiorna» resta ed è l'unico modo di salvare. */
.carrello-vivo .quantita__conferma { display: none; }

/* Riepilogo: totali e pulsante d'ordine sono una cosa sola. */
.riepilogo { margin-bottom: 1.5rem; }
.riepilogo .totali { margin-bottom: 1rem; }
.riepilogo__nota { font-size: .85rem; color: var(--inchiostro-tenue); margin: .6rem 0 0; text-align: center; }
.carrello__ritorno { margin-top: 0; }

.totali { list-style: none; margin: 0 0 1.5rem; padding: 1rem; border: 1px solid var(--bordo); border-radius: var(--raggio); background: var(--carta-alta); }
.totali li { display: flex; justify-content: space-between; gap: 1rem; padding: .25rem 0; }
.totali li.totali__somma { border-top: 1px solid var(--bordo); margin-top: .5rem; padding-top: .6rem; font-size: 1.35rem; font-weight: 700; letter-spacing: -.02em; }
.totali__nota { font-size: .85rem; color: var(--inchiostro-tenue); }

/* Il messaggio era centrato e il pulsante sotto era a sinistra: sembrava un
   errore di impaginazione. Ora è un blocco solo. */
.vuoto {
    text-align: center;
    padding: 3rem 1rem 1rem;
    color: var(--inchiostro-tenue);
}

.vuoto + p {
    text-align: center;
    padding-bottom: 3rem;
}

/* Riepilogo dell'ordine --------------------------------------------- */

.numero-ordine { font-size: 1.35rem; font-weight: 700; letter-spacing: .01em; }
.riquadro { border: 1px solid var(--bordo); border-radius: var(--raggio); background: var(--carta-alta); padding: 1rem 1.15rem; margin-bottom: 1.25rem; }
.riquadro h2 { font-size: 1rem; margin-bottom: .5rem; }
.riquadro dl { display: grid; grid-template-columns: auto 1fr; gap: .3rem 1rem; margin: 0; font-size: .925rem; }
.riquadro dt { color: var(--inchiostro-tenue); }
.riquadro dd { margin: 0; }

/* Piè di pagina ------------------------------------------------------ */

.piede {
    padding-block: 2rem 2.5rem;
    font-size: .875rem;
    color: #C4CED6;
    background: var(--inchiostro);
}

.piede a { color: #fff; }

.salta-al-contenuto {
    position: absolute;
    left: -9999px;
}

.salta-al-contenuto:focus {
    left: 1rem;
    top: .5rem;
    z-index: 20;
    background: var(--carta-alta);
    padding: .5rem .75rem;
    border-radius: 6px;
    border: 1px solid var(--bordo);
}

/* Schermi larghi ----------------------------------------------------- */

@media (min-width: 48rem) {
    h2 { font-size: 1.45rem; }
    .prodotto { grid-template-columns: minmax(0, 22rem) 1fr; gap: 2.5rem; align-items: start; }
    .recensioni__elenco { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
    .riga { grid-template-columns: 4.5rem 1fr auto; align-items: start; }
    .colonne-checkout { display: grid; grid-template-columns: 1fr minmax(0, 20rem); gap: 2rem; align-items: start; }

    /* Il modulo è lungo: senza questo, dopo due schermate non si sa più
       quanto si sta per spendere.
       Il valore tiene conto della testata, che resta appiccicata in alto ed è
       alta circa 10rem quando il menu delle categorie occupa due righe. */
    .colonne-checkout > aside {
        position: sticky;
        top: 11rem;
    }

    /* Se la finestra è bassa, un riepilogo appiccicato toglierebbe spazio al
       modulo invece di aiutare. */
    @media (max-height: 44rem) {
        .colonne-checkout > aside { position: static; }
    }
    .due-campi { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
    .tre-campi { display: grid; grid-template-columns: 1fr 2fr 1fr; gap: 0 1rem; }
    .riepilogo { position: sticky; top: 5.5rem; }
}

/* Paginazione -------------------------------------------------------- */

.paginazione {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1.5rem;
    font-size: .9rem;
}

.paginazione__voce {
    padding: .45rem .8rem;
    border: 1px solid var(--bordo);
    border-radius: 8px;
    background: var(--carta-alta);
    text-decoration: none;
}

.paginazione__voce--spenta { color: var(--inchiostro-tenue); opacity: .6; }
.paginazione__conteggio { color: var(--inchiostro-tenue); }

/* Pagine di errore ---------------------------------------------------- */

.errore {
    max-width: 34rem;
    margin: 2rem auto 3rem;
    text-align: center;
}

.errore__codice {
    font-size: 3.5rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.03em;
    color: var(--bordo);
    margin: 0 0 .25rem;
}

.errore__messaggio {
    font-size: 1.05rem;
    margin-bottom: 1.5rem;
}

/* Codice sconto e offerta aggiuntiva ---------------------------------- */

.riquadro--sconto { padding: .9rem 1rem; }
.sconto__form label { display: block; font-size: .9rem; font-weight: 550; margin-bottom: .35rem; }
.sconto__riga { display: flex; gap: .5rem; }
.sconto__riga input { text-transform: uppercase; }
.sconto__attivo { margin: 0 0 .5rem; }
.totali__sconto { color: var(--accento-testo); }

.bump {
    border: 2px dashed var(--accento);
    border-radius: var(--raggio);
    background: #FFFBF0;
    padding: 1rem 1.15rem;
    margin-bottom: 1.25rem;
}

.bump__titolo { color: var(--inchiostro); font-size: 1.05rem; margin: 0 0 .35rem; }
.bump__prezzo { font-weight: 700; color: var(--inchiostro); }
.bump__listino { text-decoration: line-through; color: var(--inchiostro-tenue); font-weight: 400; }

/* Ricerca, vetrina e presentazione ------------------------------------ */

.ricerca { display: flex; gap: .4rem; align-items: center; flex: 1 1 12rem; max-width: 22rem; }
.ricerca input { padding: .45rem .6rem; font-size: .9rem; }

.presentazione { max-width: 34rem; margin: 3rem auto; text-align: center; }
.presentazione__testo { font-size: 1.05rem; margin-bottom: 1.75rem; }

.vetrina__logo { max-height: 3.5rem; width: auto; }

@media (max-width: 47.99rem) {
    /* La ricerca scende sotto: logo e carrello restano sulla prima riga. */
    .ricerca { order: 3; max-width: none; flex-basis: 100%; }
    /* Sul telefono restano le icone: le parole non ci stanno accanto al logo. */
    .account-link__parola, .carrello-link__parola { display: none; }
}

/* Telefoni stretti: il logo scala un po', ma sempre in proporzione. */
@media (max-width: 26rem) {
    .marchio img { height: 2.25rem; }
    .testata__riga { gap: .5rem .75rem; }
}

.scheda--vetrina .scheda__corpo { text-decoration: none; color: inherit; align-items: center; text-align: center; gap: .4rem; padding: 1.15rem 1rem; }
.scheda--vetrina .scheda__titolo { width: auto; }
.griglia--vetrine { grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); }

/* Campo trappola: fuori dallo schermo, ma non display:none — alcuni
   programmi saltano quello che è nascosto in modo troppo evidente. */
.trappola {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Riga «hai già un account?» in cima al checkout, per chi non è entrato. */
.checkout__accedi { font-size: .925rem; color: var(--inchiostro-tenue); margin: 1.25rem 0 0; padding-top: 1rem; border-top: 1px solid var(--bordo); }
.checkout__accedi a { color: var(--accento-testo); }

/* Pagine legali ------------------------------------------------------- */

.testo-lungo { max-width: 42rem; }
.testo-lungo h2 { margin-top: 2rem; font-size: 1.2rem; }
.testo-lungo ul, .testo-lungo ol { padding-left: 1.2rem; }
.testo-lungo li { margin-bottom: .35rem; }
.testo-lungo table { width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: .93rem; }
.testo-lungo th, .testo-lungo td { text-align: left; padding: .5rem .6rem; border-bottom: 1px solid var(--bordo); vertical-align: top; }
.testo-lungo code { background: var(--carta); padding: .1rem .3rem; border-radius: 4px; font-size: .9em; }

/* L'avvertenza in cima alle bozze: si deve vedere. */
.testo-lungo blockquote {
    margin: 0 0 1.5rem;
    padding: .9rem 1.1rem;
    border: 1px solid var(--bordo);
    border-left: 4px solid var(--accento);
    border-radius: var(--raggio);
    background: #FFFBF0;
}

.testo-lungo blockquote p:last-child { margin-bottom: 0; }
.piede__azienda { margin-top: .75rem; font-size: .85rem; line-height: 1.5; }
.piede__legali { margin-top: .75rem; }

/* Primo accesso al pannello: una colonna stretta, si fa una cosa sola. */
.accesso { max-width: 30rem; margin: 2.5rem auto; }
.accesso h1 { margin-bottom: .75rem; }
.accesso p { margin-bottom: 1rem; }
.accesso form { margin-top: 1.5rem; }
.accesso input[type="password"] { width: 100%; }


/* ---------------------------------------------------------------------------
   Icone
   ---------------------------------------------------------------------------
   Disegnate nel progetto, ereditano il colore del testo e si allineano alla
   riga come una lettera: accanto alle parole non sobbalzano. */

.icona {
    width: 1.15em;
    height: 1.15em;
    flex: 0 0 auto;
    vertical-align: -.2em;
}

/* ---------------------------------------------------------------------------
   Testata: ricerca e carrello
   --------------------------------------------------------------------------- */

/* La parola «Cerca» occupava spazio per dire una cosa che una lente dice
   meglio. Il campo e il pulsante ora sono un oggetto solo. */
.ricerca {
    display: flex;
    align-items: stretch;
    gap: 0;
    border: 1px solid var(--bordo);
    border-radius: 999px;
    background: var(--carta-alta);
    overflow: hidden;
    max-width: 22rem;
    flex: 1 1 14rem;
}

.ricerca input[type="search"] {
    border: 0;
    border-radius: 0;
    background: transparent;
    padding: .5rem .25rem .5rem .95rem;
    min-width: 0;
    flex: 1;
    font-size: .95rem;
}

.ricerca input[type="search"]:focus-visible { outline: none; }
.ricerca:focus-within { border-color: var(--accento); box-shadow: 0 0 0 3px rgba(245, 147, 49, .18); }

.ricerca__invio {
    border: 0;
    background: transparent;
    color: var(--inchiostro-tenue);
    /* 44px di lato: il minimo perché un dito lo prenda al primo colpo. */
    min-width: 2.75rem;
    display: grid;
    place-items: center;
    cursor: pointer;
}

.ricerca__invio:hover { color: var(--accento-testo); }
.ricerca__invio .icona { width: 1.25rem; height: 1.25rem; }

.carrello-link {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    min-height: 2.75rem;
    padding-inline: .25rem;
}

.carrello-link .icona { width: 1.35rem; height: 1.35rem; }
.carrello-link[aria-current="page"] { color: var(--accento-testo); }

/* La voce del menu che si sta guardando: si riconosce senza doverla leggere. */
.menu a[aria-current="page"] {
    color: var(--accento-testo);
    box-shadow: inset 0 -2px 0 var(--accento);
}

/* ---------------------------------------------------------------------------
   Metodi di pagamento — e le schede «per chi è l'ordine», che hanno la stessa
   forma: un riquadro per scelta, con il titolo e una riga che spiega.
   --------------------------------------------------------------------------- */

.scelta--tipo label { gap: 0; }

.scelta--metodo label,
.pagamento-unico {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
}

/* Quando di scelte non ce n'è (la pubblica amministrazione paga su fattura)
   non c'è un riquadro «come vuoi pagare»: c'è questa riga, che dice come
   andrà. */
.pagamento-unico p { margin: .15rem 0 0; }

.metodo__icona {
    width: 1.6rem;
    height: 1.6rem;
    color: var(--inchiostro-tenue);
    margin-top: .1rem;
}

/* La scelta selezionata si vede da lontano, non solo dal pallino. */
.scelta--metodo {
    border: 1px solid var(--bordo);
    border-radius: var(--raggio);
    padding: .7rem .85rem;
    margin-bottom: .6rem;
    background: var(--carta-alta);
    transition: border-color .15s ease, background-color .15s ease;
}

.scelta--metodo:hover { border-color: var(--inchiostro-tenue); }

.scelta--metodo:has(input:checked) {
    border-color: var(--accento);
    background: #FFF8F1;
}

.scelta--metodo:has(input:checked) .metodo__icona { color: var(--accento-testo); }
.scelta--metodo:has(input:focus-visible) { outline: 2px solid var(--accento); outline-offset: 2px; }

/* Non una promessa di sicurezza: il fatto, cioè che la carta non passa da
   noi. È quello che si vuole sapere prima di scrivere il numero. */
.rassicurazione {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    margin: 1rem 0 0;
    padding-top: .85rem;
    border-top: 1px solid var(--bordo-tenue);
    font-size: .875rem;
    color: var(--inchiostro-tenue);
}

.rassicurazione .icona { width: 1.05rem; height: 1.05rem; margin-top: .15rem; }

/* ---------------------------------------------------------------------------
   Metodi accettati nel piè di pagina
   --------------------------------------------------------------------------- */

.piede__pagamenti {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem 1.1rem;
    margin-top: 1.1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, .14);
    font-size: .875rem;
}

.piede__pagamenti-titolo {
    color: rgba(255, 255, 255, .62);
    text-transform: uppercase;
    letter-spacing: .06em;
    font-size: .75rem;
}

.metodo-accettato {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    color: rgba(255, 255, 255, .92);
}

/* ---------------------------------------------------------------------------
   Area Membri
   ---------------------------------------------------------------------------
   La stessa carta del negozio: chi entra nella sua area non deve avere
   l'impressione di aver cambiato sito. Mobile-first: il menu dell'area è una
   riga scorrevole sul telefono e una colonna a sinistra sugli schermi larghi.
   --------------------------------------------------------------------------- */

.account-link {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    min-height: 2.75rem;
    padding-inline: .25rem;
    white-space: nowrap;
    text-decoration: none;
    color: var(--inchiostro);
    font-weight: 550;
}
.account-link .icona { width: 1.35rem; height: 1.35rem; }
.account-link[aria-current="page"] { color: var(--accento-testo); }

/* Pagine di accesso e registrazione: un riquadro stretto, al centro. */
.accesso { max-width: 26rem; margin: 2rem auto; }
.accesso h1 { text-align: center; }
.accesso__intro { text-align: center; color: var(--inchiostro-tenue); margin-bottom: 1.5rem; }
.accesso__altro { text-align: center; font-size: .925rem; margin-top: 1.25rem; }
.accesso__altro a { color: var(--accento-testo); }
.accesso .pulsante { margin-top: .5rem; }

/*
 * Una colonna sola, larga quanto lo schermo: senza dirlo, la colonna
 * implicita si allarga fino al menu, che invece deve scorrere di lato,
 * e sul telefono tutta l'area trabocca a destra.
 */
.membri { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; margin-block: .5rem 2rem; }

/* Intestazione dell'area: chi sei, dove sei, e il commutatore fra le aree. */
.membri__testa {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--bordo);
}
.membri__saluto { margin: 0; font-size: .925rem; color: var(--inchiostro-tenue); }
.membri__saluto strong { color: var(--inchiostro); }
.membri__aree { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.membri__aree form { margin: 0; }

.commutatore {
    display: inline-flex;
    border: 1px solid var(--bordo);
    border-radius: 999px;
    overflow: hidden;
    background: var(--carta-alta);
}
.commutatore a {
    padding: .4rem .9rem;
    font-size: .875rem;
    font-weight: 550;
    text-decoration: none;
    color: var(--inchiostro-tenue);
}
.commutatore a[aria-current="page"] { background: var(--inchiostro); color: #fff; }

/* Il menu dell'area. */
.membri__nav { min-width: 0; }
.membri__nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: .35rem; overflow-x: auto; scrollbar-width: thin; padding-bottom: .25rem; }
.membri__nav a {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .55rem .85rem;
    border-radius: 8px;
    text-decoration: none;
    color: var(--inchiostro);
    font-weight: 550;
    font-size: .925rem;
    white-space: nowrap;
    border: 1px solid transparent;
}
.membri__nav a:hover { background: var(--carta-alta); border-color: var(--bordo-tenue); color: var(--inchiostro); }
.membri__nav a[aria-current="page"] { background: var(--inchiostro); color: #fff; }
.membri__nav .icona { width: 1.15rem; height: 1.15rem; flex: none; }

.membri__contenuto { min-width: 0; }
.membri__contenuto > h1:first-child { margin-top: 0; }
.membri__sotto { color: var(--inchiostro-tenue); margin-top: -.25rem; margin-bottom: 1.5rem; }

/* Tessere: numeri in evidenza. */
.tessere { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); gap: 1rem; margin-bottom: 1.75rem; }
.tessera {
    background: var(--carta-alta);
    border: 1px solid var(--bordo);
    border-radius: var(--raggio);
    padding: 1rem 1.15rem;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    gap: .15rem;
}
a.tessera:hover { border-color: var(--inchiostro-tenue); color: inherit; }
.tessera__numero { font-size: 1.75rem; font-weight: 700; color: var(--inchiostro); letter-spacing: -.02em; line-height: 1.1; }
.tessera__etichetta { font-size: .875rem; color: var(--inchiostro-tenue); }

/* Un elenco di prodotti nella libreria: copertina, testo, azioni. */
.libreria { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.acquisto {
    display: grid;
    grid-template-columns: 4.5rem 1fr;
    gap: 1rem;
    background: var(--carta-alta);
    border: 1px solid var(--bordo);
    border-radius: var(--raggio);
    padding: 1rem;
}
.acquisto__figura { border-radius: 6px; overflow: hidden; background: #EDF1F3; aspect-ratio: 3 / 4; display: grid; place-items: center; color: var(--inchiostro-tenue); }
.acquisto__figura img { width: 100%; height: 100%; object-fit: cover; }
.acquisto__corpo { min-width: 0; display: flex; flex-direction: column; gap: .3rem; align-items: flex-start; }
.acquisto__titolo { font-weight: 600; font-size: 1.05rem; color: var(--inchiostro); margin: 0; }
.acquisto__titolo a { color: inherit; text-decoration: none; }
.acquisto__titolo a:hover { text-decoration: underline; }
.acquisto__meta { font-size: .875rem; color: var(--inchiostro-tenue); margin: 0; }
.acquisto__nota { display: flex; gap: .4rem; align-items: flex-start; color: var(--inchiostro); }
.acquisto__nota .icona { flex: 0 0 auto; width: 1.1rem; height: 1.1rem; margin-top: .1rem; color: var(--inchiostro-tenue); }
.acquisto__azioni { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; }

/* Stato: un'etichetta colorata. */
.stato {
    display: inline-block;
    font-size: .78rem;
    font-weight: 600;
    padding: .15rem .55rem;
    border-radius: 999px;
    border: 1px solid var(--bordo);
    background: #EDF1F3;
    color: var(--inchiostro-tenue);
    white-space: nowrap;
}
.stato--ok { background: #E6F6EC; color: #1E6B3A; border-color: #BFE5CB; }
.stato--attesa { background: #FFF6E5; color: #A45D10; border-color: #F3D7B4; }
.stato--no { background: #FBE9E9; color: var(--allarme); border-color: #F0C3C3; }
.stato--info { background: #E7F2FA; color: #1D5A82; border-color: #BFD9EC; }

/* Tabelle dell'area: ordini, vendite, studenti. */
.tabella-scorri { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tabella { width: 100%; border-collapse: collapse; background: var(--carta-alta); border: 1px solid var(--bordo); border-radius: var(--raggio); font-size: .925rem; }
.tabella th, .tabella td { text-align: left; padding: .65rem .8rem; border-bottom: 1px solid var(--bordo-tenue); vertical-align: top; }
.tabella th { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--inchiostro-tenue); font-weight: 600; }
.tabella tr:last-child td { border-bottom: 0; }
.tabella td.numero, .tabella th.numero { text-align: right; white-space: nowrap; }
.tabella a { color: var(--accento-testo); }

/* Un elenco di definizioni a due colonne, dentro un riquadro. */
.riquadro--membri dl { grid-template-columns: minmax(8rem, auto) 1fr; }

/* Materiali didattici: righe con titolo, tipo e azioni. */
.materiali { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.materiale { background: var(--carta-alta); border: 1px solid var(--bordo); border-radius: var(--raggio); padding: .85rem 1rem; display: grid; gap: .35rem; }
.materiale__titolo { font-weight: 600; color: var(--inchiostro); margin: 0; }
.materiale__meta { font-size: .85rem; color: var(--inchiostro-tenue); margin: 0; }
.materiale__azioni { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.materiale__azioni form { margin: 0; }

/* Il profilo del docente: foto e testo. */
.docente-scheda { display: grid; grid-template-columns: 6rem 1fr; gap: 1.25rem; align-items: start; }
.docente-scheda__foto { width: 6rem; height: 6rem; border-radius: 50%; overflow: hidden; background: #EDF1F3; display: grid; place-items: center; color: var(--inchiostro-tenue); }
.docente-scheda__foto img { width: 100%; height: 100%; object-fit: cover; }
.chip { display: inline-block; font-size: .8rem; padding: .2rem .6rem; border-radius: 999px; background: #EDF1F3; color: var(--inchiostro); margin: 0 .3rem .3rem 0; }

/* Griglia di caselle per le skill. */
.caselle { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); gap: .5rem 1rem; margin-bottom: 1rem; }
.caselle .scelta { margin: 0; }

/* Barre semplici per le statistiche, senza librerie. */
.barre { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.barre li { display: grid; grid-template-columns: 5rem 1fr 2.5rem; align-items: center; gap: .6rem; font-size: .875rem; }
.barre__barra { height: .8rem; background: #EDF1F3; border-radius: 999px; overflow: hidden; }
.barre__barra span { display: block; height: 100%; background: var(--accento); border-radius: 999px; }
.barre__valore { text-align: right; color: var(--inchiostro-tenue); }

/* Un'azione in linea, dentro una tabella o una riga: sembra un link. */
.link-azione { background: none; border: 0; padding: 0; font: inherit; color: var(--accento-testo); text-decoration: underline; cursor: pointer; }
.link-azione--allarme { color: var(--allarme); }

.avviso--ok { border-left-color: #28C76F; background: #F1FBF4; }

@media (min-width: 60rem) {
    .membri { grid-template-columns: 15rem minmax(0, 1fr); align-items: start; }
    .membri__testa { grid-column: 1 / -1; }
    .membri__nav { position: sticky; top: 6rem; }
    .membri__nav ul { flex-direction: column; overflow: visible; gap: .15rem; padding: 0; }
    .membri__nav a { display: flex; white-space: normal; }
    .acquisto { grid-template-columns: 5.5rem 1fr; }
}

/* Corsi ---------------------------------------------------------------- */

.corsi { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.corso {
    display: grid;
    grid-template-columns: 6rem 1fr;
    gap: 1rem;
    background: var(--carta-alta);
    border: 1px solid var(--bordo);
    border-radius: var(--raggio);
    padding: 1rem;
}
.corso__figura { border-radius: 6px; overflow: hidden; background: #EDF1F3; aspect-ratio: 4 / 3; display: grid; place-items: center; color: var(--inchiostro-tenue); }
.corso__figura img { width: 100%; height: 100%; object-fit: cover; }
.corso__figura .icona { width: 2rem; height: 2rem; }
.corso__corpo { min-width: 0; display: flex; flex-direction: column; gap: .3rem; align-items: flex-start; }
.corso__corpo > p:last-child { margin: .35rem 0 0; }
.corso__categoria { font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--inchiostro-tenue); margin: 0; }
.corso__titolo { font-size: 1.15rem; margin: 0; }
.corso__titolo a { color: inherit; text-decoration: none; }
.corso__titolo a:hover { text-decoration: underline; }
.corso__testo { margin: 0; color: var(--testo); }
.corso__meta { font-size: .875rem; color: var(--inchiostro-tenue); margin: 0; display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; }

.prodotto__figura--corso { aspect-ratio: 4 / 3; }
.prodotto__figura--corso .icona { width: 3rem; height: 3rem; }

/* Etichetta del tipo: PDF, ebook, video. Colori distinti, si riconoscono a colpo d'occhio. */
.tipo {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .78rem;
    font-weight: 600;
    padding: .15rem .55rem;
    border-radius: 999px;
    border: 1px solid var(--bordo);
    white-space: nowrap;
}
.tipo .icona { width: 1em; height: 1em; }
.tipo--pdf { background: #FBE9E9; color: #8F2727; border-color: #F0C3C3; }
.tipo--ebook { background: #E7F2FA; color: #1D5A82; border-color: #BFD9EC; }
.tipo--video { background: #FFF6E5; color: #A45D10; border-color: #F3D7B4; }
.tipo--audio { background: #EAF6EE; color: #22643A; border-color: #BFE0CA; }

/* I contenuti di un corso, numerati. */
.lezioni { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.lezione { display: grid; grid-template-columns: 4rem 1fr; gap: .85rem; align-items: start; padding: .6rem; border: 1px solid var(--bordo-tenue); border-radius: 8px; }
.lezione:hover { border-color: var(--bordo); background: var(--carta); }
.lezione__figura { border-radius: 6px; overflow: hidden; background: #EDF1F3; aspect-ratio: 4 / 3; display: grid; place-items: center; color: var(--inchiostro-tenue); }
.lezione__figura img { width: 100%; height: 100%; object-fit: cover; }
.lezione__corpo { min-width: 0; }
.lezione__titolo { font-weight: 600; margin: 0 0 .2rem; }
.lezione__titolo a { color: var(--inchiostro); text-decoration: none; }
.lezione__titolo a:hover { text-decoration: underline; }
.lezione__meta { font-size: .85rem; color: var(--inchiostro-tenue); margin: 0; display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; }
.lezione__testo { font-size: .9rem; margin: .3rem 0 0; }

/* Il lettore: video o PDF dentro la pagina. */
.lettore { background: #000; border-radius: var(--raggio); overflow: hidden; aspect-ratio: 16 / 9; margin-bottom: 1rem; }
.lettore iframe, .lettore video { width: 100%; height: 100%; display: block; border: 0; }
.lettore--documento { background: var(--carta-alta); border: 1px solid var(--bordo); aspect-ratio: auto; height: min(75vh, 60rem); }
.lettore .avviso { margin: 1rem; }

/* L'audio: la copertina, se c'è, e il lettore sotto. */
.lettore-audio { display: grid; gap: .85rem; justify-items: center; padding: 1.25rem; margin-bottom: 1rem; background: var(--carta); border: 1px solid var(--bordo); border-radius: var(--raggio); }
.lettore-audio__copertina { width: min(16rem, 100%); aspect-ratio: 1; object-fit: cover; border-radius: 8px; }
.lettore-audio audio { width: 100%; }

/* Un'immagine fra i materiali: intera, dentro la pagina. */
.lettore-immagine { margin-bottom: 1rem; text-align: center; }
.lettore-immagine img { max-width: 100%; max-height: 80vh; border-radius: var(--raggio); border: 1px solid var(--bordo); -webkit-user-drag: none; user-select: none; }

/* I contenuti dei corsi non si stampano: dalla stampa si fa un PDF. */
@media print {
    [data-senza-download] { display: none !important; }
}

.lezione-nav { display: flex; justify-content: space-between; gap: 1rem; margin-top: 1.5rem; flex-wrap: wrap; }

@media (min-width: 48rem) {
    .corso { grid-template-columns: 10rem 1fr; }
}

/* Testo che si sente e non si vede: le etichette per chi usa un lettore di schermo. */
.visivamente-nascosto {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/*
 * Il lettore dei PDF (public/js/lettore-pdf.js).
 *
 * Una colonna: la barra dei comandi, la ricerca quando è aperta, lo stato
 * di caricamento, l'area delle pagine che prende tutto il resto. È alto
 * quanto serve a leggere senza scorrere la pagina intorno; a schermo intero
 * — vero o simulato con --immersivo — copre tutto lo schermo.
 */
.lettore-pdf {
    display: flex;
    flex-direction: column;
    height: min(82vh, 64rem);
    min-height: 24rem;
    margin-bottom: 1rem;
    border: 1px solid var(--bordo);
    border-radius: var(--raggio);
    background: #E9EDF0;
    overflow: hidden;
    outline: none;
}
.lettore-pdf--immersivo {
    position: fixed;
    inset: 0;
    z-index: 1000;
    height: 100vh;
    height: 100dvh;
    margin: 0;
    border: 0;
    border-radius: 0;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
}
.lettore-pdf:fullscreen { height: 100%; border: 0; border-radius: 0; }
/* Sotto al lettore immersivo la pagina non deve scorrere. */
.con-lettore-immersivo, .con-lettore-immersivo body { overflow: hidden; }

.lettore-pdf__barra {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .35rem .75rem;
    padding: .45rem .6rem;
    background: var(--carta-alta);
    border-bottom: 1px solid var(--bordo);
}
.lettore-pdf__gruppo { display: flex; align-items: center; gap: .2rem; }
.lettore-pdf__gruppo--zoom { order: 3; width: 100%; justify-content: center; }
.lettore-pdf__zoom {
    font: inherit;
    font-size: .875rem;
    color: var(--inchiostro);
    padding: .35rem .5rem;
    border: 1px solid var(--bordo);
    border-radius: 6px;
    background: var(--carta-alta);
    max-width: 11rem;
}

.lettore-pdf__tasto {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: var(--inchiostro);
    cursor: pointer;
    text-decoration: none;
    font: inherit;
    touch-action: manipulation;
}
.lettore-pdf__tasto .icona { width: 1.35rem; height: 1.35rem; }
.lettore-pdf__tasto:hover { background: var(--carta); border-color: var(--bordo-tenue); }
.lettore-pdf__tasto:focus-visible { outline: 2px solid var(--accento); outline-offset: 1px; }
.lettore-pdf__tasto[aria-pressed="true"], .lettore-pdf__tasto[aria-expanded="true"] { background: var(--inchiostro); color: #fff; }

.lettore-pdf__pagina { display: inline-flex; align-items: center; gap: .3rem; font-size: .925rem; color: var(--inchiostro-tenue); }
.lettore-pdf__campo-pagina {
    width: 3.4rem;
    padding: .35rem .3rem;
    text-align: center;
    font: inherit;
    font-weight: 600;
    color: var(--inchiostro);
    border: 1px solid var(--bordo);
    border-radius: 6px;
    background: var(--carta-alta);
    -moz-appearance: textfield;
}
.lettore-pdf__campo-pagina::-webkit-outer-spin-button,
.lettore-pdf__campo-pagina::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.lettore-pdf__totale { white-space: nowrap; }

.lettore-pdf__ricerca[hidden] { display: none; }
.lettore-pdf__ricerca {
    display: flex;
    align-items: center;
    gap: .35rem;
    padding: .4rem .6rem;
    margin: 0;
    background: var(--carta-alta);
    border-bottom: 1px solid var(--bordo);
}
.lettore-pdf__campo-cerca {
    flex: 1;
    min-width: 0;
    padding: .45rem .6rem;
    font: inherit;
    border: 1px solid var(--bordo);
    border-radius: 6px;
}
.lettore-pdf__esito { font-size: .85rem; color: var(--inchiostro-tenue); white-space: nowrap; }

.lettore-pdf__stato {
    padding: 2.5rem 1rem;
    text-align: center;
    color: var(--inchiostro-tenue);
}
.lettore-pdf__stato p { margin: 0 0 .75rem; }
.lettore-pdf__avanzamento {
    display: block;
    width: min(100%, 20rem);
    height: .5rem;
    margin: 0 auto .75rem;
    border: 0;
    border-radius: 999px;
    overflow: hidden;
    background: var(--bordo-tenue);
    accent-color: var(--accento);
}
.lettore-pdf__avanzamento::-webkit-progress-bar { background: var(--bordo-tenue); }
.lettore-pdf__avanzamento::-webkit-progress-value { background: var(--accento); }
.lettore-pdf__avanzamento::-moz-progress-bar { background: var(--accento); }
.lettore-pdf--pronto .lettore-pdf__stato { display: none; }
.lettore-pdf--errore .lettore-pdf__stato { color: var(--allarme); }
.lettore-pdf--errore .lettore-pdf__avanzamento { display: none; }
.lettore-pdf__senza-script { padding: 1.5rem 1rem; text-align: center; }

/* L'area che scorre. */
.lettore-pdf__pagine {
    position: relative;
    flex: 1;
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y;
    outline: none;
}
.lettore-pdf__pagine:focus-visible { box-shadow: inset 0 0 0 2px var(--accento); }
.lettore-pdf__fogli {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 12px;
    min-width: 100%;
    width: max-content;
    transform-origin: var(--pizzico-origine, 0 0);
}
/* Durante il pizzico i fogli si stirano tutti insieme: l'anteprima, poi si ridisegna. */
.lettore-pdf__pagine--pizzico .lettore-pdf__fogli { transform: scale(var(--pizzico-scala, 1)); will-change: transform; }

.lettore-pdf__foglio {
    --user-unit: 1;
    --total-scale-factor: calc(var(--scale-factor, 1) * var(--user-unit));
    --scale-round-x: 1px;
    --scale-round-y: 1px;
    position: relative;
    flex: none;
    background: #fff;
    box-shadow: 0 1px 3px rgba(33, 51, 67, .18), 0 6px 18px rgba(33, 51, 67, .10);
    direction: ltr;
}
.lettore-pdf__tela { display: block; }
.lettore-pdf__numero {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.5rem;
    color: var(--bordo);
    user-select: none;
    pointer-events: none;
}
.lettore-pdf__foglio--pronto .lettore-pdf__numero { display: none; }

/* Il livello di testo di PDF.js: invisibile, sopra la tela, si seleziona e si cerca. */
.lettore-pdf .textLayer {
    position: absolute;
    inset: 0;
    overflow: clip;
    line-height: 1;
    text-align: initial;
    letter-spacing: normal;
    word-spacing: normal;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
    forced-color-adjust: none;
    transform-origin: 0 0;
    z-index: 1;
    --min-font-size: 1;
    --text-scale-factor: calc(var(--total-scale-factor) * var(--min-font-size));
    --min-font-size-inv: calc(1 / var(--min-font-size));
}
.lettore-pdf .textLayer :is(span, br) {
    color: transparent;
    position: absolute;
    white-space: pre;
    cursor: text;
    transform-origin: 0% 0%;
    user-select: text;
}
.lettore-pdf .textLayer > :not(.markedContent),
.lettore-pdf .textLayer .markedContent span:not(.markedContent) {
    z-index: 1;
    --font-height: 0;
    font-size: calc(var(--text-scale-factor) * var(--font-height));
    --scale-x: 1;
    --rotate: 0deg;
    transform: rotate(var(--rotate)) scaleX(var(--scale-x)) scale(var(--min-font-size-inv));
}
.lettore-pdf .textLayer .markedContent { display: contents; }
.lettore-pdf .textLayer ::selection { background: rgba(245, 147, 49, .35); color: transparent; }
.lettore-pdf__trovato { background: rgba(247, 228, 156, .75); border-radius: 2px; }
.lettore-pdf__trovato--attuale { background: rgba(245, 147, 49, .6); }

@media (min-width: 40rem) {
    .lettore-pdf__gruppo--zoom { order: 0; width: auto; }
}
@media (prefers-reduced-motion: reduce) {
    .lettore-pdf__pagine { scroll-behavior: auto; }
}
.lettore-pdf__aiuto { font-size: .875rem; color: var(--inchiostro-tenue); }
.lettore-pdf__aiuto a { color: var(--inchiostro); font-weight: 600; text-decoration: none; }
.lettore-pdf__aiuto a:hover { text-decoration: underline; }
.lettore-pdf__aiuto .icona { width: 1rem; height: 1rem; vertical-align: -.15em; }

/* Le guide: le schede compatte dei corsi in dashboard e nella scheda del libro. */
.guide { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.guida {
    display: grid;
    grid-template-columns: 4.5rem 1fr;
    gap: .9rem;
    padding: .85rem;
    background: var(--carta-alta);
    border: 1px solid var(--bordo);
    border-radius: var(--raggio);
}
.guida__figura {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 3 / 4;
    border-radius: 6px;
    background: var(--carta);
    border: 1px solid var(--bordo-tenue);
    color: var(--inchiostro-tenue);
    overflow: hidden;
}
.guida__figura img { width: 100%; height: 100%; object-fit: cover; }
.guida__figura .icona { width: 1.75rem; height: 1.75rem; }
.guida__corpo { min-width: 0; }
.guida__titolo { font-size: 1rem; margin: 0 0 .2rem; }
.guida__titolo a { color: var(--inchiostro); text-decoration: none; }
.guida__titolo a:hover { text-decoration: underline; }
.guida__meta { font-size: .85rem; color: var(--inchiostro-tenue); margin: 0; display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; }
.guida__testo { font-size: .9rem; margin: .35rem 0 0; }
.guida__azioni { margin: .6rem 0 0; }
.riquadro--guide .guide { margin-top: .75rem; }
.riquadro--guide .guida { padding: .65rem; }
@media (min-width: 48rem) {
    .sezione--guide .guide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Assistenza di marchio ---------------------------------------------- */

/* Chi ha comprato NextAbility scrive a NextAbility: il riquadro prende il
   colore della vetrina e mette l'indirizzo in evidenza. */
.assistenza-marchio {
    --assistenza-accento: var(--accento);
    --assistenza-accento-scuro: var(--accento-scuro, var(--accento));
    border: 2px solid var(--assistenza-accento);
    border-left-width: 8px;
    border-radius: var(--raggio);
    background: var(--carta-alta);
    padding: 1rem 1.15rem;
    margin: 0 0 1.25rem;
}
.assistenza-marchio__titolo { margin: 0 0 .25rem; font-weight: 700; color: var(--assistenza-accento-scuro); }
.assistenza-marchio__testo { margin: 0; font-size: 1.15rem; line-height: 1.4; }
.assistenza-marchio__email { font-weight: 700; color: var(--assistenza-accento-scuro); overflow-wrap: anywhere; }
.assistenza-marchio__nota { margin: .5rem 0 0; font-size: .9rem; color: var(--inchiostro-tenue); }
.piede__assistenza { margin-top: .5rem; }

/*
 * Programma Lettori NextAbility: il riquadro nel carrello e al checkout, la
 * situazione nell'area clienti e la pagina che spiega il programma.
 * Il verde dice «qui risparmi», l'arancione resta per i pulsanti.
 */
.riquadro--lettori { border-color: #BFE3CC; background: #F4FBF6; }
.lettori__marchio { margin: 0 0 .25rem; font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #2E7D4F; }
.lettori__titolo { margin: 0 0 .35rem; color: var(--inchiostro); }
.lettori__testo { margin: 0 0 .35rem; font-size: .925rem; }
.lettori__salto { margin: .5rem 0; padding: .5rem .75rem; border-radius: var(--raggio); background: #FFFFFF; border: 1px dashed #2E7D4F; color: var(--inchiostro); font-size: .925rem; }
.lettori__link { margin: .35rem 0 0; font-size: .875rem; }
.prezzo-pieno { color: var(--inchiostro-tenue); font-weight: 400; margin-right: .25rem; }

.lettori-situazione__livello { margin: 0 0 .35rem; font-size: 1.15rem; color: var(--inchiostro); }
.lettori-situazione__punti { display: inline-block; margin-left: .5rem; padding: .05rem .55rem; border-radius: 999px; background: #2E7D4F; color: #FFFFFF; font-size: .8rem; font-weight: 700; vertical-align: middle; }
.lettori-barra { height: .6rem; margin: .5rem 0; border-radius: 999px; background: #DCEFE3; overflow: hidden; }
.lettori-barra span { display: block; height: 100%; border-radius: 999px; background: #2E7D4F; }

.lettori-pagina__sotto { font-size: 1.1rem; max-width: 42rem; }
.lettori-passi { margin: 0; padding-left: 1.25rem; display: grid; gap: .6rem; max-width: 42rem; }
.lettori-livelli { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.lettori-livello { border: 1px solid var(--bordo); border-radius: var(--raggio); background: var(--carta-alta); padding: 1rem; }
.lettori-livello--mio { border-color: #2E7D4F; box-shadow: 0 0 0 2px #BFE3CC; }
.lettori-livello h3 { margin: 0 0 .35rem; }
.lettori-livello__soglia { margin: 0; font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #2E7D4F; }
.lettori-livello__motto { margin: 0 0 .5rem; font-size: .9rem; color: var(--inchiostro-tenue); }
.lettori-livello__vantaggi { margin: 0; padding-left: 1.1rem; font-size: .925rem; }
.lettori-domande dt { margin-top: 1rem; font-weight: 700; color: var(--inchiostro); }
.lettori-domande dd { margin: .25rem 0 0; max-width: 46rem; }
.prodotto__lettori { margin: -.25rem 0 .75rem; font-size: .9rem; color: #2E7D4F; }
.lettori-omaggio p { margin: 0 0 .5rem; }
.omaggi legend { font-weight: 700; color: var(--inchiostro); padding: 0 .25rem; }
.omaggi__elenco { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.omaggio { display: flex; gap: .75rem; align-items: center; padding: .6rem .75rem; border: 1px solid var(--bordo); border-radius: var(--raggio); cursor: pointer; background: var(--carta-alta); }
.omaggio:has(input:checked) { border-color: #2E7D4F; box-shadow: 0 0 0 2px #BFE3CC; }
.omaggio__copertina { width: 3rem; height: auto; border-radius: 4px; }
.omaggio__testo { display: flex; flex-direction: column; }
.omaggio__meta { font-size: .875rem; color: var(--inchiostro-tenue); }