/* Mobile drawer (header__mobile .menu) — the chip-wrap layout from
   Anastasija's mockup did not survive on iPhone-sized viewports: chips
   overlapped, items were clipped left/right, and the dark backdrop + dark
   chips left users staring at a near-black canvas. Simplify to a vertical
   list of full-width buttons and pin everything so the rule survives
   media-query specificity wars. */
.header__mobile .menu {
  /* Solid surface — was rgba(10,16,24,0.92) over a 0.8-opacity .mask, so
     the chips became almost invisible. */
  background: #0a1018 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  z-index: 1001 !important;
}
/* Reset every box inside the drawer so legacy skinthey rules cannot push
   anything out of the menu__content frame. */
.header__mobile .menu,
.header__mobile .menu * {
  box-sizing: border-box !important;
}
.header__mobile .menu .menu__content,
.header__mobile .menu__content {
  display: flex !important;
  flex-direction: column !important;
  gap: 1rem;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  align-items: stretch !important;
  padding: 4.4rem 1.6rem 1.6rem !important;
  margin: 0 !important;
  overflow-y: auto;
  text-align: left !important;
}
/* Direct children of menu__content keep the full width and no margins. */
.header__mobile .menu__content > * {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  transform: none !important;
  position: static !important;
  left: auto !important;
  right: auto !important;
}
/* Currency row first — keep it horizontal because EUR / GBP are short. */
.header__mobile .menu__content > .lng:first-child {
  display: flex !important;
  flex-direction: row;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.8rem;
  list-style: none;
  padding: 0;
  margin: 0 0 0.4rem 0;
  position: static !important;
}
/* Wishlist and nav lists — stack vertically, each item full-width. */
.header__mobile .menu__content > .lng,
.header__mobile .menu__content > .nav,
.header__mobile .menu__content > ul.nav {
  display: flex !important;
  flex-direction: column;
  gap: 0.6rem;
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
  position: static !important;
}
.header__mobile .menu__content > .nav .nav__item {
  width: 100%;
  margin: 0;
  list-style: none;
}
/* Nav links rendered as full-width chips (pill background + border) so
   they keep Anastasija's chip aesthetic but never overflow the drawer. */
.header__mobile .menu .nav a,
.header__mobile .menu .nav__link,
.header__mobile .menu .nav__item > a {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  text-align: center !important;
  padding: 1.1rem 1.6rem !important;
  border-radius: 1rem !important;
  font-size: 1.5rem !important;
  color: var(--frost-100) !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  position: relative;
  z-index: 5;
  pointer-events: auto;
  text-decoration: none;
}
.header__mobile .menu .nav a.active,
.header__mobile .menu .nav__link.active {
  color: var(--ink-900) !important;
  background: var(--cyan-bright) !important;
  border-color: var(--cyan-bright) !important;
}

/* Mobile drawer now owns the cabinet links (My orders / Settings / Logout)
   and there is no room next to the hamburger for the desktop pieces, so
   hide them on small viewports. The .header__profile-menu / .header__profile
   classes wrap the CabinetMenu() dropdown in blocks/header.php. */
@media (max-width: 992px) {
  .header__profile-menu,
  .header__profile,
  .header .header__signin,
  .nav .header__signin {
    display: none !important;
  }
}

/* Mobile-drawer heading row for the My Account section. */
.header__mobile .menu .nav__item--heading {
  margin-top: 0.6rem !important;
  padding: 0.4rem 0 !important;
  list-style: none;
}
.header__mobile .menu .nav__item--heading .nav__heading {
  display: block;
  width: 100%;
  text-align: center;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--frost-300);
  padding: 0;
}

/* Light-theme palette for the mobile drawer. The drawer is a solid panel
   pinned to background #0a1018 in dark mode; under data-theme="light" the
   page tokens flip but our chip backgrounds (white-on-low-alpha) and the
   drawer surface stay dark, leaving dark text on a dark panel. Mirror the
   colors for light mode. */
[data-theme="light"] .header__mobile .menu {
  background: #ffffff !important;
  color: var(--frost-100) !important;
  border-color: rgba(10, 30, 50, 0.12);
  box-shadow: 0 20px 60px rgba(10, 30, 50, 0.18);
}
[data-theme="light"] .header__mobile .menu .menu__close {
  color: var(--frost-100) !important;
  border-color: rgba(10, 30, 50, 0.12) !important;
  background: rgba(10, 30, 50, 0.04) !important;
}
[data-theme="light"] .header__mobile .menu .nav a,
[data-theme="light"] .header__mobile .menu .nav__link,
[data-theme="light"] .header__mobile .menu__content > .lng:first-child .lng__link {
  color: var(--frost-100) !important;
  background: rgba(10, 30, 50, 0.04) !important;
  border-color: rgba(10, 30, 50, 0.14) !important;
}
[data-theme="light"] .header__mobile .menu .nav a.active,
[data-theme="light"] .header__mobile .menu .nav__link.active,
[data-theme="light"] .header__mobile .menu__content > .lng:first-child .lng__link.active {
  color: #ffffff !important;
  background: var(--cyan) !important;
  border-color: var(--cyan) !important;
}
[data-theme="light"] .header__mobile .menu__content > .lng:not(:first-child) .wish {
  color: var(--frost-100) !important;
}
/* Currency chips stay short and stay as pills. */
.header__mobile .menu__content > .lng:first-child .lng__link {
  display: inline-flex !important;
  width: auto;
  min-width: 7rem;
  text-align: center;
  padding: 1rem 1.6rem !important;
  border-radius: 999px !important;
  font-size: 1.4rem !important;
  font-weight: 600;
  color: var(--frost-100) !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  position: relative;
  z-index: 5;
  pointer-events: auto;
  text-decoration: none;
}
.header__mobile .menu__content > .lng:first-child .lng__link.active {
  color: var(--ink-900) !important;
  background: var(--cyan-bright) !important;
  border-color: var(--cyan-bright) !important;
}
/* Wishlist link (second .lng row) — heart icon + count, centered. */
.header__mobile .menu__content > .lng:not(:first-child) {
  align-items: center;
}
.header__mobile .menu__content > .lng:not(:first-child) .wish {
  display: inline-flex !important;
  align-items: center;
  gap: 0.6rem;
  color: var(--frost-100) !important;
  text-decoration: none;
  padding: 0.4rem 0 !important;
}
/* Mask was overlaying the entire viewport (z-index 1001 in style.min.css,
   higher than .menu .nav links), blocking taps on the drawer items. The
   drawer itself is already a solid panel covering the screen, so the mask
   adds no visual value — hide it entirely. */
.mask,
.mask.active {
  display: none !important;
}
/* The list rows (.menu .nav, .menu .lng) inherited padding/margins from
   older skinthey rules that pushed children off the left edge in narrow
   viewports. Zero them out and let .menu__content drive the gutters. */
.header__mobile .menu .nav,
.header__mobile .menu .lng,
.header__mobile .menu .menu__content > ul {
  padding: 0 !important;
  margin: 0 !important;
}
.header__mobile .menu .nav__item {
  margin: 0 !important;
  padding: 0 !important;
  width: 100%;
  list-style: none;
}

/* SpektraSkins — game skins platform */
:root, [data-theme="dark"] {
  --ink-900: #050810;
  --ink-800: #0a1018;
  --ink-700: #0f1822;
  --ink-600: #15212d;
  --ink-500: #1d2d3c;
  --frost-100: #eef6f8;
  --frost-200: #c9dde2;
  --frost-300: #8aa5ae;
  --frost-400: #5b7079;
  --cyan: #5fc7e6;
  --cyan-bright: #7fdcf5;
  --cyan-deep: #2a8aa8;
  --aqua: #9fc7d4;
  --gold: #d6b67a;
  --magenta: #d96fa8;
  --rare-cov: #4b69ff;
  --rare-mil: #8847ff;
  --rare-res: #d32ce6;
  --rare-cls: #eb4b4b;
  --rare-rar: #ffd700;
  --glass-tint: 200 30% 60%;
  --glass-alpha: 0.06;
  --glass-border: rgba(255,255,255,0.08);
  --glass-blur: 20px;
  --surface-card: rgba(255,255,255,0.03);
  --surface-card-border: rgba(255,255,255,0.06);
}

[data-theme="light"] {
  --ink-900: #f4f7fa;
  --ink-800: #eaf0f4;
  --ink-700: #e0e8ee;
  --ink-600: #d4dee5;
  --ink-500: #c4d1da;
  --frost-100: #0c1620;
  --frost-200: #2a3a48;
  --frost-300: #4a5e6c;
  --frost-400: #6e8290;
  --cyan: #1f8eb5;
  --cyan-bright: #1a7fa2;
  --cyan-deep: #135874;
  --glass-border: rgba(10,30,50,0.08);
  --surface-card: rgba(255,255,255,0.7);
  --surface-card-border: rgba(10,30,50,0.08);
}
[data-theme="light"] body, [data-theme="light"] html { background: #eef3f7; color: var(--frost-100); }
[data-theme="light"] .ambient::before {
  background:
    radial-gradient(ellipse 60% 40% at 15% 20%, rgba(95,199,230,0.18), transparent 60%),
    radial-gradient(ellipse 50% 50% at 85% 70%, rgba(217,111,168,0.10), transparent 60%);
}
[data-theme="light"] .ambient .grid {
  background-image:
    linear-gradient(rgba(20,60,90,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20,60,90,0.05) 1px, transparent 1px) !important;
}
[data-theme="light"] .glass, [data-theme="light"] .glass-strong { background: rgba(255,255,255,0.65); border-color: rgba(10,30,50,0.08); }
[data-theme="light"] .nav { background: rgba(255,255,255,0.7) !important; }
[data-theme="light"] .product-card { background: rgba(255,255,255,0.7); border-color: rgba(10,30,50,0.08); }
[data-theme="light"] .product-card .product-art { background: linear-gradient(135deg, #f0f5f9, #e6eef4); }
[data-theme="light"] .channel { background: rgba(255,255,255,0.6); border-color: rgba(10,30,50,0.08); }
[data-theme="light"] .btn-ghost { background: rgba(255,255,255,0.6); border-color: rgba(10,30,50,0.1); color: var(--frost-100); }
[data-theme="light"] .buy-btn { background: rgba(255,255,255,0.6); border-color: rgba(10,30,50,0.1); color: var(--frost-100); }
[data-theme="light"] .footer { background: rgba(10,30,50,0.04) !important; }
[data-theme="light"] .product-info .game { color: var(--frost-300); }
[data-theme="light"] .product-info .price .sub { color: var(--frost-300); }
[data-theme="light"] .product-info .name { color: var(--frost-100); }

/* Theme toggle button — also used for the wishlist + cart icon buttons in
   the floating nav; position: relative anchors their .cart-badge counter
   to the button itself instead of escaping to the page corner. */
.theme-toggle {
  position: relative;
  width: 36px; height: 36px; border-radius: 10px;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
  color: var(--frost-200); display: grid; place-items: center; cursor: pointer;
  transition: all .2s;
}
.theme-toggle:hover { background: rgba(95,199,230,0.1); color: var(--cyan-bright); border-color: rgba(95,199,230,0.25); }
[data-theme="light"] .theme-toggle { background: rgba(255,255,255,0.6); border-color: rgba(10,30,50,0.1); }

/* Mobile hamburger button. The base theme ships .sb-toggle at 4rem with the
   three bars absolutely pinned to the top, so in the header flex row it
   rendered taller than the 3.6rem .theme-toggle icons and bunched the lines at
   the top. Match the standard 3.6rem icon button and re-center the bars (rem
   to follow the theme's convention; X-close animation preserved). */
.header .sb-toggle {
  width: 3.6rem; height: 3.6rem; flex: 0 0 3.6rem; align-self: center;
  border-radius: 1rem;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
}
.header .sb-toggle i { left: 1.1rem; right: 1.1rem; }
.header .sb-toggle i:nth-child(1) { top: 1.3rem; }
.header .sb-toggle i:nth-child(2) { top: 1.75rem; }
.header .sb-toggle i:nth-child(3) { top: 2.2rem; }
.header .sb-toggle.active i:nth-child(1) { top: 1.75rem; }
.header .sb-toggle.active i:nth-child(3) { top: 1.75rem; }
[data-theme="light"] .header .sb-toggle { background: rgba(255,255,255,0.6); border-color: rgba(10,30,50,0.1); }

/* Sign-in modal */
.signin-overlay {
  position: fixed; inset: 0; z-index: 110;
  background: rgba(0,0,0,0.55); backdrop-filter: blur(6px);
  opacity: 0; pointer-events: none; transition: opacity .25s;
}
.signin-overlay.open { opacity: 1; pointer-events: auto; }
.signin-modal {
  position: fixed; top: 50%; left: 50%; z-index: 120;
  width: 420px; max-width: calc(100vw - 32px);
  transform: translate(-50%, calc(-50% + 12px));
  background: linear-gradient(180deg, rgba(15,24,34,0.98), rgba(10,16,24,0.98));
  backdrop-filter: blur(40px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 22px;
  padding: 32px 32px 28px;
  opacity: 0; pointer-events: none;
  transition: opacity .25s, transform .25s cubic-bezier(.2,.8,.2,1);
  box-shadow: 0 30px 80px rgba(0,0,0,0.6), 0 0 0 1px rgba(95,199,230,0.06) inset;
}
.signin-modal.open { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%); }
[data-theme="light"] .signin-modal { background: linear-gradient(180deg, #fff, #f5f9fc); border-color: rgba(10,30,50,0.1); }
.signin-close { position: absolute; top: 14px; right: 14px; width: 30px; height: 30px; border-radius: 8px; background: transparent; border: 1px solid rgba(255,255,255,0.08); color: var(--frost-300); display: grid; place-items: center; cursor: pointer; }
.signin-close:hover { background: rgba(255,255,255,0.06); color: var(--frost-100); }
.signin-brand { margin-bottom: 18px; }
.signin-providers { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.prov { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 12px; border-radius: 12px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); color: var(--frost-100); font-size: 13.5px; font-weight: 500; cursor: pointer; transition: all .15s; font-family: inherit; }
.prov:hover { background: rgba(255,255,255,0.07); border-color: rgba(95,199,230,0.25); }
[data-theme="light"] .prov { background: rgba(10,30,50,0.04); border-color: rgba(10,30,50,0.1); }
.signin-or { display: flex; align-items: center; gap: 10px; margin: 4px 0 16px; color: var(--frost-400); font-size: 11px; font-family: 'JetBrains Mono', monospace; text-transform: uppercase; letter-spacing: 0.1em; }
.signin-or::before, .signin-or::after { content: ''; flex: 1; height: 1px; background: rgba(255,255,255,0.08); }
[data-theme="light"] .signin-or::before, [data-theme="light"] .signin-or::after { background: rgba(10,30,50,0.1); }
.signin-form { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; }
.signin-foot { text-align: center; font-size: 12.5px; color: var(--frost-300); }
.linkish { background: none; border: 0; color: var(--cyan-bright); cursor: pointer; font: inherit; padding: 0; }
.linkish:hover { text-decoration: underline; }

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--ink-900); color: var(--frost-100); font-family: 'Inter', system-ui, sans-serif; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
body { min-height: 100vh; padding-top: 0; }

.font-display { font-family: 'Space Grotesk', sans-serif; letter-spacing: -0.02em; }
.font-mono { font-family: 'JetBrains Mono', monospace; font-feature-settings: 'tnum'; }

/* Ambient gradient background w/ orbs */
.ambient {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
}
.ambient::before {
  content: ''; position: absolute; inset: -10%;
  background:
    radial-gradient(ellipse 60% 40% at 15% 20%, rgba(95,199,230,0.18), transparent 60%),
    radial-gradient(ellipse 50% 50% at 85% 70%, rgba(136,71,255,0.12), transparent 60%),
    radial-gradient(ellipse 70% 40% at 50% 100%, rgba(95,199,230,0.10), transparent 60%);
}
.ambient .grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(95,199,230,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(95,199,230,0.04) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, black, transparent);
}

/* Glass utility */
.glass {
  background: linear-gradient(135deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
  backdrop-filter: blur(var(--glass-blur)) saturate(180%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(180%);
  border: 1px solid var(--glass-border);
  border-radius: 18px;
  box-shadow: 
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 30px 60px -20px rgba(0,0,0,0.5);
}
.glass-strong {
  background: linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03));
  backdrop-filter: blur(28px) saturate(200%);
  -webkit-backdrop-filter: blur(28px) saturate(200%);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 22px;
}

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 22px; border-radius: 999px; font-weight: 500; font-size: 14px;
  cursor: pointer; transition: transform .2s, box-shadow .2s, background .2s;
  border: 1px solid transparent;
  white-space: nowrap;
}
.btn-primary {
  background: linear-gradient(135deg, var(--cyan-bright), var(--cyan));
  color: var(--ink-900);
  box-shadow: 0 8px 24px -8px rgba(95,199,230,0.6), inset 0 1px 0 rgba(255,255,255,0.4);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 12px 32px -8px rgba(95,199,230,0.8), inset 0 1px 0 rgba(255,255,255,0.4); }
.btn-ghost {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.1);
  color: var(--frost-100);
  backdrop-filter: blur(12px);
}
.btn-ghost:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.18); }

/* Page layout */
.page { position: relative; z-index: 1; }
.container { max-width: 1320px; margin: 0 auto; padding: 0 32px; }

/* Nav */
.nav {
  position: fixed; top: 16px; left: 50%; transform: translateX(-50%);
  z-index: 50;
  width: calc(100% - 32px); max-width: 1320px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px 12px 22px;
  border-radius: 999px;
}
.nav-links { display: flex; gap: 4px; }
.nav-links a {
  padding: 8px 16px; border-radius: 999px;
  color: var(--frost-200); text-decoration: none; font-size: 13.5px;
  transition: background .2s, color .2s;
}
.nav-links a { position: relative; z-index: 1; pointer-events: auto; }
.nav-links a:hover { background: rgba(95,199,230,0.10); color: var(--frost-100); }
.nav-links a.active { color: var(--cyan-bright); background: rgba(95,199,230,0.08); }
.nav-links a.active:hover { background: rgba(95,199,230,0.16); }
.nav-cta { display: flex; align-items: center; gap: 10px; }

/* Visual styling comes from .theme-toggle to match wishlist/theme buttons;
   this rule only keeps the positioning context for .cart-badge. */
.cart-btn { position: relative; }
.cart-badge {
  position: absolute; top: -4px; right: -4px;
  min-width: 20px; height: 20px; padding: 0 6px;
  background: var(--cyan); color: var(--ink-900);
  border-radius: 999px; font-size: 11px; font-weight: 700;
  display: grid; place-items: center;
  border: 2px solid var(--ink-900);
}
.cart-badge.is-empty {
  display: none;
}

