/* =========================================================
   GamingOps Ultra Visual V6
   Visual + UX layer only. Product data/prices/cart logic are untouched.
   ========================================================= */

:root {
  --mx: 50%;
  --my: 28%;
  --nexus-bg: #061427;
  --nexus-bg-2: #041020;
  --nexus-panel: rgba(4, 12, 8, .78);
  --nexus-panel-strong: rgba(5, 16, 10, .92);
  --nexus-card: rgba(4, 10, 7, .82);
  --nexus-card-2: rgba(8, 24, 14, .82);
  --nexus-green: #38bdf8;
  --nexus-green-soft: #7dd3fc;
  --nexus-green-dark: #0284c7;
  --nexus-border: rgba(56, 189, 248, .24);
  --nexus-border-strong: rgba(56, 189, 248, .56);
  --nexus-text: #f4fff8;
  --nexus-muted: rgba(244, 255, 248, .68);
  --nexus-dim: rgba(244, 255, 248, .48);
  --nexus-radius: 18px;
  --nexus-radius-lg: 26px;
  --nexus-shadow: 0 24px 70px rgba(0, 0, 0, .56);
  --nexus-glow: 0 0 40px rgba(56, 189, 248, .18);
  --product-card-image-aspect-ratio: 16/9;
  --product-page-image-aspect-ratio: 16/9;
  --group-card-image-aspect-ratio: 16/9;
  --product-image-fit: cover;
  --group-image-fit: cover;
}

* { box-sizing: border-box; }
html, body { max-width: 100%; overflow-x: hidden; }
html { background: var(--nexus-bg) !important; }
body.nexus-theme {
  color: var(--nexus-text) !important;
  background: var(--nexus-bg) !important;
  min-height: 100vh;
}

/* Click-safe cosmetic layers */
#particles-js,
#particles-js *,
#particles-js::before,
#particles-js::after,
body.nexus-theme::before,
body.nexus-theme::after,
#app::before,
#app::after,
#app .product-card-shell::before,
#app .product-card-shell::after,
#app .product-card-media::before,
#app .product-card-media::after,
#app [data-component-id="hero"]::before,
#app [data-component-id="hero"]::after,
.nexus-hero-visual::before,
.nexus-hero-visual::after,
.nexus-showcase::before,
.nexus-showcase::after,
.nexus-showcase-shell::before,
.nexus-showcase-shell::after,
.nexus-ui-panel::before,
.nexus-ui-panel::after,
.nexus-preview-frame::before,
.nexus-preview-frame::after {
  pointer-events: none !important;
}

/* Global background: no watermark text, only ambient network/glow */
body.nexus-theme::before,
body.nexus-theme::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

body.nexus-theme::before {
  background:
    radial-gradient(circle at var(--mx) var(--my), rgba(56, 189, 248, .18), transparent 34rem),
    radial-gradient(circle at 50% -10%, rgba(56, 189, 248, .22), transparent 38rem),
    radial-gradient(circle at 10% 38%, rgba(56, 189, 248, .12), transparent 26rem),
    radial-gradient(circle at 92% 70%, rgba(34, 211, 238, .10), transparent 32rem),
    linear-gradient(180deg, #061427 0%, #041020 48%, #071a2d 100%);
}

body.nexus-theme::after {
  opacity: .34;
  background:
    linear-gradient(115deg, transparent 0 47%, rgba(56, 189, 248, .035) 48%, transparent 50% 100%),
    linear-gradient(rgba(56, 189, 248, .025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(56, 189, 248, .022) 1px, transparent 1px),
    radial-gradient(circle, rgba(56, 189, 248, .16) 1px, transparent 1.8px);
  background-size: 220px 220px, 92px 92px, 92px 92px, 44px 44px;
  mask-image: linear-gradient(to bottom, transparent 0%, #000 8%, #000 92%, transparent 100%);
  animation: nexus-grid-drift-v6 95s linear infinite;
}

@keyframes nexus-grid-drift-v6 {
  from { background-position: 0 0, 0 0, 0 0, 0 0; }
  to { background-position: 220px 440px, 184px 276px, 276px 184px, 88px 132px; }
}

#particles-js {
  position: fixed !important;
  inset: 0 !important;
  z-index: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
  background:
    radial-gradient(circle at 15% 15%, rgba(56, 189, 248, .08), transparent 24rem),
    radial-gradient(circle at 82% 10%, rgba(34, 211, 238, .07), transparent 30rem),
    radial-gradient(circle at 60% 115%, rgba(56, 189, 248, .08), transparent 34rem) !important;
}
#particles-js::before,
#particles-js::after { content: none !important; display: none !important; }
#particles-js canvas,
#particles-js .nexus-network-canvas,
#particles-js .nexus-network-canvas-v6 {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none !important;
  opacity: .78;
  mix-blend-mode: screen;
}

#app {
  position: relative !important;
  z-index: 2 !important;
  isolation: isolate;
  min-height: 100vh;
  background: transparent !important;
  color: var(--nexus-text) !important;
}
#app::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(0,0,0,.72), transparent 22%, transparent 78%, rgba(0,0,0,.72)),
    radial-gradient(ellipse at 50% 0%, rgba(56,189,248,.10), transparent 42rem);
}
#app .nexus-store-shell {
  position: relative !important;
  z-index: 3 !important;
  width: min(100%, 92rem) !important;
  max-width: 92rem !important;
  padding-top: clamp(1rem, 2vw, 1.6rem) !important;
  border-inline: 1px solid rgba(56,189,248,.035);
}

/* Reset old reveal dimming from previous versions */
#app .nexus-reveal { opacity: 1 !important; transform: none !important; filter: none !important; }
#app .nexus-v6-reveal {
  opacity: 0;
  transform: translateY(28px);
  filter: blur(6px);
  transition: opacity .65s ease, transform .65s ease, filter .65s ease;
}
#app .nexus-v6-reveal.is-visible { opacity: 1; transform: translateY(0); filter: blur(0); }

/* Store navbar - Sellauth platform bar untouched */
#app nav[data-component-id="navbar"] {
  position: sticky !important;
  top: 1rem !important;
  z-index: 80 !important;
  margin-bottom: clamp(2rem, 4vw, 3.5rem) !important;
}
#app nav[data-component-id="navbar"] > div {
  max-width: 82rem !important;
  margin-inline: auto !important;
  border: 1px solid rgba(56,189,248,.22) !important;
  border-radius: 0 !important;
  background:
    linear-gradient(135deg, rgba(5, 16, 10, .84), rgba(1, 5, 3, .72)),
    radial-gradient(circle at 15% 0%, rgba(56,189,248,.12), transparent 20rem) !important;
  box-shadow: 0 18px 60px rgba(0,0,0,.50), 0 0 36px rgba(56,189,248,.08), inset 0 1px 0 rgba(255,255,255,.06) !important;
  backdrop-filter: blur(20px) saturate(135%);
}
#app nav[data-component-id="navbar"] img { filter: drop-shadow(0 0 18px rgba(56,189,248,.42)); }
#app nav[data-component-id="navbar"] h1 {
  position: relative;
  font-weight: 900 !important;
  letter-spacing: -.03em;
  color: #fff !important;
  text-shadow: 0 0 22px rgba(56,189,248,.22);
}
#app nav[data-component-id="navbar"] h1::after {
  content: "";
  position: absolute;
  inset: 0 -10%;
  background: linear-gradient(110deg, transparent 0 35%, rgba(255,255,255,.70) 48%, transparent 62% 100%);
  transform: translateX(-130%);
  animation: nexus-word-sheen 5.5s ease-in-out infinite;
  mix-blend-mode: overlay;
  pointer-events: none;
}
@keyframes nexus-word-sheen { 0%, 72% { transform: translateX(-130%); } 100% { transform: translateX(130%); } }

#app nav[data-component-id="navbar"] a,
#app nav[data-component-id="navbar"] button {
  border-radius: 14px !important;
  transition: transform .18s ease, color .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease !important;
}
#app nav[data-component-id="navbar"] a:hover,
#app nav[data-component-id="navbar"] button:hover {
  color: var(--nexus-green) !important;
  background: rgba(56,189,248,.075) !important;
  border-color: rgba(56,189,248,.30) !important;
  transform: translateY(-1px);
}
/* Cart/basket button fix */
#app nav[data-component-id="navbar"] a[href*="/cart"] {
  width: 44px !important;
  min-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 !important;
  border-radius: 14px !important;
  border: 1px solid rgba(56,189,248,.42) !important;
  color: var(--nexus-green) !important;
  background: rgba(56,189,248,.075) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 0 20px rgba(56,189,248,.12) !important;
}
#app nav[data-component-id="navbar"] a[href*="/cart"]:hover {
  color: #031007 !important;
  background: linear-gradient(90deg, var(--nexus-green), var(--nexus-green-soft)) !important;
  box-shadow: 0 0 32px rgba(56,189,248,.34) !important;
}
#app nav[data-component-id="navbar"] a[href*="/cart"] i { color: currentColor !important; }

/* Hero */
#app [data-component-id="hero"] { position: relative; overflow: visible; }
#app [data-component-id="hero"] > div {
  min-height: min(760px, calc(100vh - 120px)) !important;
  padding-block: clamp(4rem, 9vw, 7rem) !important;
}
#app [data-component-id="hero"]::before {
  content: "";
  position: absolute;
  inset: 1rem 6% auto;
  height: 34rem;
  z-index: -1;
  border: 1px solid rgba(56,189,248,.10);
  background:
    radial-gradient(circle at 50% 28%, rgba(56,189,248,.24), transparent 30rem),
    linear-gradient(135deg, rgba(56,189,248,.06), rgba(0,0,0,.03));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 0 70px rgba(56,189,248,.08);
  backdrop-filter: blur(3px);
}
#app [data-component-id="hero"] .container {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 480px);
  gap: clamp(2rem, 5vw, 4rem) !important;
  max-width: 82rem !important;
  align-items: center !important;
}
#app [data-component-id="hero"] .container > div:first-child {
  width: 100%;
  max-width: 760px !important;
  margin-inline: auto;
  align-items: center !important;
  text-align: center !important;
}
#app [data-component-id="hero"] h1 {
  font-size: clamp(3rem, 6.2vw, 6.25rem) !important;
  line-height: .92 !important;
  font-weight: 950 !important;
  letter-spacing: -.055em;
  color: #fff !important;
  text-shadow: 0 0 42px rgba(56,189,248,.24), 0 16px 52px rgba(0,0,0,.60);
}
#app [data-component-id="hero"] h1 strong,
#app [data-component-id="hero"] h1 span,
#app [data-component-id="hero"] .text-accent-500 {
  color: var(--nexus-green) !important;
  background: linear-gradient(90deg, #38bdf8, #7dffa7, #00d248);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  filter: drop-shadow(0 0 24px rgba(56,189,248,.30));
}
#app [data-component-id="hero"] p {
  max-width: 720px;
  color: rgba(244,255,248,.76) !important;
  font-size: clamp(1rem, 1.6vw, 1.25rem) !important;
  line-height: 1.75 !important;
}
#app [data-component-id="hero"] a,
#app [data-component-id="hero"] button {
  min-height: 48px;
  border-radius: 0 !important;
  padding-inline: 1.35rem !important;
  font-weight: 850 !important;
  letter-spacing: -.01em;
  box-shadow: 0 0 28px rgba(56,189,248,.18) !important;
}
.nexus-hero-visual {
  position: relative;
  display: block;
  width: min(100%, 470px);
  margin-inline: auto;
  padding: 1rem;
  border: 1px solid rgba(56,189,248,.22);
  background: linear-gradient(145deg, rgba(5,15,10,.78), rgba(1,5,3,.82));
  box-shadow: var(--nexus-shadow), 0 0 60px rgba(56,189,248,.10), inset 0 1px 0 rgba(255,255,255,.05);
  backdrop-filter: blur(18px);
  transform: translateY(var(--hero-shift, 0px));
}
.nexus-hero-visual::before {
  content: "";
  position: absolute;
  inset: -1px;
  border: 1px solid rgba(56,189,248,.18);
  box-shadow: inset 0 0 40px rgba(56,189,248,.06);
}
.nexus-hero-mini-head { display: flex; align-items: center; justify-content: space-between; gap: .8rem; margin-bottom: .8rem; }
.nexus-hero-mini-logo { color: #fff; font-weight: 900; letter-spacing: .12em; font-size: .82rem; }
.nexus-hero-mini-state { display: inline-flex; align-items: center; gap: .45rem; color: rgba(244,255,248,.70); font-size: .72rem; }
.nexus-hero-mini-state i { width: .52rem; height: .52rem; border-radius: 999px; background: var(--nexus-green); box-shadow: 0 0 16px rgba(56,189,248,.7); }
.nexus-hero-ui {
  border: 1px solid rgba(56,189,248,.16);
  background: rgba(0,0,0,.28);
  padding: .85rem;
}
.nexus-hero-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: .45rem; margin-bottom: .9rem; }
.nexus-hero-tabs span { padding: .42rem .3rem; text-align: center; background: rgba(56,189,248,.06); border: 1px solid rgba(56,189,248,.12); color: rgba(244,255,248,.74); font-size: .68rem; font-weight: 800; }
.nexus-hero-tabs span:first-child { background: var(--nexus-green); color: #031007; }
.nexus-hero-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 1rem; margin: .72rem 0; color: rgba(244,255,248,.82); font-size: .82rem; }
.nexus-hero-meter { height: 7px; border-radius: 99px; background: rgba(255,255,255,.08); overflow: hidden; }
.nexus-hero-meter i { display: block; width: var(--v); height: 100%; background: linear-gradient(90deg, var(--nexus-green), var(--nexus-green-soft)); box-shadow: 0 0 18px rgba(56,189,248,.4); }
.nexus-hero-chips { display: flex; flex-wrap: wrap; gap: .55rem; justify-content: center; margin-top: 1.15rem; }
.nexus-hero-chips span { border: 1px solid rgba(56,189,248,.20); background: rgba(56,189,248,.06); color: rgba(244,255,248,.76); padding: .46rem .72rem; font-size: .72rem; font-weight: 800; }

/* Sections */
#app .component:not([data-component-id="navbar"]) { position: relative; scroll-margin-top: 7rem; }
#app .component:not([data-component-id="navbar"]):not([data-component-id="hero"]) > div {
  padding-block: clamp(1.7rem, 4vw, 3.8rem) !important;
}
#app .component h1,
#app .component h2,
#app .component h3 { color: #fff !important; }
#app hr.border-accent-500 {
  border-color: var(--nexus-green) !important;
  box-shadow: 0 0 24px rgba(56,189,248,.35);
}

/* Product grid + page filter */
#app [data-component-id="products"]::before,
#app [data-component-id="products-page"]::before {
  content: "";
  position: absolute;
  inset: 4rem 4% auto;
  height: 34rem;
  z-index: -1;
  background: radial-gradient(circle, rgba(56,189,248,.12), transparent 64%);
  filter: blur(12px);
}
#app [data-component-id="products"] .flex.flex-wrap,
#app [data-component-id="products-page"] .flex.flex-wrap { gap: 1.25rem !important; }
#app aside .sticky,
#app [data-component-id="products-page"] form,
#app [data-component-id="products-page"] .bg-background,
#app [data-component-id="products-page"] [class*="bg-card"] {
  border-color: rgba(56,189,248,.18) !important;
  background: linear-gradient(145deg, rgba(5,15,10,.86), rgba(1,5,3,.82)) !important;
  box-shadow: 0 18px 48px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.04) !important;
  backdrop-filter: blur(16px);
}
#app [data-component-id="products-page"] aside a,
#app [data-component-id="products-page"] aside input { border-radius: 10px !important; }

/* Product cards */
#app .product-card-shell {
  position: relative !important;
  display: block !important;
  overflow: hidden !important;
  height: 100% !important;
  z-index: 1;
  border: 1px solid rgba(56,189,248,.19) !important;
  border-radius: var(--nexus-radius) !important;
  background:
    linear-gradient(180deg, rgba(8,24,14,.92), rgba(2,6,4,.92)) !important;
  box-shadow: 0 20px 46px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.045) !important;
  color: var(--nexus-text) !important;
  text-decoration: none !important;
  transform-style: preserve-3d;
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--lift, 0));
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease, filter .22s ease !important;
  will-change: transform;
}
#app .product-card-shell > * { pointer-events: none; }
#app .product-card-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 0 35%, rgba(255,255,255,.09) 45%, transparent 58% 100%);
  transform: translateX(-120%);
  transition: transform .7s ease;
  z-index: 2;
}
#app .product-card-shell::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  opacity: 0;
  box-shadow: 0 0 0 1px rgba(56,189,248,.42), 0 0 42px rgba(56,189,248,.18), inset 0 0 36px rgba(56,189,248,.06);
  transition: opacity .22s ease;
}
#app .product-card-shell:hover { --lift: -7px; border-color: rgba(56,189,248,.56) !important; box-shadow: 0 30px 70px rgba(0,0,0,.56), 0 0 42px rgba(56,189,248,.14) !important; }
#app .product-card-shell:hover::before { transform: translateX(120%); }
#app .product-card-shell:hover::after { opacity: 1; }
#app .product-card-inner { display: flex !important; flex-direction: column !important; min-height: 100%; background: transparent !important; }
#app .product-card-head {
  padding: .92rem 1rem .72rem !important;
  border-color: rgba(56,189,248,.12) !important;
  background: linear-gradient(180deg, rgba(56,189,248,.06), transparent) !important;
}
#app .product-card-title { color: #fff !important; font-weight: 900 !important; text-shadow: 0 0 16px rgba(56,189,248,.16); }
#app .product-card-media {
  position: relative !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: .58rem !important;
  border-color: rgba(56,189,248,.12) !important;
  background: radial-gradient(circle at 50% 0%, rgba(56,189,248,.13), transparent 62%), rgba(0,0,0,.28) !important;
}
#app .product-card-media::after {
  content: "";
  position: absolute;
  inset: .58rem;
  border-radius: 12px;
  box-shadow: inset 0 -46px 50px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.04);
}
#app .product-card-image,
#app .product-card-placeholder,
#app .aspect-product-card-image,
#app .aspect-group-card-image { aspect-ratio: 16/9 !important; }
#app .product-card-image,
#app .object-product-image,
#app .object-group-image {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover !important;
  object-position: center;
  border-radius: 12px !important;
  filter: saturate(1.12) contrast(1.08) brightness(.94);
  transition: transform .35s ease, filter .35s ease !important;
}
#app .product-card-shell:hover .product-card-image { transform: scale(1.06); filter: saturate(1.18) contrast(1.12) brightness(1.02); }
#app .product-card-body { display: flex !important; flex: 1; flex-direction: column; gap: .9rem; padding: 1rem !important; }
#app .product-card-meta { display: flex !important; align-items: flex-start !important; justify-content: space-between !important; gap: .75rem !important; white-space: normal !important; }
#app .product-card-price { min-width: 0; color: rgba(244,255,248,.55) !important; font-weight: 850 !important; }
#app .product-card-price > span:first-child { color: var(--nexus-green) !important; text-shadow: 0 0 18px rgba(56,189,248,.28); }
#app .product-card-stock { max-width: 48%; color: rgba(244,255,248,.62) !important; text-align: right; font-weight: 700 !important; font-size: .84rem !important; line-height: 1.35; }
#app .product-card-action {
  min-height: 44px;
  margin-top: auto;
  border-radius: 0 !important;
  border-color: rgba(56,189,248,.62) !important;
  color: var(--nexus-green) !important;
  background: rgba(56,189,248,.055) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04) !important;
  transition: color .2s ease, background .2s ease, box-shadow .2s ease, transform .2s ease !important;
}
#app .product-card-shell:hover .product-card-action,
#app .product-card-action:hover { color: #021006 !important; background: linear-gradient(90deg, var(--nexus-green), var(--nexus-green-soft)) !important; box-shadow: 0 0 28px rgba(56,189,248,.30) !important; }
#app .nexus-status-badge {
  position: absolute;
  top: .9rem;
  right: .9rem;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: .42rem;
  padding: .32rem .58rem;
  border: 1px solid rgba(56,189,248,.34);
  border-radius: 999px;
  background: rgba(1,5,3,.76);
  color: rgba(244,255,248,.90);
  font-size: .62rem;
  line-height: 1;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
  box-shadow: 0 0 18px rgba(56,189,248,.16);
  backdrop-filter: blur(10px);
}
#app .nexus-status-dot { width: .46rem; height: .46rem; border-radius: 50%; background: var(--nexus-green); box-shadow: 0 0 13px rgba(56,189,248,.80); }

/* Product/group modals: fix blank/dim group modal issue */
#app [role="dialog"] { z-index: 120 !important; }
#app [role="dialog"] .bg-background,
#app [role="dialog"] [class*="bg-background"] {
  border: 1px solid rgba(56,189,248,.28) !important;
  background: linear-gradient(145deg, rgba(5,16,10,.96), rgba(1,5,3,.94)) !important;
  box-shadow: 0 30px 90px rgba(0,0,0,.72), 0 0 60px rgba(56,189,248,.10) !important;
  backdrop-filter: blur(18px);
}
#app [x-cloak] { display: none !important; }

/* Inputs/buttons */
#app input,
#app select,
#app textarea,
#app .choices__inner,
#app .choices__list--dropdown {
  border-color: rgba(56,189,248,.18) !important;
  border-radius: 12px !important;
  color: var(--nexus-text) !important;
  background: rgba(1,5,3,.62) !important;
}
#app input:focus,
#app select:focus,
#app textarea:focus {
  border-color: rgba(56,189,248,.65) !important;
  box-shadow: 0 0 0 1px rgba(56,189,248,.22), 0 0 24px rgba(56,189,248,.14) !important;
  outline: none !important;
}
#app .component a[class*="bg-accent-500"],
#app .component button[class*="bg-accent-500"],
#app .component button[type="submit"]:not([class*="text-accent-500"]) {
  color: #021006 !important;
  background: linear-gradient(90deg, var(--nexus-green), var(--nexus-green-soft)) !important;
  border-color: rgba(56,189,248,.70) !important;
  box-shadow: 0 0 26px rgba(56,189,248,.22) !important;
}
#app .component a[class*="border-accent-500"]:not([class*="bg-accent-500"]),
#app .component button[class*="border-accent-500"]:not([class*="bg-accent-500"]) {
  color: var(--nexus-green) !important;
  background: rgba(56,189,248,.06) !important;
  border-color: rgba(56,189,248,.50) !important;
}

/* Product details/cart/footer panels */
#app [data-component-id="product-page"] [class*="bg-card"],
#app [data-component-id="cart-page"] [class*="bg-card"],
#app [data-component-id="features"] .text-center,
#app [data-component-id="feedbacks"] .cursor-pointer > div,
#app [data-component-id="faq"] [class*="bg-card"],
#app footer {
  border-color: rgba(56,189,248,.18) !important;
  border-radius: var(--nexus-radius-lg) !important;
  background: linear-gradient(145deg, rgba(5,16,10,.88), rgba(1,5,3,.84)) !important;
  box-shadow: 0 18px 54px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.04) !important;
  backdrop-filter: blur(16px);
}
#app [data-component-id="product-page"] .aspect-product-page-image { aspect-ratio: 16/9 !important; border-radius: var(--nexus-radius) !important; overflow: hidden; }
#app [data-component-id="product-page"] .object-product-image { width: 100%; height: 100%; object-fit: cover !important; }
#app .editor { color: rgba(244,255,248,.78) !important; line-height: 1.75; }
#app footer { margin-top: clamp(2rem, 5vw, 4rem) !important; overflow: hidden; }
#app footer a:hover { color: var(--nexus-green) !important; }

