/* Navegación compartida: encabezado libre y acceso sticky a la tienda. */
.topbar{
  position:relative!important;
  top:auto!important;
}

.nav-links{
  display:flex!important;
  flex-wrap:wrap!important;
  justify-content:center!important;
  gap:10px!important;
}

.nav-links .shop-nav-link{
  position:relative!important;
  display:inline-flex!important;
  flex-direction:row!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  min-height:42px!important;
  padding:10px 17px!important;
  overflow:hidden!important;
  border:1px solid rgba(211,39,255,.44)!important;
  border-radius:999px!important;
  color:#fff!important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,0) 36%),
    linear-gradient(135deg,#8b2cff,#d327ff)!important;
  box-shadow:0 4px 0 #50168c,0 10px 18px rgba(0,0,0,.22)!important;
  font-size:14px!important;
  font-weight:900!important;
  line-height:1!important;
  text-decoration:none!important;
  transition:transform .15s ease,box-shadow .15s ease,filter .15s ease!important;
}

.nav-links .shop-nav-link:hover{
  transform:translateY(-1px)!important;
  filter:brightness(1.05)!important;
  box-shadow:0 5px 0 #50168c,0 13px 22px rgba(0,0,0,.24)!important;
}

.nav-links .shop-nav-link:active{
  transform:translateY(3px) scale(.99)!important;
  box-shadow:0 1px 0 #50168c,0 6px 12px rgba(0,0,0,.20)!important;
}

.nav-links .shop-nav-discord{
  border-color:rgba(114,137,255,.48)!important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,0) 36%),
    linear-gradient(135deg,#5865f2,#7289ff)!important;
  box-shadow:0 4px 0 #27308f,0 10px 18px rgba(0,0,0,.22)!important;
}

.nav-links .shop-nav-discord:hover{
  box-shadow:0 5px 0 #27308f,0 13px 22px rgba(0,0,0,.24)!important;
}

.nav-links .shop-nav-discord:active{
  box-shadow:0 1px 0 #27308f,0 6px 12px rgba(0,0,0,.20)!important;
}

.shop-nav-icon{
  width:18px!important;
  height:18px!important;
  flex:0 0 18px!important;
  object-fit:contain!important;
  filter:brightness(0) invert(1)!important;
}

.store-sticky-shell{
  position:sticky;
  top:10px;
  z-index:80;
  width:100%;
  padding:8px 0 0;
  pointer-events:none;
}

.store-sticky-inner{
  display:flex;
  justify-content:center;
}

.store-sticky-shell .more-wrap{
  position:relative;
  pointer-events:auto;
}

.store-sticky-shell .more-btn{
  position:relative!important;
  overflow:hidden!important;
  display:inline-flex!important;
  flex-direction:row!important;
  align-items:center!important;
  justify-content:center!important;
  gap:9px!important;
  min-height:42px!important;
  padding:10px 15px!important;
  border:1px solid rgba(255,184,0,.46)!important;
  border-radius:999px!important;
  color:#09030f!important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.30),rgba(255,255,255,0) 36%),
    linear-gradient(135deg,#ffb800,#ffe15c)!important;
  box-shadow:0 4px 0 #8b4a00,0 10px 18px rgba(0,0,0,.22)!important;
  font-size:14px!important;
  font-weight:900!important;
  line-height:1!important;
  transition:transform .15s ease,box-shadow .15s ease,filter .15s ease!important;
}

.store-sticky-shell .more-btn::after{
  content:"";
  position:absolute;
  top:0;
  left:-70%;
  width:48%;
  height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.62),transparent);
  transform:skewX(-18deg);
  animation:storeButtonLight 3.8s ease-in-out infinite;
  pointer-events:none;
}

@keyframes storeButtonLight{
  0%,52%,100%{left:-70%;opacity:0}
  64%{opacity:1}
  82%{left:125%;opacity:0}
}

.store-sticky-shell .shop-nav-icon{
  filter:brightness(0) saturate(100%)!important;
}

.store-sticky-shell .more-btn:hover,
.store-sticky-shell .more-btn:focus-visible,
.store-sticky-shell .more-wrap.open .more-btn{
  transform:translateY(-1px)!important;
  filter:brightness(1.04)!important;
  box-shadow:0 5px 0 #8b4a00,0 13px 22px rgba(0,0,0,.24)!important;
}

.store-sticky-shell .more-btn:active{
  transform:translateY(3px) scale(.99)!important;
  box-shadow:0 1px 0 #8b4a00,0 6px 12px rgba(0,0,0,.20)!important;
}

.store-arrow{
  margin-left:2px;
  font-size:12px;
}

.store-sticky-shell .more-menu{
  top:calc(100% + 10px)!important;
  right:0!important;
}

@media(max-width:620px){
  .nav-links{gap:7px!important;padding:7px!important}
  .nav-links .shop-nav-link{min-height:38px!important;padding:9px 12px!important;font-size:12px!important}
  .shop-nav-icon{width:16px!important;height:16px!important;flex-basis:16px!important}
  .store-sticky-shell{top:7px;padding-top:6px}
  .store-sticky-shell .more-btn{min-height:38px!important;padding:9px 13px!important;font-size:12px!important}
}

