/*
 * Enter any custom CSS here.
 * This file will not be overwritten by theme updates.
 *
 * ── Semantic class hooks (sa-*) ────────────────────────────────────────────
 * Every section, snippet and key element carries a stable `sa-` class you can
 * target with plain CSS — no Tailwind rebuild needed. These classes ship with
 * NO styles of their own; they exist purely as selectors for you to hook onto.
 *
 * Page scope   body.sa-tpl-<template>      e.g. .sa-tpl-product, .sa-tpl-shop
 *              body.sa-no-product-images / .sa-no-category-images when the
 *              matching theme setting is off
 * Chrome       .sa-header .sa-navbar .sa-footer
 *              .sa-navbar-link .sa-navbar-logo .sa-navbar-cart .sa-footer-link
 * Sections     .sa-<component>             e.g. .sa-hero, .sa-features, .sa-faq
 *   variant    .sa-<component>--<variant>  e.g. .sa-hero--split-media
 *   inner      .sa-<component>-title / -subtitle / -eyebrow / -media /
 *              -items / -item / -actions / -link / -price / -badge / -icon
 * Primitives   .sa-btn (+ .sa-btn--<variant>), .sa-section-header
 *              (.sa-section-title / -eyebrow / -subtitle),
 *              .sa-product-card (+ .sa-product-card--<style>,
 *              .sa-product-card-title / -price / -stock / -status / -badges),
 *              .sa-product-form + .sa-add-to-cart, .sa-product-gallery,
 *              .sa-cart-panel + .sa-cart-item, .sa-searchbar, .sa-pagination,
 *              .sa-breadcrumbs, .sa-toasts + .sa-toast, .sa-feedback-card
 *
 * Example — bigger hero heading only on the product page:
 *   .sa-tpl-product .sa-hero-title { font-size: 3rem; }
 * ───────────────────────────────────────────────────────────────────────────
*/