/* Showcase section */
.nexus-showcase { position: relative; margin-block: clamp(2rem, 5vw, 4rem); }
.nexus-showcase-shell {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(360px, 1.1fr);
  gap: clamp(1.4rem, 4vw, 3rem);
  align-items: center;
  padding: clamp(1.2rem, 3vw, 2rem);
  border: 1px solid rgba(56,189,248,.18);
  background: linear-gradient(145deg, rgba(5,16,10,.78), rgba(1,5,3,.84));
  box-shadow: 0 24px 70px rgba(0,0,0,.48), 0 0 50px rgba(56,189,248,.08), inset 0 1px 0 rgba(255,255,255,.04);
  backdrop-filter: blur(18px);
}
.nexus-showcase-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 70% 30%, rgba(56,189,248,.14), transparent 24rem), linear-gradient(120deg, rgba(56,189,248,.055), transparent 35% 65%, rgba(56,189,248,.035));
}
.nexus-showcase-copy,
.nexus-showcase-stage { position: relative; z-index: 1; }
.nexus-kicker { color: var(--nexus-green); font-weight: 900; letter-spacing: .16em; text-transform: uppercase; font-size: .74rem; }
.nexus-showcase h2 { margin: .55rem 0 .8rem; color: #fff; font-size: clamp(2rem, 4vw, 4rem); line-height: .95; font-weight: 950; letter-spacing: -.05em; }
.nexus-showcase p { color: var(--nexus-muted); line-height: 1.75; }
.nexus-trust-chips { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: 1.1rem; }
.nexus-trust-chips span { border: 1px solid rgba(56,189,248,.20); background: rgba(56,189,248,.06); color: rgba(244,255,248,.78); padding: .5rem .72rem; font-size: .72rem; font-weight: 850; }
.nexus-showcase-stage { perspective: 1000px; }
.nexus-showcase-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; margin-bottom: .75rem; }
.nexus-showcase-tabs button { border: 1px solid rgba(56,189,248,.15); background: rgba(0,0,0,.38); color: rgba(244,255,248,.76); padding: .62rem .4rem; font-weight: 900; cursor: pointer; }
.nexus-showcase-tabs button.is-active,
.nexus-showcase-tabs button:hover { background: var(--nexus-green); color: #021006; box-shadow: 0 0 24px rgba(56,189,248,.24); }
.nexus-ui-panel {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(56,189,248,.24);
  background: linear-gradient(160deg, rgba(2,6,4,.96), rgba(7,20,12,.84));
  box-shadow: 0 20px 60px rgba(0,0,0,.50), inset 0 1px 0 rgba(255,255,255,.04);
}
.nexus-ui-topbar { display: flex; justify-content: space-between; align-items: center; padding: .8rem 1rem; border-bottom: 1px solid rgba(56,189,248,.14); background: rgba(0,0,0,.32); }
.nexus-ui-logo { color: #fff; letter-spacing: .16em; font-weight: 950; }
.nexus-ui-state { display: inline-flex; align-items: center; gap: .4rem; color: rgba(244,255,248,.72); font-size: .75rem; }
.nexus-ui-state i { width: .45rem; height: .45rem; background: var(--nexus-green); border-radius: 99px; box-shadow: 0 0 14px rgba(56,189,248,.8); }
.nexus-ui-body { display: grid; grid-template-columns: 140px minmax(0, 1fr) 180px; gap: .8rem; padding: 1rem; }
.nexus-ui-menu { display: grid; gap: .5rem; align-content: start; }
.nexus-ui-menu span { padding: .55rem .65rem; background: rgba(255,255,255,.035); border: 1px solid rgba(56,189,248,.10); color: rgba(244,255,248,.72); font-size: .78rem; font-weight: 850; }
.nexus-ui-menu span.is-active { color: #021006; background: var(--nexus-green); }
.target-a { left: 18%; top: 24%; width: 58px; height: 78px; }
.target-b { right: 16%; top: 38%; width: 48px; height: 68px; }
.target-c { left: 45%; bottom: 18%; width: 64px; height: 84px; }
.line-a { left: 50%; top: 50%; width: 130px; transform: rotate(-28deg); }
.line-b { left: 36%; top: 48%; width: 120px; transform: rotate(35deg); }
.nexus-settings-stack { display: grid; gap: .65rem; align-content: start; }
.nexus-setting-row,
.nexus-range-row { border: 1px solid rgba(56,189,248,.12); background: rgba(0,0,0,.26); padding: .62rem; color: rgba(244,255,248,.78); font-size: .78rem; }
.nexus-setting-row { display: flex; justify-content: space-between; gap: .8rem; }
.nexus-setting-row b { color: var(--nexus-green); }
.nexus-range-row i { display: block; margin-top: .45rem; height: 7px; border-radius: 99px; background: linear-gradient(90deg, var(--nexus-green) var(--value), rgba(255,255,255,.12) var(--value)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.04); }
.nexus-home-trust-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-top: 1rem; }
.nexus-home-trust-strip > div { border: 1px solid rgba(56,189,248,.16); background: rgba(4,12,8,.62); padding: 1rem; box-shadow: inset 0 1px 0 rgba(255,255,255,.035); }
.nexus-home-trust-strip span { color: #fff; font-weight: 900; }
.nexus-home-trust-strip p { color: rgba(244,255,248,.62); font-size: .82rem; line-height: 1.55; margin-top: .35rem; }

/* Responsive */
@media (max-width: 1024px) {
  #app [data-component-id="hero"] .container { grid-template-columns: 1fr; }
  .nexus-hero-visual { max-width: 620px; }
  .nexus-showcase-shell { grid-template-columns: 1fr; }
  .nexus-ui-body { grid-template-columns: 120px 1fr; }
  .nexus-settings-stack { grid-column: 1 / -1; grid-template-columns: repeat(2, 1fr); }
  .nexus-home-trust-strip { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  body.nexus-theme::before { background: radial-gradient(circle at 50% 6%, rgba(56,189,248,.18), transparent 23rem), linear-gradient(180deg, #061427 0%, #041020 100%); }
  body.nexus-theme::after { opacity: .22; animation: none; }
  #particles-js canvas { opacity: .34 !important; }
  #app .nexus-store-shell { padding-inline: .9rem !important; }
  #app nav[data-component-id="navbar"] { top: .75rem !important; }
  #app nav[data-component-id="navbar"] > div { border-radius: 16px !important; }
  #app [data-component-id="hero"] > div { min-height: auto !important; padding-block: 3rem !important; }
  #app [data-component-id="hero"]::before { inset: 0; height: 28rem; }
  #app [data-component-id="hero"] h1 { font-size: clamp(2.35rem, 14vw, 4rem) !important; }
  .nexus-hero-visual { display: none; }
  #app .product-card-meta { flex-direction: column; gap: .35rem !important; }
  #app .product-card-stock { max-width: 100%; text-align: left; }
  #app .product-card-action { width: 100%; }
  .nexus-showcase-tabs { grid-template-columns: repeat(2, 1fr); }
  .nexus-ui-body { grid-template-columns: 1fr; }
  .nexus-ui-menu { grid-template-columns: repeat(2, 1fr); }
  .nexus-settings-stack { grid-template-columns: 1fr; }
  .nexus-home-trust-strip { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  #app .nexus-v6-reveal { opacity: 1 !important; transform: none !important; filter: none !important; }
  #app .product-card-shell { transform: none !important; }
}

/* =========================================================
   GamingOps Ultra Visual V7 Fixes
   Removes duplicate marketing blocks, improves interactive UI, modal, toasts, and background.
   ========================================================= */

/* Stronger interactive background, no huge readable watermark */
body.nexus-theme::before {
  background:
    radial-gradient(circle at var(--mx) var(--my), rgba(56, 189, 248, .28), transparent 30rem),
    radial-gradient(circle at calc(var(--mx) + 14rem) calc(var(--my) + 8rem), rgba(56, 189, 248, .08), transparent 22rem),
    radial-gradient(circle at 18% 18%, rgba(56, 189, 248, .16), transparent 28rem),
    radial-gradient(circle at 80% 38%, rgba(56, 189, 248, .13), transparent 34rem),
    radial-gradient(circle at 48% 105%, rgba(56, 189, 248, .13), transparent 38rem),
    linear-gradient(180deg, #041020 0%, #061427 45%, #030d07 100%) !important;
}
body.nexus-theme::after {
  opacity: .46 !important;
  background:
    radial-gradient(circle, rgba(56,189,248,.18) 1px, transparent 2px),
    linear-gradient(rgba(56,189,248,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(56,189,248,.03) 1px, transparent 1px),
    linear-gradient(135deg, transparent 0 48%, rgba(56,189,248,.035) 49%, transparent 51% 100%) !important;
  background-size: 38px 38px, 80px 80px, 80px 80px, 260px 260px !important;
}
.nexus-cursor-orb {
  position: fixed;
  left: 0;
  top: 0;
  width: 440px;
  height: 440px;
  border-radius: 999px;
  pointer-events: none;
  z-index: 1;
  transform: translate3d(-50%, -50%, 0);
  background: radial-gradient(circle, rgba(56,189,248,.18), rgba(56,189,248,.075) 28%, transparent 68%);
  filter: blur(10px);
  mix-blend-mode: screen;
  opacity: .72;
  will-change: transform;
}
#particles-js .nexus-network-canvas-v6 { opacity: .95 !important; }

/* reduce old duplicate showcase/trust content if legacy remains */
.nexus-home-trust-strip,
.nexus-showcase-copy,
.nexus-trust-chips { display: none !important; }

/* Hero: stronger but cleaner */
#app [data-component-id="hero"]::before {
  inset: .4rem 4% auto !important;
  height: clamp(27rem, 45vw, 42rem) !important;
  border-color: rgba(56,189,248,.20) !important;
  background:
    radial-gradient(circle at var(--mx) var(--my), rgba(56,189,248,.22), transparent 31rem),
    radial-gradient(circle at 50% 30%, rgba(56,189,248,.26), transparent 30rem),
    linear-gradient(135deg, rgba(56,189,248,.09), rgba(0,0,0,.10)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 110px rgba(56,189,248,.14), 0 30px 90px rgba(0,0,0,.52) !important;
}
#app [data-component-id="hero"] h1 {
  text-transform: none !important;
  text-shadow: 0 0 42px rgba(56,189,248,.38), 0 18px 70px rgba(0,0,0,.70) !important;
}
#app [data-component-id="hero"] h1::after {
  content: "";
  display: block;
  width: min(260px, 44vw);
  height: 3px;
  margin: 1.05rem auto 0;
  background: linear-gradient(90deg, transparent, var(--nexus-green), transparent);
  box-shadow: 0 0 28px rgba(56,189,248,.65);
  transform-origin: center;
  animation: nexus-line-pulse 2.8s ease-in-out infinite;
}
@keyframes nexus-line-pulse { 0%,100% { opacity:.45; transform: scaleX(.72); } 50% { opacity:1; transform: scaleX(1); } }

/* Product cards: make less dim, better click and hover */
#app .product-card-shell { isolation: isolate; }
#app .product-card-shell > * { pointer-events: none !important; }
#app .product-card-shell { pointer-events: auto !important; cursor: pointer; }
#app .product-card-image { filter: brightness(.92) contrast(1.18) saturate(1.12) !important; }
#app .product-card-shell:hover .product-card-image { filter: brightness(1.12) contrast(1.22) saturate(1.22) !important; }
#app .product-card-media::before {
  content: "";
  position: absolute;
  inset: .58rem;
  z-index: 2;
  border: 1px solid rgba(56,189,248,.10);
  background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.18));
  pointer-events: none !important;
}
#app .nexus-status-badge {
  background: rgba(1, 5, 3, .78) !important;
  border: 1px solid rgba(56,189,248,.42) !important;
  color: rgba(244,255,248,.86) !important;
  box-shadow: 0 0 20px rgba(56,189,248,.18) !important;
}

/* Group modal: centered, polished, not huge/left-heavy */
.nexus-group-modal {
  display: grid !important;
  place-items: center !important;
  padding: clamp(.75rem, 2vw, 1.5rem) !important;
  overflow: auto !important;
}
.nexus-group-modal > .flex {
  width: 100% !important;
  min-height: 100svh !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
}
.nexus-group-dialog {
  width: min(1120px, calc(100vw - 2rem)) !important;
  max-width: min(1120px, calc(100vw - 2rem)) !important;
  max-height: min(82vh, 820px) !important;
  overflow: hidden !important;
  margin: auto !important;
}
.nexus-group-panel {
  max-height: min(82vh, 820px) !important;
  overflow-y: auto !important;
  border: 1px solid rgba(56,189,248,.26) !important;
  border-radius: 22px !important;
  background:
    radial-gradient(circle at var(--mx) var(--my), rgba(56,189,248,.12), transparent 30rem),
    linear-gradient(145deg, rgba(5,16,10,.96), rgba(1,5,3,.94)) !important;
  box-shadow: 0 40px 110px rgba(0,0,0,.72), 0 0 70px rgba(56,189,248,.16), inset 0 1px 0 rgba(255,255,255,.06) !important;
}
.nexus-group-panel .grid { gap: 1rem !important; }
.nexus-group-panel h3 { color: #fff !important; font-weight: 950 !important; }
.nexus-group-panel button { border-radius: 12px; }
.nexus-group-modal .bg-black\/75,
.nexus-group-modal [aria-hidden="true"] {
  background: rgba(0,0,0,.82) !important;
  backdrop-filter: blur(7px) saturate(120%);
}

/* Status page / status cards: avoid empty-looking boring blocks */
#app [data-component-id="status-page"] .max-w-3xl,
#app [data-component-id="status"] .max-w-3xl {
  max-width: 62rem !important;
}
#app [data-component-id="status-page"] a,
#app [data-component-id="status"] a,
#app .status-card {
  border-radius: 18px !important;
  border-color: rgba(56,189,248,.24) !important;
  background: linear-gradient(145deg, rgba(5,16,10,.92), rgba(1,5,3,.88)) !important;
  box-shadow: 0 20px 60px rgba(0,0,0,.44), 0 0 34px rgba(56,189,248,.08), inset 0 1px 0 rgba(255,255,255,.05) !important;
}
#app [data-component-id="status-page"] a:hover,
#app [data-component-id="status"] a:hover {
  transform: translateY(-2px);
  border-color: rgba(56,189,248,.52) !important;
  box-shadow: 0 28px 80px rgba(0,0,0,.55), 0 0 42px rgba(56,189,248,.16) !important;
}

/* Interactive showcase: full-width, functional, no marketing copy */
.nexus-showcase {
  width: min(1180px, calc(100% - 2rem));
  margin: clamp(1.2rem, 4vw, 3rem) auto clamp(2rem, 5vw, 4rem) !important;
}
.nexus-showcase-full {
  display: block !important;
  padding: 0 !important;
  border-radius: 26px !important;
  border: 1px solid rgba(56,189,248,.22) !important;
  overflow: hidden;
  background:
    radial-gradient(circle at var(--mx) var(--my), rgba(56,189,248,.14), transparent 36rem),
    linear-gradient(145deg, rgba(2,8,5,.84), rgba(1,3,2,.94)) !important;
  box-shadow: 0 34px 110px rgba(0,0,0,.62), 0 0 78px rgba(56,189,248,.12), inset 0 1px 0 rgba(255,255,255,.045) !important;
}
.nexus-showcase-full::before { display: none !important; }
.nexus-ui-brand { display: inline-flex; align-items: center; gap: .65rem; color: #fff; font-size: .82rem; font-weight: 950; letter-spacing: .16em; }
.nexus-ui-mark { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 9px; color: #041007; background: var(--nexus-green); box-shadow: 0 0 22px rgba(56,189,248,.36); }
@keyframes nexus-pane-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.nexus-pane-title { display: flex; flex-direction: column; gap: .2rem; margin-bottom: 1rem; }
.nexus-pane-title span { color: #fff; font-size: 1.15rem; font-weight: 950; }
.nexus-pane-title small { color: var(--nexus-green); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.nexus-toggle-row { width: 100%; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 1rem; border: 0; border-bottom: 1px solid rgba(255,255,255,.06); padding: .72rem .05rem; background: transparent; color: rgba(244,255,248,.82); cursor: pointer; font-weight: 800; }
.nexus-toggle-row i { position: relative; width: 2.25rem; height: 1.15rem; border-radius: 99px; background: rgba(255,255,255,.13); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.nexus-toggle-row i::after { content: ""; position: absolute; width: .82rem; height: .82rem; border-radius: 50%; top: .165rem; left: .18rem; background: #fff; transition: .18s ease; }
.nexus-toggle-row.is-on i { background: rgba(56,189,248,.28); box-shadow: 0 0 20px rgba(56,189,248,.22), inset 0 0 0 1px rgba(56,189,248,.24); }
.nexus-toggle-row.is-on i::after { left: 1.24rem; background: var(--nexus-green); }
.nexus-select-row, .nexus-slider-row { display: grid; gap: .45rem; margin: .82rem 0; color: rgba(244,255,248,.78); font-size: .82rem; font-weight: 800; }
.nexus-select-row select { width: 100%; height: 38px; border: 1px solid rgba(56,189,248,.18); border-radius: 10px; color: #fff; background: rgba(0,0,0,.36); padding: 0 .7rem; }
.nexus-slider-row span { display: flex; justify-content: space-between; }
.nexus-slider-row b { color: var(--nexus-green); }
.nexus-slider-row input { width: 100%; accent-color: var(--nexus-green); }
.nexus-snapline { position:absolute; left: 50%; bottom: 0; height: 46%; width: 1px; background: linear-gradient(to top, transparent, rgba(56,189,248,.58)); transform-origin: bottom; opacity: 0; }
@keyframes nexus-scanline { 0%,100% { filter: brightness(.8); } 50% { filter: brightness(1.8); } }
.nexus-skeleton { position:absolute; inset: 38px 44px 28px; opacity:0; }
.nexus-skeleton span { position:absolute; display:block; background:#ff354c; box-shadow:0 0 12px rgba(255,53,76,.24); }
.nexus-skeleton .head { left:50%; top:0; width:46px; height:46px; border:4px solid #ff354c; border-radius:50%; background:transparent; transform:translateX(-50%); }
.nexus-skeleton .body { left:50%; top:48px; width:4px; height:84px; transform:translateX(-50%); }
.nexus-skeleton .arm { top:72px; width:4px; height:78px; transform-origin: top; }
.nexus-skeleton .arm-l { left:50%; transform: rotate(28deg); }
.nexus-skeleton .arm-r { right:50%; transform: rotate(-28deg); }
.nexus-skeleton .leg { top:130px; width:4px; height:88px; transform-origin: top; }
.nexus-skeleton .leg-l { left:50%; transform: rotate(22deg); }
.nexus-skeleton .leg-r { right:50%; transform: rotate(-22deg); }

/* Toast messages */
#nexus-toast-root { position: fixed; right: 1rem; top: 5.75rem; z-index: 9999; display: grid; gap: .75rem; pointer-events: none; }
.nexus-toast { min-width: min(360px, calc(100vw - 2rem)); border: 1px solid rgba(56,189,248,.28); border-radius: 16px; background: linear-gradient(145deg, rgba(5,16,10,.96), rgba(1,5,3,.92)); color: #f4fff8; box-shadow: 0 22px 70px rgba(0,0,0,.55), 0 0 42px rgba(56,189,248,.14); padding: .9rem 1rem; display:flex; align-items:center; gap:.75rem; transform: translateX(120%); opacity:0; transition:.28s ease; pointer-events: auto; }
.nexus-toast.is-visible { transform: translateX(0); opacity: 1; }
.nexus-toast i { display:grid; place-items:center; width:1.7rem; height:1.7rem; border-radius:999px; background: rgba(56,189,248,.15); color:var(--nexus-green); }
.nexus-toast strong { display:block; font-size:.9rem; }
.nexus-toast small { display:block; color:rgba(244,255,248,.62); margin-top:.1rem; }
.nexus-toast.is-error { border-color: rgba(255,72,72,.34); box-shadow:0 22px 70px rgba(0,0,0,.55), 0 0 42px rgba(255,72,72,.12); }
.nexus-toast.is-error i { background: rgba(255,72,72,.12); color:#ff5959; }
@media (max-width: 768px) {
  .nexus-cursor-orb { display:none; }
  .nexus-showcase { width: min(100% - 1rem, 680px); }
  .nexus-group-dialog { width: calc(100vw - 1rem) !important; max-width: calc(100vw - 1rem) !important; }
  .nexus-group-panel { max-height: 86vh !important; padding: .95rem !important; }
  #nexus-toast-root { top: auto; bottom: 1rem; left: .75rem; right: .75rem; }
  .nexus-toast { width: 100%; min-width: 0; }
}

/* =========================================================
   GamingOps Ultra V8 final polish
   - Removes duplicate hero status panel
   - Moves interactive ESP UI into hero
   - Adds vouches/FAQ presentation
   - Stronger background, rounded cards/modals, better scrollbar
   ========================================================= */

/* Remove old sweeping effects that looked like a moving stripe */
#app nav[data-component-id="navbar"] h1::after,
#app .product-card-shell::before {
  content: none !important;
  display: none !important;
  animation: none !important;
}
#app [data-component-id="hero"] h1::after { animation: none !important; opacity: .8 !important; }

/* More visible interactive background without big text/watermark */
body.nexus-theme::before {
  background:
    radial-gradient(circle at var(--mx) var(--my), rgba(56, 189, 248, .30), transparent 28rem),
    radial-gradient(circle at 14% 18%, rgba(56,189,248,.16), transparent 27rem),
    radial-gradient(circle at 86% 20%, rgba(56,189,248,.13), transparent 32rem),
    radial-gradient(circle at 70% 88%, rgba(56,189,248,.12), transparent 30rem),
    linear-gradient(180deg, #061427 0%, #021009 45%, #041020 100%) !important;
}
body.nexus-theme::after {
  opacity: .48 !important;
  background:
    linear-gradient(rgba(56, 189, 248, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(56, 189, 248, .031) 1px, transparent 1px),
    radial-gradient(circle, rgba(56,189,248,.26) 1px, transparent 1.8px),
    linear-gradient(135deg, transparent 0 49%, rgba(56,189,248,.04) 50%, transparent 52% 100%) !important;
  background-size: 90px 90px, 90px 90px, 38px 38px, 260px 260px !important;
}
#particles-js canvas,
#particles-js .nexus-network-canvas,
#particles-js .nexus-network-canvas-v6 { opacity: 1 !important; }
.nexus-cursor-orb {
  opacity: .50 !important;
  filter: blur(20px) saturate(150%) !important;
  background: radial-gradient(circle, rgba(56,189,248,.30), rgba(56,189,248,.08) 42%, transparent 68%) !important;
}

/* Premium scrollbar */
html { scrollbar-color: rgba(56,189,248,.55) rgba(2,6,4,.82); }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: rgba(2,6,4,.86); }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, rgba(56,189,248,.78), rgba(0,120,42,.75)); border: 3px solid rgba(2,6,4,.86); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--nexus-green); }

/* Hero: use compact interactive panel instead of static Store Status panel */
.nexus-hero-visual,
.nexus-hero-chips,
.nexus-home-trust-strip { display: none !important; }
#app [data-component-id="hero"] .container {
  grid-template-columns: minmax(0, .95fr) minmax(380px, 560px) !important;
  align-items: center !important;
}
.nexus-hero-showcase {
  width: min(100%, 560px);
  justify-self: center;
  position: relative;
  z-index: 2;
}
.nexus-hero-showcase .nexus-showcase {
  margin: 0 !important;
  width: 100% !important;
}
.nexus-hero-showcase .nexus-showcase-shell {
  padding: 0 !important;
  width: 100% !important;
  border-radius: 26px !important;
  overflow: hidden !important;
  border: 1px solid rgba(56,189,248,.28) !important;
  background: linear-gradient(145deg, rgba(4,15,9,.92), rgba(0,0,0,.82)) !important;
  box-shadow: 0 30px 95px rgba(0,0,0,.62), 0 0 75px rgba(56,189,248,.18), inset 0 1px 0 rgba(255,255,255,.05) !important;
}
.nexus-hero-showcase .nexus-ui-topbar {
  padding: .72rem .95rem !important;
  background: rgba(0,0,0,.30) !important;
}
.nexus-hero-showcase .nexus-ui-brand {
  font-size: .68rem !important;
  letter-spacing: .13em !important;
}
.nexus-hero-showcase .nexus-ui-mark {
  width: 1.55rem !important;
  height: 1.55rem !important;
  border-radius: 8px !important;
}
.nexus-hero-showcase .nexus-pane-title { margin-bottom: .55rem !important; }
.nexus-hero-showcase .nexus-pane-title span { font-size: .92rem !important; }
.nexus-hero-showcase .nexus-pane-title small { font-size: .62rem !important; }
.nexus-hero-showcase .nexus-toggle-row {
  padding: .46rem .04rem !important;
  font-size: .72rem !important;
}
.nexus-hero-showcase .nexus-select-row,
.nexus-hero-showcase .nexus-slider-row {
  margin: .46rem 0 !important;
  font-size: .72rem !important;
}
.nexus-hero-showcase .nexus-select-row select { height: 32px !important; }

/* Hide old standalone marketing copy if any older markup survives */
.nexus-showcase-copy,
.nexus-trust-chips,
.nexus-showcase h2,
.nexus-showcase p { display: none !important; }

/* Cards/buttons: softer, rounded, less square */
#app .product-card-shell {
  border-radius: 24px !important;
  background: linear-gradient(180deg, rgba(7,24,14,.92), rgba(1,5,3,.94)) !important;
  box-shadow: 0 22px 58px rgba(0,0,0,.50), 0 0 34px rgba(56,189,248,.055), inset 0 1px 0 rgba(255,255,255,.05) !important;
}
#app .product-card-inner { border-radius: inherit !important; overflow: hidden !important; }
#app .product-card-head { border-radius: 24px 24px 0 0 !important; }
#app .product-card-media { border-radius: 18px !important; margin: .7rem .7rem 0 !important; padding: .45rem !important; }
#app .product-card-media::before,
#app .product-card-media::after { border-radius: 15px !important; }
#app .product-card-image,
#app .object-product-image,
#app .object-group-image { border-radius: 15px !important; }
#app .product-card-action {
  border-radius: 14px !important;
  min-height: 42px !important;
  margin-inline: .1rem !important;
}
#app .product-card-stock { color: rgba(244,255,248,.72) !important; }

/* Product page purchase box and variant buttons: more rounded */
#app [data-component-id="product-page"] [class*="bg-card"],
#app [data-component-id="product-page"] [class*="bg-background"],
#app [data-component-id="product-page"] button,
#app [data-component-id="product-page"] a,
#app [data-component-id="cart-page"] [class*="bg-card"],
#app [data-component-id="cart-page"] button,
#app [data-component-id="cart-page"] a {
  border-radius: 18px !important;
}
#app [data-component-id="product-page"] .border-accent-500,
#app [data-component-id="product-page"] button[class*="border"] {
  border-color: rgba(56,189,248,.55) !important;
}

/* Group modal: centered and less blocky */
.nexus-group-modal {
  display: grid !important;
  place-items: center !important;
  padding: clamp(.75rem, 2vw, 1.5rem) !important;
}
.nexus-group-modal > .flex {
  width: 100% !important;
  min-height: 100vh !important;
  align-items: center !important;
  justify-content: center !important;
}
.nexus-group-modal .bg-black\/75 {
  background: rgba(0,0,0,.78) !important;
  backdrop-filter: blur(8px) !important;
}
.nexus-group-dialog {
  width: min(100%, 68rem) !important;
  max-width: min(68rem, calc(100vw - 1.5rem)) !important;
  margin: auto !important;
}
.nexus-group-panel {
  border-radius: 26px !important;
  border-color: rgba(56,189,248,.28) !important;
  background: linear-gradient(145deg, rgba(4,16,9,.98), rgba(0,0,0,.94)) !important;
  box-shadow: 0 38px 120px rgba(0,0,0,.78), 0 0 80px rgba(56,189,248,.16) !important;
}
.nexus-group-panel .grid { align-items: stretch !important; }

/* Vouches and FAQ */
.nexus-section-head {
  text-align: center;
  width: min(100%, 760px);
  margin: 0 auto 1.2rem;
}
.nexus-section-head span {
  display: inline-flex;
  color: var(--nexus-green);
  font-weight: 950;
  letter-spacing: .16em;
  font-size: .72rem;
  text-transform: uppercase;
}
.nexus-section-head h2 {
  margin: .35rem 0 .35rem;
  color: #fff;
  font-size: clamp(1.7rem, 3vw, 2.7rem);
  font-weight: 950;
  letter-spacing: -.04em;
}
.nexus-section-head p { color: rgba(244,255,248,.66); }
.nexus-vouches-section,
.nexus-faq-lite { margin-block: clamp(2rem, 5vw, 4.5rem); }
.nexus-vouches-card {
  width: min(100%, 64rem);
  margin: 0 auto;
  border: 1px solid rgba(56,189,248,.24);
  border-radius: 26px;
  padding: .75rem;
  background: linear-gradient(145deg, rgba(5,17,10,.88), rgba(0,0,0,.88));
  box-shadow: 0 24px 80px rgba(0,0,0,.58), 0 0 55px rgba(56,189,248,.10), inset 0 1px 0 rgba(255,255,255,.045);
  overflow: hidden;
}
.nexus-vouches-card iframe {
  display: block;
  width: 100%;
  min-height: 420px;
  border: 0;
  border-radius: 18px;
  background: rgba(0,0,0,.45);
}
.nexus-vouches-actions {
  display: flex;
  justify-content: center;
  padding: .9rem .4rem .2rem;
}
.nexus-vouches-actions a {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  min-height: 42px;
  padding: 0 1rem;
  border: 1px solid rgba(56,189,248,.45);
  border-radius: 999px;
  color: var(--nexus-green);
  background: rgba(56,189,248,.07);
  font-weight: 900;
}
.nexus-vouches-actions a:hover { color: #021006; background: var(--nexus-green); box-shadow: 0 0 26px rgba(56,189,248,.24); }
.nexus-faq-grid {
  width: min(100%, 64rem);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
.nexus-faq-grid details {
  border: 1px solid rgba(56,189,248,.18);
  border-radius: 20px;
  background: linear-gradient(145deg, rgba(5,17,10,.84), rgba(0,0,0,.82));
  box-shadow: 0 18px 48px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.035);
  overflow: hidden;
}
.nexus-faq-grid summary {
  cursor: pointer;
  list-style: none;
  padding: 1rem 1.1rem;
  color: #fff;
  font-weight: 950;
}
.nexus-faq-grid summary::-webkit-details-marker { display: none; }
.nexus-faq-grid summary::after { content: '+'; float: right; color: var(--nexus-green); font-size: 1.15rem; }
.nexus-faq-grid details[open] summary::after { content: '–'; }
.nexus-faq-grid p {
  margin: 0;
  padding: 0 1.1rem 1.1rem;
  color: rgba(244,255,248,.68);
  line-height: 1.65;
}

/* Make existing feature section less repetitive-looking and keep it separate */
#app [data-component-id="features"] { margin-top: clamp(2rem, 4vw, 3.5rem) !important; }
#app [data-component-id="features"] .text-center {
  border-radius: 22px !important;
}

@media (max-width: 1024px) {
  #app [data-component-id="hero"] .container { grid-template-columns: 1fr !important; }
  .nexus-hero-showcase { margin-top: 1.25rem; }
}
@media (max-width: 768px) {
  body.nexus-theme::before { background: radial-gradient(circle at 50% 8%, rgba(56,189,248,.20), transparent 22rem), linear-gradient(180deg, #061427 0%, #041020 100%) !important; }
  .nexus-faq-grid { grid-template-columns: 1fr; }
  .nexus-vouches-card iframe { min-height: 360px; }
  .nexus-group-dialog { max-width: calc(100vw - .75rem) !important; }
  .nexus-group-panel { border-radius: 20px !important; padding: .9rem !important; }
}


/* =========================================================
   GamingOps Ultra V9 — FAQ, Vouches, ESP, rounded UI polish
   Visual/UX only. Sellauth data/prices/cart/checkout unchanged.
   ========================================================= */

:root {
  --nexus-radius-xs: 12px;
  --nexus-radius-md: 20px;
  --nexus-radius-xl: 30px;
  --nexus-surface: rgba(2, 8, 5, .84);
  --nexus-surface-2: rgba(7, 22, 13, .78);
}

/* Remove the old large homepage custom scroll marker; keep native scrolling. */
.nexus-page-scroll,
.nexus-scroll-rail,
.nexus-scroll-progress,
.nexus-custom-scroll,
.nexus-side-scroll,
.nexus-scrollbar,
.nexus-scroll-indicator,
.nexus-scroll-track,
.nexus-progress-rail {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
html.nexus-homepage { scrollbar-width: none; }
html.nexus-homepage::-webkit-scrollbar { width: 0 !important; height: 0 !important; }
html:not(.nexus-homepage) { scrollbar-color: rgba(56,189,248,.26) rgba(2,6,4,.30) !important; }
html:not(.nexus-homepage)::-webkit-scrollbar { width: 8px !important; height: 8px !important; }
html:not(.nexus-homepage)::-webkit-scrollbar-track { background: rgba(2,6,4,.36) !important; }
html:not(.nexus-homepage)::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(56,189,248,.42), rgba(0,105,40,.40)) !important;
  border: 2px solid rgba(2,6,4,.76) !important;
  border-radius: 999px !important;
}

/* Stronger interactive background without any readable watermark. */
body.nexus-theme::before {
  background:
    radial-gradient(circle at var(--mx) var(--my), rgba(56,189,248,.24), transparent 30rem),
    radial-gradient(circle at 50% -8%, rgba(56,189,248,.22), transparent 40rem),
    radial-gradient(circle at 12% 38%, rgba(0,160,60,.18), transparent 30rem),
    radial-gradient(circle at 90% 76%, rgba(56,189,248,.14), transparent 38rem),
    linear-gradient(180deg, #061427 0%, #041020 48%, #031109 100%) !important;
}
body.nexus-theme::after { opacity: .44 !important; }
#particles-js canvas,
#particles-js .nexus-network-canvas,
#particles-js .nexus-network-canvas-v6 { opacity: .95 !important; }

/* Global roundness pass. */
#app .bg-card\/75,
#app [class*="bg-card"],
#app [class*="bg-background"],
#app input,
#app select,
#app textarea,
#app button,
#app a[class*="border"],
#app .choices__inner {
  border-radius: var(--nexus-radius-md) !important;
}

/* Product cards: restore premium motion and strong rounded look. */
#app .product-card-shell {
  border-radius: 28px !important;
  overflow: hidden !important;
  transform: perspective(950px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translate3d(0, var(--lift, 0), 0) !important;
  transition: transform .24s cubic-bezier(.2,.8,.2,1), border-color .24s ease, box-shadow .24s ease, filter .24s ease !important;
  border-color: rgba(56,189,248,.24) !important;
  background:
    radial-gradient(circle at 50% -15%, rgba(56,189,248,.16), transparent 42%),
    linear-gradient(180deg, rgba(8,26,15,.92), rgba(1,5,3,.95)) !important;
}
#app .product-card-shell:hover {
  --lift: -9px;
  border-color: rgba(56,189,248,.72) !important;
  box-shadow: 0 34px 86px rgba(0,0,0,.64), 0 0 62px rgba(56,189,248,.18), inset 0 1px 0 rgba(255,255,255,.08) !important;
}
#app .product-card-shell::before { z-index: 5 !important; }
#app .product-card-shell::after { z-index: 4 !important; }
#app .product-card-inner { border-radius: inherit !important; overflow: hidden !important; }
#app .product-card-head {
  border-radius: 28px 28px 0 0 !important;
  padding: 1.05rem 1rem .9rem !important;
}
#app .product-card-media {
  border-radius: 22px !important;
  margin: .75rem .75rem 0 !important;
  padding: .5rem !important;
  border: 1px solid rgba(56,189,248,.20) !important;
  box-shadow: inset 0 0 34px rgba(56,189,248,.055), 0 10px 30px rgba(0,0,0,.35);
}
#app .product-card-media::before,
#app .product-card-media::after { border-radius: 18px !important; }
#app .product-card-image,
#app .object-product-image,
#app .object-group-image,
#app .product-card-placeholder {
  border-radius: 18px !important;
  transition: transform .36s cubic-bezier(.2,.8,.2,1), filter .36s ease !important;
}
#app .product-card-shell:hover .product-card-image,
#app .product-card-shell:hover .object-product-image,
#app .product-card-shell:hover .object-group-image {
  transform: scale(1.075) !important;
  filter: brightness(1.14) contrast(1.23) saturate(1.24) !important;
}
#app .product-card-action {
  border-radius: 18px !important;
  min-height: 46px !important;
  font-weight: 950 !important;
  letter-spacing: -.01em;
}
#app .product-card-action svg { transition: transform .22s ease; }
#app .product-card-shell:hover .product-card-action svg { transform: translateX(5px); }
#app .nexus-status-badge { top: .95rem !important; right: .95rem !important; }

