@charset "utf-8";
/* =============================================================
   熊猫茶官网 移动端修复补丁 v1.0 / 2026-11-09
   线上路径: /style/css/mobile-fix.css
   加载顺序: clearfix_common → clearfix_default → clearfix_inside → style.css → 本文件
   作用: 仅 <=768px 生效，解除 1100px 固定宽、内页流式化、恢复咨询入口
   桌面端零影响；回滚只需删除 header.php 中的 link 与本文件
   ============================================================= */

@media (max-width: 768px) {
  /* 1. 解除 style.css:10 的 body{min-width:1100px} —— 破版主因 */
  html, body {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }
  body { padding-bottom: 70px !important; } /* 给底部咨询条留位，防止末屏内容被压住 */

  /* 2. 内页容器流式化（覆盖 clearfix_inside.css 的固定宽） */
  .container, .container .wrap {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    box-sizing: border-box !important;
  }

  /* 3. 恢复内页侧栏：archive.php 的 .menu 即"在线留言/联系方式"二级入口，
        原 style.css 手机端 .sidebar{display:none} 把它整块藏了 */
  .container .sidebar {
    display: block !important;
    float: none !important;
    width: 100% !important;
    margin: 0 0 14px !important;
    padding: 0 0 10px !important;
  }
  .container .main {
    float: none !important;
    width: 100% !important;
    margin: 0 !important;
  }
  .location { overflow: hidden; }
  .location .colCurTit { float: none !important; display: block; font-size: 20px; }
  /* 原 .iTel 带 tel.jpg 背景图 + padding-left:64px，窄屏下与标题挤在一起 */
  .location .iTel {
    float: none !important; display: block; margin-top: 8px;
    height: auto !important; padding-left: 0 !important; background: none !important;
  }
  .breadcrumbs { margin-bottom: 12px !important; }
  .menu dl { display: flex !important; flex-wrap: wrap !important; overflow-x: auto !important; }
  .menu dl dt { float: none !important; }
  .menu dl dt a {
    width: auto !important;
    padding: 0 14px !important;
    line-height: 40px !important;
    font-size: 13px !important;
    white-space: nowrap;
  }

  /* 4. 底部"最新产品推荐"：clearfix_inside.css 写死 1102 / 1084px */
  .new .hd, .new .bd {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 0 12px !important;
    box-sizing: border-box !important;
  }
  .new .bd .tempWrap { width: 100% !important; float: none !important; }
  .new .bd .prev, .new .bd .next { display: none !important; }
  .new .bd li { float: none !important; display: inline-block !important; margin: 0 8px 8px 0 !important; }
  .new .bd li img, .new .bd li a img { width: 110px !important; height: auto !important; }

  /* 5. 联系我们页：地图 1102x502 改自适应 */
  .cp-map, .contact-map {
    width: 100% !important;
    height: 240px !important;
    margin: 0 0 16px !important;
  }
  .cp-map iframe, .contact-map iframe { width: 100% !important; height: 100% !important; }
  /* 单列：保持主题原有 @media(max-width:700px) 的 1fr，勿改成 2 列，
     否则 375px 下每列仅 ~165px，标题会被挤成竖排、右列内容被裁切 */
  .cp-info-grid { grid-template-columns: 1fr !important; gap: 10px !important; }
  /* 原 .cp-card 是 icon|h3|p 三列 flex，窄屏会把标签挤成两行；
     改为 icon 左列跨两行、标签与内容右列各一行 */
  .cp-card {
    padding: 14px 16px !important;
    display: grid !important;
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 3px 12px;
    align-items: center;
  }
  .cp-card .cp-icon { grid-row: 1 / span 2; }
  .cp-card h3, .cp-card p {
    grid-column: 2;
    margin: 0 !important;
    white-space: normal !important;
    word-break: break-word !important;
  }
  .cp-card p { overflow-wrap: anywhere; }

  /* 6. 在线留言 / 招商表单：textarea 450px、label 100px 改流式 */
  .form-panel { margin: 0 !important; }
  .form-panel h4 { padding: 8px 12px !important; }
  .form-panel ul { padding: 0 !important; margin: 0 !important; list-style: none; }
  .form-panel li.field label {
    float: none !important;
    display: block !important;
    width: auto !important;
    text-align: left !important;
    line-height: 22px !important;
  }
  .form-panel .input { display: block !important; }
  .form-panel .text, .form-panel .textarea {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .form-panel .textarea { height: 96px !important; }
  .form-panel .submit-field { padding: 6px 0 16px 0 !important; }
  .form-panel .btn-submit, .form-panel .btn-reset {
    width: 96px !important;
    height: 36px !important;
    border-radius: 8px !important;
    border: none;
    color: #fff !important;
    background: #088336 !important;
  }
  .form-panel .btn-reset { background: #9aa8a0 !important; }

  /* 7. 列表 / 文章内页其它固定宽 */
  .message-list { padding: 10px 12px !important; }
  .list ul li { padding-left: 12px !important; height: auto !important; }
  .read ul li, .pn_01 .txt { width: 100% !important; height: auto !important; float: none !important; }
  .artbox, .contact, .cart { margin: 0 !important; padding: 10px !important; }

  /* 8. 移动端底部快捷咨询条（纯静态，不查数据库） */
  .m-consult-bar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 9999;
    display: flex !important;
    background: #fff;
    border-top: 1px solid #e6ede8;
    box-shadow: 0 -4px 18px rgba(10,60,30,.12);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .m-consult-bar a {
    flex: 1;
    text-align: center;
    text-decoration: none;
    font-size: 12px;
    line-height: 1.3;
    padding: 11px 2px 10px;
    color: #4a5a50;
  }
  .m-consult-bar a.mcb-primary {
    color: #fff !important;
    background: #088336;
    font-weight: 600;
  }
  .m-consult-bar a:active { opacity: .82; }
}

/* 桌面端不显示咨询条 */
@media (min-width: 769px) {
  .m-consult-bar { display: none !important; }
}


/* =============================================================
   移动端 v2 深度修复 / 2026-11-09
   ① 首页恢复内容  ② 顶部导航宫格化  ③ 联系方式分区  ④ 页脚解除固定宽
   本段位于文件末尾、最后加载；全部限定 <=768px，桌面端零影响
   ============================================================= */
@media (max-width: 768px) {

  /* ---------- ① 手机首页：style.css:666 的全局 display:none 在此覆盖 ---------- */
  .mobile-home-posts {
    display: block !important;
    padding: 12px 0 8px !important;
    margin: 0 !important;
    background: transparent !important;
  }
  .mhp-title, .mhp-list { display: none !important; }  /* 旧版纯文字列表已弃用 */

  .mh-hero {
    position: relative; overflow: hidden;
    margin: 0 0 18px; padding: 22px 20px 20px;
    border-radius: 22px; color: #fff;
    background: linear-gradient(135deg,#0c8a42 0%,#12a154 55%,#3cba72 100%);
    box-shadow: 0 10px 26px rgba(8,80,38,.18);
  }
  .mh-hero::after {
    content: ""; position: absolute; right: -40px; bottom: -60px;
    width: 170px; height: 170px; border-radius: 50%;
    background: rgba(255,255,255,.10);
  }
  .mh-hero-badge {
    display: inline-block; font-size: 11px; letter-spacing: .12em;
    background: rgba(255,255,255,.20); padding: 4px 12px;
    border-radius: 999px; margin-bottom: 10px;
  }
  .mh-hero h1 { font-size: 23px; line-height: 1.3; margin: 0 0 8px; font-weight: 700; }
  .mh-hero p  { font-size: 13px; line-height: 1.7; margin: 0 0 16px; opacity: .94; }
  .mh-hero-btns { display: flex; gap: 10px; position: relative; z-index: 1; }
  .mh-btn {
    flex: 1; text-align: center; text-decoration: none;
    font-size: 14px; font-weight: 600; padding: 11px 0;
    border-radius: 999px; transition: transform .18s, opacity .18s;
  }
  .mh-btn:active { transform: scale(.97); opacity: .9; }
  .mh-btn-main  { background: #fff; color: #088336; }
  .mh-btn-ghost { background: rgba(255,255,255,.18); color: #fff; }

  .mh-sec { margin: 0 0 20px; }
  .mh-title {
    font-size: 16px; color: #1d3a28; font-weight: 700;
    margin: 0 0 11px; padding-left: 11px;
    border-left: 4px solid #088336; line-height: 1.2;
  }
  .mh-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .mh-cell {
    display: flex; align-items: center; gap: 10px; min-width: 0;
    background: #fff; border-radius: 16px; padding: 12px;
    text-decoration: none; color: #263a2d;
    box-shadow: 0 3px 12px rgba(20,70,40,.07);
    transition: transform .18s, box-shadow .18s;
  }
  .mh-cell:active { transform: scale(.97); }
  .mh-ico {
    flex: 0 0 38px; width: 38px; height: 38px; border-radius: 12px;
    background: #e9f6ee; color: #088336; font-size: 17px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
  }
  .mh-cell-t { font-size: 13px; line-height: 1.35; min-width: 0; word-break: break-all; }

  .mh-news { list-style: none; padding: 0; margin: 0; }
  .mh-news li {
    background: #fff; border-radius: 16px; margin-bottom: 10px; overflow: hidden;
    box-shadow: 0 3px 12px rgba(20,70,40,.07);
  }
  .mh-news li a {
    display: flex; gap: 12px; align-items: center;
    padding: 11px; text-decoration: none; color: inherit; min-width: 0;
  }
  .mh-news-img {
    flex: 0 0 78px; width: 78px; height: 66px;
    border-radius: 12px; overflow: hidden; background: #eef4ef;
  }
  .mh-news-img img { width: 100%; height: 100%; object-fit: cover; }
  .mh-news-info { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
  .mh-news-t {
    font-size: 14px; font-weight: 600; color: #22352a; line-height: 1.4;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .mh-news-d { font-size: 11px; color: #9aa9a0; }

  .mh-contact {
    background: #fff; border-radius: 16px; padding: 4px 14px;
    box-shadow: 0 3px 12px rgba(20,70,40,.07);
  }
  .mh-contact p {
    display: flex; gap: 12px; margin: 0; padding: 11px 0;
    border-bottom: 1px solid #f0f4f1; font-size: 13px; line-height: 1.5;
  }
  .mh-contact p:last-child { border-bottom: none; }
  .mh-contact p span { flex: 0 0 62px; color: #879a8d; }
  .mh-contact p b { font-weight: 600; color: #22352a; min-width: 0; word-break: break-word; }
  .mh-contact p b a { color: #088336; text-decoration: none; }

  /* ---------- ② 顶部与导航：解除 1102px 固定宽，菜单改等宽宫格 ---------- */
  .header, .topArea, .nav, .footer, .ftMes, .ftMes .wrap {
    width: 100% !important; max-width: 100% !important; box-sizing: border-box !important;
  }
  .topArea {
    height: auto !important; margin: 0 !important;
    padding: 10px 12px 6px !important; overflow: hidden;
  }
  .topArea .logo { float: none !important; margin: 0 !important; display: block !important; text-align: center; }
  .topArea .logo img {
    width: auto !important; max-width: 78% !important;
    height: auto !important; max-height: 46px !important;
  }
  .topArea .tel { display: none !important; }

  .nav { height: auto !important; overflow: visible !important; margin: 0 !important; background: #fff !important; }
  .nav ul {
    display: flex !important; flex-wrap: wrap !important; white-space: normal !important;
    width: 100% !important; padding: 0 !important; margin: 0 !important;
  }
  .nav ul li {
    flex: 0 0 25% !important; width: 25% !important; float: none !important;
    height: auto !important; min-height: 46px; position: relative;
    background: none !important; box-sizing: border-box !important;
    border-bottom: 1px solid #eef2ef;
  }
  .nav ul li::after { display: none !important; }
  .nav ul li a {
    display: flex !important; align-items: center; justify-content: center;
    width: 100% !important; height: 100% !important; min-height: 46px;
    padding: 8px 4px !important; box-sizing: border-box !important;
    font-size: 12px !important; line-height: 1.3 !important; font-weight: 500 !important;
    text-align: center !important; white-space: normal !important; word-break: break-all;
    color: #3d4f43 !important; background: none !important;
  }
  .nav ul li a.current, .nav ul li a:hover { color: #088336 !important; background: #eef8f1 !important; }
  .nav ul li.nav-home { flex: 0 0 25% !important; }
  .nav ul li.nav-home svg { width: 20px; height: 20px; }
  .nav .subNav, .nav ul li:hover .subNav { display: none !important; }
  .banner { display: none !important; }

  /* ---------- ③ 联系方式区：标题 / 电话 / 面包屑三块分离，不再黏连 ---------- */
  .container .location {
    width: 100% !important; margin: 0 0 12px !important; padding: 0 !important;
    overflow: visible; clear: both;
  }
  .container .location .colCurTit {
    float: none !important; clear: both; display: block !important;
    font-size: 21px !important; line-height: 1.35; margin: 0 0 10px !important; padding: 0 !important;
  }
  .container .location .colCurTit em { display: none !important; }
  .container .location .iTel {
    position: relative; float: none !important; clear: both; display: block !important;
    width: 100% !important; box-sizing: border-box !important;
    height: auto !important; min-height: 0 !important;
    margin: 0 0 10px !important; padding: 12px 14px 12px 56px !important;
    background: #eef8f1 !important; border-radius: 14px;
    font-size: 12px !important; color: #5d7265; line-height: 1.5;
  }
  .container .location .iTel::before {
    content: "电"; position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
    width: 32px; height: 32px; border-radius: 10px;
    background: #088336; color: #fff; font-size: 14px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
  }
  .container .location .iTel em {
    display: block !important; font-style: normal !important;
    font-size: 17px !important; font-weight: 700 !important;
    color: #088336 !important; line-height: 1.35 !important;
  }
  .container .breadcrumbs {
    clear: both; float: none !important;
    margin: 0 0 12px !important; padding: 0 !important; font-size: 12px;
  }
  .container .sidebar { margin-bottom: 14px !important; }
  .container .sidebar .menu { width: 100% !important; border-radius: 14px; overflow: hidden; }
  .container .sidebar .menu dl {
    display: grid !important; grid-template-columns: repeat(2, 1fr) !important;
    width: 100% !important; margin: 0 !important; padding: 0 !important;
    overflow: visible !important;
  }
  .container .sidebar .menu dl dt {
    float: none !important; width: auto !important;
    border-right: none !important; border-bottom: 1px solid #f0f4f1;
  }
  .container .sidebar .menu dl dt a {
    display: block !important; width: auto !important;
    padding: 12px 6px !important; line-height: 1.35 !important;
    font-size: 13px !important; text-align: center !important;
    white-space: normal !important; word-break: break-all;
  }

  /* ---------- ④ 页脚：解除 .wrap 1102px 与 .ftMes 固定 150px 高 ---------- */
  .footer .ftMes, .footer .ftMes .wrap,
  .footer .ftLink, .footer .ftOt, .footer .ftLogo, .footer .copyRight, .footer .ftNav {
    width: 100% !important; max-width: 100% !important; box-sizing: border-box !important;
  }
  .footer { margin-top: 16px !important; }
  .footer .ftMes { height: auto !important; padding: 18px 0 14px !important; background: #f4f6f4 !important; }
  .footer .ftMes .wrap { padding: 0 14px !important; margin: 0 !important; }
  .footer .ftLink {
    height: auto !important; line-height: 1.6 !important;
    padding: 0 0 10px !important; margin: 0 0 10px !important;
    background: none !important; border-bottom: 1px solid #dde5de !important;
    font-size: 12px !important; text-align: center !important;
  }
  .footer .ftLink::before {
    content: "友情链接 LINKS"; display: block;
    font-size: 14px; font-weight: 700; color: #4a6353;
    margin-bottom: 6px; letter-spacing: .04em;
  }
  .footer .ftLink a { padding: 0 8px !important; font-size: 12px; color: #5a6e60; }
  .footer .ftOt { padding: 0 !important; margin: 0 !important; display: block !important; overflow: hidden; }
  .footer .ftLogo {
    float: none !important; display: block !important; text-align: center !important;
    margin: 0 0 10px !important;
  }
  .footer .ftLogo img { width: 190px !important; max-width: 80% !important; height: auto !important; }
  .footer .copyRight {
    float: none !important; display: block !important;
    padding: 0 !important; margin: 0 !important;
    text-align: center !important; line-height: 1.7 !important;
    font-size: 12px !important; color: #6a7c70 !important;
  }
  .footer .copyRight p { margin: 3px 0 !important; word-break: break-word; }
  .footer .copyRight a { color: #5a6e60; }
  .footer .ftNav {
    display: flex !important; flex-wrap: wrap !important;
    justify-content: center !important; align-items: center;
    padding: 14px 10px !important; margin: 0 !important;
    line-height: 1.4 !important; white-space: normal !important;
    background: #098336 !important; font-size: 0 !important;
  }
  /* v2：分隔符隐藏、电话另起一行（桌面端由 span 的 inline 默认保持原样） */
  .footer .ft-sep { display: none !important; }
  .footer .ft-sep-tel { display: block !important; margin-top: 2px; }
  .footer .ftNav a {
    display: inline-block !important;
    font-size: 12px !important; line-height: 1.3 !important;
    padding: 7px 11px !important; margin: 3px 4px !important;
    color: #fff !important; background: rgba(255,255,255,.12);
    border-radius: 999px; text-decoration: none; white-space: nowrap !important;
  }
  .footer .ftNav a:hover, .footer .ftNav a:active { background: rgba(255,255,255,.26); }
}

/* 桌面端：手机首页区块必须隐藏（style.css:666 之外再加一道保险） */
@media (min-width: 769px) {
  .mobile-home-posts { display: none !important; }
}