/* Hero */
.hero { padding: 140px 0 100px; position: relative; }
.wrapper.hero-wrapper section.hero { padding-top: 96px; }
.hero-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 60px; align-items: center; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 6px 14px 6px 8px; border-radius: 999px;
  background: rgba(95,199,230,0.08); border: 1px solid rgba(95,199,230,0.2);
  font-size: 12px; color: var(--cyan-bright); font-family: 'JetBrains Mono', monospace;
}
.eyebrow .dot { width: 8px; height: 8px; border-radius: 999px; background: var(--cyan); box-shadow: 0 0 12px var(--cyan); }
.hero h1 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(48px, 7vw, 96px);
  line-height: 0.95; letter-spacing: -0.04em; font-weight: 500;
  margin: 24px 0 24px;
}
.hero h1 .accent {
  background: linear-gradient(135deg, var(--cyan-bright), var(--aqua));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  font-style: italic; font-family: 'Space Grotesk', sans-serif;
}
.hero p.lede { font-size: 18px; color: var(--frost-200); max-width: 520px; line-height: 1.5; }
.hero-actions { display: flex; gap: 14px; margin-top: 36px; align-items: center; flex-wrap: wrap; }
.hero-stats { display: flex; gap: 32px; margin-top: 56px; padding-top: 32px; border-top: 1px solid rgba(255,255,255,0.06); }
.hero-stats .stat .num { font-family: 'Space Grotesk', sans-serif; font-size: 28px; font-weight: 500; }
.hero-stats .stat .lbl { font-size: 12px; color: var(--frost-300); margin-top: 4px; font-family: 'JetBrains Mono', monospace; text-transform: uppercase; letter-spacing: 0.08em; }

/* Featured skin card */
.feature-card {
  position: relative; aspect-ratio: 4/5;
  border-radius: 28px; overflow: hidden;
  background: linear-gradient(135deg, rgba(95,199,230,0.12), rgba(136,71,255,0.08));
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 50px 100px -30px rgba(0,0,0,0.8), inset 0 1px 0 rgba(255,255,255,0.1);
}
.feature-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 30% 20%, rgba(95,199,230,0.4), transparent 50%),
    radial-gradient(circle at 70% 80%, rgba(136,71,255,0.3), transparent 50%),
    linear-gradient(135deg, #0a1828 0%, #1a0a28 100%);
}
.feature-glow {
  position: absolute; left: 50%; top: 55%; transform: translate(-50%, -50%);
  width: 70%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(95,199,230,0.4), transparent 60%);
  filter: blur(40px);
}
.feature-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(5,8,16,0.9) 0%, transparent 50%);
}
.feature-meta { position: absolute; left: 24px; right: 24px; bottom: 24px; display: flex; align-items: end; justify-content: space-between; }
.feature-tag {
  position: absolute; top: 24px; left: 24px;
  padding: 6px 12px; border-radius: 999px;
  background: rgba(0,0,0,0.4); backdrop-filter: blur(20px);
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  letter-spacing: 0.08em; text-transform: uppercase;
  border: 1px solid rgba(255,255,255,0.12);
}
.feature-price { font-family: 'Space Grotesk', sans-serif; font-size: 32px; font-weight: 500; }
.feature-price .currency { font-size: 16px; opacity: 0.6; margin-right: 4px; }

/* Floating chips around hero card */
.float-chip {
  position: absolute; padding: 10px 14px; border-radius: 14px;
  background: rgba(10,16,24,0.7); backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.1);
  font-size: 12px; display: flex; align-items: center; gap: 8px;
  box-shadow: 0 10px 30px -10px rgba(0,0,0,0.6);
}
.float-chip .icon { width: 20px; height: 20px; border-radius: 6px; display: grid; place-items: center; }

/* Section header */
.section { padding: 100px 0; position: relative; }
.section-head { display: flex; justify-content: space-between; align-items: end; margin-bottom: 48px; gap: 32px; flex-wrap: wrap; }
.section-head .label { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--cyan-bright); letter-spacing: 0.08em; text-transform: uppercase; }
.section-head h2 { font-family: 'Space Grotesk', sans-serif; font-size: clamp(36px, 5vw, 64px); line-height: 1; letter-spacing: -0.03em; font-weight: 500; margin-top: 12px; max-width: 720px; }
.section-head .h2-italic { font-style: italic; color: var(--cyan-bright); }
.section-head p.sub { color: var(--frost-300); max-width: 380px; line-height: 1.5; }

/* Filters */
.filters { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 32px; align-items: center; }
.filter-pill {
  padding: 10px 16px; border-radius: 999px;
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);
  color: var(--frost-200); font-size: 13px; cursor: pointer; transition: all .2s;
  display: inline-flex; align-items: center; gap: 8px;
}
.filter-pill:hover { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.12); }
.filter-pill.active {
  background: rgba(95,199,230,0.12); border-color: rgba(95,199,230,0.4); color: var(--cyan-bright);
}
.filter-pill .count { font-family: 'JetBrains Mono', monospace; opacity: 0.6; font-size: 11px; }
.filter-divider { width: 1px; height: 24px; background: rgba(255,255,255,0.08); margin: 0 4px; }

.search-box {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px; border-radius: 999px;
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);
  margin-left: auto; min-width: 240px;
}
.search-box input { background: transparent; border: 0; outline: 0; color: var(--frost-100); width: 100%; font-size: 13px; font-family: inherit; }
.search-box input::placeholder { color: var(--frost-400); }

/* Product grid */
.product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 1100px) { .product-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 800px) { .product-grid { grid-template-columns: repeat(2, 1fr); } }

