/* ============================================================
   JOY ARTES — CSS COMPLETO MESCLADO
   CSS original da loja + Theme Joy Artes v4
   Cole este arquivo inteiro em Aparência → Editar CSS
   ============================================================ */

/* ── CSS ORIGINAL DA LOJA (mantido integralmente) ─────────── */

@import url('https://fonts.googleapis.com/css2?family=Libre+Franklin:wght@400;500;600;700&family=Fredoka:wght@400;500;600;700&family=Nunito:wght@400;600;700;800&display=swap');

body, p, a, span, strong, h2, h3, h4, h5, h6, label, input, button, .titulo {
  text-decoration: none !important;
  font-family: 'Libre Franklin', sans-serif;
  text-rendering: geometricPrecision;
}

#listagemProdutos > ul > li > ul > li > div > div.info-produto > div > div > div > strong {
  color: #ee508f;
  font-size: 20px;
}

.listagem .listagem-item .nome-produto { min-height: 35px !important; }
.listagem.com-caixa .listagem-item { min-height: 315px; }
.listagem.com-caixa .listagem-item .acoes-produto { border-style: none; }

@media only screen and (max-width: 767px) {
  .input-append .btn, .input-prepend .btn { line-height: 40px; }
}

#corpo .secao-principal .caixa-sombreada table tbody tr td.clearfix form div input.input-mini {
  padding: 15px 5px;
}

.tabela-carrinho .excluir a, .tabela-carrinho .quantidade a { color: #AAA; }

@media screen and (max-width: 767px) {
  .listagem-item .acoes-produto-responsiva { display: none !important; }
}

.listagem .listagem-item .acoes-produto .botao.principal {
  text-shadow: 0.1rem 0.1rem 0 #EE508F;
  border-radius: 3px;
  border-bottom: .3rem solid #EE508F;
  box-shadow: 0 1px 2px rgba(0,0,0,.2);
}

.listagem-item .acoes-produto .botao.principal {
  opacity: 0.9;
  width: 70%;
  padding: 13px 10px 13px 0;
  font-size: 16px;
  text-transform: uppercase;
  border: 0;
  font-weight: 600;
}

.listagem-item .acoes-produto { border-style: inherit; background: 0 0; }
.listagem-item:hover .acoes-produto { bottom: 50%; }

.listagem .listagem-linha li { border-width: inherit; border-style: inherit; }
.listagem .listagem-linha { border-style: inherit; }
.flexslider .slides img { border-radius: 8px; }
.conteiner-principal .conteiner { box-shadow: none; }

.menu.superior, .menu.superior .categoria-marcas, .menu.superior .categoria-paginas {
  background-color: #fff;
}
.menu.superior .nivel-um > li { border-left: 0; border-right: 0; }
.menu li > a i, .menu-responsivo i { font-size: 9px; margin-left: 7px; }
#cabecalho > div.conteiner > div.menu.superior > ul > li > a > i { background-color: #fff; color: inherit; }
.menu .titulo { font-size: 14.4px; font-weight: 600; color: inherit; }
#cabecalho > div.conteiner > div.menu.superior > ul {
  align-items: center; display: flex; justify-content: center;
  text-decoration: none; width: 100%;
}
.info-produto { text-align: center; }

#rodape .redes-sociais {
  width: 220px; padding: 0 20px; position: inherit;
  top: 0; bottom: 0; background: 0 0; box-shadow: none; border: 0; color: #fff;
}
#rodape > div.institucional.fundo-secundario > div > div > div.span3 > div > span { color: #fff; }
.borda-principal { border-color: none; }
.fundo-secundario, .fundo-secundario *, .fundo-secundario *:hover,
.fundo-secundario:hover, .fundo-secundario.botao:hover { color: #fff; }
#rodape > div.institucional.fundo-secundario > div > div > div.span3 > div > ul {
  display: flex; justify-content: space-evenly;
}
#rodape > div.institucional.fundo-secundario > div > div > div > div p,
#rodape > div.institucional.fundo-secundario > div > div > div > div ul { font-weight: 500; }

