/* ============================================
   BoloLoSW - CSS Customizado Final Corrigido
   Identidade Visual: #223039 (base) | #f89406 (destaque)
   ============================================ */

/* =========================================
   1. RESET E TIPOGRAFIA GLOBAL
   ========================================= */

body {
    font-family: 'Segoe UI', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 13px !important;
    color: #333333 !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5, h6,
.titulo, .titulo-pagina, .page-title {
font-size: 16px;
font-weight: 600;
color: #223039;
line-height: 1.3;

/* =======================================
   TIPOGRAFIA BASE — CORREÇÃO
   ======================================= */

p, span, li, a, label, input, textarea, select {
    font-size: 13px !important;
    line-height: 1.5 !important;
}
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #223039 !important;
    line-height: 1.3 !important;
}

/* =========================================
   2. CABECALHO
   ========================================= */

#cabecalho {
    background-color: #223039 !important;
}

#cabecalho .conteiner {
    background: transparent !important;
}

/* =======================================
   3. BARRA DE BUSCA - ARREDONDADA, ALINHADA E COM LARGURA LIMITADA
   ======================================= */

.busca.borda-alpha {
    background: transparent;
    border: none;
    box-shadow: none;
    position: relative;
    max-width: 500px;
    margin: 0 auto;
}

.busca.borda-alpha form {
    display: flex;
    align-items: center;
    position: relative;
    width: 100%;
}


.busca.borda-alpha form input[type="text"],
.busca.borda-alpha form input[type="search"] {
  border-radius: 100px !important;
  border: 2px solid rgba(255, 255, 255, 0.2) !important;
  padding: 10px 44px 10px 18px !important;
  font-size: 13px !important;
  background: #ffffff !important;
  height: 42px !important;
  width: 100% !important;
  color: #333333 !important;
  outline: none !important;
  box-sizing: border-box !important;
}

.busca.borda-alpha form input::placeholder {
  color: #999999 !important;
  font-size: 13px !important;
}

/* Botao de busca DENTRO do campo - posicionado corretamente */
.busca.borda-alpha form button {
  position: absolute !important;
  right: 3px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  border-radius: 100px !important;
  background-color: #f89406 !important;
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  width: 36px !important;
  height: 36px !important;
  border: none !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  min-width: 36px !important;
}

.busca.borda-alpha form button:hover {
  background: #e08505 !important;
}

/* ============================================
   4. MENU SUPERIOR
   ============================================ */
.menu.superior {
  background-color: #f89406 !important;
  border: none !important;
}

.menu.superior .titulo {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #ffffff !important;
  text-transform: none !important;
}

.menu.superior .nivel-um > li {
  border-left: none !important;
}

.menu.superior .nivel-um > li:hover {
  background-color: rgba(248, 148, 6, 0.15) !important;
  border-radius: 8px !important;
}

.menu.superior .nivel-um > li > a {
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}

.menu.superior .nivel-um > li:hover > a {
  color: #f89406 !important;
}

/* Submenus */
.menu.superior .nivel-um > li > ul {
  background: #ffffff !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 16px rgba(34, 48, 57, 0.12) !important;
  border: 1px solid rgba(34, 48, 57, 0.08) !important;
}

.menu.superior .nivel-um > li > ul a {
  color: #333333 !important;
  font-size: 13px !important;
}

.menu.superior .nivel-um > li > ul a:hover {
  color: #f89406 !important;
  background: rgba(248, 148, 6, 0.06) !important;
}

/* ============================================
   5. ACOES DO TOPO (DIREITA) - BRANCO / HOVER LARANJA
   ============================================ */
/* Forca todos os links e icones do topo a serem brancos */
#cabecalho .conteudo-topo a,
#cabecalho .conteudo-topo a span,
#cabecalho .conteudo-topo a i,
#cabecalho .conteudo-topo .superior a,
#cabecalho .conteudo-topo .superior span,
#cabecalho .conteudo-topo .superior i,
#cabecalho .conteudo-topo .carrinho a,
#cabecalho .conteudo-topo .carrinho a span,
#cabecalho .conteudo-topo .carrinho a i,
#cabecalho .conteudo-topo .minha-conta a,
#cabecalho .conteudo-topo .minha-conta a span,
#cabecalho .conteudo-topo .minha-conta a i,
#cabecalho .conteudo-topo .login a,
#cabecalho .conteudo-topo .login a span,
#cabecalho .conteudo-topo .login a i,
#cabecalho .conteudo-topo .desejos a,
#cabecalho .conteudo-topo .desejos a span,
#cabecalho .conteudo-topo .desejos a i,
#cabecalho .conteudo-topo .superior span.cor-principal,
#cabecalho .conteudo-topo .superior .cor-principal {
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}

