@layer base,components, effects, override;

.modal-body-master {
    line-height: 27px;
}

#searchModal .modal-body,
#loginModal .modal-body {
    padding: 2px 20px;
}

#searchModal .modal-body {
    padding: 8px 20px;
}
.tooltip-inner {
    background-color: #d21317; /* Red background */
    color: #fff; /* White text */
}

@layer components {
    /* === TOP BAR === */
    .top-bar {
        position: sticky;
        top: 0;
        background: rgba(var(--accent-rgb), var(--alpha));
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        color: var(--text-light);
        height: var(--bar-height);
        z-index: 1000;
        transition: transform 0.35s ease, opacity 0.35s ease;
        opacity: 1;
    }

        .top-bar .wrap {
            display: grid;
            grid-template-columns: auto 1fr auto;
            align-items: center;
            max-width: var(--max-width);
            margin: 0 auto;
            padding: 0 var(--gap);
            height: 100%;
            padding-left: 0.6rem !important;
            padding-right: 0.3rem !important;
        }

    .top-left {
        display: flex;
        align-items: center;
        gap: 1rem;
        gap: 0 !important;
    }

    .top-middle {
        flex: 0 1 auto;
        display: flex;
        justify-content: center;
    }

    .top-links {
        display: flex;
        align-items: center;
    }

        .top-links a {
            color: inherit;
            text-decoration: none;
            text-transform: uppercase;
            font-size: 1rem;
            white-space: nowrap;
            padding: 0 0.6rem;
            position: relative;
        }

            .top-links a:not(:last-child)::after {
                content: "|";
                position: absolute;
                right: 0;
                color: rgba(255, 255, 255, 0.5);
            }

    .top-actions {
        display: flex;
        align-items: center;
        margin-left: auto; /* ⇠ spinge l’intero blocco a destra */
        gap: 0 !important;
    }

        .top-actions a {
            color: inherit;
            text-decoration: none;
            text-transform: uppercase;
            font-size: 1rem;
            display: flex;
            align-items: center;
            gap: 0.5rem;
            white-space: nowrap;
            padding: 0 0.9rem;
            position: relative;
        }

            .top-actions a:not(:last-child)::after {
                content: "|";
                position: absolute;
                right: 0;
                color: rgba(255, 255, 255, 0.5);
            }

    .top-user {
        width: var(--left-width);
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }

        .top-user a {
            color: inherit;
            text-decoration: none;
            font-size: 1rem;
            display: flex;
            align-items: center;
            gap: 0.3rem;
        }

    .top-separator,
    .divider {
        display: none !important;
    }

    .top-links a::before,
    .top-actions a::before {
        content: none !important;
    }
    /* === ICONS & LOGO === */
    .logo,
    .logo-sticky {
        width: var(--logo-size) !important;
        height: auto !important;
        max-height: none !important;
        max-width: 100% !important;
        object-fit: contain !important;
        display: block !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .icon-menu,
    .icon-search,
    .icon-user,
    .menu-sticky {
        width: 28px;
        height: 28px;
        display: block;
    }

    .icon-search {
        width: 28px;
    }

    /* === MENU LABEL & SEPARATOR === */
    .menu-label {
        font-size: 1rem;
        text-transform: uppercase;
        color: var(--text-light);
        line-height: 1;
    }

    .top-separator {
        color: rgba(255, 255, 255, 0.5);
        font-size: 1.2rem;
        padding: 0 0.4rem;
        display: inline-block;
    }
    /* ========= 1 · Separatore fuori dal bottone nella TOP-BAR ========= */
    .top-actions a,
    .top-links a {
        position: relative; /* serve per posizionare il ::after */
    }

        .top-actions a:not(:last-child)::after,
        .top-links a:not(:last-child)::after {
            right: -0.45rem !important; /* -0,45 rem = metà gap: la | esce dal bordo */
            pointer-events: none !important; /* la | non è cliccabile */
        }

        /* compenso del padding destro: il testo resta alla stessa distanza visiva */
        .top-actions a:not(:last-child),
        .top-links a:not(:last-child) {
            padding-right: calc(0.9rem - 0.45rem) !important;
        }

    /* ========= 2 · Altezza uniforme 42 px per i “pulsanti” ombreggiati ========= */
    .top-actions a,
    .cat-actions a,
    .top-links a,
    .categories a {
        height: var(--button-height) !important; /* 42 px */
        line-height: var(--button-height) !important; /* centra il testo */
    }

        /* spazio reale tra i bottoni: 2 × 0.6 rem = 1.2 rem complessivi */
        .top-links a + a,
        .top-actions a + a {
            margin-left: calc(2 * var(--sep-gap));
        }

        /* il primo link non deve avere margin-left */
        .top-links a:first-child,
        .top-actions a:first-child {
            margin-left: 0;
        }

    /* i link devono essere il riferimento per ::before */
    .top-links a,
    .top-actions a {
        position: relative !important;
    }

    /* ======== Altezza uniforme 42 px per tutti i pulsanti ombreggiati ======== */
    .top-actions a,
    .cat-actions a,
    .top-links a,
    .categories a {
        height: var(--button-height) !important; /* 42 px */
        line-height: var(--button-height) !important; /* centra testo/icona */
        display: inline-flex;
        align-items: center; /* garantisce centratura */
    }

        /* === TOP-BAR · separatori definitivamente fuori dal pulsante (mag 2025) === */

        /* azzera ogni vecchio separatore */
        .top-links a::after,
        .top-actions a::after {
            content: none !important;
        }

        /* nuovo separatore ─ si disegna sul link successivo */
        .top-links a + a::before,
        .top-actions a + a::before {
            content: "|";
            position: absolute;
            left: -1.1rem; /* 0.9 rem (gap) + 0.2 rem di sicurezza */
            top: 50%;
            transform: translateY(-50%);
            color: rgba(255, 255, 255, 0.5);
            font-weight: 400;
            z-index: 5; /* > 0 ⇒ sopra l’ombra box-shadow */
            pointer-events: none;
        }

    /* mantieni il link punto di riferimento e il giusto spazio fra bottoni */
    .top-links a,
    .top-actions a {
        position: relative !important;
        margin-left: 0; /* reset */
        padding-left: 0.9rem !important;
        padding-right: 0.9rem !important;
    }

        /* aggiungi uno spazio (solo visuale) fra i bottoni */
        .top-links a + a,
        .top-actions a + a {
            margin-left: 0.4rem;
        }
    /*  = 0.9 + 0.3  */
    /* ===== TOP-BAR · divisori visibili e gap più stretto (mag 2025) ===== */

    /* 1 · Layout dei gruppi */
    .top-links,
    .top-actions {
        display: flex; /* layout a riga */
        column-gap: 0.4rem; /* distanza netta fra i bordi dei pulsanti */
    }

        /* 2 · Reset padding interno del link (resta 0.6 rem per lato) */
        .top-links a,
        .top-actions a {
            padding: 0 0.4rem !important;
            position: relative !important; /* ancoraggio per il divisore */
        }

            /* 3 · Divisore “|” fuori dal rettangolo rosso
   (si disegna PRIMA di ogni link tranne il primo) */
            .top-links a:not(:first-child)::before,
            .top-actions a:not(:first-child)::before {
                content: "|";
                position: absolute;
                left: -0.4rem; /* metà del column-gap (0.8 rem) */
                top: 50%;
                transform: translateY(-50%);
                color: rgba(255, 255, 255, 0.5);
                pointer-events: none; /* non cliccabile */
                z-index: 5; /* sopra al box-shadow del pulsante */
            }

    /* Rende in grassetto tutte le scritte nella top-bar */
    .top-bar * {
        font-weight: bold;
    }

    @media (max-width: 1150px) {
        .top-bar {
            display: none !important;
        }
    }

    /* RIMOSSE REGOLE HOVER/ACTIVE SPOSTATE IN buttons-over.css */
    /* === TOP-BAR BUTTONS UNIFICATI === */
    .top-bar .top-btn {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        height: var(--button-height);
        padding: 0 1.1rem;
        border-radius: 8px;
        background: transparent;
        color: var(--text-light) !important;
        text-decoration: none;
        font-size: 1rem;
        font-weight: bold;
        text-transform: uppercase;
        position: relative;
        transition: background 0.18s, color 0.18s, box-shadow 0.18s;
        box-sizing: border-box;
        cursor: pointer;
    }

        .top-bar .top-btn:focus {
            outline: 2px solid var(--accent-color, #e60044);
            outline-offset: 2px;
        }

        .top-bar .top-btn:hover,
        .top-bar .top-btn:active {
            background: rgba(255,255,255,0.13) !important;
            color: var(--text-light) !important;
            box-shadow: 0 2px 12px rgba(0,0,0,0.10) !important;
        }

    .cat-left .top-btn:hover,
    .cat-bar.sticky .menu-sticky:hover {
        background: rgba(255, 255, 255, 0.13) !important;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.10) !important;
    }

    .top-bar .top-btn img {
        width: 28px;
        height: 28px;
        display: inline-block;
        object-fit: contain;
        margin: 0;
        padding: 0;
    }

    .top-bar .logo-menu-btn img.logo {
        margin-left: 0.5rem;
    }

    .top-bar .top-btn span {
        display: inline-block;
        vertical-align: middle;
        font-size: 1rem;
        font-weight: bold;
        letter-spacing: 0.01em;
    }

    /* Allinea i gruppi e previeni overflow */
    .top-bar .top-left,
    .top-bar .top-middle,
    .top-bar .top-actions {
        align-items: center;
        display: flex;
        flex-wrap: nowrap;
    }

    .top-bar .top-middle {
        justify-content: center;
        flex: 1 1 auto;
        min-width: 0;
    }

    .top-bar .top-actions {
        margin-left: auto;
        gap: 0.4rem;
    }

    .top-bar .top-links {
        gap: 0.4rem;
    }

    /* Rimuovi ombre e background doppi su icone interne */
    .top-bar .top-btn img:hover,
    .top-bar .top-btn img:active {
        background: none !important;
        box-shadow: none !important;
    }

    /* Assicura che tutto resti dentro il wrap */
    .top-bar .wrap {
        overflow: visible;
    }

    /* === LOGO E MENU BUTTONS: larghezza e padding ridotti === */
    .top-bar .logo-btn,
    .top-bar .menu-btn,
    .cat-left .logo-btn {
        width: 42px;
        min-width: 0;
        max-width: 42px;
        height: 42px;
        padding: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        background: transparent;
        margin-right: 0.5rem !important;
    }

        .top-bar .logo-btn img.logo,
        .top-bar .menu-btn img.icon-menu {
            width: 28px;
            height: 28px;
            margin: 0;
            padding: 0;
            object-fit: contain;
            display: inline-block;
        }

    @media (max-width: 900px) {
        .top-bar .logo-btn,
        .top-bar .menu-btn {
            width: 32px;
            max-width: 32px;
            height: 32px;
        }

            .top-bar .logo-btn img.logo,
            .top-bar .menu-btn img.icon-menu {
                width: 22px;
                height: 22px;
            }
    }

    /* === MINI TOP === */
    .mini-top {
        display: none;
        position: sticky;
        top: 0;
        width: 100%;
        background: rgba(var(--accent-rgb), var(--alpha));
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        color: var(--text-light);
        height: var(--bar-height);
        z-index: 1000;
        transition: transform 0.35s ease, opacity 0.35s ease;
        opacity: 1;
        align-items: center;
        justify-content: space-between;
        font-weight: bold;
        box-shadow: 0 2px 8px rgba(0,0,0,0.05);
        padding: 0 1rem;
    }

    /* RIMUOVI padding dal contenitore .mini-top (wrap) per evitare offset */
    .mini-top {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

        /* Applica padding solo al .wrap, come nella top-bar */
        .mini-top .wrap {
            padding-left: 1rem !important;
            padding-right: 0.3rem !important;
            /* nessun gap extra */
            gap: 0 !important;
        }

        /* Layout interno: sinistra, centro, destra */
        .mini-top .top-left,
        .mini-top .top-center,
        .mini-top .top-right {
            display: flex;
            align-items: center;
        }

        /* Allinea la top-left senza gap extra */
        .mini-top .top-left {
            gap: 0 !important;
        }

        /* Centro allineato */
        .mini-top .top-center {
            flex: 1;
            justify-content: center;
            text-align: center;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        /* Link stile top-bar */
        .mini-top a {
            color: inherit;
            text-decoration: none;
            text-transform: uppercase;
            font-size: 1rem;
            white-space: nowrap;
            padding: 0 0.4rem;
            position: relative;
            height: var(--button-height);
            line-height: var(--button-height);
            display: inline-flex;
            align-items: center;
            font-weight: bold;
        }

            /* Separatore tra link */
            .mini-top a:not(:first-child)::before {
                content: "|";
                position: absolute;
                left: -0.4rem;
                top: 50%;
                transform: translateY(-50%);
                color: rgba(255,255,255,0.5);
                pointer-events: none;
                z-index: 5;
            }

        /* Icone e logo */
        .mini-top .logo {
            width: var(--logo-size);
            height: auto;
            max-width: 100%;
            object-fit: contain;
            display: block;
            padding: 0;
            margin: 0;
        }

        .mini-top .icon-menu,
        .mini-top .icon-search,
        .mini-top .icon-user {
            width: 28px;
            height: 28px;
            display: block;
        }

    /* Responsive: mostra mini-top sotto i 1150px */
    @media (max-width: 1150px) {
        .mini-top {
            display: flex !important;
        }
    }

    /* Nascondi mini-top sopra i 1150px */
    @media (min-width: 1151px) {
        .mini-top {
            display: none !important;
        }
    }

    .mini-top .icon-menu,
    .mini-top img.icon-menu {
        display: inline-block !important;
        width: 32px !important;
        height: 32px !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        object-fit: contain;
    }

    .top-bar.hidden-top {
        display: none !important;
    }

    /* Nasconde i separatori "|" nella mini-top */
    .mini-top .top-separator,
    .mini-top .divider {
        display: none !important;
    }

    /* Se usi i separatori come ::before nei link, nascondili così: */
    .mini-top a::before {
        content: none !important;
    }

    .mini-top .top-right {
        flex: 0 1 auto;
        min-width: 0;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 1rem !important; /* distanza tra lente e user */
        padding-right: 1rem !important; /* distanza dal bordo destro */
    }

    /* MINI-TOP: Effetti hover/active coerenti con top-bar, ma box-shadow scalato e contenuto nel wrap */
    .mini-top .mini-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        height: 38px;
        min-width: 0;
        max-width: 100%;
        padding: 0 1.1rem;
        border-radius: 8px;
        background: transparent;
        color: var(--text-light) !important;
        text-decoration: none;
        font-size: 1rem;
        font-weight: bold;
        text-transform: uppercase;
        position: relative;
        transition: background 0.18s, color 0.18s, box-shadow 0.18s;
        box-sizing: border-box;
        cursor: pointer;
        overflow: hidden;
    }

    /* Elimina gap/margin/padding residui su .mini-btn se presenti */
    .mini-top .mini-btn {
        margin: 0 !important;
        padding: 0 !important;
    }

        .mini-top .mini-btn.logo-btn,
        .mini-top .mini-btn.menu-btn {
            padding: 0 0.3rem;
            width: auto;
            min-width: 0;
            height: 38px;
            justify-content: center;
            border-radius: 8px;
            background: transparent;
            position: relative;
            z-index: 1;
        }

        .mini-top .mini-btn.menu-btn {
            /* Elimina larghezza eccessiva */
            max-width: 38px;
            min-width: 0;
        }

        .mini-top .mini-btn img {
            width: 28px;
            height: 28px;
            display: inline-block;
            object-fit: contain;
            margin: 0;
            padding: 0;
        }

        .mini-top .mini-btn.logo-btn img.logo,
        .mini-top .mini-btn.menu-btn img.icon-menu {
            width: 28px;
            height: 28px;
            margin: 0;
        }

    @media (max-width: 900px) {
        .mini-top .mini-btn {
            height: 32px;
            font-size: 0.95rem;
            padding: 0 0.7rem;
        }

            .mini-top .mini-btn.logo-btn,
            .mini-top .mini-btn.menu-btn {
                height: 32px;
                padding: 0 0.15rem;
                max-width: 32px;
            }

            .mini-top .mini-btn img {
                width: 22px;
                height: 22px;
            }

            .mini-top .mini-btn.logo-btn img.logo,
            .mini-top .mini-btn.menu-btn img.icon-menu {
                width: 22px;
                height: 22px;
            }
    }

    .mini-top .wrap {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        min-width: 0;
        overflow: hidden;
        padding-left: 1rem !important;
        padding-right: 0.3rem !important;
    }

    .mini-top .top-left {
        flex: 0 1 auto;
        min-width: 0;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 0.2rem;
    }

    .mini-top .top-center {
        flex: 1 1 0%;
        min-width: 0;
        display: flex;
        justify-content: center;
        overflow: hidden;
    }

    .mini-top .top-right {
        flex: 0 1 auto;
        min-width: 0;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 1rem !important; /* distanza tra lente e user */
        padding-right: 1rem !important; /* distanza dal bordo destro */
    }
    /* Bottoni mini-btn: padding e font-size scalano con viewport */
    .mini-top .mini-btn {
        padding: 0 0.7rem;
        font-size: clamp(0.85rem, 2vw, 1rem);
        height: clamp(28px, 5vw, 34px);
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
        overflow: hidden;
        border-radius: 8px;
    }

        .mini-top .mini-btn.logo-btn img.logo,
        .mini-top .mini-btn.menu-btn img.icon-menu {
            width: 28px;
            height: 28px;
        }

    @media (max-width: 900px) {
        .mini-top .wrap {
            gap: 0.2rem;
            padding: 0 2px;
        }

        .mini-top .mini-btn {
            padding: 0 0.3rem;
            font-size: 0.92rem;
            height: 28px;
            min-width: 0;
            max-width: 100%;
        }

            .mini-top .mini-btn.logo-btn img.logo,
            .mini-top .mini-btn.menu-btn img.icon-menu {
                width: 22px;
                height: 22px;
            }
    }

    .mini-top .wrap {
        overflow: hidden;
    }

    /* Logo: nessun margin/padding extra */
    .mini-top .top-left .logo {
        margin-left: 0 !important;
        padding-left: 0 !important;
    }

    /* Menu: nessun margin extra, solo tra logo e menu */
    .mini-top .top-left .icon-menu {
        margin-left: 0 !important;
    }

    /* Fix: il bottone menu-btn era traslato a sinistra perché la regola .mini-top .top-left .icon-menu { margin-left: 0.5rem !important; } si applicava anche all'icona dentro il bottone, non solo tra i bottoni. Serve spostare il margin-right sul bottone, non sull'icona. */

    /* Applica margin-left solo al bottone menu-btn rispetto al logo-btn */
    .mini-top .mini-btn.menu-btn {
        margin-left: 0.6rem !important;
    }

    .mini-top .top-center .top-links {
        display: flex;
        align-items: center;
        gap: 0.55rem !important; /* distanza più equilibrata tra le categorie */
    }

        .mini-top .top-center .top-links a {
            padding: 0 0.85rem !important; /* pulsante meno largo */
            min-width: 2rem;
            font-size: clamp(0.93rem, 1.7vw, 1.04rem);
            height: clamp(28px, 4vw, 34px);
            border-radius: 8px;
            transition: padding 0.2s, font-size 0.2s, height 0.2s;
        }

    @media (max-width: 900px) {
        .mini-top .top-center .top-links {
            gap: 0.38rem !important;
        }

            .mini-top .top-center .top-links a {
                padding: 0 0.45rem !important;
                font-size: clamp(0.85rem, 2.5vw, 0.95rem);
                height: clamp(22px, 6vw, 28px);
            }
    }

    @media (max-width: 800px) {
        .mini-top .top-center .top-links a {
            padding: 0 0.32rem !important;
            font-size: clamp(0.81rem, 2vw, 0.91rem);
            height: clamp(20px, 7vw, 25px);
        }
    }

    /* =============================================================
   CATEGORY BAR – CLEANED & CONSOLIDATED (May 2025)
   – ridondanze eliminate, override uniformati, cascata ricostruita
   – ogni commento mantiene il contesto originale
   – mantiene ~tutte le dichiarazioni utili senza tagli drastici
   ============================================================= */

    /* === BASE LAYOUT ================================================= */
    .cat-bar {
        --alpha: 0.92; /* trasparenza sticky – personalizzabile */

        position: relative;
        height: var(--bar-height);
        /*color: var(--text-dark);*/
        background: transparent; /* sfondo trasparente fuori dal wrapper */

        display: flex;
        justify-content: center;
        overflow: visible !important;
    }

        .cat-bar > .wrap {
            position: relative; /* necessario per ancorare .cat-left e .cat-actions dentro il wrap */
            /* layout */
            display: flex;
            align-items: center;
            justify-content: center; /* centrato come nel file originale */ /* meglio di center per gestire gap */

            height: 100%;
            max-width: var(--max-width);
            width: 100%;
            margin: 0 auto;
            padding: 0 var(--gap);
            gap: 1rem;
            /* estetica */
            background: var(--cat-bg);
            border-top: 1px solid #ddd;
            border-radius: 9px; /* leggero arrotondamento */
            overflow: hidden; /* segue il bordo arrotondato */
            padding-left: 0.6rem !important;
            padding-right: 0.3rem !important;
        }

            /* disabilita i side‑scroll glitch su dispositivi touch */
            .cat-bar > .wrap,
            .cat-bar > .wrap * {
                overscroll-behavior-y: none !important;
                touch-action: pan-x !important;
                -ms-touch-action: pan-x !important;
            }

    /* === COLONNA SINISTRA (logo + hamburger) ========================= */
    .cat-left {
        position: absolute;
        top: 0;
        left: var(--gap);
        height: 100%;
        display: flex;
        align-items: center;
        gap: 0.9rem;
        padding-left: 0 !important;
        min-width: 0;
        z-index: 2;
    }

    /* Hamburger icon (desktop hidden, sticky visibile) */
    .icon-menu.menu-trigger,
    .menu-sticky.menu-trigger {
        display: none !important; /* default: nascosto */
        height: 2.1rem;
        align-items: center;
        justify-content: center;
        position: relative;
        margin-right: 0.7rem;
    }

    /* === COLONNA DESTRA (icone azione) =============================== */
    .cat-actions {
        position: absolute;
        top: 0;
        right: var(--gap);
        height: 100%;
        display: none; /* visibile solo in sticky */
        align-items: center;
        gap: 0.4rem; /* gap ridotto tra le icone per sticky */
        width: auto !important;
        padding-right: var(--gap);
    }

        .cat-actions a {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            height: var(--button-height);
            line-height: var(--button-height);
            gap: 0.4rem;
            padding: 0 0.7rem;
            border-radius: 6px;
            text-decoration: none;
            transition: box-shadow 0.2s ease, transform 0.1s ease;
        }

            /* rimuove extra‑padding per l’ultima icona (user) */
            .cat-actions a:last-child {
                padding-right: 0 !important;
            }

            .cat-actions a:first-child {
                padding-left: 0.4rem !important;
            }

    /* === CATEGORIES SCROLLER ======================================== */
    .categories-wrapper {
        display: flex;
        align-items: center;
        flex: 1;
        position: relative;
        overflow: hidden;
    }

    .categories {
        flex: 1;
        display: flex !important;
        align-items: center;
        justify-content: center; /* centra le voci all’interno della categoria */
        flex-wrap: nowrap;
        gap: 1rem;
        /* overflow-x: auto;*/
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* IE */
        padding-right: 2rem; /* spazio overflow dots */
    }

        .categories::-webkit-scrollbar {
            display: none;
        }

        

    .divider {
        opacity: 0.4;
    }

    /* overflow indicator (ellipsis ⇢)*/
    .cat-overflow-indicator {
        position: absolute;
        right: 0;
        top: 0;
        height: 100%;
        width: 2rem;
        display: none;
        align-items: center;
        justify-content: center;
        font-size: 1.8rem;
        font-weight: bold;
        background: linear-gradient(to right, transparent, rgba(255,255,255,0.8));
        color: rgba(0,0,0,0.4);
        pointer-events: none;
    }

    /* === STICKY STATE =============================================== */
    .cat-bar.sticky {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        background: rgba(var(--accent-rgb), var(--alpha)) !important;
        color: var(--text-light);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        box-shadow: 0 2px 4px rgba(0,0,0,0.12);
        z-index: 999;
    }

        .cat-bar.sticky > .wrap {
            background: transparent;
            border-top: none;
            overflow: visible !important; /* PATCH: sticky progress bar visibile fuori dal wrap */
        }

        /* fade edges in sticky */
        .cat-bar.sticky .categories {
            -webkit-mask-image: linear-gradient(to right, transparent 0, black 3.4rem, black 85%, transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, black 3.4rem, black 85%, transparent 100%);
            mask-repeat: no-repeat;
            -webkit-mask-repeat: no-repeat;
        }

            /* colori testo icone/categorie */
            .cat-bar.sticky .categories a,
            .cat-bar.sticky .divider {
                color: var(--text-light);
            }

        /* mostra icone azione & hamburger */
        .cat-bar.sticky .cat-actions {
            display: flex;
        }

        .cat-bar.sticky .menu-sticky, /* per vecchie markup */
        .cat-bar.sticky .icon-menu.menu-trigger {
            display: flex !important;
            pointer-events: auto !important;
            opacity: 1 !important;
            visibility: visible !important;
            width: 28px !important;
            height: 28px !important;
            background: none !important;
            z-index: 1002 !important; /* sopra fade */
            cursor: pointer !important;
        }

    /* mostra logo ridotto e nasconde quello grande */
    .cat-bar:not(.sticky) .logo-sticky {
        display: none !important;
    }

    /*.cat-bar.sticky .cat-left img {
        display: none !important;
    }*/

    .cat-bar.sticky .logo-sticky,
    .cat-bar.sticky .menu-sticky.menu-trigger {
        display: flex !important;
        align-items: center;
    }

    /* Ensure pointer cursor for sticky logo */
    .cat-bar.sticky .logo-sticky {
        cursor: pointer !important;
    }

        .cat-bar.sticky .logo-sticky:hover {
            filter: brightness(1.15);
        }

        /* Abbassa logo e menu come gli altri su hover */
        .cat-bar.sticky .logo-sticky:hover,
        .cat-bar.sticky .menu-sticky.menu-trigger:hover,
        .cat-bar.sticky .icon-menu.menu-trigger:hover {
            transform: translateY(2px) !important;
            filter: brightness(1.15);
        }


    /* Sticky bar: effetto hover bottone logo come top-bar (rimpicciolisci solo il contenitore, non l'immagine) */
    .cat-bar.sticky .logo-sticky {
        transition: box-shadow 0.2s, transform 0.13s, filter 0.13s;
    }

        .cat-bar.sticky .logo-sticky:hover {
            /*box-shadow: 0 2px 12px rgba(0,0,0,0.10);
            background: rgba(255,255,255,0.13);
            filter: brightness(1.15);
            background: rgba(255, 255, 255, 0.13) !important;*/
            color: var(--text-light) !important;
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.10) !important;
            /* NON usare scale qui! */
        }

    /* overflow dots colore in sticky */
    .cat-bar.sticky .cat-overflow-indicator {
        background: linear-gradient(to right, transparent, rgba(210,19,23,0.5));
        color: #fff;
    }

    /* === TRANSITION TOP‑BAR (se usata con .top-bar) ================== */
    .top-bar {
        transition: transform 0.4s ease, opacity 0.4s ease;
    }

    .hidden-top {
        transform: translateY(-100%);
        opacity: 0;
    }

    /* === RESPONSIVE (≤900 px) ======================================= */
    @media (max-width: 900px) {
        .cat-left {
            gap: 0.5rem;
        }

            .cat-left .logo {
                max-width: 1.7rem;
                min-width: 1.2rem;
                width: 1.7rem;
            }

            .cat-left .icon-menu.menu-trigger,
            .cat-left .menu-sticky.menu-trigger {
                width: 1.7rem;
                height: 1.7rem;
                margin-right: 0.1rem;
                margin-left: 0.1rem;
            }
    }

    /* === UTILITY ===================================================== */
    /* forza cliccabilità menu-sticky (patch anti-overlay) */
    .cat-bar.sticky .categories::before,
    .cat-bar.sticky .categories::after {
        pointer-events: none !important;
    }

    /* nasconde top‑separator ovunque */
    .cat-bar .top-separator {
        display: none !important;
    }

    /* === LOGO VISIBILITY PATCH (definitivo) === */
    /* Nasconde logo in modalità non-sticky */
    .cat-bar:not(.sticky) .logo-btn-sticky {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
    }

    .cat-bar.sticky .logo-btn-sticky {
        display: flex !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* Mostra logo solo in sticky */
    .cat-bar.sticky .logo-sticky {
        display: inline-block !important;
        opacity: 1 !important;
        visibility: visible !important;
        height: auto;
        max-width: 2.2rem;
        width: 2.2rem;
        margin-right: 0.2rem;
    }

    /* Sticky bar: solo 1rem a sinistra tra logo e bordo/wrap */
    .cat-bar.sticky .cat-left {
        left: 0.6rem !important;
        padding-left: 0 !important;
    }

    .icona-menu-sticky {
        padding-left: 4px !important;
    }

    /* Sticky bar: gap tra logo e menu 0.6rem */
    .cat-bar.sticky .cat-left {
        gap: 0.2rem !important;
    }

    .cat-bar.sticky > .wrap {
        padding-left: 0 !important;
    }

    .cat-bar.sticky .logo-sticky {
        margin-left: 0rem !important;
    }

    /* === PROGRESS BAR === */

    .scroll-progress-bar {
        height: 3px;
        width: 100%;
        background-color: #eee;
        position: fixed;
        top: calc(var(--bar-height) * 2); /* o “104px” se hai due barre sticky */
        left: 0;
        z-index: 1001;
    }

    .scroll-progress {
        height: 100%;
        width: 0%;
        background-color: var(--accent-color);
        transition: width 0.2s ease-out, background-color 0.2s ease-in-out;
    }

    /* cambia colore quando c’è già una barra sticky sopra */
    .cat-bar.sticky ~ .scroll-progress-bar .scroll-progress {
        background-color: #fff;
    }

    /* === BARRA DI LETTURA PROGRESSIVA CENTRATA === */
    /* sotto la cat-bar non-sticky */
    .cat-bar .progress-container {
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 100%;
        display: flex;
        justify-content: center;
        pointer-events: none;
        z-index: 10;
    }

        .cat-bar .progress-container .scroll-progress {
            height: 5px;
            width: 100vw;
            background-color: var(--accent-color);
            transition: width 0.2s ease-out, background-color 0.3s ease;
            margin: 0 auto;
        }

    /* quando la cat-bar diventa sticky */
    .cat-bar.sticky .progress-container {
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 100%;
        display: flex;
        justify-content: center;
        z-index: 1001;
    }

        .cat-bar.sticky .progress-container .scroll-progress {
            background-color: white;
            width: 100vw;
            margin: 0 auto;
        }

    /* === BARRA DI LETTURA PROGRESSIVA CENTRATA E FUSA CORRETTAMENTE === */

    /* Posizionata sotto la cat-bar rosa (non sticky) */
    .cat-bar .progress-container {
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 100%;
        display: flex;
        justify-content: center;
        pointer-events: none;
        z-index: 10;
    }

        .cat-bar .progress-container .scroll-progress {
            height: 5px;
            width: 0%;
            width: 100vw;
            background-color: var(--accent-color);
            transition: width 0.2s ease-out, background-color 0.3s ease;
            margin: 0 auto;
            border-radius: 0 0 4px 4px;
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 100%;
            display: flex;
            justify-content: center;
            pointer-events: none;
            z-index: 10;
        }

    /* Quando sticky: barra bianca FUSA nel bordo INFERIORE INTERNO dello sticky */
    .cat-bar.sticky .progress-container {
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 100%;
        display: flex;
        justify-content: center;
        z-index: 1001;
    }

        .cat-bar.sticky .progress-container .scroll-progress {
            background-color: white;
            width: 100vw;
            margin: 0 auto;
            border-radius: 0 0 4px 4px;
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 100%;
            display: flex;
            justify-content: center;
            pointer-events: none;
            z-index: 10;
        }

    /* Mini sticky progress bar */
    .mini-progress-container {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 4px;
        background: transparent;
        z-index: 2;
        pointer-events: none;
    }

    .mini-scroll-progress {
        height: 100%;
        width: 0%;
        background: var(--accent-color, #e60044);
        transition: width 0.2s;
        border-radius: 0 0 4px 4px;
    }
    /* Riduci l'altezza della progress bar categoria sotto i 1000px */
    @media (max-width: 1000px) and (min-width: 701px) {
        .cat-bar:not(.sticky) .progress-container .scroll-progress {
            height: 3px !important;
            min-height: 3px !important;
            max-height: 3px !important;
        }
    }

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


    /* === DRAWER MENU === */
    .side-menu {
        position: fixed;
        top: var(--bar-height);
        left: 0;
        width: var(--drawer-w) !important;
        height: calc(100vh - var(--bar-height));
        background: rgba(var(--accent-rgb), var(--alpha));
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        color: var(--text-light);
        padding: calc(1.2rem * var(--scale)) calc(1rem * var(--scale)) 0.8rem !important;
        display: flex !important;
        flex-direction: column;
        transform: translateX(-100%);
        transition: transform 0.35s ease;
        z-index: 1500;
    }

    .side-footer {
        margin-top: auto;
        display: flex !important;
        justify-content: center; /* o space-around / space-evenly */
        align-items: center; /* centri verticalmente */
        padding-block: calc(1rem * var(--scale)); /* top e bottom uguali */
        padding-inline: calc(1rem * var(--scale)); /* left e right */
        border-top: 1px solid rgba(255,255,255,0.12);
    }

        .side-footer img {
            width: 24px;
            height: 24px;
            display: block; /* evita il baseline-shift tipico di <img> inline */
            margin: 0; /* azzera eventuali margini */
        }


    .side-scroll-area {
        flex: 1 1 auto;
        overflow-y: auto !important;
        max-height: 100vh;
        min-height: 0;
        -webkit-overflow-scrolling: touch;
    }

    .side-menu.open {
        transform: translateX(0);
    }

    .close-btn {
        background: none;
        border: none;
        color: var(--text-light);
        font-size: 2rem;
        line-height: 1;
        align-self: flex-end;
        cursor: pointer;
    }

    /* Effetto grafico coerente per la X di chiusura anche nel drawer menu */
    .side-menu .close-btn {
        color: #fff !important;
        font-size: 1.45rem !important;
        line-height: 1;
        background: none;
        border: none;
        cursor: pointer;
        transition: color 0.18s, transform 0.18s;
        z-index: 2;
        padding: 0.2rem;
    }

        .side-menu .close-btn:hover {
            color: #fff !important; /* resta bianca anche in hover */
            transform: scale(1.13) rotate(8deg);
        }

    .side-nav {
        display: flex !important;
        flex-direction: column;
        gap: 0.6rem;
    }

        .side-nav a,
        .side-item.has-sub,
        .sub-nav a {
            color: var(--text-light) !important;
            display: block;
            text-decoration: none;
            font-size: calc(1rem * var(--scale)) !important;
            font-weight: 600;
            padding: calc(0.5rem * var(--scale)) calc(0.2rem * var(--scale)) !important;
            border-radius: 6px;
            transition: background-color 0.25s;
        }

    .sub-nav a {
        /* Stesse regole del menu principale, inclusa la dimensione */
        color: var(--text-light);
        font-size: calc(1.03rem * var(--scale)) !important;
        font-weight: 600;
        border-radius: 6px;
        transition: background-color 0.25s;
        text-decoration: none;
        display: flex;
        align-items: center;
        min-height: 36px;
        padding: calc(0.5rem * var(--scale)) calc(0.2rem * var(--scale)) !important;
        box-sizing: border-box;
    }

        .side-nav a:hover,
        .sub-nav a:hover {
            background: rgba(255, 255, 255, 0.18) !important;
            text-decoration: none;
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
            transition: box-shadow 0.4s ease, transform 0.1s ease;
            cursor: pointer;
            border-radius: 6px;
            transform: translateY(2px);
        }

    .side-footer {
        margin-top: auto; /* rimane in fondo al drawer */
        display: flex !important;
        justify-content: center; /* o space-evenly / space-around, a seconda di come vuoi distribuire gli icon */
        align-items: center; /* centra verticalmente le img */
        gap: 0.8rem;
        padding: 1rem !important; /* padding simmetrico top/bottom per non sbilanciare il centering */
        border-top: 1px solid rgba(255, 255, 255, 0.12);
    }


        .side-footer img {
            width: 24px;
            height: 24px;
        }

    .menu-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.45);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.35s ease;
        z-index: 1400;
    }

        .menu-overlay.active {
            opacity: 1;
            pointer-events: auto;
        }

    body.menu-open {
        overflow: hidden;
    }

    .side-item.has-sub {
        width: 100%;
        border: none;
        background: none;
        color: inherit;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font: inherit;
        padding: 0.5rem 0;
        cursor: pointer;
    }

    .side-item .arrow {
        font-size: 1.2rem;
    }


    .back-btn {
        background: none;
        border: none;
        font-size: 1.1rem !important;
        cursor: pointer !important;
        padding: 0.4rem 0 !important;
        color: #000;
        text-align: left;
    }

    .sub-title {
        margin: 0.4rem 0 1rem;
        font-size: calc(1.6rem * var(--scale)) !important;
    }

    .sub-nav {
        display: flex;
        flex-direction: column;
        gap: 0.4rem;
    }

    .sub-menu {
        pointer-events: none;
    }
        /* nessun click se nascosto */
        .sub-menu.open {
            pointer-events: auto;
        }
    /* riattivi quando è visibile */

    /* ==== SOTTO-MENU: un’unica dichiarazione pulita ==== */
    aside.sub-menu {
        position: fixed;
        top: var(--bar-height);
        left: var(--drawer-w);
        width: var(--drawer-w);
        height: calc(100vh - var(--bar-height));
        background: var(--cat-bg);
        color: var(--text-dark);
        padding: calc(1rem * var(--scale)) !important;
        display: flex !important;
        flex-direction: column !important;
        transform: translateX(100%);
        opacity: 0;
        visibility: hidden;
        transition: transform 0.35s ease, opacity 0.2s ease, visibility 0.2s step-end;
        z-index: 1550;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }

        /* Quando è aperto: */
        aside.sub-menu.open {
            transform: translateX(0);
            opacity: 1;
            visibility: visible;
            transition: transform 0.35s ease, opacity 0.2s ease 0.05s, visibility 0.2s step-start;
        }


    .side-nav a, /* link del menu rosso principale */
    .side-item.has-sub, /* pulsante “Sezioni ▸” */
    .sub-nav a /* link del sotto-menu bianco */ {
        font-weight: 700; /* = bold */
    }

    .sub-menu {
        background: var(--cat-bg); /* lo stesso rosa della barra categorie */
        color: var(--text-dark) !important; /* testo scuro, come sulla cat-bar */
    }


        .sub-menu a:hover {
            background: rgba(255, 255, 255, 0.18);
            text-decoration: none;
        }

        .sub-menu,
        .sub-menu.open {
            background: var(--cat-bg) !important; /* stesso colore della cat-bar */
        }

            .sub-menu .back-btn,
            .sub-menu .sub-title,
            .sub-menu a {
                color: var(--text-dark) !important;
                font-weight: 700 !important;
            }



    .side-header {
        display: flex;
        align-items: center;
        justify-content: space-between; /* logo a sinistra, X a destra */
        padding: 0 0 1.2rem; /* spaziatura sotto il header */
    }

    .side-logo {
        height: 50px; /* ridimensiona il logo */
        width: auto;
    }

    .close-btn {
        /* (resta com’era) */
        background: none;
        border: none;
        color: var(--text-light);
        font-size: 2rem;
        line-height: 1;
        cursor: pointer;
    }

    .side-nav {
        margin-top: 0;
    }

    .side-menu,
    .side-menu * {
        text-transform: uppercase !important;
    }

    .cat-bar.sticky .cat-left img.menu-sticky.menu-trigger {
        display: block !important;
    }

    @media (max-width: 500px) {
        aside.sub-menu {
            left: 0 !important;
            transform: translateX(0) !important;
            z-index: 1600 !important;
        }
    }

    .side-menu.open ~ aside.sub-menu {
        transform: translateX(0) !important;
        visibility: visible !important;
    }

    .cat-bar.sticky .logo-sticky {
        height: var(--logo-size) !important;
        width: auto !important;
        max-height: none !important;
    }



    aside.sub-menu {
        overflow-y: auto !important;
        max-height: 100vh !important;
        -webkit-overflow-scrolling: touch; /* per iOS */
    }

    /* ==== SCROLLBAR ELEGANTE E BIANCO nel drawer ==== */
    .side-menu,
    aside.sub-menu {
        /* Firefox */
        scrollbar-width: thin;
        scrollbar-color: rgba(255,255,255,0.8) transparent;
    }

        /* WebKit */
        .side-menu::-webkit-scrollbar,
        aside.sub-menu::-webkit-scrollbar {
            width: 4px; /* spessore più sottile */
        }

        .side-menu::-webkit-scrollbar-track,
        aside.sub-menu::-webkit-scrollbar-track {
            background: transparent; /* o un leggero semi-trasparente se vuoi */
        }

        .side-menu::-webkit-scrollbar-thumb,
        aside.sub-menu::-webkit-scrollbar-thumb {
            background-color: rgba(255,255,255,0.8);
            border-radius: 2px;
            border: 1px solid transparent; /* per un po’ di “respiro” attorno */
        }

            .side-menu::-webkit-scrollbar-thumb:hover,
            aside.sub-menu::-webkit-scrollbar-thumb:hover {
                background-color: rgba(255,255,255,1);
            }
    /* Porta in bianco le icone social */
    img[alt="Facebook"],
    img[alt="X"],
    img[alt="Instagram"],
    img[alt="Linkedin"],
    img[alt="Telegram"],
    img[alt="Youtube"],
    img[alt="Pinterest"],
    img[alt="Whatsapp"],
    img[alt="Rss"],
    img[alt="Pinterest"],.imgSbianca {
        /* filtro per rendere bianco qualsiasi immagine */
        filter: brightness(0) invert(1) !important;
    }

    .mini-categories-wrapper {
        -webkit-overflow-scrolling: touch;
        touch-action: pan-x;
    }

    @media (max-width: 768px) {
        .side-menu .side-item.has-sub .arrow,
        .side-item.has-sub .arrow {
            font-size: 1.35rem !important; /* forza la dimensione della freccia su mobile */
            width: 1.35rem !important; /* utile se la freccia è SVG o icona */
            height: 1.35rem !important;
            color: #fff !important;
            margin-left: auto !important;
            padding-right: 1.85rem !important;
            display: flex !important;
            align-self: center !important;
            line-height: 1 !important;
        }

        .side-item.has-sub {
            align-items: center !important;
        }
    }
    /* Debug: se la freccia non cambia, controlla che la classe .arrow sia effettivamente sull'elemento giusto e che non sia un'icona con dimensione fissa */

    /* Sposta la freccia e la X verso sinistra su desktop aumentando il padding destro */
    .side-item.has-sub .arrow {
        padding-right: 0.7rem !important;
    }

    .side-menu .close-btn {
        padding-right: 0.7rem !important;
    }




    /* Spaziatura tra i due nav anche su mobile */
    #subSections .sub-nav + .sub-title {
        margin-top: 2rem;
        display: block;
    }
    /* === MODALE RICERCA AVANZATA (POPUP CERCA) === */


    /* Unify close button style with login modal */
    /*.modal-close {
        position: absolute;
        top: 0.85rem;
        right: 0.85rem;
        font-size: 1.45rem !important;
        line-height: 1;
        background: none;
        border: none;
        color: #bbb !important;
        cursor: pointer;
        transition: color 0.18s, transform 0.18s;
        z-index: 2;
        padding: 0.2rem;
    }*/

    .modal-close:hover {
        color: #D21317 !important;
        transform: scale(1.13) rotate(8deg);
    }

    .search-form {
        display: grid;
        row-gap: 1.4rem;
        padding: 1rem 0;
    }

        .search-form label {
            font-weight: 700;
            margin-top: 0.6rem;
        }

        .input-lg,
        .search-form input[type="text"],
        .search-form select {
            width: 100%;
            font-size: calc(1.2rem * var(--scale));
            padding: calc(0.6rem * var(--scale)) calc(1rem * var(--scale));
            border: 2px solid #ccd1d4;
            border-radius: 4px;
        }

    .btn-primary,
    .btn-advanced {
        /*padding: calc(0.6rem * var(--scale)) calc(1.5rem * var(--scale)) !important;*/
       /* font-size: calc(1rem * var(--scale)) !important;*/
    }

    .btn-advanced {
        background: var(--accent-color);
        color: var(--text-light);
        border: none;
        padding: 0.9rem 1rem;
        font-size: 1rem;
        font-weight: 700;
        cursor: pointer;
        border-radius: 4px;
        margin-top: 1rem;
    }

        .btn-advanced:hover {
            opacity: 0.9;
        }

    .with-info-search,
    .info-icon {
        display: inline-block;
        vertical-align: middle;
    }


    .info-icon {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 1.2rem;
        height: 1.2rem;
        font-size: 0.85rem;
        font-weight: bold;
        color: #fff;
        background: var(--accent-color);
        border-radius: 50%;
        cursor: pointer;
    }

        .info-icon .tooltip {
            display: none;
            position: absolute;
            top: 125%;
            left: 50%;
            transform: translateX(-50%);
            width: 16rem;
            background: rgba(var(--accent-rgb), 0.97);
            color: #fff;
            font-size: 0.85rem;
            padding: 0.5rem 0.75rem;
            border-radius: 4px;
            line-height: 1.3;
            max-width: 14rem;
            z-index: 1000;
            white-space: normal;
        }

        .info-icon:hover .tooltip,
        .info-icon:focus .tooltip {
            display: block;
        }

    /* elimina ogni altro row-gap o margin che fosse stato ripetuto sopra */
    #searchModal .search-form *,
    #searchModal .search-row *,
    #searchModal .radio-group.spaced * {
        row-gap: unset !important;
        margin: unset !important;
        padding: unset !important;
    }



    /* === MODALE RICERCA AVANZATA ==================================== */
    /* Tutte le regole relative a .modal, .modal.open, .modal-dialog, .modal-close, .search-form, .input-lg, .btn-primary, .btn-advanced, .with-info-search, .info-icon, ecc. sono state estratte in modal-search.css */
    .modal-open .show {
        align-items: center;
        /*display: flex !important;*/
    }

    /* Unify close button style with login modal */
    .modal-close {
        position: absolute;
        top: 0rem;
        right: 0.85rem;
        font-size: 1.45rem !important;
        line-height: 1;
        background: none;
        border: none;
        color: #bbb !important;
        cursor: pointer;
        transition: color 0.18s, transform 0.18s;
        z-index: 2;
        padding: 0.2rem;
    }

        .modal-close:hover {
            color: #D21317 !important;
            transform: scale(1.13) rotate(8deg);
        }

    .search-form {
        display: grid;
        row-gap: 1.4rem;
    }

        .search-form label {
            font-weight: 700;
            margin-top: 0.6rem;
        }

        .input-lg,
        .search-form select,
        .search-form input[type="text"] {
            font-size: calc(1.2rem * var(--scale));
            padding: calc(0.6rem * var(--scale)) calc(1rem * var(--scale));
            border: 2px solid #ccd1d4;
            border-radius: 4px;
        }

    .btn-primary {
        background: #d21317 !important;
        color: #fff;
        border: none;
        padding: 0.9rem 2.2rem;
        font-size: 0.5rem;
        font-weight: 700;
        cursor: pointer;
        border-radius: 4px;
    }

        .btn-primary:hover {
            opacity: 0.9;
        }
    /* === Hint sotto il form principale, prima del pulsante “Ricerca Avanzata” === */
    #searchModal .search-hint {
        display: block; /* occupa tutta la larghezza disponibile */
        text-align: center; /* centra il testo */
        margin: 0.5rem 0 1.7rem 0; /* spazio sopra e sotto */
        font-size: 1rem; /* dimensione leggermente minore */
        color: #444; /* grigio scuro per leggibilità */
        line-height: 1.4; /* interlinea comoda */
        max-width: 350px;
    }

    /* --- FIX “sfarfallio” --------------------------------------------------
   Ombra al passaggio del mouse, affondo di soli 2 px.
   Metti questo snippet in coda al tuo foglio CSS.
----------------------------------------------------------------------- */



    /* (facoltativo) effetto “click” leggermente più marcato */
    a:active,
    button:active,
    .top-actions a:active,
    .top-links a:active,
    .cat-bar .categories a:active {
        transform: translateY(3px);
    }



    .input-lg,
    .search-form select,
    .search-form input[type="text"] {
        font-size: 1rem;
        padding: 0.6rem 0.8rem;
    }

    .btn-primary {
        padding: 0.6rem 1.5rem;
        font-size: 1rem;
    }

    .icon-animated {
        width: 145px; /* further enlarged from 126.5px */
        height: 145px;
        display: block;
        margin: 0 auto 1.1rem auto;
        transition: transform 0.7s cubic-bezier(.77,0,.18,1), opacity 0.5s;
    }

        .icon-animated.hover-effect {
            animation: fade-in-zoom-omino-modal 0.7s cubic-bezier(.77,0,.18,1);
            opacity: 1;
            filter: blur(0);
            transform: scale(1);
        }

    @keyframes fade-in-zoom-omino-modal {
        0% {
            opacity: 0;
            filter: blur(2px);
            transform: scale(0.92);
        }

        60% {
            opacity: 1;
            filter: blur(0.5px);
            transform: scale(1.03);
        }

        100% {
            opacity: 1;
            filter: blur(0);
            transform: scale(1);
        }
    }

    /* ——— Form di ricerca: spaziature e stili puliti ——— */
    .search-form {
        display: grid;
        row-gap: 1.4rem; /* gap standard tra righe */
        padding: 1rem 0;
    }

    .radio-group.spaced label {
        font-weight: normal;
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
    }

    /* etichetta “Filtra per sezione” più vicina al select */
    .search-form label[for="section"] {
        margin-bottom: 0.4rem;
    }

    /* nasconde “Filtra per regione” */
    #searchModal label[for="region"],
    #searchModal #region {
        display: none !important;
    }

    /* pulsanti: mantieni 100% width e spazio */
    .search-form .btn-primary,
    .search-form .btn-advanced {
        display: block;
        width: 100%;
        margin-top: 1rem;
    }

    /* aggiungi il pulsante Ricerca Avanzata se manca */
    .btn-advanced {
        background: var(--accent-color);
        color: var(--text-light);
        border: none;
        padding: 0.9rem 1rem;
        font-size: 1rem;
        font-weight: 700;
        cursor: pointer;
        border-radius: 4px;
        margin-top: 1rem;
    }

        .btn-advanced:hover {
            opacity: 0.9;
        }
    /* ——— Info-icon accanto al label principale ——— */
    .with-info-search {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        margin-bottom: 0.3rem; /* spazio sotto al label */
    }

    .info-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 1.6em;
        height: 1.6em;
        margin-left: 8px;
        font-weight: bold;
        font-style: normal;
        font-size: 1.1em;
        cursor: pointer;
        line-height: 1;
        color: #fff;
        background: var(--accent-color, #d21317);
        border-radius: 50%;
        position: relative;
        user-select: none;
        vertical-align: middle;
    }

        .info-icon .tooltip {
            display: none;
            position: absolute;
            top: 125%;
            left: 50%;
            transform: translateX(-50%);
            width: 16rem;
            background: rgba(0, 0, 0, 0.8);
            color: #fff;
            padding: 0.6rem;
            font-size: 0.8rem;
            line-height: 1.3;
            border-radius: 4px;
            z-index: 1000;
            white-space: normal;
        }

        .info-icon:hover .tooltip,
        .info-icon:focus .tooltip {
            display: block;
        }

    /* ——— Radio buttons in colonna, testo normale ——— */
    .radio-group.spaced {
        display: flex !important;
        flex-direction: column !important;
        margin: 0 !important;
        padding: 0 !important;
    }

        .radio-group.spaced label {
            display: inline-flex;
            align-items: center;
            gap: 0.4rem;
            font-weight: normal !important;
        }

    /* ——— Riduci un pelino la distanza label→input principale ——— */
    .search-form label[for="main-search"] {
        margin-bottom: 0.15rem !important;
    }
    /* =============================================================================
   OVERRIDE TOTALE PER LA MODALE DI RICERCA
   ============================================================================= */
    #searchModal .search-form {
        display: grid !important;
        row-gap: 1rem !important;
        padding: 1rem 0 !important;
    }

        #searchModal .search-form label[for="main-search"] {
            margin-bottom: 0.2rem !important;
            font-weight: normal !important;
        }

    #searchModal .search-row {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.4rem !important;
        margin: 0 !important;
        margin-bottom: 1rem !important;
    }

        #searchModal .search-row input[type="text"] {
            margin-bottom: 0 !important;
        }

    #searchModal .radio-group.spaced {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.5rem !important;
        margin: 0 !important;
        padding: 0 !important;
    }

        #searchModal .radio-group.spaced label {
            font-weight: normal !important;
            display: inline-flex !important;
            align-items: center !important;
            gap: 0.4rem !important;
        }

    #searchModal label[for="section"] {
        margin-bottom: 1.3rem !important;
        font-weight: normal !important;
    }

    #searchModal select#section {
        margin-bottom: 1rem !important;
    }

    #searchModal label[for="region"],
    #searchModal #region {
        display: none !important;
    }

    #searchModal .btn-primary,
    #searchModal .btn-advanced {
        display: block !important;
        width: 100% !important;
        font-size: 1rem !important;
        font-weight: 700 !important;
        padding: 0.75rem 1rem !important;
        margin-top: 1rem !important;
        border-radius: 4px !important;
    }

    #searchModal .btn-advanced {
        background: var(--accent-color) !important;
        color: var(--text-light) !important;
        border: none !important;
    }

    #searchModal .with-info-search {
        display: inline-flex !important;
        align-items: center !important;
        gap: 0.5rem !important;
        margin-bottom: 0.4rem !important;
    }

    #searchModal .info-icon {
        width: 1.2rem !important;
        height: 1.2rem !important;
        font-size: 0.85rem !important;
    }

        #searchModal .info-icon .tooltip {
            width: 16rem !important;
        }

    /* elimina ogni altro row-gap o margin che fosse stato ripetuto sopra */
    #searchModal .search-form *,
    #searchModal .search-row *,
    #searchModal .radio-group.spaced * {
        /* non ereditano più gap/margin errati */
        row-gap: unset !important;
        margin: unset !important;
        padding: unset !important;
    }
    /* =============================================================================
   OVERRIDE ALTEZZA 25px PER INPUT E BUTTON NELLA MODALE DI RICERCA
   ============================================================================= */
    /* Solo input di testo, select e bottoni, NON i radio */
    #searchModal .search-form input[type="text"],
    #searchModal .search-form select,
    #searchModal .search-form .btn-primary,
    #searchModal .search-form .btn-advanced {
        height: 40px !important;
        line-height: 40px !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    /* Se vuoi ridurre anche l’altezza dei radio (cerchietti) */
    #searchModal .search-form .radio-group.spaced input[type="radio"] {
        width: 16px !important;
        height: 16px !important;
    }

    /* Se i bottoni hanno ancora troppo padding orizzontale, riducilo: */
    #searchModal .search-form .btn-primary,
    #searchModal .search-form .btn-advanced {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }
    /* =============================================================================
   RIDUCI SPAZIATURA LABEL → INPUT
   ============================================================================= */
    #searchModal .search-form label.with-info-search {
        /* meno spazio sotto al label principale */
        margin-bottom: 1px !important;
    }

    #searchModal .search-form .search-row {
        /* avvicina subito la riga che contiene l'input */
        margin-top: 1px !important;
    }

    #searchModal .search-form input[type="text"] {
        padding-top: 1px !important;
        padding-bottom: 1px !important;
    }
    /* Elimina qualsiasi margin-bottom sulla label */
    #searchModal .search-form label[for="section"] {
        margin-bottom: 2px !important;
        display: block;
    }

    /* Elimina qualsiasi margin-top sul select */
    #searchModal .search-form select#section {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
    /* ========== OVERRIDE SPAZIATURA “Filtra per sezione” ========== */
    #searchModal .search-form {
        /* se vuoi, rendi più compatta tutta la form */
        display: grid !important;
        row-gap: 0.5rem !important;
    }

        #searchModal .search-form label[for="section"] {
            /* toglie qualunque spazio sotto la label */
            margin-bottom: 0 !important;
            display: block !important;
        }

        #searchModal .search-form select#section {
            /* toglie qualunque spazio sopra il select */
            margin-top: 0 !important;
            margin-bottom: 1rem !important; /* lascia un minimo per separare dal pulsante */
        }
        /* 1) Spazio sotto al blocco input+radio */
        #searchModal .search-form .search-row {
            margin-bottom: 1rem !important;
        }

        /* 2) Spazio sopra alla label “Filtra per sezione” */
        #searchModal .search-form label[for="section"] {
            margin-top: 1rem !important;
        }
    /* Tooltip “info” più piccolo, su sfondo rosso semitrasparente, con padding */
    #searchModal .info-icon .tooltip {
        background: rgba( var(--accent-rgb), 0.97 ) !important; /* rosso #D21317 semitrasparente */
        color: #fff !important;
        font-size: 0.85rem !important; /* testo leggermente più piccolo */
        padding: 0.5rem 0.75rem !important; /* spazio attorno al testo */
        border-radius: 4px !important;
        line-height: 1.3 !important;
        max-width: 14rem !important; /* puoi adattare la larghezza se serve */
    }

    /* Mantieni il tooltip centrato sotto l’icona */
    #searchModal .info-icon {
        position: relative;
    }

        #searchModal .info-icon .tooltip {
            top: 125% !important;
            left: 50% !important;
            transform: translateX(-50%) !important;
        }
    /* ——— Indenta testo interno di input e select ——— */
    #searchModal .search-form input[type="text"],
    #searchModal .search-form select {
        /* 0.5rem = stesso indent che usi sull’input di testo */
        padding-left: 0.5rem !important;
    }

    /* ——— (opzionale) se avevi ancora un margin-left sul select, rimuovilo ——— */
    #searchModal .search-form select {
        margin-left: 0 !important;
    }

    /* === MODALE RICERCA === */


    .input-lg,
    .search-form input,
    .search-form select {
        font-size: calc(1.2rem * var(--scale));
        padding: calc(0.6rem * var(--scale)) calc(1rem * var(--scale));
    }

    .btn-primary,
    .btn-advanced {
        font-size: calc(1rem * var(--scale)) !important;
        padding: calc(0.6rem * var(--scale)) calc(1.5rem * var(--scale)) !important;
    }

    @media (max-width: 768px) {
        #searchModal .search-form select#section {
            font-size: 1.1rem !important;
            min-height: 2.2em;
        }

            #searchModal .search-form select#section option {
                font-size: 1.1rem !important;
            }
    }

    /* Forza il colore rosso brand (#d21317) per i radio button selezionati nella modale, usando accent-color e un fallback CSS per compatibilità. */
    #searchModal .search-form input[type="radio"]:checked {
        accent-color: #d21317 !important; /* rosso brand */
    }

    #searchModal .search-form input[type="radio"]:checked {
        accent-color: #d21317 !important;
    }

    /* Forza il colore del testo dell'opzione '- Seleziona -' e del select a nero, indipendentemente dal colore di default del dispositivo. */
    #searchModal .search-form select#section option[value=""] {
        color: #111 !important;
        font-size: 0.90rem !important;
    }

    #searchModal .search-form select#section {
        color: #111 !important;
    }

        #searchModal .search-form select#section,
        #searchModal .search-form select#section option {
            font-size: 0.97em !important;
        }

            #searchModal .search-form select#section option[value=""] {
                font-size: 0.95em !important;
            }

    /* === ACCORDION OPZIONI DI RICERCA (SOLO CSS) === */
    #searchModal .search-form {
        position: relative;
    }

        #searchModal .search-form .search-accordion-toggle {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            cursor: pointer;
            font-size: 1.05rem;
            color: var(--accent-color, #D21317);
            background: none;
            border: none;
            margin: 0.7rem 0 0.2rem 0;
            padding: 0.2rem 0.1rem;
            transition: color 0.18s;
        }

        #searchModal .search-form .search-accordion-arrow {
            display: inline-block;
            transition: transform 0.25s cubic-bezier(.66,0,.34,1);
            font-size: 1.25em;
            line-height: 1;
            margin-right: 0.1em;
        }

        #searchModal .search-form .search-accordion-toggle[aria-expanded="true"] .search-accordion-arrow {
            transform: rotate(90deg);
        }

        /* Nascondi tutto ciò che sta sotto l'input principale e sopra il bottone CERCA */
        #searchModal .search-form .search-accordion-content {
            max-height: 0;
            overflow: hidden;
            opacity: 0;
            pointer-events: none;
            transition: max-height 0.55s cubic-bezier(.77,0,.18,1), opacity 0.38s cubic-bezier(.77,0,.18,1), padding 0.38s cubic-bezier(.77,0,.18,1);
            will-change: max-height, opacity, padding;
            /* Aggiungi un leggero delay per la chiusura per evitare "collasso" improvviso */
        }

        #searchModal .search-form .search-accordion-toggle[aria-expanded="true"] + .search-accordion-content {
            max-height: 900px;
            opacity: 1;
            pointer-events: auto;
            padding-top: 0.7rem;
            padding-bottom: 0.7rem;
            transition: max-height 0.65s cubic-bezier(.77,0,.18,1), opacity 0.45s cubic-bezier(.77,0,.18,1), padding 0.45s cubic-bezier(.77,0,.18,1);
        }

        #searchModal .search-form .search-accordion-content > * {
            transition: opacity 0.38s cubic-bezier(.77,0,.18,1), transform 0.38s cubic-bezier(.77,0,.18,1);
            will-change: opacity, transform;
        }

        #searchModal .search-form .search-accordion-toggle[aria-expanded="true"] + .search-accordion-content > * {
            transition-delay: 0.10s;
        }

        /* Stile per la riga della freccia e scritta */
        #searchModal .search-form .search-accordion-toggle {
            user-select: none;
        }

    /* Responsive: margini e font */
    @media (max-width: 768px) {
        #searchModal .search-form .search-accordion-toggle {
            font-size: 1rem;
            padding: 0.3rem 0.1rem;
        }
    }

    /* --- HIDE/SHOW LOGIC: solo CSS, ma serve JS per toggle aria-expanded --- */
    #searchModal .search-form .search-accordion-toggle {
        color: #111 !important;
    }

        #searchModal .search-form .search-accordion-toggle[aria-expanded="true"] {
            color: var(--accent-color, #D21317) !important;
        }

    #searchModal .btn-advanced {
        margin-top: 1rem !important;
    }

    #searchModal .search-form .btn-primary {
        /* Riduci la distanza sotto il bottone CERCA */
        margin-bottom: 0.7rem !important;
    }

    /* Aumenta la distanza sotto il toggle Opzioni di ricerca */
    #searchModal .search-form .search-accordion-toggle {
        margin-bottom: 1.2rem !important;
    }

    #searchModal .search-form .search-accordion-toggle {
        margin-top: 0.2rem !important;
        margin-bottom: 0.2rem !important;
    }

    /* Spaziatura interna degli elementi dell'accordion */
    #searchModal .search-form .search-accordion-content > *:first-child {
        margin-top: 0.3rem !important;
    }

    #searchModal .search-form .search-accordion-content > *:last-child {
        margin-bottom: 0.3rem !important;
    }

    #searchModal .search-form .search-accordion-content > * {
        margin-top: 0.3rem;
        margin-bottom: 0.3rem;
    }

    #searchModal .search-form .search-accordion-toggle {
        margin-bottom: 0 !important;
    }

        /* Rimuovi bordo e ombra su focus e active per il toggle dell'accordion */
        #searchModal .search-form .search-accordion-toggle:focus {
            outline: none !important;
            box-shadow: none !important;
        }

        #searchModal .search-form .search-accordion-toggle::-moz-focus-inner {
            border: 0 !important;
        }

        #searchModal .search-form .search-accordion-toggle:active {
            outline: none !important;
            box-shadow: none !important;
        }

    @media (hover: none) and (pointer: coarse), (max-width: 768px) {
        #searchModal .search-form .search-accordion-toggle:focus,
        #searchModal .search-form .search-accordion-toggle:active {
            outline: none !important;
            box-shadow: none !important;
            background: none !important;
            filter: none !important;
        }

        #searchModal .search-form .search-accordion-toggle {
            outline: none !important;
            box-shadow: none !important;
            background: none !important;
            filter: none !important;
        }
    }

    #searchModal .modal-header .icon-animated {
        width: 270px !important;
        height: 270px !important;
        max-width: 100%;
        max-height: 180px !important;
        aspect-ratio: 1/1;
        object-fit: contain;
        display: block;
        margin: 0 auto 0.1rem auto !important;
    }

    #searchModal .search-form {
        row-gap: 0.3rem !important;
    }

        #searchModal .search-form label.with-info-search {
            margin-bottom: 0 !important;
        }

        /* Spazio tra input di ricerca e pulsante CERCA */
        #searchModal .search-form input#main-search {
            margin-bottom: 0.32rem !important;
        }

        #searchModal .search-form .btn-primary {
            margin-top: 0.18rem !important;
        }

        /* Effetto accordion moderno: fade+slide+scale, con animazione su figli */
        #searchModal .search-form .search-accordion-content {
            transition: max-height 0.6s cubic-bezier(.77,0,.18,1), opacity 0.38s cubic-bezier(.77,0,.18,1), padding 0.38s cubic-bezier(.77,0,.18,1);
            will-change: max-height, opacity, padding;
            /* Per evitare "jump" su chiusura */
        }

        #searchModal .search-form .search-accordion-toggle[aria-expanded="true"] + .search-accordion-content {
            transition: max-height 0.7s cubic-bezier(.77,0,.18,1), opacity 0.45s cubic-bezier(.77,0,.18,1), padding 0.45s cubic-bezier(.77,0,.18,1);
        }

        #searchModal .search-form .search-accordion-content > * {
            opacity: 0;
            transform: translateY(24px) scale(0.98);
            transition: opacity 0.44s cubic-bezier(.77,0,.18,1), transform 0.44s cubic-bezier(.77,0,.18,1);
            will-change: opacity, transform;
        }

        #searchModal .search-form .search-accordion-toggle[aria-expanded="true"] + .search-accordion-content > * {
            opacity: 1;
            transform: translateY(0) scale(1);
            transition-delay: 0.13s;
        }

        #searchModal .search-form .search-accordion-content {
            /* Per evitare "jump" su chiusura */
            overflow: hidden;
        }
    /* === Mini Sticky Bar – Core Styles === */
    #miniSticky {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: var(--bar-height);
        background: rgba(var(--accent-rgb), var(--alpha));
        color: #fff;
        font-family: "Poppins", sans-serif;
        font-weight: 500;
        z-index: 1002;
    }

        #miniSticky .wrap {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            max-width: var(--max-width);
            margin: 0 auto;
            padding: 0 var(--gap);
            height: 100%;
            overflow: hidden;
            position: relative;
        }

    .mini-left,
    .mini-right {
        display: flex;
        align-items: center;
        gap: 0.35rem; /* gap ridotto tra logo e icona menu */
        flex-shrink: 0;
    }

    .mini-left {
        display: flex;
        align-items: center;
        gap: 0.7rem;
        padding-left: 0.5rem;
        /* nessun margin extra sulle icone */
    }

        .mini-left .logo {
            /* width: 28px !important; */
            /* height: 28px !important; */
            margin: 0;
            padding: 0;
            object-fit: contain;
            display: inline-block;
            transition: filter 0.18s, box-shadow 0.18s, background 0.18s, transform 0.1s;
        }

        .mini-left .icon-menu,
        .mini-left .icon-search,
        .mini-left .icon-user,
        .mini-left button {
            width: 28px;
            height: 28px;
            display: inline-block;
            object-fit: contain;
            margin: 0;
            padding: 0;
            vertical-align: middle;
            align-items: center;
            justify-content: center;
            background: none;
            border: none;
        }

    .mini-categories-wrapper {
        flex: 1;
        display: flex;
        align-items: center;
        overflow-x: auto;
        min-width: 0;
        margin: 0 0.5rem;
        /* Spazio aumentato per distanziare di più l'icona menu dalla prima categoria */
        padding-left: 3.4rem !important;
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* IE 10+ */
    }

        .mini-categories-wrapper::-webkit-scrollbar {
            display: none;
        }

    .mini-categories {
        display: flex;
        gap: 0.5rem;
        white-space: nowrap;
    }

        .mini-categories a {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            text-decoration: none;
            font-size: var(--font-size);
            font-weight: 600;
            padding: 0 0.6rem;
            height: var(--button-height);
            line-height: var(--button-height);
            background: none;
        }

    .ellipsis-icon {
        display: block;
        width: var(--icon-size);
        height: var(--icon-size);
        cursor: pointer;
    }

    /* === Mini Sticky Bar – Core Styles & Modern Mask-Fade === */
    #miniSticky {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: var(--bar-height);
        background: rgba(var(--accent-rgb), var(--alpha));
        color: #fff;
        font-family: "Poppins", sans-serif;
        font-weight: 500;
        z-index: 1002;
    }

        #miniSticky .wrap {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            max-width: var(--max-width);
            margin: 0 auto;
            padding: 0 var(--gap);
            height: 100%;
            overflow: hidden;
            position: relative;
        }

    .mini-left,
    .mini-right {
        display: flex;
        align-items: center;
        gap: 0.35rem; /* gap ridotto tra logo e icona menu */
        flex-shrink: 0;
    }

    .mini-left {
        display: flex;
        align-items: center;
        gap: 0.7rem;
        padding-left: 0.0rem;
        /* nessun margin extra sulle icone */
    }

        .mini-left .logo {
            /* width: 28px !important; */
            /* height: 28px !important; */
            margin: 0;
            padding: 0;
            object-fit: contain;
            display: inline-block;
            transition: filter 0.18s, box-shadow 0.18s, background 0.18s, transform 0.1s;
        }

        .mini-left .icon-menu,
        .mini-left .icon-search,
        .mini-left .icon-user,
        .mini-left button {
            width: 28px;
            height: 28px;
            display: inline-block;
            object-fit: contain;
            margin: 0;
            padding: 0;
            vertical-align: middle;
            align-items: center;
            justify-content: center;
            background: none;
            border: none;
        }

    .mini-categories-wrapper {
        flex: 1;
        display: flex;
        align-items: center;
        overflow-x: auto;
        min-width: 0;
        margin: 0 0.5rem;
        /* Spazio aumentato per distanziare di più l'icona menu dalla prima categoria */
        padding-left: 3.4rem !important;
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* IE 10+ */
    }

        .mini-categories-wrapper::-webkit-scrollbar {
            display: none;
        }

    .mini-categories {
        display: flex;
        gap: 0.5rem;
        white-space: nowrap;
    }

        .mini-categories a {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            text-decoration: none;
            font-size: var(--font-size);
            font-weight: 600;
            padding: 0 0.6rem;
            height: var(--button-height);
            line-height: var(--button-height);
            background: none;
        }

    /* mostra l'icona “…” solo quando c’è overflow */
    #miniSticky.has-overflow .ellipsis-icon {
        display: block;
    }

    .ellipsis-icon {
        display: none;
        width: var(--icon-size);
        height: var(--icon-size);
        cursor: pointer;
    }


    /* Modern mask-fade effect attivato in overflow */
    #miniSticky.overflowing-right .mini-categories-wrapper {
        -webkit-mask-image: linear-gradient(to right, black 70%, transparent 100%);
        mask-image: linear-gradient(to right, black 70%, transparent 100%);
    }

    /* prima voce NON visibile ⇒ fade a sinistra */
    #miniSticky.overflowing-left .mini-categories-wrapper {
        -webkit-mask-image: linear-gradient(to right, transparent 0, black 3.4rem, black 100%);
        mask-image: linear-gradient(to right, transparent 0, black 3.4rem, black 100%);
    }

    /* ultima voce NON visibile ⇒ fade a destra */
    #miniSticky.overflowing-right .mini-categories-wrapper {
        -webkit-mask-image: linear-gradient(to right, black 0, black calc(100% - 3.4rem), transparent 100%);
        mask-image: linear-gradient(to right, black 0, black calc(100% - 3.4rem), transparent 100%);
    }

    /* overflow su entrambi i lati */
    #miniSticky.overflowing-left.overflowing-right .mini-categories-wrapper {
        -webkit-mask-image: linear-gradient(to right, transparent 0, black 3.4rem, black calc(100% - 3.4rem), transparent 100%);
        mask-image: linear-gradient(to right, transparent 0, black 3.4rem, black calc(100% - 3.4rem), transparent 100%);
    }


    /* Nasconde l’icona “menu-sticky menu-trigger” nella mini sticky bar */
    #miniSticky img.menu-sticky.menu-trigger {
        display: none !important;
    }

    #miniSticky .icon-menu.menu-trigger {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        pointer-events: auto !important;
        z-index: 1003 !important;
        position: relative !important;
        opacity: 1 !important;
        visibility: visible !important;
        left: 0 !important;
        top: 0 !important;
    }


    /* === Mini Sticky Bar – 3D Active & Hover Effect === */
    #miniSticky .mini-categories a.active {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0.2rem 0.6rem;
        height: var(--button-height);
        line-height: var(--button-height);
        font-weight: bold;
        border-radius: 6px;
        background: transparent;
        color: var(--accent-color);
        transform: translate(2px, 2px);
        box-shadow: inset -2px 0 0 var(--accent-color), inset 0 -2px 0 var(--accent-color), inset 2px 2px 4px rgba(0, 0, 0, 0.07), inset -1px -1px 3px rgba(0, 0, 0, 0.15);
        transition: all 0.2s ease-in-out;
    }

        #miniSticky .mini-categories a.active:hover {
            /* inverse transform & shadows on hover */
            transform: translate(-2px, -2px);
            box-shadow: inset 2px 0 0 var(--accent-color), inset 0 2px 0 var(--accent-color), inset -2px -2px 4px rgba(0, 0, 0, 0.07), inset 1px 1px 3px rgba(0, 0, 0, 0.15);
            background: transparent;
            color: var(--accent-color);
        }

    #miniSticky .mini-categories a:hover:not(.active) {
        /* coherent hover for non-active items */
        transform: translate(2px, 2px);
        background: transparent;
        color: var(--accent-color);
        box-shadow: inset -2px 0 0 var(--accent-color), inset 0 -2px 0 var(--accent-color), inset 2px 2px 4px rgba(0, 0, 0, 0.07), inset -1px -1px 3px rgba(0, 0, 0, 0.15);
    }
    /* === Mini Sticky Bar – White 3D Active & Hover Effect === */
    #miniSticky .mini-categories a.active {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0.2rem 0.6rem;
        height: var(--button-height);
        line-height: var(--button-height);
        font-weight: bold;
        border-radius: 6px;
        background: transparent;
        color: #fff !important;
        transform: translate(2px, 2px) !important;
        box-shadow: inset -2px 0 0 #fff, inset 0 -2px 0 #fff, inset 2px 2px 4px rgba(255,255,255,0.07), inset -1px -1px 3px rgba(255,255,255,0.15);
        transition: all 0.2s ease-in-out;
    }

        /* rimuovi l’ombra bianca quando passi sopra l’active */
        #miniSticky .mini-categories a.active:hover {
            box-shadow: none !important;
        }

    /* applica l’ombra bianca quando passi sopra un elemento non-active */
    #miniSticky .mini-categories a:not(.active):hover {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: #fff !important;
        transform: translate(2px, 2px) !important;
        box-shadow: inset -2px 0 0 #fff, inset 0 -2px 0 #fff, inset 2px 2px 4px rgba(255,255,255,0.07), inset -1px -1px 3px rgba(255,255,255,0.15);
        transition: all 0.2s ease-in-out;
    }

    #miniSticky {
        /* Sfondo completamente opaco */
        background: var(--accent-color) !important;
        /* Disabilita trasparenza e blur */
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    .mini-categories a.active {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0.35rem 0.6rem; /* padding verticale aumentato */
        margin-bottom: 4px; /* lascia spazio per far “uscire” l’ombra sotto */
        line-height: 1.1;
        border-radius: 8px;
        background-color: transparent;
        color: #fff;
        box-shadow: inset -2px 0 0 #fff, inset 0 -2px 0 #fff, inset 2px 2px 4px rgba(0, 0, 0, 0.07), inset -1px -1px 3px rgba(0, 0, 0, 0.15);
        font-weight: bold;
        transition: all 0.2s ease-in-out;
    }

        .mini-categories a.active:hover {
            transform: translate(-2px, -2px);
            box-shadow: inset 2px 0 0 #fff, inset 0 2px 0 #fff, inset -2px -2px 4px rgba(0, 0, 0, 0.07), inset 1px 1px 3px rgba(0, 0, 0, 0.15);
            background: transparent;
            color: #fff;
        }

    /* === Mini Sticky Bar – Progress Bar Styles === */
    #miniSticky .mini-progress-container {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: 0;
        width: 100vw;
        max-width: var(--max-width, 1200px);
        height: 5px;
        background: transparent;
        z-index: 1004;
        pointer-events: none;
        display: flex !important;
        justify-content: center;
        opacity: 1 !important;
    }

    #miniSticky .mini-scroll-progress {
        height: 100%;
        width: 0%;
        background: #fff !important;
        transition: width 0.2s;
        border-radius: 0 0 4px 4px;
        opacity: 1 !important;
        margin: 0 auto;
    }

    @media (max-width: 1000px) and (min-width: 701px) {
        #miniSticky .mini-progress-container {
            height: 3px !important;
        }

        #miniSticky .mini-scroll-progress {
            height: 100% !important;
            min-height: 3px !important;
            max-height: 3px !important;
        }
    }

    @media (max-width: 600px) {
        #miniSticky .icon-menu,
        #miniSticky img.icon-menu,
        #miniSticky .icon-menu.menu-trigger,
        #miniSticky img.icon-menu.menu-trigger {
            margin-right: 0.8rem;
            height: 1.7rem;
        }
    }

    /* === Mini Sticky Bar – 3D Active & Hover Effect (SCALING, COERENZA CON CAT-BAR STICKY) === */
    #miniSticky .mini-categories a.active:not(.no-override) {
        position: relative !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: calc(0.2rem * var(--scale, 1)) calc(0.6rem * var(--scale, 1)) !important;
        height: calc(var(--button-height) * var(--scale, 1)) !important;
        line-height: calc(var(--button-height) * var(--scale, 1)) !important;
        font-weight: bold !important;
        border-radius: calc(6px * var(--scale, 1)) !important;
        background: transparent !important;
        color: #fff !important;
        transform: translate(calc(2px * var(--scale, 1)), calc(2px * var(--scale, 1))) !important;
        box-shadow: inset -2px 0 0 #fff, inset 0 -2px 0 #fff, inset calc(2px * var(--scale, 1)) calc(2px * var(--scale, 1)) calc(4px * var(--scale, 1)) rgba(0,0,0,0.07), inset calc(-1px * var(--scale, 1)) calc(-1px * var(--scale, 1)) calc(3px * var(--scale, 1)) rgba(0,0,0,0.15) !important;
        transition: all 0.2s ease-in-out !important;
    }

    #miniSticky .mini-categories a.active:hover:not(.no-override) {
        box-shadow: none !important;
        background: transparent !important;
        transform: none !important;
        color: #fff !important;
    }

    #miniSticky .mini-categories a:hover:not(.active):not(.no-override) {
        transform: translate(calc(2px * var(--scale, 1)), calc(2px * var(--scale, 1))) !important;
        background: transparent !important;
        color: #fff !important;
        box-shadow: inset -2px 0 0 #fff, inset 0 -2px 0 #fff, inset calc(2px * var(--scale, 1)) calc(2px * var(--scale, 1)) calc(4px * var(--scale, 1)) rgba(0,0,0,0.07), inset -1px -1px 3px rgba(0,0,0,0.15) !important;
    }

    #miniSticky .mini-categories a {
        border-radius: calc(6px * var(--scale, 1)) !important;
        font-size: var(--font-size) !important;
        padding: calc(0.2rem * var(--scale, 1)) calc(0.6rem * var(--scale, 1)) !important;
        height: calc(var(--button-height) * var(--scale, 1)) !important;
        transition: all 0.2s ease-in-out !important;
    }

    /* fade SX                                    */
    #miniSticky.overflowing-left .mini-categories-wrapper {
        -webkit-mask-image: linear-gradient(to right, transparent 0, black 3.4rem, black 100%);
        mask-image: linear-gradient(to right, transparent 0, black 3.4rem, black 100%);
    }
    /* fade DX                                    */
    #miniSticky.overflowing-right .mini-categories-wrapper {
        -webkit-mask-image: linear-gradient(to right, black 0, black calc(100% - 3.4rem), transparent 100%);
        mask-image: linear-gradient(to right, black 0, black calc(100% - 3.4rem), transparent 100%);
    }
    /* fade su entrambi i lati                    */
    #miniSticky.overflowing-left.overflowing-right .mini-categories-wrapper {
        -webkit-mask-image: linear-gradient(to right, transparent 0, black 3.4rem, black calc(100% - 3.4rem), transparent 100%);
        mask-image: linear-gradient(to right, transparent 0, black 3.4rem, black calc(100% - 3.4rem), transparent 100%);
    }

    /* Add pointer cursor to mini sticky bar logo */
    #miniSticky .mini-left a .logo {
        cursor: pointer;
    }

    /* === PATCH: MINI-STICKY-BAR HAMBURGER BUTTON VISIBLE BACKGROUND === */
    #miniSticky .mini-left .icon-menu.menu-trigger {
        background: transparent;
        border: none;
        outline: none;
        /* Ensure the button area is visible and matches other buttons */
    }

        #miniSticky .mini-left .icon-menu.menu-trigger:hover,
        #miniSticky .mini-left .icon-menu.menu-trigger:focus,
        #miniSticky .mini-left .icon-menu.menu-trigger:active {
            background: rgba(255,255,255,0.13) !important;
            color: #fff !important;
            box-shadow: 0 2px 12px rgba(0,0,0,0.10);
            outline: none;
            border-radius: 8px;
        }

    #miniSticky .mini-left .icon-menu.menu-trigger {
        /* Add a subtle border to make the button area visible, like search/user */
        border: 1px solid transparent;
    }

        #miniSticky .mini-left .icon-menu.menu-trigger:hover,
        #miniSticky .mini-left .icon-menu.menu-trigger:focus {
            border: 1px solid rgba(255,255,255,0.18);
        }

    /* --- FIX: MINI-STICKY-BAR HAMBURGER BUTTON BORDER TO MATCH LOGO --- */
    #miniSticky .mini-left .icon-menu.menu-trigger {
        border: none !important;
    }

        #miniSticky .mini-left .icon-menu.menu-trigger:hover,
        #miniSticky .mini-left .icon-menu.menu-trigger:focus {
            border: none !important;
        }

    /* === MINI-STICKY-BAR LOGO & HAMBURGER: BUTTON-LIKE, UNIFIED HOVER/ACTIVE === */
    #miniSticky .mini-left a,
    #miniSticky .mini-left .icon-menu.menu-trigger {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        min-width: 0;
        max-width: 100%;
        padding: 0;
        border-radius: 8px;
        background: transparent;
        color: #fff;
        transition: background 0.18s, color 0.18s, box-shadow 0.18s, transform 0.1s;
        box-sizing: border-box;
        position: relative;
        vertical-align: middle;
        cursor: pointer;
    }

        #miniSticky .mini-left a .logo {
            /* width: 28px !important; */
            /* height: 28px !important; */
            margin: 0;
            padding: 0;
            object-fit: contain;
            display: inline-block;
            transition: filter 0.18s, box-shadow 0.18s, background 0.18s, transform 0.1s;
        }

    @media (min-width: 100px) and (max-width: 900px) {
        #miniSticky .mini-left a,
        #miniSticky .mini-left .icon-menu.menu-trigger {
            width: 36px !important;
            height: 36px !important;
        }
        /* Lascia le icone e logo scalare con le variabili */
    }

    @media (min-width: 900px) and (max-width: 1000px) {
        #miniSticky .mini-left a {
            width: 44px !important;
            height: 44px !important;
        }

            #miniSticky .mini-left a .logo {
                width: 38px !important;
                height: 38px !important;
            }

        #miniSticky .mini-left .icon-menu.menu-trigger {
            width: 44px !important;
            height: 44px !important;
        }

            #miniSticky .mini-left .icon-menu.menu-trigger > * {
                width: 28px !important;
                height: 28px !important;
            }
    }

    #miniSticky .mini-left a:hover,
    #miniSticky .mini-left a:focus,
    #miniSticky .mini-left a:active {
        background: rgba(255,255,255,0.13) !important;
        color: #fff !important;
        box-shadow: 0 2px 12px rgba(0,0,0,0.10);
        outline: none;
    }

    /* PATCH: Effetto hover sulla sezione attiva della mini-sticky-bar identico alla cat-bar */
    #miniSticky .mini-categories:hover a.active:not(:hover):not(.no-override) {
        opacity: 0.4 !important;
        color: #fff !important;
        background: transparent !important;
        box-shadow: none !important;
        transform: none !important;
    }

    #miniSticky .mini-categories:hover:not(:has(a:hover)) a.active:not(.no-override) {
        /* Quando il mouse NON è sopra nessuna voce, la voce attiva resta normale */
        opacity: 1 !important;
        color: #fff !important;
        background: transparent !important;
        box-shadow: inset -2px 0 0 #fff, inset 0 -2px 0 #fff, inset 2px 2px 4px rgba(255,255,255,0.07), inset -1px -1px 3px rgba(255,255,255,0.15) !important;
        transform: translate(2px, 2px) !important;
    }

    #miniSticky .mini-categories a.active:hover:not(.no-override) {
        /* Nessun movimento in hover sulla voce attiva */
        transform: none !important;
    }

    /* ==========================
   1. Visibilità del modal
   ========================== */
    /*#loginModal.modal {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.55);*/ /* come la search modal */
    /*display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        visibility: hidden;
        z-index: 2000;
        transition: opacity 0.25s ease, visibility 0.25s step-end;
    }*/

    #loginModal.modal.open {
        opacity: 1;
        visibility: visible;
        transition: opacity 0.25s ease, visibility 0.25s step-start;
    }

    #loginModal.modal[aria-hidden="true"] {
        display: none;
    }

    #loginModal.modal:not(.open)[aria-hidden="true"] {
        display: none !important;
    }

    /* RIMUOVI overlay secondario */
    #loginModal .modal-overlay {
        display: none !important;
    }

    /* ==========================
   3. Dialog
   ========================== */
    #loginModal .modal-dialog.small {
        max-width: 420px;
        width: 92vw;
        padding: 2.2rem 1.7rem 2rem 1.7rem;
        border-radius: 6px !important;
        box-shadow: 0 12px 40px 0 rgba(0,0,0,0.18), 0 1.5px 8px 0 rgba(210,19,23,0.07);
        border: 1.5px solid #f3f3f3;
        overflow: hidden;
        z-index: 2001;
        display: flex;
        flex-direction: column;
        gap: 1.2rem;
        animation: modalFadeIn 0.32s cubic-bezier(.33,1.02,.57,1.01);
    }

        /* Effetto hover su dialog: ombra più intensa come modal search */
        #loginModal .modal-dialog.small:hover {
            box-shadow: 0 16px 48px 0 rgba(0,0,0,0.22), 0 2px 12px 0 rgba(210,19,23,0.10);
            transition: box-shadow 0.18s;
        }

    /* anima l’entrata */
    @keyframes modalFadeIn {
        from {
            transform: translateY(-32px) scale(0.98);
            opacity: 0;
        }

        to {
            transform: translateY(0) scale(1);
            opacity: 1;
        }
    }

    /* ==========================
   4. Close button
   ========================== */
    #loginModal .modal-close {
        position: absolute;
        top: 0.85rem;
        right: 0.85rem;
        font-size: 1.45rem;
        line-height: 1;
        background: none;
        border: none;
        color: #bbb;
        cursor: pointer;
        transition: color 0.18s, transform 0.18s;
        z-index: 2;
        padding: 0.2rem;
    }

        #loginModal .modal-close:hover {
            color: #D21317;
            transform: scale(1.13) rotate(8deg);
        }

    /* ==========================
   5. Header titoli
   ========================== */
    #loginModal .modal-header {
        text-align: center;
        margin-bottom: 0.5rem !important;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.05rem;
        padding-bottom: 0.1rem;
    }

        #loginModal .modal-header h1 {
            font-size: 1.45rem;
            margin: 0;
            color: #D21317;
            font-weight: 800;
            letter-spacing: -0.5px;
            line-height: 1.18;
        }

    /* ==========================
   6. Social buttons
   ========================== */
    #loginModal .social-login {
        /*display: flex;
        gap: 0.7rem;*/
        margin-bottom: 1.1rem !important;
    }

        #loginModal .social-login .btn {
            flex: 1;
            display: flex !important;
            align-items: center;
            justify-content: center;
            gap: 0.45rem;
            padding: 0.68rem 0.2rem;
            border-radius: 7px;
            font-size: 0.97rem !important;
            font-weight: 600 !important;
            color: #fff !important;
            text-decoration: none;
            transition: filter 0.18s, box-shadow 0.18s, transform 0.13s;
            box-shadow: 0 1px 4px 0 rgba(0,0,0,0.07);
            border: none;
        }

    #loginModal .btn-google {
        background: linear-gradient(90deg, #DB4437 80%, #c23321 100%);
    }

    #loginModal .btn-facebook {
        background: linear-gradient(90deg, #4267B2 80%, #29487d 100%);
    }

        #loginModal .btn-google:hover,
        #loginModal .btn-facebook:hover {
            filter: brightness(1.08) drop-shadow(0 2px 8px #eee);
            box-shadow: 0 2px 12px 0 rgba(66,103,178,0.07);
            transform: translateY(-2px) scale(1.03);
            opacity: 0.93;
        }

    /* ==========================
   7. Separator
   ========================== */
    #loginModal .separator {
        text-align: center !important;
        display: block !important;
        width: 100%;
        margin-left: auto !important;
        margin-right: auto !important;
        font-size: 1.02rem !important;
        font-weight: 500 !important;
        color: #666 !important;
        margin-top: 0 !important;
        font-style: italic !important;
        margin-bottom: 1.1rem !important;
    }

        #loginModal .separator::before,
        #loginModal .separator::after {
            display: none !important;
            content: none !important;
        }

    /* ==========================
   8. Form fields
   ========================== */
    #loginModal .login-form {
        display: flex;
        flex-direction: column;
        gap: 0.35rem !important;
        padding: 0 !important;
    }

        #loginModal .login-form label {
            font-size: 0.97rem;
            color: #222;
            font-weight: 600;
            margin-bottom: 0.13rem !important;
            margin-top: 0 !important;
            letter-spacing: 0.01em;
        }

        #loginModal .login-form input,
        #loginModal .login-form select {
            font-size: 1.08rem !important;
            padding: 0.48rem 0.9rem !important;
            width: 100%;
            border: 1.5px solid #E2E2E2;
            border-radius: 7px;
            background: #fafbfc;
            color: #222;
            margin: 0 !important;
            box-shadow: 0 1px 4px 0 rgba(0,0,0,0.03);
            transition: border-color 0.18s, box-shadow 0.18s;
        }

            #loginModal .login-form input:focus,
            #loginModal .login-form select:focus {
                outline: none;
                border-color: #D21317;
                background: #fff;
                box-shadow: 0 2px 8px 0 rgba(210,19,23,0.07);
            }

    /* ==========================
   9. Remember me + checkbox
   ========================== */
    #loginModal .remember-me {
        display: flex;
        align-items: center;
        gap: 0.4rem;
        font-size: 0.93rem;
        color: #555;
        margin-top: 0.1rem;
        margin-bottom: 0.1rem;
    }

        #loginModal .remember-me input[type="checkbox"] {
            width: 0.95em !important;
            height: 0.95em !important;
            accent-color: #D21317;
            margin: 0;
            vertical-align: middle;
        }

    /* ==========================
   10. Primary button
   ========================== */
    #loginModal .btn-primary {
        font-size: 1.25rem !important;
        font-weight: 700 !important;
        padding: 0.85rem !important;
        min-height: 48px !important;
        /*background: linear-gradient(90deg, #D21317 80%, #B01214 100%);*/
        color: #FFF;
        border: none;
        border-radius: 7px;
        cursor: pointer;
        transition: background 0.18s, box-shadow 0.18s, transform 0.13s;
        box-shadow: 0 2px 10px 0 rgba(210,19,23,0.13), 0 1.5px 8px 0 rgba(210,19,23,0.07) !important;
        margin-top: 0.5rem;
        letter-spacing: 0.01em;
    }

        #loginModal .btn-primary:hover {
            /*background: linear-gradient(90deg, #B01214 80%, #D21317 100%);*/
            box-shadow: 0 4px 16px rgba(0,0,0,0.3) !important;
            transform: translateY(2px) !important;
            opacity: 0.9 !important;
            filter: none !important;
            text-decoration: none !important;
        }

    #loginModal .btn-primary,
    #loginModal .login-form button[type="submit"] {
        font-size: 1.35rem !important;
        padding: 0.6rem 1.5rem !important;
        min-height: 48px !important;
        letter-spacing: 0.01em;
        text-transform: uppercase;
    }

    @media (max-width: 768px), (max-width: 600px), (max-width: 500px) {
        #loginModal .btn-primary,
        #loginModal .login-form button[type="submit"] {
            font-size: 0.68rem !important;
            padding: 0.95rem !important;
            min-height: 48px !important;
        }
    }

    @media (max-width: 600px) {
        #loginModal .btn-primary,
        #loginModal .login-form button[type="submit"] {
            font-size: 2rem !important;
            padding: 1.1rem !important;
            min-height: 54px !important;
        }
    }

    /* ==========================
   11. Links sotto form
   ========================== */
    #loginModal .forgot-password,
    #loginModal .register-text {
        text-align: center;
        font-size: 0.93rem;
        color: #666 !important;
        margin-top: 1.5rem;
        transition: color 0.18s;
    }

        #loginModal .forgot-password:hover {
            color: #D21317 !important;
        }

    #loginModal .register-text {
        margin-top: 1.1rem;
    }

        #loginModal .register-text .register-link {
            color: #D21317 !important;
            font-weight: 700 !important;
            text-decoration: none;
            transition: text-decoration 0.18s, color 0.18s;
            letter-spacing: 0.01em;
        }

            #loginModal .register-text .register-link:hover {
                text-decoration: none !important;
                color: #B01214 !important;
            }

    /* === MODAL LOGIN: stile e comportamento identici a modal-search === */
    /*#loginModal.modal {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.55);
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        visibility: hidden;
        z-index: 2000;
    }*/

    /*#loginModal.modal.open {
            opacity: 1;
            visibility: visible;
        }*/

    /*#loginModal .modal-dialog.small {
        max-width: 420px;
        width: 92vw;
        padding: 2.2rem 1.7rem 2rem 1.7rem;
        border-radius: 6px !important;
        box-shadow: 0 12px 40px 0 rgba(0,0,0,0.18), 0 1.5px 8px 0 rgba(210,19,23,0.07);
        border: 1.5px solid #f3f3f3;
        overflow: hidden;
        z-index: 2001;
        display: flex;
        flex-direction: column;
        gap: 1.2rem;
        animation: modalFadeIn 0.32s cubic-bezier(.33,1.02,.57,1.01);
    }*/

    #loginModal .modal-close {
        position: absolute;
        top: 0.8rem;
        right: 0.8rem;
        background: none;
        border: none;
        font-size: 2rem;
        line-height: 1;
        cursor: pointer;
        color: #666;
        transition: color 0.18s, transform 0.18s;
    }

    #loginModal .modal-header {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.5rem;
        margin-bottom: 1.2rem;
    }

    #loginModal .login-modal-logo {
        max-width: 280px !important;
        min-width: 140px !important;
        min-height: 120px !important;
        display: block;
        margin: 0 auto 0.4em auto !important;
        width: 100% !important;
        height: auto !important;
        transition: max-width 0.2s cubic-bezier(.4,0,.2,1);
    }

    /* --- UNIFY LOGIN MODAL BUTTON & INPUTS WITH SEARCH MODAL --- */
    #loginModal .login-form input[type="email"],
    #loginModal .login-form input[type="password"] {
        font-size: calc(1.2rem * var(--scale)) !important;
        padding: calc(0.6rem * var(--scale)) calc(1rem * var(--scale)) !important;
        border: 2px solid #ccd1d4 !important;
        border-radius: 4px !important;
        background: #fafbfc;
        color: #222;
        margin: 0 !important;
        box-shadow: 0 1px 4px 0 rgba(0,0,0,0.03);
        transition: border-color 0.18s, box-shadow 0.18s;
    }

        #loginModal .login-form input[type="email"]:focus,
        #loginModal .login-form input[type="password"]:focus {
            outline: none;
            border-color: #D21317;
            background: #fff;
            box-shadow: 0 2px 8px 0 rgba(210,19,23,0.07);
        }

    #loginModal .btn-primary,
    #loginModal .login-form button[type="submit"] {
        display: block !important;
        width: 100% !important;
        font-size: calc(1rem * var(--scale)) !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        padding: calc(0.6rem * var(--scale)) calc(1.5rem * var(--scale)) !important;
        min-height: 40px !important;
        border-radius: 4px !important;
        letter-spacing: 0.01em;
        /* background: linear-gradient(90deg, #D21317 80%, #B01214 100%) !important;*/
        color: #FFF !important;
        border: none !important;
        box-shadow: 0 2px 10px 0 rgba(210,19,23,0.13), 0 1.5px 8px 0 rgba(210,19,23,0.07) !important;
        margin-top: 0.2rem;
        cursor: pointer;
        transition: background 0.18s, box-shadow 0.18s, transform 0.13s;
    }

        #loginModal .btn-primary:hover,
        #loginModal .login-form button[type="submit"]:hover {
            /*background: linear-gradient(90deg, #B01214 80%, #D21317 100%) !important;*/
            box-shadow: 0 4px 16px rgba(0,0,0,0.3) !important;
            transform: translateY(2px) scale(1.03) !important;
            opacity: 0.93 !important;
            filter: none !important;
            text-decoration: none !important;
        }

    /* ==========================
   Logo responsivo
   ========================== */
    .login-modal-logo {
        display: block;
        margin: 0 auto 0.4em auto !important;
        max-width: 220px !important;
        width: 100% !important;
        height: auto !important;
        min-height: 100px !important;
        min-width: 100px !important;
        transition: max-width 0.2s cubic-bezier(.4,0,.2,1);
    }

    /* Font coerente con la modale search */
    #loginModal .modal-dialog.small,
    #loginModal .modal-header,
    #loginModal .login-form,
    #loginModal .login-form label,
    #loginModal .login-form input,
    #loginModal .login-form select,
    #loginModal .btn-primary,
    #loginModal .btn-google,
    #loginModal .btn-facebook,
    #loginModal .forgot-password,
    #loginModal .register-text {
        font-family: "Poppins", "Segoe UI", Arial, sans-serif !important;
        font-weight: 500;
        letter-spacing: 0.01em;
    }

        /* --- HOVER BUTTONS: UNIFORME A SEARCH MODAL --- */
        #loginModal .btn-primary:hover,
        #loginModal .btn-google:hover,
        #loginModal .btn-facebook:hover {
            /* Effetto abbassamento coerente con search modal */
            transform: translateY(2px) scale(1.03) !important;
            opacity: 0.93;
            box-shadow: 0 4px 18px rgba(210,19,23,0.13);
            filter: brightness(1.08) drop-shadow(0 2px 8px #eee);
            text-decoration: none !important;
        }

    #loginModal .btn-primary,
    #loginModal .btn-google,
    #loginModal .btn-facebook {
        text-decoration: none !important;
    }

    #loginModal .modal-close:hover {
        /* Effetto coerente con search modal (solo colore e leggera rotazione) */
        color: #D21317;
        transform: scale(1.13) rotate(8deg);
        text-decoration: none !important;
    }

    #loginModal .register-text .register-link:hover {
        /* Nessuna sottolineatura al passaggio del mouse */
        text-decoration: none !important;
        color: #B01214;
    }

    /*
  Forza dimensioni leggibili e disabilita ogni scaling/override per il bottone "Accedi" e i campi input del login modal su mobile.
  Questa regola batte ogni scaling, variabile, e !important, anche se altri layer o CSS provano a ridurre il font-size.
*/
    @media (max-width: 768px) {
        #loginModal .btn-primary,
        #loginModal .login-form button[type="submit"] {
            font-size: 0.68rem !important;
            min-height: 48px !important;
            padding: 0.95rem !important;
            line-height: 1.1 !important;
            --scale: 1 !important;
            --font-size: 0.68rem !important;
            text-transform: uppercase !important;
            letter-spacing: 0.01em !important;
            font-family: "Poppins", "Segoe UI", Arial, sans-serif !important;
        }

        #loginModal .login-form input[type="email"],
        #loginModal .login-form input[type="password"] {
            font-size: 1.25rem !important;
            padding: 0.7rem 1.1rem !important;
            --scale: 1 !important;
            --font-size: 1.25rem !important;
            font-family: "Poppins", "Segoe UI", Arial, sans-serif !important;
        }
    }

    /* --- FINAL UNIFORM HEIGHT & FONT FOR LOGIN MODAL BUTTON/INPUTS --- */
    #loginModal .login-form input[type="email"],
    #loginModal .login-form input[type="password"] {
        font-size: 1rem !important;
        padding: 0.45rem 0.8rem !important;
        height: 38px !important;
        min-height: 38px !important;
        line-height: 1.1 !important;
        border-radius: 4px !important;
    }

    #loginModal .btn-primary,
    #loginModal .login-form button[type="submit"] {
        font-size: 1rem !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        padding: 0.45rem 1.2rem !important;
        height: 40px !important;
        min-height: 40px !important;
        line-height: 1.1 !important;
        border-radius: 4px !important;
        letter-spacing: 0.01em;
        display: block !important;
        width: 100% !important;
    }

        #loginModal .btn-primary span,
        #loginModal .btn-primary {
            font-size: 1.05rem !important;
            font-weight: 700 !important;
            letter-spacing: 0.01em;
        }
    /* Remove all previous mobile/inline overrides for button/input size */
    @media (max-width: 768px), (max-width: 600px), (max-width: 500px) {
        #loginModal .btn-primary,
        #loginModal .login-form button[type="submit"],
        #loginModal .login-form input[type="email"],
        #loginModal .login-form input[type="password"] {
            font-size: 1rem !important;
            padding: 0.45rem 0.8rem !important;
            height: 38px !important;
            min-height: 38px !important;
            line-height: 1.1 !important;
        }

        #loginModal .btn-primary,
        #loginModal .login-form button[type="submit"] {
            padding: 0.45rem 1.2rem !important;
            height: 40px !important;
            min-height: 40px !important;
        }
    }

    /* --- ANIMAZIONE MODERNA LOGO LOGIN MODAL (fade+zoom, colori invariati) --- */
    /* Logo login: elimina filtri e animazioni che alterano i colori */
    /* RIMOSSO: le seguenti regole bloccavano l'animazione moderna richiesta */
    /*
#loginModal .login-modal-logo {
  filter: none !important;
  transform: none !important;
  transition: none !important;
  animation: none !important;
}
#loginModal .login-modal-logo:hover {
  filter: none !important;
  transform: none !important;
  animation: none !important;
}
*/

    /* Animazione fade+zoom moderna solo all'apparizione del logo login */
    #loginModal .login-modal-logo {
        /*opacity: 0;
        transform: scale(0.93);
        filter: blur(6px);
        animation: loginLogoFadeZoomIn 0.7s cubic-bezier(.33,1.02,.57,1.01) 0.08s both;*/
    }

    @keyframes loginLogoFadeZoomIn {
        0% {
            opacity: 0;
            transform: scale(0.93);
            filter: blur(6px);
        }

        60% {
            opacity: 1;
            transform: scale(1.04);
            filter: blur(1.5px);
        }

        100% {
            opacity: 1;
            transform: scale(1);
            filter: blur(0);
        }
    }

    /* ---------------------------------------------------------------
   ICONS & LOGO – BASE RULES
---------------------------------------------------------------- */
    .icon-menu,
    .icon-search,
    .icon-user,
    .menu-sticky,
    img.icon-menu,
    img.icon-search,
    img.icon-user,
    img.menu-sticky,
    .cat-actions img,
    .top-actions img,
    #miniSticky .icon-menu,
    #miniSticky img.icon-menu,
    #miniSticky .icon-menu.menu-trigger,
    #miniSticky img.icon-menu.menu-trigger {
        width: var(--icon-size);
        height: var(--icon-size);
        max-width: var(--icon-size);
        max-height: var(--icon-size);
        object-fit: contain;
        display: inline-block; /* niente !important: più facile da sovrascrivere */
        vertical-align: middle;
    }

    /* ---------------------------------------------------------------
   LOGO – BASE RULES
---------------------------------------------------------------- */
    .logo,
    .logo-sticky {
        width: var(--logo-size);
        height: auto;
        max-height: var(--bar-height);
        object-fit: contain;
        display: block; /* senza !important → l’override può funzionare */
    }

    /* correzione offset verticale */
    .top-bar .logo,
    .cat-bar.sticky .logo-sticky,
    .side-menu .side-logo {
        transform: translateY(-3px);
    }

    /* ---------------------------------------------------------------
   ICONS POSITIONING & TRANSFORMS
---------------------------------------------------------------- */
    .top-bar .icon-menu,
    .top-bar img.icon-menu,
    .top-bar button.hamburger,
    .cat-bar.sticky .menu-sticky,
    .cat-bar.sticky img.menu-sticky,
    .cat-bar.sticky button.hamburger,
    .cat-bar.sticky .icon-menu.menu-trigger,
    .cat-bar.sticky img.icon-menu.menu-trigger {
        transform: translateY(-1px) scaleX(-1);
    }

    .top-bar .icon-search,
    .top-bar .icon-user,
    img.icon-search,
    img.icon-user,
    .cat-bar.sticky .icon-search,
    .cat-bar.sticky .icon-user {
        transform: translateY(-2px);
    }

    /* ---------------------------------------------------------------
   MINI-STICKY MENU ICON
---------------------------------------------------------------- */
    #miniSticky .icon-menu,
    #miniSticky img.icon-menu,
    #miniSticky .icon-menu.menu-trigger,
    #miniSticky img.icon-menu.menu-trigger {
        margin-right: 1.1rem;
        align-items: center;
        height: 2.1rem;
        transform: none;
    }

    @media (max-width: 768px) {
        #miniSticky .icon-menu,
        #miniSticky img.icon-menu,
        #miniSticky .icon-menu.menu-trigger,
        #miniSticky img.icon-menu.menu-trigger {
            margin-right: 0.8rem;
            height: 1.7rem;
        }
    }

    /* ---------------------------------------------------------------
   VISIBILITY – NORMAL vs STICKY
---------------------------------------------------------------- */
    /* icona menu (menu-sticky) */
    .cat-bar:not(.sticky) .menu-sticky,
    .cat-bar:not(.sticky) .icon-menu {
        display: none;
    }

    .cat-bar.sticky .menu-sticky,
    .cat-bar.sticky .icon-menu,
    .cat-bar.sticky .menu-sticky.menu-trigger,
    .cat-bar.sticky img.menu-sticky.menu-trigger {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin-right: 0.7rem;
        opacity: 1;
        pointer-events: auto;
    }

    /* ---------------------------------------------------------------
   HIDE BIG LOGO WHEN STICKY
---------------------------------------------------------------- */
    .cat-bar.sticky .logo:not(.logo-sticky) { /* “logo grande” */
        /* display: none !important;*/
    }

    /* se il logo grande è un <img> dentro .cat-left */
    .cat-bar.sticky .cat-left img:not(.logo-sticky):not(.menu-sticky):not(.icon-menu) {
        display: none !important;
    }

    /* ---------------------------------------------------------------
   FALLBACK – ASSICURA SCALING CORRETTO PER QUALSIASI <img>
---------------------------------------------------------------- */
    img.icon-search,
    img.icon-user,
    img.icon-menu,
    img.menu-sticky,
    .cat-actions img,
    .top-actions img {
        width: var(--icon-size);
        height: var(--icon-size);
        max-width: var(--icon-size);
        max-height: var(--icon-size);
        object-fit: contain;
        display: inline-block;
        vertical-align: middle;
    }

    /* Solleva di 2px tutte le icone logo ovunque, tranne su mobile */
    .logo,
    .logo-sticky,
    .mini-top .logo,
    .top-bar .logo,
    .cat-bar .logo-sticky {
        position: relative;
        top: -2px;
    }

    /* Disattiva il sollevamento su mobile (max 700px, modifica se serve) */
    @media (max-width: 768px) {
        .logo,
        .logo-sticky,
        .mini-top .logo,
        .top-bar .logo,
        .cat-bar .logo-sticky {
            top: 0;
        }
    }

    /* === CAT-BAR ICONS – solo dimensionamento, non visibilità === */
    .cat-bar .cat-actions img,
    .cat-bar .icon-search,
    .cat-bar .icon-user {
        width: var(--icon-size);
        height: var(--icon-size);
        max-width: var(--icon-size);
        max-height: var(--icon-size);
        object-fit: contain;
        vertical-align: middle;
    }
}

