:root {
    --fl-red: #D60101;
    --fl-red-dark: #B00000;
    --fl-red-light: #FFF1F1;
    --fl-black: #0A0A0A;
    --fl-white: #FFFFFF;
    --slate-50: #F8FAFC;
    --slate-100: #F1F5F9;
    --slate-200: #E2E8F0;
    --slate-300: #CBD5E1;
    --slate-400: #94A3B8;
    --slate-500: #64748B;
    --slate-600: #475569;
    --slate-700: #334155;
    --slate-800: #1E293B;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background-color: var(--slate-50);
    color: var(--fl-black);
    font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
}

a { text-decoration: none; color: inherit; }

/* Navbar */
.fl-nav {
    background: rgba(255,255,255,.95);
    border-bottom: 1px solid var(--slate-200);
    box-shadow: 0 1px 2px rgba(0,0,0,.04);
    position: sticky;
    top: 0;
    z-index: 50;
}
.fl-nav-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.fl-nav-inner img { height: 40px; width: auto; }
.fl-nav-links {
    display: flex;
    gap: 24px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--slate-700);
}
.fl-nav-links a:hover { color: var(--fl-red); }
.fl-nav-links a.active { color: var(--fl-red); border-bottom: 2px solid var(--fl-red); }

/* Main */
main { max-width: 1170px; margin: 0 auto; padding: 48px 15px 96px; }

.fl-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    border-radius: 999px;
    background: var(--fl-red-light);
    color: var(--fl-red);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    border: 1px solid #FFDADA;
    margin-bottom: 24px;
}

main header h1 {
    font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif !important;
    font-size: 44px !important;
    font-weight: 900 !important;
    line-height: 1.1 !important;
    margin: 0 0 24px !important;
    color: var(--fl-black) !important;
}
h1 .fl-red { color: var(--fl-red); }

.fl-subtitle {
    font-size: 18px;
    color: var(--slate-700);
    max-width: 720px;
    line-height: 1.6;
    font-weight: 500;
    margin: 0;
}

/* Header città con foto di sfondo (assets/hero/<slug>.jpg) */
.fl-hero {
    background-color: var(--slate-800);
    background-size: cover;
    background-position: center;
    color: var(--fl-white);
    position: relative;
}
.fl-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(10,10,10,.74) 0%, rgba(10,10,10,.34) 55%, rgba(10,10,10,.20) 100%),
        linear-gradient(180deg, rgba(10,10,10,.22) 0%, rgba(10,10,10,.52) 100%);
}
.fl-hero-inner {
    position: relative;
    z-index: 1;
    max-width: 1170px;
    margin: 0 auto;
    padding: 76px 15px 60px;
}
.fl-hero-inner h1 {
    font-size: 44px;
    font-weight: 900;
    line-height: 1.1;
    margin: 0 0 20px;
    color: var(--fl-white);
}
@media (max-width: 600px) {
    .fl-hero-inner { padding: 40px 15px 36px; }
    .fl-hero-inner h1 { font-size: 30px; }
}
.fl-hero .fl-badge {
    background: rgba(255,255,255,.14);
    color: var(--fl-white);
    border-color: rgba(255,255,255,.30);
}
.fl-hero .fl-subtitle {
    color: rgba(255,255,255,.92);
    max-width: 620px;
}
/* Fallback senza foto: header chiaro, testo scuro */
.fl-hero--plain { background: var(--slate-50); color: var(--fl-black); }
.fl-hero--plain::after { display: none; }
.fl-hero--plain .fl-badge {
    background: var(--fl-red-light);
    color: var(--fl-red);
    border-color: #FFDADA;
}
.fl-hero--plain .fl-hero-inner h1 { color: var(--fl-black); }
.fl-hero--plain .fl-subtitle { color: var(--slate-700); }

.fl-intro {
    margin: 4px 0 0;
    padding-top: 4px;
    font-size: 15px;
    line-height: 1.7;
    color: var(--fl-black);
    columns: 3 300px;
    column-gap: 48px;
}
.fl-intro p { margin: 0 0 12px; }
.fl-intro p:first-child { margin-top: 0; }
.fl-intro p:last-child { margin-bottom: 0; }
@media (max-width: 900px) { .fl-intro { columns: 2 260px; } }
@media (max-width: 620px) { .fl-intro { columns: 1; } }

/* Filters */
.fl-filters { margin: 48px 0; display: flex; flex-direction: column; gap: 12px; }
.fl-filter-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--slate-400);
    margin: 0 0 4px;
}
.fl-pill-row { display: flex; gap: 8px; flex-wrap: wrap; }
.fl-pill {
    padding: 10px 20px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    background: var(--fl-white);
    color: var(--slate-500);
    border: 1px solid var(--slate-200);
    box-shadow: 0 1px 2px rgba(0,0,0,.03);
    white-space: nowrap;
}
.fl-pill:hover { border-color: var(--fl-red); color: var(--fl-red); }
.fl-pill.active { background: var(--fl-red); color: var(--fl-white); border-color: var(--fl-red); box-shadow: 0 4px 12px rgba(214,1,1,.25); }
.fl-pill.active.fl-pill-dark { background: var(--slate-800); box-shadow: 0 4px 12px rgba(30,41,59,.25); }

/* Card grid */
.fl-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 32px;
}
.fl-card {
    background: var(--fl-white);
    border: 1px solid var(--slate-200);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0,0,0,.03);
    display: flex;
    flex-direction: column;
}
.fl-card-media {
    aspect-ratio: 16 / 9;
    background: var(--slate-100, #f1f5f9);
    overflow: hidden;
}
.fl-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.fl-card:hover .fl-card-media img { transform: scale(1.03); }
.fl-card-media img { transition: transform .3s ease; }
.fl-card-body { padding: 32px; display: flex; flex-direction: column; flex: 1; }
.fl-card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 24px; }
.fl-category {
    padding: 4px 12px;
    background: var(--fl-red-light);
    color: var(--fl-red);
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .08em;
    border-radius: 6px;
}
.fl-date { font-size: 12px; font-weight: 700; color: var(--slate-400); white-space: nowrap; }
.fl-card h2 { font-size: 22px; font-weight: 700; margin: 0 0 16px; line-height: 1.3; }
.fl-card p.fl-desc { color: var(--slate-500); font-size: 14px; line-height: 1.6; margin: 0 0 32px; flex: 1; }
.fl-card-footer {
    padding-top: 24px;
    border-top: 1px solid var(--slate-100);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.fl-school { display: flex; align-items: center; gap: 10px; }
.fl-school-icon {
    width: 36px; height: 36px; border-radius: 999px;
    background: var(--slate-50); border: 1px solid var(--slate-100);
    display: flex; align-items: center; justify-content: center;
    font-size: 16px;
}
.fl-school-name { font-size: 13px; font-weight: 700; color: var(--slate-700); }
.fl-school-label { font-size: 10px; text-transform: uppercase; color: var(--slate-400); font-weight: 700; display: block; }
.fl-cta {
    width: 44px; height: 44px; border-radius: 14px;
    background: var(--fl-red); color: var(--fl-white);
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; font-weight: 700;
    box-shadow: 0 4px 12px rgba(214,1,1,.2);
}

.fl-empty {
    grid-column: 1 / -1;
    padding: 96px 24px;
    text-align: center;
    color: var(--slate-400);
}
.fl-empty h3 { font-size: 22px; font-weight: 900; text-transform: uppercase; letter-spacing: -.02em; color: var(--slate-400); }

/* Pagina profilo scuola (senza sito proprio) */
.fl-profile-wrap { max-width: 760px; }
.fl-profile-back { margin: 0 0 32px; font-size: 14px; font-weight: 700; }
.fl-profile-back a:hover { color: var(--fl-red); }
.fl-profile-intro { font-size: 16px; line-height: 1.7; color: var(--fl-black); margin: 0 0 40px; }
.fl-profile-h2 { font-size: 24px; font-weight: 900; margin: 0 0 12px; }
.fl-profile-note { font-size: 14px; color: var(--slate-500); margin: 0 0 24px; }
.fl-profile-contact { margin-top: 16px; padding-top: 32px; border-top: 1px solid var(--slate-200); }
.fl-profile-contact-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 16px; }
.fl-profile-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 14px 28px; border-radius: 14px;
    font-size: 14px; font-weight: 700;
    background: var(--fl-white); color: var(--fl-black);
    border: 1px solid var(--slate-200);
}
.fl-profile-btn:hover { border-color: var(--fl-red); color: var(--fl-red); }
.fl-profile-btn--primary { background: var(--fl-red); color: var(--fl-white); border-color: var(--fl-red); }
.fl-profile-btn--primary:hover { background: var(--fl-red-dark); color: var(--fl-white); }
.fl-profile-source { margin-top: 32px; font-size: 12px; color: var(--slate-400); }
.fl-grid--offerings .fl-card-top { justify-content: flex-start; gap: 12px; }
.fl-offer-price { font-size: 15px; font-weight: 900; color: var(--fl-red); }
.fl-offer-subhead { font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: .05em; color: var(--slate-400); margin: 20px 0 8px; }
.fl-offer-list, .fl-offer-program { margin: 0 0 8px; padding-left: 20px; font-size: 14px; line-height: 1.6; color: var(--slate-600); }
.fl-offer-list li, .fl-offer-program li { margin-bottom: 6px; }
.fl-offer-program li strong { color: var(--fl-black); }

