/*
Theme Name: BravArchitettura
Theme URI: https://www.arc.it/
Author: Raffaello Corradini
Author URI: https://www.arc.it/
Description: Tema professionale per studi di architettura con layout avanzati e widget specializzati. Include 5 aree widget homepage (HOME1-HOME5) visibili solo sulla pagina principale, sidebar destra per widget classici, layout responsive con opzione "boxed" e immagine di sfondo personalizzabile, sistema di visualizzazione post per categoria con vista standard e alternativa, widget immagine interattiva con controlli di zoom/ritaglio/effetti hover e ritardo colorazione personalizzabile, widget collage fotografico con 7 effetti hover personalizzabili (spirale, onda, stelle, fuoco, vortice, fulmine, arcobaleno) e ritardo colorazione individuale per ogni immagine, widget collage modulare asimmetrico avanzato con picker immagini, URL personalizzabili, effetti grayscale e ricolorazione su hover, spaziature completamente personalizzabili fino a 0px per layout adiacenti senza bordi, template articoli singoli ottimizzati, integrazione WPForms, supporto multilingua GTranslate, sistema di paginazione avanzato, tipografia personalizzabile con Google Fonts (Raleway, Poppins), splash page personalizzabile con fino a 5 immagini e testo posizionabile in 9 posizioni, menu container trasparente e menu sticky, e design completamente responsive per tutti i dispositivi.
Version: 1.2.4
Requires at least: 6.0
Requires PHP: 7.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: bravarchitettura
*/

@import url('https://fonts.googleapis.com/css?family=Montserrat:700,400&display=swap');

body {
    font-family: Arial, sans-serif;
    background: #f7f7f7;
    color: #222;
    margin: 0;
    padding: 0;
}

/* DESIGN MINIMALISTA - ELIMINAZIONE COMPLETA DI BORDI, OMBRE E BORDER-RADIUS */
/* Rimuovi solo i bordi da elementi specifici, non da tutti */
.modular-collage-container .modular-module,
.divider,
.separator,
hr {
    border: none !important;
    border-width: 0 !important;
    border-style: none !important;
    border-color: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: none !important;
}

