/* XCheck - CSS Personalizado
   Colar em: Aparencia -> Editar tema -> CSS personalizado */

/* ================================================================
   CARROSSEL → GRID ESTÁTICO
   O JS no header extrai os li de produto direto para
   ul.produtos-carrossel; aqui apenas estilizamos o resultado.
   ================================================================ */

.produtos-carrossel {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 20px !important;
  overflow: visible !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Ocultar wrappers e controles do flexslider */
.produtos-carrossel .listagem-linha,
.produtos-carrossel .listagem-linha.flexslider,
.produtos-carrossel .flex-viewport,
.produtos-carrossel .flex-direction-nav,
.produtos-carrossel .flex-control-nav,
.flex-direction-nav {
  display: none !important;
}

/* Cada li de produto (filho direto, após extração JS): desktop */
.produtos-carrossel > li:not(.listagem-linha):not(.clone) {
  flex: 0 0 300px !important;
  width: 300px !important;
  max-width: 300px !important;
  float: none !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Mobile: 1 coluna */
@media (max-width: 767px) {
  .produtos-carrossel > li:not(.listagem-linha):not(.clone) {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  /* Centraliza o card dentro do li full-width */
  .produtos-carrossel > li:not(.listagem-linha):not(.clone) .listagem-item,
  .produtos-carrossel > li .listagem-item {
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* Página de categoria: alinhado à esquerda */
body.pagina-categoria #listagemProdutos .produtos-carrossel {
  justify-content: flex-start !important;
}

/* Padding top no titulo da vitrine (mobile) */
@media (max-width: 767px) {
  .titulo-categoria {
    margin-top: 32px !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    font-size: 1.15rem !important;
    line-height: 1.3 !important;
    word-spacing: normal !important;
    text-align: center !important;
    justify-content: center !important;
  }
  .titulo-categoria strong {
    letter-spacing: 0 !important;
    word-spacing: normal !important;
    text-transform: none !important;
    font-size: inherit !important;
  }

  /* Espaco entre o hero banner e a secao de produtos no mobile */
  #listagemProdutos {
    padding-top: 28px !important;
  }

  /* Ocultar setas do carrossel no mobile */
  .flex-direction-nav,
  .flex-prev,
  .flex-next,
  .produtos-carrossel .flex-direction-nav {
    display: none !important;
  }

  /* Botão comprar mobile: compacto */
  .listagem-item .acoes-produto-responsiva .tag-comprar {
    padding: 8px 16px !important;
    font-size: 0.82rem !important;
    line-height: 1.2 !important;
    height: auto !important;
    min-height: 0 !important;
  }
  .listagem-item .acoes-produto-responsiva .tag-comprar span,
  .listagem-item .acoes-produto-responsiva .tag-comprar i {
    font-size: 0.82rem !important;
    line-height: 1.2 !important;
  }
  .listagem-item .acoes-produto-responsiva {
    padding-top: 8px !important;
    padding-bottom: 12px !important;
  }
}

/* Ocultar botão "Voltar ao topo" */
.scrollToTop { display: none !important; }

/* Remover margin-bottom do #corpo */
#corpo { margin-bottom: 0 !important; }

/* Ocultar breadcrumbs */
.breadcrumbs { display: none !important; }

/* Ocultar título de página injetado pelo LI dentro de .caixa-sombreada */
.caixa-sombreada > h1.titulo,
.caixa-sombreada > h1.titulo.cor-secundaria {
  display: none !important;
}

/* Remover setas nativas de input[type="number"] */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}
input[type="number"] {
  -moz-appearance: textfield !important;
  appearance: textfield !important;
}

/* Ocultar "Sair" no menu mobile */
#xck-mob-sair { display: none !important; }

/* Botão WhatsApp na página de produto */
.produto-compartilhar li a[href*="whatsapp"],
.produto-compartilhar li a[href*="api.whatsapp"] {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: #25D366 !important;
  color: #fff !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  padding: 10px 18px !important;
  border-radius: 50px !important;
  text-decoration: none !important;
  box-shadow: 0 3px 10px rgba(37,211,102,0.3) !important;
  transition: background 0.18s, box-shadow 0.18s !important;
  white-space: nowrap !important;
}
.produto-compartilhar li a[href*="whatsapp"]:hover,
.produto-compartilhar li a[href*="api.whatsapp"]:hover {
  background: #1ebe5d !important;
  box-shadow: 0 5px 16px rgba(37,211,102,0.45) !important;
  text-decoration: none !important;
  color: #fff !important;
}
.produto-compartilhar li a[href*="whatsapp"] i,
.produto-compartilhar li a[href*="api.whatsapp"] i {
  font-size: 1.1rem !important;
  color: #fff !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
}
/* Adicionar texto ao lado do ícone via pseudo-elemento */
.produto-compartilhar li a[href*="whatsapp"]::after,
.produto-compartilhar li a[href*="api.whatsapp"]::after {
  content: "Falar pelo WhatsApp" !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
}

/* ================================================================
   Layout da página de categoria — sem estilo nos cards
   ================================================================ */

/* Ocultar sidebar e expandir conteúdo para 100% */
.secao-principal .coluna.span3,
.row-fluid .coluna.span3 { display: none !important; }
.secao-principal .conteudo.span9,
.row-fluid .conteudo.span9 {
  width: 100% !important;
  margin-left: 0 !important;
  float: none !important;
  box-sizing: border-box !important;
}

/* ul interna (wrapper dos cards): flex container 2 colunas */
#listagemProdutos .listagem-linha > ul,
.listagem .listagem-linha > ul {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 24px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
}
#listagemProdutos .listagem-linha > ul::before,
#listagemProdutos .listagem-linha > ul::after { display: none !important; }

/* li.span3: cada card limitado a 300px */
#listagemProdutos .listagem-linha > ul > li.span3,
.listagem .listagem-linha > ul > li.span3 {
  flex: 0 0 300px !important;
  width: 300px !important;
  max-width: 300px !important;
  float: none !important;
  margin-left: 0 !important;
  box-sizing: border-box !important;
}

/* Mobile: 1 coluna */
@media (max-width: 767px) {
  #listagemProdutos .listagem-linha > ul > li.span3,
  .listagem .listagem-linha > ul > li.span3 {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* Estilização leve dos cards de produto */
.listagem-item {
  overflow: hidden !important;
  max-width: 300px !important;
  width: 100% !important;
}

/* Produtos relacionados (página de produto): alinhamento à esquerda */
body.pagina-produto .listagem-linha > ul {
  justify-content: flex-start !important;
}
body.pagina-produto .listagem-linha > ul > li.span3 {
  flex: 0 0 300px !important;
  width: 300px !important;
  max-width: 300px !important;
}

/* Página de categoria: cards alinhados à esquerda */
body.pagina-categoria #listagemProdutos .listagem-linha > ul,
body.pagina-categoria .listagem .listagem-linha > ul {
  justify-content: flex-start !important;
}

/* Página de categoria: padding-top extra no botão comprar */
body.pagina-categoria .listagem-item .acoes-produto,
body.pagina-categoria .listagem-item .acoes-produto-responsiva {
  padding-top: 16px !important;
}
.listagem-item .nome-produto {
  line-height: 1.6 !important;
}
.listagem-item .acoes-produto .botao,
.listagem-item .acoes-produto .botao-comprar,
.listagem-item .acoes-produto-responsiva .tag-comprar {
  background: #F5C518 !important;
  color: #0a1e35 !important;
  border: none !important;
  border-radius: 50px !important;
  font-weight: 700 !important;
  padding: 10px 24px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
  text-decoration: none !important;
  font-size: 0.88rem !important;
  line-height: 1.2 !important;
  height: auto !important;
  min-height: 0 !important;
}
.listagem-item .acoes-produto-responsiva .tag-comprar span,
.listagem-item .acoes-produto-responsiva .tag-comprar i {
  font-size: 0.88rem !important;
  line-height: 1.2 !important;
}
.listagem-item .acoes-produto .botao:hover,
.listagem-item .acoes-produto .botao-comprar:hover,
.listagem-item .acoes-produto-responsiva .tag-comprar:hover {
  background: #e6b800 !important;
  color: #0a1e35 !important;
  text-decoration: none !important;
}
.listagem-item .acoes-produto,
.listagem-item .acoes-produto-responsiva {
  padding: 0 12px 16px !important;
  box-sizing: border-box !important;
  width: 100% !important;
}

/* Barra de cookies */
body.mostrarAvisoCookie #avisoCookies {
  background: #0a1e35 !important;
  border-top: 3px solid #29ABE2 !important;
  padding: 14px 0 !important;
}
#avisoCookies .conteiner {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 20px !important;
  flex-wrap: wrap !important;
}
#avisoCookies p {
  margin: 0 !important;
  flex: 1 1 auto !important;
  color: rgba(255,255,255,0.85) !important;
  font-size: 0.84rem !important;
}