/* Solmarket clean product layout + subtle animated background dots */

.sa-products-layout {
  width: 100%;
}

.sa-products-filterbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.75rem;
  align-items: stretch;
  width: 100%;
  margin-bottom: 1.5rem;
}

.sa-products-search-input {
  min-height: 3.25rem;
  height: 3.25rem;
  border-radius: 12px;
  background: rgba(var(--cl-surface), 0.72);
  backdrop-filter: blur(8px);
}

.sa-products-stock-toggle {
  min-height: 3.25rem;
  white-space: nowrap;
  background: rgba(var(--cl-surface), 0.72);
  backdrop-filter: blur(8px);
}

.sa-products-stock-toggle:has(input:checked) {
  border-color: rgba(var(--cl-accent), 0.55);
  background: rgba(var(--cl-accent), 0.08);
}

/* Keep the page background clean: tiny white dots instead of a heavy grid. */
.page-fx .pfx-pattern-dots {
  opacity: 0.18;
}

.sa-floating-dots {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.sa-floating-dot {
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 0 5px rgba(255, 255, 255, 0.18);
  opacity: 0;
  animation: solDotDrift var(--dot-duration) ease-in-out infinite;
  animation-delay: var(--dot-delay);
  will-change: transform, opacity;
}

@keyframes solDotDrift {
  0%, 100% {
    opacity: 0;
    transform: translate3d(0, 0, 0) scale(0.7);
  }
  18% {
    opacity: var(--dot-opacity);
  }
  50% {
    opacity: var(--dot-opacity);
    transform: translate3d(var(--dot-x), var(--dot-y), 0) scale(1);
  }
  78% {
    opacity: calc(var(--dot-opacity) * 0.45);
  }
}

@media (max-width: 640px) {
  .sa-products-filterbar {
    grid-template-columns: 1fr;
  }

  .sa-products-stock-toggle {
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sa-floating-dot {
    animation: none;
    opacity: 0.2;
  }
}

/* ---------------------------------------------------------------
   SOLMARKET BACKGROUND OVERRIDE
   Remove the theme's grid/dot pattern completely. The only
   background detail is the custom floating particle field.
   --------------------------------------------------------------- */
.page-fx,
.hero-bg-grid,
.pfx-pattern,
.pfx-pattern-grid,
.pfx-pattern-dots {
  display: none !important;
}

body {
  background-image: none !important;
}

/* More varied, softer particles */
.sa-floating-dot {
  width: var(--dot-size) !important;
  height: var(--dot-size) !important;
  background: rgba(255, 255, 255, var(--dot-core)) !important;
  box-shadow:
    0 0 var(--dot-blur) rgba(255, 255, 255, var(--dot-glow)) !important;
  filter: blur(var(--dot-softness));
}

@keyframes solDotDrift {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0) scale(.72);
  }
  12% {
    opacity: calc(var(--dot-opacity) * .55);
  }
  32% {
    opacity: var(--dot-opacity);
  }
  68% {
    opacity: calc(var(--dot-opacity) * .75);
  }
  88% {
    opacity: calc(var(--dot-opacity) * .18);
  }
  100% {
    opacity: 0;
    transform: translate3d(var(--dot-x), var(--dot-y), 0) scale(1.05);
  }
}


/* === SOLMARKET COSMIC BACKGROUND / BUTTON OVERRIDE === */
html, body {
  background: #020308 !important;
  min-height: 100%;
}

body {
  position: relative !important;
  overflow-x: hidden !important;
  background-image: none !important;
}

/* Keep the site content above the cosmic layers. */
body > * {
  position: relative;
  z-index: 2;
}

/* Cosmic layers */
.sa-cosmic-bg {
  position: fixed !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  overflow: hidden !important;
  background:
    radial-gradient(ellipse 90% 42% at 52% 48%,
      rgba(150,150,170,.13) 0%,
      rgba(95,95,115,.09) 18%,
      rgba(30,30,45,.035) 42%,
      transparent 70%),
    radial-gradient(ellipse 70% 20% at 40% 53%,
      rgba(205,205,220,.055) 0%,
      transparent 68%),
    radial-gradient(circle at 20% 25%, rgba(75,80,105,.08), transparent 38%),
    radial-gradient(circle at 80% 75%, rgba(70,75,100,.07), transparent 42%),
    #020308 !important;
  animation: saMilkyDrift 28s ease-in-out infinite alternate !important;
}

.sa-cosmic-bg::before {
  content: "" !important;
  position: absolute !important;
  inset: -25% !important;
  background:
    repeating-linear-gradient(
      165deg,
      transparent 0%,
      transparent 15%,
      rgba(255,255,255,.018) 18%,
      rgba(255,255,255,.045) 21%,
      rgba(255,255,255,.012) 25%,
      transparent 30%
    ) !important;
  filter: blur(18px) !important;
  opacity: .85 !important;
  transform: rotate(-5deg) scale(1.15) !important;
  animation: saNebulaMove 38s ease-in-out infinite alternate !important;
}

.sa-cosmic-bg::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    radial-gradient(ellipse 65% 13% at 50% 49%,
      rgba(245,245,255,.075),
      rgba(130,130,150,.035) 35%,
      transparent 72%) !important;
  filter: blur(22px) !important;
  opacity: .95 !important;
  animation: saDustPulse 16s ease-in-out infinite alternate !important;
}

.sa-cosmic-stars {
  position: fixed !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  overflow: hidden !important;
}

.sa-cosmic-star {
  position: absolute !important;
  border-radius: 50% !important;
  background: #fff !important;
  box-shadow: 0 0 4px rgba(255,255,255,.65) !important;
  animation: saStarFloat var(--dur) ease-in-out infinite alternate !important;
  will-change: transform, opacity !important;
}

@keyframes saMilkyDrift {
  from { transform: scale(1.02) translate3d(-1.5%, -0.5%, 0); }
  to   { transform: scale(1.08) translate3d(1.5%, 0.8%, 0); }
}
@keyframes saNebulaMove {
  from { transform: rotate(-5deg) scale(1.15) translateX(-2%); }
  to   { transform: rotate(-3deg) scale(1.18) translateX(2%); }
}
@keyframes saDustPulse {
  from { opacity: .65; }
  to   { opacity: 1; }
}
@keyframes saStarFloat {
  from { opacity: var(--min-op); transform: translate3d(0,0,0) scale(.9); }
  to   { opacity: var(--max-op); transform: translate3d(var(--dx), var(--dy), 0) scale(1.12); }
}

