/* A marked desktop poster uses the available iframe height below its product chrome.
   The figure, baked-in copy and link hit areas share one proportional canvas. */
@media screen and (min-width: 737px) {
  :is(#overview, #design)[_ngcontent-c7] :is(.features, .design-1, .os, .top)[data-archive-fit-canvas] {
    --archive-canvas-ratio: 16 / 9;
    --archive-canvas-top-space: 50px;
    width: 100%;
    height: auto;
    aspect-ratio: var(--archive-canvas-ratio);
    max-height: calc(100svh - var(--archive-canvas-top-space));
  }
  :is(#overview, #design)[_ngcontent-c7] :is(.features, .design-1, .os, .top)[data-archive-fit-canvas] > figure[_ngcontent-c7] {
    left: 50%;
    right: auto;
    width: min(100%, calc((100svh - var(--archive-canvas-top-space)) * var(--archive-canvas-ratio)));
    height: 100%;
    transform: translateX(-50%);
    background-size: contain;
    background-position: center;
  }
  #overview[_ngcontent-c7] .features[data-archive-fit-canvas="u3"] a[_ngcontent-c7] {
    width: 16.741071%;
    height: 1.388889%;
  }
  #overview[_ngcontent-c7] .features[data-archive-fit-canvas="u3"] {
    background-color: #e8e8e8;
  }
  #overview[_ngcontent-c7] .features[data-archive-fit-canvas="upro2"] {
    background-color: #111115;
  }
  #overview[_ngcontent-c7] .features[data-archive-fit-canvas="upro2"] h3[_ngcontent-c7] {
    width: 11.71875%;
    height: 7.777778%;
    top: 46.527778%;
  }
  #overview[_ngcontent-c7] .features[data-archive-fit-canvas="upro2"] a[_ngcontent-c7] {
    width: 101.666667%;
    height: 17.857143%;
  }
  #design[_ngcontent-c7] .design-1[data-archive-fit-canvas="u3-design"] {
    --archive-canvas-ratio: 64 / 39;
    --archive-canvas-top-space: 84px;
    background-color: #000;
  }
  body:has(script[data-archive-product-slug="u3"]) #design[_ngcontent-c7] > section.slogan[_ngcontent-c7] {
    --archive-canvas-ratio: 2560 / 1321;
    --archive-canvas-top-space: 50px;
    width: 100%;
    height: auto;
    aspect-ratio: var(--archive-canvas-ratio);
    max-height: calc(100svh - var(--archive-canvas-top-space));
    background-color: #210007;
  }
  body:has(script[data-archive-product-slug="u3"]) #design[_ngcontent-c7] > section.slogan[_ngcontent-c7] > figure[_ngcontent-c7] {
    left: 50%;
    right: auto;
    width: min(100%, calc((100svh - 50px) * (2560 / 1321)));
    height: 100%;
    transform: translateX(-50%);
    background-color: #210007;
    background-size: contain;
    background-position: center top;
  }
  /* U3 overview's five color states share one fixed 16:9 poster canvas.
     Fit the artwork and its click targets as a unit on shorter desktop viewports. */
  body:has(script[data-archive-product-slug="u3"]) #overview[_ngcontent-c7] > section.slogan.section-multiple-switch[_ngcontent-c7] {
    --u3-slogan-fit-scale: min(1, calc((100svh - 50px) / 1008px), calc(100vw / 1792px));
    width: min(100%, 1792px, calc((100svh - 50px) * 16 / 9));
    height: auto;
    aspect-ratio: 16 / 9;
    margin-inline: auto;
    background-color: #fff;
  }
  body:has(script[data-archive-product-slug="u3"]) #overview[_ngcontent-c7] > section.slogan.section-multiple-switch[_ngcontent-c7] > figure[_ngcontent-c7] {
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    transform: none;
    background-size: contain;
    background-position: center top;
  }
  body:has(script[data-archive-product-slug="u3"]) #overview[_ngcontent-c7] > section.slogan.section-multiple-switch[_ngcontent-c7] > figure[_ngcontent-c7] > h3[_ngcontent-c7] {
    top: 33.541667%;
    transform: scale(var(--u3-slogan-fit-scale));
    transform-origin: center top;
  }
  body:has(script[data-archive-product-slug="u3"]) #overview[_ngcontent-c7] > section.slogan.section-multiple-switch[_ngcontent-c7] > figure[_ngcontent-c7] > .lockscreen[_ngcontent-c7] {
    left: 19.239%;
    top: 28.530%;
    width: 13.867%;
    height: 48.541%;
  }
  #overview[_ngcontent-c7] .os[data-archive-fit-canvas="u3-os"] {
    --archive-canvas-ratio: 1792 / 975;
    background-color: #ebecea;
  }
  #overview[_ngcontent-c7] .os[data-archive-fit-canvas="u3-os"] a[_ngcontent-c7] {
    width: 21.595982%;
    height: 1.435897%;
  }
  #overview[_ngcontent-c7] .os[data-archive-fit-canvas="upro2-os"] {
    --archive-canvas-ratio: 1792 / 911.397766;
  }
  #overview[_ngcontent-c7] .os[data-archive-fit-canvas="upro2-os"] a[_ngcontent-c7] {
    width: 15.117188%;
    height: 1.536100%;
  }
  #overview[_ngcontent-c7] .os[data-archive-fit-canvas="upro2s-os"] {
    --archive-canvas-ratio: 1792 / 1314;
    max-height: none;
    background-color: #fff;
  }
  #overview[_ngcontent-c7] .os[data-archive-fit-canvas="upro2s-os"] > figure[_ngcontent-c7] {
    width: 100%;
    height: 100%;
    background-size: contain;
    background-position: center;
  }
  #overview[_ngcontent-c7] .os[data-archive-fit-canvas="upro2s-os"] > figure[_ngcontent-c7] a:nth-of-type(1) {
    left: 52.700781%;
    top: 88.735160%;
    width: 10.602679%;
    height: 1.065449%;
    transform: translateX(-50%);
  }
  #overview[_ngcontent-c7] .os[data-archive-fit-canvas="upro2s-os"] > figure[_ngcontent-c7] a#open-video-flv {
    left: 58.092076%;
    top: 88.735160%;
    width: 4.185268%;
    height: 1.065449%;
    transform: translateX(-50%);
  }
  #overview[_ngcontent-c7] .top[data-archive-fit-canvas="upro2s-top"] {
    --archive-canvas-ratio: 1792 / 854;
    --archive-canvas-top-space: 84px;
  }
  #overview[_ngcontent-c7] .features[data-archive-fit-canvas="upro2s-features"] {
    --archive-canvas-ratio: 1792 / 999.590943;
  }
  #overview[_ngcontent-c7] .features[data-archive-fit-canvas="upro2s-features"] a[_ngcontent-c7] {
    width: 11.718750%;
    height: 1.400574%;
  }
}

