/* ════════════════════════════════════════════════════════════════════
   FOOTER MOBILE - HIDE MACRO COLUMNS (REGOLA AD ALTA PRIORITA')
   ─────────────────────────────────────────────────────────────────────
   Spostata in cima al file (2026-05-28) per garantirne il caricamento
   anche se il browser tronca per qualche motivo le parti finali.
   Su mobile <992px le 6 column di navigazione macro (Dormire, Mangiare,
   Scopri, ...) sono ridondanti col menu hamburger e mangiano scroll.
   Il container ha classe .elm-footer-macro-wrap (aggiunta in
   Xml_Extract.cs::GeneraMenuFooterHtml).
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 991.98px) {
    .elm-footer-macro-wrap,
    .elm-footer-macro {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        overflow: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
    }
}

.form-loading {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255,255,255,0.85);
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.spinner {
    width: 48px;
    height: 48px;
    border: 4px solid #ddd;
    border-top-color: #0096c7; /* colore brand */
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.loading-text {
    margin-top: 12px;
    font-size: 14px;
    color: #333;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}



/* ═══════════════════════════════════════════════════════════════════
   FOOTER TOP - DEPRECATO 2026-05-26
   ───────────────────────────────────────────────────────────────────
   Le regole .elm-footer-top / .elm-footer-grid / .elm-fc* qui sotto
   NON vengono piu' renderizzate (rollback del FooterBuilder.cs).
   Lasciate qui in caso di future riprogettazione del footer.
   Niente impatto: i selettori non matchano nulla nella pagina attuale.
   ═══════════════════════════════════════════════════════════════════ */
.elm-footer-top {
    background: var(--ink, #18140f);
    color: #fff;
    padding: 48px 0 30px;
    /* Margin negativo per estendere full-width se il parent ha padding.
       Annullato sul mobile per non rompere il padding-x necessario. */
    margin: 0;
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.elm-footer-grid {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 28px;
}
.elm-fc {
    min-width: 0;
}
.elm-fc-title {
    font-family: var(--font-display) !important;
    font-size: 1.02rem !important;
    font-weight: 600 !important;
    color: #fff !important;
    margin: 0 0 14px !important;
    letter-spacing: .01em !important;
    line-height: 1.25 !important;
    text-transform: none !important; /* il tema Hotale ha uppercase, qui no */
}
.elm-fc-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.elm-fc-list li {
    margin: 0 0 6px !important;
    line-height: 1.4 !important;
    list-style: none !important;
    padding: 0 !important;
}
.elm-fc-list a,
.hotale-footer-wrapper .elm-fc-list a {
    color: rgba(255,255,255,.7) !important;
    text-decoration: none !important;
    font-size: .84rem !important;
    font-family: var(--font-body) !important;
    font-weight: 400 !important;
    transition: color .15s ease, padding-left .15s ease !important;
    display: inline-block !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}
.elm-fc-list a:hover,
.elm-fc-list a:focus,
.hotale-footer-wrapper .elm-fc-list a:hover,
.hotale-footer-wrapper .elm-fc-list a:focus {
    color: var(--orange, #ca6f45) !important;
    padding-left: 4px !important;
}
/* Tablet: 3 colonne */
@media (max-width: 1199.98px) {
    .elm-footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
}
/* Mobile: 2 colonne (le colonne sono brevi, leggibili affiancate) */
@media (max-width: 575.98px) {
    .elm-footer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
        padding: 0 1.2rem;
    }
    .elm-fc-title { font-size: .92rem !important; margin-bottom: 10px !important; }
    .elm-fc-list a { font-size: .8rem !important; }
    .elm-footer-top { padding: 30px 0 18px; }
}

/* ═══════════════════════════════════════════════════════════════════
   SKIP-TO-CONTENT LINK (WCAG 2.4.1 Bypass Blocks)
   ───────────────────────────────────────────────────────────────────
   Visibile SOLO quando riceve focus (tastiera Tab dal page load).
   Tecnica "clip nascosto": occupa 1x1px in alto a sinistra, niente padding,
   con clip-path che lo riduce a 0. Al :focus rimuove il clip e diventa
   un bottone evidente in alto a sinistra che salta al main content.
   z-index altissimo per battere qualunque sticky/fixed del tema.
   ═══════════════════════════════════════════════════════════════════ */
.skip-to-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
    background: var(--ink, #18140f);
    color: #fff;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    border-radius: 0 0 6px 0;
    z-index: 99999;
}
.skip-to-content:focus,
.skip-to-content:focus-visible {
    width: auto;
    height: auto;
    padding: 12px 22px;
    margin: 0;
    overflow: visible;
    clip: auto;
    clip-path: none;
    white-space: normal;
    color: #fff;
    text-decoration: underline;
    outline: 3px solid var(--orange, #ca6f45);
    outline-offset: 0;
}

.section-wrap {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 2.5rem;
}

/* ═══════════════════════════════════════════════════════════════════
   HOME INTRO EDITORIALE (#home-intro) - pattern stile altre sezioni
   ───────────────────────────────────────────────────────────────────
   Riusa .section-label / .section-title / .section-desc globali stilizzati
   per le altre sezioni del sito (dormire-header, mangiare-header, ecc.).
   Layout: padding sezione standard + container interno + body 2 paragrafi.
   ═══════════════════════════════════════════════════════════════════ */
#home-intro {
    padding: 80px 0 60px;
    background: var(--warm, #fdfaf5);
}
.home-intro-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
}
.home-layout {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 5rem;
    align-items: center;
}
.home-intro-header {
    text-align: center;
    max-width: 820px;
    margin: 0 auto 2.2rem;
}
/* SECTION-DESC: niente override per #home-intro. Si usa lo stile globale
   .section-desc (riga ~393: 0.95rem, weight 300, var(--grey)) cosi' la
   coerenza con dormire-header/mangiare-header/ecc. e' preservata.
   L'unica eccezione e' il max-width per leggibilita' editoriale del lead. */
#home-intro .section-desc {
    max-width: 460px;
    margin-top: 1rem;
}

.home-intro-body {
    max-width: 820px;
    margin: 0 auto;
}
/* HOME-INTRO-BODY: testo di APPROFONDIMENTO sotto al CTA. Deve essere
   visivamente SOTTO-ordinato al section-desc soprastante. Quindi:
   - size piu' piccolo (0.9rem vs 0.95rem del section-desc)
   - peso 300 light (uguale al section-desc ma colore meno saturo)
   - colore opacizzato (grey diluito ~70%) -> percepito come testo
     secondario / didascalia editoriale.
   Cosi' la gerarchia funziona SENZA spezzare il sistema globale. */
.home-intro-body p {
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 300;
    line-height: 1.75;
    color: var(--grey, #6b6358);
    opacity: 0.78;
    margin: 0 0 1.1rem;
}
.home-intro-body p:last-child { margin-bottom: 0; }
@media (max-width: 767.98px) {
    #home-intro { padding: 56px 0 40px; }
    .home-intro-inner { padding: 0 1.2rem; }
    .home-intro-body p { font-size: .85rem; line-height: 1.7; }
}

/* ═══════════════════════════════════════════════════════════════════
   HOME FAQ ACCORDION (#home-faq) - pattern stile altre sezioni
   ───────────────────────────────────────────────────────────────────
   Header coerente (section-label + section-title + section-desc) +
   accordion native HTML5 <details>/<summary> (zero JS, accessible).
   Emessi come JSON-LD FAQPage in code-behind per "People also ask" SERP.
   ═══════════════════════════════════════════════════════════════════ */
#home-faq {
    padding: 80px 0 80px;
    background: #fff;
}
.home-faq-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2.5rem;
}
.home-faq-header {
    text-align: center;
    max-width: 820px;
    margin: 0 auto 2.5rem;
}
    .home-faq-header .section-desc {
        margin-top: 1rem;
        margin-left: auto;
        margin-right: auto;
    }
.home-faq-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 820px;
    margin: 0 auto;
}
.home-faq-item {
    background: var(--warm, #fdfaf5);
    border: 1px solid var(--sand-md, #ece5d8);
    border-radius: 10px;
    padding: 0;
    overflow: hidden;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.home-faq-item[open] {
    border-color: var(--orange, #ca6f45);
    box-shadow: 0 4px 14px rgba(0,0,0,.05);
}
.home-faq-q {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--ink, #18140f);
    padding: 20px 60px 20px 24px;
    cursor: pointer;
    list-style: none;
    position: relative;
    line-height: 1.3;
}
.home-faq-q::-webkit-details-marker { display: none; }
.home-faq-q::after {
    content: "+";
    position: absolute;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.6rem;
    font-weight: 400;
    color: var(--orange, #ca6f45);
    transition: transform .2s ease;
    line-height: 1;
}
.home-faq-item[open] .home-faq-q::after {
    content: "−";
}
.home-faq-a {
    padding: 0 24px 20px;
    font-family: var(--font-body);
    font-size: .95rem;
    line-height: 1.7;
    color: var(--ink-md, #3a3228);
}
@media (max-width: 767.98px) {
    #home-faq { padding: 56px 0 56px; }
    .home-faq-inner { padding: 0 1.2rem; }
    .home-faq-q { font-size: 1rem; padding: 16px 48px 16px 18px; }
    .home-faq-q::after { right: 18px; font-size: 1.4rem; }
    .home-faq-a { font-size: .9rem; padding: 0 18px 16px; }
}

/* ═══════════════════════════════════════════════════════════════════
   HOME HERO H1 (.home-hero-h1)
   ───────────────────────────────────────────────────────────────────
   Sostituisce inline styles dell'H1 hero. Tipografia Lora del progetto
   (var --font-display) con responsive scale via clamp(): desktop 92px
   come prima, ma collassa su mobile per non essere illeggibile.
   ═══════════════════════════════════════════════════════════════════ */
.home-hero-h1 {
    font-family: var(--font-display) !important;
    font-size: clamp(2.4rem, 6.5vw, 5.75rem) !important; /* mobile~38px, desktop 92px */
    font-weight: 400 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    color: #fff !important;
    line-height: 1.05 !important;
    margin: 0 !important;
}
.home-hero-h1 span {
    font-weight: 600;
    font-style: italic;
}

/* ═══════════════════════════════════════════════════════════════════
   HOME HERO PADDING (.home-hero) — responsive
   ───────────────────────────────────────────────────────────────────
   Sostituisce l'inline style padding 40vh/34vh che era OK su desktop
   (full-screen feel) ma assurdo su mobile: 74vh di padding totale =
   utente vede solo titolo+search e DEVE scrollare. CLS rischio + LCP
   peggiorato (l'immagine LCP e' sotto lo scroll iniziale per chi misura
   col viewport mobile).
   - Desktop:    40vh / 34vh (invariato, hero immersivo)
   - Tablet:     28vh / 22vh (compresso ma respira)
   - Mobile:     90px / 70px (px stabili - vh balla con address bar)
   ═══════════════════════════════════════════════════════════════════ */
.home-hero {
    padding: 40vh 0 34vh 0;
}
@media (max-width: 991.98px) {
    .home-hero { padding: 28vh 0 22vh 0; }
}
@media (max-width: 767.98px) {
    .home-hero { padding: 90px 0 70px 0; }
}

/* ═══════════════════════════════════════════════════════════════════
   HOME HERO MOBILE — foto a tutto schermo + titolo centrato (13/10/2026)
   ───────────────────────────────────────────────────────────────────
   Richiesta di Andrea: su mobile l'hero era "schiacciata": titolo
   attaccato all'header, box ricerca e testo sopra la foto -> della foto
   si vedeva solo mare blu. Ora, solo sotto 768px:
   - la FOTO occupa la prima schermata (100svh - 88px) e non tutta la
     sezione: con background-size:cover su tutta la sezione (~1400px)
     l'immagine veniva ingrandita e si vedeva solo la parte alta (mare);
   - il TITOLO e' centrato in verticale nella parte di foto visibile
     (tra l'header di 56px e il bordo alto del box);
   - il BOX date/ospiti parte subito sotto, sovrapposto di 40px al bordo
     basso della foto; i 88px tolti alla foto servono a far vedere il
     campo date nella prima schermata (il box e' la CTA principale);
   - sotto la foto resta il colore di fondo della sezione (#2c2d39, gia'
     inline nel markup): la foto sfuma negli ultimi 72px per non lasciare
     uno stacco netto ai lati del box.
   100vh e' la base; dove il browser supporta svh si usa quella (svh non
   balla con la barra degli indirizzi). La versione svh sta in @supports
   perche' una variabile CSS con un'unita' sconosciuta NON ricade sulla
   riga precedente: diventa invalida e la foto sparirebbe.
   max(460px, ...) evita una foto troppo bassa su schermi corti.
   Desktop e tablet invariati.
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 767.98px) {
    .home-hero {
        --hh-foto: max(460px, calc(100vh - 88px));
        --hh-sovrapp: 40px;
        padding-top: 0;
    }
    @supports (height: 100svh) {
        .home-hero { --hh-foto: max(460px, calc(100svh - 88px)); }
    }
    .home-hero > .gdlr-core-pbf-background-wrap > .gdlr-core-pbf-background {
        height: var(--hh-foto) !important;
        -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 72px), transparent);
                mask-image: linear-gradient(to bottom, #000 calc(100% - 72px), transparent);
    }
    /* padding-bottom:45px e' inline nel markup -> serve !important.
       Padding laterale a 0 (era 20px di .gdlr-core-item-pdlr): il titolo
       prende la stessa larghezza del box sotto, cosi' il corpo piu'
       grande sta su 3 righe in italiano invece di 4-5. */
    .home-hero .gdlr-core-title-item {
        box-sizing: border-box;
        min-height: calc(var(--hh-foto) - var(--hh-sovrapp));
        padding-top: 56px;
        padding-bottom: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    /* Titolo piu' grande su mobile (13/10/2026, richiesta di Andrea: "la
       frase e' troppo piccola"). Prima 2.4rem = 38px fissi; ora segue la
       larghezza: 46px a 390, 42px a 360, 49px a 414, minimo 40px.
       Il tetto 11.8vw e' misurato: oltre, "vacanza perfetta" non sta piu'
       su una riga a 390px. text-wrap:balance pareggia le righe (niente
       parola sola in fondo); i browser che non lo supportano lo ignorano. */
    .home-hero .home-hero-h1 {
        font-size: clamp(2.5rem, 11.8vw, 3.25rem) !important;
        text-wrap: balance;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   HOME — MODULO DATE/OSPITI: raggi come il resto del sito (14/10/2026)
   ───────────────────────────────────────────────────────────────────
   Richiesta di Andrea: campi e pulsante del modulo nella hero avevano
   angoli vivi (0px, dal tema Tourmaster) dentro un box arrotondato,
   unici nel sito. Allineati ai moduli con lo stesso compito (scheda
   struttura, Preventivo vacanza, Il mio viaggio):
   - campi Date/Ospiti (.tourmaster-tail): 8px, come .elm-fld della scheda;
   - pulsante Cerca: var(--r-btn) = 8px, come gli altri pulsanti d'invio;
   - tendina Ospiti: 10px (era 15px da tourmaster-room.css), come
     .elm-guests-popup della scheda;
   - l'ombra del box sta su un div interno (style inline nel markup) che
     aveva angoli a 0 sotto il box bianco a 10px: stessi 10px. Il :has()
     con i figli diretti prende SOLO la colonna del modulo, non la colonna
     esterna del titolo che contiene anch'essa il form.
   Colori, testi e altezze invariati. Vale a tutte le larghezze.
   ═══════════════════════════════════════════════════════════════════ */
.home-hero .formSearchPreventivoVacanza .tourmaster-tail {
    border-radius: 8px;
}
.home-hero .formSearchPreventivoVacanza .tourmaster-room-search-submit {
    border-radius: var(--r-btn);
}
.home-hero .formSearchPreventivoVacanza .tourmaster-custom-amount-selection-wrap {
    border-radius: 10px;
}
.home-hero .gdlr-core-pbf-column-content-margin:has(> .gdlr-core-pbf-column-content > .gdlr-core-pbf-element > .tourmaster-room-search-item) {
    border-radius: 10px;
}

/* ═══════════════════════════════════════════════════════════════════
   SCROLL ANCHORS — offset per sticky elements (main nav + filter bar)
   ───────────────────────────────────────────────────────────────────
   Quando l'utente clicca un link interno (es. #intro-section, #main-content)
   o quando un focus arriva su un heading via tastiera, il browser scrolla
   l'elemento sotto la fold del main-nav (58px) + filter bar (~62px) se
   non diciamo nulla. scroll-margin-top sposta il punto di "atterraggio"
   piu' in basso del target di N px, lasciando spazio sopra a quei due
   elementi fissi/sticky.
   Applicato a h1/h2/h3 di pagina (target ancore SEO) e a id principali.
   Su mobile abbasso il valore perche' main-nav e' piu' corto.
   ═══════════════════════════════════════════════════════════════════ */
h1[id], h2[id], h3[id],
#main-content, #intro-section, #other-macros, #filterbar {
    scroll-margin-top: calc(130px + var(--elm-hdr-d,0px));
}
@media (max-width: 991.98px) {
    h1[id], h2[id], h3[id],
    #main-content, #intro-section, #other-macros, #filterbar {
        scroll-margin-top: calc(80px + var(--elm-hdr-d,0px));
    }
}

.section-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-body);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--orange);
    margin-bottom: 14px;
}
    .section-label::before {
        content: '';
        width: 28px;
        height: 1.5px;
        background: var(--orange);
    }


.section-title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4vw, 3.8rem);
    font-weight: 400;
    line-height: 1.1;
    color: var(--dark);
    letter-spacing: -.01em;
    margin-bottom: 1rem;
}

.section-desc {
    font-size: 0.95rem;
    font-weight: 300;
    color: var(--grey);
    line-height: 1.75;
    max-width: 540px;
}
.section-title em {
    font-style: italic;
    color: var(--gold);
}



/* ── ANIMATIONS ── */
.reveal {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity 0.7s, transform 0.7s;
}

    .reveal.visible {
        opacity: 1;
        transform: none;
    }

.reveal-delay-1 {
    transition-delay: 0.1s;
}

.reveal-delay-2 {
    transition-delay: 0.2s;
}

.reveal-delay-3 {
    transition-delay: 0.3s;
}



h1 {
    font-family: var(--font-display);
    font-size: clamp(3rem, 7vw, 6.5rem);
    font-weight: 400;
    line-height: 1.05;
    color: #fff;
    margin-bottom: 1.2rem;
    letter-spacing: -.01em;
}



.btn-outline-brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1.5px solid var(--dark);
    color: var(--dark);
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 11px 22px;
    border-radius: 3px;
    text-decoration: none;
    transition: all 0.25s;
}
    .btn-outline-brand:hover {
        background: var(--dark) !important;
        color: var(--white) !important;
    }



.btn-solid-blue {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--blue);
    color: var(--white) !important;
    border: none;
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 12px 26px;
    border-radius: 3px;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s;
}

    .btn-solid-blue:hover {
        background: #1278a8;
        transform: translateY(-1px);
        color: var(--white);
    }

.btn-solid-red {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--red);
    color: var(--white);
    border: none;
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 12px 26px;
    border-radius: 3px;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s;
}

    .btn-solid-red:hover {
        background: #c41a1f;
        transform: translateY(-1px);
        color: var(--white);
    }


.bg-cover-center {
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
}





/* ── STATS BAR ── */
.stats-bar {
    background: var(--dark);
    padding: 22px 0;
}

.stats-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 1rem;
}

.stat-item {
    text-align: center;
}

.stat-num {
    font-family: var(--font-display);
    font-size: 2.2rem;
    font-weight: 600;
    color: var(--orange);
    line-height: 1;
}

.stat-lbl {
    font-size: .75rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.55);
    margin-top: 4px;
}

/* ── SCOPRI L'ISOLA ── */
#scopri {
    padding: 100px 0;
    background: var(--offwhite);
    overflow: hidden;
}

.scopri-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
}

.scopri-layout {
    display: grid;
    grid-template-columns: 1fr 1.6fr;
    gap: 5rem;
    align-items: center;
}

.scopri-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.2rem;
}

.s-card {
    background: white;
    border-radius: 6px;
    padding: 22px;
    text-decoration: none;
    color: var(--dark);
    transition: transform 0.3s, box-shadow 0.3s;
    display: flex;
    flex-direction: column;
    gap: 8px;
    border-left: 3px solid transparent;
}

    .s-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 16px 40px rgba(0,0,0,0.1);
        border-left-color: var(--blue);
        color: var(--dark);
    }

.s-card-icon {
    font-size: 1.6rem;
    color: var(--blue);
}

.s-card-title {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 600;
}

.s-card-desc {
    font-size: 0.8rem !important;
    color: var(--grey);
    line-height: 1.6 !important;
}

