/* CF LABS - CSS v8 2026-04-29T20:21:27.387Z */
/* Mobile: corrige o grid de produtos com seletor LI.span3 correto */

/* ============ FUNDO BRANCO ============ */
html, body {
  background-color: #ffffff !important;
  background: #ffffff !important;
  margin: 0 !important;
  padding: 0 !important;
}
.conteiner-principal,
#corpo,
#conteiner,
#wrapper { background-color: #ffffff !important; }

/* ============ FONTE GLOBAL ============ */
body, .listagem-item, .nome-produto, .preco-produto, .botao, .titulo,
.info-produto, .cabecalho, .institucional, .newsletter,
input, button, select, textarea {
  font-family: Montserrat, Arial, sans-serif !important;
}

/* ============ BARRA TOPO ============ */
.barra-inicial.fundo-secundario {
  background-color: #2AC63E !important;
  color: #fff !important;
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 8px 0;
}
.barra-inicial .canais-contato a,
.barra-inicial .canais-contato strong,
.barra-inicial .canais-contato span,
.barra-inicial .lista-redes a,
.barra-inicial .lista-redes i { color: #ffffff !important; }

/* ============ CABECALHO ============ */
#cabecalho {
  background-color: #ffffff !important;
  border-bottom: 2px solid #e8e8e8;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
#cabecalho .logo img {
  max-height: 70px !important;
  max-width: 100% !important;
  object-fit: contain !important;
  filter: brightness(0) !important;
}
#cabecalho .conta-cliente,
#cabecalho .conta-cliente a,
#cabecalho .conta-cliente strong,
#cabecalho .carrinho,
#cabecalho .carrinho a,
#cabecalho .carrinho strong { color: #222222 !important; }
#cabecalho .busca input.ui-autocomplete-input {
  border: 2px solid #e0e0e0 !important;
  border-radius: 25px 0 0 25px !important;
  padding: 9px 16px !important;
  font-size: 13px;
  background: #f8f8f8 !important;
  color: #333 !important;
}
#cabecalho .botao.botao-busca {
  border-radius: 0 25px 25px 0 !important;
  background-color: #2AC63E !important;
  border: none !important;
  color: #fff !important;
  padding: 9px 18px !important;
}

