/* Manrope self-hosted (assets/fonts/manrope/, licenza OFL). */
@font-face {
    font-family: "Manrope";
    src: url("../fonts/manrope/Manrope-VariableFont_wght.woff2") format("woff2-variations");
    font-weight: 200 800;
    font-style: normal;
    font-display: swap;
}

/*
 * «Manrope riserva»: Arial con le misure di Manrope, per il tempo in cui Manrope non è ancora arrivato. Il testo occupa lo stesso
 * spazio prima e dopo e non si sposta (Google: Cumulative Layout Shift). Misure ricavate dai file dei caratteri (2026-10-18):
 * Manrope 400 è largo il 102,37% di Arial, Manrope 700 il 100,65% di Arial grassetto; sopra la riga 1,066, sotto 0,30, nessuno
 * spazio tra le righe (divisi per la larghezza, come vuole size-adjust). Dove Arial non c'è si passa al carattere dopo.
 */
@font-face {
    font-family: "Manrope riserva";
    src: local("Arial"), local("ArialMT");
    font-weight: 200 599;
    font-style: normal;
    size-adjust: 102.37%;
    ascent-override: 104.13%;
    descent-override: 29.31%;
    line-gap-override: 0%;
}

@font-face {
    font-family: "Manrope riserva";
    src: local("Arial Bold"), local("Arial-BoldMT");
    font-weight: 600 800;
    font-style: normal;
    size-adjust: 100.65%;
    ascent-override: 105.91%;
    descent-override: 29.81%;
    line-gap-override: 0%;
}

/*
 * Inter 4.1 self-hosted (assets/fonts/inter/, licenza OFL): il file dell'autore (rsms.me/inter) diviso per alfabeto, disegno «testo»
 * (opsz 14), pesi 100-900. Il browser scarica solo i pezzi che servono alla pagina; il latino per ultimo, così vince dove si sovrappone.
 */
