@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');

/*
 * 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; }
 * ───────────────────────────────────────────────────────────────────────────
*/

/* Neon Relay: restrained, high-contrast gaming marketplace skin. */
:root {
	--relay-ink: #080a12;
	--relay-line: rgba(145, 161, 199, .16);
	--relay-cyan: #52e6ff;
	--relay-blue: #6577ff;
	--relay-violet: #a879ff;
	--relay-text: #f4f7ff;
	--relay-muted: #9aa6c2;
	--ff-heading: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
	--ff-body: 'DM Sans', ui-sans-serif, system-ui, sans-serif;
	--radius-card: 14px;
	--radius-input: 10px;
	--radius-button: 10px;
	--section-py: 92px;
	--grid-gap: 22px;
}

[data-scheme="dark"], [data-scheme="light"] {
	--cl-background: 8, 10, 18;
	--cl-surface: 16, 20, 33;
	--cl-surface-raised: 21, 27, 43;
	--cl-t-primary: 244, 247, 255;
	--cl-t-muted: 154, 166, 194;
	--cl-border: var(--relay-line);
}

html { background: var(--relay-ink); }
body { color: var(--relay-text); background: radial-gradient(circle at 50% -10%, rgba(101,119,255,.16), transparent 36rem), var(--relay-ink); letter-spacing: .01em; }
body::before { content: ''; position: fixed; inset: 0; pointer-events: none; opacity: .28; background-image: linear-gradient(rgba(82,230,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(82,230,255,.045) 1px, transparent 1px); background-size: 56px 56px; mask-image: linear-gradient(to bottom, #000, transparent 70%); z-index: 0; }
.wrap { width: min(calc(100% - 40px), 1280px); }
.sa-header { background: rgba(8,10,18,.72); backdrop-filter: blur(18px); }
.sa-navbar { position: sticky; top: 0; z-index: 30; }
.sa-navbar--floating-pill { padding-top: .75rem; }
.sa-navbar--floating-pill > div > div { box-shadow: 0 12px 34px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.06); }
.sa-navbar-link { transition: color .2s ease, background-color .2s ease, transform .2s ease; }
.sa-navbar-link:hover { transform: translateY(-1px); }
.sa-navbar > div > div, .sa-navbar > div > .wrap { min-height: 72px; }
.sa-navbar-logo img { filter: drop-shadow(0 0 12px rgba(82,230,255,.24)); }
.sa-navbar-logo span { letter-spacing: -.04em; font-size: 1.08rem; }
.sa-navbar-link { position: relative; }
.sa-navbar-link::after { content: ''; position: absolute; left: 12px; right: 12px; bottom: 3px; height: 2px; background: var(--relay-cyan); transform: scaleX(0); transition: transform .25s ease; transform-origin: left; }
.sa-navbar-link:hover::after, .sa-navbar-link.text-t-primary::after { transform: scaleX(1); }
.sa-navbar-cart { border: 1px solid var(--relay-line); background: rgba(255,255,255,.04); }
.sa-announcement { background: linear-gradient(90deg, #263a9b, #5d3ca4 48%, #147c9c) !important; letter-spacing: .06em; text-transform: uppercase; font-size: .68rem; }
.sa-hero { min-height: 600px; display: flex; align-items: center; isolation: isolate; }
.sa-hero::before { content: ''; position: absolute; width: 34rem; height: 34rem; right: 5%; top: 8%; background: radial-gradient(circle, rgba(82,230,255,.18), transparent 68%); filter: blur(10px); animation: relay-pulse 7s ease-in-out infinite; z-index: -1; }
.sa-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 38%, rgba(167,121,255,.07) 50%, transparent 62%); transform: translateX(-100%); animation: relay-sweep 9s ease-in-out infinite; z-index: -1; }
.sa-hero--centered { min-height: min(760px, calc(100vh - 72px)); }
.sa-hero--centered .wrap { position: relative; }
.sa-hero--centered .wrap::after { content: ''; position: absolute; left: 50%; bottom: -7rem; width: min(62rem, 90vw); height: 12rem; transform: translateX(-50%); border-top: 1px solid rgba(82,230,255,.16); border-radius: 50%; box-shadow: 0 -20px 90px rgba(101,119,255,.12); pointer-events: none; }
.sa-hero-title { max-width: 900px; font-size: clamp(3rem, 7vw, 6.5rem) !important; line-height: .96 !important; letter-spacing: -.065em; }
.sa-hero-eyebrow, .sa-section-eyebrow { color: var(--relay-cyan) !important; letter-spacing: .14em; text-transform: uppercase; font-size: .7rem !important; }
.sa-hero-subtitle { max-width: 620px; font-size: 1.1rem; line-height: 1.7; }
.sa-hero-actions .sa-btn { min-height: 52px; padding-inline: 1.4rem; }
.component.py-section { position: relative; }
.sa-section-header { margin-bottom: 2.6rem; }
.sa-section-title { letter-spacing: -.045em; }
.sa-products, .sa-categories, .sa-features, .sa-stats, .sa-feedbacks, .sa-faq { border-top: 1px solid rgba(145,161,199,.07); }
.sa-product-card, .sa-categories-item, .sa-features-item, .sa-faq-item, .sa-stats-items, .sa-feedback-card { background: linear-gradient(145deg, rgba(21,27,43,.96), rgba(12,15,27,.96)) !important; border-color: var(--relay-line) !important; box-shadow: 0 18px 50px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.035) !important; transition: transform .35s cubic-bezier(.2,.8,.2,1), border-color .35s ease, box-shadow .35s ease; }
.sa-product-card:hover, .sa-categories-item:hover, .sa-features-item:hover { transform: translateY(-7px); border-color: rgba(82,230,255,.42) !important; box-shadow: 0 22px 55px rgba(0,0,0,.3), 0 0 28px rgba(82,230,255,.08) !important; }
.sa-products--carousel .splide__track { padding-block: 10px; }
.sa-products--carousel .splide__arrow, .sa-categories--carousel .splide__arrow { opacity: 1; }
.sa-product-card { overflow: hidden; }
.sa-product-card-title { transition: color .25s ease; }
.sa-product-card:hover .sa-product-card-title { color: var(--relay-cyan) !important; }
.sa-product-card-media img, .sa-categories-item img { transition: transform .6s cubic-bezier(.2,.8,.2,1), filter .4s ease; }
.sa-product-card:hover .sa-product-card-media img, .sa-categories-item:hover img { transform: scale(1.07); filter: saturate(1.15); }
.sa-product-card-media { background: linear-gradient(135deg, rgba(101,119,255,.16), rgba(82,230,255,.05)); }
.sa-product-card-price { color: var(--relay-cyan) !important; }
.sa-page-product-title { font-size: clamp(2.2rem, 5vw, 4.5rem) !important; line-height: 1 !important; letter-spacing: -.055em; }
.sa-page-product-price { color: var(--relay-cyan) !important; font-size: 2rem !important; letter-spacing: -.04em; }
.sa-page-product .bg-surface { background: linear-gradient(145deg, rgba(21,27,43,.98), rgba(12,15,27,.98)) !important; }
.sa-page-product .sa-product-gallery, .sa-page-product .sa-product-form { border-color: var(--relay-line); }
.sa-page-product .sa-add-to-cart { min-height: 54px; background: linear-gradient(110deg, var(--relay-blue), var(--relay-violet)) !important; box-shadow: 0 10px 26px rgba(101,119,255,.24); transition: transform .25s ease, box-shadow .25s ease, filter .25s ease; }
.sa-page-product .sa-add-to-cart:hover { transform: translateY(-2px); filter: saturate(1.15); box-shadow: 0 14px 34px rgba(101,119,255,.38); }
.sa-page-product [class*="border-b"], .sa-page-product [class*="border-theme"] { border-color: var(--relay-line) !important; }
.sa-trust-badges { color: var(--relay-muted); }
.sa-trust-badges-title { color: var(--relay-text) !important; }
.sa-trust-badges-title svg { color: var(--relay-cyan) !important; }
.sa-trust-badges-items { opacity: .78; filter: grayscale(.2); }
.sa-searchbar { filter: drop-shadow(0 10px 20px rgba(0,0,0,.16)); }
.splide__arrow { background: var(--relay-panel-2) !important; border: 1px solid var(--relay-line); color: var(--relay-cyan) !important; }
.sa-btn--primary, .bg-accent-500 { background: linear-gradient(110deg, var(--relay-blue), var(--relay-violet)) !important; box-shadow: 0 9px 24px rgba(101,119,255,.24); }
.sa-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 13px 30px rgba(101,119,255,.38); }
.input, .sa-searchbar input { background: rgba(255,255,255,.045) !important; border-color: var(--relay-line) !important; }
.input:focus, .sa-searchbar input:focus { border-color: var(--relay-cyan) !important; box-shadow: 0 0 0 3px rgba(82,230,255,.12); }
.sa-footer { background: #06070e; border-color: var(--relay-line) !important; }
.sa-footer::before { content: ''; display: block; height: 2px; background: linear-gradient(90deg, transparent, var(--relay-cyan), var(--relay-violet), transparent); opacity: .7; }
.sa-footer-link:hover { color: var(--relay-cyan) !important; }
.sa-features--premium, .sa-feedbacks--premium { isolation: isolate; overflow: hidden; background: radial-gradient(circle at 12% 20%, rgba(101,119,255,.13), transparent 24rem), radial-gradient(circle at 88% 70%, rgba(168,121,255,.1), transparent 25rem); }
.sa-features--premium::before, .sa-feedbacks--premium::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .25; background-image: radial-gradient(rgba(82,230,255,.8) 1px, transparent 1px); background-size: 42px 42px; mask-image: linear-gradient(to bottom, transparent, #000 20%, transparent 90%); animation: relay-drift 18s linear infinite; z-index: -1; }
.sa-features--premium .sa-section-title, .sa-feedbacks--premium .sa-section-title { font-size: clamp(2.5rem, 5vw, 4.5rem); }
.sa-features--premium .sa-section-title .mk, .sa-feedbacks--premium .sa-section-title .mk { color: transparent; background: linear-gradient(100deg, var(--relay-cyan), var(--relay-blue) 48%, var(--relay-violet)); background-clip: text; -webkit-background-clip: text; }
.sa-features-premium-card { position: relative; min-height: 235px; overflow: hidden; background: linear-gradient(145deg, rgba(25,32,57,.74), rgba(10,14,28,.82)) !important; backdrop-filter: blur(14px); transition: transform .35s cubic-bezier(.2,.8,.2,1), border-color .35s ease, box-shadow .35s ease; }
.sa-features-premium-card::after { content: ''; position: absolute; width: 7rem; height: 7rem; right: -3rem; bottom: -3rem; border-radius: 50%; background: rgba(101,119,255,.2); filter: blur(28px); transition: transform .5s ease, opacity .5s ease; opacity: .45; }
.sa-features-premium-card:hover { transform: translateY(-8px) scale(1.015); border-color: rgba(82,230,255,.55) !important; box-shadow: 0 20px 50px rgba(0,0,0,.3), 0 0 34px rgba(101,119,255,.16) !important; }
.sa-features-premium-card:hover::after { transform: scale(2); opacity: .9; }
.sa-features-premium-icon { position: relative; display: inline-flex; width: 3rem; height: 3rem; align-items: center; justify-content: center; border: 1px solid rgba(82,230,255,.25); border-radius: 12px; color: var(--relay-cyan); background: linear-gradient(135deg, rgba(82,230,255,.14), rgba(168,121,255,.16)); box-shadow: 0 0 22px rgba(82,230,255,.1); transition: color .35s ease, box-shadow .35s ease, transform .35s ease; }
.sa-features-premium-card:hover .sa-features-premium-icon { color: #fff; transform: translateY(-2px); box-shadow: 0 0 28px rgba(82,230,255,.35); }
.sa-features-premium-indicator { color: var(--relay-cyan); }
.sa-features-premium-indicator::before { content: ''; width: .4rem; height: .4rem; border-radius: 50%; background: var(--relay-cyan); box-shadow: 0 0 10px var(--relay-cyan); }
.sa-feedbacks--premium .splide__track { padding-block: 8px; }
.sa-feedbacks--premium .splide__arrow { opacity: 1; width: 2.75rem; height: 2.75rem; }
.sa-feedbacks--premium .splide__pagination { position: static; margin-top: 1.25rem; }
.sa-feedbacks--premium .splide__pagination__page { background: rgba(154,166,194,.4); }
.sa-feedbacks--premium .splide__pagination__page.is-active { background: var(--relay-cyan); box-shadow: 0 0 12px var(--relay-cyan); transform: scale(1.25); }
.sa-feedback-card--premium { padding: 1.5rem; background: linear-gradient(145deg, rgba(25,32,57,.88), rgba(10,14,28,.92)) !important; backdrop-filter: blur(14px); }
.sa-feedback-card--premium:hover { transform: translateY(-6px); border-color: rgba(168,121,255,.5) !important; box-shadow: 0 18px 44px rgba(0,0,0,.3), 0 0 30px rgba(168,121,255,.13) !important; }
.sa-feedback-card--premium > .relative { padding: 1.25rem 0 0; }
.sa-feedback-card--premium > .relative > .flex { margin-top: 0; }
.sa-feedback-premium-top { padding-bottom: 1.25rem; border-bottom: 1px solid var(--relay-line); }
.sa-feedback-avatar, .sa-feedbacks-avatar-stack span { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: #fff; font-size: .68rem; font-weight: 700; background: linear-gradient(135deg, var(--relay-blue), var(--relay-violet)); }
.sa-feedback-avatar { width: 2.65rem; height: 2.65rem; box-shadow: 0 0 18px rgba(101,119,255,.3); }
.sa-feedback-check { color: var(--relay-cyan); }
.sa-feedbacks-trustbar { background: rgba(16,20,33,.64); backdrop-filter: blur(12px); }
.sa-feedbacks-avatar-stack { display: flex; padding-left: .65rem; }
.sa-feedbacks-avatar-stack span { width: 2rem; height: 2rem; margin-left: -.65rem; border: 2px solid var(--relay-ink); font-size: .55rem; }
.sa-feedbacks-gold { color: #ffd166; letter-spacing: .12em; }
.sa-stats--cards .sa-stats-item, .sa-stats--row .sa-stats-items, .sa-steps--grid .sa-steps-item, .sa-faq-item, .sa-page-products .bg-surface, .sa-page-product .bg-surface { background: linear-gradient(145deg, rgba(21,27,43,.82), rgba(10,14,26,.9)) !important; backdrop-filter: blur(10px); }
.sa-stats--cards .sa-stats-item { position: relative; overflow: hidden; }
.sa-stats--cards .sa-stats-item::before { content: ''; position: absolute; inset: 0 25% auto; height: 1px; background: linear-gradient(90deg, transparent, var(--relay-cyan), transparent); opacity: .6; }
.sa-stats--cards .sa-stats-item .text-h2 { color: var(--relay-cyan); }
.sa-steps--grid .sa-steps-item { padding: 1.5rem; border: 1px solid var(--relay-line); border-radius: var(--radius-card); transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease; }
.sa-steps--grid .sa-steps-item:hover { transform: translateY(-5px); border-color: rgba(168,121,255,.42); box-shadow: 0 16px 35px rgba(0,0,0,.22); }
.sa-faq-item { transition: border-color .25s ease, background-color .25s ease; }
.sa-faq-item:has(.faq-panel-open) { border-color: rgba(82,230,255,.35); }
.sa-page-products .sa-section-header, .sa-page-product .sa-section-header { margin-bottom: 2rem; }
.sa-page-products, .sa-page-product { min-height: 60vh; }
.sa-page-product .sa-product-form { background: rgba(16,20,33,.56); backdrop-filter: blur(14px); border-radius: var(--radius-card); padding: 1.25rem; }
.sa-page-product .sa-product-gallery { border-radius: var(--radius-card); overflow: hidden; }
.sa-footer { position: relative; overflow: hidden; }
.sa-footer::after { content: ''; position: absolute; width: 30rem; height: 18rem; right: -12rem; bottom: -10rem; border-radius: 50%; background: rgba(101,119,255,.1); filter: blur(50px); pointer-events: none; }
[data-dsr] { transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); }
body.relay-ready [data-dsr] { visibility: visible; }
@keyframes relay-pulse { 0%,100% { transform: scale(.9); opacity: .65; } 50% { transform: scale(1.08); opacity: 1; } }
@keyframes relay-sweep { 0%,35% { transform: translateX(-100%); } 70%,100% { transform: translateX(100%); } }
@keyframes relay-drift { from { transform: translate3d(0,0,0); } to { transform: translate3d(42px,42px,0); } }
@media (max-width: 640px) { .wrap { width: min(calc(100% - 28px), 1280px); } .sa-hero, .sa-hero--centered { min-height: 520px; } .sa-hero-title { font-size: clamp(2.8rem, 14vw, 4.5rem) !important; } .sa-hero-actions .sa-btn { width: 100%; } .component.py-section { padding-block: 68px; } .sa-navbar--floating-pill { padding-inline: .35rem; } .sa-navbar--floating-pill > div > div { padding-inline: .8rem; } .sa-feedbacks-trustbar { align-items: flex-start; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }