/* =============================== */
/* VARIÁVEIS GLOBAIS              */
/* =============================== */
:root {
    --cor_primaria: #000000;
    --cor_botao: #eee829;
    --cor_texto_botao: #000000;
    --cor_secundaria: #eee829;
    --cor_botao_hover: #000000;
    --pre_cabecalho: #eee829;
    --cor_icones: #eee829;
    --cor_cabecalho: #ffffff;
    --cor_texto_pre_cabecalho: #000000;
    --cor_menu: #eee829;
    --cor_texto_menu: #000000;
    --cor_texto_botao_hover: #ffffff;
    --texto_global: #000000;
    --cor_texto_footer: #000000;
    --cor_newsletter: #000000;
}

/* =============================== */
/* MODO ESCURO                    */
/* =============================== */
[data-tema="escuro"] {
  --cor_primaria: #ffffff;
  --cor_botao: #444444;
  --cor_texto_botao: #ffffff;
  --cor_secundaria: #eeeeee;
  --cor_botao_hover: #eeeeee;
  --pre_cabecalho: #222222;
  --cor_icones: #ffffff;
  --cor_cabecalho: #111111;
  --cor_texto_pre_cabecalho: #ffffff;
  --cor_menu: #222222;
  --cor_texto_menu: #ffffff;
  --cor_texto_botao_hover: #000000;
  --texto_global: #ffffff;
  --cor_texto_footer: #ffffff;
  --cor_newsletter: #ffffff;
}

[data-tema="escuro"] body {
  background-color: #121212;
  color: var(--texto_global);
}

[data-tema="escuro"] #rodape,
[data-tema="escuro"] #rodape .institucional,
[data-tema="escuro"] #rodape > div:last-child {
  background: #1a1a1a !important;
}

[data-tema="escuro"] .botao.principal,
[data-tema="escuro"] .coluna div.componente.newsletter .botao {
  background-color: var(--cor_botao);
  color: var(--cor_texto_botao);
}

[data-tema="escuro"] .coluna div.componente.newsletter .botao:hover {
  background-color: var(--cor_botao_hover);
  color: var(--cor_texto_botao_hover);
}

/* =============================== */
/* BOTÃO DE TROCA DE TEMA         */
/* =============================== */
#botao-tema {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9999;
  padding: 10px 15px;
  background-color: var(--cor_botao);
  color: var(--cor_texto_botao);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease-in-out;
}

#botao-tema:hover {
  background-color: var(--cor_botao_hover);
  color: var(--cor_texto_botao_hover);
  transform: rotate(20deg);
}

#botao-tema svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
}

/* =============================== */
/* RESPONSIVIDADE                 */
/* =============================== */
@media (max-width: 1024px) {
    .menu.superior .nivel-um > li {
        padding: 8px 5px;
    }
    .preco-produto.destaque-avista .desconto-a-vista {
        font-size: 20px !important;
    }
}

@media (max-width: 900px) {
    #corpo .aproveite-tambem .preco-produto.destaque-avista {
        padding-top: 40px !important;
    }
    .menu.superior .nivel-um > li > a > strong {
        font-size: 14px;
    }
    .carrinho-interno > div .botao {
        font-size: 14px;
        padding: 10px 15px;
    }
    .coluna div.componente.newsletter .botao {
        width: 100%;
        box-sizing: border-box;
    }
}

@media (max-width: 767px) {
    .pagina-inicial .desconto-a-vista {
        font-size: 10px !important;
    }
    .preco-produto .desconto-a-vista:after {
        font-size: 0px !important;
        display: none;
    }
    .preco-produto {
        padding-top: 50px !important;
    }
    .banner.mini-banner {
        display: none !important;
    }
    .menu.superior .nivel-dois li,
    .menu.superior .nivel-tres li {
        padding: 8px 12px !important;
        font-size: 14px;
    }
    #cabecalho p, #cabecalho a, #cabecalho span {
        font-size: 14px;
    }
    .botao.principal {
        font-size: 14px;
        padding: 10px;
    }
    .pagina-carrinho .acao-editar a.botao {
        font-size: 14px;
        padding: 8px 12px;
    }
}

/* =============================== */
/* BOTÕES E INTERAÇÕES            */
/* =============================== */
.botao.principal {
    color: #000;
}
.coluna div.componente.newsletter .botao,
.coluna div.componente.newsletter .botao:hover {
    color: #ffffff;
}
.container-conteudo-button-fale-conosco-drop-help:hover span {
    color: #ffffff !important;
}
.my_account .login a:hover {
    background: #eee829;
    border-color: #eee829;
}
.carrinho-interno > div .botao:hover,
.pagina-carrinho .acao-editar a.botao:hover {
    color: #ffffff !important;
    background: #000;
    border: 1.2px solid #000;
}
.coluna div.componente.newsletter .botao {
    background: #eee829;
    color: #000000;
}
.coluna div.componente.newsletter .botao:hover {
    background: #ffffff;
    color: #000000;
}

