/* ============================================================
   RUNA TECNOLOGIAS — CSS COMPLETO v4
   Tema: Galeria (Loja Integrada)
   Última atualização: 2026-02-27
   Coloque em: Personalize sua loja > Editar CSS
   ============================================================ */


/* ============================================================
   1. CARROSSEL DE CATEGORIAS CIRCULAR (customizado)
   ============================================================ */

.categorias-runa {
  padding: 30px 10px 20px;
  text-align: center;
  font-family: inherit;
}

.categorias-titulo {
  font-size: 22px;
  font-weight: 700;
  color: #333;
  margin-bottom: 6px;
}

.categorias-titulo::after {
  content: " ";
  display: block;
  width: 50px;
  height: 3px;
  background: #27ae60;
  margin: 8px auto 24px;
  border-radius: 2px;
}

.categorias-slider-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.categorias-track-container {
  overflow: visible;
  max-width: 1100px;
  width: 100%;
}

.categorias-track {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 0 auto !important;
  padding: 0 !important;
}

.categorias-runa .row-fluid,
.categorias-runa [class*="span"] {
  margin-left: 0 !important;
  float: none !important;
}

.categoria-card {
  flex: 0 0 130px;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.categoria-circulo {
  width: 112px;
  height: 112px;
  border-radius: 50%;
  overflow: hidden;
  background: #f0f0f0;
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.categoria-card:hover .categoria-circulo {
  transform: scale(1.07);
  box-shadow: 0 8px 20px rgba(0,0,0,0.2);
}

.categoria-circulo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.categoria-nome {
  font-size: 15px;
  font-weight: 600;
  color: #333;
  letter-spacing: 0.5px;
}

#menuinsta {
  display: none !important;
}


/* ============================================================
   2. MINI BANNERS
   ============================================================ */

.row-fluid.banner.mini-banner {
  padding-left: 10px;
  padding-right: 10px;
  box-sizing: border-box;
  max-width: 70%;
  margin: 0 auto;
}


/* ============================================================
   3. PÁGINA DE CATEGORIA — REMOVE COLUNA LATERAL
   ============================================================ */

div.coluna.span3,
div.coluna.span3 *,
div.menu.lateral,
div.lateral.outras,
div.lateral.outras.filtro-coluna.faceta-marca,
div.lateral.outras.filtro-coluna.faceta-preco {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  visibility: hidden !important;
}

div.conteudo.span9 {
  width: 100% !important;
  margin-left: 0 !important;
  float: none !important;
  box-sizing: border-box !important;
}

.pagina-categoria .secao-principal.row-fluid,
.pagina-listagem .secao-principal.row-fluid {
  display: block !important;
  overflow: hidden !important;
}

.pagina-categoria div.coluna.span3::before,
.pagina-categoria div.coluna.span3::after,
.pagina-listagem div.coluna.span3::before,
.pagina-listagem div.coluna.span3::after {
  display: none !important;
  content: none !important;
}


/* ============================================================
   CARROSSEL DE SUBCATEGORIAS
   ============================================================ */

.subcategorias-runa {
  padding: 20px 0 24px;
  text-align: center;
  width: 100%;
}

.subcategorias-titulo {
  font-size: 13px;
  font-weight: 600;
  color: #999;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 20px;
}

.subcategorias-track {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  padding: 0 10px;
}

.subcategoria-card {
  flex: 0 0 100px;
  text-decoration: none !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  transition: transform 0.2s ease;
}

.subcategoria-card:hover {
  transform: translateY(-4px);
}

.subcategoria-circulo {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(0,0,0,0.15);
  transition: box-shadow 0.3s ease;
}

.subcategoria-card:hover .subcategoria-circulo {
  box-shadow: 0 8px 22px rgba(0,0,0,0.25);
}

.subcategoria-circulo span {
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  line-height: 1.2;
  padding: 0 6px;
  letter-spacing: 0.5px;
}

.subcategoria-nome {
  font-size: 12px;
  font-weight: 600;
  color: #444;
  text-align: center;
  line-height: 1.3;
  max-width: 100px;
  text-decoration: none !important;
}


/* ============================================================
   REMOVE BLOCO REPETIDO DO TOPO
   ============================================================ */

div.componente,
div.interno,
div.ordenar-listagem.topo.borda-alpha {
  display: none !important;
}


/* ============================================================
   4. GRID DE PRODUTOS — 4 POR LINHA (DESKTOP)
   Estrutura real: #listagemProdutos > ul > li.listagem-linha > ul > li.span3
   ============================================================ */

#listagemProdutos li.listagem-linha > ul {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: stretch !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  width: 100% !important;
}

#listagemProdutos li.listagem-linha > ul > li.span3 {
  width: 25% !important;
  box-sizing: border-box !important;
  padding: 8px !important;
  float: none !important;
  display: flex !important;
  flex-direction: column !important;
  margin: 0 !important;
}

#listagemProdutos li.listagem-linha > ul > li.span3 .listagem-item {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  flex: 1 !important;
}

