/* ==========================================================================
   PureOne v2 (www.pureonechem.com) 响应式覆盖层
   --------------------------------------------------------------------------
   本文件在 style.css 之后加载(由 header_pyw_frontend.tpl 在 {$HEADER_CSS}
   之后注入 <link>),因此同特异性选择器即可覆盖桌面样式,尽量少用 !important。
   断点策略:
     - <=1024px  平板:开始收缩固定宽度容器
     - <=768px   手机:导航折叠为汉堡、网格降列、侧栏堆叠
     - <=480px   小屏手机:字号/间距微调
   桌面端(>=1025px)零回归,因为 .wp 仍 max-width:1200px 居中。
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. 全局容器:解除 min-width:1200px 硬阻断(移动端横向滚动的根因)
   -------------------------------------------------------------------------- */
@media screen and (max-width: 1024px) {
    html, body {
        min-width: 100% !important;
        overflow-x: hidden;
    }
    /* .wp 原为固定 1200px,改为弹性居中容器,桌面端外观不变 */
    .wp {
        width: 100% !important;
        max-width: 1200px;
        padding: 0 12px;
        box-sizing: border-box;
    }
}

/* ==========================================================================
   1. 顶部条 .top
   ========================================================================== */
@media screen and (max-width: 768px) {
    .top {
        height: auto;
        line-height: 22px;
        padding: 6px 10px;
        text-align: center;
    }
    .top .fl {
        display: none;            /* 移动端隐藏冗长欢迎语,腾出空间 */
    }
    .top .fr {
        font-size: 12px;
        word-break: break-all;
    }
}

/* ==========================================================================
   2. 头部 .neck (Logo / 搜索框 / 购物车 / 电话)
   ========================================================================== */
@media screen and (max-width: 1024px) {
    .neck {
        padding: 10px 0 14px 0;
    }
    .neck .logo {
        width: 130px;
    }
    /* 搜索框由固定 552px 变弹性 */
    .neck .search {
        width: auto;
        flex: 1;
        margin: 0 12px 0 14px;
    }
    .neck .search .select {
        width: 90px;
    }
    .neck .search .form {
        width: auto;
    }
    .neck .search .form input {
        width: 100%;
    }
    .neck .tel {
        width: auto;
        padding: 0 12px;
        font-size: 14px;
    }
}

@media screen and (max-width: 768px) {
    .neck {
        flex-wrap: wrap;
    }
    .neck .logo {
        width: 120px;
    }
    .neck .mid {
        order: 3;
        width: 100%;
        margin-top: 10px;
        flex-wrap: nowrap;
    }
    .neck .search {
        flex: 1;
        margin: 0;
        height: 44px;
        line-height: 44px;
    }
    .neck .search .select {
        width: 60px;
        height: 44px;
    }
    .neck .search .select .placeholder {
        height: 44px;
        line-height: 44px;
        text-indent: 0;
        font-size: 12px;
    }
    .neck .search .form {
        height: 42px;
    }
    .neck .search .form button {
        width: 70px;
        height: 42px;
        font-size: 14px;
    }
    .neck .search .form input {
        height: 44px;
        line-height: 44px;
        background-position: left 8px center;
        padding-left: 30px;
    }
    .neck .cart {
        width: 60px;
        height: 44px;
        margin-left: 8px;
    }
    /* 电话条移动端隐藏,改由页脚展示 */
    .neck .tel {
        display: none;
    }
}

/* 桌面端隐藏汉堡按钮(显式保障) */
.mobile-nav-btn { display: none; }

/* ==========================================================================
   3. 主导航 .menu (产品目录树 + 主菜单) —— 移动端折叠为汉堡
   ========================================================================== */
@media screen and (max-width: 768px) {
    .menu {
        line-height: 46px;
    }
    .menu .tree {
        display: none;
        width: auto;
        height: 46px;
        line-height: 46px;
        font-size: 14px;
        padding: 0 14px;
        flex: 1;
    }
    .menu .tree img {
        margin-right: 6px;
        width: 16px;
    }
    /* 主菜单默认收起,由汉堡按钮 .mobile-nav-btn 控制 */
    .menu .nav {
        display: none;
        clear: both;
        overflow: visible;
    }
    .menu .nav.nav-open {
        display: block;
    }
    .menu .nav ul {
        background: #1d56b0;
    }
    .menu .nav li {
        width: 100%;
        float: none;
        font-size: 14px;
        text-align: left;
        border-bottom: 1px solid rgba(255, 255, 255, .1);
    }
    .menu .nav li a {
        display: block;
        padding: 0 16px;
    }
    /* 汉堡按钮:仅移动端显示 */
    .mobile-nav-btn {
        display: flex !important;
        width: 46px;
        height: 46px;
        float: right;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 5px;
        cursor: pointer;
        background: none;
        border: 0;
    }
    .mobile-nav-btn span {
        display: block;
        width: 22px;
        height: 2px;
        background: #fff;
        transition: all .3s;
    }
    .mobile-nav-btn.active span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }
    .mobile-nav-btn.active span:nth-child(2) {
        opacity: 0;
    }
    .mobile-nav-btn.active span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }
}