/* Buttons: force the actual anchor regardless of theme semantic colors. */
.sa-hero-actions a[href="/products"] {
  position: relative !important;
  overflow: hidden !important;
  color: #fff !important;
  background: #22c55e !important;
  border-color: #22c55e !important;
  box-shadow:
    0 0 12px rgba(34,197,94,.55),
    0 0 30px rgba(34,197,94,.28) !important;
}

.sa-hero-actions a[href="/products"]::after {
  content: "" !important;
  position: absolute !important;
  top: -20% !important;
  bottom: -20% !important;
  left: -75% !important;
  width: 45% !important;
  transform: skewX(-20deg) !important;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.85),
    transparent
  ) !important;
  animation: saButtonShimmer 3.2s ease-in-out infinite !important;
}

.sa-hero-actions a[href="/products"]:hover {
  background: #16a34a !important;
  border-color: #16a34a !important;
  box-shadow:
    0 0 16px rgba(34,197,94,.7),
    0 0 38px rgba(34,197,94,.38) !important;
}

.sa-hero-actions a[href*="discord.com/invite/bZeQydFck3"] {
  color: #fff !important;
  background: #5865F2 !important;
  border-color: #5865F2 !important;
  box-shadow:
    0 0 12px rgba(88,101,242,.55),
    0 0 28px rgba(88,101,242,.28) !important;
}
.sa-hero-actions a[href*="discord.com/invite/bZeQydFck3"]:hover {
  background: #4752C4 !important;
  border-color: #4752C4 !important;
  box-shadow:
    0 0 16px rgba(88,101,242,.7),
    0 0 36px rgba(88,101,242,.38) !important;
}

@keyframes saButtonShimmer {
  0%, 55% { left: -75%; }
  100% { left: 135%; }
}



/* === FINAL BLACK SPACE + SOLID GREEN BUTTON === */

/* Make the star area true-black like the navbar */
html, body {
  background-color: #000000 !important;
  background: #000000 !important;
}

/* Black base behind the cosmic effects; no gray wash */
.sa-cosmic-bg {
  background:
    radial-gradient(ellipse 85% 34% at 52% 48%,
      rgba(120,120,135,.075) 0%,
      rgba(55,55,68,.035) 28%,
      transparent 68%),
    radial-gradient(ellipse 70% 16% at 45% 50%,
      rgba(210,210,225,.035) 0%,
      transparent 72%),
    #000000 !important;
}

/* Keep the surrounding sky absolutely black */
.sa-cosmic-bg::before {
  background:
    radial-gradient(ellipse 55% 10% at 50% 50%,
      rgba(255,255,255,.035),
      transparent 72%) !important;
  opacity: .8 !important;
}

.sa-cosmic-bg::after {
  background:
    radial-gradient(ellipse 60% 11% at 50% 50%,
      rgba(235,235,245,.045),
      transparent 74%) !important;
  opacity: .85 !important;
}

/* Browse Products: opaque green, never transparent */
.sa-hero-actions a[href="/products"],
.sa-hero-actions a[href="/products"]:visited {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
  opacity: 1 !important;
  color: #ffffff !important;
  background-color: #22c55e !important;
  background-image: none !important;
  border: 1px solid #22c55e !important;
  box-shadow:
    0 0 10px rgba(34,197,94,.65),
    0 0 24px rgba(34,197,94,.38),
    inset 0 0 10px rgba(255,255,255,.08) !important;
}

/* Keep the green base visible under the shimmer */
.sa-hero-actions a[href="/products"]::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: -1 !important;
  background: #22c55e !important;
}

/* White shimmer */
.sa-hero-actions a[href="/products"]::after {
  content: "" !important;
  position: absolute !important;
  top: -30% !important;
  bottom: -30% !important;
  left: -70% !important;
  width: 38% !important;
  z-index: 1 !important;
  pointer-events: none !important;
  transform: skewX(-20deg) !important;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,.15) 20%,
    rgba(255,255,255,.9) 50%,
    rgba(255,255,255,.15) 80%,
    transparent 100%
  ) !important;
  animation: saGreenShimmer 2.8s ease-in-out infinite !important;
}

.sa-hero-actions a[href="/products"]:hover {
  background-color: #16a34a !important;
  border-color: #16a34a !important;
  box-shadow:
    0 0 14px rgba(34,197,94,.8),
    0 0 34px rgba(34,197,94,.48) !important;
}

@keyframes saGreenShimmer {
  0%, 48% { left: -70%; }
  100% { left: 135%; }
}



/* === SCROLLING STAR FIELD + FORCE GREEN BROWSE BUTTON === */

/* The cosmic field belongs to the document, not the viewport.
   This means scrolling reveals different stars, and scrolling back reveals the same ones. */
html, body {
  background: #000 !important;
  background-color: #000 !important;
}

body {
  position: relative !important;
}

/* Keep the cosmic background behind the actual page content. */
.sa-cosmic-bg {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  width: 100% !important;
  min-height: 100% !important;
  height: 100% !important;
  z-index: 0 !important;
  pointer-events: none !important;
  overflow: visible !important;
}

.sa-cosmic-stars {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 1 !important;
  pointer-events: none !important;
  overflow: visible !important;
}

/* The nebula stays subtle; surrounding space remains black. */
.sa-cosmic-bg::before,
.sa-cosmic-bg::after {
  position: absolute !important;
  content: "" !important;
  pointer-events: none !important;
}

/* Make stars a little more energetic. */
.sa-cosmic-star {
  will-change: transform, opacity !important;
}

/* FORCE Browse Products green even if SellAuth's button utility classes override it. */
.sa-hero-actions a[href="/products"],
.sa-hero-actions a[href$="/products"],
.sa-hero-actions a[href="/products/"],
.sa-hero-actions button {
  background: #22c55e !important;
  background-color: #22c55e !important;
  background-image: none !important;
  color: #fff !important;
  border-color: #22c55e !important;
  opacity: 1 !important;
  box-shadow:
    0 0 10px rgba(34,197,94,.7),
    0 0 26px rgba(34,197,94,.38) !important;
}

/* If the button has a pseudo overlay, keep the green base and shimmer. */
.sa-hero-actions a[href="/products"]::before,
.sa-hero-actions a[href$="/products"]::before,
.sa-hero-actions a[href="/products/"]::before {
  background: #22c55e !important;
}

.sa-hero-actions a[href="/products"]::after,
.sa-hero-actions a[href$="/products"]::after,
.sa-hero-actions a[href="/products/"]::after {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,.12) 20%,
    rgba(255,255,255,.95) 50%,
    rgba(255,255,255,.12) 80%,
    transparent 100%
  ) !important;
  animation: saGreenShimmerFast 2.5s ease-in-out infinite !important;
}

