/* Four reference-led case Heroes: one continuous environment per SKU. */
body.product-woven .detail-hero.iphone-hero.iphone-hero--custom-sample,
body.product-creative-touch .detail-hero.iphone-hero.iphone-hero--custom-sample,
body.product-color-stand .detail-hero.iphone-hero.iphone-hero--custom-sample,
body.product-shield-stand .detail-hero.iphone-hero.iphone-hero--custom-sample {
  height: clamp(720px, calc(100svh - 52px), 940px);
  min-height: 720px;
  overflow: hidden;
  isolation: isolate;
  background: #edf0f3;
}

body.product-woven .iphone-hero-sample-scene--woven { background-image: url('assets/iphone-hero-scenes/woven-hero-v2.webp'); }
body.product-creative-touch .iphone-hero-sample-scene--creative-touch { background-image: url('assets/iphone-hero-scenes/creative-touch-hero-v2.webp'); }
body.product-color-stand .iphone-hero-sample-scene--color-stand { background-image: url('assets/iphone-hero-scenes/color-stand-hero-v2.webp'); }
body.product-shield-stand .iphone-hero-sample-scene--shield-stand { background-image: url('assets/iphone-hero-scenes/shield-stand-hero-v2.webp'); }

body.product-woven .iphone-hero-sample-scene--woven,
body.product-creative-touch .iphone-hero-sample-scene--creative-touch,
body.product-color-stand .iphone-hero-sample-scene--color-stand,
body.product-shield-stand .iphone-hero-sample-scene--shield-stand {
  position: absolute;
  z-index: 0;
  inset: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  animation: none;
  transform: none;
}

body.product-woven .iphone-hero--custom-sample::before,
body.product-creative-touch .iphone-hero--custom-sample::before,
body.product-color-stand .iphone-hero--custom-sample::before,
body.product-shield-stand .iphone-hero--custom-sample::before,
body.product-woven .iphone-hero--custom-sample .iphone-hero-atmosphere,
body.product-creative-touch .iphone-hero--custom-sample .iphone-hero-atmosphere,
body.product-color-stand .iphone-hero--custom-sample .iphone-hero-atmosphere,
body.product-shield-stand .iphone-hero--custom-sample .iphone-hero-atmosphere,
body.product-woven .iphone-hero--custom-sample .iphone-hero-floor,
body.product-creative-touch .iphone-hero--custom-sample .iphone-hero-floor,
body.product-color-stand .iphone-hero--custom-sample .iphone-hero-floor,
body.product-shield-stand .iphone-hero--custom-sample .iphone-hero-floor,
body.product-woven .iphone-hero--custom-sample .detail-image,
body.product-creative-touch .iphone-hero--custom-sample .detail-image,
body.product-color-stand .iphone-hero--custom-sample .detail-image,
body.product-shield-stand .iphone-hero--custom-sample .detail-image { display: none !important; }

body.product-woven .iphone-hero--custom-sample .detail-copy,
body.product-creative-touch .iphone-hero--custom-sample .detail-copy,
body.product-color-stand .iphone-hero--custom-sample .detail-copy,
body.product-shield-stand .iphone-hero--custom-sample .detail-copy {
  position: relative !important;
  z-index: 3;
  width: 43%;
  max-width: 700px;
  height: 100%;
  min-height: 0;
  padding: clamp(94px, 12vh, 132px) 24px 48px max(68px, calc((100% - 1680px) / 2 + 64px)) !important;
  margin: 0 !important;
  color: #111317;
}

body.product-woven .iphone-hero--custom-sample #product-category,
body.product-creative-touch .iphone-hero--custom-sample #product-category,
body.product-color-stand .iphone-hero--custom-sample #product-category,
body.product-shield-stand .iphone-hero--custom-sample #product-category { margin: 0 0 22px; color: #69717b !important; font-size: clamp(16px, 1.15vw, 21px); }

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

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

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

