/*GLOBAL*/
:root { 
--bg-site: #ebebeb;
--bg-componentes: #e88533;
--bg-componentes-selecionado: #e85033;
--bg-header: #030303;
--bg-footer: #030303;
--bg-menu-categorias: #e88533;
--bg-title-section: #ebebeb;
--bg-preco-frete: #ffffff;
--bg-opcao-prazo-frete: #f0f0f0;
--color-texto-frete: #363a3e;
--color-texto-categorias: #ffffff;
--color-texto-selecionado: #363a3e;
--color-texto-rodape: #ffffff;
--color-texto-header: #ffffff;
--color-texto-componentes: #f0f0f0;
}
/*ENDGLOBAL*/
/*==============================================================================
 * GLOBAL
 *============================================================================*/
body {
    background-color: var(--bg-site);
}
.titulo {
    background-color: var(--bg-title-section);
}
.titulo h1:after {
    background-color: var(--bg-componentes);
}
.btn-primary {
    background-color: var(--bg-componentes);
    border-color: var(--bg-componentes);
    color: var(--color-texto-componentes);
}
.btn-primary:hover, .btn-primary:focus {
    background-color: var(--bg-componentes-selecionado);
    border-color: var(--bg-componentes-selecionado);
}
.btn-outline-primary {
    border-color: var(--bg-componentes);
    color: var(--bg-componentes);
}
.btn-outline-primary:hover {
    background-color: var(--bg-componentes-selecionado);
    color: var(--color-texto-componentes);
    border-color: var(--bg-componentes-selecionado);
}
.box-form-default {
    border-top-color: var(--bg-componentes);
    border-bottom-color: var(--bg-componentes);
}
/*==============================================================================
 * CABEÇALHO
 *============================================================================*/
#header .header-topo, #header .header-topo div.navbar {
    background-color: var(--bg-header);
}
#header .header-menu {
    background-color: var(--bg-menu-categorias);
}
#header .header-menu {
    border-bottom-color: var(--bg-header);
}
#header .header-menu li a.dropdown-toggle {
    color: var(--color-texto-categorias);
}
#header .header-menu li a.dropdown-toggle:hover {
    color: var(--color-texto-selecionado);
}
#header .header-menu li a:hover {
    background-color: var(--bg-header);
}
#header .header-menu li.separador a:hover {
    color: var(--color-texto-selecionado);
}
header a, #header .login {
    color: var(--color-texto-header);
}
.login .caixa-suspensa .logar, .mobile-menu .logar {
    background-color: var(--bg-componentes);
}
#header .login .caixa-suspensa .logar {
    color: var(--color-texto-componentes);
}
#header .login .logado .dropdown a:not(.dropdown-item) {
    color: var(--color-texto-header);
}
#header .login .logado .dropdown-menu a:hover {
    color: var(--color-texto-header);
    background-color: var(--bg-header);
}
#header .login .nao-logado span.circulo-login a {
    color: var(--color-texto-header);
}
#carrinhoTopo a .carrinho-quantidade {
    color: var(--color-texto-header);
}
#carrinhoTopo .carrinho-quantidade span:last-child {
    background-color: var(--bg-componentes);
    color: var(--color-texto-componentes);
}
#mobile-menu-fechar {
    background: var(--bg-componentes);
    color: var(--color-texto-componentes);
}
@media(max-width: 767px) {
    .mobile-menu {
        background-color: var(--bg-site);
    }
    #header .mobile-menu .mobile-menu-entrar a {
        color: var(--color-texto-componentes);
    }
    #header .mobile-menu .mobile-menu-entrar a.btn-primary {
        background: var(--bg-componentes);
        border-color: var(--bg-componentes);
    }
    #header .mobile-menu .mobile-menu-entrar a.btn-primary:hover {
        background: var(--bg-componentes-selecionado);
    }
}
#menuCategorias li.nav-item:first-child a.dropdown-toggle:first-child:focus {
    background: var(--bg-header);
    color: var(--color-texto-selecionado);
}
/*==============================================================================
 * SLIDES
 *============================================================================*/
#slide .carousel-indicators li {
    background-color: var(--color-texto-componentes);
}
#slide .carousel-indicators li.active {
    background-color: var(--bg-componentes);
}
#slide .carousel-indicators li:hover {
    background-color: var(--bg-componentes-selecionado);
}
/*==============================================================================
 * CONTA CLIENTE - MENU
 *============================================================================*/
#conta .conta-card-menu {
    border-left-color: var(--bg-componentes);
}
#conta .conta-card-menu.active {
    border-left-color: var(--bg-componentes-selecionado);
}
#conta .conta-dados-basicos-form {
    border-top-color: var(--bg-componentes);
}
/*==============================================================================
 * CARD PRODUTOS
 *============================================================================*/
