/* =========================
   CRAFTD-ish (premium clean)
   Loja Integrada - CSS Base
   ========================= */

/* 1) Fonte (troque se quiser) */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap");

/* 2) Variáveis globais */
:root{
  --bg: #ffffff;
  --text: #0b0b0b;
  --muted: #6b6b6b;
  --line: rgba(0,0,0,.12);

  --accent: #0b0b0b;       /* preto */
  --accent-2: #ffffff;     /* branco */

  --radius: 10px;
  --radius-sm: 8px;
  --shadow: 0 10px 30px rgba(0,0,0,.06);

  --container: 1200px;

  --titleTracking: .06em;  /* “cara” de luxo (caixa alta) */
  --btnPadY: 12px;
  --btnPadX: 18px;
}

/* 3) Base */
html, body{
  background: var(--bg) !important;
  color: var(--text) !important;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
}

a{ color: var(--text); }
a:hover{ opacity: .85; }

p, li, span, small{ color: inherit; }

/* Container (muitos temas usam .conteiner/.container) */
.conteiner,
.container,
#corpo .conteiner,
#corpo .container{
  max-width: var(--container) !important;
}

/* 4) Top bar / aviso (se existir) */
.barra-inicial,
.barra-topo,
.topbar,
.barra-cabecalho{
  background: #fff !important;
  border-bottom: 1px solid var(--line) !important;
}

.barra-inicial * ,
.barra-topo * ,
.topbar *{
  color: var(--text) !important;
  font-weight: 600;
}

/* 5) Header / Menu */
#cabecalho,
.cabecalho,
.header{
  background: #fff !important;
  border-bottom: 1px solid var(--line) !important;
}

#cabecalho .logo,
.cabecalho .logo{
  filter: contrast(120%);
}

#cabecalho .menu,
.cabecalho .menu,
.menu,
.menu.superior{
  background: transparent !important;
}

#cabecalho .menu a,
.cabecalho .menu a,
.menu a{
  color: var(--text) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: var(--titleTracking) !important;
  font-size: 12px !important;
}

#cabecalho .menu a:hover,
.menu a:hover{
  opacity: .75;
}

/* 6) Busca */
.busca input,
#cabecalho .busca input,
.campo-busca input{
  border: 1px solid var(--line) !important;
  border-radius: 999px !important;
  padding: 10px 14px !important;
  box-shadow: none !important;
}

.busca button,
.campo-busca button{
  border-radius: 999px !important;
}

/* 7) Botões (CTA “preto no branco” estilo CRAFTD) */
button,
.botao,
.btn,
a.botao,
input[type="submit"],
input[type="button"]{
  border-radius: 999px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: var(--titleTracking) !important;
  padding: var(--btnPadY) var(--btnPadX) !important;
  transition: transform .12s ease, opacity .12s ease, box-shadow .12s ease !important;
}

.botao.principal,
.btn-primary,
a.botao.principal,
input[type="submit"]{
  background: var(--accent) !important;
  color: var(--accent-2) !important;
  border: 1px solid var(--accent) !important;
}

.botao.principal:hover,
.btn-primary:hover,
a.botao.principal:hover{
  opacity: .92;
  transform: translateY(-1px);
  box-shadow: var(--shadow);
}

/* Botão secundário */
.botao.secundario,
.btn-secondary,
a.botao.secundario{
  background: #fff !important;
  color: var(--text) !important;
  border: 1px solid var(--text) !important;
}
.botao.secundario:hover{
  opacity: .9;
  transform: translateY(-1px);
}

/* 8) Títulos (vitrine, categorias, seções) */
h1, h2, h3, .titulo, .titulo-categoria, .titulo-vitrine{
  color: var(--text) !important;
  font-weight: 900 !important;
  letter-spacing: .02em;
}

.titulo,
.titulo-vitrine,
.titulo-categoria{
  text-transform: uppercase !important;
  letter-spacing: var(--titleTracking) !important;
}

/* 9) Cards de produto (vitrine/listagem) */
.listagem .produto,
.vitrine .produto,
.produtos .produto,
.produto-lista,
.item-produto{
  background: #fff !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius) !important;
  overflow: hidden !important;
  box-shadow: none !important;
  transition: transform .12s ease, box-shadow .12s ease !important;
}

.listagem .produto:hover,
.vitrine .produto:hover,
.produtos .produto:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

.listagem .produto .nome-produto,
.produto .nome-produto,
.produto .nome,
.produto a.nome-produto{
  font-weight: 800 !important;
  color: var(--text) !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
  font-size: 12px !important;
}

.listagem .preco,
.preco-produto,
.produto .preco,
.produto .preco-promocional{
  font-weight: 800 !important;
  color: var(--text) !important;
}

/* 10) Badges (promo, desconto) */
.etiqueta-promo,
.selo-desconto,
.tag-promocao,
.selo-oferta{
  background: #fff !important;
  color: var(--text) !important;
  border: 1px solid var(--text) !important;
  border-radius: 999px !important;
  text-transform: uppercase !important;
  font-weight: 800 !important;
  letter-spacing: .06em !important;
}

/* 11) Página de produto */
.pagina-produto .nome-produto,
#produto .nome-produto,
.produto-detalhe .nome-produto{
  text-transform: uppercase !important;
  letter-spacing: .05em !important;
  font-weight: 900 !important;
}

.pagina-produto .preco-produto,
#produto .preco-produto{
  font-size: 20px !important;
  font-weight: 900 !important;
}

.pagina-produto .parcelas,
#produto .parcelas{
  color: var(--muted) !important;
}

/* 12) Inputs / selects */
input, select, textarea{
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: none !important;
}

input:focus, select:focus, textarea:focus{
  outline: none !important;
  border-color: rgba(0,0,0,.35) !important;
}

/* 13) Carrinho / caixas */
.caixa,
.box,
.painel,
#carrinho .caixa{
  border: 1px solid var(--line) !important;
  border-radius: var(--radius) !important;
  box-shadow: none !important;
  background: #fff !important;
}

/* 14) Rodapé */
#rodape,
.rodape,
.footer{
  background: #fff !important;
  border-top: 1px solid var(--line) !important;
}

#rodape .titulo,
.rodape .titulo{
  text-transform: uppercase !important;
  letter-spacing: var(--titleTracking) !important;
  font-weight: 900 !important;
}

#rodape a{ color: var(--text) !important; }
#rodape a:hover{ opacity: .75; }

/* 15) Responsivo – aumentar respiro */
@media (max-width: 768px){
  :root{ --container: 96vw; }
  h1{ font-size: 24px !important; }
  .titulo, .titulo-vitrine{ font-size: 16px !important; }
}