/* ==========================================================================
   Indus Valley / Earthy Essentials — shared stylesheet
   Design tokens
   ========================================================================== */
:root{
  --space-black:#0a0b14;
  --nebula-violet:#1c1533;
  --nebula-violet-2:#241b3d;
  --plasma-pink:#ff4fa3;
  --plasma-pink-dim:#a83a72;
  --bio-green:#7cffb2;
  --bio-green-dim:#3f7a5c;
  --starlight:#f1eefa;
  --dust:#9c93b5;
  --hairline: rgba(241,238,250,0.12);

  --display:'Space Grotesk', 'Arial Narrow', sans-serif;
  --body:'Inter', -apple-system, 'Segoe UI', sans-serif;
  --mono:'JetBrains Mono', 'Courier New', monospace;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:
    radial-gradient(ellipse 120% 60% at 15% -10%, rgba(255,79,163,0.18), transparent 60%),
    radial-gradient(ellipse 100% 50% at 90% 10%, rgba(124,255,178,0.10), transparent 55%),
    var(--space-black);
  background-attachment:fixed;
  color:var(--starlight);
  font-family:var(--body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

a{color:inherit;}
img{max-width:100%;display:block;}

h1,h2,h3{
  font-family:var(--display);
  font-weight:600;
  letter-spacing:0.01em;
  margin:0 0 0.4em;
}

.eyebrow{
  font-family:var(--mono);
  font-size:0.72rem;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--bio-green);
}

/* Starfield background dots, generated via layered gradients */
.starfield{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-image:
    radial-gradient(1px 1px at 20px 30px, var(--dust), transparent),
    radial-gradient(1px 1px at 140px 90px, var(--dust), transparent),
    radial-gradient(1px 1px at 260px 40px, var(--dust), transparent),
    radial-gradient(1px 1px at 320px 180px, var(--dust), transparent),
    radial-gradient(1px 1px at 60px 220px, var(--dust), transparent),
    radial-gradient(1px 1px at 400px 260px, var(--dust), transparent),
    radial-gradient(1px 1px at 180px 300px, var(--dust), transparent),
    radial-gradient(1px 1px at 460px 60px, var(--dust), transparent),
    radial-gradient(1px 1px at 240px 150px, var(--dust), transparent),
    radial-gradient(1px 1px at 100px 130px, var(--dust), transparent),
    radial-gradient(1px 1px at 350px 90px, var(--dust), transparent),
    radial-gradient(1px 1px at 430px 300px, var(--dust), transparent);
  background-repeat:repeat;
  background-size:480px 320px;
  opacity:0.35;
  animation:drift 70s linear infinite;
}
@keyframes drift{
  from{background-position:0 0;}
  to{background-position:-480px 320px;}
}
.starfield-mid{
  background-image:
    radial-gradient(1.5px 1.5px at 20px 30px, var(--starlight), transparent),
    radial-gradient(1.5px 1.5px at 140px 90px, var(--starlight), transparent),
    radial-gradient(1px 1px at 260px 40px, var(--dust), transparent),
    radial-gradient(1.5px 1.5px at 320px 180px, var(--starlight), transparent),
    radial-gradient(1px 1px at 60px 220px, var(--dust), transparent),
    radial-gradient(1.5px 1.5px at 400px 260px, var(--starlight), transparent),
    radial-gradient(1px 1px at 180px 300px, var(--dust), transparent),
    radial-gradient(1.5px 1.5px at 460px 60px, var(--starlight), transparent),
    radial-gradient(1px 1px at 240px 150px, var(--starlight), transparent),
    radial-gradient(1.5px 1.5px at 80px 270px, var(--starlight), transparent),
    radial-gradient(1px 1px at 380px 40px, var(--dust), transparent);
  background-size:480px 320px;
  opacity:0.6;
  animation:drift 45s linear infinite;
}
.starfield-fast{
  background-image:
    radial-gradient(2px 2px at 90px 60px, var(--starlight), transparent),
    radial-gradient(1.5px 1.5px at 300px 200px, var(--starlight), transparent),
    radial-gradient(2px 2px at 420px 110px, var(--starlight), transparent),
    radial-gradient(1.5px 1.5px at 150px 260px, var(--dust), transparent),
    radial-gradient(2px 2px at 250px 320px, var(--starlight), transparent),
    radial-gradient(1.5px 1.5px at 40px 150px, var(--starlight), transparent);
  background-size:520px 360px;
  opacity:0.5;
  animation:drift-fast 18s linear infinite;
}
@keyframes drift-fast{
  from{background-position:0 0;}
  to{background-position:-520px 360px;}
}

.wrap{position:relative;z-index:1;max-width:1080px;margin:0 auto;padding:0 24px;}

/* Background watermark — opt-in per page via body class, so each store
   (and eventually the mall itself) can use its own logo without affecting
   other pages. See earthyessentials/index.html for how it's turned on. */
body.watermark-earthy::before{
  content:"";
  position:fixed;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:min(700px, 70vmin);
  height:min(700px, 70vmin);
  background-image:url('assets/logo-icon.png');
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center;
  opacity:0.05;
  z-index:0;
  pointer-events:none;
}

/* ---------------- Header / nav ---------------- */
header.site{
  position:sticky;top:0;z-index:20;
  background:
    radial-gradient(ellipse 120% 60% at 15% -10%, rgba(255,79,163,0.18), transparent 60%),
    radial-gradient(ellipse 100% 50% at 90% 10%, rgba(124,255,178,0.10), transparent 55%),
    var(--space-black);
  background-attachment:fixed;
}
.nav-row{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  padding:14px 0;
}
.brand{
  font-family:var(--display);
  font-size:1.15rem;
  text-decoration:none;
  display:flex;align-items:center;gap:8px;
  grid-column:2;
  justify-self:center;
}
.brand .dot{width:8px;height:8px;border-radius:50%;background:var(--bio-green);box-shadow:0 0 8px var(--bio-green);}
.brand-mark{height:200px;width:auto;display:block;}
.back-link{
  font-family:var(--mono);
  font-size:0.78rem;
  color:var(--dust);
  text-decoration:none;
  border:1px solid var(--hairline);
  padding:6px 12px;
  border-radius:100px;
}
.back-link:hover{color:var(--starlight);border-color:var(--dust);}
.header-links{display:flex;align-items:center;gap:16px;grid-column:3;justify-self:end;}
.header-links > a:not(.back-link){
  font-family:var(--mono);
  font-size:0.8rem;
  color:var(--dust);
  text-decoration:none;
}
.header-links > a:not(.back-link):hover{color:var(--bio-green);}

/* ---------------- Hero ---------------- */
.hero{padding:72px 0 64px;text-align:center;}
.hero-eyebrow{font-size:clamp(0.95rem, 2.2vw, 1.15rem);letter-spacing:0.28em;}
.hero h1{
  font-size:clamp(2.4rem,6vw,4.2rem);
  background:linear-gradient(120deg,var(--starlight) 30%,#3d7ea6 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero p.tagline{
  max-width:560px;margin:18px auto 0;
  color:var(--dust);
  font-size:1.05rem;
}

/* ---------------- Comic-style tagline ---------------- */
.comic-bubble{
  max-width:600px;
  margin:28px auto 0;
}
.comic-text{
  font-family:'Comic Neue', var(--body);
  font-weight:700;
  font-size:clamp(1.3rem, 3vw, 1.6rem);
  line-height:1.5;
  color:var(--dust);
  max-width:none;
  margin:0;
  text-align:center;
}
.pop{
  font-family:'Bangers', var(--display);
  font-weight:400;
  font-size:1.15em;
  letter-spacing:0.03em;
  padding:0 4px;
  -webkit-text-stroke:0.6px #111;
}
.pop-yellow{color:#ffd23f;}
.pop-pink{color:var(--plasma-pink);}
.pop-blue{color:#3d7ea6;}
.pop-green{color:#2f8f52;}
@media (max-width:600px){
  .comic-text{font-size:1.02rem;}
}

/* ---------------- Constellation nav ---------------- */
.constellation{
  margin:56px auto 0;
  max-width:920px;
}
.constellation svg{width:100%;height:auto;overflow:visible;}
.const-line{stroke:var(--hairline);stroke-width:1;}
.const-node circle{
  fill:var(--nebula-violet-2);
  stroke:var(--bio-green);
  stroke-width:1.4;
  transition:transform .25s ease, fill .25s ease;
}
.const-node{cursor:pointer;}
.const-node:hover circle{fill:var(--bio-green);transform-origin:center;}
.const-node text{
  fill:var(--dust);
  font-family:var(--mono);
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:0.05em;
}
.const-node:hover text{fill:var(--starlight);}
@media (prefers-reduced-motion:no-preference){
  .const-node circle{animation:twinkle 3.4s ease-in-out infinite;}
  .const-node:nth-child(odd) circle{animation-delay:1.1s;}
  .const-node:nth-child(3n) circle{animation-delay:2.2s;}
}
@keyframes twinkle{
  0%,100%{opacity:1;}
  50%{opacity:0.55;}
}

/* ---------------- Category sections ---------------- */
.category{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px;
  align-items:center;
  padding:64px 0;
  border-top:1px solid var(--hairline);
  scroll-margin-top:90px;
}
.category:nth-child(even){direction:rtl;}
.category:nth-child(even) > *{direction:ltr;}
.category .media{
  border-radius:14px;
  overflow:hidden;
  border:1px solid var(--hairline);
  box-shadow:0 30px 60px -30px rgba(0,0,0,0.6);
  position:relative;
}
.category .media::after{
  content:"";position:absolute;inset:0;
  background-image:
    linear-gradient(180deg,transparent 60%,rgba(10,11,20,0.55)),
    url('assets/logo-icon.png');
  background-repeat:no-repeat, no-repeat;
  background-position:0 0, bottom 10px right 10px;
  background-size:100% 100%, 44px 44px;
}
.category .media img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3;}
.category .index{
  font-family:var(--mono);
  color:var(--plasma-pink);
  font-size:0.8rem;
  letter-spacing:0.18em;
}
.category h2{font-size:1.7rem;margin-top:6px;}
.category p{color:var(--dust);max-width:44ch;}

@media (max-width:760px){
  .category, .category:nth-child(even){
    grid-template-columns:1fr;direction:ltr;
  }
}

/* Full-width category variant (used once real product data exists) */
.category--full{
  display:block;
}
.category--full .cat-head p{max-width:none;}
.category--full .strain-tag{display:inline-block;margin-top:6px;}

.category--full .media--wide{
  margin-top:20px;
  aspect-ratio:21/8;
}
.category--full .media--wide img{aspect-ratio:auto;}

.photo-gallery{
  margin-top:20px;
  display:grid;
  grid-template-columns:1.2fr 1fr 1fr;
  gap:12px;
}
.photo-gallery--wrap{
  grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));
}
.photo-gallery .media{aspect-ratio:auto;}
.photo-gallery .media img{aspect-ratio:4/3;}
.photo-gallery--2{grid-template-columns:1fr 1fr;}
@media (max-width:640px){
  .photo-gallery, .photo-gallery--2{grid-template-columns:1fr 1fr;}
}

.photo-pending{
  margin-top:20px;
  aspect-ratio:21/8;
  border-radius:14px;
  border:1px dashed var(--hairline);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:8px;color:var(--dust);
  background-color:rgba(255,255,255,0.02);
  background-image:url('assets/logo-icon.png');
  background-repeat:no-repeat;
  background-position:bottom 10px right 10px;
  background-size:44px 44px;
  position:relative;
}
.photo-pending .play-dot{border:none;font-size:1.4rem;}
.photo-pending p{margin:0;font-family:var(--mono);font-size:0.72rem;letter-spacing:0.08em;text-transform:uppercase;}

.product-grid{
  margin-top:20px;
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(180px, 1fr));
  gap:14px;
}
.product-card{
  border:1px solid var(--hairline);
  border-radius:12px;
  padding:16px 18px;
  background:var(--nebula-violet);
}
.product-card h4{
  font-family:var(--display);font-size:1rem;margin:0 0 4px;color:var(--starlight);
}
.product-card .variant{margin:0 0 6px;color:var(--dust);font-size:0.85rem;max-width:none;}
.product-card .price{margin:0;color:var(--bio-green);font-family:var(--mono);font-size:0.85rem;max-width:none;}
.product-card .badge{
  display:inline-block;margin-top:8px;
  padding:3px 12px;border-radius:100px;
  font-family:var(--mono);font-size:0.7rem;letter-spacing:0.03em;
  border:1px solid var(--plasma-pink-dim);color:var(--plasma-pink);
}

.strain-tag{
  display:inline-block;
  font-family:var(--mono);font-size:0.72rem;letter-spacing:0.06em;
  color:var(--bio-green);border:1px solid var(--bio-green-dim);
  padding:4px 12px;border-radius:100px;
}

.coming-soon-block{
  margin-top:20px;
  border:1px dashed var(--hairline);
  border-radius:14px;
  padding:36px;text-align:center;color:var(--dust);
}
.coming-soon-block p:last-child{margin:6px 0 0;max-width:none;}

/* ---------------- Specials / Instore banner ---------------- */
.specials{
  margin:24px 0 0;
  padding:36px;
  border-radius:16px;
  border:1px dashed var(--plasma-pink-dim);
  background:linear-gradient(135deg, rgba(255,79,163,0.08), rgba(124,255,178,0.05));
  text-align:center;
}
.specials h3{color:var(--plasma-pink);}

/* ---------------- Garden of Balance video section ---------------- */
.learn{
  padding:56px 0 24px;
  text-align:center;
}
.avatar-tabs{
  margin-top:36px;
  display:flex;gap:10px;justify-content:center;flex-wrap:wrap;
}
.avatar-tab{
  font-family:var(--mono);font-size:0.82rem;letter-spacing:0.04em;
  padding:10px 20px;border-radius:100px;
  border:1px solid var(--hairline);
  background:transparent;color:var(--dust);cursor:pointer;
  transition:border-color .2s ease, color .2s ease, background .2s ease;
}
.avatar-tab:hover{color:var(--starlight);border-color:var(--dust);}
.avatar-tab.active{background:var(--bio-green);color:var(--space-black);border-color:var(--bio-green);font-weight:600;}

.learn-panel{
  margin-top:28px;
  display:grid;
  grid-template-columns:1.3fr 1fr;
  gap:24px;
  text-align:left;
  align-items:start;
}
@media (max-width:760px){
  .learn-panel{grid-template-columns:1fr;}
}
.video-frame{
  border-radius:14px;
  overflow:hidden;
  aspect-ratio:16/9;
  background:var(--space-black);
  border:1px solid var(--hairline);
  position:relative;
}
.video-frame video{width:100%;height:100%;border:0;display:block;background:#000;}
.video-placeholder{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;color:var(--dust);
}
.video-placeholder[hidden]{display:none;}
.play-dot{
  width:48px;height:48px;border-radius:50%;
  border:1px solid var(--bio-green);color:var(--bio-green);
  display:flex;align-items:center;justify-content:center;
  font-size:0.95rem;
}
.video-placeholder p{margin:0;font-family:var(--mono);font-size:0.75rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--dust);}

.question-list{
  display:flex;flex-direction:column;gap:10px;
}
.question-btn{
  text-align:left;
  font-family:var(--body);font-size:0.95rem;color:var(--starlight);
  padding:14px 18px;border-radius:12px;
  border:1px solid var(--hairline);
  background:var(--nebula-violet);
  cursor:pointer;
  transition:border-color .2s ease, transform .15s ease;
}
.question-btn:hover{border-color:var(--bio-green);transform:translateX(2px);}

/* ---------------- Membership ---------------- */
.membership{
  padding:72px 0;
  text-align:center;
  border-top:1px solid var(--hairline);
}
.membership .form-shell{
  margin-top:28px;
  border:1px solid var(--hairline);
  border-radius:16px;
  overflow:hidden;
  background:var(--nebula-violet);
}
.membership iframe{width:100%;height:900px;border:0;background:var(--starlight);}

/* ---------------- Footer ---------------- */
footer.site{
  padding:40px 0 60px;
  text-align:center;
  color:var(--dust);
  font-family:var(--mono);
  font-size:0.78rem;
  letter-spacing:0.04em;
}
footer.site a{color:var(--bio-green);text-decoration:none;}

/* ---------------- Gate screens (age + membership) ---------------- */
.gate-screen{
  position:relative;z-index:1;
  min-height:100vh;
  display:flex;align-items:center;justify-content:center;
  padding:48px 24px;
}
.gate-screen[hidden]{display:none;}
.gate-card{
  max-width:420px;width:100%;text-align:center;
  border:1px solid var(--hairline);
  border-radius:16px;
  padding:40px 32px;
  background:var(--nebula-violet);
}
.gate-card--wide{max-width:640px;}
.gate-logo{max-width:220px;width:60%;margin:0 auto 20px;display:block;}
.gate-logo--small{max-width:80px;}
.gate-card h1{font-size:1.6rem;}
.gate-card p{color:var(--dust);font-size:0.95rem;}
.gate-actions{display:flex;gap:12px;margin-top:24px;}
.gate-actions--center{justify-content:center;}
.gate-card .form-shell{margin-top:24px;}
.gate-card .form-shell iframe{height:640px;}
.gate-skip{margin-top:16px;font-size:0.85rem;}
.linklike{
  background:none;border:none;padding:0;
  color:var(--bio-green);font-family:var(--mono);font-size:0.85rem;
  text-decoration:underline;cursor:pointer;
}
.access-code-block{margin-top:28px;text-align:left;}
.access-code-block label{
  display:block;font-family:var(--mono);font-size:0.75rem;
  letter-spacing:0.08em;text-transform:uppercase;color:var(--dust);
  margin-bottom:8px;
}
.access-code-row{display:flex;gap:10px;flex-wrap:wrap;}
.access-code-row input{
  flex:1;min-width:180px;
  background:var(--space-black);
  border:1px solid var(--hairline);
  border-radius:10px;
  padding:12px 14px;
  color:var(--starlight);
  font-family:var(--body);font-size:0.95rem;
}
.access-code-row input:focus-visible{outline:2px solid var(--bio-green);outline-offset:2px;}
.access-code-row .btn{flex:none;}
.access-code-msg{
  margin-top:10px;font-size:0.85rem;color:var(--plasma-pink);
}
.access-code-msg[hidden]{display:none;}

/* ---------------- Custom membership form ---------------- */
.member-form{text-align:left;margin-top:24px;}
.form-field{margin-bottom:16px;}
.form-field label, .form-field legend{
  display:block;font-family:var(--mono);font-size:0.75rem;
  letter-spacing:0.06em;text-transform:uppercase;color:var(--dust);
  margin-bottom:6px;padding:0;border:none;
}
.form-field input[type="text"], .form-field input[type="email"], .form-field input[type="tel"]{
  width:100%;background:var(--space-black);
  border:1px solid var(--hairline);border-radius:10px;
  padding:12px 14px;color:var(--starlight);
  font-family:var(--body);font-size:0.95rem;
}
.form-field input:focus-visible{outline:2px solid var(--bio-green);outline-offset:2px;}
.radio-option{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--body);font-size:0.92rem;color:var(--starlight);
  text-transform:none;letter-spacing:normal;
  margin-right:20px;cursor:pointer;
}
.radio-option input{accent-color:var(--bio-green);}
.age-block-msg{
  color:var(--plasma-pink);font-size:0.88rem;margin:8px 0 0;
}
.age-block-msg[hidden]{display:none;}
.consent-row{
  display:flex;align-items:flex-start;gap:10px;
  font-size:0.85rem;color:var(--dust);margin:20px 0 16px;
  cursor:pointer;
}
.consent-row input{margin-top:3px;accent-color:var(--bio-green);flex-shrink:0;}
.linklike-inline{
  background:none;border:none;padding:0;
  color:var(--bio-green);text-decoration:underline;
  font-family:inherit;font-size:inherit;cursor:pointer;
}
.disclaimer-box{
  margin:0 0 20px;padding:16px 18px;
  border:1px solid var(--hairline);border-radius:12px;
  background:var(--space-black);
  max-height:220px;overflow-y:auto;
}
.disclaimer-box[hidden]{display:none;}
.disclaimer-box h4{margin:0 0 8px;font-size:0.95rem;color:var(--starlight);}
.disclaimer-box p{font-size:0.82rem;color:var(--dust);line-height:1.6;margin:0 0 10px;}
.disclaimer-box p:last-child{margin-bottom:0;}
.form-msg{margin-top:12px;font-size:0.85rem;color:var(--plasma-pink);}
.form-msg[hidden]{display:none;}
#membershipSuccess{text-align:center;}
.btn{
  flex:1;
  font-family:var(--mono);
  font-size:0.82rem;
  letter-spacing:0.04em;
  padding:12px 16px;
  border-radius:100px;
  border:1px solid var(--hairline);
  background:transparent;
  color:var(--starlight);
  cursor:pointer;
}
.btn.primary{background:var(--bio-green);color:var(--space-black);border-color:var(--bio-green);font-weight:600;}
.btn:focus-visible, a:focus-visible, .const-node:focus-visible circle{
  outline:2px solid var(--plasma-pink);outline-offset:3px;
}

