/* multi12 手机端样式：在 style.css 之后加载。>1024 是 PC，不受影响 */

/* ≤1024 用 rem 按 750 设计稿缩放：1rem = 视口宽 / 7.5（原来由 public.js 在 DOMContentLoaded 后设置，首屏会整页重排） */
@media (max-width: 1024px) {
    html { font-size: calc(100vw / 7.5); }
}

/* 首页 banner、内页 banner 的背景图由内联 CSS 变量给出：--bg 原图，--bg-m 手机小图（functions.phtml 的 $bg_vars）。
   首页 slide 原来是内联 background 简写（位置、尺寸都是初始值），这里保持一致，PC 外观不变 */
.banner .swiper-slide[style*="--bg"] { background: var(--bg); }
.smban[style*="--bg"] { background-image: var(--bg); }
@media (max-width: 768px) {
    .banner .swiper-slide[style*="--bg"] { background: var(--bg) center / cover no-repeat; }
    .banner .swiper-slide[style*="--bg-m"] { background: var(--bg-m) center / cover no-repeat; }
    .smban[style*="--bg-m"] { background-image: var(--bg-m); }
}

/* ≤1024 图片先占好位置（懒加载的图片加载后不再把下面的内容往下推）。卡片统一比例、裁切填满 */
@media (max-width: 1024px) {
    .catep .items .pics, .jdswiper .tu, .cphot .lists .pic, .cpside .listc .pic, .cpcent .pic, .bklist .pic { display: block; aspect-ratio: 1 / 1; overflow: hidden; }
    .catep .items:has(.name.line) .pics, .sycases .pics, .cpscroll .pics { display: block; aspect-ratio: 4 / 3; overflow: hidden; }
    .synew .pic, .mnews .photo { aspect-ratio: 3 / 2; overflow: hidden; }
    .syabout .photo .pic { aspect-ratio: 5 / 6; }
    .syabout .smdw { aspect-ratio: 1 / 1; overflow: hidden; }
    .sytest .tu { aspect-ratio: 6 / 7; overflow: hidden; }
    .catep .items .pics img, .jdswiper .tu img, .cphot .lists .pic img, .cpside .listc .pic img, .cpcent .pic img, .bklist .pic img,
    .sycases .pics img, .cpscroll .pics img, .synew .pic img, .mnews .photo img, .syabout .photo .pic, .syabout .smdw img, .sytest .tu img {
        width: 100%; height: 100%; object-fit: cover;
    }
}

/* ================================================================
   手机站骨架：≤1024 抽屉菜单；≤768 底部操作条、询价表单从底部弹出、页面导航不悬浮
   ================================================================ */
.m-drawer,
.m-mask,
.m-actbar,
.m-lang-btn {
    display: none;
}

