/* Premium visual layer for the Marketplace Navigator. It affects this route only. */
.marketplace-page {
  background:
    radial-gradient(circle at 8% 8%, #d9b76d20 0, transparent 25rem),
    #f3f7f6;
}

.marketplace-page .marketplace-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 405px;
  display: grid;
  align-content: center;
  background:
    linear-gradient(90deg, #041d2d 0%, #062438f2 39%, #062438a8 61%, #06243852 100%),
    url("/static/images/business/marketplace-hero-v1.png") center / cover no-repeat;
  box-shadow: 0 22px 46px #0d29372b;
}

.marketplace-page .marketplace-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: linear-gradient(125deg, #ffffff09 1px, transparent 1px), linear-gradient(35deg, #d9b76d14 1px, transparent 1px);
  background-size: 31px 31px, 47px 47px;
  mask-image: linear-gradient(90deg, #000 0%, #0008 50%, transparent 86%);
}

.marketplace-page .marketplace-hero .eyebrow {
  color: #f3d691;
  letter-spacing: .14em;
}

.marketplace-page .marketplace-hero h1 {
  max-width: 700px;
  text-shadow: 0 2px 20px #000b;
}

.marketplace-page .marketplace-hero > p:not(.eyebrow) { max-width: 650px; }

.marketplace-page .marketplace-actions .guide-button {
  border: 1px solid #f4d88f88;
  box-shadow: 0 10px 22px #0004;
}

.marketplace-page .marketplace-secondary {
  background: #ffffff12;
  backdrop-filter: blur(7px);
}

.marketplace-page .marketplace-grid article,
.marketplace-page .marketplace-safety {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

@media (hover: hover) {
  .marketplace-page .marketplace-grid article:hover {
    transform: translateY(-4px);
    border-color: #c8a75c;
    box-shadow: 0 19px 34px #1830441a;
  }
}

@media (max-width: 720px) {
  .marketplace-page .marketplace-hero {
    min-height: 0;
    background-position: 57% center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .marketplace-page .marketplace-grid article { transition: none; }
}