/* R1 feature posters are static, single-image canvases. Keep the two
   interactive/dense camera panels at their original natural scroll size. */
@media screen and (min-width: 1222px) {
  #features[_ngcontent-c7] :is(.performance, .storage, .color-weight, .camera1, .camera2, .camera3)[data-archive-fit-canvas] {
    --archive-canvas-top-space: 50px;
    width: 100%;
    height: auto;
    aspect-ratio: var(--archive-canvas-ratio);
    max-height: calc(100svh - var(--archive-canvas-top-space));
  }
  #features[_ngcontent-c7] :is(.performance, .storage, .color-weight, .camera1, .camera2, .camera3)[data-archive-fit-canvas] > figure[_ngcontent-c7] {
    left: 50%;
    right: auto;
    width: min(100%, calc((100svh - var(--archive-canvas-top-space)) * var(--archive-canvas-ratio)));
    height: 100%;
    transform: translateX(-50%);
    background-size: contain;
    background-position: center;
  }
  #features[_ngcontent-c7] .performance[data-archive-fit-canvas="upro2s-feature-performance"] {
    --archive-canvas-ratio: 2560 / 1384;
    background-color: #000;
  }
  #features[_ngcontent-c7] .storage[data-archive-fit-canvas="upro2s-feature-storage"] {
    --archive-canvas-ratio: 5120 / 2960;
    background-color: #d4d4d4;
  }
  #features[_ngcontent-c7] .camera1[data-archive-fit-canvas="upro2s-feature-camera1"] {
    --archive-canvas-ratio: 2560 / 1896;
    background-color: #fdfdfd;
  }
  #features[_ngcontent-c7] .camera2[data-archive-fit-canvas="upro2s-feature-camera2"] {
    --archive-canvas-ratio: 5120 / 3078;
    background-color: #fff;
  }
  #features[_ngcontent-c7] .camera3[data-archive-fit-canvas="upro2s-feature-camera3"] {
    --archive-canvas-ratio: 2560 / 1794;
    background-color: #f5f5f5;
  }
}

