/**
 * 手机 / 平板适配（<=1023px）
 *
 * 桌面（>=1024px）走 js/flexible.js 的等比缩放（zoom），设计稿 1920px 原样保真。
 * 但 1920 设计稿等比缩到 375px 时缩放率只剩 0.195，正文 26px 会变成 5px，无法阅读。
 * 因此 <=1023px 停用 zoom，由本文件的媒体查询按主流做法重排：
 *   - 顶栏导航收成汉堡菜单抽屉
 *   - 多列网格改为单列 / 双列（平板三列）
 *   - 字号改用可读的固定 px，不再随宽度缩放
 *
 * 单位说明：该区间内 zoom = 1，所以这里的 px 就是真实屏幕像素。
 */

/* 汉堡按钮：桌面隐藏，窄屏显示 */
.nav-toggle {
  display: none;
}

@media (max-width: 1023px) {
  /* ---------- 基础：解除 1920 固定宽度锁 ---------- */
  /* --bar-h 顶栏高度：同时驱动顶栏自身、其模糊背景层、以及内容区上边距，
     三者保持一致，改一处即可整体对齐 */
  .page {
    --bar-h: 64px;
    width: 100%;
    min-width: 0;
    /* 保留裁剪：首页 banner 轮播的预载层用 translateX(100%) 藏在右侧，
       不裁剪会在手机端撑出约 20px 的横向滚动 */
    overflow: hidden;
  }

  /* section_2 是内容区容器，桌面为 1920px 定宽，手机端必须放开；
     margin-top 由 100px 收窄到顶栏高度，避免顶栏下方多出空白 */
  .section_2 {
    width: 100%;
    min-width: 0;
    margin-top: var(--bar-h);
  }

  /*
   * 桌面端大量元素用左侧 margin 定位（如 135px / 311px / 884px），
   * 手机端全部失效，需清零，否则会把内容推出屏幕外。
   * 本条特异性为 (0,2,0)，排在文件前面；后续各模块规则（同级或更高）可正常覆盖。
   */
  .section_2 [class] {
    margin-left: 0;
    margin-right: 0;
  }

  /* ---------- 顶栏 ---------- */
  /* --bar-h 同时驱动顶栏及其模糊背景层的高度，两者始终一致 */
  .section_1 {
    --bar-h: 64px;
    width: 100%;
    height: var(--bar-h);
    padding: 0 16px;
    box-sizing: border-box;
  }

  /* 模糊背景层高度与顶栏一致（桌面端固定 100px，手机端需同步收窄） */
  .section_1::before {
    height: var(--bar-h);
  }

  .logo-link {
    flex-shrink: 0;
  }

  .image_1 {
    width: 80px;
    height: auto;
    margin-left: 0;
  }

  /* 导航收进抽屉：默认隐藏，点汉堡展开。
     top 直接用顶栏高度变量，保证抽屉出现位置始终紧贴顶栏下沿 */
  .nav-list {
    position: fixed;
    top: var(--bar-h);
    left: 0;
    right: 0;
    height: auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0;
    padding: 8px 0;
    background-color: #efefef;
    transform: translateY(-120%);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s ease;
    z-index: 190;
  }

  .nav-list.is-open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  .nav-list > .nav-item {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 0 20px;
    font-size: 16px;
    line-height: 24px;
    white-space: normal;
    text-align: left;
  }

  /* 可展开的标题：右侧箭头用图标图片，展开时旋转 180° */
  .nav-list > .nav-item[role="button"] {
    position: relative;
    padding-right: 48px;
    cursor: pointer;
    transition: color 0.2s ease, background-color 0.2s ease;
  }

  .nav-list > .nav-item[role="button"]::after {
    content: "";
    position: absolute;
    right: 20px;
    top: 50%;
    width: 16px;
    height: 16px;
    background-image: url(../icons/mobile/arrow-down.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    transform: translateY(-50%);
    transition: transform 0.25s ease;
  }

  /* 展开中的标题高亮（与桌面 hover/选中的绿色一致） */
  .nav-list > .nav-item.is-expanded {
    color: var(--theme-color);
    background-color: rgba(24, 143, 91, 0.08);
  }

  .nav-list > .nav-item.is-expanded::after {
    transform: translateY(-50%) rotate(180deg);
  }

  /* 悬停/按下高亮：与子项表现一致（桌面 index.css 的 .text_x:hover 只改文字色，这里补齐底色） */
  .nav-list > .nav-item[role="button"]:hover,
  .nav-list > .nav-item[role="button"]:active {
    color: var(--theme-color);
    background-color: rgba(24, 143, 91, 0.08);
  }

  /* 子菜单：默认收起，展开时向下撑开（accordion） */
  .nav-submenu {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    max-height: 0;
    background-color: #e6e6e6;
    transition: max-height 0.28s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .nav-list > .nav-item.is-expanded + .nav-submenu {
    max-height: 480px;
  }

  .nav-subitem {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 0 20px 0 36px;
    font-size: 15px;
    line-height: 22px;
    color: rgba(72, 72, 72, 1);
    text-decoration: none;
    transition: color 0.2s ease, background-color 0.2s ease;
  }

  /* 悬停/按下高亮：与一级标题的 :hover 表现一致 */
  .nav-subitem:hover,
  .nav-subitem:active {
    color: var(--theme-color);
    background-color: rgba(24, 143, 91, 0.08);
  }

  .nav-subitem.is-static {
    color: rgba(140, 140, 140, 1);
    cursor: default;
  }

  /* ---------- 多级列表（如 About us > Global Manufacturing > China） ---------- */
  .nav-subitem-toggle {
    cursor: pointer;
  }

  /* 各级容器：默认收起，展开时向下撑开（同一套 accordion 逻辑） */
  .nav-subnest {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.28s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .nav-subparent.is-expanded > .nav-subnest {
    max-height: 480px;
  }

  /* 二级项（Global Manufacturing 下的国家）：缩进一档、字号略小 */
  .nav-subnest > .nav-subitem,
  .nav-subnest > .nav-subparent > .nav-subitem {
    padding-left: 56px;
    font-size: 14px;
    color: rgba(120, 120, 120, 1);
    background-color: #dedede;
  }

  /* 三级项（China 下的子项）：再缩进一档、底色更深以区分层级 */
  .nav-subnest > .nav-subparent > .nav-subnest > .nav-subitem {
    padding-left: 76px;
    font-size: 13px;
    color: rgba(110, 110, 110, 1);
    background-color: #d3d3d3;
  }

  .title-icons {
    gap: 16px;
    margin-left: auto;
    margin-right: 0;
  }

  /* 搜索/登录图标是 PC 端入口，手机端隐藏（功能已收进抽屉/登录图标跳转）；
     汉堡按钮原就在最右侧，隐藏后位置不变 */
  .icon_search,
  .icon_login {
    display: none;
  }

  /* 汉堡按钮：图标由 background-image 提供，尺寸与搜索/登录图标一致（24×24）；
     位于 .title-icons 内，间距由该容器的 gap 统一控制 */
  .nav-toggle {
    display: block;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    background-color: transparent;
    background-image: url(../icons/mobile/nav-toggle-menu.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    cursor: pointer;
    flex-shrink: 0;
    transition: opacity 0.2s ease;
  }

  /* 展开态：切换为关闭叉图标 */
  .nav-toggle[aria-expanded="true"] {
    background-image: url(../icons/mobile/nav-toggle-close.png);
  }

  /* 巨型下拉框在手机上不再适用（导航已收进抽屉） */
  .mega-dropdown,
  .blur-overlay {
    display: none !important;
  }

  /* ---------- banner / 海报 / 占位 ---------- */
  /* banner：手机端固定高 200px，图片放大填满后居中裁切（object-fit: cover），
     2560×700 的原图会裁掉左右两侧，只保留中间部分。 */
  .image_4,
  .image_4_next {
    width: 100%;
    min-width: 0;
    height: 200px;
    object-fit: cover;
    object-position: center;
    margin-left: 0;
  }

  .events-placeholder {
    width: 100%;
    min-width: 0;
    height: 200px;
    margin-left: 0;
  }

  /* about-our-facility 页 banner：本页移动端使用专用竖图（756×400，比例接近容器），
     横向裁切余量仅约 3px，无法像宽图那样靠 object-position 平移画面，
     故不再设置偏移，交由基础规则的 center 铺满。 */

  /* mission-culture 页 banner：本页移动端使用专用竖图（756×400，比例接近容器），
     横向裁切余量仅约 3px，无法像宽图那样靠 object-position 平移画面，
     故不再设置偏移，交由基础规则的 center 铺满。 */

  /* oral-hygiene 页 banner：手机端画面整体左移 10px，与上方同理只改裁切窗口 */
  .page-oral-hygiene .image_4 {
    object-position: calc(50% - 10px) center;
  }

  /* contact-us 页 banner：手机端画面整体左移 50px，与上方同理只改裁切窗口 */
  .page-contact-us .image_4 {
    object-position: calc(50% - 50px) center;
  }

  /* bunya-story 页 banner：手机端画面整体左移 60px，与上方同理只改裁切窗口 */
  .page-bunya-story .image_4 {
    object-position: calc(50% - 60px) center;
  }

  .banner-controls {
    display: none;
  }

  .poster {
    width: 100%;
    margin: 32px auto 0;
  }

  .poster-events {
    margin-top: 24px;
  }

  /* ---------- 通用内容容器：左右留 16px，去掉 135px 左偏移 ---------- */
  .section_2 > .text-wrapper_2,
  .section_2 > .content-area,
  .section_2 > .text-group_1,
  .section_2 > .section_4,
  .section_2 > .culture-block,
  .section_2 > .block_1,
  .section_2 > .block_2,
  .section_2 > .block_3,
  .section_2 > .workshop-grid {
    width: auto;
    min-width: 0;
    margin-left: 16px;
    margin-right: 16px;
    margin-top: 32px;
  }

  /* oem-customization 页：桌面端 .text-group_1 的固定高度（395px）需放开，
     否则手机端残留约 300px 空白 */
  .page-oem-customization .section_2 > .text-group_1 {
    height: auto;
  }

  /* ---------- 首页正文区：大标语与段落改为上下排列 ---------- */
  .section_2 > .text-wrapper_2 {
    flex-direction: column;
    align-items: flex-start;
  }

  /* 首页大标语：PC 端由 .page-home 前缀（特异性 0,3,0）定 120px 行高，
     手机端需用同等特异性才能覆盖，否则行高会撑开 3 倍 */
  .page-home .section_2 > .text-wrapper_2 .text_5 {
    width: auto;
    font-size: 22px;
    line-height: 30px;
    margin: 0;
    letter-spacing: normal;
  }

  .section_2 > .text-wrapper_2 .paragraph-group,
  .section_2 > .text-wrapper_2 .paragraph_2 {
    width: 100%;
  }

  .section_2 > .text-wrapper_2 .paragraph_2 {
    font-size: 16px;
    line-height: 26px;
    letter-spacing: normal;
    text-align: left;
  }

  /* 段落间距：PC 端 .section_2 > .text-wrapper_2 .paragraph-group（特异性 0,3,0）
     定 24px，手机端需同等特异性才能覆盖 */
  .section_2 > .text-wrapper_2 .paragraph-group {
    margin-top: 24px;
    margin-bottom: 24px;
    gap: 16px;
  }

  /* ---------- 首页三张产品卡：改单列 ---------- */
  /* 桌面端高度固定 356px，手机端纵向排列后需放开，否则卡片溢出被页脚盖住。
     必须限定 .page-home —— contact-us 等页面的 Email 行也叫 .block_2，
     不限定时会被误伤成纵向排列，导致图标与标题错行。 */
  .page-home .block_2 {
    flex-direction: column;
    gap: 16px;
    height: auto;
  }

  .page-home .block_3,
  .page-home .block_4,
  .page-home .block_9 {
    width: 100%;
    height: 220px;
    background-size: cover;
  }

  .page-home .block_3:hover,
  .page-home .block_4:hover,
  .page-home .block_9:hover {
    background-size: cover;
  }

  .text-wrapper_1,
  .text-wrapper_3,
  .text-wrapper_10 {
    width: 100%;
    height: 56px;
  }

  /* 首页三张产品卡标题：字号/对齐按手机端统一调整
     （以 Prophy&Preventive 为基准，Miscellaneous 与之对齐） */
  .block_2 > .block_3 .text-wrapper_1 .text_6,
  .block_2 > .block_9 .text-wrapper_10 .text_24 {
    font-size: 22px;
    text-align: left;
    line-height: normal;
    margin: 12px 0 12px 24px;
  }

  /* Disposable 卡片标题：垂直方向回收 6px，水平方向留 10px 内缩 */
  .block_2 > .block_4 .text-wrapper_3 .text_8 {
    font-size: 22px;
    text-align: left;
    line-height: normal;
    margin: -6px 10px;
  }

  /* 首页卡片按钮（See range / Order now / Testimonial）：统一 140×40，
     文字在按钮内水平垂直居中 */
  .block_2 > .block_3 .text-wrapper_2,
  .block_2 > .block_4 .text-wrapper_4,
  .block_2 > .block_9 .text-wrapper_11 {
    width: 140px;
    height: 40px;
    margin: auto 16px 16px;
    padding: 0;
    justify-content: center;
    align-items: center;
  }

  /* See range / Order now / Testimonial 标签：上下外边距归零 */
  .block_2 > .block_3 .text-wrapper_2 .text_7,
  .block_2 > .block_4 .text-wrapper_4 .text_9,
  .block_2 > .block_9 .text-wrapper_11 .text_25 {
    width: auto;
    height: 16px;
    font-size: 16px;
    line-height: 15px;
    margin: 0;
    text-align: center;
  }

  /* ---------- 产品列表页：默认（平板）三列 ---------- */
  .section_2 > .content-area .product-grid {
    gap: 16px;
  }

  .section_2 > .content-area .product-item {
    width: calc((100% - 32px) / 3);
    border-radius: 10px;
  }

  /* ---------- factory-video：视频区左右留 16px ---------- */
  /* 视频标题：PC 端 .section_2 > .text_5（特异性 0,2,0）为 64px + nowrap + 居中，
     手机端限定本页收窄到 346px、22px 并允许换行；
     下边距归零，与视频的间距由 .factory-video 的 margin-top 承担 */
  .page-factory-video .section_2 > .text_5 {
    width: 346px;
    height: 60px;
    font-size: 22px;
    line-height: 30px;
    text-align: center;
    white-space: normal;
    margin: 24px 16px 0;
  }

  /* PC 端为保持单行隐藏了标题内的 <br>，手机端恢复，按需求在此处断行 */
  .page-factory-video .section_2 > .text_5 br {
    display: inline;
  }

  .section_2 > .video-block {
    width: auto;
    min-width: 0;
    margin-left: 16px;
    margin-right: 16px;
    /* 上边距归零，视频上下间距统一由 .factory-video 控制 */
    margin-top: 0;
  }

  /* 视频上下各留 40px 空白 */
  .factory-video {
    max-width: 100%;
    border-radius: 10px;
    margin-top: 40px;
    margin-bottom: 40px;
  }

  /* 页脚紧贴页面底部，上边距交给视频的 margin-bottom。.block_6 为全站页脚，故限定本页 */
  .page-factory-video .block_6 {
    margin-top: 0;
    margin-bottom: 0;
  }

  /* ---------- bunya-story：内容区单列重排（区块直接挂在 .section_2 下） ---------- */
  /* 各容器补 .section_2 > 前缀：上方 .section_2 [class]（0,2,0）会清零左右外边距，
     短选择器（0,1,0）会被压过，导致左右贴边、与其他页面的 16px 留白不一致 */
  .section_2 > .bs-hero {
    flex-direction: column;
    align-items: flex-start;
    width: auto;
    margin: 32px 16px 0;
    /* PC 端 padding-bottom 为 120px，手机端收紧到 48px（底部分割线距正文 48px） */
    padding-bottom: 48px;
  }

  /* 底部分割线：PC 端为 left:-1px / width:1650px（含 135px 左右内缩），
     手机端改为铺满容器，随容器左右各 16px 边距对齐 */
  .section_2 > .bs-hero::after {
    left: 0;
    right: 0;
    width: auto;
  }

  .bs-hero-title {
    width: auto;
    margin-top: 0;
    /* PC 端 margin-bottom 为 200px，手机端收紧到 24px（正文块紧随标题） */
    margin-bottom: 24px;
    font-size: 22px;
    line-height: 30px;
  }

  .bs-hero-body,
  .bs-para {
    width: auto;
  }

  .bs-para {
    font-size: 16px;
    line-height: 26px;
  }

  .bs-para + .bs-para {
    margin-top: 20px;
  }

  .bs-section-title {
    font-size: 20px;
    line-height: 28px;
  }

  .bs-mission-text {
    width: auto;
    margin-top: 16px;
    font-size: 16px;
    line-height: 26px;
  }

  .section_2 > .bs-values {
    flex-direction: column;
    align-items: flex-start;
    width: auto;
    margin: 48px 16px 0;
  }

  .bs-values-list {
    width: auto;
    /* 互换后位于 .bs-vision 下方，两者间距 24px */
    margin-top: 24px;
    /* 手机端与 .bs-vision 上下互换（不改 HTML，避免影响 PC 端左右顺序） */
    order: 2;
  }

  .bs-values-title {
    margin-top: 24px;
    margin-bottom: 24px;
  }

  .bs-value-item {
    margin-top: 20px;
  }

  /* Core Values 标题到首个条目：PC 端该规则（特异性 0,2,0）定 24px，
     与标题的 margin-bottom 24px 叠加成 48px；手机端归零，总间距保持 24px */
  .bs-values-list .bs-section-title + .bs-value-item {
    margin-top: 0;
  }

  .bs-value-name,
  .bs-value-desc {
    font-size: 16px;
    line-height: 26px;
  }

  .bs-vision {
    width: auto;
    margin-top: 0;
    /* PC 端 margin-bottom 为 200px，手机端归零（间距由 .bs-values-list 的 margin-top 控制） */
    margin-bottom: 0;
    font-size: 22px;
    line-height: 30px;
    order: 1;
  }

  /* 地图：整图等比缩放，左右留 16px 与其他内容块对齐 */
  .section_2 > .bs-map {
    width: auto;
    min-width: 0;
    height: auto;
    margin: 40px 16px 40px;
  }

  /* 页脚紧随地图（间距已由 .bs-map 的 margin-bottom 提供），
     仅作用于本页，避免影响其他页 .block_6 的手机端上边距 */
  .page-bunya-story .block_6 {
    margin-top: 0;
    margin-bottom: 0;
  }

  /* ---------- about-our-facility ---------- */
  .section_2 > .block_1 {
    flex-direction: column;
    align-items: flex-start;
  }

  /* 工厂页 01/02/03 三张卡片：桌面横排，手机端改纵向堆叠。
     不放开的话后两张会被推到视口外，再被 .page 的 overflow:hidden 裁掉 */
  .section_2 > .block_2 {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    height: auto;
  }

  /* 手机端标题不换行：隐藏标题内的 <br>，并收紧字距使其容纳单行 */
  .section_2 > .block_1 .text_6 {
    width: auto;
    font-size: 22px;
    line-height: 30px;
    letter-spacing: 1px;
    white-space: nowrap;
  }

  .section_2 > .block_1 .text_6 br {
    display: none;
  }

  .text-group_1 {
    width: 100%;
    margin-top: 20px;
  }

  .text_7 {
    width: auto;
    height: 28px;
    font-size: 20px;
    line-height: 28px;
    margin-top: 0;
    margin-bottom: 0;
  }

  .text_8 {
    width: auto;
    font-size: 16px;
    line-height: 26px;
    letter-spacing: normal;
    text-align: left;
    margin: 16px 0 0;
  }

  /* 工厂页正文：上下外边距 8px。
     .text_8 也被首页 Disposable 标题、登录页 Sign in 复用，故限定到工厂页 block_1 */
  .section_2 > .block_1 .text_8 {
    margin-top: 8px;
    margin-bottom: 8px;
  }

  .block_2 .text-wrapper_2,
  .block_2 .text-wrapper_3,
  .block_2 .text-wrapper_4,
  .block_2 .text-wrapper_11 {
    width: 100%;
    padding: 16px;
  }

  /*
   * index.css 里有一条 .block_2 .text-wrapper_2 .text_10 { width: 486px }，
   * 特异性更高，手机端需用同写法覆盖。
   */
  .block_2 .text-wrapper_2 .text_9,
  .block_2 .text-wrapper_2 .text_10,
  .block_2 .text-wrapper_2 .text_11,
  .block_2 .text-wrapper_3 .text_12,
  .block_2 .text-wrapper_3 .text_13,
  .block_2 .text-wrapper_3 .paragraph_1,
  .block_2 .text-wrapper_4 .text_14,
  .block_2 .text-wrapper_4 .text_15,
  .block_2 .text-wrapper_4 .text_16 {
    width: 100%;
  }

  .block_2 .text_9,
  .block_2 .text_12,
  .block_2 .text_14 {
    font-size: 64px;
    line-height: 64px;
    margin-left: 0;
  }

  .block_2 .text_10,
  .block_2 .text_13,
  .block_2 .text_15 {
    width: auto;
    height: auto;
    font-size: 16px;
    line-height: 26px;
    white-space: normal;
    margin: 8px 0 0;
  }

  /*
   * about-our-facility.css 里有一条 .block_2 .text-wrapper_2 .text_10（特异性 0,3,0）
   * 定 22px，压过上方手机端规则，需用同特异性覆盖。
   * 只作用于本页，避免影响其他页面的 .text_10。
   */
  .page-about-our-facility .block_2 .text-wrapper_2 .text_10 {
    font-size: 16px;
    line-height: 26px;
  }

  .block_2 .text_11,
  .block_2 .text_16,
  .block_2 .paragraph_1 {
    width: auto;
    height: auto;
    font-size: 15px;
    line-height: 24px;
    letter-spacing: normal;
    white-space: normal;
    margin: 8px 0 0;
  }

  /* 认证卡片：背景图 + 文字 + 奖牌图 改为纵向堆叠 */
  .section_2 > .block_3 {
    width: auto;
    height: auto;
    flex-direction: column;
    align-items: flex-start;
    padding: 24px 16px 32px;
    /* 手机端不使用背景图（PC 端保留），改为浅色渐变底（覆盖 PC 的 cert-bg.png） */
    background-image: linear-gradient(180deg, #fcfbf6 0%, #fbf3ec 100%);
    background-size: 100% 100%;
    /* 手机端圆角统一 32px */
    border-radius: 32px;
  }

  /* 悬停与默认完全一致。必须写成 .section_2 > .block_3:hover：
     about-our-facility.css 里有同名 hover 规则（特异性 0,3,0），
     用裸 .block_3:hover（0,2,0）压不住，悬停时背景会被拉成 100% 100% 而变形 */
  .section_2 > .block_3:hover {
    background-size: cover;
    background-position: 100% 50%;
  }

  .section_2 > .block_3 .text_33 {
    width: 100%;
    height: auto;
    font-size: 16px;
    line-height: 26px;
    letter-spacing: normal;
    text-align: left;
    margin: 0;
  }

  .section_2 > .block_3 .image_12 {
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 24px 0 0;
    align-self: center;
  }

  .section_2 > .text_18 {
    width: auto;
    height: 28px;
    color: rgb(24, 143, 91);
    font-size: 20px;
    line-height: 28px;
    margin: 40px 16px 0;
  }

  /* 工厂图：每排保持横向排列，按比例铺满；整排窄屏时仍等高 */
  .workshop-grid {
    gap: 16px;
  }

  .workshop-row {
    gap: 16px;
  }

  .workshop-row img {
    flex-grow: 1;
    height: auto;
  }

  /* "Our Mission" 标题：PC 端由 .page-mission-culture ... .mission-block .text_5
     （特异性 0,4,0）控制，手机端需同等特异性才能覆盖 */
  .page-mission-culture .section_2 > .text-wrapper_2.mission-block {
    /* PC 端上下各 120px + padding-bottom 120px（分割线在 padding 之后），
       手机端收紧：分割线距上方正文 24px */
    margin-top: 32px;
    margin-bottom: 0;
    padding-bottom: 24px;
  }

  /* 分割线距下方正文 24px（.about-block 首个子元素的上边距需归零，避免叠加） */
  .page-mission-culture .section_2 > .text-wrapper_2.about-block {
    margin-top: 24px;
  }

  /* 手机端：标题与段落组上下互换（PC 端为段落组在左、标题在右）。
     不改 HTML，避免影响 PC 端左右顺序 */
  .page-mission-culture .section_2 > .text-wrapper_2.about-block .text_5 {
    order: 1;
  }

  .page-mission-culture .section_2 > .text-wrapper_2.about-block .paragraph-group {
    order: 2;
    margin-top: 24px;
  }

  /* "It's all about dental supplies." 标题：PC 端由 .section_2 > .text-wrapper_2 .text_5
     定 96px/92px，手机端需同等特异性才能覆盖；
     上边距 202px 归零，间距由上方段落组的 margin-bottom(24px) 提供 */
  .page-mission-culture .section_2 > .text-wrapper_2.about-block .text_5 {
    width: auto;
    height: auto;
    margin-top: 0;
    margin-bottom: 0;
    font-size: 22px;
    line-height: 30px;
  }

  /* 标题下方内容（文化图区）：上边距收为 24px；
     .about-block 的 80px 下边距归零，避免叠加 */
  .page-mission-culture .section_2 > .text-wrapper_2.about-block {
    margin-bottom: 0;
  }

  .page-mission-culture .section_2 > .culture-block {
    margin-top: 12px;
    margin-bottom: 12px;
  }

  .page-mission-culture .section_2 > .text-wrapper_2.mission-block .text_5 {
    width: auto;
    height: auto;
    font-size: 22px;
    line-height: 30px;
  }

  /* "Our Mission" 正文段落：PC 端同名规则（特异性 0,4,0）定 692px/40px，
     手机端需同等特异性才能覆盖；下边距归零，避免与 padding-bottom 叠加 */
  .page-mission-culture .section_2 > .text-wrapper_2.mission-block .paragraph-group {
    margin-bottom: 0;
  }

  .page-mission-culture .section_2 > .text-wrapper_2.mission-block .paragraph_2 {
    width: 346px;
    line-height: 24px;
  }

  /* ---------- mission-culture：文化图区单张大图铺满 ---------- */
  .section_2 > .culture-block {
    gap: 12px;
  }

  .section_2 > .culture-block img {
    width: 100%;
    max-width: 100%;
    height: auto;
  }

  /* ---------- oem-customization ---------- */
  .section_2 > .text-group_1 .text_5 {
    width: auto;
    height: auto;
    font-size: 22px;
    line-height: 30px;
    white-space: normal;
    margin: 0;
  }

  .section_2 > .text-group_1 .text_6 {
    width: auto;
    height: auto;
    font-size: 16px;
    line-height: 28px;
    letter-spacing: normal;
    text-align: left;
    margin: 16px 0 0;
  }

  /* ---------- contact-us：表单与地图改单列 ---------- */
  .section_2 > .section_4 {
    flex-direction: column;
    align-items: stretch;
  }

  .section_2 > .section_4 .section_5 {
    width: 100%;
    margin-top: 0;
  }

  .section_2 > .section_4 .section_5 .field-input {
    width: 100%;
    /* 输入内容字号由 PC 端 22px 收到 16px */
    font-size: 16px;
  }

  /* 表单标签（First Name / Last Name / Email / Phone）：字号收小到 16px */
  .section_2 > .section_4 .section_5 .text_30,
  .section_2 > .section_4 .section_5 .text_34,
  .section_2 > .section_4 .section_5 .text_36 {
    font-size: 16px;
  }

  /* Email / Phone 标签的星号：所在行是 justify-between 且内容已撑满，
     负外边距会被 space-between 吸收，故用相对定位左移 12px */
  .section_2 > .section_4 .section_5 .text_35,
  .section_2 > .section_4 .section_5 .text_37 {
    position: relative;
    left: -12px;
  }

  /* Phone 行区号 + 号码：外层容器铺满，区号框保持窄宽、
     号码框占剩余宽度（不被子输入框的 width:100% 撑破） */
  .section_2 > .section_4 .section_5 .phone-input {
    width: 100%;
  }

  .section_2 > .section_4 .section_5 .phone-input .field-input-code {
    width: 90px;
    flex: none;
  }

  .section_2 > .section_4 .section_5 .phone-input .field-input-number {
    width: auto;
    flex: 1 1 0;
    min-width: 0;
  }

  /* 表单各行（First/Last Name、Email、Phone）：行间距由 PC 端 64px 收到 16px */
  .section_2 > .section_4 .section_5 .name-group + .name-group,
  .section_2 > .section_4 .section_5 .name-group + .text-wrapper_12,
  .section_2 > .section_4 .section_5 .text-wrapper_12 + .text-wrapper_13 {
    margin-top: 16px;
  }

  .section_2 > .section_4 .text-wrapper_16 {
    align-self: stretch;
    width: 100%;
    margin-top: 30px;
    margin-bottom: 30px;
  }

  /* Submit 文字：显式块级 + 满宽居中，
     不依赖父 <button> 的 flex 布局（Safari 会忽略 button 的 flex 容器行为） */
  .section_2 > .section_4 .text_42 {
    display: block;
    width: 100%;
    margin: 8px 0;
    text-align: center;
  }

  /* Email 信息块：桌面与表单并排且顶端对齐，手机端排到表单下方 */
  .section_2 > .section_4 .email-group {
    order: 1;
    align-self: stretch;
    width: 100%;
    height: auto;
    margin: 16px 0 16px;
  }

  /* “Our Email” 标题：手机端字号收小 */
  .section_2 > .section_4 .text_47 {
    font-size: 22px;
    line-height: 30px;
  }

  /* 邮件图标：源图为 64×64 正方形，宽高同步收小，避免压扁变形 */
  .section_2 > .section_4 .box_4 {
    margin-top: 16px;
    /* 与下方说明文字的间距由 .text_48 的 margin-top 控制，避免叠加 */
    margin-bottom: 0;
    gap: 16px;
  }

  .section_2 > .section_4 .image_7 {
    width: 36px;
    height: 36px;
    /* 与其他内容左对齐（容器左边距 16px） */
    margin-left: 0;
  }

  /* 邮箱链接：铺满剩余宽度，允许折行 */
  .section_2 > .section_4 .text_46 {
    width: auto;
    height: auto;
    font-size: 19px;
    font-weight: 600;
    line-height: 28px;
    letter-spacing: normal;
    white-space: normal;
  }

  /* 说明文字：手机端铺满容器宽度，字号收小；上下各留 24px */
  .section_2 > .section_4 .text_48 {
    width: 100%;
    height: auto;
    margin: 24px 0 24px;
    font-size: 16px;
    line-height: 28px;
    letter-spacing: normal;
    white-space: normal;
  }

  /* 全球分布地图：手机端左右留 16px，与上方内容块对齐；
     上边距归零，与说明文字的间距由 .text_48 的 margin-bottom 承担 */
  .section_2 > .map-image {
    width: auto;
    height: auto;
    margin: 0 16px 0;
  }

  /* 国家区号下拉框：PC 端为 width:max-content（按最长一行撑开，约 498px），
     窄屏会溢出到视口外；手机端改为跟随输入区宽度并收小字号 */
  .section_2 > .section_4 .country-code-dropdown {
    width: 100%;
    max-width: 100%;
  }

  .section_2 > .section_4 .country-code-item {
    padding: 8px 12px;
    font-size: 18px;
    line-height: 26px;
  }

  /* ---------- login ---------- */
  .box_3 {
    width: 100%;
    height: auto;
    padding: 0 24px 64px;
    box-sizing: border-box;
  }

  .box_3 .text_5 {
    width: auto;
    height: auto;
    font-size: 34px;
    line-height: 42px;
    white-space: normal;
    margin: 48px 0 0;
    top: 0;
  }

  .box_3 .field-group {
    width: 100%;
    margin-left: 0;
  }

  .box_3 .text_6 {
    width: auto;
    margin-top: 32px;
    top: 0;
  }

  .box_3 .image_2,
  .box_3 .image_3 {
    width: 100%;
  }

  .box_3 .text-wrapper_1 {
    align-self: stretch;
    width: 100%;
    margin: 40px 0 0;
  }

  .box_3 .text_8 {
    width: auto;
    margin: 20px 0 0;
    text-align: center;
  }

  /* 底部两行链接：图标 + 长文案，需允许换行并铺满宽度 */
  .box_3 .image-text_2,
  .box_3 .image-text_3 {
    width: 100%;
    height: auto;
    margin: 20px 0 0;
    align-items: flex-start;
  }

  .box_3 .text-group_2,
  .box_3 .text-group_3 {
    width: auto;
    height: auto;
    flex: 1;
    min-width: 0;
    font-size: 16px;
    line-height: 26px;
    white-space: normal;
    overflow-wrap: break-word;
  }

  /* ---------- 页脚：手机端改为手风琴（logo + 可展开的父标题） ---------- */
  .block_6 {
    width: 100%;
    height: auto;
    margin-top: 48px;
    padding: 32px 16px 24px;
    box-sizing: border-box;
  }

  .block_6 .block_7 {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
    /* 与 .block_6 的 padding-top(32) 和 logo 的 margin-top(5) 相加 = 40px，
       即 logo 距页脚上边框固定 40px */
    margin-top: 3px;
    /* PC 端 margin-bottom 为 80px，手机端归零：版权行的上间距由
       .text-wrapper_9 的 margin-top(24px) 单独控制，避免叠加成 104px */
    margin-bottom: 0;
  }

  /* 页脚 logo 与顶栏 logo 保持同宽（80px），高度等比例 */
  .block_6 .block_7 .image_2 {
    width: 80px;
    height: 27px;
  }

  .block_6 .block_7 .logo-link {
    flex: none;
    margin-bottom: 8px;
  }

  /* common.css 给所有元素设了 flex-shrink:0，手机端需放开以免溢出 */
  .block_6 .block_7,
  .block_6 .block_7 > *,
  .block_6 .block_7 .footer-col,
  .block_6 .block_7 .footer-col > *,
  .text-wrapper_9 {
    flex-shrink: 1;
  }

  /* 每个父标题一列，底部细分隔线 */
  .block_6 .block_7 .footer-col {
    width: 100%;
    min-width: 0;
    padding-top: 0;
    gap: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  }

  /* 父标题：每个 footer-col 的第一个元素，整行可点，右侧带展开箭头。
     width 撑满整列（覆盖桌面端的固定宽度），使箭头能定位到列的最右边 */
  .block_6 .block_7 .footer-col > span:first-child {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    height: auto;
    min-height: 52px;
    padding-right: 36px;
    font-size: 16px;
    white-space: nowrap;
    letter-spacing: normal;
    cursor: pointer;
    transition: color 0.2s ease;
  }

  /* 父标题箭头：页脚底色深（#2c2c2c），用白色箭头才可见 */
  .block_6 .block_7 .footer-col > span:first-child::after {
    content: "";
    position: absolute;
    /* 右边距与父标题左边距对称（列本身已距内容区边缘 16px，故此处为 0） */
    right: 0;
    top: 50%;
    width: 16px;
    height: 16px;
    background-image: url(../icons/mobile/arrow-down-light.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    transform: translateY(-50%);
    transition: transform 0.25s ease;
  }

  /* 高亮色与子链接一致（桌面 .text_xx:hover 的 #48B887） */
  .block_6 .block_7 .footer-col.is-expanded > span:first-child {
    color: #48B887;
  }

  .block_6 .block_7 .footer-col.is-expanded > span:first-child::after {
    transform: translateY(-50%) rotate(180deg);
  }

  /* 父标题：悬停与按下均高亮（与子链接一致） */
  .block_6 .block_7 .footer-col > span:first-child:hover,
  .block_6 .block_7 .footer-col > span:first-child:active {
    color: #48B887;
  }

  /* 子链接：手机端无 hover，用 :active / :hover 提供与父标题一致的高亮 */
  .block_6 .block_7 .footer-col > a:hover,
  .block_6 .block_7 .footer-col > a:active,
  .block_6 .block_7 .footer-col > span:not(:first-child):hover,
  .block_6 .block_7 .footer-col > span:not(:first-child):active {
    color: #48B887;
  }

  /* 子项（链接、Download、社交图标）：默认收起，展开时向下撑开；
     同时放开桌面端固定的 width（如 86px），否则文字被截断。
     过渡属性合并声明，避免后一条覆盖收起动画的 max-height/opacity。 */
  .block_6 .block_7 .footer-col > a,
  .block_6 .block_7 .footer-col > span:not(:first-child),
  .block_6 .block_7 .footer-col > .social-icons {
    width: auto;
    height: auto;
    white-space: nowrap;
    letter-spacing: normal;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.28s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s ease,
      color 0.2s ease;
  }

  .block_6 .block_7 .footer-col.is-expanded > a,
  .block_6 .block_7 .footer-col.is-expanded > span:not(:first-child) {
    max-height: 44px;
    opacity: 1;
    padding: 6px 0;
    font-size: 14px;
  }

  .block_6 .block_7 .footer-col.is-expanded > .social-icons {
    max-height: 80px;
    opacity: 1;
    padding: 10px 0 14px;
  }

  /* 页脚链接字重减轻：.text_18 / .text_16 在全局被 about-our-facility 的标题和正文复用，
     故限定到页脚的链接上，避免影响其他页面 */
  .block_6 .block_7 .footer-col > a.text_18,
  .block_6 .block_7 .footer-col > a.text_16,
  .block_6 .block_7 .footer-col > a.text_19,
  .block_6 .block_7 .footer-col > a.text_17 {
    font-weight: 300;
  }

  .block_6 .block_7 .footer-col .social-icons {
    gap: 20px;
  }

  .text-wrapper_9 {
    width: 100%;
    justify-content: center;
    margin-top: 24px;
  }

  .text_23 {
    font-size: 12px;
  }

  /* ---------- Cookie 同意横幅：手机端通栏贴底，内容区上下堆叠 ---------- */
  .cookie-consent {
    width: 100%;
    padding: 0 16px;
    /* 标题高度收窄为 44px（20px 行高 + 上下各 12px），分隔线随之对齐 */
    --cc-title-h: 44px;
  }

  .cookie-consent__title {
    height: var(--cc-title-h);
    padding: 0;
    font-size: 15px;
    line-height: 20px;
  }

  /* 文字与按钮上下堆叠，按钮占满整行 */
  .cookie-consent__content {
    flex-direction: column;
    margin-top: 8px;
    padding-bottom: 12px;
  }

  .cookie-consent__body {
    width: 100%;
    max-width: 100%;
    font-size: 13px;
    line-height: 20px;
  }

  .cookie-consent__actions {
    width: 100%;
    margin-left: 0;
    margin-top: 2px;
    padding-top: 8px;
    /* 按钮文字较长（Accept/Reject All Cookies），窄屏并排会截断，
       故改为上下堆叠、各占整行 */
    flex-direction: column;
  }

  .cookie-consent__btn {
    width: 100%;
    font-size: 14px;
  }

  .cookie-consent__btn--accept {
    margin-right: 0;
    margin-bottom: 8px;
  }
}

/* ---------- 手机（<768px）：在平板基础上进一步收窄 ---------- */
@media (max-width: 767px) {
  /* 产品列表：三列改两列 */
  .section_2 > .content-area .product-item {
    width: calc((100% - 16px) / 2);
  }
}