/* Product pages / group modals become softer and centered. */
.nexus-group-modal { display: grid !important; place-items: center !important; overflow-y: auto !important; }
.nexus-group-dialog { width: min(76rem, calc(100vw - 2rem)) !important; margin: auto !important; }
.nexus-group-panel {
  border-radius: 30px !important;
  padding: clamp(1rem, 2vw, 1.55rem) !important;
  border: 1px solid rgba(56,189,248,.34) !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(56,189,248,.12), transparent 38%),
    linear-gradient(145deg, rgba(5,18,11,.98), rgba(0,0,0,.95)) !important;
  box-shadow: 0 44px 140px rgba(0,0,0,.82), 0 0 90px rgba(56,189,248,.18) !important;
}
.nexus-group-panel .grid { gap: 1.1rem !important; }
.nexus-group-panel .product-card-shell { border-radius: 24px !important; }

/* Redesigned FAQ accordion. */
.nexus-faq-lite { width: min(100% - 1.5rem, 86rem); margin-inline: auto; }
.nexus-faq-accordion {
  width: min(100%, 72rem);
  margin: 1.6rem auto 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  align-items: start;
}
.nexus-faq-item {
  border: 1px solid rgba(56,189,248,.23);
  border-radius: 24px;
  background:
    radial-gradient(circle at 25% 0%, rgba(56,189,248,.10), transparent 36%),
    linear-gradient(145deg, rgba(5,18,11,.88), rgba(0,0,0,.88));
  box-shadow: 0 22px 64px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.045);
  overflow: hidden;
  transition: border-color .24s ease, box-shadow .24s ease, transform .24s ease;
}
.nexus-faq-item:hover,
.nexus-faq-item.is-open {
  border-color: rgba(56,189,248,.55);
  box-shadow: 0 28px 80px rgba(0,0,0,.55), 0 0 40px rgba(56,189,248,.11), inset 0 1px 0 rgba(255,255,255,.06);
}
.nexus-faq-question {
  width: 100%;
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem 1.25rem;
  border: 0 !important;
  background: transparent !important;
  color: #fff !important;
  text-align: left;
  cursor: pointer;
  font-weight: 950;
  font-size: clamp(.96rem, 1.2vw, 1.08rem);
}
.nexus-faq-question i {
  position: relative;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 12px;
  border: 1px solid rgba(56,189,248,.30);
  background: rgba(56,189,248,.07);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
  transition: background .22s ease, transform .22s ease, box-shadow .22s ease;
}
.nexus-faq-question i::before,
.nexus-faq-question i::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 14px; height: 2px;
  border-radius: 99px;
  background: var(--nexus-green);
  transform: translate(-50%, -50%);
  box-shadow: 0 0 10px rgba(56,189,248,.55);
}
.nexus-faq-question i::after { transform: translate(-50%, -50%) rotate(90deg); transition: transform .22s ease, opacity .22s ease; }
.nexus-faq-item.is-open .nexus-faq-question i { background: var(--nexus-green); box-shadow: 0 0 26px rgba(56,189,248,.26); }
.nexus-faq-item.is-open .nexus-faq-question i::before,
.nexus-faq-item.is-open .nexus-faq-question i::after { background: #021006; box-shadow: none; }
.nexus-faq-item.is-open .nexus-faq-question i::after { opacity: 0; transform: translate(-50%, -50%) rotate(0deg); }
.nexus-faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height .34s ease, opacity .24s ease;
  opacity: 0;
}
.nexus-faq-item.is-open .nexus-faq-answer { opacity: 1; }
.nexus-faq-answer p {
  margin: 0;
  padding: 0 1.25rem 1.25rem;
  color: rgba(244,255,248,.72);
  font-size: .96rem;
  line-height: 1.75;
}
/* Also improve Sellauth's native FAQ component if used. */
#app [data-component-id="faq"] .bg-card\/75,
#app [data-component-id="faq"] [x-data] {
  border-radius: 24px !important;
  border-color: rgba(56,189,248,.22) !important;
  background: linear-gradient(145deg, rgba(5,18,11,.88), rgba(0,0,0,.88)) !important;
  box-shadow: 0 18px 55px rgba(0,0,0,.45) !important;
}

/* Full-width animated vouches carousel. */
.nexus-vouches-section {
  position: relative;
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: clamp(2.5rem, 6vw, 5.5rem) 0;
  overflow: hidden;
}
.nexus-vouches-section::before {
  content: "";
  position: absolute;
  inset: 8% 0 0;
  background: radial-gradient(circle at 50% 45%, rgba(56,189,248,.14), transparent 42rem);
  pointer-events: none;
}
.nexus-vouches-shell { position: relative; z-index: 1; width: 100%; }
.nexus-vouches-loading {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .6rem;
  color: rgba(244,255,248,.66);
  margin-bottom: 1rem;
}
.nexus-vouches-shell.is-loaded .nexus-vouches-loading { display: none; }
.nexus-vouches-marquee {
  width: 100%;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.nexus-vouches-track {
  display: flex;
  width: max-content;
  gap: 1rem;
  padding: .6rem 0;
  animation: nexus-vouches-scroll 38s linear infinite;
  will-change: transform;
}
.nexus-vouches-marquee:hover .nexus-vouches-track { animation-play-state: paused; }
@keyframes nexus-vouches-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.nexus-vouch-card {
  width: min(82vw, 360px);
  min-height: 170px;
  border: 1px solid rgba(56,189,248,.26);
  border-radius: 24px;
  padding: 1rem;
  background:
    radial-gradient(circle at 20% 0%, rgba(56,189,248,.12), transparent 38%),
    linear-gradient(145deg, rgba(5,18,11,.90), rgba(0,0,0,.88));
  box-shadow: 0 24px 64px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.05);
  color: #fff;
}
.nexus-vouch-top { display: flex; align-items: center; justify-content: space-between; gap: .8rem; margin-bottom: .8rem; }
.nexus-vouch-user { display: inline-flex; align-items: center; gap: .6rem; min-width: 0; font-weight: 950; }
.nexus-vouch-avatar { width: 34px; height: 34px; border-radius: 12px; display: grid; place-items: center; background: rgba(56,189,248,.12); color: var(--nexus-green); border: 1px solid rgba(56,189,248,.26); }
.nexus-vouch-stars { color: var(--nexus-green); text-shadow: 0 0 12px rgba(56,189,248,.42); white-space: nowrap; font-size: .8rem; }
.nexus-vouch-text { color: rgba(244,255,248,.76); line-height: 1.65; font-size: .94rem; }
.nexus-vouches-footer {
  width: min(100% - 1.5rem, 72rem);
  margin: 1rem auto 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
  color: rgba(244,255,248,.64);
  font-size: .9rem;
}
.nexus-vouches-footer span,
.nexus-vouches-footer a {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  border: 1px solid rgba(56,189,248,.22);
  background: rgba(56,189,248,.055);
  border-radius: 999px;
  padding: .55rem .85rem;
}
.nexus-vouches-footer a { color: var(--nexus-green); font-weight: 900; }
.nexus-vouches-footer a:hover { background: var(--nexus-green); color: #021006; }

/* ESP/showcase: fixed proportions and a cleaner square/premium mockup. */
.nexus-showcase { width: min(100% - 1.5rem, 1040px) !important; margin: clamp(2rem, 4vw, 4rem) auto !important; }
.nexus-showcase-shell,
.nexus-hero-showcase .nexus-showcase-shell {
  border-radius: 30px !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 70% 18%, rgba(56,189,248,.15), transparent 30%),
    linear-gradient(145deg, rgba(4,15,9,.96), rgba(0,0,0,.92)) !important;
}
.nexus-skeleton span { background: #ff3f4a !important; box-shadow: 0 0 12px rgba(255,65,74,.32); }
.nexus-toggle-row { border-radius: 14px !important; }
.nexus-toggle-row:hover { background: rgba(56,189,248,.07) !important; }
.nexus-toggle-row i { border-radius: 999px !important; }

/* Hero balance with the showcase. */
#app [data-component-id="hero"] .container {
  width: min(100%, 72rem) !important;
  display: grid !important;
  grid-template-columns: minmax(0, .92fr) minmax(480px, 600px) !important;
  gap: clamp(2rem, 5vw, 4rem) !important;
  align-items: center !important;
}
#app [data-component-id="hero"] h1 {
  font-size: clamp(3rem, 6vw, 6.2rem) !important;
  line-height: .92 !important;
  letter-spacing: -.07em !important;
}
.nexus-hero-showcase { width: min(100%, 600px) !important; }

@media (max-width: 1100px) {
  #app [data-component-id="hero"] .container { grid-template-columns: 1fr !important; width: min(100%, 48rem) !important; }
  .nexus-hero-showcase { margin-top: 1.2rem !important; }
}
@media (max-width: 820px) {
  .nexus-faq-accordion { grid-template-columns: 1fr; }
  .nexus-vouches-track { animation-duration: 48s; }
  #app [data-component-id="hero"] h1 { font-size: clamp(2.7rem, 13vw, 4.6rem) !important; }
}
@media (max-width: 520px) {
  .nexus-vouch-card { width: 84vw; }
  .nexus-faq-question { min-height: 68px; padding: 1rem; }
  .nexus-faq-answer p { padding: 0 1rem 1rem; }
  .nexus-group-dialog { width: calc(100vw - .75rem) !important; }
  .nexus-group-panel { border-radius: 22px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .nexus-vouches-track { animation: none !important; transform: none !important; flex-wrap: wrap; justify-content: center; width: 100%; }
  #app .product-card-shell { transform: none !important; }
}


/* =========================================================
   GamingOps Ultra V10 — final hotfix polish
   Focus: remove fake scroll rail, restore card clicks/animations,
   slow vouches, widen hero showcase, stronger interactive background.
   ========================================================= */

/* Hide the ugly page scrollbar/rail effect while preserving normal scrolling. */
html,
body {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}
html::-webkit-scrollbar,
body::-webkit-scrollbar,
#app::-webkit-scrollbar,
#app .nexus-store-shell::-webkit-scrollbar,
#app .components::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}
#app,
#app .nexus-store-shell,
#app .components {
  overflow-x: visible !important;
  overflow-y: visible !important;
  max-height: none !important;
}
.nexus-page-scroll,
.nexus-scroll-rail,
.nexus-scroll-progress,
.nexus-custom-scroll,
.nexus-side-scroll,
.nexus-scrollbar,
.nexus-scroll-indicator,
.nexus-scroll-track,
[data-nexus-scroll],
[data-scroll-indicator],
[data-scroll-progress],
.scroll-indicator,
.scroll-progress,
.scrollbar-track,
.scrollbar-rail {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Stronger interactive background and mouse spotlight. */
body.nexus-theme::before {
  background:
    radial-gradient(circle at var(--mx) var(--my), rgba(56, 189, 248, .30), transparent 30rem),
    radial-gradient(circle at calc(var(--mx) + 12rem) calc(var(--my) + 8rem), rgba(40, 255, 130, .12), transparent 22rem),
    radial-gradient(circle at 50% -8%, rgba(56, 189, 248, .24), transparent 44rem),
    radial-gradient(circle at 12% 34%, rgba(56, 189, 248, .13), transparent 30rem),
    radial-gradient(circle at 92% 70%, rgba(34, 211, 238, .13), transparent 35rem),
    linear-gradient(180deg, #061427 0%, #041020 45%, #031109 100%) !important;
}
#particles-js canvas,
#particles-js .nexus-network-canvas,
#particles-js .nexus-network-canvas-v6 {
  opacity: .96 !important;
  filter: drop-shadow(0 0 7px rgba(56,189,248,.36));
}
.nexus-cursor-orb {
  width: 36rem !important;
  height: 36rem !important;
  opacity: .42 !important;
  background: radial-gradient(circle, rgba(56,189,248,.26), rgba(56,189,248,.08) 38%, transparent 66%) !important;
  mix-blend-mode: screen;
}

/* Product cards: restore clickability and animation. */
#app .product-card-shell {
  pointer-events: auto !important;
  cursor: pointer !important;
  border-radius: 30px !important;
  overflow: hidden !important;
  will-change: transform, box-shadow, border-color !important;
  transform-style: preserve-3d !important;
  transform: perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translate3d(0,var(--lift,0),0) !important;
  transition: transform .24s cubic-bezier(.2,.8,.2,1), border-color .24s ease, box-shadow .24s ease, filter .24s ease !important;
}
#app .product-card-shell > * {
  pointer-events: auto !important;
}
#app .product-card-shell::before,
#app .product-card-shell::after,
#app .product-card-media::before,
#app .product-card-media::after,
#app .nexus-status-badge {
  pointer-events: none !important;
}
#app .product-card-shell:hover,
#app .product-card-shell:focus-visible {
  --lift: -11px;
  border-color: rgba(56,189,248,.82) !important;
  box-shadow: 0 38px 90px rgba(0,0,0,.66), 0 0 72px rgba(56,189,248,.22), inset 0 1px 0 rgba(255,255,255,.09) !important;
}
#app .product-card-shell:hover::before { transform: translateX(120%) !important; }
#app .product-card-media,
#app .product-card-image,
#app .object-product-image,
#app .object-group-image,
#app .product-card-placeholder { pointer-events: none !important; }
#app .product-card-action { pointer-events: none !important; }
#app .product-card-shell:hover .product-card-action {
  color: #021006 !important;
  background: linear-gradient(90deg, var(--nexus-green), var(--nexus-green-soft)) !important;
  box-shadow: 0 0 30px rgba(56,189,248,.34) !important;
}

/* Hero layout: centered copy, larger rectangular ESP panel pushed right. */
#app [data-component-id="hero"] .container {
  width: min(100%, 92rem) !important;
  max-width: 92rem !important;
  grid-template-columns: minmax(360px, .82fr) minmax(660px, 820px) !important;
  gap: clamp(2.4rem, 5vw, 5rem) !important;
}
#app [data-component-id="hero"] .container > div:first-child {
  justify-self: center !important;
  text-align: center !important;
  align-items: center !important;
  max-width: 640px !important;
}
#app [data-component-id="hero"] p { max-width: 560px !important; }
.nexus-hero-showcase {
  width: min(100%, 820px) !important;
  justify-self: end !important;
  margin-inline: 0 !important;
}
.nexus-hero-showcase .nexus-showcase,
.nexus-hero-showcase .nexus-showcase-shell,
.nexus-hero-showcase .nexus-ui-panel,
.nexus-hero-showcase .go-market-panel {
  width: 100% !important;
  max-width: none !important;
}
.nexus-hero-showcase .nexus-showcase-shell {
  border-radius: 34px !important;
}
.go-market-panel,
.nexus-ui-panel {
  border: 1px solid rgba(56,189,248,.30) !important;
  box-shadow: 0 34px 100px rgba(0,0,0,.62), 0 0 65px rgba(56,189,248,.16), inset 0 1px 0 rgba(255,255,255,.07) !important;
}

/* FAQ: cleaner aligned open state, no raised/ugly movement. */
.nexus-faq-item,
.nexus-faq-item:hover,
.nexus-faq-item.is-open {
  transform: none !important;
}
.nexus-faq-item {
  min-height: 78px !important;
}
.nexus-faq-question {
  min-height: 78px !important;
}
.nexus-faq-item.is-open {
  background:
    radial-gradient(circle at 22% 0%, rgba(56,189,248,.16), transparent 42%),
    linear-gradient(145deg, rgba(6,22,13,.94), rgba(0,0,0,.90)) !important;
}
.nexus-faq-answer {
  transition: max-height .36s cubic-bezier(.2,.8,.2,1), opacity .25s ease !important;
}

/* Vouches: slower, wider, no external-source wording. */
.nexus-vouches-section { padding-block: clamp(2.8rem, 6vw, 6rem) !important; }
.nexus-vouches-track { animation-duration: 82s !important; }
.nexus-vouch-card { width: min(86vw, 410px) !important; min-height: 180px !important; }
.nexus-vouches-footer span { display: none !important; }
.nexus-vouches-footer { margin-top: 1.25rem !important; }

@media (max-width: 1180px) {
  #app [data-component-id="hero"] .container {
    grid-template-columns: 1fr !important;
    width: min(100%, 56rem) !important;
    max-width: 56rem !important;
  }
  .nexus-hero-showcase {
    justify-self: center !important;
    width: min(100%, 820px) !important;
  }
}
@media (max-width: 860px) {
  .nexus-vouches-track { animation-duration: 96s !important; }
  body.nexus-theme::before {
    background:
      radial-gradient(circle at 50% 18%, rgba(56,189,248,.20), transparent 25rem),
      linear-gradient(180deg, #061427 0%, #041020 55%, #031109 100%) !important;
  }
}


/* =========================================================
   GamingOps Ultra V11 — real fixes for hero, clicks, scroll rail, background
   Added after previous layers so it wins without touching Sellauth data.
   ========================================================= */

/* 1) Closed Alpine modals MUST stay hidden. Previous display:grid overrides were blocking product clicks. */
#app .nexus-group-modal[style*="display: none"],
#app .nexus-group-modal[x-cloak],
#app [x-cloak].nexus-group-modal {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
#app .nexus-group-modal[style*="display: none"] *,
#app .nexus-group-modal[x-cloak] * {
  pointer-events: none !important;
}
#app .nexus-group-modal {
  /* keep it functional when Alpine shows it, but do not force-display hidden modals */
  overflow-y: auto !important;
  pointer-events: auto !important;
}
#app .nexus-group-modal > .flex {
  min-height: 100svh !important;
  align-items: center !important;
  justify-content: center !important;
}
#app .nexus-group-dialog {
  width: min(1120px, calc(100vw - 2rem)) !important;
  max-width: min(1120px, calc(100vw - 2rem)) !important;
  margin: auto !important;
}
#app .nexus-group-panel {
  max-height: min(84vh, 820px) !important;
  overflow-y: auto !important;
  border-radius: 30px !important;
}

/* 2) Remove every fake/internal page scroll rail. Keep only normal browser scroll. */
.nexus-page-scroll,
.nexus-scroll-rail,
.nexus-scroll-progress,
.nexus-custom-scroll,
.nexus-side-scroll,
.nexus-scrollbar,
.nexus-scroll-indicator,
.nexus-scroll-track,
[data-nexus-scroll],
[data-scroll-indicator],
[data-scroll-progress],
.scroll-indicator,
.scroll-progress,
.scrollbar-track,
.scrollbar-rail,
.scrollbar-thumb,
.__nexus-scrollbar,
.__nexus-scroll-rail {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
html,
body {
  scrollbar-width: thin !important;
  scrollbar-color: rgba(56,189,248,.38) rgba(1,5,3,.35) !important;
}
html::-webkit-scrollbar,
body::-webkit-scrollbar {
  display: block !important;
  width: 10px !important;
  height: 10px !important;
}
html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track { background: rgba(1,5,3,.50) !important; }
html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(56,189,248,.45), rgba(0,120,42,.40)) !important;
  border: 3px solid rgba(1,5,3,.68) !important;
  border-radius: 999px !important;
}
#app, #app .components, #app .nexus-store-shell {
  overflow-x: clip !important;
  max-height: none !important;
}

/* 3) Cosmetic layers never block product/category clicks. */
#particles-js,
#particles-js *,
.nexus-cursor-orb,
.nexus-network-canvas-final,
.nexus-network-canvas-v6,
.nexus-network-canvas,
body.nexus-theme::before,
body.nexus-theme::after {
  pointer-events: none !important;
}
#app a.product-card-shell,
#app a.product-card-shell * {
  pointer-events: auto;
}
#app a.product-card-shell::before,
#app a.product-card-shell::after,
#app .product-card-media::before,
#app .product-card-media::after,
#app .nexus-status-badge {
  pointer-events: none !important;
}
#app a.product-card-shell {
  position: relative !important;
  z-index: 3 !important;
  cursor: pointer !important;
}

/* 4) Hero: left text is centered inside its own panel; GamingOps Control sits outside to the right. */
#app [data-component-id="hero"] {
  overflow: visible !important;
}
#app [data-component-id="hero"]::before {
  display: none !important;
  content: none !important;
}
#app [data-component-id="hero"] .relative.flex.justify-center {
  overflow: visible !important;
}
#app [data-component-id="hero"] .container {
  width: min(100%, 96rem) !important;
  max-width: 96rem !important;
  display: grid !important;
  grid-template-columns: minmax(420px, 560px) minmax(760px, 920px) !important;
  gap: clamp(2.8rem, 5vw, 6rem) !important;
  align-items: center !important;
  overflow: visible !important;
  padding-inline: clamp(1rem, 2vw, 2rem) !important;
}
#app [data-component-id="hero"] .container > div:first-child {
  position: relative !important;
  min-height: min(560px, 62vh) !important;
  width: 100% !important;
  max-width: 560px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
  padding: clamp(2.2rem, 4vw, 4.5rem) clamp(1.2rem, 3vw, 3rem) !important;
  border: 1px solid rgba(56,189,248,.22) !important;
  border-radius: 28px !important;
  background:
    radial-gradient(circle at var(--mx) var(--my), rgba(56,189,248,.15), transparent 26rem),
    radial-gradient(circle at 50% 38%, rgba(56,189,248,.20), transparent 30rem),
    linear-gradient(145deg, rgba(4,22,12,.52), rgba(0,0,0,.26)) !important;
  box-shadow: 0 0 80px rgba(56,189,248,.10), inset 0 1px 0 rgba(255,255,255,.06) !important;
  z-index: 2 !important;
}
#app [data-component-id="hero"] .container > div:first-child::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(56,189,248,.12), transparent 42%, rgba(56,189,248,.08)) !important;
  opacity: .75;
}
#app [data-component-id="hero"] h1 {
  text-align: center !important;
  margin-inline: auto !important;
  max-width: 560px !important;
  font-size: clamp(3.15rem, 5.5vw, 6rem) !important;
  line-height: .92 !important;
  letter-spacing: -.075em !important;
}
#app [data-component-id="hero"] p {
  text-align: center !important;
  max-width: 430px !important;
  margin-inline: auto !important;
}
.nexus-hero-showcase {
  justify-self: end !important;
  align-self: center !important;
  width: min(100%, 900px) !important;
  max-width: 900px !important;
  transform: translateX(clamp(0rem, 2.6vw, 3.25rem)) !important;
  margin: 0 !important;
  z-index: 3 !important;
}
.nexus-hero-showcase .nexus-showcase,
.nexus-hero-showcase .nexus-showcase-shell,
.nexus-hero-showcase .nexus-ui-panel,
.nexus-hero-showcase .go-market-panel {
  width: 100% !important;
  max-width: none !important;
}
.nexus-hero-showcase .nexus-showcase-shell,
.nexus-hero-showcase .go-market-panel {
  border-radius: 36px !important;
}

/* 5) Cards: real visible motion, more rounded, and safe click behavior. */
#app .product-card-shell {
  --rx: 0deg;
  --ry: 0deg;
  --lift: 0px;
  border-radius: 30px !important;
  background:
    radial-gradient(circle at var(--card-mx, 50%) var(--card-my, 0%), rgba(56,189,248,.13), transparent 42%),
    linear-gradient(180deg, rgba(7,24,14,.96), rgba(1,5,3,.95)) !important;
  border: 1px solid rgba(56,189,248,.24) !important;
  box-shadow: 0 20px 56px rgba(0,0,0,.46), 0 0 32px rgba(56,189,248,.075), inset 0 1px 0 rgba(255,255,255,.045) !important;
  transform: perspective(1050px) rotateX(var(--rx)) rotateY(var(--ry)) translate3d(0, var(--lift), 0) !important;
  transition: transform .26s cubic-bezier(.2,.85,.2,1), border-color .26s ease, box-shadow .26s ease, filter .26s ease !important;
  will-change: transform, box-shadow !important;
  overflow: hidden !important;
}
#app .product-card-shell:hover,
#app .product-card-shell:focus-visible {
  --lift: -10px;
  border-color: rgba(56,189,248,.78) !important;
  box-shadow: 0 38px 90px rgba(0,0,0,.62), 0 0 76px rgba(56,189,248,.24), inset 0 1px 0 rgba(255,255,255,.08) !important;
}
#app .product-card-inner { border-radius: inherit !important; overflow: hidden !important; }
#app .product-card-media { border-radius: 22px !important; overflow: hidden !important; }
#app .product-card-image,
#app .object-product-image,
#app .object-group-image,
#app .product-card-placeholder {
  border-radius: 19px !important;
  transition: transform .36s cubic-bezier(.2,.85,.2,1), filter .36s ease !important;
}
#app .product-card-shell:hover .product-card-image,
#app .product-card-shell:hover .object-product-image,
#app .product-card-shell:hover .object-group-image {
  transform: scale(1.065) !important;
  filter: brightness(1.14) contrast(1.22) saturate(1.18) !important;
}
#app .product-card-action {
  border-radius: 18px !important;
  pointer-events: none !important;
  transition: transform .24s ease, box-shadow .24s ease, background .24s ease, color .24s ease !important;
}
#app .product-card-shell:hover .product-card-action {
  transform: translateY(-1px) !important;
  background: linear-gradient(90deg, var(--nexus-green), var(--nexus-green-soft)) !important;
  color: #011006 !important;
  box-shadow: 0 0 30px rgba(56,189,248,.35) !important;
}
#app .product-card-shell.nexus-reveal {
  opacity: 0;
  transform: translate3d(0, 20px, 0) !important;
}
#app .product-card-shell.nexus-reveal.is-visible {
  opacity: 1;
  transform: perspective(1050px) rotateX(var(--rx)) rotateY(var(--ry)) translate3d(0, var(--lift), 0) !important;
}

/* 6) FAQ and vouches polish. */
.nexus-vouches-track { animation-duration: 110s !important; }
.nexus-vouches-footer .nexus-vouches-source,
.nexus-vouches-source,
[data-nexus-vouches-source] { display: none !important; }
.nexus-faq-item { border-radius: 24px !important; }
.nexus-faq-item.is-open { transform: none !important; }

@media (max-width: 1280px) {
  #app [data-component-id="hero"] .container {
    grid-template-columns: 1fr !important;
    width: min(100%, 58rem) !important;
    max-width: 58rem !important;
  }
  #app [data-component-id="hero"] .container > div:first-child {
    min-height: auto !important;
    margin-inline: auto !important;
  }
  .nexus-hero-showcase {
    justify-self: center !important;
    transform: none !important;
    width: min(100%, 900px) !important;
  }
}
@media (max-width: 920px) {
  #app [data-component-id="hero"] h1 { font-size: clamp(2.8rem, 13vw, 4.6rem) !important; }
}
@media (max-width: 560px) {
  #app [data-component-id="hero"] .container > div:first-child { border-radius: 24px !important; padding: 2rem 1rem !important; }
  .nexus-hero-showcase .nexus-showcase-shell { border-radius: 24px !important; }
}

/* V11.1 click-specific final override */
#app a.product-card-shell * { pointer-events: auto !important; }
#app a.product-card-shell::before,
#app a.product-card-shell::after,
#app a.product-card-shell .product-card-media::before,
#app a.product-card-shell .product-card-media::after,
#app a.product-card-shell .nexus-status-badge,
#app a.product-card-shell .product-card-action { pointer-events: none !important; }

/* =========================================================
   GamingOps Ultra V12 — final layout/click/background fixes
   Visual-only. Sellauth product data, prices and checkout are untouched.
   ========================================================= */

/* Full-width store canvas. Keep content elegant but do not squeeze the page. */
#app .nexus-store-shell {
  width: 100% !important;
  max-width: none !important;
  padding-left: clamp(1rem, 4.5vw, 5rem) !important;
  padding-right: clamp(1rem, 4.5vw, 5rem) !important;
  border-inline: 0 !important;
}
#app .component:not([data-component-id="navbar"]) > div {
  max-width: none !important;
}
#app [data-component-id="products"] > div,
#app [data-component-id="products-page"] > div {
  width: min(100%, 94rem) !important;
  margin-inline: auto !important;
}
#app [data-component-id="products"] .flex.flex-wrap,
#app [data-component-id="products-page"] .flex.flex-wrap {
  gap: clamp(1rem, 1.65vw, 1.55rem) !important;
}
#app [data-component-id="products"] .flex.flex-wrap > div,
#app [data-component-id="products-page"] .flex.flex-wrap > div {
  flex-grow: 0 !important;
}

/* Remove the annoying custom scroll rail everywhere, including modals. Scrolling still works. */
html,
body,
#app,
#app * {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}
html::-webkit-scrollbar,
body::-webkit-scrollbar,
#app::-webkit-scrollbar,
#app *::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}
.nexus-page-scroll,
.nexus-scroll-rail,
.nexus-scroll-progress,
.nexus-custom-scroll,
.nexus-side-scroll,
.nexus-scrollbar,
.nexus-scroll-indicator,
.nexus-scroll-track,
[data-nexus-scroll],
[data-scroll-indicator],
[data-scroll-progress],
.scroll-indicator,
.scroll-progress,
.scrollbar-track,
.scrollbar-rail,
.scrollbar-thumb,
.__nexus-scrollbar,
.__nexus-scroll-rail {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Hero: text panel centered, GamingOps Control outside/right, rectangular and cleaner. */
#app [data-component-id="hero"] > div {
  min-height: min(780px, calc(100vh - 86px)) !important;
  padding-top: clamp(3rem, 6vw, 5.5rem) !important;
  padding-bottom: clamp(3rem, 6vw, 5rem) !important;
}
#app [data-component-id="hero"] .container {
  width: 100% !important;
  max-width: none !important;
  display: grid !important;
  grid-template-columns: minmax(330px, 520px) minmax(600px, 760px) !important;
  justify-content: center !important;
  align-items: center !important;
  gap: clamp(3rem, 8vw, 9rem) !important;
  padding-left: clamp(1rem, 6vw, 6.5rem) !important;
  padding-right: clamp(1rem, 4vw, 4rem) !important;
  overflow: visible !important;
}
#app [data-component-id="hero"] .container > div:first-child {
  justify-self: center !important;
  width: min(100%, 500px) !important;
  max-width: 500px !important;
  min-height: clamp(360px, 42vw, 510px) !important;
  padding: clamp(2rem, 4vw, 3.8rem) clamp(1.2rem, 3vw, 2.8rem) !important;
  border-radius: 32px !important;
  text-align: center !important;
  align-items: center !important;
}
#app [data-component-id="hero"] h1 {
  margin-inline: auto !important;
  text-align: center !important;
  font-size: clamp(3.05rem, 5.1vw, 5.7rem) !important;
  letter-spacing: -.075em !important;
}
#app [data-component-id="hero"] p {
  margin-inline: auto !important;
  max-width: 390px !important;
  text-align: center !important;
}
.nexus-hero-showcase {
  justify-self: end !important;
  align-self: center !important;
  width: min(100%, 760px) !important;
  max-width: 760px !important;
  transform: translateX(clamp(0rem, 1.8vw, 2rem)) !important;
  margin: 0 !important;
}
.nexus-hero-showcase .nexus-showcase,
.nexus-hero-showcase .nexus-showcase-shell,
.nexus-hero-showcase .nexus-ui-panel,
.nexus-hero-showcase .go-market-panel {
  width: 100% !important;
  max-width: 100% !important;
}
.nexus-hero-showcase .go-market-panel,
.nexus-hero-showcase .nexus-showcase-shell {
  border-radius: 34px !important;
}
.nexus-hero-showcase .nexus-toggle-row { min-height: 46px !important; }

/* Product cards: restore real clickable anchors + visible animation. */
#app a.product-card-shell[data-nexus-card-link] {
  pointer-events: auto !important;
  cursor: pointer !important;
  position: relative !important;
  z-index: 4 !important;
  border-radius: 32px !important;
  animation: nexus-card-soft-in .65s cubic-bezier(.2,.85,.2,1) both;
}
#app a.product-card-shell[data-nexus-card-link] > *,
#app a.product-card-shell[data-nexus-card-link] .product-card-inner,
#app a.product-card-shell[data-nexus-card-link] .product-card-head,
#app a.product-card-shell[data-nexus-card-link] .product-card-media,
#app a.product-card-shell[data-nexus-card-link] .product-card-body,
#app a.product-card-shell[data-nexus-card-link] .product-card-action {
  pointer-events: none !important;
}
#app a.product-card-shell[data-nexus-card-link]::before,
#app a.product-card-shell[data-nexus-card-link]::after,
#app a.product-card-shell[data-nexus-card-link] .product-card-media::before,
#app a.product-card-shell[data-nexus-card-link] .product-card-media::after,
#app a.product-card-shell[data-nexus-card-link] .nexus-status-badge {
  pointer-events: none !important;
}
#app a.product-card-shell[data-nexus-card-link]:hover {
  --lift: -12px;
  filter: brightness(1.06) !important;
}
#app .product-card-head { border-radius: 32px 32px 0 0 !important; }
#app .product-card-media { border-radius: 24px !important; }
#app .product-card-image,
#app .object-product-image,
#app .object-group-image,
#app .product-card-placeholder { border-radius: 20px !important; }
#app .product-card-action { border-radius: 19px !important; }
@keyframes nexus-card-soft-in {
  from { opacity: 0; transform: translate3d(0, 20px, 0) scale(.985); }
  to { opacity: 1; transform: perspective(1050px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translate3d(0,var(--lift,0),0) scale(1); }
}

/* Group modal: wider, smoother, no internal ugly scrollbar, better product grid. */
#app .nexus-group-modal {
  padding: clamp(1rem, 2vw, 2rem) !important;
  overflow-y: auto !important;
}
#app .nexus-group-modal > .flex {
  min-height: 100svh !important;
  align-items: center !important;
  justify-content: center !important;
}
#app .nexus-group-dialog {
  width: min(1480px, calc(100vw - 2rem)) !important;
  max-width: min(1480px, calc(100vw - 2rem)) !important;
}
#app .nexus-group-panel {
  max-height: min(88vh, 900px) !important;
  overflow-y: auto !important;
  scrollbar-width: none !important;
  border-radius: 36px !important;
  padding: clamp(1.2rem, 2vw, 2rem) !important;
}
#app .nexus-group-panel::-webkit-scrollbar { display: none !important; }
#app .nexus-group-panel .grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: clamp(1rem, 1.35vw, 1.35rem) !important;
}
#app .nexus-group-panel .product-card-shell { border-radius: 28px !important; }

/* FAQ: no item open by default should look raised. Closed rows are neat, open is contained. */
.nexus-faq-lite {
  width: min(100% - 2rem, 92rem) !important;
}
.nexus-faq-accordion {
  width: min(100%, 82rem) !important;
  align-items: start !important;
}
.nexus-faq-item {
  transform: none !important;
  border-radius: 26px !important;
}
.nexus-faq-item.is-open {
  transform: none !important;
}

/* Vouches/reviews must span the whole site width and move slower. */
.nexus-vouches-section {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.nexus-vouches-shell,
.nexus-vouches-marquee { width: 100% !important; max-width: 100% !important; }
.nexus-vouches-track { animation-duration: 145s !important; }
.nexus-vouch-card { width: min(86vw, 440px) !important; }
.nexus-vouches-footer .nexus-vouches-source,
.nexus-vouches-source,
[data-nexus-vouches-source] { display: none !important; }

/* Stronger interactive network visibility. */
#particles-js .nexus-network-canvas-v12 {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none !important;
  opacity: 1;
  mix-blend-mode: screen;
  filter: drop-shadow(0 0 10px rgba(56,189,248,.45));
}
body.nexus-theme::before {
  background:
    radial-gradient(circle at var(--mx) var(--my), rgba(56, 189, 248, .36), transparent 30rem),
    radial-gradient(circle at calc(var(--mx) + 10rem) calc(var(--my) + 8rem), rgba(80, 255, 150, .14), transparent 20rem),
    radial-gradient(circle at 0% 22%, rgba(56,189,248,.24), transparent 34rem),
    radial-gradient(circle at 100% 56%, rgba(56,189,248,.18), transparent 40rem),
    linear-gradient(180deg, #061427 0%, #011006 50%, #061427 100%) !important;
}

@media (min-width: 1500px) {
  #app [data-component-id="hero"] .container {
    grid-template-columns: minmax(360px, 520px) minmax(690px, 820px) !important;
    justify-content: space-between !important;
  }
  .nexus-hero-showcase { transform: translateX(0) !important; }
}
@media (max-width: 1320px) {
  #app [data-component-id="hero"] .container {
    grid-template-columns: 1fr !important;
    width: min(100%, 64rem) !important;
    justify-content: center !important;
  }
  .nexus-hero-showcase {
    justify-self: center !important;
    transform: none !important;
    width: min(100%, 760px) !important;
  }
}
@media (max-width: 980px) {
  #app .nexus-store-shell { padding-inline: 1rem !important; }
  #app .nexus-group-panel .grid { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
}
@media (max-width: 620px) {
  #app .nexus-group-panel .grid { grid-template-columns: 1fr !important; }
  .nexus-hero-showcase { display: none !important; }
  #app [data-component-id="hero"] .container > div:first-child { min-height: auto !important; }
}

/* =========================================================
   GamingOps Ultra V13 — final layout/click/interaction fixes
   Cosmetic-only. Product data, prices, cart, checkout unchanged.
   ========================================================= */
:root {
  --nexus-radius-xl: 34px;
  --nexus-radius-lg: 26px;
  --nexus-radius-md: 20px;
  --nexus-radius-sm: 14px;
  --mx: 50vw;
  --my: 36vh;
}

/* Use the full viewport width. Keep sections spacious instead of boxed/narrow. */
body.nexus-theme {
  overflow-x: hidden !important;
  background: #061427 !important;
}
#app { position: relative !important; z-index: 2 !important; min-height: 100vh !important; }
#app .nexus-store-shell {
  width: 100% !important;
  max-width: none !important;
  padding-left: clamp(1rem, 5.8vw, 7rem) !important;
  padding-right: clamp(1rem, 5.8vw, 7rem) !important;
}
#app .container {
  max-width: min(1640px, calc(100vw - clamp(2rem, 10vw, 14rem))) !important;
  width: 100% !important;
}

/* Remove visible browser/custom scrollbars while keeping normal scrolling. */
html, body, #app, #app * {
  scrollbar-width: none !important;
}
html::-webkit-scrollbar,
body::-webkit-scrollbar,
#app::-webkit-scrollbar,
#app *::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
  background: transparent !important;
}
.nexus-page-scroll,
.nexus-scroll-rail,
.nexus-scroll-progress,
.nexus-custom-scroll,
.nexus-side-scroll,
.nexus-scrollbar,
.nexus-scroll-indicator,
.nexus-scroll-track,
[data-nexus-scroll],
[data-scroll-indicator],
[data-scroll-progress],
.scroll-indicator,
.scroll-progress,
.scrollbar-track,
.scrollbar-rail,
.scrollbar-thumb,
.__nexus-scrollbar,
.__nexus-scroll-rail { display: none !important; visibility: hidden !important; pointer-events: none !important; }

/* Background: stronger live emerald atmosphere + mouse spotlight. */
#particles-js,
#particles-js canvas,
.nexus-network-canvas-final,
.nexus-network-canvas-v13 {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  pointer-events: none !important;
  z-index: 0 !important;
}
#particles-js {
  opacity: 1 !important;
  background:
    radial-gradient(circle at var(--mx) var(--my), rgba(56,189,248,.22), transparent 27rem),
    radial-gradient(circle at 9% 17%, rgba(56,189,248,.20), transparent 38rem),
    radial-gradient(circle at 85% 30%, rgba(56,189,248,.13), transparent 36rem),
    linear-gradient(180deg, #061427 0%, #021209 48%, #010503 100%) !important;
}
#particles-js::before {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  pointer-events: none !important;
  background-image:
    linear-gradient(rgba(56,189,248,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(56,189,248,.045) 1px, transparent 1px),
    linear-gradient(125deg, transparent 0 43%, rgba(56,189,248,.045) 50%, transparent 57%);
  background-size: 34px 34px, 34px 34px, 190px 190px;
  opacity: .9 !important;
}
#particles-js::after,
body::before,
body::after {
  content: "" !important;
  pointer-events: none !important;
}

/* Navbar still centered but with cleaner width. */
#app [data-component-id="navbar"] > div,
#app nav {
  border-radius: 0 !important;
}
#app [data-component-id="navbar"] {
  position: relative !important;
  z-index: 20 !important;
}
#app [data-component-id="navbar"] .container,
#app .navbar,
#app nav {
  max-width: min(1320px, 100%) !important;
  margin-inline: auto !important;
}

/* Hero: text centered in its own card, showcase far right outside the text box. */
#app .nexus-hero-component {
  position: relative !important;
  z-index: 3 !important;
}
#app .nexus-hero-outer {
  padding-top: clamp(4rem, 7vh, 7rem) !important;
  padding-bottom: clamp(4rem, 7vh, 7rem) !important;
}
#app .nexus-hero-grid {
  display: grid !important;
  grid-template-columns: minmax(330px, 34vw) minmax(620px, 1fr) !important;
  align-items: center !important;
  gap: clamp(5rem, 11vw, 16rem) !important;
  max-width: min(1660px, 100%) !important;
  margin-inline: auto !important;
}
#app .nexus-hero-copy {
  justify-self: center !important;
  align-items: center !important;
  text-align: center !important;
  width: min(440px, 100%) !important;
  min-height: 430px !important;
  display: flex !important;
  justify-content: center !important;
  padding: clamp(2.2rem, 4vw, 4rem) !important;
  border: 1px solid rgba(56,189,248,.26) !important;
  border-radius: var(--nexus-radius-xl) !important;
  background: radial-gradient(circle at 50% 30%, rgba(56,189,248,.16), transparent 65%), rgba(1, 9, 5, .54) !important;
  box-shadow: inset 0 0 60px rgba(56,189,248,.07), 0 0 45px rgba(56,189,248,.08) !important;
}
#app .nexus-hero-copy h1 {
  font-size: clamp(3.4rem, 5.2vw, 6.7rem) !important;
  line-height: .92 !important;
  letter-spacing: -.06em !important;
  margin-bottom: 1.4rem !important;
}
#app .nexus-hero-copy p {
  max-width: 330px !important;
  margin-inline: auto !important;
  line-height: 1.65 !important;
}
#app .nexus-hero-copy .buttons, #app .nexus-hero-copy [class*="button"] { justify-content: center !important; }
#app .nexus-hero-showcase-right {
  justify-self: end !important;
  width: min(820px, 100%) !important;
  margin-left: auto !important;
  position: relative !important;
  transform: translateX(clamp(0px, 2vw, 48px)) !important;
}

/* Showcase: rectangular, right aligned marketplace preview, fully clickable. */
#app .nexus-showcase,
#app .nexus-showcase-shell,
#app .nexus-ui-panel,
#app .go-market-panel {
  pointer-events: auto !important;
}
#app .nexus-showcase {
  width: 100% !important;
  margin: 0 !important;
}
#app .nexus-showcase-shell {
  width: 100% !important;
  max-width: 820px !important;
  min-width: 0 !important;
}
@keyframes nexusPaneIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
#app .nexus-toggle-row, #app .nexus-select-row, #app .nexus-slider-row {
  pointer-events: auto !important;
  cursor: pointer !important;
  border-radius: 14px !important;
  margin-bottom: 10px !important;
  min-height: 52px !important;
  border: 1px solid rgba(56,189,248,.10) !important;
  background: linear-gradient(90deg, rgba(56,189,248,.07), rgba(0,0,0,.18)) !important;
}
#app .nexus-toggle-row:hover { border-color: rgba(56,189,248,.34) !important; background: rgba(56,189,248,.10) !important; }
#app .nexus-toggle-row:not(.is-on) { opacity: .52 !important; }

/* Product cards: fix clickability + richer motion + better radius. */
#app a.product-card-shell[data-nexus-card-link] {
  pointer-events: auto !important;
  cursor: pointer !important;
  border-radius: 30px !important;
  overflow: hidden !important;
  position: relative !important;
  z-index: 5 !important;
  transform-style: preserve-3d !important;
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(0) !important;
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease, filter .22s ease !important;
}
#app a.product-card-shell[data-nexus-card-link] * { pointer-events: none !important; }
#app a.product-card-shell[data-nexus-card-link]:hover {
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-8px) !important;
  border-color: rgba(56,189,248,.58) !important;
  box-shadow: 0 20px 70px rgba(0,0,0,.58), 0 0 42px rgba(56,189,248,.16) !important;
}
#app .product-card-inner { border-radius: 30px !important; overflow: hidden !important; }
#app .product-card-head { border-radius: 30px 30px 0 0 !important; }
#app .product-card-media { border-radius: 22px !important; margin: 14px !important; padding: 0 !important; border: 1px solid rgba(56,189,248,.20) !important; overflow: hidden !important; }
#app .product-card-image { border-radius: 20px !important; transform: scale(1) !important; transition: transform .35s ease, filter .35s ease !important; }
#app a.product-card-shell:hover .product-card-image { transform: scale(1.055) !important; filter: saturate(1.16) brightness(1.08) contrast(1.04) !important; }
#app .product-card-body { padding: 1rem 1.25rem 1.25rem !important; }
#app .product-card-action { border-radius: 17px !important; min-height: 48px !important; pointer-events: none !important; }
#app a.product-card-shell:hover .product-card-action { background: #38bdf8 !important; color: #061427 !important; box-shadow: 0 0 28px rgba(56,189,248,.30) !important; }

/* Full-width vouches and slower movement. */
#app .nexus-vouches-section,
#app [data-component-id="feedbacks"] {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  padding-left: clamp(1rem, 5vw, 7rem) !important;
  padding-right: clamp(1rem, 5vw, 7rem) !important;
}
#app .nexus-vouches-track {
  animation-duration: 72s !important;
}
#app .nexus-vouches-section .source,
#app .nexus-vouches-source { display: none !important; }

/* Group modal: more premium, wider, cleaner, no status badges on non-cheat groups. */
#app .nexus-group-modal { z-index: 80 !important; }
#app .nexus-group-dialog { max-width: min(92rem, calc(100vw - 3rem)) !important; }
#app .nexus-group-panel {
  border-radius: 34px !important;
  padding: clamp(1.2rem, 2.5vw, 2.4rem) !important;
  background: radial-gradient(circle at 50% 0%, rgba(56,189,248,.11), transparent 36%), rgba(0,7,4,.95) !important;
  border: 1px solid rgba(56,189,248,.35) !important;
  box-shadow: 0 34px 110px rgba(0,0,0,.78), 0 0 55px rgba(56,189,248,.13) !important;
}
#app .nexus-group-panel .grid { gap: 1.15rem !important; }

/* Product detail pages: recommended/review sections. */
#app .nexus-product-extra { margin-top: 2rem !important; }
#app .nexus-product-extra-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 1rem !important;
}
#app .nexus-product-extra article {
  border-radius: 24px !important;
  border: 1px solid rgba(56,189,248,.22) !important;
  background: rgba(0,10,5,.68) !important;
  padding: 1.15rem !important;
  box-shadow: inset 0 0 35px rgba(56,189,248,.04) !important;
}
#app .nexus-product-extra i { color: #38bdf8 !important; margin-right: .55rem !important; }
#app .nexus-product-extra b { color: #f4fff8 !important; display: inline-block !important; margin-bottom: .45rem !important; }
#app .nexus-product-extra span { color: rgba(244,255,248,.66) !important; display: block !important; line-height: 1.55 !important; }
#app .component[data-component-id="product-page"] h2,
#app .component[id*="product"] h2 { letter-spacing: -.03em !important; }

/* Product page, filter cards and modal rounding. */
#app .bg-card,
#app .bg-card\/75,
#app aside > div,
#app .editor,
#app .splide__track,
#app .aspect-product-page-image {
  border-radius: var(--nexus-radius-lg) !important;
}
#app input, #app select, #app textarea, #app button, #app a { -webkit-tap-highlight-color: transparent !important; }

@media (max-width: 1100px) {
  #app .nexus-hero-grid { grid-template-columns: 1fr !important; gap: 2rem !important; }
  #app .nexus-hero-copy { width: min(520px, 100%) !important; justify-self: center !important; }
  #app .nexus-hero-showcase-right { justify-self: center !important; transform: none !important; width: min(760px, 100%) !important; }
}
@media (max-width: 760px) {
  #app .nexus-store-shell { padding-left: 1rem !important; padding-right: 1rem !important; }
  #app .nexus-hero-copy { min-height: auto !important; padding: 2rem 1.2rem !important; }
  #app .nexus-hero-copy h1 { font-size: clamp(3rem, 17vw, 4.5rem) !important; }
  #app .nexus-product-extra-grid { grid-template-columns: 1fr !important; }
}

/* =========================================================
   GamingOps Ultra V14 — Critical layout/click/recommendation fix
   Final override layer. Visual/UX only.
   ========================================================= */
:root {
  --nexus-radius: 22px;
  --nexus-radius-lg: 34px;
  --nexus-radius-xl: 42px;
  --nexus-max: 1480px;
  --nexus-panel-bg: rgba(2, 10, 6, .82);
}

/* Kill all fake/custom scroll rails; keep native page scroll only. */
.nexus-page-scroll,.nexus-scroll-rail,.nexus-scroll-progress,.nexus-custom-scroll,.nexus-side-scroll,.nexus-scrollbar,.nexus-scroll-indicator,.nexus-scroll-track,[data-nexus-scroll],[data-scroll-indicator],[data-scroll-progress],.scroll-indicator,.scroll-progress,.scrollbar-track,.scrollbar-rail,.scrollbar-thumb,.__nexus-scrollbar,.__nexus-scroll-rail { display:none !important; visibility:hidden !important; opacity:0 !important; pointer-events:none !important; }
html.nexus-homepage, html.nexus-homepage body { scrollbar-width: none !important; }
html.nexus-homepage::-webkit-scrollbar, html.nexus-homepage body::-webkit-scrollbar { width:0 !important; height:0 !important; display:none !important; }

/* Wider store shell without squeezing the page. */
#app .nexus-store-shell {
  width: min(100%, 1580px) !important;
  max-width: 1580px !important;
  padding-left: clamp(1rem, 3.2vw, 4rem) !important;
  padding-right: clamp(1rem, 3.2vw, 4rem) !important;
  border-inline: 0 !important;
}
#app nav[data-component-id="navbar"] > div { max-width: var(--nexus-max) !important; border-radius: 0 0 22px 22px !important; }

/* Click safe background layers only. */
#particles-js, #particles-js *, #particles-js canvas, .nexus-cursor-orb, body.nexus-theme::before, body.nexus-theme::after, #app::before, #app::after { pointer-events:none !important; }
body.nexus-theme::before {
  background:
    radial-gradient(circle at var(--mx) var(--my), rgba(56,189,248,.34), transparent 30rem),
    radial-gradient(circle at calc(var(--mx) + 12rem) calc(var(--my) - 9rem), rgba(56,189,248,.12), transparent 22rem),
    radial-gradient(circle at 11% 22%, rgba(56,189,248,.20), transparent 34rem),
    radial-gradient(circle at 88% 30%, rgba(56,189,248,.15), transparent 34rem),
    radial-gradient(circle at 50% 105%, rgba(0,180,65,.18), transparent 40rem),
    linear-gradient(180deg, #061427 0%, #041020 45%, #021109 100%) !important;
}
body.nexus-theme::after { opacity:.50 !important; }
#particles-js canvas, #particles-js .nexus-network-canvas-v14 { opacity: 1 !important; mix-blend-mode: screen !important; }

/* Hero: true 2-column layout. No extra giant wrapper frame. */
#app [data-component-id="hero"] { overflow: visible !important; }
#app [data-component-id="hero"]::before, #app [data-component-id="hero"]::after { content:none !important; display:none !important; }
#app .nexus-hero-stage {
  min-height: min(760px, calc(100vh - 110px)) !important;
  display:flex !important;
  align-items:center !important;
  padding-block: clamp(3.5rem, 7vw, 6.5rem) clamp(3rem, 6vw, 5rem) !important;
}
#app .nexus-hero-grid {
  width:100% !important;
  max-width: var(--nexus-max) !important;
  margin-inline:auto !important;
  display:grid !important;
  grid-template-columns: minmax(360px, 520px) minmax(620px, 1fr) !important;
  gap: clamp(4rem, 9vw, 12rem) !important;
  align-items:center !important;
}
#app .nexus-hero-copy-card {
  min-height: 450px !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  padding: clamp(2.1rem, 4vw, 3.4rem) !important;
  border-radius: 34px !important;
  border:1px solid rgba(56,189,248,.32) !important;
  background:
    radial-gradient(circle at var(--mx) var(--my), rgba(56,189,248,.22), transparent 24rem),
    linear-gradient(145deg, rgba(6,28,14,.80), rgba(1,6,3,.84)) !important;
  box-shadow: 0 30px 100px rgba(0,0,0,.56), 0 0 70px rgba(56,189,248,.15), inset 0 1px 0 rgba(255,255,255,.05) !important;
  backdrop-filter: blur(16px) saturate(120%) !important;
}
#app .nexus-hero-title {
  margin:0 !important;
  color:#fff !important;
  font-size: clamp(3.4rem, 5.3vw, 6.4rem) !important;
  line-height:.92 !important;
  letter-spacing:-.06em !important;
  font-weight:950 !important;
  text-shadow: 0 0 44px rgba(56,189,248,.28), 0 18px 70px rgba(0,0,0,.70) !important;
}
#app .nexus-hero-title strong, #app .nexus-hero-title span, #app .nexus-hero-title .text-accent-500 {
  color:transparent !important;
  background: linear-gradient(90deg, #38bdf8, #77ff9c, #00d847) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  filter: drop-shadow(0 0 24px rgba(56,189,248,.30)) !important;
}
#app .nexus-hero-title::after {
  content:"" !important;
  display:block !important;
  width:min(240px, 56%) !important;
  height:3px !important;
  margin:1.15rem auto 0 !important;
  border-radius:999px !important;
  background:linear-gradient(90deg, transparent, #38bdf8, transparent) !important;
  box-shadow:0 0 28px rgba(56,189,248,.52) !important;
}
#app .nexus-hero-subtitle {
  width:min(100%, 390px) !important;
  margin:1.45rem auto 0 !important;
  color:rgba(244,255,248,.76) !important;
  line-height:1.7 !important;
  font-size:clamp(1rem, 1.2vw, 1.18rem) !important;
}
#app .nexus-hero-buttons { display:flex !important; justify-content:center !important; align-items:center !important; gap:.9rem !important; margin-top:2rem !important; }
#app .nexus-hero-buttons a, #app .nexus-hero-buttons button {
  border-radius: 999px !important;
  min-height: 48px !important;
  padding-inline: 1.45rem !important;
  font-weight: 900 !important;
}
#app .nexus-hero-showcase-card {
  justify-self:end !important;
  width: min(100%, 790px) !important;
  min-width:0 !important;
  position:relative !important;
  z-index:10 !important;
  margin-left:auto !important;
  transform: translateX(clamp(0px, 3vw, 42px)) !important;
}
#app .nexus-hero-side-image { max-width:100% !important; border-radius:32px !important; }

/* Showcase rebuilt: clean rectangular panel on right. */
#app .nexus-hero-showcase-card .nexus-showcase,
#app .nexus-hero-showcase-card .nexus-showcase-shell { width:100% !important; margin:0 !important; padding:0 !important; border:0 !important; background:transparent !important; box-shadow:none !important; }
#app .nexus-ui-topbar {
  height:58px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  padding:0 1.05rem !important;
  border-bottom:1px solid rgba(56,189,248,.20) !important;
  background:rgba(0,0,0,.34) !important;
}
#app .nexus-ui-brand { display:flex !important; align-items:center !important; gap:.7rem !important; color:#fff !important; font-size:.78rem !important; font-weight:950 !important; letter-spacing:.14em !important; }
#app .nexus-ui-mark { width:1.65rem !important; height:1.65rem !important; border-radius:9px !important; display:grid !important; place-items:center !important; background:#38bdf8 !important; color:#021006 !important; box-shadow:0 0 22px rgba(56,189,248,.40) !important; }
#app .nexus-ui-state { display:inline-flex !important; align-items:center !important; gap:.45rem !important; color:rgba(244,255,248,.74) !important; font-weight:800 !important; font-size:.76rem !important; }
#app .nexus-ui-state i { width:.5rem !important; height:.5rem !important; border-radius:999px !important; background:#38bdf8 !important; box-shadow:0 0 16px rgba(56,189,248,.72) !important; }
#app .nexus-pane-title { margin-bottom:1rem !important; text-align:left !important; }
#app .nexus-pane-title span { color:#fff !important; font-size:1.1rem !important; font-weight:950 !important; }
#app .nexus-pane-title small { color:#38bdf8 !important; font-size:.72rem !important; font-weight:900 !important; letter-spacing:.10em !important; text-transform:uppercase !important; }
#app .nexus-toggle-row, #app .nexus-select-row, #app .nexus-slider-row {
  width:100% !important;
  min-height:48px !important;
  padding:.72rem .85rem !important;
  margin:0 0 .65rem !important;
  border:1px solid rgba(56,189,248,.12) !important;
  border-radius:16px !important;
  background:linear-gradient(90deg, rgba(56,189,248,.07), rgba(0,0,0,.20)) !important;
  color:rgba(244,255,248,.83) !important;
  font-size:.78rem !important;
  font-weight:850 !important;
  pointer-events:auto !important;
  cursor:pointer !important;
}
#app .nexus-toggle-row:hover { border-color:rgba(56,189,248,.38) !important; background:rgba(56,189,248,.11) !important; }
#app .nexus-toggle-row:not(.is-on) { opacity:.55 !important; }
#app .nexus-toggle-row i { width:2.15rem !important; height:1.15rem !important; }

/* Product cards: clickability + motion. */
#app a.product-card-shell[data-nexus-card-link] { pointer-events:auto !important; cursor:pointer !important; z-index: 6 !important; border-radius:32px !important; overflow:hidden !important; }
#app a.product-card-shell[data-nexus-card-link] * { pointer-events:none !important; }
#app a.product-card-shell[data-nexus-card-link], #app a.product-card-shell[data-nexus-card-link] .product-card-inner { border-radius:32px !important; }
#app a.product-card-shell[data-nexus-card-link]:hover { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-9px) !important; border-color:rgba(56,189,248,.60) !important; box-shadow:0 28px 80px rgba(0,0,0,.62), 0 0 54px rgba(56,189,248,.18) !important; }
#app .product-card-media { border-radius:24px !important; overflow:hidden !important; margin:14px !important; border:1px solid rgba(56,189,248,.20) !important; }
#app .product-card-media::before, #app .product-card-media::after { pointer-events:none !important; border-radius:22px !important; }
#app .product-card-image { border-radius:22px !important; }
#app a.product-card-shell[data-nexus-card-link]:hover .product-card-image { transform:scale(1.065) !important; filter:brightness(1.12) contrast(1.15) saturate(1.20) !important; }
#app .product-card-action { border-radius:999px !important; min-height:48px !important; pointer-events:none !important; }

/* Product page: reduce oversized panels and create sane 2-column layout. */
#app [data-component-id="product-page"] > div { max-width:1480px !important; margin-inline:auto !important; padding-block: clamp(2rem, 4vw, 3.5rem) !important; }
#app [data-component-id="product-page"] > div > .flex { display:grid !important; grid-template-columns: minmax(0, 1.15fr) minmax(360px, .78fr) !important; gap: clamp(1.4rem, 3vw, 2.25rem) !important; align-items:start !important; }
#app [data-component-id="product-page"] .lg\:w-3\/5, #app [data-component-id="product-page"] .lg\:w-2\/5 { width:auto !important; }
#app [data-component-id="product-page"] [class*="bg-card"], #app [data-component-id="product-page"] [class*="bg-background"] { border-radius:28px !important; }
#app [data-component-id="product-page"] .aspect-product-page-image { max-height:580px !important; border-radius:28px !important; overflow:hidden !important; }
#app [data-component-id="product-page"] .object-product-image { object-fit:cover !important; }
#app [data-component-id="product-page"] .editor { max-height:none !important; line-height:1.68 !important; }

/* Related products loaded from Sellauth products page if upsells are empty. */
#app .nexus-related-products { margin-top: clamp(2rem, 4vw, 3rem) !important; }
#app .nexus-related-head { text-align:center !important; margin-bottom:1.3rem !important; }
#app .nexus-related-head span { color:#38bdf8 !important; font-size:.75rem !important; font-weight:950 !important; letter-spacing:.15em !important; text-transform:uppercase !important; }
#app .nexus-related-head h2 { color:#fff !important; font-size:clamp(1.6rem, 2.4vw, 2.45rem) !important; font-weight:950 !important; letter-spacing:-.04em !important; margin:.25rem 0 !important; }
#app .nexus-related-head p { color:rgba(244,255,248,.62) !important; }
#app .nexus-related-grid { display:grid !important; grid-template-columns:repeat(4, minmax(0, 1fr)) !important; gap:1rem !important; }
#app .nexus-related-loading { grid-column:1/-1 !important; min-height:110px !important; display:flex !important; align-items:center !important; justify-content:center !important; gap:.7rem !important; border:1px solid rgba(56,189,248,.20) !important; border-radius:26px !important; background:rgba(0,10,5,.65) !important; color:rgba(244,255,248,.72) !important; }

/* Group modal: no pointless inner scroll unless viewport is smaller. */
#app .nexus-group-modal { overflow:hidden !important; padding:1.25rem !important; }
#app .nexus-group-modal > .flex { min-height:100svh !important; align-items:center !important; justify-content:center !important; overflow:visible !important; }
#app .nexus-group-dialog { width:min(92rem, calc(100vw - 2rem)) !important; max-width:min(92rem, calc(100vw - 2rem)) !important; max-height:calc(100svh - 2.5rem) !important; }
#app .nexus-group-panel { max-height:calc(100svh - 2.5rem) !important; overflow:auto !important; border-radius:34px !important; }
#app .nexus-group-panel .grid { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)) !important; gap:1.15rem !important; }
#app .nexus-group-panel .nexus-status-badge { display:none !important; }

/* Full-width vouches and slower movement. */
#app .nexus-vouches-section { width:100vw !important; max-width:100vw !important; margin-left:calc(50% - 50vw) !important; margin-right:calc(50% - 50vw) !important; padding-left:clamp(1rem,5vw,7rem) !important; padding-right:clamp(1rem,5vw,7rem) !important; }
#app .nexus-vouches-track { animation-duration: 96s !important; }

/* FAQ polish. */
#app .nexus-faq-item, #app .nexus-faq-grid details { border-radius:24px !important; }
#app .nexus-faq-answer { transition:max-height .28s ease, opacity .22s ease !important; }

/* Mobile quality. */
@media (max-width: 1180px) {
  #app .nexus-hero-grid { grid-template-columns:1fr !important; gap:2rem !important; }
  #app .nexus-hero-copy-card { width:min(560px,100%) !important; justify-self:center !important; }
  #app .nexus-hero-showcase-card { justify-self:center !important; transform:none !important; width:min(820px,100%) !important; }
  #app [data-component-id="product-page"] > div > .flex { grid-template-columns:1fr !important; }
}
@media (max-width: 760px) {
  #app .nexus-hero-stage { padding-block:2.2rem 2rem !important; }
  #app .nexus-hero-copy-card { min-height:auto !important; padding:2rem 1.25rem !important; }
  #app .nexus-hero-title { font-size:clamp(3rem, 16vw, 4.5rem) !important; }
  #app .nexus-related-grid { grid-template-columns:1fr !important; }
  #app .nexus-group-modal { padding:.6rem !important; }
  #app .nexus-group-dialog { width:calc(100vw - .6rem) !important; max-width:calc(100vw - .6rem) !important; }
}

/* =========================================================
   GamingOps Ultra V15 — layout, click, group, recommendations fixes
   Final visual-only override layer. Product/Sellauth data untouched.
   ========================================================= */
:root {
  --nexus-v15-radius-sm: 16px;
  --nexus-v15-radius: 24px;
  --nexus-v15-radius-lg: 34px;
  --nexus-v15-max: min(1760px, calc(100vw - 8rem));
}

/* Kill remaining bad hero frames / overflow causes */
#app [data-component-id="hero"]::before,
#app [data-component-id="hero"]::after,
#app .nexus-hero-stage::before,
#app .nexus-hero-stage::after {
  content: none !important;
  display: none !important;
}
#app .nexus-hero-component,
#app .nexus-hero-stage {
  width: 100% !important;
  overflow: visible !important;
}
#app .nexus-hero-stage {
  padding: clamp(3.2rem, 6vw, 6rem) 0 clamp(2.5rem, 5vw, 4.5rem) !important;
  min-height: auto !important;
}
#app .nexus-hero-grid {
  width: var(--nexus-v15-max) !important;
  max-width: var(--nexus-v15-max) !important;
  margin-inline: auto !important;
  display: grid !important;
  grid-template-columns: minmax(420px, 560px) minmax(760px, 1fr) !important;
  gap: clamp(4rem, 8vw, 10rem) !important;
  align-items: center !important;
  justify-content: space-between !important;
}
#app .nexus-hero-copy-card {
  width: min(100%, 560px) !important;
  min-height: 430px !important;
  justify-self: start !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  border-radius: var(--nexus-v15-radius-lg) !important;
  overflow: hidden !important;
}
#app .nexus-hero-title,
#app .nexus-hero-subtitle,
#app .nexus-hero-buttons {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
#app .nexus-hero-showcase-card {
  width: min(100%, 880px) !important;
  justify-self: end !important;
  margin: 0 !important;
  transform: none !important;
  overflow: visible !important;
  position: relative !important;
  z-index: 12 !important;
}

/* Rebuild hero showcase as a full, uncropped rectangular panel */
#app .nexus-hero-showcase-card .nexus-showcase,
#app .nexus-hero-showcase-card .nexus-showcase-shell {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}
#app .nexus-hero-showcase-card .nexus-ui-topbar {
  flex: 0 0 54px !important;
  height: 54px !important;
  min-height: 54px !important;
  border-radius: 30px 30px 0 0 !important;
}
#app .nexus-toggle-row,
#app .nexus-select-row,
#app .nexus-slider-row {
  min-height: 50px !important;
  border-radius: 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
}
#app .nexus-toggle-row span,
#app .nexus-select-row span,
#app .nexus-slider-row span { text-align: left !important; }

/* Products page: force 3 product cards per row when the viewport has room. */
#app [data-component-id="products-page"] > div {
  width: min(1660px, calc(100vw - 5rem)) !important;
  max-width: min(1660px, calc(100vw - 5rem)) !important;
  margin-inline: auto !important;
}
#app [data-component-id="products-page"] .grid.lg\:grid-cols-\[280px_1fr\] {
  grid-template-columns: 260px minmax(0, 1fr) !important;
  gap: 2rem !important;
}
#app [data-component-id="products-page"] .min-w-0 > .flex.flex-wrap {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(230px, 1fr)) !important;
  gap: 1.25rem !important;
  align-items: stretch !important;
}
#app [data-component-id="products-page"] .min-w-0 > .flex.flex-wrap > div {
  width: auto !important;
  max-width: none !important;
}
#app [data-component-id="products"] .flex.flex-wrap {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(240px, 1fr)) !important;
  gap: 1.25rem !important;
  align-items: stretch !important;
}
#app [data-component-id="products"] .flex.flex-wrap > div {
  width: auto !important;
  max-width: none !important;
}

/* Product cards: keep them clickable, animated, and rounded. */
#app a.product-card-shell[data-nexus-card-link] {
  border-radius: 30px !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  min-height: 100% !important;
  transform: perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translate3d(0,0,0) !important;
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease, filter .22s ease !important;
}
#app a.product-card-shell[data-nexus-card-link]:hover {
  transform: perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translate3d(0,-9px,0) !important;
}
#app a.product-card-shell[data-nexus-card-link] * { pointer-events: none !important; }
#app .product-card-head { border-radius: 30px 30px 0 0 !important; }
#app .product-card-media { border-radius: 22px !important; }
#app .product-card-image,
#app .object-product-image,
#app .object-group-image { border-radius: 18px !important; }

/* Group modal: no internal rail when content fits, wider and cleaner. */
#app .nexus-group-modal {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: clamp(1rem, 2vw, 1.75rem) !important;
}
#app .nexus-group-dialog {
  width: min(96rem, calc(100vw - 3rem)) !important;
  max-width: min(96rem, calc(100vw - 3rem)) !important;
  max-height: none !important;
}
#app .nexus-group-panel {
  overflow: visible !important;
  max-height: none !important;
  border-radius: 34px !important;
  padding: clamp(1.4rem, 2vw, 2rem) !important;
}
#app .nexus-group-panel .grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(230px, 1fr)) !important;
  gap: 1.25rem !important;
}
#app .nexus-group-panel .product-card-media {
  background: radial-gradient(circle at 50% 50%, rgba(56,189,248,.12), transparent 62%), rgba(0,0,0,.45) !important;
}
#app .nexus-group-panel .product-card-image,
#app .nexus-group-panel .object-product-image,
#app .nexus-group-panel .object-group-image {
  object-fit: contain !important;
  background: #061427 !important;
}
#app .nexus-group-panel .nexus-status-badge { display: none !important; }

/* Product page: keep sane sizing and compact recommendations. */
#app [data-component-id="product-page"] > div {
  width: min(1540px, calc(100vw - 5rem)) !important;
  max-width: min(1540px, calc(100vw - 5rem)) !important;
}
#app [data-component-id="product-page"] > div > .flex {
  grid-template-columns: minmax(0, 1.08fr) minmax(360px, .72fr) !important;
}
#app [data-component-id="product-page"] .aspect-product-page-image { max-height: 500px !important; }
#app .nexus-related-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 1.15rem !important;
}
#app .nexus-related-item .product-card-shell { min-height: 100% !important; }

/* Background interaction: make cursor/network visible but never clickable. */
#particles-js,
#particles-js canvas,
.nexus-network-canvas-v6,
.nexus-cursor-orb,
body.nexus-theme::before,
body.nexus-theme::after { pointer-events: none !important; }
.nexus-cursor-orb {
  opacity: .78 !important;
  width: 520px !important;
  height: 520px !important;
  background: radial-gradient(circle, rgba(56,189,248,.30), rgba(56,189,248,.10) 38%, transparent 70%) !important;
}
body.nexus-theme::before {
  background:
    radial-gradient(circle at var(--mx) var(--my), rgba(56,189,248,.34), transparent 30rem),
    radial-gradient(circle at 16% 14%, rgba(56,189,248,.18), transparent 28rem),
    radial-gradient(circle at 84% 22%, rgba(56,189,248,.15), transparent 32rem),
    radial-gradient(circle at 55% 105%, rgba(56,189,248,.12), transparent 38rem),
    linear-gradient(180deg, #061427 0%, #020905 45%, #041020 100%) !important;
}
#particles-js .nexus-network-canvas-v6 { opacity: 1 !important; }

@media (max-width: 1380px) {
  #app .nexus-hero-grid { grid-template-columns: 1fr !important; gap: 2rem !important; width: min(100%, calc(100vw - 2rem)) !important; }
  #app .nexus-hero-copy-card { justify-self: center !important; }
  #app .nexus-hero-showcase-card { justify-self: center !important; width: min(900px, 100%) !important; }
}
@media (max-width: 1180px) {
  #app [data-component-id="products-page"] .min-w-0 > .flex.flex-wrap,
  #app [data-component-id="products"] .flex.flex-wrap { grid-template-columns: repeat(2, minmax(230px, 1fr)) !important; }
  #app .nexus-group-panel .grid { grid-template-columns: repeat(2, minmax(220px, 1fr)) !important; }
  #app .nexus-related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 760px) {
  #app [data-component-id="products-page"] > div,
  #app [data-component-id="product-page"] > div { width: min(100%, calc(100vw - 1rem)) !important; max-width: min(100%, calc(100vw - 1rem)) !important; }
  #app [data-component-id="products-page"] .min-w-0 > .flex.flex-wrap,
  #app [data-component-id="products"] .flex.flex-wrap,
  #app .nexus-group-panel .grid,
  #app .nexus-related-grid { grid-template-columns: 1fr !important; }
}

/* =========================================================
   GamingOps Ultra V16 — hard layout/click/showcase fixes
   Visual-only. Sellauth product data/prices/checkout untouched.
   ========================================================= */

:root {
  --nexus-radius-soft: 26px;
  --nexus-radius-card: 30px;
  --nexus-radius-panel: 34px;
}

/* Stronger, full-page interactive background visibility */
body.nexus-theme::before {
  background:
    radial-gradient(circle at var(--mx, 50%) var(--my, 32%), rgba(56,189,248,.36), transparent 28rem),
    radial-gradient(circle at 9% 18%, rgba(56,189,248,.22), transparent 34rem),
    radial-gradient(circle at 92% 14%, rgba(56,189,248,.16), transparent 34rem),
    linear-gradient(180deg, #041020 0%, #020805 45%, #010201 100%) !important;
}
.nexus-cursor-orb {
  opacity: .95 !important;
  width: 620px !important;
  height: 620px !important;
  pointer-events: none !important;
  background: radial-gradient(circle, rgba(56,189,248,.34), rgba(56,189,248,.12) 36%, transparent 72%) !important;
}
#particles-js, #particles-js *, #particles-js canvas, .nexus-network-canvas-v6 { pointer-events: none !important; }
#particles-js .nexus-network-canvas-v6 { opacity: 1 !important; filter: saturate(1.3) brightness(1.12); }

/* HERO: real two-column layout, copy centered, showcase right and complete */
#app .nexus-hero-stage {
  width: 100% !important;
  min-height: auto !important;
  padding: clamp(3rem, 6vw, 5.5rem) clamp(1rem, 4vw, 4.5rem) clamp(3.5rem, 6vw, 6rem) !important;
  overflow: visible !important;
}
#app .nexus-hero-grid {
  width: min(1720px, 100%) !important;
  margin-inline: auto !important;
  display: grid !important;
  grid-template-columns: minmax(360px, 520px) minmax(780px, 920px) !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(3.5rem, 9vw, 13rem) !important;
  overflow: visible !important;
}
#app .nexus-hero-copy-card {
  width: min(100%, 500px) !important;
  min-height: 470px !important;
  padding: clamp(2.4rem, 4vw, 4rem) clamp(1.4rem, 3vw, 3rem) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  border-radius: 34px !important;
  overflow: hidden !important;
}
#app .nexus-hero-title,
#app .nexus-hero-copy-card h1 {
  width: 100% !important;
  text-align: center !important;
  margin: 0 auto !important;
  font-size: clamp(3.8rem, 5.2vw, 6.25rem) !important;
  line-height: .94 !important;
  letter-spacing: -.078em !important;
}
#app .nexus-hero-subtitle,
#app .nexus-hero-copy-card p {
  text-align: center !important;
  margin: 1.8rem auto 0 !important;
  max-width: 390px !important;
  line-height: 1.65 !important;
}
#app .nexus-hero-buttons { justify-content: center !important; margin-top: 2rem !important; }
#app .nexus-hero-showcase-card {
  width: min(100%, 920px) !important;
  max-width: 920px !important;
  justify-self: end !important;
  align-self: center !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
  transform: translateX(clamp(0rem, 2.2vw, 2.8rem)) !important;
}
#app .nexus-hero-showcase-card > *,
#app .nexus-hero-showcase-card .nexus-showcase,
#app .nexus-hero-showcase-card .nexus-showcase-shell,
#app .nexus-hero-showcase-card .go-market-panel {
  width: 100% !important;
  max-width: 100% !important;
}

/* SHOWCASE: text-only tabs, no duplicated icon/name, complete rectangular panel */
#app .nexus-hero-showcase-card .nexus-showcase,
#app .nexus-hero-showcase-card .nexus-showcase-full {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}
#app .nexus-ui-topbar {
  height: 52px !important;
  min-height: 52px !important;
  padding: 0 1.2rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}
#app .nexus-ui-brand { gap: .58rem !important; font-size: .72rem !important; letter-spacing: .14em !important; }
#app .nexus-ui-mark { width: 1.6rem !important; height: 1.6rem !important; border-radius: 8px !important; font-size: .8rem !important; }
#app .nexus-ui-state { font-size: .78rem !important; white-space: nowrap !important; }
#app .nexus-pane-title { margin-bottom: .85rem !important; }
#app .nexus-pane-title span { font-size: 1rem !important; }
#app .nexus-pane-title small { font-size: .68rem !important; }
#app .nexus-toggle-row {
  min-height: 42px !important;
  padding: 0 .8rem !important;
  border-radius: 12px !important;
  margin-bottom: .5rem !important;
  background: linear-gradient(90deg, rgba(56,189,248,.08), rgba(0,0,0,.16)) !important;
  border: 1px solid rgba(56,189,248,.10) !important;
  pointer-events: auto !important;
  cursor: pointer !important;
}
#app .nexus-toggle-row span { font-size: .78rem !important; text-align: left !important; }
#app .nexus-select-row,
#app .nexus-slider-row { margin: .6rem 0 !important; }

/* Products: force 3 columns when there is room. Works on home and /products. */
#app [data-component-id="products-page"] > div {
  width: min(1760px, calc(100vw - 2.25rem)) !important;
  max-width: min(1760px, calc(100vw - 2.25rem)) !important;
}
#app [data-component-id="products-page"] .grid.lg\:grid-cols-\[280px_1fr\],
#app [data-component-id="products-page"] .grid[class*="grid-cols-[280px_1fr]"] {
  grid-template-columns: 250px minmax(0, 1fr) !important;
  gap: 1.75rem !important;
}
#app .nexus-products-grid,
#app [data-component-id="products"] .flex.flex-wrap,
#app [data-component-id="products-page"] .min-w-0 > .flex.flex-wrap {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(250px, 1fr)) !important;
  gap: 1.25rem !important;
  align-items: stretch !important;
  justify-content: stretch !important;
}
#app .nexus-products-grid > .nexus-product-grid-item,
#app [data-component-id="products"] .flex.flex-wrap > div,
#app [data-component-id="products-page"] .min-w-0 > .flex.flex-wrap > div {
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
}

/* Product cards: clicks + hover motion must always work. */
#app a.product-card-shell[data-nexus-card-link] {
  pointer-events: auto !important;
  cursor: pointer !important;
  border-radius: var(--nexus-radius-card) !important;
  overflow: hidden !important;
  min-height: 100% !important;
  transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translate3d(0,0,0) !important;
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease, filter .22s ease !important;
}
#app a.product-card-shell[data-nexus-card-link]:hover {
  transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translate3d(0,-9px,0) !important;
  border-color: rgba(56,189,248,.65) !important;
  box-shadow: 0 34px 90px rgba(0,0,0,.66), 0 0 56px rgba(56,189,248,.18) !important;
}
#app a.product-card-shell[data-nexus-card-link] * { pointer-events: none !important; }
#app .product-card-inner { border-radius: inherit !important; overflow: hidden !important; }
#app .product-card-media { border-radius: 22px !important; overflow: hidden !important; }
#app .product-card-image,
#app .object-product-image,
#app .object-group-image,
#app .product-card-placeholder { border-radius: 18px !important; }
#app a.product-card-shell[data-nexus-card-link]:hover .product-card-image,
#app a.product-card-shell[data-nexus-card-link]:hover .object-product-image,
#app a.product-card-shell[data-nexus-card-link]:hover .object-group-image {
  transform: scale(1.055) !important;
  filter: brightness(1.12) contrast(1.18) saturate(1.22) !important;
}

/* Group modal: no cut-off, 4 columns fit, inner scroll only if viewport needs it. */
#app .nexus-group-modal {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: clamp(.75rem, 1.8vw, 1.5rem) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}
#app .nexus-group-modal > .flex {
  width: 100% !important;
  min-height: 100svh !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
}
#app .nexus-group-dialog {
  width: min(1600px, calc(100vw - 2rem)) !important;
  max-width: min(1600px, calc(100vw - 2rem)) !important;
  margin-inline: auto !important;
  overflow: visible !important;
}
#app .nexus-group-panel {
  width: 100% !important;
  border-radius: var(--nexus-radius-panel) !important;
  padding: clamp(1.15rem, 2vw, 2rem) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  max-height: calc(100svh - 2rem) !important;
}
#app .nexus-group-panel .nexus-group-products-grid,
#app .nexus-group-panel .grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: clamp(.9rem, 1.3vw, 1.25rem) !important;
  align-items: stretch !important;
}
#app .nexus-group-panel a.product-card-shell { min-width: 0 !important; }
#app .nexus-group-panel .product-card-media { margin: 12px !important; }
#app .nexus-group-panel .product-card-image,
#app .nexus-group-panel .object-product-image,
#app .nexus-group-panel .object-group-image {
  object-fit: contain !important;
  background: #061427 !important;
  transform: none !important;
}
#app .nexus-group-panel .nexus-status-badge { display: none !important; }

/* Product page and recommendations: compact and group-aware cards fit nicely. */
#app [data-component-id="product-page"] > div {
  width: min(1540px, calc(100vw - 2.5rem)) !important;
  max-width: min(1540px, calc(100vw - 2.5rem)) !important;
}
#app [data-component-id="product-page"] > div > .flex {
  display: grid !important;
  grid-template-columns: minmax(0, 1.08fr) minmax(350px, .72fr) !important;
  gap: clamp(1.25rem, 2.5vw, 2.1rem) !important;
  align-items: start !important;
}
#app [data-component-id="product-page"] .lg\:w-3\/5,
#app [data-component-id="product-page"] .lg\:w-2\/5 { width: auto !important; }
#app [data-component-id="product-page"] .aspect-product-page-image { max-height: 520px !important; overflow: hidden !important; }
#app .nexus-related-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 1.1rem !important;
}

@media (max-width: 1450px) {
  #app .nexus-hero-grid { grid-template-columns: minmax(340px, 500px) minmax(650px, 820px) !important; gap: clamp(2.5rem, 6vw, 6.5rem) !important; }
}
@media (max-width: 1180px) {
  #app .nexus-hero-grid { grid-template-columns: 1fr !important; gap: 2rem !important; }
  #app .nexus-hero-copy-card, #app .nexus-hero-showcase-card { justify-self: center !important; transform: none !important; }
  #app .nexus-products-grid,
  #app [data-component-id="products"] .flex.flex-wrap,
  #app [data-component-id="products-page"] .min-w-0 > .flex.flex-wrap,
  #app .nexus-group-panel .nexus-group-products-grid,
  #app .nexus-group-panel .grid,
  #app .nexus-related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  #app [data-component-id="product-page"] > div > .flex { grid-template-columns: 1fr !important; }
}
@media (max-width: 760px) {
  #app .nexus-hero-copy-card { min-height: auto !important; }
  #app .nexus-hero-title, #app .nexus-hero-copy-card h1 { font-size: clamp(3rem, 16vw, 4.7rem) !important; }
  #app .nexus-products-grid,
  #app [data-component-id="products"] .flex.flex-wrap,
  #app [data-component-id="products-page"] .min-w-0 > .flex.flex-wrap,
  #app .nexus-group-panel .nexus-group-products-grid,
  #app .nexus-group-panel .grid,
  #app .nexus-related-grid { grid-template-columns: 1fr !important; }
  #app [data-component-id="products-page"] > div,
  #app [data-component-id="product-page"] > div { width: min(100%, calc(100vw - 1rem)) !important; max-width: min(100%, calc(100vw - 1rem)) !important; }
}


/* ===== V17 surgical fixes ===== */
#app .nexus-hero-stage {
  width: min(100%, 1380px) !important;
  margin-inline: auto !important;
  padding: clamp(1.5rem, 3vw, 2.4rem) 0 clamp(2.2rem, 4vw, 3.4rem) !important;
  overflow: visible !important;
}
#app .nexus-hero-grid {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: minmax(320px, 420px) minmax(520px, 760px) !important;
  gap: clamp(1.5rem, 4vw, 3.5rem) !important;
  align-items: center !important;
  overflow: visible !important;
}
#app .nexus-hero-copy-card {
  width: 100% !important;
  max-width: 420px !important;
  min-height: 0 !important;
  padding: clamp(1.6rem, 2vw, 2.25rem) !important;
  overflow: hidden !important;
  justify-self: start !important;
}
#app .nexus-hero-title,
#app .nexus-hero-copy-card h1 {
  font-size: clamp(3.2rem, 5.2vw, 5.1rem) !important;
  line-height: .9 !important;
  letter-spacing: -.06em !important;
  overflow-wrap: anywhere !important;
}
#app .nexus-hero-subtitle,
#app .nexus-hero-copy-card p {
  font-size: clamp(1rem, 1.3vw, 1.2rem) !important;
  line-height: 1.55 !important;
}
#app .nexus-hero-showcase-card {
  width: 100% !important;
  max-width: 760px !important;
  justify-self: end !important;
  align-self: center !important;
  transform: none !important;
  overflow: visible !important;
}
#app .nexus-pane-title span { font-size: 1rem !important; }
#app .nexus-pane-title small { font-size: .68rem !important; }
#app .nexus-toggle-row { padding: .68rem 0 !important; }

#app .nexus-related-products {
  overflow: visible !important;
  padding-top: .35rem !important;
}
#app .nexus-related-head {
  overflow: visible !important;
  padding-inline: .25rem !important;
}
#app .nexus-related-head h2 {
  overflow: visible !important;
  white-space: normal !important;
}
#app .nexus-related-grid {
  overflow: visible !important;
}
#app .nexus-related-item {
  transition: opacity .35s ease, transform .35s ease !important;
}
#app .nexus-related-item.is-swapping {
  opacity: .2 !important;
  transform: translateY(10px) scale(.985) !important;
}

#app [data-component-id="product-page"] > .py-6,
#app [data-component-id="product-page"] .py-6.lg\:py-8 {
  width: min(100%, 1320px) !important;
  margin-inline: auto !important;
}
#app [data-component-id="product-page"] > div > .flex {
  display: grid !important;
  grid-template-columns: minmax(0, 1.02fr) minmax(340px, .7fr) !important;
  gap: clamp(1.15rem, 2.4vw, 2rem) !important;
  align-items: start !important;
}
#app [data-component-id="product-page"] .lg\:w-3\/5,
#app [data-component-id="product-page"] .lg\:w-2\/5 {
  width: auto !important;
}
#app [data-component-id="product-page"] [class*="border"],
#app [data-component-id="product-page"] .bg-card,
#app [data-component-id="product-page"] .bg-background\/35 {
  overflow: visible !important;
}
#app [data-component-id="product-page"] .aspect-product-page-image { max-height: 500px !important; }
#app [data-component-id="product-page"] .flex.flex-col.gap-2 > button { min-width: 0 !important; }
#app [data-component-id="product-page"] .flex.flex-col.gap-2 > button > div:last-child {
  flex: 0 0 auto !important;
  min-width: 92px !important;
  text-align: right !important;
  white-space: nowrap !important;
}
#app [data-component-id="product-page"] .badges > a,
#app [data-component-id="product-page"] .badges > div { border-radius: 999px !important; }

#app .nexus-group-modal { padding: 1rem !important; overflow: auto !important; }
#app .nexus-group-modal > .flex { padding: 1rem 0 !important; min-height: auto !important; }
#app .nexus-group-dialog { width: min(92rem, calc(100vw - 2rem)) !important; max-width: min(92rem, calc(100vw - 2rem)) !important; }
#app .nexus-group-panel {
  width: 100% !important;
  overflow: visible !important;
  max-height: min(88vh, 860px) !important;
  border-radius: 28px !important;
}
#app .nexus-group-panel .nexus-group-products-grid,
#app .nexus-group-panel .grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 1rem !important;
}
#app .nexus-group-panel .product-card-head h3 {
  font-size: 1rem !important;
  line-height: 1.25 !important;
  white-space: normal !important;
}
#app .nexus-group-panel .product-card-media { margin: 10px !important; }
#app .nexus-group-panel .product-card-image,
#app .nexus-group-panel .object-product-image,
#app .nexus-group-panel .object-group-image { object-fit: contain !important; }

@media (max-width: 1380px) {
  #app .nexus-hero-grid { grid-template-columns: minmax(320px, 390px) minmax(500px, 700px) !important; }
  #app .nexus-group-panel .nexus-group-products-grid, #app .nexus-group-panel .grid { grid-template-columns: repeat(3, minmax(0,1fr)) !important; }
}
@media (max-width: 1180px) {
  #app .nexus-hero-grid,
  #app [data-component-id="product-page"] > div > .flex { grid-template-columns: 1fr !important; }
  #app .nexus-hero-copy-card, #app .nexus-hero-showcase-card { justify-self: center !important; }
  #app .nexus-hero-showcase-card { max-width: 860px !important; }
}
@media (max-width: 920px) {
  #app .nexus-group-panel .nexus-group-products-grid, #app .nexus-group-panel .grid { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
}
@media (max-width: 760px) {
  #app .nexus-hero-title, #app .nexus-hero-copy-card h1 { font-size: clamp(2.8rem, 13vw, 4.4rem) !important; }
  #app .nexus-group-panel .nexus-group-products-grid, #app .nexus-group-panel .grid { grid-template-columns: 1fr !important; }
}


/* ===== V18 final visual alignment fixes ===== */
#app .nexus-hero-stage{
  width:min(100%, 1460px) !important;
  margin-inline:auto !important;
  padding:clamp(1.25rem,3vw,2.2rem) 1rem clamp(2.25rem,4vw,3.25rem) !important;
  overflow:visible !important;
}
#app .nexus-hero-grid{
  width:100% !important;
  display:grid !important;
  grid-template-columns:minmax(420px, 500px) minmax(560px, 700px) !important;
  justify-content:space-between !important;
  gap:clamp(2rem,5vw,5rem) !important;
  align-items:center !important;
  overflow:visible !important;
}
#app .nexus-hero-copy-card{
  width:min(100%, 500px) !important;
  max-width:500px !important;
  min-height:520px !important;
  padding:2.4rem 2rem !important;
  justify-self:center !important;
  align-self:center !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
  align-items:center !important;
  text-align:center !important;
  overflow:hidden !important;
}
#app .nexus-hero-title,
#app .nexus-hero-copy-card h1{
  width:min(100%, 9ch) !important;
  max-width:9ch !important;
  margin:0 auto !important;
  font-size:clamp(3.05rem,4.55vw,4.9rem) !important;
  line-height:.92 !important;
  letter-spacing:-.06em !important;
  word-break:normal !important;
  overflow-wrap:normal !important;
  white-space:normal !important;
  text-wrap:balance !important;
}
#app .nexus-hero-subtitle,
#app .nexus-hero-copy-card p{
  max-width:18ch !important;
  margin-inline:auto !important;
  text-align:center !important;
}
#app .nexus-hero-buttons{ justify-content:center !important; }
#app .nexus-hero-showcase-card{
  width:min(100%, 700px) !important;
  max-width:700px !important;
  justify-self:end !important;
  align-self:center !important;
  overflow:visible !important;
}

/* polish navbar */
#app .nexus-header,
#app nav,
#app header nav{ backdrop-filter:blur(10px) !important; }
#app header nav a,
#app nav a{ transition:color .18s ease, transform .18s ease, opacity .18s ease !important; }
#app header nav a:hover, #app nav a:hover{ transform:translateY(-1px) !important; }

/* products page grid fix */
#app [data-component-id="products-page"] > .py-6,
#app [data-component-id="products-page"] > .py-6.lg\:py-8{
  width:min(100%, 1520px) !important;
  margin-inline:auto !important;
  padding-inline:1rem !important;
  overflow:visible !important;
}
#app [data-component-id="products-page"] .grid.lg\:grid-cols-\[280px_1fr\],
#app [data-component-id="products-page"] .grid[class*="grid-cols-[280px_1fr]"]{
  grid-template-columns:260px minmax(0,1fr) !important;
  gap:1.5rem !important;
  align-items:start !important;
}
#app [data-component-id="products-page"] .min-w-0{ overflow:visible !important; }
#app .nexus-products-grid{
  display:grid !important;
  grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
  gap:1.15rem !important;
  width:100% !important;
  justify-content:stretch !important;
  overflow:visible !important;
}
#app .nexus-products-grid > .nexus-product-grid-item{ width:auto !important; min-width:0 !important; }
#app .nexus-products-grid .product-card-shell{ height:100% !important; }

/* recommendation heading clipping */
#app .nexus-related-products{ padding-top:.6rem !important; }
#app .nexus-related-head{ margin-bottom:1rem !important; overflow:visible !important; }
#app .nexus-related-head h2{
  font-size:clamp(2rem, 4vw, 3rem) !important;
  line-height:1.05 !important;
  overflow:visible !important;
  white-space:normal !important;
}
#app .nexus-related-head p{ max-width:760px !important; }
#app .nexus-related-grid{ gap:1rem !important; }

/* group modal fit */
#app .nexus-group-modal{ padding:1rem !important; }
#app .nexus-group-dialog{ width:min(96rem, calc(100vw - 2rem)) !important; max-width:min(96rem, calc(100vw - 2rem)) !important; }
#app .nexus-group-panel{
  width:100% !important;
  max-height:min(92vh, 920px) !important;
  padding:1.25rem !important;
  overflow:auto !important;
}
#app .nexus-group-panel .grid,
#app .nexus-group-panel .nexus-group-products-grid{
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:1rem !important;
  overflow:visible !important;
}
#app .nexus-group-panel .product-card-head h3{
  font-size:1rem !important;
  line-height:1.25 !important;
  white-space:normal !important;
}

@media (max-width: 1420px){
  #app .nexus-hero-grid{ grid-template-columns:minmax(390px, 470px) minmax(520px, 660px) !important; gap:2rem !important; }
}
@media (max-width: 1200px){
  #app .nexus-hero-grid{ grid-template-columns:1fr !important; gap:2rem !important; }
  #app .nexus-hero-copy-card,
  #app .nexus-hero-showcase-card{ justify-self:center !important; }
  #app .nexus-hero-showcase-card{ width:min(100%, 860px) !important; max-width:860px !important; }
  #app .nexus-hero-copy-card{ min-height:0 !important; }
  #app [data-component-id="products-page"] .grid.lg\:grid-cols-\[280px_1fr\],
  #app [data-component-id="products-page"] .grid[class*="grid-cols-[280px_1fr]"]{ grid-template-columns:1fr !important; }
  #app .nexus-products-grid{ grid-template-columns:repeat(2, minmax(0,1fr)) !important; }
}
@media (max-width: 760px){
  #app .nexus-hero-stage{ padding-inline:.75rem !important; }
  #app .nexus-hero-copy-card{ width:min(100%, 560px) !important; padding:1.8rem 1.15rem !important; }
  #app .nexus-hero-title, #app .nexus-hero-copy-card h1{ width:min(100%, 8.6ch) !important; font-size:clamp(2.7rem, 14vw, 4.2rem) !important; }
  #app .nexus-products-grid{ grid-template-columns:1fr !important; }
  #app .nexus-group-panel .grid, #app .nexus-group-panel .nexus-group-products-grid{ grid-template-columns:1fr !important; }
}


/* ===== V19 section-by-section final visual polish ===== */
/* Hero: keep text centered, never split words, and move showcase into a clean secondary position */
#app .nexus-hero-stage{
  width:min(100%, 1480px) !important;
  max-width:1480px !important;
  margin-inline:auto !important;
  padding:clamp(1.5rem,3vw,2.5rem) 1rem clamp(2.4rem,4vw,3.6rem) !important;
  overflow:visible !important;
}
#app .nexus-hero-grid{
  width:100% !important;
  display:grid !important;
  grid-template-columns:minmax(420px,500px) minmax(560px,760px) !important;
  justify-content:space-between !important;
  align-items:center !important;
  gap:clamp(2.25rem,5vw,5.5rem) !important;
  overflow:visible !important;
}
#app .nexus-hero-copy-card{
  width:min(100%,500px) !important;
  max-width:500px !important;
  min-height:510px !important;
  padding:2.35rem 2rem !important;
  justify-self:center !important;
  align-self:center !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
  align-items:center !important;
  text-align:center !important;
  overflow:hidden !important;
  border-radius:34px !important;
}
#app .nexus-hero-title,
#app .nexus-hero-copy-card h1{
  width:100% !important;
  max-width:100% !important;
  margin:0 auto !important;
  font-size:clamp(3.2rem,4.35vw,4.65rem) !important;
  line-height:.93 !important;
  letter-spacing:-.065em !important;
  word-break:normal !important;
  overflow-wrap:normal !important;
  hyphens:none !important;
  white-space:normal !important;
  text-wrap:balance !important;
}
#app .nexus-hero-title *{ word-break:normal !important; overflow-wrap:normal !important; }
#app .nexus-hero-subtitle,
#app .nexus-hero-copy-card p{
  max-width:20ch !important;
  margin:1.35rem auto 0 !important;
  text-align:center !important;
  line-height:1.55 !important;
}
#app .nexus-hero-buttons{ justify-content:center !important; margin-top:1.45rem !important; }
#app .nexus-hero-buttons a,
#app .nexus-hero-buttons button{ border-radius:999px !important; }
#app .nexus-hero-showcase-card{
  width:min(100%, 740px) !important;
  max-width:740px !important;
  justify-self:end !important;
  align-self:center !important;
  overflow:visible !important;
  transform:none !important;
}
#app .nexus-hero-showcase-card .nexus-showcase,
#app .nexus-hero-showcase-card .nexus-showcase-shell,
#app .nexus-hero-showcase-card .nexus-ui-panel,
#app .nexus-hero-showcase-card .go-market-panel{
  width:100% !important;
  max-width:none !important;
}
#app .nexus-ui-topbar{
  min-height:54px !important;
  padding:.8rem 1rem !important;
}
#app .nexus-pane-title{ margin-bottom:.55rem !important; }
#app .nexus-pane-title span{ font-size:1.02rem !important; }
#app .nexus-pane-title small{ font-size:.68rem !important; }
#app .nexus-toggle-row{
  padding:.62rem .75rem !important;
  min-height:40px !important;
  margin-bottom:.45rem !important;
  border-radius:0 !important;
}
#app .nexus-select-row,
#app .nexus-slider-row{ margin:.6rem 0 !important; }

/* Products page: full 3-card layout without cropping */
#app [data-component-id="products-page"] > .py-6,
#app [data-component-id="products-page"] > .py-6.lg\:py-8{
  width:min(100%, 1320px) !important;
  max-width:1320px !important;
  margin-inline:auto !important;
  padding-inline:1rem !important;
  overflow:visible !important;
}
#app [data-component-id="products-page"] .grid.lg\:grid-cols-\[280px_1fr\],
#app [data-component-id="products-page"] .grid[class*="grid-cols-[280px_1fr]"]{
  grid-template-columns:240px minmax(0,1fr) !important;
  gap:1.35rem !important;
  align-items:start !important;
}
#app [data-component-id="products-page"] .min-w-0{ overflow:visible !important; }
#app [data-component-id="products-page"] .min-w-0 > .flex.flex-wrap,
#app .nexus-products-grid{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:1.15rem !important;
  width:100% !important;
  overflow:visible !important;
}
#app [data-component-id="products-page"] .min-w-0 > .flex.flex-wrap > div,
#app .nexus-products-grid > .nexus-product-grid-item{
  width:auto !important;
  min-width:0 !important;
  max-width:none !important;
}
#app .product-card-shell{ border-radius:28px !important; overflow:hidden !important; }
#app .product-card-media{ border-radius:22px !important; overflow:hidden !important; }
#app .product-card-image{ border-radius:18px !important; }

/* Product page perfection */
#app [data-component-id="product-page"] > .py-6,
#app [data-component-id="product-page"] .py-6.lg\:py-8{
  width:min(100%, 1240px) !important;
  max-width:1240px !important;
  margin-inline:auto !important;
  padding-inline:1rem !important;
}
#app [data-component-id="product-page"] > div > .flex{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) minmax(330px, .58fr) !important;
  gap:1.4rem !important;
  align-items:start !important;
}
#app [data-component-id="product-page"] .lg\:w-3\/5,
#app [data-component-id="product-page"] .lg\:w-2\/5{ width:auto !important; }
#app [data-component-id="product-page"] .aspect-product-page-image{ max-height:500px !important; overflow:hidden !important; border-radius:28px !important; }
#app [data-component-id="product-page"] .bg-card\/75,
#app [data-component-id="product-page"] .bg-background,
#app [data-component-id="product-page"] [class*="border"]{ border-radius:24px !important; }
#app [data-component-id="product-page"] .flex.flex-col.gap-2 > button{ min-width:0 !important; overflow:hidden !important; }
#app [data-component-id="product-page"] .flex.flex-col.gap-2 > button > div:last-child{
  flex:0 0 auto !important;
  min-width:88px !important;
  white-space:nowrap !important;
  text-align:right !important;
}
#app [data-component-id="product-page"] button,
#app [data-component-id="product-page"] a{ border-radius:999px !important; }

/* Recommendations: no clipping + softer swap */
#app .nexus-related-products{ padding-top:1.25rem !important; margin-top:2.2rem !important; overflow:visible !important; }
#app .nexus-related-head{ overflow:visible !important; margin-bottom:1.2rem !important; }
#app .nexus-related-head h2{
  overflow:visible !important;
  white-space:normal !important;
  line-height:1.08 !important;
  font-size:clamp(2rem,3.6vw,3rem) !important;
}
#app .nexus-related-item{ transition:opacity .55s ease, transform .55s ease, filter .55s ease !important; }
#app .nexus-related-item.is-swapping{ opacity:.25 !important; transform:translateY(12px) scale(.98) !important; filter:blur(3px) !important; }

/* Group modal perfection */
#app .nexus-group-modal{ padding:1rem !important; overflow:auto !important; }
#app .nexus-group-dialog{ width:min(96rem,calc(100vw - 2rem)) !important; max-width:min(96rem,calc(100vw - 2rem)) !important; }
#app .nexus-group-panel{ padding:1.35rem !important; border-radius:30px !important; max-height:92vh !important; overflow:auto !important; }
#app .nexus-group-panel .grid,
#app .nexus-group-panel .nexus-group-products-grid{ display:grid !important; grid-template-columns:repeat(4,minmax(0,1fr)) !important; gap:1rem !important; }
#app .nexus-group-panel .product-card-media{ margin:10px !important; }
#app .nexus-group-panel .product-card-image,
#app .nexus-group-panel .object-product-image,
#app .nexus-group-panel .object-group-image{ object-fit:contain !important; }
#app .nexus-group-panel .product-card-head h3{ font-size:1rem !important; line-height:1.25 !important; white-space:normal !important; }

/* Background / global polish */
#app .nexus-cursor-orb{ opacity:.9 !important; }
#app, body{ --mx:50%; --my:35%; }
body::before{ background:
  radial-gradient(circle at var(--mx) var(--my), rgba(56,189,248,.2), transparent 34rem),
  radial-gradient(circle at 16% 28%, rgba(56,189,248,.13), transparent 36rem),
  linear-gradient(180deg,#061427 0%,#031008 100%) !important;
}

@media (max-width:1200px){
  #app .nexus-hero-grid{ grid-template-columns:1fr !important; gap:2rem !important; }
  #app .nexus-hero-copy-card,#app .nexus-hero-showcase-card{ justify-self:center !important; }
  #app .nexus-hero-showcase-card{ width:min(100%,860px) !important; max-width:860px !important; }
  #app [data-component-id="products-page"] .grid.lg\:grid-cols-\[280px_1fr\],
  #app [data-component-id="products-page"] .grid[class*="grid-cols-[280px_1fr]"],
  #app [data-component-id="product-page"] > div > .flex{ grid-template-columns:1fr !important; }
  #app [data-component-id="products-page"] .min-w-0 > .flex.flex-wrap,
  #app .nexus-products-grid{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
  #app .nexus-group-panel .grid,#app .nexus-group-panel .nexus-group-products-grid{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
}
@media (max-width:760px){
  #app .nexus-hero-stage{ padding-inline:.75rem !important; }
  #app .nexus-hero-copy-card{ min-height:auto !important; width:100% !important; padding:1.85rem 1.1rem !important; }
  #app .nexus-hero-title,#app .nexus-hero-copy-card h1{ font-size:clamp(2.65rem,13vw,4rem) !important; }
  #app [data-component-id="products-page"] .min-w-0 > .flex.flex-wrap,
  #app .nexus-products-grid,
  #app .nexus-related-grid,
  #app .nexus-group-panel .grid,#app .nexus-group-panel .nexus-group-products-grid{ grid-template-columns:1fr !important; }
}


/* =========================================================
   FINAL STABLE MODAL + FAQ + PERFORMANCE RELEASE
   Clean final layer. Product data/prices/cart/checkout untouched.
   ========================================================= */

html,
body {
  overflow-x: hidden;
}

body.nexus-modal-open {
  overflow: hidden !important;
}

/* Decorative layers must never steal clicks. */
.nexus-bg,
.nexus-background,
.nexus-particles,
.nexus-ambient,
.nexus-grid,
.nexus-orb,
.nexus-cursor-orb,
canvas[aria-hidden="true"] {
  pointer-events: none !important;
}

/* Product cards remain clickable and polished. */
.product-card-shell,
.product-card-shell * {
  box-sizing: border-box;
}

.product-card-shell {
  position: relative;
  z-index: 1;
  overflow: hidden !important;
  border-radius: 26px !important;
  pointer-events: auto !important;
}

.product-card-shell .product-card-action,
.product-card-shell .product-card-action * {
  pointer-events: none !important;
}

.product-card-media {
  border-radius: 22px !important;
  overflow: hidden !important;
}

.product-card-image,
.object-product-image,
.object-group-image {
  object-fit: cover;
  border-radius: 18px !important;
}

/* Final stable group modal. */
.nexus-group-modal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 9999 !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important;
  padding: 32px 18px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  background: rgba(0, 0, 0, .72) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  box-sizing: border-box !important;
}

.nexus-group-dialog {
  width: min(1180px, calc(100vw - 36px)) !important;
  max-width: min(1180px, calc(100vw - 36px)) !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
  transform: none !important;
}