.product-card {
  position: relative; aspect-ratio: 0.78;
  border-radius: 20px; overflow: hidden; cursor: pointer;
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
  border: 1px solid rgba(255,255,255,0.06);
  transition: transform .3s cubic-bezier(.2,.8,.2,1), border-color .2s, box-shadow .3s;
  display: flex; flex-direction: column;
}
.product-card:hover { transform: translateY(-4px); border-color: rgba(255,255,255,0.14); box-shadow: 0 30px 60px -20px rgba(0,0,0,0.6); }
.product-card:hover .product-art .swap { opacity: 1; }
.product-card:hover .product-art .primary { opacity: 0; transform: scale(1.05); }
.product-card:hover .buy-btn { background: var(--cyan-bright); color: var(--ink-900); border-color: var(--cyan-bright); transform: translateY(-1px); }
.product-card:hover .buy-btn.in-cart { background: rgba(127,220,176,0.2); color: #7fdcb0; border-color: rgba(127,220,176,0.35); }

.product-art { position: relative; flex: 1; overflow: hidden; min-height: 0; }
.product-art > div { position: absolute; inset: 0; transition: opacity .4s, transform .6s; }
.product-art .primary { opacity: 1; }
.product-art .swap { opacity: 0; }

.product-rarity-bar { position: absolute; bottom: 0; left: 0; right: 0; height: 3px; }

.product-info { padding: 14px 14px 10px; display: flex; flex-direction: column; gap: 8px; }
.product-info .nm-row { display: flex; justify-content: space-between; align-items: start; gap: 12px; }
.product-info .name { font-size: 13.5px; font-weight: 500; line-height: 1.2; }
.product-info .game { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: var(--frost-400); margin-top: 4px; letter-spacing: 0.04em; }
.product-info .price { font-family: 'Space Grotesk', sans-serif; font-size: 18px; font-weight: 500; white-space: nowrap; }
.product-info .price .sub { font-size: 10px; color: var(--frost-400); font-family: 'JetBrains Mono', monospace; display: block; text-align: right; margin-top: 2px; font-weight: 400; }

.buy-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 12px;
  background: rgba(95,199,230,0.15); color: var(--cyan-bright);
  border: 1px solid rgba(95,199,230,0.3);
  border-radius: 10px;
  font-size: 12.5px; font-weight: 600; letter-spacing: 0.02em;
  cursor: pointer; transition: background .2s, color .2s, transform .2s, border-color .2s;
  font-family: inherit;
}
.buy-btn:hover { background: var(--cyan-bright); color: var(--ink-900); border-color: var(--cyan-bright); }
.buy-btn.in-cart { background: rgba(127,220,176,0.15); color: #7fdcb0; border-color: rgba(127,220,176,0.3); }
.buy-btn.in-cart:hover { background: rgba(127,220,176,0.2); color: #7fdcb0; }

.rarity-tag {
  position: absolute; top: 12px; right: 12px;
  padding: 4px 10px; border-radius: 999px;
  background: rgba(0,0,0,0.55); backdrop-filter: blur(10px);
  font-family: 'JetBrains Mono', monospace; font-size: 10px;
  letter-spacing: 0.06em; text-transform: uppercase;
  border: 1px solid rgba(255,255,255,0.1);
  z-index: 2;
}
.game-tag-card {
  position: absolute; top: 12px; left: 12px;
  padding: 4px 10px; border-radius: 6px;
  background: rgba(0,0,0,0.55); backdrop-filter: blur(10px);
  font-family: 'JetBrains Mono', monospace; font-size: 10px;
  letter-spacing: 0.08em; text-transform: uppercase;
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--frost-200);
  z-index: 2;
}
.product-card__meta {
  position: absolute;
  top: 12px;
  left: 12px;
  right: 12px;
  z-index: 8;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  pointer-events: none;
}
.product-card__tags,
.product-card__tools,
.product-card__meta .products__icons,
.product-card__meta .products__actions {
  display: flex;
  align-items: center;
  min-width: 0;
}
.product-card__tags {
  gap: 6px;
  flex: 1 1 auto;
  flex-wrap: wrap;
}
.product-card__tools {
  gap: 6px;
  flex: 0 0 auto;
  justify-content: flex-end;
  pointer-events: auto;
}
.product-card__meta .game-tag-card,
.product-card__meta .rarity-tag {
  position: static;
  top: auto;
  left: auto;
  right: auto;
  z-index: auto;
  max-width: 100%;
  white-space: nowrap;
}
.product-card__meta .products__icons,
.product-card__meta .products__actions {
  position: static !important;
  flex-direction: row !important;
  gap: 6px;
  margin: 0 !important;
}
.product-card__meta .products__icon,
.product-card__meta .products__link {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  border-radius: 10px;
  background: rgba(0,0,0,0.46);
  border: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.product-card__meta .products__link::before {
  content: none !important;
}
.product-card__meta .products__icon img,
.product-card__meta .products__link img {
  display: block !important;
  width: 15px;
  height: 15px;
  max-width: 16px;
  max-height: 16px;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.86;
}
.product-card__meta .products__icon:hover,
.product-card__meta .products__link:hover {
  border-color: rgba(95,199,230,0.28);
  background: rgba(95,199,230,0.13);
}
.product-card__meta .products__icon-tooltip {
  display: block;
  bottom: calc(100% + 8px);
  right: 0;
  margin: 0;
  padding: 6px 8px;
  color: var(--frost-200);
  background: rgba(10,16,24,0.94);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  white-space: nowrap;
}

/* === DASHBOARD === */
.dash-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 40px; }
.dash-stat { padding: 22px 24px; border-radius: 18px; background: rgba(255,255,255,0.025); border: 1px solid rgba(255,255,255,0.06); }
[data-theme="light"] .dash-stat { background: rgba(255,255,255,0.6); border-color: rgba(10,30,50,0.08); }
.dash-stat .lbl { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: var(--frost-400); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 8px; }
.dash-stat .val { font-family: 'Space Grotesk', sans-serif; font-size: 30px; font-weight: 500; letter-spacing: -0.02em; }
.dash-stat .sub { font-size: 12px; color: var(--frost-400); margin-top: 6px; }

.dash-section { margin-bottom: 60px; }
.dash-head { display: flex; justify-content: space-between; align-items: end; margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid rgba(255,255,255,0.06); }
.dash-head h2 { font-family: 'Space Grotesk', sans-serif; font-size: 28px; font-weight: 500; letter-spacing: -0.02em; }
.dash-meta { font-size: 11px; color: var(--frost-400); letter-spacing: 0.08em; text-transform: uppercase; }
[data-theme="light"] .dash-head { border-bottom-color: rgba(10,30,50,0.1); }

.dash-empty { padding: 60px 30px; text-align: center; border-radius: 20px; background: rgba(255,255,255,0.02); border: 1px dashed rgba(255,255,255,0.08); }
[data-theme="light"] .dash-empty { background: rgba(255,255,255,0.5); border-color: rgba(10,30,50,0.12); }
.dash-empty .ic { width: 56px; height: 56px; margin: 0 auto 16px; border-radius: 14px; background: rgba(95,199,230,0.08); color: var(--cyan-bright); display: grid; place-items: center; }
.dash-empty .ttl { font-family: 'Space Grotesk', sans-serif; font-size: 20px; font-weight: 500; margin-bottom: 8px; }
.dash-empty .sub { font-size: 13.5px; color: var(--frost-300); max-width: 360px; margin: 0 auto; line-height: 1.5; }

.dash-orders { display: flex; flex-direction: column; gap: 10px; }
.dash-order { display: grid; grid-template-columns: 140px 1fr 130px 140px; gap: 20px; align-items: center; padding: 18px 22px; border-radius: 16px; background: rgba(255,255,255,0.025); border: 1px solid rgba(255,255,255,0.06); cursor: pointer; transition: all .15s; }
.dash-order:hover { background: rgba(95,199,230,0.06); border-color: rgba(95,199,230,0.2); transform: translateY(-1px); }
[data-theme="light"] .dash-order { background: rgba(255,255,255,0.7); border-color: rgba(10,30,50,0.08); }
.ord-thumbs { display: flex; align-items: center; }
.ord-thumb { width: 56px; height: 42px; border-radius: 8px; overflow: hidden; border: 1px solid rgba(255,255,255,0.1); background: linear-gradient(135deg, #0c1620, #1a2530); }
.ord-thumb svg { width: 100%; height: 100%; display: block; }
.ord-more { margin-left: -8px; padding: 0 10px; height: 42px; display: grid; place-items: center; border-radius: 8px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--frost-300); }
.ord-id { font-size: 10.5px; color: var(--frost-400); letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 4px; }
.ord-name { font-size: 14px; font-weight: 500; line-height: 1.3; }
.ord-date { font-size: 11.5px; color: var(--frost-400); margin-top: 4px; font-family: 'JetBrains Mono', monospace; }
.ord-status { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: #7fdcb0; font-family: 'JetBrains Mono', monospace; letter-spacing: 0.04em; text-transform: uppercase; }
.ord-status .dot { width: 6px; height: 6px; border-radius: 50%; background: #7fdcb0; box-shadow: 0 0 8px rgba(127,220,176,0.6); }
.ord-total { text-align: right; }
.ord-total .num { font-family: 'Space Grotesk', sans-serif; font-size: 18px; font-weight: 500; }
.ord-total .link { font-size: 11.5px; color: var(--cyan-bright); margin-top: 4px; display: inline-flex; align-items: center; gap: 4px; }

/* === INVOICE === */
.invoice-overlay { position: fixed; inset: 0; z-index: 130; background: rgba(0,0,0,0.65); backdrop-filter: blur(6px); }
.invoice-wrap { position: fixed; inset: 0; z-index: 140; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding: 28px 20px 60px; overflow-y: auto; }
.invoice-toolbar { width: min(820px, 100%); display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.invoice-close { width: 36px; height: 36px; border-radius: 10px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); color: var(--frost-100); display: grid; place-items: center; cursor: pointer; }
.invoice-close:hover { background: rgba(255,255,255,0.12); }

.invoice-paper { width: min(820px, 100%); background: #fff; color: #0c1620; border-radius: 16px; padding: 56px 64px; box-shadow: 0 40px 100px rgba(0,0,0,0.6); position: relative; overflow: hidden; }
.invoice-paper::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, #5fc7e6, #d96fa8 50%, #d6b67a); }

.inv-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 32px; padding-bottom: 28px; border-bottom: 2px solid #0c1620; }
.inv-brand { display: flex; align-items: center; gap: 14px; }
.inv-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 22px; min-width: 320px; }
.inv-row { display: flex; flex-direction: column; gap: 2px; }
.inv-row .lbl { color: #6e8290; font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; }
.inv-row .val { color: #0c1620; font-weight: 500; font-size: 13px; }

.inv-parties { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; padding: 28px 0; border-bottom: 1px solid #d4dce3; }
.inv-party .lbl { font-size: 10.5px; color: #6e8290; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 8px; }
.inv-party .val { font-family: 'Space Grotesk', sans-serif; font-size: 18px; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 4px; }
.inv-party .sub { font-size: 12px; color: #4a5e6c; line-height: 1.5; }

.inv-table { padding: 24px 0; }
.inv-thead { display: grid; grid-template-columns: 1fr 90px 110px 110px; gap: 16px; padding-bottom: 12px; border-bottom: 1px solid #0c1620; font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: #4a5e6c; letter-spacing: 0.08em; text-transform: uppercase; }
.inv-thead .r { text-align: right; }
.inv-row-line { display: grid; grid-template-columns: 1fr 90px 110px 110px; gap: 16px; padding: 14px 0; border-bottom: 1px solid #eaf0f4; align-items: center; }
.inv-row-line .r { text-align: right; }
.inv-item { display: flex; gap: 14px; align-items: center; }
.inv-thumb { width: 64px; height: 48px; border-radius: 8px; overflow: hidden; background: linear-gradient(135deg, #0c1620, #1a2530); flex-shrink: 0; }
.inv-thumb svg { width: 100%; height: 100%; display: block; }
.inv-item .nm { font-size: 13.5px; font-weight: 500; line-height: 1.3; color: #0c1620; }

.inv-totals { padding: 18px 0 24px; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
.inv-tot-row { display: flex; justify-content: space-between; min-width: 280px; font-size: 13px; color: #4a5e6c; }
.inv-tot-row.grand { font-family: 'Space Grotesk', sans-serif; font-size: 22px; font-weight: 600; color: #0c1620; padding-top: 10px; margin-top: 6px; border-top: 2px solid #0c1620; letter-spacing: -0.01em; }

.inv-foot { display: grid; grid-template-columns: 100px 1fr; gap: 24px; padding-top: 24px; border-top: 1px solid #d4dce3; }
.inv-stamp { transform: rotate(-8deg); display: grid; place-items: center; }
.inv-note .lbl { font-size: 10.5px; color: #4a5e6c; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 8px; }
.inv-note p { font-size: 12px; color: #4a5e6c; line-height: 1.55; }

.inv-bottom { margin-top: 32px; text-align: center; font-size: 10.5px; color: #6e8290; letter-spacing: 0.1em; text-transform: uppercase; padding-top: 16px; border-top: 1px dashed #d4dce3; }

/* Print */
@media print {
  body * { visibility: hidden !important; }
  .invoice-wrap, .invoice-wrap * { visibility: visible !important; }
  .invoice-overlay, .invoice-toolbar, .no-print { display: none !important; }
  .invoice-wrap { position: absolute; inset: 0; padding: 0; overflow: visible; }
  .invoice-paper { box-shadow: none; border-radius: 0; padding: 40px 50px; width: 100% !important; max-width: 100%; }
}

@media (max-width: 720px) {
  .dash-stats { grid-template-columns: 1fr 1fr; }
  .dash-order { grid-template-columns: 1fr; gap: 12px; }
  .ord-total { text-align: left; }
  .invoice-paper { padding: 32px 24px; }
  .inv-head, .inv-parties, .inv-foot { grid-template-columns: 1fr; }
  .inv-head { flex-direction: column; gap: 18px; }
  .inv-thead, .inv-row-line { grid-template-columns: 1fr; gap: 6px; }
  .inv-thead { display: none; }
}
.product-info .meta-row { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.product-info .meta-row .game { margin-top: 0; }
.sticker-line { display: flex; align-items: center; gap: 6px; min-height: 29px; margin-top: 6px; padding-top: 6px; border-top: 1px dashed rgba(255,255,255,0.06); }
.sticker-line .lbl { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; color: var(--frost-400); letter-spacing: 0.08em; text-transform: uppercase; }
.sticker-row { display: inline-flex; gap: 4px; align-items: center; }
.sticker { width: 16px; height: 16px; border-radius: 4px; border: 1px solid rgba(255,255,255,0.16); display: grid; place-items: center; overflow: hidden; font-size: 8px; line-height: 1; flex-shrink: 0; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08); color: rgba(255,255,255,0.92); }
.sticker--img { background: rgba(0,0,0,0.38); }
.sticker--img img { display: block; width: 100%; height: 100%; object-fit: contain; padding: 1px; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.45)); }
[data-theme="light"] .sticker-line { border-top-color: rgba(10,30,50,0.08); }
[data-theme="light"] .sticker { border-color: rgba(10,30,50,0.15); color: rgba(255,255,255,0.95); }

/* About section */
.about { padding: 120px 0; }
.about-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 80px; align-items: center; }
.about-visual { position: relative; aspect-ratio: 1; border-radius: 28px; overflow: hidden; }
.about-real-item { position: absolute; inset: 0; display: grid; place-items: center; background: radial-gradient(circle at 50% 58%, rgba(95,199,230,0.18), rgba(217,111,168,0.10) 36%, transparent 62%); }
.about-real-item img { width: min(68%, 360px); height: auto; display: block; image-rendering: auto; filter: drop-shadow(0 32px 44px rgba(0,0,0,0.55)); transform: translateY(16px) scale(1.12); }
.about-content h2 { font-family: 'Space Grotesk', sans-serif; font-size: clamp(36px, 4.5vw, 56px); line-height: 1.05; letter-spacing: -0.03em; font-weight: 500; margin-bottom: 28px; }
.about-content h2 em { font-style: italic; color: var(--cyan-bright); }
.about-content p { color: var(--frost-200); font-size: 16px; line-height: 1.65; margin-bottom: 18px; max-width: 540px; }
.about-features { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 40px; }
.feature-pill {
  padding: 18px 20px; border-radius: 16px;
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);
}
.feature-pill .ic { width: 36px; height: 36px; border-radius: 10px; background: rgba(95,199,230,0.12); display: grid; place-items: center; color: var(--cyan-bright); margin-bottom: 12px; }
.feature-pill h4 { font-size: 14px; font-weight: 500; margin-bottom: 4px; }
.feature-pill p { font-size: 12.5px; color: var(--frost-300); margin: 0; line-height: 1.5; }

/* About visual layered */
.av-layer { position: absolute; }
.av-orb { inset: 10% 10%; border-radius: 50%; background: radial-gradient(circle at 30% 30%, rgba(95,199,230,0.6), rgba(136,71,255,0.3) 50%, transparent 70%); filter: blur(20px); }
.av-glass-sphere { 
  inset: 18%;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,0.4), rgba(95,199,230,0.2) 30%, rgba(10,16,24,0.6) 80%);
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: inset 0 0 80px rgba(95,199,230,0.2), inset 0 -20px 60px rgba(0,0,0,0.6), 0 30px 80px rgba(0,0,0,0.6);
  backdrop-filter: blur(4px);
}
.av-floating { display: flex; flex-direction: column; gap: 10px; }

/* FAQ */
.faq-list { display: flex; flex-direction: column; gap: 8px; max-width: 920px; margin: 0 auto; }
.faq-item {
  border-radius: 16px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  overflow: hidden;
  transition: background .2s, border-color .2s;
}
.faq-item.open { background: rgba(255,255,255,0.04); border-color: rgba(95,199,230,0.2); }
.faq-q {
  padding: 22px 24px; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center;
  font-size: 16px; font-weight: 500; gap: 16px;
}
.faq-q .num { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--frost-400); }
.faq-q .chev { transition: transform .3s; color: var(--cyan-bright); }
.faq-item.open .chev { transform: rotate(45deg); }
.faq-a {
  max-height: 0; overflow: hidden;
  transition: max-height .35s ease;
}
.faq-a-inner { padding: 0 24px 22px; color: var(--frost-300); line-height: 1.6; max-width: 720px; font-size: 14.5px; }

/* Contact form */
.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); gap: 40px; align-items: stretch; }
.contact-side { display: flex; flex-direction: column; gap: 0; min-width: 0; }
.contact-side h2 { font-family: 'Space Grotesk', sans-serif; font-size: 48px; line-height: 1.05; letter-spacing: -0.03em; margin-bottom: 24px; }
.contact-side h2 em { color: var(--cyan-bright); font-style: italic; }
.contact-side p { color: var(--frost-300); line-height: 1.6; margin-bottom: 32px; }
.contact-channels { display: flex; flex-direction: column; gap: 14px; }
.channel { display: flex; align-items: center; gap: 14px; padding: 16px 20px; border-radius: 14px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); }
.channel .ic { width: 40px; height: 40px; border-radius: 10px; background: rgba(95,199,230,0.12); color: var(--cyan-bright); display: grid; place-items: center; }
.channel .lbl { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--frost-400); text-transform: uppercase; letter-spacing: 0.06em; }
.channel .val { font-size: 14px; }

.form { padding: 36px; border-radius: 24px; min-width: 0; }
.form-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; margin-bottom: 16px; }
.field { position: relative; }
.field label { position: absolute; top: 16px; left: 18px; font-size: 13px; color: var(--frost-400); pointer-events: none; transition: all .2s; font-family: 'JetBrains Mono', monospace; }
.field input, .field textarea, .field select {
  width: 100%; padding: 24px 18px 12px; border-radius: 12px;
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08);
  color: var(--frost-100); font-family: inherit; font-size: 14px; outline: 0;
  transition: border-color .2s, background .2s;
  resize: none;
}
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--cyan); background: rgba(95,199,230,0.04); }
.field.filled label, .field input:focus + label, .field textarea:focus + label { top: 8px; font-size: 10px; color: var(--cyan-bright); }
.field textarea { min-height: 140px; padding-top: 28px; }
.field.error input, .field.error textarea { border-color: rgba(235,75,75,0.5); }
.field .err-msg { color: #eb4b4b; font-size: 11px; margin-top: 6px; font-family: 'JetBrains Mono', monospace; }
.form-foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 8px; }
.form-foot .legal { font-size: 11.5px; color: var(--frost-400); max-width: 280px; line-height: 1.4; }
.form-foot .btn-cta { margin-left: auto; }

/* Cart drawer */
.cart-drawer-overlay {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(0,0,0,0.5); backdrop-filter: blur(6px);
  opacity: 0; pointer-events: none; transition: opacity .3s;
}
.cart-drawer-overlay.open { opacity: 1; pointer-events: auto; }
.cart-drawer {
  position: fixed; right: 0; top: 0; bottom: 0; z-index: 90;
  width: 460px; max-width: 100vw;
  background: linear-gradient(180deg, rgba(15,24,34,0.98), rgba(10,16,24,0.98));
  backdrop-filter: blur(40px) saturate(180%);
  border-left: 1px solid rgba(255,255,255,0.08);
  transform: translateX(100%); transition: transform .35s cubic-bezier(.2,.8,.2,1);
  display: flex; flex-direction: column;
}
.cart-drawer.open { transform: translateX(0); }
.cart-head { padding: 24px 28px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid rgba(255,255,255,0.06); }
.cart-head h3 { font-family: 'Space Grotesk', sans-serif; font-size: 22px; font-weight: 500; }
.cart-head h3 .cnt { color: var(--cyan-bright); font-family: 'JetBrains Mono', monospace; font-size: 14px; margin-left: 4px; }
.cart-close { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 999px; background: rgba(255,255,255,0.06); cursor: pointer; border: 0; color: var(--frost-100); }
.cart-close:hover { background: rgba(255,255,255,0.12); }
.cart-items { flex: 1; overflow-y: auto; padding: 16px 20px; display: flex; flex-direction: column; gap: 10px; }
.cart-empty { display: grid; place-items: center; height: 100%; color: var(--frost-400); text-align: center; padding: 40px; gap: 16px; flex-direction: column; }
.cart-empty .ic { width: 60px; height: 60px; border-radius: 999px; background: rgba(255,255,255,0.04); display: grid; place-items: center; color: var(--frost-400); }
.cart-item { display: flex; gap: 14px; padding: 12px; border-radius: 14px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.05); }
.cart-item .thumb { width: 70px; height: 70px; border-radius: 10px; flex-shrink: 0; position: relative; overflow: hidden; }
.cart-item .meta { flex: 1; min-width: 0; }
.cart-item .meta .nm { font-size: 13px; font-weight: 500; }
.cart-item .meta .gm { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--frost-400); margin-top: 2px; }
.cart-item .meta .pr { font-family: 'Space Grotesk', sans-serif; font-size: 16px; margin-top: 6px; }
.cart-item .rm { background: transparent; border: 0; color: var(--frost-400); cursor: pointer; padding: 4px; align-self: start; }
.cart-item .rm:hover { color: #eb4b4b; }
.cart-foot { padding: 22px 28px; border-top: 1px solid rgba(255,255,255,0.06); }
.cart-line { display: flex; justify-content: space-between; padding: 6px 0; font-size: 13px; color: var(--frost-300); }
.cart-line.total { font-size: 18px; color: var(--frost-100); font-family: 'Space Grotesk', sans-serif; padding-top: 14px; margin-top: 6px; border-top: 1px solid rgba(255,255,255,0.06); }
.cart-foot .btn-primary { width: 100%; justify-content: center; margin-top: 16px; padding: 16px; }

/* Footer */
.footer { padding: 80px 0 40px; border-top: 1px solid rgba(255,255,255,0.06); margin-top: 60px; }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 60px; }
.footer h5 { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--frost-400); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 16px; }
.footer ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer ul a { color: var(--frost-200); text-decoration: none; font-size: 13.5px; transition: color .2s; }
.footer ul a:hover { color: var(--cyan-bright); }
.footer-bottom { display: flex; justify-content: center; align-items: center; text-align: center; padding-top: 32px; border-top: 1px solid rgba(255,255,255,0.04); font-size: 12px; color: var(--frost-400); font-family: 'JetBrains Mono', monospace; }
.footer__legal { margin-top: 18px; font-size: 12px; color: var(--frost-400); line-height: 1.7; max-width: 300px; }
.footer__legal-name { font-weight: 500; color: var(--frost-200); letter-spacing: 0.02em; }
.footer__legal-mono { font-family: 'JetBrains Mono', monospace; font-size: 11.5px; margin-top: 4px; }
.footer__legal-spacer { margin-top: 6px; }
.footer__payment-marks { display: flex; align-items: center; flex-wrap: wrap; gap: clamp(8px, 1.2vw, 10px); margin-top: 16px; }
.footer__payment-mark { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; line-height: 0; opacity: 0.92; }
.footer__payment-mark svg { display: block; height: auto; max-width: 100%; }
.footer__payment-mark--mastercard svg { width: clamp(28px, 4vw, 34px); }
.footer__payment-mark--3ds svg { width: clamp(35px, 5vw, 43px); }
[data-theme="light"] .footer__legal { color: rgba(10,30,50,0.6); }
[data-theme="light"] .footer__legal-name { color: rgba(10,30,50,0.85); }

/* Toast */
.toast {
  position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%) translateY(100px);
  z-index: 100; padding: 14px 20px; border-radius: 14px;
  background: rgba(15,24,34,0.95); backdrop-filter: blur(20px);
  border: 1px solid rgba(95,199,230,0.4);
  font-size: 14px; display: flex; align-items: center; gap: 10px;
  opacity: 0; transition: all .3s cubic-bezier(.2,.8,.2,1);
  box-shadow: 0 20px 50px -10px rgba(0,0,0,0.6);
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast .ic { color: var(--cyan-bright); }

/* Game category cards */
.cat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 56px; }
@media (max-width: 900px) { .cat-grid { grid-template-columns: repeat(2, 1fr); } }
.cat-card {
  position: relative; padding: 22px 22px 26px; border-radius: 20px;
  background: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
  border: 1px solid rgba(255,255,255,0.06); cursor: pointer;
  transition: all .25s; overflow: hidden; min-height: 140px;
  display: flex; flex-direction: column; justify-content: space-between; gap: 24px;
}
.cat-card::before { content: ''; position: absolute; inset: 0; opacity: 0.5;
  background: radial-gradient(circle at 80% 20%, var(--cat-glow, rgba(95,199,230,0.4)), transparent 60%);
  transition: opacity .3s; }
.cat-card:hover { transform: translateY(-4px); border-color: rgba(95,199,230,0.3); box-shadow: 0 30px 60px -20px rgba(0,0,0,0.6); }
.cat-card:hover::before { opacity: 0.8; }
.cat-card.active { border-color: rgba(95,199,230,0.5); background: linear-gradient(135deg, rgba(95,199,230,0.12), rgba(95,199,230,0.02)); }
.cat-card .cat-name { position: relative; font-family: 'Space Grotesk', sans-serif; font-size: 22px; font-weight: 500; }
.cat-card .cat-meta { position: relative; display: flex; justify-content: space-between; align-items: end; font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--frost-300); letter-spacing: 0.04em; }
.cat-card .cat-meta .arrow { color: var(--cyan-bright); transition: transform .25s; }
.cat-card:hover .cat-meta .arrow { transform: translateX(4px); }
.categories-wrapper {
  padding-bottom: 88px;
}
.categories {
  padding: 0;
}
.home-game-pills.cat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
}
.home-game-pills .cat-card {
  min-height: 118px;
  padding: 20px 20px 22px;
  border-radius: 20px;
}
.home-game-pills .cat-card .cat-name {
  font-size: 22px;
}

/* Home catalogue surface */
/* Use longhand padding-bottom (not the `padding: 0 0 …` shorthand) so the
   horizontal padding supplied by `.wrapper` survives — the shorthand was
   zeroing left/right, leaving home bands flush against the viewport edges
   on every breakpoint (most obvious on mobile). */
.home-catalog-band {
  padding-bottom: 34px;
}

.home-catalog-band .container,
.home-products-section .container {
  max-width: 1220px;
}

.home-products-section {
  padding-bottom: 56px;
}

.home-products {
  margin: 0;
}

.home-products-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin: 0 0 24px;
}

.home-products-kicker {
  margin: 0 0 10px;
  color: var(--cyan-bright);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.home-products-head h2 {
  margin: 0;
  color: var(--frost-100);
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(34px, 5vw, 58px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
}

.home-products-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 15px;
  border-radius: 999px;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.075);
  color: var(--frost-200);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background .18s, border-color .18s, color .18s, transform .18s;
}

.home-products-link:hover {
  transform: translateY(-1px);
  background: rgba(95,199,230,0.095);
  border-color: rgba(95,199,230,0.28);
  color: var(--cyan-bright);
}

.home-product-grid,
.home-products .products__wrapper-mobile.product-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
  width: 100%;
  margin: 0;
}

.home-product-grid .products__block.product-card {
  width: auto !important;
  min-width: 0;
  margin: 0;
  aspect-ratio: 0.78;
}

.home-product-grid .product-card .product-art {
  min-height: 0;
  background: linear-gradient(180deg, rgba(50,87,128,0.28), rgba(95,199,230,0.04));
}

.home-product-grid .product-card .products__img {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 18px 8px;
}

.home-product-grid .product-card .products__img img {
  max-width: 92%;
  max-height: 92%;
  object-fit: contain;
  filter: drop-shadow(0 18px 28px rgba(0,0,0,0.45));
}

.home-product-grid .product-card .products__content {
  background: rgba(12,25,38,0.72);
}

.home-product-grid .product-info .name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.home-product-grid .products__icons {
  position: absolute;
  right: 14px;
  top: 108px;
  z-index: 6;
}

.home-product-grid .products__actions {
  position: absolute;
  top: 46px;
  right: 14px;
  z-index: 7;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

.home-product-grid .products__link {
  width: 28px;
  height: 28px;
  border-radius: 10px;
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.08);
}

.home-product-grid .products__actions .products__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.home-product-grid .products__actions .products__link img {
  width: 14px;
  height: 14px;
}

/* Hero real inventory cluster */
.hero-illust {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  min-height: 480px;
}

.hero-real-items::before {
  content: '';
  position: absolute;
  inset: 8% 6% 6%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 44% 42%, rgba(95,199,230,0.24), transparent 56%),
    radial-gradient(circle at 70% 70%, rgba(217,111,168,0.14), transparent 48%);
  filter: blur(18px);
  opacity: 0.9;
}

.hero-item-card {
  position: absolute;
  display: grid;
  place-items: center;
  min-width: 0;
  padding: 14px;
  border-radius: 22px;
  overflow: hidden;
  text-decoration: none;
  color: var(--frost-50);
  background:
    linear-gradient(180deg, rgba(28,50,70,0.94) 0%, rgba(10,16,24,0.96) 100%),
    rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 28px 70px -32px rgba(0,0,0,0.88), inset 0 1px 0 rgba(255,255,255,0.08);
  transform-origin: center;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.hero-item-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 24%, rgba(95,199,230,0.2), transparent 42%),
    linear-gradient(180deg, transparent 54%, rgba(95,199,230,0.08) 100%);
  pointer-events: none;
}

.hero-item-card:hover {
  border-color: rgba(127,220,245,0.46);
  box-shadow: 0 34px 80px -34px rgba(95,199,230,0.48), inset 0 1px 0 rgba(255,255,255,0.12);
}

.hero-item-card--1 {
  left: 12%;
  top: 4%;
  width: 58%;
  height: 42%;
  z-index: 4;
  transform: rotate(-4deg);
}