@layer effects {
    /* RIMOSSE le graffe e la dichiarazione @layer override che racchiudevano tutto il file. Tutte le regole sono ora a livello root. */

    /* sotto-menu bianco / rosa */
    .sub-menu a:hover {
        background: rgba(0, 0, 0, 0.06);
    }

    /* override con importante */
    .sub-nav a:hover {
        background: rgba(255, 255, 255, 0.18) !important;
    }

    .info-icon:hover .tooltip,
    .info-icon:focus .tooltip {
        display: block;
    }

    .cat-bar .categories a.active:not(.no-override) {
        position: relative !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0.2rem 0.6rem !important;
        height: var(--button-height) !important;
        line-height: var(--button-height) !important;
        font-weight: bold !important;
        border-radius: 6px !important;
        background: transparent !important;
        color: var(--accent-color) !important;
        transform: translate(2px, 2px) !important;
        box-shadow: inset -2px 0 0 var(--accent-color), inset 0 -2px 0 var(--accent-color), inset 2px 2px 4px rgba(0, 0, 0, 0.07), inset -1px -1px 3px rgba(0, 0, 0, 0.15) !important;
        transition: all 0.2s ease-in-out !important;
    }

    .cat-bar.sticky .categories a.active:not(.no-override) {
        color: #fff !important;
        box-shadow: inset -2px 0 0 #fff, inset 0 -2px 0 #fff, inset 2px 2px 4px rgba(0, 0, 0, 0.07), inset -1px -1px 3px rgba(0, 0, 0, 0.15) !important;
    }

    .cat-bar .categories a.active:hover {
        transform: translate(-2px, -2px) !important;
        box-shadow: inset 2px 0 0 var(--accent-color), inset 0 2px 0 var(--accent-color), inset -2px -2px 4px rgba(0, 0, 0, 0.07), inset 1px 1px 3px rgba(0, 0, 0, 0.15) !important;
        background: transparent !important;
        color: var(--accent-color) !important;
    }

    .cat-bar.sticky .categories a.active:hover {
        transform: translate(-2px, -2px) !important;
        box-shadow: inset 2px 0 0 #fff, inset 0 2px 0 #fff, inset -2px -2px 4px rgba(0, 0, 0, 0.07), inset 1px 1px 3px rgba(0, 0, 0, 0.15) !important;
        background: transparent !important;
        color: #fff !important;
    }

    .cat-bar .categories a:hover:not(.no-override) {
        transform: translate(2px, 2px) !important;
        background: transparent !important;
        color: var(--accent-color) !important;
        box-shadow: inset -2px 0 0 var(--accent-color), inset 0 -2px 0 var(--accent-color), inset 2px 2px 4px rgba(0, 0, 0, 0.07), inset -1px -1px 3px rgba(0, 0, 0, 0.15) !important;
    }

    .cat-bar .categories a.active:hover:not(.no-override) {
        transform: translate(4px, 4px) !important;
        box-shadow: none !important;
        background: transparent !important;
        color: var(--accent-color) !important;
    }

    .cat-bar.sticky .categories a.active:hover:not(.no-override) {
        transform: translate(2px, 2px) !important;
        box-shadow: none !important;
        background: transparent !important;
        color: #fff !important;
    }

    .cat-bar.sticky .categories a:hover:not(.no-override) {
        color: #fff !important;
        background: transparent !important;
        box-shadow: inset -2px 0 0 #fff, inset 0 -2px 0 #fff, inset 2px 2px 4px rgba(0, 0, 0, 0.07), inset -1px -1px 3px rgba(0, 0, 0, 0.15) !important;
    }

    /* Tutte le regole hover/active sono ora in buttons-over.css */

    .categories a.active {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0.35rem 0.6rem; /* aumenta il padding verticale */
        margin-bottom: 4px; /* lascia spazio per la shadow */
        line-height: 1.1;
        border-radius: 8px;
        background-color: rgba(var(--accent-rgb), 0.12);
        color: var(--accent-color);
        box-shadow: inset 0 -2px 0 rgba(var(--accent-rgb), 0.9);
        font-weight: bold;
        transition: all 0.2s ease;
    }
    /* —– OVERRIDE: disattiva l’active quando si hovera un’altra voce —– */
    .cat-bar .categories:hover a.active:not(:hover):not(.no-override),
    .cat-bar.sticky .categories:hover a.active:not(:hover):not(.no-override) {
        /* Solo trasparenza, nessun movimento */
        opacity: 0.4 !important;
        color: var(--accent-color) !important;
        background: transparent !important;
        box-shadow: none !important;
        transform: none !important;
    }

    .cat-bar .categories a.active:hover:not(.no-override),
    .cat-bar.sticky .categories a.active:hover:not(.no-override) {
        /* Nessun movimento in hover sulla voce attiva */
        transform: none !important;
    }

    .categories a:hover:not(.active):not(.no-override) {
        color: var(--accent-color) !important;
    }

    .cat-bar .categories a:hover:not(.active):not(.no-override) {
        color: var(--accent-color) !important;
        background: transparent !important;
    }

    .cat-bar.sticky .categories a:hover:not(.active):not(.no-override) {
        color: #fff !important;
        background: transparent !important;
    }
    /* Allarga area cliccabile senza ridurre l’icona */
    .icon-menu,
    .top-bar .icon-menu,
    .cat-bar.sticky .menu-sticky {
        box-sizing: content-box !important; /* padding esterno al content */
        width: 28px !important; /* dimensione icona fissa */
        height: 28px !important;
        padding: 0.75rem !important; /* area cliccabile più grande */
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 6px !important;
    }

        .icon-menu:hover,
        .top-bar .icon-menu:hover,
        .cat-bar.sticky .menu-sticky:hover {
            background-color: rgba(255,255,255,0.15) !important;
        }
    /* ——— Solo per le icone: fissa 28×28 + padding uniforme ——— */
    .top-bar .icon-menu,
    .top-bar .icon-search,
    .top-bar .icon-user,
    .cat-bar.sticky .menu-sticky,
    .cat-bar.sticky .icon-search,
    .cat-bar.sticky .icon-home,
    .cat-bar.sticky .icon-menu-s,
    .cat-bar.sticky .icon-user {
        box-sizing: content-box !important;
        width: 28px !important;
        height: 28px !important;
        padding: 0.5rem !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 6px !important;
        transition: background-color 0.2s ease !important;
    }

        /* hover uniforme */
        .top-bar .icon-menu:hover,
        .top-bar .icon-search:hover,
        .top-bar .icon-user:hover,
        .cat-bar.sticky .menu-sticky:hover,
        .cat-bar.sticky .icon-search:hover,
        .cat-bar.sticky .icon-menu-s:hover,
        .cat-bar.sticky .icon-user:hover {
            background-color: rgba(255,255,255,0.15) !important;
        }

        .top-bar .icon-menu:hover {
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
            transition: box-shadow 0.4s ease, transform 0.1s ease !important;
            cursor: pointer !important;
            border-radius: 6px !important;
            transform: translateY(2px) !important;
        }

        .cat-bar.sticky .menu-sticky:hover {
            transition: box-shadow 0.4s ease, transform 0.1s ease !important;
            cursor: pointer !important;
            border-radius: 6px !important;
            transform: translateY(2px) !important;
        }

    /* ——— Solo per il logo: niente width/height forzate, solo padding ——— */
    .top-bar .logo,
    .cat-bar.sticky .logo-sticky {
        box-sizing: content-box !important;
        padding: 0.5rem !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 6px !important;
        transition: background-color 0.2s ease !important;
    }

        .top-bar .logo:hover,
        /*.cat-bar.sticky .logo-sticky:hover*/ {
            background-color: rgba(255,255,255,0.15) !important;
        }
    /* — override finale — */
    /* riduce di 20px il max-width della cat-bar non-sticky */
    .cat-bar:not(.sticky) > .wrap {
        max-width: calc(var(--max-width) - 45px) !important;
    }


    /* Stato normale */
    img.icon-menu,
    img.menu-sticky,
    .top-bar .icon-menu,
    .cat-bar.sticky .menu-sticky {
        transform: rotate(0deg) !important;
        transition: transform 0.3s ease !important;
        display: inline-block !important;
        backface-visibility: hidden !important;
        will-change: transform;
        transform-origin: center;
        cursor: pointer !important;
    }


    /* Quando il menu è aperto, ruota l’icona */
    body.menu-open img.icon-menu,
    body.menu-open img.menu-sticky,
    body.menu-open .top-bar .icon-menu,
    body.menu-open .cat-bar.sticky .menu-sticky,
    body.menu-open #miniSticky .icon-menu.menu-trigger,
    body.menu-open .mob-top .icon-menu.menu-trigger,
    body.menu-open .mob-top .mob-ico.menu-trigger,
    body.menu-open img.logo-sticky.icon-home {
        transform: rotate(-90deg) !important;
    }



    .top-bar img.icon-menu,
    .cat-bar.sticky img.menu-sticky,
    #miniSticky icon-menu-sticky {
        transition: transform 0.3s ease-in-out !important;
        transform: rotate(0deg) !important;
        backface-visibility: hidden;
        will-change: transform;
        cursor: pointer;
        box-shadow: none !important;
        filter: none !important;
        opacity: 1 !important;
        position: relative;
        z-index: 9999 !important;
    }

    body.menu-open img.icon-menu,
    body.menu-open img.menu-sticky {
        transform: rotate(-90deg) !important;
    }

    body.menu-open img.icon-menu,
    body.menu-open img.menu-sticky,
    body.menu-open img.logo-sticky.icon-home {
        filter: brightness(1.7) drop-shadow(0 0 6px rgba(255, 255, 255, 1)) !important;
        transition: transform 0.3s ease, filter 0.3s ease !important;
    }


    /* === Mini Sticky Bar – Core Styles === */
    #miniSticky {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: var(--bar-height);
        background: rgba(var(--accent-rgb), var(--alpha));
        color: #fff;
        font-family: "Poppins", sans-serif;
        font-weight: 500;
        z-index: 1002;
    }

        #miniSticky .wrap {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            max-width: var(--max-width);
            margin: 0 auto;
            padding: 0 var(--gap);
            height: 100%;
            overflow: hidden;
        }

    .mini-left,
    .mini-right {
        display: flex;
        align-items: center;
        gap: 0.6rem;
        flex-shrink: 0;
    }

    .mini-categories-wrapper {
        flex: 1;
        display: flex;
        align-items: center;
        overflow-x: auto;
        min-width: 0;
        margin: 0 0.5rem;
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* IE 10+ */
    }

        .mini-categories-wrapper::-webkit-scrollbar {
            display: none;
        }

    .mini-categories {
        display: flex;
        gap: 0.5rem;
        white-space: nowrap;
    }

        .mini-categories a {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: #fff !important;
            text-decoration: none;
            font-size: var(--font-size) !important;
            /*font-weight: 60 !important;*/
            padding: 0 0.6rem !important;
            height: var(--button-height);
            line-height: var(--button-height);
            background: none;
            margin-bottom: 4px !important;
        }

    .ellipsis-icon {
        display: none;
        width: var(--icon-size);
        height: var(--icon-size);
        cursor: pointer;
    }

    /* mostra i puntini solo in caso di overflow (gestito via JS) */
    #miniSticky.overflowing-right .ellipsis-icon {
        display: block;
    }
    /* Modern mask-fade effect attivato in overflow */
    #miniSticky.overflowing-right .mini-categories-wrapper {
        -webkit-mask-image: linear-gradient(to right, black 70%, transparent 100%);
        mask-image: linear-gradient(to right, black 70%, transparent 100%);
    }

    .cat-bar.sticky .categories a:hover:not(.active):not(.no-override),
    .cat-bar.sticky .categories a:hover:not(.no-override) {
        color: var(--accent-color) !important;
        background: transparent !important;
        /* forza override su regole precedenti */
    }

    .cat-bar.sticky .categories a:hover:not(.active):not(.no-override),
    .cat-bar.sticky .categories a:active:not(.active):not(.no-override) {
        color: #fff !important;
    }

    .cat-bar.sticky .categories:hover a.active:not(:hover):not(.no-override) {
        /* La sezione attiva resta bianca e si oscura solo (opacity), nessun movimento */
        opacity: 0.4 !important;
        color: #fff !important;
        background: transparent !important;
        box-shadow: none !important;
        transform: none !important;
    }

    /* RIMOSSA la regola globale per search-trigger e login-trigger, ora limitata solo alla sticky bar */
    .cat-bar.sticky a.search-trigger:hover, .cat-bar.sticky a.search-trigger:focus, .cat-bar.sticky a.search-trigger:active,
    .cat-bar.sticky a.login-trigger:hover, .cat-bar.sticky a.login-trigger:focus, .cat-bar.sticky a.login-trigger:active {
        background: none !important;
        box-shadow: none !important;
        outline: none !important;
        filter: none !important;
    }

    .cat-bar.sticky .menu-btn.menu-trigger {
        display: inline-flex !important;
    }

    .cat-bar.sticky .menu-sticky {
        display: inline-block !important;
    }

    /* PATCH: Solo in sticky, quando il mouse è nello spazio vuoto della .categories, la voce attiva NON deve cambiare aspetto (nessun hover, nessuna opacità ridotta, nessun box-shadow, nessun colore diverso). */
    .cat-bar.sticky .categories:hover:not(:has(a:hover)) a.active:not(.no-override) {
        opacity: 1 !important;
        color: #fff !important;
        background: transparent !important;
        box-shadow: inset -2px 0 0 #fff, inset 0 -2px 0 #fff, inset 2px 2px 4px rgba(0, 0, 0, 0.07), inset -1px -1px 3px rgba(0, 0, 0, 0.15) !important;
        transform: translate(2px, 2px) !important;
    }

    /* PATCH definitiva e precisa: la voce attiva NON si opacizza e NON perde il suo aspetto quando il mouse è su uno spazio vuoto della .categories,
   sia in cat-bar normale che sticky. Si opacizza normalmente solo quando il mouse è sopra un altro link. L'effetto visivo resta quello originale. */

    .cat-bar .categories:hover:not(:has(a:hover)) a.active:not(.no-override),
    .cat-bar.sticky .categories:hover:not(:has(a:hover)) a.active:not(.no-override) {
        /* Ripristina esattamente lo stile di default della voce attiva */
        opacity: 1 !important;
        color: var(--accent-color) !important;
        background: transparent !important;
        box-shadow: inset -2px 0 0 var(--accent-color), inset 0 -2px 0 var(--accent-color), inset 2px 2px 4px rgba(0, 0, 0, 0.07), inset -1px -1px 3px rgba(0, 0, 0, 0.15) !important;
        transform: translate(2px, 2px) !important;
    }

    .cat-bar.sticky .categories:hover:not(:has(a:hover)) a.active:not(.no-override) {
        color: #fff !important;
        box-shadow: inset -2px 0 0 #fff, inset 0 -2px 0 #fff, inset 2px 2px 4px rgba(0, 0, 0, 0.07), inset -1px -1px 3px rgba(0, 0, 0, 0.15) !important;
    }

    /* PATCH: Impedisci che la voce attiva si "sollevi" (transform) quando il mouse è sopra un'altra voce della barra categorie */
    .cat-bar .categories:hover a.active:not(:hover):not(.no-override),
    .cat-bar.sticky .categories:hover a.active:not(:hover):not(.no-override) {
        /* Niente transform: il testo resta fermo */
        transform: translate(2px, 2px) !important;
    }

    @media (max-width: 1000px) and (min-width: 701px) {
        /* Patch: Limita l'altezza della .cat-bar > .wrap e delle .categories per evitare che gli effetti escano dal contenitore */
        .cat-bar:not(.sticky) > .wrap {
            overflow: hidden !important;
            height: var(--bar-height) !important;
            min-height: var(--bar-height) !important;
            max-height: var(--bar-height) !important;
        }

        .cat-bar:not(.sticky) .categories {
            overflow: hidden !important;
            height: 100% !important;
            min-height: 100% !important;
            max-height: 100% !important;
            display: flex !important;
            align-items: center !important;
        }

            .cat-bar:not(.sticky) .categories a:not(.no-override),
            .cat-bar:not(.sticky) .categories a.active:not(.no-override) {
                display: inline-flex !important;
                align-items: center !important;
                justify-content: center !important;
                height: 1.7rem !important;
                min-height: 1.7rem !important;
                line-height: 1.7rem !important;
                padding-top: 0 !important;
                padding-bottom: 0 !important;
                transform: none !important;
                /* RIMOSSO height: 100% e min-height: 100% che annullavano l'effetto */
            }
    }
}
@layer components{
    .icon-menu:hover,
    .icon-search:hover,
    .icon-user:hover,
    .menu-sticky:hover,
    .top-actions a:hover,
    .top-links a:hover,
    .cat-bar .categories a:hover,
    .cat-bar.sticky .categories a:hover,
    .cat-bar.sticky .icon-search:hover,
    .cat-bar.sticky .icon-user:hover,
    .cat-bar.sticky .menu-sticky:hover {
        /*box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
        transition: box-shadow 0.4s ease, transform 0.1s ease;*/
        cursor: pointer;
        border-radius: 6px;
        transform: translateY(2px);
    }
}