.tarja-topo.owl-carousel.owl-loaded.owl-drag { overflow: hidden; }
.owl-item { display: inline-block; text-align: center; }
.owl-nav.disabled { display: none; }
.tarjas { padding: 8px 0; font-size: 12px; text-align: center; margin-top: 0; }
.tarja-topo { max-width: 100vw; }
.tarja-topo > .tarjas { opacity: 0; display: none; }

@media only screen and (max-width: 767px) {
  .conteudo-topo .inferior .busca-mobile .atalho-menu:before { content: '\f0c9'; }
  .conteudo-topo .busca-mobile .atalho-menu {
    float: right; line-height: 49px; font-size: 21px;
    border: 0; box-sizing: border-box; padding: 0 12px; cursor: pointer;
  }
  .listagem .listagem-item .nome-produto { min-height: 0 !important; }
  .busca .botao-busca {
    height: auto; top: 4px; right: -4px; line-height: 28px;
    color: #323232; font-weight: bolder; background-color: #fff;
    border: 0; font-size: 21px; background-image: none;
  }
  input[type='text'], input[type='password'], input[type='email'], textarea,
  .cadastro input[type='text'], .cadastro input[type='password'],
  .cadastro select, .ordenar-listagem label, input.input-small.input-cep {
    font-size: 16px; color: #6d6d6d; height: 50px;
    padding: 0 58px 0 20px; box-sizing: border-box;
  }
  .busca input { width: 103%; }
}

.row-fluid [class*='span']:first-child { background-color: transparent; }

@media only screen and (max-width: 479px) {
  .listagem .listagem-item .acoes-produto-responsiva { display: none; margin: 0 auto; right: 35%; }
  #rodape > div.institucional.fundo-secundario > div > div > div.span3 { display: none; }
  #rodape > div.pagamento-selos > div { text-align: center; }
  .listagem .listagem-item .imagem-produto,
  .listagem .listagem-item .info-produto { text-align: center; }
  .listagem.com-caixa .listagem-item .imagem-produto { border-bottom: 0; }
}

@media only screen and (max-width: 767px) {
  .preco-produto strong.titulo,
  .resumo-compra .preco-produto .titulo,
  .resumo-compra .total strong { font-size: inherit; }
}

.listagem.com-caixa .listagem-linha > ul { margin: 0 auto; max-width: 90%; }
.produto .cep .aviso-disponibilidade { font-size: 12px; margin-top: 5px; font-weight: bold; }

/* ── JOY ARTES THEME v4 ───────────────────────────────────── */

:root {
  --ja-pink:      #E8679A;
  --ja-pink-deep: #C84A7E;
  --ja-pink-soft: #F7DCE6;
  --ja-pink-milk: #FDF5F8;
  --ja-butter:    #F0D78A;
  --ja-ink:       #3D2333;
  --ja-ink-soft:  #8A7380;
  --ja-line:      #F0E3E9;
}

body { background: var(--ja-pink-milk) !important; }

/* Cabeçalho */
#cabecalho {
  background: #fff !important;
  border-bottom: 1.5px solid var(--ja-line) !important;
  box-shadow: 0 2px 12px rgba(232,103,154,0.08) !important;
}

/* Busca desktop — pill */
#cabecalho .busca form, #cabecalho #form-buscar {
  display: flex !important;
  align-items: stretch !important;
  border: 1.5px solid var(--ja-line) !important;
  border-radius: 999px !important;
  overflow: hidden !important;
  background: #fff !important;
  height: 44px !important;
}
#cabecalho .busca input[type="text"], #cabecalho #auto-complete {
  flex: 1 !important;
  height: 100% !important;
  padding: 0 18px !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  font-size: 14px !important;
  color: var(--ja-ink) !important;
  outline: none !important;
  box-shadow: none !important;
}
#cabecalho .busca input[type="text"]::placeholder { color: var(--ja-ink-soft) !important; }
#cabecalho .busca button, #cabecalho .botao-busca {
  position: static !important;
  flex-shrink: 0 !important;
  width: 48px !important;
  height: 100% !important;
  border: none !important;
  border-radius: 0 !important;
  background: var(--ja-pink) !important;
  color: #fff !important;
  font-size: 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
}
#cabecalho .busca button:hover { background: var(--ja-pink-deep) !important; }