/* Hover laranja */
#cabecalho .conteudo-topo a:hover,
#cabecalho .conteudo-topo a:hover span,
#cabecalho .conteudo-topo a:hover i,
#cabecalho .conteudo-topo .superior a:hover,
#cabecalho .conteudo-topo .superior a:hover span,
#cabecalho .conteudo-topo .superior a:hover i,
#cabecalho .conteudo-topo .carrinho a:hover,
#cabecalho .conteudo-topo .carrinho a:hover span,
#cabecalho .conteudo-topo .carrinho a:hover i,
#cabecalho .conteudo-topo .minha-conta a:hover,
#cabecalho .conteudo-topo .minha-conta a:hover span,
#cabecalho .conteudo-topo .minha-conta a:hover i,
#cabecalho .conteudo-topo .login a:hover,
#cabecalho .conteudo-topo .desejos a:hover {
  color: #f89406 !important;
}

#cabecalho .conteudo-topo .carrinho {
  border-width: 0px !important;
}

/* ============================================
   6. TITULOS DE SECAO (LANCAMENTOS, MAIS VENDIDOS, PRODUTOS RELACIONADOS)
   ============================================ */
.titulo-secao,
.section-title,
.titulo-categoria,
.categoria-titulo,
.titulo-lista,
.secao-principal .titulo,
.titulo-pagina,
.titulo-produto-relacionado,
.produtos-relacionados .titulo,
.mais-como-esse .titulo,
.relacionados .titulo {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #223039 !important;
  text-align: center !important;
  margin-bottom: 24px !important;
  padding-bottom: 12px !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  position: relative !important;
  display: block !important;
  width: 100% !important;
}

.titulo-secao::after,
.section-title::after,
.secao-principal .titulo::after,
.titulo-pagina::after,
.produtos-relacionados .titulo::after,
.mais-como-esse .titulo::after,
.relacionados .titulo::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 60px !important;
  height: 2px !important;
  background: #f89406 !important;
}

/* Fix para titulo quebrado de produtos relacionados */
.produtos-relacionados,
.mais-como-esse,
.relacionados,
.secao-relacionados {
  clear: both !important;
  display: block !important;
  width: 100% !important;
}

.produtos-relacionados .listagem,
.mais-como-esse .listagem,
.relacionados .listagem {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}

.produtos-relacionados .listagem-item,
.mais-como-esse .listagem-item,
.relacionados .listagem-item {
  flex: 0 0 calc(25% - 10px) !important;
  max-width: calc(25% - 10px) !important;
}

@media only screen and (max-width: 991px) {
  .produtos-relacionados .listagem-item,
  .mais-como-esse .listagem-item,
  .relacionados .listagem-item {
    flex: 0 0 calc(33.333% - 10px) !important;
    max-width: calc(33.333% - 10px) !important;
  }
}

@media only screen and (max-width: 767px) {
  .produtos-relacionados .listagem-item,
  .mais-como-esse .listagem-item,
  .relacionados .listagem-item {
    flex: 0 0 calc(50% - 10px) !important;
    max-width: calc(50% - 10px) !important;
  }
}

/* ============================================
   7. MENU LATERAL ESQUERDO - MODERNO
   ============================================ */
.menu-lateral,
.categoria-lista,
.filtro,
.sidebar .menu {
  background: #ffffff !important;
  border-radius: 8px !important;
  box-shadow: 0 2px 8px rgba(34, 48, 57, 0.08) !important;
  padding: 0 !important;
  border: 1px solid rgba(34, 48, 57, 0.06) !important;
  margin-bottom: 16px !important;
  overflow: hidden !important;
}

.menu-lateral ul,
.categoria-lista ul,
.filtro ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.menu-lateral ul li,
.categoria-lista ul li,
.filtro ul li {
  border-bottom: 1px solid rgba(34, 48, 57, 0.06) !important;
  margin: 0 !important;
}

