/* ============================================================
   SmokeDonalds — Mobile Home/Catalog V142
   - отдельный mobile hero
   - точные размеры mini sliders без обрезания
   - mobile catalog overlay
   ============================================================ */

/* mobile hero assets are hidden on desktop */
body.site-home-modern .home-hero-media-v4 > .sd-hero-mobile-v142{
    display:none!important;
}

@media (max-width: 820px){
    html,
    body.site-home-modern,
    body.site-catalog-modern{
        width:100%!important;
        max-width:100%!important;
        overflow-x:clip!important;
    }

    body.site-home-modern *,
    body.site-catalog-modern *{
        box-sizing:border-box!important;
    }

    /* ---------- mobile hero: use only the dedicated mobile image ---------- */
    body.site-home-modern .home-hero-media-v4 > .sd-hero-desktop-v142{
        display:none!important;
    }

    body.site-home-modern .home-hero-media-v4 > .sd-hero-mobile-v142{
        display:block!important;
        position:absolute!important;
        inset:0!important;
        width:100%!important;
        height:100%!important;
        max-width:none!important;
        max-height:none!important;
        object-fit:cover!important;
        object-position:center!important;
        transform:none!important;
    }

    /* ---------- mini slider shell ---------- */
    body.site-home-modern .home-category-slider-v6,
    body.site-home-modern .home-popular-v7,
    body.site-home-modern .home-stores-v106{
        width:calc(100% - 24px)!important;
        max-width:none!important;
        min-width:0!important;
        margin-left:auto!important;
        margin-right:auto!important;
        padding-left:0!important;
        padding-right:0!important;
        overflow:visible!important;
    }

    body.site-home-modern .home-category-stage-v6,
    body.site-home-modern .home-popular-stage-v7{
        width:100%!important;
        max-width:100%!important;
        min-width:0!important;
        margin:0!important;
        padding:0!important;
        overflow:hidden!important;
    }

    body.site-home-modern .home-category-viewport-v6,
    body.site-home-modern .home-popular-viewport-v7,
    body.site-home-modern .home-stores-grid-v106{
        width:100%!important;
        max-width:100%!important;
        min-width:0!important;
        margin:0!important;
        overflow-x:auto!important;
        overflow-y:hidden!important;
        -webkit-overflow-scrolling:touch!important;
        overscroll-behavior-x:contain!important;
        scroll-snap-type:x mandatory!important;
        scrollbar-width:none!important;
        touch-action:pan-x pan-y!important;
    }

    body.site-home-modern .home-category-viewport-v6,
    body.site-home-modern .home-popular-viewport-v7{
        padding:1px 1px 8px!important;
        scroll-padding-left:1px!important;
        scroll-padding-right:1px!important;
    }

    body.site-home-modern .home-category-viewport-v6::-webkit-scrollbar,
    body.site-home-modern .home-popular-viewport-v7::-webkit-scrollbar,
    body.site-home-modern .home-stores-grid-v106::-webkit-scrollbar{
        display:none!important;
    }

    /* Important: fixed viewport width. max-content here caused mobile cards to run outside. */
    body.site-home-modern .home-category-track-v6,
    body.site-home-modern .home-popular-track-v7{
        display:flex!important;
        width:100%!important;
        max-width:100%!important;
        min-width:100%!important;
        gap:10px!important;
        margin:0!important;
        padding:0!important;
        transform:none!important;
    }

    body.site-home-modern .home-category-card-v6,
    body.site-home-modern .home-popular-card-v7{
        flex:0 0 calc((100% - 10px) / 2)!important;
        width:calc((100% - 10px) / 2)!important;
        min-width:calc((100% - 10px) / 2)!important;
        max-width:calc((100% - 10px) / 2)!important;
        margin:0!important;
        scroll-snap-align:start!important;
        scroll-snap-stop:always!important;
        overflow:hidden!important;
    }

    body.site-home-modern .home-popular-card-v7 > *,
    body.site-home-modern .home-category-card-v6 > *{
        max-width:100%!important;
    }

    body.site-home-modern .home-popular-body-v7{
        min-width:0!important;
        width:100%!important;
        overflow:hidden!important;
    }

    body.site-home-modern .home-popular-body-v7 strong,
    body.site-home-modern .home-popular-body-v7 small,
    body.site-home-modern .home-popular-body-v7 em{
        max-width:100%!important;
        overflow:hidden!important;
        text-overflow:ellipsis!important;
    }

    body.site-home-modern .home-category-nav-v6,
    body.site-home-modern .home-popular-nav-v7,
    body.site-home-modern .home-stores-nav-v106-1{
        display:none!important;
    }

    /* stores are their own scrolling track */
    body.site-home-modern .home-stores-grid-v106{
        display:flex!important;
        grid-template-columns:none!important;
        gap:10px!important;
        padding:1px 1px 8px!important;
    }

    body.site-home-modern .home-stores-grid-v106 > .home-store-card-v106:not([hidden]):not(.is-hidden-by-city-v106-2){
        display:grid!important;
        flex:0 0 calc(100% - 2px)!important;
        width:calc(100% - 2px)!important;
        min-width:calc(100% - 2px)!important;
        max-width:calc(100% - 2px)!important;
        scroll-snap-align:start!important;
        scroll-snap-stop:always!important;
    }

    /* heads must never widen the viewport */
    body.site-home-modern .home-category-head-v6,
    body.site-home-modern .home-popular-head-v7,
    body.site-home-modern .home-stores-head-v106{
        width:100%!important;
        max-width:100%!important;
        min-width:0!important;
        gap:8px!important;
    }

    body.site-home-modern .home-category-links-v6,
    body.site-home-modern .home-popular-links-v7{
        flex:0 1 auto!important;
        min-width:0!important;
        white-space:nowrap!important;
    }
}

