/* Lunar-inspired night sky in Moonlight City's magenta palette. */
.shop-body{display:flow-root;background:#0e0715;background-image:radial-gradient(ellipse 65% 55% at 78% 8%,rgba(117,20,143,.2),transparent 75%),radial-gradient(ellipse 75% 65% at 20% 90%,rgba(79,9,103,.2),transparent 80%)}
.shop-body>.ambient-scene{opacity:1;background:radial-gradient(ellipse 52% 45% at 86% 15%,rgba(172,39,190,.13),transparent 76%)}
.package-card,.package-card.featured{background:linear-gradient(145deg,#e000df26,#e000df12);border-color:#e000df40}
.product-visual{background:radial-gradient(ellipse at 80% 15%,#e000df99,transparent 72%),linear-gradient(135deg,#870086,#50004f);border-color:#e000df55}
.lunar-stars{position:absolute;inset:0;width:100%;height:100%}.has-lunar-stars .star-field{display:none}
.shop-body>.ambient-scene .aurora-one{opacity:.16}
.shop-body>.ambient-scene .aurora-two{opacity:.11}
.shop-body>.ambient-scene .star-field{opacity:.5;background-image:radial-gradient(circle,#fce8ff 1px,transparent 1.8px),radial-gradient(circle,#bd80d7 .8px,transparent 1.6px),radial-gradient(circle,#f3c4fa .7px,transparent 1.4px);background-size:211px 197px,331px 277px,151px 183px;background-position:20px 37px,109px 201px,72px 93px}
.shop-body>.ambient-scene .ambient-grid{inset:0 0 0 47%;opacity:.7;background-size:56px 56px;background-image:linear-gradient(#e877fa0c 1px,transparent 1px),linear-gradient(90deg,#e877fa0c 1px,transparent 1px);mask-image:linear-gradient(90deg,transparent,#000 55%),linear-gradient(180deg,#000,transparent 75%);mask-composite:intersect}
.lunar-hero{position:relative;isolation:isolate;display:flex;align-items:center;min-height:520px;margin:0 0 32px;overflow:visible;border-bottom:1px solid rgba(255,176,237,.2);background:radial-gradient(ellipse 35% 65% at 73% 51%,rgba(118,22,154,.18),transparent 70%)}
.lunar-hero:before{content:"";position:absolute;inset:0 0 0 46%;z-index:-1;background-image:linear-gradient(#f4a0ff0c 1px,transparent 1px),linear-gradient(90deg,#f4a0ff0c 1px,transparent 1px);background-size:52px 52px;mask-image:linear-gradient(90deg,transparent,#000 36%,transparent 100%)}
.lunar-hero .shop-heading{position:relative;z-index:2;display:block;width:min(52%,550px);margin:0;padding:0 0 0 12px}
.lunar-hero .shop-heading h1{font-size:clamp(40px,5vw,72px);line-height:1.05;letter-spacing:-.045em;text-shadow:0 4px 34px #0008}
.lunar-hero .shop-heading h1:before{display:none}
.lunar-hero .shop-heading span{margin:16px 0 0;font-size:clamp(14px,1.5vw,18px);line-height:1.5;color:#dac3e0}
.lunar-hero .shop-heading .offline_button{display:inline-flex;margin-top:28px}
.moon-orbit{position:absolute;right:6%;top:50%;width:min(48%,480px);aspect-ratio:1;transform:translateY(-50%);pointer-events:none;perspective:1400px}
.moon-instrument-rings{position:absolute;inset:0;will-change:transform}
.moon-instrument-rings svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;fill:none}
.orbit-scale{animation:orbit-turn 240s linear infinite}
.orbit-satellite{animation:orbit-turn 60s linear infinite}
.orbit-tick{stroke:rgba(246,140,221,.4);stroke-width:1;vector-effect:non-scaling-stroke}
.orbit-tick-major{stroke:rgba(255,207,244,.7);stroke-width:1.25}
.orbit-dotted{stroke:rgba(247,152,225,.23);stroke-dasharray:1 7;vector-effect:non-scaling-stroke}
.orbit-path{stroke:rgba(250,162,228,.3);vector-effect:non-scaling-stroke;animation:orbit-reveal 1.8s ease-out both}
.orbit-crosshairs{stroke:rgba(255,234,249,.5);vector-effect:non-scaling-stroke}
.moon-surface{position:absolute;inset:16%;will-change:transform}
.moon-surface:before{content:"";position:absolute;inset:-40%;background:radial-gradient(closest-side,rgba(191,168,223,.24),rgba(116,79,157,.1) 45%,transparent);animation:moon-breathe 10s ease-in-out infinite}
.moon-surface img,.moon-canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transition:opacity 1s}
.moon-canvas{opacity:0}.moon-ready .moon-canvas{opacity:1}.moon-ready img{opacity:0}
@keyframes orbit-turn{to{transform:rotate(360deg)}}
@keyframes orbit-reveal{from{opacity:0;stroke-dasharray:0 1500}to{opacity:1;stroke-dasharray:1500 1500}}
@keyframes moon-breathe{0%,100%{opacity:.85}50%{opacity:1}}
@media(max-width:900px){.lunar-hero{min-height:380px}.moon-orbit{right:5%;width:48%}.lunar-hero .shop-heading{width:58%}}
@media(max-width:550px){.lunar-hero{min-height:390px;margin-bottom:24px;align-items:flex-end;padding-bottom:26px}.lunar-hero .shop-heading{width:100%;padding-left:3px}.lunar-hero .shop-heading h1{font-size:clamp(34px,10vw,48px)}.lunar-hero .shop-heading span{font-size:13px}.lunar-hero .shop-heading .offline_button{margin-top:17px}.moon-orbit{right:15%;top:130px;width:250px;max-width:85%}.lunar-hero:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#0e071566,transparent 55%);z-index:0;pointer-events:none}}
@media(prefers-reduced-motion:reduce){.moon-surface:before,.orbit-scale,.orbit-satellite,.orbit-path{animation:none}.moon-instrument-rings,.moon-surface{will-change:auto}}

/* Give every header action the same permanent glow as the selected shop link. */
.shop-body .shop-links .menu_cat{background:radial-gradient(93% 75% at 50% 50%,rgba(240,0,240,.22),rgba(240,0,240,.3));border:1px solid rgba(240,0,240,.5);box-shadow:0 0 32px rgba(240,0,240,.35);color:#fff;transform:none}
.shop-body .shop-links .menu_cat:hover,.shop-body .shop-links .menu_cat:focus-visible{background:radial-gradient(93% 75% at 50% 50%,rgba(255,67,255,.34),rgba(240,0,240,.4));border-color:#f885f4;box-shadow:0 0 38px rgba(240,0,240,.5);transform:none}
.shop-body .shop-navigation .user_box{max-width:240px;min-height:52px;padding:7px 8px;gap:9px;border:1px solid rgba(240,0,240,.45);border-radius:11px;background:linear-gradient(120deg,rgba(240,0,240,.13),rgba(44,15,51,.68));box-shadow:inset 0 1px rgba(255,255,255,.1),0 0 24px rgba(240,0,240,.13)}
.shop-body .shop-navigation .player_avatar{width:36px;height:36px;border:1px solid rgba(255,124,255,.65);border-radius:8px;background:#35053d;box-shadow:0 0 12px rgba(240,0,240,.28)}
.shop-body .shop-navigation .player_name span:first-child{font-size:9px;letter-spacing:.03em;color:#cba6d2}
.shop-body .shop-navigation .player_name span:last-child{max-width:112px;font-size:12px;color:#fff}
.shop-body .shop-navigation .user_box form{display:flex;flex-shrink:0}
.shop-body .shop-navigation .logout-icon-button{width:36px;height:36px;border:1px solid rgba(240,0,240,.5);border-radius:8px;background:radial-gradient(circle,rgba(240,0,240,.28),rgba(240,0,240,.12));box-shadow:inset 0 1px rgba(255,255,255,.12),0 0 15px rgba(240,0,240,.17);color:#f9dcfa;transform:none}
.shop-body .shop-navigation .logout-icon-button:hover,.shop-body .shop-navigation .logout-icon-button:focus-visible{border-color:#ff85fa;background:rgba(240,0,240,.3);box-shadow:0 0 20px rgba(240,0,240,.35);color:#fff;transform:none}

.payment-options{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:550px){.payment-options{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:650px){.payments-line .payment-brand{flex:0 0 calc(50% - 9px);min-height:0}}

/* The banner fades into the surrounding night sky. */
.brand-showcase{position:relative;max-width:1100px;margin:36px auto 0;overflow:hidden;border-radius:clamp(24px,3vw,48px);mask-image:linear-gradient(to right,transparent,rgba(0,0,0,.3) 4%,rgba(0,0,0,.8) 10%,#000 17%,#000 83%,rgba(0,0,0,.8) 90%,rgba(0,0,0,.3) 96%,transparent),linear-gradient(to bottom,transparent,rgba(0,0,0,.35) 4%,rgba(0,0,0,.85) 10%,#000 16%,#000 84%,rgba(0,0,0,.85) 90%,rgba(0,0,0,.35) 96%,transparent);mask-composite:intersect}
.brand-showcase-banner{display:block;position:relative;aspect-ratio:720/405;overflow:hidden}
.brand-showcase-banner img{display:block;width:100%;height:100%;object-fit:contain}
@media(max-width:650px){.brand-showcase{margin-top:24px}}