/* XENO SHOP V10 — lightweight premium storefront.
   No backdrop blur, no giant blurred orbs, no filter animation.
   Admin panel remains excluded by .admin-shell. */
body.xeno-storefront-premium{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
body.xeno-storefront-premium:not(.admin-shell){isolation:isolate;--xeno-panel:rgba(8,10,14,.90);--xeno-border:rgba(255,255,255,.09);--xeno-muted:rgba(226,232,240,.64)}
body.xeno-storefront-premium.xeno-storefront-bg-on:not(.admin-shell){background:#05070a!important;background-image:none!important}
body.xeno-storefront-premium:not(.admin-shell) h1,body.xeno-storefront-premium:not(.admin-shell) h2,body.xeno-storefront-premium:not(.admin-shell) h3,body.xeno-storefront-premium:not(.admin-shell) h4,body.xeno-storefront-premium:not(.admin-shell) h5,body.xeno-storefront-premium:not(.admin-shell) h6,body.xeno-storefront-premium:not(.admin-shell) .navbar-text-brand,body.xeno-storefront-premium:not(.admin-shell) .section-title,body.xeno-storefront-premium:not(.admin-shell) .card-title{font-family:"Prompt","Noto Sans Thai",system-ui,sans-serif!important;letter-spacing:-.018em;font-weight:700}
body.xeno-storefront-premium:not(.admin-shell) .btn,body.xeno-storefront-premium:not(.admin-shell) .nav-link,body.xeno-storefront-premium:not(.admin-shell) .badge{font-weight:650;letter-spacing:.004em}

.xeno-storefront-background{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;background:#05070a;contain:strict}
.xeno-bg-orb{display:none!important}
.xeno-bg-soften{position:absolute;inset:0;z-index:3;background:rgba(2,4,7,var(--xeno-bg-dim,.48));box-shadow:inset 0 0 120px rgba(0,0,0,.20)}
.xeno-bg-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;transform:none!important;animation:none!important;filter:none!important}
.xeno-bg-pattern{position:absolute;inset:-32px;z-index:1;opacity:.40;will-change:transform;transform:translate3d(0,0,0)}

/* Hacker Terminal — subtle terminal grid, one transform animation only. */
.xeno-storefront-background.preset-hacker{background:linear-gradient(145deg,#020705 0%,#05100b 48%,#020706 100%)}
.preset-hacker .xeno-bg-pattern{background-image:linear-gradient(rgba(70,255,150,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(70,255,150,.045) 1px,transparent 1px),radial-gradient(circle at 76% 20%,rgba(34,197,94,.12),transparent 31%);background-size:44px 44px,44px 44px,100% 100%;animation:xenoBgDrift 26s linear infinite}

/* Cyber Circuit — crisp dark cyan/violet, intentionally restrained. */
.xeno-storefront-background.preset-cyber{background:linear-gradient(145deg,#02070c 0%,#06111a 52%,#080812 100%)}
.preset-cyber .xeno-bg-pattern{background-image:linear-gradient(rgba(96,220,255,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(124,92,255,.045) 1px,transparent 1px),radial-gradient(circle at 20% 24%,rgba(34,211,238,.10),transparent 26%);background-size:54px 54px,54px 54px,100% 100%;animation:xenoBgDrift 32s linear infinite reverse}

/* Red Ops — deep tactical red with thin diagonal data lines. */
.xeno-storefront-background.preset-redops{background:linear-gradient(145deg,#090304 0%,#120508 54%,#070306 100%)}
.preset-redops .xeno-bg-pattern{background-image:repeating-linear-gradient(125deg,transparent 0 46px,rgba(255,88,104,.055) 47px,transparent 48px),radial-gradient(circle at 78% 18%,rgba(239,68,68,.10),transparent 29%);background-size:auto,100% 100%;animation:xenoBgDrift 34s linear infinite}

/* Hologram Core — static radial rings plus extremely slow translation. */
.xeno-storefront-background.preset-hologram{background:radial-gradient(circle at 50% 46%,#071520 0%,#030a11 42%,#020509 100%)}
.preset-hologram .xeno-bg-pattern{inset:0;opacity:.30;background:repeating-radial-gradient(circle at 50% 48%,transparent 0 54px,rgba(105,210,255,.055) 55px,transparent 57px),linear-gradient(90deg,transparent 49.9%,rgba(105,210,255,.05) 50%,transparent 50.1%);animation:none}

/* Digital Void — nearly static premium dark option. */
.xeno-storefront-background.preset-void{background:linear-gradient(150deg,#030508,#070a10 52%,#020306)}
.preset-void .xeno-bg-pattern{opacity:.33;background-image:radial-gradient(circle,rgba(255,255,255,.30) 0 1px,transparent 1.2px),radial-gradient(circle,rgba(120,190,255,.24) 0 1px,transparent 1.2px);background-size:94px 94px,151px 151px;background-position:0 0,38px 21px;animation:xenoBgDrift 46s linear infinite}

@keyframes xenoBgDrift{from{transform:translate3d(0,0,0)}to{transform:translate3d(32px,22px,0)}}

/* Premium surfaces without expensive backdrop-filter. */
body.xeno-storefront-premium:not(.admin-shell) .xez-card{border-color:var(--xeno-border);background:linear-gradient(145deg,rgba(11,14,19,.94),rgba(7,9,13,.92));box-shadow:0 18px 46px rgba(0,0,0,.26),inset 0 1px 0 rgba(255,255,255,.035);backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
body.xeno-storefront-premium:not(.admin-shell) .navbar{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background:rgba(6,8,12,.94)}
body.xeno-storefront-premium:not(.admin-shell) .form-control,body.xeno-storefront-premium:not(.admin-shell) .form-select{box-shadow:none}
body.xeno-storefront-premium:not(.admin-shell) h1,body.xeno-storefront-premium:not(.admin-shell) h2,body.xeno-storefront-premium:not(.admin-shell) h3{text-shadow:none!important}

/* Mobile: static preset background = maximum smoothness. Custom GIF/video still plays by user choice. */
@media(max-width:768px){.xeno-bg-pattern{animation:none!important;will-change:auto}.xeno-bg-soften{box-shadow:none}.xeno-storefront-background{contain:paint}.xeno-bg-pattern{inset:0}}
@media(prefers-reduced-motion:reduce){.xeno-bg-pattern,.xeno-bg-media{animation:none!important;transform:none!important}}