/* ============================================================
   Favela Chick Moda Masculina — Identidade visual "Ouro e esmeralda na quebrada"
   Conceito: streetwear com atitude premium — preto absoluto de fundo,
   dourado como cor principal, com verde esmeralda e branco como
   acentos secundários.
   Paleta: preto total + dourado clássico + verde esmeralda + branco.
   Tipografia: Bricolage Grotesque (display, geométrica e cheia de
   personalidade) + Inter (corpo) + Space Mono (preços/códigos).
   Assinatura: "linha de alfaiate" — costura ouro, esmeralda e branco
   que atravessa a página como um acabamento de grife.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,700;12..96,800&family=Inter:wght@400;500;600;700&family=Space+Mono:wght@400;700&display=swap');

:root {
  --cor-fundo: #000000;
  --cor-fundo-alt: #0A0A0A;
  --cor-texto: #F5F5F2;
  --cor-texto-suave: #9B9890;
  --cor-borda: #262420;

  --cor-violeta: #D4AF37;       /* cor principal (dourado) — botões, links */
  --cor-violeta-escura: #0A0A0A; /* quase preto — fundo do menu admin */
  --cor-rosa: #FFFFFF;          /* acento — branco */
  --cor-turquesa: #167A54;      /* acento — verde esmeralda escuro */
  --cor-laranja: #D4AF37;       /* acento — dourado clássico */
  --cor-amarelo: #E8C766;       /* acento — dourado claro (hover/brilho) */

  --cor-sucesso: #1E9E6B;       /* verde esmeralda — também usado como cor de sucesso */
  --cor-alerta: #E5534B;

  --raio: 14px;
  --raio-pill: 999px;
  --sombra: 0 4px 16px rgba(0, 0, 0, 0.6);
  --sombra-forte: 0 10px 28px rgba(0, 0, 0, 0.75);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--cor-fundo);
  color: var(--cor-texto);
  font-family: 'Inter', sans-serif;
  line-height: 1.55;
}

h1, h2, h3, .display {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--cor-texto);
  margin: 0 0 .4em;
}

h1 { font-size: 3rem; line-height: 1.05; }
h2 { font-size: 1.7rem; }
h3 { font-size: 1.1rem; font-weight: 700; }

a { color: var(--cor-violeta); text-decoration: none; font-weight: 600; }
a:hover { color: var(--cor-amarelo); }

.mono { font-family: 'Space Mono', monospace; }

/* --- Assinatura: "linha de alfaiate" multicor --- */
.ponto-corrido {
  border: none;
  height: 6px;
  margin: 2.5rem 0;
  border-radius: var(--raio-pill);
  background: repeating-linear-gradient(
    to right,
    var(--cor-violeta) 0 24px,
    var(--cor-sucesso) 24px 48px,
    var(--cor-rosa) 48px 72px
  );
  opacity: .85;
}

/* --- Layout geral --- */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

header.topo {
  background: rgba(11, 11, 11, 0.9);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--cor-borda);
  position: sticky;
  top: 0;
  z-index: 20;
}

.topo .barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.5rem;
  max-width: 1200px;
  margin: 0 auto;
}

.logo {
  display: inline-flex;
  align-items: center;
}
.logo-img {
  height: 40px;
  width: auto;
  display: block;
}
.logo .marca-pontinho {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--cor-rosa);
  display: inline-block;
}
.logo span { color: var(--cor-violeta); }

.nav-links { display: flex; gap: 1.7rem; align-items: center; }
.nav-links a { color: var(--cor-texto); font-weight: 600; }
.nav-links a:hover { color: var(--cor-violeta); }

.carrinho-btn {
  position: relative;
  background: var(--cor-violeta);
  color: var(--cor-fundo) !important;
  padding: .6rem 1.2rem;
  border-radius: var(--raio-pill);
  font-weight: 700;
}
.carrinho-btn:hover { background: var(--cor-amarelo); }
.carrinho-conta {
  position: absolute;
  top: -8px; right: -10px;
  background: var(--cor-texto);
  color: var(--cor-fundo);
  font-size: .7rem;
  font-weight: 800;
  border-radius: 50%;
  width: 21px; height: 21px;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--cor-fundo);
}

