/* ===========================================================
   Lagoon of Randomness™ Shop 2.0 — "Entering the Lagoon"
   Loaded only on /shop/* pages, after the page's inline design
   system. Colors come from the site tokens (--bg, --text, --yellow,
   --blue …) so Dark/Light mode keeps working through the existing
   #theme-toggle. Everything here is prefixed s2- to stay isolated
   from the rest of the site.
   =========================================================== */
:root{
  --s2-star:rgba(255,255,255,.85); --s2-star-dim:rgba(255,255,255,.35);
  --s2-glow-y:rgba(255,212,0,.10); --s2-glow-b:rgba(40,168,224,.13);
  --s2-glass:rgba(20,20,20,.72);
  --s2-pad:radial-gradient(circle at 50% 58%,rgba(40,168,224,.22),rgba(20,20,20,0) 62%);
}
[data-theme="light"]{
  --s2-star:rgba(60,60,58,.85); --s2-star-dim:rgba(105,105,100,.6);
  --s2-glow-y:rgba(255,212,0,.16); --s2-glow-b:rgba(40,168,224,.10);
  --s2-glass:rgba(255,255,255,.8);
  --s2-pad:radial-gradient(circle at 50% 58%,rgba(40,168,224,.16),rgba(255,255,255,0) 62%);
}
body.s2{overflow-x:clip}
.s2-main{position:relative;overflow-x:clip}
.s2-main :focus-visible{outline:3px solid var(--yellow);outline-offset:3px;border-radius:8px}
.s2-main [hidden],.s2-side [hidden],.cart-drawer [hidden]{display:none!important}
.s2-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Starfield ---------- */
.s2-stars,.s2-stars:before,.s2-stars:after{position:absolute;inset:0;pointer-events:none;content:""}
.s2-stars{z-index:0;
  background-image:radial-gradient(1.4px 1.4px at 20px 30px,var(--s2-star),transparent 60%),radial-gradient(1px 1px at 140px 90px,var(--s2-star-dim),transparent 60%),radial-gradient(1.6px 1.6px at 260px 160px,var(--s2-star),transparent 60%),radial-gradient(1px 1px at 80px 220px,var(--s2-star-dim),transparent 60%),radial-gradient(1.2px 1.2px at 330px 40px,var(--s2-star-dim),transparent 60%);
  background-size:360px 260px;animation:s2-drift 140s linear infinite}
[data-theme="light"] .s2-stars{background-size:300px 220px}
.s2-stars:before{background-image:radial-gradient(2px 2px at 60px 120px,var(--s2-star),transparent 60%),radial-gradient(1.4px 1.4px at 420px 300px,var(--s2-star),transparent 60%),radial-gradient(1.2px 1.2px at 260px 40px,var(--s2-star-dim),transparent 60%);background-size:520px 420px;animation:s2-drift 90s linear infinite reverse,s2-twinkle 4s ease-in-out infinite}
.s2-stars:after{background-image:radial-gradient(2.6px 2.6px at 200px 200px,var(--yellow),transparent 60%),radial-gradient(2.2px 2.2px at 620px 480px,var(--blue),transparent 60%);background-size:800px 640px;opacity:.7;animation:s2-drift 220s linear infinite,s2-twinkle 6s ease-in-out infinite 1s}
@keyframes s2-drift{from{background-position:0 0}to{background-position:-1440px 900px}}
@keyframes s2-twinkle{0%,100%{opacity:.55}50%{opacity:1}}
.s2-nebula{position:absolute;border-radius:50%;filter:blur(110px);pointer-events:none;z-index:0;opacity:.7;animation:s2-nebula 24s ease-in-out infinite alternate}
.s2-nebula.y{background:radial-gradient(circle,var(--s2-glow-y) 0%,transparent 68%)}
.s2-nebula.b{background:radial-gradient(circle,var(--s2-glow-b) 0%,transparent 68%)}
[data-theme="light"] .s2-nebula{opacity:.55}
@keyframes s2-nebula{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(40px,-30px,0) scale(1.15)}}

