/* The original price remains the fallback until the Smoke paint is ready. */
.hero-artwork {
  position: relative;
  z-index: 1;
  width: min(100%, calc(59.8vh - 38.3px));
  width: min(100%, calc(59.8svh - 38.3px));
  place-self: start center;
}

.hero-artwork > img {
  width: 100%;
}

.hero-price-sheen {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: none;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.hero-price-flow-ready .hero-price-sheen {
  display: block;
}

.hero-price-flow {
  background-repeat: no-repeat;
  background-size: var(--hero-flow-size, 100% 100%);
  background-position: var(--hero-flow-position, 0 0);
}

.hero-price-paint {
  width: 100%;
  height: 100%;
  background-image: var(--hero-flow-gradient);
}

@media screen and (min-width: 64rem) {
  .hero-artwork {
    display: none;
  }

  @supports ((background-clip: text) or (-webkit-background-clip: text)) {
    .hero-heading-price .hero-price-ink {
      /* The existing tight tracking lets the last glyph overhang its box. */
      padding-right: .12em;
      margin-right: -.12em;
    }

    .hero-price-flow-ready .hero-heading-price .hero-price-ink {
      background-image: var(--hero-flow-gradient);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }
  }
}

@media (prefers-reduced-motion: reduce), (forced-colors: active) {
  .hero-price-flow-ready .hero-price-sheen {
    display: none;
  }

  .hero-price-flow,
  .hero-price-flow-ready .hero-heading-price .hero-price-ink {
    background: none;
    color: inherit;
  }
}