/* ==========================
      MENU HAMBURGUER
========================== */

.menu-toggle{

    display:none;

    width:42px;

    height:42px;

    background:none;

    border:none;

    cursor:pointer;

    position:absolute;

    right:0;

    top:50%;

    transform:translateY(-50%);

    flex-direction:column;

    justify-content:center;

    align-items:center;

    gap:6px;

}

.menu-toggle span{

    width:28px;

    height:3px;

    background:#fff;

    border-radius:30px;

    transition:.35s ease;

}

/*==================================
            NAVBAR
==================================*/

.navbar{

    position:sticky;
    top:0;
    z-index:999;

    background:#6b3f1d;

    border-bottom:1px solid rgba(255,255,255,.08);

    box-shadow:0 6px 20px rgba(0,0,0,.18);

}

.navbar .container{

    height:90px;

    display:flex;

    align-items:center;

    justify-content:space-between;

}

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

.logo{

    display:flex;

    align-items:center;

    text-decoration:none;

}

.logo-img{

    height:68px;

    width:auto;

    transition:.3s;

}

.logo:hover .logo-img{

    transform:scale(1.04);

}

/*==================================
            MENU
==================================*/

.desktop-menu{

    display:flex;

    align-items:center;

    gap:35px;

}

.desktop-menu a{

    color:#fff;

    font-size:16px;

    font-weight:500;

    text-decoration:none;

    transition:.3s;

}

.desktop-menu a:hover{

    color:#f3d4ae;

}

.desktop-menu a:not(:last-child)::after{

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

}

/*==================================
            AÇÕES
==================================*/

.acoes{

    display:flex;

    align-items:center;

    gap:12px;

}
/*==================================
        BOTÃO ENCOMENDA
==================================*/

.btn-encomenda{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    padding:13px 22px;

    border-radius:14px;

    background:#d68d52;

    color:#fff;

    text-decoration:none;

    font-size:15px;

    font-weight:600;

    transition:.3s;

    box-shadow:0 4px 12px rgba(0,0,0,.15);

}

.btn-encomenda:hover{

    background:#c47d42;

    transform:translateY(-2px);

}

/*==================================
            CARRINHO
==================================*/

.cart{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    padding:13px 20px;

    border-radius:14px;

    background:#fff;

    color:#6b3f1d;

    text-decoration:none;

    font-size:15px;

    font-weight:600;

    position:relative;

    transition:.3s;

    box-shadow:0 4px 12px rgba(0,0,0,.10);

}

.cart:hover{

    background:#f7efe7;

    transform:translateY(-2px);

}

.cart i{

    font-size:18px;

}

.cart-count{

    position:absolute;

    top:-7px;

    right:-7px;

    width:22px;

    height:22px;

    border-radius:50%;

    background:#e53935;

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:11px;

    font-weight:700;

    border:2px solid #6b3f1d;

}

/*==================================
        REDES SOCIAIS DESKTOP
==================================*/

.social-desktop{

    display:flex;

    gap:10px;

    align-items:center;

}

.social-desktop a{

    width:42px;

    height:42px;

    border-radius:50%;

    background:#fff;

    color:#6b3f1d;

    display:flex;

    justify-content:center;

    align-items:center;

    text-decoration:none;

    font-size:20px;

    transition:.3s;

    box-shadow:0 4px 10px rgba(0,0,0,.08);

}

.social-desktop a:hover{

    background:#d68d52;

    color:#fff;

}

/*==================================
        REDES MOBILE
==================================*/

.social-mobile{

    display:none;

}

/*==================================
            MOBILE
==================================*/

@media(max-width:768px){

    .navbar .container{

        height:72px;

    }

    .desktop-menu{

        display:none;

    }

    .btn-encomenda{

        display:none;

    }

    .social-desktop{

        display:none;

    }

    .cart{

        display:none;

    }

    .social-mobile{

        display:flex;

        align-items:center;

        gap:8px;

    }

    .btn-social{

        display:flex;

        align-items:center;

        justify-content:center;

        gap:5px;

        padding:6px 10px;

        height:34px;

        border-radius:20px;

        text-decoration:none;

        color:#fff;

        font-size:12px;

        font-weight:600;

        transition:.3s;

    }

    .btn-social:hover{

        transform:translateY(-2px);

    }

    .btn-social i{

        font-size:16px;

    }

    .whatsapp{

        background:#25D366;

    }

    .instagram{

        background:linear-gradient(
            45deg,
            #F58529,
            #DD2A7B,
            #8134AF,
            #515BD4
        );

    }

    .logo-img{

        height:45px;

    }

}