/* Fallback */
ul.produtos-lista,
ul.listagem-produtos {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: stretch !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  width: 100% !important;
}

ul.produtos-lista > li.listagem-item,
ul.listagem-produtos > li.listagem-item {
  width: 25% !important;
  box-sizing: border-box !important;
  padding: 10px !important;
  float: none !important;
  display: flex !important;
  flex-direction: column !important;
}

ul.produtos-lista > li.listagem-item .info-produto,
ul.listagem-produtos > li.listagem-item .info-produto {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
}

ul.produtos-lista > li.listagem-item .info-produto .preco,
ul.produtos-lista > li.listagem-item .info-produto .preco-produto,
ul.listagem-produtos > li.listagem-item .info-produto .preco,
ul.listagem-produtos > li.listagem-item .info-produto .preco-produto {
  margin-top: auto !important;
}


/* ============================================================
   5. VITRINE HOME — TÍTULO DA CATEGORIA
   ============================================================ */

a.titulo-categoria {
  margin: 4px 0 0 0 !important;
  padding: 2px 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 16px !important;
  line-height: 1.2 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

a.titulo-categoria::before,
a.titulo-categoria::after {
  content: "" !important;
  display: block !important;
  flex: 1 !important;
  height: 1px !important;
  min-width: 40px !important;
}

#listagemProdutos {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.listagem.borda-alpha {
  padding-top: 0 !important;
  margin-top: 0 !important;
  padding-bottom: 10px !important;
}

.secao-principal.row-fluid.sem-coluna {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

.conteudo.span12 {
  padding-top: 0 !important;
}


/* ============================================================
   6. VITRINE HOME — CARROSSEL DE PRODUTOS
   ============================================================ */

ul.produtos-carrossel {
  margin-top: -80px !important;
  padding-top: 0 !important;
}

.listagem-linha.flexslider {
  margin-top: 0 !important;
  padding-top: 0 !important;
  border: none !important;
  box-shadow: none !important;
}

.flex-viewport {
  margin-top: 0 !important;
  padding-top: 0 !important;
}


/* ============================================================
   7. CARDS DE PRODUTO — ESTILOS GERAIS (DESKTOP)
   ============================================================ */

.listagem-item {
  padding: 8px !important;
}

.imagem-produto {
  margin-bottom: 4px !important;
  margin-top: 0 !important;
}

.imagem-produto img {
  width: 100%;
  height: 200px;
  object-fit: contain;
  transition: transform 0.3s ease;
  margin-bottom: 0 !important;
}

.listagem-item:hover .imagem-produto img {
  transform: scale(1.05);
}

.info-produto {
  padding: 0 4px !important;
}

.info-produto .nome-produto,
.info-produto .nome {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 14px !important;
  font-weight: 300 !important;
  color: #151515 !important;
  text-align: center !important;
  line-height: 1.4 !important;
  margin: 6px 0 !important;
  min-height: calc(1.4em * 3) !important;
  overflow: hidden !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
}

.info-produto .preco,
.info-produto .preco-produto {
  font-size: 17px !important;
  font-weight: 700 !important;
  color: #3fb322 !important;
  text-align: center !important;
  margin-bottom: 8px !important;
  margin-top: 4px !important;
  height: auto !important;
  display: block !important;
}


/* ============================================================
   7b. CARDS INDISPONÍVEIS — Tag "Volta em breve!"
   ============================================================ */

.listagem-item.indisponivel .bandeiras-produto {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 4px !important;
}

.listagem-item.indisponivel .bandeiras-produto::after {
  content: "Volta em breve!";
  display: inline-block;
  background-color: #FFD600;
  color: #1A1A1A;
  font-family: 'Poppins', 'sans-serif';
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 3px;
  margin: 0 3px 3px 3px;
  line-height: 1.4;
  white-space: nowrap;
}


/* ============================================================
   PRODUTO-SOBREPOR — desativa animação hover do tema
   Força com seletores de máxima especificidade
   ============================================================ */

.produto-sobrepor,
.listagem-item .produto-sobrepor,
.listagem-item:hover .produto-sobrepor,
body .produto-sobrepor,
body .listagem-item .produto-sobrepor,
body .listagem-item:hover .produto-sobrepor,
#listagemProdutos .produto-sobrepor,
#listagemProdutos .listagem-item .produto-sobrepor,
#listagemProdutos .listagem-item:hover .produto-sobrepor,
#listagemProdutos li.listagem-linha > ul > li.span3 .produto-sobrepor,
#listagemProdutos li.listagem-linha > ul > li.span3:hover .produto-sobrepor {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  position: static !important;
  height: 0 !important;
  width: 0 !important;
  overflow: hidden !important;
}


/* ============================================================
   8. BOTÃO COMPRAR
   ============================================================ */