body.product-woven .iphone-hero--custom-sample .iphone-hero-benefits li,
body.product-creative-touch .iphone-hero--custom-sample .iphone-hero-benefits li,
body.product-color-stand .iphone-hero--custom-sample .iphone-hero-benefits li,
body.product-shield-stand .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(28, 34, 41, .28); }
body.product-woven .iphone-hero--custom-sample .iphone-hero-benefits li:first-child,
body.product-creative-touch .iphone-hero--custom-sample .iphone-hero-benefits li:first-child,
body.product-color-stand .iphone-hero--custom-sample .iphone-hero-benefits li:first-child,
body.product-shield-stand .iphone-hero--custom-sample .iphone-hero-benefits li:first-child { padding-left: 0; }
body.product-woven .iphone-hero--custom-sample .iphone-hero-benefits li:last-child,
body.product-creative-touch .iphone-hero--custom-sample .iphone-hero-benefits li:last-child,
body.product-color-stand .iphone-hero--custom-sample .iphone-hero-benefits li:last-child,
body.product-shield-stand .iphone-hero--custom-sample .iphone-hero-benefits li:last-child { border-right: 0; }
body.product-woven .iphone-hero--custom-sample .iphone-hero-benefit-mark,
body.product-creative-touch .iphone-hero--custom-sample .iphone-hero-benefit-mark,
body.product-color-stand .iphone-hero--custom-sample .iphone-hero-benefit-mark,
body.product-shield-stand .iphone-hero--custom-sample .iphone-hero-benefit-mark { width: 30px; height: 30px; filter: none !important; }
body.product-woven .iphone-hero--custom-sample .iphone-hero-benefits strong,
body.product-creative-touch .iphone-hero--custom-sample .iphone-hero-benefits strong,
body.product-color-stand .iphone-hero--custom-sample .iphone-hero-benefits strong,
body.product-shield-stand .iphone-hero--custom-sample .iphone-hero-benefits strong { color: #17191c !important; font-size: 14px; line-height: 1.25; }
body.product-woven .iphone-hero--custom-sample .iphone-hero-benefits small,
body.product-creative-touch .iphone-hero--custom-sample .iphone-hero-benefits small,
body.product-color-stand .iphone-hero--custom-sample .iphone-hero-benefits small,
body.product-shield-stand .iphone-hero--custom-sample .iphone-hero-benefits small { margin-top: 4px; color: #6d737a !important; font-size: 12px; line-height: 1.35; }
body.product-woven .detail-hero.iphone-hero.iphone-hero--custom-sample .detail-copy .link-row a.iphone-hero-cta--primary,
body.product-creative-touch .detail-hero.iphone-hero.iphone-hero--custom-sample .detail-copy .link-row a.iphone-hero-cta--primary,
body.product-color-stand .detail-hero.iphone-hero.iphone-hero--custom-sample .detail-copy .link-row a.iphone-hero-cta--primary,
body.product-shield-stand .detail-hero.iphone-hero.iphone-hero--custom-sample .detail-copy .link-row a.iphone-hero-cta--primary { background: #15171b !important; color: #fff !important; }

@media (max-width: 900px) {
  body.product-woven .detail-hero.iphone-hero.iphone-hero--custom-sample,
  body.product-creative-touch .detail-hero.iphone-hero.iphone-hero--custom-sample,
  body.product-color-stand .detail-hero.iphone-hero.iphone-hero--custom-sample,
  body.product-shield-stand .detail-hero.iphone-hero.iphone-hero--custom-sample { min-height: 980px; height: auto; padding-bottom: 450px; }
  body.product-woven .iphone-hero-sample-scene--woven { background-image: linear-gradient(180deg, #f0f2f4 0%, #f0f2f4 44%, rgba(240,242,244,.82) 58%, rgba(240,242,244,0) 72%), url('assets/iphone-hero-scenes/woven-hero-v2.webp'); }
  body.product-creative-touch .iphone-hero-sample-scene--creative-touch { background-image: linear-gradient(180deg, #f4f5f6 0%, #f4f5f6 44%, rgba(244,245,246,.82) 58%, rgba(244,245,246,0) 72%), url('assets/iphone-hero-scenes/creative-touch-hero-v2.webp'); }
  body.product-color-stand .iphone-hero-sample-scene--color-stand { background-image: linear-gradient(180deg, #f2f4f6 0%, #f2f4f6 44%, rgba(242,244,246,.82) 58%, rgba(242,244,246,0) 72%), url('assets/iphone-hero-scenes/color-stand-hero-v2.webp'); }
  body.product-shield-stand .iphone-hero-sample-scene--shield-stand { background-image: linear-gradient(180deg, #edf0f3 0%, #edf0f3 44%, rgba(237,240,243,.82) 58%, rgba(237,240,243,0) 72%), url('assets/iphone-hero-scenes/shield-stand-hero-v2.webp'); }
  body.product-woven .iphone-hero-sample-scene--woven,
  body.product-creative-touch .iphone-hero-sample-scene--creative-touch,
  body.product-color-stand .iphone-hero-sample-scene--color-stand,
  body.product-shield-stand .iphone-hero-sample-scene--shield-stand { background-position: center, 68% bottom; background-size: 100% 100%, auto 52%; background-repeat: no-repeat, no-repeat; }
  body.product-woven .iphone-hero--custom-sample .detail-copy,
  body.product-creative-touch .iphone-hero--custom-sample .detail-copy,
  body.product-color-stand .iphone-hero--custom-sample .detail-copy,
  body.product-shield-stand .iphone-hero--custom-sample .detail-copy { position: absolute !important; z-index: 3; top: 0; left: 0; width: 100% !important; max-width: none; height: auto; min-height: 0; padding: 48px 24px 28px !important; }
  body.product-woven .iphone-hero--custom-sample #product-name,
  body.product-creative-touch .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(44px, 11.5vw, 62px) !important; }
  body.product-woven .iphone-hero--custom-sample #product-description,
  body.product-creative-touch .iphone-hero--custom-sample #product-description,
  body.product-color-stand .iphone-hero--custom-sample #product-description,
  body.product-shield-stand .iphone-hero--custom-sample #product-description { white-space: normal; font-size: 18px !important; }
  body.product-woven .iphone-hero--custom-sample .iphone-hero-benefits,
  body.product-creative-touch .iphone-hero--custom-sample .iphone-hero-benefits,
  body.product-color-stand .iphone-hero--custom-sample .iphone-hero-benefits,
  body.product-shield-stand .iphone-hero--custom-sample .iphone-hero-benefits { margin-top: 28px; }
  body.product-woven .iphone-hero--custom-sample .iphone-hero-benefits small,
  body.product-creative-touch .iphone-hero--custom-sample .iphone-hero-benefits small,
  body.product-color-stand .iphone-hero--custom-sample .iphone-hero-benefits small,
  body.product-shield-stand .iphone-hero--custom-sample .iphone-hero-benefits small { display: none; }
}