/*
 * Manshuo cross-browser compatibility layer.
 * Loaded after the visual theme so fallbacks do not change the design.
 */

:root {
  --ms-viewport-height: 100vh;
}

html {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow-x: hidden;
}

@supports (overflow: clip) {
  html,
  body {
    overflow-x: clip;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

img,
picture,
video,
canvas,
svg {
  max-width: 100%;
}

img,
video {
  display: block;
}

button,
input,
select,
textarea {
  max-width: 100%;
  font: inherit;
}

button,
[role="button"],
a {
  touch-action: manipulation;
}

input[type="search"] {
  -webkit-appearance: none;
  appearance: none;
}

.manshuo-home-v2 :is(.ms-header, .ms-nav, .ms-header-actions, .ms-slide-content, .ms-trust-grid, .ms-section-heading, .ms-solution-grid, .ms-performance, .ms-metric-grid, .ms-manufacturing, .ms-partner-grid, .ms-contact, .ms-form, .ms-footer-main, .ms-about-snapshot, .ms-testimonials-heading, .ms-testimonial-grid),
.manshuo-inner-v2 :is(.g-hd, .m-hdfix1, .m-hdnav, .g-wp, .box-wp, .box-list, .list-item, .item-pic, .item-text, .m-prob1, .m-prob2, .m-prob3, .m-profaq, .m-newsl, .m-prol, .m-pronav) {
  min-width: 0;
}

/* Safari still requires the prefixed form on several supported releases. */
.ms-header,
.ms-header.is-scrolled,
.ms-header-cta,
.ms-hero-controls,
.ms-trust-grid,
.ms-card-number,
.ms-button-light,
.ms-manufacturing-image span,
.ms-form,
.ms-floating a,
.ms-about-panel,
.manshuo-home-v2 .manshuo-lang-list,
.manshuo-inner-v2 .g-hd,
.manshuo-inner-v2 .g-hd.fixed,
.manshuo-inner-v2 .g-hd2,
.manshuo-inner-v2 .m-mobilenav .mbnav-btn,
.manshuo-inner-v2 .ms-mobile-menu-toggle {
  -webkit-backdrop-filter: blur(16px);
}

.ms-hero::before,
.ms-section::before,
.ms-manufacturing::before,
.ms-partner::before,
.ms-contact::before,
.ms-film-lab::before,
.ms-about-snapshot::before,
.ms-testimonials::before,
.manshuo-inner-v2 .g-bd::before {
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 92%);
}

/* Keep the interface readable when blur or masking is unavailable. */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .ms-header,
  .ms-header.is-scrolled,
  .manshuo-inner-v2 .g-hd,
  .manshuo-inner-v2 .g-hd.fixed,
  .manshuo-inner-v2 .g-hd2 {
    background: rgba(2, 10, 17, 0.98) !important;
  }

  .ms-hero-controls,
  .ms-trust-grid,
  .ms-form,
  .ms-about-panel,
  .manshuo-home-v2 .manshuo-lang-list {
    background-color: rgba(5, 20, 31, 0.96) !important;
  }
}

/* Safari 14 and older ignore dynamic viewport units. JS keeps this value
   aligned with the visible viewport when browser chrome expands or collapses. */
@media (max-width: 900px) {
  .manshuo-home-v2 .ms-nav {
    height: calc(var(--ms-viewport-height, 100vh) - 74px) !important;
    max-height: calc(var(--ms-viewport-height, 100vh) - 74px);
  }
}

@media (max-width: 991px) {
  .manshuo-inner-v2 .m-mobilenav {
    right: 0 !important;
    left: 0 !important;
    width: 100% !important;
  }

  .manshuo-inner-v2 .m-mobilenav .mbnav-bd {
    height: var(--ms-viewport-height, 100vh) !important;
    max-height: var(--ms-viewport-height, 100vh);
  }

  .manshuo-inner-v2 .ms-mobile-menu-toggle {
    right: 20px !important;
    left: auto !important;
  }
}

/* The legacy stylesheet hid desktop navigation at 1180px while the mobile
   trigger started at 991px. Keep a compact desktop header through that gap. */
@media (min-width: 992px) and (max-width: 1180px) {
  .manshuo-inner-v2 .m-hdfix1 {
    gap: 12px !important;
    padding-inline: 24px !important;
  }

  .manshuo-inner-v2 .m-hdlogo {
    display: block !important;
    flex: 0 0 158px !important;
    width: 158px !important;
  }

  .manshuo-inner-v2 .m-hdlogo img {
    width: 142px !important;
  }

  .manshuo-inner-v2 .m-hdfix1 > .m-hdnav {
    display: flex !important;
    flex: 1 1 auto !important;
    gap: clamp(9px, 1.25vw, 15px) !important;
    justify-content: center !important;
  }

  .manshuo-inner-v2 .m-hdnav .nav-item > a {
    font-size: 9px !important;
    letter-spacing: 0.055em !important;
  }

  .manshuo-inner-v2 .m-hdlang {
    display: block !important;
    flex: 0 0 auto !important;
  }

}

/* Aspect-ratio fallbacks prevent absolutely positioned media from collapsing
   in older Safari/WebView builds. */
@supports not (aspect-ratio: 1 / 1) {
  .manshuo-inner-v2 .m-newsl .item-pic {
    height: 320px !important;
  }

  .manshuo-inner-v2 .m-prol .ms-product-card .item-pic {
    height: 300px !important;
  }

  .ms-about-media {
    min-height: 520px;
  }

  @media (max-width: 760px) {
    .manshuo-inner-v2 .m-newsl .item-pic,
    .manshuo-inner-v2 .m-prol .ms-product-card .item-pic {
      height: 250px !important;
    }

    .ms-about-media,
    .ms-manufacturing-image {
      min-height: 360px;
    }
  }
}

@media (hover: none), (pointer: coarse) {
  .ms-solution-card:hover img,
  .ms-solution-card:hover video,
  .manshuo-inner-v2 .m-prol .list-item:hover img {
    transform: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}