/* ===== Base (tema escuro) ===== */
:root{
  --bg: #0b0b12;
  --card: #141425;
  --muted: #9ca3af;
  --primary: #a855f7; /* roxo */
  --accent: #22d3ee;  /* ciano */
  --text: #f3f4f6;
}

*{ box-sizing: border-box; }
html,body{ height:100%; }
body {
  font-family: 'Segoe UI', Arial, sans-serif;
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
}

/* IMPORTANTÍSSIMO: conteúdo acima do fundo */
header, main, footer { position: relative; z-index: 1; }

header {
  background: linear-gradient(90deg, #1b1b2d 0%, #181830 100%);
  padding: 30px 0 20px 0;
  text-align: center;
  box-shadow: 0 2px 10px rgba(0,0,0,.35);
}
header img { height: 90px; margin-bottom: 10px; filter: drop-shadow(0 2px 8px rgba(168,85,247,.35)); }
h1 { color: var(--text); font-size: 2rem; margin: 6px 0 0 0; letter-spacing: 1px; }

main { max-width: 1100px; margin: 30px auto; padding: 0 20px; }

section {
  padding: 24px 20px;
  margin: 18px 0;
  background: var(--card);
  border-radius: 14px;
  box-shadow: 0 4px 16px rgba(0,0,0,.25);
}

h2 { color: var(--text); margin-bottom: 18px; font-size: 1.5rem; }

/* ===== Fundo por categoria (bem visível) ===== */
#bg-categoria{
  position: fixed;
  inset: 0;
  z-index: 0;              /* <<< antes era -1 (sumia atrás do body) */
  pointer-events: none;
}
#bg-categoria .bg-slide{
  position:absolute; inset:0;
  background:#000;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  opacity:0;                  /* começa invisível */
  transition: opacity 600ms ease;
  will-change: opacity, background-image;
}

/* fundo ativo */
body.bg-on #bg-categoria .bg-slide.show{ opacity: .65; }

/* Virada (gif) um pouco mais forte */
body.cat-virada.bg-on #bg-categoria .bg-slide.show{ opacity: .8; }

/* Mobile: levemente mais forte */
@media (max-width: 600px){
  body.bg-on #bg-categoria .bg-slide.show{ opacity: .72; }
}