/* Títulos de vitrine */
.titulo-categoria, .titulo-categoria.borda-principal, a.titulo-categoria {
  display: inline-block !important;
  font-family: 'Fredoka', system-ui !important;
  font-weight: 600 !important;
  font-size: 22px !important;
  color: #fff !important;
  background: var(--ja-pink) !important;
  border: none !important;
  border-radius: 12px !important;
  padding: 6px 16px 8px !important;
  transform: rotate(-1.5deg) !important;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.8),
              0 2px 0 var(--ja-pink-deep),
              0 4px 10px rgba(200,74,126,0.18) !important;
  text-decoration: none !important;
  margin-bottom: 20px !important;
}
.titulo-categoria:hover { color: #fff !important; opacity: 0.9 !important; }

/* Grid desktop */
#listagemProdutos, .listagem { background: transparent !important; border: none !important; box-shadow: none !important; }
.listagem-linha > ul { display: block !important; }

/* Card de produto */
.listagem-item {
  background: #fff !important;
  border-radius: 20px !important;
  border: 1.5px solid var(--ja-line) !important;
  box-shadow: 0 3px 10px rgba(232,103,154,0.06) !important;
  overflow: hidden !important;
  transition: transform 0.22s cubic-bezier(.34,1.56,.64,1), box-shadow 0.22s !important;
  padding: 10px !important;
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  box-sizing: border-box !important;
}
.listagem-item:hover { transform: translateY(-5px) !important; box-shadow: 0 12px 28px rgba(232,103,154,0.15) !important; }

.listagem-item .imagem-produto {
  border-radius: 14px !important;
  overflow: hidden !important;
  background: var(--ja-pink-milk) !important;
  aspect-ratio: 1 / 1 !important;
  flex-shrink: 0 !important;
  width: 100% !important;
}
.listagem-item .imagem-produto img {
  width: 100% !important; height: 100% !important;
  object-fit: cover !important; border-radius: 14px !important;
  transition: transform 0.3s !important; display: block !important;
}
.listagem-item:hover .imagem-produto img { transform: scale(1.04) !important; }

.listagem-item .info-produto {
  flex: 1 !important; display: flex !important;
  flex-direction: column !important; padding: 10px 4px 4px !important;
}

.listagem-item .nome-produto, .listagem-item a.nome-produto {
  font-family: 'Nunito', system-ui !important;
  font-weight: 700 !important; font-size: 15px !important;
  color: var(--ja-ink) !important; line-height: 1.3 !important;
  text-decoration: none !important; display: block !important;
  min-height: 0 !important; margin-bottom: 0 !important;
}
.listagem-item .nome-produto:hover { color: var(--ja-pink) !important; }

.listagem .preco-produto > div { margin: 2px 0 !important; }

.listagem-item .preco-parcela, .listagem-item span.preco-parcela {
  font-size: 12px !important; color: var(--ja-ink-soft) !important;
  margin-top: 8px !important; display: block !important;
}
.listagem-item .preco-parcela strong { color: var(--ja-pink) !important; }
.listagem-item .preco-parcela strong.titulo { font-size: 12px !important; color: var(--ja-pink) !important; }

.listagem-item .preco-promocional, .listagem-item strong.preco-promocional,
.listagem-item .destaque-preco-a-vista {
  font-family: 'Fredoka', system-ui !important;
  font-weight: 600 !important; font-size: 22px !important;
  color: var(--ja-pink) !important; display: block !important; line-height: 1.15 !important;
}

.listagem-item .info-produto > div:last-child { margin-top: auto !important; }
.listagem-item .acoes-produto { margin-top: auto !important; padding: 0 2px !important; }

.listagem-item .botao.botao-comprar, .listagem-item a.botao-comprar {
  display: block !important; width: 100% !important; text-align: center !important;
  background: var(--ja-pink) !important; color: #fff !important;
  border: none !important; border-radius: 999px !important;
  font-family: 'Fredoka', system-ui !important; font-weight: 700 !important;
  font-size: 14px !important; padding: 10px 18px !important;
  box-shadow: 0 3px 0 var(--ja-pink-deep) !important;
  transition: transform 0.1s, box-shadow 0.1s !important;
  text-decoration: none !important; box-sizing: border-box !important;
  text-shadow: none !important; text-transform: none !important;
}
.listagem-item .botao.botao-comprar:hover {
  background: var(--ja-pink-deep) !important;
  transform: translateY(2px) !important;
  box-shadow: 0 1px 0 var(--ja-pink-deep) !important;
  color: #fff !important;
}

/* Paginação */
.paginacao a, .pagination li a {
  background: #fff !important; border: 1.5px solid var(--ja-line) !important;
  color: var(--ja-ink) !important; border-radius: 10px !important;
  font-family: 'Fredoka', system-ui !important; font-weight: 600 !important; margin: 0 3px !important;
}
.paginacao .ativo, .pagination .active a {
  background: var(--ja-pink) !important; border-color: var(--ja-pink) !important; color: #fff !important;
}

/* Rodapé */
#rodape {
  background: var(--ja-ink) !important; color: var(--ja-pink-milk) !important;
  border-radius: 28px 28px 0 0 !important; margin-top: 40px !important;
}
#rodape a { color: var(--ja-pink-soft) !important; font-size: 13px !important; }
#rodape a:hover { color: var(--ja-pink) !important; }
#rodape h3, #rodape h4 {
  font-family: 'Fredoka', system-ui !important; font-weight: 600 !important; color: #fff !important;
}

