/* =========================================================
   STHE CILIOS - CSS DEFINITIVO v8 (paleta Wepink rosa)
   Pre-requisitos:
     1) Aparencia > Visual: Disposicao 03 / Sem coluna / Medio
     2) Tema > Cor Principal: #E0457B
     3) Configuracoes > Incluir HTML: bloco Google Fonts (cabecalho)
     4) Configuracoes > Incluir HTML: barraTopo + freeShipping +
        newsletter (rodape, JavaScript)
   ========================================================= */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,500;1,400;1,500");

/* ---------- [1] TIPOGRAFIA GLOBAL ------------------------- */
body {
  font-family: "Inter", Arial, sans-serif !important;
  color: #2A1A1F !important;
  font-size: 14px;
}

.titulo-categoria,
.pagina-categoria h1,
.pagina-produto h1 {
  font-family: "Playfair Display", Georgia, serif !important;
  font-weight: 500 !important;
  font-style: italic !important;
  text-transform: none !important;
  letter-spacing: -0.3px !important;
  color: #0A0A0A !important;
}

/* Titulos das vitrines na home */
.vitrine-lancamento > .titulo,
.vitrine-mas-vendido > .titulo,
.vitrine-destaque > .titulo,
.pagina-inicial #corpo h2 {
  font-family: "Playfair Display", Georgia, serif !important;
  font-weight: 500 !important;
  font-style: italic !important;
  font-size: 30px !important;
  text-align: center !important;
  display: block !important;
  position: relative !important;
  margin: 40px auto 24px auto !important;
  padding-bottom: 14px !important;
  color: #0A0A0A !important;
  text-transform: none !important;
  letter-spacing: -0.3px !important;
}

.vitrine-lancamento > .titulo:after,
.vitrine-mas-vendido > .titulo:after,
.vitrine-destaque > .titulo:after,
.pagina-inicial #corpo h2:after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  margin-left: -30px;
  width: 60px;
  height: 1px;
  background: #C9A57B;
}

/* ---------- [2] MENU SUPERIOR (refinado, sem inchar) ------ */
.menu.superior a {
  font-family: "Inter", sans-serif !important;
  font-weight: 500 !important;
  font-size: 12px !important;
  letter-spacing: 0.4px !important;
  text-transform: uppercase !important;
  color: #2A1A1F !important;
  padding: 10px 14px !important;
  transition: color 0.2s ease;
}

.menu.superior a:hover {
  color: #E0457B !important;
  background: transparent !important;
}

/* ---------- [3] NOME E PRECOS NO CARD (sem quebrar) ------- */
.listagem-item .nome-produto {
  font-family: "Inter", sans-serif !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  color: #2A1A1F !important;
}

.listagem-item .preco-venda {
  font-weight: 700 !important;
  color: #0A0A0A !important;
}

.listagem-item .preco-promocional {
  color: #999999 !important;
  text-decoration: line-through !important;
}

.listagem-item .destaque-parcela strong,
.listagem-item .destaque-parcela b {
  color: #0A0A0A !important;
  font-weight: 700 !important;
}

/* PIX/desconto a vista inline rosa (sem pill) */
.listagem-item .desconto-a-vista,
.desconto-a-vista {
  color: #E0457B !important;
  font-weight: 700 !important;
  letter-spacing: 0.3px !important;
}

/* ---------- [4] BOTAO COMPRAR NO CARD --------------------- */
.listagem-item .botao-comprar,
.listagem-item .botao-comprar-ajax,
.listagem-item .tag-comprar a {
  font-family: "Inter", sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  font-size: 12px !important;
  background: #0A0A0A !important;
  background-image: none !important;
  color: #FFFFFF !important;
  border: 1px solid #0A0A0A !important;
  text-shadow: none !important;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.listagem-item .botao-comprar:hover,
.listagem-item .botao-comprar-ajax:hover,
.listagem-item .tag-comprar a:hover {
  background: #E0457B !important;
  border-color: #E0457B !important;
  color: #FFFFFF !important;
}

/* ---------- [5] CTA COMPRAR NA PAGINA DE PRODUTO ---------- */
.pagina-produto .botao-comprar,
.pagina-produto .botao.comprar,
.pagina-produto .tag-comprar a {
  background: #E0457B !important;
  background-image: none !important;
  border: 1px solid #E0457B !important;
  color: #FFFFFF !important;
  text-shadow: none !important;
  font-family: "Inter", sans-serif !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  letter-spacing: 0.8px !important;
  text-transform: uppercase !important;
  padding: 16px 24px !important;
  border-radius: 8px !important;
  box-shadow: 0 6px 20px rgba(224,69,123,0.28);
  transition: background 0.2s ease, box-shadow 0.2s ease;
}

.pagina-produto .botao-comprar:hover,
.pagina-produto .botao.comprar:hover,
.pagina-produto .tag-comprar a:hover {
  background: #C93A6C !important;
  border-color: #C93A6C !important;
  box-shadow: 0 10px 28px rgba(224,69,123,0.38);
}

/* Titulo e preco na pg de produto */
.pagina-produto h1 {
  font-size: 30px !important;
  font-weight: 500 !important;
  font-style: italic !important;
  margin-bottom: 10px !important;
}

.pagina-produto .preco-venda {
  font-family: "Playfair Display", Georgia, serif !important;
  font-size: 34px !important;
  font-weight: 600 !important;
  color: #0A0A0A !important;
}

/* ---------- [6] BOTOES GLOBAIS ---------------------------- */
.botao {
  font-family: "Inter", sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: 0.5px !important;
  text-transform: none !important;
  background-image: none !important;
  text-shadow: none !important;
  transition: background 0.25s ease, color 0.25s ease;
}

.botao.principal {
  background: #0A0A0A !important;
  color: #FFFFFF !important;
  border: 1px solid #0A0A0A !important;
}

.botao.principal:hover {
  background: #E0457B !important;
  border-color: #E0457B !important;
  color: #FFFFFF !important;
}

/* ---------- [7] BARRA TOPO (plugin barraTopo) ------------- */
#barraTopo {
  background: #0A0A0A !important;
  color: #FFFFFF !important;
  font-family: "Inter", sans-serif !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0.8px !important;
  text-transform: uppercase !important;
  padding: 10px 0 !important;
  text-align: center !important;
}

