/* =========================
   Header / Cabeçalho
   ========================= */

/* Container principal do header */
.header {
    margin: 0 auto; /* Centraliza horizontalmente */
    max-width: 70rem; /* Largura máxima */
    margin-top: 4px; /* Espaço superior */
    margin-bottom: -40px;
}

/* Lista de navegação */
.nav__list {
    display: flex; /* Layout horizontal */
    

    gap: 0.5rem; /* Espaçamento entre os itens da compra e do perfil*/

    justify-content: space-between; /* Distribui itens ao longo da linha */
    align-items: center; /* Alinha verticalmente os itens */
    padding: 0.70rem 0; /* Espaçamento superior e inferior */
    list-style-type: none; /* Remove marcadores padrão da lista */
    flex-wrap: wrap; /* Permite quebrar linha se necessário */
}







/* Link de navegação */
.nav__link {
    text-decoration: none; /* Remove sublinhado padrão */
    color: var(--letraA); /* Cor do texto */
    font-family: var(--fonte-texto);
    font-size: 1.20rem;
    font-weight: 400;
    transition: color 0.3s, border-bottom 0.3s; /* Animação suave de cor e linha */
    position: relative; /* Necessário para a linha animada ::after */
}


/* Efeito hover no link de navegação */
.nav__link:hover {
    color: var(--houver); /* Muda a cor ao passar o mouse */
}

/* Linha animada embaixo do link */
.nav__link::after {
    content: ""; /* Necessário para pseudo-elemento */
    position: absolute;
    left: 0;
    bottom: -4px; /* Posiciona logo abaixo do texto */
    width: 100%; /* Largura total do link */
    height: 2px; /* Espessura da linha */
    background-color: var(--houver); /* Cor da linha */
    transform: scaleX(0); /* Inicialmente escondida */
    transition: transform 0.3s; /* Animação suave */
}

/* Aparecer linha ao passar o mouse */
.nav__link:hover::after {
    transform: scaleX(1);
}

/* Botão para alternar menu em dispositivos móveis */
.menu__toggle {
    display: none; /* Inicialmente escondido em desktop */
}

/* Container do formulário dentro do header */
.nav__item_form {
    flex: 2; /* Ocupa maior espaço na lista de navegação */
}

/* Ícones dentro do header (ex: carrinho, perfil) */
.nav__icons {
    display: flex;
    gap: 2rem; /* Espaçamento entre ícones */
}

/* =========================
   MEDIA QUERIES
   ========================= */

/* Tablets e notebooks menores (até 1200px) */
@media screen and (max-width: 1200px) {
    .nav__list {
        row-gap: 2rem; /* Espaçamento vertical */
        gap: 1rem; /* Espaçamento horizontal menor */
    }

    .nav__item_form {
        flex: 1 1 100%; /* Ocupa toda a largura disponível */
        text-align: center; /* Centraliza o formulário */
        order: 1; /* Garante ordem específica */
    }

    .header {
        padding: 0 5rem; /* Padding lateral */
    }

.nav__icons {
    display:none;
}

    .header {
        padding: 0 1.5rem; /* Padding lateral menor */
        margin-bottom: -40px !important;
        margin-top: -30px; 
        padding: 60px;
    }



}

/* Celulares (até 730px) */
@media screen and (max-width: 730px) {
    .nav__link {
        display: none; /* Esconde links principais */
        
    }

    .menu__toggle {
        display: block; /* Mostra botão de menu */
        cursor: pointer; /* Indica clicável */
    }

    .header {
        padding: 0 1.5rem; /* Padding lateral menor */
        margin-top: 25px; 
        
    }

    .menu__toggle__icon {
        background-color: transparent; /* Remove fundo do ícone */
        border: none; /* Remove borda padrão */
    }


#logon{

display:none;

}





}