@media (max-width:1024px){

    html.pushbar_locked {
        overflow: hidden;
        -ms-touch-action: none;
        touch-action: none;
    }
    
    .pushbar_locked .pushbar_main_content.pushbar_blur {
        filter: blur(15px);
    }
    
    .pushbar_overlay {
        z-index: -999;
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        will-change: opacity;
        transition: opacity 0.5s ease;
        opacity: 0;
        background: rgba(247, 240, 229, 0.80);
    }
    
    html.pushbar_locked .pushbar_overlay {
        opacity: 0.6;
        z-index: 1;
    }
    
    [data-pushbar-id] {
        z-index: 1000;
        position: fixed;
        overflow-y: auto;
        will-change: transform;
        transition: transform 0.5s ease;
        background: #f0e7d7;
    }
    
    [data-pushbar-direction="right"][data-pushbar-id], [data-pushbar-direction="right"][data-pushbar-id] {
        top: 0;
        width: 300px;
        max-width: 100%;
        height: 100%;
    }
    
    [data-pushbar-direction="top"][data-pushbar-id], [data-pushbar-direction="bottom"][data-pushbar-id] {
        left: 0;
        width: 100%;
        min-height: 150px;
    }
    
    [data-pushbar-direction="left"][data-pushbar-id] {
        left: 0;
        transform: translateZ(0) translateX(-100%);
    }
    
    [data-pushbar-direction="right"][data-pushbar-id] {
        right: 0;
        transform: translateZ(0) translateX(100%);
    }
    
    [data-pushbar-direction="top"][data-pushbar-id] {
        top: 0;
        transform: translateZ(0) translateY(-100%);
    }
    
    [data-pushbar-direction="bottom"][data-pushbar-id] {
        bottom: 0;
        transform: translateZ(0) translateY(100%);
    }
    
    [data-pushbar-id].opened {
        display: block;
        transform: translateX(0px) translateY(0px);
        box-shadow: 0px 0px 10px 0px rgb(0 0 0 /10%);
    }
        
        
        
    }




     @media screen and (min-width: 200px) and (max-width: 800px){
        [data-pushbar-direction="right"][data-pushbar-id], [data-pushbar-direction="left"][data-pushbar-id] {
            top: 0;
            width: 90%;
            max-width: 100%;
            height: 100%;
            padding:20px; box-sizing: border-box;
        }
        [data-pushbar-direction="left"][data-pushbar-id] {padding: 0;}
    }

    
    @media screen and (min-width: 801px) and (max-width: 1080px){
        [data-pushbar-direction="right"][data-pushbar-id], [data-pushbar-direction="left"][data-pushbar-id] {
            top: 0;
            width: 60%;
            max-width: 100%;
            height: 100%;
            padding:20px; box-sizing: border-box;
        }
    }




/* product detail page dialog */

html.pushbar_locked {
    overflow: hidden;
    -ms-touch-action: none;
    touch-action: none;
}

.pushbar_locked .pushbar_main_content.pushbar_blur {
    filter: blur(15px);
}

.pushbar_overlay {
    z-index: -999;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    will-change: opacity;
    transition: opacity 0.5s ease;
    opacity: 0;
    background: rgba(247, 240, 229, 0.80);
}

html.pushbar_locked .pushbar_overlay {
    opacity: 0.7;
    z-index: 4;
}
[data-pushbar-id="right_dialog"] {
    z-index: 1000;
    position: fixed;
    overflow-y: auto;
    will-change: transform;
    transition: transform 0.5s ease;
    background: #fff;
}

aside.right_dialog, [data-pushbar-direction="left"][data-pushbar-id] {
    z-index: 1000;
    position: fixed;
    overflow-y: auto;
    will-change: transform;
    transition: transform 0.5s ease;
    background: #fff;height: 100%;
}
[data-pushbar-direction="right_dialog"][data-pushbar-id] {
    top: 0;
    width: 300px;
    max-width: 100%;
    height: 100%;
}

[data-pushbar-direction="top"][data-pushbar-id], [data-pushbar-direction="bottom"][data-pushbar-id] {
    left: 0;
    width: 100%;
    min-height: 150px;
}

[data-pushbar-direction="left"][data-pushbar-id] {
    left: 0;
    transform: translateZ(0) translateX(-100%);
}
[data-pushbar-direction="left"][data-pushbar-id] {
    left: 0;
    transform: translateZ(0) translateX(-100%);
}

[data-pushbar-direction="right_dialog"][data-pushbar-id] {
    right: 0;
    transform: translateZ(0) translateX(100%);
}

[data-pushbar-direction="top"][data-pushbar-id] {
    top: 0;
    transform: translateZ(0) translateY(-100%);
}

[data-pushbar-direction="bottom"][data-pushbar-id] {
    bottom: 0;
    transform: translateZ(0) translateY(100%);
}

[data-pushbar-id].opened {
    display: block;
    transform: translateX(0px) translateY(0px);
    box-shadow: 0px 0px 10px 0px rgb(0 0 0 /10%);
}
 [data-pushbar-direction="left"][data-pushbar-id] {
        left: 0;
        transform: translateZ(0) translateX(-100%);
    }
 [data-pushbar-direction="left"][data-pushbar-id].opened {
        left: 0;
        transform: translateZ(0) translateX(0);
        padding: 0;
    }


[data-pushbar-direction="right_dialog"][data-pushbar-id],[data-pushbar-direction="left"][data-pushbar-id] {
    top: 0;
    width: 900px;
    max-width: 50%;
    height: 100%;
    box-sizing: border-box;min-width: 25%;
}
[data-pushbar-direction="left"][data-pushbar-id] {width: auto;}
.nav-sections-item-content aside{display: block;}


@media screen and (max-width: 1080px){

   [data-pushbar-direction="right_dialog"][data-pushbar-id],[data-pushbar-direction="left"][data-pushbar-id] {
    max-width: 80%;
 } 
}

@media screen and (max-width: 767px){

   [data-pushbar-direction="right_dialog"][data-pushbar-id],[data-pushbar-direction="left"][data-pushbar-id] {
    max-width: 100%;
 } 
}