/* ==================================================================
   DIMEL - CSS de ACABAMENTO (Tema Galeria / Loja Integrada)
   ------------------------------------------------------------------
   ONDE COLAR: Painel > Personalize sua loja > Editar CSS
   Cole DEPOIS de configurar as Cores Predominantes e o bloco
   "Configuracao do Tema". Cuida so da FORMA (cantos, hover, busca
   em pilula, espacamentos). Aplica em ~15 min; teste com Ctrl+F5.

   Escrito em CSS simples (sem prioridade forcada, sem classes coladas,
   sem IDs e sem rgba em cor de fundo) para passar limpo no validador.
   ================================================================== */

/* ---- Busca em pilula + botao redondo vermelho ---- */
body .busca {
  background: #f6f6f7;
  border: 1px solid #ececec;
  border-radius: 50px;
  overflow: hidden;
  padding: 3px 4px 3px 10px;
}
body .busca input {
  border: none;
  background: transparent;
  box-shadow: none;
  padding: 9px 14px;
  font-size: 14px;
}
body .botao-busca {
  box-sizing: border-box;
  background: #e11b22;
  border: none;
  border-radius: 50%;
  color: #ffffff;
  width: 40px;
  height: 40px;
}
body .botao-busca:hover {
  background: #b3141a;
}

/* ---- Menu de categorias: cantos e respiro ---- */
body .superior {
  border-radius: 10px;
  margin-top: 6px;
}
body .nivel-um > li > a {
  padding: 13px 18px;
  letter-spacing: .02em;
}
body .nivel-um > li:hover > a {
  background: #c4181e;
  border-radius: 8px;
}

/* ---- Botoes arredondados ---- */
body .botao {
  border-radius: 50px;
  font-weight: 600;
  transition: .25s;
}
body .botao:hover {
  transform: translateY(-1px);
}

/* ---- Cards de produto: cantos, borda e hover ---- */
body .listagem-item {
  background: #ffffff;
  border: 1px solid #ececec;
  border-radius: 16px;
  overflow: hidden;
  transition: box-shadow .28s, transform .28s;
}
body .listagem-item:hover {
  box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
  transform: translateY(-4px);
}
body .imagem-produto {
  background: #ffffff;
  padding: 10px;
}
body .info-produto {
  padding: 12px 16px 18px;
}
body .nome-produto {
  font-size: 14px;
  font-weight: 600;
  display: block;
}

/* ---- Precos ---- */
body .preco-promocional {
  font-weight: 700;
  font-size: 20px;
}
body .preco-parcela {
  color: #1ba85a;
  font-weight: 600;
}

/* ---- Botao comprar arredondado ---- */
body .botao-comprar {
  border-radius: 50px;
  border: none;
  font-weight: 600;
}

/* ---- Titulos de vitrine em destaque ---- */
body .titulo {
  font-weight: 800;
  letter-spacing: -.01em;
}

/* ---- Newsletter arredondada ---- */
body .newsletter {
  border-radius: 16px;
  border-color: #ececec;
}
body .newsletter input {
  border-radius: 50px;
}