/**
 * Shared Mobile Layer — Usable Mobile styles.
 * Mobile Breakpoint: max-width 991px (~992px).
 * All layout/motion overrides live inside the media query so Desktop Canvas
 * is untouched above the breakpoint (Light Desktop Adjustment: none required).
 */

/* ---- Hamburger shell (hidden on desktop; shown only in MQ below) ---- */
.bs-mnav-bar,
.bs-mnav-drawer,
.bs-mnav-backdrop {
  display: none;
}

/* Author display:flex/block must not override the HTML hidden attribute */
.bs-mnav-drawer[hidden],
.bs-mnav-backdrop[hidden] {
  display: none !important;
}

/* ---- Mobile Breakpoint ---- */
@media (max-width: 991px) {
  /* Prevent chrome from forcing a 1320px canvas just to reach the menu */
  html,
  body {
    overflow-x: hidden;
    max-width: 100%;
  }

  #smv_Area0,
  #smc_Area0,
  #smv_Area0 .fullcolumn-inner {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  #smv_Area0 {
    height: 56px !important;
    margin: 0 !important;
    position: relative !important;
    z-index: 1000;
  }

  /* Keep logo in a compact header strip; hide absolute PC nav */
  #smv_tem_21_13 {
    width: 100% !important;
    left: 0 !important;
    top: 0 !important;
    height: 56px !important;
    position: relative !important;
  }

  #smv_tem_22_1 {
    left: 12px !important;
    top: 8px !important;
    z-index: 2;
  }

  #smv_tem_23_47,
  #smv_tem_23_47 .nav_pc_t_3 {
    display: none !important;
  }

  /* Fixed mobile chrome: logo row + menu control (always reachable without horizontal pan) */
  .bs-mnav-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 56px;
    padding: 0 12px;
    box-sizing: border-box;
    background: #fff;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    z-index: 100001;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
  }

  .bs-mnav-logo {
    display: flex;
    align-items: center;
    max-width: calc(100% - 56px);
    text-decoration: none;
  }

  .bs-mnav-logo img {
    display: block;
    height: 36px;
    width: auto;
    max-width: 160px;
    object-fit: contain;
  }

  .bs-mnav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #1c54a4;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .bs-mnav-toggle:focus-visible {
    outline: 2px solid #1c54a4;
    outline-offset: 2px;
  }

  .bs-mnav-toggle-bars {
    display: block;
    width: 22px;
    height: 2px;
    background: currentColor;
    border-radius: 1px;
    position: relative;
    transition: background 0.15s ease;
  }

  .bs-mnav-toggle-bars::before,
  .bs-mnav-toggle-bars::after {
    content: "";
    position: absolute;
    left: 0;
    width: 22px;
    height: 2px;
    background: currentColor;
    border-radius: 1px;
    transition: transform 0.15s ease, top 0.15s ease;
  }

  .bs-mnav-toggle-bars::before {
    top: -7px;
  }

  .bs-mnav-toggle-bars::after {
    top: 7px;
  }

  html.bs-mnav-open .bs-mnav-toggle-bars {
    background: transparent;
  }

  html.bs-mnav-open .bs-mnav-toggle-bars::before {
    top: 0;
    transform: rotate(45deg);
  }

  html.bs-mnav-open .bs-mnav-toggle-bars::after {
    top: 0;
    transform: rotate(-45deg);
  }

  .bs-mnav-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    z-index: 100002;
  }

  .bs-mnav-backdrop[hidden] {
    display: none !important;
  }

  html.bs-mnav-open .bs-mnav-backdrop {
    display: block !important;
    opacity: 1;
    pointer-events: auto;
  }

  .bs-mnav-drawer {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    right: 0;
    width: min(320px, 88vw);
    height: 100%;
    max-height: 100dvh;
    margin: 0;
    padding: 64px 0 24px;
    box-sizing: border-box;
    background: #fff;
    box-shadow: -8px 0 24px rgba(0, 0, 0, 0.12);
    transform: translateX(105%);
    transition: transform 0.22s ease;
    z-index: 100003;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .bs-mnav-drawer[hidden] {
    display: none !important;
  }

  html.bs-mnav-open .bs-mnav-drawer {
    display: flex !important;
    transform: translateX(0);
  }

  .bs-mnav-list {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .bs-mnav-item {
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  }

  .bs-mnav-link,
  .bs-mnav-acc-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 48px;
    padding: 12px 20px;
    box-sizing: border-box;
    font-size: 16px;
    line-height: 1.35;
    color: #1a1a1a;
    text-decoration: none;
    background: transparent;
    border: 0;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    -webkit-tap-highlight-color: transparent;
  }

  .bs-mnav-link:active,
  .bs-mnav-acc-btn:active {
    background: rgba(28, 84, 164, 0.06);
  }

  .bs-mnav-chevron {
    display: inline-block;
    width: 0.55em;
    height: 0.55em;
    border-right: 2px solid #666;
    border-bottom: 2px solid #666;
    transform: rotate(45deg);
    transition: transform 0.15s ease;
    flex-shrink: 0;
    margin-left: 12px;
  }

  .bs-mnav-item.is-open .bs-mnav-chevron {
    transform: rotate(-135deg);
    margin-top: 4px;
  }

  .bs-mnav-sub {
    list-style: none;
    margin: 0;
    padding: 0 0 8px;
    display: none;
    background: #f7f9fc;
  }

  .bs-mnav-item.is-open > .bs-mnav-sub {
    display: block;
  }

  .bs-mnav-sub .bs-mnav-link {
    min-height: 44px;
    padding-left: 32px;
    font-size: 15px;
    color: #333;
  }

  /* Offset original header under fixed bar so logo strip is not double-stacked awkwardly */
  body {
    padding-top: 56px;
  }

  #smv_Area0 {
    display: none !important;
  }

  /* Body scroll lock while drawer open */
  html.bs-mnav-open,
  html.bs-mnav-open body {
    overflow: hidden;
  }

  /* =========================================================
   * Information-first Body Reflow (all Pages)
   * Stack Desktop Canvas absolute modules into readable flow.
   * ========================================================= */

  /*
   * Builder shells pin the Desktop Canvas via min-width:1320px on
   * #mainContentWrapper / .smvWrapper (and ResponsiveJsLoader re-asserts it).
   * Kill those first or every child width:100% resolves against 1320.
   */
  #mainContentWrapper,
  #mainContentWrapper > div,
  #smv_AreaMainWrapper,
  #tem-main-layout11,
  #smv_MainContent,
  .smvWrapper,
  #smvWrapper,
  .smvContainer,
  #smv_Main,
  #smv_Area3,
  #smv_Area1,
  #smv_Area2,
  #smv_Area4,
  #smv_Area5,
  body#smart-body,
  body {
    min-width: 0 !important;
  }

  #mainContentWrapper,
  #mainContentWrapper > div,
  #smv_AreaMainWrapper,
  #tem-main-layout11,
  #smv_MainContent,
  .smvWrapper,
  #smvWrapper,
  .smvContainer,
  #smv_Main,
  #smv_Area3,
  #smv_Area1,
  #smv_Area2,
  #smv_Area4,
  #smv_Area5 {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
    /* visible so stacked modules are not clipped to a short canvas */
    overflow: visible !important;
  }

  /* Prevent builder min-height:300 from becoming a hard clip box */
  #smv_MainContent {
    min-height: 0 !important;
  }

  #smv_Main,
  #smv_MainContent,
  .smvWrapper,
  .smvContainer {
    position: relative !important;
  }

  /*
   * Builder intermediate shells often stay position:absolute with height:0,
   * which collapses product cards and stacks all text on top of each other.
   * Pull every layout shell into normal flow — not only .smartAbs.
   */
  #smv_Main .fullcolumn-inner,
  #smv_Main .fullcolumn-outer,
  #smv_Main .smAreaC,
  #smv_Main .w-container,
  #smv_Main .w-image-box,
  #smv_Main .image-clip-wrap,
  #smv_Area3 .fullcolumn-inner,
  #smv_Area3 .w-container {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    float: none !important;
    transform: none !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  /*
   * Convert absolute modules to document flow.
   * Scope to main content + footer so we don't fight header rules above.
   */
  #smv_Main .smartAbs,
  #smv_MainContent .smartAbs,
  #smv_AreaMainWrapper .smartAbs,
  #smv_Area3 .smartAbs {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 0 16px !important;
    transform: none !important;
    float: none !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    clear: both !important;
  }

  #smv_Main .yibuFrameContent,
  #smv_Area3 .yibuFrameContent {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  /* Text frames use height:100% + overflow:hidden in builder HTML — kill that */
  #smv_Main [ctype="text"] [id^="txt_"],
  #smv_Main [ctype="text"] .editableContent,
  #smv_Main [ctype="text"] [style*="height: 100%"],
  #smv_Main [ctype="text"] [style*="height:100%"] {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  /* Media */
  #smv_Main img,
  #smv_Main video,
  #smv_Area3 img,
  #smv_Main .w-image-box,
  #smv_Main .image-clip-wrap {
    max-width: 100% !important;
    height: auto !important;
    box-sizing: border-box !important;
  }

  #smv_Main .w-image-box img,
  #smv_Main .image-clip-wrap img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain;
  }

  /* Text: readable, unclipped */
  #smv_Main [ctype="text"],
  #smv_Main .txtContent,
  #smv_Main .w-text,
  #smv_Main .w-textcontent,
  #smv_Main p,
  #smv_Main span {
    max-width: 100% !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: anywhere !important;
  }

  #smv_Main [ctype="text"] {
    height: auto !important;
    overflow: visible !important;
    padding: 0 12px !important;
    box-sizing: border-box !important;
  }

  /* Soften oversized builder type on narrow screens */
  #smv_Main [style*="font-size:36px"],
  #smv_Main [style*="font-size: 36px"],
  #smv_Main [style*="font-size:32px"],
  #smv_Main [style*="font-size: 32px"] {
    font-size: 1.45rem !important;
    line-height: 1.35 !important;
  }

  #smv_Main [style*="font-size:28px"],
  #smv_Main [style*="font-size: 28px"],
  #smv_Main [style*="font-size:24px"],
  #smv_Main [style*="font-size: 24px"] {
    font-size: 1.2rem !important;
    line-height: 1.4 !important;
  }

  /* Huge absolute headline blocks (e.g. 我们代理的产品) — readable, not decorative giant type */
  #smv_Main [ctype="text"] span[style*="font-size:72"],
  #smv_Main [ctype="text"] span[style*="font-size: 72"],
  #smv_Main [ctype="text"] span[style*="font-size:60"],
  #smv_Main [ctype="text"] span[style*="font-size: 60"],
  #smv_Main [ctype="text"] span[style*="font-size:48"],
  #smv_Main [ctype="text"] span[style*="font-size: 48"] {
    font-size: 1.35rem !important;
    line-height: 1.4 !important;
  }

  /* Buttons / CTAs — tappable */
  #smv_Main [ctype="button"],
  #smv_Main a.w-button,
  #smv_Main .w-button {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 48px !important;
    line-height: 1.3 !important;
    white-space: normal !important;
    box-sizing: border-box !important;
    padding: 12px 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
  }

  #smv_Main a.w-button {
    text-decoration: none;
  }

  /* Hero / fullpageSlide — one visual band only (do not min-height every nested shell) */
  #smv_Main [ctype="fullpageSlide"],
  #smv_Main [ctype="slideset"] {
    width: 100% !important;
    max-width: 100% !important;
    left: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  #smv_Main [ctype="fullpageSlide"] .yibuFrameContent,
  #smv_Main [ctype="slideset"] .yibuFrameContent,
  #smv_Main .w-slide,
  #smv_Main .w-slide-inner,
  #smv_Main [id^="lider_"],
  #smv_Main [id^="slider_"],
  #smv_Main [id*="jssor"] {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    left: 0 !important;
    top: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
  }

  /* Collapse jssor helper nodes that are not the real slide content */
  #smv_Main .w-slide-inner > div:not(.content-box) {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  /* Hero photo layer only — hide video placeholder / error skins that wash the band white/blue */
  #smv_Main .video-box-inner,
  #smv_Main .fullBannerPlayer-errorbg,
  #smv_Main .w-slide-mask {
    display: none !important;
  }

  #smv_Main .content-box-inner.fullInner,
  #smv_Main .fullInner:not(.video-box-inner) {
    position: relative !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: min(48vw, 280px) !important;
    min-height: 220px !important;
    max-height: 300px !important;
    background-size: cover !important;
    background-position: center 40% !important;
    background-repeat: no-repeat !important;
    display: block !important;
    z-index: 2 !important;
  }

  /* Jssor injects tall absolute helper divs that create blank bands */
  #smv_Main .w-slide > div:not(.w-slide-inner) {
    position: relative !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  /*
   * Jssor may insert a non-slide node before the first .content-box.
   * Show the first .content-box; hide only later .content-box siblings.
   */
  #smv_Main .w-slide-inner > .content-box {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    left: 0 !important;
    top: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  #smv_Main .w-slide-inner > .content-box ~ .content-box {
    display: none !important;
  }

  /* Hide jssor chrome arrows/bullets that can overflow */
  #smv_Main [class*="jssora"],
  #smv_Main [class*="jssorb"],
  #smv_Main .w-slide [u="arrowleft"],
  #smv_Main .w-slide [u="arrowright"],
  #smv_Main .w-slide [data-u="arrowleft"],
  #smv_Main .w-slide [data-u="arrowright"] {
    display: none !important;
  }

  /* Nested area / banner cards: stack and grow with children */
  #smv_Main [ctype="area"],
  #smv_Main [ctype="banner"] {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    left: auto !important;
    top: auto !important;
    margin: 0 0 12px !important;
    padding: 0 10px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    display: flow-root !important;
  }

  /* Product card tiles: readable stack, not multi-column abs grid */
  #smv_Main [ctype="area"][style*="width: 415"],
  #smv_Main [ctype="area"][style*="width:415"] {
    padding: 12px !important;
    margin-bottom: 20px !important;
    background: #f7f9fc;
    border-radius: 8px;
  }

  #smv_Main [ctype="image"] {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  #smv_Main [ctype="image"] img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    object-fit: contain !important;
  }

  /* Tiny decorative bars inside product cards — keep short */
  #smv_Main [ctype="area"][style*="height: 4px"],
  #smv_Main [ctype="area"][style*="height:4px"] {
    height: 4px !important;
    min-height: 4px !important;
    margin: 0 0 8px !important;
    padding: 0 !important;
    max-width: 60px !important;
  }

  /* Tiny decorative bars (4px etc.) — don't waste space */
  #smv_Main [ctype="area"][style*="height: 4px"],
  #smv_Main .smartAbs[style*="height: 4px"] {
    min-height: 0 !important;
    margin-bottom: 4px !important;
  }

  /* Footer / companyinfo — readable copyright strip */
  #smv_Area3 {
    padding: 16px 16px 28px !important;
    text-align: center !important;
    background: transparent;
  }

  #smv_Area3 .smartAbs,
  #smv_Area3 [ctype="companyinfo"] {
    width: 100% !important;
    left: auto !important;
    top: auto !important;
    height: auto !important;
    margin: 0 !important;
  }

  #smv_Area3 .w-company-info,
  #smv_Area3 .company-info-item,
  #smv_Area3 .company-info-title,
  #smv_Area3 .company-info-text {
    display: inline !important;
    width: auto !important;
    max-width: 100% !important;
    white-space: normal !important;
    word-break: break-word !important;
    line-height: 1.55 !important;
    font-size: 13px !important;
    color: inherit;
  }

  #smv_Area3 .company-info-item {
    display: block !important;
    padding: 4px 0 !important;
  }

  #smv_Area3 .yibuFrameContent {
    overflow: visible !important;
    height: auto !important;
  }

  #smv_Area3 a {
    color: inherit;
    text-decoration: none;
  }

  /*
   * Builder ships multiple black page-bottom skins (ICP / 万网).
   * On mobile they inflate into a giant black void; hide them and keep
   * the site companyinfo strip (#smv_Area3) as the readable footer.
   */
  .page-bottom--area {
    display: none !important;
  }

  /*
   * Motion dampening — parallax / enter animations fight scroll on narrow screens.
   * Prefer static, fully visible content.
   */
  #smv_Main .animated,
  #smv_Main [class*="animate"],
  #smv_Main [class*="smanimate"],
  #smv_Main .sm-animate,
  body .animated {
    animation: none !important;
    animation-delay: 0s !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
  }

  #smv_Main [data-parallax],
  #smv_Main .lz-parallax,
  #smv_Main .parallax,
  #smv_Main .fullInner,
  #smv_Main .content-box-inner {
    transform: none !important;
    background-attachment: scroll !important;
  }

  @media (prefers-reduced-motion: reduce) {
    #smv_Main *,
    #smv_Main *::before,
    #smv_Main *::after {
      animation: none !important;
      transition: none !important;
      scroll-behavior: auto !important;
    }
  }

  /* Builder often leaves empty absolute spacers — allow collapse */
  #smv_Main [ctype="code"] {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  /* Decorative horizontal rules (builder .w-line often fixed ~1300px) */
  #smv_Main .w-line,
  #smv_Main [class*="w-line"] {
    position: relative !important;
    left: 0 !important;
    top: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Final safety: nothing in main/footer should force a wider track */
  #smv_Main *,
  #smv_Area3 *,
  .page-bottom--area * {
    max-width: 100%;
  }

  #smv_Main img,
  #smv_Area3 img,
  .page-bottom--area img {
    height: auto;
  }
}