/* ===========================================================
   印源移动端常驻导航（小程序端手感）
   底部 4 Tab：首页 / 产品 / 发现 / 我的
   激活态灰块用 transform 平移，弹性缓动
   使用：<link rel="stylesheet" href="/css/mp-tabbar.css?v=1.0">
   由 js/mp-tabbar.js 注入 DOM，宽度 > 900px 自动不显示
   =========================================================== */

:root {
    --mp-tab-h: 60px;
    --mp-pill: #efeeea;
    /* 激活态灰块（暖灰，取自参考图） */
    --mp-on: #1c8f89;
    /* 激活态图标 */
    --mp-off: #a2a8ae;
    /* 未激活图标 */
    --mp-txt: #1a1a1a;
    /* 文字恒为黑色（激活与否都不变、不加粗） */
    --mp-ico: 26px;
    /* 图标尺寸（文字不跟着放大） */
    --mp-app-w: 480px;
    --mp-ease: cubic-bezier(.34, 1.3, .64, 1);
}

/* 只在显示导航时给 body 留出底部空间，不干扰原页面布局 */
body.mp-tabbar-on {
    padding-bottom: calc(var(--mp-tab-h) + 26px + env(safe-area-inset-bottom)) !important;
}

/* 手机端先不显示 AI 客服悬浮球（print.html 的可拖拽球，原 z-index 9997 贴视口底部，
   会和底部导航抢位置；只在导航显示时隐藏，桌面端不受影响） */
body.mp-tabbar-on .ai-float-wrap,
body.mp-tabbar-on .ai-collapse-toggle {
    display: none !important;
}

/* index.html 已不再注入本组件（电脑版保持原样），这条只作为兜底：
   万一以后又把导航注入首页，≤900px 时它会变成贴底横条与导航重叠 */
body.mp-tabbar-on .nave {
    display: none !important;
}

/* 页面自己的抽屉/全屏遮罩打开时，底部导航让位
   （UserCenter 的左侧菜单抽屉、toolbox 的侧边栏抽屉）
   :has() 在老浏览器上不生效也只是「不隐藏」，没有副作用 */
body:has(.nav-mask.on) .mp-tabbar,
body:has(.content-left.open) .mp-tabbar,
body:has(.drawer.on) .mp-tabbar,
body:has(.yy-ai-overlay.open) .mp-tabbar,
body:has(.sidebar.active) .mp-tabbar,
body.mp-tabbar-hide .mp-tabbar {
    opacity: 0;
    /* 🔴 必须 visibility:hidden：只写 pointer-events:none 挡不住子元素，
       .mp-tabs 自带 pointer-events:auto 会覆盖父级 none → 导航"透明但可点"，
       会吞掉抽屉底部「提交订单」的点击并跳到「我的」（线上丢单就是这个）。 */
    visibility: hidden;
    pointer-events: none;
}

/* 双保险：无论哪条规则命中，导航及其子元素一律不接收事件 */
body.mp-tabbar-hide .mp-tabbar,
body.mp-tabbar-hide .mp-tabbar * {
    pointer-events: none !important;
}

/* 手机键盘弹起（js/mp-tabbar.js 监听 visualViewport 后写到 body 上）：
   底部导航与 /print 的「去下单」一起收回屏幕外，别顶在输入框旁边挡视线。
   🔴 子元素必须一起断 pointer-events：.mp-tabs 自带 auto，会盖住键盘上方的输入区。 */
body.mp-tabbar-kb .mp-tabbar,
body.mp-tabbar-kb .mp-order-btn {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateX(-50%) translateY(120%) !important;
    transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
}

body.mp-tabbar-kb .mp-tabbar *,
body.mp-tabbar-kb .mp-order-btn * {
    pointer-events: none !important;
}

.mp-tabbar,
.mp-tabbar * {
    box-sizing: border-box;
}

