@charset "utf-8";
/* ==========================================================================
   手机版样式修正  mobile-fix-20261109.css
   站点：dobladora-de-tubo.com
   作用：修复 390px / 360px 等手机视口下的布局与可用性问题
   加载：所有页面 </head> 前最后一条 <link>，优先级高于站点原样式表
   说明：全部规则都包在媒体查询里，桌面端（≥992px）零影响
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 右侧抽屉菜单（汉堡菜单）
   原问题：
     a) 抽屉宽 70%、right:1%，顶部从 y=0 开始，压住页头 logo
     b) 菜单项 font-size:12px、行高 14px，单行可点区域约 28px，低于 44px 触控标准
     c) 关闭按钮 × 在 48 个页面上没有绑定任何脚本，点了没反应
     d) 抽屉打开时没有遮罩，左侧正文裸露，观感破碎
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {

  /* 1.1 抽屉本体：贴右边、白底、带投影、内部可滚动 */
  header.site-header .navbar-collapse,
  header.site-header .navbar-collapse.collapse,
  header.site-header .navbar-collapse.collapse.in {
    position: fixed;
    top: 0;
    right: 0;
    left: auto;
    width: 84%;
    max-width: 330px;
    height: 100%;
    max-height: 100%;
    margin: 0;
    padding: 0 0 28px 0;
    background: #fff;
    border: 0;
    border-left: 1px solid #e3e3e3;
    box-shadow: -8px 0 28px rgba(0, 0, 0, .22);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    z-index: 1300;
  }

  /* 1.2 关闭按钮：粘在抽屉顶部左侧，52px 高，避开右上角汉堡按钮 */
  header.site-header .navbar-collapse li.delete {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    left: 0;
    display: block !important;
    width: 100% !important;
    height: 52px;
    margin: 0 !important;
    padding: 0 !important;
    background: #fff;
    border-bottom: 1px solid #ececec;
    text-align: left;
    z-index: 3;
  }

  header.site-header .navbar-collapse li.delete span.glyphicon {
    position: static !important;
    float: none !important;
    display: inline-block !important;
    width: auto !important;
    left: auto !important;
    right: auto !important;
    font-size: 22px;
    line-height: 52px;
    color: #8a8a8a;
    padding: 0 18px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  header.site-header .navbar-collapse li.delete span.glyphicon:active {
    color: #c62828;
  }

  /* 1.3 菜单项：15px 字号、整行 46px 高，整块可点 */
  header.site-header .navbar-collapse ul {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none;
  }

  header.site-header .navbar-collapse ul li {
    float: none !important;
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border-bottom: 1px solid #f0f0f0;
    font-size: 15px;
    line-height: 1.4;
    text-align: left;
  }

  header.site-header .navbar-collapse ul li strong {
    display: block;
    font-weight: 400;
  }

  header.site-header .navbar-collapse ul li a,
  header.site-header .navbar-collapse ul li a.navbar-dt-a {
    display: block;
    min-height: 46px;
    padding: 14px 18px;
    font-size: 15px !important;
    line-height: 1.35;
    color: #1f1f1f !important;
    text-decoration: none;
    text-align: left;
    -webkit-tap-highlight-color: rgba(0, 0, 0, .06);
  }

  header.site-header .navbar-collapse ul li a.active,
  header.site-header .navbar-collapse ul li a:active {
    background: #f4f7fb;
    color: #0b62c4 !important;
  }

  /* 1.4 抽屉打开时加半透明遮罩，并锁定背景滚动
         （用 :has 判断，不支持的浏览器自动跳过，不影响菜单本身） */
  body:has(header.site-header .navbar-collapse.in)::after {
    content: "";
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, .45);
    z-index: 1;
  }

  body:has(header.site-header .navbar-collapse.in) {
    overflow: hidden;
  }

  /* 1.5 汉堡按钮压在抽屉之上，任何时候都能点 */
  header.site-header .navbar-toggler {
    position: relative;
    z-index: 1400;
  }
}

