/**
 * FANÁTICOS DA VÁRZEA — CSS ÚNICO FINAL
 * =====================================
 * IMPORTANTE:
 * 1) Visual → Editar CSS
 * 2) APAGUE TUDO que está lá (Ctrl+A → Delete)
 * 3) Cole ESTE arquivo inteiro
 * 4) Salve
 *
 * Não misture com os CSS antigos — é isso que quebra o header.
 */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Oswald:wght@500;600;700&display=swap");

:root {
  --fdv-bg: #070b12;
  --fdv-bg2: #0c121c;
  --fdv-card: #121a26;
  --fdv-card-hover: #182233;
  --fdv-text: #ffffff;
  --fdv-muted: #9aa3b2;
  --fdv-brand: #00c8ff;
  --fdv-brand-hover: #3ddcff;
  --fdv-radius: 14px;
  --cor-principal: #00c8ff !important;
  --cor-botao: #00c8ff !important;
  --cor-secundaria: #c5ccd6 !important;
}

/* ═══════════════ BASE ═══════════════ */
html, body {
  background: var(--fdv-bg) !important;
  background-image: none !important;
  color: var(--fdv-text) !important;
  font-family: "Inter", system-ui, sans-serif !important;
}

.conteiner-principal,
.conteiner-principal .conteiner,
#corpo .conteiner,
.secao-banners .conteiner,
#rodape .conteiner,
.pagamento-selos .conteiner {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

.cor-principal,
a.cor-principal,
.preco-promocional.cor-principal {
  color: var(--fdv-brand) !important;
}

.fundo-principal,
.botao.principal,
.botao.principal:hover,
.tag-comprar.fundo-principal,
i.fundo-principal,
.icon-shopping-cart.fundo-principal {
  background-color: var(--fdv-brand) !important;
  color: #041018 !important;
  border-color: var(--fdv-brand) !important;
}

.borda-principal { border-color: var(--fdv-brand) !important; }
.cor-secundaria { color: var(--fdv-muted) !important; }
.fundo-secundario { background-color: var(--fdv-bg2) !important; }

/* Esconde barras duplicadas da LI */
#barraTopo,
#barraNewsletter {
  display: none !important;
}

/* ═══════════════ TOPO ═══════════════ */
.barra-inicial {
  background: var(--fdv-bg2) !important;
  border-bottom: 1px solid rgba(255,255,255,.06) !important;
  color: var(--fdv-muted) !important;
  font-size: 12px !important;
}
.barra-inicial a,
.barra-inicial span { color: var(--fdv-muted) !important; }
.barra-inicial a:hover { color: var(--fdv-brand) !important; }

/* ═══════════════ HEADER — LAYOUT DEFINITIVO ═══════════════ */
#cabecalho {
  background: rgba(7, 11, 18, 0.97) !important;
  border-bottom: 1px solid rgba(255,255,255,.06) !important;
  padding: 12px 0 8px !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
  /* LI usa padding-top:55px — remove */
  padding-top: 12px !important;
}

#cabecalho .conteiner {
  background: transparent !important;
  box-shadow: none !important;
  max-width: 1280px !important;
}

/* Mata floats do Bootstrap no header */
#cabecalho.logo-centro > .conteiner > .row-fluid {
  display: grid !important;
  grid-template-columns: 1fr auto 1fr !important;
  align-items: center !important;
  gap: 16px 28px !important;
  width: 100% !important;
  margin: 0 !important;
  float: none !important;
}

#cabecalho.logo-centro > .conteiner > .row-fluid:before,
#cabecalho.logo-centro > .conteiner > .row-fluid:after {
  display: none !important;
  content: none !important;
}

#cabecalho.logo-centro > .conteiner > .row-fluid > * {
  float: none !important;
  margin-left: 0 !important;
}

/* ESQUERDA: bem-vindo + busca */
#cabecalho.logo-centro > .conteiner > .row-fluid > .conteudo-topo.span3:first-child {
  grid-column: 1 !important;
  grid-row: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 8px !important;
  width: auto !important;
}

/* CENTRO: só o logo */
#cabecalho.logo-centro > .conteiner > .row-fluid > .span6 {
  grid-column: 2 !important;
  grid-row: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-height: 0 !important;
}

/* DIREITA: conta + carrinho */
#cabecalho.logo-centro > .conteiner > .row-fluid > .conteudo-topo.span3:last-child {
  grid-column: 3 !important;
  grid-row: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  justify-content: center !important;
  gap: 8px !important;
  width: auto !important;
}

#cabecalho .superior.row-fluid,
#cabecalho .inferior.row-fluid,
#cabecalho .superior .span12,
#cabecalho .inferior .span12 {
  width: 100% !important;
  margin: 0 !important;
  float: none !important;
}

/* Logo — corrige height fixa 112px da LI */
#cabecalho .logo {
  margin: 0 !important;
  line-height: 0 !important;
  height: auto !important;
}

#cabecalho .logo a {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: auto !important;
  min-height: 0 !important;
}