.sa-hero-actions a[href="/products"]:hover,
.sa-hero-actions a[href$="/products"]:hover,
.sa-hero-actions a[href="/products/"]:hover {
  background: #16a34a !important;
  background-color: #16a34a !important;
  border-color: #16a34a !important;
  box-shadow:
    0 0 16px rgba(34,197,94,.85),
    0 0 38px rgba(34,197,94,.5) !important;
}

@keyframes saGreenShimmerFast {
  0%, 45% { left: -70%; }
  100% { left: 135%; }
}


100% { background-position: -200% 0; }
}

/* === PRODUCTS PAGE TYPOGRAPHY / CENTERED SEARCH === */

.sa-page-products .sa-section-header {
  max-width: 760px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-bottom: 2rem !important;
  text-align: center !important;
}

.sa-page-products .sa-section-eyebrow {
  text-transform: uppercase !important;
  letter-spacing: .10em !important;
  font-size: .78rem !important;
  font-weight: 700 !important;
  margin-bottom: .65rem !important;
}

.sa-page-products .sa-section-title {
  font-size: clamp(2rem, 3.2vw, 2.65rem) !important;
  line-height: 1.08 !important;
  letter-spacing: -.035em !important;
  font-weight: 700 !important;
  margin: 0 !important;
}

.sa-page-products .sa-section-subtitle {
  max-width: 680px !important;
  margin: .75rem auto 0 !important;
  font-size: 1rem !important;
  line-height: 1.6 !important;
}

.sa-page-products .sa-products-layout > .min-w-0 > .mb-6 {
  display: flex !important;
  justify-content: center !important;
  margin-bottom: 1.75rem !important;
}

