/* Six approved iPhone case Hero references: one continuous scene per SKU. */
body.product-titanium-camera .detail-hero.iphone-hero.iphone-hero--custom-sample,
body.product-soft-stand .detail-hero.iphone-hero.iphone-hero--custom-sample,
body.product-wave .detail-hero.iphone-hero.iphone-hero--custom-sample,
body.product-creative-color .detail-hero.iphone-hero.iphone-hero--custom-sample,
body.product-metallic-color .detail-hero.iphone-hero.iphone-hero--custom-sample,
body.product-liuli .detail-hero.iphone-hero.iphone-hero--custom-sample {
  height: clamp(720px, calc(100svh - 52px), 940px);
  min-height: 720px;
  overflow: hidden;
  background: #eef2f5;
}

body.product-titanium-camera .iphone-hero-sample-scene--titanium-camera { background-image: url('assets/iphone-hero-scenes/titanium-camera-hero-v2.webp'); }
body.product-soft-stand .iphone-hero-sample-scene--soft-stand { background-image: url('assets/iphone-hero-scenes/soft-stand-hero-v2.webp'); }
body.product-wave .iphone-hero-sample-scene--wave { background-image: url('assets/iphone-hero-scenes/wave-hero-v2.webp'); }
body.product-creative-color .iphone-hero-sample-scene--creative-color { background-image: url('assets/iphone-hero-scenes/creative-color-hero-v2.webp'); }
body.product-metallic-color .iphone-hero-sample-scene--metallic-color { background-image: url('assets/iphone-hero-scenes/metallic-color-hero-v2.webp'); }
body.product-liuli .iphone-hero-sample-scene--liuli { background-image: url('assets/iphone-hero-scenes/liuli-hero-v2.webp'); }

body.product-titanium-camera .iphone-hero-sample-scene--titanium-camera,
body.product-soft-stand .iphone-hero-sample-scene--soft-stand,
body.product-wave .iphone-hero-sample-scene--wave,
body.product-creative-color .iphone-hero-sample-scene--creative-color,
body.product-metallic-color .iphone-hero-sample-scene--metallic-color,
body.product-liuli .iphone-hero-sample-scene--liuli {
  inset: 0;
  background-color: #edf1f4;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  animation: none;
  transform: none;
}

body.product-titanium-camera .iphone-hero--custom-sample::before,
body.product-soft-stand .iphone-hero--custom-sample::before,
body.product-wave .iphone-hero--custom-sample::before,
body.product-creative-color .iphone-hero--custom-sample::before,
body.product-metallic-color .iphone-hero--custom-sample::before,
body.product-liuli .iphone-hero--custom-sample::before,
body.product-titanium-camera .iphone-hero--custom-sample .iphone-hero-atmosphere,
body.product-soft-stand .iphone-hero--custom-sample .iphone-hero-atmosphere,
body.product-wave .iphone-hero--custom-sample .iphone-hero-atmosphere,
body.product-creative-color .iphone-hero--custom-sample .iphone-hero-atmosphere,
body.product-metallic-color .iphone-hero--custom-sample .iphone-hero-atmosphere,
body.product-liuli .iphone-hero--custom-sample .iphone-hero-atmosphere,
body.product-titanium-camera .iphone-hero--custom-sample .iphone-hero-floor,
body.product-soft-stand .iphone-hero--custom-sample .iphone-hero-floor,
body.product-wave .iphone-hero--custom-sample .iphone-hero-floor,
body.product-creative-color .iphone-hero--custom-sample .iphone-hero-floor,
body.product-metallic-color .iphone-hero--custom-sample .iphone-hero-floor,
body.product-liuli .iphone-hero--custom-sample .iphone-hero-floor,
body.product-titanium-camera .iphone-hero--custom-sample .detail-image,
body.product-soft-stand .iphone-hero--custom-sample .detail-image,
body.product-wave .iphone-hero--custom-sample .detail-image,
body.product-creative-color .iphone-hero--custom-sample .detail-image,
body.product-metallic-color .iphone-hero--custom-sample .detail-image,
body.product-liuli .iphone-hero--custom-sample .detail-image { display: none !important; }

