/* =====================================================================
   520宠物网 · 移动端适配  mobile.css
   断点：≤768px（手机/平板竖屏），或 ≤960px 且为触摸指针（手机横屏）。
        纯表现层覆盖，不含任何业务逻辑，PC 端零影响。
   回滚：删掉 base/layout.html 里的 <link> 即可（全部规则都在 @media 内）。

   依据：2026-09-19 对 home/栏目/list/文章/图鉴/图鉴列表/map 六套模板实测。

   v2 · 2026-09-19 本次改动
     1) 顶部导航重做（原方案搜索/栏目各占一行太松散，视觉不统一）：
        第 1 行  [520宠物]  [ 搜索框（自适应剩余宽度） ]
        第 2 行  栏目胶囊 chip，横向滑动
        整体改为 sticky 吸顶，滚动时常驻但不再脱离文档流。
     2) 隐藏 PC 的「分享宠物健康生活」装饰条与热门跑马灯，减少拥挤。
     3) ★ 选择器统一加 body 前缀提升权重：
        模板样式内联在 <head> 的 <style> 中，且排在 <link> 之后，
        同权重的内联样式会反向覆盖本文件（表现为“改了没效果”）。
        加 body 前缀后权重稳定高于内联单类选择器，且不影响 PC。
   ===================================================================== */

/* 手机横屏的视口宽度会超过 768px（iPhone 16 横屏 852px、Pro Max 932px），
   只写 max-width:768px 会导致「横过来就变回 PC 布局」。
   所以补一条「窄屏 + 主指针为触摸」：触屏设备 ≤960px 一律用移动样式，
   PC 鼠标环境（pointer:fine）把窗口拖窄也不会误触发。 */