.hero-item-card--1:hover { transform: rotate(-4deg) translateY(-4px); }

.hero-item-card--2 {
  right: 11%;
  top: 34%;
  width: 44%;
  height: 38%;
  z-index: 3;
  transform: rotate(5deg);
}

.hero-item-card--2:hover { transform: rotate(5deg) translateY(-4px); }

.hero-item-card--3 {
  left: 3%;
  top: 38%;
  width: 48%;
  height: 39%;
  z-index: 2;
  transform: rotate(-7deg);
}

.hero-item-card--3:hover { transform: rotate(-7deg) translateY(-4px); }

.hero-item-card--4 {
  right: 13%;
  bottom: 2%;
  width: 42%;
  height: 32%;
  z-index: 1;
  transform: rotate(3deg);
}

.hero-item-card--4:hover { transform: rotate(3deg) translateY(-4px); }

.hero-item-card__tag,
.hero-item-card__footer,
.hero-item-card__media {
  position: relative;
  z-index: 1;
}

.hero-item-card__tag {
  align-self: flex-start;
  padding: 5px 9px;
  border-radius: 7px;
  background: rgba(5,8,16,0.58);
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--cyan-bright);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hero-item-card__media {
  display: grid;
  place-items: center;
  min-height: 0;
  width: 100%;
  height: 100%;
  padding: 26px 10px 14px;
}

.hero-item-card__media img {
  width: 100%;
  height: 100%;
  max-height: 210px;
  object-fit: contain;
  /* Nudge just the skin image up inside the card (card position unchanged). */
  transform: translateY(-18px);
  filter: drop-shadow(0 22px 20px rgba(0,0,0,0.45));
}

.hero-item-card.is-missing .hero-item-card__media::before {
  content: '';
  width: 86px;
  height: 58px;
  border-radius: 14px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
}

/* CTA gradient button — bigger, more visible */
.btn-cta {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 18px 28px; border-radius: 16px;
  background: linear-gradient(135deg, #7fdcf5 0%, #5fc7e6 50%, #3aa8c8 100%);
  color: var(--ink-900); font-weight: 700; font-size: 15px; letter-spacing: -0.01em;
  border: 0; cursor: pointer;
  box-shadow: 0 14px 32px -8px rgba(95,199,230,0.5), inset 0 1px 0 rgba(255,255,255,0.5), inset 0 -1px 0 rgba(0,0,0,0.1);
  transition: transform .2s, box-shadow .2s;
  position: relative; overflow: hidden;
}
.btn-cta::after {
  content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
  transition: left .6s;
}
.btn-cta:hover { transform: translateY(-2px); box-shadow: 0 20px 40px -8px rgba(95,199,230,0.7), inset 0 1px 0 rgba(255,255,255,0.5); }
.btn-cta:hover::after { left: 100%; }
.btn-cta .badge {
  background: rgba(5,8,16,0.15); padding: 4px 8px; border-radius: 6px;
  font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 500;
}

/* Page system */
.page-view { display: none; }
.page-view.active { display: block; }

/* Static page hero */
.static-hero { padding: 160px 0 60px; }
.static-hero h1 { font-family: 'Space Grotesk', sans-serif; font-size: clamp(48px, 6vw, 80px); line-height: 1; letter-spacing: -0.03em; font-weight: 500; max-width: 900px; }
.static-hero h1 em { color: var(--cyan-bright); font-style: italic; }
.static-hero .lede { color: var(--frost-200); font-size: 18px; max-width: 640px; margin-top: 20px; line-height: 1.55; }
.static-hero .crumb { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--cyan-bright); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 20px; }

/* Logo only — no wordmark */
.logo-only { width: 36px; height: 36px; cursor: pointer; }


/* Marquee logos */
.marquee-wrap { padding: 40px 0; border-block: 1px solid rgba(255,255,255,0.04); margin-top: 40px; overflow: hidden; }
.marquee { display: flex; gap: 60px; animation: scroll 40s linear infinite; width: max-content; }
@keyframes scroll { to { transform: translateX(-50%); } }
.marquee .game-tag { font-family: 'JetBrains Mono', monospace; color: var(--frost-400); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; display: flex; align-items: center; gap: 12px; white-space: nowrap; }
.marquee .game-tag::before { content: ''; width: 6px; height: 6px; border-radius: 999px; background: var(--cyan); }

/* Skin SVG visuals — abstract weapon stripes */
.skin-art { width: 100%; height: 100%; display: block; }

/* Catalog */
.catalog-page-shell { padding-top: 104px; }
.catalog-page-shell--compact { padding-top: 112px; }
.catalog-page-shell .catalog-hero { margin-bottom: 26px; }
.catalog-page-shell .catalog-hero .breadcrumbs { margin: 0 0 16px; color: var(--frost-400); font-size: 12px; }
.catalog-page-shell .breadcrumbs__item {
  color: var(--frost-400);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.catalog-page-shell .breadcrumbs__item:hover { color: var(--cyan-bright); }
.catalog-hero__row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.catalog-page-shell .crumb {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--cyan-bright);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.catalog-page-shell .block__title {
  margin: 0 0 clamp(20px, 4vw, 36px);
  color: var(--frost-100);
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(24px, 5.5vw, 64px);
  font-weight: 500;
  line-height: 0.98;
  letter-spacing: 0;
  word-break: break-word;
  overflow-wrap: break-word;
}
/* Cart rows — the legacy .table markup collides the price/remove cells on
   desktop (clipping the x) and stacks awkwardly on mobile. Rebuild the row as
   a single responsive flex line that wraps controls onto a second line on
   narrow screens. Columns: 1=image, 2=name, 3=count, 4=price, 5=remove. */
.catalog-page-shell .table,
.catalog-page-shell .table tbody { display: block; }
.catalog-page-shell .table tbody tr {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 18px;
  padding: 18px 22px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.catalog-page-shell .table tbody tr td {
  width: auto;
  padding: 0;
  border: 0;
  display: flex;
  align-items: center;
}
.catalog-page-shell .table tbody tr td:nth-of-type(1) { flex: 0 0 auto; }         /* image */
.catalog-page-shell .table tbody tr td:nth-of-type(2) { flex: 1 1 180px; min-width: 0; } /* name — grows, pushes controls right */
.catalog-page-shell .table tbody tr td:nth-of-type(n+3) { flex: 0 0 auto; }       /* count / price / remove */
.catalog-page-shell .table tbody tr td:last-child { width: auto; justify-content: flex-start; }
.catalog-page-shell .checkout__img { height: 84px; width: auto; border-radius: 12px; }
.catalog-page-shell .checkout__price { min-width: 64px; justify-content: flex-end; text-align: right; }
.catalog-page-shell .checkout__remove { flex: 0 0 auto; }

/* Mobile cart rows — flex wrapping left the remove (x) stranded on its own
   centered line. Use an explicit grid so image + name + remove sit on the
   first line and the count + price share the second, as a clean card. */
@media (max-width: 767px) {
  .catalog-page-shell .table tbody tr {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
      "img   name  remove"
      "count price price";
    align-items: center;
    gap: 14px 14px;
    padding: 18px 18px;
  }
  .catalog-page-shell .table tbody tr td:nth-of-type(1) { grid-area: img; align-items: flex-start; }
  .catalog-page-shell .table tbody tr td:nth-of-type(2) { grid-area: name; }
  .catalog-page-shell .table tbody tr td:nth-of-type(3) { grid-area: count; }
  .catalog-page-shell .table tbody tr td:nth-of-type(4) { grid-area: price; justify-content: flex-start; }
  .catalog-page-shell .table tbody tr td:last-child { grid-area: remove; align-self: flex-start; justify-content: flex-end; }
}

/* Cart agreement — the shared .checkbox__label override sets flex/space-between,
   which spreads the "I agree to … privacy policy … refund policy" links apart
   and, in the narrow centered footer column, wraps them into a cramped block.
   Give the label the full footer width and restore normal sentence flow. */
.catalog-page-shell .checkout__footer .checkbox__label {
  display: block;
  justify-content: normal;
  text-align: left;
  line-height: 1.6;
}
/* DB copy has links butted against surrounding words ("terms ofdelivery"); add
   breathing room and keep each link intact on one line. */
.catalog-page-shell .checkout__footer .checkbox__label a {
  margin: 0 3px;
  white-space: nowrap;
}
/* On mobile the footer stacks into one column; let the agreement span the full
   width so the sentence flows on a couple of lines instead of a cramped block. */
@media (max-width: 767px) {
  .catalog-page-shell .checkout__footer .form__group,
  .catalog-page-shell .checkout__footer .checkbox--inline {
    display: block;
    width: 100%;
    margin: 0;
  }
}
.catalog-hero__meta {
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  color: var(--frost-300);
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  white-space: nowrap;
}
.catalog-page-shell .products { margin: 0; }
.catalog-topbar {
  margin: 0 0 34px;
}
.catalog-game-pills {
  margin: 0;
}
.catalog-page-shell .catalog-game-pills.cat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.catalog-page-shell .catalog-game-pills .cat-card {
  min-height: 118px;
  padding: 20px 20px 22px;
  border-radius: 20px;
}
.catalog-page-shell .catalog-game-pills .cat-card .cat-name { font-size: 22px; }
.catalog-page-shell .catalog__wrapper { display: block; width: 100%; }
.catalog-page-shell .filter__item {
  width: 100%;
  margin: 0 0 34px;
  padding: 0;
  background: transparent !important;
  border: 0;
}
.catalog-page-shell .filter__head { display: none; }
.catalog-page-shell .filter__content {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  min-height: 40px;
  background: transparent;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.catalog-page-shell .filter__content-item {
  position: relative;
  margin: 0;
  padding: 0;
  border: 0;
}
.catalog-page-shell .filter__block-title {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 76px;
  min-height: 40px;
  padding: 0 16px;
  border-radius: 999px;
  background: rgba(5,8,16,0.26);
  border: 1px solid rgba(255,255,255,0.075);
  color: var(--frost-200);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  letter-spacing: 0;
  transition: background .18s, border-color .18s, color .18s, transform .18s;
  white-space: nowrap;
}
.catalog-page-shell .filter__block-title:hover,
.catalog-page-shell .filter__block-title.active {
  background: rgba(95,199,230,0.075);
  border-color: rgba(95,199,230,0.25);
  color: var(--cyan-bright);
}
.catalog-page-shell .filter__block-title:hover { transform: translateY(-1px); }
.catalog-page-shell .filter__block-title::after {
  content: "";
  position: static;
  top: auto;
  right: auto;
  flex: 0 0 6px;
  display: block;
  width: 6px;
  height: 6px;
  border-right: 1.3px solid currentColor;
  border-bottom: 1.3px solid currentColor;
  margin: -3px 0 0 0;
  transform: rotate(45deg);
  opacity: 0.5;
}
.catalog-page-shell .filter__block-title.active::after { transform: rotate(225deg); margin-top: 3px; }
.catalog-page-shell .filter__block-content {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 80;
  width: min(286px, calc(100vw - 48px));
  max-height: 330px;
  overflow: auto;
  padding: 10px;
  border-radius: 14px;
  background: #08101a;
  border: 1px solid rgba(95,199,230,0.32);
  box-shadow: 0 24px 54px rgba(0,0,0,0.78), inset 0 1px 0 rgba(255,255,255,0.055);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  pointer-events: auto;
}
.catalog-page-shell .filter__block-title.active + .filter__block-content { display: block !important; }
.catalog-page-shell .filter__range {
  min-width: 256px;
  padding: 28px 14px 30px;
}
.catalog-page-shell .filter__search { margin-bottom: 10px; }
.catalog-page-shell .filter__search .input,
.catalog-page-shell .select select {
  width: 100%;
  min-height: 36px;
  padding: 0 12px;
  border-radius: 10px;
  background: rgba(255,255,255,0.028);
  border: 1px solid rgba(255,255,255,0.075);
  color: var(--frost-100);
  font-family: inherit;
  font-size: 12.5px;
}
/* Native <option> elements ignore the transparent select background and
   render with the browser default (white-on-white in dark theme). Pin them
   to theme tokens so dropdown items are readable in both themes:
   dark   → --ink-700 dark bg + --frost-100 light text
   light  → --ink-700 light bg + --frost-100 dark text */
.catalog-page-shell .select select option {
  background: var(--ink-700);
  color: var(--frost-100);
}
/* Closed select button: in light theme the surrounding filter popup keeps a
   dark surface, so the near-transparent default background let the dark
   selected-text become invisible. Give the button its own light surface
   here so the dark text (--frost-100 in light) shows up. */
[data-theme="light"] .catalog-page-shell .select select {
  background: rgba(255,255,255,0.95);
  border-color: rgba(10,30,50,0.15);
}
.catalog-page-shell .checkbox {
  display: block;
  margin: 2px 0;
  line-height: 1.2;
}
.catalog-page-shell .checkbox__label {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 34px;
  padding: 7px 10px 7px 34px;
  border-radius: 10px;
  color: var(--frost-200);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.4;
  cursor: pointer;
  transition: background .16s, color .16s;
}
.catalog-page-shell .checkbox__label:hover {
  background: rgba(95,199,230,0.10);
  color: var(--frost-100);
}
.catalog-page-shell .checkbox__label::before {
  width: 20px;
  height: 20px;
  border-radius: 7px;
  top: 7px;
  left: 6px;
  background: rgba(255,255,255,0.045);
  border-color: rgba(255,255,255,0.18);
}
.catalog-page-shell .checkbox__label::after {
  top: 10px;
  left: 13px;
  width: 7px;
  height: 10px;
  border-color: var(--ink-900);
}
.catalog-page-shell .checkbox__input:checked + .checkbox__label::before {
  background: var(--cyan-bright);
  border-color: var(--cyan-bright);
}
.catalog-page-shell .checkbox__input:checked + .checkbox__label {
  background: rgba(95,199,230,0.14);
  color: var(--cyan-bright);
}
.catalog-page-shell .filter__show { display: inline-flex; margin-top: 8px; color: var(--cyan-bright); font-size: 12px; }
.catalog-page-shell .filter__content-footer {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  padding: 0 !important;
  min-height: 40px;
}
.catalog-page-shell .filter__link,
.catalog-page-shell .filter__content-footer .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  min-height: 40px;
  padding: 0 16px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}
.catalog-page-shell .filter__link {
  color: var(--frost-400);
  padding-left: 12px;
  padding-right: 12px;
}
.catalog-page-shell .filter__link:hover { color: var(--cyan-bright); }
.catalog-page-shell .filter__content-footer .btn {
  border: 1px solid rgba(95,199,230,0.24);
  background: rgba(95,199,230,0.09);
  color: var(--cyan-bright);
  box-shadow: none;
}
.catalog-page-shell .filter__content-footer .btn:hover {
  background: rgba(95,199,230,0.16);
  border-color: rgba(95,199,230,0.36);
}
.catalog-page-shell .noUi-target {
  height: 3px;
  margin: 10px 10px 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255,255,255,0.12);
  box-shadow: none;
}
.catalog-page-shell .noUi-connect {
  background: var(--cyan-bright);
}
.catalog-page-shell .noUi-horizontal .noUi-handle {
  width: 16px;
  height: 16px;
  top: -6px;
  right: -8px;
  border-radius: 999px;
  border: 2px solid rgba(8,14,22,0.94);
  background: var(--cyan-bright);
  box-shadow: 0 0 0 4px rgba(95,199,230,0.12);
}
.catalog-page-shell .noUi-handle::before,
.catalog-page-shell .noUi-handle::after {
  display: none;
}
.catalog-page-shell .noUi-tooltip {
  border: 0;
  border-radius: 999px;
  background: rgba(95,199,230,0.16);
  color: var(--frost-100);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  line-height: 1;
  padding: 5px 8px;
  white-space: nowrap;
}
.catalog-page-shell .product-grid,
.catalog-page-shell .products__wrapper.product-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
  align-self: auto !important;
  width: 100%;
}
.catalog-page-shell .products__block.product-card {
  width: auto !important;
  min-width: 0;
  margin: 0;
  aspect-ratio: 0.78;
}
.catalog-page-shell .product-card .product-art {
  min-height: 0;
  background: linear-gradient(180deg, rgba(50,87,128,0.28), rgba(95,199,230,0.04));
}
.catalog-page-shell .product-card .products__img {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 18px 8px;
}
.catalog-page-shell .product-card .products__img img {
  max-width: 92%;
  max-height: 92%;
  object-fit: contain;
  filter: drop-shadow(0 18px 28px rgba(0,0,0,0.45));
}
.catalog-page-shell .product-card .products__img.is-missing::after {
  content: "";
  width: 76px;
  height: 54px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(255,255,255,0.08), rgba(95,199,230,0.05));
  border: 1px solid rgba(255,255,255,0.08);
}
.catalog-page-shell .product-card .products__content { background: rgba(12,25,38,0.72); }
.catalog-page-shell .product-info .name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.catalog-page-shell .products__icons { position: absolute; right: 14px; top: 108px; z-index: 6; }
.catalog-page-shell .products__actions {
  position: absolute;
  top: 46px;
  right: 14px;
  z-index: 7;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}
.catalog-page-shell .products__link {
  width: 28px;
  height: 28px;
  border-radius: 10px;
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(10px);
}
.catalog-page-shell .products__actions .products__link {
  position: static;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 28px;
}
.catalog-page-shell .products__actions .products__link img {
  width: 16px;
  height: 16px;
  object-fit: contain;
}
.catalog-page-shell #pagination-block-wrapper { margin: 30px 0 0; }
.catalog-page-shell .pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: fit-content;
  max-width: 100%;
  min-height: 0;
  margin: 0 auto;
  padding: 0;
  border: 0;
  background: transparent !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.catalog-page-shell .pagination__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  min-width: 42px;
  padding: 0;
  border-radius: 999px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  color: var(--frost-300);
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  transition: background .2s, border-color .2s, color .2s, transform .2s;
}
.catalog-page-shell .pagination__item:hover {
  background: rgba(95,199,230,0.12);
  border-color: rgba(95,199,230,0.34);
  color: var(--cyan-bright);
  transform: translateY(-1px);
}
.catalog-page-shell .pagination__item--current {
  background: rgba(95,199,230,0.18);
  border-color: rgba(95,199,230,0.42);
  color: var(--cyan-bright);
  box-shadow: 0 12px 28px -16px rgba(95,199,230,0.7);
}
.catalog-page-shell .pagination__item--disabled {
  pointer-events: none;
  color: var(--frost-400);
  opacity: 0.58;
}
.catalog-page-shell .pagination__item[aria-label="Previous"],
.catalog-page-shell .pagination__item[aria-label="Next"] {
  color: transparent;
  position: relative;
}
.catalog-page-shell .pagination__item[aria-label="Previous"]::before,
.catalog-page-shell .pagination__item[aria-label="Next"]::before {
  content: "";
  width: 9px;
  height: 9px;
  border-top: 1.6px solid currentColor;
  border-right: 1.6px solid currentColor;
  color: var(--frost-300);
}
.catalog-page-shell .pagination__item[aria-label="Previous"]::before { transform: rotate(225deg); margin-left: 3px; }
.catalog-page-shell .pagination__item[aria-label="Next"]::before { transform: rotate(45deg); margin-right: 3px; }
.catalog-page-shell .pagination__item[aria-label="Previous"].pagination__item--disabled,
.catalog-page-shell .pagination__item[aria-label="Next"].pagination__item--disabled {
  opacity: 0.28;
}