body.product-titanium-camera .iphone-hero--custom-sample .detail-copy,
body.product-soft-stand .iphone-hero--custom-sample .detail-copy,
body.product-wave .iphone-hero--custom-sample .detail-copy,
body.product-creative-color .iphone-hero--custom-sample .detail-copy,
body.product-metallic-color .iphone-hero--custom-sample .detail-copy,
body.product-liuli .iphone-hero--custom-sample .detail-copy {
  z-index: 3;
  width: 43%;
  max-width: 700px;
  padding: clamp(94px, 12vh, 132px) 24px 48px max(68px, calc((100% - 1680px) / 2 + 64px)) !important;
}

body.product-titanium-camera .iphone-hero--custom-sample #product-category,
body.product-soft-stand .iphone-hero--custom-sample #product-category,
body.product-wave .iphone-hero--custom-sample #product-category,
body.product-creative-color .iphone-hero--custom-sample #product-category,
body.product-metallic-color .iphone-hero--custom-sample #product-category,
body.product-liuli .iphone-hero--custom-sample #product-category { margin: 0 0 22px; color: #6e747c; font-size: clamp(16px, 1.15vw, 21px); }

body.product-titanium-camera .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-creative-color .iphone-hero--custom-sample #product-name,
body.product-metallic-color .iphone-hero--custom-sample #product-name,
body.product-liuli .iphone-hero--custom-sample #product-name { max-width: 7.5em !important; margin: 0 0 24px; color: #101114; font-size: clamp(61px, 4.55vw, 86px) !important; font-weight: 800; line-height: .99; letter-spacing: -.07em; }

body.product-titanium-camera .iphone-hero--custom-sample #product-description,
body.product-soft-stand .iphone-hero--custom-sample #product-description,
body.product-wave .iphone-hero--custom-sample #product-description,
body.product-creative-color .iphone-hero--custom-sample #product-description,
body.product-metallic-color .iphone-hero--custom-sample #product-description,
body.product-liuli .iphone-hero--custom-sample #product-description { max-width: 650px; color: #606770; font-size: clamp(20px, 1.4vw, 26px) !important; font-weight: 500; line-height: 1.35; letter-spacing: -.02em; white-space: nowrap; }