.sa-page-products .sa-products-filterbar {
  width: min(100%, 770px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  display: block !important;
}

.sa-page-products .sa-products-search {
  width: 100% !important;
}

.sa-page-products .sa-products-search-input {
  width: 100% !important;
  min-height: 3.55rem !important;
  height: 3.55rem !important;
  border-radius: 13px !important;
  font-size: 1rem !important;
  padding-left: 2.9rem !important;
  background: rgba(7, 10, 20, .82) !important;
  border-color: rgba(255,255,255,.12) !important;
  box-shadow: 0 8px 28px rgba(0,0,0,.22) !important;
}

.sa-page-products .sa-products-search-input:focus {
  border-color: rgba(var(--cl-accent), .75) !important;
  box-shadow: 0 0 0 1px rgba(var(--cl-accent), .35), 0 10px 30px rgba(0,0,0,.25) !important;
}

.sa-page-products .sa-products-stock-toggle {
  margin-top: .75rem !important;
  width: fit-content !important;
}

@media (min-width: 641px) {
  .sa-page-products .sa-products-stock-toggle {
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* The product count remains separate and unobtrusive, rather than
   replacing the centered page heading while searching. */
.sa-page-products .flex.items-center.justify-end.gap-3.mb-4 {
  justify-content: flex-start !important;
  margin-bottom: 1rem !important;
}

.sa-page-products .flex.items-center.justify-end.gap-3.mb-4 p[data-dsr] {
  font-size: .82rem !important;
  opacity: .65 !important;
}

/* === PRODUCTS FINAL FIX === */

/* In-stock filter is intentionally removed. */
.sa-products-stock-toggle {
  display: none !important;
}

/* No-results message lives inside the existing product grid.
   It must not create a different background or replace the page. */
.sa-live-empty-state {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  min-height: 220px !important;
  padding: 3.5rem 1.5rem !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

.sa-live-empty-state[hidden] {
  display: none !important;
}

.sa-live-empty-icon {
  width: 3rem !important;
  height: 3rem !important;
  border-radius: 999px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: rgba(255,255,255,.45) !important;
  background: rgba(255,255,255,.04) !important;
  margin-bottom: 1rem !important;
}

.sa-live-empty-icon svg {
  width: 1.2rem !important;
  height: 1.2rem !important;
}

.sa-live-empty-title {
  margin: 0 !important;
  color: rgba(255,255,255,.92) !important;
  font-weight: 600 !important;
  font-size: 1rem !important;
}

.sa-live-empty-text {
  margin: .4rem 0 0 !important;
  color: rgba(255,255,255,.48) !important;
  font-size: .9rem !important;
}

/* Keep the whole cosmic/page background untouched during local search. */
.sa-page-products,
.sa-page-products > .wrap,
.sa-products-layout,
.sa-products-layout > .min-w-0,
.sa-page-products-items {
  background: transparent !important;
  background-color: transparent !important;
}

/* === FINAL SEARCH STABILITY === */
.sa-page-products-items {
  position: relative !important;
  background: transparent !important;
  background-color: transparent !important;
}

.sa-live-empty-state {
  position: absolute !important;
  inset: 0 !important;
  min-height: 0 !important;
  height: 100% !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-direction: column !important;
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  pointer-events: none !important;
}

.sa-live-empty-state[hidden] {
  display: none !important;
}

/* Search must not create a different background or visual panel. */
.sa-page-products,
.sa-page-products .wrap,
.sa-page-products .sa-products-layout,
.sa-page-products .sa-products-layout > .min-w-0,
.sa-page-products .sa-page-products-items {
  background-image: none !important;
}

/* === FIND YOUR PRODUCT PRODUCTS HEADER === */
.sa-page-products .sa-section-header {
  text-align: center !important;
  max-width: 780px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.sa-page-products .sa-section-title {
  font-size: clamp(2.15rem, 4vw, 3.15rem) !important;
  line-height: 1.05 !important;
  font-weight: 750 !important;
  letter-spacing: -.045em !important;
  color: #fff !important;
}

.sa-page-products .sa-section-subtitle {
  margin-top: .75rem !important;
  font-size: 1rem !important;
  line-height: 1.55 !important;
  color: rgba(255,255,255,.58) !important;
}

.sa-page-products .sa-products-result-count {
  justify-content: flex-start !important;
  text-align: left !important;
  width: 100% !important;
  margin-top: .25rem !important;
  margin-bottom: 1rem !important;
}

.sa-page-products .sa-products-result-count [data-dsr] {
  margin: 0 !important;
  color: rgba(255,255,255,.48) !important;
  font-size: .9rem !important;
}

/* Product results themselves stay left-aligned; searching never centers
   a single matching card. */
.sa-page-products .sa-page-products-items {
  justify-items: start !important;
  align-items: start !important;
}

.sa-page-products .sa-page-products-item {
  justify-self: start !important;
}

/* === STABLE FIND YOUR PRODUCT HEADER === */
.sa-products-custom-header {
  width: 100% !important;
  max-width: 820px !important;
  margin: 0 auto 2rem !important;
  text-align: center !important;
}

.sa-products-custom-title {
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: .7rem !important;
  color: #fff !important;
  font-size: clamp(2.15rem, 4vw, 3.15rem) !important;
  line-height: 1.05 !important;
  font-weight: 750 !important;
  letter-spacing: -.045em !important;
}

.sa-products-title-icon {
  display: inline-flex !important;
  width: 1em !important;
  height: 1em !important;
  align-items: center !important;
  justify-content: center !important;
  color: rgba(255,255,255,.92) !important;
  flex: 0 0 auto !important;
}

.sa-products-title-icon svg {
  width: .72em !important;
  height: .72em !important;
}

.sa-products-custom-subtitle {
  margin: .75rem auto 0 !important;
  color: rgba(255,255,255,.58) !important;
  font-size: 1rem !important;
  line-height: 1.55 !important;
}

/* The count is the only heading-like value that changes during search. */
.sa-page-products .sa-products-result-count {
  justify-content: flex-start !important;
  text-align: left !important;
  width: 100% !important;
}

.sa-page-products .sa-products-result-count [data-dsr] {
  color: rgba(255,255,255,.48) !important;
  font-size: .9rem !important;
}

/* Never let a search result alter the header. */
.sa-products-custom-header,
.sa-products-custom-title,
.sa-products-custom-subtitle {
  opacity: 1 !important;
  visibility: visible !important;
}

/* === HOMEPAGE POLISH: WHY-US + MOVING REVIEWS + HERO SPOTLIGHT === */
.sa-features--split-highlights .sa-features-item h3,
.sa-features--split-highlights .sa-features-item p {
  letter-spacing: normal !important;
}

/* Stronger white spotlight behind the main homepage title. */
.sa-hero-title {
  position: relative !important;
  isolation: isolate !important;
  z-index: 1 !important;
  text-shadow:
    0 0 12px rgba(255,255,255,.22),
    0 0 30px rgba(255,255,255,.16),
    0 0 58px rgba(255,255,255,.10) !important;
}

.sa-hero-title::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 50%;
  width: 96%;
  height: 78%;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  background: rgba(255,255,255,.26);
  filter: blur(54px);
  opacity: .9;
  pointer-events: none;
  animation: saHeroWhitePulse 4.8s ease-in-out infinite;
}

.sa-hero-title::after {
  content: "";
  position: absolute;
  z-index: -2;
  left: 50%;
  top: 50%;
  width: 68%;
  height: 48%;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  background: rgba(255,255,255,.16);
  filter: blur(34px);
  pointer-events: none;
}

@keyframes saHeroWhitePulse {
  0%, 100% { opacity: .68; transform: translate(-50%, -50%) scale(.96); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1.05); }
}

.sa-review-showcase {
  position: relative;
  overflow: hidden;
}

.sa-review-showcase-header {
  max-width: 760px;
  margin: 0 auto 2.4rem;
  text-align: center;
}

.sa-review-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin-bottom: .9rem;
  color: rgba(255,255,255,.62);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .06em;
}

.sa-review-eyebrow span {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #22c55e;
  box-shadow: 0 0 12px rgba(34,197,94,.45);
}

.sa-review-showcase-header h2 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .65rem;
  margin: 0;
  color: #fff;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.05;
  font-weight: 750;
  letter-spacing: -.045em;
}

.sa-review-title-icon {
  font-size: .68em;
  color: #fff;
  filter: drop-shadow(0 0 10px rgba(255,255,255,.28));
}

.sa-review-showcase-header p {
  margin: .8rem 0 0;
  color: rgba(255,255,255,.48);
  font-size: 1rem;
}

.sa-review-marquee {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: calc(100% + 48px);
  margin-left: -24px;
  overflow: hidden;
  padding: 4px 0 8px;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
}

.sa-review-track {
  display: flex;
  width: max-content;
  will-change: transform;
}

.sa-review-track-set {
  display: flex;
  gap: 12px;
  padding-right: 12px;
  flex-shrink: 0;
}

.sa-review-track--left {
  animation: saReviewsLeft 34s linear infinite;
}

.sa-review-track--right {
  animation: saReviewsRight 38s linear infinite;
}

@keyframes saReviewsLeft {
  from { transform: translate3d(0,0,0); }
  to { transform: translate3d(-50%,0,0); }
}

@keyframes saReviewsRight {
  from { transform: translate3d(-50%,0,0); }
  to { transform: translate3d(0,0,0); }
}

.sa-review-card {
  width: min(310px, 78vw);
  min-width: min(310px, 78vw);
  min-height: 154px;
  display: flex;
  flex-direction: column;
  padding: 15px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 15px;
  background: rgba(20,20,31,.88);
  box-shadow: 0 12px 30px rgba(0,0,0,.16);
}

.sa-review-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.sa-review-customer {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #f3f3f5;
  font-size: .84rem;
  font-weight: 700;
}

.sa-review-customer i {
  color: rgba(255,255,255,.72);
  font-size: .82rem;
}

.sa-review-verified {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
  padding: 4px 8px;
  border: 1px solid rgba(34,197,94,.22);
  border-radius: 999px;
  background: rgba(34,197,94,.08);
  color: #22c55e;
  font-size: .62rem;
  line-height: 1;
  font-weight: 800;
}

.sa-review-verified i {
  font-size: .65rem;
}

.sa-review-stars {
  margin-top: 11px;
  color: #f5c542;
  font-size: .72rem;
  letter-spacing: .12em;
  line-height: 1;
}

.sa-review-message {
  margin: 12px 0 0;
  color: rgba(255,255,255,.67);
  font-size: .84rem;
  line-height: 1.45;
}

.sa-review-footer {
  margin-top: auto;
  padding-top: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: rgba(255,255,255,.32);
  font-size: .68rem;
}

.sa-review-footer span:last-child {
  color: #22c55e;
  font-weight: 800;
}

@media (hover: hover) {
  .sa-review-marquee:hover .sa-review-track {
    animation-play-state: paused;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sa-review-track--left,
  .sa-review-track--right,
  .sa-hero-title::before {
    animation: none;
  }
}

@media (max-width: 620px) {
  .sa-review-marquee {
    width: calc(100% + 24px);
    margin-left: -12px;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 3%, #000 97%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 3%, #000 97%, transparent);
  }

  .sa-review-card {
    min-height: 140px;
  }

  .sa-review-showcase-header h2 {
    gap: .5rem;
  }
}


/* === SOLARS FINAL HERO GLOW / FOOTER === */

/* Softer, dimmer white light behind "Welcome to Solars Marketplace". */
.sa-hero-title {
  text-shadow:
    0 0 8px rgba(255,255,255,.10),
    0 0 20px rgba(255,255,255,.075),
    0 0 38px rgba(255,255,255,.045) !important;
}

.sa-hero-title::before {
  background: rgba(255,255,255,.12) !important;
  filter: blur(52px) !important;
  opacity: .55 !important;
  animation: saHeroWhitePulseDim 5.6s ease-in-out infinite !important;
}

.sa-hero-title::after {
  background: rgba(255,255,255,.07) !important;
  filter: blur(32px) !important;
  opacity: .7 !important;
}

@keyframes saHeroWhitePulseDim {
  0%, 100% {
    opacity: .38;
    transform: translate(-50%, -50%) scale(.97);
  }
  50% {
    opacity: .58;
    transform: translate(-50%, -50%) scale(1.03);
  }
}

/* Keep the footer clean and remove the SellAuth powered-by footer link if injected. */
.sa-footer {
  background: transparent !important;
}

.sa-footer .sa-footer-brand {
  display: none !important;
}

.sa-footer .sa-footer-socials {
  display: none !important;
}

.sa-footer a[href*="sellauth.com"][href*="powered_by"],
.sa-footer a[href*="sellauth.com"][href*="src=sb"] {
  display: none !important;
}

/* Our footer's Discord support block. */
.sa-solars-footer-support {
  display: flex;
  align-items: center;
  gap: .9rem;
}

.sa-solars-footer-support-icon {
  width: 2.7rem;
  height: 2.7rem;
  flex: 0 0 2.7rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  color: #fff;
  background: rgba(88,101,242,.16);
  border: 1px solid rgba(88,101,242,.28);
  box-shadow: 0 0 18px rgba(88,101,242,.12);
}

.sa-solars-footer-support-icon i {
  font-size: 1.05rem;
}

.sa-solars-footer-support-label {
  color: rgba(255,255,255,.42);
  font-size: .78rem;
  line-height: 1.2;
}

.sa-solars-footer-support-link {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin-top: .2rem;
  color: rgba(255,255,255,.92);
  font-size: .92rem;
  font-weight: 650;
  transition: color .2s ease, text-shadow .2s ease;
}

.sa-solars-footer-support-link:hover {
  color: #fff;
  text-shadow: 0 0 16px rgba(255,255,255,.18);
}

.sa-solars-footer-support-link i {
  font-size: .72rem;
}

.sa-solars-footer-divider {
  border-top: 1px solid rgba(255,255,255,.08);
}

.sa-solars-footer-columns {
  display: grid;
  gap: 2.5rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.sa-solars-footer-heading {
  margin: 0 0 .8rem;
  color: rgba(255,255,255,.48);
  font-size: .72rem;
  font-weight: 750;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.sa-solars-footer-links {
  display: flex;
  flex-direction: column;
  gap: .48rem;
}

.sa-solars-footer-link {
  color: rgba(255,255,255,.70);
  font-size: .88rem;
  transition: color .2s ease;
}

.sa-solars-footer-link:hover {
  color: #fff;
}

.sa-solars-footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.sa-solars-footer-top {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  color: rgba(255,255,255,.48);
  font-size: .82rem;
  transition: color .2s ease;
}

.sa-solars-footer-top:hover {
  color: rgba(255,255,255,.88);
}

@media (max-width: 700px) {
  .sa-solars-footer-columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sa-solars-footer-bottom {
    align-items: flex-start;
    flex-direction: column;
  }
}


/* === FINAL SOLARS FOOTER + PAGE END FIX === */

/* Give the Discord support row the same breathing room as the reference footer. */
.sa-footer.sa-footer--solars > .wrap {
  padding-top: 2.25rem !important;
}

/* Keep a clear gap between the Discord block and the navigation divider. */
.sa-solars-footer-support {
  padding-top: 0.5rem !important;
  padding-bottom: 0.35rem !important;
}

.sa-solars-footer-divider.mt-8 {
  margin-top: 2rem !important;
  padding-top: 2rem !important;
}

/* Never render the requested footer links. */
.sa-solars-footer-link[href*="status"],
.sa-solars-footer-link[href*="cookie-settings"] {
  display: none !important;
}

/* The cosmic layers must NEVER participate in document height. */
.sa-cosmic-bg,
.sa-cosmic-stars {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: hidden !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

/* Prevent the cosmetic background from creating horizontal/vertical scroll overflow. */
html,
body {
  overflow-x: hidden !important;
}

body {
  min-height: 0 !important;
}

/* The page ends at the actual content; no artificial tail after the footer. */
#app {
  min-height: 0 !important;
}

/* Keep the footer itself compact and ensure its bottom padding does not create
   an extra scroll area below the copyright. */
.sa-footer.sa-footer--solars {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

.sa-footer.sa-footer--solars > .wrap {
  padding-bottom: 1.25rem !important;
}

.sa-solars-footer-bottom {
  padding-bottom: 0 !important;
}

/* === FINAL COSMIC SINGLE-SCROLLER FIX === */
/*
   The theme has one normal document scroll container: <html>.
   The cosmic layers live INSIDE #app and are absolutely positioned, so
   they move naturally with the document without creating another scroller.
*/
html {
  overflow-x: clip !important;
  overflow-y: auto !important;
}

body {
  position: relative !important;
  overflow: visible !important;
  min-height: 100% !important;
  height: auto !important;
  background: #020308 !important;
  background-image: none !important;
}

#app {
  position: relative !important;
  overflow: visible !important;
  min-height: 100vh !important;
  height: auto !important;
  background: transparent !important;
}

/* Do not let the decorative field participate in layout height. */
#app > .sa-cosmic-bg,
#app > .sa-cosmic-stars {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
  box-sizing: border-box !important;
}

#app > .sa-cosmic-bg {
  z-index: 0 !important;
}

#app > .sa-cosmic-stars {
  z-index: 0 !important;
}

/* Keep all actual storefront content above the background. */
#app > *:not(.sa-cosmic-bg):not(.sa-cosmic-stars) {
  position: relative;
  z-index: 1;
}