@media (max-width: 520px){
    /* one COMPLETE card, not 1.05 cards */
    body.site-home-modern .home-category-card-v6,
    body.site-home-modern .home-popular-card-v7{
        flex-basis:calc(100% - 2px)!important;
        width:calc(100% - 2px)!important;
        min-width:calc(100% - 2px)!important;
        max-width:calc(100% - 2px)!important;
    }

    body.site-home-modern .home-category-card-v6{
        height:300px!important;
    }

    body.site-home-modern .home-popular-card-v7{
        height:270px!important;
    }

    body.site-home-modern .home-popular-media-v7{
        width:100%!important;
        height:168px!important;
        min-height:168px!important;
        overflow:hidden!important;
    }

    body.site-home-modern .home-popular-media-v7 img{
        max-width:100%!important;
        max-height:100%!important;
        object-fit:contain!important;
    }

    body.site-home-modern .home-category-head-v6 h2,
    body.site-home-modern .home-popular-head-v7 h2,
    body.site-home-modern .home-stores-head-v106 h2{
        min-width:0!important;
        font-size:clamp(24px,7.2vw,30px)!important;
        line-height:1!important;
    }

    body.site-home-modern .home-category-links-v6,
    body.site-home-modern .home-popular-links-v7{
        gap:10px!important;
        font-size:9px!important;
    }
}

@media (max-width: 360px){
    body.site-home-modern .home-category-head-v6,
    body.site-home-modern .home-popular-head-v7{
        display:grid!important;
        grid-template-columns:1fr!important;
        align-items:start!important;
        gap:7px!important;
    }

    body.site-home-modern .home-category-links-v6,
    body.site-home-modern .home-popular-links-v7{
        justify-self:end!important;
    }
}

/* ---------- mobile catalog overlay: independent of old header geometry ---------- */
@media (max-width: 760px){
    body #catalogPanel.catalog-panel.sd-mobile-catalog-v142{
        display:none!important;
        position:fixed!important;
        top:var(--sd-mobile-header-bottom-v142,104px)!important;
        left:0!important;
        right:0!important;
        bottom:0!important;
        width:100vw!important;
        height:auto!important;
        max-width:none!important;
        margin:0!important;
        padding:8px 10px max(10px,env(safe-area-inset-bottom))!important;
        z-index:2147483000!important;
        overflow:hidden!important;
        pointer-events:none!important;
        background:rgba(0,0,0,.46)!important;
        backdrop-filter:blur(6px)!important;
        -webkit-backdrop-filter:blur(6px)!important;
    }

    body #catalogPanel.catalog-panel.sd-mobile-catalog-v142.active{
        display:block!important;
        pointer-events:auto!important;
    }

    body #catalogPanel.sd-mobile-catalog-v142 .catalog-panel-inner{
        width:100%!important;
        max-width:100%!important;
        height:100%!important;
        max-height:100%!important;
        margin:0!important;
        padding:0!important;
        display:block!important;
    }

    body #catalogPanel.sd-mobile-catalog-v142 .catalog-dropdown{
        width:100%!important;
        max-width:100%!important;
        height:100%!important;
        max-height:100%!important;
        margin:0!important;
        padding:8px!important;
        overflow-x:hidden!important;
        overflow-y:auto!important;
        overscroll-behavior:contain!important;
        -webkit-overflow-scrolling:touch!important;
        border-radius:18px!important;
        touch-action:pan-y!important;
    }

    body #catalogPanel.sd-mobile-catalog-v142 .catalog-hover-panel{
        display:none!important;
    }

    body #catalogPanel.sd-mobile-catalog-v142 .catalog-branch,
    body #catalogPanel.sd-mobile-catalog-v142 .catalog-sublist{
        position:static!important;
        inset:auto!important;
        width:100%!important;
        max-width:100%!important;
        min-width:0!important;
        transform:none!important;
        opacity:1!important;
        visibility:visible!important;
        pointer-events:auto!important;
    }

    body #catalogPanel.sd-mobile-catalog-v142 .catalog-sublist{
        display:block!important;
        margin:0!important;
        padding:0!important;
        border:0!important;
        background:transparent!important;
        box-shadow:none!important;
    }

    body #catalogPanel.sd-mobile-catalog-v142 .catalog-item{
        width:100%!important;
        max-width:100%!important;
        min-width:0!important;
        min-height:58px!important;
    }

    body.catalog-open{
        overflow:hidden!important;
    }
}