/* ASÕNIQ — REALMS / INDULGE / LEVEL UP comp pages.
 * Premium cosmic gold-on-onyx. Left icon rail consistent with the exposed 5-item top nav.
 * Reuses the brand palette + Cinzel/Inter from the rest of the lux3 suite. */
:root{
  --onyx:#04060c; --onyx-2:#0a0d16; --panel:#0c1018; --panel-2:#0e1320;
  --sapphire:#0F52BA; --sapphire-glow:#2a72e6;
  --gold:#D4AF37; --gold-soft:#e7c964; --gold-deep:#9c7d27;
  --platinum:#E5E4E2; --ink:#aeb6c6; --ink-dim:#7d8696; --lock:#5a5f6b;
  --line:rgba(212,175,55,.30); --line-soft:rgba(212,175,55,.16);
  --cinzel:'Cinzel',Georgia,serif; --inter:'Inter',system-ui,Arial,sans-serif;
  --rail:0px; /* rail retired site-wide; pages now use the shared exposed top-bar nav (js/nav.js + css/nav.css) */
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{min-height:100%;background:var(--onyx);color:var(--platinum);font-family:var(--inter)}
a{color:inherit;text-decoration:none}

/* ---- cosmic field background ---- */
.cosmos{position:fixed;inset:0;z-index:0;overflow:hidden;
  background:
    radial-gradient(70% 55% at 78% 42%, rgba(42,114,230,.16), transparent 60%),
    radial-gradient(60% 50% at 18% 30%, rgba(212,175,55,.07), transparent 65%),
    radial-gradient(120% 120% at 50% 50%, #060912 0%, #04060c 70%, #020308 100%);}
.cosmos::before{content:"";position:absolute;inset:0;opacity:.5;
  background-image:
    radial-gradient(1px 1px at 12% 22%, rgba(229,228,226,.7), transparent),
    radial-gradient(1px 1px at 32% 68%, rgba(229,228,226,.5), transparent),
    radial-gradient(1px 1px at 58% 18%, rgba(231,201,100,.6), transparent),
    radial-gradient(1px 1px at 72% 78%, rgba(229,228,226,.55), transparent),
    radial-gradient(1px 1px at 88% 34%, rgba(229,228,226,.5), transparent),
    radial-gradient(1.5px 1.5px at 46% 48%, rgba(231,201,100,.5), transparent),
    radial-gradient(1px 1px at 8% 84%, rgba(229,228,226,.4), transparent),
    radial-gradient(1px 1px at 92% 62%, rgba(229,228,226,.45), transparent);}
.cosmos::after{content:"";position:absolute;inset:0;
  background:radial-gradient(130% 100% at 50% 45%, transparent 42%, rgba(2,3,8,.7) 100%);}

/* ---- left icon rail ---- */
.rail{position:fixed;top:0;left:0;bottom:0;width:var(--rail);z-index:60;
  background:linear-gradient(180deg, rgba(8,11,18,.92), rgba(4,6,12,.92));
  border-right:1px solid var(--line-soft);backdrop-filter:blur(8px);
  display:flex;flex-direction:column;align-items:center;padding:18px 0}
.rail-logo{display:flex;flex-direction:column;align-items:center;gap:6px;margin-bottom:26px}
.rail-logo .orb{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--gold);box-shadow:0 0 16px rgba(212,175,55,.35),inset 0 0 12px rgba(42,114,230,.25);
  background:radial-gradient(circle at 50% 40%, rgba(42,114,230,.4), rgba(6,9,18,.9))}
.rail-logo .orb svg{width:22px;height:22px}
.rail-logo .wm{font-family:var(--cinzel);font-weight:600;letter-spacing:.12em;font-size:.52rem;color:var(--platinum)}
.rail-logo .wm b{color:var(--gold)}
.rail-nav{display:flex;flex-direction:column;gap:6px;width:100%;align-items:center;margin-top:6px}
.rail-item{display:flex;flex-direction:column;align-items:center;gap:4px;width:100%;
  padding:11px 4px;color:var(--ink-dim);transition:.2s;position:relative}
.rail-item svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round}
.rail-item .rl{font-family:var(--inter);font-size:.46rem;letter-spacing:.14em;text-transform:uppercase}
.rail-item:hover{color:var(--gold-soft)}
.rail-item.cur{color:var(--gold)}
.rail-item.cur::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:2px;
  background:var(--gold);box-shadow:0 0 10px rgba(212,175,55,.7);border-radius:2px}

