/* Got Hot Wheels Auctions - UI Cleanup v37
   Fixes:
   1) Homepage Browse Categories texture: removes black/title overlay look and fixes seams/extra overlays.
   2) Homepage hero buttons: removes broken little square icon and restores clean arrow.
   3) Help and Sell top hero sections: makes them match the Ending Soon/New Listings dark marketplace theme.
*/

/* =========================================================
   HOMEPAGE BROWSE CATEGORIES
   Uses v18 selectors plus JS class.
   ========================================================= */

html body.ghw37-home .ghw37-cats-band,
html body .ghw-category-section,
html body .ghw-categories,
html body .ghw-categories-section,
html body .categories-section,
html body #categories {
  position: relative !important;
  overflow: hidden !important;
  background-color: #050505 !important;
  background-image:
    linear-gradient(180deg, rgba(0,0,0,.06), rgba(0,0,0,.15)),
    url('/images/ghw-textures/ghw-categories-metal-v37.png') !important;
  background-repeat: no-repeat, no-repeat !important;
  background-position: center center, center center !important;
  background-size: 100% 100%, 100% 100% !important;
  background-attachment: scroll, scroll !important;
  border-top: 1px solid rgba(255, 157, 0, .26) !important;
  border-bottom: 1px solid rgba(255,255,255,.10) !important;
  box-shadow:
    inset 0 16px 34px rgba(0,0,0,.28),
    inset 0 -16px 34px rgba(0,0,0,.30) !important;
}

/* Remove pseudo overlays from the Browse Categories band only. */
html body.ghw37-home .ghw37-cats-band::before,
html body.ghw37-home .ghw37-cats-band::after,
html body .ghw-category-section::before,
html body .ghw-category-section::after,
html body .ghw-categories::before,
html body .ghw-categories::after,
html body .ghw-categories-section::before,
html body .ghw-categories-section::after,
html body .categories-section::before,
html body .categories-section::after,
html body #categories::before,
html body #categories::after {
  content: none !important;
  display: none !important;
  background: none !important;
  background-image: none !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* Flatten the title wrapper so the giant black rectangle is gone. */
html body.ghw37-home .ghw37-cats-heading-shell,
html body.ghw37-home .ghw37-cats-band .ghw37-cats-heading-shell,
html body.ghw37-home .ghw37-cats-band :where(.section-title, .section-heading, .ghw-section-title, .ghw-section-heading, .ghw-title, .ghw-heading),
html body .ghw-category-section :where(.section-title, .section-heading, .ghw-section-title, .ghw-section-heading, .ghw-title, .ghw-heading),
html body .ghw-categories :where(.section-title, .section-heading, .ghw-section-title, .ghw-section-heading, .ghw-title, .ghw-heading),
html body .ghw-categories-section :where(.section-title, .section-heading, .ghw-section-title, .ghw-section-heading, .ghw-title, .ghw-heading),
html body .categories-section :where(.section-title, .section-heading, .ghw-section-title, .ghw-section-heading, .ghw-title, .ghw-heading),
html body #categories :where(.section-title, .section-heading, .ghw-section-title, .ghw-section-heading, .ghw-title, .ghw-heading) {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Remove extra inner borders/seams that looked like overlays. */
html body.ghw37-home .ghw37-cats-band > *,
html body .ghw-category-section > *,
html body .ghw-categories > *,
html body .ghw-categories-section > *,
html body .categories-section > *,
html body #categories > * {
  position: relative !important;
  z-index: 2 !important;
  border-left-color: transparent !important;
  border-right-color: transparent !important;
}

html body.ghw37-home .ghw37-cats-band :where(h1,h2,h3),
html body .ghw-category-section :where(h1,h2,h3),
html body .ghw-categories :where(h1,h2,h3),
html body .ghw-categories-section :where(h1,h2,h3),
html body .categories-section :where(h1,h2,h3),
html body #categories :where(h1,h2,h3) {
  background: transparent !important;
  color: #fff !important;
  text-shadow:
    0 3px 0 #001a35,
    0 0 12px rgba(0,0,0,1),
    0 0 24px rgba(0,0,0,.85) !important;
}

/* Keep the category labels readable over the metal art. */
html body.ghw37-home .ghw37-cats-band a,
html body.ghw37-home .ghw37-cats-band span,
html body.ghw37-home .ghw37-cats-band strong,
html body .ghw-category-section a,
html body .ghw-categories a,
html body .ghw-categories-section a,
html body .categories-section a,
html body #categories a {
  text-shadow:
    0 2px 0 #001a35,
    0 0 10px rgba(0,0,0,.95),
    0 0 18px rgba(0,0,0,.85) !important;
}

/* =========================================================
   HOMEPAGE HERO BUTTON FIX
   ========================================================= */

html body.ghw37-home .ghw37-hero-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  min-height: 54px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

html body.ghw37-home .ghw37-hero-button svg,
html body.ghw37-home .ghw37-hero-button i,
html body.ghw37-home .ghw37-hero-button img,
html body.ghw37-home .ghw37-hero-button .icon,
html body.ghw37-home .ghw37-hero-button [class*="icon" i] {
  display: none !important;
}

html body.ghw37-home .ghw37-hero-button .ghw37-btn-arrow {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  font-size: 31px !important;
  font-weight: 900 !important;
  line-height: .7 !important;
  transform: translateY(-1px) !important;
  color: #fff !important;
  text-shadow: 0 0 12px rgba(255,255,255,.32) !important;
}

html body.ghw37-home .ghw37-hero-sell .ghw37-btn-arrow {
  color: #ffb21a !important;
}

