@charset "utf-8";
/* ============================================================
   详情与个人类页面 · 手机端适配层（唯一可改文件）
   ------------------------------------------------------------
   覆盖页面与皮肤来源：
     1. 商品详情 /item/:id      art-yh-v3.css + art-side-v3.css
     2. 文章详情 /article/:id   art-yc.css + art-side-v3.css
     3. 原创频道 /yuanchuang    art-yc.css + yc-index.css
     4. 个人中心 /my 系列       myIndex.css
     5. App下载 /app、404、积分 —— 探针实测已达标，无需特判
   已探针实测（375 视口）的超宽元素清单（改造前）：
     item:    .art-main/.col-ab/.top-area/.art-wrap/.art-focus/.art-con = 1120
     article: 同上 + .pgc-img img = 1120（正文图）
     yuanchuang: .filter-wrap = 1008, .art = 613, .art-list = 559
   注意：这些类名在皮肤 CSS 里存在更高特异性组合（如 .art-main .col-ab），
   故统一用 !important 压制；本文件加载顺序在所有皮肤之后，同级也必胜。
   规则同 responsive.css：只写媒体查询，不动模板、不动皮肤。
   ============================================================ */

/* ===================== 1. 商品详情 / 文章详情（共用骨架） ===================== */
@media (max-width: 767px) {
  /* 1120 双栏骨架 → 单列：主栏在前、右栏（相关推荐/榜单）置后 */
  .art-main,
  .art-wrap,
  .art-focus,
  .art-con,
  .top-area,
  .col-ab,
  .col-c {
    width: auto !important;
    max-width: 100%;
    float: none !important;
  }
  .col-c {
    margin-top: 14px;
    border-top: 1px solid #f0f0f0;
    padding-top: 12px;
  }
  /* 内层文本容器自动随父级 */
  .art-txt,
  .art-hd,
  .art-bd,
  .art-con-des {
    width: auto !important;
    max-width: 100%;
  }
  /* 正文/图集图片：pgc-img 里 img 写死 1120，必须 !important 压回 */
  .pgc-img img,
  .art-con img {
    max-width: 100% !important;
    width: auto !important;
    height: auto !important;
  }
  /* 标题字号收敛（原站 28px+ 在 375 屏过挤） */
  .art-hd .title,
  .art-focus .title,
  .art-hd h1 {
    font-size: 20px !important;
    line-height: 1.45 !important;
  }
  /* 面包屑 tips：可横向滚动，避免折行占高 */
  .tips {
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .tips::-webkit-scrollbar {
    display: none;
  }
}

/* ===================== 2. 商品详情专属 ===================== */
@media (max-width: 767px) {
  /* 焦点图区：原站大图定宽，改自适应 */
  .art-focus img,
  .goods-pic img,
  .big-pic img {
    max-width: 100% !important;
    width: auto !important;
    height: auto !important;
  }
  /* 价格区/按钮区保持原结构，仅收敛间距 */
  .fix-tools {
    width: auto !important;
    max-width: 100%;
  }
}

/* ===================== 3. 原创频道 /yuanchuang ===================== */
@media (max-width: 767px) {
  /* 筛选条 1008 定宽 → 流式 + 横向滚动 */
  .filter-wrap {
    width: auto !important;
    max-width: 100%;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .filter-wrap::-webkit-scrollbar {
    display: none;
  }
  /* 精选横排 4 卡 → 可横向滑动 */
  .art-list-a {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    width: auto !important;
  }
  .art-list-a::-webkit-scrollbar {
    display: none;
  }
  .art-list-a .art {
    flex: 0 0 78%;
    width: auto !important;
  }
  /* 全部原创双栏列表 → 单列 */
  .art-list,
  .art-list-b {
    width: auto !important;
    max-width: 100%;
  }
  .art-list-b .art,
  .art-list .art {
    width: auto !important;
    max-width: 100%;
    float: none !important;
    margin: 0 0 12px !important;
  }
  .art-list-b .art-wrap,
  .art .art-wrap,
  .art-hd,
  .art-bd,
  .art-ft {
    width: auto !important;
    max-width: 100%;
  }
}

/* ===================== 4. 个人中心 /my 系列（myIndex.css） ===================== */
@media (max-width: 767px) {
  .my-menu,
  .my-box,
  .user-info {
    width: auto !important;
    max-width: 100%;
    float: none !important;
  }
  /* 表单类页面（投稿/设置）输入框撑满 */
  .my-box input[type="text"],
  .my-box input[type="password"],
  .my-box textarea,
  .my-box select {
    max-width: 100%;
    box-sizing: border-box;
  }
}

/* ===================== 5. 平板（仅收窄，不重排） ===================== */
@media (min-width: 768px) and (max-width: 1023px) {
  .art-main,
  .art-wrap,
  .filter-wrap {
    width: auto !important;
    max-width: 100%;
  }
  .col-ab {
    width: auto !important;
    max-width: 100%;
  }
  .col-c {
    display: none;
  }
}