@media (max-width: 768px), (max-width: 960px) and (pointer: coarse) {

  /* ============ 0. 全局兜底 ============ */
  html { -webkit-text-size-adjust: 100%; }
  body {
    -webkit-text-size-adjust: 100%;
    font-size: 16px;
    /* 特意不用 overflow-x:hidden —— body 上出现 hidden 会让 sticky 头部失效；
       clip 同样能裁掉横向溢出，但不创建滚动容器 */
    overflow-x: hidden;
    overflow-x: clip;
  }
  img, video, iframe, svg, canvas { max-width: 100%; }
  img, video { height: auto; }
  /* 正文宽表格：允许内部横向滚动，不撑破整页 */
  body .content-text table, body .content-section table,
  body .pet-info-content-wrapper table, body article table {
    display: block; width: 100%; max-width: 100%;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
  }

  /* ============ 1. 顶部导航 ============
     PC 是「logo / 导航 / 搜索 / 热门 / 分享」挤在一行 1664px 宽里，
     手机端重排为两行：

       第 1 行  [ 520宠物 ] [ 搜索框（吃掉剩余宽度） ]
       第 2 行  [推荐][汪汪队][喵星人]… 胶囊横滑

     定位由 fixed 改为 sticky：滚动常驻、又不脱离文档流，
     所以面包屑/正文不必再为它预留 72px 空白（PC 的 110px 上边距已在下面第 2 节清掉）。
     ==================================== */
  body .header-wrapper {
    position: sticky; top: 0; z-index: 30;
    background: rgba(255, 255, 255, .97);
    -webkit-backdrop-filter: saturate(180%) blur(10px);
    backdrop-filter: saturate(180%) blur(10px);
    box-shadow: none;                       /* 换成一像素分隔线，吸顶时更清爽 */
    border-bottom: 1px solid #f0f0f0;
  }

  body .header-content {
    width: 100%; height: auto; min-height: 0;
    padding: 8px 12px 0;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 8px 10px;
  }

  /* 第 1 行左：logo，做成与搜索框齐高的胶囊 */
  body .header-logo {
    order: 1; flex: 0 0 auto;
    padding: 9px 13px; font-size: 14px; line-height: 1;
    border-radius: 999px;
  }

  /* PC 右上角「—— 分享宠物健康生活」整块是装饰（内部按钮全被注释），
     手机端隐藏，避免它跟 logo 争第一行 */
  body .header-right-area,
  body .header-right-area-bg { display: none; }

  /* 第 1 行右：搜索框，自适应吃掉剩余宽度 */
  body .search-container {
    order: 2; position: relative;
    flex: 1 1 auto; width: auto; min-width: 0;
    max-width: none; margin-left: 0;
  }
  body .search-box {
    height: 40px; padding: 0 44px 0 14px;
    border: 1px solid #ececec; border-radius: 20px;
    background: #f6f6f7;
    transition: background .2s, border-color .2s;
  }
  /* 聚焦时整个胶囊变白+主色描边，移动端键盘弹起后能一眼看清输入位置 */
  body .search-box:focus-within {
    background: #fff; border-color: #FF2442;
  }
  body .search-input {
    font-size: 14px; min-width: 0;
    text-overflow: ellipsis;
  }
  /* PC 的提示语「请输入宠物标题、宠物文章内容，关键字」有 19 个字，
     14px 在 375 屏必被截断，压到 12px 基本能整句显示 */
  body .search-input::placeholder { font-size: 12px; color: #9aa0a6; }
  /* 搜索按钮由「透明图标」改为主色圆形实心按钮：触控目标更大、也更醒目 */
  body .search-btn {
    width: 34px; height: 34px; right: 3px;
    border-radius: 50%;
    background: #FF2442;
  }
  body .search-btn svg { width: 15px; height: 15px; fill: #fff; }
  body .search-btn:hover svg { fill: #fff; }

  /* 第 2 行：栏目导航 → 胶囊 chip 横向滑动
     （PC 是 40px 大间距的纯文字，手机上会挤成一团且没有可点区域） */
  body .header-nav-menu {
    order: 3; width: 100%; margin-left: 0;
    gap: 8px;
    flex-wrap: nowrap;
    overflow-x: auto; overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    padding: 2px 0 10px;
    scrollbar-width: none; -ms-overflow-style: none;
    /* 右侧渐隐，提示“还能往左滑”；不想要可删这两行 */
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 94%, transparent 100%);
    mask-image: linear-gradient(to right, #000 0, #000 94%, transparent 100%);
  }
  body .header-nav-menu::-webkit-scrollbar { display: none; }
  body .header-nav-link {
    flex: 0 0 auto;
    font-size: 13px; line-height: 1;
    color: #666; background: #f5f5f5;
    padding: 9px 14px; border-radius: 999px;
    white-space: nowrap;
    transition: color .2s, background .2s;
  }
  /* 去掉 PC 在文字下方画的红线，选中态直接给整颗胶囊上主色 */
  body .header-nav-link.active::after { content: none; }
  body .header-nav-link.active,
  body .header-nav-link:hover { color: #fff; background: #FF2442; }

  /* 热门文章跑马灯：手机省一行空间（内容在各栏目页仍可见） */
  body .header-recommend-container { display: none !important; }

  /* ============ 2. 面包屑 / 主容器 / 页脚 ============ */
  /* PC 用 top:88px 给固定头部让位，这里头部已在文档流中，改为静态 */
  body .crumbs-content {
    position: static; top: auto; max-width: 100%;
    padding: 0 12px; margin: 10px auto 0; font-size: 13px;
  }
  body .content-wrapper {
    max-width: 100%; margin: 12px auto; padding: 0 12px;
  }
  body .footer_wrapper, body .link_wrapper { max-width: 100%; padding: 12px; }
  body .content-title-bg { height: 12px; }

  /* ---------- AI 助手（/bot）：去掉 PC 头部占位 + 横向滚动收口 ----------
     1) 模板里为 PC 固定头部预留了 110px 内边距，手机头部已 sticky，去掉；
     2) ★ 横向滚动的头号原因：<textarea class="chat-input"> 是 .chat-foot(flex)
        的子项。它写了 flex:1 但没清 min-width，而 flex 子项默认 min-width:auto，
        对 textarea 来说这个下限由 cols 属性（默认 20）算出的 min-content 宽度
        决定。手机系统字体放大（微信/QQ 内置浏览器的「调整字体」最常见）时，
        这个下限按比例一起变大，一旦超过 chat-foot 的可用宽度，输入框就再也
        不收缩，把「发送」按钮顶出屏幕右缘 —— 整页因此可以左右拖。
        必须显式 min-width:0，它才肯收缩。
     3) 发送按钮 flex-shrink:0：宁可压缩输入框，也不让按钮被挤出或换行；
     4) 气泡宽度：模板在小屏里把 .msg-bubble 放宽到 86%，而一行里还有
        34px 头像 + 10px gap + .chat-body 的 38px 内边距，393 视口下
        86% 的气泡已经把行撑破（临界值约 352px）。收到 80%（临界 246px）。
     5) .chat-body 原本只写了 overflow-y:auto，按规范另一轴的 visible 会被
        计算成 auto，于是气泡里的宽内容会让消息区自己长出横向滚动条。
        显式收成 hidden（代码块 pre 内部仍保留自己的横向滚动）。
     6) 页面级兜底 clip：万一还有元素算错宽度，也不产生横向滚动。 */
  body .bot-page { padding: 12px 10px 20px; max-width: 100%; overflow-x: clip; }
  body .chat-card { max-width: 100%; overflow: hidden; }
  body .chat-input { min-width: 0; max-width: 100%; }
  body .chat-send { flex-shrink: 0; }
  /* 消息区：真正撑宽的是「输入并发送之后」渲染出来的 AI markdown 回复
     （表格 / 代码块 / 不带空格的长串）。.chat-body 只声明了 overflow-y:auto，
     按规范另一轴的 visible 会被算成 auto，于是它自己长出了横向滚动条。
     这里彻底关掉；长代码块仍有 pre 自带的 overflow-x:auto 可横向看。 */
  body .chat-body { overflow-x: hidden; }
  body .chat-foot { overflow-x: hidden; }
  body .msg-bubble { max-width: 80%; }
  body .msg-bubble > * { max-width: 100%; }
  /* 表格单元格里若是不可断的长串，width:100% 照样会被顶破，固定布局才压得住 */
  body .msg-bubble table { table-layout: fixed; word-break: break-word; }
  /* 模板只在 max-width:640 里清了 chip-zone 的 44px 缩进；641~768 这段
     mobile.css 生效、模板那套不生效，这里补一刀 */
  body .chip-zone { margin-left: 0; }
  /* ★ 终极兜底：只在 body 上收口并不可靠 —— body 的 overflow 必须传播到视口
     才生效，而 iOS Safari / 微信 X5 对这层传播的行为并不一致，fixed 元素
     （页内那个 AI 悬浮球）也完全不受它裁剪。直接在 html 上再收一道。
     必须同时写 overflow-y:auto：clip 与 visible 组合时 clip 会被降级成 hidden，
     显式给出另一轴才能保持 clip 语义、且纵向滚动不受影响。
     :has(.bot-page) 限定只作用于 AI 助手页，不动全站其余页面。 */
  html:has(.bot-page) { overflow-x: clip; overflow-y: auto; }

  /* 悬浮按钮：
     - 手机去掉「回到顶部」：屏幕本来就窄，手指一划即到顶，按钮还挡着内容；
       它的显示由 JS 写内联 display:flex（layout.html:703），必须 !important 才压得住
     - AI 助手保留并放到底部常规位置（PC 上为躲开「回到顶部」才悬在 70px 处） */
  body #back-to-top { display: none !important; }
  body #AI { width: 46px; height: 46px; right: 14px; bottom: 16px; line-height: 46px; }

  /* 分页可换行、好点 */
  body .pagination-content { flex-wrap: wrap; }
  body .pagination { flex-wrap: wrap; gap: 6px; }
  body .pagination-item { padding: 8px 13px; min-height: 40px; }

  /* 空状态图 */
  body .node_data_content, body .node_data_content img { width: 150px; }
  body .node_data_content { height: 150px; }

  /* ============ 3. 首页 / 栏目页（文章卡 + 图鉴卡）============ */
  body .main-container { gap: 0 !important; padding: 0 !important; }

  /* --- 首页两处分组标题行 ---
     PC：  [ -狗狗- ][ 文章推荐 ][ -猫猫- ]  三块并排，鼠标 hover 切换
     手机：1) 隐藏中间的入口胶囊（「文章推荐」在顶部“推荐”菜单、
              「宠物图鉴」在顶部“萌宠图鉴”菜单里都有同样入口，重复且占位）；
           2) 狗狗 / 猫猫 改成移动端常见的分段控件：
              两格等宽、整块可点、选中项主色填充（原来是两小段带颜色的文字，
              点按面积只有文字大小，手指很难点准）。 */
  body .content-title-bg.content-title-info {
    display: flex;
    align-items: center;
    gap: 6px;
    height: auto;
    margin: 12px 0 14px;
    padding: 4px;
    background: #f2f3f5;
    border-radius: 999px;
  }
  body .main-container > .content-title-info:first-child { margin-top: 0; }
  body .content-title-info .select-tag { display: none; }
  body .content-title-info .pet-tag {
    flex: 1 1 0; min-width: 0;
    display: flex; align-items: center; justify-content: center;
    height: 38px; padding: 0;
    border-radius: 999px;
    background: transparent;
    color: #666;
    font-size: 14px; font-weight: 600;
    transition: background .2s, color .2s;
  }
  body .content-title-info .pet-tag-active {
    background: #FF2442;
    color: #fff;
  }
  body .content-title-info .pet-tag:active { opacity: .85; }

  /* 文章瀑布流：两列卡片
     .waterfall-active 只用在首页，栏目页（汪汪队/喵喵队/推荐/搜索）用的是
     .waterfall，这里一起补上 space-between，否则两列卡片右侧会空出 10px。 */
  body .waterfall, body .waterfall-active {
    gap: 10px 0 !important; margin-top: 12px;
    justify-content: space-between;
  }
  body .card {
    width: calc(50% - 5px); height: auto; margin-right: 0; margin-bottom: 10px;
  }
  /* 卡片封面：文章没有封面图时模板会落到 noPicture.jpg，但 PC 的 object-fit:cover
     会把它按 310×110 裁切放大，白底线稿只剩中间一条糊掉的灰（看着像“空卡片”）。
     这里给容器垫上同一张占位图并 contain 完整显示；图片正常时被 img 完全盖住，
     出现 404 等异常时也能露出可读的占位，而不是一块纯灰。 */
  body .card-image {
    height: 110px;
    background: #f0f0f0 url("/static/image/noPicture.jpg") center / auto 82% no-repeat;
  }
  /* 卡片正文：PC 把 .card-content 锁死 110px、标题 1 行、描述 2 行。
     手机上两列单卡只有 ~170px 宽，13px 的标题一行只放得下 12 个字，
     长标题一律被截成「我的新手养狗经验…」；而这行是 <a>，全称只在 title
     属性里，移动端没有 hover 就永远看不到。所以：
       · 标题 13 → 15px（比 PC 的 14px 还大一号）并允许折 2 行，
         常见长度的标题能完整显示；
       · 简介整块隐藏 —— 两列宽度下简介只能露出半句加省略号，价值低于标题；
       · 内容区不再锁高，高度由标题行数自然撑开；同一行两张卡的高度由
         .waterfall（flex-wrap）默认的 align-items:stretch 拉齐，不会参差。
     模板里 .card-content 的 justify-content: space-between 保留：
     两行标题的卡与一行标题的卡并排时，作者信息仍能底部对齐。 */
  body .card-content { height: auto; padding: 10px; }
  body .card-title { font-size: 15px; line-height: 1.4; -webkit-line-clamp: 2; }
  body .card-desc { display: none; }
  /* 作者头像 PC 是 24px，在两列小卡里比标题还抢眼，收到 18px 与作者名同级。
     ★ 必须用 .card 限定：article_info.html 作者区的 .author-avatar 是 58px 大图，
       不限定会把它一起改小。 */
  body .card .author-avatar { width: 18px; height: 18px; }
  body .author-left { max-width: 100%; }

  /* 卡片底部：手机只留点赞数，去掉发布日期。
     PC 卡片宽，日期 + 点赞排得下；两列手机上作者名先吃掉大半宽度，
     日期常被压成「2026-09-」「18」两行断裂的样子，信息价值又低于点赞。
     三个模板的 DOM 结构不同，要分开处理：
       · index.html / article_list.html：
           <div class="post-meta"><div>日期</div><div class="likes">…</div></div>
       · article_user.html（达人页）：
           <div class="post-meta"><div class="post-meta-content">
               <span>发布时间…</span><span class="likes">…</span></div></div>
     ★ 达人页里 .post-meta 的第一个 div 就是 .post-meta-content 本身，
       所以第一条必须带 :not(.post-meta-content)，否则整块 meta 会被隐藏。
     全部用 .card 限定，避免误伤 article_info.html 作者区的 .post-meta
     （那里的 .post-time 要保留）。 */
  body .card .post-meta > div:first-child:not(.post-meta-content),
  body .card .post-meta-content > span:first-child { display: none; }
  /* 达人页卡片底部只剩点赞数，用 flex-end 让它和栏目页一样贴右 */
  body .card .post-meta-content { justify-content: flex-end; }

  /* 图鉴网格：两列；关闭 PC 的 hover 悬浮大卡（410px 在手机必溢出且无 hover） */
  body .pet-list-container, body .pet-list-container-active {
    gap: 10px 0 !important; margin-top: 12px; justify-content: space-between;
  }
  body .pet-list-item {
    width: calc(50% - 5px); height: auto; display: block;
  }
  body .pet-img-box img { width: 100%; height: auto; }
  body .pet-list-item:hover { transform: none; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
  body .pet-card { display: none !important; }          /* hover 预览卡手机端不用 */
  body .pet-property { flex-wrap: wrap; font-size: 12px; }
  body .pet-property span:first-child { width: auto; margin-right: 6px; }

  /* 栏目页/个人页的排序按钮组（按时间排序 / 按点赞数排序）：
     PC 是吸附在右侧的悬浮面板（position:fixed），手机改成移动端常见的「分段控件」——
     灰底胶囊 + 选中项主色填充，居中，与首页狗狗/猫猫同一套观感。

     ★ 必须让它独占一行。它是 .waterfall（display:flex, flex-wrap:wrap）的第一个
       item，自身只有 232px 宽：
         · 竖屏 375：232 + 卡片 170 > 351，自动换行 → 正常；
         · 横屏 667：232 + 卡片 207 < 643，卡片会挤进同一行，而 flex 默认的
           align-items:stretch 会把它纵向拉到与卡片等高（~280px），
           与 border-radius:999px 一叠加，就变成一个巨大的灰色圆形色块
           （按钮因为自身 height 固定 36px 才留在顶部）。
     所以：flex-basis:100% 占满整行强制换行，align-self:flex-start 双保险不被拉伸；
     胶囊外观改由 ::before 画，这样占位是整行、视觉上仍是居中的 232px 胶囊。 */
  body .sort-btns {
    /* ★ PC 的 top:138px / right:17px 是给 position:fixed 用的「视口坐标」；
       一旦这里改成 relative，它们就变成「相对自身正常位置的偏移」，
       会把整块往下顶 138px、往左拉 17px —— 正好压在卡片上，即「排序 tab 掉下来了」。
       改成 relative 必须把这两个一起清掉。 */
    position: relative !important;
    top: auto; right: auto;
    flex: 0 0 100%;
    align-self: flex-start;
    justify-content: center;
    align-items: center;
    height: 44px;
    margin: 8px 0 16px;
    padding: 0;
    gap: 0;
    background: transparent;
    box-shadow: none;
  }
  body .sort-btns::before {
    content: '';
    position: absolute;
    top: 0; bottom: 0; left: 50%;
    width: 232px; margin-left: -116px;
    background: #f2f3f5;
    border-radius: 999px;
  }
  body .sort-btn {
    position: relative; z-index: 1;
    width: 116px; height: 36px; padding: 0;
    border: 0; border-radius: 999px;
    background: transparent; color: #666;
    font-size: 13px; font-weight: 600;
  }
  /* 覆盖 PC 的 hover 反馈：触屏 tap 后会残留 hover 态，把选中项变灰 */
  body .sort-btn:hover { background: transparent; color: #666; }
  body .sort-btn.active,
  body .sort-btn.active:hover { background: #FF2442; color: #fff; }
  body .sort-btn:focus { box-shadow: none; }

  /* ============ 4. 文章详情页（左右栏 → 上下堆叠）============ */
  body .content-area,
  body .main-container .content-area {
    width: 100%; min-width: 0; padding: 16px; border-radius: 10px;
  }
  body .recommend-area, body .sidebar { width: 100% !important; min-width: 0; margin-top: 16px; }
  body .main-container { flex-direction: column; }

  body .article-title { font-size: 21px; margin-bottom: 10px; }
  body .author-section { margin-bottom: 16px; padding-bottom: 14px; }
  body .author-avatar { width: 46px; height: 46px; }
  body .abstract-section { padding: 12px; }
  body .abstract-text, body .content-text { font-size: 16px; line-height: 1.8; }
  body .content-section { margin: 20px 0; }
  body .content-section img { max-width: 100%; }

  /* 正文两列图集 → 一列 */
  body .image-grid { grid-template-columns: 1fr; gap: 10px; margin: 16px 0; }
  body .content-img { height: auto; }

  /* 标签、互动 */
  body .tag-warrap { text-align: left; }
  body .action-bar { gap: 12px; flex-wrap: wrap; top: 0; margin-top: 8px; }
  body .action-btn { padding: 8px 13px; min-height: 40px; }
  body .title-info-tag { display: none; }               /* 定位装饰，防右侧溢出 */

  /* 底部固定评论框 */
  body .fixed-comment { padding: 10px 12px; padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
  body .comment-form { gap: 10px; max-width: 100%; }
  body .comment-input { padding: 11px 16px; font-size: 15px; min-width: 0; }
  body .submit-btn { padding: 11px 20px; }
  body .comment-item { padding: 12px; }

  /* ============ 5. 文章列表页（每日宠圈 / list）============ */
  body .filter-card { height: auto; padding: 12px 14px; }
  body .filter-group { flex-wrap: wrap; margin-bottom: 10px; }
  body .filter-tags { gap: 8px; }
  body .filter-tag { height: auto; padding: 7px 13px; }
  body .article-item { gap: 12px; padding: 12px; }
  body .article-meta { flex-wrap: wrap; }

  /* ============ 6. 图鉴详情页（pet）============ */
  /* 第 3 节那条 `body .main-container { padding: 0 !important }` 是按类名匹配的
     （本意是首页：卡片自带外边距，容器不用再留白），本页容器同名被一起清成 0 ——
     结果白底卡片直接贴到屏幕左右边缘，图片和 8 项评分表几乎没有边距。
     这里用 :has() 只命中「内含 .page-header 的容器」把内边距补回来：
     同为 !important 时它权重更高（0,2,1 > 0,1,1），能稳定压住第 3 节。 */
  body .main-container:has(.page-header) { padding: 16px 14px !important; }

  body .main-container .pet-info-main-image { margin-bottom: 18px; }

  /* --- 头部（本次补的重点）---
     PC： [狗狗头像 250×206] ｜ [标题 + 8 项星级评分]  左右并排
     手机：250px 图 + 30px 间距后标题区只剩 ~70px，8 项评分被挤成一个字一行、
           整块横向溢出到屏幕外（右半边的星级表看不见）。
           改成上下结构：图片居中在上，标题与评分在下方占满宽度。 */
  body .page-header {
    flex-direction: column;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
  }
  body .cat-main-img {
    width: 100%; max-width: 280px; height: auto;
    aspect-ratio: 250 / 206;        /* 沿用 PC 的 250×206 比例，图片不拉变形 */
    object-fit: cover;
    border-width: 6px; border-radius: 10px;
  }
  body .pet-info-title-content { width: 100%; height: auto; }
  body .page-title { font-size: 22px; line-height: 1.35; text-align: center; }

  /* 8 项评分：PC 靠 flex 换行挤成单列，手机改成两列网格 ——
     缩小星级与标签后，一行「标签 + 5 颗星」刚好落在半屏宽（~155px）里 */
  body .rating-container-content {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2px 12px;
  }
  body .rating-container {
    padding: 6px 0; gap: 6px;
    flex-wrap: nowrap;
    justify-content: space-between;
  }
  body .rating-container > span { font-size: 12px; white-space: nowrap; }
  body .stars-wrapper { gap: 2px; }
  body .star { font-size: 17px; }

  /* 右侧悬浮锚点导航：手机隐藏（正文 Tab 已可浏览） */
  body .pet-info-sticky-nav { display: none !important; }

  body .pet-info-tabs-wrapper { margin: 20px 0; }
  body .pet-info-detail-section { margin: 22px 0; padding: 16px; }
  body .pet-info-section-title { font-size: 18px; margin-bottom: 16px; }
  body .pet-info-content-wrapper article { font-size: 16px; line-height: 1.85; }

  /* 属性卡：两列排布 */
  body .pet-info-attributes-grid { padding: 14px; gap: 10px; }
  body .pet-info-attribute-item { padding: 10px; }
  body .pet-info-attribute-card {
    width: calc(50% - 5px); padding: 12px;
  }
  /* 特征列表：手机单列 */
  body .pet-info-feature-list { grid-template-columns: 1fr; gap: 12px; }
  /* 相关推荐：6 列 → 2 列；图片 PC 钉死 186×153，两列时列宽只有 ~165px 会横向溢出 */
  body .pet-info-recommend-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  body .pet-info-recommend-image {
    width: 100%; height: auto;
    aspect-ratio: 186 / 153; object-fit: cover;
  }

  /* ============ 7. 站点地图（map）标签云 ============ */
  body .map_leve_1 { font-size: 15px; padding: 9px; }
  body .map_tag { padding: 9px 14px; }
  body .map_leve_item { padding: 0 10px 12px 0; }
  body .map_leve_item_4 { width: auto; }

  /* ============ 8. 达人主页（/user?user_code=xxx）============
     PC：用户卡固定 820px + 250px 卡片瀑布流。
     手机：1) 用户卡改满宽 —— 820px 在 375 视口里横向溢出，右边半张会被
              body 的 overflow-x:clip 直接裁掉（数据都看不全）；
           2) 头像、字号收紧，一行里塞得下「头像 + 名字 / 简介 / 数据」；
           3) 卡片底部「发布时间 / 点赞数」PC 钉死 225px，而手机两列时
              单张卡只有 ~170px，会把卡片顶破，改成自适应。 */
  body .user-profile {
    width: 100%; max-width: 100%;
    margin: 12px 0;
    padding: 14px;
    gap: 12px;
    border-radius: 10px;
  }
  body .user-avatar-list { width: 60px; height: 60px; }
  body .user-name-list { font-size: 17px; margin-bottom: 4px; }
  body .user-bio-list { font-size: 12px; margin-bottom: 6px; }
  body .user-stats-list { gap: 12px; }
  body .stat-item { font-size: 12px; }
  body .stat-item:not(:last-child)::after { margin-left: 12px; }

  body .post-meta, body .post-meta-content { width: 100%; }

  /* ============ 9. 触控与可点性（全站）============ */
  body a, body button, body .header-publish-btn, body .filter-tag,
  body .pagination-item, body .submit-btn, body .action-btn, body .tag-item {
    touch-action: manipulation;
  }
}

/* =====================================================================
   手机横屏（视口 601~960px）
   横过来之后视口从 375 变成 667 / 852，上面那套是按竖屏两列算的：
   卡片会被拉到 400px 宽，而封面图仍钉死 110px 高，比例失真、一行也放不满。
   这里放宽到三列，并把封面图抬高到 132px，横向的利用率更接近竖屏观感。
   竖屏（≤600）和 PC 鼠标环境都不受影响。
   ===================================================================== */
@media (min-width: 601px) and (max-width: 960px) and (pointer: coarse) {
  body .waterfall, body .waterfall-active,
  body .pet-list-container, body .pet-list-container-active {
    justify-content: space-between;
  }
  body .card, body .pet-list-item { width: calc(33.333% - 7px); }
  body .card-image { height: 132px; }

  /* 图鉴详情：横过来宽度变成 667 / 852，头部可以恢复 PC 的左右并排
     （省下一整屏纵向空间），评分仍是两列但每列宽松；
     属性卡和相关推荐各升一列。 */
  body .page-header {
    flex-direction: row; align-items: center;
    gap: 20px; margin-bottom: 24px;
  }
  body .cat-main-img { max-width: 220px; }
  body .page-title { text-align: left; }
  body .pet-info-attribute-card { width: calc(33.333% - 7px); }
  body .pet-info-recommend-grid { grid-template-columns: repeat(3, 1fr); }
}
