@charset "UTF-8";
/* ==========================================================================
   盘淘网 · 移动端响应式适配层
   --------------------------------------------------------------------------
   设计原则：
   1. 本文件只包含 @media 断点规则，桌面端（>=1025px）渲染结果完全不变；
   2. 全站样式加载顺序不统一，故在移动端对「布局关键属性」使用 !important；
   3. 断点：1024（平板）/ 768（手机）/ 560（小屏手机）；
   4. 本文件必须在所有既有样式之后加载。
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. 断点变量参考（CSS 变量仅用于本文件内部维护）
   -------------------------------------------------------------------------- */
:root {
    --ptw-gap: 14px;
    --ptw-nav-h: 58px;
    --ptw-radius: 10px;
    --ptw-gold: #d3b16a;
    --ptw-ink: #1a1b1f;
}

/* --------------------------------------------------------------------------
   基础补齐
   原先写在 _LayoutFoot.cshtml 行内 style 上的规则，改为类选择器，
   保证桌面端渲染结果与改造前完全一致。
   -------------------------------------------------------------------------- */
.page-outer {
    margin: 120px auto 40px auto;
    max-width: 1100px;
}

#breadcrumb2 {
    padding: 5px;
    position: sticky;
    top: 100px;
}

/* 列表页（淘宝转让 / 天猫商城 / 天猫新店 / 其它店铺）顶部的外层容器，
   原先是行内 style="margin-top:-100px"，用来让筛选面板上浮压住 banner。
   改成类选择器，方便移动端单独取消。 */
.breadcrumb-main {
    margin-top: -100px;
}

/* ==========================================================================
   1. 平板断点：1024px
   仅仅收紧固定宽度，保持桌面版式
   ========================================================================== */
@media (max-width: 1024px) {
    html,
    body {
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100%;
    }

    .layui-main {
        width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box;
    }

    img,
    video,
    iframe,
    table {
        max-width: 100%;
    }
}

/* ==========================================================================
   2. 移动端主断点：1024px
   手机与平板共用一套移动版式；769~1024 的差异由文件末尾「8. 平板微调」覆盖
   ========================================================================== */
@media (max-width: 1024px) {
    /* ---------------------------------------------------------------------
       2.0 全局基础
       --------------------------------------------------------------------- */
    html,
    html body,
    body {
        min-width: 0 !important;
        width: 100% !important;
        -webkit-text-size-adjust: 100%;
    }

    /* 部分页面（如 News/common.css）用 body{min-width:1200px!important} 阻断，
       这里用更高优先级的 html body 覆盖 */
    html body {
        max-width: 100% !important;
    }

    /* 移动端不再限制页面最小宽度后，容器统一收敛 */
    #main,
    /* 注意：会员中心首页有 .userBox.container（桌面端是 50% 两栏），
       不能一起被撑成 100%，否则右栏会掉下去。 */
    .container:not(.userBox),
    .max_width,
    .ispacing {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }

    body {
        font-size: 15px;
        line-height: 1.6;
    }

    img,
    video,
    iframe {
        max-width: 100% !important;
        height: auto;
    }

    /* 强制包裹型容器收敛 */
    #checktoken,
    .zwf {
        width: 100% !important;
        min-width: 0 !important;
    }

    .zwf {
        height: 62px !important;
    }

    /* 表单控件：16px 可避免 iOS 聚焦自动放大 */
    input[type="text"],
    input[type="password"],
    input[type="tel"],
    input[type="number"],
    input[type="search"],
    select,
    textarea {
        font-size: 16px !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }

    /* 可点区域不小于 44px */
    button,
    .layui-btn,
    input[type="button"],
    input[type="submit"] {
        min-height: 44px;
    }

    /* ---------------------------------------------------------------------
       2.1 顶部导航 → 汉堡菜单
       --------------------------------------------------------------------- */
    #navTop,
    #navTop.commonNav {
        position: fixed !important;
        top: 0;
        left: 0;
        right: 0;
        width: 100% !important;
        min-width: 0 !important;
        height: var(--ptw-nav-h) !important;
        padding: 0 !important;
        background-color: #fff;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
        z-index: 999;
    }

    /* 首页头部：logo（logo.png）和导航文字都是白色版本，原本压在深色 banner 上。
       移动端头部是实底色，用白底会让 logo 完全看不见，所以首页改用深色底。 */
    #navTop:not(.commonNav) {
        background-color: var(--ptw-ink) !important;
    }

    #navTop:not(.commonNav) .ptw-nav-toggle span {
        background-color: #fff;
    }

    /* 汉堡按钮（由 _PartialMenu / 首页头部输出） */
    .ptw-nav-toggle {
        display: block !important;
        position: absolute;
        top: 0;
        right: 0;
        width: 56px;
        height: var(--ptw-nav-h);
        padding: 0;
        margin: 0;
        border: 0;
        background: transparent;
        cursor: pointer;
        z-index: 3;
    }

    .ptw-nav-toggle span {
        display: block;
        width: 22px;
        height: 2px;
        margin: 5px auto;
        background-color: var(--ptw-ink);
        border-radius: 2px;
        transition: transform 0.22s ease, opacity 0.22s ease;
    }

    #navTop.nav-open .ptw-nav-toggle span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }

    #navTop.nav-open .ptw-nav-toggle span:nth-child(2) {
        opacity: 0;
    }

    #navTop.nav-open .ptw-nav-toggle span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }

    /* 品牌 logo
       .ptw-logo 在 DOM 里位于 .layui-nav 内部，而移动端 .layui-nav 是绝对定位的抽屉面板。
       如果 logo 用 absolute，就会以面板为参照：菜单收起时被一起 hidden，展开时又压住「首页」。
       这里改用 fixed，让它始终跟着同样 fixed 的 #navTop 走。 */
    #navTop .ptw-logo,
    #navTop.commonNav .layui-nav .ptw-logo {
        position: fixed !important;
        left: var(--ptw-gap) !important;
        top: 0 !important;
        height: var(--ptw-nav-h) !important;
        display: flex !important;
        align-items: center;
        float: none !important;
        margin: 0 !important;
        z-index: 4;
        /* 面板关闭态是 visibility:hidden，这里单独放出来 */
        visibility: visible !important;
    }

    #navTop .ptw-logo > a img,
    #navTop.commonNav .layui-nav .ptw-logo > a img {
        width: auto !important;
        max-width: 140px;
        height: 34px !important;
        margin: 0 !important;
        object-fit: contain;
    }

    /* 导航列表 → 下拉面板
       关闭态刻意不用 display:none：.ptw-logo 就在这个 <ul> 里，
       display:none 会把 logo 一起干掉（首页/内页头部都会没有 logo）。
       改用 visibility + 高度收拢，logo 再用 visibility:visible 单独放出来。 */
    #navTop .layui-nav,
    #navTop.commonNav .layui-nav {
        display: block;
        visibility: hidden;
        pointer-events: none;
        position: absolute !important;
        top: var(--ptw-nav-h) !important;
        left: 0;
        right: 0;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        height: auto !important;
        max-height: 0;
        overflow: hidden;
        background-color: #fff;
        text-align: left !important;
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
    }

    #navTop.nav-open .layui-nav,
    #navTop.commonNav.nav-open .layui-nav {
        visibility: visible;
        pointer-events: auto;
        max-height: calc(100vh - var(--ptw-nav-h));
        overflow-y: auto;
        border-top: 1px solid #f0f0f0;
    }

    #navTop .layui-nav .layui-nav-item,
    #navTop.commonNav .layui-nav .layui-nav-item {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        line-height: 1.5 !important;
        float: none !important;
        margin: 0 !important;
        padding: 0 !important;
        /* 必须是定位元素：同级的 ::after 选中标记以它为参照，
           否则会以整个抽屉面板为参照跑到面板底部（正好压住登录行）。 */
        position: relative !important;
    }

    #navTop .layui-nav .layui-nav-item > a,
    #navTop.commonNav .layui-nav .layui-nav-item > a {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        padding: 15px var(--ptw-gap) !important;
        font-size: 16px !important;
        line-height: 1.5 !important;
        color: var(--ptw-ink) !important;
        box-sizing: border-box;
        border-bottom: 1px solid #f2f2f2;
        text-align: left;
    }

    #navTop .layui-nav .layui-nav-item a:active {
        background-color: #faf7f0;
    }

    /* 选中态：桌面端是「文字下方一条 36×2 的金色下划线」，竖排菜单里改成左侧色条。
       首页头部用的是 index.css 的 #navTop .layui-this::after，
       内页头部用的是 common.css 的一套，这里统一覆盖。 */
    #navTop .layui-nav .layui-nav-item.layui-this::after,
    #navTop.commonNav .layui-nav .layui-this:not(.rz)::after,
    #navTop .layui-nav .layui-nav-item:not(.layui-this):hover::after {
        content: "" !important;
        position: absolute !important;
        left: 0 !important;
        right: auto !important;
        top: 50% !important;
        bottom: auto !important;
        margin: 0 !important;
        transform: translateY(-50%) !important;
        width: 3px !important;
        height: 20px !important;
        background-color: var(--ptw-gold) !important;
    }

    #navTop .layui-nav .layui-nav-item.layui-this > a,
    #navTop.commonNav .layui-nav .layui-nav-item.layui-this > a {
        color: var(--ptw-gold) !important;
        font-weight: 600;
        background-color: #faf7f0;
    }

    /* 登录/注册区（首页与 _PartialMenu 两套结构统一处理）
       桌面端 index.css 用 position:fixed; right:55px; top:20px 把它钉在右上角，
       移动端必须显式复位，否则会浮在页头右侧变成一块白底。 */
    #navTop .loginOrReg,
    #navTop .layui-nav .loginOrReg {
        display: block !important;
        position: static !important;
        float: none !important;
        top: auto !important;
        right: auto !important;
        left: auto !important;
        width: 100% !important;
        height: auto !important;
        line-height: 1.5 !important;
        padding: 16px var(--ptw-gap) !important;
        margin: 0 !important;
        /* 首页头部用的是白色透明底图标（原设计压在深色 banner 上），
           _PartialMenu 页面用的是黑色图标。统一改成深色底 + 白色图标，
           两种头部都能看清，也和站点黑金配色一致。 */
        border-top: 1px solid rgba(255, 255, 255, 0.12);
        background-color: var(--ptw-ink);
        box-sizing: border-box;
        text-align: left;
    }

    #navTop .loginOrReg,
    #navTop .loginOrReg a,
    #navTop .loginOrReg span {
        color: #fff !important;
    }

    #navTop .loginOrReg a.logout {
        color: var(--ptw-gold) !important;
    }

    #navTop .loginOrReg .searchbox {
        display: flex;
        align-items: center;
        gap: 2px;
    }

    #navTop .loginOrReg .telbox,
    #navTop .loginOrReg .searchbox {
        float: none !important;
        width: 100% !important;
        display: block !important;
    }

    /* 移动端不展示热线电话块（菜单里已经有客服入口） */
    #navTop .loginOrReg .telbox {
        display: none !important;
    }

    #navTop .loginOrReg .searchbox {
        line-height: 1.6;
    }

    #navTop .loginOrReg a,
    #navTop .loginOrReg .login {
        display: inline-block;
        padding: 6px 0;
    }

    #navTop .loginOrReg img {
        margin-left: 0 !important;
        vertical-align: middle;
    }

    /* 头像图标是透明底，白色版本在浅色底 / 黑色版本在深色底都看不清，
       这里统一染成白色（brightness(0) 压成纯黑，再 invert 成纯白）。 */
    #navTop .loginOrReg img.login {
        filter: brightness(0) invert(1);
    }

    #navTop .layui-nav-bar {
        display: none !important;
    }

    /* 遮挡层 */
    .ptw-nav-mask {
        display: none;
        position: fixed;
        left: 0;
        right: 0;
        top: var(--ptw-nav-h);
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.35);
        z-index: 900;
    }

    #navTop.nav-open ~ .ptw-nav-mask,
    .ptw-nav-mask.show {
        display: block;
    }

    /* ---------------------------------------------------------------------
       2.2 内容容器
       --------------------------------------------------------------------- */
    .layui-main {
        width: 100% !important;
        min-width: 0 !important;
        padding-left: var(--ptw-gap) !important;
        padding-right: var(--ptw-gap) !important;
        box-sizing: border-box !important;
    }

    /* ---------------------------------------------------------------------
       2.3 页脚
       --------------------------------------------------------------------- */
    footer.site-footer {
        width: 100% !important;
        min-width: 0 !important;
        padding: 40px 0 28px !important;
    }

    .site-footer-inner {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 var(--ptw-gap);
        box-sizing: border-box;
    }

    .site-footer .footer-columns {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 24px !important;
        margin-bottom: 32px !important;
    }

    #footer {
        padding-top: 40px !important;
        padding-bottom: 24px !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    #footer .contact {
        float: none !important;
        width: 100% !important;
        text-align: left !important;
    }

    /* ---------------------------------------------------------------------
       2.4 通用组件
       --------------------------------------------------------------------- */
    /* 面包屑 */
    #breadcrumb,
    #breadcrumb2 {
        width: 100% !important;
        position: static !important;
        box-sizing: border-box;
        line-height: 1.9;
    }

    #breadcrumb2 {
        padding: 0 0 10px 0 !important;
        top: auto !important;
    }

    /* 列表页面包屑：桌面端外层容器有 -100px 偏移，让筛选面板上浮压住 banner；
       手机上 hero 会被内容撑得很高，同样的偏移会把面包屑顶到「快速筛选」卡片上
       （白字压白卡 → 看着错位）。这里取消偏移，
       并把面包屑文字改成深色，因为它现在落在浅灰页面底色上而不是深色 banner 上。 */
    .breadcrumb-main {
        margin-top: 0 !important;
    }

    #breadcrumb a,
    #breadcrumb span,
    #breadcrumb cite {
        color: #666 !important;
    }

    /* 静态页外壳（原 _LayoutFoot 行内样式） */
    .page-outer {
        margin: 74px auto 28px auto !important;
        max-width: 100% !important;
        padding: 0 var(--ptw-gap);
        box-sizing: border-box;
    }

    /* _LayoutFoot 的 .page-wrap 在桌面端是「侧栏 + 内容」两栏，
       且设了 align-items:flex-start。改成纵向排列后若不同时改成 stretch，
       内容区会按 max-content 撑到 1100px 并撑破页面。 */
    .page-wrap {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 10px auto 0 auto !important;
        box-sizing: border-box;
    }

    .page-wrap > .sidebar,
    .page-wrap > .main-area {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        flex: 0 0 auto !important;
        float: none !important;
        box-sizing: border-box;
    }

    .page-wrap > .sidebar {
        position: static !important;
        margin-bottom: 16px;
    }

    /* 表格：横向滚动兜底，避免整页被撑开 */
    .layui-table,
    table.layui-table {
        width: 100% !important;
        min-width: 0 !important;
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* 分页 */
    #paging,
    #shopListPage,
    #newsListPage {
        width: 100% !important;
        min-width: 0 !important;
    }

    .layui-laypage {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 4px;
    }

    .layui-laypage > * {
        margin: 0 !important;
    }

    /* 弹层 */
    .layui-layer {
        max-width: calc(100vw - 24px) !important;
    }

    /* 右侧悬浮客服条：移动端贴底显示，避免遮挡内容 */
    #rMenu {
        top: auto !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        border-radius: 0 !important;
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.12) !important;
        z-index: 800 !important;
        /* 全面屏底部手势区留白 */
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    /* 底部固定工具条会压住页面最底部的内容（页脚备案号）。
       由 responsive.js 在有 #rMenu 的页面给 body 加 .ptw-has-bottombar，
       这里给页脚补出等高的下内边距。 */
    body.ptw-has-bottombar .site-footer,
    body.ptw-has-bottombar #footer,
    body.ptw-has-bottombar footer.site-footer {
        padding-bottom: calc(42px + env(safe-area-inset-bottom, 0px) + 20px) !important;
    }

    #rMenu .menuBox {
        display: flex !important;
        width: 100%;
        padding: 0 !important;
    }

    #rMenu .menuBox > div {
        flex: 1 1 0;
        width: auto !important;
        padding: 10px 0 !important;
        margin: 0 !important;
        font-size: 11px;
    }

    #rMenu .menuBox > div .content {
        display: none !important;
    }

    #rMenu .menuBox > div > a {
        width: 100% !important;
    }

    /* ---------------------------------------------------------------------
       2.5 长文本 / 图片内容
       --------------------------------------------------------------------- */
    h1 {
        font-size: 24px !important;
        line-height: 1.4 !important;
    }

    h2 {
        font-size: 20px !important;
        line-height: 1.45 !important;
    }

    h3 {
        font-size: 17px !important;
        line-height: 1.5 !important;
    }
}

/* ==========================================================================
   3. 小屏手机断点：560px
   ========================================================================== */
@media (max-width: 560px) {
    /* 页脚在小屏也保持两列（原先这里改成 1fr，4 个栏目在手机上会竖成一长条） */
    .site-footer .footer-columns {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 20px !important;
    }

    #footer .footer-columns {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 20px !important;
    }

    h1 {
        font-size: 21px !important;
    }

    h2 {
        font-size: 18px !important;
    }
}

/* ==========================================================================
   4. 桌面端（>1024px）：隐藏移动端专用元素
   ========================================================================== */
@media (min-width: 1025px) {
    .ptw-nav-toggle,
    .ptw-nav-mask {
        display: none !important;
    }
}

/* ==========================================================================
   5. 首页
   ========================================================================== */
