.loom-catalog-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: center;
  min-height: clamp(29rem, 68svh, 45rem);
  overflow: hidden;
  border-radius: 0 0 clamp(1.75rem, 3vw, 2.5rem) clamp(1.75rem, 3vw, 2.5rem);
  background: radial-gradient(ellipse at 17% 35%, #23535c 0%, #102f39 45%, #0a2029 85%);
  color: #fff;
}

.loom-catalog-hero-art {
  position: absolute;
  z-index: -1;
  inset: 0 auto 0 0;
  width: 62%;
  overflow: hidden;
  pointer-events: none;
}

.loom-catalog-hero-art img {
  position: absolute;
  top: 50%;
  left: 39%;
  width: auto;
  max-width: none;
  height: 101%;
  transform: translate(-72%, -50%);
  mask-image: linear-gradient(90deg, transparent 20%, #000 31% 96%, transparent);
}

.loom-catalog-hero-copy {
  width: min(43%, 40rem);
  margin-inline-start: 54%;
  padding: 5rem clamp(1.5rem, 4vw, 4rem) 3.5rem 0;
}

.loom-catalog-hero-eyebrow {
  color: #b5dbe1;
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .28em;
  text-transform: uppercase;
}

.loom-catalog-hero h1 {
  margin-top: .9rem;
  font-size: clamp(3rem, 5.2vw, 5rem);
  font-weight: 500;
  line-height: .96;
  letter-spacing: -.06em;
}

.loom-catalog-hero-description {
  max-width: 31rem;
  margin-top: 1.25rem;
  color: #dfebed;
  font-size: clamp(.98rem, 1.4vw, 1.15rem);
  line-height: 1.6;
}

html header[data-preview-header="shop"]:not([data-preview-scrolled]) > div {
  color: #fff;
  text-shadow: 0 1px 8px rgb(0 0 0 / 35%);
}

html header[data-preview-header="shop"]:not([data-preview-scrolled]) a:last-child[href="/shop/"] {
  border-color: rgb(255 255 255 / 50%);
}

.loom-catalog-card-media::after {
  position: absolute;
  z-index: 2;
  right: .65rem;
  bottom: .65rem;
  display: grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border: 1px solid rgb(10 32 41 / 16%);
  border-radius: 50%;
  background: #fff;
  color: #0a2029;
  font-size: 1.15rem;
  line-height: 1;
  content: '→';
  content: '→' / '';
  pointer-events: none;
}

.loom-catalog-card-media img {
  pointer-events: none;
}

.loom-catalog-card-media:focus-visible {
  outline: 3px solid #278396;
  outline-offset: -3px;
}

.loom-catalog-card-media:is(:hover, :focus-visible)::after {
  border-color: #0a2029;
  background: #0a2029;
  color: #fff;
}

@media (max-width: 639px) {
  html header[data-preview-header="shop"] a:last-child[href="/shop/"] {
    padding-inline: .9rem;
    white-space: nowrap;
  }

  .loom-catalog-hero {
    align-items: end;
    min-height: clamp(32rem, 74svh, 40rem);
  }

  .loom-catalog-hero-art {
    inset: 2.4rem 0 auto;
    width: 100%;
    height: 65%;
    mask-image: linear-gradient(#000 75%, transparent 100%);
  }

  .loom-catalog-hero-art img {
    left: 50%;
    height: 100%;
    transform: translate(-75%, -50%);
  }

  .loom-catalog-hero-copy {
    width: 100%;
    margin: 0;
    padding: 0 1.5rem 2rem;
  }

  .loom-catalog-hero h1 {
    margin-top: .65rem;
    font-size: clamp(2.6rem, 10vw, 4rem);
  }

  .loom-catalog-hero-description {
    margin-top: .8rem;
    font-size: .96rem;
  }
}