.mp-tabbar {
    position: fixed;
    left: 50%;
    bottom: 10px;
    z-index: 9990;
    width: 100%;
    max-width: var(--mp-app-w);
    padding: 0 12px calc(10px + env(safe-area-inset-bottom));
    transform: translateX(-50%);
    pointer-events: none;
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", sans-serif;
    font-size: 10.5px;
    line-height: 1.1;
    text-align: center;
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
    transition: opacity .2s ease;
}

.mp-tabs {
    position: relative;
    display: flex;
    align-items: center;
    height: var(--mp-tab-h);
    padding: 6px;
    background: #fff;
    border-radius: calc(var(--mp-tab-h) / 2);
    /* 往上也补一层很浅的投影，胶囊像浮在内容上方，不再是贴片 */
    box-shadow: 0 -6px 18px rgba(16, 24, 32, .05), 0 8px 26px rgba(16, 24, 32, .12), 0 1px 3px rgba(16, 24, 32, .06);
    pointer-events: auto;
    -webkit-user-select: none;
    user-select: none;
}

/* 会移动的灰块 */
.mp-pill {
    position: absolute;
    top: 6px;
    left: 0;
    display: block;
    width: 0;
    height: calc(var(--mp-tab-h) - 12px);
    border-radius: calc((var(--mp-tab-h) - 12px) / 2);
    background: var(--mp-pill);
    transform: translateX(0);
    transition: transform .42s var(--mp-ease), width .42s var(--mp-ease), opacity .18s ease;
    will-change: transform, width;
    pointer-events: none;
}

/* 当前页面不属于这 4 个 Tab 时（如 index.html），灰块隐去 */
.mp-tabbar.is-idle .mp-pill {
    opacity: 0;
}