/* Pro CPU: the 1141px medium poster contains an approximately 870px core.
   Its first desktop screen has 44px archive Header + 40px product controls.
   Camera/Charge retain their native heights; photo/reverse-charge are untouched. */
@media screen and (min-width: 737px) {
  odin-features-pc .page.features #cpu {
    max-height: calc((100svh - 84px) * 1141 / 870);
  }
}

/* Pro 2 feature posters are individual static 1792px canvases. Scale the
   full baked poster into the short desktop stage without cropping it; the
   interactive sample selector and tall battery narrative stay untouched. */
@media screen and (min-width: 737px) {
  osborn-features-pc #features :is(.performance, .screen, .unlock, .camera, .beauty) {
    width: 100%;
    height: auto;
    aspect-ratio: var(--archive-canvas-ratio);
    max-height: calc(100svh - 50px);
  }
  osborn-features-pc #features :is(.performance, .screen, .unlock, .camera, .beauty) > figure {
    left: 50%;
    right: auto;
    width: min(100%, calc((100svh - 50px) * var(--archive-canvas-ratio)));
    height: 100%;
    transform: translateX(-50%);
    background-size: contain;
    background-position: center;
  }
  osborn-features-pc #features .performance { --archive-canvas-ratio: 1792 / 1038; background-color: #111113; }
  osborn-features-pc #features .screen { --archive-canvas-ratio: 1792 / 1133; background-color: #212121; }
  osborn-features-pc #features .unlock { --archive-canvas-ratio: 1792 / 1170; background-color: #1d1e1e; }
  osborn-features-pc #features .camera { --archive-canvas-ratio: 1792 / 939; background-color: #5c2531; }
  osborn-features-pc #features .beauty { --archive-canvas-ratio: 1792 / 939; background-color: #dadbe0; }
}



/* Pro 2S overview slogan is a four-state, full-bleed 16:9 poster. Fit every
   state to the available desktop stage without cropping the product artwork;
   scale the shared color/hotspot group with the art. The mobile component is
   deliberately left to its original layout. */
