/* UI-only mockup bitmap replaces the illustrative HTML preview.
   Keep product-wrap / product-preview intact: hero-motion.js owns its entrance. */
.product.product-image {
  border: 0;
  background: transparent;
  overflow: visible;
}
.product.product-image > img {
  display: block;
  width: 100%;
  height: auto;
}
/* The source already includes its true application header on every viewport. */
.product-wrap .product.product-image::before {
  display: none;
  content: none;
}

/* Clip only the screenshot perimeter; the supplied application pixels,
   enclosing motion owner, labels and enlargement controls stay intact. */
:root { --product-screen-radius: 16px; }
.product-wrap .product.product-image {
  border-radius: var(--product-screen-radius);
  overflow: hidden;
}
.product-shot .screen-expand { border-radius: var(--product-screen-radius); }
.product-shot .screen-expand img {
  border-radius: calc(var(--product-screen-radius) - 1px);
}
.screen-dialog .dialog-image { border-radius: var(--product-screen-radius); }