@media (max-width: 1024px) {
    /* 顶部：原来从左侧滑出的一级菜单不再使用，改用抽屉 */
    .header .nav ul {
        display: none !important;
    }
    button.menus {
        border: 0;
        padding: 0;
        background-color: transparent;
        cursor: pointer;
    }
    .header .nav .m-lang-btn {
        display: flex;
        align-items: center;
        position: absolute;
        right: 0.9rem;
        top: 0;
        height: 0.9rem;
        padding: 0 8px;
        border: 0;
        background: none;
        color: #fff;
        font-family: inherit;
        font-size: 14px;
        font-weight: bold;
        cursor: pointer;
    }
    .header .nav .m-lang-btn img {
        width: 20px;
        margin-right: 5px;
    }

    /* 抽屉 */
    .m-drawer {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        width: 86vw;
        max-width: 360px;
        background: #fff;
        z-index: 1001;
        transform: translateX(100%);
        visibility: hidden;
        transition: transform .3s, visibility .3s;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        line-height: normal;
        text-align: left;
        font-family: inherit;
    }
    body.m-drawer-open .m-drawer {
        transform: none;
        visibility: visible;
    }
    .m-mask {
        display: block;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: rgba(0, 0, 0, .45);
        z-index: 1000;
        opacity: 0;
        pointer-events: none;
        transition: opacity .3s;
    }
    body.m-drawer-open .m-mask,
    body.m-sheet-open .m-mask {
        opacity: 1;
        pointer-events: auto;
    }
    body.m-drawer-open,
    body.m-sheet-open {
        overflow: hidden;
    }
    .m-drawer-head {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex: none;
        height: 56px;
        padding: 0 6px 0 16px;
        background: #000;
        color: #DE9A4F;
        font-size: 16px;
        font-weight: bold;
        letter-spacing: 1px;
    }
    .m-drawer-close {
        width: 44px;
        height: 44px;
        border: 0;
        background: none;
        color: #fff;
        font-size: 32px;
        line-height: 44px;
        cursor: pointer;
    }
    .m-drawer-list {
        flex: 1;
    }
    .m-drawer-row {
        display: flex;
        align-items: stretch;
        border-bottom: 1px solid #eee;
    }
    .m-drawer-row a {
        flex: 1;
        min-width: 0;
        display: block;
        padding: 13px 16px;
        font-size: 16px;
        line-height: 22px;
        color: #333;
        text-transform: capitalize;
        overflow-wrap: break-word;
    }
    .m-drawer-toggle {
        flex: none;
        position: relative;
        width: 48px;
        border: 0;
        border-left: 1px solid #eee;
        background: none;
        cursor: pointer;
    }
    .m-drawer-toggle::before {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        width: 8px;
        height: 8px;
        border-right: 2px solid #9c6224;
        border-bottom: 2px solid #9c6224;
        transform: translate(-50%, -70%) rotate(45deg);
        transition: transform .2s;
    }
    .m-drawer-item.open > .m-drawer-row > .m-drawer-toggle::before {
        transform: translate(-50%, -30%) rotate(-135deg);
    }
    .m-drawer-sub {
        display: none;
        background: #f7f7f7;
    }
    .m-drawer-item.open > .m-drawer-sub {
        display: block;
    }
    .m-drawer-sub .m-drawer-row a {
        padding-left: 28px;
        font-size: 15px;
    }
    .m-drawer-sub .m-drawer-sub .m-drawer-row a {
        padding-left: 40px;
        font-size: 14px;
        color: #555;
    }
    .m-drawer-lang {
        display: flex;
        flex-wrap: wrap;
        flex: none;
        padding: 6px 10px;
        border-bottom: 1px solid #eee;
    }
    .m-drawer-lang a {
        display: flex;
        align-items: center;
        min-height: 44px;
        padding: 0 8px;
        font-size: 14px;
        color: #333;
    }
    .m-drawer-lang a.on {
        color: #9c6224;
        font-weight: bold;
    }
    .m-drawer-lang img {
        width: 20px;
        margin-right: 6px;
    }
    .m-drawer-contact {
        flex: none;
        padding: 8px 16px calc(8px + env(safe-area-inset-bottom));
        background: #111;
    }
    .m-drawer-contact a {
        display: flex;
        align-items: center;
        min-height: 44px;
        color: #fff;
        font-size: 14px;
        overflow-wrap: anywhere;
    }
    .m-drawer-contact img {
        flex: none;
        width: 18px;
        height: 18px;
        object-fit: contain;
        margin-right: 8px;
    }
}

