@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 > 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-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-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; }
[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%); } }
@media (max-width: 640px) { .wrap { width: min(calc(100% - 28px), 1280px); } .sa-hero { 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; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }