:root {

    /* =====================
       TYPOGRAPHY
    ===================== */
    --font-family-primary:   var(--e-a-font-family, 'Inter', sans-serif);
    --font-family-secondary: var(--e-global-typography-secondary-font-family, 'EB Garamond', serif);

    --font-size-xs:          0.75rem;
    --font-size-sm:          0.875rem;
    --font-size-base:        1rem;
    --font-size-md:          1.125rem;
    --font-size-lg:          1.25rem;
    --font-size-xl:          1.5rem;
    --font-size-2xl:         2rem;
    --font-size-3xl:         2.5rem;
    --font-size-4xl:         3rem;
    --font-size-5xl:         4rem;

    --line-height-tight:     1.1;
    --line-height-snug:      1.3;
    --line-height-normal:    1.5;
    --line-height-relaxed:   1.7;

    --letter-spacing-tight:  -0.02em;
    --letter-spacing-normal:  0em;
    --letter-spacing-wide:    0.05em;
    --letter-spacing-wider:   0.1em;

    --font-weight-light:     300;
    --font-weight-regular:   400;
    --font-weight-medium:    500;
    --font-weight-semibold:  600;
    --font-weight-bold:      700;

    /* =====================
       SPACING
    ===================== */
    --space-1:               0.25rem;
    --space-2:               0.5rem;
    --space-3:               0.75rem;
    --space-4:               1rem;
    --space-5:               1.25rem;
    --space-6:               1.5rem;
    --space-8:               2rem;
    --space-10:              2.5rem;
    --space-12:              3rem;
    --space-16:              4rem;
    --space-20:              5rem;
    --space-24:              6rem;
    --space-32:              8rem;

    --section-padding-y:     var(--space-20);
    --section-padding-x:     var(--space-6);
    --container-max-width:   1440px;
    --container-padding:     var(--space-6);

    /* =====================
       BORDER RADIUS
    ===================== */
    --radius-sm:             var(--e-a-border-radius, 4px);
    --radius-md:             8px;
    --radius-lg:             16px;
    --radius-xl:             24px;
    --radius-2xl:            32px;
    --radius-full:           9999px;

    /* =====================
       TRANSITIONS
    ===================== */
    --transition-fast:       150ms ease;
    --transition-base:       300ms ease;
    --transition-slow:       600ms ease;
    --transition-slower:     1000ms ease;

    /* =====================
       Z-INDEX
    ===================== */
    --z-below:               -1;
    --z-base:                0;
    --z-above:               1;
    --z-dropdown:            100;
    --z-sticky:              200;
    --z-overlay:             300;
    --z-modal:               400;
    --z-toast:               500;

}

/* Elementor scrive le Global Font (--e-global-typography-*) sul body
   (classe .elementor-kit-N), non su :root/html: ridichiarata qui perché il
   var() in :root sopra non può vedere una custom property definita più in
   basso nell'albero DOM e cadeva sempre sul fallback 'EB Garamond'. */
body {
    --font-family-secondary: var(--e-global-typography-secondary-font-family, 'EB Garamond', serif);
}

html, body{
    overflow-x: hidden;
}
button{
    border: none!important;
}

.elementor-section-wrap > .elementor-section > .elementor-container,
.e-con-inner {
    width: calc(100% - 5rem);
    max-width: 1440px;
    margin-inline: auto;
}

.elementor-widget-image.parallax-img {
    overflow: hidden;
    border-radius: 10px;
}

.elementor-widget-image.parallax-img img {
    will-change: transform;
    display: block;
    width: 100%;

}
.e-con.fade-up > * {
    opacity: 0;
}

/* =========================
   EDIT START HERE
========================= */

/* Card cluster — shortcode [cluster_cards] */

/* Senza larghezza esplicita, nel container flex a colonna Elementor calcola
   l'altezza del widget prima dello stretch: con le card in aspect-ratio
   risultava più bassa del contenuto e l'ultima card finiva sotto la sezione
   successiva (mobile). */
.elementor-widget:has(> .elementor-shortcode > .cluster-cards) {
    width: 100%;
}

