@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&display=swap');
:root{
  --bg1:#05070d; --bg2:#0b1020; --bg3:#101a34;
  --text:#eaf0ff; --muted:#9fb0d0;
  --stroke:rgba(255,255,255,.12);
  --card1:rgba(255,255,255,.08); --card2:rgba(255,255,255,.04);
  --accent:#22c55e; --brand:#60a5fa; --brand2:#22d3ee;
  --radius:18px; --shadow:0 20px 60px rgba(0,0,0,.45); --glow:0 0 60px rgba(96,165,250,.28);
}
*{box-sizing:border-box}
body{margin:0; font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial; color:var(--text); line-height:1.6;
  background: radial-gradient(900px 560px at 85% -10%, rgba(96,165,250,.18), transparent 50%),
              radial-gradient(900px 680px at -10% 120%, rgba(34,211,238,.14), transparent 60%),
              linear-gradient(180deg, var(--bg1), var(--bg2) 60%, var(--bg3)); overflow-x:hidden;}
.grid-bg{ position:fixed; inset:-2px; z-index:-1; pointer-events:none;
  background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 40px 40px, 40px 40px; animation: drift 30s linear infinite;
  mask-image: radial-gradient(1200px 600px at 50% 0%, black 40%, transparent 70%);}
@keyframes drift{from{background-position:0 0,0 0}to{background-position:200px 200px,200px 200px}}
.wrap{max-width:1240px; margin:0 auto; padding:28px 16px 80px;}
header{display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:8px;}
.brand{display:flex; align-items:center; gap:12px;}
.avatar{width:56px; height:56px; border-radius:14px; overflow:hidden; border:1px solid var(--stroke); background:#0b1220; box-shadow:var(--glow);}
.avatar img{width:100%; height:100%; object-fit:cover; display:block;}
h1{margin:0; font-size:clamp(22px,4vw,38px); letter-spacing:-.2px}
.subtitle{color:var(--muted); font-size:14px; margin-top:4px}
.btn{appearance:none; border:none; cursor:pointer; text-decoration:none;
  border-radius:12px; padding:12px 14px; font-weight:800; letter-spacing:.2px; font-size:15px;
  background:linear-gradient(135deg,var(--accent),#16a34a); color:#05140b;
  box-shadow:0 8px 30px rgba(34,197,94,.28); transition:transform .15s ease, filter .15s ease;}
.btn:hover{transform:translateY(-2px); filter:brightness(1.05)}
.btn-outline{background:linear-gradient(180deg, var(--card1), var(--card2)); border:1px solid var(--stroke); color:var(--text)}
.panel{background:linear-gradient(180deg,var(--card1),var(--card2)); border:1px solid var(--stroke);
  border-radius:var(--radius); padding:18px; box-shadow:var(--shadow); backdrop-filter:blur(8px);}
.panel h2{margin:2px 0 10px; font-size:20px}
.hero{margin-top:8px; display:grid; gap:16px; grid-template-columns: 1.1fr .9fr;}
@media (max-width: 980px){ .hero{grid-template-columns:1fr;} }
.video-wrap{position:relative; aspect-ratio:16/9; border-radius:14px; overflow:hidden; border:1px solid var(--stroke); background:#0b1220;}
.video-wrap iframe{position:absolute; inset:0; width:100%; height:100%; border:0;}
.bar{display:flex; gap:10px; flex-wrap:wrap; margin:16px 0 8px;}
.input,.select{ background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border:1px solid var(--stroke); color:var(--text); border-radius:12px; padding:10px 12px; height:42px; outline:none; }
.input{flex:1; min-width:260px} .select{min-width:180px}

/* Select com alto contraste */
.select { background:#1e293b; border:1px solid var(--stroke); color:#fff; }
.select option { background:#1e293b; color:#fff; }

/* Destaque compacto abaixo da busca */
#hl-compact { margin-top: 12px; }
.hl-mini{
  display:grid; grid-template-columns:96px 1fr; gap:12px; align-items:center;
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  border:1px solid var(--stroke); border-radius:14px; padding:10px;
}
.hl-thumb{ width:96px; height:96px; border-radius:10px; overflow:hidden; background:#0e1522; }
.hl-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.hl-text h4{ margin:0; font-size:15px; line-height:1.2; }
.hl-text p{ margin:4px 0 6px; font-size:13px; color: var(--muted); }
.hl-row{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.hl-price{ font-weight:800; font-size:14px; background: rgba(255,255,255,.08);
  border:1px solid var(--stroke); border-radius:10px; padding:4px 8px; }
.btn-sm{ padding:8px 10px; font-size:13px; border-radius:10px; }

.grid{display:grid; gap:16px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin-top:12px;}
.card{ background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04)); border:1px solid var(--stroke);
  border-radius:16px; overflow:hidden; box-shadow:var(--shadow); display:flex; flex-direction:column;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.card:hover{ transform: translateY(-3px); border-color: rgba(96,165,250,.6); box-shadow: var(--glow), var(--shadow);}
.cover{position:relative; aspect-ratio:16/10; background:#0e1522; overflow:hidden;}
.cover img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;}
.content{padding:14px 14px 16px; display:flex; flex-direction:column; gap:10px;}
.title{font-weight:800; font-size:17px; margin:0}
.desc{color:var(--muted); font-size:14px; margin:0}
.meta{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:auto;}
.price{font-weight:800; font-size:18px;}
footer{margin-top:28px; color:var(--muted); font-size:13px; text-align:center;}

/* Produto page */
.product-title{font-size:clamp(26px,4.5vw,44px); margin:0; letter-spacing:-.3px}
.product-hero{display:grid; grid-template-columns: 1.1fr .9fr; gap:16px}
@media (max-width: 980px){ .product-hero{grid-template-columns:1fr} }
.tagline{color:var(--muted); font-size:16px; margin-top:6px}
.gallery{display:grid; grid-template-columns: repeat(2,1fr); gap:12px; margin:12px 0}
.gallery .shot{aspect-ratio:4/5; border-radius:14px; overflow:hidden; border:1px solid var(--stroke); background:#0e1522; cursor:pointer; position:relative}
.gallery .shot::after{content:""; position:absolute; inset:0; background:rgba(255,255,255,.06); opacity:0; transition:opacity .15s ease}
.gallery .shot:hover::after{opacity:.25}
.gallery img{width:100%; height:100%; object-fit:cover; display:block}
.bullets{padding-left:18px; margin:10px 0; display:grid; gap:8px}
.badge-price{font-weight:900; font-size:22px; background:linear-gradient(135deg,#2dd4bf,#4ade80);
  color:#05241f; padding:10px 14px; border-radius:12px; box-shadow:0 6px 24px rgba(16,185,129,.25)}
.cta{display:flex; align-items:center; gap:14px; margin-top:12px; flex-wrap:wrap}

/* Lightbox overlay */
.lightbox{ position: fixed !important; inset: 0; z-index: 999999; display: none; background: rgba(0,0,0,.8); align-items: center; justify-content: center; padding: 24px; }
.lightbox[aria-hidden="false"]{ display: flex; }
.lightbox-inner{ position: relative; max-width: 96vw; max-height: 96vh; }
.lightbox-figure{ display: flex; align-items: center; justify-content: center; margin: 0; width: 100%; height: 100%; }
.lightbox-figure img{ max-width: 96vw; max-height: 92vh; width: auto; height: auto; object-fit: contain; display: block; }
.lightbox-nav, .lightbox-close { position: fixed; top: 16px; z-index: 1000000; }
.lightbox-nav { left: 16px; display: flex; gap: 8px; }
.lightbox-close { right: 16px; }
.lightbox-btn{ appearance:none; cursor:pointer; border:1px solid rgba(255,255,255,.35); background: rgba(20,20,30,.5); color:#fff; border-radius:12px; padding:10px 14px; font-weight:800; font-size:16px; }
.lightbox-btn:hover{ filter:brightness(1.1); }
#lbClose{ font-size:22px; padding:12px 16px; line-height:1; }


/* ---- Seção de Produtos em Destaque ---- */
#hl-section { margin-top: 16px; }
#hl-section h3 {
  font-size: 18px;
  margin: 0 0 4px;
  font-weight: 800;
  color: #facc15; /* amarelo chamativo */
  text-shadow: 0 0 8px rgba(250,204,21,0.6);
}
#hl-section .hl-desc {
  margin: 0 0 10px;
  font-size: 14px;
  color: var(--muted);
}

/* sombra colorida no card de destaque */
.hl-mini {
  box-shadow: 0 0 20px rgba(250,204,21,.25);
  transition: box-shadow .2s ease;
}
.hl-mini:hover {
  box-shadow: 0 0 30px rgba(250,204,21,.45);
}
.hl-nav {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.hl-btn {
  appearance:none;
  border:1px solid rgba(255,255,255,.35);
  background:rgba(20,20,30,.6);
  color:#fff;
  border-radius:10px;
  padding:6px 10px;
  font-weight:800;
  font-size:14px;
  cursor:pointer;
}
.hl-btn:hover { filter:brightness(1.15); }