/* ============================================================
   TEAM OLIVEIRA • MASTER CSS PARA LOJA INTEGRADA
   Design System Oficial: Preto Fosco (#080808) + Dourado Metálico (#D4AF37)
   Idêntico ao layout WordPress / Preview Aprovado
   ============================================================ */

/* 1. IMPORTAÇÃO DE FONTES */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&family=Oswald:wght@500;600;700&display=swap');

/* 2. BASE, FUNDO GERAL E RESET */
body, 
html, 
#corpo, 
.conteudo, 
.secao-principal,
.pagina-inicial,
.pagina-categoria,
.pagina-produto,
.pagina-carrinho,
.pagina-busca,
#conteudo,
.main {
  background-color: #080808 !important;
  color: #CCCCCC !important;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  -webkit-font-smoothing: antialiased;
}

/* 3. BARRA SUPERIOR (TOP BAR) */
.barra-inicial, 
#barraNeutro, 
.top-bar,
.conteudo-topo .institucional,
.header-top {
  background: #000000 !important;
  border-bottom: 1px solid #1a1a1a !important;
  color: #F5C842 !important;
  font-size: 13px !important;
  letter-spacing: 0.5px !important;
  padding: 8px 0 !important;
}
.barra-inicial a, 
.barra-inicial span,
.top-bar strong {
  color: #F5C842 !important;
  font-weight: 700 !important;
}

/* 4. CABEÇALHO (HEADER) */
#cabecalho, 
.conteudo-topo,
.header,
.cabecalho {
  background: rgba(14, 14, 14, 0.98) !important;
  backdrop-filter: blur(10px) !important;
  border-bottom: 1px solid rgba(212, 175, 55, 0.35) !important;
  padding: 18px 0 !important;
}
.logo a img,
.cabecalho-logo img,
#cabecalho .logo img {
  max-height: 85px !important;
  width: auto !important;
  filter: drop-shadow(0 6px 20px rgba(212, 175, 55, 0.3)) drop-shadow(0 4px 10px rgba(0,0,0,0.9)) !important;
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}
.logo a:hover img,
#cabecalho .logo:hover img {
  transform: scale(1.06) rotate(-1deg) !important;
}

/* Campo de Busca no Cabeçalho */
.busca, .busca-mobile, #form-buscar {
  position: relative !important;
}
.busca input, 
.busca-mobile input,
#form-buscar input {
  background: #161616 !important;
  border: 1px solid #333333 !important;
  color: #FFFFFF !important;
  border-radius: 6px !important;
  padding: 12px 18px !important;
  font-size: 14px !important;
  transition: all 0.3s ease !important;
}
.busca input:focus,
#form-buscar input:focus {
  border-color: #D4AF37 !important;
  box-shadow: 0 0 15px rgba(212, 175, 55, 0.35) !important;
  background: #1a1a1a !important;
}
.busca .botao-busca,
.botao-buscar {
  background: linear-gradient(135deg, #F5A623 0%, #D4AF37 50%, #C8960C 100%) !important;
  color: #000000 !important;
  border: none !important;
  border-radius: 0 6px 6px 0 !important;
  font-weight: 900 !important;
  transition: all 0.3s ease !important;
}
.busca .botao-busca:hover {
  filter: brightness(1.15) !important;
}

/* Ícones de Ação e Carrinho */
.carrinho,
.carrinho-topo,
#cabecalho .carrinho {
  background: #161616 !important;
  border: 1px solid rgba(212, 175, 55, 0.4) !important;
  border-radius: 6px !important;
  padding: 10px 16px !important;
  color: #FFFFFF !important;
  transition: all 0.3s ease !important;
}
.carrinho:hover {
  background: rgba(212, 175, 55, 0.18) !important;
  transform: translateY(-2px) !important;
  border-color: #D4AF37 !important;
}
.carrinho .qtd-carrinho, 
.carrinho .badge,
.carrinho-quantidade {
  background: #D4AF37 !important;
  color: #000000 !important;
  font-weight: 900 !important;
  border-radius: 20px !important;
  padding: 2px 7px !important;
}

/* 5. MENU PRINCIPAL DE NAVEGAÇÃO */
.menu.superior, 
.menu.lateral, 
#menu-lateral,
.menu-superior,
.secao-menu {
  background: #111111 !important;
  border-bottom: 1px solid #222222 !important;
}
.menu.superior .nivel-um > li > a,
.menu.superior .titulo,
.menu-superior a {
  color: #EEEEEE !important;
  font-family: "Oswald", sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  padding: 14px 22px !important;
  transition: all 0.3s ease !important;
}
.menu.superior .nivel-um > li:hover > a,
.menu.superior .nivel-um > li.com-filho:hover > a,
.menu-superior a:hover {
  color: #F5C842 !important;
  background: rgba(212, 175, 55, 0.1) !important;
  border-bottom: 2px solid #D4AF37 !important;
}