/* Coming-soon landing (root indusvalley.earth) */
.landing{
  display:flex;flex-direction:column;align-items:center;
  text-align:center;padding:0 24px 24px;position:relative;z-index:1;
}
.landing h1{font-size:clamp(1.05rem,2.2vw,1.3rem);font-weight:500;color:var(--dust);margin-top:0;}
.landing-title-eyebrow{
  font-size:clamp(1.9rem, 5.5vw, 2.8rem);
  font-weight:400;
  letter-spacing:0.28em;
  margin-bottom:14px;
}
.stores{
  margin-top:40px;display:flex;gap:16px;flex-wrap:wrap;justify-content:center;
}
.store-card{
  border:1.5px solid var(--bio-green);
  border-radius:14px;
  padding:24px 32px 26px;
  text-decoration:none;
  min-width:240px;
  display:flex;flex-direction:column;align-items:center;
  position:relative;
  background:
    radial-gradient(circle at 30% 20%, rgba(124,255,178,0.14), transparent 60%),
    rgba(124,255,178,0.04);
  box-shadow:0 0 0 1px rgba(124,255,178,0.15), 0 0 32px -4px rgba(124,255,178,0.45);
  transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease;
  animation:card-glow 2.6s ease-in-out infinite;
}
.store-card:hover{
  border-color:var(--bio-green);
  transform:translateY(-3px);
  box-shadow:0 0 0 1px rgba(124,255,178,0.3), 0 0 46px -2px rgba(124,255,178,0.65);
}
@keyframes card-glow{
  0%,100%{box-shadow:0 0 0 1px rgba(124,255,178,0.15), 0 0 32px -4px rgba(124,255,178,0.45);}
  50%{box-shadow:0 0 0 1px rgba(124,255,178,0.3), 0 0 46px 2px rgba(124,255,178,0.7);}
}
.store-card .eyebrow{display:block;margin-bottom:14px;}
.store-card-logo{width:180px;height:auto;display:block;}
.store-card-cta{
  display:flex;align-items:center;gap:6px;
  margin-top:16px;
  font-family:var(--body);font-weight:600;font-size:1rem;
  color:var(--starlight);
}
.store-card-arrow{
  display:inline-block;
  font-size:1.4rem;
  color:var(--bio-green);
  animation:arrow-nudge 1.3s ease-in-out infinite;
}
@keyframes arrow-nudge{
  0%,100%{transform:translateX(0);}
  50%{transform:translateX(6px);}
}
@media (prefers-reduced-motion:reduce){
  .store-card{animation:none;}
  .store-card-arrow{animation:none;}
}