.nexus-group-panel {
  position: relative !important;
  width: 100% !important;
  max-height: calc(100dvh - 64px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 24px !important;
  border-radius: 24px !important;
  box-sizing: border-box !important;
  color: #f5fff8 !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(56, 189, 248, .14), transparent 44%),
    linear-gradient(145deg, rgba(3, 14, 8, .96), rgba(0, 0, 0, .94)) !important;
  border: 1px solid rgba(56, 189, 248, .32) !important;
  box-shadow: 0 30px 110px rgba(0, 0, 0, .62), 0 0 38px rgba(56, 189, 248, .09) !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-gutter: stable;
}

.nexus-group-modal-head {
  position: sticky !important;
  top: -24px !important;
  z-index: 30 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  margin: -24px -24px 20px !important;
  padding: 22px 24px 18px !important;
  background:
    linear-gradient(180deg, rgba(1, 9, 5, .98), rgba(1, 9, 5, .86)) !important;
  border-bottom: 1px solid rgba(56, 189, 248, .18) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

.nexus-group-modal-head h3 {
  min-width: 0 !important;
  margin: 0 !important;
  font-size: clamp(1.05rem, 1.7vw, 1.35rem) !important;
  line-height: 1.25 !important;
  font-weight: 900 !important;
  color: #f5fff8 !important;
  white-space: normal !important;
}

.nexus-group-close {
  flex: 0 0 auto !important;
  width: 46px !important;
  height: 46px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 999px !important;
  border: 1px solid rgba(56, 189, 248, .42) !important;
  background: rgba(0, 0, 0, .45) !important;
  color: rgba(245, 255, 248, .85) !important;
  cursor: pointer !important;
  transition: background .18s ease, border-color .18s ease, transform .18s ease !important;
}

.nexus-group-close:hover {
  transform: translateY(-1px) !important;
  border-color: rgba(56, 189, 248, .75) !important;
  background: rgba(56, 189, 248, .13) !important;
}

.nexus-group-close svg {
  width: 24px !important;
  height: 24px !important;
}

.nexus-group-products-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 18px !important;
  width: 100% !important;
  overflow: visible !important;
  align-items: stretch !important;
}

.nexus-group-products-grid > * {
  min-width: 0 !important;
  width: 100% !important;
}

.nexus-group-products-grid .product-card-shell {
  height: 100% !important;
  min-height: 320px !important;
}

.nexus-group-products-grid .product-card-inner {
  display: flex !important;
  flex-direction: column !important;
  min-height: 100% !important;
}

.nexus-group-products-grid .product-card-head {
  min-height: 64px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 12px 14px !important;
}

.nexus-group-products-grid .product-card-title {
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  white-space: normal !important;
  text-overflow: ellipsis !important;
  font-size: clamp(.94rem, 1vw, 1.08rem) !important;
  line-height: 1.17 !important;
}

.nexus-group-products-grid .product-card-media {
  margin: 10px !important;
  padding: 0 !important;
  height: 132px !important;
  border: 1px solid rgba(56, 189, 248, .20) !important;
  background: rgba(0, 0, 0, .28) !important;
}

.nexus-group-products-grid .product-card-image,
.nexus-group-products-grid .object-product-image,
.nexus-group-products-grid .object-group-image {
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
}

.nexus-group-products-grid .product-card-body {
  margin-top: auto !important;
  padding: 12px 14px 14px !important;
}

.nexus-group-products-grid .product-card-meta {
  margin-bottom: 14px !important;
  align-items: center !important;
}

.nexus-group-products-grid .product-card-price,
.nexus-group-products-grid .product-card-stock {
  font-size: .94rem !important;
  line-height: 1.2 !important;
}

.nexus-group-products-grid .product-card-action {
  min-height: 42px !important;
  border-radius: 999px !important;
}

/* Native FAQ: no JS height hacks, no max-height bugs. */
.nexus-faq-final {
  width: min(100% - 2rem, 96rem) !important;
  margin: clamp(3rem, 7vw, 6rem) auto !important;
}

.nexus-faq-grid {
  width: min(100%, 86rem) !important;
  margin: clamp(2rem, 5vw, 4rem) auto 0 !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 1rem 1.2rem !important;
}

.nexus-faq-card {
  overflow: hidden !important;
  border-radius: 22px !important;
  border: 1px solid rgba(56, 189, 248, .25) !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(56, 189, 248, .08), transparent 38%),
    rgba(0, 4, 2, .74) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 18px 46px rgba(0, 0, 0, .28) !important;
}

.nexus-faq-summary {
  min-height: 74px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 1rem !important;
  padding: 1.2rem 1.35rem !important;
  cursor: pointer !important;
  list-style: none !important;
  user-select: none !important;
  color: #f5fff8 !important;
  font-weight: 900 !important;
  font-size: clamp(1rem, 1.25vw, 1.18rem) !important;
  line-height: 1.25 !important;
}

.nexus-faq-summary::-webkit-details-marker {
  display: none !important;
}

.nexus-faq-summary i {
  flex: 0 0 auto !important;
  width: 38px !important;
  height: 38px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(56, 189, 248, .34) !important;
  background: rgba(56, 189, 248, .08) !important;
  position: relative !important;
  box-shadow: 0 0 22px rgba(56, 189, 248, .12) !important;
}

.nexus-faq-summary i::before,
.nexus-faq-summary i::after {
  content: "" !important;
  position: absolute !important;
  inset: 50% auto auto 50% !important;
  width: 16px !important;
  height: 2px !important;
  border-radius: 999px !important;
  background: #38bdf8 !important;
  transform: translate(-50%, -50%) !important;
  transition: opacity .2s ease, transform .2s ease !important;
}

.nexus-faq-summary i::after {
  transform: translate(-50%, -50%) rotate(90deg) !important;
}

.nexus-faq-card[open] {
  border-color: rgba(56, 189, 248, .56) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 0 30px rgba(56, 189, 248, .10), 0 18px 48px rgba(0, 0, 0, .34) !important;
}

.nexus-faq-card[open] .nexus-faq-summary i::after {
  opacity: 0 !important;
  transform: translate(-50%, -50%) rotate(0deg) !important;
}

.nexus-faq-panel {
  display: block !important;
  padding: 0 1.35rem 1.35rem !important;
  color: rgba(238, 255, 246, .76) !important;
  font-size: .98rem !important;
  line-height: 1.68 !important;
}

.nexus-faq-panel p {
  margin: 0 !important;
}

/* Performance governor */
.nexus-lite-motion .nexus-bg,
.nexus-lite-motion .nexus-particles,
.nexus-lite-motion .nexus-background {
  opacity: .55 !important;
}

.nexus-touch-device .product-card-shell {
  transform: none !important;
}

.nexus-touch-device .product-card-shell:hover {
  transform: translateY(-2px) !important;
}

@media (max-width: 1180px) {
  .nexus-group-products-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 860px) {
  .nexus-group-modal {
    padding: 18px 12px !important;
  }

  .nexus-group-dialog {
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
  }

  .nexus-group-panel {
    max-height: calc(100dvh - 36px) !important;
    padding: 16px !important;
    border-radius: 20px !important;
  }

  .nexus-group-modal-head {
    top: -16px !important;
    margin: -16px -16px 16px !important;
    padding: 16px !important;
  }

  .nexus-group-products-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  .nexus-group-products-grid .product-card-media {
    height: 116px !important;
  }

  .nexus-faq-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 560px) {
  .nexus-group-products-grid {
    grid-template-columns: 1fr !important;
  }

  .nexus-group-products-grid .product-card-media {
    height: 150px !important;
  }

  .nexus-faq-final {
    width: min(100% - 1rem, 96rem) !important;
  }

  .nexus-faq-summary {
    min-height: 64px !important;
    padding: 1rem !important;
  }

  .nexus-faq-panel {
    padding: 0 1rem 1rem !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .product-card-shell,
  .product-card-image,
  .nexus-faq-summary i::before,
  .nexus-faq-summary i::after {
    transition: none !important;
    animation: none !important;
  }
}


/* =========================================================
   V31 SAFE REVERT: FAQ VISUAL FIX + DISCORD NAV ICON ONLY
   Base remains v29 stable. No product/cart/checkout logic changed.
   ========================================================= */
#app .nexus-faq-grid summary::after,
#app .nexus-faq-summary::after {
  content: none !important;
  display: none !important;
}
#app .nexus-faq-summary::-webkit-details-marker { display: none !important; }
#app .nexus-faq-summary::marker { content: '' !important; }
#app .nexus-faq-card {
  overflow: hidden !important;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease !important;
}
#app .nexus-faq-card[open] {
  border-color: rgba(56,189,248,.45) !important;
  box-shadow: 0 18px 60px rgba(0,0,0,.28), 0 0 34px rgba(56,189,248,.08) !important;
}
#app .nexus-faq-summary {
  cursor: pointer !important;
  list-style: none !important;
}
#app .nexus-faq-summary i {
  flex: 0 0 auto !important;
}
#app .nexus-faq-panel {
  animation: nexusFaqOpen .16s ease both !important;
}
@keyframes nexusFaqOpen {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
#app .nexus-nav-discord {
  border-radius: 16px !important;
  color: #38bdf8 !important;
  border-color: rgba(56,189,248,.48) !important;
  background: rgba(56,189,248,.055) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.035), 0 0 20px rgba(56,189,248,.08) !important;
}
#app .nexus-nav-discord:hover {
  transform: translateY(-1px) !important;
  background: rgba(56,189,248,.12) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05), 0 0 26px rgba(56,189,248,.16) !important;
}
@media (max-width: 820px){
  #app .nexus-nav-discord:hover { transform: none !important; }
  #app .nexus-faq-panel { animation-duration: .12s !important; }
}

/* =========================================================
   V32 FINAL FAQ ROW POLISH RELEASE
   Fixes FAQ grid stretch so a closed question beside an open
   question does not become a huge empty card.
   ========================================================= */
#app .nexus-faq-final {
  margin-top: clamp(2.75rem, 6vw, 5rem) !important;
}

#app .nexus-faq-grid {
  align-items: start !important;
  grid-auto-rows: auto !important;
  gap: .9rem 1.05rem !important;
}

#app .nexus-faq-card {
  align-self: start !important;
  height: auto !important;
  min-height: 0 !important;
  border-radius: 22px !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(56,189,248,.07), transparent 34%),
    linear-gradient(145deg, rgba(3,14,8,.86), rgba(0,0,0,.88)) !important;
}

#app .nexus-faq-card:not([open]) {
  max-height: none !important;
}

#app .nexus-faq-summary {
  min-height: 68px !important;
  padding: 1.05rem 1.15rem !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 38px !important;
  align-items: center !important;
  gap: 1rem !important;
}

#app .nexus-faq-summary span {
  min-width: 0 !important;
  line-height: 1.25 !important;
}

#app .nexus-faq-summary i {
  justify-self: end !important;
}

#app .nexus-faq-card[open] .nexus-faq-summary {
  padding-bottom: .7rem !important;
}

#app .nexus-faq-panel {
  padding: 0 1.15rem 1.15rem !important;
  max-width: 58ch !important;
}

#app .nexus-faq-panel p {
  color: rgba(238,255,246,.72) !important;
  font-size: .96rem !important;
  line-height: 1.62 !important;
}

@media (max-width: 860px) {
  #app .nexus-faq-grid {
    gap: .85rem !important;
  }
  #app .nexus-faq-summary {
    min-height: 64px !important;
    padding: .95rem 1rem !important;
  }
  #app .nexus-faq-panel {
    padding: 0 1rem 1rem !important;
    max-width: none !important;
  }
}

/* ===== V35 STATUS + PC ONLY TRY-IT STABILITY FIX ===== */
#app .nexus-status-badge{ background:rgba(0, 18, 8, .72) !important; border-color:color-mix(in srgb, var(--nexus-card-status-color, #38bdf8) 52%, transparent) !important; }
#app .nexus-status-dot{ background:var(--nexus-card-status-color, #38bdf8) !important; box-shadow:0 0 13px color-mix(in srgb, var(--nexus-card-status-color, #38bdf8) 75%, transparent) !important; }

/* Make product media resilient if a slider script is delayed. */
#app [data-component-id] .aspect-product-page-image img,
#app .splide.main .splide__slide:first-child img{ opacity:1 !important; visibility:visible !important; }
#app .splide.main .splide__slide:first-child img{ display:block !important; }


/* =========================================================
   V43 FINAL MOBILE UX / SCROLL / RESPONSIVE RELEASE
   Mobile-only cleanup. Desktop product/card/modal logic untouched.
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }
html, body { max-width: 100%; overflow-x: hidden; }
img, video, canvas { max-width: 100%; }

@media (max-width: 768px), (hover: none) and (pointer: coarse) {
  html,
  body,
  body.nexus-theme {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-y: auto !important;
    scroll-behavior: auto !important;
  }

  body.nexus-theme::before {
    background:
      radial-gradient(circle at 50% 0%, rgba(56,189,248,.18), transparent 22rem),
      radial-gradient(circle at 50% 42%, rgba(56,189,248,.09), transparent 26rem),
      linear-gradient(180deg, #061427 0%, #031008 46%, #041020 100%) !important;
    filter: none !important;
    animation: none !important;
  }
  body.nexus-theme::after,
  #particles-js .nexus-network-canvas-v6,
  #particles-js canvas,
  .nexus-cursor-orb {
    opacity: .34 !important;
    filter: none !important;
    animation-duration: 160s !important;
    pointer-events: none !important;
  }

  #app,
  #app .component,
  #app section,
  #app main,
  #app [class*="container"],
  #app [data-component-id] > div,
  #app [data-component-id="product-page"] > div,
  #app [data-component-id="products-page"] > div,
  #app .nexus-store-shell,
  #app .nexus-related-products,
  #app .nexus-product-extra,
  #app .nexus-vouches-section {
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  #app [data-component-id="product-page"] > div,
  #app [data-component-id="product-page"] > .py-6,
  #app [data-component-id="product-page"] .py-6.lg\:py-8 {
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: 0 !important;
    padding: 1rem .85rem 2.5rem !important;
  }

  #app [data-component-id="product-page"] > div > .flex,
  #app [data-component-id="product-page"] .py-6.lg\:py-8 > .flex,
  #app [data-component-id="product-page"] .flex.flex-col.gap-4.lg\:flex-row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: .95rem !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  #app [data-component-id="product-page"] .lg\:w-3\/5,
  #app [data-component-id="product-page"] .lg\:w-2\/5 {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  #app [data-component-id="product-page"] .bg-card,
  #app [data-component-id="product-page"] [class*="bg-card"],
  #app [data-component-id="product-page"] [class*="bg-background"] {
    max-width: 100% !important;
    border-radius: 22px !important;
    filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: 0 18px 48px rgba(0,0,0,.34), 0 0 24px rgba(56,189,248,.07) !important;
  }

  #app [data-component-id="product-page"] h1 {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    font-size: 1.45rem !important;
    line-height: 1.15 !important;
  }

  #app [data-component-id="product-page"] .status {
    width: max-content !important;
    max-width: 100% !important;
    padding: .55rem .7rem !important;
    border-radius: 999px !important;
    background: rgba(56,189,248,.07) !important;
    border: 1px solid rgba(56,189,248,.16) !important;
  }

  #app [data-component-id="product-page"] .aspect-product-page-image,
  #app [data-component-id="product-page"] .splide__track.aspect-product-page-image {
    width: 100% !important;
    max-width: 100% !important;
    max-height: none !important;
    aspect-ratio: 16 / 9 !important;
    min-height: 0 !important;
    border-radius: 20px !important;
  }

  #app [data-component-id="product-page"] .object-product-image,
  #app [data-component-id="product-page"] img.object-product-image,
  #app [data-component-id="product-page"] .splide__slide img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    border-radius: 18px !important;
  }

  #app [data-component-id="product-page"] .editor {
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    font-size: 1rem !important;
    line-height: 1.58 !important;
  }

  #app [data-component-id="product-page"] .editor p,
  #app [data-component-id="product-page"] .editor li {
    line-height: 1.58 !important;
  }

  #app [data-component-id="product-page"] [x-data*="activeTab"] .flex.flex-wrap,
  #app [data-component-id="product-page"] .badges,
  #app [data-component-id="product-page"] .flex.flex-wrap.items-center.gap-3 {
    gap: .5rem !important;
  }

  #app [data-component-id="product-page"] [x-data*="activeTab"] button,
  #app [data-component-id="product-page"] .badges a,
  #app [data-component-id="product-page"] .badges div {
    padding: .5rem .75rem !important;
    min-height: 36px !important;
    border-radius: 999px !important;
    font-size: .86rem !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  #app .nexus-related-products {
    width: 100% !important;
    max-width: 100% !important;
    margin: 1.55rem 0 0 !important;
    padding: 1rem .85rem 0 !important;
    overflow: hidden !important;
  }

  #app .nexus-related-head {
    margin-bottom: 1rem !important;
    padding-inline: .25rem !important;
    text-align: center !important;
  }

  #app .nexus-related-head span {
    font-size: .72rem !important;
    letter-spacing: .18em !important;
  }

  #app .nexus-related-head h2 {
    font-size: clamp(2rem, 11vw, 2.65rem) !important;
    line-height: .98 !important;
    margin: .35rem 0 .55rem !important;
    white-space: normal !important;
    overflow: visible !important;
  }

  #app .nexus-related-head p {
    max-width: 22rem !important;
    margin-inline: auto !important;
    font-size: 1rem !important;
    line-height: 1.45 !important;
  }

  #app .nexus-related-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: .95rem !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
    transform: none !important;
  }

  #app .nexus-related-item,
  #app .nexus-related-item > * {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
  }

  #app .nexus-related-item.is-swapping {
    filter: none !important;
    transform: translateY(8px) !important;
  }

  #app .nexus-related-loading {
    min-height: 78px !important;
    padding: 1rem !important;
    font-size: .92rem !important;
    border-radius: 20px !important;
  }

  #app .product-card-shell,
  #app a.product-card-shell[data-nexus-card-link] {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    border-radius: 24px !important;
    transform: none !important;
    will-change: auto !important;
    overflow: hidden !important;
    contain: content !important;
  }

  #app .product-card-shell:hover,
  #app a.product-card-shell[data-nexus-card-link]:hover {
    transform: none !important;
    box-shadow: 0 18px 45px rgba(0,0,0,.42), 0 0 24px rgba(56,189,248,.08) !important;
  }

  #app .product-card-inner {
    width: 100% !important;
    min-width: 0 !important;
  }

  #app .product-card-head {
    min-height: 54px !important;
    padding: .85rem .95rem !important;
  }

  #app .product-card-title,
  #app .product-card-head h3,
  #app .product-card-head [class*="font"] {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    white-space: normal !important;
    text-overflow: ellipsis !important;
    line-height: 1.18 !important;
    font-size: 1.05rem !important;
    max-width: 100% !important;
  }

  #app .product-card-media {
    margin: .7rem !important;
    padding: .35rem !important;
    border-radius: 18px !important;
    overflow: hidden !important;
  }

  #app .product-card-media::after {
    inset: .35rem !important;
    border-radius: 16px !important;
  }

  #app .product-card-image,
  #app .object-product-image,
  #app .object-group-image,
  #app .aspect-product-card-image,
  #app .aspect-group-card-image {
    width: 100% !important;
    max-width: 100% !important;
    aspect-ratio: 16 / 9 !important;
    object-fit: cover !important;
    border-radius: 16px !important;
    transform: none !important;
  }

  #app .product-card-body {
    gap: .75rem !important;
    padding: .9rem !important;
  }

  #app .product-card-meta {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: .65rem !important;
  }

  #app .product-card-price {
    min-width: 0 !important;
    font-size: 1rem !important;
    line-height: 1.25 !important;
  }

  #app .product-card-stock {
    flex: 0 0 auto !important;
    max-width: 42% !important;
    font-size: .82rem !important;
    line-height: 1.25 !important;
  }

  #app .product-card-action {
    width: 100% !important;
    min-height: 44px !important;
    border-radius: 999px !important;
    font-size: .92rem !important;
  }

  #app .nexus-status-badge {
    top: .7rem !important;
    right: .7rem !important;
    padding: .28rem .48rem !important;
    font-size: .56rem !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  #app [data-component-id="navbar"] > div,
  #app nav,
  #app header {
    max-width: 100% !important;
  }

  #app [data-component-id="navbar"] .component-container,
  #app [data-component-id="navbar"] > div > div {
    width: calc(100% - 1rem) !important;
    max-width: calc(100% - 1rem) !important;
    margin-inline: .5rem !important;
    padding: .7rem .75rem !important;
    border-radius: 18px !important;
  }

  #app [data-component-id="navbar"] a,
  #app [data-component-id="navbar"] button {
    min-width: 42px !important;
    min-height: 42px !important;
    border-radius: 14px !important;
  }

  #nexus-toast-root,
  .nexus-toast-host {
    top: auto !important;
    left: 12px !important;
    right: 12px !important;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 78px) !important;
    width: auto !important;
    max-width: calc(100vw - 24px) !important;
    display: grid !important;
    justify-items: stretch !important;
    pointer-events: none !important;
  }

  .nexus-toast,
  .nexus-toast-item,
  [class*="purchase"][class*="toast"],
  [class*="sales-pop"],
  [class*="recent-sale"],
  [class*="notification"]:not(.nexus-group-modal):not([role="dialog"]) {
    max-width: calc(100vw - 24px) !important;
    width: 100% !important;
    min-width: 0 !important;
    border-radius: 20px !important;
    padding: .7rem .8rem !important;
    transform: none !important;
    filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .nexus-toast img,
  .nexus-toast-item img,
  [class*="purchase"][class*="toast"] img,
  [class*="sales-pop"] img,
  [class*="recent-sale"] img {
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    object-fit: cover !important;
    border-radius: 12px !important;
  }

  .nexus-group-modal {
    padding: calc(env(safe-area-inset-top, 0px) + 12px) 10px calc(env(safe-area-inset-bottom, 0px) + 14px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .nexus-group-dialog {
    width: calc(100vw - 20px) !important;
    max-width: calc(100vw - 20px) !important;
  }

  .nexus-group-panel {
    max-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 28px) !important;
    padding: 14px !important;
    border-radius: 20px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  .nexus-group-modal-head {
    top: -14px !important;
    margin: -14px -14px 14px !important;
    padding: 14px !important;
  }

  .nexus-group-close {
    width: 42px !important;
    height: 42px !important;
  }

  .nexus-vouches-section {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: .85rem !important;
    padding-right: .85rem !important;
    overflow: hidden !important;
  }
}

@media (max-width: 430px) {
  #app [data-component-id="product-page"] > div,
  #app [data-component-id="product-page"] > .py-6,
  #app [data-component-id="product-page"] .py-6.lg\:py-8 {
    padding-inline: .65rem !important;
  }
  #app .nexus-related-products {
    padding-inline: .65rem !important;
  }
  #app .product-card-media {
    margin: .6rem !important;
  }
  #app .product-card-body {
    padding: .8rem !important;
  }
  #app [data-component-id="product-page"] [x-data*="activeTab"] button {
    padding: .48rem .68rem !important;
    font-size: .82rem !important;
  }
}


/* =========================================================
   GamingOps v1 clean marketplace + mobile polish
   ========================================================= */
:root {
  --nexus-bg: #061427;
  --nexus-bg-2: #041020;
  --nexus-panel: rgba(9, 21, 39, .80);
  --nexus-panel-strong: rgba(10, 23, 42, .94);
  --nexus-card: rgba(13, 26, 46, .84);
  --nexus-card-2: rgba(15, 39, 70, .84);
  --nexus-green: #38bdf8;
  --nexus-green-soft: #7dd3fc;
  --nexus-green-dark: #0284c7;
  --nexus-border: rgba(56, 189, 248, .24);
  --nexus-border-strong: rgba(56, 189, 248, .52);
  --nexus-text: #f8fbff;
  --nexus-muted: rgba(226, 242, 255, .72);
  --nexus-dim: rgba(226, 242, 255, .50);
}

body.nexus-theme::before {
  background:
    radial-gradient(circle at var(--mx) var(--my), rgba(56, 189, 248, .20), transparent 34rem),
    radial-gradient(circle at 50% -10%, rgba(34, 211, 238, .20), transparent 38rem),
    radial-gradient(circle at 10% 38%, rgba(59, 130, 246, .13), transparent 26rem),
    radial-gradient(circle at 92% 70%, rgba(20, 184, 166, .10), transparent 32rem),
    linear-gradient(180deg, #061427 0%, #041020 48%, #071a2d 100%);
}

.go-showcase-shell {
  width: 100%;
  border: 1px solid rgba(125, 211, 252, .18);
  border-radius: 28px;
  padding: clamp(1rem, 2vw, 1.4rem);
  background:
    radial-gradient(circle at 15% 5%, rgba(56, 189, 248, .18), transparent 22rem),
    linear-gradient(135deg, rgba(15, 23, 42, .92), rgba(6, 18, 36, .86));
  box-shadow: 0 22px 70px rgba(0, 0, 0, .36);
  overflow: hidden;
}

.go-showcase-topline {
  display: flex;
  align-items: center;
  gap: .65rem;
  color: #e0f7ff;
  font-weight: 800;
  letter-spacing: .03em;
  margin-bottom: 1rem;
}

.go-showcase-topline small {
  margin-left: auto;
  color: rgba(226, 242, 255, .58);
  font-weight: 600;
  font-size: .72rem;
}

.go-logo-dot {
  width: 2.25rem;
  height: 2.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: .9rem;
  color: #00111f;
  font-weight: 900;
  background: linear-gradient(135deg, #7dd3fc, #38bdf8 55%, #2563eb);
  box-shadow: 0 0 28px rgba(56, 189, 248, .32);
}

.go-showcase-grid {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: .85rem;
}

.go-board-card {
  min-width: 0;
  border-radius: 20px;
  border: 1px solid rgba(148, 163, 184, .15);
  background: rgba(2, 6, 23, .46);
  padding: 1rem;
}

.go-board-card-main {
  grid-row: span 2;
}

.go-card-head {
  display: flex;
  justify-content: space-between;
  gap: .75rem;
  color: rgba(226, 242, 255, .72);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: .75rem;
}

.go-card-head b {
  color: #7dd3fc;
}

.go-order-row {
  border: 1px solid rgba(125, 211, 252, .12);
  border-radius: 16px;
  padding: .78rem;
  display: grid;
  gap: .32rem;
  background: rgba(15, 23, 42, .52);
  margin-top: .55rem;
}

.go-order-row strong {
  color: #fff;
  font-size: .93rem;
}

.go-order-row small,
.go-board-card p {
  color: rgba(226, 242, 255, .68);
  line-height: 1.55;
}

.go-chip {
  width: max-content;
  border-radius: 999px;
  padding: .18rem .55rem;
  font-size: .68rem;
  font-weight: 800;
  border: 1px solid rgba(255,255,255,.12);
}

.go-chip-blue { color: #bfdbfe; background: rgba(37, 99, 235, .18); }
.go-chip-cyan { color: #a5f3fc; background: rgba(8, 145, 178, .18); }
.go-chip-green { color: #bbf7d0; background: rgba(34, 197, 94, .14); }

.go-progress {
  height: .55rem;
  border-radius: 999px;
  background: rgba(15, 23, 42, .88);
  overflow: hidden;
  margin: .75rem 0;
}

.go-progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #38bdf8, #22d3ee, #2563eb);
  box-shadow: 0 0 22px rgba(56, 189, 248, .35);
}

.go-socials {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: .75rem 0;
}

.go-socials a {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .55rem .72rem;
  border-radius: 999px;
  background: rgba(56, 189, 248, .10);
  color: #e0f7ff;
  border: 1px solid rgba(56, 189, 248, .18);
  text-decoration: none;
  font-weight: 800;
  font-size: .8rem;
}

.nexus-hero-title {
  letter-spacing: -0.05em;
}

.nexus-hero-subtitle {
  max-width: 60ch;
}

.editor h2,
.editor h3 {
  color: #f8fbff;
  font-weight: 800;
  margin-top: 1rem;
}

.editor ul {
  padding-left: 1.25rem;
  list-style: disc;
}

.editor li {
  margin: .35rem 0;
}

@media (max-width: 768px) {
  html, body {
    overflow-x: hidden !important;
    -webkit-text-size-adjust: 100%;
    overscroll-behavior-y: auto;
  }

  body.nexus-theme::after {
    animation: none !important;
    opacity: .18 !important;
  }

  #particles-js canvas,
  #particles-js .nexus-network-canvas,
  #particles-js .nexus-network-canvas-v6 {
    opacity: .35 !important;
  }

  #app .nexus-store-shell {
    padding: .75rem !important;
    max-width: 100% !important;
    border-inline: 0 !important;
  }

  #app [data-component-id="navbar"] {
    padding-inline: 0 !important;
  }

  .nexus-hero-stage {
    padding-top: .75rem !important;
  }

  .nexus-hero-grid,
  .go-showcase-grid {
    grid-template-columns: 1fr !important;
    gap: .75rem !important;
  }

  .nexus-hero-copy-card,
  .nexus-hero-showcase-card,
  .go-showcase-shell {
    border-radius: 22px !important;
  }

  .nexus-hero-title {
    font-size: clamp(2.1rem, 10vw, 3.3rem) !important;
    line-height: .95 !important;
  }

  .nexus-hero-subtitle {
    font-size: .98rem !important;
  }

  .go-showcase-topline {
    flex-wrap: wrap;
  }

  .go-showcase-topline small {
    width: 100%;
    margin-left: 0;
  }

  .go-board-card {
    padding: .85rem !important;
  }

  #app .product-card-shell,
  #app [data-component-id="products"] a,
  #app [data-component-id="products-page"] a {
    max-width: 100% !important;
    min-width: 0 !important;
  }

  #app .choices__list--dropdown,
  #app .choices__list[aria-expanded] {
    max-height: min(58vh, 360px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .nexus-purchase-toast,
  .toast,
  [class*="toast"] {
    max-width: calc(100vw - 1.5rem) !important;
    left: .75rem !important;
    right: .75rem !important;
    bottom: max(.75rem, env(safe-area-inset-bottom)) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    scroll-behavior: auto !important;
  }

  body.nexus-theme::after,
  #particles-js canvas {
    animation: none !important;
  }
}