/* 产品分类下拉 .tree_down + 子菜单 .submenu 移动端扁平化 */
@media screen and (max-width: 768px) {
    .tree_down {
        position: static;
        width: 100%;
        height: auto;
        z-index: 5;
        border-left: 0;
        border-right: 0;
        border-top: 0;
    }
    .tree_down ul {
        width: 100%;
    }
    .tree_down ul li {
        margin: 0;
        height: auto;
        line-height: 40px;
        border-bottom: 1px solid #f0f0f0;
    }
    .tree_down .submenu {
        position: static;
        width: 100%;
        height: auto;
        border: 0;
        border-top: 1px dashed #e0e0e0;
        display: block;
        padding: 8px 0 14px 0;
    }
    .tree_down ul li dl dd {
        width: 48%;
        margin: 2px 1%;
    }
}
/* ==========================================================================
   4. Banner 轮播
   ========================================================================== */
@media screen and (max-width: 1024px) {
    .banner {
        height: 260px;
    }
}
@media screen and (max-width: 768px) {
    .banner {
        height: 180px;
    }
    /* fade 效果下 li 绝对定位叠放,仅当前项显示 */
    .banner .bd {
        overflow: hidden;
        position: relative;
        height: 100%;
    }
    .banner .bd ul {
        position: relative;
        height: 100%;
    }
    .banner .bd ul li {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
    .banner .bd img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }
}

/* ==========================================================================
   5. 首页分区:热门分类 / 产品推荐 / 双栏
   ========================================================================== */
@media screen and (max-width: 1024px) {
    .section1 .list_sec1 li {
        width: calc(50% - 12px);
    }
    .section2 .sec2_b1 {
        width: 180px;
        height: 260px;
        background-size: 100% 100%;
    }
    .prolist li {
        width: 33.333%;
    }
    .prolist li .pic {
        width: 100% !important;
        height: 140px;
    }
    .section2 .sec2_t2 li {
        width: 50%;
    }
    /* .section3 是 flex 容器(模板 class="section3 flex flex-bet"),默认 nowrap,
       必须允许换行,两个 .x6 才会上下堆叠,而不是被 flex 压缩成两列 */
    .section3 {
        flex-wrap: wrap;
    }
    .section3 .x6 {
        width: 100%;
        margin-bottom: 16px;
    }
    .section3 .item1 {
        overflow: hidden;
    }
}

@media screen and (max-width: 768px) {
    .sec_type {
        padding: 20px 0 16px 0;
    }
    .sec_type .cat {
        font-size: 18px;
    }
    /* 热门分类:手机强制两列,去掉桌面端 margin 干扰 */
    .section1 .list_sec1 {
        margin-top: 0;
    }
    .section1 .list_sec1 ul {
        justify-content: flex-start;
        gap: 10px 6px;
    }
    .section1 .list_sec1 li {
        width: calc(25% - 6px);
        margin: 0;
    }
    .section1 .list_sec1 .pic {
        height: 52px;
        margin-bottom: 0;
        line-height: 0;
        overflow: hidden;
    }
    .section1 .list_sec1 .pic img {
        display: block;
        vertical-align: top;
        margin: 0;
        padding: 0;
    }
    .section1 .list_sec1 .tit {
        font-size: 11px;
        padding: 0 2px;
        margin: -10px 0 0 0;
        line-height: 1.2;
    }
    /* 推广位与产品列表降为两列 */
    .section2 {
        overflow: hidden;
    }
    .section2 .sec2_b1 {
        width: 100%;
        float: none;
        height: 120px;
        padding-top: 20px;
        margin-bottom: 12px;
    }
    .prolist ul {
        margin-left: 0 !important;
    }
    .prolist li {
        width: 50%;
        float: left;
    }
    .prolist li .item {
        margin: 0 4px 10px 4px;
    }
    .prolist li .pic {
        height: 120px !important;
        width: 100% !important;
    }
    .prolist li .tit,
    .prolist li .desc,
    .prolist li .price {
        padding-left: 4px;
        padding-right: 4px;
    }
    .section2 .sec2_t2 ul {
        margin: 0;
    }
    .section2 .sec2_t2 li {
        width: 100%;
        float: none;
        margin-bottom: 12px;
    }
    .section2 .sec2_t2 li .item {
        margin: 0;
    }
    .section3 .sec_type {
        padding-bottom: 10px;
    }
    .section3 .item1 .pic {
        display: none;
    }
    /* 覆盖模板里写死的 HTML 属性 width="220" height="220",按容器宽度等比缩放 */
    .section3 .item1 .pic img {
        width: 100%;
        max-width: 100%;
        height: auto;
    }
    .list1 li {
        line-height: 26px;
    }
}