@media screen and (min-width: 737px) and (max-width: 1600px) {
  body:has(script[data-archive-product-slug="upro2s"]) #overview[_ngcontent-c7] > section.slogan.section-multiple-switch[_ngcontent-c7] {
    --upro2s-slogan-fit-scale: min(1, calc((100svh - 50px) / 1008px), calc(100vw / 1792px));
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    max-height: calc(100svh - 50px);
    background-color: #05050a;
  }
  body:has(script[data-archive-product-slug="upro2s"]) #overview[_ngcontent-c7] > section.slogan.section-multiple-switch[_ngcontent-c7]:has(> figure.pure-white.active[_ngcontent-c7]) {
    background-color: #fcfcfc;
  }
  body:has(script[data-archive-product-slug="upro2s"]) #overview[_ngcontent-c7] > section.slogan.section-multiple-switch[_ngcontent-c7] > figure[_ngcontent-c7] {
    left: 50%;
    right: auto;
    width: min(100%, calc((100svh - 50px) * 16 / 9));
    height: 100%;
    transform: translateX(-50%);
    background-size: contain;
    background-position: center;
  }
  body:has(script[data-archive-product-slug="upro2s"]) #overview[_ngcontent-c7] > section.slogan.section-multiple-switch[_ngcontent-c7] > figure[_ngcontent-c7] > h3[_ngcontent-c7] {
    top: 36.666667%;
    transform: scale(var(--upro2s-slogan-fit-scale));
    transform-origin: center top;
  }
}
@media screen and (min-width: 1601px) {
  body:has(script[data-archive-product-slug="upro2s"]) #overview[_ngcontent-c7] > section.slogan.section-multiple-switch[_ngcontent-c7] {
    --upro2s-slogan-fit-scale: min(1, calc((100svh - 50px) / 1440px), calc(100vw / 2560px));
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    max-height: calc(100svh - 50px);
    background-color: #05050a;
  }
  body:has(script[data-archive-product-slug="upro2s"]) #overview[_ngcontent-c7] > section.slogan.section-multiple-switch[_ngcontent-c7]:has(> figure.pure-white.active[_ngcontent-c7]) {
    background-color: #fcfcfc;
  }
  body:has(script[data-archive-product-slug="upro2s"]) #overview[_ngcontent-c7] > section.slogan.section-multiple-switch[_ngcontent-c7] > figure[_ngcontent-c7] {
    left: 50%;
    right: auto;
    width: min(100%, calc((100svh - 50px) * 16 / 9));
    height: 100%;
    transform: translateX(-50%);
    background-size: contain;
    background-position: center;
  }
  body:has(script[data-archive-product-slug="upro2s"]) #overview[_ngcontent-c7] > section.slogan.section-multiple-switch[_ngcontent-c7] > figure[_ngcontent-c7] > h3[_ngcontent-c7] {
    top: 36.666667%;
    transform: scale(var(--upro2s-slogan-fit-scale));
    transform-origin: center top;
  }
}


/* Pro 2's camera-sample panel is a single authored canvas with an overlay carousel.
   Scale the whole canvas on shorter desktops while retaining its original ratio. */
@media screen and (min-width: 1222px) and (max-height: 1329px) {
  body:has(script[data-archive-product-slug="upro2"]) #features[_ngcontent-c7] > section.sample[_ngcontent-c7] {
    width: min(2560px, 100vw, calc(195.419847svh - 97.709924px));
    width: min(2560px, 100svw, calc(195.419847svh - 97.709924px));
    height: auto;
    aspect-ratio: 2560 / 1310;
  }

  body:has(script[data-archive-product-slug="upro2"]) #features[_ngcontent-c7] > section.sample[_ngcontent-c7] > figure[_ngcontent-c7] {
    inset: 0;
    width: 100%;
    height: 100%;
  }

  body:has(script[data-archive-product-slug="upro2"]) #features[_ngcontent-c7] > section.sample[_ngcontent-c7] > ul[_ngcontent-c7] {
    top: 16.7176%;
    right: auto;
    bottom: auto;
    left: 50%;
    width: 47.35%;
    height: 46.66%;
    margin: 0;
    transform: translateX(-50%);
  }
}

/* U3 overview uses one near-square, fully authored poster. On shorter desktop
   viewports, scale the complete artwork as a unit and preserve natural scroll;
   never crop the baked headline or handset. */