/* RecoilX: consistent dark purple appearance on every storefront page. */
html,html[data-scheme]{color-scheme:dark!important;background:#080a12!important;--cl-background:8,10,18!important;--cl-surface:16,22,36!important;--cl-surface-raised:23,30,48!important;--cl-t-primary:247,248,255!important;--cl-t-muted:170,183,205!important;--cl-border:rgba(182,123,255,.16)!important;--cl-accent:150,62,255!important;--cl-on-accent:255,255,255!important}
body{background:#080a12!important;color:#f7f8ff!important;isolation:isolate}
body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;background:radial-gradient(ellipse at 85% 15%,#963eff18,transparent 45%),radial-gradient(ellipse at 8% 78%,#532cc315,transparent 45%)}
#app{position:relative;z-index:1}.sa-scheme-toggle{display:none!important}
.sa-navbar,.sa-header,.topbar{background:#090b14ec!important;backdrop-filter:blur(18px);border-color:#b67bff26!important}
.sa-footer,.footer{background:#090c16!important;border-color:#b67bff26!important}
.hero{background:linear-gradient(115deg,#090b14 5%,#121026 58%,#281142 100%)!important}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 80% 35%,#963eff3d,transparent 55%),radial-gradient(ellipse at 35% 80%,#4f64ff1a,transparent 50%);animation:rx-aurora 12s ease-in-out infinite alternate}
.hero::after{animation:rx-grid 14s ease-in-out infinite alternate;pointer-events:none}
.hero h1 span,.hero h1 em{background:linear-gradient(100deg,#b67bff,#ddc0ff,#963eff,#b67bff);background-size:250% 100%;background-clip:text;-webkit-background-clip:text;color:transparent;animation:rx-gradient 8s ease-in-out infinite}
.product,.game,.rx-guide-card,.category-panel,.sa-product-card,.sa-product-form{transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease;box-shadow:0 12px 40px #00000024}
@media(hover:hover){.product:hover,.game:hover,.rx-guide-card:hover,.sa-product-card:hover{transform:translateY(-5px);border-color:#b67bff80!important;box-shadow:0 18px 50px #963eff22,0 0 0 1px #963eff18}.product:hover img,.game:hover img{transform:scale(1.035)}.primary:hover,.discord:hover,.sa-btn:hover{box-shadow:0 0 28px #963eff55;transform:translateY(-2px)}}
.product img,.game img{transition:transform .5s ease}.product picture,.game{overflow:hidden}
.primary,.discord,.secondary,.sa-btn{transition:transform .2s ease,box-shadow .2s ease,background-color .2s ease}
.primary,.discord{background:linear-gradient(110deg,#963eff,#7c2ce4)!important;box-shadow:0 5px 22px #963eff24}
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid #c99bff;outline-offset:4px}
.rx-motion-pending{opacity:0;transform:translateY(18px)}.rx-motion-visible{animation:rx-reveal .65s cubic-bezier(.2,.7,.2,1) both}
@keyframes rx-aurora{from{opacity:.6;transform:translate3d(-2%,0,0) scale(1)}to{opacity:1;transform:translate3d(2%,2%,0) scale(1.06)}}
@keyframes rx-grid{from{opacity:.24;transform:translateY(0)}to{opacity:.52;transform:translateY(-12px)}}
@keyframes rx-gradient{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes rx-reveal{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}*,*::before,*::after{animation:none!important;transition:none!important}.rx-motion-pending,.rx-motion-visible{opacity:1!important;transform:none!important}}
/* RecoilX product discovery and motion details. */
.rx-finder{border:1px solid #b67bff35;border-radius:16px;background:linear-gradient(120deg,#14162a,#101624);padding:22px;margin:0 0 25px;box-shadow:0 12px 45px #963eff0a}
.rx-finder-header{display:flex;justify-content:space-between;gap:15px;margin-bottom:18px}.rx-finder-header strong{font-size:19px}.rx-finder-header span{font-size:12px;color:#aab7cd;align-self:center}
.rx-finder-controls{display:grid;grid-template-columns:minmax(200px,2fr) 1fr 1fr;gap:14px}.rx-finder label{display:flex;flex-direction:column;gap:7px;font-size:12px;font-weight:600;color:#c9d2e1}.rx-finder input,.rx-finder select{width:100%;height:46px;background:#0b101c;color:#f7f8ff;border:1px solid #354057;border-radius:10px;padding:0 12px;font:inherit;font-size:14px}.rx-finder input::placeholder{color:#8b99ae}.rx-finder input:focus,.rx-finder select:focus{border-color:#b67bff;box-shadow:0 0 0 3px #963eff18}
.rx-finder-meta{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:14px;color:#aab7cd;font-size:12px}.rx-finder-meta button{color:#cda4ff;background:none;border:0;font-size:12px;text-decoration:underline;text-underline-offset:3px}
.rx-live-product{position:relative}.rx-live-product[hidden],.rx-finder-empty[hidden],.rx-back-top[hidden]{display:none!important}.rx-save-product{position:absolute;top:14px;right:14px;z-index:2;width:40px;height:40px;border-radius:12px;border:1px solid #b67bff60;color:#f4e9ff;background:#0b0e1de8;display:grid;place-items:center;box-shadow:0 4px 15px #0006;transition:transform .2s,background .2s}.rx-save-product span{font-size:26px;line-height:1}.rx-save-product[aria-pressed=true]{background:#963eff;color:white}.rx-save-product:hover{transform:scale(1.08)}
.rx-finder-empty{padding:32px;border:1px dashed #755b98;border-radius:16px;text-align:center;color:#aab7cd}.rx-finder-empty h3{color:#f7f8ff;margin-top:0}
.rx-scroll-progress{position:fixed;inset:0 0 auto;height:3px;background:linear-gradient(90deg,#7f32ed,#ddb9ff);transform-origin:left;transform:scaleX(0);z-index:100;pointer-events:none;box-shadow:0 0 12px #b67bff80}
.rx-back-top{position:fixed;right:24px;bottom:24px;width:45px;height:45px;z-index:45;border:1px solid #b67bff66;border-radius:14px;background:#141629eb;color:white;font-size:24px;box-shadow:0 8px 28px #963eff25;backdrop-filter:blur(12px);transition:transform .2s,box-shadow .2s}.rx-back-top:hover{transform:translateY(-3px);box-shadow:0 8px 28px #963eff55}
.rx-stars{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}.rx-stars span{position:absolute;width:3px;height:3px;border-radius:50%;background:#cda4ff;box-shadow:0 0 12px #b67bff;opacity:.45;animation:rx-sparkle 9s ease-in-out infinite}.hero .shell{z-index:2}
@keyframes rx-sparkle{0%,100%{opacity:.12;transform:translateY(7px) scale(.6)}50%{opacity:.7;transform:translateY(-9px) scale(1.2)}}
.game-copy small,.rx-live-product .tag{color:#c29bff}.rx-live-product .buy{width:100%;text-align:center}.rx-account-section .category-panel{border-color:#963eff40;box-shadow:0 0 45px #963eff0a}
@media(max-width:650px){.rx-finder{padding:16px}.rx-finder-header{display:block}.rx-finder-header span{display:block;margin-top:6px}.rx-finder-controls{grid-template-columns:1fr 1fr}.rx-search-label{grid-column:1/-1}.rx-back-top{right:14px;bottom:18px}.rx-stars span:nth-child(n+7){display:none}}
@media(prefers-reduced-motion:reduce){.rx-stars{display:none}.rx-save-product,.rx-back-top{transition:none}}