/* Prevent any accidental scrollbar from the decorative field. */
.sa-cosmic-bg,
.sa-cosmic-stars {
  overflow: clip !important;
  scrollbar-width: none !important;
}

.sa-cosmic-bg::-webkit-scrollbar,
.sa-cosmic-stars::-webkit-scrollbar {
  display: none !important;
}

/* No artificial black area after the footer. */
.sa-footer.sa-footer--solars {
  margin-bottom: 0 !important;
}


/* === COSMIC BACKGROUND RESTORED — DOCUMENT HEIGHT, SINGLE SCROLLER === */
html, body { background:#000 !important; }
#app { position:relative !important; background:transparent !important; }
#app > .sa-cosmic-bg,
#app > .sa-cosmic-stars {
  position:absolute !important;
  top:0 !important;
  left:0 !important;
  width:100% !important;
  height:var(--sa-cosmic-height, 100%) !important;
  min-height:0 !important;
  max-height:none !important;
  margin:0 !important;
  padding:0 !important;
  pointer-events:none !important;
  overflow:hidden !important;
  box-sizing:border-box !important;
}
#app > .sa-cosmic-bg {
  z-index:0 !important;
  background:
    radial-gradient(ellipse 95% 18% at 50% 18%, rgba(255,255,255,.075), transparent 70%),
    radial-gradient(ellipse 90% 20% at 50% 42%, rgba(205,210,225,.095), transparent 72%),
    radial-gradient(ellipse 85% 17% at 50% 66%, rgba(230,230,245,.065), transparent 72%),
    radial-gradient(ellipse 75% 14% at 50% 88%, rgba(180,185,205,.055), transparent 72%),
    #000 !important;
  animation: saMilkyDrift 32s ease-in-out infinite alternate !important;
}
#app > .sa-cosmic-bg::before {
  content:"" !important;
  position:absolute !important;
  inset:-12% -8% !important;
  background:
    repeating-linear-gradient(162deg,
      transparent 0%, transparent 13%,
      rgba(255,255,255,.018) 17%,
      rgba(255,255,255,.055) 21%,
      rgba(255,255,255,.014) 25%,
      transparent 31%),
    radial-gradient(ellipse 80% 11% at 50% 40%, rgba(255,255,255,.065), transparent 74%),
    radial-gradient(ellipse 78% 11% at 50% 67%, rgba(255,255,255,.045), transparent 74%) !important;
  filter:blur(15px) !important;
  opacity:.95 !important;
  transform:rotate(-4deg) scale(1.08) !important;
  animation:saNebulaMove 42s ease-in-out infinite alternate !important;
}
#app > .sa-cosmic-bg::after {
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  background:
    radial-gradient(ellipse 70% 7% at 50% 25%, rgba(255,255,255,.055), transparent 76%),
    radial-gradient(ellipse 68% 8% at 50% 50%, rgba(255,255,255,.065), transparent 76%),
    radial-gradient(ellipse 70% 7% at 50% 78%, rgba(255,255,255,.045), transparent 76%) !important;
  filter:blur(20px) !important;
  opacity:.9 !important;
  animation:saDustPulse 18s ease-in-out infinite alternate !important;
}
#app > .sa-cosmic-stars { z-index:1 !important; }
#app > .sa-cosmic-stars .sa-cosmic-star {
  position:absolute !important;
  border-radius:50% !important;
  background:#fff !important;
  box-shadow:0 0 4px rgba(255,255,255,.72), 0 0 8px rgba(255,255,255,.18) !important;
  animation:saStarFloat var(--dur) ease-in-out infinite alternate !important;
}
#app > *:not(.sa-cosmic-bg):not(.sa-cosmic-stars) { position:relative; z-index:2; }