.cluster-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 8px;
}

.cluster-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    aspect-ratio: 5 / 4;
    padding: var(--space-8) var(--space-6);
    overflow: hidden;
    text-decoration: none;
    background-color: var(--e-global-color-primary, #1a1a1a);
    background-image: var(--cluster-card-image, none);
    background-position: center center;
    background-size: cover;
}

.cluster-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.5) 40%, rgba(0, 0, 0, 0) 75%);
    pointer-events: none;
}

.cluster-card__title {
    position: relative;
    z-index: var(--z-above);
    font-family: var(--font-family-secondary);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-medium);
    letter-spacing: var(--letter-spacing-wide);
    text-transform: uppercase;
    text-align: center;
    color: var(--e-global-color-secondary, #E3A855);
}

.cluster-card__cta {
    position: relative;
    z-index: var(--z-above);
    display: block;
    margin-top: var(--space-2);
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    padding-bottom: var(--space-2);
    font-family: var(--font-family-secondary);
    font-size: var(--font-size-sm);
    letter-spacing: var(--letter-spacing-wide);
    text-transform: uppercase;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: var(--space-2);
    color: var(--e-global-color-white, #fff);
    transition: max-height var(--transition-base), opacity var(--transition-base);
}

.cluster-card:hover .cluster-card__cta,
.cluster-card:focus-visible .cluster-card__cta {
    max-height: 3em;
    opacity: 1;
}

/* Card servizio/prodotto — template Loop "Card Servizi" (classe servizio-card
   sul container). Il colore dipende dal cluster/tipo del post: Elementor
   mette le classi dei termini (post_class) sull'.e-loop-item, quindi basta
   ridefinire le variabili lì; i default stanno nella card stessa. Ordine
   delle regole = priorità: un pacchetto multi-cluster (es. Wellness, Hammam
   + Massaggi) resta verde salvia. */
.e-loop-item.cluster-servizi-hammam   { --servizio-card-bg: var(--e-global-color-blue-grey); }
.e-loop-item.cluster-servizi-massaggi {
    --servizio-card-bg:    var(--e-global-color-accent);
    --servizio-card-badge: var(--e-global-color-navy); /* come da bozza: arancio su arancio non si legge */
}
.e-loop-item.cluster-servizi-estetica {
    --servizio-card-bg:    var(--e-global-color-blush);
    --servizio-card-title: var(--e-global-color-blue-grey);
    --servizio-card-text:  var(--e-global-color-black);
}
.e-loop-item.tipo-servizio-pacchetto,
.e-loop-item.type-prodotti {
    --servizio-card-bg:    var(--e-global-color-sage);
    --servizio-card-title: var(--e-global-color-secondary);
    --servizio-card-text:  var(--e-global-color-white);
    --servizio-card-badge: var(--e-global-color-primary); /* annulla il navy di massaggi sui pacchetti */
}

.servizio-card {
    position: relative;
    background-color: var(--servizio-card-bg, var(--e-global-color-navy));
    color: var(--servizio-card-text, var(--e-global-color-white));
    text-align: center;
}

.servizio-card .elementor-heading-title {
    color: var(--servizio-card-title, var(--e-global-color-secondary));
}

.servizio-card .eb-cta-link.eb-cta-link,
.servizio-card .eb-cta-link.eb-cta-link:hover {
    color: var(--servizio-card-text, var(--e-global-color-white));
}

.servizio-card__etichetta {
    display: block;
    font-size: var(--font-size-xs);
    letter-spacing: var(--letter-spacing-wide);
    text-transform: uppercase;
}

.servizio-card__prezzo {
    display: block;
    font-size: var(--font-size-xl);
}

.servizio-card__prefisso {
    font-size: var(--font-size-sm);
}

/* Badge in alto al centro (Novità, Speciale per due, Esclusiva): classe
   servizio-card__badge-slot sul widget shortcode del badge (template 245).
   Classe raddoppiata con .elementor-widget: batte il position/width che
   Elementor dà ai widget dentro un container flex. */
.servizio-card .elementor-widget.servizio-card__badge-slot {
    position: absolute;
    top: var(--space-6);
    inset-inline: 0;
    width: auto;
    text-align: center;
}

.servizio-card__badge {
    display: inline-block;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    background-color: var(--servizio-card-badge, var(--e-global-color-primary));
    color: var(--e-global-color-white);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    letter-spacing: var(--letter-spacing-wide);
    text-transform: uppercase;
    white-space: nowrap;
}

/* Contenuto della scheda servizio (post_content, blocchi Gutenberg):
   tabella varianti (blocco Tabella, classe servizio-varianti) e gruppo
   "Nota bene" (blocco Gruppo, classe servizio-nota). Stile proprio e non le
   classi del widget EB Listino: il suo CSS carica solo col widget. */
/* Tutto il contenuto della scheda (servizio o prodotto) in una colonna di
   lettura, allineata alla tabella varianti. */
:is(.single-servizi, .single-prodotti) .elementor-widget-theme-post-content > * {
    max-width: 900px;
    margin-inline: auto;
}

.servizio-varianti,
.servizio-nota {
    margin-top: var(--space-8);
}

.servizio-varianti {
    text-align: left;
}

/* Doppia classe: batte il layout fisso del blocco Tabella
   (.wp-block-table .has-fixed-layout) e le righe a strisce/bordi del tema
   Hello (table tbody>tr:nth-child(odd)>td). */
.servizio-varianti.wp-block-table table {
    table-layout: auto;
}

.servizio-varianti.wp-block-table td {
    padding: var(--space-4) 0;
    border: 0;
    background: none;
    border-bottom: 1px solid var(--e-global-color-beige-dark);
    vertical-align: top;
}

.servizio-varianti.wp-block-table td:last-child {
    padding-left: var(--space-6);
    text-align: right;
    white-space: nowrap;
    color: var(--e-global-color-primary);
}

@media (max-width: 767px) {
    .servizio-varianti tr,
    .servizio-varianti.wp-block-table td {
        display: block;
    }

    .servizio-varianti.wp-block-table td:first-child {
        padding-bottom: var(--space-1);
        border-bottom: 0;
    }

    .servizio-varianti.wp-block-table td:last-child {
        padding: 0 0 var(--space-4);
        text-align: left;
    }
}

.servizio-nota {
    padding: var(--space-6);
    background-color: var(--e-global-color-cream);
    text-align: center;
}

/* Fila che su mobile scorre in orizzontale invece di andare a capo (classe
   hcs-scroll-x sul Container, es. i bottoni sezione del Listino). */
@media (max-width: 767px) {
    .e-con.hcs-scroll-x {
        flex-wrap: nowrap;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
    }

    .e-con.hcs-scroll-x::-webkit-scrollbar {
        display: none;
    }

    /* Container "boxed": le voci stanno in .e-con-inner, che il tema limita
       a calc(100% - 5rem) — qui deve essere largo quanto il contenuto. */
    .e-con.hcs-scroll-x > .e-con-inner {
        flex-wrap: nowrap;
        width: max-content;
        max-width: none;
        margin: 0;
    }

    .e-con.hcs-scroll-x > *,
    .e-con.hcs-scroll-x > .e-con-inner > * {
        flex: 0 0 auto;
    }
}

/* Parole da tenere sulla stessa riga in un titolo (es. "a Genova" nell'H1
   della Home). Uno span e non  : l'effetto split-text divide il titolo
   in parole separate e lo spazio non divisibile non basta più. */
.hcs-nowrap {
    white-space: nowrap;
}

/* Corsivo nei titoli (<i> nel testo del widget Titolo): sempre nel font
   principale del sito (Canela Text), anche quando il titolo usa Cronos Pro
   — es. "autentico" nell'H1 della Home. */
.elementor-widget-heading .elementor-heading-title i {
    font-family: var(--e-global-typography-primary-font-family), serif;
    font-style: italic;
}

/* Pulsante "Torna su" del plugin elementor-brain, nei colori del sito:
   oro con freccia navy, navy con freccia oro in hover (navy di base
   spariva sulle tante sezioni navy). Allineato al pulsante WhatsApp
   (56px a 20px dal bordo, lato opposto): stessa linea dei centri. */
.eb-scroll-top {
    --eb-scrolltop-bg:          var(--e-global-color-secondary);
    --eb-scrolltop-color:       var(--e-global-color-navy);
    --eb-scrolltop-bg-hover:    var(--e-global-color-navy);
    --eb-scrolltop-color-hover: var(--e-global-color-secondary);
    --eb-scrolltop-border:      1px solid var(--e-global-color-secondary);
    --eb-scrolltop-offset:      26px;
}

/* Moduli Elementor: pallino/flag allineato al centro del testo della sua
   opzione (di default resta in alto rispetto alla riga). */
.elementor-field-subgroup .elementor-field-option {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding-block: var(--space-1);
}

.elementor-field-subgroup .elementor-field-option input {
    margin: 0;
}

/* Breadcrumb Rank Math ([rank_math_breadcrumb] in un widget Shortcode con
   classe hcs-breadcrumb, sotto il titolo degli hero). Navy di base,
   --chiaro per gli hero scuri. */
.hcs-breadcrumb {
    --hcs-breadcrumb-color: var(--e-global-color-navy);
}

.hcs-breadcrumb--chiaro {
    --hcs-breadcrumb-color: var(--e-global-color-white);
}

/* Subito sotto il titolo: annulla lo spazio del Container (--row-gap, messo
   da Elementor sul contenitore flex) e resta attaccata al titolo; lo spazio
   verso l'elemento successivo resta quello del Container. Vale in un
   Container a colonna, con la breadcrumb subito dopo il titolo. */
:is(.elementor-widget-heading, .elementor-widget-theme-post-title) + .hcs-breadcrumb {
    margin-top: calc(var(--space-4) - var(--row-gap, 0px));
    /* Centrata come i titoli degli hero: align-self perché in un Container
       flex il widget si stringe al contenuto, text-align da solo non basta. */
    align-self: center;
    text-align: center;
}

.hcs-breadcrumb .rank-math-breadcrumb p {
    margin: 0;
    font-size: var(--font-size-sm);
    letter-spacing: var(--letter-spacing-wide);
    text-transform: uppercase;
    color: var(--hcs-breadcrumb-color);
}

.hcs-breadcrumb .rank-math-breadcrumb a,
.hcs-breadcrumb .rank-math-breadcrumb .separator {
    color: inherit;
    opacity: 0.75;
}

/* font: inherit — il Kit globale di Elementor stila ogni <a> del sito. */
.hcs-breadcrumb .rank-math-breadcrumb a {
    font: inherit;
    text-decoration: none;
    transition: color var(--transition-fast), opacity var(--transition-fast);
}

.hcs-breadcrumb .rank-math-breadcrumb .separator {
    margin-inline: var(--space-2);
}

/* Voce corrente (pagina aperta). */
.hcs-breadcrumb .rank-math-breadcrumb .last {
    font-weight: var(--font-weight-semibold);
}

.hcs-breadcrumb .rank-math-breadcrumb a:hover {
    color: var(--e-global-color-secondary);
    opacity: 1;
}

/* Entrate animate nascoste dal primo frame. Questo file è nel <head>, gli
   script nel footer: se fossero loro a nascondere gli elementi, li si
   vedrebbe comparire, sparire e riapparire.
   - Hero (switch "Hero Fade" sul container): ogni widget tranne il titolo
     split-text entra in dissolvenza; index.js assegna solo i ritardi.
   - Card: nascoste finché index.js non le affida a GSAP con .hcs-reveal
     (selettore da tenere allineato con CARD_SELECTOR in index.js).
   Il ritardo di base (2s) e il fallback a 2,5s delle card sono la rete di
   sicurezza: se gli script non arrivano, tutto compare comunque. */
@keyframes hcs-fade-in {
    from { opacity: 0; transform: translateY(8px); }
}

@media (prefers-reduced-motion: no-preference) {
    body:not(.elementor-editor-active) .hcs-hero-fade .elementor-widget:not(.eb-title-fx) {
        animation: hcs-fade-in 0.8s ease-out var(--hcs-fade-delay, 2s) both;
    }

    body:not(.elementor-editor-active) :is(.elementor-widget-loop-grid .e-loop-item, .cluster-cards .cluster-card):not(.hcs-reveal) {
        animation: hcs-fade-in 0.3s ease-out 2.5s both;
    }
}

/* Ombra sfumata nera generica — classe da aggiungere in Elementor su
   qualunque Sezione/Container (Avanzate > CSS Classes), per scurire la parte
   bassa di un'immagine di sfondo e far leggere meglio il testo sopra.
   Selettore composto con `.elementor-element` (classe che Elementor mette
   sempre sull'elemento) apposta: ogni Container Elementor riserva già lo
   stesso ::before per il proprio "Background Overlay" nativo
   (`.e-con:before{content:var(--background-overlay);...}`, stessa
   specificità 0,1,1 della nostra) — senza il boost la nostra regola perde
   l'ordine di cascata e il content resta quello di Elementor (var non
   definita → nessun contenuto generato, ombra invisibile). */
.dark-overlay {
    position: relative;
}

.elementor-element.dark-overlay::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.6) 50%, rgba(0, 0, 0, 0) 100%);
    pointer-events: none;
    z-index: 1;
}