/* =========================================================
   GamingOps V2 premium gaming market identity
   ========================================================= */
:root {
  --go-bg: #030b18;
  --go-bg-2: #07142a;
  --go-cyan: #38bdf8;
  --go-cyan-soft: #7dd3fc;
  --go-blue: #2563eb;
  --go-purple: #8b5cf6;
  --go-green: #22c55e;
  --go-gold: #fbbf24;
  --go-panel: rgba(7, 18, 36, .78);
  --go-panel-strong: rgba(8, 20, 39, .96);
  --go-border: rgba(125, 211, 252, .22);
}

body.nexus-theme {
  background: #030b18 !important;
}

body.nexus-theme::before {
  background:
    radial-gradient(circle at var(--mx) var(--my), rgba(56, 189, 248, .18), transparent 34rem),
    radial-gradient(circle at 16% 12%, rgba(37, 99, 235, .28), transparent 34rem),
    radial-gradient(circle at 84% 18%, rgba(139, 92, 246, .17), transparent 30rem),
    radial-gradient(circle at 50% 100%, rgba(20, 184, 166, .12), transparent 38rem),
    linear-gradient(180deg, #030b18 0%, #06152b 46%, #041020 100%) !important;
}

.nexus-hero-copy-card {
  background:
    linear-gradient(135deg, rgba(8, 18, 36, .82), rgba(9, 26, 48, .54)),
    radial-gradient(circle at 20% 0%, rgba(56, 189, 248, .18), transparent 18rem) !important;
  border: 1px solid rgba(125, 211, 252, .16) !important;
  box-shadow: 0 22px 90px rgba(0, 0, 0, .34), inset 0 1px 0 rgba(255,255,255,.06) !important;
}

.nexus-hero-showcase-card {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.nexus-hero-title {
  background: linear-gradient(180deg, #ffffff 0%, #dff7ff 70%, #7dd3fc 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

.nexus-hero-title .text-accent-500 {
  color: #7dd3fc !important;
  text-shadow: 0 0 34px rgba(56, 189, 248, .45);
}

.nexus-hero-subtitle {
  color: rgba(226, 242, 255, .78) !important;
}

.nexus-hero-buttons a,
.nexus-hero-buttons button {
  border-radius: 999px !important;
  font-weight: 900 !important;
  letter-spacing: -.01em;
}

/* New GamingOps showcase */
.go-arena {
  position: relative;
  overflow: hidden;
  border-radius: 34px;
  padding: clamp(1rem, 2.3vw, 1.65rem);
  min-height: 100%;
  border: 1px solid rgba(125, 211, 252, .20);
  background:
    linear-gradient(135deg, rgba(9, 18, 34, .96), rgba(8, 30, 57, .84)),
    radial-gradient(circle at 88% 12%, rgba(139, 92, 246, .15), transparent 18rem);
  box-shadow: 0 28px 95px rgba(0, 0, 0, .42), inset 0 1px 0 rgba(255,255,255,.08);
}

.go-arena::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .26;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(125,211,252,.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(125,211,252,.10) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: radial-gradient(circle at 50% 25%, black, transparent 78%);
}

.go-arena-glow {
  position: absolute;
  width: 18rem;
  height: 18rem;
  border-radius: 999px;
  pointer-events: none;
  filter: blur(36px);
  opacity: .45;
}

.go-arena-glow-a {
  top: -7rem;
  right: -4rem;
  background: rgba(56, 189, 248, .35);
}

.go-arena-glow-b {
  left: -7rem;
  bottom: -8rem;
  background: rgba(37, 99, 235, .28);
}

.go-arena-header,
.go-arena-grid {
  position: relative;
  z-index: 1;
}

.go-arena-header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: .85rem;
  margin-bottom: 1rem;
}

.go-brand-mark {
  width: 3.35rem;
  height: 3.35rem;
  border-radius: 1.15rem;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #7dd3fc 0%, #38bdf8 45%, #2563eb 100%);
  box-shadow: 0 0 34px rgba(56,189,248,.34);
  color: #031225;
  font-weight: 1000;
}

.go-brand-mark span {
  letter-spacing: -.05em;
}

.go-kicker {
  color: #7dd3fc;
  font-weight: 900;
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin: 0 0 .2rem;
}

.go-arena-header h2 {
  margin: 0;
  color: #fff;
  font-size: clamp(1.05rem, 2.2vw, 1.75rem);
  line-height: 1.08;
  letter-spacing: -.04em;
}

.go-vouch-pill {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  border-radius: 999px;
  padding: .58rem .78rem;
  color: #fff;
  background: rgba(251, 191, 36, .12);
  border: 1px solid rgba(251, 191, 36, .28);
  text-decoration: none !important;
  font-weight: 900;
  white-space: nowrap;
}

.go-arena-grid {
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  gap: .8rem;
}

.go-service-card {
  min-width: 0;
  border-radius: 22px;
  padding: 1rem;
  border: 1px solid rgba(148, 163, 184, .14);
  background: rgba(2, 8, 23, .54);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}

.go-service-card-primary {
  grid-row: span 2;
  background:
    radial-gradient(circle at 18% 8%, rgba(56, 189, 248, .18), transparent 18rem),
    rgba(2, 8, 23, .56);
}

.go-card-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .65rem;
  color: rgba(226, 242, 255, .70);
  font-size: .8rem;
  margin-bottom: .7rem;
}

.go-card-line b {
  color: rgba(226, 242, 255, .92);
  font-size: .76rem;
}

.go-service-card h3 {
  font-size: clamp(1.25rem, 3.4vw, 2.1rem);
  line-height: .98;
  margin: .7rem 0;
  letter-spacing: -.06em;
  color: #fff;
}

.go-service-card p {
  color: rgba(226, 242, 255, .72);
  line-height: 1.55;
  margin: 0;
}

.go-chip {
  width: max-content;
  border-radius: 999px;
  padding: .24rem .62rem;
  font-size: .68rem;
  font-weight: 1000;
  letter-spacing: .02em;
  border: 1px solid rgba(255,255,255,.12);
}

.go-chip-rank { color: #bfdbfe; background: rgba(37, 99, 235, .20); }
.go-chip-account { color: #a5f3fc; background: rgba(8, 145, 178, .18); }
.go-chip-item { color: #bbf7d0; background: rgba(34, 197, 94, .14); }
.go-chip-vouch { color: #fde68a; background: rgba(251, 191, 36, .14); }

.go-stat-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .55rem;
  margin-top: 1rem;
}

.go-stat-row span {
  border-radius: 16px;
  padding: .72rem;
  background: rgba(15, 23, 42, .52);
  border: 1px solid rgba(125, 211, 252, .12);
}

.go-stat-row strong,
.go-stat-row small {
  display: block;
}

.go-stat-row strong {
  color: #fff;
  font-size: .9rem;
}

.go-stat-row small {
  color: rgba(226, 242, 255, .58);
  font-size: .68rem;
  margin-top: .16rem;
}

.go-action-row {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: .9rem;
}

.go-action-row a {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .58rem .72rem;
  border-radius: 999px;
  text-decoration: none !important;
  color: #e0f7ff;
  background: rgba(56, 189, 248, .10);
  border: 1px solid rgba(56, 189, 248, .20);
  font-weight: 900;
  font-size: .78rem;
}

/* remove old generic board preview text/shape from v1 */
.go-showcase-shell,
.go-showcase-grid,
.go-board-card,
.go-order-row,
.go-showcase-topline {
  all: revert-layer;
}

@media (max-width: 768px) {
  .go-arena {
    border-radius: 24px;
    padding: .9rem;
  }

  .go-arena-header {
    grid-template-columns: auto 1fr;
  }

  .go-vouch-pill {
    grid-column: 1 / -1;
    justify-content: center;
    width: 100%;
  }

  .go-arena-grid,
  .go-stat-row {
    grid-template-columns: 1fr;
  }

  .go-service-card-primary {
    grid-row: auto;
  }

  .go-service-card {
    border-radius: 18px;
    padding: .9rem;
  }

  .go-card-line {
    align-items: flex-start;
  }
}

/* =========================================================
   GamingOps V3 — Premium Marketplace Hero + Actions
   New self-contained layer. Uses go-* classes only.
   Legacy .nexus-hero-* rules are inert (no markup uses them).
   ========================================================= */

/* ----- Stage ----- */
#app .go-hero { position: relative; }
#app .go-hero-stage {
  position: relative;
  padding: clamp(2.5rem, 6vw, 5rem) clamp(1rem, 4vw, 3rem) clamp(3rem, 6vw, 5.5rem);
  overflow: hidden;
}
#app .go-hero-aura {
  position: absolute; inset: -20% -10% auto -10%; height: 75%;
  background:
    radial-gradient(60% 80% at 18% 18%, rgba(56,189,248,.20), transparent 60%),
    radial-gradient(55% 75% at 82% 12%, rgba(99,102,241,.16), transparent 62%),
    radial-gradient(50% 60% at 60% 100%, rgba(45,212,191,.10), transparent 65%);
  filter: blur(8px);
  pointer-events: none; z-index: 0;
}
#app .go-hero-grid {
  position: relative; z-index: 1;
  max-width: 1200px; margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

/* ----- Copy column ----- */
#app .go-hero-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 1.4rem; }
#app .go-hero-eyebrow {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .42rem .85rem;
  font-size: .74rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--nexus-green-soft);
  background: rgba(56,189,248,.08);
  border: 1px solid rgba(56,189,248,.22);
  border-radius: 999px;
}
#app .go-hero-eyebrow-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--nexus-green);
  box-shadow: 0 0 0 4px rgba(56,189,248,.18), 0 0 12px rgba(56,189,248,.6);
  animation: goHeroPulse 2.4s ease-in-out infinite;
}
@keyframes goHeroPulse { 0%,100%{ opacity:1; transform:scale(1);} 50%{ opacity:.55; transform:scale(.82);} }

#app .go-hero-title {
  margin: 0;
  font-weight: 900;
  font-size: clamp(2.4rem, 5.4vw, 4.1rem);
  line-height: 1.04;
  letter-spacing: -.02em;
  color: #fff;
}
#app .go-hero-title .text-accent-500,
#app .go-hero-title span, #app .go-hero-title strong {
  background: linear-gradient(135deg, #7dd3fc 0%, #38bdf8 45%, #818cf8 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
#app .go-hero-subtitle {
  margin: 0; max-width: 46ch;
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  line-height: 1.65; color: var(--nexus-muted);
}
#app .go-hero-search { width: 100%; max-width: 520px; }

/* ----- Actions row ----- */
#app .go-hero-actions {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: .85rem; margin-top: .3rem;
}
#app .go-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  font-weight: 800; font-size: .98rem; line-height: 1; white-space: nowrap;
  border-radius: 14px; cursor: pointer;
  transition: transform .16s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}
#app .go-btn-primary {
  padding: 1.05rem 1.9rem; color: #04121f;
  background: linear-gradient(135deg, #7dd3fc, #38bdf8 55%, #38bdf8);
  border: 1px solid rgba(125,211,252,.6);
  box-shadow: 0 14px 34px rgba(56,189,248,.32), inset 0 1px 0 rgba(255,255,255,.45);
}
#app .go-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 20px 44px rgba(56,189,248,.42), inset 0 1px 0 rgba(255,255,255,.5); }
#app .go-btn-primary:active { transform: translateY(0); }
#app .go-btn-primary i { font-size: .95rem; }

#app .go-btn-outline {
  padding: 1.05rem 1.7rem; color: var(--nexus-green-soft);
  background: rgba(56,189,248,.05);
  border: 1px solid rgba(56,189,248,.3);
}
#app .go-btn-outline:hover { transform: translateY(-2px); background: rgba(56,189,248,.12); border-color: rgba(56,189,248,.5); }

/* ----- Icon (social) buttons ----- */
#app .go-btn-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 14px;
  color: var(--nexus-text);
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
  font-size: 1.15rem;
  transition: transform .16s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease, color .2s ease;
}
#app .go-btn-icon:hover { transform: translateY(-2px); }
/* Discord brand hover */
#app .go-hero-actions a[aria-label*="Discord"]:hover { color: #fff; background: rgba(88,101,242,.18); border-color: rgba(88,101,242,.6); box-shadow: 0 12px 26px rgba(88,101,242,.3); }
/* Facebook brand hover */
#app .go-hero-actions a[aria-label*="Facebook"]:hover { color: #fff; background: rgba(24,119,242,.18); border-color: rgba(24,119,242,.6); box-shadow: 0 12px 26px rgba(24,119,242,.3); }

/* ----- Trust strip ----- */
#app .go-hero-trust {
  list-style: none; margin: .6rem 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 1.4rem;
}
#app .go-hero-trust li {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .86rem; font-weight: 600; color: var(--nexus-muted);
}
#app .go-hero-trust i { color: var(--nexus-green); font-size: .9rem; }

/* ----- Showcase column ----- */
#app .go-hero-showcase { position: relative; width: 100%; }
#app .go-hero-side-image { width: 100%; height: auto; border-radius: var(--nexus-radius-lg); display: block; }
#app .go-hero-showcase .nexus-showcase,
#app .go-hero-showcase .nexus-showcase-shell,
#app .go-hero-showcase .gamingops-showcase { width: 100% !important; margin: 0 !important; }

/* ----- Responsive ----- */
@media (max-width: 980px) {
  #app .go-hero-grid { grid-template-columns: 1fr; gap: 2.4rem; }
  #app .go-hero-copy { align-items: center; text-align: center; }
  #app .go-hero-subtitle { margin-inline: auto; }
  #app .go-hero-actions { justify-content: center; }
  #app .go-hero-trust { justify-content: center; }
  #app .go-hero-showcase { order: 2; max-width: 720px; margin-inline: auto; }
}
@media (max-width: 560px) {
  #app .go-hero-stage { padding: 2rem 1.1rem 2.6rem; }
  #app .go-hero-title { font-size: clamp(2.1rem, 9vw, 2.9rem); }
  #app .go-hero-actions { width: 100%; }
  #app .go-btn-primary { flex: 1 1 auto; min-width: 0; }
  #app .go-hero-trust { gap: .9rem 1.2rem; font-size: .8rem; }
  #app .go-hero-aura { filter: blur(4px); }
}
@media (prefers-reduced-motion: reduce) {
  #app .go-hero-eyebrow-dot { animation: none; }
  #app .go-btn, #app .go-btn-icon { transition: none; }
}

/* Hero buttons never underline (override global link styles) */
#app .go-btn, #app .go-btn:hover,
#app .go-btn-icon, #app .go-btn-icon:hover,
#app .go-btn span { text-decoration: none !important; }
#app .go-btn i, #app .go-btn-icon i { line-height: 1; }

/* V3 — Showcase cards: force clean single column on mobile (overrides base grid) */
@media (max-width: 980px) {
  #app .go-arena-grid { grid-template-columns: 1fr !important; }
  #app .go-service-card-primary { grid-row: auto !important; }
  #app .go-service-card h3 { font-size: clamp(1.3rem, 5vw, 1.7rem) !important; }
  #app .go-stat-row { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 560px) {
  #app .go-arena { padding: .85rem !important; }
  #app .go-service-card { padding: .95rem !important; }
  #app .go-stat-row { grid-template-columns: 1fr !important; gap: .5rem !important; }
  #app .go-card-line { flex-wrap: wrap !important; }
}

/* =========================================================
   GamingOps V3.1 — Showcase mobile fix + left-aligned text
   Fixes uneven/empty cards and centered text on small screens.
   ========================================================= */

/* Showcase text is always left-aligned (never inherit hero centering) */
#app .go-arena,
#app .go-arena * { text-align: left; }
#app .go-vouch-pill { text-align: center; }

/* Tablet & down: single clean column, natural heights, equal cards */
@media (max-width: 980px) {
  #app .go-arena-grid {
    grid-template-columns: 1fr !important;
    gap: .75rem !important;
  }
  #app .go-service-card { grid-row: auto !important; min-height: 0 !important; }
  #app .go-service-card-primary { grid-row: auto !important; }
  #app .go-service-card h3 {
    font-size: 1.5rem !important;
    line-height: 1.1 !important;
    margin: .55rem 0 !important;
    letter-spacing: -.02em !important;
  }
  #app .go-arena-header {
    grid-template-columns: auto 1fr !important;
    row-gap: .7rem !important;
  }
  #app .go-vouch-pill { grid-column: 1 / -1 !important; justify-content: center !important; width: 100% !important; }
  #app .go-stat-row { grid-template-columns: repeat(3, 1fr) !important; gap: .5rem !important; }
}

/* Phones: tighten everything, stat row stacks, no overflow */
@media (max-width: 560px) {
  #app .go-arena { padding: 1rem !important; border-radius: 22px !important; }
  #app .go-arena-header h2 { font-size: 1.15rem !important; }
  #app .go-brand-mark { width: 2.8rem !important; height: 2.8rem !important; border-radius: .9rem !important; }
  #app .go-service-card { padding: 1rem !important; border-radius: 16px !important; }
  #app .go-service-card h3 { font-size: 1.35rem !important; }
  #app .go-service-card p { font-size: .92rem !important; line-height: 1.5 !important; }
  #app .go-card-line { flex-wrap: wrap !important; gap: .4rem .6rem !important; }
  #app .go-stat-row { grid-template-columns: 1fr 1fr !important; gap: .5rem !important; }
  #app .go-stat-row span { padding: .65rem !important; }
  #app .go-action-row a { font-size: .82rem !important; padding: .6rem .8rem !important; }
}

/* V3.1 — Desktop: primary card fills its tall span cleanly (no empty gap) */
@media (min-width: 981px) {
  #app .go-service-card-primary {
    display: flex;
    flex-direction: column;
  }
  #app .go-service-card-primary .go-stat-row {
    margin-top: auto;
  }
}

/* =========================================================
   GamingOps V3.2 — Centered hero (showcase removed)
   Single clean centered column, button truly centered.
   ========================================================= */
#app .go-hero-centered .go-hero-stage {
  display: flex;
  align-items: center;
  justify-content: center;
}
#app .go-hero-centered .go-hero-copy {
  max-width: 760px;
  margin: 0 auto;
  align-items: center;
  text-align: center;
  gap: 1.5rem;
}
#app .go-hero-centered .go-hero-subtitle {
  margin-inline: auto;
  max-width: 54ch;
}
#app .go-hero-centered .go-hero-actions {
  justify-content: center;
  width: 100%;
}
#app .go-hero-centered .go-hero-trust {
  justify-content: center;
}
#app .go-hero-centered .go-hero-title {
  font-size: clamp(2.6rem, 6vw, 4.6rem);
}

@media (max-width: 560px) {
  #app .go-hero-centered .go-hero-copy { gap: 1.2rem; }
  #app .go-hero-centered .go-hero-actions { width: auto; }
  #app .go-hero-centered .go-btn-primary { width: auto; }
}

/* =========================================================
   GamingOps Round 287 — Public marketplace launcher
   SellAuth remains the storefront/checkout shell; the live catalog is
   rendered by GamingOps so stock, prices and sold-state stay authoritative.
   ========================================================= */
#app .go-navbar-market-search {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  min-width: 13.5rem;
  padding: .7rem 1rem;
  color: rgba(226, 244, 255, .84);
  text-decoration: none !important;
  border: 1px solid rgba(125, 211, 252, .17);
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(14, 165, 233, .075), rgba(37, 99, 235, .045));
  box-shadow: inset 0 1px rgba(255,255,255,.035);
  transition: transform .18s ease, border-color .18s ease, background .18s ease, color .18s ease;
}
#app .go-navbar-market-search:hover {
  color: #fff;
  border-color: rgba(125, 211, 252, .34);
  background: linear-gradient(135deg, rgba(14, 165, 233, .13), rgba(37, 99, 235, .08));
  transform: translateY(-1px);
}
#app .go-navbar-market-search i { color: #67e8f9; }
#app .go-navbar-market-search span { white-space: nowrap; font-size: .88rem; font-weight: 700; }

#app .go-market-launcher {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: 100%;
  max-width: 68rem;
  margin: 0 auto;
  padding: clamp(1.25rem, 3vw, 2.25rem);
  text-align: left;
  border: 1px solid rgba(125, 211, 252, .14);
  border-radius: 28px;
  background:
    radial-gradient(circle at 10% 0%, rgba(14,165,233,.16), transparent 32rem),
    radial-gradient(circle at 100% 100%, rgba(59,130,246,.12), transparent 30rem),
    rgba(2, 10, 24, .76);
  box-shadow: 0 32px 90px rgba(0,0,0,.32), inset 0 1px rgba(255,255,255,.035);
  backdrop-filter: blur(18px);
}
#app .go-market-launcher__glow {
  position: absolute;
  z-index: -1;
  width: 18rem;
  height: 18rem;
  right: -8rem;
  top: -9rem;
  border-radius: 999px;
  background: rgba(56,189,248,.14);
  filter: blur(48px);
}
#app .go-market-launcher__content { position: relative; }
#app .go-market-launcher__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  color: #bae6fd;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
}
#app .go-market-launcher__eyebrow span {
  width: .48rem;
  height: .48rem;
  border-radius: 999px;
  background: #34d399;
  box-shadow: 0 0 18px rgba(52,211,153,.72);
}
#app .go-market-launcher h2 {
  margin: .8rem 0 0;
  max-width: 19ch;
  color: #fff;
  font-size: clamp(1.8rem, 4vw, 3.15rem);
  line-height: 1.02;
  letter-spacing: -.045em;
  font-weight: 900;
}
#app .go-market-launcher > .go-market-launcher__content > p {
  max-width: 48rem;
  margin: .9rem 0 0;
  color: rgba(203,213,225,.72);
  font-size: .98rem;
  line-height: 1.75;
}
#app .go-market-search {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: .85rem;
  width: 100%;
  margin-top: 1.4rem;
  padding: .9rem 1rem;
  color: rgba(226,244,255,.82);
  text-decoration: none !important;
  border: 1px solid rgba(125,211,252,.2);
  border-radius: 16px;
  background: rgba(2,8,23,.72);
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
#app .go-market-search:hover {
  color: #fff;
  transform: translateY(-2px);
  border-color: rgba(103,232,249,.44);
  background: rgba(6,24,46,.88);
}
#app .go-market-search i:first-child { color: #67e8f9; }
#app .go-market-search span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .9rem; font-weight: 700; }
#app .go-market-launcher__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .75rem;
  margin-top: 1rem;
}
#app .go-market-launcher__card {
  display: flex;
  min-width: 0;
  min-height: 10.5rem;
  flex-direction: column;
  align-items: flex-start;
  padding: 1rem;
  color: #fff;
  text-decoration: none !important;
  border: 1px solid rgba(255,255,255,.075);
  border-radius: 18px;
  background: rgba(255,255,255,.028);
  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
#app .go-market-launcher__card:hover {
  transform: translateY(-3px);
  border-color: rgba(103,232,249,.25);
  background: rgba(14,165,233,.065);
  box-shadow: 0 18px 40px rgba(0,0,0,.2);
}
#app .go-market-launcher__icon {
  display: grid;
  place-items: center;
  width: 2.55rem;
  height: 2.55rem;
  color: #a5f3fc;
  border: 1px solid rgba(103,232,249,.16);
  border-radius: 14px;
  background: rgba(34,211,238,.075);
}
#app .go-market-launcher__card strong { margin-top: 1rem; font-size: 1rem; font-weight: 900; }
#app .go-market-launcher__card small { margin-top: .45rem; color: rgba(148,163,184,.78); font-size: .78rem; line-height: 1.55; }

@media (max-width: 1100px) {
  #app .go-navbar-market-search { min-width: 0; }
  #app .go-navbar-market-search span { display: none; }
  #app .go-market-launcher__grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px) {
  #app .go-navbar-market-search span { display: inline; }
  #app .go-navbar-market-search { width: 100%; border-radius: 14px; }
  #app .go-market-launcher { padding: 1.05rem; border-radius: 22px; }
  #app .go-market-launcher__grid { grid-template-columns: 1fr; }
  #app .go-market-launcher__card { min-height: 0; }
  #app .go-market-search span { white-space: normal; line-height: 1.4; }
}
@media (prefers-reduced-motion: reduce) {
  #app .go-navbar-market-search,
  #app .go-market-search,
  #app .go-market-launcher__card { transition: none; transform: none !important; }
}

#app .go-market-live {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255,255,255,.075);
}
#app .go-market-live[hidden] { display: none !important; }
#app .go-market-live__head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
}
#app .go-market-live__head span {
  color: #7dd3fc;
  font-size: .7rem;
  font-weight: 900;
  letter-spacing: .13em;
  text-transform: uppercase;
}
#app .go-market-live__head h3 {
  margin: .3rem 0 0;
  color: #fff;
  font-size: 1.15rem;
  font-weight: 900;
}
#app .go-market-live__head a {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  color: #bae6fd;
  font-size: .78rem;
  font-weight: 800;
  text-decoration: none !important;
}
#app .go-market-live__filters { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .9rem; }
#app .go-market-live__filter {
  padding: .45rem .75rem;
  color: rgba(203,213,225,.78);
  font-size: .72rem;
  font-weight: 800;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 999px;
  background: rgba(255,255,255,.025);
  cursor: pointer;
}
#app .go-market-live__filter.is-active {
  color: #cffafe;
  border-color: rgba(103,232,249,.28);
  background: rgba(34,211,238,.09);
}
#app .go-market-live__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: .75rem;
  margin-top: .85rem;
}
#app .go-market-live__listing {
  display: grid;
  grid-template-columns: 4.2rem 1fr;
  gap: .8rem;
  min-width: 0;
  padding: .75rem;
  color: #fff;
  text-decoration: none !important;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 16px;
  background: rgba(255,255,255,.025);
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
#app .go-market-live__listing:hover {
  transform: translateY(-2px);
  border-color: rgba(103,232,249,.22);
  background: rgba(14,165,233,.055);
}
#app .go-market-live__image {
  width: 4.2rem;
  height: 4.2rem;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 13px;
  background: linear-gradient(135deg, rgba(14,165,233,.13), rgba(30,41,59,.8));
}
#app .go-market-live__image img { width: 100%; height: 100%; object-fit: cover; display: block; }
#app .go-market-live__copy { min-width: 0; }
#app .go-market-live__copy small { color: #7dd3fc; font-size: .64rem; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; }
#app .go-market-live__copy strong { display: block; overflow: hidden; margin-top: .25rem; color: #fff; font-size: .82rem; font-weight: 900; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
#app .go-market-live__meta { overflow: hidden; margin-top: .25rem; color: rgba(148,163,184,.72); font-size: .68rem; text-overflow: ellipsis; white-space: nowrap; }
#app .go-market-live__price { margin-top: .4rem; color: #a5f3fc; font-size: .88rem; font-weight: 900; }
@media (max-width: 980px) { #app .go-market-live__grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 640px) {
  #app .go-market-live__head { align-items: flex-start; flex-direction: column; }
  #app .go-market-live__grid { grid-template-columns: 1fr; }
}