/* Final bottom-scroll stabilization */
html {
  overscroll-behavior-y: none;
  scroll-behavior: auto !important;
}
body {
  overscroll-behavior-y: none;
  overflow-anchor: none;
}


/* === FINAL ABSOLUTE PAGE BOUNDARY === */
html,
body {
  overscroll-behavior: none !important;
  overscroll-behavior-y: none !important;
  scroll-behavior: auto !important;
}

html {
  overflow-x: clip !important;
  overflow-y: scroll !important;
}

body {
  overflow: visible !important;
}


/* === TRUE FOOTER END === */
/* Copyright is the final visible pixel of the document. */
html {
  margin: 0 !important;
  padding: 0 !important;
  overscroll-behavior-y: none !important;
}
body {
  margin: 0 !important;
  padding: 0 !important;
  overscroll-behavior-y: none !important;
}
#app {
  min-height: 0 !important;
  height: auto !important;
}
.sa-footer.sa-footer--solars {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.sa-footer.sa-footer--solars > .wrap {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}
.sa-solars-footer-bottom {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}
.sa-solars-footer-bottom p {
  margin-bottom: 0 !important;
}


/* =========================================================
   SOLARS DESIGN SCROLLBAR + TRUE FOOTER BOUNDARY
   ========================================================= */
html {
  scrollbar-width: thin !important;
  scrollbar-color: #22c55e #07090c !important;
  overscroll-behavior-y: none !important;
}

html::-webkit-scrollbar {
  width: 10px !important;
}

html::-webkit-scrollbar-track {
  background: #07090c !important;
  border-left: 1px solid rgba(255,255,255,.035) !important;
}

html::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #22c55e 0%, #16a34a 100%) !important;
  border-radius: 999px !important;
  border: 2px solid #07090c !important;
  box-shadow: 0 0 8px rgba(34,197,94,.28) !important;
}

html::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #4ade80 0%, #22c55e 100%) !important;
  box-shadow: 0 0 12px rgba(34,197,94,.42) !important;
}

html::-webkit-scrollbar-corner {
  background: #07090c !important;
}

/* Keep the document itself as the only vertical scroll container. */
body {
  overflow: visible !important;
  overscroll-behavior-y: none !important;
}

/* The decorative layers never get their own scrollbar. */
.sa-cosmic-bg,
.sa-cosmic-stars {
  overflow: hidden !important;
}

/* Do not leave any visual/padding tail after the footer. */
.sa-footer.sa-footer--solars,
.sa-footer.sa-footer--solars > .wrap,
.sa-solars-footer-bottom {
  margin-bottom: 0 !important;
}


/* =========================================================
   SOLARS FINAL POLISH
   Product buy box stays visible while scrolling the product.
   Black/white scrollbar to match the monochrome design.
   ========================================================= */

/* Monochrome scrollbar */
html {
  scrollbar-color: #8b8b8b #050505 !important;
}

html::-webkit-scrollbar-track {
  background: #050505 !important;
  border-left: 1px solid rgba(255,255,255,.06) !important;
}

html::-webkit-scrollbar-thumb {
  background: linear-gradient(
    180deg,
    #f2f2f2 0%,
    #8b8b8b 48%,
    #4b4b4b 100%
  ) !important;
  border: 2px solid #050505 !important;
  border-radius: 999px !important;
  box-shadow: 0 0 7px rgba(255,255,255,.12) !important;
}

html::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(
    180deg,
    #ffffff 0%,
    #bdbdbd 55%,
    #666666 100%
  ) !important;
  box-shadow: 0 0 10px rgba(255,255,255,.20) !important;
}


/* =========================================================
   LOGIN MODAL FIX — keep modal out of normal #app stacking/layout
   ========================================================= */
