Topo - Modelo 06

Modelo 06 para o topo da loja virtual. 

# HTML
{% set usuario = store.userStore() %}
{% set paginasTopo = store.getDynamicPages({text_upper:true}) %}
{% set categorias = store.categories() %}
{% set categorias_menu = store.categoriesMenu() %}
{% set carrinho = store.cart() %}
{% set whatsapp = store.getWhatsappAttendance() %}
{% set ofertasPeriodicas = store.periodicOffers() %}
<header class="block">
    {% if ofertasPeriodicas.id %}
        <component data-modulo="ofertasperiodicas" loading="false"></component>
    {% endif %}
    <div class="header">
        <div class="d-flex flex-row align-items-center">
            <div class="hamburger-icon d-md-none">
                <span class="hamburger"></span>
            </div>
            <div class="busca_btn_mobile d-flex d-md-none">
                <svg class="svg-icon" viewBox="0 0 20 20">
                    <path fill="none" d="M12.323,2.398c-0.741-0.312-1.523-0.472-2.319-0.472c-2.394,0-4.544,1.423-5.476,3.625C3.907,7.013,3.896,8.629,4.49,10.102c0.528,1.304,1.494,2.333,2.72,2.99L5.467,17.33c-0.113,0.273,0.018,0.59,0.292,0.703c0.068,0.027,0.137,0.041,0.206,0.041c0.211,0,0.412-0.127,0.498-0.334l1.74-4.23c0.583,0.186,1.18,0.309,1.795,0.309c2.394,0,4.544-1.424,5.478-3.629C16.755,7.173,15.342,3.68,12.323,2.398z M14.488,9.77c-0.769,1.807-2.529,2.975-4.49,2.975c-0.651,0-1.291-0.131-1.897-0.387c-0.002-0.004-0.002-0.004-0.002-0.004c-0.003,0-0.003,0-0.003,0s0,0,0,0c-1.195-0.508-2.121-1.452-2.607-2.656c-0.489-1.205-0.477-2.53,0.03-3.727c0.764-1.805,2.525-2.969,4.487-2.969c0.651,0,1.292,0.129,1.898,0.386C14.374,4.438,15.533,7.3,14.488,9.77z"></path>
                </svg>
            </div>
            <h1 class="d-none d-md-block">
                <a href="./" class="btLogo " style="background-image:url('{{ store.getLogo() }}');">
                    {{ seo.title }}
                </a>
            </h1>
        </div>
        <h1 class="Logo_mobile">
            <a href="./" class="btLogo_mobile" style="background-image:url('{{ store.getLogo() }}');">
                {{ seo.title }}
            </a>
        </h1>
        <div class="hamburger-scroll__container">
            <div class="hamburger-scroll">
                <span class="hamburger_item"></span>
                <span class="hamburger_item"></span>
                <span class="hamburger_item"></span>
            </div>
            <div class="hamburger-scroll__label">
                Abrir/Fechar Departamentos
            </div>
        </div>
        {% if not global.var_mostruario or (global.var_mostruario and not global.var_bloquear_cadastros) %}
            <div class="conta" id="login_btn">
                <div class="login_btn" >
                    <svg class="svg-icon" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                        <path fill-rule="evenodd" d="M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H3zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"/>
                    </svg>
                </div>
                <div class="login__label">
                    {% if not usuario.logged %}
                        <h4 class="mb-1 login_head">Olá Visitante!</h4>
                        <a href="" class="mymodal login_btn" data-include="inc.php?meio=inc_login" data-width="400" title="Efetuar login">
                            Faça Login ou Cadastre-se
                        </a>
                    {% else%}
                        {% set usuarioNome = usuario.data.nome|split(' ')[0] %}
                        <h4 class="login_head mb-1">Olá {{ usuarioNome|capitalize }} !</h4>
                        <div class="login_group">
                            <a href="central" class="login_btn p-1">Minha Conta</a>
                            |
                            <a href="#" class="login_btn b-desconectar p-1">Sair</a>
                        </div>
                    {% endif %}
                </div>
            </div>
        {% endif %}
        <div class="search_desktop d-none d-md-block search" id="searchDesktop">
            <form action="busca/" method="get">
                <input type="text" class="form-control" name="q" aria-label="Buscar" data-url="produtos_autocomplete.php" placeholder="Buscar">
                <button type="submit" class="busca_btn" aria-label="Pesquisar">
                    <svg class="svg-icon" viewBox="0 0 20 20">
                        <path fill="none" d="M12.323,2.398c-0.741-0.312-1.523-0.472-2.319-0.472c-2.394,0-4.544,1.423-5.476,3.625C3.907,7.013,3.896,8.629,4.49,10.102c0.528,1.304,1.494,2.333,2.72,2.99L5.467,17.33c-0.113,0.273,0.018,0.59,0.292,0.703c0.068,0.027,0.137,0.041,0.206,0.041c0.211,0,0.412-0.127,0.498-0.334l1.74-4.23c0.583,0.186,1.18,0.309,1.795,0.309c2.394,0,4.544-1.424,5.478-3.629C16.755,7.173,15.342,3.68,12.323,2.398z M14.488,9.77c-0.769,1.807-2.529,2.975-4.49,2.975c-0.651,0-1.291-0.131-1.897-0.387c-0.002-0.004-0.002-0.004-0.002-0.004c-0.003,0-0.003,0-0.003,0s0,0,0,0c-1.195-0.508-2.121-1.452-2.607-2.656c-0.489-1.205-0.477-2.53,0.03-3.727c0.764-1.805,2.525-2.969,4.487-2.969c0.651,0,1.292,0.129,1.898,0.386C14.374,4.438,15.533,7.3,14.488,9.77z"></path>
                    </svg>
                </button>
            </form>
        </div>
        <div class="d-flex flex-row align-items-center justify-content-between ml-2">
            {% if whatsapp.online %}
                <div class="wpp_link mr-4">
                    <div class="brand_logo">
                        <i class="fa fa-whatsapp"></i>
                    </div>
                    <div class="wpp_lable">
                        <span class="call">WhatsApp SAC</span>
                        <span class="wpp_tell"><a href="{{ whatsapp.url }}" target="_blank">{{ whatsapp.numero_raw }}</a></span>
                    </div>
                </div>
            {% endif %}
            {% if not global.var_mostruario %}
                <div class="cart_container" id="cartBtn">
                    <div class="cart">
                        <svg  class="svg-icon" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path fill-rule="evenodd" d="M8 1a2 2 0 0 0-2 2v4.5a.5.5 0 0 1-1 0V3a3 3 0 0 1 6 0v4.5a.5.5 0 0 1-1 0V3a2 2 0 0 0-2-2z"/>
                            <path fill-rule="evenodd" d="M3.405 6a.5.5 0 0 0-.498.45l-.912 6.9A1.5 1.5 0 0 0 3.488 15h9.024a1.5 1.5 0 0 0 1.493-1.65l-.913-6.9a.5.5 0 0 0-.497-.45h-9.19zm-1.493.35A1.5 1.5 0 0 1 3.405 5h9.19a1.5 1.5 0 0 1 1.493 1.35L15 13.252A2.5 2.5 0 0 1 12.512 16H3.488A2.5 2.5 0 0 1 1 13.251l.912-6.9z"/>
                        </svg>
                        <span class="sup">{{ carrinho.total_items }}</span>
                    </div>
                    <div class="cart-total cart__label">
                        <span class="text__lable">minha sacola</span>
                        <span class="cart-total-label total__lable">R${{ carrinho.cart.amount.total|valor }}</span>
                    </div>
                </div>
            {% endif %}
        </div>
    </div>
    {% if show_menu != false or page != 'principal.php' %}
        <div class="links d-none d-md-block">
            <div class="central">
                <ul class="categorias_desk">
                    {% for cat in categorias_menu|slice(0,10) %}
                    <li>
                        <a class="links_item" href="{{ cat.url }}">
                            <span {% if cat.cor != '' %} style="color:{{ cat.cor }}" {% endif %}>{{ cat.nome }}</span>
                        </a>
                        {% if cat.subs|length >= 1 %}
                        <div class="dropdown">
                            <ul class="list_l2">
                                {% for level2 in cat.subs %}
                                <li class="l2_item">
                                    <a href="{{ level2.url }}">
                                        {{ level2.nome }}
                                        {% if level2.subs|length >= 1 %}
                                        <i class="fa fa-angle-right"></i>
                                        {% endif %}
                                    </a>
                                    {% if level2.subs|length >= 1 %}
                                    <ul class="list_l3">
                                        {% for level3 in level2.subs %}
                                        <li class="l3_item"><a href="{{ level3.url }}">{{ level3.nome }}</a></li>
                                        {% endfor %}
                                    </ul>
                                    {% endif %}
                                </li>
                                {% endfor %}
                            </ul>
                            {% if cat.banner != ''%}
                            <div class="bnr">
                                {{ cat.banner|raw }}
                            </div>
                            {% endif %}
                        </div>
                        {% endif %}
                    </li>
                    {% endfor %}
                </ul>
            </div>
        </div>
    {% endif %}
    
    <div class="mobileMenu">
        <div class="mobileContainer">
            <nav class="mobileNav">
                {% if not global.var_mostruario or (global.var_mostruario and not global.var_bloquear_cadastros) %}
                    <li class="login_mobile">
                        {% if not usuario.logged %}
                            <div class="login_ico" >
                                <svg class="svg-icon" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                                    <path fill-rule="evenodd" d="M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H3zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"/>
                                </svg>
                            </div>
                            <div class="login_group">
                                <span class="mb-1 login_head">Olá <b>Visitante</b> !</span>
                                <a href="" class="mymodal login_btn mb-1" data-include="inc.php?meio=inc_login" data-width="300" title="Efetuar login">Faça seu <b>login</b></a>
                            </div>
                        {% else %}
                            {% set usuarioNome = usuario.data.nome|split(' ')[0] %}
                            <div class="login_ico" >
                                <svg class="svg-icon" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                                    <path fill-rule="evenodd" d="M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H3zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"/>
                                </svg>
                            </div>
                            <div class="login_group">
                                <span class="mb-1 login_head">Olá <b>{{ usuarioNome|capitalize }}</b> !</span>
                                <span class="btn_navLogin">
                                <a href="central" class="mb-1">Minha Conta </a>
                                |
                                <a href="#" id="b-desconectar"> Sair</a>
                                </span>
                            </div>
                        {% endif %}
                    </li>
                {% endif %}
                
                {% if kits_config.total >= 1 and kits_config.show_menu == '1' %}
                    <li><a class="navItem" href="{{ kits_config.url }}">{{ kits_config.names }}</a></li>
                {% endif %}
                
                {% for categoria in categorias_menu %}
                    <li>
                        <a class="navItem" href="{{ categoria.url }}"{{ categoria.cor != '' ? (' style="color:' ~ categoria.cor ~ '"')|raw : '' }}>
                            {{ categoria.nome }}
                        </a>
                        {% if categoria.subs >= 1 %}
                            <div class="btDropdown">
                                <i class="fa fa-angle-right"></i>
                            </div>
                        {% endif %}
                        {% if categoria.subs >= 1 %}
                        <ul class="subCategoria level2">
                            <li class="lvlBack">
                                <div class="btDropdown">
                                    <i class="fa fa-angle-left"></i>
                                </div>
                            </li>
                            {% for level2 in categoria.subs %}
                                <li>
                                    <a class="navItem" href="{{ level2.url }}" {{ level2.cor != '' ? (' style="color:' ~ level2.cor ~ '"')|raw : '' }}>
                                        {{ level2.nome }}
                                    </a>
                                    {% if level2.subs >= 1 %}
                                        <div class="btDropdown">
                                            <i class="fa fa-angle-right"></i>
                                        </div>
                                    {% endif %}
                                    {% if level2.subs >= 1 %}
                                        <ul class="subCategoria level3">
                                            <li class="lvlBack">
                                                <div class="btDropdown">
                                                    <i class="fa fa-angle-left"></i>
                                                </div>
                                            </li>
                                            {% for level3 in level2.subs %}
                                                <li>
                                                    <a class="navItem font-weight-bold" href="{{ level3.url }}" {{ level3.cor != '' ? (' style="color:' ~ level3.cor ~ '"')|raw : '' }}>
                                                        {{ level3.nome }}
                                                    </a>
                                                </li>
                                            {% endfor %}
                                        </ul >
                                    {% endif %}
                                </li>
                            {% endfor %}
                        </ul>
                        {% endif %}
                    </li>
                {% endfor %}
            </nav>
        </div>
    </div>
    <div class="search" id="searchMobile">
        <form action="busca/" method="get">
            <input type="text" class="form-control" name="q" data-url="produtos_autocomplete.php" placeholder="Digite o que está procurando!">
            <button type="submit">
                <svg class="svg-icon" viewBox="0 0 20 20">
                    <path fill="none" d="M12.323,2.398c-0.741-0.312-1.523-0.472-2.319-0.472c-2.394,0-4.544,1.423-5.476,3.625C3.907,7.013,3.896,8.629,4.49,10.102c0.528,1.304,1.494,2.333,2.72,2.99L5.467,17.33c-0.113,0.273,0.018,0.59,0.292,0.703c0.068,0.027,0.137,0.041,0.206,0.041c0.211,0,0.412-0.127,0.498-0.334l1.74-4.23c0.583,0.186,1.18,0.309,1.795,0.309c2.394,0,4.544-1.424,5.478-3.629C16.755,7.173,15.342,3.68,12.323,2.398z M14.488,9.77c-0.769,1.807-2.529,2.975-4.49,2.975c-0.651,0-1.291-0.131-1.897-0.387c-0.002-0.004-0.002-0.004-0.002-0.004c-0.003,0-0.003,0-0.003,0s0,0,0,0c-1.195-0.508-2.121-1.452-2.607-2.656c-0.489-1.205-0.477-2.53,0.03-3.727c0.764-1.805,2.525-2.969,4.487-2.969c0.651,0,1.292,0.129,1.898,0.386C14.374,4.438,15.533,7.3,14.488,9.77z"></path>
                </svg>
            </button>
        </form>
    </div>
