@font-face {
  font-family: "icomoon";
  src:  url("../fonts/icomoon.eot?srnlev");
  src:  url("../fonts/icomoon.eot?srnlev#iefix") format("embedded-opentype"),
    url("../fonts/icomoon.ttf?srnlev") format("truetype"),
    url("../fonts/icomoon.woff?srnlev") format("woff"),
    url("../fonts/icomoon.svg?srnlev#icomoon") format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: block;
}


header.main-header .header-wrapper-frf {
    /* background-color: aqua; */
    position: relative;
}



header.main-header .header-wrapper-frf .header-mobile {
    /* float:left; */
    width: 30%;
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    padding: 0 0 15px;
    z-index: 1;
    padding: 0;
}

header.main-header .header-wrapper-frf .header-mobile img {
    max-width: 210px;
    width:100%;
}

header.main-header .header-wrapper-frf .header {
    /* float:left; */
    width: 100%;

}



header.main-header .header-wrapper-frf .header .x-nav-menu-toggle {
    background: transparent;
    color: black;
}

@media screen and (max-width: 492px) {
    header.main-header .site-top .site-top-left {
        float:left;
        font-size: 12px;
    }
    header.main-header .site-top .site-top-right {
        float:right;
        font-size: 12px;
    }
}

@media screen and (max-width: 600px) {
    header.main-header .header-wrapper-frf .header-mobile {
        top:10px;
    }
}

@media screen and (max-width: 991px) {
    header.main-header {
        margin-bottom: 0;
        transition: transform 0.5s ease, box-shadow 0.7s ease;
    }

    header.main-header.sticky {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 999;
        background: #fff;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        animation: slideDown 0.3s ease forwards;
    }

    @keyframes slideDown {
        from {
            transform: translateY(-100%);
        }
        to {
            transform: translateY(0);
        }
    }

    header.main-header .header-wrapper-frf::after {
        content: "";
        display: table;
        clear: both;
    }

    header.main-header .header-wrapper-frf .header .container {
    padding: 10px 0;
}

    .x-nav-menu.x-nav-menu-horizontal {
        position: relative;
        z-index: 1000;
    }


    /* SHOP SIDEBAR */
    .shop-sidebar {
        display: block !important;
        position: fixed;
        top: 0;
        left: 0;
        width: 280px;
        height: 100%;
        z-index: 1060;
        background: #fff;
        overflow-y: auto;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        padding: 60px 15px 15px;
        box-shadow: 2px 0 8px rgba(0,0,0,0.15);
        float: none !important;
    }

    .shop-sidebar.sidebar-open {
        transform: translateX(0);
    }

    .shop-sidebar-toggle::before {
        content: "\e993";
        font-family: "icomoon" !important;
           
            font-size: 20px;
    
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            display: block;

    }

    .shop-sidebar-toggle {
        position: fixed;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        z-index: 998;/*1049 */
        background: #333;
        color: #fff;
        border: none;
        padding: 12px 10px;
        font-size: 14px;
        cursor: pointer;
        /* writing-mode: vertical-rl;
        text-orientation: mixed; */
        border-radius: 0 4px 4px 0;
        transition: background 0.2s ease;
        text-transform: uppercase;
    }

    .shop-sidebar-toggle:hover {
        background: #555;
    }

    .shop-sidebar-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.4);
        z-index: 1040;
    }

    .shop-sidebar-overlay.active {
        display: block;
    }

    .shop-sidebar-close {
        position: absolute;
        top: 15px;
        right: 15px;
        background: none;
        border: none;
        font-size: 22px;
        cursor: pointer;
        color: #333;
        line-height: 1;
    }
}

@media screen and (min-width: 992px) {
    .shop-sidebar-close {
        display: none;
    }
}