/* ============ Encomenda Paraguai — design base (padrao Compras Paraguai) ============ */
/* A Inter vem por <link> no <head> das paginas, nao por @import: dentro do CSS
   ela so era descoberta depois deste arquivo baixar, e travava a execucao de
   todo <script> da pagina — inclusive o que pede os produtos. */

:root{
  /* paleta tirada do logo: preto, ouro e prata cromada */
  --tinta:#0b0b0d; --tinta-2:#14151a; --tinta-3:#1e2027; --tinta-4:#2a2d36;
  --ouro-claro:#f8d078; --ouro:#c9a227; --ouro-escuro:#8c6414;
  --ouro-txt:#7a5a12;                 /* ouro legível sobre fundo claro */
  --prata:#e8eaec; --prata-fraco:#a8acb2;

  /* nomes antigos remapeados para a paleta nova */
  --azul:#1b1d26; --azul-esc:#0b0b0d; --azul-mais-esc:#000;
  --azul-clr:#c9a227; --azul-vivo:#2a2d36; --azul-cyan:#c9a227;
  --vermelho:#c9a227; --vermelho-esc:#a8871d;

  --verde:#1c7d4d; --amarelo:#c9a227;
  --txt:#1a1b20; --txt-fraco:#63666e; --txt-claro:#8b8e96;
  --linha:#e2ded4; --linha-clr:#eae7de;
  --bg:#f6f5f2; --bg-card:#fff; --bg-alt:#efece5; --bg-suave:#faf9f6;
  --raio:6px; --raio-g:10px;
  --sombra:0 1px 3px rgba(0,0,0,.10);
  --sombra-md:0 4px 16px rgba(0,0,0,.14);
  --container:1240px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
/* A pagina nunca rola de lado: o que escapar e cortado em vez de esticar o
   documento. 'clip' nao cria caixa de rolagem (a barra lateral sticky continua
   funcionando); 'hidden' fica so de reserva pra navegador antigo. */
html{overflow-x:hidden;max-width:100%}
@supports (overflow-x:clip){html{overflow-x:clip}}
body{
  font-family:Inter,Helvetica,Arial,sans-serif;
  background:var(--bg); color:var(--txt);
  font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font-family:inherit}
.container{max-width:var(--container);margin:0 auto;padding:0 15px;width:100%}
/* Em monitor grande o container cresce um pouco pra grade render mais colunas em
   vez de deixar margem vazia dos dois lados. Abaixo de 1500px nada muda. */
@media (min-width:1500px){:root{--container:1400px}}
@media (min-width:1750px){:root{--container:1560px}}
@media (min-width:2100px){:root{--container:1720px}}
.flex{display:flex}.column{flex-direction:column}.wrap{flex-wrap:wrap}
.ai-center{align-items:center}.jc-between{justify-content:space-between}
.jc-center{justify-content:center}.grow{flex-grow:1}
.hide-sm{display:block}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- Botoes ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  border:0;cursor:pointer;border-radius:var(--raio);
  padding:9px 16px;font-size:13px;font-weight:600;letter-spacing:.2px;
  transition:background .15s,transform .08s;white-space:nowrap;
}
.btn:active{transform:translateY(1px)}
.btn-azul{background:var(--azul);color:#fff}
.btn-azul:hover{background:var(--azul-vivo)}
.btn-vermelho{background:var(--vermelho);color:#fff}
.btn-vermelho:hover{background:var(--vermelho-esc)}
.btn-branco{background:#fff;color:var(--azul);border:1px solid var(--linha)}
.btn-branco:hover{background:var(--bg-alt)}
.btn-linha{background:transparent;color:var(--azul);border:1.5px solid var(--azul)}
.btn-linha:hover{background:var(--azul);color:#fff}
.btn-bloco{width:100%}
.btn-sm{padding:6px 12px;font-size:12px}
.btn-lg{padding:13px 26px;font-size:15px}

/* ---------- Header ---------- */
.header-top{background:var(--azul-mais-esc);color:#fff;font-size:12px}
.header-top .container{display:flex;align-items:center;justify-content:space-between;height:34px}
.header-top a{color:#dbe6ff}
.header-top a:hover{color:#fff}
.redes{display:flex;gap:14px;align-items:center}
.redes a{font-size:13px;opacity:.9}
.nav-topo ul{display:flex;gap:20px;list-style:none;margin:0;padding:0;align-items:center}

.header-meio{background:var(--azul);color:#fff;padding:14px 0}
.header-meio .container{display:flex;align-items:center;gap:22px}
.logo{display:flex;align-items:center;gap:10px;flex-shrink:0}
.logo-marca{font-size:21px;font-weight:800;letter-spacing:-.4px;line-height:1.05;color:#fff}
.logo-marca span{color:#ffd23f}
.logo-sub{font-size:10px;font-weight:500;color:#bcd2ff;letter-spacing:.6px;text-transform:uppercase}

.busca{flex-grow:1;position:relative;max-width:640px}
.busca input{
  width:100%;height:42px;border:0;border-radius:var(--raio);
  padding:0 48px 0 15px;font-size:14px;font-family:inherit;color:var(--txt);
}
.busca input:focus{outline:2px solid var(--azul-cyan)}
.busca button{
  position:absolute;right:0;top:0;height:42px;width:46px;border:0;cursor:pointer;
  background:var(--vermelho);color:#fff;border-radius:0 var(--raio) var(--raio) 0;font-size:15px;
}
.busca button:hover{background:var(--vermelho-esc)}
.busca-sug{
  position:absolute;top:46px;left:0;right:0;background:#fff;border-radius:var(--raio);
  box-shadow:var(--sombra-md);z-index:60;max-height:400px;overflow:auto;display:none;
}
.busca-sug.on{display:block}
.busca-sug a{display:flex;gap:10px;align-items:center;padding:8px 12px;border-bottom:1px solid var(--linha-clr);color:var(--txt)}
.busca-sug a:hover{background:var(--bg-alt)}
.busca-sug img{width:38px;height:38px;object-fit:contain;flex-shrink:0}
.busca-sug .s-nome{font-size:12.5px;line-height:1.3}
.busca-sug .s-preco{font-size:12px;font-weight:700;color:var(--azul);margin-left:auto;white-space:nowrap}

.acoes-header{display:flex;align-items:center;gap:18px;flex-shrink:0}
.acao{display:flex;align-items:center;gap:8px;font-size:12.5px;color:#fff;position:relative}
.acao:hover{opacity:.85}
.acao i{font-size:19px}
.acao-txt{display:flex;flex-direction:column;line-height:1.25}
.acao-txt b{font-weight:700}
.acao-txt small{font-size:10.5px;color:#bcd2ff}
.badge-num{
  position:absolute;top:-6px;left:12px;background:var(--vermelho);color:#fff;
  font-size:10px;font-weight:700;border-radius:20px;padding:1px 6px;min-width:18px;text-align:center;
}

/* ---------- Menu de categorias ---------- */
.header-baixo{background:var(--azul-esc);position:relative;z-index:50}
.header-baixo .container{display:flex;align-items:center;gap:4px;height:42px}
.btn-departamentos{
  display:flex;align-items:center;gap:9px;background:var(--vermelho);color:#fff;
  height:42px;padding:0 18px;font-weight:700;font-size:13px;cursor:pointer;border:0;
}
.btn-departamentos:hover{background:var(--vermelho-esc)}
.menu-rapido{display:flex;list-style:none;margin:0;padding:0 0 0 8px;gap:2px;overflow:hidden}
.menu-rapido a{display:block;padding:0 13px;line-height:42px;color:#dbe6ff;font-size:13px;white-space:nowrap}
.menu-rapido a:hover{background:var(--azul);color:#fff}

.painel-dep{
  position:absolute;top:42px;left:0;right:0;background:#fff;box-shadow:var(--sombra-md);
  display:none;border-top:3px solid var(--vermelho);
}
.painel-dep.on{display:block}
.painel-dep .container{display:block;height:auto;padding:22px 15px}
.dep-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:20px 26px}
.dep-bloco h4{
  margin:0 0 9px;font-size:13px;color:var(--azul);text-transform:uppercase;
  letter-spacing:.3px;border-bottom:2px solid var(--linha-clr);padding-bottom:6px;
}
.dep-bloco ul{list-style:none;margin:0;padding:0}
.dep-bloco li a{display:block;padding:3px 0;font-size:12.5px;color:var(--txt-fraco)}
.dep-bloco li a:hover{color:var(--vermelho)}
.dep-bloco .ver-mais{font-size:12px;font-weight:600;color:var(--azul);margin-top:6px;display:inline-block}

/* ---------- Faixa de cotacao ---------- */
.faixa-cotacao{background:#fff;border-bottom:1px solid var(--linha);font-size:12px}
.faixa-cotacao .container{display:flex;align-items:center;gap:22px;height:36px;flex-wrap:wrap}
.cot-item{display:flex;align-items:center;gap:6px;color:var(--txt-fraco)}
.cot-item b{color:var(--txt)}
.cot-item .alta{color:var(--verde);font-weight:700}
.cot-item .baixa{color:var(--vermelho);font-weight:700}

/* ---------- Breadcrumb ---------- */
.breadcrumbs{padding:12px 0;font-size:12px;color:var(--txt-fraco)}
.breadcrumbs a{color:var(--azul)}
.breadcrumbs a:hover{text-decoration:underline}
.breadcrumbs .sep{margin:0 6px;color:var(--txt-claro)}
.breadcrumbs strong{color:var(--txt);font-weight:600}

/* ---------- Titulos ---------- */
.titulo-secao{
  display:flex;align-items:center;justify-content:space-between;
  margin:26px 0 14px;gap:14px;
}
.titulo-secao h2{
  margin:0;font-size:19px;font-weight:700;color:var(--azul);
  display:flex;align-items:center;gap:9px;
}
.titulo-secao h2::before{content:'';width:4px;height:20px;background:var(--vermelho);border-radius:2px}
.titulo-secao .link-mais{font-size:12.5px;font-weight:600;color:var(--azul)}
.titulo-secao .link-mais:hover{color:var(--vermelho)}

/* ---------- Card de produto ---------- */
.grade-produtos{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px;
}
.card{
  background:var(--bg-card);border:1px solid var(--linha-clr);border-radius:var(--raio);
  padding:12px;display:flex;flex-direction:column;position:relative;
  transition:box-shadow .16s,border-color .16s,transform .16s;
}
.card:hover{box-shadow:var(--sombra-md);border-color:#c7d4ee;transform:translateY(-2px);z-index:2}
.card-img{
  height:170px;display:flex;align-items:center;justify-content:center;
  margin-bottom:10px;overflow:hidden;
}
.card-img img{max-height:170px;width:auto;object-fit:contain}
.card-nome{
  font-size:12.5px;line-height:1.4;color:var(--txt);margin-bottom:7px;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;min-height:52px;
}
.card:hover .card-nome{color:var(--azul)}
.card-carac{font-size:11px;color:var(--txt-claro);margin-bottom:8px;min-height:15px;
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
/* quem vende: oferta traz a loja, modelo traz quantas lojas vendem */
.card-loja{
  display:flex;align-items:center;gap:4px;font-size:11px;color:var(--txt-claro);
  margin:-2px 0 7px;text-decoration:none;line-height:1.25;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.card-loja::before{
  content:"";width:11px;height:11px;flex:none;opacity:.65;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 4h20l1.2 4.6a3.2 3.2 0 0 1-6.2.9 3.2 3.2 0 0 1-6 0 3.2 3.2 0 0 1-6 0 3.2 3.2 0 0 1-6.2-.9L2 4Z'/%3E%3Cpath d='M4.5 12.4V21h6v-5.6h3V21h6v-8.6a4.8 4.8 0 0 1-3-1.1 4.8 4.8 0 0 1-6 0 4.8 4.8 0 0 1-6 0Z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 4h20l1.2 4.6a3.2 3.2 0 0 1-6.2.9 3.2 3.2 0 0 1-6 0 3.2 3.2 0 0 1-6 0 3.2 3.2 0 0 1-6.2-.9L2 4Z'/%3E%3Cpath d='M4.5 12.4V21h6v-5.6h3V21h6v-8.6a4.8 4.8 0 0 1-3-1.1 4.8 4.8 0 0 1-6 0 4.8 4.8 0 0 1-6 0Z'/%3E%3C/svg%3E") center/contain no-repeat;
}
a.card-loja:hover{color:var(--azul);text-decoration:underline}
.card-loja.multi{color:var(--azul);font-weight:600}
.card-precos{margin-top:auto}
.card-de{font-size:11px;color:var(--txt-claro)}
.card-usd{font-size:19px;font-weight:800;color:var(--azul);line-height:1.15}
.card-brl{font-size:12px;color:var(--txt-fraco);margin-bottom:9px}
.card-brl b{color:var(--verde);font-weight:700}
.selo{
  position:absolute;top:9px;left:9px;background:var(--vermelho);color:#fff;
  font-size:10px;font-weight:700;padding:2px 8px;border-radius:20px;letter-spacing:.3px;
}
.selo-azul{background:var(--azul-cyan)}
.card-fav{
  position:absolute;top:8px;right:8px;background:#fff;border:1px solid var(--linha-clr);
  width:29px;height:29px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  cursor:pointer;color:var(--txt-claro);font-size:13px;
}
.card-fav:hover,.card-fav.on{color:var(--vermelho);border-color:var(--vermelho)}

/* ---------- Layout listagem ---------- */
/* minmax(0,1fr) e min-width:0: sem isso a coluna do conteudo estica ate caber o
   maior filho (a faixa 'vistos recentemente' e as prateleiras rolam de lado e
   pedem centenas de px), empurrando a pagina inteira pra fora da tela. */
.layout{display:grid;grid-template-columns:250px minmax(0,1fr);gap:22px;align-items:start;padding-bottom:40px}
.layout>*{min-width:0}
.filtros{background:#fff;border:1px solid var(--linha-clr);border-radius:var(--raio);position:sticky;top:12px}
.filtro-bloco{border-bottom:1px solid var(--linha-clr);padding:14px}
.filtro-bloco:last-child{border-bottom:0}
.filtro-bloco h3{
  margin:0 0 10px;font-size:13px;font-weight:700;color:var(--azul);
  text-transform:uppercase;letter-spacing:.3px;
}
.filtro-lista{list-style:none;margin:0;padding:0;max-height:260px;overflow:auto}
.filtro-lista li a,.filtro-lista li label{
  display:flex;align-items:center;gap:7px;padding:4px 0;font-size:12.5px;color:var(--txt-fraco);cursor:pointer;
}
.filtro-lista li a:hover,.filtro-lista li label:hover{color:var(--vermelho)}
.filtro-lista .qtd{margin-left:auto;font-size:11px;color:var(--txt-claro)}
.filtro-lista li.ativo>a{color:var(--vermelho);font-weight:700}
.faixa-preco{display:flex;gap:7px;align-items:center}
.faixa-preco input{
  width:100%;height:32px;border:1px solid var(--linha);border-radius:var(--raio);
  padding:0 8px;font-size:12px;font-family:inherit;
}

.barra-lista{
  background:#fff;border:1px solid var(--linha-clr);border-radius:var(--raio);
  padding:11px 14px;display:flex;align-items:center;gap:14px;margin-bottom:14px;flex-wrap:wrap;
}
.barra-lista h1{margin:0;font-size:20px;font-weight:700;color:var(--azul)}
.barra-lista .cont{font-size:12.5px;color:var(--txt-claro)}
.barra-lista select{
  height:34px;border:1px solid var(--linha);border-radius:var(--raio);
  padding:0 9px;font-size:12.5px;font-family:inherit;background:#fff;cursor:pointer;
}

/* ---------- Paginacao ---------- */
.paginacao{display:flex;gap:5px;justify-content:center;align-items:center;padding:26px 0;flex-wrap:wrap}
.paginacao a,.paginacao span{
  min-width:34px;height:34px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--linha);border-radius:var(--raio);background:#fff;
  font-size:13px;color:var(--txt-fraco);cursor:pointer;padding:0 9px;
}
.paginacao a:hover{border-color:var(--azul);color:var(--azul)}
.paginacao .atual{background:var(--azul);border-color:var(--azul);color:#fff;font-weight:700}
.paginacao .off{opacity:.4;pointer-events:none}

.paginacao-topo{padding:0 0 14px}
.paginacao-topo .paginacao{padding:0;justify-content:flex-end}
.paginacao-topo .paginacao a,.paginacao-topo .paginacao span{height:30px;min-width:30px;font-size:12.5px}
.pag-resumo{font-size:12px;color:var(--txt-claro);margin-right:auto;align-self:center}

/* ---------- Categorias em destaque ---------- */
.grade-categorias{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px}
.cat-card{
  background:#fff;border:1px solid var(--linha-clr);border-radius:var(--raio);
  padding:16px 10px;text-align:center;transition:.16s;
}
.cat-card:hover{border-color:var(--azul);box-shadow:var(--sombra-md);transform:translateY(-2px)}
.cat-card .ic{
  width:52px;height:52px;margin:0 auto 9px;border-radius:50%;
  background:linear-gradient(135deg,var(--azul),var(--azul-cyan));
  display:flex;align-items:center;justify-content:center;color:#fff;font-size:21px;
}
.cat-card .nm{font-size:12.5px;font-weight:600;color:var(--txt);line-height:1.3}
.cat-card .qt{font-size:11px;color:var(--txt-claro);margin-top:3px}

/* ---------- Marcas ---------- */
.grade-marcas{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:10px}
.marca-card{
  background:#fff;border:1px solid var(--linha-clr);border-radius:var(--raio);
  padding:14px 10px;text-align:center;font-size:13px;font-weight:600;color:var(--txt);
  transition:.16s;display:flex;flex-direction:column;gap:3px;align-items:center;justify-content:center;min-height:72px;
}
.marca-card:hover{border-color:var(--azul);color:var(--azul);box-shadow:var(--sombra)}
.marca-card small{font-size:11px;font-weight:400;color:var(--txt-claro)}
.alfabeto{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:16px}
.alfabeto a{
  width:31px;height:31px;display:flex;align-items:center;justify-content:center;
  background:#fff;border:1px solid var(--linha);border-radius:var(--raio);
  font-size:12.5px;font-weight:600;color:var(--txt-fraco);
}
.alfabeto a:hover,.alfabeto a.on{background:var(--azul);border-color:var(--azul);color:#fff}

/* ---------- Rodape ---------- */
.rodape{background:#1b1f26;color:#aab2bd;margin-top:44px;font-size:12.5px}
.rodape-topo{padding:34px 0 26px}
.rodape-grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:28px}
.rodape h4{color:#fff;font-size:13px;margin:0 0 12px;text-transform:uppercase;letter-spacing:.4px}
.rodape ul{list-style:none;margin:0;padding:0}
.rodape li{margin-bottom:6px}
.rodape a:hover{color:#fff}
.rodape-base{
  border-top:1px solid #2b3038;padding:15px 0;font-size:11.5px;color:#79818e;
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
}
.rodape .aviso{
  background:#232830;border-left:3px solid var(--amarelo);padding:10px 13px;
  border-radius:var(--raio);font-size:11.5px;line-height:1.55;margin-top:14px;color:#c3cad4;
}

/* ---------- Selos de confiança no rodapé ---------- */
.rodape-selos{border-top:1px solid #2b3038;border-bottom:1px solid #2b3038;padding:22px 0}
.selos{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.selo-item{display:flex;gap:11px;align-items:flex-start}
.selo-item svg{width:26px;height:26px;flex-shrink:0;color:#ffd23f;margin-top:1px}
.selo-item b{display:block;color:#fff;font-size:12.5px;margin-bottom:2px}
.selo-item small{font-size:11px;color:#8d96a3;line-height:1.45;display:block}
.pagamentos{margin-top:22px;padding-top:18px;border-top:1px solid #2b3038;
  display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.pag-titulo{font-size:11.5px;color:#8d96a3;text-transform:uppercase;letter-spacing:.5px;font-weight:600}
.pag-lista{display:flex;gap:10px;flex-wrap:wrap}
.pag{display:flex;align-items:center;gap:7px;background:#242a33;border:1px solid #333b46;
  border-radius:7px;padding:7px 12px}
.pag svg{width:28px;height:20px}
.pag span{font-size:12px;color:#c3cad4;font-weight:600}
@media(max-width:900px){.selos{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.selos{grid-template-columns:1fr}.pagamentos{gap:10px}}

/* ---------- Estados ---------- */
.vazio{
  background:#fff;border:1px dashed var(--linha);border-radius:var(--raio-g);
  padding:52px 20px;text-align:center;color:var(--txt-fraco);
}
.vazio .ic{font-size:40px;color:var(--linha);margin-bottom:12px}
.carregando{padding:40px;text-align:center;color:var(--txt-claro);font-size:13px}
.skel{background:linear-gradient(90deg,#eee 25%,#f5f5f5 50%,#eee 75%);
  background-size:200% 100%;animation:sk 1.2s infinite;border-radius:var(--raio)}
@keyframes sk{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ---------- Responsivo ---------- */
@media (max-width:1024px){
  .layout{grid-template-columns:minmax(0,1fr)}
  .filtros{position:static}
  .rodape-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:767px){
  .hide-sm{display:none}
  .header-meio .container{flex-wrap:wrap;gap:12px}
  .busca{order:3;max-width:none;flex-basis:100%}
  .menu-rapido{display:none}
  .grade-produtos{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
  .card-img{height:130px}.card-img img{max-height:130px}
  .rodape-grid{grid-template-columns:1fr}
  .header-top .container{justify-content:center}
  .nav-topo{display:none}
}

/* ============================================================
   Mobile / PWA
   ============================================================ */
:root{ --barra-h: 58px; --safe-b: env(safe-area-inset-bottom, 0px); }

/* ---------- barra inferior estilo app ---------- */
.barra-mobile{display:none}
.tem-barra-mobile{padding-bottom:calc(var(--barra-h) + var(--safe-b))}

@media (max-width:860px){
  .barra-mobile{
    display:grid;grid-template-columns:repeat(5,1fr);
    position:fixed;left:0;right:0;bottom:0;z-index:120;
    background:#fff;border-top:1px solid var(--linha-clr);
    padding-bottom:var(--safe-b);
    box-shadow:0 -2px 14px rgba(0,0,0,.09);
  }
  .barra-mobile a{
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    height:var(--barra-h);color:var(--txt-claro);font-size:10.5px;font-weight:600;
    position:relative;-webkit-tap-highlight-color:transparent;
  }
  .barra-mobile svg{width:23px;height:23px}
  .barra-mobile a.on{color:var(--azul)}
  .barra-mobile a.on::before{
    content:'';position:absolute;top:0;left:22%;right:22%;height:3px;
    background:var(--vermelho);border-radius:0 0 3px 3px;
  }
  .barra-mobile a:active{background:var(--bg-alt)}
  .barra-mobile .pt{
    position:absolute;top:5px;right:calc(50% - 20px);background:var(--vermelho);color:#fff;
    font-size:9.5px;font-weight:700;border-radius:20px;padding:1px 5px;min-width:16px;
    text-align:center;font-style:normal;line-height:1.35;
  }
  .rodape{margin-bottom:6px}
}

/* ---------- convite de instalação ---------- */
.convite-app{
  position:fixed;left:12px;right:12px;bottom:calc(12px + var(--safe-b));z-index:130;
  background:#fff;border:1px solid var(--linha-clr);border-radius:14px;
  box-shadow:0 8px 30px rgba(0,0,0,.20);
  display:flex;align-items:center;gap:12px;padding:12px 14px;max-width:520px;margin:0 auto;
  animation:sobe .28s ease-out;
}
@keyframes sobe{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.convite-app img{border-radius:11px;flex-shrink:0}
.convite-txt{flex-grow:1;min-width:0}
.convite-txt b{display:block;font-size:13.5px;color:var(--azul);margin-bottom:2px}
.convite-txt small{font-size:11.5px;color:var(--txt-fraco);line-height:1.4;display:block}
.convite-app .btn{background:var(--vermelho);color:#fff;flex-shrink:0}
.convite-x{
  background:none;border:0;color:var(--txt-claro);font-size:15px;cursor:pointer;
  padding:6px;line-height:1;flex-shrink:0;align-self:flex-start;
}
@media (max-width:860px){ .convite-app{bottom:calc(var(--barra-h) + var(--safe-b) + 10px)} }

.barra-atualiza{
  position:fixed;left:0;right:0;top:0;z-index:200;background:var(--azul-mais-esc);color:#fff;
  display:flex;align-items:center;justify-content:center;gap:14px;
  padding:10px 14px;font-size:13px;box-shadow:0 2px 12px rgba(0,0,0,.25);
}

/* ---------- gaveta de filtros no celular ---------- */
.btn-filtrar-mobile{display:none}
.filtros-fundo{
  position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:140;opacity:0;pointer-events:none;
  transition:opacity .2s;
}
.filtros-fundo.on{opacity:1;pointer-events:auto}

@media (max-width:1024px){
  .btn-filtrar-mobile{
    display:inline-flex;align-items:center;gap:7px;background:var(--azul);color:#fff;
    border:0;border-radius:var(--raio);padding:10px 16px;font-size:13px;font-weight:600;
    cursor:pointer;font-family:inherit;min-height:42px;
  }
  .btn-filtrar-mobile .qt{
    background:#fff;color:var(--azul);border-radius:20px;padding:0 7px;font-size:11px;font-weight:700;
  }
  .layout{grid-template-columns:minmax(0,1fr)}
  .filtros{
    position:fixed;left:0;right:0;bottom:0;top:auto;z-index:150;
    max-height:86vh;overflow-y:auto;-webkit-overflow-scrolling:touch;
    border-radius:18px 18px 0 0;border:0;box-shadow:0 -6px 30px rgba(0,0,0,.26);
    transform:translateY(100%);transition:transform .26s cubic-bezier(.32,.72,0,1);
    padding-bottom:calc(20px + var(--safe-b));
  }
  .filtros.aberto{transform:none}
  .filtros::before{
    content:'';display:block;width:42px;height:4px;border-radius:4px;background:var(--linha);
    margin:10px auto 4px;position:sticky;top:0;
  }
  .filtros-cab{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    padding:10px 14px;border-bottom:1px solid var(--linha-clr);position:sticky;top:8px;
    background:#fff;z-index:2;
  }
  .filtros-cab b{font-size:15px;color:var(--azul)}
  .filtros-cab button{
    background:none;border:0;font-size:20px;color:var(--txt-claro);cursor:pointer;padding:6px 10px;
  }
  .filtro-lista li a,.filtro-lista li label{padding:9px 0;font-size:13.5px}
  .filtro-bloco{padding:16px}
}
@media (min-width:1025px){ .filtros-cab{display:none} }

/* ---------- ajustes finos de celular ---------- */
@media (max-width:860px){
  body{font-size:14px}
  .header-meio{padding:10px 0;position:sticky;top:0;z-index:100}
  .header-meio .container{gap:10px}
  .logo-marca{font-size:17px}
  .logo-sub{display:none}
  .busca input{height:44px;font-size:16px}   /* 16px evita o zoom automático do iOS */
  .busca button{height:44px}
  .acoes-header{gap:12px}
  .acao-txt{display:none}
  .acao i{font-size:22px}
  .badge-num{left:14px}
  .header-baixo .container{height:46px;overflow-x:auto;scrollbar-width:none}
  .header-baixo .container::-webkit-scrollbar{display:none}
  .btn-departamentos{padding:0 14px;font-size:12.5px;min-height:46px}
  .menu-rapido{display:flex}
  .menu-rapido a{line-height:46px;font-size:12.5px}
  .faixa-cotacao .container{height:auto;padding:8px 15px;gap:10px;font-size:11.5px}

  .painel-dep{
    position:fixed;inset:0;top:0;overflow-y:auto;border-top:0;z-index:160;
    -webkit-overflow-scrolling:touch;
  }
  .painel-dep .container{padding:16px 15px calc(30px + var(--safe-b))}
  .dep-grid{grid-template-columns:1fr;gap:14px}

  .titulo-secao{margin:20px 0 11px}
  .titulo-secao h2{font-size:16px}
  .grade-produtos{grid-template-columns:repeat(2,1fr);gap:9px}
  .card{padding:9px;border-radius:10px}
  .card-img{height:132px}.card-img img{max-height:132px}
  .card-nome{font-size:12px;min-height:46px;-webkit-line-clamp:3}
  .card-usd{font-size:16px}
  .card-carac{display:none}
  .card-loja{font-size:10.5px;margin-bottom:6px}
  .card-fav{width:32px;height:32px}
  .btn{min-height:40px}
  .btn-sm{min-height:36px}

  .barra-lista{padding:11px;gap:10px;position:sticky;top:64px;z-index:90}
  .barra-lista h1{font-size:17px}
  .barra-lista select{min-height:42px;font-size:13px;flex-grow:1}
  .paginacao a,.paginacao span{min-width:40px;height:40px}
  .paginacao-topo .paginacao{justify-content:center}
  .pag-resumo{width:100%;text-align:center;margin:0 0 8px}
  .breadcrumbs{font-size:11.5px;white-space:nowrap;overflow-x:auto;scrollbar-width:none}
  .breadcrumbs::-webkit-scrollbar{display:none}
  .grade-categorias{grid-template-columns:repeat(3,1fr);gap:8px}
  .cat-card{padding:12px 7px}
  .cat-card .ic{width:42px;height:42px;font-size:18px}
  .cat-card .nm{font-size:11.5px}
  .grade-marcas{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:400px){
  .grade-produtos{grid-template-columns:repeat(2,1fr);gap:7px}
  .card-img{height:112px}.card-img img{max-height:112px}
  .grade-categorias{grid-template-columns:repeat(2,1fr)}
  .logo-marca{font-size:15px}
}

/* respeita quem pediu menos animação no sistema */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* foco visível para navegação por teclado */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,label:focus-visible{
  outline:3px solid var(--azul-cyan);outline-offset:2px;border-radius:4px;
}


/* ============================================================
   Tema Paraguay Import — preto, ouro e prata
   ============================================================ */
.header-top{background:#000;color:var(--prata-fraco)}
.header-top a{color:var(--prata-fraco)}
.header-top a:hover{color:var(--ouro-claro)}

.header-meio{
  background:linear-gradient(180deg,#121317 0%,var(--tinta) 100%);
  border-bottom:1px solid rgba(201,162,39,.28);
}
.logo-img{height:52px;width:auto;display:block}
@media(max-width:860px){.logo-img{height:34px}}

.busca input{border:1px solid rgba(201,162,39,.35)}
.busca input:focus{outline:2px solid var(--ouro)}
.busca button{background:var(--ouro);color:#14151a;font-weight:700}
.busca button:hover{background:var(--ouro-claro)}

.acao{color:var(--prata)}
.acao-txt small{color:var(--prata-fraco)}
.badge-num{background:var(--ouro);color:#14151a}

.header-baixo{background:var(--tinta-2);border-bottom:1px solid rgba(201,162,39,.18)}
.btn-departamentos{background:var(--ouro);color:#14151a}
.btn-departamentos:hover{background:var(--ouro-claro)}
.menu-rapido a{color:var(--prata-fraco)}
.menu-rapido a:hover{background:var(--tinta-4);color:var(--ouro-claro)}
.painel-dep{border-top:3px solid var(--ouro)}

.faixa-cotacao{background:var(--bg-card);border-bottom:1px solid var(--linha)}

/* botões: ouro é superfície, texto sempre escuro; escuro é superfície, texto ouro */
.btn-vermelho{background:var(--ouro);color:#14151a;font-weight:700}
.btn-vermelho:hover{background:var(--ouro-claro);color:#14151a}
.btn-azul{background:var(--tinta-2);color:var(--ouro-claro)}
.btn-azul:hover{background:var(--tinta-3);color:var(--ouro-claro)}
.btn-linha{border-color:var(--ouro);color:var(--ouro-txt)}
.btn-linha:hover{background:var(--ouro);color:#14151a}
.btn-branco{border-color:var(--linha);color:var(--txt)}

.titulo-secao h2{color:var(--azul)}
.titulo-secao h2::before{background:var(--ouro)}
.titulo-secao .link-mais{color:var(--ouro-txt)}
.titulo-secao .link-mais:hover{color:var(--tinta)}

.card{border-color:var(--linha-clr)}
.card:hover{border-color:var(--ouro);box-shadow:0 6px 22px rgba(11,11,13,.13)}
.card-usd{color:var(--tinta)}
.card-brl b{color:var(--ouro-txt)}
.card-fav:hover,.card-fav.on{color:var(--ouro);border-color:var(--ouro)}
.selo{background:var(--ouro);color:#14151a}

.cat-card .ic{background:linear-gradient(140deg,var(--tinta-2),var(--tinta-4));color:var(--ouro-claro)}
.cat-card:hover{border-color:var(--ouro)}
.marca-card:hover{border-color:var(--ouro);color:var(--ouro-txt)}
.alfabeto a:hover,.alfabeto a.on{background:var(--tinta-2);border-color:var(--tinta-2);color:var(--ouro-claro)}

.filtro-bloco h3{color:var(--azul)}
.filtro-lista li a:hover,.filtro-lista li label:hover{color:var(--ouro-txt)}
.filtro-lista li.ativo>a{color:var(--ouro-txt)}
.paginacao .atual{background:var(--tinta-2);border-color:var(--tinta-2);color:var(--ouro-claro)}
.paginacao a:hover{border-color:var(--ouro);color:var(--ouro-txt)}
.breadcrumbs a{color:var(--ouro-txt)}

.rodape{background:var(--tinta);color:var(--prata-fraco)}
.rodape-base,.rodape-selos{border-color:rgba(201,162,39,.18)}
.selo-item svg{color:var(--ouro-claro)}
.pag{background:var(--tinta-3);border-color:rgba(201,162,39,.22)}
.rodape .aviso{background:var(--tinta-3);border-left-color:var(--ouro)}

.barra-mobile a.on{color:var(--ouro-txt)}
.barra-mobile a.on::before{background:var(--ouro)}
.barra-mobile .pt{background:var(--ouro);color:#14151a}
.btn-filtrar-mobile{background:var(--tinta-2);color:var(--ouro-claro)}
.convite-app .btn{background:var(--ouro);color:#14151a}
.convite-txt b{color:var(--tinta)}
.barra-atualiza{background:var(--tinta);color:var(--ouro-claro)}
.barra-atualiza button{background:var(--ouro)!important;color:#14151a!important}

/* hero e faixas escuras */
.hero{background:linear-gradient(140deg,#000 0%,var(--tinta-2) 55%,var(--tinta-3) 100%)!important;
  border-bottom:1px solid rgba(201,162,39,.25)}
.hero h1 span{color:var(--ouro-claro)}
.hero p{color:var(--prata-fraco)}
.passo{background:rgba(201,162,39,.07);border-color:rgba(201,162,39,.22)}
.passo .n{background:var(--ouro);color:#14151a}
.passo small{color:var(--prata-fraco)}
.num b{color:var(--tinta)}
.faixa-cta{border-left-color:var(--ouro)}
.faixa-cta b{color:var(--azul)}
.lado{background:linear-gradient(150deg,#000,var(--tinta-3))!important}
.lado li::before{background:rgba(201,162,39,.25);border-color:var(--ouro)}
.lado li b{color:var(--ouro-claro)}
.papel-card .ic{background:var(--tinta-2)!important;color:var(--ouro-claro)}
.papel-card:hover{border-color:var(--ouro)}
.papel-card h3{color:var(--azul)}
.papel-card li::before{color:var(--ouro)}
.fluxo li::before{background:var(--tinta-2);color:var(--ouro-claro)}
.forca i{background:var(--ouro)}

/* ---------- preço da loja no card ---------- */
.card-preco{font-size:20px;font-weight:800;color:var(--tinta);line-height:1.15;letter-spacing:-.4px}
.card-parcela{font-size:11.5px;color:var(--txt-fraco);margin-top:2px}
.card-frete{font-size:11px;color:var(--txt-claro);font-weight:600;margin:4px 0 9px}
@media(max-width:860px){.card-preco{font-size:17px}.card-parcela{font-size:10.5px}}

/* ---------- "entenda o preço" ---------- */
.info-preco{
  width:16px;height:16px;border-radius:50%;border:0;cursor:pointer;
  background:var(--tinta-2);color:var(--ouro-claro);
  font-size:10px;font-weight:800;line-height:1;padding:0;margin-left:5px;
  display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;
  font-family:inherit;flex-shrink:0;
}
.info-preco:hover,.info-preco:focus-visible{background:var(--ouro);color:#14151a}
.info-balao{
  position:absolute;z-index:180;background:var(--tinta);color:var(--prata);
  border:1px solid rgba(201,162,39,.35);border-radius:10px;padding:14px 16px;
  box-shadow:0 10px 34px rgba(0,0,0,.34);font-size:12.5px;line-height:1.55;
  opacity:0;pointer-events:none;transition:opacity .14s;max-width:calc(100vw - 24px);
}
.info-balao.on{opacity:1;pointer-events:auto}
.info-balao b{color:var(--ouro-claro)}
.info-balao p{margin:6px 0 0;color:var(--prata-fraco)}
.info-balao small{display:block;margin-top:6px;color:var(--txt-claro);font-size:11px}
.info-balao .ip-linha{
  display:flex;justify-content:space-between;gap:12px;margin-top:8px;
  padding-top:8px;border-top:1px solid rgba(255,255,255,.10);
}
.info-balao .ip-linha b{color:#fff}
.info-balao .ip-total{border-top-width:2px;border-top-color:rgba(255,255,255,.22);font-weight:700}
.info-balao .ip-total b{color:var(--ouro-claro)}
.info-balao .ip-nota{font-size:11.5px;margin-top:10px;padding-top:9px;
  border-top:1px solid rgba(255,255,255,.10)}
.info-balao::after{
  content:'';position:absolute;left:50%;margin-left:-7px;border:7px solid transparent;
  bottom:-14px;border-top-color:var(--tinta);
}
.info-balao.abaixo::after{bottom:auto;top:-14px;border-top-color:transparent;border-bottom-color:var(--tinta)}
@media(max-width:860px){.info-preco{width:20px;height:20px;font-size:11px}}

/* atalho do lojista no menu */
.link-lojista{
  margin-left:auto;display:inline-flex;align-items:center;gap:6px;
  background:rgba(201,162,39,.14);border:1px solid rgba(201,162,39,.42);
  color:var(--ouro-claro);border-radius:20px;padding:5px 14px;
  font-size:12.5px;font-weight:700;white-space:nowrap;flex-shrink:0;
}
.link-lojista:hover{background:var(--ouro);color:#14151a}
@media(max-width:860px){.link-lojista{margin-left:8px;padding:5px 11px;font-size:11.5px}}
@media(max-width:1100px){.rodape-grid{grid-template-columns:repeat(2,1fr)}}

/* ---------- menu da conta ---------- */
.acao-conta-wrap{position:relative}
.menu-conta{
  position:absolute;top:calc(100% + 12px);right:0;min-width:236px;z-index:150;
  background:#fff;border:1px solid var(--linha-clr);border-radius:10px;padding:6px;
  box-shadow:0 12px 34px rgba(0,0,0,.22);display:none;
}
.menu-conta.on{display:block}
.menu-conta::before{
  content:'';position:absolute;top:-7px;right:22px;width:12px;height:12px;background:#fff;
  border-left:1px solid var(--linha-clr);border-top:1px solid var(--linha-clr);transform:rotate(45deg);
}
.mc-topo{padding:10px 12px 11px;border-bottom:1px solid var(--linha-clr);margin-bottom:5px}
.mc-topo b{display:block;font-size:13.5px;color:var(--txt)}
.mc-topo small{font-size:11.5px;color:var(--txt-claro);text-transform:capitalize}
.menu-conta a,.menu-conta button{
  display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;border:0;background:none;
  border-radius:7px;font-family:inherit;font-size:13.5px;color:var(--txt);cursor:pointer;text-align:left;
}
.menu-conta a:hover,.menu-conta button:hover{background:var(--bg-alt)}
.menu-conta a.destaque{background:var(--tinta-2);color:var(--ouro-claro);font-weight:700;margin-bottom:4px}
.menu-conta a.destaque:hover{background:var(--tinta-3)}
.menu-conta button{color:var(--txt-fraco);border-top:1px solid var(--linha-clr);
  margin-top:5px;border-radius:0 0 7px 7px}
@media(max-width:860px){.menu-conta{right:-8px;min-width:212px}}
.selo-off{background:var(--txt-claro);color:#fff}

/* ============================================================
   Melhorias 2026-08-25 — avisos, mini carrinho, vistos,
   comparador, sugestões de busca e acessibilidade
   ============================================================ */

/* ---------- pular para o conteúdo (teclado) ---------- */
.pular-link{
  position:fixed;left:12px;top:-60px;z-index:400;background:var(--tinta);color:var(--ouro-claro);
  padding:10px 18px;border-radius:0 0 8px 8px;font-weight:700;font-size:13px;
  transition:top .18s ease;box-shadow:var(--sombra-md);
}
.pular-link:focus{top:0}

/* foco visível de verdade em tudo que recebe teclado */
:focus-visible{outline:3px solid var(--ouro);outline-offset:2px;border-radius:4px}
a:focus:not(:focus-visible),button:focus:not(:focus-visible){outline:none}

body.sem-rolagem{overflow:hidden}

/* ---------- avisos (toast) ---------- */
.avisos{
  position:fixed;right:16px;bottom:16px;z-index:380;display:flex;flex-direction:column;
  gap:9px;align-items:flex-end;pointer-events:none;max-width:min(94vw,380px);
}
.toast{
  pointer-events:auto;display:flex;align-items:center;gap:11px;width:100%;
  background:var(--tinta-2);color:#fff;border:1px solid rgba(201,162,39,.45);
  border-radius:10px;padding:11px 13px;box-shadow:0 14px 34px rgba(0,0,0,.34);
  transform:translateY(14px);opacity:0;transition:transform .22s ease,opacity .22s ease;
}
.toast.on{transform:none;opacity:1}
.toast.erro{border-color:rgba(226,88,88,.6)}
.toast img{width:38px;height:38px;object-fit:contain;background:#fff;border-radius:6px;flex-shrink:0}
.toast .t-txt{flex:1;min-width:0}
.toast .t-txt b{display:block;font-size:13px;line-height:1.35}
.toast .t-txt small{display:block;font-size:11.5px;color:var(--prata-fraco);margin-top:2px;line-height:1.4}
.toast .t-btn{
  background:var(--ouro);color:#14151a;border-radius:6px;padding:6px 11px;
  font-size:12px;font-weight:700;white-space:nowrap;
}
.toast .t-x{background:none;border:0;color:var(--prata-fraco);cursor:pointer;font-size:14px;padding:2px 4px}
.toast .t-x:hover{color:#fff}
@media(max-width:600px){.avisos{left:12px;right:12px;bottom:calc(58px + env(safe-area-inset-bottom));max-width:none}}

/* ---------- mini carrinho (gaveta) ---------- */
.gaveta-fundo{
  position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:340;opacity:0;
  transition:opacity .24s ease;pointer-events:none;
}
.gaveta-fundo.on{opacity:1;pointer-events:auto}
.gaveta-carrinho{
  position:fixed;top:0;right:0;bottom:0;width:min(400px,92vw);z-index:350;background:#fff;
  display:flex;flex-direction:column;box-shadow:-14px 0 40px rgba(0,0,0,.26);
  transform:translateX(100%);transition:transform .26s cubic-bezier(.22,.8,.3,1);
}
.gaveta-carrinho.on{transform:none}
.gc-topo{
  display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 17px;
  background:var(--tinta);color:#fff;
}
.gc-topo b{font-size:14.5px}
.gc-x{background:none;border:0;color:var(--prata-fraco);font-size:17px;cursor:pointer;padding:4px 6px}
.gc-x:hover{color:#fff}
.gc-itens{flex:1;overflow-y:auto;overscroll-behavior:contain}
.gc-item{
  display:grid;grid-template-columns:56px 1fr auto auto;gap:11px;align-items:center;
  padding:12px 15px;border-bottom:1px solid var(--linha-clr);
}
.gc-item img{width:56px;height:56px;object-fit:contain;background:var(--bg-suave);border-radius:6px}
.gc-nm{min-width:0}
.gc-nm a{font-size:12.5px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden}
.gc-nm a:hover{color:var(--ouro-txt)}
.gc-un{font-size:11.5px;color:var(--txt-claro);margin-top:3px}
.gc-tot{font-weight:800;font-size:13.5px;white-space:nowrap}
.gc-rm{background:none;border:0;color:var(--txt-claro);cursor:pointer;font-size:14px;padding:4px}
.gc-rm:hover{color:#c0392b}
.gc-vazio{text-align:center;padding:48px 20px;color:var(--txt-claro)}
.gc-vazio .ic{font-size:38px;margin-bottom:10px}
.gc-pe{padding:15px 17px;border-top:1px solid var(--linha-clr);background:var(--bg-suave)}
.gc-linha{display:flex;justify-content:space-between;font-size:12.5px;color:var(--txt-fraco);padding:4px 0}
.gc-linha b{color:var(--txt)}
.gc-linha.eco,.gc-linha.eco b{color:var(--verde)}
.gc-linha.gc-total{border-top:1px solid var(--linha);margin-top:7px;padding-top:9px;font-size:15px}
.gc-linha.gc-total b{font-size:19px;font-weight:800}
.gc-falta{
  background:#fff8e6;border:1px solid #f0d99b;color:#7a5c12;border-radius:var(--raio);
  padding:9px 11px;font-size:11.5px;margin-bottom:9px;line-height:1.5;
}
.gc-pe .btn{margin-top:10px}

/* ---------- vistos recentemente ---------- */
.faixa-vistos{
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(140px,1fr);gap:11px;
  overflow-x:auto;padding-bottom:8px;scroll-snap-type:x proximity;
}
.faixa-vistos::-webkit-scrollbar{height:7px}
.faixa-vistos::-webkit-scrollbar-thumb{background:var(--linha);border-radius:7px}
.visto{
  background:#fff;border:1px solid var(--linha-clr);border-radius:var(--raio);padding:10px;
  display:flex;flex-direction:column;gap:7px;scroll-snap-align:start;transition:border-color .15s,box-shadow .15s;
}
.visto:hover{border-color:var(--ouro);box-shadow:var(--sombra)}
.visto img{height:94px;object-fit:contain;background:var(--bg-suave);border-radius:4px}
.visto .v-nm{
  font-size:11.5px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden;color:var(--txt-fraco);min-height:31px;
}
.visto .v-pr{font-size:13px;font-weight:800}
button.link-mais{background:none;border:0;font-family:inherit;cursor:pointer}

/* ---------- comparador ---------- */
.btn-comparar{
  display:inline-flex;align-items:center;gap:5px;background:none;border:1px solid var(--linha);
  border-radius:20px;padding:4px 10px;font-size:11px;font-weight:600;color:var(--txt-fraco);
  cursor:pointer;font-family:inherit;transition:all .15s;
}
.btn-comparar svg{width:13px;height:13px}
.btn-comparar:hover{border-color:var(--ouro);color:var(--ouro-txt)}
.btn-comparar.on{background:var(--tinta);border-color:var(--tinta);color:var(--ouro-claro)}
.barra-comparar{
  position:fixed;left:0;right:0;bottom:0;z-index:330;background:var(--tinta);
  border-top:2px solid var(--ouro);box-shadow:0 -8px 28px rgba(0,0,0,.28);padding:10px 0;
}
.bc-in{display:flex;align-items:center;gap:13px;flex-wrap:wrap}
.bc-tit{color:var(--prata);font-size:12.5px;font-weight:600;white-space:nowrap}
.bc-tit b{color:var(--ouro-claro)}
.bc-itens{display:flex;gap:8px;flex:1;min-width:0;overflow-x:auto}
.bc-item{position:relative;flex-shrink:0}
.bc-item img{width:46px;height:46px;object-fit:contain;background:#fff;border-radius:5px}
.bc-x{
  position:absolute;top:-6px;right:-6px;width:19px;height:19px;border-radius:50%;border:0;
  background:var(--ouro);color:#14151a;font-size:10px;cursor:pointer;line-height:1;
}
.bc-limpar{background:none;border:0;color:var(--prata-fraco);font-size:12px;cursor:pointer;
  text-decoration:underline;font-family:inherit}
.bc-limpar:hover{color:#fff}
.btn.off{opacity:.45;pointer-events:none}
body.tem-barra-comparar{padding-bottom:72px}
body.tem-barra-comparar.tem-barra-mobile .barra-comparar{bottom:56px}
@media(max-width:600px){.bc-tit{width:100%}.bc-item img{width:40px;height:40px}}

/* ---------- sugestões da busca ---------- */
.busca-sug .sug-cab{
  padding:8px 13px 5px;font-size:10.5px;text-transform:uppercase;letter-spacing:.6px;
  color:var(--txt-claro);font-weight:700;display:flex;justify-content:space-between;align-items:center;
}
.busca-sug .sug-cab button{
  background:none;border:0;font-family:inherit;font-size:10.5px;color:var(--txt-claro);
  cursor:pointer;text-decoration:underline;text-transform:none;letter-spacing:0;
}
.busca-sug .s-ic{width:34px;text-align:center;font-size:15px;flex-shrink:0}
.busca-sug .s-nome small{display:block;font-size:11px;color:var(--txt-claro);margin-top:1px}
.busca-sug a.foco{background:var(--bg-alt)}
.busca-sug .sug-todos{justify-content:center;border-top:1px solid var(--linha-clr)}
.busca-sug .sug-nada{padding:16px 14px;font-size:12.5px;color:var(--txt-claro);text-align:center}

/* botão que acabou de virar "no pedido" */
.btn.feito{background:var(--verde) !important;color:#fff !important}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
}
.card-extra{display:flex;justify-content:center;margin-top:7px}

/* ---------- numero do calcado ---------- */
.gc-tam{
  display:inline-block;margin-top:4px;font-size:11px;font-weight:700;color:var(--ouro-txt);
  background:var(--bg-alt);border-radius:4px;padding:1px 7px;
}
.tam-fundo{
  position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:360;opacity:0;
  transition:opacity .22s ease;pointer-events:none;
}
.tam-fundo.on{opacity:1;pointer-events:auto}
.tam-modal{
  position:fixed;z-index:370;left:50%;top:50%;transform:translate(-50%,-46%) scale(.97);
  width:min(430px,94vw);max-height:88vh;overflow-y:auto;background:#fff;
  border-radius:var(--raio-g);box-shadow:0 18px 50px rgba(0,0,0,.3);padding:20px 20px 18px;
  opacity:0;transition:opacity .2s ease,transform .2s cubic-bezier(.22,.8,.3,1);
}
.tam-modal.on{opacity:1;transform:translate(-50%,-50%) scale(1)}
.tam-x{
  position:absolute;top:9px;right:10px;background:none;border:0;color:var(--txt-claro);
  font-size:15px;cursor:pointer;padding:5px 7px;line-height:1;
}
.tam-x:hover{color:var(--txt)}
.tam-cab{display:grid;grid-template-columns:58px 1fr;gap:12px;align-items:center;margin-bottom:15px}
.tam-cab img{width:58px;height:58px;object-fit:contain;background:var(--bg-suave);border-radius:6px}
.tam-cab b{display:block;font-size:13px;line-height:1.4;font-weight:600;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tam-cab small{display:block;margin-top:4px;font-size:11.5px;color:var(--txt-claro);font-weight:600}
.tam-grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(56px,1fr));gap:8px}
.tam-n{
  height:42px;border:1px solid var(--linha);border-radius:var(--raio);background:#fff;
  font-size:14px;font-weight:600;color:var(--txt);cursor:pointer;transition:all .12s;
}
.tam-n:hover{border-color:var(--ouro);color:var(--ouro-txt)}
.tam-n.sug{border-color:var(--ouro);box-shadow:inset 0 0 0 1px var(--ouro-claro)}
.tam-n.on{background:var(--tinta);border-color:var(--tinta);color:var(--ouro-claro)}
.tam-obs{font-size:11.5px;color:var(--txt-claro);line-height:1.55;margin:13px 0 13px}
.tam-obs b{color:var(--txt-fraco)}
/* seletor fixo (pagina do produto e carrinho) */
.tam-bloco{margin:0 0 13px}
.tam-bloco .tam-cima{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:7px}
.tam-bloco .tam-rot{font-size:12px;font-weight:700}
.tam-bloco .tam-eco{font-size:11px;color:var(--txt-claro)}
.tam-bloco .tam-grade{grid-template-columns:repeat(auto-fill,minmax(48px,1fr));gap:6px}
.tam-bloco .tam-n{height:38px;font-size:13px}
.tam-bloco.falta .tam-n{border-color:#e3b7b1}
.tam-falta{
  background:#fdf0ee;border:1px solid #e3b7b1;color:#8c2f22;border-radius:var(--raio);
  padding:8px 10px;font-size:11.5px;line-height:1.5;margin-top:8px;
}
.item-tam{display:flex;align-items:center;gap:7px;margin-top:6px;flex-wrap:wrap}
.item-tam select{
  height:30px;border:1px solid var(--linha);border-radius:var(--raio);background:#fff;
  font-family:inherit;font-size:12px;padding:0 7px;color:var(--txt);
}
.item-tam select.falta{border-color:#c0392b;color:#c0392b;font-weight:700}
.item-tam .it-rot{font-size:11.5px;color:var(--txt-claro)}

/* ---------- foto em tela cheia (lupa) ---------- */
.lupa{
  position:fixed;inset:0;z-index:390;background:rgba(8,8,10,.92);display:flex;
  align-items:center;justify-content:center;padding:32px;opacity:0;
  transition:opacity .2s ease;cursor:zoom-out;
}
.lupa.on{opacity:1}
.lupa img{max-width:100%;max-height:100%;object-fit:contain;border-radius:6px;background:#fff}
.lupa-x{
  position:absolute;top:16px;right:18px;width:38px;height:38px;border-radius:50%;
  border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.1);color:#fff;
  font-size:15px;cursor:pointer;
}
.lupa-x:hover{background:rgba(255,255,255,.22)}

/* ---------- comparador (página) ---------- */
.tab-comparar{width:100%;border-collapse:collapse;background:#fff;
  border:1px solid var(--linha-clr);border-radius:var(--raio);overflow:hidden}
.tab-comparar th,.tab-comparar td{
  padding:12px 14px;border-bottom:1px solid var(--linha-clr);font-size:12.5px;
  vertical-align:top;text-align:left;
}
.tab-comparar tr:last-child th,.tab-comparar tr:last-child td{border-bottom:0}
.tab-comparar th{width:150px;color:var(--txt-fraco);font-weight:600;background:var(--bg-suave)}
.tab-comparar td{min-width:180px}
.tab-comparar .cp-foto img{height:120px;object-fit:contain;margin:0 auto 8px}
.tab-comparar .cp-nome{font-size:12.5px;line-height:1.4;font-weight:600}
.tab-comparar .cp-preco{font-size:18px;font-weight:800}
.tab-comparar .melhor{background:#eef8f1}
.tab-comparar .melhor .cp-preco{color:var(--verde)}
.selo-melhor{display:inline-block;background:var(--verde);color:#fff;border-radius:20px;
  padding:2px 9px;font-size:10px;font-weight:700;margin-top:5px}
.rolar-x{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ---------- FAQ da home ---------- */
.faq-home{display:grid;gap:9px}
.faq-item{background:#fff;border:1px solid var(--linha-clr);border-radius:var(--raio);padding:0}
.faq-item summary{
  cursor:pointer;padding:14px 16px;font-weight:600;font-size:13.5px;list-style:none;
  display:flex;justify-content:space-between;align-items:center;gap:12px;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:'+';font-size:19px;color:var(--ouro-txt);font-weight:400;line-height:1}
.faq-item[open] summary::after{content:'−'}
.faq-item summary:hover{color:var(--ouro-txt)}
.faq-item p{margin:0;padding:0 16px 15px;font-size:12.5px;color:var(--txt-fraco);line-height:1.65}
.filtro-obs{display:block;font-size:10.5px;color:var(--txt-claro);margin:1px 0 4px 2px;line-height:1.35}
.cont-obs{color:var(--ouro-txt);font-size:11px;cursor:help;border-bottom:1px dotted var(--ouro)}

/* ---------- chips (atalhos de busca) ---------- */
.chips{display:flex;flex-wrap:wrap;gap:7px;align-items:center;margin:4px 0 14px}
.chips-tit{font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--txt-claro);font-weight:700}
.chip{
  display:inline-flex;align-items:center;gap:6px;background:#fff;border:1px solid var(--linha);
  border-radius:20px;padding:6px 13px;font-size:12.5px;color:var(--txt-fraco);transition:all .15s;
}
.chip b{color:var(--ouro-txt);font-size:11px}
.chip:hover{border-color:var(--ouro);color:var(--txt)}

/* ---------- carrinho: ações do item e CEP ---------- */
.item-acoes{display:flex;gap:11px;margin-top:6px;flex-wrap:wrap}
.item-acoes button{
  background:none;border:0;padding:0;font-family:inherit;font-size:11px;color:var(--txt-claro);
  cursor:pointer;text-decoration:underline;text-underline-offset:2px;
}
.item-acoes button:hover{color:var(--ouro-txt)}
.cep-box{border:1px solid var(--linha-clr);border-radius:var(--raio);padding:12px;margin:14px 0}
.cep-box label{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.5px;
  color:var(--txt-claro);font-weight:700;margin-bottom:7px}
.cep-linha{display:flex;gap:7px}
.cep-linha input{
  flex:1;min-width:0;height:34px;border:1px solid var(--linha);border-radius:var(--raio);
  padding:0 10px;font-family:inherit;font-size:13px;
}
.cep-saida{font-size:11.5px;color:var(--txt-fraco);margin-top:8px;line-height:1.5}

/* ---------- Subcategorias e escopo da listagem ---------- */
.subcats{margin:0 0 16px}
.subcats-tit{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:0 0 9px}
.subcats-tit h2{margin:0;font-size:14px;font-weight:700;color:var(--txt)}
.subcats-tit small{font-size:11.5px;color:var(--txt-claro)}
.subcats-grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:9px}
.subcat{
  display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;
  background:var(--bg-card);border:1px solid var(--linha-clr);border-radius:var(--raio);
  padding:9px 6px 10px;transition:.16s;
}
.subcat:hover{border-color:var(--ouro);box-shadow:var(--sombra-md);transform:translateY(-2px)}
.subcat-img{
  width:100%;height:74px;display:flex;align-items:center;justify-content:center;
  background:var(--bg-suave);border-radius:4px;overflow:hidden;
}
.subcat-img img{max-height:70px;width:auto;object-fit:contain}
.subcat .nm{font-size:11.8px;font-weight:600;color:var(--txt);line-height:1.25}
.subcat .qt{font-size:10.5px;color:var(--txt-claro)}
.subcats-mais{font-size:12px;font-weight:600;color:var(--ouro-txt);margin-top:9px;display:inline-block}

.escopo{display:flex;flex-wrap:wrap;gap:7px;align-items:center;margin:0 0 14px}
.escopo a{
  display:inline-flex;align-items:center;gap:6px;background:var(--bg-card);
  border:1px solid var(--linha);border-radius:20px;padding:6px 13px;
  font-size:12.5px;color:var(--txt-fraco);transition:all .15s;
}
.escopo a:hover{border-color:var(--ouro);color:var(--txt)}
.escopo a.on{background:var(--tinta-2);border-color:var(--tinta-2);color:var(--ouro-claro)}
.escopo .obs{font-size:11.5px;color:var(--txt-claro)}
@media(max-width:640px){
  .subcats-grade{grid-template-columns:repeat(3,1fr);gap:7px}
  .subcat-img{height:60px}.subcat-img img{max-height:56px}
}
@media(max-width:400px){.subcats-grade{grid-template-columns:repeat(2,1fr)}}

/* ---------- Prateleira por subcategoria (categoria-mãe) ---------- */
.prateleira{margin:0 0 8px}
.prateleira .titulo-secao{margin:18px 0 11px}
.prateleira .titulo-secao h2{font-size:16px}
.prateleira-itens{
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(178px,1fr);gap:12px;
  overflow-x:auto;padding-bottom:8px;scroll-snap-type:x proximity;
  scrollbar-width:thin;
}
.prateleira-itens>.card{scroll-snap-align:start}
.prateleira-fim{margin:22px 0 4px;text-align:center}
.prateleira-fim .btn{padding:11px 20px;font-size:13px}
@media(max-width:640px){.prateleira-itens{grid-auto-columns:minmax(150px,1fr);gap:9px}}

/* ============================================================
   WhatsApp flutuante (App.montarZap)
   ============================================================ */
/* z-index 300: acima da barra inferior do app (120) e do convite de instalacao
   (130), abaixo da barra de comparar (330), da gaveta (350), dos modais (370)
   e dos toasts (380) — por isso o botao SOBE quando a barra de comparar aparece,
   em vez de ficar escondido atras dela. */
.zap-float{
  position:fixed;right:16px;bottom:calc(16px + var(--safe-b));z-index:300;
  width:56px;height:56px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:#25d366;color:#fff;box-shadow:0 8px 24px rgba(0,0,0,.28);
  transition:transform .18s ease,box-shadow .18s ease;
}
.zap-float:hover{transform:scale(1.06);box-shadow:0 12px 30px rgba(0,0,0,.34);color:#fff}
.zap-float:active{transform:scale(.95)}
.zap-float:focus-visible{outline:3px solid var(--ouro,#c9a227);outline-offset:3px}
.zap-float svg{width:31px;height:31px;fill:currentColor;display:block}
/* o toast nasce no mesmo canto: com o botao no ar ele sobe pra nao cobrir */
body.tem-zap .avisos{bottom:calc(84px + var(--safe-b))}
body.tem-barra-comparar .zap-float{bottom:calc(90px + var(--safe-b))}

@media (max-width:860px){
  .zap-float{
    right:12px;width:52px;height:52px;
    bottom:calc(var(--barra-h) + var(--safe-b) + 12px);
  }
  .zap-float svg{width:28px;height:28px}
  body.tem-zap .avisos{bottom:calc(var(--barra-h) + var(--safe-b) + 76px)}
  /* no mobile a barra de comparar ja fica 56px acima da barra do app */
  body.tem-barra-comparar .zap-float{bottom:calc(var(--barra-h) + var(--safe-b) + 84px)}
  /* o convite de instalacao fica no mesmo canto so no mobile (bottom 68px,
     ~70px de altura): com ele no ar o botao sobe pra nao cobrir o fechar */
  body:has(.convite-app) .zap-float{bottom:calc(var(--barra-h) + var(--safe-b) + 88px)}
}
@media (prefers-reduced-motion:reduce){
  .zap-float,.zap-float:hover,.zap-float:active{transition:none;transform:none}
}