@media (max-width: 1024px) {
    /* 5.1 首屏轮播 */
    #bannerBox,
    #bannerBox .banner,
    #bannerBox .layui-carousel {
        height: 224px !important;
        min-height: 0 !important;
    }

    /* 首屏文案：桌面端 .context 是 margin-top:250px（banner 高 675px），
       手机 banner 只有 210px，文案会整个掉到可视区外面（表现为「文字不见了」）。
       这里上移并缩小字号，长文案限 3 行。 */
    /* 注意：顶部导航是 position:fixed、高 58px，会盖住 banner 顶部。
       文案必须整体落在导航下方，否则标题会被导航条压住。 */
    #bannerBox .banner .itemBg .context {
        margin-top: 74px !important;
    }

    #bannerBox .banner .itemBg .context .bigtext {
        font-size: 21px !important;
        line-height: 1.35 !important;
        letter-spacing: 1px !important;
        word-spacing: 0 !important;
    }

    #bannerBox .banner .itemBg .context .slogan {
        margin-top: 10px !important;
        font-size: 13px !important;
        line-height: 1.65 !important;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
    }

    /* 5.2 买店 / 卖店搜索区 */
    #shopsSearch {
        padding: 0 var(--ptw-gap);
        box-sizing: border-box;
    }

    #shopsSearch .bigBox {
        width: 100% !important;
    }

    #shopsSearch .bigBox > .leftBox {
        width: 100% !important;
        float: none !important;
        padding-left: 0 !important;
        background-color: transparent !important;
    }

    #shopsSearch .bigBox > .leftBox .searchBlock {
        width: 100% !important;
        float: none !important;
        padding: 18px 14px 16px !important;
        background-color: #fff;
        box-sizing: border-box;
        border-radius: var(--ptw-radius);
    }

    #shopsSearch .bigBox > .leftBox .searchBlock .searchBox {
        border-bottom: 0;
    }

    #shopsSearch .searchBox .selectPlatform {
        display: block !important;
        width: 100% !important;
        margin: 0 0 8px !important;
    }

    #shopsSearch .searchBox .search-shops {
        width: 100% !important;
        border-bottom: 1px solid #d9d9d9 !important;
    }

    #shopsSearch .searchBox .keywordSearch {
        position: static !important;
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        margin-top: 10px;
    }

    #shopsSearch .searchBox .keywordSearch .itemKey {
        float: none !important;
        margin: 0 !important;
    }

    #shopsSearch .bigBox > .leftBox .findShops {
        width: 100% !important;
        height: 56px !important;
        float: none !important;
        display: block;
        margin-top: 12px;
        border-radius: var(--ptw-radius);
    }

    #shopsSearch .bigBox > .leftBox .findShops .txt {
        margin-top: 0 !important;
        padding-top: 7px;
        font-size: 17px !important;
    }

    #shopsSearch .bigBox > .leftBox .findShops .txt p {
        display: inline-block;
        height: auto !important;
        line-height: 21px !important;
    }

    #shopsSearch .bigBox > .leftBox .findShops .arrowR {
        display: none !important;
    }

    #shopsSearch .bigBox > .rightBox {
        position: static !important;
        width: 100% !important;
        height: 88px !important;
        padding: 20px 16px !important;
        margin-top: 12px;
        display: block;
        border-radius: var(--ptw-radius);
    }

    #shopsSearch .bigBox > .rightBox .text {
        padding-left: 0 !important;
        /* 桌面端「我要卖店 / SALE」是靠 140px 左内边距推到右边的；
           窄屏去掉内边距后文字就贴在了左边，这里改成居中。 */
        text-align: center !important;
    }

    #shopsSearch .bigBox > .rightBox .text::before {
        display: none !important;
    }

    #shopsSearch .bigBox > .rightBox .text .saleShop {
        font-size: 17px !important;
    }

    #shopsSearch .bigBox > .rightBox .text .lineBox {
        font-size: 26px !important;
    }

    /* 5.3 好店推荐 */
    #qualityShops .thBox,
    #qualityShops .selectType {
        padding: 0 var(--ptw-gap);
        box-sizing: border-box;
    }

    /* 好店推荐左侧的品牌框（淘宝网店 / 天猫商城 / 京东商城）：
       框里的分类文字是浮动的 li，而 ul 没有包住浮动内容，
       ul 高度塌成 0、框也只有 64px 高 —— 分类文字（钻石店铺 / 皇冠店铺…）
       整个溢出到背景框下面，看着就像文字紧贴着背景边。
       这里让 ul 包住浮动内容，背景框自然长高把文字包进来。 */
    #qualityShops .shopRecommend .left_controler .taobaoShop ul,
    #qualityShops .shopRecommend .left_controler .tmallShop ul,
    #qualityShops .shopRecommend .left_controler .jdShop ul {
        display: block;
        overflow: hidden;
    }

    #qualityShops .selectType h2 {
        float: none !important;
        margin-left: 0 !important;
        font-size: 18px !important;
    }

    /* 「好店推荐」的标题行：桌面端 h2 左浮、ul 右浮，本来就在同一行；
       窄屏把两个都改成静态块之后变成了上下两行，这里用 flex 排回一行。 */
    #qualityShops .selectType {
        display: flex !important;
        align-items: baseline;
        justify-content: space-between;
        gap: 12px;
    }

    #qualityShops .selectType h2 {
        flex: 0 1 auto;
    }

    #qualityShops .selectType .shopType {
        float: none !important;
        text-align: right !important;
        margin-top: 0 !important;
        flex: 0 0 auto;
        display: flex !important;
        align-items: center;
        justify-content: flex-end;
    }

    #qualityShops .selectType .shopType .itemType {
        float: none !important;
    }

    /* 「查看更多」在手机上按上去没有任何反馈（触屏没有 hover），
       给个主题金色 + 下划线，让用户知道这里可以点。 */
    #qualityShops .selectType .shopType .itemType > a {
        color: var(--ptw-gold) !important;
        text-decoration: underline;
    }

    #qualityShops .shopRecommend {
        height: auto !important;
        margin: 0 var(--ptw-gap);
        border-radius: var(--ptw-radius) !important;
        box-shadow: 0 6px 16px rgba(80, 91, 205, 0.28) !important;
        overflow: hidden;
    }

    #qualityShops .shopRecommend .left_controler {
        position: static !important;
        width: 100% !important;
        height: auto !important;
        float: none !important;
        background-image: none !important;
        padding: 18px 14px !important;
        box-sizing: border-box;
    }

    #qualityShops .shopRecommend .left_controler > .box {
        padding-left: 0 !important;
        margin-top: 0 !important;
    }

    #qualityShops .shopRecommend .left_controler > .box .th {
        font-size: 19px !important;
        margin-bottom: 4px !important;
    }

    #qualityShops .shopRecommend .left_controler .taobaoShop,
    #qualityShops .shopRecommend .left_controler .tmallShop,
    #qualityShops .shopRecommend .left_controler .jdShop {
        position: static !important;
        width: 100% !important;
        margin: 10px 0 0 !important;
        border-radius: var(--ptw-radius) !important;
        /* 原样式 width:100% + padding:15px 20px 20px，content-box 下比容器宽 12px，
           被 .shopRecommend 的 overflow:hidden 截掉 */
        box-sizing: border-box !important;
    }

    /* 好店推荐卡片的信息行：桌面端 ul li 是 40% 两列，
       手机上 ul 只有 146px，li 被压到 58px，「主营类目：珠宝首饰」要换 3 行 */
    #qualityShops .shopRecommend .right_content .shopDetails ul li {
        float: none !important;
        width: 100% !important;
        text-align: left !important;
    }

    #qualityShops .shopRecommend .right_content {
        width: 100% !important;
        float: none !important;
    }

    /* 好店推荐卡片的价格行：
       桌面端「立即咨询」是宽 23% 的橙框文字按钮，手机上卡片只有 146px 宽，
       按钮分到 33px 而四个字要 48px → 被挤成两行造成错位。
       移动端把文字去掉，换成圆形电话图标按钮。 */
    #qualityShops .shopRecommend .right_content .shopDetails .shopPrice {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        line-height: 1.3 !important;
    }

    #qualityShops .shopRecommend .right_content .shopDetails .shopPrice > span {
        font-size: 17px !important;
        white-space: nowrap;
    }

    #qualityShops .shopRecommend .right_content .shopDetails .shopPrice .todayShopWX {
        flex: 0 0 auto;
        float: none !important;
        width: 38px !important;
        height: 38px !important;
        min-height: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 50% !important;
        background-color: #fe8e2a !important;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M6.62 10.79a15.05 15.05 0 0 0 6.59 6.59l2.2-2.2a1 1 0 0 1 1.02-.24c1.12.37 2.33.57 3.57.57a1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1.02l-2.2 2.2z'/%3E%3C/svg%3E") !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
        background-size: 18px 18px !important;
        font-size: 0 !important; /* 隐藏「立即咨询」文字 */
        line-height: 38px !important;
        text-align: center;
        text-indent: -9999px;
        overflow: hidden;
        box-sizing: border-box;
    }

    /* 5.4 流程解说 */
    #processNarrate .contentBox .line {
        margin: 36px 0 22px !important;
    }

    #processNarrate .contentBox .processList {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 14px;
        margin-top: 0 !important;
    }

    #processNarrate .contentBox .processList .itemPro {
        margin: 0 !important;
    }

    #processNarrate .contentBox .processList .itemPro > img {
        width: 52px !important;
    }

    #processNarrate .contentBox .textBox {
        width: 100% !important;
        margin-top: 22px !important;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
        padding: 0 var(--ptw-gap);
        box-sizing: border-box;
    }

    #processNarrate .contentBox .textBox .step {
        float: none !important;
        width: 100% !important;
        margin: 0 !important;
    }

    #processNarrate .contentBox .textBox .step .th {
        font-size: 15px !important;
    }

    #processNarrate .contentBox .textBox .step .describe {
        font-size: 12px !important;
    }

    /* 5.5 数据统计 */
    #statistics > ul {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100% !important;
    }

    #statistics > ul li {
        float: none !important;
        width: 100% !important;
        padding: 20px 0 !important;
    }

    #statistics > ul li p:last-of-type .num {
        font-size: 26px !important;
    }

    /* 5.6 行业资讯 */
    .industry_content .information_box .information_new .news_information .news_content .news_bj {
        display: block;
    }

    .industry_content .information_box .information_new .news_information .news_content .news_bj .news_img {
        float: none !important;
        width: 100% !important;
        height: 180px !important;
    }

    .industry_content .information_box .information_new .news_information .news_content .news_bj .news_wt {
        float: none !important;
        width: 100% !important;
        padding: 18px !important;
    }

    .industry_content .information_box .information_new .news_information .news_content .news_bj .news_wt h1 {
        width: 100% !important;
        height: auto !important;
        white-space: normal !important;
    }

    .industry_content .information_box .information_new .news_information .news_content .news_bj .news_wt .news_wt_text,
    .industry_content .information_box .information_new .news_information .news_content .news_bj .news_wt .news_xq {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        white-space: normal !important;
    }

    .industry_content .information_box .information_new .news_information .news_content .news_bj .news_wt .news_xq > p {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
    }

    /* 行业资讯列表滑块的每一小块 */
    .industry_content .information_box .information_new .news_information .news_content .news_list_content,
    .industry_content .information_box .information_new .news_information .news_content .news_list_content .news_list_box {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }

    .industry_content .information_box .information_new .news_information .news_content .news_list_content .news_list_box .layui-clear {
        display: flex;
        align-items: flex-start;
        gap: 10px;
    }

    .industry_content .information_box .information_new .news_information .news_content .news_list_content .news_list_box .news_icon {
        float: none !important;
        flex: 0 0 auto;
    }

    .industry_content .information_box .information_new .news_information .news_content .news_list_content .news_list_box .message_text {
        float: none !important;
        width: auto !important;
        max-width: 100% !important;
        flex: 1 1 auto;
        min-width: 0;
    }

    .industry_content .information_box .information_new .news_information .news_content .news_list_content .news_list_box .message_text p,
    .industry_content .information_box .information_new .news_information .news_content .news_list_content .news_list_box .message_text span {
        width: 100% !important;
        max-width: 100% !important;
        white-space: normal !important;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* 5.7 客户评价 */
    .review-section {
        margin: 24px auto !important;
        padding: 0 var(--ptw-gap) !important;
    }

    .reviews-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    /* 5.8 关于我们 */
    /* 桌面版用固定 height:750px 撑版式，移动端必须放开，否则内部浮层会横向溢出 */
    #about {
        height: auto !important;
        padding-bottom: 36px;
        overflow: hidden;
    }

    #about .context {
        display: block !important;
        padding-bottom: 0 !important;
    }

    #about .context > .th {
        padding: 28px 0 18px 0 !important;
        height: auto !important;
        font-size: 22px !important;
    }

    #about .context .aboutUs {
        font-size: 14px !important;
        line-height: 1.9 !important;
        text-indent: 2em !important;
        margin-bottom: 24px !important;
    }

    #about .context > ul {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
        width: 100% !important;
    }

    #about .context > ul li {
        float: none !important;
        width: 100% !important;
        margin: 0 !important;
    }

    #about .context > ul li > .item > img.publicity_img {
        height: 130px !important;
        object-fit: cover;
    }

    /* 5.9 网店交易核心指南（_PartialCore6）
       原内联样式里的 @media (max-width:600px) 写的是 .card-grid（少了 .core6 前缀），
       优先级低于基础规则 .core6 .card-grid，所以手机上一直还是 3 列。 */
    .core6 {
        padding: 36px var(--ptw-gap) 44px !important;
    }

    .core6 .card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 16px !important;
    }

    .core6 .card {
        padding: 22px 18px !important;
    }

    .core6 .card-title {
        font-size: 17px !important;
        margin-bottom: 10px !important;
    }

    .core6 .card-content {
        font-size: 13px !important;
    }

    /* 5.10 流程解说
       桌面端是「上面一排图标 + 下面一排文字」两个独立的 <ul>。
       手机上两个列表换行数量不一致，图标和文字就对不上号。
       这里用 display:contents 把两个列表的子项提升为同一个网格的子项，
       再让网格按「列」填充：左列图标、右列对应文字，一行一个步骤。

       注意 1：买店/卖店的切换由 index.js 用 jQuery hide()/show()（行内 display）控制。
       网格布局要压过行内样式就必须 !important，但那会连隐藏一起覆盖掉，
       所以显隐改用 .ptw-hidden 类（由 responsive.js 同步）来管。
       注意 2：display:contents 的元素不生成盒子，浏览器不会为它建立计数器作用域，
       原样式挂在 .processList 上的 counter-reset 会失效（序号全变 01）。
       计数器改挂到仍然生成盒子的 .contentBox 上。 */
    #processNarrate .contentBox.ptw-hidden {
        display: none !important;
    }

    #processNarrate .contentBox:not(.ptw-hidden) {
        display: grid !important;
        grid-template-columns: 54px minmax(0, 1fr);
        grid-auto-flow: column;
        column-gap: 12px;
        row-gap: 18px;
        align-items: center;
        padding: 0 var(--ptw-gap);
        box-sizing: border-box;
        counter-reset: sectioncounter;
    }

    /* 每列放几项 = 步骤数：买店 6 步、卖店 5 步（见 Views/Home/Index.cshtml）。
       必须与列表实际条目数一致，否则图标和文字会串位。 */
    #processNarrate .contentBox.buy {
        grid-template-rows: repeat(6, auto);
    }

    #processNarrate .contentBox.sell {
        grid-template-rows: repeat(5, auto);
    }

    #processNarrate .contentBox .line {
        display: none !important;
    }

    #processNarrate .contentBox .processList,
    #processNarrate .contentBox .textBox {
        display: contents !important;
    }

    /* display:contents 之后，两个 <ul> 的 .layui-clear::after 清除浮动伪元素
       仍然会被生成，并且会各自占掉一个网格单元，把 12 项挤成 3 列。
       必须把伪元素一起去掉。 */
    #processNarrate .contentBox .processList::before,
    #processNarrate .contentBox .processList::after,
    #processNarrate .contentBox .textBox::before,
    #processNarrate .contentBox .textBox::after {
        content: none !important;
        display: none !important;
    }

    #processNarrate .contentBox .processList .itemPro {
        float: none !important;
        width: auto !important;
        margin: 0 !important;
        text-align: center;
    }

    #processNarrate .contentBox .processList .itemPro > img {
        width: 46px !important;
        height: auto;
        display: inline-block;
    }

    #processNarrate .contentBox .textBox .step {
        float: none !important;
        width: auto !important;
        margin: 0 !important;
        text-align: left;
    }

    #processNarrate .contentBox .textBox .step .th {
        font-size: 15px !important;
        margin-bottom: 2px !important;
    }

    #processNarrate .contentBox .textBox .step .describe {
        font-size: 12.5px !important;
        line-height: 1.55 !important;
    }

    /* 5.11 行业资讯标题栏（行业资讯 / 天猫转让 / 商城代入驻）
       桌面端三个标签 inline-block + margin-left:50px 合计约 308px，
       塞进 282px 且 overflow:hidden 的盒子里会被裁掉 → 看着挤在一起。 */
    .industry_content .information_box .information_title {
        padding: 24px var(--ptw-gap) 0 !important;
    }

    .industry_content .information_box .information_title .information_content {
        height: auto !important;
        overflow: visible !important;
        text-align: left !important;
    }

    .industry_content .information_box .information_title .information_content .information_table {
        display: flex !important;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px 18px;
    }

    .industry_content .information_box .information_title .information_content .information_table a {
        display: inline-block !important;
        height: auto !important;
        line-height: 1.5 !important;
        font-size: 15px !important;
        margin-left: 0 !important;
    }

    .industry_content .information_box .information_title .information_content .information_table a:after {
        margin-top: 6px !important;
    }

    /* 5.12 首页里的过小字号（标签类文字，原为 10.5~11.5px） */
    .core6 .expand-hint,
    .core6 .card-content .platform-tag,
    .core6 .card-content .tag,
    .review-section .review-tag,
    .security .step-head .tag {
        font-size: 12px !important;
    }

    /* 5.13 安全保障时间轴圆点
       _PartialSecurity.cshtml 里的 @media (max-width:600px) 选择器写的是 .step-node，
       优先级低于基础规则 .security .step-node，所以作者写的移动端尺寸从未生效。 */
    .security .step-node {
        left: -56px !important;
        width: 40px !important;
        height: 40px !important;
    }

    .security .step-node .ring {
        width: 40px !important;
        height: 40px !important;
    }
}

/* ==========================================================================
   6. 店铺列表页（淘宝 / 天猫 / 天猫新店 / 其它）
   ========================================================================== */
@media (max-width: 1024px) {
    /* 6.1 顶部横幅 */
    .shoplistBg {
        height: 130px !important;
        background-position: center;
    }

    /* 6.2 筛选面板 */
    #screenShop {
        padding: 12px 14px !important;
        border-radius: var(--ptw-radius);
    }

    #screenShop .item_Selection dl {
        padding: 0 !important;
    }

    #screenShop .item_Selection dl dt,
    #screenShop .item_Selection dl dt:first-of-type {
        float: none !important;
        width: 100% !important;
        text-align: left !important;
        padding-top: 12px !important;
        font-size: 13px;
        color: #8a8a8a;
    }

    #screenShop .item_Selection dl dd {
        float: none !important;
        width: 100% !important;
        padding-top: 6px !important;
        padding-bottom: 10px;
    }

    #screenShop .item_Selection dl dd .cates li {
        width: auto !important;
        min-width: 76px;
        padding-bottom: 10px !important;
    }

    #screenShop .item_Selection dl dd .out-div {
        width: min(240px, calc(100vw - 60px));
    }

    /* 关键字 / 价格 / 信誉 */
    #searchContent {
        width: 100% !important;
    }

    #screenShop .item_Selection .creditRating dd {
        padding-top: 10px !important;
    }

    /* 注意：只约束最外层容器。ion.rangeSlider 内部元素（.irs-grid / .irs-bar /
       .irs-slider 等）的尺寸由插件 JS 按容器宽度实时计算，覆盖会算错位置。 */
    #screenShop .item_Selection .creditRating dd .scopeCredit,
    #screenShop .item_Selection .creditRating dd .irs {
        width: 100% !important;
        max-width: 100% !important;
    }

    #screenShop .item_Selection .priceSearch .priceRange input[type="text"] {
        width: 40% !important;
        min-width: 0;
    }

    /* 其它筛选（.otherSearch）：桌面端一行 7 个下拉（每个 10.4%），
       之前窄屏被改成「一行一个」，6 个下拉占了 6 行。
       改成按宽度自动铺：每格最少 120px，一行能放几个就放几个。 */
    #screenShop .item_Selection .otherSearch dd ul {
        display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)) !important;
        gap: 8px;
    }

    #screenShop .item_Selection .otherSearch dd ul li {
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        box-sizing: border-box;
    }

    /* 6.3 排序条 */
    #sortOrder {
        display: flex;
        flex-wrap: wrap;
        gap: 6px 12px;
        padding: 12px 14px !important;
        box-sizing: border-box;
        width: 100% !important;
    }

    #sortOrder > * {
        float: none !important;
    }

    /* 6.4 店铺卡片 */
    .listItem {
        height: auto !important;
        min-height: 0 !important;
        padding: 16px 14px !important;
        border-radius: var(--ptw-radius);
    }

    .listItem .shopBrief {
        float: none !important;
        height: auto !important;
    }

    .listItem .shopBrief h3 {
        padding-left: 0 !important;
        margin-bottom: 12px !important;
        font-size: 16px !important;
        line-height: 1.5;
    }

    .listItem .shopBrief h3 .favorite {
        float: none !important;
        display: inline-block;
        margin-top: 4px;
    }

    .listItem .shopBrief .infoMsg {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 4px 10px;
    }

    .listItem .shopBrief .infoMsg ul {
        float: none !important;
        width: 100% !important;
    }

    .listItem .shopBrief .infoMsg ul li {
        width: 100% !important;
        text-align: left !important;
    }

    .listItem .shopBrief .infoMsg ul:not(:last-of-type)::after {
        display: none !important;
    }

    .listItem .shopBrief .btmBox {
        position: static !important;
        padding-left: 0 !important;
        margin-top: 14px;
        box-sizing: border-box;
    }

    .listItem .shopBrief .btmBox > div {
        text-align: left !important;
    }

    .listItem .shopBrief .btmBox .price {
        float: none !important;
        font-size: 20px !important;
    }

    .listItem .shopBrief .btmBox .price span {
        font-size: 12px !important;
    }

    .listItem .shopBrief .btmBox .shopNum {
        float: none !important;
        height: auto !important;
        line-height: 1.6 !important;
        margin: 4px 0 0 !important;
    }

    .listItem .shopBrief .btmBox .rContent {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 12px;
    }

    .listItem .shopBrief .btmBox .rContent .contact {
        flex: 1 1 46%;
        padding: 0 10px !important;
        text-align: center;
        margin: 0 !important;
    }

    .listItem .shopBrief .btmBox .rContent .qrCodeBox {
        display: none !important;
    }
}

