:root {
  --bg:#000;
  --fg:#fff;
  --accent1:#7c3aed;
  --accent2:#ec4899;
  --radius:18px;
  --glass: rgba(255,255,255,0.04);
  --card-grad: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
}
*{box-sizing:border-box}
body{background:var(--bg); color:var(--fg); font-family:'Poppins',system-ui,Arial; margin:0; -webkit-font-smoothing:antialiased}
.container{max-width:1200px;margin:0 auto}
.hero-section{position:relative; overflow:hidden}
.hero-gradient{background:radial-gradient(ellipse at center, rgba(124,58,237,0.18) 0%, rgba(236,72,153,0.12) 30%, transparent 60%); inset:0; opacity:0.9}
.logo{font-weight:800}
.icon-btn{background:transparent;border:1px solid rgba(255,255,255,0.04);padding:8px;border-radius:999px;color:#fff}
.cart-btn{background:linear-gradient(90deg,var(--accent1),var(--accent2));padding:8px 12px;border-radius:999px;color:#fff;box-shadow:0 8px 24px rgba(124,58,237,0.12)}
.cart-count{background:#ff2fa0;color:#fff;padding:2px 6px;border-radius:999px;font-size:12px;margin-left:6px}
.wexlie-header{transition:all .25s ease}
.wexlie-header.scrolled{backdrop-filter: blur(6px); background: rgba(0,0,0,0.6); padding-top:6px; padding-bottom:6px}
.btn-primary{background:linear-gradient(90deg,var(--accent1),var(--accent2));padding:12px 20px;border-radius:999px;color:#fff;display:inline-block}
.btn-ghost{border:1px solid rgba(255,255,255,0.06);padding:12px 20px;border-radius:999px;color:#fff;display:inline-block}

.orchid-drawer .drawer-panel{background:linear-gradient(180deg, rgba(18,6,24,0.96), rgba(8,4,10,0.96)); box-shadow:-40px 0 80px rgba(236,72,153,0.06)}

.product-card{background:var(--card-grad); border-radius:var(--radius); overflow:hidden; transition:transform .25s ease, box-shadow .25s ease}
.product-card:hover{transform:translateY(-6px); box-shadow:0 30px 60px rgba(0,0,0,0.6)}
.product-image img{width:100%; height:260px; object-fit:cover; display:block}

.products-section .badge{position:absolute; top:10px; right:10px; background:rgba(255,255,255,0.06); padding:6px 10px; border-radius:12px; font-size:12px; color:#fff}

/* Responsive tweaks */
@media (max-width:768px){
  .hero-image{display:none}
  .hero-section{padding-top:40px;padding-bottom:40px}
}
