:root {
  --bg: #0b0d12;
  --surface: #131720;
  --muted: #a5b0c2;
  --txt: #e6ebf4;
  --brand: #3ea6ff;
  --accent: #00e0b8;
  --card: #0f131b;
  --border: #1e2633;
  --danger: #e34848;
  --highlight: #ff3d57;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: Inter, system-ui, Segoe UI, Roboto, Arial, sans-serif;
  background: radial-gradient(1200px 600px at 80% -20%, #1b2230 0%, var(--bg) 60%) no-repeat, var(--bg);
  color: var(--txt);
  line-height: 1.5;
}

.container { max-width: 1280px; margin: 0 auto; padding: 24px; }

/* Header */
.header {
  display:flex; align-items:center; justify-content:space-between;
  padding: 14px 24px; border-bottom:1px solid var(--border);
  position: sticky; top:0; background: rgba(11,13,18,.72);
  backdrop-filter: blur(8px);
  z-index: 10;
}
.brand { font-weight: 800; letter-spacing:.5px; color: var(--txt); text-decoration:none; }
.search-box { display:flex; gap:8px; align-items:center; }
.search-box input, .search-box select {
  background: var(--card); color: var(--txt);
  border:1px solid var(--border); border-radius: 10px; padding:10px 12px; outline: none;
}
.search-box .btn { padding:10px 14px; }

.btn { appearance:none; border:1px solid var(--border); background: var(--surface); color: var(--txt);
  padding:10px 12px; border-radius: 10px; cursor:pointer; text-decoration:none; font-weight:700; }
.btn:hover{ border-color:#2a3446; }
.btn.primary{ background: linear-gradient(90deg, var(--brand), var(--accent)); color: #081018; border: none; }
.btn.ghost{ background: transparent; }
.btn.block{ width:100%; text-align:center; }

/* Layout: sidebar + content */
.layout {
  display:grid; grid-template-columns: 280px 1fr; gap:18px;
}
@media (max-width: 960px){ .layout{ grid-template-columns: 1fr; } }

.sidebar .sticky{ position: sticky; top: 84px; }
.sidebar-card{
  background: var(--surface); border:1px solid var(--border); border-radius:16px; padding:14px;
  box-shadow: 0 8px 26px rgba(0,0,0,.18);
}
.sidebar-title{ font-weight:800; margin:6px 0 10px; }

/* Árvore de categorias */
.cat-all, .cat-link{
  display:block; padding:8px 10px; border-radius:10px; text-decoration:none; color: var(--txt);
}
.cat-all.active, .cat-link.active{ background:#292d3a; }
.cat-all{ font-weight:700; background:#1f2430; border:1px solid var(--border); margin-bottom:6px; }
.cat-ul{ list-style:none; margin:6px 0; padding-left:0; }
.cat-ul.child{ margin-left: 10px; border-left:1px dashed #2b3446; padding-left:8px; }
.cat-li{ position: relative; margin: 2px 0; }
.cat-li.active > .cat-link{ background: #3b2b2e; border:1px solid #532c34; }
.cat-li.open > ul { display:block; }
.cat-ul.child { display:none; }
.cat-li.open > .cat-toggle::after { transform: rotate(90deg); }
.cat-toggle{
  width:22px; height:22px; border:1px solid var(--border); border-radius:6px; background:#171b24;
  position:absolute; left:-2px; top:7px; cursor:pointer;
}
.cat-toggle::after{
  content: '▸'; color: var(--muted); font-size: 12px; position:absolute; left:4px; top:1px;
  transition: transform .2s ease;
}
.cat-dot{
  width:8px; height:8px; background:#2b3344; border-radius:999px; display:inline-block; position:absolute; left:2px; top:12px;
}
.cat-link{ padding-left:28px; border:1px solid transparent; }

/* Conteúdo: grade 4 colunas */
.content { min-height: 480px; }
.product-grid {
  display:grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px;
}
@media (max-width: 1200px){ .product-grid{ grid-template-columns: repeat(3, 1fr);} }
@media (max-width: 860px){ .product-grid{ grid-template-columns: repeat(2, 1fr);} }
@media (max-width: 520px){ .product-grid{ grid-template-columns: 1fr; } }

/* Card */
.card {
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0)) , var(--card);
  border: 1px solid var(--border); border-radius: 16px; overflow:hidden;
  transform: translateY(18px); opacity: 0; filter: blur(8px);
  transition: transform .9s cubic-bezier(.21,1,.21,1), opacity .9s, filter .9s, box-shadow .3s;
}
.card.exibir { transform: translateY(0); opacity: 1; filter: blur(0); }
.card:hover { box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.card img { width:100%; aspect-ratio: 4/3; object-fit:contain; background:#0c0f14; }
.card .body { padding: 14px; }
.card h3 { margin:0 0 6px 0; font-size: 15.5px; font-weight:700; }
.price { color: var(--accent); font-weight: 800; margin: 8px 0 10px; }
.badges{ display:flex; gap:6px; flex-wrap: wrap; }
.badge{ font-size: 11px; color: var(--muted); border:1px solid var(--border); padding:4px 8px; border-radius: 999px; }

.actions { display:flex; gap:8px; margin-top: 10px; }
.footer { color: var(--muted); text-align:center; padding:24px; border-top:1px solid var(--border); margin-top: 40px; }

/* Fade-in util */
.io { opacity:0; transform: translateY(30px); filter: blur(6px);
      transition: transform .9s ease, opacity .9s ease, filter .9s ease; }
.io.exibir { opacity:1; transform:none; filter: blur(0); }

/* Form padrão (usado no orçamento) */
.form { background: var(--card); border:1px solid var(--border); border-radius:16px; padding:18px; }
.form .row{ display:grid; grid-template-columns: 1fr 1fr; gap:12px; }
@media (max-width: 720px){ .form .row{ grid-template-columns: 1fr; } }
.input{ display:flex; flex-direction:column; gap:6px; margin-bottom:12px; }
.input label{ color: var(--muted); font-size: 13px; }
.input input, .input textarea {
  background: #0c0f14; color: var(--txt);
  border:1px solid var(--border); border-radius:10px; padding:12px;
}

/* Modal "adicionado" (reaproveitado) */
.modal-backdrop{ position:fixed; inset:0; background: rgba(0,0,0,.5); display:none; align-items:center; justify-content:center; z-index: 1000; }
.modal-card{ width: 92%;