/* 超窄屏（≤360px）再放宽一点抽屉 */
@media (max-width: 360px) {
  header.site-header .navbar-collapse,
  header.site-header .navbar-collapse.collapse,
  header.site-header .navbar-collapse.collapse.in {
    width: 90%;
  }
}

/* --------------------------------------------------------------------------
   2. 右下角浮动咨询按钮不再压住正文
   原问题：#INDEXT1 / #INDEXT_RB_AD 固定在 bottom:88px，滚动到页面末尾时
           正好压在页脚文字上；body 没有留出底部空间。
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {

  /* 只在确实存在浮动按钮的页面留底部空白，避免其他页面凭空多出 80px */
  body:has(#INDEXT1),
  body:has(#INDEXT_RB_AD) {
    padding-bottom: 80px;
  }

  #INDEXT1,
  #INDEXT_RB_AD {
    right: 8px !important;
    bottom: 12px !important;
    left: auto !important;
    width: 48px !important;
    height: 48px !important;
    z-index: 1100;
  }

  #INDEXT1 img,
  #INDEXT_RB_AD img {
    width: 48px !important;
    height: 48px !important;
    display: block;
  }
}

/* --------------------------------------------------------------------------
   3. 表格在手机上不再横向溢出
   原问题：33 个页面用 <table class="col-md-12"> 做规格表，表格实际宽度
           比父容器宽 3–7px，右侧被切掉一条边，或撑出横向滚动。
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {

  .container table,
  article table {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .container table td,
  .container table th,
  article table td,
  article table th {
    padding: 7px 5px;
    font-size: 13px;
    line-height: 1.5;
    vertical-align: top;
    word-break: break-word;
    overflow-wrap: anywhere;
  }

  .container table img,
  article table img {
    max-width: 100% !important;
    height: auto !important;
  }
}

/* --------------------------------------------------------------------------
   4. 产品卡片（.product-drawing）
   原问题：≤767px 时图片被强制 height:160px，而卡片宽只有 164px，
           图片按 object-fit:contain 缩成 153×113，上下各留 23px 白边；
           p 又设了 min-height:38px，导致同一行卡片高低不齐。
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {

  .product-drawing ul li img {
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain;
    object-position: center;
    background: #fff;
  }

  .product-drawing ul li p {
    min-height: 0 !important;
    margin: 6px 2px 0 !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
  }

  .product-drawing ul li p strong {
    font-size: 13px;
    line-height: 1.35;
  }

  /* 卡片内边距收紧，让 164px 宽度用在图片和文字上 */
  .product-drawing ul li {
    padding-left: 5px !important;
    padding-right: 5px !important;
    margin-bottom: 12px;
  }

  .product-drawing ul li a {
    display: block;
    text-decoration: none;
  }
}

/* --------------------------------------------------------------------------
   5. 图片与长串不撑破容器
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {

  article img,
  .container section img,
  .container p img {
    max-width: 100% !important;
    height: auto !important;
  }

  .container video,
  article video {
    max-width: 100% !important;
    height: auto !important;
  }
}

@media (max-width: 767px) {

  /* 正文长单词/长串不撑破容器 */
  article,
  article p,
  article li,
  article h1,
  article h2,
  article h3,
  .container p {
    overflow-wrap: break-word;
    word-wrap: break-word;
  }

  /* H1 与页头之间留出呼吸空间（原来只有 5px） */
  article > h1:first-child,
  article > section:first-child > h1:first-child,
  .container article h1:first-of-type {
    margin-top: 14px !important;
    margin-bottom: 12px !important;
  }
}

/* --------------------------------------------------------------------------
   6. 页脚文字不溢出
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {

  footer,
  footer p,
  footer div {
    overflow-wrap: break-word;
    word-wrap: break-word;
  }

  footer img {
    max-width: 100% !important;
    height: auto !important;
  }
}