/* Product detail */
.product-detail-shell {
  padding-top: 104px;
  padding-bottom: 96px !important;
}
.product-detail-shell .breadcrumbs {
  margin: 0 0 18px;
  color: var(--frost-400);
}
.product-detail-shell .breadcrumbs__item {
  color: var(--frost-400);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.product-detail-shell .breadcrumbs__item:hover { color: var(--cyan-bright); }
.product-detail-shell > .block__title {
  margin: 0 0 24px;
}
.product-detail-shell > .block__title h1 {
  max-width: 900px;
  /* The base theme sets h1 { margin: 1.6rem 0 }, which leaked a 16px gap above
     the heading (on top of the breadcrumb spacing). Reset it and let
     .block__title own the spacing below. */
  margin: 0;
  color: var(--frost-100);
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(36px, 5vw, 64px);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: 0;
}
.product-detail-shell .product {
  margin: 0;
  padding: 0;
  background: transparent !important;
  border: 0;
}
.product-detail-shell #item_form {
  margin: 0;
}
.product-detail-shell .product__wrapper {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
  gap: 18px;
  align-items: start;
  min-height: 520px;
  padding: 0;
  border-radius: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.product-detail-shell .product__image,
.product-detail-shell .product__info {
  width: auto;
  min-width: 0;
}
.product-detail-shell .product__image {
  display: block;
  padding: 0;
}
.product-detail-shell .product__block,
.product-detail-shell .product__slider-wrapper,
.product-detail-shell .product__images-block,
.product-detail-shell .product__images,
.product-detail-shell .slick-list,
.product-detail-shell .slick-track {
  height: 100%;
  min-height: 452px;
}
.product-detail-shell .product__block {
  position: relative;
  min-height: 520px;
  border-radius: 24px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 48%, rgba(95,199,230,0.2), transparent 46%),
    radial-gradient(circle at 18% 0%, rgba(255,255,255,0.055), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.012));
  border: 1px solid rgba(255,255,255,0.075);
  box-shadow: 0 24px 70px -46px rgba(0,0,0,0.86), inset 0 1px 0 rgba(255,255,255,0.055);
  backdrop-filter: blur(18px) saturate(135%);
  -webkit-backdrop-filter: blur(18px) saturate(135%);
}
.product-detail-shell .product__block::before {
  content: "";
  position: absolute;
  inset: 22px;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(38,75,106,0.22), rgba(6,10,16,0.1));
  border: 1px solid rgba(255,255,255,0.055);
  pointer-events: none;
}
.product-detail-shell .product__block::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(95,199,230,0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(95,199,230,0.028) 1px, transparent 1px);
  background-size: 56px 56px;
  opacity: 0.32;
  pointer-events: none;
}
.product-detail-shell .product__slider-wrapper,
.product-detail-shell .product__images-block,
.product-detail-shell .product__images,
.product-detail-shell .product__img,
.product-detail-shell .product__img a {
  display: grid;
  place-items: center;
}
.product-detail-shell .product__img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
}
.product-detail-shell .product__img a {
  width: 100%;
  min-height: 452px;
}
.product-detail-shell .product__img img {
  display: block;
  max-width: min(72%, 500px);
  max-height: 360px;
  object-fit: contain;
  filter: drop-shadow(0 30px 42px rgba(0,0,0,0.5));
}
.product-detail-shell .product__img.is-missing::after {
  content: "";
  width: 120px;
  height: 84px;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(255,255,255,0.09), rgba(95,199,230,0.06));
  border: 1px solid rgba(255,255,255,0.09);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}
.product-detail-shell .product__info {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 14px;
  min-height: 520px;
  padding: 28px 30px 24px;
  border-radius: 24px;
  overflow: hidden;
  background:
    radial-gradient(circle at 84% 10%, rgba(95,199,230,0.18), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.012)),
    rgba(5,8,16,0.38);
  border: 1px solid rgba(255,255,255,0.085);
  box-shadow: 0 28px 80px -52px rgba(0,0,0,0.9), inset 0 1px 0 rgba(255,255,255,0.06);
  backdrop-filter: blur(18px) saturate(135%);
  -webkit-backdrop-filter: blur(18px) saturate(135%);
}
.product-detail-shell .product__info::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(95,199,230,0.024) 1px, transparent 1px),
    linear-gradient(90deg, rgba(95,199,230,0.024) 1px, transparent 1px);
  background-size: 56px 56px;
  opacity: 0.34;
  pointer-events: none;
}
.product-detail-shell .product__info > * {
  position: relative;
  z-index: 1;
}
.product-detail-shell .product__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  min-height: 0;
  padding: 34px 0 8px;
  border-bottom: 0;
}
.product-detail-shell .product__row .price {
  min-width: 0;
  color: var(--frost-100);
  font-family: 'Space Grotesk', sans-serif;
  font-size: 34px;
  font-weight: 600;
  letter-spacing: 0;
  white-space: nowrap;
}
.product-detail-shell .product__row .wish {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--cyan-bright);
  overflow: hidden;
  transition: background .18s, border-color .18s, transform .18s;
}
.product-detail-shell .product__row .wish:hover {
  transform: translateY(-1px);
  background: rgba(95,199,230,0.09);
  border-color: rgba(95,199,230,0.24);
}
.product-detail-shell .product__row .wish::before {
  content: "";
  width: 16px;
  height: 16px;
  display: block;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.6l-1-1a5.5 5.5 0 1 0-7.8 7.8l1 1L12 21l7.8-7.6 1-1a5.5 5.5 0 0 0 0-7.8Z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.6l-1-1a5.5 5.5 0 1 0-7.8 7.8l1 1L12 21l7.8-7.6 1-1a5.5 5.5 0 0 0 0-7.8Z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.product-detail-shell .product__row .wish img {
  display: none;
}
.product-detail-shell .product__row .btn {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: 52px;
  height: 52px;
  padding: 0 24px;
  border-radius: 999px;
  border: 1px solid rgba(95,199,230,0.28);
  background: rgba(95,199,230,0.15);
  color: var(--cyan-bright);
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  box-shadow: none;
  transition: transform .18s, box-shadow .18s, background .18s, border-color .18s, color .18s;
}
.product-detail-shell .product__row .btn--orange {
  grid-column: 1 / -1;
  min-width: 0;
}
.product-detail-shell .product__row .btn--main {
  grid-column: 1 / -1;
  background: linear-gradient(135deg, var(--cyan), var(--cyan-deep));
  border-color: transparent;
  color: var(--ink-900);
  box-shadow: 0 18px 36px -22px rgba(95,199,230,0.85);
}
.product-detail-shell .product__row .btn--main:hover {
  transform: translateY(-1px);
  box-shadow: 0 22px 42px -22px rgba(95,199,230,0.95);
}
.product-detail-shell .product__row .btn--orange {
  background: rgba(255,255,255,0.09);
  border-color: rgba(255,255,255,0.11);
  color: var(--frost-100);
}
.product-detail-shell .product__row .btn--orange:hover {
  transform: translateY(-1px);
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.18);
}
.product-detail-shell .product__sub-info {
  margin: 0;
  padding: 8px 0 0;
}
.product-detail-shell .table--params {
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0 7px;
  background: transparent;
  color: var(--frost-200);
}
.product-detail-shell .table--params tr {
  border-bottom: 0;
  background: rgba(255,255,255,0.026);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.025);
}
.product-detail-shell .table--params tr:last-child {
  border-bottom: 0;
}
.product-detail-shell .table--params td {
  padding: 13px 18px;
  color: var(--frost-200);
  font-size: 14px;
  font-weight: 500;
  vertical-align: middle;
}
.product-detail-shell .table--params td:first-child {
  width: 44%;
  border-radius: 13px 0 0 13px;
  color: var(--frost-300);
}
.product-detail-shell .table--params td:last-child {
  color: var(--frost-100);
  text-align: right;
  border-radius: 0 13px 13px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.product-detail-shell .products__links,
.product-detail-shell .products__icons {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 0;
}
.product-detail-shell .products__links {
  /* Was position:absolute with no positioned ancestor in .product__info,
     so it anchored to the body and the buttons fell to the very bottom of
     the page, out of view. Keep them in normal flow under the buy panel. */
  position: static;
  justify-content: flex-end;
  margin-top: 12px;
}
.product-detail-shell .products__link {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(255,255,255,0.08);
}
/* The ::before CSS-mask icon was not rendering reliably (button showed up
   blank/empty), so drive the icon from the real <img> instead — same asset
   the product cards use. */
.product-detail-shell .products__link::before {
  display: none;
}
.product-detail-shell .products__link img {
  display: block;
  width: 16px;
  height: 16px;
  object-fit: contain;
}
.product-detail-shell .products__link svg {
  display: block;
  width: 16px;
  height: 16px;
  color: rgba(255,255,255,0.86);
}
.product-detail-shell .products__icons {
  position: absolute;
  left: 30px;
  right: 86px;
  bottom: 24px;
  min-width: 0;
}
.product-detail-shell .products__icon {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.product-detail-shell .products__icon a {
  width: 18px;
  height: 18px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 18px;
  overflow: hidden;
  border-radius: 5px;
  background: rgba(0,0,0,0.38);
  border: 1px solid rgba(255,255,255,0.16);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);
}
.product-detail-shell .products__icon a img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  padding: 1px;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.45));
}
.product-detail-shell .products__icon-tooltip {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  min-width: 0;
  max-width: 100%;
  padding: 0 10px;
  border-radius: 10px;
  background: rgba(95,199,230,0.09);
  border: 1px solid rgba(95,199,230,0.16);
  color: var(--frost-300);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.product-detail-shell > .block__title:not(:first-of-type) {
  margin: 88px 0 28px;
}
/* The breadcrumbs <div> is the first child, so the MAIN title block is not
   :first-of-type and wrongly inherited the 88px top margin above (meant for the
   secondary section titles further down). Reset the title that sits directly
   after the breadcrumbs so it hugs the breadcrumb spacing. */
.product-detail-shell > .breadcrumbs + .block__title {
  margin-top: 0;
}
.product-detail-shell > .block__title h2 {
  color: var(--frost-100);
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(32px, 4.6vw, 56px);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: 0;
}
.product-detail-shell .products__wrapper.similar {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
  width: 100%;
}
.product-detail-shell .products__wrapper.similar .products__block.product-card {
  width: auto !important;
  margin: 0;
  aspect-ratio: 0.78;
}
.product-detail-shell .products__wrapper.similar .product-card .products__img.is-missing::after {
  content: "";
  width: 76px;
  height: 54px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(255,255,255,0.08), rgba(95,199,230,0.05));
  border: 1px solid rgba(255,255,255,0.08);
}

/* Product detail inspection layout */
.product-detail-shell .product__wrapper {
  grid-template-columns: minmax(0, 1.06fr) minmax(420px, 0.94fr);
  gap: 0;
  align-items: start;
  min-height: 580px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 26px;
  background:
    radial-gradient(circle at 22% 20%, rgba(217,111,168,0.11), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0.008));
  box-shadow: 0 34px 90px -58px rgba(0,0,0,0.88), inset 0 1px 0 rgba(255,255,255,0.055);
}
.product-detail-shell .product__image.product-inspector {
  min-height: 558px;
}
.product-detail-shell .product__info {
  min-height: 580px;
  border-radius: 0;
  box-shadow: none;
}
.product-detail-shell .product__image.product-inspector {
  position: relative;
  padding: 56px 48px 58px;
  border-right: 1px solid rgba(255,255,255,0.08);
  background:
    radial-gradient(circle at 12% 50%, rgba(217,111,168,0.10), transparent 40%),
    linear-gradient(180deg, rgba(12,20,32,0.62), rgba(4,7,12,0.42));
}
.product-detail-shell .product__image.product-inspector .product__label,
.product-detail-shell .product__image.product-inspector .label,
.product-detail-shell .product__image.product-inspector .products__badge {
  display: none !important;
}
.product-detail-shell .detail-chip {
  position: absolute;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 0 14px;
  border-radius: 8px;
  color: var(--frost-200);
  background: rgba(5,8,16,0.56);
  border: 1px solid rgba(255,255,255,0.12);
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.product-detail-shell .detail-chip--inspect {
  top: 72px;
  left: 64px;
  color: var(--cyan-bright);
  border-color: rgba(95,199,230,0.32);
  background: rgba(95,199,230,0.07);
}
.product-detail-shell .detail-chip--game {
  top: 72px;
  right: 64px;
}
.product-detail-shell .product__block,
.product-detail-shell .product__slider-wrapper,
.product-detail-shell .product__images-block,
.product-detail-shell .product__images,
.product-detail-shell .slick-list,
.product-detail-shell .slick-track {
  height: auto;
  min-height: 400px;
}
.product-detail-shell .product__block {
  height: auto;
  min-height: 400px;
  border-radius: 0;
  border: 0;
  background:
    radial-gradient(circle at 50% 46%, rgba(95,199,230,0.24), transparent 40%),
    linear-gradient(180deg, rgba(61,132,166,0.46), rgba(11,52,76,0.72));
}
.product-detail-shell .product__block::before {
  inset: 0;
  border-radius: 0;
  background:
    linear-gradient(82deg, transparent 5%, rgba(127,220,245,0.18) 5.2%, transparent 5.8%),
    linear-gradient(87deg, transparent 14%, rgba(127,220,245,0.14) 14.2%, transparent 14.8%),
    linear-gradient(92deg, transparent 31%, rgba(127,220,245,0.16) 31.2%, transparent 31.8%),
    linear-gradient(88deg, transparent 47%, rgba(127,220,245,0.16) 47.2%, transparent 47.8%),
    linear-gradient(91deg, transparent 61%, rgba(127,220,245,0.14) 61.2%, transparent 61.8%),
    linear-gradient(86deg, transparent 78%, rgba(127,220,245,0.14) 78.2%, transparent 78.8%);
  border: 0;
  opacity: 0.9;
}
.product-detail-shell .product__block::after {
  background-image: none;
  background:
    radial-gradient(circle at 34% 42%, rgba(127,220,245,0.55) 0 5px, transparent 6px),
    radial-gradient(circle at 52% 38%, rgba(127,220,245,0.65) 0 6px, transparent 7px),
    radial-gradient(circle at 76% 60%, rgba(127,220,245,0.4) 0 3px, transparent 4px);
  opacity: 0.85;
}
/* Product image sizing on the details page.
   Two conflicting rule sets (1728 / 2128) used to fight in cascade; on some
   pages neither one stuck and the source image rendered at its natural size
   (e.g. a 2000×3000 player sticker took the full viewport width), while on
   others the 220px max-height left a tiny thumbnail centered in a 420px
   block. Unify them here and pin with !important so the rule survives any
   late-loaded theme override; object-fit: contain keeps aspect ratio for
   both very large and very small assets.
   Width uses min(100%, 480px): 100% of the closest sized ancestor (the
   .product__img <a>, which is ~50% of the page block in a 2-col grid),
   capped at 480px. The previous 72% factor was clamping square assets to
   ~259px in narrow ancestors (see Anna's screenshot). */
.product-detail-shell .product__img img {
  max-width: min(100%, 480px) !important;
  max-height: 360px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain;
  filter: drop-shadow(0 24px 26px rgba(0,0,0,0.5));
}
.product-detail-shell .product__img,
.product-detail-shell .product__img a {
  height: auto;
  min-height: 420px;
}
.product-detail-shell .detail-sku {
  position: absolute;
  right: 38px;
  bottom: 28px;
  color: var(--frost-400);
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.12em;
}
.product-detail-shell .product__info {
  gap: 22px;
  padding: 0 40px 38px;
  background: rgba(5,8,16,0.38);
  border: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.product-detail-shell .product__info::before {
  display: none;
}
.product-detail-shell .detail-float-scale {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px 0;
  padding: 8px 0 16px;
  color: var(--frost-400);
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.08em;
}
.product-detail-shell .detail-float-scale span:nth-child(2) {
  text-align: center;
}
.product-detail-shell .detail-float-scale span:nth-child(3) {
  text-align: right;
}
.product-detail-shell .detail-float-track {
  position: relative;
  grid-column: 1 / -1;
  height: 8px;
  border-radius: 999px;
  overflow: visible;
  background:
    linear-gradient(90deg,
      #39dda9 0%,
      #58aeee 18%,
      #5c84b0 38%,
      #f4b168 64%,
      #e37a71 100%);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.08),
    0 10px 22px -16px rgba(95,199,230,0.9);
}
.product-detail-shell .detail-float-track::before {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(255,255,255,0.28), transparent 36%, rgba(0,0,0,0.18));
  opacity: 0.55;
}
.product-detail-shell .detail-float-track i {
  position: absolute;
  top: 50%;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: var(--frost-100);
  border: 3px solid var(--cyan-bright);
  box-shadow: 0 0 0 4px rgba(95,199,230,0.14), 0 4px 12px rgba(0,0,0,0.45);
  transform: translate(-50%, -50%);
}
.product-detail-shell .detail-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 14px;
  overflow: hidden;
  background: rgba(255,255,255,0.02);
}
.product-detail-shell .detail-stat {
  min-width: 0;
  padding: 15px 10px 17px;
  border-right: 1px solid rgba(255,255,255,0.08);
}
.product-detail-shell .detail-stat:last-child {
  border-right: 0;
}
.product-detail-shell .detail-stat div,
.product-detail-shell .detail-section-label {
  color: var(--frost-400);
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.product-detail-shell .detail-stat strong {
  display: block;
  margin-top: 8px;
  color: var(--frost-100);
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.product-detail-shell .detail-stat strong.accent {
  color: var(--cyan-bright);
}
.product-detail-shell .detail-sticker-stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.product-detail-shell .detail-sticker-row {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 64px;
  padding: 10px 12px;
  border-radius: 12px;
  color: var(--frost-100);
  text-decoration: none;
  background: rgba(255,255,255,0.035);
  border: 1px solid rgba(255,255,255,0.075);
}
.product-detail-shell .detail-sticker-row.is-empty {
  color: var(--frost-300);
}
.product-detail-shell .detail-sticker-icon {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--cyan-bright), var(--cyan-deep));
  color: #fff;
  font-size: 18px;
}
.product-detail-shell .detail-sticker-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 3px;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.35));
}
.product-detail-shell .detail-sticker-row strong {
  display: block;
  color: var(--frost-100);
  font-size: 16px;
  font-weight: 600;
}
.product-detail-shell .detail-sticker-row small {
  display: block;
  margin-top: 3px;
  color: var(--frost-400);
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.06em;
}
.product-detail-shell .detail-fingerprint {
  margin-top: 10px;
  padding: 24px;
  border-radius: 14px;
  background: rgba(255,255,255,0.028);
  border: 1px solid rgba(255,255,255,0.075);
}
.product-detail-shell .detail-fingerprint .detail-section-label {
  margin-bottom: 16px;
}
.product-detail-shell .detail-proof {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 9px;
  color: var(--frost-300);
  font-size: 15px;
  line-height: 1.5;
}
.product-detail-shell .detail-proof > span:first-child {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  margin-top: 2px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(127,220,176,0.18);
  color: #7fdcb0;
  font-size: 12px;
  font-weight: 700;
}
.product-detail-shell .detail-proof strong {
  color: var(--frost-100);
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600;
  /* Keep multi-token values (e.g. "05:15 UTC") on one line. */
  white-space: nowrap;
}
/* Text column next to the ✓ icon. One flex item so the content wraps as a
   normal text block (wrapped lines stay in this column, past the icon). */