/* ==========================================================================
   7. 店铺详情页
   ========================================================================== */
@media (max-width: 1024px) {
    /* 7.1 锚点导航 */
    #anchorNav,
    .anchorNav {
        padding: 0 14px !important;
        box-sizing: border-box;
        width: 100% !important;
    }

    .anchorNav .combox {
        width: 100% !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .anchorNav .combox.posAnchor {
        position: sticky !important;
        top: var(--ptw-nav-h) !important;
        padding: 0 14px;
        box-sizing: border-box;
    }

    .anchorNav .combox .contentPos {
        display: flex;
        gap: 16px;
        padding: 12px 0 !important;
        white-space: nowrap;
        width: max-content;
        min-width: 100%;
        box-sizing: border-box;
    }

    .anchorNav .combox .contentPos .item {
        margin-left: 0 !important;
        font-size: 14px !important;
    }

    .anchorNav .combox .contentPos .item.active::before {
        display: none !important;
    }

    .anchorNav .combox .collect {
        float: none !important;
    }

    /* 7.2 左右分栏 → 单列 */
    .leftContainer,
    .rightContainer {
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 16px !important;
    }

    #online_Customer {
        width: 100% !important;
        max-width: 100% !important;
    }

    #shop_describe .topBox {
        padding: 18px 14px !important;
    }

    #shop_describe .topBox h3 {
        width: 100% !important;
        font-size: 18px !important;
    }

    #shop_describe .topBox .number {
        position: static !important;
        margin-bottom: 10px;
        font-size: 14px !important;
    }

    #shop_describe .topBox .qrCodeBox {
        display: none !important;
    }

    #shop_describe .topBox #sellerContact .infoList {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
        padding: 18px 12px !important;
    }

    #shop_describe .topBox #sellerContact .infoList .itemMsg {
        float: none !important;
        width: 100% !important;
    }

    #shop_describe .topBox #sellerContact .infoList .itemMsg:nth-child(2n) {
        border-left: 0 !important;
        border-right: 0 !important;
    }

    #shop_describe .topBox .particulars {
        padding: 14px 12px !important;
    }

    #shop_describe .topBox .particulars .row ul {
        float: none !important;
        width: 100% !important;
        margin-bottom: 10px;
    }

    #shop_describe .topBox .particulars .row ul li {
        width: 100% !important;
        text-align: left !important;
    }

    #shop_describe .topBox .particulars .row ul:not(:last-of-type)::after {
        display: none !important;
    }

    #shop_describe .topBox .shopflag .flagList {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    #shop_describe .topBox .shopflag .flagList .itemflag {
        float: none !important;
        width: 100% !important;
    }

    #shop_describe .topBox .btn_box {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 10px;
        padding-top: 16px !important;
    }

    #shop_describe .topBox .btn_box > .price {
        float: none !important;
        font-size: 24px !important;
        margin-right: 12px !important;
    }

    #shop_describe .topBox .btn_box .bzjPrice {
        float: none !important;
    }

    #shop_describe .topBox .btn_box .btn {
        float: none !important;
        flex: 1 1 100%;
        display: flex;
        gap: 10px;
    }

    #shop_describe .topBox .btn_box .btn input[type="button"] {
        width: 100% !important;
        height: 46px !important;
        font-size: 16px !important;
        flex: 1;
    }

    #shop_describe .topBox .btn_box .btn input[type="button"]:first-of-type {
        margin-right: 0 !important;
    }

    #shop_describe .able {
        padding: 0 14px !important;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
    }

    #shop_describe .able li {
        float: none !important;
        width: 100% !important;
        height: auto !important;
        line-height: 1.8 !important;
    }

    /* 7.3 描述区 */
    #describe .content {
        padding: 18px 14px !important;
    }

    #describe .content #shopflag {
        margin-bottom: 32px !important;
    }

    #describe .content #shopflag dl .title,
    #describe .content #shopScreenshot .title,
    #describe .content #buyProcess .title,
    #describe .content #question .title {
        font-size: 17px !important;
    }

    #describe .content #shopScreenshot .layui-carousel > [carousel-item] {
        width: 100% !important;
    }

    #describe .content #buyProcess .contentBox .processList {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 14px;
        margin-top: 0 !important;
    }

    #describe .content #buyProcess .contentBox .processList .itemPro {
        margin: 0 !important;
    }

    #describe .content #buyProcess .contentBox .processList .itemPro > img {
        width: 52px !important;
    }

    #describe .content #buyProcess .contentBox .line {
        margin: 30px 0 20px 0 !important;
    }

    #describe .content #buyProcess .contentBox .textBox {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
        margin-top: 20px !important;
    }

    #describe .content #buyProcess .contentBox .textBox .step {
        float: none !important;
        width: 100% !important;
        margin: 0 !important;
    }

    /* 7.4 常见问题 */
    #describe .content #question .questions ul {
        display: block;
    }

    #describe .content #question .questions ul li {
        float: none !important;
        width: 100% !important;
        margin: 0 0 10px !important;
        padding: 16px !important;
    }

    #describe .content #question .questions ul li .ques_title {
        width: 100% !important;
        font-size: 14px !important;
        margin-bottom: 10px !important;
    }

    /* 7.5 相似店铺 */
    #similarShops {
        margin-bottom: 40px !important;
    }

    #similarShops li.itemShop {
        float: none !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 0 12px !important;
        padding: 16px !important;
        border-radius: var(--ptw-radius);
    }

    #similarShops li.itemShop .cateImg {
        position: static !important;
        margin-top: 10px;
    }
}

/* ==========================================================================
   8. 平板微调：769px ~ 1024px
   上游已套用移动版式，这里把适合宽屏的多列排版还原回来
   ========================================================================== */
@media (min-width: 769px) and (max-width: 1024px) {
    :root {
        --ptw-nav-h: 64px;
    }

    /* 8.1 页脚四列 */
    .site-footer .footer-columns {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 28px !important;
    }

    /* 8.2 首页 */
    #bannerBox,
    #bannerBox .banner,
    #bannerBox .layui-carousel {
        height: 260px !important;
    }

    #shopsSearch .bigBox > .leftBox .searchBlock {
        padding: 24px 20px 20px !important;
    }

    #shopsSearch .searchBox .selectPlatform {
        display: inline-block !important;
        width: 120px !important;
        margin: 0 0 0 12px !important;
    }

    #shopsSearch .searchBox .search-shops {
        width: 58% !important;
    }

    #shopsSearch .bigBox > .leftBox .findShops {
        width: 100% !important;
        height: 60px !important;
    }

    #qualityShops .shopRecommend .left_controler .taobaoShop,
    #qualityShops .shopRecommend .left_controler .tmallShop,
    #qualityShops .shopRecommend .left_controler .jdShop {
        margin-top: 12px !important;
    }

    #processNarrate .contentBox .textBox,
    #describe .content #buyProcess .contentBox .textBox {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    #statistics > ul {
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    }

    #statistics > ul li {
        padding: 30px 0 !important;
    }

    #about .context > ul {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    #about .context > ul li > .item > img.publicity_img {
        height: 190px !important;
    }

    .reviews-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    /* 8.3 列表页：筛选面板恢复正常横向排布 */
    #screenShop .item_Selection dl dt,
    #screenShop .item_Selection dl dt:first-of-type {
        float: left !important;
        width: 90px !important;
        text-align: center !important;
        font-weight: bold;
    }

    #screenShop .item_Selection dl dd {
        float: none !important;
        overflow: hidden;
    }

    #screenShop .item_Selection .creditRating dd .scopeCredit {
        max-width: 560px;
    }

    /* 8.4 详情页 */
    #shop_describe .topBox #sellerContact .infoList {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    #shop_describe .topBox .particulars .row {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    #shop_describe .topBox .particulars .row ul {
        float: none !important;
        width: 100% !important;
    }

    #shop_describe .topBox .particulars .row:nth-child(2) {
        margin: 14px 0 !important;
    }

    #shop_describe .topBox .shopflag .flagList {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    #shop_describe .able {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    #describe .content #question .questions ul {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }

    #describe .content #question .questions ul li {
        margin: 0 !important;
    }

    #similarShops li.itemShop {
        float: left !important;
        width: calc((100% - 14px) / 2) !important;
        margin: 0 14px 14px 0 !important;
    }

    #similarShops li.itemShop:nth-child(2n) {
        margin-right: 0 !important;
    }
}

/* ==========================================================================
   8.1 小屏（<=560px）：一行一块
   必须放在「5. 首页」之后 —— 与 5.9 的 .core6 .card-grid 规则同优先级，
   后出现的才会生效。
   ========================================================================== */
@media (max-width: 560px) {
    /* 网店交易核心指南：手机上一行一块，共 6 行 */
    .core6 .card-grid {
        grid-template-columns: 1fr !important;
    }

    .core6 .card-content {
        max-height: none !important;
        overflow: visible !important;
    }

    .core6 .card-content::after {
        display: none !important;
    }
}

/* ==========================================================================
   10. 业务表单页：出售店铺 / 商户访谈
   ========================================================================== */
@media (max-width: 1024px) {
    /* ---- 出售店铺（/sell.html）----
       桌面端 banner 高 850px、表单用 margin-top:-600px 上浮，
       手机上要把 banner 压缩并减小上浮量。 */
    /* 注意：#banner_bg 被出售店铺 / 网店估价 / 问答首页三个页面共用，
       必须用页面上单独加的类名限定，否则会互相影响。 */
    .sell-banner {
        height: 260px !important;
        background-size: cover !important;
        background-position: center top !important;
        margin-bottom: 0 !important;
    }

    .sell-banner > .th {
        margin: 26px 0 0 !important;
        padding: 0 var(--ptw-gap);
        font-size: 22px !important;
    }

    /* 这条本来是给「出售店铺落地页 /sell.html」写的：表单要上浮 60px 压到
       banner 上。但 #sellform 这个 id 在「个人中心 - 我要出售」里也用了，
       结果会员中心的表单同样被上浮 60px，整块顶出了白色卡片 ——
       「请选择省市」那一行正好露在卡片外面（实测表单顶比卡片顶还高 42px）。
       加上 .layui-main > 限定后只作用于落地页：
       落地页的 #sellform 是 .layui-main 的直接子元素，会员中心的在 #main_Box 里。 */
    .layui-main > #sellform {
        margin-top: -60px !important;
        margin-bottom: 40px !important;
        padding: 24px 16px 30px !important;
    }

    #sellform > .th {
        font-size: 17px !important;
    }

    #sellform > .tips {
        font-size: 13px !important;
        margin-bottom: 22px !important;
    }

    #sellform form .inputs input[type="text"],
    #sellform form .inputs .layui-textarea {
        width: 100% !important;
        box-sizing: border-box;
    }

    #sellform form .inputs input[type="text"] {
        height: 46px !important;
        margin-bottom: 12px !important;
    }

    #sellform form .btn_box {
        margin-top: 24px !important;
    }

    #sellform form .btn_box .layui-btn {
        width: 100% !important;
        padding: 0 !important;
        font-size: 17px !important;
    }

    #sellform form .contactBox {
        margin-top: 20px !important;
    }

    #sellform form .contactBox .contact {
        margin: 0 10px !important;
        font-size: 14px !important;
    }

    /* ---- 商户访谈（/Mall/UserInterview）---- */
    body #interView {
        padding: 0 var(--ptw-gap);
        box-sizing: border-box;
    }

    #interView .introduction {
        margin-top: 20px !important;
        padding: 18px 16px !important;
    }

    #interView .introduction img.userImg {
        float: none !important;
        width: 120px !important;
        height: 168px !important;
        margin: 0 auto 12px !important;
        display: block !important;
        border-radius: 8px;
    }

    #interView .introduction .dateTime {
        position: static !important;
        width: fit-content;
        margin: 0 auto 12px !important;
        padding: 6px 14px !important;
        height: auto !important;
        line-height: 1.6 !important;
        font-size: 14px !important;
        text-align: center;
        background-size: 100% 100% !important;
    }

    #interView .introduction .container {
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        padding-left: 0 !important;
    }

    #interView .introduction .container .shopMsg {
        position: static !important;
        margin-top: 14px;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
    }

    #interView .introduction .container .shopMsg ul {
        float: none !important;
        width: 100% !important;
        padding: 0 !important;
        text-align: center;
    }

    #interView .text_container {
        margin-top: 24px !important;
        margin-bottom: 40px !important;
    }

    #interView .text_container .interviewSite,
    #interView .text_container .review {
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }

    #interView .text_container .interviewSite {
        padding: 42px 14px 24px !important;
    }

    #interView .text_container .interviewSite .title_bg {
        max-width: 62%;
        top: -16px !important;
    }

    #interView .text_container .interviewSite ul li {
        display: flex !important;
        align-items: flex-start;
        gap: 8px;
    }

    #interView .text_container .interviewSite ul li:nth-child(2n) {
        flex-direction: row-reverse;
    }

    #interView .text_container .interviewSite ul li .picIco {
        float: none !important;
        flex: 0 0 44px;
        width: 44px !important;
        margin-bottom: 0 !important;
    }

    #interView .text_container .interviewSite ul li .picIco .name {
        width: 44px !important;
        height: auto !important;
        line-height: 1.4 !important;
        font-size: 12px !important;
    }

    #interView .text_container .interviewSite ul li .question {
        float: none !important;
        flex: 1 1 auto;
        min-width: 0;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 10px 12px !important;
        font-size: 14px !important;
    }

    #interView .text_container .interviewSite ul li:nth-child(2n) > span {
        float: none !important;
    }

    #interView .text_container .review {
        padding: 36px 16px 24px !important;
        margin-top: 16px !important;
    }

    #interView .text_container .review ul li .reviewMember_pic {
        width: 22% !important;
    }

    #interView .text_container .review ul li .textBox {
        width: 72% !important;
        font-size: 14px !important;
    }
}

/* ==========================================================================
   11. 登录 / 注册页
   ========================================================================== */
@media (max-width: 1024px) {
    #main {
        min-width: 0 !important;
        width: 100% !important;
    }

    /* 左侧 737px 的整图背景在手机上没意义，直接隐藏 */
    #main .leftBox {
        display: none !important;
    }

    #main .rightBox {
        float: none !important;
        width: 100% !important;
        padding: 0 var(--ptw-gap) !important;
        box-sizing: border-box;
    }

    #main .rightBox .goHome {
        float: none !important;
        display: inline-block;
        margin: 18px 0 0 !important;
        font-size: 15px !important;
    }

    #main .rightBox .goHome > img {
        margin-right: 8px !important;
    }

    #main .rightBox #loginBox,
    #main .rightBox #registerBox,
    #main .rightBox #forgetPwdBox {
        width: 100% !important;
        max-width: 440px;
        margin: 24px auto 48px !important;
    }

    #main .rightBox #loginBox .th,
    #main .rightBox #registerBox .th {
        font-size: 20px !important;
    }

    #main .rightBox #loginBox .layui-tab .layui-tab-title {
        margin: 24px 0 20px 0 !important;
    }

    #main .rightBox #loginBox .layui-tab .layui-tab-title li {
        width: 50% !important;
    }
}

/* ==========================================================================
   12. 会员中心（Navigation.cshtml 布局）
   ========================================================================== */
@media (max-width: 1024px) {
    /* 移动端顶部条：默认隐藏，仅移动端显示 */
    .pc-mobile-bar,
    .pc-mobile-mask {
        display: none;
    }
}

@media (min-width: 1025px) {
    .pc-mobile-bar,
    .pc-mobile-mask {
        display: none !important;
    }
}