/* Encabezado inspirado en el boceto de Asterea Shop. */
.topbar{
  padding:12px 0 4px!important;
  background:linear-gradient(180deg,#02030a 0%,rgba(7,4,18,.98) 68%,rgba(24,8,50,.94) 100%)!important;
}

.topbar .nav{
  min-height:0!important;
  gap:7px!important;
}

.topbar .brand{
  padding:0!important;
  color:#fff!important;
  font-size:14px!important;
  font-weight:800!important;
  letter-spacing:.25px!important;
  text-transform:none!important;
  text-shadow:0 0 12px rgba(211,39,255,.28)!important;
}

.topbar .brand::before{
  display:none!important;
}

.topbar::after{
  display:none!important;
}

.topbar .category-title{
  position:relative!important;
  min-height:34px!important;
  padding:0 12px 8px!important;
  color:#fff!important;
  font-size:30px!important;
  font-weight:800!important;
  letter-spacing:.2px!important;
  line-height:1!important;
  text-align:center!important;
  text-transform:uppercase!important;
  text-shadow:0 0 18px rgba(211,39,255,.24)!important;
}

.topbar .category-title::after{
  content:""!important;
  position:absolute!important;
  right:20%!important;
  bottom:0!important;
  left:20%!important;
  height:2px!important;
  border-radius:999px!important;
  background:linear-gradient(90deg,transparent,#d327ff,transparent)!important;
  box-shadow:0 0 12px rgba(211,39,255,.72)!important;
}

.topbar .category-title.is-changing{
  animation:none!important;
}

.topbar .category-title.is-changing .category-title-text{
  animation:shopTitleSwap .36s ease both!important;
}

.category-title-text{
  display:inline-block;
}

@keyframes shopTitleSwap{
  0%{opacity:1;transform:translateY(0)}
  48%{opacity:0;transform:translateY(-5px)}
  52%{opacity:0;transform:translateY(5px)}
  100%{opacity:1;transform:translateY(0)}
}

.topbar .nav-links{
  width:min(100%,478px)!important;
  margin-top:2px!important;
  padding:8px 10px 10px!important;
  border:1px solid rgba(211,39,255,.38)!important;
  border-radius:20px 20px 0 0!important;
  background:rgba(18,18,40,.72)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 12px 24px rgba(0,0,0,.22)!important;
}

.shop-nav-panel{
  position:relative;
  isolation:isolate;
  z-index:20;
  width:min(100%,478px);
  margin:0 auto;
}

.shop-nav-panel::before{
  content:"";
  position:absolute;
  top:-5px;
  bottom:-10px;
  left:50%;
  z-index:-1;
  width:100vw;
  transform:translateX(-50%);
  background:linear-gradient(180deg,rgba(24,8,50,.94),rgba(48,14,92,.90));
  pointer-events:none;
}

.shop-home .shop-nav-panel::before{
  display:none;
}

.shop-subpage .shop-nav-panel::before{
  display:none;
}

.shop-nav-panel .nav-links{
  width:100%!important;
  margin-top:2px!important;
  padding:8px 10px 10px!important;
  border:1px solid rgba(211,39,255,.38)!important;
  border-radius:20px 20px 0 0!important;
  background:rgba(18,18,40,.72)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 12px 24px rgba(0,0,0,.22)!important;
}

.topbar .nav-links .shop-nav-link,
.shop-nav-panel .nav-links .shop-nav-link{
  flex:1 1 0!important;
  box-shadow:none!important;
  transform:none!important;
}

.shop-nav-panel .nav-links .shop-nav-link:hover,
.shop-nav-panel .nav-links .shop-nav-link:active{
  box-shadow:none!important;
  transform:none!important;
}

.store-sticky-shell{
  top:8px;
  padding:0 0 9px;
  background:linear-gradient(180deg,rgba(9,7,20,.96),rgba(9,7,20,.82),transparent);
}

.shop-home .store-sticky-shell,
.shop-subpage .store-sticky-shell{
  position:static!important;
}

.shop-home .shop-nav-panel{
  position:relative!important;
  top:auto!important;
  z-index:20;
  margin-top:6px;
}

.shop-subpage .shop-nav-panel{
  margin-top:6px;
}

.shop-nav-panel .store-sticky-shell{
  padding-bottom:0;
  background:transparent;
}

.shop-nav-panel .nav-links .shop-nav-link:last-child::after,
.shop-nav-panel .nav-links .shop-nav-link[href*="discord.gg"]:last-child::after,
.nav-links .shop-nav-link:last-child::after{
  content:none!important;
  display:none!important;
  animation:none!important;
}

.shop-subpage .topbar{
  padding-bottom:0!important;
}

.store-sticky-shell .more-wrap{
  position:relative;
  width:min(100%,478px);
  margin-top:-1px;
  padding:0 10px 10px;
  border:1px solid rgba(211,39,255,.38);
  border-top:0;
  border-radius:0 0 20px 20px;
  background:rgba(18,18,40,.72);
  box-shadow:0 12px 24px rgba(0,0,0,.22);
}

.store-sticky-shell .more-wrap.open{
  z-index:200;
}

.store-sticky-shell .more-btn{
  display:flex!important;
  width:100%!important;
  min-height:40px!important;
}

.store-sticky-shell .more-menu{
  top:calc(100% + 10px)!important;
  right:10px!important;
  left:10px!important;
  z-index:300!important;
  width:auto!important;
  max-height:calc(100vh - 190px);
  overflow-y:auto;
  overscroll-behavior:contain;
  transform:none!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:8px!important;
  padding:10px!important;
}

.network-marquee{
  position:relative;
  z-index:1;
  margin-top:10px!important;
  border-top:3px solid rgba(211,39,255,.82)!important;
  box-shadow:0 -2px 14px rgba(211,39,255,.58)!important;
}

@media(max-width:620px){
  .topbar{padding-top:10px!important}
  .topbar .category-title{min-height:29px!important;font-size:23px!important}
  .topbar .nav-links{gap:7px!important;padding:7px 8px 9px!important}
  .store-sticky-shell{top:6px;padding:0 0 7px}
  .store-sticky-shell .more-wrap{padding:0 8px 9px}
  .store-sticky-shell .more-menu{right:8px!important;left:8px!important;max-height:calc(100vh - 170px);transform:none!important;grid-template-columns:1fr!important}
}