/* Narrow viewport fixes for the legacy English U3, U3 Pro, M1/M1L, T2 and U1 runtimes.
   The product bundles already provide their own section and image layouts;
   these rules remove the fixed desktop shell width so those layouts can use
   the viewport and their bundled small/medium image variants. */
@media screen and (max-width: 1220px) {
  html[data-en-product="u3"] body,
  html[data-en-product="upro2"] body,
  html[data-en-product="m1"] body,
  html[data-en-product="u1"] body {
    width: 100%;
    min-width: 0;
  }

  html[data-en-product="u3"] .wrapper,
  html[data-en-product="u3"] .container,
  html[data-en-product="u3"] .main,
  html[data-en-product="upro2"] .wrapper,
  html[data-en-product="upro2"] .container,
  html[data-en-product="upro2"] .main,
  html[data-en-product="m1"] .wrapper,
  html[data-en-product="m1"] .container,
  html[data-en-product="m1"] .main,
  html[data-en-product="u1"] .wrapper,
  html[data-en-product="u1"] .container,
  html[data-en-product="u1"] .main {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }

  html[data-en-product="u3"] img,
  html[data-en-product="upro2"] img,
  html[data-en-product="m1"] img,
  html[data-en-product="u1"] img {
    max-width: 100%;
    height: auto;
  }

  html[data-en-product="upro2"] #overview,
  html[data-en-product="upro2"] #overview > section {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }

  html[data-en-product="m1"] .nav-list-container {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
  }

  html[data-en-product="m1"] .nav-main {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  html[data-en-product="m1"] .nav-list {
    display: flex;
    width: max-content;
    min-width: 100%;
    white-space: nowrap;
  }

  html[data-en-product="m1"] .nav-language-wrapper {
    right: 0 !important;
    left: auto !important;
  }

  html[data-en-product="u1"] .spec-parameters .detail {
    position: relative;
    left: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  html[data-en-product="u1"] .spec-parameters table {
    width: 100%;
    max-width: 100%;
    table-layout: fixed;
  }

  html[data-en-product="u1"] .spec-parameters th,
  html[data-en-product="u1"] .spec-parameters td {
    overflow-wrap: anywhere;
  }

  html[data-en-product="upro2"] #overview > section {
    position: relative;
    height: auto !important;
    min-height: 0;
    overflow: hidden;
  }

  html[data-en-product="upro2"] #overview > section > figure {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    height: auto;
    min-height: 0;
    transform: none;
    background-position: center;
    background-size: cover;
  }

  html[data-en-product="upro2"] #overview > .slogan > figure,
  html[data-en-product="upro2"] #overview > .design > figure,
  html[data-en-product="upro2"] #overview > .os > figure,
  html[data-en-product="upro2"] #overview > .slogan,
  html[data-en-product="upro2"] #overview > .design {
    aspect-ratio: 2560 / 1302;
  }

  html[data-en-product="upro2"] #overview > .slogan > figure:not(.active),
  html[data-en-product="upro2"] #overview > .design > figure:not(.active) {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
  }

  html[data-en-product="upro2"] #overview > .features > figure {
    aspect-ratio: 16 / 9;
  }

  html[data-en-product="upro2"] #overview > .os > figure {
    height: 50.86vw;
  }

  html[data-en-product="upro2"] #overview > section figure > h3 {
    position: absolute !important;
    top: auto !important;
    right: 0 !important;
    bottom: 4% !important;
    left: 0 !important;
    display: flex;
    width: 100% !important;
    height: auto !important;
    max-width: none !important;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    margin: 0;
    transform: none;
  }

  html[data-en-product="upro2"] #overview > section figure > h3 > a {
    position: static !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    flex: 0 0 auto;
    margin: 0 4px;
    transform: none !important;
  }

  html[data-en-product="upro2"] #design,
  html[data-en-product="upro2"] #features {
    width: 1792px;
    zoom: calc(100vw / 1792px);
  }

  html[data-en-product="upro2"] #design section figure,
  html[data-en-product="upro2"] #features section figure {
    left: 0 !important;
    margin-left: 0 !important;
  }
}