/*==============================
        MENU MOBILE
==============================*/

.menu-toggle{

    display:none;

    background:none;

    border:none;

    color:#fff;

    font-size:34px;

    cursor:pointer;

}

.menu-overlay{

    position:fixed;

    inset:0;

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

    opacity:0;

    visibility:hidden;

    transition:.3s;

    z-index:9998;

}

.menu-overlay.active{

    opacity:1;

    visibility:visible;

}

.menu-mobile{

    position:fixed;

    left:-310px;

    top:0;

    width:290px;

    height:100vh;

    background:#6b3f1d;

    transition:.35s;

    z-index:9999;

    padding:25px;

    box-shadow:10px 0 30px rgba(0,0,0,.25);

}

.menu-mobile.active{

    left:0;

}

.menu-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:30px;

}

.menu-header img{

    height:65px;

}

.fechar-menu{

    background:none;

    border:none;

    color:white;

    font-size:28px;

    cursor:pointer;

}

.menu-mobile a{

    display:flex;

    align-items:center;

    gap:12px;

    color:white;

    text-decoration:none;

    padding:15px 0;

    font-size:17px;

    transition:.3s;

}

.menu-mobile a:hover{

    color:#ffd49a;

    padding-left:10px;

}

.menu-mobile hr{

    border:none;

    border-top:1px solid rgba(255,255,255,.15);

    margin:20px 0;

}

@media(max-width:768px){

    .navbar .container{

        position:relative;

        height:72px;

        display:flex;

        align-items:center;

        justify-content:flex-start;

    }

    .desktop-menu,
    .acoes{

        display:none;

    }

    .logo{

        margin:0;

    }

    .logo-img{

        height:45px;

    }

    .menu-toggle{

        display:flex;

        align-items:center;

        justify-content:center;

        position:absolute;

        right:0;

        top:50%;

        transform:translateY(-50%);

    }

}

.bottom-nav{

    display:none;

}

@media(max-width:768px){

.bottom-nav{

    position:fixed;

    left:0;

    bottom:0;

    width:100%;

    height:72px;

    background:#fff;

    display:flex;

    justify-content:space-around;

    align-items:center;

    box-shadow:0 -5px 20px rgba(0,0,0,.12);

    z-index:9999;

}

.bottom-nav .item{

    flex:1;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    color:#888;

    text-decoration:none;

    font-size:11px;

    position:relative;

}

.bottom-nav i{

    font-size:23px;

    margin-bottom:4px;

}

.bottom-nav .ativo{

    color:#6b3f1d;

}

.badge{

    position:absolute;

    top:4px;

    right:30%;

    width:18px;

    height:18px;

    background:#ff3b30;

    color:#fff;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:10px;

    font-weight:bold;

}

body{

    padding-bottom:80px;

}

}

/* ==================================
   ANIMAÇÃO MENU HAMBÚRGUER
================================== */

.menu-toggle{
    overflow: visible;
}

.menu-toggle span{
    display:block;
    width:28px;
    height:3px;
    margin:4px 0;
    background:#fff;
    border-radius:30px;
    transition:all .35s cubic-bezier(.4,0,.2,1);
    transform-origin:center;
}

.menu-toggle.active span:nth-child(1){
    transform:translateY(11px) rotate(45deg);
}

.menu-toggle.active span:nth-child(2){
    opacity:0;
    transform:scaleX(0);
}

.menu-toggle.active span:nth-child(3){
    transform:translateY(-11px) rotate(-45deg);
}

/* MENU */

.menu-mobile{
    transition:left .45s cubic-bezier(.22,.61,.36,1);
}

/* LINKS */

.menu-mobile a{
    opacity:0;
    transform:translateX(-25px);
    transition:
        transform .35s ease,
        opacity .35s ease,
        color .25s;
}

.menu-mobile.active a{
    opacity:1;
    transform:translateX(0);
}

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

/* OVERLAY */

.menu-overlay{
    backdrop-filter:blur(4px);
    transition:opacity .35s ease, visibility .35s ease;
}