/* ---------- Motion ---------- */
.s2-fl{animation:s2-float 6s ease-in-out infinite}
.s2-fl.d1{animation-delay:-1.2s}.s2-fl.d2{animation-delay:-2.4s}.s2-fl.d3{animation-delay:-3.6s}.s2-fl.d4{animation-delay:-4.8s}
.s2-fl.slow{animation-duration:9s}
@keyframes s2-float{0%,100%{transform:translateY(0) rotate(-1.2deg)}50%{transform:translateY(-16px) rotate(1.2deg)}}
.s2-bob{animation:s2-bob 7s ease-in-out infinite}
@keyframes s2-bob{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-26px) rotate(3deg)}}
.s2-spin{animation:s2-spin 40s linear infinite}
@keyframes s2-spin{to{transform:rotate(360deg)}}
.s2-orbit{position:absolute;border-radius:50%;border:1px dashed var(--border);pointer-events:none}
.s2-arm{position:absolute;inset:0;animation:s2-spin 22s linear infinite;pointer-events:none}
.s2-arm.slow{animation-duration:34s;animation-direction:reverse}
.s2-arm.fast{animation-duration:16s}
.s2-arm>.sat{position:absolute;left:50%;top:-24px;margin-left:-24px;width:48px;height:48px;animation:s2-spin 22s linear infinite reverse}
.s2-arm.slow>.sat{animation-duration:34s;animation-direction:normal}
.s2-arm.fast>.sat{animation-duration:16s}
.s2-pulse{animation:s2-pulse 3.2s ease-in-out infinite}
@keyframes s2-pulse{0%,100%{box-shadow:0 0 0 0 rgba(255,212,0,.45)}50%{box-shadow:0 0 0 14px rgba(255,212,0,0)}}
@supports (animation-timeline: view()){
  .s2-arrive{animation:s2-arrive linear both;animation-timeline:view();animation-range:entry 0% cover 28%}
  .s2-arrive.l{animation-name:s2-arriveL}.s2-arrive.r{animation-name:s2-arriveR}
}
@keyframes s2-arrive{from{opacity:0;translate:0 70px;scale:.94;filter:blur(6px)}to{opacity:1;translate:0 0;scale:1;filter:none}}
@keyframes s2-arriveL{from{opacity:0;translate:-80px 0;rotate:-3deg}to{opacity:1;translate:0 0;rotate:0deg}}
@keyframes s2-arriveR{from{opacity:0;translate:80px 0;rotate:3deg}to{opacity:1;translate:0 0;rotate:0deg}}
.s2-rise{animation:s2-rise .9s cubic-bezier(.2,.7,.2,1) both}
.s2-rise.t1{animation-delay:.1s}.s2-rise.t2{animation-delay:.25s}.s2-rise.t3{animation-delay:.4s}.s2-rise.t4{animation-delay:.55s}.s2-rise.t5{animation-delay:.7s}
.s2-warping .s2-rise.t1{animation-delay:3s}.s2-warping .s2-rise.t2{animation-delay:3.15s}.s2-warping .s2-rise.t3{animation-delay:3.3s}.s2-warping .s2-rise.t4{animation-delay:3.45s}.s2-warping .s2-rise.t5{animation-delay:3.6s}
@keyframes s2-rise{from{opacity:0;translate:0 30px}to{opacity:1;translate:0 0}}