</header>
<div class="suspended-cart">
    <div class="cover"></div>
    <div class="drop"></div>
</div>
<script>
$(function(){
    loadSuspendedCart();
    
    var hTopo = $('header').outerHeight(true);
    $(window).scroll(function(){
        var scr = $(this).scrollTop();
        var w = $(this).width();
        if(scr >= hTopo){
            if(!$('header').hasClass('scroll')){
                $('header').addClass('scroll');
            }
            if($('header').hasClass('scroll')){
                $('#geral').css("padding-top", hTopo );
            }
        }else{
            if($('header').hasClass('scroll')){
                $('header').removeClass('scroll');
            }
            if(!$('header').hasClass('scroll')){
                $('#geral').css("padding-top", 0 );
            }
        }
    });
    
    // carrinho suspenso
    $('.suspended-cart').on('click', '.cover, .fechar', function(e){
        e.preventDefault();
        $('.suspended-cart').removeClass('open');
        $('body').css({'overflow': 'inherit'});
    }).on('click', '.item-delete', function(){
        let sku = $(this).parents('.item').data('sku');
        if(confirm('Confirma a remoção deste produto?')){
            cartRemoveProduct(sku);
        }
    });
    $('header .cart_container').on('click', function(){
        openSuspendedCart();
    });
    totalItensCarrinho.registerListener(function(){
        loadSuspendedCart();
    });
    onAddProductCart.registerListener(function(fetch){
        openSuspendedCart();
    });
    //
    // anima hamburger icon do menu
    $(".hamburger-icon").click(function () {
        $(".hamburger-icon").toggleClass("active");
        $('.mobileMenu').toggleClass('open');
        $('#modalDesktop').toggleClass('active');
        $('.subCategoria').removeClass('slide');
        $('#searchMobile').removeClass('show');
        $('.busca_btn_mobile').removeClass('active')
        if($('body').hasClass('noscroll')){
            $('body').removeClass('noscroll');
        }else{
            $('body').addClass('noscroll');
        }
    });
    $("#modalDesktop").click(function () {
        $(".hamburger-icon").removeClass("active");
        $('.mobileMenu').removeClass('open');
        $('body').removeClass('noscroll');
        $(this).removeClass('active');
        $('.subCategoria').removeClass('slide');
    });
    $(".hamburger-scroll").click(function () {
        $('.hamburger-scroll').toggleClass('open');
        $('.links').toggleClass('open');
    });
    $('.btDropdown').click(function(){
        $(this).parent('li').children('.subCategoria').toggleClass('slide');
    });
    $('.lvlBack').click(function(){
        $(this).parent('.subCategoria').toggleClass('slide');
    });
    $('.busca_btn_mobile').click(function(){
        $('#searchMobile').toggleClass('show');
        $('.busca_btn_mobile').toggleClass('active');
        $(".hamburger-icon").removeClass("active")
        $('.subCategoria').removeClass('slide');
        $('.mobileMenu').removeClass('open');
        $('#modalDesktop').removeClass('active')
    });
    $('.close_modal').click(function(){
        $('#modalDesktop').removeClass('active');
        $('#searchMobile').removeClass('active');
    });
});
function openSuspendedCart(){
    $('.suspended-cart').addClass('open');
    $('body').css({'overflow': 'hidden'});
}
function loadSuspendedCart(){
    $.post('load-twig.php', {folder:'includes', file:'suspended-cart.html'}, function(d){
        $('.suspended-cart .drop').html(d);
    });
}
</script>
// SCSS/CSS
.svg-icon {
    width: 2.5rem;
    height: 2.5rem;
}
.svg-icon path,
.svg-icon polygon,
.svg-icon rect {
    fill: #000;
}
.svg-icon circle {
    stroke: #000;
    stroke-width: 1;
}
body{
    &.noscroll{
        position: relative;
        overflow-Y: hidden;
    }
}
// Estilizando e animando Hamburguer icone
.hamburger-icon {
    position: relative;
    padding: 0 0.75rem;
    display: block;
    width: 30px;
    height: 30px;
    cursor: pointer;
    z-index: 9999;
}
.hamburger {
    width: 20px;
    height: 2px;
    background-color: #000;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    transition: 0.5s;
}
.hamburger:before,
.hamburger:after {
    content: "";
    position: absolute;
    width: 20px;
    height: 2px;
    background-color: #000;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    transition: all 500ms ease-in-out;
}
.hamburger:before {
    top: -7px;
}
.hamburger:after {
    top: 7px;
}
.hamburger-icon.active .hamburger {
    background-color: rgba(0, 0, 0, 0);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0);
}
.hamburger-icon.active .hamburger:before {
    top: 0;
    background-color: #000;
    transform: rotate(45deg);
}
.hamburger-icon.active .hamburger:after {
    top: 0;
    background-color: #000;
    transform: rotate(135deg);
}
.hamburger-scroll__container{
    display: none;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    visibility: hidden;
    opacity: 0;
    
    .hamburger-scroll__label{
        width: 95px;
        margin-left: 0.5rem;
        padding: 0.25rem;
    }
    
    .hamburger-scroll {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        position: relative;
        width: 30px;
        height: 25px;
        cursor: pointer;
        z-index: 9999;
        
        .hamburger_item {
            width: 100%;
            height: 5px;
            background-color: transparent;
            border: 1px solid #000;
            transition: all 250ms ease-in;
        }
    }
    
    .hamburger-scroll.open .hamburger_item {
        background-color: #000;
    }
}
#searchMobile {
    width: 100%;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    height: 0;
    visibility: hidden;
    background-color: #f4f4f4;
    padding: 0.5rem;
    transition: all 250ms ease-in-out;
    
    &.show{
        opacity: 1;
        height: auto;
        visibility: visible;
        
        input{
            height: 50px;
        }
    }
    
    @media(min-width:768px){
        display: none;
    }
    
    input {
        width: 100%;
        background-color: #fff;
        color: #000;
        padding: 0 75px 0 20px;
        line-height: 50px;
        position: relative;
        height: 0;
        border: solid 1px #C1C1C1;
        border-radius: 0;
        box-shadow: none !important;
    }
    
    button {
        width: 2rem;
        height: 2rem;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: transparent;
        color: #777;
        position: absolute;
        right: 1rem;
        top: 50%;
        transform: translateY(-50%);
        outline: none;
        
        &:hover{
            color:#333;
        }
        
        .svg-icon {
            width: 1.25rem;
            height: 1.25rem;
            transform: rotate(-65deg);
        }
        .svg-icon circle {
            stroke: #777;
        }
    }
    
    .boxquery {
        width: 100%;
        left: 0;
        right: auto;
        color: #000;
        top: 50px;
        border-radius: 4px;
        overflow: hidden;
        border: none;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
        
        .foto {
            width: 50px;
            height: 50px;
            float: left;
            background-color: #eee;
            margin-right: 10px;
            position: relative;
            overflow: hidden;
        }
        .det {
            width: calc(100% - 60px);
            float: left;
            h3 {
                font-size: 16px;
                line-height: 18px;
                margin-bottom: 5px;
            }
            p {
                font-size: 16px;
                line-height: 18px;
                color: #000;
                font-weight: bold;
            }
        }
    }
}
.conta {
    display: none;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    color: #000;
    position: relative;
    margin: 0 10px;
    
    .login__label{
        width: 160px;
        margin-left: 0.5rem;
        padding: 0.25rem;
        .login_btn{
            color: #000;
            &:hover{
                opacity: 0.7;
            }
        }
    }
    
    @media(min-width:768px){
        margin: 0 25px;
        display: flex;
    }
}
.wpp_link{
    display:none;
    
    @media(min-width:1025px){
        display:flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        min-width: 165px;
        margin-left: 20px;
        
        .brand_logo{
            font-size: 2.5rem;
            margin-right: 0.5rem;
        }
        
        .wpp_lable{
            display:flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: flex-start;
            a{
                text-decoration: none;
                font-size: 1rem;
                color: #000;
                
                &:hover{
                    opacity: 0.7;
                }
            }
        }
    }
}
.busca_btn_mobile{
    margin-left: 0.5rem;
    width: 60px;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 250ms ease-in-out;
    
    .svg-icon {
        transform: rotate(-65deg);
        width: 2rem;
        height: 2rem;
    }
    
    &.active{
        background-color: #f4f4f4;
    }
}
.svg-icon polygon,
.svg-icon rect {
    fill: #c1c1c1 !important;
}
.busca_btn_mobile.active .svg-icon circle {
    stroke: #c1c1c1 !important;
}
header{
    width:100%;
    position: relative;
    z-index: 999;
    background-color: #FFF;
    transition: all 250ms ease-in-out;
    
    &.scroll{
        background-color: #f5f5f5;
        position: fixed;
        top: 0;
        left: 0;
        
        .conta{
            display: none;
        }
        
        .hamburger-scroll__container{
            @media(min-width:768px){
                visibility: visible;
                opacity: 1;
                display: flex;
            }
        }
        
        .links{
            opacity: 0;
            height: 0;
            
            &.over{
                opacity: 1;
                height: auto;
            }
        }
        
        .btLogo {
            @media(min-width: 768px){
                width: 160px;
                height: 80px;
            }
        }
    }
    
    .header{
        max-width: 100%;
        margin-left:auto;
        margin-right:auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 0.5rem;
        transition: all 250ms;
        
        @media(min-width:768px){
            justify-content: space-around;
        }
        
        @media(min-width:1368px){
            max-width: 90%;
        }
        
        .Logo_desktop{
            display: none;
            @media(min-width:768px){
                display: block;
                margin-left: 0;
            }
        }
        
        .search_desktop{
            width: 40%;
            position: relative;
            
            input {
                width: 100%;
                float: left;
                background-color: #fff;
                color: #000;
                padding: 0 75px 0 20px;
                line-height: 50px;
                height: 50px;
                border: solid 1px #C1C1C1;
                box-shadow: none !important;
            }
            
            button {
                width: 50px;
                height: 50px;
                float: left;
                background-color: transparent;
                color: #777;
                font-size: 20px;
                position: absolute;
                right: 0;
                top: 0;
                outline: none;
                
                &:active {
                    opacity: 0.7;
                    color:#333;
                }
                
                &.busca_btn{
                    transform: rotate(-65deg);
                }
                
                .svg-icon {
                    width: 1.25rem;
                    height: 1.25rem;
                }
                
                .svg-icon path,
                .svg-icon polygon,
                .svg-icon rect {
                    fill: #777;
                }
                .svg-icon circle {
                    stroke: #777;
                }
            }
            
            .boxquery {
                width: 100%;
                left: 0;
                right: auto;
                color: #000;
                top: 65px;
                border-radius: 4px;
                overflow: hidden;
                border: none;
                box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
                
                .foto {
                    width: 50px;
                    height: 50px;
                    float: left;
                    background-color: #eee;
                    margin-right: 10px;
                    position: relative;
                    overflow: hidden;
                }
                
                .det {
                    width: calc(100% - 60px);
                    float: left;
                    
                    h3 {
                        font-size: 16px;
                        line-height: 18px;
                        margin-bottom: 5px;
                    }
                    
                    p {
                        font-size: 16px;
                        line-height: 18px;
                        color: #000;
                        font-weight: bold;
                    }
                }
            }
        }
        
        &:hover,
        &.scroll{
            .categorias_desk .links_item{
                color:#000;
            }
            
            .svg-icon path,
            .svg-icon polygon,
            .svg-icon rect {
                //fill: #000;
            }
            
            .svg-icon circle {
                stroke: #000;
            }
            
            .hamburger,
            .hamburger:before,
            .hamburger:after{
                background-color: #000;
            }
            
            .hamburger-icon.active .hamburger{
                background-color: transparent;
            }
        }
    }
    
    .links{
        width: 100%;
        float: left;
        background-color: #F5F5F5;
        
        &.open{
            visibility: visible;
            opacity: 1;
            height: auto;
        }
        
        .categorias_desk{
            width: 100%;
            display: flex;
            justify-content: space-around;
            list-style: none;
            
            > li{
                position: relative;
                white-space: nowrap;
                
                > a{
                    height: 60px;
                    font-size: 14px;
                    line-height: 60px;
                    text-transform: uppercase;
                    color: #000;
                    padding: 0 15px;
                    display: inline-block;
                    
                    &::before{
                        content: '';
                        height: 1px;
                        position: absolute;
                        bottom: 10px;
                        background: #fff;
                        transition: all 300ms ease-in-out;
                    }
                }
                
                &:hover{
                    > a{
                        &::before{
                            left: 10%;
                            right: 10%;
                            background: linear-gradient(to right, #fff 0%, #ccc 50%, #fff 100%);
                        }
                    }
                    
                    .dropdown{
                        visibility: visible;
                        opacity: 1;
                    }
                }
                
                &:nth-last-child(-n+4){
                    .dropdown{
                        left: auto;
                        right: 0;
                        
                        .list_l2{
                            order: 2;
                            
                            .l2_item{
                                .list_l3{
                                    left: -100%;
                                }
                            }
                        }
                    }
                }
                
                .dropdown{
                    max-width: 600px;
                    display: flex;
                    flex-direction:row;
                    justify-content:space-between;
                    align-items: flex-start;
                    position: absolute;
                    top: 100%;
                    left: 0;
                    z-index: 99;
                    visibility: hidden;
                    opacity: 0;
                    background-color: #fff;
                    border-top: 1px solid #EDEDED;
                    box-shadow: 0 1px 3px 0 rgba(27,36,50,0.4);
                    padding: 0;
                    
                    .bnr{
                        width: 340px;
                        
                        img{
                            width: 100% !important;
                            height: 100% !important;
                            object-fit: cover;
                        }
                    }
                    .list_l2{
                        width: 260px;
                        background-color: #fff;
                        display: flex;
                        flex-direction: column;
                        justify-content: space-between;
                        align-items: center;
                        padding: 5px 0;
                        list-style: none;
                        .l2_item{
                            display: block;
                            width:100%;
                            position: relative;
                            > a{
                                width:100%;
                                padding: 0.5rem 0.75rem;
                                display: flex;
                                flex-direction: row;
                                justify-content: space-between;
                                align-items: center;
                                text-transform: uppercase;
                                font-size: 11px;
                                color: #222;
                                transition: all 250ms ease-in-out;
                                z-index: 4001;
                            }
                            &:hover{
                                > a{
                                    color: #fff;
                                    background-color: #222;
                                }
                                
                                .list_l3{
                                    visibility: visible;
                                    opacity: 1;
                                }
                            }
                            .list_l3{
                                width: 260px;
                                position: absolute;
                                top: -1px;
                                left: 100%;
                                z-index: 999;
                                visibility: hidden;
                                opacity: 0;
                                display: flex;
                                flex-direction: column;
                                justify-content: space-between;
                                align-items: center;
                                padding: 5px 0;
                                list-style: none;
                                box-shadow: 0 1px 3px 0 rgba(27,36,50,0.4);
                                transition: all 250ms ease-in-out;
                                background-color: #FFF;
                                .l3_item{
                                    display: block;
                                    width:100%;
                                    > a{
                                        width:100%;
                                        padding: 0.5rem 0.75rem;
                                        display: flex;
                                        flex-direction: row;
                                        justify-content: space-between;
                                        align-items: center;
                                        text-transform: uppercase;
                                        font-size: 11px;
                                        color: #222;
                                        transition: all 200ms ease-in-out;
                                        &:hover{
                                            color: #fff;
                                            background-color: #222;
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    
    .busca_btn{
        display: flex;
        justify-content: center;
        align-items: center;
        width: 2.5rem;
        height: 2.5rem;
        margin: 0 5px;
        cursor: pointer;
        transform: rotate(-65deg);
    }
    
    .cart_container{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        cursor: pointer;
        
        .cart {
            margin: 0 5px;
            position: relative;
            
            .sup {
                position: absolute;
                top: 30%;
                left: 50%;
                transform: translate(-50%, 50%);
                width: 0.8rem;
                height: 0.8rem;
                line-height: 0.8rem;
                font-size: 0.8rem;
                font-weight: 700;
                display: flex;
                justify-content: center;
                align-items: center;
                background-color: transparent;
                color: #383838;
                text-align: center;
                
                @media(min-width:768px){
                    top: 35%;
                }
            }
            
            .svg-icon {
                @media(min-width:768px){
                    width: 2.5rem;
                    height: 2.5rem;
                }
                width: 2rem;
                height: 2rem;
            }
            
            .svg-icon path,
            .svg-icon polygon,
            .svg-icon rect {
                fill: #383838;
            }
            .svg-icon circle {
                stroke: #383838;
                stroke-width: 1;
            }
        }
        
        .cart__label{
            width: 115px;
            padding: 0.25rem;
            text-transform: uppercase;
            display: none;
            flex-direction: column;
            justify-content: center;
            align-items: flex-start;
            
            .total__lable{
                font-size: 1rem
            }
            
            @media(min-width: 1025px){
                display: flex
            }
        }
    }
}
.modal-desktop{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    visibility: hidden;
    opacity: 0;
    backdrop-filter: blur(3px);
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 10;
    transition: all 250ms ease-in-out;
    
    &.active{
        visibility: visible;
        opacity: 1;
    }
}
.Logo_mobile{
    width: 100%;
    margin: 0;
    height: 75px;
    position: relative;
    
    @media(min-width:768px){
        display: none;
    }
}
.btLogo_mobile {
    position: absolute;
    top: 45%;
    left: 40%;
    transform: translate(-50%, -50%);
    display: block;
    text-align: center;
    width: 120px;
    height: 75px;
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    overflow: hidden;
    color: transparent;
    text-indent: -9999px;
}
.btLogo {
    width: 240px;
    height: 140px;
    display: block;
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    overflow: hidden;
    margin: 5px;
    color: transparent;
    text-indent: -9999px;
}
.mobileMenu{
    position: fixed;
    top: 0;
    left: -100%;
    width: 310px;
    min-height: 100vw;
    backdrop-filter: blur(3px);
    background-color: rgba(0, 0, 0, 0.5);
    transition: all 250ms ease-in-out;
    z-index: -1;
    
    &.open{
        left: 0;
    }
    
    .mobileContainer{
        background-color: #f4f4f4;
        width: 100%;
        height: 100vh;
        overflow-y: auto;
        transition: all 250ms ease-in-out;
        padding-top: 75px;
        
        &::-webkit-scrollbar{
            display: none;
        }
    }
}
.mobileNav{
    border-bottom: 0.75rem solid #ecf0f1;
    background-color: #f4f4f4;
    list-style: none;
    
    &:last-child{
        border-bottom: none;
    }
    
    li{
        text-transform: uppercase;
        border-bottom: 1px solid #cecece;
        display: flex;
        justify-content: space-between;
        align-items: center;
        
        &:last-of-type {
            border-bottom: none;
        }
        
        .navItem{
            width: calc(100% - 50px);
            font-size: 1rem;
            color: #343434;
            padding: 1rem;
            text-decoration:none;
        }
        
        &:not(.login_mobile):active{
            background-color: #ccc;
        }
        
        .btDropdown{
            display: inline-flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            font-size: 1.5rem;
            width: 36px;
            height: 36px;
            border-radius: 4px;
            margin: 0 10px;
            background-color: #000;
            color: #FFF;
            
            &:active{
                opacity: 0.7;
            }
        }
        
        &.login_mobile{
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            padding: 1rem;
            
            .login_ico{
                width: 80px;
                display: flex;
                justify-content: flex-start;
                align-items: center;
            }
            
            .login_group{
                background-color: transparent;
                width: 100%;
                height: 100%;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                align-items: flex-start;
                
                .login_head{
                    width: 100%;
                    display: block;
                    text-transform: capitalize;
                    text-align: left;
                    font-size: 1rem;
                }
                
                .btn_navLogin{
                    width: 100%;
                }
                
                a{
                    text-transform: capitalize;
                    color: #000;
                    
                    &:active{
                        opacity: 0.7;
                    }
                }
            }
        }
    }
}
.subCategoria{
    overflow: hidden;
    list-style: none;
    
    .lvlBack{
        font-weight: 900;
        font-size: 1rem;
    }
    
    &.level2{
        height: 100vh;
        overflow-y: auto;
        padding-top: 75px;
        position: fixed;
        top:0;
        left:-100%;
        width: 100%;
        background-color: #f4f4f4;
        transition: all 250ms ease;
        
        &::-webkit-scrollbar{
            display: none;
        }
        
        &.slide{
            left:0;
        }
        .btDropdown{
            background-color: #000;
        }
        
        .lvlBack{
            .btDropdown{
                background-color: rgba(0,0,0,0);
                color: #000;
                margin-left: 0;
                height: 50px;
            }
        }
    }
    
    &.level3{
        height: 100vh;
        overflow-y: auto;
        padding-top: 75px;
        position: fixed;
        top:0;
        left:-100%;
        width: 100%;
        background-color: #f4f4f4;
        transition: all 250ms ease;
        
        &::-webkit-scrollbar{
            display: none;
        }
        
        &.slide{
            left:0;
        }
    }
    
    li{
        border-bottom: 1px solid #fff;
        
        &:last-of-type{
            border-bottom: none;
        }
    }
    
    a{
        font-size: 0.65rem;
        color: #555555;
        text-transform: uppercase;
        text-decoration:none;
        padding-bottom: 1.5rem;
    }
}
.suspended-cart{
    position: fixed;
    z-index: 9999999999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    visibility: hidden;
    &.open{
        visibility: visible;
        .cover{
            visibility: visible;
            opacity: 1;
        }
        .drop{
            right: 0;
        }
    }
    .cover{
        background-color: rgba(0,0,0,0.7);
        position: fixed;
        z-index: 1;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        visibility: hidden;
        opacity: 0;
        transition: all .25s;
    }
    .drop{
        position: fixed;
        top: 0;
        right: -500px;
        width: 100%;
        max-width: 500px;
        height: 100%;
        background-color: #FFF;
        z-index: 2;
        transition: all .25s;
        .drop-header{
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px;
            border-bottom: solid 1px #DDD;
            h3{
                font-size: 20px;
                font-weight: bold;
            }
            .fechar{
                width: 35px;
                height: 35px;
                border: solid 1px #DDD;
                border-radius: 3px;
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 14px;
                cursor: pointer;
            }
        }
        .msg-empty{
            padding: 30px;
            font-size: 23px;
            line-height: 26px;
            text-align: center;
        }
        .drop-list{
            height: calc(100% - 290px);
            overflow: auto;
            .item{
                padding: 20px;
                .foto{
                    width: 100px;
                    display: inline-block;
                    margin-right: 20px;
                    vertical-align: top;
                }
                .det{
                    width: calc(100% - 130px);
                    display: inline-block;
                    vertical-align: top;
                    position: relative;
                    .produto{
                        width: calc(100% - 30px);
                        display: inline-block;
                    }
                    .valores{
                        margin-top: 10px;
                        display: flex;
                        justify-content: space-between;
                    }
                    .item-delete{
                        width: 25px;
                        height: 25px;
                        position: absolute;
                        top: 0;
                        right: 0;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        cursor: pointer;
                        border: solid 1px #DDD;
                        border-radius: 3px;
                    }
                }
            }
        }
        .drop-footer{
            padding: 20px;
            .item{
                display: flex;
                justify-content: space-between;
                padding: 5px 0;
            }
            .botoes{
                display: flex;
                justify-content: space-between;
                padding-top: 15px;
                margin-top: 10px;
                border-top: solid 1px #DDD;
                text-align: center;
                line-height: 15px;
                a{
                    margin-left: 10px;
                    border: solid 1px #666;
                    color: #000;
                    font-size: 12px;
                    width: 50%;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    height: 60px;
                    padding: 5px;
                    
                    &:active{
                        opacity: 0.7;
                    }
                    &:first-child{
                        margin-left: 0;
                    }
                    &.bt-finalizar{
                        background-color: #666;
                        color: #FFF;
                    }
                }
            }
        }
    }
}