/* ── DORMIRE ── */
#dormire {
    padding: 100px 0;
    overflow: hidden;
}

.dormire-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
}

.dormire-header {
    margin-bottom: 3rem;
}

.accom-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

.accom-card {
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    aspect-ratio: 3/4;
    cursor: pointer;
    text-decoration: none;
    display: block;
}

.accom-card-bg {
    position: absolute;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    inset: 0;
    transition: transform 0.5s cubic-bezier(0.22,1,0.36,1);
}

.accom-card:hover .accom-card-bg {
    transform: scale(1.06);
}

.accom-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(10,20,40,0.82) 0%, rgba(10,20,40,0.1) 60%);
}

.accom-card-body {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 22px 18px;
}

.accom-tag {
    display: inline-block;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    background: #b05a33; /* 10/10/2026 P16: var(--orange) dava bianco 3,58:1 a 12 px -> 4,82:1 */
    color: white;
    padding: 3px 10px;
    border-radius: 2px;
    margin-bottom: 8px;
}

.accom-name {
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 400;
    color: white;
    line-height: 1.2;
}

.accom-sub {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.65);
    margin-top: 4px;
}

.accom-card-bg-hotel {
    background: linear-gradient(135deg,#1a3a4a,#2d6a8a);
}

.accom-card-bg-camp {
    background: linear-gradient(135deg,#2a4a1a,#4a8a2d);
}

.accom-card-bg-apt {
    background: linear-gradient(135deg,#3a2a1a,#8a5a2d);
}

.accom-card-bg-res {
    background: linear-gradient(135deg,#1a1a3a,#2d2d8a);
}

    .accom-card-bg-hotel::after,
    .accom-card-bg-camp::after,
    .accom-card-bg-apt::after,
    .accom-card-bg-res::after {
        content: '';
        position: absolute;
        inset: 0;
        background-size: cover;
        background-position: center;
        opacity: 0.35;
    }



/* ── MANGIARE ── */
#mangiare {
    padding: 100px 0;
    background: var(--dark);
}

.mangiare-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
}

#mangiare .section-title {
    color: white;
}

#mangiare .section-desc {
    color: rgba(255,255,255,0.55);
    max-width: 460px;
}

#mangiare .section-label {
    color: var(--orange);
}

    #mangiare .section-label::before {
        background: var(--orange);
    }

.food-layout {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 5rem;
    align-items: center;
}

.food-tiles {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.food-tile {
    background: rgba(255,255,255,0.05);
    border-radius: 6px;
    padding: 22px 18px;
    border: 1px solid rgba(255,255,255,0.08);
    transition: background 0.3s, border-color 0.3s;
    text-decoration: none;
}

    .food-tile:hover {
        background: rgba(255,255,255,0.1);
        border-color: var(--orange);
    }

.food-tile-icon {
    font-size: 1.8rem;
    color: var(--orange);
    margin-bottom: 10px;
}

.food-tile-title {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 600;
    color: white;
    margin-bottom: 5px;
}

.food-tile-desc {
    font-size: 0.78rem;
    color: rgba(255,255,255,0.45);
    line-height: 1.6;
}

.food-featured {
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    aspect-ratio: 4/5;
}

.food-featured-bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg,#5a2010,#c05030);
}

.food-featured-overlay {
    position: absolute;
    inset: 0;
    /* 2026-09-23: il gradiente si spegneva al 50% e il titolo bianco finiva
       sulla parte chiara della foto. Ora scende piu' in basso e arriva piu'
       in alto: il testo ha sempre un fondo scuro sotto, qualunque sia la foto. */
    background: linear-gradient(to top,rgba(0,0,0,0.82) 0%,rgba(0,0,0,0.5) 40%,rgba(0,0,0,0.16) 70%,transparent 100%);
}

.food-featured-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 28px;
}

.food-featured-title {
    line-height:normal;
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 300;
    color: white;
}

.food-featured-sub {
    font-size: 0.8rem;
    /* era 0.65: sotto la soglia di leggibilita' che ci siamo dati (mai sotto
       0.85 sui testi chiari). */
    color: rgba(255,255,255,0.92);
    margin-top: 8px;
    line-height: 1.6;
}

/* ── SPORT ── */
#sport {
    padding: 100px 0;
}

.sport-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
}

.sport-scroll-track {
    display: flex;
    gap: 1.5rem;
    overflow-x: auto;
    padding-bottom: 10px;
    scrollbar-width: thin;
    scrollbar-color: var(--orange) #eee;
}

    .sport-scroll-track::-webkit-scrollbar {
        height: 4px;
    }

    .sport-scroll-track::-webkit-scrollbar-track {
        background: #eee;
    }

    .sport-scroll-track::-webkit-scrollbar-thumb {
        background: var(--orange);
    }

.sport-item {
    flex: 0 0 240px;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    aspect-ratio: 3/4;
    cursor: pointer;
    text-decoration: none;
    display: block;
}

.sport-item-bg {
    position: absolute;
    inset: 0;
    transition: transform 0.4s;
}

.sport-item:hover .sport-item-bg {
    transform: scale(1.05);
}

.sport-item-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,rgba(0,0,0,0.75) 0%,rgba(0,0,0,0.1) 60%);
}

.sport-item-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 18px 14px;
}

.sport-item-icon {
    font-size: 1.5rem;
    color: var(--orange);
    display: block;
    margin-bottom: 6px;
}

.sport-item-name {
    font-family: var(--font-display);
    font-size: 1.15rem;
    color: white;
    font-weight: 400;
}

.sport-item-sub {
    font-size: .75rem;
    color: rgba(255,255,255,0.6);
}

.bg-sport1 {
    background: linear-gradient(135deg,#0a3a5a,#1790c6);
}

.bg-sport2 {
    background: linear-gradient(135deg,#1a4a1a,#2d8a2d);
}

.bg-sport3 {
    background: linear-gradient(135deg,#2a1a4a,#6a2d8a);
}

.bg-sport4 {
    background: linear-gradient(135deg,#4a2a1a,#8a5a2d);
}

.bg-sport5 {
    background: linear-gradient(135deg,#0a3a3a,#1a8a8a);
}

.bg-sport6 {
    background: linear-gradient(135deg,#3a1a1a,#8a2d2d);
}

/* ── SPIAGGE ── */
#spiagge {
    padding: 100px 0;
    background: var(--offwhite);
}

.spiagge-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
}

.spiagge-layout {
    display: grid;
    grid-template-columns: 1fr 1.8fr;
    gap: 4rem;
    align-items: start;
}

.spiagge-list {
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin-top: 2rem;
}

.spiaggia-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 0;
    border-bottom: 1px solid #e0e0e0;
    text-decoration: none;
    color: var(--dark);
    transition: color 0.2s;
}

    .spiaggia-row:hover {
        color: var(--blue);
    }

        .spiaggia-row:hover .spi-num {
            color: var(--blue);
        }

.spi-left {
    display: flex;
    align-items: center;
    gap: 14px;
}

.spi-num {
    font-family: var(--font-display);
    font-size: 0.9rem;
    color: var(--orange);
    min-width: 22px;
}

.spi-info h4 {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1;
}

.spi-info span {
    font-size: .75rem;
    color: var(--grey);
}

.spi-badges {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}

.spi-badge {
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 2px 7px;
    border-radius: 2px;
}

.badge-sand {
    background: #f5e6c8;
    color: #7a5a20;
}

.badge-wind {
    background: #dff0ff;
    color: #155a8a;
}

.badge-fam {
    background: #dffadd;
    color: #1a6a1a;
}

.badge-rocks {
    background: #f0eaff;
    color: #5a2a8a;
}

.spiagge-mosaic {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 12px;
}

.mosaic-big {
    grid-row: span 2;
    border-radius: 8px;
    overflow: hidden;
    min-height: 420px;
    position: relative;
}

.mosaic-small {
    border-radius: 8px;
    overflow: hidden;
    min-height: 200px;
    position: relative;
}

.mosaic-bg {
    position: absolute;
    inset: 0;
}

/* ═══════════════════════════════════════════════════════════════════
   MOSAICO SPIAGGE - da background CSS a <img> reale (2026-08-17)
   ───────────────────────────────────────────────────────────────────
   Le 3 tessere erano div con background-image: nessun alt, nessuna
   indicizzabilita' su Google Immagini, nessun lazy loading. Ora sono
   <a> con <img> dentro. Serve object-fit per riprodurre esattamente il
   comportamento di background-size:cover che c'era prima.
   I gradienti .mosaic-bg-1/2/3 restano e fanno da placeholder colorato
   sotto l'immagine mentre carica.
   ═══════════════════════════════════════════════════════════════════ */
img.mosaic-bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

a.mosaic-big,
a.mosaic-small {
    display: block;
    text-decoration: none;
    color: inherit;
}

    a.mosaic-big:hover img.mosaic-bg,
    a.mosaic-small:hover img.mosaic-bg {
        transform: scale(1.04);
    }

img.mosaic-bg {
    transition: transform .5s ease;
}

a.mosaic-big:focus-visible,
a.mosaic-small:focus-visible {
    outline: 3px solid var(--blu, #1790c6);
    outline-offset: 3px;
}

.mosaic-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,rgba(0,0,0,0.55) 0%,transparent 50%);
}

.mosaic-label {
    position: absolute;
    bottom: 14px;
    left: 14px;
    font-family: var(--font-display);
    font-size: 1.1rem;
    color: white;
}

.mosaic-bg-1 {
    background: linear-gradient(135deg,#0a2a4a,#1790c6);
}

.mosaic-bg-2 {
    background: linear-gradient(135deg,#0a4a4a,#17c6b0);
}

.mosaic-bg-3 {
    background: linear-gradient(135deg,#2a1a0a,#c68a17);
}

/* ── TRAGHETTO ── */
#traghetto {
    padding: 100px 0;
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #0a2a4a 0%, #1790c6 100%);
}

.traghetto-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
    position: relative;
    z-index: 2;
}

.traghetto-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

#traghetto .section-label {
    color: rgba(255,255,255,0.6);
}

    #traghetto .section-label::before {
        background: rgba(255,255,255,0.6);
    }

#traghetto .section-title {
    color: white;
}

#traghetto .section-desc {
    color: rgba(255,255,255,0.65);
}

.traghetto-deco {
    position: absolute;
    right: -80px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18rem;
    color: rgba(255,255,255,0.05);
    pointer-events: none;
}

.traghetto-features {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.trag-feat {
    display: flex;
    align-items: center;
    gap: 14px;
    background: rgba(255,255,255,0.1);
    border-radius: 6px;
    padding: 16px 18px;
    border: 1px solid rgba(255,255,255,0.15);
}

.trag-feat-icon {
    font-size: 1.5rem;
    color: var(--orange);
}

.trag-feat-title {
    font-weight: 500;
    color: white;
    font-size: 0.9rem;
}

.trag-feat-sub {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.55);
}

/* ── NEWS ── */
/* 2026-08-19: il padding-top era 0, quindi la sezione news si attaccava
   al blocco #traghetto sopra. Allineato alle altre sezioni della home
   (#scopri, #dormire, #mangiare, #sport, #spiagge, #traghetto = 100px 0).
   Le regole responsive a 991.98px e 767.98px gia' portavano #news a
   70px/50px simmetrici: era rotto solo il desktop. */
#news {
    padding: 100px 0;
}

.news-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
}

.news-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 2.5rem;
}

.news-track-wrap {
    overflow: hidden;
}

.news-track {
    display: flex;
    gap: 1.5rem;
    transition: transform 0.5s cubic-bezier(0.22,1,0.36,1);
}

.news-card {
    flex: 0 0 calc(33.333% - 1rem);
    border-radius: 8px;
    overflow: hidden;
    background: var(--offwhite);
    text-decoration: none;
    color: var(--dark);
    transition: transform 0.3s;
}

    .news-card:hover {
        transform: translateY(-5px);
        color: var(--dark);
    }

.news-card-img {
    height: 240px;
    overflow: hidden;
}

.news-card-img-inner {
    height: 100%;
    transition: transform 0.4s;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
}

.news-card:hover .news-card-img-inner {
    transform: scale(1.05);
}

.news-card-body {
    padding: 20px;
}

.news-cat {
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--orange);
    margin-bottom: 8px;
}

.news-card-title {
    font-family: var(--font-display);
    font-size: 1.08rem;
    font-weight: 500;
    line-height: 1.35;
    margin-bottom: 8px;
}

.news-card-date {
    font-size: .75rem;
    color: var(--grey);
}

/* 2026-08-19: CTA della card news.
   Prima era un link nero 16px che diceva "Scopri di piu'", mentre il listing
   News-Curiosita usa .nc-go: maiuscoletto .66rem, 700, letter-spacing .1em,
   colore d'accento e freccia che scorre in hover. Due stili per la stessa
   azione. Qui replico la forma della .nc-go con il blu della home (--blue)
   invece del blu della info-page, e il testo arriva dalla stessa chiave
   news_card_leggi nelle 4 lingue. */
.news-card-go {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 10px;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--blue);
    text-decoration: none;
}

    /* la card e' dentro un <a>: senza !important il colore del link vince
       (terza volta che questo inciampo si ripresenta, vedi log CrossLink) */
    .news-card-go:link,
    .news-card-go:visited,
    .news-card-go:hover,
    .news-card-go:focus {
        color: var(--blue) !important;
        text-decoration: none;
    }

    .news-card-go i {
        transition: transform 0.2s;
    }

.news-card:hover .news-card-go i {
    transform: translateX(4px);
}

.news-nav {
    display: flex;
    gap: 8px;
}

.news-nav-btn {
    width: 38px;
    height: 38px;
    border: 1.5px solid var(--dark);
    border-radius: 50%;
    background: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    transition: all 0.2s;
    color: var(--dark);
}

    .news-nav-btn:hover {
        background: var(--dark);
        color: white;
    }















/* Range completo 

        .flatpickr-day.startRange,
        .flatpickr-day.endRange,
        .flatpickr-day.inRange {
            background-color: #FFA726;
            color: white;
        }
        */
/* Giorno di inizio: angoli arrotondati a sinistra */
.flatpickr-day.startRange {
    border-top-left-radius: 50% !important;
    border-bottom-left-radius: 50% !important;
}

/* Giorno di fine: angoli arrotondati a destra */
.flatpickr-day.endRange {
    border-top-right-radius: 50% !important;
    border-bottom-right-radius: 50% !important;
}

/* Giorni intermedi */
.flatpickr-day.inRange {
    -webkit-box-shadow: -5px 0 0 transparent, 5px 0 0 transparent;
    box-shadow: -5px 0 0 transparent, 5px 0 0 transparent;
}



.flatpickr-input {
    height: 45px;
    line-height: 45px;
}


.hotale-page-title-wrap, .hotale-blog-title-wrap {
    background-color: #004a93;
}


.form-check-input:checked {
    background-color: #efa92a;
    border-color: #efa92a;
}
.form-check-input {
    width: 1.2em;
    height: 1.2em;
    padding: 15px;
}

form label {
    font-weight: 400 !important;
}

.round-border {
    width: 100%;
    padding: .375rem .75rem;

    font-weight: 400;
    line-height: 1.5;
    border: var(--bs-border-width) solid #efa92a;
    border-radius: var(--bs-border-radius);
}
/* CTA rossa - allineata al sistema unico (guidelines.css):
   raggio --r-btn, hover INVERSO (sfondo bianco, testo+bordo rosso).
   Un solo rosso #df6834 (prima bordo/hover usavano varianti diverse). */