/* =========================================================
   HELP + SELL HERO TOP SECTIONS
   Make them follow Ending Soon/New Listings page theme.
   ========================================================= */

html body.ghw37-help-page,
html body.ghw37-sell-page {
  background:
    radial-gradient(circle at 24% 2%, rgba(255, 157, 0, .07), transparent 32rem),
    radial-gradient(circle at 76% 18%, rgba(237, 17, 28, .06), transparent 34rem),
    linear-gradient(rgba(0,0,0,.84), rgba(0,0,0,.94)) !important;
  background-color: #000 !important;
}

/* This class is added by JS to the top page hero/card. */
html body.ghw37-help-page .ghw37-market-hero,
html body.ghw37-sell-page .ghw37-market-hero,
html body.ghw37-help-page .ghw32-help-hero,
html body.ghw37-help-page .ghw32-help-hero-wrap {
  max-width: 1180px !important;
  margin: 26px auto 24px !important;
  padding: 30px 32px !important;
  border-radius: 0 !important;
  border: 1px solid rgba(255, 157, 0, .24) !important;
  background:
    radial-gradient(circle at 10% 5%, rgba(255,157,0,.11), transparent 22rem),
    radial-gradient(circle at 88% 18%, rgba(237,17,28,.12), transparent 28rem),
    linear-gradient(180deg, rgba(6,8,13,.96), rgba(4,4,6,.97)) !important;
  background-image:
    radial-gradient(circle at 10% 5%, rgba(255,157,0,.11), transparent 22rem),
    radial-gradient(circle at 88% 18%, rgba(237,17,28,.12), transparent 28rem),
    linear-gradient(180deg, rgba(6,8,13,.96), rgba(4,4,6,.97)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 20px 55px rgba(0,0,0,.34) !important;
}

/* Stop older Help v32 red banner from bleeding through. */
html body.ghw37-help-page .ghw32-help-hero::before,
html body.ghw37-help-page .ghw32-help-hero::after,
html body.ghw37-help-page .ghw32-help-hero-wrap::before,
html body.ghw37-help-page .ghw32-help-hero-wrap::after,
html body.ghw37-help-page .ghw37-market-hero::before,
html body.ghw37-help-page .ghw37-market-hero::after,
html body.ghw37-sell-page .ghw37-market-hero::before,
html body.ghw37-sell-page .ghw37-market-hero::after {
  content: none !important;
  display: none !important;
  background: none !important;
  box-shadow: none !important;
}

/* Marketplace badge style */
html body.ghw37-help-page .ghw37-market-hero :where(.badge, .pill, [class*="badge" i], [class*="pill" i]),
html body.ghw37-sell-page .ghw37-market-hero :where(.badge, .pill, [class*="badge" i], [class*="pill" i]),
html body.ghw37-help-page .ghw32-help-hero :where(.badge, .pill, [class*="badge" i], [class*="pill" i]) {
  display: inline-flex !important;
  align-items: center !important;
  width: fit-content !important;
  border-radius: 999px !important;
  background: rgba(95, 0, 10, .55) !important;
  color: #ffd45a !important;
  border: 1px solid rgba(237,17,28,.72) !important;
  padding: 7px 15px !important;
  font-size: 12px !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  box-shadow: none !important;
}

/* Ending Soon/New Listings style title. */
html body.ghw37-help-page .ghw37-market-hero :where(h1,h2),
html body.ghw37-sell-page .ghw37-market-hero :where(h1,h2),
html body.ghw37-help-page .ghw32-help-hero :where(h1,h2),
html body.ghw37-help-page .ghw32-help-hero-wrap :where(h1,h2) {
  margin: 10px 0 8px !important;
  color: #fff !important;
  font-size: clamp(42px, 5vw, 70px) !important;
  line-height: .92 !important;
  letter-spacing: .035em !important;
  text-shadow:
    0 4px 0 #001a35,
    0 0 18px rgba(0,0,0,.88) !important;
}

html body.ghw37-help-page .ghw37-market-hero p,
html body.ghw37-sell-page .ghw37-market-hero p,
html body.ghw37-help-page .ghw32-help-hero p,
html body.ghw37-help-page .ghw32-help-hero-wrap p {
  color: rgba(255,255,255,.94) !important;
  font-size: 17px !important;
  line-height: 1.45 !important;
  max-width: 820px !important;
  margin-bottom: 0 !important;
}

/* Remove the extra right side box look on Sell hero if present. */
html body.ghw37-sell-page .ghw37-market-hero :where(.ghw-card, .card, .panel, [class*="card" i], [class*="panel" i]) {
  background: rgba(3,5,9,.52) !important;
  border-color: rgba(255,157,0,.28) !important;
  box-shadow: none !important;
}

/* Buttons in those heroes match the marketplace buttons. */
html body.ghw37-help-page .ghw37-market-hero a,
html body.ghw37-sell-page .ghw37-market-hero a,
html body.ghw37-help-page .ghw32-help-hero a {
  text-decoration: none !important;
}

/* =========================================================
   MOBILE SAFETY
   ========================================================= */

@media (max-width: 800px) {
  html body.ghw37-home .ghw37-cats-band,
  html body .ghw-category-section,
  html body .ghw-categories,
  html body .ghw-categories-section,
  html body .categories-section,
  html body #categories {
    background-size: auto, auto !important;
    background-repeat: repeat, repeat !important;
  }

  html body.ghw37-help-page .ghw37-market-hero,
  html body.ghw37-sell-page .ghw37-market-hero,
  html body.ghw37-help-page .ghw32-help-hero,
  html body.ghw37-help-page .ghw32-help-hero-wrap {
    margin: 18px 14px !important;
    padding: 24px 20px !important;
  }
}