/* --- Hero --- */
.hero {
  position: relative;
  padding: 3.5rem 0 3rem;
  overflow: hidden;
}
.hero-tarja {
  position: absolute;
  top: -60px; right: -60px;
  width: 260px; height: 260px;
  border-radius: 50%;
  background: var(--cor-amarelo);
  opacity: .35;
  z-index: 0;
}
.hero-conteudo { position: relative; z-index: 1; max-width: 640px; }
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--cor-fundo-alt);
  color: var(--cor-violeta);
  font-weight: 700; font-size: .82rem;
  padding: .4rem .9rem;
  border-radius: var(--raio-pill);
  margin-bottom: 1rem;
  border: 1px solid var(--cor-borda);
}
.hero p.subtitulo {
  color: var(--cor-texto-suave);
  font-size: 1.05rem;
  max-width: 52ch;
}

/* --- Filtro / categorias como pills coloridas --- */
.filtro-categorias {
  display: flex; gap: .6rem; flex-wrap: wrap; margin: 1.5rem 0 2rem;
}
.pill-categoria {
  padding: .5rem 1.1rem;
  border-radius: var(--raio-pill);
  border: 2px solid var(--cor-borda);
  background: var(--cor-fundo-alt);
  color: var(--cor-texto);
  font-weight: 600;
  font-size: .9rem;
  cursor: pointer;
  transition: all .15s ease;
}
.pill-categoria:hover, .pill-categoria.ativa {
  border-color: var(--cor-violeta);
  background: var(--cor-violeta);
  color: var(--cor-fundo);
}

.barra-busca {
  display: flex; gap: .8rem; margin-bottom: 1rem; flex-wrap: wrap;
}
.barra-busca input {
  flex: 1; min-width: 220px;
}

/* --- Botões --- */
.btn {
  display: inline-block;
  padding: .75rem 1.5rem;
  border-radius: var(--raio-pill);
  border: 2px solid var(--cor-texto);
  background: transparent;
  color: var(--cor-texto);
  font-weight: 700;
  font-family: inherit;
  font-size: 1rem;
  cursor: pointer;
  transition: all .15s ease;
  text-align: center;
}
.btn:hover { background: var(--cor-texto); color: var(--cor-fundo); }
.btn-primario { background: var(--cor-violeta); color: var(--cor-fundo); border-color: var(--cor-violeta); }
.btn-primario:hover { background: var(--cor-amarelo); border-color: var(--cor-amarelo); color: var(--cor-fundo); box-shadow: var(--sombra-forte); }
.btn-dourado { background: var(--cor-laranja); border-color: var(--cor-laranja); color: var(--cor-fundo); }
.btn-dourado:hover { background: var(--cor-turquesa); border-color: var(--cor-turquesa); color: var(--cor-texto); }
.btn-bloco { display: block; width: 100%; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* --- Cartões de produto --- */
.grade-produtos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1.6rem;
  margin: 1.5rem 0 3rem;
}

.cartao-produto {
  position: relative;
  background: var(--cor-fundo-alt);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  overflow: hidden;
  box-shadow: var(--sombra);
  transition: transform .18s ease, box-shadow .18s ease;
}
.cartao-produto:hover {
  transform: translateY(-5px) rotate(-0.5deg);
  box-shadow: var(--sombra-forte);
}
.cartao-produto .tag-categoria {
  position: absolute;
  top: .8rem; left: .8rem;
  z-index: 2;
  font-size: .72rem;
  font-weight: 700;
  padding: .3rem .7rem;
  border-radius: var(--raio-pill);
  color: var(--cor-fundo);
}
.cartao-produto img, .cartao-produto .placeholder-img {
  width: 100%; aspect-ratio: 1/1; object-fit: cover;
  background: var(--cor-fundo-alt);
}
.cartao-produto .info { padding: 1.1rem; }
.cartao-produto h3 { font-size: 1.02rem; margin-bottom: .4rem; font-weight: 700; }
.preco {
  font-family: 'Space Mono', monospace;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--cor-texto);
}
.preco-de {
  text-decoration: line-through;
  color: var(--cor-texto-suave);
  font-size: .85rem;
  margin-right: .4rem;
  font-weight: 400;
}