#cabecalho .logo a img,
#cabecalho .logo img {
  position: static !important;
  inset: auto !important;
  margin: 0 !important;
  max-height: 70px !important;
  max-width: 170px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  background: transparent !important;
  filter: drop-shadow(0 0 8px rgba(0, 200, 255, 0.25)) !important;
}

#cabecalho .bem-vindo {
  font-size: 12px !important;
  color: var(--fdv-muted) !important;
  margin: 0 !important;
}

#cabecalho .bem-vindo .cor-principal {
  color: var(--fdv-brand) !important;
}

/* Busca */
#cabecalho .busca {
  position: relative !important;
  width: 100% !important;
  max-width: 280px !important;
  background: var(--fdv-card) !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  border-radius: 999px !important;
  padding: 4px 46px 4px 14px !important;
  margin: 0 !important;
}

#cabecalho .busca input {
  width: 100% !important;
  height: 38px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--fdv-text) !important;
}

#cabecalho .busca .botao-busca {
  position: absolute !important;
  right: 4px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 36px !important;
  height: 36px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--fdv-brand) !important;
  color: #041018 !important;
  margin: 0 !important;
}

/* Conta */
#cabecalho .acoes-conta {
  display: flex !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  margin: 0 !important;
  list-style: none !important;
}

#cabecalho .acoes-conta li {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 0 !important;
}

#cabecalho .acoes-conta i {
  width: 32px !important;
  height: 32px !important;
  line-height: 32px !important;
  text-align: center !important;
  border-radius: 8px !important;
  background: var(--fdv-brand) !important;
  color: #041018 !important;
}

#cabecalho .acoes-conta a {
  color: var(--fdv-muted) !important;
  font-size: 12px !important;
}

/* Carrinho — SEMPRE na direita, nunca sob o logo */
#cabecalho .carrinho,
#cabecalho .carrinho.vazio {
  float: none !important;
  width: auto !important;
  max-width: 260px !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  text-align: left !important;
}

#cabecalho .carrinho > a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 12px 6px 6px !important;
  background: var(--fdv-card) !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  border-radius: var(--fdv-radius) !important;
  text-decoration: none !important;
}

#cabecalho .carrinho > a > i {
  width: 34px !important;
  height: 34px !important;
  line-height: 34px !important;
  text-align: center !important;
  border-radius: 8px !important;
  background: var(--fdv-brand) !important;
  color: #041018 !important;
  margin: 0 !important;
}

#cabecalho .carrinho .vazio-text,
#cabecalho .carrinho .titulo,
#cabecalho .carrinho span {
  color: var(--fdv-muted) !important;
  background: transparent !important;
  font-size: 12px !important;
}

/* Menu CTA — linha própria abaixo do grid */
#cabecalho .menu.superior {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  float: none !important;
  clear: both !important;
  margin: 12px 0 4px !important;
  text-align: center !important;
  background: transparent !important;
  border: 0 !important;
}

#cabecalho .menu.superior .nivel-um {
  display: flex !important;
  justify-content: center !important;
  gap: 8px !important;
  float: none !important;
  margin: 0 !important;
}

#cabecalho .menu.superior .nivel-um > li {
  float: none !important;
  border: 0 !important;
  margin: 0 !important;
}

#cabecalho .menu.superior .nivel-um > li > a {
  display: inline-flex !important;
  padding: 10px 20px !important;
  background: var(--fdv-brand) !important;
  border-radius: var(--fdv-radius) !important;
  box-shadow: 0 8px 22px rgba(0,200,255,.28) !important;
}

#cabecalho .menu.superior .nivel-um > li > a strong,
#cabecalho .menu.superior .nivel-um > li > a .titulo {
  color: #041018 !important;
  font-family: "Oswald", sans-serif !important;
  font-size: 13px !important;
  letter-spacing: .06em !important;
  background: transparent !important;
}

/* Busca mobile só no mobile */
@media (min-width: 768px) {
  #cabecalho .busca-mobile,
  #cabecalho .conteudo-topo.visible-phone {
    display: none !important;
  }
}

@media (max-width: 979px) {
  #cabecalho.logo-centro > .conteiner > .row-fluid {
    grid-template-columns: 1fr !important;
  }
  #cabecalho.logo-centro > .conteiner > .row-fluid > .span6 {
    grid-column: 1 !important;
    order: -1 !important;
  }
  #cabecalho.logo-centro > .conteiner > .row-fluid > .conteudo-topo.span3:first-child,
  #cabecalho.logo-centro > .conteiner > .row-fluid > .conteudo-topo.span3:last-child {
    grid-column: 1 !important;
    align-items: center !important;
  }
  #cabecalho .busca { max-width: 100% !important; }
  #cabecalho .acoes-conta { justify-content: center !important; }
  #cabecalho .carrinho { align-self: center !important; }
}

/* ═══════════════ BANNER ═══════════════ */
.secao-banners {
  margin: 12px auto 20px !important;
}
.secao-banners .flexslider,
.secao-banners .slides img {
  border-radius: 16px !important;
  overflow: hidden !important;
}