#barraTopo a,
#barraTopo a:visited {
  color: #FFD6E0 !important;
  text-decoration: underline;
  font-weight: 600;
}

#barraTopo a:hover {
  color: #FFFFFF !important;
}

/* ---------- [8] ALERTA FRETE GRATIS (plugin ativaFreeShipping) */
.freeShipping,
#freeShipping,
.alerta-frete-gratis {
  background: #FFF5F8 !important;
  border: 1px solid #FFD6E0 !important;
  color: #0A0A0A !important;
  font-family: "Inter", sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.4px !important;
  border-radius: 6px !important;
  padding: 10px 14px !important;
}

.freeShipping strong,
#freeShipping strong {
  color: #E0457B !important;
}

/* ---------- [9] NEWSLETTER (plugin newsletter + cupom) ---- */
.newsletter,
#newsletter,
.modal-newsletter {
  background: #FFF5F8 !important;
  color: #2A1A1F !important;
}

.newsletter .titulo,
#newsletter .titulo {
  font-family: "Playfair Display", Georgia, serif !important;
  font-style: italic !important;
  font-size: 26px !important;
  font-weight: 500 !important;
  color: #0A0A0A !important;
  text-transform: none !important;
}

.newsletter input[type="email"],
#newsletter input[type="email"] {
  border: 1px solid #EEEEEE !important;
  border-radius: 999px !important;
  padding: 12px 20px !important;
  font-size: 13px !important;
  background: #FFFFFF !important;
}

.newsletter .botao,
#newsletter .botao,
.newsletter button,
#newsletter button {
  background: #E0457B !important;
  color: #FFFFFF !important;
  border: 1px solid #E0457B !important;
  border-radius: 999px !important;
  padding: 12px 24px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  box-shadow: 0 4px 16px rgba(224,69,123,0.22);
}

.newsletter .botao:hover,
#newsletter .botao:hover {
  background: #C93A6C !important;
  border-color: #C93A6C !important;
}

/* Cupom exibido apos cadastro */
.cupom-newsletter,
.cupom-exibicao {
  background: #0A0A0A !important;
  color: #FFD6E0 !important;
  font-family: "Inter", sans-serif !important;
  letter-spacing: 2px !important;
  font-weight: 700 !important;
  padding: 14px 20px !important;
  border-radius: 6px !important;
  border: 2px dashed #E0457B !important;
}

/* ---------- [10] RODAPE ROSA CLARO (Wepink style) --------- */
#rodape {
  background: #FFF5F8 !important;
}

#rodape .institucional,
#rodape .institucional.fundo-secundario,
#rodape .conteiner {
  background: #FFF5F8 !important;
  color: #2A1A1F !important;
  box-shadow: none !important;
}

#rodape .titulo,
#rodape .links-rodape .titulo,
#rodape .atd-rodape .titulo {
  font-family: "Inter", sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 1.6px !important;
  text-transform: uppercase !important;
  font-style: normal !important;
  color: #0A0A0A !important;
  display: block !important;
  margin-bottom: 14px !important;
}

#rodape a,
#rodape li,
#rodape p,
#rodape span {
  color: #2A1A1F !important;
  text-transform: none !important;
}

#rodape a {
  transition: color 0.2s ease;
}

#rodape a:hover {
  color: #E0457B !important;
}

#rodape .gateways-rodape img {
  opacity: 1;
  filter: none;
  max-height: 24px;
}

#rodape .assinatura-rodape {
  background: #FFE5EC !important;
  border-top: 1px solid #FFD6E0 !important;
  color: #6B6B6B !important;
}

#rodape .assinatura-rodape a {
  color: #6B6B6B !important;
}

#rodape .assinatura-rodape a:hover {
  color: #E0457B !important;
}

/* ---------- [11] INPUTS (focus rosa) ---------------------- */
.conteiner input[type="text"],
.conteiner input[type="email"],
.conteiner input[type="password"],
.conteiner input[type="search"],
.conteiner input[type="tel"],
.conteiner textarea {
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.conteiner input[type="text"]:focus,
.conteiner input[type="email"]:focus,
.conteiner input[type="password"]:focus,
.conteiner input[type="search"]:focus,
.conteiner input[type="tel"]:focus,
.conteiner textarea:focus {
  border-color: #E0457B !important;
  box-shadow: 0 0 0 3px rgba(224,69,123,0.12) !important;
  outline: none !important;
}

/* ---------- [12] SCROLLBAR -------------------------------- */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: #FFF5F8;
}

::-webkit-scrollbar-thumb {
  background: #FFD6E0;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: #E0457B;
}

/* ---------- [13] MOBILE (<768px) -------------------------- */
@media (max-width: 767px) {
  .vitrine-lancamento > .titulo,
  .vitrine-mas-vendido > .titulo,
  .vitrine-destaque > .titulo,
  .pagina-inicial #corpo h2 {
    font-size: 22px !important;
    margin: 28px auto 18px auto !important;
  }
  .pagina-produto h1 {
    font-size: 24px !important;
  }
  .pagina-produto .preco-venda {
    font-size: 26px !important;
  }
  .menu.superior a {
    font-size: 11px !important;
    padding: 8px 10px !important;
  }
}

/* ========================================================= */