/* --- Formulários --- */
.form-grupo { margin-bottom: 1.1rem; }
.form-grupo label {
  display: block;
  font-weight: 700;
  font-size: .88rem;
  margin-bottom: .4rem;
  color: var(--cor-texto);
}
input, select, textarea {
  width: 100%;
  padding: .7rem .9rem;
  border: 2px solid var(--cor-borda);
  border-radius: 10px;
  font-family: inherit;
  font-size: 1rem;
  background: var(--cor-fundo-alt);
  color: var(--cor-texto);
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--cor-violeta);
  box-shadow: 0 0 0 4px rgba(212, 175, 55, .18);
}

.cartao {
  background: var(--cor-fundo-alt);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  padding: 1.6rem;
  box-shadow: var(--sombra);
}

.faixa {
  padding: .45rem 1rem;
  border-radius: var(--raio-pill);
  font-size: .78rem;
  font-weight: 700;
  display: inline-block;
}
.faixa-pendente { background: #3A2A0D; color: #E8C766; }
.faixa-pago, .faixa-entregue { background: #123626; color: var(--cor-sucesso); }
.faixa-cancelado, .faixa-expirado { background: #3A1414; color: var(--cor-alerta); }
.faixa-enviado, .faixa-separando { background: #2A2210; color: var(--cor-violeta); }

.mensagem-erro { color: var(--cor-alerta); font-weight: 700; margin: .5rem 0; }
.mensagem-sucesso { color: var(--cor-sucesso); font-weight: 700; margin: .5rem 0; }

footer.rodape {
  border-top: 1px solid var(--cor-borda);
  margin-top: 4rem;
  padding: 2.2rem 0;
  text-align: center;
  color: var(--cor-texto-suave);
  font-size: .9rem;
}

/* --- Utilitários de layout em 2 colunas (empilham no celular) --- */
.grade-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  align-items: start;
}
.grade-checkout {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 2rem;
  align-items: start;
}

/* --- Tabelas: rolagem horizontal em vez de espremer no celular --- */
.tabela-scroll {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.tabela-scroll .tabela-admin { min-width: 560px; }

/* ============================================================
   Responsivo — celular
   ============================================================ */
@media (max-width: 640px) {
  body { font-size: 15px; }
  .container { padding: 0 1.1rem; }

  h1 { font-size: 1.9rem; }
  h2 { font-size: 1.35rem; }

  .topo .barra { flex-direction: column; gap: .7rem; padding: .8rem 1.1rem; }
  .nav-links { flex-wrap: wrap; justify-content: center; gap: 1rem; row-gap: .6rem; }
  .logo-img { height: 30px; }

  .hero { padding: 2rem 0 1.5rem; }
  .hero-tarja { display: none; }

  .grade-2col, .grade-checkout { grid-template-columns: 1fr; gap: 1.25rem; }

  .grade-produtos {
    grid-template-columns: repeat(2, 1fr);
    gap: .9rem;
  }
  .cartao-produto h3 { font-size: .92rem; }
  .cartao-produto .info { padding: .7rem; }
  .preco { font-size: 1rem; }

  .cartao { padding: 1.1rem; }

  .barra-busca { flex-direction: column; align-items: stretch; }
  .filtro-categorias { gap: .4rem; }
  .pill-categoria { padding: .4rem .85rem; font-size: .85rem; }

  /* linhas de formulário lado a lado (preço/estoque, dimensões do produto
     etc.) quebram em coluna única em vez de espremer os campos */
  .form-linha { flex-wrap: wrap !important; }
  .form-linha > * { min-width: 140px; flex: 1 1 140px !important; }

  .btn { padding: .65rem 1.1rem; font-size: .95rem; }

  .cartoes-resumo { grid-template-columns: repeat(2, 1fr); gap: .8rem; }
  .cartao-resumo { padding: .9rem; }
  .cartao-resumo .valor { font-size: 1.3rem; }

  .admin-conteudo { padding: 1.1rem; }
  .tabela-admin th, .tabela-admin td { padding: .55rem .6rem; font-size: .85rem; }
}

@media (max-width: 400px) {
  .grade-produtos { grid-template-columns: 1fr; }
  .cartoes-resumo { grid-template-columns: 1fr; }
}