.btn-red {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--cta-red, #df6834);
    --bs-btn-border-color: var(--cta-red, #df6834);
    --bs-btn-hover-color: var(--cta-red, #df6834);
    --bs-btn-hover-bg: #fff;
    --bs-btn-hover-border-color: var(--cta-red, #df6834);
    --bs-btn-focus-shadow-rgb: 223, 104, 52;
    --bs-btn-active-color: var(--cta-red, #df6834);
    --bs-btn-active-bg: #fff;
    --bs-btn-active-border-color: var(--cta-red, #df6834);
    --bs-btn-active-shadow: none;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #eb968a;
    --bs-btn-disabled-border-color: #eb968a;
    --bs-btn-border-radius: var(--r-btn, 8px);
}


/* CTA footer azzurra - allineata al sistema unico (guidelines.css):
   raggio --r-btn, hover INVERSO (sfondo bianco, testo+bordo azzurro).
   Prima: hover diventava ARANCIONE (#e66a31) con transizione 1s - corretto. */
.btn-footer, .btn-footer:active, .btn-footer:visited {
    transition: background-color .25s ease, color .25s ease, border-color .25s ease;
    /* Sostituito hardcoded "DM Sans" (non caricato → fallback Arial) con
       la variabile del progetto. Usa Jost come tutto il resto del body UI. */
    font-family: var(--font-body);
    font-size: 15px;
    background-color: var(--cta-azure, #1790c6);
    padding: 10px 14px;
    color: #fff !important;
    border: 1px solid var(--cta-azure, #1790c6) !important;
    border-radius: var(--r-btn, 8px);
}

    .btn-footer:hover {
        background-color: #fff !important;
        color: var(--cta-azure, #1790c6) !important;
        border-color: var(--cta-azure, #1790c6) !important;
    }




input.is-invalid, textarea.is-invalid, select.is-invalid {
    border: 2px solid #dc3545 !important;
    background-color: #fff0f0 !important;
}
div.is-invalid {

}

.error_box_message {
    padding: 15px;
    background-color: #fff0f0 !important;
    color: #dc3545;
    display:none;
}



.flex {
    display: flex;
}
.gap-2 {
    gap: 0.5rem;
}

.items-center {
    align-items: center;
}

.cursor-pointer {
    cursor: pointer;
}

.mr-10 {
    margin-right:1em;
}
.mr-20 {
    margin-right: 2em;
}

.breadcrumb-top {
    padding: 7px 10px;
    font-size: 16px;
}

.breadcrumb > li + li:before {
    content: "\203a";
}

.breadcrumb > li + li:before {
    content: "\203a";
    padding: 0 12px;
    color: #ccc;
}
.breadcrumb > li > .active {
    font-weight: bold;
    color: #efa92a;
}


/* ══ BREADCRUMB ══ */
.breadcrumb {
    background: #fff;
    border-bottom: 1px solid var(--sand-dk)
}

.bc {
    width:100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: .6rem 2rem;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    text-align:left;
}

    .bc a, .bc span {
        font-size: .75rem;
        font-weight: 500;
        letter-spacing: .08em;
        text-transform: uppercase;
        color: var(--ink-lt);
        text-decoration: none;
        transition: color .2s
    }

        .bc a:hover {
            color: var(--orange)
        }

    .bc .sep {
        color: var(--sand-dk);
        font-size: .75rem
    }

    .bc .cur {
        color: var(--ink-md)
    }

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


.gdlr-core-column-15 {
    min-height:600px;
}



.hidden-element {
    display: none;
}

.note {
    font-size:12px;
    color:#999;
}
.note12 {
    font-size: 12px !important;
    color: #999;
}

legend {
    padding: 10px 0;
}

legend.titleBox {
    font-weight: bold;
    font-size: 22px;
    color: #5499c9;
    vertical-align: middle;
    display: flex;
    line-height: 26px;
    align-items: center;
    padding-top:50px;
}
legend i {
    display: flex;
    margin-right: 10px;
    
}

/* Utility class: applica il display font del progetto (oggi Lora) a un
   elemento singolo. Nome neutro 'font-display' = descrive il RUOLO, non
   il brand del font: se domani cambia (var --font-display), questa classe
   continua a fare la cosa giusta senza nuove rinominazioni nel markup.
   !important serve per battere le regole pre-esistenti delle classi
   hotale-widget-title (tema GoodLayers) sui titoli del footer. */
.font-display {
    font-family: var(--font-display) !important;
}


label.fullwidth {
    display:block;
    width:100%;
}

.htmlMainList {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    padding: 0;
    margin: 0 0 20px 0;
    list-style: none;
}
    .htmlMainList li {
        flex: 0 0 calc(33.333% - 20px); /* fissa la larghezza */
        max-width: calc(33.333% - 20px);
        box-sizing: border-box;
    }

    @media screen and (max-width: 768px) {
        .htmlMainList li {
            flex: 0 0 calc(50% - 20px);
            max-width: calc(50% - 20px);
        }
    }

    /* Mobile - 1 per riga */
    @media screen and (max-width: 480px) {
        .htmlMainList li {
            flex: 0 0 100%;
            max-width: 100%;
        }
    }


.hotale-header-style-boxed .hotale-header-container-item {
    padding-left:0 !important;
    padding-right:0 !important;
}


.label-checkbox {
    padding-left: 45px;
    position: relative;
}
    .label-checkbox input {
        position: absolute !important;
        left: 0 !important;
        top: 0 !important;
    }
.label-checkbox-mini {
    padding-left: 30px;
    position: relative;
}

    .label-checkbox-mini input {
        position: absolute !important;
        left: 0 !important;
        top: 5px !important;
    }


.label-privacy {
    padding-left: 45px;
    position: relative;
    padding-bottom: 20px;
}

    .label-privacy input[type='checkbox'] {
        position:absolute;
        top:0;
        left:0;
    }


    .htmlMainList label {
        font-weight: 200;
        cursor: pointer;
    }
.htmlMainList input[type='checkbox'], .fieldCheckBox {
    appearance: none; /* rimuove lo stile nativo */
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 30px;
    height: 30px;
    border: 1px solid #999;
    border-radius: 4px;
    cursor: pointer;
    position: relative;
    background-color: white;
    transition: all 0.2s ease;
    margin-right: 10px;
}

    .htmlMainList input[type='checkbox']:checked, .fieldCheckBox:checked {
        background-color: #4db8ff; /* azzurro */
        border-color: #4db8ff;
    }

        .htmlMainList input[type='checkbox']:checked::after, .fieldCheckBox:checked::after {
            content: '';
            position: absolute;
            top: 0px;
            left: 10px;
            width: 10px;
            height: 20px;
            border: solid white;
            border-width: 0 2px 2px 0;
            transform: rotate(45deg);
        }



.htmlSecondaryList {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    padding: 0;
    margin: 0;
    list-style: none;
}
    .htmlSecondaryList li {
        flex: 0 0 calc(50% - 20px); /* fissa la larghezza */
        max-width: calc(50% - 20px);
        box-sizing: border-box;
    }

    .htmlSecondaryList label {
        font-weight: 200;
        cursor: pointer;
    }



    .htmlSecondaryList input[type='checkbox'] {
        appearance: none; /* rimuove lo stile nativo */
        -webkit-appearance: none;
        -moz-appearance: none;
        width: 20px;
        height: 20px;
        border: 1px solid #999;
        border-radius: 4px;
        cursor: pointer;
        position: relative;
        background-color: white;
        transition: all 0.2s ease;
        margin-right: 10px;
    }

        .htmlSecondaryList input[type='checkbox']:checked {
            background-color: #efa92a; /* azzurro */
            border-color: #efa92a;
        }

            .htmlSecondaryList input[type='checkbox']:checked::after {
                content: '';
                position: absolute;
                top: 0px;
                left: 6px;
                width: 6px;
                height: 13px;
                border: solid white;
                border-width: 0 2px 2px 0;
                transform: rotate(45deg);
            }

.htmlFullList label {
    font-weight: 200;
    cursor: pointer;
}


label.titleList {
    font-weight: bold;
    color: #efa92a;
    width: 100% !important;
    display: flex;
    padding-top:20px;
}



.arrow_sx {
    color: #a3a3a3;
    background-color: #f4f4f4;
    padding: 18px 20px 18px 20px;
    border-radius: 15px;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    font-size: 22px;
    left: -100px !important;
}

.arrow_dx {
    color: #a3a3a3;
    background-color: #f4f4f4;
    padding: 18px 20px 18px 20px;
    border-radius: 15px;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    font-size: 22px;
    right: -100px !important;
}

.button_type_red {
    display: inline-block;
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
    color: #ffffff;
    padding: 14px 33px 14px 33px;
    text-transform: none;
    border-radius: 0px;
    -moz-border-radius: 0px;
    -webkit-border-radius: 0px;
    background: #e66a31 !important;
    color: #fff !important;
    transition: background 300ms, color 300ms, border-color 300ms, padding 200ms;
    -moz-transition: background 300ms, color 300ms, border-color 300ms, padding 200ms;
    -o-transition: background 300ms, color 300ms, border-color 300ms, padding 200ms;
    -webkit-transition: background 300ms, color 300ms, border-color 300ms, padding 200ms;
}

    .button_type_red:hover {
        background: #313131 !important;
        color: #fff !important;
    }


    .button_type_red i {
        margin-top: -3px;
        margin-right: 3px;
    }

.button_type_white {
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
    letter-spacing: 0px;
    color: #2c2d39 !important;
    padding: 14px 36px 14px 36px;
    text-transform: none;
    border-radius: 0px;
    -moz-border-radius: 0px;
    -webkit-border-radius: 0px;
    background: #ffffff !important;
    transition: background 300ms, color 300ms, border-color 300ms, padding 200ms;
    -moz-transition: background 300ms, color 300ms, border-color 300ms, padding 200ms;
    -o-transition: background 300ms, color 300ms, border-color 300ms, padding 200ms;
    -webkit-transition: background 300ms, color 300ms, border-color 300ms, padding 200ms;
}

    .button_type_white:hover {
        color: #fff !important;
        background: #2c2d39 !important;
    }

    .button_type_white i {
        margin-top: -3px;
        margin-right: 3px;
    }

.button_light {
    font-size: 13px;
    font-style: normal;
    font-weight: 600;
    letter-spacing: 4px !important;
    color: #000000 !important;
    padding: 15px 0px 10px 0px !important;
    text-transform: uppercase;
    border-radius: 0px !important;
    -moz-border-radius: 0px !important;
    -webkit-border-radius: 0px !important;
    border-width: 0px 0px 1px 0px !important;
    border-color: #dadada !important;
    transition: background 300ms, color 300ms, border-color 300ms, padding 200ms;
    -moz-transition: background 300ms, color 300ms, border-color 300ms, padding 200ms;
    -o-transition: background 300ms, color 300ms, border-color 300ms, padding 200ms;
    -webkit-transition: background 300ms, color 300ms, border-color 300ms, padding 200ms;
}

    .button_light:hover {
        color: #e66a31 !important;
        border-color: #dadada !important;
    }



.container_padding_border {
    box-shadow: 24px 24px 48px rgba(10, 10, 10, 0.05);
    -moz-box-shadow: 24px 24px 48px rgba(10, 10, 10, 0.05);
    -webkit-box-shadow: 24px 24px 48px rgba(10, 10, 10, 0.05);
    margin: 0px 0px 0px 20px;
    padding: 40px 40px 10px 40px;
    border-radius: 0px 0px 0px 0px;
    -moz-border-radius: 0px 0px 0px 0px;
    -webkit-border-radius: 0px 0px 0px 0px;
}

.gdlr-core-column-first .container_padding_border {
    margin: 0px 0px 0px 0px;
}

.border_absolute {
    background-color: #ffffff;
    border-radius: 0px 0px 0px 0px;
    -moz-border-radius: 0px 0px 0px 0px;
    -webkit-border-radius: 0px 0px 0px 0px;
    border-width: 1px 1px 1px 1px;
    border-color: #eaeaea;
    border-style: solid;
}



.hotale-page-title-wrap {
    background-image: url();
}



ul.noPoint {
    list-style: none;
    margin-left: 0;
}
ul.noPoint li {
    padding-bottom:10px;
}

ul.noPoint li a {
    color: #e66a31;
}

    ul.noPoint li a:hover {
        color: #1790c6;
    }

    ul.noPoint li a:before {
        content: "\203a";
        padding: 0 10px;
        font-size: 22px;
        line-height: 12px;
    }

.variantBig {
    font-size: 60px !important;
    font-weight: 400 !important;
    letter-spacing: 0px !important;
    text-transform: none !important;
    color: #ffffff !important;
}




footer input[type='checkbox'], .fieldCheckBox {
    appearance: none; /* rimuove lo stile nativo */
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 18px;
    height: 18px;
    border: 1px solid #999;
    border-radius: 4px;
    cursor: pointer;
    position: relative;
    background-color: white;
    transition: all 0.2s ease;
    margin-right: 8px;
    top: 6px !important;
    left: 0;
}

    footer input[type='checkbox']:checked, .fieldCheckBox:checked {
        background-color: #e66a31;
        border-color: #e76123;
    }

        footer input[type='checkbox']:checked::after, .fieldCheckBox:checked::after {
            content: '';
            position: absolute;
            top: 0px;
            left: 6px;
            width: 6px;
            height: 12px;
            border: solid white;
            border-width: 0 2px 2px 0;
            transform: rotate(45deg);
        }

footer .label-privacy {
    padding-left: 27px;
    position: relative;
    padding-bottom: 20px;
    font-size: 12px;
    line-height: 18px !important;
}

footer .tnp-field-button {
    color: #e66a31;
}

footer .hotale-footer-wrapper .hotale-widget-title {
    line-height: 24px;
    margin-bottom: 3px;
}

footer ul.gdlr-core-custom-menu-widget.gdlr-core-menu-style-full {
    margin-left: 0px;
    list-style: none;
}

.newsletter-message {
    padding: 10px 15px;
    color: #1bbae1;
    display: none;
    border: none !important;
    border-radius: 0.375rem;
}
    .newsletter-message.is-valid {
        color: #27ae60;
    }
    .newsletter-message.is-invalid {
        color: #e74c3c;
    }

    @keyframes fa-spin {
        0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(359deg);
    }
}

.gdlr-core-with-fa-send-o-button .tnp-field-button.loading:after {
    font-family: FontAwesome;
    content: "\f110" !important; /* fa-spinner */
    animation: fa-spin 1s infinite linear;
}

.gdlr-core-with-fa-send-o-button .tnp-field-button.is-valid:after {
    font-family: FontAwesome;
    content: "\f00c" !important; /* fa-check */
    color: #27ae60 !important;
}


/* ══════════════════════════════════
       PAGE HERO – compatto, non fullscreen
    ══════════════════════════════════ */
#page-hero {
    position: relative;
    min-height: 80vh;
    padding-top: 240px;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
}

.ph-bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(155deg,#0d3350 0%,#1058a0 50%,#1790c6 100%);
    /* quando c'è una foto reale: background:url('hero-dormire.jpg') center/cover; */
}

    .ph-bg::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(to top,rgba(4,14,36,.82) 0%,rgba(4,14,36,.28) 60%,rgba(4,14,36,.1) 100%);
    }
/* pattern decorativo */
.ph-pattern {
    position: absolute;
    inset: 0;
    opacity: .06;
    background-image: radial-gradient(circle, #fff 1px, transparent 1px);
    background-size: 32px 32px;
}

.ph-inner {
    position: relative;
    z-index: 2;
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
    padding: 0 2rem 3rem;
}
/* ══════════════════════════════════
   HERO SU MOBILE - 2026-09-23
   Fino a oggi #page-hero non aveva NESSUNA regola responsive: su telefono
   restavano il min-height:80vh e il padding-top:240px pensati per il
   desktop, dove l'header trasparente occupa molto spazio. Misurato a
   390x844 su 143 pagine: hero mediano 675px e primo contenuto a y 807,
   cioe' sotto la piega praticamente ovunque; sulle categorie 774 e 847.
   Su mobile l'header fisso e' alto 53px, quindi 240px di padding sono
   quasi tutti aria.
   Qui si toglie il min-height e si riducono i padding: la grafica non
   cambia, cambia solo quanto spazio occupa. Non si tocca l'header, che
   e' congelato.
   ══════════════════════════════════ */
@media (max-width: 991.98px) {
    #page-hero {
        min-height: 0;
        padding-top: 96px;
    }
    .ph-inner {
        padding-bottom: 2rem;
    }
    .ph-stats {
        gap: 1.2rem 1.9rem;
        margin-top: 1.4rem;
    }
}

@media (max-width: 575.98px) {
    #page-hero {
        padding-top: 110px; /* 2026-10-08: piu' respiro tra header e breadcrumb (era 84px) */
    }
    .ph-inner {
        padding-left: 1rem;
        padding-right: 1rem;
        padding-bottom: 1.6rem;
    }
    .ph-h1 {
        font-size: clamp(1.75rem, 7.6vw, 2.3rem);
    }
}

/* breadcrumb - STANDARD UNICO (2026-09-22)
   Briciole di pane sugli hero scuri di tutte le pagine.
   - leggibile: 12.5px, peso 600, bianco pieno sulla voce corrente
   - contrasto: link 85% + ombra testo per foto chiare
   - niente spezzature: ogni voce resta intera (nowrap), se non ci sta
     la riga va a capo TRA le voci (flex-wrap); solo l'ultima voce, se
     lunghissima, puo' andare a capo ma solo tra parole intere. */
.breadcrumb-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 8px;
    row-gap: 2px;
    margin-bottom: 1rem;
    max-width: 100%;
}

    .breadcrumb-nav a, .breadcrumb-nav span {
        flex: 0 0 auto;
        white-space: nowrap;
        /* voce intermedia piu' lunga della riga (es. nome struttura nelle
           promo): resta su una riga e si accorcia con i puntini */
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: .78rem;
        line-height: 1.35;
        font-weight: 600;
        letter-spacing: .06em;
        text-transform: uppercase;
        color: rgba(255,255,255,.86);
        text-decoration: none;
        text-shadow: 0 1px 3px rgba(0,0,0,.45);
        transition: color .2s;
    }

    /* area di tocco piu' alta senza spostare il layout */
    .breadcrumb-nav a {
        padding: 6px 0;
        margin: -6px 0;
    }

        .breadcrumb-nav a:hover, .breadcrumb-nav a:focus-visible {
            color: var(--orange);
            text-decoration: underline;
            text-underline-offset: 3px;
        }

    .breadcrumb-nav .sep {
        color: rgba(255,255,255,.6);
        font-size: .78rem;
        font-weight: 400;
        letter-spacing: 0;
    }

    .breadcrumb-nav .current {
        color: #fff;
    }

    /* ultima voce: puo' andare a capo solo tra parole, mai a meta' parola */
    .breadcrumb-nav > :last-child {
        flex: 0 1 auto;
        min-width: 0;
        white-space: normal;
        word-break: normal;
        overflow-wrap: normal;
        hyphens: none;
    }

@media (max-width: 575.98px) {
    .breadcrumb-nav {
        column-gap: 6px;
    }

        .breadcrumb-nav a, .breadcrumb-nav span {
            letter-spacing: .04em;
        }
}
/* titolo */
.ph-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-display);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--orange);
    border: 1px solid rgba(202,111,69,.4);
    padding: 4px 14px;
    border-radius: 20px;
    margin-bottom: .8rem;
    background: rgba(202,111,69,.1);
}

.ph-h1 {
    font-family: var(--font-display);
    font-size: clamp(2.4rem,5.5vw,4.2rem);
    font-weight: 300;
    color: #fff;
    line-height: 1.05;
    margin-bottom: .6rem;
}

    .ph-h1 em {
        font-style: italic;
        color: #87d8f8
    }

    /* 2026-09-13 - SOTTOTITOLO dell'H1 (markup: Nome + <br> + <em>Sottotitolo</em>).
       PRIMA: l'em non dichiarava font-size, quindi ereditava quella di .ph-h1
       (38,4px su mobile, identica al nome): l'H1 occupava 5 righe / 202px a 375px
       e il sottotitolo competeva col nome invece di sostenerlo.
       ORA il sottotitolo e' un deck: dimensione propria, interlinea leggibile,
       stacco dal nome. MISURATO a 375px: H1 da 202px a 94px, sottotitolo su 2 righe.
       Rapporto nome/deck 2,2x su desktop, 2,2x su mobile.
       - `br + em` VOLUTO: colpisce SOLO l'em che segue il <br>, cioe' il sottotitolo.
         NON generalizzare a `.ph-h1 em`: Promuovi-Attivita.aspx usa un <em> IN MEZZO
         alla frase del titolo ("ai <em>turisti dell'Elba</em>") e verrebbe
         rimpicciolito a meta' headline.
       - `inline-block` VOLUTO: il <br> resta nel markup, con display:block si
         aggiungerebbe una riga vuota.
       - CURVA (rivista 2026-09-14). Il primo tentativo era clamp(1.1rem,4.1vw,1.9rem):
         sbagliato, perche' con un solo termine vw il pavimento e il tetto si mangiano
         tutta la scala utile. Incroci di quella curva: sotto 429px comandava il
         pavimento (17,6px fisso su TUTTI i telefoni) e sopra 741px il tetto (30,4px
         fisso su TUTTI i desktop) -> piatto proprio dove serve variare, e troppo
         piccolo a entrambi gli estremi (a 360px il deck era 17,6px contro i 16px del
         paragrafo .ph-sub sotto: rapporto 1,1x, nessuna gerarchia).
         ORA base fissa + quota fluida: 1rem + 1.9vw, pavimento 1.25rem, tetto 2.5rem.
         MISURATO: 360px -> 22,8px (H1 137px, 34/41 sottotitoli su 3 righe);
         753px -> 30,6px (identico a prima, H1 131px); 1425px -> 40px (tetto,
         tutti e 41 su UNA riga, H1 143px contro 141px). Sul desktop e' guadagno
         a costo zero: fino a 2.5rem nessun sottotitolo va a capo.
         NON alzare oltre 2.5rem: a 2.75rem/44px quattro sottotitoli vanno a 2 righe
         e l'H1 desktop salta a 192px. */
    .ph-h1 br + em {
        display: inline-block;
        font-size: clamp(1.25rem, 1rem + 1.9vw, 2.5rem);
        line-height: 1.3;
        margin-top: .45rem;
    }

.ph-sub {
    font-size: .92rem;
    font-weight: 300;
    color: rgba(255,255,255,.65);
    max-width: 520px;
    line-height: 1.75;
}
/* stats inside hero */
.ph-stats {
    display: flex;
    gap: 2.5rem;
    margin-top: 2rem;
    flex-wrap: wrap;
}

.ph-stat {
}

.ph-stat-n {
    font-family: var(--font-display);
    font-size: 1.7rem;
    font-weight: 600;
    color: var(--orange);
    line-height: 1
}

.ph-stat-l {
    font-size: .75rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(255,255,255,.42);
    margin-top: 2px
}

/* ══════════════════════════════════
       TOPIC NAV (barra ancore sticky) - componente macro globale.
       Usata da Dormire/Mangiare/Info-News; Scopri/Sport hanno override
       scoped (.scopri-page/.sport-page #topicnav) per il colore accento.
    ══════════════════════════════════ */
#topicnav {
    position: sticky;
    top: calc(58px + var(--elm-hdr-d,0px));
    z-index: 850;
    background: #fff;
    border-bottom: 1px solid #e8e8e8;
    box-shadow: 0 2px 16px rgba(0,0,0,.06);
}
#topicnav .tn-in {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
    display: flex;
    align-items: center;
    overflow-x: auto;
    scrollbar-width: none;
}
#topicnav .tn-in::-webkit-scrollbar { display: none; }
#topicnav .tn-tab {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--font-body);
    font-size: .75rem;
    font-weight: 500;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #676767;
    text-decoration: none;
    padding: 1rem .9rem;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    transition: color .2s,border-color .2s;
    flex-shrink: 0;
}
#topicnav .tn-tab:hover { color: #1a1a2e; }
#topicnav .tn-tab.active { color: var(--orange); border-bottom-color: var(--orange); font-weight: 600; }
#topicnav .tn-tab i { font-size: .95rem; }
@media (max-width:600px){ #topicnav .tn-in { padding: 0 1rem; } }

/* FIX 2026-10-09 - #topicnav su mobile (richiesta di Andrea): barra sticky
   SUBITO sotto l'header mobile (53px, fisso, non si nasconde) e le tab
   diventano un'unica voce a destra con pannello delle sezioni
   (App_Script/elm-topicnav-dropdown.js, caricato dal MasterPage).
   Stessa resa del dropdown categorie delle pagine lista (.cat-dd-*):
   pulsante come la tab attiva + freccia, voci da 48px.
   Il JS marca #topicnav[data-tnd="1"]: senza JS le tab scorrono come prima.
   --tnd-c / --tnd-b = colore testo / riga del tab attivo di quella pagina
   (li legge il JS: ogni pagina ha il suo accento).
   top con !important: Scopri e Sport hanno #topicnav{top:58px} scoped nella pagina.
   Le regole .tnd-* sono scritte su [data-tnd="1"]: le usa anche la mini-nav delle
   schede attivita' (.elm-mininav), che in scheda-dettaglio.css aggiunge solo
   impaginazione e caratteri propri. */
.tnd-btn, .tnd-panel { display: none; }
@media (max-width:991.98px) {
    #topicnav { top: 53px !important; }
    #topicnav[data-tnd="1"] .tn-in {
        justify-content: flex-end;
        overflow: visible;
        padding: 0 .8rem;
        gap: 0;
    }
    #topicnav[data-tnd="1"] .tn-in > a.tn-tab { display: none !important; }
    /* 10/10/2026 - barra dei 7 comuni #cnav (hub Paesi e Comuni e le 7 pagine comune,
       richiesta di Andrea): stesso aggancio sotto l'header mobile e stessa voce unica.
       !important su top e overflow: le pagine hanno #cnav{top:58px;overflow-x:auto}. */
    #cnav { top: 53px !important; }
    #cnav[data-tnd="1"] { overflow: visible !important; }
    #cnav[data-tnd="1"] .cn-in {
        justify-content: flex-end;
        padding: 0 .8rem;
        gap: 0;
    }
    #cnav[data-tnd="1"] .cn-in > a.cn-tab { display: none !important; }
    /* 14/10/2026 - barra scura #vnav delle pagine categoria Mangiare (Vini, Ricette,
       Aziende agricole, Erbe) e di Muoversi (richiesta di Andrea): stessa voce unica.
       !important su top e overflow: le pagine hanno #vnav{top:56px/58px;overflow-x:auto}
       scoped (.vini-page #vnav ...), piu' specifiche di questa regola. */
    #vnav { top: 53px !important; }
    #vnav[data-tnd="1"] { overflow: visible !important; }
    #vnav[data-tnd="1"] .vn-in {
        justify-content: flex-end;
        padding: 0 .8rem;
        gap: 0;
    }
    #vnav[data-tnd="1"] .vn-in > a.vn-a { display: none !important; }
    [data-tnd="1"] .tnd-btn {
        display: flex;
        align-items: center;
        gap: 7px;
        max-width: 100%;
        box-sizing: border-box;
        height: 48px;      /* fissa: le bi-* hanno line-height da font e farebbero saltare la barra di 4px */
        padding: 0 .2rem 0 .9rem;
        font-family: var(--font-body);
        font-size: .75rem;
        font-weight: 600;
        letter-spacing: .06em;
        text-transform: uppercase;
        color: var(--tnd-c, var(--orange));
        background: none;
        border: 0;
        border-bottom: 2px solid var(--tnd-b, var(--orange));
        border-radius: 0;
        white-space: nowrap;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        transition: transform .15s cubic-bezier(.16,1,.3,1);
    }
    [data-tnd="1"] .tnd-btn:active { transform: translateY(1px); }
    [data-tnd="1"] .tnd-btn:focus-visible { outline: 2px solid var(--tnd-b, var(--orange)); outline-offset: 2px; }
    [data-tnd="1"] .tnd-cur {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    [data-tnd="1"] .tnd-cur i { font-size: .95rem; line-height: 1; flex-shrink: 0; }
    [data-tnd="1"] .tnd-chev { font-size: .8rem; margin-left: 2px; transition: transform .25s cubic-bezier(.16,1,.3,1); }
    [data-tnd="1"].tnd-open .tnd-chev { transform: rotate(180deg); }
    [data-tnd="1"] .tnd-panel {
        display: block;
        position: fixed;   /* la .tn-in ha overflow: un absolute verrebbe tagliato. top/right/max-height dal JS */
        top: 110px;
        right: .8rem;
        z-index: 849;      /* sotto la barra (850): l'ombra della barra resta sopra il pannello */
        width: max-content;
        min-width: 240px;
        max-width: calc(100vw - 1.6rem);
        background: #fff;
        border: 1px solid #ececec;
        border-top: 0;
        border-radius: 0 0 14px 14px;
        box-shadow: 0 14px 24px rgba(26,26,46,.14);
        padding: .25rem 1rem .5rem;
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-width: thin;
        scrollbar-color: #d9d4ca transparent;
    }
    [data-tnd="1"] .tnd-panel::-webkit-scrollbar { width: 4px; }
    [data-tnd="1"] .tnd-panel::-webkit-scrollbar-thumb { background: #d9d4ca; border-radius: 4px; }
    [data-tnd="1"] .tnd-panel[hidden] { display: none; }
    [data-tnd="1"] .tnd-item {
        display: flex;
        align-items: center;
        gap: 10px;
        min-height: 48px;
        font-family: var(--font-body);
        font-size: .9rem;
        color: var(--dark);
        text-decoration: none;
        border-bottom: 1px solid #f0f0f0;
    }
    [data-tnd="1"] .tnd-item:last-child { border-bottom: 0; }
    [data-tnd="1"] .tnd-item i { font-size: 1rem; line-height: 1; color: var(--grey); width: 1.1rem; flex-shrink: 0; }
    [data-tnd="1"] .tnd-item.active { color: var(--tnd-c, var(--orange)); font-weight: 600; }
    [data-tnd="1"] .tnd-item.active i { color: var(--tnd-b, var(--orange)); }
    [data-tnd="1"] .tnd-item:focus-visible { outline: 2px solid var(--tnd-b, var(--orange)); outline-offset: -2px; border-radius: 6px; }
}


/* ══════════════════════════════════
       STICKY FILTER BAR
    ══════════════════════════════════ */
#filterbar {
    position: sticky;
    top: calc(58px + var(--elm-hdr-d,0px));
    z-index: 800;
    background: #fff;
    border-bottom: 1px solid #e8e8e8;
    box-shadow: 0 2px 16px rgba(0,0,0,.06);
}

