/** Shopify CDN: Minification failed

Line 20:69 Expected ")" to end URL token

**/

*{box-sizing:border-box}
body,html{margin:0;padding:0}
.bg{background:#0b0b0f;color:var(--text);font-family:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
.container{max-width:1100px;margin:0 auto;padding:0 20px}
.site-header{position:sticky;top:0;background:rgba(11,11,15,.75);backdrop-filter:blur(8px);z-index:50;border-bottom:1px solid rgba(255,255,255,.06)}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:64px}
.logo img{height:44px;filter:drop-shadow(0 0 12px var(--neon-teal))}
.logo-text{font-weight:800;color:var(--text)}
.nav a{margin-left:10px}
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;border:none;cursor:pointer;font-weight:600;text-decoration:none}
.btn-primary{background:linear-gradient(90deg,var(--neon-teal),var(--neon-magenta));color:#0b0b0f;box-shadow:0 0 24px rgba(0, 255, 200, .35)}
.btn-outline{border:2px solid rgba(255,255,255,.18);color:var(--text);background:transparent}
.hero{position:relative;min-height:70vh;display:grid;place-items:center;overflow:hidden}
.hero::before{content:'';position:absolute;inset:0;background:url({{ 'dj_hero_placeholder.jpg' | asset_url }}) center/cover no-repeat;filter:contrast(1.05) saturate(1.1)}
.hero::after{content:'';position:absolute;inset:0;background:radial-gradient(60% 75% at 50% 20%, rgba(0,0,0,.1), rgba(11,11,15,.85))}
.hero-inner{position:relative;text-align:center;padding:80px 20px}
.hero h1{font-size:clamp(32px,6vw,64px);margin:0 0 10px 0;text-shadow:0 0 24px var(--neon-teal)}
.hero p{opacity:.9;margin:0 0 24px 0}
.neon-border{border:1px solid rgba(255,255,255,.1);box-shadow:0 0 24px rgba(0,255,200,.15), inset 0 0 24px rgba(255,0,200,.06);border-radius:20px;background:rgba(12,12,18,.6)}
.section{padding:48px 0}
.products-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:18px}
.card{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:16px;overflow:hidden;transition:transform .15s ease, box-shadow .15s ease}
.card:hover{transform:translateY(-3px);box-shadow:0 0 28px rgba(0,255,200,.15)}
.card img{width:100%;height:220px;object-fit:cover;background:#111}
.card .info{padding:12px 14px;display:flex;justify-content:space-between;align-items:center;gap:12px}
.card .title{font-weight:600;font-size:14px;line-height:1.2}
.price{font-weight:700}
.footer{border-top:1px solid rgba(255,255,255,.08);padding:40px 0;background:#0a0a0e}
.footer-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.footer a{color:var(--text);opacity:.9}
.copyright{opacity:.6;margin-top:16px}
@media (max-width:640px){.footer-grid{grid-template-columns:1fr}}

/* --- Typography + base link reset --- */
body {
  font-family: "Poppins", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
               Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  color: var(--text);
}

/* Default links inherit site color, no underline */
a {
  color: var(--text);
  text-decoration: none;
}
a:visited { color: var(--text); }
a:hover,
a:focus { color: var(--neon-teal); text-decoration: none; }

/* --- Product/collection card titles --- */
.products-grid .card .title a {
  color: var(--text);
  text-decoration: none;
  font-weight: 600;
  display: inline-block;
  margin-top: 6px;
}
.products-grid .card .title a:visited { color: var(--text); }

/* Subtle neon hover to match your vibe */
.products-grid .card .title a:hover,
.products-grid .card .title a:focus {
  color: var(--neon-teal);
  text-shadow: 0 0 10px rgba(0, 255, 200, 0.45);
}

/* Optional: headings on collection/product pages */
.section h1, .section h2 {
  color: var(--text);
}


/* Make sure hero CTAs are always clickable above overlays */
.hero .btn { position: relative; z-index: 3; }

/* Never let decorative hero overlays catch clicks */
.hero [data-overlay],
.hero .overlay {
  pointer-events: none;
}


/* Hero layout */
.hero {
  position: relative;
  min-height: 72vh;
  display: grid;
  place-items: center;
  text-align: center;
  color: var(--text, #f5f7ff);
  overflow: hidden;
}
.hero__media { position: absolute; inset: 0; }
.hero__video,
.hero__image { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Dark mask controlled by setting */
.hero__mask {
  position: absolute; inset: 0;
  background: #000;
  pointer-events: none;
}

/* Animated neon club lights */
.hero__lights {
  position: absolute; inset: -25%;
  pointer-events: none;
  mix-blend-mode: screen;
  filter: blur(40px) saturate(1.2);
  opacity: .45;
  background:
    radial-gradient(40% 35% at 25% 30%, rgba(0,255,209,.55), transparent 60%),
    radial-gradient(35% 30% at 70% 60%, rgba(255,0,180,.5), transparent 60%),
    radial-gradient(30% 28% at 55% 20%, rgba(0,170,255,.45), transparent 60%);
  animation: djLights 16s linear infinite;
}
@keyframes djLights {
  0%   { transform: translate3d(0,0,0) rotate(0deg) scale(1); }
  50%  { transform: translate3d(3%, -2%, 0) rotate(6deg) scale(1.05); }
  100% { transform: translate3d(0,0,0) rotate(0deg) scale(1); }
}

/* Content */
.hero__content { position: relative; z-index: 2; padding: 2rem; }
.hero__title { font-size: clamp(2rem, 5vw, 4.2rem); margin: 0 0 .6rem; }
.hero__sub   { opacity: .9; margin: 0 0 1.25rem; }

/* Your existing .btn styles should apply; if not, keep this as a base */
.btn.btn-primary {
  display: inline-block;
  padding: .85rem 1.4rem;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--neon-teal,#00ffd1), var(--neon-magenta,#ff00b4));
  color: #0b0b0f; font-weight: 700; text-decoration: none;
  box-shadow: 0 0 24px rgba(0,255,209,.25), 0 0 24px rgba(255,0,180,.2);
}
.btn.btn-primary:hover { filter: brightness(1.05); transform: translateY(-1px); }