/* =================================
  Header Responsive
================================= */
@media(max-width:991px){
    .mx-nav{
        display:none;
    }
    .mx-header-inner{
        height:72px;
    }
    .mx-logo img{
        height:38px;
    }
    .mx-header-icons{
        gap:18px;
    }
    .mx-icon{
        font-size:22px;
    }
}
/* =================================
   Mobile
================================= */
@media(max-width:575px){
    .mx-announcement-bar{
        height:40px;
    }
    .mx-announcement-inner{
        grid-template-columns:1fr;
    }
    .mx-announcement-btn{
        display:none;
    }
    .mx-announcement-inner p{
        font-size:12px;
    }
    .mx-header-inner{
        height:68px;
    }
    .mx-logo img{
        height:34px;
    }
    .mx-header-icons{
        gap:14px;
    }
    .mx-icon{
        font-size:20px;
    }
}
/* =================================
   Hero Section
================================= */
@media(max-width:991px){
    .mx-hero{
        height:650px;
    }
    .mx-hero-content{
        bottom:50px;
        padding:0 20px;
    }
    .mx-hero-content h1{
        font-size:48px;
    }
    .mx-hero-content p{
        font-size:18px;
    }
}
@media(max-width:575px){
    .mx-hero{
        height:500px;
    }
    .mx-hero-tag{
        font-size:12px;
    }
    .mx-hero-content h1{
        font-size:34px;
    }
    .mx-hero-content p{
        font-size:15px;
        line-height:1.6;
    }
    .mx-hero-btn{
        padding:14px 26px;
        font-size:14px;
    }
}
/*  */
/* =====================================
MOBILE SHOP PAGE
===================================== */

@media(max-width:767px){

    .container{
        padding-left:15px;
        padding-right:15px;
    }

    .mx-shop-page{
        padding:40px 0;
    }

    .mx-shop-header{
        margin-bottom:30px;
    }

    .mx-shop-title{
        font-size:30px;
        line-height:1.2;
    }

    .mx-shop-subtitle{
        font-size:14px;
        max-width:280px;
        margin:auto;
    }

    /* CATEGORY */

    .mx-category-pills{
        justify-content:flex-start;
        flex-wrap:nowrap;
        overflow-x:auto;
        scrollbar-width:none;
        padding-bottom:10px;
        margin-bottom:25px;
    }

    .mx-category-pills::-webkit-scrollbar{
        display:none;
    }

    .mx-pill{
        white-space:nowrap;
        flex-shrink:0;
        font-size:13px;
        padding:10px 16px;
    }

    /* PRODUCT GRID */

    .woocommerce ul.products,
    ul.products{

        display:grid !important;

        grid-template-columns:
        repeat(2,minmax(0,1fr)) !important;

        gap:12px !important;

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

    .woocommerce ul.products li.product,
    .woocommerce-page ul.products li.product,
    ul.products > li{

        width:auto !important;

        float:none !important;

        margin:0 !important;
    }
    /* CARD */
.mx-product-card{
    padding:10px;
    border-radius:16px;
}

.mx-product-content{
    display:block;
}
    /* IMAGE */
    .mx-product-image{
        height:140px;
        border-radius:12px;
    }
    .mx-product-image img{
        width:100%;
        height:100%;
        object-fit:contain;
    }
    /* TITLE */
    .mx-product-title{
        font-size:13px;
        line-height:1.4;
        min-height:38px;
        overflow:hidden;
        display:-webkit-box;
        -webkit-line-clamp:2;
        -webkit-box-orient:vertical;
        margin-bottom:8px;
    }
    /* PRICE */
    .mx-sale-price{
        font-size:18px;
    }
    .mx-regular-price{
        font-size:12px;
    }
    .mx-saving{
        font-size:11px;
    }
    /* BUTTONS */
    .mx-btns{
    display:flex !important;
    flex-direction:column !important;
    gap:8px;
    margin-top:8px;
   }
    .mx-btns .button,
    .mx-buy-now{
        width:100% !important;
        height:36px !important;
        padding:0 !important;
        display:flex !important;
        align-items:center;
        justify-content:center;
        font-size:12px !important;
        border-radius:12px !important;
    }
}
/* =====================================
SMALL MOBILE
===================================== */
@media(max-width:480px){
    .mx-shop-title{
        font-size:26px;
    }
    .mx-product-title{
        font-size:12px;
    }
    .mx-sale-price{
        font-size:16px;
    }
    .mx-product-image{
        height:120px;
    }
}

/* LOGIN POPUP WEBSITE VISITE TIMING 10SEC ///////////////// */


@media(max-width:767px){
.mx-popup-box{
    width:100%;
    margin:15px;
    padding:24px;
}
.mx-popup-box h3{
    font-size:22px;
}

}


/* ///// globel css */

/* left right categories scroll shop page  */
@media(max-width:767px){

    html,
    body{
        overflow-x:hidden;
        max-width:100%;
    }

    .mx-shop-page{
        overflow-x:hidden;
    }

    .mx-category-slider-wrap{
        overflow:hidden;
        width:100%;
    }

    .mx-category-pills{
        overflow-x:auto;
        overflow-y:hidden;
        width:100%;
        padding:0 15px;
        box-sizing:border-box;
    }

}