.card-produtos:nth-child(odd) .produto-item.borda-destaque {
    border-top-color: var(--bg-componentes-selecionado);
    border-bottom-color: var(--bg-componentes-selecionado);
}
.card-produtos:nth-child(even) .produto-item.borda-destaque {
    border-top-color: var(--bg-componentes);
    border-bottom-color: var(--bg-componentes);
}
.card-produtos .produto-info .produto-btn-comprar a:focus {
    background: var(--bg-componentes-selecionado);
}
/*==============================================================================
 * PRODUTOS
 *============================================================================*/
#produtos .produtos-paginacao li.page-item.active a.page-link {
    background: var(--bg-componentes);
    color: var(--color-texto-componentes);
}
#produtos .produtos-paginacao li.page-item .page-link:hover  {
    background: var(--bg-componentes-selecionado);
    color: var(--color-texto-componentes);
}
/*==============================================================================
 * PRODUTO DETALHES
 *============================================================================*/
#produtoDetalhes .produto-detalhes-galeria .exzoom_nav_inner span.current {
    border-color: var(--bg-componentes);
}
#produtoDetalhes .produto-detalhes-galeria .exzoom_btn a:hover{
    background-color: var(--bg-componentes-selecionado);
}
/*==============================================================================
 * PRODUTO DETALHES - GALERIA
 *============================================================================*/
.galeria .thumbs span:hover, .galeria .thumbs span.active {
    border-color: var(--bg-componentes);
}
.navegacao-thumb .navegacao {
    background: var(--bg-componentes);
    color: var(--color-texto-componentes);
}
.navegacao-thumb .navegacao:hover {
    background: var(--bg-componentes-selecionado);
}
/*==============================================================================
 * CHECKOUT FORMA ENVIO
 *============================================================================*/
#checkoutEnvio .card-forma-envio .card-header {
    background-color: var(--bg-opcao-prazo-frete);
    color: var(--color-texto-frete);
}
#checkoutEnvio .card-forma-envio .card-body {
    background-color: var(--bg-preco-frete);
    color: var(--color-texto-frete);
}
#checkoutEnvio .card-forma-envio label.ativo {
    border-color: var(--bg-componentes);
}
#checkoutEnvio .card-forma-envio label:hover {
    border-color: var(--bg-componentes-selecionado);
}
/*==============================================================================
 * CHECKOUT FORMA PAGAMENTO
 *============================================================================*/
#checkoutPagamento .checkout-forma-pagamento ul.nav-tabs li a.active {
    color: var(--bg-componentes);
}
#checkoutPagamento .checkout-forma-pagamento ul.nav-tabs li a:hover {
    color: var(--bg-componentes-selecionado);
}
/*==============================================================================
 * CHECKOUT CONCLUIDO RESUMO COMPRA
 *============================================================================*/
#checkoutConcluidoResumo .checkout-concluido-confirmacao div:first-child span strong {
    color: var(--bg-componentes);
}
#checkoutConcluidoResumo .checkout-concluido-confirmacao div:last-child span:last-child {
    color: var(--bg-componentes);
}
#checkoutConcluidoResumo ul li a.btn.btn-link {
    color: var(--bg-componentes);
}
/*==============================================================================
 * CARROSSEL CARRINHO
 *============================================================================*/
.box-carrossel .navegacao {
    background: var(--bg-componentes);
    color: var(--color-texto-componentes);
}
.box-carrossel .navegacao:hover {
    background: var(--bg-componentes-selecionado);
}
/*==============================================================================
 * RODAPE
 *============================================================================*/
#rodape {
    background-color: var(--bg-footer);
}
#rodape h4 {
    color: var(--color-texto-rodape);
}
#rodape p, #rodape .btn-sobre {
    color: var(--color-texto-rodape);
    border-color: var(--color-texto-rodape);
}
#rodape .btn-sobre:hover {
    color: var(--color-texto-rodape);
    border-color: var(--color-texto-rodape);
}
#rodape ul li a {
    color: var(--color-texto-rodape);
}
#rodape ul li a:hover {
    color: var(--color-texto-rodape);
}
#rodape .social li a {
    border-color: var(--color-texto-rodape);
}
#rodape .social li a:hover {
    border-color: var(--color-texto-rodape);
    color: var(--color-texto-rodape);
}
#rodape .copy-right p {
    color: var(--color-texto-rodape);
}
@media(max-width: 780px) {
    #rodape .borda-mobile {
        border-bottom-color: var(--color-texto-rodape);
    }
}
#rodape .voltar-ao-topo, #rodapeCheckout .voltar-ao-topo {
    background-color: var(--bg-componentes);
    color: var(--color-texto-componentes);
}
#rodape .voltar-ao-topo a:hover, #rodapeCheckout .voltar-ao-topo a:hover {
    color: var(--bg-componentes-selecionado);
}
/*==============================================================================
 * PAGINAS DE ERROS
 *============================================================================*/
#paginaErro .box-erro .erro {
    border-top-color: var(--bg-componentes);
}