a.botao.botao-comprar.principal {
  background-color: #3fb322 !important;
  color: #fff !important;
  border: none !important;
  border-radius: 6px !important;
  padding: 10px 0 !important;
  width: 100% !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  transition: background 0.2s ease !important;
  display: block !important;
  text-align: center !important;
  box-shadow: 0 3px 8px rgba(63,179,34,0.3) !important;
  margin-top: 0 !important;
}

a.botao.botao-comprar.principal:hover {
  background-color: #359a1d !important;
  box-shadow: 0 5px 12px rgba(63,179,34,0.4) !important;
}


/* ============================================================
   9. BOTÃO WHATSAPP (dentro dos cards)
   ============================================================ */

.btn-whatsapp-produto {
  display: block !important;
  width: 100% !important;
  margin-top: 6px !important;
  padding: 10px 0 !important;
  background-color: #25D366 !important;
  color: #fff !important;
  border: none !important;
  border-radius: 6px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  text-align: center !important;
  text-decoration: none !important;
  cursor: pointer !important;
  box-shadow: 0 3px 8px rgba(37,211,102,0.3) !important;
  transition: background 0.2s ease !important;
  box-sizing: border-box !important;
}

.btn-whatsapp-produto:hover {
  background-color: #1ebe5a !important;
  box-shadow: 0 5px 12px rgba(37,211,102,0.45) !important;
  color: #fff !important;
  text-decoration: none !important;
}


/* ============================================================
   BOTÃO WHATSAPP FLUTUANTE + BOTÃO TOPO — sem sobreposição
   ============================================================ */

div.li-whatsapp a,
.li-whatsapp a {
  bottom: 90px !important;
  right: 16px !important;
  z-index: 98 !important;
}

a.scrollToTop,
a#scrollToTop,
.scrollToTop,
#scrollToTop,
a[href="#"].scrollToTop,
.btn-topo,
a.scroll-topo {
  bottom: 16px !important;
  right: 16px !important;
  z-index: 99 !important;
}


/* ============================================================
   10. MOBILE — 2 produtos por linha
   ============================================================ */

@media (max-width: 768px) {

  /* Subcategorias */
  .subcategorias-track { gap: 12px; }
  .subcategoria-circulo { width: 72px; height: 72px; }
  .subcategoria-circulo span { font-size: 11px; }
  .subcategoria-card { flex: 0 0 80px; }
  .subcategoria-nome { font-size: 11px; max-width: 80px; }

  /* Categorias circulares grid 3+2 */
  .categorias-track-container { max-width: 100%; padding: 0 10px; }
  .categorias-track {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px 8px;
    justify-items: center;
  }
  .categoria-card:nth-child(4) { grid-column: 1 / 2; margin-left: auto; margin-right: 0; }
  .categoria-card:nth-child(5) { grid-column: 2 / 3; margin-left: 0; margin-right: auto; }
  .categoria-circulo { width: 85px; height: 85px; }
  .categoria-card { width: 100%; }
  .categoria-nome { font-size: 13px; }

  /* WhatsApp flutuante mobile */
  div.li-whatsapp a,
  .li-whatsapp a {
    bottom: 90px !important;
    right: 12px !important;
  }

  /* Grid 2 por linha */
  #listagemProdutos li.listagem-linha > ul {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #listagemProdutos li.listagem-linha > ul > li.span3 {
    width: 50% !important;
    max-width: 50% !important;
    min-width: 0 !important;
    flex: 0 0 50% !important;
    box-sizing: border-box !important;
    padding: 5px !important;
    float: none !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
  }

  #listagemProdutos li.listagem-linha > ul > li.span3 .listagem-item {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    padding: 6px !important;
    overflow: hidden !important;
  }

  /* Imagem */
  .imagem-produto {
    height: 110px !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .imagem-produto img {
    height: 110px !important;
    width: 100% !important;
    object-fit: contain !important;
  }

  /* Nome */
  .info-produto .nome-produto,
  .info-produto .nome {
    font-size: 11px !important;
    line-height: 1.3 !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 4px 0 !important;
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
  }

  /* Preço */
  .info-produto .preco,
  .info-produto .preco-produto {
    font-size: 13px !important;
    margin: 2px 0 4px !important;
  }

  /* Botão comprar */
  a.botao.botao-comprar.principal {
    font-size: 10px !important;
    padding: 7px 0 !important;
    letter-spacing: 0.5px !important;
    border-radius: 4px !important;
    margin-top: 0 !important;
  }

  /* Botão WhatsApp */
  .btn-whatsapp-produto {
    font-size: 10px !important;
    padding: 7px 0 !important;
    letter-spacing: 0.5px !important;
    margin-top: 4px !important;
    border-radius: 4px !important;
  }

  /* Fallback */
  body ul.produtos-lista > li.listagem-item,
  body ul.listagem-produtos > li.listagem-item {
    width: 50% !important;
    max-width: 50% !important;
    flex: 0 0 50% !important;
    padding: 5px !important;
  }

  a.titulo-categoria { padding: 2px 10px !important; font-size: 15px !important; }
  ul.produtos-carrossel { margin-top: -50px !important; }
}