/* Footer — stessa grafica di foodlearn.it: fascia nera con logo + policy,
   poi barra copyright + menu. */
.fl-footer { background: #000; margin-top: 64px; }
.fl-footer-top {
    max-width: 1170px;
    margin: 0 auto;
    padding: 40px 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px 32px;
    flex-wrap: wrap;
}
.fl-footer-top img { height: 62px; width: auto; display: block; }
.fl-footer-legal { display: flex; align-items: center; gap: 10px; }

.fl-footer-bottom { background: #141414; border-top: 1px solid #222; }
.fl-footer-bottom-inner {
    max-width: 1170px;
    margin: 0 auto;
    padding: 18px 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px 24px;
    flex-wrap: wrap;
}
.fl-footer-copy { margin: 0; font-size: 12px; color: #b7b5b5; }
.fl-footer-copy a { color: #eee; }
.fl-footer-copy a:hover { color: var(--fl-red); }
.fl-footer-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
.fl-footer-menu a { color: #cfcfcf; font-size: 13px; }
.fl-footer-menu a:hover { color: var(--fl-red); }
.fl-footer-menu li + li::before {
    content: "/";
    margin: 0 14px;
    color: #4a4a4a;
}

@media (max-width: 700px) {
    .fl-footer-top { justify-content: center; text-align: center; }
    .fl-footer-bottom-inner { justify-content: center; text-align: center; }
    .fl-footer-menu { justify-content: center; }
}

.fl-nav-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    color: var(--fl-black);
    padding: 8px;
}

@media (max-width: 768px) {
    .fl-nav-toggle { display: block; }
    .fl-nav-links {
        display: none;
        position: absolute;
        top: 80px;
        left: 0;
        right: 0;
        flex-direction: column;
        gap: 0;
        background: var(--fl-white);
        padding: 8px 24px 16px;
        border-bottom: 1px solid var(--slate-200);
        box-shadow: 0 8px 16px rgba(0,0,0,.06);
    }
    .fl-nav-links.fl-open { display: flex; }
    .fl-nav-links a { padding: 14px 0; border-bottom: 1px solid var(--slate-100); }
    .fl-nav-links a:last-child { border-bottom: none; }
    main header h1 { font-size: 32px !important; }
}

/* Layout a colonna (sidebar filtri + griglia corsi) — usato da index.php
   (filtri Città/Categoria/Scuola) e dalle pagine città bergamo.php/brescia.php
   (filtri Mese/Categoria/Scuola). */
.fl-browse { display: grid; grid-template-columns: 240px 1fr; gap: 40px; align-items: start; }
.fl-sidebar {
    position: sticky; top: 96px; display: flex; flex-direction: column; gap: 28px;
    /* Con molti filtri (Categoria/Scuola) la sidebar può superare l'altezza
       della finestra: senza questo limite resta agganciata in alto ma con la
       parte finale fuori schermo, raggiungibile solo scorrendo tutta la
       griglia corsi sotto. Le due righe sotto le danno uno scroll interno
       indipendente, così i filtri restano sempre tutti raggiungibili. */
    max-height: calc(100vh - 96px - 24px);
    overflow-y: auto;
    overscroll-behavior: contain;
}
.fl-filter-group button.fl-filter-label {
    all: unset; cursor: default; display: block; box-sizing: border-box; width: 100%;
}
.fl-sidebar-group { display: flex; flex-direction: column; gap: 6px; }
.fl-sidebar-link {
    display: block; padding: 8px 12px; border-radius: 10px; font-size: 14px;
    font-weight: 600; color: var(--slate-700);
}
.fl-sidebar-link:hover { background: var(--slate-50); }
.fl-sidebar-link.active { background: var(--fl-red-light); color: var(--fl-red); }
.fl-filter-summary { font-size: 16px; color: var(--slate-700); margin: 0 0 24px; }
.fl-filter-summary strong { color: var(--fl-black); }

/* Su desktop i filtri sono sempre visibili: lo stato "aperto/chiuso"
   esiste solo su mobile, dove parte chiuso di default. */
@media (max-width: 900px) {
    .fl-browse { grid-template-columns: 1fr; }
    .fl-sidebar { position: static; gap: 0; max-height: none; overflow-y: visible; }
    .fl-filter-group {
        border-bottom: 1px solid var(--slate-200);
        padding: 16px 0;
    }
    .fl-filter-group button.fl-filter-label {
        cursor: pointer;
        display: flex; align-items: center; justify-content: space-between;
        font-size: 15px; font-weight: 700; color: var(--fl-black);
        text-transform: none; letter-spacing: normal;
        margin: 0;
    }
    .fl-filter-group button.fl-filter-label::after {
        content: "+"; font-size: 20px; font-weight: 400; color: var(--slate-400);
    }
    .fl-filter-group.fl-open button.fl-filter-label::after { content: "\2212"; }
    .fl-filter-group .fl-sidebar-group {
        display: none;
        flex-direction: row; flex-wrap: wrap; gap: 8px; margin-top: 14px;
    }
    .fl-filter-group.fl-open .fl-sidebar-group { display: flex; }
    .fl-filter-group .fl-sidebar-link { padding: 6px 14px; border-radius: 999px; border: 1px solid var(--slate-200); }
}

/* ==========================================================================
   v5 — usabilità: CTA leggibili, card cliccabili, contrasto, focus visibile,
   toolbar (ricerca / filtri rapidi / ordinamento), chip filtri attivi,
   raggruppamento per settimana, banner cookie.
   Regole in fondo al file: sovrascrivono per ordine quelle sopra.
   ========================================================================== */

/* --- Accessibilità: focus da tastiera sempre visibile + skip link --- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
.fl-cta:focus-visible,
.fl-sidebar-link:focus-visible,
.fl-pill:focus-visible {
    outline: 3px solid var(--fl-red);
    outline-offset: 2px;
    border-radius: 6px;
}
.fl-skip {
    position: absolute;
    left: 16px;
    top: -60px;
    z-index: 100;
    background: var(--fl-black);
    color: var(--fl-white);
    padding: 10px 18px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 13px;
    transition: top .15s ease;
}
.fl-skip:focus { top: 16px; }
.fl-sr {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
[hidden] { display: none !important; }

/* --- Contrasto: testi di servizio troppo chiari (erano slate-400 ~2.6:1) --- */
.fl-date { color: var(--slate-600); font-weight: 700; }
.fl-school-label { color: var(--slate-500); }
.fl-filter-label { color: var(--slate-500); }
.fl-desc {
    color: var(--slate-800);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* --- Card interamente cliccabile --- */
.fl-card { position: relative; transition: box-shadow .15s ease, border-color .15s ease, transform .15s ease; }
.fl-card:hover { border-color: var(--slate-300); box-shadow: 0 12px 32px rgba(2,6,23,.10); transform: translateY(-2px); }
.fl-card:focus-within { border-color: var(--fl-red); }

/* --- CTA: da quadratino "→" a bottone con etichetta --- */
.fl-cta {
    width: auto;
    height: auto;
    border-radius: 999px;
    background: var(--slate-800);
    color: var(--fl-white);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .01em;
    box-shadow: none;
    white-space: nowrap;
    transition: background .15s ease;
}
.fl-cta svg { flex: none; }
.fl-cta:hover,
.fl-card:hover .fl-cta { background: var(--fl-red); }
/* stretched link: tutta la card apre il corso */
.fl-cta::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

/* --- Griglia: intestazioni di settimana (titoletti di sezione) --- */
.fl-grid { align-items: start; }
.fl-date-group {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 40px 0 6px;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -.01em;
    color: var(--fl-black);
}
.fl-date-group::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--slate-200);
}
.fl-date-group:first-child { margin-top: 4px; }

/* --- Toolbar: ricerca + filtri rapidi + ordinamento --- */
.fl-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    margin-bottom: 16px;
}
.fl-toolbar-primary { display: contents; }
.fl-search-wrap { position: relative; flex: 1 1 240px; }
.fl-search-icon {
    position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
    color: var(--slate-400); pointer-events: none;
}
.fl-search {
    width: 100%;
    padding: 12px 16px 12px 40px;
    border: 1px solid var(--slate-200);
    border-radius: 12px;
    font-size: 14px;
    font-family: inherit;
    background: var(--fl-white);
    color: var(--fl-black);
}
.fl-search::placeholder { color: var(--slate-400); }
.fl-quick { display: flex; flex-wrap: wrap; gap: 8px; }
.fl-quick button {
    padding: 9px 16px;
    border-radius: 999px;
    border: 1px solid var(--slate-200);
    background: var(--fl-white);
    color: var(--slate-600);
    font-size: 12px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.fl-quick button:hover { border-color: var(--fl-red); color: var(--fl-red); }
.fl-quick button.active {
    background: var(--fl-red);
    border-color: var(--fl-red);
    color: var(--fl-white);
}
.fl-sort {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 700;
    color: var(--slate-500);
    text-transform: uppercase;
    letter-spacing: .05em;
}
.fl-sort select {
    padding: 9px 12px;
    border: 1px solid var(--slate-200);
    border-radius: 10px;
    font-family: inherit;
    font-size: 13px;
    background: var(--fl-white);
    color: var(--fl-black);
    text-transform: none;
    letter-spacing: normal;
    cursor: pointer;
}
.fl-results-count {
    margin: 0 0 20px;
    font-size: 14px;
    color: var(--slate-600);
}
.fl-results-count strong { color: var(--fl-black); font-size: 15px; }

/* --- Chip dei filtri attivi --- */
.fl-active-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-bottom: 20px;
}
.fl-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px 6px 14px;
    border-radius: 999px;
    background: var(--fl-red-light);
    color: var(--fl-red-dark);
    border: 1px solid #FFD5D5;
    font-size: 12px;
    font-weight: 700;
}
.fl-chip span[aria-hidden] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 999px;
    background: rgba(214,1,1,.12);
    font-size: 14px;
    line-height: 1;
}
.fl-chip:hover span[aria-hidden] { background: var(--fl-red); color: var(--fl-white); }
.fl-reset {
    font-size: 12px;
    font-weight: 700;
    color: var(--slate-500);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.fl-reset:hover { color: var(--fl-red); }

/* --- Empty state con azione --- */
.fl-empty h3 { color: var(--slate-600); }
.fl-empty p { color: var(--slate-500); }
.fl-empty-cta {
    display: inline-block;
    margin-top: 16px;
    padding: 12px 24px;
    border-radius: 999px;
    background: var(--fl-red);
    color: var(--fl-white);
    font-weight: 700;
    font-size: 13px;
}
.fl-empty-cta:hover { background: var(--fl-red-dark); }

/* --- Footer: link a privacy/cookie --- */

/* La cookie bar è gestita da iubenda (widget in <head>), niente stili qui. */

@media (max-width: 900px) {
    .fl-date-group { margin-top: 32px; }
}

/* --- Rail filtri desktop: più leggibile e con gerarchia chiara --- */
@media (min-width: 901px) {
    .fl-browse { grid-template-columns: 260px 1fr; }
    .fl-sidebar { gap: 4px; }
    .fl-filter-group {
        padding: 18px 0;
        border-bottom: 1px solid var(--slate-200);
    }
    .fl-filter-group:first-child { padding-top: 0; }
    .fl-filter-group button.fl-filter-label {
        all: unset;
        display: block;
        width: 100%;
        box-sizing: border-box;
        margin: 0 0 10px;
        font-size: 13px;
        font-weight: 800;
        letter-spacing: .02em;
        text-transform: none;
        color: var(--fl-black);
    }
    .fl-sidebar-group { gap: 2px; }
    .fl-sidebar-link {
        position: relative;
        padding: 9px 12px;
        border-radius: 8px;
        font-size: 14px;
        font-weight: 500;
        color: var(--slate-600);
        transition: background .12s ease, color .12s ease;
    }
    .fl-sidebar-link:hover { background: var(--slate-100); color: var(--fl-black); }
    .fl-sidebar-link.active {
        background: var(--fl-red-light);
        color: var(--fl-red-dark);
        font-weight: 700;
    }
    .fl-sidebar-link.active::before {
        content: "";
        position: absolute;
        left: 0; top: 8px; bottom: 8px;
        width: 3px;
        border-radius: 2px;
        background: var(--fl-red);
    }
}
@media (max-width: 600px) {
    .fl-toolbar { gap: 10px; }
    .fl-sort { width: 100%; justify-content: space-between; }
}

/* ==========================================================================
   v6 — filtri stile Viator: checkbox multi-select con conteggi,
   chip client-side, pannello filtri a tutto schermo su mobile.
   ========================================================================== */

.fl-active-filters:empty { display: none; }
.fl-chip {
    appearance: none;
    font-family: inherit;
    cursor: pointer;
    line-height: 1;
}
.fl-reset {
    appearance: none;
    background: none;
    border: 0;
    font-family: inherit;
    cursor: pointer;
}

/* --- Righe faccetta (checkbox) --- */
.fl-facet {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    color: var(--slate-700);
    cursor: pointer;
    transition: background .12s ease;
}
.fl-facet:hover { background: var(--slate-100); }
.fl-facet-box {
    flex: none;
    width: 18px;
    height: 18px;
    border-radius: 5px;
    border: 2px solid var(--slate-300);
    background: var(--fl-white);
    position: relative;
    transition: background .12s ease, border-color .12s ease;
}
.fl-facet.active .fl-facet-box { background: var(--fl-red); border-color: var(--fl-red); }
.fl-facet.active .fl-facet-box::after {
    content: "";
    position: absolute;
    left: 4px; top: 1px;
    width: 5px; height: 9px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.fl-facet-label { flex: 1; }
.fl-facet.active .fl-facet-label { font-weight: 700; color: var(--fl-black); }
.fl-facet-count {
    flex: none;
    font-size: 12px;
    font-weight: 600;
    color: var(--slate-400);
    font-variant-numeric: tabular-nums;
}
.fl-facet--empty { opacity: .4; }
.fl-facet--empty:hover { background: transparent; }
.fl-facet:focus-visible { outline: 3px solid var(--fl-red); outline-offset: 2px; }

/* --- Bottone "Filtri" (solo mobile) --- */
.fl-filter-open { display: none; }

/* --- Pannello filtri a tutto schermo (solo mobile) --- */
.fl-sheet-head, .fl-sheet-apply { display: none; }

@media (min-width: 901px) {
    /* le faccette ereditano lo stile del rail desktop già definito sopra */
    .fl-sidebar-group { gap: 2px; }
}

@media (max-width: 900px) {
    /* Barra filtri+cerca sempre in vista in cima allo schermo su mobile */
    .fl-toolbar {
        position: sticky;
        top: 0;
        z-index: 40;
        margin: 0 -15px 16px;
        padding: 10px 15px;
        background: var(--slate-50);
        border-bottom: 1px solid var(--slate-200);
    }
    .fl-toolbar-primary {
        display: flex;
        gap: 10px;
        align-items: center;
    }
    .fl-toolbar-primary .fl-search-wrap { flex: 1 1 auto; }
    /* Nella barra sticky restano solo Filtri e Cerca */
    .fl-toolbar .fl-quick,
    .fl-toolbar .fl-sort { display: none; }

    .fl-filter-open {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 11px 16px;
        border-radius: 12px;
        border: 1px solid var(--slate-300);
        background: var(--fl-white);
        font-family: inherit;
        font-size: 13px;
        font-weight: 700;
        color: var(--fl-black);
        cursor: pointer;
        white-space: nowrap;
    }
    .fl-sidebar {
        position: fixed;
        inset: 0;
        z-index: 95;
        margin: 0;
        background: var(--fl-white);
        overflow-y: auto;
        padding: 0 20px calc(env(safe-area-inset-bottom) + 92px);
        transform: translateX(-100%);
        transition: transform .22s ease;
        display: block;
        gap: 0;
    }
    body.fl-sheet-open { overflow: hidden; }
    body.fl-sheet-open .fl-sidebar { transform: none; }
    .fl-sheet-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: sticky;
        top: 0;
        z-index: 2;
        background: var(--fl-white);
        padding: 18px 0 14px;
        border-bottom: 1px solid var(--slate-200);
        font-size: 18px;
        font-weight: 800;
    }
    .fl-sheet-close {
        appearance: none;
        border: 0;
        background: var(--slate-100);
        cursor: pointer;
        width: 34px; height: 34px;
        border-radius: 999px;
        font-size: 15px;
        color: var(--slate-700);
    }
    .fl-sheet-apply {
        display: block;
        position: fixed;
        left: 16px; right: 16px;
        bottom: calc(env(safe-area-inset-bottom) + 16px);
        z-index: 96;
        padding: 15px;
        border-radius: 999px;
        border: 0;
        background: var(--fl-red);
        color: #fff;
        font-family: inherit;
        font-size: 15px;
        font-weight: 800;
        cursor: pointer;
        box-shadow: 0 10px 30px rgba(214,1,1,.3);
    }
    /* faccette in colonna dentro il pannello (non pill che vanno a capo) */
    .fl-filter-group[data-facet-group] .fl-sidebar-group { flex-direction: column; gap: 2px; }
    .fl-filter-group[data-facet-group] .fl-facet { border: 0; padding: 12px 10px; font-size: 15px; }
    .fl-filter-group[data-facet-group] .fl-facet-box { width: 20px; height: 20px; }
}

/* ==========================================================================
   v9 — allineamento con la navbar jnews + fix colore testo CTA
   ========================================================================== */

/* La navbar jnews usa .container (max-width 1170px, padding 15px): allineiamo
   il contenuto della pagina allo stesso box così il logo è in colonna con l'h1. */
main {
    max-width: 1170px;
    padding-left: 15px;
    padding-right: 15px;
}

/* Il tema jnews sovrascrive il colore dei link su :hover/:visited: qui lo
   riportiamo a bianco in ogni stato, altrimenti il testo "Vai al sito"
   diventa scuro (illeggibile sul rosso) al passaggio del mouse e dopo il clic. */
.fl-cta,
.fl-cta *,
.fl-cta:link,
.fl-cta:visited,
.fl-cta:hover,
.fl-cta:focus,
.fl-cta:active,
.fl-cta:hover *,
.fl-card:hover .fl-cta,
.fl-card:hover .fl-cta * {
    color: #fff !important;
}
.fl-cta svg { stroke: #fff !important; }