/* =============================== */
/* CABEÇALHO E BUSCA              */
/* =============================== */
#cabecalho p, #cabecalho a, #cabecalho span {
    color: #000000;
}
#cabecalho .qtd-carrinho {
    color: #ffffff;
}
.busca-mobile .busca input {
    padding: 16px 30px 16px 16px;
}
.botao-busca {
    right: -15px !important;
}
.botao-busca:hover > svg rect {
    fill: #eee829 !important;
    stroke: #eee829 !important;
}

/* =============================== */
/* MENU PRINCIPAL E LATERAL       */
/* =============================== */
.menu-categorias .categoria-titulo {
    display: none;
}
.menu.superior .nivel-um > li {
    padding: 4.5px 10px;
}
.menu.superior .nivel-um > li > a > strong {
    text-transform: uppercase;
}
.menu.superior .nivel-dois li {
    padding: 5px 20px;
}
.menu.superior .nivel-dois li:hover a {
    text-decoration: none;
}
.menu.superior .nivel-tres li:hover a {
    text-decoration: underline;
}
.menu.superior .nivel-dois li.com-filho::after {
    content: "\f054" !important;
    font-family: Fontawesome;
    width: 10px;
    color: #000;
    font-size: 10px;
    opacity: .6;
    right: 20px;
    position: absolute;
    top: 7px;
}
.menu.superior .nivel-tres li {
    padding: 7px 20px !important;
}
.menu.lateral .nivel-tres {
    top: 0 !important;
    left: 0 !important;
    position: relative;
    border: none !important;
}
.menu.lateral .nivel-tres > li > a {
    padding: 0 20px;
}
.menu.superior .titulo {
    font-size: 13px;
}

/* =============================== */
/* BREADCRUMBS E NAVEGAÇÃO        */
/* =============================== */
.breadcrumbs {
    margin-bottom: 20px !important;
}
.breadcrumbs ul li:last-child a {
    color: #ffffff;
}

/* =============================== */
/* RODAPÉ                         */
/* =============================== */
#rodape .atd-rodape:hover {
    color: #ffffff !important;
}
#rodape, #rodape .institucional, #rodape > div:last-child {
    background: #f5f5f5 !important;
}
#rodape .loja-integrada-copyright,
#rodape .design-fox {
    display: none !important;
    width: 0 !important;
    opacity: 0 !important;
}

/* =============================== */
/* VÍDEO E BANNERS                */
/* =============================== */
.video-banner svg,
.video-banner span {
    display: none !important;
}
.video-banner .video-banner-img,
.box-video:hover .video-banner-img {
    filter: unset;
    height: auto !important;
}
div#box-video {
    height: auto !important;
    padding: 0 !important;
}
.pagina-inicial div#instagram-feed-foxtech {
    margin-bottom: 70px;
}

/* =============================== */
/* PÁGINA DO CARRINHO             */
/* =============================== */
.pagina-carrinho .offset3 {
    margin-left: 2% !important;
    width: 100% !important;
}
.pagina-carrinho .offset3 .cor-principal {
    color: var(--cor_secundaria);
}

/* =============================== */
/* PREÇOS E PROMOÇÕES             */
/* =============================== */
.preco-produto.destaque-avista {
    position: relative;
    padding-top: 20px;
    margin-top: 10px;
    width: 100%;
}
.preco-produto.destaque-avista .desconto-a-vista {
    position: absolute;
    top: 0;
    width: 100%;
    font-size: 24px !important;
    line-height: 24px;
    letter-spacing: -1px !important;
    font-weight: 700 !important;
    color: var(--cor_primaria) !important;
}
.preco-produto.destaque-avista .preco-promocional {
    font-size: 12px !important;
    font-weight: 400 !important;
    color: #666 !important;
}
#flutuante-produto .preco-produto.destaque-avista .desconto-a-vista {
    font-size: 20px !important;
}
#corpo .aproveite-tambem .preco-produto.destaque-avista .desconto-a-vista {
    font-size: 18px !important;
}

/* =============================== */
/* CAMPANHAS ESPECIAIS            */
/* =============================== */
.categoria-id-16243280 {
    background: #000 !important;
}
.categoria-id-16243280 a .titulo {
    color: var(--cor_menu) !important;
    font-size: 16px !important;
}