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


/* tabler to mobile */


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


    /* ========================= */
    /* OVERLAY */
    /* ========================= */
    .mobile-drawer-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,.35);
        opacity: 0;
        visibility: hidden;
        transition: opacity .3s ease;
        z-index: 9998;
    }

    body.drawer-open .mobile-drawer-overlay {
        opacity: 1;
        visibility: visible;
    }

    /* ========================= */
    /* DRAWER BASE */
    /* ========================= */
    .mobile-drawer {
        position: fixed;
        background: #fff;
        z-index: 9999;
        display: flex;
        flex-direction: column;
        will-change: transform;
        backface-visibility: hidden;
    }

    /* ========================= */
    /* LEFT DRAWER */
    /* ========================= */
    .drawer-left {
        top: 0;
        left: 0;
        height: 100vh;
        width: 86%;
        max-width: 360px;
        /* 🔴 START POSITION */
        transform: translateX(-100%);
        transition: transform 0.25s ease;
    }

    body.drawer-open .drawer-left {
        /* 🟢 END POSITION */
        transform: translateX(0);
    }


    /* ========================= */
    /* BOTTOM DRAWER (FULL WIDTH) */
    /* ========================= */
    .drawer-bottom {
        left: 0;
        bottom: 0;
        width: 100%;
        height: 85vh;
        transform: translate3d(0, 100%, 0);
        transition: transform 0.15s cubic-bezier(0.22, 1, 0.36, 1);
        border-radius: 16px 16px 0 0;
    }

    body.drawer-open .drawer-bottom {
        transform: translate3d(0, 0, 0);
    }


    /* ========================= */
    /* HEADER */
    /* ========================= */
    .mobile-drawer-header {
        padding: 14px 16px;
        border-bottom: 1px solid #eee;
        display: flex;
        justify-content: flex-end;
    }

    /* ========================= */
    /* BODY */
    /* ========================= */
    .mobile-drawer-body {
        padding: 16px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        flex: 1;
    }


    .drawer-close {
        padding: initial;
        background: initial;
        border: initial;
        color: initial;
        float: right;
        opacity: 1
    }

    .mobile-drawer-body .box-nav-ul {
        display: block !important;
    }

        .mobile-drawer-body .box-nav-ul .menu-item {
            border-bottom: 1px solid var(--line);
        }

            .mobile-drawer-body .box-nav-ul .menu-item .item-link {
                min-height: 48px;
                font-weight: 600;
                font-size: 15px;
                line-height: 24px;
                color: var(--main);
                display: flex;
                align-items: center;
                justify-content: space-between;
            }

    .mobile-drawer.drawer-left .mobile-drawer-header {
        display: none
    }



    .mobile-drawer .nav-account.wholesaler-account {
        padding: 0px;
    }


    .mobile-drawer .wholesaler-account .nav-icon-item {
        top: 13px;
        position: absolute;
    }


        .mobile-drawer .wholesaler-account .nav-icon-item svg,
        .mobile-drawer .wholesaler-account .nav-icon-item .icon-arrow-down {
            display: none
        }


    .mobile-drawer .nav-account.wholesaler-account .dropdown-account,
    .mobile-drawer .nav-account:hover .dropdown-account {
        right: initial !important;
        top: initial;
        box-shadow: none;
        left: initial;
        display: block;
        visibility: visible;
        opacity: 1;
        min-width: 100%;
        padding: 0px;
        position: relative;
        transform: none;
    }

}

/* Mobile only */ /* Phones */


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

    .tab-product {
        justify-content: center;
    }

        .tab-product .nav-tab-item a {
            font-size: 14px;
        }


    .flat-spacing-8, .flat-spacing, .flat-spacing-10,
    .flat-spacing-3 {
        padding-bottom: 30px;
        padding-top: 30px;
    }

    .collection-circle .count {
        font-size: 11px;
        line-height: 11px;
    }

    .testimonial-item .img-style img {
        object-position: top;
    }
    .testimonial-item {
        height: 500px;
    }
    .footer{
        display:none
    }