/* RIMUOVI COMPLETAMENTE TUTTI GLI STILI VISIBILI DAI CONTAINER DELLE IMMAGINI */
.collage-image,
.collage-image *,
.bravarchitettura-image-container,
.bravarchitettura-image-container *,
.modular-module,
.modular-module *,
.modular-module-image,
.modular-module-image * {
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: none !important;
    outline: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* FORZA RIMOZIONE BORDI DAI MODULI MODULAR COLLAGE */
.modular-module[style*="border"],
.modular-module-image[style*="border"] {
    border: none !important;
    border-width: 0 !important;
    border-style: none !important;
    border-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
}

/* REGOLE GLOBALI PER RIMUOVERE TUTTI I BORDI DAI MODULI */
.modular-module,
.modular-module-image,
.modular-module a,
.modular-module img {
    border: none !important;
    border-width: 0 !important;
    border-style: none !important;
    border-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
    background: none !important;
    background-color: transparent !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* FORZA ALTEZZA AUTOMATICA PER CONTAINER COLLAGE SU MOBILE */
@media (max-width: 768px) {
    .collage-container[style*="height"],
    .modular-collage-container[style*="height"] {
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
    }
    
    .collage-2x2[style*="height"],
    .collage-3x1[style*="height"],
    .collage-4x1[style*="height"],
    .collage-1x3[style*="height"],
    .collage-left-tall[style*="height"],
    .collage-right-tall[style*="height"],
    .collage-top-wide[style*="height"],
    .collage-bottom-wide[style*="height"],
    .modular-collage-grid[style*="height"] {
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
    }
}

/* RIPRISTINA BORDI PER WPForms */
.wpforms-container input,
.wpforms-container textarea,
.wpforms-container select,
.wpforms-container button {
    border: 1px solid #abb8c3 !important;
    border-radius: 3px !important;
    border-style: solid !important;
    border-width: 1px !important;
    box-shadow: none !important;
    outline: none !important;
}

/* ===== WIDGET COLLAGE MODULARE ===== */
.modular-collage-container {
    width: 100%;
    margin: 0 auto;
    padding: 20px;
    background: #fff;
}

.modular-collage-title {
    text-align: center;
    margin-bottom: 30px;
    font-size: 2em;
    color: #333;
    font-weight: 300;
}

.modular-collage-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 2fr;
    grid-template-rows: 1fr 1fr 1fr;
    height: 600px;
    width: 100%;
}

/* FORZA IL GAP INLINE DEL WIDGET - PRIORITÀ ASSOLUTA */
.modular-collage-grid[style*="gap: 0"] {
    gap: 0 !important;
}
.modular-collage-grid[style*="gap: 1px"] {
    gap: 1px !important;
}
.modular-collage-grid[style*="gap: 2px"] {
    gap: 2px !important;
}
.modular-collage-grid[style*="gap: 5px"] {
    gap: 5px !important;
}
.modular-collage-grid[style*="gap: 10px"] {
    gap: 10px !important;
}
.modular-collage-grid[style*="gap: 20px"] {
    gap: 20px !important;
}

/* ===== LAYOUT RESPONSIVE PER TABLET ===== */
@media (max-width: 1024px) {
    .modular-collage-grid {
        grid-template-columns: 1fr 1fr 1fr !important;
        grid-template-rows: 1fr 1fr 1fr 1fr !important;
        height: 800px !important;
        /* Il gap è gestito dal widget inline */
    }
    
    /* Riposizionamento per tablet */
    .modular-module.top-left,
    .modular-module.top-center,
    .modular-module.top-right {
        grid-column: span 1 !important;
        grid-row: span 1 !important;
    }
    
    .modular-module.left-tall {
        grid-column: 1 / 3 !important;
        grid-row: 2 / 4 !important;
    }
    
    .modular-module.middle-foto {
        grid-column: 3 !important;
        grid-row: 2 !important;
    }
    
    .modular-module.middle-news {
        grid-column: 3 !important;
        grid-row: 3 !important;
    }
    
    .modular-module.right-large {
        grid-column: 1 / 4 !important;
        grid-row: 4 !important;
    }
}

/* ===== LAYOUT RESPONSIVE PER MOBILE ===== */
@media (max-width: 768px) {
    .modular-collage-grid {
        grid-template-columns: 1fr !important;
        grid-template-rows: repeat(7, 1fr) !important;
        height: auto !important;
        min-height: 800px !important;
        /* Il gap è gestito dal widget inline */
    }
    
    .modular-module.top-left,
    .modular-module.top-center,
    .modular-module.top-right,
    .modular-module.left-tall,
    .modular-module.middle-foto,
    .modular-module.middle-news,
    .modular-module.right-large {
        grid-column: 1 !important;
        grid-row: auto !important;
        min-height: 100px !important;
        font-size: 1.1em !important;
    }
    
    /* Su mobile, tutti i moduli tornano a occupare una sola colonna */
    .modular-module.left-tall {
        grid-column: 1 !important;
        grid-row: auto !important;
    }
    
    .modular-module.middle-foto {
        grid-column: 1 !important;
        grid-row: auto !important;
    }
    
    .modular-module.middle-news {
        grid-column: 1 !important;
        grid-row: auto !important;
    }
    
    .modular-module.right-large {
        font-size: 1.8em !important;
    }
}

/* Top Row - 3 pannelli "PROGETTO" */
.modular-module.top-left {
    grid-column: 1;
    grid-row: 1;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2em;
    font-weight: bold;
    color: #000;
    text-align: center;
    padding: 20px;
    box-sizing: border-box;
}

.modular-module.top-center {
    grid-column: 2;
    grid-row: 1;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2em;
    font-weight: bold;
    color: #000;
    text-align: center;
    padding: 20px;
    box-sizing: border-box;
}

.modular-module.top-right {
    grid-column: 3;
    grid-row: 1;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2em;
    font-weight: bold;
    color: #000;
    text-align: center;
    padding: 20px;
    box-sizing: border-box;
}

/* Left Column - Pannello alto "PROGETTO" - ESPANSO */
.modular-module.left-tall {
    grid-column: 1 / 3;
    grid-row: 2 / 4;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5em;
    font-weight: bold;
    color: #000;
    text-align: center;
    padding: 20px;
    box-sizing: border-box;
}

/* Middle Column - "FOTO" e "NEWS" - RIPOSIZIONATI */
.modular-module.middle-foto {
    grid-column: 3;
    grid-row: 2;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2em;
    font-weight: bold;
    color: #000;
    text-align: center;
    padding: 20px;
    box-sizing: border-box;
}

.modular-module.middle-news {
    grid-column: 3;
    grid-row: 3;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2em;
    font-weight: bold;
    color: #000;
    text-align: center;
    padding: 20px;
    box-sizing: border-box;
}

/* Right Column - Pannello grande "PROGETTO" */
.modular-module.right-large {
    grid-column: 4;
    grid-row: 1 / 4;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8em;
    font-weight: bold;
    color: #000;
    text-align: center;
    padding: 20px;
    box-sizing: border-box;
}


/* Contenuti dei moduli */
.module-placeholder {
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
    text-align: center;
}

.module-post-content {
    font-size: 0.9em;
    line-height: 1.4;
    color: #333;
    text-align: left;
    overflow: hidden;
}

.module-post-content img {
    max-width: 100%;
    height: auto;
    margin: 10px 0;
}

/* Responsive per tablet */
@media (max-width: 1024px) {
    .modular-collage-grid {
        grid-template-columns: 1fr 1fr 1fr !important;
        grid-template-rows: 1fr 1fr 1fr 1fr !important;
        height: 800px !important;
        /* Il gap è gestito dal widget inline */
    }
    
    /* Riposizionamento per tablet */
    .modular-module.left-tall {
        grid-column: 1 / 3 !important;
        grid-row: 2 / 4 !important;
    }
    
    .modular-module.middle-foto {
        grid-column: 3 !important;
        grid-row: 2 !important;
    }
    
    .modular-module.middle-news {
        grid-column: 3 !important;
        grid-row: 3 !important;
    }
    
    .modular-module.right-large {
        grid-column: 1 / 4 !important;
        grid-row: 4 !important;
        font-size: 2em;
    }
}

/* Responsive per mobile */
@media (max-width: 768px) {
    .modular-collage-grid {
        grid-template-columns: 1fr !important;
        grid-template-rows: repeat(7, 1fr) !important;
        height: auto !important;
        min-height: 800px !important;
        /* Il gap è gestito dal widget inline */
    }
    
    .modular-module.top-left,
    .modular-module.top-center,
    .modular-module.top-right,
    .modular-module.left-tall,
    .modular-module.middle-foto,
    .modular-module.middle-news,
    .modular-module.right-large {
        grid-column: 1 !important;
        grid-row: auto !important;
        min-height: 100px !important;
        font-size: 1.1em !important;
    }
    
    /* Su mobile, tutti i moduli tornano a occupare una sola colonna */
    .modular-module.left-tall {
        grid-column: 1 !important;
        grid-row: auto !important;
    }
    
    .modular-module.middle-foto {
        grid-column: 1 !important;
        grid-row: auto !important;
    }
    
    .modular-module.middle-news {
        grid-column: 1 !important;
        grid-row: auto !important;
    }
    
    .modular-module.right-large {
        font-size: 1.8em !important;
    }
    
    .modular-collage-container {
        padding: 15px;
    }
    
    .modular-collage-title {
        font-size: 1.5em;
        margin-bottom: 20px;
    }
}

/* ===== GESTIONE SPAZIATURE PERSONALIZZABILI ===== */
/* Le spaziature sono ora gestite completamente inline dal widget */

/* Rimuovi completamente i bordi e padding quando la spaziatura è 0px */
.modular-collage-container[style*="gap: 0"] .modular-module {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Rimuovi il padding specifico di ogni modulo quando spaziatura è 0px */
.modular-collage-container[style*="gap: 0"] .modular-module.top-left,
.modular-collage-container[style*="gap: 0"] .modular-module.top-center,
.modular-collage-container[style*="gap: 0"] .modular-module.top-right,
.modular-collage-container[style*="gap: 0"] .modular-module.left-tall,
.modular-collage-container[style*="gap: 0"] .modular-module.middle-foto,
.modular-collage-container[style*="gap: 0"] .modular-module.middle-news,
.modular-collage-container[style*="gap: 0"] .modular-collage-container[style*="gap: 0"] .modular-module.right-large {
    padding: 0 !important;
}

/* Assicurati che le immagini riempiano completamente i moduli senza spazi */
.modular-collage-container[style*="gap: 0"] .modular-module-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

/* ===== EFFETTI GRAYSCALE E HOVER ===== */
.modular-module-image {
    display: block;
    width: 100%;
    height: 100%;
    transition: all 0.3s ease;
}

.modular-module-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.3s ease;
}

/* Effetto grayscale con ricolorazione su hover */
.modular-module-image.grayscale-effect {
    filter: grayscale(100%);
    transition: filter var(--color-delay, 1.5s) ease;
}

.modular-module-image.grayscale-effect:hover {
    filter: grayscale(0%);
    transition: filter 0.3s ease;
}

/* Stili per il form del widget */
.image-picker-container {
    margin-bottom: 10px;
}

.image-picker-preview {
    margin: 10px 0;
    padding: 10px;
    border: 1px solid #ddd;
    background: #f9f9f9;
    text-align: center;
    min-height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.image-picker-preview img {
    max-width: 100px;
    height: auto;
    border-radius: 4px;
}

.modular-select-image,
.modular-remove-image {
    margin: 5px 5px 5px 0 !important;
}

.modular-remove-image {
    background: #dc3232 !important;
    border-color: #dc3232 !important;
    color: white !important;
}

.modular-remove-image:hover {
    background: #c92626 !important;
    border-color: #c92626 !important;
}

/* Eliminazione specifica per elementi comuni */
.container,
.container-full-width,
.site-main,
.site-sidebar,
.widget,
.widget-area,
.post,
.article,
.page,
.comment,
.form,
input,
textarea,
select,
button,
.btn,
.card,
.panel,
.box,
.alert,
.modal,
.popup,
.tooltip,
.dropdown,
.menu,
.nav,
.header,
.footer,
.sidebar,
.content,
.main,
.aside,
.section,
.divider,
.separator,
hr {
    border: none !important;
    border-width: 0 !important;
    border-style: none !important;
    border-color: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: none !important;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    background: #fff;
    border: none !important;
    box-shadow: none !important;
}

/* Container per layout full-width */
.container-full-width {
    max-width: 100%;
    margin: 0 auto;
    padding: 20px;
    background: #fff;
    width: 100%;
    box-sizing: border-box;
    border: none !important;
    box-shadow: none !important;
}

/* Layout full-width che rispetta il layout boxed */
.layout-boxed .container-full-width {
    max-width: var(--boxed-max-width, 1200px);
    margin: 0 auto;
    padding: 20px;
    background: #fff;
    width: 100%;
    box-sizing: border-box;
    border: none !important;
    box-shadow: none !important;
}

/* Layout principale con sidebar */
.site-main {
    float: left;
    width: 70%;
    padding-right: 30px;
    box-sizing: border-box;
}

/* Layout full-width senza sidebar */
.site-main.full-width {
    float: none;
    width: 100%;
    padding-right: 0;
    margin: 0 auto;
    max-width: 100%;
}

/* Nascondi la sidebar quando è vuota */
.container.no-sidebar .site-sidebar {
    display: none;
}

/* Layout full-width che rispetta il layout boxed */
.layout-boxed .site-main.full-width {
    float: none;
    width: 100%;
    padding-right: 0;
    margin: 0 auto;
    max-width: 100%;
}

.site-sidebar {
    float: right;
    width: 30%;
    padding-left: 20px;
    box-sizing: border-box;
}

/* Clearfix per il container */
.container:after,
.container-full-width:after {
    content: "";
    display: table;
    clear: both;
}

/* Responsive per dispositivi mobili */
@media (max-width: 768px) {
    .site-main,
    .site-sidebar {
        float: none;
        width: 100%;
        padding: 0;
        margin-bottom: 20px;
    }
    
    .site-main.full-width {
        width: 100%;
        padding: 0;
    }
    
    .container-full-width {
        padding: 15px;
    }
    
    .layout-boxed .container-full-width {
        padding: 15px;
    }
    
    /* Responsive per header su mobile */
    .site-header-flex {
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        gap: 15px !important;
        padding: 15px 0 !important;
    }
    
    .header-left {
        justify-content: flex-start !important;
        margin: 0 !important;
        flex: 1 !important;
    }
    
    .main-navigation {
        justify-content: flex-end !important;
        margin: 0 !important;
        position: relative !important;
    }
    

}

/* Stili per la sidebar */
.site-sidebar {
    background: #f9f9f9;
    border-radius: 8px;
    padding: 20px;
}

.site-sidebar .widget {
    margin-bottom: 30px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    padding: 15px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.site-sidebar .widget:last-child {
    margin-bottom: 0;
}

.site-sidebar .widget-title {
    font-size: 1.1em;
    margin: 0 0 15px 0;
    padding-bottom: 10px;
    border-bottom: 2px solid #0073aa;
    color: #333;
    font-weight: 300;
}

.site-sidebar .widget ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.site-sidebar .widget ul li {
    padding: 8px 0;
    border-bottom: 1px solid #f0f0f0;
}

.site-sidebar .widget ul li:last-child {
    border-bottom: none;
}

.site-sidebar .widget ul li a {
    color: #555;
    text-decoration: none;
    transition: color 0.3s ease;
}

.site-sidebar .widget ul li a:hover {
    color: #0073aa;
}

.widget-area {
    background: #eaeaea;
    padding: 20px;
    margin-bottom: 30px;
    border-radius: 8px;
}

.widget-post {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 6px;
    margin-bottom: 20px;
    padding: 15px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.03);
}

.widget-post-title {
    font-size: 1.2em;
    margin: 0 0 10px 0;
    font-weight: 300;
    color: #333;
}

.widget-post-date {
    color: #888;
    font-size: 0.9em;
    margin-bottom: 8px;
}

.widget-post-excerpt {
    font-size: 1em;
    margin-bottom: 10px;
}

.widget-post-readmore {
    color: #0073aa;
    text-decoration: none;
    font-weight: bold;
}
.widget-post-readmore:hover {
    text-decoration: underline;
}

/* Griglia delle 4 aree widget in homepage */
.homepage-top-widgets {
    margin-bottom: 40px;
}
.widget-grid {
    display: flex;
    gap: 24px;
}
.widget-col {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 24px;
}
.widget-col-sx .widget-row-top .area1 {
    height: 180px;
}
.widget-col-dx .widget-row-top .area2 {
    height: 320px;
}
.widget-col-sx .widget-row-bottom .area3 {
    height: 320px;
}
.widget-col-dx .widget-row-bottom .area4 {
    height: 180px;
}
.area1, .area2, .area3, .area4 {
    background: #f5f5f5;
    border-radius: 8px;
    padding: 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    overflow: hidden;
}
@media (max-width: 900px) {
    .widget-grid {
        flex-direction: column;
    }
    .widget-col {
        gap: 16px;
    }
    .area1, .area2, .area3, .area4 {
        height: auto !important;
    }
} 

/* Griglia 2x2 per le 4 aree widget in homepage */
.widget-grid-2x2 {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    grid-template-rows: 180px 320px;
    gap: 24px;
}
.area1 {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
}
.area2 {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
}
.area3 {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
}
.area4 {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
}
@media (max-width: 900px) {
    .widget-grid-2x2 {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }
    .widget-grid-2x2 > div {
        height: auto !important;
    }
} 

/* DEBUG: Forza la griglia 2x2 per le aree widget in homepage */
.widget-grid-2x2 {
    display: grid !important;
    grid-template-columns: 1fr 1.5fr !important;
    grid-template-rows: 180px 320px !important;
    gap: 24px !important;
    border: 2px solid red !important;
    background: #fffbe6 !important;
}
.area1 { grid-column: 1 / 2; grid-row: 1 / 2; background: #ffe4e1 !important; }
.area2 { grid-column: 2 / 3; grid-row: 1 / 2; background: #e1f7ff !important; }
.area3 { grid-column: 1 / 2; grid-row: 2 / 3; background: #e1ffe4 !important; }
.area4 { grid-column: 2 / 3; grid-row: 2 / 3; background: #f0e1ff !important; }

@media (max-width: 900px) {
    .widget-grid-2x2 {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
    }
    .widget-grid-2x2 > div {
        height: auto !important;
    }
} 

/* Fix visibilità immagini widget interattivo */
.interactive-image-widget-container {
  min-height: 180px;
  width: 100%;
  position: relative;
  overflow: hidden;
  background: #fff;
}
.interactive-image-widget-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  margin: 0 auto;
  transition: transform 0.2s;
}
.area1, .area2, .area3, .area4 {
  min-height: 180px;
} 

.area1, .area2, .area3, .area4 {
    height: 100% !important;
    min-height: 0 !important;
    width: 100% !important;
    display: flex;
    align-items: stretch;
    justify-content: stretch;
    padding: 3px; /* bordo colorato sottile */
    box-sizing: border-box;
    overflow: hidden;
}
.area1 > .widget, .area2 > .widget, .area3 > .widget, .area4 > .widget,
.area1 > *, .area2 > *, .area3 > *, .area4 > * {
    flex: 1 1 100%;
    width: 100%;
    height: 100%;
    min-height: 0;
    min-width: 0;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    display: flex;
    align-items: stretch;
    justify-content: stretch;
    background: transparent;
}
.widget-area, .widget-post, .widget {
    flex: 1 1 100%;
    width: 100%;
    height: 100%;
    min-height: 0;
    min-width: 0;
    box-sizing: border-box;
    display: flex;
    align-items: stretch;
    justify-content: stretch;
    background: transparent;
}
.area1 img, .area2 img, .area3 img, .area4 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* HEADER FLEX: logo a sinistra, menu a destra */

/* NEW CLEAN MENU SYSTEM - TO BE ADDED */ 

.area1 > .widget:empty::after,
.area2 > .widget:empty::after,
.area3 > .widget:empty::after,
.area4 > .widget:empty::after {
    content: '';
    display: block;
    flex: 1 1 100%;
    width: 100%;
    height: 100%;
    min-height: 0;
    min-width: 0;
} 

.widget.widget-empty {
    flex: 1 1 100%;
    width: 100%;
    height: 100%;
    min-height: 0;
    min-width: 0;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    display: flex;
} 

/* Nuova struttura dinamica homepage */
.homepage-row {
    display: flex;
    gap: 24px;
    margin-bottom: 32px;
    width: 100%;
}
.homepage-col {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    overflow: hidden;
    min-height: 180px;
    padding: 0;
}
.homepage-col > .widget-area, .homepage-col > .widget {
    min-height: 0 !important;
    flex: unset !important;
    height: auto !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
}
.widget-area {
    padding: 0 !important;
    margin-bottom: 0 !important;
    background: none !important;
    border-radius: 0 !important;
}
.widget {
    margin-bottom: 20px;
    width: 100%;
    box-sizing: border-box;
}
.widget:last-child {
    margin-bottom: 0;
}
@media (max-width: 900px) {
    .homepage-row {
        flex-direction: column;
        gap: 16px;
    }
    .homepage-col {
        width: 100% !important;
        min-width: 0;
        min-height: 120px;
    }
} 

/* Elimina ogni spazio tra i widget in colonna */
.homepage-col,
.widget-area,
.bravarchitettura-simple-image-container {
    padding: 0 !important;
    margin: 0 !important;
}

.widget,
.widget-area,
.homepage-col > .widget-area,
.homepage-col > .widget {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
    background: none !important;
    flex: unset !important;
    height: auto !important;
    min-height: 0 !important;
}

.widget_bravarchitettura_simple_image {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
    box-shadow: none !important;
} 

/* Fix definitivo: elimina gap/margin/padding tra blocchi colonne Gutenberg e widget immagine semplice */
.wp-block-columns.is-layout-flex,
.wp-block-column.is-layout-flow,
.wp-block-column.is-layout-flex {
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}
.wp-block-columns > .wp-block-column {
    margin: 0 !important;
    padding: 0 !important;
}
.wp-block-column > .widget,
.wp-block-column > .widget_bravarchitettura_simple_image,
.wp-block-column > .bravarchitettura-simple-image-container {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
    box-shadow: none !important;
} 
:where(.wp-block-columns.is-layout-flex) {
    gap: 0 !important;
}
:where(.wp-block-columns.is-layout-flex) > .wp-block-column {
    margin: 0 !important;
    padding: 0 !important;
}
:where(.wp-block-column.is-layout-flow) > * {
    margin: 0 !important;
    padding: 0 !important;
}

/* Stili per il widget immagine avanzata */
.bravarchitettura-simple-image-container {
    position: relative;
    overflow: hidden;
    width: 100%;
}

.bravarchitettura-simple-image-container img {
    transition: transform 0.3s ease;
    will-change: transform;
}

/* Stili per i controlli del widget nell'admin - VERSIONE COMPATTA */
.widget_bravarchitettura_simple_image {
    font-size: 12px;
}

.widget_bravarchitettura_simple_image .widget-section {
    margin-bottom: 15px;
    background: #f9f9f9;
    border: 1px solid #e1e1e1;
    border-radius: 4px;
    padding: 10px;
}

.widget_bravarchitettura_simple_image .widget-section h4 {
    margin: 0 0 8px 0 !important;
    font-size: 11px !important;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.widget_bravarchitettura_simple_image .control-row {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
}

.widget_bravarchitettura_simple_image .control-group {
    flex: 1;
}

.widget_bravarchitettura_simple_image .control-group label {
    display: block;
    font-size: 10px;
    font-weight: bold;
    margin-bottom: 3px;
    color: #333;
}

.widget_bravarchitettura_simple_image .control-group input,
.widget_bravarchitettura_simple_image .control-group select {
    width: 100%;
    padding: 4px 6px;
    border: 1px solid #ddd;
    border-radius: 3px;
    font-size: 11px;
    height: 28px;
    box-sizing: border-box;
}

.widget_bravarchitettura_simple_image .control-group small {
    font-size: 9px;
    color: #666;
    margin-top: 2px;
    display: block;
}

/* Pulsante per aprire modal */
.widget_bravarchitettura_simple_image .bravarchitettura-open-modal {
    background: linear-gradient(135deg, #0073aa, #005a87) !important;
    color: white !important;
    border: none !important;
    border-radius: 6px !important;
    font-weight: bold !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3) !important;
    box-shadow: 0 2px 4px rgba(0,115,170,0.3) !important;
    transition: all 0.3s ease !important;
}

.widget_bravarchitettura_simple_image .bravarchitettura-open-modal:hover {
    background: linear-gradient(135deg, #005a87, #004466) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 8px rgba(0,115,170,0.4) !important;
}

/* FINESTRA MODALE FLOTTANTE */
.bravarchitettura-modal-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(0, 0, 0, 0.8) !important;
    z-index: 999999 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    backdrop-filter: blur(5px) !important;
    -webkit-backdrop-filter: blur(5px) !important;
}

.bravarchitettura-modal {
    background: white !important;
    border-radius: 15px !important;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.4) !important;
    width: 90vw !important;
    max-width: 800px !important;
    max-height: 85vh !important;
    overflow: hidden !important;
    animation: modalSlideIn 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative !important;
    margin: 0 !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: scale(0.8) translateY(-30px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.bravarchitettura-modal-header {
    background: linear-gradient(135deg, #0073aa, #005a87) !important;
    color: white !important;
    padding: 25px 30px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    border-bottom: 1px solid #004466 !important;
    border-radius: 15px 15px 0 0 !important;
}

.bravarchitettura-modal-header h3 {
    margin: 0 !important;
    font-size: 20px !important;
    font-weight: bold !important;
}

.bravarchitettura-modal-close {
    background: none !important;
    border: none !important;
    color: white !important;
    font-size: 28px !important;
    cursor: pointer !important;
    padding: 0 !important;
    width: 35px !important;
    height: 35px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background 0.2s ease !important;
    line-height: 1 !important;
}

.bravarchitettura-modal-close:hover {
    background: rgba(255, 255, 255, 0.2) !important;
}

.bravarchitettura-modal-content {
    padding: 30px !important;
    max-height: 60vh !important;
    overflow-y: auto !important;
    background: #fafafa !important;
}

.modal-section {
    margin-bottom: 30px !important;
    padding: 25px !important;
    background: white !important;
    border-radius: 10px !important;
    border: 1px solid #e9ecef !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05) !important;
}

.modal-section h4 {
    margin: 0 0 20px 0 !important;
    font-size: 18px !important;
    font-weight: bold !important;
    color: #333 !important;
    border-bottom: 3px solid #0073aa !important;
    padding-bottom: 10px !important;
}

.modal-section .control-row {
    display: flex !important;
    gap: 20px !important;
    margin-bottom: 20px !important;
}

.modal-section .control-group {
    flex: 1 !important;
}

.modal-section .control-group label {
    display: block !important;
    font-size: 15px !important;
    font-weight: bold !important;
    margin-bottom: 10px !important;
    color: #333 !important;
}

.modal-section .control-group input,
.modal-section .control-group select {
    width: 100% !important;
    padding: 12px 15px !important;
    border: 2px solid #ddd !important;
    border-radius: 8px !important;
    font-size: 15px !important;
    height: 45px !important;
    box-sizing: border-box !important;
    transition: border-color 0.2s ease !important;
}

.modal-section .control-group input:focus,
.modal-section .control-group select:focus {
    border-color: #0073aa !important;
    outline: none !important;
    box-shadow: 0 0 0 4px rgba(0, 115, 170, 0.1) !important;
}

/* Controlli di spaziatura nella modal */
.modal-section .spacing-controls {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 20px !important;
    margin-bottom: 20px !important;
}

.modal-section .spacing-row {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    background: #f8f9fa !important;
    padding: 15px 18px !important;
    border: 2px solid #e9ecef !important;
    border-radius: 10px !important;
    transition: border-color 0.2s ease !important;
}

.modal-section .spacing-row:hover {
    border-color: #0073aa !important;
    background: #f0f8ff !important;
}

.modal-section .spacing-row label {
    font-size: 14px !important;
    font-weight: bold !important;
    color: #333 !important;
    min-width: 70px !important;
    text-align: right !important;
}

.modal-section .spacing-row input {
    width: 80px !important;
    padding: 10px 12px !important;
    border: 1px solid #ddd !important;
    border-radius: 6px !important;
    font-size: 14px !important;
    text-align: center !important;
    height: 40px !important;
}

.modal-section .spacing-row span {
    font-size: 13px !important;
    color: #666 !important;
    font-weight: bold !important;
}

/* Controlli di ritaglio nella modal */
.modal-section .crop-controls {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 20px !important;
    margin-bottom: 25px !important;
}

.modal-section .crop-row {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    background: #f8f9fa !important;
    padding: 15px 18px !important;
    border: 2px solid #e9ecef !important;
    border-radius: 10px !important;
    transition: border-color 0.2s ease !important;
}

.modal-section .crop-row:hover {
    border-color: #0073aa !important;
    background: #f0f8ff !important;
}

.modal-section .crop-row label {
    font-size: 14px !important;
    font-weight: bold !important;
    color: #333 !important;
    min-width: 70px !important;
    text-align: right !important;
}

.modal-section .crop-row input {
    width: 80px !important;
    padding: 10px 12px !important;
    border: 1px solid #ddd !important;
    border-radius: 6px !important;
    font-size: 14px !important;
    text-align: center !important;
    height: 40px !important;
}

.modal-section .crop-row span {
    font-size: 13px !important;
    color: #666 !important;
    font-weight: bold !important;
}

/* Preset di ritaglio nella modal */
.modal-section .crop-presets {
    display: flex !important;
    gap: 15px !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
}

.modal-section .crop-preset {
    font-size: 14px !important;
    padding: 12px 18px !important;
    height: auto !important;
    line-height: 1.4 !important;
    background: #f8f9fa !important;
    border: 2px solid #dee2e6 !important;
    color: #495057 !important;
    border-radius: 8px !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
}

.modal-section .crop-preset:hover {
    background: #0073aa !important;
    border-color: #0073aa !important;
    color: white !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(0,115,170,0.3) !important;
}

/* Footer della modal */
.bravarchitettura-modal-footer {
    background: #f8f9fa !important;
    padding: 25px 30px !important;
    border-top: 1px solid #e9ecef !important;
    display: flex !important;
    gap: 15px !important;
    justify-content: flex-end !important;
    border-radius: 0 0 15px 15px !important;
}

.bravarchitettura-modal-footer .button {
    padding: 12px 25px !important;
    font-size: 15px !important;
    border-radius: 8px !important;
    transition: all 0.2s ease !important;
    font-weight: bold !important;
}

.bravarchitettura-modal-footer .button-primary {
    background: #0073aa !important;
    border-color: #0073aa !important;
    color: white !important;
}

.bravarchitettura-modal-footer .button-primary:hover {
    background: #005a87 !important;
    border-color: #005a87 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(0,115,170,0.3) !important;
}

/* Zoom controls nella modal */
.modal-section .zoom-value {
    display: inline-block !important;
    margin-left: 12px !important;
    font-weight: bold !important;
    color: #0073aa !important;
    font-size: 16px !important;
    background: #e7f3ff !important;
    padding: 6px 12px !important;
    border-radius: 6px !important;
    border: 1px solid #0073aa !important;
}

.modal-section .zoom-labels {
    display: flex !important;
    justify-content: space-between !important;
    font-size: 13px !important;
    color: #666 !important;
    margin-top: 8px !important;
    font-weight: 500 !important;
}

.modal-section input[type="range"] {
    width: 100% !important;
    margin: 15px 0 !important;
    height: 10px !important;
    border-radius: 5px !important;
    background: #e9ecef !important;
    outline: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

.modal-section input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 24px !important;
    height: 24px !important;
    border-radius: 50% !important;
    background: #0073aa !important;
    cursor: pointer !important;
    box-shadow: 0 3px 8px rgba(0,0,0,0.3) !important;
    border: 2px solid white !important;
}

.modal-section input[type="range"]::-moz-range-thumb {
    width: 24px !important;
    height: 24px !important;
    border-radius: 50% !important;
    background: #0073aa !important;
    cursor: pointer !important;
    box-shadow: 0 3px 8px rgba(0,0,0,0.3) !important;
    border: 2px solid white !important;
}

/* Responsive per la modal */
@media (max-width: 768px) {
    .bravarchitettura-modal {
        width: 95vw !important;
        max-width: none !important;
        margin: 10px !important;
        max-height: 90vh !important;
    }
    
    .bravarchitettura-modal-content {
        padding: 20px !important;
    }
    
    .modal-section {
        padding: 20px !important;
    }
    
    .modal-section .spacing-controls,
    .modal-section .crop-controls {
        grid-template-columns: 1fr !important;
    }
    
    .bravarchitettura-modal-footer {
        flex-direction: column !important;
        padding: 20px !important;
    }
    
    .bravarchitettura-modal-footer .button {
        width: 100% !important;
    }
    
    .modal-section .control-row {
        flex-direction: column !important;
        gap: 15px !important;
    }
}

/* Blocca scroll del body quando modal è aperta */
body.bravarchitettura-modal-open {
    overflow: hidden !important;
    position: fixed !important;
    width: 100% !important;
}

/* STILI PER MODAL DINAMICA NEL BODY - FUNZIONA IN TUTTI I CONTESTI */
.bravarchitettura-modal-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(0, 0, 0, 0.8) !important;
    z-index: 999999 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    backdrop-filter: blur(5px) !important;
    -webkit-backdrop-filter: blur(5px) !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif !important;
}

.bravarchitettura-modal {
    background: white !important;
    border-radius: 15px !important;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.4) !important;
    width: 90vw !important;
    max-width: 800px !important;
    max-height: 85vh !important;
    overflow: hidden !important;
    position: relative !important;
    margin: 0 !important;
    animation: modalSlideIn 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: scale(0.8) translateY(-30px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.bravarchitettura-modal-header {
    background: linear-gradient(135deg, #0073aa, #005a87) !important;
    color: white !important;
    padding: 25px 30px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    border-bottom: 1px solid #004466 !important;
    border-radius: 15px 15px 0 0 !important;
}

.bravarchitettura-modal-header h3 {
    margin: 0 !important;
    font-size: 20px !important;
    font-weight: bold !important;
    color: white !important;
}

.bravarchitettura-modal-close {
    background: none !important;
    border: none !important;
    color: white !important;
    font-size: 28px !important;
    cursor: pointer !important;
    padding: 0 !important;
    width: 35px !important;
    height: 35px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background 0.2s ease !important;
    line-height: 1 !important;
}

.bravarchitettura-modal-close:hover {
    background: rgba(255, 255, 255, 0.2) !important;
}

.bravarchitettura-modal-content {
    padding: 30px !important;
    max-height: 60vh !important;
    overflow-y: auto !important;
    background: #fafafa !important;
}

.bravarchitettura-modal-content .modal-section {
    margin-bottom: 30px !important;
    padding: 25px !important;
    background: white !important;
    border-radius: 10px !important;
    border: 1px solid #e9ecef !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05) !important;
}

.bravarchitettura-modal-content .modal-section h4 {
    margin: 0 0 20px 0 !important;
    font-size: 18px !important;
    font-weight: bold !important;
    color: #333 !important;
    border-bottom: 3px solid #0073aa !important;
    padding-bottom: 10px !important;
}

.bravarchitettura-modal-content .control-row {
    display: flex !important;
    gap: 20px !important;
    margin-bottom: 20px !important;
}

.bravarchitettura-modal-content .control-group {
    flex: 1 !important;
}

.bravarchitettura-modal-content .control-group label {
    display: block !important;
    font-size: 15px !important;
    font-weight: bold !important;
    margin-bottom: 10px !important;
    color: #333 !important;
}

.bravarchitettura-modal-content .control-group input,
.bravarchitettura-modal-content .control-group select {
    width: 100% !important;
    padding: 12px 15px !important;
    border: 2px solid #ddd !important;
    border-radius: 8px !important;
    font-size: 15px !important;
    height: 45px !important;
    box-sizing: border-box !important;
    transition: border-color 0.2s ease !important;
}

.bravarchitettura-modal-content .control-group input:focus,
.bravarchitettura-modal-content .control-group select:focus {
    border-color: #0073aa !important;
    outline: none !important;
    box-shadow: 0 0 0 4px rgba(0, 115, 170, 0.1) !important;
}

/* Controlli di spaziatura nella modal */
.bravarchitettura-modal-content .spacing-controls {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 20px !important;
    margin-bottom: 20px !important;
}

.bravarchitettura-modal-content .spacing-row {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    background: #f8f9fa !important;
    padding: 15px 18px !important;
    border: 2px solid #e9ecef !important;
    border-radius: 10px !important;
    transition: border-color 0.2s ease !important;
}

.bravarchitettura-modal-content .spacing-row:hover {
    border-color: #0073aa !important;
    background: #f0f8ff !important;
}

.bravarchitettura-modal-content .spacing-row label {
    font-size: 14px !important;
    font-weight: bold !important;
    color: #333 !important;
    min-width: 70px !important;
    text-align: right !important;
}

.bravarchitettura-modal-content .spacing-row input {
    width: 80px !important;
    padding: 10px 12px !important;
    border: 1px solid #ddd !important;
    border-radius: 6px !important;
    font-size: 14px !important;
    text-align: center !important;
    height: 40px !important;
}

.bravarchitettura-modal-content .spacing-row span {
    font-size: 13px !important;
    color: #666 !important;
    font-weight: bold !important;
}

/* Controlli di ritaglio nella modal */
.bravarchitettura-modal-content .crop-controls {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 20px !important;
    margin-bottom: 25px !important;
}

.bravarchitettura-modal-content .crop-row {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    background: #f8f9fa !important;
    padding: 15px 18px !important;
    border: 2px solid #e9ecef !important;
    border-radius: 10px !important;
    transition: border-color 0.2s ease !important;
}

.bravarchitettura-modal-content .crop-row:hover {
    border-color: #0073aa !important;
    background: #f0f8ff !important;
}

.bravarchitettura-modal-content .crop-row label {
    font-size: 14px !important;
    font-weight: bold !important;
    color: #333 !important;
    min-width: 70px !important;
    text-align: right !important;
}

.bravarchitettura-modal-content .crop-row input {
    width: 80px !important;
    padding: 10px 12px !important;
    border: 1px solid #ddd !important;
    border-radius: 6px !important;
    font-size: 14px !important;
    text-align: center !important;
    height: 40px !important;
}

.bravarchitettura-modal-content .crop-row span {
    font-size: 13px !important;
    color: #666 !important;
    font-weight: bold !important;
}

/* Preset di ritaglio nella modal */
.bravarchitettura-modal-content .crop-presets {
    display: flex !important;
    gap: 15px !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
}

.bravarchitettura-modal-content .crop-preset {
    font-size: 14px !important;
    padding: 12px 18px !important;
    height: auto !important;
    line-height: 1.4 !important;
    background: #f8f9fa !important;
    border: 2px solid #dee2e6 !important;
    color: #495057 !important;
    border-radius: 8px !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
}

.bravarchitettura-modal-content .crop-preset:hover {
    background: #0073aa !important;
    border-color: #0073aa !important;
    color: white !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(0,115,170,0.3) !important;
}

/* Footer della modal */
.bravarchitettura-modal-footer {
    background: #f8f9fa !important;
    padding: 25px 30px !important;
    border-top: 1px solid #e9ecef !important;
    display: flex !important;
    gap: 15px !important;
    justify-content: flex-end !important;
    border-radius: 0 0 15px 15px !important;
}

.bravarchitettura-modal-footer .button {
    padding: 12px 25px !important;
    font-size: 15px !important;
    border-radius: 8px !important;
    transition: all 0.2s ease !important;
    font-weight: bold !important;
}

.bravarchitettura-modal-footer .button-primary {
    background: #0073aa !important;
    border-color: #0073aa !important;
    color: white !important;
}

.bravarchitettura-modal-footer .button-primary:hover {
    background: #005a87 !important;
    border-color: #005a87 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(0,115,170,0.3) !important;
}

/* Zoom controls nella modal */
.bravarchitettura-modal-content .zoom-value {
    display: inline-block !important;
    margin-left: 12px !important;
    font-weight: bold !important;
    color: #0073aa !important;
    font-size: 16px !important;
    background: #e7f3ff !important;
    padding: 6px 12px !important;
    border-radius: 6px !important;
    border: 1px solid #0073aa !important;
}

.bravarchitettura-modal-content .zoom-labels {
    display: flex !important;
    justify-content: space-between !important;
    font-size: 13px !important;
    color: #666 !important;
    margin-top: 8px !important;
    font-weight: 500 !important;
}

.bravarchitettura-modal-content input[type="range"] {
    width: 100% !important;
    margin: 15px 0 !important;
    height: 10px !important;
    border-radius: 5px !important;
    background: #e9ecef !important;
    outline: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

.bravarchitettura-modal-content input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 24px !important;
    height: 24px !important;
    border-radius: 50% !important;
    background: #0073aa !important;
    cursor: pointer !important;
    box-shadow: 0 3px 8px rgba(0,0,0,0.3) !important;
    border: 2px solid white !important;
}

.bravarchitettura-modal-content input[type="range"]::-moz-range-thumb {
    width: 24px !important;
    height: 24px !important;
    border-radius: 50% !important;
    background: #0073aa !important;
    cursor: pointer !important;
    box-shadow: 0 3px 8px rgba(0,0,0,0.3) !important;
    border: 2px solid white !important;
}

/* Responsive per la modal */
@media (max-width: 768px) {
    .bravarchitettura-modal {
        width: 95vw !important;
        max-width: none !important;
        margin: 10px !important;
        max-height: 90vh !important;
    }
    
    .bravarchitettura-modal-content {
        padding: 20px !important;
    }
    
    .bravarchitettura-modal-content .modal-section {
        padding: 20px !important;
    }
    
    .bravarchitettura-modal-content .spacing-controls,
    .bravarchitettura-modal-content .crop-controls {
        grid-template-columns: 1fr !important;
    }
    
    .bravarchitettura-modal-footer {
        flex-direction: column !important;
        padding: 20px !important;
    }
    
    .bravarchitettura-modal-footer .button {
        width: 100% !important;
    }
    
    .bravarchitettura-modal-content .control-row {
        flex-direction: column !important;
        gap: 15px !important;
    }
}

/* STILI FIRMA FOOTER - NON ELIMINABILE */
.bravarchitettura-signature {
    margin-top: 15px !important;
    padding: 10px 0 !important;
    border-top: 1px solid #e0e0e0 !important;
    font-size: 12px !important;
    color: #666 !important;
    text-align: center !important;
    font-family: Arial, sans-serif !important;
    line-height: 1.4 !important;
    opacity: 0.8 !important;
    transition: opacity 0.3s ease !important;
    display: block !important;
    visibility: visible !important;
    position: relative !important;
    z-index: 1 !important;
}

.bravarchitettura-signature:hover {
    opacity: 1 !important;
}

.bravarchitettura-signature a {
    color: #0073aa !important;
    text-decoration: none !important;
    font-weight: bold !important;
    transition: color 0.3s ease !important;
}

.bravarchitettura-signature a:hover {
    color: #005a87 !important;
    text-decoration: underline !important;
}

/* Protezioni anti-rimozione CSS */
.bravarchitettura-signature[style*="display: none"],
.bravarchitettura-signature[style*="visibility: hidden"],
.bravarchitettura-signature[style*="opacity: 0"] {
    display: block !important;
    visibility: visible !important;
    opacity: 0.8 !important;
}

/* Protezione da CSS esterni */
.bravarchitettura-signature {
    display: block !important;
    visibility: visible !important;
    opacity: 0.8 !important;
    position: relative !important;
    z-index: 1 !important;
    margin-top: 15px !important;
    padding: 10px 0 !important;
    border-top: 1px solid #e0e0e0 !important;
    font-size: 12px !important;
    color: #666 !important;
    text-align: center !important;
    font-family: Arial, sans-serif !important;
    line-height: 1.4 !important;
    transition: opacity 0.3s ease !important;
}

/* Responsive per la firma */
@media (max-width: 768px) {
    .bravarchitettura-signature {
        font-size: 11px !important;
        padding: 8px 0 !important;
    }
}

/* Controlli di spaziatura compatti */
.widget_bravarchitettura_simple_image .spacing-controls {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin-bottom: 8px;
}

.widget_bravarchitettura_simple_image .spacing-row {
    display: flex;
    align-items: center;
    gap: 4px;
    background: #fff;
    padding: 4px 6px;
    border: 1px solid #e1e1e1;
    border-radius: 3px;
}

.widget_bravarchitettura_simple_image .spacing-row label {
    font-size: 9px;
    font-weight: bold;
    color: #333;
    min-width: 45px;
    text-align: right;
}

.widget_bravarchitettura_simple_image .spacing-row input {
    width: 50px;
    padding: 2px 4px;
    border: 1px solid #ddd;
    border-radius: 2px;
    font-size: 10px;
    text-align: center;
    height: 20px;
}

.widget_bravarchitettura_simple_image .spacing-row span {
    font-size: 9px;
    color: #666;
    font-weight: bold;
}

/* Controlli di ritaglio compatti */
.widget_bravarchitettura_simple_image .crop-controls {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin-bottom: 8px;
}

.widget_bravarchitettura_simple_image .crop-row {
    display: flex;
    align-items: center;
    gap: 4px;
    background: #fff;
    padding: 4px 6px;
    border: 1px solid #e1e1e1;
    border-radius: 3px;
}

.widget_bravarchitettura_simple_image .crop-row label {
    font-size: 9px;
    font-weight: bold;
    color: #333;
    min-width: 45px;
    text-align: right;
}

.widget_bravarchitettura_simple_image .crop-row input {
    width: 50px;
    padding: 2px 4px;
    border: 1px solid #ddd;
    border-radius: 2px;
    font-size: 10px;
    text-align: center;
    height: 20px;
}

.widget_bravarchitettura_simple_image .crop-row span {
    font-size: 9px;
    color: #666;
    font-weight: bold;
}

/* Preset di ritaglio */
.widget_bravarchitettura_simple_image .crop-presets {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.widget_bravarchitettura_simple_image .crop-preset {
    font-size: 9px !important;
    padding: 4px 8px !important;
    height: auto !important;
    line-height: 1.2 !important;
    background: #f0f0f0 !important;
    border: 1px solid #ddd !important;
    color: #333 !important;
}

.widget_bravarchitettura_simple_image .crop-preset:hover {
    background: #e0e0e0 !important;
}

/* Controlli zoom compatti */
.widget_bravarchitettura_simple_image input[type="range"] {
    width: 100%;
    margin: 5px 0;
    height: 6px;
}

.widget_bravarchitettura_simple_image .zoom-value {
    display: inline-block;
    margin-left: 8px;
    font-weight: bold;
    color: #0073aa;
    font-size: 10px;
    background: #e7f3ff;
    padding: 2px 6px;
    border-radius: 3px;
    border: 1px solid #0073aa;
}

.widget_bravarchitettura_simple_image .zoom-labels {
    display: flex;
    justify-content: space-between;
    font-size: 8px;
    color: #666;
    margin-top: 2px;
}

/* Preview immagine compatta */
.widget_bravarchitettura_simple_image .bravarchitettura-simple-image-preview {
    max-width: 100%;
    height: auto;
    margin-bottom: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    max-height: 120px;
    object-fit: cover;
}

/* Pulsante upload compatto */
.widget_bravarchitettura_simple_image .bravarchitettura-simple-image-upload {
    font-size: 10px !important;
    padding: 6px 12px !important;
    height: auto !important;
    line-height: 1.2 !important;
}

/* Responsive per l'admin */
@media (max-width: 782px) {
    .widget_bravarchitettura_simple_image .control-row {
        flex-direction: column;
        gap: 6px;
    }
    
    .widget_bravarchitettura_simple_image .spacing-controls,
    .widget_bravarchitettura_simple_image .crop-controls {
        grid-template-columns: 1fr;
    }
    
    .widget_bravarchitettura_simple_image .crop-presets {
        justify-content: center;
    }
}

/* Miglioramenti per l'allineamento delle colonne */
.homepage-col {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.homepage-col .widget {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.homepage-col .bravarchitettura-simple-image-container {
    flex: 1;
    display: flex;
    align-items: stretch;
}

.homepage-col .bravarchitettura-simple-image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Responsive per il widget immagine */
@media (max-width: 900px) {
    .bravarchitettura-simple-image-container {
        min-height: 200px;
    }
    
    .homepage-col .bravarchitettura-simple-image-container img {
        object-fit: cover;
        height: auto;
        max-height: 300px;
    }
}

/* Animazioni per zoom e trasformazioni */
.bravarchitettura-simple-image-container img {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Supporto per clip-path per il ritaglio */
.bravarchitettura-simple-image-container img[style*="clip-path"] {
    clip-path: inherit;
}

/* Miglioramenti per l'accessibilità */
.bravarchitettura-simple-image-container img {
    max-width: 100%;
    height: auto;
}

/* Stili per preview nell'admin */
.bravarchitettura-simple-image-preview {
    border: 1px solid #ddd;
    border-radius: 4px;
    max-width: 100%;
    height: auto;
    margin-bottom: 10px;
}

/* Controlli avanzati nel form del widget */
.widget_bravarchitettura_simple_image .advanced-controls {
    background: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 15px;
    margin: 10px 0;
}

.widget_bravarchitettura_simple_image .control-group {
    margin-bottom: 15px;
}

.widget_bravarchitettura_simple_image .control-group label {
    display: block;
    font-weight: bold;
    margin-bottom: 5px;
}

.widget_bravarchitettura_simple_image .control-group input,
.widget_bravarchitettura_simple_image .control-group select {
    width: 100%;
    padding: 5px;
    border: 1px solid #ddd;
    border-radius: 3px;
}

/* Stili per i controlli di ritaglio */
.widget_bravarchitettura_simple_image .crop-controls {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 10px;
}

.widget_bravarchitettura_simple_image .crop-controls input {
    width: 100%;
    text-align: center;
}

/* Indicatori visivi per i controlli */
.widget_bravarchitettura_simple_image .control-indicator {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #0073aa;
    margin-right: 5px;
}

.widget_bravarchitettura_simple_image .control-indicator.inactive {
    background: #ccc;
}

/* Stili per il widget di allineamento colonne */
.bravarchitettura-column-alignment {
    width: 100%;
    height: 100%;
}

.bravarchitettura-column-alignment .alignment-content {
    width: 100%;
    height: 100%;
}

/* Forza allineamento delle colonne quando il widget è presente */
.homepage-row:has(.bravarchitettura-column-alignment) {
    align-items: stretch;
}

.homepage-row:has(.bravarchitettura-column-alignment) .homepage-col {
    display: flex;
    flex-direction: column;
}

/* Stili per il widget nell'admin */
.widget_bravarchitettura_column_alignment .advanced-controls {
    background: #f0f8ff;
    border: 1px solid #0073aa;
    border-radius: 4px;
    padding: 15px;
    margin: 10px 0;
}

.widget_bravarchitettura_column_alignment h4 {
    margin: 0 0 15px 0;
    color: #0073aa;
    font-size: 14px;
}

.widget_bravarchitettura_column_alignment label {
    font-weight: bold;
    display: block;
    margin-bottom: 5px;
}

.widget_bravarchitettura_column_alignment input[type="checkbox"] {
    margin-right: 8px;
}

.widget_bravarchitettura_column_alignment small {
    color: #666;
    font-style: italic;
    display: block;
    margin-top: 5px;
}

/* Miglioramenti per l'allineamento automatico delle colonne */
.homepage-row {
    display: flex;
    align-items: stretch;
    gap: 24px;
    margin-bottom: 32px;
}

.homepage-col {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

/* Assicura che le immagini si adattino correttamente */
.homepage-col .bravarchitettura-simple-image-container {
    flex: 1;
    display: flex;
    align-items: stretch;
}

.homepage-col .bravarchitettura-simple-image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Responsive per l'allineamento */
@media (max-width: 900px) {
    .homepage-row {
        flex-direction: column;
        align-items: stretch;
    }
    
    .homepage-col {
        width: 100%;
    }
    
    .bravarchitettura-column-alignment {
        min-height: auto;
    }
}

/* Stili per il drag & drop della modal */
.bravarchitettura-modal.dragging {
    cursor: grabbing !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
}

.bravarchitettura-modal-header {
    cursor: grab !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
}

.bravarchitettura-modal-header:active {
    cursor: grabbing !important;
}

body.no-select {
    user-select: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
}

/* Previeni conflitti con altri stili */
.bravarchitettura-modal-overlay {
    pointer-events: auto !important;
}

.bravarchitettura-modal {
    pointer-events: auto !important;
}

/* Permetti ai controlli di funzionare */
.bravarchitettura-modal-content {
    pointer-events: auto !important;
}

.bravarchitettura-modal-content * {
    pointer-events: auto !important;
}

.bravarchitettura-modal-footer {
    pointer-events: auto !important;
}

.bravarchitettura-modal-footer * {
    pointer-events: auto !important;
}

/* Solo l'header per il drag, ma il pulsante close deve funzionare */
.bravarchitettura-modal-header {
    pointer-events: auto !important;
}

.bravarchitettura-modal-close {
    pointer-events: auto !important;
    cursor: pointer !important;
}

/* Aree HOME full-width */
.home-area {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 40px 20px;
    box-sizing: border-box;
}

.home1-area {
    background-color: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
}

.home2-area {
    background-color: #ffffff;
    border-bottom: 1px solid #e9ecef;
}

.home3-area {
    background-color: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
}

.home4-area {
    background-color: #ffffff;
    border-bottom: 1px solid #e9ecef;
}

.home5-area {
    background-color: #f8f9fa;
}

/* Responsive per le aree HOME */
@media (max-width: 768px) {
    .home-area {
        padding: 30px 15px;
    }
}

@media (max-width: 480px) {
    .home-area {
        padding: 20px 10px;
    }
}

/* Widget Immagine BravArchitettura - Soluzione universale */
.bravarchitettura-image-container {
    width: 100% !important;
    max-width: 100% !important;
    height: 300px !important;
    overflow: hidden !important;
    position: relative !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    float: none !important;
    clear: both !important;
}

.bravarchitettura-image-container img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    clear: both !important;
}

/* Soluzione universale per qualsiasi layout di colonne */
.widget.bravarchitettura_simple_image {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    float: none !important;
    clear: both !important;
    display: block !important;
}

/* Assicura che il widget si adatti a qualsiasi container */
.widget-area .widget.bravarchitettura_simple_image,
.home-area .widget.bravarchitettura_simple_image,
.widget-area .bravarchitettura-image-container,
.home-area .bravarchitettura-image-container {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    float: none !important;
    clear: both !important;
}

/* Effetto scala di grigi con hover a colori - ora con ritardo personalizzabile dal backend */
.grayscale-effect {
    transition: all 0.3s ease-in-out;
}

.grayscale-effect img {
    filter: grayscale(100%);
    transition: filter 0.3s ease-in-out var(--color-delay, 1.5s); /* Ritardo personalizzabile dal backend */
}

.grayscale-effect:hover img {
    filter: grayscale(0%);
    transition: filter 0.3s ease-in-out var(--color-delay, 1.5s); /* Mantiene il ritardo personalizzabile */
}

/* Ritardo ridotto per immagini con solo grayscale (senza effetti) */
.grayscale-effect:not(.hover-effect-spiral):not(.hover-effect-wave):not(.hover-effect-stars):not(.hover-effect-fire):not(.hover-effect-vortex):not(.hover-effect-lightning):not(.hover-effect-rainbow) img {
    transition: filter 0.3s ease-in-out 0.5s; /* Ritardo ridotto a 0.5s quando non ci sono effetti */
}

.grayscale-effect:not(.hover-effect-spiral):not(.hover-effect-wave):not(.hover-effect-stars):not(.hover-effect-fire):not(.hover-effect-vortex):not(.hover-effect-lightning):not(.hover-effect-rainbow):hover img {
    filter: grayscale(0%);
    transition: filter 0.3s ease-in-out 0.5s; /* Mantiene il ritardo ridotto anche al hover */
}

/* Effetto hover più fluido */
.grayscale-effect:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Effetto soffio di vento a spirale */
.spiral-color-effect {
    position: relative;
    overflow: hidden;
}

.spiral-color-effect::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: radial-gradient(circle, 
        rgba(255, 255, 255, 0.9) 0%, 
        rgba(255, 255, 255, 0.7) 30%, 
        rgba(255, 255, 255, 0.5) 60%, 
        transparent 100%);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    pointer-events: none;
    opacity: 0;
    transition: all 0.6s ease-out;
}

.spiral-color-effect:hover::before {
    width: 300px;
    height: 300px;
    opacity: 1;
    animation: spiralWind 0.8s ease-out forwards;
}

@keyframes spiralWind {
    0% {
        width: 0;
        height: 0;
        opacity: 0;
        transform: translate(-50%, -50%) rotate(0deg);
    }
    20% {
        width: 50px;
        height: 50px;
        opacity: 0.9;
        transform: translate(-50%, -50%) rotate(72deg);
    }
    40% {
        width: 100px;
        height: 100px;
        opacity: 0.8;
        transform: translate(-50%, -50%) rotate(144deg);
    }
    60% {
        width: 200px;
        height: 200px;
        opacity: 0.6;
        transform: translate(-50%, -50%) rotate(216deg);
    }
    80% {
        width: 250px;
        height: 250px;
        opacity: 0.4;
        transform: translate(-50%, -50%) rotate(288deg);
    }
    100% {
        width: 300px;
        height: 300px;
        opacity: 0;
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

/* Assicura che l'immagine sia sopra l'effetto spirale */
.spiral-color-effect img {
    position: relative;
    z-index: 1;
}

/* ===== EFFETTI HOVER PER COLLAGE ===== */

/* Base per tutti gli effetti */
.collage-image {
    position: relative;
    overflow: hidden;
}

.collage-image img {
    position: relative;
    z-index: 1;
}

/* 1. EFFETTO SPIRALE (Soffio di Vento) */
.hover-effect-spiral::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: radial-gradient(circle, 
        rgba(255, 255, 255, 0.9) 0%, 
        rgba(255, 255, 255, 0.7) 30%, 
        rgba(255, 255, 255, 0.5) 60%, 
        transparent 100%);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    pointer-events: none;
    opacity: 0;
    transition: all 0.6s ease-out;
}

.hover-effect-spiral:hover::before {
    width: 300px;
    height: 300px;
    opacity: 1;
    animation: spiralWind 0.8s ease-out forwards;
}

@keyframes spiralWind {
    0% {
        width: 0;
        height: 0;
        opacity: 0;
        transform: translate(-50%, -50%) rotate(0deg);
    }
    20% {
        width: 50px;
        height: 50px;
        opacity: 0.9;
        transform: translate(-50%, -50%) rotate(72deg);
    }
    40% {
        width: 100px;
        height: 100px;
        opacity: 0.8;
        transform: translate(-50%, -50%) rotate(144deg);
    }
    60% {
        width: 200px;
        height: 200px;
        opacity: 0.6;
        transform: translate(-50%, -50%) rotate(216deg);
    }
    80% {
        width: 250px;
        height: 250px;
        opacity: 0.4;
        transform: translate(-50%, -50%) rotate(288deg);
    }
    100% {
        width: 300px;
        height: 300px;
        opacity: 0;
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

/* 2. EFFETTO ONDA D'ACQUA */
.hover-effect-wave::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(0, 115, 170, 0.15) 15%, 
        rgba(0, 115, 170, 0.4) 35%, 
        rgba(0, 115, 170, 0.6) 50%, 
        rgba(0, 115, 170, 0.4) 65%, 
        rgba(0, 115, 170, 0.15) 85%, 
        transparent 100%);
    transform: skewX(-12deg) scaleY(0.8);
    transition: left 1.5s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    z-index: 2;
}

.hover-effect-wave:hover::before {
    left: 100%;
}

/* 3. EFFETTO POLVERE DI STELLE */
.hover-effect-stars::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: radial-gradient(circle, 
        rgba(255, 255, 255, 0.8) 0%, 
        rgba(255, 255, 255, 0.6) 20%, 
        rgba(255, 255, 255, 0.4) 40%, 
        transparent 100%);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    pointer-events: none;
    opacity: 0;
    transition: all 0.6s ease-out;
}

.hover-effect-stars:hover::before {
    width: 400px;
    height: 400px;
    opacity: 1;
    animation: starsDust 2s ease-out forwards;
}

@keyframes starsDust {
    0% {
        width: 0;
        height: 0;
        opacity: 0;
        transform: translate(-50%, -50%) scale(0);
    }
    50% {
        width: 200px;
        height: 200px;
        opacity: 0.8;
        transform: translate(-50%, -50%) scale(1);
    }
    100% {
        width: 400px;
        height: 400px;
        opacity: 0;
        transform: translate(-50%, -50%) scale(1.5);
    }
}

/* 4. EFFETTO FUOCO */
.hover-effect-fire::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0;
    background: linear-gradient(to top, 
        rgba(255, 69, 0, 0.8) 0%, 
        rgba(255, 140, 0, 0.6) 30%, 
        rgba(255, 215, 0, 0.4) 60%, 
        transparent 100%);
    transition: height 1.8s ease-out;
    pointer-events: none;
    z-index: 2;
}

.hover-effect-fire:hover::before {
    height: 100%;
    animation: fireRise 1.8s ease-out forwards;
}

@keyframes fireRise {
    0% {
        height: 0;
        opacity: 0;
    }
    50% {
        height: 50%;
        opacity: 0.8;
    }
    100% {
        height: 100%;
        opacity: 0;
    }
}

/* 5. EFFETTO VORTICE */
.hover-effect-vortex::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: conic-gradient(from 0deg, 
        transparent 0%, 
        rgba(255, 255, 255, 0.6) 25%, 
        rgba(255, 255, 255, 0.8) 50%, 
        rgba(255, 255, 255, 0.6) 75%, 
        transparent 100%);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    pointer-events: none;
    opacity: 0;
    transition: all 0.6s ease-out;
}

.hover-effect-vortex:hover::before {
    width: 300px;
    height: 300px;
    opacity: 1;
    animation: vortexSpin 1.2s ease-out forwards;
}

@keyframes vortexSpin {
    0% {
        width: 0;
        height: 0;
        opacity: 0;
        transform: translate(-50%, -50%) rotate(0deg);
    }
    100% {
        width: 300px;
        height: 300px;
        opacity: 0;
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

/* 6. EFFETTO FULMINE */
.hover-effect-lightning::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(255, 255, 0, 0.9) 45%, 
        rgba(255, 255, 255, 1) 50%, 
        rgba(255, 255, 0, 0.9) 55%, 
        transparent 100%);
    transition: left 0.8s ease-out;
    pointer-events: none;
    z-index: 2;
}

.hover-effect-lightning:hover::before {
    left: 100%;
    animation: lightningFlash 0.8s ease-out forwards;
}

@keyframes lightningFlash {
    0% {
        left: -100%;
        opacity: 0;
    }
    50% {
        left: 0%;
        opacity: 1;
    }
    100% {
        left: 100%;
        opacity: 0;
    }
}

/* 7. EFFETTO ARCOBALENO */
.hover-effect-rainbow::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: conic-gradient(from 0deg, 
        #ff0000 0%, 
        #ff8000 14%, 
        #ffff00 28%, 
        #00ff00 42%, 
        #0080ff 56%, 
        #8000ff 70%, 
        #ff0080 84%, 
        #ff0000 100%);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    pointer-events: none;
    opacity: 0;
    transition: all 0.6s ease-out;
}

.hover-effect-rainbow:hover::before {
    width: 350px;
    height: 350px;
    opacity: 1;
    animation: rainbowExpand 2.5s ease-out forwards;
}

@keyframes rainbowExpand {
    0% {
        width: 0;
        height: 0;
        opacity: 0;
        transform: translate(-50%, -50%) scale(0);
    }
    50% {
        width: 175px;
        height: 175px;
        opacity: 0.8;
        transform: translate(-50%, -50%) scale(1);
    }
    100% {
        width: 350px;
        height: 350px;
        opacity: 0;
        transform: translate(-50%, -50%) scale(1.2);
    }
}

/* Fix generale per tutti i widget immagine nei container di colonne */
.widget-area .widget img,
.home-area .widget img {
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

/* Fix per container di widget immagine */
.widget-area .widget,
.home-area .widget {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

/* Fix specifico per widget di colonne */
.widget-area .widget .widget-content,
.home-area .widget .widget-content {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

/* Fix per immagini in generale */
img {
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    box-sizing: border-box !important;
}

/* Fix per widget di colonne specifici */
.widget-area .columns-widget .widget,
.widget-area .two-columns .widget,
.widget-area .column .widget,
.home-area .columns-widget .widget,
.home-area .two-columns .widget,
.home-area .column .widget {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

/* Fix per contenuti di widget di colonne */
.widget-area .columns-widget .widget img,
.widget-area .two-columns .widget img,
.widget-area .column .widget img,
.home-area .columns-widget .widget img,
.home-area .two-columns .widget img,
.home-area .column .widget img {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

/* Fix per qualsiasi container con colonne */
[class*="column"] .widget img,
[class*="col-"] .widget img {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    display: block !important;
}

/* ===== STILI PER PAGINE ===== */

.page-content {
    background: #fff;
    padding: 30px;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin-bottom: 30px;
}

/* Immagine in evidenza per le pagine */
.page-content .entry-thumbnail {
    margin-bottom: 30px;
    text-align: center;
    overflow: hidden;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.page-content .entry-thumbnail img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.3s ease;
}

.page-content .entry-thumbnail img:hover {
    transform: scale(1.02);
}

.entry-header {
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: none !important;
}

.entry-title {
    font-size: 2.2em;
    color: #333;
    margin: 0 0 15px 0;
    font-weight: 300;
}

.entry-content {
    line-height: 1.6;
    color: #555;
}

.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
    color: #333;
    margin-top: 25px;
    margin-bottom: 15px;
}

.entry-content p {
    margin-bottom: 15px;
}

.entry-content ul,
.entry-content ol {
    margin-bottom: 15px;
    padding-left: 20px;
}

.entry-content li {
    margin-bottom: 5px;
}

.entry-content img {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
    margin: 15px 0;
}

.entry-content blockquote {
    border-left: 4px solid #0073aa;
    padding-left: 20px;
    margin: 20px 0;
    font-style: italic;
    color: #666;
}

.entry-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
}

.entry-content th,
.entry-content td {
    padding: 10px;
    border: 1px solid #ddd;
    text-align: left;
}

.entry-content th {
    background: #f5f5f5;
    font-weight: bold;
}

/* Stili specifici per WPForms */
.wpforms-container {
    margin: 20px 0;
}

.wpforms-form {
    background: #f9f9f9;
    padding: 25px;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
}

.wpforms-field {
    margin-bottom: 20px;
}

.wpforms-field-label {
    font-weight: 600;
    color: #333;
    margin-bottom: 8px;
    display: block;
}

.wpforms-required-label {
    color: #e74c3c;
}

.wpforms-field input[type="text"],
.wpforms-field input[type="email"],
.wpforms-field input[type="tel"],
.wpforms-field input[type="url"],
.wpforms-field textarea,
.wpforms-field select {
    width: 100%;
    padding: 12px;
    border: 2px solid #ddd;
    border-radius: 6px;
    font-size: 16px;
    transition: border-color 0.3s ease;
}

.wpforms-field input[type="text"]:focus,
.wpforms-field input[type="email"]:focus,
.wpforms-field input[type="tel"]:focus,
.wpforms-field input[type="url"]:focus,
.wpforms-field textarea:focus,
.wpforms-field select:focus {
    border-color: #0073aa;
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 115, 170, 0.1);
}

.wpforms-submit-container {
    margin-top: 25px;
}

.wpforms-submit {
    background: #0073aa;
    color: white;
    padding: 12px 30px;
    border: none;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.wpforms-submit:hover {
    background: #005a87;
}

/* Fix per lo spinner di WPForms */
.wpforms-submit-spinner {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
}

/* Nascondi spinner quando il form è in stato di invio */
.wpforms-form.wpforms-loading .wpforms-submit-spinner {
    display: none !important;
}

/* Nascondi spinner quando il form è stato inviato */
.wpforms-form.wpforms-submit-success .wpforms-submit-spinner {
    display: none !important;
}

/* Responsive per pagine */
@media (max-width: 768px) {
    .page-content {
        padding: 20px;
    }
    
    .entry-title {
        font-size: 1.8em;
    }
    
    .page-content .entry-thumbnail {
        margin-bottom: 20px;
    }
    
    .wpforms-form {
        padding: 20px;
    }
}

@media (max-width: 480px) {
    .page-content .entry-thumbnail {
        margin-bottom: 15px;
    }
    
    .page-content .entry-thumbnail img {
        border-radius: 6px;
    }
}

/* Layout Boxed - Contenimento generale */
.container,
.site-content,
.home-area,
.widget-area {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
}

/* Contenimento di tutti i widget */
.widget {
    max-width: 100% !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

/* Contenimento di tutte le immagini */
.widget img {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    display: block !important;
    box-sizing: border-box !important;
}

/* Fix specifico per widget di colonne */
.widget-area .columns-widget,
.widget-area .two-columns,
.widget-area .column,
.home-area .columns-widget,
.home-area .two-columns,
.home-area .column {
    max-width: 100% !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

/* Fix ULTRA SPECIFICO per widget immagine standard di WordPress */
.widget_media_image,
.widget_media_gallery,
.widget_media_audio,
.widget_media_video {
    max-width: 100% !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    width: 100% !important;
}

.widget_media_image img,
.widget_media_gallery img,
.widget_media_audio img,
.widget_media_video img {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    display: block !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Fix per contenitori di widget */
.widget-content,
.widget-inside {
    max-width: 100% !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    width: 100% !important;
}

/* Fix per body e html */
body, html {
    overflow-x: hidden !important;
    max-width: 100% !important;
}

/* Fix FINALE UNIVERSALE per layout boxed */
.layout-boxed * {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.layout-boxed .home-area,
.layout-boxed .widget-area,
.layout-boxed .site-content,
.layout-boxed .site-main {
    max-width: 100% !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

.layout-boxed .widget,
.layout-boxed .widget * {
    max-width: 100% !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

.layout-boxed img {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    display: block !important;
    box-sizing: border-box !important;
}

/* Responsive per layout boxed */
@media (max-width: 768px) {
    .container,
    .site-content,
    .home-area,
    .widget-area {
        padding-left: 15px;
        padding-right: 15px;
    }
}

@media (max-width: 480px) {
    .container,
    .site-content,
    .home-area,
    .widget-area {
        padding-left: 10px;
        padding-right: 10px;
    }
}



/* Controllo logo personalizzato e standard */
.site-logo-img,
.custom-logo-link img {
    max-width: 300px !important;
    height: auto !important;
    display: block !important;
    overflow: hidden !important;
}



.site-logo-link,
.custom-logo-link {
    max-width: 300px !important;
    display: block !important;
    overflow: hidden !important;
}

/* Controllo titolo e descrizione del sito */
.site-title,
.site-description {
    max-width: 300px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/* Stile uniforme per il titolo del sito */
.site-title {
    font-weight: 300;
    color: #333;
    font-size: 1.8em;
    margin: 0;
}

/* Allineamento logo a sinistra per default */
.site-header-flex {
    justify-content: flex-start !important;
}

.site-header .header-left {
    margin-left: 0 !important;
    justify-content: flex-start !important;
}



.site-title a {
    max-width: 100% !important;
    display: block !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/* Responsive per logo e titolo */
@media (max-width: 768px) {
    .site-logo-img,
    .custom-logo-link img,
    .site-logo-link,
    .custom-logo-link,
    .site-title,
    .site-description {
        max-width: 200px !important;
    }
}

@media (max-width: 480px) {
    .site-logo-img,
    .custom-logo-link img,
    .site-logo-link,
    .custom-logo-link,
    .site-title,
    .site-description {
        max-width: 150px !important;
    }
}

/* Layout Boxed - CSS FORZATO */
.layout-boxed {
    overflow-x: hidden !important;
}



.layout-boxed .container,
.layout-boxed .site-content,
.layout-boxed .home-area,
.layout-boxed .widget-area,
.layout-boxed .site-main,
.layout-boxed .site-header,
.layout-boxed .site-footer {
    max-width: 1200px !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
}

/* Allineamento logo a sinistra nel layout boxed */
.layout-boxed .site-header-flex {
    justify-content: flex-start !important;
}

.layout-boxed .header-left {
    margin-left: 0 !important;
    justify-content: flex-start !important;
}

/* Logo - CSS FORZATO */
.site-logo-img,
.custom-logo-link img {
    max-width: 300px !important;
    width: 300px !important;
    height: auto !important;
    display: block !important;
    overflow: hidden !important;
}

.site-logo-link,
.custom-logo-link {
    max-width: 300px !important;
    width: 300px !important;
    display: block !important;
    overflow: hidden !important;
}

/* Allinea logo a sinistra nella versione full-width */
.container-full-width .site-logo-link,
.container-full-width .custom-logo-link {
    margin-left: 0 !important;
}

/* FIXES PER VERSIONE FULL-WIDTH */
/* Centra il menu nella versione full-width */
.container-full-width .site-header .container {
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
}

/* Assicura che l'header sia allineato a sinistra nel layout full-width */
.container-full-width .site-header {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    width: 100% !important;
}

/* Riduci ulteriormente lo spazio sopra nella versione full-width */
.container-full-width .site-header {
    padding: 5px 0 !important;
    min-height: 50px !important;
}

.container-full-width .site-header-flex {
    padding: 2px 0 !important;
    min-height: 30px !important;
    justify-content: flex-start !important;
}

/* Widget Collage Fotografico */
.collage-container {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    box-sizing: border-box;
}

/* Layout 2x2 */
.collage-2x2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: inherit;
    height: 100%;
}

/* Layout 3x1 */
.collage-3x1 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr;
    gap: inherit;
    height: 100%;
}

/* Layout 1x3 */
.collage-1x3 {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    gap: inherit;
    height: 100%;
}

/* Layout 4x1 */
.collage-4x1 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr;
    gap: inherit;
    height: 100%;
}

/* Layout sfalzati */
.collage-left-tall {
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: inherit;
    height: 100%;
}

.collage-left-tall .collage-image:first-child {
    grid-row: 1 / 3;
}

.collage-right-tall {
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-template-rows: 1fr 1fr;
    gap: inherit;
    height: 100%;
}

.collage-right-tall .collage-image:last-child {
    grid-row: 1 / 3;
}

.collage-top-wide {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 2fr 1fr;
    gap: inherit;
    height: 100%;
}

.collage-top-wide .collage-image:first-child {
    grid-column: 1 / 3;
}

.collage-bottom-wide {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 2fr;
    gap: inherit;
    height: 100%;
}

.collage-bottom-wide .collage-image:last-child {
    grid-column: 1 / 3;
}

/* Immagini del collage - COMPLETAMENTE INVISIBILI */
.collage-image {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    /* RIMUOVI TUTTI GLI STILI VISIBILI */
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: none !important;
    margin: 0 !important;
    padding: 0 !important;
    outline: none !important;
}

.collage-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.3s ease;
}

/* Controlli avanzati per griglia */
.collage-container {
    position: relative;
    overflow: hidden;
}

/* Layout con controlli SIZE e PAN */
.collage-2x2,
.collage-3x1,
.collage-1x3,
.collage-4x1,
.collage-left-tall,
.collage-right-tall,
.collage-top-wide,
.collage-bottom-wide {
    display: grid;
    gap: inherit;
    height: 100%;
    position: relative;
}

/* Responsive per collage - layout a colonna su mobile */
@media (max-width: 768px) {
    .collage-container,
    .modular-collage-container {
        /* Il gap è gestito dal widget inline - NON forzare valori hardcoded */
        margin: 0 !important;
        padding: 0 !important;
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
    }
    
    /* Modular collage grid su mobile - EFFETTO CONTINUO */
    .modular-collage-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        grid-template-rows: repeat(auto-fit, minmax(200px, auto)) !important; /* Altezza dinamica invece di 1fr */
        /* Il gap è gestito dal widget inline - NON forzare valori hardcoded */
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
    }
    
    
    /* Forza rimozione altezze fisse inline */
    .modular-collage-container[style*="height: 700px"] {
        height: auto !important;
    }
    
    .modular-collage-grid[style*="height: 600px"] {
        height: auto !important;
    }
    
    .modular-collage-grid[style*="grid-template-rows: 1fr 1fr 1fr"] {
        grid-template-rows: repeat(auto-fit, minmax(200px, auto)) !important;
    }
    
    /* Rimuovi min-height dai moduli che potrebbero creare spaziature */
    .modular-module {
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        box-shadow: none !important;
        min-height: auto !important;
    }
    
    .modular-module-image {
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        box-shadow: none !important;
    }
    
    .modular-module img {
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        box-shadow: none !important;
    }
    
    /* Tutti i layout diventano a colonna singola su mobile */
    .collage-2x2,
    .collage-3x1,
    .collage-4x1,
    .collage-1x3,
    .collage-left-tall,
    .collage-right-tall,
    .collage-top-wide,
    .collage-bottom-wide {
        display: grid !important;
        grid-template-columns: 1fr !important;
        grid-template-rows: repeat(auto-fit, 1fr) !important;
        /* Il gap è gestito dal widget inline - NON forzare valori hardcoded */
        margin: 0 !important;
        padding: 0 !important;
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
    }
    
    /* Assicura che ogni immagine abbia un'altezza minima e sia visibile */
    .collage-image,
    .modular-module {
        min-height: 250px !important;
        height: auto !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Modular module su mobile */
    .modular-module {
        grid-column: 1 !important;
        grid-row: auto !important;
        border: none !important;
        border-width: 0 !important;
        border-style: none !important;
        border-color: transparent !important;
        box-shadow: none !important;
        background: none !important;
        background-color: transparent !important;
        outline: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Forza rimozione bordi inline su mobile */
    .modular-module[style*="border"],
    .modular-module-image[style*="border"] {
        border: none !important;
        border-width: 0 !important;
        border-style: none !important;
        border-color: transparent !important;
        box-shadow: none !important;
        outline: none !important;
    }
    
    /* Forza la visualizzazione di tutte le immagini del collage */
    .collage-container > * {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Su mobile, tutti i layout speciali diventano colonna singola */
    .collage-left-tall,
    .collage-right-tall,
    .collage-top-wide,
    .collage-bottom-wide {
        grid-template-columns: 1fr !important;
        grid-template-rows: repeat(auto-fit, 1fr) !important;
    }
    
    /* Reset per tutti i layout speciali su mobile */
    .collage-left-tall .collage-image:first-child,
    .collage-right-tall .collage-image:last-child,
    .collage-top-wide .collage-image:first-child,
    .collage-bottom-wide .collage-image:last-child {
        grid-row: auto !important;
        grid-column: auto !important;
    }
    
    .collage-image {
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 0 !important;
        overflow: hidden !important;
        border: none !important;
        box-shadow: none !important;
        background: none !important;
        outline: none !important;
    }
    
    /* Disabilita le correzioni di pan e centra immagini su mobile */
    .collage-image {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .collage-image img {
        transform: none !important;
        object-position: center !important;
        object-fit: cover !important;
        width: 100% !important;
        height: 100% !important;
    }
}

@media (max-width: 480px) {
    .collage-container,
    .modular-collage-container {
        /* Il gap è gestito dal widget inline - NON forzare valori hardcoded */
        margin: 0 !important;
        padding: 0 !important;
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
    }
    
    /* ===== REGOLE ULTRA-AGGRESSIVE PER GAP MOBILE SOTTO 480PX ===== */
    /* Forza il gap inline del widget con massima priorità */
    .modular-collage-grid[style*="gap: 0"] {
        gap: 0 !important;
    }
    .modular-collage-grid[style*="gap: 1px"] {
        gap: 1px !important;
    }
    .modular-collage-grid[style*="gap: 2px"] {
        gap: 2px !important;
    }
    .modular-collage-grid[style*="gap: 3px"] {
        gap: 3px !important;
    }
    .modular-collage-grid[style*="gap: 4px"] {
        gap: 4px !important;
    }
    .modular-collage-grid[style*="gap: 5px"] {
        gap: 5px !important;
    }
    .modular-collage-grid[style*="gap: 6px"] {
        gap: 6px !important;
    }
    .modular-collage-grid[style*="gap: 7px"] {
        gap: 7px !important;
    }
    .modular-collage-grid[style*="gap: 8px"] {
        gap: 8px !important;
    }
    .modular-collage-grid[style*="gap: 9px"] {
        gap: 9px !important;
    }
    .modular-collage-grid[style*="gap: 10px"] {
        gap: 10px !important;
    }
    .modular-collage-grid[style*="gap: 11px"] {
        gap: 11px !important;
    }
    .modular-collage-grid[style*="gap: 12px"] {
        gap: 12px !important;
    }
    .modular-collage-grid[style*="gap: 13px"] {
        gap: 13px !important;
    }
    .modular-collage-grid[style*="gap: 14px"] {
        gap: 14px !important;
    }
    .modular-collage-grid[style*="gap: 15px"] {
        gap: 15px !important;
    }
    .modular-collage-grid[style*="gap: 16px"] {
        gap: 16px !important;
    }
    .modular-collage-grid[style*="gap: 17px"] {
        gap: 17px !important;
    }
    .modular-collage-grid[style*="gap: 18px"] {
        gap: 18px !important;
    }
    .modular-collage-grid[style*="gap: 19px"] {
        gap: 19px !important;
    }
    .modular-collage-grid[style*="gap: 20px"] {
        gap: 20px !important;
    }
    .modular-collage-grid[style*="gap: 21px"] {
        gap: 21px !important;
    }
    .modular-collage-grid[style*="gap: 22px"] {
        gap: 22px !important;
    }
    .modular-collage-grid[style*="gap: 23px"] {
        gap: 23px !important;
    }
    .modular-collage-grid[style*="gap: 24px"] {
        gap: 24px !important;
    }
    .modular-collage-grid[style*="gap: 25px"] {
        gap: 25px !important;
    }
    .modular-collage-grid[style*="gap: 26px"] {
        gap: 26px !important;
    }
    .modular-collage-grid[style*="gap: 27px"] {
        gap: 27px !important;
    }
    .modular-collage-grid[style*="gap: 28px"] {
        gap: 28px !important;
    }
    .modular-collage-grid[style*="gap: 29px"] {
        gap: 29px !important;
    }
    .modular-collage-grid[style*="gap: 30px"] {
        gap: 30px !important;
    }
    
    /* Forza il gap anche con selettori più specifici */
    body .modular-collage-grid[style*="gap: 0"] {
        gap: 0 !important;
    }
    body .modular-collage-grid[style*="gap: 1px"] {
        gap: 1px !important;
    }
    body .modular-collage-grid[style*="gap: 2px"] {
        gap: 2px !important;
    }
    body .modular-collage-grid[style*="gap: 3px"] {
        gap: 3px !important;
    }
    body .modular-collage-grid[style*="gap: 4px"] {
        gap: 4px !important;
    }
    body .modular-collage-grid[style*="gap: 5px"] {
        gap: 5px !important;
    }
    body .modular-collage-grid[style*="gap: 10px"] {
        gap: 10px !important;
    }
    body .modular-collage-grid[style*="gap: 15px"] {
        gap: 15px !important;
    }
    body .modular-collage-grid[style*="gap: 20px"] {
        gap: 20px !important;
    }
    body .modular-collage-grid[style*="gap: 25px"] {
        gap: 25px !important;
    }
    body .modular-collage-grid[style*="gap: 30px"] {
        gap: 30px !important;
    }
    
    /* Regole per tutti i layout del widget collage */
    .modular-collage-grid,
    .collage-grid,
    .collage-2x2,
    .collage-3x1,
    .collage-4x1,
    .collage-1x3,
    .collage-left-tall,
    .collage-right-tall,
    .collage-top-wide,
    .collage-bottom-wide {
        /* Mantieni il gap inline del widget */
        gap: inherit !important;
    }
    
    /* Forza il gap per tutti i layout con selettori ultra-specifici */
    body .modular-collage-container .modular-collage-grid[style*="gap: 0"] {
        gap: 0 !important;
    }
    body .modular-collage-container .modular-collage-grid[style*="gap: 1px"] {
        gap: 1px !important;
    }
    body .modular-collage-container .modular-collage-grid[style*="gap: 2px"] {
        gap: 2px !important;
    }
    body .modular-collage-container .modular-collage-grid[style*="gap: 3px"] {
        gap: 3px !important;
    }
    body .modular-collage-container .modular-collage-grid[style*="gap: 4px"] {
        gap: 4px !important;
    }
    body .modular-collage-container .modular-collage-grid[style*="gap: 5px"] {
        gap: 5px !important;
    }
    body .modular-collage-container .modular-collage-grid[style*="gap: 10px"] {
        gap: 10px !important;
    }
    body .modular-collage-container .modular-collage-grid[style*="gap: 15px"] {
        gap: 15px !important;
    }
    body .modular-collage-container .modular-collage-grid[style*="gap: 20px"] {
        gap: 20px !important;
    }
    body .modular-collage-container .modular-collage-grid[style*="gap: 25px"] {
        gap: 25px !important;
    }
    body .modular-collage-container .modular-collage-grid[style*="gap: 30px"] {
        gap: 30px !important;
    }
    
    /* REGOLE ULTRA-AGGRESSIVE CON MASSIMA SPECIFICITÀ */
    html body .modular-collage-container .modular-collage-grid[style*="gap: 0"] {
        gap: 0 !important;
    }
    html body .modular-collage-container .modular-collage-grid[style*="gap: 1px"] {
        gap: 1px !important;
    }
    html body .modular-collage-container .modular-collage-grid[style*="gap: 2px"] {
        gap: 2px !important;
    }
    html body .modular-collage-container .modular-collage-grid[style*="gap: 3px"] {
        gap: 3px !important;
    }
    html body .modular-collage-container .modular-collage-grid[style*="gap: 4px"] {
        gap: 4px !important;
    }
    html body .modular-collage-container .modular-collage-grid[style*="gap: 5px"] {
        gap: 5px !important;
    }
    html body .modular-collage-container .modular-collage-grid[style*="gap: 10px"] {
        gap: 10px !important;
    }
    html body .modular-collage-container .modular-collage-grid[style*="gap: 15px"] {
        gap: 15px !important;
    }
    html body .modular-collage-container .modular-collage-grid[style*="gap: 20px"] {
        gap: 20px !important;
    }
    html body .modular-collage-container .modular-collage-grid[style*="gap: 25px"] {
        gap: 25px !important;
    }
    html body .modular-collage-container .modular-collage-grid[style*="gap: 30px"] {
        gap: 30px !important;
    }
    
    /* FORZA GAP ANCHE PER I CONTAINER PRINCIPALI */
    .collage-container[style*="gap: 0"],
    .modular-collage-container[style*="gap: 0"] {
        gap: 0 !important;
    }
    .collage-container[style*="gap: 1px"],
    .modular-collage-container[style*="gap: 1px"] {
        gap: 1px !important;
    }
    .collage-container[style*="gap: 2px"],
    .modular-collage-container[style*="gap: 2px"] {
        gap: 2px !important;
    }
    .collage-container[style*="gap: 3px"],
    .modular-collage-container[style*="gap: 3px"] {
        gap: 3px !important;
    }
    .collage-container[style*="gap: 4px"],
    .modular-collage-container[style*="gap: 4px"] {
        gap: 4px !important;
    }
    .collage-container[style*="gap: 5px"],
    .modular-collage-container[style*="gap: 5px"] {
        gap: 5px !important;
    }
    .collage-container[style*="gap: 6px"],
    .modular-collage-container[style*="gap: 6px"] {
        gap: 6px !important;
    }
    .collage-container[style*="gap: 7px"],
    .modular-collage-container[style*="gap: 7px"] {
        gap: 7px !important;
    }
    .collage-container[style*="gap: 8px"],
    .modular-collage-container[style*="gap: 8px"] {
        gap: 8px !important;
    }
    .collage-container[style*="gap: 9px"],
    .modular-collage-container[style*="gap: 9px"] {
        gap: 9px !important;
    }
    .collage-container[style*="gap: 10px"],
    .modular-collage-container[style*="gap: 10px"] {
        gap: 10px !important;
    }
    .collage-container[style*="gap: 11px"],
    .modular-collage-container[style*="gap: 11px"] {
        gap: 11px !important;
    }
    .collage-container[style*="gap: 12px"],
    .modular-collage-container[style*="gap: 12px"] {
        gap: 12px !important;
    }
    .collage-container[style*="gap: 13px"],
    .modular-collage-container[style*="gap: 13px"] {
        gap: 13px !important;
    }
    .collage-container[style*="gap: 14px"],
    .modular-collage-container[style*="gap: 14px"] {
        gap: 14px !important;
    }
    .collage-container[style*="gap: 15px"],
    .modular-collage-container[style*="gap: 15px"] {
        gap: 15px !important;
    }
    .collage-container[style*="gap: 16px"],
    .modular-collage-container[style*="gap: 16px"] {
        gap: 16px !important;
    }
    .collage-container[style*="gap: 17px"],
    .modular-collage-container[style*="gap: 17px"] {
        gap: 17px !important;
    }
    .collage-container[style*="gap: 18px"],
    .modular-collage-container[style*="gap: 18px"] {
        gap: 18px !important;
    }
    .collage-container[style*="gap: 19px"],
    .modular-collage-container[style*="gap: 19px"] {
        gap: 19px !important;
    }
    .collage-container[style*="gap: 20px"],
    .modular-collage-container[style*="gap: 20px"] {
        gap: 20px !important;
    }
    .collage-container[style*="gap: 21px"],
    .modular-collage-container[style*="gap: 21px"] {
        gap: 21px !important;
    }
    .collage-container[style*="gap: 22px"],
    .modular-collage-container[style*="gap: 22px"] {
        gap: 22px !important;
    }
    .collage-container[style*="gap: 23px"],
    .modular-collage-container[style*="gap: 23px"] {
        gap: 23px !important;
    }
    .collage-container[style*="gap: 24px"],
    .modular-collage-container[style*="gap: 24px"] {
        gap: 24px !important;
    }
    .collage-container[style*="gap: 25px"],
    .modular-collage-container[style*="gap: 25px"] {
        gap: 25px !important;
    }
    .collage-container[style*="gap: 26px"],
    .modular-collage-container[style*="gap: 26px"] {
        gap: 26px !important;
    }
    .collage-container[style*="gap: 27px"],
    .modular-collage-container[style*="gap: 27px"] {
        gap: 27px !important;
    }
    .collage-container[style*="gap: 28px"],
    .modular-collage-container[style*="gap: 28px"] {
        gap: 28px !important;
    }
    .collage-container[style*="gap: 29px"],
    .modular-collage-container[style*="gap: 29px"] {
        gap: 29px !important;
    }
    .collage-container[style*="gap: 30px"],
    .modular-collage-container[style*="gap: 30px"] {
        gap: 30px !important;
    }
    
    /* FORZA GAP INLINE ANCHE SU MOBILE PICCOLO - REGOLE ULTRA-AGGRESSIVE */
    .modular-collage-grid[style*="gap: 0"] {
        gap: 0 !important;
    }
    .modular-collage-grid[style*="gap: 1px"] {
        gap: 1px !important;
    }
    .modular-collage-grid[style*="gap: 2px"] {
        gap: 2px !important;
    }
    .modular-collage-grid[style*="gap: 5px"] {
        gap: 5px !important;
    }
    .modular-collage-grid[style*="gap: 10px"] {
        gap: 10px !important;
    }
    .modular-collage-grid[style*="gap: 15px"] {
        gap: 15px !important;
    }
    .modular-collage-grid[style*="gap: 20px"] {
        gap: 20px !important;
    }
    .modular-collage-grid[style*="gap: 25px"] {
        gap: 25px !important;
    }
    .modular-collage-grid[style*="gap: 30px"] {
        gap: 30px !important;
    }
    
    /* FORZA GAP ANCHE PER I CONTAINER */
    .modular-collage-container[style*="gap: 0"] .modular-collage-grid {
        gap: 0 !important;
    }
    .modular-collage-container[style*="gap: 1px"] .modular-collage-grid {
        gap: 1px !important;
    }
    .modular-collage-container[style*="gap: 2px"] .modular-collage-grid {
        gap: 2px !important;
    }
    .modular-collage-container[style*="gap: 5px"] .modular-collage-grid {
        gap: 5px !important;
    }
    .modular-collage-container[style*="gap: 10px"] .modular-collage-grid {
        gap: 10px !important;
    }
    .modular-collage-container[style*="gap: 15px"] .modular-collage-grid {
        gap: 15px !important;
    }
    .modular-collage-container[style*="gap: 20px"] .modular-collage-grid {
        gap: 20px !important;
    }
    .modular-collage-container[style*="gap: 25px"] .modular-collage-grid {
        gap: 25px !important;
    }
    .modular-collage-container[style*="gap: 30px"] .modular-collage-grid {
        gap: 30px !important;
    }
    
    
    /* Tutti i layout rimangono a colonna singola anche su mobile piccolo */
    .collage-2x2,
    .collage-3x1,
    .collage-4x1,
    .collage-1x3,
    .collage-left-tall,
    .collage-right-tall,
    .collage-top-wide,
    .collage-bottom-wide {
        display: grid !important;
        grid-template-columns: 1fr !important;
        grid-template-rows: repeat(auto-fit, 1fr) !important;
        /* Il gap è gestito dal widget inline - NON forzare valori hardcoded */
        margin: 0 !important;
        padding: 0 !important;
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
    }
    
    /* FORZA GAP ANCHE PER I LAYOUT SPECIFICI */
    .collage-2x2[style*="gap: 0"],
    .collage-3x1[style*="gap: 0"],
    .collage-4x1[style*="gap: 0"],
    .collage-1x3[style*="gap: 0"],
    .collage-left-tall[style*="gap: 0"],
    .collage-right-tall[style*="gap: 0"],
    .collage-top-wide[style*="gap: 0"],
    .collage-bottom-wide[style*="gap: 0"] {
        gap: 0 !important;
    }
    .collage-2x2[style*="gap: 1px"],
    .collage-3x1[style*="gap: 1px"],
    .collage-4x1[style*="gap: 1px"],
    .collage-1x3[style*="gap: 1px"],
    .collage-left-tall[style*="gap: 1px"],
    .collage-right-tall[style*="gap: 1px"],
    .collage-top-wide[style*="gap: 1px"],
    .collage-bottom-wide[style*="gap: 1px"] {
        gap: 1px !important;
    }
    .collage-2x2[style*="gap: 2px"],
    .collage-3x1[style*="gap: 2px"],
    .collage-4x1[style*="gap: 2px"],
    .collage-1x3[style*="gap: 2px"],
    .collage-left-tall[style*="gap: 2px"],
    .collage-right-tall[style*="gap: 2px"],
    .collage-top-wide[style*="gap: 2px"],
    .collage-bottom-wide[style*="gap: 2px"] {
        gap: 2px !important;
    }
    .collage-2x2[style*="gap: 5px"],
    .collage-3x1[style*="gap: 5px"],
    .collage-4x1[style*="gap: 5px"],
    .collage-1x3[style*="gap: 5px"],
    .collage-left-tall[style*="gap: 5px"],
    .collage-right-tall[style*="gap: 5px"],
    .collage-top-wide[style*="gap: 5px"],
    .collage-bottom-wide[style*="gap: 5px"] {
        gap: 5px !important;
    }
    .collage-2x2[style*="gap: 10px"],
    .collage-3x1[style*="gap: 10px"],
    .collage-4x1[style*="gap: 10px"],
    .collage-1x3[style*="gap: 10px"],
    .collage-left-tall[style*="gap: 10px"],
    .collage-right-tall[style*="gap: 10px"],
    .collage-top-wide[style*="gap: 10px"],
    .collage-bottom-wide[style*="gap: 10px"] {
        gap: 10px !important;
    }
    .collage-2x2[style*="gap: 15px"],
    .collage-3x1[style*="gap: 15px"],
    .collage-4x1[style*="gap: 15px"],
    .collage-1x3[style*="gap: 15px"],
    .collage-left-tall[style*="gap: 15px"],
    .collage-right-tall[style*="gap: 15px"],
    .collage-top-wide[style*="gap: 15px"],
    .collage-bottom-wide[style*="gap: 15px"] {
        gap: 15px !important;
    }
    .collage-2x2[style*="gap: 20px"],
    .collage-3x1[style*="gap: 20px"],
    .collage-4x1[style*="gap: 20px"],
    .collage-1x3[style*="gap: 20px"],
    .collage-left-tall[style*="gap: 20px"],
    .collage-right-tall[style*="gap: 20px"],
    .collage-top-wide[style*="gap: 20px"],
    .collage-bottom-wide[style*="gap: 20px"] {
        gap: 20px !important;
    }
    .collage-2x2[style*="gap: 25px"],
    .collage-3x1[style*="gap: 25px"],
    .collage-4x1[style*="gap: 25px"],
    .collage-1x3[style*="gap: 25px"],
    .collage-left-tall[style*="gap: 25px"],
    .collage-right-tall[style*="gap: 25px"],
    .collage-top-wide[style*="gap: 25px"],
    .collage-bottom-wide[style*="gap: 25px"] {
        gap: 25px !important;
    }
    .collage-2x2[style*="gap: 30px"],
    .collage-3x1[style*="gap: 30px"],
    .collage-4x1[style*="gap: 30px"],
    .collage-1x3[style*="gap: 30px"],
    .collage-left-tall[style*="gap: 30px"],
    .collage-right-tall[style*="gap: 30px"],
    .collage-top-wide[style*="gap: 30px"],
    .collage-bottom-wide[style*="gap: 30px"] {
        gap: 30px !important;
    }
    
    /* Forza la visualizzazione di tutte le immagini anche su mobile piccolo */
    .collage-image,
    .modular-module {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        border: none !important;
        border-width: 0 !important;
        border-style: none !important;
        border-color: transparent !important;
        box-shadow: none !important;
        background: none !important;
        background-color: transparent !important;
        outline: none !important;
    }
    
    .collage-container > *,
    .modular-collage-container > * {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Forza rimozione bordi inline su mobile piccolo */
    .modular-module[style*="border"],
    .modular-module-image[style*="border"] {
        border: none !important;
        border-width: 0 !important;
        border-style: none !important;
        border-color: transparent !important;
        box-shadow: none !important;
        outline: none !important;
    }
    
    /* Reset per tutti i layout speciali su mobile piccolo */
    .collage-left-tall .collage-image:first-child,
    .collage-right-tall .collage-image:last-child,
    .collage-top-wide .collage-image:first-child,
    .collage-bottom-wide .collage-image:last-child {
        grid-row: auto !important;
        grid-column: auto !important;
    }
    
    .collage-image {
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 0 !important;
        overflow: hidden !important;
        min-height: 220px !important;
        height: auto !important;
        border: none !important;
        box-shadow: none !important;
        background: none !important;
        outline: none !important;
    }
    
    .collage-image img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        transform: none !important;
        object-position: center !important;
    }
}

/* Disabilita pan e centra immagini su dispositivi mobili in orientamento verticale */
@media (max-width: 768px) and (orientation: portrait) {
    .collage-image {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .collage-image img {
        transform: none !important;
        object-position: center !important;
        object-fit: cover !important;
        width: 100% !important;
        height: 100% !important;
    }
}

/* Disabilita pan e centra immagini su dispositivi molto piccoli */
@media (max-width: 360px) {
    .collage-image {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .collage-image img {
        transform: none !important;
        object-position: center !important;
        object-fit: cover !important;
        width: 100% !important;
        height: 100% !important;
    }
}

/* Stili per il form del widget */
.collage-widget-form {
    background: #f9f9f9;
    padding: 15px;
    border-radius: 5px;
    margin-bottom: 15px;
}

.collage-image-controls {
    background: white;
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #ddd;
    border-radius: 3px;
}

.collage-preview {
    margin: 10px 0;
    padding: 5px;
    background: #f0f0f0;
    border-radius: 3px;
    text-align: center;
}

.collage-preview img {
    border: 1px solid #ccc;
    border-radius: 3px;
}

/* Pulsanti del picker */
.collage-select-image,
.collage-remove-image {
    margin-right: 5px !important;
    margin-bottom: 5px !important;
}

.collage-select-image {
    background-color: #0073aa !important;
    color: white !important;
    border-color: #0073aa !important;
}

.collage-remove-image {
    background-color: #dc3232 !important;
    color: white !important;
    border-color: #dc3232 !important;
}

/* Effetto scala di grigi per collage - ora con ritardo personalizzabile dal backend */
.collage-image.grayscale-effect img {
    filter: grayscale(100%);
    transition: filter 0.3s ease-in-out var(--color-delay, 1.5s); /* Ritardo personalizzabile dal backend */
    will-change: filter; /* Ottimizzazione per performance */
}

.collage-image.grayscale-effect:hover img {
    filter: grayscale(0%);
    transition: filter 0.3s ease-in-out var(--color-delay, 1.5s); /* Mantiene il ritardo personalizzabile */
}

/* Ottimizzazione per dispositivi mobili - effetto colorazione solo dopo interazione touch */
@media (max-width: 768px) {
    .collage-image.grayscale-effect img {
        filter: grayscale(100%);
        transition: filter 0.3s ease-in-out var(--color-delay, 1.5s);
        /* Su mobile, l'effetto parte solo dopo il primo touch per risparmiare batteria */
    }
    
    .collage-image.grayscale-effect.touch-activated img {
        filter: grayscale(0%);
        transition: filter 0.3s ease-in-out var(--color-delay, 1.5s);
    }
    
    /* Riduce il ritardo su mobile per una migliore esperienza touch */
    .collage-image.grayscale-effect:not(.hover-effect-spiral):not(.hover-effect-wave):not(.hover-effect-stars):not(.hover-effect-fire):not(.hover-effect-vortex):not(.hover-effect-lightning):not(.hover-effect-rainbow) img {
        transition: filter 0.3s ease-in-out 0.3s; /* Ritardo ridotto su mobile */
    }
}

/* Ritardo ridotto per immagini collage con solo grayscale (senza effetti) */
.collage-image.grayscale-effect:not(.hover-effect-spiral):not(.hover-effect-wave):not(.hover-effect-stars):not(.hover-effect-fire):not(.hover-effect-vortex):not(.hover-effect-lightning):not(.hover-effect-rainbow) img {
    transition: filter 0.3s ease-in-out 0.5s; /* Ritardo ridotto a 0.5s quando non ci sono effetti */
}

.collage-image.grayscale-effect:not(.hover-effect-spiral):not(.hover-effect-wave):not(.hover-effect-stars):not(.hover-effect-fire):not(.hover-effect-vortex):not(.hover-effect-lightning):not(.hover-effect-rainbow):hover img {
    filter: grayscale(0%);
    transition: filter 0.3s ease-in-out 0.5s; /* Mantiene il ritardo ridotto anche al hover */
}

.collage-image.grayscale-effect:hover {
    transform: scale(1.02);
    box-shadow: none !important;
    transition: transform 0.3s ease-in-out;
}

/* Fix per GTranslate menu dropdown */
.gt_switcher .gt_selected {
    display: block !important;
}

.gt_switcher .gt_option {
    display: none !important;
}

.gt_switcher:hover .gt_option,
.gt_switcher:focus .gt_option {
    display: block !important;
}

/* Forza il menu chiuso di default */
.gt_switcher .gt_current {
    position: relative;
}

.gt_switcher .gt_current:after {
    content: '▼';
    margin-left: 5px;
    font-size: 10px;
}

.gt_switcher .gt_current.open:after {
    content: '▲';
}

/* Nasconde le opzioni di default */
.gt_switcher .gt_option {
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.gt_switcher:hover .gt_option,
.gt_switcher:focus .gt_option {
    opacity: 1;
    visibility: visible;
}

/* Stili per i post per categoria */

/* Header della categoria */
.page-header {
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: none !important;
}

.page-title {
    font-size: 2.5em;
    color: #333;
    margin: 0 0 10px 0;
    font-weight: 300;
}

.category-description {
    font-size: 1.1em;
    color: #666;
    line-height: 1.6;
}

/* Vista Standard */
.category-posts-standard {
    margin-bottom: 40px;
    /* Layout gestito dinamicamente dal Customizer */
}

.post-standard {
    margin-bottom: 30px;
    padding-bottom: 30px;
    border-bottom: none !important;
}

.post-standard:last-child {
    border-bottom: none !important;
}

/* Layout gestito dinamicamente dal Customizer */

.post-thumbnail img {
    width: 100%;
    height: auto;
    border-radius: 0 !important;
    box-shadow: none !important;
    transition: transform 0.3s ease;
}

.post-thumbnail img:hover {
    transform: scale(1.05);
}

.post-details {
    flex: 1;
}

/* Titoli sottili per gli elenchi */
.post-standard .post-title,
.category-posts-standard .post-title,
.category-posts-alternative .post-title,
.post-title-large,
.post-title-medium,
.post-overlay .post-title,
.post-title,
.post-title a,
.post-title-large a,
.post-title-medium a {
    font-weight: 300 !important;
}

.post-title {
    font-size: 1.4em;
    font-weight: 300;
    margin: 0 0 10px 0;
}

.post-title a {
    color: #333;
    text-decoration: none;
    transition: color 0.3s ease;
}

.post-title a:hover {
    color: #007cba;
}

.post-date, .post-author {
    font-size: 0.9em;
    color: #666;
    margin-bottom: 5px;
}

.post-excerpt {
    color: #555;
    line-height: 1.6;
    margin-top: 10px;
}

/* Vista Alternativa */
.category-posts-alternative {
    margin-bottom: 40px;
}

/* Post in evidenza (primo) */
.category-post-featured {
    margin-bottom: 30px;
}

.post-image-large {
    position: relative;
    width: 100%;
    height: 500px;
    overflow: hidden;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.post-image-large img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.post-image-large:hover img {
    transform: scale(1.05);
}

.post-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    /* Background gestito dinamicamente dal Customizer */
    padding: 40px 30px 30px;
    /* Colore gestito dinamicamente dal Customizer */
}

.post-title-large {
    font-size: 2.2em;
    font-weight: 300;
    margin: 0;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

.post-title-large a {
    /* Colore gestito dinamicamente dal Customizer */
    text-decoration: none;
    transition: color 0.3s ease;
}

.post-title-large a:hover {
    color: #ffd700;
}

/* Post medi (secondo e terzo) */
.category-posts-medium {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 30px;
}

.post-medium {
    position: relative;
    height: 300px;
    overflow: hidden;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.post-image-medium {
    position: relative;
    width: 100%;
    height: 100%;
}

.post-image-medium img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.post-image-medium:hover img {
    transform: scale(1.05);
}

.post-title-medium {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    /* Background gestito dinamicamente dal Customizer */
    padding: 20px 15px 15px;
    margin: 0;
    font-size: 1.3em;
    font-weight: 300;
}

.post-title-medium a {
    /* Colore gestito dinamicamente dal Customizer */
    text-decoration: none;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
    transition: color 0.3s ease;
}

.post-title-medium a:hover {
    color: #ffd700;
}

/* Paginazione */
.navigation.pagination {
    margin-top: 40px;
    text-align: center;
}

.nav-links {
    display: inline-flex;
    gap: 10px;
}

.page-numbers {
    padding: 10px 15px;
    border: none !important;
    border-radius: 0 !important;
    text-decoration: none;
    color: #333;
    transition: all 0.3s ease;
}

.page-numbers:hover,
.page-numbers.current {
    background: #007cba;
    color: white;
    border-color: #007cba;
}

/* Messaggio nessun post */
.no-posts {
    text-align: center;
    padding: 60px 20px;
    color: #666;
}

.no-posts h2 {
    font-size: 2em;
    margin-bottom: 20px;
    color: #333;
}

/* Responsive */
@media (max-width: 768px) {
    .post-content {
        flex-direction: column;
        gap: 15px;
    }
    
    .post-thumbnail {
        width: 100%;
    }
    
    .category-posts-medium {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .post-image-large {
        height: 300px;
    }
    
    .post-title-large {
        font-size: 1.6em;
    }
    
    .post-overlay {
        padding: 20px 15px 15px;
    }
    
    .page-title {
        font-size: 2em;
    }
}

@media (max-width: 480px) {
    .post-image-large {
        height: 250px;
    }
    
    .post-title-large {
        font-size: 1.4em;
    }
    
    .post-medium {
        height: 200px;
    }
    
    .post-title-medium {
        font-size: 1.1em;
        padding: 15px 10px 10px;
    }
}

/* Stili per articoli singoli */

.single-post {
    margin-bottom: 40px;
}

.entry-header {
    margin-bottom: 30px;
    text-align: center;
}

.entry-title {
    font-size: 2.5em;
    color: #333;
    margin: 0 0 20px 0;
    line-height: 1.2;
}

.entry-meta {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
    color: #666;
    font-size: 0.95em;
}

.entry-meta span {
    display: flex;
    align-items: center;
    gap: 5px;
}

.entry-meta i {
    color: #007cba;
    font-size: 0.9em;
}

.entry-meta a {
    color: #007cba;
    text-decoration: none;
    transition: color 0.3s ease;
}

.entry-meta a:hover {
    color: #005a87;
}

.entry-thumbnail {
    margin-bottom: 30px;
    text-align: center;
}

.entry-thumbnail img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.entry-content {
    line-height: 1.8;
    color: #333;
    font-size: 1.1em;
}

.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
    color: #333;
    margin: 30px 0 15px 0;
    line-height: 1.3;
}

.entry-content h1 { 
    font-size: 2em; 
    font-weight: 300;
    color: #333;
    margin: 0 0 15px 0;
}
.entry-content h2 { 
    font-size: 1.7em; 
    font-weight: 300;
    color: #333;
    margin: 0 0 15px 0;
}
.entry-content h3 { 
    font-size: 1.4em; 
    font-weight: 300;
    color: #333;
    margin: 0 0 12px 0;
}
.entry-content h4 { 
    font-size: 1.2em; 
    font-weight: 300;
    color: #333;
    margin: 0 0 10px 0;
}
.entry-content h5 { 
    font-size: 1.1em; 
    font-weight: 300;
    color: #333;
    margin: 0 0 8px 0;
}
.entry-content h6 { 
    font-size: 1em; 
    font-weight: 300;
    color: #333;
    margin: 0 0 8px 0;
}

.entry-content p {
    margin-bottom: 20px;
}

.entry-content ul,
.entry-content ol {
    margin: 20px 0;
    padding-left: 30px;
}

.entry-content li {
    margin-bottom: 8px;
}

.entry-content blockquote {
    margin: 30px 0;
    padding: 20px 30px;
    background: #f8f9fa;
    border-left: 4px solid #007cba;
    font-style: italic;
    font-size: 1.1em;
    color: #555;
}

.entry-content blockquote p {
    margin: 0;
}

.entry-content img {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
    margin: 20px 0;
}

.entry-content a {
    color: #007cba;
    text-decoration: none;
    transition: color 0.3s ease;
}

.entry-content a:hover {
    color: #005a87;
    text-decoration: underline;
}

.entry-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
}

.entry-content th,
.entry-content td {
    padding: 12px;
    border: 1px solid #ddd;
    text-align: left;
}

.entry-content th {
    background: #f8f9fa;
    font-weight: bold;
}

.page-links {
    margin: 30px 0;
    text-align: center;
}

.page-links a,
.page-links span {
    display: inline-block;
    padding: 8px 12px;
    margin: 0 5px;
    border: 1px solid #ddd;
    border-radius: 4px;
    text-decoration: none;
    color: #333;
    transition: all 0.3s ease;
}

.page-links a:hover,
.page-links span.current {
    background: #007cba;
    color: white;
    border-color: #007cba;
}

.entry-footer {
    margin-top: 40px;
    padding-top: 30px;
    border-top: 1px solid #eee;
}

.entry-tags {
    margin-bottom: 20px;
}

.entry-tags a {
    display: inline-block;
    padding: 5px 10px;
    margin: 0 5px 5px 0;
    background: #f8f9fa;
    border: 1px solid #ddd;
    border-radius: 15px;
    color: #666;
    text-decoration: none;
    font-size: 0.9em;
    transition: all 0.3s ease;
}

.entry-tags a:hover {
    background: #007cba;
    color: white;
    border-color: #007cba;
}

.entry-edit {
    text-align: right;
}

.edit-link a {
    color: #666;
    text-decoration: none;
    font-size: 0.9em;
    transition: color 0.3s ease;
}

.edit-link a:hover {
    color: #007cba;
}

/* Navigazione tra post */
.post-navigation {
    margin: 40px 0;
    padding: 20px 0;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
}

.nav-links {
    display: flex;
    justify-content: space-between;
    gap: 20px;
}

.nav-previous,
.nav-next {
    flex: 1;
}

.nav-next {
    text-align: right;
}

.nav-subtitle {
    display: block;
    font-size: 0.9em;
    color: #666;
    margin-bottom: 5px;
}

.nav-title {
    font-weight: bold;
    color: #333;
}

.nav-links a {
    text-decoration: none;
    transition: color 0.3s ease;
}

.nav-links a:hover .nav-title {
    color: #007cba;
}

/* Responsive per articoli singoli */
@media (max-width: 768px) {
    .entry-title {
        font-size: 2em;
    }
    
    .entry-meta {
        flex-direction: column;
        gap: 10px;
    }
    
    .nav-links {
        flex-direction: column;
        gap: 15px;
    }
    
    .nav-next {
        text-align: left;
    }
    
    .entry-content {
        font-size: 1em;
    }
    
    .entry-content h1 { font-size: 1.7em; }
    .entry-content h2 { font-size: 1.5em; }
    .entry-content h3 { font-size: 1.3em; }
}

@media (max-width: 480px) {
    .entry-title {
        font-size: 1.7em;
    }
    
    .entry-content blockquote {
        padding: 15px 20px;
        font-size: 1em;
    }
    
    .entry-content table {
        font-size: 0.9em;
    }
    
    .entry-content th,
    .entry-content td {
        padding: 8px;
    }
}

/* Immagine di sfondo per layout boxed */
body.layout-boxed {
    position: relative;
}

body.layout-boxed::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    z-index: -1;
    pointer-events: none;
}

/* Colore container per layout boxed */
.layout-boxed .container,
.layout-boxed .site-content,
.layout-boxed .home-area,
.layout-boxed .widget-area,
.layout-boxed .site-main,
.layout-boxed .site-header,
.layout-boxed .site-footer {
    background-color: rgba(255, 255, 255, 1.0);
}

/* Stili per il testo personalizzato del footer */
.footer-custom-text {
    margin: 20px 0;
    padding: 15px 0;
    border-top: 1px solid #e0e0e0;
    border-bottom: 1px solid #e0e0e0;
    text-align: center;
    font-size: 14px;
    line-height: 1.6;
    color: #666;
}

.footer-custom-text p {
    margin: 0 0 10px 0;
}

.footer-custom-text p:last-child {
    margin-bottom: 0;
}

.footer-custom-text strong,
.footer-custom-text b {
    font-weight: bold;
    color: #333;
}

.footer-custom-text em,
.footer-custom-text i {
    font-style: italic;
}

.footer-custom-text a {
    color: #0073aa;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-custom-text a:hover {
    color: #005a87;
    text-decoration: underline;
}

/* Stili per il copyright del footer */
.footer-copyright {
    margin: 15px 0;
    padding: 10px 0;
    text-align: center;
    font-size: 13px;
    line-height: 1.5;
    color: #666;
    border-top: 1px solid #e0e0e0;
}

/* Stili per l'overlay di caricamento nel widget collage */
.collage-loading-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.8);
    padding: 15px 25px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    cursor: pointer;
    min-width: 120px;
}

.collage-loading-overlay.active {
    opacity: 1;
    visibility: visible;
}

.loading-text {
    color: white;
    font-size: 20px;
    font-weight: 600;
    text-align: center;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    animation: loading-pulse 1s ease-in-out infinite;
    white-space: nowrap;
}

@keyframes loading-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* Responsive per l'overlay di caricamento */
@media (max-width: 768px) {
    .loading-text {
        font-size: 18px;
    }
    
    .collage-loading-overlay {
        padding: 12px 20px;
        min-width: 100px;
    }
}

/* Stili per l'icona casa nel menu */
.home-icon a::before {
    content: "\f102" !important;
    font-family: "dashicons" !important;
    margin-right: 8px !important;
    display: inline-block !important;
    vertical-align: middle !important;
    font-size: 20px !important;
    color: #222;
    transition: color 0.2s;
}

/* Colore dell'icona casa al hover/focus */
.home-icon a:hover::before, 
.home-icon a:focus::before {
    color: #be9732;
}

/* Responsive per l'icona casa */
@media (max-width: 768px) {
    .home-icon a::before {
        font-size: 18px !important;
        margin-right: 6px !important;
    }
}

.footer-copyright p {
    margin: 0 0 8px 0;
}

.footer-copyright p:last-child {
    margin-bottom: 0;
}

.footer-copyright strong,
.footer-copyright b {
    font-weight: bold;
    color: #333;
}

.footer-copyright em,
.footer-copyright i {
    font-style: italic;
}

.footer-copyright a {
    color: #0073aa;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-copyright a:hover {
    color: #005a87;
    text-decoration: underline;
}

/* Stili per la SplashPage */
.splash-page-active {
    overflow: hidden;
}

.splash-page-active body {
    overflow: hidden;
}

/* Nascondi elementi durante la splash page */
.splash-page-active .site-header,
.splash-page-active .site-content,
.splash-page-active .site-footer {
    display: none;
}

/* Stili per la griglia 3x3 nel backend */
.splashpage-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin: 10px 0;
    max-width: 300px;
}

.splashpage-grid-item {
    aspect-ratio: 1;
    border: 2px solid #ddd;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f9f9f9;
    cursor: pointer;
    transition: all 0.3s ease;
}

.splashpage-grid-item:hover {
    border-color: #0073aa;
    background: #e7f3ff;
}

.splashpage-grid-item.active {
    border-color: #0073aa;
    background: #0073aa;
    color: white;
}

.splashpage-grid-item.top-left { grid-column: 1; grid-row: 1; }
.splashpage-grid-item.top-center { grid-column: 2; grid-row: 1; }
.splashpage-grid-item.top-right { grid-column: 3; grid-row: 1; }
.splashpage-grid-item.middle-left { grid-column: 1; grid-row: 2; }
.splashpage-grid-item.middle-center { grid-column: 2; grid-row: 2; }
.splashpage-grid-item.middle-right { grid-column: 3; grid-row: 2; }
.splashpage-grid-item.bottom-left { grid-column: 1; grid-row: 3; }
.splashpage-grid-item.bottom-center { grid-column: 2; grid-row: 3; }
.splashpage-grid-item.bottom-right { grid-column: 3; grid-row: 3; }

/* Stili per le immagini di fallback */
.fallback-image {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
    border-radius: 0 !important;
    box-shadow: none !important;
    transition: transform 0.3s ease;
}

.fallback-image:hover {
    transform: scale(1.02);
    box-shadow: none !important;
}

/* Responsive per immagini di fallback */
@media (max-width: 768px) {
    .fallback-image {
        border-radius: 0 !important;
        box-shadow: none !important;
    }
    
    .fallback-image:hover {
        transform: none;
        box-shadow: none !important;
    }
}

/* Stili specifici per le immagini di fallback nei post */
.entry-thumbnail .fallback-image {
    width: 100%;
    height: auto;
    object-fit: cover;
}

.post-thumbnail .fallback-image {
    width: 100%;
    height: auto;
    object-fit: cover;
}

.widget-post-thumbnail .fallback-image {
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* CSS per menu trasparente - VERSIONE CORRETTA */

/* Stili base per header e navigazione - SOVRASCRITTI DAL CUSTOMIZER */
.site-header {
    min-height: 80px;
    padding: 15px 0;
    position: relative;
    /* Questi valori vengono sovrascritti dal Customizer */
}

.container-full-width .site-header {
    padding: 8px 0;
    min-height: 60px;
    /* Questi valori vengono sovrascritti dal Customizer */
}

.site-header-flex {
    min-height: 50px;
    padding: 10px 0;
    display: flex;
    align-items: center;
    position: relative;
    /* Questi valori vengono sovrascritti dal Customizer */
}

.container-full-width .site-header-flex {
    padding: 5px 0;
    min-height: 40px;
    /* Questi valori vengono sovrascritti dal Customizer */
}

.main-navigation {
    min-height: 50px;
    display: flex;
    align-items: center;
    position: relative;
    /* Questi valori vengono sovrascritti dal Customizer */
}

.header-left {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-left: 0;
    justify-content: flex-start;
    /* Questi valori vengono sovrascritti dal Customizer */
}



/* Stili per menu trasparente - VERSIONE SEMPLIFICATA */
.site-header[style*="backdrop-filter"],
.site-header[style*="background: transparent"],
.site-header[style*="background-color: transparent"] {
    background: transparent;
    border: none;
    box-shadow: none;
}

/* Submenu per menu trasparente */
.site-header[style*="backdrop-filter"] .menu-primario .sub-menu,
.site-header[style*="background: transparent"] .menu-primario .sub-menu,
.site-header[style*="background-color: transparent"] .menu-primario .sub-menu {
    background: #fff;
    border: 1px solid #e0e0e0;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* Assicurati che le aree widget non interferiscano */
.home-area,
.home1-area,
.home2-area,
.home3-area,
.home4-area,
.home5-area,
.widget,
.widget-area {
    z-index: 1;
    position: relative;
}

/* Stili base per submenu */
.menu-primario .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    background: #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    border: 1px solid #e0e0e0;
    min-width: 200px;
    max-height: 400px;
    overflow-y: auto;
    padding: 8px 0;
    border-radius: 6px;
    display: none;
}

/* Submenu visibili su hover */
.menu-primario li:hover > .sub-menu {
    display: block;
}

/* Stili per i link dei submenu */
.menu-primario .sub-menu a {
    padding: 8px 16px;
    color: #222;
    border: none;
    background: transparent;
}

.menu-primario .sub-menu a:hover {
    background: #f5f5f5;
    color: #0073aa;
}

/* Assicurati che le aree widget non interferiscano con i submenu */
.home-area,
.home1-area,
.home2-area,
.home3-area,
.home4-area,
.home5-area,
.widget,
.widget-area {
    z-index: 1;
    position: relative;
}

/* Stili per menu fisso */
.site-header[style*="position: fixed"] .menu-primario .sub-menu {
    position: fixed;
    top: 80px;
    z-index: 1000;
}

/* Forza la visibilità dei submenu anche nel layout boxed con menu fisso */
.layout-boxed .site-header[style*="position: fixed"] .menu-primario .sub-menu,
.layout-boxed .site-header[style*="position: fixed"] .menu-primario li:hover > .sub-menu,
.layout-boxed .site-header[style*="position: fixed"] .menu-primario li:focus-within > .sub-menu {
    position: fixed !important;
    z-index: 999999999 !important;
    background: #fff !important;
    background-color: #fff !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
    clip: auto !important;
    clip-path: none !important;
    -webkit-clip-path: none !important;
    overflow: visible !important;
    margin: 0 !important;
    padding: 8px 0 !important;
    min-width: 200px !important;
    max-height: 400px !important;
    height: auto !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    top: 80px !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
}

/* FIX ULTRA-AGGRESSIVO PER SUBMENU CON MENU FISSO - PRIORITÀ MASSIMA */

/* Forza position fixed per submenu quando il menu è fisso */
.site-header[style*="position: fixed"] .menu-primario .sub-menu,
.site-header[style*="position: fixed"] .menu-primario li:hover > .sub-menu,
.site-header[style*="position: fixed"] .menu-primario li:focus-within > .sub-menu,
.site-header[style*="position: fixed"] .menu-primario li:focus > .sub-menu,
.site-header[style*="position: fixed"] .menu-primario li:active > .sub-menu {
    position: fixed !important;
    z-index: 999999999 !important;
    background: #fff !important;
    background-color: #fff !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
    border: none !important;
    outline: none !important;
    margin: 0 !important;
    padding: 8px 0 !important;
    min-width: 200px !important;
    max-height: 400px !important;
    overflow-y: auto !important;
    overflow-x: visible !important;
    border-radius: 6px !important;
    /* Rimuovi qualsiasi limite di contenitore */
    clip: auto !important;
    clip-path: none !important;
    -webkit-clip-path: none !important;
    /* Assicurati che sia sempre visibile */
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    /* Posizionamento specifico per menu fisso */
    top: 80px !important; /* Altezza del menu fisso */
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    /* Forza la rimozione di tutti i limiti */
    transform: none !important;
    -webkit-transform: none !important;
    -moz-transform: none !important;
    -ms-transform: none !important;
}

/* Rimuovi overflow hidden da TUTTI i contenitori quando il menu è fisso */
.site-header[style*="position: fixed"] ~ *,
.site-header[style*="position: fixed"] ~ * *,
body:has(.site-header[style*="position: fixed"]) *,
html:has(.site-header[style*="position: fixed"]) * {
    overflow: visible !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
}

/* Forza la visibilità dei submenu anche nel layout boxed con menu fisso */
.layout-boxed .site-header[style*="position: fixed"] .menu-primario .sub-menu,
.layout-boxed .site-header[style*="position: fixed"] .menu-primario li:hover > .sub-menu,
.layout-boxed .site-header[style*="position: fixed"] .menu-primario li:focus-within > .sub-menu,
.layout-boxed .site-header[style*="position: fixed"] .menu-primario li:focus > .sub-menu,
.layout-boxed .site-header[style*="position: fixed"] .menu-primario li:active > .sub-menu {
    position: fixed !important;
    z-index: 999999999 !important;
    background: #fff !important;
    background-color: #fff !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
    clip: auto !important;
    clip-path: none !important;
    -webkit-clip-path: none !important;
    overflow: visible !important;
    margin: 0 !important;
    padding: 8px 0 !important;
    min-width: 200px !important;
    max-height: 400px !important;
    height: auto !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    top: 80px !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    -webkit-transform: none !important;
    -moz-transform: none !important;
    -ms-transform: none !important;
}

/* SOLUZIONE CORRETTA PER SUBMENU - SOLO SU HOVER/FOCUS */
/* Submenu nascosti di default */
.menu-primario .sub-menu {
    display: none !important;
    position: absolute !important;
    z-index: 999999999 !important;
    background: #fff !important;
    background-color: #fff !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
    border: none !important;
    outline: none !important;
    margin: 0 !important;
    padding: 8px 0 !important;
    min-width: 200px !important;
    max-height: 400px !important;
    overflow-y: auto !important;
    overflow-x: visible !important;
    border-radius: 6px !important;
    clip: auto !important;
    clip-path: none !important;
    -webkit-clip-path: none !important;
    top: 100% !important;
    left: 0 !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    -webkit-transform: none !important;
    -moz-transform: none !important;
    -ms-transform: none !important;
}

/* Submenu visibili solo su hover/focus */
.menu-primario li:hover > .sub-menu,
.menu-primario li:focus-within > .sub-menu {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Submenu per menu fisso - posizione corretta */
.site-header[style*="position: fixed"] .menu-primario .sub-menu {
    position: fixed !important;
    top: 80px !important;
    left: auto !important;
    right: auto !important;
}

/* Submenu per menu fisso - visibili solo su hover/focus */
.site-header[style*="position: fixed"] .menu-primario li:hover > .sub-menu,
.site-header[style*="position: fixed"] .menu-primario li:focus-within > .sub-menu {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Rimuovi overflow hidden solo dai contenitori del menu */
.site-header, .site-header-flex, .main-navigation, .menu-primario, .menu-primario li {
    overflow: visible !important;
    position: relative !important;
}

/* Assicurati che le aree widget abbiano z-index basso per non coprire il menu */
.home-area, .home1-area, .home2-area, .home3-area, .home4-area, .home5-area, .widget, .widget-area {
    z-index: 1 !important;
    position: relative !important;
}

/* FIXES PER MENU E SUBMENU - VERSIONE CORRETTA */

/* 1. FIX PADDING-TOP: rimuovi il padding-top quando il menu NON è sticky */
body {
    padding-top: 0 !important;
}

/* 2. FIX OVERFLOW: rimuovi overflow hidden dai contenitori che tagliano i submenu */
.layout-boxed .container,
.layout-boxed .site-content,
.layout-boxed .home-area,
.layout-boxed .widget-area,
.layout-boxed .site-main {
    max-width: 100% !important;
    overflow: visible !important;
    box-sizing: border-box !important;
}

.layout-boxed .widget {
    max-width: 100% !important;
    overflow: visible !important;
    box-sizing: border-box !important;
}

/* Stili per menu sticky */
body.has-sticky-menu {
    padding-top: 80px;
}

/* Fix sticky per versione full-width */
.container-full-width body.has-sticky-menu {
    padding-top: 50px;
}

.container-full-width .site-header[style*="position: fixed"] {
    padding: 5px 0;
    min-height: 50px;
}

.container-full-width .site-header[style*="position: fixed"] .menu-primario .sub-menu {
    top: 50px;
}

/* FIXES PER VERSIONE FULL-WIDTH */
.container-full-width .site-header {
    padding: 5px 0;
    min-height: 50px;
}

.container-full-width .site-header-flex {
    padding: 2px 0;
    min-height: 30px;
}

/* CSS CORRETTO E FUNZIONANTE PER IL MENU */
/* Rimuovo tutti i CSS problematici precedenti e li sostituisco con regole semplici e funzionanti */

/* Reset base per il menu */
.menu-primario {
    display: flex;
    align-items: center;
    gap: 32px;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* FORZA NASCONDERE MENU DESKTOP SU MOBILE - REGOLE GLOBALI */
@media (max-width: 900px) {
    .menu-primario {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
    }
    
    .menu-primario:not(.open) {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
    }
}

.menu-primario li {
    position: relative;
    margin: 0;
    padding: 0;
}

.menu-primario a {
    display: block;
    padding: 12px 18px;
    color: #444;
    text-decoration: none;
    transition: color 0.3s ease;
    line-height: 1.4;
}

.menu-primario a:hover {
    color: #0073aa;
}

/* Gestione submenu - SEMPLICE E FUNZIONANTE */
.menu-primario .sub-menu {
    display: none !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    background: #fff !important;
    border: 1px solid #e0e0e0 !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
    min-width: 200px !important;
    z-index: 999999 !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 8px 0 !important;
    border-radius: 6px !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
    clip: auto !important;
    overflow: visible !important;
    height: auto !important;
    width: auto !important;
    max-width: none !important;
    min-width: 200px !important;
}

/* Submenu visibili su hover - FORZA LA VISUALIZZAZIONE */
.menu-primario li:hover > .sub-menu {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Stili per i link dei submenu - FORZA LA VISUALIZZAZIONE */
.menu-primario .sub-menu a {
    display: block !important;
    padding: 8px 16px !important;
    color: #222 !important;
    text-decoration: none !important;
    border: none !important;
    background: transparent !important;
    transition: all 0.3s ease !important;
    line-height: 1.4 !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.menu-primario .sub-menu a:hover {
    background: #f5f5f5 !important;
    color: #0073aa !important;
}

/* Menu toggle per mobile - FORZA VISIBILITÀ */
.menu-toggle {
    display: none !important;
    background: none !important;
    border: none !important;
    cursor: pointer !important;
    padding: 10px !important;
    position: relative !important;
    z-index: 1000000 !important;
}

/* FORZA VISIBILITÀ DEL MENU TOGGLE SU MOBILE - REGOLE GLOBALI */
@media screen and (max-width: 900px) {
    .menu-toggle {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
        z-index: 1000000 !important;
        background: #fff !important;
        border: 1px solid #ddd !important;
        border-radius: 4px !important;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
        width: 40px !important;
        height: 40px !important;
        margin: 0 !important;
        padding: 8px !important;
    }
    
    /* NASCONDI IL MENU DESKTOP SU MOBILE */
    .main-navigation .menu-primario {
        display: none !important;
    }
    
    /* MOSTRA IL MENU QUANDO È APERTO */
    .main-navigation .menu-primario.open {
        display: flex !important;
    }
}

/* Overlay per menu mobile */
.menu-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999998;
}

.menu-overlay.active {
    display: block;
}

/* DESKTOP: Forza la visualizzazione dei submenu */
@media (min-width: 901px) {
    /* SUBMENU DESKTOP - REGOLE SEMPLICI */
    .menu-primario .sub-menu {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        background: #fff;
        border: none !important;
        box-shadow: none !important;
        min-width: 200px;
        z-index: 1000;
        list-style: none;
        margin: 0;
        padding: 8px 0;
        border-radius: 0 !important;
        overflow: visible;
        clip: auto;
        clip-path: none;
        -webkit-clip-path: none;
    }
    
    /* SUBMENU VISIBILI SU HOVER DESKTOP */
    .menu-primario li:hover > .sub-menu {
        display: block;
    }
    
    /* LINK SUBMENU DESKTOP */
    .menu-primario .sub-menu a {
        display: block;
        padding: 8px 16px;
        color: #222;
        text-decoration: none;
        border: none;
        background: transparent;
        transition: all 0.3s ease;
        line-height: 1.4;
    }
    
    .menu-primario .sub-menu a:hover {
        background: #f5f5f5;
        color: #0073aa;
    }
    
    /* POSIZIONAMENTO RELATIVO PER LI CON SUBMENU */
    .menu-primario li {
        position: relative !important;
    }
    


    .menu-primario .sub-menu a:hover {
        background: #f5f5f5 !important;
        color: #0073aa !important;
    }
}

/* Menu mobile hamburger in alto a destra */
@media (max-width: 900px) {
    /* Menu mobile - hamburger in alto a destra */
    .menu-primario {
        z-index: 999999;
        position: fixed;
        display: none;
        top: 70px;
        right: 20px;
        width: 280px;
        background: #fff;
        border: 1px solid #e0e0e0;
        border-radius: 8px;
        box-shadow: 0 8px 24px rgba(0,0,0,0.15);
        padding: 20px;
        flex-direction: column;
        max-height: calc(100vh - 90px);
        overflow-y: auto;
    }
    
    /* Quando il menu è aperto */
    .menu-primario.open {
        display: flex;
    }
    
    /* Nascondi l'overlay su desktop */
    .menu-overlay {
        display: none;
    }
    
    /* Menu mobile aperto */
    .menu-primario.open a {
        color: #222;
        border-bottom: none !important;
        padding: 12px 0 !important;
        display: block !important;
        text-align: left !important;
        border-bottom: 1px solid #f0f0f0 !important;
    }
    
    .menu-primario.open a:hover {
        color: #0073aa !important;
        background: #f8f9fa !important;
        margin: 0 -20px !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
    
    /* Stili per i submenu su mobile */
    .menu-primario.open .sub-menu {
        position: static !important;
        display: none !important;
        background: #f8f9fa !important;
        border: none !important;
        box-shadow: none !important;
        margin: 0 -20px !important;
        padding: 0 20px !important;
        border-radius: 0 !important;
    }
    
    .menu-primario.open .sub-menu.open {
        display: block !important;
    }
    
    .menu-primario.open .sub-menu a {
        padding: 8px 0 8px 20px !important;
        font-size: 14px !important;
        color: #666 !important;
        border-bottom: 1px solid #e9ecef !important;
    }
    
    .menu-primario.open .sub-menu a:hover {
        color: #0073aa !important;
        background: #e9ecef !important;
        margin: 0 -20px !important;
        padding-left: 40px !important;
        padding-right: 20px !important;
    }
}

.hamburger {
    display: block;
    width: 25px;
    height: 3px;
    background: #444;
    position: relative;
    transition: all 0.3s ease;
}

.hamburger::before,
.hamburger::after {
    content: '';
    position: absolute;
    width: 25px;
    height: 3px;
    background: #444;
    transition: all 0.3s ease;
}

.hamburger::before {
    top: -8px;
}

.hamburger::after {
    bottom: -8px;
}

/* Stato attivo dell'hamburger */
.hamburger.active {
    background: transparent;
}

.hamburger.active::before {
    transform: rotate(45deg);
    top: 0;
}

.hamburger.active::after {
    transform: rotate(-45deg);
    bottom: 0;
}

/* Responsive per mobile - FORZA VISIBILITÀ MENU TOGGLE */
@media (max-width: 900px) {
    /* FORZA VISIBILITÀ DEL MENU TOGGLE */
    .menu-toggle {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
        z-index: 1000000 !important;
        background: #fff !important;
        border: 1px solid #ddd !important;
        border-radius: 4px !important;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
        width: 40px !important;
        height: 40px !important;
        margin: 0 !important;
        padding: 8px !important;
    }
    
    /* Nascondi il menu desktop su mobile */
    .main-navigation .menu-primario {
        display: none !important;
    }
    
    /* Mostra il menu quando è aperto */
    .main-navigation .menu-primario.open {
        display: flex !important;
    }
    
    /* Assicura che il main-navigation abbia spazio per il toggle */
    .main-navigation {
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
    }
    
    /* Stili per il menu mobile quando è aperto */
    .main-navigation .menu-primario.open {
        display: flex !important;
        flex-direction: column !important;
        position: fixed !important;
        top: 70px !important;
        right: 20px !important;
        left: auto !important;
        width: 280px !important;
        background: #fff !important;
        border: 1px solid #e0e0e0 !important;
        border-radius: 8px !important;
        box-shadow: 0 8px 24px rgba(0,0,0,0.15) !important;
        padding: 20px !important;
        z-index: 999999 !important;
        max-height: calc(100vh - 90px) !important;
        overflow-y: auto !important;
        box-sizing: border-box !important;
        visibility: visible !important;
        opacity: 1 !important;
        transform: none !important;
        clip: auto !important;
        height: auto !important;
        max-width: 280px !important;
        min-width: 280px !important;
        margin: 0 !important;
        gap: 0 !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
    }
    
    .menu-primario .sub-menu {
        position: static !important;
        display: none !important;
        background: #f8f9fa !important;
        border: none !important;
        box-shadow: none !important;
        margin: 0 -20px !important;
        padding: 0 20px !important;
        min-width: auto !important;
        visibility: visible !important;
        opacity: 1 !important;
        transform: none !important;
        clip: auto !important;
        overflow: visible !important;
        height: auto !important;
        width: calc(100% + 40px) !important;
        max-width: none !important;
        min-width: auto !important;
        border-radius: 0 !important;
    }
    
    .menu-primario .sub-menu.open {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    .menu-primario a {
        padding: 12px 0 !important;
        border-bottom: 1px solid #f0f0f0 !important;
        visibility: visible !important;
        opacity: 1 !important;
        display: block !important;
        color: #222 !important;
        text-decoration: none !important;
        font-size: 16px !important;
        line-height: 1.4 !important;
    }
    
    .menu-primario a:hover {
        background: #f8f9fa !important;
        color: #0073aa !important;
        margin: 0 -20px !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
    
    .menu-primario .sub-menu a {
        padding: 8px 0 8px 20px !important;
        font-size: 14px !important;
        color: #666 !important;
        border-bottom: 1px solid #e9ecef !important;
    }
    
    .menu-primario .sub-menu a:hover {
        background: #e9ecef !important;
        color: #0073aa !important;
        margin: 0 -20px !important;
        padding-left: 40px !important;
        padding-right: 20px !important;
    }
    
    .menu-primario a:last-child {
        border-bottom: none !important;
    }
    
    /* Forza la visualizzazione di tutti gli elementi del menu */
    .menu-primario li {
        visibility: visible !important;
        opacity: 1 !important;
        display: block !important;
        position: static !important;
        float: none !important;
        clear: both !important;
    }
    
    .menu-primario li a {
        visibility: visible !important;
        opacity: 1 !important;
        display: block !important;
        position: static !important;
        float: none !important;
        clear: both !important;
    }
}

/* Fix per submenu su mobile */
@media (max-width: 900px) {
    .menu-primario .menu-item-has-children > a {
        position: relative;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    
    /* Indicatore submenu personalizzato */
    .menu-primario .menu-item-has-children > a .submenu-toggle {
        font-size: 12px;
        color: #666;
        transition: transform 0.3s ease;
        cursor: pointer;
        padding: 4px 8px;
        margin-left: 10px;
        border-radius: 3px;
        background: #f5f5f5;
        border: 1px solid #ddd;
        user-select: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
    }
    
    .menu-primario .menu-item-has-children > a .submenu-toggle:hover {
        background: #e9e9e9;
        color: #333;
    }
    
    .menu-primario .menu-item-has-children.open > a .submenu-toggle {
        transform: rotate(180deg);
        background: #0073aa;
        color: #fff;
        border-color: #005a87;
    }
    
    /* Rimuovi il pseudo-elemento ::after se esiste */
    .menu-primario .menu-item-has-children > a::after {
        display: none !important;
    }
}

/* FORZA VISIBILITÀ MENU TOGGLE SU TUTTI I DISPOSITIVI MOBILE */
@media (max-width: 768px) {
    .menu-toggle {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
        z-index: 1000000 !important;
        background: #fff !important;
        border: 1px solid #ddd !important;
        border-radius: 4px !important;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
        width: 40px !important;
        height: 40px !important;
        margin: 0 !important;
        padding: 8px !important;
    }
    
    .main-navigation .menu-primario:not(.open) {
        display: none !important;
    }
    
    .menu-primario.open {
        display: block !important;
        position: fixed !important;
        top: 80px !important;
        right: 20px !important;
        left: 20px !important;
        background: #fff !important;
        border: 1px solid #ddd !important;
        border-radius: 8px !important;
        box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
        padding: 20px !important;
        z-index: 999999 !important;
        flex-direction: column !important;
        gap: 15px !important;
    }
    
    .menu-primario.open li {
        width: 100% !important;
    }
    
    .menu-primario.open a {
        display: block !important;
        padding: 12px 16px !important;
        border-bottom: 1px solid #eee !important;
    }
    
    .menu-primario.open .sub-menu {
        position: static !important;
        display: block !important;
        background: #f8f9fa !important;
        margin-top: 10px !important;
        border-radius: 4px !important;
        box-shadow: none !important;
    }
}

@media (max-width: 480px) {
    .menu-toggle {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 35px !important;
        height: 35px !important;
        padding: 6px !important;
    }
}

/* ===== FORZA CARICAMENTO CSS MOBILE ===== */

/* REGOLE ULTRA-AGGRESSIVE PER NASCONDERE MENU DESKTOP SU MOBILE */
@media (max-width: 900px) {
    /* NASCONDI COMPLETAMENTE IL MENU DESKTOP */
    .menu-primario {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        position: absolute !important;
        left: -9999px !important;
        top: -9999px !important;
        width: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
    }
    
    .menu-primario:not(.open) {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        position: absolute !important;
        left: -9999px !important;
        top: -9999px !important;
        width: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
    }
    
    /* FORZA MOSTRARE IL MENU QUANDO È APERTO */
    .menu-primario.open {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: fixed !important;
        top: 70px !important;
        right: 20px !important;
        left: 20px !important;
        background: #fff !important;
        border: 1px solid #ddd !important;
        border-radius: 8px !important;
        box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
        padding: 20px !important;
        z-index: 999999 !important;
        flex-direction: column !important;
        gap: 15px !important;
        width: auto !important;
        height: auto !important;
        overflow: visible !important;
    }
}

/* REGOLE AGGIUNTIVE PER MENU HAMBURGER - GARANTISCE VISIBILITÀ */
@media (max-width: 900px) {
    .menu-toggle {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
        z-index: 1000000 !important;
        background: #fff !important;
        border: 1px solid #ddd !important;
        border-radius: 4px !important;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
        width: 40px !important;
        height: 40px !important;
        margin: 0 !important;
        padding: 8px !important;
        cursor: pointer !important;
    }
    
    /* FORZA NASCONDERE IL MENU DESKTOP SU MOBILE */
    .menu-primario {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
    }
    
    .menu-primario:not(.open) {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
    }
    
    /* FORZA MOSTRARE IL MENU QUANDO È APERTO */
    .menu-primario.open {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: fixed !important;
        top: 70px !important;
        right: 20px !important;
        left: 20px !important;
        background: #fff !important;
        border: 1px solid #ddd !important;
        border-radius: 8px !important;
        box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
        padding: 20px !important;
        z-index: 999999 !important;
        flex-direction: column !important;
        gap: 15px !important;
        max-height: 80vh !important;
        overflow-y: auto !important;
        overflow-x: visible !important;
    }
    
    /* GESTIONE SOTTOMENU - LAYOUT VERTICALE SU MOBILE */
    .menu-primario.open .sub-menu {
        position: static !important;
        left: auto !important;
        top: auto !important;
        background: #f0f0f0 !important;
        border: 1px solid #ccc !important;
        border-radius: 4px !important;
        box-shadow: inset 0 1px 3px rgba(0,0,0,0.1) !important;
        margin: 5px 0 0 15px !important;
        padding: 10px !important;
        z-index: 1 !important;
        width: auto !important;
        min-width: 150px !important;
        max-width: 200px !important;
        display: none !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    .menu-primario.open .menu-item-has-children {
        position: relative !important;
    }
    
    .menu-primario.open .sub-menu li {
        margin: 5px 0 !important;
        padding: 0 !important;
    }
    
    .menu-primario.open .sub-menu a {
        display: block !important;
        padding: 8px 12px !important;
        color: #333 !important;
        text-decoration: none !important;
        border-radius: 3px !important;
        transition: background-color 0.2s ease !important;
    }
    
    .menu-primario.open .sub-menu a:hover {
        background-color: #f5f5f5 !important;
    }
    
    /* NASCONDI SOTTOMENU DI DEFAULT */
    .menu-primario.open .sub-menu {
        display: none !important;
    }
    
    /* MOSTRA SOTTOMENU QUANDO CLASSE ACTIVE */
    .menu-primario.open .menu-item-has-children.active .sub-menu {
        display: block !important;
    }
    
    /* MOSTRA SOTTOMENU SU HOVER PER MOBILE */
    .menu-primario.open .menu-item-has-children:hover .sub-menu {
        display: block !important;
    }
    
    /* GESTIONE CLICK SOTTOMENU */
    .menu-primario.open .menu-item-has-children > a {
        position: relative !important;
        cursor: pointer !important;
    }
    
    .menu-primario.open .menu-item-has-children > a::after {
        content: '▼' !important;
        position: absolute !important;
        right: 10px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        font-size: 12px !important;
        transition: transform 0.3s ease !important;
    }
    
    .menu-primario.open .menu-item-has-children.submenu-open > a::after {
        transform: translateY(-50%) rotate(180deg) !important;
    }
    
    /* STILE MIGLIORATO PER I SOTTOMENU - LAYOUT VERTICALE SU MOBILE */
    .menu-primario.open .sub-menu {
        background: #f0f0f0 !important;
        border: 1px solid #ccc !important;
        border-radius: 4px !important;
        box-shadow: inset 0 1px 3px rgba(0,0,0,0.1) !important;
        margin: 5px 0 0 15px !important;
        padding: 12px !important;
        z-index: 1 !important;
        min-width: 150px !important;
        max-width: 200px !important;
        position: static !important;
        left: auto !important;
        top: auto !important;
        display: none !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    .menu-primario.open .sub-menu li {
        margin: 3px 0 !important;
        padding: 0 !important;
    }
    
    .menu-primario.open .sub-menu a {
        display: block !important;
        padding: 10px 15px !important;
        color: #444 !important;
        text-decoration: none !important;
        border-radius: 4px !important;
        transition: all 0.2s ease !important;
        font-size: 14px !important;
        line-height: 1.4 !important;
    }
    
    .menu-primario.open .sub-menu a:hover {
        background-color: #e8e8e8 !important;
        color: #222 !important;
    }
    
    /* ASSICURA CHE I SOTTOMENU SIANO SEMPRE VISIBILI E CLICCABILI */
    .menu-primario.open .sub-menu a {
        pointer-events: auto !important;
        cursor: pointer !important;
        text-decoration: none !important;
        color: #333 !important;
    }
    
    .menu-primario.open .sub-menu a:visited {
        color: #333 !important;
    }
    
    /* ASSICURA CHE I LINK PRINCIPALI NON SIANO BLOCCATI */
    .menu-primario.open .menu-item-has-children > a[href] {
        pointer-events: auto !important;
        cursor: pointer !important;
        z-index: 10 !important;
        position: relative !important;
    }
    
    /* GARANTISCI CHE I LINK DEI MENU PRINCIPALI FUNZIONINO */
    .menu-primario.open .menu-item-has-children > a {
        pointer-events: auto !important;
        cursor: pointer !important;
        text-decoration: none !important;
        color: #333 !important;
        display: block !important;
        padding: 8px 12px !important;
        border-radius: 4px !important;
        transition: background-color 0.2s ease !important;
        position: relative !important;
        z-index: 10 !important;
    }
    
    .menu-primario.open .menu-item-has-children > a:hover {
        background-color: #f5f5f5 !important;
        color: #222 !important;
        text-decoration: none !important;
    }
    
    .menu-primario.open .menu-item-has-children > a:focus {
        outline: 2px solid #007cba !important;
        outline-offset: 2px !important;
    }
    
    .menu-primario.open .sub-menu a:active {
        color: #000 !important;
        background-color: #ddd !important;
    }
    
    /* GESTIONE CLICK SOTTOMENU SU MOBILE */
    .menu-primario.open .menu-item-has-children > a {
        user-select: auto !important;
        -webkit-user-select: auto !important;
        -moz-user-select: auto !important;
        -ms-user-select: auto !important;
        pointer-events: auto !important;
        cursor: pointer !important;
    }
    
    /* STILE PER MENU ITEM ATTIVO */
    .menu-primario.open .menu-item-has-children.active > a {
        background-color: #e8e8e8 !important;
        color: #333 !important;
    }
    
    /* GARANTISCI CHE I LINK DEI MENU CON SOTTOMENU FUNZIONINO */
    .menu-primario.open .menu-item-has-children > a {
        text-decoration: none !important;
        color: #333 !important;
        display: block !important;
        padding: 8px 12px !important;
        border-radius: 4px !important;
        transition: background-color 0.2s ease !important;
    }
    
    .menu-primario.open .menu-item-has-children > a:hover {
        background-color: #f5f5f5 !important;
        color: #222 !important;
    }
    
    .menu-primario.open .menu-item-has-children > a:visited {
        color: #333 !important;
    }
    
    /* FORZA LAYOUT VERTICALE PER I SOTTOMENU */
    .menu-primario.open .menu-item-has-children {
        display: block !important;
        width: 100% !important;
        position: relative !important;
    }
    
    .menu-primario.open .menu-item-has-children .sub-menu {
        position: static !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;
        transform: none !important;
        float: none !important;
        clear: both !important;
        display: none !important;
    }
    
    .menu-primario.open .menu-item-has-children.active .sub-menu,
    .menu-primario.open .menu-item-has-children:hover .sub-menu {
        display: block !important;
        position: static !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;
        transform: none !important;
    }
    
    
    
}

/* FORZA VISIBILITÀ HAMBURGER ICON */
.hamburger {
    display: block !important;
    width: 25px !important;
    height: 3px !important;
    background: #444 !important;
    position: relative !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
}

/* Aggiungi le 3 linee dell'hamburger */
.hamburger::before,
.hamburger::after {
    content: '' !important;
    position: absolute !important;
    width: 25px !important;
    height: 3px !important;
    background: #444 !important;
    transition: all 0.3s ease !important;
    left: 0 !important;
    display: block !important;
}

.hamburger::before {
    top: -8px !important;
}

.hamburger::after {
    bottom: -8px !important;
}

/* FORZA VISIBILITÀ DELLE 3 LINEE SU MOBILE */
@media (max-width: 900px) {
    .hamburger::before,
    .hamburger::after {
        content: '' !important;
        position: absolute !important;
        width: 25px !important;
        height: 3px !important;
        background: #444 !important;
        transition: all 0.3s ease !important;
        left: 0 !important;
        display: block !important;
    }
    
    .hamburger::before {
        top: -8px !important;
    }
    
    .hamburger::after {
        bottom: -8px !important;
    }
    
    /* Animazione hamburger quando attivo */
    .hamburger.active {
        background: transparent !important;
    }
    
    .hamburger.active::before {
        transform: rotate(45deg) !important;
        top: 0 !important;
    }
    
    .hamburger.active::after {
        transform: rotate(-45deg) !important;
        bottom: 0 !important;
    }
}

/* FORZA VISIBILITÀ MENU TOGGLE - REGOLE GLOBALI */
.menu-toggle {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* FORZA VISIBILITÀ MENU TOGGLE SU MOBILE */
@media (max-width: 900px) {
    .menu-toggle {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
        z-index: 1000000 !important;
        background: #fff !important;
        border: 1px solid #ddd !important;
        border-radius: 4px !important;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
        width: 40px !important;
        height: 40px !important;
        margin: 0 !important;
        padding: 8px !important;
        cursor: pointer !important;
    }
}

/* FORZA VISIBILITÀ MENU TOGGLE SU TUTTI I DISPOSITIVI MOBILE */
@media (max-width: 900px) {
    .menu-toggle {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
        z-index: 1000000 !important;
        background: #fff !important;
        border: 1px solid #ddd !important;
        border-radius: 4px !important;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
        width: 40px !important;
        height: 40px !important;
        margin: 0 !important;
        padding: 8px !important;
        cursor: pointer !important;
    }
    
    /* FORZA NASCONDERE IL MENU DESKTOP */
    .menu-primario {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        position: absolute !important;
        left: -9999px !important;
        top: -9999px !important;
        width: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
    }
    
    .menu-primario:not(.open) {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        position: absolute !important;
        left: -9999px !important;
        top: -9999px !important;
        width: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
    }
    
    /* MOSTRA IL MENU QUANDO È APERTO */
    .menu-primario.open {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: fixed !important;
        top: 70px !important;
        right: 20px !important;
        left: 20px !important;
        background: #fff !important;
        border: 1px solid #ddd !important;
        border-radius: 8px !important;
        box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
        padding: 20px !important;
        z-index: 999999 !important;
        flex-direction: column !important;
        gap: 15px !important;
        width: auto !important;
        height: auto !important;
        overflow: visible !important;
    }
}

.hamburger::before,
.hamburger::after {
    content: '' !important;
    position: absolute !important;
    width: 25px !important;
    height: 3px !important;
    background: #444 !important;
    transition: all 0.3s ease !important;
    left: 0 !important;
}

.hamburger::before {
    top: -8px !important;
}

.hamburger::after {
    bottom: -8px !important;
}

/* Stato attivo dell'hamburger */
.hamburger.active {
    background: transparent !important;
}

.hamburger.active::before {
    transform: rotate(45deg) !important;
    top: 0 !important;
}

.hamburger.active::after {
    transform: rotate(-45deg) !important;
    bottom: 0 !important;
}
/* MIGLIORAMENTO EFFETTO COLORAZIONE MOBILE */
@media (max-width: 768px) {
    .collage-image.grayscale-effect.mobile-centered,
    .modular-module.grayscale-effect.mobile-centered {
        transition: filter 0.3s ease, transform 0.3s ease;
    }
    
    .collage-image.grayscale-effect.touch-activated,
    .modular-module.grayscale-effect.touch-activated {
        filter: grayscale(0%) !important;
        transform: scale(1.02) !important;
        z-index: 10 !important;
    }
    
    /* Assicura che l'effetto sia visibile */
    .collage-image.grayscale-effect,
    .modular-module.grayscale-effect {
        filter: grayscale(100%);
        transition: filter 0.3s ease, transform 0.3s ease;
    }
}

/* Regole di debug per verificare che il CSS mobile sia caricato */
@media (max-width: 900px) {
    body::before {
        content: "MOBILE CSS LOADED - 900px";
        position: fixed;
        top: 0;
        left: 0;
        background: red;
        color: white;
        padding: 5px;
        z-index: 9999999;
        font-size: 12px;
        display: none; /* Nascondi in produzione */
    }
}

@media (max-width: 768px) {
    body::before {
        content: "MOBILE CSS LOADED - 768px";
        background: blue;
    }
}

@media (max-width: 480px) {
    body::before {
        content: "MOBILE CSS LOADED - 480px";
        background: green;
    }
}

/* ===== STILE UNIFORME PER TUTTI I TITOLI DEL TEMA ===== */
/* Applica lo stile elegante di category.php a tutti gli heading */

/* Stile globale per tutti gli heading */
h1, h2, h3, h4, h5, h6 {
    font-weight: 300 !important;
    color: #333 !important;
    line-height: 1.3 !important;
}

/* Stili specifici per ogni livello di heading */
h1 {
    font-size: 2.5em !important;
    margin: 0 0 20px 0 !important;
}

h2 {
    font-size: 2.2em !important;
    margin: 0 0 18px 0 !important;
}

h3 {
    font-size: 1.8em !important;
    margin: 0 0 16px 0 !important;
}

h4 {
    font-size: 1.5em !important;
    margin: 0 0 14px 0 !important;
}

h5 {
    font-size: 1.3em !important;
    margin: 0 0 12px 0 !important;
}

h6 {
    font-size: 1.1em !important;
    margin: 0 0 10px 0 !important;
}

/* Eccezioni per titoli speciali (mantengono il loro stile specifico) */

/* Stile uniforme per i link nei titoli */
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
    color: inherit !important;
    text-decoration: none !important;
    transition: color 0.3s ease !important;
}

h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover {
    color: #007cba !important;
}

/* SOLUZIONE DEFINITIVA: RIMUOVI TUTTE LE REGOLE CHE INTERFERISCONO CON I COLORI PERSONALIZZATI */
/* WordPress gestisce completamente i colori personalizzati senza interferenze del tema */