/* ---- page shell ---- */
.stage{position:relative;z-index:1;min-height:100vh;padding-left:var(--rail)}
.page{max-width:1280px;margin:0 auto;padding:clamp(1.6rem,4vh,3rem) clamp(1.2rem,3.5vw,3rem) 3rem;
  min-height:100vh;display:flex;flex-direction:column}

/* shared centered header w/ gold flourish rule */
.cap{font-family:var(--cinzel);letter-spacing:.42em;font-size:clamp(.56rem,1.2vw,.7rem);
  color:var(--gold-soft);text-align:center;opacity:.85;text-transform:uppercase}
.flourish{display:flex;align-items:center;justify-content:center;gap:clamp(.8rem,2vw,1.6rem);margin:.2rem 0}
.flourish h1{font-family:var(--cinzel);font-weight:500;letter-spacing:.3em;
  font-size:clamp(1.7rem,4.4vw,3rem);color:var(--platinum);
  text-shadow:0 0 36px rgba(42,114,230,.4),0 0 14px rgba(212,175,55,.25);white-space:nowrap}
.flourish .ln{flex:0 0 clamp(40px,9vw,120px);height:1px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);position:relative}
.flourish .ln::after{content:"";position:absolute;top:-2px;width:5px;height:5px;border-radius:50%;
  background:var(--gold);box-shadow:0 0 8px var(--gold)}
.flourish .ln.l::after{right:0}.flourish .ln.r::after{left:0}
.sub{text-align:center;color:var(--ink);font-size:clamp(.74rem,1.5vw,.95rem);
  letter-spacing:.06em;margin-top:.5rem}

/* =====================================================================
   PAGE 1 — EXPERIENCE REALMS
   ===================================================================== */
.rl-layout{flex:1;display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(1.5rem,4vw,4rem);
  align-items:center;margin-top:clamp(1rem,3vh,2.4rem)}
.rl-hero{display:flex;flex-direction:column;justify-content:center}
.rl-hero .wordmark{font-family:var(--cinzel);font-weight:600;letter-spacing:.16em;
  font-size:clamp(2.4rem,6vw,4.6rem);line-height:.96;color:var(--platinum);
  text-shadow:0 0 50px rgba(42,114,230,.4),0 0 18px rgba(212,175,55,.22)}
.rl-hero .wordmark .accent{color:var(--gold)}
.rl-hero .aud{font-family:var(--cinzel);font-weight:400;letter-spacing:.6em;
  font-size:clamp(.9rem,2vw,1.5rem);color:var(--gold-soft);margin:.3rem 0 0 .5em;text-indent:.5em}
.rl-hero .erx{font-family:var(--cinzel);font-weight:400;letter-spacing:.34em;
  font-size:clamp(1rem,2.4vw,1.7rem);color:var(--platinum);margin-top:clamp(.9rem,2.5vh,1.6rem);opacity:.95}
.rl-hero .erx-sub{color:var(--ink);font-size:clamp(.78rem,1.5vw,.96rem);line-height:1.7;
  letter-spacing:.04em;margin-top:clamp(1.4rem,4vh,2.4rem);max-width:24rem}
.rl-hero .erx-note{font-family:var(--cinzel);letter-spacing:.18em;font-size:clamp(.62rem,1.2vw,.78rem);
  color:var(--gold-soft);line-height:1.8;margin-top:clamp(1.8rem,5vh,3rem);opacity:.85}

.rl-list{display:flex;flex-direction:column;gap:clamp(.4rem,1vh,.6rem)}
.realm-row{display:flex;align-items:center;gap:clamp(.7rem,1.6vw,1.1rem);
  border:1px solid var(--line-soft);border-radius:12px;padding:clamp(.6rem,1.4vh,.85rem) clamp(.8rem,1.6vw,1.1rem);
  background:linear-gradient(120deg, rgba(14,19,32,.82), rgba(7,10,18,.86));transition:.25s;cursor:pointer}
.realm-row:hover{border-color:var(--gold);box-shadow:0 0 24px rgba(212,175,55,.22);transform:translateX(3px)}
.realm-row .num{flex:0 0 22px;font-family:var(--cinzel);font-size:1rem;color:var(--gold);
  text-align:center;opacity:.9}