@media (max-width: 1024px) {
    /* 只给会员中心布局加顶部留白（它自身没有其它占位元素）。
       注意不能写成裸 body 选择器 —— 那会给全站每个页面都加上这段内边距，
       和页面自己的上边距叠加后就会出现「离顶部太远」的问题。 */
    body.pc-page {
        min-width: 0 !important;
        padding-top: 56px;
    }

    .pc-mobile-bar {
        display: flex;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: 56px;
        padding: 0 var(--ptw-gap);
        align-items: center;
        justify-content: space-between;
        background-color: var(--ptw-ink);
        z-index: 1002;
        box-sizing: border-box;
    }

    .pc-mobile-bar .pc-mobile-logo img {
        height: 30px;
        width: auto;
        display: block;
    }

    .pc-mobile-toggle {
        width: 44px;
        height: 44px;
        margin-right: -8px;
        padding: 0;
        border: 0;
        background: transparent;
        cursor: pointer;
    }

    .pc-mobile-toggle span {
        display: block;
        width: 22px;
        height: 2px;
        margin: 5px auto;
        background-color: #fff;
        border-radius: 2px;
        transition: transform 0.22s ease, opacity 0.22s ease;
    }

    body.pc-nav-open .pc-mobile-toggle span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }

    body.pc-nav-open .pc-mobile-toggle span:nth-child(2) {
        opacity: 0;
    }

    body.pc-nav-open .pc-mobile-toggle span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }

    /* 侧边栏 → 抽屉 */
    #sidebar {
        position: fixed !important;
        top: 56px !important;
        left: -100% !important;
        bottom: 0;
        width: 78% !important;
        max-width: 300px;
        height: auto !important;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        transition: left 0.25s ease;
        z-index: 1003;
    }

    body.pc-nav-open #sidebar {
        left: 0 !important;
    }

    #sidebar > .logo {
        margin-top: 20px !important;
        margin-bottom: 16px !important;
    }

    #sidebar > .logo img {
        height: 30px;
        width: auto;
    }

    #sidebar .layui-nav-tree {
        /* layui 的 .layui-nav-tree 写死了 width:200px，
           而抽屉宽 78%（最大 300px），手机上菜单右边会空出 100px。
           li 是 width:100%，所以把 ul 放开就整条都撑满了。 */
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        padding-bottom: 40px;
        box-sizing: border-box;
    }

    .pc-mobile-mask {
        display: none;
        position: fixed;
        top: 56px;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.45);
        z-index: 1002;
    }

    body.pc-nav-open .pc-mobile-mask {
        display: block;
    }

    /* 主体区：取消桌面端为侧边栏预留的左边距 */
    #container {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 16px var(--ptw-gap) 40px !important;
        box-sizing: border-box;
    }

    #selectRecharge {
        margin-bottom: 20px !important;
    }

    #selectRecharge a {
        font-size: 15px !important;
    }

    #selectRecharge a:not(:last-of-type) {
        margin-right: 16px !important;
    }

    #selectRecharge .this {
        font-size: 18px !important;
    }

    /* 表格：外层滚动，避免整页被撑宽 */
    #container table,
    #container .layui-table {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* 表单：标签与输入框改成上下排列 */
    /* 桌面端 #sellform / .setPasswordFrom / #main_Box 都是固定 800px 宽 */
    #container #sellform,
    #container .setPasswordFrom,
    #container #main_Box,
    #container .layui-form {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }

    #container .layui-form-label {
        float: none !important;
        display: block !important;
        width: auto !important;
        padding: 0 0 6px !important;
        text-align: left !important;
    }

    #container .layui-input-block,
    #container .layui-input-inline {
        margin-left: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        float: none !important;
        display: block !important;
        /* layui 自带的 @media screen and (max-width:450px) 里给
           .layui-form-item .layui-input-inline 写了 left:-3px
           （那是配合它默认「标签浮动 + 输入框缩进」的老版式）。
           这里的输入框已经被改成整行，这 -3px 只会让输入框比上面的标签
           往左多出 3px，看着就是「备注 / 支付密码 有点错位」。
           实测受影响 10 个页面（支付页、改密码、充值提现、买卖店铺表单等），
           统一归零。 */
        left: 0 !important;
        box-sizing: border-box;
    }

    /* 出售店铺表单里几个评分输入框是行内 width:80~96px，
       六个并排在小屏会溢出，统一改成整行 */
    #container #sellform .layui-form-item .layui-input-inline,
    #container #sellform .layui-form-item .layui-input-inline .layui-input,
    #container #sellform .layui-form-item .deductMarks {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }

    #container .layui-form-item {
        margin-bottom: 14px !important;
    }

    #container .layui-form-item .layui-btn {
        width: 100%;
    }

    /* 分页 */
    #container #paging,
    #container .layui-laypage {
        width: 100% !important;
        box-sizing: border-box;
    }

    /* 会员中心各页里的固定宽度卡片 / 表单
       （consultation.css 的 610px、fundsManagement.css 的 .confirmPayment 839px 等） */
    #container .textBox,
    #container .textBox .layui-form-item,
    #container .confirmPayment,
    #container .confirmPayment .textBox,
    #container .tipsBox,
    #container .process,
    #container .alreadySell,
    #container .sellShopList {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }

    /* 确认按钮普遍带 margin-left:110~137px 和较大的左右内边距，小屏会顶出边界 */
    #container .confirmBtn,
    #container .layui-btn.confirmBtn {
        width: 100% !important;
        margin-left: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        box-sizing: border-box;
    }

    #container .layui-btn {
        max-width: 100%;
        box-sizing: border-box;
    }

    /* 付款页的支付宝/微信收款卡片是 width:380px + padding:20px（content-box），
       实际占位 420px，小屏会顶出去 */
    #container .payCodeBox,
    #container .payCodeBox .alipay-box,
    #container .payCodeBox .wxpay-box,
    #container .payCodeBox .aliPayBox,
    #container .alipayCard {
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }

    #container .alipayCard {
        height: auto !important;
        padding: 16px !important;
    }

    #container .shroffAccountNumber,
    #container .shroffAccountNumber .user {
        float: none !important;
        width: 100% !important;
        box-sizing: border-box;
    }

    /* 进度条（审核中 / 已上架 …）：桌面端靠 li 的 70px 外边距和 200% 宽的连接线排版，
       小屏会顶出 7px，这里改成等距 flex 排列 */
    #container #process {
        height: auto !important;
        padding: 16px 8px !important;
    }

    #container #process > ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 6px 14px;
    }

    #container #process > ul li {
        display: block !important;
        white-space: nowrap;
        font-size: 13px !important;
    }

    #container #process > ul li:not(:last-of-type):not(:first-of-type) {
        margin-right: 0 !important;
    }

    #container #process > ul li::after {
        display: none !important;
    }
}

/* ==========================================================================
   13. 问答中心（/help/qa.html 等，question.css）
   ========================================================================== */
@media (max-width: 1024px) {
    .body-nav {
        width: 100% !important;
        padding-bottom: 40px !important;
        box-sizing: border-box;
    }

    /* 桌面端是「900px 问题列表 + 290px 侧栏」两栏 */
    .body-nav .body-nav-box,
    .body-nav .body-nav-box .left-box,
    .body-nav .body-nav-box .right-box {
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }

    .body-nav .body-nav-box .right-box {
        margin-top: 16px;
    }

    /* 列表项：桌面端固定 61px 高、标题 620px 宽，手机上换行排 */
    .body-nav .body-nav-box .left-box .left-box-body .left-box-body-detail {
        display: flex !important;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px 10px;
        height: auto !important;
        padding: 12px !important;
        box-sizing: border-box;
    }

    .body-nav .body-nav-box .left-box .left-box-body .left-box-body-detail > span {
        flex: 0 0 6px;
        margin: 0 !important;
    }

    .body-nav .body-nav-box .left-box .left-box-body .left-box-body-detail .word1 {
        flex: 1 1 calc(100% - 24px);
        width: auto !important;
        max-width: 100% !important;
        white-space: normal !important;
        line-height: 1.5 !important;
    }

    .body-nav .body-nav-box .left-box .left-box-body .left-box-body-detail div {
        float: none !important;
        display: flex;
        align-items: center;
    }

    .body-nav .body-nav-box .left-box .left-box-body .left-box-body-detail div img {
        float: none !important;
        margin: 0 4px 0 0 !important;
    }

    .body-nav .body-nav-box .left-box .left-box-body .left-box-body-detail div .word2,
    .body-nav .body-nav-box .left-box .left-box-body .left-box-body-detail .word3 {
        float: none !important;
        width: auto !important;
        line-height: 1.4 !important;
        margin: 0 !important;
    }

    .body-nav .body-nav-box .left-box .left-box-body .left-box-body-detail .word3 {
        margin-left: auto !important;
    }

    /* 问答首页 / 问答详情里的左右分栏 */
    #ques_container > .layui-main .leftContent,
    #ques_container > .layui-main .rightContent,
    #questionDetail .layui-main #contentBox .leftContent,
    #questionDetail .layui-main #contentBox .rightContent {
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-right: 0 !important;
        margin-bottom: 16px !important;
        box-sizing: border-box;
    }
}

/* ==========================================================================
   14. 帮助中心首页（/Help/Help，helpCenter.css）
   ========================================================================== */
@media (max-width: 1024px) {
    #helpCenter #searchHelp .layui-main {
        padding: 0 var(--ptw-gap) !important;
        box-sizing: border-box;
    }

    /* 搜索框固定 770px、按钮绝对定位到 18.2% 处 */
    #helpCenter #searchHelp .layui-main .searchBox .searchContent {
        width: 100% !important;
        box-sizing: border-box;
        padding-right: 84px;
    }

    #helpCenter #searchHelp .layui-main .searchBox .findHelp {
        right: 4px !important;
    }

    #helpCenter .helpContent {
        margin-top: -40px !important;
        padding: 20px 14px 32px !important;
    }

    /* 桌面端是「315px 左侧菜单 + 805px 右内容」两栏 */
    #helpCenter .helpContent .leftMenu,
    #helpCenter .helpContent .rContent {
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }

    #helpCenter .helpContent .leftMenu .helpMenu {
        width: 100% !important;
        min-height: 0 !important;
    }

    #helpCenter .helpContent .rContent {
        padding: 0 !important;
        margin-top: 20px;
    }

    #helpCenter .helpContent .rContent .title.th {
        width: 100% !important;
        font-size: 17px !important;
    }

    /* 右内容里的表格/卡片 */
    #helpCenter .helpContent .rContent .quickGuide,
    #helpCenter .helpContent .rContent .faqs,
    #helpCenter .helpContent .rContent .faqClass,
    #helpCenter .helpContent .rContent .contact {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }

    #helpCenter .helpContent .rContent .quickGuide {
        display: block !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    #helpCenter .helpContent .rContent .faqs .faqClass ul li {
        float: none !important;
        width: 100% !important;
        box-sizing: border-box;
    }
}

/* ==========================================================================
   15. 网店估价（/valuation.html，assessment.css）
   ========================================================================== */
