/* ============================================================
   Velans Catálogo — front-end v1.1
   Skin conforme a proposta visual aprovada pelo cliente
   (velans-arquitetura-visual, jun/2026): paleta navy/azul.
   Fontes: as do site (Roboto nos títulos, a fonte do tema no texto),
   a pedido do cliente em 20/10/2026.
   ============================================================ */

:root{
  --vc-navy:#0E2A47;
  --vc-blue:#1F6FEB;
  --vc-blue-soft:#E8F0FE;
  --vc-ink:#1a2230;
  --vc-muted:#6b7785;
  --vc-line:#e3e8ef;
  --vc-bg-side:#fafbfc;
  --vc-card:#ffffff;
  --vc-green:#0E9F6E;
  --vc-teams:#4b53bc;
  --vc-radius:12px;
  --vc-shadow:0 1px 2px rgba(16,42,71,.06),0 8px 24px rgba(16,42,71,.06);
  /* a mesma pilha do body do tema (Hello Elementor) */
  --vc-font-site:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
  --vc-font-head:Roboto,var(--vc-font-site);
  --vc-font-body:var(--vc-font-site);
}

/* ---------------- Sidebar de filtros ---------------- */
.velans-filtros-wrapper{
  font-family:var(--vc-font-body);
  color:var(--vc-ink);
  background:var(--vc-bg-side);
  border:1px solid var(--vc-line);
  border-radius:var(--vc-radius);
  padding:18px 16px;
}
.velans-filtros-titulo{
  font-family:var(--vc-font-head);
  font-size:15px;font-weight:700;color:var(--vc-navy);
  letter-spacing:-.01em;margin:0 0 6px;
}
.velans-filtro-grupo{border-bottom:1px solid var(--vc-line);padding:14px 0;margin:0}
.velans-filtro-grupo:last-of-type{border-bottom:0;padding-bottom:4px}
.velans-filtro-label{
  font-family:var(--vc-font-body);
  font-size:12px;font-weight:700;color:var(--vc-navy);
  text-transform:uppercase;letter-spacing:.05em;
  display:flex;justify-content:space-between;align-items:center;
  margin:0 0 11px;
}
.velans-filtro-grupo.transversal .velans-filtro-label{color:var(--vc-blue)}
.vc-trans-tag{
  font-size:9.5px;font-weight:700;letter-spacing:.05em;
  color:var(--vc-blue);background:var(--vc-blue-soft);
  padding:2px 6px;border-radius:4px;text-transform:uppercase;
}

/* opções (checkbox custom, estilo do mock) */
.vc-checkbox{
  display:flex;align-items:center;gap:9px;
  font-size:13px;color:var(--vc-ink);
  padding:4px 0;cursor:pointer;margin:0;
}
.vc-checkbox input{
  -webkit-appearance:none;appearance:none;
  width:15px;height:15px;flex:none;margin:0;
  border:1.5px solid #c2cbd6;border-radius:4px;background:#fff;
  position:relative;cursor:pointer;transition:.12s;
}
.vc-checkbox input:checked{background:var(--vc-blue);border-color:var(--vc-blue)}
.vc-checkbox input:checked::after{
  content:"";position:absolute;left:4px;top:1px;
  width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;
  transform:rotate(45deg);
}
.vc-checkbox:hover .vc-nome{color:var(--vc-blue)}
.vc-checkbox.checked,
.vc-checkbox:has(input:checked){font-weight:600;color:var(--vc-navy)}
.vc-contador{margin-left:auto;color:var(--vc-muted);font-size:12px;font-weight:400}
.vc-checkbox.disabled{opacity:.4;pointer-events:none}

/* ---------------- Área de resultados ---------------- */
.vc-listagem{font-family:var(--vc-font-body);color:var(--vc-ink)}