@media (max-width: 768px) {
    body {
        padding-bottom: calc(56px + env(safe-area-inset-bottom));
    }
    /* 右侧悬浮按钮、Request for quotation 由底部操作条替代 */
    .sidebtn,
    .fastopen2 {
        display: none !important;
    }
    .m-actbar {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 900;
        height: calc(56px + env(safe-area-inset-bottom));
        padding-bottom: env(safe-area-inset-bottom);
        background: #fff;
        box-shadow: 0 -2px 10px rgba(0, 0, 0, .12);
    }
    .m-act {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 0;
        border: 0;
        font-family: inherit;
        font-size: 15px;
        color: #fff;
        cursor: pointer;
    }
    .m-act img {
        flex: none;
        width: 22px;
        height: 22px;
        object-fit: contain;
        margin-right: 6px;
    }
    .m-act-wa {
        background: #1b7f3b;
    }
    .m-act-mail {
        background: #3f4a50;
    }
    .m-act-quote {
        flex: 1.3;
        background: #9c6224;
        font-size: 16px;
        font-weight: bold;
    }

    /* 询价表单：从底部弹出 */
    .quote {
        top: auto !important;
        bottom: 0;
        left: 0;
        right: 0 !important;
        width: auto;
        margin: 0;
        transform: none;
        max-height: 88vh;
        overflow-y: auto;
        z-index: 1001;
        padding: 16px 0 calc(16px + env(safe-area-inset-bottom));
        border-radius: 16px 16px 0 0;
        background: #fff;
        box-shadow: 0 -4px 20px rgba(0, 0, 0, .2);
    }
    .quote .close {
        width: 44px;
        height: 44px;
        padding: 12px;
        top: 4px;
        right: 4px;
    }
    .quote .fills {
        padding: 0 16px;
        border-radius: 0;
    }
    .quote .fills .tx {
        display: none;
    }
    .quote h3 {
        padding: 6px 48px 0 0;
        font-size: 20px;
        text-align: left;
    }
    .quote h4 {
        font-size: 14px;
        line-height: 20px;
    }
    .quote .fills input,
    .quote .fills textarea {
        font-size: 16px;
    }
    .quote .fills input {
        height: 44px;
    }
    .quote .fills button {
        height: 46px;
        margin-top: 14px;
        font-size: 16px;
    }

    /* 页面导航：不悬浮，放在 banner 下面 */
    .fastnav {
        position: static;
        width: auto;
        margin: 12px 16px 0;
    }
    .fastnav h2 {
        height: 44px;
        padding: 0 14px;
        font-size: 15px;
        border-radius: 6px;
    }
    .fastnav h2 img {
        width: 18px;
    }
    .fastnav .drop {
        margin-top: 8px;
        padding: 36px 12px 8px;
    }
    .fastnav .drop .close {
        width: 44px;
        height: 44px;
        background-size: 14px auto;
    }
    .fastnav .drop .dka {
        padding: 11px 0;
        font-size: 15px;
    }
}