@media (max-width: 1024px) {
    /* banner 固定 715px 高、背景按 1920px 宽铺，手机上一并放开 */
    .valuation-banner {
        height: auto !important;
        padding-bottom: 28px;
        background-size: cover !important;
        background-position: center top !important;
    }

    .valuation-banner .pinggu_sum {
        margin-top: 24px !important;
        margin-bottom: 20px !important;
    }

    .valuation-banner .pinggu_sum span {
        font-size: 13px;
    }

    .valuation-banner .pinggu_sum span b {
        font-size: 18px !important;
    }

    .valuation-banner .pinggu_sum .th {
        margin-top: 6px !important;
        font-size: 22px !important;
        line-height: 1.45;
    }

    /* 估价盒：桌面端 padding 是 110px 140px，左右各 140px 会把表单内容压成 82px 宽，
       标签 43px、输入框 41px、按钮 36px —— 这就是「错位」的根源 */
    .valuation-banner .pingguBox {
        padding: 20px 14px !important;
        border-radius: 10px;
    }

    .valuation-banner .pingguBox .layui-form .layui-form-item {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }

    .valuation-banner .pingguBox .layui-form .layui-form-item .layui-form-label {
        width: 100% !important;
        height: auto !important;
        line-height: 1.5 !important;
        padding: 0 !important;
        border: 0 !important;
        text-align: left !important;
        font-size: 14px !important;
    }

    .valuation-banner .pingguBox .layui-form .layui-form-item .layui-form-label::after {
        display: none !important;
    }

    .valuation-banner .pingguBox .layui-form .layui-form-item .layui-input {
        width: 100% !important;
        float: none !important;
        height: 48px !important;
        border: 1px solid #e6e6e6 !important;
        border-radius: 6px;
        box-sizing: border-box;
    }

    .valuation-banner .pingguBox .layui-form .layui-form-item button {
        float: none !important;
        width: auto !important;
        flex: 1 1 0;
        height: 46px !important;
        line-height: 46px !important;
        margin: 0 !important;
        border-radius: 6px !important;
        font-size: 15px !important;
    }

    .valuation-banner .pingguBox .layui-form .layui-form-item .pgbtn {
        margin-right: 0 !important;
    }

    .valuation-banner .tips {
        margin-top: 16px !important;
        font-size: 12.5px !important;
        line-height: 1.7;
        text-align: left;
    }

    .valuation-banner .tips .price {
        margin-right: 8px !important;
    }

    /* 「我们的优势」4 列 → 2 列 */
    .advantage {
        padding: 28px 15px !important;
    }

    .advantage .th {
        font-size: 18px !important;
        margin-bottom: 18px;
    }

    .advantage .th > span {
        display: block;
        margin: 6px 0 0 !important;
    }

    .advantage > ul {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .advantage > ul > li {
        float: none !important;
        width: 100% !important;
        padding: 22px 10px !important;
        border-radius: 8px;
        box-sizing: border-box;
    }

    .advantage > ul > li > img {
        height: 46px !important;
    }

    .advantage > ul > li ul {
        margin-top: 14px !important;
    }

    .advantage > ul > li ul li {
        font-size: 12.5px !important;
        line-height: 1.6 !important;
    }

    .advantage > ul > li ul li:first-of-type {
        font-size: 16px !important;
    }

    /* 底部「快捷出售」条（assessment.css 的 .sellshop）
       桌面端：标签是 position:absolute 压在输入框上，输入框宽 935px 且 padding-left:200px，
       按钮固定 290px 右浮动。手机上三者会叠在一起，改成上下排列。 */
    .sellshop {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 10px;
        position: static !important;
        margin-top: 28px !important;
        margin-bottom: 32px !important;
    }

    .sellshop > span {
        position: static !important;
        left: auto !important;
        display: block;
        width: 100% !important;
        height: auto !important;
        line-height: 1.5 !important;
        margin: 0 !important;
        font-size: 16px !important;
    }

    .sellshop > input[type="text"] {
        flex: 1 1 100%;
        width: 100% !important;
        max-width: 100% !important;
        height: 48px !important;
        padding-left: 14px !important;
        box-sizing: border-box;
    }

    .sellshop > .sell_btn {
        float: none !important;
        width: 100% !important;
        height: 48px !important;
        line-height: 48px !important;
        margin: 0 !important;
        font-size: 16px !important;
    }
}

/* ==========================================================================
   16. 新闻资讯页（/news.html，News/Index.cshtml）
   ========================================================================== */
@media (max-width: 1024px) {
    /* 页面内联样式里 .container 是 margin:140px auto 50px，
       140px 是给桌面端 95px 固定导航留的间距；
       移动端导航只有 58px 高，改成 58 + 16 = 74px。 */
    .news-container {
        margin-top: 74px !important;
        margin-bottom: 32px !important;
        padding: 0 var(--ptw-gap);
        box-sizing: border-box;
    }

    /* 资讯中心（/information.html、/information-{标签}-{页码}.html）
       用的也是 .onlineQA 两栏结构，但页面顶部已经有 .zwf 占位，
       不需要 .news-container 那 74px 上边距，叠加类单独抹掉。 */
    .news-container.info-news-container {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    .news-container .news-wrap {
        flex-direction: column;
        gap: 16px;
        padding: 1em 0;
    }

    /* 资讯列表页（/news/dianshangzixun.html 等，News/NewIndex.cshtml）
       桌面端是「76% 列表 + 230px 热门栏」两栏，230px 那块是 float:right，
       手机上两栏会直接重叠——右侧栏从 x=160 开始，盖住左栏右半边。 */
    .news-container .onlineQA {
        padding: 16px var(--ptw-gap) !important;
        box-sizing: border-box;
    }

    .news-container .onlineQA_left,
    .news-container .onlineQA_right,
    .news-container .onlineQA .onlineQA_right {
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 14px !important;
        box-sizing: border-box;
    }

    .news-container .onlineQA_left {
        padding: 16px 14px !important;
        border-radius: 10px;
    }

    /* 列表项：桌面端缩略图占 27.5%、文字 70%；
       手机上保留「左图右文」，但把缩略图缩到 92px */
    .news-container .onlineQA_left_list {
        padding: 14px 0 !important;
    }

    .news-container .onlineQA_left_list > .headportrait {
        float: left !important;
        width: 92px !important;
        margin: 0 10px 0 0 !important;
    }

    .news-container .onlineQA_left_list > .headportrait a img {
        width: 92px !important;
        height: 68px !important;
        object-fit: cover;
        border-radius: 6px;
    }

    .news-container .onlineQA_left_list > .description {
        float: none !important;
        width: auto !important;
        overflow: hidden; /* 形成 BFC，避免文字绕到缩略图下方 */
    }

    .news-container .onlineQA_left_list > .description h6 a {
        font-size: 15px !important;
        line-height: 1.5;
    }

    .news-container .onlineQA_left_list > .description .news-text {
        font-size: 13px !important;
        line-height: 1.6 !important;
        -webkit-line-clamp: 2;
    }

    .news-container .onlineQA_left_list > .description .newslist-b {
        font-size: 12px !important;
        line-height: 1.6;
    }

    /* 资讯详情页（/news/{id}.html，News/details.css）
       桌面端是固定 1190px 容器：左侧正文 .lefts/.l-f2 820px + 右侧 .rights 350px，
       正文内层 .cc-con / .others / .sx / .arts 又都是 760~763px 固定宽。
       手机上要逐层放开并把右栏堆到下面。 */
    .news-container .con {
        width: 100% !important;
        margin: 0 auto !important;
        overflow: visible !important;
    }

    .news-container .con .lefts,
    .news-container .con .rights {
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }

    .news-container .con .rights {
        margin-top: 16px;
    }

    .news-container .con .l-f2,
    .news-container .con .cc-con,
    .news-container .con .l-f2 .others,
    .news-container .con .sx,
    .news-container .con .l-f2 .arts,
    .news-container .con .r-con,
    .news-container .con .r-f1,
    .news-container .con .r-f4,
    .news-container .con .r-f1 ul,
    .news-container .con .r-f4 ul {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }

    .news-container .con .r-f1,
    .news-container .con .r-f4 {
        height: auto !important;
    }

    .news-container .con .l-f2 {
        padding: 16px 14px 20px !important;
    }

    .news-container .con .l-f2 .title {
        font-size: 18px !important;
        line-height: 1.5 !important;
        text-align: left !important;
    }

    .news-container .con .l-f2 .place {
        height: auto !important;
        line-height: 1.8 !important;
        background: none !important;
        padding-left: 0 !important;
    }

    /* 时间 / 来源几个 span 原本靠 50~70px 的左边距排开，窄屏会溢出 */
    .news-container .con .l-f2 .others {
        height: auto !important;
        line-height: 1.9 !important;
        font-size: 12.5px !important;
    }

    .news-container .con .l-f2 .others span {
        float: none !important;
        margin-left: 0 !important;
        margin-right: 14px !important;
        display: inline-block;
    }

    .news-container .con .bbdy {
        font-size: 15px !important;
        line-height: 1.85 !important;
    }

    .news-container .con .sx {
        height: auto !important;
    }

    /* 上一篇 / 下一篇：原来是 inline 的 300px 定宽块左右浮动，
       窄屏上文字会溢出（实测超出右侧 40px），改成上下两行 + 省略号 */
    .news-container .con .sx .s,
    .news-container .con .sx .x {
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        box-sizing: border-box;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .news-container .con .sx .s a,
    .news-container .con .sx .x a {
        display: block;
        width: 100% !important;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .news-container .con .sx .x {
        margin-top: 6px;
    }
}

/* ==========================================================================
   17. 天猫代入驻（/settled.html，Settled.css）
   ========================================================================== */
@media (max-width: 1024px) {
    /* banner 里的两个按钮桌面端是 24px 字 + 55px 左右内边距，单个 206px 宽，
       手机上一行放不下就换行成两行，配合 bottom:27% 的绝对定位会整块顶出 banner、
       压到顶部导航下面。这里缩小按钮并强制单行。 */
    .banner .btnBox {
        bottom: 8% !important;
        white-space: nowrap;
    }

    .banner .btnBox .btn {
        font-size: 15px !important;
        padding: 12px 18px !important;
        margin: 0 6px !important;
        background-size: 100% 100% !important;
        background-position: center !important;
    }
}

/* ==========================================================================
   18. 天猫代入驻内容区（Settled.css）
   ========================================================================== */
@media (max-width: 1024px) {
    /* ---- 1. 经营类目：桌面端一行 9 个（11.11%），手机上每格只有 43px 太挤 ---- */
    .category {
        padding: 28px 0 8px !important;
    }

    .category > .th {
        font-size: 20px !important;
    }

    .category > .txt {
        font-size: 13px !important;
        margin-bottom: 16px !important;
    }

    .category > ul {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
        margin-top: 10px !important;
    }

    .category > ul li {
        float: none !important;
        width: 100% !important;
        height: auto !important;
        padding: 14px 4px 10px !important;
        position: static !important;
        box-sizing: border-box;
        border-radius: 10px;
    }

    /* 图标原本是 position:absolute + top:-35px 浮在格子上方，
       多行排列时会压到上一行的文字，改成正常流。 */
    .category > ul li > img {
        position: static !important;
        display: block !important;
        margin: 0 auto 8px !important;
        height: 42px;
        width: auto;
    }

    .category > ul li > p {
        position: static !important;
        margin: 0 !important;
        font-size: 13px !important;
        line-height: 1.4;
    }

    /* ---- 2. 入驻难怎么办：桌面端一行 4 个（23.47%）+ 图标绝对定位，
            手机上每格只有 91px，图标 left:45px 直接飞出格子 ---- */
    .questionOne {
        padding-top: 28px !important;
    }

    .questionOne .layui-main > .th {
        font-size: 20px !important;
    }

    .questionOne .layui-main > .txt {
        font-size: 13px !important;
        margin-bottom: 18px !important;
    }

    /* 桌面端 bottom:-60px 是让列表压到下一节，手机上取消并改单列 */
    .questionOne .layui-main > ul {
        position: static !important;
        bottom: auto !important;
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
        padding-bottom: 24px;
    }

    .questionOne .layui-main > ul .item {
        float: none !important;
        width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        padding: 18px 16px !important;
        border-radius: 8px;
        box-sizing: border-box;
    }

    .questionOne .layui-main > ul .item > img {
        position: static !important;
        display: block;
        margin: 0 0 10px !important;
        height: 44px;
        width: auto;
    }

    .questionOne .layui-main > ul .item > .th {
        margin-top: 0 !important;
        margin-bottom: 8px !important;
        font-size: 17px !important;
    }

    .questionOne .layui-main > ul .item .text {
        font-size: 13px !important;
        line-height: 1.7 !important;
    }

    /* ---- 3. 不懂运营：介绍图是 1200×424 的横版图，
            缩到 390px 宽后里面的字看不清，改成可横向滑动 ---- */
    .questionTwo {
        padding-top: 28px !important;
    }

    .questionTwo .layui-main > .th {
        font-size: 20px !important;
    }

    .questionTwo .layui-main > .txt {
        font-size: 13px !important;
        margin-bottom: 16px !important;
    }

    /* 横版长图（不懂运营介绍图 / 入驻流程图）在手机上缩得太小看不清，
       放进 .img-scroll 里单独横向滑动；标题文字在容器外，滑动时保持不动。 */
    .img-scroll-wrap {
        position: relative;
    }

    .img-scroll {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .img-scroll > img {
        width: 760px !important;
        max-width: none !important;
        display: block;
        margin-bottom: 0 !important;
    }

    /* 滑动提示：滑动过之后自动淡出 */
    .img-scroll-hint {
        display: block;
        position: absolute;
        right: 10px;
        bottom: 10px;
        padding: 4px 12px;
        border-radius: 20px;
        background-color: rgba(0, 0, 0, 0.55);
        color: #fff;
        font-size: 12px;
        line-height: 1.7;
        white-space: nowrap;
        pointer-events: none;
        z-index: 2;
        transition: opacity 0.25s ease;
    }

    .img-scroll-wrap.is-scrolled .img-scroll-hint {
        opacity: 0;
    }

    /* 点击图片放大：全屏浮层，可双指缩放 / 两向拖动 */
    .ptw-img-lightbox {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 1300;
        background-color: rgba(0, 0, 0, 0.92);
    }

    .ptw-img-lightbox.is-open {
        display: block;
    }

    .ptw-img-lightbox__scroll {
        position: absolute;
        inset: 0;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
        display: flex;
        padding: 44px 6px 40px;
        box-sizing: border-box;
    }

    .ptw-img-lightbox__scroll > img {
        display: block;
        /* 全局移动端规则有 img{max-width:100%!important}，这里必须同样用 !important 覆盖，
           否则放大后的原图会被压回屏幕宽度 */
        max-width: none !important;
        flex: 0 0 auto;
        /* 用 margin:auto 居中；图片比容器宽时会自动靠左，不会被裁掉左边 */
        margin: auto;
        background-color: #fff;
    }

    .ptw-img-lightbox__close {
        position: absolute;
        top: 8px;
        right: 8px;
        z-index: 3;
        width: 40px;
        height: 40px;
        padding: 0;
        border: 0;
        border-radius: 50%;
        background-color: rgba(255, 255, 255, 0.16);
        color: #fff;
        font-size: 24px;
        line-height: 40px;
        text-align: center;
        cursor: pointer;
    }

    .ptw-img-lightbox__tip {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 8px;
        margin: 0;
        text-align: center;
        color: rgba(255, 255, 255, 0.7);
        font-size: 12px;
        pointer-events: none;
        z-index: 3;
    }

    /* ---- 4. 立即入驻表单：桌面端两个一行（49% + 24px），手机上一行放不下 ---- */
    .formData {
        padding-top: 28px !important;
    }

    .formData .layui-main > .th {
        font-size: 20px !important;
    }

    .formData .layui-main > .txt {
        font-size: 13px !important;
        margin-bottom: 20px !important;
    }

    .formData .layui-main .layui-form-item,
    .formData .layui-main .layui-form-item:nth-child(2n+1) {
        float: none !important;
        width: 100% !important;
        margin-right: 0 !important;
        margin-bottom: 12px !important;
        box-sizing: border-box;
    }

    .formData .layui-main .layui-form-item .layui-input,
    .formData .layui-main .layui-form-item .layui-textarea,
    .formData .layui-main .demandBox .demand {
        width: 100% !important;
        box-sizing: border-box;
    }

    .formData .layui-main .btnData {
        width: 100% !important;
        margin-top: 18px !important;
        margin-bottom: 40px !important;
    }
}

/* ==========================================================================
   9. 移动端「联系客服」底部面板
   替代原先的微信二维码弹窗（同一台设备无法扫描自己屏幕上的二维码）
   ========================================================================== */
@media (max-width: 1024px) {
    .ptw-contact-sheet {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 1100;
    }

    .ptw-contact-sheet.is-open {
        display: block;
    }

    .ptw-contact-sheet__mask {
        position: absolute;
        inset: 0;
        background-color: rgba(0, 0, 0, 0.45);
    }

    .ptw-contact-sheet__panel {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        padding: 20px var(--ptw-gap) calc(16px + env(safe-area-inset-bottom, 0px));
        background-color: #fff;
        border-radius: 16px 16px 0 0;
        box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.14);
        transform: translateY(100%);
        transition: transform 0.24s ease;
        box-sizing: border-box;
    }

    .ptw-contact-sheet.is-open .ptw-contact-sheet__panel {
        transform: translateY(0);
    }

    .ptw-contact-sheet__title {
        margin: 0 0 4px;
        font-size: 17px;
        font-weight: 700;
        color: var(--ptw-ink);
        text-align: center;
    }

    .ptw-contact-sheet__sub {
        margin: 0 0 18px;
        font-size: 13px;
        color: #8a8a8a;
        text-align: center;
    }

    .ptw-contact-sheet__actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .ptw-contact-sheet__btn {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-height: 66px;
        padding: 8px 6px;
        border: 0;
        border-radius: 12px;
        font-family: inherit;
        font-size: 15px;
        font-weight: 600;
        line-height: 1.4;
        color: #fff;
        text-decoration: none;
        cursor: pointer;
        box-sizing: border-box;
    }

    .ptw-contact-sheet__btn small {
        display: block;
        margin-top: 3px;
        font-size: 12px;
        font-weight: 400;
        opacity: 0.85;
        letter-spacing: 0.2px;
    }

    .ptw-contact-sheet__btn--call {
        background-color: var(--ptw-gold);
    }

    .ptw-contact-sheet__btn--copy {
        background-color: var(--ptw-ink);
    }

    .ptw-contact-sheet__alt {
        display: block;
        margin-top: 12px;
        font-size: 13px;
        color: #666;
        text-align: center;
        text-decoration: none;
    }

    .ptw-contact-sheet__close {
        display: block;
        width: 100%;
        min-height: 46px;
        margin-top: 14px;
        border: 0;
        border-radius: 12px;
        background-color: #f2f2f2;
        color: #444;
        font-family: inherit;
        font-size: 15px;
        cursor: pointer;
    }

    .ptw-contact-toast {
        position: fixed;
        left: 50%;
        bottom: 42%;
        z-index: 1200;
        max-width: calc(100vw - 48px);
        padding: 10px 18px;
        border-radius: 20px;
        background-color: rgba(0, 0, 0, 0.78);
        color: #fff;
        font-size: 13px;
        line-height: 1.5;
        text-align: center;
        transform: translateX(-50%);
        opacity: 0;
        transition: opacity 0.2s ease;
        pointer-events: none;
    }

    .ptw-contact-toast.is-show {
        opacity: 1;
    }

    /* openWxKf() 在 common.js 里按桌面位置 offset:['40%', window-238] 定位，
       手机上会贴右半边，这里改成水平居中、内容自适应。 */
    .layui-layer.wxkf_r {
        left: 50% !important;
        top: 24% !important;
        margin-left: -99px !important;
        width: 198px !important;
        height: 252px !important;
        border-radius: 12px;
        /* 注意：这里不能用 overflow:hidden 做圆角 ——
           layui 的关闭按钮 .layui-layer-setwin 是浮层外面右上角那一块
           （实测 top:-28px; right:-28px），overflow:hidden 会把它裁掉一半，
           看起来就是「关闭图标显示不全」。圆角改到内容层上做。 */
        overflow: visible !important;
    }

    .layui-layer.wxkf_r .layui-layer-content {
        border-radius: 12px;
        overflow: hidden;
    }

    .layui-layer.wxkf_r img {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain;
    }

    /* 二维码浮层是 198px 宽的独立层，避免它把页面撑宽 */
    .layui-layer-page.wxkf_r {
        max-width: calc(100vw - 24px) !important;
    }
}

/* ==========================================================================
   19. 排版质量修复
   由 _mobile_audit/quality-scan.mjs 扫描 82 个页面得出：
   横向溢出为 0，但仍存在「字号过小 / 可点区域过小 / 内容被裁切」的问题。
   ========================================================================== */
@media (max-width: 1024px) {
    /* ---- 19.1 字号过小 ----
       静态内容页里大量 10~11.5px 的标签、注释、脚注文字，手机上明显偏小。
       这些类名都是各页内联样式里专有的，不会误伤其它页面。 */
    .ev-tag,
    .fee-tag,
    .flow-step-meta,
    .flow-node-hint,
    .flow-hint,
    .flow-dot-label span,
    .fund-node-desc,
    .fee-distinct-not,
    .nm-label,
    .entity-card-role,
    .scope-tag,
    .report-header-badge,
    .idx,
    .tm-tag,
    .lic-status,
    .mech-node-hint,
    .tag,
    .expert-tag,
    .expert-stat-label,
    .label,
    .review-order-id,
    .review-time,
    .verified-badge,
    .store-tag,
    .data-range,
    .metric-note-label,
    .metric-note-text,
    .declaration-meta,
    .detail-table th,
    .cert-cell p,
    .fb-sub-tag,
    .fb-time-label,
    .fb-result-label {
        font-size: 12px !important;
    }

    /* ---- 19.2 可点区域过小 ----
       目标：主要交互元素 ≥ 34~36px。 */
    /* 列表页筛选条里的「不限」等胶囊按钮，原为 48×20px */
    #screenShop .action,
    #screenShop .item_Selection dl dt > a {
        display: inline-block !important;
        min-height: 34px;
        line-height: 34px !important;
        box-sizing: border-box;
    }

    #screenShop .item_Selection dl dt > a {
        min-width: 48px;
        text-align: center;
    }

    /* 访谈页「查看详情」、FAQ 里的跳转链接，原为 30~31px 高 */
    a.viewDetails,
    a.faq-link {
        display: inline-block !important;
        min-height: 36px;
        line-height: 36px !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    /* layui 分页，原为 39×30 / 68×30 */
    .layui-laypage a,
    .layui-laypage span,
    .layui-laypage button,
    .layui-laypage input {
        min-width: 34px;
        min-height: 34px;
        line-height: 34px !important;
        box-sizing: border-box;
        text-align: center;
    }

    /* 会员中心搜索按钮，原为 30×44 */
    #container button.layui-btn.search {
        min-width: 46px;
    }

    /* ---- 19.3 主体与资质公示：资质表原为两列网格，手机上每列 107px ---- */
    .entity-grid {
        grid-template-columns: 1fr !important;
    }

    .entity-grid .entity-item {
        width: 100% !important;
    }

    .entity-grid .entity-item:nth-child(odd) {
        border-right: 0 !important;
    }

    /* ---- 19.4 客户评价：缩略图占位块超出容器 16px ---- */
    .review-thumb,
    .review-thumb .thumb-placeholder {
        box-sizing: border-box !important;
        max-width: 100% !important;
    }

    /* ---- 19.5 银行汇款：桌面端一行 3 张卡，手机上每张只有 122px，
            银行名（60~120px）被压进 47px 的列里折成好几行 ---- */
    #banks .bank_Box > li {
        float: none !important;
        width: 100% !important;
        padding-right: 0 !important;
    }

    #banks .bank_Box > li .wrapper {
        max-height: none !important;
        min-height: 0 !important;
    }

    #banks .bank_Box > li .wrapper .bankIco {
        width: 52px !important;
    }

    #banks .bank_Box > li .wrapper ul {
        width: calc(100% - 52px) !important;
    }

    #banks .bank_Box > li .wrapper ul li {
        line-height: 1.75 !important;
        white-space: normal !important;
    }

    /* ---- 19.6 季度服务：月度明细表比容器宽 17px
           （表头 padding 12px 24px，5 列光内边距就 240px） ---- */
    .detail-table th,
    .detail-table td {
        padding: 10px 6px !important;
        font-size: 12px !important;
        white-space: nowrap;
    }
}

/* ==========================================================================
   20. 订单支付 / 支付成功（shopPay.css）
   ========================================================================== */
@media (max-width: 1024px) {
    /* 步骤条：li 没有宽度，靠 float 自适应。手机上容器只有 182px，
       3 个 li 各被压到 61px，「22.确认订单并付款」要换 3 行。 */
    #shopPayContext .progressbar {
        width: 100% !important;
        margin: 15px 0 !important;
    }

    #shopPayContext .progressbar li {
        width: 33.33% !important;
        font-size: 12.5px !important;
        box-sizing: border-box;
    }

    #shopPayContext .progressbar li::before {
        width: 34px !important;
        height: 34px !important;
        margin-bottom: 10px !important;
    }

    #shopPayContext .progressbar li::after {
        width: calc(100% - 34px) !important;
        top: 16px !important;
    }

    #shopPayContext .progressbar li .after {
        top: 8px !important;
        font-size: 14px !important;
    }

    /* 账户信息：两个 span 是一行排的，窄屏会绕到浮动按钮下面导致文字重叠 */
    .accountBalance span {
        display: block !important;
        margin-right: 0 !important;
        margin-bottom: 4px;
    }

    .accountBalance input.recharge {
        float: none !important;
        margin-top: 6px;
    }
}

/* ==========================================================================
   21. 会员中心 · 充值页顶部标签（#selectRecharge）
   ========================================================================== */
@media (max-width: 1024px) {
    /* 原本是「若干 inline 链接 + 最后一个是 float:right 的按钮」，
       窄屏上换行后会互相压住（实测重叠 72%~100%）。改成 flex 自动换行。 */
    #selectRecharge {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px 14px;
        margin-bottom: 20px !important;
    }

    #selectRecharge a,
    #selectRecharge a:not(:last-of-type),
    #selectRecharge a:last-of-type {
        float: none !important;
        margin: 0 !important;
        white-space: nowrap;
    }

    #selectRecharge a:last-of-type {
        margin-left: auto !important;
        padding: 0 14px !important;
        height: 32px !important;
        line-height: 32px !important;
    }

    #selectRecharge a span {
        font-size: 12px !important;
    }
}

/* ==========================================================================
   22. 平台优势（/advantages.html）
   advantages.css 是纯桌面布局，没有任何媒体查询：
   4 个区块固定 860px 高、内容区 padding 160px、左侧 15% 竖排标题栏。
   手机上内容区只剩 12px 宽，整个页面 11700px 高。
   ========================================================================== */
@media (max-width: 1024px) {
    /* 注意：首页轮播的 id 也是 banner（#bannerBox > #banner）。
       这里必须用本页单独加的 .adv-banner，否则会影响首页轮播的排版。 */
    .adv-banner {
        height: auto !important;
        padding-top: 150px;
        background-position: center top !important;
    }

    /* 底部 4 个 tab 原为一行 25%，改成两行两列 */
    .adv-banner .tabbar {
        position: static !important;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 2px;
    }

    .adv-banner .tabbar li {
        float: none !important;
        width: 100% !important;
        height: auto !important;
        transform: none !important;
    }

    .adv-banner .tabbar li a {
        display: block;
        height: auto !important;
        line-height: 1.5 !important;
        font-size: 15px !important;
        padding: 14px 6px !important;
        opacity: 1;
    }

    .adv-banner .tabbar li a .indicate {
        display: none !important;
    }

    .adv-banner .tabbar li:hover {
        padding: 0 !important;
        margin-top: 0 !important;
    }

    /* 四个内容区块：固定 860px 高 → 自适应 */
    #fundsGuarantee,
    #brandProtection,
    #accompanyDeal,
    #legalAid {
        height: auto !important;
        overflow: visible !important;
    }

    /* 左侧竖排标题栏 → 顶部横排标题条 */
    #fundsGuarantee .leftContent,
    #brandProtection .leftContent,
    #accompanyDeal .leftContent,
    #legalAid .leftContent {
        float: none !important;
        width: 100% !important;
        height: auto !important;
        padding: 16px !important;
    }

    .leftContent .verticalText {
        writing-mode: horizontal-tb !important;
        margin-top: 0 !important;
        display: flex;
        align-items: baseline;
        gap: 10px;
    }

    .leftContent .verticalText p {
        font-size: 15px !important;
        margin: 0 !important;
        opacity: 1 !important;
    }

    .leftContent .verticalText p:first-of-type {
        font-size: 20px !important;
        margin-left: 0 !important;
        color: #d18f36;
    }

    /* 内容区：padding 160px → 16px；85% → 100% */
    #fundsGuarantee .contentBox,
    #brandProtection .contentBox,
    #accompanyDeal .contentBox,
    #legalAid .contentBox {
        float: none !important;
        width: 100% !important;
        height: auto !important;
        padding: 20px 16px !important;
    }

    #fundsGuarantee .contentBox .th span,
    #brandProtection .contentBox .th span,
    #accompanyDeal .contentBox .th span,
    #legalAid .contentBox .th span {
        font-size: 1.5em !important;
    }

    #fundsGuarantee .contentBox .text,
    #brandProtection .contentBox .text,
    #accompanyDeal .contentBox .text,
    #legalAid .contentBox .text {
        font-size: 14px !important;
        margin-top: 10px !important;
        margin-bottom: 24px !important;
        opacity: 0.7 !important;
    }

    /* 卡片列表：一行 3 个 → 单列 */
    #fundsGuarantee .contentBox ul li,
    #accompanyDeal .contentBox ul li,
    #legalAid .contentBox ul li {
        float: none !important;
        width: 100% !important;
        margin: 0 0 10px !important;
        padding: 18px 16px !important;
        /* #legalAid 的 li 是 content-box，width:100% + padding 会撑出 16px */
        box-sizing: border-box !important;
    }

    #fundsGuarantee .contentBox ul li .number,
    #accompanyDeal .contentBox ul li .number,
    #legalAid .contentBox ul li .number {
        font-size: 2.4em !important;
    }

    #fundsGuarantee .contentBox ul li .th,
    #accompanyDeal .contentBox ul li .th,
    #legalAid .contentBox ul li .th {
        font-size: 17px !important;
        margin-top: 0 !important;
        margin-bottom: 10px !important;
    }

    #fundsGuarantee .contentBox ul li .paragraph,
    #accompanyDeal .contentBox ul li .paragraph,
    #legalAid .contentBox ul li .paragraph {
        font-size: 13px !important;
        line-height: 1.8 !important;
    }

    /* 品牌保障：左图右文 → 上下 */
    #brandProtection .contentBox .picElm,
    #brandProtection .contentBox .textBox {
        float: none !important;
        width: 100% !important;
    }

    #brandProtection .contentBox .textBox {
        margin-top: 12px !important;
        padding: 18px 16px !important;
        box-sizing: border-box !important;
    }

    #brandProtection .contentBox .textBox p {
        line-height: 1.9 !important;
        font-size: 14px !important;
    }
}