.menu-lateral ul li:last-child,
.categoria-lista ul li:last-child,
.filtro ul li:last-child {
  border-bottom: none !important;
}

.menu-lateral ul li a,
.categoria-lista ul li a,
.filtro ul li a {
  color: #333333 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 12px 16px !important;
  display: block !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
  border-left: 3px solid transparent !important;
}

.menu-lateral ul li a:hover,
.categoria-lista ul li a:hover,
.filtro ul li a:hover {
  background: rgba(248, 148, 6, 0.06) !important;
  color: #f89406 !important;
  border-left: 3px solid #f89406 !important;
  padding-left: 20px !important;
}

.menu-lateral ul li.ativo a,
.categoria-lista ul li.ativo a {
  background: #f89406 !important;
  color: #ffffff !important;
  border-left: 3px solid #f89406 !important;
  font-weight: 600 !important;
}

/* Newsletter no menu lateral */
.menu-lateral .newsletter,
.menu-lateral .assinar,
.newsletter-lateral {
  padding: 16px !important;
}

.menu-lateral .newsletter p,
.menu-lateral .assinar p {
  font-size: 12px !important;
  color: #666666 !important;
  margin-bottom: 10px !important;
}

.menu-lateral .newsletter input,
.menu-lateral .assinar input {
  border-radius: 100px !important;
  border: 1px solid rgba(34, 48, 57, 0.15) !important;
  padding: 8px 14px !important;
  font-size: 12px !important;
  height: 38px !important;
}

.menu-lateral .newsletter button,
.menu-lateral .assinar button {
  border-radius: 100px !important;
  background: #f89406 !important;
  color: #ffffff !important;
  border: none !important;
  width: 38px !important;
  height: 38px !important;
}

/* ============================================
   8. GRID DE PRODUTOS - GAP MAXIMO 10px
   ============================================ */
.listagem {
  gap: 10px !important;
}

.listagem .listagem-item {
  margin-bottom: 10px !important;
  background: #ffffff !important;
  border-radius: 8px !important;
  box-shadow: 0 1px 4px rgba(34, 48, 57, 0.06) !important;
  border: 1px solid rgba(34, 48, 57, 0.04) !important;
  overflow: hidden !important;
  transition: all 0.25s ease !important;
}

.listagem .listagem-item:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 4px 12px rgba(34, 48, 57, 0.1) !important;
  border-color: rgba(248, 148, 6, 0.15) !important;
}

/* ============================================
   9. INFORMACOES DO PRODUTO - TUDO A ESQUERDA
   ============================================ */
.listagem .listagem-item .info-produto {
  padding: 5px !important;
  text-align: left !important;
}

/* Imagem do produto */
.listagem .listagem-item .imagem-produto,
.listagem .listagem-item .foto-produto {
  overflow: hidden !important;
}

.listagem .listagem-item .imagem-produto img,
.listagem .listagem-item .foto-produto img {
  transition: transform 0.3s ease !important;
}

.listagem .listagem-item:hover .imagem-produto img,
.listagem .listagem-item:hover .foto-produto img {
  transform: scale(1.03) !important;
}

/* Titulo do produto */
.listagem .listagem-item .nome-produto,
.listagem .listagem-item .info-produto a.nome-produto,
.listagem .listagem-item .info-produto .nome-produto {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #223039 !important;
  text-align: left !important;
  margin-bottom: 6px !important;
  line-height: 1.3 !important;
  display: block !important;
}

/* Preco principal */
.listagem .listagem-item .preco-produto,
.listagem .listagem-item .info-produto .preco-produto,
.listagem .listagem-item .preco,
.listagem .listagem-item .info-produto .preco {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #223039 !important;
  text-align: left !important;
  margin-bottom: 2px !important;
}

/* Preco antigo / de-por */
.listagem .listagem-item .preco-produto .preco-antigo,
.listagem .listagem-item .info-produto .de-por .de,
.listagem .listagem-item .preco-antigo,
.listagem .listagem-item .preco-de,
.listagem .listagem-item .de-por .de {
  font-size: 12px !important;
  color: #757575 !important;
  text-decoration: line-through !important;
  font-weight: 400 !important;
}

/* "A partir de" */
.listagem .listagem-item .a-partir-de,
.listagem .listagem-item .info-produto .a-partir-de {
  font-size: 12px !important;
  color: #223039 !important;
  text-align: left !important;
  margin-bottom: 2px !important;
}

