/**
 * 外贸宝窄屏适配（≤768px）。
 *
 * 只在窄屏生效，桌面端一条规则都不落地，所以必须放在所有样式之后引入：
 * 要覆盖的既有本地的 vendor-chrome.css，也有外链的 www.ymaobao.com/css/style.css。
 *
 * 配套约束：fragments/vendor-chrome-head.html 里的 rem 脚本在窄屏把 html 字号固定为
 * 100px，于是外链 CSS 的 rem 值等于设计标称 px 值（0.16rem = 16px、1.1rem = 110px、
 * 0.84rem = 84px）。本文件只解决「一行放不下」的多列布局，不重复调字号。
 * 断点 768 两边必须一致。
 *
 * 已落盘的静态详情页不含本文件的引用，只有重新生成后才生效；列表页是动态渲染的，
 * 部署即生效。
 */

@media (max-width: 768px) {

    /* ============ 全局 ============ */

    html {
        /* 关掉 iOS 横屏时的自动字号放大，否则布局宽度和 clientWidth 会对不上 */
        -webkit-text-size-adjust: 100%;
        /* rem 基准的 CSS 兜底：vendor-chrome-head 里的 JS 钳制依赖脚本执行时机，
           实测在窄屏仍可能留下 100×宽/1920 的桌面值（字号缩到不可读）。
           CSS !important 能压过 JS 写进 html 的内联 font-size，保证窄屏恒为 100px，
           使外链 CSS 的 rem 值等于设计标称 px（0.16rem=16px、0.84rem=84px）。 */
        font-size: 100px !important;
    }

    body.vendor-page {
        /* 解除 vendor-chrome.css 的 min-width:1200px 桌面锁，它是窄屏横向滚动的根源 */
        min-width: 0;
        padding-top: 56px;
        /* 兜底：外链 CSS 里还有若干写死的大宽度，宁可裁掉也不要整页左右晃 */
        overflow-x: hidden;
    }

    body.vendor-page img {
        max-width: 100%;
    }

    /* iOS Safari 在输入框字号小于 16px 时会在聚焦瞬间放大整页，导致表单错位，
       退回后页面还停在放大状态。所有可输入控件统一到 16px 是唯一可靠的解法。 */
    body.vendor-page input,
    body.vendor-page select,
    body.vendor-page textarea {
        font-size: 16px;
    }

    /* ============ 头部：一级入口横向滑动 ============ */

    body.vendor-page header {
        height: 56px;
        /* header 是 position:fixed。默认的 width:auto 会走 shrink-to-fit，其 min-content
           实测高达 598px（logo + 七个一级菜单 + 登录区），直接超出设备宽并把布局视口
           （innerWidth）顶宽，反而让子元素的 width:100% 跟着变宽。显式钉成 100%：
           首次布局时 ICB 还是设备宽，header 就等于设备宽，内部 #nav 横滑消化剩余宽度，
           溢出与视口扩张的循环被打破。left/right 同时钉住避免静态位偏移。 */
        left: 0;
        right: 0;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    /* 右侧留 84px 给绝对定位的「登录/注册」，否则它会压在导航上。
       外链给 .content 写死了宽度（390 视口下实测 465px），只改 max-width 压不住，
       必须连 width 一起压成 100%；box-sizing 保证左右 padding 不再把宽度顶出去。 */
    body.vendor-page header .content {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        height: 56px;
        padding: 0 84px 0 12px;
    }

    body.vendor-page .header_nav {
        height: 56px;
        flex: 1 1 auto;
        min-width: 0;
    }

    body.vendor-page .logo {
        flex: none;
    }

    body.vendor-page .logo img {
        display: block;
        height: 26px;
        width: auto;
    }

    /* 7 个一级菜单按外链的 width:1.1rem（110px）算共约 770px，390px 屏放不下。
       改成横向滑动而不是挤压文字：触屏上滑动比换行或缩到不可读更符合习惯。 */
    body.vendor-page #nav {
        flex: 1 1 auto;
        min-width: 0;
        height: 56px;
        padding-left: 8px;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    body.vendor-page #nav::-webkit-scrollbar {
        display: none;
    }

    body.vendor-page #nav > li {
        flex: none;
        width: auto;
        padding: 0 6px;
        line-height: 56px;
    }

    body.vendor-page #nav > li > a {
        font-size: 14px;
        white-space: nowrap;
    }

    /* 二级/三级下拉在触屏上没有 hover，点一下会粘住展开；而且它们的宽度是
       12rem（1200px）和 min-width:760px，展开必然溢出屏幕。窄屏整体关掉，
       一级入口本身就是可点的链接，跳过去再导航。
       带 !important 是为了压过 vendor-chrome.css 的 :hover / :focus-within 展开规则。 */
    body.vendor-page #nav > li > ul,
    body.vendor-page #nav .customs-submenu,
    body.vendor-page #nav .trade-tools-submenu,
    body.vendor-page #nav .contact-submenu {
        display: none !important;
    }

    /* 下拉已关，指示箭头只会让人以为点了有用 */
    body.vendor-page #nav > li > a[aria-haspopup] {
        background-image: none;
    }

    /* 窄屏横向空间紧张，这两个入口让位给导航滑动区 */
    body.vendor-page .recruitingPartners,
    body.vendor-page .language_cnen {
        display: none;
    }

    body.vendor-page .header_login {
        width: auto;
        height: 56px;
        padding: 0 12px;
        font-size: 13px;
        line-height: 56px;
    }

    /* ============ 正文容器 ============ */

    body.vendor-page .container {
        max-width: none;
        margin: 12px;
        padding: 16px 14px;
        border-radius: 10px;
        margin-bottom: 20px;
    }

    body.vendor-page .container > h1 {
        margin: 0 0 12px;
        font-size: 20px;
        line-height: 1.4;
    }

    body.vendor-page .nav-tabs {
        margin-bottom: 12px;
        overflow-x: auto;
        scrollbar-width: none;
    }

    /* ============ 列表页 ============ */

    body.vendor-page .search-container {
        flex-direction: column;
        gap: 8px;
    }

    body.vendor-page .search-container .search-select,
    body.vendor-page .search-container .search-input,
    body.vendor-page .search-container .search-button {
        width: 100%;
        min-width: 0;
    }

    body.vendor-page .result-info {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        padding: 10px 12px;
    }

    body.vendor-page .total-count strong,
    body.vendor-page .total-count #traderCount {
        font-size: 20px !important;
    }

    body.vendor-page .data-container {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }

    body.vendor-page .sidebar {
        grid-column: 1;
        width: auto;
    }

    /* 公司名在模板里写了内联 font-size:20px，内联样式只能靠 !important 覆盖 */
    body.vendor-page .supplier-name {
        font-size: 16px !important;
        line-height: 1.4;
        white-space: normal;
    }

    body.vendor-page .supplier-header {
        gap: 8px;
    }

    /* 交易描述桌面端是单行省略号，窄屏一行只剩十几个字，放开到三行 */
    body.vendor-page .record-value.desc {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        white-space: normal;
        overflow: hidden;
    }

    body.vendor-page .record-item-horizontal {
        flex-wrap: wrap;
        gap: 2px 6px;
    }

    body.vendor-page .pagination {
        gap: 6px;
        justify-content: center;
    }

    body.vendor-page .page-info {
        width: 100%;
        margin-top: 4px;
        text-align: center;
    }

    /* ============ 详情页 ============ */

    body.vendor-page .company-name {
        font-size: 20px;
        line-height: 1.4;
    }

    body.vendor-page .stats-container {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    body.vendor-page .stat-value {
        font-size: 16px;
    }

    body.vendor-page .chart-container {
        padding: 12px;
    }

    /* 5 列贸易记录表：与其把 358px 挤成五列不可读，不如给个最小宽度横向滑动。
       数据表横滑是移动端通行做法，用户预期明确。 */
    body.vendor-page .table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    body.vendor-page .trade-table {
        min-width: 640px;
    }

    body.vendor-page .trade-table th,
    body.vendor-page .trade-table td {
        padding: 8px;
        font-size: 13px;
    }

    /* ============ 悬浮层与留资 ============ */

    /* 右侧悬浮客服栏宽 64px、四项共约 200px 高，在 390px 屏上会盖住表格右半部分，
       且微信二维码、回到顶部这些在手机上意义不大。
       留资入口改由侧栏「申请试用」和图表占位里的按钮承担——窄屏侧栏会堆到正文下方，
       正好落在页面底部，符合移动端阅读顺序。 */
    body.vendor-page .suspensionCustomerService {
        display: none !important;
    }

    /* 免费试用弹窗桌面端写死 width:954px，在 390px 屏上会横向溢出到看不见提交按钮。
       改成贴底抽屉：仍然可关闭、可滚动，但不再溢出。
       定位属性必须带 !important——vendor-chrome.js 用内联 style 切 display，
       而内联样式优先级高于普通规则。display 本身不写，交给 JS 控制。 */
    body.vendor-page .freeTrial {
        top: auto !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: auto !important;
        max-height: 88vh;
        overflow-y: auto;
        transform: none !important;
        border-radius: 12px 12px 0 0;
    }

    body.vendor-page .freeTrial .formContainer {
        padding: 20px 16px;
    }

    /* ============ 页脚 ============ */

    /* 页脚的 .content 与头部同源（外链写死宽度），同样要连 width 一起压 */
    body.vendor-page footer .content {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        padding: 0 16px;
    }

    /* 外链把页脚做成「三列链接 + 右侧合作信息」的横排，窄屏改竖排 */
    body.vendor-page .bottomInformation {
        display: block;
    }

    /* 三个 li 各 1.96rem（196px）共 588px，窄屏换成两列网格 */
    body.vendor-page .bottomInformation > ul {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px 12px;
        padding-top: 20px;
    }

    body.vendor-page .bottomInformation ul li {
        width: auto;
    }

    body.vendor-page .followWithInterest {
        padding-top: 4px;
    }

    /* .cooperation 是页脚合作信息的横排 flex，里面 .tel_margin 是 white-space:nowrap
       且 min-width:auto 的 flex 项，内容（电话号）约 239px 收不动，从前面一个兄弟
       往右溢出到 465px，把整个布局视口顶宽（连带 fixed header 的 width:100% 也变 465）。
       允许换行，并让 tel_margin 可收缩/换行，彻底消除溢出根。 */
    body.vendor-page .cooperation {
        flex-wrap: wrap;
        row-gap: 6px;
    }

    body.vendor-page .tel_margin {
        min-width: 0;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    /* 4 个二维码横排共 456px（84×4 + 间距 40×3），必须允许换行 */
    body.vendor-page .scanCodeArea {
        flex-wrap: wrap;
        gap: 12px;
        padding-top: 12px;
        padding-bottom: 16px;
    }

    body.vendor-page .scanCodeArea_item + .scanCodeArea_item {
        margin-left: 0;
    }

    body.vendor-page .copyright p {
        padding: 12px 0 20px;
        font-size: 12px;
        line-height: 1.6;
    }
}