/* ============================================================
   Loja de Bordados — Identidade visual v2 "Caixa de linhas"
   Conceito: uma caixa de linhas de bordado aberta em cima da mesa —
   fundo claro e neutro, cores vivas de carretel como acento.
   Paleta: branco quente + tinta quase-preta + 4 cores de linha
   (rosa, turquesa, laranja, violeta) usadas com intenção, não à toa.
   Tipografia: Bricolage Grotesque (display, geométrica e cheia de
   personalidade) + Inter (corpo) + Space Mono (preços/códigos).
   Assinatura: "linha de alfaiate" — costura multicor que atravessa
   a página como se fosis um fio puxado de um carretel de verdade.
   ============================================================ */

@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: #FFFBF5;
  --cor-fundo-alt: #F4EFFB;
  --cor-texto: #1B1024;
  --cor-texto-suave: #6E6480;
  --cor-borda: #E9E1F5;

  --cor-violeta: #6C3CE9;      /* cor principal — botões, links */
  --cor-violeta-escura: #4C24B3;
  --cor-rosa: #FF2E7E;         /* categoria / acento 2 */
  --cor-turquesa: #00C2A8;     /* categoria / acento 3 */
  --cor-laranja: #FF8A00;      /* categoria / acento 4 */
  --cor-amarelo: #FFD23F;      /* detalhe / destaque pontual */

  --cor-sucesso: #00A870;
  --cor-alerta: #E63955;

  --raio: 14px;
  --raio-pill: 999px;
  --sombra: 0 4px 16px rgba(27, 16, 36, 0.08);
  --sombra-forte: 0 10px 28px rgba(108, 60, 233, 0.18);
}

* { 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-violeta-escura); }

.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-rosa) 0 24px,
    var(--cor-amarelo) 24px 48px,
    var(--cor-turquesa) 48px 72px,
    var(--cor-violeta) 72px 96px
  );
  opacity: .85;
}

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

header.topo {
  background: rgba(255, 251, 245, 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 {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--cor-texto);
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}
.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-texto);
  color: #fff !important;
  padding: .6rem 1.2rem;
  border-radius: var(--raio-pill);
  font-weight: 700;
}
.carrinho-btn:hover { background: var(--cor-violeta); }
.carrinho-conta {
  position: absolute;
  top: -8px; right: -10px;
  background: var(--cor-laranja);
  color: #1B1024;
  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-escura);
  font-weight: 700; font-size: .82rem;
  padding: .4rem .9rem;
  border-radius: var(--raio-pill);
  margin-bottom: 1rem;
}
.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: #fff;
  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: #fff;
}

.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: #fff; }
.btn-primario { background: var(--cor-violeta); color: #fff; border-color: var(--cor-violeta); }
.btn-primario:hover { background: var(--cor-violeta-escura); border-color: var(--cor-violeta-escura); box-shadow: var(--sombra-forte); }
.btn-dourado { background: var(--cor-laranja); border-color: var(--cor-laranja); color: #1B1024; }
.btn-dourado:hover { background: #E67A00; border-color: #E67A00; }
.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: #fff;
  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: #fff;
}
.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: #fff;
  color: var(--cor-texto);
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--cor-violeta);
  box-shadow: 0 0 0 4px rgba(108,60,233,.14);
}

.cartao {
  background: #fff;
  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: #FFF1D6; color: #A15C00; }
.faixa-pago, .faixa-entregue { background: #D7F7EC; color: var(--cor-sucesso); }
.faixa-cancelado, .faixa-expirado { background: #FDE1E6; color: var(--cor-alerta); }
.faixa-enviado, .faixa-separando { background: #EDE6FB; color: var(--cor-violeta-escura); }

.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;
}

@media (max-width: 640px) {
  .topo .barra { flex-direction: column; gap: .8rem; }
  h1 { font-size: 2.2rem; }
  .hero-tarja { display: none; }
}