/* ═══════════════════════════════════════════════════════════════
   PUB DO ELETRÔNICO — tema do site (cores + ajustes globais)
   Mexa nas cores AQUI e vale para todas as páginas de uma vez.
   ═══════════════════════════════════════════════════════════════ */
:root{
  --bg:#F3F4F7;--mist:#FFFFFF;--areia:#FFFFFF;--hachura-listra:#FFFFFF;
  --ink:#12161F;--ink-soft:#5B6472;--texto-desligado:#98A1AE;
  --blue:#FFAD00;--blue-soft:#FFAD001f;--green:#FFAD00;--green-soft:#FFAD001f;
  --comprar:#FFAD00;--comprar-hover:#FFC340;--orange:#FFAD00;--orange-soft:#FFF3DA;
  --marrom:#FFAD00;--marrom-hover:#FFC340;--marrom-escuro:#FFC340;--marrom-escuro-hover:#FFAD00;
  --line:#E4E7EC;--line-forte:#C9CFD8;--bege-linha:#E4E7EC;--branco-quente:#FFFFFF;
  --danger:#E5484D;--danger-hover:#C93B3F;--danger-soft:#FDEBEC;--danger-linha:#F3C6C9;
  --amarelo-estrela:#FFC340;--ok:#14B8A6;
  --aviso-texto:#8A5A00;--aviso-borda:#FFAD00;--aviso-fundo:#FFF6E0;--alerta:#FFAD00;
  --hachura:repeating-linear-gradient(135deg,#F0F1F4 0 8px,#E8E9ED 8px 16px);
  --shadow:0 20px 50px -28px rgba(15,23,42,.22);
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --display:'Sora','Inter',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;
}
html,body{background:var(--bg);color:var(--ink)}
body{overflow-x:hidden;margin:0}
[data-sacola-count][hidden]{display:none!important}

/* marca no topo e no rodapé */
.brand img{height:38px!important;width:auto!important}
.m-logo{height:34px!important;width:auto!important}
.r-marca img{height:44px!important;width:auto!important}

/* faixa e botões laranja com texto escuro */
.faixa{background:var(--blue)!important;color:#0A0D12!important;
  font-family:var(--sans)!important;font-weight:700!important;letter-spacing:normal!important;
  text-transform:none!important;font-size:clamp(.82rem,1.7vw,.95rem)!important;padding:.6rem 1rem!important;
  display:flex!important;align-items:center;justify-content:center;gap:1.2rem;flex-wrap:wrap;text-align:left!important}
.sacola-badge,.tabbar .on span{color:#0A0D12}
.pub-faixa-obs{font-weight:500;opacity:.82;font-size:.86em}
@media (max-width:640px){.pub-faixa-obs{display:block;font-size:.72em;margin-top:.05rem}}

/* telefone + botão de WhatsApp do lado direito da faixa — só desktop, a
   faixa compacta do celular (pub-mfaixa) não tem esse bloco */
.faixa-contato{display:flex;align-items:center;gap:.6rem;flex:none}
.faixa-fone{display:flex;align-items:center;gap:.4rem;color:#0A0D12;text-decoration:none;font-size:.85rem;font-weight:700;opacity:.9}
.faixa-fone:hover{opacity:1;text-decoration:underline}
.faixa-zap-btn{display:flex;align-items:center;gap:.4rem;background:#128C4A;color:#fff!important;text-decoration:none;font-size:.8rem;font-weight:700;padding:.4rem .8rem;border-radius:999px;white-space:nowrap}
.faixa-zap-btn:hover{background:#0F7A3F}
@media (max-width:900px){.faixa-contato{display:none}}
.add{color:#080A0F!important;border-color:#080A0F!important}
.badge.oferta{color:#080A0F!important}

/* etiqueta "de / % OFF" usada nos cards gerados no cadastro de produtos */
.pub-de{font-family:var(--mono);font-size:.82rem;color:var(--ink-soft);text-decoration:line-through;margin-right:.4rem}
.pub-off{font-family:var(--mono);font-size:.72rem;font-weight:700;background:#00A650;color:#fff;border-radius:6px;padding:.22rem .5rem;letter-spacing:.02em}
.pub-off-pix{background:#0F766E;font-family:var(--sans);letter-spacing:0;text-transform:none}
.preco-pix-label{display:inline-block;font-family:var(--mono);font-size:.72rem;font-weight:700;color:#0F766E;margin-top:.1rem}
.preco-parcela{display:inline-block;font-size:.74rem;color:var(--ink-soft);margin-top:.15rem}
.preco-parcela.preco-parcela-ok{color:#0F766E;font-weight:600}
.pub-entrega{font-size:.7rem;color:var(--ink-soft);margin:.35rem 0 0}
.pub-entrega b{color:var(--ink);font-family:var(--mono)}

/* zoom seguindo o cursor (precos.js) — precisa ser rápido, não a transição lenta padrão */
.thumb img,.pp-main img,.esc-foto img{transition:transform .06s linear!important}

/* filtro na LATERAL ESQUERDA das páginas de departamento (produtos.js monta) —
   não em cima. Só "ordenar por" + categorias; sem filtro de condição. */
.pg-corpo{display:flex;align-items:flex-start;gap:2.2rem}
.pg-lateral{flex:none;width:200px}
.pg-lat-bloco{margin-bottom:1.7rem}
.pg-lat-lbl{display:block;font-family:var(--mono);font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:.65rem}
.pg-lateral select{width:100%;font:inherit;font-size:.86rem;background:var(--mist);border:1px solid var(--line);border-radius:9px;padding:.5rem .6rem;color:var(--ink)}
.pg-lat-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.1rem}
.pg-lat-lista button{display:block;width:100%;text-align:left;font:inherit;font-size:.88rem;background:none;border:0;border-radius:8px;padding:.5rem .6rem;color:var(--ink-soft);cursor:pointer}
.pg-lat-lista button:hover{background:var(--bg);color:var(--ink)}
.pg-lat-lista button.on{background:var(--blue-soft);color:var(--ink);font-weight:700}
.pg-conteudo{flex:1;min-width:0}
/* título de grupo quando "Todos" mostra tudo separado por categoria (em lista) */
.grupo-cab{grid-column:1/-1;list-style:none}
.grupo-cab h2{font-family:var(--display);font-size:1.2rem;font-weight:800;margin:1.8rem 0 1rem;letter-spacing:-.01em}
.grupo-cab:first-child h2{margin-top:0}
@media(max-width:820px){
  .pg-corpo{flex-direction:column;gap:1.1rem}
  .pg-lateral{width:100%;display:flex;flex-wrap:wrap;gap:0 1.6rem}
  .pg-lat-lista{flex-direction:row;flex-wrap:wrap;gap:.4rem}
  .pg-lat-lista button{width:auto;border:1px solid var(--line);border-radius:999px}
}

/* marca d'água "P" fixa em toda foto de produto (precos.js monta a estrutura) */
.pub-protegida{position:relative;overflow:hidden}
.pub-zoom{width:100%;height:100%;will-change:transform}
.pub-zoom img{width:100%!important;height:100%!important;object-fit:contain!important;display:block}
.pub-zoom,.m-campeao-foto .pub-zoom,.pp-main .pub-zoom,.esc-foto .pub-zoom{display:flex;align-items:center;justify-content:center}
.pub-wm-ov{position:absolute;inset:0;pointer-events:none;z-index:15}
.pub-wm-ov .pub-wm{position:absolute!important;left:.5rem!important;top:.5rem!important;right:auto!important;bottom:auto!important;width:clamp(18px,8%,34px)!important;height:auto!important;object-fit:contain!important;opacity:.62;pointer-events:none;filter:drop-shadow(0 1px 3px rgba(0,0,0,.35))}
/* no campeão o selo "Campeão de vendas" já mora no canto superior esquerdo — marca d'água vai pro direito */
.m-campeao-foto .pub-wm-ov .pub-wm{left:auto!important;right:.6rem!important}

/* fundo em degradê suave atrás da foto (produto inteiro enquadrado, sem cortar) */
.pp-main,.esc-foto,.pub-campeao .m-campeao-foto,.mm-foto{background:radial-gradient(circle at 50% 42%,#fff 0%,var(--mist) 55%,var(--line) 145%)!important}
.mm-foto img{object-fit:contain!important}
@media (prefers-reduced-motion:reduce){.thumb img,.pp-main img,.esc-foto img{transition:none!important}}

/* menu com pré-visualização ao passar o mouse (parciais.js monta o conteúdo) */
.mm-painel{max-height:min(32rem,calc(100vh - 8rem));overflow-y:auto}
/* departamento sem nenhuma dimensão de filtro (ex.: Power Bank, Cases,
   Perfumes) — vitrine com vários produtos ocupando o painel inteiro, em vez
   de deixar colunas de filtro vazias e só 1 produto perdido no canto */
.mm-vitrine{display:grid;grid-template-columns:repeat(auto-fit,minmax(9.5rem,1fr));gap:1.4rem;max-width:52rem}
.mm-destaques .mm-peca{max-width:15rem}
@media (width<=62rem){.mm-vitrine{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* texto de gancho + gatilho de confiança acima da faixa de avaliações —
   "cuidado com loja fake" é um medo real de quem compra eletrônico usado
   pela internet; a resposta honesta é mostrar que os depoimentos são reais */
.pub-social-eyebrow{display:inline-flex;align-items:center;gap:.35rem;font-family:var(--mono);font-size:.68rem;font-weight:700;letter-spacing:.03em;color:var(--danger);background:var(--danger-soft);border:1px solid var(--danger-linha);border-radius:999px;padding:.32rem .75rem;margin-bottom:.6rem}
.pub-social-sub{color:var(--ink-soft);font-size:.86rem;line-height:1.55;max-width:46ch;margin:.4rem auto 0}

/* faixa de avaliações reais (home, index.html monta o conteúdo) — rola sozinha
   em loop; a lista vem duplicada uma vez, então anima só até -50% */
.pub-avaliacoes{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.pub-aval-trilho{display:flex;align-items:stretch;gap:1rem;width:max-content;animation:pub-aval-rola 46s linear infinite}
.pub-avaliacoes:hover .pub-aval-trilho{animation-play-state:paused}
@keyframes pub-aval-rola{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.pub-aval-card{flex:none;width:300px;background:var(--mist);border:1px solid var(--line);border-radius:14px;padding:1.1rem 1.2rem;display:flex;flex-direction:column;gap:.7rem;position:relative;overflow:hidden}
.pub-aval-card::before{content:'”';position:absolute;top:-1.4rem;right:.4rem;font-family:var(--display);font-size:6rem;line-height:1;color:var(--ink);opacity:.05;pointer-events:none}
.pub-aval-estrelas{color:#FFC340;font-size:.85rem;letter-spacing:.12em}
.pub-aval-texto{font-size:.9rem;line-height:1.6;color:var(--ink);margin:0;flex:1;display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden;position:relative}
.pub-aval-autor{display:flex;align-items:center;gap:.55rem;font-family:var(--mono);font-size:.76rem;font-weight:600;color:var(--ink-soft);margin-top:auto;padding-top:.3rem;border-top:1px solid var(--line)}
.pub-aval-avatar{flex:none;width:1.9rem;height:1.9rem;border-radius:50%;background:linear-gradient(135deg,#C13584,var(--blue));color:#fff;display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:.82rem;text-transform:uppercase}
@media (max-width:560px){.pub-aval-card{width:250px}}

/* seção "Venha nos visitar" (endereço/horário/whatsapp/mapa) — logo abaixo
   dos depoimentos, com a marca "Pub do Eletrônico" (amarelo + preto) no topo */
.contato-marca{display:flex;align-items:baseline;gap:.35rem;font-family:var(--display);font-weight:800;font-size:1.25rem;letter-spacing:-.02em;margin-bottom:.6rem}
.contato-marca b{color:var(--blue)}
.contato-grid{display:grid;grid-template-columns:1fr;gap:1.4rem;margin-top:1.6rem}
@media(min-width:760px){.contato-grid{grid-template-columns:1.05fr .95fr;align-items:start}}
.contato-info{background:var(--mist);border:1px solid var(--line);border-radius:16px;padding:1.8rem;display:flex;flex-direction:column;gap:1.4rem}
.contato-linha{display:flex;gap:1rem;align-items:flex-start}
.contato-icone{flex:none;width:44px;height:44px;border-radius:11px;background:var(--blue-soft);color:var(--blue);display:grid;place-items:center}
.contato-rotulo{font-family:var(--mono);font-size:.66rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:.25rem}
.contato-valor{font-size:.92rem;color:var(--ink);line-height:1.55}
.contato-link{color:var(--blue);text-decoration:none}
.contato-link:hover{text-decoration:underline}
.contato-sub{font-size:.78rem;color:var(--ink-soft);margin-top:.15rem}
.contato-zap-btn{margin-top:.2rem;display:flex;align-items:center;justify-content:center;gap:.55rem;background:#128C4A;color:#fff;font-weight:700;font-size:.94rem;padding:.95rem;border-radius:11px;text-decoration:none}
.contato-zap-btn:hover{background:#0F7A3F}
.contato-mapa{border:1px solid var(--line);border-radius:16px;overflow:hidden;aspect-ratio:4/3;background:var(--mist)}
.contato-mapa iframe{width:100%;height:100%;border:0;display:block}
@media (prefers-reduced-motion:reduce){.pub-aval-trilho{animation:none;overflow-x:auto;width:auto}}

/* ─────────── páginas de destino (departamentos) ─────────── */
.pg-secao{max-width:1180px;margin:0 auto;padding:1.6rem 1.1rem 5rem}
.secao-titulo{font-family:var(--display);font-weight:800;font-size:clamp(1.6rem,4.5vw,2.2rem);letter-spacing:-.02em;margin:.4rem 0 .2rem}
.secao-sub{color:var(--ink-soft);font-family:var(--mono);font-size:.82rem;margin:0 0 1.4rem}
.secao-vazia{border:1px dashed var(--line-forte);border-radius:14px;padding:2.4rem 1.2rem;text-align:center;color:var(--ink-soft);font-size:.9rem;line-height:1.6;background:var(--mist);overflow-wrap:anywhere}
.secao-carregando{padding:2.6rem 1rem;text-align:center;color:var(--texto-desligado);font-family:var(--mono);font-size:.8rem;letter-spacing:.04em}
@media (max-width:560px){.pg-secao{padding:1.1rem .9rem 6rem}}

/* ─────────── barra compacta do celular (parciais.js) ─────────── */
.pub-mtopo{display:none}
@media (width<=760px){
  .pub-mtopo{display:block;position:sticky;top:0;z-index:50;background:var(--bg);border-bottom:1px solid var(--line)}
  .pub-mfaixa{background:var(--blue);color:#0A0D12;font-family:var(--sans);font-size:.82rem;font-weight:700;letter-spacing:normal;text-align:center;padding:.5rem .7rem;line-height:1.35}
  .pub-mtopo-linha{display:flex;align-items:center;gap:.6rem;padding:.55rem .9rem}
  .pub-mtopo-marca img{height:30px;width:auto;display:block}
  .pub-mtopo-busca{flex:1;display:flex;align-items:center;gap:.45rem;background:var(--mist);border:1px solid var(--line);border-radius:10px;padding:.45rem .65rem;color:var(--ink-soft)}
  .pub-mtopo-busca svg{flex:none}
  .pub-mtopo-busca input{flex:1;min-width:0;background:0 0;border:0;outline:0;color:var(--ink);font:inherit;font-size:.85rem}
  .pub-mtopo-sacola{position:relative;color:var(--ink);display:inline-flex;flex:none}
  .pub-mtopo-sacola .sacola-badge{position:absolute;top:-5px;right:-6px;min-width:15px;height:15px;padding:0 3px;border-radius:999px;background:var(--blue);color:#0A0D12;border:2px solid var(--bg);font-family:var(--mono);font-size:.56rem;font-weight:700;line-height:1;display:grid;place-items:center}
  .pub-mtopo-sacola .sacola-badge[hidden]{display:none}
  .pub-mdeptos{display:flex;gap:.4rem;overflow-x:auto;padding:.15rem .9rem .6rem;scrollbar-width:none}
  .pub-mdeptos::-webkit-scrollbar{display:none}
  .pub-mdeptos a{flex:none;font-size:.8rem;font-weight:500;color:var(--ink-soft);text-decoration:none;background:var(--mist);border:1px solid var(--line);border-radius:999px;padding:.35rem .8rem}
  .pub-mdeptos a[aria-current="page"]{color:#0A0D12;background:var(--blue);border-color:var(--blue);font-weight:700}
}

/* botão flutuante do WhatsApp (parciais.js cria, em todas as páginas) —
   mostra uma dica "Falar no WhatsApp" ao passar o mouse (só desktop) */
.pub-zap-flutuante{position:fixed;right:1.1rem;bottom:1.3rem;z-index:80;width:56px;height:56px;border-radius:50%;background:#25C15B;color:#fff;display:grid;place-items:center;box-shadow:0 10px 26px -8px rgba(15,23,42,.45);transition:transform .15s,background-color .15s}
.pub-zap-flutuante:hover{background:#20a850;transform:scale(1.06)}
.pub-zap-dica{position:absolute;right:calc(100% + .7rem);top:50%;transform:translateY(-50%) translateX(4px);background:#0A0D12;color:#fff;font-size:.8rem;font-weight:600;white-space:nowrap;padding:.5rem .85rem;border-radius:9px;opacity:0;pointer-events:none;transition:opacity .15s,transform .15s;box-shadow:0 8px 20px -8px rgba(15,23,42,.5)}
.pub-zap-flutuante:hover .pub-zap-dica,.pub-zap-flutuante:focus-visible .pub-zap-dica{opacity:1;transform:translateY(-50%) translateX(0)}
@media (hover:none){.pub-zap-dica{display:none}}
@media (width<=760px){.pub-zap-flutuante{bottom:calc(68px + .9rem);right:.9rem;width:50px;height:50px}}

/* barra de navegação inferior (mobile) — fundo branco em vez da faixa laranja;
   ícones em tinta escura, e o texto de cada aba na cor dourada da marca com
   um contorno preto fino em volta das letras (efeito "logo") */
.tabbar.svelte-12qhfyh{background:#fff!important}
.tabbar.svelte-12qhfyh .onda-bolso.svelte-12qhfyh{fill:#fff!important}
.tabbar.svelte-12qhfyh a{color:var(--ink)!important}
.tabbar.svelte-12qhfyh a span{color:var(--blue)!important;-webkit-text-stroke:.4px #12161F}
.tabbar.svelte-12qhfyh a.on{color:var(--ink)!important}
.tab-badge.svelte-12qhfyh{background:#fff!important}