/* The photo and its two native, isolated example screens share one coordinate space. */
.sharp-product {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #f6ebde;
  border-radius: 8px;
  isolation: isolate;
  cursor: zoom-in;
}
.sharp-product:focus-visible { outline: 3px solid #0f5fab; outline-offset: 4px; }
.sharp-scene {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1536px;
  height: 1024px;
  transform: translate(-50%, -50%) scale(var(--scene-scale, 1));
  transform-origin: center;
  pointer-events: none;
}
.sharp-scene-base {
  position: absolute;
  inset: 0;
  width: 1536px;
  height: 1024px;
  max-width: none;
  display: block;
}
.screen-mask { position: absolute; inset: 0; pointer-events: none; }
.screen-layer {
  position: absolute;
  left: 0;
  top: 0;
  margin: 0;
  border: 0;
  max-width: none;
  transform-origin: 0 0;
  pointer-events: none;
  overflow: hidden;
  background: #fffaf6;
}
.tablet-layer { width: 1024px; height: 700px; }
.phone-layer { width: 390px; height: 844px; }
.tablet-mask {
  clip-path: path('M99 228 L782 209 Q794 209 795 222 L796 254 C763 252 745 266 742 295 L730 697 L110 735 Q97 735 97 722 L87 243 Q87 228 99 228 Z');
}
.phone-mask {
  clip-path: path('M785 270 L805 270 Q810 270 810 278 Q811 289 823 289 L919 289 Q928 289 929 279 Q929 270 936 270 L956 272 Q983 275 984 304 L976 788 Q974 817 949 817 L767 810 Q740 808 740 781 L754 298 Q756 271 785 270 Z');
}
/* Reserve the same frame before enhancement; meaningful HTML can remain if JS fails. */
.sharp-product > .hero-scene-fallback {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}
.direction-platform-preview .choice-product > .sharp-product {
  position: absolute;
  inset: 0;
}
@media (max-width: 1050px) {
  .direction-platform-preview .choice-product {
    position: relative;
    align-self: start;
    aspect-ratio: 3/2;
    min-height: 0;
  }
}
@media (max-width: 580px) {
  .direction-platform-preview .choice-product { aspect-ratio: 3/2; min-height: 0; }
}