/* ==========================================================================
   6. 侧栏 + 内容区布局 (.sidebar + .main .contbox)
   ========================================================================== */
@media screen and (max-width: 1024px) {
    .main .contbox {
        width: 730px;
    }
}
@media screen and (max-width: 768px) {
    /* 取消左右浮动,改为上下堆叠 */
    .main {
        padding-bottom: 30px;
    }
    .sidebar {
        width: 100%;
        float: none;
        margin-bottom: 14px;
    }
    .main .contbox {
        width: 100%;
        float: none;
    }
    .sidebar ul li a {
        line-height: 46px;
        font-size: 14px;
    }
    .type_tit {
        height: 44px;
        line-height: 44px;
        font-size: 16px;
    }
    /* 产品列表页: 强制两列 */
    .main .contbox .prolist li {
        width: 50% !important;
        float: left !important;
        max-width: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    .main .contbox .prolist li .item {
        margin: 0 4px 10px 4px !important;
    }
    .main .contbox .prolist li .pic {
        height: 120px !important;
        width: 100% !important;
    }
    /* 搜索结果页(all.tpl): 强制两列 */
    .search_box .prolist ul {
        margin: 0 !important;
    }
    .search_box .prolist li {
        width: 50% !important;
        float: left !important;
        margin: 0 !important;
    }
    .search_box .prolist li .item {
        margin: 4px !important;
    }
    .search_box .prolist li .pic {
        height: 120px !important;
        width: 100% !important;
    }
    /* 搜索结果页 list2 单列显示 */
    .search_box .list2 li {
        width: 100% !important;
        float: none !important;
    }
    /* 关于我们页: 隐藏长图，文字区域全宽展开 */
    .about {
        display: block !important;
    }
    .about .pic {
        display: none !important;
    }
    .about .info {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

/* ==========================================================================
   7. 面包屑 / 分页 / 关于我们 / 联系页
   ========================================================================== */
@media screen and (max-width: 768px) {
    .crumbs {
        padding: 10px 0 14px 0;
        font-size: 12px;
    }
    .pages {
        font-size: 13px;
        padding: 20px 0 14px 0;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
        text-align: center;
    }
    .pages ul {
        display: inline-flex;
        flex-wrap: nowrap;
        white-space: nowrap;
    }
    .pages li {
        flex-shrink: 0;
        margin: 0 2px;
    }
    .pages li a,
    .pages li span {
        width: 34px;
        height: 34px;
        font-size: 13px;
    }
    .about .info {
        width: 100%;
        font-size: 13px;
    }
    .contact .map {
        height: 240px;
    }
    /* 联系与支持页:移动端改为单列,文字对齐 */
    .contact .lx1 {
        flex-direction: column;
    }
    .contact .lx1 .x6 {
        width: 100%;
    }
    .contact .lx1 p {
        margin-bottom: 10px;
        font-size: 14px;
        line-height: 1.8;
    }
    .contact .lx1 .int {
        padding-left: 0;
    }
}

/* ==========================================================================
   8. Footer 页脚
   ========================================================================== */
@media screen and (max-width: 768px) {
    .ft1 {
        padding: 18px 0 14px 0;
    }
    .ft1 .ft1_left,
    .ft1 .ft1_mid,
    .ft1 .ft1_code {
        width: 100%;
        float: none;
        margin-left: 0;
        text-align: center;
    }
    /* 左侧联系信息更紧凑 */
    .ft1 .ft1_left .footer_logo img {
        width: 140px;
    }
    .ft1 .ft1_left .msg {
        margin-top: 10px;
        line-height: 22px;
        font-size: 12px;
    }
    /* 中间三列导航改为横向紧凑排列 */
    .ft1 .ft1_mid {
        display: none;
    }
    .ft1 .ft1_mid ul {
        flex-wrap: nowrap;
        justify-content: space-around;
    }
    .ft1 .ft1_mid ul li {
        padding: 0 4px;
    }
    .ft1 .ft1_mid .tit {
        font-size: 14px;
        padding-bottom: 8px;
        margin-bottom: 6px;
    }
    .ft1 .ft1_mid .dd p {
        height: 26px;
        line-height: 26px;
        font-size: 12px;
    }
    /* 二维码缩小 */
    .ft1 .ft1_code {
        margin-top: 14px;
    }
    .ft1 .ft1_code .tit {
        font-size: 14px;
        margin-bottom: 8px;
    }
    .ft1 .ft1_code .qrcode img {
        width: 90px;
    }
    /* copyright 更紧凑 */
    .copyright {
        padding: 14px 0;
        line-height: 20px;
        font-size: 11px;
    }
    .copyright p {
        margin: 2px 0;
    }
}

/* ==========================================================================
   9. 用户中心 (.user-center-* 使用了内联样式,需 !important 覆盖)
   ========================================================================== */
@media screen and (max-width: 768px) {
    .about.pb50 {
        padding-bottom: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    .about.pb50 > .user-center-container,
    .user-center-container {
        margin: 0 !important;
        padding: 0 !important;
    }
    .user-center-layout {
        flex-direction: column !important;
        gap: 0 !important;
        align-items: stretch !important;
    }
    .user-nav-wrapper {
        width: 100% !important;
        flex-shrink: 0 !important;
        padding: 10px 10px 0 10px !important;
        box-sizing: border-box !important;
    }
    /* 导航菜单改为横向紧凑排列 */
    .user-nav-sidebar {
        min-height: auto !important;
        padding: 8px 0 !important;
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 4px !important;
    }
    .menu-group {
        margin-bottom: 0 !important;
        display: contents;
    }
    .menu-group-title {
        display: none;
    }
    .user-nav-item {
        padding: 6px 12px !important;
        border-left: none !important;
        border-radius: 16px !important;
        background: #f5f5f5 !important;
        font-size: 12px !important;
        white-space: nowrap;
        flex: 0 0 auto;
    }
    .user-nav-item.active {
        background: #f5222d !important;
        color: #fff !important;
    }
    .user-nav-item.active .nav-icon img {
        filter: brightness(0) invert(1);
    }
    .nav-icon {
        width: 14px !important;
        height: 14px !important;
        margin-right: 4px !important;
    }
    .nav-icon img {
        width: 14px !important;
        height: 14px !important;
    }
    .nav-text {
        font-size: 12px !important;
    }
    .menu-sub-item {
        padding-left: 0 !important;
    }
    .user-content-wrapper {
        padding: 20px !important;
        min-height: 320px !important;
        background: #fff !important;
        box-shadow: none !important;
        border-radius: 0 !important;
    }
    .user-content-header {
        margin: 0 0 20px 0 !important;
        padding: 0 0 12px 0 !important;
        border-bottom: 1px solid #e8e8e8 !important;
        background: #fff !important;
    }
    .user-content-body {
        padding: 0 !important;
        margin: 0 !important;
    }
}

/* ==========================================================================
   10. 表格通用:超宽时横向滚动(不破坏表格语义)
   ========================================================================== */
@media screen and (max-width: 768px) {
    .contbox table,
    .user-content-wrapper table,
    .detail-param-table {
        display: block;
        width: 100% !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }
}

/* ==========================================================================
   11. Toast 提示移动端宽度收紧
   ========================================================================== */
@media screen and (max-width: 480px) {
    .p1-toast-item {
        min-width: auto;
        width: calc(100vw - 24px);
        max-width: 100%;
        padding: 10px 14px;
        font-size: 13px;
    }
}

/* ==========================================================================
   A. 移动端汉堡菜单 + 侧边抽屉导航
   ========================================================================== */

/* 汉堡按钮:仅移动端显示 */
.mobile-menu-toggle {
    display: none;
}

/* 移动端导航抽屉和遮罩:PC端强制隐藏(>=769px), 移动端由@media控制 */
@media screen and (min-width: 769px) {
    .mobile-nav-overlay,
    .mobile-nav-drawer {
        display: none !important;
    }
}

@media screen and (max-width: 768px) {
    .mobile-menu-toggle {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 5px;
        width: 44px;
        height: 44px;
        background: #1d56b0;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        margin-left: 8px;
        padding: 0;
    }
    .mobile-menu-toggle span {
        display: block;
        width: 22px;
        height: 2px;
        background: #fff;
        transition: all .3s;
    }
    .mobile-menu-toggle.active span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }
    .mobile-menu-toggle.active span:nth-child(2) {
        opacity: 0;
    }
    .mobile-menu-toggle.active span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }

    /* 遮罩层 */
    .mobile-nav-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, .5);
        z-index: 999;
    }
    .mobile-nav-overlay.show {
        display: block;
    }

    /* 侧边抽屉 */
    .mobile-nav-drawer {
        position: fixed;
        top: 0;
        right: -280px;
        width: 260px;
        height: 100%;
        background: #fff;
        z-index: 1000;
        transition: right .3s ease;
        box-shadow: -2px 0 8px rgba(0,0,0,.15);
        display: none;
        flex-direction: column;
    }
    .mobile-nav-drawer.open {
        display: flex;
        right: 0;
    }
    .drawer-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 14px 16px;
        background: #1d56b0;
        color: #fff;
        font-size: 16px;
        font-weight: bold;
    }
    .drawer-close {
        background: none;
        border: none;
        color: #fff;
        font-size: 24px;
        cursor: pointer;
        line-height: 1;
        padding: 0 4px;
    }
    .drawer-body {
        flex: 1;
        overflow-y: auto;
    }
    .drawer-menu {
        list-style: none;
        padding: 0;
        margin: 0;
    }
    .drawer-menu li {
        border-bottom: 1px solid #eee;
    }
    .drawer-menu li a {
        display: block;
        padding: 14px 16px;
        color: #333;
        font-size: 15px;
        text-decoration: none;
        transition: background .2s;
    }
    .drawer-menu li a:active {
        background: #f5f5f5;
    }
}