/* 后台富文本（产品模块、分类说明、新闻正文）：≤1024 不撑宽页面 */
@media (max-width: 1024px) {
    .infdesc, .cpart .txts {
        overflow-wrap: anywhere;
    }
    .infdesc img, .cpart .txts img {
        max-width: 100% !important;
        height: auto !important;
    }
    .infdesc iframe, .cpart .txts iframe, .infdesc video, .cpart .txts video {
        display: block;
        width: 100% !important;
        max-width: 100%;
        height: auto !important;
        aspect-ratio: 16 / 9;
    }
    .infdesc table, .cpart .txts table {
        display: block;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* ≤1024：字体缺字或未加载完时用无衬线字体（原来 body 只写了 PingFang，回退成衬线体） */
@media (max-width: 1024px) {
    body, input, textarea, button { font-family: "PingFang", Arial, sans-serif; }
}

/* 页脚邮箱：.footer 整体 capitalize 会把邮箱首字母大写（Admin@Xxx.Com），联系方式保持原样（所有宽度） */
.footer .lxs .lxone span {
    text-transform: none;
}

/* ================================================================
   手机端各页面（≤768）
   ================================================================ */
@media (max-width: 768px) {
    /* 首页 banner：文字加阴影，图片复杂时也看得清 */
    .banner .word h1,
    .banner .word h3,
    .banner .word .ban-sub {
        text-shadow: 0 1px 6px rgba(0, 0, 0, .6);
    }
    .banner .word .ban-sub {
        line-height: 1.4;
    }

    /* 内页 banner：高度随标题，标题不跑到固定 header 下面 */
    .smban,
    .smban.h960 {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        height: auto;
        min-height: 4.4rem;
        padding-top: 0.9rem;
    }
    .smban .word {
        position: relative;
        bottom: auto;
        padding: 0.3rem 0 0.2rem;
    }
    .smban .word .wta {
        font-size: 24px;
        line-height: 1.3;
        padding: 0 16px;
        overflow-wrap: break-word;
    }
    .smban .word .wtb {
        font-size: 14px;
        line-height: 1.5;
        padding: 6px 16px 0;
    }
    .gdways .area p {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .httita {
        white-space: normal;
        line-height: 1.35;
        padding: 0 16px;
    }

    /* 产品分类卡片（首页、关于页应用领域）：两列，名称在图片下方 */
    .catep .lists {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }
    .catep .items {
        float: none;
        width: auto;
        margin: 0;
    }
    .catep .items .name,
    .catep .items .name.line {
        width: 100%;
        margin: 0;
        padding: 8px 6px;
        font-size: 14px;
        line-height: 1.35;
        box-shadow: 0 2px 6px rgba(0, 0, 0, .08);
    }
    .catep .items .name b {
        white-space: normal;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
    .catep .items .name i {
        width: 18px;
        height: 18px;
        margin: 6px auto 0;
    }
    .catep .items .name.line {
        padding: 8px;
    }
    .catep .items .name.line img {
        height: 28px;
        margin-right: 8px;
    }
    .catep .items .name.line b {
        font-size: 14px;
        line-height: 1.35;
    }

    /* 首页关于：两段说明改单列，不再断词 */
    .syabout .info ul li,
    .syabout .info ul li:nth-child(2n) {
        width: 100%;
        float: none;
        word-break: normal;
        overflow-wrap: break-word;
        margin-bottom: 0.3rem;
    }
    .syprocess .spic {
        aspect-ratio: 4 / 3;
    }
    .syprocess .spic img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    /* 新闻没有缩略图时不留空白 */
    .synew .item .pic:has(img[src=""]) {
        display: none;
    }

    /* 产品列表、侧栏相关产品：两列，名称固定占两行高（同一行卡片等高），超出显示省略号。
       上下留白放在 .name 上，放在 i 上会露出半截第三行 */
    .cphot .item .name i {
        white-space: normal;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        line-height: 1.35;
        min-height: 2.7em;
    }
    .cphot .item .name {
        line-height: 1.35;
        padding-top: 6px;
        padding-bottom: 6px;
    }
    .cpside .listc {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }
    .cpside .listc .item {
        float: none;
        width: auto;
        margin: 0;
    }

    /* 富文本表格：单元格不在单词中间断开，表格整体可横向滑动 */
    .infdesc table td,
    .infdesc table th,
    .cpart .txts table td,
    .cpart .txts table th {
        overflow-wrap: normal;
        word-break: normal;
        min-width: 4.5em;
    }
}

/* 后台富文本里的链接：加下划线，不只靠颜色区分（所有宽度） */
.cpart .txts a,
.infdesc a {
    text-decoration: underline;
}

@media (max-width: 1024px) {
    /* 产品页 banner 轮播图先占位，图片加载后 banner 不再变高 */
    .bxscroll .spic {
        aspect-ratio: 4 / 3;
    }
    .bxscroll .spic img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    /* 轮播圆点：放大可点区域（圆点中心间距 ≥ 24px） */
    .swiper-container .swiper-pagination .swiper-pagination-bullet {
        width: 10px;
        height: 10px;
        margin: 0 8px !important;
    }
}

/* 产品页轮播：≤1024 一屏一张，不做缩放动画（避免初始化和切换时 banner 高度变化） */
@media (max-width: 1024px) {
    .bxscroll .swiper-slide,
    .bxscroll .swiper-slide-active,
    .bxscroll .swiper-slide-duplicate-active {
        transform: none;
        transition: none;
    }
}

/* 关于区块：长单词（俄语、西语）不把 flex 列撑宽（所有宽度，正常文字外观不变） */
.syabout .info { min-width: 0; overflow-wrap: break-word; }