.product-detail-shell .detail-proof__body {
  flex: 1 1 auto;
  min-width: 0;
}
/* Keep short label/description phrases and inline values from breaking
   mid-phrase; they still wrap as whole units relative to each other. */
.product-detail-shell .detail-proof__phrase {
  white-space: nowrap;
}
.product-detail-shell .detail-buy-panel {
  margin-top: auto;
  padding-top: 26px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.product-detail-shell .detail-buy-panel .product__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 56px minmax(220px, auto);
  gap: 14px;
  align-items: center;
  padding: 0;
}
.product-detail-shell .detail-buy-panel .product__row .price {
  grid-column: 1;
  grid-row: 1;
  font-size: 42px;
  line-height: 1;
}
.product-detail-shell .detail-buy-panel .product__row .wish {
  grid-column: 2;
  grid-row: 1;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: rgba(255,255,255,0.035);
  border-color: rgba(255,255,255,0.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}
.product-detail-shell .detail-buy-panel .product__row .btn {
  grid-column: 3;
  grid-row: 1;
  width: 100%;
  min-width: 220px;
  height: 56px;
  min-height: 56px;
  border-radius: 16px;
}
.product-detail-shell .detail-buy-panel .product__row .btn--main {
  background: rgba(127,220,176,0.13);
  border: 1px solid rgba(127,220,176,0.38);
  color: #7fdcb0;
  box-shadow: none;
}
.product-detail-shell .detail-buy-panel .product__row .btn--orange {
  background: rgba(127,220,176,0.13);
  border: 1px solid rgba(127,220,176,0.38);
  color: #7fdcb0;
  box-shadow: none;
}
.product-detail-shell .detail-buy-panel .product__row .btn.hidden {
  display: none !important;
}
/* Steam / inspect links — were hidden entirely (the buttons were blank and
   mis-positioned), now restored with a working icon and normal-flow layout
   (see the .products__links / .products__link rules above). */
.product-detail-shell .products__links {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 12px;
}

/* Auth modal */
.remodal:has(.auth-tabs) {
  width: min(100%, 440px) !important;
  max-width: calc(100vw - 32px) !important;
  padding: 28px !important;
  border-radius: 24px !important;
  background: linear-gradient(180deg, rgba(12, 18, 28, 0.97), rgba(6, 10, 16, 0.98)) !important;
  border: 1px solid rgba(127, 220, 245, 0.14) !important;
  color: var(--frost-100) !important;
  text-align: left !important;
  box-shadow:
    0 28px 90px rgba(0, 0, 0, 0.68),
    inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}
.remodal-wrapper:has(.auth-tabs) {
  padding: 24px 16px !important;
}
.remodal:has(.auth-tabs) .remodal-close {
  top: 28px;
  right: 28px;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.08);
  opacity: 1;
}
.remodal:has(.auth-tabs) .remodal-close:hover {
  background: rgba(95, 199, 230, 0.12);
  border-color: rgba(95, 199, 230, 0.28);
}
.remodal:has(.auth-tabs) .remodal-close::before,
.remodal:has(.auth-tabs) .remodal-close::after {
  background: var(--frost-200);
}
.remodal .auth-tabs {
  width: 100%;
}
.remodal .auth-tabs .tabs__nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  width: calc(100% - 42px);
  margin: 0 0 24px;
  padding: 4px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.035);
}
.remodal .auth-tabs .tabs__nav::after {
  content: none;
}
.remodal .auth-tabs .tabs__nav-item {
  display: grid;
  min-height: 44px;
  place-items: center;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: 12px;
  color: var(--frost-300);
  font-family: 'Space Grotesk', sans-serif;
  font-size: 18px;
  font-weight: 650;
  line-height: 1;
  letter-spacing: 0;
  text-decoration: none;
  transition: background .18s, border-color .18s, color .18s;
}
.remodal .auth-tabs .tabs__nav-item:hover {
  color: var(--frost-100);
  background: rgba(255, 255, 255, 0.045);
}
.remodal .auth-tabs .tabs__nav-item.active {
  color: var(--frost-100);
  background: rgba(95, 199, 230, 0.13);
  border-color: rgba(95, 199, 230, 0.30);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
/* Single-tab modals (e.g. Recovery) have no tab switcher — drop the segmented
   pill/box treatment and render the lone item as a plain title heading. */
.remodal .auth-tabs--single .tabs__nav {
  display: block;
  width: auto;
  margin: 0 0 20px;
  padding: 0 0 16px;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0;
  background: none;
}
.remodal .auth-tabs--single .tabs__nav-item,
.remodal .auth-tabs--single .tabs__nav-item.active,
.remodal .auth-tabs--single .tabs__nav-item:hover {
  display: block;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--frost-100);
  font-size: 22px;
  text-align: left;
}
.remodal .auth-tabs .tabs__content,
.remodal .auth-tabs .remodal__body,
.remodal .auth-tabs .profile__form {
  width: 100%;
}
.remodal .auth-tabs .profile__form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.remodal .auth-tabs .form__group {
  margin: 0;
}
.remodal .auth-tabs .profile__form .input__wrapper {
  position: relative;
  display: flex;
  align-items: stretch;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  height: auto;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.remodal .auth-tabs .profile__form .label {
  position: static !important;
  display: block;
  align-self: flex-start;
  margin: 0;
  color: var(--frost-400);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.remodal .auth-tabs .profile__form .input {
  width: 100%;
  min-height: 52px;
  height: 52px;
  padding: 0 16px !important;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.035);
  color: var(--frost-100);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 15px;
  line-height: 52px;
  outline: 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transition: background .18s, border-color .18s, box-shadow .18s;
}
.remodal .auth-tabs .profile__form .input:focus {
  background: rgba(95, 199, 230, 0.07);
  border-color: rgba(95, 199, 230, 0.45);
  box-shadow: 0 0 0 3px rgba(95, 199, 230, 0.10);
}
.remodal .auth-tabs .profile__form .input__wrapper.error .input {
  border-color: rgba(235, 75, 75, 0.52);
  box-shadow: 0 0 0 3px rgba(235, 75, 75, 0.10);
}
/* Field validation message. The base theme absolutely-positions .input__error
   inside the field (top:50%; right:2rem); override it to flow as a block below
   the field, left-aligned, matching the rest of the form's error styling. */
.remodal .auth-tabs .profile__form .input__error {
  position: static;
  display: block;
  transform: none;
  margin-top: 7px;
  color: #ff8a8a;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.35;
  text-align: left;
}
.remodal .auth-tabs .js-alert.alert {
  margin: 0 0 14px;
  padding: 12px 14px;
  border: 1px solid rgba(235, 75, 75, 0.24);
  border-radius: 13px;
  background: rgba(235, 75, 75, 0.10);
  color: #ffb6b6;
  font-size: 13px;
  line-height: 1.4;
}
.remodal .auth-tabs .js-alert.alert.alert--green {
  border-color: rgba(42, 211, 139, 0.34);
  background: rgba(42, 211, 139, 0.12);
  color: #9ff0c8;
}
.remodal .auth-tabs .js-alert.alert.alert--red {
  border-color: rgba(235, 75, 75, 0.28);
  background: rgba(235, 75, 75, 0.12);
  color: #ffb6b6;
}
.remodal .auth-tabs .form__actions {
  margin-top: 4px;
}
.remodal .auth-tabs .form__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
}
.remodal .auth-tabs .form__row .btn,
.remodal .auth-tabs .form__row .btn--main {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 152px;
  min-height: 54px;
  padding: 0 26px;
  border: 1px solid rgba(95, 199, 230, 0.50);
  border-radius: 16px;
  background: linear-gradient(135deg, #60c8e8, #3aa7cf);
  color: #061018;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 750;
  line-height: 1;
  text-transform: none;
  box-shadow: 0 16px 40px rgba(58, 167, 207, 0.24);
}
.remodal .auth-tabs .form__row .btn:hover,
.remodal .auth-tabs .form__row .btn--main:hover {
  transform: translateY(-1px);
  box-shadow: 0 20px 46px rgba(58, 167, 207, 0.30);
}
.remodal .auth-tabs .form__link {
  color: var(--cyan-bright);
  font-size: 14px;
  font-weight: 650;
  line-height: 1.4;
  text-decoration: none;
  white-space: nowrap;
}
.remodal .auth-tabs .form__link:hover {
  color: var(--frost-100);
}
.remodal .auth-tabs .checkbox {
  margin: 0;
}
.remodal .auth-tabs .checkbox__label {
  position: relative;
  display: block;
  min-height: 24px;
  padding-left: 34px;
  color: var(--frost-300);
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.55;
  text-align: left;
}
.remodal .auth-tabs .checkbox__label::before {
  top: 0;
  left: 0;
  width: 22px;
  height: 22px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.04);
}
.remodal .auth-tabs .checkbox__label::after {
  top: 5px;
  left: 8px;
  width: 5px;
  height: 10px;
  border: solid #061018;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.remodal .auth-tabs .checkbox__input:checked + .checkbox__label::before {
  background: var(--cyan-bright);
  border-color: var(--cyan-bright);
}
/* Error state — the agreement checkbox is required; when the form is submitted
   unchecked, FormSubmit adds .error to the .checkbox so the box turns red.
   Guarded with :not(:checked) so that once the user ticks the box the checked
   (cyan) state wins immediately — the .error class lingers (there is no
   realtime validation to clear it), but a checked box must never look red. */
.remodal .auth-tabs .checkbox.error .checkbox__input:not(:checked) + .checkbox__label::before {
  border-color: #e5484d;
  background: rgba(229, 72, 77, 0.08);
}
.remodal .auth-tabs .checkbox.error .checkbox__input:not(:checked) + .checkbox__label {
  color: #e5484d;
}
.remodal .auth-tabs .checkbox__label a {
  color: var(--cyan-bright);
  text-decoration: none;
}

/* Policy pages */
/* The policy module also tags <body> with the policy-page class, so the
   bare ".policy-page" selector matched both the body and the .wrapper —
   constraining the whole document to 1040px without an auto margin and
   pushing every page section (including the footer) into a narrow left
   column. Scope to the wrapper so only the content column is constrained. */