.vc-results-head{
  display:flex;align-items:center;justify-content:space-between;
  gap:14px;flex-wrap:wrap;margin:0 0 14px;
}
.vc-results-head .vc-count{
  font-family:var(--vc-font-head);
  font-size:14px;font-weight:700;color:var(--vc-navy);
}
.vc-count b{font-size:16px}
.vc-ordem select{
  font-family:var(--vc-font-body);font-size:13px;color:var(--vc-ink);
  border:1px solid var(--vc-line);border-radius:8px;
  padding:8px 12px;background:#fff;width:auto;
}
.vc-busca input{
  font-family:var(--vc-font-body);font-size:13px;
  border:1px solid var(--vc-line);border-radius:8px;
  padding:9px 14px;width:100%;background:#fff;
}
.vc-busca input:focus{border-color:var(--vc-blue);outline:none}

/* chips de filtros ativos (na área de resultados, como no mock) */
.vc-chips{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 18px}
.vc-chips:empty{display:none}
.vc-chip{
  display:inline-flex;align-items:center;gap:7px;
  background:var(--vc-blue-soft);color:var(--vc-blue);
  font-size:12.5px;font-weight:600;padding:6px 11px;
  border-radius:999px;cursor:pointer;border:0;
}
.vc-chip b{font-weight:700;opacity:.7}
.vc-chip:hover b{opacity:1}
.vc-chip.vc-reset{background:transparent;color:var(--vc-muted);font-weight:500;text-decoration:none}
.vc-chip.vc-reset:hover{color:var(--vc-blue)}

/* grade de produtos */
.vc-grid{display:grid;gap:16px}
.vc-grid.columns-2{grid-template-columns:repeat(2,1fr)}
.vc-grid.columns-3{grid-template-columns:repeat(3,1fr)}
.vc-grid.columns-4{grid-template-columns:repeat(4,1fr)}

.vc-card{
  border:1px solid var(--vc-line);border-radius:11px;overflow:hidden;
  background:var(--vc-card);display:flex;flex-direction:column;
  transition:box-shadow .15s ease, transform .15s ease;
}
.vc-card:hover{box-shadow:var(--vc-shadow);transform:translateY(-2px)}
.vc-card>a{display:flex;flex-direction:column;flex:1;color:inherit;text-decoration:none}

.vc-card-thumb{
  aspect-ratio:4/3;background:linear-gradient(135deg,#eef2f7,#dde6f0);
  display:grid;place-items:center;position:relative;overflow:hidden;
}
.vc-card-thumb img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;padding:14px}
.vc-badge{
  position:absolute;top:9px;left:9px;z-index:2;
  font-size:10px;font-weight:700;letter-spacing:.03em;
  padding:3px 7px;border-radius:5px;color:#fff;
}
.vc-badge.teams{background:var(--vc-teams)}

.vc-card-body{padding:12px 13px 14px;display:flex;flex-direction:column;gap:6px;flex:1}
.vc-card-marca{
  font-size:11px;color:var(--vc-muted);font-weight:600;
  text-transform:uppercase;letter-spacing:.04em;
}
.vc-card-titulo{
  font-family:var(--vc-font-head);
  font-size:14px;font-weight:600;color:var(--vc-ink);
  line-height:1.3;margin:0;
}
.vc-card-specs{font-size:11.5px;color:var(--vc-muted);margin-top:2px}
.vc-card-foot{
  margin-top:auto;padding-top:10px;
  display:flex;align-items:center;justify-content:space-between;
}
.vc-card-cta{font-size:12px;font-weight:700;color:var(--vc-blue)}

.vc-vazio{grid-column:1/-1;padding:40px;text-align:center;color:var(--vc-muted)}