@media screen and (max-width: 736px) {
  html[data-en-product="u3"] .archive-en-unified-footer .footer-container,
  html[data-en-product="m1"] .archive-en-unified-footer .footer-container,
  html[data-en-product="t2"] .archive-en-unified-footer .footer-container,
  html[data-en-product="u1"] .archive-en-unified-footer .footer-container {
    box-sizing: border-box;
    padding-right: 18px;
    padding-left: 18px;
  }

  html[data-en-product="t2"] .header-mobile.en.theme-t2 .nav-product-mobile .nav-list li:nth-child(4) > a,
  html[data-en-product="t2"] .header-mobile.en.theme-t2 .nav-product-mobile .nav-list li:nth-child(5) > a {
    font-size: 0;
  }

  html[data-en-product="t2"] .header-mobile.en.theme-t2 .nav-product-mobile .nav-list li:nth-child(4) > a::after,
  html[data-en-product="t2"] .header-mobile.en.theme-t2 .nav-product-mobile .nav-list li:nth-child(5) > a::after {
    font-size: 14px;
  }

  html[data-en-product="t2"] .header-mobile.en.theme-t2 .nav-product-mobile .nav-list li:nth-child(4) > a::after {
    content: "OS";
  }

  html[data-en-product="t2"] .header-mobile.en.theme-t2 .nav-product-mobile .nav-list li:nth-child(5) > a::after {
    content: "Specs";
  }

  html[data-en-product] .archive-en-shell-header .tabs-item {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  html[data-en-product] .archive-en-shell-header .tabs-item > li {
    flex: 1 1 auto;
    justify-content: center;
    padding-right: 38px;
    padding-left: 38px;
  }

  html[data-en-product="t2"] .overview .heros {
    width: 100%;
    height: calc(145vw + 400px) !important;
    min-width: 0;
  }

  html[data-en-product="t2"] .overview .heros .content {
    top: 8%;
    left: 50%;
    width: 90%;
    transform: translateX(-50%);
  }

  html[data-en-product="t2"] .overview .heros .content h3 {
    margin: 0 auto 12px;
    font-size: clamp(22px, 6vw, 26px);
    line-height: 1.3;
  }

  html[data-en-product="t2"] .overview .heros figure {
    top: 25%;
    left: 50%;
    width: 62vw;
    max-width: 297px;
    height: auto;
    aspect-ratio: 297 / 808;
    transform: translateX(-50%);
    background-size: contain;
  }
}

@media screen and (max-width: 736px) {
  html[data-en-product="u3"] .archive-en-global-header,
  html[data-en-product="m1"] .archive-en-global-header,
  html[data-en-product="t2"] .archive-en-global-header,
  html[data-en-product="upro2"] .archive-en-global-header {
    position: relative !important;
    top: auto !important;
  }

  html[data-en-product="u3"] .nav-product-mobile,
  html[data-en-product="m1"] .nav-product-mobile,
  html[data-en-product="t2"] .nav-product-mobile,
  html[data-en-product="upro2"] .nav-product-mobile {
    position: fixed !important;
    top: 45px !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 190 !important;
  }

  html[data-en-product="u3"].en-product-header-scrolled .nav-product-mobile,
  html[data-en-product="m1"].en-product-header-scrolled .nav-product-mobile,
  html[data-en-product="t2"].en-product-header-scrolled .nav-product-mobile,
  html[data-en-product="upro2"].en-product-header-scrolled .nav-product-mobile {
    top: 0 !important;
  }

  html[data-en-product="u3"] .main,
  html[data-en-product="m1"] .main,
  html[data-en-product="t2"] .main,
  html[data-en-product="upro2"] .main {
    margin-top: 36px !important;
  }

  html[data-en-product="m1"] .overview-mobile .fulfil-mobile,
  html[data-en-product="t2"] .overview-mobile .heros-mobile {
    padding-top: 0 !important;
  }

  html[data-en-product="t2"] .overview .heros .content {
    top: 0 !important;
  }

  html[data-en-product="u3"] .archive-en-unified-footer,
  html[data-en-product="upro2"] .archive-en-unified-footer,
  html[data-en-product="m1"] .archive-en-unified-footer,
  html[data-en-product="t2"] .archive-en-unified-footer,
  html[data-en-product="u1"] .archive-en-unified-footer {
    box-sizing: border-box;
    height: auto !important;
    min-height: 0 !important;
    padding: 12px 0 !important;
    align-items: flex-start !important;
  }

  html[data-en-product="u3"] .archive-en-unified-footer .footer-container,
  html[data-en-product="upro2"] .archive-en-unified-footer .footer-container,
  html[data-en-product="m1"] .archive-en-unified-footer .footer-container,
  html[data-en-product="t2"] .archive-en-unified-footer .footer-container,
  html[data-en-product="u1"] .archive-en-unified-footer .footer-container {
    box-sizing: border-box;
    display: block;
    width: 100%;
    height: auto !important;
    padding-right: 18px;
    padding-left: 18px;
    line-height: 1.3 !important;
  }

  html[data-en-product="u3"] .archive-en-unified-footer .legal,
  html[data-en-product="upro2"] .archive-en-unified-footer .legal,
  html[data-en-product="m1"] .archive-en-unified-footer .legal,
  html[data-en-product="t2"] .archive-en-unified-footer .legal,
  html[data-en-product="u1"] .archive-en-unified-footer .legal {
    margin: 0;
    line-height: 1.3 !important;
    overflow-wrap: normal;
  }
}