/* ═══════════════ LATERAL / CATEGORIA ═══════════════ */
.coluna-lateral,
.filtro,
.componente,
.newsletter,
.lista-simples,
.box,
.conteudo-auxiliar {
  background: var(--fdv-card) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 14px !important;
  color: var(--fdv-text) !important;
  box-shadow: none !important;
}

.coluna-lateral .titulo,
.filtro .titulo,
.componente .titulo {
  color: var(--fdv-text) !important;
  background: transparent !important;
  font-family: "Oswald", sans-serif !important;
}

/* mata caixas brancas de título de categoria */
.titulo-categoria,
.pagina-categoria .titulo,
#listagemProdutos .titulo-categoria {
  background: transparent !important;
  color: var(--fdv-text) !important;
  border-color: var(--fdv-brand) !important;
}

.breadcrumb,
.migalha,
.caminho {
  color: var(--fdv-muted) !important;
}
.breadcrumb a { color: var(--fdv-muted) !important; }

/* ═══════════════ PRODUTOS ═══════════════ */
.listagem .listagem-item {
  background: var(--fdv-card) !important;
  border: 1px solid rgba(255,255,255,.07) !important;
  border-radius: 16px !important;
  padding: 12px !important;
  margin-left: 0 !important;
  transition: transform .3s ease, border-color .3s ease !important;
}
.listagem .listagem-item:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(0,200,255,.3) !important;
  background: var(--fdv-card-hover) !important;
}
.listagem .listagem-item .imagem-produto {
  background: #0a1018 !important;
  border-radius: 10px !important;
  padding: 6px !important;
}
.listagem .listagem-item .nome-produto {
  color: var(--fdv-text) !important;
}
.listagem .listagem-item .preco-promocional,
.listagem .listagem-item .preco-produto {
  color: var(--fdv-brand) !important;
  font-family: "Oswald", sans-serif !important;
}

.botao,
.botao.principal {
  border-radius: 12px !important;
}

/* ═══════════════ RODAPÉ ═══════════════ */
#rodape,
#rodape .institucional {
  background: var(--fdv-bg2) !important;
  color: var(--fdv-muted) !important;
}

#rodape .titulo { color: var(--fdv-text) !important; }
#rodape a { color: var(--fdv-muted) !important; }
#rodape a:hover { color: var(--fdv-brand-hover) !important; }

/* Mata fundo branco das redes (padrao-rodape.png #fff) */
#rodape .redes-sociais,
#rodape .institucional .redes-sociais {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border: none !important;
  width: auto !important;
  position: static !important;
  padding: 0 !important;
}

#rodape .lista-redes ul li {
  border: none !important;
  float: none !important;
  display: inline-block !important;
  margin: 0 6px 0 0 !important;
}

.pagamento-selos {
  background: #05080e !important;
  border-top: 1px solid rgba(255,255,255,.05) !important;
}

/**
 * FANÁTICOS DA VÁRZEA — Subcategorias / Menu lateral
 * Cole no final do Editar CSS OU use COLE-SUBCATEGORIAS.html no rodapé
 */

.coluna.span3,
.coluna .componente,
.coluna .newsletter,
.menu.lateral,
.menu.lateral.outras {
  background: #121a26 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
}

.menu.lateral .nivel-um > li > a,
.menu .nivel-dois,
.menu .nivel-tres,
.menu.lateral .nivel-dois,
.menu.lateral .nivel-tres {
  background: #121a26 !important;
  background-color: #121a26 !important;
  box-shadow: none !important;
  color: #c5ccd6 !important;
}

.menu.lateral a,
.menu.lateral .nivel-dois a,
.menu.lateral .nivel-tres a {
  color: #c5ccd6 !important;
  padding: 12px 16px !important;
}

.menu.lateral a:hover,
.menu.lateral .nivel-dois li:hover,
.menu.lateral .nivel-dois li:hover > a {
  background: #182233 !important;
  color: #00c8ff !important;
}

.menu.lateral .titulo,
.menu.lateral strong.titulo {
  color: #fff !important;
  background: transparent !important;
}

.menu.lateral .nivel-dois,
.menu.lateral .nivel-tres {
  position: static !important;
  display: block !important;
  left: auto !important;
  top: auto !important;
  width: 100% !important;
  min-width: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}

.menu.lateral .nivel-dois > li > a { padding-left: 28px !important; }
.menu.lateral .nivel-tres > li > a { padding-left: 40px !important; color: #9aa3b2 !important; }

.menu.lateral .ativo,
.menu.lateral li.ativo {
  background: rgba(0, 200, 255, 0.1) !important;
}
.menu.lateral .ativo > a,
.menu.lateral li.ativo > a {
  color: #00c8ff !important;
  border-left: 3px solid #00c8ff !important;
  font-weight: 600 !important;
}

.menu.lateral i.fundo-secundario {
  background: rgba(0, 200, 255, 0.15) !important;
  color: #00c8ff !important;
  border-radius: 6px !important;
}

.breadcrumbs,
.breadcrumbs.borda-alpha {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.breadcrumbs a { color: #9aa3b2 !important; }
.breadcrumbs strong,
.breadcrumbs .cor-secundaria { color: #fff !important; }