/* Estilo Geral do Navegação do Cabeçalho */
.header-nav {
    background-color: #f8f9fa00;
    padding: 10px 0;
    /* Espaçamento vertical */
}

.header-nav .container {
    max-width: 1200px;
    /* Largura máxima do container */
    margin: auto;
    /* Centraliza o container */
}

.header-static-nav p {
    margin: 0;
    color: #333;
    /* Cor do texto */
    font-size: 16px;
    /* Tamanho do texto */
}

.menu-nav {
    display: flex;
    list-style-type: none;
    /* Remove os marcadores de lista */
    padding: 0;
    /* Remove o padding padrão */
    margin: 0;
    /* Remove a margem padrão */
    align-items: center;
    /* Alinha os itens verticalmente */
}

.menu-nav li {
    margin: 0 15px;
    /* Espaçamento horizontal entre os itens */
}

.menu-nav .dropdown .btn {
    background-color: transparent;
    /* Fundo transparente */
    color: #333;
    /* Cor do texto */
    padding: 5px 10px;
    /* Espaçamento interno */
    border-radius: 5px;
    /* Borda arredondada */
    border: 1px solid transparent;
    /* Borda transparente para manter o layout consistente */
}

.menu-nav .dropdown .btn:hover {
    background-color: #e9ecef;
    /* Cor de fundo ao passar o mouse */
    border-color: #ddd;
    /* Cor da borda ao passar o mouse */
}

.menu-nav .dropdown-menu {
    border-radius: 5px;
    /* Borda arredondada do menu dropdown */
}

.dropdown-item {
    color: #333;
    /* Cor do texto dos itens do dropdown */
}

.dropdown-item:hover {
    background-color: #e9ecef;
    /* Cor de fundo ao passar o mouse sobre os itens do dropdown */
}

/* Responsividade */
@media (max-width: 768px) {
    .header-nav-wrapper {
        flex-direction: column;
        /* Muda a direção para coluna em telas menores */
    }

    .menu-nav {
        flex-direction: column;
        /* Muda a direção dos itens do menu para coluna */
        margin-top: 10px;
        /* Espaçamento superior */
    }

    .menu-nav li {
        margin: 10px 0;
        /* Espaçamento vertical entre os itens */
    }
}

.header-top {
    background-color: #fff;
    padding-top: 30px;
    padding-bottom: 30px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.logo img {
    max-width: 120px;
    height: auto;
}

.search-category select {
    padding: 5px 10px;
    border-radius: 5px;
    margin-right: 8px;
    border: 1px solid #ddd;
}

.search-element form {
    display: flex;
    border: 1px solid #ddd;
    border-radius: 5px;
    overflow: hidden;
}

.search-element input[type="text"] {
    border: none;

    flex-grow: 1;
}

.cart-info a {
    margin-left: 20px;
    color: #333;
    font-size: 20px;
}

.cart-info a:hover {
    color: #ff6c2f;
}

/* Responsividade */
@media (max-width: 768px) {
    .header-right-element {
        justify-content: space-between;
    }

    .search-element {
        flex-grow: 1;
    }

    .cart-info {
        flex-grow: 0;
    }
}

/* Estiliza a barra de rolagem para toda a página */
html {
    scrollbar-width: thin;
    /* "auto" ou "thin" */
    scrollbar-color: #ff6c2f #e0e0e0;
    /* Cor da barra e do fundo (Firefox) */
}

/* Para Chrome, Edge, e Safari */
body::-webkit-scrollbar {
    width: 8px;
    /* Largura da barra de rolagem */
}

body::-webkit-scrollbar-track {
    background: #e0e0e0;
    /* Cor de fundo da faixa da barra de rolagem */
}

body::-webkit-scrollbar-thumb {
    background-color: #ff6c2f;
    /* Cor da barra de rolagem */
    border-radius: 20px;
    /* Arredonda os cantos da barra de rolagem */
    border: 2px solid #e0e0e0;
    /* Cria uma borda ao redor da barra de rolagem */
}