/* ---------- Warp entry ---------- */
.s2-warp{position:fixed;inset:0;z-index:999;pointer-events:none;background:#050505;display:flex;align-items:center;justify-content:center;overflow:hidden;animation:s2-warpOut .7s ease-in 2.7s forwards}
.s2-warp[hidden]{display:none}
.s2-warp .streaks{position:absolute;width:260vmax;height:260vmax;left:50%;top:50%;margin:-130vmax 0 0 -130vmax;background:repeating-conic-gradient(from 0deg,transparent 0deg 3deg,rgba(255,255,255,.75) 3deg 3.25deg,transparent 3.25deg 6deg,rgba(40,168,224,.7) 6deg 6.2deg,transparent 6.2deg 11deg,rgba(255,212,0,.7) 11deg 11.18deg,transparent 11.18deg 17deg);-webkit-mask:radial-gradient(circle,transparent 0 4%,#000 18%,transparent 52%);mask:radial-gradient(circle,transparent 0 4%,#000 18%,transparent 52%);animation:s2-warpZoom 3.2s cubic-bezier(.55,0,.9,.4) forwards}
.s2-warp .portal{position:absolute;width:120px;height:120px;border-radius:50%;border:3px solid #ffd400;box-shadow:0 0 60px rgba(255,212,0,.6),inset 0 0 40px rgba(40,168,224,.6);animation:s2-portal 3.2s cubic-bezier(.7,0,.3,1) forwards}
.s2-warp .eye{position:relative;width:110px;animation:s2-warpEye 3.2s ease forwards}
.s2-warp .lbl{position:absolute;bottom:18%;left:0;right:0;text-align:center;color:#fff;font-weight:900;letter-spacing:.42em;font-size:.78rem;text-transform:uppercase;animation:s2-warpLabel 3.2s ease forwards}
.s2-warp .lbl b{color:#ffd400}
@keyframes s2-warpZoom{0%{transform:scale(.25) rotate(0);opacity:0}15%{opacity:1}100%{transform:scale(2.6) rotate(25deg);opacity:1}}
@keyframes s2-portal{0%{transform:scale(0);opacity:0}30%{transform:scale(1);opacity:1}75%{transform:scale(1.4)}100%{transform:scale(30);opacity:0;border-width:1px}}
@keyframes s2-warpEye{0%{transform:scale(.4);opacity:0}25%,70%{transform:scale(1);opacity:1}100%{transform:scale(6);opacity:0}}
@keyframes s2-warpLabel{0%,10%{opacity:0;letter-spacing:.9em}35%,72%{opacity:1;letter-spacing:.42em}100%{opacity:0}}
@keyframes s2-warpOut{to{opacity:0;visibility:hidden}}

/* ---------- Shop bar (under the site header) ---------- */
.s2-bar{position:sticky;top:76px;z-index:150;background:var(--bg);border-bottom:1px solid var(--border)}
.s2-bar .shell{display:flex;align-items:center;gap:.6rem;min-height:56px}
.s2-bar nav{display:flex;gap:.15rem;overflow-x:auto;scrollbar-width:none;flex:1;font-size:.74rem;font-weight:850;letter-spacing:.04em;text-transform:uppercase;-webkit-mask:linear-gradient(90deg,#000 92%,transparent);mask:linear-gradient(90deg,#000 92%,transparent)}
.s2-bar nav::-webkit-scrollbar{display:none}
.s2-bar nav a{flex-shrink:0;padding:.55rem .75rem;border-radius:999px;color:var(--text-soft);white-space:nowrap}
.s2-bar nav a:hover{background:var(--bg2);color:var(--text)}
.s2-bar nav a.on{color:var(--text);background:var(--yellow);color:#0a0a0a}
.s2-bar nav a.studio{color:var(--blue-deep);border:1px solid rgba(40,168,224,.35);margin-left:.3rem}
.s2-ibtn{width:44px;height:44px;border-radius:50%;border:1px solid var(--border);background:var(--surface);color:var(--text);display:inline-flex;align-items:center;justify-content:center;position:relative;flex-shrink:0}
.s2-ibtn:hover{border-color:var(--yellow)}
.s2-ibtn svg{width:18px;height:18px}
.s2-n{position:absolute;top:-4px;right:-4px;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:var(--yellow);color:#0a0a0a;font-size:.66rem;font-weight:900;display:flex;align-items:center;justify-content:center}
.s2-n[hidden]{display:none}
.s2-promo{background:var(--yellow);color:#0a0a0a;font-size:.74rem;font-weight:800;letter-spacing:.03em}
.s2-promo .shell{display:flex;justify-content:center;gap:2rem;flex-wrap:wrap;padding:.45rem 0}
@media(max-width:1240px){.s2-bar{top:76px}}

/* ---------- Type + buttons ---------- */
.s2-eyebrow{display:inline-flex;align-items:center;gap:.5rem;font-size:.72rem;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:var(--blue-deep);margin-bottom:1rem}
.s2-eyebrow.y{color:var(--yellow)}
[data-theme="light"] .s2-eyebrow.y{color:#0a0a0a}
.s2-dark .s2-eyebrow.y{color:#ffd400!important}
.s2-display{font-size:clamp(2.6rem,7vw,6.4rem);line-height:.92;letter-spacing:-.04em;font-weight:900;margin:0 0 1.2rem;text-transform:uppercase}
.s2-h{font-size:clamp(2rem,4.2vw,3.6rem);line-height:.95;letter-spacing:-.035em;font-weight:900;margin:0;text-transform:uppercase}
.s2-mark{position:relative;white-space:nowrap;z-index:0}
.s2-mark:after{content:"";position:absolute;left:-.05em;right:-.05em;height:.26em;bottom:.08em;background:var(--yellow);z-index:-1;transform:rotate(-1deg)}
.s2-mark.blue{color:#28a8e0}
@media(max-width:560px){.s2-mark{white-space:normal}}
.s2-lede{font-size:clamp(1.02rem,1.4vw,1.25rem);max-width:56ch;color:var(--text-soft);margin:0}
.s2-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:50px;padding:0 1.4rem;border-radius:999px;border:2px solid var(--text);color:var(--text);font-weight:850;font-size:.86rem;background:transparent;transition:transform .15s,background .15s;cursor:pointer;text-align:center}
.s2-btn:hover{transform:translateY(-2px)}
.s2-btn.y{background:var(--yellow);border-color:var(--yellow);color:#0a0a0a}
.s2-btn.y:hover{background:var(--yellow-deep)}
.s2-btn.light{border-color:#fff;color:#fff}
.s2-btn.sm{min-height:44px;padding:0 1rem;font-size:.8rem}
.s2-link{font-weight:850;font-size:.86rem;border-bottom:2px solid var(--yellow);padding-bottom:2px}
.s2-sec{padding:clamp(3.6rem,7vw,7rem) 0;position:relative}
.s2-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;margin-bottom:2.2rem;position:relative;z-index:2}
.s2-kicker{font-size:.7rem;font-weight:900;letter-spacing:.2em;text-transform:uppercase;color:var(--text-muted);margin-bottom:.5rem}
.s2-coord{font:700 .68rem/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted)}
.s2-sec .shell,.s2-hero .shell{position:relative;z-index:2}
.s2-sec .shell.s2-layout{z-index:auto}
.s2-layout>div{position:relative;z-index:2}

/* ---------- Product cards ---------- */
.s2-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.4rem}
.s2-grid.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.s2-card{position:relative;background:var(--s2-glass);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;backdrop-filter:blur(10px);transition:transform .35s cubic-bezier(.2,.7,.2,1),border-color .2s,box-shadow .35s}
.s2-card[hidden]{display:none}
.s2-card:hover{transform:translateY(-10px) rotate(-.6deg);border-color:var(--blue);box-shadow:0 30px 60px -28px rgba(40,168,224,.55)}
.s2-img{position:relative;display:block;aspect-ratio:1/1;background:var(--s2-pad);overflow:hidden}
.s2-img:before{content:"";position:absolute;inset:30%;background:url("/assets/brand/lagoon-eye-icon.png") center/contain no-repeat;opacity:.16}
.s2-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.s2-card:hover .s2-img img{transform:scale(1.07)}
.s2-badge{position:absolute;top:.8rem;left:.8rem;z-index:2;background:var(--yellow);color:#0a0a0a;font-size:.62rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase;padding:.3rem .6rem;border-radius:999px}
.s2-badge.b{background:var(--blue);color:#fff}
.s2-badge.k{background:#0a0a0a;color:#fff;border:1px solid rgba(255,255,255,.3)}
.s2-body{padding:1rem 1.1rem 1.15rem;display:flex;flex-direction:column;gap:.3rem;flex:1}
.s2-cat{font-size:.64rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted)}
.s2-name{font-size:.95rem;font-weight:800;line-height:1.3;margin:0}
.s2-name a:hover{color:var(--blue-deep)}
.s2-meta{font-size:.72rem;color:var(--text-muted);font-weight:600}
.s2-row{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin-top:auto;padding-top:.5rem}
.s2-price{font-weight:900;color:var(--blue-deep);font-size:1.05rem}
.s2-add{width:44px;height:44px;border-radius:50%;border:0;background:var(--yellow);color:#0a0a0a;display:inline-flex;align-items:center;justify-content:center;transition:transform .2s;flex-shrink:0;cursor:pointer}
.s2-add:hover{transform:rotate(90deg) scale(1.08)}
.s2-add svg{width:18px;height:18px}
.s2-opts{font-size:.74rem;font-weight:850;border:1px solid var(--border);border-radius:999px;padding:.55rem .8rem;white-space:nowrap}
.s2-opts:hover{border-color:var(--blue)}
.s2-card.row{flex-direction:row}
.s2-card.row .s2-img{width:46%;flex-shrink:0}

/* ---------- Category planets + gas rings ---------- */
.s2-planets{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1.2rem}
.s2-planet{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.7rem;padding:1.2rem .6rem 1.4rem;border-radius:var(--radius);transition:transform .35s}
.s2-planet:hover{transform:translateY(-12px)}
.s2-globe{position:relative;width:min(100%,200px);aspect-ratio:1/1}
.s2-ball{position:absolute;inset:12%;border-radius:50%;overflow:hidden;z-index:1;background:var(--s2-pad),var(--surface);border:1px solid var(--border);box-shadow:inset -18px -22px 40px rgba(0,0,0,.45),0 20px 50px -20px rgba(40,168,224,.5)}
.s2-ball:before{content:"";position:absolute;inset:28%;background:url("/assets/brand/lagoon-eye-icon.png") center/contain no-repeat;opacity:.16}
.s2-ball img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.s2-gas{position:absolute;inset:-6% -20%;pointer-events:none;transform:rotate(-16deg);perspective:700px}
.s2-gas.back{z-index:0;clip-path:inset(0 0 50% 0)}
.s2-gas.front{z-index:2;clip-path:inset(50% 0 0 0)}
.s2-gas i{position:absolute;inset:0;border-radius:50%;border:3px dotted var(--yellow);transform:rotateX(76deg);animation:s2-gas 16s linear infinite;filter:drop-shadow(0 0 3px rgba(255,212,0,.9))}
.s2-gas i.g2{inset:9%;border-width:2px;border-color:var(--blue);animation-duration:24s;animation-direction:reverse;filter:drop-shadow(0 0 3px rgba(40,168,224,.9))}
.s2-gas i.g3{inset:-5%;border-width:7px;opacity:.22;animation-duration:30s;filter:blur(1.5px)}
[data-theme="light"] .s2-gas i{filter:drop-shadow(0 0 2px rgba(0,0,0,.25))}
.s2-planet:nth-child(2n) .s2-gas{transform:rotate(14deg)}
.s2-planet:nth-child(2n) .s2-gas i{border-color:var(--blue);filter:drop-shadow(0 0 3px rgba(40,168,224,.9))}
.s2-planet:nth-child(2n) .s2-gas i.g2{border-color:var(--yellow);filter:drop-shadow(0 0 3px rgba(255,212,0,.9))}
@keyframes s2-gas{from{transform:rotateX(76deg) rotateZ(0deg)}to{transform:rotateX(76deg) rotateZ(360deg)}}
.s2-planet h3{margin:0;font-size:1.05rem;font-weight:900;text-transform:uppercase;letter-spacing:.02em}
.s2-planet p{margin:0;font-size:.8rem;color:var(--text-muted);max-width:22ch}

/* ---------- Ticker ---------- */
.s2-ticker{overflow:hidden;border-block:1px solid var(--border);background:var(--bg2);position:relative;z-index:2}
.s2-ticker .track{display:flex;gap:3rem;width:max-content;padding:1rem 0;animation:s2-tick 38s linear infinite;font-weight:900;text-transform:uppercase;letter-spacing:.06em;font-size:1rem}
.s2-ticker .track span{display:inline-flex;align-items:center;gap:3rem}
.s2-ticker .track span:after{content:"";width:10px;height:10px;border-radius:50%;background:var(--yellow)}
.s2-ticker .track span:nth-child(2n):after{background:var(--blue)}
@keyframes s2-tick{to{transform:translateX(-50%)}}

/* ---------- Panels, chips, fields ---------- */
.s2-panel{background:var(--s2-glass);border:1px solid var(--border);border-radius:28px;backdrop-filter:blur(12px);position:relative;overflow:hidden}
.s2-panel.s2-dark{background:#0a0a0a;color:#fff;border-color:rgba(255,255,255,.14)}
.s2-panel>*{position:relative;z-index:2}
.s2-panel>.s2-stars,.s2-panel>.s2-nebula{position:absolute;z-index:0}
.s2-chip{display:inline-flex;align-items:center;gap:.4rem;min-height:42px;border:1px solid var(--border);background:var(--surface);border-radius:999px;padding:.45rem 1rem;font-size:.8rem;font-weight:800;color:var(--text-soft);transition:.15s;cursor:pointer}
.s2-chip:hover{border-color:var(--blue);color:var(--text)}
.s2-chip.on,.s2-chip[aria-pressed="true"]{background:var(--yellow);border-color:var(--yellow);color:#0a0a0a}
.s2-chip .n{opacity:.6;font-size:.72rem}
.s2-field{width:100%;min-height:50px;background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:.7rem 1.2rem;font:inherit;font-size:.92rem;color:var(--text)}
.s2-field.sq{border-radius:12px}

/* ---------- Homepage ---------- */
.s2-hero{position:relative;overflow:hidden;padding:clamp(3rem,6vw,6rem) 0 clamp(3rem,6vw,5.5rem)}
.s2-hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,4vw,4rem);align-items:center}
.s2-stage{position:relative;aspect-ratio:1/1;max-width:620px;margin-left:auto;width:100%}
.s2-hplanet{position:absolute;inset:14%;border-radius:50%;background:radial-gradient(circle at 34% 30%,#1d1d1d,#0a0a0a 62%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),inset -40px -50px 90px rgba(40,168,224,.25),0 0 120px rgba(40,168,224,.28)}
[data-theme="light"] .s2-hplanet{background:radial-gradient(circle at 34% 30%,#fff,#eef8fd 62%);box-shadow:inset 0 0 0 1px rgba(10,10,10,.08),inset -40px -50px 90px rgba(40,168,224,.22),0 0 120px rgba(255,212,0,.35)}
.s2-hcloak{position:absolute;left:18%;right:18%;top:8%;width:64%;height:auto;filter:drop-shadow(0 40px 60px rgba(0,0,0,.6))}
.s2-main img[width][height]{height:auto}
.s2-capsule{position:absolute;z-index:3;display:flex;gap:.7rem;align-items:center;padding:.5rem .9rem .5rem .5rem;border-radius:999px;background:var(--s2-glass);border:1px solid var(--border);backdrop-filter:blur(10px);font-size:.76rem;font-weight:800;box-shadow:var(--shadow);max-width:250px}
.s2-capsule .ci{width:52px;height:52px;border-radius:50%;overflow:hidden;position:relative;background:var(--s2-pad),var(--surface);flex-shrink:0}
.s2-capsule .ci img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.s2-capsule small{display:block;color:var(--blue-deep);font-weight:900}
.s2-capsule[hidden]{display:none}
.s2-mood{display:flex;align-items:center;gap:.7rem;width:100%;min-height:56px;padding:.5rem .9rem .5rem .5rem;border-radius:16px;border:1px solid rgba(255,255,255,.14);background:transparent;color:#fff;text-align:left;font-weight:800;font-size:.9rem;transition:.2s;cursor:pointer}
.s2-mood img{width:42px;height:42px;object-fit:contain}
.s2-mood:hover{border-color:#28a8e0}
.s2-mood[aria-pressed="true"]{background:#ffd400;color:#0a0a0a;border-color:#ffd400}
.s2-moodimg{position:relative;width:78%;animation:s2-moodIn .7s cubic-bezier(.2,.7,.2,1) both}
@keyframes s2-moodIn{from{opacity:0;transform:scale(.7) rotate(-12deg) translateY(40px)}to{opacity:1;transform:none}}
.s2-props{position:absolute;right:-16%;top:4%;bottom:10%;width:28%;display:flex;flex-direction:column;justify-content:space-between;align-items:center;pointer-events:none;z-index:3}
.s2-props[hidden]{display:none}
.s2-props span{display:block;width:100%;animation:s2-propIn .6s cubic-bezier(.2,.7,.2,1) both}
.s2-props span:nth-child(2){width:52%;animation-delay:.15s}.s2-props span:nth-child(3){animation-delay:.3s}
.s2-props img{width:100%;filter:drop-shadow(0 14px 18px rgba(0,0,0,.45))}
@keyframes s2-propIn{from{opacity:0;transform:translateX(30px) scale(.4)}to{opacity:1;transform:none}}
.s2-pick{display:flex;gap:.9rem;align-items:center;padding:.6rem;border-radius:18px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04);color:#fff}
.s2-pick .pi{position:relative;width:84px;height:84px;border-radius:14px;overflow:hidden;flex-shrink:0;background:#161616}
.s2-pick .pi img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.s2-pick strong{font-size:.88rem;line-height:1.3}
.s2-pick span.p{color:#6cc5f2;font-weight:900}
.s2-coll{position:relative;border-radius:28px;overflow:hidden;min-height:380px;display:flex;flex-direction:column;justify-content:flex-end;padding:1.8rem;border:1px solid var(--border);background:var(--surface);transition:transform .4s}
.s2-coll:hover{transform:translateY(-8px)}
.s2-coll .mos{position:absolute;inset:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px}
.s2-coll .mos div{position:relative;background:var(--s2-pad),var(--bg2);overflow:hidden}
.s2-coll .mos img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.s2-coll .shade{position:absolute;inset:0;background:linear-gradient(0deg,rgba(10,10,10,.92) 8%,rgba(10,10,10,.1) 60%)}
.s2-coll .txt{position:relative;color:#fff}
.s2-coll h3{margin:.4rem 0 .3rem;font-size:1.6rem;line-height:1;font-weight:900;text-transform:uppercase;letter-spacing:-.02em}
.s2-coll p{margin:0;font-size:.86rem;color:#d6d6d1}
.s2-jcard{display:flex;flex-direction:column;gap:.8rem}
.s2-jcard .ji{position:relative;aspect-ratio:4/5;border-radius:24px;overflow:hidden;background:var(--s2-pad),var(--surface);display:flex;align-items:center;justify-content:center}
.s2-jcard .ji img.cover{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s}
.s2-jcard .ji img.cut{width:66%}
.s2-jcard:hover .ji img{transform:scale(1.05)}
.s2-jcard h3{margin:0;font-size:1.25rem;line-height:1.22;font-weight:900}
.s2-jcard p{margin:0;color:var(--text-muted);font-size:.9rem}
.s2-replay{position:fixed;left:16px;bottom:16px;z-index:170;background:var(--s2-glass);backdrop-filter:blur(8px)}

/* ---------- Catalog ---------- */
.s2-layout{display:grid;grid-template-columns:260px minmax(0,1fr);gap:2.6rem;align-items:start}
.s2-side{position:sticky;top:150px}
.s2-fblock{border-bottom:1px solid var(--border);padding:1.1rem 0}
.s2-fblock h3{margin:0 0 .8rem;font-size:.7rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted)}
.s2-frow{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:44px;padding:.4rem .7rem;border-radius:12px;border:1px solid transparent;background:none;text-align:left;font-size:.86rem;font-weight:700;color:var(--text-soft);cursor:pointer}
.s2-frow:hover{border-color:var(--border)}
.s2-frow .box{width:18px;height:18px;border-radius:5px;border:2px solid var(--border);margin-right:.6rem;flex-shrink:0;display:inline-block;vertical-align:middle}
.s2-frow[aria-pressed="true"]{color:var(--text)}
.s2-frow[aria-pressed="true"] .box{background:var(--yellow);border-color:var(--yellow)}
.s2-frow .n{font-size:.72rem;color:var(--text-muted);font-weight:800}
.s2-price-in{display:flex;gap:.4rem;align-items:center}
.s2-price-in input{width:100%;min-height:44px;border-radius:12px;border:1px solid var(--border);background:var(--surface);color:var(--text);padding:0 .7rem;font:inherit}
.s2-pills{display:flex;gap:.4rem;flex-wrap:wrap}
.s2-pill{display:inline-flex;align-items:center;gap:.4rem;min-height:36px;padding:.3rem .6rem .3rem .9rem;border-radius:999px;background:var(--yellow);color:#0a0a0a;font-size:.76rem;font-weight:800;border:0;cursor:pointer}
.s2-sort{min-height:50px;border-radius:999px;border:1px solid var(--border);background:var(--surface);color:var(--text);padding:0 1rem;font:inherit;font-size:.84rem;font-weight:700}
.s2-search{position:relative;flex:1;min-width:200px}
.s2-search svg{position:absolute;left:1.1rem;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--text-muted)}
.s2-search input{padding-left:2.8rem}
.s2-mobf,.s2-side-close{display:none}
.s2-empty{text-align:center;padding:4rem 1rem;color:var(--text-muted)}
.s2-empty[hidden]{display:none}
.s2-cathero{position:relative;overflow:hidden;border-bottom:1px solid var(--border)}
.s2-cathero .shell{display:grid;grid-template-columns:1.2fr .8fr;gap:2rem;align-items:center;padding:3rem 0 2.6rem}
.s2-bigplanet{position:relative;width:min(380px,90%);aspect-ratio:1/1;margin-left:auto}
.s2-bigplanet .s2-ball{inset:10%;box-shadow:inset -40px -50px 90px rgba(0,0,0,.55),0 0 120px rgba(40,168,224,.35)}

/* ---------- Collections ---------- */
.s2-map{position:relative;height:520px;border-radius:32px;border:1px solid var(--border);overflow:hidden;background:var(--bg2)}
.s2-map svg.lines{position:absolute;inset:0;width:100%;height:100%;z-index:1}
.s2-map svg.lines line{stroke:var(--border);stroke-width:1.5;stroke-dasharray:6 8;animation:s2-dash 6s linear infinite}
@keyframes s2-dash{to{stroke-dashoffset:-140}}
.s2-node{position:absolute;z-index:2;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:.6rem;background:none;border:0;padding:0;text-align:center;cursor:pointer;color:var(--text)}
.s2-node .orb{width:150px;height:150px;border-radius:50%;position:relative;background:var(--s2-pad),var(--surface);border:2px solid var(--border);display:flex;align-items:center;justify-content:center;transition:transform .35s,border-color .2s;box-shadow:0 20px 60px -20px rgba(40,168,224,.5);overflow:hidden}
.s2-node .orb img{width:78%;height:78%;object-fit:contain}
.s2-node .orb img.photo{width:100%;height:100%;object-fit:cover}
.s2-node:hover .orb{transform:scale(1.06)}
.s2-node[aria-pressed="true"] .orb{border-color:var(--yellow);box-shadow:0 0 0 8px rgba(255,212,0,.15),0 0 80px rgba(255,212,0,.35)}
.s2-node .nm{font-weight:900;text-transform:uppercase;font-size:.9rem}
.s2-detail{animation:s2-rise .6s cubic-bezier(.2,.7,.2,1) both}

/* ---------- Product page ---------- */
.s2-pdp{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,4vw,4.4rem);align-items:start}
.s2-gal{position:sticky;top:150px}
.s2-galmain{position:relative;aspect-ratio:1/1;border-radius:28px;overflow:hidden;background:var(--s2-pad),var(--surface);border:1px solid var(--border);cursor:zoom-in}
.s2-galmain img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.s2-galmain:hover img{transform:scale(1.5)}
.s2-thumbs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.6rem;margin-top:.8rem}
.s2-thumbs button{position:relative;aspect-ratio:1/1;border-radius:14px;overflow:hidden;border:2px solid var(--border);background:var(--surface);padding:0;cursor:pointer}
.s2-thumbs button img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.s2-thumbs button.active{border-color:var(--yellow)}
.s2-pdp h1{font-size:clamp(2rem,3.6vw,3.2rem);line-height:.98;letter-spacing:-.035em;font-weight:900;margin:.7rem 0 .6rem;text-transform:uppercase}
.s2-pdprice{font-size:1.9rem;font-weight:900;color:var(--blue-deep)}
.s2-optlabel{display:flex;justify-content:space-between;font-size:.76rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);margin:1.6rem 0 .7rem}
.s2-optlabel b{color:var(--text)}
.s2-variants{display:flex;gap:.5rem;flex-wrap:wrap}
.s2-variants button{min-width:56px;min-height:48px;padding:0 1rem;border-radius:12px;border:1px solid var(--border);background:var(--surface);color:var(--text);font-weight:800;font-size:.86rem;cursor:pointer}
.s2-variants button.active{background:var(--text);color:var(--bg);border-color:var(--text)}
.s2-qty{display:inline-flex;align-items:center;border:1px solid var(--border);border-radius:999px;min-height:56px}
.s2-qty button{width:48px;height:54px;background:none;border:0;font-size:1.2rem;font-weight:800;color:var(--text);cursor:pointer}
.s2-qty span{min-width:30px;text-align:center;font-weight:900}
.s2-trust{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.6rem;margin-top:1.4rem}
.s2-trust div{border:1px solid var(--border);border-radius:16px;padding:.8rem;font-size:.74rem;font-weight:700;color:var(--text-soft);display:flex;flex-direction:column;gap:.3rem}
.s2-trust svg{width:20px;height:20px;color:var(--blue-deep)}
.s2-acc{border-top:1px solid var(--border)}
.s2-acc>button{width:100%;display:flex;justify-content:space-between;align-items:center;min-height:60px;background:none;border:0;font-weight:900;font-size:.95rem;text-align:left;color:var(--text);cursor:pointer}
.s2-acc>button span{font-size:1.3rem;color:var(--blue-deep)}
.s2-acc .body{padding:0 0 1.2rem;color:var(--text-soft);font-size:.92rem;display:none}
.s2-acc.open .body{display:block}
.s2-acc .body a{text-decoration:underline}
.s2-sticky{position:fixed;left:0;right:0;bottom:0;z-index:160;background:var(--s2-glass);backdrop-filter:blur(14px);border-top:1px solid var(--border);transform:translateY(110%);transition:transform .3s}
.s2-sticky.show{transform:none}
.s2-sticky .shell{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.7rem 0}
.s2-sticky .si{display:flex;align-items:center;gap:.8rem;min-width:0}
.s2-sticky .si span.t{position:relative;width:48px;height:48px;border-radius:12px;overflow:hidden;background:var(--surface);flex-shrink:0}
.s2-sticky .si img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.s2-sticky strong{display:block;font-size:.88rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:48vw}
.s2-sticky small{color:var(--text-muted);font-size:.78rem}
.s2-err{color:#ff6b6b;font-weight:800;font-size:.84rem;margin-top:.6rem}
[data-theme="light"] .s2-err{color:#c0392b}

/* ---------- Journal ---------- */
.s2-prose{font-size:1.1rem;line-height:1.75;color:var(--text-soft);max-width:68ch}
.s2-prose p{margin:0 0 1.3rem}
.s2-prose h2{color:var(--text);font-size:1.7rem;letter-spacing:-.02em;margin:2.2rem 0 .8rem;line-height:1.1}
.s2-prose blockquote{margin:2rem 0;padding:1.2rem 1.4rem;border-radius:18px;background:var(--bg2);color:var(--text);font-weight:800;font-size:1.25rem;line-height:1.35}
.s2-art{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:3rem;align-items:start}
.s2-art aside{position:sticky;top:150px;display:flex;flex-direction:column;gap:.9rem}

/* ---------- Cart drawer (re-skinned; logic unchanged) ---------- */
.cart-drawer{background:var(--bg);border-left:1px solid var(--border)}
.cart-drawer:not(.open){box-shadow:none;visibility:hidden;transition:transform .25s,visibility 0s .25s} /* no shadow bleeding into the page edge while closed */
.cart-drawer-head{background:#0a0a0a;color:#fff;border-bottom:1px solid rgba(255,255,255,.14);position:relative;overflow:hidden}
.cart-drawer-head h3{text-transform:uppercase;letter-spacing:-.01em;font-weight:900}
.cart-drawer-head .cart-drawer-close{color:#fff;border-color:rgba(255,255,255,.3)}
.cart-line .cart-thumb{border-radius:14px;background:var(--s2-pad),var(--surface)}
.cart-drawer-foot #checkout-btn{min-height:54px;font-size:.95rem}
.cart-overlay{backdrop-filter:blur(3px)}
.cart-fab{display:none!important} /* the header and shop bar carry the cart button now */

/* ---------- Responsive ---------- */
@media (max-width:1100px){
  .s2-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .s2-planets{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:980px){
  .s2-hero-grid,.s2-cathero .shell,.s2-pdp,.s2-art,.s2-two{grid-template-columns:1fr!important}
  .s2-stage{max-width:440px;margin:0 auto}
  .s2-layout{grid-template-columns:1fr}
  .s2-side{display:none;position:fixed!important;inset:0;top:0!important;z-index:400;background:var(--bg);overflow-y:auto;padding:16px 16px 40px}
  .s2-side.open{display:block;animation:s2-rise .35s both}
  .s2-mobf,.s2-side-close{display:inline-flex}
  .s2-gal,.s2-art aside{position:static}
  .s2-collgrid{grid-template-columns:1fr 1fr!important}
  .s2-jgrid{grid-template-columns:1fr 1fr!important}
  .s2-map{height:auto;padding:2rem 1rem;display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}
  .s2-node{position:static;transform:none}
  .s2-map svg.lines{display:none}
  .s2-bigplanet{margin:0 auto}
}
@media (max-width:720px){
  .s2-grid,.s2-grid.g3{grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem}
  .s2-planets{grid-template-columns:repeat(2,minmax(0,1fr));gap:.4rem}
  .s2-body{padding:.75rem}
  .s2-name{font-size:.84rem}
  .s2-card.row{flex-direction:column}.s2-card.row .s2-img{width:100%}
  .s2-collgrid,.s2-jgrid{grid-template-columns:1fr!important}
  .s2-capsule{display:none}
  .s2-trust{grid-template-columns:1fr 1fr 1fr;font-size:.68rem}
  .s2-replay{left:auto;right:12px;bottom:12px}
  .s2-node .orb{width:120px;height:120px}
  .s2-sticky strong{max-width:40vw}
  .s2-promo .shell{gap:.3rem 1rem;font-size:.68rem}
}
@media (prefers-reduced-motion:reduce){
  .s2-main *,.s2-main *:before,.s2-main *:after,.s2-warp{animation:none!important;transition:none!important}
  .s2-warp{display:none}
}