:root{
  --bg:#000;
  --text:#fdff00;         /* main neon text */
  --pink:#ff00ff;
  --cyan:#00ffff;
  --purple:#a020f0;
  --card:#0f0f0f;
  --muted:rgba(255,255,255,0.08);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:"Poppins",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}

a{color:var(--text); text-decoration:none}

/* NAV */
.nav{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 16px;
  background:rgba(0,0,0,0.75);
  border-bottom:1px solid rgba(255,255,255,0.06);
  backdrop-filter: blur(6px);
}
.brand{display:flex; align-items:center; gap:10px}
.logo{height:48px; width:auto; display:block; filter: drop-shadow(0 0 12px var(--cyan)); border-radius:8px}
.brand-name{font-weight:700; letter-spacing:.5px; text-shadow:0 0 10px var(--text),0 0 12px var(--cyan)}
.links{display:flex; align-items:center; gap:14px}
.links a{padding:6px 8px; border-radius:8px; transition:all .15s}
.links a:hover{color:var(--cyan); text-shadow:0 0 14px var(--cyan),0 0 10px var(--pink)}
.links .active{border:1px solid rgba(255,255,255,0.12)}

/* Banner */
.banner{
  overflow:hidden; border-top:1px solid rgba(255,255,255,0.06);
  border-bottom:1px solid rgba(255,255,255,0.06);
  background: linear-gradient(90deg, rgba(0,255,255,0.08), rgba(255,0,255,0.08));
}
.banner-track{
  white-space:nowrap; padding:10px 0; font-weight:700; color:#000;
  text-shadow:none;
  animation:slide 15s linear infinite;
  background: linear-gradient(90deg, var(--cyan), var(--text));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}
@keyframes slide {
  0%{transform:translateX(100%)} 100%{transform:translateX(-100%)}
}

/* Layout */
.container{max-width:1200px; margin:24px auto; padding:16px}
.title{text-align:center; margin:8px 0 16px; text-shadow:0 0 12px rgba(253,255,0,.4)}