/* ==========================================================================
   12. 小屏手机 (<=480px) 微调
   ========================================================================== */
@media screen and (max-width: 480px) {
    .neck .logo {
        width: 100px;
    }
    .menu .tree {
        font-size: 13px;
        padding: 0 10px;
    }
    .banner {
        height: 150px;
    }
    /* 热门分类在小屏手机上仍保持两列 */
    .section1 .list_sec1 li {
        width: calc(25% - 6px);
        margin: 0;
        max-width: none;
        float: none;
    }
    .prolist li {
        width: 50%;
        max-width: none;
        margin-left: 0;
        margin-right: 0;
        float: left;
    }
    .sec_type .cat {
        font-size: 16px;
    }
    .footer .copyright {
        font-size: 11px;
        line-height: 20px;
    }
}

/* ==========================================================================
   13. 首页专项修复:消除横向溢出 + 图片按比例缩放
   --------------------------------------------------------------------------
   以下规则解决首页在移动端"溢出屏幕"的几个具体元凶:
   a) 合作机构 logo 行:模板内联 flex-wrap:nowrap + 6 个 logo 撑破屏幕
   b) banner:固定高度下图片需 object-fit 防变形
   c) 全局图片兜底:覆盖模板里写死的 HTML width/height 属性
   ========================================================================== */

/* a) 合作机构:强制换行,logo 等比缩小(内联 nowrap 用 !important 覆盖) */
@media screen and (max-width: 768px) {
    .links.partner-orgs .org-logos ul {
        flex-wrap: wrap !important;
        gap: 10px 4% !important;
        justify-content: flex-start !important;
    }
    .links.partner-orgs .org-logos li {
        flex: 0 0 48% !important;
        max-width: 48% !important;
    }
    .links.partner-orgs .org-logos li img {
        max-width: 100% !important;
        max-height: 42px !important;
    }
}

/* b) banner:图片在固定高度容器内按比例缩放,不变形、不溢出。
   注意:不干预 .bd ul/li 的 width,SuperSlide leftLoop 会自行计算管理 */
@media screen and (max-width: 1024px) {
    .banner .bd img {
        width: 100%;
        max-width: 100%;
        display: block;
    }
}

/* c) 全局图片兜底:移动端强制所有图片不超过容器宽度并等比缩放,
      覆盖模板里写死的 HTML width="xxx" 属性 */
@media screen and (max-width: 768px) {
    .wp img,
    .prolist img,
    .section1 img,
    .section2 img,
    .section3 img,
    .contbox img,
    .sidebar img {
        max-width: 100%;
        height: auto;
    }
}