/* paginação */
.vc-paginacao{display:flex;gap:6px;justify-content:center;margin-top:32px}
.vc-paginacao a{
  font-family:var(--vc-font-body);font-size:13px;
  padding:8px 14px;border:1px solid var(--vc-line);border-radius:8px;
  color:var(--vc-ink);text-decoration:none;background:#fff;
}
.vc-paginacao a:hover{border-color:var(--vc-blue);color:var(--vc-blue)}
.vc-paginacao a.atual{background:var(--vc-navy);border-color:var(--vc-navy);color:#fff}

/* loading */
.vc-listagem.is-loading,.velans-filtros-wrapper.is-loading{
  opacity:.5;pointer-events:none;transition:opacity .2s;
}

/* página do produto: tabela de atributos */
.vc-atributos{width:100%;border-collapse:collapse;font-family:var(--vc-font-body);font-size:13.5px}
.vc-atributos th{
  text-align:left;color:var(--vc-navy);font-weight:600;
  padding:10px 12px;border:1px solid var(--vc-line);background:var(--vc-bg-side);width:38%;
}
.vc-atributos td{padding:10px 12px;border:1px solid var(--vc-line);color:var(--vc-ink)}
.vc-atributos-titulo{
  font-family:var(--vc-font-head);font-size:17px;font-weight:700;color:var(--vc-navy);margin:0 0 12px;
}
/* página do produto: resumo no topo, igual ao do site (fonte do tema, #333);
   tamanho e peso vêm do widget do Elementor */
.vc-resumo{font-family:var(--vc-font-site);color:#333}

/* página do produto: galeria, trilha, logo da marca, veja também */
.vc-galeria-principal{display:block}
.vc-galeria-principal img{display:block;width:100%;height:auto;border:1px solid var(--vc-line);background:#fff}
.vc-galeria-miniaturas{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:10px}
.vc-galeria-item{padding:0;border:1px solid var(--vc-line);background:#fff;cursor:pointer;opacity:.7;transition:.15s}
.vc-galeria-item img{display:block;width:100%;height:auto}
.vc-galeria-item:hover,.vc-galeria-item.atual{opacity:1;border-color:var(--vc-blue)}
.vc-trilha{font-size:15px;line-height:1.7;color:#7a7a7a}
.vc-trilha a{color:#7a7a7a;text-decoration:none}
.vc-trilha a:hover{color:var(--vc-blue)}
.vc-trilha i{font-style:normal;margin:0 4px}
.vc-marca-logo img{display:block;max-width:100%;height:auto}
.vc-relacionados{margin-top:0}
.vc-btn-datasheet{
  display:inline-block;font-family:var(--vc-font-body);font-size:13px;font-weight:700;
  color:#fff!important;background:var(--vc-blue);border-radius:8px;
  padding:10px 18px;text-decoration:none!important;transition:.15s;
}
.vc-btn-datasheet:hover{background:var(--vc-navy)}
.vc-btn-comprar{
  display:inline-block;font-family:var(--vc-font-body);font-size:14px;font-weight:700;
  color:#fff!important;background:var(--vc-green);border-radius:8px;
  padding:12px 22px;text-decoration:none!important;transition:.15s;
}
.vc-btn-comprar:hover{background:var(--vc-navy)}

/* ---------------- Mobile ---------------- */
.velans-mobile-filtros-btn,.velans-drawer-overlay,.velans-drawer-close{display:none}

@media (max-width:991px){
  .vc-grid.columns-3,.vc-grid.columns-4{grid-template-columns:repeat(2,1fr)}
  .velans-mobile-filtros-btn{
    display:flex;align-items:center;justify-content:center;gap:8px;
    width:100%;padding:14px 20px;margin-bottom:20px;
    font-family:var(--vc-font-body);
    background:var(--vc-navy);color:#fff;font-size:15px;font-weight:600;
    border:0;border-radius:8px;cursor:pointer;
  }
  .velans-mobile-filtros-btn::before{content:"≡";font-size:20px}
  .velans-filtros-wrapper{
    position:fixed;top:0;left:-100%;width:85%;max-width:360px;height:100vh;
    background:#fff;z-index:9999;overflow-y:auto;padding:20px;
    box-shadow:2px 0 12px rgba(16,42,71,.15);transition:left .3s;
    border-radius:0;border:0;
  }
  .velans-filtros-wrapper.is-open{left:0}
  .velans-drawer-overlay.is-open{
    display:block;position:fixed;inset:0;background:rgba(14,42,71,.5);z-index:9997;
  }
  .velans-drawer-close{
    display:block;position:absolute;top:12px;right:12px;
    background:none;border:0;font-size:24px;color:var(--vc-muted);cursor:pointer;
  }
}
@media (max-width:600px){
  .vc-grid.columns-2,.vc-grid.columns-3,.vc-grid.columns-4{grid-template-columns:1fr}
}