/* ===== Streetwear Theme — YOUR BRAND ===== */
:root{
  --bg: #0a0a0a;
  --fg: #f2f2f2;
  --muted: #a1a1a1;
  --glass: rgba(255,255,255,0.06);
  --glass-border: rgba(255,255,255,0.16);
  --accent: #7B5CFF; /* neon purple */
  --accent-2: #00FF9C; /* neon green */
  --danger: #ff3d6e;
  --radius: 16px;
  --shadow: 0 10px 30px rgba(0,0,0,0.35);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--fg); background: var(--bg); font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial;
  line-height:1.6; overflow-x:hidden;
}
img{max-width:100%; display:block}
a{color:var(--fg); text-decoration:none}
.container{width: min(1120px, 92%); margin-inline:auto}
.row{display:flex; gap:16px}
.spread{justify-content:space-between}
.center{align-items:center}
.gap{gap:8px}
.gap-xl{gap:28px}
.grid{display:grid; grid-template-columns:repeat(12,1fr); gap:18px}
.grid > *{grid-column:span 12}
@media(min-width:680px){.grid > *{grid-column:span 6}}
@media(min-width:980px){.grid > *{grid-column:span 4}}

/* Noise & gradient aura */
.noise{position:fixed; inset:0; pointer-events:none; background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="160" height="160" viewBox="0 0 160 160"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23n)" opacity="0.06"/></svg>'); background-size:160px; z-index:0}
.hero-art::before{content:""; position:absolute; inset:-10% -10% auto -10%; height:70vh; background: radial-gradient(60% 60% at 70% 40%, rgba(123,92,255,0.4), transparent 60%), radial-gradient(40% 40% at 30% 60%, rgba(0,255,156,0.35), transparent 60%); filter: blur(40px); z-index:0;}

/* Header */
.site-header{position:sticky; top:0; z-index:50; backdrop-filter:saturate(140%) blur(8px); background:linear-gradient(to bottom, rgba(10,10,10,0.85), rgba(10,10,10,0.55) 60%, rgba(10,10,10,0.0)); border-bottom:1px solid var(--glass-border)}
.site-header .logo img{height:36px}
.nav{display:none; gap:18px}
.nav a{opacity:.92}
.nav a.active{color:var(--accent)}
.header-cta{display:none}
.hamburger{background:none;border:0; display:grid; gap:5px; padding:6px; cursor:pointer}
.hamburger span{display:block; width:26px; height:2px; background:var(--fg)}
@media(min-width:880px){.nav{display:flex}.header-cta{display:block}.hamburger{display:none}}

/* Hero */
.hero{position:relative; isolation:isolate;}
.hero-inner{padding:80px 0 28px}
.hero-title{font-family:'Bebas Neue',system-ui; font-size: clamp(48px, 7.2vw, 120px); line-height:0.95; letter-spacing:.5px; text-transform:uppercase; margin:0;}
.hero-title .stroke{-webkit-text-stroke:1px var(--fg); color:transparent}
.hero-title .accent{display:block; background:linear-gradient(90deg, var(--accent), var(--accent-2)); -webkit-background-clip:text; background-clip:text; color:transparent}
.hero-copy{max-width:700px; color:var(--muted); margin-top:8px}
.hero-cta{display:flex; gap:12px; margin-top:20px}