@layer override {
    .icon-menu:hover,
    .icon-search:hover,
    .icon-user:hover,
    .menu-sticky:hover,
    .top-actions a:hover,
    .top-links a:hover,
    .cat-bar .categories a:hover,
    .cat-bar.sticky .categories a:hover,
    .cat-bar.sticky .icon-search:hover,
    .cat-bar.sticky .icon-user:hover,
    .cat-bar.sticky .menu-sticky:hover {
       /* box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) ;
        transition: box-shadow 0.4s ease, transform 0.1s ease;*/
        cursor: pointer;
        border-radius: 6px;
        transform: translateY(2px);
    }

    .top-actions a:active,
    .top-links a:active,
    .cat-bar .categories a:active {
        transform: translateY(3px);
    }

    /* HOVER/ACTIVE MINI-TOP */
    .mini-top a:hover {
        background: rgba(255,255,255,0.10);
        color: var(--accent-color, #e60044);
        transition: background 0.2s, color 0.2s;
    }

    .mini-top a:active {
        background: rgba(255,255,255,0.18);
        color: var(--accent-color, #e60044);
    }

    /* === HOVER/ACTIVE SOLO SUL BOTTONE === */
    .top-bar .top-btn:hover,
    .top-bar .top-btn:active,
    .top-bar .top-btn:focus {
        background: rgba(255,255,255,0.13);
        color: var(--accent-color, #e60044);
        box-shadow: 0 2px 12px rgba(0,0,0,0.10);
        outline: none;
    }

    .top-bar .top-btn img:hover,
    .top-bar .top-btn img:active {
        background: none !important;
        box-shadow: none !important;
        filter: none !important;
    }

    /* Mantieni il testo ROSSO sulle bottoni categorie in hover/active (solo NON sticky) */
    .cat-bar .categories a:hover,
    .cat-bar .categories a:active {
        color: var(--accent-color) !important;
    }
    /* Mantieni il testo BIANCO sulle categorie della sticky bar in hover/active */
    .cat-bar.sticky .categories a:hover,
    .cat-bar.sticky .categories a:active {
        color: #fff !important;
    }

    /* Mantieni il testo bianco sulle categorie della top-bar in hover/active */
    .top-bar .top-links .top-btn:hover,
    .top-bar .top-links .top-btn:active {
        color: #fff !important;
    }

    /* Mantieni il testo bianco anche sui bottoni top-actions (destra top-bar) in hover/active */
    .top-bar .top-actions .top-btn:hover,
    .top-bar .top-actions .top-btn:active {
        color: #fff !important;
    }

    /* MINI-TOP: hover/active identico a top-bar, bianco uniforme */
    .mini-top .mini-btn:hover,
    .mini-top .mini-btn:active,
    .mini-top .mini-btn:focus {
        background: rgba(255,255,255,0.13) !important;
        color: #fff !important;
        box-shadow: 0 2px 12px rgba(0,0,0,0.10);
        outline: none;
    }

    .mini-top .mini-btn img:hover,
    .mini-top .mini-btn img:active {
        background: none !important;
        box-shadow: none !important;
        filter: none !important;
    }
    /*.btn-primary {
        color: #fff !important;
        background-color: #d21317 !important;
        border-color: #d21317 !important;
    }*/
    /* RIMUOVI OGNI REGOLA HOVER/ACTIVE SU .menu-btn.menu-trigger e .menu-sticky.menu-trigger */
    /* --- PATCH: rimosse regole che alterano visibilità o effetti su questi selettori --- */
    /*
  .cat-bar .menu-btn.menu-trigger,
  .cat-bar .menu-sticky.menu-trigger {
    box-shadow: none !important;
    background: none !important;
    color: inherit !important;
    transform: none !important;
  }
  .cat-bar.sticky .menu-btn.menu-trigger,
  .cat-bar.sticky .menu-sticky.menu-trigger {
    box-shadow: none !important;
    background: none !important;
    color: inherit !important;
    transform: none !important;
  }
  */

    /* --------------------------------------------------------------------
   scale.css  ·  Gestione centralizzata dello scaling tramite --scale
   -------------------------------------------------------------------- */

    /* ========= VARIABILI BASE & DERIVATE ========= */
    :root {
        /* grandezze di partenza (modifica qui per cambiare l’intero sistema) */
        --base-font-size: 1rem; /* 16 px */
        --base-icon-size: 28px;
        --base-logo-size: 35px;
        --base-bar-height: 60px;
        --base-gap: 1rem;
        --base-drawer-width: 320px;
        /* fattore di scala globale */
        --scale: 1;
        /* grandezze calcolate (NON toccare) */
        --font-size: calc(var(--base-font-size) * var(--scale));
        --icon-size: calc(var(--base-icon-size) * var(--scale));
        --logo-size: calc(var(--base-logo-size) * var(--scale));
        --bar-height: calc(var(--base-bar-height) * var(--scale));
        --gap: calc(var(--base-gap) * var(--scale));
        --drawer-w: calc(var(--base-drawer-width) * var(--scale));
    }

    /* ========= BREAKPOINTS ========= */
    /* Ordina dal più largo al più stretto: l’ultimo vince in cascata */

    @media (max-width: 1000px) {
        :root {
            --scale: 0.76;
        }
    }
    /* −24 %  */
    @media (max-width: 820px) {
        :root {
            --scale: 0.66;
        }
    }
    /* −34 %  */
    @media (max-width: 720px) {
        :root {
            --scale: 0.59;
        }
    }
    /* −41 %  */
    @media (max-width: 670px) {
        :root {
            --scale: 0.54;
        }
    }
    /* −46 %  */
    @media (max-width: 620px) {
        :root {
            --scale: 0.41;
        }
    }
    /* −59 %  */
    @media (max-width: 500px) {
        :root {
            --scale: 0.28;
        }
    }
    .top-links a, .top-actions a, .categories a, .cat-actions a, .menu-label
   {
        font-size: var(--font-size) !important;
    }
    /* −72 %  */

    /* ------------------------------- USO
   Tutte le parti dell’interfaccia che usano le variabili derivate —
   es.  font-size: var(--font-size);  height: var(--bar-height);
   width: var(--icon-size);  padding: var(--gap) —
   si ridimensioneranno automaticamente ai vari breakpoint.
-------------------------------------------------------------------- */
    /* ========= SCALING ICONS (search, menu, user, ecc) ========= */
    .icon-menu,
    .icon-search,
    .icon-user,
    .mini-top .icon-menu,
    .mini-top .icon-search,
    .mini-top .icon-user,
    .top-bar .icon-menu,
    .top-bar .icon-search,
    .top-bar .icon-user,
    img.icon-menu,
    img.icon-search,
    img.icon-user {
        width: var(--icon-size) !important;
        height: var(--icon-size) !important;
        min-width: var(--icon-size) !important;
        min-height: var(--icon-size) !important;
        max-width: var(--icon-size) !important;
        max-height: var(--icon-size) !important;
        object-fit: contain;
        display: inline-block;
        vertical-align: middle;
        /* rimuovi eventuali override precedenti */
    }

    /* Solleva di 2px tutte le icone logo ovunque, tranne su mobile */
    .logo,
    .logo-sticky,
    .mini-top .logo,
    .top-bar .logo,
    .cat-bar .logo-sticky {
        position: relative;
        top: -2px;
    }

    /* Disattiva il sollevamento su mobile (max 700px, modifica se serve) */
    @media (max-width: 768px) {
        .logo,
        .logo-sticky,
        .mini-top .logo,
        .top-bar .logo,
        .cat-bar .logo-sticky {
            top: 0;
        }
    }



    /* Distanza tra logo e menu in tutte le bar top e sticky */

    /* Spaziatura uniforme tra tutti gli elementi nelle bar top/sticky */
    .top-bar .top-left,
    .mini-top .top-left,
    .cat-bar .cat-left,
    #miniSticky .mini-left {
        display: flex;
        align-items: center;
        gap: 0rem; /* Cambia il valore a piacere */
    }





    /* Mostra la progress bar desktop sopra i 900px */
    @media (min-width: 900px) {
        .progress-container {
            display: block !important;
        }

        .scroll-progress-bar {
            display: none !important;
        }
    }
    /* Mostra la progress bar desktop anche tra 700px e 899px */
    @media (max-width: 899px) and (min-width: 701px) {
        .progress-container {
            display: block !important;
        }

        .scroll-progress-bar {
            display: none !important;
        }
    }
    /* Mostra solo la barra MOBILE sotto i 700px */
    @media (max-width: 768px) {
        .progress-container {
            display: none !important;
        }

        .scroll-progress-bar {
            display: block !important;
        }
    }

    body.loading .scroll-progress,
    body.loading .mini-scroll-progress {
        display: none !important;
    }

    .mini-top .wrap {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        min-width: 0;
    }

    @media (max-width: 768px) {
        .mini-top {
            display: none !important;
        }

            .mini-top .wrap {
                display: none !important;
            }

        /* BLOCCA OGNI SCALING SU MOBILE: forza --scale a 1 e font-size base a 1rem per TUTTO il drawer e sub-menu */
        .side-menu, .side-menu *, aside.sub-menu, aside.sub-menu * {
            --scale: 1 !important;
            --font-size: 1rem !important;
            font-size: 1rem !important;
        }
    }


    /* Sposta questa regola alla fine di tutti i tuoi CSS (dopo reset.css) */
    .cat-bar.sticky .menu-sticky {
        display: flex !important;
        pointer-events: auto !important;
        opacity: 1 !important;
        visibility: visible !important;
        width: 28px !important;
        height: 28px !important;
        background: none !important;
        z-index: 1002 !important;
    }

    /* Riduci l'area hover/click dell'hamburger mobile */
    .mob-top .mob-ico.menu-trigger {
        padding: 0 !important;
        /* Se vuoi un po' di respiro, usa ad esempio: padding: 0.15rem !important; */
        box-sizing: content-box !important;
    }

    /* NUOVA REGOLA: dimensione coerente con user/search, lasciando agire --ico-sz di mobile.css */
    .mob-top .mob-ico.menu-trigger {
        width: var(--ico-sz);
        height: var(--ico-sz);
        min-width: var(--ico-sz);
        min-height: var(--ico-sz);
        max-width: var(--ico-sz);
        max-height: var(--ico-sz);
        object-fit: contain;
        display: inline-block;
        vertical-align: middle;
        /* nessun !important, lascia priorità a mobile.css */
    }
}

/*================================================================
  MOBILE (≤ 700 px) · layer: override
================================================================*/
@layer override {

    /*-------------------------------------------------------------
    0 · Variabili di tema mobile
  -------------------------------------------------------------*/
    @media (max-width: 768px) {


        .side-menu,
        aside.sub-menu {
            top: var(--bar-h) !important;
            height: calc(100% - var(--bar-h)) !important;
            /* Se serve scroll verticale */
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
        }
    }

    /*-------------------------------------------------------------
    1 · Desktop/Tablet reset – visibili solo sotto 700 px
  -------------------------------------------------------------*/
    :where(.mob-top, .mob-cat) {
        display: none;
    }

    /*-------------------------------------------------------------
    2 · Mobile layout
  -------------------------------------------------------------*/
    @media (max-width: 768px) {

        /* Nascondi le barre desktop */
        .top-bar,
        .cat-bar,
        #miniSticky {
            display: none !important;
        }

        /* ---------------- TOP-BAR mobile -------------- */
        .mob-top {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1rem 1.2rem !important;
            height: var(--bar-h);
            background: rgba(var(--brand-rgb), var(--brand-alpha));
            position: sticky;
            top: 0;
            z-index: 1001;
        }

        .mob-ico {
            width: var(--ico-sz);
            height: var(--ico-sz);
            object-fit: contain;
            cursor: pointer;
        }

        /* lente di ricerca nera */
        .mob-search .mob-ico {
            filter: invert(1) brightness(0) contrast(120%);
        }

        .mob-logo {
            max-height: var(--logo-h);
            width: auto;
            object-fit: contain;
        }

        /* ------------- BARRA CATEGORIE --------------- */
        .mob-cat {
            display: block !important;
            position: sticky;
            top: var(--bar-h);
            z-index: 998;
            background: var(--cat-bg);
            min-height: var(--cat-h);
            overflow: visible;
            position: relative;
        }

        .mob-cat-inner {
            display: flex;
            align-items: center;
            padding: 0 .6rem 0 1.1rem !important;
            height: var(--cat-h);
            position: relative; /* necessario per posizionamento assoluto figli */
        }

        .mob-nav {
            display: flex;
            overflow-x: auto;
            gap: 0.25rem !important;
            flex: 1 1 auto;
            scrollbar-width: none; /* Firefox */
        }

            .mob-nav::-webkit-scrollbar {
                display: none;
            }

            .mob-nav a {
                font: 700 .9rem/1 "Poppins", sans-serif;
                /*text-transform: uppercase;*/
                white-space: nowrap;
                color: #000;
                padding: .45rem .75rem;
                border-radius: 6px;
                text-decoration: none;
            }

                .mob-nav a:first-child {
                    background: #D21317;
                    color: #fff;
                    box-shadow: inset 0 2px 4px rgba(0,0,0,.25);
                }

        /* lente di ricerca a destra della nav */
        .mob-search {
            margin-left: .7rem;
            position: relative;
            padding-left: 1.1rem;
            font-size: 1.25rem;
            color: #999;
        }

        /* Uniforma padding destro icona search in barra categorie mobile con user in top-bar mobile */
        .mob-cat-inner .mob-search .mob-ico {
            width: var(--ico-sz) !important;
            height: var(--ico-sz) !important;
            min-width: var(--ico-sz) !important;
            min-height: var(--ico-sz) !important;
            max-width: var(--ico-sz) !important;
            max-height: var(--ico-sz) !important;
            object-fit: contain !important;
            display: inline-block !important;
            vertical-align: middle !important;
            padding: 0 0.75rem 0 0 !important;
            margin: 0 !important;
            box-sizing: content-box !important;
        }

        /* Riduci dimensione e padding del pulsante cerca mobile */
        .mob-cat-inner .mob-search .mob-ico {
            width: 28px !important;
            height: 28px !important;
            min-width: 28px !important;
            min-height: 28px !important;
            max-width: 28px !important;
            max-height: 28px !important;
            padding: 0 0.3rem 0 0.3rem !important;
            margin: 0 !important;
            margin-right: 0 !important;
        }

        /* Aumenta il margine destro dell'icona cerca mobile di 0.2rem */
        .mob-cat-inner .mob-search .mob-ico {
            margin-right: 0.2rem !important;
        }

        /* ------------- PROGRESS BAR ------------------- */
        .scroll-progress-bar-mobile {
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 3px;
            background: #f7f7f7;
            z-index: 2;
        }

        .mob-cat {
            position: sticky;
            top: var(--bar-h);
            z-index: 998;
            background: var(--cat-bg);
            /* assicurati che abbia almeno height: var(--cat-h); */
            min-height: var(--cat-h);
            /* se vuoi che la progress bar non "spinga" il contenuto sotto */
            overflow: visible;
        }


        /* Freccia di scorrimento: più grande, rossa, leggermente sollevata e spostata un po' più a destra */
        .mob-arrow {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 2.3rem;
            height: 2.3rem;
            margin-left: 0.0rem !important; /* aumentato leggermente */
            font-size: 2.1rem;
            line-height: 1;
            color: var(--accent-color);
            background: none;
            border: none;
            cursor: pointer;
            position: relative;
            top: -0.18rem; /* micro-aggiustamento: ancora un po' più in alto */
            left: 0.0rem; /* spostata un po' più a destra */
            transition: transform 0.25s cubic-bezier(.4,2,.6,1);
            box-shadow: none;
            flex: 0 0 2.3rem !important; /* non shrink, larghezza fissa */
            min-width: 2.3rem !important;
            max-width: 2.3rem !important;
            transform: rotate(0deg);
            transform-origin: center center; /* Assicura rotazione centrale */
        }

            .mob-arrow.at-end {
                transform: rotateY(180deg); /* Rotazione a specchio orizzontale */
            }

            /* Nessun effetto hover/active */
            .mob-arrow:hover,
            .mob-arrow:focus,
            .mob-arrow:active {
                background: none !important;
                color: #d21317 !important;
                box-shadow: none !important;
                /* non annullare la rotazione! */
            }

        /* Stati opzionali usati da JS */
        .mob-cat.attached {
            top: 0;
        }

        .mob-top.stuck {
            transform: translateY(-100%);
        }

        .mob-cat {
            display: block !important;
        }

        .mob-top {
            display: flex !important;
        }
    }
}

/* Annulla solo lo scaling del drawer menu sotto i 600px, senza toccare la formattazione */
@media (max-width: 600px) {
    .side-menu,
    .side-menu *,
    aside.sub-menu,
    aside.sub-menu * {
        --scale: 1 !important;
        font-size: unset !important;
    }
}

/* Drawer menu e sub-menu: larghezza 100vw e font più grande su mobile */
@media (max-width: 768px) {
    .side-menu,
    aside.sub-menu {
        left: 0 !important;
        width: 100vw !important;
        min-width: 100vw !important;
        max-width: 100vw !important;
        box-sizing: border-box !important;
    }

        .side-menu *,
        aside.sub-menu * {
            font-size: 2rem !important;
        }
}

:where(.mob-top, .mob-cat) {
    display: none;
}

@media (max-width: 768px) {
    .side-menu .side-nav a,
    .side-menu .side-item.has-sub,
    .side-menu .side-item.has-sub span,
    aside.sub-menu .sub-nav a {
        font-size: 1rem !important;
    }
}

/*
============================================================
STILE: X CHIUSURA DRAWER, SOTTO-MENU SEZIONI (INDIETRO + TITOLO)
============================================================
*/
@media (max-width: 768px) {
    /* X chiusura drawer menu laterale */
    .side-menu .close-btn {
        font-size: 1.7rem !important;
        color: #fff !important;
        width: 1.7em;
        height: 1.7em;
        line-height: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        background: none;
        border: none;
        cursor: pointer;
        margin-left: auto;
        margin-right: 0;
        padding: 0;
    }
    /* Sotto-menu sezioni: ingrandisci "indietro" e padding tra indietro e titolo */
    aside.sub-menu .back-btn {
        font-size: 1.25rem !important;
        font-weight: 600;
        color: #111 !important;
        padding: 0.5rem 0 1.1rem 0 !important;
        margin-bottom: 0.2rem !important;
        display: block;
    }
    /* Sotto-menu sezioni: ingrandisci e corsivo la scritta "Sezioni" */
    aside.sub-menu .sub-title {
        font-size: 1.5rem !important;
        font-weight: 700 !important;
        color: #111 !important;
        margin-bottom: 1.1rem !important;
        margin-top: 0 !important;
        display: block;
    }
}

/* --- Effetto 3D desktop anche su mobile categories --- */
.mob-cat .mob-nav a,
.mob-cat .mob-nav a.active {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.35rem 0.6rem;
    margin-bottom: 4px;
    line-height: 1.1;
    border-radius: 8px;
    background-color: rgba(var(--accent-rgb), 0.12);
    color: var(--accent-color);
    box-shadow: inset 0 -2px 0 rgba(var(--accent-rgb), 0.9);
    font-weight: bold;
    transition: all 0.2s ease;
    /* Rimuovi ombre/gradienti mobile precedenti */
}

/* Stato normale: tutte le sezioni nere, nessun effetto 3D */
.mob-cat .mob-nav a {
    color: #111;
    background: none;
    box-shadow: none;
    transform: none;
    font-weight: 600;
    padding: 0.45rem 0.7rem; /* aumentato padding verticale */
    height: 1.4rem;
    line-height: 1.4rem;
    padding-top: 0.1rem;
    padding-bottom: 0.1rem;
    border-radius: 8px;
    /* altri reset se necessario */
}

    /* Sezione attiva: effetto 3D e colore accent, altezza maggiore */
    .mob-cat .mob-nav a.active {
        color: var(--accent-color);
        background: transparent;
        transform: translate(2px, 2px);
        box-shadow: inset -2px 0 0 var(--accent-color), inset 0 -2px 0 var(--accent-color), inset 2px 2px 4px rgba(0,0,0,0.07), inset -1px -1px 3px rgba(0,0,0,0.15);
        font-weight: bold;
        padding: 0.55rem 0.7rem; /* ancora più padding verticale */
        height: 2.4rem;
        line-height: 2.4rem;
    }

    /* Hover/pressed su mobile: effetto 3D e colore accent solo su hover, altezza maggiore */
    .mob-cat .mob-nav a:hover,
    .mob-cat .mob-nav a:focus,
    .mob-cat .mob-nav a:active {
        color: var(--accent-color);
        background: transparent;
        transform: translate(2px, 2px);
        box-shadow: inset -2px 0 0 var(--accent-color), inset 0 -2px 0 var(--accent-color), inset 2px 2px 4px rgba(0,0,0,0.07), inset -1px -1px 3px rgba(0,0,0,0.15);
        padding: 0.55rem 0.7rem; /* padding e altezza come l'attiva */
        height: 2.4rem;
        line-height: 2.4rem;
    }

    /* Quando la voce attiva è premuta */
    .mob-cat .mob-nav a.active:active,
    .mob-cat .mob-nav a.active:focus,
    .mob-cat .mob-nav a.active:hover {
        transform: translate(4px, 4px);
        box-shadow: none;
        background: transparent;
        color: var(--accent-color);
        padding: 0.55rem 0.7rem;
        height: 2.4rem;
        line-height: 2.4rem;
    }

/* Migliora centratura verticale delle sezioni non attive nella barra mobile */
.mob-cat .mob-nav {
    display: flex;
    align-items: center;
    height: 2.1rem !important;
    min-height: 2.1rem !important;
    max-height: 2.1rem !important;
    /* Assicura che tutti i link abbiano la stessa altezza e siano centrati */
}

    .mob-cat .mob-nav a,
    .mob-cat .mob-nav a.active,
    .mob-cat .mob-nav a:hover,
    .mob-cat .mob-nav a:focus,
    .mob-cat .mob-nav a:active {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 2.1rem !important;
        line-height: 2.1rem !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    /* Quando il mouse è sopra una voce NON attiva, la voce attiva si oscura (come su desktop)
   e NON si solleva (niente transform) */
    .mob-cat .mob-nav:hover a.active:not(:hover) {
        opacity: 0.4;
        color: var(--accent-color);
        background: transparent;
        box-shadow: none;
        /* forza il testo a restare fermo */
        transform: none !important;
    }

    /* Quando il mouse NON è sopra nessuna voce, la voce attiva torna normale (con sollevamento) */
    .mob-cat .mob-nav:hover:not(:has(a:hover)) a.active {
        opacity: 1;
        color: var(--accent-color);
        background: transparent;
        box-shadow: inset -2px 0 0 var(--accent-color), inset 0 -2px 0 var(--accent-color), inset 2px 2px 4px rgba(0,0,0,0.07), inset -1px -1px 3px rgba(0,0,0,0.15);
        transform: translate(2px, 2px) !important;
    }


/* Effetto hover/active moderno */
.mob-arrow:hover,
.mob-arrow:focus {
    background: linear-gradient(135deg, #ff6a6a 0%, #d21317 100%);
    color: #fff;
    box-shadow: 0 4px 12px 0 rgba(210,19,23,0.18);
}

.mob-arrow:active {
    background: linear-gradient(135deg, #b80f13 70%, #ff6a6a 100%);
    color: #fff;
    box-shadow: 0 1px 2px 0 rgba(210,19,23,0.18);
    transform: scale(0.96);
}

.mob-arrow[disabled] {
    opacity: 0.35;
    pointer-events: none;
    background: #eee;
    color: #bbb;
    box-shadow: none;
}

/* Sposta leggermente più in basso le sezioni non attive nella barra mobile */
.mob-cat .mob-nav a:not(.active) {
    align-items: flex-start !important;
    padding-bottom: 0 !important;
    padding-top: 0.18rem !important;
}

/* Sposta la lente di ricerca un po' più a destra nella barra categorie mobile */
.mob-cat-inner .mob-search {
    margin-left: 0.3rem !important; /* era 1.2rem, ora più compatto */
    margin-right: 0 !important;
}

/* Ripristina la cat bar mobile senza ombreggiatura e bordo aggiunti */
.mob-cat {
    /* ...existing code... */
    overflow-y: hidden !important;
    /* ...existing code... */
}

/* Ombreggiatura nera ancora più fine sopra la progress bar mobile */
.scroll-progress-bar-mobile::before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    top: -2px;
    height: 2px;
    pointer-events: none;
    z-index: 1;
    background: linear-gradient(to bottom, rgba(0,0,0,0.07) 0%, rgba(0,0,0,0.00) 100%);
}

/* Dissolvenza/coprente solo sulla fine della barra sezioni scorrimento (mob-nav), non sulla lente */
.mob-cat-inner {
    position: relative;
    z-index: 1;
}

    /* Dissolvenza a sinistra: torna come prima, senza effetto bianco/padding extra */
    .mob-cat-inner::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 2.2rem;
        height: 100%;
        pointer-events: none;
        z-index: 99;
        opacity: 0;
        transition: opacity 0.18s;
        background: linear-gradient( to right, #fde9e0 80%, rgba(253,233,224,0.01) 100% );
        display: block;
    }

    .mob-cat-inner.fade-left::before {
        opacity: 1 !important;
    }

/* Dissolvenza a destra: torna come prima, area ampia e posizione regolabile */
.mob-nav-fade-right {
    position: absolute;
    top: 0;
    right: 3.7rem; /* lascia spazio per lente/freccia, regola se necessario */
    width: 3.5rem;
    height: 100%;
    pointer-events: none;
    z-index: 99;
    opacity: 0;
    transition: opacity 0.18s;
    background: linear-gradient( to left, #fde9e0 80%, rgba(253,233,224,0.01) 100% );
    display: block;
}

.mob-cat-inner.fade-right .mob-nav-fade-right {
    opacity: 1 !important;
}

/* Blocca lo scroll verticale di tutto il wrapper centrale della cat bar */
.mob-cat-inner {
    /* ...existing code... */
    overflow-y: hidden !important;
    /* padding-right: 3.7rem !important; */ /* <-- rimuovi questa riga */
}

/* Blocca lo scroll verticale anche sulla barra delle sezioni */
.mob-nav {
    /* ...existing code... */
    overflow-y: hidden !important;
}

/* Rendi il bottone cerca mobile quadrato e centrato, senza sfondo */
.mob-cat-inner .mob-search {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    max-width: 40px !important;
    max-height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: none !important;
    border-radius: 12px;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 0.2rem 0 0.7rem !important;
}

    .mob-cat-inner .mob-search .mob-ico {
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        min-height: 28px !important;
        max-width: 28px !important;
        max-height: 28px !important;
        padding: 0 !important;
        margin: 0 !important;
    }

/* PATCH: elimina sfarfallio su scroll orizzontale mobile categorie */
.mob-nav {
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-x: contain !important;
    will-change: transform;
    backface-visibility: hidden;
    /* Rimuovi eventuali transizioni che possono causare flicker */
    transition: none !important;
}

.mob-cat-inner, .mob-cat {
    /* Evita ridipinture e flicker su scroll */
    will-change: transform;
    backface-visibility: hidden;
    /* Rimuovi transizioni inutili */
    transition: none !important;
}

    /* Dissolvenza a sinistra per suggerire lo scroll orizzontale sulle sezioni mobile */
    .mob-cat-inner::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 2.5rem;
        height: 100%;
        pointer-events: none;
        z-index: 99;
        opacity: 0;
        transition: opacity 0.18s;
        background: linear-gradient(to right, rgba(210,19,23,0.18) 0%, rgba(253,233,224,0.01) 100%);
        display: block;
    }

    .mob-cat-inner.fade-left::before {
        opacity: 1 !important;
    }

    /* Rimuovi dissolvenza destra */
    .mob-cat-inner::after,
    .mob-cat-inner.fade-right::after {
        display: none !important;
        opacity: 0 !important;
    }

#subSections .sub-nav + .sub-title {
    margin-top: 2rem !important;
    display: block;
}

@media (min-width: 1024px) {
    .mob-ico:hover,
    .mob-ico:active,
    .mob-ico:focus {
        filter: none !important;
        opacity: 1 !important;
        box-shadow: none !important;
        background: none !important;
        transform: none !important;
        transition: none !important;
    }
}



    .modal-dialog {
        margin: 0 auto;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
    }


    @media (max-width: 1279px) {
        .header-checkin-left {
            margin-bottom: 10px;
            margin-top: 40px;
        }

        .header-checkin-right {
            margin-bottom: 10px;
            margin-top: 40px;
        }
    }

    @layer components {
        .hidden-top {
            transform: translateY(-100%);
            opacity: 0;
            display: none;
        }

        @media (max-width: 768px) {
            .mini-top {
                display: none !important;
            }
        }
    }

    @layer override {
        .hidden-top {
            transform: translateY(-100%);
            opacity: 0;
            display: none;
        }

        @media (max-width: 768px) {
            .mini-top {
                display: none !important;
            }
        }
        /* .cat-bar .categories a:hover {
        transform: translate(2px, 2px) !important;
        background: transparent !important;
        color: var(--accent-color) !important;
        box-shadow: inset -2px 0 0 var(--accent-color), inset 0 -2px 0 var(--accent-color), inset 2px 2px 4px rgba(0, 0, 0, 0.07), inset -1px -1px 3px rgba(0, 0, 0, 0.15) !important;
        box-shadow: inset 0 -2px 0 rgba(var(--accent-rgb), 0.9) !important;
    }*/

        .side-scroll-area {
            flex: 1 1 auto;
            overflow-y: auto !important;
            max-height: 100vh !important;
            min-height: 0;
            -webkit-overflow-scrolling: touch;
        }
    }

    .replace-catbar,
    .replace-catbar-on {
        height: 60px;
        background-color: #fff;
        display: none;
    }

    .replace-catbar-on {
        display: block;
    }

    @media (max-width: 768px) {
        .replace-catbar-on {
            display: none;
        }
    }

    .categories a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        height: var(--button-height) !important;
        line-height: var(--button-height) !important;
        padding: 0.2rem 0.4rem !important;
        font-size: 1rem !important;
        font-weight: bold;
        white-space: nowrap;
        color: inherit;
        text-decoration: none !important;
        margin-bottom: 4px !important;
    }

    .cat-bar .categories a.active:not(.no-override) {
        position: relative !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0.2rem 0.6rem !important;
        height: var(--button-height) !important;
        line-height: var(--button-height) !important;
        font-weight: bold !important;
        border-radius: 6px !important;
        background: transparent !important;
        color: var(--accent-color) !important;
        transform: translate(2px, 2px) !important;
        box-shadow: inset -2px 0 0 var(--accent-color), inset 0 -2px 0 var(--accent-color), inset 2px 2px 4px rgba(0, 0, 0, 0.07), inset -1px -1px 3px rgba(0, 0, 0, 0.15) !important;
        transition: all 0.2s ease-in-out !important;
    }

    .scritte-personalizzate td {
        padding: 10px;
    }

    .scritte-personalizzate table {
        margin: 0px auto;
    }

    .scritte-personalizzate {
        padding-bottom: 20px;
    }

    .logo, .logo-sticky, .mini-top .logo, .top-bar .logo, .cat-bar .logo-sticky {
        position: relative;
        top: 0px;
    }

    @media (max-width: 768px) {
        .corpo-sito {
            margin-top: 20px;
        }
    }

    /* === 5. SALUTO PERSONALIZZATO === */
    #profileModal {
        padding-bottom: 20px;
    }

        #profileModal .profile-greeting {
            text-align: center;
            margin-bottom: 1.5rem;
            padding-bottom: 1.2rem;
            border-bottom: 2px solid #f3f3f3;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.5rem;
        }

            #profileModal .profile-greeting h2 {
                font-size: 1.6rem;
                color: #222;
                font-weight: 700;
                margin: 0;
                letter-spacing: -0.4px;
                line-height: 1.2;
            }

            #profileModal .profile-greeting #userNickname {
                color: #D21317;
                font-weight: 800;
            }

        #profileModal .profile-subtitle {
            font-size: 0.95rem;
            color: #666;
            margin: 0;
            font-weight: 400;
            font-style: italic;
        }

        /* === 6. MENU PROFILO === */
        #profileModal .profile-menu {
            display: flex;
            flex-direction: column;
            gap: 0.65rem;
        }

        #profileModal .profile-menu-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0.95rem 1.1rem;
            background: #fafbfc;
            border: 1.5px solid #E2E2E2;
            border-radius: 7px;
            color: #222;
            font-size: 1.05rem;
            font-weight: 600;
            text-decoration: none;
            transition: all 0.18s ease;
            box-shadow: 0 1px 4px 0 rgba(0,0,0,0.03);
            cursor: pointer;
            position: relative;
        }

            #profileModal .profile-menu-item:hover {
                background: #fff;
                border-color: #D21317;
                box-shadow: 0 2px 8px 0 rgba(210,19,23,0.12);
                transform: translateX(4px);
            }

        #profileModal .profile-menu-text {
            flex: 1;
        }

        #profileModal .profile-arrow {
            font-size: 1.8rem;
            color: #ccc;
            font-weight: 300;
            line-height: 1;
            transition: color 0.18s, transform 0.18s;
        }

        #profileModal .profile-menu-item:hover .profile-arrow {
            color: #D21317;
            transform: translateX(4px);
        }

        /* === 7. LOGOUT BUTTON === */
        #profileModal .logout-btn {
            background: linear-gradient(90deg, #D21317 80%, #B01214 100%);
            color: #fff !important;
            border-color: #D21317;
            margin-top: 0.5rem;
        }

            #profileModal .logout-btn:hover {
                background: linear-gradient(90deg, #B01214 80%, #D21317 100%);
                border-color: #B01214;
                box-shadow: 0 4px 16px rgba(210,19,23,0.3);
                transform: translateY(-2px) scale(1.02);
            }

            #profileModal .logout-btn .profile-arrow {
                color: rgba(255,255,255,0.7);
            }

            #profileModal .logout-btn:hover .profile-arrow {
                color: #fff;
            }

        /* === 8. FONT COERENTE === */
        #profileModal .modal-dialog.small,
        #profileModal .modal-header,
        #profileModal .profile-greeting,
        #profileModal .profile-menu {
            font-family: "Poppins", "Segoe UI", Arial, sans-serif !important;
            letter-spacing: 0.01em;
        }

    /* === 9. RESPONSIVE === */
    @media (max-width: 700px) {
        #profileModal .profile-greeting h2 {
            font-size: 1.35rem;
        }

        #profileModal .profile-subtitle {
            font-size: 0.88rem;
        }

        #profileModal .profile-menu-item {
            font-size: 1rem;
            padding: 0.85rem 1rem;
        }

        #profileModal .profile-arrow {
            font-size: 1.6rem;
        }
    }

    img.profile-modal-logo {
        max-width: 280px;
        margin: 0 auto;
    }