/* Parcelamento - TEXTO REDUZIDO */
.listagem .listagem-item .parcelamento-produto,
.listagem .listagem-item .info-produto .parcelamento,
.listagem .listagem-item .parcelamento,
.listagem .listagem-item .parcelas,
.listagem .listagem-item .info-produto .parcelas {
  font-size: 10px !important;
  color: #777777 !important;
  text-align: left !important;
  margin-bottom: 4px !important;
  line-height: 1.2 !important;
}

/* Preco via Pix - TEXTO REDUZIDO */
.listagem .listagem-item .preco-pix,
.listagem .listagem-item .info-produto .preco-pix,
.listagem .listagem-item .pix,
.listagem .listagem-item .info-produto .pix {
  font-size: 10px !important;
  color: #0aa132 !important;
  font-weight: 600 !important;
  text-align: left !important;
  margin-bottom: 8px !important;
}

/* ============================================
   10. BOTAO COMPRAR - 100% ARREDONDADO E DENTRO DA CAIXA
   ============================================ */
.listagem .listagem-item .acoes-produto,
.listagem .listagem-item .acoes-produto-responsiva {
  padding: 0 12px 12px 12px !important;
  margin: 0 !important;
}

.listagem .listagem-item .acoes-produto a,
.listagem .listagem-item .acoes-produto-responsiva a,
.botao.botao-comprar.principal.grande,
.botao-comprar-ajax,
a.botao.botao-comprar.principal.grande.botao-comprar-ajax,
.listagem .listagem-item .acoes-produto .botao,
.listagem .listagem-item .acoes-produto-responsiva .botao {
  width: 100% !important;
  border-radius: 100px !important;
  background: #f89406 !important;
  color: #ffffff !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  padding: 12px 16px !important;
  border: none !important;
  text-align: center !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
  box-shadow: 0 2px 6px rgba(248, 148, 6, 0.25) !important;
  display: block !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
}

.listagem .listagem-item .acoes-produto a:hover,
.botao.botao-comprar.principal.grande:hover,
a.botao.botao-comprar.principal.grande.botao-comprar-ajax:hover {
  background: #223039 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(34, 48, 57, 0.2) !important;
}

/* Botao comprar desabilitado */
.botao.botao-comprar:disabled,
.botao-comprar-ajax:disabled {
  background: #cccccc !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
}

/* ============================================
   11. BADGE DE DESCONTO
   ============================================ */

.bandeiras-produto {
    position: absolute;
    top: 0;
    right: 0;
    left: unset;
}
.bandeiras-produto span.bandeira-promocao {
    border: none;
    box-shadow: none;
    font-size: 17px;
    border-radius: 50px;
    margin-top: 10px;
    margin-right: 0;
    width: 60px;
    height: 30px;
    font-weight: 400;
    padding: 7px;
    padding-left: 7px;
    text-align: center;
}
.menu-simples li.active a {background-color: #00ff6e;}
.badge-desconto,
.tag-desconto,
.etiqueta-desconto,
.desconto-badge,
.listagem .listagem-item .tag-off,
.listagem .listagem-item .badge-off,
.listagem .listagem-item .desconto {
  border-radius: 100px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 4px 10px !important;
  text-transform: uppercase !important;
  background: #223039 !important;
  color: #ffffff !important;
}

/* ============================================
   12. RODAPE
   ============================================ */
#rodape {
  background-color: #223039 !important;
  color: #ffffff !important;
  padding: 40px 0 20px !important;
  margin-top: 40px !important;
}

#rodape .conteiner {
  background: transparent !important;
}

#rodape * {
  color: rgba(255, 255, 255, 0.85) !important;
  font-size: 13px !important;
}

#rodape h4,
#rodape .titulo,
#rodape .title {
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  margin-bottom: 16px !important;
}

#rodape a {
  color: rgba(255, 255, 255, 0.7) !important;
  transition: all 0.2s ease !important;
}

#rodape a:hover {
  color: #f89406 !important;
}

/* Pagamentos e selos */
#rodape .pagamento-selos .titulo {
  color: #ffffff !important;
}

#rodape .selos img,
#rodape .pagamento-selos img {
  filter: brightness(0) invert(1) !important;
  opacity: 0.7 !important;
}