@font-face {
    font-family: "Inter";
    src: url("../fonts/inter/Inter-cirillico.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116, U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
    font-family: "Inter";
    src: url("../fonts/inter/Inter-greco.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF, U+1F00-1FFF;
}

@font-face {
    font-family: "Inter";
    src: url("../fonts/inter/Inter-vietnamita.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
    font-family: "Inter";
    src: url("../fonts/inter/Inter-latino-esteso.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Inter";
    src: url("../fonts/inter/Inter-latino.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/*
 * «Inter riserva»: Arial con le misure di Inter, come «Manrope riserva». Misure ricavate dai file dei caratteri (2026-10-23): Inter 400
 * è largo il 106,64% di Arial, Inter 700 il 101,94% di Arial grassetto; sopra la riga 0,969, sotto 0,241, nessuno spazio tra le righe.
 */
@font-face {
    font-family: "Inter riserva";
    src: local("Arial"), local("ArialMT");
    font-weight: 100 599;
    font-style: normal;
    size-adjust: 106.64%;
    ascent-override: 90.84%;
    descent-override: 22.62%;
    line-gap-override: 0%;
}

@font-face {
    font-family: "Inter riserva";
    src: local("Arial Bold"), local("Arial-BoldMT");
    font-weight: 600 900;
    font-style: normal;
    size-adjust: 101.94%;
    ascent-override: 95.03%;
    descent-override: 23.66%;
    line-gap-override: 0%;
}

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

html {
    height: 100%;
}

body {
    margin: 0;
    min-height: 100%;
    background: #fff;
    color: #1a1a1a;
    font-family: "Manrope", "Manrope riserva", system-ui, sans-serif;
    font-size: 1.125rem;
    line-height: var(--hb-lh-testo, 1.7);
}

::selection {
    background: #e7e2d8;
}

a {
    color: inherit;
}

a:focus-visible {
    outline: 2px solid #111;
    outline-offset: 3px;
}

.hb-salta {
    position: absolute;
    left: 1rem;
    top: -4rem;
    background: #111;
    color: #fff;
    padding: 0.45rem 0.75rem;
    text-decoration: none;
}

.hb-salta:focus {
    top: 1rem;
}

.hb-testata {
    padding: 1.1rem 1.5rem;
    background: #fff;
    border-bottom: 1px solid #e6e6e6;
}

.hb-testata-interno,
.hb-piede-interno {
    max-width: var(--hb-pagina, 76rem);
    margin: 0 auto;
}

.hb-testata-interno {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem 2rem;
}

.hb-marca {
    flex: 0 0 auto;
    color: #1d2327;
    font-size: 1.35rem;
    font-weight: 600;
    letter-spacing: -0.03em;
    text-decoration: none;
}

.hb-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.35rem 1.35rem;
}

.hb-nav a {
    color: #1d2327;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-decoration: none;
    text-transform: uppercase;
}

.hb-nav a:hover,
.hb-nav a[aria-current="page"] {
    color: #2271b1;
}

.hb-lettura,
.hb-cornice {
    max-width: var(--hb-pagina, 76rem);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--hb-margine-lat, 1.5rem);
    padding-right: var(--hb-margine-lat, 1.5rem);
}

.hb-cornice {
    display: flex;
    flex-direction: column;
}

.hb-lettura {
    margin: 0 auto;
    padding-top: 4.5rem;
    padding-bottom: 3rem;
}

.hb-titolo {
    margin: 0;
    font-family: "Manrope", "Manrope riserva", system-ui, sans-serif;
    font-size: calc(clamp(2.6rem, 6vw, 4.4rem) * var(--hb-scala-titoli, 1));
    font-weight: 500;
    letter-spacing: -0.035em;
    line-height: var(--hb-lh-titoli, 1.05);
}

.hb-titolo-minore {
    font-size: calc(clamp(2rem, 4vw, 2.75rem) * var(--hb-scala-titoli, 1));
}

.hb-sottotitolo {
    margin: 1.25rem 0 0;
    color: inherit;
    opacity: 0.82;
    font-size: 1.3rem;
    line-height: 1.45;
}

/* Nessuno spazio tra i blocchi principali: lo decidono i loro margini. Dentro i contenitori vale la «Spaziatura dei blocchi» del pannello. */
.hb-flusso {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* :where() toglie la specificita': i blocchi che hanno un margine sopra loro (dal pannello o dall'importazione) lo tengono anche dopo un altro blocco. */
:where(.hb-blocco + .hb-blocco) {
    margin-top: 0;
}

.hb-pad-1 { padding-block: 0.35rem; }
.hb-pad-2 { padding-block: 0.7rem; }
.hb-pad-3 { padding-block: 1.05rem; }
.hb-pad-4 { padding-block: 1.5rem; }
.hb-pad-5 { padding-block: 2rem; }
.hb-pad-6 { padding-block: 2.6rem; }

.hb-largo-pieno {
    width: calc(100vw - var(--hb-sbw, 0px) - var(--hb-ml, 0px) - var(--hb-mr, 0px));
    max-width: calc(100vw - var(--hb-sbw, 0px) - var(--hb-ml, 0px) - var(--hb-mr, 0px));
    margin-left: calc(50% - 50vw + var(--hb-sbw, 0px) / 2 + var(--hb-ml, 0px));
    padding-inline: 1.5rem;
}

/* Contenitore a tutto schermo: i blocchi dentro restano nella larghezza della pagina (di partenza), o riempiono tutto con hb-interno-pieno.
   La larghezza è quella del contenuto di .hb-lettura, cioè la pagina meno i due margini laterali. */
.hb-largo-pieno:not(.hb-interno-pieno) > .hb-figli {
    width: 100%;
    max-width: calc(var(--hb-pagina, 76rem) - 2 * var(--hb-margine-lat, 1.5rem));
    margin-inline: auto;
}

.hb-col-50 { max-width: 50%; }
.hb-col-33 { max-width: 33%; }
.hb-col-25 { max-width: 25%; }

.hb-blocco.hb-centra { align-self: center; }
.hb-wn-25 { width: 25%; }
.hb-wn-33 { width: 33.33%; }
.hb-wn-50 { width: 50%; }
.hb-wn-66 { width: 66%; }
.hb-wn-75 { width: 75%; }

.hb-su-4 { margin-top: 4px; }
.hb-su-8 { margin-top: 8px; }
.hb-su-12 { margin-top: 12px; }
.hb-su-16 { margin-top: 16px; }
.hb-su-24 { margin-top: 24px; }
.hb-su-32 { margin-top: 32px; }
.hb-su-40 { margin-top: 40px; }
.hb-su-48 { margin-top: 48px; }
.hb-su-64 { margin-top: 64px; }
.hb-su-80 { margin-top: 80px; }
.hb-giu-4 { margin-bottom: 4px; }
.hb-giu-8 { margin-bottom: 8px; }
.hb-giu-12 { margin-bottom: 12px; }
.hb-giu-16 { margin-bottom: 16px; }
.hb-giu-24 { margin-bottom: 24px; }
.hb-giu-32 { margin-bottom: 32px; }
.hb-giu-40 { margin-bottom: 40px; }
.hb-giu-48 { margin-bottom: 48px; }
.hb-giu-64 { margin-bottom: 64px; }
.hb-giu-80 { margin-bottom: 80px; }

.hb-dim-14 { font-size: 14px; }
.hb-dim-16 { font-size: 16px; }
.hb-dim-18 { font-size: 18px; }
.hb-dim-20 { font-size: 20px; }
.hb-dim-24 { font-size: 24px; }
.hb-dim-28 { font-size: 28px; }
.hb-dim-32 { font-size: 32px; }
.hb-dim-40 { font-size: 40px; }
.hb-dim-48 { font-size: 48px; }
.hb-dim-56 { font-size: 56px; }
.hb-dim-64 { font-size: 64px; }
.hb-dim-72 { font-size: 72px; }

.hb-liv-h2 .hb-titolo { font-size: calc(clamp(2rem, 4vw, 2.75rem) * var(--hb-scala-titoli, 1)); }
.hb-liv-h3 .hb-titolo { font-size: calc(1.75rem * var(--hb-scala-titoli, 1)); }
.hb-liv-h4 .hb-titolo { font-size: calc(1.35rem * var(--hb-scala-titoli, 1)); }
.hb-liv-h5 .hb-titolo { font-size: calc(1.15rem * var(--hb-scala-titoli, 1)); }
.hb-liv-h6 .hb-titolo { font-size: calc(1rem * var(--hb-scala-titoli, 1)); }
.hb-dim-14 .hb-titolo,
.hb-dim-16 .hb-titolo,
.hb-dim-18 .hb-titolo,
.hb-dim-20 .hb-titolo,
.hb-dim-24 .hb-titolo,
.hb-dim-28 .hb-titolo,
.hb-dim-32 .hb-titolo,
.hb-dim-40 .hb-titolo,
.hb-dim-48 .hb-titolo,
.hb-dim-56 .hb-titolo,
.hb-dim-64 .hb-titolo,
.hb-dim-72 .hb-titolo { font-size: inherit; }

.hb-blocco-riga > .hb-figli,
.hb-blocco-colonne > .hb-figli,
.hb-blocco-colonna > .hb-figli,
.hb-blocco-contenuto > .hb-figli, .hb-blocco-gruppo > .hb-figli,
.hb-blocco-header > .hb-figli,
.hb-blocco-footer > .hb-figli {
    display: flex;
    gap: 1rem;
    --hb-gap: 1rem;
    min-height: 0;
}

.hb-editor .hb-blocco-contenuto,
.hb-editor .hb-blocco-gruppo,
.hb-editor .hb-blocco-riga,
.hb-editor .hb-blocco-colonne,
.hb-editor .hb-blocco-colonna,
.hb-editor .hb-blocco-header,
.hb-editor .hb-blocco-footer {
    position: relative;
}

/* Come in WordPress: nessun tratteggio e nessuna etichetta a riposo. Il nome del blocco e dove ti trovi stanno nella barra;
   il contorno compare solo sul contenitore selezionato o passando sull'icona del genitore nella barra. */
.hb-editor .hb-etichetta {
    display: none;
}

.hb-editor .hb-evidenzia {
    outline: 2px solid #2271b1;
    outline-offset: -2px;
    box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.7);
}

.hb-slot {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    border: 0;
    color: var(--hb-t-tenue, #4a4a4a);
    font-size: 1.25rem;
    line-height: 1;
}

.hb-blocco-contenuto > .hb-figli, .hb-blocco-gruppo > .hb-figli,
.hb-blocco-colonna > .hb-figli,
.hb-blocco-header > .hb-figli,
.hb-blocco-footer > .hb-figli { flex-direction: column; }
.hb-blocco-colonna { min-width: 0; container-type: inline-size; }
.hb-blocco-colonna > .hb-figli > .hb-blocco { min-width: 0; max-width: 100%; }
.hb-blocco-colonna > .hb-figli > .hb-blocco.hb-w-px { max-width: none; }
.hb-blocco-colonna .hb-titolo,
.hb-blocco-colonna .hb-sottotitolo,
.hb-blocco-colonna .hb-testo {
    max-width: 100%;
    overflow-wrap: break-word;
}
.hb-blocco-colonna .hb-titolo {
    font-size: calc(clamp(1.2rem, 11cqi, 2rem) * var(--hb-scala-titoli, 1));
    letter-spacing: -0.02em;
}
.hb-editor .hb-blocco-colonna > .hb-figli { padding: 0.15rem 0.45rem; }
.hb-editor .hb-blocco-colonna > .hb-figli:not(:has(> .hb-blocco)) {
    min-height: 2rem;
    padding: 0;
    align-items: center;
    justify-content: center;
}
.hb-editor .hb-blocco-colonna .hb-selezionato { outline-offset: 1px; }
.hb-blocco-riga > .hb-figli { flex-direction: row; align-items: flex-start; }
.hb-blocco-riga > .hb-figli > .hb-blocco { flex: 1 1 0; min-width: 0; }
.hb-blocco-riga.hb-align-centro > .hb-figli { justify-content: center; }
.hb-blocco-riga.hb-align-destra > .hb-figli { justify-content: flex-end; }
/* Allineando la Riga a destra o al centro, i blocchi semplici (testo, immagine, menu...) prendono la larghezza del loro contenuto; i contenitori
   (colonne, gruppo, riga...) restano a riempire lo spazio, perché il loro contenuto sono altri blocchi e si restringerebbero al minimo. */
.hb-blocco-riga.hb-align-centro > .hb-figli > .hb-blocco:not(.hb-blocco-colonne, .hb-blocco-colonna, .hb-blocco-gruppo, .hb-blocco-riga, .hb-blocco-header, .hb-blocco-footer, .hb-blocco-contenuto),
.hb-blocco-riga.hb-align-destra > .hb-figli > .hb-blocco:not(.hb-blocco-colonne, .hb-blocco-colonna, .hb-blocco-gruppo, .hb-blocco-riga, .hb-blocco-header, .hb-blocco-footer, .hb-blocco-contenuto) { flex: 0 1 auto; }
.hb-blocco-colonne > .hb-figli { gap: 0; --hb-gap: 0px; align-items: start; }
.hb-colnum-2 > .hb-figli { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.hb-colnum-3 > .hb-figli { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
.hb-colnum-4 > .hb-figli { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: start; }

.hb-testo h1,
.hb-testo h2,
.hb-testo h3,
.hb-testo h4,
.hb-testo h5,
.hb-testo h6,
.hb-faq-titolo {
    margin: 0.6em 0 0.3em;
    font-weight: 500;
    letter-spacing: -0.035em;
    line-height: var(--hb-lh-titoli, 1.05);
}
.hb-testo h1 b,
.hb-testo h2 b,
.hb-testo h3 b,
.hb-testo h4 b,
.hb-testo h5 b,
.hb-testo h6 b,
.hb-testo h1 strong,
.hb-testo h2 strong,
.hb-testo h3 strong,
.hb-testo h4 strong,
.hb-testo h5 strong,
.hb-testo h6 strong { font-weight: 700; }
.hb-testo h1 { font-size: calc(clamp(2.6rem, 6vw, 4.4rem) * var(--hb-scala-titoli, 1)); }
.hb-testo h2,
h2.hb-faq-titolo { font-size: calc(clamp(2rem, 4vw, 2.75rem) * var(--hb-scala-titoli, 1)); }
.hb-testo h3,
h3.hb-faq-titolo { font-size: calc(1.75rem * var(--hb-scala-titoli, 1)); }
.hb-testo h4,
h4.hb-faq-titolo { font-size: calc(1.35rem * var(--hb-scala-titoli, 1)); }
.hb-testo h5,
h5.hb-faq-titolo { font-size: calc(1.15rem * var(--hb-scala-titoli, 1)); }
.hb-testo h6,
h6.hb-faq-titolo { font-size: calc(1rem * var(--hb-scala-titoli, 1)); }

@media (max-width: 700px) {
    .hb-colnum-2 > .hb-figli,
    .hb-colnum-3 > .hb-figli,
    .hb-colnum-4 > .hb-figli,
    .hb-blocco-colonne > .hb-figli {
        display: flex;
        flex-direction: column;
    }
    .hb-blocco-colonna {
        width: 100%;
        max-width: 100%;
        container-type: normal;
    }
    /* Colonne con «Impila su telefono» spento: restano affiancate, con le loro misure. */
    .hb-blocco-colonne.hb-no-impila > .hb-figli {
        display: grid;
        flex-direction: row;
    }
    /* «Posizione sul telefono» delle colonne impilate (il posto lo calcola il server: ogni colonna ha il suo). */
    .hb-blocco-colonne > .hb-figli > .hb-tel-1 { order: 1; }
    .hb-blocco-colonne > .hb-figli > .hb-tel-2 { order: 2; }
    .hb-blocco-colonne > .hb-figli > .hb-tel-3 { order: 3; }
    .hb-blocco-colonne > .hb-figli > .hb-tel-4 { order: 4; }
    .hb-blocco-colonne > .hb-figli > .hb-tel-5 { order: 5; }
    .hb-blocco-colonne > .hb-figli > .hb-tel-6 { order: 6; }
    .hb-blocco-colonne > .hb-figli > .hb-tel-7 { order: 7; }
    .hb-blocco-colonne > .hb-figli > .hb-tel-8 { order: 8; }
}

/* Blog: articolo singolo ed elenco */
.hb-articolo-meta {
    margin: 0 0 1.2rem;
    color: var(--hb-t-tenue, #4a4a4a);
    font-size: 0.95rem;
}

.hb-articolo-immagine {
    display: block;
    width: 100%;
    height: auto;
    margin: 0 0 1.5rem;
}

.hb-titolo-elenco {
    margin-bottom: 2rem;
}

/* L'elenco sotto la «Pagina degli articoli»: la pagina a blocchi non ha spazio proprio, l'elenco tiene il suo sopra e sotto. */
.hb-elenco-sotto {
    padding-top: 2rem;
    padding-bottom: 3rem;
}

.hb-scheda-articolo {
    margin: 0 0 2.2rem;
    padding: 0 0 2.2rem;
    border-bottom: 1px solid #e6e6e6;
}

.hb-scheda-immagine img {
    display: block;
    width: 100%;
    /*aspect-ratio: 16 / 9;*/
    object-fit: cover;
    margin: 0 0 1rem;
}

.hb-scheda-titolo {
    margin: 0 0 0.3rem;
    font-size: 1.6rem;
    line-height: 1.25;
    letter-spacing: -0.01em;
}

.hb-scheda-titolo a {
    text-decoration: none;
}

.hb-scheda-titolo a:hover {
    text-decoration: underline;
}

.hb-scheda-riassunto {
    margin: 0.6rem 0 0.8rem;
}

.hb-scheda-leggi {
    margin: 0;
}

.hb-scheda-leggi a {
    font-weight: 600;
}

/* Elenco a griglia (Impostazioni → Lettura): 2, 3 o 4 colonne; fino a 900 px al massimo 2, fino a 560 px una */
.hb-elenco-griglia .hb-elenco-schede {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    columns: 2;
    gap: 2.5rem 1.75rem;
    margin: 0 0 2.2rem;
}

.hb-elenco-col-3 .hb-elenco-schede {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    columns: 3;
}

.hb-elenco-col-4 .hb-elenco-schede {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    columns: 4;
    column-gap: 1.5rem;
}

.hb-elenco-griglia .hb-scheda-articolo {
    display: flex;
    flex-direction: column;
    min-width: 0;
    margin: 0;
    padding: 0;
    border-bottom: 0;
}

.hb-elenco-griglia .hb-scheda-immagine img {
    height: auto;
    margin: 0 0 0.8rem;
}

.hb-elenco-griglia .hb-scheda-titolo {
    font-size: 1.3rem;
}

.hb-elenco-col-4 .hb-scheda-titolo {
    font-size: 1.15rem;
}

.hb-elenco-griglia .hb-articolo-meta {
    margin-bottom: 0.6rem;
    font-size: 0.9rem;
}

.hb-elenco-griglia .hb-scheda-riassunto {
    margin-top: 0;
}

.hb-elenco-griglia .hb-scheda-leggi {
    margin-top: auto;
}

/* Allineata: foto tutte 16:9, riassunto di 3 righe, schede di una riga alte uguali */
.hb-elenco-tipo-allineata .hb-scheda-immagine img {
    aspect-ratio: 16 / 9;
}

.hb-elenco-tipo-allineata .hb-scheda-riassunto {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
}

/* Senza foto: riquadro vuoto 16:9 nel colore dei bordi del tema */
.hb-scheda-senza-foto {
    display: block;
    aspect-ratio: 16 / 9;
    margin: 0 0 0.8rem;
    background: var(--hb-t-bordo, #e6e6e6);
}

/* Ogni parte della scheda su una riga comune a tutta la fila: foto, titolo, data, riassunto e «Leggi» partono alla stessa
   altezza in tutte le schede, qualunque sia la lunghezza dei testi. Senza subgrid restano una sotto l'altra come prima. */
@supports (grid-template-rows: subgrid) {
    /* Lo spazio tra una fila e l'altra lo dà la scheda, non la griglia (che metterebbe spazio anche tra le parti) */
    .hb-elenco.hb-elenco-griglia.hb-elenco-tipo-allineata .hb-elenco-schede {
        row-gap: 0;
    }

    .hb-elenco-tipo-allineata .hb-scheda-articolo {
        display: grid;
        grid-row: span 5;
        grid-template-rows: subgrid;
        row-gap: 0;
        margin-bottom: 2.5rem;
    }

    .hb-elenco-tipo-allineata .hb-scheda-immagine { grid-row: 1; }
    .hb-elenco-tipo-allineata .hb-scheda-titolo { grid-row: 2; }
    .hb-elenco-tipo-allineata .hb-articolo-meta { grid-row: 3; }
    .hb-elenco-tipo-allineata .hb-scheda-riassunto { grid-row: 4; }
    .hb-elenco-tipo-allineata .hb-scheda-leggi { grid-row: 5; align-self: end; }
}

/* A mattoni: foto con le loro proporzioni, colonne che si riempiono dall'alto */
.hb-elenco-tipo-mattoni .hb-elenco-schede {
    display: block;
}

.hb-elenco-tipo-mattoni .hb-scheda-articolo {
    display: block;
    margin: 0 0 2.5rem;
    break-inside: avoid;
}

/* Copertina: tutta la scheda è il link, titolo e data sulla foto (4:3) */
.hb-scheda-copertina {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #1a1a1a;
    color: #fff;
    text-decoration: none;
}

.hb-scheda-copertina img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hb-scheda-velo {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 3rem 1rem 1rem;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));
}

.hb-scheda-copertina .hb-scheda-titolo {
    margin: 0 0 0.3rem;
    color: #fff;
}

.hb-scheda-copertina .hb-articolo-meta {
    margin: 0;
    color: rgba(255, 255, 255, 0.9);
}

.hb-scheda-copertina:hover .hb-scheda-titolo,
.hb-scheda-copertina:focus-visible .hb-scheda-titolo {
    text-decoration: underline;
}

.hb-elenco-altri {
    margin: 0 0 2rem;
    text-align: center;
}

@media (max-width: 900px) {
    .hb-elenco-griglia.hb-elenco-col-3 .hb-elenco-schede,
    .hb-elenco-griglia.hb-elenco-col-4 .hb-elenco-schede {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        columns: 2;
    }

    .hb-elenco-col-4 .hb-scheda-titolo {
        font-size: 1.3rem;
    }
}

@media (max-width: 560px) {
    .hb-elenco-griglia.hb-elenco-col-2 .hb-elenco-schede,
    .hb-elenco-griglia.hb-elenco-col-3 .hb-elenco-schede,
    .hb-elenco-griglia.hb-elenco-col-4 .hb-elenco-schede {
        grid-template-columns: minmax(0, 1fr);
        columns: 1;
        row-gap: 2rem;
    }
}

.hb-ricerca {
    display: flex;
    gap: 0.5rem;
    margin: 0 0 2rem;
}

.hb-ricerca-etichetta {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.hb-ricerca input {
    flex: 1;
    min-width: 0;
    padding: 0.55rem 0.75rem;
    border: var(--hb-sp-campi, 1px) solid var(--hb-t-campi, #8c8c8c);
    background: #fff;
    color: inherit;
    font: inherit;
    font-size: 1rem;
}

.hb-ricerca button {
    padding: 0.55rem 1rem;
    border: 1px solid #1a1a1a;
    background: #1a1a1a;
    color: #fff;
    font: inherit;
    font-size: 1rem;
    cursor: pointer;
}

.hb-articolo-tassonomia {
    margin: 1.2rem 0 0;
    color: var(--hb-t-tenue, #4a4a4a);
    font-size: 0.95rem;
}

.hb-articolo-tassonomia a {
    color: inherit;
}

.hb-intro-elenco {
    margin-top: -1.2rem;
    margin-bottom: 2rem;
}

.hb-paginazione {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    font-size: 0.95rem;
}

.hb-pag-stato {
    color: var(--hb-t-tenue, #4a4a4a);
}

.hb-paginazione {
    flex-wrap: wrap;
}

.hb-paginazione a {
    display: inline-block;
    padding: 0.55rem 0.9rem;
    border: 1px solid #d6d6d6;
    text-decoration: none;
}

.hb-ricerca input,
.hb-ricerca button {
    min-height: 44px;
}

@media (max-width: 560px) {
    .hb-scheda-titolo {
        font-size: 1.35rem;
    }

    .hb-paginazione {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }

    .hb-pag-stato {
        order: -1;
    }

    .hb-paginazione a {
        padding: 0.8rem 1rem;
    }

    .hb-paginazione span:empty {
        display: none;
    }
}

.hb-testo p {
    margin: 0 0 1.1em;
}

.hb-testo s {
    text-decoration: line-through;
}

.hb-testo code,
.hb-testo kbd {
    font-family: ui-monospace, Consolas, monospace;
    font-size: 0.92em;
}

.hb-testo kbd {
    border: 1px solid #1e1e1e;
    padding: 0 0.25em;
}

.hb-testo mark {
    background: #f6e7a2;
    color: inherit;
}

.hb-testo p:last-child {
    margin-bottom: 0;
}

.hb-testo a {
    text-underline-offset: 0.15em;
}

.hb-blocco-immagine {
    margin-left: 0;
    margin-right: 0;
    max-width: 100%;
}

.hb-blocco-riga > .hb-figli > .hb-blocco-immagine,
.hb-blocco-colonna > .hb-figli > .hb-blocco-immagine,
.hb-blocco-contenuto > .hb-figli > .hb-blocco-immagine,
.hb-blocco-gruppo > .hb-figli > .hb-blocco-immagine,
.hb-blocco-header > .hb-figli > .hb-blocco-immagine,
.hb-blocco-footer > .hb-figli > .hb-blocco-immagine {
    flex: 0 0 auto;
    max-width: 100%;
}

.hb-blocco-immagine img {
    display: block;
    max-width: 100%;
    height: auto;
}

.hb-didascalia {
    margin-top: 0.65rem;
    /* Il colore del testo del blocco che la contiene (o del tema): un grigio fisso non si legge su fondi colorati o scuri. */
    color: inherit;
    font-size: 0.875rem;
    line-height: 1.45;
}

/* Blocco Galleria: griglia di miniature. Colonne, spazio, rapporto e «Intera» sono classi scritte dal server; sul telefono al massimo
   2 colonne (come la galleria di WordPress). */
.hb-galleria {
    display: grid;
    grid-template-columns: repeat(var(--hb-gal-col, 3), minmax(0, 1fr));
    gap: var(--hb-gal-sp, 16px);
    align-items: start;
    margin: 0;
    padding: 0;
    list-style: none;
}

.hb-gal-col-1 { --hb-gal-col: 1; }
.hb-gal-col-2 { --hb-gal-col: 2; }
.hb-gal-col-3 { --hb-gal-col: 3; }
.hb-gal-col-4 { --hb-gal-col: 4; }
.hb-gal-col-5 { --hb-gal-col: 5; }
.hb-gal-col-6 { --hb-gal-col: 6; }
.hb-gal-col-7 { --hb-gal-col: 7; }
.hb-gal-col-8 { --hb-gal-col: 8; }
.hb-gal-sp-0 { --hb-gal-sp: 0; }
.hb-gal-sp-4 { --hb-gal-sp: 4px; }
.hb-gal-sp-8 { --hb-gal-sp: 8px; }
.hb-gal-sp-16 { --hb-gal-sp: 16px; }
.hb-gal-sp-24 { --hb-gal-sp: 24px; }

.hb-gal-voce {
    min-width: 0;
    margin: 0;
}

.hb-gal-link {
    display: block;
}

.hb-gal-voce img {
    display: block;
    width: 100%;
    height: auto;
}

.hb-gal-r-1 .hb-gal-voce img { aspect-ratio: 1; object-fit: cover; }
.hb-gal-r-4-3 .hb-gal-voce img { aspect-ratio: 4 / 3; object-fit: cover; }
.hb-gal-r-3-4 .hb-gal-voce img { aspect-ratio: 3 / 4; object-fit: cover; }
.hb-gal-r-3-2 .hb-gal-voce img { aspect-ratio: 3 / 2; object-fit: cover; }
.hb-gal-r-2-3 .hb-gal-voce img { aspect-ratio: 2 / 3; object-fit: cover; }
.hb-gal-r-16-9 .hb-gal-voce img { aspect-ratio: 16 / 9; object-fit: cover; }
.hb-gal-r-9-16 .hb-gal-voce img { aspect-ratio: 9 / 16; object-fit: cover; }
.hb-gal-intera .hb-gal-voce img { object-fit: contain; }

.hb-gal-did {
    display: block;
    margin-top: 0.35rem;
    color: var(--hb-t-tenue, #4a4a4a);
    font-size: 0.8125rem;
    line-height: 1.4;
}

@media (max-width: 600px) {
    .hb-gal-col-3,
    .hb-gal-col-4,
    .hb-gal-col-5,
    .hb-gal-col-6,
    .hb-gal-col-7,
    .hb-gal-col-8 {
        --hb-gal-col: 2;
    }
}

/* La foto grande della galleria (galleria.js): a tutto schermo, frecce e chiudi da 44 px, didascalia sotto. */
html.hb-gal-aperta {
    overflow: hidden;
}

.hb-gal-lb {
    position: fixed;
    inset: 0;
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: rgba(0, 0, 0, 0.92);
    color: #fff;
}

.hb-gal-lb[open] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.hb-gal-lb::backdrop {
    background: rgba(0, 0, 0, 0.92);
}

.hb-gal-lb-foto {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: calc(100% - 7.5rem);
    margin: 0;
}

.hb-gal-lb-foto img {
    display: block;
    max-width: 100%;
    max-height: calc(100vh - 7rem);
    max-height: calc(100dvh - 7rem);
    object-fit: contain;
}

.hb-gal-lb-did {
    margin-top: 0.6rem;
    font-size: 0.9rem;
    line-height: 1.4;
    text-align: center;
}

.hb-gal-lb-did:empty {
    display: none;
}

.hb-gal-lb-conta {
    position: absolute;
    top: 1.2rem;
    left: 1rem;
    margin: 0;
    font-size: 0.85rem;
}

.hb-gal-lb button {
    position: absolute;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    font: inherit;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
}

.hb-gal-lb button:hover,
.hb-gal-lb button:focus-visible {
    background: rgba(255, 255, 255, 0.28);
}

.hb-gal-lb button[hidden] {
    display: none;
}

.hb-gal-lb-chiudi {
    top: 0.75rem;
    right: 0.75rem;
}

.hb-gal-lb-prima,
.hb-gal-lb-dopo {
    top: 50%;
    transform: translateY(-50%);
}

.hb-gal-lb-prima {
    left: 0.75rem;
}

.hb-gal-lb-dopo {
    right: 0.75rem;
}

@media (max-width: 600px) {
    .hb-gal-lb-foto {
        max-width: 100%;
    }

    .hb-gal-lb-prima,
    .hb-gal-lb-dopo {
        top: auto;
        bottom: 0.75rem;
        transform: none;
    }
}

/* Blocco Video: copertina con il play finché non si preme; poi il riquadro di YouTube nella stessa misura. */
.hb-video {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 12px;
    background: #111;
}

.hb-video-verticale {
    max-width: 22rem;
    aspect-ratio: 9 / 16;
}

.hb-align-centro .hb-video-verticale {
    margin-inline: auto;
}

.hb-align-destra .hb-video-verticale {
    margin-left: auto;
}

.hb-video-copertina {
    position: absolute;
    inset: 0;
    display: block;
    cursor: pointer;
}

.hb-video-copertina img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hb-video-play {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.62);
    transform: translate(-50%, -50%);
    transition: background 0.2s, transform 0.2s;
}

.hb-video-play::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    border-style: solid;
    border-width: 0.8rem 0 0.8rem 1.35rem;
    border-color: transparent transparent transparent #fff;
    transform: translate(-38%, -50%);
}

.hb-video-copertina:hover .hb-video-play,
.hb-video-copertina:focus-visible .hb-video-play {
    background: var(--hb-t-azione, #111);
    transform: translate(-50%, -50%) scale(1.06);
}

.hb-video iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.hb-video-avviso {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 1.5rem;
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    font-size: 0.95rem;
    line-height: 1.45;
    text-align: center;
}

.hb-video-avviso[hidden] {
    display: none;
}

.hb-video-avviso p {
    max-width: 28rem;
    margin: 0;
}

.hb-video-avviso button {
    padding: 0.6rem 1.4rem;
    border: 0;
    border-radius: 999px;
    background: #fff;
    color: #111;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

/* Blocco Mappa: un riquadro con l'indirizzo finché non si preme; poi la mappa di Google nella stessa misura. L'altezza del blocco, se scelta, vale anche per la mappa. */
.hb-mappa {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 22rem;
    overflow: hidden;
    border-radius: 12px;
    background: #eef1f4;
}

.hb-mappa-copertina {
    position: absolute;
    inset: 0;
    width: 100%;
    margin: 0;
    border: 0;
    background: none;
    font: inherit;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 1.5rem;
    color: #1d2327;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}

.hb-mappa-copertina .hb-i {
    font-size: 2.25rem;
    color: var(--hb-t-azione, #111);
}

.hb-mappa-indirizzo {
    max-width: 28rem;
    font-weight: 600;
    line-height: 1.4;
}

.hb-mappa-mostra {
    padding: 0.55rem 1.3rem;
    border-radius: 999px;
    background: var(--hb-t-azione, #111);
    color: #fff;
    font-size: 0.95rem;
    font-weight: 600;
    transition: transform 0.2s;
}

.hb-mappa-copertina:hover .hb-mappa-mostra,
.hb-mappa-copertina:focus-visible .hb-mappa-mostra {
    transform: scale(1.04);
}

.hb-mappa iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Link «Apri in Google Maps» sotto la mappa (solo se acceso nel pannello): la mappa lascia il posto a una riga toccabile. */
.hb-blocco-mappa:has(> .hb-mappa-link) > .hb-mappa {
    height: calc(100% - 2.75rem);
}

.hb-mappa-link {
    display: flex;
    align-items: center;
    min-height: 2.75rem;
    margin: 0;
    font-size: 0.95rem;
}

.hb-mappa-link a {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
}

.hb-mappa-avviso {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 1.5rem;
    background: #1d2327;
    color: #fff;
    font-size: 0.95rem;
    line-height: 1.45;
    text-align: center;
}

.hb-mappa-avviso[hidden] {
    display: none;
}

.hb-mappa-avviso p {
    max-width: 28rem;
    margin: 0;
}

.hb-mappa-avviso button {
    padding: 0.6rem 1.4rem;
    border: 0;
    border-radius: 999px;
    background: #fff;
    color: #111;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

/* Blocco Ancora: invisibile e senza spazio. Dentro un contenitore annulla la spaziatura che gli toccherebbe (--hb-gap). */
.hb-ancora {
    flex: 0 0 0;
    width: 100%;
    height: 0;
    margin-block-end: calc(-1 * var(--hb-gap, 0px));
    scroll-margin-top: 1.5rem;
}

.hb-blocco-riga > .hb-figli > .hb-ancora,
.hb-blocco-gruppo.hb-g-riga > .hb-figli > .hb-ancora {
    width: 0;
    margin-block-end: 0;
    margin-inline-end: calc(-1 * var(--hb-gap, 0px));
}

.hb-figli > .hb-ancora:last-child {
    margin-block: calc(-1 * var(--hb-gap, 0px)) 0;
}

.hb-blocco-riga > .hb-figli > .hb-ancora:last-child,
.hb-blocco-gruppo.hb-g-riga > .hb-figli > .hb-ancora:last-child {
    margin-block: 0;
    margin-inline: calc(-1 * var(--hb-gap, 0px)) 0;
}

.hb-figli > .hb-ancora:only-child {
    margin: 0;
}

/* Con l'intestazione che resta in alto, l'arrivo si ferma sotto di lei (blocco Ancora, e i link #commenti / #commento-N delle email). */
body[data-intestazione="fisso"] :is(.hb-ancora, .hb-commenti, .hb-commento, #modulo-commento),
body[data-intestazione="auto"] :is(.hb-ancora, .hb-commenti, .hb-commento, #modulo-commento) {
    scroll-margin-top: var(--hb-ancora-sopra, 7rem);
}

@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

.hb-align-centro {
    text-align: center;
}

.hb-align-destra {
    text-align: right;
}

.hb-blocco-menu > .hb-voci {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.125rem;
    align-items: center;
}

.hb-blocco-menu.hb-align-centro > .hb-voci {
    justify-content: center;
}

.hb-blocco-menu.hb-align-destra > .hb-voci {
    justify-content: flex-end;
}

.hb-blocco-menu > .hb-voci a {
    color: inherit;
    text-decoration: none;
}

.hb-blocco-menu .hb-voce {
    position: relative;
}

.hb-blocco-menu .hb-sotto {
    display: none;
    position: absolute;
    z-index: 5;
    top: calc(100% + var(--hb-menu-dist, 0.5rem));
    left: 0;
    min-width: 200px;
    padding: 8px 0;
    gap: 0;
    border: var(--hb-sp-bordo, 1px) solid var(--hb-t-bordo, #dcdcde);
    border-radius: 0;
    background: var(--hb-menu-fondo, var(--hb-t-fondo-alt, #f4f4f1));
    text-align: left;
    flex-direction: column;
}

.hb-blocco-menu.hb-align-destra .hb-sotto {
    left: auto;
    right: 0;
}

/* Ponte invisibile: il sottomenu resta aperto passando dalla voce al riquadro, qualunque sia la distanza */
.hb-blocco-menu .hb-sotto::before {
    position: absolute;
    top: calc(-1 * var(--hb-menu-dist, 0.5rem) - 1px);
    right: 0;
    left: 0;
    height: calc(var(--hb-menu-dist, 0.5rem) + 1px);
    content: "";
}

/* Testo dei sottomenu: di partenza segue il menu; si puo' scegliere a parte */
.hb-blocco-menu.hb-sotto-sinistra .hb-sotto { text-align: left; }
.hb-blocco-menu.hb-sotto-centro .hb-sotto { text-align: center; }
.hb-blocco-menu.hb-sotto-destra .hb-sotto { text-align: right; }

/* Il sottomenu sta attaccato alla voce (resta aperto passando dal collegamento al riquadro) e sopra le fasce che seguono */
.hb-blocco:has(> .hb-figli .hb-blocco-menu .hb-sotto),
.hb-blocco:has(> .hb-figli .hb-blocco-menu .hb-voce) {
    position: relative;
    z-index: 20;
}

.hb-blocco-menu .hb-voce:hover > .hb-sotto,
.hb-blocco-menu .hb-voce:focus-within > .hb-sotto {
    display: flex;
}

.hb-blocco-menu .hb-sotto a {
    padding: 8px 14px;
    border-radius: 0;
    white-space: nowrap;
}

/* Le voci seguono colore, dimensione, peso e tipografia scelti per il blocco; al passaggio del mouse si schiariscono */
.hb-blocco-menu > .hb-voci > a,
.hb-blocco-menu .hb-voce > a {
    transition: opacity 0.15s ease;
}

.hb-blocco-menu > .hb-voci > a:hover,
.hb-blocco-menu > .hb-voci > a:focus-visible,
.hb-blocco-menu .hb-voce > a:hover,
.hb-blocco-menu .hb-voce:focus-within > a,
.hb-blocco-menu .hb-sotto a:hover,
.hb-blocco-menu .hb-sotto a:focus-visible {
    opacity: 0.7;
}

@media (min-width: 761px) {
    .hb-blocco-menu > .hb-voci > a,
    .hb-blocco-menu .hb-voce > a {
        display: inline-flex;
        align-items: center;
        min-height: 2.5rem;
    }

    .hb-blocco-menu .hb-voce > a::after {
        display: inline-block;
        width: 0.32em;
        height: 0.32em;
        margin: -0.2em 0 0 0.45em;
        opacity: 0.7;
        border-right: 1.5px solid currentColor;
        border-bottom: 1.5px solid currentColor;
        transform: rotate(45deg);
        vertical-align: middle;
        content: "";
    }
}

.hb-blocco-contenuto.hb-align-centro > .hb-figli > .hb-blocco-immagine,
.hb-blocco-gruppo.hb-align-centro > .hb-figli > .hb-blocco-immagine,
.hb-blocco-colonna.hb-align-centro > .hb-figli > .hb-blocco-immagine,
.hb-blocco-header.hb-align-centro > .hb-figli > .hb-blocco-immagine,
.hb-blocco-footer.hb-align-centro > .hb-figli > .hb-blocco-immagine {
    align-self: center;
}

.hb-blocco-contenuto.hb-align-destra > .hb-figli > .hb-blocco-immagine,
.hb-blocco-gruppo.hb-align-destra > .hb-figli > .hb-blocco-immagine,
.hb-blocco-colonna.hb-align-destra > .hb-figli > .hb-blocco-immagine,
.hb-blocco-header.hb-align-destra > .hb-figli > .hb-blocco-immagine,
.hb-blocco-footer.hb-align-destra > .hb-figli > .hb-blocco-immagine {
    align-self: flex-end;
}

.hb-blocco-contenuto > .hb-figli > .hb-ha-misura.hb-align-centro,
.hb-blocco-gruppo > .hb-figli > .hb-ha-misura.hb-align-centro,
.hb-blocco-colonna > .hb-figli > .hb-ha-misura.hb-align-centro,
.hb-blocco-header > .hb-figli > .hb-ha-misura.hb-align-centro,
.hb-blocco-footer > .hb-figli > .hb-ha-misura.hb-align-centro,
article > .hb-flusso > .hb-ha-misura.hb-align-centro,
.hb-cornice > .hb-ha-misura.hb-align-centro,
.hb-blocco-contenuto > .hb-figli > .hb-blocco-immagine.hb-align-centro,
.hb-blocco-gruppo > .hb-figli > .hb-blocco-immagine.hb-align-centro,
.hb-blocco-colonna > .hb-figli > .hb-blocco-immagine.hb-align-centro,
.hb-blocco-header > .hb-figli > .hb-blocco-immagine.hb-align-centro,
.hb-blocco-footer > .hb-figli > .hb-blocco-immagine.hb-align-centro,
article > .hb-flusso > .hb-blocco-immagine.hb-align-centro,
.hb-cornice > .hb-blocco-immagine.hb-align-centro {
    align-self: center;
}

.hb-blocco-contenuto > .hb-figli > .hb-ha-misura.hb-align-destra,
.hb-blocco-gruppo > .hb-figli > .hb-ha-misura.hb-align-destra,
.hb-blocco-colonna > .hb-figli > .hb-ha-misura.hb-align-destra,
.hb-blocco-header > .hb-figli > .hb-ha-misura.hb-align-destra,
.hb-blocco-footer > .hb-figli > .hb-ha-misura.hb-align-destra,
article > .hb-flusso > .hb-ha-misura.hb-align-destra,
.hb-cornice > .hb-ha-misura.hb-align-destra,
.hb-blocco-contenuto > .hb-figli > .hb-blocco-immagine.hb-align-destra,
.hb-blocco-gruppo > .hb-figli > .hb-blocco-immagine.hb-align-destra,
.hb-blocco-colonna > .hb-figli > .hb-blocco-immagine.hb-align-destra,
.hb-blocco-header > .hb-figli > .hb-blocco-immagine.hb-align-destra,
.hb-blocco-footer > .hb-figli > .hb-blocco-immagine.hb-align-destra,
article > .hb-flusso > .hb-blocco-immagine.hb-align-destra,
.hb-cornice > .hb-blocco-immagine.hb-align-destra {
    align-self: flex-end;
}

.hb-align-centro .hb-sottotitolo,
.hb-align-destra .hb-sottotitolo {
    margin-left: auto;
    margin-right: auto;
}

.hb-align-destra .hb-sottotitolo {
    margin-right: 0;
}

.hb-piede {
    padding: 0 1.5rem 3.5rem;
}

.hb-piede-interno {
    border-top: 1px solid #ececec;
    padding-top: 1.25rem;
    color: #666;
    font-size: 0.875rem;
}

@media (max-width: 640px) {
    .hb-lettura {
        padding-top: 3rem;
    }
}

/* Le pagine a blocchi non hanno spazio proprio sopra e sotto: lo decidono i blocchi (come in WordPress). Articoli ed elenchi del blog lo tengono. */
.hb-lettura.hb-lettura-blocchi {
    padding-top: 0;
    padding-bottom: 0;
}

/* Blocchi Lingue e Valute: un bottone largo quanto la scelta attuale («IT», «EUR») che apre una finestrella con l'elenco.
   Sul telefono la finestrella sale dal basso a tutta larghezza. Colori e bordi dal tema; punti toccabili da 44 px. */
.hb-scelta {
    position: relative;
    display: inline-block;
    font-size: 0.95rem;
    text-align: left;
}

.hb-scelta-bottone {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    min-height: 2.75rem;
    padding: 0 0.5rem;
    color: inherit;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
    white-space: nowrap;
}

.hb-scelta-bottone::-webkit-details-marker {
    display: none;
}

.hb-scelta-freccia {
    width: 1rem;
    height: 1rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 0.2s;
}

.hb-scelta[open] .hb-scelta-freccia {
    transform: rotate(180deg);
}

.hb-scelta-finestra {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 60;
    width: max-content;
    min-width: 12rem;
    max-width: min(20rem, calc(100vw - 1.5rem));
    max-height: min(70vh, 28rem);
    overflow-y: auto;
    padding: 0.5rem;
    background: var(--hb-t-fondo, #fff);
    color: var(--hb-t-testo, #111827);
    border: var(--hb-sp-bordo, 1px) solid var(--hb-t-bordo, #e5e7eb);
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
}

.hb-scelta.hb-scelta-destra .hb-scelta-finestra {
    left: auto;
    right: 0;
}

.hb-scelta-gruppo {
    margin: 0.25rem 0.5rem 0.25rem;
    color: var(--hb-t-tenue, #6b7280);
    font-size: 0.8rem;
    font-weight: 600;
}

.hb-scelta-elenco {
    margin: 0;
    padding: 0;
    list-style: none;
}

.hb-scelta-voce {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    min-height: 2.75rem;
    padding: 0 0.5rem;
    border: 0;
    border-radius: 6px;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.hb-scelta-voce:hover,
.hb-scelta-voce:focus-visible {
    background: color-mix(in srgb, currentColor 8%, transparent);
}

.hb-scelta-voce[aria-current="true"] {
    font-weight: 700;
}

.hb-scelta-sigla {
    color: var(--hb-t-tenue, #6b7280);
    font-size: 0.8rem;
}

.hb-scelta-avviso {
    margin-top: 0.5rem;
    padding: 0.75rem;
    border-radius: 6px;
    background: color-mix(in srgb, currentColor 6%, transparent);
    font-size: 0.875rem;
    line-height: 1.45;
}

.hb-scelta-avviso[hidden] {
    display: none;
}

.hb-scelta-avviso p {
    margin: 0 0 0.5rem;
}

.hb-scelta-avviso button {
    min-height: 2.75rem;
    padding: 0 1.2rem;
    border: 0;
    border-radius: var(--hb-raggio-pulsanti, 999px);
    background: var(--hb-t-azione, #111);
    color: var(--hb-t-azione-testo, #fff);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

/* In fila: le voci una accanto all'altra (per esempio nel piede), senza finestrella. */
.hb-scelta-fila .hb-scelta-elenco {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.hb-scelta-fila .hb-scelta-voce {
    width: auto;
}

.hb-scelta-fila .hb-scelta-sigla {
    display: none;
}

.hb-scelta-fila .hb-scelta-gruppo {
    margin: 0.5rem 0 0;
}

@media (max-width: 640px) {
    .hb-scelta-finestra,
    .hb-scelta.hb-scelta-destra .hb-scelta-finestra {
        position: fixed;
        top: auto;
        right: 0;
        bottom: 0;
        left: 0;
        width: auto;
        max-width: none;
        max-height: 70vh;
        padding: 0.75rem 0.75rem calc(0.75rem + env(safe-area-inset-bottom, 0px));
        border-radius: 14px 14px 0 0;
        box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.18);
    }
}

/* Google Translate: niente barra, niente cerchio di caricamento e niente fumetto di Google; la pagina resta dov'è.
   I nomi «VIpgJd-…» sono quelli dello stile di Google: se Google li cambia, il cerchio ricompare e va aggiornata questa regola. */
body > .skiptranslate,
iframe.goog-te-banner-frame,
#goog-gt-tt,
.goog-te-balloon-frame,
.goog-te-spinner-pos,
.VIpgJd-ZVi9od-ORHb-OEVmcd,
.VIpgJd-ZVi9od-aZ2wEe-wOHMyf,
.VIpgJd-ZVi9od-aZ2wEe-OiiCO,
.VIpgJd-yAWNEb-L7lbkb,
#hb-gt {
    display: none !important;
}

html.hb-gt body,
html.translated-ltr body,
html.translated-rtl body {
    top: 0 !important;
}

/* Lingua di Google già scelta: la pagina compare quando è tradotta (scelte.js), al più tardi dopo 1,5 secondi anche senza script. */
body.hb-gt-attesa {
    opacity: 0;
    animation: hb-gt-mostra 0s linear 1.5s forwards;
}

@keyframes hb-gt-mostra {
    to {
        opacity: 1;
    }
}

html.translated-ltr font[style],
html.translated-rtl font[style] {
    background: none !important;
    box-shadow: none !important;
}

/* Menu «Sul computer: pulsante»: anche sopra i 760 px solo le tre righe; il pannello si apre a destra sotto l'intestazione, con i
   sottomenu già aperti sotto la loro voce. Apertura, chiusura (Esc, clic fuori) e posizione le fa menu.js, come sul telefono. */
@media (min-width: 761px) {
    .hb-js .hb-blocco-menu.hb-menu-pc-pulsante .hb-menu-apri {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 2.75rem;
        height: 2.75rem;
        padding: 0;
        border: 1px solid currentColor;
        border-radius: 0;
        background: transparent;
        color: inherit;
        cursor: pointer;
    }

    .hb-menu-pc-pulsante .hb-menu-barre,
    .hb-menu-pc-pulsante .hb-menu-barre::before,
    .hb-menu-pc-pulsante .hb-menu-barre::after {
        display: block;
        width: 1.25rem;
        height: 2px;
        background: currentColor;
        border-radius: 1px;
        content: "";
    }

    .hb-menu-pc-pulsante .hb-menu-barre {
        position: relative;
    }

    .hb-menu-pc-pulsante .hb-menu-barre::before,
    .hb-menu-pc-pulsante .hb-menu-barre::after {
        position: absolute;
        left: 0;
    }

    .hb-menu-pc-pulsante .hb-menu-barre::before {
        top: -6px;
    }

    .hb-menu-pc-pulsante .hb-menu-barre::after {
        top: 6px;
    }

    .hb-js .hb-blocco-menu.hb-menu-pc-pulsante.hb-menu-aperto .hb-menu-barre {
        background: transparent;
    }

    .hb-js .hb-blocco-menu.hb-menu-pc-pulsante.hb-menu-aperto .hb-menu-barre::before {
        top: 0;
        transform: rotate(45deg);
    }

    .hb-js .hb-blocco-menu.hb-menu-pc-pulsante.hb-menu-aperto .hb-menu-barre::after {
        top: 0;
        transform: rotate(-45deg);
    }

    .hb-js .hb-blocco-menu.hb-menu-pc-pulsante > .hb-voci {
        display: none;
        position: fixed;
        top: var(--hb-menu-top, 4rem);
        right: 0;
        left: auto;
        z-index: 1000;
        flex-direction: column;
        flex-wrap: nowrap;
        justify-content: flex-start;
        align-items: stretch;
        gap: 0.25rem;
        box-sizing: border-box;
        width: min(24rem, 100vw);
        max-height: calc(100vh - var(--hb-menu-alto, 4rem));
        margin: 0;
        padding: 1rem 1.75rem 1.75rem;
        overflow-y: auto;
        overscroll-behavior: contain;
        border-bottom: var(--hb-sp-bordo, 1px) solid var(--hb-t-bordo, #dcdcde);
        border-left: var(--hb-sp-bordo, 1px) solid var(--hb-t-bordo, #dcdcde);
        background: var(--hb-menu-fondo, var(--hb-t-fondo, #fff));
        text-align: left;
    }

    .hb-js .hb-blocco-menu.hb-menu-pc-pulsante.hb-menu-aperto > .hb-voci {
        display: flex;
    }

    .hb-blocco-menu.hb-menu-pc-pulsante > .hb-voci a {
        display: block;
        padding: 0.5rem 0;
    }

    .hb-blocco-menu.hb-menu-pc-pulsante .hb-sotto,
    .hb-blocco-menu.hb-menu-pc-pulsante .hb-voce:hover > .hb-sotto,
    .hb-blocco-menu.hb-menu-pc-pulsante .hb-voce:focus-within > .hb-sotto {
        display: flex;
        position: static;
        min-width: 0;
        padding: 0 0 0 1rem;
        border: 0;
        background: transparent;
    }

    .hb-blocco-menu.hb-menu-pc-pulsante .hb-sotto::before {
        display: none;
    }
}

/* Menu del sito sul telefono: un pulsante apre l'elenco, i sottomenu si aprono con il loro pulsante. */
.hb-menu-apri,
.hb-sotto-apri {
    display: none;
}

@media (max-width: 760px) {
    .hb-js .hb-blocco-menu .hb-menu-apri {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 2.75rem;
        height: 2.75rem;
        padding: 0;
        border: 1px solid currentColor;
        border-radius: 0;
        background: transparent;
        color: inherit;
        cursor: pointer;
    }

    .hb-menu-barre,
    .hb-menu-barre::before,
    .hb-menu-barre::after {
        display: block;
        width: 1.25rem;
        height: 2px;
        background: currentColor;
        border-radius: 1px;
        content: "";
    }

    .hb-menu-barre {
        position: relative;
    }

    .hb-menu-barre::before,
    .hb-menu-barre::after {
        position: absolute;
        left: 0;
    }

    .hb-menu-barre::before {
        top: -6px;
    }

    .hb-menu-barre::after {
        top: 6px;
    }

    .hb-js .hb-blocco-menu.hb-menu-aperto .hb-menu-barre {
        background: transparent;
    }

    .hb-js .hb-blocco-menu.hb-menu-aperto .hb-menu-barre::before {
        top: 0;
        transform: rotate(45deg);
    }

    .hb-js .hb-blocco-menu.hb-menu-aperto .hb-menu-barre::after {
        top: 0;
        transform: rotate(-45deg);
    }

    /* L'elenco si apre come un pannello sopra la pagina (largo quanto lo schermo, sotto il pulsante): non spinge giù il resto. */
    .hb-js .hb-blocco-menu > .hb-voci {
        display: none;
        position: fixed;
        /* Attaccato all'intestazione (menu.js): la «distanza del menu» vale per la tendina e i sottomenu del computer, non qui. */
        top: var(--hb-menu-top, 3.5rem);
        right: 0;
        left: 0;
        z-index: 1000;
        flex-direction: column;
        /* Sempre una colonna sola: con un sottomenu aperto le voci non vanno a capo in una seconda colonna, il pannello scorre. */
        flex-wrap: nowrap;
        /* Le voci partono sempre dall'alto: centrate in verticale (dal menu centrato del computer) quelle in più uscirebbero anche
           sopra, dove lo scorrimento non arriva, e «Home» sparirebbe aprendo un sottomenu. */
        justify-content: flex-start;
        align-items: stretch;
        gap: 4px;
        box-sizing: border-box;
        max-height: calc(100vh - var(--hb-menu-alto, 3.5rem));
        max-height: calc(100dvh - var(--hb-menu-alto, 3.5rem));
        margin: 0;
        padding: 0.5rem 1.5rem 1.5rem;
        overflow-y: auto;
        overscroll-behavior: contain;
        border-bottom: var(--hb-sp-bordo, 1px) solid var(--hb-t-bordo, #dcdcde);
        background: var(--hb-menu-fondo, var(--hb-t-fondo, #fff));
        box-shadow: none;
        text-align: inherit;
    }

    .hb-js .hb-blocco-menu > .hb-voci a {
        color: inherit;
        background-image: none;
    }

    .hb-js .hb-blocco-menu.hb-menu-aperto > .hb-voci {
        display: flex;
    }

    .hb-blocco-menu > .hb-voci a {
        display: flex;
        align-items: center;
        min-height: 2.75rem;
        padding: 0.5rem 0;
    }

    /* Le voci del menu aperto hanno un allineamento loro («Menu aperto sul telefono»), separato da quello del pulsante: di partenza
       a sinistra. Al centro testo e freccia del sottomenu restano vicini; a destra il testo sta accanto alla freccia. */
    .hb-blocco-menu.hb-tel-centro > .hb-voci a {
        justify-content: center;
        text-align: center;
    }

    .hb-blocco-menu.hb-tel-destra > .hb-voci a {
        justify-content: flex-end;
        text-align: right;
    }

    .hb-blocco-menu.hb-tel-centro .hb-voce {
        justify-content: center;
    }

    .hb-blocco-menu.hb-tel-centro .hb-voce > a {
        flex: 0 1 auto;
    }

    .hb-js .hb-blocco-menu.hb-tel-centro .hb-sotto,
    .hb-js .hb-blocco-menu.hb-tel-centro .hb-voce:hover > .hb-sotto,
    .hb-js .hb-blocco-menu.hb-tel-centro .hb-voce:focus-within > .hb-sotto {
        padding-left: 0;
    }

    .hb-js .hb-blocco-menu.hb-tel-destra .hb-sotto,
    .hb-js .hb-blocco-menu.hb-tel-destra .hb-voce:hover > .hb-sotto,
    .hb-js .hb-blocco-menu.hb-tel-destra .hb-voce:focus-within > .hb-sotto {
        padding-right: 12px;
        padding-left: 0;
    }

    .hb-blocco-menu.hb-sotto-sinistra .hb-sotto a {
        justify-content: flex-start;
    }

    .hb-blocco-menu.hb-sotto-centro .hb-sotto a {
        justify-content: center;
    }

    .hb-blocco-menu.hb-sotto-destra .hb-sotto a {
        justify-content: flex-end;
    }

    .hb-blocco-menu .hb-voce {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        column-gap: 0.75rem;
    }

    .hb-blocco-menu .hb-voce > a {
        flex: 1 1 0;
        min-width: 0;
    }

    .hb-js .hb-blocco-menu .hb-sotto-apri {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 2rem;
        height: 2rem;
        padding: 0;
        border: 1px solid currentColor;
        border-radius: 0;
        background: transparent;
        color: inherit;
        cursor: pointer;
    }

    .hb-sotto-apri::before {
        width: 0.5rem;
        height: 0.5rem;
        border-right: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
        transform: rotate(45deg);
        content: "";
    }

    .hb-blocco-menu .hb-voce.hb-aperta > .hb-sotto-apri::before {
        transform: rotate(-135deg);
    }

    .hb-js .hb-blocco-menu .hb-sotto,
    .hb-js .hb-blocco-menu .hb-voce:hover > .hb-sotto,
    .hb-js .hb-blocco-menu .hb-voce:focus-within > .hb-sotto {
        display: none;
        position: static;
        width: 100%;
        min-width: 0;
        padding: 0 0 0 12px;
        border: 0;
        background: transparent;
    }

    .hb-js .hb-blocco-menu .hb-voce.hb-aperta > .hb-sotto {
        display: flex;
        margin: 0 0 8px;
    }

    .hb-blocco-menu .hb-sotto::before {
        display: none;
    }

    /* «Tendina»: il pannello e' attaccato al pulsante, non a tutta larghezza */
    .hb-js .hb-blocco-menu.hb-menu-tendina {
        position: relative;
    }

    .hb-js .hb-blocco-menu.hb-menu-tendina > .hb-voci {
        position: absolute;
        top: calc(100% + var(--hb-menu-dist, 0.5rem));
        right: auto;
        left: 0;
        width: min(18rem, calc(100vw - 2rem));
        max-height: 70vh;
        padding: 0.5rem 1rem 1rem;
        border: var(--hb-sp-bordo, 1px) solid var(--hb-t-bordo, #dcdcde);
    }

    .hb-js .hb-blocco-menu.hb-menu-tendina.hb-align-destra > .hb-voci {
        right: 0;
        left: auto;
    }

    .hb-js .hb-blocco-menu.hb-menu-tendina.hb-align-centro > .hb-voci {
        right: auto;
        left: 50%;
        transform: translateX(-50%);
    }

    .hb-blocco-menu .hb-sotto a {
        padding: 6px 0;
        font-size: 0.95em;
        white-space: normal;
    }
}

/* Commenti sotto l'articolo */
.hb-commenti {
    max-width: 44rem;
    margin: 3rem auto 2rem;
}

.hb-commenti-titolo {
    margin: 0 0 1rem;
    font-size: 1.4rem;
    font-weight: 700;
}

/* Etichette (non titoli): stesso aspetto di prima. */
.hb-commenti-sottotitolo {
    margin: 1em 0;
    font-size: 1.17em;
    font-weight: 700;
}

.hb-ricerca-sez-titolo {
    margin: 0.83em 0;
    font-size: 1.5em;
    font-weight: 700;
}

.hb-commento {
    margin: 0 0 1.2rem;
    padding: 0 0 1rem;
    border-bottom: 1px solid #e6e6e6;
}

.hb-commento-testa {
    margin: 0 0 0.3rem;
}

.hb-commento-testa time {
    margin-left: 0.4rem;
    color: var(--hb-t-tenue, #4a4a4a);
    font-size: 0.85rem;
}

.hb-commento-testo {
    overflow-wrap: anywhere;
}

.hb-commento-azioni {
    margin: 0.4rem 0 0;
    font-size: 0.9rem;
}

.hb-commento-azioni a {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
}

.hb-commento-risposte {
    margin: 1rem 0 0 1rem;
    padding-left: 1rem;
    border-left: 3px solid #e6e6e6;
}

.hb-commento-risposte .hb-commento {
    margin-bottom: 0.8rem;
    padding-bottom: 0.8rem;
}

.hb-commenti .hb-modulo-esito {
    margin: 0 0 1rem;
}

.hb-commenti-modulo {
    margin: 2rem 0 0;
}

/* Campi, etichette e pulsanti sono quelli dei moduli del sito (.hb-modulo): qui solo l'altezza del testo e lo spazio sotto */
.hb-commenti-modulo textarea {
    display: block;
    min-height: 8rem;
    margin: 0 0 0.8rem;
}

.hb-commenti-annulla {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    margin-left: 0.8rem;
}

.hb-commenti-altri a,
.hb-commenti-accedi a {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
}

.hb-esca {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* «Scrivi un commento» e «Carica altri commenti»: link con il pulsante dei moduli del sito (funzionano anche senza JavaScript) */
.hb-commenti-scrivi,
.hb-commenti-altri {
    margin: 1rem 0 1.5rem;
}

/* Nei commenti i pulsanti stanno nelle loro righe: niente spazio sopra. Spento finché manca qualcosa (il motivo è scritto sotto). */
.hb-commenti .hb-modulo-invia {
    margin-top: 0;
}

.hb-commenti .hb-modulo-invia:disabled {
    cursor: not-allowed;
}

/* I link-pulsante: più forti del colore dei link del tema */
.hb-commenti a.hb-modulo-invia,
.hb-elenco-altri a.hb-modulo-invia {
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
    min-height: 2.75rem;
    color: var(--hb-t-azione-testo, #fff);
    text-decoration: none;
}

.hb-commenti a.hb-modulo-contorno,
.hb-elenco-altri a.hb-modulo-contorno {
    color: var(--hb-t-azione, #111);
}

.hb-commenti [aria-busy="true"],
.hb-elenco-altri [aria-busy="true"] {
    opacity: 0.6;
}

.hb-commento-altre {
    margin: 0.4rem 0 0;
    font-size: 0.9rem;
}

.hb-commento-altre a {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
}

/* Il modulo, aperto al clic */
.hb-commenti-box {
    margin: 1rem 0 2rem;
    padding: 1rem;
    border: var(--hb-sp-bordo, 1px) solid var(--hb-t-bordo, #e6e6e6);
}

.hb-commenti-box .hb-commenti-modulo {
    margin: 0;
}

.hb-commenti-box .hb-commenti-utente {
    margin: 0 0 0.5rem;
}

.hb-commenti-box .hb-commenti-sottotitolo {
    margin-top: 0;
}

.hb-commenti-opzione {
    font-size: 0.95rem;
}

.hb-commenti-box input[type="checkbox"] {
    accent-color: var(--hb-t-azione, #111);
}

.hb-commenti-motivo {
    min-height: 1.2em;
    margin: 0.8rem 0 0.4rem;
    color: var(--hb-t-tenue, #4a4a4a);
}

.hb-commenti-azioni-invio {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
}

.hb-commenti-azioni-invio .hb-commenti-annulla {
    margin-left: 0;
}

/* Modulo con il codice via email (iscritti): commento di chi non ha fatto l'accesso e pagine /account/ */
.hb-isc {
    margin: 0 0 1rem;
}

.hb-isc [hidden] {
    display: none;
}

.hb-isc .hb-modulo-campo,
.hb-account-modulo .hb-modulo-campo {
    margin: 0 0 1rem;
}

.hb-isc-nota {
    margin: 0.35rem 0 0;
    color: var(--hb-t-tenue, #4a4a4a);
    font-size: 0.9rem;
}

.hb-isc-riquadro {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.25rem 1rem;
    margin: 0 0 1rem;
    padding: 0.6rem 0.9rem;
    background: var(--hb-t-fondo-alt, #f4f4f1);
}

.hb-isc-riquadro p {
    margin: 0;
}

.hb-isc-link {
    min-height: 2.75rem;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-decoration: underline;
    cursor: pointer;
}

.hb-isc-codice {
    margin: 0 0 1rem;
}

.hb-isc-codice > label {
    margin-top: 0.8rem;
}

.hb-isc-riga {
    display: flex;
    gap: 0.6rem;
}

.hb-modulo .hb-isc-riga input {
    flex: 0 1 9rem;
    min-width: 0;
    letter-spacing: 0.2em;
    font-variant-numeric: tabular-nums;
}

.hb-isc-riga .hb-modulo-invia {
    flex: 0 0 auto;
}

/* Il messaggio accanto al suo campo: testo normale, si vede solo quando c'è; l'errore nel rosso dei moduli del sito */
.hb-isc-messaggio {
    margin: 0.4rem 0 0;
}

.hb-isc-messaggio:empty {
    display: none;
}

.hb-isc-messaggio.hb-isc-errore {
    color: #b3261e;
    font-weight: 600;
}

.hb-modulo [aria-invalid="true"],
.hb-modulo [aria-invalid="true"]:focus {
    border-color: #b3261e;
}

.hb-modulo input[type="checkbox"][aria-invalid="true"] {
    outline: 2px solid #b3261e;
    outline-offset: 2px;
}

.hb-account {
    box-sizing: border-box;
    max-width: 32rem;
    margin: 2rem auto 3rem;
}

.hb-account-titolo {
    margin: 0 0 1rem;
}

.hb-account-intro {
    margin: 0 0 1rem;
}

.hb-account-modulo {
    margin: 0 0 1rem;
}

.hb-account .hb-modulo-esito {
    margin: 0 0 1rem;
}

.hb-account-link {
    margin: 0.5rem 0 0;
}

.hb-account-link a {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
}

.hb-account-pericolo {
    background: #b3261e;
}

/* Chi ha fatto l'accesso, sopra il modulo del commento: «Commenti come …», Esci, Cancellami */
.hb-commenti-utente {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 1rem;
    margin: 2rem 0 0;
}

.hb-commenti-utente .hb-commenti-come {
    margin: 0;
}

.hb-commenti-esci {
    margin: 0;
}

.hb-commenti-cancellami {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
}

.hb-commenti-utente + .hb-commenti-modulo {
    margin-top: 0.5rem;
}

/* Icone dei testi: maschere (un file in assets/icone per ognuna, caricato solo se serve). Prendono il colore del testo. */
.hb-i {
    display: inline-block;
    width: 1.25em;
    height: 1.25em;
    vertical-align: -0.25em;
    background: currentColor;
    -webkit-mask: var(--hb-icona) center / contain no-repeat;
    mask: var(--hb-icona) center / contain no-repeat;
}

.hb-i-grande {
    width: 2.4em;
    height: 2.4em;
}

.hb-i-enorme {
    width: 4em;
    height: 4em;
}
.hb-i-calendario { --hb-icona: url("../icone/calendario.svg"); }
.hb-i-utente { --hb-icona: url("../icone/utente.svg"); }
.hb-i-euro { --hb-icona: url("../icone/euro.svg"); }
.hb-i-grafico { --hb-icona: url("../icone/grafico.svg"); }
.hb-i-lucchetto { --hb-icona: url("../icone/lucchetto.svg"); }
.hb-i-messaggio { --hb-icona: url("../icone/messaggio.svg"); }
.hb-i-casa { --hb-icona: url("../icone/casa.svg"); }
.hb-i-ricerca { --hb-icona: url("../icone/ricerca.svg"); }
.hb-i-stella { --hb-icona: url("../icone/stella.svg"); }
.hb-i-cuore { --hb-icona: url("../icone/cuore.svg"); }
.hb-i-spunta { --hb-icona: url("../icone/spunta.svg"); }
.hb-i-freccia { --hb-icona: url("../icone/freccia.svg"); }
.hb-i-mail { --hb-icona: url("../icone/mail.svg"); }
.hb-i-telefono { --hb-icona: url("../icone/telefono.svg"); }
.hb-i-mondo { --hb-icona: url("../icone/mondo.svg"); }
.hb-i-orologio { --hb-icona: url("../icone/orologio.svg"); }
.hb-i-fulmine { --hb-icona: url("../icone/fulmine.svg"); }
.hb-i-scudo { --hb-icona: url("../icone/scudo.svg"); }
.hb-i-ingranaggio { --hb-icona: url("../icone/ingranaggio.svg"); }
.hb-i-carrello { --hb-icona: url("../icone/carrello.svg"); }
.hb-i-razzo { --hb-icona: url("../icone/razzo.svg"); }
.hb-i-libro { --hb-icona: url("../icone/libro.svg"); }
.hb-i-posizione { --hb-icona: url("../icone/posizione.svg"); }
.hb-i-occhio { --hb-icona: url("../icone/occhio.svg"); }
.hb-i-furgone { --hb-icona: url("../icone/furgone.svg"); }
.hb-i-pacco { --hb-icona: url("../icone/pacco.svg"); }
.hb-i-regalo { --hb-icona: url("../icone/regalo.svg"); }
.hb-i-carta { --hb-icona: url("../icone/carta.svg"); }
.hb-i-etichetta { --hb-icona: url("../icone/etichetta.svg"); }
.hb-i-percentuale { --hb-icona: url("../icone/percentuale.svg"); }
.hb-i-reso { --hb-icona: url("../icone/reso.svg"); }
.hb-i-negozio { --hb-icona: url("../icone/negozio.svg"); }
.hb-i-sacchetto { --hb-icona: url("../icone/sacchetto.svg"); }
.hb-i-medaglia { --hb-icona: url("../icone/medaglia.svg"); }
.hb-i-cuffie { --hb-icona: url("../icone/cuffie.svg"); }
.hb-i-pollice { --hb-icona: url("../icone/pollice.svg"); }
.hb-i-stretta { --hb-icona: url("../icone/stretta.svg"); }
.hb-i-persone { --hb-icona: url("../icone/persone.svg"); }
.hb-i-attestato { --hb-icona: url("../icone/attestato.svg"); }
.hb-i-telecamera { --hb-icona: url("../icone/telecamera.svg"); }
.hb-i-sirena { --hb-icona: url("../icone/sirena.svg"); }
.hb-i-campanello { --hb-icona: url("../icone/campanello.svg"); }
.hb-i-sensore { --hb-icona: url("../icone/sensore.svg"); }
.hb-i-chiave { --hb-icona: url("../icone/chiave.svg"); }
.hb-i-wifi { --hb-icona: url("../icone/wifi.svg"); }
.hb-i-batteria { --hb-icona: url("../icone/batteria.svg"); }
.hb-i-smartphone { --hb-icona: url("../icone/smartphone.svg"); }
.hb-i-info { --hb-icona: url("../icone/info.svg"); }
.hb-i-attenzione { --hb-icona: url("../icone/attenzione.svg"); }
.hb-i-domanda { --hb-icona: url("../icone/domanda.svg"); }
.hb-i-documento { --hb-icona: url("../icone/documento.svg"); }
.hb-i-download { --hb-icona: url("../icone/download.svg"); }
.hb-i-video { --hb-icona: url("../icone/video.svg"); }
.hb-i-foto { --hb-icona: url("../icone/foto.svg"); }
.hb-i-nuvola { --hb-icona: url("../icone/nuvola.svg"); }
.hb-i-foglia { --hb-icona: url("../icone/foglia.svg"); }

/* Pulsanti, tabelle e fisarmoniche nei testi */
.hb-testo a.hb-pulsante,
.hb-testo a.hb-pulsante-contorno,
.hb-testo a.hb-pulsante-freccia {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    min-height: 2.75rem;
    padding: 0.5em 1.4em;
    border: 2px solid var(--hb-t-azione, #111);
    border-radius: 999px;
    background: var(--hb-t-azione, #111);
    color: var(--hb-t-azione-testo, #fff);
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
}

.hb-testo a.hb-pulsante-contorno {
    background: transparent;
    color: var(--hb-t-azione, #111);
}

.hb-testo a.hb-pulsante-freccia {
    padding-inline: 0;
    border-color: transparent;
    background: transparent;
    color: inherit;
}

.hb-testo a.hb-pulsante-freccia::after {
    content: "→";
    transition: transform 0.15s;
}

.hb-testo a.hb-pulsante-freccia:hover::after {
    transform: translateX(0.25em);
}

.hb-testo table {
    width: 100%;
    margin: 1rem 0;
    border-collapse: collapse;
    table-layout: fixed;
}

.hb-testo th,
.hb-testo td {
    padding: 0.7rem 0.9rem;
    border-bottom: var(--hb-sp-bordo, 1px) solid var(--hb-t-bordo, #e6e6e6);
    text-align: left;
    vertical-align: top;
    overflow-wrap: anywhere;
}

.hb-testo th {
    font-weight: 700;
}

.hb-testo tbody tr:nth-child(even) {
    background: rgba(127, 127, 127, 0.08);
}

/* Stili della tabella (menu «Tabella» dell'editor): Semplice = solo le linee tra le righe; Con bordi = griglia con tutti i bordi. */
.hb-testo table.hb-tabella-semplice tbody tr:nth-child(even),
.hb-testo table.hb-tabella-bordi tbody tr:nth-child(even) {
    background: none;
}

.hb-testo table.hb-tabella-bordi th,
.hb-testo table.hb-tabella-bordi td {
    border: var(--hb-sp-bordo, 1px) solid var(--hb-t-bordo, #e6e6e6);
}

/* Scelte della colonna (menu «Tabella»): classi su tutte le celle della colonna. La larghezza conta nella prima riga. */
.hb-testo th.hb-col-centro,
.hb-testo td.hb-col-centro {
    text-align: center;
}

.hb-testo th.hb-col-destra,
.hb-testo td.hb-col-destra {
    text-align: right;
}

.hb-testo .hb-col-l15 {
    width: 15%;
}

.hb-testo .hb-col-l25 {
    width: 25%;
}

.hb-testo .hb-col-l40 {
    width: 40%;
}

.hb-testo th.hb-col-tenue,
.hb-testo td.hb-col-tenue {
    background: var(--hb-t-tenue, #f3f4f6);
}

.hb-testo th.hb-col-evidenza,
.hb-testo td.hb-col-evidenza {
    background: var(--hb-t-azione, #2271b1);
    color: var(--hb-t-azione-testo, #fff);
}

.hb-testo td.hb-col-evidenza a,
.hb-testo th.hb-col-evidenza a {
    color: inherit;
}

/*
 * Tabelle sul telefono. Di partenza scorrono di lato (la pagina resta ferma): ogni colonna tiene una larghezza leggibile, le parole
 * non si spezzano e la prima colonna resta ferma. Con «A schede» (hb-tabella-schede) ogni riga è un riquadro e ogni valore ha
 * accanto il nome della sua colonna (data-etichetta, scritto dal filtro dell'HTML dall'intestazione).
 */
@media (max-width: 640px) {
    .hb-testo table:not(.hb-tabella-schede) {
        display: block;
        width: auto;
        max-width: 100%;
        overflow-x: auto;
        table-layout: auto;
        -webkit-overflow-scrolling: touch;
    }

    .hb-testo table:not(.hb-tabella-schede) th,
    .hb-testo table:not(.hb-tabella-schede) td {
        width: auto;
        min-width: 8rem;
        overflow-wrap: normal;
    }

    .hb-testo table:not(.hb-tabella-schede) th:first-child,
    .hb-testo table:not(.hb-tabella-schede) td:first-child {
        position: sticky;
        left: 0;
        z-index: 1;
    }

    .hb-testo table:not(.hb-tabella-schede) th:first-child:not(.hb-col-tenue):not(.hb-col-evidenza),
    .hb-testo table:not(.hb-tabella-schede) td:first-child:not(.hb-col-tenue):not(.hb-col-evidenza) {
        background: var(--hb-t-fondo, #fff);
    }

    .hb-testo table:not(.hb-tabella-schede):not(.hb-tabella-semplice):not(.hb-tabella-bordi) tbody tr:nth-child(even) td:first-child:not(.hb-col-tenue):not(.hb-col-evidenza) {
        background: linear-gradient(rgba(127, 127, 127, 0.08), rgba(127, 127, 127, 0.08)), var(--hb-t-fondo, #fff);
    }

    .hb-testo table.hb-tabella-schede,
    .hb-testo table.hb-tabella-schede tbody,
    .hb-testo table.hb-tabella-schede tr,
    .hb-testo table.hb-tabella-schede td {
        display: block;
        width: auto;
    }

    .hb-testo table.hb-tabella-schede thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .hb-testo table.hb-tabella-schede tr {
        margin: 0 0 1rem;
        padding: 0.3rem 0.9rem;
        border: var(--hb-sp-bordo, 1px) solid var(--hb-t-bordo, #e6e6e6);
        background: none;
    }

    .hb-testo table.hb-tabella-schede td {
        display: flex;
        justify-content: space-between;
        gap: 1rem;
        padding: 0.55rem 0;
        text-align: right;
        overflow-wrap: break-word;
    }

    .hb-testo table.hb-tabella-schede td:last-child {
        border-bottom: 0;
    }

    .hb-testo table.hb-tabella-schede td[data-etichetta]::before {
        content: attr(data-etichetta);
        flex: 0 0 45%;
        font-weight: 700;
        text-align: left;
    }

    /* La prima cella (il nome della riga) è il titolo della scheda. */
    .hb-testo table.hb-tabella-schede td:first-child {
        justify-content: flex-start;
        font-weight: 700;
        text-align: left;
    }

    .hb-testo table.hb-tabella-schede td:first-child::before {
        display: none;
    }
}

/* Domande che si aprono al clic: nel blocco Testo e nel blocco FAQ (stesso aspetto). */
.hb-testo details,
.hb-faq-voce {
    border-bottom: var(--hb-sp-bordo, 1px) solid var(--hb-t-bordo, #e6e6e6);
}

.hb-testo summary,
.hb-faq-domanda {
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 2.75rem;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}

.hb-testo summary::-webkit-details-marker,
.hb-faq-domanda::-webkit-details-marker {
    display: none;
}

.hb-testo summary::after,
summary.hb-faq-domanda::after {
    content: "+";
    font-size: 1.5em;
    line-height: 1;
}

.hb-testo details[open] > summary::after,
.hb-faq-voce[open] > .hb-faq-domanda::after {
    content: "−";
}

.hb-testo details > :not(summary),
.hb-faq-risposta {
    margin: 0 0 1rem;
}

/* Sfondi dei blocchi: immagine di fondo e strato colorato (due elementi in testa al blocco), angoli e ombra */
.hb-ha-sfondo,
.hb-blocco[class*="hb-ang-"] {
    position: relative;
    overflow: hidden;
}

.hb-ha-sfondo {
    isolation: isolate;
}

.hb-sfondo-img,
.hb-strato {
    position: absolute;
    inset: 0;
    z-index: -1;
}

/* Immagine di fondo: dimensione (copertina, contieni, affianca) e punto focale dal pannello, come variabili (hbBloccoCss).
   Sul telefono vale il punto del telefono, se scelto. «Affianca» e «Contieni» ripetuto sono uno sfondo CSS (sfondo.js mette l'immagine). */
.hb-sfondo-img {
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: var(--hb-fit, cover);
    object-position: var(--hb-fx, 50%) var(--hb-fy, 50%);
}

.hb-sfondo-motivo {
    display: block;
    background-repeat: var(--hb-bgrep, repeat);
    background-size: var(--hb-bgsize, auto);
    background-position: var(--hb-fx, 50%) var(--hb-fy, 50%);
}

@media (max-width: 640px) {
    .hb-sfondo-img {
        object-position: var(--hb-fxt, var(--hb-fx, 50%)) var(--hb-fyt, var(--hb-fy, 50%));
    }

    .hb-sfondo-motivo {
        background-position: var(--hb-fxt, var(--hb-fx, 50%)) var(--hb-fyt, var(--hb-fy, 50%));
    }
}

/* Fissa (parallasse): l'immagine resta ferma e il blocco fa da finestra. Sui touch e sul telefono resta normale. */
@media (min-width: 761px) and (hover: hover) {
    .hb-sfondo-fissa {
        clip-path: inset(0);
    }

    .hb-sfondo-fissa > .hb-sfondo-img {
        position: fixed;
    }
}

.hb-blocco:has(> .hb-strato) {
    position: relative;
    isolation: isolate;
}

.hb-ang-8 { border-radius: 8px; }
.hb-ang-16 { border-radius: 16px; }
.hb-ang-24 { border-radius: 24px; }
.hb-ang-32 { border-radius: 32px; }
.hb-ang-48 { border-radius: 48px; }

.hb-ombra-1 { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); }
.hb-ombra-2 { box-shadow: 0 6px 18px rgba(0, 0, 0, 0.14); }
.hb-ombra-3 { box-shadow: 0 16px 40px rgba(0, 0, 0, 0.22); }

/* Colori del tema oltre a fondo e testo: accento e fondo alternativo (per i pattern e le fasce di sezione) */
.hb-tema-fondo-alt { background-color: var(--hb-t-fondo-alt, transparent); }
.hb-tema-fondo-accento { background-color: var(--hb-t-accento, #2f5bea); color: var(--hb-t-azione-testo, #fff); }
.hb-tema-testo-accento { color: var(--hb-t-accento, #2f5bea); }

/* Parti di testo dei pattern: sopratitolo, testo d'apertura, numero in evidenza, distintivo */
.hb-testo p.hb-kicker {
    margin: 0 0 0.6rem;
    font-size: 0.8em;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--hb-t-accento, #2f5bea);
}

.hb-testo p.hb-lead {
    font-size: 1.25em;
    line-height: 1.5;
    opacity: 0.85;
}

.hb-testo p.hb-numero {
    margin: 0;
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.03em;
}

.hb-testo p.hb-piccolo {
    font-size: 0.85em;
    opacity: 0.75;
}

.hb-testo p.hb-distintivo {
    display: inline-block;
    margin: 0 0 1rem;
    padding: 0.25rem 0.9rem;
    border: 1px solid currentColor;
    border-radius: 999px;
    font-size: 0.8em;
    font-weight: 600;
}

.hb-testo .hb-maiuscolo { text-transform: uppercase; }

/* Rientro di paragrafi e citazioni (in rem). Senza classe la citazione resta con il rientro di partenza del browser. */
.hb-testo p.hb-rientro-0, .hb-testo blockquote.hb-rientro-0 { margin-left: 0; }
.hb-testo p.hb-rientro-1, .hb-testo blockquote.hb-rientro-1 { margin-left: 1rem; }
.hb-testo p.hb-rientro-2, .hb-testo blockquote.hb-rientro-2 { margin-left: 2rem; }
.hb-testo p.hb-rientro-3, .hb-testo blockquote.hb-rientro-3 { margin-left: 3rem; }
.hb-testo p.hb-rientro-4, .hb-testo blockquote.hb-rientro-4 { margin-left: 4rem; }
.hb-testo p.hb-rientro-6, .hb-testo blockquote.hb-rientro-6 { margin-left: 6rem; }

/* Pulsanti per sfondi colorati o scuri */
.hb-testo a.hb-pulsante-chiaro,
.hb-testo a.hb-pulsante-contorno-chiaro {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    min-height: 2.75rem;
    padding: 0.5em 1.4em;
    border: 2px solid currentColor;
    border-radius: 999px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
}

.hb-testo a.hb-pulsante-chiaro {
    border-color: #fff;
    background: #fff;
    color: #111;
}

.hb-testo a.hb-pulsante-contorno-chiaro {
    background: transparent;
    color: inherit;
}

.hb-testo p + p > a.hb-pulsante,
.hb-testo p > a.hb-pulsante + a.hb-pulsante-contorno,
.hb-testo p > a + a { margin-left: 0.6rem; }

body {
    overflow-x: clip;
}

/* Collegamento semplice per piedi e sfondi scuri: prende il colore del testo */
.hb-testo a.hb-freccia {
    color: inherit;
    text-decoration: none;
}

.hb-testo a.hb-freccia:hover {
    text-decoration: underline;
}

/* Pulsante WhatsApp del sito */
.hb-wa {
    position: fixed;
    bottom: 1.25rem;
    z-index: 900;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.hb-wa-destra {
    right: 1.25rem;
    align-items: flex-end;
}

.hb-wa-sinistra {
    left: 1.25rem;
    align-items: flex-start;
}

.hb-js .hb-wa:not(.hb-wa-pronto) {
    display: none;
}

/* La chat visibile nasconde WhatsApp, solo con la scelta accesa nelle Impostazioni del chatbot (assets/js/chatbot.js). */
.hb-wa.hb-wa-via-chat {
    display: none;
}

.hb-wa-fab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #25d366;
    color: #fff;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.hb-wa-fab:hover,
.hb-wa-fab:focus-visible {
    background: #1fb855;
}

.hb-wa-pannello {
    box-sizing: border-box;
    width: min(21rem, calc(100vw - 2.5rem));
    max-height: calc(100vh - 7rem);
    overflow-y: auto;
    border: var(--hb-sp-bordo, 1px) solid var(--hb-t-bordo, #dcdcde);
    background: var(--hb-t-fondo, #fff);
    color: var(--hb-t-testo, #1d2327);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
}

.hb-wa-pannello[hidden] {
    display: none;
}

.hb-wa-testa {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    background: #128c7e;
    color: #fff;
}

.hb-wa-marchio {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
}

.hb-wa-chiudi {
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
}

.hb-wa-corpo {
    padding: 1rem;
}

.hb-wa-bolla {
    margin: 0 0 0.5rem;
    padding: 0.6rem 0.8rem;
    background: var(--hb-t-fondo-alt, #f0f2f5);
}

.hb-wa-privacy {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin: 0.75rem 0;
    font-size: 0.85rem;
}

.hb-wa-privacy input {
    flex: 0 0 auto;
    margin-top: 0.2rem;
}

.hb-wa-operatori {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.hb-wa-op {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.75rem;
    border: var(--hb-sp-bordo, 1px) solid var(--hb-t-bordo, #dcdcde);
    color: inherit;
    text-decoration: none;
}

.hb-wa-op:hover,
.hb-wa-op:focus-visible {
    border-color: #25d366;
}

.hb-wa-op.hb-wa-bloccato {
    opacity: 0.5;
    cursor: not-allowed;
}

.hb-wa-op > .hb-wa-icona {
    flex: 0 0 auto;
    color: #25d366;
}

.hb-wa-iniziale {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: #128c7e;
    color: #fff;
    font-weight: 600;
}

.hb-wa-chi {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
}

.hb-wa-nome {
    font-weight: 600;
}

.hb-wa-ruolo {
    font-size: 0.85rem;
    opacity: 0.7;
}

/* Chat del sito (includes/chatbot.php): come il pulsante WhatsApp, con i colori del tema */
.hb-cb {
    position: fixed;
    bottom: 1.25rem;
    z-index: 900;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.hb-cb[hidden] {
    display: none;
}

.hb-cb-destra {
    right: 1.25rem;
    align-items: flex-end;
}

.hb-cb-sinistra {
    left: 1.25rem;
    align-items: flex-start;
}

/* WhatsApp e chat dalla stessa parte: una colonna sola (la chat sopra), così non si coprono; con una finestra aperta
   l'altro pulsante si nasconde finché non si chiude. */
.hb-angolo {
    position: fixed;
    bottom: 1.25rem;
    z-index: 900;
    display: flex;
    flex-direction: column-reverse;
    gap: 0.75rem;
}

.hb-angolo-destra {
    right: 1.25rem;
    align-items: flex-end;
}

.hb-angolo-sinistra {
    left: 1.25rem;
    align-items: flex-start;
}

.hb-angolo .hb-wa,
.hb-angolo .hb-cb {
    position: static;
}

.hb-angolo .hb-wa.hb-wa-aperto ~ .hb-cb,
.hb-angolo.hb-angolo-cb-aperto .hb-wa {
    display: none;
}

.hb-cb-fab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--hb-t-azione, #111);
    color: var(--hb-t-azione-testo, #fff);
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.hb-cb-pannello {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    width: min(24rem, calc(100vw - 2.5rem));
    height: min(42rem, calc(100vh - 7rem));
    height: min(42rem, calc(100dvh - 7rem));
    border: var(--hb-sp-bordo, 1px) solid var(--hb-t-bordo, #dcdcde);
    background: var(--hb-t-fondo, #fff);
    color: var(--hb-t-testo, #1d2327);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
}

.hb-cb-pannello[hidden] {
    display: none;
}

.hb-cb-testa {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.5rem 0.5rem 0.5rem 1rem;
    background: var(--hb-t-azione, #111);
    color: var(--hb-t-azione-testo, #fff);
}

.hb-cb-titolo {
    margin: 0;
    font-weight: 600;
}

.hb-cb-comandi {
    display: flex;
    flex: 0 0 auto;
}

/* Finestra a tutto schermo (pulsante accanto alla X); il pulsante della chat resta sotto, coperto. */
.hb-cb.hb-cb-grande .hb-cb-pannello {
    position: fixed;
    inset: 1rem;
    z-index: 1000;
    width: auto;
    height: auto;
}

.hb-cb-grandezza {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
}

/* Sul telefono la finestra aperta prende tutta l'area visibile: titolo in alto, messaggi che scorrono, campo in basso subito
   sopra la tastiera. Senza visualViewport vale l'altezza dinamica dello schermo (dvh, con vh per i browser vecchi); con
   visualViewport (classe hb-cb-vv) l'altezza e la posizione vere, che il JS aggiorna quando la tastiera si apre o si chiude. */
@media (max-width: 600px) {
    .hb-cb-grandezza {
        display: none;
    }

    .hb-cb.hb-cb-aperto .hb-cb-pannello {
        position: fixed;
        top: 0;
        right: 0;
        left: 0;
        z-index: 1000;
        width: auto;
        height: 100vh;
        height: 100dvh;
        border: 0;
    }

    .hb-cb.hb-cb-aperto.hb-cb-vv .hb-cb-pannello {
        top: var(--hb-cb-vv-top);
        height: var(--hb-cb-vv-alt);
    }

    html.hb-cb-blocca,
    html.hb-cb-blocca body {
        overflow: hidden;
        overscroll-behavior: none;
    }
}

.hb-cb-chiudi {
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
}

.hb-cb-messaggi {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 0.5rem;
    position: relative;
    min-height: 0;
    overflow-y: auto;
    padding: 1rem;
}

.hb-cb-bolla {
    max-width: 85%;
    margin: 0;
    padding: 0.6rem 0.8rem;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.hb-cb-bot,
.hb-cb-errore {
    align-self: flex-start;
    background: var(--hb-t-fondo-alt, #f0f2f5);
}

.hb-cb-errore {
    border-left: 3px solid var(--hb-t-accento, #b32d2e);
}

.hb-cb-visitatore {
    align-self: flex-end;
    background: var(--hb-t-azione, #111);
    color: var(--hb-t-azione-testo, #fff);
}

.hb-cb-visitatore a {
    color: inherit;
}

.hb-cb-scrive {
    font-style: italic;
}

/* «Continua su WhatsApp» sotto la risposta della chat (colori del pulsante WhatsApp scuro, testo bianco leggibile). */
.hb-cb-wa {
    display: flex;
    align-self: flex-start;
    flex-direction: column;
    gap: 0.5rem;
    max-width: 85%;
}

.hb-cb-wa-privacy {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.85rem;
}

.hb-cb-wa-privacy input {
    flex: 0 0 auto;
    width: 1.1rem;
    height: 1.1rem;
    margin: 0.1rem 0 0;
}

.hb-cb-wa-privacy a {
    color: inherit;
    text-decoration: underline;
}

.hb-cb-wa-pulsante {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    min-height: 2.75rem;
    padding: 0 1rem;
    background: #075e54;
    color: #fff;
    font-weight: 600;
    text-decoration: none;
}

.hb-cb-wa-pulsante:hover,
.hb-cb-wa-pulsante:focus-visible {
    background: #054d44;
    color: #fff;
}

.hb-cb-wa-pulsante.hb-cb-wa-bloccato {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Verifica Turnstile della chat: di solito invisibile; se Cloudflare chiede un controllo, compare qui sopra il campo. */
.hb-cb-verifica {
    flex: 0 0 auto;
    padding: 0 1rem;
}

.hb-cb-verifica:empty {
    display: none;
}

/* Consenso nella chat: casella e testo prima del campo, leggibili come il resto della finestra. */
.hb-cb-consenso {
    flex: 0 0 auto;
    padding: 0.75rem 1rem;
    border-top: var(--hb-sp-bordo, 1px) solid var(--hb-t-bordo, #dcdcde);
    font-size: 0.9rem;
}

.hb-cb-consenso[hidden] {
    display: none;
}

.hb-cb-consenso label {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    cursor: pointer;
}

.hb-cb-consenso input {
    flex: 0 0 auto;
    width: 1.25rem;
    height: 1.25rem;
    margin: 0.1rem 0 0;
}

.hb-cb-consenso a {
    color: inherit;
    text-decoration: underline;
}

.hb-cb-modulo {
    display: flex;
    flex: 0 0 auto;
    align-items: flex-end;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-top: var(--hb-sp-bordo, 1px) solid var(--hb-t-bordo, #dcdcde);
}

.hb-cb-modulo textarea {
    flex: 1 1 auto;
    box-sizing: border-box;
    min-width: 0;
    min-height: 2.75rem;
    max-height: 8rem;
    padding: 0.5rem;
    border: 1px solid #8c8f94;
    background: #fff;
    color: #1d2327;
    font: inherit;
    font-size: 16px;
    resize: vertical;
}

/* Campo sempre chiaro con testo scuro, qualunque sia il tema: anche il suggerimento si legge bene. */
.hb-cb-modulo textarea::placeholder {
    color: #3c434a;
    opacity: 1;
}

.hb-cb-invia {
    flex: 0 0 auto;
    min-height: 2.75rem;
    padding: 0 1rem;
    border: 0;
    background: var(--hb-t-azione, #111);
    color: var(--hb-t-azione-testo, #fff);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.hb-cb-invia:disabled {
    cursor: wait;
}

.hb-cb-avviso {
    flex: 0 0 auto;
    margin: 0;
    padding: 0 1rem 0.75rem;
    font-size: 0.8rem;
}

/* Blocco Pulsante: il blocco stesso e' il pulsante. Colori, bordo, angoli, spazi e misure del pannello valgono sopra questi valori di partenza */
:where(.hb-blocco-pulsante) {
    box-sizing: border-box;
    padding: 0.5em 1.4em;
    border: 2px solid transparent;
    border-radius: var(--hb-raggio-pulsanti, 999px);
    background: var(--hb-t-azione, #111);
    color: var(--hb-t-azione-testo, #fff);
    font-weight: 600;
    line-height: 1.2;
}

:where(.hb-blocco-pulsante.hb-asp-contorno) {
    background: transparent;
    color: var(--hb-t-azione, #111);
    border-color: var(--hb-t-azione, #111);
}

:where(.hb-blocco-pulsante.hb-asp-chiaro) {
    background: #fff;
    color: #111;
}

:where(.hb-blocco-pulsante.hb-asp-contorno-chiaro) {
    background: transparent;
    color: #fff;
    border-color: currentColor;
}

:where(.hb-blocco-pulsante.hb-asp-freccia) {
    padding-inline: 0;
    background: transparent;
    color: inherit;
}

.hb-blocco-pulsante.hb-forma-quadrato {
    border-radius: 0;
}

.hb-blocco-pulsante.hb-forma-soft {
    border-radius: 6px;
}

.hb-blocco-pulsante.hb-forma-tondo {
    border-radius: 14px;
}

.hb-blocco-pulsante.hb-forma-pillola {
    border-radius: 999px;
}

.hb-blocco-pulsante {
    position: relative;
    width: fit-content;
    max-width: 100%;
    align-self: flex-start;
}

.hb-blocco-pulsante.hb-align-centro {
    align-self: center;
}

.hb-blocco-pulsante.hb-align-destra {
    align-self: flex-end;
}

.hb-blocco-riga > .hb-figli > .hb-blocco-pulsante {
    flex: 0 1 auto;
    align-self: auto;
}

.hb-pulsante-el,
.hb-pulsante-testo {
    display: block;
    color: inherit;
    text-align: center;
    text-decoration: none;
    overflow-wrap: anywhere;
}

/* Il collegamento copre tutto il pulsante, anche lo spazio dentro */
a.hb-pulsante-el::before {
    position: absolute;
    inset: 0;
    content: "";
}

.hb-asp-freccia .hb-pulsante-el::after,
.hb-asp-freccia .hb-pulsante-testo::after {
    margin-left: 0.5em;
    content: "→";
    transition: transform 0.15s;
}

.hb-asp-freccia:hover .hb-pulsante-el::after {
    transform: translateX(0.25em);
}

/* Moduli (form) del sito */
.hb-modulo {
    max-width: 44rem;
}

.hb-modulo-campi {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.hb-modulo-campo {
    min-width: 0;
}

.hb-modulo-intera {
    grid-column: 1 / -1;
}

@media (max-width: 600px) {
    .hb-modulo-meta {
        grid-column: 1 / -1;
    }
}

.hb-modulo label,
.hb-modulo legend {
    display: block;
    margin: 0 0 0.35rem;
    font-weight: 600;
}

.hb-modulo input[type="text"],
.hb-modulo input[type="email"],
.hb-modulo input[type="tel"],
.hb-modulo input[type="date"],
.hb-modulo select,
.hb-modulo textarea {
    box-sizing: border-box;
    width: 100%;
    padding: 0.7rem 0.8rem;
    border: var(--hb-sp-campi, 1px) solid var(--hb-t-campi, #8c8c8c);
    border-radius: 0;
    background: var(--hb-t-fondo, #fff);
    color: var(--hb-t-testo, inherit);
    font: inherit;
}

.hb-modulo input:focus,
.hb-modulo select:focus,
.hb-modulo textarea:focus {
    border-color: var(--hb-t-testo, #1a1a1a);
    outline: none;
}

.hb-modulo fieldset {
    margin: 0;
    padding: 0;
    border: 0;
}

.hb-modulo .hb-modulo-opzione {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin: 0 0 0.35rem;
    font-weight: 400;
}

.hb-modulo .hb-modulo-opzione input {
    flex: 0 0 auto;
    margin-top: 0.3rem;
}

.hb-modulo-obbl {
    color: #b3261e;
}

.hb-modulo-verifica,
.hb-modulo-invia {
    margin-top: 1rem;
}

.hb-modulo-invia {
    padding: 0.75rem 1.6rem;
    border: 2px solid transparent;
    border-radius: var(--hb-raggio-pulsanti, 999px);
    background: var(--hb-t-azione, #111);
    color: var(--hb-t-azione-testo, #fff);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.hb-modulo-invia:disabled {
    opacity: 0.6;
    cursor: wait;
}

/* Il pulsante secondario: stessa forma, solo il contorno nel colore delle azioni */
.hb-modulo-invia.hb-modulo-contorno {
    border-color: var(--hb-t-azione, #111);
    background: transparent;
    color: var(--hb-t-azione, #111);
}

.hb-modulo-esito {
    margin: 1rem 0 0;
    padding: 0.75rem 1rem;
    border-left: 4px solid var(--hb-t-successo, #1a7f37);
    background: var(--hb-t-fondo-alt, #f4f4f1);
}

.hb-modulo-esito[hidden] {
    display: none;
}

.hb-modulo-esito.hb-modulo-errore {
    border-left-color: #b3261e;
}

.hb-modulo-segnaposto {
    padding: 1rem;
    border: 1px dashed #949494;
    background: #f6f7f7;
    color: #1e1e1e;
}

.hb-shortcode-segnaposto {
    padding: 1rem;
    border: 1px dashed #949494;
    background: #f6f7f7;
    color: #1e1e1e;
}

.hb-shortcode-segnaposto code {
    margin-left: 0.5rem;
    font-size: 0.95em;
    overflow-wrap: anywhere;
}

.hb-shortcode-segnaposto span:not(:empty) {
    display: block;
    margin-top: 0.25rem;
    color: #b32d2e;
    font-size: 0.85em;
}

.hb-modulo-segnaposto span {
    margin-left: 0.5rem;
    color: #50575e;
    font-size: 0.85em;
}

/* Blocco Negozio: nell'editor un riquadro col nome della parte (la parte vera si vede sul sito). */
.hb-negozio-segnaposto,
.hb-risultati-segnaposto {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    box-sizing: border-box;
    max-width: 100%;
    min-width: 0;
    padding: 0.3rem 0.55rem;
    border: 1px dashed #949494;
    background: #f6f7f7;
    color: #1e1e1e;
    font-size: 0.85rem;
    line-height: 1.2;
    vertical-align: middle;
}

.hb-negozio-segnaposto svg {
    flex: 0 0 auto;
    width: 1rem;
    height: 1rem;
}

.hb-negozio-segnaposto strong,
.hb-risultati-segnaposto strong {
    min-width: 0;
    overflow: hidden;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hb-risultati-segnaposto svg {
    flex: 0 0 auto;
    width: 1rem;
    height: 1rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
}

/* Mini-carrello nell'editor: solo l'icona con il numerino, come comparirà nella testata. */
.hb-negozio-mini {
    position: relative;
    padding: 0.3rem;
    border-style: dotted;
}

.hb-negozio-mini svg {
    width: 1.25rem;
    height: 1.25rem;
}

.hb-negozio-mini .hb-negozio-n {
    position: absolute;
    top: -0.35rem;
    right: -0.45rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: 1rem;
    height: 1rem;
    padding: 0 0.2rem;
    border-radius: 999px;
    background: #1e1e1e;
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 1;
}

/* Menu: orientamento verticale (piè di pagina, barre laterali) e comportamento sul telefono. */
.hb-blocco-menu.hb-menu-vert > .hb-voci {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
}

.hb-blocco-menu.hb-menu-vert.hb-align-centro > .hb-voci {
    align-items: center;
}

.hb-blocco-menu.hb-menu-vert.hb-align-destra > .hb-voci {
    align-items: flex-end;
}

.hb-blocco-menu.hb-menu-vert .hb-voce {
    display: flex;
    flex-direction: column;
    align-items: inherit;
}

/* In verticale i sottomenu stanno sempre aperti sotto la loro voce, rientrati. */
.hb-blocco-menu.hb-menu-vert .hb-sotto {
    display: flex;
    position: static;
    min-width: 0;
    padding: 0.25rem 0 0 1rem;
    border: 0;
    background: transparent;
    gap: 0.3rem;
}

.hb-blocco-menu.hb-menu-vert .hb-sotto-apri {
    display: none !important;
}

@media (max-width: 760px) {
    .hb-js .hb-blocco-menu.hb-menu-tel-sempre .hb-menu-apri,
    .hb-js .hb-blocco-menu.hb-menu-tel-mai .hb-menu-apri {
        display: none;
    }

    .hb-js .hb-blocco-menu.hb-menu-tel-sempre > .hb-voci,
    .hb-js .hb-blocco-menu.hb-menu-tel-mai > .hb-voci {
        display: flex;
        position: static;
        max-height: none;
        padding: 0;
        overflow: visible;
        border: 0;
        background: transparent;
    }

    .hb-js .hb-blocco-menu.hb-menu-tel-mai > .hb-voci {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
    }

    .hb-blocco-menu.hb-menu-tel-mai > .hb-voci a {
        min-height: 0;
        padding: 0;
    }

    .hb-js .hb-blocco-menu.hb-menu-vert > .hb-voci {
        flex-direction: column;
        align-items: flex-start;
    }

    .hb-js .hb-blocco-menu.hb-menu-vert .hb-sotto {
        display: flex;
        position: static;
        margin: 0;
    }
}

/* Blocco Dati strutturati: nell'editor un riquadro con i tipi dichiarati (sul sito esce solo lo script, invisibile). */
.hb-ld-segnaposto {
    padding: 0.8rem 1rem;
    border: 1px dashed #949494;
    background: #f6f7f7;
    color: #1e1e1e;
}

.hb-ld-segnaposto span {
    margin-left: 0.5rem;
    color: #50575e;
    font-size: 0.85em;
}

/* Contenitore con un'altezza maggiore del contenuto: dove sta il contenuto (alto di partenza, centro, basso). */
.hb-blocco.hb-v-centro,
.hb-blocco.hb-v-basso {
    display: flex;
    flex-direction: column;
}

.hb-blocco.hb-v-centro { justify-content: center; }
.hb-blocco.hb-v-basso { justify-content: flex-end; }

.hb-blocco.hb-v-centro > .hb-figli,
.hb-blocco.hb-v-basso > .hb-figli {
    width: 100%;
    flex: 0 0 auto;
}

/* Spaziatore (spazio vuoto: la sua altezza e' tutto) e Separatore (linea nel colore del testo del blocco). */
.hb-spaziatore {
    display: block;
    height: 100%;
}

.hb-blocco-separatore {
    width: 100%;
}

.hb-separatore {
    display: block;
    width: 100%;
    height: 0;
    margin: 0;
    border: 0;
    border-top: 1px solid currentColor;
    opacity: 0.35;
}

/* Un blocco con larghezza propria dentro una Riga la mantiene (di partenza i figli di una riga si dividono in parti uguali). */
.hb-blocco-riga > .hb-figli > .hb-blocco.hb-ha-misura {
    flex: 0 1 auto;
}

/* Riga che va a capo (flexWrap di WordPress): i blocchi hanno la loro larghezza naturale e, se non ci stanno, scendono sotto. */
.hb-blocco-riga.hb-riga-wrap > .hb-figli {
    flex-wrap: wrap;
}

.hb-blocco-riga.hb-riga-wrap > .hb-figli > .hb-blocco {
    flex: 1 1 auto;
}

.hb-blocco-riga.hb-riga-wrap > .hb-figli > .hb-blocco.hb-ha-misura {
    flex: 0 1 auto;
}

/* Anche in una Riga che va a capo il pulsante resta della sua misura; sul telefono vale la regola delle Righe (pieno se è da solo). */
@media (min-width: 701px) {
    .hb-blocco-riga.hb-riga-wrap > .hb-figli > .hb-blocco-pulsante {
        flex: 0 1 auto;
    }
}
/* Tabella dei cookie ([cookie_tabella]): sul telefono ogni cookie è una scheda */
.hb-ck-tabella {
    margin: 1rem 0;
}

.hb-ck-tabella table {
    width: 100%;
    border-collapse: collapse;
}

.hb-ck-tabella th,
.hb-ck-tabella td {
    padding: 0.5rem 0.625rem;
    border: var(--hb-sp-bordo, 1px) solid var(--hb-t-bordo, #d9d9d4);
    text-align: left;
    vertical-align: top;
}

.hb-ck-tabella th {
    background: var(--hb-t-fondo-alt, #f4f4f1);
}

.hb-ck-tabella code {
    overflow-wrap: anywhere;
}

@media (max-width: 639px) {
    .hb-ck-tabella thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
    }

    .hb-ck-tabella tr {
        display: block;
        margin: 0 0 0.75rem;
        border: var(--hb-sp-bordo, 1px) solid var(--hb-t-bordo, #d9d9d4);
    }

    .hb-ck-tabella td {
        display: block;
        border: 0;
        border-bottom: var(--hb-sp-bordo, 1px) solid var(--hb-t-bordo, #d9d9d4);
    }

    .hb-ck-tabella td:last-child {
        border-bottom: 0;
    }

    .hb-ck-tabella td::before {
        content: attr(data-etichetta);
        display: block;
        color: var(--hb-t-tenue, #4a4a4a);
        font-size: 0.75rem;
        font-weight: 600;
    }
}

/* Intestazione: fissa in alto, oppure «auto» (si nasconde scendendo e riappare appena si risale). Scelta in Impostazioni → Intestazione e ricerca. */
body[data-intestazione="fisso"] .hb-cornice-sopra:not(.hb-cornice-interna),
body[data-intestazione="auto"] .hb-cornice-sopra:not(.hb-cornice-interna) {
    position: sticky;
    top: 0;
    z-index: 50;
}

body.hb-con-barra[data-intestazione="fisso"] .hb-cornice-sopra:not(.hb-cornice-interna),
body.hb-con-barra[data-intestazione="auto"] .hb-cornice-sopra:not(.hb-cornice-interna) {
    top: 32px;
}

/* Un blocco dentro l'header marcato «Fisso in alto» (cornice hb-cornice-interna): la cornice scorre, intestazione.js stacca solo lui
   quando arriva in cima. Resta largo e alto come al suo posto (--hb-fisso-x, --hb-fisso-l), il fondo copre tutta la larghezza
   dello schermo senza tagliare i sottomenu che scendono sotto; al suo posto uno spazio uguale (.hb-fisso-posto), così la pagina
   non salta. */
.hb-fisso-posto {
    display: none;
}

.hb-fisso-posto.hb-fisso-posto-attivo {
    display: block;
    flex: none;
    width: var(--hb-fisso-l);
    height: var(--hb-fisso-a);
    margin: var(--hb-fisso-m, 0);
}

/* Selettore più forte di «.hb-blocco:has(> .hb-figli .hb-blocco-menu …)» (position: relative; z-index: 20, per i sottomenu): con un
   menu dentro, senza questo il blocco restava al suo posto spostato a destra (la pagina si allargava) e lo spazio si sommava. */
.hb-cornice-sopra.hb-cornice-interna .hb-blocco.hb-fisso.hb-fisso-staccato {
    position: fixed;
    top: 0;
    left: var(--hb-fisso-x);
    width: var(--hb-fisso-l);
    margin: 0;
    z-index: 50;
}

/* I blocchi dell'header che contengono il blocco staccato hanno z-index 20 (la regola dei sottomenu): senza questo il menu staccato
   varrebbe 20 per tutta la pagina, e quello che sta attaccato sotto (la barra di ricerca delle prenotazioni, 45) coprirebbe sottomenu
   e pannello del menu del telefono. */
.hb-cornice-sopra.hb-cornice-interna .hb-blocco:has(.hb-fisso-staccato) {
    z-index: 50;
}

.hb-fisso.hb-fisso-staccato::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(-1 * var(--hb-fisso-x));
    width: 100vw;
    background: var(--hb-fisso-fondo);
    z-index: -1;
}

body.hb-con-barra .hb-cornice-sopra.hb-cornice-interna .hb-blocco.hb-fisso.hb-fisso-staccato {
    top: 32px;
}

/* La velocita' si regola in Impostazioni → Intestazione e ricerca (--hb-int-t, in secondi). */
body[data-intestazione="auto"] .hb-cornice-sopra:not(.hb-cornice-interna) {
    transition: transform var(--hb-int-t, 0.45s) cubic-bezier(0.4, 0, 0.2, 1), opacity var(--hb-int-t, 0.45s) ease, visibility 0s linear 0s;
    will-change: transform, opacity;
}

/* Il blocco staccato: stessa animazione ma senza will-change, che lo renderebbe il riferimento del pannello «fisso» del menu del
   telefono (il pannello resterebbe largo come la riga invece che come lo schermo). */
body[data-intestazione="auto"] .hb-fisso.hb-fisso-staccato {
    transition: transform var(--hb-int-t, 0.45s) cubic-bezier(0.4, 0, 0.2, 1), opacity var(--hb-int-t, 0.45s) ease, visibility 0s linear 0s;
}

body[data-intestazione="auto"] .hb-fisso.hb-fisso-staccato.hb-nascosta,
body[data-intestazione="auto"] .hb-cornice-sopra.hb-nascosta {
    transform: translateY(-100%);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: transform var(--hb-int-t, 0.45s) cubic-bezier(0.4, 0, 0.2, 1), opacity var(--hb-int-t, 0.45s) ease, visibility 0s linear var(--hb-int-t, 0.45s);
}

@media (prefers-reduced-motion: reduce) {
    body[data-intestazione="auto"] .hb-cornice-sopra,
    body[data-intestazione="auto"] .hb-cornice-sopra.hb-nascosta,
    body[data-intestazione="auto"] .hb-fisso.hb-fisso-staccato {
        transition: none;
    }
}

/* Blocco «Ricerca». La lente è solo l'icona: il campo si apre sotto di lei, attaccato.
   L'allineamento del blocco decide da che parte cresce. «Campo» è il riquadro già aperto. */
.hb-blocco-ricerca {
    position: relative;
    width: auto;
}

.hb-cerca {
    display: inline-block;
    position: relative;
    text-align: left;
}

.hb-cerca-icona {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    cursor: pointer;
    list-style: none;
    color: inherit;
}

.hb-cerca-icona::-webkit-details-marker {
    display: none;
}

.hb-cerca-icona .hb-tratto {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
}

.hb-cerca-form {
    position: absolute;
    top: calc(100% + 4px);
    /* Spostamento rispetto alla lente, calcolato da menu.js perché il campo resti tutto dentro lo schermo. */
    left: var(--hb-cerca-x, 0);
    right: auto;
    z-index: 60;
    display: flex;
    gap: 6px;
    width: min(var(--hb-cerca-l, 320px), calc(100vw - 1.5rem));
    padding: 10px;
    background: #fff;
    color: #111827;
    border: var(--hb-sp-bordo, 1px) solid var(--hb-t-bordo, #e5e7eb);
    border-radius: 0;
    box-shadow: none;
}

.hb-cerca-campo {
    display: inline-flex;
    align-items: stretch;
    width: min(var(--hb-cerca-l, 320px), 100%);
    max-width: 100%;
    vertical-align: middle;
    text-align: left;
    background: #fff;
    color: #111827;
    border: var(--hb-sp-campi, 1px) solid var(--hb-t-campi, #8c8c8c);
    border-radius: 0;
}

.hb-cerca-campo input {
    flex: 1;
    min-width: 0;
    padding: 8px 10px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: inherit;
    font: inherit;
}

.hb-cerca-campo button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    border: 0;
    border-radius: 0;
    background: #111827;
    color: #fff;
    cursor: pointer;
}

.hb-cerca-campo .hb-tratto {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
}

.hb-cerca-form input {
    flex: 1;
    min-width: 0;
    padding: 8px 10px;
    border: var(--hb-sp-campi, 1px) solid var(--hb-t-campi, #8c8c8c);
    border-radius: 0;
    font: inherit;
}

.hb-cerca-form button {
    padding: 8px 12px;
    border: 0;
    border-radius: 0;
    background: #111827;
    color: #fff;
    font: inherit;
    cursor: pointer;
}

/* Blocco Risultati. I numeri arrivano dalle variabili del blocco, non da style="".
   La minima è la soglia: se la colonna diventerebbe più stretta, se ne mettono meno, fino a una. */
.hb-ris-messaggio {
    margin: 0 0 1.25rem;
    font-size: 1rem;
    line-height: 1.45;
}

.hb-ris-griglia {
    display: grid;
    gap: 1.35rem 1.25rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, max(var(--hb-ris-min, 240px), calc((100% - 1.25rem * (var(--hb-ris-colonne, 1) - 1)) / var(--hb-ris-colonne, 1)))), var(--hb-ris-max, 1fr)));
}

.hb-ris-scheda {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    width: 100%;
    max-width: var(--hb-ris-max, none);
    min-width: 0;
    color: inherit;
    text-decoration: none;
}

.hb-risultati[data-foto="sopra"] .hb-ris-scheda {
    flex-direction: column;
    gap: 0.65rem;
}

.hb-risultati[data-foto="destra"] .hb-ris-scheda {
    flex-direction: row-reverse;
}

.hb-ris-foto {
    flex: 0 0 auto;
    width: var(--hb-ris-foto, 112px);
    height: var(--hb-ris-foto, 112px);
    max-width: 46%;
    overflow: hidden;
    background: color-mix(in srgb, currentColor 8%, transparent);
}

.hb-risultati[data-foto="sopra"] .hb-ris-foto {
    width: 100%;
    max-width: none;
    height: var(--hb-ris-foto, 112px);
}

.hb-ris-foto img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.hb-ris-corpo {
    min-width: 0;
    flex: 1 1 auto;
}

.hb-ris-titolo {
    display: block;
    font-size: var(--hb-ris-titolo, 20px);
    font-weight: 500;
    letter-spacing: -0.03em;
    line-height: 1.25;
}

.hb-ris-scheda:hover .hb-ris-titolo {
    text-decoration: underline;
}

.hb-ris-testo {
    display: block;
    margin-top: 0.35rem;
    font-size: var(--hb-ris-testo, 15px);
    font-weight: 400;
    line-height: 1.45;
    color: var(--hb-t-tenue, #4a4a4a);
}

.hb-risultati .hb-paginazione {
    margin-top: 1.75rem;
}

/* Blocchi cliccabili: l'immagine è un collegamento; un contenitore ha un collegamento che lo copre, sotto i suoi link e pulsanti. */
.hb-immagine-link {
    display: block;
}

.hb-blocco:has(> .hb-blocco-link) {
    position: relative;
}

.hb-blocco-link {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.hb-blocco:has(> .hb-blocco-link) :is(a, button, input, select, textarea, summary):not(.hb-blocco-link) {
    position: relative;
    z-index: 2;
}

/* Gruppo «In riga» (come il Gruppo in modalità Riga di WordPress): i blocchi dentro stanno affiancati, ognuno con la sua larghezza; se non ci
   stanno vanno a capo. La giustificazione orizzontale è l'allineamento del Gruppo, quella verticale «Posizione del contenuto». */
.hb-blocco-gruppo.hb-g-riga > .hb-figli {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
}

.hb-blocco-gruppo.hb-g-riga > .hb-figli > .hb-blocco {
    flex: 1 1 0;
    min-width: 0;
}

.hb-blocco-gruppo.hb-g-riga > .hb-figli > .hb-blocco.hb-ha-misura,
.hb-blocco-gruppo.hb-g-riga.hb-align-centro > .hb-figli > .hb-blocco:not(.hb-blocco-colonne, .hb-blocco-colonna, .hb-blocco-gruppo, .hb-blocco-riga, .hb-blocco-header, .hb-blocco-footer, .hb-blocco-contenuto),
.hb-blocco-gruppo.hb-g-riga.hb-align-destra > .hb-figli > .hb-blocco:not(.hb-blocco-colonne, .hb-blocco-colonna, .hb-blocco-gruppo, .hb-blocco-riga, .hb-blocco-header, .hb-blocco-footer, .hb-blocco-contenuto) {
    flex: 0 1 auto;
}

.hb-blocco-gruppo.hb-g-riga.hb-align-centro > .hb-figli {
    justify-content: center;
}

.hb-blocco-gruppo.hb-g-riga.hb-align-destra > .hb-figli {
    justify-content: flex-end;
}

/* Allineamento verticale dei blocchi affiancati (Gruppo in riga, Riga, Colonne): «Posizione del contenuto» in alto (di partenza), al centro
   o in basso vale per tutti i blocchi della riga, anche quando hanno altezze diverse. */
.hb-blocco-gruppo.hb-g-riga.hb-v-centro > .hb-figli,
.hb-blocco-riga.hb-v-centro > .hb-figli,
.hb-blocco-colonne.hb-v-centro > .hb-figli {
    align-items: center;
}

.hb-blocco-gruppo.hb-g-riga.hb-v-basso > .hb-figli,
.hb-blocco-riga.hb-v-basso > .hb-figli,
.hb-blocco-colonne.hb-v-basso > .hb-figli {
    align-items: flex-end;
}

/* «Stessa altezza»: i blocchi affiancati sono alti quanto il più alto; il blocco unico di una colonna (una scheda) arriva fino in fondo. */
.hb-blocco-gruppo.hb-g-riga.hb-v-estendi > .hb-figli,
.hb-blocco-riga.hb-v-estendi > .hb-figli,
.hb-blocco-colonne.hb-v-estendi > .hb-figli {
    align-items: stretch;
}

.hb-blocco-colonne.hb-v-estendi > .hb-figli > .hb-blocco-colonna {
    display: flex;
    flex-direction: column;
}

.hb-blocco-colonne.hb-v-estendi > .hb-figli > .hb-blocco-colonna > .hb-figli {
    flex: 1 1 auto;
}

.hb-blocco-colonne.hb-v-estendi > .hb-figli > .hb-blocco-colonna > .hb-figli > section.hb-blocco:only-of-type {
    flex: 1 1 auto;
}

/* Sul telefono la Riga non si impila per forza (come la Riga di WordPress): i blocchi restano affiancati con il loro allineamento e vanno a
   capo da soli solo quando non ci stanno. I blocchi con una larghezza propria la tengono. */
@media (max-width: 700px) {
    .hb-blocco-riga > .hb-figli {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .hb-blocco-riga > .hb-figli > .hb-blocco {
        flex: 1 1 auto;
    }
}