.realm-row .num.empty{opacity:0}
.realm-row .ricon{flex:0 0 clamp(34px,4vw,44px);height:clamp(34px,4vw,44px);border-radius:50%;
  display:grid;place-items:center;border:1px solid var(--line);
  background:radial-gradient(circle at 50% 38%, rgba(42,114,230,.28), rgba(6,9,18,.85));
  box-shadow:inset 0 0 14px rgba(42,114,230,.18)}
.realm-row .ricon svg{width:clamp(18px,2.2vw,24px);height:clamp(18px,2.2vw,24px);
  stroke:var(--gold-soft);fill:none;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.realm-row .rtext{flex:1;min-width:0;display:flex;flex-direction:column}
.realm-row .rname{display:block;font-family:var(--cinzel);font-weight:600;letter-spacing:.14em;
  font-size:clamp(.85rem,1.7vw,1.12rem);color:var(--platinum)}
.realm-row .rsub{display:block;font-family:var(--inter);font-size:clamp(.58rem,1.1vw,.7rem);
  letter-spacing:.1em;color:var(--ink-dim);margin-top:.2rem;text-transform:uppercase}
.realm-row .chev{flex:0 0 auto;color:var(--gold-soft);opacity:.7;font-size:1rem}
.realm-row.open{border-color:var(--line)}

/* =====================================================================
   PAGE 2 — INDULGE
   ===================================================================== */
.cart{position:fixed;top:calc(60px + clamp(.5rem,1.4vh,.9rem));right:clamp(1.2rem,3vw,2.4rem);z-index:9100;
  display:inline-flex;align-items:center;gap:.5rem;border:1px solid var(--line);border-radius:24px;
  padding:.5rem .9rem;background:rgba(10,13,22,.7);backdrop-filter:blur(6px);color:var(--gold-soft);
  font-family:var(--cinzel);letter-spacing:.1em;font-size:.8rem;cursor:default}
.cart svg{width:18px;height:18px;stroke:var(--gold-soft);fill:none;stroke-width:1.5}
.section-cap{font-family:var(--cinzel);letter-spacing:.34em;font-size:clamp(.6rem,1.2vw,.74rem);
  color:var(--gold-soft);text-align:center;margin:clamp(1.4rem,4vh,2.4rem) 0 clamp(.9rem,2.5vh,1.4rem);
  display:flex;align-items:center;justify-content:center;gap:1rem}
.section-cap::before,.section-cap::after{content:"";width:clamp(30px,7vw,90px);height:1px;
  background:linear-gradient(90deg,transparent,var(--gold-deep),transparent)}
.featured-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(.8rem,1.8vw,1.4rem)}
.items-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(.8rem,1.8vw,1.4rem)}
.pcard{border:1px solid var(--line-soft);border-radius:14px;overflow:hidden;
  background:linear-gradient(160deg, rgba(13,17,28,.8), rgba(7,10,18,.85));transition:.25s;
  display:flex;flex-direction:column}
.pcard:hover{border-color:var(--line);box-shadow:0 0 22px rgba(212,175,55,.12)}
.pcard .pimg{aspect-ratio:1/1;margin:clamp(.6rem,1.4vw,1rem);border-radius:10px;
  border:1px dashed rgba(212,175,55,.22);
  background:radial-gradient(circle at 50% 40%, rgba(42,114,230,.1), rgba(8,11,20,.6));
  display:grid;place-items:center}
.pcard .pimg svg{width:30%;height:30%;stroke:rgba(212,175,55,.3);fill:none;stroke-width:1.2}
.pcard .pbar{height:10px;margin:0 clamp(.7rem,1.5vw,1.05rem);border-radius:6px;
  background:rgba(212,175,55,.07);border:1px solid var(--line-soft)}
.pcard .pmeta{padding:clamp(.6rem,1.4vw,.95rem);text-align:center}
.pcard .pph{font-family:var(--inter);font-size:.56rem;letter-spacing:.12em;color:var(--ink-dim);
  text-transform:uppercase;line-height:1.5}
