/* Top250 storefront skin. This standalone file deliberately has a new name so
   the storefront cannot reuse the cached legacy VEXION stylesheet. */
:root {
  --vexion-black: #080a0d;
  --vexion-ink: #101419;
  --vexion-cyan: #e3ac35;
  --vexion-magenta: #d72fc6;
  --vexion-violet: #7f258e;
  --vexion-bluegray: #d4c9d3;
  --vexion-panel: rgba(14, 17, 20, 0.9);
  --vexion-panel-strong: rgba(17, 21, 25, 0.98);
  --vexion-line: rgba(229, 172, 50, 0.28);
  --vexion-line-hot: rgba(215, 47, 198, 0.36);
}

body {
  background: radial-gradient(circle at 12% 12%, rgba(227, 172, 53, 0.17), transparent 28rem), radial-gradient(circle at 87% 22%, rgba(215, 47, 198, 0.13), transparent 30rem), linear-gradient(145deg, #080a0d, #11161b 55%, #070809) !important;
}

/* Branding and navigation */
.ranked-logo-asset {
  display: block !important;
  width: 3.35rem !important;
  height: 3.35rem !important;
  flex: 0 0 auto !important;
  object-fit: cover !important;
  border: 1px solid rgba(227, 172, 53, 0.78) !important;
  border-radius: 0.75rem !important;
  box-shadow: 0 0 0 1px rgba(215, 47, 198, 0.3) inset, 0 0 24px rgba(227, 172, 53, 0.24) !important;
}

.vexion-background__mark {
  width: min(72vw, 60rem) !important;
  opacity: 0.17 !important;
  filter: drop-shadow(0 0 34px rgba(227, 172, 53, 0.3)) drop-shadow(0 0 44px rgba(215, 47, 198, 0.2)) !important;
}

[data-component-id="navbar"] > div {
  border-color: rgba(227, 172, 53, 0.38) !important;
  border-radius: 1.1rem !important;
  background: linear-gradient(105deg, rgba(15, 18, 21, 0.97), rgba(36, 20, 40, 0.92)) !important;
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.35), inset 0 1px rgba(244, 208, 112, 0.08) !important;
}

[data-component-id="navbar"] h1 { color: #f6f1e5 !important; }
[data-component-id="navbar"] a:hover { color: #f4d070 !important; }

/* Remove the legacy capsule / ellipse card style and replace it with Top250 cards. */
.vexion-product-card {
  overflow: hidden !important;
  border: 1px solid rgba(227, 172, 53, 0.34) !important;
  border-radius: 1.15rem !important;
  background: linear-gradient(145deg, rgba(227, 172, 53, 0.11), transparent 38%), linear-gradient(315deg, rgba(215, 47, 198, 0.1), transparent 48%), rgba(14, 17, 20, 0.94) !important;
  box-shadow: 0 20px 52px rgba(0, 0, 0, 0.43) !important;
}

.vexion-product-card::before {
  border-radius: inherit !important;
  background: linear-gradient(125deg, rgba(244, 208, 112, 0.85), transparent 30%, rgba(127, 37, 142, 0.32) 55%, rgba(215, 47, 198, 0.72)) !important;
}

.vexion-product-card__header {
  padding: 1rem 1rem 0.82rem !important;
  border-bottom-color: rgba(227, 172, 53, 0.2) !important;
  background: linear-gradient(180deg, rgba(244, 208, 112, 0.08), transparent) !important;
}

.vexion-product-card__eyebrow { color: #e3ac35 !important; }
.vexion-product-card__header h3 { color: #f6f1e5 !important; text-shadow: none !important; }

.vexion-product-card__image {
  margin-bottom: 0 !important;
  padding: 0.7rem !important;
  border-bottom-color: rgba(227, 172, 53, 0.16) !important;
  background: radial-gradient(circle at 50% 15%, rgba(227, 172, 53, 0.13), transparent 56%), rgba(0, 0, 0, 0.22) !important;
}

.vexion-product-card__image img {
  border-color: rgba(227, 172, 53, 0.22) !important;
  border-radius: 0.7rem !important;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.34) !important;
}

.vexion-product-card__body { gap: 0.95rem !important; padding-top: 1rem !important; }
.vexion-product-card__price .text-accent-500 { color: #f4d070 !important; }
.vexion-product-card__stock { border-color: rgba(227, 172, 53, 0.32) !important; background: rgba(227, 172, 53, 0.08) !important; color: #f6f1e5 !important; }

.vexion-product-card__cta {
  min-height: 2.75rem !important;
  border-color: rgba(227, 172, 53, 0.62) !important;
  border-radius: 0.65rem !important;
  background: rgba(227, 172, 53, 0.08) !important;
  color: #f6f1e5 !important;
}

.vexion-product-card:hover .vexion-product-card__cta {
  background: linear-gradient(135deg, #f4d070, #e3ac35 52%, #d72fc6) !important;
  color: #0b0b0c !important;
}

/* Gold buttons, dividers, highlights, and the page banner. */
.component [class*="border-accent-500"], a[class*="border-accent-500"], button[class*="border-accent-500"] { border-color: rgba(227, 172, 53, 0.65) !important; }
.component [class*="bg-accent-500"], a[class*="bg-accent-500"], button[class*="bg-accent-500"] { background: linear-gradient(135deg, #f4d070, #e3ac35 55%, #d72fc6) !important; color: #0b0b0c !important; }
.component hr.border-accent-500 { border-color: #e3ac35 !important; }
.component .container > .flex-col::before { content: "WARZONE RANKED CENTRAL // TOP 250 SERVICES" !important; color: #f4d070 !important; border-color: rgba(227, 172, 53, 0.34) !important; background: rgba(227, 172, 53, 0.09) !important; }