/*
|--------------------------------------------------------------------------
| STUDIO FINDER — MOBILE WEB MENU FIX V62.53
|--------------------------------------------------------------------------
| SOLO menu laterale browser mobile.
| Non modifica:
| - contenuti pagina
| - Home
| - Cerca Studio
| - PWA / standalone
|--------------------------------------------------------------------------
*/

@media (max-width:900px) {

    /* ==============================================================
       ARTISTA — DRAWER MOBILE
       ============================================================== */

    html.sf-mode-mobile-web .sf-artist-sidebar,
    html.sf-mode-mobile-web .sidebar.sf-artist-sidebar {
        position:fixed!important;
        z-index:8000!important;
        inset:0 auto 0 0!important;

        display:flex!important;
        flex-direction:column!important;

        width:min(330px,86vw)!important;
        min-width:0!important;
        max-width:min(330px,86vw)!important;

        height:100dvh!important;
        min-height:100dvh!important;
        max-height:100dvh!important;

        margin:0!important;
        padding:
            calc(18px + env(safe-area-inset-top,0px))
            12px
            calc(14px + env(safe-area-inset-bottom,0px))
            12px!important;

        overflow:hidden!important;

        color:#fff!important;
        background:
            radial-gradient(
                circle at 18% 0%,
                rgba(5,99,132,.20),
                transparent 32%
            ),
            linear-gradient(
                180deg,
                #0b1220,
                #101827
            )!important;

        border:0!important;
        border-right:1px solid rgba(255,255,255,.07)!important;
        border-radius:0!important;
        box-shadow:22px 0 52px rgba(2,6,23,.28)!important;

        transform:translate3d(-105%,0,0)!important;
        transition:transform .20s cubic-bezier(.2,.8,.2,1)!important;

        white-space:normal!important;
        backdrop-filter:none!important;
        -webkit-backdrop-filter:none!important;
    }

    html.sf-mode-mobile-web .sf-artist-sidebar.is-open,
    html.sf-mode-mobile-web .sidebar.sf-artist-sidebar.is-open {
        transform:translate3d(0,0,0)!important;
    }

    html.sf-mode-mobile-web .sf-artist-brand {
        display:flex!important;
        flex:0 0 auto!important;
        align-items:center!important;
        gap:10px!important;

        width:100%!important;
        height:54px!important;
        min-height:54px!important;

        margin:0 0 10px!important;
        padding:0 8px 12px 52px!important;

        overflow:hidden!important;
    }

    html.sf-mode-mobile-web .sf-artist-brand strong {
        display:block!important;
        min-width:0!important;
        max-width:100%!important;

        overflow:hidden!important;
        color:#fff!important;

        font-size:17px!important;
        font-weight:900!important;
        line-height:1!important;
        letter-spacing:-.03em!important;

        text-overflow:ellipsis!important;
        white-space:nowrap!important;
    }

    html.sf-mode-mobile-web .sf-artist-brand-mark {
        display:none!important;
    }

    html.sf-mode-mobile-web .sf-artist-navigation {
        display:flex!important;
        flex:1 1 auto!important;
        flex-direction:column!important;
        align-items:stretch!important;
        justify-content:flex-start!important;
        gap:3px!important;

        width:100%!important;
        min-width:0!important;
        height:auto!important;
        min-height:0!important;
        max-height:none!important;

        margin:0!important;
        padding:2px 0!important;

        overflow-x:hidden!important;
        overflow-y:auto!important;

        white-space:normal!important;
        scrollbar-width:none!important;
        -webkit-overflow-scrolling:touch!important;
    }

    html.sf-mode-mobile-web .sf-artist-navigation::-webkit-scrollbar {
        display:none!important;
    }

    html.sf-mode-mobile-web .sf-artist-nav-item,
    html.sf-mode-mobile-web .sf-artist-footer-link {
        position:relative!important;

        display:flex!important;
        flex:0 0 auto!important;
        flex-direction:row!important;
        align-items:center!important;
        justify-content:flex-start!important;
        gap:11px!important;

        width:100%!important;
        min-width:0!important;
        max-width:100%!important;

        height:46px!important;
        min-height:46px!important;
        max-height:46px!important;

        margin:0!important;
        padding:0 12px!important;

        overflow:hidden!important;

        border:1px solid transparent!important;
        border-radius:11px!important;

        color:rgba(255,255,255,.78)!important;
        background:transparent!important;
        box-shadow:none!important;
        transform:none!important;

        text-align:left!important;
        text-decoration:none!important;
        white-space:normal!important;
    }

    html.sf-mode-mobile-web .sf-artist-nav-item + .sf-artist-nav-item {
        margin-top:2px!important;
    }

    html.sf-mode-mobile-web .sf-artist-nav-item.active,
    html.sf-mode-mobile-web .sf-artist-nav-item.is-active {
        color:#fff!important;
        background:#056384!important;
        box-shadow:0 8px 18px rgba(5,99,132,.18)!important;
    }

    html.sf-mode-mobile-web .sf-artist-nav-icon {
        display:grid!important;
        flex:0 0 28px!important;
        place-items:center!important;

        width:28px!important;
        min-width:28px!important;
        max-width:28px!important;

        height:28px!important;
        min-height:28px!important;
        max-height:28px!important;

        margin:0!important;
        padding:0!important;

        color:inherit!important;
        font-size:16px!important;
        line-height:1!important;
        text-align:center!important;
    }

    html.sf-mode-mobile-web .sf-artist-nav-label {
        display:block!important;
        flex:1 1 auto!important;

        width:auto!important;
        min-width:0!important;
        max-width:none!important;

        margin:0!important;
        padding:0!important;

        overflow:hidden!important;

        color:inherit!important;
        font-size:13px!important;
        font-weight:750!important;
        line-height:1.15!important;
        text-align:left!important;

        text-overflow:ellipsis!important;
        white-space:nowrap!important;
    }

    html.sf-mode-mobile-web .sf-artist-nav-badge {
        position:static!important;
        flex:0 0 auto!important;

        display:grid!important;
        place-items:center!important;

        min-width:20px!important;
        width:auto!important;
        height:20px!important;

        margin-left:auto!important;
        padding:0 6px!important;

        border:0!important;
        border-radius:999px!important;

        background:#dc2626!important;
        color:#fff!important;

        font-size:9px!important;
        font-weight:900!important;
        line-height:1!important;
    }

    html.sf-mode-mobile-web .sf-artist-nav-badge[hidden],
    html.sf-mode-mobile-web .sf-artist-nav-badge.empty {
        display:none!important;
    }

    html.sf-mode-mobile-web .sf-artist-sidebar-bottom {
        display:block!important;
        flex:0 0 auto!important;

        width:100%!important;
        min-width:0!important;
        height:auto!important;
        min-height:0!important;
        max-height:none!important;

        margin:8px 0 0!important;
        padding:9px 0 0!important;

        overflow:visible!important;

        border-top:1px solid rgba(255,255,255,.09)!important;
    }

    html.sf-mode-mobile-web .sf-artist-sidebar-bottom .sf-artist-footer-link {
        margin:0 0 5px!important;
    }

    html.sf-mode-mobile-web .sf-artist-legal-links {
        display:flex!important;
        flex-wrap:wrap!important;
        align-items:flex-start!important;
        gap:4px 10px!important;

        width:100%!important;
        height:auto!important;
        min-height:0!important;
        max-height:none!important;

        margin:2px 0 7px!important;
        padding:6px 11px!important;

        overflow:visible!important;

        color:rgba(255,255,255,.48)!important;
        font-size:9px!important;
        line-height:1.35!important;
    }

    html.sf-mode-mobile-web .sf-artist-legal-links a {
        display:inline!important;
        width:auto!important;
        height:auto!important;
        min-height:0!important;
        max-height:none!important;
        margin:0!important;
        padding:0!important;
        color:inherit!important;
        font:inherit!important;
        line-height:inherit!important;
        white-space:nowrap!important;
    }

    html.sf-mode-mobile-web .sf-artist-menu-button {
        position:fixed!important;
        z-index:8200!important;
        top:calc(14px + env(safe-area-inset-top,0px))!important;
        left:14px!important;
        right:auto!important;
        bottom:auto!important;

        display:grid!important;
        place-items:center!important;

        width:42px!important;
        min-width:42px!important;
        max-width:42px!important;

        height:42px!important;
        min-height:42px!important;
        max-height:42px!important;

        margin:0!important;
        padding:0!important;

        border:1px solid rgba(255,255,255,.07)!important;
        border-radius:12px!important;

        background:#0b1220!important;
        color:#fff!important;
        box-shadow:0 8px 24px rgba(2,6,23,.20)!important;

        font-size:20px!important;
        line-height:1!important;
    }

    html.sf-mode-mobile-web .sf-artist-menu-overlay {
        position:fixed!important;
        z-index:7900!important;
        inset:0!important;

        background:rgba(15,23,42,.42)!important;
        backdrop-filter:none!important;
        -webkit-backdrop-filter:none!important;
    }

    html.sf-mode-mobile-web.sf-artist-menu-open,
    html.sf-mode-mobile-web.sf-artist-menu-open body {
        overflow:hidden!important;
    }

    /* Il prompt installazione non deve stare sopra al menu aperto. */
    html.sf-mode-mobile-web.sf-artist-menu-open .sf-pwa-launcher {
        display:none!important;
    }

    /* ==============================================================
       STUDIO — STESSO COMPORTAMENTO VERTICALE
       ============================================================== */

    html.sf-mode-mobile-web .sf-studio-sidebar {
        position:fixed!important;
        z-index:8000!important;
        inset:0 auto 0 0!important;

        display:flex!important;
        flex-direction:column!important;

        width:min(330px,86vw)!important;
        min-width:0!important;
        max-width:min(330px,86vw)!important;

        height:100dvh!important;
        min-height:100dvh!important;
        max-height:100dvh!important;

        margin:0!important;
        padding:
            calc(18px + env(safe-area-inset-top,0px))
            12px
            calc(14px + env(safe-area-inset-bottom,0px))
            12px!important;

        overflow:hidden!important;

        color:#fff!important;
        background:
            radial-gradient(
                circle at 18% 0%,
                rgba(5,99,132,.20),
                transparent 32%
            ),
            linear-gradient(180deg,#0b1220,#101827)!important;

        border:0!important;
        border-right:1px solid rgba(255,255,255,.07)!important;
        border-radius:0!important;
        box-shadow:22px 0 52px rgba(2,6,23,.28)!important;

        transform:translate3d(-105%,0,0)!important;
        transition:transform .20s cubic-bezier(.2,.8,.2,1)!important;

        white-space:normal!important;
        backdrop-filter:none!important;
        -webkit-backdrop-filter:none!important;
    }

    html.sf-mode-mobile-web .sf-studio-sidebar.is-open {
        transform:translate3d(0,0,0)!important;
    }

    html.sf-mode-mobile-web .sf-studio-brand {
        display:flex!important;
        flex:0 0 auto!important;
        align-items:center!important;
        gap:10px!important;

        width:100%!important;
        min-width:0!important;
        height:54px!important;

        margin:0 0 10px!important;
        padding:0 8px 12px 52px!important;

        overflow:hidden!important;
    }

    html.sf-mode-mobile-web .sf-studio-navigation {
        display:flex!important;
        flex:1 1 auto!important;
        flex-direction:column!important;
        align-items:stretch!important;
        justify-content:flex-start!important;
        gap:3px!important;

        width:100%!important;
        min-width:0!important;
        height:auto!important;
        min-height:0!important;

        margin:0!important;
        padding:2px 0!important;

        overflow-x:hidden!important;
        overflow-y:auto!important;

        white-space:normal!important;
        scrollbar-width:none!important;
        -webkit-overflow-scrolling:touch!important;
    }

    html.sf-mode-mobile-web .sf-studio-navigation::-webkit-scrollbar {
        display:none!important;
    }

    html.sf-mode-mobile-web .sf-studio-nav-item,
    html.sf-mode-mobile-web .sf-studio-footer-link {
        display:flex!important;
        flex:0 0 auto!important;
        flex-direction:row!important;
        align-items:center!important;
        justify-content:flex-start!important;
        gap:11px!important;

        width:100%!important;
        min-width:0!important;
        max-width:100%!important;

        height:46px!important;
        min-height:46px!important;
        max-height:46px!important;

        margin:0!important;
        padding:0 12px!important;

        overflow:hidden!important;

        border:1px solid transparent!important;
        border-radius:11px!important;

        color:rgba(255,255,255,.78)!important;
        background:transparent!important;
        box-shadow:none!important;
        transform:none!important;

        text-align:left!important;
        text-decoration:none!important;
        white-space:normal!important;
    }

    html.sf-mode-mobile-web .sf-studio-nav-item + .sf-studio-nav-item {
        margin-top:2px!important;
    }

    html.sf-mode-mobile-web .sf-studio-nav-item.active,
    html.sf-mode-mobile-web .sf-studio-nav-item.is-active {
        color:#fff!important;
        background:#056384!important;
        box-shadow:0 8px 18px rgba(5,99,132,.18)!important;
    }

    html.sf-mode-mobile-web .sf-studio-nav-icon {
        display:grid!important;
        flex:0 0 28px!important;
        place-items:center!important;

        width:28px!important;
        min-width:28px!important;
        max-width:28px!important;

        height:28px!important;
        min-height:28px!important;
        max-height:28px!important;

        margin:0!important;
        padding:0!important;

        color:inherit!important;
        font-size:16px!important;
        line-height:1!important;
    }

    html.sf-mode-mobile-web .sf-studio-nav-label,
    html.sf-mode-mobile-web .sf-studio-nav-label-default {
        display:block!important;
        flex:1 1 auto!important;

        width:auto!important;
        min-width:0!important;
        max-width:none!important;

        margin:0!important;
        padding:0!important;

        overflow:hidden!important;

        color:inherit!important;
        font-size:13px!important;
        font-weight:750!important;
        line-height:1.15!important;
        text-align:left!important;

        text-overflow:ellipsis!important;
        white-space:nowrap!important;
    }

    html.sf-mode-mobile-web .sf-studio-nav-label-pwa {
        display:none!important;
    }

    html.sf-mode-mobile-web .sf-studio-sidebar-bottom {
        display:block!important;
        flex:0 0 auto!important;

        width:100%!important;
        height:auto!important;
        min-height:0!important;

        margin:8px 0 0!important;
        padding:9px 0 0!important;

        overflow:visible!important;

        border-top:1px solid rgba(255,255,255,.09)!important;
    }

    html.sf-mode-mobile-web .sf-studio-menu-button {
        position:fixed!important;
        z-index:8200!important;
        top:calc(14px + env(safe-area-inset-top,0px))!important;
        left:14px!important;

        display:grid!important;
        place-items:center!important;

        width:42px!important;
        min-width:42px!important;
        max-width:42px!important;

        height:42px!important;
        min-height:42px!important;
        max-height:42px!important;

        margin:0!important;
        padding:0!important;

        border:1px solid rgba(255,255,255,.07)!important;
        border-radius:12px!important;

        background:#0b1220!important;
        color:#fff!important;
        box-shadow:0 8px 24px rgba(2,6,23,.20)!important;

        font-size:20px!important;
        line-height:1!important;
    }

    html.sf-mode-mobile-web .sf-studio-menu-overlay {
        position:fixed!important;
        z-index:7900!important;
        inset:0!important;
        background:rgba(15,23,42,.42)!important;
        backdrop-filter:none!important;
        -webkit-backdrop-filter:none!important;
    }

    html.sf-mode-mobile-web.sf-studio-menu-open,
    html.sf-mode-mobile-web.sf-studio-menu-open body {
        overflow:hidden!important;
    }

    html.sf-mode-mobile-web.sf-studio-menu-open .sf-pwa-launcher {
        display:none!important;
    }
}

/* Schermi molto piccoli: evita che il drawer diventi quasi full width. */
@media (max-width:380px) {
    html.sf-mode-mobile-web .sf-artist-sidebar,
    html.sf-mode-mobile-web .sidebar.sf-artist-sidebar,
    html.sf-mode-mobile-web .sf-studio-sidebar {
        width:88vw!important;
        max-width:88vw!important;
    }
}