/* ---------------- Member special banner ---------------- */
.member-special-banner{margin-top:20px;}
.member-special-banner h3{font-size:1.1rem;margin:6px 0 0;color:var(--starlight);}

/* ---------------- QR reveal modal ---------------- */
.qr-modal{
  position:fixed;inset:0;z-index:50;
  background:rgba(6,6,12,0.94);
  display:flex;align-items:center;justify-content:center;
  padding:24px;
}
.qr-modal[hidden]{display:none;}
.qr-modal-card{
  max-width:360px;width:100%;text-align:center;
  border:1px solid var(--hairline);
  border-radius:16px;
  padding:32px 28px;
  background:var(--nebula-violet);
}
.qr-modal-card h2{font-size:1.2rem;margin-bottom:16px;}
.qr-canvas{
  background:#fff;padding:16px;border-radius:12px;
  display:inline-flex;align-items:center;justify-content:center;
  min-height:180px;min-width:180px;
}
.qr-modal-code{
  margin-top:14px;font-family:var(--mono);font-size:0.85rem;
  color:var(--bio-green);letter-spacing:0.05em;
}

/* ---------------- Staff redeem result ---------------- */
.redeem-result{
  margin-top:20px;padding:16px 18px;border-radius:12px;
  font-size:0.95rem;line-height:1.5;
}
.redeem-result[hidden]{display:none;}
.redeem-result--success{
  background:rgba(124,255,178,0.12);border:1px solid var(--bio-green);color:var(--bio-green);
}
.redeem-result--warn{
  background:rgba(255,210,63,0.1);border:1px solid #ffd23f;color:#ffd23f;
}
.redeem-result--error{
  background:rgba(255,79,163,0.1);border:1px solid var(--plasma-pink);color:var(--plasma-pink);
}

