:root{
  --bg:#0b0b11; --bg-soft:#0f1117; --fg:#e9eaf0; --muted:#9aa3b2; --line:#1c2030;
  --brand:#7c5cff; /* purple */
  --brand2:#5bd6ff; /* cyan */
  --glass:rgba(255,255,255,.06);
  --rad:14px; --pad:16px; --max:1160px;
}

/* Base */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:linear-gradient(180deg,#0b0b11 0%,#0b0b11 45%,#0e1118 100%);
  color:var(--fg);
  line-height:1.6;
}
img{max-width:100%;display:block}

/* Utilities */
.container{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.section{padding:48px 0}
h1[id], h2[id], section[id], main[id]{scroll-margin-top:120px}
h1,h2{font-family:Outfit,Inter,sans-serif;letter-spacing:.3px}
h1{font-size:clamp(36px,5vw,62px);margin:0 0 8px}
h2{font-size:clamp(22px,3.2vw,32px);margin:0 0 8px}
p{color:var(--muted)}
.price{font-weight:800;color:#cbd5ff}

.btn{
  display:inline-flex;align-items:center;gap:8px;
  border-radius:12px;padding:10px 14px;font-weight:700;
  text-decoration:none;border:1px solid transparent;transition:.25s;
  background:transparent;color:var(--fg);cursor:pointer
}
.btn-primary{
  background:linear-gradient(135deg,var(--brand),var(--brand2) 60%);
  color:#0a0a0a;border:0
}
.btn-primary:hover{transform:translateY(-1px);filter:saturate(1.05)}
.btn-ghost{border-color:#2a3144}
.btn-ghost:hover{background:#131a28}

.chip{
  border:1px solid #2a3144;border-radius:999px;padding:8px 12px;
  background:transparent;color:var(--fg);cursor:pointer
}
.chip.is-active{
  background:linear-gradient(135deg,var(--brand),var(--brand2));
  color:#0b0b11;border-color:transparent
}

.icon-btn{
  background:transparent;border:1px solid #2a3144;color:var(--fg);
  border-radius:10px;padding:8px 10px;cursor:pointer
}
.icon-btn:hover{background:#131a28}

.glass{
  background:var(--glass);backdrop-filter:blur(8px);
  border:1px solid #1b2233;border-radius:var(--rad)
}

/* Topbar + Header */
.topbar{
  border-bottom:1px solid var(--line);background:#0b0b11;
  position:sticky;top:0;z-index:50
}
.tb-inner{height:40px;display:flex;align-items:center;justify-content:space-between}

.header{
  position:sticky;top:40px;z-index:40;border-bottom:1px solid var(--line);
  background:rgba(11,11,17,.7);backdrop-filter:blur(10px)
}
.header-row{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{font-family:Outfit,Inter,sans-serif;font-weight:800;text-decoration:none;color:#fff}
.brand span{
  background:linear-gradient(135deg,var(--brand),var(--brand2));
  -webkit-background-clip:text;background-clip:text;color:transparent
}
.nav{display:flex;gap:18px}
.nav a{color:var(--fg);text-decoration:none;opacity:.88}
.nav a:hover{opacity:1}

/* Hero */
.hero{padding:56px 0}
.hero-grid{
  display:grid;grid-template-columns:1.2fr 1fr;gap:28px;align-items:center
}
.hero-img{
  width:100%;height:auto;border-radius:16px;border:2px solid #12162a;object-fit:cover
}
.hero-badge{
  position:absolute;bottom:12px;right:12px;padding:6px 10px;font-weight:700
}
.hero-media{position:relative}
.cta-row{display:flex;gap:10px;flex-wrap:wrap}

/* Section head + filters */
.section-head{
  display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px
}
.filters{display:flex;gap:8px;flex-wrap:wrap}

/* Product grid */
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:16px
}

/* Optional card styling if you ever use <article class="card"> */
.card{
  border:1px solid #182033;border-radius:12px;overflow:hidden;background:#0f1117
}
.card .thumb{position:relative}
.card .thumb img{width:100%;aspect-ratio:1/1;object-fit:cover}
.badge{
  position:absolute;top:10px;left:10px;font-size:.75rem;
  background:linear-gradient(135deg,var(--brand),var(--brand2));
  color:#0b0b11;font-weight:800;border-radius:999px;padding:4px 8px
}
.card-body{padding:12px}

/* Modal (product gallery + lookbook zoom) */
.modal{
  position:fixed;inset:0;background:rgba(0,0,0,.55);
  display:grid;place-items:center;padding:18px;
  transition:.2s ease;z-index:60
}
.modal[aria-hidden="true"]{opacity:0;visibility:hidden;pointer-events:none}
.modal-card{
  width:min(92vw,980px);max-height:90vh;overflow:auto;
  border-radius:16px;background:#0b0b11;border:1px solid #182033;padding:14px
}

/* Cart drawer */
.cart{
  position:fixed;top:0;right:0;height:100dvh;width:min(92vw,420px);
  background:#0b0b11;border-left:1px solid #182033;z-index:70;
  transform:translateX(0);transition:transform .25s ease;
  display:flex;flex-direction:column
}
.cart[aria-hidden="true"]{transform:translateX(110%);pointer-events:none}
.cart-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px;border-bottom:1px solid #182033
}
.cart-items{padding:12px;flex:1;overflow:auto;display:grid;gap:8px}
.cart-foot{
  border-top:1px solid #182033;padding:12px;display:grid;gap:10px;
}
.cart .total{font-weight:800}

/* Forms */
.form{display:grid;gap:10px;padding:16px}
input,textarea{
  width:100%;border:1px solid #222a3d;background:#0e1323;color:var(--fg);
  border-radius:10px;padding:10px 12px;font:inherit
}
input:focus,textarea:focus{outline:none;border-color:#2f3a56;box-shadow:0 0 0 2px rgba(124,92,255,.25)}

/* About bullets */
.bullets{margin:0;padding-left:18px;display:grid;gap:6px}
.bullets li{color:var(--fg)}

/* Lookbook */
.lookbook-grid{
  display:grid;gap:12px;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr))
}
.lookbook-grid img{
  width:100%;height:100%;object-fit:cover;border-radius:12px;
  border:2px solid #12162a;cursor:zoom-in
}

/* Footer */
.footer{border-top:1px solid var(--line);padding:18px 0;margin-top:28px}
.foot-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.ig{color:#b9c1ff;text-decoration:none}
.ig:hover{text-decoration:underline}

/* Reveal-on-scroll */
.reveal{opacity:0;transform:translateY(12px) scale(.98);transition:opacity .5s ease,transform .5s ease}
.reveal.in{opacity:1;transform:none}

/* Small screens */
@media (max-width: 860px){
  .hero-grid{grid-template-columns:1fr}
  .header{top:40px}
}