.header-top {
    background-color: var(--headerBgColor);
}

.site-header {
    background-color: var(--menuBgColor);
}

.navbar {
    background: var(--menuBgColor);
}

.main-navigation > ul > li > a {
    color: var(--menuColor);
}

.main-navigation > ul > li > a:before, .main-navigation > ul > li > a:after {
    background: var(--menuBgColor);
}

.main-navigation > ul > li:not(.telefoneMenuHeader) > a:hover {
    background: var(--menuBgColor);
    filter: brightness(90%);
}

.result-item-pricing-home .price {
    color: var(--buttonBgColor);
}



.btn-default {
    border-color: var(--buttonBgColor);
    color: var(--buttonBgColor);
}

.veiculo-detalhes .precoVeiculo {
    background-color: #d5d7e0;
    color: #353535;
}

/* AC0460 */
.btn-primary {
    background-color: var(--buttonBgColor);
    color: var(--buttonColor);
}

/* AC0461 */
.list-group .badge, .tituloPromocaoPopup {
    background-color: var(--buttonBgColor) !important;
    color: var(--buttonColor) !important;
}

.telefone-loja .btn-default {
    border: 2px solid #6f6f6f;
    color: #2b2b2b;
    font-weight: 600;
}

.btn-primary:hover {
    filter: brightness(85%);
}

.telefoneMenu {
    background-color: var(--headerBgColor);
    color: var(--headerColor);
    
}

/* AC0462 */
.layout-modern .main-navigation > ul > li:not(.telefoneMenuHeader) > a:hover {
    color: var(--buttonColor) !important;
    filter: none;
}

.layout-modern .header-contact-link:hover .telefoneMenu {
    filter: brightness(94%);
}

/* AC0292 */
.layout-modern #menu-toggle {
    background-color: var(--menuColor);
    color: var(--menuBgColor);
}

/* AC0599
   Cores de cabecalho por layout, SO no mobile - no desktop tudo segue como era.
   992px e o corte que o projeto usa: acima disso valem os blocos
   "@@media (min-width: 993px)" de header.css.

   Os dois pares sao escritos por extenso, inclusive o de 1 e 2, para nao
   depender do que as regras de base fazem nessa faixa. O cabecalho 1 nao tem
   classe propria no body, entao ele entra pela regra sem sufixo - que vem
   primeiro, e por isso perde para as de 3 a 6 no proprio bloco.

   "!important" e "body" no seletor sao necessarios: as regras de base tambem
   usam !important, e color.css carregar por ultimo e o que desempata. */
@media only screen and (max-width: 992px) {
    body.layout-modern .site-header {
        background: var(--menuBgColor) !important;
    }

    body.layout-modern.header-layout-3 .site-header,
    body.layout-modern.header-layout-4 .site-header,
    body.layout-modern.header-layout-5 .site-header,
    body.layout-modern.header-layout-6 .site-header {
        background: var(--headerBgColor) !important;
    }

    /* AC0600
       Botao do menu: nos cabecalhos 1 e 2 ele fica sobre a faixa do cabecalho;
       do 3 em diante, sobre a barra do menu - dai a troca de par de cores.
       So existe abaixo de 992px, que e onde o menu vira sanfona. */
    body.layout-modern #menu-toggle {
        background-color: var(--headerBgColor) !important;
        color: var(--headerColor) !important;
    }

    body.layout-modern.header-layout-3 #menu-toggle,
    body.layout-modern.header-layout-4 #menu-toggle,
    body.layout-modern.header-layout-5 #menu-toggle,
    body.layout-modern.header-layout-6 #menu-toggle {
        background-color: var(--menuBgColor) !important;
        color: var(--menuColor) !important;
    }

    /* AC0606
       A faixa superior usa sempre o par contrario ao do cabecalho logo abaixo,
       para as duas nao se fundirem numa tarja so. Mesmo pareamento do botao. */
    body.layout-modern .header-top {
        background-color: var(--headerBgColor) !important;
        color: var(--headerColor) !important;
    }

    body.layout-modern.header-layout-3 .header-top,
    body.layout-modern.header-layout-4 .header-top,
    body.layout-modern.header-layout-5 .header-top,
    body.layout-modern.header-layout-6 .header-top {
        background-color: var(--menuBgColor) !important;
        color: var(--menuColor) !important;
    }

    /* AC0607 - o texto e os icones herdam a cor da faixa */
    body.layout-modern .header-top .header-top-info,
    body.layout-modern .header-top .header-top-info i,
    body.layout-modern .header-top .theme-toggle-top {
        color: inherit !important;
    }
}

.layout-modern #cookies .cookies-button {
    background-color: var(--buttonBgColor);
    color: var(--buttonColor);
    border: 0;
}

/* AC0463 */
.listing-header strong {
    color: #222 !important;
}

.mapaHome {
    border-top: 8px solid #e7e7e7 !important
}

.linksLogo .box-links a:hover {
    border: 1px solid var(--buttonBgColor) !important;
}