@media screen and (min-width: 1222px) and (max-width: 1600px) and (max-height: 1329px) {
  body:has(script[data-archive-product-slug="u3"]) #overview[_ngcontent-c7] > section.top[_ngcontent-c7] {
    width: 100%;
    height: min(1620px, calc((100svh - 84px) * 1.7));
    margin-inline: 0;
  }

  body:has(script[data-archive-product-slug="u3"]) #overview[_ngcontent-c7] > section.top[_ngcontent-c7] > figure[_ngcontent-c7] {
    top: 0;
    right: auto;
    left: 50%;
    width: min(100vw, calc((100svh - 84px) * 1.6785));
    height: min(1620px, calc((100svh - 84px) * 1.7));
    margin: 0;
    transform: translateX(-50%);
    background-size: contain;
    background-position: center top;
  }
}

@media screen and (min-width: 1601px) and (max-height: 1329px) {
  body:has(script[data-archive-product-slug="u3"]) #overview[_ngcontent-c7] > section.top[_ngcontent-c7] {
    width: 100%;
    height: min(2591px, calc((100svh - 84px) * 1.7), calc(100vw * 1.012109));
    margin-inline: 0;
  }

  body:has(script[data-archive-product-slug="u3"]) #overview[_ngcontent-c7] > section.top[_ngcontent-c7] > figure[_ngcontent-c7] {
    top: 0;
    right: auto;
    left: 50%;
    width: min(100vw, calc((100svh - 84px) * 1.6785));
    height: min(2591px, calc((100svh - 84px) * 1.7), calc(100vw * 1.012109));
    margin: 0;
    transform: translateX(-50%);
    background-size: contain;
    background-position: center top;
  }
}

/* Pro 2 overview slogan and design are authored as 2560x1302 four-state
   posters, rendered at 1792x911.4 on this desktop breakpoint. Keep each full
   poster, including its overlaid selection/link hit areas, in a proportional
   stage that fits the space below the Header and Tabs. */
@media screen and (min-width: 1222px) and (max-height: 1150px) {
  body:has(script[data-archive-product-slug="upro2"]) #overview[_ngcontent-c7] > section.slogan.section-multiple-switch[_ngcontent-c7],
  body:has(script[data-archive-product-slug="upro2"]) #overview[_ngcontent-c7] > section.design.section-multiple-switch[_ngcontent-c7] {
    --upro2-overview-top-space: 84px;
    container-type: inline-size;
    width: min(1792px, 100%, calc((100svh - var(--upro2-overview-top-space)) * 1.966205));
    height: auto;
    aspect-ratio: 2560 / 1302;
    margin-inline: auto;
  }

  /* The global header has scrolled away by this panel; only the 50px tabs remain. */
  body:has(script[data-archive-product-slug="upro2"]) #overview[_ngcontent-c7] > section.design.section-multiple-switch[_ngcontent-c7] {
    --upro2-overview-top-space: 50px;
  }

  body:has(script[data-archive-product-slug="upro2"]) #overview[_ngcontent-c7] > section.slogan.section-multiple-switch[_ngcontent-c7] > figure[_ngcontent-c7],
  body:has(script[data-archive-product-slug="upro2"]) #overview[_ngcontent-c7] > section.design.section-multiple-switch[_ngcontent-c7] > figure[_ngcontent-c7] {
    --upro2-overview-poster-scale: min(1, calc((100svh - var(--upro2-overview-top-space)) / 911.4px), calc(100cqw / 1792px));
    top: 0;
    right: auto;
    left: 50%;
    width: 1792px;
    height: 911.4px;
    margin: 0;
    transform: translateX(-50%) scale(var(--upro2-overview-poster-scale));
    transform-origin: top center;
    background-size: cover;
    background-position: center top;
  }
}

/* Mobile width adaptation for the legacy Odin product-shell pages only. */
@media screen and (max-width: 1221px) {
  html, body { width: 100% !important; min-width: 0 !important; overflow-x: hidden; }
  .wrapper.page.odin { width: 100% !important; min-width: 0 !important; max-width: 100% !important; box-sizing: border-box; }
  .wrapper.page.odin .main,
  .wrapper.page.odin .container { width: 100% !important; min-width: 0 !important; max-width: 100% !important; box-sizing: border-box; }
  .wrapper.page.odin .nav-aside { margin-right: 0 !important; }
}