main{
    padding-bottom: 80px;
}

    .btn-line {
        font-size: 12px;
        line-height: 22px;
    }

    .logo-header img {
        width: 60px;
    }

    .box-title-slider .title-display {
        font-size: 25px;
        line-height: 20px;
        text-shadow: 4px 4px 4px #000;
    }

    .box-title-slider p {
        font-size: 12px;
        text-shadow: 4px 4px 4px #000;
    }

    .marquee-track {
        animation: marquee 13s linear infinite;
    }

    .marquee-item {
        padding: 0 0px;
    }
    .top-marquee .icon {
        padding-left: 38px;
        padding-right: 25px;
    }

    .slider-default .tf-btn{
        padding: 5px 20px;
        font-size: 11px;
        line-height: 22px;
    }

    .slider-default .tf-btn .icon {
        font-size: 13px;
    }

    .slider-default .box-content {
        bottom: 16px;
    }

    .collection-position-2{
        width:50%;
    }

    .m-no-padding{
        padding:0px !important
    }
    .collection-position-2 .cls-btn {
        width: 100% !important;
        box-shadow: 0px 1px 11px #c7c7c8;
        padding: 5px 28px;
    }

    .collection-position-2 .cls-btn h6{
    font-size:14px;
    }


    .wholesale-section main {
        margin-top: 83px;
    }




    .toolbar-icon svg
     {
        fill: #000
    }

   .mobile-cart .toolbar-icon svg {
        fill: none
    }
    .nav-icon-item-wholsale svg {
        stroke: #636364;
        stroke-width:4px !important;
        width:20px;
        height:20px;
     }

        .nav-icon-item-wholsale svg path {
            stroke-width: 1px !important
        }

        .login-page .split-right {
            padding: 2rem;
        }

    .wholsale-cart {
        position: fixed;
        right: 10%;
        bottom: 9px;
        z-index: 100002;
        top: initial;
    }
    .nav-icon-item-wholsale{
        text-align:center
    }

    .wholsale-cart .toolbar-label {
        display: block;
        font-size: 12px;
        font-weight: 500;
        line-height: 16px;
        color: var(--secondary);
    }


    .wholesale-section .user-menu {
        background: var(--white-smoke);
        border-radius: 100%;
        padding: 10px;
        float: right;
        position: absolute;
        right: 13px;
        width: 47px;
    }

        .wholesale-section .user-menu svg {
            width: 20px;
            height: 20px;
            fill: var(--grey2);
        }

    .swiper-vertical > .swiper-wrapper {
        flex-direction: row;
        gap: 5px;
        overflow: scroll;
        scrollbar-width: none;
    }

    .multi-varioation-table thead{
        display:none
    }

    .multi-varioation-table .row-item {
        display: block;
        width: 50%;
        float: left;
    }

    .multi-varioation-table .matrix-cell {
        display: none
    }

    .wholesale-section .product-detail-v2{
        margin-top:0px;
        padding-top:0px !important;
    }


    .multi-varioation-table .row-item .m-size {
        background: var(--white-smoke);
        width: 100%;
        display: block;
    }

    .multi-varioation-table td {
        display: block;
        width: 100%;
    }
    .new-prod-wrapper {
        height: auto;
        max-height: 100%;
        overflow: visible;
    }

    .close {
        top: 0px;
        right: 0px;
        position: absolute;
        margin: 0px;
        box-shadow:none;
        border:none
    }

    .badge-icon.badge-best_seller {
        font-size: 12px;
        margin-top: 6px;
    }

    .tf-shop-control {
        display: none !important
    }





    .usermenu-ws{
        display:block !important
    }


    .filterShop {
        padding: 10px;
        float: right;
        margin-top: -20px;
        margin-bottom: 20px;
        cursor:pointer !important;
        display:block !important
        
    }

        .filterShop .icon {
            font-size: 23px;
        }

    #search-filters {
        display: none !important
    }
    .showfilter #search-filters{
        display:block !important;
        background:none 
            
    }


    .serchclose,
    .serchclose:hover {
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,.35);
        opacity: 1;
        visibility: visible;
        transition: opacity .3s ease;
        z-index: 9998;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border-radius: 0px;
        border: none;
        display: block !important;
    }
    .search-filter-list {
        padding: 20px;
        width: 80%;
        background: white;
        position: fixed;
        z-index: 10001;
        overflow: scroll;
        scrollbar-width: none;
        top: 0;
        bottom: 0;
        left: 0;
    }


    .wholesalelogin {
        width: 118px;
        z-index: 10000011;
        background: var(--theme-color);
        color: white;
        position: relative;
        margin-top: -15px;
        margin-bottom: -19px;
    }

        .wholesalelogin a {
            color: white;
            font-size: 12px;
            text-align: center;
            width: 100%;
            padding: 10px;
        }
    .wholesalelogin svg{
        fill: white;
    }

    .tf-toolbar-bottom .toolbar-item {
        position: relative;
        text-align: center;
        min-width: 21%;
        flex:initial
    }

    .tf-toolbar-bottom{
        justify-content:space-between
    }

    .list-color-product .list-color-item {
        width: 25px;
        height: 25px;
    }



}

/* small mobile */



@media screen and (max-width: 770px) and (orientation: portrait) {
 .w-none{
        display:initial
    }

    .wholesale-section main {
        margin-top: 62px;
    }

   

}
@media screen and (max-width: 480px) and (orientation: portrait) {

}

/* Tablet Portrait */
@media screen and (min-width: 768px) and (max-width: 991px) and (orientation: portrait) {   
    
   
}

/* Tablet Landscape */
@media screen and (min-width: 992px) and (max-width: 1250px) and (orientation: landscape) {
}