.featured-grid .pcard .pimg{aspect-ratio:4/5}
.portal-mark{position:fixed;left:calc(var(--rail) + clamp(.4rem,1.5vw,1.2rem));
  bottom:clamp(1rem,3vh,2rem);z-index:40;width:46px;height:46px;border-radius:50%;
  display:grid;place-items:center;border:1px solid var(--gold);
  background:radial-gradient(circle at 50% 40%, rgba(42,114,230,.5), rgba(6,9,18,.9));
  box-shadow:0 0 24px rgba(42,114,230,.5),0 0 12px rgba(212,175,55,.4)}
.portal-mark svg{width:24px;height:24px}

/* =====================================================================
   PAGE 3 — LEVEL UP
   ===================================================================== */
.lu-layout{flex:1;display:grid;grid-template-columns:1fr clamp(220px,24vw,320px);
  gap:clamp(1.4rem,3vw,2.6rem);margin-top:clamp(1.4rem,4vh,2.4rem);align-items:start}
.lu-rows{display:flex;flex-direction:column;gap:clamp(.6rem,1.4vh,.95rem)}
.lu-row{display:grid;grid-template-columns:26px clamp(40px,4.4vw,52px) 1.6fr 2fr auto;
  align-items:center;gap:clamp(.7rem,1.6vw,1.2rem);
  border:1px solid var(--line-soft);border-radius:14px;padding:clamp(.7rem,1.5vh,1rem) clamp(.9rem,1.8vw,1.3rem);
  background:linear-gradient(120deg, rgba(14,19,32,.82), rgba(7,10,18,.86));transition:.25s}
.lu-row:hover{border-color:var(--gold);box-shadow:0 0 26px rgba(212,175,55,.2)}
.lu-row .num{font-family:var(--cinzel);font-size:1.15rem;color:var(--gold);text-align:center;opacity:.9}
.lu-row .ricon{width:clamp(40px,4.4vw,52px);height:clamp(40px,4.4vw,52px);border-radius:50%;
  display:grid;place-items:center;border:1px solid var(--line);
  background:radial-gradient(circle at 50% 38%, rgba(42,114,230,.28), rgba(6,9,18,.85));
  box-shadow:inset 0 0 14px rgba(42,114,230,.18)}
.lu-row .ricon svg{width:clamp(20px,2.4vw,28px);height:clamp(20px,2.4vw,28px);
  stroke:var(--gold-soft);fill:none;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.lu-row .rtext{display:flex;flex-direction:column;min-width:0}
.lu-row .rname{display:block;font-family:var(--cinzel);font-weight:600;letter-spacing:.12em;
  font-size:clamp(.9rem,1.7vw,1.16rem);color:var(--platinum)}
.lu-row .rsub{display:block;font-family:var(--inter);font-size:.58rem;letter-spacing:.1em;color:var(--ink-dim);
  margin-top:.2rem;text-transform:uppercase}
.lu-row .rdesc{color:var(--ink);font-size:clamp(.66rem,1.25vw,.8rem);line-height:1.55;letter-spacing:.02em}
.lu-btn{font-family:var(--cinzel);letter-spacing:.18em;font-size:clamp(.58rem,1.1vw,.72rem);color:#fff;
  border:1.2px solid var(--gold);border-radius:8px;padding:.7rem 1.3rem;cursor:pointer;white-space:nowrap;
  background:linear-gradient(180deg, rgba(212,175,55,.18), rgba(212,175,55,.05));
  box-shadow:0 0 18px rgba(212,175,55,.22),inset 0 0 14px rgba(212,175,55,.08);transition:.25s}
.lu-btn:hover{box-shadow:0 0 32px rgba(212,175,55,.5),inset 0 0 18px rgba(212,175,55,.16)}

.lu-panel{border:1px solid var(--line);border-radius:16px;padding:clamp(1.2rem,2.5vw,1.8rem);
  background:linear-gradient(160deg, rgba(14,19,32,.85), rgba(7,10,18,.9));
  box-shadow:0 0 30px rgba(42,114,230,.12);position:sticky;top:1.4rem;text-align:center}
.lu-panel .pcap{font-family:var(--inter);letter-spacing:.3em;font-size:.54rem;color:var(--gold-soft);
  text-transform:uppercase;opacity:.85}
.lu-panel .ptier{font-family:var(--cinzel);font-weight:600;letter-spacing:.18em;
  font-size:clamp(1.2rem,2.6vw,1.6rem);color:var(--platinum);margin:.5rem 0 .9rem;
  text-shadow:0 0 26px rgba(212,175,55,.3)}
.lu-panel .pdesc{color:var(--ink);font-size:clamp(.68rem,1.3vw,.8rem);line-height:1.7;letter-spacing:.02em}
.lu-panel .pdiv{height:1px;margin:clamp(1.1rem,3vh,1.6rem) 0;
  background:linear-gradient(90deg,transparent,var(--gold-deep),transparent)}
.lu-panel .pxp-cap{font-family:var(--inter);letter-spacing:.26em;font-size:.52rem;color:var(--gold-soft);
  text-transform:uppercase;opacity:.85}
.lu-panel .pxp{font-family:var(--cinzel);font-weight:500;letter-spacing:.06em;
  font-size:clamp(1.5rem,3.4vw,2.2rem);color:var(--gold);margin-top:.4rem}
.lu-panel .pxp span{color:var(--platinum);font-size:.55em}

/* legal / footnote */
.foot-note{text-align:center;color:var(--ink-dim);font-size:.5rem;letter-spacing:.06em;
  margin-top:clamp(1.6rem,4vh,2.6rem);opacity:.7}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width:980px){
  .rl-layout{grid-template-columns:1fr;gap:clamp(1.4rem,4vh,2.4rem)}
  .rl-hero{text-align:center;align-items:center}
  .rl-hero .erx-sub,.rl-hero .erx-note{max-width:34rem}
  .lu-layout{grid-template-columns:1fr}
  .lu-panel{position:static;order:-1}
  .lu-row{grid-template-columns:24px 44px 1fr;grid-template-areas:"num icon name" ". . desc" ". . btn";row-gap:.5rem}
  .lu-row .num{grid-area:num}.lu-row .ricon{grid-area:icon}
  .lu-row .rtext{grid-area:name}.lu-row .rdesc{grid-area:desc}.lu-row .lu-btn{grid-area:btn;justify-self:start}
  .featured-grid{grid-template-columns:repeat(2,1fr)}
  .items-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  :root{--rail:0px}
  .rail-item .rl{display:none}
  .rail-logo .wm{display:none}
  .flourish .ln{flex-basis:24px}
  .featured-grid,.items-grid{grid-template-columns:repeat(2,1fr)}
}

