/* Shop header scales as a single uncropped composition, including on phones. */
.shop-hero {
  --shop-unit: min(0.0520833333vw, 1px);
  height: auto;
  padding-top: calc(78 * var(--shop-unit));
}
.shop-header-image { width: 100%; height: auto; }
.shop-hero .hero-transition {
  /* PNG has ~60px transparent space before the torn edge.
     104px puts that visible edge ~44px above the bottom of the header. */
  top: calc(100% - 104 * var(--shop-unit));
  left: 0;
  width: 100%;
  transform: none;
}
/* Space for the decorative clown until shop content is ready. */
.shop-content { min-height: calc((var(--clown-y) + 1271 + 80) * var(--u)); }
@media (max-width: 700px) {
  .shop-hero { padding-top: 88px; }
  .shop-content { min-height: 900px; }
}