@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

:root{
  --bg: #0a0f1c;
  --bg-soft: #0e1526;
  --surface: #141d33;
  --surface-hi: #1b2540;
  --line: #263252;
  --text: #e9edf6;
  --text-dim: #8b93a9;
  --gold: #ffb84d;
  --blue: #4dd9ff;
  --pink: #ff4d8d;
  --violet: #9b8cff;
  --mint: #6ee7b7;
  --amber: #ffd166;
  --radius: 14px;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{background:var(--bg); color:var(--text); font-family:'Inter',sans-serif; line-height:1.5; overflow-x:hidden;}
h1,h2,h3,.display{font-family:'Space Grotesk',sans-serif;}
.mono{font-family:'JetBrains Mono',monospace;}
a{color:inherit; text-decoration:none;}
button{font-family:inherit; cursor:pointer; border:none;}
img{max-width:100%; display:block;}
::selection{background:var(--gold); color:#0a0f1c;}

/* strand */
.strand{display:flex; align-items:center; gap:22px; width:100%; overflow:hidden; padding:10px 0;}
.strand.dense{gap:14px;}
.bulb{width:9px; height:9px; border-radius:50%; flex-shrink:0; animation:twinkle 2.6s ease-in-out infinite; box-shadow:0 0 8px 2px currentColor;}
@keyframes twinkle{0%,100%{opacity:.35; transform:scale(.85);} 50%{opacity:1; transform:scale(1.15);}}
.strand .bulb:nth-child(4n){color:var(--gold);}
.strand .bulb:nth-child(4n+1){color:var(--blue);}
.strand .bulb:nth-child(4n+2){color:var(--pink);}
.strand .bulb:nth-child(4n+3){color:var(--violet);}

/* header */
header{position:sticky; top:0; z-index:50; background:rgba(10,15,28,.9); backdrop-filter:blur(10px); border-bottom:1px solid var(--line);}
.nav-wrap{max-width:1240px; margin:0 auto; padding:16px 28px; display:flex; align-items:center; justify-content:space-between; gap:24px;}
.logo{font-size:20px; font-weight:700; letter-spacing:.02em; display:flex; align-items:center; gap:10px;}
.logo .dot{width:10px;height:10px;border-radius:50%;background:var(--gold);box-shadow:0 0 10px 3px var(--gold); animation:twinkle 2.2s ease-in-out infinite;}
nav ul{list-style:none; display:flex; gap:30px;}
nav a{font-size:14px; color:var(--text-dim); transition:color .2s;}
nav a:hover{color:var(--text);}
.header-actions{display:flex; align-items:center; gap:16px;}
.cart-btn{position:relative; background:var(--surface); border:1px solid var(--line); color:var(--text); padding:10px 16px; border-radius:999px; font-size:14px; font-weight:500; display:flex; align-items:center; gap:8px; transition:border-color .2s;}
.cart-btn:hover{border-color:var(--gold);}
.cart-count{background:var(--pink); color:#fff; font-size:11px; font-weight:700; border-radius:999px; min-width:18px; height:18px; padding:0 5px; display:flex; align-items:center; justify-content:center;}

/* breadcrumb */
.breadcrumb{max-width:1240px; margin:0 auto; padding:0 28px 18px; font-size:13px; color:var(--text-dim);}
.breadcrumb a:hover{color:var(--gold);}

/* hero */
.hero{max-width:1240px; margin:0 auto; padding:56px 28px 40px; display:grid; grid-template-columns:1.1fr .9fr; gap:50px; align-items:center;}
.eyebrow{font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); margin-bottom:18px; display:block;}
.hero h1{font-size:48px; line-height:1.08; font-weight:700; letter-spacing:-.01em; margin-bottom:20px;}
.hero h1 .accent{background:linear-gradient(90deg, var(--gold), var(--pink)); -webkit-background-clip:text; background-clip:text; color:transparent;}
.hero p{color:var(--text-dim); font-size:16px; max-width:460px; margin-bottom:30px;}
.hero-ctas{display:flex; gap:14px; flex-wrap:wrap;}
.btn-primary{background:var(--gold); color:#0a0f1c; padding:14px 26px; border-radius:999px; font-weight:600; font-size:14px; transition:transform .15s, box-shadow .15s; display:inline-block;}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 8px 24px -8px var(--gold);}
.btn-ghost{border:1px solid var(--line); color:var(--text); padding:14px 26px; border-radius:999px; font-weight:500; font-size:14px; transition:border-color .2s; display:inline-block;}
.btn-ghost:hover{border-color:var(--text-dim);}
.hero-visual{position:relative; aspect-ratio:1/1; border-radius:24px; background:radial-gradient(circle at 30% 30%, #1b2540, #0a0f1c 70%); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; overflow:hidden;}
.spiral{position:relative; width:78%; height:78%;}
.spiral .b{position:absolute; width:12px; height:12px; border-radius:50%; box-shadow:0 0 14px 4px currentColor; animation:twinkle 2.4s ease-in-out infinite;}

section{max-width:1240px; margin:0 auto; padding:50px 28px;}
.section-head{display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:28px; gap:20px; flex-wrap:wrap;}
.section-head h2{font-size:28px; font-weight:600;}
.section-head p{color:var(--text-dim); font-size:14px; max-width:420px;}

/* category tiles */
.cat-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(220px,1fr)); gap:16px;}
.cat-tile{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:20px; transition:border-color .2s, transform .2s; position:relative; overflow:hidden;}
.cat-tile:hover{border-color:var(--c); transform:translateY(-3px);}
.cat-tile-dot{width:10px; height:10px; border-radius:50%; background:var(--c); box-shadow:0 0 10px 3px var(--c); display:inline-block; margin-bottom:14px;}
.cat-tile h3{font-size:15px; font-weight:600; margin-bottom:6px; line-height:1.3;}
.cat-tile-count{font-size:12px; color:var(--text-dim); font-family:'JetBrains Mono',monospace;}

/* product grid + cards */
.grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(250px,1fr)); gap:20px;}
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column; transition:border-color .2s, transform .2s;}
.card:hover{border-color:var(--text-dim); transform:translateY(-3px);}
.card-visual{height:170px; position:relative; display:flex; align-items:center; justify-content:center; background:var(--bg-soft); overflow:hidden;}
.card-visual img{width:100%; height:100%; object-fit:contain; padding:10px;}
.card-visual::before{content:''; position:absolute; width:120px; height:120px; border-radius:50%; filter:blur(28px); opacity:.4; background:var(--c); z-index:0;}
.card-visual img{position:relative; z-index:1;}
.glyph{position:relative; z-index:1; display:flex; gap:7px;}
.glyph .g{width:8px; height:8px; border-radius:50%; background:var(--c); box-shadow:0 0 10px 3px var(--c); animation:twinkle 2.2s ease-in-out infinite;}
.oos-badge{position:absolute; top:10px; right:10px; background:rgba(10,15,28,.85); border:1px solid var(--line); color:var(--text-dim); font-size:10.5px; padding:4px 9px; border-radius:999px; z-index:2;}
.card-body{padding:16px 16px 18px; display:flex; flex-direction:column; gap:8px; flex:1;}
.card-cat{font-size:10.5px; text-transform:uppercase; letter-spacing:.08em; font-family:'JetBrains Mono',monospace;}
.card-body h3{font-size:14.5px; font-weight:600; line-height:1.35;}
.card-body h3 a:hover{color:var(--gold);}
.card-foot{display:flex; align-items:center; justify-content:space-between; margin-top:auto; padding-top:6px; gap:8px;}
.price{font-size:16.5px; font-weight:700;}
.unit-suffix{font-size:11px; font-weight:500; color:var(--text-dim);}
.add-btn{background:var(--surface-hi); border:1px solid var(--line); color:var(--text); padding:8px 14px; border-radius:999px; font-size:12.5px; font-weight:500; transition:background .2s, border-color .2s; white-space:nowrap;}
.add-btn:hover{border-color:var(--c); background:var(--surface);}
.add-btn.added{background:var(--c); color:#0a0f1c; border-color:var(--c);}
.add-btn.big{padding:14px 28px; font-size:14px;}

/* info strip */
.info-strip{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;}
.info-cell{background:var(--surface); padding:26px 24px;}
.info-cell .num{font-family:'JetBrains Mono',monospace; color:var(--gold); font-size:13px; margin-bottom:8px; display:block;}
.info-cell h3{font-size:16px; margin-bottom:8px;}
.info-cell p{font-size:13.5px; color:var(--text-dim);}

/* product detail */
.pd-layout{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start;}
.pd-gallery{position:sticky; top:90px;}
.pd-main{border-radius:var(--radius); overflow:hidden; background:var(--bg-soft); border:1px solid var(--line); aspect-ratio:1/1; display:flex; align-items:center; justify-content:center;}
.pd-main img{width:100%; height:100%; object-fit:contain; padding:14px;}
.pd-noimg{display:flex; align-items:center; justify-content:center;}
.pd-thumbs{display:flex; gap:8px; margin-top:10px; flex-wrap:wrap;}
.thumb-img{width:64px; height:64px; object-fit:contain; background:var(--bg-soft); border:1px solid var(--line); border-radius:8px; padding:4px; cursor:pointer; opacity:.65; transition:opacity .2s, border-color .2s;}
.thumb-img:hover, .thumb-img.active{opacity:1; border-color:var(--gold);}
.pd-info h1{font-size:26px; line-height:1.3; margin:8px 0 12px;}
.stock-badge{display:inline-block; font-size:12px; padding:5px 11px; border-radius:999px; margin-bottom:16px; font-family:'JetBrains Mono',monospace;}
.stock-badge.in{background:rgba(110,231,183,.12); color:var(--mint); border:1px solid rgba(110,231,183,.3);}
.stock-badge.out{background:rgba(255,209,102,.1); color:var(--amber); border:1px solid rgba(255,209,102,.28);}
.pd-editorial{color:var(--text-dim); font-size:14.5px; line-height:1.65; margin-bottom:24px;}
.pd-price-row{display:flex; align-items:center; gap:18px; margin-bottom:32px; flex-wrap:wrap;}
.pd-price{font-size:30px; font-weight:700;}
.pd-subhead{font-size:18px; margin-bottom:14px;}
.spec-table{width:100%; border-collapse:collapse; font-size:13.5px; margin-bottom:16px;}
.spec-table td{padding:9px 0; border-bottom:1px solid var(--line);}
.spec-table td:first-child{color:var(--text-dim); width:45%;}
.spec-bullets{list-style:none; display:flex; flex-direction:column; gap:8px;}
.spec-bullets li{font-size:13.5px; color:var(--text-dim); padding-left:16px; position:relative;}
.spec-bullets li::before{content:''; width:5px; height:5px; border-radius:50%; background:var(--gold); position:absolute; left:0; top:8px;}

/* footer */
footer{border-top:1px solid var(--line); margin-top:40px;}
.footer-wrap{max-width:1240px; margin:0 auto; padding:40px 28px 26px; display:flex; justify-content:space-between; gap:30px; flex-wrap:wrap;}
.footer-col h4{font-size:13px; color:var(--text-dim); margin-bottom:14px; text-transform:uppercase; letter-spacing:.08em; font-family:'JetBrains Mono',monospace;}
.footer-col p, .footer-col a{font-size:14px; color:var(--text); display:block; margin-bottom:8px;}
.footer-col a:hover{color:var(--gold);}
.footer-bottom{text-align:center; padding:18px; font-size:12px; color:var(--text-dim); border-top:1px solid var(--line);}

/* cart drawer */
.overlay{position:fixed; inset:0; background:rgba(5,8,16,.6); backdrop-filter:blur(2px); opacity:0; pointer-events:none; transition:opacity .25s; z-index:90;}
.overlay.open{opacity:1; pointer-events:auto;}
.drawer{position:fixed; top:0; right:0; height:100%; width:400px; max-width:92vw; background:var(--bg-soft); border-left:1px solid var(--line); transform:translateX(100%); transition:transform .3s ease; z-index:91; display:flex; flex-direction:column;}
.drawer.open{transform:translateX(0);}
.drawer-head{padding:22px 22px 16px; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:center;}
.drawer-head h3{font-size:18px;}
.close-btn{background:none; color:var(--text-dim); font-size:22px; line-height:1;}
.close-btn:hover{color:var(--text);}
.drawer-body{flex:1; overflow-y:auto; padding:18px 22px;}
.cart-item{display:flex; gap:12px; padding:14px 0; border-bottom:1px solid var(--line);}
.cart-item .thumb{width:52px; height:52px; border-radius:10px; background:var(--surface); flex-shrink:0; display:flex; align-items:center; justify-content:center; overflow:hidden;}
.cart-item .thumb img{width:100%; height:100%; object-fit:contain;}
.ci-info{flex:1; min-width:0;}
.ci-info h4{font-size:13px; font-weight:600; margin-bottom:4px; line-height:1.3;}
.ci-info .mono{font-size:12px; color:var(--text-dim);}
.qty-row{display:flex; align-items:center; gap:10px; margin-top:8px;}
.qty-btn{width:24px; height:24px; border-radius:6px; background:var(--surface); border:1px solid var(--line); color:var(--text); font-size:14px; display:flex; align-items:center; justify-content:center;}
.qty-btn:hover{border-color:var(--gold);}
.remove-btn{font-size:12px; color:var(--text-dim); margin-left:auto;}
.remove-btn:hover{color:var(--pink);}
.empty-cart{text-align:center; padding:60px 20px; color:var(--text-dim); font-size:14px;}
.drawer-foot{padding:20px 22px 24px; border-top:1px solid var(--line);}
.total-row{display:flex; justify-content:space-between; font-size:15px; margin-bottom:16px;}
.total-row .val{font-weight:700; font-size:19px;}
.checkout-btn{width:100%; background:var(--gold); color:#0a0f1c; padding:14px; border-radius:999px; font-weight:600; font-size:14px;}
.checkout-btn:hover{filter:brightness(1.06);}
.cf-field{margin-bottom:14px;}
.cf-field label{display:block; font-size:12.5px; color:var(--text-dim); margin-bottom:6px;}
.cf-field input, .cf-field textarea{width:100%; background:var(--surface); border:1px solid var(--line); color:var(--text); padding:10px 12px; border-radius:8px; font-family:inherit; font-size:13.5px;}
.cf-field input:focus, .cf-field textarea:focus{outline:none; border-color:var(--gold);}
.success-box{text-align:center; padding:40px 10px;}
.success-box .check{width:56px; height:56px; border-radius:50%; background:var(--gold); color:#0a0f1c; display:flex; align-items:center; justify-content:center; font-size:26px; margin:0 auto 18px;}
.success-box h3{margin-bottom:8px;}
.success-box p{color:var(--text-dim); font-size:13.5px;}

button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible{outline:2px solid var(--gold); outline-offset:2px;}

@media (max-width:860px){
  .hero{grid-template-columns:1fr; padding-top:36px;}
  .hero h1{font-size:36px;}
  nav{display:none;}
  .info-strip{grid-template-columns:1fr;}
  .footer-wrap{flex-direction:column;}
  .pd-layout{grid-template-columns:1fr;}
  .pd-gallery{position:static;}
}
@media (prefers-reduced-motion: reduce){
  .bulb,.glyph .g,.spiral .b,.logo .dot{animation:none;}
}