/* =====================================================================
   INDULGE — real product cards + cart (added when products landed)
   ===================================================================== */
.pcard.product{cursor:default}
.pcard .pimg.real{border:1px solid var(--line-soft);background:#05070d center/cover no-repeat;
  display:block;padding:0}
.pcard .pname{font-family:var(--cinzel);font-weight:600;letter-spacing:.08em;
  font-size:clamp(.72rem,1.4vw,.92rem);color:var(--platinum);line-height:1.35}
.pcard .pprice{font-family:var(--cinzel);letter-spacing:.06em;font-size:clamp(.74rem,1.4vw,.92rem);
  color:var(--gold);margin-top:.35rem}
.pcard .padd{margin:clamp(.55rem,1.3vw,.85rem) clamp(.7rem,1.5vw,1.05rem) clamp(.7rem,1.5vw,1.05rem);
  font-family:var(--cinzel);letter-spacing:.16em;font-size:clamp(.56rem,1.05vw,.68rem);color:#fff;cursor:pointer;
  border:1.2px solid var(--gold);border-radius:8px;padding:.7rem .8rem;text-align:center;
  background:linear-gradient(180deg, rgba(212,175,55,.18), rgba(212,175,55,.05));
  box-shadow:0 0 16px rgba(212,175,55,.2),inset 0 0 12px rgba(212,175,55,.08);transition:.22s}
.pcard .padd:hover{box-shadow:0 0 28px rgba(212,175,55,.45),inset 0 0 16px rgba(212,175,55,.16)}
.pcard .padd:active{transform:translateY(1px)}
.pcard .padd.added{background:linear-gradient(180deg, rgba(42,114,230,.28), rgba(42,114,230,.08));
  border-color:var(--sapphire-glow)}
.pcard .pbadge{display:inline-block;margin:0 auto clamp(.7rem,1.5vw,1.05rem);
  font-family:var(--inter);letter-spacing:.2em;font-size:.54rem;text-transform:uppercase;
  color:var(--gold-soft);border:1px solid var(--line);border-radius:20px;padding:.35rem .8rem;opacity:.9}
.pcard.soon .pimg.real{filter:saturate(.92)}
.pcard .pmeta.center{text-align:center}