/* ==========================================================================
   23. 会员中心首页（/PersonalCenter/Index，personalCenter/index.css）
   桌面端是两组两栏：
     .userBox.container(50%) + .statistics(50%)
     #myCollect .leftBox(75%) + .rightBox(25%)
   手机上要改成上下堆叠，统计卡改 2×2。
   ========================================================================== */
@media (max-width: 1024px) {
    .welcome {
        font-size: 17px !important;
    }

    /* ---- 账户信息 + 统计 ---- */
    #meinAccount .userBox.container {
        float: none !important;
        width: 100% !important;
        padding-right: 0 !important;
    }

    #meinAccount .userBox.container .statBox_top {
        padding: 18px 16px !important;
    }

    #meinAccount .userBox.container .tDiv {
        padding-bottom: 20px !important;
    }

    #meinAccount .userBox.container .tDiv > ul {
        padding-left: 14px !important;
        width: calc(100% - 85px) !important;
    }

    #meinAccount .userBox.container .bDiv {
        padding-top: 20px !important;
    }

    #meinAccount .userBox.container .bDiv .accountPrice .btn .layui-btn {
        padding: 0 18px !important;
        margin-left: 8px !important;
    }

    #meinAccount .userBox.container .bDiv .accountPrice .btn .layui-btn:last-child {
        margin-left: 8px !important;
    }

    /* 余额 / 提现中：原本 33.33% 一行三列 */
    #meinAccount .userBox.container .bDiv .freezePrcie {
        padding-top: 18px !important;
    }

    #meinAccount .userBox.container .bDiv .freezePrcie > ul {
        float: none !important;
        width: 100% !important;
        margin-left: 0 !important;
        margin-bottom: 10px;
    }

    #meinAccount .userBox.container .bDiv .freezePrcie > ul li:first-child {
        font-size: 26px !important;
    }

    /* ---- 四个统计卡：50%+50% 两栏 → 2×2 网格 ---- */
    .statistics {
        float: none !important;
        width: 100% !important;
        margin-top: 12px;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .statistics .statBox {
        float: none !important;
        width: 100% !important;
        padding-right: 0 !important;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .statistics .statBox > a,
    .statistics .statBox > a:first-of-type {
        margin-bottom: 0 !important;
        padding: 16px !important;
        height: auto !important;
        min-height: 112px;
    }

    .statistics .statBox > a .sum {
        font-size: 28px !important;
    }

    .statistics .statBox > a > img {
        right: 14px !important;
        bottom: 14px !important;
        width: 40px;
        height: auto;
    }

    /* ---- 我的收藏 + 公司公告：75% / 25% → 上下 ---- */
    #myCollect .leftBox,
    #myCollect .rightBox {
        float: none !important;
        width: 100% !important;
        padding-right: 0 !important;
        box-sizing: border-box;
    }

    #myCollect .rightBox {
        margin-top: 10px;
        padding: 16px !important;
    }

    #myCollect .leftBox .collectList {
        padding: 16px !important;
    }

    #myCollect .leftBox .collectList .th p span {
        margin: 0 0 0 10px !important;
    }

    #myCollect .leftBox .collectList .layui-table {
        min-width: 620px;
    }

    #myCollect .rightBox > .th {
        font-size: 17px !important;
    }

    #myCollect .rightBox ul li > a {
        line-height: 2.4 !important;
        font-size: 14px;
    }
}

/* ==========================================================================
   24. 全站 URL 清点补漏（以 /sitemap.xml + Web.config 伪静态规则表为准）
   来源：_mobile_audit/url-sitemap-check.mjs 把 sitemap 里 3629 条 URL 全跑一遍，
        再用 _mobile_audit/url-pages.mjs + audit.mjs 逐页实测 53 个新模板。
        下面只列实测确实出问题的页面。
   ========================================================================== */
@media (max-width: 1024px) {
    /* ---- 24.1 尽调说明页（/security/due-diligence.html → StaticPage/Diligence）
       这一页是后加的，不在原来 79 页清单里。它自带的一段内联样式用了
       10~11.5px 的字号：48 个「查什么 / 怎么查 / 输出证据 / 风险处置」小标题、
       51 个风险标签、5 条提示行，手机上明显偏小。
       .dd-cell-label / .dd-arrow / .df-hint 都是本页专有类名；
       .risk-tag 在 Verification、ContractSigning 两页也在用，同一套设计语言，
       一起提到 12px 是一致的。 */
    .dd-cell-label,
    .risk-tag,
    .df-hint {
        font-size: 12px !important;
    }

    .dd-arrow {
        font-size: 12px !important;
    }

    /* ---- 24.2 概览四宫格（.spec-grid，验店标准页 + 尽调页共用）
       桌面端 4 列；420px 以下的容器只剩 290~330px，每列被压到 54~75px，
       标题和数值全折成竖排。改成 2×2。 */
    .spec-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    /* ---- 24.3 尽调折叠块里的两列小网格（.dd-grid）
       「查什么 / 怎么查 / 输出证据 / 风险处置」两列小卡片，
       每张只剩 123~150px、正文被压成很窄的一条，手机上改单列。 */
    .dd-grid {
        grid-template-columns: 1fr !important;
    }

    /* 文末「对买方的保护 / 对卖方的保护」两栏（.dl-grid），同样是窄条，改单列。 */
    .dl-grid {
        grid-template-columns: 1fr !important;
    }

    /* ---- 24.4 资讯详情右栏「热门标签」的可点区域（/information/{id}.html）
       标签胶囊桌面端 26px 高，手机上点选容易误触，放大到 32px。 */
    .news-container .con .r-f4 ul li {
        min-height: 32px !important;
        line-height: 32px !important;
        box-sizing: border-box;
    }

    /* ---- 24.5 店铺详情页「（查看店铺名字）」标签换行错位
       （/tmallnew/{id}.html、/tmall/{id}.html 的新店，以及淘宝新店）
       结构：<h3><img><span class="mall-title">店铺名</span><span class="login">（查看店铺名字）</span></h3>
       桌面端一行放得下；手机上剩余宽度不够，标签会被拆成
       「（查看店铺」+「名字）」两行，第二行还缩到最左边。
       改成不可拆分的整块，放不下就整体换到下一行。 */
    h3 > span.login {
        display: inline-block !important;
        white-space: nowrap !important;
    }
}

/* ==========================================================================
   25. 个人中心等处的数据表格 → 手机端卡片式
   这些表格桌面端用 <colgroup> 写死列宽（例如 320+320+400+350 = 1390px），
   手机上只有两种结果：要么横向拖，要么把表头压成 5~9 行的竖排文字
   （实测「店铺类型/等级」被压到 50px 宽，折成 7 行）。
   这里在窄屏把每一行改成一张卡片：隐藏表头，每个单元格用 data-label
   把字段名显示在值前面，一屏读完，不需要左右拖。

   用法：给 <table> 加 class="ptw-card-table"，并给每个 <td> 加 data-label。
   跨列的信息行（订单号/日期/客服）不用写 data-label，会自动整行显示。
   ========================================================================== */
@media (max-width: 768px) {
    .ptw-card-table {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        overflow: visible !important;
        border: 0 !important;
        background-color: transparent !important;
    }

    .ptw-card-table colgroup,
    .ptw-card-table col,
    .ptw-card-table thead {
        display: none !important;
    }

    .ptw-card-table tbody,
    .ptw-card-table tr,
    .ptw-card-table td {
        display: block !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }

    /* 普通列表：一行一张卡 */
    .ptw-card-table tbody:not(:has(> tr > td[colspan])) > tr {
        background-color: #fff;
        border: 1px solid #eceeed;
        border-radius: 10px;
        padding: 10px 14px;
        margin-bottom: 12px;
    }

    .ptw-card-table tbody:not(:has(> tr > td[colspan])) > tr:last-child {
        margin-bottom: 0;
    }

    /* 订单类表格：第一行是跨列的「订单号 / 日期 / 客服」，整个 tbody 合成一张卡 */
    .ptw-card-table tbody:has(> tr > td[colspan]) {
        background-color: #fff;
        border: 1px solid #eceeed;
        border-radius: 10px;
        padding: 10px 10px;
        margin-bottom: 12px;
    }

    .ptw-card-table tbody:has(> tr > td[colspan]) > tr {
        padding: 0;
        margin: 0;
        border: 0;
        border-radius: 0;
        background-color: transparent;
    }

    .ptw-card-table td {
        padding: 7px 0 !important;
        border: 0 !important;
        line-height: 1.6 !important;
        text-align: left !important;
        display: flex !important;
        align-items: flex-start;
        gap: 10px;
        /* 值区里如果有按钮这种不会收缩的元素（「查看详情」「下架」），
           放不下时换到下一行，而不是顶出卡片 */
        flex-wrap: wrap;
        /* 遮罩后的卡号（*****4776）这类没有换行机会的长串，
           默认 min-content 撑得很宽会顶出卡片；anywhere 允许在任意字符处断行 */
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .ptw-card-table td + td {
        border-top: 1px dashed #f0f2f1 !important;
    }

    /* 字段名 */
    .ptw-card-table td[data-label]::before {
        content: attr(data-label);
        flex: 0 0 84px;
        color: #9aa0a6;
        font-size: 13px;
        line-height: 1.6;
    }

    /* 跨列的信息行不做「字段名 + 值」 */
    .ptw-card-table td[colspan] {
        display: block !important;
        padding: 0 0 10px !important;
    }

    .ptw-card-table td[colspan]::before {
        content: none !important;
    }

    .ptw-card-table td[colspan] > span {
        display: inline-block;
        margin: 2px 12px 2px 0;
    }

    /* 值区自适应：桌面端写死的省略号宽度（300px / 280px）放开 */
    .ptw-card-table .layui-elip,
    .ptw-card-table td > p {
        width: auto !important;
        max-width: 100% !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
    }

    /* 卡片里的按钮左对齐、不再被撑成整行宽 */
    .ptw-card-table td .layui-btn,
    #container .ptw-card-table td .layui-btn {
        width: auto !important;
        min-width: 92px;
        margin: 4px 8px 4px 0 !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .ptw-card-table td > p {
        margin: 0;
    }

    /* 列表页底部「共计 N 条记录 + 翻页器」
       桌面端 .totle 是 position:absolute 贴左边，翻页器居中，两者能错开；
       窄屏翻页器占满整行，绝对定位的统计文字会被挤到中间，和页码完全叠在
       一起（实测横向重叠 94px、纵向 34px）。
       改成正常流：统计一行在上，翻页器一行在下。 */
    .layui-form-item.sellShopList + .layui-footer,
    .ptw-card-table ~ .layui-footer {
        padding: 12px 14px 14px !important;
        text-align: left;
    }

    .layui-form-item.sellShopList + .layui-footer .totle,
    .ptw-card-table ~ .layui-footer .totle,
    #alreadySell .layui-footer .totle,
    #alreadyBuy .layui-footer .totle {
        position: static !important;
        display: block !important;
        line-height: 1.6 !important;
        text-align: center;
        margin: 0 0 8px 0 !important;
    }
}

/* ---- 25.1 微信充值页的收款卡片（/PersonalCenter/WeChatPay） ----
   .pay-box 是 float:left 的自然宽度（实测只有 170px），手机上缩在左边一小块，
   右边空一大片。改成整行，二维码居中。 */
@media (max-width: 1024px) {
    /* 银行卡 / 密码 / 支付密码这些表单页桌面端是 padding:50px 的白色圆角卡，
       手机上左右各 50px 等于白白吃掉 100px 宽度（实测表格只剩 202px）。
       统一收窄到 16px。 */
    #container #main_Box.setBank,
    #container #main_Box.setPassword,
    #container #main_Box.setPayPassword,
    #container #main_Box.findPayPassword,
    #container #main_Box.n {
        padding: 18px 14px !important;
    }

    /* 会员中心所有 #main_Box 白色表单卡（我要求购 / 我要出售 / 充值 / 提现 …）
       桌面端内边距都是 50px，手机上左右各吃掉 50px —— 390px 的屏幕里表单
       只剩 262px。统一收窄到 14px。 */
    #container #main_Box,
    #main_Box.setBank,
    #main_Box.setPassword,
    #main_Box.setPayPassword,
    #main_Box.findPayPassword {
        padding: 18px 14px !important;
    }

    /* 「我要求购」/「我要出售」页底部（以及表单里）的提示文字
       桌面端 padding-left:135px 是为了跟表单标签、提交按钮对齐；
       窄屏表单已经是整行布局，这 135px 把提示挤到右边只剩 100 多像素，
       折成一条窄柱（实测 390px 下文字区只有 167px）。
       去掉左内边距，让它在整行里正常换行。 */
    #buyform .tips,
    #sellform .tips {
        padding-left: 0 !important;
        line-height: 1.8 !important;
        text-align: left;
    }

    /* 状态这类下拉框：layui 写死 max-height:300px、每项 36px，
       13 个状态要 504px —— 手机上只能看到 8 个，剩下 6 个得盲滑。
       这里把行高收到 34px、露出滚动条，并在 responsive.js 里按屏幕
       剩余空间重算 max-height；屏幕不够时才退回内部滚动。 */
    .layui-form-select dl {
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    .layui-form-select dl dd,
    .layui-form-select dl dt {
        line-height: 34px;
    }

    .layui-form-select dl::-webkit-scrollbar {
        width: 6px;
    }

    .layui-form-select dl::-webkit-scrollbar-thumb {
        background-color: #c8c8c8;
        border-radius: 3px;
    }

    /* 咨询建议三页（我要提问 / 我要投诉 / 改进建议）的 #main_Box 桌面端是
       padding:50px 80px，手机上左右各 80px —— 390px 的屏幕里正文只剩 202px，
       表单、表格全被压成窄条。收窄到 14px 后正文 334px。
       （这三页没有 #container 外层，所以选择器不能带 #container 前缀） */
    #main_Box.questioning,
    #main_Box.complaint,
    #main_Box.suggestion,
    #container #main_Box.questioning,
    #container #main_Box.complaint,
    #container #main_Box.suggestion {
        padding: 18px 14px !important;
    }

    /* 表单行桌面端写死 610px（consultation.css），窄屏会被 #main_Box 的宽度
       挤出去；打开成整行。这条必须比 consultation.css 的选择器更具体，
       否则同权重下后加载的 consultation.css 会赢。 */
    #main_Box.questioning .textBox .layui-form-item,
    #main_Box.suggestion .textBox .layui-form-item,
    #main_Box.complaint .textBox .layui-form-item,
    #container #main_Box.questioning .textBox .layui-form-item,
    #container #main_Box.suggestion .textBox .layui-form-item,
    #container #main_Box.complaint .textBox .layui-form-item {
        width: 100% !important;
        max-width: 100% !important;
        float: none !important;
        box-sizing: border-box;
    }

    #container #main_Box .sellShopList {
        padding: 14px 12px !important;
    }

    /* 会员中心列表页的表格外框（.sellShopList / .buyShopList）
       桌面端左右内边距是 30px，手机上 362px 的容器里表格只剩 302px，
       比同页其它内容明显窄一圈。统一收窄到 12px。
       （收提现/收支明细/我的收藏/求购信息/已买店铺等 9 个页面） */
    #alreadySell .sellShopList,
    #alreadyBuy .buyShopList,
    #buyInfo .sellShopList,
    #alreadyBuy .sellShopList,
    #alreadySell .buyShopList,
    .sellShopList,
    .buyShopList {
        padding: 12px 12px 16px !important;
    }

    /* 订单支付页（/ptw/order.html）的 .contentBox 桌面端 padding 是 25px 60px，
       手机上左右各 60px 等于吃掉 120px 宽度（实测卡片只剩 242px）。
       注意这一页没有 #container 外层，所以不能带 #container 前缀。 */
    #shopPay .contentBox,
    #container #shopPay .contentBox {
        padding: 18px 14px !important;
    }

    /* 会员中心搜索条（.searchShop）里的字段标签
       桌面端是 float:left 的 38px 小标签，跟输入框并排。
       窄屏没把它清浮动的话，后面的 .layui-input-inline（已被改成 display:block）
       会被这个浮动标签往下顶 38px —— 外层高度变成 76px，输入框只占最下面 38px。
       而 layui 的下拉三角是按外层「垂直居中」定位的（top:50%），
       结果三角落在输入框上方，看起来就是「三角形错位」。
       这里让标签独占一行，三角自然回到输入框中间。 */
    .searchShop .labelName,
    .layui-form-item.searchShop .labelName {
        float: none !important;
        display: block !important;
        height: auto !important;
        line-height: 1.6 !important;
        margin: 0 0 6px 0 !important;
    }

    /* 订单支付页下半部分（备注 / 支付密码 / 确认支付）桌面端都是 float:right +
       固定宽度，手机上会被负向顶出左边界（实测 390px 下 left=-50px、
       320px 下 left=-120px，文字直接被切掉），改成整行。 */
    #payment .remarkOrPayment .layui-form-item,
    #payment .remarkOrPayment .layui-form-item .layui-input-inline,
    #payment .remarkOrPayment .layui-form-item .captcha,
    #payment .remarkOrPayment .layui-form-item .layui-input,
    #payment .confirmBtn {
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        /* 支付页的布局里没有 #container 外层，所以上面那条通配的
           left:0 管不到这里，要单独写一遍。
           实测 390px 下「备注 / 支付密码」的输入框被 layui 自带的
           left:-3px 推到比标签左边还多出 3px。 */
        left: 0 !important;
        box-sizing: border-box;
    }

    /* 支付页（/PersonalCenter/Pay）的「支付类型」下拉框桌面端是 float:right 的 150px
       小框，手机上标签已经独占一行，下拉框也改成整行更清楚 */
    #container .layui-form-item .layui-select-inline {
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        box-sizing: border-box;
    }

    /* 验证码那一行（改密码 / 改支付密码 / 银行卡）：
       桌面端是「验证码输入框 50~55% + 免费获取验证码按钮 20%」并排。
       手机上输入框已经被撑成整行，按钮还留在 20%，实测只剩 67px，
       而「免费获取验证码」要 134px，文字被裁掉一半。
       改成输入框一行、按钮一行（按钮宽度按文字自适应，不再撑满）。 */
    #container #main_Box.setPassword .layui-form-item .layui-input-inline.captcha,
    #container #main_Box.setPayPassword .layui-form-item .layui-input-inline.captcha,
    #container #main_Box.findPayPassword .layui-form-item .layui-input-inline.captcha,
    #editBank .layui-form-item input[name="captcha"] {
        float: none !important;
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 10px 0 !important;
        box-sizing: border-box;
    }

    #container #main_Box.setPassword .layui-form-item .sendCaptcha,
    #container #main_Box.setPayPassword .layui-form-item .sendCaptcha,
    #container #main_Box.findPayPassword .layui-form-item .sendCaptcha,
    #editBank .layui-form-item #sendtoken {
        display: inline-block !important;
        float: none !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding-left: 18px !important;
        padding-right: 18px !important;
        box-sizing: border-box;
        white-space: nowrap;
    }

    #main_Box .pay-box {
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }

    #main_Box .pay-box .alipayCard {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        padding: 16px !important;
        box-sizing: border-box;
    }

    #main_Box .pay-box .alipayImg,
    #main_Box .pay-box .shroffAccountNumber,
    #main_Box .pay-box .shroffAccountNumber .user {
        float: none !important;
        width: 100% !important;
        box-sizing: border-box;
    }

    #main_Box .pay-box .qrCode {
        display: block;
        float: none !important;
        margin: 16px auto 0 auto;
        max-width: 100%;
    }
}

