/* Separate comparison variant; marketplace.css and the coral homepage stay intact. */
.market-header {
  background: #151515;
  color: #eee;
  border-bottom-color: #151515;
}

.location { color: #bdbdbd; }
.location small { color: #f5f5f5; }
.main-nav > a, .categories-toggle { opacity: 1; color: #d2d2d2; }
.account-nav { color: #e2e2e2; }
.main-nav > a:hover, .categories-toggle:hover,
.account-nav > a:hover, .account-nav > button:hover,
.location:hover, .location:hover small { color: #f18d87; }
.market-header a:focus-visible,
.market-header button:focus-visible { outline-color: #f18d87; }
.main-search input:focus-visible { outline-color: #ce4d49; }
.category-menu { color: #fff; }
.category-menu a:hover { color: #fff; }

.hero-carousel, .hero-slide { background: #151515; }
/* Matching top edge on every campaign, including the existing machine artwork. */
.hero-slide::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 110px;
  background: linear-gradient(#151515, #15151500);
  z-index: 1;
  pointer-events: none;
}
.hero-inner, .care-banner .hero-inner { color: #fff; }
.banner-subtitle, .dark-banner .banner-subtitle,
.care-banner .banner-subtitle { color: #dedede; }
.banner-cta, .care-banner .banner-cta {
  background: #fff;
  color: #9b2e2b;
}
.care-promo { background: #151515; }
.care-promo > div { color: #fff; }

/* Keep the complete Originals packaging in view on wide screens. */
.care-banner .hero-banner { object-fit: contain; }

@media (min-width: 1200px) {
  .care-banner .hero-banner {
    left: 50%;
    width: auto;
    max-width: none;
    transform: translateX(-50%);
    mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  }
}

@media (max-width: 600px) {
  .hero-slide::before { height: 70px; }
  .care-banner .hero-banner {
    inset: auto 0 38px auto;
    width: 130%;
    max-width: none;
    height: auto;
    mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
  }
}