/*==========================================================
    MI TIENDA ONLINE
    MOBILE HEADER 2.0
==========================================================*/

@media (min-width:993px){

    .mobile-top,
    .mobile-menu,
    .mobile-overlay{


    }

}

@media (max-width:992px){

/*==========================================================
    OCULTAR HEADER ESCRITORIO
==========================================================*/

.desktop-header{

    display:none;

}

/*==========================================================
    HEADER SUPERIOR
==========================================================*/

.mobile-top{

    position:fixed;

    top:0;
    left:0;
    right:0;

    height:74px;

    background:#ffffff;

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:0 18px;

    box-shadow:0 8px 25px rgba(0,0,0,.08);

    z-index:99999;

}

body{

    padding-top:74px;

}

.mobile-left,
.mobile-center,
.mobile-right{

    display:flex;

    align-items:center;

}

.mobile-right{

    gap:12px;

}

/*==========================================================
    LOGO
==========================================================*/

.mobile-logo{

    display:flex;

    align-items:center;

    justify-content:center;

    text-decoration:none;

}

.mobile-logo img{

    height:54px;

    width:auto;

    display:block;

}

/*==========================================================
    BOTONES
==========================================================*/

.mobile-btn{

    width:46px;

    height:46px;

    border:none;

    border-radius:50%;

    background:#f5f5f5;

    color:#7a0019;

    cursor:pointer;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:18px;

    transition:.25s;

}

.mobile-btn:hover{

    background:#7a0019;

    color:#ffffff;

}

.mobile-btn:active{

    transform:scale(.92);

}

/*==========================================================
    FONDO OSCURO
==========================================================*/

.mobile-overlay{

    display:block;

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.45);

    opacity:0;

    visibility:hidden;

    pointer-events:none;

    transition:.30s;

    z-index:99998;

}

.mobile-overlay.show{

    opacity:1;

    visibility:visible;

    pointer-events:auto;

}

/*==========================================================
    PANEL LATERAL
==========================================================*/

.mobile-menu{

    display:block;

    position:fixed;

    top:0;

    left:-320px;

    width:300px;

    max-width:90%;

    height:100vh;

    background:#ffffff;

    overflow-y:auto;

    transition:left .30s ease;

    box-shadow:15px 0 40px rgba(0,0,0,.25);

    z-index:100000;

    -webkit-overflow-scrolling:touch;

}

.mobile-menu.open{

    left:0;

}

/*==========================================================
    CABECERA DEL MENÚ
==========================================================*/

.mobile-menu-header{

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:24px;

    background:linear-gradient(135deg,#7a0019,#b30000);

    color:#fff;

}

.mobile-menu-header img{

    height:58px;

    width:auto;
    
}

.mobile-menu-header button{

    width:42px;

    height:42px;

    border:none;

    border-radius:50%;

    background:rgba(255,255,255,.18);

    color:#fff;

    cursor:pointer;

    font-size:20px;

    transition:.25s;

}

.mobile-menu-header button:hover{

    background:#fff;

    color:#7a0019;

    transform:rotate(90deg);

}

/*==========================================================
    CUERPO DEL MENÚ
==========================================================*/

.mobile-menu-body{

    padding:18px 0;

}

.mobile-menu-body a{

    display:flex;

    align-items:center;

    gap:16px;

    padding:9px 15px;

    text-decoration:none;

    color:#333;

    font-size:15px;

    font-weight:500;

    border-left:4px solid transparent;

    transition:.25s;

}

.mobile-menu-body a:hover{

    background:#fafafa;

    color:#7a0019;

    border-left-color:#b30000;

    padding-left:30px;

}

.mobile-menu-body a:active{

    background:#f3f3f3;

}

.mobile-menu-body i{

    width:24px;

    text-align:center;

    font-size:18px;

    color:#7a0019;

}

.mobile-menu-body hr{

    margin:18px 22px;

    border:none;

    border-top:1px solid #ececec;

}

/*==========================================================
    PIE DEL MENÚ
==========================================================*/

.mobile-menu-footer{

    margin-top:20px;

    padding:24px;

    border-top:1px solid #ececec;

    background:#fafafa;

    text-align:center;

}

.mobile-menu-footer h4{

    margin:0;

    font-size:15px;

    font-weight:700;

    color:#7a0019;

}

.mobile-menu-footer p{

    margin:6px 0 0;

    font-size:13px;

    color:#777;

    line-height:1.5;

}

/*==========================================================
    ANIMACIONES
==========================================================*/

.mobile-menu-body a{

    opacity:0;

    transform:translateX(-20px);

    animation:menuItem .35s forwards;

}

.mobile-menu-body a:nth-child(1){animation-delay:.05s;}
.mobile-menu-body a:nth-child(2){animation-delay:.10s;}
.mobile-menu-body a:nth-child(3){animation-delay:.15s;}
.mobile-menu-body a:nth-child(4){animation-delay:.20s;}
.mobile-menu-body a:nth-child(5){animation-delay:.25s;}
.mobile-menu-body a:nth-child(6){animation-delay:.30s;}
.mobile-menu-body a:nth-child(7){animation-delay:.35s;}
.mobile-menu-body a:nth-child(8){animation-delay:.40s;}
.mobile-menu-body a:nth-child(9){animation-delay:.45s;}
.mobile-menu-body a:nth-child(10){animation-delay:.50s;}

@keyframes menuItem{

    from{

        opacity:0;

        transform:translateX(-20px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

@keyframes menuFade{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}

.mobile-menu.open{

    animation:menuFade .30s;

}

/*==========================================================
    SCROLL
==========================================================*/

.mobile-menu::-webkit-scrollbar{

    width:6px;

}

.mobile-menu::-webkit-scrollbar-thumb{

    background:#c7c7c7;

    border-radius:20px;

}

.mobile-menu::-webkit-scrollbar-track{

    background:#f5f5f5;

}

/*==========================================================
    RESPONSIVE
==========================================================*/

.mobile-menu{

    -webkit-overflow-scrolling:touch;

}

}