/*
   The cosmic-layer rules above apply `position: relative` to every direct
   child of #app. That unintentionally overrides Tailwind's `.fixed` class
   on the SellAuth customer-login modal because the selector is more specific.
   The result is that the modal overlay appears while the actual dialog is
   laid out at the footer position and is therefore not visible in the viewport.

   Force the original modal to be a viewport-level fixed layer again.
*/
#app > .sa-customer-login-modal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 1000 !important;
  width: auto !important;
  max-width: none !important;
  pointer-events: auto !important;
}

#app > .sa-customer-login-modal > div {
  position: relative;
  z-index: 1;
}

#app > .sa-customer-login-modal > div > .relative.z-10 {
  position: relative !important;
  z-index: 2 !important;
}

/* v22 auth fix: SellAuth customer token uses a session cookie so refresh keeps the login without long-lived theme persistence. */


/* v25 account avatar / login placement */
.sa-navbar a[aria-label="Account"] img { display: block; }


/* =========================================================
   TICKET CREATE MODAL — solid dialog/input surfaces
   ========================================================= */
.sa-ticket-create-modal {
  isolation: isolate;
}

.sa-ticket-create-modal .sa-ticket-solid-input {
  background-color: #111116 !important;
  background: #111116 !important;
  opacity: 1 !important;
}

.sa-ticket-create-modal > div > .inline-block {
  background-color: #0b0b10 !important;
  background: #0b0b10 !important;
  opacity: 1 !important;
  position: relative;
  z-index: 1;
}

.sa-ticket-create-modal form,
.sa-ticket-create-modal label,
.sa-ticket-create-modal textarea,
.sa-ticket-create-modal input {
  opacity: 1 !important;
}

.sa-ticket-create-modal > div > .fixed {
  z-index: 0 !important;
}



/* === INSTANT STAR PAINT FALLBACK ===
   The real star field is generated by custom.js. This CSS layer makes
   the stars visible on the very first paint, so navigation/refresh never
   shows an empty black background while JS is loading. It is removed
   instantly once the real star layer exists. */
body {
  position: relative !important;
}

body::before {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  opacity: 1 !important;
  background:
    radial-gradient(circle at 3% 8%, rgba(255,255,255,.75) 0 1px, transparent 1.5px),
    radial-gradient(circle at 9% 31%, rgba(255,255,255,.48) 0 1px, transparent 1.5px),
    radial-gradient(circle at 15% 72%, rgba(255,255,255,.62) 0 1px, transparent 1.5px),
    radial-gradient(circle at 21% 18%, rgba(255,255,255,.38) 0 .8px, transparent 1.4px),
    radial-gradient(circle at 27% 54%, rgba(255,255,255,.72) 0 1px, transparent 1.6px),
    radial-gradient(circle at 34% 87%, rgba(255,255,255,.45) 0 1px, transparent 1.5px),
    radial-gradient(circle at 39% 29%, rgba(255,255,255,.65) 0 .9px, transparent 1.5px),
    radial-gradient(circle at 45% 66%, rgba(255,255,255,.42) 0 1px, transparent 1.5px),
    radial-gradient(circle at 51% 11%, rgba(255,255,255,.68) 0 1px, transparent 1.5px),
    radial-gradient(circle at 57% 43%, rgba(255,255,255,.50) 0 .8px, transparent 1.4px),
    radial-gradient(circle at 63% 78%, rgba(255,255,255,.72) 0 1px, transparent 1.6px),
    radial-gradient(circle at 69% 24%, rgba(255,255,255,.44) 0 1px, transparent 1.5px),
    radial-gradient(circle at 75% 58%, rgba(255,255,255,.60) 0 .9px, transparent 1.5px),
    radial-gradient(circle at 81% 91%, rgba(255,255,255,.40) 0 1px, transparent 1.5px),
    radial-gradient(circle at 87% 13%, rgba(255,255,255,.70) 0 1px, transparent 1.5px),
    radial-gradient(circle at 93% 39%, rgba(255,255,255,.48) 0 .8px, transparent 1.4px),
    radial-gradient(circle at 97% 74%, rgba(255,255,255,.64) 0 1px, transparent 1.5px),
    radial-gradient(circle at 12% 93%, rgba(255,255,255,.35) 0 .8px, transparent 1.4px),
    radial-gradient(circle at 31% 5%, rgba(255,255,255,.55) 0 1px, transparent 1.5px),
    radial-gradient(circle at 72% 4%, rgba(255,255,255,.45) 0 .8px, transparent 1.4px);
  background-color: #000;
}

body:has(.sa-cosmic-stars)::before {
  display: none !important;
}

/* Keep page content above the instant fallback layer. */
#app {
  position: relative !important;
  z-index: 1 !important;
}

/* The generated star layer remains above the fallback and page background. */
#app > .sa-cosmic-stars {
  z-index: 1 !important;
}
\n\n

/* =========================================================
   PAGE REVEAL / FLY-UP — ONE CONTINUOUS PUSH
   The motion itself is driven by the Web Animations API in custom.js so
   there is exactly one transform and no CSS animation competing with it.
   ========================================================= */
#sa-page-content {
  overflow-anchor: none !important;
}

@media (prefers-reduced-motion: reduce) {
  #sa-page-content {
    animation: none !important;
    filter: none !important;
    transform: none !important;
  }
}

@media (min-width: 1024px) {
  .sa-tpl-shop .sa-hero {
    min-height: calc(100vh - 68px);
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .sa-tpl-shop .sa-products {
    margin-top: clamp(80px, 10vh, 150px);
  }
}

@media (prefers-reduced-motion: reduce) {
  #sa-page-content.sa-page-enter-start,
  #sa-page-content.sa-page-enter-active {
    animation: none !important;
    filter: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}


/* Footer entrance uses the same single fly-up as page content. The complete
   footer block moves together so the divider, Discord icon and text stay in sync. */
.sa-footer > .wrap {
  overflow-anchor: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .sa-footer > .wrap {
    animation: none !important;
    filter: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* =========================================================
   NAVBAR / FOOTER MICRO-POLISH
   ========================================================= */

/* The footer's top divider is a real element so it can travel in the same
   entrance rhythm as the Discord/support block instead of appearing instantly. */
.sa-footer {
  position: relative !important;
  border-top: 0 !important;
}

.sa-footer-topline {
  position: absolute;
  top: 0;
  left: 50%;
  width: min(100% - 2rem, 1120px);
  height: 1px;
  transform: translateX(-50%);
  transform-origin: 50% 50%;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255,255,255,.07) 10%,
    rgba(255,255,255,.18) 50%,
    rgba(255,255,255,.07) 90%,
    transparent 100%);
  box-shadow: 0 0 16px rgba(255,255,255,.04);
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .sa-footer-topline {
    opacity: 1 !important;
    transform: translateX(-50%) !important;
  }
}

/* A more premium glass navigation without changing its footprint. */
.sa-navbar--classic .sa-navbar-shell {
  position: relative;
  border-color: rgba(255,255,255,.10) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012)),
    rgba(3,3,7,.78) !important;
  box-shadow:
    0 10px 34px rgba(0,0,0,.28),
    inset 0 -1px 0 rgba(255,255,255,.025) !important;
}

