/* Define a cor de fundo do cabeçalho */
header .align-items-center {
    background-color: #fdf8f2; /* #333F37 */
}

/* Espaçamento do corpo  */
.g_ body:not(.pagina-inicial) header {
    margin-bottom: 10px !important;
}

@media (max-width: 767px) {
    .g_ body:not(.pagina-inicial) header {
        margin-bottom: 15px !important;
    }
}

/* Ajusta o tamanho do logotipo no desktop */
@media(min-width: 1024px) {
    .g_ .logo a>img, .g_ .logo img, .g_ .logo svg {
        max-width: 216px !important; /* 398 */
        max-height: 80px !important; /* 140 */
    }
}

/* Ajusta o tamanho do logotipo no mobile */
@media (max-width: 767px) {
    .g_ .logo a>img, .g_ .logo img, .g_ .logo svg {
        max-width: 569px !important;
        max-height: 60px !important; /* 20 */
    }
}

/* Define a cor do menu no desktop */
/*.g_ .menu.superior>.nivel-um>li>a>strong {
    color: #ffffff !important;
}*/

/* Define a cor do menu no mobile */
/*@media (max-width: 768px) {
    .g_ .menu.superior>.nivel-um>li>a>strong {
        color: #000000 !important;
    }
}*/

/* Define a cor do fundo do indicador antes dos itens do menu */
.g_ .menu.superior>.nivel-um>li:before {
    background-color: #f89406 !important;
}

/* Define a cor do ícone de seta para baixo no cabeçalho */
header .icon-chevron-down:before {
    color: #ffffff !important;
}

/* Altera a cor dos ícones no menu quando ele estiver visível */
.menu-visible .g_ .menu.superior ul>li>a>i {
    color: var(--tc1) !important;
}

/* Estiliza o botão de acionamento do menu (hambúrguer) */
.g_ .menu-trigger:before,
.g_ .menu-trigger:after {
    background: #000 !important;
}

/* Adiciona uma borda ao botão do menu */
.g_ .menu-trigger {
    border-top: 3px solid #000 !important;
}

/* Define estilos para a seção institucional do rodapé */
.g_ #rodape .institucional {
    background-color: #f5eee3 !important;
    border-bottom: 1px solid #fbb450 !important;
}

/* Define o fundo da seção de pagamentos e selos no rodapé */
.g_ #rodape .pagamento-selos {
    background-color: #fff4e5 !important;
}

/* Define a cor de fundo do último bloco do rodapé */
.g_ #rodape>div:last-child {
    background-color: #ee5200 !important; /* #2a4d35 */
}

/* Define a cor do texto no último bloco do rodapé */
.g_ #rodape>div:last-child p {
    color: #e6e6e6 !important;
}

/* Altera a aparência das imagens da classe logo-lista-mais */
.logo-lista-mais {
    filter: brightness(0) invert(1);
}

/* Define a cor do botão de fechar o menu no mobile */
@media (max-width: 767px) {
    .g_ .menu.superior .menu-close-mobile {
        background: #f89406 !important;
    }
}

/* Mantém os submenus visíveis no mobile */
@media (max-width: 767px) {
    .g_ .menu.superior>.nivel-um>li.com-filho>ul {
        display: initial !important;
    }
}

/* Ajustes de responsividade para full banners no tablet */
@media (min-width: 768px) and (max-width: 1024px) {
    .g_ .secao-banners .banner.cheio .flexslider {
        width: 100% !important;
        left: 0 !important;
    }
    
    /* Ajusta o tamanho e comportamento das imagens no banner */
    .g_ .banner.cheio .flexslider .slides img {
        max-height: 40vh;
        max-width: 100vw;
        object-fit: contain !important;
    }
}

/* Sobreposição da barra de pesquisa */
.g_ #search-form {
    background: rgb(0 0 0 / 64%) !important;
}

/* Ícone de X da barra de pesquisa */
#search-form svg {
    fill: #ffffff !important;
}

/* Listagem - botões nã oficarem encima do link  */
.listagem.com-caixa .listagem-item .acoes-produto {
    top: 150px;
    bottom: 180px;
}
.listagem .info-produto .nome-produto {
    padding-top: 20px !important;
    z-index: 1000 !important;
}

/* Listagem - Preço e parcela */
.preco-produto.destaque-parcela {
    text-align: center;
}

/* Listagem - Parcela */
.g_ .listagem .preco-produto .preco-parcela {
    opacity: 1 !important;    
}