.mp-tab {
    position: relative;
    z-index: 1;
    flex: 1 1 0;
    min-width: 0;
    height: calc(var(--mp-tab-h) - 12px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    color: var(--mp-off);
    text-decoration: none;
    transition: color .26s ease;
    -webkit-tap-highlight-color: transparent;
}

.mp-tab:link,
.mp-tab:visited,
.mp-tab:hover,
.mp-tab:active {
    text-decoration: none;
}

.mp-tab .mp-ico {
    display: block;
    width: var(--mp-ico);
    height: var(--mp-ico);
    line-height: 0;
    /* 图标颜色自己说了算：toolbox 等页有 `a{color:inherit !important}`，
       若不在这里显式声明，currentColor 会被它改成 body 的 #333（四个图标全黑） */
    color: var(--mp-off) !important;
    transition: color .26s ease;
}

.mp-tab .mp-ico svg {
    display: block;
    width: var(--mp-ico);
    height: var(--mp-ico);
    fill: currentColor;
    transition: transform .34s var(--mp-ease);
}

.mp-tab .mp-txt {
    display: block;
    font-size: 10.5px;
    line-height: 1.1;
    letter-spacing: .2px;
    white-space: nowrap;
    font-weight: 400;
    /* 文字永远是黑色，只有图标跟随激活态变色 */
    color: var(--mp-txt);
}

.mp-tab.is-active .mp-ico {
    color: var(--mp-on) !important;
}

.mp-tab.is-active .mp-ico svg {
    transform: translateY(-1px) scale(1.05);
}

/* ===========================================================
   顶部「主产线 / 副产线」切换（只在 /print 与 /SPline/VolPrintQuo 两页）
   手机端固定在右上角：/print 页正好盖住 iframe 顶部那两个图标
   （电话/搜索来自 top168.xiaoyina.com，跨域改不了，只能盖）
   =========================================================== */
@media (max-width: 900px) {

    .mp-topnav {
        position: fixed;
        top: 8px;
        right: 8px;
        z-index: 9992;
        display: flex;
        align-items: center;
        gap: 2px;
        padding: 4px;
        border-radius: 999px;
        background: #fff;
        box-shadow: 0 6px 18px rgba(16, 24, 32, .16), 0 1px 2px rgba(16, 24, 32, .08);
        font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", sans-serif;
        -webkit-tap-highlight-color: transparent;
        /* 可按住左右拖动：横向手势归我们，纵向仍交给页面滚动 */
        touch-action: pan-y;
        cursor: grab;
        user-select: none;
        -webkit-user-select: none;
        will-change: transform;
    }

    .mp-topnav.is-drag {
        cursor: grabbing;
        /* 拖动时把阴影收一点，手感更"拿起来" */
        box-shadow: 0 10px 24px rgba(16, 24, 32, .20), 0 1px 2px rgba(16, 24, 32, .08);
    }

    .mp-topnav.is-drag a {
        pointer-events: none;
    }

    .mp-topnav a {
        display: block;
        /* padding 比原来少 1px：让出 1px 描边的位置，按钮整体尺寸完全不变 */
        box-sizing: border-box;
        padding: 6px 10px;
        border: 1px solid #e3eaee;
        /* 未点亮时的「浅浅的 1px 描边」：两条产线都不属于当前页（ATQ / 现货样品）时，
           按钮是纯文字，没有描边就看不出是能点的 */
        border-radius: 999px;
        font-size: 12px;
        line-height: 1;
        font-weight: 500;
        color: #3d3d3d !important;
        text-decoration: none !important;
        white-space: nowrap;
        transition: background-color .2s ease, color .2s ease, border-color .2s ease;
    }

    /* 有任何一条产线点亮：所有描边一起消失（描边只为“可点”提示，不是装饰） */
    .mp-topnav.has-on a,
    .mp-topnav a.is-on {
        border-color: transparent;
    }

    .mp-topnav a.is-on {
        background: #1c8f89;
        color: #fff !important;
    }

    /* 副产线页（SPline）：给右上角按钮让出位置，logo 靠左 */
    body.mp-topnav-on .yy-nav-in {
        justify-content: flex-start;
        padding-right: 132px;
    }

    /* ===== /print 页：右上下单栏改成从右侧滑出的抽屉 ===== */
    body.mp-order-ready .right {
        display: block !important;
        position: fixed !important;
        top: 0;
        right: 0;
        width: min(92vw, 380px) !important;
        height: 100vh;
        max-height: 100vh;
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        background: #fff;
        z-index: 9996;
        transform: translateX(102%);
        transition: transform .34s cubic-bezier(.32, .72, .28, 1);
        box-shadow: -10px 0 30px rgba(0, 0, 0, .18);
        border: 0;
    }

    body.mp-order-open .right {
        transform: translateX(0);
    }

    .mp-order-mask {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 9995;
        background: rgba(0, 0, 0, .38);
        opacity: 0;
        pointer-events: none;
        transition: opacity .28s ease;
    }

    body.mp-order-open .mp-order-mask {
        opacity: 1;
        pointer-events: auto;
    }

    /* 「去下单」：暖黄半圆（上圆弧、底边平直），坐落在底部导航胶囊上沿 */
    .mp-order-btn {
        position: fixed;
        left: 50%;
        bottom: calc(var(--mp-tab-h) + 15px + env(safe-area-inset-bottom));
        z-index: 9989;
        /* 低于 .mp-tabbar 的 9990，嵌入的那 1px 会被白色胶囊盖住 */
        display: flex;
        /* 图标和文字并排（一排），拱顶窄，整体往下放一点才不贴上弧 */
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 0;
        box-sizing: border-box;
        width: 96px;
        height: 48px;
        padding: 5px 0 0;
        border: 0;
        border-radius: 48px 48px 0 0;
        /* 橙色 → 浅橘黄（上浅下深，跟底部白色导航的过渡更自然） */
        background: linear-gradient(180deg, #ffe0ad 0%, #ffb554 46%, #ff9417 100%);
        color: #4a2f0a;
        font-size: 13px;
        font-weight: 700;
        font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
        letter-spacing: .6px;
        white-space: nowrap;
        box-shadow: 0 -2px 12px rgba(255, 148, 23, .30), inset 0 1px 0 rgba(255, 255, 255, .55);
        transform: translateX(-50%);
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    /* 半圆内部不再做内描边（::before 已移除），只保留图标 + 文字 */
    .mp-order-ico {
        display: block;
        flex: 0 0 auto;
        /* 购物车图形右侧本身留了约 3px 空白（viewBox 到 24 但轮子只到 20），
           这里吃掉它，图标和文字才真的紧凑 */
        margin-right: -2px;
    }

    .mp-order-ico svg {
        display: block;
        width: 22px;
        height: 22px;
    }

    .mp-order-txt {
        display: block;
        font-size: 13px;
        font-weight: 800;
        line-height: 1;
        letter-spacing: .5px;
    }

    .mp-order-btn:active {
        transform: translateX(-50%) scale(.96);
        transform-origin: 50% 100%;
    }
}


/* ===========================================================
   细节修正（手机端 · 覆盖上面的默认值，同权重后置生效）
   1) 主/副产线胶囊：去阴影，1px 深灰描边
   2) 去下单：半圆、水平居中、紧贴底部导航上沿
   3) 下单抽屉宽度撑满屏幕；抽屉内表单与「常用地址」弹窗适配手机
   =========================================================== */
@media (max-width: 900px) {

    .mp-topnav {
        box-shadow: none;
        border: 1px solid #c6ced4;
        padding: 3px;
    }



    /* 抽屉撑满整个屏幕 */
    body.mp-order-ready .right {
        width: 100vw !important;
        max-width: 100vw;
    }

    /* 抽屉里的表单在 print.css 是写死 360px 的，撑满后要跟着放开。
       左右内边距跟着屏宽走：320 窄屏不至于挤，430 宽屏也不会贴边。 */
    body.mp-order-ready #form {
        width: 100% !important;
        height: calc(100vh - 60px);
        height: calc(100dvh - 60px);   /* 手机地址栏伸缩时 100vh 会算大，底部按钮被顶出去 */
        padding: 10px clamp(12px, 4.2vw, 20px) 24px;
    }

    body.mp-order-ready #summary {
        width: 100% !important;
        max-width: 100%;
    }

    /* 🔴 print.css 里下面这些容器全是写死的 330px（按桌面 360px 栏宽算的）。
       抽屉撑到 100vw 后它们不会跟着变宽：430 宽的屏上 330/430 ≈ 77%，
       左右各空 50px，看着就像「表单没跟着屏幕变化」。这里统一放开。 */
    body.mp-order-ready .summary-wrap,
    body.mp-order-ready .summary-tools,
    body.mp-order-ready .express,
    body.mp-order-ready .sumtotal,
    body.mp-order-ready .drop-area,
    body.mp-order-ready .information,
    body.mp-order-ready .shouhuo,
    body.mp-order-ready .qq_file,
    body.mp-order-ready .butn,
    body.mp-order-ready .file-item {
        width: 100% !important;
        max-width: 100%;
        box-sizing: border-box;
    }

    body.mp-order-ready #te4,
    body.mp-order-ready #te5,
    body.mp-order-ready #te6 {
        width: 100% !important;
        max-width: 100%;
    }

    /* 文件名占满剩余宽度，删除 × 固定在右侧，别被挤到第二行 */
    body.mp-order-ready .file-name {
        width: calc(100% - 26px) !important;
        box-sizing: border-box;
    }

    /* 「姓名／手机／地址」是裸文本 + 330px 输入框。
       改成 flex：文字吃自然宽度，输入框吃剩下的全部（原来固定 330px 会溢出抽屉）。 */
    body.mp-order-ready .shouhuo ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    body.mp-order-ready .shouhuo ul li {
        display: flex;
        align-items: center;
        gap: 6px;
        width: 100%;
        margin: 0;
        white-space: nowrap;
    }

    body.mp-order-ready .shouhuo ul li input {
        flex: 1 1 auto;
        width: auto !important;
        min-width: 0;
    }

    body.mp-order-ready #form input,
    body.mp-order-ready #form textarea,
    body.mp-order-ready #form select {
        box-sizing: border-box;
        max-width: 100%;
    }

    /* 常用地址弹窗的遮罩（.login-bg 原本 z-index:555，会被抽屉 9996 整个盖住 → 看着像没弹层） */
    body.mp-order-ready .login-bg {
        z-index: 9997;
    }

}


