/*
Theme Name: Streetcode
Theme URI: https://dadashose.shop
Author: DADASHOSE
Description: Streetwear e-commerce theme for DADASHOSE — bold typography, volt accents, dark UI.
Version: 1.0.0
Text Domain: streetcode
*/

:root{
  --bg:#0a0a0a;
  --panel:#141414;
  --line:#2a2a2a;
  --ink:#f4f4f0;
  --muted:#9a9a94;
  --volt:#d7ff3e;
  --red:#ff3b00;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--bg);color:var(--ink);
  font-family:'Space Grotesk',Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.wrap{max-width:1280px;margin:0 auto;padding:0 24px}
.display{font-family:'Archivo Black',Impact,sans-serif;text-transform:uppercase;line-height:.92;letter-spacing:-.01em}

/* ===== Announcement bar ===== */
.announce{
  background:var(--volt);color:#0a0a0a;
  text-align:center;font-weight:700;font-size:13px;
  padding:9px 12px;letter-spacing:.12em;text-transform:uppercase;
}

/* ===== Header ===== */
header.site{
  position:sticky;top:0;z-index:50;
  background:rgba(10,10,10,.85);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.nav{
  display:flex;align-items:center;justify-content:space-between;
  height:64px;
}
.logo{font-family:'Archivo Black',sans-serif;font-size:22px;letter-spacing:.02em}
.logo span{color:var(--volt)}
.nav-links{display:flex;gap:28px;font-weight:500;font-size:14px;text-transform:uppercase;letter-spacing:.08em}
.nav-links a{color:var(--muted);transition:color .15s}
.nav-links a:hover{color:var(--ink)}
.nav-links a.hot{color:var(--red)}
.nav-links ul{display:flex;gap:28px;list-style:none}
.nav-icons{display:flex;gap:18px;align-items:center}
.nav-icons a{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:700;letter-spacing:.06em}
.cart-count{
  background:var(--volt);color:#0a0a0a;border-radius:50%;
  width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;font-size:11px;
}
.mobile-toggle{display:none;background:none;border:1px solid var(--line);color:var(--ink);padding:6px 12px;cursor:pointer;font-family:inherit}

/* ===== Hero ===== */
.hero{
  position:relative;border-bottom:1px solid var(--line);
  display:grid;grid-template-columns:1.1fr .9fr;min-height:78vh;
}
.hero-copy{padding:64px 48px 48px 24px;display:flex;flex-direction:column;justify-content:center;gap:26px}
.kicker{
  display:inline-flex;align-items:center;gap:10px;
  color:var(--volt);font-size:13px;font-weight:700;letter-spacing:.28em;text-transform:uppercase;
}
.kicker::before{content:"";width:34px;height:2px;background:var(--volt)}
.hero h1{font-size:clamp(44px,7vw,92px)}
.hero h1 .stroke{color:transparent;-webkit-text-stroke:2px var(--ink)}
.hero h1 .voltage{color:var(--volt)}
.hero-sub{color:var(--muted);font-size:17px;max-width:44ch;line-height:1.6}
.hero-cta{display:flex;gap:16px;flex-wrap:wrap;margin-top:6px}
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:'Archivo Black',sans-serif;text-transform:uppercase;
  font-size:14px;letter-spacing:.06em;padding:16px 32px;cursor:pointer;
  border:2px solid var(--ink);transition:.15s;
}
.btn-solid{background:var(--ink);color:#0a0a0a}
.btn-solid:hover{background:var(--volt);border-color:var(--volt)}
.btn-ghost{background:transparent;color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:#0a0a0a}
.hero-media{position:relative;border-left:1px solid var(--line);overflow:hidden}
.hero-media .ph{
  width:100%;height:100%;min-height:420px;
  background:
    radial-gradient(circle at 70% 30%,rgba(215,255,62,.18),transparent 55%),
    repeating-linear-gradient(135deg,#151515 0 14px,#111 14px 28px);
  display:flex;align-items:center;justify-content:center;
}
.hero-media .ph .tag{
  font-size:12px;letter-spacing:.3em;color:var(--muted);text-transform:uppercase;
  border:1px dashed #3a3a3a;padding:10px 18px;
}
.hero-badge{
  position:absolute;left:24px;bottom:24px;
  background:var(--red);color:#fff;font-family:'Archivo Black',sans-serif;
  font-size:13px;padding:10px 16px;letter-spacing:.1em;transform:rotate(-3deg);
}

/* ===== Marquee ===== */
.marquee{border-bottom:1px solid var(--line);overflow:hidden;background:#0d0d0d;padding:14px 0}
.marquee-track{
  display:flex;gap:48px;white-space:nowrap;
  font-family:'Archivo Black',sans-serif;font-size:15px;letter-spacing:.14em;text-transform:uppercase;
  animation:scroll 22s linear infinite;color:var(--muted);
}
.marquee-track b{color:var(--volt)}
.marquee-track span::after{content:"◆";margin-left:48px;color:#333;font-size:10px;vertical-align:middle}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ===== Sections ===== */
section{padding:72px 0}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:36px;gap:20px;flex-wrap:wrap}
.sec-head h2{font-size:clamp(30px,4vw,48px)}
.sec-head .see-all{
  font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--volt);border-bottom:2px solid var(--volt);padding-bottom:4px;
}

/* Categories */
.cats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.cat{position:relative;border:1px solid var(--line);overflow:hidden;aspect-ratio:3/4;display:flex;align-items:flex-end}
.cat .ph{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  color:var(--muted);font-size:11px;letter-spacing:.25em;text-transform:uppercase;
  border:1px dashed #333;margin:18px;
}
.cat:nth-child(1) .ph{background:repeating-linear-gradient(45deg,#181818 0 12px,#111 12px 24px)}
.cat:nth-child(2) .ph{background:radial-gradient(circle at 50% 35%,#1e2410,#0f0f0f)}
.cat:nth-child(3) .ph{background:repeating-linear-gradient(-45deg,#1a1a1a 0 12px,#101010 12px 24px)}
.cat:nth-child(4) .ph{background:radial-gradient(circle at 30% 70%,#26140c,#0f0f0f)}
.cat-label{
  position:relative;z-index:2;width:100%;
  background:rgba(10,10,10,.8);backdrop-filter:blur(6px);
  padding:16px;display:flex;justify-content:space-between;align-items:center;
  font-family:'Archivo Black',sans-serif;font-size:15px;text-transform:uppercase;
}
.cat-label em{font-style:normal;color:var(--muted);font-family:'Space Grotesk',sans-serif;font-size:12px}
.cat:hover{border-color:var(--volt)}

/* Product grid */
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.card{border:1px solid var(--line);background:var(--panel);transition:border-color .15s}
.card:hover{border-color:#4a4a4a}
.card-media{
  position:relative;aspect-ratio:1/1;overflow:hidden;
  background:radial-gradient(circle at 50% 40%,#1c1c1c,#101010 70%);
  display:flex;align-items:center;justify-content:center;
}
.card-media .ph{
  border:1px dashed #3a3a3a;color:#6b6b6b;font-size:11px;
  letter-spacing:.25em;text-transform:uppercase;padding:44px 20px;text-align:center;
}
.flag{position:absolute;top:12px;left:12px;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:5px 10px}
.flag.new{background:var(--volt);color:#0a0a0a}
.flag.sale{background:var(--red);color:#fff}
.wish{
  position:absolute;top:10px;right:10px;width:34px;height:34px;
  border:1px solid var(--line);background:rgba(10,10,10,.7);
  display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--muted);
}
.wish:hover{color:var(--red);border-color:var(--red)}
.card-body{padding:16px}
.card-name{font-weight:700;font-size:15px;letter-spacing:.02em}
.card-cat{color:var(--muted);font-size:12px;margin-top:3px;letter-spacing:.1em;text-transform:uppercase}
.price-row{display:flex;align-items:center;gap:10px;margin-top:10px}
.price{font-family:'Archivo Black',sans-serif;font-size:17px}
.price.old{color:var(--muted);font-weight:400;font-family:'Space Grotesk',sans-serif;text-decoration:line-through;font-size:14px}
.dash{flex:1;height:2px;background:repeating-linear-gradient(90deg,var(--line) 0 6px,transparent 6px 12px)}
.sizes{display:flex;gap:6px;margin-top:12px}
.size{
  min-width:32px;height:26px;padding:0 8px;border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;
  font-size:11px;color:var(--muted);
}

/* Feature banner */
.feature{position:relative;border:1px solid var(--line);overflow:hidden;display:grid;grid-template-columns:1fr 1fr;min-height:420px}
.feature-copy{padding:56px;display:flex;flex-direction:column;justify-content:center;gap:20px}
.feature-copy h2{font-size:clamp(28px,3.6vw,44px)}
.feature-copy p{color:var(--muted);line-height:1.7;max-width:40ch}
.feature-media{
  border-left:1px solid var(--line);
  background:
    linear-gradient(rgba(255,59,0,.12),rgba(255,59,0,.12)),
    repeating-linear-gradient(90deg,#151515 0 22px,#101010 22px 44px);
  display:flex;align-items:center;justify-content:center;
  color:var(--muted);font-size:11px;letter-spacing:.25em;text-transform:uppercase;
}

/* Lookbook */
.lookbook{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.shot{
  aspect-ratio:3/4;border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;
  color:#5b5b5b;font-size:10px;letter-spacing:.2em;text-transform:uppercase;
}
.shot:nth-child(1){background:radial-gradient(circle at 60% 30%,#202006,#0f0f0f)}
.shot:nth-child(2){background:repeating-linear-gradient(45deg,#191919 0 10px,#0f0f0f 10px 20px)}
.shot:nth-child(3){background:radial-gradient(circle at 40% 60%,#231a10,#0f0f0f)}
.shot:nth-child(4){background:repeating-linear-gradient(-45deg,#181818 0 10px,#101010 10px 20px)}
.shot:nth-child(5){background:radial-gradient(circle at 70% 40%,#101c0e,#0f0f0f)}
.shot:nth-child(6){background:linear-gradient(160deg,#1b1b1b,#0d0d0d)}

/* Newsletter */
.newsletter{border:1px solid var(--line);background:var(--panel);padding:64px 48px;text-align:center}
.newsletter h2{font-size:clamp(28px,4vw,44px)}
.newsletter p{color:var(--muted);margin:14px 0 26px}
.form{display:flex;max-width:460px;margin:0 auto;border:2px solid var(--ink)}
.form input{
  flex:1;background:transparent;border:none;outline:none;color:var(--ink);
  font-family:inherit;font-size:14px;padding:16px 18px;
}
.form input::placeholder{color:#666}
.form button{
  background:var(--volt);color:#0a0a0a;border:none;cursor:pointer;
  font-family:'Archivo Black',sans-serif;font-size:13px;letter-spacing:.08em;
  text-transform:uppercase;padding:0 26px;
}
.form button:hover{background:#e6ff70}

/* Footer */
footer{border-top:1px solid var(--line);background:#0d0d0d}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;padding:56px 0}
.footer-grid h3{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:18px}
.footer-grid ul{list-style:none;display:flex;flex-direction:column;gap:12px;font-size:14px}
.footer-grid ul a{color:#c9c9c2}.footer-grid ul a:hover{color:var(--volt)}
.footer-brand p{color:var(--muted);margin-top:14px;max-width:36ch;line-height:1.7;font-size:14px}
.socials{display:flex;gap:12px;margin-top:20px}
.socials a{
  width:38px;height:38px;border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;
}
.socials a:hover{border-color:var(--volt);color:var(--volt)}
.footer-bottom{
  border-top:1px solid var(--line);padding:20px 0;
  display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
  color:#7a7a74;font-size:12px;letter-spacing:.06em;
}
.pay-badges{display:flex;gap:8px}
.pay-badges span{border:1px solid var(--line);padding:4px 10px;font-size:10px;letter-spacing:.1em}

/* Product page */
.crumbs{padding:20px 0;color:var(--muted);font-size:13px;letter-spacing:.08em;text-transform:uppercase}
.crumbs a:hover{color:var(--ink)}
.product{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;padding-bottom:72px}
.gallery{display:flex;flex-direction:column;gap:14px}
.gallery-main{
  aspect-ratio:1/1;border:1px solid var(--line);
  background:radial-gradient(circle at 50% 40%,#1c1c1c,#101010 70%);
  display:flex;align-items:center;justify-content:center;
}
.gallery-main .ph{border:1px dashed #3a3a3a;color:#6b6b6b;font-size:12px;letter-spacing:.25em;text-transform:uppercase;padding:60px 24px;text-align:center}
.thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.thumb{
  aspect-ratio:1/1;border:1px solid var(--line);cursor:pointer;
  background:repeating-linear-gradient(45deg,#171717 0 10px,#101010 10px 20px);
  display:flex;align-items:center;justify-content:center;
  color:#6b6b6b;font-size:10px;letter-spacing:.2em;text-transform:uppercase;
}
.thumb:hover,.thumb.active{border-color:var(--volt);color:var(--volt)}
.info{display:flex;flex-direction:column;gap:22px;position:sticky;top:88px;align-self:start}
.flag-new{align-self:flex-start;background:var(--volt);color:#0a0a0a;font-weight:700;font-size:11px;letter-spacing:.16em;text-transform:uppercase;padding:5px 10px}
.info h1{font-size:clamp(28px,3.4vw,40px)}
.sub{color:var(--muted);font-size:14px;letter-spacing:.1em;text-transform:uppercase}
.price-row-big{display:flex;align-items:baseline;gap:14px}
.price-big{font-family:'Archivo Black',sans-serif;font-size:30px}
.note{color:var(--muted);font-size:13px}
.stock{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--volt);letter-spacing:.06em;text-transform:uppercase}
.stock::before{content:"";width:8px;height:8px;background:var(--volt);border-radius:50%;box-shadow:0 0 8px var(--volt)}
.block h3{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.colors{display:flex;gap:10px}
.swatch{width:40px;height:40px;border:1px solid var(--line);cursor:pointer}
.swatch.active{border-color:var(--volt);outline:2px solid var(--volt);outline-offset:2px}
.sw1{background:linear-gradient(135deg,#e8e8e2,#b9b9b2)}
.sw2{background:linear-gradient(135deg,#1a1a1a,#000)}
.sw3{background:linear-gradient(135deg,#d7ff3e,#8fae1f)}
.swatch-name{color:var(--muted);font-size:13px}
.sizes-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.size-btn{
  height:44px;border:1px solid var(--line);cursor:pointer;
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;
  transition:.12s;background:transparent;color:var(--ink);font-family:inherit;
}
.size-btn:hover{border-color:#5a5a5a}
.size-btn.active{background:var(--ink);color:#0a0a0a;border-color:var(--ink)}
.size-btn.oos{color:#3a3a3a;border-style:dashed;cursor:not-allowed;text-decoration:line-through}
.size-guide{color:var(--volt);font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;border-bottom:2px solid var(--volt);align-self:flex-start;padding-bottom:2px}
.cta{display:flex;gap:12px}
.btn-buy{flex:2;background:var(--volt);color:#0a0a0a;border-color:var(--volt)}
.btn-buy:hover{background:#e6ff70}
.btn-cart{flex:1;background:transparent;color:var(--ink)}
.btn-cart:hover{background:var(--ink);color:#0a0a0a}
.trust{display:flex;gap:20px;color:var(--muted);font-size:12px;letter-spacing:.06em}
.trust span{display:flex;gap:6px;align-items:center}
.details{border-top:1px solid var(--line);margin-top:8px}
.acc{border-bottom:1px solid var(--line)}
.acc-head{
  width:100%;background:none;border:none;color:var(--ink);cursor:pointer;
  font-family:'Archivo Black',sans-serif;font-size:14px;text-transform:uppercase;letter-spacing:.06em;
  padding:18px 0;display:flex;justify-content:space-between;align-items:center;
}
.acc-head .chev{transition:.2s;color:var(--muted);font-family:'Space Grotesk',sans-serif}
.acc.open .chev{transform:rotate(45deg)}
.acc-body{max-height:0;overflow:hidden;transition:max-height .25s ease}
.acc.open .acc-body{max-height:400px}
.acc-body ul{list-style:none;padding-bottom:18px;color:var(--muted);font-size:14px;line-height:1.8}
.acc-body ul li::before{content:"— ";color:var(--volt)}
.reviews{display:flex;gap:24px;align-items:center;background:var(--panel);border:1px solid var(--line);padding:18px 20px}
.stars{color:var(--volt);letter-spacing:2px;font-size:16px}
.reviews .num{font-family:'Archivo Black',sans-serif;font-size:22px}
.reviews .count{color:var(--muted);font-size:13px}
.related{padding:64px 0 80px;border-top:1px solid var(--line)}

/* WP generic content */
.entry-content{padding:72px 0;line-height:1.8;font-size:16px;max-width:80ch}
.entry-content a{color:var(--volt)}
.wp-block-image img{border:1px solid var(--line)}

/* Responsive */
@media(max-width:980px){
  .hero{grid-template-columns:1fr}
  .hero-media{border-left:none;border-top:1px solid var(--line);min-height:340px}
  .hero-copy{padding:48px 24px}
  .cats,.grid{grid-template-columns:repeat(2,1fr)}
  .feature{grid-template-columns:1fr}
  .feature-media{border-left:none;border-top:1px solid var(--line);min-height:260px}
  .lookbook{grid-template-columns:repeat(3,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr}
  .product{grid-template-columns:1fr}
  .info{position:static}
  .nav-links{display:none}
}
@media(max-width:640px){
  .nav-links{display:none}
  .mobile-toggle{display:block}
  .cats{grid-template-columns:1fr 1fr}
  .grid{grid-template-columns:1fr 1fr}
  .newsletter{padding:48px 24px}
  .sizes-grid{grid-template-columns:repeat(4,1fr)}
}