/* WhatsApp plugin */
.whatsapp-button, .whatsapp-chat-button, [class*="whatsapp-float"], [id*="whatsapp-button"] {
  width: 44px !important; height: 44px !important;
  min-width: 44px !important; min-height: 44px !important;
  border-radius: 50% !important; padding: 0 !important;
}

/* ── MOBILE ──────────────────────────────────────────────── */
@media (max-width: 767px) {

  html, body { overflow-x: hidden !important; max-width: 100vw !important; }
  .conteiner-principal, #corpo, .secao-principal { overflow-x: hidden !important; }

  /* Logo centralizado */
  .conteudo-topo .logotipo, .conteudo-topo #logo, .conteudo-topo .logo {
    text-align: center !important; display: block !important;
    width: 100% !important; padding: 10px 0 6px !important;
  }
  .conteudo-topo .logotipo img, .conteudo-topo #logo img, .conteudo-topo .logo img {
    max-height: 72px !important; width: auto !important; display: inline-block !important;
  }

  /* Busca mobile pill */
  .span8.busca-mobile > a.atalho-menu { display: none !important; }
  .span8.busca-mobile {
    display: block !important; padding: 6px 16px !important;
    box-sizing: border-box !important; width: 100% !important;
  }
  .span8.busca-mobile .busca, .busca.borda-alpha {
    border: none !important; box-shadow: none !important; background: transparent !important; width: 100% !important;
  }
  .span8.busca-mobile .busca form, #form-buscar {
    display: flex !important; align-items: stretch !important;
    border: 1.5px solid var(--ja-line) !important; border-radius: 999px !important;
    overflow: hidden !important; background: var(--ja-pink-milk) !important;
    height: 48px !important; width: 100% !important; box-sizing: border-box !important;
  }
  .span8.busca-mobile .busca input[type="text"], #auto-complete {
    flex: 1 !important; height: 100% !important; min-height: unset !important;
    padding: 0 16px !important; border: none !important; border-radius: 0 !important;
    background: transparent !important; font-size: 15px !important;
    outline: none !important; box-shadow: none !important; width: 100% !important;
  }
  .span8.busca-mobile .botao-busca, #form-buscar .botao-busca {
    position: static !important; top: auto !important; right: auto !important;
    flex-shrink: 0 !important; width: 52px !important; height: 100% !important;
    border-radius: 0 !important; background: var(--ja-pink) !important;
    background-color: var(--ja-pink) !important; background-image: none !important;
    color: #fff !important; border: none !important; font-size: 18px !important;
    display: flex !important; align-items: center !important;
    justify-content: center !important; cursor: pointer !important;
  }
  .inferior.row-fluid .span8.busca-mobile { width: 100% !important; margin-left: 0 !important; }
  .inferior.row-fluid .span4.hidden-phone { display: none !important; }

  /* Esconde barra original e hamburguer */
  .atalhos-mobile, .atalhos-mobile.visible-phone { display: none !important; height: 0 !important; overflow: hidden !important; }
  .custom-menu-mobile-icon { display: none !important; }
  .span8.busca-mobile .menu.superior > ul.nivel-um { display: none !important; }
  .superior.hidden-phone, .conteudo-topo .superior { display: none !important; height: 0 !important; overflow: hidden !important; }

  /* Grid 2 colunas */
  .listagem-linha > ul {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important; padding: 0 6px !important; margin: 0 !important;
    max-width: 100% !important; box-sizing: border-box !important; overflow: visible !important;
  }
  .listagem.com-caixa .listagem-linha > ul { max-width: 100% !important; margin: 0 !important; }

  /* Fix clearfix Bootstrap 2 */
  .listagem-linha > ul::before, .listagem-linha > ul::after,
  .listagem-linha > ul.row-fluid::before, .listagem-linha > ul.row-fluid::after {
    display: none !important; content: none !important;
  }

  /* li fantamas */
  .listagem-linha > ul > li:not(.span3) { display: none !important; }
  .listagem-linha > ul > li.span3:not(:has(> .listagem-item)) { display: none !important; }

  .listagem-linha > ul > li, .listagem-linha > ul > li.span3 {
    float: none !important; width: 100% !important; margin: 0 !important;
    padding: 0 !important; display: flex !important; flex-direction: column !important;
    min-width: 0 !important; box-sizing: border-box !important;
  }

  /* Card mobile */
  .listagem-item {
    width: 100% !important; min-width: 0 !important; margin: 0 !important;
    border-radius: 16px !important; padding: 8px !important; flex: 1 !important;
  }
  .listagem-item .imagem-produto { aspect-ratio: 1/1 !important; width: 100% !important; height: auto !important; }
  .listagem-item .imagem-produto img { width: 100% !important; height: 100% !important; object-fit: cover !important; }
  .listagem-item .info-produto { flex: 1 !important; display: flex !important; flex-direction: column !important; padding: 8px 2px 2px !important; }
  .listagem-item .nome-produto { font-size: 13px !important; min-height: 0 !important; word-break: break-word !important; }
  .listagem-item .preco-promocional, .listagem-item strong.preco-promocional, .listagem-item .destaque-preco-a-vista {
    font-size: 20px !important;
  }
  .listagem-item .preco-parcela { font-size: 11px !important; margin-top: 6px !important; }
  .listagem-item .preco-parcela strong.titulo { font-size: 11px !important; }
  .listagem-item .botao.botao-comprar { font-size: 12px !important; padding: 8px 10px !important; }
  .titulo-categoria { font-size: 17px !important; padding: 5px 12px 7px !important; }
  
  /* ============================================================
   JOY ARTES — PATCH MOBILE (adicionar ao final do CSS)
   [1] Remove padding-top que cria espaço branco no topo
   [2] Esconde hamburguer do MegaMenu definitivamente
   [3] Desce label "Categorias" para não sobrepor o ícone
   ============================================================ */

@media only screen and (max-width: 767px) {

  /* [1] Remove padding-top injetado pelo tema LI no mobile */
  #cabecalho {
    padding-top: 0 !important;
  }

  /* [2] Esconde o hamburguer do MegaMenu */
  .custom-menu-mobile-icon,
  div.custom-menu-mobile-icon,
  .custom-menu-mobile-icon .menu-icon-mobile,
  .custom-menu-mobile-icon span {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
  }

  /* [3] Label "Categorias" desce para não sobrepor o ícone elevado */
  #ja-bottom-nav .ja-nav-center .ja-nav-label {
    margin-top: 26px !important;
  }
}
}