/* cart pill clickable */
.cart{cursor:pointer}
.cart.has::after{content:"";position:absolute;top:6px;right:8px;width:7px;height:7px;border-radius:50%;
  background:var(--gold);box-shadow:0 0 8px var(--gold)}
.cart{position:fixed}

/* cart drawer */
.cart-scrim{position:fixed;inset:0;z-index:9400;background:rgba(2,3,8,.6);backdrop-filter:blur(3px);
  opacity:0;pointer-events:none;transition:.25s}
.cart-scrim.open{opacity:1;pointer-events:auto}
.cart-drawer{position:fixed;top:0;right:0;bottom:0;width:min(92vw,380px);z-index:9450;
  background:linear-gradient(180deg, rgba(10,13,22,.98), rgba(5,7,13,.99));
  border-left:1px solid var(--line);box-shadow:-20px 0 60px rgba(0,0,0,.6);
  transform:translateX(100%);transition:transform .28s ease;display:flex;flex-direction:column;
  padding:clamp(1.1rem,3vw,1.6rem)}
.cart-drawer.open{transform:translateX(0)}
.cart-drawer h3{font-family:var(--cinzel);font-weight:600;letter-spacing:.16em;color:var(--platinum);
  font-size:1rem;display:flex;justify-content:space-between;align-items:center}
.cart-drawer .cd-close{background:none;border:none;color:var(--gold-soft);font-size:1.3rem;cursor:pointer}
.cd-items{flex:1;overflow-y:auto;margin:1rem 0;display:flex;flex-direction:column;gap:.7rem}
.cd-empty{color:var(--ink-dim);font-size:.78rem;text-align:center;margin-top:2rem;letter-spacing:.04em}
.cd-item{display:grid;grid-template-columns:48px 1fr auto;gap:.7rem;align-items:center;
  border:1px solid var(--line-soft);border-radius:10px;padding:.5rem}
.cd-item .ci-img{width:48px;height:48px;border-radius:7px;background:#05070d center/cover no-repeat;border:1px solid var(--line-soft)}
.cd-item .ci-name{font-family:var(--cinzel);font-size:.72rem;color:var(--platinum);letter-spacing:.04em;line-height:1.3}
.cd-item .ci-price{font-size:.66rem;color:var(--gold);margin-top:.2rem}
.cd-item .ci-qty{display:flex;align-items:center;gap:.4rem;margin-top:.3rem}
.cd-item .ci-qty button{width:20px;height:20px;border-radius:5px;border:1px solid var(--line);
  background:rgba(8,11,18,.6);color:var(--gold-soft);cursor:pointer;font-size:.8rem;line-height:1}
.cd-item .ci-rm{background:none;border:none;color:var(--ink-dim);cursor:pointer;font-size:.9rem}
.cd-foot{border-top:1px solid var(--line-soft);padding-top:1rem}
.cd-row{display:flex;justify-content:space-between;font-size:.8rem;color:var(--ink);margin-bottom:.5rem}
.cd-row .tot{font-family:var(--cinzel);color:var(--gold);font-size:1rem}
.cd-checkout{width:100%;font-family:var(--cinzel);letter-spacing:.18em;font-size:.74rem;color:#fff;
  border:1.4px solid var(--gold);border-radius:9px;padding:.95rem;cursor:pointer;margin-top:.4rem;
  background:linear-gradient(180deg, rgba(212,175,55,.18), rgba(212,175,55,.05));
  box-shadow:0 0 20px rgba(212,175,55,.25),inset 0 0 14px rgba(212,175,55,.1);transition:.22s}
.cd-checkout:hover{box-shadow:0 0 34px rgba(212,175,55,.5)}
.cd-checkout[disabled],.cd-checkout.gated{opacity:.55;cursor:not-allowed;box-shadow:none;
  border-color:var(--line-soft)}
.cd-note{font-size:.58rem;color:var(--gold-soft);letter-spacing:.06em;text-align:center;
  margin-top:.7rem;line-height:1.6;opacity:.85}
.cd-toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(20px);z-index:9700;
  background:rgba(10,13,22,.96);border:1px solid var(--line);border-radius:10px;color:var(--platinum);
  font-family:var(--cinzel);letter-spacing:.08em;font-size:.74rem;padding:.7rem 1.2rem;opacity:0;
  pointer-events:none;transition:.3s;box-shadow:0 10px 40px rgba(0,0,0,.5)}