/* ===== Produtos/cards ===== */
.produto {
  display: inline-block;
  width: 240px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  margin: 14px;
  padding: 16px 12px 18px 12px;
  text-align: center;
  vertical-align: top;
  background: linear-gradient(135deg, #151530 0%, #12122a 100%);
  box-shadow: 0 2px 12px rgba(0,0,0,.25);
  transition: transform .15s, box-shadow .15s, border-color .15s;
  position: relative;
}
.produto:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 8px 24px rgba(168,85,247,.25);
  border-color: rgba(168,85,247,.45);
}
.img-produto{
  width: 180px; height: 180px; object-fit: contain; border-radius: 10px; margin-bottom: 12px;
  background: #0f0f1d; box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
}
.produto h4{ color:#fff; margin:10px 0 6px; font-size:1.1rem; }
.produto p{ margin:6px 0; color: var(--muted); font-size: .98rem; }
.price{ color:#fff; }

.img-produto-container{ position: relative; display:inline-block; }
.lupa-icon{
  position:absolute; bottom:12px; right:12px;
  background: rgba(255,255,255,0.85);
  border-radius:50%; padding:7px; display:none; cursor:pointer;
  box-shadow:0 2px 8px rgba(168,85,247,.25);
}
.img-produto-container:hover .lupa-icon,
.img-produto-container:focus .lupa-icon{ display:block; }
.lupa-icon svg{ width:26px; height:26px; fill:#a855f7; }

.produto input[type="number"]{
  width: 70px; padding: 8px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 8px; font-size: 1rem; margin: 8px 0 10px;
  background: #0f0f1d; color:#fff;
}
.produto input[type="number"]:focus{ outline: none; border-color: var(--primary); }

.produto button{
  background: linear-gradient(90deg, var(--primary) 0%, var(--accent) 100%);
  color:#0b0b12; border:none; border-radius: 10px; padding: 10px 18px;
  font-size: 1rem; font-weight: 800; cursor: pointer; margin-top: 8px;
  box-shadow: 0 2px 10px rgba(34,211,238,.25);
}
.produto button:hover{ filter: brightness(1.05); }

/* botão de vídeo/efeito */
.btn-video{
  display:inline-block; margin: 6px 0 8px; padding:8px 12px; border-radius: 8px;
  text-decoration:none; font-weight:700; font-size:.95rem;
  background: rgba(34,211,238,.12); color:#9be7f2;
  border:1px solid rgba(34,211,238,.35);
}
.btn-video:hover{ background: rgba(34,211,238,.2); }

/* swatches e chips (variantes) */
.variant-block{ margin: 10px 0 6px; }
.variant-label{ color:#d1d5db; font-weight:700; margin-right:8px; }
.swatch-wrap{ display:flex; gap:8px; margin-top:6px; }
.swatch{
  width:26px; height:26px; border-radius:6px; border:2px solid rgba(255,255,255,.25);
  background: linear-gradient(135deg, #ff78b3 0%, #60a5fa 100%);
  cursor:pointer;
}
.swatch.selected{ outline:2px solid #fff; outline-offset:2px; }
.variant-note{ font-size:.9rem; color:#9ca3af; margin-top:4px; }

.chips{ display:flex; gap:8px; flex-wrap:wrap; margin-top:6px; }
.chip{
  background:#0f0f1d; color:#e5e7eb; border:1px solid rgba(255,255,255,.18);
  padding:6px 10px; border-radius: 999px; cursor:pointer; font-weight:700;
}
.chip.selected{ border-color: var(--primary); color:#fff; }

/* Carrinho */
#carrinho{ min-height: 60px; }
.item-carrinho{
  display:flex; align-items:center; background:#0f0f1d; border:1px solid rgba(255,255,255,.12);
  border-radius:8px; margin-bottom:12px; padding:8px 12px; box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
.item-carrinho img{ width:54px; height:54px; object-fit:contain; border-radius:6px; margin-right:14px; background:#0b0b12; }
.item-carrinho span{ flex:1; color:#fff; font-weight:700; font-size: 1rem; }
.item-carrinho button{
  background:#ef4444; color:#fff; border:none; border-radius:6px; padding:7px 14px; font-weight:800; cursor:pointer;
}
.item-carrinho button:hover{ filter: brightness(1.05); }

.valor-total-destaque{
  background: linear-gradient(90deg, var(--primary) 0%, var(--accent) 100%);
  color:#0b0b12; font-size:1.15rem; font-weight: 900; padding: 14px 0;
  border-radius: 10px; margin-top: 10px; text-align:center;
}

/* Modais */
.modal-produto{
  display:none; position:fixed; z-index:9999; inset:0;
  background: rgba(0,0,0,0.7); justify-content:center; align-items:center;
}
.modal-produto.ativo{ display:flex; }
.modal-conteudo{
  background: #0f0f1d; border-radius: 16px; padding: 28px 24px; text-align:center;
  max-width: 95vw; max-height: 90vh; position:relative; color:#fff;
  box-shadow: 0 8px 32px rgba(0,0,0,.45);
}
.modal-img{ max-width: 360px; max-height: 360px; width: 90vw; height:auto; border-radius:12px; margin-bottom:12px; }
.modal-fechar{ position:absolute; top:8px; right:14px; font-size:2rem; color:#fff; cursor:pointer; background:none; border:none; }

/* Categorias (tabs) */
.categoria-btn{
  background:#0f0f1d; border:1px solid rgba(255,255,255,.12); color:#e5e7eb;
  padding:10px 18px; margin-right:8px; border-radius: 999px; cursor:pointer; font-weight:800;
}
.categoria-btn.ativo, .categoria-btn:hover{
  background: linear-gradient(90deg, var(--primary) 0%, var(--accent) 100%);
  color:#0b0b12; border-color: transparent;
}

/* Form */
.form-entrega{ background:#0f0f1d; border-radius:14px; box-shadow: 0 2px 12px rgba(0,0,0,.25); padding: 24px 18px; }
.form-row{ display:flex; flex-wrap:wrap; gap:18px; margin-bottom:16px; }
.form-group{ flex:1 1 180px; display:flex; flex-direction:column; }
.form-group label{ font-weight:700; color:#e5e7eb; margin-bottom:4px; }
.form-group input, .form-group select{
  padding:10px; border:1px solid rgba(255,255,255,.15); border-radius:8px; background:#141425; color:#fff;
}
.form-group input:focus, .form-group select:focus{ outline:none; border-color: var(--primary); }
.mensagem-idade{ color:#fca5a5; font-weight:700; font-size:.95rem; display:none; margin-top:2px; }

.termo-container{ display:flex; align-items:flex-start; gap:8px; margin: 12px 0 18px; font-size:.98rem; color:#d1d5db; }
.termo-label a{ color:#9be7f2; text-decoration:underline; }
.modal-termo{ display:none; position:fixed; z-index:9999; inset:0; background: rgba(0,0,0,.6); justify-content:center; align-items:center; }
.modal-termo.ativo{ display:flex; }
.modal-termo-conteudo{
  background:#0f0f1d; color:#fff; border-radius: 12px; padding: 24px 18px; max-width: 700px; width:95vw; max-height:80vh; overflow:auto; position:relative;
}
.modal-termo-fechar{ position:absolute; top:8px; right:14px; font-size:2rem; color:#fff; cursor:pointer; background:none; border:none; }
.texto-termo{ white-space:pre-wrap; font-size:1rem; }

/* Responsivo */
@media (max-width: 900px){
  .produto{ width:45vw; min-width:180px; max-width:95vw; }
  .img-produto{ width: 140px; height:140px; }
}
@media (max-width: 600px){
  main{ padding: 0 2vw; }
  .produto{ width: 98vw; margin:10px 0; padding: 10px 2vw; }
  .img-produto{ width: 90vw; height: 90vw; max-width: 220px; max-height:220px; }
  section{ padding: 12px 2vw; }
}

/* ===== WhatsApp Floating ===== */
.whats-wrap{
  position: fixed;
  right: clamp(12px, 2vw, 22px);
  bottom: clamp(12px, 2vw, 22px);
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Botão */
.whats-fab{
  position: relative;
  width: 64px; height: 64px;
  border-radius: 50%;
  border: 0;
  background:#0b0f16; /* fallback escuro */
  display:grid; place-items:center;
  cursor:pointer;
  box-shadow:
    0 8px 30px rgba(0,0,0,.35),
    inset 0 0 0 1px rgba(255,255,255,.04);
  outline: none;
  transition: transform .2s ease, box-shadow .2s ease;
}

/* Ícone */
.whats-icon{
  width: 34px; height: 34px;
  filter: drop-shadow(0 2px 6px rgba(37,211,102,.6));
}

/* Robô */
.whats-bot{
  position: absolute;
  top:-8px; left:-8px;
  font-size:18px;
}

/* Anel neon pulsando */
.whats-ring{
  position:absolute; inset:0;
  border-radius:50%;
  box-shadow: 0 0 0 0 rgba(37,211,102,.65);
  animation: whatsPulse 2.2s ease-out infinite;
  pointer-events:none;
}
@keyframes whatsPulse{
  0%   {box-shadow: 0 0 0 0 rgba(37,211,102,.65);}
  70%  {box-shadow: 0 0 0 16px rgba(37,211,102,0);}
  100% {box-shadow: 0 0 0 0 rgba(37,211,102,0);}
}

/* Hover/Focus */
.whats-fab:hover,
.whats-fab:focus-visible{
  transform: translateY(-1px) scale(1.02);
  box-shadow:
    0 10px 34px rgba(37,211,102,.25),
    0 0 0 3px rgba(37,211,102,.25),
    inset 0 0 0 1px rgba(255,255,255,.06);
}

/* Tooltip (balãozinho) */
.whats-tooltip{
  color: #e5ffe9;
  background: linear-gradient(135deg, rgba(11,15,22,.92), rgba(15,24,20,.92));
  border: 1px solid rgba(37,211,102,.25);
  box-shadow: 0 10px 24px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.04);
  backdrop-filter: blur(6px);
  padding: 10px 12px;
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.2;
  transform: translateX(8px);
  opacity: .95;
  user-select: none;
}
.whats-tooltip strong{ color:#7CFC98; }

/* Mobile: tooltip mais discreto */
@media (max-width: 520px){
  .whats-tooltip{
    display:none;
  }
  .whats-fab{ width:60px; height:60px; }
}

/* Acessibilidade: respeita redução de movimento */
@media (prefers-reduced-motion: reduce){
  .whats-ring{ animation: none; }
  .whats-fab{ transition: none; }
}

.whats-wrap{
  position:fixed; right:20px; bottom:20px;
  display:flex; align-items:center; gap:12px;
  padding:10px 14px; border-radius:999px;
  background:#0e1a0f; border:1px solid rgba(0,255,120,.25);
  text-decoration:none; z-index:9999;
  box-shadow:0 8px 30px rgba(0,0,0,.4);
}
.whats-wrap:hover{ transform:translateY(-1px); }
.whats-logo{ width:44px; height:44px; border-radius:50%; }
.whats-cta{ display:flex; flex-direction:column; line-height:1.1; }
.whats-cta strong{ color:#eafff3; font-size:14px; }
.whats-cta span{ color:#a6ffcf; font-size:12px; opacity:.9; }

.whats-glow{
  position:absolute; inset:-6px; border-radius:999px;
  box-shadow:0 0 0 0 rgba(0,255,120,.55),
             0 0 24px 6px rgba(0,255,120,.35) inset;
  pointer-events:none; transition:box-shadow .25s ease;
}
.whats-wrap:hover .whats-glow{
  box-shadow:0 0 0 3px rgba(0,255,120,.65),
             0 0 28px 10px rgba(0,255,120,.45) inset;
}
.whats-bot{
  width:28px; height:28px; object-fit:cover; border-radius:50%;
  opacity:.9;
}

/* Garantias de clicabilidade: nada bloqueia o clique */
.whats-wrap, .whats-wrap *{ cursor:pointer; }
.whats-glow, .whats-bot{ pointer-events:none; }