/* Product artwork sits below the lower edge of its own display frame.
   Keep framing independent from theme backgrounds and editor element keys. */
.hero-gallery .slide-shot > .shot-frame {
  position: absolute;
  left: 6%;
  top: 9%;
  width: 88%;
  height: auto;
  max-width: none;
  margin: 0;
  border-radius: 12px 12px 0 0;
}
.hero-gallery .slide-shot > .shot-frame > img {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
}

/* Single desktop screenshots: preserve their aspect ratio and top-level UI. */
.home-rec-stage,
#rec-modules .rec-module-stage {
  position: relative;
}
.home-rec-stage > img:not(.membership-composite-image),
#rec-modules .rec-module-stage > img:not(.membership-composite-image) {
  position: absolute;
  left: 50%;
  top: 10%;
  width: 96%;
  height: auto;
  min-width: 0;
  min-height: 0;
  max-width: none;
  max-height: none;
  margin: 0;
  transform: translateX(-50%);
  object-fit: contain;
  object-position: center top;
  border-radius: 12px 12px 0 0;
}

/* Membership retains its original framing in membership-showcase.css. */

@media (max-width: 600px) {
  /* A wider mobile frame keeps the important UI readable without excessive
     horizontal cropping or empty space beneath a landscape screenshot. */
  .home-rec-stage:not(.membership-composite-stage),
  #rec-modules .rec-module-stage:not(.membership-composite-stage):has(> img) {
    height: auto;
    aspect-ratio: 1.65;
    padding: 0;
  }
  .home-rec-stage > img:not(.membership-composite-image),
  #rec-modules .rec-module-stage > img:not(.membership-composite-image) {
    top: 9%;
    width: 118%;
    border-radius: 8px 8px 0 0;
  }
  .hero-gallery .slide-shot > .shot-frame {
    left: 50%;
    top: 10%;
    width: 132%;
    transform: translateX(-50%);
    border-radius: 8px 8px 0 0;
  }
}