.cd-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* current-realm panel subtitle (dynamic tier) */
.lu-panel .psub{font-family:var(--inter);letter-spacing:.16em;font-size:.56rem;text-transform:uppercase;
  color:var(--ink-dim);margin:-.4rem 0 .8rem}

/* ---- INDULGE: image-pending placeholder tile (real photo not yet supplied) ---- */
.pcard .pimg.pending{display:grid;place-items:center;border:1px dashed rgba(212,175,55,.35);
  background:radial-gradient(circle at 50% 38%, rgba(42,114,230,.12), rgba(8,11,20,.7))}
.pcard .pimg.pending .ph-ic{width:34%;height:34%;stroke:rgba(231,201,100,.5);fill:none;stroke-width:1.2}
.pcard .pflag{font-family:var(--inter);font-size:.5rem;letter-spacing:.1em;color:var(--ink-dim);
  text-transform:uppercase;margin-top:.35rem;opacity:.85}

/* ===================================================================
   HEADPHONES — "In Development" feature section (not for sale)
   =================================================================== */
.hp-sec{position:relative;margin:clamp(2.4rem,6vh,4rem) auto 0;max-width:1040px;width:100%;
  border:1px solid var(--line);border-radius:20px;overflow:hidden;
  background:linear-gradient(160deg, rgba(13,17,28,.9), rgba(6,9,16,.95));
  box-shadow:0 0 50px rgba(42,114,230,.14)}
.hp-inner{padding:clamp(1.6rem,4vw,3rem);display:grid;grid-template-columns:1.1fr 1fr;
  gap:clamp(1.4rem,3.5vw,3rem);align-items:center}
.hp-badge{display:inline-block;font-family:var(--inter);letter-spacing:.26em;font-size:.56rem;
  text-transform:uppercase;color:var(--gold-soft);border:1px solid var(--line);border-radius:20px;
  padding:.4rem .9rem;margin-bottom:clamp(.9rem,2.5vh,1.4rem)}
.hp-kicker{font-family:var(--inter);letter-spacing:.3em;font-size:.56rem;text-transform:uppercase;
  color:var(--ink-dim);margin-bottom:.5rem}
.hp-hero{font-family:var(--cinzel);font-weight:600;letter-spacing:.14em;color:var(--platinum);
  font-size:clamp(1.7rem,4vw,2.8rem);text-shadow:0 0 30px rgba(42,114,230,.4);line-height:1.05}
.hp-sub{color:var(--ink);font-size:clamp(.82rem,1.5vw,1rem);line-height:1.7;letter-spacing:.02em;
  margin-top:clamp(.9rem,2.5vh,1.3rem)}
.hp-tag{font-family:var(--cinzel);letter-spacing:.18em;font-size:clamp(.62rem,1.2vw,.76rem);
  color:var(--gold-soft);margin-top:clamp(1rem,2.5vh,1.4rem)}
.hp-copy{color:var(--ink);font-size:clamp(.74rem,1.35vw,.86rem);line-height:1.75;letter-spacing:.02em}
.hp-copy p+p{margin-top:.8rem}
.hp-feats{list-style:none;margin:clamp(1rem,2.5vh,1.4rem) 0 0;padding:0;display:flex;flex-direction:column;gap:.6rem}
.hp-feats li{position:relative;padding-left:1.4rem;color:var(--ink);font-size:clamp(.72rem,1.3vw,.84rem);line-height:1.5}
.hp-feats li::before{content:"";position:absolute;left:0;top:.45em;width:7px;height:7px;border-radius:50%;
  background:var(--gold);box-shadow:0 0 8px rgba(212,175,55,.7)}
.hp-art{aspect-ratio:1/1;border-radius:16px;border:1px solid var(--line-soft);
  background:radial-gradient(circle at 50% 42%, rgba(42,114,230,.32), rgba(6,9,18,.92));
  display:grid;place-items:center;position:relative;overflow:hidden}
.hp-art svg{width:54%;height:54%;stroke:var(--gold-soft);fill:none;stroke-width:1.1;opacity:.9}
.hp-art .ring{position:absolute;border:1px solid rgba(212,175,55,.18);border-radius:50%}
@media (max-width:820px){ .hp-inner{grid-template-columns:1fr} .hp-art{max-width:320px;margin:0 auto;order:-1} }