/* Buttons */
.btn{--p:var(--accent); background:linear-gradient(135deg, var(--p), #4e33ff); color:#fff; border:none; border-radius:999px; padding:12px 18px; font-weight:700; box-shadow: var(--shadow); cursor:pointer; display:inline-grid; place-items:center; transition:transform .15s ease, filter .2s}
.btn:hover{transform:translateY(-1px); filter:brightness(1.08)}
.btn.small{padding:8px 12px; font-weight:600}
.btn.ghost{background:transparent; border:1px solid var(--glass-border); color:var(--fg)}
.btn.primary{--p:var(--accent)}
.btn.green{--p:var(--accent-2)}

/* Ticker */
.ticker{border-block:1px solid var(--glass-border);}
.ticker-track{display:flex; gap:36px; white-space:nowrap; overflow:hidden;}
.ticker-track span{padding:8px 0; display:inline-block; animation:scroll 28s linear infinite}
@keyframes scroll{from{transform:translateX(0)} to{transform:translateX(-100%)} }

/* Shop grid */
.shop-section{padding:40px 0 80px}
.section-head h2{margin:0; font-family:'Bebas Neue'; font-size:42px; letter-spacing:.5px}
.filters input, .filters select{background:var(--glass); border:1px solid var(--glass-border); color:var(--fg); padding:10px 12px; border-radius:10px}

.card{position:relative; background:var(--glass); border:1px solid var(--glass-border); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); display:flex; flex-direction:column}
.card .media{aspect-ratio: 4 / 5; background: linear-gradient(120deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); position:relative}
.badge{position:absolute; top:10px; left:10px; background:rgba(0,0,0,.55); border:1px solid var(--glass-border); color:#fff; font-size:12px; padding:4px 8px; border-radius:999px}
.card .content{padding:14px}
.card h3{margin:0 0 6px; font-size:18px}
.price{font-weight:800}
.options{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:8px}
.select, .qty, .swatches{background:rgba(255,255,255,0.04); border:1px solid var(--glass-border); border-radius:10px; padding:8px}
.swatches{display:flex; gap:6px; align-items:center; flex-wrap:wrap}
.swatches input{display:none}
.swatches label{width:20px; height:20px; border-radius:50%; border:2px solid rgba(255,255,255,.5); display:inline-block; cursor:pointer}
.action-row{display:flex; gap:8px; margin-top:10px}
.action-row .btn{flex:1}

/* Lookbook grid */
.grid-looks{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:40px auto}
.look-card{border-radius:16px; overflow:hidden; border:1px solid var(--glass-border); background:var(--glass)}

/* Footer */
.site-footer{border-top:1px solid var(--glass-border); padding:40px 0}
.grid-footer{display:grid; grid-template-columns: repeat(4, 1fr); gap:24px}
.logo.small{height:28px}
.site-footer h4{margin:0 0 10px}
.site-footer ul{list-style:none; margin:0; padding:0; display:grid; gap:8px}
.muted{color:var(--muted)}

/* Pages */
.page{padding:40px 0 80px}
.page-hero{padding:20px 0 10px; border-bottom:1px solid var(--glass-border)}
.glass{background:var(--glass); border:1px solid var(--glass-border); border-radius:var(--radius)}
.pad-xl{padding:22px}
.grid-2{display:grid; grid-template-columns:1fr;}
@media(min-width:880px){.grid-2{grid-template-columns:1fr 1fr}}

/* Tables */
.table-wrap{overflow:auto}
.size-table{width:100%; border-collapse:collapse}
.size-table th,.size-table td{padding:10px 12px; border-bottom:1px solid var(--glass-border); text-align:left}
.size-table th{color:var(--muted); font-weight:600}

/* FAQ */
.faq details{background:var(--glass); border:1px solid var(--glass-border); border-radius:12px; padding:14px 16px; margin:10px 0}
.faq summary{cursor:pointer; font-weight:700}

/* Mobile menu */
@media(max-width:879px){
  .nav{position:fixed; inset:60px 12px auto 12px; display:flex; flex-direction:column; gap:12px; background:var(--bg); border:1px solid var(--glass-border); border-radius:14px; padding:14px; transform:translateY(-16px); opacity:0; pointer-events:none; transition:.2s}
  .nav.open{transform:none; opacity:1; pointer-events:auto}
}

/* Masonry */
.masonry{columns:1; column-gap:12px}
@media(min-width:640px){.masonry{columns:2}}
@media(min-width:980px){.masonry{columns:3}}
.masonry img{width:100%; break-inside:avoid; margin:0 0 12px; border-radius:16px; border:1px solid var(--glass-border); background:var(--glass)}

/* Utility */
.checks{list-style:none; padding:0; margin:0; display:grid; gap:8px}
.checks li::before{content:'✔'; color:var(--accent-2); margin-right:8px}

/* Inputs */
input, select{color:var(--fg)}
input[type="number"]{width:100%}

/* Accessibility focus */
:focus-visible{outline:2px dashed var(--accent-2); outline-offset:2px}