/* ===========================================================
   副产线页（SPline/VolPrintQuo）手机端顶部通栏
   - 底色改白、高度收 4px
   - 「印刷报价」已改名「副产线·画册报价」，下拉导航功能取消（主/副产线交给右上角胶囊）
   - 通栏下方原来的「印源副产线·画册报价」大标题 + 印刷合作协议 隐藏
   =========================================================== */
/* 副产线页顶部按钮的双文案：默认只显示「印刷报价」（桌面端原样），
   手机端（≤640）由下面的媒体查询切到「副产线 · 画册报价」。 */
.yy-btn-mp {
    display: none;
}

@media (max-width: 640px) {

    body.mp-topnav-on .yy-nav {
        background: #fff;
        border-bottom-color: rgba(1, 25, 26, .12);
    }

    body.mp-topnav-on .yy-nav.is-stuck {
        background: rgba(255, 255, 255, .94);
        -webkit-backdrop-filter: saturate(180%) blur(14px);
        backdrop-filter: saturate(180%) blur(14px);
        box-shadow: 0 4px 14px rgba(15, 48, 52, .10);
    }

    /* 高度：上下各瘦 2px，总高 -4px */
    body.mp-topnav-on .yy-nav-in {
        padding: 7px 12px;
    }

    /* 文字变长，字号收一档，320 宽也不挤 */
    body.mp-topnav-on .yy-drop-btn {
        font-size: 17px;
        font-weight: 600;
        padding: 7px 4px;
        cursor: default;
    }

    /* 副产线页「印刷报价」在手机端才换成「副产线 · 画册报价」
       —— 桌面端保持原文案，避免把导航撑宽 */
    body.mp-topnav-on .yy-btn-pc {
        display: none;
    }

    body.mp-topnav-on .yy-btn-mp {
        display: inline;
    }

    /* 功能已取消，去掉下拉箭头；hover 变浅青的样式也一并取消（白底上会发灰） */
    body.mp-topnav-on .yy-drop-btn::after {
        display: none;
    }

    body.mp-topnav-on .yy-drop:hover .yy-drop-btn,
    body.mp-topnav-on .yy-drop.open .yy-drop-btn,
    body.mp-topnav-on .yy-drop:focus-within .yy-drop-btn {
        color: #01191a;
    }

    /* 原下拉导航功能取消 */
    body.mp-topnav-on .yy-drop .yy-sub {
        display: none !important;
    }

    /* 通栏下面的大标题 + 印刷合作协议 不再显示 */
    body.mp-topnav-on .card-main .topbar {
        display: none !important;
    }
}


/* ===========================================================
   手机端提示弹窗（print 页的 .xiaoxi：温馨提醒 / 剪切板提示）
   原来写死 460px 宽、top:40%，390 屏上左右被切掉
   =========================================================== */
@media (max-width: 900px) {

    .xiaoxi {
        top: 50%;
        width: calc(100% - 40px);
        max-width: 380px;
        max-height: 78vh;
        border-radius: 14px;
        overflow: hidden;
        box-shadow: 0 18px 44px rgba(0, 0, 0, .22);
    }

    .xiaoxi .b-box {
        border-radius: 14px 14px 0 0;
        max-height: calc(78vh - 48px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .xiaoxi .b-box h3 {
        padding-top: 18px;
        font-size: 17px;
        font-weight: 600;
    }

    .xiaoxi .b-box p {
        margin: 14px 16px 18px;
        font-size: 13.5px;
        line-height: 1.65;
        text-align: left;
    }

    .xiaoxi .b-box p img {
        max-width: 100%;
        height: auto;
    }

    .xiaoxi .s-box,
    .xiaoxi .s-box a {
        height: 48px;
        line-height: 48px;
        font-size: 16px;
    }

    .xiaoxi .s-box {
        border-radius: 0 0 14px 14px;
    }
}