/* 6. CORREÇÃO CRUCIAL: BANNER TARJA / BENEFÍCIOS (TIRAR O FUNDO BRANCO!) */
.banner-tarja,
.tarja-beneficios,
.secao-banners .banner.tarja,
.tarja,
#banner-tarja,
.modulo-beneficios,
.beneficios,
.tarja-mobile,
.conteudo .banner-tarja {
  background: #111111 !important;
  background-color: #111111 !important;
  border-top: 1px solid #222222 !important;
  border-bottom: 1px solid #222222 !important;
  color: #FFFFFF !important;
  padding: 18px 0 !important;
}
.banner-tarja *,
.tarja-beneficios *,
.beneficios * {
  color: #FFFFFF !important;
  background: transparent !important;
}
.banner-tarja svg,
.tarja-beneficios svg,
.banner-tarja i,
.tarja-beneficios i {
  color: #D4AF37 !important;
  fill: #D4AF37 !important;
}

/* 7. TÍTULOS DE SEÇÃO ("LANÇAMENTOS", "MAIS VENDIDOS", "DESTAQUES") */
.secao-secundaria .titulo-secao,
.listagem .titulo-secao,
.listagem-linha .titulo-secao,
.titulo-categoria,
.titulo-vitrine,
.componente-titulo,
h2.titulo-secao,
h3.titulo-secao {
  font-family: "Oswald", sans-serif !important;
  color: #FFFFFF !important;
  font-size: 32px !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  text-align: center !important;
  border-bottom: 2px solid #222222 !important;
  padding-bottom: 16px !important;
  margin: 40px auto 30px auto !important;
  position: relative !important;
  display: block !important;
}
.secao-secundaria .titulo-secao::after,
.listagem .titulo-secao::after {
  content: "" !important;
  position: absolute !important;
  bottom: -2px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 120px !important;
  height: 2px !important;
  background: linear-gradient(90deg, transparent, #D4AF37, transparent) !important;
}

/* 8. CARDS DE PRODUTO DA VITRINE (LUXURY COMBAT DESIGN) */
.listagem .produtos-carrossel,
.listagem-linha ul,
.listagem-grade,
.vitrine-produtos {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 24px !important;
  justify-content: center !important;
}

.listagem .listagem-item,
.listagem-linha li,
.produto-item,
.vitrine-produto,
li.listagem-item {
  background: #141414 !important;
  background-color: #141414 !important;
  border: 1px solid #262626 !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  transition: all 0.35s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  position: relative !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.7) !important;
  margin-bottom: 24px !important;
  padding: 0 !important;
}

.listagem .listagem-item:hover,
.listagem-linha li:hover,
.produto-item:hover {
  border-color: rgba(212, 175, 55, 0.6) !important;
  transform: translateY(-6px) !important;
  box-shadow: 0 14px 35px rgba(0, 0, 0, 0.95), 0 0 22px rgba(212, 175, 55, 0.25) !important;
  background: #191919 !important;
}

/* Imagem do Produto no Card */
.listagem .listagem-item .imagem-produto,
.listagem-linha li .imagem-produto img,
.produto-item .imagem-principal img,
.listagem .imagem-produto img {
  border-radius: 8px 8px 0 0 !important;
  background: #111111 !important;
  width: 100% !important;
  height: 270px !important;
  object-fit: cover !important;
  transition: transform 0.4s ease !important;
  display: block !important;
}
.listagem .listagem-item:hover .imagem-produto img,
.produto-item:hover .imagem-principal img {
  transform: scale(1.06) !important;
}

/* Selos e Badges (Tag flutuante dourada no topo esquerdo) */
.bandeiras-produto,
.bandeira-promocao,
.tag-com-desconto, 
.selo-oferta,
.bandeira-destaque,
.bandeira-novo {
  position: absolute !important;
  top: 12px !important;
  left: 12px !important;
  z-index: 10 !important;
  background: linear-gradient(135deg, #F5A623 0%, #D4AF37 50%, #C8960C 100%) !important;
  color: #000000 !important;
  font-family: "Oswald", sans-serif !important;
  font-weight: 900 !important;
  font-size: 11px !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  border-radius: 4px !important;
  padding: 4px 10px !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.6) !important;
}

/* Nome do Produto no Card */
.listagem .nome-produto,
.listagem-linha .nome-produto,
.produto-item .nome-produto {
  font-family: "Oswald", sans-serif !important;
  color: #FFFFFF !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  letter-spacing: 0.5px !important;
  line-height: 1.3 !important;
  padding: 16px 16px 6px 16px !important;
  text-align: left !important;
  min-height: 50px !important;
  margin: 0 !important;
}

/* Bloco de Preços */
.listagem .precos,
.listagem-linha .precos,
.produto-item .precos {
  padding: 0 16px 14px 16px !important;
  margin-top: auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  text-align: left !important;
}
.preco-de, 
.preco-promocional del,
.preco-antigo {
  color: #777777 !important;
  font-size: 13px !important;
  text-decoration: line-through !important;
  margin-bottom: 2px !important;
}
.preco-venda, 
.preco-promocional strong, 
.valor-por,
.preco-atual {
  font-family: "Oswald", sans-serif !important;
  color: #FFFFFF !important;
  font-size: 26px !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
}
.preco-parcela,
.preco-parcelamento {
  color: #888888 !important;
  font-size: 12px !important;
  font-family: "Inter", sans-serif !important;
  margin-top: 4px !important;
  display: block !important;
}
.preco-parcela strong {
  color: #CCCCCC !important;
}

/* 9. BOTÃO DE COMPRA DO CARD (COLADO NA BASE, ACABAMENTO DARK + GOLD HOVER) */
.botao-comprar,
.listagem .botao-comprar,
.acoes-produto .botao-comprar,
.btn-comprar,
.botao-principal,
.listagem-item .acoes-produto a {
  background: #222222 !important;
  color: #FFFFFF !important;
  font-family: "Oswald", sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  padding: 13px 16px !important;
  border-radius: 0 0 6px 6px !important;
  border: 1px solid #333333 !important;
  border-top: 1px solid #282828 !important;
  width: 100% !important;
  transition: all 0.3s ease !important;
  text-align: center !important;
  display: block !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
}

.listagem .listagem-item:hover .botao-comprar,
.produto-item:hover .botao-comprar,
.listagem-item:hover .acoes-produto a,
.botao-comprar:hover {
  background: linear-gradient(135deg, #F5A623 0%, #D4AF37 50%, #C8960C 100%) !important;
  color: #000000 !important;
  border-color: transparent !important;
  box-shadow: 0 4px 18px rgba(212, 175, 55, 0.45) !important;
}

/* 10. PÁGINA INTERNA DO PRODUTO (DETALHES) */
.pagina-produto .principal,
.detalhes-produto,
.produto-detalhe {
  background: #141414 !important;
  border: 1px solid #242424 !important;
  border-radius: 8px !important;
  padding: 30px !important;
}
.pagina-produto .nome-produto,
.produto-detalhe h1 {
  font-family: "Oswald", sans-serif !important;
  font-size: 34px !important;
  color: #FFFFFF !important;
  line-height: 1.15 !important;
}
.pagina-produto .comprar .botao-comprar,
.produto-detalhe .botao-comprar {
  background: linear-gradient(135deg, #F5A623 0%, #D4AF37 50%, #C8960C 100%) !important;
  color: #000000 !important;
  font-size: 18px !important;
  padding: 16px 40px !important;
  border-radius: 4px !important;
}

/* 11. RODAPÉ (FOOTER) */
#rodape, 
.rodape {
  background: #050505 !important;
  border-top: 1px solid #1a1a1a !important;
  padding: 60px 0 25px !important;
  margin-top: 70px !important;
}
#rodape .titulo,
.rodape h4,
.rodape .titulo-rodape {
  font-family: "Oswald", sans-serif !important;
  color: #FFFFFF !important;
  font-size: 20px !important;
  letter-spacing: 1.2px !important;
  margin-bottom: 18px !important;
  text-transform: uppercase !important;
}
#rodape li a,
.rodape a {
  color: #888888 !important;
  font-size: 14px !important;
  transition: color 0.3s ease !important;
}
#rodape li a:hover,
.rodape a:hover {
  color: #F5C842 !important;
}

/* 12. WHATSAPP FLUTUANTE */
.whatsapp-widget,
#whatsapp-float-li {
  position: fixed !important;
  bottom: 25px !important;
  right: 25px !important;
  background: #25D366 !important;
  color: #FFFFFF !important;
  width: 58px !important;
  height: 58px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 6px 22px rgba(37, 211, 102, 0.45) !important;
  z-index: 99999 !important;
  transition: transform 0.3s ease !important;
}
.whatsapp-widget:hover,
#whatsapp-float-li:hover {
  transform: scale(1.12) !important;
}

/* 13. RESPONSIVIDADE MOBILE */
@media (max-width: 768px) {
  .logo a img, .cabecalho-logo img { max-height: 60px !important; }
  .listagem .listagem-item, .produto-item { width: 100% !important; margin-bottom: 18px !important; }
  .secao-secundaria .titulo-secao { font-size: 24px !important; }
  .pagina-produto .nome-produto { font-size: 24px !important; }
}