:root{
  --bg:#070410;
  --bg-2:#0c0818;
  --violet:#a855f7;
  --violet-bright:#c084fc;
  --magenta:#e0218a;
  --cyan:#22d3ee;
  --cyan-bright:#67e8f9;
  --ink:#e9e6f5;
  --muted:#8a83a8;
}
html{scroll-behavior:smooth; overflow-x:clip;}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Outfit',sans-serif;
  overflow-x:clip;
  max-width:100vw;
}
.font-display{font-family:'Syncopate',sans-serif; letter-spacing:.02em;}
/* layered atmospheric background */
.scene-bg{
  position:fixed; inset:0; z-index:-2;
  background:
    radial-gradient(1200px 700px at 80% -10%, rgba(168,85,247,.22), transparent 60%),
    radial-gradient(900px 600px at 10% 20%, rgba(34,211,238,.14), transparent 60%),
    radial-gradient(1000px 800px at 50% 110%, rgba(224,33,138,.18), transparent 60%),
    linear-gradient(180deg,#070410 0%, #0a0614 40%, #070410 100%);
}
.grain{
  position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.35;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.6  0 0 0 0 0.4  0 0 0 0 0.9  0 0 0 0.08 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  mix-blend-mode:screen;
}
/* every section clips horizontally so decorative layers can never widen the page */
section, footer{overflow-x:clip;}

/* drifting smoke */
.smoke{
  position:absolute; border-radius:50%; filter:blur(60px); opacity:.5;
  mix-blend-mode:screen; pointer-events:none;
}
@media (max-width:767px){
  .smoke{width:260px !important; height:260px !important;}
}
@keyframes drift1{
  0%{transform:translate(-10%,0) scale(1)}
  50%{transform:translate(20%,-10%) scale(1.3)}
  100%{transform:translate(-10%,0) scale(1)}
}
@keyframes drift2{
  0%{transform:translate(10%,5%) scale(1.1)}
  50%{transform:translate(-15%,-8%) scale(.9)}
  100%{transform:translate(10%,5%) scale(1.1)}
}
.drift1{animation:drift1 22s ease-in-out infinite;}
.drift2{animation:drift2 28s ease-in-out infinite;}

/* neon utilities */
.neon-text{
  text-shadow:0 0 8px rgba(192,132,252,.7), 0 0 28px rgba(168,85,247,.55), 0 0 60px rgba(168,85,247,.35);
}
.neon-cyan{
  text-shadow:0 0 8px rgba(103,232,249,.8), 0 0 30px rgba(34,211,238,.5);
}
.glass{
  background:linear-gradient(180deg, rgba(20,14,38,.55), rgba(10,7,22,.35));
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border:1px solid rgba(168,85,247,.18);
}
.glass-strong{
  background:linear-gradient(180deg, rgba(22,15,42,.7), rgba(12,8,26,.55));
  backdrop-filter:blur(20px) saturate(150%);
  -webkit-backdrop-filter:blur(20px) saturate(150%);
  border:1px solid rgba(168,85,247,.22);
}
.btn-neon{
  position:relative; overflow:hidden;
  background:linear-gradient(135deg, #a855f7 0%, #e0218a 100%);
  box-shadow:0 0 0 1px rgba(255,255,255,.08) inset, 0 10px 40px -10px rgba(168,85,247,.7), 0 0 24px rgba(224,33,138,.4);
  transition:transform .3s ease, box-shadow .3s ease;
}
.btn-neon:hover{transform:translateY(-2px); box-shadow:0 0 0 1px rgba(255,255,255,.15) inset, 0 16px 50px -10px rgba(168,85,247,.9), 0 0 36px rgba(224,33,138,.6);}
.btn-ghost{
  border:1px solid rgba(103,232,249,.4);
  background:rgba(34,211,238,.06);
  box-shadow:0 0 18px -4px rgba(34,211,238,.4) inset;
  transition:all .3s ease;
}
.btn-ghost:hover{background:rgba(34,211,238,.14); box-shadow:0 0 24px -2px rgba(34,211,238,.6) inset, 0 0 30px -8px rgba(34,211,238,.5);}

.card-zoom img{transition:transform .9s cubic-bezier(.2,.8,.2,1), filter .6s ease;}
.card-zoom:hover img{transform:scale(1.08); filter:saturate(1.2) brightness(1.05);}
.neon-ring{box-shadow:0 0 0 1px rgba(168,85,247,.25), 0 0 40px -8px rgba(168,85,247,.5), inset 0 0 30px -10px rgba(34,211,238,.25);}

/* product image tile — consistent light backdrop so white-bg studio
   shots, transparent renders and wide banners all read uniformly */
.img-tile{
  background:
    radial-gradient(circle at 50% 30%, #ffffff 0%, #f2f0fa 60%, #e6e2f2 100%);
}
.img-tile img{object-fit:contain;}

/* reveal */
.reveal{opacity:0; transform:translateY(40px); transition:opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1);}
.reveal.in{opacity:1; transform:none;}
.reveal-delay-1{transition-delay:.12s}
.reveal-delay-2{transition-delay:.24s}
.reveal-delay-3{transition-delay:.36s}
.reveal-delay-4{transition-delay:.48s}

/* marquee */
.marquee{display:flex; gap:4rem; width:max-content; animation:scroll 32s linear infinite;}
@keyframes scroll{to{transform:translateX(-50%)}}

.nav-link{position:relative;}
.nav-link::after{content:""; position:absolute; left:0; bottom:-6px; height:2px; width:0; background:linear-gradient(90deg,#c084fc,#22d3ee); transition:width .35s ease; box-shadow:0 0 12px rgba(168,85,247,.8);}
.nav-link:hover::after{width:100%;}
.nav-link.active::after{width:100%;}

.badge-glow{box-shadow:0 0 0 1px rgba(255,255,255,.1) inset, 0 0 18px -2px rgba(224,33,138,.7);}

.parallax-smoke{will-change:transform;}

.product-card{transition:transform .5s ease, box-shadow .5s ease, border-color .5s ease;}
.product-card:hover{transform:translateY(-8px); border-color:rgba(103,232,249,.45); box-shadow:0 30px 60px -20px rgba(168,85,247,.4), 0 0 40px -10px rgba(34,211,238,.4);}

/* scroll indicator */
.scroll-dot{animation:bob 2s ease-in-out infinite;}
@keyframes bob{0%,100%{transform:translateY(0); opacity:.6}50%{transform:translateY(8px); opacity:1}}

/* product page gallery */
.thumb{cursor:pointer; transition:border-color .3s ease, transform .3s ease;}
.thumb:hover{transform:translateY(-2px);}
.thumb.active{border-color:rgba(103,232,249,.7); box-shadow:0 0 18px -4px rgba(34,211,238,.6);}

/* nav dropdown */
.dropdown-panel{
  opacity:0; visibility:hidden; transform:translateX(-50%) translateY(8px);
  transition:opacity .25s ease, transform .25s ease, visibility .25s;
  box-shadow:0 20px 50px -15px rgba(168,85,247,.5), 0 0 30px -10px rgba(34,211,238,.3);
  z-index:60;
}
.dropdown:hover .dropdown-panel,
.dropdown:focus-within .dropdown-panel,
.dropdown.open .dropdown-panel{
  opacity:1; visibility:visible; transform:translateX(-50%) translateY(0);
}
.dropdown:hover .dropdown-caret,
.dropdown.open .dropdown-caret{transform:rotate(180deg);}
.dropdown-item:hover{background:rgba(168,85,247,.12);}
/* keep hover bridge so panel doesn't close crossing the gap */
.dropdown-panel::before{content:""; position:absolute; left:0; right:0; top:-14px; height:14px;}

/* shop filter chips */
.shop-chip{
  color:rgba(255,255,255,.75);
  transition:all .3s ease;
  cursor:pointer;
}
.shop-chip:hover{color:#fff; border-color:rgba(103,232,249,.4);}
.shop-chip.on{
  background:linear-gradient(135deg, rgba(168,85,247,.3), rgba(34,211,238,.18));
  color:#fff;
  border-color:rgba(103,232,249,.55);
  box-shadow:0 0 18px -4px rgba(168,85,247,.5);
}

.spec-chip{
  border:1px solid rgba(168,85,247,.25);
  background:rgba(168,85,247,.08);
}
.flavor-chip{
  border:1px solid rgba(103,232,249,.3);
  background:rgba(34,211,238,.07);
}

/* Global 5px radius on all container/image frames (chips & round dots stay pill/circular) */
.rounded-lg, .rounded-xl, .rounded-2xl, .rounded-3xl, .rounded-\[2rem\]{
  border-radius:5px !important;
}

/* Aurora hero background layer */
.aurora-wrap{position:absolute; inset:0; z-index:0; overflow:hidden;}
.aurora-wrap::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(7,4,16,.55) 0%, rgba(7,4,16,.35) 35%, rgba(7,4,16,.55) 70%, #070410 100%);
}

/* Prominent home-page filter buttons */
.filter-btn{
  border:1px solid rgba(168,85,247,.35);
  padding:.8rem 1.5rem !important;
  font-size:.8rem !important;
  letter-spacing:.08em;
  text-transform:uppercase;
  transition:all .3s ease;
}
.filter-btn:hover{border-color:rgba(103,232,249,.6); color:#fff; box-shadow:0 0 20px -6px rgba(34,211,238,.5);}

/* Mobile action header (Directions / Call) shown after scrolling past the hero */
#mobileActions{display:none;}
@media (max-width:767px){
  #nav.actions-mode .nav-main{display:none;}
  #nav.actions-mode #mobileActions{display:flex;}
}

/* Fullscreen mobile menu */
#mobileMenu{
  position:fixed; inset:0; z-index:80; display:none; flex-direction:column;
  padding:20px 24px calc(24px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg, rgba(9,5,20,.97), rgba(7,4,16,.99));
  backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
  overflow-y:auto;
}
#mobileMenu.open{display:flex;}
body.menu-open{overflow:hidden;}

/* 21st.dev vertical accordion — category showcase */
.cat-acc{display:flex; flex-direction:column; gap:10px;}
.acc-item{
  position:relative; display:flex; overflow:hidden; cursor:pointer;
  border:1px solid rgba(168,85,247,.2); border-radius:5px;
  background:linear-gradient(180deg, rgba(20,14,38,.6), rgba(10,7,22,.4));
  transition:flex .75s cubic-bezier(.35,.1,.2,1), border-color .4s ease, box-shadow .4s ease;
}
.acc-item.open{
  border-color:rgba(103,232,249,.45);
  box-shadow:0 20px 60px -20px rgba(168,85,247,.5), 0 0 40px -12px rgba(34,211,238,.4);
}
.acc-strip{
  display:flex; align-items:center; gap:14px; padding:16px 18px;
  user-select:none; flex-shrink:0;
}
.acc-num{font-size:10px; letter-spacing:.3em; color:rgba(103,232,249,.7);}
.acc-icon{
  width:38px; height:38px; border-radius:5px; display:grid; place-items:center; color:#fff;
  background:linear-gradient(135deg,#a855f7,#22d3ee);
  box-shadow:0 0 18px -4px rgba(168,85,247,.7);
  flex-shrink:0;
}
.acc-panel{position:relative; flex:1; display:block; opacity:0; transition:opacity .5s ease .18s; min-width:0;}
.acc-item.open .acc-panel{opacity:1;}
/* mobile: vertical stack, panels expand in height */
@media (max-width:1023px){
  .acc-title-vert{writing-mode:horizontal-tb;}
  .acc-item{flex-direction:column;}
  /* flex:none — with flex:1 the 0% flex-basis wins over height in column layout */
  .acc-panel{flex:none; height:0; overflow:hidden; transition:height .65s cubic-bezier(.35,.1,.2,1), opacity .5s ease .18s;}
  .acc-item.open .acc-panel{height:420px;}
}
/* desktop: horizontal rail, panels expand in width */
@media (min-width:1024px){
  .cat-acc{flex-direction:row; height:540px;}
  .acc-item{flex:1 1 90px; min-width:88px; flex-direction:row;}
  .acc-item.open{flex:7 1 48%;}
  .acc-strip{flex-direction:column; justify-content:flex-end; padding:20px 0; width:88px;}
  .acc-title-vert{writing-mode:vertical-rl; transform:rotate(180deg);}
}

/* sparkles particle layer */
.sparkle-layer{position:absolute; inset:0; pointer-events:none; z-index:0;}
.sparkle-layer canvas{width:100%; height:100%; display:block;}

/* subtle floating animation for hero chips */
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.floaty{animation:floaty 5s ease-in-out infinite;}
.floaty-2{animation:floaty 6.5s ease-in-out infinite; animation-delay:-2s;}

::selection{background:rgba(168,85,247,.4); color:#fff;}
::-webkit-scrollbar{width:10px;}
::-webkit-scrollbar-track{background:#070410;}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#a855f7,#22d3ee); border-radius:10px;}