/* ==========================================================================
   26. 静态内容页补漏（帮助中心 / 安全保障 / 关于我们 等）
   这些页面是「一整页内联样式」，样式写在视图里的 <style> 中，位置在
   responsive.css 之后，所以这里的同名选择器必须带 !important 才压得住。
   ========================================================================== */
@media (max-width: 768px) {
    /* 26.1 专家团队页（/expert.html）
       .expert-showcase 是「左侧 260px 定宽照片 + flex:1 的文字栏」，
       手机上容器只有 324px，照片加上 36px 间距就把文字栏挤到只剩 28px，
       再被 .content-card 的 overflow:hidden 裁掉——姓名、简介、从业数据
       几乎完全看不见。窄屏改成上下排列。 */
    .expert-showcase {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 18px !important;
        min-height: 0 !important;
    }

    .expert-photo-lg {
        width: 100% !important;
        max-width: 260px !important;
        height: 320px !important;
        margin: 0 auto !important;
    }

    .expert-info {
        width: 100% !important;
        min-width: 0 !important;
    }

    .expert-stats {
        flex-wrap: wrap;
        gap: 16px 24px !important;
    }

    /* 26.2 静态内容页里的数据表：由 responsive.js 的 initCardTables()
       在窄屏自动给 <td> 补上 data-label 并加上 .ptw-card-table，
       这里只需要保证这些页面里的表格允许被拆成卡片。 */
    .content-card .ptw-card-table,
    .card-body .ptw-card-table {
        display: block !important;
        width: 100% !important;
    }

    /* 26.3 主体与资质公示页（/company.html）
       .lic-grid 是「两张资质卡片并排」的 flex，卡片各带 20px 内边距，
       min-content 撑不下，第二张被 .content-card 的 overflow:hidden 裁掉。
       窄屏改成上下排列。 */
    .lic-grid {
        flex-wrap: wrap !important;
    }

    .lic-card {
        flex: 1 1 100% !important;
        min-width: 0 !important;
    }

    /* 26.4 工单查询页（/query.html）
       .search-row 是 flex，输入框写了 flex:1 但没放开 min-width，
       被 placeholder 的宽度顶住，右侧「查 询」按钮被挤出容器 25px。 */
    .search-row {
        flex-wrap: wrap;
    }

    .search-input {
        min-width: 0 !important;
    }

    /* 26.5 订单支付页的「支付方式」选项（/ptw/order/{订单号}.html）
       桌面端 .payWay li 宽 15%，手机上只剩 54px：
       「全额付款」被折成 3 行再被 <a> 的 overflow:hidden 裁掉，
       对勾图标又是固定 left:27px，正好压在文字上。
       改成按内容自适应宽度、放不下一行就换行，对勾移到按钮右侧。 */
    #shopPay .layui-form-item .payWay,
    .layui-form-item .payWay {
        display: flex !important;
        flex-wrap: wrap;
        align-items: center;
        gap: 12px;
        width: 100% !important;
    }

    #shopPay .layui-form-item .payWay li,
    .layui-form-item .payWay li {
        display: block !important;
        width: auto !important;
        min-width: 0 !important;
        flex: 0 1 auto !important;
        margin-right: 0 !important;
    }

    #shopPay .layui-form-item .payWay li a,
    .layui-form-item .payWay li a {
        display: block !important;
        width: auto !important;
        min-width: 132px;
        padding: 0 34px 0 14px !important;
        overflow: visible !important;
        white-space: nowrap;
        box-sizing: border-box;
    }

    #shopPay .layui-form-item .payWay li a > span,
    .layui-form-item .payWay li a > span {
        white-space: nowrap;
    }

    #shopPay .layui-form-item .payWay li a .dui,
    .layui-form-item .payWay li a .dui {
        left: auto !important;
        right: 9px !important;
        top: 50% !important;
        transform: translateY(-50%);
    }
}

/* ==========================================================================
   27. 店铺详情页「详细信息」改成每行两块
   适用：/taobao/{id}.html、/tmall/{id}.html、/tmallnew/{id}.html、/other/{id}.html
        （三个视图都是 #shop_describe .topBox .particulars 结构）

   桌面端 .row ul 是 float:left + width:20%，一行 5 块（值 + 说明标签）。
   之前窄屏被改成 ul 各自占满一行，5 块就占 5 行，竖着拉得很长。
   这里改成两列网格，一行两块；平板（769~1024px）本来就已是两列，保持一致。
   ========================================================================== */
@media (max-width: 768px) {
    #shop_describe .topBox .particulars .row {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px 10px !important;
        margin-bottom: 12px !important;
    }

    #shop_describe .topBox .particulars .row ul {
        float: none !important;
        width: 100% !important;
        margin-bottom: 0 !important;
    }

    #shop_describe .topBox .particulars .row ul li {
        width: 100% !important;
        text-align: left !important;
        box-sizing: border-box;
    }

    /* 原来的竖分隔线是按「一行 5 块」画在 ul 右侧的，两列布局下会跑到
      中间那条线上，去掉更干净 */
    #shop_describe .topBox .particulars .row ul:not(:last-of-type)::after {
        display: none !important;
    }
}

/* ==========================================================================
   28. 订单状态的浮动进度条（/PersonalCenter/AlreadyBuyShop）
   点击/悬停「状态」那一格会弹出一条 7 步进度条（.float-progress）。

   桌面端写法：position:absolute + left:30% + transform:translateX(-50%)
              + white-space:nowrap，7 个 60px 节点 + 6 条 14px 连接线
              = 内容 504px，加内边距共 544px，桌面端够宽放得下。
   手机上屏幕才 390px，这条 544px 的面板从中间往两边溢出，
   左右两头都被裁掉，所以「显示不全」。

   窄屏改成：贴在视口左右 12px 的浮层（不再跟着表格单元格定位），
   节点改成等分宽度、标签允许折两行，任何宽度都能完整看到 7 步。
   ========================================================================== */
@media (max-width: 768px) {
    .float-progress {
        position: fixed !important;
        left: 12px !important;
        right: 12px !important;
        top: 50% !important;
        bottom: auto !important;
        width: auto !important;
        max-width: none !important;
        transform: translateY(-50%) !important;
        padding: 12px !important;
        box-sizing: border-box;
        white-space: normal !important;
        overflow: visible !important;
    }

    /* 小三角是按「钉在单元格上方」画的，改成居中浮层后指向没意义 */
    .float-progress::after {
        display: none !important;
    }

    .float-progress .fp-row {
        display: flex;
        align-items: stretch;
    }

    .float-progress .fp-node {
        flex: 1 1 0;
        min-width: 0;
        width: auto !important;
        height: auto !important;
        min-height: 30px;
        padding: 4px 2px;
        font-size: 10px;
        line-height: 1.25;
        text-align: center;
        box-sizing: border-box;
        white-space: normal;
        border-radius: 8px;
        word-break: break-all;
    }

    .float-progress .fp-line {
        flex: 0 0 5px;
        width: 5px !important;
    }
}

/* ==========================================================================
   29. 问答详情页（/help/{id}.html → Information/QuesDetail）
   第 13 节只处理了「问答列表」（.left-box-body），这一页是另一套结构：

     问题气泡 .left-box-one .word2-box  → 写死 width:454px + padding14（实占 482px）
     回答气泡 .left-box-two .word2-box  → 写死 width:640px + padding14（实占 668px）
     两个气泡都是 float，外层 .left-box 只有 362px，手机上右边整块被裁掉。

   窄屏改成：气泡宽度自适应，跟在 40px 的「问/答」圆形标记旁边。
   ========================================================================== */
@media (max-width: 1024px) {
    .body-nav .body-nav-box .left-box .left-box-one,
    .body-nav .body-nav-box .left-box .left-box-two {
        margin-left: 14px !important;
        margin-right: 14px !important;
    }

    .body-nav .body-nav-box .left-box .left-box-one .word2-box,
    .body-nav .body-nav-box .left-box .left-box-two .word2-box {
        float: none !important;
        width: auto !important;
        max-width: none !important;
        box-sizing: border-box;
        padding: 12px !important;
    }

    /* 问题：圆形标记在左，气泡跟在它右边 */
    .body-nav .body-nav-box .left-box .left-box-one .word2-box {
        margin-left: 52px !important;
        margin-right: 0 !important;
    }

    /* 回答：圆形标记在右，气泡贴在它左边 */
    .body-nav .body-nav-box .left-box .left-box-two .word2-box {
        margin-left: 0 !important;
        margin-right: 52px !important;
    }

    /* 气泡上的小尖角是按桌面端坐标定位的，窄屏会跑出气泡外面 */
    .body-nav .body-nav-box .left-box .left-box-one .word2-box .tms,
    .body-nav .body-nav-box .left-box .left-box-two .word2-box .tms {
        display: none !important;
    }

    .body-nav .body-nav-box .left-box .left-box-one .word2-box .word2 {
        font-size: 18px !important;
        line-height: 1.5 !important;
    }

    /* 底部「您的问题还没解决？」，桌面端留了 80px 上边距 */
    .body-nav .body-nav-box .left-box .left-box-three {
        margin-top: 24px !important;
        padding: 20px 14px !important;
    }

    /* 右上角的按钮组是绝对定位在 left-box 上的 */
    .body-nav .body-nav-box .left-box .lay-btn-box {
        position: static !important;
        margin: 12px 14px 0 14px !important;
    }

    .body-nav .body-nav-box .left-box .lay-btn-box .left-lay-btn1,
    .body-nav .body-nav-box .left-box .lay-btn-box .left-lay-btn2 {
        float: none !important;
        width: 100% !important;
        margin-right: 0 !important;
        margin-bottom: 8px;
    }
}

/* ==========================================================================
   30. 首页「流程解说」——一行两步，序号收回单元格内

   现状（第 5.4 节的网格）：图标一列 54px + 文字一列，一行一步，共 6/5 行。
   两个问题：
     1) 金色大号序号是 index.css 里的 .itemPro::after
        （absolute; top:-30px; right:20px; width:60px; font-size:36px），
        是给「6 个图标横排」的桌面布局写的。手机上 .itemPro 只有 54px 宽，
        序号右边缘 = 图标右边 -20px，左边缘就跑到 x = -12px，
        直接顶出屏幕左边（实测 390px 下被切掉 12px），还压到上一行的文字。
     2) 每行文字只有 80~230px，右边半屏空着，整块内容看着全挤在左边。

   这里改成：一行两步（4 列 = 图标/文字 × 2），序号缩成小字放到图标上方。
   ========================================================================== */
@media (max-width: 1024px) {
    #processNarrate .contentBox:not(.ptw-hidden),
    #processNarrate .contentBox.buy:not(.ptw-hidden),
    #processNarrate .contentBox.sell:not(.ptw-hidden) {
        display: grid !important;
        grid-template-columns: 46px minmax(0, 1fr) 46px minmax(0, 1fr);
        grid-template-rows: repeat(3, auto) !important;
        grid-auto-flow: row !important;
        column-gap: 10px;
        row-gap: 26px;
        align-items: start;
        padding: 0 var(--ptw-gap);
        box-sizing: border-box;
        counter-reset: sectioncounter;
    }

    /* 前 6 个是图标（第 1 / 3 列），后 6 个是文字（第 2 / 4 列）。
       显式指定格子，避免依赖 DOM 顺序。 */
    #processNarrate .contentBox .processList .itemPro:nth-child(1) { grid-area: 1 / 1; }
    #processNarrate .contentBox .processList .itemPro:nth-child(2) { grid-area: 1 / 3; }
    #processNarrate .contentBox .processList .itemPro:nth-child(3) { grid-area: 2 / 1; }
    #processNarrate .contentBox .processList .itemPro:nth-child(4) { grid-area: 2 / 3; }
    #processNarrate .contentBox .processList .itemPro:nth-child(5) { grid-area: 3 / 1; }
    #processNarrate .contentBox .processList .itemPro:nth-child(6) { grid-area: 3 / 3; }

    #processNarrate .contentBox .textBox .step:nth-child(1) { grid-area: 1 / 2; }
    #processNarrate .contentBox .textBox .step:nth-child(2) { grid-area: 1 / 4; }
    #processNarrate .contentBox .textBox .step:nth-child(3) { grid-area: 2 / 2; }
    #processNarrate .contentBox .textBox .step:nth-child(4) { grid-area: 2 / 4; }
    #processNarrate .contentBox .textBox .step:nth-child(5) { grid-area: 3 / 2; }
    #processNarrate .contentBox .textBox .step:nth-child(6) { grid-area: 3 / 4; }

    #processNarrate .contentBox .processList .itemPro {
        position: relative !important;
        width: 46px !important;
        margin: 0 !important;
    }

    /* 序号：从「图标右上角的大号金色数字」改成「图标左上方的小号序号」，
       不再超出格子。 */
    #processNarrate .contentBox .processList .itemPro::after {
        top: -18px !important;
        right: auto !important;
        left: 0 !important;
        width: auto !important;
        height: auto !important;
        font-size: 13px !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        letter-spacing: 0.06em;
        transform: none !important;
        opacity: 0.9 !important;
    }

    #processNarrate .contentBox .processList .itemPro > img {
        display: block;
        width: 46px !important;
        height: auto;
    }

    #processNarrate .contentBox .textBox .step {
        align-self: center;
    }

    #processNarrate .contentBox .textBox .step .th {
        font-size: 14px !important;
        line-height: 1.35 !important;
        margin-bottom: 2px !important;
    }

    #processNarrate .contentBox .textBox .step .describe {
        font-size: 12px !important;
        line-height: 1.45 !important;
    }

    /* 行业资讯第一条（.news_bj / .news_bj6）
       桌面端是「左侧 196px 图 + 右侧文字」并排，卡片写死 height:202px。
       手机上第 5.6 节把图文改成上下排列后，内容需要约 390px，
       而粉色卡片仍然是 202px —— 文字有 187px 溢出到卡片外面
       （实测 390px：卡片 12265~12467，文字 12445~12654），
       看着就像和下面第一条列表内容叠在一起。
       这里去掉固定高度，让卡片跟着内容长。 */
    .industry_content .information_box .information_new .news_information .news_content .news_bj {
        height: auto !important;
        min-height: 0 !important;
    }

    /* 桌面端给整条链接也写死了同样的高度，一并放开 */
    .industry_content .information_box .information_new .news_information .news_content .news_bj > a {
        height: auto !important;
    }

    /* 首条资讯的粉色底（#FFEBDF）是配「左图右文」的桌面版式的。
       手机上是上下排列，图片本身占满整行，粉色底会只剩文字区一块色块，
       所以窄屏去掉背景。 */
    .industry_content .information_box .information_new .news_information .news_content .news_bj,
    .industry_content .information_box .information_new .news_information .news_content .news_bj:hover {
        background: none !important;
        background-color: transparent !important;
    }
}

/* ==========================================================================
   31. 列表页（/taobao.html、/tmall.html、/tmallnew.html、/other.html）
       搜索行 + 价格筛选行

   31.1 搜索：桌面端输入框和「搜索」按钮是同一行的，
        窄屏因为输入框被撑成整行，按钮被挤到了下一行。
   31.2 价格筛选：桌面端是「价格范围 + 两个 70px 输入框 + 确定」一行；
        窄屏输入框变成 40%、确定按钮被拉到 44px 高，散成了三行。

   注意两个页面的结构不一样：
     Taobao  ：<dd class="search"><div>输入框+按钮</div></dd>
     其它三个：<dd><div class="search">输入框+按钮</div></dd>
   所以父容器要写两个选择器。
   ========================================================================== */
@media (max-width: 1024px) {
    #screenShop .item_Selection dl dd.search > div,
    #screenShop .item_Selection dl dd > div.search {
        display: flex !important;
        align-items: center;
        gap: 8px;
    }

    #screenShop .item_Selection #searchContent {
        flex: 1 1 auto;
        min-width: 0;
        width: auto !important;
        box-sizing: border-box;
    }

    #screenShop .item_Selection #searchBtn {
        flex: 0 0 auto;
        width: auto !important;
        min-width: 74px !important;
        min-height: 0 !important;
        height: 34px !important;
        line-height: 34px !important;
        padding: 0 16px !important;
        box-sizing: border-box;
        font-size: 14px !important;
    }

    /* ---- 31.2 价格筛选 ---- */
    #screenShop .item_Selection .priceSearch .priceRange {
        float: none !important;
        display: flex !important;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px;
        width: 100% !important;
        max-width: 100% !important;
        margin-top: 8px !important;
        box-sizing: border-box;
    }

    #screenShop .item_Selection .priceSearch .priceRange > span {
        flex: 0 0 auto;
        margin: 0 !important;
    }

    #screenShop .item_Selection .priceSearch .priceRange input[type="text"] {
        flex: 0 0 68px !important;
        width: 68px !important;
        max-width: 68px !important;
        min-width: 0 !important;
        padding: 4px 6px !important;
        box-sizing: border-box;
    }

    #screenShop .item_Selection .priceSearch .priceRange input[type="text"]:first-of-type {
        margin-left: 0 !important;
    }

    #screenShop .item_Selection .priceSearch .priceRange .confirmPrice {
        flex: 0 0 auto;
        width: auto !important;
        min-width: 0 !important;
        min-height: 0 !important;
        height: 28px !important;
        line-height: 26px !important;
        padding: 0 12px !important;
        margin-left: 2px !important;
        font-size: 13px !important;
        box-sizing: border-box;
    }
}

/* 320px 这类超窄屏：价格范围那行按上面尺寸会差几个像素换行，
   再把输入框和间距收一点，保证还能排成一行。 */
@media (max-width: 360px) {
    #screenShop .item_Selection .priceSearch .priceRange {
        gap: 4px;
    }

    #screenShop .item_Selection .priceSearch .priceRange input[type="text"] {
        flex: 0 0 60px !important;
        width: 60px !important;
        max-width: 60px !important;
    }

    #screenShop .item_Selection .priceSearch .priceRange .confirmPrice {
        padding: 0 10px !important;
    }
}

/* ==========================================================================
   32. 首页「数据统计」最后一项占满整行
   手机上 #statistics > ul 是两列网格（4 个数字排成 2×2），
   第 5 项「更新于：xxxx-xx-xx」单独占半格看着很空，让它横跨整行。
   （平板 769~1024px 是一行 5 列，不受影响。）
   ========================================================================== */
@media (max-width: 768px) {
    #statistics > ul li:last-child {
        grid-column: 1 / -1;
    }
}

/* ==========================================================================
   33. 店铺详情页导语 + 正文增强块（手机端排版）
   桌面端样式在 shops/detail.css 里重做了（导语改引言块、增强块改 2×2 卡片），
   这里只做窄屏的收敛：卡片改单列、内边距收一点。
   ========================================================================== */