.dark-overlay > * {
    position: relative;
    z-index: 2;
}

/* Spinge un elemento in fondo al proprio contenitore flex a colonna
   (Container Elementor con Direzione = Colonna) — classe da aggiungere in
   Elementor su Avanzate > Classi CSS aggiuntive DIRETTAMENTE sul widget da
   spingere in basso (es. una CTA sotto un titolo/eyebrow), non sul
   contenitore padre: il margine automatico va sul flex item stesso per
   assorbire lo spazio residuo sull'asse principale, non su un suo figlio
   interno (un figlio non ha spazio extra da cui essere spinto se il padre
   non ne ha). */
.push-bottom {
    margin-top: auto;
}

/* Sezione Hero — altezza piena viewport, con cap su schermi portrait larghi
   (es. tablet) dove 100vh risulterebbe eccessivo */
#hero {
    height: 100vh;
}

@media (orientation: portrait) and (min-width: 600px) {
    #hero {
        height: min(100vh, 800px);
    }
}

/* Widget "menu-scroll" — lista icon-list orizzontale scrollabile su mobile,
   con maschera di fade sui bordi e freccia animata quando c'è altro
   contenuto da scorrere (stato gestito via JS in src/js/index.js) */
.elementor-widget.menu-scroll .elementor-icon-list-items.elementor-inline-items {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

@media (max-width: 767px) {
    .elementor-widget.menu-scroll .elementor-icon-list-items.elementor-inline-items {
        padding-inline-end: 20px;
    }
}

.elementor-widget.menu-scroll .elementor-icon-list-items.elementor-inline-items::-webkit-scrollbar {
    display: none;
}

.elementor-widget.menu-scroll .elementor-icon-list-items.elementor-inline-items .elementor-inline-item {
    flex-shrink: 0;
    word-break: normal;
    white-space: nowrap;
}

.elementor-widget.menu-scroll {
    --fade-size: 110px;
    position: relative;
}

.elementor-widget.menu-scroll .is-scrollable.at-start:not(.at-end) {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - var(--fade-size)), rgba(0, 0, 0, 0.4) calc(100% - 36px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - var(--fade-size)), rgba(0, 0, 0, 0.4) calc(100% - 36px), transparent);
}

