/* ===========================================================================
   PIXELMON PRIME — "THE REALM"  |  webstore theme v3
   Drives the backdrop layers injected by layout.html, the hero and category
   grid in index.html, and the tiered product cards from package-entry.twig.
   Additive only: no checkout/basket rule is overridden.
   ======================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@600;700;900&family=Inter:wght@400;500;600;700;800&display=swap');

:root{
  --void:#05030f; --void-2:#0a0718;
  --panel:rgba(17,11,34,.72); --panel-2:rgba(28,19,54,.72);
  --violet:#8A5CD8; --violet-hot:#B78BFF; --violet-deep:#3d2568;
  --gold:#E9C46A; --gold-hot:#FFE9A8;
  --ink:#F2EDFC; --dim:#A79ec0;
  --line:rgba(138,92,216,.30); --line-hot:rgba(183,139,255,.72);
  --display:'Cinzel',Georgia,serif; --ui:'Inter','Segoe UI',system-ui,sans-serif;
}

html,body{background:var(--void)!important;color:var(--ink)!important;font-family:var(--ui)!important}
body.prime-realm{position:relative;overflow-x:hidden}
.site{position:relative;z-index:2}

/* ══════════════════════════════════════════════ THE BACKDROP ══════════ */
.prime-backdrop{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.prime-backdrop>*{position:absolute;inset:0}

.pb-base{background:
  radial-gradient(120% 90% at 50% 0%, #150c2e 0%, #0a0718 45%, var(--void) 100%)}

/* two counter-rotating nebulae */
.pb-nebula{filter:blur(46px) saturate(130%);will-change:transform}
.pb-nebula-a{
  background:
    radial-gradient(34% 40% at 22% 26%, rgba(138,92,216,.62), transparent 64%),
    radial-gradient(28% 34% at 78% 16%, rgba(233,196,106,.20), transparent 68%);
  animation:pbDriftA 42s ease-in-out infinite alternate}
.pb-nebula-b{
  background:
    radial-gradient(40% 46% at 64% 78%, rgba(84,44,160,.62), transparent 66%),
    radial-gradient(26% 30% at 12% 82%, rgba(183,139,255,.34), transparent 70%);
  animation:pbDriftB 55s ease-in-out infinite alternate}
@keyframes pbDriftA{
  0%{transform:translate3d(-3%,-2%,0) scale(1) rotate(0)}
  100%{transform:translate3d(4%,4%,0) scale(1.18) rotate(6deg)}}
@keyframes pbDriftB{
  0%{transform:translate3d(3%,2%,0) scale(1.08) rotate(0)}
  100%{transform:translate3d(-4%,-3%,0) scale(1) rotate(-7deg)}}

/* slow sweeping aurora */
.pb-aurora{left:-45%;right:-45%;top:-40%;height:180%;inset:auto;
  background:conic-gradient(from 200deg at 50% 50%,
    transparent 0deg, rgba(138,92,216,.30) 38deg, transparent 92deg,
    rgba(233,196,106,.14) 148deg, transparent 196deg,
    rgba(120,60,200,.26) 276deg, transparent 338deg);
  filter:blur(70px);animation:pbSpin 60s linear infinite;will-change:transform}
@keyframes pbSpin{to{transform:rotate(360deg)}}

/* god-rays falling from the top */
.pb-beams{
  background:repeating-linear-gradient(100deg,
    transparent 0 42px, rgba(183,139,255,.055) 42px 46px, transparent 46px 96px);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,transparent 62%);
          mask-image:linear-gradient(180deg,#000 0%,transparent 62%);
  animation:pbBeams 26s linear infinite;opacity:.75}
@keyframes pbBeams{to{transform:translate3d(-96px,0,0)}}

/* three parallax star sheets */
.pb-stars{background-repeat:repeat;will-change:background-position}
.pb-stars-far{
  background-image:
    radial-gradient(1px 1px at 30px 40px,rgba(255,255,255,.75),transparent),
    radial-gradient(1px 1px at 160px 120px,rgba(200,180,255,.6),transparent),
    radial-gradient(1px 1px at 260px 220px,rgba(255,255,255,.55),transparent);
  background-size:320px 300px;animation:pbStars 260s linear infinite;opacity:.55}
.pb-stars-mid{
  background-image:
    radial-gradient(1.4px 1.4px at 70px 90px,rgba(255,255,255,.9),transparent),
    radial-gradient(1.3px 1.3px at 220px 40px,rgba(255,240,200,.8),transparent),
    radial-gradient(1.2px 1.2px at 130px 240px,rgba(183,139,255,.85),transparent);
  background-size:380px 360px;animation:pbStars 170s linear infinite;opacity:.75}
.pb-stars-near{
  background-image:
    radial-gradient(1.9px 1.9px at 110px 70px,#fff,transparent),
    radial-gradient(1.7px 1.7px at 300px 200px,rgba(255,233,168,.95),transparent);
  background-size:460px 420px;animation:pbStars 110s linear infinite, pbTwinkle 6s ease-in-out infinite alternate}
@keyframes pbStars{to{background-position:0 900px}}
@keyframes pbTwinkle{from{opacity:.5}to{opacity:1}}

/* faint arcane grid */
.pb-grid{
  background-image:
    linear-gradient(rgba(138,92,216,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(138,92,216,.05) 1px,transparent 1px);
  background-size:78px 78px;
  -webkit-mask-image:radial-gradient(78% 62% at 50% 26%,#000,transparent 88%);
          mask-image:radial-gradient(78% 62% at 50% 26%,#000,transparent 88%);
  animation:pbGrid 40s linear infinite}
@keyframes pbGrid{to{background-position:78px 78px}}

.pb-canvas{width:100%;height:100%;display:block}
.pb-scan{background:repeating-linear-gradient(180deg,rgba(255,255,255,.045) 0 1px,transparent 1px 3px);opacity:.20}
.pb-vignette{background:radial-gradient(125% 95% at 50% 38%,transparent 52%,rgba(0,0,0,.80) 100%)}

/* ═════════════════════════════════════════════════ HEADER / NAV ══════ */
.site-header{
  background:linear-gradient(180deg,rgba(10,7,24,.90),rgba(5,3,15,.42))!important;
  border-bottom:1px solid transparent!important;backdrop-filter:blur(18px) saturate(130%);position:relative}
.site-header::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:linear-gradient(90deg,transparent,var(--violet),var(--gold),var(--violet),transparent);
  background-size:220% 100%;animation:pbSweep 8s linear infinite}
@keyframes pbSweep{0%{background-position:0 0}100%{background-position:220% 0}}
.site-title img{filter:drop-shadow(0 0 26px rgba(138,92,216,.55))}
.site-title a{font-family:var(--display)!important;letter-spacing:.16em}

.site-navigation,.navigation-vertical{background:transparent!important;border:0!important}
.navigation-list a{position:relative;overflow:hidden;color:var(--dim)!important;
  font-weight:650;font-size:12.5px;letter-spacing:.15em;text-transform:uppercase;
  padding:12px 15px!important;border-radius:10px;border:1px solid transparent;
  transition:color .2s,background .2s,border-color .2s,transform .2s,box-shadow .2s}
.navigation-list a::after{content:'';position:absolute;inset:0;transform:translateX(-120%);
  background:linear-gradient(90deg,transparent,rgba(183,139,255,.26),transparent);transition:transform .55s}
.navigation-list a:hover::after{transform:translateX(120%)}
.navigation-list a:hover{color:#fff!important;background:rgba(138,92,216,.14);
  border-color:var(--line);transform:translateX(4px);box-shadow:0 0 26px -10px var(--violet)}
.navigation-list .active>a,.navigation-list .link-active{color:#fff!important;
  background:rgba(138,92,216,.20);border-color:var(--line-hot)!important;
  box-shadow:inset 3px 0 0 var(--violet-hot),0 0 30px -12px var(--violet-hot)}

/* ══════════════════════════════════════════════════════ THE HERO ═════ */
.prime-hero{position:relative;padding:96px 24px 74px;text-align:center;z-index:2}
.prime-hero-inner{max-width:1140px;margin:0 auto}
.prime-eyebrow{margin:0 0 20px;color:var(--violet-hot);font-size:10.5px;font-weight:750;
  letter-spacing:.5em;text-transform:uppercase}
.prime-hero-title{margin:0;font-family:var(--display);font-weight:900;line-height:1.06;
  font-size:clamp(30px,5.4vw,62px)}
.prime-hero-title span{display:block;text-wrap:balance;
  background:linear-gradient(96deg,#fff 8%,var(--violet-hot) 44%,var(--gold-hot) 78%,#fff 100%);
  background-size:260% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:pbTitle 11s linear infinite;filter:drop-shadow(0 0 30px rgba(138,92,216,.45))}
.prime-hero-title .l2{animation-delay:-3s}
@keyframes pbTitle{0%{background-position:0 0}100%{background-position:260% 0}}
.prime-hero-sub{margin:22px auto 0;max-width:620px;color:var(--dim);font-size:16px;line-height:1.75}
.prime-hero-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:34px}
.prime-btn{display:inline-block;padding:14px 30px;border-radius:11px;font-weight:750;
  font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;transition:.2s}
.prime-btn-solid{color:#fff;border:1px solid var(--line-hot);
  background:linear-gradient(110deg,var(--violet-deep),var(--violet) 48%,var(--violet-hot));
  background-size:220% 100%;box-shadow:0 14px 34px rgba(138,92,216,.4)}
.prime-btn-solid:hover{transform:translateY(-3px);background-position:100% 0;
  box-shadow:0 22px 52px rgba(138,92,216,.6)}
.prime-btn-ghost{color:#e6dcff;border:1px solid var(--line-hot);background:rgba(138,92,216,.10)}
.prime-btn-ghost:hover{color:#fff;border-color:var(--line-hot);background:rgba(138,92,216,.14)}
/* the platform's button reset makes .ip block-level, so text-align alone
   leaves it pinned to the left edge — centre the row itself instead */
.prime-hero-ip{display:flex;align-items:center;justify-content:center;gap:10px;
  flex-wrap:wrap;margin:26px 0 0;font-size:12px;color:var(--dim);letter-spacing:.1em}
.prime-hero-ip .lbl{text-transform:uppercase;margin-right:0;opacity:.7}
.prime-hero-ip .ip{background:rgba(0,0,0,.4);border:1px solid var(--line);color:var(--gold);
  padding:8px 15px;border-radius:8px;font-family:var(--ui);font-weight:700;cursor:pointer}
.prime-hero-ip .ip:hover{border-color:var(--gold);box-shadow:0 0 22px -6px var(--gold)}
.prime-hero-fade{position:absolute;left:0;right:0;bottom:-1px;height:120px;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(5,3,15,.55))}

/* ══════════════════════════════════════════════ CATEGORY GRID ════════ */
.prime-cats-wrap{max-width:1180px;margin:0 auto;padding:8px 24px 10px;position:relative;z-index:2}
.prime-section-title{text-align:center;margin:0 0 30px;font-family:var(--display);
  font-size:13px;letter-spacing:.4em;text-transform:uppercase;color:var(--dim);
  display:flex;align-items:center;gap:18px}
.prime-section-title::before,.prime-section-title::after{content:'';flex:1;height:1px;
  background:linear-gradient(90deg,transparent,var(--line),transparent)}

/* Six categories: force an even row so nothing ever orphans onto its own
   line. Steps down to 3 then 2 rather than leaving a lone card stranded. */
.site-home-categories.prime-cats{display:grid!important;gap:16px;
  grid-template-columns:repeat(6,minmax(0,1fr));justify-items:stretch}
@media (max-width:1180px){
  .site-home-categories.prime-cats{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:660px){
  .site-home-categories.prime-cats{grid-template-columns:repeat(2,minmax(0,1fr))}}
.prime-cat{position:relative;overflow:hidden;display:flex!important;flex-direction:column;
  align-items:center;gap:12px;padding:26px 16px 20px;border-radius:18px;text-decoration:none;
  background:linear-gradient(168deg,var(--panel-2),var(--panel));border:1px solid var(--line);
  backdrop-filter:blur(10px);box-shadow:0 20px 50px rgba(0,0,0,.6);
  transition:transform .3s cubic-bezier(.16,.9,.3,1),border-color .3s,box-shadow .3s;
  animation:pbRise .6s both;animation-delay:var(--delay,0ms)}
@keyframes pbRise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.prime-cat:hover{transform:translateY(-9px);border-color:var(--line-hot);
  box-shadow:0 32px 70px rgba(0,0,0,.72),0 0 44px -14px var(--violet-hot)}
.prime-cat-glow{position:absolute;top:-110px;left:50%;transform:translateX(-50%);
  width:280px;height:200px;background:radial-gradient(closest-side,var(--violet-hot),transparent);
  opacity:0;transition:opacity .35s;pointer-events:none}
.prime-cat:hover .prime-cat-glow{opacity:.3}
.prime-cat-art{display:grid;place-items:center;width:74px;height:74px;border-radius:16px;
  background:linear-gradient(150deg,rgba(138,92,216,.24),rgba(10,7,24,.6));
  border:1px solid var(--line);overflow:hidden}
.prime-cat-art .image{max-width:56px;max-height:56px;transition:transform .4s}
.prime-cat:hover .prime-cat-art .image{transform:scale(1.12) rotate(-3deg)}
.prime-cat-name{font-family:var(--display);font-size:14px;letter-spacing:.09em;
  text-transform:uppercase;color:#fff;text-align:center;line-height:1.3}
.prime-cat-go{font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--violet-hot);
  opacity:0;transform:translateY(-4px);transition:.28s}
.prime-cat:hover .prime-cat-go{opacity:1;transform:none}

/* ══════════════════════════════════════════ PRODUCTS + LADDER ════════ */
.prime-cat-head{display:flex;align-items:baseline;gap:16px;margin:6px 0 22px}
.prime-cat-title{margin:0;font-family:var(--display);font-size:clamp(24px,3.4vw,38px);
  letter-spacing:.05em;text-transform:uppercase;
  background:linear-gradient(96deg,#fff,var(--violet-hot) 55%,var(--gold-hot));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.prime-cat-count{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--dim)}

.store-product.prime-card{position:relative;overflow:hidden;border-radius:18px!important;
  background:linear-gradient(168deg,var(--panel-2),var(--panel))!important;
  border:1px solid var(--line)!important;backdrop-filter:blur(10px);
  box-shadow:0 20px 52px rgba(0,0,0,.62),inset 0 1px 0 rgba(255,255,255,.05);
  transition:transform .3s cubic-bezier(.16,.9,.3,1),border-color .3s,box-shadow .3s;
  animation:pbRise .6s both;animation-delay:var(--delay,0ms);--a:var(--violet)}
.prime-card:hover{transform:translateY(-10px) scale(1.014);border-color:var(--a)!important;
  box-shadow:0 34px 76px rgba(0,0,0,.76),0 0 48px -12px var(--a)}
.prime-card-rail{position:absolute;top:0;left:0;right:0;height:3px;z-index:3;
  background:linear-gradient(90deg,transparent,var(--a),transparent);
  background-size:200% 100%;animation:pbSweep 5s linear infinite}
.prime-card-halo{position:absolute;top:-120px;left:50%;transform:translateX(-50%);
  width:320px;height:230px;pointer-events:none;
  background:radial-gradient(closest-side,var(--a),transparent);opacity:0;transition:opacity .35s}
.prime-card:hover .prime-card-halo{opacity:.26}
.prime-card-sheen{position:absolute;inset:0;transform:translateX(-130%) skewX(-18deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.24),transparent);transition:transform .7s}
.prime-card:hover .prime-card-sheen{transform:translateX(130%) skewX(-18deg)}
.prime-card .image-link{position:relative;overflow:hidden;border-radius:13px;display:block;
  background:linear-gradient(150deg,color-mix(in srgb,var(--a) 26%,#0b0819),#090616)}
.prime-card .image{transition:transform .5s cubic-bezier(.16,.9,.3,1)}
.prime-card:hover .image{transform:scale(1.09) rotate(-1deg)}
.prime-card .product-title,.prime-card .product-title a{font-family:var(--display)!important;
  font-weight:700!important;letter-spacing:.07em;text-transform:uppercase;color:#fff!important;
  font-size:15px!important;transition:color .2s,text-shadow .2s}
.prime-card:hover .product-title a{color:var(--a)!important;text-shadow:0 0 20px var(--a)}
.prime-card .price{font-family:var(--ui)!important;font-weight:800!important;font-size:22px!important;
  color:var(--gold)!important;animation:pbPrice 3.6s ease-in-out infinite alternate}
@keyframes pbPrice{from{text-shadow:0 0 14px rgba(233,196,106,.26)}
                   to{text-shadow:0 0 30px rgba(233,196,106,.6)}}

/* the ascension ladder — tier accents, driven by the index the template passes */
.prime-card[data-tier="0"]{--a:#F6EBC6}
.prime-card[data-tier="1"]{--a:#7FE3E0}
.prime-card[data-tier="2"]{--a:#8A5CD8}
.prime-card[data-tier="3"]{--a:#E9C46A}
.prime-card[data-tier="4"]{--a:#FFFFFF}
.prime-card[data-tier="5"]{--a:#B78BFF}
.prime-card.prime-apex{border-color:var(--gold)!important}
.prime-card.prime-apex .prime-card-rail{height:4px;
  background:linear-gradient(90deg,var(--violet),var(--gold),#fff,var(--gold),var(--violet));
  background-size:300% 100%;animation:pbSweep 3.4s linear infinite}
.prime-card.prime-apex .prime-card-halo{opacity:.14}
.prime-card-crown{position:absolute;top:13px;right:13px;z-index:4;font-size:9px;font-weight:800;
  letter-spacing:.2em;text-transform:uppercase;padding:5px 10px;border-radius:6px;
  color:var(--gold-hot);border:1px solid var(--gold);background:rgba(0,0,0,.55);
  box-shadow:0 0 20px -6px var(--gold)}

/* ═══════════════════════════════════════════════════════ BUTTONS ═════ */
.btn-primary,.product-actions .add{position:relative;overflow:hidden;
  background:linear-gradient(110deg,var(--violet-deep),var(--violet) 46%,var(--violet-hot))!important;
  background-size:220% 100%!important;border:1px solid var(--line-hot)!important;color:#fff!important;
  font-weight:750!important;letter-spacing:.13em;text-transform:uppercase;font-size:12px!important;
  border-radius:10px!important;box-shadow:0 12px 30px rgba(138,92,216,.34);
  transition:transform .18s,box-shadow .18s,background-position .5s}
.btn-primary:hover,.product-actions .add:hover{transform:translateY(-3px);background-position:100% 0!important;
  box-shadow:0 20px 46px rgba(138,92,216,.58)}
.btn-tertiary,.btn-glyph,.btn-icon{background:rgba(255,255,255,.05)!important;
  border:1px solid var(--line)!important;color:var(--dim)!important;border-radius:9px!important}
.btn-tertiary:hover,.btn-glyph:hover,.btn-icon:hover{color:#fff!important;
  border-color:var(--line-hot)!important;background:rgba(138,92,216,.18)!important}
.quantity-field,.quantity{background:rgba(0,0,0,.42)!important;border:1px solid var(--line)!important;
  color:var(--ink)!important;border-radius:9px!important}

/* ═══════════════════════════════════════════════ SIDEBAR/WIDGETS ═════ */
.widget{background:linear-gradient(168deg,var(--panel-2),var(--panel))!important;
  border:1px solid var(--line)!important;border-radius:16px!important;
  backdrop-filter:blur(10px);box-shadow:0 18px 44px rgba(0,0,0,.55);overflow:hidden}
.widget-title{font-family:var(--display)!important;text-transform:uppercase;letter-spacing:.2em;
  font-size:12px!important;color:var(--violet-hot)!important;border-bottom:1px solid var(--line)!important}
.widget-content{color:var(--dim)!important;font-size:13px}
.purchase{border-radius:11px;transition:background .18s,transform .18s}
.purchase:hover{background:rgba(138,92,216,.14);transform:translateX(3px)}
.purchase .username{color:var(--ink)!important;font-weight:650}
.purchase .avatar img{border-radius:9px;border:1px solid var(--line)}
.widget-top-donator:has(.empty){display:none!important}

/* ══════════════════════════════════════════════════════ PROSE ════════ */
.prime-prose,.store-text,.text-content{color:var(--dim)!important;line-height:1.85;font-size:15.5px;
  text-align:left}
.prime-prose h1,.store-text h1{font-family:var(--display)!important;
  font-size:clamp(28px,4.4vw,48px)!important;line-height:1.1;text-align:left;
  background:linear-gradient(96deg,#fff 10%,var(--violet-hot) 48%,var(--gold-hot) 84%);
  -webkit-background-clip:text;background-clip:text;color:transparent!important}
.prime-prose h2,.store-text h2{font-family:var(--display)!important;font-size:20px!important;
  color:var(--violet-hot)!important;text-transform:uppercase;letter-spacing:.15em;
  margin-top:2.2em;padding-left:16px;position:relative;text-align:left}
.prime-prose h2::before,.store-text h2::before{content:'';position:absolute;left:0;top:10%;
  height:80%;width:3px;border-radius:3px;background:linear-gradient(180deg,var(--violet-hot),var(--gold));
  box-shadow:0 0 16px var(--violet)}
.prime-prose strong,.store-text strong{color:var(--gold)!important}
.prime-prose a,.store-text a{color:var(--violet-hot)!important;text-decoration:none;
  border-bottom:1px solid var(--line-hot)}
.prime-prose a:hover,.store-text a:hover{color:var(--gold)!important;border-color:var(--gold)}

/* ═══════════════════════════════════════════════════════ FOOTER ══════ */
.site-footer{background:linear-gradient(180deg,transparent,rgba(5,3,15,.85))!important;
  border-top:1px solid var(--line)!important;position:relative;z-index:2}
.site-footer .copyright{color:var(--dim)!important;font-size:12px}

/* ══════════════════════════════════════════════════════ POLISH ══════ */
::selection{background:rgba(138,92,216,.5);color:#fff}
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:#070511}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--violet-hot),var(--violet-deep));
  border-radius:9px;border:3px solid #070511}

/* ══════════════════════════════════════ HEADER — KILL THE 355px BOX ══ */
/*
  Exo hard-codes `.site-header-inner { height: 355px }` and absolutely
  positions the logo, the login button and the menu toggle inside it. That
  empty block is the "box" at the top of every page. Everything below
  dismantles it and rebuilds the row as a normal flex bar, WITHOUT touching
  the header markup (Tebex's own basket/login logic stays untouched).
*/
.site-header .site-header-inner{
  height:auto!important;min-height:0!important;
  padding:18px 26px!important;margin:0 auto!important;max-width:1340px;
  display:grid!important;grid-template-columns:1fr auto 1fr;align-items:center!important;
  gap:14px!important;position:relative!important;
  background:none!important;border:0!important;box-shadow:none!important}

/* pull every absolutely-positioned child back into the flow */
.site-header .site-header-inner .site-title,
.site-header .site-header-inner .log-in,
.site-header .site-header-inner .user-actions,
.site-header .site-header-inner .actions,
.site-header .site-header-inner .info{
  position:static!important;inset:auto!important;top:auto!important;right:auto!important;
  left:auto!important;bottom:auto!important;margin:0!important}

/* the logo: CENTRED and full-size, in its own grid column */
.site-header .site-header-inner .site-title{
  grid-column:2;justify-self:center;
  width:auto!important;height:auto!important;
  line-height:1!important;font-size:30px!important;text-align:center!important}
.site-header .site-header-inner .site-title img{
  max-height:104px!important;max-width:420px!important;width:auto;margin:0 auto!important;
  object-fit:contain;display:block;filter:drop-shadow(0 0 26px rgba(138,92,216,.55));
  transition:transform .25s,filter .25s}
.site-header .site-header-inner .site-title a:hover img{
  transform:scale(1.04);filter:drop-shadow(0 0 34px rgba(183,139,255,.8))}

/* server + discord chips sit inline, no absolute art, no fixed 33% width */
.site-header .site-header-inner .info{
  order:2;display:inline-flex!important;align-items:center;gap:9px;
  width:auto!important;max-width:none!important;padding:0!important;line-height:1.2!important;
  background:none!important;border:0!important;box-shadow:none!important}
.site-header .site-header-inner .info .image{
  position:static!important;width:22px!important;height:22px!important;margin:0!important;
  top:auto!important;left:auto!important;right:auto!important;bottom:auto!important;opacity:.85}
.site-header .site-header-inner .info .title{
  font-size:11.5px!important;line-height:1.2!important;color:var(--dim)!important;
  letter-spacing:.08em;font-weight:650}
.site-header .site-header-inner .info .action{
  font-size:11px!important;color:var(--violet-hot)!important;line-height:1.2!important}
.site-header .site-header-inner .info.discord{text-align:left!important}

/* login / basket: right column, proper solid button */
.site-header .site-header-inner .log-in,
.site-header .site-header-inner .user-actions{
  grid-column:3;justify-self:end;display:flex!important;align-items:center;gap:10px}
.site-header .site-header-inner .log-in{
  padding:12px 26px!important;border-radius:10px!important;
  font-size:12px!important;letter-spacing:.14em;text-transform:uppercase;font-weight:750!important;
  color:#fff!important;border:1px solid var(--line-hot)!important;
  background:linear-gradient(110deg,var(--violet-deep),var(--violet) 48%,var(--violet-hot))!important;
  background-size:200% 100%!important;box-shadow:0 10px 26px rgba(138,92,216,.34);
  transition:transform .18s,box-shadow .18s,background-position .45s}
.site-header .site-header-inner .log-in:hover{
  transform:translateY(-2px);background-position:100% 0!important;
  box-shadow:0 18px 40px rgba(138,92,216,.55)}
.site-header .site-header-inner .actions{grid-column:1;justify-self:start}
.site-header .site-header-inner .user-name{display:inline-flex!important}
.site-header .site-header-inner .info{grid-column:1/-1;justify-self:center;order:9}
@media (max-width:820px){
  .site-header .site-header-inner{grid-template-columns:auto 1fr auto;padding:12px 14px!important}
  .site-header .site-header-inner .site-title img{max-height:64px!important}
}

/* ═════════════════════════════ PRODUCT ROWS — CLEAN ALIGNMENT ════════ */
/* Tebex's list/row display puts image, title and actions in a line; this
   pins them to a real grid so every row lines up on the same columns. */
.store-products-list .prime-card,
.store-products-wide .prime-card,
.store-products-rows .prime-card{
  display:grid!important;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center!important;
  gap:22px;padding:18px 22px!important}
.store-products-list .prime-card .image-link,
.store-products-wide .prime-card .image-link,
.store-products-rows .prime-card .image-link{
  width:64px;height:64px;flex:0 0 auto;display:grid;place-items:center;margin:0!important}
.store-products-list .prime-card .image,
.store-products-wide .prime-card .image,
.store-products-rows .prime-card .image{max-width:44px;max-height:44px}
.store-products-list .prime-card .product-title,
.store-products-wide .prime-card .product-title,
.store-products-rows .prime-card .product-title{margin:0!important;text-align:left!important;
  display:flex;align-items:center;min-height:44px}
.store-products-list .prime-card .product-actions,
.store-products-wide .prime-card .product-actions,
.store-products-rows .prime-card .product-actions{
  display:flex!important;align-items:center!important;justify-content:flex-end!important;
  gap:18px;margin:0!important;flex-wrap:nowrap;min-width:280px}
.store-products-list .prime-card .price,
.store-products-wide .prime-card .price,
.store-products-rows .prime-card .price{margin:0!important;white-space:nowrap;text-align:right;
  min-width:92px}
.store-products-list .prime-card .btn-primary,
.store-products-wide .prime-card .btn-primary,
.store-products-rows .prime-card .btn-primary,
.store-products-list .prime-card .add,
.store-products-wide .prime-card .add,
.store-products-rows .prime-card .add{
  width:auto!important;min-width:172px;text-align:center;padding:12px 22px!important;margin:0!important}
.store-products-list .prime-card .quantity-field,
.store-products-wide .prime-card .quantity-field,
.store-products-rows .prime-card .quantity-field{min-width:172px;margin:0!important}
.prime-card.prime-apex .prime-card-crown{top:9px;right:9px}

/* grid display types get even cards regardless of content length */
.store-products-grid .prime-card,.prime-grid.store-products-grid .prime-card{
  display:flex!important;flex-direction:column;align-items:center;text-align:center;gap:12px}
.store-products-grid .prime-card .product-actions{width:100%;display:flex!important;
  flex-direction:column;align-items:stretch;gap:10px;margin-top:auto!important}
.store-products-grid .prime-card .price{text-align:center}

@media (max-width:900px){
  .prime-hero{padding:66px 20px 50px}
  .pb-beams,.pb-scan,.pb-grid{display:none}
  .prime-card:hover,.prime-cat:hover{transform:none}
  .prime-header-inner{flex-wrap:wrap;gap:12px;padding:12px 16px!important}
  .prime-chip-ip{display:none}
  .store-products-list .prime-card,
  .store-products-wide .prime-card,
  .store-products-rows .prime-card{grid-template-columns:auto minmax(0,1fr);gap:14px}
  .store-products-list .prime-card .product-actions,
  .store-products-wide .prime-card .product-actions,
  .store-products-rows .prime-card .product-actions{
    grid-column:1/-1;justify-content:space-between!important;min-width:0}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .pb-canvas{display:none}
}

/* ══ PRIME SIGILS ══════════════════════════════════════════════════════════
   Ranks, Aura Essence and most Crate Keys carry no uploaded artwork, so the
   platform falls back to a generic shopping-bag icon. These replace that
   fallback with a tinted sigil: a crown for ranks, an elemental orb for
   essences, a key for crate keys, a gem for everything else. Tinted from the
   tier accent (--a) where the card ladder already sets one. */
.image-default{
  --sig-gem:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 1.6 2.7 9 12 22.4 21.3 9z'/%3E%3C/svg%3E");
  --sig-crown:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M3 19.6h18l1.7-12.2-6.2 4.6L12 2.6 7.5 12 1.3 7.4z'/%3E%3C/svg%3E");
  --sig-orb:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2.6a9.4 9.4 0 1 0 .01 0z'/%3E%3C/svg%3E");
  --sig-key:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M14.6 1.8a6.6 6.6 0 0 0-6.3 8.6L1.9 16.8V22h5.3v-2.7h2.6v-2.6h2.6l1.3-1.3a6.6 6.6 0 1 0 .9-13.6zm1.8 3.3a1.95 1.95 0 1 1 0 3.9 1.95 1.95 0 0 1 0-3.9z'/%3E%3C/svg%3E");
  --sig:var(--sig-gem);
  --c1:#b98cff; --c2:#63dcff;
  width:86px;height:86px;
  background:
    radial-gradient(circle at 33% 25%,rgba(255,255,255,.78),rgba(255,255,255,0) 40%),
    radial-gradient(circle at 50% 118%,color-mix(in srgb,var(--c1) 78%,#fff),transparent 58%),
    linear-gradient(155deg,var(--c1),var(--c2))!important;
  -webkit-mask:var(--sig) center/contain no-repeat;mask:var(--sig) center/contain no-repeat;
  filter:drop-shadow(0 0 13px color-mix(in srgb,var(--c1) 60%,transparent));
  transition:transform .5s cubic-bezier(.16,.9,.3,1)}
/* the platform paints its fallback bag as a pseudo-element inside this div,
   which would otherwise ride along inside the mask */
.image-default::before,.image-default::after{content:none!important;display:none!important}
.prime-card:hover .image-default{transform:scale(1.09) rotate(-2deg)}
.prime-card .image-default{--c1:var(--a,#b98cff);
  --c2:color-mix(in srgb,var(--a,#b98cff) 38%,#1b0b3c);
  width:86px!important;margin-left:auto!important;margin-right:auto!important}
.prime-cat-art .image-default{width:52px!important;height:52px!important}
.store-products-list .prime-card .image-default,
.store-products-wide .prime-card .image-default,
.store-products-rows .prime-card .image-default{width:44px;height:44px}

/* glyph by what the thing is */
.image-default[data-sig*="rank"]{--sig:var(--sig-crown)}
.image-default[data-sig*="essence"]{--sig:var(--sig-orb)}
.image-default[data-sig*="key"]{--sig:var(--sig-key)}

/* the eighteen elements, in their own colours */
.image-default[data-sig*="normal"]  {--c1:#c6c5a4;--c2:#8f8e6c}
.image-default[data-sig*="fire"]    {--c1:#ff9d4a;--c2:#e2431a}
.image-default[data-sig*="water"]   {--c1:#7fa8ff;--c2:#3a63d8}
.image-default[data-sig*="electric"]{--c1:#ffe45c;--c2:#e0a800}
.image-default[data-sig*="grass"]   {--c1:#95e169;--c2:#4e9c2c}
.image-default[data-sig*="ice"]     {--c1:#bdf1ee;--c2:#69c2be}
.image-default[data-sig*="fighting"]{--c1:#e8574f;--c2:#9c1a15}
.image-default[data-sig*="poison"]  {--c1:#c85fc6;--c2:#7c2379}
.image-default[data-sig*="ground"]  {--c1:#f0d189;--c2:#c09742}
.image-default[data-sig*="flying"]  {--c1:#c4b2ff;--c2:#8a6de0}
.image-default[data-sig*="psychic"] {--c1:#ff7fa6;--c2:#e02f66}
.image-default[data-sig*="bug"]     {--c1:#c4d92f;--c2:#7d8c10}
.image-default[data-sig*="rock"]    {--c1:#d3c169;--c2:#93802a}
.image-default[data-sig*="ghost"]   {--c1:#9b7fc4;--c2:#584071}
.image-default[data-sig*="dragon"]  {--c1:#9a63ff;--c2:#4a13d6}
.image-default[data-sig*="dark"]    {--c1:#9c8574;--c2:#4a382a}
.image-default[data-sig*="steel"]   {--c1:#d6d6ea;--c2:#8f8fa8}
.image-default[data-sig*="fairy"]   {--c1:#f0a6c6;--c2:#c25a8c}

/* crate keys read as metal, not as their name's element */
.image-default[data-sig*="uncommon crate"]{--c1:#a8e6a0;--c2:#4e8f52}
.image-default[data-sig*="superior crate"]{--c1:#8fd4ff;--c2:#2f7fc2}
.image-default[data-sig*="prime crate"]   {--c1:#ffd98a;--c2:#e08c1f}
.image-default[data-sig*="rave crate"]    {--c1:#ff8ae0;--c2:#8a2fd6}
.image-default[data-sig*="aura key"]      {--c1:#c9a6ff;--c2:#5f2fd6}