@media (max-width: 768px) {
    .detail-intro {
        margin-top: 10px !important;
        padding: 12px 14px !important;
        font-size: 13.5px !important;
        line-height: 1.85 !important;
    }

    .detail-seo-blocks {
        /* detail.css 在本文件之后加载，同权重会压过这里，所以要 !important */
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        padding: 14px !important;
        margin-top: 14px !important;
        border-radius: 10px !important;
    }

    .detail-seo-block {
        padding: 14px 16px !important;
    }

    .detail-seo-block .title {
        font-size: 15px !important;
    }

    .detail-seo-block .contentBox p {
        font-size: 13.5px !important;
        line-height: 1.85 !important;
    }
}

/* ==========================================================================
   34. 店铺详情页「描述相符」三项评分（#shop_describe .shopflag）
   症状：手机上这一块错位。
   原因：三条评分原本两列排（<=1024px 起），每列只有 135px（320px 屏更只有
   100px）；而「比同行业平均水平 + 评分」这个胶囊不换行需要 202px，只能硬折行。
   胶囊的行高又是写死的 22px（.grade{height:22px;line-height:22px}），
   兜不住第二行，于是金色的评分块整个溢出到胶囊外面，并压到下一行文字上。
   改法：手机上一行一条，标签在上、胶囊在下，宽度足够就不再折行；
   同时把胶囊高度放开（height:auto），万一遇到更长的评分文字也只是长高，不会溢出。
   （769~1024px 仍是三列、1440px 仍是横排，都不动。）
   ========================================================================== */
@media (max-width: 768px) {
    #shop_describe .topBox .shopflag {
        padding: 18px 16px 14px 16px !important;
    }

    #shop_describe .topBox .shopflag .flagList {
        display: block !important;
    }

    #shop_describe .topBox .shopflag .flagList .itemflag {
        float: none !important;
        /* 标签和评分胶囊排在同一行，左右两头对齐；
           万一屏幕特别窄（比如 320px）一行放不下，胶囊会自动整块换到第二行，
           不会被压扁或溢出。 */
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 6px 8px;
        width: 100% !important;
        padding: 11px 0 !important;
        border-bottom: 1px solid #e6e6e6;
        box-sizing: border-box;
    }

    #shop_describe .topBox .shopflag .flagList .itemflag:last-child {
        padding-bottom: 0 !important;
        border-bottom: 0;
    }

    #shop_describe .topBox .shopflag .flagList .itemflag .item {
        display: inline-block !important;
        flex: 0 0 auto;
        margin: 0 !important;
        font-size: 13.5px !important;
        line-height: 1.5 !important;
        color: #373737;
    }

    #shop_describe .topBox .shopflag .flagList .itemflag .grade {
        display: inline-block !important;
        flex: 0 1 auto;
        min-width: 0;
        height: auto !important;
        line-height: 1.6 !important;
        padding: 3px 0 3px 12px !important;
        font-size: 12px !important;
        white-space: normal !important;
        box-sizing: border-box;
    }

    #shop_describe .topBox .shopflag .flagList .itemflag .grade em {
        height: auto !important;
        line-height: 1.6 !important;
        padding: 3px 10px !important;
        margin-left: 5px !important;
    }
}

/* 360px 及以下：天猫新店的评分文字长一些（胶囊要 193px），
   并排会差几个像素，这里把左右留白和字号各收一点，尽量让三行都并排。
   收到 320px 还放不下的，胶囊会自动整块换到第二行（不会溢出、也不会压字）。 */
@media (max-width: 360px) {
    #shop_describe .topBox .shopflag {
        padding: 14px 12px 12px 12px !important;
    }

    #shop_describe .topBox .shopflag .flagList .itemflag {
        gap: 4px 6px;
    }

    #shop_describe .topBox .shopflag .flagList .itemflag .item {
        font-size: 12.5px !important;
    }

    #shop_describe .topBox .shopflag .flagList .itemflag .grade {
        padding-left: 8px !important;
    }

    #shop_describe .topBox .shopflag .flagList .itemflag .grade em {
        padding: 3px 8px !important;
        margin-left: 4px !important;
    }
}

/* ==========================================================================
   35. 店铺详情页「购买流程」（#describe .content #buyProcess）手机端错位
   症状：手机上这一块很乱。
   原因：桌面端是「上面一排图标 + 下面一排文字」两个独立的 <ul>，
   图标压在一条灰色横线上（.line），下面再对一条文字说明。
   手机上容器只有 334px，6 个 52px 的图标排不下，变成「5 个 + 1 个」两行，
   中间还夹着那条灰线；下面的文字又是两列三行 —— 三者完全对不上号。
   改法：照搬首页「流程解说」已经验收过的竖排方案：
   用 display:contents 把两个 <ul> 的子项提升为同一个网格的子项，
   网格按「列」填充 —— 左列图标、右列对应文字，一行一个步骤；
   灰线隐藏（那是给图标横排用的）。

   注意 1：display:contents 的元素不生成盒子，浏览器不为它建立计数器作用域，
   原样式挂在 .processList 上的 counter-reset 会失效（序号全变 01），
   计数器改挂到仍生成盒子的 .contentBox 上。
   注意 2：display:contents 后 .layui-clear 的清除浮动伪元素仍会被生成，
   并各占一个网格单元把 12 项挤成 3 列，必须把伪元素一起去掉。
   注意 3：步骤数必须与网格行数一致（三个详情模板都是 6 步，见 Views）。
   （769~1024px 平板和 1440px 电脑端维持原样，不动。）
   ========================================================================== */
@media (max-width: 768px) {
    #describe .content #buyProcess {
        padding-bottom: 26px !important;
    }

    #describe .content #buyProcess .contentBox {
        display: grid !important;
        grid-template-columns: 54px minmax(0, 1fr);
        grid-template-rows: repeat(6, auto);
        grid-auto-flow: column;
        column-gap: 12px;
        row-gap: 18px;
        align-items: center;
        counter-reset: sectioncounter;
    }

    /* 灰线是给「图标横排立在线上」用的，竖排后没有意义 */
    #describe .content #buyProcess .contentBox .line {
        display: none !important;
    }

    #describe .content #buyProcess .contentBox .processList,
    #describe .content #buyProcess .contentBox .textBox {
        display: contents !important;
    }

    #describe .content #buyProcess .contentBox .processList::before,
    #describe .content #buyProcess .contentBox .processList::after,
    #describe .content #buyProcess .contentBox .textBox::before,
    #describe .content #buyProcess .contentBox .textBox::after {
        content: none !important;
        display: none !important;
    }

    #describe .content #buyProcess .contentBox .processList .itemPro {
        float: none !important;
        width: auto !important;
        margin: 0 !important;
        text-align: center;
    }

    #describe .content #buyProcess .contentBox .processList .itemPro > img {
        width: 46px !important;
        height: auto;
        display: inline-block;
    }

    /* 序号气泡收进 54px 的图标列里，不要压到右边的文字 */
    #describe .content #buyProcess .contentBox .processList .itemPro::after {
        right: 0 !important;
        top: -14px !important;
        width: 54px !important;
        font-size: 20px !important;
        text-align: center;
    }

    #describe .content #buyProcess .contentBox .textBox .step {
        float: none !important;
        width: auto !important;
        margin: 0 !important;
        text-align: left;
    }

    #describe .content #buyProcess .contentBox .textBox .step .th {
        font-size: 15px !important;
        margin-bottom: 3px !important;
    }

    #describe .content #buyProcess .contentBox .textBox .step .describe {
        font-size: 12.5px !important;
        line-height: 1.55 !important;
    }
}

/* ==========================================================================
   36. 「立即购买」下方的规则入口（资金与定金规则）
   桌面端样式在 shops/detail.css 里。手机端把它做成一个够大的点按区域
   （文字 13.5px + 上下 10px 内边距 ≈ 42px 高），手指点得中。
   因为 detail.css 在本文件之后加载，这里的字号要用 !important。
   ========================================================================== */
@media (max-width: 768px) {
    #online_Customer .topBox .reserveRules {
        display: inline-block;
        margin-top: 4px;
        padding: 10px 16px;
        font-size: 13.5px !important;
        line-height: 1.6;
    }
}

/* ==========================================================================
   37. 支付页「确认支付」下方的规则入口（资金与定金规则）
   桌面端样式在 personalCenter/shopPay.css 里（清浮动 + 右对齐）。
   手机上 .confirmBtn 已经变成整行，再把链接改成居中，
   并把点按区域放大到约 42px 高。
   ========================================================================== */
@media (max-width: 768px) {
    #payment .payRulesWrap {
        text-align: center !important;
        padding-top: 6px !important;
    }

    #payment .payRules {
        display: inline-block;
        padding: 10px 16px;
        /* shopPay.css 在本文件之后加载，字号要 !important 才压得住 */
        font-size: 13.5px !important;
        line-height: 1.6;
    }
}

/* ==========================================================================
   38. 支付页「备注 / 支付密码」标签与输入框同一行
   桌面端本来就是「标签浮动在左 + 输入框在右」同一行；
   窄屏时输入框被改成 width:100%，110px 的标签挤不下，输入框只好掉到下一行，
   变成「标签一行、输入框一行」。
   这里改成 flex 一行：标签固定 76px 右对齐，输入框占满剩下的宽度。
   放不下时（极端窄屏）输入框才会整块换行，不会互相压。
   （>=1025px 电脑端不动。）
   ========================================================================== */
@media (max-width: 1024px) {
    /* 这一块整体和下面「确认支付」按钮拉开距离：
       前面的窄屏规则把最后一行和区块的 margin-bottom 都清成了 0，
       结果按钮直接贴在「支付密码」那一行下面（实测间距 0px）。 */
    #payment .remarkOrPayment {
        margin-bottom: 20px !important;
    }

    #payment .remarkOrPayment .layui-form-item {
        display: flex !important;
        align-items: center;
        flex-wrap: wrap;
        gap: 8px;
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 12px 0 !important;
        box-sizing: border-box;
    }

    #payment .remarkOrPayment .layui-form-item:last-child {
        margin-bottom: 0 !important;
    }

    #payment .remarkOrPayment .layui-form-item .layui-form-label {
        float: none !important;
        display: block !important;
        flex: 0 0 auto;
        width: 76px !important;
        padding: 0 8px 0 0 !important;
        text-align: right !important;
        font-size: 14px !important;
        white-space: nowrap;
        box-sizing: border-box;
    }

    #payment .remarkOrPayment .layui-form-item .layui-input-inline,
    #payment .remarkOrPayment .layui-form-item .captcha {
        float: none !important;
        display: block !important;
        flex: 1 1 150px;
        width: auto !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        left: 0 !important;
        box-sizing: border-box;
    }

    #payment .remarkOrPayment .layui-form-item .layui-input {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }
}

/* ==========================================================================
   39. 会员中心「搜索条」（.layui-form-item.searchShop）窄屏重排
   用过这个搜索条的页面：已售店铺 / 已买店铺 / 我要求购 / 求购需求。

   症状：窄屏下框里的内容看着整体错位。
   原因：这一条的桌面样式是
       .searchShop { padding: 18px 0 18px 30px }        ← 左 30px、右 0
       .labelName { float:left }  .shopTitle { float:left; margin-right:25px }
       .search    { width:30px; height:30px; margin-left:20px; margin-top:3px }
   窄屏把标签和输入框都改成整行之后：
     - 左内边距 30px 还在、右内边距是 0 → 内容整体右移 30px 又贴着右边
     - 搜索按钮还留着 margin-left:20px，比上面的输入框又缩进 20px
   实测 390px：搜索条 14~376，内容 44~376（左空 30、右空 0），按钮 64~110。

   改法：左右内边距对称，改成 flex 一行一行排：
   标签独占一行 → 输入框独占一行 → 最后一个输入框和搜索按钮并排。
   （>=1025px 电脑端不动，那边本来就是标签 + 输入框 + 按钮横排。）
   ========================================================================== */
@media (max-width: 1024px) {
    .searchShop,
    .layui-form-item.searchShop,
    #alreadySell .searchShop,
    #alreadyBuy .searchShop,
    #buyInfo .searchShop {
        display: flex !important;
        flex-wrap: wrap;
        align-items: center;
        gap: 10px;
        padding: 16px 14px !important;
        box-sizing: border-box;
    }

    .searchShop .labelName,
    .layui-form-item.searchShop .labelName {
        flex: 0 0 100%;
        width: 100%;
        margin: 0 !important;
    }

    .searchShop .layui-input-inline,
    .layui-form-item.searchShop .layui-input-inline {
        flex: 0 0 100%;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        box-sizing: border-box;
    }

    /* 最后一个输入框让出一截给搜索按钮，两者并排一行。
       这里必须带 #container / 页面 id 前缀：上面通配的
       「#container .layui-input-inline { width:100% }」是带 id 的 !important，
       只用类名压不住它，宽度收不回来，搜索按钮就会被挤到下一行。 */
    #container .searchShop .layui-input-inline:last-of-type,
    #container .layui-form-item.searchShop .layui-input-inline:last-of-type,
    #alreadySell .searchShop .layui-input-inline:last-of-type,
    #alreadyBuy .searchShop .layui-input-inline:last-of-type,
    #buyInfo .searchShop .layui-input-inline:last-of-type {
        flex: 1 1 0;
        width: auto !important;
        min-width: 0;
    }

    .searchShop .search,
    .layui-form-item.searchShop .search {
        flex: 0 0 56px;
        width: 56px !important;
        height: 38px !important;
        line-height: 38px !important;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 6px !important;
        box-sizing: border-box;
    }

    .searchShop .search img,
    .layui-form-item.searchShop .search img {
        width: 18px !important;
        height: 18px !important;
        vertical-align: middle;
    }
}

/* ==========================================================================
   40. 「已买店铺」列表卡片：边框太密 + 文字贴着边框
   （/PersonalCenter/AlreadyBuyShop 的 .buyShopList）

   手机上这张表已经被转成卡片（每一行 tbody 一张卡），但页面自己的样式
   （buyShop.css）又给卡里的每一行加了实线边框：

       #alreadyBuy .buyShopList .layui-table tbody tr { border: 1px solid #e6e6e6 }
       #alreadyBuy .buyShopList .layui-table tbody tr:first-of-type { background:#f2f2f2 }
       #alreadyBuy .buyShopList .layui-table tbody::after { height: 15px }

   于是卡片里面有：卡片边框 + 灰色信息条的矩形边框 + 字段区的矩形边框
   + 字段之间 5 条虚线，一共五六道线；而且信息条里的文字
   （订单号 / 日期 / 客服）左右内边距是 0，直接贴着那个矩形的边。

   实测（改前，390px）：
     卡片 tbody 26~364（内边距 10px 14px，1px 边框，圆角 10）
       信息条 tr 41~349（1px 实线边框，灰色底）→ 里面的文字从 42 开始，贴着边框
       字段 tr   41~349（1px 实线边框）

   改法：卡里不再套矩形边框，灰色信息条改成浅底 + 圆角 + 内边距，
   字段行上下留白加一点，卡片末尾那块 15px 占位块去掉。
   （>=769px 正常表格布局不动。）
   ========================================================================== */
@media (max-width: 768px) {
    /* 1) 卡里的行不要再画矩形边框，交给卡片自己那一圈就够 */
    #alreadyBuy .buyShopList .layui-table tbody tr,
    #container #alreadyBuy .buyShopList .layui-table tbody tr {
        border: 0 !important;
    }

    /* 2) 桌面端 tbody 末尾那个 15px 高的占位块，在卡片里是多出来的空隙 */
    #alreadyBuy .buyShopList .layui-table tbody::after {
        height: 0 !important;
    }

    /* 3) 灰色信息条：浅底 + 圆角 + 内边距，文字不再贴着边 */
    #alreadyBuy .buyShopList .layui-table tbody tr:first-of-type,
    #container #alreadyBuy .buyShopList .layui-table tbody tr:first-of-type {
        background-color: #f6f7f7 !important;
        border-radius: 6px !important;
        padding: 9px 10px !important;
    }

    #container #alreadyBuy .buyShopList .layui-table tbody tr:first-of-type td {
        padding: 0 !important;
    }

    /* 4) 字段行上下留一点白，值不再紧贴分隔线 */
    #container #alreadyBuy .buyShopList .layui-table tbody tr td {
        padding-top: 9px !important;
        padding-bottom: 9px !important;
    }
}

/* ==========================================================================
   41. 充值页（/PersonalCenter/Pay）与提现页的手机端收尾
   1) 卡片内边距：这两页的白色卡片用的是 **class** `.main_Box`
      （`#onlinepay.main_Box` / `#offlinepay.main_Box` / `.main_Box.withdraw`），
      而前面收内边距的规则写的是 **id** `#main_Box`，一直没管到它们 ——
      手机上还留着桌面的 `padding: 50px`，390px 屏幕里内容只剩 262px。
   2) 充值页的银行账户卡、提示条在手机上内边距收一点，别浪费宽度。
   ========================================================================== */
@media (max-width: 1024px) {
    #container .main_Box,
    .main_Box.withdraw {
        padding: 18px 14px !important;
    }

    #container #offlinepay .payCodeBox .alipayCard {
        padding: 14px 16px !important;
    }

    #offlinepay .confirmPayment .tipsBox .tips {
        padding: 11px 13px 11px 15px !important;
        font-size: 12.5px !important;
        line-height: 1.8 !important;
    }

    #offlinepay > .tipsBox .tips p {
        font-size: 12.5px !important;
    }
}

/* ==========================================================================
   42. 新闻/资讯详情页右栏卡片（.r-f1 热点新闻 / .r-f4 SEO标签）
   （/news/{id}.html、/information-*.html，样式在 News/details.css）

   问题：这两张卡片里还有一批「写死 320px」的宽度没被放开：
       .com-tit    { width: 320px }   卡片小标题
       .com-x-line { width: 320px }   标题下那条分隔线
       .r-f1 ul li { width: 320px }   热点新闻每一条
   桌面端卡片正好 350px（320 居中，左右各留 15px），所以看不出来；
   窄屏卡片被拉成整行后：
     - 390px：内容只有 320px，右边空出 42px
     - 320px：320px 的条目比卡片（292px）还宽，直接顶出卡片右边 28px
   而且卡片自己没有内边距，列表前面的序号小方块就贴在卡片左边缘上。

   改法：卡片左右各给 14px 内边距，里面这几处宽度改成自适应。
   （>=1025px 电脑端仍然是 350px 卡片 + 320px 内容居中，不动。）
   ========================================================================== */
@media (max-width: 1024px) {
    .news-container .con .r-f1,
    .news-container .con .r-f4 {
        padding: 14px 14px 16px !important;
        box-sizing: border-box;
    }

    .news-container .con .r-con,
    .news-container .con .r-f1 .com-tit,
    .news-container .con .r-f1 .com-x-line,
    .news-container .con .r-f1 ul li,
    .news-container .con .r-f4 .com-tit,
    .news-container .con .r-f4 .com-x-line {
        width: auto !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }

    /* 热点新闻的条目：左右都放开，序号小方块跟着内容走 */
    .news-container .con .r-f1 ul li {
        min-width: 0;
        margin-top: 14px !important;
    }

    .news-container .con .r-f1 ul li::before {
        top: 1px;
    }

    /* SEO 标签：按内容自适应，一排放不下自动换行 */
    .news-container .con .r-f4 ul li {
        float: none !important;
        display: inline-block !important;
        vertical-align: top;
        margin: 0 8px 8px 0 !important;
    }
}