/* ============================================================
   CLOSET DA MAY — CSS de identidade
   Tema 4 / Super Light Blue (Loja Integrada)
   Cole TUDO em: Personalize sua loja  ->  Editar CSS
   Reversível: apague este bloco e salve para voltar ao original.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;1,500;1,600&family=Jost:wght@300;400;500&display=swap');

:root{
  --cdm-rose:#D9A1A5;   /* rosé da marca            */
  --cdm-deep:#B87E84;   /* mauve (hover / botões)   */
  --cdm-milk:#FBF4F2;   /* rosé leitoso (fundos)    */
  --cdm-cream:#FDFBF9;  /* off-white base           */
  --cdm-ink:#3A3335;    /* grafite quente (texto)   */
  --cdm-muted:#9C8B8C;  /* cinza rosado (secundário)*/
  --cdm-line:#EADFDD;   /* linhas / bordas          */
}

/* ---------- Tipografia base ---------- */
body, .conteiner, input, select, textarea, button, .botao{
  font-family:'Jost',-apple-system,'Segoe UI',Helvetica,Arial,sans-serif !important;
}
body{ background:var(--cdm-cream) !important; color:var(--cdm-ink) !important; letter-spacing:.01em; }

h1, h2, h3, h4,
.titulo, .titulo-secao, .titulo-conteudo,
.nome-produto, .nome-produto a{
  font-family:'Cormorant Garamond', Georgia, serif !important;
  font-weight:600 !important;
  letter-spacing:.01em;
}

/* ---------- Sistema de cores do tema ---------- */
.fundo-principal { background-color:var(--cdm-cream) !important; }
.fundo-secundario{ background-color:var(--cdm-rose) !important; color:#fff !important; }
.cor-principal   { color:var(--cdm-ink) !important; }
.cor-secundaria  { color:var(--cdm-deep) !important; }
.borda-principal, .borda-alpha{ border-color:var(--cdm-line) !important; }

/* Cores adicionais do tema (setor do manual, pág. 13) */
:root{ --cor3:#B87E84; --cor4:#9C8B8C; }

/* ---------- Cabeçalho / logo ---------- */
h1.logo, h1.logo a, h1.logo.no-image{ color:var(--cdm-deep) !important; }
.barra-inicial{ background:var(--cdm-milk) !important; border-bottom:1px solid var(--cdm-line) !important; }
/* tamanho do logo no topo (mexa no max-height pra maior/menor) */
#cabecalho h1.logo{ margin:0 !important; padding:6px 0 !important; line-height:0 !important; }
#cabecalho h1.logo a{ display:inline-block !important; }
#cabecalho h1.logo img{ max-height:58px !important; width:auto !important; height:auto !important; display:inline-block !important; }

/* ---------- Menu ---------- */
.menu.superior, .menu.superior .conteiner{ background:transparent !important; }
.menu a{
  text-transform:uppercase; letter-spacing:.08em; font-size:.82rem;
  color:var(--cdm-muted) !important;
}
.menu a:hover{ color:var(--cdm-ink) !important; }

/* ---------- Botões ---------- */
.botao, .botao.principal, button.botao,
.comprar .botao, .botao-comprar, .botao-input{
  background-color:var(--cdm-deep) !important;
  color:#fff !important;
  border:none !important;
  border-radius:999px !important;
  text-transform:uppercase; letter-spacing:.08em; font-weight:500 !important;
}
.botao:hover, .botao.principal:hover, .botao-comprar:hover{
  background-color:var(--cdm-ink) !important;
}

/* ---------- Busca ---------- */
.busca input{ border-radius:999px 0 0 999px !important; border-color:var(--cdm-line) !important; }
.botao-busca{ background-color:var(--cdm-rose) !important; }

/* ---------- Vitrine / produtos ----------
   OBS: afinar depois de cadastrar 1 produto (ver DOM real). */
.listagem, .vitrine{ border-color:var(--cdm-line) !important; }
.produto, li.produto{
  background:#fff !important;
  border:1px solid var(--cdm-line) !important;
  border-radius:14px !important;
  overflow:hidden;
  transition:transform .25s ease, box-shadow .25s ease;
}
.produto:hover{ transform:translateY(-4px); box-shadow:0 16px 34px -22px rgba(122,80,84,.5); }
.nome-produto, .nome-produto a{ color:var(--cdm-ink) !important; font-size:1.15rem !important; }
.preco-produto, .preco-por, .a-vista, .preco-promocional{ color:var(--cdm-deep) !important; font-weight:500 !important; }
.preco-de{ color:var(--cdm-muted) !important; text-decoration:line-through; }

/* ---------- Newsletter ---------- */
.newsletter, .newsletter.fundo-secundario{ background:var(--cdm-rose) !important; color:#fff !important; }
.newsletter input{ border-radius:999px !important; }

/* ---------- Rodapé ---------- */
.rodape, .rodape.fundo-secundario{ background:var(--cdm-ink) !important; color:#E9DCDC !important; }
.rodape a{ color:#CBB9B9 !important; }
.rodape a:hover{ color:#fff !important; }

/* ---------- Detalhes ---------- */
a{ color:var(--cdm-deep); }
a:hover{ color:var(--cdm-ink); }
::selection{ background:var(--cdm-rose); color:#fff; }