/* ============================================================
   Lo Music store — scoped accent palette, distinct from Earthy
   Essentials but sharing the site's overall dark/starfield shell.
   ============================================================ */
.page-lomusic{
  --lm-gold:#e8b94d;
  --lm-violet:#9b6bd6;
}
.lm-artist-mark{
  text-decoration:none;
  display:flex;flex-direction:column;
  line-height:1;
}
.lm-artist-name{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(1.8rem, 4vw, 2.6rem);
  letter-spacing:0.01em;
  color:var(--starlight);
  position:relative;
  padding-bottom:8px;
}
.lm-artist-name::after{
  content:"";
  position:absolute;left:0;bottom:0;
  width:56px;height:3px;
  background:linear-gradient(90deg, var(--lm-gold), var(--lm-violet));
  border-radius:2px;
}
.lm-artist-sub{
  margin-top:10px;
  font-family:var(--mono);
  font-size:0.72rem;
  letter-spacing:0.32em;
  text-transform:uppercase;
  color:var(--lm-gold);
}

/* Hero placement — her name is the dominant element on the page */
.lm-hero-artist{margin-bottom:22px;text-align:center;}
.lm-hero-artist .lm-artist-name{
  display:inline-block;
  font-size:clamp(3rem, 9vw, 5.5rem);
}
.lm-hero-artist .lm-artist-name::after{
  left:50%;transform:translateX(-50%);
  width:96px;height:4px;
}
.lm-hero-artist .lm-artist-sub{display:block;margin-top:16px;}
.lm-eyebrow{color:var(--lm-gold);}
.lm-heading{
  font-size:clamp(2.2rem,6vw,3.8rem);
  background:linear-gradient(120deg, var(--starlight) 25%, var(--lm-gold) 65%, var(--lm-violet) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

.lm-services{padding:56px 0 0;border-top:1px solid var(--hairline);}
.lm-service-grid{
  margin-top:20px;
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:16px;
}
.lm-service-card{
  border:1px solid var(--hairline);
  border-radius:14px;
  padding:22px 24px;
  background:
    radial-gradient(circle at 20% 15%, rgba(155,107,214,0.12), transparent 60%),
    var(--nebula-violet);
}
.lm-service-card h3{
  font-family:var(--display);font-size:1.05rem;margin:0 0 8px;color:var(--lm-gold);
}
.lm-service-card p{margin:0;color:var(--dust);font-size:0.92rem;max-width:none;}

.lm-gallery, .lm-booking, .lm-shop, .lm-payment{
  padding:56px 0 0;border-top:1px solid var(--hairline);margin-top:56px;
}
.lm-gallery h2, .lm-booking h2, .lm-shop h2, .lm-payment h2{
  font-family:var(--display);font-size:1.6rem;margin:6px 0 10px;
}

.lm-calendar-shell{margin-top:20px;}
.lm-calendar-shell iframe{height:600px;background:var(--space-black);}

.lm-payment-card{
  margin-top:20px;
  border:1px solid var(--hairline);
  border-radius:14px;
  padding:24px 28px;
  background:var(--nebula-violet);
  max-width:440px;
}
.lm-payment-card p{margin:0 0 8px;color:var(--starlight);}
.lm-payment-card p:first-child{color:var(--lm-gold);font-family:var(--display);}
.lm-payment-line span{color:var(--dust);}

.lm-pop-card{
  margin-top:16px;
  border:1px dashed var(--hairline);
  border-radius:14px;
  padding:20px 22px;
  background:rgba(255,255,255,0.02);
  max-width:440px;
}
.lm-pop-title{font-family:var(--display);color:var(--starlight);margin:0 0 6px;font-weight:600;}
.lm-pop-text{color:var(--dust);font-size:0.9rem;margin:0 0 14px;}
.lm-pop-links{display:flex;flex-direction:column;gap:8px;}
.lm-pop-link{
  color:var(--bio-green);text-decoration:none;font-size:0.92rem;
}
.lm-pop-link:hover{text-decoration:underline;}

.lm-note{
  margin-top:14px;font-size:0.82rem;color:var(--plasma-pink);
}

/* ---------------- Contact section ---------------- */
.contact-section{
  margin-top:24px;padding-top:56px;border-top:1px solid var(--hairline);
}
.contact-section h2{font-family:var(--display);font-size:1.6rem;margin:6px 0 20px;}
.contact-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
  gap:16px;
}
.contact-card{
  border:1px solid var(--hairline);
  border-radius:14px;
  padding:20px 22px;
  background:var(--nebula-violet);
}
.contact-card p{margin:0 0 6px;color:var(--starlight);font-size:0.95rem;}
.contact-card p.eyebrow{margin-bottom:10px;}
.contact-link{
  display:block;margin-top:6px;
  color:var(--bio-green);text-decoration:none;font-size:0.95rem;
}
.contact-link:hover{text-decoration:underline;}

/* ============================================================
   Landing page center hub — breathing water ripple + daily
   rotating Sanskrit ring. Scoped under .iv-hub so its own color
   tokens never touch the site's global --starlight/--dust/etc.
   ============================================================ */
.iv-hub{
  --hub-void:#0A0B10;
  --hub-starlight:#E9E4D8;
  --hub-starlight-dim:#A9A498;
  --hub-water:#7FC4CC;
  display:flex;justify-content:center;
  margin:48px 0;
  position:relative;z-index:1;
}
.iv-hub .hub-stage{
  width:280px;height:280px;
  position:relative;
  display:flex;align-items:center;justify-content:center;
}
.iv-hub .water-core{
  width:168px;height:168px;
  border-radius:50%;
  position:relative;
  overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 42% 38%, #123138 0%, #06171b 55%, #030a0c 80%);
  border:1px solid rgba(127,196,204,0.25);
  box-shadow:
    inset 0 0 24px rgba(0,0,0,0.6),
    0 0 40px rgba(20,60,66,0.35);
}
.iv-hub .ripple{
  position:absolute;
  border-radius:50%;
  border:1px solid rgba(127,196,204,0.4);
  animation:iv-hub-rippleOut 8s ease-in-out infinite;
}
.iv-hub .ripple:nth-child(2){animation-delay:2.7s;}
.iv-hub .ripple:nth-child(3){animation-delay:5.4s;}
@keyframes iv-hub-rippleOut{
  0%{width:14px;height:14px;opacity:0.65;}
  100%{width:160px;height:160px;opacity:0;}
}
.iv-hub .hub-label{
  font-family:'Spectral', serif;
  font-style:italic;
  font-weight:400;
  font-size:1.05rem;
  color:var(--hub-starlight);
  z-index:3;
  letter-spacing:0.02em;
}
.iv-hub .script-ring{
  position:absolute;inset:0;
  animation:iv-hub-ringspin 90s linear infinite;
  z-index:2;
}
@keyframes iv-hub-ringspin{ to{ transform:rotate(360deg); } }
.iv-hub .glyph{
  position:absolute;
  top:4px;left:50%;
  width:18px;height:18px;
  margin-left:-9px;
  transform-origin:50% 80px;
  display:flex;align-items:center;justify-content:center;
  font-family:'Noto Sans Devanagari', serif;
  font-size:1rem;
  color:var(--hub-starlight-dim);
  opacity:0.75;
  text-shadow:0 0 8px rgba(233,228,216,0.15);
}
@media (prefers-reduced-motion:reduce){
  .iv-hub .ripple{animation:none;}
  .iv-hub .script-ring{animation:none;}
}

/* ============================================================
   Landing page story hero — "a mall built on buried ground."
   Scoped under .iv-story-hero (NOT .hero, which the Earthy
   Essentials page already uses with completely different rules)
   with its own color tokens so nothing here touches the site's
   global --starlight/--dust or the store page's .hero styling.
   ============================================================ */
.iv-story-hero{
  --story-void:#0A0B10;
  --story-starlight:#E9E4D8;
  --story-starlight-dim:#A9A498;
  --story-terracotta:#B5563C;
  --story-sandstone:#D8B589;
  --story-line:rgba(233,228,216,0.14);
  position:relative;z-index:1;
  max-width:720px;
  margin:0 auto;
  padding:8vh 24px 3vh;
  text-align:center;
}
.iv-story-hero .mark{
  font-family:'Spectral', serif;
  font-weight:300;
  font-style:italic;
  font-size:0.95rem;
  color:var(--story-sandstone);
  letter-spacing:0.02em;
  margin:0 0 18px;
}
.iv-story-hero h1{
  font-family:'Cinzel', serif;
  font-weight:600;
  font-size:clamp(2.1rem, 5.4vw, 3.2rem);
  line-height:1.15;
  margin:0 0 22px;
  letter-spacing:0.04em;
  background:linear-gradient(120deg, var(--story-starlight) 15%, var(--story-sandstone) 55%, var(--story-terracotta) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.iv-brand-sub{
  font-family:'Cinzel', serif;
  font-weight:600;
  font-size:0.32em;
  letter-spacing:0.02em;
  vertical-align:middle;
  margin-left:0.2em;
  display:inline-block;
}
.iv-sanskrit-sub{
  font-family:'Noto Sans Devanagari', 'Cinzel', serif !important;
  font-weight:500 !important;
}
.iv-story-hero p.lede{
  font-size:1.05rem;
  line-height:1.7;
  color:var(--story-starlight-dim);
  max-width:58ch;
  margin:0 auto 30px;
}
.iv-story-hero .fact-line{
  font-family:'Spectral', serif;
  font-style:italic;
  font-size:1rem;
  color:var(--story-sandstone);
  min-height:1.6em;
  margin-bottom:22px;
  transition:opacity 0.6s ease;
}
.iv-story-hero .further-reading{
  font-size:0.82rem;
  color:var(--story-starlight-dim);
}
.iv-story-hero .further-reading a{
  color:var(--story-terracotta);
  text-decoration:none;
  border-bottom:1px solid rgba(181,86,60,0.4);
  padding-bottom:1px;
}
.iv-story-hero .further-reading a:hover{ border-bottom-color:var(--story-terracotta); }
.iv-story-hero .hero-divider{
  width:44px;height:1px;
  background:var(--story-line);
  margin:46px auto 0;
}
@media (prefers-reduced-motion: reduce){
  .iv-story-hero .fact-line{ transition:none; }
}

/* ============================================================
   Landing page store directory — search + A-Z browse, feeds the
   same store data the future portal ring will use. Color tokens
   scoped under .directory-wrap (NOT bare :root) so --starlight
   etc. here can never override the site's real global --starlight
   token used on every other page.
   ============================================================ */
.directory-wrap{
  --dir-void:#0A0B10;
  --dir-void-2:#10121A;
  --dir-starlight:#E9E4D8;
  --dir-starlight-dim:#A9A498;
  --dir-terracotta:#B5563C;
  --dir-bronze:#8C7A5B;
  --dir-line:rgba(233,228,216,0.14);
  position:relative;z-index:1;
  max-width:400px;
  margin:0 auto;
  padding:0 24px;
}
.directory-heading{
  font-family:'Spectral', serif;
  font-style:italic;
  font-weight:400;
  font-size:1.02rem;
  text-align:center;
  color:var(--dir-starlight);
  margin:0 0 18px;
}
.search-box{position:relative;width:100%;}
.search-box input{
  width:100%;
  background:var(--dir-void-2);
  border:1px solid var(--dir-line);
  color:var(--dir-starlight);
  font-family:'Inter', sans-serif;
  font-size:0.85rem;
  padding:10px 14px 10px 34px;
  border-radius:999px;
  outline:none;
  transition:border-color 0.2s ease;
}
.search-box input::placeholder{ color:var(--dir-starlight-dim); }
.search-box input:focus{ border-color:var(--dir-bronze); }
.search-box svg{
  position:absolute;left:12px;top:50%;transform:translateY(-50%);
  width:12px;height:12px;opacity:0.5;
  color:var(--dir-starlight-dim);
}
.search-results{margin:8px 0 0;text-align:left;}
.search-result{
  display:flex;align-items:center;gap:10px;
  padding:9px 4px;
  font-size:0.88rem;
  color:var(--dir-starlight-dim);
  cursor:pointer;
  border-radius:8px;
}
.search-result:hover{ background:rgba(233,228,216,0.05); color:var(--dir-starlight); }
.search-result .dot{ width:8px;height:8px;border-radius:50%;flex-shrink:0; }
.search-result .soon{ font-size:0.72rem;color:var(--dir-starlight-dim);opacity:0.6;margin-left:auto; }

.mode-toggle{display:flex;justify-content:center;gap:6px;margin:16px 0 14px;}
.mode-btn{
  background:transparent;
  border:1px solid var(--dir-line);
  color:var(--dir-starlight-dim);
  font-family:'Inter', sans-serif;
  font-size:0.7rem;
  padding:5px 13px;
  border-radius:999px;
  cursor:pointer;
  transition:all 0.2s ease;
}
.mode-btn.active{
  color:var(--dir-starlight);
  border-color:var(--dir-bronze);
  background:rgba(140,122,91,0.12);
}
.mode-btn:hover:not(.active){ color:var(--dir-starlight); }

.az-list{display:none;}
.az-list.visible{display:block;}
.az-group{margin-bottom:18px;}
.az-letter{
  font-family:'Spectral', serif;
  font-style:italic;
  font-size:0.85rem;
  color:var(--dir-bronze);
  border-bottom:1px solid var(--dir-line);
  padding-bottom:6px;
  margin-bottom:8px;
}
.az-item{
  display:flex;align-items:center;gap:12px;
  padding:10px 4px;
  border-radius:8px;
  cursor:pointer;
}
.az-item:hover{ background:rgba(233,228,216,0.05); }
.az-item .swatch{
  width:30px;height:30px;
  border-radius:50%;
  flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-family:'Spectral', serif;
  font-size:0.85rem;
  color:var(--dir-void);
}
.az-item.placeholder .swatch{
  background:transparent !important;
  border:1.5px dashed var(--dir-line);
  color:var(--dir-starlight-dim);
}
.az-item-text{flex:1;}
.az-item-name{font-size:0.9rem;color:var(--dir-starlight);font-weight:500;}
.az-item-sub{font-size:0.74rem;color:var(--dir-starlight-dim);}
.az-item .soon-tag{font-size:0.68rem;color:var(--dir-starlight-dim);opacity:0.6;}

.directory-hint{
  text-align:center;
  font-size:0.74rem;
  color:var(--dir-starlight-dim);
  opacity:0.7;
  margin-top:26px;
}

/* ============================================================
   Portal ring — multiple stores on real Keplerian ellipses around
   the hub (hub at the ellipse's FOCUS, not center), drag-to-rotate,
   glow trail per store, near/far depth via scale+opacity+z-index.
   Tokens scoped under .portal-section, not bare :root, for the
   same reason as the hero/directory pieces.
   ============================================================ */
.portal-section{
  --portal-void:#0A0B10;
  --portal-starlight:#E9E4D8;
  --portal-starlight-dim:#A9A498;
  --portal-line:rgba(233,228,216,0.14);
  --portal-bronze:#8C7A5B;
  position:relative;z-index:1;
  padding:20px 24px 40px;
  text-align:center;
}
.portal-hint{
  font-size:0.8rem;
  color:var(--portal-starlight-dim);
  margin-bottom:28px;
  letter-spacing:0.01em;
}
.portal-stage{
  position:relative;
  width:100%;
  max-width:640px;
  height:480px;
  margin:0 auto;
  perspective:1400px;
  cursor:grab;
}
.portal-stage.dragging{ cursor:grabbing; }
.portal-stage .iv-hub{
  margin:0;
  position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);
  z-index:500;
}
#trailCanvas{
  position:absolute;inset:0;
  width:100%;height:100%;
  pointer-events:none;
}

.node{
  position:absolute;
  left:0;top:0;
  width:20px;
  margin-left:-10px;
  margin-top:-10px;
  text-align:center;
  backface-visibility:hidden;
  will-change:transform, opacity;
  pointer-events:none;
}
.node-star{
  width:12px;height:12px;
  margin:0 auto;
  border-radius:50%;
  background:var(--node-color, var(--portal-starlight));
  box-shadow:0 0 8px 2px var(--node-color, var(--portal-starlight)), 0 0 18px 5px rgba(233,228,216,0.25);
  cursor:pointer;
  pointer-events:auto;
  transition:transform 0.2s ease;
}
.node-star:hover{ transform:scale(1.5); }
.node.placeholder .node-star{
  box-shadow:0 0 5px 1px var(--node-color, var(--portal-line));
  cursor:default;
  opacity:0.6;
}

/* ---------------- Selected-store popup card (matches the static store card) ---------------- */
.orbit-store-popup{
  position:relative;
  width:220px;
  margin:24px auto 0;
  text-align:center;
  padding:24px 22px;
  border-radius:16px;
  border:1.5px solid var(--bio-green);
  background:
    radial-gradient(circle at 30% 20%, rgba(124,255,178,0.14), transparent 60%),
    rgba(124,255,178,0.04);
  box-shadow:0 0 0 1px rgba(124,255,178,0.15), 0 0 32px -4px rgba(124,255,178,0.45);
  z-index:600;
  animation:card-glow 2.6s ease-in-out infinite;
}
.orbit-store-popup[hidden]{display:none;}
.orbit-store-popup .store-card-logo{width:120px;height:auto;margin:10px auto;}
.orbit-popup-close{
  position:absolute;top:8px;right:10px;
  background:none;border:none;
  color:var(--dust);font-size:1.3rem;line-height:1;
  cursor:pointer;padding:4px;
}
.orbit-popup-close:hover{ color:var(--starlight); }
.orbit-popup-enter{
  display:flex;align-items:center;justify-content:center;gap:6px;
  margin-top:10px;
  font-family:var(--body);font-weight:600;font-size:0.95rem;
  color:var(--starlight);text-decoration:none;
}
.orbit-popup-fallback{margin:14px 0;}
.orbit-popup-fallback-circle{
  width:70px;height:70px;margin:0 auto 10px;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:'Spectral', serif;font-size:1.4rem;color:var(--space-black);
}
.orbit-popup-fallback-name{
  font-family:var(--display);font-weight:600;color:var(--starlight);margin:0;
}


/* Coming-soon card override for Lo Music (gold, not the default green glow) */
.lm-coming-soon-card{
  border-color:#e8b94d !important;
  background:
    radial-gradient(circle at 30% 20%, rgba(232,185,77,0.14), transparent 60%),
    rgba(232,185,77,0.04) !important;
  box-shadow:0 0 0 1px rgba(232,185,77,0.15), 0 0 32px -4px rgba(232,185,77,0.45) !important;
  animation:none !important;
}