.fb-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
    display: flex;
    align-items: center;
    gap: 0;
    overflow-x: auto;
    scrollbar-width: none;
}

    .fb-inner::-webkit-scrollbar {
        display: none
    }

/* Category tabs
   ──────────────────────────────────────────────────────────────
   FIX 2026-05-28 (DormireList + Mangiare-RistorantiList):
   in lingue lunghe (DE soprattutto) la somma delle label tab
   eccedeva la larghezza di fb-inner spingendo fb-right fuori dal
   viewport (utente doveva scrollare la barra per vedere il
   bottone Filtri). Soluzione: le tab scrollano orizzontalmente
   DENTRO la propria area (flex:1 1 0 + min-width:0 + overflow-x)
   mentre fb-right resta fissa a destra (flex-shrink:0 + margin
   auto come prima). Mask-image fade a destra per segnalare la
   scrollabilita'. La regola mobile (media <=991.98px) gia' aveva
   questo pattern e non viene toccata. */
.cat-tabs {
    display: flex;
    align-items: center;
    gap: 0;
    border-right: 1px solid #eee;
    padding-right: 1.2rem;
    margin-right: 1.2rem;
    /* prima: flex-shrink: 0 (causa overflow su fb-inner) */
    flex: 1 1 0;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    /* mask-image: fade a destra per indicare scrollabilita' visivamente */
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent 100%);
    mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent 100%);
}
.cat-tabs::-webkit-scrollbar { display: none; }
/* I figli (cat-tab + separator) non si devono comprimere -> mantengono
   la loro dimensione naturale e scrollano orizzontalmente. */
.cat-tabs > * { flex-shrink: 0; }

/* FIX 2026-10-07 (audit P2) - riga categorie invisibile su telefono e tablet.
   Sotto i 992px le pagine lista mettono .fb-inner in colonna (riga 1 Filtri
   + Lista/Mappa, riga 2 categorie). In colonna il "flex:1 1 0" qui sopra
   lavora sull'ALTEZZA: base 0 + overflow-y:hidden = riga alta 0 px.
   Qui la riga torna alla sua altezza naturale; lo scorrimento orizzontale
   resta quello delle regole mobile di DormireList, Mangiare-RistorantiList
   e Offerte-Isola-Elba. Desktop invariato. */
@media (max-width:991.98px) {
    #filterbar .cat-tabs { flex: 0 0 auto; }
}

/* FIX 2026-10-07 - categorie su mobile: "Tutti" + dropdown (App_Script/elm-cat-dropdown.js).
   Il JS marca .cat-tabs[data-dd="1"], aggiunge il pulsante .cat-dd-btn e il
   pannello .cat-dd-panel (figlio di #filterbar). Sopra i 992px dropdown e
   pannello restano nascosti e le tab sono quelle di sempre. Senza JS le tab
   scorrono come prima (nessuna regola qui sotto scatta senza data-dd). */
.cat-dd-btn, .cat-dd-panel { display: none; }
@media (max-width:991.98px) {
    #filterbar .cat-tabs[data-dd="1"] {
        overflow: visible !important;
        -webkit-mask-image: none !important;
        mask-image: none !important;
        gap: 0;
    }
    /* 09/10/2026: nascosto anche "Tutti" (ora e' la prima voce del pannello) */
    #filterbar .cat-tabs[data-dd="1"] > a.cat-tab { display: none !important; }
    #filterbar .cat-tabs[data-dd="1"] .cat-tab-all,
    #filterbar .cat-dd-btn { min-height: 44px; padding: .65rem .9rem; }
    #filterbar .cat-dd-btn {
        display: flex;
        align-items: center;
        gap: 6px;
        font-family: var(--font-display);
        font-size: .75rem;
        font-weight: 500;
        letter-spacing: .06em;
        text-transform: uppercase;
        color: var(--grey);
        background: none;
        border: 0;
        border-bottom: 2px solid transparent;
        white-space: nowrap;
        cursor: pointer;
    }
    #filterbar .cat-dd-btn.active { color: var(--blue); border-bottom-color: var(--blue); font-weight: 600; }
    #filterbar .cat-dd-btn .ct-icon { font-size: .95rem; }
    #filterbar .cat-dd-chev { font-size: .8rem; transition: transform .2s; }
    #filterbar.cat-dd-open .cat-dd-chev { transform: rotate(180deg); }
    #filterbar .cat-dd-panel {
        display: block;
        position: fixed; /* #filterbar ha overflow nascosto: absolute verrebbe tagliato. Il top lo imposta il JS */
        left: 0;
        right: 0;
        top: 112px;
        z-index: 799;
        background: #fff;
        border-bottom: 1px solid #e8e8e8;
        box-shadow: 0 14px 24px rgba(0,0,0,.14);
        padding: .25rem 1rem .75rem;
        max-height: calc(100vh - 180px);
        overflow-y: auto;
    }
    #filterbar .cat-dd-panel[hidden] { display: none; }
    #filterbar .cat-dd-item {
        display: flex;
        align-items: center;
        gap: 10px;
        min-height: 48px;
        font-size: .9rem;
        color: var(--dark);
        text-decoration: none;
        border-bottom: 1px solid #f0f0f0;
    }
    #filterbar .cat-dd-item:last-child { border-bottom: 0; }
    #filterbar .cat-dd-item .ct-icon { font-size: 1rem; color: var(--grey); }
    #filterbar .cat-dd-item .ct-count { margin-left: auto; }
    #filterbar .cat-dd-item.active { color: var(--blue); font-weight: 600; }
    #filterbar .cat-dd-item.active .ct-icon { color: var(--blue); }
}

/* FIX 2026-10-09 (richiesta di Andrea) - pagine lista Dormire e Mangiare su mobile:
   i controlli "Filtri" + "Lista | Mappa" (.fb-right) escono dalla barra sticky e
   galleggiano in basso (fixed, 10px + area sicura iPhone), contenitore trasparente:
   ogni pulsante tiene il suo fondo bianco + ombra, leggibile sopra foto e card.
   La barra in alto resta solo con le categorie (top:53px come le altre pagine),
   allineate a destra: a sinistra c'e' il cuore del logo (fisso, y10-80).
   Spariscono: con la mappa a tutto schermo (che ha gia' "Torna alla lista" in basso)
   e quando arriva il footer (App_Script/elm-filterbar-float.js -> .fb-float-off).
   Specificita' con ".fb-inner >": le pagine hanno #filterbar .fb-right inline. */
@media (max-width:991.98px) {
    #filterbar .fb-inner > .fb-right {
        position: fixed;
        left: 0;
        right: 0;
        bottom: calc(10px + env(safe-area-inset-bottom, 0px));
        z-index: 790;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 8px;
        width: auto;
        margin: 0;
        padding: 0 .8rem;
        background: transparent;
        border: 0;
        pointer-events: none;   /* il contenitore non blocca i tocchi sulle card sotto */
        transition: transform .35s cubic-bezier(.16,1,.3,1), opacity .25s ease;
    }
    #filterbar .fb-inner > .fb-right > * {
        pointer-events: auto;
        box-shadow: 0 6px 20px rgba(24,20,15,.18), 0 1px 3px rgba(24,20,15,.10);
    }
    #filterbar.fb-float-off .fb-inner > .fb-right {
        transform: translateY(calc(100% + 24px));
        opacity: 0;
    }
    #filterbar.fb-float-off .fb-inner > .fb-right > * { pointer-events: none; }
    body.elm-mmap-open #filterbar .fb-inner > .fb-right { display: none; }
    #filterbar .cat-tabs[data-dd="1"] { justify-content: flex-end; }
}
@media (max-width:991.98px) and (prefers-reduced-motion: reduce) {
    #filterbar .fb-inner > .fb-right { transition: none; }
}

.cat-tab {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-display);
    font-size: .75rem;
    font-weight: 500;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--grey);
    text-decoration: none;
    padding: 1rem .9rem;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    transition: color .2s,border-color .2s;
    cursor: pointer;
    background: none;
    border-top: none;
    border-left: none;
    border-right: none;
}

    .cat-tab:hover {
        color: var(--dark)
    }

    .cat-tab.active {
        color: var(--blue);
        border-bottom-color: var(--blue);
        font-weight: 600
    }

    .cat-tab .ct-icon {
        font-size: .95rem
    }

    .cat-tab .ct-count {
        font-size: .75rem;
        background: var(--off);
        color: var(--grey);
        padding: 1px 6px;
        border-radius: 10px;
        font-weight: 600;
    }

    .cat-tab.active .ct-count {
        background: #e0f3fc;
        color: var(--blue)
    }

/* ── Stars list (filtri stelle in sidebar sotto "Esplora per comune") ──
   Layout verticale tipo .comuni-list, mostrato SOLO per categorie che
   hanno strutture con stelle (hotel/camping). Spostato dalla filter bar
   in alto al sidebar (richiesta 2026-05-26): le stelle non hanno senso
   per appartamenti/ville/B&B e occupavano spazio inutilmente.
   Ogni .st-link mostra "★★★★ 4 Stelle" a sinistra + count "(12)" a destra,
   con la voce attiva (filtro corrente) evidenziata in oro. */