.sa-navbar--classic .sa-navbar-shell::after {
  content: "";
  position: absolute;
  left: 7%;
  right: 7%;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.10), transparent);
  opacity: .65;
  pointer-events: none;
}

.sa-navbar--classic .sa-navbar-link {
  position: relative;
  isolation: isolate;
  border: 1px solid transparent;
  transition:
    color .22s ease,
    background-color .22s ease,
    border-color .22s ease,
    transform .22s cubic-bezier(.16,1,.3,1),
    box-shadow .22s ease !important;
}

.sa-navbar--classic .sa-navbar-link:hover {
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.07);
  box-shadow: 0 5px 16px rgba(0,0,0,.16);
}

.sa-navbar--classic .sa-navbar-link.active,
.sa-navbar--classic .sa-navbar-link.is-active,
.sa-navbar--classic .sa-navbar-link[data-active="true"] {
  border-color: rgba(255,255,255,.10) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.035)),
    rgba(255,255,255,.045) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.055),
    0 4px 18px rgba(0,0,0,.18) !important;
}

.sa-navbar--classic .sa-navbar-link.active::after,
.sa-navbar--classic .sa-navbar-link.is-active::after,
.sa-navbar--classic .sa-navbar-link[data-active="true"]::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 3px;
  width: 14px;
  height: 2px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: rgba(255,255,255,.72);
  box-shadow: 0 0 10px rgba(255,255,255,.16);
  pointer-events: none;
}

.sa-navbar--classic .sa-navbar-logo,
.sa-navbar--classic .sa-navbar-cart,
.sa-navbar--classic button[aria-label="Account"],
.sa-navbar--classic .currency-selector > button {
  transition: transform .22s cubic-bezier(.16,1,.3,1), box-shadow .22s ease, border-color .22s ease !important;
}

.sa-navbar--classic .sa-navbar-logo:hover,
.sa-navbar--classic .sa-navbar-cart:hover,
.sa-navbar--classic button[aria-label="Account"]:hover,
.sa-navbar--classic .currency-selector > button:hover {
  transform: translateY(-1px);
}

@media (max-width: 1023px) {
  .sa-navbar--classic .sa-navbar-shell {
    background: rgba(3,3,7,.86) !important;
  }
}


/* Profile-only tickets card */
.sa-profile-tickets {
  position: relative;
  overflow: hidden;
}
.sa-profile-tickets::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 15% 0%, rgba(255,255,255,.045), transparent 38%);
}
.sa-profile-tickets > * { position: relative; }


/* Product panel: keep the normal Buy Now action, hide the separate balance purchase prompt. */
.sa-product-form .sa-instant-balance-buy {
  display: none !important;
}

/* Product panel Buy Now: black label/icon with a soft light-gray glow. */
.sa-product-form .sa-buy-now {
  color: #050505 !important;
  background: #fff !important;
  border-color: #fff !important;
  text-shadow: none !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.22),
    0 0 18px rgba(220,220,220,.30),
    0 0 34px rgba(200,200,200,.16) !important;
  animation: saBuyNowSoftGlow 2.6s ease-in-out infinite !important;
}

.sa-product-form .sa-buy-now span,
.sa-product-form .sa-buy-now svg {
  color: #050505 !important;
  stroke: #050505 !important;
}

.sa-product-form .sa-buy-now:hover:enabled {
  color: #000 !important;
  background: #fff !important;
  border-color: #fff !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.30),
    0 0 24px rgba(225,225,225,.42),
    0 0 44px rgba(205,205,205,.22) !important;
}

@keyframes saBuyNowSoftGlow {
  0%, 100% {
    box-shadow:
      0 0 0 1px rgba(255,255,255,.20),
      0 0 16px rgba(220,220,220,.24),
      0 0 30px rgba(200,200,200,.12);
  }
  50% {
    box-shadow:
      0 0 0 1px rgba(255,255,255,.32),
      0 0 24px rgba(230,230,230,.42),
      0 0 48px rgba(205,205,205,.20);
  }
}

/* Cart: keep verification functional but visually hidden. */
.sa-cart-altcha-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Soft light that stays centered on the mouse pointer. */
.sa-cursor-glow {
  position: fixed !important;
  left: 0 !important;
  top: 0 !important;
  width: 230px !important;
  height: 230px !important;
  margin-left: -115px !important;
  margin-top: -115px !important;
  border-radius: 50% !important;
  pointer-events: none !important;
  z-index: 99999 !important;
  opacity: 0 !important;
  background: radial-gradient(circle, rgba(255,255,255,.14) 0%, rgba(255,255,255,.075) 24%, rgba(255,255,255,.032) 48%, rgba(255,255,255,.012) 62%, transparent 76%) !important;
  filter: blur(4px) !important;
  mix-blend-mode: screen !important;
  transition: opacity .18s ease !important;
  will-change: transform, opacity !important;
}
.sa-cursor-glow.is-visible {
  opacity: .92 !important;
}
@media (pointer: coarse) {
  .sa-cursor-glow { display: none !important; }
}


/* === FINAL CURSOR LIGHT ===
   Persistent mouse-following light, independent from the cosmic-field initializer. */
.sa-cursor-glow {
  position: fixed !important;
  left: 0 !important;
  top: 0 !important;
  width: 260px !important;
  height: 260px !important;
  margin: -130px 0 0 -130px !important;
  border-radius: 50% !important;
  pointer-events: none !important;
  z-index: 2147483647 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  background: radial-gradient(
    circle,
    rgba(255,255,255,.12) 0%,
    rgba(255,255,255,.075) 20%,
    rgba(255,255,255,.035) 43%,
    rgba(255,255,255,.012) 62%,
    transparent 76%
  ) !important;
  filter: blur(5px) !important;
  mix-blend-mode: screen !important;
  will-change: transform, opacity !important;
  transition: opacity .18s ease, visibility .18s ease !important;
}
.sa-cursor-glow.is-visible {
  opacity: .95 !important;
  visibility: visible !important;
}
@media (pointer: coarse) {
  .sa-cursor-glow { display: none !important; }
}