:root{
  --bg:#0b0e12;
  --card:#11161d;
  --ink:#e5e7eb;
  --muted:#94a3b8;
  --brand:#eab308;
  --brand-ink:#0b0e12;
  --accent:#ef4444;
  --line:#1f2937;
  --success:#10b981;
  --chip:#0f172a;
}

*{box-sizing:border-box}
html,body{
  margin:0;
  height:100%;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial;
  color:var(--ink);
  background: 
    linear-gradient(180deg, rgba(11, 14, 18, 0.95) 0%, rgba(11, 14, 18, 0.9) 100%), 
    url("Imagens/tatoo_02.png") center/cover no-repeat fixed;
  min-height:100vh;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{max-width:1200px;margin:0 auto;padding:0 20px}
.btn{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.7rem 1.1rem;
  border-radius:10px;
  background:linear-gradient(135deg, #ffffff 0%, #f8fafc 20%, #e2e8f0 80%, #cbd5e1 100%);
  color:#1e293b;
  font-weight:800;
  border:1px solid rgba(255,255,255,0.2);
  box-shadow:0 4px 12px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.8);
  transition:all 0.2s ease;
}
.btn:hover{
  background:linear-gradient(135deg, #f8fafc 0%, #e2e8f0 20%, #cbd5e1 80%, #94a3b8 100%);
  transform:translateY(-1px);
  box-shadow:0 6px 16px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.8);
}

/* Topbar */
.topbar{background:#0f172a;color:#cbd5e1;font-size:.875rem}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:.5rem 0}

/* Header */
header{background:#0b0e12;border-bottom:1px solid #00000070}
header .wrap{display:flex;align-items:center;gap:20px;padding:16px 0}
.logo{
  display:inline-flex;
  align-items:center;
  gap:10px;
  background:linear-gradient(135deg, #ffffff 0%, #f8fafc 20%, #e2e8f0 80%, #cbd5e1 100%);
  color:#1e293b;
  font-weight:900;
  padding:8px 14px;
  border-radius:10px;
  letter-spacing:.5px;
  border:1px solid rgba(255,255,255,0.2);
  box-shadow:0 4px 12px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.8);
  transition:all 0.2s ease;
}
.logo:hover{
  background:linear-gradient(135deg, #f8fafc 0%, #e2e8f0 20%, #cbd5e1 80%, #94a3b8 100%);
  transform:translateY(-1px);
  box-shadow:0 6px 16px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.8);
}
.logo .sub{font-weight:800;color:#1e293b;opacity:.7;font-size:.8rem}
.search{flex:1;display:flex}
.search input{flex:1;padding:12px;border:1px solid #1f2937;border-right:0;border-radius:10px 0 0 10px;background:#0f172a;color:#e5e7eb}
.search button{padding:12px 16px;border:0;border-radius:0 10px 10px 0;background:var(--brand);font-weight:800;color:#111827}
.mini-actions{display:flex;align-items:center;gap:18px}

/* Main nav */
nav.nav{background:#0d1218;color:#cbd5e1;border-top:1px solid #111827;border-bottom:1px solid #00000070}
nav.nav .wrap{display:flex;gap:20px;align-items:center;padding:10px 0}
.nav .categories{position:relative}
.nav .dropdown{display:none;position:absolute;left:0;top:100%;background:#0b0e12;color:#e5e7eb;border:1px solid #1f2937;border-radius:12px;box-shadow:0 12px 30px #00000060;min-width:260px;z-index:50}
.nav .categories:hover .dropdown{display:block}
.nav .dropdown a{display:block;padding:10px 14px;border-bottom:1px dashed #1f2937}
.nav .dropdown a:last-child{border-bottom:0}
.nav a.link{padding:10px 6px;opacity:.9}
.nav a.link:hover{opacity:1;color:#fff}

/* HERO com background realista de estúdio */
.hero{position:relative;border-radius:18px;overflow:hidden;min-height:360px;margin:22px 0;border:1px solid #00000066}
.hero::before{content:"";position:absolute;inset:0;z-index:0;background:url('https://images.unsplash.com/photo-1541447271487-096653f5b9a5?q=80&w=1600&auto=format&fit=crop') center/cover no-repeat;filter:brightness(.55) contrast(1.05) saturate(1.1)}
.hero::after{content:"";position:absolute;inset:0;z-index:1;background:radial-gradient(80% 80% at 50% 60%, #0000 0%, #0005 70%, #000a 100%)}
.hero .content{position:relative;z-index:2;padding:34px;display:flex;flex-direction:column;gap:10px;height:100%;justify-content:flex-end}
.hero h1{margin:0;font-size:2.3rem}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.chip{background:var(--chip);border:1px solid #1f2937;color:#cbd5e1;border-radius:999px;padding:6px 10px;font-size:.8rem}

/* Features */
.features{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:20px 0}
.feature{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px;display:flex;gap:12px;align-items:center}
.feature svg{width:26px;height:26px}

/* Body layout */
.grid{display:grid;grid-template-columns:3fr 1.2fr;gap:24px}

/* Categories */
.title-row{display:flex;align-items:center;justify-content:space-between;margin:8px 0 14px}
.categories-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.cat-card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px;display:flex;gap:10px;align-items:center}
.cat-thumb{width:52px;height:52px;border-radius:10px;background:#0f172a;display:grid;place-items:center;font-weight:800;color:#9ca3af}
.cat-meta small{display:block;color:var(--muted)}

/* Sidebar */
.sidebar{display:grid;gap:16px}
.panel{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px}
.panel h4{margin:0 0 12px}

/* Products */
.products{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.product{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--card)}
.product .pimg{aspect-ratio:1/1;background:#0f172a;display:grid;place-items:center}
.product .body{padding:10px}
.price{display:flex;gap:8px;align-items:baseline}
.price .old{color:#64748b;text-decoration:line-through;font-size:.9rem}
.stars{color:var(--success);font-size:.9rem}
.badge{display:inline-block;background:var(--accent);color:#fff;font-weight:800;padding:4px 8px;border-radius:8px;font-size:.75rem}

/* Tips */
.tips{display:grid;gap:12px}
.tip{background:#0f172a;border:1px dashed #1f2937;border-radius:12px;padding:12px}
.tip strong{color:#eab308}

/* Footer */
footer{margin-top:30px;background:#0b0f15;color:#cbd5e1}
.footer{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:24px;padding:32px 0}
.footer h5{margin:0 0 10px}
.footer a{color:#cbd5e1;opacity:.9}
.footer a:hover{opacity:1}
.copyright{border-top:1px solid #111827;padding:12px 0;color:#94a3b8;font-size:.9rem;text-align:center}

/* Responsivo */
@media (max-width:1100px){
  .grid{grid-template-columns:1fr}
  .categories-grid{grid-template-columns:repeat(3,1fr)}
  .features{grid-template-columns:repeat(2,1fr)}
  .footer{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .categories-grid{grid-template-columns:repeat(2,1fr)}
  header .wrap{flex-wrap:wrap}
  .search{order:3;width:100%}
  .features{grid-template-columns:1fr}
  .products{grid-template-columns:1fr}
  .footer{grid-template-columns:1fr}
}