/* Grid */
.grid{
  display:grid; gap:18px;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

/* Card */
.card{
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  border:1px solid rgba(255,255,255,.06);
  border-radius:14px; padding:14px;
  box-shadow:0 0 24px rgba(0,0,0,.6);
  transition:transform .15s, box-shadow .15s, border-color .15s;
}
.card:hover{
  transform:translateY(-6px);
  border-color:rgba(0,255,255,.45);
  box-shadow:0 10px 28px rgba(0,255,255,.15);
}
.card h3{margin:10px 0 6px}
.card .price{font-weight:700; margin-bottom:8px}

/* "Image" blocks generated with CSS — no external files needed */
.scrunchie{
  height:160px; border-radius:12px; margin-bottom:10px;
  box-shadow: inset 0 0 30px rgba(0,0,0,.35), 0 0 24px rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
}

/* Individual looks */
.img-cyan{background:
  radial-gradient(circle at 30% 30%, rgba(0,255,255,.8) 0 25%, transparent 26% 100%),
  radial-gradient(circle at 70% 65%, rgba(0,180,255,.7) 0 30%, transparent 31% 100%),
  linear-gradient(135deg, rgba(0,255,255,.25), rgba(0,60,90,.35));
  box-shadow: 0 0 22px rgba(0,255,255,.35);
}
.img-cotton{background:
  radial-gradient(circle at 35% 35%, rgba(255,182,193,.85) 0 28%, transparent 29% 100%),
  radial-gradient(circle at 65% 60%, rgba(173,216,230,.85) 0 28%, transparent 29% 100%),
  linear-gradient(135deg, rgba(255,192,203,.3), rgba(173,216,230,.28));
  box-shadow: 0 0 22px rgba(255,182,193,.35);
}
.img-gold{background:
  radial-gradient(circle at 35% 40%, rgba(253,255,0,.85) 0 26%, transparent 27% 100%),
  radial-gradient(circle at 70% 60%, rgba(255,215,0,.85) 0 28%, transparent 29% 100%),
  linear-gradient(135deg, rgba(253,255,0,.28), rgba(130,110,0,.35));
  box-shadow: 0 0 22px rgba(253,255,0,.35);
}
.img-galaxy{background:
  radial-gradient(circle at 35% 40%, rgba(160,32,240,.85) 0 26%, transparent 27% 100%),
  radial-gradient(circle at 70% 60%, rgba(0,0,40,.9) 0 28%, transparent 29% 100%),
  linear-gradient(135deg, rgba(160,32,240,.25), rgba(0,0,60,.35));
  box-shadow: 0 0 22px rgba(160,32,240,.35);
}
.img-sugar{background:
  radial-gradient(circle at 35% 40%, rgba(255,0,255,.85) 0 26%, transparent 27% 100%),
  radial-gradient(circle at 70% 60%, rgba(255,105,180,.85) 0 28%, transparent 29% 100%),
  linear-gradient(135deg, rgba(255,0,255,.28), rgba(255,105,180,.33));
  box-shadow: 0 0 22px rgba(255,0,255,.35);
}
.img-midnight{background:
  radial-gradient(circle at 35% 40%, rgba(40,40,40,.95) 0 26%, transparent 27% 100%),
  radial-gradient(circle at 70% 60%, rgba(0,255,255,.45) 0 28%, transparent 29% 100%),
  linear-gradient(135deg, rgba(0,0,0,.6), rgba(0,255,255,.16));
  box-shadow: 0 0 22px rgba(0,255,255,.25);
}

/* Buttons */
.btn{
  appearance:none; border:none; cursor:pointer;
  font-weight:800; color:#000;
  background:linear-gradient(90deg, var(--pink), var(--cyan));
  padding:10px 14px; border-radius:10px;
  box-shadow:0 8px 22px rgba(255,0,255,.12);
  transition:transform .12s, box-shadow .12s;
}
.btn:hover{ transform:translateY(-3px); box-shadow:0 10px 26px rgba(0,255,255,.18) }
.btn-outline{
  background:transparent; color:var(--text);
  border:1px solid rgba(255,255,255,.14); box-shadow:none;
}

/* Cart panel */
.cart{
  position:fixed; right:-420px; top:0; height:100%; width:360px; max-width:94%;
  background:rgba(0,0,0,.96); border-left:1px solid rgba(255,255,255,.08);
  box-shadow:-20px 0 60px rgba(0,0,0,.6);
  display:flex; flex-direction:column; gap:10px; padding:14px;
  transition:right .28s cubic-bezier(.2,.8,.2,1); z-index:60;
}
.cart.open{ right:0 }
.cart-top{display:flex; align-items:center; justify-content:space-between}
.cart-items{flex:1; overflow:auto; padding-right:6px}
.cart-row{display:flex; align-items:center; justify-content:space-between; margin:8px 0}
.cart-item{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  border:1px solid rgba(255,255,255,.08); border-radius:10px; padding:8px;
  background:rgba(255,255,255,.03); margin-bottom:8px;
}
.cart-bottom{margin-top:6px}

/* Cart button in nav */
.cart-btn{margin-left:6px}

/* Toast popup */
.toast{
  position:fixed; left:50%; transform:translateX(-50%);
  bottom:-120px; opacity:0; z-index:80;
  background:rgba(0,0,0,.92);
  color:var(--text);
  border:1px solid rgba(255,255,255,.12);
  border-radius:12px; padding:12px 16px; max-width:92%;
  box-shadow:0 10px 28px rgba(0,0,0,.6);
  transition: all .5s ease;
  text-align:center;
}
.toast.show{ bottom:22px; opacity:1 }

/* Responsive tweaks */
@media (max-width:640px){
  .brand-name{display:none}
  .logo{height:42px}
}
.scrunchie {
  position: relative;
  overflow: hidden;
}

/* This makes the photo float above the glowing colors */
.scrunchie-photo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;            /* adjust for sizing */
  height: auto;
  z-index: 2;            /* sits above the glow layers */
  border-radius: 12px;
  box-shadow: 0 0 20px rgba(253, 255, 0, 0.3); /* subtle halo */
}
.coming-soon {
  text-align: center;
  padding: 100px 20px;
  color: #fdff00;
  text-shadow: 0 0 10px #ff00ff, 0 0 20px #00ffff;
}

.coming-soon h1 {
  font-size: 2.5em;
  margin-bottom: 10px;
}

.coming-soon p {
  font-size: 1.2em;
  opacity: 0.9;
}