/* This file is loaded only for /shop. Category intros keep their existing styles. */
.shop-intro--editorial {
  position: relative;
  isolation: isolate;
  height: 600px;
  padding-bottom: 0;
  overflow: hidden;
}
.shop-intro--editorial .shop-intro__visual,
.shop-intro--editorial .shop-intro__photo,
.shop-intro--editorial .shop-intro__pixels {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.shop-intro--editorial .shop-intro__visual {
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.shop-intro--editorial .shop-intro__photo {
  object-fit: cover;
  object-position: var(--focal-desktop);
  transform-origin: var(--focal-desktop);
}
.shop-intro--editorial[data-phase="dwell"] .shop-intro__photo {
  will-change: transform;
}
.shop-intro--editorial .shop-intro__pixels {
  opacity: 0;
}
.shop-intro--editorial[data-phase="transition"] .shop-intro__pixels,
.shop-intro--editorial[data-phase="settling"] .shop-intro__pixels {
  opacity: 1;
}
.shop-intro--editorial::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    rgba(235, 245, 250, 0.96) 0%,
    rgba(235, 245, 250, 0.87) 30%,
    rgba(235, 245, 250, 0.38) 55%,
    rgba(235, 245, 250, 0.05) 76%
  );
}
.shop-intro--editorial .shop-intro__content {
  position: relative;
  z-index: 2;
  height: 100%;
}
.shop-intro--editorial .eyebrow {
  margin-top: 94px;
}
.shop-intro--editorial h1,
.shop-intro--editorial p {
  max-width: 610px;
}
@media (max-width: 1050px) and (min-width: 761px) {
  .shop-intro--editorial {
    height: 570px;
  }
}
@media (max-width: 760px) {
  .shop-intro--editorial {
    height: 580px;
  }
  .shop-intro--editorial .shop-intro__visual {
    height: 80%;
  }
  .shop-intro--editorial .shop-intro__photo {
    object-position: var(--focal-mobile);
    transform-origin: var(--focal-mobile);
  }
  .shop-intro--editorial::after {
    background:
      linear-gradient(180deg, rgba(235, 245, 250, .88), transparent 15%),
      linear-gradient(
        0deg,
        rgba(235, 245, 250, 0.99) 0%,
        rgba(235, 245, 250, 0.97) 30%,
        rgba(235, 245, 250, 0.7) 56%,
        rgba(235, 245, 250, 0.08) 89%
      ),
      linear-gradient(90deg, rgba(235, 245, 250, 0.48), transparent 85%);
  }
  .shop-intro--editorial .eyebrow {
    margin-top: 182px;
  }
  .shop-intro--editorial p {
    max-width: 335px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .shop-intro--editorial .shop-intro__photo {
    transform: none !important;
    will-change: auto;
  }
  .shop-intro--editorial .shop-intro__pixels {
    display: none;
  }
}