body.product-titanium-camera .iphone-hero--custom-sample .iphone-hero-benefits,
body.product-soft-stand .iphone-hero--custom-sample .iphone-hero-benefits,
body.product-wave .iphone-hero--custom-sample .iphone-hero-benefits,
body.product-creative-color .iphone-hero--custom-sample .iphone-hero-benefits,
body.product-metallic-color .iphone-hero--custom-sample .iphone-hero-benefits,
body.product-liuli .iphone-hero--custom-sample .iphone-hero-benefits { width: min(100%, 670px); margin: clamp(42px, 5.2vh, 56px) 0 30px; color: #17191c; }

body.product-titanium-camera .iphone-hero--custom-sample .iphone-hero-benefits li,
body.product-soft-stand .iphone-hero--custom-sample .iphone-hero-benefits li,
body.product-wave .iphone-hero--custom-sample .iphone-hero-benefits li,
body.product-creative-color .iphone-hero--custom-sample .iphone-hero-benefits li,
body.product-metallic-color .iphone-hero--custom-sample .iphone-hero-benefits li,
body.product-liuli .iphone-hero--custom-sample .iphone-hero-benefits li { grid-template-columns: 32px minmax(0, 1fr); gap: 10px; padding: 0 17px; border-right: 1px solid rgba(38, 43, 49, .28); }

body.product-titanium-camera .iphone-hero--custom-sample .iphone-hero-benefits li:first-child,
body.product-soft-stand .iphone-hero--custom-sample .iphone-hero-benefits li:first-child,
body.product-wave .iphone-hero--custom-sample .iphone-hero-benefits li:first-child,
body.product-creative-color .iphone-hero--custom-sample .iphone-hero-benefits li:first-child,
body.product-metallic-color .iphone-hero--custom-sample .iphone-hero-benefits li:first-child,
body.product-liuli .iphone-hero--custom-sample .iphone-hero-benefits li:first-child { padding-left: 0; }
body.product-titanium-camera .iphone-hero--custom-sample .iphone-hero-benefits li:last-child,
body.product-soft-stand .iphone-hero--custom-sample .iphone-hero-benefits li:last-child,
body.product-wave .iphone-hero--custom-sample .iphone-hero-benefits li:last-child,
body.product-creative-color .iphone-hero--custom-sample .iphone-hero-benefits li:last-child,
body.product-metallic-color .iphone-hero--custom-sample .iphone-hero-benefits li:last-child,
body.product-liuli .iphone-hero--custom-sample .iphone-hero-benefits li:last-child { border-right: 0; }
body.product-titanium-camera .iphone-hero--custom-sample .iphone-hero-benefit-mark,
body.product-soft-stand .iphone-hero--custom-sample .iphone-hero-benefit-mark,
body.product-wave .iphone-hero--custom-sample .iphone-hero-benefit-mark,
body.product-creative-color .iphone-hero--custom-sample .iphone-hero-benefit-mark,
body.product-metallic-color .iphone-hero--custom-sample .iphone-hero-benefit-mark,
body.product-liuli .iphone-hero--custom-sample .iphone-hero-benefit-mark { width: 30px; height: 30px; }
body.product-titanium-camera .iphone-hero--custom-sample .iphone-hero-benefits strong,
body.product-soft-stand .iphone-hero--custom-sample .iphone-hero-benefits strong,
body.product-wave .iphone-hero--custom-sample .iphone-hero-benefits strong,
body.product-creative-color .iphone-hero--custom-sample .iphone-hero-benefits strong,
body.product-metallic-color .iphone-hero--custom-sample .iphone-hero-benefits strong,
body.product-liuli .iphone-hero--custom-sample .iphone-hero-benefits strong { color: #17191c; font-size: 14px; line-height: 1.25; }
body.product-titanium-camera .iphone-hero--custom-sample .iphone-hero-benefits small,
body.product-soft-stand .iphone-hero--custom-sample .iphone-hero-benefits small,
body.product-wave .iphone-hero--custom-sample .iphone-hero-benefits small,
body.product-creative-color .iphone-hero--custom-sample .iphone-hero-benefits small,
body.product-metallic-color .iphone-hero--custom-sample .iphone-hero-benefits small,
body.product-liuli .iphone-hero--custom-sample .iphone-hero-benefits small { margin-top: 4px; color: #6d737a; font-size: 12px; line-height: 1.35; }

body.product-titanium-camera .iphone-hero--custom-sample .detail-copy .link-row { display: none; }

/* Metallic Color follows the cool-grey metal reference with ink-black live copy. */
body.product-metallic-color .detail-hero.iphone-hero.iphone-hero--custom-sample { background: #edf0f3; }
body.product-metallic-color .iphone-hero--custom-sample #product-category { color: #69717b !important; }
body.product-metallic-color .iphone-hero--custom-sample #product-name,
body.product-metallic-color .iphone-hero--custom-sample .iphone-hero-benefits,
body.product-metallic-color .iphone-hero--custom-sample .iphone-hero-benefits strong { color: #111317 !important; }
body.product-metallic-color .iphone-hero--custom-sample #product-description,
body.product-metallic-color .iphone-hero--custom-sample .iphone-hero-benefits small { color: #616973 !important; }
body.product-metallic-color .iphone-hero--custom-sample .iphone-hero-benefits li { border-right-color: rgba(28, 34, 41, .28) !important; }
body.product-metallic-color .iphone-hero--custom-sample .iphone-hero-benefit-mark { filter: none !important; }
body.product-metallic-color .iphone-hero--custom-sample .detail-copy .link-row .iphone-hero-cta--primary { background: #15171b !important; color: #fff !important; }
body.product-liuli .detail-hero.iphone-hero.iphone-hero--custom-sample { background: #182230; }
body.product-liuli .iphone-hero--custom-sample #product-category,
body.product-liuli .iphone-hero--custom-sample #product-description,
body.product-liuli .iphone-hero--custom-sample .iphone-hero-benefits small { color: rgba(255,255,255,.72); }
body.product-liuli .iphone-hero--custom-sample #product-name,
body.product-liuli .iphone-hero--custom-sample .iphone-hero-benefits,
body.product-liuli .iphone-hero--custom-sample .iphone-hero-benefits strong { color: #fff; }
body.product-liuli .iphone-hero--custom-sample .iphone-hero-benefits li { border-right-color: rgba(255,255,255,.42); }
body.product-liuli .iphone-hero--custom-sample .iphone-hero-benefit-mark { filter: brightness(0) invert(1); }
body.product-liuli .iphone-hero--custom-sample .detail-copy .link-row .iphone-hero-cta--primary { background: #fff !important; color: #151a21 !important; }

@media (max-width: 900px) {
  body.product-titanium-camera .detail-hero.iphone-hero.iphone-hero--custom-sample,
  body.product-soft-stand .detail-hero.iphone-hero.iphone-hero--custom-sample,
  body.product-wave .detail-hero.iphone-hero.iphone-hero--custom-sample,
  body.product-creative-color .detail-hero.iphone-hero.iphone-hero--custom-sample,
  body.product-metallic-color .detail-hero.iphone-hero.iphone-hero--custom-sample,
  body.product-liuli .detail-hero.iphone-hero.iphone-hero--custom-sample { min-height: 980px; height: auto; padding-bottom: 450px; }
  body.product-titanium-camera .iphone-hero-sample-scene--titanium-camera,
  body.product-soft-stand .iphone-hero-sample-scene--soft-stand,
  body.product-wave .iphone-hero-sample-scene--wave,
  body.product-creative-color .iphone-hero-sample-scene--creative-color,
  body.product-metallic-color .iphone-hero-sample-scene--metallic-color,
  body.product-liuli .iphone-hero-sample-scene--liuli { background-position: 68% bottom; background-size: auto 49%; }
  body.product-titanium-camera .iphone-hero-sample-scene--titanium-camera { background-image: linear-gradient(180deg, #edf2f7 0%, #edf2f7 47%, rgba(237,242,247,.92) 57%, rgba(237,242,247,0) 68%), url('assets/iphone-hero-scenes/titanium-camera-hero-v2.webp'); background-position: center, 68% bottom; background-size: 100% 100%, auto 49%; background-repeat: no-repeat, no-repeat; }
  body.product-soft-stand .iphone-hero-sample-scene--soft-stand { background-image: linear-gradient(180deg, #f5f8fa 0%, #f5f8fa 47%, rgba(245,248,250,.92) 57%, rgba(245,248,250,0) 68%), url('assets/iphone-hero-scenes/soft-stand-hero-v2.webp'); background-position: center, 68% bottom; background-size: 100% 100%, auto 49%; background-repeat: no-repeat, no-repeat; }
  body.product-wave .iphone-hero-sample-scene--wave { background-image: linear-gradient(180deg, #f6f7fa 0%, #f6f7fa 47%, rgba(246,247,250,.92) 57%, rgba(246,247,250,0) 68%), url('assets/iphone-hero-scenes/wave-hero-v2.webp'); background-position: center, 68% bottom; background-size: 100% 100%, auto 49%; background-repeat: no-repeat, no-repeat; }
  body.product-creative-color .iphone-hero-sample-scene--creative-color { background-image: linear-gradient(180deg, #eaf5ff 0%, #eaf5ff 47%, rgba(234,245,255,.92) 57%, rgba(234,245,255,0) 68%), url('assets/iphone-hero-scenes/creative-color-hero-v2.webp'); background-position: center, 68% bottom; background-size: 100% 100%, auto 49%; background-repeat: no-repeat, no-repeat; }
  body.product-metallic-color .iphone-hero-sample-scene--metallic-color { background-image: linear-gradient(180deg, #edf0f3 0%, #edf0f3 43%, rgba(237,240,243,.76) 57%, rgba(237,240,243,0) 71%), url('assets/iphone-hero-scenes/metallic-color-hero-v2.webp'); background-position: center, 68% bottom; background-size: 100% 100%, auto 53%; background-repeat: no-repeat, no-repeat; }
  body.product-liuli .iphone-hero-sample-scene--liuli { background-image: linear-gradient(180deg, #182230 0%, #182230 47%, rgba(24,34,48,.9) 57%, rgba(24,34,48,0) 68%), url('assets/iphone-hero-scenes/liuli-hero-v2.webp'); background-position: center, 68% bottom; background-size: 100% 100%, auto 49%; background-repeat: no-repeat, no-repeat; }
  body.product-titanium-camera .iphone-hero--custom-sample .detail-copy,
  body.product-soft-stand .iphone-hero--custom-sample .detail-copy,
  body.product-wave .iphone-hero--custom-sample .detail-copy,
  body.product-creative-color .iphone-hero--custom-sample .detail-copy,
  body.product-metallic-color .iphone-hero--custom-sample .detail-copy,
  body.product-liuli .iphone-hero--custom-sample .detail-copy { width: 100% !important; max-width: none; padding: 48px 24px 28px !important; }
  body.product-metallic-color .iphone-hero--custom-sample .detail-copy { position: absolute !important; z-index: 3; top: 0; left: 0; min-height: 0; height: auto; }
  body.product-titanium-camera .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-creative-color .iphone-hero--custom-sample #product-name,
  body.product-metallic-color .iphone-hero--custom-sample #product-name,
  body.product-liuli .iphone-hero--custom-sample #product-name { font-size: clamp(44px, 11.5vw, 62px) !important; }
  body.product-titanium-camera .iphone-hero--custom-sample #product-description,
  body.product-soft-stand .iphone-hero--custom-sample #product-description,
  body.product-wave .iphone-hero--custom-sample #product-description,
  body.product-creative-color .iphone-hero--custom-sample #product-description,
  body.product-metallic-color .iphone-hero--custom-sample #product-description,
  body.product-liuli .iphone-hero--custom-sample #product-description { white-space: normal; font-size: 18px !important; }
  body.product-titanium-camera .iphone-hero--custom-sample .iphone-hero-benefits,
  body.product-soft-stand .iphone-hero--custom-sample .iphone-hero-benefits,
  body.product-wave .iphone-hero--custom-sample .iphone-hero-benefits,
  body.product-creative-color .iphone-hero--custom-sample .iphone-hero-benefits,
  body.product-metallic-color .iphone-hero--custom-sample .iphone-hero-benefits,
  body.product-liuli .iphone-hero--custom-sample .iphone-hero-benefits { margin-top: 28px; }
  body.product-titanium-camera .iphone-hero--custom-sample .iphone-hero-benefits small,
  body.product-soft-stand .iphone-hero--custom-sample .iphone-hero-benefits small,
  body.product-wave .iphone-hero--custom-sample .iphone-hero-benefits small,
  body.product-creative-color .iphone-hero--custom-sample .iphone-hero-benefits small,
  body.product-metallic-color .iphone-hero--custom-sample .iphone-hero-benefits small,
  body.product-liuli .iphone-hero--custom-sample .iphone-hero-benefits small { display: none; }
}