.elementor-widget.menu-scroll .is-scrollable.at-end:not(.at-start) {
    -webkit-mask-image: linear-gradient(to right, transparent, rgba(0, 0, 0, 0.4) 36px, #000 var(--fade-size));
    mask-image: linear-gradient(to right, transparent, rgba(0, 0, 0, 0.4) 36px, #000 var(--fade-size));
}

.elementor-widget.menu-scroll .is-scrollable:not(.at-start):not(.at-end) {
    -webkit-mask-image: linear-gradient(to right, transparent, rgba(0, 0, 0, 0.4) 36px, #000 var(--fade-size), #000 calc(100% - var(--fade-size)), rgba(0, 0, 0, 0.4) calc(100% - 36px), transparent);
    mask-image: linear-gradient(to right, transparent, rgba(0, 0, 0, 0.4) 36px, #000 var(--fade-size), #000 calc(100% - var(--fade-size)), rgba(0, 0, 0, 0.4) calc(100% - 36px), transparent);
}

.elementor-widget.menu-scroll:has(.is-scrollable:not(.at-end))::after {
    content: "";
    position: absolute;
    inset-block-start: calc(100% + 10px);
    inset-inline-start: calc(50% - 5px);
    width: 10px;
    height: 10px;
    border-inline-end: 2px solid var(--e-global-color-secondary);
    border-block-start: 2px solid var(--e-global-color-secondary);
    transform: rotate(45deg);
    pointer-events: none;
    animation: menu-scroll-hint 1.6s ease-in-out infinite;
}

@keyframes menu-scroll-hint {
    0%, 100% {
        transform: translateX(0) rotate(45deg);
        opacity: 0.9;
    }
    50% {
        transform: translateX(5px) rotate(45deg);
        opacity: 0.5;
    }
}

@media (prefers-reduced-motion: reduce) {
    .elementor-widget.menu-scroll:has(.is-scrollable:not(.at-end))::after {
        animation: none;
    }
}

/* Drawer filtri Blog (#filtri) — da tablet (1024px) in giù diventa una
   barra fissa a destra, nascosta di default; si apre con #filtri-toggle
   (iniettato via JS in src/js/index.js, subito sopra la sezione articoli).
   Da desktop (oltre 1024px) resta la barra orizzontale in-flow originale,
   invariata. */
#filtri-toggle {
    display: none;
    align-items: center;
    gap: var(--space-2);
    margin-block: var(--space-6);
    margin-inline: var(--space-5); /* 20px */
    padding: var(--space-2) var(--space-5);
    border-radius: var(--radius-full);
    background: var(--e-global-color-navy, #23314E);
    color: var(--e-global-color-white, #fff);
    font-family: var(--font-family-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    letter-spacing: var(--letter-spacing-wide);
    text-transform: uppercase;
    cursor: pointer;
    transition: opacity var(--transition-fast);
}

#filtri-toggle:hover {
    opacity: 0.85;
}

#filtri-close {
    display: none;
    position: absolute;
    inset-block-start: var(--space-4);
    inset-inline-end: var(--space-4);
    width: 44px;
    height: 44px;
    background: var(--e-global-color-navy, #23314E);
    border: none;
    border-radius: var(--radius-full);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    color: var(--e-global-color-white, #fff);
    cursor: pointer;
    transition: background-color var(--transition-fast), transform var(--transition-fast);
}

/* X disegnata in CSS invece del glifo "×" del font: un carattere non è mai
   centrato esattamente sul proprio bounding box (metriche del font), due
   barre ruotate centrate via transform lo sono sempre, a prescindere dal
   font caricato. */
#filtri-close::before,
#filtri-close::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 2px;
    background: currentColor;
    border-radius: 1px;
}

#filtri-close::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

#filtri-close::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

#filtri-close:hover {
    background-color: var(--e-global-color-primary, #CE8118);
    transform: scale(1.05);
}

@media (max-width: 1024px) {
    #filtri-toggle {
        display: inline-flex;
    }

    #filtri {
        position: fixed;
        inset-block: 0;
        inset-inline-end: 0;
        /* Sopra la navbar mobile (elementor-brain/navbar.css arriva a
           9999 col menu aperto): senza questo il menu ci finisce sopra. */
        z-index: 10000;
        height: 100vh;
        width: min(320px, 85vw);
        overflow-y: auto;
        justify-content: center;
        transform: translateX(100%);
        transition: transform var(--transition-slow);
    }

    #filtri.is-open {
        transform: translateX(0);
    }

    #filtri .e-filter {
        flex-direction: column;
        align-items: stretch;
    }

    #filtri-close {
        display: flex;
    }
}