/* Got Hot Wheels Auctions - v40
   Fixes:
   1) Removes/overrides the v39 disappearing-page behavior.
   2) Makes /help, /sell, /about, /contact use the same stable top style as Ending Soon/New Listings.
   3) Fixes dashboard "Welcome Back, Name" readability/clipping.
*/

/* ---------- stop old hidden classes from blanking pages ---------- */
html body.ghw40-static-page .ghw38-old-page-hero-hidden,
html body.ghw40-static-page .ghw39-hide-old-hero,
html body.ghw40-static-page .ghw39-hide-plain-duplicate {
  display: revert !important;
  visibility: visible !important;
  height: auto !important;
  min-height: revert !important;
  max-height: none !important;
  margin: revert !important;
  padding: revert !important;
  overflow: visible !important;
  opacity: 1 !important;
}

/* Hide only the JS-injected v38/v39 replacement heroes.
   The original page content stays visible. */
html body.ghw40-static-page [data-ghw38="page-hero"],
html body.ghw40-static-page [data-ghw39="page-hero"],
html body.ghw40-static-page .ghw38-page-hero,
html body.ghw40-static-page .ghw39-page-hero {
  display: none !important;
}

/* ---------- shared page background ---------- */
html body.ghw40-static-page {
  background:
    radial-gradient(circle at 22% 12%, rgba(255, 157, 0, .04), transparent 30rem),
    radial-gradient(circle at 78% 18%, rgba(237, 17, 28, .045), transparent 34rem),
    linear-gradient(180deg, #000 0%, #030303 100%) !important;
  background-color: #000 !important;
}

/* ---------- stable hero styling for original Help/Sell/About/Contact hero ---------- */
html body.ghw40-static-page .ghw40-stable-hero {
  display: block !important;
  visibility: visible !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  border-bottom: 1px solid rgba(255, 157, 0, .24) !important;
  background:
    radial-gradient(circle at 18% 8%, rgba(255, 157, 0, .07), transparent 31rem),
    radial-gradient(circle at 82% 14%, rgba(237, 17, 28, .055), transparent 33rem),
    linear-gradient(180deg, #07090d 0%, #05070b 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    inset 0 -1px 0 rgba(255, 157, 0, .10) !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

/* If the hero is trapped in a centered page container, pull it full width. */
html body.ghw40-static-page .ghw40-stable-hero.ghw40-fullbleed {
  width: 100vw !important;
  max-width: none !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
}

html body.ghw40-static-page .ghw40-stable-hero::before,
html body.ghw40-static-page .ghw40-stable-hero::after {
  content: none !important;
  display: none !important;
}

/* Flatten the nested boxes that v37/v38 created on Help/Sell. */
html body.ghw40-static-page .ghw40-stable-hero > *,
html body.ghw40-static-page .ghw40-stable-hero .ghw37-market-hero,
html body.ghw40-static-page .ghw40-stable-hero .ghw32-help-hero,
html body.ghw40-static-page .ghw40-stable-hero .ghw32-help-hero-wrap {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

html body.ghw40-static-page .ghw40-stable-hero-inner {
  max-width: 1180px !important;
  margin: 0 auto !important;
  padding: 26px 18px 28px !important;
  box-sizing: border-box !important;
}

/* In case JS can't safely wrap children, style any direct child area like the inner. */
html body.ghw40-static-page .ghw40-stable-hero:not(:has(.ghw40-stable-hero-inner)) {
  padding: 26px max(18px, calc((100vw - 1180px) / 2)) 28px !important;
}

/* Kicker/pill */
html body.ghw40-static-page .ghw40-stable-hero :where(.badge, .pill, [class*="badge" i], [class*="pill" i], .ghw-page-kicker, .ghw-kicker, .ghw38-page-kicker, .ghw39-page-kicker),
html body.ghw40-static-page .ghw40-kicker {
  display: inline-flex !important;
  align-items: center !important;
  width: fit-content !important;
  margin: 0 0 14px !important;
  padding: 7px 15px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(237, 17, 28, .72) !important;
  background: rgba(95, 0, 10, .52) !important;
  color: #ffd45a !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  box-shadow: none !important;
}

/* Page title */
html body.ghw40-static-page .ghw40-stable-hero h1,
html body.ghw40-static-page .ghw40-stable-hero h2:first-of-type {
  display: block !important;
  margin: 0 0 8px !important;
  color: #fff !important;
  background: none !important;
  -webkit-text-fill-color: #fff !important;
  font-size: clamp(44px, 5.2vw, 62px) !important;
  font-weight: 1000 !important;
  font-style: italic !important;
  line-height: .92 !important;
  letter-spacing: .035em !important;
  text-transform: uppercase !important;
  text-shadow:
    0 4px 0 #001a35,
    0 0 18px rgba(0,0,0,.90) !important;
}

/* Description text */
html body.ghw40-static-page .ghw40-stable-hero p {
  max-width: 820px !important;
  margin: 0 0 12px !important;
  color: rgba(255,255,255,.94) !important;
  font-size: 17px !important;
  line-height: 1.45 !important;
  text-shadow: 0 2px 10px rgba(0,0,0,.88) !important;
}

/* Buttons inside hero */
html body.ghw40-static-page .ghw40-stable-hero .ghw40-actions {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin-top: 10px !important;
}

html body.ghw40-static-page .ghw40-stable-hero .ghw40-actions a,
html body.ghw40-static-page .ghw40-stable-hero a.ghw40-action {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 40px !important;
  padding: 0 17px !important;
  border-radius: 6px !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  background: rgba(6, 9, 14, .88) !important;
  color: #fff !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  letter-spacing: .025em !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04) !important;
}

html body.ghw40-static-page .ghw40-stable-hero .ghw40-actions a:hover,
html body.ghw40-static-page .ghw40-stable-hero .ghw40-actions a.ghw40-active {
  color: #ffd45a !important;
  border-color: rgba(255, 157, 0, .90) !important;
  background: rgba(12, 12, 13, .94) !important;
}

/* ---------- keep normal page content visible and aligned ---------- */
html body.ghw40-static-page main {
  background:
    radial-gradient(circle at 34% 12%, rgba(237,17,28,.035), transparent 32rem),
    linear-gradient(180deg, rgba(0,0,0,.78), rgba(0,0,0,.92)) !important;
}

html body.ghw40-static-page .ghw40-stable-hero + * {
  margin-top: 24px !important;
}

/* ---------- dashboard name fix ---------- */
html body.ghw40-dashboard-page h1,
html body.ghw40-dashboard-page h1 *,
html body.ghw40-dashboard-page .ghw-dashboard-hero h1,
html body.ghw40-dashboard-page .ghw-dashboard-hero h1 *,
html body.ghw40-dashboard-page [class*="dashboard" i] h1,
html body.ghw40-dashboard-page [class*="dashboard" i] h1 * {
  color: #fff !important;
  background: none !important;
  background-image: none !important;
  -webkit-text-fill-color: #fff !important;
  text-fill-color: #fff !important;
  opacity: 1 !important;
  overflow: visible !important;
  max-height: none !important;
  line-height: .98 !important;
  padding-bottom: .12em !important;
  text-shadow:
    0 4px 0 #001a35,
    0 0 18px rgba(0,0,0,.92),
    0 0 18px rgba(255,0,0,.20) !important;
}

/* If old CSS used clipping/masks for gradient titles, disable them on dashboard. */
html body.ghw40-dashboard-page h1 {
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  clip-path: none !important;
  mask-image: none !important;
  -webkit-mask-image: none !important;
}

/* Dashboard account card name. */
html body.ghw40-dashboard-page :where(.account-card, .profile-card, [class*="account" i], [class*="profile" i]) :where(h2,h3,strong,.name,[class*="name" i]) {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  opacity: 1 !important;
}

/* Mobile */
@media (max-width: 800px) {
  html body.ghw40-static-page .ghw40-stable-hero-inner,
  html body.ghw40-static-page .ghw40-stable-hero:not(:has(.ghw40-stable-hero-inner)) {
    padding: 22px 16px 24px !important;
  }

  html body.ghw40-static-page .ghw40-stable-hero h1,
  html body.ghw40-static-page .ghw40-stable-hero h2:first-of-type {
    font-size: clamp(36px, 12vw, 52px) !important;
  }

  html body.ghw40-static-page .ghw40-stable-hero p {
    font-size: 15px !important;
  }

  html body.ghw40-static-page .ghw40-stable-hero .ghw40-actions {
    gap: 8px !important;
  }

  html body.ghw40-static-page .ghw40-stable-hero .ghw40-actions a {
    min-height: 38px !important;
    padding: 0 12px !important;
    font-size: 12px !important;
  }
}