/* Got Hot Wheels Auctions - Listing Detail Background v21
   Focused only on /listings/{id}
   - footer forced clean black
   - middle listing content uses the supplied dark carbon texture
*/

body.ghw21-listing-detail {
  background: #000 !important;
}

/* Keep header alone. The design image starts under the header/nav area. */
body.ghw21-listing-detail main,
body.ghw21-listing-detail .ghw21-listing-middle,
body.ghw21-listing-detail .ghw-listing-page,
body.ghw21-listing-detail .ghw-detail-page,
body.ghw21-listing-detail .listing-detail-page,
body.ghw21-listing-detail .listing-show-page,
body.ghw21-listing-detail .ghw-content-page,
body.ghw21-listing-detail .ghw-page {
  background:
    linear-gradient(180deg, rgba(0,0,0,.62), rgba(0,0,0,.82)),
    url('/images/ghw-textures/ghw-listing-carbon-bg.png') center top / cover repeat-y !important;
}

/* If older patches put a different design on wrappers, neutralize that and let v21 win. */
body.ghw21-listing-detail .ghw20-listing-middle-panel,
body.ghw21-listing-detail .ghw21-listing-middle-candidate {
  background-color: transparent !important;
}

/* Give the detail area a little breathing room while preserving the theme. */
body.ghw21-listing-detail main,
body.ghw21-listing-detail .ghw21-listing-middle {
  min-height: 520px !important;
  padding-top: 28px !important;
  padding-bottom: 34px !important;
}

/* Cards/panels should stay readable on the textured middle background. */
body.ghw21-listing-detail .ghw-card,
body.ghw21-listing-detail .card,
body.ghw21-listing-detail .panel,
body.ghw21-listing-detail .ghw-panel,
body.ghw21-listing-detail .ghw-detail-card,
body.ghw21-listing-detail .ghw-listing-card,
body.ghw21-listing-detail .ghw-bid-card,
body.ghw21-listing-detail .ghw-checkout-card {
  background: linear-gradient(180deg, rgba(8,10,13,.96), rgba(2,3,5,.98)) !important;
  border-color: rgba(255,255,255,.11) !important;
  box-shadow: 0 14px 30px rgba(0,0,0,.32) !important;
}

/* Footer must be plain black on the listing page. */
body.ghw21-listing-detail footer,
body.ghw21-listing-detail .ghw21-black-footer,
body.ghw21-listing-detail .ghw-footer,
body.ghw21-listing-detail .site-footer,
body.ghw21-listing-detail .ghw5-footer,
body.ghw21-listing-detail .ghw20-footer {
  background: #000 !important;
  background-image: none !important;
  border-top: 1px solid rgba(255,255,255,.12) !important;
  box-shadow: none !important;
}

/* Tighter footer only on listing detail pages. */
body.ghw21-listing-detail footer,
body.ghw21-listing-detail .ghw-footer,
body.ghw21-listing-detail .site-footer,
body.ghw21-listing-detail .ghw5-footer {
  padding-top: 18px !important;
  padding-bottom: 8px !important;
}

body.ghw21-listing-detail footer .container,
body.ghw21-listing-detail footer .ghw-wrap,
body.ghw21-listing-detail .ghw-footer .container,
body.ghw21-listing-detail .site-footer .container,
body.ghw21-listing-detail .ghw5-footer .container {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

body.ghw21-listing-detail footer h3,
body.ghw21-listing-detail footer h4,
body.ghw21-listing-detail .ghw-footer h3,
body.ghw21-listing-detail .ghw-footer h4,
body.ghw21-listing-detail .site-footer h3,
body.ghw21-listing-detail .site-footer h4 {
  margin-bottom: 9px !important;
}

body.ghw21-listing-detail footer p,
body.ghw21-listing-detail footer li,
body.ghw21-listing-detail .ghw-footer p,
body.ghw21-listing-detail .ghw-footer li,
body.ghw21-listing-detail .site-footer p,
body.ghw21-listing-detail .site-footer li {
  margin-bottom: 5px !important;
}

body.ghw21-listing-detail footer form,
body.ghw21-listing-detail .ghw-footer form,
body.ghw21-listing-detail .site-footer form {
  margin-bottom: 7px !important;
}

body.ghw21-listing-detail footer .copyright,
body.ghw21-listing-detail footer .footer-bottom,
body.ghw21-listing-detail .ghw-footer .copyright,
body.ghw21-listing-detail .ghw-footer .footer-bottom,
body.ghw21-listing-detail .site-footer .copyright,
body.ghw21-listing-detail .site-footer .footer-bottom {
  margin-top: 9px !important;
  padding-top: 9px !important;
  border-top: 1px solid rgba(255,255,255,.09) !important;
}

@media (max-width: 800px) {
  body.ghw21-listing-detail main,
  body.ghw21-listing-detail .ghw21-listing-middle {
    padding-top: 18px !important;
    padding-bottom: 24px !important;
  }
}