.stars-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.st-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 6px;
    font-family: var(--font-body);
    font-size: .82rem;
    color: var(--ink-md, #3a3228);
    text-decoration: none;
    transition: background .15s, color .15s;
}
.st-link:hover {
    background: var(--sand, #f4efe6);
    color: var(--ink, #18140f);
}
.st-link.active {
    background: #fdf6e3;
    color: #b8860b;
    font-weight: 600;
}
.st-link .st-lbl {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.st-link .st-icons {
    color: #b8860b;
    font-size: .78rem;
    letter-spacing: 1px;
    line-height: 1;
}
.st-link.active .st-icons {
    color: #b8860b;
}
.st-link .st-count {
    font-size: .75rem;
    color: var(--ink-lt, #6f665a);
    background: var(--sand, #f4efe6);
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: 600;
    flex-shrink: 0;
}
.st-link.active .st-count {
    background: #f0c75e;
    color: #6b4900;
}
.st-link.st-all {
    border-bottom: 1px solid var(--sand-md, #ece5d8);
    margin-bottom: 4px;
    padding-bottom: 10px;
}

/* ── Services list (filtri servizi in sidebar, Tier 1 SEO) ──
   Layout identico a .stars-list ma con colore neutro/blue invece del gold.
   Ogni link e' una pagina SEO dedicata /con-piscina, /pet-friendly, ecc.
   Mostrato solo se la categoria ha almeno 1 struttura con un servizio. */
.services-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.sv-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 6px;
    font-family: var(--font-body);
    font-size: .82rem;
    color: var(--ink-md, #3a3228);
    text-decoration: none;
    transition: background .15s, color .15s;
}
.sv-link:hover {
    background: var(--sand, #f4efe6);
    color: var(--ink, #18140f);
}
.sv-link.active {
    background: var(--hotel-lt, #e8f3fa);
    color: var(--hotel, #0d5f8a);
    font-weight: 600;
}
.sv-link .sv-lbl {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 1;
}
.sv-link .sv-lbl .bi {
    font-size: 1rem;
    color: var(--ink-lt, #6f665a);
    flex-shrink: 0;
}
/* Icona SVG (svc-N.svg) nei filtri: stesse icone delle card. Selettore a 3
   classi (0,3,0) per battere la regola vendor img[src$=".svg"]{width:100%}. */
.sv-link .sv-lbl .sv-ico {
    width: 20px;
    height: 20px;
    object-fit: contain;
    flex-shrink: 0;
    opacity: .75;
}
.sv-link.active .sv-lbl .bi {
    color: var(--hotel, #0d5f8a);
}
.sv-link .sv-count {
    font-size: .75rem;
    color: var(--ink-lt, #6f665a);
    background: var(--sand, #f4efe6);
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: 600;
    flex-shrink: 0;
}
.sv-link.active .sv-count {
    background: var(--hotel, #0d5f8a);
    color: #fff;
}
.sv-link.sv-all {
    border-bottom: 1px solid var(--sand-md, #ece5d8);
    margin-bottom: 4px;
    padding-bottom: 10px;
}

/* ── Versanti list (filtri versante in sidebar, Tier 1 SEO) ──
   Layout identico a .services-list. Colore verde geografico per distinguere
   visualmente dai servizi (blu) e dalle stelle (gold). Mostrato solo se
   la lista ha comuni in piu' di 1 versante diverso E nessun comune attivo. */
.versanti-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.vr-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 6px;
    font-family: var(--font-body);
    font-size: .82rem;
    color: var(--ink-md, #3a3228);
    text-decoration: none;
    transition: background .15s, color .15s;
}
.vr-link:hover {
    background: var(--sand, #f4efe6);
    color: var(--ink, #18140f);
}
.vr-link.active {
    background: var(--camp-lt, #eaf5ec);
    color: var(--camp, #2a7a3a);
    font-weight: 600;
}
.vr-link .vr-lbl {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 1;
}
.vr-link .vr-lbl .bi {
    font-size: 1rem;
    color: var(--ink-lt, #6f665a);
    flex-shrink: 0;
}
.vr-link.active .vr-lbl .bi {
    color: var(--camp, #2a7a3a);
}
.vr-link .vr-count {
    font-size: .75rem;
    color: var(--ink-lt, #6f665a);
    background: var(--sand, #f4efe6);
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: 600;
    flex-shrink: 0;
}
.vr-link.active .vr-count {
    background: var(--camp, #2a7a3a);
    color: #fff;
}
.vr-link.vr-all {
    border-bottom: 1px solid var(--sand-md, #ece5d8);
    margin-bottom: 4px;
    padding-bottom: 10px;
}

/* Filter chips (FIX 2026-10-08: tolta una graffa orfana qui sopra, il browser scartava .filter-chips) */
.filter-chips {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
    flex-shrink: 0
}

.filter-chip {
    display: flex;
    align-items: center;
    gap: 5px;
    font-family: var(--font-display);
    font-size: .75rem;
    font-weight: 500;
    color: var(--grey);
    background: var(--off);
    border: 1.5px solid #e0e0e0;
    border-radius: 20px;
    padding: 5px 12px;
    cursor: pointer;
    white-space: nowrap;
    transition: all .2s;
    user-select: none;
}

    .filter-chip:hover {
        border-color: var(--blue);
        color: var(--blue)
    }

    .filter-chip.active {
        background: #e0f3fc;
        border-color: var(--blue);
        color: var(--blue);
        font-weight: 600
    }

    .filter-chip .fc-icon {
        font-size: .75rem
    }

/* Sort + count (right side) */
.fb-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
    padding-left: 1rem
}

/* .result-count e .sort-sel rimossi 2026-05-26: contatore duplicava la stat
   gia' presente nel hero (#ph-stats); ordinamento non aveva senso senza
   prezzi/rating. Reintrodurre quando le attivita' avranno questi campi. */


/* ═══════════════════════════════════════════════════════════════════
   TRUST SIGNALS STRIP (#trust-strip)
   ───────────────────────────────────────────────────────────────────
   3 mini-card sotto la filter bar: contatto diretto, no commissioni,
   strutture verificate. Pattern Booking/Airbnb. Layout flex 3-col
   desktop, collassa a 1-col mobile.
   ═══════════════════════════════════════════════════════════════════ */
#trust-strip {
    background: var(--sand, #f4efe6);
    border-bottom: 1px solid var(--sand-dk, #d8cfc0);
    padding: 18px 0;
}
.ts-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.ts-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}
.ts-ico {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--ink, #18140f);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}
.ts-body { min-width: 0; }
.ts-h {
    font-family: var(--font-display);
    font-size: .92rem;
    font-weight: 600;
    color: var(--ink, #18140f);
    line-height: 1.2;
    margin-bottom: 2px;
}
.ts-p {
    font-size: .78rem;
    color: var(--ink-md, #3a3228);
    line-height: 1.45;
}
@media (max-width: 767.98px) {
    .ts-inner {
        grid-template-columns: 1fr;
        gap: 14px;
        padding: 0 1.2rem;
    }
    #trust-strip { padding: 14px 0; }
}

/* ═══════════════════════════════════════════════════════════════════
   INTRO LONG-FORM SEO (#intro-long-form)
   ───────────────────────────────────────────────────────────────────
   Paragrafo informativo dinamico (template resx) tra trust strip e
   card grid. Tipografia editoriale, contiene <strong> per evidenziare
   le keyword (nome categoria e totale strutture).
   ═══════════════════════════════════════════════════════════════════ */
#intro-long-form {
    background: var(--warm, #fdfaf5);
    padding: 22px 0 6px;
}
.ilf-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 2rem;
}
.ilf-text {
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--ink-md, #3a3228);
    margin: 0;
}
.ilf-text strong {
    color: var(--ink, #18140f);
    font-weight: 600;
}
@media (max-width: 767.98px) {
    .ilf-inner { padding: 0 1.2rem; }
    .ilf-text { font-size: .94rem; }
}

/* ═══════════════════════════════════════════════════════════════════
   CHIP SERVIZI nelle card (.pc-chips / .pc-chip)
   ───────────────────────────────────────────────────────────────────
   Piccoli badge sotto location che mostrano i servizi del catalogo
   che la struttura offre (max 4, vedi BuildCardsHtml). Stesso catalogo
   dei filtri sidebar -> coerenza: se filtri "Piscina" vedi card col chip.
   Stile discreto: background sand-light, font ridotto, icona inline.
   In modalita' mappa split nascosti (card compatte 80px).
   ═══════════════════════════════════════════════════════════════════ */
.pc-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 8px 0 0;
}
.pc-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: .75rem;
    font-weight: 500;
    color: var(--ink-md, #3a3228);
    /* Sfondo chip per-sezione: versione MOLTO chiara dell'accento (--chip-bg),
       impostato per macro su #main-content. Default beige se non definito. */
    background: var(--chip-bg, var(--sand, #f4efe6));
    padding: 3px 8px;
    border-radius: 999px;
    white-space: nowrap;
    line-height: 1.7;
}
.pc-chip .bi {
    font-size: .78rem;
    color: var(--ink-lt, #6f665a);
}
/* Icona SVG (svc-N.svg, cartella IconeServizi) dentro i chip servizi-filtro.
   Le SVG sono monocromatiche piene: le rendiamo come <img> piccola e morbida.
   IMPORTANTE: il tema vendor (goodlayers page-builder.css) ha una regola globale
   `img[src$=".svg"]{width:100%}` con specificita' (0,1,1) che gonfierebbe l'icona
   a tutta larghezza. Usiamo `.pc-chip .pc-chip-ico` (0,2,0) per vincere quel
   selettore senza disattivare la regola globale (serve alle altre SVG del sito). */
.pc-chip .pc-chip-ico {
    width: 18px;
    height: 18px;
    object-fit: contain;
    flex: 0 0 auto;
    opacity: .7;
}

/* ═══════════════════════════════════════════════════════════════════
   ICONA SERVIZIO via CSS MASK (Opzione B) — colore = var(--svc-tint)
   ───────────────────────────────────────────────────────────────────
   La svc-N.svg fa da MASCHERA (mask-image inline per-icona), il colore
   arriva da background-color: cosi' ogni sezione tinge le icone col
   proprio accento impostando --svc-tint sul proprio contenitore.
   Default neutro se --svc-tint non e' definito. Usata da card, filtri,
   scheda. -webkit-mask + mask per copertura browser completa.
   ═══════════════════════════════════════════════════════════════════ */
.svc-ico {
    display: inline-block;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    background-color: var(--svc-tint, #6f665a);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}
.pc-chip .svc-ico { width: 18px; height: 18px; }
.sv-link .sv-lbl .svc-ico { width: 20px; height: 20px; }
/* Nelle card compatte modalita' mappa, nascondo i chip (altezza 80px non basta) */
#main-content.elm-split-active .pc-chips { display: none; }

/* Riga DISTANZA DAL MARE sotto i chip (.pc-dist). Compatta, icona onda
   in accento brand. Nascosta nelle card compatte modalita' mappa. */
.pc-dist {
    display: flex;
    align-items: center;
    gap: 5px;
    margin: 14px 0 0;
    font-size: .75rem;
    font-weight: 500;
    color: var(--ink-md, #3a3228);
}
.pc-dist .bi {
    font-size: .82rem;
    color: var(--orange, #ca6f45);
}
#main-content.elm-split-active .pc-dist { display: none; }

/* ═══════════════════════════════════════════════════════════════════
   DESCRIZIONE BREVE NELLE CARD (.pc-desc)
   ───────────────────────────────────────────────────────────────────
   Frase editoriale di max 2 righe sotto la location. Color secondario,
   line-clamp per garantire altezza coerente nelle 3-col grid.
   ═══════════════════════════════════════════════════════════════════ */
.pc-desc {
    font-size: .82rem;
    line-height: 1.45;
    color: var(--ink-md, #3a3228);
    margin: 6px 0 10px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* Nelle card compatte modalita' mappa, nascondo la descrizione
   (sarebbe troppo affollata nei 80px di altezza riga). */
#main-content.elm-split-active .pc-desc { display: none; }

/* ═══════════════════════════════════════════════════════════════════
   CTA SECONDARIE ICONA (.pc-cta-icon)
   ───────────────────────────────────────────────────────────────────
   Telefono click-to-call + email mailto, sotto il bottone Scopri.
   Piccole, discrete, brand color. onclick fa event.stopPropagation +
   preventDefault + location.href per non navigare alla scheda.
   E' un <button> (non <a>) perche' annidare anchor dentro anchor e'
   HTML invalid: rompe la card-anchor genitore (bug 2026-05-26).
   Reset esplicito dei default button browser (border, padding, font).
   ═══════════════════════════════════════════════════════════════════ */
.pc-cta-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--sand, #f4efe6);
    color: var(--ink, #18140f);
    text-decoration: none;
    margin-left: 6px;
    cursor: pointer;
    font: inherit;
    line-height: 1;
    transition: background .15s, color .15s, transform .15s;
}
.pc-cta-icon:hover {
    background: var(--ink, #18140f);
    color: #fff;
    transform: scale(1.08);
}
.pc-cta-icon:focus-visible {
    outline: 2px solid var(--orange, #ca6f45);
    outline-offset: 2px;
}
.pc-cta-icon .bi { font-size: 13px; }

/* WhatsApp: colore brand ufficiale (#25D366) per riconoscibilita' immediata.
   Mantengo lo stesso pattern hover (scuro + scale) per coerenza visiva. */
.pc-cta-icon.pc-cta-wa {
    background: #25D366;
    color: #fff;
}
.pc-cta-icon.pc-cta-wa:hover {
    background: #1ea556;
    color: #fff;
}
/* Nelle card compatte modalita' mappa, nascondo le CTA icona */
#main-content.elm-split-active .pc-cta-icon { display: none; }


/* ══════════════════════════════════
       MAIN LAYOUT: sidebar + grid
    ══════════════════════════════════ */
#main-content {
    max-width: 1400px;
    margin: 0 auto;
    padding: 2.5rem 2rem 5rem;
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 2.5rem;
    align-items: start
}

/* ── SIDEBAR ── */
.sidebar {
    position: sticky;
    top: calc(120px + var(--elm-hdr-d,0px))
}

.sb-block {
    background: #fff;
    border: 1px solid #ebebeb;
    border-radius: 8px;
    padding: 20px 18px;
    margin-bottom: 1.2rem
}

.sb-title {
    font-family: var(--font-display);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--dark);
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between
}

    .sb-title button {
        background: none;
        border: none;
        font-size: .75rem;
        color: var(--blue);
        cursor: pointer;
        font-family: var(--font-display);
        letter-spacing: .08em;
        padding: 0
    }

/* price range */
.price-range {
    width: 100%;
    accent-color: var(--blue);
    margin: 8px 0
}

.price-labels {
    display: flex;
    justify-content: space-between;
    font-size: .75rem;
    color: var(--grey)
}

/* checkbox list */
.cb-list {
    display: flex;
    flex-direction: column;
    gap: 8px
}

.cb-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer
}

.cb-left {
    display: flex;
    align-items: center;
    gap: 8px
}

.cb-item input[type=checkbox] {
    accent-color: var(--blue);
    width: 15px;
    height: 15px;
    cursor: pointer
}

.cb-label {
    font-size: .8rem;
    color: var(--dark)
}

.cb-count {
    font-size: .75rem;
    color: var(--grey);
    background: var(--off);
    padding: 1px 7px;
    border-radius: 8px
}

/* star rating filter */
.star-row {
    display: flex;
    flex-direction: column;
    gap: 7px
}

.star-item {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer
}

    .star-item input[type=checkbox] {
        accent-color: var(--blue);
        width: 15px;
        height: 15px
    }

.stars {
    color: #f5a623;
    font-size: .8rem;
    letter-spacing: 1px
}

.star-count {
    font-size: .75rem;
    color: var(--grey);
    margin-left: auto;
    background: var(--off);
    padding: 1px 7px;
    border-radius: 8px
}

/* service chips */
.service-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px
}

.sv-chip {
    font-size: .75rem;
    font-weight: 500;
    color: var(--grey);
    border: 1px solid #e0e0e0;
    border-radius: 14px;
    padding: 4px 10px;
    cursor: pointer;
    transition: all .18s;
    display: flex;
    align-items: center;
    gap: 4px;
}

    .sv-chip:hover, .sv-chip.active {
        background: #e0f3fc;
        border-color: var(--blue);
        color: var(--blue)
    }

/* Variante puramente INFORMATIVA: il chip non e' cliccabile,
   nessun hover, nessun cursor pointer. Usato in DormireList.aspx
   per comunicare i servizi tipici senza promettere filtraggio. */
.sv-chip.sv-chip-static {
    cursor: default;
    background: var(--sand, #f4efe6);
    border-color: var(--sand-md, #ece5d8);
    color: var(--ink-md, #3a3228);
    transition: none
}

    .sv-chip.sv-chip-static:hover {
        background: var(--sand, #f4efe6);
        border-color: var(--sand-md, #ece5d8);
        color: var(--ink-md, #3a3228)
    }

    .sv-chip.sv-chip-static i {
        color: var(--gold-dk, #8a6a38)
    }

/* comune select */
.comune-sel {
    width: 100%;
    font-family: var(--font-display);
    font-size: .8rem;
    color: var(--dark);
    border: 1.5px solid #e0e0e0;
    border-radius: 5px;
    padding: 9px 10px;
    background: var(--off);
    cursor: pointer
}

    .comune-sel:focus {
        outline: none;
        border-color: var(--blue)
    }

/* apply button */
/* Filtro "applica" - allineato al sistema unico: raggio --r-btn, hover INVERSO.
   border-box globale -> il bordo 1.5px non cambia l'ingombro. */
.btn-apply {
    width: 100%;
    background: var(--cta-azure, var(--blue));
    color: #fff;
    border: 1.5px solid var(--cta-azure, var(--blue));
    font-family: var(--font-display);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 11px;
    border-radius: var(--r-btn, 8px);
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
    margin-top: 4px;
}

    .btn-apply:hover {
        background: #fff;
        color: var(--cta-azure, var(--blue));
    }

.btn-reset {
    display: block;
    text-align: center;
    font-size: .75rem;
    color: var(--grey);
    margin-top: 8px;
    cursor: pointer;
    background: none;
    border: none;
    font-family: var(--font-display);
    text-decoration: underline;
    width: 100%
}

/* ── CARD GRID ── */
.card-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 1.4rem
}

/* Property card.
   PERF: content-visibility:auto + contain-intrinsic-size dicono al browser
   "se questa card e' off-screen, NON spendere tempo a renderizzarla finche'
   non si avvicina al viewport". Su una griglia con 50+ card di lista lunga
   si traduce in scroll piu' fluido (skip layout/paint delle card sotto la
   fold) e initial paint piu' veloce. La intrinsic-size 380px e' una stima
   dell'altezza media della card (200px foto + ~180px body): se off-screen
   il browser riserva quello spazio per evitare jump del layout durante lo
   scroll.
   Supporto: Chrome/Edge 85+, Firefox 125+, Safari 18+. I browser piu'
   vecchi ignorano queste proprieta', zero rischio di regressione. */
.p-card {
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #ebebeb;
    transition: transform .28s,box-shadow .28s;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: var(--dark);
    content-visibility: auto;
    contain-intrinsic-size: 380px;
}

    .p-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 18px 48px rgba(0,0,0,.1);
        color: var(--dark)
    }

    .p-card.featured {
        border-color: var(--orange);
        position: relative
    }

/* featured badge */
.featured-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    background: var(--orange);
    color: #fff;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 3px;
}

/* image area */
.pc-img {
    position: relative;
    height: 200px;
    overflow: hidden;
    flex-shrink: 0
}

/* .pc-img-inner: wrapper della foto della card.
   Refactor 2026-05-26: ora contiene un vero <img> (per SEO image alt +
   Google Images) invece di un background-image. Lo wrapper resta solo
   per far girare l'animazione di scale al hover sulla card e per
   contenere il fallback gradient quando manca la foto.

   position:relative + dimensioni 100%: serve da "frame" per l'<img>
   figlio in position:absolute (vedi sotto). E' la chiave del pattern
   "cover blindato" che vince anche se altri CSS tentano di settare
   height:auto sull'<img>. */
.pc-img-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform .4s cubic-bezier(.22,1,.36,1);
    overflow: hidden;
}

/* .pc-img-photo: la <img> reale dentro pc-img-inner.

   PATTERN COVER BLINDATO:
   - position:absolute + inset:0 -> ancora l'<img> ai 4 lati del wrapper,
     quindi le dimensioni dell'<img> sono determinate dal posizionamento,
     NON da width/height attributes ne' da regole img{height:auto} globali
     ereditate dal tema (style-core.css riga 842 -> sovrasterebbe il
     nostro height:100% senza absolute positioning).
   - object-fit:cover -> l'immagine riempie il riquadro mantenendo le
     proporzioni, croppando i lati che sforano (= background-size:cover).
   - object-position:center -> centra simmetricamente il crop.
   - !important su object-fit e width/height -> ulteriore livello di
     protezione contro temi/plugin che potrebbero sovrascrivere con
     regole globali su img. Brutto ma necessario in un ambiente con
     style-core.css del tema GoodLayers che ha tante regole img generiche.

   I selettori discendente (.pc-img-inner > .pc-img-photo) aumentano la
   specificity a (0,2,0) battendo le regole img{...} a (0,0,1). */
.pc-img-inner > .pc-img-photo {
    position: absolute !important;
    /* top/right/bottom/left espliciti invece di "inset: 0" (shorthand
       supportato solo da browser post-2020): cosi' funziona anche su
       WebView Android vecchi, Edge Legacy, browser kiosk industriali. */
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    display: block;
}

.p-card:hover .pc-img-inner {
    transform: scale(1.06)
}

.pc-type-badge {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background: rgba(255,255,255,.92);
    color: var(--dark);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 3px 9px;
    border-radius: 3px;
    backdrop-filter: blur(4px);
}

/* FIX 2026-10-07: etichetta tipologia sulle card compatte mobile.
   Prima: maiuscolo + spaziatura 1.2px, "APPARTAMENTI" andava su due righe
   e "FERIENWOHNUNGEN" si spezzava a meta' parola sull'immagine da 108px.
   Ora: una sola riga, niente maiuscolo ne' spaziatura, 12px (minimo di
   progetto) con spaziatura -.03em: "Ferienwohnungen", la piu' lunga, entra
   in 99px su 108. Se una futura etichetta e' ancora piu' lunga: ellissi. */
@media (max-width: 991.98px) {
    .p-card .pc-type-badge {
        white-space: nowrap !important;
        text-transform: none !important;
        letter-spacing: -.03em !important;
        font-weight: 600 !important;
        padding: 2px 4px !important;
        line-height: 1.3 !important;
        left: 4px !important;
        bottom: 4px !important;
        right: auto !important;
        max-width: calc(100% - 8px);
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* .pc-go: affordance "vai alla scheda". Freccia circolare in basso a SX
   dell'immagine, nascosta a riposo e rivelata in hover (slide-up + fade).
   Sostituisce il vecchio bottone "Scopri ->" del footer: la card intera e'
   gia' un <a>, quindi questo e' solo un segnale visivo di cliccabilita',
   NON un secondo link. Posizione basso-sx per non collidere col badge
   tipologia (basso-dx) ne' col cuore preferiti (alto-dx). */
.pc-go {
    position: absolute;
    bottom: 10px;
    left: 10px;
    z-index: 2;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--orange, #ca6f45);
    color: #fff;
    font-size: 1rem;
    box-shadow: 0 4px 12px rgba(0,0,0,.18);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .28s, transform .28s;
    pointer-events: none; /* il click lo gestisce la card-anchor sottostante */
}

.p-card:hover .pc-go {
    opacity: 1;
    transform: translateY(0);
}

/* Touch/mobile: l'hover non e' affidabile -> freccia sempre visibile,
   cosi' l'affordance di cliccabilita' resta evidente al primo colpo. */
@media (hover: none) {
    .pc-go {
        opacity: 1;
        transform: none;
    }
}

.pc-fav {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255,255,255,.88);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    cursor: pointer;
    transition: background .2s;
    border: none;
}

    .pc-fav:hover {
        background: #fff
    }

    .pc-fav.liked {
        color: var(--red)
    }

    /* Area di tocco allargata (2026-09-21): la grafica resta 28-32px, la zona
       cliccabile arriva a ~44-48px (soglia touch). Si estende di 6px verso
       l'angolo (fino al bordo foto) e di 10px verso l'interno della card, cosi'
       un tocco "quasi sul cuore" salva invece di aprire la scheda.
       Usata solo da DormireList e Mangiare-RistorantiList. */
    .pc-fav::after {
        content: '';
        position: absolute;
        top: -6px;
        right: -6px;
        bottom: -10px;
        left: -10px;
        border-radius: 12px
    }

/* card body */
.pc-body {
    padding: 16px 16px 14px;
    display: flex;
    flex-direction: column;
    flex: 1
}

.pc-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px
}

/* .pc-name: ora e' <h3> (era <div>) per gerarchia semantica SEO.
   I default UA del browser per h3 hanno margin sopra/sotto e font-size 1.17em:
   azzeriamo entrambi per non rompere il layout della card. */
.pc-name {
    margin: 0;
    padding: 0;
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 600;
    line-height: 1.2;
    flex: 1
}

.pc-rating {
    display: flex;
    align-items: center;
    gap: 3px;
    flex-shrink: 0
}

    .pc-rating .r-score {
        background: var(--blue);
        color: #fff;
        font-size: .75rem;
        font-weight: 700;
        padding: 3px 7px;
        border-radius: 4px;
    }

    .pc-rating .r-n {
        font-size: .75rem;
        color: var(--grey)
    }

.pc-location {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: .75rem;
    color: var(--grey);
    margin-bottom: 10px
}

    .pc-location i {
        color: var(--orange);
        font-size: .8rem
    }

/* services */
.pc-services {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 12px
}

.pc-sv {
    font-size: .75rem;
    color: var(--grey);
    background: var(--off);
    padding: 3px 8px;
    border-radius: 3px;
    display: flex;
    align-items: center;
    gap: 3px
}

/* price */
.pc-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid #f0f0f0
}
/* Footer card ristorante (strategia "azione immediata"): senza "Scopri",
   solo le icone contatto (Chiama / WhatsApp) allineate in basso a destra. */
.pc-footer-actions {
    justify-content: flex-end;
    gap: 8px;
}

.pc-price {
}

    .pc-price .price-from {
        font-size: .75rem;
        color: var(--grey);
        text-transform: uppercase;
        letter-spacing: .06em
    }

    .pc-price .price-val {
        font-family: var(--font-display);
        font-size: 1.55rem;
        font-weight: 600;
        color: var(--dark);
        line-height: 1
    }

    .pc-price .price-unit {
        font-size: .75rem;
        color: var(--grey)
    }

.btn-detail {
    background: none;
    color: var(--dark);
    border: none;
    font-family: var(--font-display);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    padding: 0;
    border-radius: 0;
    text-decoration: none;
    cursor: pointer;
    transition: color .2s;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

    .btn-detail:hover {
        background: none;
        color: var(--orange)
    }

/* ── LOAD MORE ── */
.load-more-wrap {
    text-align: center;
    margin-top: 2.5rem
}

.btn-load {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1.5px solid var(--dark);
    color: var(--dark);
    font-family: var(--font-display);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 12px 28px;
    border-radius: var(--r-btn, 8px); /* allineato al sistema unico (era 4px) */
    cursor: pointer;
    background: none;
    transition: all .22s;
}

    .btn-load:hover {
        background: var(--dark);
        color: #fff
    }

/* ══════════════════════════════════
       INTRO TEXT SECTION
    ══════════════════════════════════ */

/* nav ancore categorie */
.hero-nav {
    display: flex;
    gap: .6rem;
    flex-wrap: wrap
}

.hn-anchor {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-body);
    font-size: .75rem;
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(255,255,255,.65) !important;
    border: 1px solid rgba(255,255,255,.18);
    background: rgba(255,255,255,.07);
    padding: 7px 15px;
    border-radius: 3px;
    text-decoration: none;
    transition: all .22s;
}

    .hn-anchor:hover {
        background: rgba(255,255,255,.16);
        color: #fff;
        border-color: rgba(255,255,255,.35)
    }

    .hn-anchor i {
        font-size: .72rem
    }



#intro-section {
    background: var(--off);
    padding: 56px 0
}

.intro-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 4rem;
    align-items: center
}

.intro-text {
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-family: var(--font-body);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--orange);
    margin-bottom: 11px
}

    .eyebrow::before {
        content: '';
        width: 22px;
        height: 1.5px;
        background: var(--orange)
    }

.s-h {
    font-family: var(--font-display);
    font-size: clamp(1.8rem,3.5vw,2.8rem);
    font-weight: 300;
    line-height: 1.1;
    color: var(--dark);
    margin-bottom: .9rem
}

    .s-h em {
        font-style: italic;
        color: var(--blue)
    }

.s-p {
    font-size: .9rem;
    font-weight: 300;
    color: var(--grey);
    line-height: 1.8
}

.intro-tips {
    display: flex;
    flex-direction: column;
    gap: .8rem
}

.tip-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: #fff;
    border-radius: 6px;
    padding: 14px 16px;
    border-left: 3px solid var(--orange)
}

.tip-icon {
    font-size: 1.2rem;
    color: var(--orange);
    flex-shrink: 0;
    margin-top: 1px
}

.tip-t {
    font-weight: 600;
    font-size: .84rem;
    margin-bottom: 2px
}

.tip-d {
    font-size: .76rem;
    color: var(--grey);
    line-height: 1.55
}

/* ══ WRAPPER GENERALE ══ */
.page-w {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem 6rem
}

/* ══ INTRO PAGINA ══ */
.page-intro {
    padding: 4rem 0 3rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5rem;
    align-items: center;
    border-bottom: 1px solid var(--sand-dk);
    margin-bottom: 1rem;
}

.pi-eyebrow {
    font-family: var(--font-body);
    font-size: .75rem;
    font-weight: 500;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--orange);
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 1rem;
}

    .pi-eyebrow::before {
        content: '';
        width: 24px;
        height: 1px;
        background: var(--orange)
    }

.pi-h {
    font-family: var(--font-display);
    font-size: clamp(1.8rem,3.5vw,2.8rem);
    font-weight: 300;
    line-height: 1.1;
    color: var(--ink);
    margin-bottom: 1rem
}

    .pi-h em {
        font-style: italic;
        color: var(--orange)
    }

.pi-p {
    font-size: .88rem;
    font-weight: 300;
    color: var(--ink-lt);
    line-height: 1.92
}

.pi-right {
    display: flex;
    flex-direction: column;
    gap: 1rem
}

.pi-stat {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    background: #fff;
    border-radius: 8px;
    border: 1px solid var(--sand-dk);
}

.pi-stat-n {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 600;
    color: var(--orange);
    line-height: 1;
    min-width: 54px;
    text-align: center
}

.pi-stat-l {
    font-size: .78rem;
    color: var(--ink-lt);
    font-weight: 300;
    line-height: 1.5
}

    .pi-stat-l strong {
        color: var(--ink-md);
        font-weight: 500;
        display: block
    }

/* ══ CATEGORIA SEZIONE ══ */
.cat-section {
    padding: 5rem 0;
    border-bottom: 1px solid var(--sand-dk);
    position: relative;
}

    .cat-section:last-of-type {
        border-bottom: none
    }

/* Layout interno sezione: alternato */
.cat-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5rem;
    align-items: start;
}

.cat-section:nth-of-type(even) .cat-inner {
    direction: rtl
}

    .cat-section:nth-of-type(even) .cat-inner > * {
        direction: ltr
    }

/* VISUAL SIDE */
.cat-visual {
    position: relative
}

/* ════════════════════════════════════════════════════════════════════
   PALETTE PER-CATEGORIA (Dormire --hotel/... e Mangiare --rist/...)
   SPOSTATA in App_Style/guidelines.css (fonte unica dei token, 2026-06-12).
   I valori reali sono li'. Qui rimosso il :root duplicato per evitare
   conflitti di cascade. NON ridefinire questi token in questo file.
   ════════════════════════════════════════════════════════════════════ */

.cat-img-main {
    width: 100%;
    aspect-ratio: 4/3;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    /* Anchor variant (Dormire.aspx 2026-05-27): l'intera immagine e' un link
       alla pagina categoria. display:block + cursor + reset text-decoration. */
    display: block;
    text-decoration: none;
    cursor: pointer;
}
a.cat-img-main:hover,
a.cat-img-main:focus-visible {
    text-decoration: none;
}

.cat-img-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: transform .6s cubic-bezier(.22,1,.36,1);
}

.cat-img-main:hover .cat-img-bg {
    transform: scale(1.04)
}

.cat-img-ov {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,rgba(10,8,4,.65) 0%,rgba(10,8,4,.05) 50%);
}
/* numero grande decorativo */
.cat-num {
    position: absolute;
    top: -1.5rem;
    right: -1rem;
    font-family: var(--font-display);
    font-size: 8rem;
    font-weight: 700;
    color: var(--sand-dk);
    line-height: 1;
    pointer-events: none;
    user-select: none;
    z-index: 0;
}
/* badge tipo in basso immagine */
.cat-badge {
    position: absolute;
    bottom: 16px;
    left: 16px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--font-body);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #fff;
    padding: 6px 14px;
    border-radius: 3px;
    backdrop-filter: blur(6px);
}

    .cat-badge i {
        font-size: .68rem
    }
/* mini thumb secondaria */
.cat-img-mini {
    position: absolute;
    bottom: -20px;
    right: -20px;
    width: 120px;
    height: 90px;
    border-radius: 8px;
    overflow: hidden;
    border: 3px solid var(--warm);
    box-shadow: 0 8px 24px rgba(0,0,0,.15);
    z-index: 2;
}

    .cat-img-mini .cat-img-bg {
        transition: none
    }

/* TESTO SIDE */
.cat-text {
    padding-top: .5rem;
    position: relative;
    z-index: 1
}

.cat-eyebrow {
    font-family: var(--font-body);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .28em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 1.2rem;
}

    .cat-eyebrow::before {
        content: '';
        width: 22px;
        height: 2px;
        border-radius: 1px
    }

.cat-h {
    font-family: var(--font-display);
    font-size: clamp(1.7rem,3vw,2.4rem);
    font-weight: 400;
    line-height: 1.1;
    color: var(--ink);
    margin-bottom: .4rem;
}

    .cat-h em {
        /* Il corsivo eredita il colore dalla custom property --c
           settata inline sul <h2> (es. style="--c:var(--rist)"). Fallback
           var(--orange) se --c non e' definita. Cosi' ogni categoria
           dell'hub Mangiare/Dormire ha il suo corsivo colorato senza
           dover scrivere una regola CSS per ciascuna. */
        font-style: italic;
        color: var(--c, var(--orange))
    }

.cat-tagline {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 300;
    font-style: italic;
    color: var(--ink-lt);
    margin-bottom: 1.2rem;
}

.cat-desc {
    font-size: .87rem;
    font-weight: 300;
    color: var(--ink-lt);
    line-height: 1.92;
    margin-bottom: 1.4rem
}

    .cat-desc strong {
        color: var(--ink-md);
        font-weight: 500
    }

/* ── MANGIARE PAGE WARM BACKGROUND ──
   Wrapper full-width che colora di beige caldo (var(--warm)) tutto il
   contenuto della pagina Mangiare sotto il hero. Differenzia visivamente
   la macro Mangiare dal Dormire (sfondo bianco) e dona un tocco
   "carta da menu" coerente con la palette terra/verde/rosso del food.
   I trust signal e altre strip che hanno bg proprio mantengono il loro
   colore (warm e' il default-fallback). */
.mangiare-bg-wrap {
    background: var(--warm, #fdfaf5);
}
/* NB: il .breadcrumb mantiene il suo bg bianco globale (vedi regola
   .breadcrumb), per coerenza tra tutte le sezioni del sito. Solo il
   contenuto sotto il breadcrumb riceve il warm bg di Mangiare. */
/* Le sezioni interne con bg bianco (cards .sg, faq .fq) restano tali
   per contrasto - vedi regole esistenti .fq, .cat-section, ecc. */

/* ── PIATTI/PRODOTTI CHIPS (Mangiare hub) ──
   Pills che mostrano i piatti tipici di ogni categoria (es. Cacciucco,
   Polpo alla brace per Ristoranti; Aleatico DOCG per Vini, ecc.).
   Tipografia: display italica per il flavour editoriale "carta del menu",
   font-weight 400 (non 300) per garantire leggibilita' anche su font <0.95rem
   (vedi regola [[elbamylove-readability-over-hierarchy]]).
   Posizionate tra .cat-desc e .cat-punti nel markup. */
.cat-piatti {
    display: flex;
    gap: .4rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem
}
.piatto {
    font-family: var(--font-display);
    font-size: .85rem;
    font-style: italic;
    color: #fff;
    padding: 4px 12px;
    border-radius: 20px;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: .01em;
    white-space: nowrap
}
@media (max-width: 575.98px) {
    .piatto { font-size: .78rem; padding: 3px 10px }
    .cat-piatti { gap: .3rem; margin-bottom: 1.1rem }
}

/* ═══════════════════════════════════════════════════════════════════
   "I PIATTI DA NON PERDERE" - 8 card simbolo della gastronomia elbana
   ───────────────────────────────────────────────────────────────────
   Layout 4 colonne su desktop, 2 su tablet, 1 su mobile. Ogni card:
   emoji grande in alto, nome del piatto, descrizione breve, tag
   colorato in basso (categoria · sottocategoria). Stile editoriale
   "menu degustazione". Sfondo card bianco su sfondo warm della pagina.
   ═══════════════════════════════════════════════════════════════════ */
.sapori-section {
    padding: 4rem 0 2rem;
}
.sapori-h {
    font-family: var(--font-display);
    font-size: clamp(1.7rem, 3vw, 2.2rem);
    font-weight: 400;
    color: var(--ink);
    margin-bottom: .4rem;
    line-height: 1.15;
}
.sapori-h em {
    font-style: italic;
    color: var(--orange);
}
.sapori-sub {
    font-size: .92rem;
    color: var(--ink-lt);
    margin-bottom: 2.2rem;
    font-weight: 400;
    line-height: 1.5;
}
.sapori-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}
.sg {
    background: #fff;
    border: 1px solid var(--sand-md, #ece5d8);
    border-radius: 12px;
    padding: 22px 18px 18px;
    text-align: center;
    transition: transform .25s, box-shadow .25s, border-color .25s;
    cursor: default;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.sg:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0,0,0,.08);
    border-color: transparent;
}
.sg-ico {
    font-size: 2.4rem;
    display: block;
    margin-bottom: .7rem;
    line-height: 1;
}
.sg-name {
    font-family: var(--font-display);
    font-size: 1.08rem;
    font-weight: 500;
    color: var(--ink);
    margin-bottom: .5rem;
    line-height: 1.25;
}
.sg-desc {
    font-size: .82rem;
    color: var(--ink-md, #3a3228);
    line-height: 1.55;
    font-weight: 400;
    flex: 1;
    margin-bottom: .9rem;
}
.sg-tipo {
    font-family: var(--font-body);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 20px;
    display: inline-block;
    margin-top: auto;
}
/* Responsive sapori */
@media (max-width: 991.98px) {
    .sapori-grid { grid-template-columns: repeat(2, 1fr); gap: .9rem }
    .sapori-section { padding: 3rem 0 1.5rem }
}
@media (max-width: 575.98px) {
    .sapori-grid { grid-template-columns: 1fr; gap: .8rem }
    .sg { padding: 18px 16px 16px }
    .sg-ico { font-size: 2rem }
    .sg-name { font-size: 1rem }
    .sg-desc { font-size: .8rem }
}

/* ═══════════════════════════════════════════════════════════════════
   "COSA MANGIARE IN OGNI STAGIONE" - 4 card stagionali, sfondo SCURO
   ───────────────────────────────────────────────────────────────────
   Pannello dark che spezza il flusso warm con un'isola di contrasto.
   4 stagioni (primavera/estate/autunno/inverno) ognuna con periodo +
   nome poetico + descrizione delle specialita' + tag colorato.
   Decorativa emoji ::before semi-trasparente in background per dare
   carattere "menu invernale" (al singolo stato corrisponde un emoji
   diverso).
   ═══════════════════════════════════════════════════════════════════ */
.stagione-section {
    background: var(--dark, #1a2230);
    border-radius: 14px;
    padding: 2.8rem 2.5rem;
    margin: 3rem 0;
    position: relative;
    overflow: hidden;
}
.stagione-section::before {
    /* Wine glass emoji decorativo (U+1F377). Sintassi CSS escape per codepoint
       di 5 hex digits: il browser legge fino a 6 hex digits seguiti da spazio
       terminator, quindi '\01F377 ' con zero leading + spazio finale e' la
       forma piu' compatibile cross-browser per emoji in Astral Plane. */
    content: '\01F377 ';
    position: absolute;
    right: 2rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12rem;
    opacity: .06;
    line-height: 1;
    pointer-events: none;
    color: #fff;
}
.stag-h {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 2.5vw, 1.9rem);
    font-weight: 400;
    color: #fff;
    margin-bottom: .3rem;
    line-height: 1.15;
}
.stag-h em {
    font-style: italic;
    color: #f0c898;
}
.stag-sub {
    font-size: .92rem;
    color: rgba(255,255,255,.7);
    font-weight: 400;
    margin-bottom: 1.8rem;
    line-height: 1.5;
}
.stag-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .9rem;
    position: relative;
    z-index: 1;
}
.stag {
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 10px;
    padding: 18px 16px;
    position: relative;
    transition: background .2s, border-color .2s;
}
.stag:hover {
    background: rgba(255,255,255,.1);
    border-color: rgba(255,255,255,.18);
}
.stag-periodo {
    font-family: var(--font-body);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: rgba(255,255,255,.55);
    margin-bottom: .5rem;
}
.stag-nome {
    font-family: var(--font-display);
    font-size: 1.08rem;
    font-weight: 500;
    color: #fff;
    margin-bottom: .6rem;
    line-height: 1.2;
}
.stag-desc {
    font-size: .82rem;
    color: rgba(255,255,255,.75);
    line-height: 1.55;
    font-weight: 400;
    margin-bottom: .8rem;
}
.stag-tag {
    display: inline-block;
    font-family: var(--font-body);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: 3px 9px;
    border-radius: 20px;
}
@media (max-width: 991.98px) {
    .stag-grid { grid-template-columns: repeat(2, 1fr); gap: .8rem }
    .stagione-section { padding: 2.2rem 1.6rem; margin: 2rem 0 }
    .stagione-section::before { font-size: 8rem; right: 1rem }
}
@media (max-width: 575.98px) {
    .stag-grid { grid-template-columns: 1fr }
    .stagione-section { padding: 1.8rem 1.2rem }
}

/* punti salienti */
.cat-punti {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    margin-bottom: 2rem
}

.cp {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: .82rem;
    color: var(--ink-lt);
    font-weight: 300;
    line-height: 1.6
}

    .cp i {
        font-size: .9rem;
        flex-shrink: 0;
        margin-top: 1px
    }

    .cp strong {
        color: var(--ink-md);
        font-weight: 500
    }

/* CTA verso elenco */
.cat-cta-wrap {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap
}

.cat-cta-main {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-body);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #fff !important;
    padding: 13px 24px;
    border-radius: 4px;
    text-decoration: none;
    transition: all .25s;
    border: none;
}

    .cat-cta-main:hover {
        opacity: .88;
        transform: translateY(-1px);
        color: #fff
    }

    .cat-cta-main i {
        font-size: .72rem;
        transition: transform .22s
    }

    .cat-cta-main:hover i {
        transform: translateX(3px)
    }

.cat-cta-count {
    font-family: var(--font-body);
    font-size: .75rem;
    color: var(--ink-lt);
    font-weight: 300;
}

    .cat-cta-count strong {
        color: var(--ink-md);
        font-weight: 600
    }

/* ══ CONFRONTO rapido (tabella) ══ */
.compare-section {
    background: var(--sand);
    border-radius: 12px;
    border: 1px solid var(--sand-dk);
    margin: 4rem 0;
    overflow: hidden;
}

.cs-head {
    padding: 2rem 2.5rem 1.5rem;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--sand-dk);
}

.cs-h {
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 400;
    color: var(--ink)
}

    .cs-h em {
        font-style: italic;
        color: var(--orange)
    }

.cs-sub {
    font-size: .8rem;
    color: var(--ink-lt);
    font-weight: 300;
    max-width: 420px;
    line-height: 1.75
}

.compare-table {
    width: 100%;
    border-collapse: collapse
}

    .compare-table thead {
        background: var(--dark)
    }

    .compare-table th {
        padding: 11px 16px;
        text-align: left;
        font-family: var(--font-body);
        font-size: .75rem;
        font-weight: 600;
        letter-spacing: .18em;
        text-transform: uppercase;
        color: rgba(255,255,255,.7);
    }

        .compare-table th:first-child {
            color: #fff
        }

    .compare-table tbody tr {
        border-bottom: 1px solid var(--sand-dk);
        transition: background .18s
    }

        .compare-table tbody tr:hover {
            background: #fff
        }

        .compare-table tbody tr:last-child {
            border-bottom: none
        }

    .compare-table td {
        padding: 13px 16px;
        font-size: .82rem;
        color: var(--ink-md);
        vertical-align: middle
    }

.ct-tipo {
    display: flex;
    align-items: center;
    gap: 10px
}

.ct-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0
}

.ct-label {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 500
}

.ct-ico {
    font-size: .9rem;
    color: var(--ink-lt);
    text-align: center;
    display: block
}

.ct-si {
    color: #22a055;
    font-weight: 600
}

.ct-no {
    color: var(--ink-xs)
}

.ct-opt {
    color: var(--orange)
}

.ct-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--font-body);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #fff;
    padding: 5px 12px;
    border-radius: 3px;
    text-decoration: none;
    transition: opacity .2s;
}

    .ct-link:hover {
        opacity: .85;
        color: #fff
    }

/* ══ STRIP PROMO ══ */
.promo-strip {
    background: linear-gradient(135deg,var(--dark),#1a3a28);
    border-radius: 12px;
    padding: 2.5rem;
    margin: 2rem 0 4rem;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 2rem;
    align-items: center;
    position: relative;
    overflow: hidden;
}

    .promo-strip::before {
        content: '%';
        position: absolute;
        right: 2rem;
        top: 50%;
        transform: translateY(-50%);
        font-family: var(--font-display);
        font-size: 14rem;
        font-weight: 700;
        color: rgba(255,255,255,.025);
        line-height: 1;
        pointer-events: none;
    }

/* ── MODIFIER STRIP EVENTI GASTRONOMICI (Mangiare) ──
   Quando lo strip e' usato per "Eventi gastronomici" su Mangiare.aspx,
   override il gradient di default (verde) con la palette marrone-
   bordeaux dell'hero Mangiare per coerenza visiva tra hero e strip.
   Il '%' decorativo viene sostituito da un'icona piu' adatta (forchetta
   e coltello). L'em del titolo prende il tono oro-pesca dell'hero. */
.promo-strip.is-eventi-mangiare {
    background: linear-gradient(135deg, #1c0808 0%, #3a1208 60%, #5a1c08 100%);
}
.promo-strip.is-eventi-mangiare::before {
    /* &#127869; = U+1F37D = "forchetta e coltello su piatto" (entity decimale
       come content CSS richiede escape Unicode: \1F37D ). Decorativo,
       opacita' bassissima per non dominare. */
    content: '\01F37D ';
    font-family: inherit;
    font-weight: normal;
    font-size: 16rem;
    color: rgba(255,255,255,.04);
    right: 1.4rem;
}
.promo-strip.is-eventi-mangiare .ps-h em {
    color: #f0c898;
}

.ps-eyebrow {
    font-family: var(--font-body);
    font-size: .75rem;
    font-weight: 500;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: rgba(255,255,255,.35);
    margin-bottom: .6rem
}

.ps-h {
    font-family: var(--font-display);
    font-size: 1.7rem;
    font-weight: 300;
    color: #fff;
    margin-bottom: .5rem
}

    .ps-h em {
        font-style: italic;
        color: #8dd4c0
    }

.ps-p {
    font-size: .84rem;
    color: rgba(255,255,255,.42);
    font-weight: 300;
    line-height: 1.75;
    max-width: 480px
}

.ps-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-body);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    background: var(--orange);
    color: #fff !important;
    padding: 14px 26px;
    border-radius: 4px;
    text-decoration: none;
    white-space: nowrap;
    transition: all .25s;
    flex-shrink: 0;
}

    .ps-btn:hover {
        background: #b05e38;
        color: #fff;
        transform: translateY(-1px)
    }

/* ══ FAQ ══ */
.faq-section {
    padding: 4rem 0 2rem
}

.faq-h {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 400;
    color: var(--ink);
    margin-bottom: .5rem
}

    .faq-h em {
        font-style: italic;
        color: var(--orange)
    }

.faq-sub {
    font-size: .86rem;
    color: var(--ink-lt);
    font-weight: 300;
    margin-bottom: 2rem
}

.faq {
    display: flex;
    flex-direction: column;
    gap: .5rem
}

.fq {
    background: #fff;
    border: 1px solid var(--sand-dk);
    border-radius: 8px;
    overflow: hidden
}

.fq-q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    cursor: pointer;
    gap: 1rem;
    font-family: var(--font-display);
    font-size: 1.08rem;
    font-weight: 500;
    color: var(--ink);
    transition: background .18s;
    user-select: none;
    list-style: none;
}

    .fq-q::marker, .fq-q::-webkit-details-marker {
        display: none
    }

    .fq-q:hover {
        background: var(--sand)
    }

details.fq[open] .fq-q {
    background: var(--sand);
    border-bottom: 1px solid var(--sand-dk)
}

.fq-arrow {
    font-size: .75rem;
    color: var(--ink-lt);
    flex-shrink: 0;
    transition: transform .3s
}

details.fq[open] .fq-arrow {
    transform: rotate(180deg);
    color: var(--orange)
}

.fq-a {
    padding: 16px 20px;
    font-size: .85rem;
    color: var(--ink-lt);
    line-height: 1.88;
    font-weight: 300
}

    .fq-a strong {
        color: var(--ink-md);
        font-weight: 500
    }

    .fq-a a {
        color: var(--orange);
        text-decoration: none
    }

        .fq-a a:hover {
            text-decoration: underline
        }


/* ═══════════════════════════════════════════════════════════════════
   COMUNI LIST - Blocco SEO nella sidebar di DormireList.aspx
   Lista di link strutturati tipo "Hotel a Portoferraio (12)".
   Sostituisce la vecchia <select> dei comuni.
   ═══════════════════════════════════════════════════════════════════ */
.comuni-list {
    display: flex;
    flex-direction: column;
    gap: .2rem
}

.comuni-list .cm-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    padding: .55rem .75rem;
    border-radius: 6px;
    font-family: var(--font-body);
    font-size: .82rem;
    line-height: 1.3;
    color: var(--ink, #18140f);
    text-decoration: none;
    transition: background-color .18s ease, color .18s ease
}

    .comuni-list .cm-link:hover {
        background: var(--sand, #f4efe6);
        color: var(--ink, #18140f);
        text-decoration: none
    }

    /* Voce "Tutti i comuni" come reset: sempre in cima, separata visivamente */
    .comuni-list .cm-link.cm-all {
        font-weight: 600;
        border-bottom: 1px solid var(--sand-md, #ece5d8);
        margin-bottom: .35rem;
        padding-bottom: .7rem;
        border-radius: 0
    }

    /* Voce attiva: il comune selezionato. Tinta brand "hotel" per coerenza
       col colore della macro Dormire / categoria Hotel. */
    .comuni-list .cm-link.active {
        background: var(--hotel-mid, rgba(13, 95, 138, .12));
        color: var(--hotel, #0d5f8a);
        font-weight: 600
    }

        .comuni-list .cm-link.active .cm-count {
            background: var(--hotel, #0d5f8a);
            color: #fff
        }

    /* Voce disabilitata: comune senza strutture in questa categoria.
       Non cliccabile, opaca, ma resta indicizzabile dai motori come testo. */
    .comuni-list .cm-link.disabled {
        opacity: .42;
        cursor: not-allowed;
        pointer-events: none;
        background: transparent
    }

.comuni-list .cm-name {
    flex: 1;
    min-width: 0
}

.comuni-list .cm-count {
    flex-shrink: 0;
    font-size: .75rem;
    font-weight: 600;
    color: var(--ink-lt, #6f665a);
    background: var(--sand, #f4efe6);
    padding: 2px 9px;
    border-radius: 12px;
    line-height: 1.5;
    min-width: 28px;
    text-align: center
}


/* ═══════════════════════════════════════════════════════════════════
   ALTRE CATEGORIE - Cross-link dinamico nella sezione intro
   Sostituisce il vecchio tip-box statico. Mostra le altre categorie
   della macro corrente come card cliccabili.
   ═══════════════════════════════════════════════════════════════════ */
.other-cats {
    grid-column: 1 / -1
}

.other-cats-head {
    margin-bottom: 1.5rem
}

.other-cats-title {
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 400;
    color: var(--ink, #18140f);
    margin-bottom: .4rem
}

.other-cats-intro {
    font-size: .88rem;
    color: var(--ink-lt, #6f665a);
    font-weight: 300;
    line-height: 1.5
}

.other-cats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem
}

.oc-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 18px 18px 20px 18px;
    background: #fff;
    border: 1px solid var(--sand-md, #ece5d8);
    border-radius: 10px;
    text-decoration: none;
    color: inherit;
    transition: border-color .2s ease, transform .2s ease, box-shadow .25s ease
}

    .oc-card:hover {
        border-color: var(--hotel, #0d5f8a);
        transform: translateY(-3px);
        box-shadow: 0 12px 28px rgba(0, 0, 0, .07);
        text-decoration: none;
        color: inherit
    }

.oc-icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--hotel-lt, #e8f3fa);
    color: var(--hotel, #0d5f8a);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem
}

.oc-body {
    flex: 1;
    min-width: 0
}

.oc-t {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 500;
    color: var(--ink, #18140f);
    margin-bottom: .25rem
}

.oc-d {
    font-size: .78rem;
    color: var(--ink-lt, #6f665a);
    line-height: 1.45;
    margin-bottom: .5rem
}

.oc-arrow {
    font-family: var(--font-body);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--hotel, #0d5f8a);
    display: inline-flex;
    align-items: center;
    gap: 5px
}


/* ════════════════════════════════════════════════════════════════════
   MANGIARE - modifier .hero-mangiare applicato a #page-hero esistente.
   Struttura HTML/CSS identica a Dormire (#page-hero + .ph-*). Cambiano
   SOLO i colori del gradient bg + accent em h1 (verde/marrone vs blu).
   Tutto il resto (padding, font, .ph-pattern, .ph-inner, ecc.) e' ereditato.

   .cat-content = sezione testo lunga nelle pagine categoria.
   .guida-section = cross-nav in fondo verso le altre categorie mangiare.
   ════════════════════════════════════════════════════════════════════ */

/* Modifier color theme MANGIARE - palette VERA dal template mangiare-hub.html:
   gradient rosso scuro -> marrone bordeaux -> verde-marrone scurissimo
   (richiama cantina/cucina rustica notturna, NON verde fields). */
#page-hero.hero-mangiare .ph-bg {
    background: linear-gradient(158deg, #1c0808 0%, #3a1208 40%, #1a1c08 100%);
}
/* Accent em titolo: oro-pesca caldo (template usa #f0c898) */
#page-hero.hero-mangiare .ph-h1 em {
    color: #f0c898;
}

/* CAT-CONTENT: sezione testuale categoria (es. sezione "I migliori tipi di cucina") */
.cat-content {
    padding: 3rem 0 1rem;
    border-top: 1px solid var(--sand, #f4efe6);
}
.cat-content .cat-h {
    font-family: var(--font-display);
    font-size: clamp(1.4rem, 3vw, 1.9rem);
    font-weight: 400;
    margin-bottom: 1.2rem;
}
.cat-content .cat-body {
    font-family: var(--font-body);
    font-size: 0.95rem;
    line-height: 1.75;
    color: var(--ink-md, #3a3228);
}
.cat-content .cat-body p { margin: 0 0 1rem; }
.cat-content .cat-body ul {
    padding-left: 1.2rem;
    margin: 0 0 1rem;
}
.cat-content .cat-body li { margin-bottom: 0.4rem; }
.cat-content .cat-body strong { color: var(--ink, #18140f); font-weight: 600; }

/* GUIDA-SECTION: cross-nav alle altre categorie mangiare */
.guida-section {
    margin: 4rem 0 2rem;
    padding: 3rem 2rem;
    background: var(--warm, #fdfaf5);
    border-radius: 12px;
    border: 1px solid var(--sand, #f4efe6);
}
.guida-header {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 2.5rem;
}
.guida-eyebrow {
    font-family: var(--font-body);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--orange, #e66a31);
    margin-bottom: 0.6rem;
}
.guida-h {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 3.5vw, 2.2rem);
    font-weight: 400;
    margin: 0 0 0.8rem;
    color: var(--ink, #18140f);
}
.guida-h em { font-style: italic; font-weight: 300; color: var(--ink-md, #3a3228); }
.guida-sub {
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--grey, #6b6358);
    margin: 0;
}
.guida-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    max-width: 1100px;
    margin: 0 auto;
}
.guida-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 18px;
    background: #fff;
    border: 1px solid var(--sand, #f4efe6);
    border-left: 4px solid var(--c, var(--orange));
    border-radius: 8px;
    text-decoration: none;
    color: var(--ink, #18140f);
    transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
}
.guida-card:hover,
.guida-card:focus-visible {
    background: var(--c, var(--orange));
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}
.guida-card:hover .guida-icon,
.guida-card:hover .guida-arrow { color: #fff; }
.guida-icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(0,0,0,0.04);
    color: var(--c, var(--orange));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    flex-shrink: 0;
    transition: background .2s ease;
}
.guida-card:hover .guida-icon { background: rgba(255,255,255,0.18); }
.guida-name {
    flex: 1;
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1.25;
}
.guida-arrow {
    color: var(--c, var(--orange));
    font-size: 0.85rem;
    transition: transform .2s ease;
}
.guida-card:hover .guida-arrow { transform: translateX(3px); }

/* RESPONSIVE guida-grid: tablet 2 col, mobile 1 col */
@media (max-width: 991.98px) {
    .guida-grid { grid-template-columns: repeat(2, 1fr); }
    .guida-section { padding: 2.5rem 1.5rem; }
}
@media (max-width: 575.98px) {
    .guida-grid { grid-template-columns: 1fr; }
}


/* ════════════════════════════════════════════════════════════════════
   ╔════════════════════════════════════════════════════════════════╗
   ║   HOME PAGE - RESPONSIVE / MOBILE AUDIT 2026-05-27            ║
   ║   Tutte le sezioni della home (stats, scopri, dormire,        ║
   ║   mangiare, sport, spiagge, traghetto, news, home-intro)      ║
   ║   non avevano nessuna media query: grid 4-col, 2-col fisse,   ║
   ║   padding 100px verticale, decoration 18rem fissa che         ║
   ║   strabordava. Tutto raggruppato qui in basso per facile      ║
   ║   manutenzione futura.                                         ║
   ║                                                                ║
   ║   3 breakpoint:                                                ║
   ║   - 991.98px = tablet portrait (~iPad)                         ║
   ║   - 767.98px = mobile landscape / phablet                      ║
   ║   - 575.98px = small phone (~iPhone SE)                        ║
   ════════════════════════════════════════════════════════════════════ */

/* ═══════════ TABLET (≤ 991px) ═══════════ */
@media (max-width: 991.98px) {

    /* Riduzione padding verticale generale sezioni home */
    #scopri, #dormire, #mangiare, #sport, #spiagge, #traghetto, #news {
        padding: 70px 0;
    }
    #home-intro { padding: 60px 0 50px; }
    #home-faq { padding: 60px 0 70px; }

    /* SCOPRI: collasso 2 col -> 1 col, le 6 card restano 2x3 */
    .scopri-layout {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    /* DORMIRE: 4 col -> 2x2 (su tablet sono ancora visibili in coppia) */
    .accom-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.2rem;
    }

    /* MANGIARE: 2 col -> 1 col, gap ridotto */
    .food-layout {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    /* SPIAGGE: layout 2 col -> 1 col */
    .spiagge-layout {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    /* TRAGHETTO: layout 2 col -> 1 col, decoration ridotta */
    .traghetto-layout {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
    .traghetto-deco { font-size: 11rem; right: -40px; }

    /* HOME INTRO: 2 col (testo + immagine) -> 1 col */
    .home-layout {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    /* Mosaic spiagge: il big spans 2 row su desktop, qui rendo tutto in flow naturale */
    .spiagge-mosaic {
        grid-template-columns: 1fr 1fr;
    }
    .mosaic-big { min-height: 320px; }
    .mosaic-small { min-height: 160px; }
}


/* ═══════════ MOBILE (≤ 767px) ═══════════ */
@media (max-width: 767.98px) {

    /* Padding verticale ulteriormente ridotto */
    #scopri, #dormire, #mangiare, #sport, #spiagge, #traghetto, #news {
        padding: 50px 0;
    }
    /* Padding orizzontale ridotto su TUTTI gli *-inner della home */
    .stats-inner,
    .scopri-inner,
    .dormire-inner,
    .mangiare-inner,
    .sport-inner,
    .spiagge-inner,
    .traghetto-inner,
    .news-inner {
        padding-left: 1.2rem;
        padding-right: 1.2rem;
    }

    /* STATS: 5 stat in linea diventa stretto. Lascio il flex-wrap fare il suo,
       ma riduco font-size dei numeri e gap. */
    .stats-inner { gap: 1.5rem 1rem; padding-top: 6px; padding-bottom: 6px; }
    .stat-num { font-size: 1.7rem; }
    .stat-lbl { font-size: .75rem; }

    /* SCOPRI: la grid 6 card 2x3 e' OK su mobile, ma stringerla */
    .scopri-cards { gap: 0.8rem; }
    .s-card { padding: 16px; }
    .s-card-title { font-size: 1rem; }
    .s-card-desc { font-size: .75rem !important; }

    /* DORMIRE: header da flex space-between su desktop -> column su mobile
       (il titolo+desc resta sopra, il btn "cerca dormire" sotto). Il div
       inline-style flex e' selezionato via discendente. */
    .dormire-header > div[style*="space-between"] {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    .accom-name { font-size: 1.15rem; }
    .accom-card { aspect-ratio: 4/3; }

    /* MANGIARE: tile 2x2 ok, ma riduco padding e font */
    .food-tile { padding: 16px 14px; }
    .food-tile-title { font-size: 1rem; }
    .food-tile-desc { font-size: .75rem; }
    .food-featured { aspect-ratio: 5/4; }
    .food-featured-content { padding: 20px; }
    .food-featured-title { font-size: 1.5rem; }
    .food-featured-sub { font-size: 0.82rem; }   /* 0.74rem = 11,8px: sotto i 12 */

    /* SPORT: header e' un flex space-between inline -> stesso trucco */
    #sport > .sport-inner > div[style*="space-between"] {
        flex-direction: column !important;
        align-items: flex-start !important;
        margin-bottom: 1.5rem !important;
    }
    /* Sport-item piu' stretto per vedere 1.5 card alla volta -> indizio scroll */
    .sport-item { flex: 0 0 200px; }
    .sport-item-name { font-size: 1rem; }

    /* SPIAGGE: mosaico passa a 1 col, big sopra full-width */
    .spiagge-mosaic {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }
    .mosaic-big {
        grid-row: auto;
        min-height: 240px;
    }
    .mosaic-small { min-height: 200px; }
    .mosaic-label { font-size: 0.95rem; bottom: 12px; left: 12px; }

    /* TRAGHETTO: ridurre decoration ulteriormente */
    .traghetto-deco { font-size: 7rem; right: -30px; opacity: 0.04; }
    .trag-feat { padding: 14px 14px; gap: 12px; }
    .trag-feat-title { font-size: 0.85rem; }
    .trag-feat-sub { font-size: .75rem; }

    /* NEWS: header da row a column, card piu' larghe per mobile */
    .news-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
    /* News card a 85% del viewport -> l'utente vede un pezzo della
       successiva, suggerendo "swipe per altre news". UX standard mobile. */
    .news-card { flex: 0 0 85%; }
    .news-card-img { height: 200px; }
    .news-card-title { font-size: 1rem; }

    /* TITOLI SECTION: scalo i font dei titoli h2 sezione */
    .section-title { font-size: clamp(1.6rem, 7vw, 2.2rem); }
}


/* ═══════════ SMALL PHONE (≤ 575px) ═══════════ */
@media (max-width: 575.98px) {

    /* DORMIRE: su small phone le 2 col diventano troppo strette, vado a 1 col */
    .accom-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    .accom-card { aspect-ratio: 16/10; }

    /* SCOPRI: 6 card 2 col -> 1 col su small phone (con 2x3 le card sono troppo strette) */
    .scopri-cards {
        grid-template-columns: 1fr;
    }

    /* MANGIARE: 4 tile 2x2 -> 1 col */
    .food-tiles {
        grid-template-columns: 1fr;
    }

    /* STATS: 5 stat in linea su 320-375px e' impossibile -> 2 col compatte
       (margin-auto del flex-wrap fa il lavoro, basta ridurre min-width) */
    .stat-item { min-width: 38%; }
}


/* ════════════════════════════════════════════════════════════════════
   ╔════════════════════════════════════════════════════════════════╗
   ║   DORMIRE LIST - RESPONSIVE / MOBILE AUDIT 2026-05-27         ║
   ║   Tutte le grid 2-col non collassavano: page-intro hero,      ║
   ║   intro long-form, main layout (sidebar 260+grid), card-grid  ║
   ║   3col, sezione "altre macro" alternate, promo-strip.         ║
   ║   Sidebar: in mobile va SOPRA le card (default flow) + non    ║
   ║   piu' sticky (sennò si attacca al header e disturba scroll). ║
   ╚════════════════════════════════════════════════════════════════╝
   ════════════════════════════════════════════════════════════════════ */

/* ═══════════ TABLET DORMIRE (≤ 991px) ═══════════ */
@media (max-width: 991.98px) {
    /* HERO pagina (titolo + filtro chips): 2col -> 1col centrata */
    .page-intro {
        grid-template-columns: 1fr;
        gap: 2.5rem;
        padding: 3rem 0 2rem;
    }
    /* MAIN LAYOUT: sidebar va in flow naturale SOPRA la card grid,
       sticky disattivato (sull'altezza mobile da fastidio) */
    #main-content {
        grid-template-columns: 1fr;
        gap: 2rem;
        padding: 1.5rem 1.5rem 4rem;
    }
    .sidebar {
        position: static !important;
        top: auto !important;
    }
    /* CARD GRID: 3col -> 2col su tablet */
    .card-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
    /* INTRO long-form SEO (1.2fr 1fr) -> 1col */
    .intro-inner {
        grid-template-columns: 1fr;
        gap: 2rem;
        padding: 0 1.5rem;
    }
    /* SEZIONE altre macro (1fr 1fr alternata) -> 1col, no rtl */
    .cat-inner {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    .cat-section:nth-of-type(even) .cat-inner {
        direction: ltr;
    }
    /* PROMO strip: 1fr auto -> 1col, % background ridotto.
       2026-09-24 (Andrea: "tutto disallineato su mobile"): prima era CENTRATA
       mentre il resto della pagina e' allineato a sinistra (sezioni sopra,
       FAQ sotto). Ora testo a sinistra e bottone largo quanto il suo testo,
       come i bottoni delle sezioni vicine. Vale per Dormire e Mangiare. */
    .promo-strip {
        grid-template-columns: 1fr;
        gap: 1rem;
        padding: 2rem 1.5rem;
        margin: 1.5rem 0 3rem;
        text-align: left;
        justify-items: start;
    }
    .promo-strip::before {
        font-size: 9rem;
        right: 1rem;
    }
    /* SEZIONE generale .cat-section: padding verticale ridotto */
    .cat-section {
        padding: 3rem 0;
    }
    .page-w {
        padding: 0 1.5rem 4rem;
    }
}


/* ═══════════ MOBILE DORMIRE (≤ 767px) ═══════════ */
@media (max-width: 767.98px) {
    /* CARD GRID: 2 -> 1col su phone (le card piu' grandi sono leggibili) */
    .card-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    /* HERO page-intro: padding ridotto + titolo scalato */
    .page-intro {
        padding: 2rem 1.2rem 1.5rem;
        gap: 1.5rem;
    }
    /* Main content: padding orizzontale ridotto */
    #main-content {
        padding: 1rem 1.2rem 3rem;
        gap: 1.5rem;
    }
    .intro-inner {
        padding: 0 1.2rem;
        gap: 1.5rem;
    }
    .page-w {
        padding: 0 1.2rem 3rem;
    }
    /* PROMO strip: padding ulteriormente ridotto, % nascosto */
    .promo-strip {
        padding: 1.5rem 1.2rem;
    }
    .promo-strip::before {
        font-size: 6rem;
        right: 0.5rem;
        opacity: 0.6;
    }
    /* SIDEBAR mobile: padding interno ridotto, blocchi compatti */
    .sb-block {
        padding: 14px 14px;
    }
}
   ║   Markup: vedi MasterPage.master "MOBILE HEADER + FULLSCREEN". ║
   ║   Visibile solo su <= 991px. Su desktop tutto display:none.    ║
   ║                                                                ║
   ║   ⚠ TUTTO IL CSS DI HEADER + MENU MOBILE È STATO MIGRATO       ║
   ║   nel file dedicato App_Style/elm-mobile-nav.css per           ║
   ║   isolarlo da regole tema GoodLayers e dal resto del CSS site. ║
   ║   Non aggiungere qui regole .elm-mobile-*, .elm-mh-*, .elm-mm-*║
   ║   .elm-brand-*, body.elm-has-hero/scrolled/mm-locked!          ║
   ║   Vedi elm-mobile-nav.css.                                     ║
   ╚════════════════════════════════════════════════════════════════╝
   ════════════════════════════════════════════════════════════════════ */

/* === TUTTO MIGRATO IN elm-mobile-nav.css === */


/* ════════════════════════════════════════════════════════════════════
   ╔════════════════════════════════════════════════════════════════╗
   ║   FOOTER MOBILE - HIDE MACRO MENU (2026-05-27 / 28)             ║
   ║   Su mobile il menu hamburger gia' fornisce la navigazione     ║
   ║   macro (Dormire/Mangiare/Scopri/...). Replicarla nel footer  ║
   ║   e' ridondante e mangia spazio. Pattern Booking/Airbnb/        ║
   ║   TripAdvisor mobile.                                          ║
   ║                                                                ║
   ║   2026-05-28 fix: il break originale 767.98 era troppo         ║
   ║   restrittivo, lasciava le macro visibili su smartphone in     ║
   ║   landscape (~932px iPhone 14 Pro Max) e tablet portrait        ║
   ║   (iPad ~768px). Alzato a 991.98 per coerenza con tutti gli    ║
   ║   altri mobile breakpoint del sito (filterbar, drawer, ecc.)   ║
   ║   e con quando l'header mobile e' attivo.                      ║
   ║                                                                ║
   ║   Nascondo TUTTO il container delle column macro                ║
   ║   (.elm-footer-macro). Restano solo le column brand: Hai       ║
   ║   un'attivita' / Newsletter / Social / Lingua / Privacy.       ║
   ╚════════════════════════════════════════════════════════════════╝
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 991.98px) {
    /* Hide column macro (le 6 column generate da GeneraMenuFooterHtml).
       Il container parent ha classe esplicita .elm-footer-macro-wrap
       (aggiunta in Xml_Extract.cs GeneraMenuFooterHtml). Cosi' nascondo
       l'intero container con una semplice regola di classe, compatibile
       con TUTTI i browser senza dipendere da :has() (che ha supporto
       limitato su Safari <15.4 e Chrome <105). Era la causa di Andrea
       che vedeva ancora le macro nel footer mobile. */
    .elm-footer-macro-wrap { display: none !important; }
    /* Belt-and-braces: nascondo anche le singole column per coprire eventuali
       casi in cui il wrapper non avesse ancora la nuova classe (cache,
       deploy parziale, ecc.) */
    .elm-footer-macro { display: none !important; }
}

/* ================================================================
   FILTRO PER COMUNE (App_Code/FiltroComune.cs) - banner in testa al
   contenuto delle pagine categoria filtrate /{categoria}/{comune}:
   Attivita' di mare, Trekking, Divertimento, Shopping, Escursioni
   guidate, Aziende agricole. 2026-09-22
   ================================================================ */
.elm-filtro-comune{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;
    margin:0 0 2rem;padding:14px 18px;border-radius:10px;
    background:#f3f7f4;border:1px solid #d6e6db;color:#1a1a2e}
.elm-filtro-comune > i{font-size:1.2rem;color:#2d7a4f;flex-shrink:0}
.elm-filtro-comune p{flex:1 1 200px;margin:0;font-size:.95rem;line-height:1.55;color:#3a3848}
.elm-filtro-comune p strong{color:#1a1a2e}
.elm-filtro-comune.is-empty{background:#fff7ea;border-color:#f0d9b0}
.elm-filtro-comune.is-empty > i{color:#b86e00}
.elm-filtro-comune-lk{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:8px 14px;
    border-radius:6px;background:#fff;border:1px solid currentColor;color:#1f5c3a;
    font-size:.86rem;font-weight:600;text-decoration:none;white-space:nowrap}
.elm-filtro-comune-lk:hover{background:#1f5c3a;color:#fff;border-color:#1f5c3a}
@media (max-width:575.98px){
    .elm-filtro-comune{padding:14px}
    .elm-filtro-comune-lk{width:100%;justify-content:center}
}
/* FIX P8 (2026-10-08): stato vuoto dei listing Dormire/Ristoranti a tutta
   larghezza della griglia card (prima stava in una sola colonna). */
.card-grid > .no-results{grid-column:1 / -1}
.card-grid > .no-results .elm-filtro-comune{margin:0}



/* ══════════════════════════════════════════════════════════════════
   PAVIMENTO DI LEGGIBILITA' E DI TOCCO SU MOBILE - 2026-09-23
   Misurato a 390x844 su 139 pagine: 3.428 testi sotto i 12px e 1.918
   controlli sotto i 32px. Non erano casi sparsi: sono sempre gli stessi
   componenti, ripetuti dentro le card. Le liste peggiori: Spiagge 316
   testi piccoli e 204 controlli, Numeri utili 73 e 72, Vini 148.

   PERCHE' CON !important
   Queste classi sono dichiarate in <style> dentro i .aspx, che nel
   documento viene DOPO questo foglio, e spesso con selettori piu'
   specifici (.spiagge-page .bcard-type). Senza !important qualunque
   regola messa qui perde, e l'alternativa era modificare dodici pagine
   con lo stesso identico valore: una sola riga sbagliata in futuro e il
   pavimento si buca senza che nessuno se ne accorga.
   L'elenco e' ESPLICITO, classe per classe: niente selettori generici,
   niente wildcard. Chi vuole un testo piu' piccolo su un componente
   nuovo non viene toccato.

   Vale SOLO sotto i 992px: su desktop la grafica resta identica.
   Due soglie, entrambe da linee guida: 12px il minimo leggibile su
   telefono, 44px l'area di tocco. Sulle pill dei filtri mi fermo a 40
   per non spezzare la riga a scorrimento.
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 991.98px) {

    /* --- testi: nessuno sotto i 12px --- */
    .pc-type-badge, .bcard-type, .bdg, .ct-count, .nsi-tag,
    .cc-portal, .vt-bar, .stat-lbl, .news-cat,
    .evt-cat, .evt-m, .accom-tag { font-size: .75rem !important; }

    .pc-stars, .bcard-com, .ph-stat-l, .vside-hd, .section-label,
    .sport-item-sub, .sp-pill, .elm-side-share-lb, .pf-eyebrow,
    .vs-eyebrow, .ec-lbl, .cc-vino-tag, .cc-claim { font-size: .78rem !important; }

    .bcard-abs, .s-card-desc, .food-tile-desc, .food-featured-sub,
    .trag-feat-sub, .num-card-su, .num-card-note, .at-ok { font-size: .82rem !important; }

    /* seconda passata del 23/09: le classi delle pagine che erano rimaste
       sopra i 70 testi piccoli (Meteo, Erbe, Ricette, Luoghi, hub Scopri) */
    .met-sec-eyebrow, .met-uv-h, .met-day-d, .met-w-day,
    .sp-tm-l, .sp-fc-d,
    .erba-uso, .erba-lat, .whc-spec-lbl, .whc-aroma, .whc-pill,
    .whc-block-lbl, .cert-full, .whc-bottle-doc,
    .rec-tag, .rec-badge, .rec-alias, .rec-ingr-t, .prod-desc, .ss-r, .ed-eyebrow,
    .lu-tipo, .lu-chip-n, .xnav-tx, .vsct-su,
    .cc-tag, .bi-badge, .sc-month, .eyebrow, .sk-diff, .sk-tag,
    .ev-cat, .sc-season { font-size: .78rem !important; }

    /* Numeri utili: 35 link al sito e 34 al telefono, alti 21 e 24px.
       Sono i due controlli piu' importanti della pagina. */
    .num-card-site, .num-card-num {
        min-height: 44px !important;
        display: inline-flex;
        align-items: center;
    }

    .ph-stat-l { line-height: 1.35; }

    /* --- aree di tocco: cresce il riquadro, non il disegno --- */
    .bcard-cta, .elm-show-more, .news-card-go {
        min-height: 44px !important;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .pc-fav, .elm-sh-btn {
        min-width: 44px !important;
        min-height: 44px !important;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .nws-tag {
        min-height: 36px !important;
        display: inline-flex;
        align-items: center;
    }
    .sp-pill {
        min-height: 40px !important;
        display: inline-flex;
        align-items: center;
    }

    /* seconda tornata del 23/09, dalle voci rimaste aperte nell'audit */

    /* "Apri in Maps" nelle schede: era alto 21px ed e' il link che porta
       l'utente alla navigazione satellitare, cioe' uno dei piu' usati. */
    .elm-poi-dist {
        min-height: 44px !important;
        display: inline-flex;
        align-items: center;
    }

    /* Bottone Filtri e toggle Lista/Mappa dei listing: 25-29px. */
    .elm-mfilters-btn,
    #elmBtnList, #elmBtnMap,
    .elm-viewtoggle button, .elm-viewtoggle a {
        min-height: 40px !important;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Zoom della mappa Leaflet: 30x30 di default, sotto soglia. */
    .leaflet-touch .leaflet-control-zoom-in,
    .leaflet-touch .leaflet-control-zoom-out,
    .leaflet-control-zoom-in,
    .leaflet-control-zoom-out {
        width: 40px !important;
        height: 40px !important;
        line-height: 38px !important;
    }

    /* Link "sito ufficiale" nel piede delle card editoriali (Aziende
       agricole, Attivita' di mare, Cantine, Numeri utili): 14-22px. */
    .cc-claim, .op-claim, .cc-web, .nc-num, .it-comp-go, .ph-epoca {
        min-height: 44px !important;
        display: inline-flex;
        align-items: center;
    }

    /* Breadcrumb: i link erano alti 29px. Cresce solo l'area toccabile,
       il testo resta dov'e' grazie al margine negativo. */
    .breadcrumb-nav a {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        padding: 0;
        margin: -7px 0;
    }
}


/* ══════════════════════════════════════════════════════════════════
   CAMPI FORM SU MOBILE: MAI SOTTO I 16px - 2026-09-23
   Safari su iPhone ingrandisce la pagina da solo quando si tocca un
   campo con font sotto i 16px, e non la rimpicciolisce piu': l'utente
   si ritrova il sito zoomato mentre compila. Non e' una preferenza
   estetica, e' un comportamento del sistema operativo.

   Regola per TIPO e non per classe, di proposito: cosi' vale anche per
   i campi che verranno aggiunti domani. Sotto i 992px soltanto.
   Esclusi i bottoni (submit/button/reset), le checkbox e i radio: non
   fanno zoomare niente e ingrandirli cambierebbe la grafica per nulla.

   Misurato prima: 8 campi sotto soglia su tutte le 42 pagine macro e
   categoria (ricerca e filtri di Cartine, Luoghi, News, piu' il
   calendario della home). I form veri - preventivo, promuovi attivita',
   contatto nelle schede - erano gia' a posto.
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 991.98px) {
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    input[type="search"],
    input[type="url"],
    input[type="password"],
    input[type="date"],
    input[type="datetime-local"],
    input[type="month"],
    input[type="time"],
    input[type="week"],
    input:not([type]),
    select,
    textarea {
        font-size: 16px !important;
    }
}


/* ══════════════════════════════════════════════════════════════════════
   STICKY SU TUTTO IL SITO: sblocco dei wrapper del tema (2026-09-23)
   ----------------------------------------------------------------------
   Difetto misurato il 23/09 sulla lista Hotel: la barra Filtri/Lista/Mappa
   (#filterbar) E' gia' position:sticky con top:58px, ma scorrendo a 2.480 px
   finiva a top -1796, cioe' usciva del tutto dallo schermo.
   Causa: .hotale-body-outer-wrapper ha overflow:hidden. Un antenato con
   overflow diverso da visible diventa lo scroll-container di riferimento
   dello sticky; se quel contenitore non scrolla, l'elemento non si aggancia
   mai. E' lo stesso difetto gia' risolto sulle schede dettaglio, ma quel fix
   vive in scheda-dettaglio.css e quindi NON arrivava alle pagine lista.
   overflow-x:clip taglia esattamente come hidden (nessuno scroll orizzontale
   in piu') ma NON crea uno scroll-container, quindi lo sticky torna a
   funzionare. Verificato sulla tab reale: da -1796 a 58 px, 0 scroll
   orizzontale.
   ══════════════════════════════════════════════════════════════════════ */
.hotale-body-outer-wrapper,
.hotale-body-wrapper,
#hotale-page-wrapper,
.gdlr-core-page-builder-body{
    overflow-x: clip;
    overflow-y: visible;
}

/* =====================================================================
   FOOTER - leggibilita' paragrafi e link del copyright (24/09/2026)
   ---------------------------------------------------------------------
   Richiesta di Andrea (audit punto 07). Il logo che sporge dall'header
   NON si tocca: e' voluto. Le regole del footer mobile congelato
   (.elm-footer-macro-wrap) restano come sono.
   - Paragrafi del footer: erano #9e9e9e su #f7f7f7 = contrasto 2,5:1.
     Ora #6b6b6b = 4,97:1 (soglia di leggibilita' 4,5:1).
   - Link del copyright ("Area Riservata"): era #e66a31 = 3,03:1 e alto
     19 px, troppo piccolo da toccare. Ora arancio scuro #b34d1c = 4,91:1
     (hover #8f3d16) e area di tocco alta almeno 24 px.
   ===================================================================== */
.hotale-footer-wrapper p{
    color:#6b6b6b;
}
.hotale-copyright-wrapper a{
    color:#b34d1c;
    display:inline-flex;align-items:center;
    min-height:24px;
    padding:0 2px;
}
.hotale-copyright-wrapper a:hover,
.hotale-copyright-wrapper a:focus{
    color:#8f3d16;
}

/* =============================================================================
   FIX 2026-10-09 (x) - DESKTOP: barre sticky sotto l'header fisso (richiesta di Andrea)
   Gli offset del sito erano tarati su un header di 58px; quello vero e' 73px
   (>=1200px) e 121px (1000-1199px, menu a capo). App_Script/elm-header-offset.js
   misura l'header e pubblica --elm-hdr-h e --elm-hdr-d (= altezza - 58) su <html>;
   i "top" sticky e gli scroll-margin usano calc(Npx + var(--elm-hdr-d,0px)).
   Su mobile --elm-hdr-d vale 0 (header mobile congelato: nulla cambia).
   Il logo che sporge e' voluto: quando la barra e' agganciata (.elm-docked) il
   contenitore interno (.elm-dock-in) riceve un padding-left inline che porta la
   prima voce a destra del logo. Qui solo la transizione.
   ============================================================================= */
@media (min-width: 992px) {
    .elm-dock-in { transition: padding-left .45s cubic-bezier(.2, .8, .2, 1); }
}
@media (prefers-reduced-motion: reduce) {
    .elm-dock-in { transition: none; }
}
/* Barra agganciata in cui il rientro dal logo farebbe uscire le ultime voci a destra
   (es. #vnav di Aziende/Vini tra 1200 e 1365px): voci piu' compatte. Classe messa
   da elm-header-offset.js solo in quel caso. */
@media (min-width: 992px) {
    #topicnav.elm-dock-tight .tn-tab,
    #filterbar.elm-dock-tight .cat-tab,
    #vnav.elm-dock-tight .vn-a,
    #cnav.elm-dock-tight .cn-tab { padding-left: .55rem !important; padding-right: .55rem !important; letter-spacing: .03em !important; }
    .elm-dock-tight .elm-dock-in { padding-right: .5rem !important; }
}

/* =====================================================================
   P18 ACCESSIBILITA' - anello di focus da tastiera globale (audit 10/2026)
   style-core.css azzera l'outline quasi ovunque (reset + input:focus{outline:none}),
   quindi chi naviga con il tasto Tab non vede dove si trova.
   :focus-visible scatta SOLO da tastiera: nessun cambiamento visivo per mouse/touch.
   Link e bottoni: specificita' bassa (:where) cosi' le regole :focus-visible gia'
   definite dai singoli componenti (cookie, menu mobile, cta, card...) restano valide.
   ===================================================================== */
:where(a, button, summary, [tabindex], [role="button"]):focus-visible {
    outline: 2px solid #ca6f45;
    outline-offset: 2px;
}
/* Campi form: style-core li azzera con input:focus / input[type=submit]:focus,
   serve specificita' piu' alta per vincere. Esclusi .form-control / .form-select:
   hanno gia' l'alone di Bootstrap, e sui campi di testo :focus-visible scatta anche
   al clic del mouse (doppio indicatore). Esclusi anche i campi con indicatore
   proprio piu' specifico (es. .elm-side-form .elm-fld). */
html body input[type]:focus-visible:not(.form-control):not(.form-select),
html body input:focus-visible:not(.form-control):not(.form-select),
html body select:focus-visible:not(.form-select):not(.form-control),
html body textarea:focus-visible:not(.form-control) {
    outline: 2px solid #ca6f45;
    outline-offset: 2px;
}


/* ═══════════════════════════════════════════════════════════════════════════
   16/10/2026 - LINK "OFFERTE (n)" NELLE BARRE STICKY DEL RAMO DORMIRE, SOLO
   TELEFONO/TABLET (richiesta di Andrea: nel menu mobile la categoria Offerte non
   compare e nelle liste sta dentro la tendina). Markup da
   OfferteDormireHelper.LinkBarraMobileHtml, inserito in Dormire.aspx (#topicnav
   .tn-in) e DormireList.aspx (#filterbar .cat-tabs): esce solo con offerte attive,
   mai sulla pagina Offerte. Sopra i 992px non esiste: c'e' la voce nel menu
   principale (elm-menu-desktop.css) e il tab della lista.
   Posizione (scelta di Andrea 16/10): a DESTRA, subito prima della tendina, con
   margin-left auto; la meta' sinistra della barra resta libera (sotto il logo).
   Se nome categoria lungo + link non ci stanno (DE Ferienwohnungen, FR Agences de
   Voyage sotto i 370px) si accorcia con i puntini l'etichetta "Offerte", mai il pulsante.
   Caratteri = .tnd-btn (body .75rem 600 maiuscolo); tag oro Dormire, pill bianca.
   ═══════════════════════════════════════════════════════════════════════════ */
.elm-off-mob { display: none; }
@media (max-width: 991.98px) {
    #topicnav .tn-in > a.elm-off-mob,
    #filterbar .cat-tabs > a.elm-off-mob {
        display: inline-flex !important;   /* batte "> a.tn-tab / > a.cat-tab {display:none}" solo per sicurezza */
        align-items: center;
        gap: 5px;
        margin-left: auto;
        margin-right: 12px;
        min-height: 44px;
        padding: 0;
        min-width: 0;
        font-family: var(--font-body);
        font-size: .75rem;
        font-weight: 600;
        letter-spacing: .06em;
        text-transform: uppercase;
        color: var(--ink);
        text-decoration: none;
        white-space: nowrap;
        position: relative;
        z-index: 3;            /* sopra lo spazio vuoto di .cat-tabs */
        flex: 0 1 auto;
    }
    .elm-off-mob > span:first-of-type { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
    .elm-off-mob .bi { font-size: .85rem; line-height: 1; color: var(--gold-dk); flex-shrink: 0; }
    .elm-off-mob .elm-off-n {
        flex-shrink: 0;
        font-size: .75rem;
        line-height: 18px;
        font-weight: 600;
        letter-spacing: 0;
        color: var(--grey);
        background: #fff;
        border: 1px solid var(--line);
        padding: 0 6px;
        border-radius: var(--r-pill);
    }
    /* Nelle liste, con il link presente, il pulsante della tendina (che il JS aggiunge
       DOPO il link) stringe i fianchi: nomi lunghi (Ferienwohnungen, Agences de Voyage)
       e "Offerte" stanno insieme a 390px senza puntini. Solo dove c'e' il link. */
    #filterbar .cat-tabs > .elm-off-mob ~ .cat-dd-btn { padding-left: .4rem; padding-right: .3rem; }
    .elm-off-mob:active { transform: translateY(1px); }
    .elm-off-mob:focus-visible { outline: 2px solid var(--gold-dk); outline-offset: 2px; }
}