@charset "utf-8";
/* ==========================================================================
   得宝月子中心 · 移动端体验改造 V5.1 → V5.2
   --------------------------------------------------------------------------
   V5.1（2026-09-19 晚 · 卡片版式重做，针对安卓桌面回退 901-1100px）：
   ① 部分安卓浏览器忽略 viewport meta，按桌面回退宽度（约 980-1100px）
      排版再整页缩小 → 901-1100px 是断点空白区，本文件专门接管该区间。
   ② 用户实机反馈（09-19 晚）：单列卡片上下粘连；四店大图零间距连片；
      页脚「快捷导航」栏与顶部抽屉菜单重复。
   处方：核心服务卡白底 + 边框 + 圆角 + 投影，卡间 16px；优势/四店卡
   单列 + 18px 间距 + 圆角；新闻单列；页脚快捷导航 ≤1100 隐藏。

   V5.2（2026-09-20 · ≤767px 真手机宽度补卡片化）：
   用户实机反馈（09-20 凌晨，微信内置浏览器 + iPhone Safari 截图）：
   品牌优势大图卡与四店环境大图卡在真手机上仍上下直连、零间距。
   根因：V5.1 只覆盖了 901-1100px（安卓桌面回退路径）；微信 / iPhone
   以正常 device-width（375-430px）渲染，落在 style.css 的 ≤600/≤550
   断点 —— 那里 .page_list2 ul li 为 width:100% 且无任何 margin，
   .page2 区块 padding:0，大图卡满宽直连成「图片墙」。
   处方（≤767px 一刀覆盖全部真手机宽度）：
   - page_list2 大图卡：ul 左右 12px 留白，卡片圆角 10px + 14px 间距；
   - page_list1 核心服务白卡：缝隙 6px → 12px，统一圆角与投影；
   - page2 区块显式垂直节奏（22/14px），不再依赖级联顺序。
   ≥1101px 桌面端依旧零改动。901-1100px 段（V5.1）保持原样。
   回滚：删除本文件 + 移除 header.htm 中的引入行与视口自愈脚本即可。
   ========================================================================== */

/* ---------- 901–1100px：单列大字 + 卡片间距（对齐移动端观感） ---------- */
@media only screen and (min-width: 901px) and (max-width: 1100px) {

  /* —— 核心服务：白底卡片，卡间 16px —— */
  .page_list1 ul { margin: 0; }
  .page_list1 ul li { width: 100%; margin-bottom: 16px; }
  .page_list1 ul li:last-child { margin-bottom: 0; }
  .page_list1 ul li .list {
    margin: 0;
    box-sizing: border-box;
    padding: 36px 26px 32px;
    background: #fff;
    background-image: none;
    border: 1px solid rgba(93, 58, 26, 0.14);
    border-radius: 10px;
    box-shadow: 0 2px 14px rgba(44, 36, 22, 0.07);
  }
  .page_list1 ul li .list h3 { font-size: 24px; }
  .page_list1 ul li .list p { height: auto; font-size: 17px; line-height: 1.75; }

  /* —— 品牌优势 / 四店环境：单列卡 + 18px 间距 + 圆角 —— */
  .page_list2 ul { overflow: visible; }
  .page_list2 ul li { width: 100%; margin-bottom: 18px; }
  .page_list2 ul li:last-child { margin-bottom: 0; }
  .page_list2 ul li a { border-radius: 10px; }
  .page_list2 ul li .img img { height: 300px; }
  .page_list2 ul li .text h3 { font-size: 24px; }
  .page_list2 ul li .text p { font-size: 17px; opacity: 1; }

  /* —— 首页新闻：两栏 → 单列，避免窄屏挤压 —— */
  .page_news { flex-direction: column; gap: 18px; }
  .page_news .item { width: 100%; min-height: 0; }
  .page_news .list h3 { font-size: 16px; }

  /* —— 关于页：正文大字 + 发展历程单列 —— */
  .about_text .text { font-size: 16px; line-height: 30px; }
  .history_list ul li { width: 100% !important; }

  /* —— 页脚：快捷导航隐藏（顶部抽屉菜单已有同套栏目，属重复），
        其余三栏两两堆叠 —— */
  .footer .f_quick { display: none !important; }
  .footer .foot { flex-wrap: wrap; gap: 24px; }
  .f_brand, .f_social, .f_stores, .f_quick { width: 45%; }
}

/* ---------- 421–1100px：统计条定宽 290px → 流式三列 ----------
   min-width:421 圈定 → ≤420px 的 48% 两列既有规则不受本文件影响。 */
@media only screen and (min-width: 421px) and (max-width: 1100px) {
  .product-number-info li { width: 33.333%; box-sizing: border-box; }
}

/* ==========================================================================
   V5.2 追加（2026-09-20）：≤767px 真手机宽度 —— 微信 / iPhone 主路径
   ========================================================================== */
@media only screen and (max-width: 767px) {

  /* —— 品牌优势 / 四店环境：大图卡圆角化 + 14px 间距 + 左右 12px 留白 ——
     覆写 style.css ≤600/≤550 断点的「满宽零 margin」直连版式。 */
  .page_list2 ul { padding: 0 12px; box-sizing: border-box; }
  .page_list2 ul li { width: 100%; margin-bottom: 14px; }
  .page_list2 ul li:last-child { margin-bottom: 0; }
  .page_list2 ul li a { border-radius: 10px; }
  .page_list2 ul li .img img { height: 210px; }
  .page_list2 ul li .text h3 { font-size: 20px; }
  .page_list2 ul li .text p { font-size: 14px; }

  /* —— 核心服务：白卡缝隙 6px → 12px，统一圆角与投影 —— */
  .page_list1 ul { margin: 0; padding: 0 12px; box-sizing: border-box; }
  .page_list1 ul li { width: 100%; margin-bottom: 12px; }
  .page_list1 ul li:last-child { margin-bottom: 0; }
  .page_list1 ul li .list {
    margin: 0;
    border-radius: 10px;
    box-shadow: 0 2px 14px rgba(44, 36, 22, 0.07);
  }

  /* —— page2 区块（优势 / 四店）显式垂直节奏，不依赖级联顺序 —— */
  .page.page2 { padding: 22px 0 14px; }
}