/* ============ MENU SUPERIOR ============ */
.menu.superior,
#cabecalho .menu.superior,
body .menu.superior {
  background-color: #111111 !important;
  border-bottom: 3px solid #2AC63E !important;
}
.menu.superior .nivel-um > li,
#cabecalho .menu.superior .nivel-um > li {
  border: none !important;
  background: transparent !important;
}
.menu.superior .nivel-um > li > a,
.menu.superior .nivel-um > li > a strong,
.menu.superior strong.cor-secundaria,
.menu.superior strong.titulo,
.menu.superior .titulo,
.menu.superior .cor-secundaria,
#cabecalho .menu.superior strong {
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-decoration: none !important;
  background: transparent !important;
  -webkit-text-fill-color: #ffffff !important;
}
.menu.superior .nivel-um > li > a {
  padding: 14px 20px !important;
  display: block !important;
}
.menu.superior .nivel-um > li:hover { background-color: #2AC63E !important; }

/* ============ CARDS DE PRODUTO (DESKTOP) ============ */
.listagem-item {
  background: #ffffff !important;
  border: 1px solid #e5e5e5 !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  margin-bottom: 16px !important;
  color: #222222 !important;
}
.listagem-item:hover { box-shadow: 0 6px 20px rgba(0,0,0,0.13) !important; }
.listagem-item .imagem-produto { overflow: hidden; background: #f9f9f9 !important; }
.listagem-item .imagem-produto img.imagem-principal { width: 100%; display: block; }
.listagem-item .info-produto .nome-produto,
.listagem-item .nome-produto {
  font-size: 13px; font-weight: 600; color: #222222 !important;
  line-height: 1.4; text-align: center; margin-bottom: 8px; text-decoration: none; display: block;
}
.listagem-item .info-produto .nome-produto:hover { color: #2AC63E !important; }
.listagem-item .preco-produto { text-align: center !important; padding: 10px !important; }
.listagem-item .preco-produto .preco-promocional,
.listagem-item .preco-produto .preco-promocional.cor-principal {
  font-size: 18px !important; font-weight: 800 !important; color: #2AC63E !important;
  display: block !important; margin-bottom: 4px;
}
.listagem-item .preco-produto .preco-venda { font-size: 12px; color: #999 !important; text-decoration: line-through; }
.listagem-item .preco-produto .preco-parcela,
.listagem-item .preco-produto .preco-parcela strong,
.listagem-item .preco-produto .preco-parcela span {
  font-size: 12px !important; color: #555 !important; display: block; font-weight: 400;
}
.listagem-item .desconto-a-vista,
span.desconto-a-vista,
.desconto-a-vista {
  background-color: #2AC63E !important; color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-size: 11px !important; font-weight: 700 !important;
  border-radius: 14px !important; padding: 6px 14px !important;
  display: inline-block !important; margin-top: 6px !important;
  text-transform: uppercase; letter-spacing: 0.3px;
}
.listagem-item .acoes-produto .botao.botao-comprar.principal,
.listagem-item .acoes-produto .botao.principal,
.listagem-item .acoes-produto-responsiva .botao.botao-comprar.principal,
.listagem-item .acoes-produto-responsiva .botao.principal {
  background-color: #2AC63E !important; color: #ffffff !important;
  border: none !important; border-radius: 25px !important;
  padding: 9px 18px !important; font-weight: 700 !important; font-size: 12px !important;
  text-transform: uppercase; letter-spacing: 0.5px;
  display: block !important; width: 100% !important; text-align: center !important;
}

/* ============ TITULO CATEGORIA ============ */
.titulo-categoria, .titulo-secao {
  font-size: 20px !important; font-weight: 800 !important;
  text-transform: uppercase; letter-spacing: 1px;
  border-left: 4px solid #2AC63E !important;
  padding: 12px 16px !important; margin-bottom: 20px;
  background: #f8f8f8 !important; border-radius: 0 6px 6px 0;
  color: #222 !important;
}

/* ============ NEWSLETTER ============ */
.componente.newsletter { background: #111 !important; border-radius: 10px; border: none; padding: 16px; }
.componente.newsletter .titulo,
.componente.newsletter .titulo strong { color: #fff !important; font-weight: 700; font-size: 14px; text-transform: uppercase; }
.componente.newsletter .botao-input { background-color: #2AC63E !important; border: none !important; }

/* ============ RODAPE ============ */
.institucional.fundo-secundario { background-color: #111111 !important; padding: 40px 0 20px !important; }
.institucional .titulo,
.institucional .titulo strong,
.institucional .links-rodape .titulo,
.pagamento-selos .titulo {
  color: #ffffff !important; font-weight: 700; font-size: 13px;
  text-transform: uppercase; letter-spacing: 1px; margin-bottom: 12px; display: block;
  border-bottom: 2px solid #2AC63E; padding-bottom: 8px;
}
.institucional a, .institucional li a { color: #aaaaaa !important; font-size: 13px; text-decoration: none; }
.redes-sociais .lista-redes a {
  background: #2AC63E !important; border-radius: 50% !important; padding: 8px;
  color: #fff !important; margin-right: 6px; display: inline-flex;
  width: 36px; height: 36px; align-items: center; justify-content: center;
}

/* ============ ATALHOS MOBILE ============ */
.atalhos-mobile.fundo-secundario,
.atalhos-mobile {
  background-color: #2AC63E !important;
  padding: 8px 0 !important;
}
.atalhos-mobile ul {
  display: flex !important;
  justify-content: space-around !important;
  align-items: center !important;
  margin: 0 !important; padding: 0 !important; list-style: none !important;
}
.atalhos-mobile li { flex: 1 !important; text-align: center !important; margin: 0 !important; padding: 0 !important; }
.atalhos-mobile a {
  color: #ffffff !important; font-size: 20px !important;
  display: inline-block !important; padding: 6px !important; text-decoration: none !important;
}

/* ====================================================
   MOBILE - GRID DE PRODUTOS CORRETO
   ==================================================== */

/* ===== v9 MOBILE FIX 2026-04-29T20:41:41.870Z ===== */
/* ===== v10 MOBILE FIX - LOGO STICKY + GRID UNIFORME 2026-04-29T20:50:42.455Z ===== */
/* ===== v11 MOBILE PRO 2026-04-29T21:01:06.451Z - logo fixed + grid uniforme ===== */
/* ===== v12 MOBILE FINAL 2026-04-29T21:09:33.327Z - HEADER FIXED + 1 PRODUTO POR LINHA ===== */
/* ===== v13 MOBILE 2026-04-29T21:19:57.584Z - LOGO NÃO CORTA + BANNERS SÓ ROTATIVO + CARRINHO ABAIXO ===== */
/* ===== v14 MOBILE 2026-04-29T21:23:03.329Z - LOGO CENTRO PERFEITO ===== */
@media (max-width: 991px) {
  html body { background-color: #ffffff !important; overflow-x: hidden !important; }
}

@media (max-width: 768px) {
  /* CACHE BUSTER v14-1777497783329 */

  html, html body {
    background-color: #ffffff !important;
    overflow-x: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 13px !important;
  }
  html body {
    padding-top: 110px !important;
  }

  html body .conteiner-principal,
  html body .container,
  html body .row-fluid {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
    box-sizing: border-box !important;
  }

  /* ============ HEADER FIXED 100px - LOGO CENTRO PERFEITO ============ */
  html body #cabecalho,
  body #cabecalho {
    background: #ffffff !important;
    background-color: #ffffff !important;
    padding: 0 !important;
    margin: 0 !important;
    text-align: center !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    z-index: 99999 !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.15) !important;
    border-bottom: 1px solid #e6e6e6 !important;
    box-sizing: border-box !important;
    transform: none !important;
    height: 100px !important;
    min-height: 100px !important;
    max-height: 100px !important;
    overflow: visible !important;
    display: block !important;
    line-height: 100px !important;
  }

  /* Esconder TUDO no header exceto o logo */
  html body #cabecalho .atalhos-mobile,
  html body #cabecalho .atalho-menu,
  html body #cabecalho .superior .span8,
  html body #cabecalho .menu,
  html body #cabecalho .barra-superior,
  html body #cabecalho form.busca,
  html body #cabecalho .busca,
  html body #cabecalho .carrinho,
  html body #cabecalho .carrinho.vazio,
  html body #cabecalho .menu-user,
  html body #cabecalho .span4.hidden-phone {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    width: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    left: -9999px !important;
  }

  html body .carrinho.vazio,
  html body .span4.hidden-phone .carrinho,
  html body div.carrinho-interno-ajax,
  html body .span4.hidden-phone {
    display: none !important;
    visibility: hidden !important;
  }

  html body #cabecalho > .conteiner,
  html body #cabecalho .conteiner {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 auto !important;
    display: block !important;
    text-align: center !important;
    height: 100% !important;
    line-height: 100px !important;
  }

  html body #cabecalho .conteiner > .row-fluid,
  html body #cabecalho > .conteiner > .row-fluid {
    display: block !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    text-align: center !important;
    height: 100% !important;
    line-height: 100px !important;
  }

  html body #cabecalho .superior .span4,
  html body #cabecalho .superior .span3,
  html body #cabecalho .row-fluid > div:not(.span4.hidden-phone) {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    margin: 0 auto !important;
    padding: 0 !important;
    display: block !important;
    text-align: center !important;
    box-sizing: border-box !important;
    height: 100% !important;
    line-height: 100px !important;
  }

  /* LOGO H1 - centro absoluto */
  html body #cabecalho h1.logo,
  html body #cabecalho .logo,
  html body h1.logo.cor-secundaria {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    text-align: center !important;
    margin: 0 auto !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    line-height: 100px !important;
    height: 100px !important;
    overflow: visible !important;
    position: relative !important;
  }

  html body #cabecalho h1.logo a,
  html body #cabecalho .logo a {
    display: inline-block !important;
    margin: 0 auto !important;
    text-align: center !important;
    width: auto !important;
    line-height: 100px !important;
    padding: 0 !important;
    height: 100px !important;
    vertical-align: middle !important;
  }

  html body #cabecalho h1.logo img,
  html body #cabecalho .logo img,
  html body h1.logo img {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    max-width: 130px !important;
    max-height: 80px !important;
    width: auto !important;
    height: auto !important;
    filter: brightness(0) !important;
    -webkit-filter: brightness(0) !important;
    margin: 0 auto !important;
    float: none !important;
    object-fit: contain !important;
    vertical-align: middle !important;
  }

  /* ============ MENU PRINCIPAL ============ */
  html body #barraSuperior,
  html body .menu-principal,
  html body nav.menu {
    background: #000000 !important;
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    white-space: nowrap !important;
    position: relative !important;
    margin: 0 !important;
  }
  html body #barraSuperior ul,
  html body .menu-principal ul {
    display: inline-flex !important;
    flex-wrap: nowrap !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
  }
  html body #barraSuperior a,
  html body .menu-principal a,
  html body #barraSuperior strong,
  html body .menu-principal strong,
  html body #barraSuperior .cor-secundaria {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    padding: 12px 14px !important;
    display: inline-block !important;
  }

  /* ============ BANNERS - APENAS ROTATIVO PRINCIPAL ============ */
  html body .row-fluid.banner.mini-banner,
  html body .banner.mini-banner,
  html body .banner.lateral,
  html body .row-fluid.banner.lateral {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
  }
  html body .secao-banners > .row-fluid.banner.mini-banner,
  html body .secao-banners > .banner.mini-banner,
  html body .secao-banners > .banner.lateral {
    display: none !important;
  }

  /* Manter banner principal rotativo */
  html body .row-fluid.banner.cheio,
  html body .banner.cheio,
  html body #banner-rotativo,
  html body .destaque-rotativo {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 8px auto !important;
    padding: 0 !important;
    visibility: visible !important;
  }
  html body .banner.cheio img,
  html body #banner-rotativo img,
  html body .destaque-rotativo img,
  html body .banner-rotativo img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto !important;
  }

  /* ============ LISTAGEM PRODUTOS - 1 POR LINHA ============ */
  html body #listagemProdutos {
    padding: 8px 8px !important;
    margin: 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    line-height: normal !important;
  }
  html body #listagemProdutos > ul {
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
    display: block !important;
  }
  html body #listagemProdutos li.listagem-linha {
    display: block !important;
    width: 100% !important;
    list-style: none !important;
    margin: 0 0 12px 0 !important;
    padding: 0 !important;
    float: none !important;
  }
  html body #listagemProdutos li.listagem-linha > ul,
  html body #listagemProdutos ul.row-fluid,
  html body .listagem-linha > ul.row-fluid,
  html body .listagem-linha ul.row-fluid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    width: 100% !important;
    max-width: 100% !important;
    align-items: stretch !important;
    justify-items: stretch !important;
    box-sizing: border-box !important;
  }
  html body #listagemProdutos li.span3,
  html body .listagem-linha li.span3,
  html body ul.row-fluid > li.span3 {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    display: block !important;
    list-style: none !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
    line-height: normal !important;
  }
  html body .listagem-item,
  html body li.span3 .listagem-item {
    background: #ffffff !important;
    border: 1px solid #e6e6e6 !important;
    border-radius: 8px !important;
    padding: 14px !important;
    margin: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    position: relative !important;
    box-sizing: border-box !important;
    align-self: stretch !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06) !important;
    line-height: normal !important;
  }
  html body .listagem-item .imagem-produto {
    width: 100% !important;
    height: 220px !important;
    text-align: center !important;
    margin: 0 0 10px 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    flex: 0 0 220px !important;
  }
  html body .listagem-item .imagem-produto img,
  html body .listagem-item img.imagem-principal {
    max-width: 90% !important;
    max-height: 220px !important;
    width: auto !important;
    height: auto !important;
    margin: 0 auto !important;
    display: block !important;
    object-fit: contain !important;
  }
  html body .listagem-item .info-produto {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    align-items: stretch !important;
  }
  html body .listagem-item .nome-produto,
  html body .listagem-item a.nome-produto {
    font-size: 14px !important;
    line-height: 1.35 !important;
    margin: 0 0 8px 0 !important;
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
    text-align: center !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
  }
  html body .listagem-item .preco-produto,
  html body .listagem-item .preco-produto.destaque-avista {
    margin: 6px 0 !important;
    text-align: center !important;
    width: 100% !important;
    min-height: 0 !important;
  }
  html body .listagem-item .preco-promocional,
  html body .listagem-item strong.preco-promocional {
    font-size: 20px !important;
    font-weight: bold !important;
    color: #1eb74f !important;
    -webkit-text-fill-color: #1eb74f !important;
    display: block !important;
    text-align: center !important;
  }
  html body .listagem-item .preco-parcela {
    font-size: 12px !important;
    display: block !important;
    margin: 2px 0 !important;
    color: #555 !important;
    -webkit-text-fill-color: #555 !important;
    text-align: center !important;
  }
  html body .listagem-item .desconto-a-vista {
    display: inline-block !important;
    background: #1eb74f !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    padding: 5px 12px !important;
    border-radius: 4px !important;
    font-size: 11px !important;
    margin: 6px auto !important;
    line-height: 1.2 !important;
    text-align: center !important;
  }
  html body .listagem-item .desconto-a-vista *,
  html body .listagem-item .desconto-a-vista .titulo,
  html body .listagem-item .desconto-a-vista strong {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
  }
  html body .listagem-item .acoes-produto.hidden-phone {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    width: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    left: -9999px !important;
  }
  html body .listagem-item .acoes-produto-responsiva,
  html body .listagem-item .acoes-produto-responsiva.visible-phone {
    display: block !important;
    width: 100% !important;
    margin: 10px 0 0 0 !important;
    padding: 0 !important;
    position: relative !important;
    clear: both !important;
    flex: 0 0 auto !important;
    visibility: visible !important;
  }
  html body .listagem-item a.tag-comprar,
  html body .listagem-item a.tag-comprar.fundo-principal {
    display: block !important;
    width: 100% !important;
    background: #1eb74f !important;
    background-color: #1eb74f !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    text-align: center !important;
    padding: 12px 8px !important;
    border-radius: 6px !important;
    font-size: 14px !important;
    font-weight: bold !important;
    text-decoration: none !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    height: auto !important;
    line-height: 1.3 !important;
    visibility: visible !important;
  }
  html body .listagem-item a.tag-comprar .titulo,
  html body .listagem-item a.tag-comprar i {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
  }
  html body .listagem-item .bandeiras-produto {
    position: absolute !important;
    top: 10px !important;
    left: 10px !important;
    z-index: 2 !important;
  }

  html body #rodape,
  html body .rodape {
    background: #ffffff !important;
    color: #000000 !important;
    padding: 16px 8px !important;
    text-align: center !important;
    line-height: normal !important;
  }
  html body #rodape * {
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
  }
  html body #rodape .row-fluid > div {
    width: 100% !important;
    float: none !important;
    margin: 8px 0 !important;
  }

  html body .whatsapp,
  html body .floating-whatsapp,
  html body [class*=whatsapp-button] {
    z-index: 100000 !important;
  }
}