/* Redes sociais rodape */
#rodape .lista-redes i {
  font-size: 20px !important;
  transition: all 0.2s ease !important;
}

#rodape .lista-redes i:hover {
  color: #f89406 !important;
  transform: scale(1.1) !important;
}

/* ============================================
   13. BREADCRUMB
   ============================================ */
.breadcrumb,
.breadcrumbs {
  font-size: 12px !important;
  color: #888888 !important;
  margin-bottom: 16px !important;
}

.breadcrumb a,
.breadcrumbs a {
  color: #223039 !important;
  font-size: 12px !important;
}

.breadcrumb a:hover,
.breadcrumbs a:hover {
  color: #f89406 !important;
}

/* ============================================
   14. PAGINACAO
   ============================================ */
.paginacao,
.pagination {
  gap: 6px !important;
}

.paginacao a,
.pagination a,
.paginacao span,
.pagination span {
  border-radius: 100px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 8px 14px !important;
  border: 1px solid rgba(34, 48, 57, 0.15) !important;
  color: #223039 !important;
  transition: all 0.2s ease !important;
}

.paginacao a:hover,
.pagination a:hover {
  background: #f89406 !important;
  color: #ffffff !important;
  border-color: #f89406 !important;
}

.paginacao .active,
.pagination .current,
.paginacao .ativo {
  background: #223039 !important;
  color: #ffffff !important;
  border-color: #223039 !important;
}

/* ============================================
   15. BARRA INICIAL (TOPO)
   ============================================ */
.barra-inicial {
  background: #223039 !important;
  border-bottom: 1px solid rgba(255,255,255,0.1) !important;
}

.barra-inicial .conteiner {
  background: transparent !important;
}

.barra-inicial .canais-contato {
  color: rgba(255,255,255,0.8) !important;
  font-size: 12px !important;
}

.barra-inicial .lista-redes i {
  background-color: rgba(255,255,255,0.1) !important;
  border-radius: 20px !important;
  color: #ffffff !important;
  height: 24px !important;
  width: 24px !important;
  line-height: 23px !important;
  transition: all 0.2s ease !important;
}

.barra-inicial .lista-redes i:hover {
  background-color: #f89406 !important;
  color: #ffffff !important;
  transform: scale(1.1) !important;
}

/* ============================================
   16. LOGO
   ============================================ */
.logo img {
  max-height: 60px !important;
  transition: all 0.2s ease !important;
}

/* ============================================
   17. SCROLLBAR
   ============================================ */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: #223039;
  border-radius: 100px;
}

::-webkit-scrollbar-thumb:hover {
  background: #f89406;
}

/* ============================================
   18. RESPONSIVIDADE MOBILE
   ============================================ */
@media only screen and (max-width: 767px) {
  h1, h2, h3, h4, h5, h6,
  .titulo, .titulo-pagina {
    font-size: 15px !important;
  }

  .listagem .listagem-item .nome-produto {
    font-size: 12px !important;
  }

  .listagem .listagem-item .preco-produto {
    font-size: 14px !important;
  }

  .listagem .listagem-item .acoes-produto a,
  .botao.botao-comprar.principal.grande {
    font-size: 12px !important;
    padding: 10px 14px !important;
  }

  .menu-lateral,
  .categoria-lista {
    margin-bottom: 20px !important;
  }

  .menu.superior .titulo {
    font-size: 12px !important;
  }

  .busca.borda-alpha {
    max-width: 100% !important;
  }

  .produtos-relacionados .listagem-item,
  .mais-como-esse .listagem-item,
  .relacionados .listagem-item {
    flex: 0 0 calc(50% - 10px) !important;
    max-width: calc(50% - 10px) !important;
  }
}

/* ============================================
   19. PAGINA DE PRODUTO
   ============================================ */
.pagina-produto .nome-produto {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #223039 !important;
}

.pagina-produto .preco-produto {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #f89406 !important;
}

.pagina-produto .botao.botao-comprar.principal.grande {
  border-radius: 100px !important;
  background: #f89406 !important;
  font-size: 14px !important;
  padding: 14px 32px !important;
  border: none !important;
}

.pagina-produto .botao.botao-comprar.principal.grande:hover {
  background: #223039 !important;
}

.parcelas-produto .text-parcelas {
  font-size: 14px !important;
  color: #f89406 !important;
  font-weight: 600 !important;
}