.wrapper.policy-page {
  max-width: 1040px;
  padding-top: 104px;
  padding-bottom: 104px !important;
}
.policy-page .breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 22px;
  color: var(--frost-400);
}
.policy-page .breadcrumbs__item {
  color: var(--frost-400);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.policy-page .breadcrumbs__item:hover { color: var(--cyan-bright); }
.policy-page > .block__title {
  margin: 0 0 30px;
}
.policy-page > .block__title h1 {
  max-width: 760px;
  color: var(--frost-100);
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(34px, 5vw, 56px);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: 0;
}
.policy-page .text__page {
  max-width: 960px;
  /* Base theme sets padding-bottom:12rem (120px), which stacked with the
     wrapper and footer spacing into a huge empty gap below the legal text. */
  padding-bottom: 40px;
}
.policy-page .block__text {
  color: var(--frost-200);
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.72;
}
.policy-page .block__text h1,
.policy-page .block__text h2,
.policy-page .block__text h3,
.policy-page .block__text h4 {
  color: var(--frost-100);
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  line-height: 1.22;
  letter-spacing: 0;
}
.policy-page .block__text h1 {
  margin: 0 0 10px;
  font-size: clamp(24px, 3vw, 32px);
}
.policy-page .block__text h2 {
  margin: 34px 0 14px;
  font-size: 22px;
}
.policy-page .block__text h3 {
  margin: 28px 0 12px;
  font-size: 18px;
}
.policy-page .block__text h4 {
  margin: 22px 0 10px;
  font-size: 16px;
}
.policy-page .block__text p,
.policy-page .block__text li {
  margin: 0 0 14px;
  color: var(--frost-200);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.72;
}
.policy-page .block__text strong,
.policy-page .block__text b {
  color: var(--frost-100);
  font-weight: 600;
}
.policy-page .block__text a {
  overflow-wrap: anywhere;
  word-break: break-word;
}
.policy-page .block__text ul,
.policy-page .block__text ol {
  margin: 0 0 18px 20px;
  padding: 0;
}
.policy-page .block__text ul { list-style: disc; }
.policy-page .block__text ol { list-style: decimal; }

@media (max-width: 1180px) {
  .catalog-page-shell .product-grid,
  .catalog-page-shell .products__wrapper.product-grid,
  .home-product-grid,
  .home-products .products__wrapper-mobile.product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1040px) {
  .product-detail-shell .product__wrapper {
    grid-template-columns: 1fr;
  }
  .product-detail-shell .products__wrapper.similar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 860px) {
  .catalog-hero__row { align-items: flex-start; flex-direction: column; }
  .catalog-page-shell .filter__content-footer { width: 100%; margin-left: 0; }
  .catalog-page-shell .filter__content-footer .btn { flex: 1; }
  .catalog-page-shell .product-grid,
  .catalog-page-shell .products__wrapper.product-grid,
  .home-product-grid,
  .home-products .products__wrapper-mobile.product-grid,
  .product-detail-shell .products__wrapper.similar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .product-detail-shell .product__row {
    align-items: stretch;
  }
  .product-detail-shell .product__row .price {
    flex-basis: 100%;
    text-align: left;
  }
  .product-detail-shell .product__row .wish,
  .product-detail-shell .product__row .btn {
    width: 100%;
  }
}

@media (max-width: 900px) {
  .catalog-page-shell .catalog-game-pills.cat-grid,
  .home-game-pills.cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .home-products-head {
    align-items: flex-start;
    flex-direction: column;
  }
  .home-products-link {
    width: 100%;
  }
  .policy-page {
    padding-top: 86px;
    padding-left: 24px;
    padding-right: 24px;
  }
  .policy-page > .block__title h1 { font-size: 34px; }
  .policy-page .block__text,
  .policy-page .block__text p,
  .policy-page .block__text li {
    font-size: 14px;
    line-height: 1.68;
  }
  .catalog-page-shell .filter__content-item,
  .catalog-page-shell .filter__block-title,
  .catalog-page-shell .filter__content-footer,
  .catalog-page-shell .filter__link,
  .catalog-page-shell .filter__content-footer .btn { width: 100%; }
  .catalog-page-shell .filter__block-content { width: calc(100vw - 48px); }
  .catalog-page-shell .catalog-game-pills.cat-grid,
  .home-game-pills.cat-grid { grid-template-columns: 1fr; }
  .catalog-page-shell .product-grid,
  .catalog-page-shell .products__wrapper.product-grid,
  .home-product-grid,
  .home-products .products__wrapper-mobile.product-grid,
  .product-detail-shell .products__wrapper.similar { grid-template-columns: 1fr; }
  .product-card__meta {
    top: 10px;
    left: 10px;
    right: 10px;
    gap: 6px;
  }
  .product-card__tags,
  .product-card__tools,
  .product-card__meta .products__icons,
  .product-card__meta .products__actions {
    gap: 5px;
  }
  .product-card__meta .game-tag-card,
  .product-card__meta .rarity-tag {
    padding: 4px 8px;
    font-size: 9.5px;
  }
  .product-card__meta .products__icon,
  .product-card__meta .products__link {
    width: 26px;
    height: 26px;
    flex-basis: 26px;
    border-radius: 9px;
  }
  .product-card__meta .products__icon img,
  .product-card__meta .products__link img {
    width: 14px;
    height: 14px;
  }
  .catalog-page-shell .pagination { gap: 6px; flex-wrap: wrap; }
  .catalog-page-shell .pagination__item { width: 38px; height: 38px; min-width: 38px; }
  .product-detail-shell {
    padding-top: 86px;
    padding-left: 20px;
    padding-right: 20px;
  }
  .product-detail-shell .product__wrapper {
    padding: 0;
    border-radius: 0;
    gap: 16px;
  }
  .product-detail-shell .product__info {
    padding: 20px;
  }
  .product-detail-shell .product__block,
  .product-detail-shell .product__slider-wrapper,
  .product-detail-shell .product__images-block,
  .product-detail-shell .product__images,
  .product-detail-shell .slick-list,
  .product-detail-shell .slick-track,
  .product-detail-shell .product__img a {
    min-height: 300px;
  }
  .product-detail-shell .product__img img {
    max-height: 250px;
  }
  .product-detail-shell .table--params td {
    display: block;
    padding: 12px 14px 0;
    text-align: left !important;
  }
  .product-detail-shell .table--params td:first-child {
    border-radius: 14px 14px 0 0;
  }
  .product-detail-shell .table--params td:last-child {
    padding: 4px 14px 12px;
    border-radius: 0 0 14px 14px;
  }
  .remodal:has(.auth-tabs) {
    padding: 22px !important;
  }
  .remodal .auth-tabs .tabs__nav-item {
    min-height: 40px;
    font-size: 16px;
  }
  .remodal .auth-tabs .form__row {
    align-items: stretch;
    flex-direction: column;
  }
  .remodal .auth-tabs .form__row .btn,
  .remodal .auth-tabs .form__row .btn--main {
    width: 100%;
  }
  .remodal .auth-tabs .form__link {
    text-align: center;
  }
}

/* Responsive */
@media (max-width: 900px) {
  .hero-grid, .about-grid, .contact-grid { grid-template-columns: 1fr; gap: 40px; }
  /* Keep the overlapping fanned collage on mobile (the flattened grid was
     dropped per design). Constrain the illustration to a square sized off its
     width (min-height:0 so aspect-ratio:1/1 from the desktop rule drives the
     height) — the absolute % positioned cards then fit inside without clipping. */
  .hero-illust {
    max-width: 460px;
    min-height: 0;
    margin: 0 auto;
  }
  /* Uniform card size on mobile — desktop fans four different-sized cards; on
     mobile make them all equal while keeping the fanned positions/rotations. */
  .hero-item-card--1,
  .hero-item-card--2,
  .hero-item-card--3,
  .hero-item-card--4 {
    width: 50%;
    height: 36%;
  }
  .hero-item-card--1 { left: 6%;  top: 3%;  }
  .hero-item-card--2 { right: 6%; top: 24%; left: auto; }
  .hero-item-card--3 { left: 4%;  top: 40%; }
  .hero-item-card--4 { right: 6%; top: 61%; bottom: auto; left: auto; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .nav-links { display: none; }
}

@media (max-width: 600px) {
  .hero-item-card {
    border-radius: 18px;
    padding: 12px;
  }
  .hero-item-card__name {
    font-size: 12px;
  }
  .hero-item-card__price {
    font-size: 16px;
  }
  .form { padding: 24px; }
  .form-row { grid-template-columns: 1fr; }
  .form-foot { align-items: stretch; }
  .form-foot .legal { max-width: none; }
  .form-foot .btn-cta { width: 100%; justify-content: center; margin-left: 0; }
}

@media (max-width: 560px) {
  .wrapper.hero-wrapper {
    padding-left: 16px;
    padding-right: 16px;
    overflow: hidden;
  }
  .hero-grid,
  .hero .container,
  .hero .lede,
  .hero-actions,
  .hero-stats,
  .eyebrow {
    max-width: calc(100vw - 64px);
    min-width: 0;
  }
  .hero-grid {
    width: calc(100vw - 64px);
  }
  .hero-grid > * {
    max-width: calc(100vw - 64px);
    min-width: 0;
  }
  .hero h1,
  .hero p.lede,
  .hero .lede,
  .hero-illust {
    max-width: calc(100vw - 64px);
  }
  .eyebrow {
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .hero-actions {
    width: 100%;
  }
  .hero-actions .btn-cta,
  .hero-actions .btn-ghost {
    width: 100%;
    justify-content: center;
  }
  .hero-actions .btn-cta {
    gap: 8px;
    padding-left: 16px;
    padding-right: 16px;
    flex-wrap: wrap;
  }
  .hero-actions .btn-cta .badge {
    margin-left: auto;
  }
}

/* Smooth scroll */
html { scroll-behavior: smooth; }

/* Selection */
::selection { background: var(--cyan); color: var(--ink-900); }

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.16); }

/* Cabinet dashboard */
.cabinet-page-shell {
  max-width: 1320px;
  margin: 0 auto;
  padding: 132px 32px 72px;
}
.cabinet-page-shell > .block__title {
  margin: 0 0 28px;
}
.cabinet-page-shell > .block__title h1 {
  margin: 0;
  color: var(--frost-100);
  font-family: 'Space Grotesk', Inter, sans-serif;
  font-size: clamp(42px, 6vw, 86px);
  line-height: 0.95;
  font-weight: 700;
  letter-spacing: 0;
}
.cabinet-dashboard {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
}
.cabinet-dashboard .cabinet__block {
  width: 100%;
}
.cabinet-dashboard .cabinet__block-item {
  padding: 24px;
  background: linear-gradient(135deg, rgba(255,255,255,0.055), rgba(255,255,255,0.025));
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 8px;
  box-shadow: 0 22px 60px -34px rgba(0,0,0,0.8), inset 0 1px 0 rgba(255,255,255,0.06);
}
.cabinet-dashboard .cabinet__title {
  margin: 0 0 16px;
  color: var(--frost-100);
  font-family: 'Space Grotesk', Inter, sans-serif;
  font-size: 22px;
  line-height: 1.25;
  font-weight: 600;
}
.cabinet-dashboard .cabinet-empty-state {
  min-height: 76px;
  display: flex;
  align-items: center;
  padding: 18px 20px;
  color: var(--frost-300);
  background: rgba(5,8,16,0.42);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
}
.cabinet-dashboard .table--cabinet {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  color: var(--frost-200);
  background: rgba(5,8,16,0.38);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
}
.cabinet-dashboard .table--cabinet th,
.cabinet-dashboard .table--cabinet td {
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.cabinet-dashboard .table--cabinet th {
  color: var(--frost-300);
  font-size: 12px;
  text-align: left;
  text-transform: uppercase;
}
.cabinet-dashboard .table--cabinet td a,
.cabinet-dashboard .table--cabinet .price {
  color: var(--cyan-bright);
}
.cabinet-dashboard .table--cabinet tr:last-child td {
  border-bottom: 0;
}
.cabinet-dashboard .cabinet__discount {
  display: grid;
  gap: 14px;
}
.cabinet-dashboard .cabinet__discount .title {
  color: var(--frost-100);
  font-family: 'Space Grotesk', Inter, sans-serif;
  font-size: 24px;
  font-weight: 600;
}
.cabinet-dashboard .cabinet__discount .text {
  max-width: 640px;
  color: var(--frost-300);
  font-size: 15px;
  line-height: 1.55;
}
.cabinet-dashboard .cabinet__discount .btn,
.cabinet-dashboard .referral__link .btn {
  width: max-content;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  color: var(--ink-900);
  background: linear-gradient(135deg, var(--cyan-bright), var(--cyan));
  border: 0;
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none;
}
.cabinet-dashboard .discount__block {
  display: grid;
  gap: 12px;
  margin-top: 8px;
  padding: 18px;
  background: rgba(5,8,16,0.42);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
}
.cabinet-dashboard .discount__heading {
  color: var(--frost-200);
  font-size: 15px;
}
.cabinet-dashboard .discount__heading .gray {
  color: var(--frost-300);
}
.cabinet-dashboard .discount__heading b,
.cabinet-dashboard .referral__heading b,
.cabinet-dashboard .referral__text b,
.cabinet-dashboard .referral__total b {
  color: var(--cyan-bright);
}
.cabinet-dashboard .discount__progress {
  height: 10px;
  overflow: hidden;
  background: rgba(255,255,255,0.07);
  border-radius: 999px;
}
.cabinet-dashboard .discount__progress .progress {
  height: 100%;
  background: linear-gradient(90deg, var(--cyan), var(--magenta));
  border-radius: inherit;
}
.cabinet-dashboard .discount__steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
}
.cabinet-dashboard .discount__steps .step {
  padding: 10px 12px;
  color: var(--frost-300);
  background: rgba(255,255,255,0.035);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  font-size: 13px;
}
.cabinet-dashboard .discount__steps .step.active {
  color: var(--cyan-bright);
  border-color: rgba(95,199,230,0.38);
  background: rgba(95,199,230,0.08);
}
.cabinet-dashboard .cabinet__referral {
  display: grid;
  gap: 16px;
}
.cabinet-dashboard .referral__heading {
  color: var(--frost-100);
  font-family: 'Space Grotesk', Inter, sans-serif;
  font-size: 24px;
  font-weight: 600;
}
.cabinet-dashboard .referral__heading span {
  display: block;
  margin-top: 6px;
  color: var(--frost-300);
  font-family: Inter, sans-serif;
  font-size: 14px;
  font-weight: 400;
}
.cabinet-dashboard .referral__link {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
}
.cabinet-dashboard .referral__link .input,
.cabinet-dashboard .referral__item .input {
  width: 100%;
  min-height: 48px;
  padding: 0 16px;
  color: var(--frost-100);
  background: rgba(5,8,16,0.46);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  font: 700 15px/1.2 Inter, sans-serif;
  opacity: 1;
  -webkit-text-fill-color: var(--frost-100);
}
.cabinet-dashboard .referral__text {
  max-width: 860px;
  color: var(--frost-200);
  font-size: 15px;
  line-height: 1.6;
}
.cabinet-dashboard .referral__info {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.cabinet-dashboard .referral__item {
  display: grid;
  gap: 8px;
  min-width: 0;
}
.cabinet-dashboard .referral__item .title {
  color: var(--frost-300);
  font-size: 12px;
  text-transform: uppercase;
}
.cabinet-dashboard .referral__total {
  color: var(--frost-200);
  font-size: 15px;
}

@media (max-width: 760px) {
  .cabinet-page-shell {
    padding: 110px 18px 56px;
  }
  .cabinet-dashboard .cabinet__block-item {
    padding: 18px;
  }
  .cabinet-dashboard .referral__link,
  .cabinet-dashboard .referral__info {
    grid-template-columns: 1fr;
  }
  .cabinet-dashboard .referral__link .btn,
  .cabinet-dashboard .cabinet__discount .btn {
    width: 100%;
  }
}

/* Account dashboard reference layout */
details.header__profile > summary {
  list-style: none;
}
details.header__profile > summary::-webkit-details-marker {
  display: none;
}
details.header__profile[open] .profile__menu,
.header__profile.opened .profile__menu,
.header__profile:focus-within .profile__menu,
.header__profile-link:focus + .profile__menu,
.header__profile-link.active + .profile__menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}
.cabinet-page-shell:has(.account-dashboard) > .block__title {
  display: none;
}
.cabinet-page-shell:has(.account-dashboard) > .path,
.cabinet-page-shell:has(.account-dashboard) > .breadcrumbs {
  display: none;
}
.cabinet-page-shell:has(.account-dashboard) {
  padding-top: 104px;
}
.account-dashboard {
  display: grid;
  gap: clamp(22px, 2.6vw, 34px);
}
.account-dashboard__hero {
  padding-top: 4px;
}
.account-dashboard__eyebrow {
  margin-bottom: 14px;
  color: var(--cyan-bright);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.account-dashboard__hero h1 {
  max-width: 760px;
  margin: 0;
  color: var(--frost-100);
  font-family: 'Space Grotesk', Inter, sans-serif;
  font-size: clamp(36px, 4.2vw, 56px);
  line-height: 1.05;
  font-weight: 500;
  letter-spacing: 0;
}
.account-dashboard__hero h1 span {
  color: var(--cyan-bright);
  font-style: italic;
  font-weight: 600;
}
.account-dashboard__hero p {
  max-width: 620px;
  margin: 14px 0 0;
  color: var(--frost-200);
  font-size: 17px;
  line-height: 1.5;
}
.account-dashboard__notice {
  max-width: 720px;
  padding: 18px 22px;
  color: var(--frost-100);
  background: linear-gradient(135deg, rgba(95,199,230,0.18), rgba(95,199,230,0.06));
  border: 1px solid rgba(95,199,230,0.44);
  border-radius: 8px;
  box-shadow: 0 18px 48px -28px rgba(95,199,230,0.72);
}
.account-dashboard__stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.account-stat {
  min-height: 112px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 20px 22px;
  background: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.018));
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 8px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
.account-stat--highlight {
  background:
    radial-gradient(circle at 88% 88%, rgba(217,111,168,0.12), transparent 48%),
    linear-gradient(135deg, rgba(255,255,255,0.045), rgba(255,255,255,0.02));
}
.account-stat__label {
  margin-bottom: 12px;
  color: var(--frost-400);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.account-stat__value {
  color: var(--frost-100);
  font-size: 30px;
  line-height: 1;
  font-weight: 600;
}
.account-stat--highlight .account-stat__value {
  color: var(--cyan-bright);
}
.account-stat__meta {
  margin-top: 9px;
  color: var(--frost-400);
  font-size: 14px;
  line-height: 1.35;
}
.account-history {
  display: grid;
  gap: 20px;
}
.account-history__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.account-history__head h2 {
  margin: 0;
  color: var(--frost-100);
  font-family: 'Space Grotesk', Inter, sans-serif;
  font-size: clamp(24px, 2.1vw, 32px);
  line-height: 1.05;
  font-weight: 600;
}
.account-history__head div {
  color: var(--frost-400);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  white-space: nowrap;
}
.account-empty-orders {
  min-height: 280px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 22px;
  text-align: center;
  background:
    radial-gradient(circle at 82% 88%, rgba(136,71,255,0.13), transparent 46%),
    linear-gradient(135deg, rgba(255,255,255,0.035), rgba(255,255,255,0.015));
  border: 1px dashed rgba(255,255,255,0.13);
  border-radius: 8px;
}
.account-empty-orders__icon {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  margin-bottom: 20px;
  color: var(--cyan-bright);
  background: rgba(95,199,230,0.08);
  border-radius: 8px;
}
.account-empty-orders h3 {
  margin: 0 0 10px;
  color: var(--frost-100);
  font-size: 24px;
  line-height: 1.2;
  font-weight: 600;
}
.account-empty-orders p {
  max-width: 460px;
  margin: 0;
  color: var(--frost-300);
  font-size: 16px;
  line-height: 1.45;
}
.account-empty-orders__cta {
  min-width: 196px;
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 24px;
  padding: 0 24px;
  color: var(--ink-900);
  background: linear-gradient(135deg, var(--cyan-bright), var(--cyan));
  border-radius: 8px;
  font-size: 16px;
  font-weight: 700;
  text-decoration: underline;
  box-shadow: 0 18px 48px -18px rgba(95,199,230,0.78);
}
.account-orders-table {
  overflow: hidden;
  background: rgba(5,8,16,0.4);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 8px;
}
.account-orders-table table {
  width: 100%;
  border-collapse: collapse;
}
.account-orders-table th,
.account-orders-table td {
  padding: 18px 20px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  color: var(--frost-200);
  text-align: left;
}
.account-orders-table th {
  color: var(--frost-400);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.account-orders-table tr:last-child td {
  border-bottom: 0;
}
.account-orders-table a,
.account-orders-table .account-order-status {
  color: var(--frost-200);
}

/* =====================================================================
   Order cards on the dashboard (Alveris-style): each order shows its line
   items (image, category, name, price) inline plus a footer with order
   number, date/time, payment status, order status and total — no separate
   order-details page needed.
   ===================================================================== */
.account-orders-list {
  display: grid;
  gap: 16px;
}
.account-order-card {
  overflow: hidden;
  background: rgba(5,8,16,0.4);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 8px;
}
.account-order-card__item {
  display: grid;
  grid-template-columns: 72px 1fr auto;
  align-items: center;
  gap: 18px;
  padding: 18px 22px;
}
.account-order-card__item + .account-order-card__item {
  border-top: 1px solid rgba(255,255,255,0.06);
}
.account-order-card__media {
  display: block;
  width: 72px;
  height: 72px;
  border-radius: 8px;
  overflow: hidden;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
}
.account-order-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.account-order-card__cat {
  margin-bottom: 5px;
  color: var(--cyan-bright);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.account-order-card__name {
  display: inline-block;
  color: var(--frost-100);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.25;
}
.account-order-card__name:hover {
  color: var(--cyan-bright);
}
.account-order-card__price {
  color: var(--frost-100);
  font-size: 16px;
  font-weight: 600;
  white-space: nowrap;
}
.account-order-card__qty {
  margin-right: 4px;
  color: var(--frost-400);
  font-size: 13px;
  font-weight: 500;
}
.account-order-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding: 18px 22px;
  border-top: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.02);
}
.account-order-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 34px;
}
.account-order-metaitem {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.account-order-metaitem .k {
  color: var(--frost-400);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.account-order-metaitem .v {
  color: var(--frost-100);
  font-size: 15px;
  font-weight: 600;
}
.account-order-metaitem .v.account-order-badge {
  align-self: flex-start;
}
.account-order-pay.is-paid {
  color: #6ee7a8;
}
.account-order-pay.is-unpaid {
  color: #f09a9a;
}
.account-order-card__total {
  margin-left: auto;
  color: var(--frost-100);
  font-size: 18px;
  font-weight: 700;
  white-space: nowrap;
}
[data-theme="light"] .account-order-card {
  background: rgba(255,255,255,0.6);
  border-color: rgba(10,30,50,0.1);
}
[data-theme="light"] .account-order-card__item + .account-order-card__item {
  border-top-color: rgba(10,30,50,0.08);
}
[data-theme="light"] .account-order-card__footer {
  border-top-color: rgba(10,30,50,0.1);
  background: rgba(10,30,50,0.03);
}
[data-theme="light"] .account-order-card__media {
  border-color: rgba(10,30,50,0.1);
}

@media (max-width: 680px) {
  .account-order-card__item {
    grid-template-columns: 60px 1fr;
    row-gap: 10px;
  }
  .account-order-card__price {
    grid-column: 2;
    font-size: 15px;
  }
  .account-order-card__footer {
    gap: 16px;
  }
  .account-order-card__meta {
    gap: 12px 24px;
  }
  .account-order-card__total {
    margin-left: 0;
  }
}

@media (max-width: 1100px) {
  .account-dashboard__stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 680px) {
  .cabinet-page-shell:has(.account-dashboard) {
    padding-top: 112px;
  }
  .account-dashboard__eyebrow {
    font-size: 12px;
    letter-spacing: 0.16em;
  }
  .account-dashboard__hero h1 {
    font-size: clamp(46px, 15vw, 72px);
  }
  .account-dashboard__hero p,
  .account-empty-orders p {
    font-size: 17px;
  }
  .account-dashboard__stats {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .account-stat {
    min-height: 150px;
    padding: 24px;
  }
  .account-history__head {
    align-items: flex-start;
    flex-direction: column;
  }
  .account-empty-orders {
    min-height: 360px;
  }
  .account-empty-orders__cta {
    width: 100%;
    min-width: 0;
  }
  .account-orders-table {
    overflow-x: auto;
  }
}

/* ============================================================
   Light theme — surface overrides for the real (rendered)
   components. The token flips above turn text dark, but several
   components hard-code dark backgrounds that don't use tokens,
   so dark text landed on dark surfaces (unreadable). Flip those
   surfaces to light here. Covers: product cards (home + catalog),
   filter/sort dropdown, product-details shell, auth modal,
   currency dropdown. (IS-990 H04)
   ============================================================ */

/* 1. Product card bottom strip — home grid + game category */
[data-theme="light"] .home-product-grid .product-card .products__content,
[data-theme="light"] .catalog-page-shell .product-card .products__content {
  background: rgba(255,255,255,0.72);
}
/* Card badges (game tag + rarity) — dark glass pills over a now-light art */
[data-theme="light"] .game-tag-card,
[data-theme="light"] .rarity-tag {
  background: rgba(255,255,255,0.82);
  border-color: rgba(10,30,50,0.12);
}

/* 2. Filter / sort dropdown popup */
[data-theme="light"] .catalog-page-shell .filter__block-content {
  background: #ffffff;
  border-color: rgba(95,199,230,0.45);
  box-shadow: 0 24px 54px rgba(10,30,50,0.18), inset 0 1px 0 rgba(255,255,255,0.6);
}
[data-theme="light"] .catalog-page-shell .filter__search .input {
  background: rgba(10,30,50,0.04);
  border-color: rgba(10,30,50,0.15);
}
[data-theme="light"] .catalog-page-shell .checkbox__label::before {
  background: rgba(10,30,50,0.05);
  border-color: rgba(10,30,50,0.22);
}
[data-theme="light"] .catalog-page-shell .noUi-target {
  background: rgba(10,30,50,0.14);
}

/* 3. Product-details shell */
[data-theme="light"] .product-detail-shell .product__block {
  background:
    radial-gradient(circle at 50% 46%, rgba(95,199,230,0.18), transparent 42%),
    linear-gradient(180deg, #eaf2f7, #d6e4ee);
}
[data-theme="light"] .product-detail-shell .product__image.product-inspector {
  border-right-color: rgba(10,30,50,0.1);
  background:
    radial-gradient(circle at 12% 50%, rgba(217,111,168,0.08), transparent 40%),
    linear-gradient(180deg, #eef4f8, #e2ecf3);
}
[data-theme="light"] .product-detail-shell .product__info {
  background: rgba(255,255,255,0.52);
}
[data-theme="light"] .product-detail-shell .detail-chip {
  background: rgba(255,255,255,0.9);
  border-color: rgba(10,30,50,0.14);
}
[data-theme="light"] .product-detail-shell .table--params tr {
  background: rgba(10,30,50,0.04);
  box-shadow: inset 0 1px 0 rgba(10,30,50,0.03);
}
[data-theme="light"] .product-detail-shell .detail-stat-grid {
  background: rgba(255,255,255,0.6);
  border-color: rgba(10,30,50,0.12);
}
[data-theme="light"] .product-detail-shell .detail-stat {
  border-right-color: rgba(10,30,50,0.1);
}
[data-theme="light"] .product-detail-shell .detail-sticker-row,
[data-theme="light"] .product-detail-shell .detail-fingerprint {
  background: rgba(255,255,255,0.6);
  border-color: rgba(10,30,50,0.12);
}
[data-theme="light"] .product-detail-shell .detail-buy-panel {
  border-top-color: rgba(10,30,50,0.12);
}
[data-theme="light"] .product-detail-shell .product__row .wish,
[data-theme="light"] .product-detail-shell .detail-buy-panel .product__row .wish {
  background: rgba(10,30,50,0.04);
  border-color: rgba(10,30,50,0.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.5);
}
[data-theme="light"] .product-detail-shell .product__row .btn--orange {
  background: rgba(10,30,50,0.05);
  border-color: rgba(10,30,50,0.12);
}

/* 4. Auth modal (remodal) — base background uses !important, so must we */
[data-theme="light"] .remodal:has(.auth-tabs) {
  background: linear-gradient(180deg, #ffffff, #f5f9fc) !important;
  border-color: rgba(10,30,50,0.12) !important;
  box-shadow:
    0 28px 90px rgba(10,30,50,0.18),
    inset 0 1px 0 rgba(255,255,255,0.6) !important;
}
[data-theme="light"] .remodal:has(.auth-tabs) .remodal-close {
  background: rgba(10,30,50,0.05);
  border-color: rgba(10,30,50,0.12);
}
[data-theme="light"] .remodal .auth-tabs .tabs__nav {
  background: rgba(10,30,50,0.04);
  border-color: rgba(10,30,50,0.1);
}
[data-theme="light"] .remodal .auth-tabs .tabs__nav-item:hover {
  background: rgba(10,30,50,0.05);
}
[data-theme="light"] .remodal .auth-tabs .profile__form .input {
  background: rgba(10,30,50,0.04);
  border-color: rgba(10,30,50,0.15);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.5);
}
[data-theme="light"] .remodal .auth-tabs .checkbox__label::before {
  background: rgba(10,30,50,0.05);
  border-color: rgba(10,30,50,0.18);
}

/* 5. Currency / language dropdown popup */
[data-theme="light"] .lng-list {
  background: rgba(255,255,255,0.96);
  border-color: rgba(10,30,50,0.1);
  box-shadow: 0 10px 32px rgba(10,30,50,0.16);
}

/* 6. Account dashboard (/dashboard/Dashboard) — stat cards, order history
   table and empty state hard-code dark surfaces + white borders, so in light
   theme the (now dark) text sat on a dark panel (order table was unreadable). */
[data-theme="light"] .account-stat {
  background: linear-gradient(135deg, rgba(255,255,255,0.7), rgba(255,255,255,0.5));
  border-color: rgba(10,30,50,0.1);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
}
[data-theme="light"] .account-stat--highlight {
  background:
    radial-gradient(circle at 88% 88%, rgba(217,111,168,0.1), transparent 48%),
    linear-gradient(135deg, rgba(255,255,255,0.72), rgba(255,255,255,0.52));
}
[data-theme="light"] .account-history__head {
  border-bottom-color: rgba(10,30,50,0.12);
}
[data-theme="light"] .account-orders-table {
  background: rgba(255,255,255,0.6);
  border-color: rgba(10,30,50,0.1);
}
[data-theme="light"] .account-orders-table th,
[data-theme="light"] .account-orders-table td {
  border-bottom-color: rgba(10,30,50,0.1);
}
[data-theme="light"] .account-empty-orders {
  background:
    radial-gradient(circle at 82% 88%, rgba(136,71,255,0.1), transparent 46%),
    linear-gradient(135deg, rgba(255,255,255,0.6), rgba(255,255,255,0.45));
  border-color: rgba(10,30,50,0.18);
}

/* =====================================================================
   Mobile QA fix batch. Appended last so these overrides win the cascade
   against style.min.css and earlier mockup rules of equal specificity.
   ===================================================================== */

/* Header + footer logo wordmark. style.min.css hides
   `.logo span:not(.logo__mark)` at <=560px, dropping the "SpektraSkins" /
   "SPEKTRASKINS LIMITED" title and leaving only the diamond mark. Re-show
   it (slightly smaller in the compact header so it still fits the pill). */
@media (max-width: 560px) {
  .logo span:not(.logo__mark) { display: inline !important; }
  /* The base theme keeps the logo's desktop margin-right (2rem, spacing for the
     now-hidden nav-links) on mobile. In the space-between pill that dead gap
     pushed the actions past the right edge, where body{overflow-x:hidden}
     clipped the hamburger. Drop it and let the wordmark shrink if truly tight. */
  .nav.header .logo { gap: 0.6rem; margin-right: 0; min-width: 0; }
  .nav.header .logo span:not(.logo__mark) {
    font-size: 1.4rem;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
}

/* Mobile drawer vs footer stacking. The off-canvas drawer
   (.header__mobile .menu, z-index:1001) is trapped inside .page-wrapper
   (z-index:1); the footer is a later sibling at the same z-index, so it
   paints over the drawer's lower half. Lift the whole page-wrapper subtree
   above the footer so the drawer stays on top. */
.page-wrapper { z-index: 3; }

/* Hero inventory cards were clipped at the bottom on tablet/mobile: each
   card height is a % of the shrunken .hero-illust, but the media used
   height:100% + a 26px top pad, so image + tag overflowed the short card
   and .hero-item-card{overflow:hidden} cut it off. Flex-column lets the
   media consume only the leftover space and fully contain the image. */
@media (max-width: 900px) {
  .hero-item-card { display: flex; flex-direction: column; }
  .hero-item-card__media {
    flex: 1 1 auto;
    min-height: 0;
    padding: 12px 8px 10px;
  }
  .hero-item-card__media img { height: 100%; max-height: 100%; }
}

/* Policy pages. The content column stacked .wrapper.policy-page's 104px
   top + 104px !important bottom padding ON TOP of the theme's mobile body
   offset (body{padding-top:7.2rem}), opening a huge empty gap; the
   translucent fixed header floated over that black gap and read as
   "missing". Trim the wrapper padding on mobile so content sits under the
   header (making it visible against real content) without the excess. */
@media (max-width: 992px) {
  .wrapper.policy-page {
    padding-top: 16px !important;
    padding-bottom: 24px !important;
  }
  .policy-page .text__page {
    padding-bottom: 8px;
  }
}

/* The footer's desktop top spacing (margin-top 60px + padding-top 80px = 140px)
   left an oversized empty gap above it on mobile — most visible on the short
   legal pages where it stacked on top of the content wrapper's own bottom
   padding. Tighten it for small screens. */
@media (max-width: 900px) {
  .footer {
    margin-top: 28px;
    padding-top: 44px;
  }
}

/* Catalog filters + sort were shoved off-screen on mobile. The theme's
   @media(max-width:992px) .filter__item{position:fixed;transform:translateY(100%)}
   off-canvas drawer still applied because the redesigned inline filter bar
   (.catalog-page-shell .filter__item) never reset position/transform, and
   its open-toggle is hidden. Keep it in normal flow, above the grid. */
@media (max-width: 992px) {
  .catalog-page-shell .filter__item {
    position: static !important;
    transform: none !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    border-radius: 0 !important;
    z-index: auto !important;
  }
}

/* Product detail info blocks. The redesigned .detail-* elements had no
   mobile breakpoints, so the 4-col stat grid and the 3-col buy row
   (1fr | 56px | min 220px) overflowed and overlapped on phones. Collapse
   the stat grid to 2 columns and stack the buy row (price on its own row,
   then wishlist + add-to-basket). */
@media (max-width: 560px) {
  .product-detail-shell .detail-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .product-detail-shell .detail-buy-panel .product__row {
    grid-template-columns: 56px minmax(0, 1fr);
  }
  .product-detail-shell .detail-buy-panel .product__row .price {
    grid-column: 1 / -1;
    grid-row: 1;
    font-size: 34px;
    text-align: center;
  }
  .product-detail-shell .detail-buy-panel .product__row .wish {
    grid-column: 1;
    grid-row: 2;
  }
  .product-detail-shell .detail-buy-panel .product__row .btn {
    grid-column: 2;
    grid-row: 2;
    min-width: 0;
  }
}

/* =====================================================================
   Account order-details page (modules/cabinet/order_view.php).
   Styled in the same account-* design language as the dashboard so the
   per-order detail view (image, game category, name, order number, date,
   payment status, order status, price, total) renders in the dark theme.
   ===================================================================== */
.cabinet-page-shell:has(.account-order) > .block__title,
.cabinet-page-shell:has(.account-order) > .path,
.cabinet-page-shell:has(.account-order) > .breadcrumbs {
  display: none;
}
.cabinet-page-shell:has(.account-order) {
  padding-top: 104px;
}
.account-order {
  display: grid;
  gap: clamp(22px, 2.6vw, 34px);
}
.account-order__hero {
  padding-top: 4px;
}
.account-order__eyebrow {
  margin-bottom: 14px;
  color: var(--cyan-bright);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.account-order__headrow {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.account-order__headrow h1 {
  margin: 0;
  color: var(--frost-100);
  font-family: 'Space Grotesk', Inter, sans-serif;
  font-size: clamp(30px, 3.4vw, 46px);
  line-height: 1.05;
  font-weight: 500;
  letter-spacing: 0;
}
.account-order__headrow h1 span {
  color: var(--cyan-bright);
  font-style: italic;
  font-weight: 600;
}
.account-order__back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  color: var(--frost-200);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  font-size: 14px;
  white-space: nowrap;
  transition: border-color .15s ease, color .15s ease;
}
.account-order__back:hover {
  color: var(--cyan-bright);
  border-color: rgba(95,199,230,0.55);
}
.account-order__meta {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: 26px;
}
.account-order-meta {
  padding: 18px 20px;
  background: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.018));
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 8px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
.account-order-meta__label {
  margin-bottom: 10px;
  color: var(--frost-400);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.account-order-meta__value {
  color: var(--frost-100);
  font-size: 18px;
  line-height: 1.2;
  font-weight: 600;
}
.account-order-badge {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  border: 1px solid transparent;
}
.account-order-badge.is-paid {
  color: #6ee7a8;
  background: rgba(110,231,168,0.12);
  border-color: rgba(110,231,168,0.4);
}
.account-order-badge.is-unpaid {
  color: #f09a9a;
  background: rgba(240,154,154,0.1);
  border-color: rgba(240,154,154,0.4);
}
.account-order-badge.account-order-status {
  color: var(--cyan-bright);
  background: rgba(95,199,230,0.12);
  border-color: rgba(95,199,230,0.4);
}
.account-order-badge.account-order-status.completed {
  color: #6ee7a8;
  background: rgba(110,231,168,0.12);
  border-color: rgba(110,231,168,0.4);
}
.account-order-badge.account-order-status.canceled {
  color: #f09a9a;
  background: rgba(240,154,154,0.1);
  border-color: rgba(240,154,154,0.4);
}

/* progress */
.account-order__progress {
  padding: 26px 24px;
  background: rgba(5,8,16,0.4);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 8px;
}
.account-order-track {
  position: relative;
  height: 4px;
  border-radius: 999px;
  background: rgba(255,255,255,0.1);
  overflow: hidden;
}
.account-order-track__fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--cyan), var(--cyan-bright));
  transition: width .3s ease;
}
.account-order-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}
.account-order-step {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.account-order-step:nth-child(2) {
  text-align: center;
}
.account-order-step:nth-child(3) {
  text-align: right;
}
.account-order-step__title {
  color: var(--frost-400);
  font-size: 14px;
  font-weight: 600;
}
.account-order-step.is-done .account-order-step__title {
  color: var(--cyan-bright);
}
.account-order-step__date {
  color: var(--frost-400);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
}

/* items */
.account-order__items {
  overflow: hidden;
  background: rgba(5,8,16,0.4);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 8px;
}
.account-order-items__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 22px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  color: var(--frost-400);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.account-order-item {
  display: grid;
  grid-template-columns: 34px 72px 1fr auto;
  align-items: center;
  gap: 20px;
  padding: 18px 22px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.account-order-item:last-child {
  border-bottom: 0;
}
.account-order-item__nr {
  color: var(--frost-400);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 14px;
  text-align: center;
}
.account-order-item__media {
  display: block;
  width: 72px;
  height: 72px;
  border-radius: 8px;
  overflow: hidden;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
}
.account-order-item__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.account-order-item__cat {
  margin-bottom: 4px;
  color: var(--cyan-bright);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.account-order-item__name {
  display: inline-block;
  color: var(--frost-100);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.25;
}
.account-order-item__name:hover {
  color: var(--cyan-bright);
}
.account-order-item__opts {
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
}
.account-order-item__opts li {
  color: var(--frost-300);
  font-size: 13px;
}
.account-order-item__opts .k {
  color: var(--frost-400);
}
.account-order-item__pricing {
  display: flex;
  align-items: center;
  gap: 28px;
}
.account-order-item__cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: right;
  min-width: 64px;
}
.account-order-item__cell .k {
  color: var(--frost-400);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.account-order-item__cell .v {
  color: var(--frost-100);
  font-size: 15px;
  font-weight: 600;
}
.account-order-item__cell--total .v {
  color: var(--cyan-bright);
}
.account-order-item__discount {
  display: inline-block;
  margin-left: 4px;
  color: #f09a9a;
  font-size: 12px;
}

/* summary */
.account-order__summary {
  max-width: 420px;
  margin-left: auto;
  width: 100%;
  padding: 20px 24px;
  background: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.018));
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 8px;
}
.account-order-summary__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  color: var(--frost-300);
  font-size: 15px;
}
.account-order-summary__row span:last-child {
  color: var(--frost-100);
  font-weight: 600;
}
.account-order-summary__row--total {
  margin-top: 8px;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,0.1);
  font-size: 18px;
}
.account-order-summary__row--total span {
  color: var(--frost-100);
  font-weight: 700;
}
.account-order-summary__row--total span:last-child {
  color: var(--cyan-bright);
}

/* panels */
.account-order__panels {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.account-order-panel {
  padding: 22px 24px;
  background: rgba(5,8,16,0.4);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 8px;
}
.account-order-panel--full {
  grid-column: 1 / -1;
}
.account-order-panel h3 {
  margin: 0 0 16px;
  color: var(--frost-100);
  font-family: 'Space Grotesk', Inter, sans-serif;
  font-size: 18px;
  font-weight: 600;
}
.account-order-fields {
  margin: 0;
  display: grid;
  gap: 12px;
}
.account-order-fields > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}
.account-order-fields dt {
  color: var(--frost-400);
  font-size: 14px;
}
.account-order-fields dd {
  margin: 0;
  color: var(--frost-100);
  font-size: 14px;
  font-weight: 500;
  text-align: right;
  word-break: break-word;
}
.account-order-panel__text {
  margin: 0;
  color: var(--frost-200);
  font-size: 15px;
  line-height: 1.5;
}
.account-order-empty {
  padding: 48px 24px;
  text-align: center;
  color: var(--frost-300);
  font-size: 17px;
  background: rgba(5,8,16,0.4);
  border: 1px dashed rgba(255,255,255,0.13);
  border-radius: 8px;
}

/* light theme */
[data-theme="light"] .account-order-meta,
[data-theme="light"] .account-order__summary {
  background: linear-gradient(135deg, rgba(255,255,255,0.7), rgba(255,255,255,0.5));
  border-color: rgba(10,30,50,0.1);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
}
[data-theme="light"] .account-order__progress,
[data-theme="light"] .account-order__items,
[data-theme="light"] .account-order-panel,
[data-theme="light"] .account-order-empty {
  background: rgba(255,255,255,0.6);
  border-color: rgba(10,30,50,0.1);
}
[data-theme="light"] .account-order-item,
[data-theme="light"] .account-order-items__head,
[data-theme="light"] .account-order-summary__row--total {
  border-color: rgba(10,30,50,0.1);
}
[data-theme="light"] .account-order__back {
  background: rgba(10,30,50,0.04);
  border-color: rgba(10,30,50,0.14);
}
[data-theme="light"] .account-order-item__media {
  border-color: rgba(10,30,50,0.1);
}

/* responsive */
@media (max-width: 1100px) {
  .account-order__meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 680px) {
  .cabinet-page-shell:has(.account-order) {
    padding-top: 112px;
  }
  .account-order__meta {
    grid-template-columns: 1fr;
  }
  .account-order__panels {
    grid-template-columns: 1fr;
  }
  .account-order-item {
    grid-template-columns: 34px 64px 1fr;
    row-gap: 14px;
  }
  .account-order-item__pricing {
    grid-column: 1 / -1;
    justify-content: space-between;
    gap: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,0.08);
  }
  .account-order__summary {
    max-width: none;
  }
  .account-order-steps {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .account-order-step:nth-child(2),
  .account-order-step:nth-child(3) {
    text-align: left;
  }
}