/* A real three-quarter Watch render gives the Health story a recognisable Apple Watch silhouette.
   The Habits display is placed over the photographed face, so the crown, case and continuous band remain real hardware. */
html { overflow-x: hidden; }

.health-showcase .watch-product-stage {
  position: absolute;
  z-index: 4;
  right: -132px;
  bottom: 1px;
  width: 440px;
  height: 445px;
  overflow: hidden;
  filter: drop-shadow(0 22px 19px rgba(13, 20, 29, .18));
  transform: scale(.76);
  transform-origin: bottom right;
}

.health-showcase .watch-product-render {
  position: absolute;
  top: -1px;
  left: 0;
  display: block;
  width: 440px;
  max-width: none;
  height: auto;
  mix-blend-mode: multiply;
}

.health-showcase .watch-product-screen {
  position: absolute;
  z-index: 1;
  top: 62px;
  left: 17px;
  width: 222px;
  height: 274px;
  overflow: hidden;
  border-radius: 43px 47px 43px 50px;
  background: #050608;
  box-shadow: inset 0 0 0 3px #050608;
  clip-path: polygon(11% 0, 100% 1%, 89% 100%, 0 94%);
}

.health-showcase .watch-product-screen img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.025);
  transform-origin: center;
}

@media (max-width: 800px) {
  .health-showcase .watch-product-stage {
    right: -60px;
    bottom: -4px;
    transform: scale(.73);
  }
}

@media (max-width: 480px) {
  .health-showcase .watch-product-stage {
    right: -32px;
    bottom: -4px;
    transform: scale(.66);
    transform-origin: bottom right;
  }
}

@media (max-width: 340px) {
  .health-showcase .watch-product-stage {
    right: -18px;
    transform: scale(.6);
  }
}

/* Shared Apple Watch silhouette: a calm black Sport Band and rounded, edge-to-edge display.
   It is deliberately identical in the Apple Health and Everywhere compositions. */
.health-showcase .watch-product-stage { display:none; }

.watch-flat {
  --watch-width: 150px;
  --watch-height: 294px;
  --case-width: 142px;
  --case-height: 168px;
  --screen-inset: 5px;
  --band-width: 86px;
  --band-height: 89px;
  position:absolute;
  z-index:4;
  width:var(--watch-width);
  height:var(--watch-height);
  display:block;
  filter:drop-shadow(0 20px 20px rgba(9,18,30,.25));
}

.watch-flat-band {
  position:absolute;
  z-index:0;
  left:50%;
  width:var(--band-width);
  height:var(--band-height);
  border:1px solid #040404;
  background:linear-gradient(90deg,#010101 0%,#111 48%,#020202 100%);
  box-shadow:inset 1px 0 rgba(255,255,255,.055), inset -2px 0 rgba(0,0,0,.62), 0 5px 10px rgba(0,0,0,.18);
  transform:translateX(-50%);
}

.watch-flat-band-top { top:0; border-radius:39px 39px 20px 20px; }
.watch-flat-band-bottom { bottom:0; border-radius:20px 20px 39px 39px; }

.watch-flat-case {
  position:absolute;
  z-index:1;
  top:calc((var(--watch-height) - var(--case-height)) / 2);
  left:50%;
  width:var(--case-width);
  height:var(--case-height);
  padding:var(--screen-inset);
  border:2px solid #0b0d11;
  border-radius:46px;
  background:linear-gradient(135deg,#20252d 0%,#07090d 10%,#000 47%,#090c11 100%);
  box-shadow:inset 1px 1px 1px rgba(255,255,255,.13), inset -2px -2px 2px rgba(0,0,0,.7),0 15px 26px rgba(0,0,0,.35);
  transform:translateX(-50%);
}

.watch-flat-screen {
  width:100%;
  height:100%;
  overflow:hidden;
  border-radius:39px;
  background:#000;
  box-shadow:inset 0 0 0 2px #000;
}

.watch-flat-screen img {
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
}

.watch-flat-health { right:14px; bottom:5px; }

.watch-flat-mini {
  --watch-width: 88px;
  --watch-height: 160px;
  --case-width: 78px;
  --case-height: 92px;
  --screen-inset: 3px;
  --band-width: 48px;
  --band-height: 58px;
  right:96px;
  bottom:-2px;
  z-index:5;
  filter:drop-shadow(0 11px 13px rgba(8,27,53,.25));
}

.watch-flat-mini .watch-flat-case { border-radius:27px; border-width:1px; }
.watch-flat-mini .watch-flat-screen { border-radius:23px; }
.watch-flat-mini .watch-flat-band-top { border-radius:20px 20px 10px 10px; }
.watch-flat-mini .watch-flat-band-bottom { border-radius:10px 10px 20px 20px; }

@media (max-width:800px) {
  .watch-flat-health { right:6px; transform:scale(.86); transform-origin:bottom right; }
}

@media (max-width:480px) {
  .watch-flat-health { right:-3px; bottom:69px; transform:scale(.68); transform-origin:bottom right; }
  .watch-flat-mini { right:64px; bottom:-4px; transform:scale(.78); transform-origin:bottom right; }
}

@media (max-width:340px) {
  .watch-flat-health { right:-6px; transform:scale(.6); }
}