:root{
  --preto:#181818;
  --topbar-cor:#c8342a ;  /* cor só da barra do topo — troque aqui sem afetar o resto do site */
  --amarelo:#f5b301;
  --amarelo-escuro:#8a6400;
  --verde-wpp:#25D366;
  --verde-wpp-escuro:#0d5c2e;
  --texto:#181818;
  --texto-sec:#6b6b68;
  --fundo:#ffffff;
  --fundo-suave:#f4f5f3;
  --borda:#e6e5e0;
  --card:#ffffff;
}

/* ===== TEMA ESCURO (visitante escolheu "Escuro" no seletor) =====
   Fica tudo escuro, inclusive a barra do topo e a faixa de
   categorias — ignora as cores personalizadas do admin, que só
   aparecem no modo "Padrão". */
[data-theme="escuro"]{
  --texto:#f0f0f0;
  --texto-sec:#b8b8b5;
  --fundo:#121212;
  --fundo-suave:#1e1e1e;
  --borda:#333333;
  --card:#1a1a1a;
}
[data-theme="escuro"] .topbar{background:#1a1a1a !important;}
[data-theme="escuro"] nav{background:#0d0d0d !important;}
[data-theme="escuro"] .faixa-rolante{background:#000000 !important;}
[data-theme="escuro"] .faixa-rolante-track span{color:#f5b301 !important;}
[data-theme="escuro"] .navlinks{color:#cfcfcf !important;}
[data-theme="escuro"] .marca-nome{color:#ffffff !important;}
[data-theme="escuro"] .busca input{background:rgba(255,255,255,.06);}

/* ===== TEMA CLARO (visitante escolheu "Claro" no seletor) =====
   Igual ao escuro, mas em tons claros neutros — também ignora as
   cores personalizadas do admin, pra ficar uniforme. */
[data-theme="claro"] .topbar{background:#f4f5f3 !important;}
[data-theme="claro"] nav{background:#e6e5e0 !important;}
[data-theme="claro"] .faixa-rolante{background:#f4f5f3 !important;}
[data-theme="claro"] .faixa-rolante-track span{color:#181818 !important;}
[data-theme="claro"] .navlinks{color:#3a3a3a !important;}
[data-theme="claro"] .marca-nome{color:#181818 !important;}
[data-theme="claro"] .busca input{background:rgba(0,0,0,.06);color:#181818;}
[data-theme="claro"] .busca input::placeholder{color:rgba(0,0,0,.5);}

body{ transition: background-color .2s ease, color .2s ease; }
*{box-sizing:border-box;}
body{margin:0;font-family:-apple-system,'Inter',Roboto,Arial,sans-serif;background:var(--fundo);color:var(--texto);}
a{text-decoration:none;color:inherit;}

header{background:var(--card);border-bottom:1px solid var(--borda);position:sticky;top:0;z-index:20;}
.topbar{background:var(--topbar-cor);}
.topbar-inner{display:flex;align-items:center;gap:20px;padding:16px 28px;max-width:1240px;margin:0 auto;}
.logo-img{height:44px;display:block;}

.marca-topo{display:flex;align-items:center;gap:4px;flex-shrink:0;white-space:nowrap;}
.marca-nome{
  color:var(--amarelo) !important;
  font-size:26px;
  font-family:'Archivo Black',Arial,sans-serif;
  letter-spacing:.01em;
}
.marca-nome sup{font-size:11px;}

.busca{flex:1;max-width:520px;min-width:0;position:relative;}
.busca input{width:100%;padding:11px 44px 11px 16px;border:2px solid var(--amarelo);border-radius:8px;font-size:14px;background:rgba(0,0,0,.18);color:#fff;}
.busca input::placeholder{color:rgba(255,255,255,.75);}
.busca input:focus{outline:none;background:rgba(0,0,0,.3);}

.wpp-icone-btn{
  flex-shrink:0;
  margin-left:auto;
  width:40px;height:40px;
  background:var(--verde-wpp);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:#fff;
}
.wpp-icone-btn:hover{background:var(--verde-wpp-escuro);}

.tema-toggle{
  flex-shrink:0;
  display:flex;
  align-items:center;
  gap:2px;
  background:rgba(0,0,0,.22);
  border:1px solid rgba(255,255,255,.25);
  border-radius:20px;
  padding:3px;
}
.tema-btn{
  width:30px;height:30px;
  border-radius:50%;
  border:none;
  background:transparent;
  color:rgba(255,255,255,.75);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  transition:background .15s ease, color .15s ease;
}
.tema-btn:hover{color:#fff;}
.tema-btn.ativo{
  background:var(--amarelo);
  color:#181818;
}

nav{background:#9c2a22;}
.nav-wrap{max-width:1240px;margin:0 auto;position:relative;display:flex;align-items:center;}
.navlinks{display:flex;gap:26px;padding:11px 40px;font-size:13px;color:#d6d6d3;overflow-x:auto;scrollbar-width:none;flex:1;min-width:0;}
.navlinks::-webkit-scrollbar{display:none;}
.navlinks a{white-space:nowrap;flex-shrink:0;}
.navlinks a:hover{color:var(--amarelo);}
.nav-seta{
  position:absolute;top:50%;transform:translateY(-50%);
  width:26px;height:26px;
  background:rgba(0,0,0,.25);
  border:none;border-radius:50%;
  color:var(--amarelo);
  font-size:15px;font-weight:700;
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  z-index:2;
  opacity:.85;
}
.nav-seta:hover{background:rgba(0,0,0,.4);opacity:1;}
.nav-seta-esq{left:6px;}
.nav-seta-dir{right:6px;}

.banner{background:var(--preto);color:#fff;padding:52px 28px;}
.banner-inner{max-width:1240px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:24px;}
.banner h1{font-size:28px;margin:0 0 10px;font-weight:700;max-width:520px;}
.banner p{color:#cfcfcf;margin:0;font-size:14.5px;max-width:420px;}
.banner .cta{background:var(--amarelo);color:#181818;padding:12px 24px;border-radius:8px;font-weight:700;font-size:14px;}

/* Banners gráficos do carrossel (estilo faixa promocional) */
.banner-grafico{
  display:flex;align-items:center;justify-content:space-between;
  padding:0 60px;position:relative;overflow:hidden;
}
.banner-1{background:linear-gradient(135deg,#181818 0%,#2b2b2b 100%);}
.banner-2{background:linear-gradient(135deg,#c81e1e 0%,#8f1414 100%);}
.banner-3{background:linear-gradient(135deg,#0a5c8a 0%,#073f5e 100%);}
.banner-grafico::before{
  content:"";position:absolute;top:-40%;right:-10%;width:340px;height:180%;
  background:repeating-linear-gradient(45deg,var(--amarelo) 0 26px,#181818 26px 52px);
  opacity:.9;transform:rotate(8deg);
}
.banner-conteudo{position:relative;z-index:2;color:#fff;max-width:520px;}
.banner-selo{display:inline-block;background:var(--amarelo);color:#181818;font-weight:800;font-size:12.5px;padding:6px 16px;border-radius:20px;margin-bottom:16px;letter-spacing:.03em;}
.banner-numero{font-size:88px;font-weight:900;line-height:.85;color:var(--amarelo);text-shadow:3px 3px 0 rgba(0,0,0,.25);}
.banner-numero span{font-size:44px;}
.banner-titulo-grande{font-size:38px;font-weight:800;line-height:1.1;margin-bottom:4px;}
.banner-texto{font-size:15px;color:rgba(255,255,255,.9);margin:8px 0 20px;line-height:1.5;}
.banner-cta{display:inline-block;background:#fff;color:#181818;padding:11px 22px;border-radius:7px;font-weight:700;font-size:13.5px;}
.banner-cta:hover{background:var(--amarelo);}
.banner-icone{position:relative;z-index:2;font-size:130px;opacity:.28;filter:drop-shadow(0 8px 20px rgba(0,0,0,.3));}

@media(max-width:900px){
  .banner-grafico{padding:0 24px;flex-direction:column;justify-content:center;text-align:center;gap:10px;}
  .banner-icone{font-size:70px;opacity:.2;}
  .banner-numero{font-size:56px;}
  .banner-titulo-grande{font-size:26px;}
}

/* Faixa rolante (aviso/promoção, entre categorias e carrossel) */
.faixa-rolante{overflow:hidden;white-space:nowrap;padding:8px 0;width:100%;height:auto;position:sticky;top:0;z-index:19;}
.faixa-rolante-track{
  display:flex;
  flex-wrap:nowrap;
  white-space:nowrap;
  will-change:transform;
  /* o movimento é feito por JavaScript (mais confiável em qualquer celular) */
}
.faixa-rolante-track span{
  white-space:nowrap;
  flex-shrink:0;
  flex-basis:auto;
  font-weight:700;
  letter-spacing:.02em;
  padding-right:0;
}

/* Carrossel */
.carrossel-wrap{position:relative;width:100%;height:340px;overflow:hidden;background:#111;}
.carrossel-slide{position:absolute;inset:0;opacity:0;transition:opacity .6s ease;}
.carrossel-slide.ativo{opacity:1;}
.carrossel-slide img{width:100%;height:100%;object-fit:cover;display:block;}
.carrossel-setas{position:absolute;top:50%;transform:translateY(-50%);width:100%;display:flex;justify-content:space-between;padding:0 18px;}
.carrossel-seta{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.9);border:none;font-size:16px;font-weight:700;color:#181818;cursor:pointer;}
.carrossel-dots{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);display:flex;gap:8px;}
.dot{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.5);border:none;padding:0;cursor:pointer;}
.dot.ativo{background:#fff;width:22px;border-radius:5px;}

.navlinks a.ativo{color:var(--amarelo);}

.breadcrumb{font-size:12.5px;color:var(--texto-sec);margin:0 0 20px;}
.breadcrumb a:hover{color:var(--amarelo-escuro);}

.btn-voltar{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--texto-sec);background:var(--fundo-suave);border:1px solid var(--borda);padding:8px 14px;border-radius:7px;margin-bottom:24px;}
.btn-voltar:hover{background:#fff;border-color:var(--amarelo);color:var(--texto);}

.produto-parcelas{font-size:11px;color:var(--texto-sec);}

/* Página de produto */
.pagina-produto{display:grid;grid-template-columns:1fr 1fr;gap:40px;}
.pp-galeria{background:var(--fundo-suave);border:1px solid var(--borda);border-radius:12px;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;overflow:hidden;}
.pp-galeria img{width:100%;height:100%;object-fit:cover;}
.pp-marca{color:var(--texto-sec);font-size:12.5px;font-weight:700;text-transform:uppercase;margin:0 0 4px;}
.pp-info h1{font-size:22px;margin:0 0 10px;}
.pp-sku{font-size:12px;color:#a8a69f;margin-bottom:14px;}
.pp-preco{font-size:30px;font-weight:800;color:var(--amarelo-escuro);margin:0 0 2px;}
.pp-parcelas{font-size:13px;color:var(--texto-sec);margin:0 0 14px;}
.pp-status{font-size:13px;font-weight:600;margin-bottom:18px;}
.pp-status.ok{color:#166534;}
.pp-status.indisponivel{color:#991b1b;}
.pp-btn-wpp{display:inline-flex;background:var(--verde-wpp);color:#fff;padding:14px 22px;border-radius:8px;font-size:15px;font-weight:700;margin-bottom:22px;}
.pp-btn-wpp:hover{background:var(--verde-wpp-escuro);}
.pp-desc{font-size:14px;line-height:1.7;color:var(--texto);}

main{max-width:1240px;margin:0 auto;padding:44px 28px 70px;}

.secao-header{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:20px;}
.secao-titulo{font-size:20px;font-weight:700;margin:0;}
.secao-sub{font-size:13px;color:var(--texto-sec);}

.categorias-wrap{position:relative;display:flex;align-items:center;gap:8px;margin-bottom:52px;}
.categorias{display:flex;gap:12px;overflow-x:auto;scroll-behavior:smooth;scrollbar-width:none;padding:2px;flex:1;}
.categorias::-webkit-scrollbar{display:none;}
.cat-card{flex:0 0 auto;width:150px;background:var(--fundo-suave);border-radius:10px;padding:22px 12px;text-align:center;border:1px solid transparent;}
.cat-card:hover{border-color:var(--amarelo);}
.cat-seta{flex:0 0 auto;width:38px;height:38px;border-radius:50%;background:var(--card);border:1px solid var(--borda);box-shadow:0 2px 8px rgba(0,0,0,.08);font-size:18px;font-weight:700;color:var(--preto);cursor:pointer;display:flex;align-items:center;justify-content:center;}
.cat-seta:hover{background:var(--amarelo);border-color:var(--amarelo);}
.cat-icone{width:100%;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;margin-bottom:10px;color:var(--preto);}
.cat-icone svg{width:56%;height:56%;}
.cat-foto{width:100%;aspect-ratio:1/1;border-radius:8px;overflow:hidden;margin-bottom:10px;background:var(--card);}
.cat-foto img{width:100%;height:100%;object-fit:cover;}
.cat-card p{margin:0;font-size:12.5px;font-weight:600;}
.cat-card:hover .cat-icone{color:var(--amarelo-escuro);}

.produtos{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.produto-card{background:var(--card);border:1px solid var(--borda);border-radius:10px;overflow:hidden;display:flex;flex-direction:column;}
.produto-card:hover{border-color:var(--amarelo);box-shadow:0 6px 18px rgba(0,0,0,.08);}
.produto-foto{aspect-ratio:1/1;background:var(--fundo-suave);display:flex;align-items:center;justify-content:center;overflow:hidden;font-size:30px;color:#b9c4cc;}
.produto-foto img{width:100%;height:100%;object-fit:cover;}
.produto-info{padding:13px 14px 15px;display:flex;flex-direction:column;gap:5px;flex:1;}
.produto-marca{font-size:10.5px;color:var(--texto-sec);text-transform:uppercase;font-weight:700;}
.produto-nome{font-size:13.5px;font-weight:600;line-height:1.35;min-height:36px;}
.produto-preco{font-size:19px;font-weight:800;color:var(--amarelo-escuro);margin-top:3px;}
.produto-estoque{font-size:11px;color:#166534;}
.btn-wpp{margin-top:9px;background:var(--verde-wpp);color:#fff;border:none;padding:10px;border-radius:7px;font-size:12.5px;font-weight:700;text-align:center;}
.btn-wpp:hover{background:var(--verde-wpp-escuro);}

.empty-state{border:1px dashed var(--borda);border-radius:10px;padding:40px;text-align:center;color:var(--texto-sec);grid-column:1/-1;}

.loja-fisica{background:var(--fundo-suave);border-radius:14px;padding:32px;margin-top:56px;display:grid;grid-template-columns:1.1fr 1fr;gap:32px;align-items:center;}
.loja-fisica img{width:100%;border-radius:10px;display:block;border:1px solid var(--borda);}
.loja-fisica-titulo{font-size:20px;font-weight:700;margin:0 0 10px;}
.loja-fisica-titulo .selo{background:var(--amarelo);color:#181818;font-size:11px;font-weight:800;padding:4px 10px;border-radius:5px;}
.loja-fisica p{font-size:14px;color:var(--texto-sec);line-height:1.8;}
.btn-rota{display:inline-flex;background:var(--preto);color:#fff;padding:11px 20px;border-radius:8px;font-size:13.5px;font-weight:600;margin-top:14px;}

.pagamentos{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap;}
.pagamentos span{background:var(--card);border:1px solid var(--borda);padding:6px 12px;border-radius:6px;font-size:12px;font-weight:600;color:var(--texto-sec);}

/* Missão, Visão e Valores */
.mvv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.mvv-card{background:var(--fundo-suave);border-radius:12px;padding:26px 22px;text-align:center;}
.mvv-icone{font-size:32px;margin-bottom:12px;}
.mvv-titulo{font-size:15px;font-weight:700;margin:0 0 8px;}
.mvv-texto{font-size:13.5px;color:var(--texto-sec);line-height:1.7;margin:0;}

footer{background:var(--preto);color:#b8b8b5;padding:44px 28px 24px;margin-top:20px;}
.footer-inner{max-width:1240px;margin:0 auto;display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:32px;font-size:13px;}
footer h4{color:#fff;font-size:13px;margin:0 0 10px;}
footer a:hover{color:#fff;}
.footer-bottom{max-width:1240px;margin:26px auto 0;padding-top:16px;border-top:1px solid #2a2a2a;font-size:12px;color:#777;text-align:center;}

.wpp-flutuante{position:fixed;bottom:24px;right:24px;width:56px;height:56px;background:var(--verde-wpp);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:26px;box-shadow:0 4px 14px rgba(0,0,0,.25);z-index:30;color:#fff;}

@media(max-width:900px){
  .cat-card{width:120px;}
  .produtos{grid-template-columns:repeat(2,1fr);}
  .loja-fisica{grid-template-columns:1fr;}
  .footer-inner{grid-template-columns:1fr;}
  .busca{display:none;}
  .topbar-inner{gap:12px;padding:12px 16px;}
  .navlinks{padding:10px 16px;gap:16px;font-size:12px;}
  main{padding:28px 16px 50px;}
  .marca-nome{font-size:19px;}
  .logo-img{height:34px;}
  .mvv-grid{grid-template-columns:1fr;}
}

@media(max-width:520px){
  .cat-card{width:104px;padding:16px 8px;}
  .cat-seta{display:none;}
  .produtos{grid-template-columns:repeat(2,1fr);gap:10px;}
  .produto-nome{font-size:12.5px;min-height:32px;}
  .produto-preco{font-size:16px;}
  .carrossel-wrap{height:220px;}
  .banner-titulo-grande{font-size:20px;}
  .banner-texto{font-size:12.5px;margin:4px 0 12px;}
  .banner-cta{padding:9px 16px;font-size:12.5px;}
  .banner-numero{font-size:40px;}
  .banner-icone{display:none;}
  .pagina-produto{grid-template-columns:1fr;}
  .wpp-flutuante{width:48px;height:48px;font-size:22px;bottom:16px;right:16px;}
  .marca-nome{font-size:15px;}
  .logo-img{height:28px;}
  .mvv-grid{grid-template-columns:1fr;}
  .nav-seta{width:22px;height:22px;font-size:13px;}
}