/* Original high-resolution product artwork: keeps Hero copy live and editable. */
body.product-metallic-color .iphone-hero-sample-scene--metallic-color { background-image: url('assets/original-hero-assets/metallic-color-original.webp') !important; }
body.product-creative-color .iphone-hero-sample-scene--creative-color { background-image: url('assets/original-hero-assets/creative-color-original.webp') !important; }
body.product-creative-touch .iphone-hero-sample-scene--creative-touch { background-image: url('assets/original-hero-assets/creative-touch-original.webp') !important; }
body.product-soft-stand .iphone-hero-sample-scene--soft-stand { background-image: url('assets/original-hero-assets/soft-stand-original.webp') !important; }
body.product-wave .iphone-hero-sample-scene--wave { background-image: url('assets/original-hero-assets/wave-original.webp') !important; }
body.product-woven .iphone-hero-sample-scene--woven { background-image: url('assets/original-hero-assets/woven-original.png') !important; }
body.product-color-stand .iphone-hero-sample-scene--color-stand { background-image: url('assets/original-hero-assets/color-stand-original.webp') !important; }
body.product-shield-stand .iphone-hero-sample-scene--shield-stand { background-image: url('assets/original-hero-assets/shield-stand-original.webp') !important; }

body.product-metallic-color .iphone-hero-sample-scene--metallic-color,
body.product-creative-color .iphone-hero-sample-scene--creative-color,
body.product-creative-touch .iphone-hero-sample-scene--creative-touch,
body.product-soft-stand .iphone-hero-sample-scene--soft-stand,
body.product-wave .iphone-hero-sample-scene--wave,
body.product-woven .iphone-hero-sample-scene--woven,
body.product-color-stand .iphone-hero-sample-scene--color-stand,
body.product-shield-stand .iphone-hero-sample-scene--shield-stand {
  background-color: #eef0f2;
  background-position: 83% 55% !important;
  background-repeat: no-repeat !important;
  background-size: min(70vw, 1040px) auto !important;
}

body.product-woven .iphone-hero-sample-scene--woven,
body.product-shield-stand .iphone-hero-sample-scene--shield-stand {
  background-position: 84% 60% !important;
  background-size: auto min(100%, 920px) !important;
}

body.product-metallic-color .iphone-hero--custom-sample #product-name,
body.product-creative-color .iphone-hero--custom-sample #product-name,
body.product-creative-touch .iphone-hero--custom-sample #product-name,
body.product-soft-stand .iphone-hero--custom-sample #product-name,
body.product-wave .iphone-hero--custom-sample #product-name,
body.product-woven .iphone-hero--custom-sample #product-name,
body.product-color-stand .iphone-hero--custom-sample #product-name,
body.product-shield-stand .iphone-hero--custom-sample #product-name {
  font-size: clamp(54px, 4.15vw, 78px) !important;
  line-height: 1.02 !important;
  white-space: nowrap;
}

@media (max-width: 900px) {
  body.product-metallic-color .iphone-hero--custom-sample #product-name,
  body.product-creative-color .iphone-hero--custom-sample #product-name,
  body.product-creative-touch .iphone-hero--custom-sample #product-name,
  body.product-soft-stand .iphone-hero--custom-sample #product-name,
  body.product-wave .iphone-hero--custom-sample #product-name,
  body.product-woven .iphone-hero--custom-sample #product-name,
  body.product-color-stand .iphone-hero--custom-sample #product-name,
  body.product-shield-stand .iphone-hero--custom-sample #product-name {
    font-size: clamp(29px, 8.8vw, 48px) !important;
    letter-spacing: -.06em;
  }
  body.product-metallic-color .iphone-hero-sample-scene--metallic-color,
  body.product-creative-color .iphone-hero-sample-scene--creative-color,
  body.product-creative-touch .iphone-hero-sample-scene--creative-touch,
  body.product-soft-stand .iphone-hero-sample-scene--soft-stand,
  body.product-wave .iphone-hero-sample-scene--wave,
  body.product-woven .iphone-hero-sample-scene--woven,
  body.product-color-stand .iphone-hero-sample-scene--color-stand,
  body.product-shield-stand .iphone-hero-sample-scene--shield-stand {
    background-position: 74% bottom !important;
    background-size: auto 48% !important;
  }
}